docs: API reference & readme updates (#209)

.changeset/odd-cherries-love.md

@@ -0,0 +1,5 @@
+---
+"bits-ui": patch
+---
+
+fix: bug with select menus inside popovers not restoring scroll

.changeset/silent-items-play.md

@@ -0,0 +1,5 @@
+---
+"bits-ui": patch
+---
+
+add `closeOnItemClick` prop to menu components

README.md

@@ -1,9 +1,7 @@
-# Bits
+# Bits UI
 
-Headless Svelte components built with [Melt UI](https://melt-ui.com) builders.
+The headless components for Svelte.
 
 [Read the docs](https://bits-ui.com) (still a work in progress)
 
-## Credits
-
-Logo created by [BruceWayyn](https://github.com/brucewayyn)
+Powered by [Melt UI](https://melt-ui.com) builders.

package.json

@@ -92,7 +92,7 @@
 	"type": "module",
 	"dependencies": {
 		"@internationalized/date": "^3.5.0",
-		"@melt-ui/svelte": "0.64.5",
+		"@melt-ui/svelte": "0.65.1",
 		"nanoid": "^5.0.4"
 	},
 	"peerDependencies": {

src/components/api-ref/prop-type-content.svelte

@@ -15,7 +15,7 @@
 		<Code class="bg-transparent px-0">{type.type}</Code>
 		<Popover.Root>
 			<Popover.Trigger
-				class="inline-flex items-center justify-center rounded-button text-foreground-alt transition-colors hover:text-foreground-alt/80 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground focus-visible:ring-offset-2 focus-visible:ring-offset-background"
+				class="inline-flex items-center justify-center rounded-button text-muted-foreground transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground focus-visible:ring-offset-2 focus-visible:ring-offset-background"
 			>
 				<Info class="sq-4" weight="bold" />
 				<span class="sr-only">See type definition</span>

src/components/component-preview.svelte

@@ -30,10 +30,14 @@
 					value === "preview"
 						? "font-semibold shadow-mini hover:bg-opacity-90"
 						: "shadow-none transition-all hover:text-foreground-alt",
-					"relative bg-transparent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground focus-visible:ring-offset-2 focus-visible:ring-offset-background"
+					"group relative bg-transparent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground focus-visible:ring-offset-2 focus-visible:ring-offset-background"
 				)}
 			>
-				<span class="z-20"> Preview </span>
+				<span
+					class="z-20 group-data-[state=active]:text-foreground group-data-[state=inactive]:text-foreground-alt"
+				>
+					Preview
+				</span>
 				{#if value === "preview"}
 					<div
 						class="absolute left-0 top-0 h-8 w-full rounded-[7px] bg-background"
@@ -49,10 +53,14 @@
 					value === "code"
 						? "bg-transparent font-semibold shadow-mini hover:bg-opacity-90"
 						: "bg-transparent shadow-none transition-all hover:text-foreground-alt",
-					"relative focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground focus-visible:ring-offset-2 focus-visible:ring-offset-background"
+					"group relative focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground focus-visible:ring-offset-2 focus-visible:ring-offset-background"
 				)}
 			>
-				<span class="z-20"> &lt;Code&gt; </span>
+				<span
+					class="z-20 group-data-[state=active]:text-foreground group-data-[state=inactive]:text-foreground-alt"
+				>
+					&lt;Code&gt;
+				</span>
 				{#if value === "code"}
 					<div
 						class="absolute left-0 top-0 h-8 w-full rounded-[7px] bg-background"

src/components/demos/context-menu-demo.svelte

@@ -32,12 +32,12 @@
 			</div>
 			<div class="ml-auto flex items-center gap-px">
 				<kbd
-					class="inline-flex items-center justify-center rounded-button border border-dark-10 bg-background text-xs text-muted-foreground shadow-kbd sq-5"
+					class="inline-flex items-center justify-center rounded-button border border-dark-10 bg-background text-[13px] text-muted-foreground shadow-kbd sq-5"
 				>
 					⌘
 				</kbd>
 				<kbd
-					class="inline-flex items-center justify-center rounded-button border border-dark-10 bg-background text-[10px] text-muted-foreground shadow-kbd sq-5"
+					class="inline-flex items-center justify-center rounded-button border border-dark-10 bg-background text-[11px] text-muted-foreground shadow-kbd sq-5"
 				>
 					E
 				</kbd>
@@ -53,12 +53,12 @@
 				</div>
 				<div class="ml-auto flex items-center gap-px">
 					<kbd
-						class="inline-flex items-center justify-center rounded-button border border-dark-10 bg-background text-xs text-muted-foreground shadow-kbd sq-5"
+						class="inline-flex items-center justify-center rounded-button border border-dark-10 bg-background text-[13px] text-muted-foreground shadow-kbd sq-5"
 					>
 						⌘
 					</kbd>
 					<kbd
-						class="inline-flex items-center justify-center rounded-button border border-dark-10 bg-background text-[10px] text-muted-foreground shadow-kbd sq-5"
+						class="inline-flex items-center justify-center rounded-button border border-dark-10 bg-background text-[11px] text-muted-foreground shadow-kbd sq-5"
 					>
 						N
 					</kbd>
@@ -105,12 +105,12 @@
 			</div>
 			<div class="ml-auto flex items-center gap-px">
 				<kbd
-					class="inline-flex items-center justify-center rounded-button border border-dark-10 bg-background text-xs text-muted-foreground shadow-kbd sq-5"
+					class="inline-flex items-center justify-center rounded-button border border-dark-10 bg-background text-[13px] text-muted-foreground shadow-kbd sq-5"
 				>
 					⌘
 				</kbd>
 				<kbd
-					class="inline-flex items-center justify-center rounded-button border border-dark-10 bg-background text-[10px] text-muted-foreground shadow-kbd sq-5"
+					class="inline-flex items-center justify-center rounded-button border border-dark-10 bg-background text-[11px] text-muted-foreground shadow-kbd sq-5"
 				>
 					D
 				</kbd>

src/components/demos/dialog-demo.svelte

@@ -38,7 +38,7 @@
 				<div class="relative w-full">
 					<input
 						id="apiKey"
-						class="inline-flex h-input w-full items-center rounded-card-sm border border-dark-10 bg-background px-4 text-sm placeholder:text-foreground-alt/50 focus:outline-none focus:ring-2 focus:ring-foreground focus:ring-offset-2 focus:ring-offset-background"
+						class="inline-flex h-input w-full items-center rounded-card-sm border border-border-input bg-background px-4 text-sm placeholder:text-foreground-alt/50 hover:border-dark-40 focus:outline-none focus:ring-2 focus:ring-foreground focus:ring-offset-2 focus:ring-offset-background"
 						placeholder="secret_api_key"
 						type="password"
 						autocomplete="off"

src/components/demos/radio-group-demo.svelte

@@ -9,7 +9,7 @@
 		<RadioGroup.Item
 			id="amazing"
 			value="amazing"
-			class="shrink-0 rounded-full border border-border-input bg-background transition-all duration-150 ease-in-out sq-5 data-[state=checked]:border-6 data-[state=checked]:border-foreground"
+			class="shrink-0 rounded-full border border-border-input bg-background transition-all duration-150 ease-in-out sq-5 hover:border-dark-40 data-[state=checked]:border-6 data-[state=checked]:border-foreground"
 		/>
 		<Label.Root for="amazing">Amazing</Label.Root>
 	</div>
@@ -19,7 +19,7 @@
 		<RadioGroup.Item
 			id="average"
 			value="average"
-			class="shrink-0 rounded-full border border-border-input bg-background transition-all duration-150 ease-in-out sq-5 data-[state=checked]:border-6 data-[state=checked]:border-foreground"
+			class="shrink-0 rounded-full border border-border-input bg-background transition-all duration-150 ease-in-out sq-5 hover:border-dark-40 data-[state=checked]:border-6 data-[state=checked]:border-foreground"
 		/>
 		<Label.Root for="average">Average</Label.Root>
 	</div>
@@ -29,7 +29,7 @@
 		<RadioGroup.Item
 			id="terrible"
 			value="terrible"
-			class="shrink-0 rounded-full border border-border-input bg-background transition-all duration-150 ease-in-out sq-5 data-[state=checked]:border-6 data-[state=checked]:border-foreground"
+			class="shrink-0 rounded-full border border-border-input bg-background transition-all duration-150 ease-in-out sq-5 hover:border-dark-40 data-[state=checked]:border-6 data-[state=checked]:border-foreground"
 		/>
 		<Label.Root for="terrible">Terrible</Label.Root>
 	</div>

src/components/demos/range-calendar-demo.svelte

@@ -13,13 +13,13 @@
 >
 	<RangeCalendar.Header class="flex items-center justify-between">
 		<RangeCalendar.PrevButton
-			class="inline-flex items-center justify-center rounded-9px bg-background transition-all sq-10 hover:bg-muted active:scale-98"
+			class="inline-flex items-center justify-center rounded-9px bg-background sq-10 hover:bg-muted active:scale-98"
 		>
 			<CaretLeft class="sq-6" />
 		</RangeCalendar.PrevButton>
 		<RangeCalendar.Heading class="text-[15px] font-medium" />
 		<RangeCalendar.NextButton
-			class="inline-flex items-center justify-center rounded-9px bg-background transition-all sq-10 hover:bg-muted active:scale-98"
+			class="inline-flex items-center justify-center rounded-9px bg-background sq-10 hover:bg-muted active:scale-98"
 		>
 			<CaretRight class="sq-6" />
 		</RangeCalendar.NextButton>
@@ -52,11 +52,11 @@
 										{date}
 										month={month.value}
 										class={cn(
-											"group relative inline-flex items-center justify-center whitespace-nowrap rounded-9px border border-transparent bg-background bg-transparent p-0 text-sm font-normal text-foreground transition-all sq-10 hover:border-foreground data-[disabled]:pointer-events-none data-[outside-month]:pointer-events-none data-[highlighted]:rounded-none data-[selection-end]:rounded-9px data-[selection-start]:rounded-9px data-[highlighted]:bg-muted data-[selected]:bg-muted data-[selection-end]:bg-foreground data-[selection-start]:bg-foreground data-[selected]:font-medium data-[selection-end]:font-medium data-[selection-start]:font-medium data-[disabled]:text-foreground/30 data-[selected]:text-foreground data-[selection-end]:text-background data-[selection-start]:text-background data-[unavailable]:text-muted-foreground data-[unavailable]:line-through data-[selected]:[&:not([data-selection-start])]:[&:not([data-selection-end])]:rounded-none"
+											"group relative inline-flex items-center justify-center whitespace-nowrap rounded-9px border border-transparent bg-background bg-transparent p-0 text-sm font-normal text-foreground sq-10 hover:border-foreground data-[disabled]:pointer-events-none data-[outside-month]:pointer-events-none data-[highlighted]:rounded-none data-[selection-end]:rounded-9px data-[selection-start]:rounded-9px data-[highlighted]:bg-muted data-[selected]:bg-muted data-[selection-end]:bg-foreground data-[selection-start]:bg-foreground data-[selected]:font-medium data-[selection-end]:font-medium data-[selection-start]:font-medium data-[disabled]:text-foreground/30 data-[selected]:text-foreground data-[selection-end]:text-background data-[selection-start]:text-background data-[unavailable]:text-muted-foreground data-[unavailable]:line-through data-[selected]:[&:not([data-selection-start])]:[&:not([data-selection-end])]:rounded-none"
 										)}
 									>
 										<div
-											class="absolute top-[5px] hidden rounded-full bg-foreground transition-all sq-1 group-data-[today]:block group-data-[selected]:bg-background"
+											class="absolute top-[5px] hidden rounded-full bg-foreground sq-1 group-data-[today]:block group-data-[selected]:bg-background"
 										/>
 										{date.day}
 									</RangeCalendar.Day>

src/components/demos/select-demo.svelte

@@ -27,7 +27,7 @@
 	>
 		{#each themes as theme}
 			<Select.Item
-				class="flex h-10 w-full select-none items-center rounded-button py-3 pl-5 pr-1.5 text-sm outline-none transition-all duration-75 data-[highlighted]:bg-muted/50"
+				class="flex h-10 w-full select-none items-center rounded-button py-3 pl-5 pr-1.5 text-sm outline-none transition-all duration-75 data-[highlighted]:bg-muted"
 				value={theme.value}
 				label={theme.label}
 			>

src/components/demos/slider-demo.svelte

@@ -15,7 +15,7 @@
 			<Slider.Range class="absolute h-full bg-foreground" />
 		</span>
 		<Slider.Thumb
-			class="block rounded-full border bg-background shadow transition-colors sq-[27px] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground focus-visible:ring-offset-2 active:scale-98 disabled:pointer-events-none disabled:opacity-50"
+			class="block rounded-full border border-border-input bg-background shadow transition-colors sq-[27px] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground focus-visible:ring-offset-2 active:scale-98 disabled:pointer-events-none disabled:opacity-50"
 		/>
 	</Slider.Root>
 </div>

src/components/demos/toggle-demo.svelte

@@ -18,7 +18,7 @@
 	</div>
 	<Toggle.Root
 		aria-label="toggle code visibility"
-		class="inline-flex items-center justify-center rounded-[9px] bg-background transition-all sq-10 hover:bg-muted active:scale-98 active:bg-dark-10 data-[state=on]:bg-muted active:data-[state=on]:bg-dark-10"
+		class="inline-flex items-center justify-center rounded-[9px] bg-background transition-all sq-10 hover:bg-muted active:scale-98 active:bg-dark-10 data-[state=on]:bg-muted data-[state=off]:text-foreground-alt data-[state=on]:text-foreground active:data-[state=on]:bg-dark-10"
 		bind:pressed={unlocked}
 	>
 		<LockKeyOpen class="sq-6" />

src/components/demos/toggle-group-demo.svelte

@@ -13,21 +13,21 @@
 	<ToggleGroup.Item
 		aria-label="toggle bold"
 		value="bold"
-		class="inline-flex items-center justify-center rounded-[9px] bg-background transition-all sq-10 hover:bg-muted active:scale-98 active:bg-dark-10 data-[state=on]:bg-muted active:data-[state=on]:bg-dark-10"
+		class="inline-flex items-center justify-center rounded-9px bg-background transition-all sq-10 hover:bg-muted active:scale-98 active:bg-dark-10 data-[state=on]:bg-muted data-[state=off]:text-foreground-alt data-[state=on]:text-foreground active:data-[state=on]:bg-dark-10"
 	>
 		<TextB class="sq-6" />
 	</ToggleGroup.Item>
 	<ToggleGroup.Item
 		aria-label="toggle italic"
 		value="italic"
-		class="inline-flex items-center justify-center rounded-[9px] bg-background transition-all sq-10 hover:bg-muted active:scale-98 active:bg-dark-10 data-[state=on]:bg-muted active:data-[state=on]:bg-dark-10"
+		class="inline-flex items-center justify-center rounded-9px bg-background transition-all sq-10 hover:bg-muted active:scale-98 active:bg-dark-10 data-[state=on]:bg-muted data-[state=off]:text-foreground-alt data-[state=on]:text-foreground active:data-[state=on]:bg-dark-10"
 	>
 		<TextItalic class="sq-6" />
 	</ToggleGroup.Item>
 	<ToggleGroup.Item
 		aria-label="toggle strikethrough"
 		value="strikethrough"
-		class="inline-flex items-center justify-center rounded-[9px] bg-background transition-all sq-10 hover:bg-muted active:scale-98 active:bg-dark-10 data-[state=on]:bg-muted active:data-[state=on]:bg-dark-10"
+		class="inline-flex items-center justify-center rounded-9px bg-background transition-all sq-10 hover:bg-muted active:scale-98 active:bg-dark-10 data-[state=on]:bg-muted data-[state=off]:text-foreground-alt data-[state=on]:text-foreground active:data-[state=on]:bg-dark-10"
 	>
 		<TextStrikethrough class="sq-6" />
 	</ToggleGroup.Item>

src/components/markdown/h2.svelte

@@ -7,7 +7,7 @@
 
 <h2
 	class={cn(
-		"mt-12 -scroll-m-36 text-[27px] font-semibold tracking-tight first:mt-0",
+		"mt-12 -scroll-m-36 text-[27px] font-semibold tracking-[-0.01em] first:mt-0",
 		className
 	)}
 	{...$$restProps}

src/components/metadata.svelte

@@ -14,4 +14,21 @@
 	<meta name="description" content={siteConfig.description} />
 	<meta name="keywords" content={siteConfig.keywords} />
 	<meta name="author" content="huntabyte" />
+	<meta name="twitter:card" content="summary_large_image" />
+	<meta name="twitter:site" content={siteConfig.url} />
+	<meta name="twitter:title" content={title} />
+	<meta name="twitter:description" content={siteConfig.description} />
+	<meta name="twitter:image" content="https://www.bits-ui.com/og.png" />
+	<meta name="twitter:image:alt" content={siteConfig.name} />
+	<meta name="twitter:creator" content="huntabyte" />
+	<meta property="og:title" content={title} />
+	<meta property="og:type" content="website" />
+	<meta property="og:url" content={siteConfig.url + $page.url.pathname} />
+	<meta property="og:image" content="https://www.bits-ui.com/og.png" />
+	<meta property="og:image:alt" content={siteConfig.name} />
+	<meta property="og:image:width" content="1200" />
+	<meta property="og:image:height" content="630" />
+	<meta property="og:description" content={siteConfig.description} />
+	<meta property="og:site_name" content={siteConfig.name} />
+	<meta property="og:locale" content="EN_US" />
 </svelte:head>

src/config/site.ts

@@ -1,7 +1,8 @@
 export const siteConfig = {
 	name: "Bits UI",
-	url: "https://bits-ui.com",
-	description: "Headless components for Svelte built on top of Melt UI.",
+	url: "https://www.bits-ui.com",
+	description: "Headless components for Svelte.",
+	ogImage: "https://www.bits-ui.com/og.png",
 	links: {
 		melt: "https://melt-ui.com",
 		meltGithub: "https://github.com/melt-ui/melt-ui",

src/content/api-reference/menu.ts

@@ -69,6 +69,11 @@ const props = {
 		type: C.BOOLEAN,
 		default: C.FALSE,
 		description: "Whether or not to disable focus on the first item when the menu is opened."
+	},
+	closeOnItemClick: {
+		type: C.BOOLEAN,
+		default: C.TRUE,
+		description: "Whether or not to close the menu when an item is clicked."
 	}
 } satisfies PropObj<Menu.Props>;
 

src/content/api-reference/radio-group.ts

@@ -37,7 +37,7 @@ export const root: APISchema<RadioGroup.Props> = {
 		value: {
 			type: C.STRING,
 			description:
-				"The value of the currently selected radio item. This is the value that will be submitted with a form."
+				"The value of the currently selected radio item. You can bind to this value to control the radio group's value from outside the component."
 		},
 		onValueChange: {
 			type: {
@@ -76,7 +76,7 @@ export const item: APISchema<RadioGroup.ItemProps> = {
 		value: {
 			type: C.STRING,
 			description:
-				"The value of the currently selected radio item. This is the value that will be submitted with a form.",
+				"The value of the radio item. This should be unique for each radio item in the group.",
 			required: true
 		},
 		asChild

src/lib/bits/menu/components/menu.svelte

@@ -16,6 +16,7 @@
 	export let closeFocus: $$Props["closeFocus"] = undefined;
 	export let disableFocusFirstItem: $$Props["disableFocusFirstItem"] =
 		undefined;
+	export let closeOnItemClick: $$Props["closeOnItemClick"] = undefined;
 
 	const {
 		states: { open: localOpen },
@@ -33,6 +34,7 @@
 		typeahead,
 		closeFocus,
 		disableFocusFirstItem,
+		closeOnItemClick,
 		onOpenChange: ({ next }) => {
 			if (open !== next) {
 				onOpenChange?.(next);
@@ -61,6 +63,7 @@
 	$: updateOption("closeFocus", closeFocus);
 	$: updateOption("disableFocusFirstItem", disableFocusFirstItem);
 	$: updateOption("typeahead", typeahead);
+	$: updateOption("closeOnItemClick", closeOnItemClick);
 </script>
 
 <slot ids={$idValues} />