From 75c1309516895e16815ec8d9c63302e854a27c97 Mon Sep 17 00:00:00 2001
From: Hunter Johnston <johnstonhuntera@gmail.com>
Date: Thu, 9 Nov 2023 21:13:35 -0500
Subject: [PATCH 001/217] init calendar work;

---
 package.json                                  |  1 +
 pnpm-lock.yaml                                | 16 +++-
 src/content/api-reference/index.ts            |  4 +-
 .../bits/calendar/components/Calendar.svelte  | 93 +++++++++++++++++++
 .../components/CalendarHeading.svelte         | 28 ++++++
 .../components/CalendarNextButton.svelte      | 24 +++++
 .../components/CalendarPrevButton.svelte      | 24 +++++
 src/lib/bits/calendar/ctx.ts                  | 27 ++++++
 src/lib/bits/calendar/index.ts                |  0
 src/lib/bits/calendar/types.ts                | 42 +++++++++
 10 files changed, 257 insertions(+), 2 deletions(-)
 create mode 100644 src/lib/bits/calendar/components/Calendar.svelte
 create mode 100644 src/lib/bits/calendar/components/CalendarHeading.svelte
 create mode 100644 src/lib/bits/calendar/components/CalendarNextButton.svelte
 create mode 100644 src/lib/bits/calendar/components/CalendarPrevButton.svelte
 create mode 100644 src/lib/bits/calendar/ctx.ts
 create mode 100644 src/lib/bits/calendar/index.ts
 create mode 100644 src/lib/bits/calendar/types.ts

diff --git a/package.json b/package.json
index e0f862669..e5392aa8a 100644
--- a/package.json
+++ b/package.json
@@ -92,6 +92,7 @@
 	"types": "./dist/index.d.ts",
 	"type": "module",
 	"dependencies": {
+		"@internationalized/date": "^3.5.0",
 		"@melt-ui/svelte": "0.60.1",
 		"nanoid": "^5.0.3"
 	},
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index ecd0039d1..372d2221c 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -5,6 +5,9 @@ settings:
   excludeLinksFromLockfile: false
 
 dependencies:
+  '@internationalized/date':
+    specifier: ^3.5.0
+    version: 3.5.0
   '@melt-ui/svelte':
     specifier: 0.60.1
     version: 0.60.1(svelte@4.2.2)
@@ -923,6 +926,12 @@ packages:
       vfile-message: 2.0.4
     dev: true
 
+  /@internationalized/date@3.5.0:
+    resolution: {integrity: sha512-nw0Q+oRkizBWMioseI8+2TeUPEyopJVz5YxoYVzR0W1v+2YytiYah7s/ot35F149q/xAg4F1gT/6eTd+tsUpFQ==}
+    dependencies:
+      '@swc/helpers': 0.5.3
+    dev: false
+
   /@jest/expect-utils@29.7.0:
     resolution: {integrity: sha512-GlsNBWiFQFCVi9QVSx7f5AgMeLxe9YCCs5PuP2O2LdjDAA8Jh9eX7lA1Jq/xdXw3Wb3hyvlFNfZIfcRetSzYcA==}
     engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
@@ -1497,6 +1506,12 @@ packages:
       - encoding
     dev: true
 
+  /@swc/helpers@0.5.3:
+    resolution: {integrity: sha512-FaruWX6KdudYloq1AHD/4nU+UsMTdNE8CKyrseXWEcgjDAbvkwJg2QGPAnfIJLIWsjZOSPLOAykK6fuYp4vp4A==}
+    dependencies:
+      tslib: 2.6.2
+    dev: false
+
   /@tailwindcss/typography@0.5.10(tailwindcss@3.3.5):
     resolution: {integrity: sha512-Pe8BuPJQJd3FfRnm6H0ulKIGoMEQS+Vq01R6M5aCrFB/ccR/shT+0kXLjouGC1gFLm9hopTFN+DMP0pfwRWzPw==}
     peerDependencies:
@@ -7058,7 +7073,6 @@ packages:
 
   /tslib@2.6.2:
     resolution: {integrity: sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==}
-    dev: true
 
   /tty-table@4.2.1:
     resolution: {integrity: sha512-xz0uKo+KakCQ+Dxj1D/tKn2FSyreSYWzdkL/BYhgN6oMW808g8QRMuh1atAV9fjTPbWBjfbkKQpI/5rEcnAc7g==}
diff --git a/src/content/api-reference/index.ts b/src/content/api-reference/index.ts
index 0f9adb7e6..9e093c5a8 100644
--- a/src/content/api-reference/index.ts
+++ b/src/content/api-reference/index.ts
@@ -24,6 +24,7 @@ export const bits = [
 	"aspect-ratio",
 	"avatar",
 	"button",
+	"calendar",
 	"checkbox",
 	"collapsible",
 	"context-menu",
@@ -56,13 +57,14 @@ export type Bit = (typeof bits)[number];
 export const apiSchemas: Record<Bit, APISchema[]> = {
 	accordion,
 	"alert-dialog": alertDialog,
-	dialog,
 	"aspect-ratio": aspectRatio,
 	avatar,
 	button,
+	calendar: [],
 	checkbox,
 	collapsible,
 	"context-menu": contextMenu,
+	dialog,
 	"dropdown-menu": dropdownMenu,
 	label,
 	"link-preview": linkPreview,
diff --git a/src/lib/bits/calendar/components/Calendar.svelte b/src/lib/bits/calendar/components/Calendar.svelte
new file mode 100644
index 000000000..39119b93e
--- /dev/null
+++ b/src/lib/bits/calendar/components/Calendar.svelte
@@ -0,0 +1,93 @@
+<script lang="ts">
+	import { melt } from "@melt-ui/svelte";
+	import { setCtx, getAttrs } from "../ctx.js";
+	import type { Props } from "../types.js";
+
+	type $$Props = Props;
+
+	export let placeholder: $$Props["placeholder"] = undefined;
+	export let onPlaceholderChange: $$Props["onPlaceholderChange"] = undefined;
+	export let value: $$Props["value"] = undefined;
+	export let onValueChange: $$Props["onValueChange"] = undefined;
+	export let preventDeselect: $$Props["preventDeselect"] = undefined;
+	export let minValue: $$Props["minValue"] = undefined;
+	export let maxValue: $$Props["maxValue"] = undefined;
+	export let pagedNavigation: $$Props["pagedNavigation"] = undefined;
+	export let weekStartsOn: $$Props["weekStartsOn"] = undefined;
+	export let locale: $$Props["locale"] = undefined;
+	export let isDateUnavailable: $$Props["isDateUnavailable"] = undefined;
+	export let isDateDisabled: $$Props["isDateDisabled"] = undefined;
+	export let disabled: $$Props["disabled"] = undefined;
+	export let readonly: $$Props["readonly"] = undefined;
+	export let fixedWeeks: $$Props["fixedWeeks"] = undefined;
+	export let calendarLabel: $$Props["calendarLabel"] = undefined;
+	export let asChild: $$Props["asChild"] = false;
+	export let id: $$Props["id"] = undefined;
+
+	const {
+		elements: { calendar },
+		states: { value: localValue, placeholder: localPlaceholder },
+		updateOption,
+		ids
+	} = setCtx({
+		defaultPlaceholder: placeholder,
+		defaultValue: value,
+		preventDeselect,
+		minValue,
+		maxValue,
+		pagedNavigation,
+		weekStartsOn,
+		locale,
+		isDateUnavailable,
+		isDateDisabled,
+		disabled,
+		readonly,
+		fixedWeeks,
+		calendarLabel,
+		onPlaceholderChange: ({ next }) => {
+			if (placeholder !== next) {
+				onPlaceholderChange?.(next);
+				placeholder = next;
+			}
+			return next;
+		},
+		onValueChange: ({ next }) => {
+			if (value !== next) {
+				onValueChange?.(next);
+				value = next;
+			}
+			return next;
+		}
+	});
+
+	$: if (id) {
+		ids.calendar.set(id);
+	}
+
+	$: value !== undefined && localValue.set(value);
+	$: placeholder !== undefined && localPlaceholder.set(placeholder);
+
+	$: updateOption("preventDeselect", preventDeselect);
+	$: updateOption("minValue", minValue);
+	$: updateOption("maxValue", maxValue);
+	$: updateOption("pagedNavigation", pagedNavigation);
+	$: updateOption("weekStartsOn", weekStartsOn);
+	$: updateOption("locale", locale);
+	$: updateOption("isDateUnavailable", isDateUnavailable);
+	$: updateOption("isDateDisabled", isDateDisabled);
+	$: updateOption("disabled", disabled);
+	$: updateOption("readonly", readonly);
+	$: updateOption("fixedWeeks", fixedWeeks);
+	$: updateOption("calendarLabel", calendarLabel);
+
+	$: builder = $calendar;
+	const attrs = getAttrs("root");
+</script>
+
+{#if asChild}
+	<slot {builder} {attrs} />
+{:else}
+	<div use:melt={builder} {...$$restProps} {...attrs}>
+		<slot {builder} {attrs} />
+	</div>
+{/if}
diff --git a/src/lib/bits/calendar/components/CalendarHeading.svelte b/src/lib/bits/calendar/components/CalendarHeading.svelte
new file mode 100644
index 000000000..a8eec7138
--- /dev/null
+++ b/src/lib/bits/calendar/components/CalendarHeading.svelte
@@ -0,0 +1,28 @@
+<script lang="ts">
+	import { melt } from "@melt-ui/svelte";
+	import { getAttrs, getCtx } from "../ctx.js";
+	import type { HeadingProps } from "../types.js";
+
+	type $$Props = HeadingProps;
+
+	export let asChild: $$Props["asChild"] = false;
+
+	const {
+		elements: { heading },
+		states: { headingValue }
+	} = getCtx();
+
+	$: builder = $heading;
+	const attrs = getAttrs("heading");
+</script>
+
+{#if asChild}
+	<slot {builder} {attrs} headingValue={$headingValue} />
+{:else}
+	<div use:melt={builder} {...$$restProps} {...attrs}>
+		<slot {builder} {attrs} headingValue={$headingValue}>
+			{$headingValue}
+		</slot>
+	</div>
+{/if}
+```
diff --git a/src/lib/bits/calendar/components/CalendarNextButton.svelte b/src/lib/bits/calendar/components/CalendarNextButton.svelte
new file mode 100644
index 000000000..b5285d949
--- /dev/null
+++ b/src/lib/bits/calendar/components/CalendarNextButton.svelte
@@ -0,0 +1,24 @@
+<script lang="ts">
+	import { melt } from "@melt-ui/svelte";
+	import { getAttrs, getCtx } from "../ctx.js";
+	import type { NextButtonProps } from "../types.js";
+
+	type $$Props = NextButtonProps;
+
+	export let asChild: $$Props["asChild"] = false;
+
+	const {
+		elements: { nextButton }
+	} = getCtx();
+
+	$: builder = $nextButton;
+	const attrs = getAttrs("next-button");
+</script>
+
+{#if asChild}
+	<slot {builder} {attrs} />
+{:else}
+	<button use:melt={builder} type="button" {...$$restProps} {...attrs}>
+		<slot {builder} {attrs} />
+	</button>
+{/if}
diff --git a/src/lib/bits/calendar/components/CalendarPrevButton.svelte b/src/lib/bits/calendar/components/CalendarPrevButton.svelte
new file mode 100644
index 000000000..b8abb847d
--- /dev/null
+++ b/src/lib/bits/calendar/components/CalendarPrevButton.svelte
@@ -0,0 +1,24 @@
+<script lang="ts">
+	import { melt } from "@melt-ui/svelte";
+	import { getAttrs, getCtx } from "../ctx.js";
+	import type { PrevButtonProps } from "../types.js";
+
+	type $$Props = PrevButtonProps;
+
+	export let asChild: $$Props["asChild"] = false;
+
+	const {
+		elements: { prevButton }
+	} = getCtx();
+
+	$: builder = $prevButton;
+	const attrs = getAttrs("prev-button");
+</script>
+
+{#if asChild}
+	<slot {builder} {attrs} />
+{:else}
+	<button use:melt={builder} type="button" {...$$restProps} {...attrs}>
+		<slot {builder} {attrs} />
+	</button>
+{/if}
diff --git a/src/lib/bits/calendar/ctx.ts b/src/lib/bits/calendar/ctx.ts
new file mode 100644
index 000000000..e75aef7fc
--- /dev/null
+++ b/src/lib/bits/calendar/ctx.ts
@@ -0,0 +1,27 @@
+import {
+	createCalendar,
+	type Calendar as CalendarReturn,
+	type CreateCalendarProps
+} from "@melt-ui/svelte";
+import { getContext, setContext } from "svelte";
+import { removeUndefined, getOptionUpdater, createBitAttrs } from "$lib/internal/index.js";
+
+const NAME = "calendar";
+const PARTS = ["root", "prev-button", "next-button", "heading", "grid", "cell"];
+
+export const getAttrs = createBitAttrs(NAME, PARTS);
+
+type GetReturn = CalendarReturn;
+
+export function setCtx(props: CreateCalendarProps) {
+	const calendar = createCalendar(removeUndefined(props));
+	setContext(NAME, calendar);
+	return {
+		...calendar,
+		updateOption: getOptionUpdater(calendar.options)
+	};
+}
+
+export function getCtx() {
+	return getContext<GetReturn>(NAME);
+}
diff --git a/src/lib/bits/calendar/index.ts b/src/lib/bits/calendar/index.ts
new file mode 100644
index 000000000..e69de29bb
diff --git a/src/lib/bits/calendar/types.ts b/src/lib/bits/calendar/types.ts
new file mode 100644
index 000000000..8c0177320
--- /dev/null
+++ b/src/lib/bits/calendar/types.ts
@@ -0,0 +1,42 @@
+import type { CreateCalendarProps } from "@melt-ui/svelte";
+import type { DateValue } from "@internationalized/date";
+import type { AsChild, HTMLDivAttributes, OnChangeFn } from "$lib/internal";
+import type { HTMLButtonAttributes } from "svelte/elements";
+
+type Props = Expand<
+	Omit<
+		CreateCalendarProps,
+		| "placeholder"
+		| "defaultPlaceholder"
+		| "value"
+		| "defaultValue"
+		| "onPlaceholderChange"
+		| "onValueChange"
+	> & {
+		placeholder?: DateValue;
+		value?: DateValue;
+		onPlaceholderChange?: OnChangeFn<DateValue>;
+		onValueChange?: OnChangeFn<DateValue | undefined>;
+		asChild?: boolean;
+	}
+> &
+	Omit<HTMLDivAttributes, "placeholder">;
+
+type ButtonProps = HTMLButtonAttributes & AsChild;
+
+type PrevButtonProps = ButtonProps;
+type NextButtonProps = ButtonProps;
+
+type HeadingProps = HTMLDivAttributes & AsChild;
+
+export type {
+	Props,
+	PrevButtonProps,
+	NextButtonProps,
+	HeadingProps,
+	//
+	Props as CalendarProps,
+	PrevButtonProps as CalendarPrevButtonProps,
+	NextButtonProps as CalendarNextButtonProps,
+	HeadingProps as CalendarHeadingProps
+};

From 1e744657107762008d9885ee8e0f8350b486c9f9 Mon Sep 17 00:00:00 2001
From: Hunter Johnston <johnstonhuntera@gmail.com>
Date: Thu, 9 Nov 2023 21:19:33 -0500
Subject: [PATCH 002/217] more calendar stuff

---
 src/lib/bits/calendar/components/Calendar.svelte    | 13 ++++++++++---
 .../bits/calendar/components/CalendarCell.svelte    |  0
 .../bits/calendar/components/CalendarMonth.svelte   |  0
 src/lib/bits/calendar/types.ts                      | 12 ++++++++++--
 4 files changed, 20 insertions(+), 5 deletions(-)
 create mode 100644 src/lib/bits/calendar/components/CalendarCell.svelte
 create mode 100644 src/lib/bits/calendar/components/CalendarMonth.svelte

diff --git a/src/lib/bits/calendar/components/Calendar.svelte b/src/lib/bits/calendar/components/Calendar.svelte
index 39119b93e..cb6c8a6b6 100644
--- a/src/lib/bits/calendar/components/Calendar.svelte
+++ b/src/lib/bits/calendar/components/Calendar.svelte
@@ -26,7 +26,7 @@
 
 	const {
 		elements: { calendar },
-		states: { value: localValue, placeholder: localPlaceholder },
+		states: { value: localValue, placeholder: localPlaceholder, months, daysOfWeek },
 		updateOption,
 		ids
 	} = setCtx({
@@ -82,12 +82,19 @@
 
 	$: builder = $calendar;
 	const attrs = getAttrs("root");
+
+	$: slotProps = {
+		builder,
+		attrs,
+		months: $months,
+		daysOfWeek: $daysOfWeek
+	};
 </script>
 
 {#if asChild}
-	<slot {builder} {attrs} />
+	<slot {builder} {attrs} months={$months} daysOfWeek={$daysOfWeek} />
 {:else}
 	<div use:melt={builder} {...$$restProps} {...attrs}>
-		<slot {builder} {attrs} />
+		<slot {builder} {attrs} months={$months} daysOfWeek={$daysOfWeek} />
 	</div>
 {/if}
diff --git a/src/lib/bits/calendar/components/CalendarCell.svelte b/src/lib/bits/calendar/components/CalendarCell.svelte
new file mode 100644
index 000000000..e69de29bb
diff --git a/src/lib/bits/calendar/components/CalendarMonth.svelte b/src/lib/bits/calendar/components/CalendarMonth.svelte
new file mode 100644
index 000000000..e69de29bb
diff --git a/src/lib/bits/calendar/types.ts b/src/lib/bits/calendar/types.ts
index 8c0177320..f8315ed4e 100644
--- a/src/lib/bits/calendar/types.ts
+++ b/src/lib/bits/calendar/types.ts
@@ -1,7 +1,7 @@
 import type { CreateCalendarProps } from "@melt-ui/svelte";
 import type { DateValue } from "@internationalized/date";
 import type { AsChild, HTMLDivAttributes, OnChangeFn } from "$lib/internal";
-import type { HTMLButtonAttributes } from "svelte/elements";
+import type { HTMLButtonAttributes, HTMLTableAttributes } from "svelte/elements";
 
 type Props = Expand<
 	Omit<
@@ -29,14 +29,22 @@ type NextButtonProps = ButtonProps;
 
 type HeadingProps = HTMLDivAttributes & AsChild;
 
+type MonthProps = HTMLTableAttributes & AsChild;
+
+type CellProps = HTMLDivAttributes & AsChild;
+
 export type {
 	Props,
 	PrevButtonProps,
 	NextButtonProps,
 	HeadingProps,
+	MonthProps,
+	CellProps,
 	//
 	Props as CalendarProps,
 	PrevButtonProps as CalendarPrevButtonProps,
 	NextButtonProps as CalendarNextButtonProps,
-	HeadingProps as CalendarHeadingProps
+	HeadingProps as CalendarHeadingProps,
+	MonthProps as CalendarMonthProps,
+	CellProps as CalendarCellProps
 };

From b2b8c658094e96649bbc6a28e7e811539f98e9d4 Mon Sep 17 00:00:00 2001
From: Hunter Johnston <johnstonhuntera@gmail.com>
Date: Fri, 10 Nov 2023 20:06:18 -0500
Subject: [PATCH 003/217] more calendar stuff

---
 .../ui/calendar/index.ts}                     |  0
 .../bits/calendar/components/Calendar.svelte  |  4 +-
 .../calendar/components/CalendarGrid.svelte   | 29 ++++++++++
 .../components/CalendarGridBody.svelte        | 17 ++++++
 .../components/CalendarGridBodyCell.svelte    | 37 +++++++++++++
 .../components/CalendarGridHead.svelte        | 17 ++++++
 .../components/CalendarGridHeadCell.svelte    | 17 ++++++
 .../components/CalendarGridRow.svelte         | 19 +++++++
 .../calendar/components/CalendarHeader.svelte | 16 ++++++
 .../calendar/components/CalendarMonth.svelte  |  0
 .../components/CalendarPrevButton.svelte      |  9 ++-
 src/lib/bits/calendar/ctx.ts                  | 14 ++++-
 src/lib/bits/calendar/index.ts                | 38 +++++++++++++
 src/lib/bits/calendar/types.ts                | 55 ++++++++++++++++---
 14 files changed, 258 insertions(+), 14 deletions(-)
 rename src/{lib/bits/calendar/components/CalendarCell.svelte => components/ui/calendar/index.ts} (100%)
 create mode 100644 src/lib/bits/calendar/components/CalendarGrid.svelte
 create mode 100644 src/lib/bits/calendar/components/CalendarGridBody.svelte
 create mode 100644 src/lib/bits/calendar/components/CalendarGridBodyCell.svelte
 create mode 100644 src/lib/bits/calendar/components/CalendarGridHead.svelte
 create mode 100644 src/lib/bits/calendar/components/CalendarGridHeadCell.svelte
 create mode 100644 src/lib/bits/calendar/components/CalendarGridRow.svelte
 create mode 100644 src/lib/bits/calendar/components/CalendarHeader.svelte
 delete mode 100644 src/lib/bits/calendar/components/CalendarMonth.svelte

diff --git a/src/lib/bits/calendar/components/CalendarCell.svelte b/src/components/ui/calendar/index.ts
similarity index 100%
rename from src/lib/bits/calendar/components/CalendarCell.svelte
rename to src/components/ui/calendar/index.ts
diff --git a/src/lib/bits/calendar/components/Calendar.svelte b/src/lib/bits/calendar/components/Calendar.svelte
index cb6c8a6b6..507e73909 100644
--- a/src/lib/bits/calendar/components/Calendar.svelte
+++ b/src/lib/bits/calendar/components/Calendar.svelte
@@ -92,9 +92,9 @@
 </script>
 
 {#if asChild}
-	<slot {builder} {attrs} months={$months} daysOfWeek={$daysOfWeek} />
+	<slot {...slotProps} />
 {:else}
 	<div use:melt={builder} {...$$restProps} {...attrs}>
-		<slot {builder} {attrs} months={$months} daysOfWeek={$daysOfWeek} />
+		<slot {...slotProps} />
 	</div>
 {/if}
diff --git a/src/lib/bits/calendar/components/CalendarGrid.svelte b/src/lib/bits/calendar/components/CalendarGrid.svelte
new file mode 100644
index 000000000..3c7b3f15f
--- /dev/null
+++ b/src/lib/bits/calendar/components/CalendarGrid.svelte
@@ -0,0 +1,29 @@
+<script lang="ts">
+	import { melt } from "@melt-ui/svelte";
+	import { getAttrs, getCtx } from "../ctx.js";
+	import type { GridProps } from "../types.js";
+
+	type $$Props = GridProps;
+
+	export let asChild: $$Props["asChild"] = false;
+
+	const {
+		elements: { grid }
+	} = getCtx();
+
+	$: builder = $grid;
+	const attrs = getAttrs("grid");
+
+	$: slotProps = {
+		builder,
+		attrs
+	};
+</script>
+
+{#if asChild}
+	<slot {...slotProps} />
+{:else}
+	<table use:melt={builder} {...$$restProps} {...attrs}>
+		<slot {...slotProps} />
+	</table>
+{/if}
diff --git a/src/lib/bits/calendar/components/CalendarGridBody.svelte b/src/lib/bits/calendar/components/CalendarGridBody.svelte
new file mode 100644
index 000000000..3dbc84e88
--- /dev/null
+++ b/src/lib/bits/calendar/components/CalendarGridBody.svelte
@@ -0,0 +1,17 @@
+<script lang="ts">
+	import { getAttrs } from "../ctx.js";
+	import type { GridBodyProps } from "../types.js";
+
+	type $$Props = GridBodyProps;
+	export let asChild: $$Props["asChild"] = false;
+
+	const attrs = getAttrs("grid-body");
+</script>
+
+{#if asChild}
+	<slot {attrs} />
+{:else}
+	<tbody {...$$restProps} {...attrs}>
+		<slot />
+	</tbody>
+{/if}
diff --git a/src/lib/bits/calendar/components/CalendarGridBodyCell.svelte b/src/lib/bits/calendar/components/CalendarGridBodyCell.svelte
new file mode 100644
index 000000000..1cf53a06a
--- /dev/null
+++ b/src/lib/bits/calendar/components/CalendarGridBodyCell.svelte
@@ -0,0 +1,37 @@
+<script lang="ts">
+	import { melt } from "@melt-ui/svelte";
+	import { getCtx, getAttrs } from "../ctx.js";
+	import type { GridBodyCellProps } from "../types.js";
+
+	type $$Props = GridBodyCellProps;
+
+	export let date: $$Props["date"];
+	export let month: $$Props["month"];
+	export let asChild: $$Props["asChild"] = false;
+
+	const {
+		elements: { cell },
+		helpers: { isDateDisabled, isDateUnavailable, isDateSelected }
+	} = getCtx();
+
+	$: builder = $cell(date, month);
+	const attrs = getAttrs("grid-body-cell");
+
+	$: slotProps = {
+		builder,
+		attrs,
+		disabled: $isDateDisabled(date),
+		unavailable: $isDateUnavailable(date),
+		selected: $isDateSelected(date)
+	};
+</script>
+
+{#if asChild}
+	<slot {...slotProps} />
+{:else}
+	<td role="gridcell" aria-disabled={$isDateDisabled(date) || $isDateUnavailable(date)}>
+		<div use:melt={builder} {...attrs} {...$$restProps}>
+			<slot {...slotProps} />
+		</div>
+	</td>
+{/if}
diff --git a/src/lib/bits/calendar/components/CalendarGridHead.svelte b/src/lib/bits/calendar/components/CalendarGridHead.svelte
new file mode 100644
index 000000000..a290dbd42
--- /dev/null
+++ b/src/lib/bits/calendar/components/CalendarGridHead.svelte
@@ -0,0 +1,17 @@
+<script lang="ts">
+	import { getAttrs } from "../ctx.js";
+	import type { GridHeadProps } from "../types.js";
+
+	type $$Props = GridHeadProps;
+	export let asChild: $$Props["asChild"] = false;
+
+	const attrs = { ...getAttrs("grid-head"), "aria-hidden": true };
+</script>
+
+{#if asChild}
+	<slot {attrs} />
+{:else}
+	<thead {...$$restProps} {...attrs}>
+		<slot />
+	</thead>
+{/if}
diff --git a/src/lib/bits/calendar/components/CalendarGridHeadCell.svelte b/src/lib/bits/calendar/components/CalendarGridHeadCell.svelte
new file mode 100644
index 000000000..89cd1c928
--- /dev/null
+++ b/src/lib/bits/calendar/components/CalendarGridHeadCell.svelte
@@ -0,0 +1,17 @@
+<script lang="ts">
+	import { getAttrs } from "../ctx.js";
+	import type { GridHeadCellProps } from "../types.js";
+
+	type $$Props = GridHeadCellProps;
+	export let asChild: $$Props["asChild"] = false;
+
+	const attrs = getAttrs("grid-head-cell");
+</script>
+
+{#if asChild}
+	<slot {attrs} />
+{:else}
+	<th {...$$restProps} {...attrs}>
+		<slot />
+	</th>
+{/if}
diff --git a/src/lib/bits/calendar/components/CalendarGridRow.svelte b/src/lib/bits/calendar/components/CalendarGridRow.svelte
new file mode 100644
index 000000000..760537779
--- /dev/null
+++ b/src/lib/bits/calendar/components/CalendarGridRow.svelte
@@ -0,0 +1,19 @@
+<script lang="ts">
+	import { getAttrs } from "../ctx.js";
+	import type { GridRowProps } from "../types.js";
+
+	type $$Props = GridRowProps;
+
+	export let asChild: $$Props["asChild"] = false;
+
+	const attrs = getAttrs("grid-row");
+</script>
+
+{#if asChild}
+	<slot {attrs} />
+{:else}
+	<tr {...$$restProps} {...attrs}>
+		<slot {attrs} />
+	</tr>
+{/if}
+```
diff --git a/src/lib/bits/calendar/components/CalendarHeader.svelte b/src/lib/bits/calendar/components/CalendarHeader.svelte
new file mode 100644
index 000000000..ec1df8ace
--- /dev/null
+++ b/src/lib/bits/calendar/components/CalendarHeader.svelte
@@ -0,0 +1,16 @@
+<script lang="ts">
+	import { getAttrs } from "../ctx.js";
+	import type { HeaderProps } from "../types.js";
+	type $$Props = HeaderProps;
+	export let asChild: $$Props["asChild"] = false;
+
+	const attrs = getAttrs("header");
+</script>
+
+{#if asChild}
+	<slot {attrs} />
+{:else}
+	<header {...$$restProps} {...attrs}>
+		<slot {attrs} />
+	</header>
+{/if}
diff --git a/src/lib/bits/calendar/components/CalendarMonth.svelte b/src/lib/bits/calendar/components/CalendarMonth.svelte
deleted file mode 100644
index e69de29bb..000000000
diff --git a/src/lib/bits/calendar/components/CalendarPrevButton.svelte b/src/lib/bits/calendar/components/CalendarPrevButton.svelte
index b8abb847d..3775bc3c0 100644
--- a/src/lib/bits/calendar/components/CalendarPrevButton.svelte
+++ b/src/lib/bits/calendar/components/CalendarPrevButton.svelte
@@ -13,12 +13,17 @@
 
 	$: builder = $prevButton;
 	const attrs = getAttrs("prev-button");
+
+	$: slotProps = {
+		builder,
+		attrs
+	};
 </script>
 
 {#if asChild}
-	<slot {builder} {attrs} />
+	<slot {...slotProps} />
 {:else}
 	<button use:melt={builder} type="button" {...$$restProps} {...attrs}>
-		<slot {builder} {attrs} />
+		<slot {...slotProps} />
 	</button>
 {/if}
diff --git a/src/lib/bits/calendar/ctx.ts b/src/lib/bits/calendar/ctx.ts
index e75aef7fc..9f23ec9f3 100644
--- a/src/lib/bits/calendar/ctx.ts
+++ b/src/lib/bits/calendar/ctx.ts
@@ -7,7 +7,19 @@ import { getContext, setContext } from "svelte";
 import { removeUndefined, getOptionUpdater, createBitAttrs } from "$lib/internal/index.js";
 
 const NAME = "calendar";
-const PARTS = ["root", "prev-button", "next-button", "heading", "grid", "cell"];
+const PARTS = [
+	"root",
+	"prev-button",
+	"next-button",
+	"heading",
+	"grid",
+	"header",
+	"grid-head",
+	"grid-head-cell",
+	"grid-body",
+	"grid-body-cell",
+	"grid-row"
+] as const;
 
 export const getAttrs = createBitAttrs(NAME, PARTS);
 
diff --git a/src/lib/bits/calendar/index.ts b/src/lib/bits/calendar/index.ts
index e69de29bb..de98ea725 100644
--- a/src/lib/bits/calendar/index.ts
+++ b/src/lib/bits/calendar/index.ts
@@ -0,0 +1,38 @@
+import Root from "./components/Calendar.svelte";
+import Grid from "./components/CalendarGrid.svelte";
+import GridBody from "./components/CalendarGridBody.svelte";
+import GridBodyCell from "./components/CalendarGridBodyCell.svelte";
+import GridHead from "./components/CalendarGridHead.svelte";
+import GridHeadCell from "./components/CalendarGridHeadCell.svelte";
+import GridRow from "./components/CalendarGridRow.svelte";
+import Header from "./components/CalendarHeader.svelte";
+import Heading from "./components/CalendarHeading.svelte";
+import NextButton from "./components/CalendarNextButton.svelte";
+import PrevButton from "./components/CalendarPrevButton.svelte";
+
+export {
+	Root,
+	Grid,
+	GridBody,
+	GridBodyCell,
+	GridHead,
+	GridHeadCell,
+	GridRow,
+	Header,
+	Heading,
+	NextButton,
+	PrevButton,
+	//
+	Root as Calendar,
+	Grid as CalendarGrid,
+	GridBody as CalendarGridBody,
+	GridBodyCell as CalendarGridBodyCell,
+	GridHead as CalendarGridHead,
+	GridHeadCell as CalendarGridHeadCell,
+	GridRow as CalendarGridRow,
+	Header as CalendarHeader,
+	Heading as CalendarHeading,
+	NextButton as CalendarNextButton,
+	PrevButton as CalendarPrevButton
+};
+export * from "./types.js";
diff --git a/src/lib/bits/calendar/types.ts b/src/lib/bits/calendar/types.ts
index f8315ed4e..e898f19e3 100644
--- a/src/lib/bits/calendar/types.ts
+++ b/src/lib/bits/calendar/types.ts
@@ -1,7 +1,12 @@
 import type { CreateCalendarProps } from "@melt-ui/svelte";
 import type { DateValue } from "@internationalized/date";
 import type { AsChild, HTMLDivAttributes, OnChangeFn } from "$lib/internal";
-import type { HTMLButtonAttributes, HTMLTableAttributes } from "svelte/elements";
+import type {
+	HTMLAttributes,
+	HTMLButtonAttributes,
+	HTMLTableAttributes,
+	HTMLThAttributes
+} from "svelte/elements";
 
 type Props = Expand<
 	Omit<
@@ -22,29 +27,61 @@ type Props = Expand<
 > &
 	Omit<HTMLDivAttributes, "placeholder">;
 
-type ButtonProps = HTMLButtonAttributes & AsChild;
+type ButtonProps = Expand<AsChild> & HTMLButtonAttributes;
 
 type PrevButtonProps = ButtonProps;
 type NextButtonProps = ButtonProps;
 
-type HeadingProps = HTMLDivAttributes & AsChild;
+type HeadingProps = Expand<AsChild> & HTMLDivAttributes;
 
-type MonthProps = HTMLTableAttributes & AsChild;
+type HeaderProps = Expand<AsChild> & HTMLDivAttributes;
 
-type CellProps = HTMLDivAttributes & AsChild;
+type GridProps = Expand<AsChild> & HTMLTableAttributes;
 
+type GridHeadProps = Expand<AsChild> & HTMLAttributes<HTMLTableSectionElement>;
+
+type GridHeadCellProps = Expand<AsChild> & HTMLThAttributes;
+
+type GridBodyProps = Expand<AsChild> & HTMLAttributes<HTMLTableSectionElement>;
+
+type GridRowProps = Expand<AsChild> & HTMLAttributes<HTMLTableRowElement>;
+
+type GridBodyCellProps = Expand<
+	{
+		/**
+		 * The date value of the cell.
+		 */
+		date: DateValue;
+
+		/**
+		 * The month value that the cell belongs to.
+		 */
+		month: DateValue;
+	} & AsChild
+> &
+	HTMLDivAttributes;
 export type {
 	Props,
 	PrevButtonProps,
 	NextButtonProps,
 	HeadingProps,
-	MonthProps,
-	CellProps,
+	GridProps,
+	GridBodyCellProps,
+	GridRowProps,
+	GridBodyProps,
+	GridHeadCellProps,
+	GridHeadProps,
+	HeaderProps,
 	//
 	Props as CalendarProps,
 	PrevButtonProps as CalendarPrevButtonProps,
 	NextButtonProps as CalendarNextButtonProps,
 	HeadingProps as CalendarHeadingProps,
-	MonthProps as CalendarMonthProps,
-	CellProps as CalendarCellProps
+	HeaderProps as CalendarHeaderProps,
+	GridProps as CalendarGridProps,
+	GridHeadProps as CalendarGridHeadProps,
+	GridHeadCellProps as CalendarGridHeadCellProps,
+	GridBodyProps as CalendarGridBodyProps,
+	GridBodyCellProps as CalendarGridBodyCellProps,
+	GridRowProps as CalendarGridRowProps
 };

From 4146517ba9641d1e173c94974b8bbd85af6c74cd Mon Sep 17 00:00:00 2001
From: Hunter Johnston <johnstonhuntera@gmail.com>
Date: Fri, 10 Nov 2023 21:01:38 -0500
Subject: [PATCH 004/217] init calendar preview

---
 content/components/calendar.md                | 14 +++++
 src/components/component-preview.svelte       |  2 +-
 src/components/demos/calendar-demo.svelte     | 63 +++++++++++++++++++
 src/components/demos/index.ts                 |  1 +
 src/config/navigation.ts                      |  5 ++
 .../calendar/components/CalendarDate.svelte   | 37 +++++++++++
 .../components/CalendarGridBodyCell.svelte    | 26 +++-----
 .../components/CalendarGridRow.svelte         |  1 -
 .../components/CalendarHeading.svelte         |  1 -
 src/lib/bits/calendar/ctx.ts                  |  1 +
 src/lib/bits/calendar/index.ts                |  3 +
 src/lib/bits/calendar/types.ts                | 14 +++--
 src/lib/bits/index.ts                         |  1 +
 13 files changed, 144 insertions(+), 25 deletions(-)
 create mode 100644 content/components/calendar.md
 create mode 100644 src/components/demos/calendar-demo.svelte
 create mode 100644 src/lib/bits/calendar/components/CalendarDate.svelte

diff --git a/content/components/calendar.md b/content/components/calendar.md
new file mode 100644
index 000000000..7105b5c0d
--- /dev/null
+++ b/content/components/calendar.md
@@ -0,0 +1,14 @@
+---
+title: Calendar
+description: A calendar component.
+---
+
+<script>
+	import { APISection, ComponentPreview, CalendarDemo } from '@/components'
+</script>
+
+<ComponentPreview name="calendar-demo" comp="Calendar">
+
+<CalendarDemo slot="preview" />
+
+</ComponentPreview>
diff --git a/src/components/component-preview.svelte b/src/components/component-preview.svelte
index ec1088239..0594827b4 100644
--- a/src/components/component-preview.svelte
+++ b/src/components/component-preview.svelte
@@ -26,7 +26,7 @@
 					</div>
 				</div>
 			{:else}
-				<div class="relative rounded-md bg-secondary border border-border">
+				<div class="relative rounded-md border border-border">
 					<div
 						class={cn(
 							"preview flex min-h-[350px] w-full justify-center p-12",
diff --git a/src/components/demos/calendar-demo.svelte b/src/components/demos/calendar-demo.svelte
new file mode 100644
index 000000000..8ed9fd5c7
--- /dev/null
+++ b/src/components/demos/calendar-demo.svelte
@@ -0,0 +1,63 @@
+<script lang="ts">
+	import { Calendar } from "$lib";
+	import { cn } from "@/utils";
+	import { ChevronLeft, ChevronRight } from "lucide-svelte";
+	import { buttonVariants } from "../ui/button";
+</script>
+
+<Calendar.Root class="p-3 rounded-md border" let:months let:daysOfWeek>
+	<Calendar.Header class="flex justify-between items-center">
+		<Calendar.PrevButton
+			class={cn(
+				buttonVariants({ variant: "outline" }),
+				"h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100"
+			)}
+		>
+			<ChevronLeft class="h-4 w-4" />
+		</Calendar.PrevButton>
+		<Calendar.Heading class="text-sm font-medium" />
+		<Calendar.NextButton
+			class={cn(
+				buttonVariants({ variant: "outline" }),
+				"h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100"
+			)}
+		>
+			<ChevronRight class="h-4 w-4" />
+		</Calendar.NextButton>
+	</Calendar.Header>
+	<div class="flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0 pt-4">
+		{#each months as month}
+			<Calendar.Grid class="w-full border-collapse space-y-1">
+				<Calendar.GridHead>
+					<Calendar.GridRow class="flex w-full justify-between">
+						{#each daysOfWeek as day}
+							<Calendar.GridHeadCell
+								class="text-muted-foreground rounded-md w-9 font-normal text-[0.8rem]"
+							>
+								<div>{day}</div>
+							</Calendar.GridHeadCell>
+						{/each}
+					</Calendar.GridRow>
+				</Calendar.GridHead>
+				<Calendar.GridBody>
+					{#each month.weeks as weekDates}
+						<Calendar.GridRow class="flex w-full mt-2">
+							{#each weekDates as date}
+								<Calendar.GridBodyCell
+									{date}
+									class="h-9 w-9 text-center text-sm p-0 relative [&:has([aria-selected])]:bg-accent first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md focus-within:relative focus-within:z-20"
+								>
+									<Calendar.Date
+										{date}
+										month={month.value}
+										class="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 hover:bg-accent hover:text-accent-foreground h-9 w-9 p-0 font-normal aria-selected:opacity-100 text-muted-foreground opacity-50"
+									/>
+								</Calendar.GridBodyCell>
+							{/each}
+						</Calendar.GridRow>
+					{/each}
+				</Calendar.GridBody>
+			</Calendar.Grid>
+		{/each}
+	</div>
+</Calendar.Root>
diff --git a/src/components/demos/index.ts b/src/components/demos/index.ts
index cdb136004..0807e9db0 100644
--- a/src/components/demos/index.ts
+++ b/src/components/demos/index.ts
@@ -3,6 +3,7 @@ export { default as AlertDialogDemo } from "./alert-dialog-demo.svelte";
 export { default as AspectRatioDemo } from "./aspect-ratio-demo.svelte";
 export { default as AvatarDemo } from "./avatar-demo.svelte";
 export { default as ButtonDemo } from "./button-demo.svelte";
+export { default as CalendarDemo } from "./calendar-demo.svelte";
 export { default as CheckboxDemo } from "./checkbox-demo.svelte";
 export { default as CollapsibleDemo } from "./collapsible-demo.svelte";
 export { default as ContextMenuDemo } from "./context-menu-demo.svelte";
diff --git a/src/config/navigation.ts b/src/config/navigation.ts
index 6d250c0a8..9ddebd34e 100644
--- a/src/config/navigation.ts
+++ b/src/config/navigation.ts
@@ -75,6 +75,11 @@ export const navigation: Navigation = {
 					href: "/docs/components/button",
 					items: []
 				},
+				{
+					title: "Calendar",
+					href: "/docs/components/calendar",
+					items: []
+				},
 				{
 					title: "Checkbox",
 					href: "/docs/components/checkbox",
diff --git a/src/lib/bits/calendar/components/CalendarDate.svelte b/src/lib/bits/calendar/components/CalendarDate.svelte
new file mode 100644
index 000000000..a22ef45df
--- /dev/null
+++ b/src/lib/bits/calendar/components/CalendarDate.svelte
@@ -0,0 +1,37 @@
+<script lang="ts">
+	import { melt } from "@melt-ui/svelte";
+	import { getCtx, getAttrs } from "../ctx.js";
+	import type { DateProps } from "../types.js";
+
+	type $$Props = DateProps;
+
+	export let date: $$Props["date"];
+	export let month: $$Props["month"];
+	export let asChild: $$Props["asChild"] = false;
+
+	const {
+		elements: { cell },
+		helpers: { isDateDisabled, isDateUnavailable, isDateSelected }
+	} = getCtx();
+
+	$: builder = $cell(date, month);
+	const attrs = getAttrs("date");
+
+	$: slotProps = {
+		builder,
+		attrs,
+		disabled: $isDateDisabled(date),
+		unavailable: $isDateUnavailable(date),
+		selected: $isDateSelected(date)
+	};
+</script>
+
+{#if asChild}
+	<slot {...slotProps} />
+{:else}
+	<div use:melt={builder} {...attrs} {...$$restProps}>
+		<slot {...slotProps}>
+			{date.day}
+		</slot>
+	</div>
+{/if}
diff --git a/src/lib/bits/calendar/components/CalendarGridBodyCell.svelte b/src/lib/bits/calendar/components/CalendarGridBodyCell.svelte
index 1cf53a06a..0b3ac8678 100644
--- a/src/lib/bits/calendar/components/CalendarGridBodyCell.svelte
+++ b/src/lib/bits/calendar/components/CalendarGridBodyCell.svelte
@@ -1,37 +1,27 @@
 <script lang="ts">
-	import { melt } from "@melt-ui/svelte";
 	import { getCtx, getAttrs } from "../ctx.js";
 	import type { GridBodyCellProps } from "../types.js";
 
 	type $$Props = GridBodyCellProps;
 
 	export let date: $$Props["date"];
-	export let month: $$Props["month"];
 	export let asChild: $$Props["asChild"] = false;
 
 	const {
-		elements: { cell },
-		helpers: { isDateDisabled, isDateUnavailable, isDateSelected }
+		helpers: { isDateDisabled, isDateUnavailable }
 	} = getCtx();
 
-	$: builder = $cell(date, month);
-	const attrs = getAttrs("grid-body-cell");
-
-	$: slotProps = {
-		builder,
-		attrs,
-		disabled: $isDateDisabled(date),
-		unavailable: $isDateUnavailable(date),
-		selected: $isDateSelected(date)
+	$: attrs = {
+		...getAttrs("grid-body-cell"),
+		"aria-disabled": $isDateDisabled(date) || $isDateUnavailable(date),
+		role: "gridcell"
 	};
 </script>
 
 {#if asChild}
-	<slot {...slotProps} />
+	<slot {attrs} />
 {:else}
-	<td role="gridcell" aria-disabled={$isDateDisabled(date) || $isDateUnavailable(date)}>
-		<div use:melt={builder} {...attrs} {...$$restProps}>
-			<slot {...slotProps} />
-		</div>
+	<td {...attrs}>
+		<slot {attrs} />
 	</td>
 {/if}
diff --git a/src/lib/bits/calendar/components/CalendarGridRow.svelte b/src/lib/bits/calendar/components/CalendarGridRow.svelte
index 760537779..ff14c3d16 100644
--- a/src/lib/bits/calendar/components/CalendarGridRow.svelte
+++ b/src/lib/bits/calendar/components/CalendarGridRow.svelte
@@ -16,4 +16,3 @@
 		<slot {attrs} />
 	</tr>
 {/if}
-```
diff --git a/src/lib/bits/calendar/components/CalendarHeading.svelte b/src/lib/bits/calendar/components/CalendarHeading.svelte
index a8eec7138..c4463f49a 100644
--- a/src/lib/bits/calendar/components/CalendarHeading.svelte
+++ b/src/lib/bits/calendar/components/CalendarHeading.svelte
@@ -25,4 +25,3 @@
 		</slot>
 	</div>
 {/if}
-```
diff --git a/src/lib/bits/calendar/ctx.ts b/src/lib/bits/calendar/ctx.ts
index 9f23ec9f3..fbbb99d54 100644
--- a/src/lib/bits/calendar/ctx.ts
+++ b/src/lib/bits/calendar/ctx.ts
@@ -13,6 +13,7 @@ const PARTS = [
 	"next-button",
 	"heading",
 	"grid",
+	"date",
 	"header",
 	"grid-head",
 	"grid-head-cell",
diff --git a/src/lib/bits/calendar/index.ts b/src/lib/bits/calendar/index.ts
index de98ea725..846b19506 100644
--- a/src/lib/bits/calendar/index.ts
+++ b/src/lib/bits/calendar/index.ts
@@ -1,4 +1,5 @@
 import Root from "./components/Calendar.svelte";
+import Date from "./components/CalendarDate.svelte";
 import Grid from "./components/CalendarGrid.svelte";
 import GridBody from "./components/CalendarGridBody.svelte";
 import GridBodyCell from "./components/CalendarGridBodyCell.svelte";
@@ -12,6 +13,7 @@ import PrevButton from "./components/CalendarPrevButton.svelte";
 
 export {
 	Root,
+	Date,
 	Grid,
 	GridBody,
 	GridBodyCell,
@@ -24,6 +26,7 @@ export {
 	PrevButton,
 	//
 	Root as Calendar,
+	Date as CalendarDate,
 	Grid as CalendarGrid,
 	GridBody as CalendarGridBody,
 	GridBodyCell as CalendarGridBodyCell,
diff --git a/src/lib/bits/calendar/types.ts b/src/lib/bits/calendar/types.ts
index e898f19e3..69f83d276 100644
--- a/src/lib/bits/calendar/types.ts
+++ b/src/lib/bits/calendar/types.ts
@@ -5,6 +5,7 @@ import type {
 	HTMLAttributes,
 	HTMLButtonAttributes,
 	HTMLTableAttributes,
+	HTMLTdAttributes,
 	HTMLThAttributes
 } from "svelte/elements";
 
@@ -46,7 +47,7 @@ type GridBodyProps = Expand<AsChild> & HTMLAttributes<HTMLTableSectionElement>;
 
 type GridRowProps = Expand<AsChild> & HTMLAttributes<HTMLTableRowElement>;
 
-type GridBodyCellProps = Expand<
+type BaseDateProps = Expand<
 	{
 		/**
 		 * The date value of the cell.
@@ -58,8 +59,11 @@ type GridBodyCellProps = Expand<
 		 */
 		month: DateValue;
 	} & AsChild
-> &
-	HTMLDivAttributes;
+>;
+
+type GridBodyCellProps = Expand<Omit<BaseDateProps, "month">> & HTMLTdAttributes;
+type DateProps = Expand<BaseDateProps> & HTMLDivAttributes;
+
 export type {
 	Props,
 	PrevButtonProps,
@@ -72,6 +76,7 @@ export type {
 	GridHeadCellProps,
 	GridHeadProps,
 	HeaderProps,
+	DateProps,
 	//
 	Props as CalendarProps,
 	PrevButtonProps as CalendarPrevButtonProps,
@@ -83,5 +88,6 @@ export type {
 	GridHeadCellProps as CalendarGridHeadCellProps,
 	GridBodyProps as CalendarGridBodyProps,
 	GridBodyCellProps as CalendarGridBodyCellProps,
-	GridRowProps as CalendarGridRowProps
+	GridRowProps as CalendarGridRowProps,
+	DateProps as CalendarDateProps
 };
diff --git a/src/lib/bits/index.ts b/src/lib/bits/index.ts
index cbfd60bc0..2570b9940 100644
--- a/src/lib/bits/index.ts
+++ b/src/lib/bits/index.ts
@@ -3,6 +3,7 @@ export * as AlertDialog from "./alert-dialog/index.js";
 export * as AspectRatio from "./aspect-ratio/index.js";
 export * as Avatar from "./avatar/index.js";
 export * as Button from "./button/index.js";
+export * as Calendar from "./calendar/index.js";
 export * as Checkbox from "./checkbox/index.js";
 export * as Collapsible from "./collapsible/index.js";
 export * as ContextMenu from "./context-menu/index.js";

From 38c9ea78c38f1a8e4bdf3d3bc865e5599a046733 Mon Sep 17 00:00:00 2001
From: Hunter Johnston <johnstonhuntera@gmail.com>
Date: Wed, 15 Nov 2023 12:08:55 -0500
Subject: [PATCH 005/217] add vars

---
 package.json                                  |  1 +
 pnpm-lock.yaml                                | 11 +++
 .../light-switch/light-switch.svelte          | 46 ++---------
 src/routes/+layout.svelte                     |  7 +-
 src/styles/app.postcss                        | 82 +++++--------------
 tailwind.config.ts                            | 50 ++++++-----
 6 files changed, 64 insertions(+), 133 deletions(-)

diff --git a/package.json b/package.json
index b59f8078b..7de7ffefe 100644
--- a/package.json
+++ b/package.json
@@ -62,6 +62,7 @@
 		"jest-axe": "^8.0.0",
 		"jsdom": "^22.1.0",
 		"lucide-svelte": "^0.292.0",
+		"mode-watcher": "^0.1.1",
 		"phosphor-svelte": "^1.3.0",
 		"postcss": "^8.4.31",
 		"postcss-load-config": "^4.0.1",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 0583fec8d..467900e22 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -100,6 +100,9 @@ devDependencies:
   lucide-svelte:
     specifier: ^0.292.0
     version: 0.292.0(svelte@4.2.3)
+  mode-watcher:
+    specifier: ^0.1.1
+    version: 0.1.1(svelte@4.2.3)
   phosphor-svelte:
     specifier: ^1.3.0
     version: 1.3.0(svelte@4.2.3)
@@ -5406,6 +5409,14 @@ packages:
       ufo: 1.2.0
     dev: true
 
+  /mode-watcher@0.1.1(svelte@4.2.3):
+    resolution: {integrity: sha512-11B0IDiJE5lbWsCGAIpBSkD5TtzCooBHvIMNWsuTeAlBHL6HWLb55aslCcx939v8qUymjFgDtpQ70CU1JU73lg==}
+    peerDependencies:
+      svelte: ^4.0.0
+    dependencies:
+      svelte: 4.2.3
+    dev: true
+
   /mri@1.2.0:
     resolution: {integrity: sha512-tzzskb3bG8LvYGFF/mDTpq3jpI6Q9wc3LEmBaghu+DdCssd1FakN7Bc0hVNmEyGq1bq3RgfkCb3cmQLpNPOroA==}
     engines: {node: '>=4'}
diff --git a/src/components/light-switch/light-switch.svelte b/src/components/light-switch/light-switch.svelte
index e16f68d5b..11fe3fe08 100644
--- a/src/components/light-switch/light-switch.svelte
+++ b/src/components/light-switch/light-switch.svelte
@@ -1,55 +1,19 @@
 <script lang="ts">
 	import { Sun, MoonStars } from "@/components/icons";
-	import { onMount } from "svelte";
 	import { Button } from "@/components/ui/button";
-	import {
-		getModeOsPrefers,
-		modeCurrent,
-		setModeCurrent,
-		setModeUserPrefers
-	} from "./light-switch";
-
-	type OnKeyDownEvent = KeyboardEvent & {
-		currentTarget: EventTarget & HTMLButtonElement;
-	};
-
-	function onToggleHandler(): void {
-		$modeCurrent = !$modeCurrent;
-		setModeUserPrefers($modeCurrent);
-		setModeCurrent($modeCurrent);
-	}
-
-	// A11y Input Handlers
-	function onKeyDown(event: OnKeyDownEvent): void {
-		// Enter/Space triggers selection event
-		if (["Enter", "Space"].includes(event.code)) {
-			event.preventDefault();
-			event.currentTarget.click();
-		}
-	}
-
-	// Lifecycle
-	onMount(() => {
-		// Sync lightswitch with the theme
-		if (!("modeCurrent" in localStorage)) {
-			setModeCurrent(getModeOsPrefers());
-		}
-	});
+	import { toggleMode, mode } from "mode-watcher";
 </script>
 
 <Button
-	on:click={() => {
-		onToggleHandler();
-	}}
-	on:keydown={(e) => onKeyDown(e)}
+	on:click={toggleMode}
 	role="switch"
 	aria-label="Light Switch"
-	aria-checked={$modeCurrent}
-	title="Toggle {$modeCurrent === true ? 'Dark' : 'Light'} Mode"
+	aria-checked={$mode === "light"}
+	title="Toggle {$mode === 'dark' ? 'Dark' : 'Light'} Mode"
 	variant="ghost"
 	size="icon"
 >
-	{#if $modeCurrent}
+	{#if $mode === "light"}
 		<MoonStars class="sq-5" aria-label="Moon" />
 	{:else}
 		<Sun class="sq-5" aria-label="Sun" />
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 5b54179be..b63367e25 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -1,15 +1,12 @@
 <script lang="ts">
 	import { dev } from "$app/environment";
 	import { SidebarNav, SiteHeader, TailwindIndicator } from "@/components";
-	import { setInitialClassState } from "@/components/light-switch/light-switch";
 	import { navigation } from "@/config";
+	import { ModeWatcher } from "mode-watcher";
 	import "@/styles/app.postcss";
 </script>
 
-<svelte:head>
-	<!-- This causes the new eslint-plugin-svelte: https://github.com/sveltejs/eslint-plugin-svelte/issues/492 -->
-	{@html `<\u{73}cript nonce="%sveltekit.nonce%">(${setInitialClassState.toString()})();</script>`}
-</svelte:head>
+<ModeWatcher />
 
 <SiteHeader />
 <main class="min-h-[calc(100vh-64px)]">
diff --git a/src/styles/app.postcss b/src/styles/app.postcss
index 3ffd27c7e..b13a99ad3 100644
--- a/src/styles/app.postcss
+++ b/src/styles/app.postcss
@@ -1,75 +1,35 @@
-/* Write your global styles here, in PostCSS syntax */
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
 
-/* Light - 60 8% 96% */
-/* Dark - 192 10% 10% */
-/* Primary - 320 7% 16%*/
-
 @layer base {
 	:root {
+		/* Colors */
 		--background: 0 0% 100%;
 		--foreground: 0 0% 9%;
-
-		--muted: 240 5% 96%;
-		--muted-foreground: 0 0% 64%;
-
-		--popover: 0 0% 98%;
-		--popover-foreground: 320 7% 8%;
-
-		--card: 0 0% 98%;
-		--card-foreground: 320 7% 8%;
-
-		--border: 0 0% 89%;
-		--input: 320 5.9% 90%;
-
-		--primary: 320 7% 16%;
-		--primary-foreground: 0 0% 98%;
-
-		--secondary: 163 62% 90%;
-		--secondary-foreground: 170 31% 19%;
-
-		--accent: 0 0% 98%;
-		--accent-foreground: 0 9% 9%;
-
-		--destructive: 0 84.2% 60.2%;
-		--destructive-foreground: 0 0% 98%;
-
-		--ring: 320 5.9% 64.9%;
-
-		--radius: 0.5rem;
+		--foreground-alt: 0 0% 32%;
+		--muted: 240 5% 98%;
+		--muted-foreground: 0 0% 9% / 0.4;
+		--border: 240 6% 10%;
+		--border-input: 240 6% 96% / 0.17;
+		--border-card: 240 6% 96% / 0.1;
+		--dark: 240 6% 10%;
+		--dark-10: 240 6% 10% / 0.1;
+		--accent: 204 94% 94%;
 	}
 
 	.dark {
-		--background: 320 7% 8%;
-		--foreground: 0 0% 98%;
-
-		--muted: 320 3.7% 15.9%;
-		--muted-foreground: 320 5.9% 64.9%;
-
-		--popover: 320 7% 8%;
-		--popover-foreground: 0 0% 98%;
-
-		--card: 320 7% 8%;
-		--card-foreground: 0 0% 98%;
-
-		--border: 320 3.7% 15.9%;
-		--input: 320 3.7% 15.9%;
-
-		--primary: 0 0% 98%;
-		--primary-foreground: 320 7% 16%;
-
-		--secondary: 173 34% 14%;
-		--secondary-foreground: 151 61% 88%;
-
-		--accent: 320 3.7% 15.9%;
-		--accent-foreground: 0 0% 98%;
-
-		--destructive: 0 62.8% 30.6%;
-		--destructive-foreground: 0 85.7% 97.3%;
-
-		--ring: 320 3.7% 15.9%;
+		/* Colors */
+		--background: 0 0% 9%;
+		--foreground: 0 0% 100%;
+		--foreground-alt: 0 0% 100%;
+		--muted: 240 4% 16%;
+		--muted-foreground: 0 0% 100% / 0.4;
+		--border: 240 5% 96%;
+		--border-input: 240 5% 96% / 0.17;
+		--dark: 0 0% 9%;
+		--dark-10: 240 5% 96% / 0.1;
+		--accent: 204 80% 16%;
 	}
 }
 
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 9ebd3f2a8..18213ed36 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -16,45 +16,43 @@ export default {
 		},
 		extend: {
 			colors: {
-				border: "hsl(var(--border))",
-				input: "hsl(var(--input))",
-				ring: "hsl(var(--ring))",
-				background: "hsl(var(--background))",
-				foreground: "hsl(var(--foreground))",
-				primary: {
-					DEFAULT: "hsl(var(--primary))",
-					foreground: "hsl(var(--primary-foreground))"
+				border: {
+					DEFAULT: "hsl(var(--border) / <alpha-value>)",
+					input: "hsl(var(--border-input)"
 				},
-				secondary: {
-					DEFAULT: "hsl(var(--secondary))",
-					foreground: "hsl(var(--secondary-foreground))"
+				background: {
+					DEFAULT: "hsl(var(--background) / <alpha-value>)"
 				},
-				destructive: {
-					DEFAULT: "hsl(var(--destructive))",
-					foreground: "hsl(var(--destructive-foreground))"
+				foreground: {
+					DEFAULT: "hsl(var(--foreground) / <alpha-value>)",
+					alt: "hsl(var(--foreground-alt) / <alpha-value>)"
 				},
 				muted: {
-					DEFAULT: "hsl(var(--muted))",
+					DEFAULT: "hsl(var(--muted) / <alpha-value>)",
 					foreground: "hsl(var(--muted-foreground))"
 				},
-				accent: {
-					DEFAULT: "hsl(var(--accent))",
-					foreground: "hsl(var(--accent-foreground))"
+				dark: {
+					DEFAULT: "hsl(var(--dark) / <alpha-value>)",
+					10: "hsl(var(--dark-10))"
 				},
-				popover: {
-					DEFAULT: "hsl(var(--popover))",
-					foreground: "hsl(var(--popover-foreground))"
-				},
-				card: {
-					DEFAULT: "hsl(var(--card))",
-					foreground: "hsl(var(--card-foreground))"
-				}
+				accent: "hsl(var(--accent) / <alpha-value>)"
 			},
 			fontFamily: {
 				sans: ["Inter", ...fontFamily.sans]
 			},
 			borderWidth: {
 				6: "6px"
+			},
+			borderRadius: {
+				card: "1rem",
+				"card-lg": "1.25rem",
+				"card-sm": "0.625rem",
+				input: "0.563rem",
+				button: "0.313"
+			},
+			height: {
+				input: "3rem",
+				"input-sm": "2.5rem"
 			}
 		}
 	},

From d91874920c7f3a5b59621ff72693835c4160aa8e Mon Sep 17 00:00:00 2001
From: Hunter Johnston <johnstonhuntera@gmail.com>
Date: Wed, 15 Nov 2023 12:24:29 -0500
Subject: [PATCH 006/217] more

---
 src/components/index.ts                       |  2 +-
 .../{light-switch => }/light-switch.svelte    |  0
 src/components/light-switch/index.ts          |  1 -
 src/components/light-switch/light-switch.ts   | 87 -------------------
 .../light-switch/local-storage-store.ts       | 81 -----------------
 src/components/navigation/sidebar-nav.svelte  |  6 +-
 .../page-header-description.svelte            |  2 +-
 .../page-header/page-header-heading.svelte    |  2 +-
 src/components/page-header/page-header.svelte |  2 +-
 src/routes/+layout.svelte                     |  2 +-
 src/styles/app.postcss                        |  7 +-
 tailwind.config.ts                            |  6 +-
 12 files changed, 14 insertions(+), 184 deletions(-)
 rename src/components/{light-switch => }/light-switch.svelte (100%)
 delete mode 100644 src/components/light-switch/index.ts
 delete mode 100644 src/components/light-switch/light-switch.ts
 delete mode 100644 src/components/light-switch/local-storage-store.ts

diff --git a/src/components/index.ts b/src/components/index.ts
index 0214d89b4..e7c8a6480 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -1,4 +1,3 @@
-export * from "./light-switch";
 export * from "./icons";
 export * from "./page-header";
 export * from "./navigation";
@@ -12,3 +11,4 @@ export { default as Steps } from "./steps.svelte";
 export { default as Code } from "./markdown/code.svelte";
 export { default as APISection } from "./api-section.svelte";
 export { default as ComponentPreview } from "./component-preview.svelte";
+export { default as LightSwitch } from "./light-switch.svelte";
diff --git a/src/components/light-switch/light-switch.svelte b/src/components/light-switch.svelte
similarity index 100%
rename from src/components/light-switch/light-switch.svelte
rename to src/components/light-switch.svelte
diff --git a/src/components/light-switch/index.ts b/src/components/light-switch/index.ts
deleted file mode 100644
index d839f8c4b..000000000
--- a/src/components/light-switch/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default as LightSwitch } from "./light-switch.svelte";
diff --git a/src/components/light-switch/light-switch.ts b/src/components/light-switch/light-switch.ts
deleted file mode 100644
index 827a1aa9a..000000000
--- a/src/components/light-switch/light-switch.ts
+++ /dev/null
@@ -1,87 +0,0 @@
-// Source: https://github.com/skeletonlabs/skeleton/blob/master/packages/skeleton/src/lib/utilities/LightSwitch/lightswitch.ts
-
-// Lightswitch Service
-
-import { get } from "svelte/store";
-// DO NOT replace this ⬇ import, it has to be imported directly
-import { localStorageStore } from "./local-storage-store";
-
-// Stores ---
-// TRUE: light, FALSE: dark
-
-/** Store: OS Preference Mode */
-export const modeOsPrefers = localStorageStore<boolean>("modeOsPrefers", false);
-/** Store: User Preference Mode */
-export const modeUserPrefers = localStorageStore<boolean | undefined>("modeUserPrefers", undefined);
-/** Store: Current Mode State */
-export const modeCurrent = localStorageStore<boolean>("modeCurrent", false);
-
-// Get ---
-
-/** Get the OS Preference for light/dark mode */
-export function getModeOsPrefers(): boolean {
-	const prefersLightMode = window.matchMedia("(prefers-color-scheme: light)").matches;
-	modeOsPrefers.set(prefersLightMode);
-	return prefersLightMode;
-}
-
-/** Get the User for light/dark mode */
-export function getModeUserPrefers(): boolean | undefined {
-	return get(modeUserPrefers);
-}
-
-/** Get the Automatic Preference light/dark mode */
-export function getModeAutoPrefers(): boolean {
-	const os = getModeOsPrefers();
-	const user = getModeUserPrefers();
-	const modeValue = user !== undefined ? user : os;
-	return modeValue;
-}
-
-// Set ---
-
-/** Set the User Preference for light/dark mode */
-export function setModeUserPrefers(value: boolean): void {
-	modeUserPrefers.set(value);
-}
-
-/** Set the the current light/dark mode */
-export function setModeCurrent(value: boolean) {
-	const elemHtmlClasses = document.documentElement.classList;
-	const classDark = `dark`;
-	value === true ? elemHtmlClasses.remove(classDark) : elemHtmlClasses.add(classDark);
-	modeCurrent.set(value);
-}
-
-// Lightswitch Utility
-
-/** Set the visible light/dark mode on page load. */
-export function setInitialClassState() {
-	const elemHtmlClasses = document.documentElement.classList;
-	// Conditions
-	const condLocalStorageUserPrefs = localStorage.getItem("modeUserPrefers") === "false";
-	const condLocalStorageUserPrefsExists = !("modeUserPrefers" in localStorage);
-	const condMatchMedia = window.matchMedia("(prefers-color-scheme: dark)").matches;
-	// Add/remove `.dark` class to HTML element
-	if (condLocalStorageUserPrefs || (condLocalStorageUserPrefsExists && condMatchMedia)) {
-		elemHtmlClasses.add("dark");
-	} else {
-		elemHtmlClasses.remove("dark");
-	}
-}
-
-// Auto-Switch Utility
-
-/** Automatically set the visible light/dark, updates on change. */
-export function autoModeWatcher(): void {
-	const mql = window.matchMedia("(prefers-color-scheme: light)");
-	function setMode(value: boolean) {
-		const elemHtmlClasses = document.documentElement.classList;
-		const classDark = `dark`;
-		value === true ? elemHtmlClasses.remove(classDark) : elemHtmlClasses.add(classDark);
-	}
-	setMode(mql.matches);
-	mql.onchange = () => {
-		setMode(mql.matches);
-	};
-}
diff --git a/src/components/light-switch/local-storage-store.ts b/src/components/light-switch/local-storage-store.ts
deleted file mode 100644
index ac2c8af64..000000000
--- a/src/components/light-switch/local-storage-store.ts
+++ /dev/null
@@ -1,81 +0,0 @@
-// Source: https://github.com/joshnuss/svelte-local-storage-store
-// https://github.com/joshnuss/svelte-local-storage-store/blob/master/index.ts
-// Represents version v0.4.0 (2023-01-18)
-import type { Writable } from "svelte/store";
-import { BROWSER } from "esm-env";
-import { get, writable as internal } from "svelte/store";
-
-declare type Updater<T> = (value: T) => T;
-declare type StoreDict<T> = { [key: string]: Writable<T> };
-
-/* eslint-disable @typescript-eslint/no-explicit-any */
-const stores: StoreDict<any> = {};
-
-interface Serializer<T> {
-	parse(text: string): T;
-	stringify(object: T): string;
-}
-
-type StorageType = "local" | "session";
-
-interface Options<T> {
-	serializer?: Serializer<T>;
-	storage?: StorageType;
-}
-
-function getStorage(type: StorageType) {
-	return type === "local" ? localStorage : sessionStorage;
-}
-
-export function localStorageStore<T>(
-	key: string,
-	initialValue: T,
-	options?: Options<T>
-): Writable<T> {
-	const serializer = options?.serializer ?? JSON;
-	const storageType = options?.storage ?? "local";
-
-	function updateStorage(key: string, value: T) {
-		if (!BROWSER) return;
-
-		getStorage(storageType).setItem(key, serializer.stringify(value));
-	}
-
-	if (!stores[key]) {
-		const store = internal(initialValue, (set) => {
-			const json = BROWSER ? getStorage(storageType).getItem(key) : null;
-
-			if (json) {
-				set(<T>serializer.parse(json));
-			}
-
-			if (BROWSER) {
-				const handleStorage = (event: StorageEvent) => {
-					if (event.key === key) set(event.newValue ? serializer.parse(event.newValue) : null);
-				};
-
-				window.addEventListener("storage", handleStorage);
-
-				return () => window.removeEventListener("storage", handleStorage);
-			}
-		});
-
-		const { subscribe, set } = store;
-
-		stores[key] = {
-			set(value: T) {
-				updateStorage(key, value);
-				set(value);
-			},
-			update(updater: Updater<T>) {
-				const value = updater(get(store));
-
-				updateStorage(key, value);
-				set(value);
-			},
-			subscribe
-		};
-	}
-
-	return stores[key];
-}
diff --git a/src/components/navigation/sidebar-nav.svelte b/src/components/navigation/sidebar-nav.svelte
index 5cf287136..87db12b1b 100644
--- a/src/components/navigation/sidebar-nav.svelte
+++ b/src/components/navigation/sidebar-nav.svelte
@@ -6,7 +6,7 @@
 
 {#if items.length}
 	<aside
-		class="fixed top-14 z-30 hidden h-[calc(100vh-3.5rem)] w-full shrink-0 md:sticky md:block overflow-y-auto border-r border-border"
+		class="fixed top-10 z-30 hidden h-[calc(100vh-3.5rem)] w-full shrink-0 md:sticky md:block overflow-y-auto border-r border-border"
 	>
 		<div class="h-full py-6 lg:py-8 pr-8">
 			<nav class="space-y-3">
@@ -16,9 +16,7 @@
 							<SidebarNavMainItems items={item.items} />
 						{:else}
 							<div class="pb-4">
-								<h4
-									class="mb-1 rounded-md text-foreground/40 py-2 px-2.5 text-sm font-normal uppercase"
-								>
+								<h4 class="mb-1 rounded-md py-2 px-2.5 text-sm font-normal uppercase">
 									{item.title}
 								</h4>
 								{#if item.items}
diff --git a/src/components/page-header/page-header-description.svelte b/src/components/page-header/page-header-description.svelte
index 54dd3e48a..bd95e7da2 100644
--- a/src/components/page-header/page-header-description.svelte
+++ b/src/components/page-header/page-header-description.svelte
@@ -5,7 +5,7 @@
 	export { className as class };
 </script>
 
-<p class={cn("text-lg font-medium text-foreground/40 mt-4 tracking-tight", className)}>
+<p class={cn("text-[21px] font-semibold text-foreground/40 mt-3 tracking-tight", className)}>
 	<Balancer>
 		<slot />
 	</Balancer>
diff --git a/src/components/page-header/page-header-heading.svelte b/src/components/page-header/page-header-heading.svelte
index 187ab0331..915c3c528 100644
--- a/src/components/page-header/page-header-heading.svelte
+++ b/src/components/page-header/page-header-heading.svelte
@@ -4,6 +4,6 @@
 	export { className as class };
 </script>
 
-<h1 class={cn("scroll-m-20 text-4xl font-semibold tracking-tight", className)}>
+<h1 class={cn("scroll-m-20 text-5xl font-semibold tracking-tight", className)}>
 	<slot />
 </h1>
diff --git a/src/components/page-header/page-header.svelte b/src/components/page-header/page-header.svelte
index f645c26eb..4bab88095 100644
--- a/src/components/page-header/page-header.svelte
+++ b/src/components/page-header/page-header.svelte
@@ -4,6 +4,6 @@
 	export { className as class };
 </script>
 
-<section class={cn("relative", className)}>
+<section class={cn("relative pb-10", className)}>
 	<slot />
 </section>
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index b63367e25..9f51a485c 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -14,7 +14,7 @@
 		class="container flex-1 items-start md:grid md:grid-cols-[220px_minmax(0,1fr)] md:gap-6 lg:grid-cols-[220px_minmax(0,1fr)] lg:gap-10"
 	>
 		<SidebarNav items={navigation.sidebar} />
-		<main class="relative py-6 lg:gap-10 lg:py-8 xl:grid xl:grid-cols-[1fr_300px]">
+		<main class="relative pb-6 pt-16 lg:gap-10 xl:grid xl:grid-cols-[1fr_300px]">
 			<div class="mx-auto w-full min-w-0">
 				<slot />
 			</div>
diff --git a/src/styles/app.postcss b/src/styles/app.postcss
index b13a99ad3..ce1dad02a 100644
--- a/src/styles/app.postcss
+++ b/src/styles/app.postcss
@@ -8,11 +8,11 @@
 		--background: 0 0% 100%;
 		--foreground: 0 0% 9%;
 		--foreground-alt: 0 0% 32%;
-		--muted: 240 5% 98%;
+		--muted: 240 5% 96%;
 		--muted-foreground: 0 0% 9% / 0.4;
 		--border: 240 6% 10%;
-		--border-input: 240 6% 96% / 0.17;
-		--border-card: 240 6% 96% / 0.1;
+		--border-input: 240 6% 10% / 0.17;
+		--border-card: 240 6% 10% / 0.1;
 		--dark: 240 6% 10%;
 		--dark-10: 240 6% 10% / 0.1;
 		--accent: 204 94% 94%;
@@ -27,6 +27,7 @@
 		--muted-foreground: 0 0% 100% / 0.4;
 		--border: 240 5% 96%;
 		--border-input: 240 5% 96% / 0.17;
+		--border-card: 240 5% 96% / 0.1;
 		--dark: 0 0% 9%;
 		--dark-10: 240 5% 96% / 0.1;
 		--accent: 204 80% 16%;
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 18213ed36..b80a6c140 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -17,8 +17,8 @@ export default {
 		extend: {
 			colors: {
 				border: {
-					DEFAULT: "hsl(var(--border) / <alpha-value>)",
-					input: "hsl(var(--border-input)"
+					DEFAULT: "hsl(var(--border-card))",
+					input: "hsl(var(--border-input))"
 				},
 				background: {
 					DEFAULT: "hsl(var(--background) / <alpha-value>)"
@@ -28,7 +28,7 @@ export default {
 					alt: "hsl(var(--foreground-alt) / <alpha-value>)"
 				},
 				muted: {
-					DEFAULT: "hsl(var(--muted) / <alpha-value>)",
+					DEFAULT: "hsl(var(--muted))",
 					foreground: "hsl(var(--muted-foreground))"
 				},
 				dark: {

From afae7f2c3998f70966f55f837133a85dec846037 Mon Sep 17 00:00:00 2001
From: Hunter Johnston <johnstonhuntera@gmail.com>
Date: Wed, 15 Nov 2023 12:35:37 -0500
Subject: [PATCH 007/217] styles

---
 src/components/light-switch.svelte |  4 ++--
 src/components/site-header.svelte  | 21 ++++-----------------
 src/components/ui/button/index.ts  |  8 ++++----
 tailwind.config.ts                 |  4 ++--
 4 files changed, 12 insertions(+), 25 deletions(-)

diff --git a/src/components/light-switch.svelte b/src/components/light-switch.svelte
index 11fe3fe08..0ca6e66c6 100644
--- a/src/components/light-switch.svelte
+++ b/src/components/light-switch.svelte
@@ -14,8 +14,8 @@
 	size="icon"
 >
 	{#if $mode === "light"}
-		<MoonStars class="sq-5" aria-label="Moon" />
+		<MoonStars class="sq-[28px]" aria-label="Moon" />
 	{:else}
-		<Sun class="sq-5" aria-label="Sun" />
+		<Sun class="sq-[28px]" aria-label="Sun" />
 	{/if}
 </Button>
diff --git a/src/components/site-header.svelte b/src/components/site-header.svelte
index b11cab323..5efbd1f2d 100644
--- a/src/components/site-header.svelte
+++ b/src/components/site-header.svelte
@@ -1,39 +1,26 @@
 <script lang="ts">
 	import { Button } from "@/components/ui/button";
-	import { Xcom, GitHub } from "@/components/icons";
 	import { LightSwitch, MobileNav } from "@/components";
 	import { siteConfig } from "@/config";
 </script>
 
 <header class="bg-background/75 backdrop-blur border-b border-border -mb-px sticky top-0 z-50">
 	<div class="container">
-		<div class="flex items-center justify-between gap-3 h-16">
+		<div class="flex items-center justify-between gap-3 h-[70px]">
 			<div class="flex items-center gap-1.5">
 				<MobileNav />
 				<a href="/" class="font-bold tracking-tight text-2xl underline underline-offset-4">bits</a>
 			</div>
-			<div class="items-center justify-end gap-1.5">
+			<div class="flex items-center justify-end gap-5">
 				<Button
 					href={siteConfig.links.github}
 					target="_blank"
 					rel="noopener noreferrer"
-					size="icon"
-					variant="ghost"
+					size="lg"
 					aria-label="View the github repo for this package."
 					class=""
 				>
-					<GitHub class="sq-5" />
-				</Button>
-				<Button
-					href={siteConfig.links.twitter}
-					target="_blank"
-					rel="noopener noreferrer"
-					size="icon"
-					variant="ghost"
-					aria-label="X, formerly known as Twitter."
-					class=""
-				>
-					<Xcom class="sq-5" />
+					Report an issue
 				</Button>
 				<LightSwitch />
 			</div>
diff --git a/src/components/ui/button/index.ts b/src/components/ui/button/index.ts
index abd062e78..5f4a2cc7f 100644
--- a/src/components/ui/button/index.ts
+++ b/src/components/ui/button/index.ts
@@ -2,10 +2,10 @@ import { tv, type VariantProps } from "tailwind-variants";
 import Root from "./button.svelte";
 
 export const buttonVariants = tv({
-	base: "inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50",
+	base: "inline-flex items-center justify-center text-sm font-medium transition-colors focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50",
 	variants: {
 		variant: {
-			default: "bg-primary text-primary-foreground shadow hover:bg-primary/90",
+			default: "bg-muted text-foreground shadow hover:bg-muted/50",
 			destructive: "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
 			outline:
 				"border border-input bg-transparent shadow-sm hover:bg-accent hover:text-accent-foreground",
@@ -14,9 +14,9 @@ export const buttonVariants = tv({
 			link: "text-primary underline-offset-4 hover:underline"
 		},
 		size: {
-			default: "h-9 px-4 py-2",
+			default: "h-9 rounded-md px-4 py-2",
 			sm: "h-8 rounded-md px-3 text-xs",
-			lg: "h-10 rounded-md px-8",
+			lg: "h-input-sm rounded-input px-4 font-semibold",
 			icon: "h-9 w-9"
 		}
 	},
diff --git a/tailwind.config.ts b/tailwind.config.ts
index b80a6c140..6d6367397 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -28,8 +28,8 @@ export default {
 					alt: "hsl(var(--foreground-alt) / <alpha-value>)"
 				},
 				muted: {
-					DEFAULT: "hsl(var(--muted))",
-					foreground: "hsl(var(--muted-foreground))"
+					DEFAULT: "hsl(var(--muted) / <alpha-value>)",
+					foreground: "hsl(var(--muted-foreground) / <alpha-value>)"
 				},
 				dark: {
 					DEFAULT: "hsl(var(--dark) / <alpha-value>)",

From 0e29a26397315b89ac239f76ef815a46b29082c5 Mon Sep 17 00:00:00 2001
From: Hunter Johnston <johnstonhuntera@gmail.com>
Date: Wed, 15 Nov 2023 13:17:46 -0500
Subject: [PATCH 008/217] tabs

---
 src/components/component-preview.svelte       | 77 +++++++++++--------
 src/components/markdown/pre.svelte            |  2 +-
 src/components/ui/button/index.ts             |  4 +-
 src/lib/bits/tabs/components/Tabs.svelte      |  9 ++-
 .../bits/tabs/components/TabsContent.svelte   |  9 ++-
 src/lib/bits/tabs/components/TabsList.svelte  |  8 +-
 .../bits/tabs/components/TabsTrigger.svelte   |  8 +-
 src/styles/app.postcss                        | 13 ++--
 src/styles/markdown.postcss                   |  2 +-
 tailwind.config.ts                            |  3 +
 10 files changed, 88 insertions(+), 47 deletions(-)

diff --git a/src/components/component-preview.svelte b/src/components/component-preview.svelte
index ec1088239..9267b3b14 100644
--- a/src/components/component-preview.svelte
+++ b/src/components/component-preview.svelte
@@ -1,47 +1,64 @@
 <script lang="ts">
+	import { Tabs } from "$lib";
 	import { dev } from "$app/environment";
-	import PreviewSwitch from "./preview-switch.svelte";
 	import { cn } from "@/utils";
+	import { buttonVariants } from "./ui/button";
 	let className: string;
 	export let align: "center" | "start" | "end" = "center";
 	export { className as class };
-
-	let showCode = false;
 </script>
 
 {#if dev}
 	<div
-		class={cn("group relative my-4 flex flex-col space-y-2", className)}
+		class={cn("group relative mb-4 flex flex-col space-y-2", className)}
 		{...$$restProps}
 		data-preview
 	>
-		<div class="relative mr-auto w-full">
-			<div class="absolute rounded-none bg-transparent p-0 z-20 top-5 right-4">
-				<PreviewSwitch bind:checked={showCode} />
-			</div>
-			{#if showCode}
-				<div>
-					<div class="w-full rounded-md ![&_pre]:mt-0 [&_pre]:max-h-[350px] [&_pre]:overflow-auto">
-						<slot />
-					</div>
+		<Tabs.Root class="relative mr-auto w-full" let:value>
+			<Tabs.List class="absolute z-20 top-5 right-4 flex items-center">
+				<Tabs.Trigger
+					value="preview"
+					class={cn(
+						buttonVariants(),
+						value === "preview"
+							? "bg-background font-semibold shadow-mini hover:bg-opacity-90"
+							: "bg-transparent shadow-none hover:bg-background"
+					)}
+				>
+					Preview
+				</Tabs.Trigger>
+				<Tabs.Trigger
+					value="code"
+					class={cn(
+						buttonVariants(),
+						value === "code"
+							? "bg-background font-semibold shadow-mini hover:bg-opacity-90"
+							: "bg-transparent shadow-none hover:bg-background hover:shadow-mini"
+					)}>&lt;Code&gt;</Tabs.Trigger
+				>
+			</Tabs.List>
+			<Tabs.Content value="code">
+				<div
+					class="w-full ![&_pre]:mt-0 [&_pre]:max-h-[443px] [&_pre]:min-h-[443px] [&_pre]:overflow-auto ![&_pre]:rounded-card"
+				>
+					<slot />
 				</div>
-			{:else}
-				<div class="relative rounded-md bg-secondary border border-border">
-					<div
-						class={cn(
-							"preview flex min-h-[350px] w-full justify-center p-12",
-							{
-								"items-center": align === "center",
-								"items-start": align === "start",
-								"items-end": align === "end"
-							},
-							className
-						)}
-					>
-						<slot name="preview" />
-					</div>
+			</Tabs.Content>
+			<Tabs.Content value="preview" class="relative bg-muted rounded-card">
+				<div
+					class={cn(
+						"preview flex min-h-[443px] w-full justify-center p-12",
+						{
+							"items-center": align === "center",
+							"items-start": align === "start",
+							"items-end": align === "end"
+						},
+						className
+					)}
+				>
+					<slot name="preview" />
 				</div>
-			{/if}
-		</div>
+			</Tabs.Content>
+		</Tabs.Root>
 	</div>
 {/if}
diff --git a/src/components/markdown/pre.svelte b/src/components/markdown/pre.svelte
index 9f52e2190..a70f87ab8 100644
--- a/src/components/markdown/pre.svelte
+++ b/src/components/markdown/pre.svelte
@@ -9,7 +9,7 @@
 </script>
 
 <pre
-	class={cn("mb-4 mt-6 overflow-x-auto rounded-lg border py-4 bg-accent", className)}
+	class={cn("mb-4 mt-6 overflow-x-auto rounded-card bg-muted py-4 ", className)}
 	use:setCodeString
 	{...$$restProps}>
 	<slot />
diff --git a/src/components/ui/button/index.ts b/src/components/ui/button/index.ts
index 5f4a2cc7f..64acd1ca9 100644
--- a/src/components/ui/button/index.ts
+++ b/src/components/ui/button/index.ts
@@ -5,7 +5,7 @@ export const buttonVariants = tv({
 	base: "inline-flex items-center justify-center text-sm font-medium transition-colors focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50",
 	variants: {
 		variant: {
-			default: "bg-muted text-foreground shadow hover:bg-muted/50",
+			default: "bg-muted text-foreground",
 			destructive: "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
 			outline:
 				"border border-input bg-transparent shadow-sm hover:bg-accent hover:text-accent-foreground",
@@ -14,7 +14,7 @@ export const buttonVariants = tv({
 			link: "text-primary underline-offset-4 hover:underline"
 		},
 		size: {
-			default: "h-9 rounded-md px-4 py-2",
+			default: "h-8 rounded-[7px] px-[14px] py-2 font-semibold",
 			sm: "h-8 rounded-md px-3 text-xs",
 			lg: "h-input-sm rounded-input px-4 font-semibold",
 			icon: "h-9 w-9"
diff --git a/src/lib/bits/tabs/components/Tabs.svelte b/src/lib/bits/tabs/components/Tabs.svelte
index a8941ef1c..f1fce12cf 100644
--- a/src/lib/bits/tabs/components/Tabs.svelte
+++ b/src/lib/bits/tabs/components/Tabs.svelte
@@ -39,12 +39,17 @@
 
 	$: builder = $root;
 	const attrs = getAttrs("root");
+	$: slotProps = {
+		builder,
+		attrs,
+		value: $localValue
+	};
 </script>
 
 {#if asChild}
-	<slot {builder} {attrs} />
+	<slot {...slotProps} />
 {:else}
 	<div use:melt={builder} {...$$restProps} {...attrs}>
-		<slot {builder} {attrs} />
+		<slot {...slotProps} />
 	</div>
 {/if}
diff --git a/src/lib/bits/tabs/components/TabsContent.svelte b/src/lib/bits/tabs/components/TabsContent.svelte
index 40dcd1d0c..521b6d819 100644
--- a/src/lib/bits/tabs/components/TabsContent.svelte
+++ b/src/lib/bits/tabs/components/TabsContent.svelte
@@ -12,12 +12,17 @@
 
 	$: builder = $content(value);
 	const attrs = getAttrs("content");
+
+	$: slotProps = {
+		builder,
+		attrs
+	};
 </script>
 
 {#if asChild}
-	<slot {builder} {attrs} />
+	<slot {...slotProps} />
 {:else}
 	<div use:melt={builder} {...$$restProps} {...attrs}>
-		<slot {builder} {attrs} />
+		<slot {...slotProps} />
 	</div>
 {/if}
diff --git a/src/lib/bits/tabs/components/TabsList.svelte b/src/lib/bits/tabs/components/TabsList.svelte
index 2147c01e4..f973aeb41 100644
--- a/src/lib/bits/tabs/components/TabsList.svelte
+++ b/src/lib/bits/tabs/components/TabsList.svelte
@@ -11,12 +11,16 @@
 
 	$: builder = $list;
 	const attrs = getAttrs("list");
+	$: slotProps = {
+		builder,
+		attrs
+	};
 </script>
 
 {#if asChild}
-	<slot {builder} {attrs} />
+	<slot {...slotProps} />
 {:else}
 	<div use:melt={builder} {...$$restProps} {...attrs}>
-		<slot {builder} {attrs} />
+		<slot {...slotProps} />
 	</div>
 {/if}
diff --git a/src/lib/bits/tabs/components/TabsTrigger.svelte b/src/lib/bits/tabs/components/TabsTrigger.svelte
index 0084b944d..62efe6b62 100644
--- a/src/lib/bits/tabs/components/TabsTrigger.svelte
+++ b/src/lib/bits/tabs/components/TabsTrigger.svelte
@@ -17,10 +17,14 @@
 
 	$: builder = $trigger({ value, disabled });
 	const attrs = getAttrs("trigger");
+	$: slotProps = {
+		builder,
+		attrs
+	};
 </script>
 
 {#if asChild}
-	<slot {builder} {attrs} />
+	<slot {...slotProps} />
 {:else}
 	<button
 		use:melt={builder}
@@ -31,6 +35,6 @@
 		on:m-focus={dispatch}
 		on:m-keydown={dispatch}
 	>
-		<slot {builder} {attrs} />
+		<slot {...slotProps} />
 	</button>
 {/if}
diff --git a/src/styles/app.postcss b/src/styles/app.postcss
index ce1dad02a..69b9c75c9 100644
--- a/src/styles/app.postcss
+++ b/src/styles/app.postcss
@@ -16,6 +16,9 @@
 		--dark: 240 6% 10%;
 		--dark-10: 240 6% 10% / 0.1;
 		--accent: 204 94% 94%;
+
+		/* Shadows */
+		--shadow-mini: 0px 1px 0px 1px rgba(0, 0, 0, 0.04);
 	}
 
 	.dark {
@@ -55,7 +58,7 @@
 
 	/* === Scrollbars === */
 
-	::-webkit-scrollbar {
+	/* ::-webkit-scrollbar {
 		@apply w-2;
 		@apply h-2;
 	}
@@ -64,13 +67,13 @@
 		@apply !bg-muted;
 	}
 	::-webkit-scrollbar-thumb {
-		@apply rounded-sm !bg-muted-foreground/30;
-	}
+		@apply rounded-sm !bg-muted-foreground;
+	} */
 
 	/* Firefox */
 	/* https://developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-color#browser_compatibility */
 
-	html {
+	/* html {
 		scrollbar-color: hsl(215.4 16.3% 46.9% / 0.3);
 	}
 
@@ -85,7 +88,7 @@
 	.hide-scrollbar {
 		-ms-overflow-style: none;
 		scrollbar-width: none;
-	}
+	} */
 
 	.antialised {
 		-webkit-font-smoothing: antialiased;
diff --git a/src/styles/markdown.postcss b/src/styles/markdown.postcss
index 74258cce2..95ed0a6c1 100644
--- a/src/styles/markdown.postcss
+++ b/src/styles/markdown.postcss
@@ -41,7 +41,7 @@
 	@apply relative;
 
 	& pre {
-		@apply mb-4 mt-6 overflow-x-auto rounded-lg border border-border py-4 px-2.5 text-sm font-semibold;
+		@apply mb-4 mt-6 overflow-x-auto rounded-card w-full py-4 px-2.5 text-sm font-semibold;
 	}
 
 	& code {
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 6d6367397..a7c1569bb 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -53,6 +53,9 @@ export default {
 			height: {
 				input: "3rem",
 				"input-sm": "2.5rem"
+			},
+			boxShadow: {
+				mini: "var(--shadow-mini)"
 			}
 		}
 	},

From 01ce79365dd8423c247d3f53bb136628ad7c2557 Mon Sep 17 00:00:00 2001
From: Hunter Johnston <johnstonhuntera@gmail.com>
Date: Wed, 15 Nov 2023 13:57:09 -0500
Subject: [PATCH 009/217] more styles

---
 .../api-tables/data-attrs-table.svelte        |  10 +-
 src/components/api-tables/props-table.svelte  |  26 ++---
 src/components/component-preview.svelte       | 107 +++++++++---------
 src/components/markdown/code.svelte           |   4 +-
 src/components/page-header/page-header.svelte |   2 +-
 src/components/ui/button/index.ts             |   2 +-
 src/components/ui/table/table-cell.svelte     |   2 +-
 src/components/ui/table/table-head.svelte     |   2 +-
 src/components/ui/table/table-header.svelte   |   2 +-
 src/components/ui/table/table.svelte          |   2 +-
 src/styles/app.postcss                        |   2 +
 tailwind.config.ts                            |   5 +-
 12 files changed, 82 insertions(+), 84 deletions(-)

diff --git a/src/components/api-tables/data-attrs-table.svelte b/src/components/api-tables/data-attrs-table.svelte
index 20bbb559b..2987158df 100644
--- a/src/components/api-tables/data-attrs-table.svelte
+++ b/src/components/api-tables/data-attrs-table.svelte
@@ -19,17 +19,19 @@
 			{#each dataAttrs as attr}
 				<Table.Row>
 					<Table.Cell class="align-baseline">
-						<Code class="!text-secondary-foreground">data-{attr.name}</Code>
+						<Code class="!text-foreground !font-semibold">data-{attr.name}</Code>
 					</Table.Cell>
 					<Table.Cell class="align-baseline">
-						{#if attr.value}
-							<Code neutral>{attr.value}</Code>
-						{/if}
 						{#if attr.description}
 							<p class="text-sm leading-7 my-2">
 								{@html parseMarkdown(attr.description)}
 							</p>
 						{/if}
+						{#if attr.value}
+							<Code class="!bg-background !px-0 !h-0">Value: {attr.value}</Code>
+						{:else}
+							<Code class="!bg-background !px-0 !h-0">Value: ''</Code>
+						{/if}
 					</Table.Cell>
 				</Table.Row>
 			{/each}
diff --git a/src/components/api-tables/props-table.svelte b/src/components/api-tables/props-table.svelte
index 2d41b574a..ccee1c84d 100644
--- a/src/components/api-tables/props-table.svelte
+++ b/src/components/api-tables/props-table.svelte
@@ -10,29 +10,27 @@
 <Table.Root>
 	<Table.Header>
 		<Table.Row class="w-1/4">
-			<Table.Head class="w-1/4 whitespace-nowrap">Prop</Table.Head>
-			<Table.Head class="w-1/4 whitespace-nowrap">Default</Table.Head>
-			<Table.Head class="w-1/2 whitespace-nowrap">Type/Description</Table.Head>
+			<Table.Head class="w-1/4 whitespace-nowrap pr-1">Property</Table.Head>
+			<Table.Head class="w-1/4 whitespace-nowrap pr-1">Type</Table.Head>
+			<Table.Head class="w-1/2 whitespace-nowrap pl-6">Description</Table.Head>
 		</Table.Row>
 	</Table.Header>
 	<Table.Body>
 		{#each props as prop}
 			<Table.Row>
-				<Table.Cell class="align-baseline">
-					<Code class="!text-secondary-foreground">{prop.name}</Code>
+				<Table.Cell class="align-baseline pr-1">
+					<Code class="!text-foreground !font-semibold">{prop.name}</Code>
 				</Table.Cell>
-				<Table.Cell class="align-baseline">
-					{#if prop.default}
-						<Code neutral>{prop.default}</Code>
-					{:else}
-						<p>-</p>
-					{/if}
+				<Table.Cell class="align-baseline pr-1">
+					<Code>{prop.type}</Code>
 				</Table.Cell>
-				<Table.Cell class="align-baseline">
-					<Code neutral>{prop.type}</Code>
-					<p class="text-sm leading-7 my-2">
+				<Table.Cell class="align-baseline pl-6">
+					<p class="text-sm leading-6">
 						{@html parseMarkdown(prop.description)}
 					</p>
+					<div class="mt-4 mb-8">
+						<Code class="!bg-background !px-0 !h-0">Default: {prop.default ?? "undefined"}</Code>
+					</div>
 				</Table.Cell>
 			</Table.Row>
 		{/each}
diff --git a/src/components/component-preview.svelte b/src/components/component-preview.svelte
index 9267b3b14..37307fa5f 100644
--- a/src/components/component-preview.svelte
+++ b/src/components/component-preview.svelte
@@ -1,6 +1,5 @@
 <script lang="ts">
 	import { Tabs } from "$lib";
-	import { dev } from "$app/environment";
 	import { cn } from "@/utils";
 	import { buttonVariants } from "./ui/button";
 	let className: string;
@@ -8,57 +7,55 @@
 	export { className as class };
 </script>
 
-{#if dev}
-	<div
-		class={cn("group relative mb-4 flex flex-col space-y-2", className)}
-		{...$$restProps}
-		data-preview
-	>
-		<Tabs.Root class="relative mr-auto w-full" let:value>
-			<Tabs.List class="absolute z-20 top-5 right-4 flex items-center">
-				<Tabs.Trigger
-					value="preview"
-					class={cn(
-						buttonVariants(),
-						value === "preview"
-							? "bg-background font-semibold shadow-mini hover:bg-opacity-90"
-							: "bg-transparent shadow-none hover:bg-background"
-					)}
-				>
-					Preview
-				</Tabs.Trigger>
-				<Tabs.Trigger
-					value="code"
-					class={cn(
-						buttonVariants(),
-						value === "code"
-							? "bg-background font-semibold shadow-mini hover:bg-opacity-90"
-							: "bg-transparent shadow-none hover:bg-background hover:shadow-mini"
-					)}>&lt;Code&gt;</Tabs.Trigger
-				>
-			</Tabs.List>
-			<Tabs.Content value="code">
-				<div
-					class="w-full ![&_pre]:mt-0 [&_pre]:max-h-[443px] [&_pre]:min-h-[443px] [&_pre]:overflow-auto ![&_pre]:rounded-card"
-				>
-					<slot />
-				</div>
-			</Tabs.Content>
-			<Tabs.Content value="preview" class="relative bg-muted rounded-card">
-				<div
-					class={cn(
-						"preview flex min-h-[443px] w-full justify-center p-12",
-						{
-							"items-center": align === "center",
-							"items-start": align === "start",
-							"items-end": align === "end"
-						},
-						className
-					)}
-				>
-					<slot name="preview" />
-				</div>
-			</Tabs.Content>
-		</Tabs.Root>
-	</div>
-{/if}
+<div
+	class={cn("group relative mb-4 mt-10 flex flex-col space-y-2", className)}
+	{...$$restProps}
+	data-preview
+>
+	<Tabs.Root class="relative mr-auto w-full" let:value>
+		<Tabs.List class="absolute z-20 top-5 right-4 flex items-center">
+			<Tabs.Trigger
+				value="preview"
+				class={cn(
+					buttonVariants(),
+					value === "preview"
+						? "bg-background font-semibold shadow-mini hover:bg-opacity-90"
+						: "bg-transparent shadow-none hover:bg-background"
+				)}
+			>
+				Preview
+			</Tabs.Trigger>
+			<Tabs.Trigger
+				value="code"
+				class={cn(
+					buttonVariants(),
+					value === "code"
+						? "bg-background font-semibold shadow-mini hover:bg-opacity-90"
+						: "bg-transparent shadow-none hover:bg-background hover:shadow-mini"
+				)}>&lt;Code&gt;</Tabs.Trigger
+			>
+		</Tabs.List>
+		<Tabs.Content value="code">
+			<div
+				class="w-full ![&_pre]:mt-0 [&_pre]:max-h-[443px] [&_pre]:min-h-[443px] [&_pre]:overflow-auto ![&_pre]:rounded-card"
+			>
+				<slot />
+			</div>
+		</Tabs.Content>
+		<Tabs.Content value="preview" class="relative bg-muted rounded-card">
+			<div
+				class={cn(
+					"preview flex min-h-[443px] w-full justify-center p-12",
+					{
+						"items-center": align === "center",
+						"items-start": align === "start",
+						"items-end": align === "end"
+					},
+					className
+				)}
+			>
+				<slot name="preview" />
+			</div>
+		</Tabs.Content>
+	</Tabs.Root>
+</div>
diff --git a/src/components/markdown/code.svelte b/src/components/markdown/code.svelte
index 862473a0f..f2dfb74e3 100644
--- a/src/components/markdown/code.svelte
+++ b/src/components/markdown/code.svelte
@@ -2,13 +2,11 @@
 	import { cn } from "@/utils";
 	let className: string | undefined | null = undefined;
 	export { className as class };
-	export let neutral = false;
 </script>
 
 <code
 	class={cn(
-		"relative rounded !px-[0.25rem] !py-[0.15rem] font-mono !text-[13px]",
-		neutral ? "!bg-muted" : "!bg-secondary",
+		"relative inline-flex justify-center items-center !rounded-button !px-[10px] font-mono !text-sm !bg-muted h-[29px] tracking-tight text-foreground/60 !font-medium",
 		className
 	)}
 >
diff --git a/src/components/page-header/page-header.svelte b/src/components/page-header/page-header.svelte
index 4bab88095..f645c26eb 100644
--- a/src/components/page-header/page-header.svelte
+++ b/src/components/page-header/page-header.svelte
@@ -4,6 +4,6 @@
 	export { className as class };
 </script>
 
-<section class={cn("relative pb-10", className)}>
+<section class={cn("relative", className)}>
 	<slot />
 </section>
diff --git a/src/components/ui/button/index.ts b/src/components/ui/button/index.ts
index 64acd1ca9..5338bc0b6 100644
--- a/src/components/ui/button/index.ts
+++ b/src/components/ui/button/index.ts
@@ -10,7 +10,7 @@ export const buttonVariants = tv({
 			outline:
 				"border border-input bg-transparent shadow-sm hover:bg-accent hover:text-accent-foreground",
 			secondary: "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
-			ghost: "hover:bg-accent hover:text-accent-foreground",
+			ghost: "hover:text-muted-foreground text-foreground",
 			link: "text-primary underline-offset-4 hover:underline"
 		},
 		size: {
diff --git a/src/components/ui/table/table-cell.svelte b/src/components/ui/table/table-cell.svelte
index 9e326e035..a7f1a3a65 100644
--- a/src/components/ui/table/table-cell.svelte
+++ b/src/components/ui/table/table-cell.svelte
@@ -10,7 +10,7 @@
 
 <td
 	class={cn(
-		"px-2 py-4 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+		"py-[18px] align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
 		className
 	)}
 	{...$$restProps}
diff --git a/src/components/ui/table/table-head.svelte b/src/components/ui/table/table-head.svelte
index bb4829f72..804a16caf 100644
--- a/src/components/ui/table/table-head.svelte
+++ b/src/components/ui/table/table-head.svelte
@@ -10,7 +10,7 @@
 
 <th
 	class={cn(
-		"h-10 px-2 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+		"h-10 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
 		className
 	)}
 	{...$$restProps}
diff --git a/src/components/ui/table/table-header.svelte b/src/components/ui/table/table-header.svelte
index c9be778a7..012ef212c 100644
--- a/src/components/ui/table/table-header.svelte
+++ b/src/components/ui/table/table-header.svelte
@@ -8,6 +8,6 @@
 	export { className as class };
 </script>
 
-<thead class={cn("[&_tr]:border-b bg-muted/30", className)} {...$$restProps}>
+<thead class={cn("[&_tr]:border-b", className)} {...$$restProps}>
 	<slot />
 </thead>
diff --git a/src/components/ui/table/table.svelte b/src/components/ui/table/table.svelte
index 5dfc770c6..876e8541f 100644
--- a/src/components/ui/table/table.svelte
+++ b/src/components/ui/table/table.svelte
@@ -8,7 +8,7 @@
 	export { className as class };
 </script>
 
-<div class="w-full overflow-auto border-border border rounded-md">
+<div class="w-full overflow-auto rounded-md">
 	<table class={cn("w-full caption-bottom text-sm", className)} {...$$restProps}>
 		<slot />
 	</table>
diff --git a/src/styles/app.postcss b/src/styles/app.postcss
index 69b9c75c9..e573904f2 100644
--- a/src/styles/app.postcss
+++ b/src/styles/app.postcss
@@ -1,3 +1,5 @@
+@import url("https://fonts.googleapis.com/css2?family=Source+Code+Pro:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap");
+
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
diff --git a/tailwind.config.ts b/tailwind.config.ts
index a7c1569bb..4772a9d88 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -29,7 +29,7 @@ export default {
 				},
 				muted: {
 					DEFAULT: "hsl(var(--muted) / <alpha-value>)",
-					foreground: "hsl(var(--muted-foreground) / <alpha-value>)"
+					foreground: "hsl(var(--muted-foreground))"
 				},
 				dark: {
 					DEFAULT: "hsl(var(--dark) / <alpha-value>)",
@@ -38,7 +38,8 @@ export default {
 				accent: "hsl(var(--accent) / <alpha-value>)"
 			},
 			fontFamily: {
-				sans: ["Inter", ...fontFamily.sans]
+				sans: ["Inter", ...fontFamily.sans],
+				mono: ["Source Code Pro", ...fontFamily.mono]
 			},
 			borderWidth: {
 				6: "6px"

From 7809d062f2b9fba5a586f8f843efca74c52e7c99 Mon Sep 17 00:00:00 2001
From: Hunter Johnston <johnstonhuntera@gmail.com>
Date: Wed, 15 Nov 2023 14:09:06 -0500
Subject: [PATCH 010/217] more

---
 src/components/api-section.svelte | 13 ++++++++++---
 src/components/markdown/h2.svelte |  2 +-
 tailwind.config.ts                |  2 +-
 3 files changed, 12 insertions(+), 5 deletions(-)

diff --git a/src/components/api-section.svelte b/src/components/api-section.svelte
index 45539c102..a6b2d400d 100644
--- a/src/components/api-section.svelte
+++ b/src/components/api-section.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
+	import { page } from "$app/stores";
 	import { DataAttrsTable, PropsTable } from "@/components";
-	import { h3 as H3, h2 as H2, p as P } from "@/components/markdown";
+	import { h2 as H2, p as P } from "@/components/markdown";
 	import type { APISchema } from "@/types";
 
 	export let schemas: APISchema[] = [];
@@ -8,10 +9,16 @@
 
 <H2>Component API</H2>
 
-<div class="flex flex-col gap-8">
+<div class="flex flex-col gap-12 pt-8">
 	{#each schemas as schema}
 		<div>
-			<H3>{schema.title}</H3>
+			<div
+				class="h-[29px] px-3 bg-accent rounded-button inline-flex items-center justify-center font-mono tracking-tight text-[17px] leading-tight font-medium"
+			>
+				<h3>
+					<span class="text-muted-foreground">{$page.data.title}.</span>{schema.title}
+				</h3>
+			</div>
 			<P class="!mt-2 !mb-5">{schema.description}</P>
 			<div class="flex flex-col gap-8">
 				{#if schema.props && schema.props.length}
diff --git a/src/components/markdown/h2.svelte b/src/components/markdown/h2.svelte
index a57c859a6..c249c8f1f 100644
--- a/src/components/markdown/h2.svelte
+++ b/src/components/markdown/h2.svelte
@@ -6,7 +6,7 @@
 </script>
 
 <h2
-	class={cn("mt-12 scroll-m-20 text-2xl font-bold tracking-tight first:mt-0", className)}
+	class={cn("mt-12 scroll-m-20 text-[27px] font-semibold tracking-tight first:mt-0", className)}
 	{...$$restProps}
 >
 	<slot />
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 4772a9d88..73ed95f66 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -49,7 +49,7 @@ export default {
 				"card-lg": "1.25rem",
 				"card-sm": "0.625rem",
 				input: "0.563rem",
-				button: "0.313"
+				button: "0.313rem"
 			},
 			height: {
 				input: "3rem",

From 2f90c0b15f1d7834c9ca042a45d3e18405c4e79c Mon Sep 17 00:00:00 2001
From: Hunter Johnston <johnstonhuntera@gmail.com>
Date: Wed, 15 Nov 2023 14:09:51 -0500
Subject: [PATCH 011/217] typo

---
 content/components/accordion.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/content/components/accordion.md b/content/components/accordion.md
index a9a1e5c55..a2f94b846 100644
--- a/content/components/accordion.md
+++ b/content/components/accordion.md
@@ -1,6 +1,6 @@
 ---
 title: Accordion
-description: Organizes content into collapsable sections.
+description: Organizes content into collapsible sections.
 ---
 
 <script>

From ab66d2c17c15d43a77ddc04037835e4c917d169b Mon Sep 17 00:00:00 2001
From: Hunter Johnston <johnstonhuntera@gmail.com>
Date: Wed, 15 Nov 2023 14:16:47 -0500
Subject: [PATCH 012/217] remove spacing from title

---
 src/components/api-section.svelte | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/components/api-section.svelte b/src/components/api-section.svelte
index a6b2d400d..f3953e8ce 100644
--- a/src/components/api-section.svelte
+++ b/src/components/api-section.svelte
@@ -16,7 +16,8 @@
 				class="h-[29px] px-3 bg-accent rounded-button inline-flex items-center justify-center font-mono tracking-tight text-[17px] leading-tight font-medium"
 			>
 				<h3>
-					<span class="text-muted-foreground">{$page.data.title}.</span>{schema.title}
+					<span class="text-muted-foreground">{$page.data.title.replace(" ", "")}.</span
+					>{schema.title}
 				</h3>
 			</div>
 			<P class="!mt-2 !mb-5">{schema.description}</P>

From 19e969bee67f46f8e52a8ccc417f94bafaa39f36 Mon Sep 17 00:00:00 2001
From: Hunter Johnston <johnstonhuntera@gmail.com>
Date: Wed, 15 Nov 2023 15:18:41 -0500
Subject: [PATCH 013/217] accordion

---
 other/code-block-prettier.js               | 26 ++--------
 src/components/demos/accordion-demo.svelte | 59 +++++++++++++++-------
 2 files changed, 45 insertions(+), 40 deletions(-)

diff --git a/other/code-block-prettier.js b/other/code-block-prettier.js
index 7006ed88b..76de1012c 100644
--- a/other/code-block-prettier.js
+++ b/other/code-block-prettier.js
@@ -1,9 +1,9 @@
 export const codeBlockPrettierConfig = {
-	useTabs: false,
+	useTabs: true,
 	tabWidth: 2,
 	singleQuote: false,
 	trailingComma: "none",
-	printWidth: 80,
+	printWidth: 60,
 	endOfLine: "lf",
 	pluginSearchDirs: ["node_modules/prettier-plugin-svelte"],
 	parser: "svelte",
@@ -22,25 +22,5 @@ export const codeBlockPrettierConfig = {
 			}
 		}
 	],
-	bracketSameLine: false,
-	importOrder: [
-		"<TYPES>",
-		"<TYPES>^[.]",
-		"<BUILTIN_MODULES>",
-		"<THIRD_PARTY_MODULES>",
-		"^\\$app",
-		"^\\$env",
-		"^\\$service-worker",
-		"^\\$lib/server",
-		"^\\$(?![^\\/]*\\/)",
-		"^\\$[^/]*\\/[^/]+",
-		"^[./]",
-		"\\.js$",
-		"\\.svelte$"
-	],
-	importOrderSeparation: false,
-	importOrderSortSpecifiers: true,
-	importOrderBuiltinModulesToTop: true,
-	importOrderParserPlugins: ["typescript", "svelte"],
-	importOrderMergeDuplicateImports: true
+	bracketSameLine: false
 };
diff --git a/src/components/demos/accordion-demo.svelte b/src/components/demos/accordion-demo.svelte
index 9b9d13326..8e38327ac 100644
--- a/src/components/demos/accordion-demo.svelte
+++ b/src/components/demos/accordion-demo.svelte
@@ -1,22 +1,47 @@
 <script lang="ts">
-	import * as Accordion from "@/components/ui/accordion";
+	import { Accordion } from "$lib";
+	import { CaretDown } from "phosphor-svelte";
+	import { slide } from "svelte/transition";
+
+	const items = [
+		{
+			title: "Feature Overview",
+			content:
+				"Our platform offers task management, team messaging, file sharing, progress tracking,and reporting for streamlined project management."
+		},
+		{
+			title: "Advantages of our Platform",
+			content:
+				"Experience improved productivity, enhanced communication, and customizable project views for successful project execution."
+		},
+		{
+			title: "Effective Implementation Strategies",
+			content:
+				"Define clear goals, provide comprehensive training, encourage adoption, and iterate based on feedback."
+		}
+	];
 </script>
 
 <Accordion.Root class="w-full sm:max-w-[70%]" multiple>
-	<Accordion.Item value="item-1">
-		<Accordion.Trigger>Is it accessible?</Accordion.Trigger>
-		<Accordion.Content>Yes. It adheres to the WAI-ARIA design pattern.</Accordion.Content>
-	</Accordion.Item>
-	<Accordion.Item value="item-2">
-		<Accordion.Trigger>Is it styled?</Accordion.Trigger>
-		<Accordion.Content>
-			Yes. It comes with default styles that matches the other components' aesthetic.
-		</Accordion.Content>
-	</Accordion.Item>
-	<Accordion.Item value="item-3">
-		<Accordion.Trigger>Is it animated?</Accordion.Trigger>
-		<Accordion.Content>
-			Yes. It's animated by default, but you can disable it if you prefer.
-		</Accordion.Content>
-	</Accordion.Item>
+	{#each items as item, i}
+		<Accordion.Item value="${i}" class="border-b border-dark-10 px-1.5 group">
+			<Accordion.Trigger
+				class="flex w-full flex-1 items-center justify-between py-5 text-[15px] font-medium [&[data-state=open]>span]:rotate-180 transition-all "
+			>
+				{item.title}
+				<span
+					class="rounded-[7px] inline-flex items-center justify-center h-8 w-8 hover:bg-dark-10 bg-transparent transition-all"
+				>
+					<CaretDown class="h-[18px] w-[18px] transition-all duration-200" />
+				</span>
+			</Accordion.Trigger>
+			<Accordion.Content
+				transition={slide}
+				transitionConfig={{ duration: 200 }}
+				class="text-sm pb-[25px]"
+			>
+				{item.content}
+			</Accordion.Content>
+		</Accordion.Item>
+	{/each}
 </Accordion.Root>

From 931606587781c6298dfd73bc3dc51b7df8086168 Mon Sep 17 00:00:00 2001
From: Hunter Johnston <johnstonhuntera@gmail.com>
Date: Wed, 15 Nov 2023 15:20:30 -0500
Subject: [PATCH 014/217] accordion updates

---
 src/components/demos/accordion-demo.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/demos/accordion-demo.svelte b/src/components/demos/accordion-demo.svelte
index 8e38327ac..2cf8ba6b0 100644
--- a/src/components/demos/accordion-demo.svelte
+++ b/src/components/demos/accordion-demo.svelte
@@ -26,7 +26,7 @@
 	{#each items as item, i}
 		<Accordion.Item value="${i}" class="border-b border-dark-10 px-1.5 group">
 			<Accordion.Trigger
-				class="flex w-full flex-1 items-center justify-between py-5 text-[15px] font-medium [&[data-state=open]>span]:rotate-180 transition-all "
+				class="flex w-full flex-1 items-center justify-between py-5 text-[15px] font-medium [&[data-state=open]>span>svg]:rotate-180 transition-all "
 			>
 				{item.title}
 				<span

From 96e3ffe15ff49117110412137be07d0f360da95c Mon Sep 17 00:00:00 2001
From: Hunter Johnston <johnstonhuntera@gmail.com>
Date: Wed, 15 Nov 2023 16:28:55 -0500
Subject: [PATCH 015/217] sidebar spacing

---
 src/components/navigation/sidebar-nav-items.svelte | 6 +++---
 src/components/navigation/sidebar-nav.svelte       | 2 +-
 tailwind.config.ts                                 | 2 +-
 3 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/components/navigation/sidebar-nav-items.svelte b/src/components/navigation/sidebar-nav-items.svelte
index 71720d3b6..ec2833009 100644
--- a/src/components/navigation/sidebar-nav-items.svelte
+++ b/src/components/navigation/sidebar-nav-items.svelte
@@ -7,13 +7,13 @@
 </script>
 
 {#if items.length}
-	<div class="grid grid-flow-row auto-rows-max text-sm">
+	<div class="grid grid-flow-row auto-rows-max text-sm gap-1">
 		{#each items as item, index (index)}
 			{#if item.href}
 				<a
 					href={item.href}
 					class={cn(
-						"group flex w-full items-center rounded-md text-foreground py-2 px-2.5 hover:bg-muted transition-all",
+						"group flex w-full items-center rounded-md text-foreground py-1.5 px-2.5 hover:bg-muted transition-all",
 						item.disabled && "cursor-not-allowed opacity-60",
 						$page.url.pathname === item.href ? "bg-muted" : ""
 					)}
@@ -31,7 +31,7 @@
 				</a>
 			{:else}
 				<span
-					class="flex w-full cursor-not-allowed items-center rounded-md p-2 text-muted-foreground hover:underline"
+					class="flex w-full cursor-not-allowed items-center rounded-md px-2.5 py-1.5 text-muted-foreground hover:underline"
 				>
 					{item.title}
 				</span>
diff --git a/src/components/navigation/sidebar-nav.svelte b/src/components/navigation/sidebar-nav.svelte
index 87db12b1b..8bd4a513a 100644
--- a/src/components/navigation/sidebar-nav.svelte
+++ b/src/components/navigation/sidebar-nav.svelte
@@ -8,7 +8,7 @@
 	<aside
 		class="fixed top-10 z-30 hidden h-[calc(100vh-3.5rem)] w-full shrink-0 md:sticky md:block overflow-y-auto border-r border-border"
 	>
-		<div class="h-full py-6 lg:py-8 pr-8">
+		<div class="h-full py-6 lg:py-8 pr-4">
 			<nav class="space-y-3">
 				<div class="flex flex-col w-full">
 					{#each items as item, index (index)}
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 73ed95f66..4f26608b5 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -9,7 +9,7 @@ export default {
 	theme: {
 		container: {
 			center: true,
-			padding: "2rem",
+			padding: "1rem",
 			screens: {
 				"2xl": "1440px"
 			}

From 2d3d79c5f515d6a3056aa4c2fcef132d518009a8 Mon Sep 17 00:00:00 2001
From: Hunter Johnston <johnstonhuntera@gmail.com>
Date: Wed, 15 Nov 2023 17:50:47 -0500
Subject: [PATCH 016/217] add table of contents

---
 src/components/index.ts                     |  1 +
 src/components/markdown/h2.svelte           |  2 +-
 src/components/toc/index.ts                 |  1 +
 src/components/toc/table-of-contents.svelte | 25 ++++++++++++
 src/components/toc/tree.svelte              | 44 +++++++++++++++++++++
 src/routes/+layout.svelte                   |  8 ++--
 6 files changed, 77 insertions(+), 4 deletions(-)
 create mode 100644 src/components/toc/index.ts
 create mode 100644 src/components/toc/table-of-contents.svelte
 create mode 100644 src/components/toc/tree.svelte

diff --git a/src/components/index.ts b/src/components/index.ts
index e7c8a6480..2a10c3e81 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -3,6 +3,7 @@ export * from "./page-header";
 export * from "./navigation";
 export * from "./api-tables";
 export * from "./demos";
+export * from "./toc";
 export { default as SiteHeader } from "./site-header.svelte";
 export { default as TailwindIndicator } from "./tailwind-indicator.svelte";
 export { default as SidebarNav } from "./navigation/sidebar-nav.svelte";
diff --git a/src/components/markdown/h2.svelte b/src/components/markdown/h2.svelte
index c249c8f1f..9fe8a0101 100644
--- a/src/components/markdown/h2.svelte
+++ b/src/components/markdown/h2.svelte
@@ -6,7 +6,7 @@
 </script>
 
 <h2
-	class={cn("mt-12 scroll-m-20 text-[27px] font-semibold tracking-tight first:mt-0", className)}
+	class={cn("mt-12 -scroll-m-36 text-[27px] font-semibold tracking-tight first:mt-0", className)}
 	{...$$restProps}
 >
 	<slot />
diff --git a/src/components/toc/index.ts b/src/components/toc/index.ts
new file mode 100644
index 000000000..61f82d98d
--- /dev/null
+++ b/src/components/toc/index.ts
@@ -0,0 +1 @@
+export { default as TableOfContents } from "./table-of-contents.svelte";
diff --git a/src/components/toc/table-of-contents.svelte b/src/components/toc/table-of-contents.svelte
new file mode 100644
index 000000000..55ff1a3ad
--- /dev/null
+++ b/src/components/toc/table-of-contents.svelte
@@ -0,0 +1,25 @@
+<script lang="ts">
+	import { createTableOfContents } from "@melt-ui/svelte";
+	import Tree from "./tree.svelte";
+
+	export let selector = "#content";
+
+	const {
+		elements: { item },
+		states: { headingsTree, activeHeadingIdxs },
+		helpers: { isActive }
+	} = createTableOfContents({
+		selector,
+		exclude: ["h1", "h4", "h5", "h6"],
+		activeType: "all",
+		scrollOffset: 80
+	});
+</script>
+
+<div class="overflow-y-auto rounded-lg p-4">
+	<nav>
+		{#key $headingsTree}
+			<Tree tree={$headingsTree} activeHeadingIdxs={$activeHeadingIdxs} {item} {isActive} />
+		{/key}
+	</nav>
+</div>
diff --git a/src/components/toc/tree.svelte b/src/components/toc/tree.svelte
new file mode 100644
index 000000000..e1c276e41
--- /dev/null
+++ b/src/components/toc/tree.svelte
@@ -0,0 +1,44 @@
+<script lang="ts">
+	import {
+		type TableOfContentsItem,
+		type TableOfContentsElements,
+		type TableOfContents,
+		melt
+	} from "@melt-ui/svelte";
+
+	export let tree: TableOfContentsItem[] = [];
+	export let activeHeadingIdxs: number[];
+	export let item: TableOfContentsElements["item"];
+	export let level = 1;
+	export let isActive: TableOfContents["helpers"]["isActive"];
+</script>
+
+<ul class="m-0 list-none">
+	{#if tree && tree.length}
+		{#each tree as heading, i (i)}
+			{@const node = heading.node.innerHTML}
+			{@const nodeWithoutSpan = node.replace(/<span.*<\/span>/g, "")}
+			<li class="mt-0 {level === 1 && 'border-l'}">
+				<a
+					href="#{heading.id}"
+					use:melt={$item(heading.id)}
+					class="inline-flex items-center justify-center gap-1 text-muted-foreground no-underline transition-colors
+				hover:text-foreground data-[active]:text-foreground data-[active]:border-l-foreground border-l border-l-transparent pl-4 pb-2 {level !==
+						1 && 'pl-8'} -mx-[1px] transition-all duration-200"
+				>
+					{@html nodeWithoutSpan}
+				</a>
+
+				{#if heading.children && heading.children.length}
+					<svelte:self
+						tree={heading.children}
+						level={level + 1}
+						{activeHeadingIdxs}
+						{isActive}
+						{item}
+					/>
+				{/if}
+			</li>
+		{/each}
+	{/if}
+</ul>
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 9f51a485c..5a7391559 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { dev } from "$app/environment";
-	import { SidebarNav, SiteHeader, TailwindIndicator } from "@/components";
+	import { SidebarNav, SiteHeader, TableOfContents, TailwindIndicator } from "@/components";
 	import { navigation } from "@/config";
 	import { ModeWatcher } from "mode-watcher";
 	import "@/styles/app.postcss";
@@ -15,12 +15,14 @@
 	>
 		<SidebarNav items={navigation.sidebar} />
 		<main class="relative pb-6 pt-16 lg:gap-10 xl:grid xl:grid-cols-[1fr_300px]">
-			<div class="mx-auto w-full min-w-0">
+			<div class="mx-auto w-full min-w-0" id="content">
 				<slot />
 			</div>
 
 			<div class="hidden text-sm xl:block">
-				<div class="sticky top-16 -mt-10 h-[calc(100vh-3.5rem)] overflow-hidden pt-6" />
+				<div class="sticky top-16 -mt-10 h-[calc(100vh-3.5rem)] overflow-hidden pt-6">
+					<TableOfContents />
+				</div>
 			</div>
 		</main>
 	</div>

From d89edab3206dc96e0b4e7e2c79d5cecae79e46e2 Mon Sep 17 00:00:00 2001
From: Hunter Johnston <johnstonhuntera@gmail.com>
Date: Wed, 15 Nov 2023 22:07:12 -0500
Subject: [PATCH 017/217] before butchering types maybe

---
 .eslintignore                                 |  3 +-
 .../data-attrs-table.svelte                   |  2 +-
 .../{api-tables => api-ref}/index.ts          |  0
 .../api-ref/prop-type-content.svelte          | 35 ++++++++++++
 .../props-table.svelte                        | 25 ++++++---
 src/components/api-section.svelte             |  2 +-
 src/components/index.ts                       |  2 +-
 src/components/markdown/code.svelte           |  5 +-
 src/components/ui/table/table-cell.svelte     |  2 +-
 src/content/api-reference/accordion.ts        | 53 +++++++++++++------
 src/content/api-reference/alert-dialog.ts     | 36 ++++++++++---
 .../extended-types/focus-target.ts            |  3 ++
 .../api-reference/extended-types/index.ts     |  7 +++
 src/content/constants.ts                      |  7 +++
 src/content/helpers.ts                        |  7 +++
 src/routes/+layout.svelte                     |  4 +-
 src/styles/app.postcss                        | 11 ++--
 src/styles/markdown.postcss                   |  2 +-
 src/types/api.ts                              | 16 ++++--
 src/utils/index.ts                            |  1 +
 src/utils/markdown.ts                         |  4 ++
 src/utils/transitions.ts                      | 48 +++++++++++++++++
 tailwind.config.ts                            |  3 +-
 23 files changed, 228 insertions(+), 50 deletions(-)
 rename src/components/{api-tables => api-ref}/data-attrs-table.svelte (94%)
 rename src/components/{api-tables => api-ref}/index.ts (100%)
 create mode 100644 src/components/api-ref/prop-type-content.svelte
 rename src/components/{api-tables => api-ref}/props-table.svelte (53%)
 create mode 100644 src/content/api-reference/extended-types/focus-target.ts
 create mode 100644 src/content/api-reference/extended-types/index.ts
 create mode 100644 src/content/constants.ts
 create mode 100644 src/content/helpers.ts
 create mode 100644 src/utils/transitions.ts

diff --git a/.eslintignore b/.eslintignore
index 108ff2ea1..d9685537d 100644
--- a/.eslintignore
+++ b/.eslintignore
@@ -16,4 +16,5 @@ yarn.lock
 package.json
 
 vite.config.js.timestamp-*
-vite.config.ts.timestamp-*
\ No newline at end of file
+vite.config.ts.timestamp-*
+src/content/api-reference/extended-types/
\ No newline at end of file
diff --git a/src/components/api-tables/data-attrs-table.svelte b/src/components/api-ref/data-attrs-table.svelte
similarity index 94%
rename from src/components/api-tables/data-attrs-table.svelte
rename to src/components/api-ref/data-attrs-table.svelte
index 2987158df..a004dd912 100644
--- a/src/components/api-tables/data-attrs-table.svelte
+++ b/src/components/api-ref/data-attrs-table.svelte
@@ -11,7 +11,7 @@
 	<Table.Header>
 		<Table.Row class="w-1/4">
 			<Table.Head class="w-1/2 whitespace-nowrap">Data Attribute</Table.Head>
-			<Table.Head class="w-1/2 whitespace-nowrap">Value/Description</Table.Head>
+			<Table.Head class="w-1/2 whitespace-nowrap">Description/Value</Table.Head>
 		</Table.Row>
 	</Table.Header>
 	<Table.Body>
diff --git a/src/components/api-tables/index.ts b/src/components/api-ref/index.ts
similarity index 100%
rename from src/components/api-tables/index.ts
rename to src/components/api-ref/index.ts
diff --git a/src/components/api-ref/prop-type-content.svelte b/src/components/api-ref/prop-type-content.svelte
new file mode 100644
index 000000000..d02dce6dd
--- /dev/null
+++ b/src/components/api-ref/prop-type-content.svelte
@@ -0,0 +1,35 @@
+<script lang="ts">
+	import { Popover } from "$lib";
+	import { cn, flyAndScale, parseTypeDef } from "@/utils";
+	import { Code } from "@/components";
+	import { Info } from "phosphor-svelte";
+	import type { PropType } from "@/types";
+
+	export let type: PropType | string;
+	$: console.log(type);
+</script>
+
+<div class="flex items-center gap-1.5">
+	{#if typeof type === "string"}
+		<Code class="bg-transparent px-0">{type}</Code>
+	{:else}
+		<Code class="bg-transparent px-0">{type.type}</Code>
+		<Popover.Root positioning={{ placement: "top", gutter: 8 }}>
+			<Popover.Trigger
+				class="rounded-button inline-flex items-center justify-center text-foreground-alt hover:text-foreground-alt/80 transition-colors"
+			>
+				<Info class="sq-4" weight="bold" />
+				<span class="sr-only">See type definition</span>
+			</Popover.Trigger>
+			<Popover.Content
+				transition={flyAndScale}
+				transitionConfig={{ y: 8 }}
+				class="z-50 bg-background rounded-input p-4 shadow-popover border border-border"
+			>
+				<Code class="bg-transparent px-0 text-foreground tracking-tight h-auto">
+					{@html parseTypeDef(type.definition)}
+				</Code>
+			</Popover.Content>
+		</Popover.Root>
+	{/if}
+</div>
diff --git a/src/components/api-tables/props-table.svelte b/src/components/api-ref/props-table.svelte
similarity index 53%
rename from src/components/api-tables/props-table.svelte
rename to src/components/api-ref/props-table.svelte
index ccee1c84d..11760153c 100644
--- a/src/components/api-tables/props-table.svelte
+++ b/src/components/api-ref/props-table.svelte
@@ -3,6 +3,7 @@
 	import { Code } from "@/components";
 	import type { PropSchema } from "@/types";
 	import { parseMarkdown } from "@/utils";
+	import PropTypeContent from "./prop-type-content.svelte";
 
 	export let props: PropSchema[] = [];
 </script>
@@ -12,24 +13,32 @@
 		<Table.Row class="w-1/4">
 			<Table.Head class="w-1/4 whitespace-nowrap pr-1">Property</Table.Head>
 			<Table.Head class="w-1/4 whitespace-nowrap pr-1">Type</Table.Head>
-			<Table.Head class="w-1/2 whitespace-nowrap pl-6">Description</Table.Head>
+			<Table.Head class="w-1/2 whitespace-nowrap">Description</Table.Head>
 		</Table.Row>
 	</Table.Header>
 	<Table.Body>
-		{#each props as prop}
+		{#each props as { type, name, description, default: defaultVal }}
 			<Table.Row>
 				<Table.Cell class="align-baseline pr-1">
-					<Code class="!text-foreground !font-semibold">{prop.name}</Code>
+					<Code class="text-foreground font-semibold">{name}</Code>
 				</Table.Cell>
 				<Table.Cell class="align-baseline pr-1">
-					<Code>{prop.type}</Code>
+					<PropTypeContent {type} />
 				</Table.Cell>
-				<Table.Cell class="align-baseline pl-6">
+				<Table.Cell class="align-baseline">
 					<p class="text-sm leading-6">
-						{@html parseMarkdown(prop.description)}
+						{@html parseMarkdown(description)}
 					</p>
-					<div class="mt-4 mb-8">
-						<Code class="!bg-background !px-0 !h-0">Default: {prop.default ?? "undefined"}</Code>
+					<div class="mt-4">
+						<Code class="bg-background px-0 h-auto"
+							>Default:
+							{#if defaultVal}
+								{` ${defaultVal}`}
+							{:else}
+								<span aria-hidden> &nbsp;—— </span>
+								<span class="sr-only"> undefined </span>
+							{/if}
+						</Code>
 					</div>
 				</Table.Cell>
 			</Table.Row>
diff --git a/src/components/api-section.svelte b/src/components/api-section.svelte
index f3953e8ce..75a07d95a 100644
--- a/src/components/api-section.svelte
+++ b/src/components/api-section.svelte
@@ -21,7 +21,7 @@
 				</h3>
 			</div>
 			<P class="!mt-2 !mb-5">{schema.description}</P>
-			<div class="flex flex-col gap-8">
+			<div class="flex flex-col gap-4">
 				{#if schema.props && schema.props.length}
 					<PropsTable props={schema.props} />
 				{/if}
diff --git a/src/components/index.ts b/src/components/index.ts
index 2a10c3e81..ae88d007f 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -1,7 +1,7 @@
 export * from "./icons";
 export * from "./page-header";
 export * from "./navigation";
-export * from "./api-tables";
+export * from "./api-ref";
 export * from "./demos";
 export * from "./toc";
 export { default as SiteHeader } from "./site-header.svelte";
diff --git a/src/components/markdown/code.svelte b/src/components/markdown/code.svelte
index f2dfb74e3..22f47dab7 100644
--- a/src/components/markdown/code.svelte
+++ b/src/components/markdown/code.svelte
@@ -6,8 +6,9 @@
 
 <code
 	class={cn(
-		"relative inline-flex justify-center items-center !rounded-button !px-[10px] font-mono !text-sm !bg-muted h-[29px] tracking-tight text-foreground/60 !font-medium",
-		className
+		"relative inline-flex justify-center items-center rounded-button px-[8px] font-mono text-sm bg-muted h-[27px] tracking-tighter text-foreground/60 font-medium",
+		className,
+		"custom"
 	)}
 >
 	<slot />
diff --git a/src/components/ui/table/table-cell.svelte b/src/components/ui/table/table-cell.svelte
index a7f1a3a65..4d39d922f 100644
--- a/src/components/ui/table/table-cell.svelte
+++ b/src/components/ui/table/table-cell.svelte
@@ -10,7 +10,7 @@
 
 <td
 	class={cn(
-		"py-[18px] align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+		"py-3 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
 		className
 	)}
 	{...$$restProps}
diff --git a/src/content/api-reference/accordion.ts b/src/content/api-reference/accordion.ts
index 760ee633c..f70ba738a 100644
--- a/src/content/api-reference/accordion.ts
+++ b/src/content/api-reference/accordion.ts
@@ -1,5 +1,7 @@
 import type { APISchema } from "@/types";
 import { asChild } from "./helpers";
+import * as C from "@/content/constants";
+import { union, enums } from "@/content/helpers";
 
 const root: APISchema = {
 	title: "Root",
@@ -8,33 +10,45 @@ const root: APISchema = {
 		{
 			name: "multiple",
 			default: "false",
-			type: "boolean",
+			type: C.BOOLEAN,
 			description: "Whether or not multiple accordion items can be active at the same time."
 		},
 		{
 			name: "disabled",
 			default: "false",
-			type: "boolean",
+			type: C.BOOLEAN,
 			description: "Whether or not the accordion is disabled."
 		},
 		{
 			name: "value",
-			type: "string | undefined",
+			type: {
+				type: C.UNION,
+				definition: union("string", "undefined")
+			},
 			description: "The active accordion item value."
 		},
 		{
 			name: "onValueChange",
-			type: "(value: string | undefined) => void",
+			type: {
+				type: C.FUNCTION,
+				definition: "(value: string | undefined) => void"
+			},
 			description: "A callback function called when the active accordion item value changes."
 		},
 		{
 			name: "value",
-			type: "string | undefined",
+			type: {
+				type: C.UNION,
+				definition: union("string[]", "undefined")
+			},
 			description: "The active accordion item value when `multiple` is true."
 		},
 		{
 			name: "onValueChange",
-			type: "(value: string[]) => void",
+			type: {
+				type: C.FUNCTION,
+				definition: "(value: string[] | undefined) => void"
+			},
 			description:
 				"A callback function called when the active accordion item value changes when `multiple` is true."
 		}
@@ -42,11 +56,11 @@ const root: APISchema = {
 	dataAttributes: [
 		{
 			name: "orientation",
-			value: "'horizontal' | 'vertical'",
+			value: enums("horizontal", "vertical"),
 			description: "The orientation of the accordion."
 		},
 		{
-			name: "melt-accordion",
+			name: "bits-accordion-root",
 			value: "",
 			description: "Present on the root element."
 		}
@@ -60,6 +74,7 @@ const item: APISchema = {
 		asChild,
 		{
 			name: "value",
+			required: true,
 			type: "string",
 			description: "The value of the accordion item."
 		},
@@ -73,13 +88,17 @@ const item: APISchema = {
 	dataAttributes: [
 		{
 			name: "state",
-			value: "'open' | 'closed'",
+			value: enums("open", "closed"),
 			description: "The state of the accordion item."
 		},
 		{
 			name: "disabled",
 			value: "",
 			description: "Present when the accordion item is disabled."
+		},
+		{
+			name: "bits-accordion-item",
+			description: "Present on the item element."
 		}
 	]
 };
@@ -91,18 +110,20 @@ const trigger: APISchema = {
 	dataAttributes: [
 		{
 			name: "state",
-			value: "'open' | 'closed'",
+			value: enums("open", "closed"),
 			description: "The state of the accordion item."
 		},
 		{
 			name: "disabled",
-			value: "",
 			description: "Present when the accordion item is disabled."
 		},
 		{
 			name: "value",
-			value: "",
 			description: "The value of the accordion item."
+		},
+		{
+			name: "bits-accordion-trigger",
+			description: "Present on the trigger element."
 		}
 	]
 };
@@ -114,18 +135,20 @@ const content: APISchema = {
 	dataAttributes: [
 		{
 			name: "state",
-			value: "'open' | 'closed'",
+			value: enums("open", "closed"),
 			description: "The state of the accordion item."
 		},
 		{
 			name: "disabled",
-			value: "",
 			description: "Present when the accordion item is disabled."
 		},
 		{
 			name: "value",
-			value: "",
 			description: "The value of the accordion item."
+		},
+		{
+			name: "bits-accordion-content",
+			description: "Present on the content element."
 		}
 	]
 };
diff --git a/src/content/api-reference/alert-dialog.ts b/src/content/api-reference/alert-dialog.ts
index 4762b985b..eb484926b 100644
--- a/src/content/api-reference/alert-dialog.ts
+++ b/src/content/api-reference/alert-dialog.ts
@@ -1,38 +1,54 @@
 import type { APISchema } from "@/types";
 import { asChild } from "./helpers";
+import * as C from "@/content/constants";
+import { focusProp } from "@/content/api-reference/extended-types";
+import type { AlertDialog } from "$lib";
 
-export const root: APISchema = {
+export const root: APISchema<AlertDialog.Props> = {
 	title: "Root",
 	description: "The root component used to set and manage the state of the alert dialog.",
 	props: [
 		{
 			name: "preventScroll",
+			type: C.BOOLEAN,
 			default: "true",
-			type: "boolean",
 			description: "Whether or not to prevent scroll on the body when the alert dialog is open."
 		},
 		{
 			name: "closeOnEscape",
+			type: C.BOOLEAN,
 			default: "true",
-			type: "boolean",
 			description: "Whether to close the alert dialog when the escape key is pressed."
 		},
 		{
 			name: "closeOnOutsideClick",
-			type: "boolean",
+			type: C.BOOLEAN,
 			default: "true",
 			description: "Whether to close the alert dialog when a click occurs outside of it."
 		},
 		{
 			name: "open",
-			type: "boolean",
+			type: C.BOOLEAN,
 			default: "false",
 			description: "Whether or not the alert dialog is open."
 		},
 		{
 			name: "onOpenChange",
-			type: "(open: boolean) => void",
+			type: {
+				type: C.FUNCTION,
+				definition: "(open: boolean) => void"
+			},
 			description: "A callback function called when the open state changes."
+		},
+		{
+			name: "openFocus",
+			type: focusProp,
+			description: "Override the initial focus when the alert dialog is opened."
+		},
+		{
+			name: "closeFocus",
+			type: focusProp,
+			description: "Override the focus when the alert dialog is closed."
 		}
 	]
 };
@@ -40,7 +56,13 @@ export const root: APISchema = {
 export const action: APISchema = {
 	title: "Action",
 	description: "A button used to close the alert dialog by taking an action.",
-	props: [asChild]
+	props: [asChild],
+	dataAttributes: [
+		{
+			name: "bits-alert-dialog-action",
+			description: "Present on the action button."
+		}
+	]
 };
 
 export const cancel: APISchema = {
diff --git a/src/content/api-reference/extended-types/focus-target.ts b/src/content/api-reference/extended-types/focus-target.ts
new file mode 100644
index 000000000..d7943d8ae
--- /dev/null
+++ b/src/content/api-reference/extended-types/focus-target.ts
@@ -0,0 +1,3 @@
+type FocusTarget = string | HTMLElement | SVGElement | null;
+
+type FocusProp = FocusTarget | ((el?: HTMLElement) => FocusTarget);
diff --git a/src/content/api-reference/extended-types/index.ts b/src/content/api-reference/extended-types/index.ts
new file mode 100644
index 000000000..90c8e7113
--- /dev/null
+++ b/src/content/api-reference/extended-types/index.ts
@@ -0,0 +1,7 @@
+import type { PropType } from "@/types";
+import rawFocusProp from "@/content/api-reference/extended-types/focus-target.js?raw";
+
+export const focusProp: PropType = {
+	type: "FocusProp",
+	definition: rawFocusProp
+};
diff --git a/src/content/constants.ts b/src/content/constants.ts
new file mode 100644
index 000000000..4c7c15a52
--- /dev/null
+++ b/src/content/constants.ts
@@ -0,0 +1,7 @@
+export const BOOLEAN = "boolean";
+export const STRING = "string";
+export const NUMBER = "number";
+export const FUNCTION = "function";
+export const ENUM = "enum";
+export const UNDEFINED = "undefined";
+export const UNION = "union";
diff --git a/src/content/helpers.ts b/src/content/helpers.ts
new file mode 100644
index 000000000..f58ed091d
--- /dev/null
+++ b/src/content/helpers.ts
@@ -0,0 +1,7 @@
+export function union(...types: string[]): string {
+	return types.join(" | ");
+}
+
+export function enums(...values: string[]): string {
+	return values.map((value) => `'${value}'`).join(" | ");
+}
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 5a7391559..2948ef452 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -14,8 +14,8 @@
 		class="container flex-1 items-start md:grid md:grid-cols-[220px_minmax(0,1fr)] md:gap-6 lg:grid-cols-[220px_minmax(0,1fr)] lg:gap-10"
 	>
 		<SidebarNav items={navigation.sidebar} />
-		<main class="relative pb-6 pt-16 lg:gap-10 xl:grid xl:grid-cols-[1fr_300px]">
-			<div class="mx-auto w-full min-w-0" id="content">
+		<main class="relative pb-6 pt-16 lg:gap-10 xl:grid xl:grid-cols-[1fr_220px]">
+			<div class="mx-auto w-full min-w-0 max-w-[700px]" id="content">
 				<slot />
 			</div>
 
diff --git a/src/styles/app.postcss b/src/styles/app.postcss
index e573904f2..957d4ac24 100644
--- a/src/styles/app.postcss
+++ b/src/styles/app.postcss
@@ -21,6 +21,7 @@
 
 		/* Shadows */
 		--shadow-mini: 0px 1px 0px 1px rgba(0, 0, 0, 0.04);
+		--shadow-popover: 0px 7px 12px 3px hsla(var(--dark-10));
 	}
 
 	.dark {
@@ -30,12 +31,14 @@
 		--foreground-alt: 0 0% 100%;
 		--muted: 240 4% 16%;
 		--muted-foreground: 0 0% 100% / 0.4;
-		--border: 240 5% 96%;
-		--border-input: 240 5% 96% / 0.17;
-		--border-card: 240 5% 96% / 0.1;
+		--border: 0 0% 96%;
+		--border-input: 0 0% 96% / 0.17;
+		--border-card: 0 0% 96% / 0.1;
 		--dark: 0 0% 9%;
-		--dark-10: 240 5% 96% / 0.1;
+		--dark-10: 0 0% 96% / 0.1;
 		--accent: 204 80% 16%;
+
+		--shadow-popover: 0px 7px 12px 3px rbga(0, 0, 0, 0.2);
 	}
 }
 
diff --git a/src/styles/markdown.postcss b/src/styles/markdown.postcss
index 95ed0a6c1..b15446ec3 100644
--- a/src/styles/markdown.postcss
+++ b/src/styles/markdown.postcss
@@ -1,4 +1,4 @@
-.markdown code:not(pre > code) {
+.markdown code:not(pre > code):not(.custom) {
 	@apply relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-sm;
 }
 
diff --git a/src/types/api.ts b/src/types/api.ts
index 016860a55..fa05c019c 100644
--- a/src/types/api.ts
+++ b/src/types/api.ts
@@ -1,8 +1,14 @@
-export type PropSchema = {
-	name: string;
-	default?: string;
+export type PropType = {
 	type: string;
+	definition: string;
+};
+
+export type PropSchema<T> = {
+	name: T;
+	default?: string;
+	type: PropType | string;
 	description: string;
+	required?: boolean;
 };
 
 export type DataAttrSchema = {
@@ -11,9 +17,9 @@ export type DataAttrSchema = {
 	description?: string;
 };
 
-export type APISchema = {
+export type APISchema<T> = {
 	title: string;
 	description: string;
-	props?: PropSchema[];
+	props?: PropSchema<keyof T>[];
 	dataAttributes?: DataAttrSchema[];
 };
diff --git a/src/utils/index.ts b/src/utils/index.ts
index 8e507d08e..e68721d22 100644
--- a/src/utils/index.ts
+++ b/src/utils/index.ts
@@ -2,3 +2,4 @@ export * from "./styles";
 export * from "./copy-code";
 export * from "./markdown";
 export * from "./styles";
+export * from "./transitions";
diff --git a/src/utils/markdown.ts b/src/utils/markdown.ts
index 665a52675..862254706 100644
--- a/src/utils/markdown.ts
+++ b/src/utils/markdown.ts
@@ -9,3 +9,7 @@ export function parseMarkdown(text: string) {
 		.replace(/&gt;([^>]+)\n/g, "<blockquote>$1</blockquote>")
 		.replace(/\n/g, "<br />");
 }
+
+export function parseTypeDef(text: string) {
+	return text.replace(/\n/g, "<br />");
+}
diff --git a/src/utils/transitions.ts b/src/utils/transitions.ts
new file mode 100644
index 000000000..bc6e20d54
--- /dev/null
+++ b/src/utils/transitions.ts
@@ -0,0 +1,48 @@
+import { cubicOut } from "svelte/easing";
+import type { TransitionConfig } from "svelte/transition";
+
+type FlyAndScaleParams = {
+	y?: number;
+	start?: number;
+	duration?: number;
+};
+
+const defaultFlyAndScaleParams = { y: -8, start: 0.95, duration: 200 };
+
+export const flyAndScale = (node: Element, params?: FlyAndScaleParams): TransitionConfig => {
+	const style = getComputedStyle(node);
+	const transform = style.transform === "none" ? "" : style.transform;
+	const withDefaults = { ...defaultFlyAndScaleParams, ...params };
+
+	const scaleConversion = (valueA: number, scaleA: [number, number], scaleB: [number, number]) => {
+		const [minA, maxA] = scaleA;
+		const [minB, maxB] = scaleB;
+
+		const percentage = (valueA - minA) / (maxA - minA);
+		const valueB = percentage * (maxB - minB) + minB;
+
+		return valueB;
+	};
+
+	const styleToString = (style: Record<string, number | string | undefined>): string => {
+		return Object.keys(style).reduce((str, key) => {
+			if (style[key] === undefined) return str;
+			return str + `${key}:${style[key]};`;
+		}, "");
+	};
+
+	return {
+		duration: withDefaults.duration ?? 200,
+		delay: 0,
+		css: (t) => {
+			const y = scaleConversion(t, [0, 1], [withDefaults.y, 0]);
+			const scale = scaleConversion(t, [0, 1], [withDefaults.start, 1]);
+
+			return styleToString({
+				transform: `${transform} translate3d(0, ${y}px, 0) scale(${scale})`,
+				opacity: t
+			});
+		},
+		easing: cubicOut
+	};
+};
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 4f26608b5..d2f4f919c 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -56,7 +56,8 @@ export default {
 				"input-sm": "2.5rem"
 			},
 			boxShadow: {
-				mini: "var(--shadow-mini)"
+				mini: "var(--shadow-mini)",
+				popover: "var(--shadow-popover)"
 			}
 		}
 	},

From 76708d89dbd57f2729345afa5f7be58d529bd555 Mon Sep 17 00:00:00 2001
From: Hunter Johnston <johnstonhuntera@gmail.com>
Date: Wed, 15 Nov 2023 23:00:08 -0500
Subject: [PATCH 018/217] type updates

---
 .../api-ref/prop-type-content.svelte          |  1 -
 src/content/api-reference/accordion.ts        |  5 +-
 src/content/api-reference/alert-dialog.ts     | 36 +++++-----
 src/content/{ => api-reference}/constants.ts  |  1 +
 src/content/api-reference/helpers.ts          | 24 ++++++-
 src/content/api-reference/index.ts            |  2 +
 src/content/helpers.ts                        |  7 --
 src/content/index.ts                          |  1 +
 src/lib/bits/alert-dialog/_types.ts           | 67 +++++++++++++++++++
 .../components/AlertDialog.svelte             |  4 +-
 src/lib/bits/alert-dialog/types.ts            | 42 +++---------
 src/lib/bits/aspect-ratio/_types.ts           | 11 +++
 src/lib/bits/aspect-ratio/types.ts            |  5 +-
 src/lib/bits/avatar/_types.ts                 | 21 ++++++
 src/lib/bits/avatar/types.ts                  | 22 ++----
 src/lib/bits/button/_types.ts                 | 16 +++++
 src/lib/bits/button/types.ts                  | 24 +++----
 src/lib/bits/checkbox/_types.ts               | 62 +++++++++++++++++
 .../components/CheckboxIndicator.svelte       | 19 +++++-
 src/lib/bits/checkbox/types.ts                | 21 ++----
 src/types/api.ts                              | 11 +--
 21 files changed, 279 insertions(+), 123 deletions(-)
 rename src/content/{ => api-reference}/constants.ts (87%)
 delete mode 100644 src/content/helpers.ts
 create mode 100644 src/content/index.ts
 create mode 100644 src/lib/bits/alert-dialog/_types.ts
 create mode 100644 src/lib/bits/aspect-ratio/_types.ts
 create mode 100644 src/lib/bits/avatar/_types.ts
 create mode 100644 src/lib/bits/button/_types.ts
 create mode 100644 src/lib/bits/checkbox/_types.ts

diff --git a/src/components/api-ref/prop-type-content.svelte b/src/components/api-ref/prop-type-content.svelte
index d02dce6dd..149e1868b 100644
--- a/src/components/api-ref/prop-type-content.svelte
+++ b/src/components/api-ref/prop-type-content.svelte
@@ -6,7 +6,6 @@
 	import type { PropType } from "@/types";
 
 	export let type: PropType | string;
-	$: console.log(type);
 </script>
 
 <div class="flex items-center gap-1.5">
diff --git a/src/content/api-reference/accordion.ts b/src/content/api-reference/accordion.ts
index f70ba738a..2b7fbd3e3 100644
--- a/src/content/api-reference/accordion.ts
+++ b/src/content/api-reference/accordion.ts
@@ -1,7 +1,6 @@
 import type { APISchema } from "@/types";
-import { asChild } from "./helpers";
-import * as C from "@/content/constants";
-import { union, enums } from "@/content/helpers";
+import * as C from "@/content/api-reference/constants";
+import { union, enums, asChild } from "@/content";
 
 const root: APISchema = {
 	title: "Root",
diff --git a/src/content/api-reference/alert-dialog.ts b/src/content/api-reference/alert-dialog.ts
index eb484926b..d62eb6056 100644
--- a/src/content/api-reference/alert-dialog.ts
+++ b/src/content/api-reference/alert-dialog.ts
@@ -1,62 +1,58 @@
 import type { APISchema } from "@/types";
-import { asChild } from "./helpers";
-import * as C from "@/content/constants";
+import { asChild, portalProp } from "./helpers";
+import * as C from "@/content/api-reference/constants";
 import { focusProp } from "@/content/api-reference/extended-types";
 import type { AlertDialog } from "$lib";
 
 export const root: APISchema<AlertDialog.Props> = {
 	title: "Root",
 	description: "The root component used to set and manage the state of the alert dialog.",
-	props: [
-		{
-			name: "preventScroll",
+	props: {
+		preventScroll: {
 			type: C.BOOLEAN,
 			default: "true",
 			description: "Whether or not to prevent scroll on the body when the alert dialog is open."
 		},
-		{
-			name: "closeOnEscape",
+		closeOnEscape: {
 			type: C.BOOLEAN,
 			default: "true",
 			description: "Whether to close the alert dialog when the escape key is pressed."
 		},
-		{
-			name: "closeOnOutsideClick",
+		closeOnOutsideClick: {
 			type: C.BOOLEAN,
 			default: "true",
 			description: "Whether to close the alert dialog when a click occurs outside of it."
 		},
-		{
-			name: "open",
+		open: {
 			type: C.BOOLEAN,
 			default: "false",
 			description: "Whether or not the alert dialog is open."
 		},
-		{
-			name: "onOpenChange",
+		onOpenChange: {
 			type: {
 				type: C.FUNCTION,
 				definition: "(open: boolean) => void"
 			},
 			description: "A callback function called when the open state changes."
 		},
-		{
-			name: "openFocus",
+		openFocus: {
 			type: focusProp,
 			description: "Override the initial focus when the alert dialog is opened."
 		},
-		{
-			name: "closeFocus",
+		closeFocus: {
 			type: focusProp,
 			description: "Override the focus when the alert dialog is closed."
-		}
-	]
+		},
+		portal: { ...portalProp("alert dialog") }
+	}
 };
 
 export const action: APISchema = {
 	title: "Action",
 	description: "A button used to close the alert dialog by taking an action.",
-	props: [asChild],
+	props: {
+		asChild
+	},
 	dataAttributes: [
 		{
 			name: "bits-alert-dialog-action",
diff --git a/src/content/constants.ts b/src/content/api-reference/constants.ts
similarity index 87%
rename from src/content/constants.ts
rename to src/content/api-reference/constants.ts
index 4c7c15a52..c4cc19b3e 100644
--- a/src/content/constants.ts
+++ b/src/content/api-reference/constants.ts
@@ -5,3 +5,4 @@ export const FUNCTION = "function";
 export const ENUM = "enum";
 export const UNDEFINED = "undefined";
 export const UNION = "union";
+export const OBJECT = "object";
diff --git a/src/content/api-reference/helpers.ts b/src/content/api-reference/helpers.ts
index c6a4b99bc..0b665d295 100644
--- a/src/content/api-reference/helpers.ts
+++ b/src/content/api-reference/helpers.ts
@@ -1,6 +1,28 @@
 export const asChild = {
-	name: "asChild",
 	type: "boolean",
 	default: "false",
 	description: "Whether to use [render delegation](/docs/delegation) with this component or not."
 };
+
+export function portalProp(compName: string) {
+	return {
+		type: {
+			type: "union",
+			definition: union("string", "HTMLElement", "null", "undefined")
+		},
+		description: `Where to render the ${compName} when it is open. Defaults to the body. Can be disabled by passing \`null\``
+	};
+}
+
+export const portal = {
+	type: "union",
+	definition: ""
+};
+
+export function union(...types: string[]): string {
+	return types.join(" | ");
+}
+
+export function enums(...values: string[]): string {
+	return values.map((value) => `'${value}'`).join(" | ");
+}
diff --git a/src/content/api-reference/index.ts b/src/content/api-reference/index.ts
index 0f9adb7e6..80ff8ee53 100644
--- a/src/content/api-reference/index.ts
+++ b/src/content/api-reference/index.ts
@@ -83,3 +83,5 @@ export const apiSchemas: Record<Bit, APISchema[]> = {
 export function getAPISchemas(bit: Bit): APISchema[] {
 	return apiSchemas[bit];
 }
+
+export * from "./helpers";
diff --git a/src/content/helpers.ts b/src/content/helpers.ts
deleted file mode 100644
index f58ed091d..000000000
--- a/src/content/helpers.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-export function union(...types: string[]): string {
-	return types.join(" | ");
-}
-
-export function enums(...values: string[]): string {
-	return values.map((value) => `'${value}'`).join(" | ");
-}
diff --git a/src/content/index.ts b/src/content/index.ts
new file mode 100644
index 000000000..78f5a04f2
--- /dev/null
+++ b/src/content/index.ts
@@ -0,0 +1 @@
+export * from "./api-reference/index.js";
diff --git a/src/lib/bits/alert-dialog/_types.ts b/src/lib/bits/alert-dialog/_types.ts
new file mode 100644
index 000000000..89756908b
--- /dev/null
+++ b/src/lib/bits/alert-dialog/_types.ts
@@ -0,0 +1,67 @@
+/**
+ * We define prop types without the HTMLAttributes here so that we can use them
+ * to type-check our API documentation, which requires we document each prop,
+ * but we don't want to document the HTML attributes.
+ */
+
+import type {
+	OmitOpen,
+	Expand,
+	OnChangeFn,
+	Transition,
+	AsChild,
+	TransitionProps
+} from "$lib/internal/index.js";
+import type { CreateDialogProps } from "@melt-ui/svelte";
+
+type Props = Expand<
+	OmitOpen<Omit<CreateDialogProps, "role" | "forceVisible" | "ids">> & {
+		/**
+		 * The open state of the alert dialog.
+		 * You can bind this to a boolean value to programmatically control the open state.
+		 *
+		 * @defaultValue false
+		 */
+		open?: boolean;
+
+		/**
+		 * A callback function called when the open state changes.
+		 */
+		onOpenChange?: OnChangeFn<boolean>;
+	}
+>;
+
+type TriggerProps = AsChild;
+
+type ActionProps = TriggerProps;
+type CancelProps = TriggerProps;
+
+type ContentProps<
+	T extends Transition = Transition,
+	In extends Transition = Transition,
+	Out extends Transition = Transition
+> = Expand<TransitionProps<T, In, Out> & AsChild>;
+
+type DescriptionProps = AsChild;
+
+type OverlayProps = ContentProps;
+
+type PortalProps = AsChild;
+
+type TitleProps = Expand<
+	{
+		level?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
+	} & AsChild
+>;
+
+export type {
+	Props,
+	TriggerProps,
+	ActionProps,
+	CancelProps,
+	ContentProps,
+	DescriptionProps,
+	OverlayProps,
+	PortalProps,
+	TitleProps
+};
diff --git a/src/lib/bits/alert-dialog/components/AlertDialog.svelte b/src/lib/bits/alert-dialog/components/AlertDialog.svelte
index 634c8fa56..c9215a82e 100644
--- a/src/lib/bits/alert-dialog/components/AlertDialog.svelte
+++ b/src/lib/bits/alert-dialog/components/AlertDialog.svelte
@@ -9,7 +9,6 @@
 	export let closeOnEscape: $$Props["closeOnEscape"] = undefined;
 	export let closeOnOutsideClick: $$Props["closeOnOutsideClick"] = false;
 	export let portal: $$Props["portal"] = undefined;
-	export let forceVisible: $$Props["forceVisible"] = true;
 	export let open: $$Props["open"] = undefined;
 	export let onOpenChange: $$Props["onOpenChange"] = undefined;
 	export let openFocus: $$Props["openFocus"] = undefined;
@@ -24,7 +23,7 @@
 		preventScroll,
 		closeOnOutsideClick,
 		portal,
-		forceVisible,
+		forceVisible: true,
 		defaultOpen: open,
 		openFocus,
 		closeFocus,
@@ -52,7 +51,6 @@
 	$: updateOption("closeOnEscape", closeOnEscape);
 	$: updateOption("closeOnOutsideClick", closeOnOutsideClick);
 	$: updateOption("portal", portal);
-	$: updateOption("forceVisible", forceVisible);
 	$: updateOption("openFocus", openFocus);
 	$: updateOption("closeFocus", closeFocus);
 </script>
diff --git a/src/lib/bits/alert-dialog/types.ts b/src/lib/bits/alert-dialog/types.ts
index 9587686a9..81106b172 100644
--- a/src/lib/bits/alert-dialog/types.ts
+++ b/src/lib/bits/alert-dialog/types.ts
@@ -1,51 +1,29 @@
-import type {
-	HTMLDivAttributes,
-	OmitOpen,
-	Expand,
-	HTMLHeadingAttributes,
-	OnChangeFn,
-	Transition,
-	AsChild,
-	TransitionProps
-} from "$lib/internal/index.js";
+import type { HTMLDivAttributes, HTMLHeadingAttributes, Transition } from "$lib/internal/index.js";
 import type { HTMLButtonAttributes } from "svelte/elements";
-import type { CreateDialogProps } from "@melt-ui/svelte";
 import type { CustomEventHandler } from "$lib/index.js";
+import type * as T from "./_types.js";
 
-type Props = Expand<
-	OmitOpen<Omit<CreateDialogProps, "role">> & {
-		open?: boolean;
-		onOpenChange?: OnChangeFn<boolean>;
-	}
->;
+type Props = T.Props;
 
-type TriggerProps = AsChild & HTMLButtonAttributes;
+type TriggerProps = T.TriggerProps & HTMLButtonAttributes;
 
 type ActionProps = TriggerProps;
+
 type CancelProps = TriggerProps;
 
 type ContentProps<
 	T extends Transition = Transition,
 	In extends Transition = Transition,
 	Out extends Transition = Transition
-> = Expand<TransitionProps<T, In, Out> & AsChild> & HTMLDivAttributes;
+> = T.ContentProps<T, In, Out> & HTMLDivAttributes;
 
-type DescriptionProps = AsChild & HTMLDivAttributes;
+type DescriptionProps = T.DescriptionProps & HTMLDivAttributes;
 
-type OverlayProps<
-	T extends Transition = Transition,
-	In extends Transition = Transition,
-	Out extends Transition = Transition
-> = Expand<TransitionProps<T, In, Out> & AsChild> & HTMLDivAttributes;
+type OverlayProps = T.OverlayProps & HTMLDivAttributes;
 
-type PortalProps = AsChild & HTMLDivAttributes;
+type PortalProps = T.PortalProps & HTMLDivAttributes;
 
-type TitleProps = Expand<
-	{
-		level?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
-	} & AsChild
-> &
-	HTMLHeadingAttributes;
+type TitleProps = T.TitleProps & HTMLHeadingAttributes;
 
 type TriggerEvents<T extends Element = HTMLButtonElement> = {
 	click: CustomEventHandler<MouseEvent, T>;
diff --git a/src/lib/bits/aspect-ratio/_types.ts b/src/lib/bits/aspect-ratio/_types.ts
new file mode 100644
index 000000000..4792ee509
--- /dev/null
+++ b/src/lib/bits/aspect-ratio/_types.ts
@@ -0,0 +1,11 @@
+/**
+ * We define prop types without the HTMLAttributes here so that we can use them
+ * to type-check our API documentation, which requires we document each prop,
+ * but we don't want to document the HTML attributes.
+ */
+
+type Props = Expand<{
+	ratio: number;
+}>;
+
+export type { Props };
diff --git a/src/lib/bits/aspect-ratio/types.ts b/src/lib/bits/aspect-ratio/types.ts
index 0427b1a7a..44aef2e0a 100644
--- a/src/lib/bits/aspect-ratio/types.ts
+++ b/src/lib/bits/aspect-ratio/types.ts
@@ -1,8 +1,7 @@
 import type { HTMLDivAttributes } from "$lib/internal/index.js";
+import type * as T from "./_types.js";
 
-type Props = {
-	ratio: number;
-} & HTMLDivAttributes;
+type Props = T.Props & HTMLDivAttributes;
 
 export type {
 	Props,
diff --git a/src/lib/bits/avatar/_types.ts b/src/lib/bits/avatar/_types.ts
new file mode 100644
index 000000000..c605d8b4f
--- /dev/null
+++ b/src/lib/bits/avatar/_types.ts
@@ -0,0 +1,21 @@
+/**
+ * We define prop types without the HTMLAttributes here so that we can use them
+ * to type-check our API documentation, which requires we document each prop,
+ * but we don't want to document the HTML attributes.
+ */
+
+import type { Expand, AsChild, OnChangeFn } from "$lib/internal/index.js";
+import type { CreateAvatarProps } from "@melt-ui/svelte";
+
+type Props = Expand<
+	Omit<CreateAvatarProps, "onLoadingStatusChange" | "loadingStatus" | "src"> & {
+		loadingStatus?: "loading" | "loaded" | "error";
+		onLoadingStatusChange?: OnChangeFn<"loading" | "loaded" | "error">;
+	} & AsChild
+>;
+
+type ImageProps = AsChild;
+
+type FallbackProps = AsChild;
+
+export type { Props, ImageProps, FallbackProps };
diff --git a/src/lib/bits/avatar/types.ts b/src/lib/bits/avatar/types.ts
index ed7cad7f6..2ae0fdd8a 100644
--- a/src/lib/bits/avatar/types.ts
+++ b/src/lib/bits/avatar/types.ts
@@ -1,24 +1,12 @@
-import type {
-	Expand,
-	AsChild,
-	HTMLDivAttributes,
-	HTMLSpanAttributes,
-	OnChangeFn
-} from "$lib/internal/index.js";
-import type { CreateAvatarProps } from "@melt-ui/svelte";
+import type { HTMLDivAttributes, HTMLSpanAttributes } from "$lib/internal/index.js";
 import type { HTMLImgAttributes } from "svelte/elements";
+import type * as T from "./_types.js";
 
-type Props = Expand<
-	Omit<CreateAvatarProps, "onLoadingStatusChange" | "loadingStatus" | "src"> & {
-		loadingStatus?: "loading" | "loaded" | "error";
-		onLoadingStatusChange?: OnChangeFn<"loading" | "loaded" | "error">;
-	} & AsChild
-> &
-	HTMLDivAttributes;
+type Props = T.Props & HTMLDivAttributes;
 
-type ImageProps = AsChild & HTMLImgAttributes;
+type ImageProps = T.ImageProps & HTMLImgAttributes;
 
-type FallbackProps = AsChild & HTMLSpanAttributes;
+type FallbackProps = T.FallbackProps & HTMLSpanAttributes;
 
 export type {
 	Props,
diff --git a/src/lib/bits/button/_types.ts b/src/lib/bits/button/_types.ts
new file mode 100644
index 000000000..827095657
--- /dev/null
+++ b/src/lib/bits/button/_types.ts
@@ -0,0 +1,16 @@
+/**
+ * We define prop types without the HTMLAttributes here so that we can use them
+ * to type-check our API documentation, which requires we document each prop,
+ * but we don't want to document the HTML attributes.
+ */
+
+import type { Builder } from "$lib/internal/index.js";
+
+type Props = Expand<{
+	/**
+	 * Melt UI builders to apply to the button component.
+	 */
+	builders?: Builder[];
+}>;
+
+export type { Props };
diff --git a/src/lib/bits/button/types.ts b/src/lib/bits/button/types.ts
index 7fdb71e88..2fc2e8070 100644
--- a/src/lib/bits/button/types.ts
+++ b/src/lib/bits/button/types.ts
@@ -1,19 +1,17 @@
-import type { Builder } from "$lib/internal/index.js";
 import type { HTMLAnchorAttributes, HTMLButtonAttributes } from "svelte/elements";
+import type * as T from "./_types.js";
 
-type Builders = {
-	builders?: Builder[];
-};
-
-interface AnchorElement extends Builders, HTMLAnchorAttributes {
-	href?: HTMLAnchorAttributes["href"];
-	type?: never;
-}
+type AnchorElement = T.Props &
+	HTMLAnchorAttributes & {
+		href?: HTMLAnchorAttributes["href"];
+		type?: never;
+	};
 
-interface ButtonElement extends Builders, HTMLButtonAttributes {
-	type?: HTMLButtonAttributes["type"];
-	href?: never;
-}
+type ButtonElement = T.Props &
+	HTMLButtonAttributes & {
+		type?: HTMLButtonAttributes["type"];
+		href?: never;
+	};
 
 type Props = AnchorElement | ButtonElement;
 
diff --git a/src/lib/bits/checkbox/_types.ts b/src/lib/bits/checkbox/_types.ts
new file mode 100644
index 000000000..086bef721
--- /dev/null
+++ b/src/lib/bits/checkbox/_types.ts
@@ -0,0 +1,62 @@
+/**
+ * We define prop types without the HTMLAttributes here so that we can use them
+ * to type-check our API documentation, which requires we document each prop,
+ * but we don't want to document the HTML attributes.
+ */
+
+import type { Expand, OmitChecked, OnChangeFn, AsChild } from "$lib/internal/index.js";
+import type { CreateCheckboxProps } from "@melt-ui/svelte";
+
+type Props = Expand<
+	OmitChecked<Omit<CreateCheckboxProps, "value" | "name" | "disabled" | "required">> & {
+		/**
+		 * The state of the checkbox.
+		 * You can bind this to a boolean value to programmatically control the checked state.
+		 *
+		 * @defaultValue false
+		 */
+		checked?: boolean | "indeterminate";
+
+		/**
+		 * A callback function called when the checked state changes.
+		 */
+		onCheckedChange?: OnChangeFn<boolean | "indeterminate">;
+
+		/**
+		 * Whether the checkbox is disabled or not.
+		 *
+		 * @defaultValue false
+		 */
+		disabled?: boolean;
+
+		/**
+		 * The value to be used in the checkbox input.
+		 * If no value is provided, the input's value will be the string "on".
+		 *
+		 */
+		value?: string;
+
+		/**
+		 * The name to be used in the checkbox input for form submission.
+		 *
+		 */
+		name?: string;
+
+		/**
+		 * Whether the checkbox is required or not.
+		 *
+		 * @defaultValue false
+		 */
+		required?: boolean;
+	} & AsChild
+>;
+
+type IndicatorProps = AsChild;
+
+export type {
+	Props,
+	IndicatorProps,
+	//
+	Props as CheckboxProps,
+	IndicatorProps as CheckboxIndicatorProps
+};
diff --git a/src/lib/bits/checkbox/components/CheckboxIndicator.svelte b/src/lib/bits/checkbox/components/CheckboxIndicator.svelte
index a33344c7e..bc07d80f2 100644
--- a/src/lib/bits/checkbox/components/CheckboxIndicator.svelte
+++ b/src/lib/bits/checkbox/components/CheckboxIndicator.svelte
@@ -3,12 +3,25 @@
 	import type { IndicatorProps } from "../types.js";
 
 	type $$Props = IndicatorProps;
+	export let asChild: $$Props["asChild"] = false;
+
 	const {
 		helpers: { isChecked, isIndeterminate }
 	} = getCtx();
+
 	const attrs = getAttrs("indicator");
+
+	$: slotProps = {
+		isChecked: $isChecked,
+		isIndeterminate: $isIndeterminate,
+		attrs
+	};
 </script>
 
-<div {...$$restProps} {...attrs}>
-	<slot isChecked={$isChecked} isIndeterminate={$isIndeterminate} />
-</div>
+{#if asChild}
+	<slot {...slotProps} />
+{:else}
+	<div {...$$restProps} {...attrs}>
+		<slot {...slotProps} />
+	</div>
+{/if}
diff --git a/src/lib/bits/checkbox/types.ts b/src/lib/bits/checkbox/types.ts
index 86c63ef9b..6d092795b 100644
--- a/src/lib/bits/checkbox/types.ts
+++ b/src/lib/bits/checkbox/types.ts
@@ -1,23 +1,12 @@
-import type {
-	Expand,
-	HTMLDivAttributes,
-	OmitChecked,
-	OnChangeFn,
-	AsChild
-} from "$lib/internal/index.js";
+import type { HTMLDivAttributes } from "$lib/internal/index.js";
 import type { CustomEventHandler } from "$lib/index.js";
-import type { CreateCheckboxProps } from "@melt-ui/svelte";
 import type { HTMLButtonAttributes, HTMLInputAttributes } from "svelte/elements";
+import type * as T from "./_types.js";
 
-type Props = Expand<
-	OmitChecked<CreateCheckboxProps> & {
-		checked?: boolean | "indeterminate";
-		onCheckedChange?: OnChangeFn<boolean | "indeterminate">;
-	} & AsChild
-> &
-	HTMLButtonAttributes;
+type Props = T.Props & HTMLButtonAttributes;
+
+type IndicatorProps = T.IndicatorProps & HTMLDivAttributes;
 
-type IndicatorProps = HTMLDivAttributes;
 type InputProps = Omit<HTMLInputAttributes, "value">;
 
 type Events = {
diff --git a/src/types/api.ts b/src/types/api.ts
index fa05c019c..c20bb6fe6 100644
--- a/src/types/api.ts
+++ b/src/types/api.ts
@@ -3,23 +3,26 @@ export type PropType = {
 	definition: string;
 };
 
-export type PropSchema<T> = {
-	name: T;
+export type PropSchema = {
 	default?: string;
 	type: PropType | string;
 	description: string;
 	required?: boolean;
 };
 
+export type PropObj<T> = {
+	[K in keyof T]-?: PropSchema;
+};
+
 export type DataAttrSchema = {
 	name: string;
 	value?: string;
 	description?: string;
 };
 
-export type APISchema<T> = {
+export type APISchema<T = Record<string, unknown>> = {
 	title: string;
 	description: string;
-	props?: PropSchema<keyof T>[];
+	props?: PropObj<T>;
 	dataAttributes?: DataAttrSchema[];
 };

From 2f4232b4995d6ba25cf661344002ba5e0d7e8a6d Mon Sep 17 00:00:00 2001
From: Hunter Johnston <johnstonhuntera@gmail.com>
Date: Wed, 15 Nov 2023 23:47:35 -0500
Subject: [PATCH 019/217] more types

---
 .changeset/brave-schools-burn.md              |   5 +
 src/lib/bits/avatar/_types.ts                 |   8 +
 src/lib/bits/checkbox/_types.ts               |  29 +--
 src/lib/bits/collapsible/_types.ts            |  43 +++++
 .../collapsible/components/Collapsible.svelte |  13 +-
 src/lib/bits/context-menu/_types.ts           | 168 ++++++++++++++++++
 .../components/ContextMenu.svelte             |   3 -
 .../ContextMenuCheckboxIndicator.svelte       |  20 ++-
 .../components/ContextMenuSub.svelte          |  19 +-
 src/lib/bits/context-menu/types.ts            | 108 +++--------
 src/lib/internal/types.ts                     |   6 +
 11 files changed, 298 insertions(+), 124 deletions(-)
 create mode 100644 .changeset/brave-schools-burn.md
 create mode 100644 src/lib/bits/collapsible/_types.ts
 create mode 100644 src/lib/bits/context-menu/_types.ts

diff --git a/.changeset/brave-schools-burn.md b/.changeset/brave-schools-burn.md
new file mode 100644
index 000000000..5cbec1fa4
--- /dev/null
+++ b/.changeset/brave-schools-burn.md
@@ -0,0 +1,5 @@
+---
+"bits-ui": minor
+---
+
+remove `arrowSize` prop from menu Root components in favor of passing it as a prop to the Arrow components
diff --git a/src/lib/bits/avatar/_types.ts b/src/lib/bits/avatar/_types.ts
index c605d8b4f..a80b0e218 100644
--- a/src/lib/bits/avatar/_types.ts
+++ b/src/lib/bits/avatar/_types.ts
@@ -9,7 +9,15 @@ import type { CreateAvatarProps } from "@melt-ui/svelte";
 
 type Props = Expand<
 	Omit<CreateAvatarProps, "onLoadingStatusChange" | "loadingStatus" | "src"> & {
+		/**
+		 * The loading state of the image.
+		 * You can bind this to a boolean value to programmatically control the loading state.
+		 */
 		loadingStatus?: "loading" | "loaded" | "error";
+
+		/**
+		 * A callback function called when the loading state changes.
+		 */
 		onLoadingStatusChange?: OnChangeFn<"loading" | "loaded" | "error">;
 	} & AsChild
 >;
diff --git a/src/lib/bits/checkbox/_types.ts b/src/lib/bits/checkbox/_types.ts
index 086bef721..955e4b63a 100644
--- a/src/lib/bits/checkbox/_types.ts
+++ b/src/lib/bits/checkbox/_types.ts
@@ -8,7 +8,7 @@ import type { Expand, OmitChecked, OnChangeFn, AsChild } from "$lib/internal/ind
 import type { CreateCheckboxProps } from "@melt-ui/svelte";
 
 type Props = Expand<
-	OmitChecked<Omit<CreateCheckboxProps, "value" | "name" | "disabled" | "required">> & {
+	OmitChecked<CreateCheckboxProps> & {
 		/**
 		 * The state of the checkbox.
 		 * You can bind this to a boolean value to programmatically control the checked state.
@@ -21,33 +21,6 @@ type Props = Expand<
 		 * A callback function called when the checked state changes.
 		 */
 		onCheckedChange?: OnChangeFn<boolean | "indeterminate">;
-
-		/**
-		 * Whether the checkbox is disabled or not.
-		 *
-		 * @defaultValue false
-		 */
-		disabled?: boolean;
-
-		/**
-		 * The value to be used in the checkbox input.
-		 * If no value is provided, the input's value will be the string "on".
-		 *
-		 */
-		value?: string;
-
-		/**
-		 * The name to be used in the checkbox input for form submission.
-		 *
-		 */
-		name?: string;
-
-		/**
-		 * Whether the checkbox is required or not.
-		 *
-		 * @defaultValue false
-		 */
-		required?: boolean;
 	} & AsChild
 >;
 
diff --git a/src/lib/bits/collapsible/_types.ts b/src/lib/bits/collapsible/_types.ts
new file mode 100644
index 000000000..eb7e23fb0
--- /dev/null
+++ b/src/lib/bits/collapsible/_types.ts
@@ -0,0 +1,43 @@
+/**
+ * We define prop types without the HTMLAttributes here so that we can use them
+ * to type-check our API documentation, which requires we document each prop,
+ * but we don't want to document the HTML attributes.
+ */
+
+import type {
+	Transition,
+	OmitOpen,
+	OmitForceVisible,
+	Expand,
+	OnChangeFn,
+	AsChild,
+	TransitionProps
+} from "$lib/internal/index.js";
+import type { CreateCollapsibleProps } from "@melt-ui/svelte";
+
+type Props = Expand<
+	OmitOpen<OmitForceVisible<CreateCollapsibleProps>> & {
+		/**
+		 * The open state of the collapsible.
+		 * You can bind this to a boolean value to programmatically control the open state.
+		 *
+		 * @defaultValue false
+		 */
+		open?: boolean;
+
+		/**
+		 * A callback function called when the open state changes.
+		 */
+		onOpenChange?: OnChangeFn<boolean>;
+	} & AsChild
+>;
+
+type ContentProps<
+	T extends Transition = Transition,
+	In extends Transition = Transition,
+	Out extends Transition = Transition
+> = Expand<TransitionProps<T, In, Out> & AsChild>;
+
+type TriggerProps = AsChild;
+
+export type { Props, ContentProps, TriggerProps };
diff --git a/src/lib/bits/collapsible/components/Collapsible.svelte b/src/lib/bits/collapsible/components/Collapsible.svelte
index eecfd934f..34168728a 100644
--- a/src/lib/bits/collapsible/components/Collapsible.svelte
+++ b/src/lib/bits/collapsible/components/Collapsible.svelte
@@ -4,7 +4,6 @@
 	import type { Props } from "../types.js";
 
 	type $$Props = Props;
-	export let forceVisible: $$Props["forceVisible"] = false;
 	export let disabled: $$Props["disabled"] = undefined;
 	export let open: $$Props["open"] = undefined;
 	export let onOpenChange: $$Props["onOpenChange"] = undefined;
@@ -16,7 +15,7 @@
 		updateOption
 	} = setCtx({
 		disabled,
-		forceVisible,
+		forceVisible: true,
 		defaultOpen: open,
 		onOpenChange: ({ next }) => {
 			if (open !== next) {
@@ -30,16 +29,20 @@
 	$: open !== undefined && localOpen.set(open);
 
 	$: updateOption("disabled", disabled);
-	$: updateOption("forceVisible", forceVisible);
 
 	$: builder = $root;
 	const attrs = getAttrs("root");
+
+	$: slotProps = {
+		builder,
+		attrs
+	};
 </script>
 
 {#if asChild}
-	<slot {builder} {attrs} />
+	<slot {...slotProps} />
 {:else}
 	<div use:melt={builder} {...$$restProps} {...attrs}>
-		<slot {builder} {attrs} />
+		<slot {...slotProps} />
 	</div>
 {/if}
diff --git a/src/lib/bits/context-menu/_types.ts b/src/lib/bits/context-menu/_types.ts
new file mode 100644
index 000000000..af6e646bc
--- /dev/null
+++ b/src/lib/bits/context-menu/_types.ts
@@ -0,0 +1,168 @@
+/**
+ * We define prop types without the HTMLAttributes here so that we can use them
+ * to type-check our API documentation, which requires we document each prop,
+ * but we don't want to document the HTML attributes.
+ */
+
+import type {
+	AsChild,
+	Expand,
+	OmitChecked,
+	OmitOpen,
+	OmitValue,
+	OnChangeFn,
+	Transition,
+	TransitionProps
+} from "$lib/internal/index.js";
+import type {
+	CreateContextMenuProps,
+	CreateContextMenuCheckboxItemProps,
+	CreateContextMenuRadioGroupProps,
+	ContextMenuRadioItemProps,
+	CreateContextSubmenuProps
+} from "@melt-ui/svelte";
+
+type Props = Expand<
+	OmitOpen<Omit<CreateContextMenuProps, "arrowSize">> & {
+		/**
+		 * The open state of the context menu.
+		 * You can bind this to a boolean value to programmatically control the open state.
+		 *
+		 * @defaultValue false
+		 */
+		open?: boolean;
+
+		/**
+		 * A callback function called when the open state changes.
+		 */
+		onOpenChange?: OnChangeFn<boolean>;
+	}
+>;
+
+type CheckboxItemProps = Expand<
+	OmitChecked<CreateContextMenuCheckboxItemProps> & {
+		/**
+		 * The checked state of the checkbox item.
+		 * You can bind this to a boolean value to programmatically control the checked state.
+		 *
+		 * @defaultValue false
+		 */
+		checked?: boolean | "indeterminate";
+
+		/**
+		 * A callback function called when the checked state changes.
+		 */
+		onCheckedChange?: OnChangeFn<boolean | "indeterminate">;
+	} & AsChild
+>;
+
+type RadioGroupProps = Expand<
+	OmitValue<CreateContextMenuRadioGroupProps> & {
+		/**
+		 * The value of the radio group.
+		 *
+		 * @defaultValue undefined
+		 */
+		value?: CreateContextMenuRadioGroupProps["defaultValue"] & {};
+
+		/**
+		 * A callback function called when the value changes.
+		 */
+		onValueChange?: OnChangeFn<CreateContextMenuRadioGroupProps["defaultValue"]>;
+	} & AsChild
+>;
+
+type RadioItemProps = Expand<ContextMenuRadioItemProps & AsChild>;
+
+type ContentProps<
+	T extends Transition = Transition,
+	In extends Transition = Transition,
+	Out extends Transition = Transition
+> = Expand<
+	{
+		sideOffset?: number;
+	} & TransitionProps<T, In, Out> &
+		AsChild
+>;
+
+type GroupProps = AsChild;
+
+type ItemProps = Expand<
+	{
+		/**
+		 * Whether the item is disabled or not.
+		 *
+		 * @defaultValue false;
+		 */
+		disabled?: boolean;
+	} & AsChild
+>;
+
+type CheckboxItemIndicatorProps = AsChild;
+type LabelProps = AsChild;
+type SeparatorProps = AsChild;
+
+type SubProps = Expand<
+	OmitOpen<Omit<CreateContextSubmenuProps, "ids">> & {
+		/**
+		 * The open state of the submenu.
+		 * You can bind this to a boolean value to programmatically control the open state.
+		 *
+		 * @defaultValue false
+		 */
+		open?: boolean;
+
+		/**
+		 * A callback function called when the open state changes.
+		 */
+		onOpenChange?: OnChangeFn<boolean>;
+	}
+>;
+
+type SubContentProps<
+	T extends Transition = Transition,
+	In extends Transition = Transition,
+	Out extends Transition = Transition
+> = Expand<TransitionProps<T, In, Out> & AsChild>;
+
+type SubTriggerProps = Expand<
+	{
+		/**
+		 * Whether the subtrigger is disabled or not.
+		 *
+		 * @defaultValue false;
+		 */
+		disabled?: boolean;
+	} & AsChild
+>;
+
+type TriggerProps = AsChild;
+
+type ArrowProps = Expand<
+	{
+		/**
+		 * The size of the arrow in pixels.
+		 *
+		 * @defaultValue 8
+		 */
+		size?: number;
+	} & AsChild
+>;
+
+export type {
+	Props,
+	ArrowProps,
+	CheckboxItemProps,
+	ContentProps,
+	GroupProps,
+	ItemProps,
+	CheckboxItemIndicatorProps,
+	LabelProps,
+	RadioGroupProps,
+	RadioItemProps,
+	SeparatorProps,
+	SubProps,
+	SubContentProps,
+	SubTriggerProps,
+	TriggerProps
+};
diff --git a/src/lib/bits/context-menu/components/ContextMenu.svelte b/src/lib/bits/context-menu/components/ContextMenu.svelte
index 8f0668733..3fd1b447d 100644
--- a/src/lib/bits/context-menu/components/ContextMenu.svelte
+++ b/src/lib/bits/context-menu/components/ContextMenu.svelte
@@ -10,7 +10,6 @@
 	export let open: $$Props["open"] = undefined;
 	export let onOpenChange: $$Props["onOpenChange"] = undefined;
 	export let preventScroll: $$Props["preventScroll"] = undefined;
-	export let arrowSize: $$Props["arrowSize"] = undefined;
 	export let positioning: $$Props["positioning"] = undefined;
 	export let loop: $$Props["loop"] = undefined;
 	export let dir: $$Props["dir"] = undefined;
@@ -29,7 +28,6 @@
 		forceVisible,
 		defaultOpen: open,
 		preventScroll,
-		arrowSize,
 		positioning,
 		loop,
 		dir,
@@ -52,7 +50,6 @@
 	$: updateOption("portal", portal);
 	$: updateOption("forceVisible", forceVisible);
 	$: updateOption("preventScroll", preventScroll);
-	$: updateOption("arrowSize", arrowSize);
 	$: updateOption("positioning", positioning);
 	$: updateOption("loop", loop);
 	$: updateOption("dir", dir);
diff --git a/src/lib/bits/context-menu/components/ContextMenuCheckboxIndicator.svelte b/src/lib/bits/context-menu/components/ContextMenuCheckboxIndicator.svelte
index 93db226a6..c2f2dc0b0 100644
--- a/src/lib/bits/context-menu/components/ContextMenuCheckboxIndicator.svelte
+++ b/src/lib/bits/context-menu/components/ContextMenuCheckboxIndicator.svelte
@@ -3,12 +3,22 @@
 	import { getCheckboxIndicator, getAttrs } from "../ctx.js";
 
 	type $$Props = CheckboxItemIndicatorProps;
+	export let asChild: $$Props["asChild"] = false;
 	const checked = getCheckboxIndicator();
 	const attrs = getAttrs("checkbox-indicator");
+
+	$: slotProps = {
+		attrs,
+		checked: $checked
+	};
 </script>
 
-<div {...$$restProps} {...attrs}>
-	{#if $checked}
-		<slot checked={$checked} />
-	{/if}
-</div>
+{#if asChild}
+	<slot {...slotProps} />
+{:else}
+	<div {...$$restProps} {...attrs}>
+		{#if $checked}
+			<slot {...slotProps} />
+		{/if}
+	</div>
+{/if}
diff --git a/src/lib/bits/context-menu/components/ContextMenuSub.svelte b/src/lib/bits/context-menu/components/ContextMenuSub.svelte
index d635ae8b0..536753f9c 100644
--- a/src/lib/bits/context-menu/components/ContextMenuSub.svelte
+++ b/src/lib/bits/context-menu/components/ContextMenuSub.svelte
@@ -6,13 +6,28 @@
 	export let positioning: $$Props["positioning"] = undefined;
 	export let disabled: $$Props["disabled"] = undefined;
 	export let arrowSize: $$Props["arrowSize"] = undefined;
+	export let open: $$Props["open"] = undefined;
+	export let onOpenChange: $$Props["onOpenChange"] = undefined;
 
-	const { updateOption, ids } = setSubMenuCtx({
+	const {
+		updateOption,
+		ids,
+		states: { subOpen }
+	} = setSubMenuCtx({
 		positioning,
 		disabled,
-		arrowSize
+		arrowSize,
+		onOpenChange: ({ next }) => {
+			if (open !== next) {
+				onOpenChange?.(next);
+				open = next;
+			}
+			return next;
+		}
 	});
 
+	$: open !== undefined && subOpen.set(open);
+
 	$: updateOption("positioning", positioning);
 	$: updateOption("disabled", disabled);
 	$: updateOption("arrowSize", arrowSize);
diff --git a/src/lib/bits/context-menu/types.ts b/src/lib/bits/context-menu/types.ts
index d92ed168f..ab6b19164 100644
--- a/src/lib/bits/context-menu/types.ts
+++ b/src/lib/bits/context-menu/types.ts
@@ -1,95 +1,41 @@
-import type {
-	AsChild,
-	Expand,
-	HTMLDivAttributes,
-	OmitChecked,
-	OmitOpen,
-	OmitValue,
-	OnChangeFn,
-	Transition,
-	TransitionProps
-} from "$lib/internal/index.js";
+import type { HTMLDivAttributes, Transition } from "$lib/internal/index.js";
 import type { CustomEventHandler } from "$lib";
-import type {
-	CreateContextMenuProps,
-	CreateContextMenuCheckboxItemProps,
-	CreateContextMenuRadioGroupProps,
-	ContextMenuRadioItemProps,
-	CreateContextSubmenuProps
-} from "@melt-ui/svelte";
-
-type Props = Expand<
-	OmitOpen<CreateContextMenuProps> & {
-		open?: boolean;
-		onOpenChange?: OnChangeFn<boolean>;
-	}
->;
-
-type CheckboxItemProps = Expand<
-	OmitChecked<CreateContextMenuCheckboxItemProps> & {
-		checked?: boolean | "indeterminate";
-		onCheckedChange?: OnChangeFn<boolean | "indeterminate">;
-	} & AsChild
-> &
-	HTMLDivAttributes;
-
-type RadioGroupProps = Expand<
-	OmitValue<CreateContextMenuRadioGroupProps> & {
-		value?: CreateContextMenuRadioGroupProps["defaultValue"] & {};
-		onValueChange?: OnChangeFn<CreateContextMenuRadioGroupProps["defaultValue"]>;
-	} & AsChild
-> &
-	HTMLDivAttributes;
-
-type RadioItemProps = Expand<ContextMenuRadioItemProps & AsChild> & HTMLDivAttributes;
+import type * as T from "./_types.js";
+
+type Props = T.Props;
+
+type CheckboxItemProps = T.CheckboxItemProps & HTMLDivAttributes;
+
+type RadioGroupProps = T.RadioGroupProps & HTMLDivAttributes;
+
+type RadioItemProps = T.RadioItemProps & HTMLDivAttributes;
 
 type ContentProps<
 	T extends Transition = Transition,
 	In extends Transition = Transition,
 	Out extends Transition = Transition
-> = Expand<
-	{
-		sideOffset?: number;
-	} & TransitionProps<T, In, Out> &
-		AsChild
-> &
-	HTMLDivAttributes;
-
-type GroupProps = AsChild & HTMLDivAttributes;
-
-type ItemProps = Expand<
-	{
-		disabled?: boolean;
-	} & AsChild
-> &
-	HTMLDivAttributes;
-
-type CheckboxItemIndicatorProps = HTMLDivAttributes;
-type LabelProps = AsChild & HTMLDivAttributes;
-type SeparatorProps = AsChild & HTMLDivAttributes;
-type SubProps = Expand<CreateContextSubmenuProps>;
+> = T.ContentProps<T, In, Out> & HTMLDivAttributes;
+
+type GroupProps = T.GroupProps & HTMLDivAttributes;
+
+type ItemProps = T.ItemProps & HTMLDivAttributes;
+
+type CheckboxItemIndicatorProps = T.CheckboxItemIndicatorProps & HTMLDivAttributes;
+type LabelProps = T.LabelProps & HTMLDivAttributes;
+type SeparatorProps = T.SeparatorProps & HTMLDivAttributes;
+type SubProps = T.SubProps;
 
 type SubContentProps<
 	T extends Transition = Transition,
 	In extends Transition = Transition,
 	Out extends Transition = Transition
-> = Expand<TransitionProps<T, In, Out> & AsChild> & HTMLDivAttributes;
-
-type SubTriggerProps = Expand<
-	{
-		disabled?: boolean;
-	} & AsChild
-> &
-	HTMLDivAttributes;
-
-type TriggerProps = AsChild & HTMLDivAttributes;
-
-type ArrowProps = Expand<
-	{
-		size?: number;
-	} & AsChild
-> &
-	HTMLDivAttributes;
+> = T.SubContentProps<T, In, Out> & HTMLDivAttributes;
+
+type SubTriggerProps = T.SubTriggerProps & HTMLDivAttributes;
+
+type TriggerProps = T.TriggerProps & HTMLDivAttributes;
+
+type ArrowProps = T.ArrowProps & HTMLDivAttributes;
 
 type ItemEvents<T extends Element = HTMLDivElement> = {
 	click: CustomEventHandler<MouseEvent, T>;
diff --git a/src/lib/internal/types.ts b/src/lib/internal/types.ts
index cdf7ac002..f3dc073f2 100644
--- a/src/lib/internal/types.ts
+++ b/src/lib/internal/types.ts
@@ -50,6 +50,12 @@ export type KeydownClickEvents = {
 };
 
 export type AsChild = Expand<{
+	/**
+	 * Whether to delegate rendering the element to your own
+	 * custom element.
+	 *
+	 * @see https://www.bits-ui.com/docs/delegation
+	 */
 	asChild?: boolean;
 }>;
 

From fa48771eb7496b242f1013ac25c15128d1ab51a5 Mon Sep 17 00:00:00 2001
From: Hunter Johnston <johnstonhuntera@gmail.com>
Date: Thu, 16 Nov 2023 00:26:52 -0500
Subject: [PATCH 020/217] cleanup

---
 src/lib/bits/context-menu/_types.ts           |  15 +-
 .../components/ContextMenu.svelte             |   8 +-
 .../components/ContextMenuArrow.svelte        |  10 +-
 .../ContextMenuCheckboxIndicator.svelte       |   2 +
 .../components/ContextMenuCheckboxItem.svelte |   9 +-
 .../components/ContextMenuContent.svelte      |  17 +-
 .../components/ContextMenuGroup.svelte        |  13 +-
 .../components/ContextMenuItem.svelte         |  13 +-
 .../components/ContextMenuLabel.svelte        |  15 +-
 .../components/ContextMenuRadioGroup.svelte   |  11 +-
 .../components/ContextMenuRadioItem.svelte    |  10 +-
 .../components/ContextMenuSeparator.svelte    |  11 +-
 .../components/ContextMenuSub.svelte          |  11 +-
 .../components/ContextMenuSubContent.svelte   |  21 ++-
 .../components/ContextMenuSubTrigger.svelte   |  15 +-
 .../components/ContextMenuTrigger.svelte      |  13 +-
 src/lib/bits/context-menu/types.ts            |  11 +-
 src/lib/bits/dialog/_types.ts                 |  69 +++++++
 .../bits/dialog/components/DialogClose.svelte |  13 +-
 src/lib/bits/dialog/types.ts                  |  38 +---
 src/lib/bits/dropdown-menu/_types.ts          | 174 ++++++++++++++++++
 .../components/DropdownMenu.svelte            |   3 -
 .../components/DropdownMenuArrow.svelte       |  12 +-
 .../DropdownMenuCheckboxIndicator.svelte      |  21 ++-
 .../DropdownMenuCheckboxItem.svelte           |  12 +-
 .../components/DropdownMenuContent.svelte     |  23 ++-
 .../components/DropdownMenuGroup.svelte       |  11 +-
 .../components/DropdownMenuItem.svelte        |  14 +-
 .../components/DropdownMenuLabel.svelte       |  13 +-
 .../components/DropdownMenuRadioGroup.svelte  |  13 +-
 .../components/DropdownMenuRadioItem.svelte   |  15 +-
 .../components/DropdownMenuSeparator.svelte   |  12 +-
 .../components/DropdownMenuSub.svelte         |  20 +-
 .../components/DropdownMenuSubContent.svelte  |  18 +-
 .../components/DropdownMenuSubTrigger.svelte  |  10 +-
 .../components/DropdownMenuTrigger.svelte     |  13 +-
 src/lib/bits/dropdown-menu/types.ts           | 122 ++++--------
 src/lib/internal/types.ts                     |  43 +++--
 38 files changed, 620 insertions(+), 254 deletions(-)
 create mode 100644 src/lib/bits/dialog/_types.ts
 create mode 100644 src/lib/bits/dropdown-menu/_types.ts

diff --git a/src/lib/bits/context-menu/_types.ts b/src/lib/bits/context-menu/_types.ts
index af6e646bc..861b8cdfb 100644
--- a/src/lib/bits/context-menu/_types.ts
+++ b/src/lib/bits/context-menu/_types.ts
@@ -9,21 +9,20 @@ import type {
 	Expand,
 	OmitChecked,
 	OmitOpen,
-	OmitValue,
 	OnChangeFn,
 	Transition,
 	TransitionProps
 } from "$lib/internal/index.js";
 import type {
 	CreateContextMenuProps,
-	CreateContextMenuCheckboxItemProps,
 	CreateContextMenuRadioGroupProps,
 	ContextMenuRadioItemProps,
-	CreateContextSubmenuProps
+	CreateContextSubmenuProps,
+	CreateContextMenuCheckboxItemProps
 } from "@melt-ui/svelte";
 
 type Props = Expand<
-	OmitOpen<Omit<CreateContextMenuProps, "arrowSize">> & {
+	OmitOpen<Omit<CreateContextMenuProps, "ids" | "arrowSize">> & {
 		/**
 		 * The open state of the context menu.
 		 * You can bind this to a boolean value to programmatically control the open state.
@@ -57,7 +56,7 @@ type CheckboxItemProps = Expand<
 >;
 
 type RadioGroupProps = Expand<
-	OmitValue<CreateContextMenuRadioGroupProps> & {
+	{
 		/**
 		 * The value of the radio group.
 		 *
@@ -90,9 +89,9 @@ type GroupProps = AsChild;
 type ItemProps = Expand<
 	{
 		/**
-		 * Whether the item is disabled or not.
+		 * Whether the item is disabled.
 		 *
-		 * @defaultValue false;
+		 * @defaultValue false
 		 */
 		disabled?: boolean;
 	} & AsChild
@@ -103,7 +102,7 @@ type LabelProps = AsChild;
 type SeparatorProps = AsChild;
 
 type SubProps = Expand<
-	OmitOpen<Omit<CreateContextSubmenuProps, "ids">> & {
+	OmitOpen<Omit<CreateContextSubmenuProps, "ids" | "arrowSize">> & {
 		/**
 		 * The open state of the submenu.
 		 * You can bind this to a boolean value to programmatically control the open state.
diff --git a/src/lib/bits/context-menu/components/ContextMenu.svelte b/src/lib/bits/context-menu/components/ContextMenu.svelte
index 3fd1b447d..c0afe0bf6 100644
--- a/src/lib/bits/context-menu/components/ContextMenu.svelte
+++ b/src/lib/bits/context-menu/components/ContextMenu.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
 	import type { Props } from "../types.js";
 	import { setCtx } from "../ctx.js";
+	import { derived } from "svelte/store";
 	type $$Props = Props;
 
 	export let closeOnOutsideClick: $$Props["closeOnOutsideClick"] = undefined;
@@ -43,6 +44,11 @@
 		}
 	});
 
+	const idValues = derived([ids.menu, ids.trigger], ([$menuId, $triggerId]) => ({
+		menu: $menuId,
+		trigger: $triggerId
+	}));
+
 	$: open !== undefined && localOpen.set(open);
 
 	$: updateOption("closeOnOutsideClick", closeOnOutsideClick);
@@ -58,4 +64,4 @@
 	$: updateOption("typeahead", typeahead);
 </script>
 
-<slot {ids} />
+<slot ids={$idValues} />
diff --git a/src/lib/bits/context-menu/components/ContextMenuArrow.svelte b/src/lib/bits/context-menu/components/ContextMenuArrow.svelte
index 8a38882a9..08d6b1ece 100644
--- a/src/lib/bits/context-menu/components/ContextMenuArrow.svelte
+++ b/src/lib/bits/context-menu/components/ContextMenuArrow.svelte
@@ -11,12 +11,18 @@
 	const {
 		elements: { arrow }
 	} = setArrow(size);
-	$: builder = $arrow;
+
 	const attrs = getAttrs("arrow");
+
+	$: builder = $arrow;
+	$: slotProps = {
+		builder,
+		attrs
+	};
 </script>
 
 {#if asChild}
-	<slot {builder} {attrs} />
+	<slot {...slotProps} />
 {:else}
 	<div use:melt={$arrow} {...$$restProps} {...attrs} />
 {/if}
diff --git a/src/lib/bits/context-menu/components/ContextMenuCheckboxIndicator.svelte b/src/lib/bits/context-menu/components/ContextMenuCheckboxIndicator.svelte
index c2f2dc0b0..e684ca015 100644
--- a/src/lib/bits/context-menu/components/ContextMenuCheckboxIndicator.svelte
+++ b/src/lib/bits/context-menu/components/ContextMenuCheckboxIndicator.svelte
@@ -3,7 +3,9 @@
 	import { getCheckboxIndicator, getAttrs } from "../ctx.js";
 
 	type $$Props = CheckboxItemIndicatorProps;
+
 	export let asChild: $$Props["asChild"] = false;
+
 	const checked = getCheckboxIndicator();
 	const attrs = getAttrs("checkbox-indicator");
 
diff --git a/src/lib/bits/context-menu/components/ContextMenuCheckboxItem.svelte b/src/lib/bits/context-menu/components/ContextMenuCheckboxItem.svelte
index 2d6c1359a..75150e190 100644
--- a/src/lib/bits/context-menu/components/ContextMenuCheckboxItem.svelte
+++ b/src/lib/bits/context-menu/components/ContextMenuCheckboxItem.svelte
@@ -30,11 +30,16 @@
 	$: updateOption("disabled", disabled);
 	$: builder = $checkboxItem;
 	const attrs = getAttrs("checkbox-item");
+
+	$: slotProps = {
+		builder,
+		attrs
+	};
 </script>
 
 <!-- svelte-ignore a11y-no-static-element-interactions applied by melt's action/store -->
 {#if asChild}
-	<slot {builder} {attrs} />
+	<slot {...slotProps} />
 {:else}
 	<div
 		use:melt={builder}
@@ -48,6 +53,6 @@
 		on:m-pointerleave={dispatch}
 		on:m-pointermove={dispatch}
 	>
-		<slot {builder} {attrs} />
+		<slot {...slotProps} />
 	</div>
 {/if}
diff --git a/src/lib/bits/context-menu/components/ContextMenuContent.svelte b/src/lib/bits/context-menu/components/ContextMenuContent.svelte
index 175d00d8c..0ae6bf1a8 100644
--- a/src/lib/bits/context-menu/components/ContextMenuContent.svelte
+++ b/src/lib/bits/context-menu/components/ContextMenuContent.svelte
@@ -36,10 +36,15 @@
 
 	$: builder = $menu;
 	const attrs = getAttrs("content");
+
+	$: slotProps = {
+		builder,
+		attrs
+	};
 </script>
 
 {#if asChild && $open}
-	<slot {builder} {attrs} />
+	<slot {...slotProps} />
 {:else if transition && $open}
 	<div
 		transition:transition={transitionConfig}
@@ -48,7 +53,7 @@
 		{...attrs}
 		on:m-keydown={dispatch}
 	>
-		<slot {builder} {attrs} />
+		<slot {...slotProps} />
 	</div>
 {:else if inTransition && outTransition && $open}
 	<div
@@ -59,7 +64,7 @@
 		{...attrs}
 		on:m-keydown={dispatch}
 	>
-		<slot {builder} {attrs} />
+		<slot {...slotProps} />
 	</div>
 {:else if inTransition && $open}
 	<div
@@ -69,7 +74,7 @@
 		{...attrs}
 		on:m-keydown={dispatch}
 	>
-		<slot {builder} {attrs} />
+		<slot {...slotProps} />
 	</div>
 {:else if outTransition && $open}
 	<div
@@ -79,10 +84,10 @@
 		{...attrs}
 		on:m-keydown={dispatch}
 	>
-		<slot {builder} {attrs} />
+		<slot {...slotProps} />
 	</div>
 {:else if $open}
 	<div use:melt={builder} {...$$restProps} {...attrs} on:m-keydown={dispatch}>
-		<slot {builder} {attrs} />
+		<slot {...slotProps} />
 	</div>
 {/if}
diff --git a/src/lib/bits/context-menu/components/ContextMenuGroup.svelte b/src/lib/bits/context-menu/components/ContextMenuGroup.svelte
index 8a2bb3e82..59e7b8f24 100644
--- a/src/lib/bits/context-menu/components/ContextMenuGroup.svelte
+++ b/src/lib/bits/context-menu/components/ContextMenuGroup.svelte
@@ -2,17 +2,26 @@
 	import { melt } from "@melt-ui/svelte";
 	import { setGroup, getAttrs } from "../ctx.js";
 	import type { GroupProps } from "../types.js";
+
 	type $$Props = GroupProps;
+
 	export let asChild: $$Props["asChild"] = false;
+
 	const { group, id } = setGroup();
+
 	$: builder = $group(id);
 	const attrs = getAttrs("group");
+
+	$: slotProps = {
+		builder,
+		attrs
+	};
 </script>
 
 {#if asChild}
-	<slot {builder} {attrs} />
+	<slot {...slotProps} />
 {:else}
 	<div use:melt={builder} {...$$restProps} {...attrs}>
-		<slot {builder} {attrs} />
+		<slot {...slotProps} />
 	</div>
 {/if}
diff --git a/src/lib/bits/context-menu/components/ContextMenuItem.svelte b/src/lib/bits/context-menu/components/ContextMenuItem.svelte
index 3bc61beac..3362e0dcc 100644
--- a/src/lib/bits/context-menu/components/ContextMenuItem.svelte
+++ b/src/lib/bits/context-menu/components/ContextMenuItem.svelte
@@ -7,12 +7,17 @@
 
 	type $$Props = ItemProps;
 	type $$Events = ItemEvents;
+
 	export let asChild: $$Props["asChild"] = false;
-	export let disabled = false;
+	export let disabled: $$Props["disabled"] = false;
+	export let href: $$Props["href"] = undefined;
+
 	const {
 		elements: { item }
 	} = getCtx();
+
 	const dispatch = createDispatcher();
+
 	$: builder = $item;
 	$: attrs = { ...getAttrs("item"), ...disabledAttrs(disabled) };
 </script>
@@ -20,7 +25,9 @@
 {#if asChild}
 	<slot {builder} {attrs} />
 {:else}
-	<div
+	<svelte:element
+		this={href ? "a" : "div"}
+		{href}
 		use:melt={builder}
 		{...$$restProps}
 		{...attrs}
@@ -33,5 +40,5 @@
 		on:m-pointermove={dispatch}
 	>
 		<slot {builder} {attrs} />
-	</div>
+	</svelte:element>
 {/if}
diff --git a/src/lib/bits/context-menu/components/ContextMenuLabel.svelte b/src/lib/bits/context-menu/components/ContextMenuLabel.svelte
index 569f4c957..486e4d585 100644
--- a/src/lib/bits/context-menu/components/ContextMenuLabel.svelte
+++ b/src/lib/bits/context-menu/components/ContextMenuLabel.svelte
@@ -2,17 +2,26 @@
 	import { melt } from "@melt-ui/svelte";
 	import { getGroupLabel, getAttrs } from "../ctx.js";
 	import type { LabelProps } from "../types.js";
+
 	type $$Props = LabelProps;
+
 	export let asChild: $$Props["asChild"] = false;
+
 	const { groupLabel, id } = getGroupLabel();
-	$: builder = $groupLabel(id);
 	const attrs = getAttrs("label");
+
+	$: builder = $groupLabel(id);
+
+	$: slotProps = {
+		builder,
+		attrs
+	};
 </script>
 
 {#if asChild}
-	<slot {builder} {attrs} />
+	<slot {...slotProps} />
 {:else}
 	<div use:melt={builder} {...$$restProps} {...attrs}>
-		<slot {builder} {attrs} />
+		<slot {...slotProps} />
 	</div>
 {/if}
diff --git a/src/lib/bits/context-menu/components/ContextMenuRadioGroup.svelte b/src/lib/bits/context-menu/components/ContextMenuRadioGroup.svelte
index ff5dbc3cc..097302868 100644
--- a/src/lib/bits/context-menu/components/ContextMenuRadioGroup.svelte
+++ b/src/lib/bits/context-menu/components/ContextMenuRadioGroup.svelte
@@ -21,17 +21,20 @@
 			return next;
 		}
 	});
+	const attrs = getAttrs("radio-group");
 
 	$: value !== undefined && localValue.set(value);
-
 	$: builder = $radioGroup;
-	const attrs = getAttrs("radio-group");
+	$: slotProps = {
+		builder,
+		attrs
+	};
 </script>
 
 {#if asChild}
-	<slot {builder} {attrs} />
+	<slot {...slotProps} />
 {:else}
 	<div use:melt={builder} {...$$restProps} {...attrs}>
-		<slot {builder} {attrs} />
+		<slot {...slotProps} />
 	</div>
 {/if}
diff --git a/src/lib/bits/context-menu/components/ContextMenuRadioItem.svelte b/src/lib/bits/context-menu/components/ContextMenuRadioItem.svelte
index d63b16554..fe227105a 100644
--- a/src/lib/bits/context-menu/components/ContextMenuRadioItem.svelte
+++ b/src/lib/bits/context-menu/components/ContextMenuRadioItem.svelte
@@ -14,13 +14,17 @@
 	} = setRadioItem(value);
 
 	const dispatch = createDispatcher();
+	const attrs = getAttrs("radio-item");
 
 	$: builder = $radioItem({ value, disabled });
-	const attrs = getAttrs("radio-item");
+	$: slotProps = {
+		builder,
+		attrs
+	};
 </script>
 
 {#if asChild}
-	<slot {builder} {attrs} />
+	<slot {...slotProps} />
 {:else}
 	<div
 		use:melt={builder}
@@ -34,6 +38,6 @@
 		on:m-pointerleave={dispatch}
 		on:m-pointermove={dispatch}
 	>
-		<slot {builder} {attrs} />
+		<slot {...slotProps} />
 	</div>
 {/if}
diff --git a/src/lib/bits/context-menu/components/ContextMenuSeparator.svelte b/src/lib/bits/context-menu/components/ContextMenuSeparator.svelte
index 69513af84..a03879bd3 100644
--- a/src/lib/bits/context-menu/components/ContextMenuSeparator.svelte
+++ b/src/lib/bits/context-menu/components/ContextMenuSeparator.svelte
@@ -4,16 +4,23 @@
 	import type { SeparatorProps } from "../types.js";
 
 	type $$Props = SeparatorProps;
+
 	export let asChild: $$Props["asChild"] = false;
+
 	const {
 		elements: { separator }
 	} = getCtx();
-	$: builder = $separator;
 	const attrs = getAttrs("separator");
+
+	$: builder = $separator;
+	$: slotProps = {
+		builder,
+		attrs
+	};
 </script>
 
 {#if asChild}
-	<slot {builder} {attrs} />
+	<slot {...slotProps} />
 {:else}
 	<div use:melt={$separator} {...$$restProps} {...attrs} />
 {/if}
diff --git a/src/lib/bits/context-menu/components/ContextMenuSub.svelte b/src/lib/bits/context-menu/components/ContextMenuSub.svelte
index 536753f9c..bc86d4247 100644
--- a/src/lib/bits/context-menu/components/ContextMenuSub.svelte
+++ b/src/lib/bits/context-menu/components/ContextMenuSub.svelte
@@ -1,11 +1,11 @@
 <script lang="ts">
+	import { derived } from "svelte/store";
 	import { setSubMenuCtx } from "../ctx.js";
 	import type { SubProps } from "../types.js";
 	type $$Props = SubProps;
 
 	export let positioning: $$Props["positioning"] = undefined;
 	export let disabled: $$Props["disabled"] = undefined;
-	export let arrowSize: $$Props["arrowSize"] = undefined;
 	export let open: $$Props["open"] = undefined;
 	export let onOpenChange: $$Props["onOpenChange"] = undefined;
 
@@ -16,7 +16,6 @@
 	} = setSubMenuCtx({
 		positioning,
 		disabled,
-		arrowSize,
 		onOpenChange: ({ next }) => {
 			if (open !== next) {
 				onOpenChange?.(next);
@@ -26,11 +25,15 @@
 		}
 	});
 
+	const idValues = derived([ids.menu, ids.trigger], ([$menuId, $triggerId]) => ({
+		menu: $menuId,
+		trigger: $triggerId
+	}));
+
 	$: open !== undefined && subOpen.set(open);
 
 	$: updateOption("positioning", positioning);
 	$: updateOption("disabled", disabled);
-	$: updateOption("arrowSize", arrowSize);
 </script>
 
-<slot subIds={ids} />
+<slot subIds={$idValues} />
diff --git a/src/lib/bits/context-menu/components/ContextMenuSubContent.svelte b/src/lib/bits/context-menu/components/ContextMenuSubContent.svelte
index d6204ed67..f5af6c26a 100644
--- a/src/lib/bits/context-menu/components/ContextMenuSubContent.svelte
+++ b/src/lib/bits/context-menu/components/ContextMenuSubContent.svelte
@@ -25,19 +25,24 @@
 		ids
 	} = getSubContent();
 
+	const dispatch = createDispatcher();
+	const attrs = getAttrs("sub-content");
+
 	$: builder = $subMenu;
 
 	$: if (id) {
 		ids.menu.set(id);
 	}
 
-	const dispatch = createDispatcher();
-	const attrs = getAttrs("sub-content");
+	$: slotProps = {
+		builder,
+		attrs
+	};
 </script>
 
 <!-- svelte-ignore a11y-no-static-element-interactions / applied by melt store -->
 {#if asChild && $subOpen}
-	<slot {builder} {attrs} />
+	<slot {...slotProps} />
 {:else if transition && $subOpen}
 	<div
 		transition:transition={transitionConfig}
@@ -48,7 +53,7 @@
 		on:m-keydown={dispatch}
 		on:m-pointermove={dispatch}
 	>
-		<slot {builder} {attrs} />
+		<slot {...slotProps} />
 	</div>
 {:else if inTransition && outTransition && $subOpen}
 	<div
@@ -61,7 +66,7 @@
 		on:m-keydown={dispatch}
 		on:m-pointermove={dispatch}
 	>
-		<slot {builder} {attrs} />
+		<slot {...slotProps} />
 	</div>
 {:else if inTransition && $subOpen}
 	<div
@@ -73,7 +78,7 @@
 		on:m-keydown={dispatch}
 		on:m-pointermove={dispatch}
 	>
-		<slot {builder} {attrs} />
+		<slot {...slotProps} />
 	</div>
 {:else if outTransition && $subOpen}
 	<div
@@ -85,7 +90,7 @@
 		on:m-keydown={dispatch}
 		on:m-pointermove={dispatch}
 	>
-		<slot {builder} {attrs} />
+		<slot {...slotProps} />
 	</div>
 {:else if $subOpen}
 	<div
@@ -96,6 +101,6 @@
 		on:m-keydown={dispatch}
 		on:m-pointermove={dispatch}
 	>
-		<slot {builder} {attrs} />
+		<slot {...slotProps} />
 	</div>
 {/if}
diff --git a/src/lib/bits/context-menu/components/ContextMenuSubTrigger.svelte b/src/lib/bits/context-menu/components/ContextMenuSubTrigger.svelte
index a3f262ba3..665bc16e3 100644
--- a/src/lib/bits/context-menu/components/ContextMenuSubTrigger.svelte
+++ b/src/lib/bits/context-menu/components/ContextMenuSubTrigger.svelte
@@ -5,10 +5,9 @@
 	import { disabledAttrs } from "$lib/internal/index.js";
 	import { createDispatcher } from "$lib/internal/events.js";
 
-	type $$Props = SubTriggerProps & {
-		disabled?: boolean;
-	};
+	type $$Props = SubTriggerProps;
 	type $$Events = SubTriggerEvents;
+
 	export let disabled: $$Props["disabled"] = false;
 	export let asChild: $$Props["asChild"] = false;
 	export let id: $$Props["id"] = undefined;
@@ -17,6 +16,7 @@
 		elements: { subTrigger },
 		ids
 	} = getSubMenuCtx();
+
 	const dispatch = createDispatcher();
 
 	$: if (id) {
@@ -25,11 +25,16 @@
 
 	$: builder = $subTrigger;
 	$: attrs = { ...getAttrs("sub-trigger"), ...disabledAttrs(disabled) };
+
+	$: slotProps = {
+		builder,
+		attrs
+	};
 </script>
 
 <!-- svelte-ignore a11y-no-static-element-interactions / applied by melt store -->
 {#if asChild}
-	<slot {builder} {attrs} />
+	<slot {...slotProps} />
 {:else}
 	<div
 		use:melt={builder}
@@ -43,6 +48,6 @@
 		on:m-pointermove={dispatch}
 		on:m-keydown={dispatch}
 	>
-		<slot {builder} {attrs} />
+		<slot {...slotProps} />
 	</div>
 {/if}
diff --git a/src/lib/bits/context-menu/components/ContextMenuTrigger.svelte b/src/lib/bits/context-menu/components/ContextMenuTrigger.svelte
index 3adc89863..3fad50570 100644
--- a/src/lib/bits/context-menu/components/ContextMenuTrigger.svelte
+++ b/src/lib/bits/context-menu/components/ContextMenuTrigger.svelte
@@ -6,25 +6,32 @@
 
 	type $$Props = TriggerProps;
 	type $$Events = TriggerEvents;
+
 	export let asChild: $$Props["asChild"] = false;
 	export let id: $$Props["id"] = undefined;
+
 	const {
 		elements: { trigger },
 		ids
 	} = getCtx();
 
 	const dispatch = createDispatcher();
+	const attrs = getAttrs("trigger");
 
 	$: if (id) {
 		ids.trigger.set(id);
 	}
 	$: builder = $trigger;
-	const attrs = getAttrs("trigger");
+
+	$: slotProps = {
+		builder,
+		attrs
+	};
 </script>
 
 <!-- svelte-ignore a11y-no-static-element-interactions applied by melt's action/store -->
 {#if asChild}
-	<slot {builder} {attrs} />
+	<slot {...slotProps} />
 {:else}
 	<div
 		use:melt={builder}
@@ -36,6 +43,6 @@
 		on:m-pointermove={dispatch}
 		on:m-pointerup={dispatch}
 	>
-		<slot {builder} {attrs} />
+		<slot {...slotProps} />
 	</div>
 {/if}
diff --git a/src/lib/bits/context-menu/types.ts b/src/lib/bits/context-menu/types.ts
index ab6b19164..f1382698f 100644
--- a/src/lib/bits/context-menu/types.ts
+++ b/src/lib/bits/context-menu/types.ts
@@ -1,6 +1,7 @@
 import type { HTMLDivAttributes, Transition } from "$lib/internal/index.js";
 import type { CustomEventHandler } from "$lib";
 import type * as T from "./_types.js";
+import type { HTMLAnchorAttributes } from "svelte/elements";
 
 type Props = T.Props;
 
@@ -18,7 +19,15 @@ type ContentProps<
 
 type GroupProps = T.GroupProps & HTMLDivAttributes;
 
-type ItemProps = T.ItemProps & HTMLDivAttributes;
+type AnchorElement = HTMLAnchorAttributes & {
+	href?: HTMLAnchorAttributes["href"];
+};
+
+type DivElement = HTMLDivAttributes & {
+	href?: never;
+};
+
+type ItemProps = T.ItemProps & (AnchorElement | DivElement);
 
 type CheckboxItemIndicatorProps = T.CheckboxItemIndicatorProps & HTMLDivAttributes;
 type LabelProps = T.LabelProps & HTMLDivAttributes;
diff --git a/src/lib/bits/dialog/_types.ts b/src/lib/bits/dialog/_types.ts
new file mode 100644
index 000000000..3e0dbadb1
--- /dev/null
+++ b/src/lib/bits/dialog/_types.ts
@@ -0,0 +1,69 @@
+/**
+ * We define prop types without the HTMLAttributes here so that we can use them
+ * to type-check our API documentation, which requires we document each prop,
+ * but we don't want to document the HTML attributes.
+ */
+
+import type {
+	AsChild,
+	Expand,
+	OmitOpen,
+	OnChangeFn,
+	Transition,
+	TransitionProps
+} from "$lib/internal/index.js";
+import type { CreateDialogProps } from "@melt-ui/svelte";
+
+type Props = Expand<
+	OmitOpen<Omit<CreateDialogProps, "role" | "ids">> & {
+		/**
+		 * The open state of the dialog.
+		 * You can bind this to a boolean value to programmatically control the open state.
+		 *
+		 * @defaultValue false
+		 */
+		open?: CreateDialogProps["defaultOpen"] & {};
+
+		/**
+		 * A callback function called when the open state changes.
+		 */
+		onOpenChange?: OnChangeFn<boolean>;
+	}
+>;
+
+type TriggerProps = AsChild;
+
+type CloseProps = TriggerProps;
+
+type ContentProps<
+	T extends Transition = Transition,
+	In extends Transition = Transition,
+	Out extends Transition = Transition
+> = Expand<TransitionProps<T, In, Out> & AsChild>;
+
+type DescriptionProps = AsChild;
+
+type OverlayProps<
+	T extends Transition = Transition,
+	In extends Transition = Transition,
+	Out extends Transition = Transition
+> = Expand<TransitionProps<T, In, Out> & AsChild>;
+
+type PortalProps = AsChild;
+
+type TitleProps = Expand<
+	{
+		level?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
+	} & AsChild
+>;
+
+export type {
+	Props,
+	CloseProps,
+	TitleProps,
+	PortalProps,
+	ContentProps,
+	TriggerProps,
+	OverlayProps,
+	DescriptionProps
+};
diff --git a/src/lib/bits/dialog/components/DialogClose.svelte b/src/lib/bits/dialog/components/DialogClose.svelte
index 69a5c7b0d..4761015cd 100644
--- a/src/lib/bits/dialog/components/DialogClose.svelte
+++ b/src/lib/bits/dialog/components/DialogClose.svelte
@@ -6,18 +6,25 @@
 
 	type $$Props = CloseProps;
 	type $$Events = CloseEvents;
+
 	export let asChild: $$Props["asChild"] = false;
+
 	const {
 		elements: { close }
 	} = getCtx();
 
 	const dispatch = createDispatcher();
-	$: builder = $close;
 	const attrs = getAttrs("close");
+
+	$: builder = $close;
+	$: slotProps = {
+		builder,
+		attrs
+	};
 </script>
 
 {#if asChild}
-	<slot {builder} {attrs} />
+	<slot {...slotProps} />
 {:else}
 	<button
 		use:melt={builder}
@@ -27,6 +34,6 @@
 		on:m-click={dispatch}
 		on:m-keydown={dispatch}
 	>
-		<slot {builder} {attrs} />
+		<slot {...slotProps} />
 	</button>
 {/if}
diff --git a/src/lib/bits/dialog/types.ts b/src/lib/bits/dialog/types.ts
index f426a4d10..8fa1d0ea1 100644
--- a/src/lib/bits/dialog/types.ts
+++ b/src/lib/bits/dialog/types.ts
@@ -1,49 +1,29 @@
-import type {
-	AsChild,
-	Expand,
-	HTMLDivAttributes,
-	HTMLHeadingAttributes,
-	OmitOpen,
-	OnChangeFn,
-	Transition,
-	TransitionProps
-} from "$lib/internal/index.js";
+import type { HTMLDivAttributes, HTMLHeadingAttributes, Transition } from "$lib/internal/index.js";
 import type { HTMLButtonAttributes } from "svelte/elements";
-import type { CreateDialogProps } from "@melt-ui/svelte";
 import type { CustomEventHandler } from "$lib/index.js";
+import type * as T from "./_types.js";
 
-type Props = Expand<
-	OmitOpen<Omit<CreateDialogProps, "role">> & {
-		open?: CreateDialogProps["defaultOpen"] & {};
-		onOpenChange?: OnChangeFn<boolean>;
-	}
->;
-
-type TriggerProps = AsChild & HTMLButtonAttributes;
+type Props = T.Props;
 
+type TriggerProps = T.TriggerProps & HTMLButtonAttributes;
 type CloseProps = TriggerProps;
 
 type ContentProps<
 	T extends Transition = Transition,
 	In extends Transition = Transition,
 	Out extends Transition = Transition
-> = Expand<TransitionProps<T, In, Out> & AsChild> & HTMLDivAttributes;
+> = T.ContentProps<T, In, Out> & HTMLDivAttributes;
 
-type DescriptionProps = AsChild & HTMLDivAttributes;
+type DescriptionProps = T.DescriptionProps & HTMLDivAttributes;
 
 type OverlayProps<
 	T extends Transition = Transition,
 	In extends Transition = Transition,
 	Out extends Transition = Transition
-> = Expand<TransitionProps<T, In, Out> & AsChild> & HTMLDivAttributes;
+> = T.OverlayProps<T, In, Out> & HTMLDivAttributes;
 
-type PortalProps = AsChild & HTMLDivAttributes;
-type TitleProps = Expand<
-	{
-		level?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
-	} & AsChild
-> &
-	HTMLHeadingAttributes;
+type PortalProps = T.PortalProps & HTMLDivAttributes;
+type TitleProps = T.TitleProps & HTMLHeadingAttributes;
 
 type TriggerEvents<T extends Element = HTMLButtonElement> = {
 	click: CustomEventHandler<MouseEvent, T>;
diff --git a/src/lib/bits/dropdown-menu/_types.ts b/src/lib/bits/dropdown-menu/_types.ts
new file mode 100644
index 000000000..0be8a0b94
--- /dev/null
+++ b/src/lib/bits/dropdown-menu/_types.ts
@@ -0,0 +1,174 @@
+/**
+ * We define prop types without the HTMLAttributes here so that we can use them
+ * to type-check our API documentation, which requires we document each prop,
+ * but we don't want to document the HTML attributes.
+ */
+
+import type {
+	TransitionProps,
+	AsChild,
+	Expand,
+	OmitOpen,
+	OnChangeFn,
+	Transition,
+	OmitChecked
+} from "$lib/internal/index.js";
+import type { CustomEventHandler } from "$lib/index.js";
+import type {
+	CreateDropdownMenuProps,
+	CreateDropdownMenuRadioGroupProps,
+	DropdownMenuRadioItemProps,
+	CreateDropdownSubmenuProps,
+	CreateDropdownMenuCheckboxItemProps
+} from "@melt-ui/svelte";
+
+type Props = Expand<
+	OmitOpen<Omit<CreateDropdownMenuProps, "ids" | "arrowSize">> & {
+		/**
+		 * The open state of the dropdown menu.
+		 * You can bind this to a boolean value to programmatically control the open state.
+		 *
+		 * @defaultValue false
+		 */
+		open?: boolean;
+
+		/**
+		 * A callback function called when the open state changes.
+		 */
+		onOpenChange?: OnChangeFn<boolean>;
+	}
+>;
+
+type CheckboxItemProps = Expand<
+	OmitChecked<CreateDropdownMenuCheckboxItemProps> & {
+		/**
+		 * The checked state of the checkbox item.
+		 * You can bind this to a boolean value to programmatically control the checked state.
+		 *
+		 * @defaultValue false
+		 */
+		checked?: boolean | "indeterminate";
+
+		/**
+		 * A callback function called when the checked state changes.
+		 */
+		onCheckedChange?: OnChangeFn<boolean | "indeterminate">;
+	} & AsChild
+>;
+
+type RadioGroupProps = Expand<
+	{
+		/**
+		 * The value of the radio group.
+		 * You can bind this to a string value to programmatically control the value.
+		 *
+		 * @defaultValue undefined
+		 */
+		value?: CreateDropdownMenuRadioGroupProps["defaultValue"] & {};
+
+		/**
+		 * A callback function called when the value changes.
+		 */
+		onValueChange?: OnChangeFn<CreateDropdownMenuRadioGroupProps["defaultValue"]>;
+	} & AsChild
+>;
+
+type RadioItemProps = Expand<DropdownMenuRadioItemProps & AsChild>;
+
+type ContentProps<
+	T extends Transition = Transition,
+	In extends Transition = Transition,
+	Out extends Transition = Transition
+> = Expand<
+	{
+		sideOffset?: number;
+	} & TransitionProps<T, In, Out> &
+		AsChild
+>;
+
+type GroupProps = AsChild;
+
+type ItemProps = Expand<
+	{
+		/**
+		 * Whether the item is disabled.
+		 *
+		 * @defaultValue false
+		 */
+		disabled?: boolean;
+	} & AsChild
+>;
+
+type CheckboxItemIndicatorProps = AsChild;
+type LabelProps = AsChild;
+type SeparatorProps = AsChild;
+
+type SubProps = Expand<
+	OmitOpen<Omit<CreateDropdownSubmenuProps, "ids" | "arrowSize">> & {
+		/**
+		 * The open state of the submenu.
+		 * You can bind this to a boolean value to programmatically control the open state.
+		 *
+		 * @defaultValue false
+		 */
+		open?: boolean;
+
+		/**
+		 * A callback function called when the open state changes.
+		 */
+		onOpenChange?: OnChangeFn<boolean>;
+	}
+>;
+type SubContentProps<
+	T extends Transition = Transition,
+	In extends Transition = Transition,
+	Out extends Transition = Transition
+> = Expand<
+	{
+		sideOffset?: number;
+	} & TransitionProps<T, In, Out> &
+		AsChild
+>;
+
+type SubTriggerProps = Expand<
+	{
+		disabled?: boolean;
+	} & AsChild
+>;
+
+type TriggerProps = AsChild;
+
+type ArrowProps = Expand<
+	{
+		size?: number;
+	} & AsChild
+>;
+
+type ItemEvents<T extends Element = HTMLDivElement> = {
+	click: CustomEventHandler<MouseEvent, T>;
+	keydown: CustomEventHandler<KeyboardEvent, T>;
+	focusin: CustomEventHandler<FocusEvent, T>;
+	focusout: CustomEventHandler<FocusEvent, T>;
+	pointerdown: CustomEventHandler<PointerEvent, T>;
+	pointerleave: CustomEventHandler<PointerEvent, T>;
+	pointermove: CustomEventHandler<PointerEvent, T>;
+};
+
+export type {
+	ArrowProps,
+	CheckboxItemIndicatorProps,
+	CheckboxItemProps,
+	ContentProps,
+	GroupProps,
+	ItemEvents,
+	ItemProps,
+	LabelProps,
+	Props,
+	RadioGroupProps,
+	RadioItemProps,
+	SeparatorProps,
+	SubContentProps,
+	SubProps,
+	SubTriggerProps,
+	TriggerProps
+};
diff --git a/src/lib/bits/dropdown-menu/components/DropdownMenu.svelte b/src/lib/bits/dropdown-menu/components/DropdownMenu.svelte
index 46b45730d..085e9defb 100644
--- a/src/lib/bits/dropdown-menu/components/DropdownMenu.svelte
+++ b/src/lib/bits/dropdown-menu/components/DropdownMenu.svelte
@@ -11,7 +11,6 @@
 	export let open: $$Props["open"] = undefined;
 	export let onOpenChange: $$Props["onOpenChange"] = undefined;
 	export let preventScroll: $$Props["preventScroll"] = undefined;
-	export let arrowSize: $$Props["arrowSize"] = undefined;
 	export let positioning: $$Props["positioning"] = undefined;
 	export let loop: $$Props["loop"] = undefined;
 	export let dir: $$Props["dir"] = undefined;
@@ -30,7 +29,6 @@
 		forceVisible,
 		defaultOpen: open,
 		preventScroll,
-		arrowSize,
 		positioning,
 		loop,
 		dir,
@@ -58,7 +56,6 @@
 	$: updateOption("portal", portal);
 	$: updateOption("forceVisible", forceVisible);
 	$: updateOption("preventScroll", preventScroll);
-	$: updateOption("arrowSize", arrowSize);
 	$: updateOption("positioning", positioning);
 	$: updateOption("loop", loop);
 	$: updateOption("dir", dir);
diff --git a/src/lib/bits/dropdown-menu/components/DropdownMenuArrow.svelte b/src/lib/bits/dropdown-menu/components/DropdownMenuArrow.svelte
index e5ca75862..e0e37099c 100644
--- a/src/lib/bits/dropdown-menu/components/DropdownMenuArrow.svelte
+++ b/src/lib/bits/dropdown-menu/components/DropdownMenuArrow.svelte
@@ -5,19 +5,25 @@
 
 	type $$Props = ArrowProps;
 
-	export let size = 8;
+	export let size: $$Props["size"] = 8;
 	export let asChild: $$Props["asChild"] = false;
 
 	const {
 		elements: { arrow }
 	} = setArrow(size);
 
-	$: builder = $arrow;
 	const attrs = getAttrs("arrow");
+
+	$: builder = $arrow;
+
+	$: slotProps = {
+		builder,
+		attrs
+	};
 </script>
 
 {#if asChild}
-	<slot {builder} {attrs} />
+	<slot {...slotProps} />
 {:else}
 	<div use:melt={builder} />
 {/if}
diff --git a/src/lib/bits/dropdown-menu/components/DropdownMenuCheckboxIndicator.svelte b/src/lib/bits/dropdown-menu/components/DropdownMenuCheckboxIndicator.svelte
index 781ab4094..5b9896e4e 100644
--- a/src/lib/bits/dropdown-menu/components/DropdownMenuCheckboxIndicator.svelte
+++ b/src/lib/bits/dropdown-menu/components/DropdownMenuCheckboxIndicator.svelte
@@ -3,12 +3,23 @@
 	import { getAttrs, getCheckboxIndicator } from "../ctx.js";
 
 	type $$Props = CheckboxItemIndicatorProps;
+	export let asChild: $$Props["asChild"] = false;
+
 	const checked = getCheckboxIndicator();
 	const attrs = getAttrs("checkbox-indicator");
+
+	$: slotProps = {
+		attrs,
+		checked: $checked
+	};
 </script>
 
-<div {...$$restProps} {...attrs}>
-	{#if $checked}
-		<slot checked={$checked} />
-	{/if}
-</div>
+{#if asChild}
+	<slot {...slotProps} />
+{:else}
+	<div {...$$restProps} {...attrs}>
+		{#if $checked}
+			<slot {...slotProps} />
+		{/if}
+	</div>
+{/if}
diff --git a/src/lib/bits/dropdown-menu/components/DropdownMenuCheckboxItem.svelte b/src/lib/bits/dropdown-menu/components/DropdownMenuCheckboxItem.svelte
index 2f6d89bc4..a4184296d 100644
--- a/src/lib/bits/dropdown-menu/components/DropdownMenuCheckboxItem.svelte
+++ b/src/lib/bits/dropdown-menu/components/DropdownMenuCheckboxItem.svelte
@@ -6,6 +6,7 @@
 
 	type $$Props = CheckboxItemProps;
 	type $$Events = CheckboxItemEvents;
+
 	export let checked: $$Props["checked"] = undefined;
 	export let onCheckedChange: $$Props["onCheckedChange"] = undefined;
 	export let disabled: $$Props["disabled"] = undefined;
@@ -26,16 +27,21 @@
 	});
 
 	const dispatch = createDispatcher();
+	const attrs = getAttrs("checkbox-item");
 
 	$: checked !== undefined && localChecked.set(checked);
 	$: updateOption("disabled", disabled);
 
 	$: builder = $checkboxItem;
-	const attrs = getAttrs("checkbox-item");
+
+	$: slotProps = {
+		builder,
+		attrs
+	};
 </script>
 
 {#if asChild}
-	<slot {builder} {attrs} />
+	<slot {...slotProps} />
 {:else}
 	<div
 		use:melt={builder}
@@ -49,6 +55,6 @@
 		on:m-pointerleave={dispatch}
 		on:m-pointermove={dispatch}
 	>
-		<slot {builder} {attrs} />
+		<slot {...slotProps} />
 	</div>
 {/if}
diff --git a/src/lib/bits/dropdown-menu/components/DropdownMenuContent.svelte b/src/lib/bits/dropdown-menu/components/DropdownMenuContent.svelte
index 7339898bd..18a083a0e 100644
--- a/src/lib/bits/dropdown-menu/components/DropdownMenuContent.svelte
+++ b/src/lib/bits/dropdown-menu/components/DropdownMenuContent.svelte
@@ -11,6 +11,7 @@
 	type Out = $$Generic<Transition>;
 	type $$Props = ContentProps<T, In, Out>;
 	type $$Events = ContentEvents;
+
 	export let sideOffset: $$Props["sideOffset"] = 5;
 
 	export let transition: $$Props["transition"] = undefined;
@@ -31,17 +32,21 @@
 		ids
 	} = getContent(sideOffset);
 
+	const attrs = getAttrs("content");
+	const dispatch = createDispatcher();
+
 	$: if (id) {
 		ids.menu.set(id);
 	}
 	$: builder = $menu;
-	const attrs = getAttrs("content");
-	const dispatch = createDispatcher();
+	$: slotProps = {
+		builder,
+		attrs
+	};
 </script>
 
-<!-- svelte-ignore a11y-no-static-element-interactions applied by melt's action/store -->
 {#if asChild && $open}
-	<slot {builder} {attrs} />
+	<slot {...slotProps} />
 {:else if transition && $open}
 	<div
 		transition:transition={transitionConfig}
@@ -50,7 +55,7 @@
 		{...attrs}
 		on:m-keydown={dispatch}
 	>
-		<slot {builder} {attrs} />
+		<slot {...slotProps} />
 	</div>
 {:else if inTransition && outTransition && $open}
 	<div
@@ -61,7 +66,7 @@
 		{...attrs}
 		on:m-keydown={dispatch}
 	>
-		<slot {builder} {attrs} />
+		<slot {...slotProps} />
 	</div>
 {:else if inTransition && $open}
 	<div
@@ -71,7 +76,7 @@
 		{...attrs}
 		on:m-keydown={dispatch}
 	>
-		<slot {builder} {attrs} />
+		<slot {...slotProps} />
 	</div>
 {:else if outTransition && $open}
 	<div
@@ -81,10 +86,10 @@
 		{...attrs}
 		on:m-keydown={dispatch}
 	>
-		<slot {builder} {attrs} />
+		<slot {...slotProps} />
 	</div>
 {:else if $open}
 	<div use:melt={builder} {...$$restProps} {...attrs} on:m-keydown={dispatch}>
-		<slot {builder} {attrs} />
+		<slot {...slotProps} />
 	</div>
 {/if}
diff --git a/src/lib/bits/dropdown-menu/components/DropdownMenuGroup.svelte b/src/lib/bits/dropdown-menu/components/DropdownMenuGroup.svelte
index 2bb692d94..4bb816081 100644
--- a/src/lib/bits/dropdown-menu/components/DropdownMenuGroup.svelte
+++ b/src/lib/bits/dropdown-menu/components/DropdownMenuGroup.svelte
@@ -6,14 +6,19 @@
 	export let asChild: $$Props["asChild"] = false;
 
 	const { group, id } = setGroupCtx();
-	$: builder = $group(id);
 	const attrs = getAttrs("group");
+
+	$: builder = $group(id);
+	$: slotProps = {
+		builder,
+		attrs
+	};
 </script>
 
 {#if asChild}
-	<slot {builder} {attrs} />
+	<slot {...slotProps} />
 {:else}
 	<div use:melt={builder} {...$$restProps} {...attrs}>
-		<slot {builder} {attrs} />
+		<slot {...slotProps} />
 	</div>
 {/if}
diff --git a/src/lib/bits/dropdown-menu/components/DropdownMenuItem.svelte b/src/lib/bits/dropdown-menu/components/DropdownMenuItem.svelte
index 6fc217238..c9aa0bdb7 100644
--- a/src/lib/bits/dropdown-menu/components/DropdownMenuItem.svelte
+++ b/src/lib/bits/dropdown-menu/components/DropdownMenuItem.svelte
@@ -4,24 +4,30 @@
 	import { melt } from "@melt-ui/svelte";
 	import { getCtx, getAttrs } from "../ctx.js";
 	import type { ItemEvents, ItemProps } from "../types.js";
+
 	type $$Props = ItemProps;
 	type $$Events = ItemEvents;
+
 	export let href: $$Props["href"] = undefined;
 	export let asChild: $$Props["asChild"] = false;
-	export let disabled = false;
+	export let disabled: $$Props["disabled"] = false;
 
 	const {
 		elements: { item }
 	} = getCtx();
+	const dispatch = createDispatcher();
 
 	$: builder = $item;
 	$: attrs = { ...getAttrs("item"), ...disabledAttrs(disabled) };
 
-	const dispatch = createDispatcher();
+	$: slotProps = {
+		builder,
+		attrs
+	};
 </script>
 
 {#if asChild}
-	<slot {builder} {attrs} />
+	<slot {...slotProps} />
 {:else}
 	<svelte:element
 		this={href ? "a" : "div"}
@@ -37,6 +43,6 @@
 		on:m-pointerleave={dispatch}
 		on:m-pointermove={dispatch}
 	>
-		<slot {builder} {attrs} />
+		<slot {...slotProps} />
 	</svelte:element>
 {/if}
diff --git a/src/lib/bits/dropdown-menu/components/DropdownMenuLabel.svelte b/src/lib/bits/dropdown-menu/components/DropdownMenuLabel.svelte
index 11d29e4fb..6f5db1b6d 100644
--- a/src/lib/bits/dropdown-menu/components/DropdownMenuLabel.svelte
+++ b/src/lib/bits/dropdown-menu/components/DropdownMenuLabel.svelte
@@ -2,18 +2,25 @@
 	import { melt } from "@melt-ui/svelte";
 	import { getGroupLabel, getAttrs } from "../ctx.js";
 	import type { LabelProps } from "../types.js";
+
 	type $$Props = LabelProps;
+
 	export let asChild: $$Props["asChild"] = false;
 
 	const { groupLabel, id } = getGroupLabel();
-	$: builder = $groupLabel(id);
 	const attrs = getAttrs("label");
+
+	$: builder = $groupLabel(id);
+	$: slotProps = {
+		builder,
+		attrs
+	};
 </script>
 
 {#if asChild}
-	<slot {builder} {attrs} />
+	<slot {...slotProps} />
 {:else}
 	<div use:melt={builder} {...$$restProps} {...attrs}>
-		<slot {builder} {attrs} />
+		<slot {...slotProps} />
 	</div>
 {/if}
diff --git a/src/lib/bits/dropdown-menu/components/DropdownMenuRadioGroup.svelte b/src/lib/bits/dropdown-menu/components/DropdownMenuRadioGroup.svelte
index ff5dbc3cc..158632181 100644
--- a/src/lib/bits/dropdown-menu/components/DropdownMenuRadioGroup.svelte
+++ b/src/lib/bits/dropdown-menu/components/DropdownMenuRadioGroup.svelte
@@ -4,6 +4,7 @@
 	import type { RadioGroupProps } from "../types.js";
 
 	type $$Props = RadioGroupProps;
+
 	export let value: $$Props["value"] = undefined;
 	export let onValueChange: $$Props["onValueChange"] = undefined;
 	export let asChild: $$Props["asChild"] = false;
@@ -22,16 +23,20 @@
 		}
 	});
 
-	$: value !== undefined && localValue.set(value);
+	const attrs = getAttrs("radio-group");
 
+	$: value !== undefined && localValue.set(value);
 	$: builder = $radioGroup;
-	const attrs = getAttrs("radio-group");
+	$: slotProps = {
+		builder,
+		attrs
+	};
 </script>
 
 {#if asChild}
-	<slot {builder} {attrs} />
+	<slot {...slotProps} />
 {:else}
 	<div use:melt={builder} {...$$restProps} {...attrs}>
-		<slot {builder} {attrs} />
+		<slot {...slotProps} />
 	</div>
 {/if}
diff --git a/src/lib/bits/dropdown-menu/components/DropdownMenuRadioItem.svelte b/src/lib/bits/dropdown-menu/components/DropdownMenuRadioItem.svelte
index 28fc95cdd..2d065f2dc 100644
--- a/src/lib/bits/dropdown-menu/components/DropdownMenuRadioItem.svelte
+++ b/src/lib/bits/dropdown-menu/components/DropdownMenuRadioItem.svelte
@@ -14,17 +14,20 @@
 		elements: { radioItem }
 	} = setRadioItem(value);
 
-	$: builder = $radioItem({ value, disabled });
-
 	const attrs = getAttrs("radio-item");
 
 	const dispatch = createDispatcher();
-</script>
 
-<!-- svelte-ignore a11y-no-static-element-interactions applied by melt's action/store -->
+	$: builder = $radioItem({ value, disabled });
+
+	$: slotProps = {
+		builder,
+		attrs
+	};
+</script>
 
 {#if asChild}
-	<slot {builder} {attrs} />
+	<slot {...slotProps} />
 {:else}
 	<div
 		use:melt={builder}
@@ -38,6 +41,6 @@
 		on:m-pointerleave={dispatch}
 		on:m-pointermove={dispatch}
 	>
-		<slot {builder} {attrs} />
+		<slot {...slotProps} />
 	</div>
 {/if}
diff --git a/src/lib/bits/dropdown-menu/components/DropdownMenuSeparator.svelte b/src/lib/bits/dropdown-menu/components/DropdownMenuSeparator.svelte
index 69513af84..a7adfef80 100644
--- a/src/lib/bits/dropdown-menu/components/DropdownMenuSeparator.svelte
+++ b/src/lib/bits/dropdown-menu/components/DropdownMenuSeparator.svelte
@@ -4,16 +4,24 @@
 	import type { SeparatorProps } from "../types.js";
 
 	type $$Props = SeparatorProps;
+
 	export let asChild: $$Props["asChild"] = false;
+
 	const {
 		elements: { separator }
 	} = getCtx();
-	$: builder = $separator;
+
 	const attrs = getAttrs("separator");
+
+	$: builder = $separator;
+	$: slotProps = {
+		builder,
+		attrs
+	};
 </script>
 
 {#if asChild}
-	<slot {builder} {attrs} />
+	<slot {...slotProps} />
 {:else}
 	<div use:melt={$separator} {...$$restProps} {...attrs} />
 {/if}
diff --git a/src/lib/bits/dropdown-menu/components/DropdownMenuSub.svelte b/src/lib/bits/dropdown-menu/components/DropdownMenuSub.svelte
index 27fb9bf19..bc86d4247 100644
--- a/src/lib/bits/dropdown-menu/components/DropdownMenuSub.svelte
+++ b/src/lib/bits/dropdown-menu/components/DropdownMenuSub.svelte
@@ -6,12 +6,23 @@
 
 	export let positioning: $$Props["positioning"] = undefined;
 	export let disabled: $$Props["disabled"] = undefined;
-	export let arrowSize: $$Props["arrowSize"] = undefined;
+	export let open: $$Props["open"] = undefined;
+	export let onOpenChange: $$Props["onOpenChange"] = undefined;
 
-	const { updateOption, ids } = setSubMenuCtx({
+	const {
+		updateOption,
+		ids,
+		states: { subOpen }
+	} = setSubMenuCtx({
 		positioning,
 		disabled,
-		arrowSize
+		onOpenChange: ({ next }) => {
+			if (open !== next) {
+				onOpenChange?.(next);
+				open = next;
+			}
+			return next;
+		}
 	});
 
 	const idValues = derived([ids.menu, ids.trigger], ([$menuId, $triggerId]) => ({
@@ -19,9 +30,10 @@
 		trigger: $triggerId
 	}));
 
+	$: open !== undefined && subOpen.set(open);
+
 	$: updateOption("positioning", positioning);
 	$: updateOption("disabled", disabled);
-	$: updateOption("arrowSize", arrowSize);
 </script>
 
 <slot subIds={$idValues} />
diff --git a/src/lib/bits/dropdown-menu/components/DropdownMenuSubContent.svelte b/src/lib/bits/dropdown-menu/components/DropdownMenuSubContent.svelte
index d0a7360d7..f7e54d05a 100644
--- a/src/lib/bits/dropdown-menu/components/DropdownMenuSubContent.svelte
+++ b/src/lib/bits/dropdown-menu/components/DropdownMenuSubContent.svelte
@@ -28,16 +28,20 @@
 	} = getSubContent();
 
 	const dispatch = createDispatcher();
+	const attrs = getAttrs("sub-content");
 
 	$: if (id) {
 		ids.menu.set(id);
 	}
 	$: builder = $subMenu;
-	const attrs = getAttrs("sub-content");
+	$: slotProps = {
+		builder,
+		attrs
+	};
 </script>
 
 {#if asChild && $subOpen}
-	<slot {builder} {attrs} />
+	<slot {...slotProps} />
 {:else if transition && $subOpen}
 	<div
 		transition:transition={transitionConfig}
@@ -48,7 +52,7 @@
 		on:m-keydown={dispatch}
 		on:m-pointermove={dispatch}
 	>
-		<slot {builder} {attrs} />
+		<slot {...slotProps} />
 	</div>
 {:else if inTransition && outTransition && $subOpen}
 	<div
@@ -61,7 +65,7 @@
 		on:m-keydown={dispatch}
 		on:m-pointermove={dispatch}
 	>
-		<slot {builder} {attrs} />
+		<slot {...slotProps} />
 	</div>
 {:else if inTransition && $subOpen}
 	<div
@@ -73,7 +77,7 @@
 		on:m-keydown={dispatch}
 		on:m-pointermove={dispatch}
 	>
-		<slot {builder} {attrs} />
+		<slot {...slotProps} />
 	</div>
 {:else if outTransition && $subOpen}
 	<div
@@ -85,7 +89,7 @@
 		on:m-keydown={dispatch}
 		on:m-pointermove={dispatch}
 	>
-		<slot {builder} {attrs} />
+		<slot {...slotProps} />
 	</div>
 {:else if $subOpen}
 	<div
@@ -96,6 +100,6 @@
 		on:m-keydown={dispatch}
 		on:m-pointermove={dispatch}
 	>
-		<slot {builder} {attrs} />
+		<slot {...slotProps} />
 	</div>
 {/if}
diff --git a/src/lib/bits/dropdown-menu/components/DropdownMenuSubTrigger.svelte b/src/lib/bits/dropdown-menu/components/DropdownMenuSubTrigger.svelte
index 20faf4aab..13bbea60a 100644
--- a/src/lib/bits/dropdown-menu/components/DropdownMenuSubTrigger.svelte
+++ b/src/lib/bits/dropdown-menu/components/DropdownMenuSubTrigger.svelte
@@ -17,6 +17,7 @@
 		elements: { subTrigger },
 		ids
 	} = getSubTrigger();
+
 	const dispatch = createDispatcher();
 
 	$: if (id) {
@@ -25,11 +26,14 @@
 
 	$: builder = $subTrigger;
 	$: attrs = { ...getAttrs("sub-trigger"), ...disabledAttrs(disabled) };
+	$: slotProps = {
+		builder,
+		attrs
+	};
 </script>
 
-<!-- svelte-ignore a11y-no-static-element-interactions applied by melt's action/store -->
 {#if asChild}
-	<slot {builder} {attrs} />
+	<slot {...slotProps} />
 {:else}
 	<div
 		use:melt={builder}
@@ -42,6 +46,6 @@
 		on:m-pointerleave={dispatch}
 		on:m-pointermove={dispatch}
 	>
-		<slot {builder} {attrs} />
+		<slot {...slotProps} />
 	</div>
 {/if}
diff --git a/src/lib/bits/dropdown-menu/components/DropdownMenuTrigger.svelte b/src/lib/bits/dropdown-menu/components/DropdownMenuTrigger.svelte
index fe920fda2..662c81191 100644
--- a/src/lib/bits/dropdown-menu/components/DropdownMenuTrigger.svelte
+++ b/src/lib/bits/dropdown-menu/components/DropdownMenuTrigger.svelte
@@ -6,23 +6,30 @@
 
 	type $$Props = TriggerProps;
 	type $$Events = TriggerEvents;
+
 	export let asChild: $$Props["asChild"] = false;
 	export let id: $$Props["id"] = undefined;
+
 	const {
 		elements: { trigger },
 		ids
 	} = getCtx();
+
 	const dispatch = createDispatcher();
+	const attrs = getAttrs("trigger");
 
 	$: if (id) {
 		ids.trigger.set(id);
 	}
 	$: builder = $trigger;
-	const attrs = getAttrs("trigger");
+	$: slotProps = {
+		builder,
+		attrs
+	};
 </script>
 
 {#if asChild}
-	<slot {builder} {attrs} />
+	<slot {...slotProps} />
 {:else}
 	<button
 		use:melt={builder}
@@ -32,6 +39,6 @@
 		on:m-keydown={dispatch}
 		on:m-pointerdown={dispatch}
 	>
-		<slot {builder} {attrs} />
+		<slot {...slotProps} />
 	</button>
 {/if}
diff --git a/src/lib/bits/dropdown-menu/types.ts b/src/lib/bits/dropdown-menu/types.ts
index 472df7da5..c0a786f9c 100644
--- a/src/lib/bits/dropdown-menu/types.ts
+++ b/src/lib/bits/dropdown-menu/types.ts
@@ -1,103 +1,51 @@
-import type {
-	TransitionProps,
-	AsChild,
-	Expand,
-	HTMLDivAttributes,
-	OmitChecked,
-	OmitOpen,
-	OmitValue,
-	OnChangeFn,
-	Transition
-} from "$lib/internal/index.js";
+import type { HTMLDivAttributes, Transition } from "$lib/internal/index.js";
 import type { CustomEventHandler } from "$lib/index.js";
-import type {
-	CreateDropdownMenuProps,
-	CreateDropdownMenuCheckboxItemProps,
-	CreateDropdownMenuRadioGroupProps,
-	DropdownMenuRadioItemProps,
-	CreateDropdownSubmenuProps
-} from "@melt-ui/svelte";
+
 import type { HTMLAnchorAttributes, HTMLButtonAttributes } from "svelte/elements";
+import type * as T from "./_types.js";
+
+type Props = T.Props;
+
+type CheckboxItemProps = T.CheckboxItemProps & HTMLDivAttributes;
+
+type RadioGroupProps = T.RadioGroupProps & HTMLDivAttributes;
 
-type Props = Expand<
-	OmitOpen<CreateDropdownMenuProps> & {
-		open?: boolean;
-		onOpenChange?: OnChangeFn<boolean>;
-	}
->;
-
-type CheckboxItemProps = Expand<
-	OmitChecked<CreateDropdownMenuCheckboxItemProps> & {
-		checked?: boolean | "indeterminate";
-		onCheckedChange?: OnChangeFn<boolean | "indeterminate">;
-	} & AsChild
-> &
-	HTMLDivAttributes;
-
-type RadioGroupProps = Expand<
-	OmitValue<CreateDropdownMenuRadioGroupProps> & {
-		value?: CreateDropdownMenuRadioGroupProps["defaultValue"] & {};
-		onValueChange?: OnChangeFn<CreateDropdownMenuRadioGroupProps["defaultValue"]>;
-	} & AsChild
-> &
-	HTMLDivAttributes;
-
-type RadioItemProps = Expand<DropdownMenuRadioItemProps & AsChild> & HTMLDivAttributes;
+type RadioItemProps = T.RadioItemProps & HTMLDivAttributes;
 
 type ContentProps<
 	T extends Transition = Transition,
 	In extends Transition = Transition,
 	Out extends Transition = Transition
-> = Expand<
-	{
-		sideOffset?: number;
-	} & TransitionProps<T, In, Out> &
-		AsChild
-> &
-	HTMLDivAttributes;
-
-type GroupProps = AsChild & HTMLDivAttributes;
-
-type ItemProps = Expand<
-	{
-		disabled?: boolean;
-		href?: HTMLAnchorAttributes["href"];
-	} & AsChild
-> &
-	HTMLDivAttributes;
-
-type CheckboxItemIndicatorProps = HTMLDivAttributes;
-type LabelProps = AsChild & HTMLDivAttributes;
-type SeparatorProps = AsChild & HTMLDivAttributes;
-type SubProps = Expand<CreateDropdownSubmenuProps>;
+> = T.ContentProps<T, In, Out> & HTMLDivAttributes;
+
+type GroupProps = T.GroupProps & HTMLDivAttributes;
+
+type AnchorElement = HTMLAnchorAttributes & {
+	href?: HTMLAnchorAttributes["href"];
+};
+
+type DivElement = HTMLDivAttributes & {
+	href?: never;
+};
+
+type ItemProps = T.ItemProps & (AnchorElement | DivElement);
+
+type CheckboxItemIndicatorProps = T.CheckboxItemIndicatorProps & HTMLDivAttributes;
+type LabelProps = T.LabelProps & HTMLDivAttributes;
+type SeparatorProps = T.SeparatorProps & HTMLDivAttributes;
+type SubProps = T.SubProps;
 
 type SubContentProps<
 	T extends Transition = Transition,
 	In extends Transition = Transition,
 	Out extends Transition = Transition
-> = Expand<
-	{
-		sideOffset?: number;
-	} & TransitionProps<T, In, Out> &
-		AsChild
-> &
-	HTMLDivAttributes;
-
-type SubTriggerProps = Expand<
-	{
-		disabled?: boolean;
-	} & AsChild
-> &
-	HTMLDivAttributes;
-
-type TriggerProps = AsChild & HTMLButtonAttributes;
-
-type ArrowProps = Expand<
-	{
-		size?: number;
-	} & AsChild
-> &
-	HTMLDivAttributes;
+> = T.SubContentProps<T, In, Out> & HTMLDivAttributes;
+
+type SubTriggerProps = T.SubTriggerProps & HTMLDivAttributes;
+
+type TriggerProps = T.TriggerProps & HTMLButtonAttributes;
+
+type ArrowProps = T.ArrowProps & HTMLDivAttributes;
 
 type ItemEvents<T extends Element = HTMLDivElement> = {
 	click: CustomEventHandler<MouseEvent, T>;
diff --git a/src/lib/internal/types.ts b/src/lib/internal/types.ts
index f3dc073f2..c15667c31 100644
--- a/src/lib/internal/types.ts
+++ b/src/lib/internal/types.ts
@@ -1,6 +1,5 @@
 import type { Action } from "svelte/action";
 import type { HTMLAttributes } from "svelte/elements";
-import type { Writable } from "svelte/store";
 import type { TransitionConfig } from "svelte/transition";
 import type { CreateDispatcher } from ".";
 
@@ -64,29 +63,41 @@ export type TransitionProps<
 	In extends Transition = Transition,
 	Out extends Transition = Transition
 > = Expand<{
+	/**
+	 * A transition function to use during both the in and out transitions.
+	 */
 	transition?: T;
+
+	/**
+	 * The configuration to pass to the `transition` function.
+	 */
 	transitionConfig?: TransitionParams<T>;
+
+	/**
+	 * A transition function to use during the in transition.
+	 *
+	 * If provided, this will override the `transition` function.
+	 */
 	inTransition?: In;
+
+	/**
+	 * The configuration to pass to the `inTransition` function.
+	 */
 	inTransitionConfig?: TransitionParams<In>;
+
+	/**
+	 * A transition function to use during the out transition.
+	 *
+	 * If provided, this will override the `transition` function.
+	 */
 	outTransition?: Out;
+
+	/**
+	 * The configuration to pass to the `outTransition` function.
+	 */
 	outTransitionConfig?: TransitionParams<Out>;
 }>;
 
-export type TransitionTimes = {
-	in?: number;
-	out?: number;
-};
-
-export type TransitionTimesStore = Writable<Expand<TransitionTimes>>;
-
-export type TransitionTimesProp = {
-	transitionTimes: TransitionTimesStore;
-};
-
-export type TOpen = {
-	tOpen: Writable<boolean>;
-};
-
 export type WithDispatcher<T> = T & CreateDispatcher;
 
 export type Side = "left" | "right" | "top" | "bottom";

From 3e8302013da6dd7af91e60efba05c19cb2791c40 Mon Sep 17 00:00:00 2001
From: Hunter Johnston <johnstonhuntera@gmail.com>
Date: Thu, 16 Nov 2023 01:09:17 -0500
Subject: [PATCH 021/217] more

---
 src/lib/bits/accordion/_types.ts              |  50 +++++
 .../accordion/components/Accordion.svelte     |  11 +-
 .../components/AccordionContent.svelte        |  19 +-
 .../components/AccordionHeader.svelte         |  11 +-
 .../accordion/components/AccordionItem.svelte |  11 +-
 .../components/AccordionTrigger.svelte        |  13 +-
 src/lib/bits/accordion/types.ts               |  34 +---
 src/lib/bits/alert-dialog/_types.ts           |   4 +-
 .../components/AlertDialogAction.svelte       |  12 +-
 .../components/AlertDialogCancel.svelte       |  13 +-
 .../components/AlertDialogContent.svelte      |  20 +-
 .../components/AlertDialogDescription.svelte  |  13 +-
 .../components/AlertDialogOverlay.svelte      |  11 +-
 .../components/AlertDialogPortal.svelte       |  12 +-
 .../components/AlertDialogTitle.svelte        |  12 +-
 .../components/AlertDialogTrigger.svelte      |  13 +-
 src/lib/bits/alert-dialog/types.ts            |   6 +-
 src/lib/bits/avatar/components/Avatar.svelte  |   3 +-
 .../avatar/components/AvatarFallback.svelte   |  13 +-
 .../bits/avatar/components/AvatarImage.svelte |  10 +-
 .../bits/checkbox/components/Checkbox.svelte  |  13 +-
 .../components/CheckboxIndicator.svelte       |   1 +
 .../collapsible/components/Collapsible.svelte |   5 +-
 .../components/CollapsibleContent.svelte      |  20 +-
 .../components/CollapsibleTrigger.svelte      |  13 +-
 .../components/DialogDescription.svelte       |  11 +-
 .../dialog/components/DialogOverlay.svelte    |  10 +-
 .../dialog/components/DialogPortal.svelte     |  12 +-
 .../bits/dialog/components/DialogTitle.svelte |  12 +-
 .../dialog/components/DialogTrigger.svelte    |  13 +-
 src/lib/bits/dropdown-menu/_types.ts          |   5 +-
 src/lib/bits/label/_types.ts                  |   5 +
 src/lib/bits/label/components/Label.svelte    |  13 +-
 src/lib/bits/label/types.ts                   |   5 +-
 src/lib/bits/link-preview/_types.ts           |  52 +++++
 .../components/LinkPreview.svelte             |   3 -
 .../components/LinkPreviewArrow.svelte        |   9 +-
 .../components/LinkPreviewContent.svelte      |  23 +--
 .../components/LinkPreviewTrigger.svelte      |  12 +-
 src/lib/bits/link-preview/types.ts            |  30 +--
 src/lib/bits/menubar/_types.ts                | 181 ++++++++++++++++++
 .../bits/menubar/components/Menubar.svelte    |  10 +-
 .../menubar/components/MenubarArrow.svelte    |  10 +-
 .../MenubarCheckboxIndicator.svelte           |  20 +-
 .../components/MenubarCheckboxItem.svelte     |  11 +-
 .../menubar/components/MenubarContent.svelte  |  23 ++-
 .../menubar/components/MenubarGroup.svelte    |  13 +-
 .../menubar/components/MenubarItem.svelte     |  14 +-
 .../menubar/components/MenubarLabel.svelte    |  13 +-
 .../menubar/components/MenubarMenu.svelte     |  22 +--
 .../components/MenubarRadioGroup.svelte       |  13 +-
 .../components/MenubarRadioItem.svelte        |  15 +-
 .../components/MenubarSeparator.svelte        |  12 +-
 .../bits/menubar/components/MenubarSub.svelte |  21 +-
 .../components/MenubarSubContent.svelte       |  20 +-
 .../components/MenubarSubTrigger.svelte       |  10 +-
 .../menubar/components/MenubarTrigger.svelte  |  12 +-
 src/lib/bits/menubar/types.ts                 | 107 +++--------
 src/lib/bits/popover/_types.ts                |  52 +++++
 .../bits/popover/components/Popover.svelte    |   3 -
 .../popover/components/PopoverArrow.svelte    |  11 +-
 .../popover/components/PopoverClose.svelte    |  14 +-
 .../popover/components/PopoverContent.svelte  |  20 +-
 .../popover/components/PopoverTrigger.svelte  |  14 +-
 src/lib/bits/popover/types.ts                 |  33 +---
 src/lib/internal/types.ts                     |   1 +
 66 files changed, 855 insertions(+), 378 deletions(-)
 create mode 100644 src/lib/bits/accordion/_types.ts
 create mode 100644 src/lib/bits/label/_types.ts
 create mode 100644 src/lib/bits/link-preview/_types.ts
 create mode 100644 src/lib/bits/menubar/_types.ts
 create mode 100644 src/lib/bits/popover/_types.ts

diff --git a/src/lib/bits/accordion/_types.ts b/src/lib/bits/accordion/_types.ts
new file mode 100644
index 000000000..c4a5c6c9d
--- /dev/null
+++ b/src/lib/bits/accordion/_types.ts
@@ -0,0 +1,50 @@
+import type {
+	ObjectVariation,
+	Transition,
+	OmitValue,
+	Expand,
+	OnChangeFn,
+	AsChild,
+	TransitionProps
+} from "$lib/internal/index.js";
+import type {
+	CreateAccordionProps,
+	AccordionItemProps,
+	AccordionHeadingProps
+} from "@melt-ui/svelte";
+
+type Props<Multiple extends boolean> = Expand<
+	OmitValue<CreateAccordionProps<Multiple>> & {
+		/**
+		 * The value of the accordion.
+		 * You can bind this to a value to programmatically control the open state.
+		 */
+		value?: CreateAccordionProps<Multiple>["defaultValue"];
+
+		/**
+		 * A callback function called when the value changes.
+		 */
+		onValueChange?: OnChangeFn<CreateAccordionProps<Multiple>["defaultValue"]>;
+	} & AsChild
+>;
+
+type ItemProps = Expand<ObjectVariation<AccordionItemProps> & AsChild>;
+
+type HeaderProps = Expand<
+	{
+		/**
+		 * The heading level of the accordion header.
+		 */
+		level?: ObjectVariation<AccordionHeadingProps>["level"];
+	} & AsChild
+>;
+
+type TriggerProps = AsChild;
+
+type ContentProps<
+	T extends Transition = Transition,
+	In extends Transition = Transition,
+	Out extends Transition = Transition
+> = Expand<TransitionProps<T, In, Out> & AsChild>;
+
+export type { Props, ItemProps, HeaderProps, TriggerProps, ContentProps };
diff --git a/src/lib/bits/accordion/components/Accordion.svelte b/src/lib/bits/accordion/components/Accordion.svelte
index 9d56c0e43..7f70402c4 100644
--- a/src/lib/bits/accordion/components/Accordion.svelte
+++ b/src/lib/bits/accordion/components/Accordion.svelte
@@ -30,6 +30,8 @@
 		}) as any
 	});
 
+	const attrs = getAttrs("root");
+
 	// Svelte types get weird here saying set expects something that is both string and string[].
 	// eslint-disable-next-line @typescript-eslint/no-explicit-any
 	$: localValue.set(value as any);
@@ -38,13 +40,16 @@
 	$: updateOption("disabled", disabled);
 
 	$: builder = $root;
-	const attrs = getAttrs("root");
+	$: slotProps = {
+		builder,
+		attrs
+	};
 </script>
 
 {#if asChild}
-	<slot {builder} {attrs} />
+	<slot {...slotProps} />
 {:else}
 	<div use:melt={builder} {...$$restProps} {...attrs}>
-		<slot {builder} {attrs} />
+		<slot {...slotProps} />
 	</div>
 {/if}
diff --git a/src/lib/bits/accordion/components/AccordionContent.svelte b/src/lib/bits/accordion/components/AccordionContent.svelte
index b54ecd674..2324c89ac 100644
--- a/src/lib/bits/accordion/components/AccordionContent.svelte
+++ b/src/lib/bits/accordion/components/AccordionContent.svelte
@@ -12,13 +12,10 @@
 
 	export let transition: $$Props["transition"] = undefined;
 	export let transitionConfig: $$Props["transitionConfig"] = undefined;
-
 	export let inTransition: $$Props["inTransition"] = undefined;
 	export let inTransitionConfig: ContentProps<T>["inTransitionConfig"] = undefined;
-
 	export let outTransition: $$Props["outTransition"] = undefined;
 	export let outTransitionConfig: $$Props["outTransitionConfig"] = undefined;
-
 	export let asChild: $$Props["asChild"] = false;
 
 	const { content, isSelected, props } = getContent();
@@ -26,13 +23,17 @@
 	const attrs = getAttrs("content");
 
 	$: builder = $content(props);
+	$: slotProps = {
+		builder,
+		attrs
+	};
 </script>
 
 {#if asChild && $isSelected(props)}
-	<slot {builder} {attrs} />
+	<slot {...slotProps} />
 {:else if transition && $isSelected(props)}
 	<div transition:transition={transitionConfig} use:melt={builder} {...$$restProps} {...attrs}>
-		<slot {builder} {attrs} />
+		<slot {...slotProps} />
 	</div>
 {:else if inTransition && outTransition && $isSelected(props)}
 	<div
@@ -42,18 +43,18 @@
 		{...$$restProps}
 		{...attrs}
 	>
-		<slot {builder} {attrs} />
+		<slot {...slotProps} />
 	</div>
 {:else if inTransition && $isSelected(props)}
 	<div in:inTransition={inTransitionConfig} use:melt={builder} {...$$restProps} {...attrs}>
-		<slot {builder} {attrs} />
+		<slot {...slotProps} />
 	</div>
 {:else if outTransition && $isSelected(props)}
 	<div out:outTransition={outTransitionConfig} use:melt={builder} {...$$restProps} {...attrs}>
-		<slot {builder} {attrs} />
+		<slot {...slotProps} />
 	</div>
 {:else if $isSelected(props)}
 	<div use:melt={builder} {...$$restProps} {...attrs}>
-		<slot {builder} {attrs} />
+		<slot {...slotProps} />
 	</div>
 {/if}
diff --git a/src/lib/bits/accordion/components/AccordionHeader.svelte b/src/lib/bits/accordion/components/AccordionHeader.svelte
index b753af2a8..e7e49b059 100644
--- a/src/lib/bits/accordion/components/AccordionHeader.svelte
+++ b/src/lib/bits/accordion/components/AccordionHeader.svelte
@@ -4,20 +4,27 @@
 	import type { HeaderProps } from "../types.js";
 
 	type $$Props = HeaderProps;
+
 	export let level = 3;
 	export let asChild: $$Props["asChild"] = false;
+
 	const {
 		elements: { heading: header }
 	} = getCtx();
+
 	const attrs = getAttrs("header");
 
 	$: builder = $header(level);
+	$: slotProps = {
+		builder,
+		attrs
+	};
 </script>
 
 {#if asChild}
-	<slot {builder} {attrs} />
+	<slot {...slotProps} />
 {:else}
 	<div use:melt={builder} {...$$restProps} {...attrs}>
-		<slot {builder} {attrs} />
+		<slot {...slotProps} />
 	</div>
 {/if}
diff --git a/src/lib/bits/accordion/components/AccordionItem.svelte b/src/lib/bits/accordion/components/AccordionItem.svelte
index 9effc373f..506b7708b 100644
--- a/src/lib/bits/accordion/components/AccordionItem.svelte
+++ b/src/lib/bits/accordion/components/AccordionItem.svelte
@@ -7,16 +7,21 @@
 	export let value: $$Props["value"];
 	export let disabled: $$Props["disabled"] = undefined;
 	export let asChild: $$Props["asChild"] = false;
+
 	const { item, props } = setItem({ value, disabled });
+	const attrs = getAttrs("item");
 
 	$: builder = $item(props);
-	const attrs = getAttrs("item");
+	$: slotProps = {
+		builder,
+		attrs
+	};
 </script>
 
 {#if asChild}
-	<slot {builder} {attrs} />
+	<slot {...slotProps} />
 {:else}
 	<div use:melt={builder} {...$$restProps} {...attrs}>
-		<slot {builder} {attrs} />
+		<slot {...slotProps} />
 	</div>
 {/if}
diff --git a/src/lib/bits/accordion/components/AccordionTrigger.svelte b/src/lib/bits/accordion/components/AccordionTrigger.svelte
index 2a823640d..2809edbb5 100644
--- a/src/lib/bits/accordion/components/AccordionTrigger.svelte
+++ b/src/lib/bits/accordion/components/AccordionTrigger.svelte
@@ -3,20 +3,25 @@
 	import { getTrigger, getAttrs } from "../ctx.js";
 	import type { TriggerEvents, TriggerProps } from "../types.js";
 	import { createDispatcher } from "$lib/internal/events.js";
+
 	type $$Props = TriggerProps;
 	type $$Events = TriggerEvents;
+
 	export let asChild: TriggerProps["asChild"] = false;
 
 	const { trigger, props } = getTrigger();
-
 	const dispatch = createDispatcher();
+	const attrs = getAttrs("trigger");
 
 	$: builder = $trigger(props);
-	const attrs = getAttrs("trigger");
+	$: slotProps = {
+		builder,
+		attrs
+	};
 </script>
 
 {#if asChild}
-	<slot {builder} {attrs} />
+	<slot {...slotProps} />
 {:else}
 	<button
 		use:melt={builder}
@@ -26,6 +31,6 @@
 		on:m-keydown={dispatch}
 		on:m-click={dispatch}
 	>
-		<slot {builder} {attrs} />
+		<slot {...slotProps} />
 	</button>
 {/if}
diff --git a/src/lib/bits/accordion/types.ts b/src/lib/bits/accordion/types.ts
index 301fbd1df..ddc48b4f1 100644
--- a/src/lib/bits/accordion/types.ts
+++ b/src/lib/bits/accordion/types.ts
@@ -1,45 +1,25 @@
-import type {
-	HTMLDivAttributes,
-	ObjectVariation,
-	Transition,
-	OmitValue,
-	Expand,
-	OnChangeFn,
-	AsChild,
-	TransitionProps
-} from "$lib/internal/index.js";
+import type { HTMLDivAttributes, Transition } from "$lib/internal/index.js";
 import type { CustomEventHandler } from "$lib/index.js";
 import type {
-	CreateAccordionProps,
 	AccordionItemProps as _ItemProps,
 	AccordionHeadingProps as _HeadingProps
 } from "@melt-ui/svelte";
 import type { HTMLButtonAttributes } from "svelte/elements";
+import type * as T from "./_types.js";
 
-type Props<Multiple extends boolean> = Expand<
-	OmitValue<CreateAccordionProps<Multiple>> & {
-		value?: CreateAccordionProps<Multiple>["defaultValue"];
-		onValueChange?: OnChangeFn<CreateAccordionProps<Multiple>["defaultValue"]>;
-	} & AsChild
-> &
-	HTMLDivAttributes;
+type Props<Multiple extends boolean> = T.Props<Multiple> & HTMLDivAttributes;
 
-type ItemProps = Expand<ObjectVariation<_ItemProps> & AsChild> & HTMLDivAttributes;
+type ItemProps = T.ItemProps & HTMLDivAttributes;
 
-type HeaderProps = Expand<
-	{
-		level?: ObjectVariation<_HeadingProps>["level"];
-	} & AsChild
-> &
-	HTMLDivAttributes;
+type HeaderProps = T.HeaderProps & HTMLDivAttributes;
 
-type TriggerProps = AsChild & HTMLButtonAttributes;
+type TriggerProps = T.TriggerProps & HTMLButtonAttributes;
 
 type ContentProps<
 	T extends Transition = Transition,
 	In extends Transition = Transition,
 	Out extends Transition = Transition
-> = Expand<TransitionProps<T, In, Out> & AsChild> & HTMLDivAttributes;
+> = T.ContentProps<T, In, Out> & HTMLDivAttributes;
 
 type TriggerEvents = {
 	click: CustomEventHandler<MouseEvent, HTMLButtonElement>;
diff --git a/src/lib/bits/alert-dialog/_types.ts b/src/lib/bits/alert-dialog/_types.ts
index 89756908b..4dec1e476 100644
--- a/src/lib/bits/alert-dialog/_types.ts
+++ b/src/lib/bits/alert-dialog/_types.ts
@@ -44,8 +44,6 @@ type ContentProps<
 
 type DescriptionProps = AsChild;
 
-type OverlayProps = ContentProps;
-
 type PortalProps = AsChild;
 
 type TitleProps = Expand<
@@ -61,7 +59,7 @@ export type {
 	CancelProps,
 	ContentProps,
 	DescriptionProps,
-	OverlayProps,
+	ContentProps as OverlayProps,
 	PortalProps,
 	TitleProps
 };
diff --git a/src/lib/bits/alert-dialog/components/AlertDialogAction.svelte b/src/lib/bits/alert-dialog/components/AlertDialogAction.svelte
index e29cf7111..d9752b33b 100644
--- a/src/lib/bits/alert-dialog/components/AlertDialogAction.svelte
+++ b/src/lib/bits/alert-dialog/components/AlertDialogAction.svelte
@@ -6,19 +6,25 @@
 
 	type $$Props = ActionProps;
 	type $$Events = ActionEvents;
+
 	export let asChild: $$Props["asChild"] = false;
+
 	const {
 		elements: { close }
 	} = getCtx();
 
 	const dispatch = createDispatcher();
+	const attrs = getAttrs("action");
 
 	$: builder = $close;
-	const attrs = getAttrs("action");
+	$: slotProps = {
+		builder,
+		attrs
+	};
 </script>
 
 {#if asChild}
-	<slot {builder} {attrs} />
+	<slot {...slotProps} />
 {:else}
 	<button
 		use:melt={builder}
@@ -28,6 +34,6 @@
 		on:m-click={dispatch}
 		on:m-keydown={dispatch}
 	>
-		<slot {builder} {attrs} />
+		<slot {...slotProps} />
 	</button>
 {/if}
diff --git a/src/lib/bits/alert-dialog/components/AlertDialogCancel.svelte b/src/lib/bits/alert-dialog/components/AlertDialogCancel.svelte
index afcad3542..241594ec0 100644
--- a/src/lib/bits/alert-dialog/components/AlertDialogCancel.svelte
+++ b/src/lib/bits/alert-dialog/components/AlertDialogCancel.svelte
@@ -6,18 +6,25 @@
 
 	type $$Props = CancelProps;
 	type $$Events = CancelEvents;
+
 	export let asChild: $$Props["asChild"] = false;
+
 	const {
 		elements: { close }
 	} = getCtx();
 
 	const dispatch = createDispatcher();
-	$: builder = $close;
 	const attrs = getAttrs("cancel");
+
+	$: builder = $close;
+	$: slotProps = {
+		builder,
+		attrs
+	};
 </script>
 
 {#if asChild}
-	<slot {builder} {attrs} />
+	<slot {...slotProps} />
 {:else}
 	<button
 		use:melt={builder}
@@ -27,6 +34,6 @@
 		on:m-click={dispatch}
 		on:m-keydown={dispatch}
 	>
-		<slot {builder} {attrs} />
+		<slot {...slotProps} />
 	</button>
 {/if}
diff --git a/src/lib/bits/alert-dialog/components/AlertDialogContent.svelte b/src/lib/bits/alert-dialog/components/AlertDialogContent.svelte
index 310ad9f70..2093fbcb6 100644
--- a/src/lib/bits/alert-dialog/components/AlertDialogContent.svelte
+++ b/src/lib/bits/alert-dialog/components/AlertDialogContent.svelte
@@ -25,19 +25,23 @@
 		ids
 	} = getCtx();
 
+	const attrs = getAttrs("content");
+
 	$: if (id) {
 		ids.content.set(id);
 	}
-
 	$: builder = $content;
-	const attrs = getAttrs("content");
+	$: slotProps = {
+		builder,
+		attrs
+	};
 </script>
 
 {#if asChild && $open}
-	<slot {builder} {attrs} />
+	<slot {...slotProps} />
 {:else if transition && $open}
 	<div transition:transition={transitionConfig} use:melt={builder} {...$$restProps} {...attrs}>
-		<slot {builder} {attrs} />
+		<slot {...slotProps} />
 	</div>
 {:else if inTransition && outTransition && $open}
 	<div
@@ -47,18 +51,18 @@
 		{...$$restProps}
 		{...attrs}
 	>
-		<slot {builder} {attrs} />
+		<slot {...slotProps} />
 	</div>
 {:else if inTransition && $open}
 	<div in:inTransition={inTransitionConfig} use:melt={builder} {...$$restProps} {...attrs}>
-		<slot {builder} {attrs} />
+		<slot {...slotProps} />
 	</div>
 {:else if outTransition && $open}
 	<div out:outTransition={outTransitionConfig} use:melt={builder} {...$$restProps} {...attrs}>
-		<slot {builder} {attrs} />
+		<slot {...slotProps} />
 	</div>
 {:else if $open}
 	<div use:melt={builder} {...$$restProps} {...attrs}>
-		<slot {builder} {attrs} />
+		<slot {...slotProps} />
 	</div>
 {/if}
diff --git a/src/lib/bits/alert-dialog/components/AlertDialogDescription.svelte b/src/lib/bits/alert-dialog/components/AlertDialogDescription.svelte
index 8d1e2b7f4..e0570d2ee 100644
--- a/src/lib/bits/alert-dialog/components/AlertDialogDescription.svelte
+++ b/src/lib/bits/alert-dialog/components/AlertDialogDescription.svelte
@@ -4,6 +4,7 @@
 	import type { DescriptionProps } from "../types.js";
 
 	type $$Props = DescriptionProps;
+
 	export let asChild: $$Props["asChild"] = false;
 	export let id: $$Props["id"] = undefined;
 
@@ -12,18 +13,22 @@
 		ids
 	} = getCtx();
 
+	const attrs = getAttrs("description");
+
 	$: if (id) {
 		ids.description.set(id);
 	}
-
 	$: builder = $description;
-	const attrs = getAttrs("description");
+	$: slotProps = {
+		builder,
+		attrs
+	};
 </script>
 
 {#if asChild}
-	<slot {builder} {attrs} />
+	<slot {...slotProps} />
 {:else}
 	<div use:melt={builder} {...$$restProps} {...attrs}>
-		<slot {builder} {attrs} />
+		<slot {...slotProps} />
 	</div>
 {/if}
diff --git a/src/lib/bits/alert-dialog/components/AlertDialogOverlay.svelte b/src/lib/bits/alert-dialog/components/AlertDialogOverlay.svelte
index 3a04cfb17..e7ba5193d 100644
--- a/src/lib/bits/alert-dialog/components/AlertDialogOverlay.svelte
+++ b/src/lib/bits/alert-dialog/components/AlertDialogOverlay.svelte
@@ -16,19 +16,24 @@
 	export let inTransitionConfig: $$Props["inTransitionConfig"] = undefined;
 	export let outTransition: $$Props["outTransition"] = undefined;
 	export let outTransitionConfig: $$Props["outTransitionConfig"] = undefined;
-
 	export let asChild: $$Props["asChild"] = false;
+
 	const {
 		elements: { overlay },
 		states: { open }
 	} = getCtx();
 
-	$: builder = $overlay;
 	const attrs = getAttrs("overlay");
+
+	$: builder = $overlay;
+	$: slotProps = {
+		builder,
+		attrs
+	};
 </script>
 
 {#if asChild && $open}
-	<slot {builder} {attrs} />
+	<slot {...slotProps} />
 {:else if transition && $open}
 	<div transition:transition={transitionConfig} use:melt={builder} {...$$restProps} {...attrs} />
 {:else if inTransition && outTransition && $open}
diff --git a/src/lib/bits/alert-dialog/components/AlertDialogPortal.svelte b/src/lib/bits/alert-dialog/components/AlertDialogPortal.svelte
index b71ae17a3..b99b3e54a 100644
--- a/src/lib/bits/alert-dialog/components/AlertDialogPortal.svelte
+++ b/src/lib/bits/alert-dialog/components/AlertDialogPortal.svelte
@@ -4,19 +4,25 @@
 	import type { PortalProps } from "../types.js";
 
 	type $$Props = PortalProps;
+
 	export let asChild: $$Props["asChild"] = false;
+
 	const {
 		elements: { portalled }
 	} = getCtx();
+	const attrs = getAttrs("portal");
 
 	$: builder = $portalled;
-	const attrs = getAttrs("portal");
+	$: slotProps = {
+		builder,
+		attrs
+	};
 </script>
 
 {#if asChild}
-	<slot {builder} {attrs} />
+	<slot {...slotProps} />
 {:else}
 	<div use:melt={builder} {...$$restProps} {...attrs}>
-		<slot {builder} {attrs} />
+		<slot {...slotProps} />
 	</div>
 {/if}
diff --git a/src/lib/bits/alert-dialog/components/AlertDialogTitle.svelte b/src/lib/bits/alert-dialog/components/AlertDialogTitle.svelte
index 126bf04c8..73e494952 100644
--- a/src/lib/bits/alert-dialog/components/AlertDialogTitle.svelte
+++ b/src/lib/bits/alert-dialog/components/AlertDialogTitle.svelte
@@ -4,6 +4,7 @@
 	import type { TitleProps } from "../types.js";
 
 	type $$Props = TitleProps;
+
 	export let level: $$Props["level"] = "h2";
 	export let asChild: $$Props["asChild"] = false;
 	export let id: $$Props["id"] = undefined;
@@ -13,18 +14,23 @@
 		ids
 	} = getCtx();
 
+	const attrs = getAttrs("title");
+
 	$: if (id) {
 		ids.title.set(id);
 	}
 
 	$: builder = $title;
-	const attrs = getAttrs("title");
+	$: slotProps = {
+		builder,
+		attrs
+	};
 </script>
 
 {#if asChild}
-	<slot {builder} {attrs} />
+	<slot {...slotProps} />
 {:else}
 	<svelte:element this={level} use:melt={builder} {...$$restProps} {...attrs}>
-		<slot {builder} {attrs} />
+		<slot {...slotProps} />
 	</svelte:element>
 {/if}
diff --git a/src/lib/bits/alert-dialog/components/AlertDialogTrigger.svelte b/src/lib/bits/alert-dialog/components/AlertDialogTrigger.svelte
index 07ef7385c..6f3dcd2fa 100644
--- a/src/lib/bits/alert-dialog/components/AlertDialogTrigger.svelte
+++ b/src/lib/bits/alert-dialog/components/AlertDialogTrigger.svelte
@@ -6,18 +6,25 @@
 
 	type $$Props = TriggerProps;
 	type $$Events = TriggerEvents;
+
 	export let asChild: $$Props["asChild"] = false;
+
 	const {
 		elements: { trigger }
 	} = getCtx();
+
 	const dispatch = createDispatcher();
+	const attrs = getAttrs("trigger");
 
 	$: builder = $trigger;
-	const attrs = getAttrs("trigger");
+	$: slotProps = {
+		builder,
+		attrs
+	};
 </script>
 
 {#if asChild}
-	<slot {builder} {attrs} />
+	<slot {...slotProps} />
 {:else}
 	<button
 		use:melt={builder}
@@ -27,6 +34,6 @@
 		{...$$restProps}
 		{...attrs}
 	>
-		<slot {builder} {attrs} />
+		<slot {...slotProps} />
 	</button>
 {/if}
diff --git a/src/lib/bits/alert-dialog/types.ts b/src/lib/bits/alert-dialog/types.ts
index 81106b172..8921693c9 100644
--- a/src/lib/bits/alert-dialog/types.ts
+++ b/src/lib/bits/alert-dialog/types.ts
@@ -19,8 +19,6 @@ type ContentProps<
 
 type DescriptionProps = T.DescriptionProps & HTMLDivAttributes;
 
-type OverlayProps = T.OverlayProps & HTMLDivAttributes;
-
 type PortalProps = T.PortalProps & HTMLDivAttributes;
 
 type TitleProps = T.TitleProps & HTMLHeadingAttributes;
@@ -40,7 +38,7 @@ export type {
 	CancelProps,
 	ContentProps,
 	DescriptionProps,
-	OverlayProps,
+	ContentProps as OverlayProps,
 	PortalProps,
 	TitleProps,
 	//
@@ -50,7 +48,7 @@ export type {
 	CancelProps as AlertDialogCancelProps,
 	ContentProps as AlertDialogContentProps,
 	DescriptionProps as AlertDialogDescriptionProps,
-	OverlayProps as AlertDialogOverlayProps,
+	ContentProps as AlertDialogOverlayProps,
 	PortalProps as AlertDialogPortalProps,
 	TitleProps as AlertDialogTitleProps,
 	//
diff --git a/src/lib/bits/avatar/components/Avatar.svelte b/src/lib/bits/avatar/components/Avatar.svelte
index 07b9be1dc..3cd12f162 100644
--- a/src/lib/bits/avatar/components/Avatar.svelte
+++ b/src/lib/bits/avatar/components/Avatar.svelte
@@ -20,11 +20,10 @@
 			return next;
 		}
 	});
+	const attrs = getAttrs("root");
 
 	$: loadingStatus !== undefined && localLoadingStatus.set(loadingStatus);
 	$: updateOption("delayMs", delayMs);
-
-	const attrs = getAttrs("root");
 </script>
 
 {#if asChild}
diff --git a/src/lib/bits/avatar/components/AvatarFallback.svelte b/src/lib/bits/avatar/components/AvatarFallback.svelte
index 595dff354..bee375a04 100644
--- a/src/lib/bits/avatar/components/AvatarFallback.svelte
+++ b/src/lib/bits/avatar/components/AvatarFallback.svelte
@@ -4,18 +4,25 @@
 	import type { FallbackProps } from "../types.js";
 
 	type $$Props = FallbackProps;
+
 	export let asChild: $$Props["asChild"] = false;
+
 	const {
 		elements: { fallback }
 	} = getCtx();
-	$: builder = $fallback;
 	const attrs = getAttrs("fallback");
+
+	$: builder = $fallback;
+	$: slotProps = {
+		builder,
+		attrs
+	};
 </script>
 
 {#if asChild}
-	<slot {builder} {attrs} />
+	<slot {...slotProps} />
 {:else}
 	<span use:melt={builder} {...$$restProps} {...attrs}>
-		<slot {builder} {attrs} />
+		<slot {...slotProps} />
 	</span>
 {/if}
diff --git a/src/lib/bits/avatar/components/AvatarImage.svelte b/src/lib/bits/avatar/components/AvatarImage.svelte
index 5e1f9b6c7..23729ffb0 100644
--- a/src/lib/bits/avatar/components/AvatarImage.svelte
+++ b/src/lib/bits/avatar/components/AvatarImage.svelte
@@ -4,17 +4,23 @@
 	import type { ImageProps } from "../types.js";
 
 	type $$Props = ImageProps;
+
 	export let src: $$Props["src"] = undefined;
 	export let alt: $$Props["alt"] = undefined;
 	export let asChild: $$Props["asChild"] = false;
 
+	const attrs = getAttrs("image");
+
 	$: image = getImage(src).elements.image;
 	$: builder = $image;
-	const attrs = getAttrs("image");
+	$: slotProps = {
+		builder,
+		attrs
+	};
 </script>
 
 {#if asChild}
-	<slot {builder} {attrs} />
+	<slot {...slotProps} />
 {:else}
 	<img use:melt={builder} {alt} {...$$restProps} {...attrs} />
 {/if}
diff --git a/src/lib/bits/checkbox/components/Checkbox.svelte b/src/lib/bits/checkbox/components/Checkbox.svelte
index e652ec9f4..cbcfed20d 100644
--- a/src/lib/bits/checkbox/components/Checkbox.svelte
+++ b/src/lib/bits/checkbox/components/Checkbox.svelte
@@ -34,6 +34,7 @@
 	});
 
 	const dispatch = createDispatcher();
+	const attrs = getAttrs("root");
 
 	$: checked !== undefined && localChecked.set(checked);
 
@@ -43,11 +44,17 @@
 	$: updateOption("value", value);
 
 	$: builder = $root;
-	const attrs = getAttrs("root");
+	$: slotProps = {
+		builder,
+		attrs: {
+			...attrs,
+			disabled: disabled ? true : undefined
+		}
+	};
 </script>
 
 {#if asChild}
-	<slot {builder} {attrs} />
+	<slot {...slotProps} />
 {:else}
 	<button
 		use:melt={builder}
@@ -58,6 +65,6 @@
 		on:m-keydown={dispatch}
 		disabled={disabled ? true : undefined}
 	>
-		<slot {builder} {attrs} />
+		<slot {...slotProps} />
 	</button>
 {/if}
diff --git a/src/lib/bits/checkbox/components/CheckboxIndicator.svelte b/src/lib/bits/checkbox/components/CheckboxIndicator.svelte
index bc07d80f2..4fe15bc7b 100644
--- a/src/lib/bits/checkbox/components/CheckboxIndicator.svelte
+++ b/src/lib/bits/checkbox/components/CheckboxIndicator.svelte
@@ -3,6 +3,7 @@
 	import type { IndicatorProps } from "../types.js";
 
 	type $$Props = IndicatorProps;
+
 	export let asChild: $$Props["asChild"] = false;
 
 	const {
diff --git a/src/lib/bits/collapsible/components/Collapsible.svelte b/src/lib/bits/collapsible/components/Collapsible.svelte
index 34168728a..ac9f9b6fe 100644
--- a/src/lib/bits/collapsible/components/Collapsible.svelte
+++ b/src/lib/bits/collapsible/components/Collapsible.svelte
@@ -25,14 +25,11 @@
 			return next;
 		}
 	});
+	const attrs = getAttrs("root");
 
 	$: open !== undefined && localOpen.set(open);
-
 	$: updateOption("disabled", disabled);
-
 	$: builder = $root;
-	const attrs = getAttrs("root");
-
 	$: slotProps = {
 		builder,
 		attrs
diff --git a/src/lib/bits/collapsible/components/CollapsibleContent.svelte b/src/lib/bits/collapsible/components/CollapsibleContent.svelte
index 1e30a6e3b..06b4e393f 100644
--- a/src/lib/bits/collapsible/components/CollapsibleContent.svelte
+++ b/src/lib/bits/collapsible/components/CollapsibleContent.svelte
@@ -21,15 +21,21 @@
 		elements: { content },
 		states: { open }
 	} = getCtx();
-	$: builder = $content;
+
 	const attrs = getAttrs("content");
+
+	$: builder = $content;
+	$: slotProps = {
+		builder,
+		attrs
+	};
 </script>
 
 {#if asChild && $open}
-	<slot {builder} {attrs} />
+	<slot {...slotProps} />
 {:else if transition && $open}
 	<div transition:transition={transitionConfig} use:melt={builder} {...$$restProps} {...attrs}>
-		<slot {builder} {attrs} />
+		<slot {...slotProps} />
 	</div>
 {:else if inTransition && outTransition && $open}
 	<div
@@ -39,18 +45,18 @@
 		{...$$restProps}
 		{...attrs}
 	>
-		<slot {builder} {attrs} />
+		<slot {...slotProps} />
 	</div>
 {:else if inTransition && $open}
 	<div in:inTransition={inTransitionConfig} use:melt={builder} {...$$restProps} {...attrs}>
-		<slot {builder} {attrs} />
+		<slot {...slotProps} />
 	</div>
 {:else if outTransition && $open}
 	<div out:outTransition={outTransitionConfig} use:melt={builder} {...$$restProps} {...attrs}>
-		<slot {builder} {attrs} />
+		<slot {...slotProps} />
 	</div>
 {:else if $open}
 	<div use:melt={builder} {...$$restProps} {...attrs}>
-		<slot {builder} {attrs} />
+		<slot {...slotProps} />
 	</div>
 {/if}
diff --git a/src/lib/bits/collapsible/components/CollapsibleTrigger.svelte b/src/lib/bits/collapsible/components/CollapsibleTrigger.svelte
index e2b75d0c7..11dc07f0e 100644
--- a/src/lib/bits/collapsible/components/CollapsibleTrigger.svelte
+++ b/src/lib/bits/collapsible/components/CollapsibleTrigger.svelte
@@ -8,18 +8,25 @@
 	type $$Events = TriggerEvents;
 
 	export let asChild: $$Props["asChild"] = false;
+
 	const {
 		elements: { trigger }
 	} = getCtx();
+
 	const dispatch = createDispatcher();
-	$: builder = $trigger;
 	const attrs = getAttrs("trigger");
+
+	$: builder = $trigger;
+	$: slotProps = {
+		builder,
+		attrs
+	};
 </script>
 
 {#if asChild}
-	<slot {builder} {attrs} />
+	<slot {...slotProps} />
 {:else}
 	<button use:melt={builder} type="button" {...$$restProps} {...attrs} on:m-click={dispatch}>
-		<slot {builder} {attrs} />
+		<slot {...slotProps} />
 	</button>
 {/if}
diff --git a/src/lib/bits/dialog/components/DialogDescription.svelte b/src/lib/bits/dialog/components/DialogDescription.svelte
index e514090d3..4c8197047 100644
--- a/src/lib/bits/dialog/components/DialogDescription.svelte
+++ b/src/lib/bits/dialog/components/DialogDescription.svelte
@@ -4,6 +4,7 @@
 	import type { DescriptionProps } from "../types.js";
 
 	type $$Props = DescriptionProps;
+
 	export let asChild: $$Props["asChild"] = false;
 	export let id: $$Props["id"] = undefined;
 
@@ -11,18 +12,22 @@
 		elements: { description },
 		ids
 	} = getCtx();
+	const attrs = getAttrs("description");
 
 	$: if (id) {
 		ids.description.set(id);
 	}
 	$: builder = $description;
-	const attrs = getAttrs("description");
+	$: slotProps = {
+		builder,
+		attrs
+	};
 </script>
 
 {#if asChild}
-	<slot {builder} {attrs} />
+	<slot {...slotProps} />
 {:else}
 	<div use:melt={builder} {...$$restProps} {...attrs}>
-		<slot {builder} {attrs} />
+		<slot {...slotProps} />
 	</div>
 {/if}
diff --git a/src/lib/bits/dialog/components/DialogOverlay.svelte b/src/lib/bits/dialog/components/DialogOverlay.svelte
index 6ba25c89a..d07afa809 100644
--- a/src/lib/bits/dialog/components/DialogOverlay.svelte
+++ b/src/lib/bits/dialog/components/DialogOverlay.svelte
@@ -16,19 +16,23 @@
 	export let inTransitionConfig: $$Props["inTransitionConfig"] = undefined;
 	export let outTransition: $$Props["outTransition"] = undefined;
 	export let outTransitionConfig: $$Props["outTransitionConfig"] = undefined;
-
 	export let asChild: $$Props["asChild"] = false;
+
 	const {
 		elements: { overlay },
 		states: { open }
 	} = getCtx();
+	const attrs = getAttrs("overlay");
 
 	$: builder = $overlay;
-	const attrs = getAttrs("overlay");
+	$: slotProps = {
+		builder,
+		attrs
+	};
 </script>
 
 {#if asChild && $open}
-	<slot {builder} {attrs} />
+	<slot {...slotProps} />
 {:else if transition && $open}
 	<div transition:transition={transitionConfig} use:melt={builder} {...$$restProps} {...attrs} />
 {:else if inTransition && outTransition && $open}
diff --git a/src/lib/bits/dialog/components/DialogPortal.svelte b/src/lib/bits/dialog/components/DialogPortal.svelte
index b71ae17a3..b99b3e54a 100644
--- a/src/lib/bits/dialog/components/DialogPortal.svelte
+++ b/src/lib/bits/dialog/components/DialogPortal.svelte
@@ -4,19 +4,25 @@
 	import type { PortalProps } from "../types.js";
 
 	type $$Props = PortalProps;
+
 	export let asChild: $$Props["asChild"] = false;
+
 	const {
 		elements: { portalled }
 	} = getCtx();
+	const attrs = getAttrs("portal");
 
 	$: builder = $portalled;
-	const attrs = getAttrs("portal");
+	$: slotProps = {
+		builder,
+		attrs
+	};
 </script>
 
 {#if asChild}
-	<slot {builder} {attrs} />
+	<slot {...slotProps} />
 {:else}
 	<div use:melt={builder} {...$$restProps} {...attrs}>
-		<slot {builder} {attrs} />
+		<slot {...slotProps} />
 	</div>
 {/if}
diff --git a/src/lib/bits/dialog/components/DialogTitle.svelte b/src/lib/bits/dialog/components/DialogTitle.svelte
index a5f8fce3d..4b50b17bf 100644
--- a/src/lib/bits/dialog/components/DialogTitle.svelte
+++ b/src/lib/bits/dialog/components/DialogTitle.svelte
@@ -4,25 +4,31 @@
 	import type { TitleProps } from "../types.js";
 
 	type $$Props = TitleProps;
+
 	export let level: $$Props["level"] = "h2";
 	export let asChild: $$Props["asChild"] = false;
 	export let id: $$Props["id"] = undefined;
+
 	const {
 		elements: { title },
 		ids
 	} = getCtx();
+	const attrs = getAttrs("title");
 
 	$: if (id) {
 		ids.title.set(id);
 	}
 	$: builder = $title;
-	const attrs = getAttrs("title");
+	$: slotProps = {
+		builder,
+		attrs
+	};
 </script>
 
 {#if asChild}
-	<slot {builder} {attrs} />
+	<slot {...slotProps} />
 {:else}
 	<svelte:element this={level} use:melt={builder} {...$$restProps} {...attrs}>
-		<slot {builder} {attrs} />
+		<slot {...slotProps} />
 	</svelte:element>
 {/if}
diff --git a/src/lib/bits/dialog/components/DialogTrigger.svelte b/src/lib/bits/dialog/components/DialogTrigger.svelte
index edb0e7f0a..465caf5fe 100644
--- a/src/lib/bits/dialog/components/DialogTrigger.svelte
+++ b/src/lib/bits/dialog/components/DialogTrigger.svelte
@@ -6,18 +6,25 @@
 
 	type $$Props = TriggerProps;
 	type $$Events = TriggerEvents;
+
 	export let asChild: $$Props["asChild"] = false;
+
 	const {
 		elements: { trigger }
 	} = getCtx();
+
 	const dispatch = createDispatcher();
+	const attrs = getAttrs("trigger");
 
 	$: builder = $trigger;
-	const attrs = getAttrs("trigger");
+	$: slotProps = {
+		builder,
+		attrs
+	};
 </script>
 
 {#if asChild}
-	<slot {builder} {attrs} />
+	<slot {...slotProps} />
 {:else}
 	<button
 		use:melt={builder}
@@ -27,6 +34,6 @@
 		on:m-click={dispatch}
 		on:m-keydown={dispatch}
 	>
-		<slot {builder} {attrs} />
+		<slot {...slotProps} />
 	</button>
 {/if}
diff --git a/src/lib/bits/dropdown-menu/_types.ts b/src/lib/bits/dropdown-menu/_types.ts
index 0be8a0b94..095067bdd 100644
--- a/src/lib/bits/dropdown-menu/_types.ts
+++ b/src/lib/bits/dropdown-menu/_types.ts
@@ -9,6 +9,7 @@ import type {
 	AsChild,
 	Expand,
 	OmitOpen,
+	OmitIds,
 	OnChangeFn,
 	Transition,
 	OmitChecked
@@ -23,7 +24,7 @@ import type {
 } from "@melt-ui/svelte";
 
 type Props = Expand<
-	OmitOpen<Omit<CreateDropdownMenuProps, "ids" | "arrowSize">> & {
+	OmitOpen<OmitIds<Omit<CreateDropdownMenuProps, "arrowSize">>> & {
 		/**
 		 * The open state of the dropdown menu.
 		 * You can bind this to a boolean value to programmatically control the open state.
@@ -104,7 +105,7 @@ type LabelProps = AsChild;
 type SeparatorProps = AsChild;
 
 type SubProps = Expand<
-	OmitOpen<Omit<CreateDropdownSubmenuProps, "ids" | "arrowSize">> & {
+	OmitOpen<OmitIds<Omit<CreateDropdownSubmenuProps, "arrowSize">>> & {
 		/**
 		 * The open state of the submenu.
 		 * You can bind this to a boolean value to programmatically control the open state.
diff --git a/src/lib/bits/label/_types.ts b/src/lib/bits/label/_types.ts
new file mode 100644
index 000000000..5f773090d
--- /dev/null
+++ b/src/lib/bits/label/_types.ts
@@ -0,0 +1,5 @@
+import type { AsChild } from "$lib/internal/types.js";
+
+type Props = AsChild;
+
+export type { Props };
diff --git a/src/lib/bits/label/components/Label.svelte b/src/lib/bits/label/components/Label.svelte
index e84a02e83..bd29b452c 100644
--- a/src/lib/bits/label/components/Label.svelte
+++ b/src/lib/bits/label/components/Label.svelte
@@ -6,20 +6,27 @@
 
 	type $$Props = Props;
 	type $$Events = Events;
+
 	export let asChild: $$Props["asChild"] = false;
+
 	const {
 		elements: { root }
 	} = createLabel();
 
 	const dispatch = createDispatcher();
-	$: builder = $root;
 	const attrs = getAttrs("root");
+
+	$: builder = $root;
+	$: slotProps = {
+		builder,
+		attrs
+	};
 </script>
 
 {#if asChild}
-	<slot {builder} {attrs} />
+	<slot {...slotProps} />
 {:else}
 	<label use:melt={builder} {...$$restProps} {...attrs} on:m-mousedown={dispatch}>
-		<slot {builder} {attrs} />
+		<slot {...slotProps} />
 	</label>
 {/if}
diff --git a/src/lib/bits/label/types.ts b/src/lib/bits/label/types.ts
index 2557d2b1c..f7f55752e 100644
--- a/src/lib/bits/label/types.ts
+++ b/src/lib/bits/label/types.ts
@@ -1,8 +1,9 @@
 import type { CustomEventHandler } from "$lib";
-import type { AsChild } from "$lib/internal/types.js";
 import type { HTMLLabelAttributes } from "svelte/elements";
+import type * as T from "./_types.js";
+
+type Props = T.Props & HTMLLabelAttributes;
 
-type Props = AsChild & HTMLLabelAttributes;
 type Events<T extends Element = HTMLLabelElement> = {
 	mousedown: CustomEventHandler<MouseEvent, T>;
 };
diff --git a/src/lib/bits/link-preview/_types.ts b/src/lib/bits/link-preview/_types.ts
new file mode 100644
index 000000000..2cee46aee
--- /dev/null
+++ b/src/lib/bits/link-preview/_types.ts
@@ -0,0 +1,52 @@
+/**
+ * We define prop types without the HTMLAttributes here so that we can use them
+ * to type-check our API documentation, which requires we document each prop,
+ * but we don't want to document the HTML attributes.
+ */
+
+import type {
+	OmitOpen,
+	Expand,
+	OnChangeFn,
+	Transition,
+	AsChild,
+	TransitionProps,
+	OmitIds
+} from "$lib/internal/index.js";
+import type { CreateLinkPreviewProps } from "@melt-ui/svelte";
+
+type Props = Expand<
+	OmitOpen<OmitIds<Omit<CreateLinkPreviewProps, "arrowSize">>> & {
+		/**
+		 * The open state of the link preview.
+		 * You can bind this to a boolean value to programmatically control the open state.
+		 *
+		 * @defaultValue false
+		 */
+		open?: boolean;
+
+		/**
+		 * A callback function called when the open state changes.
+		 */
+		onOpenChange?: OnChangeFn<boolean>;
+	}
+>;
+
+type TriggerProps = AsChild;
+
+type ContentProps<
+	T extends Transition = Transition,
+	In extends Transition = Transition,
+	Out extends Transition = Transition
+> = Expand<TransitionProps<T, In, Out> & AsChild>;
+
+type ArrowProps = Expand<
+	{
+		/**
+		 * The size of the arrow in pixels.
+		 */
+		size?: number;
+	} & AsChild
+>;
+
+export type { Props, ArrowProps, TriggerProps, ContentProps };
diff --git a/src/lib/bits/link-preview/components/LinkPreview.svelte b/src/lib/bits/link-preview/components/LinkPreview.svelte
index 1686fc6e8..ad2b23d51 100644
--- a/src/lib/bits/link-preview/components/LinkPreview.svelte
+++ b/src/lib/bits/link-preview/components/LinkPreview.svelte
@@ -11,7 +11,6 @@
 	export let closeDelay: $$Props["closeDelay"] = 300;
 	export let closeOnOutsideClick: $$Props["closeOnOutsideClick"] = undefined;
 	export let closeOnEscape: $$Props["closeOnEscape"] = undefined;
-	export let arrowSize: $$Props["arrowSize"] = undefined;
 	export let portal: $$Props["portal"] = undefined;
 
 	const {
@@ -25,7 +24,6 @@
 		closeDelay,
 		closeOnOutsideClick,
 		closeOnEscape,
-		arrowSize,
 		portal,
 		onOpenChange: ({ next }) => {
 			if (open !== next) {
@@ -47,7 +45,6 @@
 	$: updateOption("closeDelay", closeDelay);
 	$: updateOption("closeOnOutsideClick", closeOnOutsideClick);
 	$: updateOption("closeOnEscape", closeOnEscape);
-	$: updateOption("arrowSize", arrowSize);
 	$: updateOption("portal", portal);
 </script>
 
diff --git a/src/lib/bits/link-preview/components/LinkPreviewArrow.svelte b/src/lib/bits/link-preview/components/LinkPreviewArrow.svelte
index 74f60ae43..57745c382 100644
--- a/src/lib/bits/link-preview/components/LinkPreviewArrow.svelte
+++ b/src/lib/bits/link-preview/components/LinkPreviewArrow.svelte
@@ -7,16 +7,21 @@
 
 	export let asChild: $$Props["asChild"] = false;
 	export let size = 8;
+
 	const {
 		elements: { arrow }
 	} = setArrow(size);
+	const attrs = getAttrs("arrow");
 
 	$: builder = $arrow;
-	const attrs = getAttrs("arrow");
+	$: slotProps = {
+		builder,
+		attrs
+	};
 </script>
 
 {#if asChild}
-	<slot {builder} {attrs} />
+	<slot {...slotProps} />
 {:else}
 	<div use:melt={builder} {...$$restProps} {...attrs} />
 {/if}
diff --git a/src/lib/bits/link-preview/components/LinkPreviewContent.svelte b/src/lib/bits/link-preview/components/LinkPreviewContent.svelte
index 96b3e9339..c3a484d99 100644
--- a/src/lib/bits/link-preview/components/LinkPreviewContent.svelte
+++ b/src/lib/bits/link-preview/components/LinkPreviewContent.svelte
@@ -17,7 +17,6 @@
 	export let inTransitionConfig: $$Props["inTransitionConfig"] = undefined;
 	export let outTransition: $$Props["outTransition"] = undefined;
 	export let outTransitionConfig: $$Props["outTransitionConfig"] = undefined;
-
 	export let asChild: $$Props["asChild"] = false;
 	export let id: $$Props["id"] = undefined;
 
@@ -31,16 +30,18 @@
 		ids.content.set(id);
 	}
 
-	$: builder = $content;
 	const attrs = getAttrs("content");
-
 	const dispatch = createDispatcher();
-</script>
 
-<!-- svelte-ignore a11y-no-static-element-interactions / applied by melt's builder-->
+	$: builder = $content;
+	$: slotProps = {
+		builder,
+		attrs
+	};
+</script>
 
 {#if asChild && $open}
-	<slot {builder} {attrs} />
+	<slot {...slotProps} />
 {:else if transition && $open}
 	<div
 		transition:transition={transitionConfig}
@@ -52,7 +53,7 @@
 		on:m-pointerenter={dispatch}
 		on:m-pointerleave={dispatch}
 	>
-		<slot {builder} {attrs} />
+		<slot {...slotProps} />
 	</div>
 {:else if inTransition && outTransition && $open}
 	<div
@@ -66,7 +67,7 @@
 		on:m-pointerenter={dispatch}
 		on:m-pointerleave={dispatch}
 	>
-		<slot {builder} {attrs} />
+		<slot {...slotProps} />
 	</div>
 {:else if inTransition && $open}
 	<div
@@ -79,7 +80,7 @@
 		on:m-pointerenter={dispatch}
 		on:m-pointerleave={dispatch}
 	>
-		<slot {builder} {attrs} />
+		<slot {...slotProps} />
 	</div>
 {:else if outTransition && $open}
 	<div
@@ -92,7 +93,7 @@
 		on:m-pointerenter={dispatch}
 		on:m-pointerleave={dispatch}
 	>
-		<slot {builder} {attrs} />
+		<slot {...slotProps} />
 	</div>
 {:else if $open}
 	<div
@@ -104,6 +105,6 @@
 		on:m-pointerenter={dispatch}
 		on:m-pointerleave={dispatch}
 	>
-		<slot {builder} {attrs} />
+		<slot {...slotProps} />
 	</div>
 {/if}
diff --git a/src/lib/bits/link-preview/components/LinkPreviewTrigger.svelte b/src/lib/bits/link-preview/components/LinkPreviewTrigger.svelte
index 009ba262d..833f5762d 100644
--- a/src/lib/bits/link-preview/components/LinkPreviewTrigger.svelte
+++ b/src/lib/bits/link-preview/components/LinkPreviewTrigger.svelte
@@ -6,6 +6,7 @@
 
 	type $$Props = TriggerProps;
 	type $$Events = TriggerEvents;
+
 	export let asChild: $$Props["asChild"] = false;
 	export let id: $$Props["id"] = undefined;
 
@@ -15,17 +16,20 @@
 	} = getCtx();
 
 	const dispatch = createDispatcher();
+	const attrs = getAttrs("trigger");
 
 	$: if (id) {
 		ids.trigger.set(id);
 	}
-
 	$: builder = $trigger;
-	const attrs = getAttrs("trigger");
+	$: slotProps = {
+		builder,
+		attrs
+	};
 </script>
 
 {#if asChild}
-	<slot {attrs} {builder} />
+	<slot {...slotProps} />
 {:else}
 	{@const builder = $trigger}
 	<svelte:element
@@ -38,6 +42,6 @@
 		on:m-pointerenter={dispatch}
 		on:m-pointerleave={dispatch}
 	>
-		<slot {builder} {attrs} />
+		<slot {...slotProps} />
 	</svelte:element>
 {/if}
diff --git a/src/lib/bits/link-preview/types.ts b/src/lib/bits/link-preview/types.ts
index 2c413e00c..a78b01ed6 100644
--- a/src/lib/bits/link-preview/types.ts
+++ b/src/lib/bits/link-preview/types.ts
@@ -1,37 +1,19 @@
 import type { CustomEventHandler } from "$lib/index.js";
-import type {
-	OmitOpen,
-	Expand,
-	HTMLDivAttributes,
-	OnChangeFn,
-	Transition,
-	AsChild,
-	TransitionProps
-} from "$lib/internal/index.js";
-import type { CreateLinkPreviewProps } from "@melt-ui/svelte";
+import type { HTMLDivAttributes, Transition } from "$lib/internal/index.js";
 import type { HTMLAnchorAttributes } from "svelte/elements";
+import type * as T from "./_types.js";
 
-type Props = Expand<
-	OmitOpen<CreateLinkPreviewProps> & {
-		open?: boolean;
-		onOpenChange?: OnChangeFn<boolean>;
-	}
->;
+type Props = T.Props;
 
-type TriggerProps = AsChild & HTMLAnchorAttributes;
+type TriggerProps = T.TriggerProps & HTMLAnchorAttributes;
 
 type ContentProps<
 	T extends Transition = Transition,
 	In extends Transition = Transition,
 	Out extends Transition = Transition
-> = Expand<TransitionProps<T, In, Out> & AsChild> & HTMLDivAttributes;
+> = T.ContentProps<T, In, Out> & HTMLDivAttributes;
 
-type ArrowProps = Expand<
-	{
-		size?: number;
-	} & AsChild
-> &
-	HTMLDivAttributes;
+type ArrowProps = T.ArrowProps & HTMLDivAttributes;
 
 type TriggerEvents<T extends Element = HTMLAnchorElement> = {
 	click: CustomEventHandler<MouseEvent, T>;
diff --git a/src/lib/bits/menubar/_types.ts b/src/lib/bits/menubar/_types.ts
new file mode 100644
index 000000000..6b3360162
--- /dev/null
+++ b/src/lib/bits/menubar/_types.ts
@@ -0,0 +1,181 @@
+/**
+ * We define prop types without the HTMLAttributes here so that we can use them
+ * to type-check our API documentation, which requires we document each prop,
+ * but we don't want to document the HTML attributes.
+ */
+
+import type {
+	AsChild,
+	Expand,
+	OmitChecked,
+	OmitOpen,
+	OmitValue,
+	OnChangeFn,
+	Transition,
+	TransitionProps,
+	OmitIds
+} from "$lib/internal/index.js";
+import type {
+	CreateMenubarProps,
+	CreateMenubarMenuProps,
+	CreateMenuCheckboxItemProps,
+	CreateMenuRadioGroupProps,
+	MenubarRadioItemProps,
+	CreateMenubarSubmenuProps
+} from "@melt-ui/svelte";
+
+type Props = Expand<OmitIds<CreateMenubarProps> & AsChild>;
+
+type MenuProps = Expand<
+	OmitOpen<OmitIds<Omit<CreateMenubarMenuProps, "arrowSize">>> & {
+		/**
+		 * The open state of the menu.
+		 * You can bind this to a boolean value to programmatically control the open state.
+		 *
+		 * @defaultValue false
+		 */
+		open?: boolean;
+
+		/**
+		 * A callback function called when the open state changes.
+		 */
+		onOpenChange?: OnChangeFn<boolean>;
+	}
+>;
+
+type CheckboxItemProps = Expand<
+	OmitChecked<CreateMenuCheckboxItemProps> & {
+		/**
+		 * The checked state of the checkbox item.
+		 * You can bind this to a boolean value to programmatically control the checked state.
+		 *
+		 * @defaultValue false
+		 */
+		checked?: boolean | "indeterminate";
+
+		/**
+		 * A callback function called when the checked state changes.
+		 */
+		onCheckedChange?: OnChangeFn<boolean | "indeterminate">;
+
+		/**
+		 * Whether the checkbox item is disabled.
+		 *
+		 * @defaultValue false
+		 */
+		disabled?: boolean;
+	} & AsChild
+>;
+
+type RadioGroupProps = Expand<
+	OmitValue<CreateMenuRadioGroupProps> & {
+		/**
+		 * The value of the radio group.
+		 * You can bind this to a value to programmatically control the checked state.
+		 *
+		 * @defaultValue undefined
+		 */
+		value?: CreateMenuRadioGroupProps["defaultValue"] & {};
+
+		/**
+		 * A callback function called when the value changes.
+		 */
+		onValueChange?: OnChangeFn<CreateMenuRadioGroupProps["defaultValue"]>;
+	} & AsChild
+>;
+
+type ContentProps<
+	T extends Transition = Transition,
+	In extends Transition = Transition,
+	Out extends Transition = Transition
+> = Expand<
+	{
+		sideOffset?: number;
+	} & TransitionProps<T, In, Out> &
+		AsChild
+>;
+
+type GroupProps = AsChild;
+
+type ItemProps = Expand<
+	{
+		/**
+		 * Whether the menu item is disabled.
+		 *
+		 * @defaultValue false
+		 */
+		disabled?: boolean;
+	} & AsChild
+>;
+
+type CheckboxIndicatorProps = AsChild;
+
+type LabelProps = AsChild;
+
+type RadioItemProps = Expand<MenubarRadioItemProps & AsChild>;
+
+type SeparatorProps = AsChild;
+
+type SubProps = Expand<
+	OmitIds<OmitOpen<Omit<CreateMenubarSubmenuProps, "arrowSize">>> & {
+		/**
+		 * The open state of the submenu.
+		 * You can bind this to a boolean value to programmatically control the open state.
+		 *
+		 * @defaultValue false
+		 */
+		open?: boolean;
+
+		/**
+		 * A callback function called when the open state changes.
+		 */
+		onOpenChange?: OnChangeFn<boolean>;
+	}
+>;
+
+type SubContentProps<
+	T extends Transition = Transition,
+	In extends Transition = Transition,
+	Out extends Transition = Transition
+> = Expand<
+	{
+		sideOffset?: number;
+	} & TransitionProps<T, In, Out> &
+		AsChild
+>;
+
+type SubTriggerProps = Expand<
+	{
+		disabled?: boolean;
+	} & AsChild
+>;
+
+type TriggerProps = AsChild;
+
+type ArrowProps = Expand<
+	{
+		/**
+		 * The size of the arrow in pixels.
+		 */
+		size?: number;
+	} & AsChild
+>;
+
+export type {
+	Props,
+	SubProps,
+	MenuProps,
+	ItemProps,
+	ArrowProps,
+	GroupProps,
+	LabelProps,
+	TriggerProps,
+	ContentProps,
+	RadioItemProps,
+	SeparatorProps,
+	RadioGroupProps,
+	SubContentProps,
+	SubTriggerProps,
+	CheckboxItemProps,
+	CheckboxIndicatorProps
+};
diff --git a/src/lib/bits/menubar/components/Menubar.svelte b/src/lib/bits/menubar/components/Menubar.svelte
index 59d7ae9ef..4cb0d9f21 100644
--- a/src/lib/bits/menubar/components/Menubar.svelte
+++ b/src/lib/bits/menubar/components/Menubar.svelte
@@ -20,6 +20,7 @@
 	const idValues = derived([ids.menubar], ([$menubarId]) => ({
 		menubar: $menubarId
 	}));
+	const attrs = getAttrs("root");
 
 	$: if (id) {
 		ids.menubar.set(id);
@@ -28,13 +29,16 @@
 	$: updateOption("loop", loop);
 	$: updateOption("closeOnEscape", closeOnEscape);
 	$: builder = $menubar;
-	const attrs = getAttrs("root");
+	$: slotProps = {
+		builder,
+		attrs
+	};
 </script>
 
 {#if asChild}
-	<slot {builder} {attrs} ids={$idValues} />
+	<slot {...slotProps} ids={$idValues} />
 {:else}
 	<div use:melt={builder} {...$$restProps} {...attrs}>
-		<slot {builder} {attrs} ids={$idValues} />
+		<slot {...slotProps} ids={$idValues} />
 	</div>
 {/if}
diff --git a/src/lib/bits/menubar/components/MenubarArrow.svelte b/src/lib/bits/menubar/components/MenubarArrow.svelte
index 63c68e78e..ea901e115 100644
--- a/src/lib/bits/menubar/components/MenubarArrow.svelte
+++ b/src/lib/bits/menubar/components/MenubarArrow.svelte
@@ -7,15 +7,21 @@
 
 	export let size = 8;
 	export let asChild: $$Props["asChild"] = false;
+
 	const {
 		elements: { arrow }
 	} = setArrow(size);
-	$: builder = $arrow;
 	const attrs = getAttrs("arrow");
+
+	$: builder = $arrow;
+	$: slotProps = {
+		builder,
+		attrs
+	};
 </script>
 
 {#if asChild}
-	<slot {builder} {attrs} />
+	<slot {...slotProps} />
 {:else}
 	<div use:melt={builder} {...attrs} />
 {/if}
diff --git a/src/lib/bits/menubar/components/MenubarCheckboxIndicator.svelte b/src/lib/bits/menubar/components/MenubarCheckboxIndicator.svelte
index 93db226a6..0aac5f175 100644
--- a/src/lib/bits/menubar/components/MenubarCheckboxIndicator.svelte
+++ b/src/lib/bits/menubar/components/MenubarCheckboxIndicator.svelte
@@ -3,12 +3,22 @@
 	import { getCheckboxIndicator, getAttrs } from "../ctx.js";
 
 	type $$Props = CheckboxItemIndicatorProps;
+	export let asChild: $$Props["asChild"] = false;
+
 	const checked = getCheckboxIndicator();
 	const attrs = getAttrs("checkbox-indicator");
+	$: slotProps = {
+		attrs,
+		checked: $checked
+	};
 </script>
 
-<div {...$$restProps} {...attrs}>
-	{#if $checked}
-		<slot checked={$checked} />
-	{/if}
-</div>
+{#if asChild}
+	<slot {...slotProps} />
+{:else}
+	<div {...$$restProps} {...attrs}>
+		{#if $checked}
+			<slot {...slotProps} />
+		{/if}
+	</div>
+{/if}
diff --git a/src/lib/bits/menubar/components/MenubarCheckboxItem.svelte b/src/lib/bits/menubar/components/MenubarCheckboxItem.svelte
index 8f11b69d3..9b142ee57 100644
--- a/src/lib/bits/menubar/components/MenubarCheckboxItem.svelte
+++ b/src/lib/bits/menubar/components/MenubarCheckboxItem.svelte
@@ -6,6 +6,7 @@
 
 	type $$Props = CheckboxItemProps;
 	type $$Events = CheckboxItemEvents;
+
 	export let checked: $$Props["checked"] = undefined;
 	export let onCheckedChange: $$Props["onCheckedChange"] = undefined;
 	export let disabled: $$Props["disabled"] = undefined;
@@ -26,15 +27,19 @@
 	});
 
 	const dispatch = createDispatcher();
+	const attrs = getAttrs("checkbox-item");
 
 	$: checked !== undefined && localChecked.set(checked);
 	$: updateOption("disabled", disabled);
 	$: builder = $checkboxItem;
-	const attrs = getAttrs("checkbox-item");
+	$: slotProps = {
+		builder,
+		attrs
+	};
 </script>
 
 {#if asChild}
-	<slot {builder} {attrs} />
+	<slot {...slotProps} />
 {:else}
 	<div
 		use:melt={builder}
@@ -48,6 +53,6 @@
 		on:m-pointerleave={dispatch}
 		on:m-pointermove={dispatch}
 	>
-		<slot {builder} {attrs} />
+		<slot {...slotProps} />
 	</div>
 {/if}
diff --git a/src/lib/bits/menubar/components/MenubarContent.svelte b/src/lib/bits/menubar/components/MenubarContent.svelte
index 112425b8c..fa6a89335 100644
--- a/src/lib/bits/menubar/components/MenubarContent.svelte
+++ b/src/lib/bits/menubar/components/MenubarContent.svelte
@@ -13,15 +13,13 @@
 	export let sideOffset: $$Props["sideOffset"] = 5;
 	export let transition: $$Props["transition"] = undefined;
 	export let transitionConfig: $$Props["transitionConfig"] = undefined;
-
 	export let inTransition: $$Props["inTransition"] = undefined;
 	export let inTransitionConfig: $$Props["inTransitionConfig"] = undefined;
-
 	export let outTransition: $$Props["outTransition"] = undefined;
 	export let outTransitionConfig: $$Props["outTransitionConfig"] = undefined;
-
 	export let asChild: $$Props["asChild"] = false;
 	export let id: $$Props["id"] = undefined;
+
 	const {
 		elements: { menu },
 		states: { open },
@@ -29,15 +27,20 @@
 	} = getContent(sideOffset);
 
 	const dispatch = createDispatcher();
+	const attrs = getAttrs("content");
+
 	$: if (id) {
 		ids.menu.set(id);
 	}
 	$: builder = $menu;
-	const attrs = getAttrs("content");
+	$: slotProps = {
+		builder,
+		attrs
+	};
 </script>
 
 {#if asChild && $open}
-	<slot {builder} {attrs} />
+	<slot {...slotProps} />
 {:else if transition && $open}
 	<div
 		transition:transition={transitionConfig}
@@ -46,7 +49,7 @@
 		{...attrs}
 		on:m-keydown={dispatch}
 	>
-		<slot {builder} {attrs} />
+		<slot {...slotProps} />
 	</div>
 {:else if inTransition && outTransition && $open}
 	<div
@@ -57,7 +60,7 @@
 		{...attrs}
 		on:m-keydown={dispatch}
 	>
-		<slot {builder} {attrs} />
+		<slot {...slotProps} />
 	</div>
 {:else if inTransition && $open}
 	<div
@@ -67,7 +70,7 @@
 		{...attrs}
 		on:m-keydown={dispatch}
 	>
-		<slot {builder} {attrs} />
+		<slot {...slotProps} />
 	</div>
 {:else if outTransition && $open}
 	<div
@@ -77,10 +80,10 @@
 		{...attrs}
 		on:m-keydown={dispatch}
 	>
-		<slot {builder} {attrs} />
+		<slot {...slotProps} />
 	</div>
 {:else if $open}
 	<div use:melt={builder} {...$$restProps} {...attrs} on:m-keydown={dispatch}>
-		<slot {builder} {attrs} />
+		<slot {...slotProps} />
 	</div>
 {/if}
diff --git a/src/lib/bits/menubar/components/MenubarGroup.svelte b/src/lib/bits/menubar/components/MenubarGroup.svelte
index bbc47f875..9b2581d33 100644
--- a/src/lib/bits/menubar/components/MenubarGroup.svelte
+++ b/src/lib/bits/menubar/components/MenubarGroup.svelte
@@ -2,18 +2,25 @@
 	import { melt } from "@melt-ui/svelte";
 	import { setGroupCtx, getAttrs } from "../ctx.js";
 	import type { GroupProps } from "../types.js";
+
 	type $$Props = GroupProps;
 
 	export let asChild: $$Props["asChild"] = false;
+
 	const { group, id } = setGroupCtx();
-	$: builder = $group(id);
 	const attrs = getAttrs("group");
+
+	$: builder = $group(id);
+	$: slotProps = {
+		builder,
+		attrs
+	};
 </script>
 
 {#if asChild}
-	<slot {builder} {attrs} />
+	<slot {...slotProps} />
 {:else}
 	<div use:melt={builder} {...$$restProps} {...attrs}>
-		<slot {builder} {attrs} />
+		<slot {...slotProps} />
 	</div>
 {/if}
diff --git a/src/lib/bits/menubar/components/MenubarItem.svelte b/src/lib/bits/menubar/components/MenubarItem.svelte
index 148a2a731..29ca5a3f7 100644
--- a/src/lib/bits/menubar/components/MenubarItem.svelte
+++ b/src/lib/bits/menubar/components/MenubarItem.svelte
@@ -7,19 +7,25 @@
 
 	type $$Props = ItemProps;
 	type $$Events = ItemEvents;
+
 	export let asChild: $$Props["asChild"] = false;
-	export let disabled = false;
+	export let disabled: $$Props["disabled"] = false;
+
 	const {
 		elements: { item }
 	} = getMenuCtx();
 	const dispatch = createDispatcher();
-	$: builder = $item;
 
+	$: builder = $item;
 	$: attrs = { ...getAttrs("item"), ...disabledAttrs(disabled) };
+	$: slotProps = {
+		builder,
+		attrs
+	};
 </script>
 
 {#if asChild}
-	<slot {builder} {attrs} />
+	<slot {...slotProps} />
 {:else}
 	<div
 		use:melt={builder}
@@ -33,6 +39,6 @@
 		on:m-pointerleave={dispatch}
 		on:m-pointermove={dispatch}
 	>
-		<slot {builder} {attrs} />
+		<slot {...slotProps} />
 	</div>
 {/if}
diff --git a/src/lib/bits/menubar/components/MenubarLabel.svelte b/src/lib/bits/menubar/components/MenubarLabel.svelte
index aa9d97d39..6f5db1b6d 100644
--- a/src/lib/bits/menubar/components/MenubarLabel.svelte
+++ b/src/lib/bits/menubar/components/MenubarLabel.svelte
@@ -2,18 +2,25 @@
 	import { melt } from "@melt-ui/svelte";
 	import { getGroupLabel, getAttrs } from "../ctx.js";
 	import type { LabelProps } from "../types.js";
+
 	type $$Props = LabelProps;
+
 	export let asChild: $$Props["asChild"] = false;
+
 	const { groupLabel, id } = getGroupLabel();
+	const attrs = getAttrs("label");
 
 	$: builder = $groupLabel(id);
-	const attrs = getAttrs("label");
+	$: slotProps = {
+		builder,
+		attrs
+	};
 </script>
 
 {#if asChild}
-	<slot {builder} {attrs} />
+	<slot {...slotProps} />
 {:else}
 	<div use:melt={builder} {...$$restProps} {...attrs}>
-		<slot {builder} {attrs} />
+		<slot {...slotProps} />
 	</div>
 {/if}
diff --git a/src/lib/bits/menubar/components/MenubarMenu.svelte b/src/lib/bits/menubar/components/MenubarMenu.svelte
index 53ebd5af1..fe954ec21 100644
--- a/src/lib/bits/menubar/components/MenubarMenu.svelte
+++ b/src/lib/bits/menubar/components/MenubarMenu.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import type { MenuProps } from "../types.js";
 	import { setMenuCtx } from "../ctx.js";
-	import { generateId } from "$lib/internal/id.js";
+	import { derived } from "svelte/store";
 	type $$Props = MenuProps;
 
 	export let closeOnOutsideClick: $$Props["closeOnOutsideClick"] = undefined;
@@ -10,7 +10,6 @@
 	export let open: $$Props["open"] = undefined;
 	export let onOpenChange: $$Props["onOpenChange"] = undefined;
 	export let preventScroll: $$Props["preventScroll"] = undefined;
-	export let arrowSize: $$Props["arrowSize"] = undefined;
 	export let positioning: $$Props["positioning"] = undefined;
 	export let loop: $$Props["loop"] = undefined;
 	export let dir: $$Props["dir"] = undefined;
@@ -18,21 +17,15 @@
 	export let closeFocus: $$Props["closeFocus"] = undefined;
 	export let disableFocusFirstItem: $$Props["disableFocusFirstItem"] = undefined;
 
-	const ids = {
-		menu: generateId(),
-		trigger: generateId()
-	};
-
 	const {
 		states: { open: localOpen },
-		updateOption
+		updateOption,
+		ids
 	} = setMenuCtx({
 		closeOnOutsideClick,
-		ids,
 		closeOnEscape,
 		portal,
 		preventScroll,
-		arrowSize,
 		positioning,
 		loop,
 		dir,
@@ -47,13 +40,18 @@
 			return next;
 		}
 	});
+
+	const idValues = derived([ids.menu, ids.trigger], ([$menuId, $triggerId]) => ({
+		menu: $menuId,
+		trigger: $triggerId
+	}));
+
 	$: open !== undefined && localOpen.set(open);
 
 	$: updateOption("closeOnOutsideClick", closeOnOutsideClick);
 	$: updateOption("closeOnEscape", closeOnEscape);
 	$: updateOption("portal", portal);
 	$: updateOption("preventScroll", preventScroll);
-	$: updateOption("arrowSize", arrowSize);
 	$: updateOption("positioning", positioning);
 	$: updateOption("loop", loop);
 	$: updateOption("dir", dir);
@@ -62,4 +60,4 @@
 	$: updateOption("typeahead", typeahead);
 </script>
 
-<slot menuIds={ids} />
+<slot menuIds={$idValues} />
diff --git a/src/lib/bits/menubar/components/MenubarRadioGroup.svelte b/src/lib/bits/menubar/components/MenubarRadioGroup.svelte
index 9787b406b..0965c31ee 100644
--- a/src/lib/bits/menubar/components/MenubarRadioGroup.svelte
+++ b/src/lib/bits/menubar/components/MenubarRadioGroup.svelte
@@ -4,6 +4,7 @@
 	import type { RadioGroupProps } from "../types.js";
 
 	type $$Props = RadioGroupProps;
+
 	export let value: $$Props["value"] = undefined;
 	export let onValueChange: $$Props["onValueChange"] = undefined;
 	export let asChild: $$Props["asChild"] = false;
@@ -22,16 +23,20 @@
 		}
 	});
 
-	$: value !== undefined && localValue.set(value);
+	const attrs = getAttrs("radio-group");
 
+	$: value !== undefined && localValue.set(value);
 	$: builder = $radioGroup;
-	const attrs = getAttrs("radio-group");
+	$: slotProps = {
+		builder,
+		attrs
+	};
 </script>
 
 {#if asChild}
-	<slot {builder} {attrs} />
+	<slot {...slotProps} />
 {:else}
 	<div use:melt={builder} {...$$restProps} {...attrs}>
-		<slot {builder} {attrs} />
+		<slot {...slotProps} />
 	</div>
 {/if}
diff --git a/src/lib/bits/menubar/components/MenubarRadioItem.svelte b/src/lib/bits/menubar/components/MenubarRadioItem.svelte
index 3bcb4512d..45263e21b 100644
--- a/src/lib/bits/menubar/components/MenubarRadioItem.svelte
+++ b/src/lib/bits/menubar/components/MenubarRadioItem.svelte
@@ -6,20 +6,27 @@
 
 	type $$Props = RadioItemProps;
 	type $$Events = RadioItemEvents;
+
 	export let value: $$Props["value"];
-	export let disabled = false;
+	export let disabled: $$Props["disabled"] = false;
 	export let asChild: $$Props["asChild"] = false;
+
 	const {
 		elements: { radioItem }
 	} = setRadioItemCtx(value);
+
 	const dispatch = createDispatcher();
+	const attrs = getAttrs("radio-item");
 
 	$: builder = $radioItem({ value, disabled });
-	const attrs = getAttrs("radio-item");
+	$: slotProps = {
+		builder,
+		attrs
+	};
 </script>
 
 {#if asChild}
-	<slot {builder} {attrs} />
+	<slot {...slotProps} />
 {:else}
 	<div
 		use:melt={builder}
@@ -33,6 +40,6 @@
 		on:m-pointerleave={dispatch}
 		on:m-pointermove={dispatch}
 	>
-		<slot {builder} {attrs} />
+		<slot {...slotProps} />
 	</div>
 {/if}
diff --git a/src/lib/bits/menubar/components/MenubarSeparator.svelte b/src/lib/bits/menubar/components/MenubarSeparator.svelte
index 47e0a105c..cb9f75023 100644
--- a/src/lib/bits/menubar/components/MenubarSeparator.svelte
+++ b/src/lib/bits/menubar/components/MenubarSeparator.svelte
@@ -4,16 +4,24 @@
 	import type { SeparatorProps } from "../types.js";
 
 	type $$Props = SeparatorProps;
+
 	export let asChild: $$Props["asChild"] = false;
+
 	const {
 		elements: { separator }
 	} = getMenuCtx();
-	$: builder = $separator;
+
 	const attrs = getAttrs("separator");
+
+	$: builder = $separator;
+	$: slotProps = {
+		builder,
+		attrs
+	};
 </script>
 
 {#if asChild}
-	<slot {builder} />
+	<slot {...slotProps} />
 {:else}
 	<div use:melt={builder} {...$$restProps} {...attrs} />
 {/if}
diff --git a/src/lib/bits/menubar/components/MenubarSub.svelte b/src/lib/bits/menubar/components/MenubarSub.svelte
index 27fb9bf19..c86952cc2 100644
--- a/src/lib/bits/menubar/components/MenubarSub.svelte
+++ b/src/lib/bits/menubar/components/MenubarSub.svelte
@@ -2,16 +2,28 @@
 	import { derived } from "svelte/store";
 	import { setSubMenuCtx } from "../ctx.js";
 	import type { SubProps } from "../types.js";
+
 	type $$Props = SubProps;
 
 	export let positioning: $$Props["positioning"] = undefined;
 	export let disabled: $$Props["disabled"] = undefined;
-	export let arrowSize: $$Props["arrowSize"] = undefined;
+	export let open: $$Props["open"] = undefined;
+	export let onOpenChange: $$Props["onOpenChange"] = undefined;
 
-	const { updateOption, ids } = setSubMenuCtx({
+	const {
+		updateOption,
+		ids,
+		states: { subOpen }
+	} = setSubMenuCtx({
 		positioning,
 		disabled,
-		arrowSize
+		onOpenChange: ({ next }) => {
+			if (open !== next) {
+				onOpenChange?.(next);
+				open = next;
+			}
+			return next;
+		}
 	});
 
 	const idValues = derived([ids.menu, ids.trigger], ([$menuId, $triggerId]) => ({
@@ -19,9 +31,10 @@
 		trigger: $triggerId
 	}));
 
+	$: open !== undefined && subOpen.set(open);
+
 	$: updateOption("positioning", positioning);
 	$: updateOption("disabled", disabled);
-	$: updateOption("arrowSize", arrowSize);
 </script>
 
 <slot subIds={$idValues} />
diff --git a/src/lib/bits/menubar/components/MenubarSubContent.svelte b/src/lib/bits/menubar/components/MenubarSubContent.svelte
index 947f66331..c40734649 100644
--- a/src/lib/bits/menubar/components/MenubarSubContent.svelte
+++ b/src/lib/bits/menubar/components/MenubarSubContent.svelte
@@ -26,18 +26,20 @@
 	} = getSubMenuCtx();
 
 	const dispatch = createDispatcher();
+	const attrs = getAttrs("sub-content");
 
 	$: if (id) {
 		ids.menu.set(id);
 	}
 	$: builder = $subMenu;
-
-	const attrs = getAttrs("sub-content");
+	$: slotProps = {
+		builder,
+		attrs
+	};
 </script>
 
-<!-- svelte-ignore a11y-no-static-element-interactions / applied by melt store -->
 {#if asChild && $subOpen}
-	<slot {builder} {attrs} />
+	<slot {...slotProps} />
 {:else if transition && $subOpen}
 	<div
 		transition:transition={transitionConfig}
@@ -48,7 +50,7 @@
 		on:m-keydown={dispatch}
 		on:m-pointermove={dispatch}
 	>
-		<slot {builder} {attrs} />
+		<slot {...slotProps} />
 	</div>
 {:else if inTransition && outTransition && $subOpen}
 	<div
@@ -61,7 +63,7 @@
 		on:m-keydown={dispatch}
 		on:m-pointermove={dispatch}
 	>
-		<slot {builder} {attrs} />
+		<slot {...slotProps} />
 	</div>
 {:else if inTransition && $subOpen}
 	<div
@@ -73,7 +75,7 @@
 		on:m-keydown={dispatch}
 		on:m-pointermove={dispatch}
 	>
-		<slot {builder} {attrs} />
+		<slot {...slotProps} />
 	</div>
 {:else if outTransition && $subOpen}
 	<div
@@ -85,7 +87,7 @@
 		on:m-keydown={dispatch}
 		on:m-pointermove={dispatch}
 	>
-		<slot {builder} {attrs} />
+		<slot {...slotProps} />
 	</div>
 {:else if $subOpen}
 	<div
@@ -96,6 +98,6 @@
 		on:m-keydown={dispatch}
 		on:m-pointermove={dispatch}
 	>
-		<slot {builder} {attrs} />
+		<slot {...slotProps} />
 	</div>
 {/if}
diff --git a/src/lib/bits/menubar/components/MenubarSubTrigger.svelte b/src/lib/bits/menubar/components/MenubarSubTrigger.svelte
index 6a9057f77..a66f9ec45 100644
--- a/src/lib/bits/menubar/components/MenubarSubTrigger.svelte
+++ b/src/lib/bits/menubar/components/MenubarSubTrigger.svelte
@@ -7,6 +7,7 @@
 
 	type $$Props = SubTriggerProps;
 	type $$Events = SubTriggerEvents;
+
 	export let disabled: $$Props["disabled"] = false;
 	export let asChild: $$Props["asChild"] = false;
 	export let id: $$Props["id"] = undefined;
@@ -23,11 +24,14 @@
 	}
 	$: builder = $subTrigger;
 	$: attrs = { ...getAttrs("sub-trigger"), ...disabledAttrs(disabled) };
+	$: slotProps = {
+		builder,
+		attrs
+	};
 </script>
 
-<!-- svelte-ignore a11y-no-static-element-interactions / applied by melt's builder-->
 {#if asChild}
-	<slot {builder} {attrs} />
+	<slot {...slotProps} />
 {:else}
 	<div
 		use:melt={builder}
@@ -40,6 +44,6 @@
 		on:m-pointerleave={dispatch}
 		on:m-pointermove={dispatch}
 	>
-		<slot {builder} {attrs} />
+		<slot {...slotProps} />
 	</div>
 {/if}
diff --git a/src/lib/bits/menubar/components/MenubarTrigger.svelte b/src/lib/bits/menubar/components/MenubarTrigger.svelte
index f1a37c1fb..f3e986359 100644
--- a/src/lib/bits/menubar/components/MenubarTrigger.svelte
+++ b/src/lib/bits/menubar/components/MenubarTrigger.svelte
@@ -6,6 +6,7 @@
 
 	type $$Props = TriggerProps;
 	type $$Events = TriggerEvents;
+
 	export let asChild: $$Props["asChild"] = false;
 	export let id: $$Props["id"] = undefined;
 
@@ -15,15 +16,20 @@
 	} = getMenuCtx();
 
 	const dispatch = createDispatcher();
+	const attrs = getAttrs("trigger");
+
 	$: if (id) {
 		ids.trigger.set(id);
 	}
 	$: builder = $trigger;
-	const attrs = getAttrs("trigger");
+	$: slotProps = {
+		builder,
+		attrs
+	};
 </script>
 
 {#if asChild}
-	<slot {builder} {attrs} />
+	<slot {...slotProps} />
 {:else}
 	<button
 		use:melt={builder}
@@ -34,6 +40,6 @@
 		on:m-keydown={dispatch}
 		on:m-pointerenter={dispatch}
 	>
-		<slot {builder} {attrs} />
+		<slot {...slotProps} />
 	</button>
 {/if}
diff --git a/src/lib/bits/menubar/types.ts b/src/lib/bits/menubar/types.ts
index 0b30873e1..da00538c6 100644
--- a/src/lib/bits/menubar/types.ts
+++ b/src/lib/bits/menubar/types.ts
@@ -1,109 +1,48 @@
-import type {
-	AsChild,
-	Expand,
-	HTMLDivAttributes,
-	OmitChecked,
-	OmitOpen,
-	OmitValue,
-	OnChangeFn,
-	Transition,
-	TransitionProps
-} from "$lib/internal/index.js";
+import type { Expand, HTMLDivAttributes, Transition } from "$lib/internal/index.js";
 import type { CustomEventHandler } from "$lib/index.js";
-import type {
-	CreateMenubarProps,
-	CreateMenubarMenuProps,
-	CreateMenuCheckboxItemProps,
-	CreateMenuRadioGroupProps,
-	MenubarRadioItemProps,
-	CreateMenubarSubmenuProps
-} from "@melt-ui/svelte";
+
 import type { HTMLButtonAttributes } from "svelte/elements";
+import type * as T from "./_types.js";
 
-type Props = Expand<CreateMenubarProps & AsChild> & HTMLDivAttributes;
+type Props = T.Props & HTMLDivAttributes;
 
-type MenuProps = Expand<
-	OmitOpen<CreateMenubarMenuProps> & {
-		open?: boolean;
-		onOpenChange?: OnChangeFn<boolean>;
-	}
->;
+type MenuProps = T.MenuProps;
+
+type CheckboxItemProps = T.CheckboxItemProps & HTMLDivAttributes;
 
-type CheckboxItemProps = Expand<
-	OmitChecked<CreateMenuCheckboxItemProps> & {
-		checked?: boolean | "indeterminate";
-		onCheckedChange?: OnChangeFn<boolean | "indeterminate">;
-		disabled?: boolean;
-	} & AsChild
-> &
-	HTMLDivAttributes;
-
-type RadioGroupProps = Expand<
-	OmitValue<CreateMenuRadioGroupProps> & {
-		value?: CreateMenuRadioGroupProps["defaultValue"] & {};
-		onValueChange?: OnChangeFn<CreateMenuRadioGroupProps["defaultValue"]>;
-	} & AsChild
-> &
-	HTMLDivAttributes;
+type RadioGroupProps = T.RadioGroupProps & HTMLDivAttributes;
 
 type ContentProps<
 	T extends Transition = Transition,
 	In extends Transition = Transition,
 	Out extends Transition = Transition
-> = Expand<
-	{
-		sideOffset?: number;
-	} & TransitionProps<T, In, Out> &
-		AsChild
-> &
-	HTMLDivAttributes;
+> = T.ContentProps<T, In, Out> & HTMLDivAttributes;
 
-type GroupProps = AsChild & HTMLDivAttributes;
+type GroupProps = T.GroupProps & HTMLDivAttributes;
 
-type ItemProps = Expand<
-	{
-		disabled?: boolean;
-	} & AsChild
-> &
-	HTMLDivAttributes;
+type ItemProps = T.ItemProps & HTMLDivAttributes;
 
-type CheckboxItemIndicatorProps = HTMLDivAttributes;
+type CheckboxItemIndicatorProps = T.CheckboxIndicatorProps & HTMLDivAttributes;
 
-type LabelProps = AsChild & HTMLDivAttributes;
+type LabelProps = T.LabelProps & HTMLDivAttributes;
 
-type RadioItemProps = Expand<MenubarRadioItemProps & AsChild> & HTMLDivAttributes;
+type RadioItemProps = T.RadioItemProps & HTMLDivAttributes;
 
-type SeparatorProps = AsChild & HTMLDivAttributes;
+type SeparatorProps = T.SeparatorProps & HTMLDivAttributes;
 
-type SubProps = Expand<CreateMenubarSubmenuProps>;
+type SubProps = T.SubProps;
 
 type SubContentProps<
 	T extends Transition = Transition,
 	In extends Transition = Transition,
 	Out extends Transition = Transition
-> = Expand<
-	{
-		sideOffset?: number;
-	} & TransitionProps<T, In, Out> &
-		AsChild
-> &
-	HTMLDivAttributes;
-
-type SubTriggerProps = Expand<
-	{
-		disabled?: boolean;
-	} & AsChild
-> &
-	HTMLDivAttributes;
-
-type TriggerProps = AsChild & HTMLButtonAttributes;
-
-type ArrowProps = Expand<
-	{
-		size?: number;
-	} & AsChild
-> &
-	HTMLDivAttributes;
+> = T.SubContentProps<T, In, Out> & HTMLDivAttributes;
+
+type SubTriggerProps = T.SubTriggerProps & HTMLDivAttributes;
+
+type TriggerProps = T.TriggerProps & HTMLButtonAttributes;
+
+type ArrowProps = T.ArrowProps & HTMLDivAttributes;
 
 type ItemEvents<T extends Element = HTMLDivElement> = {
 	click: CustomEventHandler<PointerEvent, T>;
diff --git a/src/lib/bits/popover/_types.ts b/src/lib/bits/popover/_types.ts
new file mode 100644
index 000000000..9027e45a6
--- /dev/null
+++ b/src/lib/bits/popover/_types.ts
@@ -0,0 +1,52 @@
+/**
+ * We define prop types without the HTMLAttributes here so that we can use them
+ * to type-check our API documentation, which requires we document each prop,
+ * but we don't want to document the HTML attributes.
+ */
+import type {
+	OmitOpen,
+	Expand,
+	Transition,
+	OnChangeFn,
+	AsChild,
+	TransitionProps,
+	OmitIds
+} from "$lib/internal/index.js";
+import type { CreatePopoverProps } from "@melt-ui/svelte";
+
+type Props = Expand<
+	OmitOpen<OmitIds<Omit<CreatePopoverProps, "arrowSize">>> & {
+		/**
+		 * The open state of the popover.
+		 * You can bind this to a boolean value to programmatically control the open state.
+		 *
+		 * @defaultValue false
+		 */
+		open?: boolean;
+
+		/**
+		 * A callback function called when the open state changes.
+		 */
+		onOpenChange?: OnChangeFn<boolean>;
+	}
+>;
+
+type ContentProps<
+	T extends Transition = Transition,
+	In extends Transition = Transition,
+	Out extends Transition = Transition
+> = Expand<TransitionProps<T, In, Out> & AsChild>;
+
+type TriggerProps = AsChild;
+type CloseProps = AsChild;
+
+type ArrowProps = Expand<
+	{
+		/**
+		 * The size of the arrow in pixels.
+		 */
+		size?: number;
+	} & AsChild
+>;
+
+export type { Props, CloseProps, ArrowProps, ContentProps, TriggerProps };
diff --git a/src/lib/bits/popover/components/Popover.svelte b/src/lib/bits/popover/components/Popover.svelte
index 234664118..5050899e2 100644
--- a/src/lib/bits/popover/components/Popover.svelte
+++ b/src/lib/bits/popover/components/Popover.svelte
@@ -5,7 +5,6 @@
 
 	type $$Props = Props;
 	export let positioning: $$Props["positioning"] = undefined;
-	export let arrowSize: $$Props["arrowSize"] = undefined;
 	export let disableFocusTrap: $$Props["disableFocusTrap"] = undefined;
 	export let closeOnEscape: $$Props["closeOnEscape"] = undefined;
 	export let closeOnOutsideClick: $$Props["closeOnOutsideClick"] = undefined;
@@ -22,7 +21,6 @@
 		ids
 	} = setCtx({
 		positioning,
-		arrowSize,
 		disableFocusTrap,
 		closeOnEscape,
 		closeOnOutsideClick,
@@ -48,7 +46,6 @@
 	$: open !== undefined && localOpen.set(open);
 
 	$: updateOption("positioning", positioning);
-	$: updateOption("arrowSize", arrowSize);
 	$: updateOption("disableFocusTrap", disableFocusTrap);
 	$: updateOption("closeOnEscape", closeOnEscape);
 	$: updateOption("closeOnOutsideClick", closeOnOutsideClick);
diff --git a/src/lib/bits/popover/components/PopoverArrow.svelte b/src/lib/bits/popover/components/PopoverArrow.svelte
index b9337689d..d004ea43e 100644
--- a/src/lib/bits/popover/components/PopoverArrow.svelte
+++ b/src/lib/bits/popover/components/PopoverArrow.svelte
@@ -7,15 +7,22 @@
 
 	export let asChild: $$Props["asChild"] = false;
 	export let size = 8;
+
 	const {
 		elements: { arrow }
 	} = setArrow(size);
-	$: builder = $arrow;
+
 	const attrs = getAttrs("arrow");
+
+	$: builder = $arrow;
+	$: slotProps = {
+		builder,
+		attrs
+	};
 </script>
 
 {#if asChild}
-	<slot {builder} />
+	<slot {...slotProps} />
 {:else}
 	<div use:melt={builder} {...$$restProps} {...attrs} />
 {/if}
diff --git a/src/lib/bits/popover/components/PopoverClose.svelte b/src/lib/bits/popover/components/PopoverClose.svelte
index 3c0f8c89e..62cbcc012 100644
--- a/src/lib/bits/popover/components/PopoverClose.svelte
+++ b/src/lib/bits/popover/components/PopoverClose.svelte
@@ -6,17 +6,25 @@
 
 	type $$Props = CloseProps;
 	type $$Events = CloseEvents;
+
 	export let asChild: $$Props["asChild"] = false;
+
 	const {
 		elements: { close }
 	} = getCtx();
+
 	const dispatch = createDispatcher();
-	$: builder = $close;
 	const attrs = getAttrs("close");
+
+	$: builder = $close;
+	$: slotProps = {
+		builder,
+		attrs
+	};
 </script>
 
 {#if asChild}
-	<slot {builder} {attrs} />
+	<slot {...slotProps} />
 {:else}
 	<button
 		use:melt={builder}
@@ -26,6 +34,6 @@
 		on:m-click={dispatch}
 		on:m-keydown={dispatch}
 	>
-		<slot {builder} {attrs} />
+		<slot {...slotProps} />
 	</button>
 {/if}
diff --git a/src/lib/bits/popover/components/PopoverContent.svelte b/src/lib/bits/popover/components/PopoverContent.svelte
index fa5f347fc..35c58b8bb 100644
--- a/src/lib/bits/popover/components/PopoverContent.svelte
+++ b/src/lib/bits/popover/components/PopoverContent.svelte
@@ -25,19 +25,23 @@
 		ids
 	} = getCtx();
 
+	const attrs = getAttrs("content");
+
 	$: if (id) {
 		ids.content.set(id);
 	}
-
 	$: builder = $content;
-	const attrs = getAttrs("content");
+	$: slotProps = {
+		builder,
+		attrs
+	};
 </script>
 
 {#if asChild && $open}
-	<slot {builder} {attrs} />
+	<slot {...slotProps} />
 {:else if transition && $open}
 	<div transition:transition={transitionConfig} use:melt={builder} {...$$restProps} {...attrs}>
-		<slot {builder} {attrs} />
+		<slot {...slotProps} />
 	</div>
 {:else if inTransition && outTransition && $open}
 	<div
@@ -47,18 +51,18 @@
 		{...$$restProps}
 		{...attrs}
 	>
-		<slot {builder} {attrs} />
+		<slot {...slotProps} />
 	</div>
 {:else if inTransition && $open}
 	<div in:inTransition={inTransitionConfig} use:melt={builder} {...$$restProps} {...attrs}>
-		<slot {builder} {attrs} />
+		<slot {...slotProps} />
 	</div>
 {:else if outTransition && $open}
 	<div out:outTransition={outTransitionConfig} use:melt={builder} {...$$restProps} {...attrs}>
-		<slot {builder} {attrs} />
+		<slot {...slotProps} />
 	</div>
 {:else if $open}
 	<div use:melt={builder} {...$$restProps} {...attrs}>
-		<slot {builder} {attrs} />
+		<slot {...slotProps} />
 	</div>
 {/if}
diff --git a/src/lib/bits/popover/components/PopoverTrigger.svelte b/src/lib/bits/popover/components/PopoverTrigger.svelte
index e25c46633..2a4e2175d 100644
--- a/src/lib/bits/popover/components/PopoverTrigger.svelte
+++ b/src/lib/bits/popover/components/PopoverTrigger.svelte
@@ -6,24 +6,30 @@
 
 	type $$Props = TriggerProps;
 	type $$Events = TriggerEvents;
+
 	export let asChild: $$Props["asChild"] = false;
 	export let id: $$Props["id"] = undefined;
+
 	const {
 		elements: { trigger },
 		ids
 	} = getCtx();
+
 	const dispatch = createDispatcher();
+	const attrs = getAttrs("trigger");
 
 	$: if (id) {
 		ids.trigger.set(id);
 	}
-
 	$: builder = $trigger;
-	const attrs = getAttrs("trigger");
+	$: slotProps = {
+		builder,
+		attrs
+	};
 </script>
 
 {#if asChild}
-	<slot {builder} {attrs} />
+	<slot {...slotProps} />
 {:else}
 	<button
 		use:melt={builder}
@@ -33,6 +39,6 @@
 		on:m-click={dispatch}
 		on:m-keydown={dispatch}
 	>
-		<slot {builder} {attrs} />
+		<slot {...slotProps} />
 	</button>
 {/if}
diff --git a/src/lib/bits/popover/types.ts b/src/lib/bits/popover/types.ts
index 24dcf230d..55e4b6410 100644
--- a/src/lib/bits/popover/types.ts
+++ b/src/lib/bits/popover/types.ts
@@ -1,38 +1,21 @@
-import type {
-	OmitOpen,
-	Expand,
-	HTMLDivAttributes,
-	Transition,
-	OnChangeFn,
-	AsChild,
-	TransitionProps
-} from "$lib/internal/index.js";
+import type { HTMLDivAttributes, Transition } from "$lib/internal/index.js";
 import type { CustomEventHandler } from "$lib/index.js";
-import type { CreatePopoverProps } from "@melt-ui/svelte";
 import type { HTMLButtonAttributes } from "svelte/elements";
+import type * as T from "./_types.js";
 
-type Props = Expand<
-	OmitOpen<CreatePopoverProps> & {
-		open?: boolean;
-		onOpenChange?: OnChangeFn<boolean>;
-	}
->;
+type Props = T.Props;
 
 type ContentProps<
 	T extends Transition = Transition,
 	In extends Transition = Transition,
 	Out extends Transition = Transition
-> = Expand<TransitionProps<T, In, Out> & AsChild> & HTMLDivAttributes;
+> = T.ContentProps<T, In, Out> & HTMLDivAttributes;
 
-type TriggerProps = AsChild & HTMLButtonAttributes;
-type CloseProps = TriggerProps;
+type TriggerProps = T.TriggerProps & HTMLButtonAttributes;
 
-type ArrowProps = Expand<
-	{
-		size?: number;
-	} & AsChild
-> &
-	HTMLDivAttributes;
+type CloseProps = T.ContentProps & HTMLButtonAttributes;
+
+type ArrowProps = T.ArrowProps & HTMLDivAttributes;
 
 type TriggerEvents<T extends Element = HTMLButtonElement> = {
 	click: CustomEventHandler<MouseEvent, T>;
diff --git a/src/lib/internal/types.ts b/src/lib/internal/types.ts
index c15667c31..ba03e6039 100644
--- a/src/lib/internal/types.ts
+++ b/src/lib/internal/types.ts
@@ -17,6 +17,7 @@ export type OmitValue<T> = Omit<T, "value" | "defaultValue" | "onValueChange">;
 export type OmitChecked<T> = Omit<T, "checked" | "defaultChecked" | "onCheckedChange">;
 export type OmitPressed<T> = Omit<T, "pressed" | "defaultPressed" | "onPressedChange">;
 export type OmitForceVisible<T> = Omit<T, "forceVisible">;
+export type OmitIds<T> = Omit<T, "ids">;
 
 export type OnChangeFn<T> = (value: T) => void;
 

From 848d958d1d2e9d88ad9e57d52874744dd4395c6f Mon Sep 17 00:00:00 2001
From: Hunter Johnston <johnstonhuntera@gmail.com>
Date: Thu, 16 Nov 2023 01:42:15 -0500
Subject: [PATCH 022/217] almost done with type updates

---
 package.json                                  |  2 +-
 pnpm-lock.yaml                                | 14 +--
 src/lib/bits/accordion/types.ts               | 12 +--
 src/lib/bits/alert-dialog/types.ts            | 14 +--
 src/lib/bits/aspect-ratio/types.ts            |  4 +-
 src/lib/bits/avatar/types.ts                  |  8 +-
 src/lib/bits/button/types.ts                  |  6 +-
 src/lib/bits/checkbox/types.ts                |  6 +-
 src/lib/bits/collapsible/types.ts             | 25 +----
 src/lib/bits/context-menu/_types.ts           | 12 +--
 src/lib/bits/context-menu/types.ts            | 32 +++----
 .../dialog/components/DialogContent.svelte    | 18 ++--
 src/lib/bits/dialog/types.ts                  | 16 ++--
 src/lib/bits/dropdown-menu/_types.ts          |  7 +-
 src/lib/bits/dropdown-menu/types.ts           | 32 +++----
 src/lib/bits/label/types.ts                   |  4 +-
 src/lib/bits/link-preview/_types.ts           | 10 +-
 src/lib/bits/link-preview/types.ts            | 10 +-
 src/lib/bits/menubar/_types.ts                | 10 +-
 src/lib/bits/menubar/types.ts                 | 34 +++----
 src/lib/bits/popover/_types.ts                | 10 +-
 src/lib/bits/popover/types.ts                 | 12 +--
 src/lib/bits/progress/_types.ts               | 24 +++++
 .../bits/progress/components/Progress.svelte  | 11 ++-
 src/lib/bits/progress/types.ts                | 24 +----
 src/lib/bits/radio-group/_types.ts            | 36 +++++++
 .../radio-group/components/RadioGroup.svelte  | 11 ++-
 .../components/RadioGroupInput.svelte         | 12 ++-
 .../components/RadioGroupItem.svelte          | 15 ++-
 src/lib/bits/radio-group/types.ts             | 23 +----
 src/lib/bits/select/_types.ts                 | 93 +++++++++++++++++++
 src/lib/bits/select/components/Select.svelte  |  7 +-
 .../bits/select/components/SelectArrow.svelte |  6 +-
 .../select/components/SelectContent.svelte    | 21 +++--
 .../bits/select/components/SelectGroup.svelte |  9 +-
 .../bits/select/components/SelectInput.svelte |  9 +-
 .../bits/select/components/SelectItem.svelte  | 10 +-
 .../bits/select/components/SelectLabel.svelte |  9 +-
 .../select/components/SelectTrigger.svelte    | 14 +--
 .../bits/select/components/SelectValue.svelte |  9 +-
 src/lib/bits/select/types.ts                  | 51 +++-------
 src/lib/bits/separator/_types.ts              | 11 +++
 .../separator/components/Separator.svelte     |  9 +-
 src/lib/bits/separator/types.ts               |  6 +-
 src/lib/bits/slider/_types.ts                 | 30 ++++++
 src/lib/bits/slider/components/Slider.svelte  |  8 +-
 .../bits/slider/components/SliderInput.svelte |  4 +-
 .../bits/slider/components/SliderRange.svelte |  9 +-
 .../bits/slider/components/SliderThumb.svelte |  9 +-
 .../bits/slider/components/SliderTick.svelte  |  9 +-
 src/lib/bits/slider/types.ts                  | 24 ++---
 src/lib/bits/tooltip/types.ts                 |  8 +-
 src/lib/shared/types.ts                       |  7 ++
 53 files changed, 490 insertions(+), 336 deletions(-)
 create mode 100644 src/lib/bits/progress/_types.ts
 create mode 100644 src/lib/bits/radio-group/_types.ts
 create mode 100644 src/lib/bits/select/_types.ts
 create mode 100644 src/lib/bits/separator/_types.ts
 create mode 100644 src/lib/bits/slider/_types.ts
 create mode 100644 src/lib/shared/types.ts

diff --git a/package.json b/package.json
index 7de7ffefe..78996ec5b 100644
--- a/package.json
+++ b/package.json
@@ -92,7 +92,7 @@
 	"types": "./dist/index.d.ts",
 	"type": "module",
 	"dependencies": {
-		"@melt-ui/svelte": "0.61.1",
+		"@melt-ui/svelte": "0.61.2",
 		"nanoid": "^5.0.3"
 	},
 	"peerDependencies": {
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 467900e22..2945fd3ab 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -6,8 +6,8 @@ settings:
 
 dependencies:
   '@melt-ui/svelte':
-    specifier: 0.61.1
-    version: 0.61.1(svelte@4.2.3)
+    specifier: 0.61.2
+    version: 0.61.2(svelte@4.2.3)
   nanoid:
     specifier: ^5.0.3
     version: 5.0.3
@@ -21,7 +21,7 @@ devDependencies:
     version: 0.16.5(svelte@4.2.3)
   '@melt-ui/pp':
     specifier: ^0.1.3
-    version: 0.1.3(@melt-ui/svelte@0.61.1)(svelte@4.2.3)
+    version: 0.1.3(@melt-ui/svelte@0.61.2)(svelte@4.2.3)
   '@playwright/test':
     specifier: ^1.28.1
     version: 1.36.2
@@ -1065,20 +1065,20 @@ packages:
       - supports-color
     dev: true
 
-  /@melt-ui/pp@0.1.3(@melt-ui/svelte@0.61.1)(svelte@4.2.3):
+  /@melt-ui/pp@0.1.3(@melt-ui/svelte@0.61.2)(svelte@4.2.3):
     resolution: {integrity: sha512-RuT+pmNAF3aT4lPHaQ1ojTvsV5RSZRuT/wYrCGcOAMoQwM5FdN/pEAvJUhO12ShaiTeUUYbI+dLq9eJRrgy60A==}
     engines: {pnpm: '>=8.6.3'}
     peerDependencies:
       '@melt-ui/svelte': '>= 0.29.0'
       svelte: ^3.55.0 || ^4.0.0 || ^5.0.0-next.1
     dependencies:
-      '@melt-ui/svelte': 0.61.1(svelte@4.2.3)
+      '@melt-ui/svelte': 0.61.2(svelte@4.2.3)
       estree-walker: 3.0.3
       svelte: 4.2.3
     dev: true
 
-  /@melt-ui/svelte@0.61.1(svelte@4.2.3):
-    resolution: {integrity: sha512-xG/rRK77yfzAWm0/KrB+NrJ3qzBALv7B3OoHGyLSfFXIGum+CzklxtDH8gNSuCA6ENfuPnY7pwy390+LNqvdig==}
+  /@melt-ui/svelte@0.61.2(svelte@4.2.3):
+    resolution: {integrity: sha512-BHkD9G31zQBToA4euDRBgTQRvWxT9scufOVCXgDO6HKTvyxFspbWT2bgiSFqAK4BbAGDn9Ao36Q8F9O71KN4OQ==}
     peerDependencies:
       svelte: '>=3 <5'
     dependencies:
diff --git a/src/lib/bits/accordion/types.ts b/src/lib/bits/accordion/types.ts
index ddc48b4f1..45b8afd62 100644
--- a/src/lib/bits/accordion/types.ts
+++ b/src/lib/bits/accordion/types.ts
@@ -5,21 +5,21 @@ import type {
 	AccordionHeadingProps as _HeadingProps
 } from "@melt-ui/svelte";
 import type { HTMLButtonAttributes } from "svelte/elements";
-import type * as T from "./_types.js";
+import type * as I from "./_types.js";
 
-type Props<Multiple extends boolean> = T.Props<Multiple> & HTMLDivAttributes;
+type Props<Multiple extends boolean> = I.Props<Multiple> & HTMLDivAttributes;
 
-type ItemProps = T.ItemProps & HTMLDivAttributes;
+type ItemProps = I.ItemProps & HTMLDivAttributes;
 
-type HeaderProps = T.HeaderProps & HTMLDivAttributes;
+type HeaderProps = I.HeaderProps & HTMLDivAttributes;
 
-type TriggerProps = T.TriggerProps & HTMLButtonAttributes;
+type TriggerProps = I.TriggerProps & HTMLButtonAttributes;
 
 type ContentProps<
 	T extends Transition = Transition,
 	In extends Transition = Transition,
 	Out extends Transition = Transition
-> = T.ContentProps<T, In, Out> & HTMLDivAttributes;
+> = I.ContentProps<T, In, Out> & HTMLDivAttributes;
 
 type TriggerEvents = {
 	click: CustomEventHandler<MouseEvent, HTMLButtonElement>;
diff --git a/src/lib/bits/alert-dialog/types.ts b/src/lib/bits/alert-dialog/types.ts
index 8921693c9..1e61cd0f1 100644
--- a/src/lib/bits/alert-dialog/types.ts
+++ b/src/lib/bits/alert-dialog/types.ts
@@ -1,11 +1,11 @@
 import type { HTMLDivAttributes, HTMLHeadingAttributes, Transition } from "$lib/internal/index.js";
 import type { HTMLButtonAttributes } from "svelte/elements";
 import type { CustomEventHandler } from "$lib/index.js";
-import type * as T from "./_types.js";
+import type * as I from "./_types.js";
 
-type Props = T.Props;
+type Props = I.Props;
 
-type TriggerProps = T.TriggerProps & HTMLButtonAttributes;
+type TriggerProps = I.TriggerProps & HTMLButtonAttributes;
 
 type ActionProps = TriggerProps;
 
@@ -15,13 +15,13 @@ type ContentProps<
 	T extends Transition = Transition,
 	In extends Transition = Transition,
 	Out extends Transition = Transition
-> = T.ContentProps<T, In, Out> & HTMLDivAttributes;
+> = I.ContentProps<T, In, Out> & HTMLDivAttributes;
 
-type DescriptionProps = T.DescriptionProps & HTMLDivAttributes;
+type DescriptionProps = I.DescriptionProps & HTMLDivAttributes;
 
-type PortalProps = T.PortalProps & HTMLDivAttributes;
+type PortalProps = I.PortalProps & HTMLDivAttributes;
 
-type TitleProps = T.TitleProps & HTMLHeadingAttributes;
+type TitleProps = I.TitleProps & HTMLHeadingAttributes;
 
 type TriggerEvents<T extends Element = HTMLButtonElement> = {
 	click: CustomEventHandler<MouseEvent, T>;
diff --git a/src/lib/bits/aspect-ratio/types.ts b/src/lib/bits/aspect-ratio/types.ts
index 44aef2e0a..eec27ef3d 100644
--- a/src/lib/bits/aspect-ratio/types.ts
+++ b/src/lib/bits/aspect-ratio/types.ts
@@ -1,7 +1,7 @@
 import type { HTMLDivAttributes } from "$lib/internal/index.js";
-import type * as T from "./_types.js";
+import type * as I from "./_types.js";
 
-type Props = T.Props & HTMLDivAttributes;
+type Props = I.Props & HTMLDivAttributes;
 
 export type {
 	Props,
diff --git a/src/lib/bits/avatar/types.ts b/src/lib/bits/avatar/types.ts
index 2ae0fdd8a..d3cf63451 100644
--- a/src/lib/bits/avatar/types.ts
+++ b/src/lib/bits/avatar/types.ts
@@ -1,12 +1,12 @@
 import type { HTMLDivAttributes, HTMLSpanAttributes } from "$lib/internal/index.js";
 import type { HTMLImgAttributes } from "svelte/elements";
-import type * as T from "./_types.js";
+import type * as I from "./_types.js";
 
-type Props = T.Props & HTMLDivAttributes;
+type Props = I.Props & HTMLDivAttributes;
 
-type ImageProps = T.ImageProps & HTMLImgAttributes;
+type ImageProps = I.ImageProps & HTMLImgAttributes;
 
-type FallbackProps = T.FallbackProps & HTMLSpanAttributes;
+type FallbackProps = I.FallbackProps & HTMLSpanAttributes;
 
 export type {
 	Props,
diff --git a/src/lib/bits/button/types.ts b/src/lib/bits/button/types.ts
index 2fc2e8070..3f303e94c 100644
--- a/src/lib/bits/button/types.ts
+++ b/src/lib/bits/button/types.ts
@@ -1,13 +1,13 @@
 import type { HTMLAnchorAttributes, HTMLButtonAttributes } from "svelte/elements";
-import type * as T from "./_types.js";
+import type * as I from "./_types.js";
 
-type AnchorElement = T.Props &
+type AnchorElement = I.Props &
 	HTMLAnchorAttributes & {
 		href?: HTMLAnchorAttributes["href"];
 		type?: never;
 	};
 
-type ButtonElement = T.Props &
+type ButtonElement = I.Props &
 	HTMLButtonAttributes & {
 		type?: HTMLButtonAttributes["type"];
 		href?: never;
diff --git a/src/lib/bits/checkbox/types.ts b/src/lib/bits/checkbox/types.ts
index 6d092795b..573267d43 100644
--- a/src/lib/bits/checkbox/types.ts
+++ b/src/lib/bits/checkbox/types.ts
@@ -1,11 +1,11 @@
 import type { HTMLDivAttributes } from "$lib/internal/index.js";
 import type { CustomEventHandler } from "$lib/index.js";
 import type { HTMLButtonAttributes, HTMLInputAttributes } from "svelte/elements";
-import type * as T from "./_types.js";
+import type * as I from "./_types.js";
 
-type Props = T.Props & HTMLButtonAttributes;
+type Props = I.Props & HTMLButtonAttributes;
 
-type IndicatorProps = T.IndicatorProps & HTMLDivAttributes;
+type IndicatorProps = I.IndicatorProps & HTMLDivAttributes;
 
 type InputProps = Omit<HTMLInputAttributes, "value">;
 
diff --git a/src/lib/bits/collapsible/types.ts b/src/lib/bits/collapsible/types.ts
index c4fd3fe45..724c1a1bc 100644
--- a/src/lib/bits/collapsible/types.ts
+++ b/src/lib/bits/collapsible/types.ts
@@ -1,32 +1,17 @@
-import type {
-	HTMLDivAttributes,
-	Transition,
-	OmitOpen,
-	Expand,
-	OnChangeFn,
-	AsChild,
-	TransitionProps
-} from "$lib/internal/index.js";
+import type { HTMLDivAttributes, Transition } from "$lib/internal/index.js";
 import type { CustomEventHandler } from "$lib/index.js";
-import type { CreateCollapsibleProps } from "@melt-ui/svelte";
 import type { HTMLButtonAttributes } from "svelte/elements";
+import type * as I from "./_types.js";
 
-type Props = Expand<
-	OmitOpen<CreateCollapsibleProps> & {
-		open?: boolean;
-		onOpenChange?: OnChangeFn<boolean>;
-	}
-> &
-	AsChild &
-	HTMLDivAttributes;
+type Props = I.Props & HTMLDivAttributes;
 
 type ContentProps<
 	T extends Transition = Transition,
 	In extends Transition = Transition,
 	Out extends Transition = Transition
-> = Expand<TransitionProps<T, In, Out> & AsChild> & HTMLDivAttributes;
+> = I.ContentProps<T, In, Out> & HTMLDivAttributes;
 
-type TriggerProps = AsChild & HTMLButtonAttributes;
+type TriggerProps = I.TriggerProps & HTMLButtonAttributes;
 
 type TriggerEvents = {
 	click: CustomEventHandler<MouseEvent, HTMLButtonElement>;
diff --git a/src/lib/bits/context-menu/_types.ts b/src/lib/bits/context-menu/_types.ts
index 861b8cdfb..75be22754 100644
--- a/src/lib/bits/context-menu/_types.ts
+++ b/src/lib/bits/context-menu/_types.ts
@@ -13,6 +13,7 @@ import type {
 	Transition,
 	TransitionProps
 } from "$lib/internal/index.js";
+import type { _ArrowProps } from "$lib/shared/types.js";
 import type {
 	CreateContextMenuProps,
 	CreateContextMenuRadioGroupProps,
@@ -137,16 +138,7 @@ type SubTriggerProps = Expand<
 
 type TriggerProps = AsChild;
 
-type ArrowProps = Expand<
-	{
-		/**
-		 * The size of the arrow in pixels.
-		 *
-		 * @defaultValue 8
-		 */
-		size?: number;
-	} & AsChild
->;
+type ArrowProps = _ArrowProps;
 
 export type {
 	Props,
diff --git a/src/lib/bits/context-menu/types.ts b/src/lib/bits/context-menu/types.ts
index f1382698f..c0d3b7630 100644
--- a/src/lib/bits/context-menu/types.ts
+++ b/src/lib/bits/context-menu/types.ts
@@ -1,23 +1,23 @@
 import type { HTMLDivAttributes, Transition } from "$lib/internal/index.js";
 import type { CustomEventHandler } from "$lib";
-import type * as T from "./_types.js";
 import type { HTMLAnchorAttributes } from "svelte/elements";
+import type * as I from "./_types.js";
 
-type Props = T.Props;
+type Props = I.Props;
 
-type CheckboxItemProps = T.CheckboxItemProps & HTMLDivAttributes;
+type CheckboxItemProps = I.CheckboxItemProps & HTMLDivAttributes;
 
-type RadioGroupProps = T.RadioGroupProps & HTMLDivAttributes;
+type RadioGroupProps = I.RadioGroupProps & HTMLDivAttributes;
 
-type RadioItemProps = T.RadioItemProps & HTMLDivAttributes;
+type RadioItemProps = I.RadioItemProps & HTMLDivAttributes;
 
 type ContentProps<
 	T extends Transition = Transition,
 	In extends Transition = Transition,
 	Out extends Transition = Transition
-> = T.ContentProps<T, In, Out> & HTMLDivAttributes;
+> = I.ContentProps<T, In, Out> & HTMLDivAttributes;
 
-type GroupProps = T.GroupProps & HTMLDivAttributes;
+type GroupProps = I.GroupProps & HTMLDivAttributes;
 
 type AnchorElement = HTMLAnchorAttributes & {
 	href?: HTMLAnchorAttributes["href"];
@@ -27,24 +27,24 @@ type DivElement = HTMLDivAttributes & {
 	href?: never;
 };
 
-type ItemProps = T.ItemProps & (AnchorElement | DivElement);
+type ItemProps = I.ItemProps & (AnchorElement | DivElement);
 
-type CheckboxItemIndicatorProps = T.CheckboxItemIndicatorProps & HTMLDivAttributes;
-type LabelProps = T.LabelProps & HTMLDivAttributes;
-type SeparatorProps = T.SeparatorProps & HTMLDivAttributes;
-type SubProps = T.SubProps;
+type CheckboxItemIndicatorProps = I.CheckboxItemIndicatorProps & HTMLDivAttributes;
+type LabelProps = I.LabelProps & HTMLDivAttributes;
+type SeparatorProps = I.SeparatorProps & HTMLDivAttributes;
+type SubProps = I.SubProps;
 
 type SubContentProps<
 	T extends Transition = Transition,
 	In extends Transition = Transition,
 	Out extends Transition = Transition
-> = T.SubContentProps<T, In, Out> & HTMLDivAttributes;
+> = I.SubContentProps<T, In, Out> & HTMLDivAttributes;
 
-type SubTriggerProps = T.SubTriggerProps & HTMLDivAttributes;
+type SubTriggerProps = I.SubTriggerProps & HTMLDivAttributes;
 
-type TriggerProps = T.TriggerProps & HTMLDivAttributes;
+type TriggerProps = I.TriggerProps & HTMLDivAttributes;
 
-type ArrowProps = T.ArrowProps & HTMLDivAttributes;
+type ArrowProps = I.ArrowProps & HTMLDivAttributes;
 
 type ItemEvents<T extends Element = HTMLDivElement> = {
 	click: CustomEventHandler<MouseEvent, T>;
diff --git a/src/lib/bits/dialog/components/DialogContent.svelte b/src/lib/bits/dialog/components/DialogContent.svelte
index fa5f347fc..87c401dd3 100644
--- a/src/lib/bits/dialog/components/DialogContent.svelte
+++ b/src/lib/bits/dialog/components/DialogContent.svelte
@@ -24,20 +24,24 @@
 		states: { open },
 		ids
 	} = getCtx();
+	const attrs = getAttrs("content");
 
 	$: if (id) {
 		ids.content.set(id);
 	}
 
 	$: builder = $content;
-	const attrs = getAttrs("content");
+	$: slotProps = {
+		builder,
+		attrs
+	};
 </script>
 
 {#if asChild && $open}
-	<slot {builder} {attrs} />
+	<slot {...slotProps} />
 {:else if transition && $open}
 	<div transition:transition={transitionConfig} use:melt={builder} {...$$restProps} {...attrs}>
-		<slot {builder} {attrs} />
+		<slot {...slotProps} />
 	</div>
 {:else if inTransition && outTransition && $open}
 	<div
@@ -47,18 +51,18 @@
 		{...$$restProps}
 		{...attrs}
 	>
-		<slot {builder} {attrs} />
+		<slot {...slotProps} />
 	</div>
 {:else if inTransition && $open}
 	<div in:inTransition={inTransitionConfig} use:melt={builder} {...$$restProps} {...attrs}>
-		<slot {builder} {attrs} />
+		<slot {...slotProps} />
 	</div>
 {:else if outTransition && $open}
 	<div out:outTransition={outTransitionConfig} use:melt={builder} {...$$restProps} {...attrs}>
-		<slot {builder} {attrs} />
+		<slot {...slotProps} />
 	</div>
 {:else if $open}
 	<div use:melt={builder} {...$$restProps} {...attrs}>
-		<slot {builder} {attrs} />
+		<slot {...slotProps} />
 	</div>
 {/if}
diff --git a/src/lib/bits/dialog/types.ts b/src/lib/bits/dialog/types.ts
index 8fa1d0ea1..3bdf1db27 100644
--- a/src/lib/bits/dialog/types.ts
+++ b/src/lib/bits/dialog/types.ts
@@ -1,29 +1,29 @@
 import type { HTMLDivAttributes, HTMLHeadingAttributes, Transition } from "$lib/internal/index.js";
 import type { HTMLButtonAttributes } from "svelte/elements";
 import type { CustomEventHandler } from "$lib/index.js";
-import type * as T from "./_types.js";
+import type * as I from "./_types.js";
 
-type Props = T.Props;
+type Props = I.Props;
 
-type TriggerProps = T.TriggerProps & HTMLButtonAttributes;
+type TriggerProps = I.TriggerProps & HTMLButtonAttributes;
 type CloseProps = TriggerProps;
 
 type ContentProps<
 	T extends Transition = Transition,
 	In extends Transition = Transition,
 	Out extends Transition = Transition
-> = T.ContentProps<T, In, Out> & HTMLDivAttributes;
+> = I.ContentProps<T, In, Out> & HTMLDivAttributes;
 
-type DescriptionProps = T.DescriptionProps & HTMLDivAttributes;
+type DescriptionProps = I.DescriptionProps & HTMLDivAttributes;
 
 type OverlayProps<
 	T extends Transition = Transition,
 	In extends Transition = Transition,
 	Out extends Transition = Transition
-> = T.OverlayProps<T, In, Out> & HTMLDivAttributes;
+> = I.OverlayProps<T, In, Out> & HTMLDivAttributes;
 
-type PortalProps = T.PortalProps & HTMLDivAttributes;
-type TitleProps = T.TitleProps & HTMLHeadingAttributes;
+type PortalProps = I.PortalProps & HTMLDivAttributes;
+type TitleProps = I.TitleProps & HTMLHeadingAttributes;
 
 type TriggerEvents<T extends Element = HTMLButtonElement> = {
 	click: CustomEventHandler<MouseEvent, T>;
diff --git a/src/lib/bits/dropdown-menu/_types.ts b/src/lib/bits/dropdown-menu/_types.ts
index 095067bdd..efdbbed2d 100644
--- a/src/lib/bits/dropdown-menu/_types.ts
+++ b/src/lib/bits/dropdown-menu/_types.ts
@@ -22,6 +22,7 @@ import type {
 	CreateDropdownSubmenuProps,
 	CreateDropdownMenuCheckboxItemProps
 } from "@melt-ui/svelte";
+import type { _ArrowProps } from "$lib/shared/types.js";
 
 type Props = Expand<
 	OmitOpen<OmitIds<Omit<CreateDropdownMenuProps, "arrowSize">>> & {
@@ -139,11 +140,7 @@ type SubTriggerProps = Expand<
 
 type TriggerProps = AsChild;
 
-type ArrowProps = Expand<
-	{
-		size?: number;
-	} & AsChild
->;
+type ArrowProps = _ArrowProps;
 
 type ItemEvents<T extends Element = HTMLDivElement> = {
 	click: CustomEventHandler<MouseEvent, T>;
diff --git a/src/lib/bits/dropdown-menu/types.ts b/src/lib/bits/dropdown-menu/types.ts
index c0a786f9c..2832bf6c4 100644
--- a/src/lib/bits/dropdown-menu/types.ts
+++ b/src/lib/bits/dropdown-menu/types.ts
@@ -2,23 +2,23 @@ import type { HTMLDivAttributes, Transition } from "$lib/internal/index.js";
 import type { CustomEventHandler } from "$lib/index.js";
 
 import type { HTMLAnchorAttributes, HTMLButtonAttributes } from "svelte/elements";
-import type * as T from "./_types.js";
+import type * as I from "./_types.js";
 
-type Props = T.Props;
+type Props = I.Props;
 
-type CheckboxItemProps = T.CheckboxItemProps & HTMLDivAttributes;
+type CheckboxItemProps = I.CheckboxItemProps & HTMLDivAttributes;
 
-type RadioGroupProps = T.RadioGroupProps & HTMLDivAttributes;
+type RadioGroupProps = I.RadioGroupProps & HTMLDivAttributes;
 
-type RadioItemProps = T.RadioItemProps & HTMLDivAttributes;
+type RadioItemProps = I.RadioItemProps & HTMLDivAttributes;
 
 type ContentProps<
 	T extends Transition = Transition,
 	In extends Transition = Transition,
 	Out extends Transition = Transition
-> = T.ContentProps<T, In, Out> & HTMLDivAttributes;
+> = I.ContentProps<T, In, Out> & HTMLDivAttributes;
 
-type GroupProps = T.GroupProps & HTMLDivAttributes;
+type GroupProps = I.GroupProps & HTMLDivAttributes;
 
 type AnchorElement = HTMLAnchorAttributes & {
 	href?: HTMLAnchorAttributes["href"];
@@ -28,24 +28,24 @@ type DivElement = HTMLDivAttributes & {
 	href?: never;
 };
 
-type ItemProps = T.ItemProps & (AnchorElement | DivElement);
+type ItemProps = I.ItemProps & (AnchorElement | DivElement);
 
-type CheckboxItemIndicatorProps = T.CheckboxItemIndicatorProps & HTMLDivAttributes;
-type LabelProps = T.LabelProps & HTMLDivAttributes;
-type SeparatorProps = T.SeparatorProps & HTMLDivAttributes;
-type SubProps = T.SubProps;
+type CheckboxItemIndicatorProps = I.CheckboxItemIndicatorProps & HTMLDivAttributes;
+type LabelProps = I.LabelProps & HTMLDivAttributes;
+type SeparatorProps = I.SeparatorProps & HTMLDivAttributes;
+type SubProps = I.SubProps;
 
 type SubContentProps<
 	T extends Transition = Transition,
 	In extends Transition = Transition,
 	Out extends Transition = Transition
-> = T.SubContentProps<T, In, Out> & HTMLDivAttributes;
+> = I.SubContentProps<T, In, Out> & HTMLDivAttributes;
 
-type SubTriggerProps = T.SubTriggerProps & HTMLDivAttributes;
+type SubTriggerProps = I.SubTriggerProps & HTMLDivAttributes;
 
-type TriggerProps = T.TriggerProps & HTMLButtonAttributes;
+type TriggerProps = I.TriggerProps & HTMLButtonAttributes;
 
-type ArrowProps = T.ArrowProps & HTMLDivAttributes;
+type ArrowProps = I.ArrowProps & HTMLDivAttributes;
 
 type ItemEvents<T extends Element = HTMLDivElement> = {
 	click: CustomEventHandler<MouseEvent, T>;
diff --git a/src/lib/bits/label/types.ts b/src/lib/bits/label/types.ts
index f7f55752e..0f76dcb91 100644
--- a/src/lib/bits/label/types.ts
+++ b/src/lib/bits/label/types.ts
@@ -1,8 +1,8 @@
 import type { CustomEventHandler } from "$lib";
 import type { HTMLLabelAttributes } from "svelte/elements";
-import type * as T from "./_types.js";
+import type * as I from "./_types.js";
 
-type Props = T.Props & HTMLLabelAttributes;
+type Props = I.Props & HTMLLabelAttributes;
 
 type Events<T extends Element = HTMLLabelElement> = {
 	mousedown: CustomEventHandler<MouseEvent, T>;
diff --git a/src/lib/bits/link-preview/_types.ts b/src/lib/bits/link-preview/_types.ts
index 2cee46aee..52b80321a 100644
--- a/src/lib/bits/link-preview/_types.ts
+++ b/src/lib/bits/link-preview/_types.ts
@@ -13,6 +13,7 @@ import type {
 	TransitionProps,
 	OmitIds
 } from "$lib/internal/index.js";
+import type { _ArrowProps } from "$lib/shared/types.js";
 import type { CreateLinkPreviewProps } from "@melt-ui/svelte";
 
 type Props = Expand<
@@ -40,13 +41,6 @@ type ContentProps<
 	Out extends Transition = Transition
 > = Expand<TransitionProps<T, In, Out> & AsChild>;
 
-type ArrowProps = Expand<
-	{
-		/**
-		 * The size of the arrow in pixels.
-		 */
-		size?: number;
-	} & AsChild
->;
+type ArrowProps = _ArrowProps;
 
 export type { Props, ArrowProps, TriggerProps, ContentProps };
diff --git a/src/lib/bits/link-preview/types.ts b/src/lib/bits/link-preview/types.ts
index a78b01ed6..f8bc7f13f 100644
--- a/src/lib/bits/link-preview/types.ts
+++ b/src/lib/bits/link-preview/types.ts
@@ -1,19 +1,19 @@
 import type { CustomEventHandler } from "$lib/index.js";
 import type { HTMLDivAttributes, Transition } from "$lib/internal/index.js";
 import type { HTMLAnchorAttributes } from "svelte/elements";
-import type * as T from "./_types.js";
+import type * as I from "./_types.js";
 
-type Props = T.Props;
+type Props = I.Props;
 
-type TriggerProps = T.TriggerProps & HTMLAnchorAttributes;
+type TriggerProps = I.TriggerProps & HTMLAnchorAttributes;
 
 type ContentProps<
 	T extends Transition = Transition,
 	In extends Transition = Transition,
 	Out extends Transition = Transition
-> = T.ContentProps<T, In, Out> & HTMLDivAttributes;
+> = I.ContentProps<T, In, Out> & HTMLDivAttributes;
 
-type ArrowProps = T.ArrowProps & HTMLDivAttributes;
+type ArrowProps = I.ArrowProps & HTMLDivAttributes;
 
 type TriggerEvents<T extends Element = HTMLAnchorElement> = {
 	click: CustomEventHandler<MouseEvent, T>;
diff --git a/src/lib/bits/menubar/_types.ts b/src/lib/bits/menubar/_types.ts
index 6b3360162..668a1131d 100644
--- a/src/lib/bits/menubar/_types.ts
+++ b/src/lib/bits/menubar/_types.ts
@@ -15,6 +15,7 @@ import type {
 	TransitionProps,
 	OmitIds
 } from "$lib/internal/index.js";
+import type { _ArrowProps } from "$lib/shared/types.js";
 import type {
 	CreateMenubarProps,
 	CreateMenubarMenuProps,
@@ -152,14 +153,7 @@ type SubTriggerProps = Expand<
 
 type TriggerProps = AsChild;
 
-type ArrowProps = Expand<
-	{
-		/**
-		 * The size of the arrow in pixels.
-		 */
-		size?: number;
-	} & AsChild
->;
+type ArrowProps = _ArrowProps;
 
 export type {
 	Props,
diff --git a/src/lib/bits/menubar/types.ts b/src/lib/bits/menubar/types.ts
index da00538c6..0ff0716ca 100644
--- a/src/lib/bits/menubar/types.ts
+++ b/src/lib/bits/menubar/types.ts
@@ -2,47 +2,47 @@ import type { Expand, HTMLDivAttributes, Transition } from "$lib/internal/index.
 import type { CustomEventHandler } from "$lib/index.js";
 
 import type { HTMLButtonAttributes } from "svelte/elements";
-import type * as T from "./_types.js";
+import type * as I from "./_types.js";
 
-type Props = T.Props & HTMLDivAttributes;
+type Props = I.Props & HTMLDivAttributes;
 
-type MenuProps = T.MenuProps;
+type MenuProps = I.MenuProps;
 
-type CheckboxItemProps = T.CheckboxItemProps & HTMLDivAttributes;
+type CheckboxItemProps = I.CheckboxItemProps & HTMLDivAttributes;
 
-type RadioGroupProps = T.RadioGroupProps & HTMLDivAttributes;
+type RadioGroupProps = I.RadioGroupProps & HTMLDivAttributes;
 
 type ContentProps<
 	T extends Transition = Transition,
 	In extends Transition = Transition,
 	Out extends Transition = Transition
-> = T.ContentProps<T, In, Out> & HTMLDivAttributes;
+> = I.ContentProps<T, In, Out> & HTMLDivAttributes;
 
-type GroupProps = T.GroupProps & HTMLDivAttributes;
+type GroupProps = I.GroupProps & HTMLDivAttributes;
 
-type ItemProps = T.ItemProps & HTMLDivAttributes;
+type ItemProps = I.ItemProps & HTMLDivAttributes;
 
-type CheckboxItemIndicatorProps = T.CheckboxIndicatorProps & HTMLDivAttributes;
+type CheckboxItemIndicatorProps = I.CheckboxIndicatorProps & HTMLDivAttributes;
 
-type LabelProps = T.LabelProps & HTMLDivAttributes;
+type LabelProps = I.LabelProps & HTMLDivAttributes;
 
-type RadioItemProps = T.RadioItemProps & HTMLDivAttributes;
+type RadioItemProps = I.RadioItemProps & HTMLDivAttributes;
 
-type SeparatorProps = T.SeparatorProps & HTMLDivAttributes;
+type SeparatorProps = I.SeparatorProps & HTMLDivAttributes;
 
-type SubProps = T.SubProps;
+type SubProps = I.SubProps;
 
 type SubContentProps<
 	T extends Transition = Transition,
 	In extends Transition = Transition,
 	Out extends Transition = Transition
-> = T.SubContentProps<T, In, Out> & HTMLDivAttributes;
+> = I.SubContentProps<T, In, Out> & HTMLDivAttributes;
 
-type SubTriggerProps = T.SubTriggerProps & HTMLDivAttributes;
+type SubTriggerProps = I.SubTriggerProps & HTMLDivAttributes;
 
-type TriggerProps = T.TriggerProps & HTMLButtonAttributes;
+type TriggerProps = I.TriggerProps & HTMLButtonAttributes;
 
-type ArrowProps = T.ArrowProps & HTMLDivAttributes;
+type ArrowProps = I.ArrowProps & HTMLDivAttributes;
 
 type ItemEvents<T extends Element = HTMLDivElement> = {
 	click: CustomEventHandler<PointerEvent, T>;
diff --git a/src/lib/bits/popover/_types.ts b/src/lib/bits/popover/_types.ts
index 9027e45a6..0767e41c7 100644
--- a/src/lib/bits/popover/_types.ts
+++ b/src/lib/bits/popover/_types.ts
@@ -12,6 +12,7 @@ import type {
 	TransitionProps,
 	OmitIds
 } from "$lib/internal/index.js";
+import type { _ArrowProps } from "$lib/shared/types.js";
 import type { CreatePopoverProps } from "@melt-ui/svelte";
 
 type Props = Expand<
@@ -40,13 +41,6 @@ type ContentProps<
 type TriggerProps = AsChild;
 type CloseProps = AsChild;
 
-type ArrowProps = Expand<
-	{
-		/**
-		 * The size of the arrow in pixels.
-		 */
-		size?: number;
-	} & AsChild
->;
+type ArrowProps = _ArrowProps;
 
 export type { Props, CloseProps, ArrowProps, ContentProps, TriggerProps };
diff --git a/src/lib/bits/popover/types.ts b/src/lib/bits/popover/types.ts
index 55e4b6410..f56e01e56 100644
--- a/src/lib/bits/popover/types.ts
+++ b/src/lib/bits/popover/types.ts
@@ -1,21 +1,21 @@
 import type { HTMLDivAttributes, Transition } from "$lib/internal/index.js";
 import type { CustomEventHandler } from "$lib/index.js";
 import type { HTMLButtonAttributes } from "svelte/elements";
-import type * as T from "./_types.js";
+import type * as I from "./_types.js";
 
-type Props = T.Props;
+type Props = I.Props;
 
 type ContentProps<
 	T extends Transition = Transition,
 	In extends Transition = Transition,
 	Out extends Transition = Transition
-> = T.ContentProps<T, In, Out> & HTMLDivAttributes;
+> = I.ContentProps<T, In, Out> & HTMLDivAttributes;
 
-type TriggerProps = T.TriggerProps & HTMLButtonAttributes;
+type TriggerProps = I.TriggerProps & HTMLButtonAttributes;
 
-type CloseProps = T.ContentProps & HTMLButtonAttributes;
+type CloseProps = I.ContentProps & HTMLButtonAttributes;
 
-type ArrowProps = T.ArrowProps & HTMLDivAttributes;
+type ArrowProps = I.ArrowProps & HTMLDivAttributes;
 
 type TriggerEvents<T extends Element = HTMLButtonElement> = {
 	click: CustomEventHandler<MouseEvent, T>;
diff --git a/src/lib/bits/progress/_types.ts b/src/lib/bits/progress/_types.ts
new file mode 100644
index 000000000..0ef0ae5c7
--- /dev/null
+++ b/src/lib/bits/progress/_types.ts
@@ -0,0 +1,24 @@
+/**
+ * We define prop types without the HTMLAttributes here so that we can use them
+ * to type-check our API documentation, which requires we document each prop,
+ * but we don't want to document the HTML attributes.
+ */
+import type { AsChild, Expand, OmitValue, OnChangeFn } from "$lib/internal/index.js";
+import type { CreateProgressProps } from "@melt-ui/svelte";
+
+type Props = Expand<
+	OmitValue<CreateProgressProps> & {
+		/**
+		 * The value of the progress bar.
+		 * You can bind this to a number value to programmatically control the value.
+		 */
+		value?: CreateProgressProps["defaultValue"] & {};
+
+		/**
+		 * A callback function called when the value changes.
+		 */
+		onValueChange?: OnChangeFn<number>;
+	} & AsChild
+>;
+
+export type { Props };
diff --git a/src/lib/bits/progress/components/Progress.svelte b/src/lib/bits/progress/components/Progress.svelte
index fab5bcffd..d032c3b7f 100644
--- a/src/lib/bits/progress/components/Progress.svelte
+++ b/src/lib/bits/progress/components/Progress.svelte
@@ -24,17 +24,22 @@
 		}
 	});
 
+	const attrs = getAttrs("root");
+
 	$: value !== undefined && localValue.set(value);
 	$: updateOption("max", max);
 
 	$: builder = $root;
-	const attrs = getAttrs("root");
+	$: slotProps = {
+		builder,
+		attrs
+	};
 </script>
 
 {#if asChild}
-	<slot {builder} {attrs} />
+	<slot {...slotProps} />
 {:else}
 	<div use:melt={builder} {...$$restProps} {...attrs}>
-		<slot {builder} {attrs} />
+		<slot {...slotProps} />
 	</div>
 {/if}
diff --git a/src/lib/bits/progress/types.ts b/src/lib/bits/progress/types.ts
index 0a8d301e5..60972cfca 100644
--- a/src/lib/bits/progress/types.ts
+++ b/src/lib/bits/progress/types.ts
@@ -1,26 +1,10 @@
-import type {
-	AsChild,
-	Expand,
-	HTMLDivAttributes,
-	OmitValue,
-	OnChangeFn
-} from "$lib/internal/index.js";
-import type { CreateProgressProps } from "@melt-ui/svelte";
+import type { HTMLDivAttributes } from "$lib/internal/index.js";
+import type * as I from "./_types.js";
 
-type Props = Expand<
-	OmitValue<CreateProgressProps> & {
-		value?: CreateProgressProps["defaultValue"];
-		onValueChange?: OnChangeFn<CreateProgressProps["defaultValue"]>;
-	} & AsChild
-> &
-	HTMLDivAttributes;
-
-type IndicatorProps = HTMLDivAttributes;
+type Props = I.Props & HTMLDivAttributes;
 
 export type {
 	Props,
-	IndicatorProps,
 	//
-	Props as ProgressProps,
-	IndicatorProps as ProgressIndicatorProps
+	Props as ProgressProps
 };
diff --git a/src/lib/bits/radio-group/_types.ts b/src/lib/bits/radio-group/_types.ts
new file mode 100644
index 000000000..9fb57f2da
--- /dev/null
+++ b/src/lib/bits/radio-group/_types.ts
@@ -0,0 +1,36 @@
+/**
+ * We define prop types without the HTMLAttributes here so that we can use them
+ * to type-check our API documentation, which requires we document each prop,
+ * but we don't want to document the HTML attributes.
+ */
+import type {
+	Expand,
+	OmitValue,
+	OnChangeFn,
+	ObjectVariation,
+	AsChild
+} from "$lib/internal/index.js";
+import type { CreateRadioGroupProps, RadioGroupItemProps } from "@melt-ui/svelte";
+
+type Props = Expand<
+	OmitValue<CreateRadioGroupProps> & {
+		/**
+		 * The value of the radio group.
+		 * You can bind this to a value to programmatically control the value.
+		 *
+		 * @defaultValue undefined
+		 */
+		value?: CreateRadioGroupProps["defaultValue"] & {};
+
+		/**
+		 * A callback function called when the value changes.
+		 */
+		onValueChange?: OnChangeFn<CreateRadioGroupProps["defaultValue"] & {}>;
+	} & AsChild
+>;
+
+type InputProps = AsChild;
+
+type ItemProps = Expand<ObjectVariation<RadioGroupItemProps> & AsChild>;
+
+export type { Props, InputProps, ItemProps };
diff --git a/src/lib/bits/radio-group/components/RadioGroup.svelte b/src/lib/bits/radio-group/components/RadioGroup.svelte
index 2d6f9cc75..969151680 100644
--- a/src/lib/bits/radio-group/components/RadioGroup.svelte
+++ b/src/lib/bits/radio-group/components/RadioGroup.svelte
@@ -31,6 +31,8 @@
 		}
 	});
 
+	const attrs = getAttrs("root");
+
 	$: value !== undefined && localValue.set(value);
 	$: updateOption("required", required);
 	$: updateOption("disabled", disabled);
@@ -38,13 +40,16 @@
 	$: updateOption("orientation", orientation);
 
 	$: builder = $root;
-	const attrs = getAttrs("root");
+	$: slotProps = {
+		builder,
+		attrs
+	};
 </script>
 
 {#if asChild}
-	<slot {builder} {attrs} />
+	<slot {...slotProps} />
 {:else}
 	<div use:melt={builder} {...$$restProps} {...attrs}>
-		<slot {builder} {attrs} />
+		<slot {...slotProps} />
 	</div>
 {/if}
diff --git a/src/lib/bits/radio-group/components/RadioGroupInput.svelte b/src/lib/bits/radio-group/components/RadioGroupInput.svelte
index 9d215a404..d9e4d7a25 100644
--- a/src/lib/bits/radio-group/components/RadioGroupInput.svelte
+++ b/src/lib/bits/radio-group/components/RadioGroupInput.svelte
@@ -4,16 +4,24 @@
 	import { getCtx, getAttrs } from "../ctx.js";
 
 	type $$Props = InputProps;
+
 	export let asChild: $$Props["asChild"] = false;
+
 	const {
 		elements: { hiddenInput }
 	} = getCtx();
-	$: builder = $hiddenInput;
+
 	const attrs = getAttrs("input");
+
+	$: builder = $hiddenInput;
+	$: slotProps = {
+		builder,
+		attrs
+	};
 </script>
 
 {#if asChild}
-	<slot {builder} {attrs} />
+	<slot {...slotProps} />
 {:else}
 	<input use:melt={builder} {...$$restProps} {...attrs} />
 {/if}
diff --git a/src/lib/bits/radio-group/components/RadioGroupItem.svelte b/src/lib/bits/radio-group/components/RadioGroupItem.svelte
index c3349e05f..36d0a662f 100644
--- a/src/lib/bits/radio-group/components/RadioGroupItem.svelte
+++ b/src/lib/bits/radio-group/components/RadioGroupItem.svelte
@@ -6,20 +6,27 @@
 
 	type $$Props = ItemProps;
 	type $$Events = ItemEvents;
+
 	export let value: $$Props["value"];
-	export let disabled = false;
+	export let disabled: $$Props["disabled"] = false;
 	export let asChild: $$Props["asChild"] = false;
+
 	const {
 		elements: { item }
 	} = setItemCtx(value);
+
 	const dispatch = createDispatcher();
+	const attrs = getAttrs("item");
 
 	$: builder = $item({ value, disabled });
-	const attrs = getAttrs("item");
+	$: slotProps = {
+		builder,
+		attrs
+	};
 </script>
 
 {#if asChild}
-	<slot {builder} {attrs} />
+	<slot {...slotProps} />
 {:else}
 	<button
 		use:melt={builder}
@@ -30,6 +37,6 @@
 		on:m-focus={dispatch}
 		on:m-keydown={dispatch}
 	>
-		<slot {builder} {attrs} />
+		<slot {...slotProps} />
 	</button>
 {/if}
diff --git a/src/lib/bits/radio-group/types.ts b/src/lib/bits/radio-group/types.ts
index a1c1542e4..56ed93c3e 100644
--- a/src/lib/bits/radio-group/types.ts
+++ b/src/lib/bits/radio-group/types.ts
@@ -1,26 +1,13 @@
-import type {
-	Expand,
-	HTMLDivAttributes,
-	OmitValue,
-	OnChangeFn,
-	ObjectVariation,
-	AsChild
-} from "$lib/internal/index.js";
+import type { HTMLDivAttributes } from "$lib/internal/index.js";
 import type { CustomEventHandler } from "$lib/index.js";
-import type { CreateRadioGroupProps, RadioGroupItemProps } from "@melt-ui/svelte";
 import type { HTMLButtonAttributes, HTMLInputAttributes } from "svelte/elements";
+import type * as I from "./_types.js";
 
-type Props = Expand<
-	OmitValue<CreateRadioGroupProps> & {
-		value?: CreateRadioGroupProps["defaultValue"];
-		onValueChange?: OnChangeFn<CreateRadioGroupProps["defaultValue"]>;
-	} & AsChild
-> &
-	HTMLDivAttributes;
+type Props = I.Props & HTMLDivAttributes;
 
-type InputProps = AsChild & HTMLInputAttributes;
+type InputProps = I.InputProps & HTMLInputAttributes;
 
-type ItemProps = Expand<ObjectVariation<RadioGroupItemProps> & AsChild> & HTMLButtonAttributes;
+type ItemProps = I.ItemProps & HTMLButtonAttributes;
 
 type ItemEvents<T extends Element = HTMLButtonElement> = {
 	click: CustomEventHandler<MouseEvent, T>;
diff --git a/src/lib/bits/select/_types.ts b/src/lib/bits/select/_types.ts
new file mode 100644
index 000000000..6eff42f03
--- /dev/null
+++ b/src/lib/bits/select/_types.ts
@@ -0,0 +1,93 @@
+/**
+ * We define prop types without the HTMLAttributes here so that we can use them
+ * to type-check our API documentation, which requires we document each prop,
+ * but we don't want to document the HTML attributes.
+ */
+import type { CreateSelectProps, SelectOptionProps } from "@melt-ui/svelte";
+import type {
+	AsChild,
+	Expand,
+	OmitForceVisible,
+	OmitIds,
+	OmitOpen,
+	OnChangeFn,
+	Transition,
+	TransitionProps
+} from "$lib/internal/index.js";
+import type { _ArrowProps } from "$lib/shared/types.js";
+
+type Props<T = unknown> = Expand<
+	OmitOpen<
+		OmitForceVisible<
+			OmitIds<
+				Omit<CreateSelectProps, "selected" | "defaultSelected" | "onSelectedChange" | "arrowSize">
+			>
+		>
+	> & {
+		/**
+		 * The selected value of the select.
+		 * You can bind this to a value to programmatically control the selected value.
+		 *
+		 * @defaultValue undefined
+		 */
+		selected?: CreateSelectProps["defaultSelected"] & {};
+
+		/**
+		 * A callback function called when the selected value changes.
+		 */
+		onSelectedChange?: OnChangeFn<T>;
+
+		/**
+		 * The open state of the select menu.
+		 * You can bind this to a boolean value to programmatically control the open state.
+		 *
+		 * @defaultValue false
+		 */
+		open?: boolean;
+
+		/**
+		 * A callback function called when the open state changes.
+		 */
+		onOpenChange?: OnChangeFn<boolean>;
+	}
+>;
+
+type ContentProps<
+	T extends Transition = Transition,
+	In extends Transition = Transition,
+	Out extends Transition = Transition
+> = Expand<TransitionProps<T, In, Out> & AsChild>;
+
+type GroupProps = AsChild;
+type InputProps = AsChild;
+type LabelProps = AsChild;
+type ItemProps = Expand<SelectOptionProps & AsChild>;
+type SeparatorProps = AsChild;
+
+type TriggerProps = AsChild;
+
+type ValueProps = Expand<
+	{
+		/**
+		 * The placeholder text to display when there is no value.
+		 *
+		 * @defaultValue ""
+		 */
+		placeholder?: string;
+	} & AsChild
+>;
+
+type ArrowProps = _ArrowProps;
+
+export type {
+	Props,
+	ArrowProps,
+	ContentProps,
+	GroupProps,
+	InputProps,
+	LabelProps,
+	ItemProps,
+	SeparatorProps,
+	TriggerProps,
+	ValueProps
+};
diff --git a/src/lib/bits/select/components/Select.svelte b/src/lib/bits/select/components/Select.svelte
index 180a4055a..b5a3ee3e9 100644
--- a/src/lib/bits/select/components/Select.svelte
+++ b/src/lib/bits/select/components/Select.svelte
@@ -7,7 +7,6 @@
 
 	export let required: $$Props["required"] = undefined;
 	export let disabled: $$Props["disabled"] = undefined;
-	export let arrowSize: $$Props["arrowSize"] = undefined;
 	export let preventScroll: $$Props["preventScroll"] = undefined;
 	export let loop: $$Props["loop"] = undefined;
 	export let closeOnEscape: $$Props["closeOnEscape"] = undefined;
@@ -20,7 +19,6 @@
 	export let onSelectedChange: $$Props["onSelectedChange"] = undefined;
 	export let open: $$Props["open"] = undefined;
 	export let onOpenChange: $$Props["onOpenChange"] = undefined;
-	export let forceVisible: $$Props["forceVisible"] = true;
 
 	const {
 		states: { open: localOpen, selected: localSelected },
@@ -29,7 +27,6 @@
 	} = setCtx({
 		required,
 		disabled,
-		arrowSize,
 		preventScroll,
 		loop,
 		closeOnEscape,
@@ -38,7 +35,7 @@
 		positioning,
 		name,
 		multiple,
-		forceVisible,
+		forceVisible: true,
 		defaultSelected: selected,
 		defaultOpen: open,
 		onSelectedChange: ({ next }) => {
@@ -71,7 +68,6 @@
 
 	$: updateOption("required", required);
 	$: updateOption("disabled", disabled);
-	$: updateOption("arrowSize", arrowSize);
 	$: updateOption("preventScroll", preventScroll);
 	$: updateOption("loop", loop);
 	$: updateOption("closeOnEscape", closeOnEscape);
@@ -80,7 +76,6 @@
 	$: updateOption("positioning", positioning);
 	$: updateOption("name", name);
 	$: updateOption("multiple", multiple);
-	$: updateOption("forceVisible", forceVisible);
 </script>
 
 <slot ids={$idValues} />
diff --git a/src/lib/bits/select/components/SelectArrow.svelte b/src/lib/bits/select/components/SelectArrow.svelte
index 7de0db22e..b8b1cb13b 100644
--- a/src/lib/bits/select/components/SelectArrow.svelte
+++ b/src/lib/bits/select/components/SelectArrow.svelte
@@ -12,12 +12,14 @@
 		elements: { arrow }
 	} = setArrow(size);
 
-	$: builder = $arrow;
 	const attrs = getAttrs("arrow");
+
+	$: builder = $arrow;
+	$: slotProps = { builder, attrs };
 </script>
 
 {#if asChild}
-	<slot {builder} {attrs} />
+	<slot {...slotProps} />
 {:else}
 	<div use:melt={builder} {...$$restProps} {...attrs} />
 {/if}
diff --git a/src/lib/bits/select/components/SelectContent.svelte b/src/lib/bits/select/components/SelectContent.svelte
index 2dcb13d7d..81af82f5a 100644
--- a/src/lib/bits/select/components/SelectContent.svelte
+++ b/src/lib/bits/select/components/SelectContent.svelte
@@ -18,28 +18,29 @@
 	export let inTransitionConfig: $$Props["inTransitionConfig"] = undefined;
 	export let outTransition: $$Props["outTransition"] = undefined;
 	export let outTransitionConfig: $$Props["outTransitionConfig"] = undefined;
-
 	export let asChild: $$Props["asChild"] = false;
 	export let id: $$Props["id"] = undefined;
+
 	const {
 		elements: { menu },
 		states: { open },
 		ids
 	} = getCtx();
+
 	const dispatch = createDispatcher();
-	$: builder = $menu;
+	const attrs = getAttrs("content");
 
 	$: if (id) {
 		ids.menu.set(id);
 	}
-
-	const attrs = getAttrs("content");
+	$: builder = $menu;
+	$: slotProps = { builder, attrs };
 </script>
 
 <!-- svelte-ignore a11y-no-static-element-interactions / applied by melt's builder-->
 
 {#if asChild && $open}
-	<slot {builder} {attrs} />
+	<slot {...slotProps} />
 {:else if transition && $open}
 	<div
 		transition:transition={transitionConfig}
@@ -49,7 +50,7 @@
 		on:m-pointerleave={dispatch}
 		on:keydown
 	>
-		<slot {builder} {attrs} />
+		<slot {...slotProps} />
 	</div>
 {:else if inTransition && outTransition && $open}
 	<div
@@ -61,7 +62,7 @@
 		on:m-pointerleave={dispatch}
 		on:keydown
 	>
-		<slot {builder} {attrs} />
+		<slot {...slotProps} />
 	</div>
 {:else if inTransition && $open}
 	<div
@@ -72,7 +73,7 @@
 		on:m-pointerleave={dispatch}
 		on:keydown
 	>
-		<slot {builder} {attrs} />
+		<slot {...slotProps} />
 	</div>
 {:else if outTransition && $open}
 	<div
@@ -83,10 +84,10 @@
 		on:m-pointerleave={dispatch}
 		on:keydown
 	>
-		<slot {builder} {attrs} />
+		<slot {...slotProps} />
 	</div>
 {:else if $open}
 	<div use:melt={builder} {...$$restProps} {...attrs} on:m-pointerleave={dispatch} on:keydown>
-		<slot {builder} {attrs} />
+		<slot {...slotProps} />
 	</div>
 {/if}
diff --git a/src/lib/bits/select/components/SelectGroup.svelte b/src/lib/bits/select/components/SelectGroup.svelte
index 2b113ae81..4d482b014 100644
--- a/src/lib/bits/select/components/SelectGroup.svelte
+++ b/src/lib/bits/select/components/SelectGroup.svelte
@@ -5,15 +5,18 @@
 
 	type $$Props = GroupProps;
 	export let asChild: $$Props["asChild"] = false;
+
 	const { group, id } = setGroupCtx();
-	$: builder = $group(id);
 	const attrs = getAttrs("group");
+
+	$: builder = $group(id);
+	$: slotProps = { builder, attrs };
 </script>
 
 {#if asChild}
-	<slot {builder} {attrs} />
+	<slot {...slotProps} />
 {:else}
 	<div use:melt={builder} {...$$restProps} {...attrs}>
-		<slot {builder} {attrs} />
+		<slot {...slotProps} />
 	</div>
 {/if}
diff --git a/src/lib/bits/select/components/SelectInput.svelte b/src/lib/bits/select/components/SelectInput.svelte
index 7cfbaa6bc..4f5fbb971 100644
--- a/src/lib/bits/select/components/SelectInput.svelte
+++ b/src/lib/bits/select/components/SelectInput.svelte
@@ -4,17 +4,22 @@
 	import type { InputProps } from "../types.js";
 
 	type $$Props = InputProps;
+
 	export let asChild: $$Props["asChild"] = false;
+
 	const {
 		elements: { hiddenInput },
 		options: { disabled }
 	} = getCtx();
-	$: builder = $hiddenInput;
+
 	const attrs = getAttrs("input");
+
+	$: builder = $hiddenInput;
+	$: slotProps = { builder, attrs: { ...attrs, disabled: $disabled ? true : undefined } };
 </script>
 
 {#if asChild}
-	<slot {builder} {attrs} />
+	<slot {...slotProps} />
 {:else}
 	<input use:melt={builder} {...$$restProps} {...attrs} disabled={$disabled ? true : undefined} />
 {/if}
diff --git a/src/lib/bits/select/components/SelectItem.svelte b/src/lib/bits/select/components/SelectItem.svelte
index f457e19f0..437edb37f 100644
--- a/src/lib/bits/select/components/SelectItem.svelte
+++ b/src/lib/bits/select/components/SelectItem.svelte
@@ -11,18 +11,22 @@
 	export let disabled: $$Props["disabled"] = undefined;
 	export let label: $$Props["label"] = undefined;
 	export let asChild: $$Props["asChild"] = false;
+
 	const {
 		elements: { option: item }
 	} = setItemCtx(value);
+
 	const dispatch = createDispatcher();
-	$: builder = $item({ value, disabled, label });
 	const attrs = getAttrs("item");
+
+	$: builder = $item({ value, disabled, label });
+	$: slotProps = { builder, attrs };
 </script>
 
 <!-- svelte-ignore a11y-no-static-element-interactions / applied by melt's builder-->
 
 {#if asChild}
-	<slot {builder} {attrs} />
+	<slot {...slotProps} />
 {:else}
 	<div
 		use:melt={builder}
@@ -35,7 +39,7 @@
 		on:focusout
 		on:pointerleave
 	>
-		<slot {builder} {attrs}>
+		<slot {...slotProps}>
 			{label ? label : value}
 		</slot>
 	</div>
diff --git a/src/lib/bits/select/components/SelectLabel.svelte b/src/lib/bits/select/components/SelectLabel.svelte
index 83e05dd17..92ed4b7f6 100644
--- a/src/lib/bits/select/components/SelectLabel.svelte
+++ b/src/lib/bits/select/components/SelectLabel.svelte
@@ -5,24 +5,25 @@
 
 	type $$Props = LabelProps;
 	type $$Events = LabelEvents;
+
 	export let asChild: $$Props["asChild"] = false;
 	export let id: $$Props["id"] = undefined;
 
 	const { ids } = getCtx();
 	const { groupLabel, id: groupId } = getGroupLabel();
+	const attrs = getAttrs("label");
 
 	$: if (id) {
 		ids.label.set(id);
 	}
-
 	$: builder = $groupLabel(groupId);
-	const attrs = getAttrs("label");
+	$: slotProps = { builder, attrs };
 </script>
 
 {#if asChild}
-	<slot {builder} {attrs} />
+	<slot {...slotProps} />
 {:else}
 	<div use:melt={builder} {...$$restProps} {...attrs}>
-		<slot {builder} {attrs} />
+		<slot {...slotProps} />
 	</div>
 {/if}
diff --git a/src/lib/bits/select/components/SelectTrigger.svelte b/src/lib/bits/select/components/SelectTrigger.svelte
index e27ac3cf5..de4ec7d92 100644
--- a/src/lib/bits/select/components/SelectTrigger.svelte
+++ b/src/lib/bits/select/components/SelectTrigger.svelte
@@ -6,25 +6,27 @@
 
 	type $$Props = TriggerProps;
 	type $$Events = TriggerEvents;
+
 	export let asChild: $$Props["asChild"] = false;
+	export let id: $$Props["id"] = undefined;
+
 	const {
 		elements: { trigger },
 		ids
 	} = getCtx();
 
-	export let id: $$Props["id"] = undefined;
+	const dispatch = createDispatcher();
+	const attrs = getAttrs("trigger");
 
 	$: if (id) {
 		ids.trigger.set(id);
 	}
-
-	const dispatch = createDispatcher();
 	$: builder = $trigger;
-	const attrs = getAttrs("trigger");
+	$: slotProps = { builder, attrs };
 </script>
 
 {#if asChild}
-	<slot {builder} {attrs} />
+	<slot {...slotProps} />
 {:else}
 	<button
 		use:melt={builder}
@@ -34,6 +36,6 @@
 		on:m-click={dispatch}
 		on:m-keydown={dispatch}
 	>
-		<slot {builder} {attrs} />
+		<slot {...slotProps} />
 	</button>
 {/if}
diff --git a/src/lib/bits/select/components/SelectValue.svelte b/src/lib/bits/select/components/SelectValue.svelte
index 9371261c3..c30bce1e4 100644
--- a/src/lib/bits/select/components/SelectValue.svelte
+++ b/src/lib/bits/select/components/SelectValue.svelte
@@ -3,18 +3,21 @@
 	import type { ValueProps } from "../types.js";
 
 	type $$Props = ValueProps;
-	export let placeholder = "";
+
+	export let placeholder: $$Props["placeholder"] = "";
 	export let asChild: $$Props["asChild"] = false;
+
 	const {
 		states: { selectedLabel }
 	} = getCtx();
+	const attrs = getAttrs("value");
 
 	$: label = $selectedLabel;
-	const attrs = getAttrs("value");
+	$: slotProps = { label, attrs };
 </script>
 
 {#if asChild}
-	<slot {label} {attrs} />
+	<slot {...slotProps} />
 {:else}
 	<span {...$$restProps} {...attrs}>
 		{label ? label : placeholder}
diff --git a/src/lib/bits/select/types.ts b/src/lib/bits/select/types.ts
index d72fee1e2..fcf735e8f 100644
--- a/src/lib/bits/select/types.ts
+++ b/src/lib/bits/select/types.ts
@@ -1,13 +1,4 @@
-import type { CreateSelectProps, SelectOptionProps } from "@melt-ui/svelte";
-import type {
-	AsChild,
-	Expand,
-	HTMLDivAttributes,
-	OmitOpen,
-	OnChangeFn,
-	Transition,
-	TransitionProps
-} from "$lib/internal/index.js";
+import type { HTMLDivAttributes, Transition } from "$lib/internal/index.js";
 import type {
 	EventHandler,
 	HTMLAttributes,
@@ -15,43 +6,27 @@ import type {
 	HTMLInputAttributes
 } from "svelte/elements";
 import type { CustomEventHandler } from "$lib/index.js";
+import type { _ArrowProps } from "$lib/shared/types.js";
+import type * as I from "./_types.js";
 
-type Props = Expand<
-	OmitOpen<Omit<CreateSelectProps, "selected" | "defaultSelected" | "onSelectedChange">> & {
-		selected?: CreateSelectProps["defaultSelected"] & {};
-		onSelectedChange?: OnChangeFn<CreateSelectProps["defaultSelected"]>;
-		open?: boolean & {};
-		onOpenChange?: OnChangeFn<boolean>;
-	}
->;
+type Props<T = unknown> = I.Props<T>;
 
 type ContentProps<
 	T extends Transition = Transition,
 	In extends Transition = Transition,
 	Out extends Transition = Transition
-> = Expand<TransitionProps<T, In, Out> & AsChild> & HTMLDivAttributes;
-
-type GroupProps = AsChild & HTMLDivAttributes;
-type InputProps = AsChild & HTMLInputAttributes;
-type LabelProps = AsChild & HTMLDivAttributes;
-type ItemProps = Expand<SelectOptionProps & AsChild> & HTMLDivAttributes;
-type SeparatorProps = AsChild & HTMLDivAttributes;
+> = I.ContentProps<T, In, Out> & HTMLDivAttributes;
 
-type TriggerProps = AsChild & HTMLButtonAttributes;
+type GroupProps = I.GroupProps & HTMLDivAttributes;
+type InputProps = I.InputProps & HTMLInputAttributes;
+type LabelProps = I.LabelProps & HTMLDivAttributes;
+type ItemProps = I.ItemProps & HTMLDivAttributes;
+type SeparatorProps = I.SeparatorProps & HTMLDivAttributes;
+type TriggerProps = I.TriggerProps & HTMLButtonAttributes;
 
-type ValueProps = Expand<
-	{
-		placeholder?: string;
-	} & AsChild
-> &
-	HTMLAttributes<HTMLSpanElement>;
+type ValueProps = I.ValueProps & HTMLAttributes<HTMLSpanElement>;
 
-type ArrowProps = Expand<
-	{
-		size?: number;
-	} & AsChild
-> &
-	HTMLDivAttributes;
+type ArrowProps = I.ArrowProps & HTMLDivAttributes;
 
 type ItemEvents<T extends Element = HTMLDivElement> = {
 	click: CustomEventHandler<MouseEvent, T>;
diff --git a/src/lib/bits/separator/_types.ts b/src/lib/bits/separator/_types.ts
new file mode 100644
index 000000000..cb0fb1e56
--- /dev/null
+++ b/src/lib/bits/separator/_types.ts
@@ -0,0 +1,11 @@
+/**
+ * We define prop types without the HTMLAttributes here so that we can use them
+ * to type-check our API documentation, which requires we document each prop,
+ * but we don't want to document the HTML attributes.
+ */
+import type { AsChild, Expand } from "$lib/internal/index.js";
+import type { CreateSeparatorProps } from "@melt-ui/svelte";
+
+type Props = Expand<CreateSeparatorProps & AsChild>;
+
+export type { Props };
diff --git a/src/lib/bits/separator/components/Separator.svelte b/src/lib/bits/separator/components/Separator.svelte
index 72ebf21ff..001b2a9e7 100644
--- a/src/lib/bits/separator/components/Separator.svelte
+++ b/src/lib/bits/separator/components/Separator.svelte
@@ -4,8 +4,9 @@
 	import type { Props } from "../types.js";
 
 	type $$Props = Props;
+
 	export let orientation: $$Props["orientation"] = "horizontal";
-	export let decorative = true;
+	export let decorative: $$Props["decorative"] = true;
 	export let asChild: $$Props["asChild"] = false;
 
 	const {
@@ -13,15 +14,17 @@
 		updateOption
 	} = setCtx({ orientation, decorative });
 
+	const attrs = getAttrs("root");
+
 	$: updateOption("orientation", orientation);
 	$: updateOption("decorative", decorative);
 
 	$: builder = $root;
-	const attrs = getAttrs("root");
+	$: slotProps = { builder, attrs };
 </script>
 
 {#if asChild}
-	<slot {builder} {attrs} />
+	<slot {...slotProps} />
 {:else}
 	<div use:melt={builder} {...$$restProps} {...attrs} />
 {/if}
diff --git a/src/lib/bits/separator/types.ts b/src/lib/bits/separator/types.ts
index 04d3cd595..61c5ac407 100644
--- a/src/lib/bits/separator/types.ts
+++ b/src/lib/bits/separator/types.ts
@@ -1,7 +1,7 @@
-import type { AsChild, Expand, HTMLDivAttributes } from "$lib/internal/index.js";
-import type { CreateSeparatorProps } from "@melt-ui/svelte";
+import type { HTMLDivAttributes } from "$lib/internal/index.js";
+import type * as I from "./_types.js";
 
-type Props = Expand<CreateSeparatorProps & AsChild> & HTMLDivAttributes;
+type Props = I.Props & HTMLDivAttributes;
 
 export type {
 	Props,
diff --git a/src/lib/bits/slider/_types.ts b/src/lib/bits/slider/_types.ts
new file mode 100644
index 000000000..b19f8f976
--- /dev/null
+++ b/src/lib/bits/slider/_types.ts
@@ -0,0 +1,30 @@
+/**
+ * We define prop types without the HTMLAttributes here so that we can use them
+ * to type-check our API documentation, which requires we document each prop,
+ * but we don't want to document the HTML attributes.
+ */
+import type { CreateSliderProps } from "@melt-ui/svelte";
+import type { Expand, OmitValue, OnChangeFn, AsChild } from "$lib/internal/index.js";
+
+type Props = Expand<
+	OmitValue<CreateSliderProps> & {
+		/**
+		 * The value of the slider.
+		 * You can bind this to a number value to programmatically control the value.
+		 */
+		value?: number[];
+
+		/**
+		 * A callback function called when the value changes.
+		 */
+		onValueChange?: OnChangeFn<number[]>;
+	} & AsChild
+>;
+
+type RangeProps = AsChild;
+
+type ThumbProps = AsChild;
+
+type TickProps = AsChild;
+
+export type { Props, RangeProps, ThumbProps, TickProps };
diff --git a/src/lib/bits/slider/components/Slider.svelte b/src/lib/bits/slider/components/Slider.svelte
index 037fd3f22..5966cf903 100644
--- a/src/lib/bits/slider/components/Slider.svelte
+++ b/src/lib/bits/slider/components/Slider.svelte
@@ -34,6 +34,8 @@
 		}
 	});
 
+	const attrs = getAttrs("root");
+
 	$: value !== undefined && localValue.set(value);
 	$: updateOption("disabled", disabled);
 	$: updateOption("min", min);
@@ -42,13 +44,13 @@
 	$: updateOption("orientation", orientation);
 
 	$: builder = $root;
-	const attrs = getAttrs("root");
+	$: slotProps = { builder, attrs, ticks: $ticks };
 </script>
 
 {#if asChild}
-	<slot {builder} {attrs} ticks={$ticks} />
+	<slot {...slotProps} />
 {:else}
 	<span use:melt={builder} {...$$restProps} {...attrs}>
-		<slot {builder} {attrs} ticks={$ticks} />
+		<slot {...slotProps} />
 	</span>
 {/if}
diff --git a/src/lib/bits/slider/components/SliderInput.svelte b/src/lib/bits/slider/components/SliderInput.svelte
index 5e1b80646..b15d649dc 100644
--- a/src/lib/bits/slider/components/SliderInput.svelte
+++ b/src/lib/bits/slider/components/SliderInput.svelte
@@ -3,6 +3,7 @@
 	import type { InputProps } from "../types.js";
 
 	type $$Props = InputProps;
+
 	const {
 		states: { value }
 	} = getCtx();
@@ -14,8 +15,9 @@
 			return value[1] - value[0];
 		}
 	}
-	$: inputValue = getValue($value);
 	const attrs = getAttrs("input");
+
+	$: inputValue = getValue($value);
 </script>
 
 <input {...$$restProps} value={inputValue} hidden {...attrs} />
diff --git a/src/lib/bits/slider/components/SliderRange.svelte b/src/lib/bits/slider/components/SliderRange.svelte
index 040df681f..e3a549d6b 100644
--- a/src/lib/bits/slider/components/SliderRange.svelte
+++ b/src/lib/bits/slider/components/SliderRange.svelte
@@ -4,16 +4,21 @@
 	import type { RangeProps } from "../types.js";
 
 	type $$Props = RangeProps;
+
 	export let asChild: $$Props["asChild"] = false;
+
 	const {
 		elements: { range }
 	} = getCtx();
-	$: builder = $range;
+
 	const attrs = getAttrs("range");
+
+	$: builder = $range;
+	$: slotProps = { builder, attrs };
 </script>
 
 {#if asChild}
-	<slot {builder} {attrs} />
+	<slot {...slotProps} />
 {:else}
 	<span use:melt={builder} {...$$restProps} {...attrs} />
 {/if}
diff --git a/src/lib/bits/slider/components/SliderThumb.svelte b/src/lib/bits/slider/components/SliderThumb.svelte
index 60e93e5f5..443e9ca17 100644
--- a/src/lib/bits/slider/components/SliderThumb.svelte
+++ b/src/lib/bits/slider/components/SliderThumb.svelte
@@ -6,17 +6,22 @@
 
 	type $$Props = ThumbProps;
 	type $$Events = ThumbEvents;
+
 	export let asChild: $$Props["asChild"] = false;
+
 	const {
 		elements: { thumb }
 	} = getCtx();
+
 	const dispatch = createDispatcher();
-	$: builder = $thumb();
 	const attrs = getAttrs("thumb");
+
+	$: builder = $thumb();
+	$: slotProps = { builder, attrs };
 </script>
 
 {#if asChild}
-	<slot {builder} {attrs} />
+	<slot {...slotProps} />
 {:else}
 	<span use:melt={builder} {...$$restProps} {...attrs} on:m-keydown={dispatch} />
 {/if}
diff --git a/src/lib/bits/slider/components/SliderTick.svelte b/src/lib/bits/slider/components/SliderTick.svelte
index d0d68e3e4..19e4d3b0c 100644
--- a/src/lib/bits/slider/components/SliderTick.svelte
+++ b/src/lib/bits/slider/components/SliderTick.svelte
@@ -4,16 +4,21 @@
 	import type { TickProps } from "../types.js";
 
 	type $$Props = TickProps;
+
 	export let asChild: $$Props["asChild"] = false;
+
 	const {
 		elements: { tick }
 	} = getCtx();
-	$: builder = $tick();
+
 	const attrs = getAttrs("tick");
+
+	$: builder = $tick();
+	$: slotProps = { builder, attrs };
 </script>
 
 {#if asChild}
-	<slot {builder} {attrs} />
+	<slot {...slotProps} />
 {:else}
 	<span use:melt={builder} {...$$restProps} {...attrs} />
 {/if}
diff --git a/src/lib/bits/slider/types.ts b/src/lib/bits/slider/types.ts
index 5b70fe1a7..ae3bf04a6 100644
--- a/src/lib/bits/slider/types.ts
+++ b/src/lib/bits/slider/types.ts
@@ -1,27 +1,15 @@
-import type { CreateSliderProps } from "@melt-ui/svelte";
-import type {
-	Expand,
-	OmitValue,
-	HTMLSpanAttributes,
-	OnChangeFn,
-	AsChild
-} from "$lib/internal/index.js";
+import type { HTMLSpanAttributes } from "$lib/internal/index.js";
 import type { CustomEventHandler } from "$lib/index.js";
 import type { HTMLInputAttributes } from "svelte/elements";
+import type * as I from "./_types.js";
 
-type Props = Expand<
-	OmitValue<CreateSliderProps> & {
-		value?: number[];
-		onValueChange?: OnChangeFn<number[]>;
-	} & AsChild
-> &
-	HTMLSpanAttributes;
+type Props = I.Props & HTMLSpanAttributes;
 
-type RangeProps = AsChild & HTMLSpanAttributes;
+type RangeProps = I.RangeProps & HTMLSpanAttributes;
 
-type ThumbProps = AsChild & HTMLSpanAttributes;
+type ThumbProps = I.ThumbProps & HTMLSpanAttributes;
 
-type TickProps = AsChild & HTMLSpanAttributes;
+type TickProps = I.TickProps & HTMLSpanAttributes;
 
 type ThumbEvents<T extends Element = HTMLSpanElement> = {
 	keydown: CustomEventHandler<KeyboardEvent, T>;
diff --git a/src/lib/bits/tooltip/types.ts b/src/lib/bits/tooltip/types.ts
index fef82ded9..046aa1acc 100644
--- a/src/lib/bits/tooltip/types.ts
+++ b/src/lib/bits/tooltip/types.ts
@@ -10,6 +10,7 @@ import type {
 } from "$lib/internal/index.js";
 import type { HTMLButtonAttributes } from "svelte/elements";
 import type { CustomEventHandler } from "$lib";
+import type { _ArrowProps } from "$lib/shared/types.js";
 
 type Props = Expand<
 	OmitOpen<CreateTooltipProps> & {
@@ -31,12 +32,7 @@ type ContentProps<
 	HTMLDivAttributes;
 
 type TriggerProps = AsChild & HTMLButtonAttributes;
-type ArrowProps = Expand<
-	{
-		size?: number;
-	} & AsChild
-> &
-	HTMLDivAttributes;
+type ArrowProps = _ArrowProps & HTMLDivAttributes;
 
 type TriggerEvents<T extends Element = HTMLButtonElement> = {
 	blur: CustomEventHandler<FocusEvent, T>;
diff --git a/src/lib/shared/types.ts b/src/lib/shared/types.ts
new file mode 100644
index 000000000..3d82a515a
--- /dev/null
+++ b/src/lib/shared/types.ts
@@ -0,0 +1,7 @@
+import type { AsChild } from "$lib/internal/index.js";
+
+export type _ArrowProps = Expand<
+	{
+		size?: number;
+	} & AsChild
+>;

From 62365b22fd4da37ad634de121e33a892624d344d Mon Sep 17 00:00:00 2001
From: Hunter Johnston <johnstonhuntera@gmail.com>
Date: Thu, 16 Nov 2023 10:35:44 -0500
Subject: [PATCH 023/217] more type work

---
 src/lib/bits/context-menu/_types.ts           | 19 +-----
 src/lib/bits/dropdown-menu/_types.ts          | 19 +-----
 src/lib/bits/link-preview/_types.ts           | 27 +++------
 src/lib/bits/menu/types.ts                    | 17 ++++++
 src/lib/bits/menubar/_types.ts                | 34 ++---------
 src/lib/bits/popover/_types.ts                | 30 ++++------
 src/lib/bits/select/_types.ts                 | 33 ++---------
 src/lib/bits/select/types.ts                  |  1 -
 src/lib/bits/switch/_types.ts                 | 41 +++++++++++++
 src/lib/bits/switch/components/Switch.svelte  |  5 +-
 .../bits/switch/components/SwitchThumb.svelte |  6 +-
 src/lib/bits/switch/types.ts                  | 31 ++--------
 src/lib/bits/tabs/_types.ts                   | 48 +++++++++++++++
 src/lib/bits/tabs/components/Tabs.svelte      |  3 +-
 .../bits/tabs/components/TabsContent.svelte   |  4 +-
 src/lib/bits/tabs/components/TabsList.svelte  |  5 +-
 .../bits/tabs/components/TabsTrigger.svelte   |  4 +-
 src/lib/bits/tabs/types.ts                    | 31 ++--------
 src/lib/bits/toggle-group/_types.ts           | 55 +++++++++++++++++
 .../components/ToggleGroup.svelte             | 14 +++--
 .../components/ToggleGroupItem.svelte         |  7 ++-
 src/lib/bits/toggle-group/types.ts            | 26 ++------
 src/lib/bits/toggle/_types.ts                 | 30 ++++++++++
 src/lib/bits/toggle/components/Toggle.svelte  |  9 ++-
 src/lib/bits/toggle/types.ts                  | 11 +---
 src/lib/bits/tooltip/_types.ts                | 59 +++++++++++++++++++
 .../bits/tooltip/components/Tooltip.svelte    |  8 +--
 .../tooltip/components/TooltipArrow.svelte    |  7 ++-
 .../tooltip/components/TooltipContent.svelte  | 17 +++---
 .../tooltip/components/TooltipTrigger.svelte  |  9 +--
 src/lib/bits/tooltip/types.ts                 | 33 +++--------
 src/lib/internal/types.ts                     |  2 +
 src/lib/shared/floating.ts                    | 13 ++++
 src/lib/shared/index.ts                       |  7 +++
 src/lib/shared/menu.ts                        | 12 ++++
 src/lib/shared/types.ts                       |  7 ---
 36 files changed, 401 insertions(+), 283 deletions(-)
 create mode 100644 src/lib/bits/menu/types.ts
 create mode 100644 src/lib/bits/switch/_types.ts
 create mode 100644 src/lib/bits/tabs/_types.ts
 create mode 100644 src/lib/bits/toggle-group/_types.ts
 create mode 100644 src/lib/bits/toggle/_types.ts
 create mode 100644 src/lib/bits/tooltip/_types.ts
 create mode 100644 src/lib/shared/floating.ts
 create mode 100644 src/lib/shared/index.ts
 create mode 100644 src/lib/shared/menu.ts
 delete mode 100644 src/lib/shared/types.ts

diff --git a/src/lib/bits/context-menu/_types.ts b/src/lib/bits/context-menu/_types.ts
index 75be22754..1cccc53c5 100644
--- a/src/lib/bits/context-menu/_types.ts
+++ b/src/lib/bits/context-menu/_types.ts
@@ -13,7 +13,7 @@ import type {
 	Transition,
 	TransitionProps
 } from "$lib/internal/index.js";
-import type { _ArrowProps } from "$lib/shared/types.js";
+import type { FloatingArrowProps, MenuContentProps } from "$lib/shared/index.js";
 import type {
 	CreateContextMenuProps,
 	CreateContextMenuRadioGroupProps,
@@ -74,17 +74,6 @@ type RadioGroupProps = Expand<
 
 type RadioItemProps = Expand<ContextMenuRadioItemProps & AsChild>;
 
-type ContentProps<
-	T extends Transition = Transition,
-	In extends Transition = Transition,
-	Out extends Transition = Transition
-> = Expand<
-	{
-		sideOffset?: number;
-	} & TransitionProps<T, In, Out> &
-		AsChild
->;
-
 type GroupProps = AsChild;
 
 type ItemProps = Expand<
@@ -138,13 +127,11 @@ type SubTriggerProps = Expand<
 
 type TriggerProps = AsChild;
 
-type ArrowProps = _ArrowProps;
-
 export type {
 	Props,
-	ArrowProps,
+	FloatingArrowProps as ArrowProps,
 	CheckboxItemProps,
-	ContentProps,
+	MenuContentProps as ContentProps,
 	GroupProps,
 	ItemProps,
 	CheckboxItemIndicatorProps,
diff --git a/src/lib/bits/dropdown-menu/_types.ts b/src/lib/bits/dropdown-menu/_types.ts
index efdbbed2d..4a0e5ce8d 100644
--- a/src/lib/bits/dropdown-menu/_types.ts
+++ b/src/lib/bits/dropdown-menu/_types.ts
@@ -22,7 +22,7 @@ import type {
 	CreateDropdownSubmenuProps,
 	CreateDropdownMenuCheckboxItemProps
 } from "@melt-ui/svelte";
-import type { _ArrowProps } from "$lib/shared/types.js";
+import type { FloatingArrowProps, MenuContentProps } from "$lib/shared/index.js";
 
 type Props = Expand<
 	OmitOpen<OmitIds<Omit<CreateDropdownMenuProps, "arrowSize">>> & {
@@ -77,17 +77,6 @@ type RadioGroupProps = Expand<
 
 type RadioItemProps = Expand<DropdownMenuRadioItemProps & AsChild>;
 
-type ContentProps<
-	T extends Transition = Transition,
-	In extends Transition = Transition,
-	Out extends Transition = Transition
-> = Expand<
-	{
-		sideOffset?: number;
-	} & TransitionProps<T, In, Out> &
-		AsChild
->;
-
 type GroupProps = AsChild;
 
 type ItemProps = Expand<
@@ -140,8 +129,6 @@ type SubTriggerProps = Expand<
 
 type TriggerProps = AsChild;
 
-type ArrowProps = _ArrowProps;
-
 type ItemEvents<T extends Element = HTMLDivElement> = {
 	click: CustomEventHandler<MouseEvent, T>;
 	keydown: CustomEventHandler<KeyboardEvent, T>;
@@ -153,10 +140,10 @@ type ItemEvents<T extends Element = HTMLDivElement> = {
 };
 
 export type {
-	ArrowProps,
+	FloatingArrowProps as ArrowProps,
+	MenuContentProps as ContentProps,
 	CheckboxItemIndicatorProps,
 	CheckboxItemProps,
-	ContentProps,
 	GroupProps,
 	ItemEvents,
 	ItemProps,
diff --git a/src/lib/bits/link-preview/_types.ts b/src/lib/bits/link-preview/_types.ts
index 52b80321a..2a6ccb216 100644
--- a/src/lib/bits/link-preview/_types.ts
+++ b/src/lib/bits/link-preview/_types.ts
@@ -4,16 +4,8 @@
  * but we don't want to document the HTML attributes.
  */
 
-import type {
-	OmitOpen,
-	Expand,
-	OnChangeFn,
-	Transition,
-	AsChild,
-	TransitionProps,
-	OmitIds
-} from "$lib/internal/index.js";
-import type { _ArrowProps } from "$lib/shared/types.js";
+import type { OmitOpen, Expand, OnChangeFn, AsChild, OmitIds } from "$lib/internal/index.js";
+import type { FloatingArrowProps, FloatingContentProps } from "$lib/shared/index.js";
 import type { CreateLinkPreviewProps } from "@melt-ui/svelte";
 
 type Props = Expand<
@@ -35,12 +27,9 @@ type Props = Expand<
 
 type TriggerProps = AsChild;
 
-type ContentProps<
-	T extends Transition = Transition,
-	In extends Transition = Transition,
-	Out extends Transition = Transition
-> = Expand<TransitionProps<T, In, Out> & AsChild>;
-
-type ArrowProps = _ArrowProps;
-
-export type { Props, ArrowProps, TriggerProps, ContentProps };
+export type {
+	Props,
+	FloatingArrowProps as ArrowProps,
+	FloatingContentProps as ContentProps,
+	TriggerProps
+};
diff --git a/src/lib/bits/menu/types.ts b/src/lib/bits/menu/types.ts
new file mode 100644
index 000000000..591dbcd0d
--- /dev/null
+++ b/src/lib/bits/menu/types.ts
@@ -0,0 +1,17 @@
+/**
+ * These types are shared between the various menu components,
+ * such as `DropdownMenu`, `Menubar` & `ContextMenu`.
+ */
+
+import type { AsChild, Transition, TransitionProps } from "$lib/internal/index.js";
+
+export type ContentProps<
+	T extends Transition = Transition,
+	In extends Transition = Transition,
+	Out extends Transition = Transition
+> = Expand<
+	{
+		sideOffset?: number;
+	} & TransitionProps<T, In, Out> &
+		AsChild
+>;
diff --git a/src/lib/bits/menubar/_types.ts b/src/lib/bits/menubar/_types.ts
index 668a1131d..106ff6f0d 100644
--- a/src/lib/bits/menubar/_types.ts
+++ b/src/lib/bits/menubar/_types.ts
@@ -11,11 +11,9 @@ import type {
 	OmitOpen,
 	OmitValue,
 	OnChangeFn,
-	Transition,
-	TransitionProps,
 	OmitIds
 } from "$lib/internal/index.js";
-import type { _ArrowProps } from "$lib/shared/types.js";
+import type { FloatingArrowProps, MenuContentProps } from "$lib/shared/index.js";
 import type {
 	CreateMenubarProps,
 	CreateMenubarMenuProps,
@@ -85,17 +83,6 @@ type RadioGroupProps = Expand<
 	} & AsChild
 >;
 
-type ContentProps<
-	T extends Transition = Transition,
-	In extends Transition = Transition,
-	Out extends Transition = Transition
-> = Expand<
-	{
-		sideOffset?: number;
-	} & TransitionProps<T, In, Out> &
-		AsChild
->;
-
 type GroupProps = AsChild;
 
 type ItemProps = Expand<
@@ -134,17 +121,6 @@ type SubProps = Expand<
 	}
 >;
 
-type SubContentProps<
-	T extends Transition = Transition,
-	In extends Transition = Transition,
-	Out extends Transition = Transition
-> = Expand<
-	{
-		sideOffset?: number;
-	} & TransitionProps<T, In, Out> &
-		AsChild
->;
-
 type SubTriggerProps = Expand<
 	{
 		disabled?: boolean;
@@ -153,22 +129,20 @@ type SubTriggerProps = Expand<
 
 type TriggerProps = AsChild;
 
-type ArrowProps = _ArrowProps;
-
 export type {
 	Props,
 	SubProps,
 	MenuProps,
 	ItemProps,
-	ArrowProps,
+	FloatingArrowProps as ArrowProps,
 	GroupProps,
 	LabelProps,
 	TriggerProps,
-	ContentProps,
+	MenuContentProps as ContentProps,
 	RadioItemProps,
 	SeparatorProps,
 	RadioGroupProps,
-	SubContentProps,
+	MenuContentProps as SubContentProps,
 	SubTriggerProps,
 	CheckboxItemProps,
 	CheckboxIndicatorProps
diff --git a/src/lib/bits/popover/_types.ts b/src/lib/bits/popover/_types.ts
index 0767e41c7..679b77253 100644
--- a/src/lib/bits/popover/_types.ts
+++ b/src/lib/bits/popover/_types.ts
@@ -3,20 +3,12 @@
  * to type-check our API documentation, which requires we document each prop,
  * but we don't want to document the HTML attributes.
  */
-import type {
-	OmitOpen,
-	Expand,
-	Transition,
-	OnChangeFn,
-	AsChild,
-	TransitionProps,
-	OmitIds
-} from "$lib/internal/index.js";
-import type { _ArrowProps } from "$lib/shared/types.js";
+import type { Expand, OnChangeFn, AsChild, OmitFloating } from "$lib/internal/index.js";
+import type { FloatingArrowProps, FloatingContentProps } from "$lib/shared/index.js";
 import type { CreatePopoverProps } from "@melt-ui/svelte";
 
 type Props = Expand<
-	OmitOpen<OmitIds<Omit<CreatePopoverProps, "arrowSize">>> & {
+	OmitFloating<CreatePopoverProps> & {
 		/**
 		 * The open state of the popover.
 		 * You can bind this to a boolean value to programmatically control the open state.
@@ -32,15 +24,13 @@ type Props = Expand<
 	}
 >;
 
-type ContentProps<
-	T extends Transition = Transition,
-	In extends Transition = Transition,
-	Out extends Transition = Transition
-> = Expand<TransitionProps<T, In, Out> & AsChild>;
-
 type TriggerProps = AsChild;
 type CloseProps = AsChild;
 
-type ArrowProps = _ArrowProps;
-
-export type { Props, CloseProps, ArrowProps, ContentProps, TriggerProps };
+export type {
+	Props,
+	CloseProps,
+	FloatingArrowProps as ArrowProps,
+	FloatingContentProps as ContentProps,
+	TriggerProps
+};
diff --git a/src/lib/bits/select/_types.ts b/src/lib/bits/select/_types.ts
index 6eff42f03..8a5bb351a 100644
--- a/src/lib/bits/select/_types.ts
+++ b/src/lib/bits/select/_types.ts
@@ -4,26 +4,11 @@
  * but we don't want to document the HTML attributes.
  */
 import type { CreateSelectProps, SelectOptionProps } from "@melt-ui/svelte";
-import type {
-	AsChild,
-	Expand,
-	OmitForceVisible,
-	OmitIds,
-	OmitOpen,
-	OnChangeFn,
-	Transition,
-	TransitionProps
-} from "$lib/internal/index.js";
-import type { _ArrowProps } from "$lib/shared/types.js";
+import type { AsChild, Expand, OmitFloating, OnChangeFn } from "$lib/internal/index.js";
+import type { FloatingArrowProps, FloatingContentProps } from "$lib/shared/index.js";
 
 type Props<T = unknown> = Expand<
-	OmitOpen<
-		OmitForceVisible<
-			OmitIds<
-				Omit<CreateSelectProps, "selected" | "defaultSelected" | "onSelectedChange" | "arrowSize">
-			>
-		>
-	> & {
+	OmitFloating<Omit<CreateSelectProps, "selected" | "defaultSelected" | "onSelectedChange">> & {
 		/**
 		 * The selected value of the select.
 		 * You can bind this to a value to programmatically control the selected value.
@@ -52,12 +37,6 @@ type Props<T = unknown> = Expand<
 	}
 >;
 
-type ContentProps<
-	T extends Transition = Transition,
-	In extends Transition = Transition,
-	Out extends Transition = Transition
-> = Expand<TransitionProps<T, In, Out> & AsChild>;
-
 type GroupProps = AsChild;
 type InputProps = AsChild;
 type LabelProps = AsChild;
@@ -77,12 +56,10 @@ type ValueProps = Expand<
 	} & AsChild
 >;
 
-type ArrowProps = _ArrowProps;
-
 export type {
 	Props,
-	ArrowProps,
-	ContentProps,
+	FloatingArrowProps as ArrowProps,
+	FloatingContentProps as ContentProps,
 	GroupProps,
 	InputProps,
 	LabelProps,
diff --git a/src/lib/bits/select/types.ts b/src/lib/bits/select/types.ts
index fcf735e8f..99f182697 100644
--- a/src/lib/bits/select/types.ts
+++ b/src/lib/bits/select/types.ts
@@ -6,7 +6,6 @@ import type {
 	HTMLInputAttributes
 } from "svelte/elements";
 import type { CustomEventHandler } from "$lib/index.js";
-import type { _ArrowProps } from "$lib/shared/types.js";
 import type * as I from "./_types.js";
 
 type Props<T = unknown> = I.Props<T>;
diff --git a/src/lib/bits/switch/_types.ts b/src/lib/bits/switch/_types.ts
new file mode 100644
index 000000000..acf64d778
--- /dev/null
+++ b/src/lib/bits/switch/_types.ts
@@ -0,0 +1,41 @@
+/**
+ * We define prop types without the HTMLAttributes here so that we can use them
+ * to type-check our API documentation, which requires we document each prop,
+ * but we don't want to document the HTML attributes.
+ */
+import type { CreateSwitchProps } from "@melt-ui/svelte";
+import type { AsChild, Expand, OmitChecked, OnChangeFn } from "$lib/internal/index.js";
+import type { HTMLInputAttributes } from "svelte/elements";
+
+type Props = Expand<
+	OmitChecked<CreateSwitchProps> & {
+		/**
+		 * The checked state of the switch.
+		 * You can bind this to a boolean value to programmatically control the checked state.
+		 *
+		 * @defaultValue false
+		 */
+		checked?: boolean;
+
+		/**
+		 * A callback function called when the checked state changes.
+		 */
+		onCheckedChange?: OnChangeFn<boolean>;
+
+		/**
+		 * Whether to include the hidden input element in the DOM.
+		 */
+		includeInput?: boolean;
+
+		/**
+		 * Additional input attributes to pass to the hidden input element.
+		 * Note, the value, name, type, and checked attributes are derived from the
+		 * Switch props and cannot be overridden.
+		 */
+		inputAttrs?: Partial<Omit<HTMLInputAttributes, "value" | "name" | "type" | "checked">>;
+	} & AsChild
+>;
+
+type ThumbProps = AsChild;
+
+export type { Props, ThumbProps };
diff --git a/src/lib/bits/switch/components/Switch.svelte b/src/lib/bits/switch/components/Switch.svelte
index a2ff8e5d9..b21840e06 100644
--- a/src/lib/bits/switch/components/Switch.svelte
+++ b/src/lib/bits/switch/components/Switch.svelte
@@ -46,10 +46,11 @@
 
 	$: builder = $root;
 	$: attrs = { ...getAttrs("root"), "data-checked": checked ? "" : undefined };
+	$: slotProps = { builder, attrs };
 </script>
 
 {#if asChild}
-	<slot {builder} {attrs} />
+	<slot {...slotProps} />
 {:else}
 	<button
 		use:melt={builder}
@@ -59,7 +60,7 @@
 		on:m-click={dispatch}
 		on:m-keydown={dispatch}
 	>
-		<slot {builder} {attrs} />
+		<slot {...slotProps} />
 	</button>
 {/if}
 {#if includeInput}
diff --git a/src/lib/bits/switch/components/SwitchThumb.svelte b/src/lib/bits/switch/components/SwitchThumb.svelte
index 476c12e0d..91413963b 100644
--- a/src/lib/bits/switch/components/SwitchThumb.svelte
+++ b/src/lib/bits/switch/components/SwitchThumb.svelte
@@ -3,19 +3,23 @@
 	import type { ThumbProps } from "../types.js";
 
 	type $$Props = ThumbProps;
+
 	export let asChild: $$Props["asChild"] = false;
+
 	const {
 		states: { checked }
 	} = getCtx();
+
 	$: attrs = {
 		...getAttrs("thumb"),
 		"data-state": $checked ? "checked" : "unchecked",
 		"data-checked": $checked ? "" : undefined
 	};
+	$: slotProps = { checked: $checked, attrs };
 </script>
 
 {#if asChild}
-	<slot checked={$checked} {attrs} />
+	<slot {...slotProps} />
 {:else}
 	<span {...$$restProps} {...attrs} />
 {/if}
diff --git a/src/lib/bits/switch/types.ts b/src/lib/bits/switch/types.ts
index 851895f84..097727b28 100644
--- a/src/lib/bits/switch/types.ts
+++ b/src/lib/bits/switch/types.ts
@@ -1,34 +1,11 @@
-import type { CreateSwitchProps } from "@melt-ui/svelte";
-import type {
-	AsChild,
-	Expand,
-	HTMLSpanAttributes,
-	OmitChecked,
-	OnChangeFn
-} from "$lib/internal/index.js";
+import type { HTMLSpanAttributes } from "$lib/internal/index.js";
 import type { HTMLButtonAttributes, HTMLInputAttributes } from "svelte/elements";
 import type { CustomEventHandler } from "$lib/index.js";
+import type * as I from "./_types.js";
 
-type Props = Expand<
-	OmitChecked<CreateSwitchProps> & {
-		checked?: boolean;
-		onCheckedChange?: OnChangeFn<boolean>;
-		/**
-		 * Whether to include the hidden input element in the DOM.
-		 */
-		includeInput?: boolean;
+type Props = I.Props & HTMLButtonAttributes;
 
-		/**
-		 * Additional input attributes to pass to the hidden input element.
-		 * Note, the value, name, type, and checked attributes are derived from the
-		 * Switch props and cannot be overridden.
-		 */
-		inputAttrs?: Partial<Omit<HTMLInputAttributes, "value" | "name" | "type" | "checked">>;
-	} & AsChild
-> &
-	HTMLButtonAttributes;
-
-type ThumbProps = AsChild & HTMLSpanAttributes;
+type ThumbProps = I.ThumbProps & HTMLSpanAttributes;
 
 type InputProps = HTMLInputAttributes;
 
diff --git a/src/lib/bits/tabs/_types.ts b/src/lib/bits/tabs/_types.ts
new file mode 100644
index 000000000..07d9db0b8
--- /dev/null
+++ b/src/lib/bits/tabs/_types.ts
@@ -0,0 +1,48 @@
+/**
+ * We define prop types without the HTMLAttributes here so that we can use them
+ * to type-check our API documentation, which requires we document each prop,
+ * but we don't want to document the HTML attributes.
+ */
+
+import type { CreateTabsProps, TabsTriggerProps } from "@melt-ui/svelte";
+import type {
+	AsChild,
+	Expand,
+	ObjectVariation,
+	OmitValue,
+	OnChangeFn
+} from "$lib/internal/index.js";
+
+type Props = Expand<
+	OmitValue<CreateTabsProps> & {
+		/**
+		 * The value of the currently active tab.
+		 * You can bind this to a string value to programmatically control the active tab.
+		 */
+		value?: CreateTabsProps["defaultValue"] & {};
+
+		/**
+		 * A callback function called when the value changes.
+		 */
+		onValueChange?: OnChangeFn<CreateTabsProps["defaultValue"]>;
+
+		/**
+		 * The orientation of the tabs, which determines how keyboard navigation works.
+		 *
+		 * @defaultValue "horizontal"
+		 */
+		orientation?: CreateTabsProps["orientation"] & {};
+	} & AsChild
+>;
+
+type ContentProps = Expand<
+	{
+		value: string;
+	} & AsChild
+>;
+
+type TriggerProps = Expand<ObjectVariation<TabsTriggerProps> & AsChild>;
+
+type ListProps = AsChild;
+
+export type { Props, ContentProps, TriggerProps, ListProps };
diff --git a/src/lib/bits/tabs/components/Tabs.svelte b/src/lib/bits/tabs/components/Tabs.svelte
index f1fce12cf..123abab51 100644
--- a/src/lib/bits/tabs/components/Tabs.svelte
+++ b/src/lib/bits/tabs/components/Tabs.svelte
@@ -31,6 +31,8 @@
 		}
 	});
 
+	const attrs = getAttrs("root");
+
 	$: value !== undefined && localValue.set(value);
 	$: updateOption("orientation", orientation);
 	$: updateOption("activateOnFocus", activateOnFocus);
@@ -38,7 +40,6 @@
 	$: updateOption("autoSet", autoSet);
 
 	$: builder = $root;
-	const attrs = getAttrs("root");
 	$: slotProps = {
 		builder,
 		attrs,
diff --git a/src/lib/bits/tabs/components/TabsContent.svelte b/src/lib/bits/tabs/components/TabsContent.svelte
index 521b6d819..301713a80 100644
--- a/src/lib/bits/tabs/components/TabsContent.svelte
+++ b/src/lib/bits/tabs/components/TabsContent.svelte
@@ -4,14 +4,16 @@
 	import type { ContentProps } from "../types.js";
 
 	type $$Props = ContentProps;
+
 	export let value: $$Props["value"];
 	export let asChild: $$Props["asChild"] = false;
+
 	const {
 		elements: { content }
 	} = getCtx();
+	const attrs = getAttrs("content");
 
 	$: builder = $content(value);
-	const attrs = getAttrs("content");
 
 	$: slotProps = {
 		builder,
diff --git a/src/lib/bits/tabs/components/TabsList.svelte b/src/lib/bits/tabs/components/TabsList.svelte
index f973aeb41..16f84797e 100644
--- a/src/lib/bits/tabs/components/TabsList.svelte
+++ b/src/lib/bits/tabs/components/TabsList.svelte
@@ -2,15 +2,18 @@
 	import { melt } from "@melt-ui/svelte";
 	import { getCtx, getAttrs } from "../ctx.js";
 	import type { ListProps } from "../types.js";
+
 	type $$Props = ListProps;
 
 	export let asChild: $$Props["asChild"] = false;
+
 	const {
 		elements: { list }
 	} = getCtx();
 
-	$: builder = $list;
 	const attrs = getAttrs("list");
+
+	$: builder = $list;
 	$: slotProps = {
 		builder,
 		attrs
diff --git a/src/lib/bits/tabs/components/TabsTrigger.svelte b/src/lib/bits/tabs/components/TabsTrigger.svelte
index 62efe6b62..40222779a 100644
--- a/src/lib/bits/tabs/components/TabsTrigger.svelte
+++ b/src/lib/bits/tabs/components/TabsTrigger.svelte
@@ -3,6 +3,7 @@
 	import { getCtx, getAttrs } from "../ctx.js";
 	import type { TriggerEvents, TriggerProps } from "../types.js";
 	import { createDispatcher } from "$lib/internal/events.js";
+
 	type $$Props = TriggerProps;
 	type $$Events = TriggerEvents;
 
@@ -13,10 +14,11 @@
 	const {
 		elements: { trigger }
 	} = getCtx();
+
 	const dispatch = createDispatcher();
+	const attrs = getAttrs("trigger");
 
 	$: builder = $trigger({ value, disabled });
-	const attrs = getAttrs("trigger");
 	$: slotProps = {
 		builder,
 		attrs
diff --git a/src/lib/bits/tabs/types.ts b/src/lib/bits/tabs/types.ts
index a5dc8893e..47638a30c 100644
--- a/src/lib/bits/tabs/types.ts
+++ b/src/lib/bits/tabs/types.ts
@@ -1,34 +1,15 @@
-import type { CreateTabsProps, TabsTriggerProps } from "@melt-ui/svelte";
-import type {
-	AsChild,
-	Expand,
-	HTMLDivAttributes,
-	ObjectVariation,
-	OmitValue,
-	OnChangeFn
-} from "$lib/internal/index.js";
+import type { HTMLDivAttributes } from "$lib/internal/index.js";
 import type { HTMLButtonAttributes } from "svelte/elements";
 import type { CustomEventHandler } from "$lib/index.js";
+import type * as I from "./_types.js";
 
-type Props = Expand<
-	OmitValue<CreateTabsProps> & {
-		orientation?: CreateTabsProps["orientation"] & {};
-		value?: CreateTabsProps["defaultValue"] & {};
-		onValueChange?: OnChangeFn<CreateTabsProps["defaultValue"]>;
-	} & AsChild
-> &
-	HTMLDivAttributes;
+type Props = I.Props & HTMLDivAttributes;
 
-type ContentProps = Expand<
-	{
-		value: string;
-	} & AsChild
-> &
-	HTMLDivAttributes;
+type ContentProps = I.ContentProps & HTMLDivAttributes;
 
-type TriggerProps = Expand<ObjectVariation<TabsTriggerProps> & AsChild> & HTMLButtonAttributes;
+type TriggerProps = I.TriggerProps & HTMLButtonAttributes;
 
-type ListProps = AsChild & HTMLDivAttributes;
+type ListProps = I.ListProps & HTMLDivAttributes;
 
 type TriggerEvents<T extends Element = HTMLButtonElement> = {
 	click: CustomEventHandler<MouseEvent, T>;
diff --git a/src/lib/bits/toggle-group/_types.ts b/src/lib/bits/toggle-group/_types.ts
new file mode 100644
index 000000000..3195bc7c1
--- /dev/null
+++ b/src/lib/bits/toggle-group/_types.ts
@@ -0,0 +1,55 @@
+/**
+ * We define prop types without the HTMLAttributes here so that we can use them
+ * to type-check our API documentation, which requires we document each prop,
+ * but we don't want to document the HTML attributes.
+ */
+import type { CreateToggleGroupProps } from "@melt-ui/svelte";
+import type { AsChild, Expand, OmitValue, OnChangeFn } from "$lib/internal/index.js";
+
+type Props<T extends "single" | "multiple"> = Expand<
+	OmitValue<CreateToggleGroupProps<T>> & {
+		/**
+		 * The value of the toggle group, which is a string or an array of strings,
+		 * depending on the type of the toggle group.
+		 *
+		 * You can bind to this to programmatically control the value.
+		 */
+		value?: CreateToggleGroupProps<T>["defaultValue"];
+
+		/**
+		 * A callback function called when the value changes.
+		 */
+		onValueChange?: OnChangeFn<CreateToggleGroupProps<T>["defaultValue"]>;
+
+		/**
+		 * The type of the toggle group.
+		 *
+		 * If the type is `"single"`, the toggle group allows only one item to be selected
+		 * at a time. If the type is `"multiple"`, the toggle group allows multiple items
+		 * to be selected at a time.
+		 */
+		type?: T;
+	} & AsChild
+>;
+
+type ItemProps = Expand<
+	{
+		/**
+		 * The value of the toggle group item. When the toggle group item is selected,
+		 * the toggle group's value will be set to this value if in `"single"` mode,
+		 * or this value will be pushed to the toggle group's array value if in `"multiple"` mode.
+		 *
+		 * @required
+		 */
+		value: string;
+
+		/**
+		 * Whether the toggle group item is disabled.
+		 *
+		 * @defaultValue false
+		 */
+		disabled?: boolean;
+	} & AsChild
+>;
+
+export type { Props, ItemProps };
diff --git a/src/lib/bits/toggle-group/components/ToggleGroup.svelte b/src/lib/bits/toggle-group/components/ToggleGroup.svelte
index 727411488..929d8f27a 100644
--- a/src/lib/bits/toggle-group/components/ToggleGroup.svelte
+++ b/src/lib/bits/toggle-group/components/ToggleGroup.svelte
@@ -4,8 +4,8 @@
 	import type { Props } from "../types.js";
 
 	type T = $$Generic<"single" | "multiple">;
-
 	type $$Props = Props<T>;
+
 	export let type: $$Props["type"] = "single" as T;
 	export let disabled: $$Props["disabled"] = undefined;
 	export let loop: $$Props["loop"] = undefined;
@@ -40,20 +40,26 @@
 		}) as any
 	});
 
+	const attrs = getAttrs("root");
+
 	$: value !== undefined && localValue.set(value);
+
 	$: updateOption("disabled", disabled);
 	$: updateOption("loop", loop);
 	$: updateOption("type", type);
 	$: updateOption("orientation", orientation);
 
 	$: builder = $root;
-	const attrs = getAttrs("root");
+	$: slotProps = {
+		builder,
+		attrs
+	};
 </script>
 
 {#if asChild}
-	<slot {builder} {attrs} />
+	<slot {...slotProps} />
 {:else}
 	<div use:melt={builder} {...$$restProps} {...attrs}>
-		<slot {builder} {attrs} />
+		<slot {...slotProps} />
 	</div>
 {/if}
diff --git a/src/lib/bits/toggle-group/components/ToggleGroupItem.svelte b/src/lib/bits/toggle-group/components/ToggleGroupItem.svelte
index fd8380e9c..3e0f763f6 100644
--- a/src/lib/bits/toggle-group/components/ToggleGroupItem.svelte
+++ b/src/lib/bits/toggle-group/components/ToggleGroupItem.svelte
@@ -16,13 +16,14 @@
 	} = getCtx();
 
 	const dispatch = createDispatcher();
+	const attrs = getAttrs("item");
 
 	$: builder = $item({ value, disabled });
-	const attrs = getAttrs("item");
+	$: slotProps = { builder, attrs };
 </script>
 
 {#if asChild}
-	<slot {builder} {attrs} />
+	<slot {...slotProps} />
 {:else}
 	<button
 		use:melt={builder}
@@ -31,6 +32,6 @@
 		on:m-click={dispatch}
 		on:m-keydown={dispatch}
 	>
-		<slot {builder} {attrs} />
+		<slot {...slotProps} />
 	</button>
 {/if}
diff --git a/src/lib/bits/toggle-group/types.ts b/src/lib/bits/toggle-group/types.ts
index b644a692c..b5801c49f 100644
--- a/src/lib/bits/toggle-group/types.ts
+++ b/src/lib/bits/toggle-group/types.ts
@@ -1,29 +1,11 @@
-import type { CreateToggleGroupProps } from "@melt-ui/svelte";
-import type {
-	AsChild,
-	Expand,
-	HTMLDivAttributes,
-	OmitValue,
-	OnChangeFn
-} from "$lib/internal/index.js";
+import type { HTMLDivAttributes } from "$lib/internal/index.js";
 import type { HTMLButtonAttributes } from "svelte/elements";
 import type { CustomEventHandler } from "$lib/index.js";
+import type * as I from "./_types.js";
 
-type Props<T extends "single" | "multiple"> = Expand<
-	OmitValue<CreateToggleGroupProps<T>> & {
-		value?: CreateToggleGroupProps<T>["defaultValue"];
-		onValueChange?: OnChangeFn<CreateToggleGroupProps<T>["defaultValue"]>;
-		type?: T;
-	}
-> &
-	AsChild &
-	HTMLDivAttributes;
+type Props<T extends "single" | "multiple"> = I.Props<T> & HTMLDivAttributes;
 
-type ItemProps = {
-	value: string;
-	disabled?: boolean;
-} & AsChild &
-	HTMLButtonAttributes;
+type ItemProps = I.ItemProps & HTMLButtonAttributes;
 
 type ItemEvents<T extends Element = HTMLButtonElement> = {
 	click: CustomEventHandler<MouseEvent, T>;
diff --git a/src/lib/bits/toggle/_types.ts b/src/lib/bits/toggle/_types.ts
new file mode 100644
index 000000000..8aee7fb1f
--- /dev/null
+++ b/src/lib/bits/toggle/_types.ts
@@ -0,0 +1,30 @@
+/**
+ * We define prop types without the HTMLAttributes here so that we can use them
+ * to type-check our API documentation, which requires we document each prop,
+ * but we don't want to document the HTML attributes.
+ */
+import type { CreateToggleProps } from "@melt-ui/svelte";
+import type { AsChild, Expand, OmitPressed, OnChangeFn } from "$lib/internal/index.js";
+
+type Props = Expand<
+	OmitPressed<CreateToggleProps> & {
+		/**
+		 * The pressed state of the toggle.
+		 * You can bind this to a boolean value to programmatically control the pressed state.
+		 *
+		 * @defaultValue false
+		 */
+		pressed?: boolean;
+
+		/**
+		 * A callback function called when the pressed state changes.
+		 */
+		onPressedChange?: OnChangeFn<boolean>;
+	} & AsChild
+>;
+
+export type {
+	Props,
+	//
+	Props as ToggleProps
+};
diff --git a/src/lib/bits/toggle/components/Toggle.svelte b/src/lib/bits/toggle/components/Toggle.svelte
index 34a0a2589..974d1908e 100644
--- a/src/lib/bits/toggle/components/Toggle.svelte
+++ b/src/lib/bits/toggle/components/Toggle.svelte
@@ -6,10 +6,12 @@
 
 	type $$Props = Props;
 	type $$Events = Events;
+
 	export let disabled: $$Props["disabled"] = undefined;
 	export let pressed: $$Props["pressed"] = undefined;
 	export let onPressedChange: $$Props["onPressedChange"] = undefined;
 	export let asChild: $$Props["asChild"] = false;
+
 	const {
 		elements: { root },
 		states: { pressed: localPressed },
@@ -27,16 +29,17 @@
 	});
 
 	const dispatch = createDispatcher();
+	const attrs = getAttrs("root");
 
 	$: pressed !== undefined && localPressed.set(pressed);
 	$: updateOption("disabled", disabled);
 
 	$: builder = $root;
-	const attrs = getAttrs("root");
+	$: slotProps = { builder, attrs };
 </script>
 
 {#if asChild}
-	<slot {builder} {attrs} />
+	<slot {...slotProps} />
 {:else}
 	<button
 		use:melt={builder}
@@ -46,6 +49,6 @@
 		on:m-click={dispatch}
 		on:m-keydown={dispatch}
 	>
-		<slot {builder} {attrs} />
+		<slot {...slotProps} />
 	</button>
 {/if}
diff --git a/src/lib/bits/toggle/types.ts b/src/lib/bits/toggle/types.ts
index bb4cfa065..da29d1e5a 100644
--- a/src/lib/bits/toggle/types.ts
+++ b/src/lib/bits/toggle/types.ts
@@ -1,15 +1,8 @@
-import type { CreateToggleProps } from "@melt-ui/svelte";
-import type { AsChild, Expand, OmitPressed, OnChangeFn } from "$lib/internal/index.js";
 import type { HTMLButtonAttributes } from "svelte/elements";
 import type { CustomEventHandler } from "$lib/index.js";
+import type * as I from "./_types.js";
 
-type Props = Expand<
-	OmitPressed<CreateToggleProps> & {
-		pressed?: boolean;
-		onPressedChange?: OnChangeFn<boolean>;
-	} & AsChild
-> &
-	HTMLButtonAttributes;
+type Props = I.Props & HTMLButtonAttributes;
 
 type Events<T extends Element = HTMLButtonElement> = {
 	click: CustomEventHandler<MouseEvent, T>;
diff --git a/src/lib/bits/tooltip/_types.ts b/src/lib/bits/tooltip/_types.ts
new file mode 100644
index 000000000..233987230
--- /dev/null
+++ b/src/lib/bits/tooltip/_types.ts
@@ -0,0 +1,59 @@
+/**
+ * We define prop types without the HTMLAttributes here so that we can use them
+ * to type-check our API documentation, which requires we document each prop,
+ * but we don't want to document the HTML attributes.
+ */
+import type { CreateTooltipProps } from "@melt-ui/svelte";
+import type {
+	Expand,
+	OmitFloating,
+	Transition,
+	OnChangeFn,
+	AsChild,
+	TransitionProps
+} from "$lib/internal/index.js";
+import type { FloatingArrowProps } from "$lib/shared/index.js";
+
+type Props = Expand<OmitFloating<CreateTooltipProps>> & {
+	/**
+	 * The open state of the tooltip.
+	 * You can bind this to a boolean value to programmatically control the open state.
+	 *
+	 * @example
+	 * ```svelte
+	 * <script>
+	 * 	import { Tooltip } from 'bits-ui';
+	 * 	let open = false;
+	 *
+	 * 	$: if (someCondition) {
+	 * 		open = true
+	 * 	}
+	 * </script>
+	 *
+	 * <Tooltip.Root bind:open>
+	 * 	<!-- ... -->
+	 * </Tooltip.Root>
+	 * ```
+	 */
+	open?: boolean & {};
+
+	/**
+	 * A callback function called when the open state changes.
+	 */
+	onOpenChange?: OnChangeFn<boolean>;
+};
+
+type ContentProps<
+	T extends Transition = Transition,
+	In extends Transition = Transition,
+	Out extends Transition = Transition
+> = Expand<
+	{
+		sideOffset?: number;
+	} & TransitionProps<T, In, Out> &
+		AsChild
+>;
+
+type TriggerProps = AsChild;
+
+export type { Props, FloatingArrowProps as ArrowProps, TriggerProps, ContentProps };
diff --git a/src/lib/bits/tooltip/components/Tooltip.svelte b/src/lib/bits/tooltip/components/Tooltip.svelte
index ba33b0314..5123e2a9f 100644
--- a/src/lib/bits/tooltip/components/Tooltip.svelte
+++ b/src/lib/bits/tooltip/components/Tooltip.svelte
@@ -2,10 +2,10 @@
 	import { derived } from "svelte/store";
 	import { setCtx } from "../ctx.js";
 	import type { Props } from "../types.js";
+
 	type $$Props = Props;
 
 	export let positioning: $$Props["positioning"] = undefined;
-	export let arrowSize: $$Props["arrowSize"] = undefined;
 	export let closeOnEscape: $$Props["closeOnEscape"] = undefined;
 	export let portal: $$Props["portal"] = undefined;
 	export let closeOnPointerDown: $$Props["closeOnPointerDown"] = undefined;
@@ -13,7 +13,6 @@
 	export let closeDelay: $$Props["closeDelay"] = undefined;
 	export let open: $$Props["open"] = undefined;
 	export let onOpenChange: $$Props["onOpenChange"] = undefined;
-	export let forceVisible: $$Props["forceVisible"] = true;
 	export let disableHoverableContent: $$Props["disableHoverableContent"] = undefined;
 	export let group: $$Props["group"] = undefined;
 
@@ -23,13 +22,12 @@
 		ids
 	} = setCtx({
 		positioning,
-		arrowSize,
 		closeOnEscape,
 		portal,
 		closeOnPointerDown,
 		openDelay,
 		closeDelay,
-		forceVisible,
+		forceVisible: true,
 		defaultOpen: open,
 		disableHoverableContent,
 		group,
@@ -49,13 +47,11 @@
 
 	$: open !== undefined && localOpen.set(open);
 	$: updateOption("positioning", positioning);
-	$: updateOption("arrowSize", arrowSize);
 	$: updateOption("closeOnEscape", closeOnEscape);
 	$: updateOption("portal", portal);
 	$: updateOption("closeOnPointerDown", closeOnPointerDown);
 	$: updateOption("openDelay", openDelay);
 	$: updateOption("closeDelay", closeDelay);
-	$: updateOption("forceVisible", forceVisible);
 	$: updateOption("group", group);
 	$: updateOption("disableHoverableContent", disableHoverableContent);
 </script>
diff --git a/src/lib/bits/tooltip/components/TooltipArrow.svelte b/src/lib/bits/tooltip/components/TooltipArrow.svelte
index 0c9b38b7a..b41fb7ffc 100644
--- a/src/lib/bits/tooltip/components/TooltipArrow.svelte
+++ b/src/lib/bits/tooltip/components/TooltipArrow.svelte
@@ -4,6 +4,7 @@
 	import type { ArrowProps } from "../types.js";
 
 	type $$Props = ArrowProps;
+
 	export let size = 8;
 	export let asChild: $$Props["asChild"] = false;
 
@@ -11,12 +12,14 @@
 		elements: { arrow }
 	} = setArrow(size);
 
-	$: builder = $arrow;
 	const attrs = getAttrs("arrow");
+
+	$: builder = $arrow;
+	$: slotProps = { builder, attrs };
 </script>
 
 {#if asChild}
-	<slot {builder} {attrs} />
+	<slot {...slotProps} />
 {:else}
 	<div use:melt={builder} {...attrs} {...$$restProps} />
 {/if}
diff --git a/src/lib/bits/tooltip/components/TooltipContent.svelte b/src/lib/bits/tooltip/components/TooltipContent.svelte
index d109fb49e..77b1ea70d 100644
--- a/src/lib/bits/tooltip/components/TooltipContent.svelte
+++ b/src/lib/bits/tooltip/components/TooltipContent.svelte
@@ -17,7 +17,6 @@
 	export let inTransitionConfig: $$Props["inTransitionConfig"] = undefined;
 	export let outTransition: $$Props["outTransition"] = undefined;
 	export let outTransitionConfig: $$Props["outTransitionConfig"] = undefined;
-
 	export let asChild: $$Props["asChild"] = false;
 	export let sideOffset: $$Props["sideOffset"] = 4;
 	export let id: $$Props["id"] = undefined;
@@ -29,15 +28,17 @@
 	} = getCtx(sideOffset);
 
 	const dispatch = createDispatcher();
+	const attrs = getAttrs("content");
+
 	$: if (id) {
 		ids.content.set(id);
 	}
 	$: builder = $content;
-	const attrs = getAttrs("content");
+	$: slotProps = { builder, attrs };
 </script>
 
 {#if asChild && $open}
-	<slot {builder} {attrs} />
+	<slot {...slotProps} />
 {:else if transition && $open}
 	<div
 		use:melt={builder}
@@ -47,7 +48,7 @@
 		on:m-pointerdown={dispatch}
 		on:m-pointerenter={dispatch}
 	>
-		<slot {builder} {attrs} />
+		<slot {...slotProps} />
 	</div>
 {:else if inTransition && outTransition && $open}
 	<div
@@ -59,7 +60,7 @@
 		on:m-pointerdown={dispatch}
 		on:m-pointerenter={dispatch}
 	>
-		<slot {builder} {attrs} />
+		<slot {...slotProps} />
 	</div>
 {:else if inTransition && $open}
 	<div
@@ -70,7 +71,7 @@
 		on:m-pointerdown={dispatch}
 		on:m-pointerenter={dispatch}
 	>
-		<slot {builder} {attrs} />
+		<slot {...slotProps} />
 	</div>
 {:else if outTransition && $open}
 	<div
@@ -81,7 +82,7 @@
 		on:m-pointerdown={dispatch}
 		on:m-pointerenter={dispatch}
 	>
-		<slot {builder} {attrs} />
+		<slot {...slotProps} />
 	</div>
 {:else if $open}
 	<div
@@ -91,6 +92,6 @@
 		on:m-pointerdown={dispatch}
 		on:m-pointerenter={dispatch}
 	>
-		<slot {builder} {attrs} />
+		<slot {...slotProps} />
 	</div>
 {/if}
diff --git a/src/lib/bits/tooltip/components/TooltipTrigger.svelte b/src/lib/bits/tooltip/components/TooltipTrigger.svelte
index cf040f6e2..f62a17cb5 100644
--- a/src/lib/bits/tooltip/components/TooltipTrigger.svelte
+++ b/src/lib/bits/tooltip/components/TooltipTrigger.svelte
@@ -6,6 +6,7 @@
 
 	type $$Props = TriggerProps;
 	type $$Events = TriggerEvents;
+
 	export let asChild: $$Props["asChild"] = false;
 	export let id: $$Props["id"] = undefined;
 
@@ -15,17 +16,17 @@
 	} = getCtx();
 
 	const dispatch = createDispatcher();
+	const attrs = getAttrs("trigger");
 
 	$: if (id) {
 		ids.trigger.set(id);
 	}
 	$: builder = $trigger;
-
-	const attrs = getAttrs("trigger");
+	$: slotProps = { builder, attrs };
 </script>
 
 {#if asChild}
-	<slot {builder} {attrs} />
+	<slot {...slotProps} />
 {:else}
 	<button
 		use:melt={builder}
@@ -39,6 +40,6 @@
 		on:m-pointerenter={dispatch}
 		on:m-pointerleave={dispatch}
 	>
-		<slot {builder} {attrs} />
+		<slot {...slotProps} />
 	</button>
 {/if}
diff --git a/src/lib/bits/tooltip/types.ts b/src/lib/bits/tooltip/types.ts
index 046aa1acc..6bfe1c99b 100644
--- a/src/lib/bits/tooltip/types.ts
+++ b/src/lib/bits/tooltip/types.ts
@@ -1,38 +1,18 @@
-import type { CreateTooltipProps } from "@melt-ui/svelte";
-import type {
-	Expand,
-	HTMLDivAttributes,
-	OmitOpen,
-	Transition,
-	OnChangeFn,
-	AsChild,
-	TransitionProps
-} from "$lib/internal/index.js";
+import type { HTMLDivAttributes, Transition } from "$lib/internal/index.js";
 import type { HTMLButtonAttributes } from "svelte/elements";
 import type { CustomEventHandler } from "$lib";
-import type { _ArrowProps } from "$lib/shared/types.js";
+import type * as I from "./_types.js";
 
-type Props = Expand<
-	OmitOpen<CreateTooltipProps> & {
-		open?: boolean & {};
-		onOpenChange?: OnChangeFn<boolean>;
-	}
->;
+type Props = I.Props;
 
 type ContentProps<
 	T extends Transition = Transition,
 	In extends Transition = Transition,
 	Out extends Transition = Transition
-> = Expand<
-	{
-		sideOffset?: number;
-	} & TransitionProps<T, In, Out> &
-		AsChild
-> &
-	HTMLDivAttributes;
+> = I.ContentProps<T, In, Out> & HTMLDivAttributes;
 
-type TriggerProps = AsChild & HTMLButtonAttributes;
-type ArrowProps = _ArrowProps & HTMLDivAttributes;
+type TriggerProps = I.TriggerProps & HTMLButtonAttributes;
+type ArrowProps = I.ArrowProps & HTMLDivAttributes;
 
 type TriggerEvents<T extends Element = HTMLButtonElement> = {
 	blur: CustomEventHandler<FocusEvent, T>;
@@ -42,6 +22,7 @@ type TriggerEvents<T extends Element = HTMLButtonElement> = {
 	pointerenter: CustomEventHandler<PointerEvent, T>;
 	pointerleave: CustomEventHandler<PointerEvent, T>;
 };
+
 type ContentEvents<T extends Element = HTMLDivElement> = {
 	pointerdown: CustomEventHandler<PointerEvent, T>;
 	pointerenter: CustomEventHandler<PointerEvent, T>;
diff --git a/src/lib/internal/types.ts b/src/lib/internal/types.ts
index ba03e6039..771c72b90 100644
--- a/src/lib/internal/types.ts
+++ b/src/lib/internal/types.ts
@@ -19,6 +19,8 @@ export type OmitPressed<T> = Omit<T, "pressed" | "defaultPressed" | "onPressedCh
 export type OmitForceVisible<T> = Omit<T, "forceVisible">;
 export type OmitIds<T> = Omit<T, "ids">;
 
+export type OmitFloating<T> = OmitOpen<Omit<T, "forceVisible" | "ids" | "arrowSize">>;
+
 export type OnChangeFn<T> = (value: T) => void;
 
 export type Expand<T> = T extends object
diff --git a/src/lib/shared/floating.ts b/src/lib/shared/floating.ts
new file mode 100644
index 000000000..0d3998b91
--- /dev/null
+++ b/src/lib/shared/floating.ts
@@ -0,0 +1,13 @@
+import type { AsChild, Transition, TransitionProps } from "$lib/internal/index.js";
+
+export type FloatingArrowProps = Expand<
+	{
+		size?: number;
+	} & AsChild
+>;
+
+export type FloatingContentProps<
+	T extends Transition = Transition,
+	In extends Transition = Transition,
+	Out extends Transition = Transition
+> = Expand<TransitionProps<T, In, Out> & AsChild>;
diff --git a/src/lib/shared/index.ts b/src/lib/shared/index.ts
new file mode 100644
index 000000000..74ba86194
--- /dev/null
+++ b/src/lib/shared/index.ts
@@ -0,0 +1,7 @@
+/**
+ * Functions & types shared between multiple components throughout
+ * the library.
+ */
+
+export * from "./floating.js";
+export * from "./menu.js";
diff --git a/src/lib/shared/menu.ts b/src/lib/shared/menu.ts
new file mode 100644
index 000000000..742394adb
--- /dev/null
+++ b/src/lib/shared/menu.ts
@@ -0,0 +1,12 @@
+import type { Transition } from "$lib/internal";
+import type { FloatingContentProps } from "./index.js";
+
+export type MenuContentProps<
+	T extends Transition = Transition,
+	In extends Transition = Transition,
+	Out extends Transition = Transition
+> = Expand<
+	{
+		sideOffset?: number;
+	} & FloatingContentProps<T, In, Out>
+>;
diff --git a/src/lib/shared/types.ts b/src/lib/shared/types.ts
deleted file mode 100644
index 3d82a515a..000000000
--- a/src/lib/shared/types.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import type { AsChild } from "$lib/internal/index.js";
-
-export type _ArrowProps = Expand<
-	{
-		size?: number;
-	} & AsChild
->;

From 519faf4fd6a6d1fb2f958f98ee96da85818a1b27 Mon Sep 17 00:00:00 2001
From: Hunter Johnston <johnstonhuntera@gmail.com>
Date: Thu, 16 Nov 2023 14:25:09 -0500
Subject: [PATCH 024/217] more work

---
 src/content/api-reference/accordion.ts     |  63 ++----
 src/content/api-reference/alert-dialog.ts  |  45 ++--
 src/content/api-reference/aspect-ratio.ts  |  10 +-
 src/content/api-reference/avatar.ts        |  37 ++-
 src/content/api-reference/button.ts        |  13 +-
 src/content/api-reference/checkbox.ts      |  43 ++--
 src/content/api-reference/collapsible.ts   |  29 ++-
 src/content/api-reference/context-menu.ts  | 241 +++++---------------
 src/content/api-reference/dialog.ts        |  51 +++--
 src/content/api-reference/dropdown-menu.ts | 243 +++++---------------
 src/content/api-reference/helpers.ts       | 217 ++++++++++++++++++
 src/content/api-reference/label.ts         |   5 +-
 src/content/api-reference/link-preview.ts  |  55 ++---
 src/content/api-reference/menubar.ts       | 249 ++++++---------------
 src/content/api-reference/popover.ts       |  60 +++--
 src/lib/bits/accordion/_types.ts           |   3 +-
 src/lib/bits/avatar/_types.ts              |   8 +-
 src/lib/bits/context-menu/_types.ts        |  22 +-
 src/lib/bits/dialog/_types.ts              |   2 +-
 src/lib/bits/dropdown-menu/_types.ts       |  19 +-
 src/lib/bits/link-preview/_types.ts        |   4 +-
 src/lib/bits/menubar/_types.ts             |  22 +-
 src/lib/shared/menu.ts                     |  16 +-
 23 files changed, 645 insertions(+), 812 deletions(-)

diff --git a/src/content/api-reference/accordion.ts b/src/content/api-reference/accordion.ts
index 2b7fbd3e3..7b0735132 100644
--- a/src/content/api-reference/accordion.ts
+++ b/src/content/api-reference/accordion.ts
@@ -1,57 +1,38 @@
 import type { APISchema } from "@/types";
 import * as C from "@/content/api-reference/constants";
-import { union, enums, asChild } from "@/content";
+import { union, enums, asChild, transitionProps } from "@/content";
+import type * as Accordion from "$lib/bits/accordion/_types.js";
 
-const root: APISchema = {
+const root: APISchema<Accordion.Props<false>> = {
 	title: "Root",
 	description: "The root accordion component used to set and manage the state of the accordion.",
-	props: [
-		{
-			name: "multiple",
+	props: {
+		multiple: {
 			default: "false",
 			type: C.BOOLEAN,
 			description: "Whether or not multiple accordion items can be active at the same time."
 		},
-		{
-			name: "disabled",
+		disabled: {
 			default: "false",
 			type: C.BOOLEAN,
 			description: "Whether or not the accordion is disabled."
 		},
-		{
-			name: "value",
+		value: {
 			type: {
 				type: C.UNION,
 				definition: union("string", "undefined")
 			},
 			description: "The active accordion item value."
 		},
-		{
-			name: "onValueChange",
+		onValueChange: {
 			type: {
 				type: C.FUNCTION,
 				definition: "(value: string | undefined) => void"
 			},
 			description: "A callback function called when the active accordion item value changes."
 		},
-		{
-			name: "value",
-			type: {
-				type: C.UNION,
-				definition: union("string[]", "undefined")
-			},
-			description: "The active accordion item value when `multiple` is true."
-		},
-		{
-			name: "onValueChange",
-			type: {
-				type: C.FUNCTION,
-				definition: "(value: string[] | undefined) => void"
-			},
-			description:
-				"A callback function called when the active accordion item value changes when `multiple` is true."
-		}
-	],
+		asChild
+	},
 	dataAttributes: [
 		{
 			name: "orientation",
@@ -66,24 +47,22 @@ const root: APISchema = {
 	]
 };
 
-const item: APISchema = {
+const item: APISchema<Accordion.ItemProps> = {
 	title: "Item",
 	description: "An accordion item.",
-	props: [
-		asChild,
-		{
-			name: "value",
+	props: {
+		value: {
 			required: true,
 			type: "string",
 			description: "The value of the accordion item."
 		},
-		{
-			name: "disabled",
+		disabled: {
 			default: "false",
 			type: "boolean",
 			description: "Whether or not the accordion item is disabled."
-		}
-	],
+		},
+		asChild
+	},
 	dataAttributes: [
 		{
 			name: "state",
@@ -102,10 +81,10 @@ const item: APISchema = {
 	]
 };
 
-const trigger: APISchema = {
+const trigger: APISchema<Accordion.TriggerProps> = {
 	title: "Trigger",
 	description: "The accordion item trigger, which opens and closes the accordion item.",
-	props: [asChild],
+	props: { asChild },
 	dataAttributes: [
 		{
 			name: "state",
@@ -127,10 +106,10 @@ const trigger: APISchema = {
 	]
 };
 
-const content: APISchema = {
+const content: APISchema<Accordion.ContentProps> = {
 	title: "Content",
 	description: "The accordion item content, which is displayed when the item is open.",
-	props: [asChild],
+	props: { ...transitionProps, asChild },
 	dataAttributes: [
 		{
 			name: "state",
diff --git a/src/content/api-reference/alert-dialog.ts b/src/content/api-reference/alert-dialog.ts
index d62eb6056..be906c8bd 100644
--- a/src/content/api-reference/alert-dialog.ts
+++ b/src/content/api-reference/alert-dialog.ts
@@ -1,8 +1,8 @@
 import type { APISchema } from "@/types";
-import { asChild, portalProp } from "./helpers";
+import { asChild, enums, portalProp, transitionProps } from "./helpers";
 import * as C from "@/content/api-reference/constants";
 import { focusProp } from "@/content/api-reference/extended-types";
-import type { AlertDialog } from "$lib";
+import type * as AlertDialog from "$lib/bits/alert-dialog/_types.js";
 
 export const root: APISchema<AlertDialog.Props> = {
 	title: "Root",
@@ -47,7 +47,7 @@ export const root: APISchema<AlertDialog.Props> = {
 	}
 };
 
-export const action: APISchema = {
+export const action: APISchema<AlertDialog.ActionProps> = {
 	title: "Action",
 	description: "A button used to close the alert dialog by taking an action.",
 	props: {
@@ -61,57 +61,66 @@ export const action: APISchema = {
 	]
 };
 
-export const cancel: APISchema = {
+export const cancel: APISchema<AlertDialog.CancelProps> = {
 	title: "Cancel",
 	description: "A button used to close the alert dialog without taking an action.",
-	props: [asChild]
+	props: { asChild }
 };
 
-export const content: APISchema = {
+export const content: APISchema<AlertDialog.ContentProps> = {
 	title: "Content",
 	description: "The content displayed within the alert dialog modal.",
-	props: [asChild],
+	props: { ...transitionProps, asChild },
 	dataAttributes: [
 		{
 			name: "state",
-			value: "'open' | 'closed'",
+			value: enums("open", "closed"),
 			description: "The state of the alert dialog."
 		}
 	]
 };
 
-export const title: APISchema = {
+export const title: APISchema<AlertDialog.TitleProps> = {
 	title: "Title",
 	description: "An accessibile title for the alert dialog.",
-	props: [asChild]
+	props: {
+		asChild,
+		level: {
+			type: {
+				type: "enum",
+				definition: enums("h1", "h2", "h3", "h4", "h5", "h6")
+			},
+			description: "The heading level of the title."
+		}
+	}
 };
 
-export const description: APISchema = {
+export const description: APISchema<AlertDialog.DescriptionProps> = {
 	title: "Description",
 	description: "An accessibile description for the alert dialog.",
-	props: [asChild]
+	props: { asChild }
 };
 
-export const trigger: APISchema = {
+export const trigger: APISchema<AlertDialog.TriggerProps> = {
 	title: "Trigger",
 	description: "The element which opens the alert dialog on press.",
-	props: [asChild]
+	props: { asChild }
 };
 
-export const overlay: APISchema = {
+export const overlay: APISchema<AlertDialog.OverlayProps> = {
 	title: "Overlay",
 	description: "An overlay which covers the body when the alert dialog is open.",
-	props: [asChild],
+	props: { ...transitionProps, asChild },
 	dataAttributes: [
 		{
 			name: "state",
-			value: "'open' | 'closed'",
+			value: enums("open", "closed"),
 			description: "The state of the alert dialog."
 		}
 	]
 };
 
-export const portal: APISchema = {
+export const portal: APISchema<AlertDialog.PortalProps> = {
 	title: "Portal",
 	description: "A portal which renders the alert dialog into the body when it is open."
 };
diff --git a/src/content/api-reference/aspect-ratio.ts b/src/content/api-reference/aspect-ratio.ts
index 82201d593..ec1d2b8d4 100644
--- a/src/content/api-reference/aspect-ratio.ts
+++ b/src/content/api-reference/aspect-ratio.ts
@@ -1,16 +1,16 @@
 import type { APISchema } from "@/types";
+import type * as AspectRatio from "$lib/bits/aspect-ratio/_types.js";
 
-export const root: APISchema = {
+export const root: APISchema<AspectRatio.Props> = {
 	title: "Root",
 	description: "The aspect ratio component.",
-	props: [
-		{
-			name: "ratio",
+	props: {
+		ratio: {
 			default: "1",
 			type: "number",
 			description: "The desired aspect ratio."
 		}
-	]
+	}
 };
 
 export const aspectRatio = [root];
diff --git a/src/content/api-reference/avatar.ts b/src/content/api-reference/avatar.ts
index b61c559cb..b3f834140 100644
--- a/src/content/api-reference/avatar.ts
+++ b/src/content/api-reference/avatar.ts
@@ -1,55 +1,52 @@
 import type { APISchema } from "@/types";
-import { asChild } from "./helpers";
+import { asChild } from "./helpers.js";
+import type * as Avatar from "$lib/bits/avatar/_types";
 
-export const root: APISchema = {
+export const root: APISchema<Avatar.Props> = {
 	title: "Root",
 	description: "The root component used to set and manage the state of the avatar.",
-	props: [
-		{
-			name: "delayMs",
+	props: {
+		delayMs: {
 			default: "0",
 			type: "number",
 			description:
 				"How long to wait before showing the image after it has loaded. This can be useful to prevent a harsh flickering effect when the image loads quickly."
 		},
-		{
-			name: "loadingStatus",
+		loadingStatus: {
 			type: "'loading' | 'loaded' | 'error'",
 			description:
 				"The loading status of the avatars source image. You can bind a variable to track the status outside of the component and use it to show a loading indicator or error message."
 		},
-		{
-			name: "onLoadingStatusChange",
+		onLoadingStatusChange: {
 			type: "(status: 'loading' | 'loaded' | 'error') => void",
 			description: "A callback function called when the loading status of the image changes."
-		}
-	]
+		},
+		asChild
+	}
 };
 
-export const image: APISchema = {
+export const image: APISchema<Avatar.ImageProps> = {
 	title: "Image",
 	description: "The avatar image displayed once it has loaded.",
-	props: [
-		{
-			name: "src",
+	props: {
+		src: {
 			type: "string",
 			description:
 				"The source of the image. This is typed the same as the native `img` element so you can use any valid `img` `src` value."
 		},
-		{
-			name: "alt",
+		alt: {
 			type: "string",
 			description:
 				"The alt text of the image. This is typed the same as the native `img` element so you can use any valid `img` `alt` value."
 		},
 		asChild
-	]
+	}
 };
 
-export const fallback: APISchema = {
+export const fallback: APISchema<Avatar.FallbackProps> = {
 	title: "Fallback",
 	description: "The fallback displayed while the avatar image is loading or if it fails to load",
-	props: [asChild]
+	props: { asChild }
 };
 
 export const avatar = [root, image, fallback];
diff --git a/src/content/api-reference/button.ts b/src/content/api-reference/button.ts
index 59fe61acf..286e9798f 100644
--- a/src/content/api-reference/button.ts
+++ b/src/content/api-reference/button.ts
@@ -1,22 +1,21 @@
 import type { APISchema } from "@/types";
+import type * as Button from "$lib/bits/button/_types";
 
-export const root: APISchema = {
+export const root: APISchema<Button.Props & { href: string }> = {
 	title: "Root",
 	description:
 		"A special button component that can receive Melt UI builders for use with the `asChild` prop.",
-	props: [
-		{
-			name: "builders",
+	props: {
+		builders: {
 			default: "[]",
 			type: "Builder[]",
 			description: "An array of melt builders to be applied to the button."
 		},
-		{
-			name: "href",
+		href: {
 			type: "string",
 			description: "An optional prop that when passed converts the button into an anchor tag."
 		}
-	]
+	}
 };
 
 export const button = [root];
diff --git a/src/content/api-reference/checkbox.ts b/src/content/api-reference/checkbox.ts
index 994657c3b..a7305aa08 100644
--- a/src/content/api-reference/checkbox.ts
+++ b/src/content/api-reference/checkbox.ts
@@ -1,29 +1,42 @@
+import { asChild } from "@/content";
 import type { APISchema } from "@/types";
+import type * as Checkbox from "$lib/bits/checkbox/_types";
 
-export const root: APISchema = {
+export const root: APISchema<Checkbox.Props> = {
 	title: "Root",
 	description: "The button component used to toggle the state of the checkbox.",
-	props: [
-		{
-			name: "disabled",
+	props: {
+		disabled: {
 			default: "false",
 			type: "boolean",
 			description:
 				"Whether or not the checkbox button is disabled. This prevents the user from interacting with it."
 		},
-		{
-			name: "checked",
+		checked: {
 			default: "false",
 			type: "boolean | 'indeterminate'",
 			description:
 				"The checkbox button's checked state. This can be a boolean or the string 'indeterminate', which would typically display a dash in the checkbox."
 		},
-		{
-			name: "onCheckedChange",
+		onCheckedChange: {
 			type: "(checked: boolean | 'indeterminate') => void",
 			description: "A callback that is fired when the checkbox button's checked state changes."
-		}
-	],
+		},
+		required: {
+			default: "false",
+			type: "boolean",
+			description: "Whether or not the checkbox is required."
+		},
+		name: {
+			type: "string",
+			description: "The name of the checkbox. This is used for form submission."
+		},
+		value: {
+			type: "string",
+			description: "The value of the checkbox. This is used for form submission."
+		},
+		asChild
+	},
 	dataAttributes: [
 		{
 			name: "disabled",
@@ -42,22 +55,20 @@ export const input: APISchema = {
 	title: "Input",
 	description:
 		"The hidden input element that is used to store the checkbox's state for form submission. It receives all the same props as a regular HTML input element.",
-	props: [
-		{
-			name: "value",
+	props: {
+		value: {
 			default: "false",
 			type: "boolean",
 			description:
 				"Unless a value is provided, the input's value will be a boolean that represents the checkbox's checked state. Indeterminate checkboxes will have a value of `false`."
 		},
-		{
-			name: "disabled",
+		disabled: {
 			default: "false",
 			type: "boolean",
 			description:
 				"Whether or not the checkbox input is disabled. If not provided, it will inherit the disabled state of the Root component, which defaults to false."
 		}
-	]
+	}
 };
 
 export const indicator: APISchema = {
diff --git a/src/content/api-reference/collapsible.ts b/src/content/api-reference/collapsible.ts
index 3bb5d2b61..6235b5ba5 100644
--- a/src/content/api-reference/collapsible.ts
+++ b/src/content/api-reference/collapsible.ts
@@ -1,30 +1,29 @@
 import type { APISchema } from "@/types";
-import { asChild } from "./helpers";
+import { asChild, transitionProps } from "@/content";
+import type * as Collapsible from "$lib/bits/collapsible/_types";
 
-export const root: APISchema = {
+export const root: APISchema<Collapsible.Props> = {
 	title: "Root",
 	description: "The root collapsible container which manages the state of the collapsible.",
-	props: [
-		{
-			name: "disabled",
+	props: {
+		disabled: {
 			default: "false",
 			type: "boolean",
 			description:
 				"Whether or not the collapsible is disabled. This prevents the user from interacting with it."
 		},
-		{
-			name: "open",
+		open: {
 			default: "false",
 			type: "boolean",
 			description:
 				"The open state of the collapsible. The content will be visible when this is true, and hidden when it's false."
 		},
-		{
-			name: "onOpenChange",
+		onOpenChange: {
 			type: "(open: boolean) => void",
 			description: "A callback that is fired when the collapsible's open state changes."
-		}
-	],
+		},
+		asChild
+	},
 	dataAttributes: [
 		{
 			name: "disabled",
@@ -39,10 +38,10 @@ export const root: APISchema = {
 	]
 };
 
-export const trigger: APISchema = {
+export const trigger: APISchema<Collapsible.TriggerProps> = {
 	title: "Trigger",
 	description: "The button responsible for toggling the collapsible's open state.",
-	props: [asChild],
+	props: { asChild },
 	dataAttributes: [
 		{
 			name: "disabled",
@@ -57,10 +56,10 @@ export const trigger: APISchema = {
 	]
 };
 
-export const content: APISchema = {
+export const content: APISchema<Collapsible.ContentProps> = {
 	title: "Content",
 	description: "The content displayed when the collapsible is open.",
-	props: [asChild],
+	props: { ...transitionProps, asChild },
 	dataAttributes: [
 		{
 			name: "disabled",
diff --git a/src/content/api-reference/context-menu.ts b/src/content/api-reference/context-menu.ts
index fa2f814d7..a0de1de68 100644
--- a/src/content/api-reference/context-menu.ts
+++ b/src/content/api-reference/context-menu.ts
@@ -1,58 +1,29 @@
 import type { APISchema } from "@/types";
-import { asChild } from "./helpers";
-
-export const root: APISchema = {
+import {
+	asChild,
+	menuContentProps,
+	menuCheckboxItemProps,
+	arrowProps,
+	menuRadioGroupProps,
+	menuRadioItemProps,
+	menuItemProps,
+	menuSubProps,
+	menuSubTriggerProps,
+	menuSubContentProps,
+	menuProps
+} from "./helpers";
+import type * as ContextMenu from "$lib/bits/context-menu/_types";
+
+export const root: APISchema<ContextMenu.Props> = {
 	title: "Root",
 	description: "The root component which manages & scopes the state of the context menu.",
-	props: [
-		{
-			name: "preventScroll",
-			default: "true",
-			type: "boolean",
-			description: "Whether or not to prevent scroll on the body when the context menu is open."
-		},
-		{
-			name: "closeOnEscape",
-			default: "true",
-			type: "boolean",
-			description: "Whether to close the context menu when the escape key is pressed."
-		},
-		{
-			name: "closeOnOutsideClick",
-			type: "boolean",
-			default: "true",
-			description: "Whether to close the context menu when a click occurs outside of it."
-		},
-		{
-			name: "loop",
-			type: "boolean",
-			default: "false",
-			description:
-				"Whether or not to loop through the menu items when navigating with the keyboard."
-		},
-		{
-			name: "open",
-			type: "boolean",
-			default: "false",
-			description: "The open state of the context menu."
-		},
-		{
-			name: "onOpenChange",
-			type: "(open: boolean) => void",
-			description: "A callback that is fired when the context menu's open state changes."
-		},
-		{
-			name: "positioning",
-			type: "FloatingConfig",
-			description: "The positioning configuration for the context menu. (docs coming soon)"
-		}
-	]
+	props: menuProps
 };
 
-export const trigger: APISchema = {
+export const trigger: APISchema<ContextMenu.TriggerProps> = {
 	title: "Trigger",
 	description: "The element which when right clicked inside, opens the context menu.",
-	props: [asChild],
+	props: { asChild },
 	dataAttributes: [
 		{
 			name: "state",
@@ -62,22 +33,10 @@ export const trigger: APISchema = {
 	]
 };
 
-export const content: APISchema = {
+export const content: APISchema<ContextMenu.ContentProps> = {
 	title: "Content",
 	description: "The content displayed when the context menu is open.",
-	props: [
-		asChild,
-		{
-			name: "transition",
-			type: "(node: Element, params?: any) => TransitionConfig",
-			description: "A Svelte transition function to use when transitioning the content in and out. "
-		},
-		{
-			name: "transitionConfig",
-			type: "TransitionConfig",
-			description: "The Svelte `TransitionConfig` object to apply to the transition."
-		}
-	],
+	props: menuContentProps,
 	dataAttributes: [
 		{
 			name: "state",
@@ -87,18 +46,10 @@ export const content: APISchema = {
 	]
 };
 
-export const item: APISchema = {
+export const item: APISchema<ContextMenu.ItemProps & { href: string }> = {
 	title: "Item",
 	description: "A menu item within the context menu.",
-	props: [
-		asChild,
-		{
-			name: "disabled",
-			type: "boolean",
-			default: "false",
-			description: "Whether or not the menu item is disabled."
-		}
-	],
+	props: menuItemProps,
 	dataAttributes: [
 		{
 			name: "orientation",
@@ -113,23 +64,18 @@ export const item: APISchema = {
 	]
 };
 
-export const separator: APISchema = {
+export const separator: APISchema<ContextMenu.SeparatorProps> = {
 	title: "Separator",
-	description: "A horizontal line to visually separate menu items."
+	description: "A horizontal line to visually separate menu items.",
+	props: {
+		asChild
+	}
 };
 
-export const arrow: APISchema = {
+export const arrow: APISchema<ContextMenu.ArrowProps> = {
 	title: "Arrow",
 	description: "An optional arrow which points to the context menu's anchor/trigger point.",
-	props: [
-		asChild,
-		{
-			name: "size",
-			type: "number",
-			default: "8",
-			description: "The height and width of the arrow in pixels."
-		}
-	],
+	props: arrowProps,
 	dataAttributes: [
 		{
 			name: "arrow",
@@ -139,30 +85,10 @@ export const arrow: APISchema = {
 	]
 };
 
-export const checkboxItem: APISchema = {
+export const checkboxItem: APISchema<ContextMenu.CheckboxItemProps> = {
 	title: "CheckboxItem",
 	description: "A menu item that can be controlled and toggled like a checkbox.",
-	props: [
-		asChild,
-		{
-			name: "disabled",
-			type: "boolean",
-			default: "false",
-			description:
-				"Whether or not the checkbox menu item is disabled. Disabled items cannot be interacted with and are skipped when navigating with the keyboard."
-		},
-		{
-			name: "checked",
-			default: "false",
-			type: "boolean | 'indeterminate'",
-			description: "The checkbox menu item's checked state."
-		},
-		{
-			name: "onCheckedChange",
-			type: "(checked: boolean | 'indeterminate') => void",
-			description: "A callback that is fired when the checkbox menu item's checked state changes."
-		}
-	],
+	props: menuCheckboxItemProps,
 	dataAttributes: [
 		{
 			name: "orientation",
@@ -172,49 +98,26 @@ export const checkboxItem: APISchema = {
 	]
 };
 
-export const checkboxIndicator: APISchema = {
+export const checkboxIndicator: APISchema<ContextMenu.CheckboxItemIndicatorProps> = {
 	title: "CheckboxIndicator",
 	description:
-		"A visual indicator of the checkbox menu item's checked state. It passed the item's checked state as a slot prop `checked` and can be used to render a custom indicator."
+		"A visual indicator of the checkbox menu item's checked state. It passed the item's checked state as a slot prop `checked` and can be used to render a custom indicator.",
+	props: {
+		asChild
+	}
 };
 
-export const radioGroup: APISchema = {
+export const radioGroup: APISchema<ContextMenu.RadioGroupProps> = {
 	title: "RadioGroup",
 	description: "A group of radio menu items, where only one can be checked at a time.",
-	props: [
-		asChild,
-		{
-			name: "value",
-			type: "string",
-			description: "The value of the currently checked radio menu item."
-		},
-		{
-			name: "onValueChange",
-			type: "(value: string) => void",
-			description: "A callback that is fired when the radio group's value changes."
-		}
-	]
+	props: menuRadioGroupProps
 };
 
-export const radioItem: APISchema = {
+export const radioItem: APISchema<ContextMenu.RadioItemProps> = {
 	title: "RadioItem",
 	description:
 		"A menu item that can be controlled and toggled like a radio button. It must be a child of a `RadioGroup`.",
-	props: [
-		asChild,
-		{
-			name: "value",
-			type: "string",
-			description:
-				"The value of the radio item. When checked, the parent `RadioGroup`'s value will be set to this value."
-		},
-		{
-			name: "disabled",
-			type: "false",
-			description:
-				"Whether or not the radio menu item is disabled. Disabled items cannot be interacted with and are skipped when navigating with the keyboard."
-		}
-	]
+	props: menuRadioItemProps
 };
 
 export const radioIndicator: APISchema = {
@@ -223,41 +126,17 @@ export const radioIndicator: APISchema = {
 		"A visual indicator helper for `RadioItem`s. It only renders it's children when the radio item is checked."
 };
 
-export const sub: APISchema = {
+export const sub: APISchema<ContextMenu.SubProps> = {
 	title: "Sub",
 	description:
 		"A submenu belonging to the parent context menu. Responsible for managing the state of the submenu.",
-	props: [
-		{
-			name: "disabled",
-			type: "boolean",
-			description: "Whether or not the submenu is disabled."
-		},
-		{
-			name: "arrowSize",
-			type: "number",
-			default: "8",
-			description: "The size of the optional submenu arrow component in pixels."
-		},
-		{
-			name: "positioning",
-			type: "FloatingConfig",
-			description: "The positioning configuration for the context menu. (docs coming soon)"
-		}
-	]
+	props: menuSubProps
 };
 
-export const subTrigger: APISchema = {
+export const subTrigger: APISchema<ContextMenu.SubTriggerProps> = {
 	title: "SubTrigger",
 	description: "A menu item which when pressed or hovered, opens the submenu.",
-	props: [
-		{
-			name: "disabled",
-			type: "boolean",
-			default: "false",
-			description: "Whether or not the submenu trigger is disabled."
-		}
-	],
+	props: menuSubTriggerProps,
 	dataAttributes: [
 		{
 			name: "state",
@@ -272,22 +151,10 @@ export const subTrigger: APISchema = {
 	]
 };
 
-export const subContent: APISchema = {
+export const subContent: APISchema<ContextMenu.SubContentProps> = {
 	title: "SubContent",
 	description: "The submenu content displayed when the parent submenu is open.",
-	props: [
-		asChild,
-		{
-			name: "transition",
-			type: "(node: Element, params?: any) => TransitionConfig",
-			description: "A Svelte transition function to use when transitioning the content in and out. "
-		},
-		{
-			name: "transitionConfig",
-			type: "TransitionConfig",
-			description: "The Svelte `TransitionConfig` object to apply to the transition."
-		}
-	],
+	props: menuSubContentProps,
 	dataAttributes: [
 		{
 			name: "state",
@@ -297,16 +164,22 @@ export const subContent: APISchema = {
 	]
 };
 
-export const group: APISchema = {
+export const group: APISchema<ContextMenu.GroupProps> = {
 	title: "Group",
 	description:
-		"A group of menu items. It can be used along with the `ContextMenu.Label` component to provide a visual label for a group of menu items. When a label is within a group, appropriate aria attributes will be applied to the group."
+		"A group of menu items. It can be used along with the `ContextMenu.Label` component to provide a visual label for a group of menu items. When a label is within a group, appropriate aria attributes will be applied to the group.",
+	props: {
+		asChild
+	}
 };
 
-export const label: APISchema = {
+export const label: APISchema<ContextMenu.LabelProps> = {
 	title: "Label",
 	description:
-		"A label which will be skipped when navigating with the keyboard. It is used to provide a visual label for a group of menu items. When a label is within a `ContextMenu.Group`, appropriate aria attributes will be applied to the group."
+		"A label which will be skipped when navigating with the keyboard. It is used to provide a visual label for a group of menu items. When a label is within a `ContextMenu.Group`, appropriate aria attributes will be applied to the group.",
+	props: {
+		asChild
+	}
 };
 
 export const contextMenu = [
diff --git a/src/content/api-reference/dialog.ts b/src/content/api-reference/dialog.ts
index fd67d3de5..a33458911 100644
--- a/src/content/api-reference/dialog.ts
+++ b/src/content/api-reference/dialog.ts
@@ -1,52 +1,58 @@
 import type { APISchema } from "@/types";
-import { asChild } from "./helpers";
+import { asChild, portalProp } from "./helpers";
+import type * as Dialog from "$lib/bits/dialog/_types";
+import { focusProp } from "./extended-types";
 
-export const root: APISchema = {
+export const root: APISchema<Dialog.Props> = {
 	title: "Root",
 	description: "The root component used to set and manage the state of the dialog.",
-	props: [
-		{
-			name: "preventScroll",
+	props: {
+		preventScroll: {
 			default: "true",
 			type: "boolean",
 			description: "Whether or not to prevent scroll on the body when the dialog is open."
 		},
-		{
-			name: "closeOnEscape",
+		closeOnEscape: {
 			default: "true",
 			type: "boolean",
 			description: "Whether to close the dialog when the escape key is pressed."
 		},
-		{
-			name: "closeOnOutsideClick",
+		closeOnOutsideClick: {
 			type: "boolean",
 			default: "true",
 			description: "Whether to close the dialog when a click occurs outside of it."
 		},
-		{
-			name: "open",
+		open: {
 			type: "boolean",
 			default: "false",
 			description: "Whether or not the dialog is open."
 		},
-		{
-			name: "onOpenChange",
+		onOpenChange: {
 			type: "(open: boolean) => void",
 			description: "A callback function called when the open state changes."
-		}
-	]
+		},
+		openFocus: {
+			type: focusProp,
+			description: "Override the initial focus when the alert dialog is opened."
+		},
+		closeFocus: {
+			type: focusProp,
+			description: "Override the focus when the alert dialog is closed."
+		},
+		portal: { ...portalProp("alert dialog") }
+	}
 };
 
 export const close: APISchema = {
 	title: "Close",
 	description: "A button used to close the dialog.",
-	props: [asChild]
+	props: { asChild }
 };
 
 export const content: APISchema = {
 	title: "Content",
 	description: "The content displayed within the dialog modal.",
-	props: [asChild],
+	props: { asChild },
 	dataAttributes: [
 		{
 			name: "state",
@@ -59,25 +65,25 @@ export const content: APISchema = {
 export const title: APISchema = {
 	title: "Title",
 	description: "An accessibile title for the dialog.",
-	props: [asChild]
+	props: { asChild }
 };
 
 export const description: APISchema = {
 	title: "Description",
 	description: "An accessibile description for the dialog.",
-	props: [asChild]
+	props: { asChild }
 };
 
 export const trigger: APISchema = {
 	title: "Trigger",
 	description: "The element which opens the dialog on press.",
-	props: [asChild]
+	props: { asChild }
 };
 
 export const overlay: APISchema = {
 	title: "Overlay",
 	description: "An overlay which covers the body when the dialog is open.",
-	props: [asChild],
+	props: { asChild },
 	dataAttributes: [
 		{
 			name: "state",
@@ -89,7 +95,8 @@ export const overlay: APISchema = {
 
 export const portal: APISchema = {
 	title: "Portal",
-	description: "A portal which renders the dialog into the body when it is open."
+	description: "A portal which renders the dialog into the body when it is open.",
+	props: { asChild }
 };
 
 export const dialog = [root, trigger, content, overlay, portal, close, title, description];
diff --git a/src/content/api-reference/dropdown-menu.ts b/src/content/api-reference/dropdown-menu.ts
index f7871f10f..cb50e58fe 100644
--- a/src/content/api-reference/dropdown-menu.ts
+++ b/src/content/api-reference/dropdown-menu.ts
@@ -1,58 +1,29 @@
 import type { APISchema } from "@/types";
-import { asChild } from "./helpers";
-
-export const root: APISchema = {
+import {
+	arrowProps,
+	asChild,
+	menuCheckboxItemProps,
+	menuContentProps,
+	menuItemProps,
+	menuProps,
+	menuRadioGroupProps,
+	menuRadioItemProps,
+	menuSubContentProps,
+	menuSubProps,
+	menuSubTriggerProps
+} from "./helpers";
+import type * as DropdownMenu from "$lib/bits/dropdown-menu/_types";
+
+export const root: APISchema<DropdownMenu.Props> = {
 	title: "Root",
 	description: "The root component which manages & scopes the state of the dropdown menu.",
-	props: [
-		{
-			name: "preventScroll",
-			default: "true",
-			type: "boolean",
-			description: "Whether or not to prevent scroll on the body when the dropdown menu is open."
-		},
-		{
-			name: "closeOnEscape",
-			default: "true",
-			type: "boolean",
-			description: "Whether to close the dropdown menu when the escape key is pressed."
-		},
-		{
-			name: "closeOnOutsideClick",
-			type: "boolean",
-			default: "true",
-			description: "Whether to close the dropdown menu when a click occurs outside of it."
-		},
-		{
-			name: "loop",
-			type: "boolean",
-			default: "false",
-			description:
-				"Whether or not to loop through the menu items when navigating with the keyboard."
-		},
-		{
-			name: "open",
-			type: "boolean",
-			default: "false",
-			description: "The open state of the dropdown menu."
-		},
-		{
-			name: "onOpenChange",
-			type: "(open: boolean) => void",
-			description: "A callback that is fired when the dropdown menu's open state changes."
-		},
-		{
-			name: "positioning",
-			type: "FloatingConfig",
-			description: "The positioning configuration for the dropdown menu. (docs coming soon)"
-		}
-	]
+	props: menuProps
 };
 
-export const trigger: APISchema = {
+export const trigger: APISchema<DropdownMenu.TriggerProps> = {
 	title: "Trigger",
 	description: "The button element which toggles the dropdown menu.",
-	props: [asChild],
+	props: { asChild },
 	dataAttributes: [
 		{
 			name: "state",
@@ -62,22 +33,10 @@ export const trigger: APISchema = {
 	]
 };
 
-export const content: APISchema = {
+export const content: APISchema<DropdownMenu.ContentProps> = {
 	title: "Content",
 	description: "The content displayed when the dropdown menu is open.",
-	props: [
-		asChild,
-		{
-			name: "transition",
-			type: "(node: Element, params?: any) => TransitionConfig",
-			description: "A Svelte transition function to use when transitioning the content in and out. "
-		},
-		{
-			name: "transitionConfig",
-			type: "TransitionConfig",
-			description: "The Svelte `TransitionConfig` object to apply to the transition."
-		}
-	],
+	props: menuContentProps,
 	dataAttributes: [
 		{
 			name: "state",
@@ -87,24 +46,10 @@ export const content: APISchema = {
 	]
 };
 
-export const item: APISchema = {
+export const item: APISchema<DropdownMenu.ItemProps & { href: string }> = {
 	title: "Item",
 	description: "A menu item within the dropdown menu.",
-	props: [
-		asChild,
-		{
-			name: "disabled",
-			type: "boolean",
-			default: "false",
-			description: "Whether or not the menu item is disabled."
-		},
-		{
-			name: "href",
-			type: "string",
-			description:
-				"An optional prop that when passed converts the dropdown item into an anchor tag."
-		}
-	],
+	props: menuItemProps,
 	dataAttributes: [
 		{
 			name: "orientation",
@@ -119,23 +64,16 @@ export const item: APISchema = {
 	]
 };
 
-export const separator: APISchema = {
+export const separator: APISchema<DropdownMenu.SeparatorProps> = {
 	title: "Separator",
-	description: "A horizontal line to visually separate menu items."
+	description: "A horizontal line to visually separate menu items.",
+	props: { asChild }
 };
 
-export const arrow: APISchema = {
+export const arrow: APISchema<DropdownMenu.ArrowProps> = {
 	title: "Arrow",
 	description: "An optional arrow which points to the dropdown menu's anchor/trigger point.",
-	props: [
-		asChild,
-		{
-			name: "size",
-			type: "number",
-			default: "8",
-			description: "The height and width of the arrow in pixels."
-		}
-	],
+	props: arrowProps,
 	dataAttributes: [
 		{
 			name: "arrow",
@@ -145,30 +83,10 @@ export const arrow: APISchema = {
 	]
 };
 
-export const checkboxItem: APISchema = {
+export const checkboxItem: APISchema<DropdownMenu.CheckboxItemProps> = {
 	title: "CheckboxItem",
 	description: "A menu item that can be controlled and toggled like a checkbox.",
-	props: [
-		asChild,
-		{
-			name: "disabled",
-			type: "boolean",
-			default: "false",
-			description:
-				"Whether or not the checkbox menu item is disabled. Disabled items cannot be interacted with and are skipped when navigating with the keyboard."
-		},
-		{
-			name: "checked",
-			default: "false",
-			type: "boolean | 'indeterminate'",
-			description: "The checkbox menu item's checked state."
-		},
-		{
-			name: "onCheckedChange",
-			type: "(checked: boolean | 'indeterminate') => void",
-			description: "A callback that is fired when the checkbox menu item's checked state changes."
-		}
-	],
+	props: menuCheckboxItemProps,
 	dataAttributes: [
 		{
 			name: "orientation",
@@ -178,49 +96,24 @@ export const checkboxItem: APISchema = {
 	]
 };
 
-export const checkboxIndicator: APISchema = {
+export const checkboxIndicator: APISchema<DropdownMenu.CheckboxItemIndicatorProps> = {
 	title: "CheckboxIndicator",
 	description:
-		"A visual indicator of the checkbox menu item's checked state. It passed the item's checked state as a slot prop `checked` and can be used to render a custom indicator."
+		"A visual indicator of the checkbox menu item's checked state. It passed the item's checked state as a slot prop `checked` and can be used to render a custom indicator.",
+	props: { asChild }
 };
 
-export const radioGroup: APISchema = {
+export const radioGroup: APISchema<DropdownMenu.RadioGroupProps> = {
 	title: "RadioGroup",
 	description: "A group of radio menu items, where only one can be checked at a time.",
-	props: [
-		asChild,
-		{
-			name: "value",
-			type: "string",
-			description: "The value of the currently checked radio menu item."
-		},
-		{
-			name: "onValueChange",
-			type: "(value: string) => void",
-			description: "A callback that is fired when the radio group's value changes."
-		}
-	]
+	props: menuRadioGroupProps
 };
 
-export const radioItem: APISchema = {
+export const radioItem: APISchema<DropdownMenu.RadioItemProps> = {
 	title: "RadioItem",
 	description:
 		"A menu item that can be controlled and toggled like a radio button. It must be a child of a `RadioGroup`.",
-	props: [
-		asChild,
-		{
-			name: "value",
-			type: "string",
-			description:
-				"The value of the radio item. When checked, the parent `RadioGroup`'s value will be set to this value."
-		},
-		{
-			name: "disabled",
-			type: "false",
-			description:
-				"Whether or not the radio menu item is disabled. Disabled items cannot be interacted with and are skipped when navigating with the keyboard."
-		}
-	]
+	props: menuRadioItemProps
 };
 
 export const radioIndicator: APISchema = {
@@ -229,41 +122,17 @@ export const radioIndicator: APISchema = {
 		"A visual indicator helper for `RadioItem`s. It only renders it's children when the radio item is checked."
 };
 
-export const sub: APISchema = {
+export const sub: APISchema<DropdownMenu.SubProps> = {
 	title: "Sub",
 	description:
 		"A submenu belonging to the parent dropdown menu. Responsible for managing the state of the submenu.",
-	props: [
-		{
-			name: "disabled",
-			type: "boolean",
-			description: "Whether or not the submenu is disabled."
-		},
-		{
-			name: "arrowSize",
-			type: "number",
-			default: "8",
-			description: "The size of the optional submenu arrow component in pixels."
-		},
-		{
-			name: "positioning",
-			type: "FloatingConfig",
-			description: "The positioning configuration for the dropdown menu. (docs coming soon)"
-		}
-	]
+	props: menuSubProps
 };
 
-export const subTrigger: APISchema = {
+export const subTrigger: APISchema<DropdownMenu.SubTriggerProps> = {
 	title: "SubTrigger",
 	description: "A menu item which when pressed or hovered, opens the submenu.",
-	props: [
-		{
-			name: "disabled",
-			type: "boolean",
-			default: "false",
-			description: "Whether or not the submenu trigger is disabled."
-		}
-	],
+	props: menuSubTriggerProps,
 	dataAttributes: [
 		{
 			name: "state",
@@ -278,22 +147,16 @@ export const subTrigger: APISchema = {
 	]
 };
 
-export const subContent: APISchema = {
+export const subContent: APISchema<DropdownMenu.SubContentProps> = {
 	title: "SubContent",
 	description: "The submenu content displayed when the parent submenu is open.",
-	props: [
-		asChild,
-		{
-			name: "transition",
-			type: "(node: Element, params?: any) => TransitionConfig",
-			description: "A Svelte transition function to use when transitioning the content in and out. "
-		},
-		{
-			name: "transitionConfig",
-			type: "TransitionConfig",
-			description: "The Svelte `TransitionConfig` object to apply to the transition."
+	props: {
+		...menuSubContentProps,
+		sideOffset: {
+			type: "number",
+			description: "The amount of offset to apply to the submenu's position."
 		}
-	],
+	},
 	dataAttributes: [
 		{
 			name: "state",
@@ -303,16 +166,18 @@ export const subContent: APISchema = {
 	]
 };
 
-export const group: APISchema = {
+export const group: APISchema<DropdownMenu.GroupProps> = {
 	title: "Group",
 	description:
-		"A group of menu items. It can be used along with the `DropdownMenu.Label` component to provide a visual label for a group of menu items. When a label is within a group, appropriate aria attributes will be applied to the group."
+		"A group of menu items. It can be used along with the `DropdownMenu.Label` component to provide a visual label for a group of menu items. When a label is within a group, appropriate aria attributes will be applied to the group.",
+	props: { asChild }
 };
 
-export const label: APISchema = {
+export const label: APISchema<DropdownMenu.LabelProps> = {
 	title: "Label",
 	description:
-		"A label which will be skipped when navigating with the keyboard. It is used to provide a visual label for a group of menu items. When a label is within a `DropdownMenu.Group`, appropriate aria attributes will be applied to the group."
+		"A label which will be skipped when navigating with the keyboard. It is used to provide a visual label for a group of menu items. When a label is within a `DropdownMenu.Group`, appropriate aria attributes will be applied to the group.",
+	props: { asChild }
 };
 
 export const dropdownMenu = [
diff --git a/src/content/api-reference/helpers.ts b/src/content/api-reference/helpers.ts
index 0b665d295..6bc41a9f0 100644
--- a/src/content/api-reference/helpers.ts
+++ b/src/content/api-reference/helpers.ts
@@ -1,9 +1,34 @@
+import type { PropSchema } from "@/types";
+import { focusProp } from "./extended-types";
+
 export const asChild = {
 	type: "boolean",
 	default: "false",
 	description: "Whether to use [render delegation](/docs/delegation) with this component or not."
 };
 
+const transitionProp: PropSchema = {
+	type: {
+		type: "function",
+		definition: "(node: Element, params?: any) => TransitionConfig"
+	},
+	description: "A Svelte transition function to use when transitioning the content in and out."
+};
+
+const transitionConfigProp: PropSchema = {
+	type: "object",
+	description: "The Svelte `TransitionConfig` object to apply to the transition."
+};
+
+export const transitionProps = {
+	transition: transitionProp,
+	transitionConfig: transitionConfigProp,
+	inTransition: transitionProp,
+	inTransitionConfig: transitionConfigProp,
+	outTransition: transitionProp,
+	outTransitionConfig: transitionConfigProp
+};
+
 export function portalProp(compName: string) {
 	return {
 		type: {
@@ -26,3 +51,195 @@ export function union(...types: string[]): string {
 export function enums(...values: string[]): string {
 	return values.map((value) => `'${value}'`).join(" | ");
 }
+
+export const menuProps = {
+	preventScroll: {
+		default: "true",
+		type: "boolean",
+		description: "Whether or not to prevent scroll on the body when the menu is open."
+	},
+	closeOnEscape: {
+		default: "true",
+		type: "boolean",
+		description: "Whether to close the menu when the escape key is pressed."
+	},
+	closeOnOutsideClick: {
+		type: "boolean",
+		default: "true",
+		description: "Whether to close the menu when a click occurs outside of it."
+	},
+	loop: {
+		type: "boolean",
+		default: "false",
+		description: "Whether or not to loop through the menu items when navigating with the keyboard."
+	},
+	open: {
+		type: "boolean",
+		default: "false",
+		description: "The open state of the  menu."
+	},
+	onOpenChange: {
+		type: "(open: boolean) => void",
+		description: "A callback that is fired when the menu's open state changes."
+	},
+	positioning: {
+		type: "FloatingConfig",
+		description: "The positioning configuration for the  menu. (docs coming soon)"
+	},
+	dir: {
+		type: "'ltr' | 'rtl'",
+		description: "The direction of the context menu."
+	},
+	portal: { ...portalProp("context menu") },
+	closeFocus: {
+		type: focusProp,
+		description: "Override the focus when the menu is closed."
+	},
+	typeahead: {
+		type: "boolean",
+		default: "true",
+		description:
+			"Whether or not to enable typeahead functionality. When enabled, the user can type to navigate to menu items."
+	},
+	disableFocusFirstItem: {
+		type: "boolean",
+		default: "false",
+		description:
+			"Whether or not to disable focus on the first item when the context menu is opened."
+	}
+} as const;
+
+export const submenuProps = {
+	disabled: {
+		type: "boolean",
+		description: "Whether or not the submenu is disabled."
+	},
+	positioning: {
+		type: "FloatingConfig",
+		description: "The positioning configuration for the submenu."
+	},
+	open: {
+		type: "boolean",
+		default: "false",
+		description: "The open state of the submenu."
+	},
+	onOpenChange: {
+		type: "(open: boolean) => void",
+		description: "A callback that is fired when the submenu's open state changes."
+	}
+} as const;
+
+export const menuContentProps = {
+	...transitionProps,
+	sideOffset: {
+		type: "number",
+		default: "0",
+		description: "The amount of offset to apply to the context menu's position on the x-axis."
+	},
+	asChild
+} as const;
+
+export const menuSubContentProps = {
+	...transitionProps,
+	asChild
+} as const;
+
+export const arrowProps = {
+	asChild,
+	size: {
+		type: "number",
+		default: "8",
+		description: "The height and width of the arrow in pixels."
+	}
+} as const;
+
+export const menuCheckboxItemProps = {
+	disabled: {
+		type: "boolean",
+		default: "false",
+		description:
+			"Whether or not the checkbox menu item is disabled. Disabled items cannot be interacted with and are skipped when navigating with the keyboard."
+	},
+	checked: {
+		default: "false",
+		type: "boolean | 'indeterminate'",
+		description: "The checkbox menu item's checked state."
+	},
+	onCheckedChange: {
+		type: "(checked: boolean | 'indeterminate') => void",
+		description: "A callback that is fired when the checkbox menu item's checked state changes."
+	},
+	asChild
+} as const;
+
+export const menuRadioGroupProps = {
+	value: {
+		type: "string",
+		description: "The value of the currently checked radio menu item."
+	},
+	onValueChange: {
+		type: "(value: string) => void",
+		description: "A callback that is fired when the radio group's value changes."
+	},
+	asChild
+} as const;
+
+export const menuRadioItemProps = {
+	value: {
+		type: "string",
+		description:
+			"The value of the radio item. When checked, the parent `RadioGroup`'s value will be set to this value."
+	},
+	disabled: {
+		type: "false",
+		description:
+			"Whether or not the radio menu item is disabled. Disabled items cannot be interacted with and are skipped when navigating with the keyboard."
+	},
+	asChild
+} as const;
+
+export const menuItemProps = {
+	asChild,
+	disabled: {
+		type: "boolean",
+		default: "false",
+		description: "Whether or not the menu item is disabled."
+	},
+	href: {
+		type: "string",
+		description: "An optional prop that when passed converts the dropdown item into an anchor tag."
+	},
+	walnut: {
+		type: "hello",
+		description: "yolo"
+	}
+} as const;
+
+export const menuSubProps = {
+	disabled: {
+		type: "boolean",
+		description: "Whether or not the submenu is disabled."
+	},
+	positioning: {
+		type: "FloatingConfig",
+		description: "The positioning configuration for the submenu."
+	},
+	open: {
+		type: "boolean",
+		default: "false",
+		description: "The open state of the submenu."
+	},
+	onOpenChange: {
+		type: "(open: boolean) => void",
+		description: "A callback that is fired when the submenu's open state changes."
+	}
+} as const;
+
+export const menuSubTriggerProps = {
+	disabled: {
+		type: "boolean",
+		default: "false",
+		description: "Whether or not the submenu trigger is disabled."
+	},
+	asChild
+} as const;
diff --git a/src/content/api-reference/label.ts b/src/content/api-reference/label.ts
index dcd0ea9c2..28dabe33c 100644
--- a/src/content/api-reference/label.ts
+++ b/src/content/api-reference/label.ts
@@ -1,10 +1,11 @@
 import type { APISchema } from "@/types";
 import { asChild } from "./helpers";
+import type * as Label from "$lib/bits/label/_types";
 
-export const root: APISchema = {
+export const root: APISchema<Label.Props> = {
 	title: "Root",
 	description: "An enhanced label component that can be used with any input.",
-	props: [asChild]
+	props: { asChild }
 };
 
 export const label = [root];
diff --git a/src/content/api-reference/link-preview.ts b/src/content/api-reference/link-preview.ts
index 112320214..8c2126fba 100644
--- a/src/content/api-reference/link-preview.ts
+++ b/src/content/api-reference/link-preview.ts
@@ -1,62 +1,56 @@
 import type { APISchema } from "@/types";
-import { asChild } from "./helpers";
+import { asChild, portalProp, transitionProps } from "./helpers";
+import type * as LinkPreview from "$lib/bits/link-preview/_types";
 
-export const root: APISchema = {
+export const root: APISchema<LinkPreview.Props> = {
 	title: "Root",
 	description: "The root component used to manage the state of the state of the link preview.",
-	props: [
-		asChild,
-		{
-			name: "openDelay",
+	props: {
+		openDelay: {
 			type: "number",
 			default: "700",
 			description:
 				"The amount of time in milliseconds to delay opening the preview when hovering over the trigger."
 		},
-		{
-			name: "closeDelay",
+		closeDelay: {
 			type: "number",
 			default: "300",
 			description:
 				"The amount of time in milliseconds to delay closing the preview when the mouse leaves the trigger."
 		},
-		{
-			name: "positioning",
+		positioning: {
 			type: "FloatingConfig",
 			default: '{ position: "bottom", align: "center" }',
 			description: "The positioning configuration for the preview. (docs coming soon)"
 		},
-		{
-			name: "closeOnOutsideClick",
+		closeOnOutsideClick: {
 			type: "boolean",
 			default: "true",
 			description: "Whether or not to close the preview when clicking outside of it."
 		},
-		{
-			name: "closeOnEscape",
+		closeOnEscape: {
 			type: "boolean",
 			default: "true",
 			description: "Whether or not to close the preview when pressing the escape key."
 		},
-		{
-			name: "open",
+		open: {
 			type: "boolean",
 			default: "false",
 			description: "The open state of the link preview component."
 		},
-		{
-			name: "onOpenChange",
+		onOpenChange: {
 			type: "(open: boolean) => void",
 			description: "A callback that fires when the open state changes."
-		}
-	]
+		},
+		portal: { ...portalProp("link preview") }
+	}
 };
 
-export const trigger: APISchema = {
+export const trigger: APISchema<LinkPreview.TriggerProps> = {
 	title: "Trigger",
 	description:
 		"A component which triggers the opening and closing of the link preview on hover or focus.",
-	props: [asChild],
+	props: { asChild },
 	dataAttributes: [
 		{
 			name: "state",
@@ -66,10 +60,10 @@ export const trigger: APISchema = {
 	]
 };
 
-export const content: APISchema = {
+export const content: APISchema<LinkPreview.ContentProps> = {
 	title: "Content",
 	description: "The contents of the link preview which are displayed when the preview is open.",
-	props: [asChild],
+	props: { asChild, ...transitionProps },
 	dataAttributes: [
 		{
 			name: "state",
@@ -79,18 +73,17 @@ export const content: APISchema = {
 	]
 };
 
-export const arrow: APISchema = {
+export const arrow: APISchema<LinkPreview.ArrowProps> = {
 	title: "Arrow",
 	description: "An optional arrow element which points to the trigger when the preview is open.",
-	props: [
-		asChild,
-		{
-			name: "size",
+	props: {
+		size: {
 			type: "number",
 			default: "8",
 			description: "The height and width of the arrow in pixels."
-		}
-	],
+		},
+		asChild
+	},
 	dataAttributes: [
 		{
 			name: "arrow",
diff --git a/src/content/api-reference/menubar.ts b/src/content/api-reference/menubar.ts
index 30688983d..136adda66 100644
--- a/src/content/api-reference/menubar.ts
+++ b/src/content/api-reference/menubar.ts
@@ -1,78 +1,47 @@
 import type { APISchema } from "@/types";
-import { asChild } from "./helpers";
-
-export const root: APISchema = {
+import {
+	arrowProps,
+	asChild,
+	menuCheckboxItemProps,
+	menuContentProps,
+	menuProps,
+	menuRadioGroupProps,
+	menuRadioItemProps,
+	menuSubContentProps,
+	menuSubProps,
+	menuSubTriggerProps
+} from "./helpers";
+import type * as Menubar from "$lib/bits/menubar/_types";
+
+export const root: APISchema<Menubar.Props> = {
 	title: "Root",
 	description: "The root menubar component which manages & scopes the state of the menubar.",
-	props: [
-		{
-			name: "closeOnEscape",
+	props: {
+		closeOnEscape: {
 			default: "true",
 			type: "boolean",
 			description: "Whether to close the open menubar menu when the escape key is pressed."
 		},
-		{
-			name: "loop",
+		loop: {
 			default: "true",
 			type: "boolean",
 			description:
 				"Whether or not to loop through the menubar menu triggers when navigating with the keyboard."
-		}
-	]
+		},
+		asChild
+	}
 };
 
-export const menu: APISchema = {
+export const menu: APISchema<Menubar.MenuProps> = {
 	title: "Menu",
 	description: "A menu within the menubar.",
-	props: [
-		{
-			name: "preventScroll",
-			default: "true",
-			type: "boolean",
-			description: "Whether or not to prevent scroll on the body when the menu is open."
-		},
-		{
-			name: "closeOnEscape",
-			default: "true",
-			type: "boolean",
-			description: "Whether to close the menu when the escape key is pressed."
-		},
-		{
-			name: "closeOnOutsideClick",
-			type: "boolean",
-			default: "true",
-			description: "Whether to close the menu when a click occurs outside of it."
-		},
-		{
-			name: "loop",
-			type: "boolean",
-			default: "false",
-			description:
-				"Whether or not to loop through the menu items when navigating with the keyboard."
-		},
-		{
-			name: "open",
-			type: "boolean",
-			default: "false",
-			description: "The open state of the menu."
-		},
-		{
-			name: "onOpenChange",
-			type: "(open: boolean) => void",
-			description: "A callback that is fired when the menu's open state changes."
-		},
-		{
-			name: "positioning",
-			type: "FloatingConfig",
-			description: "The positioning configuration for the menu. (docs coming soon)"
-		}
-	]
+	props: menuProps
 };
 
-export const trigger: APISchema = {
+export const trigger: APISchema<Menubar.TriggerProps> = {
 	title: "Trigger",
 	description: "The button element which toggles the menu.",
-	props: [asChild],
+	props: { asChild },
 	dataAttributes: [
 		{
 			name: "state",
@@ -82,22 +51,10 @@ export const trigger: APISchema = {
 	]
 };
 
-export const content: APISchema = {
+export const content: APISchema<Menubar.ContentProps> = {
 	title: "Content",
 	description: "The content displayed when the menu is open.",
-	props: [
-		asChild,
-		{
-			name: "transition",
-			type: "(node: Element, params?: any) => TransitionConfig",
-			description: "A Svelte transition function to use when transitioning the content in and out. "
-		},
-		{
-			name: "transitionConfig",
-			type: "TransitionConfig",
-			description: "The Svelte `TransitionConfig` object to apply to the transition."
-		}
-	],
+	props: menuContentProps,
 	dataAttributes: [
 		{
 			name: "state",
@@ -107,18 +64,17 @@ export const content: APISchema = {
 	]
 };
 
-export const item: APISchema = {
+export const item: APISchema<Menubar.ItemProps> = {
 	title: "Item",
 	description: "A menu item within the menu.",
-	props: [
+	props: {
 		asChild,
-		{
-			name: "disabled",
+		disabled: {
 			type: "boolean",
 			default: "false",
 			description: "Whether or not the menu item is disabled."
 		}
-	],
+	},
 	dataAttributes: [
 		{
 			name: "orientation",
@@ -133,23 +89,16 @@ export const item: APISchema = {
 	]
 };
 
-export const separator: APISchema = {
+export const separator: APISchema<Menubar.SeparatorProps> = {
 	title: "Separator",
-	description: "A horizontal line to visually separate menu items."
+	description: "A horizontal line to visually separate menu items.",
+	props: { asChild }
 };
 
-export const arrow: APISchema = {
+export const arrow: APISchema<Menubar.ArrowProps> = {
 	title: "Arrow",
 	description: "An optional arrow which points to the menu's anchor/trigger point.",
-	props: [
-		asChild,
-		{
-			name: "size",
-			type: "number",
-			default: "8",
-			description: "The height and width of the arrow in pixels."
-		}
-	],
+	props: arrowProps,
 	dataAttributes: [
 		{
 			name: "arrow",
@@ -159,30 +108,10 @@ export const arrow: APISchema = {
 	]
 };
 
-export const checkboxItem: APISchema = {
+export const checkboxItem: APISchema<Menubar.CheckboxItemProps> = {
 	title: "CheckboxItem",
 	description: "A menu item that can be controlled and toggled like a checkbox.",
-	props: [
-		asChild,
-		{
-			name: "disabled",
-			type: "boolean",
-			default: "false",
-			description:
-				"Whether or not the checkbox menu item is disabled. Disabled items cannot be interacted with and are skipped when navigating with the keyboard."
-		},
-		{
-			name: "checked",
-			default: "false",
-			type: "boolean | 'indeterminate'",
-			description: "The checkbox menu item's checked state."
-		},
-		{
-			name: "onCheckedChange",
-			type: "(checked: boolean | 'indeterminate') => void",
-			description: "A callback that is fired when the checkbox menu item's checked state changes."
-		}
-	],
+	props: menuCheckboxItemProps,
 	dataAttributes: [
 		{
 			name: "orientation",
@@ -192,49 +121,24 @@ export const checkboxItem: APISchema = {
 	]
 };
 
-export const checkboxIndicator: APISchema = {
+export const checkboxIndicator: APISchema<Menubar.CheckboxIndicatorProps> = {
 	title: "CheckboxIndicator",
 	description:
-		"A visual indicator of the checkbox menu item's checked state. It passed the item's checked state as a slot prop `checked` and can be used to render a custom indicator."
+		"A visual indicator of the checkbox menu item's checked state. It passed the item's checked state as a slot prop `checked` and can be used to render a custom indicator.",
+	props: { asChild }
 };
 
-export const radioGroup: APISchema = {
+export const radioGroup: APISchema<Menubar.RadioGroupProps> = {
 	title: "RadioGroup",
 	description: "A group of radio menu items, where only one can be checked at a time.",
-	props: [
-		asChild,
-		{
-			name: "value",
-			type: "string",
-			description: "The value of the currently checked radio menu item."
-		},
-		{
-			name: "onValueChange",
-			type: "(value: string) => void",
-			description: "A callback that is fired when the radio group's value changes."
-		}
-	]
+	props: menuRadioGroupProps
 };
 
-export const radioItem: APISchema = {
+export const radioItem: APISchema<Menubar.RadioItemProps> = {
 	title: "RadioItem",
 	description:
 		"A menu item that can be controlled and toggled like a radio button. It must be a child of a `RadioGroup`.",
-	props: [
-		asChild,
-		{
-			name: "value",
-			type: "string",
-			description:
-				"The value of the radio item. When checked, the parent `RadioGroup`'s value will be set to this value."
-		},
-		{
-			name: "disabled",
-			type: "false",
-			description:
-				"Whether or not the radio menu item is disabled. Disabled items cannot be interacted with and are skipped when navigating with the keyboard."
-		}
-	]
+	props: menuRadioItemProps
 };
 
 export const radioIndicator: APISchema = {
@@ -243,41 +147,17 @@ export const radioIndicator: APISchema = {
 		"A visual indicator helper for `RadioItem`s. It only renders it's children when the radio item is checked."
 };
 
-export const sub: APISchema = {
+export const sub: APISchema<Menubar.SubProps> = {
 	title: "Sub",
 	description:
 		"A submenu belonging to the parent menu. Responsible for managing the state of the submenu.",
-	props: [
-		{
-			name: "disabled",
-			type: "boolean",
-			description: "Whether or not the submenu is disabled."
-		},
-		{
-			name: "arrowSize",
-			type: "number",
-			default: "8",
-			description: "The size of the optional submenu arrow component in pixels."
-		},
-		{
-			name: "positioning",
-			type: "FloatingConfig",
-			description: "The positioning configuration for the menu. (docs coming soon)"
-		}
-	]
+	props: menuSubProps
 };
 
-export const subTrigger: APISchema = {
+export const subTrigger: APISchema<Menubar.SubTriggerProps> = {
 	title: "SubTrigger",
 	description: "A menu item which when pressed or hovered, opens the submenu.",
-	props: [
-		{
-			name: "disabled",
-			type: "boolean",
-			default: "false",
-			description: "Whether or not the submenu trigger is disabled."
-		}
-	],
+	props: menuSubTriggerProps,
 	dataAttributes: [
 		{
 			name: "state",
@@ -292,22 +172,17 @@ export const subTrigger: APISchema = {
 	]
 };
 
-export const subContent: APISchema = {
+export const subContent: APISchema<Menubar.SubContentProps> = {
 	title: "SubContent",
 	description: "The submenu content displayed when the parent submenu is open.",
-	props: [
-		asChild,
-		{
-			name: "transition",
-			type: "(node: Element, params?: any) => TransitionConfig",
-			description: "A Svelte transition function to use when transitioning the content in and out. "
-		},
-		{
-			name: "transitionConfig",
-			type: "TransitionConfig",
-			description: "The Svelte `TransitionConfig` object to apply to the transition."
+	props: {
+		...menuSubContentProps,
+		sideOffset: {
+			type: "number",
+			default: "0",
+			description: "The offset of the submenu from the parent menu."
 		}
-	],
+	},
 	dataAttributes: [
 		{
 			name: "state",
@@ -317,16 +192,18 @@ export const subContent: APISchema = {
 	]
 };
 
-export const group: APISchema = {
+export const group: APISchema<Menubar.GroupProps> = {
 	title: "Group",
 	description:
-		"A group of menu items. It can be used along with the `DropdownMenu.Label` component to provide a visual label for a group of menu items. When a label is within a group, appropriate aria attributes will be applied to the group."
+		"A group of menu items. It can be used along with the `DropdownMenu.Label` component to provide a visual label for a group of menu items. When a label is within a group, appropriate aria attributes will be applied to the group.",
+	props: { asChild }
 };
 
-export const label: APISchema = {
+export const label: APISchema<Menubar.LabelProps> = {
 	title: "Label",
 	description:
-		"A label which will be skipped when navigating with the keyboard. It is used to provide a visual label for a group of menu items. When a label is within a `DropdownMenu.Group`, appropriate aria attributes will be applied to the group."
+		"A label which will be skipped when navigating with the keyboard. It is used to provide a visual label for a group of menu items. When a label is within a `DropdownMenu.Group`, appropriate aria attributes will be applied to the group.",
+	props: { asChild }
 };
 
 export const menubar = [
diff --git a/src/content/api-reference/popover.ts b/src/content/api-reference/popover.ts
index 09ac6b006..2e1a1420c 100644
--- a/src/content/api-reference/popover.ts
+++ b/src/content/api-reference/popover.ts
@@ -1,60 +1,64 @@
 import type { APISchema } from "@/types/index.js";
-import { asChild } from "./helpers.js";
+import { arrowProps, asChild } from "./helpers.js";
+import type * as Popover from "$lib/bits/popover/_types";
+import { focusProp } from "./extended-types/index.js";
+import { portalProp } from "./helpers";
 
-export const root: APISchema = {
+export const root: APISchema<Popover.Props> = {
 	title: "Root",
 	description: "The root component used to manage the state of the state of the popover.",
-	props: [
-		asChild,
-		{
-			name: "disableFocusTrap",
+	props: {
+		disableFocusTrap: {
 			type: "boolean",
 			default: "false",
 			description:
 				"Whether or not to disable the focus trap that is applied to the popover when it's open."
 		},
-		{
-			name: "preventScroll",
+		preventScroll: {
 			type: "boolean",
 			default: "false",
 			description: "Whether or not to prevent scrolling the body while the popover is open."
 		},
-		{
-			name: "positioning",
+		positioning: {
 			type: "FloatingConfig",
 			default: '{ position: "bottom", align: "center" }',
 			description: "The positioning configuration for the popover. (docs coming soon)"
 		},
-		{
-			name: "closeOnOutsideClick",
+		closeOnOutsideClick: {
 			type: "boolean",
 			default: "true",
 			description: "Whether or not to close the popover when clicking outside of it."
 		},
-		{
-			name: "closeOnEscape",
+		closeOnEscape: {
 			type: "boolean",
 			default: "true",
 			description: "Whether or not to close the popover when pressing the escape key."
 		},
-		{
-			name: "open",
+		open: {
 			type: "boolean",
 			default: "false",
 			description: "The open state of the link popover component."
 		},
-		{
-			name: "onOpenChange",
+		onOpenChange: {
 			type: "(open: boolean) => void",
 			description: "A callback that fires when the open state changes."
-		}
-	]
+		},
+		openFocus: {
+			type: focusProp,
+			description: "Override the focus when the popover is opened."
+		},
+		closeFocus: {
+			type: focusProp,
+			description: "Override the focus when the popover is closed."
+		},
+		portal: { ...portalProp("popover") }
+	}
 };
 
 export const trigger: APISchema = {
 	title: "Trigger",
 	description: "A component which toggles the opening and closing of the popover on press.",
-	props: [asChild],
+	props: { asChild },
 	dataAttributes: [
 		{
 			name: "state",
@@ -67,28 +71,20 @@ export const trigger: APISchema = {
 export const content: APISchema = {
 	title: "Content",
 	description: "The contents of the popover which are displayed when the popover is open.",
-	props: [asChild]
+	props: { asChild }
 };
 
 export const close: APISchema = {
 	title: "Close",
 	description:
 		"A button which closes the popover when pressed and is typically placed in the content.",
-	props: [asChild]
+	props: { asChild }
 };
 
 export const arrow: APISchema = {
 	title: "Arrow",
 	description: "An optional arrow element which points to the trigger when the popover is open.",
-	props: [
-		asChild,
-		{
-			name: "size",
-			type: "number",
-			default: "8",
-			description: "The height and width of the arrow in pixels."
-		}
-	],
+	props: arrowProps,
 	dataAttributes: [
 		{
 			name: "arrow",
diff --git a/src/lib/bits/accordion/_types.ts b/src/lib/bits/accordion/_types.ts
index c4a5c6c9d..ecbb83d7d 100644
--- a/src/lib/bits/accordion/_types.ts
+++ b/src/lib/bits/accordion/_types.ts
@@ -2,6 +2,7 @@ import type {
 	ObjectVariation,
 	Transition,
 	OmitValue,
+	OmitForceVisible,
 	Expand,
 	OnChangeFn,
 	AsChild,
@@ -14,7 +15,7 @@ import type {
 } from "@melt-ui/svelte";
 
 type Props<Multiple extends boolean> = Expand<
-	OmitValue<CreateAccordionProps<Multiple>> & {
+	OmitValue<OmitForceVisible<CreateAccordionProps<Multiple>>> & {
 		/**
 		 * The value of the accordion.
 		 * You can bind this to a value to programmatically control the open state.
diff --git a/src/lib/bits/avatar/_types.ts b/src/lib/bits/avatar/_types.ts
index a80b0e218..6792a0c7d 100644
--- a/src/lib/bits/avatar/_types.ts
+++ b/src/lib/bits/avatar/_types.ts
@@ -6,6 +6,7 @@
 
 import type { Expand, AsChild, OnChangeFn } from "$lib/internal/index.js";
 import type { CreateAvatarProps } from "@melt-ui/svelte";
+import type { HTMLImgAttributes } from "svelte/elements";
 
 type Props = Expand<
 	Omit<CreateAvatarProps, "onLoadingStatusChange" | "loadingStatus" | "src"> & {
@@ -22,7 +23,12 @@ type Props = Expand<
 	} & AsChild
 >;
 
-type ImageProps = AsChild;
+type ImageProps = Expand<
+	{
+		src?: HTMLImgAttributes["src"];
+		alt?: HTMLImgAttributes["alt"];
+	} & AsChild
+>;
 
 type FallbackProps = AsChild;
 
diff --git a/src/lib/bits/context-menu/_types.ts b/src/lib/bits/context-menu/_types.ts
index 1cccc53c5..baf738bf5 100644
--- a/src/lib/bits/context-menu/_types.ts
+++ b/src/lib/bits/context-menu/_types.ts
@@ -8,12 +8,17 @@ import type {
 	AsChild,
 	Expand,
 	OmitChecked,
+	OmitFloating,
 	OmitOpen,
 	OnChangeFn,
 	Transition,
 	TransitionProps
 } from "$lib/internal/index.js";
-import type { FloatingArrowProps, MenuContentProps } from "$lib/shared/index.js";
+import type {
+	FloatingArrowProps,
+	MenuContentProps,
+	MenuSubTriggerProps
+} from "$lib/shared/index.js";
 import type {
 	CreateContextMenuProps,
 	CreateContextMenuRadioGroupProps,
@@ -23,7 +28,7 @@ import type {
 } from "@melt-ui/svelte";
 
 type Props = Expand<
-	OmitOpen<Omit<CreateContextMenuProps, "ids" | "arrowSize">> & {
+	OmitFloating<CreateContextMenuProps> & {
 		/**
 		 * The open state of the context menu.
 		 * You can bind this to a boolean value to programmatically control the open state.
@@ -114,17 +119,6 @@ type SubContentProps<
 	Out extends Transition = Transition
 > = Expand<TransitionProps<T, In, Out> & AsChild>;
 
-type SubTriggerProps = Expand<
-	{
-		/**
-		 * Whether the subtrigger is disabled or not.
-		 *
-		 * @defaultValue false;
-		 */
-		disabled?: boolean;
-	} & AsChild
->;
-
 type TriggerProps = AsChild;
 
 export type {
@@ -141,6 +135,6 @@ export type {
 	SeparatorProps,
 	SubProps,
 	SubContentProps,
-	SubTriggerProps,
+	MenuSubTriggerProps as SubTriggerProps,
 	TriggerProps
 };
diff --git a/src/lib/bits/dialog/_types.ts b/src/lib/bits/dialog/_types.ts
index 3e0dbadb1..8d1589d55 100644
--- a/src/lib/bits/dialog/_types.ts
+++ b/src/lib/bits/dialog/_types.ts
@@ -15,7 +15,7 @@ import type {
 import type { CreateDialogProps } from "@melt-ui/svelte";
 
 type Props = Expand<
-	OmitOpen<Omit<CreateDialogProps, "role" | "ids">> & {
+	OmitOpen<Omit<CreateDialogProps, "role" | "ids" | "forceVisible">> & {
 		/**
 		 * The open state of the dialog.
 		 * You can bind this to a boolean value to programmatically control the open state.
diff --git a/src/lib/bits/dropdown-menu/_types.ts b/src/lib/bits/dropdown-menu/_types.ts
index 4a0e5ce8d..401bd88e7 100644
--- a/src/lib/bits/dropdown-menu/_types.ts
+++ b/src/lib/bits/dropdown-menu/_types.ts
@@ -12,7 +12,8 @@ import type {
 	OmitIds,
 	OnChangeFn,
 	Transition,
-	OmitChecked
+	OmitChecked,
+	OmitFloating
 } from "$lib/internal/index.js";
 import type { CustomEventHandler } from "$lib/index.js";
 import type {
@@ -22,10 +23,14 @@ import type {
 	CreateDropdownSubmenuProps,
 	CreateDropdownMenuCheckboxItemProps
 } from "@melt-ui/svelte";
-import type { FloatingArrowProps, MenuContentProps } from "$lib/shared/index.js";
+import type {
+	FloatingArrowProps,
+	MenuContentProps,
+	MenuSubTriggerProps
+} from "$lib/shared/index.js";
 
 type Props = Expand<
-	OmitOpen<OmitIds<Omit<CreateDropdownMenuProps, "arrowSize">>> & {
+	OmitFloating<CreateDropdownMenuProps> & {
 		/**
 		 * The open state of the dropdown menu.
 		 * You can bind this to a boolean value to programmatically control the open state.
@@ -121,12 +126,6 @@ type SubContentProps<
 		AsChild
 >;
 
-type SubTriggerProps = Expand<
-	{
-		disabled?: boolean;
-	} & AsChild
->;
-
 type TriggerProps = AsChild;
 
 type ItemEvents<T extends Element = HTMLDivElement> = {
@@ -142,6 +141,7 @@ type ItemEvents<T extends Element = HTMLDivElement> = {
 export type {
 	FloatingArrowProps as ArrowProps,
 	MenuContentProps as ContentProps,
+	MenuSubTriggerProps as SubTriggerProps,
 	CheckboxItemIndicatorProps,
 	CheckboxItemProps,
 	GroupProps,
@@ -154,6 +154,5 @@ export type {
 	SeparatorProps,
 	SubContentProps,
 	SubProps,
-	SubTriggerProps,
 	TriggerProps
 };
diff --git a/src/lib/bits/link-preview/_types.ts b/src/lib/bits/link-preview/_types.ts
index 2a6ccb216..53533e81f 100644
--- a/src/lib/bits/link-preview/_types.ts
+++ b/src/lib/bits/link-preview/_types.ts
@@ -4,12 +4,12 @@
  * but we don't want to document the HTML attributes.
  */
 
-import type { OmitOpen, Expand, OnChangeFn, AsChild, OmitIds } from "$lib/internal/index.js";
+import type { Expand, OnChangeFn, AsChild, OmitFloating } from "$lib/internal/index.js";
 import type { FloatingArrowProps, FloatingContentProps } from "$lib/shared/index.js";
 import type { CreateLinkPreviewProps } from "@melt-ui/svelte";
 
 type Props = Expand<
-	OmitOpen<OmitIds<Omit<CreateLinkPreviewProps, "arrowSize">>> & {
+	OmitFloating<CreateLinkPreviewProps> & {
 		/**
 		 * The open state of the link preview.
 		 * You can bind this to a boolean value to programmatically control the open state.
diff --git a/src/lib/bits/menubar/_types.ts b/src/lib/bits/menubar/_types.ts
index 106ff6f0d..8ae4737e9 100644
--- a/src/lib/bits/menubar/_types.ts
+++ b/src/lib/bits/menubar/_types.ts
@@ -8,12 +8,16 @@ import type {
 	AsChild,
 	Expand,
 	OmitChecked,
-	OmitOpen,
 	OmitValue,
 	OnChangeFn,
-	OmitIds
+	OmitIds,
+	OmitFloating
 } from "$lib/internal/index.js";
-import type { FloatingArrowProps, MenuContentProps } from "$lib/shared/index.js";
+import type {
+	FloatingArrowProps,
+	MenuContentProps,
+	MenuSubTriggerProps
+} from "$lib/shared/index.js";
 import type {
 	CreateMenubarProps,
 	CreateMenubarMenuProps,
@@ -26,7 +30,7 @@ import type {
 type Props = Expand<OmitIds<CreateMenubarProps> & AsChild>;
 
 type MenuProps = Expand<
-	OmitOpen<OmitIds<Omit<CreateMenubarMenuProps, "arrowSize">>> & {
+	OmitFloating<CreateMenubarMenuProps> & {
 		/**
 		 * The open state of the menu.
 		 * You can bind this to a boolean value to programmatically control the open state.
@@ -105,7 +109,7 @@ type RadioItemProps = Expand<MenubarRadioItemProps & AsChild>;
 type SeparatorProps = AsChild;
 
 type SubProps = Expand<
-	OmitIds<OmitOpen<Omit<CreateMenubarSubmenuProps, "arrowSize">>> & {
+	OmitFloating<CreateMenubarSubmenuProps> & {
 		/**
 		 * The open state of the submenu.
 		 * You can bind this to a boolean value to programmatically control the open state.
@@ -121,12 +125,6 @@ type SubProps = Expand<
 	}
 >;
 
-type SubTriggerProps = Expand<
-	{
-		disabled?: boolean;
-	} & AsChild
->;
-
 type TriggerProps = AsChild;
 
 export type {
@@ -143,7 +141,7 @@ export type {
 	SeparatorProps,
 	RadioGroupProps,
 	MenuContentProps as SubContentProps,
-	SubTriggerProps,
+	MenuSubTriggerProps as SubTriggerProps,
 	CheckboxItemProps,
 	CheckboxIndicatorProps
 };
diff --git a/src/lib/shared/menu.ts b/src/lib/shared/menu.ts
index 742394adb..2a9b992cf 100644
--- a/src/lib/shared/menu.ts
+++ b/src/lib/shared/menu.ts
@@ -1,4 +1,4 @@
-import type { Transition } from "$lib/internal";
+import type { AsChild, Transition } from "$lib/internal";
 import type { FloatingContentProps } from "./index.js";
 
 export type MenuContentProps<
@@ -8,5 +8,17 @@ export type MenuContentProps<
 > = Expand<
 	{
 		sideOffset?: number;
-	} & FloatingContentProps<T, In, Out>
+	} & FloatingContentProps<T, In, Out> &
+		AsChild
+>;
+
+export type MenuSubTriggerProps = Expand<
+	{
+		/**
+		 * Whether the subtrigger is disabled or not.
+		 *
+		 * @defaultValue false;
+		 */
+		disabled?: boolean;
+	} & AsChild
 >;

From a2d24530332fa7b1db57b666263366a0f66d5d40 Mon Sep 17 00:00:00 2001
From: Hunter Johnston <johnstonhuntera@gmail.com>
Date: Thu, 16 Nov 2023 17:14:39 -0500
Subject: [PATCH 025/217] many more type updates whew

---
 src/content/api-reference/accordion.ts        |   2 +-
 src/content/api-reference/alert-dialog.ts     |  10 +-
 src/content/api-reference/aspect-ratio.ts     |   3 +-
 src/content/api-reference/avatar.ts           |  19 +-
 src/content/api-reference/button.ts           |   4 +-
 src/content/api-reference/checkbox.ts         |  43 ++--
 src/content/api-reference/collapsible.ts      |  32 ++-
 src/content/api-reference/context-menu.ts     | 102 ++++----
 src/content/api-reference/dialog.ts           |  63 +++--
 src/content/api-reference/dropdown-menu.ts    | 111 +++++----
 .../extended-types/floating-config.ts         | 100 ++++++++
 .../api-reference/extended-types/index.ts     |   6 +
 src/content/api-reference/helpers.ts          | 219 ++----------------
 src/content/api-reference/link-preview.ts     |  40 ++--
 src/content/api-reference/menu.ts             | 201 ++++++++++++++++
 src/content/api-reference/menubar.ts          | 140 ++++++-----
 src/content/api-reference/popover.ts          |  48 ++--
 src/content/api-reference/progress.ts         |  34 +--
 src/content/api-reference/radio-group.ts      |  89 +++----
 src/content/api-reference/select.ts           | 201 ++++++++--------
 src/content/api-reference/separator.ts        |  37 +--
 src/content/{api-reference => }/constants.ts  |   3 +
 src/content/index.ts                          |   1 +
 src/lib/bits/context-menu/types.ts            | 149 ++++--------
 src/lib/bits/dropdown-menu/_types.ts          | 158 -------------
 src/lib/bits/dropdown-menu/types.ts           | 170 +++++---------
 .../floating.ts => bits/floating/_types.ts}   |   4 +-
 src/lib/bits/{context-menu => menu}/_types.ts | 115 ++++-----
 src/lib/bits/menu/index.ts                    |   1 +
 src/lib/bits/menu/types.ts                    | 124 +++++++++-
 src/lib/bits/menubar/_types.ts                | 141 +----------
 src/lib/bits/menubar/types.ts                 | 124 +++-------
 src/lib/bits/popover/_types.ts                |  10 +-
 src/lib/bits/select/_types.ts                 |   6 +-
 src/lib/shared/index.ts                       |   7 -
 src/lib/shared/menu.ts                        |  24 --
 36 files changed, 1169 insertions(+), 1372 deletions(-)
 create mode 100644 src/content/api-reference/extended-types/floating-config.ts
 create mode 100644 src/content/api-reference/menu.ts
 rename src/content/{api-reference => }/constants.ts (74%)
 delete mode 100644 src/lib/bits/dropdown-menu/_types.ts
 rename src/lib/{shared/floating.ts => bits/floating/_types.ts} (79%)
 rename src/lib/bits/{context-menu => menu}/_types.ts (60%)
 create mode 100644 src/lib/bits/menu/index.ts
 delete mode 100644 src/lib/shared/index.ts
 delete mode 100644 src/lib/shared/menu.ts

diff --git a/src/content/api-reference/accordion.ts b/src/content/api-reference/accordion.ts
index 7b0735132..24dcb6fe5 100644
--- a/src/content/api-reference/accordion.ts
+++ b/src/content/api-reference/accordion.ts
@@ -1,5 +1,5 @@
 import type { APISchema } from "@/types";
-import * as C from "@/content/api-reference/constants";
+import * as C from "@/content/constants";
 import { union, enums, asChild, transitionProps } from "@/content";
 import type * as Accordion from "$lib/bits/accordion/_types.js";
 
diff --git a/src/content/api-reference/alert-dialog.ts b/src/content/api-reference/alert-dialog.ts
index be906c8bd..4e4351440 100644
--- a/src/content/api-reference/alert-dialog.ts
+++ b/src/content/api-reference/alert-dialog.ts
@@ -1,6 +1,6 @@
 import type { APISchema } from "@/types";
 import { asChild, enums, portalProp, transitionProps } from "./helpers";
-import * as C from "@/content/api-reference/constants";
+import * as C from "@/content/constants";
 import { focusProp } from "@/content/api-reference/extended-types";
 import type * as AlertDialog from "$lib/bits/alert-dialog/_types.js";
 
@@ -10,22 +10,22 @@ export const root: APISchema<AlertDialog.Props> = {
 	props: {
 		preventScroll: {
 			type: C.BOOLEAN,
-			default: "true",
+			default: C.TRUE,
 			description: "Whether or not to prevent scroll on the body when the alert dialog is open."
 		},
 		closeOnEscape: {
 			type: C.BOOLEAN,
-			default: "true",
+			default: C.TRUE,
 			description: "Whether to close the alert dialog when the escape key is pressed."
 		},
 		closeOnOutsideClick: {
 			type: C.BOOLEAN,
-			default: "true",
+			default: C.TRUE,
 			description: "Whether to close the alert dialog when a click occurs outside of it."
 		},
 		open: {
 			type: C.BOOLEAN,
-			default: "false",
+			default: C.FALSE,
 			description: "Whether or not the alert dialog is open."
 		},
 		onOpenChange: {
diff --git a/src/content/api-reference/aspect-ratio.ts b/src/content/api-reference/aspect-ratio.ts
index ec1d2b8d4..1922746e5 100644
--- a/src/content/api-reference/aspect-ratio.ts
+++ b/src/content/api-reference/aspect-ratio.ts
@@ -1,13 +1,14 @@
 import type { APISchema } from "@/types";
 import type * as AspectRatio from "$lib/bits/aspect-ratio/_types.js";
+import * as C from "@/content/constants";
 
 export const root: APISchema<AspectRatio.Props> = {
 	title: "Root",
 	description: "The aspect ratio component.",
 	props: {
 		ratio: {
+			type: C.NUMBER,
 			default: "1",
-			type: "number",
 			description: "The desired aspect ratio."
 		}
 	}
diff --git a/src/content/api-reference/avatar.ts b/src/content/api-reference/avatar.ts
index b3f834140..c1a28dbd7 100644
--- a/src/content/api-reference/avatar.ts
+++ b/src/content/api-reference/avatar.ts
@@ -1,24 +1,31 @@
 import type { APISchema } from "@/types";
-import { asChild } from "./helpers.js";
+import { asChild, enums } from "./helpers.js";
 import type * as Avatar from "$lib/bits/avatar/_types";
+import * as C from "@/content/constants.js";
 
 export const root: APISchema<Avatar.Props> = {
 	title: "Root",
 	description: "The root component used to set and manage the state of the avatar.",
 	props: {
 		delayMs: {
+			type: C.NUMBER,
 			default: "0",
-			type: "number",
 			description:
 				"How long to wait before showing the image after it has loaded. This can be useful to prevent a harsh flickering effect when the image loads quickly."
 		},
 		loadingStatus: {
-			type: "'loading' | 'loaded' | 'error'",
+			type: {
+				type: "LoadingStatus",
+				definition: enums("loading", "loaded", "error")
+			},
 			description:
 				"The loading status of the avatars source image. You can bind a variable to track the status outside of the component and use it to show a loading indicator or error message."
 		},
 		onLoadingStatusChange: {
-			type: "(status: 'loading' | 'loaded' | 'error') => void",
+			type: {
+				type: C.FUNCTION,
+				definition: "(status: LoadingStatus) => void"
+			},
 			description: "A callback function called when the loading status of the image changes."
 		},
 		asChild
@@ -30,12 +37,12 @@ export const image: APISchema<Avatar.ImageProps> = {
 	description: "The avatar image displayed once it has loaded.",
 	props: {
 		src: {
-			type: "string",
+			type: "HTMLImgAttributes['src']",
 			description:
 				"The source of the image. This is typed the same as the native `img` element so you can use any valid `img` `src` value."
 		},
 		alt: {
-			type: "string",
+			type: "HTMLImgAttributes['src']",
 			description:
 				"The alt text of the image. This is typed the same as the native `img` element so you can use any valid `img` `alt` value."
 		},
diff --git a/src/content/api-reference/button.ts b/src/content/api-reference/button.ts
index 286e9798f..cbe4e462c 100644
--- a/src/content/api-reference/button.ts
+++ b/src/content/api-reference/button.ts
@@ -1,6 +1,6 @@
 import type { APISchema } from "@/types";
 import type * as Button from "$lib/bits/button/_types";
-
+import * as C from "@/content/constants";
 export const root: APISchema<Button.Props & { href: string }> = {
 	title: "Root",
 	description:
@@ -12,7 +12,7 @@ export const root: APISchema<Button.Props & { href: string }> = {
 			description: "An array of melt builders to be applied to the button."
 		},
 		href: {
-			type: "string",
+			type: C.STRING,
 			description: "An optional prop that when passed converts the button into an anchor tag."
 		}
 	}
diff --git a/src/content/api-reference/checkbox.ts b/src/content/api-reference/checkbox.ts
index a7305aa08..350921c4b 100644
--- a/src/content/api-reference/checkbox.ts
+++ b/src/content/api-reference/checkbox.ts
@@ -1,38 +1,44 @@
-import { asChild } from "@/content";
+import { asChild, enums, union } from "@/content";
 import type { APISchema } from "@/types";
 import type * as Checkbox from "$lib/bits/checkbox/_types";
-
+import * as C from "@/content/constants";
 export const root: APISchema<Checkbox.Props> = {
 	title: "Root",
 	description: "The button component used to toggle the state of the checkbox.",
 	props: {
 		disabled: {
-			default: "false",
-			type: "boolean",
+			default: C.FALSE,
+			type: C.BOOLEAN,
 			description:
 				"Whether or not the checkbox button is disabled. This prevents the user from interacting with it."
 		},
 		checked: {
-			default: "false",
-			type: "boolean | 'indeterminate'",
+			default: C.FALSE,
+			type: {
+				type: C.ENUM,
+				definition: union("boolean", "'indeterminate'")
+			},
 			description:
 				"The checkbox button's checked state. This can be a boolean or the string 'indeterminate', which would typically display a dash in the checkbox."
 		},
 		onCheckedChange: {
-			type: "(checked: boolean | 'indeterminate') => void",
+			type: {
+				type: C.FUNCTION,
+				definition: "(checked: boolean | 'indeterminate') => void"
+			},
 			description: "A callback that is fired when the checkbox button's checked state changes."
 		},
 		required: {
-			default: "false",
-			type: "boolean",
+			default: C.FALSE,
+			type: C.BOOLEAN,
 			description: "Whether or not the checkbox is required."
 		},
 		name: {
-			type: "string",
+			type: C.STRING,
 			description: "The name of the checkbox. This is used for form submission."
 		},
 		value: {
-			type: "string",
+			type: C.STRING,
 			description: "The value of the checkbox. This is used for form submission."
 		},
 		asChild
@@ -45,7 +51,7 @@ export const root: APISchema<Checkbox.Props> = {
 		},
 		{
 			name: "state",
-			value: "'checked' | 'unchecked' | 'indeterminate'",
+			value: enums("checked", "unchecked", "indeterminate"),
 			description: "The checkbox's state. Can be 'checked', 'unchecked', or 'indeterminate'."
 		}
 	]
@@ -57,24 +63,25 @@ export const input: APISchema = {
 		"The hidden input element that is used to store the checkbox's state for form submission. It receives all the same props as a regular HTML input element.",
 	props: {
 		value: {
-			default: "false",
-			type: "boolean",
+			default: C.FALSE,
+			type: C.BOOLEAN,
 			description:
 				"Unless a value is provided, the input's value will be a boolean that represents the checkbox's checked state. Indeterminate checkboxes will have a value of `false`."
 		},
 		disabled: {
-			default: "false",
-			type: "boolean",
+			default: C.FALSE,
+			type: C.BOOLEAN,
 			description:
 				"Whether or not the checkbox input is disabled. If not provided, it will inherit the disabled state of the Root component, which defaults to false."
 		}
 	}
 };
 
-export const indicator: APISchema = {
+export const indicator: APISchema<Checkbox.IndicatorProps> = {
 	title: "Indicator",
 	description:
-		"A component which passes `isChecked` and `isIndeterminate` slot props to its children. This is useful for rendering the checkbox's indicator icon depending on its state."
+		"A component which passes `isChecked` and `isIndeterminate` slot props to its children. This is useful for rendering the checkbox's indicator icon depending on its state.",
+	props: { asChild }
 };
 
 export const checkbox = [root, input, indicator];
diff --git a/src/content/api-reference/collapsible.ts b/src/content/api-reference/collapsible.ts
index 6235b5ba5..06d974326 100644
--- a/src/content/api-reference/collapsible.ts
+++ b/src/content/api-reference/collapsible.ts
@@ -1,25 +1,28 @@
-import type { APISchema } from "@/types";
-import { asChild, transitionProps } from "@/content";
+import type { APISchema, PropObj } from "@/types";
+import { asChild, enums, transitionProps } from "@/content";
 import type * as Collapsible from "$lib/bits/collapsible/_types";
-
+import * as C from "@/content/constants";
 export const root: APISchema<Collapsible.Props> = {
 	title: "Root",
 	description: "The root collapsible container which manages the state of the collapsible.",
 	props: {
 		disabled: {
-			default: "false",
-			type: "boolean",
+			default: C.FALSE,
+			type: C.BOOLEAN,
 			description:
 				"Whether or not the collapsible is disabled. This prevents the user from interacting with it."
 		},
 		open: {
-			default: "false",
-			type: "boolean",
+			default: C.FALSE,
+			type: C.BOOLEAN,
 			description:
 				"The open state of the collapsible. The content will be visible when this is true, and hidden when it's false."
 		},
 		onOpenChange: {
-			type: "(open: boolean) => void",
+			type: {
+				type: C.FUNCTION,
+				definition: "(open: boolean) => void"
+			},
 			description: "A callback that is fired when the collapsible's open state changes."
 		},
 		asChild
@@ -32,7 +35,7 @@ export const root: APISchema<Collapsible.Props> = {
 		},
 		{
 			name: "state",
-			value: "'open' | 'closed'",
+			value: enums("open", "closed"),
 			description: "The collapsible's open state."
 		}
 	]
@@ -50,16 +53,21 @@ export const trigger: APISchema<Collapsible.TriggerProps> = {
 		},
 		{
 			name: "state",
-			value: "'open' | 'closed'",
+			value: enums("open", "closed"),
 			description: "The collapsible's open state."
 		}
 	]
 };
 
+const contentProps = {
+	...transitionProps,
+	asChild
+} satisfies PropObj<Collapsible.ContentProps>;
+
 export const content: APISchema<Collapsible.ContentProps> = {
 	title: "Content",
 	description: "The content displayed when the collapsible is open.",
-	props: { ...transitionProps, asChild },
+	props: contentProps,
 	dataAttributes: [
 		{
 			name: "disabled",
@@ -68,7 +76,7 @@ export const content: APISchema<Collapsible.ContentProps> = {
 		},
 		{
 			name: "state",
-			value: "'open' | 'closed'",
+			value: enums("open", "closed"),
 			description: "The collapsible's open state."
 		}
 	]
diff --git a/src/content/api-reference/context-menu.ts b/src/content/api-reference/context-menu.ts
index a0de1de68..b636fb561 100644
--- a/src/content/api-reference/context-menu.ts
+++ b/src/content/api-reference/context-menu.ts
@@ -1,29 +1,33 @@
 import type { APISchema } from "@/types";
 import {
-	asChild,
-	menuContentProps,
-	menuCheckboxItemProps,
 	arrowProps,
-	menuRadioGroupProps,
-	menuRadioItemProps,
-	menuItemProps,
-	menuSubProps,
-	menuSubTriggerProps,
-	menuSubContentProps,
-	menuProps
-} from "./helpers";
-import type * as ContextMenu from "$lib/bits/context-menu/_types";
-
-export const root: APISchema<ContextMenu.Props> = {
+	props,
+	checkboxItemProps,
+	contentProps,
+	itemProps,
+	radioGroupProps,
+	radioItemProps,
+	separatorProps,
+	triggerProps,
+	groupProps,
+	labelProps,
+	subProps,
+	subTriggerProps,
+	subContentProps,
+	checkboxIndicatorProps
+} from "./menu";
+import type * as Menu from "$lib/bits/menu/_types";
+
+export const root: APISchema<Menu.Props> = {
 	title: "Root",
 	description: "The root component which manages & scopes the state of the context menu.",
-	props: menuProps
+	props
 };
 
-export const trigger: APISchema<ContextMenu.TriggerProps> = {
+export const trigger: APISchema<Menu.TriggerProps> = {
 	title: "Trigger",
-	description: "The element which when right clicked inside, opens the context menu.",
-	props: { asChild },
+	description: "The element which when right-clicked, opens the context menu.",
+	props: triggerProps,
 	dataAttributes: [
 		{
 			name: "state",
@@ -33,10 +37,10 @@ export const trigger: APISchema<ContextMenu.TriggerProps> = {
 	]
 };
 
-export const content: APISchema<ContextMenu.ContentProps> = {
+export const content: APISchema<Menu.ContentProps> = {
 	title: "Content",
 	description: "The content displayed when the context menu is open.",
-	props: menuContentProps,
+	props: contentProps,
 	dataAttributes: [
 		{
 			name: "state",
@@ -46,10 +50,10 @@ export const content: APISchema<ContextMenu.ContentProps> = {
 	]
 };
 
-export const item: APISchema<ContextMenu.ItemProps & { href: string }> = {
+export const item: APISchema<Menu.ItemProps & { href: string }> = {
 	title: "Item",
 	description: "A menu item within the context menu.",
-	props: menuItemProps,
+	props: itemProps,
 	dataAttributes: [
 		{
 			name: "orientation",
@@ -64,15 +68,13 @@ export const item: APISchema<ContextMenu.ItemProps & { href: string }> = {
 	]
 };
 
-export const separator: APISchema<ContextMenu.SeparatorProps> = {
+export const separator: APISchema<Menu.SeparatorProps> = {
 	title: "Separator",
 	description: "A horizontal line to visually separate menu items.",
-	props: {
-		asChild
-	}
+	props: separatorProps
 };
 
-export const arrow: APISchema<ContextMenu.ArrowProps> = {
+export const arrow: APISchema<Menu.ArrowProps> = {
 	title: "Arrow",
 	description: "An optional arrow which points to the context menu's anchor/trigger point.",
 	props: arrowProps,
@@ -85,10 +87,10 @@ export const arrow: APISchema<ContextMenu.ArrowProps> = {
 	]
 };
 
-export const checkboxItem: APISchema<ContextMenu.CheckboxItemProps> = {
+export const checkboxItem: APISchema<Menu.CheckboxItemProps> = {
 	title: "CheckboxItem",
 	description: "A menu item that can be controlled and toggled like a checkbox.",
-	props: menuCheckboxItemProps,
+	props: checkboxItemProps,
 	dataAttributes: [
 		{
 			name: "orientation",
@@ -98,26 +100,24 @@ export const checkboxItem: APISchema<ContextMenu.CheckboxItemProps> = {
 	]
 };
 
-export const checkboxIndicator: APISchema<ContextMenu.CheckboxItemIndicatorProps> = {
+export const checkboxIndicator: APISchema<Menu.CheckboxItemIndicatorProps> = {
 	title: "CheckboxIndicator",
 	description:
 		"A visual indicator of the checkbox menu item's checked state. It passed the item's checked state as a slot prop `checked` and can be used to render a custom indicator.",
-	props: {
-		asChild
-	}
+	props: checkboxIndicatorProps
 };
 
-export const radioGroup: APISchema<ContextMenu.RadioGroupProps> = {
+export const radioGroup: APISchema<Menu.RadioGroupProps> = {
 	title: "RadioGroup",
 	description: "A group of radio menu items, where only one can be checked at a time.",
-	props: menuRadioGroupProps
+	props: radioGroupProps
 };
 
-export const radioItem: APISchema<ContextMenu.RadioItemProps> = {
+export const radioItem: APISchema<Menu.RadioItemProps> = {
 	title: "RadioItem",
 	description:
 		"A menu item that can be controlled and toggled like a radio button. It must be a child of a `RadioGroup`.",
-	props: menuRadioItemProps
+	props: radioItemProps
 };
 
 export const radioIndicator: APISchema = {
@@ -126,17 +126,17 @@ export const radioIndicator: APISchema = {
 		"A visual indicator helper for `RadioItem`s. It only renders it's children when the radio item is checked."
 };
 
-export const sub: APISchema<ContextMenu.SubProps> = {
+export const sub: APISchema<Menu.SubProps> = {
 	title: "Sub",
 	description:
 		"A submenu belonging to the parent context menu. Responsible for managing the state of the submenu.",
-	props: menuSubProps
+	props: subProps
 };
 
-export const subTrigger: APISchema<ContextMenu.SubTriggerProps> = {
+export const subTrigger: APISchema<Menu.SubTriggerProps> = {
 	title: "SubTrigger",
 	description: "A menu item which when pressed or hovered, opens the submenu.",
-	props: menuSubTriggerProps,
+	props: subTriggerProps,
 	dataAttributes: [
 		{
 			name: "state",
@@ -151,10 +151,10 @@ export const subTrigger: APISchema<ContextMenu.SubTriggerProps> = {
 	]
 };
 
-export const subContent: APISchema<ContextMenu.SubContentProps> = {
+export const subContent: APISchema<Menu.SubContentProps> = {
 	title: "SubContent",
 	description: "The submenu content displayed when the parent submenu is open.",
-	props: menuSubContentProps,
+	props: subContentProps,
 	dataAttributes: [
 		{
 			name: "state",
@@ -164,22 +164,18 @@ export const subContent: APISchema<ContextMenu.SubContentProps> = {
 	]
 };
 
-export const group: APISchema<ContextMenu.GroupProps> = {
+export const group: APISchema<Menu.GroupProps> = {
 	title: "Group",
 	description:
-		"A group of menu items. It can be used along with the `ContextMenu.Label` component to provide a visual label for a group of menu items. When a label is within a group, appropriate aria attributes will be applied to the group.",
-	props: {
-		asChild
-	}
+		"A group of menu items. It can be used along with the `Menu.Label` component to provide a visual label for a group of menu items. When a label is within a group, appropriate aria attributes will be applied to the group.",
+	props: groupProps
 };
 
-export const label: APISchema<ContextMenu.LabelProps> = {
+export const label: APISchema<Menu.LabelProps> = {
 	title: "Label",
 	description:
-		"A label which will be skipped when navigating with the keyboard. It is used to provide a visual label for a group of menu items. When a label is within a `ContextMenu.Group`, appropriate aria attributes will be applied to the group.",
-	props: {
-		asChild
-	}
+		"A label which will be skipped when navigating with the keyboard. It is used to provide a visual label for a group of menu items. When a label is within a `Menu.Group`, appropriate aria attributes will be applied to the group.",
+	props: labelProps
 };
 
 export const contextMenu = [
diff --git a/src/content/api-reference/dialog.ts b/src/content/api-reference/dialog.ts
index a33458911..3e8904b46 100644
--- a/src/content/api-reference/dialog.ts
+++ b/src/content/api-reference/dialog.ts
@@ -1,99 +1,112 @@
 import type { APISchema } from "@/types";
-import { asChild, portalProp } from "./helpers";
+import { asChild, enums, portalProp, transitionProps } from "./helpers";
 import type * as Dialog from "$lib/bits/dialog/_types";
 import { focusProp } from "./extended-types";
+import * as C from "@/content/constants";
 
 export const root: APISchema<Dialog.Props> = {
 	title: "Root",
 	description: "The root component used to set and manage the state of the dialog.",
 	props: {
 		preventScroll: {
-			default: "true",
-			type: "boolean",
+			type: C.BOOLEAN,
+			default: C.TRUE,
 			description: "Whether or not to prevent scroll on the body when the dialog is open."
 		},
 		closeOnEscape: {
-			default: "true",
-			type: "boolean",
+			type: C.BOOLEAN,
+			default: C.TRUE,
 			description: "Whether to close the dialog when the escape key is pressed."
 		},
 		closeOnOutsideClick: {
-			type: "boolean",
-			default: "true",
+			type: C.BOOLEAN,
+			default: C.TRUE,
 			description: "Whether to close the dialog when a click occurs outside of it."
 		},
 		open: {
-			type: "boolean",
-			default: "false",
+			type: C.BOOLEAN,
+			default: C.FALSE,
 			description: "Whether or not the dialog is open."
 		},
 		onOpenChange: {
-			type: "(open: boolean) => void",
+			type: {
+				type: C.FUNCTION,
+				definition: "(open: boolean) => void"
+			},
 			description: "A callback function called when the open state changes."
 		},
 		openFocus: {
 			type: focusProp,
-			description: "Override the initial focus when the alert dialog is opened."
+			description: "Override the initial focus when the dialog is opened."
 		},
 		closeFocus: {
 			type: focusProp,
-			description: "Override the focus when the alert dialog is closed."
+			description: "Override the focus when the dialog is closed."
 		},
-		portal: { ...portalProp("alert dialog") }
+		portal: { ...portalProp("dialog") }
 	}
 };
 
-export const close: APISchema = {
+export const close: APISchema<Dialog.CloseProps> = {
 	title: "Close",
 	description: "A button used to close the dialog.",
 	props: { asChild }
 };
 
-export const content: APISchema = {
+export const content: APISchema<Dialog.ContentProps> = {
 	title: "Content",
 	description: "The content displayed within the dialog modal.",
-	props: { asChild },
+	props: { ...transitionProps, asChild },
 	dataAttributes: [
 		{
 			name: "state",
-			value: "'open' | 'closed'",
+			value: enums("open", "closed"),
 			description: "The state of the dialog."
 		}
 	]
 };
 
-export const title: APISchema = {
+export const title: APISchema<Dialog.TitleProps> = {
 	title: "Title",
 	description: "An accessibile title for the dialog.",
-	props: { asChild }
+	props: {
+		level: {
+			type: {
+				type: C.ENUM,
+				definition: enums("h1", "h2", "h3", "h4", "h5", "h6")
+			},
+			description: "The heading level of the title."
+		},
+		asChild
+	}
 };
 
-export const description: APISchema = {
+export const description: APISchema<Dialog.DescriptionProps> = {
 	title: "Description",
 	description: "An accessibile description for the dialog.",
 	props: { asChild }
 };
 
-export const trigger: APISchema = {
+export const trigger: APISchema<Dialog.TriggerProps> = {
 	title: "Trigger",
 	description: "The element which opens the dialog on press.",
 	props: { asChild }
 };
 
-export const overlay: APISchema = {
+export const overlay: APISchema<Dialog.OverlayProps> = {
 	title: "Overlay",
 	description: "An overlay which covers the body when the dialog is open.",
-	props: { asChild },
+	props: { ...transitionProps, asChild },
 	dataAttributes: [
 		{
 			name: "state",
-			value: "'open' | 'closed'",
+			value: enums("open", "closed"),
 			description: "The state of the dialog."
 		}
 	]
 };
 
-export const portal: APISchema = {
+export const portal: APISchema<Dialog.PortalProps> = {
 	title: "Portal",
 	description: "A portal which renders the dialog into the body when it is open.",
 	props: { asChild }
diff --git a/src/content/api-reference/dropdown-menu.ts b/src/content/api-reference/dropdown-menu.ts
index cb50e58fe..cb81538bb 100644
--- a/src/content/api-reference/dropdown-menu.ts
+++ b/src/content/api-reference/dropdown-menu.ts
@@ -1,59 +1,64 @@
 import type { APISchema } from "@/types";
 import {
 	arrowProps,
-	asChild,
-	menuCheckboxItemProps,
-	menuContentProps,
-	menuItemProps,
-	menuProps,
-	menuRadioGroupProps,
-	menuRadioItemProps,
-	menuSubContentProps,
-	menuSubProps,
-	menuSubTriggerProps
-} from "./helpers";
-import type * as DropdownMenu from "$lib/bits/dropdown-menu/_types";
-
-export const root: APISchema<DropdownMenu.Props> = {
+	props,
+	checkboxItemProps,
+	contentProps,
+	itemProps,
+	radioGroupProps,
+	radioItemProps,
+	separatorProps,
+	triggerProps,
+	groupProps,
+	labelProps,
+	subProps,
+	subTriggerProps,
+	subContentProps,
+	checkboxIndicatorProps
+} from "./menu";
+import type * as Menu from "$lib/bits/menu/_types";
+import { enums } from "..";
+
+export const root: APISchema<Menu.Props> = {
 	title: "Root",
 	description: "The root component which manages & scopes the state of the dropdown menu.",
-	props: menuProps
+	props
 };
 
-export const trigger: APISchema<DropdownMenu.TriggerProps> = {
+export const trigger: APISchema<Menu.TriggerProps> = {
 	title: "Trigger",
 	description: "The button element which toggles the dropdown menu.",
-	props: { asChild },
+	props: triggerProps,
 	dataAttributes: [
 		{
 			name: "state",
-			value: "'open' | 'closed'",
+			value: enums("open", "closed"),
 			description: "The dropdown menu's open state."
 		}
 	]
 };
 
-export const content: APISchema<DropdownMenu.ContentProps> = {
+export const content: APISchema<Menu.ContentProps> = {
 	title: "Content",
 	description: "The content displayed when the dropdown menu is open.",
-	props: menuContentProps,
+	props: contentProps,
 	dataAttributes: [
 		{
 			name: "state",
-			value: "'open' | 'closed'",
+			value: enums("open", "closed"),
 			description: "The collapsible's open state."
 		}
 	]
 };
 
-export const item: APISchema<DropdownMenu.ItemProps & { href: string }> = {
+export const item: APISchema<Menu.ItemProps & { href: string }> = {
 	title: "Item",
 	description: "A menu item within the dropdown menu.",
-	props: menuItemProps,
+	props: itemProps,
 	dataAttributes: [
 		{
 			name: "orientation",
-			value: "'horizontal' | 'vertical'",
+			value: enums("horizontal", "vertical"),
 			description: "The orientation of the dropdown menu item."
 		},
 		{
@@ -64,13 +69,13 @@ export const item: APISchema<DropdownMenu.ItemProps & { href: string }> = {
 	]
 };
 
-export const separator: APISchema<DropdownMenu.SeparatorProps> = {
+export const separator: APISchema<Menu.SeparatorProps> = {
 	title: "Separator",
 	description: "A horizontal line to visually separate menu items.",
-	props: { asChild }
+	props: separatorProps
 };
 
-export const arrow: APISchema<DropdownMenu.ArrowProps> = {
+export const arrow: APISchema<Menu.ArrowProps> = {
 	title: "Arrow",
 	description: "An optional arrow which points to the dropdown menu's anchor/trigger point.",
 	props: arrowProps,
@@ -83,37 +88,37 @@ export const arrow: APISchema<DropdownMenu.ArrowProps> = {
 	]
 };
 
-export const checkboxItem: APISchema<DropdownMenu.CheckboxItemProps> = {
+export const checkboxItem: APISchema<Menu.CheckboxItemProps> = {
 	title: "CheckboxItem",
 	description: "A menu item that can be controlled and toggled like a checkbox.",
-	props: menuCheckboxItemProps,
+	props: checkboxItemProps,
 	dataAttributes: [
 		{
 			name: "orientation",
-			value: "'horizontal' | 'vertical'",
+			value: enums("horizontal", "vertical"),
 			description: "The orientation of the checkbox menu item."
 		}
 	]
 };
 
-export const checkboxIndicator: APISchema<DropdownMenu.CheckboxItemIndicatorProps> = {
+export const checkboxIndicator: APISchema<Menu.CheckboxItemIndicatorProps> = {
 	title: "CheckboxIndicator",
 	description:
 		"A visual indicator of the checkbox menu item's checked state. It passed the item's checked state as a slot prop `checked` and can be used to render a custom indicator.",
-	props: { asChild }
+	props: checkboxIndicatorProps
 };
 
-export const radioGroup: APISchema<DropdownMenu.RadioGroupProps> = {
+export const radioGroup: APISchema<Menu.RadioGroupProps> = {
 	title: "RadioGroup",
 	description: "A group of radio menu items, where only one can be checked at a time.",
-	props: menuRadioGroupProps
+	props: radioGroupProps
 };
 
-export const radioItem: APISchema<DropdownMenu.RadioItemProps> = {
+export const radioItem: APISchema<Menu.RadioItemProps> = {
 	title: "RadioItem",
 	description:
 		"A menu item that can be controlled and toggled like a radio button. It must be a child of a `RadioGroup`.",
-	props: menuRadioItemProps
+	props: radioItemProps
 };
 
 export const radioIndicator: APISchema = {
@@ -122,21 +127,21 @@ export const radioIndicator: APISchema = {
 		"A visual indicator helper for `RadioItem`s. It only renders it's children when the radio item is checked."
 };
 
-export const sub: APISchema<DropdownMenu.SubProps> = {
+export const sub: APISchema<Menu.SubProps> = {
 	title: "Sub",
 	description:
 		"A submenu belonging to the parent dropdown menu. Responsible for managing the state of the submenu.",
-	props: menuSubProps
+	props: subProps
 };
 
-export const subTrigger: APISchema<DropdownMenu.SubTriggerProps> = {
+export const subTrigger: APISchema<Menu.SubTriggerProps> = {
 	title: "SubTrigger",
 	description: "A menu item which when pressed or hovered, opens the submenu.",
-	props: menuSubTriggerProps,
+	props: subTriggerProps,
 	dataAttributes: [
 		{
 			name: "state",
-			value: "'open' | 'closed'",
+			value: enums("open", "closed"),
 			description: "The submenu's open state."
 		},
 		{
@@ -147,37 +152,31 @@ export const subTrigger: APISchema<DropdownMenu.SubTriggerProps> = {
 	]
 };
 
-export const subContent: APISchema<DropdownMenu.SubContentProps> = {
+export const subContent: APISchema<Menu.SubContentProps> = {
 	title: "SubContent",
 	description: "The submenu content displayed when the parent submenu is open.",
-	props: {
-		...menuSubContentProps,
-		sideOffset: {
-			type: "number",
-			description: "The amount of offset to apply to the submenu's position."
-		}
-	},
+	props: subContentProps,
 	dataAttributes: [
 		{
 			name: "state",
-			value: "'open' | 'closed'",
+			value: enums("open", "closed"),
 			description: "The submenu's open state."
 		}
 	]
 };
 
-export const group: APISchema<DropdownMenu.GroupProps> = {
+export const group: APISchema<Menu.GroupProps> = {
 	title: "Group",
 	description:
-		"A group of menu items. It can be used along with the `DropdownMenu.Label` component to provide a visual label for a group of menu items. When a label is within a group, appropriate aria attributes will be applied to the group.",
-	props: { asChild }
+		"A group of menu items. It can be used along with the `Menu.Label` component to provide a visual label for a group of menu items. When a label is within a group, appropriate aria attributes will be applied to the group.",
+	props: groupProps
 };
 
-export const label: APISchema<DropdownMenu.LabelProps> = {
+export const label: APISchema<Menu.LabelProps> = {
 	title: "Label",
 	description:
-		"A label which will be skipped when navigating with the keyboard. It is used to provide a visual label for a group of menu items. When a label is within a `DropdownMenu.Group`, appropriate aria attributes will be applied to the group.",
-	props: { asChild }
+		"A label which will be skipped when navigating with the keyboard. It is used to provide a visual label for a group of menu items. When a label is within a `Menu.Group`, appropriate aria attributes will be applied to the group.",
+	props: labelProps
 };
 
 export const dropdownMenu = [
diff --git a/src/content/api-reference/extended-types/floating-config.ts b/src/content/api-reference/extended-types/floating-config.ts
new file mode 100644
index 000000000..d285d30b8
--- /dev/null
+++ b/src/content/api-reference/extended-types/floating-config.ts
@@ -0,0 +1,100 @@
+type FloatingConfig = {
+	/**
+	 * The initial placement of the floating element.
+	 * @defaultValue `"top"`
+	 *
+	 * @see https://floating-ui.com/docs/computePosition#placement
+	 */
+	placement?:
+		| "top"
+		| "top-start"
+		| "top-end"
+		| "right"
+		| "right-start"
+		| "right-end"
+		| "bottom"
+		| "bottom-start"
+		| "bottom-end"
+		| "left"
+		| "left-start"
+		| "left-end";
+
+	/**
+	 * The strategy to use for positioning.
+	 * @defaultValue `"absolute"`
+	 *
+	 * @see https://floating-ui.com/docs/computePosition#placement
+	 */
+	strategy?: "absolute" | "fixed";
+
+	/**
+	 * The offset of the floating element.
+	 *
+	 * @see https://floating-ui.com/docs/offset#options
+	 */
+	offset?: { mainAxis?: number; crossAxis?: number };
+
+	/**
+	 * The main axis offset or gap between the reference and floating elements.
+	 * @defaultValue `5`
+	 *
+	 * @see https://floating-ui.com/docs/offset#options
+	 */
+	gutter?: number;
+
+	/**
+	 * The virtual padding around the viewport edges to check for overflow.
+	 * @defaultValue `8`
+	 *
+	 * @see https://floating-ui.com/docs/detectOverflow#padding
+	 */
+	overflowPadding?: number;
+
+	/**
+	 * Whether to flip the placement.
+	 * @defaultValue `true`
+	 *
+	 * @see https://floating-ui.com/docs/flip
+	 */
+	flip?: boolean;
+
+	/**
+	 * Whether the floating element can overlap the reference element.
+	 * @defaultValue `false`
+	 *
+	 * @see https://floating-ui.com/docs/shift#options
+	 */
+	overlap?: boolean;
+
+	/**
+	 * Whether to make the floating element same width as the reference element.
+	 * @defaultValue `false`
+	 *
+	 * @see https://floating-ui.com/docs/size
+	 */
+	sameWidth?: boolean;
+
+	/**
+	 * Whether the floating element should fit the viewport.
+	 * @defaultValue `false`
+	 *
+	 * @see https://floating-ui.com/docs/size
+	 */
+	fitViewport?: boolean;
+
+	/**
+	 * The overflow boundary of the reference element.
+	 *
+	 * @see https://floating-ui.com/docs/detectoverflow#boundary
+	 */
+	boundary?: Boundary;
+};
+
+type Boundary = "clippingAncestors" | Element | Array<Element> | Rect;
+
+type Rect = {
+	x: number;
+	y: number;
+	width: number;
+	height: number;
+};
diff --git a/src/content/api-reference/extended-types/index.ts b/src/content/api-reference/extended-types/index.ts
index 90c8e7113..4bff9efdb 100644
--- a/src/content/api-reference/extended-types/index.ts
+++ b/src/content/api-reference/extended-types/index.ts
@@ -1,7 +1,13 @@
 import type { PropType } from "@/types";
 import rawFocusProp from "@/content/api-reference/extended-types/focus-target.js?raw";
+import rawFloatingConfigProp from "@/content/api-reference/extended-types/floating-config.js?raw";
 
 export const focusProp: PropType = {
 	type: "FocusProp",
 	definition: rawFocusProp
 };
+
+export const floatingConfigProp: PropType = {
+	type: "FloatingConfig",
+	definition: rawFloatingConfigProp
+};
diff --git a/src/content/api-reference/helpers.ts b/src/content/api-reference/helpers.ts
index 6bc41a9f0..05c65add6 100644
--- a/src/content/api-reference/helpers.ts
+++ b/src/content/api-reference/helpers.ts
@@ -1,22 +1,30 @@
 import type { PropSchema } from "@/types";
-import { focusProp } from "./extended-types";
+import * as C from "@/content/constants";
 
 export const asChild = {
-	type: "boolean",
-	default: "false",
+	type: C.BOOLEAN,
+	default: C.FALSE,
 	description: "Whether to use [render delegation](/docs/delegation) with this component or not."
 };
+export const arrowProps = {
+	asChild,
+	size: {
+		type: C.NUMBER,
+		default: "8",
+		description: "The height and width of the arrow in pixels."
+	}
+};
 
 const transitionProp: PropSchema = {
 	type: {
-		type: "function",
+		type: C.FUNCTION,
 		definition: "(node: Element, params?: any) => TransitionConfig"
 	},
 	description: "A Svelte transition function to use when transitioning the content in and out."
 };
 
 const transitionConfigProp: PropSchema = {
-	type: "object",
+	type: C.OBJECT,
 	description: "The Svelte `TransitionConfig` object to apply to the transition."
 };
 
@@ -29,21 +37,16 @@ export const transitionProps = {
 	outTransitionConfig: transitionConfigProp
 };
 
-export function portalProp(compName: string) {
+export function portalProp(compName = "content") {
 	return {
 		type: {
-			type: "union",
+			type: C.UNION,
 			definition: union("string", "HTMLElement", "null", "undefined")
 		},
 		description: `Where to render the ${compName} when it is open. Defaults to the body. Can be disabled by passing \`null\``
 	};
 }
 
-export const portal = {
-	type: "union",
-	definition: ""
-};
-
 export function union(...types: string[]): string {
 	return types.join(" | ");
 }
@@ -51,195 +54,3 @@ export function union(...types: string[]): string {
 export function enums(...values: string[]): string {
 	return values.map((value) => `'${value}'`).join(" | ");
 }
-
-export const menuProps = {
-	preventScroll: {
-		default: "true",
-		type: "boolean",
-		description: "Whether or not to prevent scroll on the body when the menu is open."
-	},
-	closeOnEscape: {
-		default: "true",
-		type: "boolean",
-		description: "Whether to close the menu when the escape key is pressed."
-	},
-	closeOnOutsideClick: {
-		type: "boolean",
-		default: "true",
-		description: "Whether to close the menu when a click occurs outside of it."
-	},
-	loop: {
-		type: "boolean",
-		default: "false",
-		description: "Whether or not to loop through the menu items when navigating with the keyboard."
-	},
-	open: {
-		type: "boolean",
-		default: "false",
-		description: "The open state of the  menu."
-	},
-	onOpenChange: {
-		type: "(open: boolean) => void",
-		description: "A callback that is fired when the menu's open state changes."
-	},
-	positioning: {
-		type: "FloatingConfig",
-		description: "The positioning configuration for the  menu. (docs coming soon)"
-	},
-	dir: {
-		type: "'ltr' | 'rtl'",
-		description: "The direction of the context menu."
-	},
-	portal: { ...portalProp("context menu") },
-	closeFocus: {
-		type: focusProp,
-		description: "Override the focus when the menu is closed."
-	},
-	typeahead: {
-		type: "boolean",
-		default: "true",
-		description:
-			"Whether or not to enable typeahead functionality. When enabled, the user can type to navigate to menu items."
-	},
-	disableFocusFirstItem: {
-		type: "boolean",
-		default: "false",
-		description:
-			"Whether or not to disable focus on the first item when the context menu is opened."
-	}
-} as const;
-
-export const submenuProps = {
-	disabled: {
-		type: "boolean",
-		description: "Whether or not the submenu is disabled."
-	},
-	positioning: {
-		type: "FloatingConfig",
-		description: "The positioning configuration for the submenu."
-	},
-	open: {
-		type: "boolean",
-		default: "false",
-		description: "The open state of the submenu."
-	},
-	onOpenChange: {
-		type: "(open: boolean) => void",
-		description: "A callback that is fired when the submenu's open state changes."
-	}
-} as const;
-
-export const menuContentProps = {
-	...transitionProps,
-	sideOffset: {
-		type: "number",
-		default: "0",
-		description: "The amount of offset to apply to the context menu's position on the x-axis."
-	},
-	asChild
-} as const;
-
-export const menuSubContentProps = {
-	...transitionProps,
-	asChild
-} as const;
-
-export const arrowProps = {
-	asChild,
-	size: {
-		type: "number",
-		default: "8",
-		description: "The height and width of the arrow in pixels."
-	}
-} as const;
-
-export const menuCheckboxItemProps = {
-	disabled: {
-		type: "boolean",
-		default: "false",
-		description:
-			"Whether or not the checkbox menu item is disabled. Disabled items cannot be interacted with and are skipped when navigating with the keyboard."
-	},
-	checked: {
-		default: "false",
-		type: "boolean | 'indeterminate'",
-		description: "The checkbox menu item's checked state."
-	},
-	onCheckedChange: {
-		type: "(checked: boolean | 'indeterminate') => void",
-		description: "A callback that is fired when the checkbox menu item's checked state changes."
-	},
-	asChild
-} as const;
-
-export const menuRadioGroupProps = {
-	value: {
-		type: "string",
-		description: "The value of the currently checked radio menu item."
-	},
-	onValueChange: {
-		type: "(value: string) => void",
-		description: "A callback that is fired when the radio group's value changes."
-	},
-	asChild
-} as const;
-
-export const menuRadioItemProps = {
-	value: {
-		type: "string",
-		description:
-			"The value of the radio item. When checked, the parent `RadioGroup`'s value will be set to this value."
-	},
-	disabled: {
-		type: "false",
-		description:
-			"Whether or not the radio menu item is disabled. Disabled items cannot be interacted with and are skipped when navigating with the keyboard."
-	},
-	asChild
-} as const;
-
-export const menuItemProps = {
-	asChild,
-	disabled: {
-		type: "boolean",
-		default: "false",
-		description: "Whether or not the menu item is disabled."
-	},
-	href: {
-		type: "string",
-		description: "An optional prop that when passed converts the dropdown item into an anchor tag."
-	},
-	walnut: {
-		type: "hello",
-		description: "yolo"
-	}
-} as const;
-
-export const menuSubProps = {
-	disabled: {
-		type: "boolean",
-		description: "Whether or not the submenu is disabled."
-	},
-	positioning: {
-		type: "FloatingConfig",
-		description: "The positioning configuration for the submenu."
-	},
-	open: {
-		type: "boolean",
-		default: "false",
-		description: "The open state of the submenu."
-	},
-	onOpenChange: {
-		type: "(open: boolean) => void",
-		description: "A callback that is fired when the submenu's open state changes."
-	}
-} as const;
-
-export const menuSubTriggerProps = {
-	disabled: {
-		type: "boolean",
-		default: "false",
-		description: "Whether or not the submenu trigger is disabled."
-	},
-	asChild
-} as const;
diff --git a/src/content/api-reference/link-preview.ts b/src/content/api-reference/link-preview.ts
index 8c2126fba..406aa1e16 100644
--- a/src/content/api-reference/link-preview.ts
+++ b/src/content/api-reference/link-preview.ts
@@ -1,45 +1,50 @@
 import type { APISchema } from "@/types";
-import { asChild, portalProp, transitionProps } from "./helpers";
+import { arrowProps, asChild, enums, portalProp, transitionProps } from "./helpers";
 import type * as LinkPreview from "$lib/bits/link-preview/_types";
+import * as C from "@/content/constants";
+import { floatingConfigProp } from "./extended-types";
 
 export const root: APISchema<LinkPreview.Props> = {
 	title: "Root",
 	description: "The root component used to manage the state of the state of the link preview.",
 	props: {
 		openDelay: {
-			type: "number",
+			type: C.NUMBER,
 			default: "700",
 			description:
 				"The amount of time in milliseconds to delay opening the preview when hovering over the trigger."
 		},
 		closeDelay: {
-			type: "number",
+			type: C.NUMBER,
 			default: "300",
 			description:
 				"The amount of time in milliseconds to delay closing the preview when the mouse leaves the trigger."
 		},
 		positioning: {
-			type: "FloatingConfig",
+			type: floatingConfigProp,
 			default: '{ position: "bottom", align: "center" }',
 			description: "The positioning configuration for the preview. (docs coming soon)"
 		},
 		closeOnOutsideClick: {
-			type: "boolean",
-			default: "true",
+			type: C.BOOLEAN,
+			default: C.TRUE,
 			description: "Whether or not to close the preview when clicking outside of it."
 		},
 		closeOnEscape: {
-			type: "boolean",
-			default: "true",
+			type: C.BOOLEAN,
+			default: C.TRUE,
 			description: "Whether or not to close the preview when pressing the escape key."
 		},
 		open: {
-			type: "boolean",
+			type: C.BOOLEAN,
 			default: "false",
 			description: "The open state of the link preview component."
 		},
 		onOpenChange: {
-			type: "(open: boolean) => void",
+			type: {
+				type: C.FUNCTION,
+				definition: "(open: boolean) => void"
+			},
 			description: "A callback that fires when the open state changes."
 		},
 		portal: { ...portalProp("link preview") }
@@ -54,7 +59,7 @@ export const trigger: APISchema<LinkPreview.TriggerProps> = {
 	dataAttributes: [
 		{
 			name: "state",
-			value: "'open' | 'closed'",
+			value: enums("open", "closed"),
 			description: "The open state of the link preview."
 		}
 	]
@@ -63,11 +68,11 @@ export const trigger: APISchema<LinkPreview.TriggerProps> = {
 export const content: APISchema<LinkPreview.ContentProps> = {
 	title: "Content",
 	description: "The contents of the link preview which are displayed when the preview is open.",
-	props: { asChild, ...transitionProps },
+	props: { ...transitionProps, asChild },
 	dataAttributes: [
 		{
 			name: "state",
-			value: "'open' | 'closed'",
+			value: enums("open", "closed"),
 			description: "The open state of the link preview."
 		}
 	]
@@ -76,14 +81,7 @@ export const content: APISchema<LinkPreview.ContentProps> = {
 export const arrow: APISchema<LinkPreview.ArrowProps> = {
 	title: "Arrow",
 	description: "An optional arrow element which points to the trigger when the preview is open.",
-	props: {
-		size: {
-			type: "number",
-			default: "8",
-			description: "The height and width of the arrow in pixels."
-		},
-		asChild
-	},
+	props: arrowProps,
 	dataAttributes: [
 		{
 			name: "arrow",
diff --git a/src/content/api-reference/menu.ts b/src/content/api-reference/menu.ts
new file mode 100644
index 000000000..44ab923c5
--- /dev/null
+++ b/src/content/api-reference/menu.ts
@@ -0,0 +1,201 @@
+import type { PropObj } from "@/types";
+import { floatingConfigProp, focusProp } from "./extended-types";
+import { asChild, transitionProps, portalProp, enums, union } from "@/content";
+import type * as Menu from "$lib/bits/menu/_types";
+import * as C from "@/content/constants";
+
+export const props = {
+	preventScroll: {
+		default: C.TRUE,
+		type: C.BOOLEAN,
+		description: "Whether or not to prevent scroll on the body when the menu is open."
+	},
+	closeOnEscape: {
+		default: C.TRUE,
+		type: C.BOOLEAN,
+		description: "Whether to close the menu when the escape key is pressed."
+	},
+	closeOnOutsideClick: {
+		type: C.BOOLEAN,
+		default: C.TRUE,
+		description: "Whether to close the menu when a click occurs outside of it."
+	},
+	loop: {
+		type: C.BOOLEAN,
+		default: C.FALSE,
+		description: "Whether or not to loop through the menu items when navigating with the keyboard."
+	},
+	open: {
+		type: C.BOOLEAN,
+		default: C.FALSE,
+		description: "The open state of the  menu."
+	},
+	onOpenChange: {
+		type: {
+			type: C.FUNCTION,
+			definition: "(open: boolean) => void"
+		},
+		description: "A callback that is fired when the menu's open state changes."
+	},
+	positioning: {
+		type: floatingConfigProp,
+		description: "The positioning configuration for the  menu. (docs coming soon)"
+	},
+	dir: {
+		type: {
+			type: C.ENUM,
+			definition: enums("ltr", "rtl")
+		},
+		description: "The direction of the menu."
+	},
+	portal: { ...portalProp("menu") },
+	closeFocus: {
+		type: focusProp,
+		description: "Override the focus when the menu is closed."
+	},
+	typeahead: {
+		type: C.BOOLEAN,
+		default: C.TRUE,
+		description:
+			"Whether or not to enable typeahead functionality. When enabled, the user can type to navigate to menu items."
+	},
+	disableFocusFirstItem: {
+		type: C.BOOLEAN,
+		default: C.FALSE,
+		description: "Whether or not to disable focus on the first item when the menu is opened."
+	}
+} satisfies PropObj<Menu.Props>;
+
+export const subProps = {
+	disabled: {
+		type: C.BOOLEAN,
+		description: "Whether or not the submenu is disabled."
+	},
+	positioning: {
+		type: floatingConfigProp,
+		description: "The positioning configuration for the submenu."
+	},
+	open: {
+		type: C.BOOLEAN,
+		default: C.FALSE,
+		description: "The open state of the submenu."
+	},
+	onOpenChange: {
+		type: {
+			type: C.FUNCTION,
+			definition: "(open: boolean) => void"
+		},
+		description: "A callback that is fired when the submenu's open state changes."
+	}
+} satisfies PropObj<Menu.SubProps>;
+
+export const contentProps = {
+	...transitionProps,
+	sideOffset: {
+		type: C.NUMBER,
+		default: "0",
+		description: "The amount of offset to apply to the menu's position on the x-axis."
+	},
+	asChild
+} satisfies PropObj<Menu.ContentProps>;
+
+export const subContentProps = {
+	...transitionProps,
+	asChild,
+	sideOffset: {
+		type: C.NUMBER,
+		default: "0",
+		description: "The amount of offset to apply to the menu's position on the x-axis."
+	}
+} satisfies PropObj<Menu.SubContentProps>;
+
+export const arrowProps = {
+	asChild,
+	size: {
+		type: C.NUMBER,
+		default: "8",
+		description: "The height and width of the arrow in pixels."
+	}
+} satisfies PropObj<Menu.ArrowProps>;
+
+export const checkboxItemProps = {
+	disabled: {
+		type: C.BOOLEAN,
+		default: C.FALSE,
+		description:
+			"Whether or not the checkbox menu item is disabled. Disabled items cannot be interacted with and are skipped when navigating with the keyboard."
+	},
+	checked: {
+		default: C.FALSE,
+		type: union("boolean", "'indeterminate'"),
+		description: "The checkbox menu item's checked state."
+	},
+	onCheckedChange: {
+		type: {
+			type: C.FUNCTION,
+			definition: "(checked: boolean | 'indeterminate') => void"
+		},
+		description: "A callback that is fired when the checkbox menu item's checked state changes."
+	},
+	asChild
+} satisfies PropObj<Menu.CheckboxItemProps>;
+
+export const radioGroupProps = {
+	value: {
+		type: C.STRING,
+		description: "The value of the currently checked radio menu item."
+	},
+	onValueChange: {
+		type: {
+			type: C.FUNCTION,
+			definition: "(value: string) => void"
+		},
+		description: "A callback that is fired when the radio group's value changes."
+	},
+	asChild
+} satisfies PropObj<Menu.RadioGroupProps>;
+
+export const radioItemProps = {
+	value: {
+		type: C.STRING,
+		description:
+			"The value of the radio item. When checked, the parent `RadioGroup`'s value will be set to this value.",
+		required: true
+	},
+	disabled: {
+		type: C.FALSE,
+		description:
+			"Whether or not the radio menu item is disabled. Disabled items cannot be interacted with and are skipped when navigating with the keyboard."
+	},
+	asChild
+} satisfies PropObj<Menu.RadioItemProps>;
+
+export const itemProps = {
+	asChild,
+	disabled: {
+		type: C.BOOLEAN,
+		default: C.FALSE,
+		description: "Whether or not the menu item is disabled."
+	},
+	href: {
+		type: C.STRING,
+		description: "An optional prop that when passed converts the dropdown item into an anchor tag."
+	}
+} satisfies PropObj<Menu.ItemProps & { href: string }>;
+
+export const subTriggerProps = {
+	disabled: {
+		type: C.BOOLEAN,
+		default: C.FALSE,
+		description: "Whether or not the submenu trigger is disabled."
+	},
+	asChild
+} satisfies PropObj<Menu.SubTriggerProps>;
+
+export const triggerProps = { asChild } satisfies PropObj<Menu.TriggerProps>;
+export const groupProps = { asChild } satisfies PropObj<Menu.GroupProps>;
+export const labelProps = { asChild } satisfies PropObj<Menu.LabelProps>;
+export const separatorProps = { asChild } satisfies PropObj<Menu.SeparatorProps>;
+export const checkboxIndicatorProps = {
+	asChild
+} satisfies PropObj<Menu.CheckboxItemIndicatorProps>;
diff --git a/src/content/api-reference/menubar.ts b/src/content/api-reference/menubar.ts
index 136adda66..f6ce9abcf 100644
--- a/src/content/api-reference/menubar.ts
+++ b/src/content/api-reference/menubar.ts
@@ -1,30 +1,38 @@
 import type { APISchema } from "@/types";
+import { asChild, enums } from "./helpers";
 import {
+	props as menuProps,
+	subProps,
+	subContentProps,
 	arrowProps,
-	asChild,
-	menuCheckboxItemProps,
-	menuContentProps,
-	menuProps,
-	menuRadioGroupProps,
-	menuRadioItemProps,
-	menuSubContentProps,
-	menuSubProps,
-	menuSubTriggerProps
-} from "./helpers";
+	triggerProps,
+	subTriggerProps,
+	contentProps,
+	itemProps,
+	checkboxItemProps,
+	checkboxIndicatorProps,
+	radioGroupProps,
+	radioItemProps,
+	separatorProps,
+	groupProps,
+	labelProps
+} from "./menu";
 import type * as Menubar from "$lib/bits/menubar/_types";
+import type * as Menu from "$lib/bits/menu/_types";
+import * as C from "@/content/constants";
 
 export const root: APISchema<Menubar.Props> = {
 	title: "Root",
 	description: "The root menubar component which manages & scopes the state of the menubar.",
 	props: {
 		closeOnEscape: {
-			default: "true",
-			type: "boolean",
+			default: C.TRUE,
+			type: C.BOOLEAN,
 			description: "Whether to close the open menubar menu when the escape key is pressed."
 		},
 		loop: {
-			default: "true",
-			type: "boolean",
+			default: C.TRUE,
+			type: C.BOOLEAN,
 			description:
 				"Whether or not to loop through the menubar menu triggers when navigating with the keyboard."
 		},
@@ -32,54 +40,47 @@ export const root: APISchema<Menubar.Props> = {
 	}
 };
 
-export const menu: APISchema<Menubar.MenuProps> = {
+export const menu: APISchema<Menu.Props> = {
 	title: "Menu",
 	description: "A menu within the menubar.",
 	props: menuProps
 };
 
-export const trigger: APISchema<Menubar.TriggerProps> = {
+export const trigger: APISchema<Menu.TriggerProps> = {
 	title: "Trigger",
-	description: "The button element which toggles the menu.",
-	props: { asChild },
+	description: "The button element which toggles the dropdown menu.",
+	props: triggerProps,
 	dataAttributes: [
 		{
 			name: "state",
-			value: "'open' | 'closed'",
-			description: "The menu's open state."
+			value: enums("open", "closed"),
+			description: "The dropdown menu's open state."
 		}
 	]
 };
 
-export const content: APISchema<Menubar.ContentProps> = {
+export const content: APISchema<Menu.ContentProps> = {
 	title: "Content",
-	description: "The content displayed when the menu is open.",
-	props: menuContentProps,
+	description: "The content displayed when the dropdown menu is open.",
+	props: contentProps,
 	dataAttributes: [
 		{
 			name: "state",
-			value: "'open' | 'closed'",
-			description: "The collapsible's open state."
+			value: enums("open", "closed"),
+			description: "The menus's open state."
 		}
 	]
 };
 
-export const item: APISchema<Menubar.ItemProps> = {
+export const item: APISchema<Menu.ItemProps & { href: string }> = {
 	title: "Item",
-	description: "A menu item within the menu.",
-	props: {
-		asChild,
-		disabled: {
-			type: "boolean",
-			default: "false",
-			description: "Whether or not the menu item is disabled."
-		}
-	},
+	description: "A menu item within the dropdown menu.",
+	props: itemProps,
 	dataAttributes: [
 		{
 			name: "orientation",
-			value: "'horizontal' | 'vertical'",
-			description: "The orientation of the menu item."
+			value: enums("horizontal", "vertical"),
+			description: "The orientation of the dropdown menu item."
 		},
 		{
 			name: "highlighted",
@@ -89,56 +90,56 @@ export const item: APISchema<Menubar.ItemProps> = {
 	]
 };
 
-export const separator: APISchema<Menubar.SeparatorProps> = {
+export const separator: APISchema<Menu.SeparatorProps> = {
 	title: "Separator",
 	description: "A horizontal line to visually separate menu items.",
-	props: { asChild }
+	props: separatorProps
 };
 
-export const arrow: APISchema<Menubar.ArrowProps> = {
+export const arrow: APISchema<Menu.ArrowProps> = {
 	title: "Arrow",
-	description: "An optional arrow which points to the menu's anchor/trigger point.",
+	description: "An optional arrow which points to the dropdown menu's anchor/trigger point.",
 	props: arrowProps,
 	dataAttributes: [
 		{
 			name: "arrow",
 			value: "''",
-			description: "Present on the arrow elements of the menu."
+			description: "Present on the arrow elements of the dropdown menu."
 		}
 	]
 };
 
-export const checkboxItem: APISchema<Menubar.CheckboxItemProps> = {
+export const checkboxItem: APISchema<Menu.CheckboxItemProps> = {
 	title: "CheckboxItem",
 	description: "A menu item that can be controlled and toggled like a checkbox.",
-	props: menuCheckboxItemProps,
+	props: checkboxItemProps,
 	dataAttributes: [
 		{
 			name: "orientation",
-			value: "'horizontal' | 'vertical'",
+			value: enums("horizontal", "vertical"),
 			description: "The orientation of the checkbox menu item."
 		}
 	]
 };
 
-export const checkboxIndicator: APISchema<Menubar.CheckboxIndicatorProps> = {
+export const checkboxIndicator: APISchema<Menu.CheckboxItemIndicatorProps> = {
 	title: "CheckboxIndicator",
 	description:
 		"A visual indicator of the checkbox menu item's checked state. It passed the item's checked state as a slot prop `checked` and can be used to render a custom indicator.",
-	props: { asChild }
+	props: checkboxIndicatorProps
 };
 
-export const radioGroup: APISchema<Menubar.RadioGroupProps> = {
+export const radioGroup: APISchema<Menu.RadioGroupProps> = {
 	title: "RadioGroup",
 	description: "A group of radio menu items, where only one can be checked at a time.",
-	props: menuRadioGroupProps
+	props: radioGroupProps
 };
 
-export const radioItem: APISchema<Menubar.RadioItemProps> = {
+export const radioItem: APISchema<Menu.RadioItemProps> = {
 	title: "RadioItem",
 	description:
 		"A menu item that can be controlled and toggled like a radio button. It must be a child of a `RadioGroup`.",
-	props: menuRadioItemProps
+	props: radioItemProps
 };
 
 export const radioIndicator: APISchema = {
@@ -147,21 +148,21 @@ export const radioIndicator: APISchema = {
 		"A visual indicator helper for `RadioItem`s. It only renders it's children when the radio item is checked."
 };
 
-export const sub: APISchema<Menubar.SubProps> = {
+export const sub: APISchema<Menu.SubProps> = {
 	title: "Sub",
 	description:
-		"A submenu belonging to the parent menu. Responsible for managing the state of the submenu.",
-	props: menuSubProps
+		"A submenu belonging to the parent dropdown menu. Responsible for managing the state of the submenu.",
+	props: subProps
 };
 
-export const subTrigger: APISchema<Menubar.SubTriggerProps> = {
+export const subTrigger: APISchema<Menu.SubTriggerProps> = {
 	title: "SubTrigger",
 	description: "A menu item which when pressed or hovered, opens the submenu.",
-	props: menuSubTriggerProps,
+	props: subTriggerProps,
 	dataAttributes: [
 		{
 			name: "state",
-			value: "'open' | 'closed'",
+			value: enums("open", "closed"),
 			description: "The submenu's open state."
 		},
 		{
@@ -172,38 +173,31 @@ export const subTrigger: APISchema<Menubar.SubTriggerProps> = {
 	]
 };
 
-export const subContent: APISchema<Menubar.SubContentProps> = {
+export const subContent: APISchema<Menu.SubContentProps> = {
 	title: "SubContent",
 	description: "The submenu content displayed when the parent submenu is open.",
-	props: {
-		...menuSubContentProps,
-		sideOffset: {
-			type: "number",
-			default: "0",
-			description: "The offset of the submenu from the parent menu."
-		}
-	},
+	props: subContentProps,
 	dataAttributes: [
 		{
 			name: "state",
-			value: "'open' | 'closed'",
+			value: enums("open", "closed"),
 			description: "The submenu's open state."
 		}
 	]
 };
 
-export const group: APISchema<Menubar.GroupProps> = {
+export const group: APISchema<Menu.GroupProps> = {
 	title: "Group",
 	description:
-		"A group of menu items. It can be used along with the `DropdownMenu.Label` component to provide a visual label for a group of menu items. When a label is within a group, appropriate aria attributes will be applied to the group.",
-	props: { asChild }
+		"A group of menu items. It can be used along with the `Menu.Label` component to provide a visual label for a group of menu items. When a label is within a group, appropriate aria attributes will be applied to the group.",
+	props: groupProps
 };
 
-export const label: APISchema<Menubar.LabelProps> = {
+export const label: APISchema<Menu.LabelProps> = {
 	title: "Label",
 	description:
-		"A label which will be skipped when navigating with the keyboard. It is used to provide a visual label for a group of menu items. When a label is within a `DropdownMenu.Group`, appropriate aria attributes will be applied to the group.",
-	props: { asChild }
+		"A label which will be skipped when navigating with the keyboard. It is used to provide a visual label for a group of menu items. When a label is within a `Menu.Group`, appropriate aria attributes will be applied to the group.",
+	props: labelProps
 };
 
 export const menubar = [
diff --git a/src/content/api-reference/popover.ts b/src/content/api-reference/popover.ts
index 2e1a1420c..949ef5a0b 100644
--- a/src/content/api-reference/popover.ts
+++ b/src/content/api-reference/popover.ts
@@ -1,46 +1,50 @@
 import type { APISchema } from "@/types/index.js";
-import { arrowProps, asChild } from "./helpers.js";
-import type * as Popover from "$lib/bits/popover/_types";
-import { focusProp } from "./extended-types/index.js";
-import { portalProp } from "./helpers";
+import { arrowProps, asChild, enums } from "./helpers.js";
+import type * as Popover from "$lib/bits/popover/_types.js";
+import { floatingConfigProp, focusProp } from "./extended-types/index.js";
+import { portalProp, transitionProps } from "./helpers.js";
+import * as C from "@/content/constants.js";
 
 export const root: APISchema<Popover.Props> = {
 	title: "Root",
 	description: "The root component used to manage the state of the state of the popover.",
 	props: {
 		disableFocusTrap: {
-			type: "boolean",
-			default: "false",
+			type: C.BOOLEAN,
+			default: C.FALSE,
 			description:
 				"Whether or not to disable the focus trap that is applied to the popover when it's open."
 		},
 		preventScroll: {
-			type: "boolean",
-			default: "false",
+			type: C.BOOLEAN,
+			default: C.FALSE,
 			description: "Whether or not to prevent scrolling the body while the popover is open."
 		},
 		positioning: {
-			type: "FloatingConfig",
+			type: floatingConfigProp,
 			default: '{ position: "bottom", align: "center" }',
 			description: "The positioning configuration for the popover. (docs coming soon)"
 		},
 		closeOnOutsideClick: {
-			type: "boolean",
-			default: "true",
+			type: C.BOOLEAN,
+			default: C.TRUE,
 			description: "Whether or not to close the popover when clicking outside of it."
 		},
 		closeOnEscape: {
-			type: "boolean",
-			default: "true",
+			type: C.BOOLEAN,
+			default: C.TRUE,
 			description: "Whether or not to close the popover when pressing the escape key."
 		},
 		open: {
-			type: "boolean",
-			default: "false",
+			type: C.BOOLEAN,
+			default: C.FALSE,
 			description: "The open state of the link popover component."
 		},
 		onOpenChange: {
-			type: "(open: boolean) => void",
+			type: {
+				type: C.FUNCTION,
+				definition: "(open: boolean) => void"
+			},
 			description: "A callback that fires when the open state changes."
 		},
 		openFocus: {
@@ -55,33 +59,33 @@ export const root: APISchema<Popover.Props> = {
 	}
 };
 
-export const trigger: APISchema = {
+export const trigger: APISchema<Popover.TriggerProps> = {
 	title: "Trigger",
 	description: "A component which toggles the opening and closing of the popover on press.",
 	props: { asChild },
 	dataAttributes: [
 		{
 			name: "state",
-			value: "'open' | 'closed'",
+			value: enums("open", "closed"),
 			description: "The open state of the link preview."
 		}
 	]
 };
 
-export const content: APISchema = {
+export const content: APISchema<Popover.ContentProps> = {
 	title: "Content",
 	description: "The contents of the popover which are displayed when the popover is open.",
-	props: { asChild }
+	props: { ...transitionProps, asChild }
 };
 
-export const close: APISchema = {
+export const close: APISchema<Popover.CloseProps> = {
 	title: "Close",
 	description:
 		"A button which closes the popover when pressed and is typically placed in the content.",
 	props: { asChild }
 };
 
-export const arrow: APISchema = {
+export const arrow: APISchema<Popover.ArrowProps> = {
 	title: "Arrow",
 	description: "An optional arrow element which points to the trigger when the popover is open.",
 	props: arrowProps,
diff --git a/src/content/api-reference/progress.ts b/src/content/api-reference/progress.ts
index d5365018e..4d1e0ffff 100644
--- a/src/content/api-reference/progress.ts
+++ b/src/content/api-reference/progress.ts
@@ -1,30 +1,32 @@
 import type { APISchema } from "@/types/index.js";
-import { asChild } from "./helpers.js";
+import { asChild, enums } from "./helpers.js";
+import * as C from "@/content/constants.js";
+import type * as Progress from "$lib/bits/progress/_types.js";
 
-export const root: APISchema = {
+export const root: APISchema<Progress.Props> = {
 	title: "Root",
 	description: "The progress bar component.",
-	props: [
-		asChild,
-		{
-			name: "max",
-			type: "number",
+	props: {
+		max: {
+			type: C.NUMBER,
 			default: "100",
 			description:
 				"The maximum value of the progress bar. Used to calculate the percentage of the progress bar."
 		},
-		{
-			name: "value",
-			type: "number",
+		value: {
+			type: C.NUMBER,
 			default: "0",
 			description: "The current value of the progress bar."
 		},
-		{
-			name: "onValueChange",
-			type: "(value: number) => void",
+		onValueChange: {
+			type: {
+				type: C.FUNCTION,
+				definition: "(value: number) => void"
+			},
 			description: "A callback that fires when the value changes."
-		}
-	],
+		},
+		asChild
+	},
 	dataAttributes: [
 		{
 			name: "value",
@@ -33,7 +35,7 @@ export const root: APISchema = {
 		{
 			name: "state",
 			description: "The current state of the progress bar.",
-			value: "'indeterminate' | 'complete' | 'loading'"
+			value: enums("indeterminate", "complete", "loading")
 		},
 		{
 			name: "max",
diff --git a/src/content/api-reference/radio-group.ts b/src/content/api-reference/radio-group.ts
index a50e4ba04..8e4fa9aeb 100644
--- a/src/content/api-reference/radio-group.ts
+++ b/src/content/api-reference/radio-group.ts
@@ -1,71 +1,78 @@
 import type { APISchema } from "@/types";
-import { asChild } from "./helpers";
+import { asChild, enums } from "./helpers";
+import type * as RadioGroup from "$lib/bits/radio-group/_types";
+import * as C from "@/content/constants";
 
-export const root: APISchema = {
+export const root: APISchema<RadioGroup.Props> = {
 	title: "Root",
 	description:
 		"The radio group component used to group radio items under a common name for form submission.",
-	props: [
-		asChild,
-		{
-			name: "disabled",
-			default: "false",
-			type: "boolean",
+	props: {
+		disabled: {
+			default: C.FALSE,
+			type: C.BOOLEAN,
 			description:
 				"Whether or not the radio group is disabled. This prevents the user from interacting with it."
 		},
-		{
-			name: "loop",
-			default: "false",
-			type: "boolean",
+		required: {
+			default: C.FALSE,
+			type: C.BOOLEAN,
+			description: "Whether or not the radio group is required."
+		},
+		loop: {
+			default: C.FALSE,
+			type: C.BOOLEAN,
 			description:
 				"Whether or not the radio group should loop through the items when navigating with the arrow keys."
 		},
-		{
-			name: "orientation",
+		orientation: {
 			default: "'vertical'",
-			type: "'vertical' | 'horizontal'",
+			type: {
+				type: C.ENUM,
+				definition: enums("vertical", "horizontal")
+			},
 			description: "The orientation of the radio group."
 		},
-		{
-			name: "value",
-			type: "string",
+		value: {
+			type: C.STRING,
 			description:
 				"The value of the currently selected radio item. This is the value that will be submitted with a form."
 		},
-		{
-			name: "onValueCHange",
-			type: "(value: string | undefined) => void",
+		onValueChange: {
+			type: {
+				type: C.FUNCTION,
+				definition: "(value: string | undefined) => void"
+			},
 			description: "A callback that is fired when the radio group's value changes."
-		}
-	],
+		},
+		asChild
+	},
 	dataAttributes: [
 		{
 			name: "orientation",
-			value: "'vertical' | 'horizontal'",
+			value: enums("vertical", "horizontal"),
 			description: "The orientation of the radio group."
 		}
 	]
 };
-export const item: APISchema = {
+export const item: APISchema<RadioGroup.ItemProps> = {
 	title: "Item",
 	description: "An radio item, which must be a child of the `RadioGroup.Root` component.",
-	props: [
-		asChild,
-		{
-			name: "disabled",
-			default: "false",
-			type: "boolean",
+	props: {
+		disabled: {
+			default: C.FALSE,
+			type: C.BOOLEAN,
 			description:
 				"Whether or not the radio item is disabled. This prevents the user from interacting with it."
 		},
-		{
-			name: "value",
-			type: "string",
+		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. This is the value that will be submitted with a form.",
+			required: true
+		},
+		asChild
+	},
 	dataAttributes: [
 		{
 			name: "disabled",
@@ -77,22 +84,22 @@ export const item: APISchema = {
 		},
 		{
 			name: "state",
-			value: "'checked' | 'unchecked'",
+			value: enums("checked", "unchecked"),
 			description: "The radio item's checked state."
 		},
 		{
 			name: "orientation",
-			value: "'vertical' | 'horizontal'",
+			value: enums("vertical", "horizontal"),
 			description: "The orientation of the parent radio group."
 		}
 	]
 };
 
-export const input: APISchema = {
+export const input: APISchema<RadioGroup.InputProps> = {
 	title: "Input",
 	description:
 		"A hidden input that is used to submit the radio group's value with a form. It can receive all the same props/attributes as a normal HTML input.",
-	props: [asChild]
+	props: { asChild }
 };
 
 export const indicator: APISchema = {
diff --git a/src/content/api-reference/select.ts b/src/content/api-reference/select.ts
index 92c93088e..77fd2dd70 100644
--- a/src/content/api-reference/select.ts
+++ b/src/content/api-reference/select.ts
@@ -1,95 +1,113 @@
 import type { APISchema } from "@/types";
-import { asChild } from "./helpers";
+import { arrowProps, asChild, enums, portalProp, transitionProps } from "./helpers";
+import * as C from "@/content/constants";
+import type * as Select from "$lib/bits/select/_types";
 
-export const root: APISchema = {
+export const root: APISchema<Select.Props> = {
 	title: "Root",
 	description: "The root select component which manages & scopes the state of the select.",
-	props: [
-		{
-			name: "disabled",
-			default: "false",
-			type: "boolean",
+	props: {
+		disabled: {
+			default: C.FALSE,
+			type: C.BOOLEAN,
 			description: "Whether or not the select menu is disabled."
 		},
-		{
-			name: "multiple",
-			default: "false",
-			type: "boolean",
+		multiple: {
+			default: C.FALSE,
+			type: C.BOOLEAN,
 			description: "Whether or not the select menu allows multiple selections."
 		},
-		{
-			name: "preventScroll",
-			default: "true",
-			type: "boolean",
+		preventScroll: {
+			default: C.TRUE,
+			type: C.BOOLEAN,
 			description: "Whether or not to prevent scrolling the body when the menu is open."
 		},
-		{
-			name: "closeOnEscape",
-			default: "true",
-			type: "boolean",
+		closeOnEscape: {
+			default: C.TRUE,
+			type: C.BOOLEAN,
 			description: "Whether to close the select menu when the escape key is pressed."
 		},
-		{
-			name: "closeOnOutsideClick",
-			type: "boolean",
-			default: "true",
+		closeOnOutsideClick: {
+			type: C.BOOLEAN,
+			default: C.TRUE,
 			description: "Whether to close the select menu when a click occurs outside of it."
 		},
-		{
-			name: "loop",
-			type: "boolean",
-			default: "false",
+		loop: {
+			type: C.BOOLEAN,
+			default: C.FALSE,
 			description:
 				"Whether or not to loop through the menu items when navigating with the keyboard."
 		},
-		{
-			name: "open",
-			type: "boolean",
-			default: "false",
+		open: {
+			type: C.BOOLEAN,
+			default: C.FALSE,
 			description: "The open state of the select menu."
 		},
-		{
-			name: "onOpenChange",
-			type: "(open: boolean) => void",
+		onOpenChange: {
+			type: {
+				type: C.FUNCTION,
+				definition: "(open: boolean) => void"
+			},
 			description: "A callback that is fired when the select menu's open state changes."
 		},
-		{
-			name: "positioning",
+		positioning: {
 			type: "FloatingConfig",
 			description: "The positioning configuration for the select menu. (docs coming soon)"
 		},
-		{
-			name: "value",
-			type: "string",
+		selected: {
+			type: {
+				type: C.OBJECT,
+				definition: "{ value: unknown; label?: string }"
+			},
 			description: "The value of the currently selected item."
 		},
-		{
-			name: "onValueChange",
-			type: "(value: string | undefined) => void",
+		onSelectedChange: {
+			type: {
+				type: C.FUNCTION,
+				definition: "(value: unknown | undefined) => void"
+			},
 			description: "A callback that is fired when the select menu's value changes."
 		},
-		{
-			name: "value",
-			type: "string[]",
-			description: "The values of the currently selected items, when `multiple` is `true`."
+		portal: { ...portalProp("select menu") },
+		highlightOnHover: {
+			type: C.BOOLEAN,
+			default: C.TRUE,
+			description: "Whether or not to highlight the currently hovered item."
 		},
-		{
-			name: "onValueChange",
-			type: "(value: string[]) => void",
+		name: {
+			type: C.STRING,
+			description: "The name to apply to the hidden input element for form submission."
+		},
+		required: {
+			default: C.FALSE,
+			type: C.BOOLEAN,
+			description: "Whether or not the select menu is required."
+		},
+		scrollAlignment: {
+			default: "'nearest'",
+			type: {
+				type: C.ENUM,
+				definition: enums("nearest", "center")
+			},
+			description: "The alignment of the highlighted item when scrolling."
+		},
+		typeahead: {
+			type: C.BOOLEAN,
+			default: C.TRUE,
 			description:
-				"A callback that is fired when the select menu's values change, when `multiple` is `true`."
+				"Whether or not to enable typeahead functionality. When enabled, the user can type to navigate to menu items."
 		}
-	]
+	}
 };
 
-export const trigger: APISchema = {
+export const trigger: APISchema<Select.TriggerProps> = {
 	title: "Trigger",
 	description: "The button element which toggles the select menu's open state.",
-	props: [asChild],
+	props: { asChild },
 	dataAttributes: [
 		{
 			name: "state",
-			value: "'open' | 'closed'",
+			value: enums("open", "closed"),
 			description: "The dropdown menu's open state."
 		},
 		{
@@ -99,88 +117,79 @@ export const trigger: APISchema = {
 	]
 };
 
-export const content: APISchema = {
+export const content: APISchema<Select.ContentProps> = {
 	title: "Content",
 	description: "The content/menu element which contains the select menu's items.",
-	props: [asChild]
+	props: { ...transitionProps, asChild }
 };
 
-export const item: APISchema = {
+export const item: APISchema<Select.ItemProps> = {
 	title: "Item",
 	description: "A select item, which must be a child of the `Select.Content` component.",
-	props: [
-		asChild,
-		{
-			name: "label",
-			type: "string",
+	props: {
+		label: {
+			type: C.STRING,
 			description: "The label of the select item, which is displayed in the menu."
 		},
-		{
-			name: "value",
-			type: "unknown",
+		value: {
+			type: C.UNKNOWN,
 			description: "The value of the select item."
 		},
-		{
-			name: "disabled",
-			type: "boolean",
-			default: "false",
+		disabled: {
+			type: C.BOOLEAN,
+			default: C.FALSE,
 			description:
 				"Whether or not the select item is disabled. This will prevent interaction/selection."
-		}
-	]
+		},
+		asChild
+	}
 };
 
 export const value: APISchema = {
 	title: "Value",
 	description:
 		"A representation of the select menu's value, which is typically displayed in the trigger.",
-	props: [
-		asChild,
-		{
-			name: "placeholder",
-			type: "string",
+	props: {
+		placeholder: {
+			type: C.STRING,
 			description: "A placeholder value to display when no value is selected."
-		}
-	]
+		},
+		asChild
+	}
 };
 
-export const input: APISchema = {
+export const input: APISchema<Select.InputProps> = {
 	title: "Input",
 	description:
 		"A hidden input element which is used to store the select menu's value, used for form submission. It receives the same value as the `Select.Value` component and can receive any props that a normal input element can receive.",
-	props: [asChild]
+	props: { asChild }
 };
 
-export const group: APISchema = {
+export const group: APISchema<Select.GroupProps> = {
 	title: "Group",
 	description: "An accessible group of select menu items.",
-	props: [asChild]
+	props: { asChild }
 };
 
-export const label: APISchema = {
+export const label: APISchema<Select.LabelProps> = {
 	title: "Label",
 	description:
 		"A label for the select menu which will be skipped when navigating with the keyboard. This must be a child of the `Select.Group` component to be accessible.",
-	props: [asChild]
+	props: { asChild }
 };
 
-export const separator: APISchema = {
+export const separator: APISchema<Select.SeparatorProps> = {
 	title: "Separator",
-	description: "A visual separator for use between select items or groups."
+	description: "A visual separator for use between select items or groups.",
+	props: {
+		asChild
+	}
 };
 
-export const arrow: APISchema = {
+export const arrow: APISchema<Select.ArrowProps> = {
 	title: "Arrow",
 	description: "An optional arrow element which points to the trigger when open.",
-	props: [
-		asChild,
-		{
-			name: "size",
-			type: "number",
-			default: "8",
-			description: "The height and width of the arrow in pixels."
-		}
-	],
+	props: arrowProps,
 	dataAttributes: [
 		{
 			name: "arrow",
diff --git a/src/content/api-reference/separator.ts b/src/content/api-reference/separator.ts
index 954cdaa11..d69912745 100644
--- a/src/content/api-reference/separator.ts
+++ b/src/content/api-reference/separator.ts
@@ -1,29 +1,32 @@
 import type { APISchema } from "@/types";
-import { asChild } from "./helpers";
+import { asChild, enums } from "./helpers";
+import * as C from "@/content/constants";
+import type * as Separator from "$lib/bits/separator/_types";
 
-export const root: APISchema = {
+export const root: APISchema<Separator.Props> = {
 	title: "Root",
 	description: "An element used to separate content.",
-	props: [
-		asChild,
-		{
-			name: "orientation",
-			type: "'horizontal' | 'vertical'",
-			description: "The orientation of the separator.",
-			default: "'horizontal'"
+	props: {
+		orientation: {
+			type: {
+				type: C.ENUM,
+				definition: enums("horizontal", "vertical")
+			},
+			default: "'horizontal'",
+			description: "The orientation of the separator."
 		},
-		{
-			name: "decorative",
-			type: "boolean",
+		decorative: {
+			type: C.BOOLEAN,
+			default: C.FALSE,
 			description:
-				"Whether the separator is decorative or not, which will determine if it is announce by screen readers.",
-			default: "false"
-		}
-	],
+				"Whether the separator is decorative or not, which will determine if it is announce by screen readers."
+		},
+		asChild
+	},
 	dataAttributes: [
 		{
 			name: "orientation",
-			value: "'horizontal' | 'vertical'",
+			value: enums("horizontal", "vertical"),
 			description: "The orientation of the separator."
 		}
 	]
diff --git a/src/content/api-reference/constants.ts b/src/content/constants.ts
similarity index 74%
rename from src/content/api-reference/constants.ts
rename to src/content/constants.ts
index c4cc19b3e..7a4434305 100644
--- a/src/content/api-reference/constants.ts
+++ b/src/content/constants.ts
@@ -6,3 +6,6 @@ export const ENUM = "enum";
 export const UNDEFINED = "undefined";
 export const UNION = "union";
 export const OBJECT = "object";
+export const FALSE = "false";
+export const TRUE = "true";
+export const UNKNOWN = "unknown";
diff --git a/src/content/index.ts b/src/content/index.ts
index 78f5a04f2..33d39c486 100644
--- a/src/content/index.ts
+++ b/src/content/index.ts
@@ -1 +1,2 @@
 export * from "./api-reference/index.js";
+export * from "./constants.js";
diff --git a/src/lib/bits/context-menu/types.ts b/src/lib/bits/context-menu/types.ts
index c0d3b7630..c2c80081b 100644
--- a/src/lib/bits/context-menu/types.ts
+++ b/src/lib/bits/context-menu/types.ts
@@ -1,126 +1,75 @@
-import type { HTMLDivAttributes, Transition } from "$lib/internal/index.js";
-import type { CustomEventHandler } from "$lib";
-import type { HTMLAnchorAttributes } from "svelte/elements";
-import type * as I from "./_types.js";
-
-type Props = I.Props;
-
-type CheckboxItemProps = I.CheckboxItemProps & HTMLDivAttributes;
-
-type RadioGroupProps = I.RadioGroupProps & HTMLDivAttributes;
-
-type RadioItemProps = I.RadioItemProps & HTMLDivAttributes;
-
-type ContentProps<
-	T extends Transition = Transition,
-	In extends Transition = Transition,
-	Out extends Transition = Transition
-> = I.ContentProps<T, In, Out> & HTMLDivAttributes;
-
-type GroupProps = I.GroupProps & HTMLDivAttributes;
-
-type AnchorElement = HTMLAnchorAttributes & {
-	href?: HTMLAnchorAttributes["href"];
-};
-
-type DivElement = HTMLDivAttributes & {
-	href?: never;
-};
-
-type ItemProps = I.ItemProps & (AnchorElement | DivElement);
-
-type CheckboxItemIndicatorProps = I.CheckboxItemIndicatorProps & HTMLDivAttributes;
-type LabelProps = I.LabelProps & HTMLDivAttributes;
-type SeparatorProps = I.SeparatorProps & HTMLDivAttributes;
-type SubProps = I.SubProps;
-
-type SubContentProps<
-	T extends Transition = Transition,
-	In extends Transition = Transition,
-	Out extends Transition = Transition
-> = I.SubContentProps<T, In, Out> & HTMLDivAttributes;
-
-type SubTriggerProps = I.SubTriggerProps & HTMLDivAttributes;
-
-type TriggerProps = I.TriggerProps & HTMLDivAttributes;
-
-type ArrowProps = I.ArrowProps & HTMLDivAttributes;
-
-type ItemEvents<T extends Element = HTMLDivElement> = {
-	click: CustomEventHandler<MouseEvent, T>;
-	keydown: CustomEventHandler<KeyboardEvent, T>;
-	focusin: CustomEventHandler<FocusEvent, T>;
-	focusout: CustomEventHandler<FocusEvent, T>;
-	pointerdown: CustomEventHandler<PointerEvent, T>;
-	pointerleave: CustomEventHandler<PointerEvent, T>;
-	pointermove: CustomEventHandler<PointerEvent, T>;
-};
-
-type CheckboxItemEvents = ItemEvents;
-type RadioItemEvents = ItemEvents;
-type SubTriggerEvents = Omit<ItemEvents, "pointerdown">;
-
-type TriggerEvents<T extends Element = HTMLDivElement> = {
-	pointerdown: CustomEventHandler<PointerEvent, T>;
-	contextmenu: CustomEventHandler<Event, T>;
-};
-
-type SubContentEvents<T extends Element = HTMLDivElement> = {
-	keydown: CustomEventHandler<KeyboardEvent, T>;
-	focusout: CustomEventHandler<FocusEvent, T>;
-	pointermove: CustomEventHandler<PointerEvent, T>;
-};
-
-type ContentEvents<T extends Element = HTMLDivElement> = {
-	keydown: CustomEventHandler<KeyboardEvent, T>;
-};
-
-export type {
-	Props,
+import type {
 	ArrowProps,
-	CheckboxItemProps,
 	ContentProps,
+	CheckboxItemProps,
+	RadioGroupProps,
+	RadioItemProps,
 	GroupProps,
+	SubContentProps,
+	SubTriggerProps,
+	ContextTriggerProps as TriggerProps,
 	ItemProps,
 	CheckboxItemIndicatorProps,
+	SeparatorProps,
+	SubProps,
 	LabelProps,
-	RadioGroupProps,
+	Props,
+	//
+	ContentEvents,
+	CheckboxItemEvents,
+	ItemEvents,
+	RadioItemEvents,
+	SubTriggerEvents,
+	ContextTriggerEvents as TriggerEvents,
+	SubContentEvents
+} from "$lib/bits/menu/index.js";
+
+export type {
+	Props,
+	SubProps,
+	ItemProps,
+	ArrowProps,
+	GroupProps,
+	LabelProps,
+	ContentProps,
+	TriggerProps,
 	RadioItemProps,
 	SeparatorProps,
-	SubProps,
+	RadioGroupProps,
 	SubContentProps,
 	SubTriggerProps,
-	TriggerProps,
+	CheckboxItemProps,
+	CheckboxItemIndicatorProps,
 	//
 	Props as ContextMenuProps,
-	ArrowProps as ContextMenuArrowProps,
-	CheckboxItemProps as ContextMenuCheckboxItemProps,
-	ContentProps as ContextMenuContentProps,
-	GroupProps as ContextMenuGroupProps,
+	SubProps as ContextMenuSubProps,
 	ItemProps as ContextMenuItemProps,
-	CheckboxItemIndicatorProps as ContextMenuCheckboxItemIndicatorProps,
 	LabelProps as ContextMenuLabelProps,
-	RadioGroupProps as ContextMenuRadioGroupProps,
+	ArrowProps as ContextMenuArrowProps,
+	GroupProps as ContextMenuGroupProps,
+	ContentProps as ContextMenuContentProps,
+	TriggerProps as ContextMenuTriggerProps,
 	RadioItemProps as ContextMenuRadioItemProps,
 	SeparatorProps as ContextMenuSeparatorProps,
-	SubProps as ContextMenuSubProps,
+	RadioGroupProps as ContextMenuRadioGroupProps,
 	SubContentProps as ContextMenuSubContentProps,
 	SubTriggerProps as ContextMenuSubTriggerProps,
-	TriggerProps as ContextMenuTriggerProps,
-	//
-	ContentEvents,
-	CheckboxItemEvents,
+	CheckboxItemProps as ContextMenuCheckboxItemProps,
+	CheckboxItemIndicatorProps as ContextMenuCheckboxItemIndicatorProps,
+	//,
 	ItemEvents,
-	RadioItemEvents,
-	SubTriggerEvents,
 	TriggerEvents,
+	ContentEvents,
+	RadioItemEvents,
 	SubContentEvents,
+	SubTriggerEvents,
+	CheckboxItemEvents,
 	//
-	ContentEvents as ContextMenuContentEvents,
-	CheckboxItemEvents as ContextMenuCheckboxItemEvents,
 	ItemEvents as ContextMenuItemEvents,
+	TriggerEvents as ContextMenuTriggerEvents,
+	ContentEvents as ContextMenuContentEvents,
 	RadioItemEvents as ContextMenuRadioItemEvents,
+	SubContentEvents as ContextMenuSubContentEvents,
 	SubTriggerEvents as ContextMenuSubTriggerEvents,
-	TriggerEvents as ContextMenuTriggerEvents,
-	SubContentEvents as ContextMenuSubContentEvents
+	CheckboxItemEvents as ContextMenuCheckboxItemEvents
 };
diff --git a/src/lib/bits/dropdown-menu/_types.ts b/src/lib/bits/dropdown-menu/_types.ts
deleted file mode 100644
index 401bd88e7..000000000
--- a/src/lib/bits/dropdown-menu/_types.ts
+++ /dev/null
@@ -1,158 +0,0 @@
-/**
- * We define prop types without the HTMLAttributes here so that we can use them
- * to type-check our API documentation, which requires we document each prop,
- * but we don't want to document the HTML attributes.
- */
-
-import type {
-	TransitionProps,
-	AsChild,
-	Expand,
-	OmitOpen,
-	OmitIds,
-	OnChangeFn,
-	Transition,
-	OmitChecked,
-	OmitFloating
-} from "$lib/internal/index.js";
-import type { CustomEventHandler } from "$lib/index.js";
-import type {
-	CreateDropdownMenuProps,
-	CreateDropdownMenuRadioGroupProps,
-	DropdownMenuRadioItemProps,
-	CreateDropdownSubmenuProps,
-	CreateDropdownMenuCheckboxItemProps
-} from "@melt-ui/svelte";
-import type {
-	FloatingArrowProps,
-	MenuContentProps,
-	MenuSubTriggerProps
-} from "$lib/shared/index.js";
-
-type Props = Expand<
-	OmitFloating<CreateDropdownMenuProps> & {
-		/**
-		 * The open state of the dropdown menu.
-		 * You can bind this to a boolean value to programmatically control the open state.
-		 *
-		 * @defaultValue false
-		 */
-		open?: boolean;
-
-		/**
-		 * A callback function called when the open state changes.
-		 */
-		onOpenChange?: OnChangeFn<boolean>;
-	}
->;
-
-type CheckboxItemProps = Expand<
-	OmitChecked<CreateDropdownMenuCheckboxItemProps> & {
-		/**
-		 * The checked state of the checkbox item.
-		 * You can bind this to a boolean value to programmatically control the checked state.
-		 *
-		 * @defaultValue false
-		 */
-		checked?: boolean | "indeterminate";
-
-		/**
-		 * A callback function called when the checked state changes.
-		 */
-		onCheckedChange?: OnChangeFn<boolean | "indeterminate">;
-	} & AsChild
->;
-
-type RadioGroupProps = Expand<
-	{
-		/**
-		 * The value of the radio group.
-		 * You can bind this to a string value to programmatically control the value.
-		 *
-		 * @defaultValue undefined
-		 */
-		value?: CreateDropdownMenuRadioGroupProps["defaultValue"] & {};
-
-		/**
-		 * A callback function called when the value changes.
-		 */
-		onValueChange?: OnChangeFn<CreateDropdownMenuRadioGroupProps["defaultValue"]>;
-	} & AsChild
->;
-
-type RadioItemProps = Expand<DropdownMenuRadioItemProps & AsChild>;
-
-type GroupProps = AsChild;
-
-type ItemProps = Expand<
-	{
-		/**
-		 * Whether the item is disabled.
-		 *
-		 * @defaultValue false
-		 */
-		disabled?: boolean;
-	} & AsChild
->;
-
-type CheckboxItemIndicatorProps = AsChild;
-type LabelProps = AsChild;
-type SeparatorProps = AsChild;
-
-type SubProps = Expand<
-	OmitOpen<OmitIds<Omit<CreateDropdownSubmenuProps, "arrowSize">>> & {
-		/**
-		 * The open state of the submenu.
-		 * You can bind this to a boolean value to programmatically control the open state.
-		 *
-		 * @defaultValue false
-		 */
-		open?: boolean;
-
-		/**
-		 * A callback function called when the open state changes.
-		 */
-		onOpenChange?: OnChangeFn<boolean>;
-	}
->;
-type SubContentProps<
-	T extends Transition = Transition,
-	In extends Transition = Transition,
-	Out extends Transition = Transition
-> = Expand<
-	{
-		sideOffset?: number;
-	} & TransitionProps<T, In, Out> &
-		AsChild
->;
-
-type TriggerProps = AsChild;
-
-type ItemEvents<T extends Element = HTMLDivElement> = {
-	click: CustomEventHandler<MouseEvent, T>;
-	keydown: CustomEventHandler<KeyboardEvent, T>;
-	focusin: CustomEventHandler<FocusEvent, T>;
-	focusout: CustomEventHandler<FocusEvent, T>;
-	pointerdown: CustomEventHandler<PointerEvent, T>;
-	pointerleave: CustomEventHandler<PointerEvent, T>;
-	pointermove: CustomEventHandler<PointerEvent, T>;
-};
-
-export type {
-	FloatingArrowProps as ArrowProps,
-	MenuContentProps as ContentProps,
-	MenuSubTriggerProps as SubTriggerProps,
-	CheckboxItemIndicatorProps,
-	CheckboxItemProps,
-	GroupProps,
-	ItemEvents,
-	ItemProps,
-	LabelProps,
-	Props,
-	RadioGroupProps,
-	RadioItemProps,
-	SeparatorProps,
-	SubContentProps,
-	SubProps,
-	TriggerProps
-};
diff --git a/src/lib/bits/dropdown-menu/types.ts b/src/lib/bits/dropdown-menu/types.ts
index 2832bf6c4..1051071f3 100644
--- a/src/lib/bits/dropdown-menu/types.ts
+++ b/src/lib/bits/dropdown-menu/types.ts
@@ -1,127 +1,75 @@
-import type { HTMLDivAttributes, Transition } from "$lib/internal/index.js";
-import type { CustomEventHandler } from "$lib/index.js";
-
-import type { HTMLAnchorAttributes, HTMLButtonAttributes } from "svelte/elements";
-import type * as I from "./_types.js";
-
-type Props = I.Props;
-
-type CheckboxItemProps = I.CheckboxItemProps & HTMLDivAttributes;
-
-type RadioGroupProps = I.RadioGroupProps & HTMLDivAttributes;
-
-type RadioItemProps = I.RadioItemProps & HTMLDivAttributes;
-
-type ContentProps<
-	T extends Transition = Transition,
-	In extends Transition = Transition,
-	Out extends Transition = Transition
-> = I.ContentProps<T, In, Out> & HTMLDivAttributes;
-
-type GroupProps = I.GroupProps & HTMLDivAttributes;
-
-type AnchorElement = HTMLAnchorAttributes & {
-	href?: HTMLAnchorAttributes["href"];
-};
-
-type DivElement = HTMLDivAttributes & {
-	href?: never;
-};
-
-type ItemProps = I.ItemProps & (AnchorElement | DivElement);
-
-type CheckboxItemIndicatorProps = I.CheckboxItemIndicatorProps & HTMLDivAttributes;
-type LabelProps = I.LabelProps & HTMLDivAttributes;
-type SeparatorProps = I.SeparatorProps & HTMLDivAttributes;
-type SubProps = I.SubProps;
-
-type SubContentProps<
-	T extends Transition = Transition,
-	In extends Transition = Transition,
-	Out extends Transition = Transition
-> = I.SubContentProps<T, In, Out> & HTMLDivAttributes;
-
-type SubTriggerProps = I.SubTriggerProps & HTMLDivAttributes;
-
-type TriggerProps = I.TriggerProps & HTMLButtonAttributes;
-
-type ArrowProps = I.ArrowProps & HTMLDivAttributes;
-
-type ItemEvents<T extends Element = HTMLDivElement> = {
-	click: CustomEventHandler<MouseEvent, T>;
-	keydown: CustomEventHandler<KeyboardEvent, T>;
-	focusin: CustomEventHandler<FocusEvent, T>;
-	focusout: CustomEventHandler<FocusEvent, T>;
-	pointerdown: CustomEventHandler<PointerEvent, T>;
-	pointerleave: CustomEventHandler<PointerEvent, T>;
-	pointermove: CustomEventHandler<PointerEvent, T>;
-};
-
-type CheckboxItemEvents = ItemEvents;
-type RadioItemEvents = ItemEvents;
-type SubTriggerEvents = Omit<ItemEvents, "pointerdown">;
-
-type TriggerEvents<T extends Element = HTMLButtonElement> = {
-	click: CustomEventHandler<MouseEvent, T>;
-	keydown: CustomEventHandler<KeyboardEvent, T>;
-};
-
-type ContentEvents<T extends Element = HTMLDivElement> = {
-	keydown: CustomEventHandler<KeyboardEvent, T>;
-};
-
-type SubContentEvents<T extends Element = HTMLDivElement> = {
-	keydown: CustomEventHandler<KeyboardEvent, T>;
-	focusout: CustomEventHandler<FocusEvent, T>;
-	pointermove: CustomEventHandler<PointerEvent, T>;
-};
-
-export type {
+import type {
 	ArrowProps,
-	CheckboxItemEvents,
-	CheckboxItemIndicatorProps,
+	ContentProps,
 	CheckboxItemProps,
+	RadioGroupProps,
+	RadioItemProps,
+	GroupProps,
+	SubContentProps,
+	SubTriggerProps,
+	DropdownTriggerProps as TriggerProps,
+	ItemProps,
+	CheckboxItemIndicatorProps,
+	SeparatorProps,
+	SubProps,
+	LabelProps,
+	Props,
+	//
 	ContentEvents,
+	CheckboxItemEvents,
+	ItemEvents,
+	RadioItemEvents,
+	SubTriggerEvents,
+	DropdownTriggerEvents as TriggerEvents,
+	SubContentEvents
+} from "$lib/bits/menu/index.js";
+
+export type {
+	Props,
+	SubProps,
+	ItemProps,
+	ArrowProps,
+	GroupProps,
+	LabelProps,
 	ContentProps,
-	ArrowProps as DropdownMenuArrowProps,
-	CheckboxItemEvents as DropdownMenuCheckboxItemEvents,
-	CheckboxItemIndicatorProps as DropdownMenuCheckboxItemIndicatorProps,
-	CheckboxItemProps as DropdownMenuCheckboxItemProps,
-	ContentEvents as DropdownMenuContentEvents,
-	ContentProps as DropdownMenuContentProps,
-	GroupProps as DropdownMenuGroupProps,
-	ItemEvents as DropdownMenuItemEvents,
-	ItemProps as DropdownMenuItemProps,
-	LabelProps as DropdownMenuLabelProps,
+	TriggerProps,
+	RadioItemProps,
+	SeparatorProps,
+	RadioGroupProps,
+	SubContentProps,
+	SubTriggerProps,
+	CheckboxItemProps,
+	CheckboxItemIndicatorProps,
 	//
 	Props as DropdownMenuProps,
-	RadioGroupProps as DropdownMenuRadioGroupProps,
-	RadioItemEvents as DropdownMenuRadioItemEvents,
+	SubProps as DropdownMenuSubProps,
+	ItemProps as DropdownMenuItemProps,
+	LabelProps as DropdownMenuLabelProps,
+	ArrowProps as DropdownMenuArrowProps,
+	GroupProps as DropdownMenuGroupProps,
+	ContentProps as DropdownMenuContentProps,
+	TriggerProps as DropdownMenuTriggerProps,
 	RadioItemProps as DropdownMenuRadioItemProps,
 	SeparatorProps as DropdownMenuSeparatorProps,
-	SubContentEvents as DropdownMenuSubContentEvents,
-	SubContentProps as DropdownMenuSubContentProps,
-	SubProps as DropdownMenuSubProps,
-	SubTriggerEvents as DropdownMenuSubTriggerEvents,
 	SubTriggerProps as DropdownMenuSubTriggerProps,
+	RadioGroupProps as DropdownMenuRadioGroupProps,
+	SubContentProps as DropdownMenuSubContentProps,
+	CheckboxItemProps as DropdownMenuCheckboxItemProps,
+	CheckboxItemIndicatorProps as DropdownMenuCheckboxItemIndicatorProps,
 	//,
-	TriggerEvents as DropdownMenuTriggerEvents,
-	TriggerProps as DropdownMenuTriggerProps,
-	GroupProps,
 	ItemEvents,
-	ItemProps,
-	LabelProps,
-	Props,
-	RadioGroupProps,
+	TriggerEvents,
+	ContentEvents,
 	RadioItemEvents,
-	RadioItemProps,
-	SeparatorProps,
 	SubContentEvents,
-	SubContentProps,
-	SubProps,
 	SubTriggerEvents,
-	SubTriggerProps,
+	CheckboxItemEvents,
 	//
-	TriggerEvents,
-	TriggerProps
+	ItemEvents as DropdownMenuItemEvents,
+	TriggerEvents as DropdownMenuTriggerEvents,
+	ContentEvents as DropdownMenuContentEvents,
+	RadioItemEvents as DropdownMenuRadioItemEvents,
+	SubContentEvents as DropdownMenuSubContentEvents,
+	SubTriggerEvents as DropdownMenuSubTriggerEvents,
+	CheckboxItemEvents as DropdownMenuCheckboxItemEvents
 };
diff --git a/src/lib/shared/floating.ts b/src/lib/bits/floating/_types.ts
similarity index 79%
rename from src/lib/shared/floating.ts
rename to src/lib/bits/floating/_types.ts
index 0d3998b91..235a8546d 100644
--- a/src/lib/shared/floating.ts
+++ b/src/lib/bits/floating/_types.ts
@@ -1,12 +1,12 @@
 import type { AsChild, Transition, TransitionProps } from "$lib/internal/index.js";
 
-export type FloatingArrowProps = Expand<
+export type ArrowProps = Expand<
 	{
 		size?: number;
 	} & AsChild
 >;
 
-export type FloatingContentProps<
+export type ContentProps<
 	T extends Transition = Transition,
 	In extends Transition = Transition,
 	Out extends Transition = Transition
diff --git a/src/lib/bits/context-menu/_types.ts b/src/lib/bits/menu/_types.ts
similarity index 60%
rename from src/lib/bits/context-menu/_types.ts
rename to src/lib/bits/menu/_types.ts
index baf738bf5..ab6c7bc71 100644
--- a/src/lib/bits/context-menu/_types.ts
+++ b/src/lib/bits/menu/_types.ts
@@ -1,33 +1,27 @@
 /**
- * We define prop types without the HTMLAttributes here so that we can use them
- * to type-check our API documentation, which requires we document each prop,
- * but we don't want to document the HTML attributes.
+ * Shared internal types for the various menu components.
  */
-
 import type {
 	AsChild,
-	Expand,
 	OmitChecked,
 	OmitFloating,
-	OmitOpen,
 	OnChangeFn,
 	Transition,
 	TransitionProps
 } from "$lib/internal/index.js";
 import type {
-	FloatingArrowProps,
-	MenuContentProps,
-	MenuSubTriggerProps
-} from "$lib/shared/index.js";
-import type {
-	CreateContextMenuProps,
+	CreateContextMenuCheckboxItemProps,
 	CreateContextMenuRadioGroupProps,
 	ContextMenuRadioItemProps,
 	CreateContextSubmenuProps,
-	CreateContextMenuCheckboxItemProps
+	CreateContextMenuProps
 } from "@melt-ui/svelte";
+import type {
+	ContentProps as FloatingContentProps,
+	ArrowProps as FloatingArrowProps
+} from "$lib/bits/floating/_types.js";
 
-type Props = Expand<
+export type Props = Expand<
 	OmitFloating<CreateContextMenuProps> & {
 		/**
 		 * The open state of the context menu.
@@ -44,7 +38,29 @@ type Props = Expand<
 	}
 >;
 
-type CheckboxItemProps = Expand<
+export type ContentProps<
+	T extends Transition = Transition,
+	In extends Transition = Transition,
+	Out extends Transition = Transition
+> = Expand<
+	{
+		sideOffset?: number;
+	} & FloatingContentProps<T, In, Out> &
+		AsChild
+>;
+
+export type SubTriggerProps = Expand<
+	{
+		/**
+		 * Whether the subtrigger is disabled or not.
+		 *
+		 * @defaultValue false;
+		 */
+		disabled?: boolean;
+	} & AsChild
+>;
+
+export type CheckboxItemProps = Expand<
 	OmitChecked<CreateContextMenuCheckboxItemProps> & {
 		/**
 		 * The checked state of the checkbox item.
@@ -61,7 +77,7 @@ type CheckboxItemProps = Expand<
 	} & AsChild
 >;
 
-type RadioGroupProps = Expand<
+export type RadioGroupProps = Expand<
 	{
 		/**
 		 * The value of the radio group.
@@ -77,27 +93,10 @@ type RadioGroupProps = Expand<
 	} & AsChild
 >;
 
-type RadioItemProps = Expand<ContextMenuRadioItemProps & AsChild>;
-
-type GroupProps = AsChild;
-
-type ItemProps = Expand<
-	{
-		/**
-		 * Whether the item is disabled.
-		 *
-		 * @defaultValue false
-		 */
-		disabled?: boolean;
-	} & AsChild
->;
-
-type CheckboxItemIndicatorProps = AsChild;
-type LabelProps = AsChild;
-type SeparatorProps = AsChild;
+export type RadioItemProps = Expand<ContextMenuRadioItemProps & AsChild>;
 
-type SubProps = Expand<
-	OmitOpen<Omit<CreateContextSubmenuProps, "ids" | "arrowSize">> & {
+export type SubProps = Expand<
+	OmitFloating<CreateContextSubmenuProps> & {
 		/**
 		 * The open state of the submenu.
 		 * You can bind this to a boolean value to programmatically control the open state.
@@ -113,28 +112,30 @@ type SubProps = Expand<
 	}
 >;
 
-type SubContentProps<
+export type ItemProps = Expand<
+	{
+		/**
+		 * Whether the item is disabled.
+		 *
+		 * @defaultValue false
+		 */
+		disabled?: boolean;
+	} & AsChild
+>;
+
+export type SubContentProps<
 	T extends Transition = Transition,
 	In extends Transition = Transition,
 	Out extends Transition = Transition
-> = Expand<TransitionProps<T, In, Out> & AsChild>;
-
-type TriggerProps = AsChild;
+> = Expand<
+	TransitionProps<T, In, Out> & {
+		sideOffset?: number;
+	} & AsChild
+>;
 
-export type {
-	Props,
-	FloatingArrowProps as ArrowProps,
-	CheckboxItemProps,
-	MenuContentProps as ContentProps,
-	GroupProps,
-	ItemProps,
-	CheckboxItemIndicatorProps,
-	LabelProps,
-	RadioGroupProps,
-	RadioItemProps,
-	SeparatorProps,
-	SubProps,
-	SubContentProps,
-	MenuSubTriggerProps as SubTriggerProps,
-	TriggerProps
-};
+export type ArrowProps = FloatingArrowProps;
+export type GroupProps = AsChild;
+export type CheckboxItemIndicatorProps = AsChild;
+export type LabelProps = AsChild;
+export type SeparatorProps = AsChild;
+export type TriggerProps = AsChild;
diff --git a/src/lib/bits/menu/index.ts b/src/lib/bits/menu/index.ts
new file mode 100644
index 000000000..a0c4ebf25
--- /dev/null
+++ b/src/lib/bits/menu/index.ts
@@ -0,0 +1 @@
+export * from "./types.js";
diff --git a/src/lib/bits/menu/types.ts b/src/lib/bits/menu/types.ts
index 591dbcd0d..cbb1eb31f 100644
--- a/src/lib/bits/menu/types.ts
+++ b/src/lib/bits/menu/types.ts
@@ -3,15 +3,123 @@
  * such as `DropdownMenu`, `Menubar` & `ContextMenu`.
  */
 
-import type { AsChild, Transition, TransitionProps } from "$lib/internal/index.js";
+import type { Transition, HTMLDivAttributes } from "$lib/internal/index.js";
+import type { CustomEventHandler } from "$lib";
+import type { HTMLAnchorAttributes, HTMLButtonAttributes } from "svelte/elements";
+import type * as I from "$lib/bits/menu/_types.js";
 
-export type ContentProps<
+type Props = I.Props;
+
+type CheckboxItemProps = I.CheckboxItemProps & HTMLDivAttributes;
+
+type RadioGroupProps = I.RadioGroupProps & HTMLDivAttributes;
+
+type RadioItemProps = I.RadioItemProps & HTMLDivAttributes;
+
+type ContentProps<
 	T extends Transition = Transition,
 	In extends Transition = Transition,
 	Out extends Transition = Transition
-> = Expand<
-	{
-		sideOffset?: number;
-	} & TransitionProps<T, In, Out> &
-		AsChild
->;
+> = I.ContentProps<T, In, Out> & HTMLDivAttributes;
+
+type GroupProps = I.GroupProps & HTMLDivAttributes;
+
+type AnchorElement = HTMLAnchorAttributes & {
+	href?: HTMLAnchorAttributes["href"];
+};
+
+type DivElement = HTMLDivAttributes & {
+	href?: never;
+};
+
+type ItemProps = I.ItemProps & (AnchorElement | DivElement);
+
+type CheckboxItemIndicatorProps = I.CheckboxItemIndicatorProps & HTMLDivAttributes;
+
+type LabelProps = I.LabelProps & HTMLDivAttributes;
+
+type SeparatorProps = I.SeparatorProps & HTMLDivAttributes;
+
+type SubProps = I.SubProps;
+
+type SubContentProps<
+	T extends Transition = Transition,
+	In extends Transition = Transition,
+	Out extends Transition = Transition
+> = I.SubContentProps<T, In, Out> & HTMLDivAttributes;
+
+type SubTriggerProps = I.SubTriggerProps & HTMLDivAttributes;
+
+// Trigger for context menu
+type ContextTriggerProps = I.TriggerProps & HTMLDivAttributes;
+
+// Trigger dropdown and menubar menus
+type DropdownTriggerProps = I.TriggerProps & HTMLButtonAttributes;
+
+type ArrowProps = I.ArrowProps & HTMLDivAttributes;
+
+type ItemEvents<T extends Element = HTMLDivElement> = {
+	click: CustomEventHandler<MouseEvent, T>;
+	keydown: CustomEventHandler<KeyboardEvent, T>;
+	focusin: CustomEventHandler<FocusEvent, T>;
+	focusout: CustomEventHandler<FocusEvent, T>;
+	pointerdown: CustomEventHandler<PointerEvent, T>;
+	pointerleave: CustomEventHandler<PointerEvent, T>;
+	pointermove: CustomEventHandler<PointerEvent, T>;
+};
+
+type CheckboxItemEvents = ItemEvents;
+
+type RadioItemEvents = ItemEvents;
+
+type SubTriggerEvents = Omit<ItemEvents, "pointerdown">;
+
+// Trigger events used by the context menu
+type ContextTriggerEvents<T extends Element = HTMLDivElement> = {
+	pointerdown: CustomEventHandler<PointerEvent, T>;
+	contextmenu: CustomEventHandler<Event, T>;
+};
+
+// Trigger events used by the dropdown and menubar menus
+type DropdownTriggerEvents<T extends Element = HTMLButtonElement> = {
+	click: CustomEventHandler<MouseEvent, T>;
+	keydown: CustomEventHandler<KeyboardEvent, T>;
+};
+
+type SubContentEvents<T extends Element = HTMLDivElement> = {
+	keydown: CustomEventHandler<KeyboardEvent, T>;
+	focusout: CustomEventHandler<FocusEvent, T>;
+	pointermove: CustomEventHandler<PointerEvent, T>;
+};
+
+type ContentEvents<T extends Element = HTMLDivElement> = {
+	keydown: CustomEventHandler<KeyboardEvent, T>;
+};
+
+export type {
+	Props,
+	ArrowProps,
+	CheckboxItemProps,
+	ContentProps,
+	GroupProps,
+	ItemProps,
+	CheckboxItemIndicatorProps,
+	LabelProps,
+	RadioGroupProps,
+	RadioItemProps,
+	SeparatorProps,
+	SubProps,
+	SubContentProps,
+	SubTriggerProps,
+	ContextTriggerProps,
+	DropdownTriggerProps,
+	//
+	ContentEvents,
+	CheckboxItemEvents,
+	ItemEvents,
+	RadioItemEvents,
+	SubTriggerEvents,
+	ContextTriggerEvents,
+	DropdownTriggerEvents,
+	SubContentEvents
+};
diff --git a/src/lib/bits/menubar/_types.ts b/src/lib/bits/menubar/_types.ts
index 8ae4737e9..58dd12955 100644
--- a/src/lib/bits/menubar/_types.ts
+++ b/src/lib/bits/menubar/_types.ts
@@ -4,144 +4,9 @@
  * but we don't want to document the HTML attributes.
  */
 
-import type {
-	AsChild,
-	Expand,
-	OmitChecked,
-	OmitValue,
-	OnChangeFn,
-	OmitIds,
-	OmitFloating
-} from "$lib/internal/index.js";
-import type {
-	FloatingArrowProps,
-	MenuContentProps,
-	MenuSubTriggerProps
-} from "$lib/shared/index.js";
-import type {
-	CreateMenubarProps,
-	CreateMenubarMenuProps,
-	CreateMenuCheckboxItemProps,
-	CreateMenuRadioGroupProps,
-	MenubarRadioItemProps,
-	CreateMenubarSubmenuProps
-} from "@melt-ui/svelte";
+import type { AsChild, Expand, OmitIds } from "$lib/internal/index.js";
+import type { CreateMenubarProps } from "@melt-ui/svelte";
 
 type Props = Expand<OmitIds<CreateMenubarProps> & AsChild>;
 
-type MenuProps = Expand<
-	OmitFloating<CreateMenubarMenuProps> & {
-		/**
-		 * The open state of the menu.
-		 * You can bind this to a boolean value to programmatically control the open state.
-		 *
-		 * @defaultValue false
-		 */
-		open?: boolean;
-
-		/**
-		 * A callback function called when the open state changes.
-		 */
-		onOpenChange?: OnChangeFn<boolean>;
-	}
->;
-
-type CheckboxItemProps = Expand<
-	OmitChecked<CreateMenuCheckboxItemProps> & {
-		/**
-		 * The checked state of the checkbox item.
-		 * You can bind this to a boolean value to programmatically control the checked state.
-		 *
-		 * @defaultValue false
-		 */
-		checked?: boolean | "indeterminate";
-
-		/**
-		 * A callback function called when the checked state changes.
-		 */
-		onCheckedChange?: OnChangeFn<boolean | "indeterminate">;
-
-		/**
-		 * Whether the checkbox item is disabled.
-		 *
-		 * @defaultValue false
-		 */
-		disabled?: boolean;
-	} & AsChild
->;
-
-type RadioGroupProps = Expand<
-	OmitValue<CreateMenuRadioGroupProps> & {
-		/**
-		 * The value of the radio group.
-		 * You can bind this to a value to programmatically control the checked state.
-		 *
-		 * @defaultValue undefined
-		 */
-		value?: CreateMenuRadioGroupProps["defaultValue"] & {};
-
-		/**
-		 * A callback function called when the value changes.
-		 */
-		onValueChange?: OnChangeFn<CreateMenuRadioGroupProps["defaultValue"]>;
-	} & AsChild
->;
-
-type GroupProps = AsChild;
-
-type ItemProps = Expand<
-	{
-		/**
-		 * Whether the menu item is disabled.
-		 *
-		 * @defaultValue false
-		 */
-		disabled?: boolean;
-	} & AsChild
->;
-
-type CheckboxIndicatorProps = AsChild;
-
-type LabelProps = AsChild;
-
-type RadioItemProps = Expand<MenubarRadioItemProps & AsChild>;
-
-type SeparatorProps = AsChild;
-
-type SubProps = Expand<
-	OmitFloating<CreateMenubarSubmenuProps> & {
-		/**
-		 * The open state of the submenu.
-		 * You can bind this to a boolean value to programmatically control the open state.
-		 *
-		 * @defaultValue false
-		 */
-		open?: boolean;
-
-		/**
-		 * A callback function called when the open state changes.
-		 */
-		onOpenChange?: OnChangeFn<boolean>;
-	}
->;
-
-type TriggerProps = AsChild;
-
-export type {
-	Props,
-	SubProps,
-	MenuProps,
-	ItemProps,
-	FloatingArrowProps as ArrowProps,
-	GroupProps,
-	LabelProps,
-	TriggerProps,
-	MenuContentProps as ContentProps,
-	RadioItemProps,
-	SeparatorProps,
-	RadioGroupProps,
-	MenuContentProps as SubContentProps,
-	MenuSubTriggerProps as SubTriggerProps,
-	CheckboxItemProps,
-	CheckboxIndicatorProps
-};
+export type { Props };
diff --git a/src/lib/bits/menubar/types.ts b/src/lib/bits/menubar/types.ts
index 0ff0716ca..909ed7d9d 100644
--- a/src/lib/bits/menubar/types.ts
+++ b/src/lib/bits/menubar/types.ts
@@ -1,81 +1,32 @@
-import type { Expand, HTMLDivAttributes, Transition } from "$lib/internal/index.js";
-import type { CustomEventHandler } from "$lib/index.js";
-
-import type { HTMLButtonAttributes } from "svelte/elements";
-import type * as I from "./_types.js";
-
-type Props = I.Props & HTMLDivAttributes;
-
-type MenuProps = I.MenuProps;
-
-type CheckboxItemProps = I.CheckboxItemProps & HTMLDivAttributes;
-
-type RadioGroupProps = I.RadioGroupProps & HTMLDivAttributes;
-
-type ContentProps<
-	T extends Transition = Transition,
-	In extends Transition = Transition,
-	Out extends Transition = Transition
-> = I.ContentProps<T, In, Out> & HTMLDivAttributes;
-
-type GroupProps = I.GroupProps & HTMLDivAttributes;
-
-type ItemProps = I.ItemProps & HTMLDivAttributes;
-
-type CheckboxItemIndicatorProps = I.CheckboxIndicatorProps & HTMLDivAttributes;
-
-type LabelProps = I.LabelProps & HTMLDivAttributes;
-
-type RadioItemProps = I.RadioItemProps & HTMLDivAttributes;
-
-type SeparatorProps = I.SeparatorProps & HTMLDivAttributes;
-
-type SubProps = I.SubProps;
-
-type SubContentProps<
-	T extends Transition = Transition,
-	In extends Transition = Transition,
-	Out extends Transition = Transition
-> = I.SubContentProps<T, In, Out> & HTMLDivAttributes;
-
-type SubTriggerProps = I.SubTriggerProps & HTMLDivAttributes;
-
-type TriggerProps = I.TriggerProps & HTMLButtonAttributes;
-
-type ArrowProps = I.ArrowProps & HTMLDivAttributes;
-
-type ItemEvents<T extends Element = HTMLDivElement> = {
-	click: CustomEventHandler<PointerEvent, T>;
-	focusin: CustomEventHandler<FocusEvent, T>;
-	focusout: CustomEventHandler<FocusEvent, T>;
-	keydown: CustomEventHandler<KeyboardEvent, T>;
-	pointerdown: CustomEventHandler<PointerEvent, T>;
-	pointerleave: CustomEventHandler<PointerEvent, T>;
-	pointermove: CustomEventHandler<PointerEvent, T>;
-};
-
-type SubTriggerEvents<T extends Element = HTMLDivElement> = Expand<
-	Omit<ItemEvents<T>, "pointerdown">
->;
-
-type CheckboxItemEvents = ItemEvents;
-type RadioItemEvents = ItemEvents;
-
-type TriggerEvents<T extends Element = HTMLButtonElement> = {
-	keydown: CustomEventHandler<KeyboardEvent, T>;
-	click: CustomEventHandler<MouseEvent, T>;
-	pointerenter: CustomEventHandler<PointerEvent, T>;
-};
-
-type ContentEvents<T extends Element = HTMLDivElement> = {
-	keydown: CustomEventHandler<KeyboardEvent, T>;
-};
+import type { HTMLDivAttributes } from "$lib/internal/index.js";
+import type { Props as MenubarProps } from "./_types.js";
+import type {
+	Props as MenuProps,
+	SubProps,
+	ItemProps,
+	ArrowProps,
+	GroupProps,
+	LabelProps,
+	DropdownTriggerProps as TriggerProps,
+	ContentProps,
+	RadioItemProps,
+	SeparatorProps,
+	RadioGroupProps,
+	SubContentProps,
+	SubTriggerProps,
+	CheckboxItemProps,
+	CheckboxItemIndicatorProps,
+	//
+	DropdownTriggerEvents as TriggerEvents,
+	ItemEvents,
+	SubTriggerEvents,
+	CheckboxItemEvents,
+	RadioItemEvents,
+	ContentEvents,
+	SubContentEvents
+} from "$lib/bits/menu/types.js";
 
-type SubContentEvents<T extends Element = HTMLDivElement> = {
-	focusout: CustomEventHandler<FocusEvent, T>;
-	pointermove: CustomEventHandler<PointerEvent, T>;
-	keydown: CustomEventHandler<KeyboardEvent, T>;
-};
+type Props = MenubarProps & HTMLDivAttributes;
 
 export type {
 	Props,
@@ -94,7 +45,6 @@ export type {
 	SubTriggerProps,
 	CheckboxItemProps,
 	CheckboxItemIndicatorProps,
-
 	//
 	Props as MenubarProps,
 	SubProps as MenubarSubProps,
@@ -113,19 +63,19 @@ export type {
 	CheckboxItemProps as MenubarCheckboxItemProps,
 	CheckboxItemIndicatorProps as MenubarCheckboxItemIndicatorProps,
 	//
-	TriggerEvents,
 	ItemEvents,
-	SubTriggerEvents,
-	CheckboxItemEvents,
-	RadioItemEvents,
+	TriggerEvents,
 	ContentEvents,
+	RadioItemEvents,
+	SubTriggerEvents,
 	SubContentEvents,
+	CheckboxItemEvents,
 	//
-	TriggerEvents as MenubarTriggerEvents,
 	ItemEvents as MenubarItemEvents,
-	SubTriggerEvents as MenubarSubTriggerEvents,
-	CheckboxItemEvents as MenubarCheckboxItemEvents,
-	RadioItemEvents as MenubarRadioItemEvents,
 	ContentEvents as MenubarContentEvents,
-	SubContentEvents as MenubarSubContentEvents
+	TriggerEvents as MenubarTriggerEvents,
+	RadioItemEvents as MenubarRadioItemEvents,
+	SubTriggerEvents as MenubarSubTriggerEvents,
+	SubContentEvents as MenubarSubContentEvents,
+	CheckboxItemEvents as MenubarCheckboxItemEvents
 };
diff --git a/src/lib/bits/popover/_types.ts b/src/lib/bits/popover/_types.ts
index 679b77253..3f66edcae 100644
--- a/src/lib/bits/popover/_types.ts
+++ b/src/lib/bits/popover/_types.ts
@@ -4,7 +4,7 @@
  * but we don't want to document the HTML attributes.
  */
 import type { Expand, OnChangeFn, AsChild, OmitFloating } from "$lib/internal/index.js";
-import type { FloatingArrowProps, FloatingContentProps } from "$lib/shared/index.js";
+import type { ArrowProps, ContentProps } from "$lib/bits/floating/_types.js";
 import type { CreatePopoverProps } from "@melt-ui/svelte";
 
 type Props = Expand<
@@ -27,10 +27,4 @@ type Props = Expand<
 type TriggerProps = AsChild;
 type CloseProps = AsChild;
 
-export type {
-	Props,
-	CloseProps,
-	FloatingArrowProps as ArrowProps,
-	FloatingContentProps as ContentProps,
-	TriggerProps
-};
+export type { Props, CloseProps, ArrowProps, ContentProps, TriggerProps };
diff --git a/src/lib/bits/select/_types.ts b/src/lib/bits/select/_types.ts
index 8a5bb351a..e3295dc29 100644
--- a/src/lib/bits/select/_types.ts
+++ b/src/lib/bits/select/_types.ts
@@ -5,7 +5,7 @@
  */
 import type { CreateSelectProps, SelectOptionProps } from "@melt-ui/svelte";
 import type { AsChild, Expand, OmitFloating, OnChangeFn } from "$lib/internal/index.js";
-import type { FloatingArrowProps, FloatingContentProps } from "$lib/shared/index.js";
+import type { ContentProps, ArrowProps } from "$lib/bits/floating/_types.js";
 
 type Props<T = unknown> = Expand<
 	OmitFloating<Omit<CreateSelectProps, "selected" | "defaultSelected" | "onSelectedChange">> & {
@@ -58,8 +58,8 @@ type ValueProps = Expand<
 
 export type {
 	Props,
-	FloatingArrowProps as ArrowProps,
-	FloatingContentProps as ContentProps,
+	ArrowProps,
+	ContentProps,
 	GroupProps,
 	InputProps,
 	LabelProps,
diff --git a/src/lib/shared/index.ts b/src/lib/shared/index.ts
deleted file mode 100644
index 74ba86194..000000000
--- a/src/lib/shared/index.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-/**
- * Functions & types shared between multiple components throughout
- * the library.
- */
-
-export * from "./floating.js";
-export * from "./menu.js";
diff --git a/src/lib/shared/menu.ts b/src/lib/shared/menu.ts
deleted file mode 100644
index 2a9b992cf..000000000
--- a/src/lib/shared/menu.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-import type { AsChild, Transition } from "$lib/internal";
-import type { FloatingContentProps } from "./index.js";
-
-export type MenuContentProps<
-	T extends Transition = Transition,
-	In extends Transition = Transition,
-	Out extends Transition = Transition
-> = Expand<
-	{
-		sideOffset?: number;
-	} & FloatingContentProps<T, In, Out> &
-		AsChild
->;
-
-export type MenuSubTriggerProps = Expand<
-	{
-		/**
-		 * Whether the subtrigger is disabled or not.
-		 *
-		 * @defaultValue false;
-		 */
-		disabled?: boolean;
-	} & AsChild
->;

From da8b2cc26f71315aa3480fc46b6c04cc3d352c49 Mon Sep 17 00:00:00 2001
From: Hunter Johnston <johnstonhuntera@gmail.com>
Date: Thu, 16 Nov 2023 18:04:01 -0500
Subject: [PATCH 026/217] refactor docs

---
 src/components/api-ref/prop-type-content.svelte     |  2 +-
 src/components/api-ref/props-table.svelte           | 13 ++++++++++---
 src/components/api-section.svelte                   |  2 +-
 src/content/api-reference/accordion.ts              |  4 ++--
 src/content/api-reference/alert-dialog.ts           |  8 ++++----
 src/content/api-reference/avatar.ts                 |  2 +-
 src/content/api-reference/checkbox.ts               |  3 ++-
 src/content/api-reference/collapsible.ts            |  2 +-
 src/content/api-reference/dialog.ts                 |  2 +-
 src/content/api-reference/dropdown-menu.ts          |  2 +-
 src/content/api-reference/helpers.ts                |  4 ++--
 src/content/api-reference/label.ts                  |  2 +-
 src/content/api-reference/link-preview.ts           |  8 +++++++-
 src/content/api-reference/menu.ts                   |  8 +++++++-
 src/content/api-reference/menubar.ts                |  2 +-
 src/content/api-reference/popover.ts                |  9 +++++++--
 src/content/api-reference/progress.ts               |  2 +-
 src/content/api-reference/radio-group.ts            |  2 +-
 src/content/api-reference/select.ts                 |  8 +++++++-
 src/content/api-reference/separator.ts              |  2 +-
 .../bits/context-menu/components/ContextMenu.svelte |  4 +---
 src/lib/bits/dialog/components/Dialog.svelte        |  4 +---
 .../dropdown-menu/components/DropdownMenu.svelte    |  4 +---
 src/lib/bits/link-preview/_types.ts                 |  9 ++-------
 src/lib/bits/menu/types.ts                          | 13 +++++++++++--
 src/lib/bits/menubar/types.ts                       |  4 ++--
 src/lib/bits/tooltip/_types.ts                      |  4 ++--
 src/routes/docs/components/[name]/+page.ts          |  1 -
 28 files changed, 79 insertions(+), 51 deletions(-)

diff --git a/src/components/api-ref/prop-type-content.svelte b/src/components/api-ref/prop-type-content.svelte
index 149e1868b..31b8f6d97 100644
--- a/src/components/api-ref/prop-type-content.svelte
+++ b/src/components/api-ref/prop-type-content.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { Popover } from "$lib";
-	import { cn, flyAndScale, parseTypeDef } from "@/utils";
+	import { flyAndScale, parseTypeDef } from "@/utils";
 	import { Code } from "@/components";
 	import { Info } from "phosphor-svelte";
 	import type { PropType } from "@/types";
diff --git a/src/components/api-ref/props-table.svelte b/src/components/api-ref/props-table.svelte
index 11760153c..16ae4de51 100644
--- a/src/components/api-ref/props-table.svelte
+++ b/src/components/api-ref/props-table.svelte
@@ -1,11 +1,18 @@
 <script lang="ts">
 	import * as Table from "@/components/ui/table";
 	import { Code } from "@/components";
-	import type { PropSchema } from "@/types";
+	import type { PropObj, PropSchema } from "@/types";
 	import { parseMarkdown } from "@/utils";
 	import PropTypeContent from "./prop-type-content.svelte";
 
-	export let props: PropSchema[] = [];
+	export let props: PropObj<Record<string, unknown>>;
+
+	$: propData = Object.entries(props).map(([name, prop]) => {
+		const { type, description, default: defaultVal } = prop as PropSchema;
+		return { name, type, description, default: defaultVal };
+	});
+
+	$: console.log(propData);
 </script>
 
 <Table.Root>
@@ -17,7 +24,7 @@
 		</Table.Row>
 	</Table.Header>
 	<Table.Body>
-		{#each props as { type, name, description, default: defaultVal }}
+		{#each propData as { type, name, description, default: defaultVal }}
 			<Table.Row>
 				<Table.Cell class="align-baseline pr-1">
 					<Code class="text-foreground font-semibold">{name}</Code>
diff --git a/src/components/api-section.svelte b/src/components/api-section.svelte
index 75a07d95a..0a3dd2c3e 100644
--- a/src/components/api-section.svelte
+++ b/src/components/api-section.svelte
@@ -22,7 +22,7 @@
 			</div>
 			<P class="!mt-2 !mb-5">{schema.description}</P>
 			<div class="flex flex-col gap-4">
-				{#if schema.props && schema.props.length}
+				{#if schema.props}
 					<PropsTable props={schema.props} />
 				{/if}
 				{#if schema.dataAttributes && schema.dataAttributes.length}
diff --git a/src/content/api-reference/accordion.ts b/src/content/api-reference/accordion.ts
index 24dcb6fe5..ff05d6ed8 100644
--- a/src/content/api-reference/accordion.ts
+++ b/src/content/api-reference/accordion.ts
@@ -1,6 +1,6 @@
 import type { APISchema } from "@/types";
-import * as C from "@/content/constants";
-import { union, enums, asChild, transitionProps } from "@/content";
+import * as C from "@/content/constants.js";
+import { union, enums, asChild, transitionProps } from "@/content/api-reference/helpers.js";
 import type * as Accordion from "$lib/bits/accordion/_types.js";
 
 const root: APISchema<Accordion.Props<false>> = {
diff --git a/src/content/api-reference/alert-dialog.ts b/src/content/api-reference/alert-dialog.ts
index 4e4351440..090607201 100644
--- a/src/content/api-reference/alert-dialog.ts
+++ b/src/content/api-reference/alert-dialog.ts
@@ -1,7 +1,7 @@
-import type { APISchema } from "@/types";
-import { asChild, enums, portalProp, transitionProps } from "./helpers";
-import * as C from "@/content/constants";
-import { focusProp } from "@/content/api-reference/extended-types";
+import type { APISchema } from "@/types/api.js";
+import { asChild, enums, portalProp, transitionProps } from "@/content/api-reference/helpers.js";
+import * as C from "@/content/constants.js";
+import { focusProp } from "@/content/api-reference/extended-types/index.js";
 import type * as AlertDialog from "$lib/bits/alert-dialog/_types.js";
 
 export const root: APISchema<AlertDialog.Props> = {
diff --git a/src/content/api-reference/avatar.ts b/src/content/api-reference/avatar.ts
index c1a28dbd7..a8b6a2b30 100644
--- a/src/content/api-reference/avatar.ts
+++ b/src/content/api-reference/avatar.ts
@@ -1,5 +1,5 @@
 import type { APISchema } from "@/types";
-import { asChild, enums } from "./helpers.js";
+import { asChild, enums } from "@/content/api-reference/helpers.js";
 import type * as Avatar from "$lib/bits/avatar/_types";
 import * as C from "@/content/constants.js";
 
diff --git a/src/content/api-reference/checkbox.ts b/src/content/api-reference/checkbox.ts
index 350921c4b..6d7f8a10e 100644
--- a/src/content/api-reference/checkbox.ts
+++ b/src/content/api-reference/checkbox.ts
@@ -1,7 +1,8 @@
-import { asChild, enums, union } from "@/content";
+import { asChild, enums, union } from "./helpers.js";
 import type { APISchema } from "@/types";
 import type * as Checkbox from "$lib/bits/checkbox/_types";
 import * as C from "@/content/constants";
+
 export const root: APISchema<Checkbox.Props> = {
 	title: "Root",
 	description: "The button component used to toggle the state of the checkbox.",
diff --git a/src/content/api-reference/collapsible.ts b/src/content/api-reference/collapsible.ts
index 06d974326..475f47c2f 100644
--- a/src/content/api-reference/collapsible.ts
+++ b/src/content/api-reference/collapsible.ts
@@ -1,5 +1,5 @@
 import type { APISchema, PropObj } from "@/types";
-import { asChild, enums, transitionProps } from "@/content";
+import { asChild, enums, transitionProps } from "@/content/api-reference/helpers.js";
 import type * as Collapsible from "$lib/bits/collapsible/_types";
 import * as C from "@/content/constants";
 export const root: APISchema<Collapsible.Props> = {
diff --git a/src/content/api-reference/dialog.ts b/src/content/api-reference/dialog.ts
index 3e8904b46..e33925bc6 100644
--- a/src/content/api-reference/dialog.ts
+++ b/src/content/api-reference/dialog.ts
@@ -1,5 +1,5 @@
 import type { APISchema } from "@/types";
-import { asChild, enums, portalProp, transitionProps } from "./helpers";
+import { asChild, enums, portalProp, transitionProps } from "@/content/api-reference/helpers.js";
 import type * as Dialog from "$lib/bits/dialog/_types";
 import { focusProp } from "./extended-types";
 import * as C from "@/content/constants";
diff --git a/src/content/api-reference/dropdown-menu.ts b/src/content/api-reference/dropdown-menu.ts
index cb81538bb..224079b45 100644
--- a/src/content/api-reference/dropdown-menu.ts
+++ b/src/content/api-reference/dropdown-menu.ts
@@ -17,7 +17,7 @@ import {
 	checkboxIndicatorProps
 } from "./menu";
 import type * as Menu from "$lib/bits/menu/_types";
-import { enums } from "..";
+import { enums } from "@/content/api-reference/helpers.js";
 
 export const root: APISchema<Menu.Props> = {
 	title: "Root",
diff --git a/src/content/api-reference/helpers.ts b/src/content/api-reference/helpers.ts
index 05c65add6..698ea64ed 100644
--- a/src/content/api-reference/helpers.ts
+++ b/src/content/api-reference/helpers.ts
@@ -1,5 +1,5 @@
-import type { PropSchema } from "@/types";
-import * as C from "@/content/constants";
+import type { PropSchema } from "@/types/api.js";
+import * as C from "@/content/constants.js";
 
 export const asChild = {
 	type: C.BOOLEAN,
diff --git a/src/content/api-reference/label.ts b/src/content/api-reference/label.ts
index 28dabe33c..a25acb5a9 100644
--- a/src/content/api-reference/label.ts
+++ b/src/content/api-reference/label.ts
@@ -1,5 +1,5 @@
 import type { APISchema } from "@/types";
-import { asChild } from "./helpers";
+import { asChild } from "@/content/api-reference/helpers.js";
 import type * as Label from "$lib/bits/label/_types";
 
 export const root: APISchema<Label.Props> = {
diff --git a/src/content/api-reference/link-preview.ts b/src/content/api-reference/link-preview.ts
index 406aa1e16..e9b7eb42b 100644
--- a/src/content/api-reference/link-preview.ts
+++ b/src/content/api-reference/link-preview.ts
@@ -1,5 +1,11 @@
 import type { APISchema } from "@/types";
-import { arrowProps, asChild, enums, portalProp, transitionProps } from "./helpers";
+import {
+	arrowProps,
+	asChild,
+	enums,
+	portalProp,
+	transitionProps
+} from "@/content/api-reference/helpers.js";
 import type * as LinkPreview from "$lib/bits/link-preview/_types";
 import * as C from "@/content/constants";
 import { floatingConfigProp } from "./extended-types";
diff --git a/src/content/api-reference/menu.ts b/src/content/api-reference/menu.ts
index 44ab923c5..e60d8d51e 100644
--- a/src/content/api-reference/menu.ts
+++ b/src/content/api-reference/menu.ts
@@ -1,6 +1,12 @@
 import type { PropObj } from "@/types";
 import { floatingConfigProp, focusProp } from "./extended-types";
-import { asChild, transitionProps, portalProp, enums, union } from "@/content";
+import {
+	asChild,
+	transitionProps,
+	portalProp,
+	enums,
+	union
+} from "@/content/api-reference/helpers.js";
 import type * as Menu from "$lib/bits/menu/_types";
 import * as C from "@/content/constants";
 
diff --git a/src/content/api-reference/menubar.ts b/src/content/api-reference/menubar.ts
index f6ce9abcf..51dd036f6 100644
--- a/src/content/api-reference/menubar.ts
+++ b/src/content/api-reference/menubar.ts
@@ -1,5 +1,5 @@
 import type { APISchema } from "@/types";
-import { asChild, enums } from "./helpers";
+import { asChild, enums } from "@/content/api-reference/helpers.js";
 import {
 	props as menuProps,
 	subProps,
diff --git a/src/content/api-reference/popover.ts b/src/content/api-reference/popover.ts
index 949ef5a0b..b033554b1 100644
--- a/src/content/api-reference/popover.ts
+++ b/src/content/api-reference/popover.ts
@@ -1,8 +1,13 @@
 import type { APISchema } from "@/types/index.js";
-import { arrowProps, asChild, enums } from "./helpers.js";
 import type * as Popover from "$lib/bits/popover/_types.js";
 import { floatingConfigProp, focusProp } from "./extended-types/index.js";
-import { portalProp, transitionProps } from "./helpers.js";
+import {
+	portalProp,
+	transitionProps,
+	arrowProps,
+	asChild,
+	enums
+} from "@/content/api-reference/helpers.js";
 import * as C from "@/content/constants.js";
 
 export const root: APISchema<Popover.Props> = {
diff --git a/src/content/api-reference/progress.ts b/src/content/api-reference/progress.ts
index 4d1e0ffff..84dfd6f21 100644
--- a/src/content/api-reference/progress.ts
+++ b/src/content/api-reference/progress.ts
@@ -1,5 +1,5 @@
 import type { APISchema } from "@/types/index.js";
-import { asChild, enums } from "./helpers.js";
+import { asChild, enums } from "@/content/api-reference/helpers.js";
 import * as C from "@/content/constants.js";
 import type * as Progress from "$lib/bits/progress/_types.js";
 
diff --git a/src/content/api-reference/radio-group.ts b/src/content/api-reference/radio-group.ts
index 8e4fa9aeb..9bea04bcf 100644
--- a/src/content/api-reference/radio-group.ts
+++ b/src/content/api-reference/radio-group.ts
@@ -1,5 +1,5 @@
 import type { APISchema } from "@/types";
-import { asChild, enums } from "./helpers";
+import { asChild, enums } from "@/content/api-reference/helpers.js";
 import type * as RadioGroup from "$lib/bits/radio-group/_types";
 import * as C from "@/content/constants";
 
diff --git a/src/content/api-reference/select.ts b/src/content/api-reference/select.ts
index 77fd2dd70..c51f7409f 100644
--- a/src/content/api-reference/select.ts
+++ b/src/content/api-reference/select.ts
@@ -1,5 +1,11 @@
 import type { APISchema } from "@/types";
-import { arrowProps, asChild, enums, portalProp, transitionProps } from "./helpers";
+import {
+	arrowProps,
+	asChild,
+	enums,
+	portalProp,
+	transitionProps
+} from "@/content/api-reference/helpers.js";
 import * as C from "@/content/constants";
 import type * as Select from "$lib/bits/select/_types";
 
diff --git a/src/content/api-reference/separator.ts b/src/content/api-reference/separator.ts
index d69912745..bcf866ddd 100644
--- a/src/content/api-reference/separator.ts
+++ b/src/content/api-reference/separator.ts
@@ -1,5 +1,5 @@
 import type { APISchema } from "@/types";
-import { asChild, enums } from "./helpers";
+import { asChild, enums } from "@/content/api-reference/helpers.js";
 import * as C from "@/content/constants";
 import type * as Separator from "$lib/bits/separator/_types";
 
diff --git a/src/lib/bits/context-menu/components/ContextMenu.svelte b/src/lib/bits/context-menu/components/ContextMenu.svelte
index c0afe0bf6..ba5a6f032 100644
--- a/src/lib/bits/context-menu/components/ContextMenu.svelte
+++ b/src/lib/bits/context-menu/components/ContextMenu.svelte
@@ -7,7 +7,6 @@
 	export let closeOnOutsideClick: $$Props["closeOnOutsideClick"] = undefined;
 	export let closeOnEscape: $$Props["closeOnEscape"] = undefined;
 	export let portal: $$Props["portal"] = undefined;
-	export let forceVisible: $$Props["forceVisible"] = true;
 	export let open: $$Props["open"] = undefined;
 	export let onOpenChange: $$Props["onOpenChange"] = undefined;
 	export let preventScroll: $$Props["preventScroll"] = undefined;
@@ -26,7 +25,7 @@
 		closeOnOutsideClick,
 		closeOnEscape,
 		portal,
-		forceVisible,
+		forceVisible: true,
 		defaultOpen: open,
 		preventScroll,
 		positioning,
@@ -54,7 +53,6 @@
 	$: updateOption("closeOnOutsideClick", closeOnOutsideClick);
 	$: updateOption("closeOnEscape", closeOnEscape);
 	$: updateOption("portal", portal);
-	$: updateOption("forceVisible", forceVisible);
 	$: updateOption("preventScroll", preventScroll);
 	$: updateOption("positioning", positioning);
 	$: updateOption("loop", loop);
diff --git a/src/lib/bits/dialog/components/Dialog.svelte b/src/lib/bits/dialog/components/Dialog.svelte
index b00aa7ec8..f6f113f18 100644
--- a/src/lib/bits/dialog/components/Dialog.svelte
+++ b/src/lib/bits/dialog/components/Dialog.svelte
@@ -9,7 +9,6 @@
 	export let closeOnEscape: $$Props["closeOnEscape"] = undefined;
 	export let closeOnOutsideClick: $$Props["closeOnOutsideClick"] = undefined;
 	export let portal: $$Props["portal"] = undefined;
-	export let forceVisible: $$Props["forceVisible"] = true;
 	export let open: $$Props["open"] = undefined;
 	export let onOpenChange: $$Props["onOpenChange"] = undefined;
 	export let openFocus: $$Props["openFocus"] = undefined;
@@ -24,7 +23,7 @@
 		preventScroll,
 		closeOnOutsideClick,
 		portal,
-		forceVisible,
+		forceVisible: true,
 		defaultOpen: open,
 		openFocus,
 		closeFocus,
@@ -52,7 +51,6 @@
 	$: updateOption("closeOnEscape", closeOnEscape);
 	$: updateOption("closeOnOutsideClick", closeOnOutsideClick);
 	$: updateOption("portal", portal);
-	$: updateOption("forceVisible", forceVisible);
 	$: updateOption("openFocus", openFocus);
 	$: updateOption("closeFocus", closeFocus);
 </script>
diff --git a/src/lib/bits/dropdown-menu/components/DropdownMenu.svelte b/src/lib/bits/dropdown-menu/components/DropdownMenu.svelte
index 085e9defb..7b7e5884f 100644
--- a/src/lib/bits/dropdown-menu/components/DropdownMenu.svelte
+++ b/src/lib/bits/dropdown-menu/components/DropdownMenu.svelte
@@ -7,7 +7,6 @@
 	export let closeOnOutsideClick: $$Props["closeOnOutsideClick"] = undefined;
 	export let closeOnEscape: $$Props["closeOnEscape"] = undefined;
 	export let portal: $$Props["portal"] = undefined;
-	export let forceVisible: $$Props["forceVisible"] = undefined;
 	export let open: $$Props["open"] = undefined;
 	export let onOpenChange: $$Props["onOpenChange"] = undefined;
 	export let preventScroll: $$Props["preventScroll"] = undefined;
@@ -26,7 +25,7 @@
 		closeOnOutsideClick,
 		closeOnEscape,
 		portal,
-		forceVisible,
+		forceVisible: true,
 		defaultOpen: open,
 		preventScroll,
 		positioning,
@@ -54,7 +53,6 @@
 	$: updateOption("closeOnOutsideClick", closeOnOutsideClick);
 	$: updateOption("closeOnEscape", closeOnEscape);
 	$: updateOption("portal", portal);
-	$: updateOption("forceVisible", forceVisible);
 	$: updateOption("preventScroll", preventScroll);
 	$: updateOption("positioning", positioning);
 	$: updateOption("loop", loop);
diff --git a/src/lib/bits/link-preview/_types.ts b/src/lib/bits/link-preview/_types.ts
index 53533e81f..8607fdb4c 100644
--- a/src/lib/bits/link-preview/_types.ts
+++ b/src/lib/bits/link-preview/_types.ts
@@ -5,7 +5,7 @@
  */
 
 import type { Expand, OnChangeFn, AsChild, OmitFloating } from "$lib/internal/index.js";
-import type { FloatingArrowProps, FloatingContentProps } from "$lib/shared/index.js";
+import type { ArrowProps, ContentProps } from "$lib/bits/floating/_types.js";
 import type { CreateLinkPreviewProps } from "@melt-ui/svelte";
 
 type Props = Expand<
@@ -27,9 +27,4 @@ type Props = Expand<
 
 type TriggerProps = AsChild;
 
-export type {
-	Props,
-	FloatingArrowProps as ArrowProps,
-	FloatingContentProps as ContentProps,
-	TriggerProps
-};
+export type { Props, ArrowProps, ContentProps, TriggerProps };
diff --git a/src/lib/bits/menu/types.ts b/src/lib/bits/menu/types.ts
index cbb1eb31f..f99d6435f 100644
--- a/src/lib/bits/menu/types.ts
+++ b/src/lib/bits/menu/types.ts
@@ -53,7 +53,7 @@ type SubTriggerProps = I.SubTriggerProps & HTMLDivAttributes;
 // Trigger for context menu
 type ContextTriggerProps = I.TriggerProps & HTMLDivAttributes;
 
-// Trigger dropdown and menubar menus
+// Trigger for dropdown menu & menubar menu
 type DropdownTriggerProps = I.TriggerProps & HTMLButtonAttributes;
 
 type ArrowProps = I.ArrowProps & HTMLDivAttributes;
@@ -80,12 +80,19 @@ type ContextTriggerEvents<T extends Element = HTMLDivElement> = {
 	contextmenu: CustomEventHandler<Event, T>;
 };
 
-// Trigger events used by the dropdown and menubar menus
+// Trigger events used by the dropdown
 type DropdownTriggerEvents<T extends Element = HTMLButtonElement> = {
 	click: CustomEventHandler<MouseEvent, T>;
 	keydown: CustomEventHandler<KeyboardEvent, T>;
 };
 
+// Trigger events used by the menubar
+type MenubarTriggerEvents<T extends Element = HTMLButtonElement> = {
+	click: CustomEventHandler<MouseEvent, T>;
+	keydown: CustomEventHandler<KeyboardEvent, T>;
+	pointerenter: CustomEventHandler<PointerEvent, T>;
+};
+
 type SubContentEvents<T extends Element = HTMLDivElement> = {
 	keydown: CustomEventHandler<KeyboardEvent, T>;
 	focusout: CustomEventHandler<FocusEvent, T>;
@@ -113,6 +120,7 @@ export type {
 	SubTriggerProps,
 	ContextTriggerProps,
 	DropdownTriggerProps,
+	DropdownTriggerProps as MenubarTriggerProps,
 	//
 	ContentEvents,
 	CheckboxItemEvents,
@@ -121,5 +129,6 @@ export type {
 	SubTriggerEvents,
 	ContextTriggerEvents,
 	DropdownTriggerEvents,
+	MenubarTriggerEvents,
 	SubContentEvents
 };
diff --git a/src/lib/bits/menubar/types.ts b/src/lib/bits/menubar/types.ts
index 909ed7d9d..ab2ce998a 100644
--- a/src/lib/bits/menubar/types.ts
+++ b/src/lib/bits/menubar/types.ts
@@ -7,7 +7,7 @@ import type {
 	ArrowProps,
 	GroupProps,
 	LabelProps,
-	DropdownTriggerProps as TriggerProps,
+	MenubarTriggerProps as TriggerProps,
 	ContentProps,
 	RadioItemProps,
 	SeparatorProps,
@@ -17,7 +17,7 @@ import type {
 	CheckboxItemProps,
 	CheckboxItemIndicatorProps,
 	//
-	DropdownTriggerEvents as TriggerEvents,
+	MenubarTriggerEvents as TriggerEvents,
 	ItemEvents,
 	SubTriggerEvents,
 	CheckboxItemEvents,
diff --git a/src/lib/bits/tooltip/_types.ts b/src/lib/bits/tooltip/_types.ts
index 233987230..b08f36d9a 100644
--- a/src/lib/bits/tooltip/_types.ts
+++ b/src/lib/bits/tooltip/_types.ts
@@ -12,7 +12,7 @@ import type {
 	AsChild,
 	TransitionProps
 } from "$lib/internal/index.js";
-import type { FloatingArrowProps } from "$lib/shared/index.js";
+import type { ArrowProps } from "$lib/bits/floating/_types.js";
 
 type Props = Expand<OmitFloating<CreateTooltipProps>> & {
 	/**
@@ -56,4 +56,4 @@ type ContentProps<
 
 type TriggerProps = AsChild;
 
-export type { Props, FloatingArrowProps as ArrowProps, TriggerProps, ContentProps };
+export type { Props, ArrowProps, TriggerProps, ContentProps };
diff --git a/src/routes/docs/components/[name]/+page.ts b/src/routes/docs/components/[name]/+page.ts
index 32f4c3e55..b2a07c8a7 100644
--- a/src/routes/docs/components/[name]/+page.ts
+++ b/src/routes/docs/components/[name]/+page.ts
@@ -3,7 +3,6 @@ import { getComponentDoc } from "@/utils/docs";
 
 export const load: PageLoad = async (event) => {
 	const { component, title, metadata, schemas } = await getComponentDoc(event.params.name);
-
 	return {
 		component,
 		title,

From aa1df40a378d82623194d1ac1b9d361d3918fcc2 Mon Sep 17 00:00:00 2001
From: Hunter Johnston <johnstonhuntera@gmail.com>
Date: Thu, 16 Nov 2023 18:07:13 -0500
Subject: [PATCH 027/217] remove console log

---
 src/components/api-ref/props-table.svelte | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/components/api-ref/props-table.svelte b/src/components/api-ref/props-table.svelte
index 16ae4de51..0ecad224b 100644
--- a/src/components/api-ref/props-table.svelte
+++ b/src/components/api-ref/props-table.svelte
@@ -11,8 +11,6 @@
 		const { type, description, default: defaultVal } = prop as PropSchema;
 		return { name, type, description, default: defaultVal };
 	});
-
-	$: console.log(propData);
 </script>
 
 <Table.Root>

From 69f14702829b80fcecaf709e3161c1c7ec83dbea Mon Sep 17 00:00:00 2001
From: Hunter Johnston <johnstonhuntera@gmail.com>
Date: Thu, 16 Nov 2023 18:35:45 -0500
Subject: [PATCH 028/217] theme toggle

---
 src/components/component-preview.svelte | 55 +++++++++++++++++++++----
 src/components/markdown/pre.svelte      |  5 ++-
 src/components/ui/button/index.ts       |  2 +-
 src/styles/app.postcss                  |  1 +
 tailwind.config.ts                      |  4 ++
 5 files changed, 57 insertions(+), 10 deletions(-)

diff --git a/src/components/component-preview.svelte b/src/components/component-preview.svelte
index 37307fa5f..1435df5db 100644
--- a/src/components/component-preview.svelte
+++ b/src/components/component-preview.svelte
@@ -2,9 +2,16 @@
 	import { Tabs } from "$lib";
 	import { cn } from "@/utils";
 	import { buttonVariants } from "./ui/button";
+	import { crossfade } from "svelte/transition";
+	import { cubicInOut } from "svelte/easing";
 	let className: string;
 	export let align: "center" | "start" | "end" = "center";
 	export { className as class };
+
+	const [send, receive] = crossfade({
+		duration: 250,
+		easing: cubicInOut
+	});
 </script>
 
 <div
@@ -13,27 +20,47 @@
 	data-preview
 >
 	<Tabs.Root class="relative mr-auto w-full" let:value>
-		<Tabs.List class="absolute z-20 top-5 right-4 flex items-center">
+		<Tabs.List
+			class="absolute z-20 top-2.5 right-2.5 flex items-center bg-black/8 dark:bg-white/8 px-[5px] h-input-sm rounded-card-sm justify-center shadow-mini-inset"
+		>
 			<Tabs.Trigger
 				value="preview"
 				class={cn(
 					buttonVariants(),
 					value === "preview"
-						? "bg-background font-semibold shadow-mini hover:bg-opacity-90"
-						: "bg-transparent shadow-none hover:bg-background"
+						? "bg-transparent font-semibold shadow-mini hover:bg-opacity-90"
+						: "bg-transparent shadow-none hover:text-foreground-alt transition-all",
+					"relative"
 				)}
 			>
-				Preview
+				<span class="z-20"> Preview </span>
+				{#if value === "preview"}
+					<div
+						class="h-8 w-full bg-background absolute top-0 left-0 rounded-[7px]"
+						in:send={{ key: "active" }}
+						out:receive={{ key: "active" }}
+					/>
+				{/if}
 			</Tabs.Trigger>
 			<Tabs.Trigger
 				value="code"
 				class={cn(
 					buttonVariants(),
 					value === "code"
-						? "bg-background font-semibold shadow-mini hover:bg-opacity-90"
-						: "bg-transparent shadow-none hover:bg-background hover:shadow-mini"
-				)}>&lt;Code&gt;</Tabs.Trigger
+						? "bg-transparent font-semibold shadow-mini hover:bg-opacity-90"
+						: "bg-transparent shadow-none hover:text-foreground-alt transition-all",
+					"relative"
+				)}
 			>
+				<span class="z-20"> &lt;Code&gt; </span>
+				{#if value === "code"}
+					<div
+						class="h-8 w-full bg-background absolute top-0 left-0 rounded-[7px]"
+						in:send={{ key: "active" }}
+						out:receive={{ key: "active" }}
+					/>
+				{/if}
+			</Tabs.Trigger>
 		</Tabs.List>
 		<Tabs.Content value="code">
 			<div
@@ -42,7 +69,7 @@
 				<slot />
 			</div>
 		</Tabs.Content>
-		<Tabs.Content value="preview" class="relative bg-muted rounded-card">
+		<Tabs.Content value="preview" class="relative border-2 border-muted rounded-card">
 			<div
 				class={cn(
 					"preview flex min-h-[443px] w-full justify-center p-12",
@@ -59,3 +86,15 @@
 		</Tabs.Content>
 	</Tabs.Root>
 </div>
+
+<style lang="postcss">
+	.activeTheme {
+		background: var(--grayA5);
+		border-radius: 9999px;
+		height: 32px;
+		width: 100%;
+		top: 0;
+		position: absolute;
+		left: 0;
+	}
+</style>
diff --git a/src/components/markdown/pre.svelte b/src/components/markdown/pre.svelte
index a70f87ab8..6dcb5ceed 100644
--- a/src/components/markdown/pre.svelte
+++ b/src/components/markdown/pre.svelte
@@ -9,7 +9,10 @@
 </script>
 
 <pre
-	class={cn("mb-4 mt-6 overflow-x-auto rounded-card bg-muted py-4 ", className)}
+	class={cn(
+		"mb-4 mt-6 overflow-x-auto rounded-card bg-background border-muted border-2 py-4 ",
+		className
+	)}
 	use:setCodeString
 	{...$$restProps}>
 	<slot />
diff --git a/src/components/ui/button/index.ts b/src/components/ui/button/index.ts
index 5338bc0b6..bcc5b6c85 100644
--- a/src/components/ui/button/index.ts
+++ b/src/components/ui/button/index.ts
@@ -2,7 +2,7 @@ import { tv, type VariantProps } from "tailwind-variants";
 import Root from "./button.svelte";
 
 export const buttonVariants = tv({
-	base: "inline-flex items-center justify-center text-sm font-medium transition-colors focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50",
+	base: "inline-flex items-center justify-center text-sm font-medium transition-colors focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50 shadow-mini",
 	variants: {
 		variant: {
 			default: "bg-muted text-foreground",
diff --git a/src/styles/app.postcss b/src/styles/app.postcss
index 957d4ac24..55afad22a 100644
--- a/src/styles/app.postcss
+++ b/src/styles/app.postcss
@@ -21,6 +21,7 @@
 
 		/* Shadows */
 		--shadow-mini: 0px 1px 0px 1px rgba(0, 0, 0, 0.04);
+		--shadow-mini-inset: 0px 1px 0px 0px rgba(0, 0, 0, 0.04) inset;
 		--shadow-popover: 0px 7px 12px 3px hsla(var(--dark-10));
 	}
 
diff --git a/tailwind.config.ts b/tailwind.config.ts
index d2f4f919c..fefa7f6e5 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -57,7 +57,11 @@ export default {
 			},
 			boxShadow: {
 				mini: "var(--shadow-mini)",
+				"mini-inset": "var(--shadow-mini-inset)",
 				popover: "var(--shadow-popover)"
+			},
+			opacity: {
+				8: "0.08"
 			}
 		}
 	},

From 56d90441b723a72fb3041ae29dc81ae7b6951c1f Mon Sep 17 00:00:00 2001
From: Hunter Johnston <johnstonhuntera@gmail.com>
Date: Thu, 16 Nov 2023 18:41:18 -0500
Subject: [PATCH 029/217] scrollbars

---
 src/styles/app.postcss | 29 ++++++++++-------------------
 1 file changed, 10 insertions(+), 19 deletions(-)

diff --git a/src/styles/app.postcss b/src/styles/app.postcss
index 55afad22a..a56cabcaf 100644
--- a/src/styles/app.postcss
+++ b/src/styles/app.postcss
@@ -64,37 +64,28 @@
 
 	/* === Scrollbars === */
 
-	/* ::-webkit-scrollbar {
+	::-webkit-scrollbar {
 		@apply w-2;
 		@apply h-2;
 	}
 
 	::-webkit-scrollbar-track {
-		@apply !bg-muted;
+		@apply !bg-transparent;
 	}
 	::-webkit-scrollbar-thumb {
-		@apply rounded-sm !bg-muted-foreground;
-	} */
-
-	/* Firefox */
-	/* https://developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-color#browser_compatibility */
-
-	/* html {
-		scrollbar-color: hsl(215.4 16.3% 46.9% / 0.3);
+		@apply rounded-card-lg !bg-dark-10;
 	}
 
-	html.dark {
-		scrollbar-color: hsl(215.4 16.3% 56.9% / 0.3);
+	::-webkit-scrollbar-corner {
+		background: rgba(0, 0, 0, 0);
 	}
 
-	.hide-scrollbar::-webkit-scrollbar {
-		display: none;
-	}
+	/* Firefox */
+	/* https://developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-color#browser_compatibility */
 
-	.hide-scrollbar {
-		-ms-overflow-style: none;
-		scrollbar-width: none;
-	} */
+	html {
+		scrollbar-color: var(--bg-muted);
+	}
 
 	.antialised {
 		-webkit-font-smoothing: antialiased;

From 2ec96341656b547255880a77cd6c240b64309f32 Mon Sep 17 00:00:00 2001
From: Hunter Johnston <johnstonhuntera@gmail.com>
Date: Thu, 16 Nov 2023 19:10:15 -0500
Subject: [PATCH 030/217] avatar

---
 src/components/demos/avatar-demo.svelte |   8 +++++---
 src/components/demos/button-demo.svelte |  10 ++++++++--
 src/components/ui/button/index.ts       |   4 ++--
 src/styles/app.postcss                  |  13 ++++++++++++-
 src/styles/markdown.postcss             |   1 +
 static/avatar-1.png                     | Bin 0 -> 3954 bytes
 6 files changed, 28 insertions(+), 8 deletions(-)
 create mode 100644 static/avatar-1.png

diff --git a/src/components/demos/avatar-demo.svelte b/src/components/demos/avatar-demo.svelte
index 8950c355b..936f6f310 100644
--- a/src/components/demos/avatar-demo.svelte
+++ b/src/components/demos/avatar-demo.svelte
@@ -1,8 +1,10 @@
 <script lang="ts">
-	import * as Avatar from "@/components/ui/avatar";
+	import { Avatar } from "$lib";
 </script>
 
-<Avatar.Root>
-	<Avatar.Image src="https://github.com/huntabyte.png" alt="@huntabyte" />
+<Avatar.Root
+	class="h-12 w-12 rounded-full bg-muted uppercase text-[17px] font-medium text-muted-foreground flex items-center justify-center"
+>
+	<Avatar.Image src="/avatar-1.png" alt="@huntabyte" />
 	<Avatar.Fallback>HB</Avatar.Fallback>
 </Avatar.Root>
diff --git a/src/components/demos/button-demo.svelte b/src/components/demos/button-demo.svelte
index b7db79cfd..7592a343d 100644
--- a/src/components/demos/button-demo.svelte
+++ b/src/components/demos/button-demo.svelte
@@ -1,5 +1,11 @@
 <script lang="ts">
-	import * as Button from "@/components/ui/button";
+	import { Button } from "$lib";
 </script>
 
-<Button.Root>Get started</Button.Root>
+<Button.Root
+	class="rounded-input h-12 text-[15px] font-semibold px-[21px] inline-flex
+	items-center justify-center bg-dark text-background hover:button-gradient
+	shadow-mini transition-all"
+>
+	Unlimited
+</Button.Root>
diff --git a/src/components/ui/button/index.ts b/src/components/ui/button/index.ts
index bcc5b6c85..8d04848de 100644
--- a/src/components/ui/button/index.ts
+++ b/src/components/ui/button/index.ts
@@ -2,10 +2,10 @@ import { tv, type VariantProps } from "tailwind-variants";
 import Root from "./button.svelte";
 
 export const buttonVariants = tv({
-	base: "inline-flex items-center justify-center text-sm font-medium transition-colors focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50 shadow-mini",
+	base: "inline-flex items-center justify-center text-sm font-medium transition-colors focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50 ",
 	variants: {
 		variant: {
-			default: "bg-muted text-foreground",
+			default: "bg-muted text-foreground shadow-mini",
 			destructive: "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
 			outline:
 				"border border-input bg-transparent shadow-sm hover:bg-accent hover:text-accent-foreground",
diff --git a/src/styles/app.postcss b/src/styles/app.postcss
index a56cabcaf..159c35eb4 100644
--- a/src/styles/app.postcss
+++ b/src/styles/app.postcss
@@ -35,7 +35,7 @@
 		--border: 0 0% 96%;
 		--border-input: 0 0% 96% / 0.17;
 		--border-card: 0 0% 96% / 0.1;
-		--dark: 0 0% 9%;
+		--dark: 0 0% 96%;
 		--dark-10: 0 0% 96% / 0.1;
 		--accent: 204 80% 16%;
 
@@ -104,3 +104,14 @@
 		content: counter(step);
 	}
 }
+
+@layer components {
+	.button-gradient {
+		background: linear-gradient(0deg, #000 0%, #000 100%), hsla(var(--dark));
+	}
+	.dark {
+		& .button-gradient {
+			background: linear-gradient(0deg, #fff 0%, #fff 100%), hsla(var(--dark));
+		}
+	}
+}
diff --git a/src/styles/markdown.postcss b/src/styles/markdown.postcss
index b15446ec3..a99ada132 100644
--- a/src/styles/markdown.postcss
+++ b/src/styles/markdown.postcss
@@ -8,6 +8,7 @@
 
 [data-theme="light"] {
 	display: flex;
+	flex-direction: column;
 }
 
 [data-theme="dark"] {
diff --git a/static/avatar-1.png b/static/avatar-1.png
new file mode 100644
index 0000000000000000000000000000000000000000..0ea238a09bc50f29f80a3694b1b6d61880ebd6f5
GIT binary patch
literal 3954
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
M07*qoM6N<$g1q>|$p8QV

literal 0
HcmV?d00001


From 87a307398800c8ce7ffa552058d73933277d27ac Mon Sep 17 00:00:00 2001
From: Hunter Johnston <johnstonhuntera@gmail.com>
Date: Thu, 16 Nov 2023 19:43:31 -0500
Subject: [PATCH 031/217] initial context menu

---
 src/components/demos/context-menu-demo.svelte | 119 +++++++++++-------
 src/styles/app.postcss                        |   3 +
 tailwind.config.ts                            |   3 +-
 3 files changed, 80 insertions(+), 45 deletions(-)

diff --git a/src/components/demos/context-menu-demo.svelte b/src/components/demos/context-menu-demo.svelte
index 7275473f0..385379dda 100644
--- a/src/components/demos/context-menu-demo.svelte
+++ b/src/components/demos/context-menu-demo.svelte
@@ -1,56 +1,87 @@
 <script lang="ts">
-	import * as ContextMenu from "@/components/ui/context-menu";
-
-	let showBookmarks = false;
-	let showFullURLs = true;
-
-	let value = "pedro";
+	import { ContextMenu } from "$lib";
+	import { flyAndScale } from "@/utils";
+	import { PencilSimpleLine, PlusCircle, CopySimple, Trash } from "phosphor-svelte";
 </script>
 
 <ContextMenu.Root>
 	<ContextMenu.Trigger
-		class="flex h-[150px] w-[300px] items-center justify-center rounded-md border border-dashed text-sm"
+		class="flex h-[150px] w-[300px] items-center justify-center rounded-card-sm text-sm font-medium bg-muted select-none"
 	>
-		Right click here
+		Right click me
 	</ContextMenu.Trigger>
-	<ContextMenu.Content class="w-64">
-		<ContextMenu.Item inset>
-			Back
-			<ContextMenu.Shortcut>⌘[</ContextMenu.Shortcut>
+	<ContextMenu.Content
+		class="max-w-[229px] w-full rounded-xl border border-muted shadow-popover p-1 bg-background outline-none"
+		transition={flyAndScale}
+	>
+		<ContextMenu.Item
+			class="data-[highlighted]:bg-muted text-sm font-medium flex items-center py-3 pl-3 pr-1.5 h-10 rounded-button select-none transition-all outline-none duration-75"
+		>
+			<div class="flex items-center">
+				<PencilSimpleLine class="mr-2 h-4 w-4 text-foreground-alt" />
+				Edit
+			</div>
+			<div class="ml-auto flex items-center gap-px">
+				<kbd
+					class="h-5 w-5 rounded-button border border-dark-10 shadow-kbd inline-flex items-center justify-center text-muted-foreground text-xs bg-background"
+				>
+					⌘
+				</kbd>
+				<kbd
+					class="h-5 w-5 rounded-button border border-dark-10 shadow-kbd inline-flex items-center justify-center text-muted-foreground text-[10px] bg-background"
+				>
+					E
+				</kbd>
+			</div>
+		</ContextMenu.Item>
+		<ContextMenu.Item
+			class="data-[highlighted]:bg-muted text-sm font-medium flex items-center py-3 pl-3 pr-1.5 h-10 rounded-button select-none transition-all outline-none duration-75"
+		>
+			<div class="flex items-center">
+				<PlusCircle class="mr-2 h-4 w-4 text-foreground-alt" />
+				Add
+			</div>
+			<div class="ml-auto flex items-center gap-px">
+				<kbd
+					class="h-5 w-5 rounded-button border border-dark-10 shadow-kbd inline-flex items-center justify-center text-muted-foreground text-xs bg-background"
+				>
+					⌘
+				</kbd>
+				<kbd
+					class="h-5 w-5 rounded-button border border-dark-10 shadow-kbd inline-flex items-center justify-center text-muted-foreground text-[10px] bg-background"
+				>
+					N
+				</kbd>
+			</div>
 		</ContextMenu.Item>
-		<ContextMenu.Item inset>
-			Forward
-			<ContextMenu.Shortcut>⌘]</ContextMenu.Shortcut>
+		<ContextMenu.Item
+			class="data-[highlighted]:bg-muted text-sm font-medium flex items-center py-3 pl-3 pr-1.5 h-10 rounded-button select-none transition-all outline-none duration-75"
+		>
+			<div class="flex items-center">
+				<CopySimple class="mr-2 h-4 w-4 text-foreground-alt" />
+				Duplicate
+			</div>
+			<div class="ml-auto flex items-center gap-px">
+				<kbd
+					class="h-5 w-5 rounded-button border border-dark-10 shadow-kbd inline-flex items-center justify-center text-muted-foreground text-xs bg-background"
+				>
+					⌘
+				</kbd>
+				<kbd
+					class="h-5 w-5 rounded-button border border-dark-10 shadow-kbd inline-flex items-center justify-center text-muted-foreground text-[10px] bg-background"
+				>
+					D
+				</kbd>
+			</div>
 		</ContextMenu.Item>
-		<ContextMenu.Item inset>
-			Reload
-			<ContextMenu.Shortcut>⌘R</ContextMenu.Shortcut>
+		<ContextMenu.Separator class="w-full bg-muted h-px my-1" />
+		<ContextMenu.Item
+			class="data-[highlighted]:bg-muted text-sm font-medium flex items-center py-3 pl-3 pr-1.5 h-10 rounded-button select-none transition-all outline-none duration-75"
+		>
+			<div class="flex items-center">
+				<Trash class="mr-2 h-4 w-4 text-foreground-alt" />
+				Delete
+			</div>
 		</ContextMenu.Item>
-		<ContextMenu.Sub>
-			<ContextMenu.SubTrigger inset>More Tools</ContextMenu.SubTrigger>
-			<ContextMenu.SubContent class="w-48">
-				<ContextMenu.Item>
-					Save Page As...
-					<ContextMenu.Shortcut>⇧⌘S</ContextMenu.Shortcut>
-				</ContextMenu.Item>
-				<ContextMenu.Item>Create Shortcut...</ContextMenu.Item>
-				<ContextMenu.Item>Name Window...</ContextMenu.Item>
-				<ContextMenu.Separator />
-				<ContextMenu.Item>Developer Tools</ContextMenu.Item>
-			</ContextMenu.SubContent>
-		</ContextMenu.Sub>
-		<ContextMenu.Separator />
-		<ContextMenu.CheckboxItem bind:checked={showBookmarks}>
-			Show Bookmarks Bar
-			<ContextMenu.Shortcut>⌘⇧B</ContextMenu.Shortcut>
-		</ContextMenu.CheckboxItem>
-		<ContextMenu.CheckboxItem bind:checked={showFullURLs}>Show Full URLs</ContextMenu.CheckboxItem>
-		<ContextMenu.Separator />
-		<ContextMenu.RadioGroup bind:value>
-			<ContextMenu.Label inset>People</ContextMenu.Label>
-			<ContextMenu.Separator />
-			<ContextMenu.RadioItem value="pedro">Pedro Duarte</ContextMenu.RadioItem>
-			<ContextMenu.RadioItem value="colm">Colm Tuite</ContextMenu.RadioItem>
-		</ContextMenu.RadioGroup>
 	</ContextMenu.Content>
 </ContextMenu.Root>
diff --git a/src/styles/app.postcss b/src/styles/app.postcss
index 159c35eb4..1bca00918 100644
--- a/src/styles/app.postcss
+++ b/src/styles/app.postcss
@@ -23,6 +23,7 @@
 		--shadow-mini: 0px 1px 0px 1px rgba(0, 0, 0, 0.04);
 		--shadow-mini-inset: 0px 1px 0px 0px rgba(0, 0, 0, 0.04) inset;
 		--shadow-popover: 0px 7px 12px 3px hsla(var(--dark-10));
+		--shadow-kbd: 0px 2px 0px 0px rgba(0, 0, 0, 0.07);
 	}
 
 	.dark {
@@ -39,7 +40,9 @@
 		--dark-10: 0 0% 96% / 0.1;
 		--accent: 204 80% 16%;
 
+		/* Shadows */
 		--shadow-popover: 0px 7px 12px 3px rbga(0, 0, 0, 0.2);
+		--shadow-kbd: 0px 2px 0px 0px rgba(255, 255, 255, 0.07);
 	}
 }
 
diff --git a/tailwind.config.ts b/tailwind.config.ts
index fefa7f6e5..019fdf12a 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -58,7 +58,8 @@ export default {
 			boxShadow: {
 				mini: "var(--shadow-mini)",
 				"mini-inset": "var(--shadow-mini-inset)",
-				popover: "var(--shadow-popover)"
+				popover: "var(--shadow-popover)",
+				kbd: "var(--shadow-kbd)"
 			},
 			opacity: {
 				8: "0.08"

From 77a3548db1596f1e02374ad8d2a04cc8145a8632 Mon Sep 17 00:00:00 2001
From: Hunter Johnston <johnstonhuntera@gmail.com>
Date: Thu, 16 Nov 2023 20:05:06 -0500
Subject: [PATCH 032/217] submenu

---
 src/components/demos/context-menu-demo.svelte | 72 +++++++++++++------
 1 file changed, 52 insertions(+), 20 deletions(-)

diff --git a/src/components/demos/context-menu-demo.svelte b/src/components/demos/context-menu-demo.svelte
index 385379dda..94ac12008 100644
--- a/src/components/demos/context-menu-demo.svelte
+++ b/src/components/demos/context-menu-demo.svelte
@@ -11,7 +11,7 @@
 		Right click me
 	</ContextMenu.Trigger>
 	<ContextMenu.Content
-		class="max-w-[229px] w-full rounded-xl border border-muted shadow-popover p-1 bg-background outline-none"
+		class="max-w-[229px] w-full rounded-xl border border-muted shadow-popover px-1 py-1.5 bg-background outline-none"
 		transition={flyAndScale}
 	>
 		<ContextMenu.Item
@@ -34,26 +34,58 @@
 				</kbd>
 			</div>
 		</ContextMenu.Item>
-		<ContextMenu.Item
-			class="data-[highlighted]:bg-muted text-sm font-medium flex items-center py-3 pl-3 pr-1.5 h-10 rounded-button select-none transition-all outline-none duration-75"
-		>
-			<div class="flex items-center">
-				<PlusCircle class="mr-2 h-4 w-4 text-foreground-alt" />
-				Add
-			</div>
-			<div class="ml-auto flex items-center gap-px">
-				<kbd
-					class="h-5 w-5 rounded-button border border-dark-10 shadow-kbd inline-flex items-center justify-center text-muted-foreground text-xs bg-background"
+		<ContextMenu.Sub>
+			<ContextMenu.SubTrigger
+				class="data-[highlighted]:bg-muted text-sm font-medium flex items-center py-3 pl-3 pr-1.5 h-10 rounded-button select-none transition-all outline-none duration-75"
+			>
+				<div class="flex items-center">
+					<PlusCircle class="mr-2 h-4 w-4 text-foreground-alt" />
+					Add
+				</div>
+				<div class="ml-auto flex items-center gap-px">
+					<kbd
+						class="h-5 w-5 rounded-button border border-dark-10 shadow-kbd inline-flex items-center justify-center text-muted-foreground text-xs bg-background"
+					>
+						⌘
+					</kbd>
+					<kbd
+						class="h-5 w-5 rounded-button border border-dark-10 shadow-kbd inline-flex items-center justify-center text-muted-foreground text-[10px] bg-background"
+					>
+						N
+					</kbd>
+				</div>
+			</ContextMenu.SubTrigger>
+			<ContextMenu.SubContent
+				class="max-w-[209px] w-full rounded-xl border border-muted shadow-popover px-1 py-1.5 bg-background outline-none"
+				transition={flyAndScale}
+			>
+				<ContextMenu.Item
+					class="data-[highlighted]:bg-muted text-sm font-normal flex items-center py-3 pl-3 pr-1.5 h-10 rounded-button select-none transition-all outline-none duration-75"
 				>
-					⌘
-				</kbd>
-				<kbd
-					class="h-5 w-5 rounded-button border border-dark-10 shadow-kbd inline-flex items-center justify-center text-muted-foreground text-[10px] bg-background"
+					Header
+				</ContextMenu.Item>
+				<ContextMenu.Item
+					class="data-[highlighted]:bg-muted text-sm font-normal flex items-center py-3 pl-3 pr-1.5 h-10 rounded-button select-none transition-all outline-none duration-75"
 				>
-					N
-				</kbd>
-			</div>
-		</ContextMenu.Item>
+					Paragraph
+				</ContextMenu.Item>
+				<ContextMenu.Item
+					class="data-[highlighted]:bg-muted text-sm font-normal flex items-center py-3 pl-3 pr-1.5 h-10 rounded-button select-none transition-all outline-none duration-75"
+				>
+					Codeblock
+				</ContextMenu.Item>
+				<ContextMenu.Item
+					class="data-[highlighted]:bg-muted text-sm font-normal flex items-center py-3 pl-3 pr-1.5 h-10 rounded-button select-none transition-all outline-none duration-75"
+				>
+					List
+				</ContextMenu.Item>
+				<ContextMenu.Item
+					class="data-[highlighted]:bg-muted text-sm font-normal flex items-center py-3 pl-3 pr-1.5 h-10 rounded-button select-none transition-all outline-none duration-75"
+				>
+					Task
+				</ContextMenu.Item>
+			</ContextMenu.SubContent>
+		</ContextMenu.Sub>
 		<ContextMenu.Item
 			class="data-[highlighted]:bg-muted text-sm font-medium flex items-center py-3 pl-3 pr-1.5 h-10 rounded-button select-none transition-all outline-none duration-75"
 		>
@@ -74,7 +106,7 @@
 				</kbd>
 			</div>
 		</ContextMenu.Item>
-		<ContextMenu.Separator class="w-full bg-muted h-px my-1" />
+		<ContextMenu.Separator class="w-full bg-muted h-px my-1 -mx-1" />
 		<ContextMenu.Item
 			class="data-[highlighted]:bg-muted text-sm font-medium flex items-center py-3 pl-3 pr-1.5 h-10 rounded-button select-none transition-all outline-none duration-75"
 		>

From d744a38185c2aedfd40dc7eeebe7323ca4b21a7e Mon Sep 17 00:00:00 2001
From: Hunter Johnston <johnstonhuntera@gmail.com>
Date: Thu, 16 Nov 2023 20:06:30 -0500
Subject: [PATCH 033/217] additional subtrigger styles

---
 src/components/demos/context-menu-demo.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/demos/context-menu-demo.svelte b/src/components/demos/context-menu-demo.svelte
index 94ac12008..c53d54400 100644
--- a/src/components/demos/context-menu-demo.svelte
+++ b/src/components/demos/context-menu-demo.svelte
@@ -36,7 +36,7 @@
 		</ContextMenu.Item>
 		<ContextMenu.Sub>
 			<ContextMenu.SubTrigger
-				class="data-[highlighted]:bg-muted text-sm font-medium flex items-center py-3 pl-3 pr-1.5 h-10 rounded-button select-none transition-all outline-none duration-75"
+				class="data-[highlighted]:bg-muted data-[state=open]:bg-muted text-sm font-medium flex items-center py-3 pl-3 pr-1.5 h-10 rounded-button select-none transition-all outline-none duration-75"
 			>
 				<div class="flex items-center">
 					<PlusCircle class="mr-2 h-4 w-4 text-foreground-alt" />

From 8e97f6438ae96dfcfea9f699accc05f5dfdc0c2c Mon Sep 17 00:00:00 2001
From: Hunter Johnston <johnstonhuntera@gmail.com>
Date: Thu, 16 Nov 2023 20:10:47 -0500
Subject: [PATCH 034/217] fix separator

---
 src/components/demos/context-menu-demo.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/demos/context-menu-demo.svelte b/src/components/demos/context-menu-demo.svelte
index c53d54400..30bb7bbc7 100644
--- a/src/components/demos/context-menu-demo.svelte
+++ b/src/components/demos/context-menu-demo.svelte
@@ -106,7 +106,7 @@
 				</kbd>
 			</div>
 		</ContextMenu.Item>
-		<ContextMenu.Separator class="w-full bg-muted h-px my-1 -mx-1" />
+		<ContextMenu.Separator class="block bg-muted h-px my-1 -mr-1 -ml-1" />
 		<ContextMenu.Item
 			class="data-[highlighted]:bg-muted text-sm font-medium flex items-center py-3 pl-3 pr-1.5 h-10 rounded-button select-none transition-all outline-none duration-75"
 		>

From 698aaa50ed2f86f25a0aa37128093357f546b2b2 Mon Sep 17 00:00:00 2001
From: Hunter Johnston <johnstonhuntera@gmail.com>
Date: Thu, 16 Nov 2023 20:12:48 -0500
Subject: [PATCH 035/217] trim accordion

---
 src/components/demos/accordion-demo.svelte | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/demos/accordion-demo.svelte b/src/components/demos/accordion-demo.svelte
index 2cf8ba6b0..e1e7adef5 100644
--- a/src/components/demos/accordion-demo.svelte
+++ b/src/components/demos/accordion-demo.svelte
@@ -7,17 +7,17 @@
 		{
 			title: "Feature Overview",
 			content:
-				"Our platform offers task management, team messaging, file sharing, progress tracking,and reporting for streamlined project management."
+				"Task management, messaging, file sharing, progress tracking, and reporting for your team."
 		},
 		{
 			title: "Advantages of our Platform",
 			content:
-				"Experience improved productivity, enhanced communication, and customizable project views for successful project execution."
+				"Experience improved productivity, enhanced communication, and customizable project views for project execution."
 		},
 		{
 			title: "Effective Implementation Strategies",
 			content:
-				"Define clear goals, provide comprehensive training, encourage adoption, and iterate based on feedback."
+				"Define clear goals, provide training, encourage adoption, and iterate based on feedback."
 		}
 	];
 </script>

From de67cfe87f11af080fe78e140d8dcccdb7541c68 Mon Sep 17 00:00:00 2001
From: Hunter Johnston <johnstonhuntera@gmail.com>
Date: Thu, 16 Nov 2023 20:42:55 -0500
Subject: [PATCH 036/217] wip dialog

---
 src/components/demos/alert-dialog-demo.svelte | 59 +++++++++++-----
 src/components/demos/dialog-demo.svelte       | 70 ++++++++++++-------
 src/styles/app.postcss                        |  1 +
 3 files changed, 90 insertions(+), 40 deletions(-)

diff --git a/src/components/demos/alert-dialog-demo.svelte b/src/components/demos/alert-dialog-demo.svelte
index b466b6e6d..9fd68170b 100644
--- a/src/components/demos/alert-dialog-demo.svelte
+++ b/src/components/demos/alert-dialog-demo.svelte
@@ -1,23 +1,50 @@
 <script lang="ts">
-	import * as AlertDialog from "@/components/ui/alert-dialog";
-	import { Button } from "@/components/ui/button";
+	import { AlertDialog } from "$lib";
+	import { Button } from "$lib";
+	import { flyAndScale } from "@/utils";
+	import { fade } from "svelte/transition";
 </script>
 
 <AlertDialog.Root>
 	<AlertDialog.Trigger asChild let:builder>
-		<Button builders={[builder]} variant="outline">Show Dialog</Button>
+		<Button.Root
+			builders={[builder]}
+			class="rounded-input h-12 text-[15px] font-semibold px-[21px] inline-flex
+		items-center justify-center bg-dark text-background hover:button-gradient
+		shadow-mini transition-all"
+		>
+			Subscribe
+		</Button.Root>
 	</AlertDialog.Trigger>
-	<AlertDialog.Content>
-		<AlertDialog.Header>
-			<AlertDialog.Title>Are you absolutely sure?</AlertDialog.Title>
-			<AlertDialog.Description>
-				This action cannot be undone. This will permanently delete your account and remove your data
-				from our servers.
-			</AlertDialog.Description>
-		</AlertDialog.Header>
-		<AlertDialog.Footer>
-			<AlertDialog.Cancel>Cancel</AlertDialog.Cancel>
-			<AlertDialog.Action>Continue</AlertDialog.Action>
-		</AlertDialog.Footer>
-	</AlertDialog.Content>
+	<AlertDialog.Portal>
+		<AlertDialog.Overlay
+			transition={fade}
+			transitionConfig={{ duration: 150 }}
+			class="fixed inset-0 z-50 bg-background/80 backdrop-blur-sm"
+		/>
+		<AlertDialog.Content
+			transition={flyAndScale}
+			class="fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-7 rounded-card-lg md:w-full outline-none shadow-popover"
+		>
+			<div class="flex flex-col gap-4 pb-6">
+				<AlertDialog.Title class="font-semibold text-lg tracking-tight"
+					>Confirm your transaction</AlertDialog.Title
+				>
+				<AlertDialog.Description class="text-foreground-alt text-sm">
+					This action cannot be undone. This will initiate a monthly wire in the amount of $10,000
+					to Huntabyte. Do you wish to continue?
+				</AlertDialog.Description>
+			</div>
+			<div class="flex w-full items-center justify-center gap-2">
+				<AlertDialog.Cancel
+					class="h-input rounded-input inline-flex items-center justify-center w-full shadow-mini bg-muted font-medium text-[15px]"
+					>Cancel</AlertDialog.Cancel
+				>
+				<AlertDialog.Action
+					class="h-input rounded-input bg-dark inline-flex items-center justify-center w-full shadow-mini text-background font-semibold text-[15px]"
+					>Continue</AlertDialog.Action
+				>
+			</div>
+		</AlertDialog.Content>
+	</AlertDialog.Portal>
 </AlertDialog.Root>
diff --git a/src/components/demos/dialog-demo.svelte b/src/components/demos/dialog-demo.svelte
index c715c654a..6ab0c07dd 100644
--- a/src/components/demos/dialog-demo.svelte
+++ b/src/components/demos/dialog-demo.svelte
@@ -1,31 +1,53 @@
 <script lang="ts">
-	import { Button, buttonVariants } from "@/components/ui/button";
-	import * as Dialog from "@/components/ui/dialog";
-	import * as Input from "@/components/ui/input";
-	import * as Label from "@/components/ui/label";
+	import { Dialog } from "$lib";
+	import { Separator } from "$lib";
+	import { Button } from "$lib";
+	import { flyAndScale } from "@/utils";
+	import { fade } from "svelte/transition";
+	import { X } from "phosphor-svelte";
 </script>
 
 <Dialog.Root>
-	<Dialog.Trigger class={buttonVariants({ variant: "outline" })}>Edit Profile</Dialog.Trigger>
-	<Dialog.Content class="sm:max-w-[425px]">
-		<Dialog.Header>
-			<Dialog.Title>Edit profile</Dialog.Title>
-			<Dialog.Description>
-				Make changes to your profile here. Click save when you're done.
+	<Dialog.Trigger asChild let:builder>
+		<Button.Root
+			builders={[builder]}
+			class="rounded-input h-12 text-[15px] font-semibold px-[21px] inline-flex
+		items-center justify-center bg-dark text-background hover:button-gradient
+		shadow-mini transition-all"
+		>
+			Subscribe
+		</Button.Root>
+	</Dialog.Trigger>
+	<Dialog.Portal>
+		<Dialog.Overlay
+			transition={fade}
+			transitionConfig={{ duration: 150 }}
+			class="fixed inset-0 z-50 bg-background/80 backdrop-blur-sm"
+		/>
+		<Dialog.Content
+			transition={flyAndScale}
+			class="fixed left-[50%] top-[50%] z-50 w-full max-w-lg translate-x-[-50%] translate-y-[-50%] border bg-background p-7 rounded-card-lg md:w-full outline-none shadow-popover"
+		>
+			<Dialog.Title
+				class="font-semibold text-lg tracking-tight flex w-full justify-center items-center"
+				>Create API key</Dialog.Title
+			>
+			<Separator.Root class="-mx-7 block bg-muted h-px my-5" />
+			<Dialog.Description class="text-foreground-alt text-sm">
+				Create and manage API keys. You can create multiple keys to organize your applications.
 			</Dialog.Description>
-		</Dialog.Header>
-		<div class="grid gap-4 py-4">
-			<div class="grid grid-cols-4 items-center gap-4">
-				<Label.Root class="text-right">Name</Label.Root>
-				<Input.Root id="name" value="Hunter Johnston" class="col-span-3" />
+			<div class="flex w-full items-center justify-center gap-2">
+				<Dialog.Close
+					class="h-input rounded-input inline-flex items-center justify-center w-full shadow-mini bg-muted font-medium text-[15px]"
+					>Cancel</Dialog.Close
+				>
 			</div>
-			<div class="grid grid-cols-4 items-center gap-4">
-				<Label.Root class="text-right">Username</Label.Root>
-				<Input.Root id="username" value="@huntabyte" class="col-span-3" />
-			</div>
-		</div>
-		<Dialog.Footer>
-			<Button type="submit">Save changes</Button>
-		</Dialog.Footer>
-	</Dialog.Content>
+			<Dialog.Close
+				class="absolute right-4 top-[19px] rounded-sm transition-opacity hover:opacity-100 disabled:pointer-events-none"
+			>
+				<X class="h-4 w-4 text-foreground" />
+				<span class="sr-only">Close</span>
+			</Dialog.Close>
+		</Dialog.Content>
+	</Dialog.Portal>
 </Dialog.Root>
diff --git a/src/styles/app.postcss b/src/styles/app.postcss
index 1bca00918..b71358906 100644
--- a/src/styles/app.postcss
+++ b/src/styles/app.postcss
@@ -112,6 +112,7 @@
 	.button-gradient {
 		background: linear-gradient(0deg, #000 0%, #000 100%), hsla(var(--dark));
 	}
+
 	.dark {
 		& .button-gradient {
 			background: linear-gradient(0deg, #fff 0%, #fff 100%), hsla(var(--dark));

From eb35d76e6f81a451c3a34f0b3cbb75f8c5968ce1 Mon Sep 17 00:00:00 2001
From: Hunter Johnston <johnstonhuntera@gmail.com>
Date: Thu, 16 Nov 2023 21:02:57 -0500
Subject: [PATCH 037/217] more dialog stuff

---
 src/components/demos/dialog-demo.svelte | 40 ++++++++++++++++---------
 1 file changed, 26 insertions(+), 14 deletions(-)

diff --git a/src/components/demos/dialog-demo.svelte b/src/components/demos/dialog-demo.svelte
index 6ab0c07dd..a27438058 100644
--- a/src/components/demos/dialog-demo.svelte
+++ b/src/components/demos/dialog-demo.svelte
@@ -1,10 +1,8 @@
 <script lang="ts">
-	import { Dialog } from "$lib";
-	import { Separator } from "$lib";
-	import { Button } from "$lib";
+	import { Dialog, Separator, Button, Label } from "$lib";
 	import { flyAndScale } from "@/utils";
 	import { fade } from "svelte/transition";
-	import { X } from "phosphor-svelte";
+	import { X, LockKeyOpen } from "phosphor-svelte";
 </script>
 
 <Dialog.Root>
@@ -26,27 +24,41 @@
 		/>
 		<Dialog.Content
 			transition={flyAndScale}
-			class="fixed left-[50%] top-[50%] z-50 w-full max-w-lg translate-x-[-50%] translate-y-[-50%] border bg-background p-7 rounded-card-lg md:w-full outline-none shadow-popover"
+			class="fixed left-[50%] top-[50%] z-50 w-full max-w-[490px] translate-x-[-50%] translate-y-[-50%] border bg-background p-5 rounded-card-lg md:w-full outline-none shadow-popover"
 		>
 			<Dialog.Title
 				class="font-semibold text-lg tracking-tight flex w-full justify-center items-center"
 				>Create API key</Dialog.Title
 			>
-			<Separator.Root class="-mx-7 block bg-muted h-px my-5" />
+			<Separator.Root class="-mx-5 block bg-muted h-px mt-5 mb-6" />
 			<Dialog.Description class="text-foreground-alt text-sm">
 				Create and manage API keys. You can create multiple keys to organize your applications.
 			</Dialog.Description>
-			<div class="flex w-full items-center justify-center gap-2">
+			<div class="flex flex-col items-start pt-7 gap-1 pb-11">
+				<Label.Root for="apiKey" class="text-sm font-medium">API Key</Label.Root>
+				<div class="relative w-full">
+					<input
+						id="apiKey"
+						class="h-input rounded-card-sm border border-dark-10 bg-background w-full focus:outline-none focus:ring-2 ring-muted px-4 inline-flex items-center placeholder:text-foreground-alt/50 text-sm"
+						placeholder="secret_api_key"
+						type="password"
+						autocomplete="off"
+					/>
+					<LockKeyOpen class="absolute right-4 top-4 text-dark/30" />
+				</div>
+			</div>
+			<div class="flex w-full justify-end">
 				<Dialog.Close
-					class="h-input rounded-input inline-flex items-center justify-center w-full shadow-mini bg-muted font-medium text-[15px]"
-					>Cancel</Dialog.Close
+					class="h-input rounded-input bg-dark inline-flex items-center justify-center shadow-mini text-background font-semibold text-[15px] px-[50px] hover:button-gradient"
 				>
+					Save
+				</Dialog.Close>
 			</div>
-			<Dialog.Close
-				class="absolute right-4 top-[19px] rounded-sm transition-opacity hover:opacity-100 disabled:pointer-events-none"
-			>
-				<X class="h-4 w-4 text-foreground" />
-				<span class="sr-only">Close</span>
+			<Dialog.Close class="absolute right-5 top-5">
+				<div>
+					<X class="h-5 w-5 text-foreground" />
+					<span class="sr-only">Close</span>
+				</div>
 			</Dialog.Close>
 		</Dialog.Content>
 	</Dialog.Portal>

From 12481577b447b135949b4d1b931e528cfdba028c Mon Sep 17 00:00:00 2001
From: Hunter Johnston <johnstonhuntera@gmail.com>
Date: Fri, 17 Nov 2023 11:00:50 -0500
Subject: [PATCH 038/217] updates

---
 src/components/api-ref/props-table.svelte     |   4 +-
 src/components/light-switch.svelte            |   4 +-
 src/components/navigation/sidebar-nav.svelte  |   4 +-
 .../page-header/page-header-heading.svelte    |   2 +-
 src/components/toc/table-of-contents.svelte   |   2 +-
 src/styles/themes/desertesque.json            | 781 ++++++++++++++++++
 6 files changed, 790 insertions(+), 7 deletions(-)
 create mode 100644 src/styles/themes/desertesque.json

diff --git a/src/components/api-ref/props-table.svelte b/src/components/api-ref/props-table.svelte
index 0ecad224b..250f97b8a 100644
--- a/src/components/api-ref/props-table.svelte
+++ b/src/components/api-ref/props-table.svelte
@@ -31,10 +31,10 @@
 					<PropTypeContent {type} />
 				</Table.Cell>
 				<Table.Cell class="align-baseline">
-					<p class="text-sm leading-6">
+					<p class="text-sm leading-[1.3rem]">
 						{@html parseMarkdown(description)}
 					</p>
-					<div class="mt-4">
+					<div class="mt-2">
 						<Code class="bg-background px-0 h-auto"
 							>Default:
 							{#if defaultVal}
diff --git a/src/components/light-switch.svelte b/src/components/light-switch.svelte
index 0ca6e66c6..f8c02a1df 100644
--- a/src/components/light-switch.svelte
+++ b/src/components/light-switch.svelte
@@ -14,8 +14,8 @@
 	size="icon"
 >
 	{#if $mode === "light"}
-		<MoonStars class="sq-[28px]" aria-label="Moon" />
+		<MoonStars class="sq-6" aria-label="Moon" />
 	{:else}
-		<Sun class="sq-[28px]" aria-label="Sun" />
+		<Sun class="sq-6" aria-label="Sun" />
 	{/if}
 </Button>
diff --git a/src/components/navigation/sidebar-nav.svelte b/src/components/navigation/sidebar-nav.svelte
index 8bd4a513a..afcb5a256 100644
--- a/src/components/navigation/sidebar-nav.svelte
+++ b/src/components/navigation/sidebar-nav.svelte
@@ -16,7 +16,9 @@
 							<SidebarNavMainItems items={item.items} />
 						{:else}
 							<div class="pb-4">
-								<h4 class="mb-1 rounded-md py-2 px-2.5 text-sm font-normal uppercase">
+								<h4
+									class="mb-1 rounded-md py-2 px-2.5 text-sm font-normal uppercase text-muted-foreground"
+								>
 									{item.title}
 								</h4>
 								{#if item.items}
diff --git a/src/components/page-header/page-header-heading.svelte b/src/components/page-header/page-header-heading.svelte
index 915c3c528..97999fef2 100644
--- a/src/components/page-header/page-header-heading.svelte
+++ b/src/components/page-header/page-header-heading.svelte
@@ -4,6 +4,6 @@
 	export { className as class };
 </script>
 
-<h1 class={cn("scroll-m-20 text-5xl font-semibold tracking-tight", className)}>
+<h1 class={cn("scroll-m-20 text-5xl font-semibold tracking-[-0.01em]", className)}>
 	<slot />
 </h1>
diff --git a/src/components/toc/table-of-contents.svelte b/src/components/toc/table-of-contents.svelte
index 55ff1a3ad..0db15f9a4 100644
--- a/src/components/toc/table-of-contents.svelte
+++ b/src/components/toc/table-of-contents.svelte
@@ -16,7 +16,7 @@
 	});
 </script>
 
-<div class="overflow-y-auto rounded-lg p-4">
+<div class="overflow-y-auto rounded-lg p-4 mt-1">
 	<nav>
 		{#key $headingsTree}
 			<Tree tree={$headingsTree} activeHeadingIdxs={$activeHeadingIdxs} {item} {isActive} />
diff --git a/src/styles/themes/desertesque.json b/src/styles/themes/desertesque.json
new file mode 100644
index 000000000..d1bba531b
--- /dev/null
+++ b/src/styles/themes/desertesque.json
@@ -0,0 +1,781 @@
+{
+	"$schema": "vscode://schemas/color-theme",
+	"type": "dark",
+	"colors": {
+		"editor.background": "#181717",
+		"editor.foreground": "#cccccc",
+		"editor.lineHighlightBackground": "#212020",
+		"editor.selectionBackground": "#f0e68c4f",
+		"editorCursor.foreground": "#ffff00",
+		"editorError.border": "#960000",
+		"editorWhitespace.foreground": "#ffffff40",
+		//"activityBar.background": "#333333",
+		//"activityBar.dropBackground": "#ffffff1f",
+		//"activityBar.foreground": "#ffffff",
+		//"activityBar.inactiveForeground": "#ffffff99",
+		//"activityBarBadge.background": "#007acc",
+		//"activityBarBadge.foreground": "#ffffff",
+		//"badge.background": "#4d4d4d",
+		//"badge.foreground": "#ffffff",
+		//"breadcrumb.activeSelectionForeground": "#e0e0e0",
+		//"breadcrumb.background": "#272727",
+		//"breadcrumb.focusForeground": "#e0e0e0",
+		//"breadcrumb.foreground": "#cccccccc",
+		//"breadcrumbPicker.background": "#252526",
+		//"button.background": "#0e639c",
+		//"button.foreground": "#ffffff",
+		//"button.hoverBackground": "#1177bb",
+		//"debugExceptionWidget.background": "#420b0d",
+		//"debugExceptionWidget.border": "#a31515",
+		//"debugToolBar.background": "#333333",
+		//"descriptionForeground": "#ccccccb3",
+		//"diffEditor.insertedTextBackground": "#9bb95533",
+		//"diffEditor.removedTextBackground": "#ff000033",
+		//"dropdown.background": "#3c3c3c",
+		//"dropdown.border": "#3c3c3c",
+		//"dropdown.foreground": "#f0f0f0",
+		//"editor.findMatchBackground": "#515c6a",
+		//"editor.findMatchHighlightBackground": "#ea5c0055",
+		//"editor.findRangeHighlightBackground": "#3a3d4166",
+		//"editor.hoverHighlightBackground": "#264f7840",
+		//"editor.inactiveSelectionBackground": "#f0e68c28",
+		//"editor.lineHighlightBorder": "#282828",
+		//"editor.rangeHighlightBackground": "#ffffff0b",
+		//"editor.selectionHighlightBackground": "#e3d12a2f",
+		//"editor.snippetFinalTabstopHighlightBorder": "#525252",
+		//"editor.snippetTabstopHighlightBackground": "#7c7c7c4d",
+		//"editor.wordHighlightBackground": "#575757b8",
+		//"editor.wordHighlightStrongBackground": "#004972b8",
+		//"editorActiveLineNumber.foreground": "#c6c6c6",
+		//"editorBracketMatch.background": "#0064001a",
+		//"editorBracketMatch.border": "#888888",
+		//"editorCodeLens.foreground": "#999999",
+		//"editorError.foreground": "#ea4646",
+		//"editorGroup.border": "#444444",
+		//"editorGroup.dropBackground": "#53595d80",
+		//"editorGroupHeader.noTabsBackground": "#272727",
+		//"editorGroupHeader.tabsBackground": "#252526",
+		//"editorGutter.addedBackground": "#587c0c",
+		//"editorGutter.background": "#272727",
+		//"editorGutter.commentRangeForeground": "#c5c5c5",
+		//"editorGutter.deletedBackground": "#94151b",
+		//"editorGutter.modifiedBackground": "#0c7d9d",
+		//"editorHint.foreground": "#eeeeeeb3",
+		//"editorHoverWidget.background": "#252526",
+		//"editorHoverWidget.border": "#454545",
+		//"editorIndentGuide.activeBackground": "#ffffff40",
+		//"editorIndentGuide.background": "#ffffff40",
+		//"editorInfo.foreground": "#008000",
+		//"editorLineNumber.activeForeground": "#c6c6c6",
+		"editorLineNumber.foreground": "#AAA127"
+		//"editorLink.activeForeground": "#4e94ce",
+		//"editorMarkerNavigation.background": "#2d2d30",
+		//"editorMarkerNavigationError.background": "#ea4646",
+		//"editorMarkerNavigationInfo.background": "#008000",
+		//"editorMarkerNavigationWarning.background": "#4d9e4d",
+		//"editorOverviewRuler.addedForeground": "#007acc99",
+		//"editorOverviewRuler.border": "#7f7f7f4d",
+		//"editorOverviewRuler.bracketMatchForeground": "#a0a0a0",
+		//"editorOverviewRuler.commonContentForeground": "#60606066",
+		//"editorOverviewRuler.currentContentForeground": "#40c8ae80",
+		//"editorOverviewRuler.deletedForeground": "#007acc99",
+		//"editorOverviewRuler.errorForeground": "#ff1212b3",
+		//"editorOverviewRuler.findMatchForeground": "#f6b94db3",
+		//"editorOverviewRuler.incomingContentForeground": "#40a6ff80",
+		//"editorOverviewRuler.infoForeground": "#121288b3",
+		//"editorOverviewRuler.modifiedForeground": "#007acc99",
+		//"editorOverviewRuler.rangeHighlightForeground": "#007acc99",
+		//"editorOverviewRuler.selectionHighlightForeground": "#a0a0a0cc",
+		//"editorOverviewRuler.warningForeground": "#128812b3",
+		//"editorOverviewRuler.wordHighlightForeground": "#a0a0a0cc",
+		//"editorOverviewRuler.wordHighlightStrongForeground": "#c0a0c0cc",
+		//"editorPane.background": "#272727",
+		//"editorRuler.foreground": "#5a5a5a",
+		//"editorSuggestWidget.background": "#252526",
+		//"editorSuggestWidget.border": "#454545",
+		//"editorSuggestWidget.foreground": "#cccccc",
+		//"editorSuggestWidget.highlightForeground": "#0097fb",
+		//"editorSuggestWidget.selectedBackground": "#062f4a",
+		//"editorUnnecessaryCode.opacity": "#000000aa",
+		//"editorWarning.foreground": "#4d9e4d",
+		//"editorWidget.background": "#252526",
+		//"editorWidget.border": "#454545",
+		//"errorForeground": "#f48771",
+		//"extensionButton.prominentBackground": "#327e36",
+		//"extensionButton.prominentForeground": "#ffffff",
+		//"extensionButton.prominentHoverBackground": "#28632b",
+		//"focusBorder": "#0e639ccc",
+		//"foreground": "#cccccc",
+		//"gitDecoration.addedResourceForeground": "#81b88b",
+		//"gitDecoration.conflictingResourceForeground": "#6c6cc4",
+		//"gitDecoration.deletedResourceForeground": "#c74e39",
+		//"gitDecoration.ignoredResourceForeground": "#8c8c8c",
+		//"gitDecoration.modifiedResourceForeground": "#e2c08d",
+		//"gitDecoration.submoduleResourceForeground": "#8db9e2",
+		//"gitDecoration.untrackedResourceForeground": "#73c991",
+		//"input.background": "#3c3c3c",
+		//"input.foreground": "#cccccc",
+		//"input.placeholderForeground": "#cccccc80",
+		//"inputOption.activeBorder": "#007acc",
+		//"inputValidation.errorBackground": "#5a1d1d",
+		//"inputValidation.errorBorder": "#be1100",
+		//"inputValidation.infoBackground": "#063b49",
+		//"inputValidation.infoBorder": "#007acc",
+		//"inputValidation.warningBackground": "#352a05",
+		//"inputValidation.warningBorder": "#b89500",
+		//"list.activeSelectionBackground": "#094771",
+		//"list.activeSelectionForeground": "#ffffff",
+		//"list.dropBackground": "#062f4a",
+		//"list.errorForeground": "#f88070",
+		//"list.focusBackground": "#062f4a",
+		//"list.highlightForeground": "#0097fb",
+		//"list.hoverBackground": "#2a2d2e",
+		//"list.inactiveFocusBackground": "#313135",
+		//"list.inactiveSelectionBackground": "#37373d",
+		//"list.invalidItemForeground": "#b89500",
+		//"list.warningForeground": "#4d9e4d",
+		//"menu.background": "#3c3c3c",
+		//"menu.foreground": "#f0f0f0",
+		//"menu.selectionBackground": "#094771",
+		//"menu.selectionForeground": "#ffffff",
+		//"menu.separatorBackground": "#bbbbbb",
+		//"menubar.selectionBackground": "#ffffff1a",
+		//"menubar.selectionForeground": "#cccccc",
+		//"merge.commonContentBackground": "#60606029",
+		//"merge.commonHeaderBackground": "#60606066",
+		//"merge.currentContentBackground": "#40c8ae33",
+		//"merge.currentHeaderBackground": "#40c8ae80",
+		//"merge.incomingContentBackground": "#40a6ff33",
+		//"merge.incomingHeaderBackground": "#40a6ff80",
+		//"notificationCenterHeader.background": "#303031",
+		//"notificationLink.foreground": "#3794ff",
+		//"notifications.background": "#252526",
+		//"notifications.border": "#303031",
+		//"panel.background": "#272727",
+		//"panel.border": "#80808059",
+		//"panel.dropBackground": "#ffffff1f",
+		//"panelTitle.activeBorder": "#80808059",
+		//"panelTitle.activeForeground": "#e7e7e7",
+		//"panelTitle.inactiveForeground": "#e7e7e799",
+		//"peekView.border": "#007acc",
+		//"peekViewEditor.background": "#001f33",
+		//"peekViewEditor.matchHighlightBackground": "#ff8f0099",
+		//"peekViewEditorGutter.background": "#001f33",
+		//"peekViewResult.background": "#252526",
+		//"peekViewResult.fileForeground": "#ffffff",
+		//"peekViewResult.lineForeground": "#bbbbbb",
+		//"peekViewResult.matchHighlightBackground": "#ea5c004d",
+		//"peekViewResult.selectionBackground": "#3399ff33",
+		//"peekViewResult.selectionForeground": "#ffffff",
+		//"peekViewTitle.background": "#1e1e1e",
+		//"peekViewTitleDescription.foreground": "#ccccccb3",
+		//"peekViewTitleLabel.foreground": "#ffffff",
+		//"pickerGroup.border": "#3f3f46",
+		//"pickerGroup.foreground": "#3794ff",
+		//"progressBar.background": "#0e70c0",
+		//"scrollbar.shadow": "#000000",
+		//"scrollbarSlider.activeBackground": "#bfbfbf66",
+		//"scrollbarSlider.background": "#79797966",
+		//"scrollbarSlider.hoverBackground": "#646464b3",
+		//"settings.checkboxBackground": "#3c3c3c",
+		//"settings.checkboxBorder": "#3c3c3c",
+		//"settings.checkboxForeground": "#f0f0f0",
+		//"settings.dropdownBackground": "#3c3c3c",
+		//"settings.dropdownBorder": "#3c3c3c",
+		//"settings.dropdownForeground": "#f0f0f0",
+		//"settings.dropdownListBorder": "#454545",
+		//"settings.headerForeground": "#e7e7e7",
+		//"settings.modifiedItemIndicator": "#0c7d9d",
+		//"settings.numberInputBackground": "#3c3c3c",
+		//"settings.numberInputForeground": "#cccccc",
+		//"settings.textInputBackground": "#3c3c3c",
+		//"settings.textInputForeground": "#cccccc",
+		//"sideBar.background": "#252526",
+		//"sideBar.dropBackground": "#ffffff1f",
+		//"sideBarSectionHeader.background": "#80808033",
+		//"statusBar.background": "#007acc",
+		//"statusBar.debuggingBackground": "#cc6633",
+		//"statusBar.debuggingForeground": "#ffffff",
+		//"statusBar.foreground": "#ffffff",
+		//"statusBar.noFolderBackground": "#68217a",
+		//"statusBar.noFolderForeground": "#ffffff",
+		//"statusBarItem.activeBackground": "#ffffff2e",
+		//"statusBarItem.hoverBackground": "#ffffff1f",
+		//"statusBarItem.prominentBackground": "#388a34",
+		//"statusBarItem.prominentHoverBackground": "#369432",
+		//"tab.activeBackground": "#272727",
+		//"tab.activeForeground": "#ffffff",
+		//"tab.border": "#252526",
+		//"tab.inactiveBackground": "#2d2d2d",
+		//"tab.inactiveForeground": "#ffffff80",
+		//"tab.unfocusedActiveForeground": "#ffffff80",
+		//"tab.unfocusedInactiveForeground": "#ffffff40",
+		//"terminal.ansiBlack": "#000000",
+		//"terminal.ansiBlue": "#2472c8",
+		//"terminal.ansiBrightBlack": "#666666",
+		//"terminal.ansiBrightBlue": "#3b8eea",
+		//"terminal.ansiBrightCyan": "#29b8db",
+		//"terminal.ansiBrightGreen": "#23d18b",
+		//"terminal.ansiBrightMagenta": "#d670d6",
+		//"terminal.ansiBrightRed": "#f14c4c",
+		//"terminal.ansiBrightWhite": "#e5e5e5",
+		//"terminal.ansiBrightYellow": "#f5f543",
+		//"terminal.ansiCyan": "#11a8cd",
+		//"terminal.ansiGreen": "#0dbc79",
+		//"terminal.ansiMagenta": "#bc3fbc",
+		//"terminal.ansiRed": "#cd3131",
+		//"terminal.ansiWhite": "#e5e5e5",
+		//"terminal.ansiYellow": "#e5e510",
+		//"terminal.background": "#272727",
+		//"terminal.border": "#80808059",
+		//"terminal.foreground": "#cccccc",
+		//"terminal.selectionBackground": "#ffffff40",
+		//"textBlockQuote.background": "#7f7f7f1a",
+		//"textBlockQuote.border": "#007acc80",
+		//"textCodeBlock.background": "#0a0a0a66",
+		//"textLink.activeForeground": "#3794ff",
+		//"textLink.foreground": "#3794ff",
+		//"textPreformat.foreground": "#d7ba7d",
+		//"textSeparator.foreground": "#ffffff2e",
+		//"titleBar.activeBackground": "#3c3c3c",
+		//"titleBar.activeForeground": "#cccccc",
+		//"titleBar.inactiveBackground": "#3c3c3c99",
+		//"titleBar.inactiveForeground": "#cccccc99",
+		//"widget.shadow": "#000000"
+	},
+	"tokenColors": [
+		{
+			"name": "Comment",
+			"scope": "comment",
+			"settings": {
+				"fontStyle": "italic",
+				"foreground": "#1ABFCF"
+			}
+		},
+		{
+			"name": "Constant",
+			"scope": "constant",
+			"settings": {
+				"foreground": "#B781A1"
+			}
+		},
+		{
+			"name": "Entity",
+			"scope": "entity",
+			"settings": {
+				"fontStyle": "",
+				"foreground": "#cececbff"
+			}
+		},
+		{
+			"name": "Keyword",
+			"scope": "keyword",
+			"settings": {
+				"foreground": "#CFD572"
+			}
+		},
+		{
+			"name": "Storage",
+			"scope": "storage",
+			"settings": {
+				"fontStyle": "",
+				"foreground": "#ced572e7"
+			}
+		},
+		{
+			"name": "String",
+			"scope": "string",
+			"settings": {
+				"fontStyle": "",
+				"foreground": "#FFA1A1"
+			}
+		},
+		{
+			"name": "Support",
+			"scope": "support",
+			"settings": {
+				"fontStyle": "",
+				"foreground": "#F6DDB0"
+			}
+		},
+		{
+			"name": "Variable",
+			"scope": "variable",
+			"settings": {
+				"foreground": "#d0cccc"
+			}
+		},
+		{
+			"name": "Invalid – Deprecated",
+			"scope": "invalid.deprecated",
+			"settings": {
+				"fontStyle": "italic underline",
+				"foreground": "#d4a8a1ff"
+			}
+		},
+		{
+			"name": "Invalid – Illegal",
+			"scope": "invalid.illegal",
+			"settings": {
+				"background": "#582c58bf",
+				"foreground": "#fafafaff"
+			}
+		},
+		{
+			"name": "♦ Embedded Source",
+			"scope": "text source",
+			"settings": {
+				"background": "#b0b4bc14",
+				"foreground": "#87cfeeff"
+			}
+		},
+		{
+			"name": "♦ Embedded Source (Bright)",
+			"scope": "text.html.ruby source",
+			"settings": {
+				"background": "#b1b4bc21"
+			}
+		},
+		{
+			"name": "♦ Entity inherited-class",
+			"scope": "entity.other.inherited-class",
+			"settings": {
+				"fontStyle": "italic",
+				"foreground": "#B39545"
+			}
+		},
+		{
+			"name": "♦ String embedded-source",
+			"scope": "string source",
+			"settings": {
+				"fontStyle": "",
+				"foreground": "#76f1c7ff"
+			}
+		},
+		{
+			"name": "♦ String constant",
+			"scope": "string constant",
+			"settings": {
+				"foreground": "#def5a4ff"
+			}
+		},
+		{
+			"name": "♦ String.regexp",
+			"scope": "string.regexp",
+			"settings": {
+				"fontStyle": "",
+				"foreground": "#fd8072ff"
+			}
+		},
+		{
+			"name": "♦ String.regexp.«special»",
+			"scope": "string.regexp constant.character.escape, string.regexp source.ruby.embedded, string.regexp string.regexp.arbitrary-repitition",
+			"settings": {
+				"foreground": "#ffa650ff"
+			}
+		},
+		{
+			"name": "♦ String variable",
+			"scope": "string variable",
+			"settings": {
+				"foreground": "#8a9c96ff"
+			}
+		},
+		{
+			"name": "♦ Support.function",
+			"scope": "support.function",
+			"settings": {
+				"fontStyle": "",
+				"foreground": "#CCBE94"
+			}
+		},
+		{
+			"name": "♦ Support.constant",
+			"scope": "support.constant",
+			"settings": {
+				"fontStyle": " italic",
+				"foreground": "#CCBE94"
+			}
+		},
+		{
+			"name": "c C/C++ Preprocessor Line",
+			"scope": "meta.preprocessor.c",
+			"settings": {
+				"foreground": "#8997aaff"
+			}
+		},
+		{
+			"name": "c C/C++ Preprocessor Directive",
+			"scope": "meta.preprocessor.c keyword",
+			"settings": {
+				"foreground": "#87cfeeff"
+			}
+		},
+		{
+			"name": "✘ Doctype/XML Processing",
+			"scope": "meta.tag.sgml.doctype, meta.tag.sgml.doctype entity, meta.tag.sgml.doctype string, meta.tag.preprocessor.xml, meta.tag.preprocessor.xml entity, meta.tag.preprocessor.xml string",
+			"settings": {
+				"foreground": "#f1dd82ff"
+			}
+		},
+		{
+			"name": "✘ Meta.tag.«all»",
+			"scope": "declaration.tag, declaration.tag entity, meta.tag, meta.tag entity",
+			"settings": {
+				"foreground": "#87cfeeff"
+			}
+		},
+		{
+			"name": "✘ Meta.tag.inline",
+			"scope": "declaration.tag.inline, declaration.tag.inline entity, source entity.name.tag, source entity.other.attribute-name, meta.tag.inline, meta.tag.inline entity",
+			"settings": {
+				"foreground": "#87cfeeff"
+			}
+		},
+		{
+			"name": "§ css tag-name",
+			"scope": "meta.selector.css entity.name.tag",
+			"settings": {
+				"foreground": "#f1dd82ff"
+			}
+		},
+		{
+			"name": "§ css:pseudo-class",
+			"scope": "meta.selector.css entity.other.attribute-name.tag.pseudo-class",
+			"settings": {
+				"foreground": "#f179a0ff"
+			}
+		},
+		{
+			"name": "§ css#id",
+			"scope": "meta.selector.css entity.other.attribute-name.id",
+			"settings": {
+				"foreground": "#87cfeeff"
+			}
+		},
+		{
+			"name": "§ css.class",
+			"scope": "meta.selector.css entity.other.attribute-name.class",
+			"settings": {
+				"foreground": "#87cfeeff"
+			}
+		},
+		{
+			"name": "§ css property-name:",
+			"scope": "support.type.property-name.css",
+			"settings": {
+				"foreground": "#ffa650ff"
+			}
+		},
+		{
+			"name": "§ css property-value;",
+			"scope": "meta.property-group support.constant.property-value.css, meta.property-value support.constant.property-value.css",
+			"settings": {
+				"foreground": "#fcf098ff"
+			}
+		},
+		{
+			"name": "§ css @at-rule",
+			"scope": "meta.preprocessor.at-rule keyword.control.at-rule",
+			"settings": {
+				"foreground": "#8694a7ff"
+			}
+		},
+		{
+			"name": "§ css additional-constants",
+			"scope": "meta.property-value support.constant.named-color.css, meta.property-value constant",
+			"settings": {
+				"foreground": "#fd8072ff"
+			}
+		},
+		{
+			"name": "§ css constructor.argument",
+			"scope": "meta.constructor.argument.css",
+			"settings": {
+				"foreground": "#919f6aff"
+			}
+		},
+		{
+			"name": "⎇ diff.header",
+			"scope": "meta.diff, meta.diff.header, meta.separator",
+			"settings": {
+				"background": "#0e2231ff",
+				"fontStyle": "italic",
+				"foreground": "#fafafaff"
+			}
+		},
+		{
+			"name": "⎇ diff.deleted",
+			"scope": "markup.deleted",
+			"settings": {
+				"background": "#420e09ff",
+				"foreground": "#fafafaff"
+			}
+		},
+		{
+			"name": "⎇ diff.changed",
+			"scope": "markup.changed",
+			"settings": {
+				"background": "#4a410dff",
+				"foreground": "#fafafaff"
+			}
+		},
+		{
+			"name": "⎇ diff.inserted",
+			"scope": "markup.inserted",
+			"settings": {
+				"background": "#253b22ff",
+				"foreground": "#fafafaff"
+			}
+		},
+		{
+			"name": "Markup: List",
+			"scope": "markup.list",
+			"settings": {
+				"foreground": "#fcf098ff"
+			}
+		},
+		{
+			"name": "Markup: Heading",
+			"scope": "markup.heading",
+			"settings": {
+				"foreground": "#d16a4cff"
+			}
+		},
+		{
+			"name": "Go built-in function",
+			"scope": "support.function.built-in.go",
+			"settings": {
+				"foreground": "#f1dd82ff"
+			}
+		},
+		{
+			"name": "parenthesis",
+			"scope": "meta.brace.round",
+			"settings": {
+				"foreground": "#A4A6A6"
+			}
+		},
+		{
+			"name": "curly braces",
+			"scope": "punctuation.definition.block",
+			"settings": {
+				"foreground": "#A4A6A6"
+			}
+		},
+		{
+			"name": "comma",
+			"scope": "punctuation.separator.comma",
+			"settings": {
+				"foreground": "#A4A6A6"
+			}
+		},
+		{
+			"name": "left angle bracket",
+			"scope": "punctuation.definition.typeparameters.begin",
+			"settings": {
+				"foreground": "#A4A6A6"
+			}
+		},
+		{
+			"name": "right angle bracket",
+			"scope": "punctuation.definition.typeparameters.end",
+			"settings": {
+				"foreground": "#A4A6A6"
+			}
+		},
+		{
+			"name": "params open",
+			"scope": "punctuation.definition.parameters.begin",
+			"settings": {
+				"foreground": "#A4A6A6"
+			}
+		},
+		{
+			"name": "params close",
+			"scope": "punctuation.definition.parameters.end",
+			"settings": {
+				"foreground": "#A4A6A6"
+			}
+		},
+		{
+			"name": "definition tag begin",
+			"scope": "punctuation.definition.tag.begin",
+			"settings": {
+				"foreground": "#A4A6A6"
+			}
+		},
+		{
+			"name": "definition tag end",
+			"scope": "punctuation.definition.tag.end",
+			"settings": {
+				"foreground": "#A4A6A6"
+			}
+		},
+		{
+			"name": "punctuation section embedded tag begin",
+			"scope": "punctuation.section.embedded.begin",
+			"settings": {
+				"foreground": "#A4A6A6"
+			}
+		},
+		{
+			"name": "punctuation section embedded tag end",
+			"scope": "punctuation.section.embedded",
+			"settings": {
+				"foreground": "#A4A6A6"
+			}
+		},
+		{
+			"name": "punctuation definition parameters begin",
+			"scope": "punctuation.definition.parameters.begin",
+			"settings": {
+				"foreground": "#A4A6A6"
+			}
+		},
+		{
+			"name": "punctuation definition parameters end",
+			"scope": "punctuation.definition.parameters.end",
+			"settings": {
+				"foreground": "#A4A6A6"
+			}
+		},
+		{
+			"name": "function call",
+			"scope": "meta.function-call.ts",
+			"settings": {
+				"foreground": "#cececbff"
+			}
+		},
+		{
+			"name": "type name",
+			"scope": "entity.name.class",
+			"settings": {
+				"fontStyle": "italic",
+				"foreground": "#B39545"
+			}
+		},
+		{
+			"name": "go template template block",
+			"scope": "punctuation.section.embedded.begin.gotemplate",
+			"settings": {
+				"foreground": "#def5a4ff"
+			}
+		},
+		{
+			"name": "go template template block",
+			"scope": "punctuation.section.embedded.end.gotemplate",
+			"settings": {
+				"foreground": "#def5a4ff"
+			}
+		},
+		{
+			"name": "html attribute",
+			"scope": "entity.other.attribute-name.html",
+			"settings": {
+				"foreground": "#eedd65ff"
+			}
+		},
+		{
+			"name": "typescript entity jsx attribute name",
+			"scope": "entity.other.attribute-name.tsx",
+			"settings": {
+				"foreground": "#ccbe94"
+			}
+		},
+		{
+			"name": "typescript type parameters",
+			"scope": "entity.name.type",
+			"settings": {
+				"foreground": "#b39545ff"
+			}
+		},
+		{
+			"name": "typescript type parameters",
+			"scope": "entity.name.function",
+			"settings": {
+				"foreground": "#9fcb9d"
+			}
+		},
+		{
+			"name": "typescript type alias",
+			"scope": "entity.name.type.alias",
+			"settings": {
+				"foreground": "#f6ddb0ff"
+			}
+		},
+		{
+			"name": "typescript type interface",
+			"scope": "entity.name.type.interface",
+			"settings": {
+				"foreground": "#f6ddb0ff"
+			}
+		},
+		{
+			"name": "typescript other constant",
+			"scope": "variable.other.constant",
+			"settings": {
+				"foreground": "#f6ddb0ff"
+			}
+		},
+		{
+			"name": "typescript other constant object",
+			"scope": "variable.other.constant.object",
+			"settings": {
+				"foreground": "#9cb8bbff"
+			}
+		},
+		{
+			"name": "typescript other object",
+			"scope": "variable.other.object",
+			"settings": {
+				"foreground": "#acbdbf"
+			}
+		},
+		{
+			"name": "typescript other object property",
+			"scope": "variable.other.object.property",
+			"settings": {
+				"foreground": "#9cb8bbff"
+			}
+		},
+		{
+			"name": "typescript other object property",
+			"scope": "meta.object-literal.key",
+			"settings": {
+				"foreground": "#d0cccc"
+			}
+		},
+		{
+			"name": "typescript name tag tsx",
+			"scope": "entity.name.tag.tsx",
+			"settings": {
+				"foreground": "#f6ddb0ff"
+			}
+		},
+		{
+			"scope": "token.info-token",
+			"settings": {
+				"foreground": "#6796e6"
+			}
+		},
+		{
+			"scope": "token.warn-token",
+			"settings": {
+				"foreground": "#cd9731"
+			}
+		},
+		{
+			"scope": "token.error-token",
+			"settings": {
+				"foreground": "#f44747"
+			}
+		},
+		{
+			"scope": "token.debug-token",
+			"settings": {
+				"foreground": "#b267e6"
+			}
+		}
+	]
+}

From b09539d43bcb24f3144cc202a0fd9bb1119761a1 Mon Sep 17 00:00:00 2001
From: Hunter Johnston <johnstonhuntera@gmail.com>
Date: Fri, 17 Nov 2023 19:37:35 -0500
Subject: [PATCH 039/217] code theme

---
 mdsvex.config.js                              |   8 +-
 src/components/markdown/pre.svelte            |   5 +-
 .../navigation/sidebar-nav-main-items.svelte  |   4 +-
 src/styles/themes/custom-dark.json            | 513 ++++++++++++
 src/styles/themes/custom-light.json           | 497 +++++++++++
 src/styles/themes/desertesque.json            | 781 ------------------
 6 files changed, 1015 insertions(+), 793 deletions(-)
 create mode 100644 src/styles/themes/custom-dark.json
 create mode 100644 src/styles/themes/custom-light.json
 delete mode 100644 src/styles/themes/desertesque.json

diff --git a/mdsvex.config.js b/mdsvex.config.js
index d5686c23c..83e245147 100644
--- a/mdsvex.config.js
+++ b/mdsvex.config.js
@@ -17,12 +17,8 @@ const __dirname = fileURLToPath(new URL(".", import.meta.url));
  */
 const prettyCodeOptions = {
 	theme: {
-		dark: JSON.parse(
-			readFileSync(resolve(__dirname, "./src/styles/themes/tokyo-night-storm.json"))
-		),
-		light: JSON.parse(
-			readFileSync(resolve(__dirname, "./src/styles/themes/tokyo-night-light.json"))
-		)
+		dark: JSON.parse(readFileSync(resolve(__dirname, "./src/styles/themes/custom-dark.json"))),
+		light: JSON.parse(readFileSync(resolve(__dirname, "./src/styles/themes/custom-light.json")))
 	},
 	keepBackground: false,
 	onVisitLine(node) {
diff --git a/src/components/markdown/pre.svelte b/src/components/markdown/pre.svelte
index 6dcb5ceed..917e6943c 100644
--- a/src/components/markdown/pre.svelte
+++ b/src/components/markdown/pre.svelte
@@ -9,10 +9,7 @@
 </script>
 
 <pre
-	class={cn(
-		"mb-4 mt-6 overflow-x-auto rounded-card bg-background border-muted border-2 py-4 ",
-		className
-	)}
+	class={cn("mb-4 mt-6 overflow-x-auto rounded-card border-muted border-2 py-4 ", className)}
 	use:setCodeString
 	{...$$restProps}>
 	<slot />
diff --git a/src/components/navigation/sidebar-nav-main-items.svelte b/src/components/navigation/sidebar-nav-main-items.svelte
index 21a0ee034..8f478a6dc 100644
--- a/src/components/navigation/sidebar-nav-main-items.svelte
+++ b/src/components/navigation/sidebar-nav-main-items.svelte
@@ -20,13 +20,13 @@
 </script>
 
 {#if items.length}
-	<div class="grid grid-flow-row auto-rows-max text-sm pb-8">
+	<div class="grid grid-flow-row auto-rows-max text-sm pb-8 gap-1">
 		{#each items as item, index (index)}
 			{#if item.href}
 				<a
 					href={item.href}
 					class={cn(
-						"group flex w-full items-center rounded-md p-2 text-sm text-foreground font-semibold gap-2.5 hover:bg-muted transition-all",
+						"group flex w-full items-center rounded-md py-1.5 px-2.5 text-sm text-foreground font-semibold gap-2.5 hover:bg-muted transition-all",
 						$page.url.pathname === item.href ? "bg-muted" : "bg-transparent"
 					)}
 					target={item.external ? "_blank" : ""}
diff --git a/src/styles/themes/custom-dark.json b/src/styles/themes/custom-dark.json
new file mode 100644
index 000000000..18bcb1976
--- /dev/null
+++ b/src/styles/themes/custom-dark.json
@@ -0,0 +1,513 @@
+{
+	"name": "github-dark",
+	"colors": {
+		"focusBorder": "#005cc5",
+		"foreground": "#d1d5da",
+		"descriptionForeground": "#959da5",
+		"errorForeground": "#f97583",
+		"textLink.foreground": "#79b8ff",
+		"textLink.activeForeground": "#c8e1ff",
+		"textBlockQuote.background": "#24292e",
+		"textBlockQuote.border": "#444d56",
+		"textCodeBlock.background": "#2f363d",
+		"textPreformat.foreground": "#d1d5da",
+		"textSeparator.foreground": "#586069",
+		"button.background": "#176f2c",
+		"button.foreground": "#dcffe4",
+		"button.hoverBackground": "#22863a",
+		"button.secondaryBackground": "#444d56",
+		"button.secondaryForeground": "#fff",
+		"button.secondaryHoverBackground": "#586069",
+		"checkbox.background": "#444d56",
+		"checkbox.border": "#1b1f23",
+		"dropdown.background": "#2f363d",
+		"dropdown.border": "#1b1f23",
+		"dropdown.foreground": "#e1e4e8",
+		"dropdown.listBackground": "#24292e",
+		"input.background": "#2f363d",
+		"input.border": "#1b1f23",
+		"input.foreground": "#e1e4e8",
+		"input.placeholderForeground": "#959da5",
+		"badge.foreground": "#c8e1ff",
+		"badge.background": "#044289",
+		"progressBar.background": "#0366d6",
+		"titleBar.activeForeground": "#e1e4e8",
+		"titleBar.activeBackground": "#24292e",
+		"titleBar.inactiveForeground": "#959da5",
+		"titleBar.inactiveBackground": "#1f2428",
+		"titleBar.border": "#1b1f23",
+		"activityBar.foreground": "#e1e4e8",
+		"activityBar.inactiveForeground": "#6a737d",
+		"activityBar.background": "#24292e",
+		"activityBarBadge.foreground": "#fff",
+		"activityBarBadge.background": "#0366d6",
+		"activityBar.activeBorder": "#f9826c",
+		"activityBar.border": "#1b1f23",
+		"sideBar.foreground": "#d1d5da",
+		"sideBar.background": "#1f2428",
+		"sideBar.border": "#1b1f23",
+		"sideBarTitle.foreground": "#e1e4e8",
+		"sideBarSectionHeader.foreground": "#e1e4e8",
+		"sideBarSectionHeader.background": "#1f2428",
+		"sideBarSectionHeader.border": "#1b1f23",
+		"list.hoverForeground": "#e1e4e8",
+		"list.inactiveSelectionForeground": "#e1e4e8",
+		"list.activeSelectionForeground": "#e1e4e8",
+		"list.hoverBackground": "#282e34",
+		"list.inactiveSelectionBackground": "#282e34",
+		"list.activeSelectionBackground": "#39414a",
+		"list.inactiveFocusBackground": "#1d2d3e",
+		"list.focusBackground": "#044289",
+		"tree.indentGuidesStroke": "#2f363d",
+		"notificationCenterHeader.foreground": "#959da5",
+		"notificationCenterHeader.background": "#24292e",
+		"notifications.foreground": "#e1e4e8",
+		"notifications.background": "#2f363d",
+		"notifications.border": "#1b1f23",
+		"notificationsErrorIcon.foreground": "#ea4a5a",
+		"notificationsWarningIcon.foreground": "#ffab70",
+		"notificationsInfoIcon.foreground": "#79b8ff",
+		"pickerGroup.border": "#444d56",
+		"pickerGroup.foreground": "#e1e4e8",
+		"quickInput.background": "#24292e",
+		"quickInput.foreground": "#e1e4e8",
+		"statusBar.foreground": "#d1d5da",
+		"statusBar.background": "#24292e",
+		"statusBar.border": "#1b1f23",
+		"statusBar.noFolderBackground": "#24292e",
+		"statusBar.debuggingBackground": "#931c06",
+		"statusBar.debuggingForeground": "#fff",
+		"statusBarItem.prominentBackground": "#282e34",
+		"statusBarItem.remoteForeground": "#d1d5da",
+		"statusBarItem.remoteBackground": "#24292e",
+		"editorGroupHeader.tabsBackground": "#1f2428",
+		"editorGroupHeader.tabsBorder": "#1b1f23",
+		"editorGroup.border": "#1b1f23",
+		"tab.activeForeground": "#e1e4e8",
+		"tab.inactiveForeground": "#959da5",
+		"tab.inactiveBackground": "#1f2428",
+		"tab.activeBackground": "#24292e",
+		"tab.hoverBackground": "#24292e",
+		"tab.unfocusedHoverBackground": "#24292e",
+		"tab.border": "#1b1f23",
+		"tab.unfocusedActiveBorderTop": "#1b1f23",
+		"tab.activeBorder": "#24292e",
+		"tab.unfocusedActiveBorder": "#24292e",
+		"tab.activeBorderTop": "#f9826c",
+		"breadcrumb.foreground": "#959da5",
+		"breadcrumb.focusForeground": "#e1e4e8",
+		"breadcrumb.activeSelectionForeground": "#d1d5da",
+		"breadcrumbPicker.background": "#2b3036",
+		"editor.foreground": "#e1e4e8",
+		"editor.background": "#24292e",
+		"editorWidget.background": "#1f2428",
+		"editor.foldBackground": "#58606915",
+		"editor.lineHighlightBackground": "#2b3036",
+		"editorLineNumber.foreground": "#444d56",
+		"editorLineNumber.activeForeground": "#e1e4e8",
+		"editorIndentGuide.background": "#2f363d",
+		"editorIndentGuide.activeBackground": "#444d56",
+		"editorWhitespace.foreground": "#444d56",
+		"editorCursor.foreground": "#c8e1ff",
+		"editorError.foreground": "#f97583",
+		"editorWarning.foreground": "#ffea7f",
+		"editor.findMatchBackground": "#ffd33d44",
+		"editor.findMatchHighlightBackground": "#ffd33d22",
+		"editor.linkedEditingBackground": "#3392FF22",
+		"editor.inactiveSelectionBackground": "#3392FF22",
+		"editor.selectionBackground": "#3392FF44",
+		"editor.selectionHighlightBackground": "#17E5E633",
+		"editor.selectionHighlightBorder": "#17E5E600",
+		"editor.wordHighlightBackground": "#17E5E600",
+		"editor.wordHighlightStrongBackground": "#17E5E600",
+		"editor.wordHighlightBorder": "#17E5E699",
+		"editor.wordHighlightStrongBorder": "#17E5E666",
+		"editorBracketMatch.background": "#17E5E650",
+		"editorBracketMatch.border": "#17E5E600",
+		"editorGutter.modifiedBackground": "#2188ff",
+		"editorGutter.addedBackground": "#28a745",
+		"editorGutter.deletedBackground": "#ea4a5a",
+		"diffEditor.insertedTextBackground": "#28a74530",
+		"diffEditor.removedTextBackground": "#d73a4930",
+		"scrollbar.shadow": "#0008",
+		"scrollbarSlider.background": "#6a737d33",
+		"scrollbarSlider.hoverBackground": "#6a737d44",
+		"scrollbarSlider.activeBackground": "#6a737d88",
+		"editorOverviewRuler.border": "#1b1f23",
+		"panel.background": "#1f2428",
+		"panel.border": "#1b1f23",
+		"panelTitle.activeBorder": "#f9826c",
+		"panelTitle.activeForeground": "#e1e4e8",
+		"panelTitle.inactiveForeground": "#959da5",
+		"panelInput.border": "#2f363d",
+		"terminal.foreground": "#d1d5da",
+		"terminal.tab.activeBorder": "#f9826c",
+		"terminalCursor.background": "#586069",
+		"terminalCursor.foreground": "#79b8ff",
+		"terminal.ansiBrightWhite": "#fafbfc",
+		"terminal.ansiWhite": "#d1d5da",
+		"terminal.ansiBrightBlack": "#959da5",
+		"terminal.ansiBlack": "#586069",
+		"terminal.ansiBlue": "#2188ff",
+		"terminal.ansiBrightBlue": "#79b8ff",
+		"terminal.ansiGreen": "#34d058",
+		"terminal.ansiBrightGreen": "#85e89d",
+		"terminal.ansiCyan": "#39c5cf",
+		"terminal.ansiBrightCyan": "#56d4dd",
+		"terminal.ansiRed": "#ea4a5a",
+		"terminal.ansiBrightRed": "#f97583",
+		"terminal.ansiMagenta": "#b392f0",
+		"terminal.ansiBrightMagenta": "#b392f0",
+		"terminal.ansiYellow": "#ffea7f",
+		"terminal.ansiBrightYellow": "#ffea7f",
+		"editorBracketHighlight.foreground1": "#79b8ff",
+		"editorBracketHighlight.foreground2": "#ffab70",
+		"editorBracketHighlight.foreground3": "#b392f0",
+		"editorBracketHighlight.foreground4": "#79b8ff",
+		"editorBracketHighlight.foreground5": "#ffab70",
+		"editorBracketHighlight.foreground6": "#b392f0",
+		"gitDecoration.addedResourceForeground": "#34d058",
+		"gitDecoration.modifiedResourceForeground": "#79b8ff",
+		"gitDecoration.deletedResourceForeground": "#ea4a5a",
+		"gitDecoration.untrackedResourceForeground": "#34d058",
+		"gitDecoration.ignoredResourceForeground": "#6a737d",
+		"gitDecoration.conflictingResourceForeground": "#ffab70",
+		"gitDecoration.submoduleResourceForeground": "#6a737d",
+		"debugToolBar.background": "#2b3036",
+		"editor.stackFrameHighlightBackground": "#C6902625",
+		"editor.focusedStackFrameHighlightBackground": "#2b6a3033",
+		"peekViewEditor.matchHighlightBackground": "#ffd33d33",
+		"peekViewResult.matchHighlightBackground": "#ffd33d33",
+		"peekViewEditor.background": "#1f242888",
+		"peekViewResult.background": "#1f2428",
+		"settings.headerForeground": "#e1e4e8",
+		"settings.modifiedItemIndicator": "#0366d6",
+		"welcomePage.buttonBackground": "#2f363d",
+		"welcomePage.buttonHoverBackground": "#444d56"
+	},
+	"semanticHighlighting": true,
+	"tokenColors": [
+		{
+			"scope": ["comment", "punctuation.definition.comment", "string.comment"],
+			"settings": {
+				"foreground": "#6a737d"
+			}
+		},
+		{
+			"scope": [
+				"constant",
+				"entity.name.constant",
+				"variable.other.constant",
+				"variable.other.enummember",
+				"variable.language"
+			],
+			"settings": {
+				"foreground": "#79b8ff"
+			}
+		},
+		{
+			"scope": ["entity", "entity.name", "entity.name.constant", "entity.name.namespace"],
+			"settings": {
+				"foreground": "#b392f0"
+			}
+		},
+		{
+			"scope": "variable.parameter.function",
+			"settings": {
+				"foreground": "#e1e4e8"
+			}
+		},
+		{
+			"scope": "entity.name.tag",
+			"settings": {
+				"foreground": "#85e89d"
+			}
+		},
+		{
+			"name": "Tag - Custom / Unrecognized",
+			"scope": [
+				"entity.name.tag support.class.component",
+				"meta.tag.custom entity.name.tag",
+				"meta.tag.other.unrecognized.html.derivative entity.name.tag",
+				"meta.tag"
+			],
+			"settings": {
+				"foreground": "#ffffff"
+			}
+		},
+		{
+			"scope": "keyword",
+			"settings": {
+				"foreground": "#f97583"
+			}
+		},
+		{
+			"scope": ["storage", "storage.type"],
+			"settings": {
+				"foreground": "#f97583"
+			}
+		},
+		{
+			"scope": ["storage.modifier.package", "storage.modifier.import", "storage.type.java"],
+			"settings": {
+				"foreground": "#e1e4e8"
+			}
+		},
+		{
+			"scope": [
+				"string",
+				"punctuation.definition.string",
+				"string punctuation.section.embedded source"
+			],
+			"settings": {
+				"foreground": "#9ecbff"
+			}
+		},
+		{
+			"scope": "support",
+			"settings": {
+				"foreground": "#79b8ff"
+			}
+		},
+		{
+			"scope": "meta.property-name",
+			"settings": {
+				"foreground": "#79b8ff"
+			}
+		},
+		{
+			"scope": "variable",
+			"settings": {
+				"foreground": "#ffab70"
+			}
+		},
+		{
+			"scope": "variable.other",
+			"settings": {
+				"foreground": "#e1e4e8"
+			}
+		},
+		{
+			"scope": "invalid.broken",
+			"settings": {
+				"fontStyle": "italic",
+				"foreground": "#fdaeb7"
+			}
+		},
+		{
+			"scope": "invalid.deprecated",
+			"settings": {
+				"fontStyle": "italic",
+				"foreground": "#fdaeb7"
+			}
+		},
+		{
+			"scope": "invalid.illegal",
+			"settings": {
+				"fontStyle": "italic",
+				"foreground": "#fdaeb7"
+			}
+		},
+		{
+			"scope": "invalid.unimplemented",
+			"settings": {
+				"fontStyle": "italic",
+				"foreground": "#fdaeb7"
+			}
+		},
+		{
+			"scope": "carriage-return",
+			"settings": {
+				"fontStyle": "italic underline",
+				"background": "#f97583",
+				"foreground": "#24292e",
+				"content": "^M"
+			}
+		},
+		{
+			"scope": "message.error",
+			"settings": {
+				"foreground": "#fdaeb7"
+			}
+		},
+		{
+			"scope": "string variable",
+			"settings": {
+				"foreground": "#79b8ff"
+			}
+		},
+		{
+			"scope": ["source.regexp", "string.regexp"],
+			"settings": {
+				"foreground": "#dbedff"
+			}
+		},
+		{
+			"scope": [
+				"string.regexp.character-class",
+				"string.regexp constant.character.escape",
+				"string.regexp source.ruby.embedded",
+				"string.regexp string.regexp.arbitrary-repitition"
+			],
+			"settings": {
+				"foreground": "#dbedff"
+			}
+		},
+		{
+			"scope": "string.regexp constant.character.escape",
+			"settings": {
+				"fontStyle": "bold",
+				"foreground": "#85e89d"
+			}
+		},
+		{
+			"scope": "support.constant",
+			"settings": {
+				"foreground": "#79b8ff"
+			}
+		},
+		{
+			"scope": "support.variable",
+			"settings": {
+				"foreground": "#79b8ff"
+			}
+		},
+		{
+			"scope": "meta.module-reference",
+			"settings": {
+				"foreground": "#79b8ff"
+			}
+		},
+		{
+			"scope": "punctuation.definition.list.begin.markdown",
+			"settings": {
+				"foreground": "#ffab70"
+			}
+		},
+		{
+			"scope": ["markup.heading", "markup.heading entity.name"],
+			"settings": {
+				"fontStyle": "bold",
+				"foreground": "#79b8ff"
+			}
+		},
+		{
+			"scope": "markup.quote",
+			"settings": {
+				"foreground": "#85e89d"
+			}
+		},
+		{
+			"scope": "markup.italic",
+			"settings": {
+				"fontStyle": "italic",
+				"foreground": "#e1e4e8"
+			}
+		},
+		{
+			"scope": "markup.bold",
+			"settings": {
+				"fontStyle": "bold",
+				"foreground": "#e1e4e8"
+			}
+		},
+		{
+			"scope": ["markup.underline"],
+			"settings": {
+				"fontStyle": "underline"
+			}
+		},
+		{
+			"scope": ["markup.strikethrough"],
+			"settings": {
+				"fontStyle": "strikethrough"
+			}
+		},
+		{
+			"scope": "markup.inline.raw",
+			"settings": {
+				"foreground": "#79b8ff"
+			}
+		},
+		{
+			"scope": ["markup.deleted", "meta.diff.header.from-file", "punctuation.definition.deleted"],
+			"settings": {
+				"background": "#86181d",
+				"foreground": "#fdaeb7"
+			}
+		},
+		{
+			"scope": ["markup.inserted", "meta.diff.header.to-file", "punctuation.definition.inserted"],
+			"settings": {
+				"background": "#144620",
+				"foreground": "#85e89d"
+			}
+		},
+		{
+			"scope": ["markup.changed", "punctuation.definition.changed"],
+			"settings": {
+				"background": "#c24e00",
+				"foreground": "#ffab70"
+			}
+		},
+		{
+			"scope": ["markup.ignored", "markup.untracked"],
+			"settings": {
+				"foreground": "#2f363d",
+				"background": "#79b8ff"
+			}
+		},
+		{
+			"scope": "meta.diff.range",
+			"settings": {
+				"foreground": "#b392f0",
+				"fontStyle": "bold"
+			}
+		},
+		{
+			"scope": "meta.diff.header",
+			"settings": {
+				"foreground": "#79b8ff"
+			}
+		},
+		{
+			"scope": "meta.separator",
+			"settings": {
+				"fontStyle": "bold",
+				"foreground": "#79b8ff"
+			}
+		},
+		{
+			"scope": "meta.output",
+			"settings": {
+				"foreground": "#79b8ff"
+			}
+		},
+		{
+			"scope": [
+				"brackethighlighter.tag",
+				"brackethighlighter.curly",
+				"brackethighlighter.round",
+				"brackethighlighter.square",
+				"brackethighlighter.angle",
+				"brackethighlighter.quote"
+			],
+			"settings": {
+				"foreground": "#d1d5da"
+			}
+		},
+		{
+			"scope": "brackethighlighter.unmatched",
+			"settings": {
+				"foreground": "#fdaeb7"
+			}
+		},
+		{
+			"scope": ["constant.other.reference.link", "string.other.link"],
+			"settings": {
+				"foreground": "#dbedff",
+				"fontStyle": "underline"
+			}
+		}
+	]
+}
diff --git a/src/styles/themes/custom-light.json b/src/styles/themes/custom-light.json
new file mode 100644
index 000000000..4bc394324
--- /dev/null
+++ b/src/styles/themes/custom-light.json
@@ -0,0 +1,497 @@
+{
+	"name": "github-light",
+	"colors": {
+		"focusBorder": "#2188ff",
+		"foreground": "#444d56",
+		"descriptionForeground": "#6a737d",
+		"errorForeground": "#cb2431",
+		"textLink.foreground": "#0366d6",
+		"textLink.activeForeground": "#005cc5",
+		"textBlockQuote.background": "#fafbfc",
+		"textBlockQuote.border": "#e1e4e8",
+		"textCodeBlock.background": "#f6f8fa",
+		"textPreformat.foreground": "#586069",
+		"textSeparator.foreground": "#d1d5da",
+		"button.background": "#159739",
+		"button.foreground": "#fff",
+		"button.hoverBackground": "#138934",
+		"button.secondaryBackground": "#e1e4e8",
+		"button.secondaryForeground": "#1b1f23",
+		"button.secondaryHoverBackground": "#d1d5da",
+		"checkbox.background": "#fafbfc",
+		"checkbox.border": "#d1d5da",
+		"dropdown.background": "#fafbfc",
+		"dropdown.border": "#e1e4e8",
+		"dropdown.foreground": "#2f363d",
+		"dropdown.listBackground": "#fff",
+		"input.background": "#fafbfc",
+		"input.border": "#e1e4e8",
+		"input.foreground": "#2f363d",
+		"input.placeholderForeground": "#959da5",
+		"badge.foreground": "#005cc5",
+		"badge.background": "#dbedff",
+		"progressBar.background": "#2188ff",
+		"titleBar.activeForeground": "#2f363d",
+		"titleBar.activeBackground": "#fff",
+		"titleBar.inactiveForeground": "#6a737d",
+		"titleBar.inactiveBackground": "#f6f8fa",
+		"titleBar.border": "#e1e4e8",
+		"activityBar.foreground": "#2f363d",
+		"activityBar.inactiveForeground": "#959da5",
+		"activityBar.background": "#fff",
+		"activityBarBadge.foreground": "#fff",
+		"activityBarBadge.background": "#2188ff",
+		"activityBar.activeBorder": "#f9826c",
+		"activityBar.border": "#e1e4e8",
+		"sideBar.foreground": "#586069",
+		"sideBar.background": "#f6f8fa",
+		"sideBar.border": "#e1e4e8",
+		"sideBarTitle.foreground": "#2f363d",
+		"sideBarSectionHeader.foreground": "#2f363d",
+		"sideBarSectionHeader.background": "#f6f8fa",
+		"sideBarSectionHeader.border": "#e1e4e8",
+		"list.hoverForeground": "#2f363d",
+		"list.inactiveSelectionForeground": "#2f363d",
+		"list.activeSelectionForeground": "#2f363d",
+		"list.hoverBackground": "#ebf0f4",
+		"list.inactiveSelectionBackground": "#e8eaed",
+		"list.activeSelectionBackground": "#e2e5e9",
+		"list.inactiveFocusBackground": "#dbedff",
+		"list.focusBackground": "#cce5ff",
+		"tree.indentGuidesStroke": "#e1e4e8",
+		"notificationCenterHeader.foreground": "#6a737d",
+		"notificationCenterHeader.background": "#e1e4e8",
+		"notifications.foreground": "#2f363d",
+		"notifications.background": "#fafbfc",
+		"notifications.border": "#e1e4e8",
+		"notificationsErrorIcon.foreground": "#d73a49",
+		"notificationsWarningIcon.foreground": "#e36209",
+		"notificationsInfoIcon.foreground": "#005cc5",
+		"pickerGroup.border": "#e1e4e8",
+		"pickerGroup.foreground": "#2f363d",
+		"quickInput.background": "#fafbfc",
+		"quickInput.foreground": "#2f363d",
+		"statusBar.foreground": "#586069",
+		"statusBar.background": "#fff",
+		"statusBar.border": "#e1e4e8",
+		"statusBar.noFolderBackground": "#fff",
+		"statusBar.debuggingBackground": "#f9826c",
+		"statusBar.debuggingForeground": "#fff",
+		"statusBarItem.prominentBackground": "#e8eaed",
+		"statusBarItem.remoteForeground": "#586069",
+		"statusBarItem.remoteBackground": "#fff",
+		"editorGroupHeader.tabsBackground": "#f6f8fa",
+		"editorGroupHeader.tabsBorder": "#e1e4e8",
+		"editorGroup.border": "#e1e4e8",
+		"tab.activeForeground": "#2f363d",
+		"tab.inactiveForeground": "#6a737d",
+		"tab.inactiveBackground": "#f6f8fa",
+		"tab.activeBackground": "#fff",
+		"tab.hoverBackground": "#fff",
+		"tab.unfocusedHoverBackground": "#fff",
+		"tab.border": "#e1e4e8",
+		"tab.unfocusedActiveBorderTop": "#e1e4e8",
+		"tab.activeBorder": "#fff",
+		"tab.unfocusedActiveBorder": "#fff",
+		"tab.activeBorderTop": "#f9826c",
+		"breadcrumb.foreground": "#6a737d",
+		"breadcrumb.focusForeground": "#2f363d",
+		"breadcrumb.activeSelectionForeground": "#586069",
+		"breadcrumbPicker.background": "#fafbfc",
+		"editor.foreground": "#24292e",
+		"editor.background": "#fff",
+		"editorWidget.background": "#f6f8fa",
+		"editor.foldBackground": "#d1d5da11",
+		"editor.lineHighlightBackground": "#f6f8fa",
+		"editorLineNumber.foreground": "#1b1f234d",
+		"editorLineNumber.activeForeground": "#24292e",
+		"editorIndentGuide.background": "#eff2f6",
+		"editorIndentGuide.activeBackground": "#d7dbe0",
+		"editorWhitespace.foreground": "#d1d5da",
+		"editorCursor.foreground": "#044289",
+		"editorError.foreground": "#cb2431",
+		"editorWarning.foreground": "#f9c513",
+		"editor.findMatchBackground": "#ffdf5d",
+		"editor.findMatchHighlightBackground": "#ffdf5d66",
+		"editor.linkedEditingBackground": "#0366d611",
+		"editor.inactiveSelectionBackground": "#0366d611",
+		"editor.selectionBackground": "#0366d625",
+		"editor.selectionHighlightBackground": "#34d05840",
+		"editor.selectionHighlightBorder": "#34d05800",
+		"editor.wordHighlightBackground": "#34d05800",
+		"editor.wordHighlightStrongBackground": "#34d05800",
+		"editor.wordHighlightBorder": "#24943e99",
+		"editor.wordHighlightStrongBorder": "#24943e50",
+		"editorBracketMatch.background": "#34d05840",
+		"editorBracketMatch.border": "#34d05800",
+		"editorGutter.modifiedBackground": "#2188ff",
+		"editorGutter.addedBackground": "#28a745",
+		"editorGutter.deletedBackground": "#d73a49",
+		"diffEditor.insertedTextBackground": "#34d05822",
+		"diffEditor.removedTextBackground": "#d73a4922",
+		"scrollbar.shadow": "#6a737d33",
+		"scrollbarSlider.background": "#959da533",
+		"scrollbarSlider.hoverBackground": "#959da544",
+		"scrollbarSlider.activeBackground": "#959da588",
+		"editorOverviewRuler.border": "#fff",
+		"panel.background": "#f6f8fa",
+		"panel.border": "#e1e4e8",
+		"panelTitle.activeBorder": "#f9826c",
+		"panelTitle.activeForeground": "#2f363d",
+		"panelTitle.inactiveForeground": "#6a737d",
+		"panelInput.border": "#e1e4e8",
+		"terminal.foreground": "#586069",
+		"terminal.tab.activeBorder": "#f9826c",
+		"terminalCursor.background": "#d1d5da",
+		"terminalCursor.foreground": "#005cc5",
+		"terminal.ansiBrightWhite": "#d1d5da",
+		"terminal.ansiWhite": "#6a737d",
+		"terminal.ansiBrightBlack": "#959da5",
+		"terminal.ansiBlack": "#24292e",
+		"terminal.ansiBlue": "#0366d6",
+		"terminal.ansiBrightBlue": "#005cc5",
+		"terminal.ansiGreen": "#28a745",
+		"terminal.ansiBrightGreen": "#22863a",
+		"terminal.ansiCyan": "#1b7c83",
+		"terminal.ansiBrightCyan": "#3192aa",
+		"terminal.ansiRed": "#d73a49",
+		"terminal.ansiBrightRed": "#cb2431",
+		"terminal.ansiMagenta": "#5a32a3",
+		"terminal.ansiBrightMagenta": "#5a32a3",
+		"terminal.ansiYellow": "#dbab09",
+		"terminal.ansiBrightYellow": "#b08800",
+		"editorBracketHighlight.foreground1": "#005cc5",
+		"editorBracketHighlight.foreground2": "#e36209",
+		"editorBracketHighlight.foreground3": "#5a32a3",
+		"editorBracketHighlight.foreground4": "#005cc5",
+		"editorBracketHighlight.foreground5": "#e36209",
+		"editorBracketHighlight.foreground6": "#5a32a3",
+		"gitDecoration.addedResourceForeground": "#28a745",
+		"gitDecoration.modifiedResourceForeground": "#005cc5",
+		"gitDecoration.deletedResourceForeground": "#d73a49",
+		"gitDecoration.untrackedResourceForeground": "#28a745",
+		"gitDecoration.ignoredResourceForeground": "#959da5",
+		"gitDecoration.conflictingResourceForeground": "#e36209",
+		"gitDecoration.submoduleResourceForeground": "#959da5",
+		"debugToolBar.background": "#fff",
+		"editor.stackFrameHighlightBackground": "#ffd33d33",
+		"editor.focusedStackFrameHighlightBackground": "#28a74525",
+		"settings.headerForeground": "#2f363d",
+		"settings.modifiedItemIndicator": "#2188ff",
+		"welcomePage.buttonBackground": "#f6f8fa",
+		"welcomePage.buttonHoverBackground": "#e1e4e8"
+	},
+	"semanticHighlighting": true,
+	"tokenColors": [
+		{
+			"scope": ["comment", "punctuation.definition.comment", "string.comment"],
+			"settings": {
+				"foreground": "#6a737d"
+			}
+		},
+		{
+			"scope": [
+				"constant",
+				"entity.name.constant",
+				"variable.other.constant",
+				"variable.other.enummember",
+				"variable.language"
+			],
+			"settings": {
+				"foreground": "#005cc5"
+			}
+		},
+		{
+			"scope": ["entity", "entity.name"],
+			"settings": {
+				"foreground": "#6f42c1"
+			}
+		},
+		{
+			"scope": "variable.parameter.function",
+			"settings": {
+				"foreground": "#24292e"
+			}
+		},
+		{
+			"scope": "entity.name.tag",
+			"settings": {
+				"foreground": "#22863a"
+			}
+		},
+		{
+			"scope": "keyword",
+			"settings": {
+				"foreground": "#d73a49"
+			}
+		},
+		{
+			"scope": ["storage", "storage.type"],
+			"settings": {
+				"foreground": "#d73a49"
+			}
+		},
+		{
+			"scope": ["storage.modifier.package", "storage.modifier.import", "storage.type.java"],
+			"settings": {
+				"foreground": "#24292e"
+			}
+		},
+		{
+			"scope": [
+				"string",
+				"punctuation.definition.string",
+				"string punctuation.section.embedded source"
+			],
+			"settings": {
+				"foreground": "#032f62"
+			}
+		},
+		{
+			"scope": "support",
+			"settings": {
+				"foreground": "#005cc5"
+			}
+		},
+		{
+			"scope": "meta.property-name",
+			"settings": {
+				"foreground": "#005cc5"
+			}
+		},
+		{
+			"scope": "variable",
+			"settings": {
+				"foreground": "#e36209"
+			}
+		},
+		{
+			"scope": "variable.other",
+			"settings": {
+				"foreground": "#24292e"
+			}
+		},
+		{
+			"scope": "invalid.broken",
+			"settings": {
+				"fontStyle": "italic",
+				"foreground": "#b31d28"
+			}
+		},
+		{
+			"scope": "invalid.deprecated",
+			"settings": {
+				"fontStyle": "italic",
+				"foreground": "#b31d28"
+			}
+		},
+		{
+			"scope": "invalid.illegal",
+			"settings": {
+				"fontStyle": "italic",
+				"foreground": "#b31d28"
+			}
+		},
+		{
+			"scope": "invalid.unimplemented",
+			"settings": {
+				"fontStyle": "italic",
+				"foreground": "#b31d28"
+			}
+		},
+		{
+			"scope": "carriage-return",
+			"settings": {
+				"fontStyle": "italic underline",
+				"background": "#d73a49",
+				"foreground": "#fafbfc",
+				"content": "^M"
+			}
+		},
+		{
+			"scope": "message.error",
+			"settings": {
+				"foreground": "#b31d28"
+			}
+		},
+		{
+			"scope": "string variable",
+			"settings": {
+				"foreground": "#005cc5"
+			}
+		},
+		{
+			"scope": ["source.regexp", "string.regexp"],
+			"settings": {
+				"foreground": "#032f62"
+			}
+		},
+		{
+			"scope": [
+				"string.regexp.character-class",
+				"string.regexp constant.character.escape",
+				"string.regexp source.ruby.embedded",
+				"string.regexp string.regexp.arbitrary-repitition"
+			],
+			"settings": {
+				"foreground": "#032f62"
+			}
+		},
+		{
+			"scope": "string.regexp constant.character.escape",
+			"settings": {
+				"fontStyle": "bold",
+				"foreground": "#22863a"
+			}
+		},
+		{
+			"scope": "support.constant",
+			"settings": {
+				"foreground": "#005cc5"
+			}
+		},
+		{
+			"scope": "support.variable",
+			"settings": {
+				"foreground": "#005cc5"
+			}
+		},
+		{
+			"scope": "meta.module-reference",
+			"settings": {
+				"foreground": "#005cc5"
+			}
+		},
+		{
+			"scope": "punctuation.definition.list.begin.markdown",
+			"settings": {
+				"foreground": "#e36209"
+			}
+		},
+		{
+			"scope": ["markup.heading", "markup.heading entity.name"],
+			"settings": {
+				"fontStyle": "bold",
+				"foreground": "#005cc5"
+			}
+		},
+		{
+			"scope": "markup.quote",
+			"settings": {
+				"foreground": "#22863a"
+			}
+		},
+		{
+			"scope": "markup.italic",
+			"settings": {
+				"fontStyle": "italic",
+				"foreground": "#24292e"
+			}
+		},
+		{
+			"scope": "markup.bold",
+			"settings": {
+				"fontStyle": "bold",
+				"foreground": "#24292e"
+			}
+		},
+		{
+			"scope": ["markup.underline"],
+			"settings": {
+				"fontStyle": "underline"
+			}
+		},
+		{
+			"scope": ["markup.strikethrough"],
+			"settings": {
+				"fontStyle": "strikethrough"
+			}
+		},
+		{
+			"scope": "markup.inline.raw",
+			"settings": {
+				"foreground": "#005cc5"
+			}
+		},
+		{
+			"scope": ["markup.deleted", "meta.diff.header.from-file", "punctuation.definition.deleted"],
+			"settings": {
+				"background": "#ffeef0",
+				"foreground": "#b31d28"
+			}
+		},
+		{
+			"scope": ["markup.inserted", "meta.diff.header.to-file", "punctuation.definition.inserted"],
+			"settings": {
+				"background": "#f0fff4",
+				"foreground": "#22863a"
+			}
+		},
+		{
+			"scope": ["markup.changed", "punctuation.definition.changed"],
+			"settings": {
+				"background": "#ffebda",
+				"foreground": "#e36209"
+			}
+		},
+		{
+			"scope": ["markup.ignored", "markup.untracked"],
+			"settings": {
+				"foreground": "#f6f8fa",
+				"background": "#005cc5"
+			}
+		},
+		{
+			"scope": "meta.diff.range",
+			"settings": {
+				"foreground": "#6f42c1",
+				"fontStyle": "bold"
+			}
+		},
+		{
+			"scope": "meta.diff.header",
+			"settings": {
+				"foreground": "#005cc5"
+			}
+		},
+		{
+			"scope": "meta.separator",
+			"settings": {
+				"fontStyle": "bold",
+				"foreground": "#005cc5"
+			}
+		},
+		{
+			"scope": "meta.output",
+			"settings": {
+				"foreground": "#005cc5"
+			}
+		},
+		{
+			"scope": [
+				"brackethighlighter.tag",
+				"brackethighlighter.curly",
+				"brackethighlighter.round",
+				"brackethighlighter.square",
+				"brackethighlighter.angle",
+				"brackethighlighter.quote"
+			],
+			"settings": {
+				"foreground": "#586069"
+			}
+		},
+		{
+			"scope": "brackethighlighter.unmatched",
+			"settings": {
+				"foreground": "#b31d28"
+			}
+		},
+		{
+			"scope": ["constant.other.reference.link", "string.other.link"],
+			"settings": {
+				"foreground": "#032f62",
+				"fontStyle": "underline"
+			}
+		}
+	]
+}
diff --git a/src/styles/themes/desertesque.json b/src/styles/themes/desertesque.json
deleted file mode 100644
index d1bba531b..000000000
--- a/src/styles/themes/desertesque.json
+++ /dev/null
@@ -1,781 +0,0 @@
-{
-	"$schema": "vscode://schemas/color-theme",
-	"type": "dark",
-	"colors": {
-		"editor.background": "#181717",
-		"editor.foreground": "#cccccc",
-		"editor.lineHighlightBackground": "#212020",
-		"editor.selectionBackground": "#f0e68c4f",
-		"editorCursor.foreground": "#ffff00",
-		"editorError.border": "#960000",
-		"editorWhitespace.foreground": "#ffffff40",
-		//"activityBar.background": "#333333",
-		//"activityBar.dropBackground": "#ffffff1f",
-		//"activityBar.foreground": "#ffffff",
-		//"activityBar.inactiveForeground": "#ffffff99",
-		//"activityBarBadge.background": "#007acc",
-		//"activityBarBadge.foreground": "#ffffff",
-		//"badge.background": "#4d4d4d",
-		//"badge.foreground": "#ffffff",
-		//"breadcrumb.activeSelectionForeground": "#e0e0e0",
-		//"breadcrumb.background": "#272727",
-		//"breadcrumb.focusForeground": "#e0e0e0",
-		//"breadcrumb.foreground": "#cccccccc",
-		//"breadcrumbPicker.background": "#252526",
-		//"button.background": "#0e639c",
-		//"button.foreground": "#ffffff",
-		//"button.hoverBackground": "#1177bb",
-		//"debugExceptionWidget.background": "#420b0d",
-		//"debugExceptionWidget.border": "#a31515",
-		//"debugToolBar.background": "#333333",
-		//"descriptionForeground": "#ccccccb3",
-		//"diffEditor.insertedTextBackground": "#9bb95533",
-		//"diffEditor.removedTextBackground": "#ff000033",
-		//"dropdown.background": "#3c3c3c",
-		//"dropdown.border": "#3c3c3c",
-		//"dropdown.foreground": "#f0f0f0",
-		//"editor.findMatchBackground": "#515c6a",
-		//"editor.findMatchHighlightBackground": "#ea5c0055",
-		//"editor.findRangeHighlightBackground": "#3a3d4166",
-		//"editor.hoverHighlightBackground": "#264f7840",
-		//"editor.inactiveSelectionBackground": "#f0e68c28",
-		//"editor.lineHighlightBorder": "#282828",
-		//"editor.rangeHighlightBackground": "#ffffff0b",
-		//"editor.selectionHighlightBackground": "#e3d12a2f",
-		//"editor.snippetFinalTabstopHighlightBorder": "#525252",
-		//"editor.snippetTabstopHighlightBackground": "#7c7c7c4d",
-		//"editor.wordHighlightBackground": "#575757b8",
-		//"editor.wordHighlightStrongBackground": "#004972b8",
-		//"editorActiveLineNumber.foreground": "#c6c6c6",
-		//"editorBracketMatch.background": "#0064001a",
-		//"editorBracketMatch.border": "#888888",
-		//"editorCodeLens.foreground": "#999999",
-		//"editorError.foreground": "#ea4646",
-		//"editorGroup.border": "#444444",
-		//"editorGroup.dropBackground": "#53595d80",
-		//"editorGroupHeader.noTabsBackground": "#272727",
-		//"editorGroupHeader.tabsBackground": "#252526",
-		//"editorGutter.addedBackground": "#587c0c",
-		//"editorGutter.background": "#272727",
-		//"editorGutter.commentRangeForeground": "#c5c5c5",
-		//"editorGutter.deletedBackground": "#94151b",
-		//"editorGutter.modifiedBackground": "#0c7d9d",
-		//"editorHint.foreground": "#eeeeeeb3",
-		//"editorHoverWidget.background": "#252526",
-		//"editorHoverWidget.border": "#454545",
-		//"editorIndentGuide.activeBackground": "#ffffff40",
-		//"editorIndentGuide.background": "#ffffff40",
-		//"editorInfo.foreground": "#008000",
-		//"editorLineNumber.activeForeground": "#c6c6c6",
-		"editorLineNumber.foreground": "#AAA127"
-		//"editorLink.activeForeground": "#4e94ce",
-		//"editorMarkerNavigation.background": "#2d2d30",
-		//"editorMarkerNavigationError.background": "#ea4646",
-		//"editorMarkerNavigationInfo.background": "#008000",
-		//"editorMarkerNavigationWarning.background": "#4d9e4d",
-		//"editorOverviewRuler.addedForeground": "#007acc99",
-		//"editorOverviewRuler.border": "#7f7f7f4d",
-		//"editorOverviewRuler.bracketMatchForeground": "#a0a0a0",
-		//"editorOverviewRuler.commonContentForeground": "#60606066",
-		//"editorOverviewRuler.currentContentForeground": "#40c8ae80",
-		//"editorOverviewRuler.deletedForeground": "#007acc99",
-		//"editorOverviewRuler.errorForeground": "#ff1212b3",
-		//"editorOverviewRuler.findMatchForeground": "#f6b94db3",
-		//"editorOverviewRuler.incomingContentForeground": "#40a6ff80",
-		//"editorOverviewRuler.infoForeground": "#121288b3",
-		//"editorOverviewRuler.modifiedForeground": "#007acc99",
-		//"editorOverviewRuler.rangeHighlightForeground": "#007acc99",
-		//"editorOverviewRuler.selectionHighlightForeground": "#a0a0a0cc",
-		//"editorOverviewRuler.warningForeground": "#128812b3",
-		//"editorOverviewRuler.wordHighlightForeground": "#a0a0a0cc",
-		//"editorOverviewRuler.wordHighlightStrongForeground": "#c0a0c0cc",
-		//"editorPane.background": "#272727",
-		//"editorRuler.foreground": "#5a5a5a",
-		//"editorSuggestWidget.background": "#252526",
-		//"editorSuggestWidget.border": "#454545",
-		//"editorSuggestWidget.foreground": "#cccccc",
-		//"editorSuggestWidget.highlightForeground": "#0097fb",
-		//"editorSuggestWidget.selectedBackground": "#062f4a",
-		//"editorUnnecessaryCode.opacity": "#000000aa",
-		//"editorWarning.foreground": "#4d9e4d",
-		//"editorWidget.background": "#252526",
-		//"editorWidget.border": "#454545",
-		//"errorForeground": "#f48771",
-		//"extensionButton.prominentBackground": "#327e36",
-		//"extensionButton.prominentForeground": "#ffffff",
-		//"extensionButton.prominentHoverBackground": "#28632b",
-		//"focusBorder": "#0e639ccc",
-		//"foreground": "#cccccc",
-		//"gitDecoration.addedResourceForeground": "#81b88b",
-		//"gitDecoration.conflictingResourceForeground": "#6c6cc4",
-		//"gitDecoration.deletedResourceForeground": "#c74e39",
-		//"gitDecoration.ignoredResourceForeground": "#8c8c8c",
-		//"gitDecoration.modifiedResourceForeground": "#e2c08d",
-		//"gitDecoration.submoduleResourceForeground": "#8db9e2",
-		//"gitDecoration.untrackedResourceForeground": "#73c991",
-		//"input.background": "#3c3c3c",
-		//"input.foreground": "#cccccc",
-		//"input.placeholderForeground": "#cccccc80",
-		//"inputOption.activeBorder": "#007acc",
-		//"inputValidation.errorBackground": "#5a1d1d",
-		//"inputValidation.errorBorder": "#be1100",
-		//"inputValidation.infoBackground": "#063b49",
-		//"inputValidation.infoBorder": "#007acc",
-		//"inputValidation.warningBackground": "#352a05",
-		//"inputValidation.warningBorder": "#b89500",
-		//"list.activeSelectionBackground": "#094771",
-		//"list.activeSelectionForeground": "#ffffff",
-		//"list.dropBackground": "#062f4a",
-		//"list.errorForeground": "#f88070",
-		//"list.focusBackground": "#062f4a",
-		//"list.highlightForeground": "#0097fb",
-		//"list.hoverBackground": "#2a2d2e",
-		//"list.inactiveFocusBackground": "#313135",
-		//"list.inactiveSelectionBackground": "#37373d",
-		//"list.invalidItemForeground": "#b89500",
-		//"list.warningForeground": "#4d9e4d",
-		//"menu.background": "#3c3c3c",
-		//"menu.foreground": "#f0f0f0",
-		//"menu.selectionBackground": "#094771",
-		//"menu.selectionForeground": "#ffffff",
-		//"menu.separatorBackground": "#bbbbbb",
-		//"menubar.selectionBackground": "#ffffff1a",
-		//"menubar.selectionForeground": "#cccccc",
-		//"merge.commonContentBackground": "#60606029",
-		//"merge.commonHeaderBackground": "#60606066",
-		//"merge.currentContentBackground": "#40c8ae33",
-		//"merge.currentHeaderBackground": "#40c8ae80",
-		//"merge.incomingContentBackground": "#40a6ff33",
-		//"merge.incomingHeaderBackground": "#40a6ff80",
-		//"notificationCenterHeader.background": "#303031",
-		//"notificationLink.foreground": "#3794ff",
-		//"notifications.background": "#252526",
-		//"notifications.border": "#303031",
-		//"panel.background": "#272727",
-		//"panel.border": "#80808059",
-		//"panel.dropBackground": "#ffffff1f",
-		//"panelTitle.activeBorder": "#80808059",
-		//"panelTitle.activeForeground": "#e7e7e7",
-		//"panelTitle.inactiveForeground": "#e7e7e799",
-		//"peekView.border": "#007acc",
-		//"peekViewEditor.background": "#001f33",
-		//"peekViewEditor.matchHighlightBackground": "#ff8f0099",
-		//"peekViewEditorGutter.background": "#001f33",
-		//"peekViewResult.background": "#252526",
-		//"peekViewResult.fileForeground": "#ffffff",
-		//"peekViewResult.lineForeground": "#bbbbbb",
-		//"peekViewResult.matchHighlightBackground": "#ea5c004d",
-		//"peekViewResult.selectionBackground": "#3399ff33",
-		//"peekViewResult.selectionForeground": "#ffffff",
-		//"peekViewTitle.background": "#1e1e1e",
-		//"peekViewTitleDescription.foreground": "#ccccccb3",
-		//"peekViewTitleLabel.foreground": "#ffffff",
-		//"pickerGroup.border": "#3f3f46",
-		//"pickerGroup.foreground": "#3794ff",
-		//"progressBar.background": "#0e70c0",
-		//"scrollbar.shadow": "#000000",
-		//"scrollbarSlider.activeBackground": "#bfbfbf66",
-		//"scrollbarSlider.background": "#79797966",
-		//"scrollbarSlider.hoverBackground": "#646464b3",
-		//"settings.checkboxBackground": "#3c3c3c",
-		//"settings.checkboxBorder": "#3c3c3c",
-		//"settings.checkboxForeground": "#f0f0f0",
-		//"settings.dropdownBackground": "#3c3c3c",
-		//"settings.dropdownBorder": "#3c3c3c",
-		//"settings.dropdownForeground": "#f0f0f0",
-		//"settings.dropdownListBorder": "#454545",
-		//"settings.headerForeground": "#e7e7e7",
-		//"settings.modifiedItemIndicator": "#0c7d9d",
-		//"settings.numberInputBackground": "#3c3c3c",
-		//"settings.numberInputForeground": "#cccccc",
-		//"settings.textInputBackground": "#3c3c3c",
-		//"settings.textInputForeground": "#cccccc",
-		//"sideBar.background": "#252526",
-		//"sideBar.dropBackground": "#ffffff1f",
-		//"sideBarSectionHeader.background": "#80808033",
-		//"statusBar.background": "#007acc",
-		//"statusBar.debuggingBackground": "#cc6633",
-		//"statusBar.debuggingForeground": "#ffffff",
-		//"statusBar.foreground": "#ffffff",
-		//"statusBar.noFolderBackground": "#68217a",
-		//"statusBar.noFolderForeground": "#ffffff",
-		//"statusBarItem.activeBackground": "#ffffff2e",
-		//"statusBarItem.hoverBackground": "#ffffff1f",
-		//"statusBarItem.prominentBackground": "#388a34",
-		//"statusBarItem.prominentHoverBackground": "#369432",
-		//"tab.activeBackground": "#272727",
-		//"tab.activeForeground": "#ffffff",
-		//"tab.border": "#252526",
-		//"tab.inactiveBackground": "#2d2d2d",
-		//"tab.inactiveForeground": "#ffffff80",
-		//"tab.unfocusedActiveForeground": "#ffffff80",
-		//"tab.unfocusedInactiveForeground": "#ffffff40",
-		//"terminal.ansiBlack": "#000000",
-		//"terminal.ansiBlue": "#2472c8",
-		//"terminal.ansiBrightBlack": "#666666",
-		//"terminal.ansiBrightBlue": "#3b8eea",
-		//"terminal.ansiBrightCyan": "#29b8db",
-		//"terminal.ansiBrightGreen": "#23d18b",
-		//"terminal.ansiBrightMagenta": "#d670d6",
-		//"terminal.ansiBrightRed": "#f14c4c",
-		//"terminal.ansiBrightWhite": "#e5e5e5",
-		//"terminal.ansiBrightYellow": "#f5f543",
-		//"terminal.ansiCyan": "#11a8cd",
-		//"terminal.ansiGreen": "#0dbc79",
-		//"terminal.ansiMagenta": "#bc3fbc",
-		//"terminal.ansiRed": "#cd3131",
-		//"terminal.ansiWhite": "#e5e5e5",
-		//"terminal.ansiYellow": "#e5e510",
-		//"terminal.background": "#272727",
-		//"terminal.border": "#80808059",
-		//"terminal.foreground": "#cccccc",
-		//"terminal.selectionBackground": "#ffffff40",
-		//"textBlockQuote.background": "#7f7f7f1a",
-		//"textBlockQuote.border": "#007acc80",
-		//"textCodeBlock.background": "#0a0a0a66",
-		//"textLink.activeForeground": "#3794ff",
-		//"textLink.foreground": "#3794ff",
-		//"textPreformat.foreground": "#d7ba7d",
-		//"textSeparator.foreground": "#ffffff2e",
-		//"titleBar.activeBackground": "#3c3c3c",
-		//"titleBar.activeForeground": "#cccccc",
-		//"titleBar.inactiveBackground": "#3c3c3c99",
-		//"titleBar.inactiveForeground": "#cccccc99",
-		//"widget.shadow": "#000000"
-	},
-	"tokenColors": [
-		{
-			"name": "Comment",
-			"scope": "comment",
-			"settings": {
-				"fontStyle": "italic",
-				"foreground": "#1ABFCF"
-			}
-		},
-		{
-			"name": "Constant",
-			"scope": "constant",
-			"settings": {
-				"foreground": "#B781A1"
-			}
-		},
-		{
-			"name": "Entity",
-			"scope": "entity",
-			"settings": {
-				"fontStyle": "",
-				"foreground": "#cececbff"
-			}
-		},
-		{
-			"name": "Keyword",
-			"scope": "keyword",
-			"settings": {
-				"foreground": "#CFD572"
-			}
-		},
-		{
-			"name": "Storage",
-			"scope": "storage",
-			"settings": {
-				"fontStyle": "",
-				"foreground": "#ced572e7"
-			}
-		},
-		{
-			"name": "String",
-			"scope": "string",
-			"settings": {
-				"fontStyle": "",
-				"foreground": "#FFA1A1"
-			}
-		},
-		{
-			"name": "Support",
-			"scope": "support",
-			"settings": {
-				"fontStyle": "",
-				"foreground": "#F6DDB0"
-			}
-		},
-		{
-			"name": "Variable",
-			"scope": "variable",
-			"settings": {
-				"foreground": "#d0cccc"
-			}
-		},
-		{
-			"name": "Invalid – Deprecated",
-			"scope": "invalid.deprecated",
-			"settings": {
-				"fontStyle": "italic underline",
-				"foreground": "#d4a8a1ff"
-			}
-		},
-		{
-			"name": "Invalid – Illegal",
-			"scope": "invalid.illegal",
-			"settings": {
-				"background": "#582c58bf",
-				"foreground": "#fafafaff"
-			}
-		},
-		{
-			"name": "♦ Embedded Source",
-			"scope": "text source",
-			"settings": {
-				"background": "#b0b4bc14",
-				"foreground": "#87cfeeff"
-			}
-		},
-		{
-			"name": "♦ Embedded Source (Bright)",
-			"scope": "text.html.ruby source",
-			"settings": {
-				"background": "#b1b4bc21"
-			}
-		},
-		{
-			"name": "♦ Entity inherited-class",
-			"scope": "entity.other.inherited-class",
-			"settings": {
-				"fontStyle": "italic",
-				"foreground": "#B39545"
-			}
-		},
-		{
-			"name": "♦ String embedded-source",
-			"scope": "string source",
-			"settings": {
-				"fontStyle": "",
-				"foreground": "#76f1c7ff"
-			}
-		},
-		{
-			"name": "♦ String constant",
-			"scope": "string constant",
-			"settings": {
-				"foreground": "#def5a4ff"
-			}
-		},
-		{
-			"name": "♦ String.regexp",
-			"scope": "string.regexp",
-			"settings": {
-				"fontStyle": "",
-				"foreground": "#fd8072ff"
-			}
-		},
-		{
-			"name": "♦ String.regexp.«special»",
-			"scope": "string.regexp constant.character.escape, string.regexp source.ruby.embedded, string.regexp string.regexp.arbitrary-repitition",
-			"settings": {
-				"foreground": "#ffa650ff"
-			}
-		},
-		{
-			"name": "♦ String variable",
-			"scope": "string variable",
-			"settings": {
-				"foreground": "#8a9c96ff"
-			}
-		},
-		{
-			"name": "♦ Support.function",
-			"scope": "support.function",
-			"settings": {
-				"fontStyle": "",
-				"foreground": "#CCBE94"
-			}
-		},
-		{
-			"name": "♦ Support.constant",
-			"scope": "support.constant",
-			"settings": {
-				"fontStyle": " italic",
-				"foreground": "#CCBE94"
-			}
-		},
-		{
-			"name": "c C/C++ Preprocessor Line",
-			"scope": "meta.preprocessor.c",
-			"settings": {
-				"foreground": "#8997aaff"
-			}
-		},
-		{
-			"name": "c C/C++ Preprocessor Directive",
-			"scope": "meta.preprocessor.c keyword",
-			"settings": {
-				"foreground": "#87cfeeff"
-			}
-		},
-		{
-			"name": "✘ Doctype/XML Processing",
-			"scope": "meta.tag.sgml.doctype, meta.tag.sgml.doctype entity, meta.tag.sgml.doctype string, meta.tag.preprocessor.xml, meta.tag.preprocessor.xml entity, meta.tag.preprocessor.xml string",
-			"settings": {
-				"foreground": "#f1dd82ff"
-			}
-		},
-		{
-			"name": "✘ Meta.tag.«all»",
-			"scope": "declaration.tag, declaration.tag entity, meta.tag, meta.tag entity",
-			"settings": {
-				"foreground": "#87cfeeff"
-			}
-		},
-		{
-			"name": "✘ Meta.tag.inline",
-			"scope": "declaration.tag.inline, declaration.tag.inline entity, source entity.name.tag, source entity.other.attribute-name, meta.tag.inline, meta.tag.inline entity",
-			"settings": {
-				"foreground": "#87cfeeff"
-			}
-		},
-		{
-			"name": "§ css tag-name",
-			"scope": "meta.selector.css entity.name.tag",
-			"settings": {
-				"foreground": "#f1dd82ff"
-			}
-		},
-		{
-			"name": "§ css:pseudo-class",
-			"scope": "meta.selector.css entity.other.attribute-name.tag.pseudo-class",
-			"settings": {
-				"foreground": "#f179a0ff"
-			}
-		},
-		{
-			"name": "§ css#id",
-			"scope": "meta.selector.css entity.other.attribute-name.id",
-			"settings": {
-				"foreground": "#87cfeeff"
-			}
-		},
-		{
-			"name": "§ css.class",
-			"scope": "meta.selector.css entity.other.attribute-name.class",
-			"settings": {
-				"foreground": "#87cfeeff"
-			}
-		},
-		{
-			"name": "§ css property-name:",
-			"scope": "support.type.property-name.css",
-			"settings": {
-				"foreground": "#ffa650ff"
-			}
-		},
-		{
-			"name": "§ css property-value;",
-			"scope": "meta.property-group support.constant.property-value.css, meta.property-value support.constant.property-value.css",
-			"settings": {
-				"foreground": "#fcf098ff"
-			}
-		},
-		{
-			"name": "§ css @at-rule",
-			"scope": "meta.preprocessor.at-rule keyword.control.at-rule",
-			"settings": {
-				"foreground": "#8694a7ff"
-			}
-		},
-		{
-			"name": "§ css additional-constants",
-			"scope": "meta.property-value support.constant.named-color.css, meta.property-value constant",
-			"settings": {
-				"foreground": "#fd8072ff"
-			}
-		},
-		{
-			"name": "§ css constructor.argument",
-			"scope": "meta.constructor.argument.css",
-			"settings": {
-				"foreground": "#919f6aff"
-			}
-		},
-		{
-			"name": "⎇ diff.header",
-			"scope": "meta.diff, meta.diff.header, meta.separator",
-			"settings": {
-				"background": "#0e2231ff",
-				"fontStyle": "italic",
-				"foreground": "#fafafaff"
-			}
-		},
-		{
-			"name": "⎇ diff.deleted",
-			"scope": "markup.deleted",
-			"settings": {
-				"background": "#420e09ff",
-				"foreground": "#fafafaff"
-			}
-		},
-		{
-			"name": "⎇ diff.changed",
-			"scope": "markup.changed",
-			"settings": {
-				"background": "#4a410dff",
-				"foreground": "#fafafaff"
-			}
-		},
-		{
-			"name": "⎇ diff.inserted",
-			"scope": "markup.inserted",
-			"settings": {
-				"background": "#253b22ff",
-				"foreground": "#fafafaff"
-			}
-		},
-		{
-			"name": "Markup: List",
-			"scope": "markup.list",
-			"settings": {
-				"foreground": "#fcf098ff"
-			}
-		},
-		{
-			"name": "Markup: Heading",
-			"scope": "markup.heading",
-			"settings": {
-				"foreground": "#d16a4cff"
-			}
-		},
-		{
-			"name": "Go built-in function",
-			"scope": "support.function.built-in.go",
-			"settings": {
-				"foreground": "#f1dd82ff"
-			}
-		},
-		{
-			"name": "parenthesis",
-			"scope": "meta.brace.round",
-			"settings": {
-				"foreground": "#A4A6A6"
-			}
-		},
-		{
-			"name": "curly braces",
-			"scope": "punctuation.definition.block",
-			"settings": {
-				"foreground": "#A4A6A6"
-			}
-		},
-		{
-			"name": "comma",
-			"scope": "punctuation.separator.comma",
-			"settings": {
-				"foreground": "#A4A6A6"
-			}
-		},
-		{
-			"name": "left angle bracket",
-			"scope": "punctuation.definition.typeparameters.begin",
-			"settings": {
-				"foreground": "#A4A6A6"
-			}
-		},
-		{
-			"name": "right angle bracket",
-			"scope": "punctuation.definition.typeparameters.end",
-			"settings": {
-				"foreground": "#A4A6A6"
-			}
-		},
-		{
-			"name": "params open",
-			"scope": "punctuation.definition.parameters.begin",
-			"settings": {
-				"foreground": "#A4A6A6"
-			}
-		},
-		{
-			"name": "params close",
-			"scope": "punctuation.definition.parameters.end",
-			"settings": {
-				"foreground": "#A4A6A6"
-			}
-		},
-		{
-			"name": "definition tag begin",
-			"scope": "punctuation.definition.tag.begin",
-			"settings": {
-				"foreground": "#A4A6A6"
-			}
-		},
-		{
-			"name": "definition tag end",
-			"scope": "punctuation.definition.tag.end",
-			"settings": {
-				"foreground": "#A4A6A6"
-			}
-		},
-		{
-			"name": "punctuation section embedded tag begin",
-			"scope": "punctuation.section.embedded.begin",
-			"settings": {
-				"foreground": "#A4A6A6"
-			}
-		},
-		{
-			"name": "punctuation section embedded tag end",
-			"scope": "punctuation.section.embedded",
-			"settings": {
-				"foreground": "#A4A6A6"
-			}
-		},
-		{
-			"name": "punctuation definition parameters begin",
-			"scope": "punctuation.definition.parameters.begin",
-			"settings": {
-				"foreground": "#A4A6A6"
-			}
-		},
-		{
-			"name": "punctuation definition parameters end",
-			"scope": "punctuation.definition.parameters.end",
-			"settings": {
-				"foreground": "#A4A6A6"
-			}
-		},
-		{
-			"name": "function call",
-			"scope": "meta.function-call.ts",
-			"settings": {
-				"foreground": "#cececbff"
-			}
-		},
-		{
-			"name": "type name",
-			"scope": "entity.name.class",
-			"settings": {
-				"fontStyle": "italic",
-				"foreground": "#B39545"
-			}
-		},
-		{
-			"name": "go template template block",
-			"scope": "punctuation.section.embedded.begin.gotemplate",
-			"settings": {
-				"foreground": "#def5a4ff"
-			}
-		},
-		{
-			"name": "go template template block",
-			"scope": "punctuation.section.embedded.end.gotemplate",
-			"settings": {
-				"foreground": "#def5a4ff"
-			}
-		},
-		{
-			"name": "html attribute",
-			"scope": "entity.other.attribute-name.html",
-			"settings": {
-				"foreground": "#eedd65ff"
-			}
-		},
-		{
-			"name": "typescript entity jsx attribute name",
-			"scope": "entity.other.attribute-name.tsx",
-			"settings": {
-				"foreground": "#ccbe94"
-			}
-		},
-		{
-			"name": "typescript type parameters",
-			"scope": "entity.name.type",
-			"settings": {
-				"foreground": "#b39545ff"
-			}
-		},
-		{
-			"name": "typescript type parameters",
-			"scope": "entity.name.function",
-			"settings": {
-				"foreground": "#9fcb9d"
-			}
-		},
-		{
-			"name": "typescript type alias",
-			"scope": "entity.name.type.alias",
-			"settings": {
-				"foreground": "#f6ddb0ff"
-			}
-		},
-		{
-			"name": "typescript type interface",
-			"scope": "entity.name.type.interface",
-			"settings": {
-				"foreground": "#f6ddb0ff"
-			}
-		},
-		{
-			"name": "typescript other constant",
-			"scope": "variable.other.constant",
-			"settings": {
-				"foreground": "#f6ddb0ff"
-			}
-		},
-		{
-			"name": "typescript other constant object",
-			"scope": "variable.other.constant.object",
-			"settings": {
-				"foreground": "#9cb8bbff"
-			}
-		},
-		{
-			"name": "typescript other object",
-			"scope": "variable.other.object",
-			"settings": {
-				"foreground": "#acbdbf"
-			}
-		},
-		{
-			"name": "typescript other object property",
-			"scope": "variable.other.object.property",
-			"settings": {
-				"foreground": "#9cb8bbff"
-			}
-		},
-		{
-			"name": "typescript other object property",
-			"scope": "meta.object-literal.key",
-			"settings": {
-				"foreground": "#d0cccc"
-			}
-		},
-		{
-			"name": "typescript name tag tsx",
-			"scope": "entity.name.tag.tsx",
-			"settings": {
-				"foreground": "#f6ddb0ff"
-			}
-		},
-		{
-			"scope": "token.info-token",
-			"settings": {
-				"foreground": "#6796e6"
-			}
-		},
-		{
-			"scope": "token.warn-token",
-			"settings": {
-				"foreground": "#cd9731"
-			}
-		},
-		{
-			"scope": "token.error-token",
-			"settings": {
-				"foreground": "#f44747"
-			}
-		},
-		{
-			"scope": "token.debug-token",
-			"settings": {
-				"foreground": "#b267e6"
-			}
-		}
-	]
-}

From 7bd63e89c5969c74cda786a414e3c2748b65830f Mon Sep 17 00:00:00 2001
From: Hunter Johnston <johnstonhuntera@gmail.com>
Date: Fri, 17 Nov 2023 20:55:20 -0500
Subject: [PATCH 040/217] focus styles

---
 .prettierrc                                   |  9 +--
 package.json                                  |  1 +
 pnpm-lock.yaml                                | 59 +++++++++++++++++++
 src/components/demos/alert-dialog-demo.svelte | 20 +++----
 src/components/demos/dialog-demo.svelte       | 30 ++++++----
 .../navigation/sidebar-nav-items.svelte       | 12 ++--
 .../navigation/sidebar-nav-main-items.svelte  |  4 +-
 src/components/navigation/sidebar-nav.svelte  |  8 +--
 src/components/site-header.svelte             | 26 ++++----
 src/routes/+layout.svelte                     | 19 ++++--
 src/styles/buttonVariants.ts                  | 36 +++++++++++
 tailwind.config.ts                            |  1 -
 12 files changed, 172 insertions(+), 53 deletions(-)
 create mode 100644 src/styles/buttonVariants.ts

diff --git a/.prettierrc b/.prettierrc
index 1f6ac73f8..f1027ced4 100644
--- a/.prettierrc
+++ b/.prettierrc
@@ -3,18 +3,19 @@
     "singleQuote": false,
     "trailingComma": "none",
     "printWidth": 100,
-    "plugins": [
-        "prettier-plugin-svelte"
-    ],
     "pluginSearchDirs": [
         "."
     ],
+    "plugins": [
+        "prettier-plugin-svelte",
+        "prettier-plugin-tailwindcss"
+    ],
     "overrides": [
         {
             "files": "*.svelte",
             "options": {
                 "parser": "svelte",
-                "printWidth": 100
+                "printWidth": 80
             }
         },
         {
diff --git a/package.json b/package.json
index 78996ec5b..664d3a805 100644
--- a/package.json
+++ b/package.json
@@ -68,6 +68,7 @@
 		"postcss-load-config": "^4.0.1",
 		"prettier": "^2.8.8",
 		"prettier-plugin-svelte": "^2.10.1",
+		"prettier-plugin-tailwindcss": "0.2.7",
 		"publint": "^0.2.5",
 		"radix-icons-svelte": "^1.2.1",
 		"rehype-pretty-code": "^0.10.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 2945fd3ab..a6a730253 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -118,6 +118,9 @@ devDependencies:
   prettier-plugin-svelte:
     specifier: ^2.10.1
     version: 2.10.1(prettier@2.8.8)(svelte@4.2.3)
+  prettier-plugin-tailwindcss:
+    specifier: 0.2.7
+    version: 0.2.7(prettier-plugin-svelte@2.10.1)(prettier@2.8.8)
   publint:
     specifier: ^0.2.5
     version: 0.2.5
@@ -5967,6 +5970,62 @@ packages:
       svelte: 4.2.3
     dev: true
 
+  /prettier-plugin-tailwindcss@0.2.7(prettier-plugin-svelte@2.10.1)(prettier@2.8.8):
+    resolution: {integrity: sha512-jQopIOgjLpX+y8HeD56XZw7onupRTC0cw7eKKUimI7vhjkPF5/1ltW5LyqaPtSyc8HvEpvNZsvvsGFa2qpa59w==}
+    engines: {node: '>=12.17.0'}
+    peerDependencies:
+      '@ianvs/prettier-plugin-sort-imports': '*'
+      '@prettier/plugin-php': '*'
+      '@prettier/plugin-pug': '*'
+      '@shopify/prettier-plugin-liquid': '*'
+      '@shufo/prettier-plugin-blade': '*'
+      '@trivago/prettier-plugin-sort-imports': '*'
+      prettier: '>=2.2.0'
+      prettier-plugin-astro: '*'
+      prettier-plugin-css-order: '*'
+      prettier-plugin-import-sort: '*'
+      prettier-plugin-jsdoc: '*'
+      prettier-plugin-organize-attributes: '*'
+      prettier-plugin-organize-imports: '*'
+      prettier-plugin-style-order: '*'
+      prettier-plugin-svelte: '*'
+      prettier-plugin-twig-melody: '*'
+    peerDependenciesMeta:
+      '@ianvs/prettier-plugin-sort-imports':
+        optional: true
+      '@prettier/plugin-php':
+        optional: true
+      '@prettier/plugin-pug':
+        optional: true
+      '@shopify/prettier-plugin-liquid':
+        optional: true
+      '@shufo/prettier-plugin-blade':
+        optional: true
+      '@trivago/prettier-plugin-sort-imports':
+        optional: true
+      prettier-plugin-astro:
+        optional: true
+      prettier-plugin-css-order:
+        optional: true
+      prettier-plugin-import-sort:
+        optional: true
+      prettier-plugin-jsdoc:
+        optional: true
+      prettier-plugin-organize-attributes:
+        optional: true
+      prettier-plugin-organize-imports:
+        optional: true
+      prettier-plugin-style-order:
+        optional: true
+      prettier-plugin-svelte:
+        optional: true
+      prettier-plugin-twig-melody:
+        optional: true
+    dependencies:
+      prettier: 2.8.8
+      prettier-plugin-svelte: 2.10.1(prettier@2.8.8)(svelte@4.2.3)
+    dev: true
+
   /prettier@2.8.8:
     resolution: {integrity: sha512-tdN8qQGvNjw4CHbY+XXk0JgCXn9QiF21a55rBe5LJAU+kDyC4WQn4+awm2Xfk2lQMk5fKup9XgzTZtGkjBdP9Q==}
     engines: {node: '>=10.13.0'}
diff --git a/src/components/demos/alert-dialog-demo.svelte b/src/components/demos/alert-dialog-demo.svelte
index 9fd68170b..e786674ee 100644
--- a/src/components/demos/alert-dialog-demo.svelte
+++ b/src/components/demos/alert-dialog-demo.svelte
@@ -9,9 +9,9 @@
 	<AlertDialog.Trigger asChild let:builder>
 		<Button.Root
 			builders={[builder]}
-			class="rounded-input h-12 text-[15px] font-semibold px-[21px] inline-flex
-		items-center justify-center bg-dark text-background hover:button-gradient
-		shadow-mini transition-all"
+			class="inline-flex h-12 items-center
+		justify-center whitespace-nowrap rounded-input bg-dark px-[21px]
+		text-[15px] font-semibold text-background shadow-mini ring-dark ring-offset-background transition-colors hover:bg-foreground/80 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-dark focus-visible:ring-offset-2 focus-visible:ring-offset-background"
 		>
 			Subscribe
 		</Button.Root>
@@ -24,24 +24,24 @@
 		/>
 		<AlertDialog.Content
 			transition={flyAndScale}
-			class="fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-7 rounded-card-lg md:w-full outline-none shadow-popover"
+			class="fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 rounded-card-lg border bg-background p-7 shadow-popover outline-none md:w-full"
 		>
 			<div class="flex flex-col gap-4 pb-6">
-				<AlertDialog.Title class="font-semibold text-lg tracking-tight"
+				<AlertDialog.Title class="text-lg font-semibold tracking-tight"
 					>Confirm your transaction</AlertDialog.Title
 				>
-				<AlertDialog.Description class="text-foreground-alt text-sm">
-					This action cannot be undone. This will initiate a monthly wire in the amount of $10,000
-					to Huntabyte. Do you wish to continue?
+				<AlertDialog.Description class="text-sm text-foreground-alt">
+					This action cannot be undone. This will initiate a monthly wire in the
+					amount of $10,000 to Huntabyte. Do you wish to continue?
 				</AlertDialog.Description>
 			</div>
 			<div class="flex w-full items-center justify-center gap-2">
 				<AlertDialog.Cancel
-					class="h-input rounded-input inline-flex items-center justify-center w-full shadow-mini bg-muted font-medium text-[15px]"
+					class="inline-flex h-input w-full items-center justify-center rounded-input bg-muted text-[15px] font-medium shadow-mini"
 					>Cancel</AlertDialog.Cancel
 				>
 				<AlertDialog.Action
-					class="h-input rounded-input bg-dark inline-flex items-center justify-center w-full shadow-mini text-background font-semibold text-[15px]"
+					class="inline-flex h-input w-full items-center justify-center rounded-input bg-dark text-[15px] font-semibold text-background shadow-mini"
 					>Continue</AlertDialog.Action
 				>
 			</div>
diff --git a/src/components/demos/dialog-demo.svelte b/src/components/demos/dialog-demo.svelte
index a27438058..c27e2395d 100644
--- a/src/components/demos/dialog-demo.svelte
+++ b/src/components/demos/dialog-demo.svelte
@@ -9,9 +9,9 @@
 	<Dialog.Trigger asChild let:builder>
 		<Button.Root
 			builders={[builder]}
-			class="rounded-input h-12 text-[15px] font-semibold px-[21px] inline-flex
-		items-center justify-center bg-dark text-background hover:button-gradient
-		shadow-mini transition-all"
+			class="inline-flex h-12 items-center
+			justify-center whitespace-nowrap rounded-input bg-dark px-[21px]
+			text-[15px] font-semibold text-background shadow-mini ring-dark ring-offset-background transition-colors hover:bg-foreground/80 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-dark focus-visible:ring-offset-2 focus-visible:ring-offset-background"
 		>
 			Subscribe
 		</Button.Root>
@@ -24,22 +24,24 @@
 		/>
 		<Dialog.Content
 			transition={flyAndScale}
-			class="fixed left-[50%] top-[50%] z-50 w-full max-w-[490px] translate-x-[-50%] translate-y-[-50%] border bg-background p-5 rounded-card-lg md:w-full outline-none shadow-popover"
+			class="fixed left-[50%] top-[50%] z-50 w-full max-w-[490px] translate-x-[-50%] translate-y-[-50%] rounded-card-lg border bg-background p-5 shadow-popover outline-none md:w-full"
 		>
 			<Dialog.Title
-				class="font-semibold text-lg tracking-tight flex w-full justify-center items-center"
+				class="flex w-full items-center justify-center text-lg font-semibold tracking-tight"
 				>Create API key</Dialog.Title
 			>
-			<Separator.Root class="-mx-5 block bg-muted h-px mt-5 mb-6" />
-			<Dialog.Description class="text-foreground-alt text-sm">
-				Create and manage API keys. You can create multiple keys to organize your applications.
+			<Separator.Root class="-mx-5 mb-6 mt-5 block h-px bg-muted" />
+			<Dialog.Description class="text-sm text-foreground-alt">
+				Create and manage API keys. You can create multiple keys to organize
+				your applications.
 			</Dialog.Description>
-			<div class="flex flex-col items-start pt-7 gap-1 pb-11">
-				<Label.Root for="apiKey" class="text-sm font-medium">API Key</Label.Root>
+			<div class="flex flex-col items-start gap-1 pb-11 pt-7">
+				<Label.Root for="apiKey" class="text-sm font-medium">API Key</Label.Root
+				>
 				<div class="relative w-full">
 					<input
 						id="apiKey"
-						class="h-input rounded-card-sm border border-dark-10 bg-background w-full focus:outline-none focus:ring-2 ring-muted px-4 inline-flex items-center placeholder:text-foreground-alt/50 text-sm"
+						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-visible:outline-none focus-visible:ring-2 focus-visible:ring-muted focus-visible:ring-offset-2 focus-visible:ring-offset-background"
 						placeholder="secret_api_key"
 						type="password"
 						autocomplete="off"
@@ -49,12 +51,14 @@
 			</div>
 			<div class="flex w-full justify-end">
 				<Dialog.Close
-					class="h-input rounded-input bg-dark inline-flex items-center justify-center shadow-mini text-background font-semibold text-[15px] px-[50px] hover:button-gradient"
+					class="hover:button-gradient inline-flex h-input items-center justify-center rounded-input bg-dark px-[50px] text-[15px] font-semibold text-background shadow-mini focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-dark focus-visible:ring-offset-2 focus-visible:ring-offset-background"
 				>
 					Save
 				</Dialog.Close>
 			</div>
-			<Dialog.Close class="absolute right-5 top-5">
+			<Dialog.Close
+				class="absolute right-5 top-5 rounded-md focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground focus-visible:ring-offset-2 focus-visible:ring-offset-background"
+			>
 				<div>
 					<X class="h-5 w-5 text-foreground" />
 					<span class="sr-only">Close</span>
diff --git a/src/components/navigation/sidebar-nav-items.svelte b/src/components/navigation/sidebar-nav-items.svelte
index ec2833009..4bf36df2d 100644
--- a/src/components/navigation/sidebar-nav-items.svelte
+++ b/src/components/navigation/sidebar-nav-items.svelte
@@ -7,15 +7,19 @@
 </script>
 
 {#if items.length}
-	<div class="grid grid-flow-row auto-rows-max text-sm gap-1">
+	<div
+		class="grid grid-flow-row auto-rows-max gap-1 overflow-x-visible pl-4 text-sm"
+	>
 		{#each items as item, index (index)}
 			{#if item.href}
 				<a
 					href={item.href}
 					class={cn(
-						"group flex w-full items-center rounded-md text-foreground py-1.5 px-2.5 hover:bg-muted transition-all",
-						item.disabled && "cursor-not-allowed opacity-60",
-						$page.url.pathname === item.href ? "bg-muted" : ""
+						"group inline-flex w-full items-center overflow-x-visible rounded-md px-2.5 py-1.5 text-foreground transition-colors hover:bg-muted/50 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-foreground focus-visible:ring-offset-1 focus-visible:ring-offset-background",
+						item.disabled && "cursor-not-allowed opacity-60 ",
+						$page.url.pathname === item.href
+							? "bg-muted focus-visible:ring-muted"
+							: ""
 					)}
 					target={item.external ? "_blank" : ""}
 					rel={item.external ? "noreferrer" : ""}
diff --git a/src/components/navigation/sidebar-nav-main-items.svelte b/src/components/navigation/sidebar-nav-main-items.svelte
index 8f478a6dc..01745038a 100644
--- a/src/components/navigation/sidebar-nav-main-items.svelte
+++ b/src/components/navigation/sidebar-nav-main-items.svelte
@@ -20,13 +20,13 @@
 </script>
 
 {#if items.length}
-	<div class="grid grid-flow-row auto-rows-max text-sm pb-8 gap-1">
+	<div class="grid grid-flow-row auto-rows-max gap-1 pb-8 pl-4 text-sm">
 		{#each items as item, index (index)}
 			{#if item.href}
 				<a
 					href={item.href}
 					class={cn(
-						"group flex w-full items-center rounded-md py-1.5 px-2.5 text-sm text-foreground font-semibold gap-2.5 hover:bg-muted transition-all",
+						"group flex w-full items-center gap-2.5 rounded-md px-2.5 py-1.5 text-sm font-semibold text-foreground transition-all hover:bg-muted",
 						$page.url.pathname === item.href ? "bg-muted" : "bg-transparent"
 					)}
 					target={item.external ? "_blank" : ""}
diff --git a/src/components/navigation/sidebar-nav.svelte b/src/components/navigation/sidebar-nav.svelte
index afcb5a256..190c1673a 100644
--- a/src/components/navigation/sidebar-nav.svelte
+++ b/src/components/navigation/sidebar-nav.svelte
@@ -6,18 +6,18 @@
 
 {#if items.length}
 	<aside
-		class="fixed top-10 z-30 hidden h-[calc(100vh-3.5rem)] w-full shrink-0 md:sticky md:block overflow-y-auto border-r border-border"
+		class="fixed top-10 z-30 hidden h-[calc(100vh-3.5rem)] w-full shrink-0 overflow-y-auto border-r border-border md:sticky md:block"
 	>
-		<div class="h-full py-6 lg:py-8 pr-4">
+		<div class="h-full py-6 pr-4 lg:py-8">
 			<nav class="space-y-3">
-				<div class="flex flex-col w-full">
+				<div class="flex w-full flex-col">
 					{#each items as item, index (index)}
 						{#if item.title === "Overview"}
 							<SidebarNavMainItems items={item.items} />
 						{:else}
 							<div class="pb-4">
 								<h4
-									class="mb-1 rounded-md py-2 px-2.5 text-sm font-normal uppercase text-muted-foreground"
+									class="mb-1 rounded-md px-2.5 py-2 pl-4 text-sm font-normal uppercase text-muted-foreground"
 								>
 									{item.title}
 								</h4>
diff --git a/src/components/site-header.svelte b/src/components/site-header.svelte
index 5efbd1f2d..c8e9f042d 100644
--- a/src/components/site-header.svelte
+++ b/src/components/site-header.svelte
@@ -1,27 +1,33 @@
 <script lang="ts">
-	import { Button } from "@/components/ui/button";
+	import { Button } from "$lib";
 	import { LightSwitch, MobileNav } from "@/components";
 	import { siteConfig } from "@/config";
 </script>
 
-<header class="bg-background/75 backdrop-blur border-b border-border -mb-px sticky top-0 z-50">
-	<div class="container">
-		<div class="flex items-center justify-between gap-3 h-[70px]">
+<header
+	class="sticky top-0 z-50 -mb-px border-b border-border bg-background/75 backdrop-blur"
+>
+	<div class="container px-4">
+		<div class="flex h-[70px] items-center justify-between gap-3">
 			<div class="flex items-center gap-1.5">
 				<MobileNav />
-				<a href="/" class="font-bold tracking-tight text-2xl underline underline-offset-4">bits</a>
+				<a
+					href="/"
+					class="text-2xl font-bold tracking-tight underline underline-offset-4"
+					>bits</a
+				>
 			</div>
 			<div class="flex items-center justify-end gap-5">
-				<Button
+				<Button.Root
 					href={siteConfig.links.github}
 					target="_blank"
 					rel="noopener noreferrer"
-					size="lg"
-					aria-label="View the github repo for this package."
-					class=""
+					class="inline-flex h-10 items-center
+					justify-center whitespace-nowrap rounded-[9px] bg-muted px-4
+					text-sm font-semibold text-foreground shadow-mini ring-offset-background transition-colors hover:bg-muted/90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-muted focus-visible:ring-offset-2 focus-visible:ring-offset-background"
 				>
 					Report an issue
-				</Button>
+				</Button.Root>
 				<LightSwitch />
 			</div>
 		</div>
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 2948ef452..bbafb5022 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -1,6 +1,11 @@
 <script lang="ts">
 	import { dev } from "$app/environment";
-	import { SidebarNav, SiteHeader, TableOfContents, TailwindIndicator } from "@/components";
+	import {
+		SidebarNav,
+		SiteHeader,
+		TableOfContents,
+		TailwindIndicator
+	} from "@/components";
 	import { navigation } from "@/config";
 	import { ModeWatcher } from "mode-watcher";
 	import "@/styles/app.postcss";
@@ -9,24 +14,28 @@
 <ModeWatcher />
 
 <SiteHeader />
-<main class="min-h-[calc(100vh-64px)]">
+<div class="min-h-[calc(100vh-64px)]">
 	<div
 		class="container flex-1 items-start md:grid md:grid-cols-[220px_minmax(0,1fr)] md:gap-6 lg:grid-cols-[220px_minmax(0,1fr)] lg:gap-10"
 	>
 		<SidebarNav items={navigation.sidebar} />
-		<main class="relative pb-6 pt-16 lg:gap-10 xl:grid xl:grid-cols-[1fr_220px]">
+		<main
+			class="relative pb-6 pr-4 pt-16 lg:gap-10 xl:grid xl:grid-cols-[1fr_220px]"
+		>
 			<div class="mx-auto w-full min-w-0 max-w-[700px]" id="content">
 				<slot />
 			</div>
 
 			<div class="hidden text-sm xl:block">
-				<div class="sticky top-16 -mt-10 h-[calc(100vh-3.5rem)] overflow-hidden pt-6">
+				<div
+					class="sticky top-16 -mt-10 h-[calc(100vh-3.5rem)] overflow-hidden pt-6"
+				>
 					<TableOfContents />
 				</div>
 			</div>
 		</main>
 	</div>
-</main>
+</div>
 
 {#if dev}
 	<TailwindIndicator />
diff --git a/src/styles/buttonVariants.ts b/src/styles/buttonVariants.ts
new file mode 100644
index 000000000..d750c464c
--- /dev/null
+++ b/src/styles/buttonVariants.ts
@@ -0,0 +1,36 @@
+
+import { tv } from "tailwind-variants";
+
+/**
+ * hover:button-gradient inline-flex h-12 items-center justify-center rounded-input
+		bg-dark px-[21px] text-[15px] font-semibold text-background
+		shadow-mini outline-none ring-dark ring-offset-4 ring-offset-background transition-all focus:ring-1
+ */
+
+export const buttonVariants = tv({
+	base: "inline-flex items-center justify-center whitespace-nowrap ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
+	variants: {
+		variant: {
+			default: "bg-primary text-primary-foreground hover:bg-primary/90",
+			destructive:
+				"bg-destructive text-destructive-foreground hover:bg-destructive/90",
+			outline:
+				"border border-input bg-background hover:bg-accent hover:text-accent-foreground",
+			secondary:
+				"bg-secondary text-secondary-foreground hover:bg-secondary/80",
+			ghost: "hover:bg-accent hover:text-accent-foreground",
+			link: "text-primary underline-offset-4 hover:underline"
+		},
+		size: {
+			default: "h-12 px-[21px] py-4 text-[15px] rounded-[9px]",
+			sm: "h-8 rounded-md px-3", 
+			lg: "h-11 rounded-md px-8",
+			icon: "h-10 w-10"
+		}
+	},
+	defaultVariants: {
+		variant: "default",
+		size: "default"
+	}
+});
+
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 019fdf12a..8565f5ac7 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -9,7 +9,6 @@ export default {
 	theme: {
 		container: {
 			center: true,
-			padding: "1rem",
 			screens: {
 				"2xl": "1440px"
 			}

From 439e3d86230d147f58e3200009813d84aaa8783a Mon Sep 17 00:00:00 2001
From: Hunter Johnston <johnstonhuntera@gmail.com>
Date: Fri, 17 Nov 2023 20:57:01 -0500
Subject: [PATCH 041/217] alert dialog focus styles

---
 src/components/demos/alert-dialog-demo.svelte | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/demos/alert-dialog-demo.svelte b/src/components/demos/alert-dialog-demo.svelte
index e786674ee..618833a1c 100644
--- a/src/components/demos/alert-dialog-demo.svelte
+++ b/src/components/demos/alert-dialog-demo.svelte
@@ -37,11 +37,11 @@
 			</div>
 			<div class="flex w-full items-center justify-center gap-2">
 				<AlertDialog.Cancel
-					class="inline-flex h-input w-full items-center justify-center rounded-input bg-muted text-[15px] font-medium shadow-mini"
+					class="inline-flex h-input w-full items-center justify-center rounded-input bg-muted text-[15px] font-medium shadow-mini focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-muted focus-visible:ring-offset-2 focus-visible:ring-offset-background"
 					>Cancel</AlertDialog.Cancel
 				>
 				<AlertDialog.Action
-					class="inline-flex h-input w-full items-center justify-center rounded-input bg-dark text-[15px] font-semibold text-background shadow-mini"
+					class="inline-flex h-input w-full items-center justify-center rounded-input bg-dark text-[15px] font-semibold text-background shadow-mini focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-dark focus-visible:ring-offset-2 focus-visible:ring-offset-background"
 					>Continue</AlertDialog.Action
 				>
 			</div>

From 278303c2df0337dff7782283ae1aa465020cce5d Mon Sep 17 00:00:00 2001
From: Hunter Johnston <johnstonhuntera@gmail.com>
Date: Fri, 17 Nov 2023 21:13:27 -0500
Subject: [PATCH 042/217] checkbox demo

---
 src/components/component-preview.svelte       |  21 ++++++++-------
 src/components/demos/aspect-ratio-demo.svelte |   8 +++---
 src/components/demos/checkbox-demo.svelte     |  24 +++++++++++++++---
 static/abstract.png                           | Bin 0 -> 212896 bytes
 4 files changed, 36 insertions(+), 17 deletions(-)
 create mode 100644 static/abstract.png

diff --git a/src/components/component-preview.svelte b/src/components/component-preview.svelte
index 1435df5db..778291eae 100644
--- a/src/components/component-preview.svelte
+++ b/src/components/component-preview.svelte
@@ -21,22 +21,22 @@
 >
 	<Tabs.Root class="relative mr-auto w-full" let:value>
 		<Tabs.List
-			class="absolute z-20 top-2.5 right-2.5 flex items-center bg-black/8 dark:bg-white/8 px-[5px] h-input-sm rounded-card-sm justify-center shadow-mini-inset"
+			class="absolute right-2.5 top-2.5 z-20 flex h-input-sm items-center justify-center rounded-card-sm bg-black/8 px-[5px] shadow-mini-inset dark:bg-white/8"
 		>
 			<Tabs.Trigger
 				value="preview"
 				class={cn(
 					buttonVariants(),
 					value === "preview"
-						? "bg-transparent font-semibold shadow-mini hover:bg-opacity-90"
-						: "bg-transparent shadow-none hover:text-foreground-alt transition-all",
-					"relative"
+						? "font-semibold shadow-mini hover:bg-opacity-90"
+						: "shadow-none transition-all hover:text-foreground-alt",
+					"relative bg-transparent"
 				)}
 			>
 				<span class="z-20"> Preview </span>
 				{#if value === "preview"}
 					<div
-						class="h-8 w-full bg-background absolute top-0 left-0 rounded-[7px]"
+						class="absolute left-0 top-0 h-8 w-full rounded-[7px] bg-background"
 						in:send={{ key: "active" }}
 						out:receive={{ key: "active" }}
 					/>
@@ -48,14 +48,14 @@
 					buttonVariants(),
 					value === "code"
 						? "bg-transparent font-semibold shadow-mini hover:bg-opacity-90"
-						: "bg-transparent shadow-none hover:text-foreground-alt transition-all",
+						: "bg-transparent shadow-none transition-all hover:text-foreground-alt",
 					"relative"
 				)}
 			>
 				<span class="z-20"> &lt;Code&gt; </span>
 				{#if value === "code"}
 					<div
-						class="h-8 w-full bg-background absolute top-0 left-0 rounded-[7px]"
+						class="absolute left-0 top-0 h-8 w-full rounded-[7px] bg-background"
 						in:send={{ key: "active" }}
 						out:receive={{ key: "active" }}
 					/>
@@ -64,12 +64,15 @@
 		</Tabs.List>
 		<Tabs.Content value="code">
 			<div
-				class="w-full ![&_pre]:mt-0 [&_pre]:max-h-[443px] [&_pre]:min-h-[443px] [&_pre]:overflow-auto ![&_pre]:rounded-card"
+				class="![&_pre]:mt-0 ![&_pre]:rounded-card w-full [&_pre]:max-h-[443px] [&_pre]:min-h-[443px] [&_pre]:overflow-auto"
 			>
 				<slot />
 			</div>
 		</Tabs.Content>
-		<Tabs.Content value="preview" class="relative border-2 border-muted rounded-card">
+		<Tabs.Content
+			value="preview"
+			class="relative rounded-card border-2 border-muted"
+		>
 			<div
 				class={cn(
 					"preview flex min-h-[443px] w-full justify-center p-12",
diff --git a/src/components/demos/aspect-ratio-demo.svelte b/src/components/demos/aspect-ratio-demo.svelte
index cbb1f4f97..1cc6f5cf7 100644
--- a/src/components/demos/aspect-ratio-demo.svelte
+++ b/src/components/demos/aspect-ratio-demo.svelte
@@ -2,10 +2,10 @@
 	import * as AspectRatio from "@/components/ui/aspect-ratio";
 </script>
 
-<AspectRatio.Root ratio={16 / 9} class="bg-muted">
+<AspectRatio.Root ratio={16 / 9} class="rounded-[15px] bg-transparent">
 	<img
-		src="https://images.unsplash.com/photo-1588345921523-c2dcdb7f1dcd?w=800&dpr=2&q=80"
-		alt="Gray by Drew Beamer"
-		class="rounded-md object-cover h-full w-full"
+		src="/abstract.png"
+		alt="an abstract painting"
+		class="h-full w-full rounded-[15px] object-cover"
 	/>
 </AspectRatio.Root>
diff --git a/src/components/demos/checkbox-demo.svelte b/src/components/demos/checkbox-demo.svelte
index 1663cc0f5..3bfe82417 100644
--- a/src/components/demos/checkbox-demo.svelte
+++ b/src/components/demos/checkbox-demo.svelte
@@ -1,11 +1,27 @@
 <script lang="ts">
-	import * as Checkbox from "@/components/ui/checkbox";
-	import * as Label from "@/components/ui/label";
-	let checked = false;
+	import { Checkbox } from "$lib";
+	import { Label } from "$lib";
+	import { Check, Minus } from "phosphor-svelte";
 </script>
 
 <div class="flex items-center space-x-2">
-	<Checkbox.Root id="terms" bind:checked aria-labelledby="terms-label" />
+	<Checkbox.Root
+		id="terms"
+		aria-labelledby="terms-label"
+		class="peer h-[25px] w-[25px] rounded-md border border-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-muted focus-visible:ring-offset-2 focus-visible:ring-offset-background data-[state=checked]:bg-foreground data-[state=checked]:focus-visible:ring-foreground"
+	>
+		<Checkbox.Indicator
+			let:isChecked
+			let:isIndeterminate
+			class="inline-flex items-center justify-center"
+		>
+			{#if isChecked}
+				<Check class="h-[15px] w-[15px] text-background" />
+			{:else if isIndeterminate}
+				<Minus class="h-[15px] w-[15px] text-background" />
+			{/if}
+		</Checkbox.Indicator>
+	</Checkbox.Root>
 	<Label.Root
 		id="terms-label"
 		for="terms"
diff --git a/static/abstract.png b/static/abstract.png
new file mode 100644
index 0000000000000000000000000000000000000000..b73f34d7b61403f4305a047e67401cf46214085a
GIT binary patch
literal 212896
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%0Df1CY#=abu_o{Qd(0qA9RfLcvl@hy5wdSaE
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
akN*o1SpVPXeUYI60000<MNUMnLSTY6^OR5k

literal 0
HcmV?d00001


From dd11989e70d1208ea2a9630819d77c6cf66e67f6 Mon Sep 17 00:00:00 2001
From: Hunter Johnston <johnstonhuntera@gmail.com>
Date: Fri, 17 Nov 2023 21:41:07 -0500
Subject: [PATCH 043/217] dropdown menu

---
 .../demos/dropdown-menu-demo.svelte           | 225 +++++++++++++-----
 src/styles/app.postcss                        |   4 +-
 tailwind.config.ts                            |   3 +-
 3 files changed, 172 insertions(+), 60 deletions(-)

diff --git a/src/components/demos/dropdown-menu-demo.svelte b/src/components/demos/dropdown-menu-demo.svelte
index 451264cd4..b36cf4f73 100644
--- a/src/components/demos/dropdown-menu-demo.svelte
+++ b/src/components/demos/dropdown-menu-demo.svelte
@@ -1,68 +1,177 @@
 <script lang="ts">
-	import * as Button from "@/components/ui/button";
-	import * as DropdownMenu from "@/components/ui/dropdown-menu";
+	import { DropdownMenu } from "$lib";
+	import { Avatar } from "$lib";
+	import { flyAndScale } from "@/utils";
+	import {
+		UserCircle,
+		Cardholder,
+		GearSix,
+		UserCirclePlus,
+		DotsThree,
+		CaretRight
+	} from "phosphor-svelte";
 </script>
 
 <DropdownMenu.Root>
-	<DropdownMenu.Trigger asChild let:builder>
-		<Button.Root builders={[builder]} variant="outline">Open</Button.Root>
+	<DropdownMenu.Trigger
+		class="inline-flex h-10 w-10 items-center justify-center rounded-full border border-muted bg-background text-sm font-medium text-foreground shadow-btn"
+	>
+		<DotsThree class="h-6 w-6 text-foreground" />
 	</DropdownMenu.Trigger>
-	<DropdownMenu.Content class="w-56">
-		<DropdownMenu.Label>My Account</DropdownMenu.Label>
-		<DropdownMenu.Separator />
-		<DropdownMenu.Group>
-			<DropdownMenu.Item>
-				<span>Profile</span>
-			</DropdownMenu.Item>
-			<DropdownMenu.Item>
-				<span>Billing</span>
-			</DropdownMenu.Item>
-			<DropdownMenu.Item>
-				<span>Settings</span>
-			</DropdownMenu.Item>
-			<DropdownMenu.Item>
-				<span>Keyboard shortcuts</span>
-			</DropdownMenu.Item>
-		</DropdownMenu.Group>
-		<DropdownMenu.Separator />
-		<DropdownMenu.Group>
-			<DropdownMenu.Item>
-				<span>Team</span>
-			</DropdownMenu.Item>
-			<DropdownMenu.Sub>
-				<DropdownMenu.SubTrigger>
-					<span>Invite users</span>
-				</DropdownMenu.SubTrigger>
-				<DropdownMenu.SubContent>
-					<DropdownMenu.Item>
-						<span>Email</span>
-					</DropdownMenu.Item>
-					<DropdownMenu.Item>
-						<span>Message</span>
-					</DropdownMenu.Item>
-					<DropdownMenu.Item>
-						<span>More...</span>
-					</DropdownMenu.Item>
-				</DropdownMenu.SubContent>
-			</DropdownMenu.Sub>
-			<DropdownMenu.Item>
-				<span>New Team</span>
-			</DropdownMenu.Item>
-		</DropdownMenu.Group>
-		<DropdownMenu.Separator />
-		<DropdownMenu.Item>
-			<span>GitHub</span>
+	<DropdownMenu.Content
+		class="w-full max-w-[229px] rounded-xl border border-muted bg-background px-1 py-1.5 shadow-popover outline-none"
+		transition={flyAndScale}
+	>
+		<DropdownMenu.Item
+			class="flex h-10 select-none items-center rounded-button py-3 pl-3 pr-1.5 text-sm font-medium outline-none transition-all duration-75 data-[highlighted]:bg-muted"
+		>
+			<div class="flex items-center">
+				<UserCircle class="mr-2 h-4 w-4 text-foreground-alt" />
+				Profile
+			</div>
+			<div class="ml-auto flex items-center gap-px">
+				<kbd
+					class="inline-flex h-5 w-5 items-center justify-center rounded-button border border-dark-10 bg-background text-xs text-muted-foreground shadow-kbd"
+				>
+					⌘
+				</kbd>
+				<kbd
+					class="inline-flex h-5 w-5 items-center justify-center rounded-button border border-dark-10 bg-background text-[10px] text-muted-foreground shadow-kbd"
+				>
+					P
+				</kbd>
+			</div>
 		</DropdownMenu.Item>
-		<DropdownMenu.Item>
-			<span>Support</span>
+		<DropdownMenu.Item
+			class="flex h-10 select-none items-center rounded-button py-3 pl-3 pr-1.5 text-sm font-medium outline-none transition-all duration-75 data-[highlighted]:bg-muted"
+		>
+			<div class="flex items-center">
+				<Cardholder class="mr-2 h-4 w-4 text-foreground-alt" />
+				Billing
+			</div>
+			<div class="ml-auto flex items-center gap-px">
+				<kbd
+					class="inline-flex h-5 w-5 items-center justify-center rounded-button border border-dark-10 bg-background text-xs text-muted-foreground shadow-kbd"
+				>
+					⌘
+				</kbd>
+				<kbd
+					class="inline-flex h-5 w-5 items-center justify-center rounded-button border border-dark-10 bg-background text-[10px] text-muted-foreground shadow-kbd"
+				>
+					B
+				</kbd>
+			</div>
 		</DropdownMenu.Item>
-		<DropdownMenu.Item href="/">Anchor Link</DropdownMenu.Item>
-		<DropdownMenu.Item>
-			<span>API</span>
-		</DropdownMenu.Item>
-		<DropdownMenu.Separator />
-		<DropdownMenu.Item>
-			<span>Log out</span>
+		<DropdownMenu.Item
+			class="flex h-10 select-none items-center rounded-button py-3 pl-3 pr-1.5 text-sm font-medium outline-none transition-all duration-75 data-[highlighted]:bg-muted"
+		>
+			<div class="flex items-center">
+				<GearSix class="mr-2 h-4 w-4 text-foreground-alt" />
+				Settings
+			</div>
+			<div class="ml-auto flex items-center gap-px">
+				<kbd
+					class="inline-flex h-5 w-5 items-center justify-center rounded-button border border-dark-10 bg-background text-xs text-muted-foreground shadow-kbd"
+				>
+					⌘
+				</kbd>
+				<kbd
+					class="inline-flex h-5 w-5 items-center justify-center rounded-button border border-dark-10 bg-background text-[10px] text-muted-foreground shadow-kbd"
+				>
+					S
+				</kbd>
+			</div>
 		</DropdownMenu.Item>
+		<DropdownMenu.Separator class="my-1 -ml-1 -mr-1 block h-px bg-muted" />
+		<DropdownMenu.Sub>
+			<DropdownMenu.SubTrigger
+				class="flex h-10 select-none items-center rounded-button py-3 pl-3 pr-1.5 text-sm font-medium outline-none transition-all duration-75 data-[highlighted]:bg-muted data-[state=open]:bg-muted"
+			>
+				<div class="flex items-center">
+					<UserCirclePlus class="mr-2 h-4 w-4 text-foreground-alt" />
+					Invite users
+				</div>
+				<div class="ml-auto flex items-center gap-px">
+					<CaretRight class="h-4 w-4 text-foreground-alt" />
+				</div>
+			</DropdownMenu.SubTrigger>
+			<DropdownMenu.SubContent
+				class="w-full max-w-[209px] rounded-xl border border-muted bg-background px-1 py-1.5 shadow-popover outline-none"
+				transition={flyAndScale}
+			>
+				<DropdownMenu.Item
+					class="flex h-10 select-none items-center rounded-button py-3 pl-3 pr-1.5 text-sm font-medium outline-none transition-all duration-75 data-[highlighted]:bg-muted"
+				>
+					<Avatar.Root
+						class="relative mr-3 flex h-5 w-5 shrink-0 overflow-hidden rounded-full ring-2 ring-muted ring-offset-2 ring-offset-background"
+					>
+						<Avatar.Image
+							src="https://github.com/huntabyte.png"
+							alt="@huntabyte"
+							class="aspect-square h-full w-full"
+						/>
+						<Avatar.Fallback
+							class="flex h-full w-full items-center justify-center rounded-full bg-muted"
+							>HJ</Avatar.Fallback
+						>
+					</Avatar.Root>
+					@huntabyte
+				</DropdownMenu.Item>
+				<DropdownMenu.Item
+					class="flex h-10 select-none items-center rounded-button py-3 pl-3 pr-1.5 text-sm font-medium outline-none transition-all duration-75 data-[highlighted]:bg-muted"
+				>
+					<Avatar.Root
+						class="relative mr-3 flex h-5 w-5 shrink-0 overflow-hidden rounded-full ring-2 ring-muted ring-offset-2 ring-offset-background"
+					>
+						<Avatar.Image
+							src="https://github.com/pavelstianko.png"
+							alt="@pavel_stianko"
+							class="aspect-square h-full w-full"
+						/>
+						<Avatar.Fallback
+							class="flex h-full w-full items-center justify-center rounded-full bg-muted"
+							>PS</Avatar.Fallback
+						>
+					</Avatar.Root>
+					@pavel_stianko
+				</DropdownMenu.Item>
+				<DropdownMenu.Item
+					class="flex h-10 select-none items-center rounded-button py-3 pl-3 pr-1.5 text-sm font-medium outline-none transition-all duration-75 data-[highlighted]:bg-muted"
+				>
+					<Avatar.Root
+						class="relative mr-3 flex h-5 w-5 shrink-0 overflow-hidden rounded-full ring-2 ring-muted ring-offset-2 ring-offset-background"
+					>
+						<Avatar.Image
+							src="https://github.com/adriangonz97.png"
+							alt="@cokakoala_"
+							class="aspect-square h-full w-full"
+						/>
+						<Avatar.Fallback
+							class="flex h-full w-full items-center justify-center rounded-full bg-muted"
+							>CK</Avatar.Fallback
+						>
+					</Avatar.Root>
+					@cokakoala_
+				</DropdownMenu.Item>
+				<DropdownMenu.Item
+					class="flex h-10 select-none items-center rounded-button py-3 pl-3 pr-1.5 text-sm font-medium outline-none transition-all duration-75 data-[highlighted]:bg-muted"
+				>
+					<Avatar.Root
+						class="relative mr-3 flex h-5 w-5 shrink-0 overflow-hidden rounded-full ring-2 ring-muted ring-offset-2 ring-offset-background"
+					>
+						<Avatar.Image
+							src="https://github.com/tglide.png"
+							alt="@tglide"
+							class="aspect-square h-full w-full"
+						/>
+						<Avatar.Fallback
+							class="flex h-full w-full items-center justify-center rounded-full bg-muted"
+							>TL</Avatar.Fallback
+						>
+					</Avatar.Root>
+					@thomasglopes
+				</DropdownMenu.Item>
+			</DropdownMenu.SubContent>
+		</DropdownMenu.Sub>
 	</DropdownMenu.Content>
 </DropdownMenu.Root>
diff --git a/src/styles/app.postcss b/src/styles/app.postcss
index b71358906..1b0b39773 100644
--- a/src/styles/app.postcss
+++ b/src/styles/app.postcss
@@ -24,6 +24,7 @@
 		--shadow-mini-inset: 0px 1px 0px 0px rgba(0, 0, 0, 0.04) inset;
 		--shadow-popover: 0px 7px 12px 3px hsla(var(--dark-10));
 		--shadow-kbd: 0px 2px 0px 0px rgba(0, 0, 0, 0.07);
+		--shadow-btn: 0px 1px 0px 1px rgba(0, 0, 0, 0.03);
 	}
 
 	.dark {
@@ -41,8 +42,9 @@
 		--accent: 204 80% 16%;
 
 		/* Shadows */
-		--shadow-popover: 0px 7px 12px 3px rbga(0, 0, 0, 0.2);
+		--shadow-popover: 0px 7px 12px 3px rbga(255, 255, 255, 0.2);
 		--shadow-kbd: 0px 2px 0px 0px rgba(255, 255, 255, 0.07);
+		--shadow-btn: 0px 1px 0px 1px rgba(255, 255, 255, 0.03);
 	}
 }
 
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 8565f5ac7..30c3360d2 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -58,7 +58,8 @@ export default {
 				mini: "var(--shadow-mini)",
 				"mini-inset": "var(--shadow-mini-inset)",
 				popover: "var(--shadow-popover)",
-				kbd: "var(--shadow-kbd)"
+				kbd: "var(--shadow-kbd)",
+				btn: "var(--shadow-btn)",
 			},
 			opacity: {
 				8: "0.08"

From 292a806fc5efa1cfd61c92bfd0901d76a0fac23c Mon Sep 17 00:00:00 2001
From: Hunter Johnston <johnstonhuntera@gmail.com>
Date: Fri, 17 Nov 2023 22:06:42 -0500
Subject: [PATCH 044/217] fix code copy bug

---
 mdsvex.config.js                                  | 15 ++-------------
 src/components/copy-code-button.svelte            |  5 +++--
 src/components/demos/alert-dialog-demo.svelte     |  2 +-
 src/components/demos/checkbox-demo.svelte         |  2 +-
 src/components/demos/dialog-demo.svelte           |  4 ++--
 src/components/demos/dropdown-menu-demo.svelte    | 10 +++++-----
 src/components/markdown/pre.svelte                | 11 +++++++++--
 .../navigation/sidebar-nav-items.svelte           |  6 +++---
 .../navigation/sidebar-nav-main-items.svelte      |  6 ++++--
 src/components/site-header.svelte                 |  2 +-
 10 files changed, 31 insertions(+), 32 deletions(-)

diff --git a/mdsvex.config.js b/mdsvex.config.js
index 83e245147..b50451ddb 100644
--- a/mdsvex.config.js
+++ b/mdsvex.config.js
@@ -181,29 +181,18 @@ function rehypeHandleMetadata() {
 
 function rehypeRenderCode() {
 	return async (tree) => {
-		let counter = 0;
 		visit(tree, (node) => {
 			if (
 				node?.type === "element" &&
 				(node?.tagName === "Components.pre" || node?.tagName === "pre")
 			) {
-				counter++;
-
-				const isNonPP = counter % 2 === 0;
-				if (isNonPP) {
-					node.properties = {
-						...node.properties,
-						"data-non-pp": ""
-					};
-				}
-
 				/** @type HTMLElement */
 				const codeEl = node.children[0];
 				if (codeEl.tagName !== "code") {
 					return;
 				}
 
-				const meltString = tabsToSpaces(
+				const codeString = tabsToSpaces(
 					toHtml(codeEl, {
 						allowDangerousCharacters: true,
 						allowDangerousHtml: true
@@ -212,7 +201,7 @@ function rehypeRenderCode() {
 
 				codeEl.type = "raw";
 
-				codeEl.value = `{@html \`${escapeSvelte(meltString)}\`}`;
+				codeEl.value = `{@html \`${escapeSvelte(codeString)}\`}`;
 			}
 		});
 	};
diff --git a/src/components/copy-code-button.svelte b/src/components/copy-code-button.svelte
index f4ef14dff..7545e7d5f 100644
--- a/src/components/copy-code-button.svelte
+++ b/src/components/copy-code-button.svelte
@@ -1,7 +1,8 @@
 <script lang="ts">
 	import { cn } from "@/utils";
-	import { CopySimple, Check } from "./icons";
+	import { CopySimple, Check } from "phosphor-svelte";
 	let className: string | undefined | null = undefined;
+
 	export let copyCode: () => void;
 	export let copied = false;
 	export { className as class };
@@ -9,7 +10,7 @@
 
 <button
 	class={cn(
-		"relative z-20 inline-flex h-6 w-6 items-center justify-center rounded-md border bg-background text-sm font-medium transition-all hover:bg-muted focus:outline-none",
+		"relative z-20 inline-flex h-6 w-6 items-center justify-center rounded-md border bg-background text-sm font-medium transition-colors hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground focus-visible:ring-offset-2 focus-visible:ring-offset-background",
 		className
 	)}
 	on:click={copyCode}
diff --git a/src/components/demos/alert-dialog-demo.svelte b/src/components/demos/alert-dialog-demo.svelte
index 618833a1c..0ff0bafdb 100644
--- a/src/components/demos/alert-dialog-demo.svelte
+++ b/src/components/demos/alert-dialog-demo.svelte
@@ -37,7 +37,7 @@
 			</div>
 			<div class="flex w-full items-center justify-center gap-2">
 				<AlertDialog.Cancel
-					class="inline-flex h-input w-full items-center justify-center rounded-input bg-muted text-[15px] font-medium shadow-mini focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-muted focus-visible:ring-offset-2 focus-visible:ring-offset-background"
+					class="inline-flex h-input w-full items-center justify-center rounded-input bg-muted text-[15px] font-medium shadow-mini focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground focus-visible:ring-offset-2 focus-visible:ring-offset-background"
 					>Cancel</AlertDialog.Cancel
 				>
 				<AlertDialog.Action
diff --git a/src/components/demos/checkbox-demo.svelte b/src/components/demos/checkbox-demo.svelte
index 3bfe82417..3f0fb5ed8 100644
--- a/src/components/demos/checkbox-demo.svelte
+++ b/src/components/demos/checkbox-demo.svelte
@@ -8,7 +8,7 @@
 	<Checkbox.Root
 		id="terms"
 		aria-labelledby="terms-label"
-		class="peer h-[25px] w-[25px] rounded-md border border-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-muted focus-visible:ring-offset-2 focus-visible:ring-offset-background data-[state=checked]:bg-foreground data-[state=checked]:focus-visible:ring-foreground"
+		class="peer h-[25px] w-[25px] rounded-md border border-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground focus-visible:ring-offset-2 focus-visible:ring-offset-background data-[state=checked]:bg-foreground data-[state=checked]:focus-visible:ring-foreground"
 	>
 		<Checkbox.Indicator
 			let:isChecked
diff --git a/src/components/demos/dialog-demo.svelte b/src/components/demos/dialog-demo.svelte
index c27e2395d..e47092553 100644
--- a/src/components/demos/dialog-demo.svelte
+++ b/src/components/demos/dialog-demo.svelte
@@ -11,7 +11,7 @@
 			builders={[builder]}
 			class="inline-flex h-12 items-center
 			justify-center whitespace-nowrap rounded-input bg-dark px-[21px]
-			text-[15px] font-semibold text-background shadow-mini ring-dark ring-offset-background transition-colors hover:bg-foreground/80 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-dark focus-visible:ring-offset-2 focus-visible:ring-offset-background"
+			text-[15px] font-semibold text-background shadow-mini  transition-colors hover:bg-foreground/80 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground focus-visible:ring-offset-2 focus-visible:ring-offset-background"
 		>
 			Subscribe
 		</Button.Root>
@@ -41,7 +41,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-visible:outline-none focus-visible:ring-2 focus-visible:ring-muted focus-visible:ring-offset-2 focus-visible:ring-offset-background"
+						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-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground focus-visible:ring-offset-2 focus-visible:ring-offset-background"
 						placeholder="secret_api_key"
 						type="password"
 						autocomplete="off"
diff --git a/src/components/demos/dropdown-menu-demo.svelte b/src/components/demos/dropdown-menu-demo.svelte
index b36cf4f73..a544ca675 100644
--- a/src/components/demos/dropdown-menu-demo.svelte
+++ b/src/components/demos/dropdown-menu-demo.svelte
@@ -14,7 +14,7 @@
 
 <DropdownMenu.Root>
 	<DropdownMenu.Trigger
-		class="inline-flex h-10 w-10 items-center justify-center rounded-full border border-muted bg-background text-sm font-medium text-foreground shadow-btn"
+		class="inline-flex h-10 w-10 items-center justify-center rounded-full border border-muted bg-background text-sm font-medium text-foreground shadow-btn focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground focus-visible:ring-offset-2 focus-visible:ring-offset-background"
 	>
 		<DotsThree class="h-6 w-6 text-foreground" />
 	</DropdownMenu.Trigger>
@@ -103,7 +103,7 @@
 					class="flex h-10 select-none items-center rounded-button py-3 pl-3 pr-1.5 text-sm font-medium outline-none transition-all duration-75 data-[highlighted]:bg-muted"
 				>
 					<Avatar.Root
-						class="relative mr-3 flex h-5 w-5 shrink-0 overflow-hidden rounded-full ring-2 ring-muted ring-offset-2 ring-offset-background"
+						class="relative mr-3 flex h-5 w-5 shrink-0 overflow-hidden rounded-full ring-2 ring-foreground ring-offset-2 ring-offset-background"
 					>
 						<Avatar.Image
 							src="https://github.com/huntabyte.png"
@@ -121,7 +121,7 @@
 					class="flex h-10 select-none items-center rounded-button py-3 pl-3 pr-1.5 text-sm font-medium outline-none transition-all duration-75 data-[highlighted]:bg-muted"
 				>
 					<Avatar.Root
-						class="relative mr-3 flex h-5 w-5 shrink-0 overflow-hidden rounded-full ring-2 ring-muted ring-offset-2 ring-offset-background"
+						class="relative mr-3 flex h-5 w-5 shrink-0 overflow-hidden rounded-full ring-2 ring-foreground ring-offset-2 ring-offset-background"
 					>
 						<Avatar.Image
 							src="https://github.com/pavelstianko.png"
@@ -139,7 +139,7 @@
 					class="flex h-10 select-none items-center rounded-button py-3 pl-3 pr-1.5 text-sm font-medium outline-none transition-all duration-75 data-[highlighted]:bg-muted"
 				>
 					<Avatar.Root
-						class="relative mr-3 flex h-5 w-5 shrink-0 overflow-hidden rounded-full ring-2 ring-muted ring-offset-2 ring-offset-background"
+						class="relative mr-3 flex h-5 w-5 shrink-0 overflow-hidden rounded-full ring-2 ring-foreground ring-offset-2 ring-offset-background"
 					>
 						<Avatar.Image
 							src="https://github.com/adriangonz97.png"
@@ -157,7 +157,7 @@
 					class="flex h-10 select-none items-center rounded-button py-3 pl-3 pr-1.5 text-sm font-medium outline-none transition-all duration-75 data-[highlighted]:bg-muted"
 				>
 					<Avatar.Root
-						class="relative mr-3 flex h-5 w-5 shrink-0 overflow-hidden rounded-full ring-2 ring-muted ring-offset-2 ring-offset-background"
+						class="relative mr-3 flex h-5 w-5 shrink-0 overflow-hidden rounded-full ring-2 ring-foreground ring-offset-2 ring-offset-background"
 					>
 						<Avatar.Image
 							src="https://github.com/tglide.png"
diff --git a/src/components/markdown/pre.svelte b/src/components/markdown/pre.svelte
index 917e6943c..7b65d5c60 100644
--- a/src/components/markdown/pre.svelte
+++ b/src/components/markdown/pre.svelte
@@ -9,9 +9,16 @@
 </script>
 
 <pre
-	class={cn("mb-4 mt-6 overflow-x-auto rounded-card border-muted border-2 py-4 ", className)}
+	class={cn(
+		"mb-4 mt-6 overflow-x-auto rounded-card border-2 border-muted py-4",
+		className
+	)}
 	use:setCodeString
 	{...$$restProps}>
 	<slot />
+	<CopyCodeButton
+		{copyCode}
+		copied={$copied}
+		class={cn("pre-copy-btn absolute right-4 top-4")}
+	/>
 </pre>
-<CopyCodeButton {copyCode} copied={$copied} class={cn("absolute right-4 top-4 pre-copy-btn")} />
diff --git a/src/components/navigation/sidebar-nav-items.svelte b/src/components/navigation/sidebar-nav-items.svelte
index 4bf36df2d..8b72f279a 100644
--- a/src/components/navigation/sidebar-nav-items.svelte
+++ b/src/components/navigation/sidebar-nav-items.svelte
@@ -15,11 +15,11 @@
 				<a
 					href={item.href}
 					class={cn(
-						"group inline-flex w-full items-center overflow-x-visible rounded-md px-2.5 py-1.5 text-foreground transition-colors hover:bg-muted/50 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-foreground focus-visible:ring-offset-1 focus-visible:ring-offset-background",
+						"group inline-flex w-full items-center overflow-x-visible rounded-md px-2.5 py-1.5 text-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",
 						item.disabled && "cursor-not-allowed opacity-60 ",
 						$page.url.pathname === item.href
-							? "bg-muted focus-visible:ring-muted"
-							: ""
+							? "bg-muted focus-visible:ring-foreground"
+							: "hover:bg-muted/50"
 					)}
 					target={item.external ? "_blank" : ""}
 					rel={item.external ? "noreferrer" : ""}
diff --git a/src/components/navigation/sidebar-nav-main-items.svelte b/src/components/navigation/sidebar-nav-main-items.svelte
index 01745038a..ac2bcf186 100644
--- a/src/components/navigation/sidebar-nav-main-items.svelte
+++ b/src/components/navigation/sidebar-nav-main-items.svelte
@@ -26,8 +26,10 @@
 				<a
 					href={item.href}
 					class={cn(
-						"group flex w-full items-center gap-2.5 rounded-md px-2.5 py-1.5 text-sm font-semibold text-foreground transition-all hover:bg-muted",
-						$page.url.pathname === item.href ? "bg-muted" : "bg-transparent"
+						"group flex w-full items-center gap-2.5 rounded-md px-2.5 py-1.5 text-sm font-semibold text-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",
+						$page.url.pathname === item.href
+							? "bg-muted"
+							: "bg-transparent hover:bg-muted/50"
 					)}
 					target={item.external ? "_blank" : ""}
 					rel={item.external ? "noreferrer" : ""}
diff --git a/src/components/site-header.svelte b/src/components/site-header.svelte
index c8e9f042d..62e29e0be 100644
--- a/src/components/site-header.svelte
+++ b/src/components/site-header.svelte
@@ -24,7 +24,7 @@
 					rel="noopener noreferrer"
 					class="inline-flex h-10 items-center
 					justify-center whitespace-nowrap rounded-[9px] bg-muted px-4
-					text-sm font-semibold text-foreground shadow-mini ring-offset-background transition-colors hover:bg-muted/90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-muted focus-visible:ring-offset-2 focus-visible:ring-offset-background"
+					text-sm font-semibold text-foreground shadow-mini ring-offset-background transition-colors hover:bg-muted/90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground focus-visible:ring-offset-2 focus-visible:ring-offset-background"
 				>
 					Report an issue
 				</Button.Root>

From 74502f87c1ac9bceab56664012f2b1afccdb9813 Mon Sep 17 00:00:00 2001
From: Hunter Johnston <johnstonhuntera@gmail.com>
Date: Fri, 17 Nov 2023 22:23:06 -0500
Subject: [PATCH 045/217] light switch

---
 src/components/light-switch.svelte            | 35 +++++++++++++++----
 .../navigation/sidebar-nav-items.svelte       |  4 +--
 2 files changed, 29 insertions(+), 10 deletions(-)

diff --git a/src/components/light-switch.svelte b/src/components/light-switch.svelte
index f8c02a1df..9391e3d99 100644
--- a/src/components/light-switch.svelte
+++ b/src/components/light-switch.svelte
@@ -1,21 +1,42 @@
 <script lang="ts">
 	import { Sun, MoonStars } from "@/components/icons";
-	import { Button } from "@/components/ui/button";
+	import { Button } from "$lib";
 	import { toggleMode, mode } from "mode-watcher";
+	import { scale } from "svelte/transition";
+	import { cubicOut } from "svelte/easing";
 </script>
 
-<Button
+<Button.Root
 	on:click={toggleMode}
 	role="switch"
 	aria-label="Light Switch"
 	aria-checked={$mode === "light"}
 	title="Toggle {$mode === 'dark' ? 'Dark' : 'Light'} Mode"
-	variant="ghost"
-	size="icon"
+	class="inline-flex h-10 w-10 items-center justify-center rounded-input px-2 transition-colors hover:bg-dark-10 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground focus-visible:ring-offset-2 focus-visible:ring-offset-background"
 >
 	{#if $mode === "light"}
-		<MoonStars class="sq-6" aria-label="Moon" />
+		<div
+			class="absolute inline-flex h-full w-full items-center justify-center"
+			transition:scale={{
+				delay: 50,
+				duration: 200,
+				start: 0.7,
+				easing: cubicOut
+			}}
+		>
+			<MoonStars class="sq-6" aria-label="Moon" />
+		</div>
 	{:else}
-		<Sun class="sq-6" aria-label="Sun" />
+		<div
+			class="absolute inline-flex h-full w-full items-center justify-center"
+			transition:scale={{
+				delay: 50,
+				duration: 200,
+				start: 0.7,
+				easing: cubicOut
+			}}
+		>
+			<Sun class="sq-6" aria-label="Sun" />
+		</div>
 	{/if}
-</Button>
+</Button.Root>
diff --git a/src/components/navigation/sidebar-nav-items.svelte b/src/components/navigation/sidebar-nav-items.svelte
index 8b72f279a..86d4d0678 100644
--- a/src/components/navigation/sidebar-nav-items.svelte
+++ b/src/components/navigation/sidebar-nav-items.svelte
@@ -17,9 +17,7 @@
 					class={cn(
 						"group inline-flex w-full items-center overflow-x-visible rounded-md px-2.5 py-1.5 text-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",
 						item.disabled && "cursor-not-allowed opacity-60 ",
-						$page.url.pathname === item.href
-							? "bg-muted focus-visible:ring-foreground"
-							: "hover:bg-muted/50"
+						$page.url.pathname === item.href ? "bg-muted" : "hover:bg-muted/50"
 					)}
 					target={item.external ? "_blank" : ""}
 					rel={item.external ? "noreferrer" : ""}

From 215071a8448162d339ad65fd0ac5537894e3621c Mon Sep 17 00:00:00 2001
From: Hunter Johnston <johnstonhuntera@gmail.com>
Date: Fri, 17 Nov 2023 22:50:33 -0500
Subject: [PATCH 046/217] update toc

---
 src/components/toc/tree.svelte | 58 +++++++++++++++++++++++++++++-----
 src/styles/app.postcss         |  2 +-
 2 files changed, 51 insertions(+), 9 deletions(-)

diff --git a/src/components/toc/tree.svelte b/src/components/toc/tree.svelte
index e1c276e41..a815d5e78 100644
--- a/src/components/toc/tree.svelte
+++ b/src/components/toc/tree.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { cn } from "@/utils";
 	import {
 		type TableOfContentsItem,
 		type TableOfContentsElements,
@@ -11,6 +12,30 @@
 	export let item: TableOfContentsElements["item"];
 	export let level = 1;
 	export let isActive: TableOfContents["helpers"]["isActive"];
+
+	function hoverAction(node: HTMLElement) {
+		function handleMouseEnter() {
+			node.parentElement?.classList.add("border-l-foreground");
+		}
+
+		function handleMouseLeave() {
+			if (node.hasAttribute("data-active")) {
+				return;
+			}
+			node.parentElement?.classList.remove("border-l-foreground");
+			node.parentElement?.classList.add("border-l-transparent");
+		}
+
+		node.addEventListener("mouseenter", handleMouseEnter);
+		node.addEventListener("mouseleave", handleMouseLeave);
+
+		return {
+			destroy() {
+				node.removeEventListener("mouseenter", handleMouseEnter);
+				node.removeEventListener("mouseleave", handleMouseLeave);
+			}
+		};
+	}
 </script>
 
 <ul class="m-0 list-none">
@@ -19,15 +44,24 @@
 			{@const node = heading.node.innerHTML}
 			{@const nodeWithoutSpan = node.replace(/<span.*<\/span>/g, "")}
 			<li class="mt-0 {level === 1 && 'border-l'}">
-				<a
-					href="#{heading.id}"
-					use:melt={$item(heading.id)}
-					class="inline-flex items-center justify-center gap-1 text-muted-foreground no-underline transition-colors
-				hover:text-foreground data-[active]:text-foreground data-[active]:border-l-foreground border-l border-l-transparent pl-4 pb-2 {level !==
-						1 && 'pl-8'} -mx-[1px] transition-all duration-200"
+				<div
+					class={cn(
+						"group -mx-[1px] inline-flex items-center justify-center gap-1 border-l pb-2 pl-4 text-muted-foreground no-underline",
+						level !== 1 ? "pl-8" : "",
+						$isActive(heading.id)
+							? "border-l-foreground"
+							: "border-l-transparent"
+					)}
 				>
-					{@html nodeWithoutSpan}
-				</a>
+					<a
+						href="#{heading.id}"
+						use:melt={$item(heading.id)}
+						class="transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground focus-visible:ring-offset-2 focus-visible:ring-offset-background data-[active]:text-foreground"
+						use:hoverAction
+					>
+						{@html nodeWithoutSpan}
+					</a>
+				</div>
 
 				{#if heading.children && heading.children.length}
 					<svelte:self
@@ -42,3 +76,11 @@
 		{/each}
 	{/if}
 </ul>
+
+<style lang="postcss">
+	.parent .child[data-attribute="special"] {
+		/* Apply styles to the parent when the child with data-attribute="special" is present */
+		/* For example: */
+		background-color: lightblue;
+	}
+</style>
diff --git a/src/styles/app.postcss b/src/styles/app.postcss
index 1b0b39773..fc4405a28 100644
--- a/src/styles/app.postcss
+++ b/src/styles/app.postcss
@@ -104,7 +104,7 @@
 	}
 
 	.step:before {
-		@apply absolute w-9 h-9 bg-muted rounded-full font-mono font-medium text-center text-base inline-flex items-center justify-center -indent-px border-4 border-background;
+		@apply absolute inline-flex h-9 w-9 items-center justify-center rounded-full border-4 border-background bg-muted text-center -indent-px font-mono text-base font-medium;
 		@apply ml-[-50px] mt-[-4px];
 		content: counter(step);
 	}

From e73116c46c4f65a44246b7f5128103574934121d Mon Sep 17 00:00:00 2001
From: Hunter Johnston <johnstonhuntera@gmail.com>
Date: Fri, 17 Nov 2023 23:00:14 -0500
Subject: [PATCH 047/217] more stuff

---
 src/components/api-ref/prop-type-content.svelte |  6 +++---
 src/components/component-preview.svelte         |  4 ++--
 src/components/markdown/a.svelte                |  8 +-------
 src/components/toc/tree.svelte                  | 10 +---------
 src/styles/app.postcss                          |  4 ++++
 src/styles/markdown.postcss                     |  8 ++------
 6 files changed, 13 insertions(+), 27 deletions(-)

diff --git a/src/components/api-ref/prop-type-content.svelte b/src/components/api-ref/prop-type-content.svelte
index 31b8f6d97..ec28a38b4 100644
--- a/src/components/api-ref/prop-type-content.svelte
+++ b/src/components/api-ref/prop-type-content.svelte
@@ -15,7 +15,7 @@
 		<Code class="bg-transparent px-0">{type.type}</Code>
 		<Popover.Root positioning={{ placement: "top", gutter: 8 }}>
 			<Popover.Trigger
-				class="rounded-button inline-flex items-center justify-center text-foreground-alt hover:text-foreground-alt/80 transition-colors"
+				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"
 			>
 				<Info class="sq-4" weight="bold" />
 				<span class="sr-only">See type definition</span>
@@ -23,9 +23,9 @@
 			<Popover.Content
 				transition={flyAndScale}
 				transitionConfig={{ y: 8 }}
-				class="z-50 bg-background rounded-input p-4 shadow-popover border border-border"
+				class="z-50 rounded-input border border-border bg-background p-4 shadow-popover"
 			>
-				<Code class="bg-transparent px-0 text-foreground tracking-tight h-auto">
+				<Code class="h-auto bg-transparent px-0 tracking-tight text-foreground">
 					{@html parseTypeDef(type.definition)}
 				</Code>
 			</Popover.Content>
diff --git a/src/components/component-preview.svelte b/src/components/component-preview.svelte
index 778291eae..579ee39e5 100644
--- a/src/components/component-preview.svelte
+++ b/src/components/component-preview.svelte
@@ -62,7 +62,7 @@
 				{/if}
 			</Tabs.Trigger>
 		</Tabs.List>
-		<Tabs.Content value="code">
+		<Tabs.Content value="code" class="focus-visible:outline-none">
 			<div
 				class="![&_pre]:mt-0 ![&_pre]:rounded-card w-full [&_pre]:max-h-[443px] [&_pre]:min-h-[443px] [&_pre]:overflow-auto"
 			>
@@ -71,7 +71,7 @@
 		</Tabs.Content>
 		<Tabs.Content
 			value="preview"
-			class="relative rounded-card border-2 border-muted"
+			class="relative rounded-card border-2 border-muted focus-visible:outline-none"
 		>
 			<div
 				class={cn(
diff --git a/src/components/markdown/a.svelte b/src/components/markdown/a.svelte
index 5290d6629..c01400624 100644
--- a/src/components/markdown/a.svelte
+++ b/src/components/markdown/a.svelte
@@ -10,12 +10,6 @@
 	$: target = !internal ? "_blank" : undefined;
 </script>
 
-<a
-	{href}
-	{target}
-	{rel}
-	class={cn("inline-flex items-center gap-1 font-medium underline underline-offset-4", className)}
-	{...$$restProps}
->
+<a {href} {target} {rel} class={cn("link", className)} {...$$restProps}>
 	<slot />
 </a>
diff --git a/src/components/toc/tree.svelte b/src/components/toc/tree.svelte
index a815d5e78..9c986330b 100644
--- a/src/components/toc/tree.svelte
+++ b/src/components/toc/tree.svelte
@@ -56,7 +56,7 @@
 					<a
 						href="#{heading.id}"
 						use:melt={$item(heading.id)}
-						class="transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground focus-visible:ring-offset-2 focus-visible:ring-offset-background data-[active]:text-foreground"
+						class="rounded-sm transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground focus-visible:ring-offset-2 focus-visible:ring-offset-background data-[active]:text-foreground"
 						use:hoverAction
 					>
 						{@html nodeWithoutSpan}
@@ -76,11 +76,3 @@
 		{/each}
 	{/if}
 </ul>
-
-<style lang="postcss">
-	.parent .child[data-attribute="special"] {
-		/* Apply styles to the parent when the child with data-attribute="special" is present */
-		/* For example: */
-		background-color: lightblue;
-	}
-</style>
diff --git a/src/styles/app.postcss b/src/styles/app.postcss
index fc4405a28..44fe09250 100644
--- a/src/styles/app.postcss
+++ b/src/styles/app.postcss
@@ -120,4 +120,8 @@
 			background: linear-gradient(0deg, #fff 0%, #fff 100%), hsla(var(--dark));
 		}
 	}
+
+	.link {
+		@apply inline-flex items-center gap-1 rounded-sm font-medium underline underline-offset-4 hover:text-foreground/80 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground focus-visible:ring-offset-2 focus-visible:ring-offset-background;
+	}
 }
diff --git a/src/styles/markdown.postcss b/src/styles/markdown.postcss
index a99ada132..e6b09b33b 100644
--- a/src/styles/markdown.postcss
+++ b/src/styles/markdown.postcss
@@ -2,10 +2,6 @@
 	@apply relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-sm;
 }
 
-.link {
-	@apply inline-flex items-center gap-1 font-medium underline underline-offset-4;
-}
-
 [data-theme="light"] {
 	display: flex;
 	flex-direction: column;
@@ -42,7 +38,7 @@
 	@apply relative;
 
 	& pre {
-		@apply mb-4 mt-6 overflow-x-auto rounded-card w-full py-4 px-2.5 text-sm font-semibold;
+		@apply mb-4 mt-6 w-full overflow-x-auto rounded-card px-2.5 py-4 text-sm font-semibold;
 	}
 
 	& code {
@@ -62,7 +58,7 @@
 
 [data-preview] {
 	& pre {
-		@apply mt-0 mb-0;
+		@apply mb-0 mt-0;
 	}
 
 	& [data-copy-code] {

From 20052b53e360fb2c3ba38282d8461979b4b79769 Mon Sep 17 00:00:00 2001
From: Hunter Johnston <johnstonhuntera@gmail.com>
Date: Fri, 17 Nov 2023 23:14:50 -0500
Subject: [PATCH 048/217] fix toc

---
 src/components/demos/dropdown-menu-demo.svelte |  8 ++++----
 src/components/toc/tree.svelte                 | 16 +++++-----------
 2 files changed, 9 insertions(+), 15 deletions(-)

diff --git a/src/components/demos/dropdown-menu-demo.svelte b/src/components/demos/dropdown-menu-demo.svelte
index a544ca675..975eb426f 100644
--- a/src/components/demos/dropdown-menu-demo.svelte
+++ b/src/components/demos/dropdown-menu-demo.svelte
@@ -103,7 +103,7 @@
 					class="flex h-10 select-none items-center rounded-button py-3 pl-3 pr-1.5 text-sm font-medium outline-none transition-all duration-75 data-[highlighted]:bg-muted"
 				>
 					<Avatar.Root
-						class="relative mr-3 flex h-5 w-5 shrink-0 overflow-hidden rounded-full ring-2 ring-foreground ring-offset-2 ring-offset-background"
+						class="relative mr-3 flex h-5 w-5 shrink-0 overflow-hidden rounded-full border border-foreground/50"
 					>
 						<Avatar.Image
 							src="https://github.com/huntabyte.png"
@@ -121,7 +121,7 @@
 					class="flex h-10 select-none items-center rounded-button py-3 pl-3 pr-1.5 text-sm font-medium outline-none transition-all duration-75 data-[highlighted]:bg-muted"
 				>
 					<Avatar.Root
-						class="relative mr-3 flex h-5 w-5 shrink-0 overflow-hidden rounded-full ring-2 ring-foreground ring-offset-2 ring-offset-background"
+						class="relative mr-3 flex h-5 w-5 shrink-0 overflow-hidden rounded-full border border-foreground/50"
 					>
 						<Avatar.Image
 							src="https://github.com/pavelstianko.png"
@@ -139,7 +139,7 @@
 					class="flex h-10 select-none items-center rounded-button py-3 pl-3 pr-1.5 text-sm font-medium outline-none transition-all duration-75 data-[highlighted]:bg-muted"
 				>
 					<Avatar.Root
-						class="relative mr-3 flex h-5 w-5 shrink-0 overflow-hidden rounded-full ring-2 ring-foreground ring-offset-2 ring-offset-background"
+						class="relative mr-3 flex h-5 w-5 shrink-0 overflow-hidden rounded-full border border-foreground/50"
 					>
 						<Avatar.Image
 							src="https://github.com/adriangonz97.png"
@@ -157,7 +157,7 @@
 					class="flex h-10 select-none items-center rounded-button py-3 pl-3 pr-1.5 text-sm font-medium outline-none transition-all duration-75 data-[highlighted]:bg-muted"
 				>
 					<Avatar.Root
-						class="relative mr-3 flex h-5 w-5 shrink-0 overflow-hidden rounded-full ring-2 ring-foreground ring-offset-2 ring-offset-background"
+						class="relative mr-3 flex h-5 w-5 shrink-0 overflow-hidden rounded-full border border-foreground/50"
 					>
 						<Avatar.Image
 							src="https://github.com/tglide.png"
diff --git a/src/components/toc/tree.svelte b/src/components/toc/tree.svelte
index 9c986330b..2b0a4d675 100644
--- a/src/components/toc/tree.svelte
+++ b/src/components/toc/tree.svelte
@@ -15,15 +15,11 @@
 
 	function hoverAction(node: HTMLElement) {
 		function handleMouseEnter() {
-			node.parentElement?.classList.add("border-l-foreground");
+			node.parentElement?.setAttribute("data-hover", "");
 		}
 
 		function handleMouseLeave() {
-			if (node.hasAttribute("data-active")) {
-				return;
-			}
-			node.parentElement?.classList.remove("border-l-foreground");
-			node.parentElement?.classList.add("border-l-transparent");
+			node.parentElement?.removeAttribute("data-hover");
 		}
 
 		node.addEventListener("mouseenter", handleMouseEnter);
@@ -46,18 +42,16 @@
 			<li class="mt-0 {level === 1 && 'border-l'}">
 				<div
 					class={cn(
-						"group -mx-[1px] inline-flex items-center justify-center gap-1 border-l pb-2 pl-4 text-muted-foreground no-underline",
+						"-mx-[1px] inline-flex items-center justify-center gap-1 border-l border-l-transparent pb-2 pl-4 text-muted-foreground no-underline transition-colors data-[hover]:border-l-foreground",
 						level !== 1 ? "pl-8" : "",
-						$isActive(heading.id)
-							? "border-l-foreground"
-							: "border-l-transparent"
+						$isActive(heading.id) && "border-l-foreground"
 					)}
 				>
 					<a
 						href="#{heading.id}"
 						use:melt={$item(heading.id)}
-						class="rounded-sm transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground focus-visible:ring-offset-2 focus-visible:ring-offset-background data-[active]:text-foreground"
 						use:hoverAction
+						class="transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground focus-visible:ring-offset-2 focus-visible:ring-offset-background data-[active]:text-foreground"
 					>
 						{@html nodeWithoutSpan}
 					</a>

From 40eebb6bb17709d47b71e31ca66fa6feb45e871d Mon Sep 17 00:00:00 2001
From: Hunter Johnston <johnstonhuntera@gmail.com>
Date: Fri, 17 Nov 2023 23:15:50 -0500
Subject: [PATCH 049/217] fix checkbox

---
 src/components/demos/checkbox-demo.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/demos/checkbox-demo.svelte b/src/components/demos/checkbox-demo.svelte
index 3f0fb5ed8..e7c67391f 100644
--- a/src/components/demos/checkbox-demo.svelte
+++ b/src/components/demos/checkbox-demo.svelte
@@ -4,7 +4,7 @@
 	import { Check, Minus } from "phosphor-svelte";
 </script>
 
-<div class="flex items-center space-x-2">
+<div class="flex items-center space-x-3">
 	<Checkbox.Root
 		id="terms"
 		aria-labelledby="terms-label"

From 1df4e92fa7794a8d5138d059e9388f73f52f3930 Mon Sep 17 00:00:00 2001
From: Hunter Johnston <johnstonhuntera@gmail.com>
Date: Fri, 17 Nov 2023 23:23:51 -0500
Subject: [PATCH 050/217] fix checkbox

---
 src/components/api-ref/data-attrs-table.svelte | 11 +++++++----
 src/components/demos/checkbox-demo.svelte      |  3 ++-
 2 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/src/components/api-ref/data-attrs-table.svelte b/src/components/api-ref/data-attrs-table.svelte
index a004dd912..4969caa83 100644
--- a/src/components/api-ref/data-attrs-table.svelte
+++ b/src/components/api-ref/data-attrs-table.svelte
@@ -19,18 +19,21 @@
 			{#each dataAttrs as attr}
 				<Table.Row>
 					<Table.Cell class="align-baseline">
-						<Code class="!text-foreground !font-semibold">data-{attr.name}</Code>
+						<Code class="!font-semibold !text-foreground">data-{attr.name}</Code
+						>
 					</Table.Cell>
 					<Table.Cell class="align-baseline">
 						{#if attr.description}
-							<p class="text-sm leading-7 my-2">
+							<p class="my-2 text-sm leading-7">
 								{@html parseMarkdown(attr.description)}
 							</p>
 						{/if}
 						{#if attr.value}
-							<Code class="!bg-background !px-0 !h-0">Value: {attr.value}</Code>
+							<Code class="!h-min !bg-background !px-0"
+								>Value: {attr.value}</Code
+							>
 						{:else}
-							<Code class="!bg-background !px-0 !h-0">Value: ''</Code>
+							<Code class="!h-min !bg-background !px-0">Value: ''</Code>
 						{/if}
 					</Table.Cell>
 				</Table.Row>
diff --git a/src/components/demos/checkbox-demo.svelte b/src/components/demos/checkbox-demo.svelte
index e7c67391f..8f9c286d3 100644
--- a/src/components/demos/checkbox-demo.svelte
+++ b/src/components/demos/checkbox-demo.svelte
@@ -8,7 +8,8 @@
 	<Checkbox.Root
 		id="terms"
 		aria-labelledby="terms-label"
-		class="peer h-[25px] w-[25px] rounded-md border border-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground focus-visible:ring-offset-2 focus-visible:ring-offset-background data-[state=checked]:bg-foreground data-[state=checked]:focus-visible:ring-foreground"
+		class="peer h-[25px] w-[25px] rounded-md border border-muted bg-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground focus-visible:ring-offset-2 focus-visible:ring-offset-background data-[state=unchecked]:bg-background"
+		checked="indeterminate"
 	>
 		<Checkbox.Indicator
 			let:isChecked

From 2d77bf0e85f96782767f9cc8b7a322505543c08a Mon Sep 17 00:00:00 2001
From: Hunter Johnston <johnstonhuntera@gmail.com>
Date: Fri, 17 Nov 2023 23:36:32 -0500
Subject: [PATCH 051/217] fix overflowing

---
 src/components/navigation/sidebar-nav-items.svelte | 6 ++----
 src/components/site-header.svelte                  | 2 +-
 src/routes/+layout.svelte                          | 4 ++--
 3 files changed, 5 insertions(+), 7 deletions(-)

diff --git a/src/components/navigation/sidebar-nav-items.svelte b/src/components/navigation/sidebar-nav-items.svelte
index 86d4d0678..9ba4b7304 100644
--- a/src/components/navigation/sidebar-nav-items.svelte
+++ b/src/components/navigation/sidebar-nav-items.svelte
@@ -7,15 +7,13 @@
 </script>
 
 {#if items.length}
-	<div
-		class="grid grid-flow-row auto-rows-max gap-1 overflow-x-visible pl-4 text-sm"
-	>
+	<div class="grid grid-flow-row auto-rows-max gap-1 pl-4 text-sm">
 		{#each items as item, index (index)}
 			{#if item.href}
 				<a
 					href={item.href}
 					class={cn(
-						"group inline-flex w-full items-center overflow-x-visible rounded-md px-2.5 py-1.5 text-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",
+						"group inline-flex w-full items-center rounded-md px-2.5 py-1.5 text-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",
 						item.disabled && "cursor-not-allowed opacity-60 ",
 						$page.url.pathname === item.href ? "bg-muted" : "hover:bg-muted/50"
 					)}
diff --git a/src/components/site-header.svelte b/src/components/site-header.svelte
index 62e29e0be..2874243c1 100644
--- a/src/components/site-header.svelte
+++ b/src/components/site-header.svelte
@@ -5,7 +5,7 @@
 </script>
 
 <header
-	class="sticky top-0 z-50 -mb-px border-b border-border bg-background/75 backdrop-blur"
+	class="sticky top-0 z-50 overflow-x-hidden border-b border-border bg-background/75 backdrop-blur"
 >
 	<div class="container px-4">
 		<div class="flex h-[70px] items-center justify-between gap-3">
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index bbafb5022..fd2c72b6c 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -20,9 +20,9 @@
 	>
 		<SidebarNav items={navigation.sidebar} />
 		<main
-			class="relative pb-6 pr-4 pt-16 lg:gap-10 xl:grid xl:grid-cols-[1fr_220px]"
+			class="relative pb-6 pl-4 pr-4 pt-16 md:pl-0 lg:gap-10 xl:grid xl:grid-cols-[1fr_220px]"
 		>
-			<div class="mx-auto w-full min-w-0 max-w-[700px]" id="content">
+			<div class="mx-auto w-full min-w-0 md:max-w-[700px]" id="content">
 				<slot />
 			</div>
 

From 040fc46b98e54bd61b8efb8f56721f725542ab5e Mon Sep 17 00:00:00 2001
From: Hunter Johnston <johnstonhuntera@gmail.com>
Date: Fri, 17 Nov 2023 23:37:16 -0500
Subject: [PATCH 052/217] formatting

---
 src/app.html                                  |  2 +-
 src/components/api-ref/props-table.svelte     |  8 ++--
 src/components/api-section.svelte             |  7 +--
 src/components/demos/accordion-demo.svelte    |  8 ++--
 src/components/demos/avatar-demo.svelte       |  2 +-
 src/components/demos/button-demo.svelte       |  4 +-
 src/components/demos/collapsible-demo.svelte  | 19 ++++++--
 src/components/demos/context-menu-demo.svelte | 45 ++++++++++---------
 src/components/demos/link-preview-demo.svelte |  6 ++-
 src/components/demos/menubar-demo.svelte      |  7 ++-
 src/components/demos/popover-demo.svelte      |  4 +-
 src/components/demos/radio-group-demo.svelte  | 18 ++++----
 src/components/demos/select-demo.svelte       |  4 +-
 src/components/demos/separator-demo.svelte    |  4 +-
 src/components/demos/switch-demo.svelte       |  8 ++--
 src/components/demos/tabs-demo.svelte         | 12 +++--
 src/components/icons/arrow-square-out.svelte  |  6 ++-
 src/components/icons/bold.svelte              |  6 ++-
 src/components/icons/book-open.svelte         |  6 ++-
 src/components/icons/caret-right.svelte       |  6 ++-
 src/components/icons/caret-up-down.svelte     |  6 ++-
 src/components/icons/check.svelte             |  6 ++-
 src/components/icons/code.svelte              |  6 ++-
 src/components/icons/copy-simple.svelte       |  6 ++-
 src/components/icons/moon-stars.svelte        |  6 ++-
 src/components/icons/rocket-launch.svelte     |  6 ++-
 src/components/icons/square-half.svelte       |  7 ++-
 src/components/icons/sun-dim.svelte           |  6 ++-
 src/components/icons/sun.svelte               |  6 ++-
 src/components/markdown/blockquote.svelte     |  5 ++-
 src/components/markdown/code.svelte           |  2 +-
 src/components/markdown/h1.svelte             |  5 ++-
 src/components/markdown/h2.svelte             |  5 ++-
 src/components/markdown/h3.svelte             |  5 ++-
 src/components/markdown/h4.svelte             |  5 ++-
 src/components/markdown/h5.svelte             |  5 ++-
 src/components/markdown/h6.svelte             |  5 ++-
 src/components/markdown/layout.svelte         | 22 ++++++++-
 src/components/markdown/p.svelte              |  5 ++-
 src/components/navigation/mobile-link.svelte  |  5 ++-
 src/components/navigation/mobile-nav.svelte   |  2 +-
 .../page-header-description.svelte            |  7 ++-
 .../page-header/page-header-heading.svelte    |  4 +-
 src/components/preview-switch.svelte          |  4 +-
 src/components/steps.svelte                   |  5 ++-
 src/components/test-menubar.svelte            |  7 ++-
 src/components/toc/table-of-contents.svelte   |  9 +++-
 .../ui/accordion/accordion-item.svelte        |  6 ++-
 .../ui/accordion/accordion-trigger.svelte     |  4 +-
 .../alert-dialog/alert-dialog-footer.svelte   |  5 ++-
 .../alert-dialog/alert-dialog-header.svelte   |  5 ++-
 .../ui/alert-dialog/alert-dialog-title.svelte |  6 ++-
 src/components/ui/alert/alert.svelte          |  6 ++-
 .../ui/avatar/avatar-fallback.svelte          |  5 ++-
 src/components/ui/avatar/avatar.svelte        |  5 ++-
 src/components/ui/card/card.svelte            |  2 +-
 src/components/ui/checkbox/checkbox.svelte    |  2 +-
 .../context-menu-checkbox-item.svelte         |  2 +-
 .../context-menu/context-menu-content.svelte  |  2 +-
 .../ui/context-menu/context-menu-item.svelte  |  2 +-
 .../ui/context-menu/context-menu-label.svelte |  6 ++-
 .../context-menu-radio-item.svelte            |  2 +-
 .../context-menu-sub-content.svelte           |  2 +-
 .../context-menu-sub-trigger.svelte           |  2 +-
 .../ui/dialog/dialog-content.svelte           |  2 +-
 src/components/ui/dialog/dialog-footer.svelte |  5 ++-
 src/components/ui/dialog/dialog-header.svelte |  5 ++-
 .../dropdown-menu-checkbox-item.svelte        |  2 +-
 .../dropdown-menu-content.svelte              |  2 +-
 .../dropdown-menu/dropdown-menu-item.svelte   |  2 +-
 .../dropdown-menu-radio-item.svelte           |  2 +-
 .../dropdown-menu-shortcut.svelte             |  5 ++-
 .../dropdown-menu-sub-content.svelte          |  2 +-
 .../dropdown-menu-sub-trigger.svelte          |  2 +-
 src/components/ui/form/form-message.svelte    |  5 ++-
 .../ui/hover-card/hover-card-content.svelte   |  2 +-
 src/components/ui/input/input.svelte          |  2 +-
 .../ui/menubar/menubar-checkbox-item.svelte   |  2 +-
 .../ui/menubar/menubar-content.svelte         |  2 +-
 src/components/ui/menubar/menubar-item.svelte |  2 +-
 .../ui/menubar/menubar-radio-item.svelte      |  2 +-
 .../ui/menubar/menubar-separator.svelte       |  5 ++-
 .../ui/menubar/menubar-sub-content.svelte     |  2 +-
 .../ui/menubar/menubar-sub-trigger.svelte     |  2 +-
 .../ui/menubar/menubar-trigger.svelte         |  2 +-
 .../ui/popover/popover-content.svelte         |  2 +-
 src/components/ui/progress/progress.svelte    | 11 +++--
 .../ui/radio-group/radio-group-item.svelte    |  4 +-
 .../ui/radio-group/radio-group.svelte         |  6 ++-
 .../ui/select/select-content.svelte           |  2 +-
 src/components/ui/select/select-item.svelte   |  2 +-
 src/components/ui/select/select-label.svelte  |  5 ++-
 .../ui/select/select-separator.svelte         |  5 ++-
 .../ui/select/select-trigger.svelte           |  2 +-
 src/components/ui/sheet/sheet-content.svelte  | 10 ++++-
 .../ui/sheet/sheet-description.svelte         |  5 ++-
 src/components/ui/sheet/sheet-footer.svelte   |  5 ++-
 src/components/ui/sheet/sheet-header.svelte   |  5 ++-
 src/components/ui/skeleton/skeleton.svelte    |  5 ++-
 src/components/ui/slider/slider.svelte        | 13 ++++--
 src/components/ui/switch/switch.svelte        |  2 +-
 src/components/ui/table/table-caption.svelte  |  5 ++-
 src/components/ui/table/table-footer.svelte   |  5 ++-
 src/components/ui/table/table.svelte          |  5 ++-
 src/components/ui/tabs/tabs-content.svelte    |  2 +-
 src/components/ui/tabs/tabs-trigger.svelte    |  2 +-
 src/components/ui/textarea/textarea.svelte    |  2 +-
 .../ui/tooltip/tooltip-content.svelte         |  2 +-
 .../components/AccordionContent.svelte        | 24 ++++++++--
 .../components/AlertDialogContent.svelte      | 21 +++++++--
 .../components/AlertDialogOverlay.svelte      | 21 +++++++--
 .../components/AspectRatio.svelte             |  6 ++-
 src/lib/bits/avatar/components/Avatar.svelte  |  3 +-
 .../components/CollapsibleContent.svelte      | 21 +++++++--
 .../components/CollapsibleTrigger.svelte      |  8 +++-
 .../components/ContextMenu.svelte             | 14 +++---
 .../components/ContextMenuSub.svelte          | 11 +++--
 .../dialog/components/DialogContent.svelte    | 21 +++++++--
 .../dialog/components/DialogOverlay.svelte    | 21 +++++++--
 .../components/DropdownMenu.svelte            | 14 +++---
 .../components/DropdownMenuSub.svelte         | 11 +++--
 src/lib/bits/label/components/Label.svelte    |  7 ++-
 .../components/LinkPreview.svelte             | 11 +++--
 .../menubar/components/MenubarMenu.svelte     | 14 +++---
 .../bits/menubar/components/MenubarSub.svelte | 11 +++--
 .../bits/popover/components/Popover.svelte    | 11 +++--
 .../popover/components/PopoverContent.svelte  | 21 +++++++--
 .../select/components/SelectContent.svelte    |  8 +++-
 .../bits/select/components/SelectInput.svelte | 12 ++++-
 .../bits/slider/components/SliderThumb.svelte |  7 ++-
 .../bits/tooltip/components/Tooltip.svelte    | 14 +++---
 src/routes/+page.svelte                       | 10 ++++-
 src/routes/docs/[...slug]/+page.svelte        |  6 ++-
 .../docs/components/[name]/+page.svelte       |  6 ++-
 src/routes/docs/sink/+page.svelte             |  4 +-
 src/styles/buttonVariants.ts                  | 13 ++----
 src/tests/accordion/AccordionTest.svelte      |  4 +-
 src/tests/alert-dialog/AlertDialogTest.svelte |  8 ++--
 src/tests/avatar/AvatarTest.svelte            |  4 +-
 src/tests/checkbox/CheckboxTest.svelte        |  6 ++-
 src/tests/collapsible/CollapsibleTest.svelte  |  4 +-
 src/tests/context-menu/ContextMenuTest.svelte | 40 ++++++++++++-----
 src/tests/dialog/DialogTest.svelte            | 11 +++--
 .../dropdown-menu/DropdownMenuTest.svelte     | 37 ++++++++++-----
 src/tests/link-preview/LinkPreviewTest.svelte |  6 ++-
 src/tests/menubar/MenubarMenu.svelte          |  8 +++-
 src/tests/progress/ProgressTest.svelte        |  7 ++-
 src/tests/radio-group/RadioGroupTest.svelte   |  6 ++-
 src/tests/select/SelectTest.svelte            |  5 ++-
 src/tests/slider/SliderRangeTest.svelte       |  8 ++--
 src/tests/slider/SliderTest.svelte            | 18 ++++++--
 src/tests/switch/SwitchTest.svelte            |  4 +-
 src/tests/tabs/TabsTest.svelte                | 11 ++++-
 .../ToggleGroupMultipleTest.svelte            | 10 ++++-
 src/tests/toggle/ToggleTest.svelte            | 11 ++++-
 src/tests/tooltip/TooltipTest.svelte          |  3 +-
 tailwind.config.ts                            |  2 +-
 157 files changed, 831 insertions(+), 305 deletions(-)

diff --git a/src/app.html b/src/app.html
index 61529490b..b12cf28a6 100644
--- a/src/app.html
+++ b/src/app.html
@@ -18,7 +18,7 @@
 
 	<body
 		data-sveltekit-preload-data="hover"
-		class="bg-background antialiased font-sans overflow-y-scroll"
+		class="overflow-y-scroll bg-background font-sans antialiased"
 	>
 		<div>%sveltekit.body%</div>
 	</body>
diff --git a/src/components/api-ref/props-table.svelte b/src/components/api-ref/props-table.svelte
index 250f97b8a..09bde334e 100644
--- a/src/components/api-ref/props-table.svelte
+++ b/src/components/api-ref/props-table.svelte
@@ -24,10 +24,10 @@
 	<Table.Body>
 		{#each propData as { type, name, description, default: defaultVal }}
 			<Table.Row>
-				<Table.Cell class="align-baseline pr-1">
-					<Code class="text-foreground font-semibold">{name}</Code>
+				<Table.Cell class="pr-1 align-baseline">
+					<Code class="font-semibold text-foreground">{name}</Code>
 				</Table.Cell>
-				<Table.Cell class="align-baseline pr-1">
+				<Table.Cell class="pr-1 align-baseline">
 					<PropTypeContent {type} />
 				</Table.Cell>
 				<Table.Cell class="align-baseline">
@@ -35,7 +35,7 @@
 						{@html parseMarkdown(description)}
 					</p>
 					<div class="mt-2">
-						<Code class="bg-background px-0 h-auto"
+						<Code class="h-auto bg-background px-0"
 							>Default:
 							{#if defaultVal}
 								{` ${defaultVal}`}
diff --git a/src/components/api-section.svelte b/src/components/api-section.svelte
index 0a3dd2c3e..9b63e99c7 100644
--- a/src/components/api-section.svelte
+++ b/src/components/api-section.svelte
@@ -13,14 +13,15 @@
 	{#each schemas as schema}
 		<div>
 			<div
-				class="h-[29px] px-3 bg-accent rounded-button inline-flex items-center justify-center font-mono tracking-tight text-[17px] leading-tight font-medium"
+				class="inline-flex h-[29px] items-center justify-center rounded-button bg-accent px-3 font-mono text-[17px] font-medium leading-tight tracking-tight"
 			>
 				<h3>
-					<span class="text-muted-foreground">{$page.data.title.replace(" ", "")}.</span
+					<span class="text-muted-foreground"
+						>{$page.data.title.replace(" ", "")}.</span
 					>{schema.title}
 				</h3>
 			</div>
-			<P class="!mt-2 !mb-5">{schema.description}</P>
+			<P class="!mb-5 !mt-2">{schema.description}</P>
 			<div class="flex flex-col gap-4">
 				{#if schema.props}
 					<PropsTable props={schema.props} />
diff --git a/src/components/demos/accordion-demo.svelte b/src/components/demos/accordion-demo.svelte
index e1e7adef5..0a5f7035e 100644
--- a/src/components/demos/accordion-demo.svelte
+++ b/src/components/demos/accordion-demo.svelte
@@ -24,13 +24,13 @@
 
 <Accordion.Root class="w-full sm:max-w-[70%]" multiple>
 	{#each items as item, i}
-		<Accordion.Item value="${i}" class="border-b border-dark-10 px-1.5 group">
+		<Accordion.Item value="${i}" class="group border-b border-dark-10 px-1.5">
 			<Accordion.Trigger
-				class="flex w-full flex-1 items-center justify-between py-5 text-[15px] font-medium [&[data-state=open]>span>svg]:rotate-180 transition-all "
+				class="flex w-full flex-1 items-center justify-between py-5 text-[15px] font-medium transition-all [&[data-state=open]>span>svg]:rotate-180 "
 			>
 				{item.title}
 				<span
-					class="rounded-[7px] inline-flex items-center justify-center h-8 w-8 hover:bg-dark-10 bg-transparent transition-all"
+					class="inline-flex h-8 w-8 items-center justify-center rounded-[7px] bg-transparent transition-all hover:bg-dark-10"
 				>
 					<CaretDown class="h-[18px] w-[18px] transition-all duration-200" />
 				</span>
@@ -38,7 +38,7 @@
 			<Accordion.Content
 				transition={slide}
 				transitionConfig={{ duration: 200 }}
-				class="text-sm pb-[25px]"
+				class="pb-[25px] text-sm"
 			>
 				{item.content}
 			</Accordion.Content>
diff --git a/src/components/demos/avatar-demo.svelte b/src/components/demos/avatar-demo.svelte
index 936f6f310..d48692fb3 100644
--- a/src/components/demos/avatar-demo.svelte
+++ b/src/components/demos/avatar-demo.svelte
@@ -3,7 +3,7 @@
 </script>
 
 <Avatar.Root
-	class="h-12 w-12 rounded-full bg-muted uppercase text-[17px] font-medium text-muted-foreground flex items-center justify-center"
+	class="flex h-12 w-12 items-center justify-center rounded-full bg-muted text-[17px] font-medium uppercase text-muted-foreground"
 >
 	<Avatar.Image src="/avatar-1.png" alt="@huntabyte" />
 	<Avatar.Fallback>HB</Avatar.Fallback>
diff --git a/src/components/demos/button-demo.svelte b/src/components/demos/button-demo.svelte
index 7592a343d..37680cf65 100644
--- a/src/components/demos/button-demo.svelte
+++ b/src/components/demos/button-demo.svelte
@@ -3,8 +3,8 @@
 </script>
 
 <Button.Root
-	class="rounded-input h-12 text-[15px] font-semibold px-[21px] inline-flex
-	items-center justify-center bg-dark text-background hover:button-gradient
+	class="hover:button-gradient inline-flex h-12 items-center justify-center rounded-input
+	bg-dark px-[21px] text-[15px] font-semibold text-background
 	shadow-mini transition-all"
 >
 	Unlimited
diff --git a/src/components/demos/collapsible-demo.svelte b/src/components/demos/collapsible-demo.svelte
index 52ea0840b..c8813e91a 100644
--- a/src/components/demos/collapsible-demo.svelte
+++ b/src/components/demos/collapsible-demo.svelte
@@ -8,15 +8,26 @@
 	<div class="flex items-center justify-between space-x-4 px-4">
 		<h4 class="text-sm font-semibold">@huntabyte starred 3 repositories</h4>
 		<Collapsible.Trigger asChild let:builder>
-			<Button.Root builders={[builder]} variant="ghost" size="sm" class="w-9 p-0">
+			<Button.Root
+				builders={[builder]}
+				variant="ghost"
+				size="sm"
+				class="w-9 p-0"
+			>
 				<CaretUpDown class="h-4 w-4" />
 				<span class="sr-only">Toggle</span>
 			</Button.Root>
 		</Collapsible.Trigger>
 	</div>
-	<div class="rounded-md border px-4 py-3 font-mono text-sm">@huntabyte/bits</div>
+	<div class="rounded-md border px-4 py-3 font-mono text-sm">
+		@huntabyte/bits
+	</div>
 	<Collapsible.Content class="space-y-2">
-		<div class="rounded-md border px-4 py-3 font-mono text-sm">@melt-ui/melt</div>
-		<div class="rounded-md border px-4 py-3 font-mono text-sm">@huntabyte/shadcn-svelte</div>
+		<div class="rounded-md border px-4 py-3 font-mono text-sm">
+			@melt-ui/melt
+		</div>
+		<div class="rounded-md border px-4 py-3 font-mono text-sm">
+			@huntabyte/shadcn-svelte
+		</div>
 	</Collapsible.Content>
 </Collapsible.Root>
diff --git a/src/components/demos/context-menu-demo.svelte b/src/components/demos/context-menu-demo.svelte
index 30bb7bbc7..86e418641 100644
--- a/src/components/demos/context-menu-demo.svelte
+++ b/src/components/demos/context-menu-demo.svelte
@@ -1,21 +1,26 @@
 <script lang="ts">
 	import { ContextMenu } from "$lib";
 	import { flyAndScale } from "@/utils";
-	import { PencilSimpleLine, PlusCircle, CopySimple, Trash } from "phosphor-svelte";
+	import {
+		PencilSimpleLine,
+		PlusCircle,
+		CopySimple,
+		Trash
+	} from "phosphor-svelte";
 </script>
 
 <ContextMenu.Root>
 	<ContextMenu.Trigger
-		class="flex h-[150px] w-[300px] items-center justify-center rounded-card-sm text-sm font-medium bg-muted select-none"
+		class="flex h-[150px] w-[300px] select-none items-center justify-center rounded-card-sm bg-muted text-sm font-medium"
 	>
 		Right click me
 	</ContextMenu.Trigger>
 	<ContextMenu.Content
-		class="max-w-[229px] w-full rounded-xl border border-muted shadow-popover px-1 py-1.5 bg-background outline-none"
+		class="w-full max-w-[229px] rounded-xl border border-muted bg-background px-1 py-1.5 shadow-popover outline-none"
 		transition={flyAndScale}
 	>
 		<ContextMenu.Item
-			class="data-[highlighted]:bg-muted text-sm font-medium flex items-center py-3 pl-3 pr-1.5 h-10 rounded-button select-none transition-all outline-none duration-75"
+			class="flex h-10 select-none items-center rounded-button py-3 pl-3 pr-1.5 text-sm font-medium outline-none transition-all duration-75 data-[highlighted]:bg-muted"
 		>
 			<div class="flex items-center">
 				<PencilSimpleLine class="mr-2 h-4 w-4 text-foreground-alt" />
@@ -23,12 +28,12 @@
 			</div>
 			<div class="ml-auto flex items-center gap-px">
 				<kbd
-					class="h-5 w-5 rounded-button border border-dark-10 shadow-kbd inline-flex items-center justify-center text-muted-foreground text-xs bg-background"
+					class="inline-flex h-5 w-5 items-center justify-center rounded-button border border-dark-10 bg-background text-xs text-muted-foreground shadow-kbd"
 				>
 					⌘
 				</kbd>
 				<kbd
-					class="h-5 w-5 rounded-button border border-dark-10 shadow-kbd inline-flex items-center justify-center text-muted-foreground text-[10px] bg-background"
+					class="inline-flex h-5 w-5 items-center justify-center rounded-button border border-dark-10 bg-background text-[10px] text-muted-foreground shadow-kbd"
 				>
 					E
 				</kbd>
@@ -36,7 +41,7 @@
 		</ContextMenu.Item>
 		<ContextMenu.Sub>
 			<ContextMenu.SubTrigger
-				class="data-[highlighted]:bg-muted data-[state=open]:bg-muted text-sm font-medium flex items-center py-3 pl-3 pr-1.5 h-10 rounded-button select-none transition-all outline-none duration-75"
+				class="flex h-10 select-none items-center rounded-button py-3 pl-3 pr-1.5 text-sm font-medium outline-none transition-all duration-75 data-[highlighted]:bg-muted data-[state=open]:bg-muted"
 			>
 				<div class="flex items-center">
 					<PlusCircle class="mr-2 h-4 w-4 text-foreground-alt" />
@@ -44,50 +49,50 @@
 				</div>
 				<div class="ml-auto flex items-center gap-px">
 					<kbd
-						class="h-5 w-5 rounded-button border border-dark-10 shadow-kbd inline-flex items-center justify-center text-muted-foreground text-xs bg-background"
+						class="inline-flex h-5 w-5 items-center justify-center rounded-button border border-dark-10 bg-background text-xs text-muted-foreground shadow-kbd"
 					>
 						⌘
 					</kbd>
 					<kbd
-						class="h-5 w-5 rounded-button border border-dark-10 shadow-kbd inline-flex items-center justify-center text-muted-foreground text-[10px] bg-background"
+						class="inline-flex h-5 w-5 items-center justify-center rounded-button border border-dark-10 bg-background text-[10px] text-muted-foreground shadow-kbd"
 					>
 						N
 					</kbd>
 				</div>
 			</ContextMenu.SubTrigger>
 			<ContextMenu.SubContent
-				class="max-w-[209px] w-full rounded-xl border border-muted shadow-popover px-1 py-1.5 bg-background outline-none"
+				class="w-full max-w-[209px] rounded-xl border border-muted bg-background px-1 py-1.5 shadow-popover outline-none"
 				transition={flyAndScale}
 			>
 				<ContextMenu.Item
-					class="data-[highlighted]:bg-muted text-sm font-normal flex items-center py-3 pl-3 pr-1.5 h-10 rounded-button select-none transition-all outline-none duration-75"
+					class="flex h-10 select-none items-center rounded-button py-3 pl-3 pr-1.5 text-sm font-normal outline-none transition-all duration-75 data-[highlighted]:bg-muted"
 				>
 					Header
 				</ContextMenu.Item>
 				<ContextMenu.Item
-					class="data-[highlighted]:bg-muted text-sm font-normal flex items-center py-3 pl-3 pr-1.5 h-10 rounded-button select-none transition-all outline-none duration-75"
+					class="flex h-10 select-none items-center rounded-button py-3 pl-3 pr-1.5 text-sm font-normal outline-none transition-all duration-75 data-[highlighted]:bg-muted"
 				>
 					Paragraph
 				</ContextMenu.Item>
 				<ContextMenu.Item
-					class="data-[highlighted]:bg-muted text-sm font-normal flex items-center py-3 pl-3 pr-1.5 h-10 rounded-button select-none transition-all outline-none duration-75"
+					class="flex h-10 select-none items-center rounded-button py-3 pl-3 pr-1.5 text-sm font-normal outline-none transition-all duration-75 data-[highlighted]:bg-muted"
 				>
 					Codeblock
 				</ContextMenu.Item>
 				<ContextMenu.Item
-					class="data-[highlighted]:bg-muted text-sm font-normal flex items-center py-3 pl-3 pr-1.5 h-10 rounded-button select-none transition-all outline-none duration-75"
+					class="flex h-10 select-none items-center rounded-button py-3 pl-3 pr-1.5 text-sm font-normal outline-none transition-all duration-75 data-[highlighted]:bg-muted"
 				>
 					List
 				</ContextMenu.Item>
 				<ContextMenu.Item
-					class="data-[highlighted]:bg-muted text-sm font-normal flex items-center py-3 pl-3 pr-1.5 h-10 rounded-button select-none transition-all outline-none duration-75"
+					class="flex h-10 select-none items-center rounded-button py-3 pl-3 pr-1.5 text-sm font-normal outline-none transition-all duration-75 data-[highlighted]:bg-muted"
 				>
 					Task
 				</ContextMenu.Item>
 			</ContextMenu.SubContent>
 		</ContextMenu.Sub>
 		<ContextMenu.Item
-			class="data-[highlighted]:bg-muted text-sm font-medium flex items-center py-3 pl-3 pr-1.5 h-10 rounded-button select-none transition-all outline-none duration-75"
+			class="flex h-10 select-none items-center rounded-button py-3 pl-3 pr-1.5 text-sm font-medium outline-none transition-all duration-75 data-[highlighted]:bg-muted"
 		>
 			<div class="flex items-center">
 				<CopySimple class="mr-2 h-4 w-4 text-foreground-alt" />
@@ -95,20 +100,20 @@
 			</div>
 			<div class="ml-auto flex items-center gap-px">
 				<kbd
-					class="h-5 w-5 rounded-button border border-dark-10 shadow-kbd inline-flex items-center justify-center text-muted-foreground text-xs bg-background"
+					class="inline-flex h-5 w-5 items-center justify-center rounded-button border border-dark-10 bg-background text-xs text-muted-foreground shadow-kbd"
 				>
 					⌘
 				</kbd>
 				<kbd
-					class="h-5 w-5 rounded-button border border-dark-10 shadow-kbd inline-flex items-center justify-center text-muted-foreground text-[10px] bg-background"
+					class="inline-flex h-5 w-5 items-center justify-center rounded-button border border-dark-10 bg-background text-[10px] text-muted-foreground shadow-kbd"
 				>
 					D
 				</kbd>
 			</div>
 		</ContextMenu.Item>
-		<ContextMenu.Separator class="block bg-muted h-px my-1 -mr-1 -ml-1" />
+		<ContextMenu.Separator class="my-1 -ml-1 -mr-1 block h-px bg-muted" />
 		<ContextMenu.Item
-			class="data-[highlighted]:bg-muted text-sm font-medium flex items-center py-3 pl-3 pr-1.5 h-10 rounded-button select-none transition-all outline-none duration-75"
+			class="flex h-10 select-none items-center rounded-button py-3 pl-3 pr-1.5 text-sm font-medium outline-none transition-all duration-75 data-[highlighted]:bg-muted"
 		>
 			<div class="flex items-center">
 				<Trash class="mr-2 h-4 w-4 text-foreground-alt" />
diff --git a/src/components/demos/link-preview-demo.svelte b/src/components/demos/link-preview-demo.svelte
index 01aaa2cbd..4b555c63c 100644
--- a/src/components/demos/link-preview-demo.svelte
+++ b/src/components/demos/link-preview-demo.svelte
@@ -9,7 +9,7 @@
 		href="https://github.com/sveltejs"
 		target="_blank"
 		rel="noreferrer noopener"
-		class="hover:underline underline-offset-4 rounded-sm focus-visible:outline-2 focus-visible:outline-offset-8 focus-visible:outline-black"
+		class="rounded-sm underline-offset-4 hover:underline focus-visible:outline-2 focus-visible:outline-offset-8 focus-visible:outline-black"
 	>
 		@sveltejs
 	</LinkPreview.Trigger>
@@ -24,7 +24,9 @@
 				<p class="text-sm">Cybernetically enhanced web apps.</p>
 				<div class="flex items-center pt-2">
 					<CalendarDays class="mr-2 h-4 w-4 opacity-70" />
-					<span class="text-xs text-muted-foreground"> Joined September 2022 </span>
+					<span class="text-xs text-muted-foreground">
+						Joined September 2022
+					</span>
 				</div>
 			</div>
 		</div>
diff --git a/src/components/demos/menubar-demo.svelte b/src/components/demos/menubar-demo.svelte
index 3a97dbc0d..058b39acd 100644
--- a/src/components/demos/menubar-demo.svelte
+++ b/src/components/demos/menubar-demo.svelte
@@ -52,9 +52,12 @@
 	<Menubar.Menu>
 		<Menubar.Trigger>View</Menubar.Trigger>
 		<Menubar.Content>
-			<Menubar.CheckboxItem bind:checked={bookmarks}>Always Show Bookmarks Bar</Menubar.CheckboxItem
+			<Menubar.CheckboxItem bind:checked={bookmarks}
+				>Always Show Bookmarks Bar</Menubar.CheckboxItem
+			>
+			<Menubar.CheckboxItem bind:checked={fullUrls}
+				>Always Show Full URLs</Menubar.CheckboxItem
 			>
-			<Menubar.CheckboxItem bind:checked={fullUrls}>Always Show Full URLs</Menubar.CheckboxItem>
 			<Menubar.Separator />
 			<Menubar.Item inset>Reload</Menubar.Item>
 			<Menubar.Item inset>Force Reload</Menubar.Item>
diff --git a/src/components/demos/popover-demo.svelte b/src/components/demos/popover-demo.svelte
index db7c29cef..17ee4ce34 100644
--- a/src/components/demos/popover-demo.svelte
+++ b/src/components/demos/popover-demo.svelte
@@ -26,7 +26,9 @@
 			</button>
 			<div class="space-y-2">
 				<h4 class="font-medium leading-none">Dimensions</h4>
-				<p class="text-sm text-muted-foreground">Set the dimensions for the layer.</p>
+				<p class="text-sm text-muted-foreground">
+					Set the dimensions for the layer.
+				</p>
 			</div>
 			<div class="grid gap-2">
 				<div class="grid grid-cols-3 items-center gap-4">
diff --git a/src/components/demos/radio-group-demo.svelte b/src/components/demos/radio-group-demo.svelte
index 3269241df..7ac51b86e 100644
--- a/src/components/demos/radio-group-demo.svelte
+++ b/src/components/demos/radio-group-demo.svelte
@@ -4,33 +4,33 @@
 
 <RadioGroup.Root class="flex flex-col gap-3">
 	<div
-		class="group select-none cursor-pointer flex items-center gap-3 text-primary/50 [&:has([data-state=checked])]:text-primary transition-colors"
+		class="text-primary/50 [&:has([data-state=checked])]:text-primary group flex cursor-pointer select-none items-center gap-3 transition-colors"
 	>
 		<RadioGroup.Item
 			id="amazing"
 			value="amazing"
-			class="shrink-0 sq-5 rounded-full border-2 border-primary/40 transition-all data-[state=checked]:group-hover:border-primary data-[state=checked]:border-6 data-[state=checked]:border-primary duration-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-background/70 ring-offset-1"
+			class="border-primary/40 data-[state=checked]:group-hover:border-primary data-[state=checked]:border-primary shrink-0 rounded-full border-2 ring-offset-1 transition-all duration-200 sq-5 focus:outline-none focus-visible:ring-2 focus-visible:ring-background/70 data-[state=checked]:border-6"
 		/>
-		<Label.Root for="amazing" class="font-medium text-sm">Amazing</Label.Root>
+		<Label.Root for="amazing" class="text-sm font-medium">Amazing</Label.Root>
 	</div>
 	<div
-		class="group select-none cursor-pointer flex items-center gap-3 text-primary/50 [&:has([data-state=checked])]:text-primary transition-colors"
+		class="text-primary/50 [&:has([data-state=checked])]:text-primary group flex cursor-pointer select-none items-center gap-3 transition-colors"
 	>
 		<RadioGroup.Item
 			id="average"
 			value="average"
-			class="shrink-0 sq-5 rounded-full border-2 border-primary/40 transition-all data-[state=checked]:group-hover:border-primary data-[state=checked]:border-6 data-[state=checked]:border-primary duration-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-background/70 ring-offset-1 "
+			class="border-primary/40 data-[state=checked]:group-hover:border-primary data-[state=checked]:border-primary shrink-0 rounded-full border-2 ring-offset-1 transition-all duration-200 sq-5 focus:outline-none focus-visible:ring-2 focus-visible:ring-background/70 data-[state=checked]:border-6 "
 		/>
-		<Label.Root for="average" class="font-medium text-sm">Average</Label.Root>
+		<Label.Root for="average" class="text-sm font-medium">Average</Label.Root>
 	</div>
 	<div
-		class="group select-none cursor-pointer flex items-center gap-3 text-primary/50 [&:has([data-state=checked])]:text-primary transition-colors"
+		class="text-primary/50 [&:has([data-state=checked])]:text-primary group flex cursor-pointer select-none items-center gap-3 transition-colors"
 	>
 		<RadioGroup.Item
 			id="terrible"
 			value="terrible"
-			class="shrink-0 sq-5 rounded-full border-2 border-primary/40 transition-all data-[state=checked]:group-hover:border-primary data-[state=checked]:border-6 data-[state=checked]:border-primary duration-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-background/70 ring-offset-1"
+			class="border-primary/40 data-[state=checked]:group-hover:border-primary data-[state=checked]:border-primary shrink-0 rounded-full border-2 ring-offset-1 transition-all duration-200 sq-5 focus:outline-none focus-visible:ring-2 focus-visible:ring-background/70 data-[state=checked]:border-6"
 		/>
-		<Label.Root for="terrible" class="font-medium text-sm">Terrible</Label.Root>
+		<Label.Root for="terrible" class="text-sm font-medium">Terrible</Label.Root>
 	</div>
 </RadioGroup.Root>
diff --git a/src/components/demos/select-demo.svelte b/src/components/demos/select-demo.svelte
index 1fbf2f7e9..29bcd0c4e 100644
--- a/src/components/demos/select-demo.svelte
+++ b/src/components/demos/select-demo.svelte
@@ -18,7 +18,9 @@
 		<Select.Group>
 			<Select.Label>Fruits</Select.Label>
 			{#each fruits as fruit}
-				<Select.Item value={fruit.value} label={fruit.label}>{fruit.label}</Select.Item>
+				<Select.Item value={fruit.value} label={fruit.label}
+					>{fruit.label}</Select.Item
+				>
 			{/each}
 		</Select.Group>
 	</Select.Content>
diff --git a/src/components/demos/separator-demo.svelte b/src/components/demos/separator-demo.svelte
index 6cceeb528..967d0aa92 100644
--- a/src/components/demos/separator-demo.svelte
+++ b/src/components/demos/separator-demo.svelte
@@ -5,7 +5,9 @@
 <div>
 	<div class="space-y-1">
 		<h4 class="text-sm font-medium leading-none">Radix Primitives</h4>
-		<p class="text-sm text-muted-foreground">An open-source UI component library.</p>
+		<p class="text-sm text-muted-foreground">
+			An open-source UI component library.
+		</p>
 	</div>
 	<Separator.Root class="my-4" />
 	<div class="flex h-5 items-center space-x-4 text-sm">
diff --git a/src/components/demos/switch-demo.svelte b/src/components/demos/switch-demo.svelte
index b3edb5036..14776e95a 100644
--- a/src/components/demos/switch-demo.svelte
+++ b/src/components/demos/switch-demo.svelte
@@ -5,11 +5,13 @@
 <div class="flex items-center space-x-2">
 	<Switch.Root
 		id="airplane-mode"
-		class="peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-primary/60"
+		class="focus-visible:ring-ring data-[state=checked]:bg-primary data-[state=unchecked]:bg-primary/60 peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50"
 	>
 		<Switch.Thumb
-			class="pointer-events-none relative inline-block h-4 w-4 rounded-full data-[state=unchecked]:bg-accent shadow-lg ring-0 transition-all transform data-[state=unchecked]:translate-x-0 data-[state=checked]:translate-x-4 ease-in-out data-[state=checked]:bg-background"
+			class="pointer-events-none relative inline-block h-4 w-4 transform rounded-full shadow-lg ring-0 transition-all ease-in-out data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0 data-[state=checked]:bg-background data-[state=unchecked]:bg-accent"
 		/>
 	</Switch.Root>
-	<Label.Root for="airplane-mode" class="text-sm font-medium">Airplane Mode</Label.Root>
+	<Label.Root for="airplane-mode" class="text-sm font-medium"
+		>Airplane Mode</Label.Root
+	>
 </div>
diff --git a/src/components/demos/tabs-demo.svelte b/src/components/demos/tabs-demo.svelte
index 7e693718d..8b46c36d2 100644
--- a/src/components/demos/tabs-demo.svelte
+++ b/src/components/demos/tabs-demo.svelte
@@ -2,15 +2,19 @@
 	import * as Tabs from "$lib/bits/tabs";
 </script>
 
-<div class="bg-primary p-4 rounded-xl">
+<div class="bg-primary rounded-xl p-4">
 	<Tabs.Root value="account" class="w-[400px]">
 		<Tabs.List
-			class="grid w-full grid-cols-2 bg-primary/5 rounded-lg p-1 border border-muted-foreground"
+			class="bg-primary/5 grid w-full grid-cols-2 rounded-lg border border-muted-foreground p-1"
 		>
-			<Tabs.Trigger value="account" class="h-10 rounded-md data-[state=active]:bg-muted"
+			<Tabs.Trigger
+				value="account"
+				class="h-10 rounded-md data-[state=active]:bg-muted"
 				>Account</Tabs.Trigger
 			>
-			<Tabs.Trigger value="password" class="h-10 rounded-md data-[state=active]:bg-muted"
+			<Tabs.Trigger
+				value="password"
+				class="h-10 rounded-md data-[state=active]:bg-muted"
 				>Password</Tabs.Trigger
 			>
 		</Tabs.List>
diff --git a/src/components/icons/arrow-square-out.svelte b/src/components/icons/arrow-square-out.svelte
index 90fbb5345..ebde5fb8b 100644
--- a/src/components/icons/arrow-square-out.svelte
+++ b/src/components/icons/arrow-square-out.svelte
@@ -3,7 +3,11 @@
 	type $$Props = IconProps;
 </script>
 
-<svg xmlns="http://www.w3.org/2000/svg" {...$$restProps} fill="currentColor" viewBox="0 0 256 256"
+<svg
+	xmlns="http://www.w3.org/2000/svg"
+	{...$$restProps}
+	fill="currentColor"
+	viewBox="0 0 256 256"
 	><path
 		d="M224,104a8,8,0,0,1-16,0V59.32l-66.33,66.34a8,8,0,0,1-11.32-11.32L196.68,48H152a8,8,0,0,1,0-16h64a8,8,0,0,1,8,8Zm-40,24a8,8,0,0,0-8,8v72H48V80h72a8,8,0,0,0,0-16H48A16,16,0,0,0,32,80V208a16,16,0,0,0,16,16H176a16,16,0,0,0,16-16V136A8,8,0,0,0,184,128Z"
 	/></svg
diff --git a/src/components/icons/bold.svelte b/src/components/icons/bold.svelte
index a2774e937..8d38f151c 100644
--- a/src/components/icons/bold.svelte
+++ b/src/components/icons/bold.svelte
@@ -3,7 +3,11 @@
 	type $$Props = IconProps;
 </script>
 
-<svg xmlns="http://www.w3.org/2000/svg" fill="currentcolor" {...$$restProps} viewBox="0 0 256 256"
+<svg
+	xmlns="http://www.w3.org/2000/svg"
+	fill="currentcolor"
+	{...$$restProps}
+	viewBox="0 0 256 256"
 	><path
 		d="M170.48,115.7A44,44,0,0,0,140,40H72a8,8,0,0,0-8,8V200a8,8,0,0,0,8,8h80a48,48,0,0,0,18.48-92.3ZM80,56h60a28,28,0,0,1,0,56H80Zm72,136H80V128h72a32,32,0,0,1,0,64Z"
 	/></svg
diff --git a/src/components/icons/book-open.svelte b/src/components/icons/book-open.svelte
index cde592c87..b29f51c0c 100644
--- a/src/components/icons/book-open.svelte
+++ b/src/components/icons/book-open.svelte
@@ -1,4 +1,8 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" {...$$restProps} viewBox="0 0 256 256"
+<svg
+	xmlns="http://www.w3.org/2000/svg"
+	fill="currentColor"
+	{...$$restProps}
+	viewBox="0 0 256 256"
 	><path
 		d="M224,48H160a40,40,0,0,0-32,16A40,40,0,0,0,96,48H32A16,16,0,0,0,16,64V192a16,16,0,0,0,16,16H96a24,24,0,0,1,24,24,8,8,0,0,0,16,0,24,24,0,0,1,24-24h64a16,16,0,0,0,16-16V64A16,16,0,0,0,224,48ZM96,192H32V64H96a24,24,0,0,1,24,24V200A39.81,39.81,0,0,0,96,192Zm128,0H160a39.81,39.81,0,0,0-24,8V88a24,24,0,0,1,24-24h64Z"
 	/></svg
diff --git a/src/components/icons/caret-right.svelte b/src/components/icons/caret-right.svelte
index 6ac918242..0afe6e73c 100644
--- a/src/components/icons/caret-right.svelte
+++ b/src/components/icons/caret-right.svelte
@@ -3,7 +3,11 @@
 	type $$Props = IconProps;
 </script>
 
-<svg xmlns="http://www.w3.org/2000/svg" {...$$restProps} fill="currentColor" viewBox="0 0 256 256"
+<svg
+	xmlns="http://www.w3.org/2000/svg"
+	{...$$restProps}
+	fill="currentColor"
+	viewBox="0 0 256 256"
 	><path
 		d="M181.66,133.66l-80,80a8,8,0,0,1-11.32-11.32L164.69,128,90.34,53.66a8,8,0,0,1,11.32-11.32l80,80A8,8,0,0,1,181.66,133.66Z"
 	/></svg
diff --git a/src/components/icons/caret-up-down.svelte b/src/components/icons/caret-up-down.svelte
index aee28b3b6..bf8e5063d 100644
--- a/src/components/icons/caret-up-down.svelte
+++ b/src/components/icons/caret-up-down.svelte
@@ -3,7 +3,11 @@
 	type $$Props = IconProps;
 </script>
 
-<svg xmlns="http://www.w3.org/2000/svg" {...$$restProps} fill="currentColor" viewBox="0 0 256 256"
+<svg
+	xmlns="http://www.w3.org/2000/svg"
+	{...$$restProps}
+	fill="currentColor"
+	viewBox="0 0 256 256"
 	><path
 		d="M181.66,170.34a8,8,0,0,1,0,11.32l-48,48a8,8,0,0,1-11.32,0l-48-48a8,8,0,0,1,11.32-11.32L128,212.69l42.34-42.35A8,8,0,0,1,181.66,170.34Zm-96-84.68L128,43.31l42.34,42.35a8,8,0,0,0,11.32-11.32l-48-48a8,8,0,0,0-11.32,0l-48,48A8,8,0,0,0,85.66,85.66Z"
 	/></svg
diff --git a/src/components/icons/check.svelte b/src/components/icons/check.svelte
index e6c649308..a6275e320 100644
--- a/src/components/icons/check.svelte
+++ b/src/components/icons/check.svelte
@@ -3,7 +3,11 @@
 	type $$Props = IconProps;
 </script>
 
-<svg xmlns="http://www.w3.org/2000/svg" {...$$restProps} fill="currentColor" viewBox="0 0 256 256"
+<svg
+	xmlns="http://www.w3.org/2000/svg"
+	{...$$restProps}
+	fill="currentColor"
+	viewBox="0 0 256 256"
 	><path
 		d="M229.66,77.66l-128,128a8,8,0,0,1-11.32,0l-56-56a8,8,0,0,1,11.32-11.32L96,188.69,218.34,66.34a8,8,0,0,1,11.32,11.32Z"
 	/></svg
diff --git a/src/components/icons/code.svelte b/src/components/icons/code.svelte
index 1a6dfd24a..5202a8a0c 100644
--- a/src/components/icons/code.svelte
+++ b/src/components/icons/code.svelte
@@ -1,4 +1,8 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" {...$$restProps} viewBox="0 0 256 256"
+<svg
+	xmlns="http://www.w3.org/2000/svg"
+	fill="currentColor"
+	{...$$restProps}
+	viewBox="0 0 256 256"
 	><path
 		d="M69.12,94.15,28.5,128l40.62,33.85a8,8,0,1,1-10.24,12.29l-48-40a8,8,0,0,1,0-12.29l48-40a8,8,0,0,1,10.24,12.3Zm176,27.7-48-40a8,8,0,1,0-10.24,12.3L227.5,128l-40.62,33.85a8,8,0,1,0,10.24,12.29l48-40a8,8,0,0,0,0-12.29ZM162.73,32.48a8,8,0,0,0-10.25,4.79l-64,176a8,8,0,0,0,4.79,10.26A8.14,8.14,0,0,0,96,224a8,8,0,0,0,7.52-5.27l64-176A8,8,0,0,0,162.73,32.48Z"
 	/></svg
diff --git a/src/components/icons/copy-simple.svelte b/src/components/icons/copy-simple.svelte
index a65e1c3b0..268708d9e 100644
--- a/src/components/icons/copy-simple.svelte
+++ b/src/components/icons/copy-simple.svelte
@@ -1,4 +1,8 @@
-<svg xmlns="http://www.w3.org/2000/svg" {...$$restProps} fill="currentColor" viewBox="0 0 256 256"
+<svg
+	xmlns="http://www.w3.org/2000/svg"
+	{...$$restProps}
+	fill="currentColor"
+	viewBox="0 0 256 256"
 	><path
 		d="M184,64H40a8,8,0,0,0-8,8V216a8,8,0,0,0,8,8H184a8,8,0,0,0,8-8V72A8,8,0,0,0,184,64Zm-8,144H48V80H176ZM224,40V184a8,8,0,0,1-16,0V48H72a8,8,0,0,1,0-16H216A8,8,0,0,1,224,40Z"
 	/></svg
diff --git a/src/components/icons/moon-stars.svelte b/src/components/icons/moon-stars.svelte
index f02ad70a5..a2a6a5cb8 100644
--- a/src/components/icons/moon-stars.svelte
+++ b/src/components/icons/moon-stars.svelte
@@ -3,7 +3,11 @@
 	type $$Props = IconProps;
 </script>
 
-<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" {...$$restProps} viewBox="0 0 256 256"
+<svg
+	xmlns="http://www.w3.org/2000/svg"
+	fill="currentColor"
+	{...$$restProps}
+	viewBox="0 0 256 256"
 	><path
 		d="M240,96a8,8,0,0,1-8,8H216v16a8,8,0,0,1-16,0V104H184a8,8,0,0,1,0-16h16V72a8,8,0,0,1,16,0V88h16A8,8,0,0,1,240,96ZM144,56h8v8a8,8,0,0,0,16,0V56h8a8,8,0,0,0,0-16h-8V32a8,8,0,0,0-16,0v8h-8a8,8,0,0,0,0,16Zm72.77,97a8,8,0,0,1,1.43,8A96,96,0,1,1,95.07,37.8a8,8,0,0,1,10.6,9.06A88.07,88.07,0,0,0,209.14,150.33,8,8,0,0,1,216.77,153Zm-19.39,14.88c-1.79.09-3.59.14-5.38.14A104.11,104.11,0,0,1,88,64c0-1.79,0-3.59.14-5.38A80,80,0,1,0,197.38,167.86Z"
 	/></svg
diff --git a/src/components/icons/rocket-launch.svelte b/src/components/icons/rocket-launch.svelte
index 70a775e4e..f306ffbb0 100644
--- a/src/components/icons/rocket-launch.svelte
+++ b/src/components/icons/rocket-launch.svelte
@@ -1,4 +1,8 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" {...$$restProps} viewBox="0 0 256 256"
+<svg
+	xmlns="http://www.w3.org/2000/svg"
+	fill="currentColor"
+	{...$$restProps}
+	viewBox="0 0 256 256"
 	><path
 		d="M103.77,185.94C103.38,187.49,93.63,224,40,224a8,8,0,0,1-8-8c0-53.63,36.51-63.38,38.06-63.77a8,8,0,0,1,3.88,15.53c-.9.25-22.42,6.54-25.56,39.86C81.7,204.48,88,183,88.26,182a8,8,0,0,1,15.51,4Zm93-67.4L192,123.31v58.33A15.91,15.91,0,0,1,187.32,193L153,227.3A15.91,15.91,0,0,1,141.7,232a16.11,16.11,0,0,1-5.1-.83,15.94,15.94,0,0,1-10.78-12.92l-5.37-38.49L76.24,135.55l-38.47-5.37A16,16,0,0,1,28.7,103L63,68.68A15.91,15.91,0,0,1,74.36,64h58.33l4.77-4.77c26.68-26.67,58.83-27.82,71.41-27.07a16,16,0,0,1,15,15C224.6,59.71,223.45,91.86,196.78,118.54ZM40,114.34l37.15,5.18L116.69,80H74.36ZM91.32,128,128,164.68l57.45-57.45a76.46,76.46,0,0,0,22.42-59.16,76.65,76.65,0,0,0-59.11,22.47ZM176,139.31l-39.53,39.53L141.67,216,176,181.64Z"
 	/></svg
diff --git a/src/components/icons/square-half.svelte b/src/components/icons/square-half.svelte
index 92bc7adb3..e4dc009a8 100644
--- a/src/components/icons/square-half.svelte
+++ b/src/components/icons/square-half.svelte
@@ -1,4 +1,9 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" {...$$restProps} viewBox="0 0 256 256">
+<svg
+	xmlns="http://www.w3.org/2000/svg"
+	fill="currentColor"
+	{...$$restProps}
+	viewBox="0 0 256 256"
+>
 	<path
 		d="M200,40H56A16,16,0,0,0,40,56V200a16,16,0,0,0,16,16H200a16,16,0,0,0,16-16V56A16,16,0,0,0,200,40Zm-64,80h64v16H136Zm0-16V88h64v16Zm0,48h64v16H136Zm64-80H136V56h64ZM56,56h64V200H56ZM200,200H136V184h64v16Z"
 	/>
diff --git a/src/components/icons/sun-dim.svelte b/src/components/icons/sun-dim.svelte
index 59e87e503..417b5695f 100644
--- a/src/components/icons/sun-dim.svelte
+++ b/src/components/icons/sun-dim.svelte
@@ -3,7 +3,11 @@
 	type $$Props = IconProps;
 </script>
 
-<svg xmlns="http://www.w3.org/2000/svg" {...$$restProps} fill="currentColor" viewBox="0 0 256 256"
+<svg
+	xmlns="http://www.w3.org/2000/svg"
+	{...$$restProps}
+	fill="currentColor"
+	viewBox="0 0 256 256"
 	><path
 		d="M120,40V32a8,8,0,0,1,16,0v8a8,8,0,0,1-16,0Zm72,88a64,64,0,1,1-64-64A64.07,64.07,0,0,1,192,128Zm-16,0a48,48,0,1,0-48,48A48.05,48.05,0,0,0,176,128ZM58.34,69.66A8,8,0,0,0,69.66,58.34l-8-8A8,8,0,0,0,50.34,61.66Zm0,116.68-8,8a8,8,0,0,0,11.32,11.32l8-8a8,8,0,0,0-11.32-11.32ZM192,72a8,8,0,0,0,5.66-2.34l8-8a8,8,0,0,0-11.32-11.32l-8,8A8,8,0,0,0,192,72Zm5.66,114.34a8,8,0,0,0-11.32,11.32l8,8a8,8,0,0,0,11.32-11.32ZM40,120H32a8,8,0,0,0,0,16h8a8,8,0,0,0,0-16Zm88,88a8,8,0,0,0-8,8v8a8,8,0,0,0,16,0v-8A8,8,0,0,0,128,208Zm96-88h-8a8,8,0,0,0,0,16h8a8,8,0,0,0,0-16Z"
 	/></svg
diff --git a/src/components/icons/sun.svelte b/src/components/icons/sun.svelte
index c6e5b3171..113077a2f 100644
--- a/src/components/icons/sun.svelte
+++ b/src/components/icons/sun.svelte
@@ -3,7 +3,11 @@
 	type $$Props = IconProps;
 </script>
 
-<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" {...$$restProps} viewBox="0 0 256 256"
+<svg
+	xmlns="http://www.w3.org/2000/svg"
+	fill="currentColor"
+	{...$$restProps}
+	viewBox="0 0 256 256"
 	><path
 		d="M120,40V16a8,8,0,0,1,16,0V40a8,8,0,0,1-16,0Zm72,88a64,64,0,1,1-64-64A64.07,64.07,0,0,1,192,128Zm-16,0a48,48,0,1,0-48,48A48.05,48.05,0,0,0,176,128ZM58.34,69.66A8,8,0,0,0,69.66,58.34l-16-16A8,8,0,0,0,42.34,53.66Zm0,116.68-16,16a8,8,0,0,0,11.32,11.32l16-16a8,8,0,0,0-11.32-11.32ZM192,72a8,8,0,0,0,5.66-2.34l16-16a8,8,0,0,0-11.32-11.32l-16,16A8,8,0,0,0,192,72Zm5.66,114.34a8,8,0,0,0-11.32,11.32l16,16a8,8,0,0,0,11.32-11.32ZM48,128a8,8,0,0,0-8-8H16a8,8,0,0,0,0,16H40A8,8,0,0,0,48,128Zm80,80a8,8,0,0,0-8,8v24a8,8,0,0,0,16,0V216A8,8,0,0,0,128,208Zm112-88H216a8,8,0,0,0,0,16h24a8,8,0,0,0,0-16Z"
 	/></svg
diff --git a/src/components/markdown/blockquote.svelte b/src/components/markdown/blockquote.svelte
index ccbad364f..54399ae1a 100644
--- a/src/components/markdown/blockquote.svelte
+++ b/src/components/markdown/blockquote.svelte
@@ -5,6 +5,9 @@
 	export { className as class };
 </script>
 
-<blockquote class={cn("mt-6 border-l-2 pl-6 italic", className)} {...$$restProps}>
+<blockquote
+	class={cn("mt-6 border-l-2 pl-6 italic", className)}
+	{...$$restProps}
+>
 	<slot />
 </blockquote>
diff --git a/src/components/markdown/code.svelte b/src/components/markdown/code.svelte
index 22f47dab7..b71a5b417 100644
--- a/src/components/markdown/code.svelte
+++ b/src/components/markdown/code.svelte
@@ -6,7 +6,7 @@
 
 <code
 	class={cn(
-		"relative inline-flex justify-center items-center rounded-button px-[8px] font-mono text-sm bg-muted h-[27px] tracking-tighter text-foreground/60 font-medium",
+		"relative inline-flex h-[27px] items-center justify-center rounded-button bg-muted px-[8px] font-mono text-sm font-medium tracking-tighter text-foreground/60",
 		className,
 		"custom"
 	)}
diff --git a/src/components/markdown/h1.svelte b/src/components/markdown/h1.svelte
index f66cf5aa5..2813650d2 100644
--- a/src/components/markdown/h1.svelte
+++ b/src/components/markdown/h1.svelte
@@ -5,6 +5,9 @@
 	export { className as class };
 </script>
 
-<h1 class={cn("mt-2 scroll-m-20 text-4xl font-bold", className)} {...$$restProps}>
+<h1
+	class={cn("mt-2 scroll-m-20 text-4xl font-bold", className)}
+	{...$$restProps}
+>
 	<slot />
 </h1>
diff --git a/src/components/markdown/h2.svelte b/src/components/markdown/h2.svelte
index 9fe8a0101..ff5ac7833 100644
--- a/src/components/markdown/h2.svelte
+++ b/src/components/markdown/h2.svelte
@@ -6,7 +6,10 @@
 </script>
 
 <h2
-	class={cn("mt-12 -scroll-m-36 text-[27px] font-semibold tracking-tight first:mt-0", className)}
+	class={cn(
+		"mt-12 -scroll-m-36 text-[27px] font-semibold tracking-tight first:mt-0",
+		className
+	)}
 	{...$$restProps}
 >
 	<slot />
diff --git a/src/components/markdown/h3.svelte b/src/components/markdown/h3.svelte
index 8510f191c..01bd9234a 100644
--- a/src/components/markdown/h3.svelte
+++ b/src/components/markdown/h3.svelte
@@ -5,6 +5,9 @@
 	export { className as class };
 </script>
 
-<h3 class={cn("mt-8 scroll-m-20 text-xl font-semibold tracking-tight", className)} {...$$restProps}>
+<h3
+	class={cn("mt-8 scroll-m-20 text-xl font-semibold tracking-tight", className)}
+	{...$$restProps}
+>
 	<slot />
 </h3>
diff --git a/src/components/markdown/h4.svelte b/src/components/markdown/h4.svelte
index dd3412e84..71a00ef5d 100644
--- a/src/components/markdown/h4.svelte
+++ b/src/components/markdown/h4.svelte
@@ -5,6 +5,9 @@
 	export { className as class };
 </script>
 
-<h4 class={cn("mt-8 scroll-m-20 text-lg font-semibold tracking-tight", className)} {...$$restProps}>
+<h4
+	class={cn("mt-8 scroll-m-20 text-lg font-semibold tracking-tight", className)}
+	{...$$restProps}
+>
 	<slot />
 </h4>
diff --git a/src/components/markdown/h5.svelte b/src/components/markdown/h5.svelte
index 6011ac2b6..7cba44519 100644
--- a/src/components/markdown/h5.svelte
+++ b/src/components/markdown/h5.svelte
@@ -5,6 +5,9 @@
 	export { className as class };
 </script>
 
-<h5 class={cn("mt-8 scroll-m-20 text-lg font-semibold tracking-tight", className)} {...$$restProps}>
+<h5
+	class={cn("mt-8 scroll-m-20 text-lg font-semibold tracking-tight", className)}
+	{...$$restProps}
+>
 	<slot />
 </h5>
diff --git a/src/components/markdown/h6.svelte b/src/components/markdown/h6.svelte
index 0b42ec3bf..e4a9900ac 100644
--- a/src/components/markdown/h6.svelte
+++ b/src/components/markdown/h6.svelte
@@ -6,7 +6,10 @@
 </script>
 
 <h6
-	class={cn("mt-8 scroll-m-20 text-base font-semibold tracking-tight", className)}
+	class={cn(
+		"mt-8 scroll-m-20 text-base font-semibold tracking-tight",
+		className
+	)}
 	{...$$restProps}
 >
 	<slot />
diff --git a/src/components/markdown/layout.svelte b/src/components/markdown/layout.svelte
index 6b170e5d7..ee5fd3dd0 100644
--- a/src/components/markdown/layout.svelte
+++ b/src/components/markdown/layout.svelte
@@ -22,7 +22,27 @@
 		ul
 	} from "@/components/markdown";
 
-	export { a, blockquote, h1, h2, h3, h4, h5, h6, hr, img, li, ol, p, pre, table, td, th, tr, ul };
+	export {
+		a,
+		blockquote,
+		h1,
+		h2,
+		h3,
+		h4,
+		h5,
+		h6,
+		hr,
+		img,
+		li,
+		ol,
+		p,
+		pre,
+		table,
+		td,
+		th,
+		tr,
+		ul
+	};
 </script>
 
 <script lang="ts">
diff --git a/src/components/markdown/p.svelte b/src/components/markdown/p.svelte
index 0879b60ca..3f97cc1c1 100644
--- a/src/components/markdown/p.svelte
+++ b/src/components/markdown/p.svelte
@@ -5,6 +5,9 @@
 	export { className as class };
 </script>
 
-<p class={cn("leading-7 [&:not(:first-child)]:mt-6", className)} {...$$restProps}>
+<p
+	class={cn("leading-7 [&:not(:first-child)]:mt-6", className)}
+	{...$$restProps}
+>
 	<slot />
 </p>
diff --git a/src/components/navigation/mobile-link.svelte b/src/components/navigation/mobile-link.svelte
index 444eebe67..eb9ab4514 100644
--- a/src/components/navigation/mobile-link.svelte
+++ b/src/components/navigation/mobile-link.svelte
@@ -12,7 +12,10 @@
 <a
 	{href}
 	on:click={() => (open = false)}
-	class={cn($page.url.pathname === href ? "text-foreground" : "text-foreground/60", className)}
+	class={cn(
+		$page.url.pathname === href ? "text-foreground" : "text-foreground/60",
+		className
+	)}
 	{...$$restProps}
 >
 	<slot />
diff --git a/src/components/navigation/mobile-nav.svelte b/src/components/navigation/mobile-nav.svelte
index a31745388..5ac0fd716 100644
--- a/src/components/navigation/mobile-nav.svelte
+++ b/src/components/navigation/mobile-nav.svelte
@@ -23,7 +23,7 @@
 		<MobileLink href="/" class="flex items-center" {open}>
 			<span class="font-bold">{siteConfig.name}</span>
 		</MobileLink>
-		<div class="my-4 h-[calc(100vh-8rem)] pb-10 pl-6 overflow-auto">
+		<div class="my-4 h-[calc(100vh-8rem)] overflow-auto pb-10 pl-6">
 			<div class="flex flex-col space-y-2">
 				{#each navigation.sidebar as navItem, index (index)}
 					<div class="flex flex-col space-y-3 pt-6">
diff --git a/src/components/page-header/page-header-description.svelte b/src/components/page-header/page-header-description.svelte
index bd95e7da2..7577df647 100644
--- a/src/components/page-header/page-header-description.svelte
+++ b/src/components/page-header/page-header-description.svelte
@@ -5,7 +5,12 @@
 	export { className as class };
 </script>
 
-<p class={cn("text-[21px] font-semibold text-foreground/40 mt-3 tracking-tight", className)}>
+<p
+	class={cn(
+		"mt-3 text-[21px] font-semibold tracking-tight text-foreground/40",
+		className
+	)}
+>
 	<Balancer>
 		<slot />
 	</Balancer>
diff --git a/src/components/page-header/page-header-heading.svelte b/src/components/page-header/page-header-heading.svelte
index 97999fef2..cda118c76 100644
--- a/src/components/page-header/page-header-heading.svelte
+++ b/src/components/page-header/page-header-heading.svelte
@@ -4,6 +4,8 @@
 	export { className as class };
 </script>
 
-<h1 class={cn("scroll-m-20 text-5xl font-semibold tracking-[-0.01em]", className)}>
+<h1
+	class={cn("scroll-m-20 text-5xl font-semibold tracking-[-0.01em]", className)}
+>
 	<slot />
 </h1>
diff --git a/src/components/preview-switch.svelte b/src/components/preview-switch.svelte
index 3b3652a5f..81450aa49 100644
--- a/src/components/preview-switch.svelte
+++ b/src/components/preview-switch.svelte
@@ -13,7 +13,7 @@
 <Switch.Root
 	bind:checked
 	class={cn(
-		"peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-primary/60",
+		"focus-visible:ring-ring data-[state=checked]:bg-primary data-[state=unchecked]:bg-primary/60 peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50",
 		className
 	)}
 	on:click
@@ -21,7 +21,7 @@
 >
 	<Switch.Thumb
 		class={cn(
-			"pointer-events-none relative inline-block h-4 w-4 rounded-full data-[state=unchecked]:bg-accent shadow-lg ring-0 transition-all transform data-[state=unchecked]:translate-x-0 data-[state=checked]:translate-x-4 ease-in-out data-[state=checked]:bg-background"
+			"pointer-events-none relative inline-block h-4 w-4 transform rounded-full shadow-lg ring-0 transition-all ease-in-out data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0 data-[state=checked]:bg-background data-[state=unchecked]:bg-accent"
 		)}
 	/>
 </Switch.Root>
diff --git a/src/components/steps.svelte b/src/components/steps.svelte
index 482d030d4..2e7a61159 100644
--- a/src/components/steps.svelte
+++ b/src/components/steps.svelte
@@ -1,3 +1,6 @@
-<div class="[&>h3]:step mb-12 ml-4 border-l pl-8 [counter-reset:step]" {...$$restProps}>
+<div
+	class="[&>h3]:step mb-12 ml-4 border-l pl-8 [counter-reset:step]"
+	{...$$restProps}
+>
 	<slot />
 </div>
diff --git a/src/components/test-menubar.svelte b/src/components/test-menubar.svelte
index 1498aeb2b..2130fc08d 100644
--- a/src/components/test-menubar.svelte
+++ b/src/components/test-menubar.svelte
@@ -60,9 +60,12 @@
 	<Menubar.Menu>
 		<Menubar.Trigger>View</Menubar.Trigger>
 		<Menubar.Content>
-			<Menubar.CheckboxItem bind:checked={bookmarks}>Always Show Bookmarks Bar</Menubar.CheckboxItem
+			<Menubar.CheckboxItem bind:checked={bookmarks}
+				>Always Show Bookmarks Bar</Menubar.CheckboxItem
+			>
+			<Menubar.CheckboxItem bind:checked={fullUrls}
+				>Always Show Full URLs</Menubar.CheckboxItem
 			>
-			<Menubar.CheckboxItem bind:checked={fullUrls}>Always Show Full URLs</Menubar.CheckboxItem>
 			<Menubar.Separator />
 			<Menubar.Item inset>
 				Reload <Menubar.Shortcut>⌘R</Menubar.Shortcut>
diff --git a/src/components/toc/table-of-contents.svelte b/src/components/toc/table-of-contents.svelte
index 0db15f9a4..9e0989f71 100644
--- a/src/components/toc/table-of-contents.svelte
+++ b/src/components/toc/table-of-contents.svelte
@@ -16,10 +16,15 @@
 	});
 </script>
 
-<div class="overflow-y-auto rounded-lg p-4 mt-1">
+<div class="mt-1 overflow-y-auto rounded-lg p-4">
 	<nav>
 		{#key $headingsTree}
-			<Tree tree={$headingsTree} activeHeadingIdxs={$activeHeadingIdxs} {item} {isActive} />
+			<Tree
+				tree={$headingsTree}
+				activeHeadingIdxs={$activeHeadingIdxs}
+				{item}
+				{isActive}
+			/>
 		{/key}
 	</nav>
 </div>
diff --git a/src/components/ui/accordion/accordion-item.svelte b/src/components/ui/accordion/accordion-item.svelte
index 9d4fa41ce..66436db0f 100644
--- a/src/components/ui/accordion/accordion-item.svelte
+++ b/src/components/ui/accordion/accordion-item.svelte
@@ -9,6 +9,10 @@
 	export let value: $$Props["value"];
 </script>
 
-<AccordionPrimitive.Item {value} class={cn("border-b", className)} {...$$restProps}>
+<AccordionPrimitive.Item
+	{value}
+	class={cn("border-b", className)}
+	{...$$restProps}
+>
 	<slot />
 </AccordionPrimitive.Item>
diff --git a/src/components/ui/accordion/accordion-trigger.svelte b/src/components/ui/accordion/accordion-trigger.svelte
index 93f81514a..5fceb6aef 100644
--- a/src/components/ui/accordion/accordion-trigger.svelte
+++ b/src/components/ui/accordion/accordion-trigger.svelte
@@ -22,6 +22,8 @@
 		on:keydown
 	>
 		<slot />
-		<ChevronDown class="h-4 w-4 shrink-0 text-muted-foreground transition-transform duration-200" />
+		<ChevronDown
+			class="h-4 w-4 shrink-0 text-muted-foreground transition-transform duration-200"
+		/>
 	</AccordionPrimitive.Trigger>
 </AccordionPrimitive.Header>
diff --git a/src/components/ui/alert-dialog/alert-dialog-footer.svelte b/src/components/ui/alert-dialog/alert-dialog-footer.svelte
index e6e89194e..30fcce149 100644
--- a/src/components/ui/alert-dialog/alert-dialog-footer.svelte
+++ b/src/components/ui/alert-dialog/alert-dialog-footer.svelte
@@ -9,7 +9,10 @@
 </script>
 
 <div
-	class={cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", className)}
+	class={cn(
+		"flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
+		className
+	)}
 	{...$$restProps}
 >
 	<slot />
diff --git a/src/components/ui/alert-dialog/alert-dialog-header.svelte b/src/components/ui/alert-dialog/alert-dialog-header.svelte
index 358ebbc31..181077da7 100644
--- a/src/components/ui/alert-dialog/alert-dialog-header.svelte
+++ b/src/components/ui/alert-dialog/alert-dialog-header.svelte
@@ -8,6 +8,9 @@
 	export { className as class };
 </script>
 
-<div class={cn("flex flex-col space-y-2 text-center sm:text-left", className)} {...$$restProps}>
+<div
+	class={cn("flex flex-col space-y-2 text-center sm:text-left", className)}
+	{...$$restProps}
+>
 	<slot />
 </div>
diff --git a/src/components/ui/alert-dialog/alert-dialog-title.svelte b/src/components/ui/alert-dialog/alert-dialog-title.svelte
index c11195ded..9334903e1 100644
--- a/src/components/ui/alert-dialog/alert-dialog-title.svelte
+++ b/src/components/ui/alert-dialog/alert-dialog-title.svelte
@@ -9,6 +9,10 @@
 	export { className as class };
 </script>
 
-<AlertDialogPrimitive.Title class={cn("text-lg font-semibold", className)} {level} {...$$restProps}>
+<AlertDialogPrimitive.Title
+	class={cn("text-lg font-semibold", className)}
+	{level}
+	{...$$restProps}
+>
 	<slot />
 </AlertDialogPrimitive.Title>
diff --git a/src/components/ui/alert/alert.svelte b/src/components/ui/alert/alert.svelte
index 40c046e20..abc5cf19f 100644
--- a/src/components/ui/alert/alert.svelte
+++ b/src/components/ui/alert/alert.svelte
@@ -12,6 +12,10 @@
 	export { className as class };
 </script>
 
-<div class={cn(alertVariants({ variant }), className)} {...$$restProps} role="alert">
+<div
+	class={cn(alertVariants({ variant }), className)}
+	{...$$restProps}
+	role="alert"
+>
 	<slot />
 </div>
diff --git a/src/components/ui/avatar/avatar-fallback.svelte b/src/components/ui/avatar/avatar-fallback.svelte
index c24752a33..9caaa2ba8 100644
--- a/src/components/ui/avatar/avatar-fallback.svelte
+++ b/src/components/ui/avatar/avatar-fallback.svelte
@@ -9,7 +9,10 @@
 </script>
 
 <AvatarPrimitive.Fallback
-	class={cn("flex h-full w-full items-center justify-center rounded-full bg-muted", className)}
+	class={cn(
+		"flex h-full w-full items-center justify-center rounded-full bg-muted",
+		className
+	)}
 	{...$$restProps}
 >
 	<slot />
diff --git a/src/components/ui/avatar/avatar.svelte b/src/components/ui/avatar/avatar.svelte
index ebbd439af..f1ca6048e 100644
--- a/src/components/ui/avatar/avatar.svelte
+++ b/src/components/ui/avatar/avatar.svelte
@@ -11,7 +11,10 @@
 
 <AvatarPrimitive.Root
 	{delayMs}
-	class={cn("relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full", className)}
+	class={cn(
+		"relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full",
+		className
+	)}
 	{...$$restProps}
 >
 	<slot />
diff --git a/src/components/ui/card/card.svelte b/src/components/ui/card/card.svelte
index 562f3739b..f0c99051c 100644
--- a/src/components/ui/card/card.svelte
+++ b/src/components/ui/card/card.svelte
@@ -10,7 +10,7 @@
 
 <!-- svelte-ignore a11y-no-static-element-interactions -->
 <div
-	class={cn("rounded-xl border bg-card text-card-foreground shadow", className)}
+	class={cn("bg-card text-card-foreground rounded-xl border shadow", className)}
 	{...$$restProps}
 	on:click
 	on:focusin
diff --git a/src/components/ui/checkbox/checkbox.svelte b/src/components/ui/checkbox/checkbox.svelte
index ecb766ad8..1df5dcca9 100644
--- a/src/components/ui/checkbox/checkbox.svelte
+++ b/src/components/ui/checkbox/checkbox.svelte
@@ -13,7 +13,7 @@
 
 <CheckboxPrimitive.Root
 	class={cn(
-		"peer h-4 w-4 shrink-0 rounded-sm border border-primary shadow focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
+		"border-primary focus-visible:ring-ring data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground peer h-4 w-4 shrink-0 rounded-sm border shadow focus-visible:outline-none focus-visible:ring-1 disabled:cursor-not-allowed disabled:opacity-50",
 		className
 	)}
 	bind:checked
diff --git a/src/components/ui/context-menu/context-menu-checkbox-item.svelte b/src/components/ui/context-menu/context-menu-checkbox-item.svelte
index 578591c52..6c74d4003 100644
--- a/src/components/ui/context-menu/context-menu-checkbox-item.svelte
+++ b/src/components/ui/context-menu/context-menu-checkbox-item.svelte
@@ -14,7 +14,7 @@
 <ContextMenuPrimitive.CheckboxItem
 	bind:checked
 	class={cn(
-		"relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+		"data-[highlighted]:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[disabled]:pointer-events-none data-[highlighted]:bg-accent data-[disabled]:opacity-50",
 		className
 	)}
 	{...$$restProps}
diff --git a/src/components/ui/context-menu/context-menu-content.svelte b/src/components/ui/context-menu/context-menu-content.svelte
index b381ab6ce..cd0bc328c 100644
--- a/src/components/ui/context-menu/context-menu-content.svelte
+++ b/src/components/ui/context-menu/context-menu-content.svelte
@@ -12,7 +12,7 @@
 <ContextMenuPrimitive.Content
 	transition={ContextMenu.transition}
 	class={cn(
-		"z-50 min-w-[8rem] rounded-md border bg-popover p-1 text-popover-foreground shadow-md focus:outline-none",
+		"bg-popover text-popover-foreground z-50 min-w-[8rem] rounded-md border p-1 shadow-md focus:outline-none",
 		className
 	)}
 	{...$$restProps}
diff --git a/src/components/ui/context-menu/context-menu-item.svelte b/src/components/ui/context-menu/context-menu-item.svelte
index b2101552b..20a061eaf 100644
--- a/src/components/ui/context-menu/context-menu-item.svelte
+++ b/src/components/ui/context-menu/context-menu-item.svelte
@@ -14,7 +14,7 @@
 
 <ContextMenuPrimitive.Item
 	class={cn(
-		"relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+		"data-[highlighted]:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled]:pointer-events-none data-[highlighted]:bg-accent data-[disabled]:opacity-50",
 		inset && "pl-8",
 		className
 	)}
diff --git a/src/components/ui/context-menu/context-menu-label.svelte b/src/components/ui/context-menu/context-menu-label.svelte
index 2f807dcb9..132d8a919 100644
--- a/src/components/ui/context-menu/context-menu-label.svelte
+++ b/src/components/ui/context-menu/context-menu-label.svelte
@@ -12,7 +12,11 @@
 </script>
 
 <ContextMenuPrimitive.Label
-	class={cn("px-2 py-1.5 text-sm font-semibold text-foreground", inset && "pl-8", className)}
+	class={cn(
+		"px-2 py-1.5 text-sm font-semibold text-foreground",
+		inset && "pl-8",
+		className
+	)}
 	{...$$restProps}
 >
 	<slot />
diff --git a/src/components/ui/context-menu/context-menu-radio-item.svelte b/src/components/ui/context-menu/context-menu-radio-item.svelte
index 6dee559bd..1776ba301 100644
--- a/src/components/ui/context-menu/context-menu-radio-item.svelte
+++ b/src/components/ui/context-menu/context-menu-radio-item.svelte
@@ -13,7 +13,7 @@
 
 <ContextMenuPrimitive.RadioItem
 	class={cn(
-		"relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+		"data-[highlighted]:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[disabled]:pointer-events-none data-[highlighted]:bg-accent data-[disabled]:opacity-50",
 		className
 	)}
 	{value}
diff --git a/src/components/ui/context-menu/context-menu-sub-content.svelte b/src/components/ui/context-menu/context-menu-sub-content.svelte
index ab0d370fd..358074ccb 100644
--- a/src/components/ui/context-menu/context-menu-sub-content.svelte
+++ b/src/components/ui/context-menu/context-menu-sub-content.svelte
@@ -13,7 +13,7 @@
 	{transition}
 	transitionConfig={{ x: -10, y: 0 }}
 	class={cn(
-		"z-50 min-w-[8rem] rounded-md border bg-popover p-1 text-popover-foreground shadow-lg focus:outline-none",
+		"bg-popover text-popover-foreground z-50 min-w-[8rem] rounded-md border p-1 shadow-lg focus:outline-none",
 		className
 	)}
 	{...$$restProps}
diff --git a/src/components/ui/context-menu/context-menu-sub-trigger.svelte b/src/components/ui/context-menu/context-menu-sub-trigger.svelte
index 4c77ee60c..becec3d20 100644
--- a/src/components/ui/context-menu/context-menu-sub-trigger.svelte
+++ b/src/components/ui/context-menu/context-menu-sub-trigger.svelte
@@ -15,7 +15,7 @@
 
 <ContextMenuPrimitive.SubTrigger
 	class={cn(
-		"flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground",
+		"data-[highlighted]:text-accent-foreground data-[state=open]:text-accent-foreground flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[highlighted]:bg-accent data-[state=open]:bg-accent",
 		inset && "pl-8",
 		className
 	)}
diff --git a/src/components/ui/dialog/dialog-content.svelte b/src/components/ui/dialog/dialog-content.svelte
index ec1d1fbe1..1bb8a6e62 100644
--- a/src/components/ui/dialog/dialog-content.svelte
+++ b/src/components/ui/dialog/dialog-content.svelte
@@ -23,7 +23,7 @@
 	>
 		<slot />
 		<DialogPrimitive.Close
-			class="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground"
+			class="focus:ring-ring absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground"
 		>
 			<Cross2 class="h-4 w-4" />
 			<span class="sr-only">Close</span>
diff --git a/src/components/ui/dialog/dialog-footer.svelte b/src/components/ui/dialog/dialog-footer.svelte
index e6e89194e..30fcce149 100644
--- a/src/components/ui/dialog/dialog-footer.svelte
+++ b/src/components/ui/dialog/dialog-footer.svelte
@@ -9,7 +9,10 @@
 </script>
 
 <div
-	class={cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", className)}
+	class={cn(
+		"flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
+		className
+	)}
 	{...$$restProps}
 >
 	<slot />
diff --git a/src/components/ui/dialog/dialog-header.svelte b/src/components/ui/dialog/dialog-header.svelte
index 88056086b..e2385f5a8 100644
--- a/src/components/ui/dialog/dialog-header.svelte
+++ b/src/components/ui/dialog/dialog-header.svelte
@@ -8,6 +8,9 @@
 	export { className as class };
 </script>
 
-<div class={cn("flex flex-col space-y-1.5 text-center sm:text-left", className)} {...$$restProps}>
+<div
+	class={cn("flex flex-col space-y-1.5 text-center sm:text-left", className)}
+	{...$$restProps}
+>
 	<slot />
 </div>
diff --git a/src/components/ui/dropdown-menu/dropdown-menu-checkbox-item.svelte b/src/components/ui/dropdown-menu/dropdown-menu-checkbox-item.svelte
index 4f84558fa..28d792540 100644
--- a/src/components/ui/dropdown-menu/dropdown-menu-checkbox-item.svelte
+++ b/src/components/ui/dropdown-menu/dropdown-menu-checkbox-item.svelte
@@ -14,7 +14,7 @@
 <DropdownMenuPrimitive.CheckboxItem
 	bind:checked
 	class={cn(
-		"relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+		"data-[highlighted]:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors data-[disabled]:pointer-events-none data-[highlighted]:bg-accent data-[disabled]:opacity-50",
 		className
 	)}
 	{...$$restProps}
diff --git a/src/components/ui/dropdown-menu/dropdown-menu-content.svelte b/src/components/ui/dropdown-menu/dropdown-menu-content.svelte
index d20be320c..356a960cd 100644
--- a/src/components/ui/dropdown-menu/dropdown-menu-content.svelte
+++ b/src/components/ui/dropdown-menu/dropdown-menu-content.svelte
@@ -12,7 +12,7 @@
 <DropdownMenuPrimitive.Content
 	{transition}
 	class={cn(
-		"z-50 min-w-[8rem] rounded-md border bg-popover p-1 text-popover-foreground shadow-md focus:outline-none",
+		"bg-popover text-popover-foreground z-50 min-w-[8rem] rounded-md border p-1 shadow-md focus:outline-none",
 		className
 	)}
 	{...$$restProps}
diff --git a/src/components/ui/dropdown-menu/dropdown-menu-item.svelte b/src/components/ui/dropdown-menu/dropdown-menu-item.svelte
index af05167f4..639338a82 100644
--- a/src/components/ui/dropdown-menu/dropdown-menu-item.svelte
+++ b/src/components/ui/dropdown-menu/dropdown-menu-item.svelte
@@ -14,7 +14,7 @@
 
 <DropdownMenuPrimitive.Item
 	class={cn(
-		"relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+		"data-[highlighted]:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors data-[disabled]:pointer-events-none data-[highlighted]:bg-accent data-[disabled]:opacity-50",
 		inset && "pl-8",
 		className
 	)}
diff --git a/src/components/ui/dropdown-menu/dropdown-menu-radio-item.svelte b/src/components/ui/dropdown-menu/dropdown-menu-radio-item.svelte
index d6f5a42ac..f6280daac 100644
--- a/src/components/ui/dropdown-menu/dropdown-menu-radio-item.svelte
+++ b/src/components/ui/dropdown-menu/dropdown-menu-radio-item.svelte
@@ -13,7 +13,7 @@
 
 <DropdownMenuPrimitive.RadioItem
 	class={cn(
-		"relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+		"data-[highlighted]:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors data-[disabled]:pointer-events-none data-[highlighted]:bg-accent data-[disabled]:opacity-50",
 		className
 	)}
 	{value}
diff --git a/src/components/ui/dropdown-menu/dropdown-menu-shortcut.svelte b/src/components/ui/dropdown-menu/dropdown-menu-shortcut.svelte
index a9de877d2..49d2171b2 100644
--- a/src/components/ui/dropdown-menu/dropdown-menu-shortcut.svelte
+++ b/src/components/ui/dropdown-menu/dropdown-menu-shortcut.svelte
@@ -8,6 +8,9 @@
 	export { className as class };
 </script>
 
-<span class={cn("ml-auto text-xs tracking-widest opacity-60", className)} {...$$restProps}>
+<span
+	class={cn("ml-auto text-xs tracking-widest opacity-60", className)}
+	{...$$restProps}
+>
 	<slot />
 </span>
diff --git a/src/components/ui/dropdown-menu/dropdown-menu-sub-content.svelte b/src/components/ui/dropdown-menu/dropdown-menu-sub-content.svelte
index 0465f4b06..bad3d3f7e 100644
--- a/src/components/ui/dropdown-menu/dropdown-menu-sub-content.svelte
+++ b/src/components/ui/dropdown-menu/dropdown-menu-sub-content.svelte
@@ -13,7 +13,7 @@
 	{transition}
 	transitionConfig={{ x: -10, y: 0 }}
 	class={cn(
-		"z-50 min-w-[8rem] rounded-md border bg-popover p-1 text-popover-foreground shadow-lg focus:outline-none",
+		"bg-popover text-popover-foreground z-50 min-w-[8rem] rounded-md border p-1 shadow-lg focus:outline-none",
 		className
 	)}
 	{...$$restProps}
diff --git a/src/components/ui/dropdown-menu/dropdown-menu-sub-trigger.svelte b/src/components/ui/dropdown-menu/dropdown-menu-sub-trigger.svelte
index 29fd2ba48..289a914a3 100644
--- a/src/components/ui/dropdown-menu/dropdown-menu-sub-trigger.svelte
+++ b/src/components/ui/dropdown-menu/dropdown-menu-sub-trigger.svelte
@@ -15,7 +15,7 @@
 
 <DropdownMenuPrimitive.SubTrigger
 	class={cn(
-		"flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[state=open]:bg-accent",
+		"data-[highlighted]:text-accent-foreground flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[highlighted]:bg-accent data-[state=open]:bg-accent",
 		inset && "pl-8",
 		className
 	)}
diff --git a/src/components/ui/form/form-message.svelte b/src/components/ui/form/form-message.svelte
index a25584ad1..99b04287e 100644
--- a/src/components/ui/form/form-message.svelte
+++ b/src/components/ui/form/form-message.svelte
@@ -9,7 +9,10 @@
 </script>
 
 {#if $errors}
-	<p class={cn("text-[0.8rem] font-medium text-destructive", className)} id={formMessageId}>
+	<p
+		class={cn("text-destructive text-[0.8rem] font-medium", className)}
+		id={formMessageId}
+	>
 		{$errors}
 	</p>
 {/if}
diff --git a/src/components/ui/hover-card/hover-card-content.svelte b/src/components/ui/hover-card/hover-card-content.svelte
index f20c132b3..a3541ebe3 100644
--- a/src/components/ui/hover-card/hover-card-content.svelte
+++ b/src/components/ui/hover-card/hover-card-content.svelte
@@ -11,7 +11,7 @@
 <HoverCardPrimitive.Content
 	{transition}
 	class={cn(
-		"z-50 w-64 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none ",
+		"bg-popover text-popover-foreground z-50 w-64 rounded-md border p-4 shadow-md outline-none ",
 		className
 	)}
 	{...$$restProps}
diff --git a/src/components/ui/input/input.svelte b/src/components/ui/input/input.svelte
index 6c8b321df..d5f1a6ba0 100644
--- a/src/components/ui/input/input.svelte
+++ b/src/components/ui/input/input.svelte
@@ -11,7 +11,7 @@
 
 <input
 	class={cn(
-		"flex h-9 w-full rounded-md border border-input bg-background px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
+		"border-input focus-visible:ring-ring flex h-9 w-full rounded-md border bg-background px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 disabled:cursor-not-allowed disabled:opacity-50",
 		className
 	)}
 	bind:value
diff --git a/src/components/ui/menubar/menubar-checkbox-item.svelte b/src/components/ui/menubar/menubar-checkbox-item.svelte
index 94e7b44e2..d7685c28f 100644
--- a/src/components/ui/menubar/menubar-checkbox-item.svelte
+++ b/src/components/ui/menubar/menubar-checkbox-item.svelte
@@ -12,7 +12,7 @@
 <MenubarPrimitive.CheckboxItem
 	bind:checked
 	class={cn(
-		"relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+		"data-[highlighted]:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[disabled]:pointer-events-none data-[highlighted]:bg-accent data-[disabled]:opacity-50",
 		className
 	)}
 	{...$$restProps}
diff --git a/src/components/ui/menubar/menubar-content.svelte b/src/components/ui/menubar/menubar-content.svelte
index c0d60d800..612c33e90 100644
--- a/src/components/ui/menubar/menubar-content.svelte
+++ b/src/components/ui/menubar/menubar-content.svelte
@@ -12,7 +12,7 @@
 	{transition}
 	{sideOffset}
 	class={cn(
-		"z-50 min-w-[12rem] rounded-md border bg-popover p-1 text-popover-foreground shadow-md focus:outline-none",
+		"bg-popover text-popover-foreground z-50 min-w-[12rem] rounded-md border p-1 shadow-md focus:outline-none",
 		className
 	)}
 	{...$$restProps}
diff --git a/src/components/ui/menubar/menubar-item.svelte b/src/components/ui/menubar/menubar-item.svelte
index dfd5a2c5c..c9f914a21 100644
--- a/src/components/ui/menubar/menubar-item.svelte
+++ b/src/components/ui/menubar/menubar-item.svelte
@@ -14,7 +14,7 @@
 
 <MenubarPrimitive.Item
 	class={cn(
-		"relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+		"data-[highlighted]:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled]:pointer-events-none data-[highlighted]:bg-accent data-[disabled]:opacity-50",
 		inset && "pl-8",
 		className
 	)}
diff --git a/src/components/ui/menubar/menubar-radio-item.svelte b/src/components/ui/menubar/menubar-radio-item.svelte
index 39da98be2..07d87ac61 100644
--- a/src/components/ui/menubar/menubar-radio-item.svelte
+++ b/src/components/ui/menubar/menubar-radio-item.svelte
@@ -13,7 +13,7 @@
 <MenubarPrimitive.RadioItem
 	{value}
 	class={cn(
-		"relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+		"data-[highlighted]:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[disabled]:pointer-events-none data-[highlighted]:bg-accent data-[disabled]:opacity-50",
 		className
 	)}
 	{...$$restProps}
diff --git a/src/components/ui/menubar/menubar-separator.svelte b/src/components/ui/menubar/menubar-separator.svelte
index 979bf9beb..e2a32c5ed 100644
--- a/src/components/ui/menubar/menubar-separator.svelte
+++ b/src/components/ui/menubar/menubar-separator.svelte
@@ -7,4 +7,7 @@
 	export { className as class };
 </script>
 
-<MenubarPrimitive.Separator class={cn("-mx-1 my-1 h-px bg-muted", className)} {...$$restProps} />
+<MenubarPrimitive.Separator
+	class={cn("-mx-1 my-1 h-px bg-muted", className)}
+	{...$$restProps}
+/>
diff --git a/src/components/ui/menubar/menubar-sub-content.svelte b/src/components/ui/menubar/menubar-sub-content.svelte
index 55897be6d..e11432b3b 100644
--- a/src/components/ui/menubar/menubar-sub-content.svelte
+++ b/src/components/ui/menubar/menubar-sub-content.svelte
@@ -12,7 +12,7 @@
 	{transition}
 	transitionConfig={{ x: -5, y: 0 }}
 	class={cn(
-		"z-50 min-w-[8rem] rounded-md border bg-popover p-1 text-popover-foreground shadow-lg  focus:outline-none",
+		"bg-popover text-popover-foreground z-50 min-w-[8rem] rounded-md border p-1 shadow-lg  focus:outline-none",
 		className
 	)}
 	{...$$restProps}
diff --git a/src/components/ui/menubar/menubar-sub-trigger.svelte b/src/components/ui/menubar/menubar-sub-trigger.svelte
index 2aea9d834..293cd4c1e 100644
--- a/src/components/ui/menubar/menubar-sub-trigger.svelte
+++ b/src/components/ui/menubar/menubar-sub-trigger.svelte
@@ -15,7 +15,7 @@
 
 <MenubarPrimitive.SubTrigger
 	class={cn(
-		"flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground",
+		"data-[highlighted]:text-accent-foreground data-[state=open]:text-accent-foreground flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[highlighted]:bg-accent data-[state=open]:bg-accent",
 		inset && "pl-8",
 		className
 	)}
diff --git a/src/components/ui/menubar/menubar-trigger.svelte b/src/components/ui/menubar/menubar-trigger.svelte
index 9e4a76d29..eeddfa91d 100644
--- a/src/components/ui/menubar/menubar-trigger.svelte
+++ b/src/components/ui/menubar/menubar-trigger.svelte
@@ -11,7 +11,7 @@
 
 <MenubarPrimitive.Trigger
 	class={cn(
-		"flex cursor-default select-none items-center rounded-sm px-3 py-1 text-sm font-medium outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground",
+		"focus:text-accent-foreground data-[state=open]:text-accent-foreground flex cursor-default select-none items-center rounded-sm px-3 py-1 text-sm font-medium outline-none focus:bg-accent data-[state=open]:bg-accent",
 		className
 	)}
 	{...$$restProps}
diff --git a/src/components/ui/popover/popover-content.svelte b/src/components/ui/popover/popover-content.svelte
index fd7aff185..7f36486a6 100644
--- a/src/components/ui/popover/popover-content.svelte
+++ b/src/components/ui/popover/popover-content.svelte
@@ -12,7 +12,7 @@
 	{transition}
 	{...$$restProps}
 	class={cn(
-		"z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none ",
+		"bg-popover text-popover-foreground z-50 w-72 rounded-md border p-4 shadow-md outline-none ",
 		className
 	)}
 >
diff --git a/src/components/ui/progress/progress.svelte b/src/components/ui/progress/progress.svelte
index 736a39f9d..80ce8605c 100644
--- a/src/components/ui/progress/progress.svelte
+++ b/src/components/ui/progress/progress.svelte
@@ -11,11 +11,16 @@
 </script>
 
 <ProgressPrimitive.Root
-	class={cn("relative h-2 w-full overflow-hidden rounded-full bg-primary/20", className)}
+	class={cn(
+		"bg-primary/20 relative h-2 w-full overflow-hidden rounded-full",
+		className
+	)}
 	{...$$restProps}
 >
 	<div
-		class="h-full w-full flex-1 bg-primary transition-all"
-		style={`transform: translateX(-${100 - (100 * (value ?? 0)) / (max ?? 1)}%)`}
+		class="bg-primary h-full w-full flex-1 transition-all"
+		style={`transform: translateX(-${
+			100 - (100 * (value ?? 0)) / (max ?? 1)
+		}%)`}
 	/>
 </ProgressPrimitive.Root>
diff --git a/src/components/ui/radio-group/radio-group-item.svelte b/src/components/ui/radio-group/radio-group-item.svelte
index 477eb5267..a4ab60016 100644
--- a/src/components/ui/radio-group/radio-group-item.svelte
+++ b/src/components/ui/radio-group/radio-group-item.svelte
@@ -16,7 +16,7 @@
 <RadioGroupPrimitive.Item
 	{value}
 	class={cn(
-		"aspect-square h-4 w-4 rounded-full border border-primary text-primary shadow focus:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
+		"border-primary text-primary focus-visible:ring-ring aspect-square h-4 w-4 rounded-full border shadow focus:outline-none focus-visible:ring-1 disabled:cursor-not-allowed disabled:opacity-50",
 		className
 	)}
 	{...$$restProps}
@@ -26,7 +26,7 @@
 >
 	<div class="flex items-center justify-center">
 		<RadioGroupPrimitive.ItemIndicator>
-			<Check class="h-3.5 w-3.5 fill-primary" />
+			<Check class="fill-primary h-3.5 w-3.5" />
 		</RadioGroupPrimitive.ItemIndicator>
 	</div>
 </RadioGroupPrimitive.Item>
diff --git a/src/components/ui/radio-group/radio-group.svelte b/src/components/ui/radio-group/radio-group.svelte
index ea9e8c234..a202d12b5 100644
--- a/src/components/ui/radio-group/radio-group.svelte
+++ b/src/components/ui/radio-group/radio-group.svelte
@@ -9,6 +9,10 @@
 	export { className as class };
 </script>
 
-<RadioGroupPrimitive.Root bind:value class={cn("grid gap-2", className)} {...$$restProps}>
+<RadioGroupPrimitive.Root
+	bind:value
+	class={cn("grid gap-2", className)}
+	{...$$restProps}
+>
 	<slot />
 </RadioGroupPrimitive.Root>
diff --git a/src/components/ui/select/select-content.svelte b/src/components/ui/select/select-content.svelte
index 8b4b63187..39efe0eb1 100644
--- a/src/components/ui/select/select-content.svelte
+++ b/src/components/ui/select/select-content.svelte
@@ -14,7 +14,7 @@
 	outTransition={scale}
 	outTransitionConfig={{ start: 0.95, opacity: 0, duration: 50 }}
 	class={cn(
-		"relative z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground outline-none shadow-md data-[state=open]:translate-y-1",
+		"bg-popover text-popover-foreground relative z-50 min-w-[8rem] overflow-hidden rounded-md border shadow-md outline-none data-[state=open]:translate-y-1",
 		className
 	)}
 	{...$$restProps}
diff --git a/src/components/ui/select/select-item.svelte b/src/components/ui/select/select-item.svelte
index bf37c2663..88bd3c3b0 100644
--- a/src/components/ui/select/select-item.svelte
+++ b/src/components/ui/select/select-item.svelte
@@ -18,7 +18,7 @@
 	{disabled}
 	{label}
 	class={cn(
-		"relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+		"focus:text-accent-foreground relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none focus:bg-accent data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
 		className
 	)}
 	{...$$restProps}
diff --git a/src/components/ui/select/select-label.svelte b/src/components/ui/select/select-label.svelte
index c4ade50db..1b13148da 100644
--- a/src/components/ui/select/select-label.svelte
+++ b/src/components/ui/select/select-label.svelte
@@ -8,6 +8,9 @@
 	export { className as class };
 </script>
 
-<SelectPrimitive.Label class={cn("px-2 py-1.5 text-sm font-semibold", className)} {...$$restProps}>
+<SelectPrimitive.Label
+	class={cn("px-2 py-1.5 text-sm font-semibold", className)}
+	{...$$restProps}
+>
 	<slot />
 </SelectPrimitive.Label>
diff --git a/src/components/ui/select/select-separator.svelte b/src/components/ui/select/select-separator.svelte
index 28c13c73d..bdcf82640 100644
--- a/src/components/ui/select/select-separator.svelte
+++ b/src/components/ui/select/select-separator.svelte
@@ -8,4 +8,7 @@
 	export { className as class };
 </script>
 
-<SelectPrimitive.Separator class={cn("-mx-1 my-1 h-px bg-muted", className)} {...$$restProps} />
+<SelectPrimitive.Separator
+	class={cn("-mx-1 my-1 h-px bg-muted", className)}
+	{...$$restProps}
+/>
diff --git a/src/components/ui/select/select-trigger.svelte b/src/components/ui/select/select-trigger.svelte
index 9ea02e84b..dd6ca2584 100644
--- a/src/components/ui/select/select-trigger.svelte
+++ b/src/components/ui/select/select-trigger.svelte
@@ -12,7 +12,7 @@
 
 <SelectPrimitive.Trigger
 	class={cn(
-		"flex h-9 w-full items-center justify-between rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+		"border-input focus:ring-ring flex h-9 w-full items-center justify-between rounded-md border bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
 		className
 	)}
 	{...$$restProps}
diff --git a/src/components/ui/sheet/sheet-content.svelte b/src/components/ui/sheet/sheet-content.svelte
index 9c325dd07..698d7987a 100644
--- a/src/components/ui/sheet/sheet-content.svelte
+++ b/src/components/ui/sheet/sheet-content.svelte
@@ -1,6 +1,12 @@
 <script lang="ts">
 	import { Dialog as SheetPrimitive } from "@/lib";
-	import { SheetOverlay, SheetPortal, sheetVariants, sheetTransitions, type Side } from ".";
+	import {
+		SheetOverlay,
+		SheetPortal,
+		sheetVariants,
+		sheetTransitions,
+		type Side
+	} from ".";
 	import { Cross2 } from "radix-icons-svelte";
 	import { cn } from "@/utils";
 	import { fly } from "svelte/transition";
@@ -27,7 +33,7 @@
 	>
 		<slot />
 		<SheetPrimitive.Close
-			class="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary"
+			class="focus:ring-ring data-[state=open]:bg-secondary absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:pointer-events-none"
 		>
 			<Cross2 class="h-4 w-4" />
 			<span class="sr-only">Close</span>
diff --git a/src/components/ui/sheet/sheet-description.svelte b/src/components/ui/sheet/sheet-description.svelte
index bd48aef12..25586e817 100644
--- a/src/components/ui/sheet/sheet-description.svelte
+++ b/src/components/ui/sheet/sheet-description.svelte
@@ -8,6 +8,9 @@
 	export { className as class };
 </script>
 
-<SheetPrimitive.Description class={cn("text-sm text-muted-foreground", className)} {...$$restProps}>
+<SheetPrimitive.Description
+	class={cn("text-sm text-muted-foreground", className)}
+	{...$$restProps}
+>
 	<slot />
 </SheetPrimitive.Description>
diff --git a/src/components/ui/sheet/sheet-footer.svelte b/src/components/ui/sheet/sheet-footer.svelte
index e6e89194e..30fcce149 100644
--- a/src/components/ui/sheet/sheet-footer.svelte
+++ b/src/components/ui/sheet/sheet-footer.svelte
@@ -9,7 +9,10 @@
 </script>
 
 <div
-	class={cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", className)}
+	class={cn(
+		"flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
+		className
+	)}
 	{...$$restProps}
 >
 	<slot />
diff --git a/src/components/ui/sheet/sheet-header.svelte b/src/components/ui/sheet/sheet-header.svelte
index 358ebbc31..181077da7 100644
--- a/src/components/ui/sheet/sheet-header.svelte
+++ b/src/components/ui/sheet/sheet-header.svelte
@@ -8,6 +8,9 @@
 	export { className as class };
 </script>
 
-<div class={cn("flex flex-col space-y-2 text-center sm:text-left", className)} {...$$restProps}>
+<div
+	class={cn("flex flex-col space-y-2 text-center sm:text-left", className)}
+	{...$$restProps}
+>
 	<slot />
 </div>
diff --git a/src/components/ui/skeleton/skeleton.svelte b/src/components/ui/skeleton/skeleton.svelte
index bf6063bf5..5a1039160 100644
--- a/src/components/ui/skeleton/skeleton.svelte
+++ b/src/components/ui/skeleton/skeleton.svelte
@@ -8,4 +8,7 @@
 	export { className as class };
 </script>
 
-<div class={cn("animate-pulse rounded-md bg-primary/10", className)} {...$$restProps} />
+<div
+	class={cn("bg-primary/10 animate-pulse rounded-md", className)}
+	{...$$restProps}
+/>
diff --git a/src/components/ui/slider/slider.svelte b/src/components/ui/slider/slider.svelte
index e450d39b2..1b95379f1 100644
--- a/src/components/ui/slider/slider.svelte
+++ b/src/components/ui/slider/slider.svelte
@@ -11,13 +11,18 @@
 
 <SliderPrimitive.Root
 	bind:value
-	class={cn("relative flex w-full touch-none select-none items-center", className)}
+	class={cn(
+		"relative flex w-full touch-none select-none items-center",
+		className
+	)}
 	{...$$restProps}
 >
-	<span class="relative h-1.5 w-full grow overflow-hidden rounded-full bg-primary/20">
-		<SliderPrimitive.Range class="absolute h-full bg-primary" />
+	<span
+		class="bg-primary/20 relative h-1.5 w-full grow overflow-hidden rounded-full"
+	>
+		<SliderPrimitive.Range class="bg-primary absolute h-full" />
 	</span>
 	<SliderPrimitive.Thumb
-		class="block h-4 w-4 rounded-full border border-primary/50 bg-background shadow transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50"
+		class="border-primary/50 focus-visible:ring-ring block h-4 w-4 rounded-full border bg-background shadow transition-colors focus-visible:outline-none focus-visible:ring-1 disabled:pointer-events-none disabled:opacity-50"
 	/>
 </SliderPrimitive.Root>
diff --git a/src/components/ui/switch/switch.svelte b/src/components/ui/switch/switch.svelte
index 7ecae2e18..03ff17baf 100644
--- a/src/components/ui/switch/switch.svelte
+++ b/src/components/ui/switch/switch.svelte
@@ -13,7 +13,7 @@
 <SwitchPrimitive.Root
 	bind:checked
 	class={cn(
-		"peer inline-flex h-[20px] w-[36px] shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",
+		"focus-visible:ring-ring data-[state=checked]:bg-primary data-[state=unchecked]:bg-input peer inline-flex h-[20px] w-[36px] shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50",
 		className
 	)}
 	{...$$restProps}
diff --git a/src/components/ui/table/table-caption.svelte b/src/components/ui/table/table-caption.svelte
index 4123118f5..752c70e65 100644
--- a/src/components/ui/table/table-caption.svelte
+++ b/src/components/ui/table/table-caption.svelte
@@ -8,6 +8,9 @@
 	export { className as class };
 </script>
 
-<caption class={cn("mt-4 text-sm text-muted-foreground", className)} {...$$restProps}>
+<caption
+	class={cn("mt-4 text-sm text-muted-foreground", className)}
+	{...$$restProps}
+>
 	<slot />
 </caption>
diff --git a/src/components/ui/table/table-footer.svelte b/src/components/ui/table/table-footer.svelte
index 187b8cc2f..ddb8a11ad 100644
--- a/src/components/ui/table/table-footer.svelte
+++ b/src/components/ui/table/table-footer.svelte
@@ -8,6 +8,9 @@
 	export { className as class };
 </script>
 
-<tfoot class={cn("bg-primary font-medium text-primary-foreground", className)} {...$$restProps}>
+<tfoot
+	class={cn("bg-primary text-primary-foreground font-medium", className)}
+	{...$$restProps}
+>
 	<slot />
 </tfoot>
diff --git a/src/components/ui/table/table.svelte b/src/components/ui/table/table.svelte
index 876e8541f..1736a8a80 100644
--- a/src/components/ui/table/table.svelte
+++ b/src/components/ui/table/table.svelte
@@ -9,7 +9,10 @@
 </script>
 
 <div class="w-full overflow-auto rounded-md">
-	<table class={cn("w-full caption-bottom text-sm", className)} {...$$restProps}>
+	<table
+		class={cn("w-full caption-bottom text-sm", className)}
+		{...$$restProps}
+	>
 		<slot />
 	</table>
 </div>
diff --git a/src/components/ui/tabs/tabs-content.svelte b/src/components/ui/tabs/tabs-content.svelte
index 42fb6eff7..16cb218a6 100644
--- a/src/components/ui/tabs/tabs-content.svelte
+++ b/src/components/ui/tabs/tabs-content.svelte
@@ -11,7 +11,7 @@
 
 <TabsPrimitive.Content
 	class={cn(
-		"mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+		"focus-visible:ring-ring mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2",
 		className
 	)}
 	{value}
diff --git a/src/components/ui/tabs/tabs-trigger.svelte b/src/components/ui/tabs/tabs-trigger.svelte
index d4d841964..3f077ce5f 100644
--- a/src/components/ui/tabs/tabs-trigger.svelte
+++ b/src/components/ui/tabs/tabs-trigger.svelte
@@ -12,7 +12,7 @@
 
 <TabsPrimitive.Trigger
 	class={cn(
-		"inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow",
+		"focus-visible:ring-ring inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow",
 		className
 	)}
 	{value}
diff --git a/src/components/ui/textarea/textarea.svelte b/src/components/ui/textarea/textarea.svelte
index af7cc90fa..fb198fdca 100644
--- a/src/components/ui/textarea/textarea.svelte
+++ b/src/components/ui/textarea/textarea.svelte
@@ -11,7 +11,7 @@
 
 <textarea
 	class={cn(
-		"flex min-h-[60px] w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
+		"border-input focus-visible:ring-ring flex min-h-[60px] w-full rounded-md border bg-transparent px-3 py-2 text-sm shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 disabled:cursor-not-allowed disabled:opacity-50",
 		className
 	)}
 	bind:value
diff --git a/src/components/ui/tooltip/tooltip-content.svelte b/src/components/ui/tooltip/tooltip-content.svelte
index 406093afa..377aa3f9e 100644
--- a/src/components/ui/tooltip/tooltip-content.svelte
+++ b/src/components/ui/tooltip/tooltip-content.svelte
@@ -15,7 +15,7 @@
 	transitionConfig={{ y: 8, start: 0.95, duration: 150 }}
 	{sideOffset}
 	class={cn(
-		"z-50 overflow-hidden rounded-md bg-primary px-3 py-1.5 text-xs text-primary-foreground ",
+		"bg-primary text-primary-foreground z-50 overflow-hidden rounded-md px-3 py-1.5 text-xs ",
 		className
 	)}
 	{...$$restProps}
diff --git a/src/lib/bits/accordion/components/AccordionContent.svelte b/src/lib/bits/accordion/components/AccordionContent.svelte
index 2324c89ac..7885e830e 100644
--- a/src/lib/bits/accordion/components/AccordionContent.svelte
+++ b/src/lib/bits/accordion/components/AccordionContent.svelte
@@ -13,7 +13,8 @@
 	export let transition: $$Props["transition"] = undefined;
 	export let transitionConfig: $$Props["transitionConfig"] = undefined;
 	export let inTransition: $$Props["inTransition"] = undefined;
-	export let inTransitionConfig: ContentProps<T>["inTransitionConfig"] = undefined;
+	export let inTransitionConfig: ContentProps<T>["inTransitionConfig"] =
+		undefined;
 	export let outTransition: $$Props["outTransition"] = undefined;
 	export let outTransitionConfig: $$Props["outTransitionConfig"] = undefined;
 	export let asChild: $$Props["asChild"] = false;
@@ -32,7 +33,12 @@
 {#if asChild && $isSelected(props)}
 	<slot {...slotProps} />
 {:else if transition && $isSelected(props)}
-	<div transition:transition={transitionConfig} use:melt={builder} {...$$restProps} {...attrs}>
+	<div
+		transition:transition={transitionConfig}
+		use:melt={builder}
+		{...$$restProps}
+		{...attrs}
+	>
 		<slot {...slotProps} />
 	</div>
 {:else if inTransition && outTransition && $isSelected(props)}
@@ -46,11 +52,21 @@
 		<slot {...slotProps} />
 	</div>
 {:else if inTransition && $isSelected(props)}
-	<div in:inTransition={inTransitionConfig} use:melt={builder} {...$$restProps} {...attrs}>
+	<div
+		in:inTransition={inTransitionConfig}
+		use:melt={builder}
+		{...$$restProps}
+		{...attrs}
+	>
 		<slot {...slotProps} />
 	</div>
 {:else if outTransition && $isSelected(props)}
-	<div out:outTransition={outTransitionConfig} use:melt={builder} {...$$restProps} {...attrs}>
+	<div
+		out:outTransition={outTransitionConfig}
+		use:melt={builder}
+		{...$$restProps}
+		{...attrs}
+	>
 		<slot {...slotProps} />
 	</div>
 {:else if $isSelected(props)}
diff --git a/src/lib/bits/alert-dialog/components/AlertDialogContent.svelte b/src/lib/bits/alert-dialog/components/AlertDialogContent.svelte
index 2093fbcb6..7a055fb68 100644
--- a/src/lib/bits/alert-dialog/components/AlertDialogContent.svelte
+++ b/src/lib/bits/alert-dialog/components/AlertDialogContent.svelte
@@ -40,7 +40,12 @@
 {#if asChild && $open}
 	<slot {...slotProps} />
 {:else if transition && $open}
-	<div transition:transition={transitionConfig} use:melt={builder} {...$$restProps} {...attrs}>
+	<div
+		transition:transition={transitionConfig}
+		use:melt={builder}
+		{...$$restProps}
+		{...attrs}
+	>
 		<slot {...slotProps} />
 	</div>
 {:else if inTransition && outTransition && $open}
@@ -54,11 +59,21 @@
 		<slot {...slotProps} />
 	</div>
 {:else if inTransition && $open}
-	<div in:inTransition={inTransitionConfig} use:melt={builder} {...$$restProps} {...attrs}>
+	<div
+		in:inTransition={inTransitionConfig}
+		use:melt={builder}
+		{...$$restProps}
+		{...attrs}
+	>
 		<slot {...slotProps} />
 	</div>
 {:else if outTransition && $open}
-	<div out:outTransition={outTransitionConfig} use:melt={builder} {...$$restProps} {...attrs}>
+	<div
+		out:outTransition={outTransitionConfig}
+		use:melt={builder}
+		{...$$restProps}
+		{...attrs}
+	>
 		<slot {...slotProps} />
 	</div>
 {:else if $open}
diff --git a/src/lib/bits/alert-dialog/components/AlertDialogOverlay.svelte b/src/lib/bits/alert-dialog/components/AlertDialogOverlay.svelte
index e7ba5193d..a87704d05 100644
--- a/src/lib/bits/alert-dialog/components/AlertDialogOverlay.svelte
+++ b/src/lib/bits/alert-dialog/components/AlertDialogOverlay.svelte
@@ -35,7 +35,12 @@
 {#if asChild && $open}
 	<slot {...slotProps} />
 {:else if transition && $open}
-	<div transition:transition={transitionConfig} use:melt={builder} {...$$restProps} {...attrs} />
+	<div
+		transition:transition={transitionConfig}
+		use:melt={builder}
+		{...$$restProps}
+		{...attrs}
+	/>
 {:else if inTransition && outTransition && $open}
 	<div
 		in:inTransition={inTransitionConfig}
@@ -44,9 +49,19 @@
 		{...$$restProps}
 	/>
 {:else if inTransition && $open}
-	<div in:inTransition={inTransitionConfig} use:melt={builder} {...$$restProps} {...attrs} />
+	<div
+		in:inTransition={inTransitionConfig}
+		use:melt={builder}
+		{...$$restProps}
+		{...attrs}
+	/>
 {:else if outTransition && $open}
-	<div out:outTransition={outTransitionConfig} use:melt={builder} {...$$restProps} {...attrs} />
+	<div
+		out:outTransition={outTransitionConfig}
+		use:melt={builder}
+		{...$$restProps}
+		{...attrs}
+	/>
 {:else if $open}
 	<div use:melt={builder} {...$$restProps} {...attrs} />
 {/if}
diff --git a/src/lib/bits/aspect-ratio/components/AspectRatio.svelte b/src/lib/bits/aspect-ratio/components/AspectRatio.svelte
index fc53bd437..dffec5c52 100644
--- a/src/lib/bits/aspect-ratio/components/AspectRatio.svelte
+++ b/src/lib/bits/aspect-ratio/components/AspectRatio.svelte
@@ -4,7 +4,11 @@
 	export let ratio: $$Props["ratio"] = 1 / 1;
 </script>
 
-<div style:position="relative" style:width="100%" style:padding-bottom="{100 / ratio}%">
+<div
+	style:position="relative"
+	style:width="100%"
+	style:padding-bottom="{100 / ratio}%"
+>
 	<div
 		style:position="absolute"
 		style:top="0"
diff --git a/src/lib/bits/avatar/components/Avatar.svelte b/src/lib/bits/avatar/components/Avatar.svelte
index 3cd12f162..d4ba162fe 100644
--- a/src/lib/bits/avatar/components/Avatar.svelte
+++ b/src/lib/bits/avatar/components/Avatar.svelte
@@ -5,7 +5,8 @@
 	type $$Props = Props;
 	export let delayMs: $$Props["delayMs"] = undefined;
 	export let loadingStatus: $$Props["loadingStatus"] = undefined;
-	export let onLoadingStatusChange: $$Props["onLoadingStatusChange"] = undefined;
+	export let onLoadingStatusChange: $$Props["onLoadingStatusChange"] =
+		undefined;
 	export let asChild: $$Props["asChild"] = false;
 
 	const {
diff --git a/src/lib/bits/collapsible/components/CollapsibleContent.svelte b/src/lib/bits/collapsible/components/CollapsibleContent.svelte
index 06b4e393f..a29e53f41 100644
--- a/src/lib/bits/collapsible/components/CollapsibleContent.svelte
+++ b/src/lib/bits/collapsible/components/CollapsibleContent.svelte
@@ -34,7 +34,12 @@
 {#if asChild && $open}
 	<slot {...slotProps} />
 {:else if transition && $open}
-	<div transition:transition={transitionConfig} use:melt={builder} {...$$restProps} {...attrs}>
+	<div
+		transition:transition={transitionConfig}
+		use:melt={builder}
+		{...$$restProps}
+		{...attrs}
+	>
 		<slot {...slotProps} />
 	</div>
 {:else if inTransition && outTransition && $open}
@@ -48,11 +53,21 @@
 		<slot {...slotProps} />
 	</div>
 {:else if inTransition && $open}
-	<div in:inTransition={inTransitionConfig} use:melt={builder} {...$$restProps} {...attrs}>
+	<div
+		in:inTransition={inTransitionConfig}
+		use:melt={builder}
+		{...$$restProps}
+		{...attrs}
+	>
 		<slot {...slotProps} />
 	</div>
 {:else if outTransition && $open}
-	<div out:outTransition={outTransitionConfig} use:melt={builder} {...$$restProps} {...attrs}>
+	<div
+		out:outTransition={outTransitionConfig}
+		use:melt={builder}
+		{...$$restProps}
+		{...attrs}
+	>
 		<slot {...slotProps} />
 	</div>
 {:else if $open}
diff --git a/src/lib/bits/collapsible/components/CollapsibleTrigger.svelte b/src/lib/bits/collapsible/components/CollapsibleTrigger.svelte
index 11dc07f0e..431c88d10 100644
--- a/src/lib/bits/collapsible/components/CollapsibleTrigger.svelte
+++ b/src/lib/bits/collapsible/components/CollapsibleTrigger.svelte
@@ -26,7 +26,13 @@
 {#if asChild}
 	<slot {...slotProps} />
 {:else}
-	<button use:melt={builder} type="button" {...$$restProps} {...attrs} on:m-click={dispatch}>
+	<button
+		use:melt={builder}
+		type="button"
+		{...$$restProps}
+		{...attrs}
+		on:m-click={dispatch}
+	>
 		<slot {...slotProps} />
 	</button>
 {/if}
diff --git a/src/lib/bits/context-menu/components/ContextMenu.svelte b/src/lib/bits/context-menu/components/ContextMenu.svelte
index ba5a6f032..924bfa27a 100644
--- a/src/lib/bits/context-menu/components/ContextMenu.svelte
+++ b/src/lib/bits/context-menu/components/ContextMenu.svelte
@@ -15,7 +15,8 @@
 	export let dir: $$Props["dir"] = undefined;
 	export let typeahead: $$Props["typeahead"] = undefined;
 	export let closeFocus: $$Props["closeFocus"] = undefined;
-	export let disableFocusFirstItem: $$Props["disableFocusFirstItem"] = undefined;
+	export let disableFocusFirstItem: $$Props["disableFocusFirstItem"] =
+		undefined;
 
 	const {
 		states: { open: localOpen },
@@ -43,10 +44,13 @@
 		}
 	});
 
-	const idValues = derived([ids.menu, ids.trigger], ([$menuId, $triggerId]) => ({
-		menu: $menuId,
-		trigger: $triggerId
-	}));
+	const idValues = derived(
+		[ids.menu, ids.trigger],
+		([$menuId, $triggerId]) => ({
+			menu: $menuId,
+			trigger: $triggerId
+		})
+	);
 
 	$: open !== undefined && localOpen.set(open);
 
diff --git a/src/lib/bits/context-menu/components/ContextMenuSub.svelte b/src/lib/bits/context-menu/components/ContextMenuSub.svelte
index bc86d4247..5a837512d 100644
--- a/src/lib/bits/context-menu/components/ContextMenuSub.svelte
+++ b/src/lib/bits/context-menu/components/ContextMenuSub.svelte
@@ -25,10 +25,13 @@
 		}
 	});
 
-	const idValues = derived([ids.menu, ids.trigger], ([$menuId, $triggerId]) => ({
-		menu: $menuId,
-		trigger: $triggerId
-	}));
+	const idValues = derived(
+		[ids.menu, ids.trigger],
+		([$menuId, $triggerId]) => ({
+			menu: $menuId,
+			trigger: $triggerId
+		})
+	);
 
 	$: open !== undefined && subOpen.set(open);
 
diff --git a/src/lib/bits/dialog/components/DialogContent.svelte b/src/lib/bits/dialog/components/DialogContent.svelte
index 87c401dd3..f563e5a02 100644
--- a/src/lib/bits/dialog/components/DialogContent.svelte
+++ b/src/lib/bits/dialog/components/DialogContent.svelte
@@ -40,7 +40,12 @@
 {#if asChild && $open}
 	<slot {...slotProps} />
 {:else if transition && $open}
-	<div transition:transition={transitionConfig} use:melt={builder} {...$$restProps} {...attrs}>
+	<div
+		transition:transition={transitionConfig}
+		use:melt={builder}
+		{...$$restProps}
+		{...attrs}
+	>
 		<slot {...slotProps} />
 	</div>
 {:else if inTransition && outTransition && $open}
@@ -54,11 +59,21 @@
 		<slot {...slotProps} />
 	</div>
 {:else if inTransition && $open}
-	<div in:inTransition={inTransitionConfig} use:melt={builder} {...$$restProps} {...attrs}>
+	<div
+		in:inTransition={inTransitionConfig}
+		use:melt={builder}
+		{...$$restProps}
+		{...attrs}
+	>
 		<slot {...slotProps} />
 	</div>
 {:else if outTransition && $open}
-	<div out:outTransition={outTransitionConfig} use:melt={builder} {...$$restProps} {...attrs}>
+	<div
+		out:outTransition={outTransitionConfig}
+		use:melt={builder}
+		{...$$restProps}
+		{...attrs}
+	>
 		<slot {...slotProps} />
 	</div>
 {:else if $open}
diff --git a/src/lib/bits/dialog/components/DialogOverlay.svelte b/src/lib/bits/dialog/components/DialogOverlay.svelte
index d07afa809..ccaf96815 100644
--- a/src/lib/bits/dialog/components/DialogOverlay.svelte
+++ b/src/lib/bits/dialog/components/DialogOverlay.svelte
@@ -34,7 +34,12 @@
 {#if asChild && $open}
 	<slot {...slotProps} />
 {:else if transition && $open}
-	<div transition:transition={transitionConfig} use:melt={builder} {...$$restProps} {...attrs} />
+	<div
+		transition:transition={transitionConfig}
+		use:melt={builder}
+		{...$$restProps}
+		{...attrs}
+	/>
 {:else if inTransition && outTransition && $open}
 	<div
 		in:inTransition={inTransitionConfig}
@@ -44,9 +49,19 @@
 		{...attrs}
 	/>
 {:else if inTransition && $open}
-	<div in:inTransition={inTransitionConfig} use:melt={builder} {...$$restProps} {...attrs} />
+	<div
+		in:inTransition={inTransitionConfig}
+		use:melt={builder}
+		{...$$restProps}
+		{...attrs}
+	/>
 {:else if outTransition && $open}
-	<div out:outTransition={outTransitionConfig} use:melt={builder} {...$$restProps} {...attrs} />
+	<div
+		out:outTransition={outTransitionConfig}
+		use:melt={builder}
+		{...$$restProps}
+		{...attrs}
+	/>
 {:else if $open}
 	<div use:melt={builder} {...$$restProps} {...attrs} />
 {/if}
diff --git a/src/lib/bits/dropdown-menu/components/DropdownMenu.svelte b/src/lib/bits/dropdown-menu/components/DropdownMenu.svelte
index 7b7e5884f..407c33bf9 100644
--- a/src/lib/bits/dropdown-menu/components/DropdownMenu.svelte
+++ b/src/lib/bits/dropdown-menu/components/DropdownMenu.svelte
@@ -15,7 +15,8 @@
 	export let dir: $$Props["dir"] = undefined;
 	export let typeahead: $$Props["typeahead"] = undefined;
 	export let closeFocus: $$Props["closeFocus"] = undefined;
-	export let disableFocusFirstItem: $$Props["disableFocusFirstItem"] = undefined;
+	export let disableFocusFirstItem: $$Props["disableFocusFirstItem"] =
+		undefined;
 
 	const {
 		states: { open: localOpen },
@@ -43,10 +44,13 @@
 		}
 	});
 
-	const idValues = derived([ids.menu, ids.trigger], ([$menuId, $triggerId]) => ({
-		menu: $menuId,
-		trigger: $triggerId
-	}));
+	const idValues = derived(
+		[ids.menu, ids.trigger],
+		([$menuId, $triggerId]) => ({
+			menu: $menuId,
+			trigger: $triggerId
+		})
+	);
 
 	$: open !== undefined && localOpen.set(open);
 
diff --git a/src/lib/bits/dropdown-menu/components/DropdownMenuSub.svelte b/src/lib/bits/dropdown-menu/components/DropdownMenuSub.svelte
index bc86d4247..5a837512d 100644
--- a/src/lib/bits/dropdown-menu/components/DropdownMenuSub.svelte
+++ b/src/lib/bits/dropdown-menu/components/DropdownMenuSub.svelte
@@ -25,10 +25,13 @@
 		}
 	});
 
-	const idValues = derived([ids.menu, ids.trigger], ([$menuId, $triggerId]) => ({
-		menu: $menuId,
-		trigger: $triggerId
-	}));
+	const idValues = derived(
+		[ids.menu, ids.trigger],
+		([$menuId, $triggerId]) => ({
+			menu: $menuId,
+			trigger: $triggerId
+		})
+	);
 
 	$: open !== undefined && subOpen.set(open);
 
diff --git a/src/lib/bits/label/components/Label.svelte b/src/lib/bits/label/components/Label.svelte
index bd29b452c..9ea38cc11 100644
--- a/src/lib/bits/label/components/Label.svelte
+++ b/src/lib/bits/label/components/Label.svelte
@@ -26,7 +26,12 @@
 {#if asChild}
 	<slot {...slotProps} />
 {:else}
-	<label use:melt={builder} {...$$restProps} {...attrs} on:m-mousedown={dispatch}>
+	<label
+		use:melt={builder}
+		{...$$restProps}
+		{...attrs}
+		on:m-mousedown={dispatch}
+	>
 		<slot {...slotProps} />
 	</label>
 {/if}
diff --git a/src/lib/bits/link-preview/components/LinkPreview.svelte b/src/lib/bits/link-preview/components/LinkPreview.svelte
index ad2b23d51..5db8e09bd 100644
--- a/src/lib/bits/link-preview/components/LinkPreview.svelte
+++ b/src/lib/bits/link-preview/components/LinkPreview.svelte
@@ -34,10 +34,13 @@
 		}
 	});
 
-	const idValues = derived([ids.content, ids.trigger], ([$contentId, $triggerId]) => ({
-		content: $contentId,
-		trigger: $triggerId
-	}));
+	const idValues = derived(
+		[ids.content, ids.trigger],
+		([$contentId, $triggerId]) => ({
+			content: $contentId,
+			trigger: $triggerId
+		})
+	);
 
 	$: open !== undefined && localOpen.set(open);
 	$: updateOption("positioning", positioning);
diff --git a/src/lib/bits/menubar/components/MenubarMenu.svelte b/src/lib/bits/menubar/components/MenubarMenu.svelte
index fe954ec21..dceb4b7a2 100644
--- a/src/lib/bits/menubar/components/MenubarMenu.svelte
+++ b/src/lib/bits/menubar/components/MenubarMenu.svelte
@@ -15,7 +15,8 @@
 	export let dir: $$Props["dir"] = undefined;
 	export let typeahead: $$Props["typeahead"] = undefined;
 	export let closeFocus: $$Props["closeFocus"] = undefined;
-	export let disableFocusFirstItem: $$Props["disableFocusFirstItem"] = undefined;
+	export let disableFocusFirstItem: $$Props["disableFocusFirstItem"] =
+		undefined;
 
 	const {
 		states: { open: localOpen },
@@ -41,10 +42,13 @@
 		}
 	});
 
-	const idValues = derived([ids.menu, ids.trigger], ([$menuId, $triggerId]) => ({
-		menu: $menuId,
-		trigger: $triggerId
-	}));
+	const idValues = derived(
+		[ids.menu, ids.trigger],
+		([$menuId, $triggerId]) => ({
+			menu: $menuId,
+			trigger: $triggerId
+		})
+	);
 
 	$: open !== undefined && localOpen.set(open);
 
diff --git a/src/lib/bits/menubar/components/MenubarSub.svelte b/src/lib/bits/menubar/components/MenubarSub.svelte
index c86952cc2..7177c88b2 100644
--- a/src/lib/bits/menubar/components/MenubarSub.svelte
+++ b/src/lib/bits/menubar/components/MenubarSub.svelte
@@ -26,10 +26,13 @@
 		}
 	});
 
-	const idValues = derived([ids.menu, ids.trigger], ([$menuId, $triggerId]) => ({
-		menu: $menuId,
-		trigger: $triggerId
-	}));
+	const idValues = derived(
+		[ids.menu, ids.trigger],
+		([$menuId, $triggerId]) => ({
+			menu: $menuId,
+			trigger: $triggerId
+		})
+	);
 
 	$: open !== undefined && subOpen.set(open);
 
diff --git a/src/lib/bits/popover/components/Popover.svelte b/src/lib/bits/popover/components/Popover.svelte
index 5050899e2..0c81b3b5e 100644
--- a/src/lib/bits/popover/components/Popover.svelte
+++ b/src/lib/bits/popover/components/Popover.svelte
@@ -38,10 +38,13 @@
 		}
 	});
 
-	const idValues = derived([ids.content, ids.trigger], ([$contentId, $triggerId]) => ({
-		content: $contentId,
-		trigger: $triggerId
-	}));
+	const idValues = derived(
+		[ids.content, ids.trigger],
+		([$contentId, $triggerId]) => ({
+			content: $contentId,
+			trigger: $triggerId
+		})
+	);
 
 	$: open !== undefined && localOpen.set(open);
 
diff --git a/src/lib/bits/popover/components/PopoverContent.svelte b/src/lib/bits/popover/components/PopoverContent.svelte
index 35c58b8bb..253ba35e0 100644
--- a/src/lib/bits/popover/components/PopoverContent.svelte
+++ b/src/lib/bits/popover/components/PopoverContent.svelte
@@ -40,7 +40,12 @@
 {#if asChild && $open}
 	<slot {...slotProps} />
 {:else if transition && $open}
-	<div transition:transition={transitionConfig} use:melt={builder} {...$$restProps} {...attrs}>
+	<div
+		transition:transition={transitionConfig}
+		use:melt={builder}
+		{...$$restProps}
+		{...attrs}
+	>
 		<slot {...slotProps} />
 	</div>
 {:else if inTransition && outTransition && $open}
@@ -54,11 +59,21 @@
 		<slot {...slotProps} />
 	</div>
 {:else if inTransition && $open}
-	<div in:inTransition={inTransitionConfig} use:melt={builder} {...$$restProps} {...attrs}>
+	<div
+		in:inTransition={inTransitionConfig}
+		use:melt={builder}
+		{...$$restProps}
+		{...attrs}
+	>
 		<slot {...slotProps} />
 	</div>
 {:else if outTransition && $open}
-	<div out:outTransition={outTransitionConfig} use:melt={builder} {...$$restProps} {...attrs}>
+	<div
+		out:outTransition={outTransitionConfig}
+		use:melt={builder}
+		{...$$restProps}
+		{...attrs}
+	>
 		<slot {...slotProps} />
 	</div>
 {:else if $open}
diff --git a/src/lib/bits/select/components/SelectContent.svelte b/src/lib/bits/select/components/SelectContent.svelte
index 81af82f5a..a90c2c0c2 100644
--- a/src/lib/bits/select/components/SelectContent.svelte
+++ b/src/lib/bits/select/components/SelectContent.svelte
@@ -87,7 +87,13 @@
 		<slot {...slotProps} />
 	</div>
 {:else if $open}
-	<div use:melt={builder} {...$$restProps} {...attrs} on:m-pointerleave={dispatch} on:keydown>
+	<div
+		use:melt={builder}
+		{...$$restProps}
+		{...attrs}
+		on:m-pointerleave={dispatch}
+		on:keydown
+	>
 		<slot {...slotProps} />
 	</div>
 {/if}
diff --git a/src/lib/bits/select/components/SelectInput.svelte b/src/lib/bits/select/components/SelectInput.svelte
index 4f5fbb971..8548d0a4a 100644
--- a/src/lib/bits/select/components/SelectInput.svelte
+++ b/src/lib/bits/select/components/SelectInput.svelte
@@ -15,11 +15,19 @@
 	const attrs = getAttrs("input");
 
 	$: builder = $hiddenInput;
-	$: slotProps = { builder, attrs: { ...attrs, disabled: $disabled ? true : undefined } };
+	$: slotProps = {
+		builder,
+		attrs: { ...attrs, disabled: $disabled ? true : undefined }
+	};
 </script>
 
 {#if asChild}
 	<slot {...slotProps} />
 {:else}
-	<input use:melt={builder} {...$$restProps} {...attrs} disabled={$disabled ? true : undefined} />
+	<input
+		use:melt={builder}
+		{...$$restProps}
+		{...attrs}
+		disabled={$disabled ? true : undefined}
+	/>
 {/if}
diff --git a/src/lib/bits/slider/components/SliderThumb.svelte b/src/lib/bits/slider/components/SliderThumb.svelte
index 443e9ca17..7e445a672 100644
--- a/src/lib/bits/slider/components/SliderThumb.svelte
+++ b/src/lib/bits/slider/components/SliderThumb.svelte
@@ -23,5 +23,10 @@
 {#if asChild}
 	<slot {...slotProps} />
 {:else}
-	<span use:melt={builder} {...$$restProps} {...attrs} on:m-keydown={dispatch} />
+	<span
+		use:melt={builder}
+		{...$$restProps}
+		{...attrs}
+		on:m-keydown={dispatch}
+	/>
 {/if}
diff --git a/src/lib/bits/tooltip/components/Tooltip.svelte b/src/lib/bits/tooltip/components/Tooltip.svelte
index 5123e2a9f..89622b85c 100644
--- a/src/lib/bits/tooltip/components/Tooltip.svelte
+++ b/src/lib/bits/tooltip/components/Tooltip.svelte
@@ -13,7 +13,8 @@
 	export let closeDelay: $$Props["closeDelay"] = undefined;
 	export let open: $$Props["open"] = undefined;
 	export let onOpenChange: $$Props["onOpenChange"] = undefined;
-	export let disableHoverableContent: $$Props["disableHoverableContent"] = undefined;
+	export let disableHoverableContent: $$Props["disableHoverableContent"] =
+		undefined;
 	export let group: $$Props["group"] = undefined;
 
 	const {
@@ -40,10 +41,13 @@
 		}
 	});
 
-	const idValues = derived([ids.content, ids.trigger], ([$contentId, $triggerId]) => ({
-		content: $contentId,
-		trigger: $triggerId
-	}));
+	const idValues = derived(
+		[ids.content, ids.trigger],
+		([$contentId, $triggerId]) => ({
+			content: $contentId,
+			trigger: $triggerId
+		})
+	);
 
 	$: open !== undefined && localOpen.set(open);
 	$: updateOption("positioning", positioning);
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 5d45a66cc..dbde048a8 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -1,8 +1,14 @@
 <script lang="ts">
-	import { PageHeader, PageHeaderHeading, PageHeaderDescription } from "@/components";
+	import {
+		PageHeader,
+		PageHeaderHeading,
+		PageHeaderDescription
+	} from "@/components";
 </script>
 
 <PageHeader>
 	<PageHeaderHeading>Introduction</PageHeaderHeading>
-	<PageHeaderDescription>Headless UI Components for Svelte.</PageHeaderDescription>
+	<PageHeaderDescription
+		>Headless UI Components for Svelte.</PageHeaderDescription
+	>
 </PageHeader>
diff --git a/src/routes/docs/[...slug]/+page.svelte b/src/routes/docs/[...slug]/+page.svelte
index a5930776c..4e3e67147 100644
--- a/src/routes/docs/[...slug]/+page.svelte
+++ b/src/routes/docs/[...slug]/+page.svelte
@@ -2,7 +2,11 @@
 	import "@/styles/markdown.postcss";
 	import type { SvelteComponent } from "svelte";
 	import type { PageData } from "./$types";
-	import { PageHeader, PageHeaderDescription, PageHeaderHeading } from "@/components";
+	import {
+		PageHeader,
+		PageHeaderDescription,
+		PageHeaderHeading
+	} from "@/components";
 	type Component = $$Generic<typeof SvelteComponent>;
 
 	export let data: PageData;
diff --git a/src/routes/docs/components/[name]/+page.svelte b/src/routes/docs/components/[name]/+page.svelte
index a4c3ddec5..7850851d8 100644
--- a/src/routes/docs/components/[name]/+page.svelte
+++ b/src/routes/docs/components/[name]/+page.svelte
@@ -2,7 +2,11 @@
 	import "@/styles/markdown.postcss";
 	import type { SvelteComponent } from "svelte";
 	import type { PageData } from "./$types";
-	import { PageHeader, PageHeaderDescription, PageHeaderHeading } from "@/components";
+	import {
+		PageHeader,
+		PageHeaderDescription,
+		PageHeaderHeading
+	} from "@/components";
 	type Component = $$Generic<typeof SvelteComponent>;
 
 	export let data: PageData;
diff --git a/src/routes/docs/sink/+page.svelte b/src/routes/docs/sink/+page.svelte
index a536e988b..6b2f96f0e 100644
--- a/src/routes/docs/sink/+page.svelte
+++ b/src/routes/docs/sink/+page.svelte
@@ -28,7 +28,9 @@
 		</div>
 		<Sheet.Footer>
 			<Sheet.Close asChild let:builder>
-				<Button.Root builders={[builder]} type="submit">Save changes</Button.Root>
+				<Button.Root builders={[builder]} type="submit"
+					>Save changes</Button.Root
+				>
 			</Sheet.Close>
 		</Sheet.Footer>
 	</Sheet.Content>
diff --git a/src/styles/buttonVariants.ts b/src/styles/buttonVariants.ts
index d750c464c..d14c45ff3 100644
--- a/src/styles/buttonVariants.ts
+++ b/src/styles/buttonVariants.ts
@@ -1,4 +1,3 @@
-
 import { tv } from "tailwind-variants";
 
 /**
@@ -12,18 +11,15 @@ export const buttonVariants = tv({
 	variants: {
 		variant: {
 			default: "bg-primary text-primary-foreground hover:bg-primary/90",
-			destructive:
-				"bg-destructive text-destructive-foreground hover:bg-destructive/90",
-			outline:
-				"border border-input bg-background hover:bg-accent hover:text-accent-foreground",
-			secondary:
-				"bg-secondary text-secondary-foreground hover:bg-secondary/80",
+			destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+			outline: "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
+			secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
 			ghost: "hover:bg-accent hover:text-accent-foreground",
 			link: "text-primary underline-offset-4 hover:underline"
 		},
 		size: {
 			default: "h-12 px-[21px] py-4 text-[15px] rounded-[9px]",
-			sm: "h-8 rounded-md px-3", 
+			sm: "h-8 rounded-md px-3",
 			lg: "h-11 rounded-md px-8",
 			icon: "h-10 w-10"
 		}
@@ -33,4 +29,3 @@ export const buttonVariants = tv({
 		size: "default"
 	}
 });
-
diff --git a/src/tests/accordion/AccordionTest.svelte b/src/tests/accordion/AccordionTest.svelte
index 8e8e39e7c..07b41540a 100644
--- a/src/tests/accordion/AccordionTest.svelte
+++ b/src/tests/accordion/AccordionTest.svelte
@@ -24,7 +24,9 @@
 					{title}
 				</Accordion.Trigger>
 			</Accordion.Header>
-			<Accordion.Content data-testid="{value}-content">{content}</Accordion.Content>
+			<Accordion.Content data-testid="{value}-content"
+				>{content}</Accordion.Content
+			>
 		</Accordion.Item>
 	{/each}
 </Accordion.Root>
diff --git a/src/tests/alert-dialog/AlertDialogTest.svelte b/src/tests/alert-dialog/AlertDialogTest.svelte
index b89882abf..12223f842 100644
--- a/src/tests/alert-dialog/AlertDialogTest.svelte
+++ b/src/tests/alert-dialog/AlertDialogTest.svelte
@@ -12,14 +12,16 @@
 		<AlertDialog.Portal data-testid="portal">
 			<AlertDialog.Overlay
 				data-testid="overlay"
-				class="fixed inset-0 bg-black w-[100vw] h-[100vh]"
+				class="fixed inset-0 h-[100vh] w-[100vw] bg-black"
 			/>
 			<AlertDialog.Content
 				data-testid="content"
-				class="fixed top-[50%] left-[50%] tranlate-x-[50%] translate-y-[50%] bg-white p-1"
+				class="tranlate-x-[50%] fixed left-[50%] top-[50%] translate-y-[50%] bg-white p-1"
 			>
 				<AlertDialog.Title data-testid="title">title</AlertDialog.Title>
-				<AlertDialog.Description data-testid="description">description</AlertDialog.Description>
+				<AlertDialog.Description data-testid="description"
+					>description</AlertDialog.Description
+				>
 				<AlertDialog.Cancel data-testid="cancel">cancel</AlertDialog.Cancel>
 				<AlertDialog.Action data-testid="action">action</AlertDialog.Action>
 			</AlertDialog.Content>
diff --git a/src/tests/avatar/AvatarTest.svelte b/src/tests/avatar/AvatarTest.svelte
index 7d73ac894..4204c52c5 100644
--- a/src/tests/avatar/AvatarTest.svelte
+++ b/src/tests/avatar/AvatarTest.svelte
@@ -9,5 +9,7 @@
 		<Avatar.Fallback data-testid="fallback">HJ</Avatar.Fallback>
 	</Avatar.Root>
 
-	<button on:click={() => (src = "")} data-testid="clear-button">clear src</button>
+	<button on:click={() => (src = "")} data-testid="clear-button"
+		>clear src</button
+	>
 </main>
diff --git a/src/tests/checkbox/CheckboxTest.svelte b/src/tests/checkbox/CheckboxTest.svelte
index 5f576a3a3..99fa964bd 100644
--- a/src/tests/checkbox/CheckboxTest.svelte
+++ b/src/tests/checkbox/CheckboxTest.svelte
@@ -9,7 +9,11 @@
 <main>
 	<p data-testid="binding">{checked}</p>
 	<Checkbox.Root data-testid="root" bind:checked {...$$restProps}>
-		<Checkbox.Indicator data-testid="indicator" let:isChecked let:isIndeterminate>
+		<Checkbox.Indicator
+			data-testid="indicator"
+			let:isChecked
+			let:isIndeterminate
+		>
 			{#if isIndeterminate}
 				indeterminate
 			{:else if isChecked}
diff --git a/src/tests/collapsible/CollapsibleTest.svelte b/src/tests/collapsible/CollapsibleTest.svelte
index bd9646381..c5940a4b1 100644
--- a/src/tests/collapsible/CollapsibleTest.svelte
+++ b/src/tests/collapsible/CollapsibleTest.svelte
@@ -10,5 +10,7 @@
 		<Collapsible.Trigger data-testid="trigger">Trigger</Collapsible.Trigger>
 		<Collapsible.Content data-testid="content">Content</Collapsible.Content>
 	</Collapsible.Root>
-	<button data-testid="alt-trigger" on:click={() => (open = !open)}>Toggle</button>
+	<button data-testid="alt-trigger" on:click={() => (open = !open)}
+		>Toggle</button
+	>
 </main>
diff --git a/src/tests/context-menu/ContextMenuTest.svelte b/src/tests/context-menu/ContextMenuTest.svelte
index c573a22ad..38a0d4952 100644
--- a/src/tests/context-menu/ContextMenuTest.svelte
+++ b/src/tests/context-menu/ContextMenuTest.svelte
@@ -24,7 +24,7 @@
 		<ContextMenu.Root bind:open {...$$restProps}>
 			<ContextMenu.Trigger
 				data-testid="trigger"
-				class="w-[500px] h-[500px]"
+				class="h-[500px] w-[500px]"
 				aria-expanded={undefined}
 				aria-controls={undefined}>open</ContextMenu.Trigger
 			>
@@ -45,16 +45,25 @@
 						<ContextMenu.Item data-testid="sub-item">
 							<span>Email</span>
 						</ContextMenu.Item>
-						<ContextMenu.CheckboxItem bind:checked={subChecked} data-testid="sub-checkbox-item">
-							<ContextMenu.CheckboxIndicator data-testid="sub-checkbox-indicator">
+						<ContextMenu.CheckboxItem
+							bind:checked={subChecked}
+							data-testid="sub-checkbox-item"
+						>
+							<ContextMenu.CheckboxIndicator
+								data-testid="sub-checkbox-indicator"
+							>
 								checked
 							</ContextMenu.CheckboxIndicator>
 							sub checkbox
 						</ContextMenu.CheckboxItem>
 					</ContextMenu.SubContent>
 				</ContextMenu.Sub>
-				<ContextMenu.Item disabled data-testid="disabled-item">disabled item</ContextMenu.Item>
-				<ContextMenu.Item disabled data-testid="disabled-item-2">disabled item 2</ContextMenu.Item>
+				<ContextMenu.Item disabled data-testid="disabled-item"
+					>disabled item</ContextMenu.Item
+				>
+				<ContextMenu.Item disabled data-testid="disabled-item-2"
+					>disabled item 2</ContextMenu.Item
+				>
 				<ContextMenu.CheckboxItem bind:checked data-testid="checkbox-item">
 					<ContextMenu.CheckboxIndicator data-testid="checkbox-indicator">
 						checked
@@ -82,15 +91,22 @@
 
 	<!-- Buttons to test binding -->
 	<button data-testid="binding" on:click={() => (open = !open)}>{open}</button>
-	<button data-testid="checked-binding" on:click={() => (checked = !checked)}>{checked}</button>
-	<button data-testid="sub-checked-binding" on:click={() => (subChecked = !subChecked)}
-		>{subChecked}</button
+	<button data-testid="checked-binding" on:click={() => (checked = !checked)}
+		>{checked}</button
 	>
-	<button aria-label="radio-main" data-testid="radio-binding" on:click={() => (radio = "")}
-		>{radio}</button
+	<button
+		data-testid="sub-checked-binding"
+		on:click={() => (subChecked = !subChecked)}>{subChecked}</button
 	>
-	<button aria-label="radio-sub" data-testid="sub-radio-binding" on:click={() => (subRadio = "")}
-		>{subRadio}</button
+	<button
+		aria-label="radio-main"
+		data-testid="radio-binding"
+		on:click={() => (radio = "")}>{radio}</button
+	>
+	<button
+		aria-label="radio-sub"
+		data-testid="sub-radio-binding"
+		on:click={() => (subRadio = "")}>{subRadio}</button
 	>
 	<div id="portal-target" data-testid="portal-target" />
 </main>
diff --git a/src/tests/dialog/DialogTest.svelte b/src/tests/dialog/DialogTest.svelte
index 8b0648d9a..b794fff90 100644
--- a/src/tests/dialog/DialogTest.svelte
+++ b/src/tests/dialog/DialogTest.svelte
@@ -22,13 +22,18 @@
 	<Dialog.Root bind:open {...$$restProps}>
 		<Dialog.Trigger data-testid="trigger">open</Dialog.Trigger>
 		<Dialog.Portal data-testid="portal">
-			<Dialog.Overlay data-testid="overlay" class="fixed inset-0 bg-black w-[100vw] h-[100vh]" />
+			<Dialog.Overlay
+				data-testid="overlay"
+				class="fixed inset-0 h-[100vh] w-[100vw] bg-black"
+			/>
 			<Dialog.Content
 				data-testid="content"
-				class="fixed top-[50%] left-[50%] tranlate-x-[50%] translate-y-[50%] bg-white p-1"
+				class="tranlate-x-[50%] fixed left-[50%] top-[50%] translate-y-[50%] bg-white p-1"
 			>
 				<Dialog.Title data-testid="title">title</Dialog.Title>
-				<Dialog.Description data-testid="description">description</Dialog.Description>
+				<Dialog.Description data-testid="description"
+					>description</Dialog.Description
+				>
 				<Dialog.Close data-testid="close">close</Dialog.Close>
 			</Dialog.Content>
 		</Dialog.Portal>
diff --git a/src/tests/dropdown-menu/DropdownMenuTest.svelte b/src/tests/dropdown-menu/DropdownMenuTest.svelte
index f200d028d..707d99a25 100644
--- a/src/tests/dropdown-menu/DropdownMenuTest.svelte
+++ b/src/tests/dropdown-menu/DropdownMenuTest.svelte
@@ -40,16 +40,24 @@
 						<DropdownMenu.Item data-testid="sub-item">
 							<span>Email</span>
 						</DropdownMenu.Item>
-						<DropdownMenu.CheckboxItem bind:checked={subChecked} data-testid="sub-checkbox-item">
-							<DropdownMenu.CheckboxIndicator data-testid="sub-checkbox-indicator">
+						<DropdownMenu.CheckboxItem
+							bind:checked={subChecked}
+							data-testid="sub-checkbox-item"
+						>
+							<DropdownMenu.CheckboxIndicator
+								data-testid="sub-checkbox-indicator"
+							>
 								checked
 							</DropdownMenu.CheckboxIndicator>
 							sub checkbox
 						</DropdownMenu.CheckboxItem>
 					</DropdownMenu.SubContent>
 				</DropdownMenu.Sub>
-				<DropdownMenu.Item disabled data-testid="disabled-item">disabled item</DropdownMenu.Item>
-				<DropdownMenu.Item disabled data-testid="disabled-item-2">disabled item 2</DropdownMenu.Item
+				<DropdownMenu.Item disabled data-testid="disabled-item"
+					>disabled item</DropdownMenu.Item
+				>
+				<DropdownMenu.Item disabled data-testid="disabled-item-2"
+					>disabled item 2</DropdownMenu.Item
 				>
 				<DropdownMenu.CheckboxItem bind:checked data-testid="checkbox-item">
 					<DropdownMenu.CheckboxIndicator data-testid="checkbox-indicator">
@@ -78,15 +86,22 @@
 
 	<!-- Buttons to test binding -->
 	<button data-testid="binding" on:click={() => (open = !open)}>{open}</button>
-	<button data-testid="checked-binding" on:click={() => (checked = !checked)}>{checked}</button>
-	<button data-testid="sub-checked-binding" on:click={() => (subChecked = !subChecked)}
-		>{subChecked}</button
+	<button data-testid="checked-binding" on:click={() => (checked = !checked)}
+		>{checked}</button
+	>
+	<button
+		data-testid="sub-checked-binding"
+		on:click={() => (subChecked = !subChecked)}>{subChecked}</button
 	>
-	<button aria-label="radio-main" data-testid="radio-binding" on:click={() => (radio = "")}
-		>{radio}</button
+	<button
+		aria-label="radio-main"
+		data-testid="radio-binding"
+		on:click={() => (radio = "")}>{radio}</button
 	>
-	<button aria-label="radio-sub" data-testid="sub-radio-binding" on:click={() => (subRadio = "")}
-		>{subRadio}</button
+	<button
+		aria-label="radio-sub"
+		data-testid="sub-radio-binding"
+		on:click={() => (subRadio = "")}>{subRadio}</button
 	>
 	<div id="portal-target" data-testid="portal-target" />
 </main>
diff --git a/src/tests/link-preview/LinkPreviewTest.svelte b/src/tests/link-preview/LinkPreviewTest.svelte
index 5f94fb6b8..0bca54d9a 100644
--- a/src/tests/link-preview/LinkPreviewTest.svelte
+++ b/src/tests/link-preview/LinkPreviewTest.svelte
@@ -13,11 +13,13 @@
 			href="https://github.com/sveltejs"
 			target="_blank"
 			rel="noreferrer noopener"
-			class="hover:underline underline-offset-4 rounded-sm focus-visible:outline-2 focus-visible:outline-offset-8 focus-visible:outline-black"
+			class="rounded-sm underline-offset-4 hover:underline focus-visible:outline-2 focus-visible:outline-offset-8 focus-visible:outline-black"
 		>
 			@sveltejs
 		</LinkPreview.Trigger>
-		<LinkPreview.Content data-testid="content" class="w-80">Content</LinkPreview.Content>
+		<LinkPreview.Content data-testid="content" class="w-80"
+			>Content</LinkPreview.Content
+		>
 	</LinkPreview.Root>
 	<button data-testid="binding" on:click={() => (open = !open)}>{open}</button>
 	<div data-testid="outside">outside</div>
diff --git a/src/tests/menubar/MenubarMenu.svelte b/src/tests/menubar/MenubarMenu.svelte
index 19ceaecdd..9689c1089 100644
--- a/src/tests/menubar/MenubarMenu.svelte
+++ b/src/tests/menubar/MenubarMenu.svelte
@@ -41,8 +41,12 @@
 				</Menubar.CheckboxItem>
 			</Menubar.SubContent>
 		</Menubar.Sub>
-		<Menubar.Item disabled data-testid="{id}-disabled-item">disabled item</Menubar.Item>
-		<Menubar.Item disabled data-testid="{id}-disabled-item-2">disabled item 2</Menubar.Item>
+		<Menubar.Item disabled data-testid="{id}-disabled-item"
+			>disabled item</Menubar.Item
+		>
+		<Menubar.Item disabled data-testid="{id}-disabled-item-2"
+			>disabled item 2</Menubar.Item
+		>
 		<Menubar.CheckboxItem data-testid="{id}-checkbox-item">
 			<Menubar.CheckboxIndicator data-testid="{id}-checkbox-indicator">
 				checked
diff --git a/src/tests/progress/ProgressTest.svelte b/src/tests/progress/ProgressTest.svelte
index 59ecb1e4e..636163323 100644
--- a/src/tests/progress/ProgressTest.svelte
+++ b/src/tests/progress/ProgressTest.svelte
@@ -6,6 +6,11 @@
 </script>
 
 <main>
-	<Progress.Root aria-label="progress" data-testid="root" bind:value {...$$restProps} />
+	<Progress.Root
+		aria-label="progress"
+		data-testid="root"
+		bind:value
+		{...$$restProps}
+	/>
 	<button data-testid="binding" on:click={() => (value = 50)}>{value}</button>
 </main>
diff --git a/src/tests/radio-group/RadioGroupTest.svelte b/src/tests/radio-group/RadioGroupTest.svelte
index 0a83c747e..81b36d583 100644
--- a/src/tests/radio-group/RadioGroupTest.svelte
+++ b/src/tests/radio-group/RadioGroupTest.svelte
@@ -27,7 +27,9 @@
 		{/each}
 		<RadioGroup.Input data-testid="input" />
 	</RadioGroup.Root>
-	<button aria-label="binding" data-testid="binding" on:click={() => (value = items[0].value)}
-		>{value}</button
+	<button
+		aria-label="binding"
+		data-testid="binding"
+		on:click={() => (value = items[0].value)}>{value}</button
 	>
 </main>
diff --git a/src/tests/select/SelectTest.svelte b/src/tests/select/SelectTest.svelte
index f32f452a0..db95c81ca 100644
--- a/src/tests/select/SelectTest.svelte
+++ b/src/tests/select/SelectTest.svelte
@@ -42,7 +42,10 @@
 	<button data-testid="open-binding" on:click={() => (open = !open)}>
 		{open}
 	</button>
-	<button data-testid="selected-binding" on:click={() => (selected = undefined)}>
+	<button
+		data-testid="selected-binding"
+		on:click={() => (selected = undefined)}
+	>
 		{#if selected === undefined}
 			undefined
 		{:else}
diff --git a/src/tests/slider/SliderRangeTest.svelte b/src/tests/slider/SliderRangeTest.svelte
index bb9e099e2..d29e1cb57 100644
--- a/src/tests/slider/SliderRangeTest.svelte
+++ b/src/tests/slider/SliderRangeTest.svelte
@@ -7,14 +7,16 @@
 
 <main>
 	<Slider.Root data-testid="root" bind:value {...$$restProps} let:ticks>
-		<span class="relative h-1.5 w-full grow overflow-hidden rounded-full bg-primary/20">
-			<Slider.Range data-testid="range" class="absolute h-full bg-primary" />
+		<span
+			class="bg-primary/20 relative h-1.5 w-full grow overflow-hidden rounded-full"
+		>
+			<Slider.Range data-testid="range" class="bg-primary absolute h-full" />
 		</span>
 		{#each value as _, i}
 			<Slider.Thumb
 				aria-label="Volume"
 				data-testid="thumb-{i}"
-				class="block h-4 w-4 rounded-full border border-primary/50 bg-background shadow transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50"
+				class="border-primary/50 focus-visible:ring-ring block h-4 w-4 rounded-full border bg-background shadow transition-colors focus-visible:outline-none focus-visible:ring-1 disabled:pointer-events-none disabled:opacity-50"
 			/>
 		{/each}
 
diff --git a/src/tests/slider/SliderTest.svelte b/src/tests/slider/SliderTest.svelte
index 523471de8..965f8017e 100644
--- a/src/tests/slider/SliderTest.svelte
+++ b/src/tests/slider/SliderTest.svelte
@@ -24,14 +24,24 @@
 </script>
 
 <main>
-	<Slider.Root data-testid="root" bind:value {...$$restProps} let:ticks {min} {max} {step}>
-		<span class="relative h-1.5 w-full grow overflow-hidden rounded-full bg-primary/20">
-			<Slider.Range data-testid="range" class="absolute h-full bg-primary" />
+	<Slider.Root
+		data-testid="root"
+		bind:value
+		{...$$restProps}
+		let:ticks
+		{min}
+		{max}
+		{step}
+	>
+		<span
+			class="bg-primary/20 relative h-1.5 w-full grow overflow-hidden rounded-full"
+		>
+			<Slider.Range data-testid="range" class="bg-primary absolute h-full" />
 		</span>
 		<Slider.Thumb
 			aria-label="age"
 			data-testid="thumb"
-			class="block h-4 w-4 rounded-full border border-primary/50 bg-background shadow transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50"
+			class="border-primary/50 focus-visible:ring-ring block h-4 w-4 rounded-full border bg-background shadow transition-colors focus-visible:outline-none focus-visible:ring-1 disabled:pointer-events-none disabled:opacity-50"
 		/>
 
 		{#each { length: ticks } as _}
diff --git a/src/tests/switch/SwitchTest.svelte b/src/tests/switch/SwitchTest.svelte
index 5583f74ee..c7ef574e6 100644
--- a/src/tests/switch/SwitchTest.svelte
+++ b/src/tests/switch/SwitchTest.svelte
@@ -11,7 +11,9 @@
 </script>
 
 <main>
-	<button data-testid="binding" on:click={() => (checked = !checked)}>{checked}</button>
+	<button data-testid="binding" on:click={() => (checked = !checked)}
+		>{checked}</button
+	>
 	<Switch.Root
 		aria-label="airplane mode"
 		data-testid="root"
diff --git a/src/tests/tabs/TabsTest.svelte b/src/tests/tabs/TabsTest.svelte
index 2d5ca5735..37a0c03ce 100644
--- a/src/tests/tabs/TabsTest.svelte
+++ b/src/tests/tabs/TabsTest.svelte
@@ -16,7 +16,12 @@
 </script>
 
 <main>
-	<Tabs.Root aria-label="airplane mode" data-testid="root" bind:value {...$$restProps}>
+	<Tabs.Root
+		aria-label="airplane mode"
+		data-testid="root"
+		bind:value
+		{...$$restProps}
+	>
 		<Tabs.List data-testid="list">
 			{#each items as { value, disabled }}
 				<Tabs.Trigger {value} {disabled} data-testid="trigger-{value}">
@@ -30,5 +35,7 @@
 			</Tabs.Content>
 		{/each}
 	</Tabs.Root>
-	<button data-testid="binding" on:click={() => (value = undefined)}>{value}</button>
+	<button data-testid="binding" on:click={() => (value = undefined)}
+		>{value}</button
+	>
 </main>
diff --git a/src/tests/toggle-group/ToggleGroupMultipleTest.svelte b/src/tests/toggle-group/ToggleGroupMultipleTest.svelte
index cebbbe8bb..19ff04f29 100644
--- a/src/tests/toggle-group/ToggleGroupMultipleTest.svelte
+++ b/src/tests/toggle-group/ToggleGroupMultipleTest.svelte
@@ -16,8 +16,14 @@
 </script>
 
 <main>
-	<button data-testid="binding" on:click={() => (value = ["4"])}>{value}</button>
-	<ToggleGroup.Root data-testid="root" bind:value {...$$restProps} type="multiple">
+	<button data-testid="binding" on:click={() => (value = ["4"])}>{value}</button
+	>
+	<ToggleGroup.Root
+		data-testid="root"
+		bind:value
+		{...$$restProps}
+		type="multiple"
+	>
 		{#each items as { value, disabled }}
 			<ToggleGroup.Item {value} {disabled} data-testid="item-{value}">
 				{value}
diff --git a/src/tests/toggle/ToggleTest.svelte b/src/tests/toggle/ToggleTest.svelte
index 7697e6e9b..e025bd072 100644
--- a/src/tests/toggle/ToggleTest.svelte
+++ b/src/tests/toggle/ToggleTest.svelte
@@ -6,6 +6,13 @@
 </script>
 
 <main>
-	<button data-testid="binding" on:click={() => (pressed = !pressed)}>{pressed}</button>
-	<Toggle.Root bind:pressed aria-label="toggle" data-testid="root" {...$$restProps}>a</Toggle.Root>
+	<button data-testid="binding" on:click={() => (pressed = !pressed)}
+		>{pressed}</button
+	>
+	<Toggle.Root
+		bind:pressed
+		aria-label="toggle"
+		data-testid="root"
+		{...$$restProps}>a</Toggle.Root
+	>
 </main>
diff --git a/src/tests/tooltip/TooltipTest.svelte b/src/tests/tooltip/TooltipTest.svelte
index e3aca1795..5ae94a125 100644
--- a/src/tests/tooltip/TooltipTest.svelte
+++ b/src/tests/tooltip/TooltipTest.svelte
@@ -9,7 +9,8 @@
 <main data-testid="main">
 	<Tooltip.Root bind:open {...$$restProps} openDelay={50} closeDelay={50}>
 		<Tooltip.Trigger data-testid="trigger">@sveltejs</Tooltip.Trigger>
-		<Tooltip.Content data-testid="content" class="w-80">Content</Tooltip.Content>
+		<Tooltip.Content data-testid="content" class="w-80">Content</Tooltip.Content
+		>
 	</Tooltip.Root>
 	<button data-testid="binding" on:click={() => (open = !open)}>{open}</button>
 	<div data-testid="outside">outside</div>
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 30c3360d2..015db2b1c 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -59,7 +59,7 @@ export default {
 				"mini-inset": "var(--shadow-mini-inset)",
 				popover: "var(--shadow-popover)",
 				kbd: "var(--shadow-kbd)",
-				btn: "var(--shadow-btn)",
+				btn: "var(--shadow-btn)"
 			},
 			opacity: {
 				8: "0.08"

From 9ae70a82a5ef7cbb9a8d37a4c24b2990925be0b7 Mon Sep 17 00:00:00 2001
From: Hunter Johnston <johnstonhuntera@gmail.com>
Date: Fri, 17 Nov 2023 23:46:04 -0500
Subject: [PATCH 053/217] initial select idea

---
 src/components/demos/dialog-demo.svelte |  2 +-
 src/components/demos/select-demo.svelte | 22 +++++++++++++++-------
 2 files changed, 16 insertions(+), 8 deletions(-)

diff --git a/src/components/demos/dialog-demo.svelte b/src/components/demos/dialog-demo.svelte
index e47092553..ef310237e 100644
--- a/src/components/demos/dialog-demo.svelte
+++ b/src/components/demos/dialog-demo.svelte
@@ -41,7 +41,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-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground focus-visible:ring-offset-2 focus-visible:ring-offset-background"
+						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"
 						placeholder="secret_api_key"
 						type="password"
 						autocomplete="off"
diff --git a/src/components/demos/select-demo.svelte b/src/components/demos/select-demo.svelte
index 29bcd0c4e..d4c10146d 100644
--- a/src/components/demos/select-demo.svelte
+++ b/src/components/demos/select-demo.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
-	import * as Select from "@/components/ui/select";
+	import { Select } from "$lib";
+	import { flyAndScale } from "@/utils";
 
 	const fruits = [
 		{ value: "apple", label: "Apple" },
@@ -11,15 +12,22 @@
 </script>
 
 <Select.Root>
-	<Select.Trigger class="w-[180px]">
-		<Select.Value placeholder="Select a fruit" />
+	<Select.Trigger
+		class="inline-flex h-input w-[180px] 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"
+	>
+		<Select.Value class="text-sm font-medium" placeholder="Select a fruit" />
 	</Select.Trigger>
-	<Select.Content>
+	<Select.Content
+		class="w-full rounded-xl border border-muted bg-background px-1 py-1.5 shadow-popover outline-none"
+		transition={flyAndScale}
+	>
 		<Select.Group>
-			<Select.Label>Fruits</Select.Label>
+			<Select.Label class="py-1.5 pl-2 font-medium">Fruits</Select.Label>
 			{#each fruits as fruit}
-				<Select.Item value={fruit.value} label={fruit.label}
-					>{fruit.label}</Select.Item
+				<Select.Item
+					class="flex h-10 select-none items-center rounded-button py-3 pl-3 pr-1.5 text-sm  outline-none transition-all duration-75 data-[highlighted]:bg-muted"
+					value={fruit.value}
+					label={fruit.label}>{fruit.label}</Select.Item
 				>
 			{/each}
 		</Select.Group>

From b2631a61034d6bef545780e43b30462c86efce7d Mon Sep 17 00:00:00 2001
From: Hunter Johnston <johnstonhuntera@gmail.com>
Date: Fri, 17 Nov 2023 23:51:36 -0500
Subject: [PATCH 054/217] init popover

---
 src/components/demos/popover-demo.svelte | 24 +++++++++++-------------
 1 file changed, 11 insertions(+), 13 deletions(-)

diff --git a/src/components/demos/popover-demo.svelte b/src/components/demos/popover-demo.svelte
index 17ee4ce34..4a65fe682 100644
--- a/src/components/demos/popover-demo.svelte
+++ b/src/components/demos/popover-demo.svelte
@@ -4,26 +4,24 @@
 	import * as Button from "@/components/ui/button";
 	import * as Input from "@/components/ui/input";
 	import { tick } from "svelte";
+	import { flyAndScale } from "@/utils";
 
 	let open = false;
 </script>
 
 <Popover.Root bind:open let:ids>
-	<Popover.Trigger asChild let:builder>
-		<Button.Root builders={[builder]} variant="outline">Open</Button.Root>
+	<Popover.Trigger
+		class="inline-flex h-12 items-center
+	justify-center whitespace-nowrap rounded-input bg-dark px-[21px]
+	text-[15px] font-semibold text-background shadow-mini ring-dark ring-offset-background transition-colors hover:bg-foreground/80 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-dark focus-visible:ring-offset-2 focus-visible:ring-offset-background"
+	>
+		Open
 	</Popover.Trigger>
-	<Popover.Content class="w-80">
+	<Popover.Content
+		class="w-full max-w-[300px] rounded-xl border border-muted bg-background p-5 shadow-popover outline-none"
+		transition={flyAndScale}
+	>
 		<div class="grid gap-4">
-			<button
-				on:click={() => {
-					open = false;
-					tick().then(() => {
-						document.getElementById(ids.trigger)?.focus();
-					});
-				}}
-			>
-				close me
-			</button>
 			<div class="space-y-2">
 				<h4 class="font-medium leading-none">Dimensions</h4>
 				<p class="text-sm text-muted-foreground">

From 6f4e9dd9838cb95da086e0c4eb3c560bf5228e6c Mon Sep 17 00:00:00 2001
From: Hunter Johnston <johnstonhuntera@gmail.com>
Date: Sat, 18 Nov 2023 00:30:16 -0500
Subject: [PATCH 055/217] popover

---
 src/components/demos/popover-demo.svelte | 118 +++++++++++++++++------
 src/styles/app.postcss                   |   6 ++
 tailwind.config.ts                       |   8 +-
 3 files changed, 101 insertions(+), 31 deletions(-)

diff --git a/src/components/demos/popover-demo.svelte b/src/components/demos/popover-demo.svelte
index 4a65fe682..31ef423bd 100644
--- a/src/components/demos/popover-demo.svelte
+++ b/src/components/demos/popover-demo.svelte
@@ -1,50 +1,110 @@
 <script lang="ts">
-	import * as Popover from "@/components/ui/popover";
-	import * as Label from "@/components/ui/label";
-	import * as Button from "@/components/ui/button";
-	import * as Input from "@/components/ui/input";
-	import { tick } from "svelte";
+	import { Popover, Label, Switch, Separator } from "$lib";
+	import { Cookie } from "phosphor-svelte";
+
 	import { flyAndScale } from "@/utils";
 
-	let open = false;
+	let open = true;
+	let necessary = true;
+	let marketing = false;
+	let shopping = false;
 </script>
 
-<Popover.Root bind:open let:ids>
+<Popover.Root bind:open>
 	<Popover.Trigger
 		class="inline-flex h-12 items-center
 	justify-center whitespace-nowrap rounded-input bg-dark px-[21px]
-	text-[15px] font-semibold text-background shadow-mini ring-dark ring-offset-background transition-colors hover:bg-foreground/80 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-dark focus-visible:ring-offset-2 focus-visible:ring-offset-background"
+	text-[15px] font-semibold text-background shadow-mini ring-dark ring-offset-background transition-colors hover:bg-foreground/90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-dark focus-visible:ring-offset-2 focus-visible:ring-offset-background"
 	>
-		Open
+		Manage Cookies
 	</Popover.Trigger>
 	<Popover.Content
-		class="w-full max-w-[300px] rounded-xl border border-muted bg-background p-5 shadow-popover outline-none"
+		class="w-full max-w-[392px] rounded-card border border-muted bg-background p-5 shadow-card outline-none"
 		transition={flyAndScale}
 	>
-		<div class="grid gap-4">
-			<div class="space-y-2">
-				<h4 class="font-medium leading-none">Dimensions</h4>
-				<p class="text-sm text-muted-foreground">
-					Set the dimensions for the layer.
+		<div class="flex items-center">
+			<div
+				class="mr-[13px] flex h-12 w-12 items-center justify-center rounded-full bg-muted"
+			>
+				<Cookie class="h-6 w-6" />
+			</div>
+			<div class="flex flex-col">
+				<h4 class="text-[17px] font-semibold tracking-[-0.01em]">
+					Set Cookies
+				</h4>
+				<p class="text-sm font-medium text-muted-foreground">
+					Manage your cookie settings here
 				</p>
 			</div>
-			<div class="grid gap-2">
-				<div class="grid grid-cols-3 items-center gap-4">
-					<Label.Root for="width">Width</Label.Root>
-					<Input.Root id="width" value="100%" class="col-span-2 h-8" />
-				</div>
-				<div class="grid grid-cols-3 items-center gap-4">
-					<Label.Root for="maxWidth">Max. width</Label.Root>
-					<Input.Root id="maxWidth" value="300px" class="col-span-2 h-8" />
+		</div>
+		<Separator.Root class="-mx-5 mb-7 mt-[17px] block h-px bg-muted" />
+		<div class="flex flex-col gap-7 pl-2 pr-[2px]">
+			<div class="flex w-full items-center justify-between">
+				<div class="flex flex-col gap-0.5">
+					<div class="flex items-center gap-1.5">
+						<Label.Root for="necessary" class="text-sm font-medium"
+							>Strictly necessary</Label.Root
+						>
+						<div
+							class="text-accent-foreground inline-flex h-5 items-center justify-center rounded-[30px] bg-accent px-2 text-[11px] font-medium"
+						>
+							required
+						</div>
+					</div>
+					<p class="text-[13px] font-medium text-muted-foreground">
+						These cookies are essential
+					</p>
 				</div>
-				<div class="grid grid-cols-3 items-center gap-4">
-					<Label.Root for="height">Height</Label.Root>
-					<Input.Root id="height" value="25px" class="col-span-2 h-8" />
+				<Switch.Root
+					id="necessary"
+					class="focus-visible:ring-ring peer inline-flex h-7 w-12 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-mini-inset transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-foreground data-[state=unchecked]:bg-muted"
+					bind:checked={necessary}
+					disabled
+				>
+					<Switch.Thumb
+						class="pointer-events-none block h-6 w-6 rounded-full bg-background shadow-mini ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0"
+					/>
+				</Switch.Root>
+			</div>
+			<div class="flex w-full items-center justify-between">
+				<div class="flex flex-col gap-0.5">
+					<Label.Root for="marketing" class="text-sm font-medium"
+						>Marketing cookies</Label.Root
+					>
+
+					<p class="text-[13px] font-medium text-muted-foreground">
+						These cookies are non-essential
+					</p>
 				</div>
-				<div class="grid grid-cols-3 items-center gap-4">
-					<Label.Root for="maxHeight">Max. height</Label.Root>
-					<Input.Root id="maxHeight" value="none" class="col-span-2 h-8" />
+				<Switch.Root
+					id="marketing"
+					class="focus-visible:ring-ring peer inline-flex h-7 w-12 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-mini-inset transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-foreground data-[state=unchecked]:bg-muted"
+					bind:checked={marketing}
+				>
+					<Switch.Thumb
+						class="pointer-events-none block h-6 w-6 rounded-full bg-background shadow-mini ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0"
+					/>
+				</Switch.Root>
+			</div>
+			<div class="flex w-full items-center justify-between">
+				<div class="flex flex-col gap-0.5">
+					<Label.Root for="shopping" class="text-sm font-medium"
+						>Shopping cookies</Label.Root
+					>
+
+					<p class="text-[13px] font-medium text-muted-foreground">
+						These cookies are non-essential
+					</p>
 				</div>
+				<Switch.Root
+					id="shopping"
+					class="focus-visible:ring-ring peer inline-flex h-7 w-12 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-mini-inset transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-foreground data-[state=unchecked]:bg-muted"
+					bind:checked={shopping}
+				>
+					<Switch.Thumb
+						class="pointer-events-none block h-6 w-6 rounded-full bg-background shadow-mini ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0"
+					/>
+				</Switch.Root>
 			</div>
 		</div>
 	</Popover.Content>
diff --git a/src/styles/app.postcss b/src/styles/app.postcss
index 44fe09250..1873385ba 100644
--- a/src/styles/app.postcss
+++ b/src/styles/app.postcss
@@ -18,6 +18,7 @@
 		--dark: 240 6% 10%;
 		--dark-10: 240 6% 10% / 0.1;
 		--accent: 204 94% 94%;
+		--accent-foreground: 204 80% 16%;
 
 		/* Shadows */
 		--shadow-mini: 0px 1px 0px 1px rgba(0, 0, 0, 0.04);
@@ -25,6 +26,7 @@
 		--shadow-popover: 0px 7px 12px 3px hsla(var(--dark-10));
 		--shadow-kbd: 0px 2px 0px 0px rgba(0, 0, 0, 0.07);
 		--shadow-btn: 0px 1px 0px 1px rgba(0, 0, 0, 0.03);
+		--shadow-card: 0px 2px 0px 1px rgba(0, 0, 0, 0.04);
 	}
 
 	.dark {
@@ -40,11 +42,15 @@
 		--dark: 0 0% 96%;
 		--dark-10: 0 0% 96% / 0.1;
 		--accent: 204 80% 16%;
+		--accent-foreground: 204 94% 94%;
 
 		/* Shadows */
+		--shadow-mini: 0px 1px 0px 1px rgba(255, 255, 255, 0.04);
+		--shadow-mini-inset: 0px 1px 0px 0px rgba(255, 255, 255, 0.04) inset;
 		--shadow-popover: 0px 7px 12px 3px rbga(255, 255, 255, 0.2);
 		--shadow-kbd: 0px 2px 0px 0px rgba(255, 255, 255, 0.07);
 		--shadow-btn: 0px 1px 0px 1px rgba(255, 255, 255, 0.03);
+		--shadow-card: 0px 2px 0px 1px rgba(255, 255, 255, 0.04);
 	}
 }
 
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 015db2b1c..6bbd3a94b 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -34,7 +34,10 @@ export default {
 					DEFAULT: "hsl(var(--dark) / <alpha-value>)",
 					10: "hsl(var(--dark-10))"
 				},
-				accent: "hsl(var(--accent) / <alpha-value>)"
+				accent: {
+					DEFAULT: "hsl(var(--accent) / <alpha-value>)",
+					foreground: "hsl(var(--accent-foreground) / <alpha-value>)"
+				}
 			},
 			fontFamily: {
 				sans: ["Inter", ...fontFamily.sans],
@@ -59,7 +62,8 @@ export default {
 				"mini-inset": "var(--shadow-mini-inset)",
 				popover: "var(--shadow-popover)",
 				kbd: "var(--shadow-kbd)",
-				btn: "var(--shadow-btn)"
+				btn: "var(--shadow-btn)",
+				card: "var(--shadow-card)"
 			},
 			opacity: {
 				8: "0.08"

From 35ae2bb96875a125ddf07f1e459dbab7d854c417 Mon Sep 17 00:00:00 2001
From: Hunter Johnston <johnstonhuntera@gmail.com>
Date: Sat, 18 Nov 2023 00:32:38 -0500
Subject: [PATCH 056/217] popover

---
 src/components/demos/popover-demo.svelte | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/src/components/demos/popover-demo.svelte b/src/components/demos/popover-demo.svelte
index 31ef423bd..1af1544e6 100644
--- a/src/components/demos/popover-demo.svelte
+++ b/src/components/demos/popover-demo.svelte
@@ -4,13 +4,12 @@
 
 	import { flyAndScale } from "@/utils";
 
-	let open = true;
 	let necessary = true;
 	let marketing = false;
 	let shopping = false;
 </script>
 
-<Popover.Root bind:open>
+<Popover.Root>
 	<Popover.Trigger
 		class="inline-flex h-12 items-center
 	justify-center whitespace-nowrap rounded-input bg-dark px-[21px]
@@ -46,7 +45,7 @@
 							>Strictly necessary</Label.Root
 						>
 						<div
-							class="text-accent-foreground inline-flex h-5 items-center justify-center rounded-[30px] bg-accent px-2 text-[11px] font-medium"
+							class="inline-flex h-5 items-center justify-center rounded-[30px] bg-accent px-2 text-[11px] font-medium text-accent-foreground"
 						>
 							required
 						</div>

From 715f925735454189dcc2838a6179021788088f95 Mon Sep 17 00:00:00 2001
From: Hunter Johnston <johnstonhuntera@gmail.com>
Date: Sat, 18 Nov 2023 00:36:52 -0500
Subject: [PATCH 057/217] finish popover

---
 src/components/demos/alert-dialog-demo.svelte | 16 ++++++----------
 src/components/demos/popover-demo.svelte      | 11 ++++++++---
 2 files changed, 14 insertions(+), 13 deletions(-)

diff --git a/src/components/demos/alert-dialog-demo.svelte b/src/components/demos/alert-dialog-demo.svelte
index 0ff0bafdb..bf100ba10 100644
--- a/src/components/demos/alert-dialog-demo.svelte
+++ b/src/components/demos/alert-dialog-demo.svelte
@@ -1,20 +1,16 @@
 <script lang="ts">
 	import { AlertDialog } from "$lib";
-	import { Button } from "$lib";
 	import { flyAndScale } from "@/utils";
 	import { fade } from "svelte/transition";
 </script>
 
 <AlertDialog.Root>
-	<AlertDialog.Trigger asChild let:builder>
-		<Button.Root
-			builders={[builder]}
-			class="inline-flex h-12 items-center
-		justify-center whitespace-nowrap rounded-input bg-dark px-[21px]
-		text-[15px] font-semibold text-background shadow-mini ring-dark ring-offset-background transition-colors hover:bg-foreground/80 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-dark focus-visible:ring-offset-2 focus-visible:ring-offset-background"
-		>
-			Subscribe
-		</Button.Root>
+	<AlertDialog.Trigger
+		class="inline-flex h-12 items-center
+	justify-center whitespace-nowrap rounded-input bg-dark px-[21px]
+	text-[15px] font-semibold text-background shadow-mini ring-dark ring-offset-background transition-colors hover:bg-foreground/80 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-dark focus-visible:ring-offset-2 focus-visible:ring-offset-background"
+	>
+		Subscribe
 	</AlertDialog.Trigger>
 	<AlertDialog.Portal>
 		<AlertDialog.Overlay
diff --git a/src/components/demos/popover-demo.svelte b/src/components/demos/popover-demo.svelte
index 1af1544e6..2a6ca88a8 100644
--- a/src/components/demos/popover-demo.svelte
+++ b/src/components/demos/popover-demo.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { Popover, Label, Switch, Separator } from "$lib";
+	import { Popover, Label, Switch, Separator, Button } from "$lib";
 	import { Cookie } from "phosphor-svelte";
 
 	import { flyAndScale } from "@/utils";
@@ -18,7 +18,7 @@
 		Manage Cookies
 	</Popover.Trigger>
 	<Popover.Content
-		class="w-full max-w-[392px] rounded-card border border-muted bg-background p-5 shadow-card outline-none"
+		class="z-20 w-full max-w-[392px] rounded-card border border-muted bg-background p-5 shadow-card outline-none"
 		transition={flyAndScale}
 	>
 		<div class="flex items-center">
@@ -37,7 +37,7 @@
 			</div>
 		</div>
 		<Separator.Root class="-mx-5 mb-7 mt-[17px] block h-px bg-muted" />
-		<div class="flex flex-col gap-7 pl-2 pr-[2px]">
+		<div class="flex flex-col gap-7 pb-10 pl-2 pr-[2px]">
 			<div class="flex w-full items-center justify-between">
 				<div class="flex flex-col gap-0.5">
 					<div class="flex items-center gap-1.5">
@@ -106,5 +106,10 @@
 				</Switch.Root>
 			</div>
 		</div>
+		<Button.Root
+			class="inline-flex h-input w-full items-center justify-center rounded-input bg-dark text-[15px] font-semibold text-background shadow-mini focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-dark focus-visible:ring-offset-2 focus-visible:ring-offset-background"
+		>
+			Save settings
+		</Button.Root>
 	</Popover.Content>
 </Popover.Root>

From c98c3c6e47ac0ece47be1c94ad94dc37e06078c3 Mon Sep 17 00:00:00 2001
From: Hunter Johnston <johnstonhuntera@gmail.com>
Date: Sat, 18 Nov 2023 00:38:01 -0500
Subject: [PATCH 058/217] switch

---
 src/components/demos/switch-demo.svelte | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/components/demos/switch-demo.svelte b/src/components/demos/switch-demo.svelte
index 14776e95a..9e6c75a7c 100644
--- a/src/components/demos/switch-demo.svelte
+++ b/src/components/demos/switch-demo.svelte
@@ -2,16 +2,16 @@
 	import { Switch, Label } from "$lib";
 </script>
 
-<div class="flex items-center space-x-2">
+<div class="flex items-center space-x-3">
 	<Switch.Root
-		id="airplane-mode"
-		class="focus-visible:ring-ring data-[state=checked]:bg-primary data-[state=unchecked]:bg-primary/60 peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50"
+		id="marketing"
+		class="focus-visible:ring-ring peer inline-flex h-7 w-12 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-mini-inset transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-foreground data-[state=unchecked]:bg-muted"
 	>
 		<Switch.Thumb
-			class="pointer-events-none relative inline-block h-4 w-4 transform rounded-full shadow-lg ring-0 transition-all ease-in-out data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0 data-[state=checked]:bg-background data-[state=unchecked]:bg-accent"
+			class="pointer-events-none block h-6 w-6 rounded-full bg-background shadow-mini ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0"
 		/>
 	</Switch.Root>
-	<Label.Root for="airplane-mode" class="text-sm font-medium"
-		>Airplane Mode</Label.Root
+	<Label.Root for="marketing" class="text-sm font-medium"
+		>Do not disturb</Label.Root
 	>
 </div>

From 43074fefabe50f5a96fb12727d1a590dfab73b01 Mon Sep 17 00:00:00 2001
From: Hunter Johnston <johnstonhuntera@gmail.com>
Date: Sat, 18 Nov 2023 00:43:27 -0500
Subject: [PATCH 059/217] tooltip

---
 src/components/demos/dialog-demo.svelte  | 17 +++++++----------
 src/components/demos/tooltip-demo.svelte | 22 +++++++++++++++-------
 2 files changed, 22 insertions(+), 17 deletions(-)

diff --git a/src/components/demos/dialog-demo.svelte b/src/components/demos/dialog-demo.svelte
index ef310237e..a97dfb23d 100644
--- a/src/components/demos/dialog-demo.svelte
+++ b/src/components/demos/dialog-demo.svelte
@@ -1,20 +1,17 @@
 <script lang="ts">
-	import { Dialog, Separator, Button, Label } from "$lib";
+	import { Dialog, Separator, Label } from "$lib";
 	import { flyAndScale } from "@/utils";
 	import { fade } from "svelte/transition";
 	import { X, LockKeyOpen } from "phosphor-svelte";
 </script>
 
 <Dialog.Root>
-	<Dialog.Trigger asChild let:builder>
-		<Button.Root
-			builders={[builder]}
-			class="inline-flex h-12 items-center
-			justify-center whitespace-nowrap rounded-input bg-dark px-[21px]
-			text-[15px] font-semibold text-background shadow-mini  transition-colors hover:bg-foreground/80 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground focus-visible:ring-offset-2 focus-visible:ring-offset-background"
-		>
-			Subscribe
-		</Button.Root>
+	<Dialog.Trigger
+		class="inline-flex h-12 items-center
+	justify-center whitespace-nowrap rounded-input bg-dark px-[21px]
+	text-[15px] font-semibold text-background shadow-mini  transition-colors hover:bg-foreground/80 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground focus-visible:ring-offset-2 focus-visible:ring-offset-background"
+	>
+		New API key
 	</Dialog.Trigger>
 	<Dialog.Portal>
 		<Dialog.Overlay
diff --git a/src/components/demos/tooltip-demo.svelte b/src/components/demos/tooltip-demo.svelte
index ab3ac8f1e..3e68fd0ac 100644
--- a/src/components/demos/tooltip-demo.svelte
+++ b/src/components/demos/tooltip-demo.svelte
@@ -1,13 +1,21 @@
 <script lang="ts">
-	import * as Button from "@/components/ui/button";
-	import * as Tooltip from "@/components/ui/tooltip";
+	import { Tooltip } from "$lib";
+	import { flyAndScale } from "@/utils";
 </script>
 
-<Tooltip.Root>
-	<Tooltip.Trigger asChild let:builder>
-		<Button.Root builders={[builder]} variant="outline">Hover</Button.Root>
+<Tooltip.Root openDelay={200}>
+	<Tooltip.Trigger
+		class="inline-flex h-12 items-center
+	justify-center whitespace-nowrap rounded-input bg-dark px-[21px]
+	text-[15px] font-semibold text-background shadow-mini ring-dark ring-offset-background transition-colors hover:bg-foreground/90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-dark focus-visible:ring-offset-2 focus-visible:ring-offset-background"
+	>
+		Hover me
 	</Tooltip.Trigger>
-	<Tooltip.Content>
-		<p>Add to library</p>
+	<Tooltip.Content
+		class="z-20 flex items-center justify-center rounded-input border border-muted bg-background p-3 text-sm font-medium shadow-mini outline-none"
+		transition={flyAndScale}
+		transitionConfig={{ y: 8, duration: 150 }}
+	>
+		It doesn't get much better than bits.
 	</Tooltip.Content>
 </Tooltip.Root>

From ca6f8a21b199b84be6b30c12811932da39058a24 Mon Sep 17 00:00:00 2001
From: Hunter Johnston <johnstonhuntera@gmail.com>
Date: Sat, 18 Nov 2023 00:46:55 -0500
Subject: [PATCH 060/217] label demo

---
 content/getting-started.md             |  6 ++---
 src/components/demos/label-demo.svelte | 36 +++++++++++++++++++++-----
 2 files changed, 32 insertions(+), 10 deletions(-)

diff --git a/content/getting-started.md b/content/getting-started.md
index ba4d56f61..224e94b46 100644
--- a/content/getting-started.md
+++ b/content/getting-started.md
@@ -23,19 +23,19 @@ You can then import and start using them in your app.
 		<Accordion.Header>
 			<Accordion.Trigger>First</Accordion.Trigger>
 		</Accordion.Header>
-		<Accordion.Content>This is the first accordion content</Accordion.Content>
+		<Accordion.Content>First accordion content</Accordion.Content>
 	</Accordion.Item>
 	<Accordion.Item value="second">
 		<Accordion.Header>
 			<Accordion.Trigger>Second</Accordion.Trigger>
 		</Accordion.Header>
-		<Accordion.Content>This is the second accordion content</Accordion.Content>
+		<Accordion.Content>Second accordion content</Accordion.Content>
 	</Accordion.Item>
 	<Accordion.Item value="third">
 		<Accordion.Header>
 			<Accordion.Trigger>Third</Accordion.Trigger>
 		</Accordion.Header>
-		<Accordion.Content>This is the third accordion content</Accordion.Content>
+		<Accordion.Content>Third accordion content</Accordion.Content>
 	</Accordion.Item>
 </Accordion.Root>
 ```
diff --git a/src/components/demos/label-demo.svelte b/src/components/demos/label-demo.svelte
index 91bddb6a9..8f9c286d3 100644
--- a/src/components/demos/label-demo.svelte
+++ b/src/components/demos/label-demo.svelte
@@ -1,11 +1,33 @@
 <script lang="ts">
-	import * as Checkbox from "@/components/ui/checkbox";
-	import * as Label from "@/components/ui/label";
+	import { Checkbox } from "$lib";
+	import { Label } from "$lib";
+	import { Check, Minus } from "phosphor-svelte";
 </script>
 
-<div>
-	<div class="flex items-center space-x-2">
-		<Checkbox.Root id="terms" />
-		<Label.Root for="terms">Accept terms and conditions</Label.Root>
-	</div>
+<div class="flex items-center space-x-3">
+	<Checkbox.Root
+		id="terms"
+		aria-labelledby="terms-label"
+		class="peer h-[25px] w-[25px] rounded-md border border-muted bg-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground focus-visible:ring-offset-2 focus-visible:ring-offset-background data-[state=unchecked]:bg-background"
+		checked="indeterminate"
+	>
+		<Checkbox.Indicator
+			let:isChecked
+			let:isIndeterminate
+			class="inline-flex items-center justify-center"
+		>
+			{#if isChecked}
+				<Check class="h-[15px] w-[15px] text-background" />
+			{:else if isIndeterminate}
+				<Minus class="h-[15px] w-[15px] text-background" />
+			{/if}
+		</Checkbox.Indicator>
+	</Checkbox.Root>
+	<Label.Root
+		id="terms-label"
+		for="terms"
+		class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+	>
+		Accept terms and conditions
+	</Label.Root>
 </div>

From b748a823c9d1d13bf2c0dbbf88ede5284a06acc3 Mon Sep 17 00:00:00 2001
From: Hunter Johnston <johnstonhuntera@gmail.com>
Date: Sun, 19 Nov 2023 13:14:38 -0500
Subject: [PATCH 061/217] tests

---
 src/components/demos/accordion-demo.svelte | 20 ++++---
 src/content/api-reference/alert-dialog.ts  | 36 +++++++++++-
 src/lib/bits/accordion/ctx.ts              |  4 +-
 src/tests/accordion/Accordion.spec.ts      | 67 ++++++++++++++++++++--
 src/tests/accordion/AccordionTest.svelte   |  7 ++-
 src/tests/alert-dialog/AlertDialog.spec.ts | 11 ++++
 src/tests/dialog/Dialog.spec.ts            | 11 ++++
 7 files changed, 135 insertions(+), 21 deletions(-)

diff --git a/src/components/demos/accordion-demo.svelte b/src/components/demos/accordion-demo.svelte
index 0a5f7035e..72994b368 100644
--- a/src/components/demos/accordion-demo.svelte
+++ b/src/components/demos/accordion-demo.svelte
@@ -25,16 +25,18 @@
 <Accordion.Root class="w-full sm:max-w-[70%]" multiple>
 	{#each items as item, i}
 		<Accordion.Item value="${i}" class="group border-b border-dark-10 px-1.5">
-			<Accordion.Trigger
-				class="flex w-full flex-1 items-center justify-between py-5 text-[15px] font-medium transition-all [&[data-state=open]>span>svg]:rotate-180 "
-			>
-				{item.title}
-				<span
-					class="inline-flex h-8 w-8 items-center justify-center rounded-[7px] bg-transparent transition-all hover:bg-dark-10"
+			<Accordion.Header>
+				<Accordion.Trigger
+					class="flex w-full flex-1 items-center justify-between py-5 text-[15px] font-medium transition-all [&[data-state=open]>span>svg]:rotate-180 "
 				>
-					<CaretDown class="h-[18px] w-[18px] transition-all duration-200" />
-				</span>
-			</Accordion.Trigger>
+					{item.title}
+					<span
+						class="inline-flex h-8 w-8 items-center justify-center rounded-[7px] bg-transparent transition-all hover:bg-dark-10"
+					>
+						<CaretDown class="h-[18px] w-[18px] transition-all duration-200" />
+					</span>
+				</Accordion.Trigger>
+			</Accordion.Header>
 			<Accordion.Content
 				transition={slide}
 				transitionConfig={{ duration: 200 }}
diff --git a/src/content/api-reference/alert-dialog.ts b/src/content/api-reference/alert-dialog.ts
index 090607201..d2485aa63 100644
--- a/src/content/api-reference/alert-dialog.ts
+++ b/src/content/api-reference/alert-dialog.ts
@@ -64,7 +64,13 @@ export const action: APISchema<AlertDialog.ActionProps> = {
 export const cancel: APISchema<AlertDialog.CancelProps> = {
 	title: "Cancel",
 	description: "A button used to close the alert dialog without taking an action.",
-	props: { asChild }
+	props: { asChild },
+	dataAttributes: [
+		{
+			name: "bits-alert-dialog-cancel",
+			description: "Present on the cancel button."
+		}
+	]
 };
 
 export const content: APISchema<AlertDialog.ContentProps> = {
@@ -76,6 +82,10 @@ export const content: APISchema<AlertDialog.ContentProps> = {
 			name: "state",
 			value: enums("open", "closed"),
 			description: "The state of the alert dialog."
+		},
+		{
+			name: "bits-alert-dialog-content",
+			description: "Present on the content."
 		}
 	]
 };
@@ -104,7 +114,13 @@ export const description: APISchema<AlertDialog.DescriptionProps> = {
 export const trigger: APISchema<AlertDialog.TriggerProps> = {
 	title: "Trigger",
 	description: "The element which opens the alert dialog on press.",
-	props: { asChild }
+	props: { asChild },
+	dataAttributes: [
+		{
+			name: "bits-alert-dialog-trigger",
+			description: "Present on the trigger."
+		}
+	]
 };
 
 export const overlay: APISchema<AlertDialog.OverlayProps> = {
@@ -116,13 +132,27 @@ export const overlay: APISchema<AlertDialog.OverlayProps> = {
 			name: "state",
 			value: enums("open", "closed"),
 			description: "The state of the alert dialog."
+		},
+		{
+			name: "bits-alert-dialog-overlay",
+			description: "Present on the overlay."
 		}
 	]
 };
 
 export const portal: APISchema<AlertDialog.PortalProps> = {
 	title: "Portal",
-	description: "A portal which renders the alert dialog into the body when it is open."
+	description: "A portal which renders the alert dialog into the body when it is open.",
+	dataAttributes: [
+		{
+			name: "portal",
+			description: "Present if the `portal` prop is not `null`."
+		},
+		{
+			name: "bits-alert-dialog-portal",
+			description: "Present on the portal."
+		}
+	]
 };
 
 export const alertDialog = [
diff --git a/src/lib/bits/accordion/ctx.ts b/src/lib/bits/accordion/ctx.ts
index bc1df97a6..900a78edb 100644
--- a/src/lib/bits/accordion/ctx.ts
+++ b/src/lib/bits/accordion/ctx.ts
@@ -55,6 +55,6 @@ export function getTrigger() {
 	const {
 		elements: { trigger }
 	} = getCtx();
-	const { value: props } = getItemProps();
-	return { props, trigger };
+	const { value, disabled } = getItemProps();
+	return { props: { value, disabled }, trigger };
 }
diff --git a/src/tests/accordion/Accordion.spec.ts b/src/tests/accordion/Accordion.spec.ts
index 70c0fd57f..9befc04e9 100644
--- a/src/tests/accordion/Accordion.spec.ts
+++ b/src/tests/accordion/Accordion.spec.ts
@@ -12,28 +12,39 @@ const items: Item[] = [
 		value: "item-1",
 		title: "Item 1",
 		content: "Content 1",
-		disabled: false
+		disabled: false,
+		level: 3
 	},
 	{
 		value: "item-2",
 		title: "Item 2",
 		content: "Content 2",
-		disabled: false
+		disabled: false,
+		level: 3
 	},
 	{
 		value: "item-3",
 		title: "Item 3",
 		content: "Content 3",
-		disabled: false
+		disabled: false,
+		level: 3
 	},
 	{
 		value: "item-4",
 		title: "Item 4",
 		content: "Content 4",
-		disabled: false
+		disabled: false,
+		level: 3
 	}
 ];
 
+const itemsWithDisabled = items.map((item) => {
+	if (item.value === "item-2") {
+		return { ...item, disabled: true };
+	}
+	return item;
+});
+
 describe("Accordion", () => {
 	it("has no accessibility violations", async () => {
 		const { container } = render(AccordionTest, { items });
@@ -54,6 +65,25 @@ describe("Accordion", () => {
 		expect(trigger).toHaveAttribute("data-bits-accordion-trigger");
 	});
 
+	it("has expected data attributes", async () => {
+		const user = userEvent.setup();
+		const { getByTestId } = render(AccordionTest, { items: itemsWithDisabled });
+		const itemEls = items.map((item) => getByTestId(`${item.value}-item`));
+		const triggerEls = items.map((item) => getByTestId(`${item.value}-trigger`));
+
+		expect(itemEls[0]).toHaveAttribute("data-state", "closed");
+		expect(itemEls[0]).not.toHaveAttribute("data-disabled");
+		expect(triggerEls[0]).toHaveAttribute("data-state", "closed");
+		expect(triggerEls[0]).not.toHaveAttribute("data-disabled");
+
+		await user.click(triggerEls[0]);
+		expect(itemEls[0]).toHaveAttribute("data-state", "open");
+		expect(triggerEls[0]).toHaveAttribute("data-state", "open");
+
+		expect(itemEls[1]).toHaveAttribute("data-disabled");
+		expect(triggerEls[1]).toHaveAttribute("data-disabled");
+	});
+
 	it("displays content when an item is expanded", async () => {
 		const user = userEvent.setup();
 		const { getByTestId, queryByTestId } = render(AccordionTest, { items });
@@ -198,6 +228,7 @@ describe("Accordion", () => {
 			expect(triggers[0]).toHaveFocus();
 		}
 	});
+
 	it("focuses the last item when the `End` key is pressed", async () => {
 		const user = userEvent.setup();
 		const { getByTestId } = render(AccordionTest, { items });
@@ -210,4 +241,32 @@ describe("Accordion", () => {
 			expect(triggers[3]).toHaveFocus();
 		}
 	});
+
+	it("respects the `disabled` prop for items", async () => {
+		const user = userEvent.setup();
+		const { getByTestId } = render(AccordionTest, { items: itemsWithDisabled });
+
+		const triggers = items.map((item) => getByTestId(`${item.value}-trigger`));
+		await user.click(triggers[0]);
+
+		await user.keyboard(kbd.ARROW_DOWN);
+		expect(triggers[1]).not.toHaveFocus();
+		expect(triggers[2]).toHaveFocus();
+	});
+
+	it("respects the `level` prop for headers", async () => {
+		const itemsWithLevel = items.map((item, i) => {
+			if (i === 0) {
+				return { ...item, level: 1 } as const;
+			}
+			return item;
+		});
+		const { getByTestId } = render(AccordionTest, { items: itemsWithLevel });
+
+		const headers = items.map((item) => getByTestId(`${item.value}-header`));
+		expect(headers[0]).toHaveAttribute("data-heading-level", "1");
+		expect(headers[0]).toHaveAttribute("aria-level", "1");
+		expect(headers[1]).toHaveAttribute("data-heading-level", "3");
+		expect(headers[1]).toHaveAttribute("aria-level", "3");
+	});
 });
diff --git a/src/tests/accordion/AccordionTest.svelte b/src/tests/accordion/AccordionTest.svelte
index 07b41540a..5cfe4be5e 100644
--- a/src/tests/accordion/AccordionTest.svelte
+++ b/src/tests/accordion/AccordionTest.svelte
@@ -4,6 +4,7 @@
 		title: string;
 		disabled: boolean;
 		content: string;
+		level: 1 | 2 | 3 | 4 | 5 | 6;
 	};
 </script>
 
@@ -17,9 +18,9 @@
 </script>
 
 <Accordion.Root {multiple} {value} {disabled} data-testid="root">
-	{#each items as { value, title, disabled, content }}
-		<Accordion.Item {value} data-testid="{value}-item">
-			<Accordion.Header data-testid="{value}-header">
+	{#each items as { value, title, disabled, content, level }}
+		<Accordion.Item {value} {disabled} data-testid="{value}-item">
+			<Accordion.Header {level} data-testid="{value}-header">
 				<Accordion.Trigger {disabled} data-testid="{value}-trigger">
 					{title}
 				</Accordion.Trigger>
diff --git a/src/tests/alert-dialog/AlertDialog.spec.ts b/src/tests/alert-dialog/AlertDialog.spec.ts
index 6bc096e10..5c600e13e 100644
--- a/src/tests/alert-dialog/AlertDialog.spec.ts
+++ b/src/tests/alert-dialog/AlertDialog.spec.ts
@@ -60,6 +60,17 @@ describe("Alert Dialog", () => {
 		}
 	});
 
+	it("has expected data attributes", async () => {
+		const { getByTestId } = await open();
+
+		const overlay = getByTestId("overlay");
+		expect(overlay).toHaveAttribute("data-state", "open");
+		const content = getByTestId("content");
+		expect(content).toHaveAttribute("data-state", "open");
+		const portal = getByTestId("portal");
+		expect(portal).toHaveAttribute("data-portal");
+	});
+
 	it("opens when the trigger is clicked", async () => {
 		await open();
 	});
diff --git a/src/tests/dialog/Dialog.spec.ts b/src/tests/dialog/Dialog.spec.ts
index c7cc37650..df3698559 100644
--- a/src/tests/dialog/Dialog.spec.ts
+++ b/src/tests/dialog/Dialog.spec.ts
@@ -58,6 +58,17 @@ describe("Dialog", () => {
 		}
 	});
 
+	it("has expected data attributes", async () => {
+		const { getByTestId } = await open();
+
+		const overlay = getByTestId("overlay");
+		expect(overlay).toHaveAttribute("data-state", "open");
+		const content = getByTestId("content");
+		expect(content).toHaveAttribute("data-state", "open");
+		const portal = getByTestId("portal");
+		expect(portal).toHaveAttribute("data-portal");
+	});
+
 	it("opens when the trigger is clicked", async () => {
 		await open();
 	});

From 3400ae8d601c6c120d0c727b4fd547b8af2aef07 Mon Sep 17 00:00:00 2001
From: Hunter Johnston <johnstonhuntera@gmail.com>
Date: Sun, 19 Nov 2023 14:35:25 -0500
Subject: [PATCH 062/217] refactor api ref

---
 .../api-ref/data-attrs-table.svelte           |   3 +-
 .../api-ref/prop-type-content.svelte          |   2 +-
 src/components/api-ref/props-table.svelte     |  17 +-
 src/components/markdown/code.svelte           |   2 +-
 src/content/api-reference/accordion.ts        |  28 +-
 src/content/api-reference/alert-dialog.ts     |  34 ++-
 src/content/api-reference/aspect-ratio.ts     |   2 +-
 src/content/api-reference/avatar.ts           |  34 ++-
 src/content/api-reference/button.ts           |   8 +-
 src/content/api-reference/checkbox.ts         |  12 +-
 src/content/api-reference/collapsible.ts      |  13 +
 src/content/api-reference/context-menu.ts     | 109 ++------
 src/content/api-reference/dialog.ts           |  40 ++-
 src/content/api-reference/dropdown-menu.ts    | 108 ++------
 src/content/api-reference/helpers.ts          |   4 +-
 src/content/api-reference/menu.ts             | 262 ++++++++++++++++--
 src/content/api-reference/menubar.ts          | 109 ++------
 src/lib/bits/avatar/_types.ts                 |   8 +-
 src/lib/bits/context-menu/ctx.ts              |   2 +-
 src/lib/bits/dropdown-menu/ctx.ts             |   2 +-
 .../bits/menubar/components/Menubar.svelte    |   4 +-
 src/lib/bits/menubar/ctx.ts                   |   4 +-
 src/lib/internal/attrs.ts                     |   2 +-
 src/styles/app.postcss                        |   2 +
 src/tests/context-menu/ContextMenu.spec.ts    |   4 +-
 src/tests/dropdown-menu/DropdownMenu.spec.ts  |   4 +-
 src/tests/menubar/Menubar.spec.ts             |   4 +-
 tailwind.config.ts                            |   3 +
 28 files changed, 472 insertions(+), 354 deletions(-)

diff --git a/src/components/api-ref/data-attrs-table.svelte b/src/components/api-ref/data-attrs-table.svelte
index 4969caa83..1494cbae0 100644
--- a/src/components/api-ref/data-attrs-table.svelte
+++ b/src/components/api-ref/data-attrs-table.svelte
@@ -19,8 +19,7 @@
 			{#each dataAttrs as attr}
 				<Table.Row>
 					<Table.Cell class="align-baseline">
-						<Code class="!font-semibold !text-foreground">data-{attr.name}</Code
-						>
+						<Code class="font-semibold text-foreground">data-{attr.name}</Code>
 					</Table.Cell>
 					<Table.Cell class="align-baseline">
 						{#if attr.description}
diff --git a/src/components/api-ref/prop-type-content.svelte b/src/components/api-ref/prop-type-content.svelte
index ec28a38b4..5640fe6ed 100644
--- a/src/components/api-ref/prop-type-content.svelte
+++ b/src/components/api-ref/prop-type-content.svelte
@@ -23,7 +23,7 @@
 			<Popover.Content
 				transition={flyAndScale}
 				transitionConfig={{ y: 8 }}
-				class="z-50 rounded-input border border-border bg-background p-4 shadow-popover"
+				class="z-50 max-h-[400px] overflow-auto rounded-input border border-border bg-background p-4 shadow-popover"
 			>
 				<Code class="h-auto bg-transparent px-0 tracking-tight text-foreground">
 					{@html parseTypeDef(type.definition)}
diff --git a/src/components/api-ref/props-table.svelte b/src/components/api-ref/props-table.svelte
index 09bde334e..6989f06a4 100644
--- a/src/components/api-ref/props-table.svelte
+++ b/src/components/api-ref/props-table.svelte
@@ -8,8 +8,13 @@
 	export let props: PropObj<Record<string, unknown>>;
 
 	$: propData = Object.entries(props).map(([name, prop]) => {
-		const { type, description, default: defaultVal } = prop as PropSchema;
-		return { name, type, description, default: defaultVal };
+		const {
+			type,
+			description,
+			default: defaultVal,
+			required
+		} = prop as PropSchema;
+		return { name, type, description, default: defaultVal, required };
 	});
 </script>
 
@@ -22,10 +27,14 @@
 		</Table.Row>
 	</Table.Header>
 	<Table.Body>
-		{#each propData as { type, name, description, default: defaultVal }}
+		{#each propData as { type, name, description, default: defaultVal, required }}
 			<Table.Row>
-				<Table.Cell class="pr-1 align-baseline">
+				<Table.Cell class="flex items-center gap-1 pr-1 align-baseline">
 					<Code class="font-semibold text-foreground">{name}</Code>
+					{#if required}
+						<div class="pb-1 text-destructive">*</div>
+						<span class="sr-only">Required</span>
+					{/if}
 				</Table.Cell>
 				<Table.Cell class="pr-1 align-baseline">
 					<PropTypeContent {type} />
diff --git a/src/components/markdown/code.svelte b/src/components/markdown/code.svelte
index b71a5b417..32faaf683 100644
--- a/src/components/markdown/code.svelte
+++ b/src/components/markdown/code.svelte
@@ -6,7 +6,7 @@
 
 <code
 	class={cn(
-		"relative inline-flex h-[27px] items-center justify-center rounded-button bg-muted px-[8px] font-mono text-sm font-medium tracking-tighter text-foreground/60",
+		"relative inline-flex h-[27px] items-center justify-center rounded-button bg-muted px-[8px] font-mono text-xs font-medium tracking-tighter text-foreground/60 sm:text-sm",
 		className,
 		"custom"
 	)}
diff --git a/src/content/api-reference/accordion.ts b/src/content/api-reference/accordion.ts
index ff05d6ed8..ae1c952d4 100644
--- a/src/content/api-reference/accordion.ts
+++ b/src/content/api-reference/accordion.ts
@@ -131,4 +131,30 @@ const content: APISchema<Accordion.ContentProps> = {
 	]
 };
 
-export const accordion = [root, item, trigger, content];
+const header: APISchema<Accordion.HeaderProps> = {
+	title: "Header",
+	description: "The accordion item header, which wraps the trigger and makes it more accessible.",
+	props: {
+		level: {
+			type: {
+				type: C.ENUM,
+				definition: union("1", "2", "3", "4", "5", "6")
+			},
+			description:
+				"The heading level to use for the header. This will be set as the `aria-level` attribute."
+		},
+		asChild
+	},
+	dataAttributes: [
+		{
+			name: "heading-level",
+			description: "The heading level of the header."
+		},
+		{
+			name: "bits-accordion-header",
+			description: "Present on the header element."
+		}
+	]
+};
+
+export const accordion = [root, item, header, trigger, content];
diff --git a/src/content/api-reference/alert-dialog.ts b/src/content/api-reference/alert-dialog.ts
index d2485aa63..b2ff3c195 100644
--- a/src/content/api-reference/alert-dialog.ts
+++ b/src/content/api-reference/alert-dialog.ts
@@ -4,7 +4,7 @@ import * as C from "@/content/constants.js";
 import { focusProp } from "@/content/api-reference/extended-types/index.js";
 import type * as AlertDialog from "$lib/bits/alert-dialog/_types.js";
 
-export const root: APISchema<AlertDialog.Props> = {
+const root: APISchema<AlertDialog.Props> = {
 	title: "Root",
 	description: "The root component used to set and manage the state of the alert dialog.",
 	props: {
@@ -47,7 +47,7 @@ export const root: APISchema<AlertDialog.Props> = {
 	}
 };
 
-export const action: APISchema<AlertDialog.ActionProps> = {
+const action: APISchema<AlertDialog.ActionProps> = {
 	title: "Action",
 	description: "A button used to close the alert dialog by taking an action.",
 	props: {
@@ -61,7 +61,7 @@ export const action: APISchema<AlertDialog.ActionProps> = {
 	]
 };
 
-export const cancel: APISchema<AlertDialog.CancelProps> = {
+const cancel: APISchema<AlertDialog.CancelProps> = {
 	title: "Cancel",
 	description: "A button used to close the alert dialog without taking an action.",
 	props: { asChild },
@@ -73,7 +73,7 @@ export const cancel: APISchema<AlertDialog.CancelProps> = {
 	]
 };
 
-export const content: APISchema<AlertDialog.ContentProps> = {
+const content: APISchema<AlertDialog.ContentProps> = {
 	title: "Content",
 	description: "The content displayed within the alert dialog modal.",
 	props: { ...transitionProps, asChild },
@@ -90,7 +90,7 @@ export const content: APISchema<AlertDialog.ContentProps> = {
 	]
 };
 
-export const title: APISchema<AlertDialog.TitleProps> = {
+const title: APISchema<AlertDialog.TitleProps> = {
 	title: "Title",
 	description: "An accessibile title for the alert dialog.",
 	props: {
@@ -102,16 +102,28 @@ export const title: APISchema<AlertDialog.TitleProps> = {
 			},
 			description: "The heading level of the title."
 		}
-	}
+	},
+	dataAttributes: [
+		{
+			name: "bits-alert-dialog-title",
+			description: "Present on the title."
+		}
+	]
 };
 
-export const description: APISchema<AlertDialog.DescriptionProps> = {
+const description: APISchema<AlertDialog.DescriptionProps> = {
 	title: "Description",
 	description: "An accessibile description for the alert dialog.",
-	props: { asChild }
+	props: { asChild },
+	dataAttributes: [
+		{
+			name: "bits-alert-dialog-description",
+			description: "Present on the description."
+		}
+	]
 };
 
-export const trigger: APISchema<AlertDialog.TriggerProps> = {
+const trigger: APISchema<AlertDialog.TriggerProps> = {
 	title: "Trigger",
 	description: "The element which opens the alert dialog on press.",
 	props: { asChild },
@@ -123,7 +135,7 @@ export const trigger: APISchema<AlertDialog.TriggerProps> = {
 	]
 };
 
-export const overlay: APISchema<AlertDialog.OverlayProps> = {
+const overlay: APISchema<AlertDialog.OverlayProps> = {
 	title: "Overlay",
 	description: "An overlay which covers the body when the alert dialog is open.",
 	props: { ...transitionProps, asChild },
@@ -140,7 +152,7 @@ export const overlay: APISchema<AlertDialog.OverlayProps> = {
 	]
 };
 
-export const portal: APISchema<AlertDialog.PortalProps> = {
+const portal: APISchema<AlertDialog.PortalProps> = {
 	title: "Portal",
 	description: "A portal which renders the alert dialog into the body when it is open.",
 	dataAttributes: [
diff --git a/src/content/api-reference/aspect-ratio.ts b/src/content/api-reference/aspect-ratio.ts
index 1922746e5..a66efba46 100644
--- a/src/content/api-reference/aspect-ratio.ts
+++ b/src/content/api-reference/aspect-ratio.ts
@@ -2,7 +2,7 @@ import type { APISchema } from "@/types";
 import type * as AspectRatio from "$lib/bits/aspect-ratio/_types.js";
 import * as C from "@/content/constants";
 
-export const root: APISchema<AspectRatio.Props> = {
+const root: APISchema<AspectRatio.Props> = {
 	title: "Root",
 	description: "The aspect ratio component.",
 	props: {
diff --git a/src/content/api-reference/avatar.ts b/src/content/api-reference/avatar.ts
index a8b6a2b30..4aaea428d 100644
--- a/src/content/api-reference/avatar.ts
+++ b/src/content/api-reference/avatar.ts
@@ -29,31 +29,39 @@ export const root: APISchema<Avatar.Props> = {
 			description: "A callback function called when the loading status of the image changes."
 		},
 		asChild
-	}
+	},
+	dataAttributes: [
+		{
+			name: "bits-avatar-root",
+			description: "Present on the root element."
+		}
+	]
 };
 
 export const image: APISchema<Avatar.ImageProps> = {
 	title: "Image",
 	description: "The avatar image displayed once it has loaded.",
 	props: {
-		src: {
-			type: "HTMLImgAttributes['src']",
-			description:
-				"The source of the image. This is typed the same as the native `img` element so you can use any valid `img` `src` value."
-		},
-		alt: {
-			type: "HTMLImgAttributes['src']",
-			description:
-				"The alt text of the image. This is typed the same as the native `img` element so you can use any valid `img` `alt` value."
-		},
 		asChild
-	}
+	},
+	dataAttributes: [
+		{
+			name: "bits-avatar-image",
+			description: "Present on the image element."
+		}
+	]
 };
 
 export const fallback: APISchema<Avatar.FallbackProps> = {
 	title: "Fallback",
 	description: "The fallback displayed while the avatar image is loading or if it fails to load",
-	props: { asChild }
+	props: { asChild },
+	dataAttributes: [
+		{
+			name: "bits-avatar-fallback",
+			description: "Present on the fallback element."
+		}
+	]
 };
 
 export const avatar = [root, image, fallback];
diff --git a/src/content/api-reference/button.ts b/src/content/api-reference/button.ts
index cbe4e462c..08d836c52 100644
--- a/src/content/api-reference/button.ts
+++ b/src/content/api-reference/button.ts
@@ -15,7 +15,13 @@ export const root: APISchema<Button.Props & { href: string }> = {
 			type: C.STRING,
 			description: "An optional prop that when passed converts the button into an anchor tag."
 		}
-	}
+	},
+	dataAttributes: [
+		{
+			name: "bits-button-root",
+			description: "Present on the button element."
+		}
+	]
 };
 
 export const button = [root];
diff --git a/src/content/api-reference/checkbox.ts b/src/content/api-reference/checkbox.ts
index 6d7f8a10e..f9138f54c 100644
--- a/src/content/api-reference/checkbox.ts
+++ b/src/content/api-reference/checkbox.ts
@@ -54,6 +54,10 @@ export const root: APISchema<Checkbox.Props> = {
 			name: "state",
 			value: enums("checked", "unchecked", "indeterminate"),
 			description: "The checkbox's state. Can be 'checked', 'unchecked', or 'indeterminate'."
+		},
+		{
+			name: "bits-checkbox-root",
+			description: "Present on the root element."
 		}
 	]
 };
@@ -82,7 +86,13 @@ export const indicator: APISchema<Checkbox.IndicatorProps> = {
 	title: "Indicator",
 	description:
 		"A component which passes `isChecked` and `isIndeterminate` slot props to its children. This is useful for rendering the checkbox's indicator icon depending on its state.",
-	props: { asChild }
+	props: { asChild },
+	dataAttributes: [
+		{
+			name: "bits-checkbox-indicator",
+			description: "Present on the indicator element."
+		}
+	]
 };
 
 export const checkbox = [root, input, indicator];
diff --git a/src/content/api-reference/collapsible.ts b/src/content/api-reference/collapsible.ts
index 475f47c2f..88808e1f3 100644
--- a/src/content/api-reference/collapsible.ts
+++ b/src/content/api-reference/collapsible.ts
@@ -2,6 +2,7 @@ import type { APISchema, PropObj } from "@/types";
 import { asChild, enums, transitionProps } from "@/content/api-reference/helpers.js";
 import type * as Collapsible from "$lib/bits/collapsible/_types";
 import * as C from "@/content/constants";
+
 export const root: APISchema<Collapsible.Props> = {
 	title: "Root",
 	description: "The root collapsible container which manages the state of the collapsible.",
@@ -37,6 +38,10 @@ export const root: APISchema<Collapsible.Props> = {
 			name: "state",
 			value: enums("open", "closed"),
 			description: "The collapsible's open state."
+		},
+		{
+			name: "bits-collapsible-root",
+			description: "Present on the root element."
 		}
 	]
 };
@@ -55,6 +60,10 @@ export const trigger: APISchema<Collapsible.TriggerProps> = {
 			name: "state",
 			value: enums("open", "closed"),
 			description: "The collapsible's open state."
+		},
+		{
+			name: "bits-collapsible-trigger",
+			description: "Present on the trigger element."
 		}
 	]
 };
@@ -78,6 +87,10 @@ export const content: APISchema<Collapsible.ContentProps> = {
 			name: "state",
 			value: enums("open", "closed"),
 			description: "The collapsible's open state."
+		},
+		{
+			name: "bits-collapsible-content",
+			description: "Present on the content element."
 		}
 	]
 };
diff --git a/src/content/api-reference/context-menu.ts b/src/content/api-reference/context-menu.ts
index b636fb561..6f8353120 100644
--- a/src/content/api-reference/context-menu.ts
+++ b/src/content/api-reference/context-menu.ts
@@ -1,123 +1,67 @@
 import type { APISchema } from "@/types";
-import {
-	arrowProps,
-	props,
-	checkboxItemProps,
-	contentProps,
-	itemProps,
-	radioGroupProps,
-	radioItemProps,
-	separatorProps,
-	triggerProps,
-	groupProps,
-	labelProps,
-	subProps,
-	subTriggerProps,
-	subContentProps,
-	checkboxIndicatorProps
-} from "./menu";
+import { menu } from "./menu";
 import type * as Menu from "$lib/bits/menu/_types";
 
 export const root: APISchema<Menu.Props> = {
 	title: "Root",
 	description: "The root component which manages & scopes the state of the context menu.",
-	props
+	...menu.root
 };
 
 export const trigger: APISchema<Menu.TriggerProps> = {
 	title: "Trigger",
 	description: "The element which when right-clicked, opens the context menu.",
-	props: triggerProps,
-	dataAttributes: [
-		{
-			name: "state",
-			value: "'open' | 'closed'",
-			description: "The context menu's open state."
-		}
-	]
+	...menu.trigger
 };
 
 export const content: APISchema<Menu.ContentProps> = {
 	title: "Content",
 	description: "The content displayed when the context menu is open.",
-	props: contentProps,
-	dataAttributes: [
-		{
-			name: "state",
-			value: "'open' | 'closed'",
-			description: "The collapsible's open state."
-		}
-	]
+	...menu.content
 };
 
 export const item: APISchema<Menu.ItemProps & { href: string }> = {
 	title: "Item",
 	description: "A menu item within the context menu.",
-	props: itemProps,
-	dataAttributes: [
-		{
-			name: "orientation",
-			value: "'horizontal' | 'vertical'",
-			description: "The orientation of the context menu item."
-		},
-		{
-			name: "highlighted",
-			value: "''",
-			description: "Present when the menu item is highlighted."
-		}
-	]
+	...menu.item
 };
 
 export const separator: APISchema<Menu.SeparatorProps> = {
 	title: "Separator",
 	description: "A horizontal line to visually separate menu items.",
-	props: separatorProps
+	...menu.separator
 };
 
 export const arrow: APISchema<Menu.ArrowProps> = {
 	title: "Arrow",
 	description: "An optional arrow which points to the context menu's anchor/trigger point.",
-	props: arrowProps,
-	dataAttributes: [
-		{
-			name: "arrow",
-			value: "''",
-			description: "Present on the arrow elements of the context menu."
-		}
-	]
+	...menu.arrow
 };
 
 export const checkboxItem: APISchema<Menu.CheckboxItemProps> = {
 	title: "CheckboxItem",
 	description: "A menu item that can be controlled and toggled like a checkbox.",
-	props: checkboxItemProps,
-	dataAttributes: [
-		{
-			name: "orientation",
-			value: "'horizontal' | 'vertical'",
-			description: "The orientation of the checkbox menu item."
-		}
-	]
+	...menu.checkboxItem
 };
 
 export const checkboxIndicator: APISchema<Menu.CheckboxItemIndicatorProps> = {
 	title: "CheckboxIndicator",
 	description:
-		"A visual indicator of the checkbox menu item's checked state. It passed the item's checked state as a slot prop `checked` and can be used to render a custom indicator.",
-	props: checkboxIndicatorProps
+		"A visual indicator of the checkbox menu item's checked state. It passes the item's checked state as a slot prop `checked` and can be used to render a custom indicator.",
+	...menu.checkboxIndicator
 };
 
 export const radioGroup: APISchema<Menu.RadioGroupProps> = {
 	title: "RadioGroup",
 	description: "A group of radio menu items, where only one can be checked at a time.",
-	props: radioGroupProps
+	...menu.radioGroup
 };
 
 export const radioItem: APISchema<Menu.RadioItemProps> = {
 	title: "RadioItem",
 	description:
 		"A menu item that can be controlled and toggled like a radio button. It must be a child of a `RadioGroup`.",
-	props: radioItemProps
+	...menu.radioItem
 };
 
 export const radioIndicator: APISchema = {
@@ -130,52 +74,33 @@ export const sub: APISchema<Menu.SubProps> = {
 	title: "Sub",
 	description:
 		"A submenu belonging to the parent context menu. Responsible for managing the state of the submenu.",
-	props: subProps
+	...menu.sub
 };
 
 export const subTrigger: APISchema<Menu.SubTriggerProps> = {
 	title: "SubTrigger",
 	description: "A menu item which when pressed or hovered, opens the submenu.",
-	props: subTriggerProps,
-	dataAttributes: [
-		{
-			name: "state",
-			value: "'open' | 'closed'",
-			description: "The submenu's open state."
-		},
-		{
-			name: "disabled",
-			value: "''",
-			description: "Present when the submenu trigger is disabled."
-		}
-	]
+	...menu.subTrigger
 };
 
 export const subContent: APISchema<Menu.SubContentProps> = {
 	title: "SubContent",
 	description: "The submenu content displayed when the parent submenu is open.",
-	props: subContentProps,
-	dataAttributes: [
-		{
-			name: "state",
-			value: "'open' | 'closed'",
-			description: "The submenu's open state."
-		}
-	]
+	...menu.subContent
 };
 
 export const group: APISchema<Menu.GroupProps> = {
 	title: "Group",
 	description:
 		"A group of menu items. It can be used along with the `Menu.Label` component to provide a visual label for a group of menu items. When a label is within a group, appropriate aria attributes will be applied to the group.",
-	props: groupProps
+	...menu.group
 };
 
 export const label: APISchema<Menu.LabelProps> = {
 	title: "Label",
 	description:
 		"A label which will be skipped when navigating with the keyboard. It is used to provide a visual label for a group of menu items. When a label is within a `Menu.Group`, appropriate aria attributes will be applied to the group.",
-	props: labelProps
+	...menu.label
 };
 
 export const contextMenu = [
diff --git a/src/content/api-reference/dialog.ts b/src/content/api-reference/dialog.ts
index e33925bc6..419e78be5 100644
--- a/src/content/api-reference/dialog.ts
+++ b/src/content/api-reference/dialog.ts
@@ -50,7 +50,13 @@ export const root: APISchema<Dialog.Props> = {
 export const close: APISchema<Dialog.CloseProps> = {
 	title: "Close",
 	description: "A button used to close the dialog.",
-	props: { asChild }
+	props: { asChild },
+	dataAttributes: [
+		{
+			name: "bits-dialog-close",
+			description: "Present on the close button."
+		}
+	]
 };
 
 export const content: APISchema<Dialog.ContentProps> = {
@@ -84,13 +90,25 @@ export const title: APISchema<Dialog.TitleProps> = {
 export const description: APISchema<Dialog.DescriptionProps> = {
 	title: "Description",
 	description: "An accessibile description for the dialog.",
-	props: { asChild }
+	props: { asChild },
+	dataAttributes: [
+		{
+			name: "bits-dialog-description",
+			description: "Present on the description."
+		}
+	]
 };
 
 export const trigger: APISchema<Dialog.TriggerProps> = {
 	title: "Trigger",
 	description: "The element which opens the dialog on press.",
-	props: { asChild }
+	props: { asChild },
+	dataAttributes: [
+		{
+			name: "bits-dialog-trigger",
+			description: "Present on the trigger."
+		}
+	]
 };
 
 export const overlay: APISchema<Dialog.OverlayProps> = {
@@ -102,6 +120,10 @@ export const overlay: APISchema<Dialog.OverlayProps> = {
 			name: "state",
 			value: enums("open", "closed"),
 			description: "The state of the dialog."
+		},
+		{
+			name: "bits-dialog-overlay",
+			description: "Present on the overlay."
 		}
 	]
 };
@@ -109,7 +131,17 @@ export const overlay: APISchema<Dialog.OverlayProps> = {
 export const portal: APISchema<Dialog.PortalProps> = {
 	title: "Portal",
 	description: "A portal which renders the dialog into the body when it is open.",
-	props: { asChild }
+	props: { asChild },
+	dataAttributes: [
+		{
+			name: "portal",
+			description: "Present on the portal."
+		},
+		{
+			name: "bits-dialog-portal",
+			description: "Present on the portal."
+		}
+	]
 };
 
 export const dialog = [root, trigger, content, overlay, portal, close, title, description];
diff --git a/src/content/api-reference/dropdown-menu.ts b/src/content/api-reference/dropdown-menu.ts
index 224079b45..4c7fb6367 100644
--- a/src/content/api-reference/dropdown-menu.ts
+++ b/src/content/api-reference/dropdown-menu.ts
@@ -1,124 +1,67 @@
 import type { APISchema } from "@/types";
-import {
-	arrowProps,
-	props,
-	checkboxItemProps,
-	contentProps,
-	itemProps,
-	radioGroupProps,
-	radioItemProps,
-	separatorProps,
-	triggerProps,
-	groupProps,
-	labelProps,
-	subProps,
-	subTriggerProps,
-	subContentProps,
-	checkboxIndicatorProps
-} from "./menu";
+import { menu } from "./menu";
 import type * as Menu from "$lib/bits/menu/_types";
-import { enums } from "@/content/api-reference/helpers.js";
 
 export const root: APISchema<Menu.Props> = {
 	title: "Root",
 	description: "The root component which manages & scopes the state of the dropdown menu.",
-	props
+	...menu.root
 };
 
 export const trigger: APISchema<Menu.TriggerProps> = {
 	title: "Trigger",
 	description: "The button element which toggles the dropdown menu.",
-	props: triggerProps,
-	dataAttributes: [
-		{
-			name: "state",
-			value: enums("open", "closed"),
-			description: "The dropdown menu's open state."
-		}
-	]
+	...menu.trigger
 };
 
 export const content: APISchema<Menu.ContentProps> = {
 	title: "Content",
 	description: "The content displayed when the dropdown menu is open.",
-	props: contentProps,
-	dataAttributes: [
-		{
-			name: "state",
-			value: enums("open", "closed"),
-			description: "The collapsible's open state."
-		}
-	]
+	...menu.content
 };
 
 export const item: APISchema<Menu.ItemProps & { href: string }> = {
 	title: "Item",
 	description: "A menu item within the dropdown menu.",
-	props: itemProps,
-	dataAttributes: [
-		{
-			name: "orientation",
-			value: enums("horizontal", "vertical"),
-			description: "The orientation of the dropdown menu item."
-		},
-		{
-			name: "highlighted",
-			value: "''",
-			description: "Present when the menu item is highlighted."
-		}
-	]
+	...menu.item
 };
 
 export const separator: APISchema<Menu.SeparatorProps> = {
 	title: "Separator",
 	description: "A horizontal line to visually separate menu items.",
-	props: separatorProps
+	...menu.separator
 };
 
 export const arrow: APISchema<Menu.ArrowProps> = {
 	title: "Arrow",
 	description: "An optional arrow which points to the dropdown menu's anchor/trigger point.",
-	props: arrowProps,
-	dataAttributes: [
-		{
-			name: "arrow",
-			value: "''",
-			description: "Present on the arrow elements of the dropdown menu."
-		}
-	]
+	...menu.arrow
 };
 
 export const checkboxItem: APISchema<Menu.CheckboxItemProps> = {
 	title: "CheckboxItem",
 	description: "A menu item that can be controlled and toggled like a checkbox.",
-	props: checkboxItemProps,
-	dataAttributes: [
-		{
-			name: "orientation",
-			value: enums("horizontal", "vertical"),
-			description: "The orientation of the checkbox menu item."
-		}
-	]
+	...menu.checkboxItem
 };
 
 export const checkboxIndicator: APISchema<Menu.CheckboxItemIndicatorProps> = {
 	title: "CheckboxIndicator",
 	description:
 		"A visual indicator of the checkbox menu item's checked state. It passed the item's checked state as a slot prop `checked` and can be used to render a custom indicator.",
-	props: checkboxIndicatorProps
+	...menu.checkboxIndicator
 };
 
 export const radioGroup: APISchema<Menu.RadioGroupProps> = {
 	title: "RadioGroup",
 	description: "A group of radio menu items, where only one can be checked at a time.",
-	props: radioGroupProps
+	...menu.radioGroup
 };
 
 export const radioItem: APISchema<Menu.RadioItemProps> = {
 	title: "RadioItem",
 	description:
 		"A menu item that can be controlled and toggled like a radio button. It must be a child of a `RadioGroup`.",
-	props: radioItemProps
+	...menu.radioItem
 };
 
 export const radioIndicator: APISchema = {
@@ -131,52 +74,33 @@ export const sub: APISchema<Menu.SubProps> = {
 	title: "Sub",
 	description:
 		"A submenu belonging to the parent dropdown menu. Responsible for managing the state of the submenu.",
-	props: subProps
+	...menu.sub
 };
 
 export const subTrigger: APISchema<Menu.SubTriggerProps> = {
 	title: "SubTrigger",
 	description: "A menu item which when pressed or hovered, opens the submenu.",
-	props: subTriggerProps,
-	dataAttributes: [
-		{
-			name: "state",
-			value: enums("open", "closed"),
-			description: "The submenu's open state."
-		},
-		{
-			name: "disabled",
-			value: "''",
-			description: "Present when the submenu trigger is disabled."
-		}
-	]
+	...menu.subTrigger
 };
 
 export const subContent: APISchema<Menu.SubContentProps> = {
 	title: "SubContent",
 	description: "The submenu content displayed when the parent submenu is open.",
-	props: subContentProps,
-	dataAttributes: [
-		{
-			name: "state",
-			value: enums("open", "closed"),
-			description: "The submenu's open state."
-		}
-	]
+	...menu.subContent
 };
 
 export const group: APISchema<Menu.GroupProps> = {
 	title: "Group",
 	description:
 		"A group of menu items. It can be used along with the `Menu.Label` component to provide a visual label for a group of menu items. When a label is within a group, appropriate aria attributes will be applied to the group.",
-	props: groupProps
+	...menu.group
 };
 
 export const label: APISchema<Menu.LabelProps> = {
 	title: "Label",
 	description:
 		"A label which will be skipped when navigating with the keyboard. It is used to provide a visual label for a group of menu items. When a label is within a `Menu.Group`, appropriate aria attributes will be applied to the group.",
-	props: labelProps
+	...menu.label
 };
 
 export const dropdownMenu = [
diff --git a/src/content/api-reference/helpers.ts b/src/content/api-reference/helpers.ts
index 698ea64ed..008ce3efe 100644
--- a/src/content/api-reference/helpers.ts
+++ b/src/content/api-reference/helpers.ts
@@ -24,8 +24,8 @@ const transitionProp: PropSchema = {
 };
 
 const transitionConfigProp: PropSchema = {
-	type: C.OBJECT,
-	description: "The Svelte `TransitionConfig` object to apply to the transition."
+	type: "TransitionConfig",
+	description: "The configuration to apply to the transition."
 };
 
 export const transitionProps = {
diff --git a/src/content/api-reference/menu.ts b/src/content/api-reference/menu.ts
index e60d8d51e..86b5523ba 100644
--- a/src/content/api-reference/menu.ts
+++ b/src/content/api-reference/menu.ts
@@ -1,4 +1,4 @@
-import type { PropObj } from "@/types";
+import type { APISchema, PropObj } from "@/types";
 import { floatingConfigProp, focusProp } from "./extended-types";
 import {
 	asChild,
@@ -10,7 +10,7 @@ import {
 import type * as Menu from "$lib/bits/menu/_types";
 import * as C from "@/content/constants";
 
-export const props = {
+const props = {
 	preventScroll: {
 		default: C.TRUE,
 		type: C.BOOLEAN,
@@ -72,7 +72,7 @@ export const props = {
 	}
 } satisfies PropObj<Menu.Props>;
 
-export const subProps = {
+const subProps = {
 	disabled: {
 		type: C.BOOLEAN,
 		description: "Whether or not the submenu is disabled."
@@ -95,7 +95,7 @@ export const subProps = {
 	}
 } satisfies PropObj<Menu.SubProps>;
 
-export const contentProps = {
+const contentProps = {
 	...transitionProps,
 	sideOffset: {
 		type: C.NUMBER,
@@ -105,7 +105,7 @@ export const contentProps = {
 	asChild
 } satisfies PropObj<Menu.ContentProps>;
 
-export const subContentProps = {
+const subContentProps = {
 	...transitionProps,
 	asChild,
 	sideOffset: {
@@ -115,7 +115,7 @@ export const subContentProps = {
 	}
 } satisfies PropObj<Menu.SubContentProps>;
 
-export const arrowProps = {
+const arrowProps = {
 	asChild,
 	size: {
 		type: C.NUMBER,
@@ -124,7 +124,7 @@ export const arrowProps = {
 	}
 } satisfies PropObj<Menu.ArrowProps>;
 
-export const checkboxItemProps = {
+const checkboxItemProps = {
 	disabled: {
 		type: C.BOOLEAN,
 		default: C.FALSE,
@@ -146,7 +146,7 @@ export const checkboxItemProps = {
 	asChild
 } satisfies PropObj<Menu.CheckboxItemProps>;
 
-export const radioGroupProps = {
+const radioGroupProps = {
 	value: {
 		type: C.STRING,
 		description: "The value of the currently checked radio menu item."
@@ -161,7 +161,7 @@ export const radioGroupProps = {
 	asChild
 } satisfies PropObj<Menu.RadioGroupProps>;
 
-export const radioItemProps = {
+const radioItemProps = {
 	value: {
 		type: C.STRING,
 		description:
@@ -176,7 +176,7 @@ export const radioItemProps = {
 	asChild
 } satisfies PropObj<Menu.RadioItemProps>;
 
-export const itemProps = {
+const itemProps = {
 	asChild,
 	disabled: {
 		type: C.BOOLEAN,
@@ -189,7 +189,7 @@ export const itemProps = {
 	}
 } satisfies PropObj<Menu.ItemProps & { href: string }>;
 
-export const subTriggerProps = {
+const subTriggerProps = {
 	disabled: {
 		type: C.BOOLEAN,
 		default: C.FALSE,
@@ -198,10 +198,240 @@ export const subTriggerProps = {
 	asChild
 } satisfies PropObj<Menu.SubTriggerProps>;
 
-export const triggerProps = { asChild } satisfies PropObj<Menu.TriggerProps>;
-export const groupProps = { asChild } satisfies PropObj<Menu.GroupProps>;
-export const labelProps = { asChild } satisfies PropObj<Menu.LabelProps>;
-export const separatorProps = { asChild } satisfies PropObj<Menu.SeparatorProps>;
-export const checkboxIndicatorProps = {
+const triggerProps = { asChild } satisfies PropObj<Menu.TriggerProps>;
+const groupProps = { asChild } satisfies PropObj<Menu.GroupProps>;
+const labelProps = { asChild } satisfies PropObj<Menu.LabelProps>;
+const separatorProps = { asChild } satisfies PropObj<Menu.SeparatorProps>;
+const checkboxIndicatorProps = {
 	asChild
 } satisfies PropObj<Menu.CheckboxItemIndicatorProps>;
+
+const STATE = {
+	name: "state",
+	value: enums("open", "closed"),
+	description: "The open state of the menu or submenu the element controls or belongs to."
+};
+
+type DataAttrs = APISchema["dataAttributes"];
+
+const triggerAttrs: DataAttrs = [
+	STATE,
+	{
+		name: "bits-menu-trigger",
+		description: "Present on the trigger element."
+	}
+];
+
+const contentAttrs: DataAttrs = [
+	STATE,
+	{
+		name: "bits-menu-content",
+		description: "Present on the content element."
+	}
+];
+
+const arrowAttrs: DataAttrs = [
+	STATE,
+	{
+		name: "bits-menu-arrow",
+		description: "Present on the arrow element."
+	}
+];
+
+const sharedItemAttrs: DataAttrs = [
+	{
+		name: "orientation",
+		value: "vertical"
+	},
+	{
+		name: "highlighted",
+		description: "Present when the menu item is highlighted."
+	},
+	{
+		name: "disabled",
+		description: "Present when the menu item is disabled."
+	}
+];
+
+const itemAttrs: DataAttrs = [
+	...sharedItemAttrs,
+	{
+		name: "bits-menu-item",
+		description: "Present on the item element."
+	}
+];
+
+const groupAttrs: DataAttrs = [
+	{
+		name: "bits-menu-group",
+		description: "Present on the group element."
+	}
+];
+
+const labelAttrs: DataAttrs = [
+	{
+		name: "bits-menu-label",
+		description: "Present on the group label element."
+	}
+];
+
+const checkboxItemAttrs: DataAttrs = [
+	...sharedItemAttrs,
+	{
+		name: "state",
+		value: enums("checked", "unchecked", "indeterminate"),
+		description: "The checkbox menu item's checked state."
+	}
+];
+
+const radioGroupAttrs: DataAttrs = [
+	{
+		name: "bits-menu-radio-group",
+		description: "Present on the radio group element."
+	}
+];
+
+const radioItemAttrs: DataAttrs = [
+	...sharedItemAttrs,
+	{
+		name: "state",
+		value: enums("checked", "unchecked"),
+		description: "The radio menu item's checked state."
+	},
+	{
+		name: "value",
+		description: "The value of the radio item."
+	},
+	{
+		name: "bits-menu-radio-item",
+		description: "Present on the radio item element."
+	}
+];
+
+const separatorAttrs: DataAttrs = [
+	{
+		name: "orientation",
+		value: "vertical",
+		description: "The orientation of the separator."
+	},
+	{
+		name: "bits-menu-separator",
+		description: "Present on the separator element."
+	}
+];
+
+const subContentAttrs: DataAttrs = [
+	STATE,
+	{
+		name: "bits-menu-sub-content",
+		description: "Present on the submenu content element."
+	}
+];
+
+const subTriggerAttrs: DataAttrs = [
+	...sharedItemAttrs,
+	STATE,
+	{
+		name: "bits-menu-sub-trigger",
+		description: "Present on the submenu trigger element."
+	}
+];
+
+const checkboxIndicatorAttrs: DataAttrs = [
+	{
+		name: "bits-menu-checkbox-indicator",
+		description: "Present on the checkbox indicator element."
+	}
+];
+
+export const trigger = {
+	props: triggerProps,
+	dataAttributes: triggerAttrs
+};
+
+export const content = {
+	props: contentProps,
+	dataAttributes: contentAttrs
+};
+
+export const arrow = {
+	props: arrowProps,
+	dataAttributes: arrowAttrs
+};
+
+export const item = {
+	props: itemProps,
+	dataAttributes: itemAttrs
+};
+
+export const group = {
+	props: groupProps,
+	dataAttributes: groupAttrs
+};
+
+export const label = {
+	props: labelProps,
+	dataAttributes: labelAttrs
+};
+
+export const separator = {
+	props: separatorProps,
+	dataAttributes: separatorAttrs
+};
+
+export const checkboxIndicator = {
+	props: checkboxIndicatorProps,
+	dataAttributes: checkboxIndicatorAttrs
+};
+
+export const checkboxItem = {
+	props: checkboxItemProps,
+	dataAttributes: checkboxItemAttrs
+};
+
+export const radioGroup = {
+	props: radioGroupProps,
+	dataAttributes: radioGroupAttrs
+};
+
+export const radioItem = {
+	props: radioItemProps,
+	dataAttributes: radioItemAttrs
+};
+
+export const subTrigger = {
+	props: subTriggerProps,
+	dataAttributes: subTriggerAttrs
+};
+
+export const subContent = {
+	props: subContentProps,
+	dataAttributes: subContentAttrs
+};
+
+export const sub = {
+	props: subProps
+};
+
+export const root = {
+	props,
+	dataAttributes: [...triggerAttrs, ...contentAttrs]
+};
+
+export const menu = {
+	root,
+	trigger,
+	content,
+	item,
+	checkboxItem,
+	checkboxIndicator,
+	radioGroup,
+	radioItem,
+	separator,
+	arrow,
+	group,
+	label,
+	sub,
+	subTrigger,
+	subContent
+};
diff --git a/src/content/api-reference/menubar.ts b/src/content/api-reference/menubar.ts
index 51dd036f6..7e7d06875 100644
--- a/src/content/api-reference/menubar.ts
+++ b/src/content/api-reference/menubar.ts
@@ -1,22 +1,6 @@
 import type { APISchema } from "@/types";
-import { asChild, enums } from "@/content/api-reference/helpers.js";
-import {
-	props as menuProps,
-	subProps,
-	subContentProps,
-	arrowProps,
-	triggerProps,
-	subTriggerProps,
-	contentProps,
-	itemProps,
-	checkboxItemProps,
-	checkboxIndicatorProps,
-	radioGroupProps,
-	radioItemProps,
-	separatorProps,
-	groupProps,
-	labelProps
-} from "./menu";
+import { asChild } from "@/content/api-reference/helpers.js";
+import { menu as m } from "./menu";
 import type * as Menubar from "$lib/bits/menubar/_types";
 import type * as Menu from "$lib/bits/menu/_types";
 import * as C from "@/content/constants";
@@ -43,103 +27,63 @@ export const root: APISchema<Menubar.Props> = {
 export const menu: APISchema<Menu.Props> = {
 	title: "Menu",
 	description: "A menu within the menubar.",
-	props: menuProps
+	...m.root
 };
 
 export const trigger: APISchema<Menu.TriggerProps> = {
 	title: "Trigger",
 	description: "The button element which toggles the dropdown menu.",
-	props: triggerProps,
-	dataAttributes: [
-		{
-			name: "state",
-			value: enums("open", "closed"),
-			description: "The dropdown menu's open state."
-		}
-	]
+	...m.trigger
 };
 
 export const content: APISchema<Menu.ContentProps> = {
 	title: "Content",
 	description: "The content displayed when the dropdown menu is open.",
-	props: contentProps,
-	dataAttributes: [
-		{
-			name: "state",
-			value: enums("open", "closed"),
-			description: "The menus's open state."
-		}
-	]
+	...m.content
 };
 
 export const item: APISchema<Menu.ItemProps & { href: string }> = {
 	title: "Item",
 	description: "A menu item within the dropdown menu.",
-	props: itemProps,
-	dataAttributes: [
-		{
-			name: "orientation",
-			value: enums("horizontal", "vertical"),
-			description: "The orientation of the dropdown menu item."
-		},
-		{
-			name: "highlighted",
-			value: "''",
-			description: "Present when the menu item is highlighted."
-		}
-	]
+	...m.item
 };
 
 export const separator: APISchema<Menu.SeparatorProps> = {
 	title: "Separator",
 	description: "A horizontal line to visually separate menu items.",
-	props: separatorProps
+	...m.separator
 };
 
 export const arrow: APISchema<Menu.ArrowProps> = {
 	title: "Arrow",
 	description: "An optional arrow which points to the dropdown menu's anchor/trigger point.",
-	props: arrowProps,
-	dataAttributes: [
-		{
-			name: "arrow",
-			value: "''",
-			description: "Present on the arrow elements of the dropdown menu."
-		}
-	]
+	...m.arrow
 };
 
 export const checkboxItem: APISchema<Menu.CheckboxItemProps> = {
 	title: "CheckboxItem",
 	description: "A menu item that can be controlled and toggled like a checkbox.",
-	props: checkboxItemProps,
-	dataAttributes: [
-		{
-			name: "orientation",
-			value: enums("horizontal", "vertical"),
-			description: "The orientation of the checkbox menu item."
-		}
-	]
+	...m.checkboxItem
 };
 
 export const checkboxIndicator: APISchema<Menu.CheckboxItemIndicatorProps> = {
 	title: "CheckboxIndicator",
 	description:
 		"A visual indicator of the checkbox menu item's checked state. It passed the item's checked state as a slot prop `checked` and can be used to render a custom indicator.",
-	props: checkboxIndicatorProps
+	...m.checkboxIndicator
 };
 
 export const radioGroup: APISchema<Menu.RadioGroupProps> = {
 	title: "RadioGroup",
 	description: "A group of radio menu items, where only one can be checked at a time.",
-	props: radioGroupProps
+	...m.radioGroup
 };
 
 export const radioItem: APISchema<Menu.RadioItemProps> = {
 	title: "RadioItem",
 	description:
 		"A menu item that can be controlled and toggled like a radio button. It must be a child of a `RadioGroup`.",
-	props: radioItemProps
+	...m.radioItem
 };
 
 export const radioIndicator: APISchema = {
@@ -152,52 +96,33 @@ export const sub: APISchema<Menu.SubProps> = {
 	title: "Sub",
 	description:
 		"A submenu belonging to the parent dropdown menu. Responsible for managing the state of the submenu.",
-	props: subProps
+	...m.sub
 };
 
 export const subTrigger: APISchema<Menu.SubTriggerProps> = {
 	title: "SubTrigger",
 	description: "A menu item which when pressed or hovered, opens the submenu.",
-	props: subTriggerProps,
-	dataAttributes: [
-		{
-			name: "state",
-			value: enums("open", "closed"),
-			description: "The submenu's open state."
-		},
-		{
-			name: "disabled",
-			value: "''",
-			description: "Present when the submenu trigger is disabled."
-		}
-	]
+	...m.subTrigger
 };
 
 export const subContent: APISchema<Menu.SubContentProps> = {
 	title: "SubContent",
 	description: "The submenu content displayed when the parent submenu is open.",
-	props: subContentProps,
-	dataAttributes: [
-		{
-			name: "state",
-			value: enums("open", "closed"),
-			description: "The submenu's open state."
-		}
-	]
+	...m.subContent
 };
 
 export const group: APISchema<Menu.GroupProps> = {
 	title: "Group",
 	description:
 		"A group of menu items. It can be used along with the `Menu.Label` component to provide a visual label for a group of menu items. When a label is within a group, appropriate aria attributes will be applied to the group.",
-	props: groupProps
+	...m.group
 };
 
 export const label: APISchema<Menu.LabelProps> = {
 	title: "Label",
 	description:
 		"A label which will be skipped when navigating with the keyboard. It is used to provide a visual label for a group of menu items. When a label is within a `Menu.Group`, appropriate aria attributes will be applied to the group.",
-	props: labelProps
+	...m.label
 };
 
 export const menubar = [
diff --git a/src/lib/bits/avatar/_types.ts b/src/lib/bits/avatar/_types.ts
index 6792a0c7d..b1be1f23e 100644
--- a/src/lib/bits/avatar/_types.ts
+++ b/src/lib/bits/avatar/_types.ts
@@ -6,7 +6,6 @@
 
 import type { Expand, AsChild, OnChangeFn } from "$lib/internal/index.js";
 import type { CreateAvatarProps } from "@melt-ui/svelte";
-import type { HTMLImgAttributes } from "svelte/elements";
 
 type Props = Expand<
 	Omit<CreateAvatarProps, "onLoadingStatusChange" | "loadingStatus" | "src"> & {
@@ -23,12 +22,7 @@ type Props = Expand<
 	} & AsChild
 >;
 
-type ImageProps = Expand<
-	{
-		src?: HTMLImgAttributes["src"];
-		alt?: HTMLImgAttributes["alt"];
-	} & AsChild
->;
+type ImageProps = Expand<AsChild>;
 
 type FallbackProps = AsChild;
 
diff --git a/src/lib/bits/context-menu/ctx.ts b/src/lib/bits/context-menu/ctx.ts
index d390b9283..982615b82 100644
--- a/src/lib/bits/context-menu/ctx.ts
+++ b/src/lib/bits/context-menu/ctx.ts
@@ -41,7 +41,7 @@ const PARTS = [
 	"trigger"
 ] as const;
 
-export const getAttrs = createBitAttrs(NAME, PARTS);
+export const getAttrs = createBitAttrs("menu", PARTS);
 
 type GetReturn = ContextMenuReturn;
 type GetSubReturn = ContextSubmenuReturn;
diff --git a/src/lib/bits/dropdown-menu/ctx.ts b/src/lib/bits/dropdown-menu/ctx.ts
index 77035a0eb..1269e73b8 100644
--- a/src/lib/bits/dropdown-menu/ctx.ts
+++ b/src/lib/bits/dropdown-menu/ctx.ts
@@ -41,7 +41,7 @@ const PARTS = [
 	"trigger"
 ] as const;
 
-export const getAttrs = createBitAttrs(NAME, PARTS);
+export const getAttrs = createBitAttrs("menu", PARTS);
 
 type GetReturn = DropdownMenuReturn;
 type GetSubReturn = DropdownSubmenuReturn;
diff --git a/src/lib/bits/menubar/components/Menubar.svelte b/src/lib/bits/menubar/components/Menubar.svelte
index 4cb0d9f21..75e2d5ac7 100644
--- a/src/lib/bits/menubar/components/Menubar.svelte
+++ b/src/lib/bits/menubar/components/Menubar.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { melt } from "@melt-ui/svelte";
-	import { setCtx, getAttrs } from "../ctx.js";
+	import { setCtx, getMenubarAttrs } from "../ctx.js";
 	import type { Props } from "../types.js";
 	import { derived } from "svelte/store";
 
@@ -20,7 +20,7 @@
 	const idValues = derived([ids.menubar], ([$menubarId]) => ({
 		menubar: $menubarId
 	}));
-	const attrs = getAttrs("root");
+	const attrs = getMenubarAttrs("root");
 
 	$: if (id) {
 		ids.menubar.set(id);
diff --git a/src/lib/bits/menubar/ctx.ts b/src/lib/bits/menubar/ctx.ts
index 8ff2329f1..1fc92c2ef 100644
--- a/src/lib/bits/menubar/ctx.ts
+++ b/src/lib/bits/menubar/ctx.ts
@@ -28,7 +28,6 @@ const RADIO_GROUP_NAME = "menubar-radio-group";
 const RADIO_ITEM_NAME = "menubar-radio-item";
 const GROUP_NAME = "menubar-group";
 const PARTS = [
-	"root",
 	"arrow",
 	"checkbox-indicator",
 	"checkbox-item",
@@ -44,7 +43,8 @@ const PARTS = [
 	"trigger"
 ] as const;
 
-export const getAttrs = createBitAttrs(NAME, PARTS);
+export const getMenubarAttrs = createBitAttrs(NAME, ["root"]);
+export const getAttrs = createBitAttrs("menu", PARTS);
 
 type GetReturn = MenubarReturn;
 type GetMenuReturn = MenubarMenuReturn;
diff --git a/src/lib/internal/attrs.ts b/src/lib/internal/attrs.ts
index a40e7b949..252d52678 100644
--- a/src/lib/internal/attrs.ts
+++ b/src/lib/internal/attrs.ts
@@ -1,6 +1,6 @@
 import type { Bit } from "@/content/api-reference/index.js";
 
-export function createBitAttrs<T extends readonly string[]>(bit: Bit, parts: T) {
+export function createBitAttrs<T extends readonly string[]>(bit: Bit | "menu", parts: T) {
 	const attrs: Record<string, Record<string, string>> = {};
 	parts.forEach((part) => {
 		attrs[part] = {
diff --git a/src/styles/app.postcss b/src/styles/app.postcss
index 1873385ba..561e050d5 100644
--- a/src/styles/app.postcss
+++ b/src/styles/app.postcss
@@ -19,6 +19,7 @@
 		--dark-10: 240 6% 10% / 0.1;
 		--accent: 204 94% 94%;
 		--accent-foreground: 204 80% 16%;
+		--destructive: 347 77% 50%;
 
 		/* Shadows */
 		--shadow-mini: 0px 1px 0px 1px rgba(0, 0, 0, 0.04);
@@ -43,6 +44,7 @@
 		--dark-10: 0 0% 96% / 0.1;
 		--accent: 204 80% 16%;
 		--accent-foreground: 204 94% 94%;
+		--destructive: 350 89% 60%;
 
 		/* Shadows */
 		--shadow-mini: 0px 1px 0px 1px rgba(255, 255, 255, 0.04);
diff --git a/src/tests/context-menu/ContextMenu.spec.ts b/src/tests/context-menu/ContextMenu.spec.ts
index 8905e2ab0..793359145 100644
--- a/src/tests/context-menu/ContextMenu.spec.ts
+++ b/src/tests/context-menu/ContextMenu.spec.ts
@@ -76,13 +76,13 @@ describe("Context Menu", () => {
 
 		for (const part of parts) {
 			const el = screen.getByTestId(part);
-			expect(el).toHaveAttribute(`data-bits-context-menu-${part}`);
+			expect(el).toHaveAttribute(`data-bits-menu-${part}`);
 		}
 
 		await user.click(getByTestId("sub-trigger"));
 
 		const subContent = getByTestId("sub-content");
-		expect(subContent).toHaveAttribute(`data-bits-context-menu-sub-content`);
+		expect(subContent).toHaveAttribute(`data-bits-menu-sub-content`);
 	});
 
 	it("Opens when right-clicked & respects binding", async () => {
diff --git a/src/tests/dropdown-menu/DropdownMenu.spec.ts b/src/tests/dropdown-menu/DropdownMenu.spec.ts
index eec0d7a91..cd19e5107 100644
--- a/src/tests/dropdown-menu/DropdownMenu.spec.ts
+++ b/src/tests/dropdown-menu/DropdownMenu.spec.ts
@@ -87,13 +87,13 @@ describe("Dropdown Menu", () => {
 
 		for (const part of parts) {
 			const el = screen.getByTestId(part);
-			expect(el).toHaveAttribute(`data-bits-dropdown-menu-${part}`);
+			expect(el).toHaveAttribute(`data-bits-menu-${part}`);
 		}
 
 		await user.click(getByTestId("sub-trigger"));
 
 		const subContent = getByTestId("sub-content");
-		expect(subContent).toHaveAttribute(`data-bits-dropdown-menu-sub-content`);
+		expect(subContent).toHaveAttribute(`data-bits-menu-sub-content`);
 	});
 
 	it.each(OPEN_KEYS)("Opens when %s is pressed & respects binding", async (key) => {
diff --git a/src/tests/menubar/Menubar.spec.ts b/src/tests/menubar/Menubar.spec.ts
index 16570ceeb..e14e523e0 100644
--- a/src/tests/menubar/Menubar.spec.ts
+++ b/src/tests/menubar/Menubar.spec.ts
@@ -48,13 +48,13 @@ describe("Menubar", () => {
 
 		for (const part in parts) {
 			const el = screen.getByTestId(mappedParts[part]);
-			expect(el).toHaveAttribute(`data-bits-menubar-${parts[part]}`);
+			expect(el).toHaveAttribute(`data-bits-menu-${parts[part]}`);
 		}
 
 		await user.click(getByTestId("1-sub-trigger"));
 
 		const subContent = getByTestId("1-sub-content");
-		expect(subContent).toHaveAttribute(`data-bits-menubar-sub-content`);
+		expect(subContent).toHaveAttribute(`data-bits-menu-sub-content`);
 	});
 
 	it("navigates triggers within the menubar using arrow keys", async () => {
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 6bbd3a94b..2a9025caf 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -37,6 +37,9 @@ export default {
 				accent: {
 					DEFAULT: "hsl(var(--accent) / <alpha-value>)",
 					foreground: "hsl(var(--accent-foreground) / <alpha-value>)"
+				},
+				destructive: {
+					DEFAULT: "hsl(var(--destructive) / <alpha-value>)"
 				}
 			},
 			fontFamily: {

From 530e7224e3917e5acf5ea4a54bbe12f7f03d6d16 Mon Sep 17 00:00:00 2001
From: Hunter Johnston <johnstonhuntera@gmail.com>
Date: Sun, 19 Nov 2023 15:06:01 -0500
Subject: [PATCH 063/217] init menubar

---
 src/components/demos/menubar-demo.svelte   | 211 ++++++++++++++++-----
 src/components/demos/separator-demo.svelte |  20 +-
 src/content/api-reference/dialog.ts        |  12 +-
 src/content/api-reference/label.ts         |   8 +-
 src/content/api-reference/link-preview.ts  |  12 ++
 src/content/api-reference/popover.ts       |  29 ++-
 src/content/api-reference/progress.ts      |   4 +
 src/content/api-reference/radio-group.ts   |  16 +-
 src/content/api-reference/separator.ts     |   4 +
 9 files changed, 262 insertions(+), 54 deletions(-)

diff --git a/src/components/demos/menubar-demo.svelte b/src/components/demos/menubar-demo.svelte
index 058b39acd..a5c8957fa 100644
--- a/src/components/demos/menubar-demo.svelte
+++ b/src/components/demos/menubar-demo.svelte
@@ -1,5 +1,7 @@
 <script lang="ts">
-	import * as Menubar from "@/components/ui/menubar";
+	import { Menubar } from "$lib";
+	import { flyAndScale } from "@/utils";
+	import { CaretRight } from "phosphor-svelte";
 
 	let bookmarks = false;
 	let fullUrls = true;
@@ -7,78 +9,201 @@
 	const profileRadioValue = "benoit";
 </script>
 
-<Menubar.Root>
+<Menubar.Root
+	class="flex h-12 items-center gap-1 rounded-[10px] border border-muted px-[3px] shadow-mini"
+>
 	<Menubar.Menu>
-		<Menubar.Trigger>File</Menubar.Trigger>
-		<Menubar.Content>
-			<Menubar.Item>New Tab</Menubar.Item>
-			<Menubar.Item>New Window</Menubar.Item>
-			<Menubar.Item>New Incognito Window</Menubar.Item>
+		<Menubar.Trigger
+			class="inline-flex h-10 items-center justify-center rounded-[9px] px-3 text-sm outline-none data-[highlighted]:bg-muted data-[state=open]:bg-muted"
+			>File</Menubar.Trigger
+		>
+		<Menubar.Content
+			class="w-full max-w-[220px] rounded-xl border border-muted bg-background px-1 py-1.5 shadow-popover outline-none"
+			transition={flyAndScale}
+		>
+			<Menubar.Item
+				class="flex h-10 select-none items-center rounded-button py-3 pl-3 pr-1.5 text-sm font-medium outline-none transition-all duration-75 data-[highlighted]:bg-muted"
+				>New Tab</Menubar.Item
+			>
+			<Menubar.Item
+				class="flex h-10 select-none items-center rounded-button py-3 pl-3 pr-1.5 text-sm font-medium outline-none transition-all duration-75 data-[highlighted]:bg-muted"
+				>New Window</Menubar.Item
+			>
+			<Menubar.Item
+				class="flex h-10 select-none items-center rounded-button py-3 pl-3 pr-1.5 text-sm font-medium outline-none transition-all duration-75 data-[highlighted]:bg-muted"
+				>New Incognito Window</Menubar.Item
+			>
 			<Menubar.Separator />
 			<Menubar.Sub>
-				<Menubar.SubTrigger>Share</Menubar.SubTrigger>
-				<Menubar.SubContent>
-					<Menubar.Item>Email link</Menubar.Item>
-					<Menubar.Item>Messages</Menubar.Item>
-					<Menubar.Item>Notes</Menubar.Item>
+				<Menubar.SubTrigger
+					class="flex h-10 select-none items-center rounded-button py-3 pl-3 pr-1.5 text-sm font-medium outline-none transition-all duration-75 data-[highlighted]:bg-muted data-[state=open]:bg-muted"
+				>
+					Share
+					<div class="ml-auto flex items-center gap-px">
+						<CaretRight class="h-4 w-4 text-foreground-alt" />
+					</div>
+				</Menubar.SubTrigger>
+				<Menubar.SubContent
+					class="w-full max-w-[209px] rounded-xl border border-muted bg-background px-1 py-1.5 shadow-popover outline-none"
+					transition={flyAndScale}
+				>
+					<Menubar.Item
+						class="flex h-10 select-none items-center rounded-button py-3 pl-3 pr-1.5 text-sm font-medium outline-none transition-all duration-75 data-[highlighted]:bg-muted"
+						>Email link</Menubar.Item
+					>
+					<Menubar.Item
+						class="flex h-10 select-none items-center rounded-button py-3 pl-3 pr-1.5 text-sm font-medium outline-none transition-all duration-75 data-[highlighted]:bg-muted"
+						>Messages</Menubar.Item
+					>
+					<Menubar.Item
+						class="flex h-10 select-none items-center rounded-button py-3 pl-3 pr-1.5 text-sm font-medium outline-none transition-all duration-75 data-[highlighted]:bg-muted"
+						>Notes</Menubar.Item
+					>
 				</Menubar.SubContent>
 			</Menubar.Sub>
 			<Menubar.Separator />
-			<Menubar.Item>Print...</Menubar.Item>
+			<Menubar.Item
+				class="flex h-10 select-none items-center rounded-button py-3 pl-3 pr-1.5 text-sm font-medium outline-none transition-all duration-75 data-[highlighted]:bg-muted"
+				>Print...</Menubar.Item
+			>
 		</Menubar.Content>
 	</Menubar.Menu>
 	<Menubar.Menu>
-		<Menubar.Trigger>Edit</Menubar.Trigger>
-		<Menubar.Content>
-			<Menubar.Item>Undo</Menubar.Item>
-			<Menubar.Item>Redo</Menubar.Item>
+		<Menubar.Trigger
+			class="inline-flex h-10 items-center justify-center rounded-[9px] px-3 text-sm outline-none data-[highlighted]:bg-muted data-[state=open]:bg-muted"
+			>Edit</Menubar.Trigger
+		>
+		<Menubar.Content
+			class="w-full max-w-[220px] rounded-xl border border-muted bg-background px-1 py-1.5 shadow-popover outline-none"
+			transition={flyAndScale}
+		>
+			<Menubar.Item
+				class="flex h-10 select-none items-center rounded-button py-3 pl-3 pr-1.5 text-sm font-medium outline-none transition-all duration-75 data-[highlighted]:bg-muted"
+				>Undo</Menubar.Item
+			>
+			<Menubar.Item
+				class="flex h-10 select-none items-center rounded-button py-3 pl-3 pr-1.5 text-sm font-medium outline-none transition-all duration-75 data-[highlighted]:bg-muted"
+				>Redo</Menubar.Item
+			>
 			<Menubar.Separator />
 			<Menubar.Sub>
-				<Menubar.SubTrigger>Find</Menubar.SubTrigger>
-				<Menubar.SubContent>
-					<Menubar.Item>Search the web</Menubar.Item>
+				<Menubar.SubTrigger
+					class="flex h-10 select-none items-center rounded-button py-3 pl-3 pr-1.5 text-sm font-medium outline-none transition-all duration-75 data-[highlighted]:bg-muted data-[state=open]:bg-muted"
+				>
+					Find
+					<div class="ml-auto flex items-center gap-px">
+						<CaretRight class="h-4 w-4 text-foreground-alt" />
+					</div>
+				</Menubar.SubTrigger>
+				<Menubar.SubContent
+					class="w-full max-w-[209px] rounded-xl border border-muted bg-background px-1 py-1.5 shadow-popover outline-none"
+					transition={flyAndScale}
+				>
+					<Menubar.Item
+						class="flex h-10 select-none items-center rounded-button py-3 pl-3 pr-1.5 text-sm font-medium outline-none transition-all duration-75 data-[highlighted]:bg-muted"
+						>Search the web</Menubar.Item
+					>
 					<Menubar.Separator />
-					<Menubar.Item>Find...</Menubar.Item>
-					<Menubar.Item>Find Next</Menubar.Item>
-					<Menubar.Item>Find Previous</Menubar.Item>
+					<Menubar.Item
+						class="flex h-10 select-none items-center rounded-button py-3 pl-3 pr-1.5 text-sm font-medium outline-none transition-all duration-75 data-[highlighted]:bg-muted"
+						>Find...</Menubar.Item
+					>
+					<Menubar.Item
+						class="flex h-10 select-none items-center rounded-button py-3 pl-3 pr-1.5 text-sm font-medium outline-none transition-all duration-75 data-[highlighted]:bg-muted"
+						>Find Next</Menubar.Item
+					>
+					<Menubar.Item
+						class="flex h-10 select-none items-center rounded-button py-3 pl-3 pr-1.5 text-sm font-medium outline-none transition-all duration-75 data-[highlighted]:bg-muted"
+						>Find Previous</Menubar.Item
+					>
 				</Menubar.SubContent>
 			</Menubar.Sub>
 			<Menubar.Separator />
-			<Menubar.Item>Cut</Menubar.Item>
-			<Menubar.Item>Copy</Menubar.Item>
-			<Menubar.Item>Paste</Menubar.Item>
+			<Menubar.Item
+				class="flex h-10 select-none items-center rounded-button py-3 pl-3 pr-1.5 text-sm font-medium outline-none transition-all duration-75 data-[highlighted]:bg-muted"
+				>Cut</Menubar.Item
+			>
+			<Menubar.Item
+				class="flex h-10 select-none items-center rounded-button py-3 pl-3 pr-1.5 text-sm font-medium outline-none transition-all duration-75 data-[highlighted]:bg-muted"
+				>Copy</Menubar.Item
+			>
+			<Menubar.Item
+				class="flex h-10 select-none items-center rounded-button py-3 pl-3 pr-1.5 text-sm font-medium outline-none transition-all duration-75 data-[highlighted]:bg-muted"
+				>Paste</Menubar.Item
+			>
 		</Menubar.Content>
 	</Menubar.Menu>
 	<Menubar.Menu>
-		<Menubar.Trigger>View</Menubar.Trigger>
-		<Menubar.Content>
-			<Menubar.CheckboxItem bind:checked={bookmarks}
-				>Always Show Bookmarks Bar</Menubar.CheckboxItem
+		<Menubar.Trigger
+			class="inline-flex h-10 items-center justify-center rounded-[9px] px-3 text-sm outline-none data-[highlighted]:bg-muted data-[state=open]:bg-muted"
+			>View</Menubar.Trigger
+		>
+		<Menubar.Content
+			class="w-full max-w-[220px] rounded-xl border border-muted bg-background px-1 py-1.5 shadow-popover outline-none"
+			transition={flyAndScale}
+		>
+			<Menubar.CheckboxItem
+				class="flex h-10 select-none items-center rounded-button py-3 pl-3 pr-1.5 text-sm font-medium outline-none transition-all duration-75 data-[highlighted]:bg-muted"
+				bind:checked={bookmarks}>Show Bookmarks Bar</Menubar.CheckboxItem
 			>
-			<Menubar.CheckboxItem bind:checked={fullUrls}
-				>Always Show Full URLs</Menubar.CheckboxItem
+			<Menubar.CheckboxItem
+				class="flex h-10 select-none items-center rounded-button py-3 pl-3 pr-1.5 text-sm font-medium outline-none transition-all duration-75 data-[highlighted]:bg-muted"
+				bind:checked={fullUrls}>Show Full URLs</Menubar.CheckboxItem
 			>
 			<Menubar.Separator />
-			<Menubar.Item inset>Reload</Menubar.Item>
-			<Menubar.Item inset>Force Reload</Menubar.Item>
+			<Menubar.Item
+				class="flex h-10 select-none items-center rounded-button py-3 pl-3 pr-1.5 text-sm font-medium outline-none transition-all duration-75 data-[highlighted]:bg-muted"
+				>Reload</Menubar.Item
+			>
+			<Menubar.Item
+				class="flex h-10 select-none items-center rounded-button py-3 pl-3 pr-1.5 text-sm font-medium outline-none transition-all duration-75 data-[highlighted]:bg-muted"
+				>Force Reload</Menubar.Item
+			>
 			<Menubar.Separator />
-			<Menubar.Item inset>Toggle Fullscreen</Menubar.Item>
+			<Menubar.Item
+				class="flex h-10 select-none items-center rounded-button py-3 pl-3 pr-1.5 text-sm font-medium outline-none transition-all duration-75 data-[highlighted]:bg-muted"
+				>Toggle Fullscreen</Menubar.Item
+			>
 			<Menubar.Separator />
-			<Menubar.Item inset>Hide Sidebar</Menubar.Item>
+			<Menubar.Item
+				class="flex h-10 select-none items-center rounded-button py-3 pl-3 pr-1.5 text-sm font-medium outline-none transition-all duration-75 data-[highlighted]:bg-muted"
+				>Hide Sidebar</Menubar.Item
+			>
 		</Menubar.Content>
 	</Menubar.Menu>
 	<Menubar.Menu>
-		<Menubar.Trigger>Profiles</Menubar.Trigger>
-		<Menubar.Content>
+		<Menubar.Trigger
+			class="inline-flex h-10 items-center justify-center rounded-[9px] px-3 text-sm outline-none data-[highlighted]:bg-muted data-[state=open]:bg-muted"
+			>Profiles</Menubar.Trigger
+		>
+		<Menubar.Content
+			class="w-full max-w-[220px] rounded-xl border border-muted bg-background px-1 py-1.5 shadow-popover outline-none"
+			transition={flyAndScale}
+		>
 			<Menubar.RadioGroup value={profileRadioValue}>
-				<Menubar.RadioItem value="andy">Andy</Menubar.RadioItem>
-				<Menubar.RadioItem value="benoit">Benoit</Menubar.RadioItem>
-				<Menubar.RadioItem value="Luis">Luis</Menubar.RadioItem>
+				<Menubar.RadioItem
+					class="flex h-10 select-none items-center rounded-button py-3 pl-3 pr-1.5 text-sm font-medium outline-none transition-all duration-75 data-[highlighted]:bg-muted"
+					value="andy">Andy</Menubar.RadioItem
+				>
+				<Menubar.RadioItem
+					class="flex h-10 select-none items-center rounded-button py-3 pl-3 pr-1.5 text-sm font-medium outline-none transition-all duration-75 data-[highlighted]:bg-muted"
+					value="benoit">Benoit</Menubar.RadioItem
+				>
+				<Menubar.RadioItem
+					class="flex h-10 select-none items-center rounded-button py-3 pl-3 pr-1.5 text-sm font-medium outline-none transition-all duration-75 data-[highlighted]:bg-muted"
+					value="Luis">Luis</Menubar.RadioItem
+				>
 			</Menubar.RadioGroup>
 			<Menubar.Separator />
-			<Menubar.Item inset>Edit...</Menubar.Item>
+			<Menubar.Item
+				class="flex h-10 select-none items-center rounded-button py-3 pl-3 pr-1.5 text-sm font-medium outline-none transition-all duration-75 data-[highlighted]:bg-muted"
+				>Edit...</Menubar.Item
+			>
 			<Menubar.Separator />
-			<Menubar.Item inset>Add Profile...</Menubar.Item>
+			<Menubar.Item
+				class="flex h-10 select-none items-center rounded-button py-3 pl-3 pr-1.5 text-sm font-medium outline-none transition-all duration-75 data-[highlighted]:bg-muted"
+				>Add Profile...</Menubar.Item
+			>
 		</Menubar.Content>
 	</Menubar.Menu>
 </Menubar.Root>
diff --git a/src/components/demos/separator-demo.svelte b/src/components/demos/separator-demo.svelte
index 967d0aa92..2d2a0316c 100644
--- a/src/components/demos/separator-demo.svelte
+++ b/src/components/demos/separator-demo.svelte
@@ -1,20 +1,28 @@
 <script lang="ts">
-	import * as Separator from "@/components/ui/separator";
+	import { Separator } from "$lib";
 </script>
 
 <div>
 	<div class="space-y-1">
-		<h4 class="text-sm font-medium leading-none">Radix Primitives</h4>
+		<h4 class="font-semibold">Bits UI</h4>
 		<p class="text-sm text-muted-foreground">
-			An open-source UI component library.
+			Headless UI components for Svelte.
 		</p>
 	</div>
-	<Separator.Root class="my-4" />
+	<Separator.Root
+		class="my-4 shrink-0 bg-border data-[orientation=horizontal]:h-px data-[orientation=vertical]:h-full data-[orientation=horizontal]:w-full data-[orientation=vertical]:w-[1px]"
+	/>
 	<div class="flex h-5 items-center space-x-4 text-sm">
 		<div>Blog</div>
-		<Separator.Root orientation="vertical" />
+		<Separator.Root
+			orientation="vertical"
+			class="my-4 shrink-0 bg-border data-[orientation=horizontal]:h-px data-[orientation=vertical]:h-full data-[orientation=horizontal]:w-full data-[orientation=vertical]:w-[1px]"
+		/>
 		<div>Docs</div>
-		<Separator.Root orientation="vertical" />
+		<Separator.Root
+			orientation="vertical"
+			class="my-4 shrink-0 bg-border data-[orientation=horizontal]:h-px data-[orientation=vertical]:h-full data-[orientation=horizontal]:w-full data-[orientation=vertical]:w-[1px]"
+		/>
 		<div>Source</div>
 	</div>
 </div>
diff --git a/src/content/api-reference/dialog.ts b/src/content/api-reference/dialog.ts
index 419e78be5..1a369a0a2 100644
--- a/src/content/api-reference/dialog.ts
+++ b/src/content/api-reference/dialog.ts
@@ -68,6 +68,10 @@ export const content: APISchema<Dialog.ContentProps> = {
 			name: "state",
 			value: enums("open", "closed"),
 			description: "The state of the dialog."
+		},
+		{
+			name: "bits-dialog-content",
+			description: "Present on the content."
 		}
 	]
 };
@@ -84,7 +88,13 @@ export const title: APISchema<Dialog.TitleProps> = {
 			description: "The heading level of the title."
 		},
 		asChild
-	}
+	},
+	dataAttributes: [
+		{
+			name: "bits-dialog-title",
+			description: "Present on the title."
+		}
+	]
 };
 
 export const description: APISchema<Dialog.DescriptionProps> = {
diff --git a/src/content/api-reference/label.ts b/src/content/api-reference/label.ts
index a25acb5a9..9276bd975 100644
--- a/src/content/api-reference/label.ts
+++ b/src/content/api-reference/label.ts
@@ -5,7 +5,13 @@ import type * as Label from "$lib/bits/label/_types";
 export const root: APISchema<Label.Props> = {
 	title: "Root",
 	description: "An enhanced label component that can be used with any input.",
-	props: { asChild }
+	props: { asChild },
+	dataAttributes: [
+		{
+			name: "bits-label-root",
+			description: "Present on the root element."
+		}
+	]
 };
 
 export const label = [root];
diff --git a/src/content/api-reference/link-preview.ts b/src/content/api-reference/link-preview.ts
index e9b7eb42b..7aafaaf44 100644
--- a/src/content/api-reference/link-preview.ts
+++ b/src/content/api-reference/link-preview.ts
@@ -67,6 +67,10 @@ export const trigger: APISchema<LinkPreview.TriggerProps> = {
 			name: "state",
 			value: enums("open", "closed"),
 			description: "The open state of the link preview."
+		},
+		{
+			name: "bits-link-preview-trigger",
+			description: "Present on the trigger element."
 		}
 	]
 };
@@ -80,6 +84,10 @@ export const content: APISchema<LinkPreview.ContentProps> = {
 			name: "state",
 			value: enums("open", "closed"),
 			description: "The open state of the link preview."
+		},
+		{
+			name: "bits-link-preview-content",
+			description: "Present on the content element."
 		}
 	]
 };
@@ -93,6 +101,10 @@ export const arrow: APISchema<LinkPreview.ArrowProps> = {
 			name: "arrow",
 			value: "",
 			description: "Present on the arrow element."
+		},
+		{
+			name: "bits-link-preview-arrow",
+			description: "Present on the arrow element."
 		}
 	]
 };
diff --git a/src/content/api-reference/popover.ts b/src/content/api-reference/popover.ts
index b033554b1..b11551667 100644
--- a/src/content/api-reference/popover.ts
+++ b/src/content/api-reference/popover.ts
@@ -73,6 +73,10 @@ export const trigger: APISchema<Popover.TriggerProps> = {
 			name: "state",
 			value: enums("open", "closed"),
 			description: "The open state of the link preview."
+		},
+		{
+			name: "bits-popover-trigger",
+			description: "Present on the trigger element."
 		}
 	]
 };
@@ -80,14 +84,31 @@ export const trigger: APISchema<Popover.TriggerProps> = {
 export const content: APISchema<Popover.ContentProps> = {
 	title: "Content",
 	description: "The contents of the popover which are displayed when the popover is open.",
-	props: { ...transitionProps, asChild }
+	props: { ...transitionProps, asChild },
+	dataAttributes: [
+		{
+			name: "state",
+			value: enums("open", "closed"),
+			description: "The open state of the popover."
+		},
+		{
+			name: "bits-popover-content",
+			description: "Present on the content element."
+		}
+	]
 };
 
 export const close: APISchema<Popover.CloseProps> = {
 	title: "Close",
 	description:
 		"A button which closes the popover when pressed and is typically placed in the content.",
-	props: { asChild }
+	props: { asChild },
+	dataAttributes: [
+		{
+			name: "bits-popover-close",
+			description: "Present on the close button."
+		}
+	]
 };
 
 export const arrow: APISchema<Popover.ArrowProps> = {
@@ -99,6 +120,10 @@ export const arrow: APISchema<Popover.ArrowProps> = {
 			name: "arrow",
 			value: "",
 			description: "Present on the arrow element."
+		},
+		{
+			name: "bits-popover-arrow",
+			description: "Present on the arrow element."
 		}
 	]
 };
diff --git a/src/content/api-reference/progress.ts b/src/content/api-reference/progress.ts
index 84dfd6f21..cd0d4261c 100644
--- a/src/content/api-reference/progress.ts
+++ b/src/content/api-reference/progress.ts
@@ -40,6 +40,10 @@ export const root: APISchema<Progress.Props> = {
 		{
 			name: "max",
 			description: "The maximum value of the progress bar."
+		},
+		{
+			name: "bits-progress-root",
+			description: "Present on the root element."
 		}
 	]
 };
diff --git a/src/content/api-reference/radio-group.ts b/src/content/api-reference/radio-group.ts
index 9bea04bcf..e7d5835b1 100644
--- a/src/content/api-reference/radio-group.ts
+++ b/src/content/api-reference/radio-group.ts
@@ -52,6 +52,10 @@ export const root: APISchema<RadioGroup.Props> = {
 			name: "orientation",
 			value: enums("vertical", "horizontal"),
 			description: "The orientation of the radio group."
+		},
+		{
+			name: "bits-radio-group-root",
+			description: "Present on the root element."
 		}
 	]
 };
@@ -91,6 +95,10 @@ export const item: APISchema<RadioGroup.ItemProps> = {
 			name: "orientation",
 			value: enums("vertical", "horizontal"),
 			description: "The orientation of the parent radio group."
+		},
+		{
+			name: "bits-radio-group-item",
+			description: "Present on the radio item element."
 		}
 	]
 };
@@ -105,7 +113,13 @@ export const input: APISchema<RadioGroup.InputProps> = {
 export const indicator: APISchema = {
 	title: "ItemIndicator",
 	description:
-		"A component which is used to indicate the radio item's checked state. Any children of this component will only be visible when the radio item is checked."
+		"A component which is used to indicate the radio item's checked state. Any children of this component will only be visible when the radio item is checked.",
+	dataAttributes: [
+		{
+			name: "bits-radio-group-indicator",
+			description: "Present on the indicator element."
+		}
+	]
 };
 
 export const radioGroup = [root, item, input, indicator];
diff --git a/src/content/api-reference/separator.ts b/src/content/api-reference/separator.ts
index bcf866ddd..5921867d8 100644
--- a/src/content/api-reference/separator.ts
+++ b/src/content/api-reference/separator.ts
@@ -28,6 +28,10 @@ export const root: APISchema<Separator.Props> = {
 			name: "orientation",
 			value: enums("horizontal", "vertical"),
 			description: "The orientation of the separator."
+		},
+		{
+			name: "bits-separator-root",
+			description: "Present on the root element."
 		}
 	]
 };

From d55a4e56d0429f0ba264365fb349407fa8f8c1b0 Mon Sep 17 00:00:00 2001
From: Hunter Johnston <johnstonhuntera@gmail.com>
Date: Sun, 19 Nov 2023 15:10:51 -0500
Subject: [PATCH 064/217] init progress

---
 src/components/demos/progress-demo.svelte | 15 +++++++++++++--
 1 file changed, 13 insertions(+), 2 deletions(-)

diff --git a/src/components/demos/progress-demo.svelte b/src/components/demos/progress-demo.svelte
index 00b36c01c..c768a5429 100644
--- a/src/components/demos/progress-demo.svelte
+++ b/src/components/demos/progress-demo.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { onMount } from "svelte";
-	import * as Progress from "@/components/ui/progress";
+	import { Progress } from "$lib";
 
 	let value = 13;
 	onMount(() => {
@@ -9,4 +9,15 @@
 	});
 </script>
 
-<Progress.Root {value} max={100} class="w-[60%]" />
+<Progress.Root
+	{value}
+	max={100}
+	class="relative h-6 w-[60%] overflow-hidden rounded-full bg-foreground/20 "
+>
+	<div
+		class="h-full w-full flex-1 bg-foreground transition-all"
+		style={`transform: translateX(-${
+			100 - (100 * (value ?? 0)) / (100 ?? 1)
+		}%)`}
+	/>
+</Progress.Root>

From 66b4ae53e66770a1c98985c9604284bedd4c49c4 Mon Sep 17 00:00:00 2001
From: Hunter Johnston <johnstonhuntera@gmail.com>
Date: Sun, 19 Nov 2023 15:12:34 -0500
Subject: [PATCH 065/217] fix: switch ring

---
 src/components/demos/switch-demo.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/demos/switch-demo.svelte b/src/components/demos/switch-demo.svelte
index 9e6c75a7c..63d9d5b2d 100644
--- a/src/components/demos/switch-demo.svelte
+++ b/src/components/demos/switch-demo.svelte
@@ -5,7 +5,7 @@
 <div class="flex items-center space-x-3">
 	<Switch.Root
 		id="marketing"
-		class="focus-visible:ring-ring peer inline-flex h-7 w-12 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-mini-inset transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-foreground data-[state=unchecked]:bg-muted"
+		class="peer inline-flex h-7 w-12 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-mini-inset transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-foreground data-[state=unchecked]:bg-muted"
 	>
 		<Switch.Thumb
 			class="pointer-events-none block h-6 w-6 rounded-full bg-background shadow-mini ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0"

From 1bed65c325135dc83bedeffae10da70f78b47e61 Mon Sep 17 00:00:00 2001
From: Hunter Johnston <johnstonhuntera@gmail.com>
Date: Sun, 19 Nov 2023 15:13:22 -0500
Subject: [PATCH 066/217] fix: switch ring in popover demo

---
 src/components/demos/popover-demo.svelte | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/demos/popover-demo.svelte b/src/components/demos/popover-demo.svelte
index 2a6ca88a8..36e1f7d17 100644
--- a/src/components/demos/popover-demo.svelte
+++ b/src/components/demos/popover-demo.svelte
@@ -56,7 +56,7 @@
 				</div>
 				<Switch.Root
 					id="necessary"
-					class="focus-visible:ring-ring peer inline-flex h-7 w-12 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-mini-inset transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-foreground data-[state=unchecked]:bg-muted"
+					class="peer inline-flex h-7 w-12 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-mini-inset transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-foreground data-[state=unchecked]:bg-muted"
 					bind:checked={necessary}
 					disabled
 				>
@@ -77,7 +77,7 @@
 				</div>
 				<Switch.Root
 					id="marketing"
-					class="focus-visible:ring-ring peer inline-flex h-7 w-12 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-mini-inset transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-foreground data-[state=unchecked]:bg-muted"
+					class="peer inline-flex h-7 w-12 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-mini-inset transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-foreground data-[state=unchecked]:bg-muted"
 					bind:checked={marketing}
 				>
 					<Switch.Thumb
@@ -97,7 +97,7 @@
 				</div>
 				<Switch.Root
 					id="shopping"
-					class="focus-visible:ring-ring peer inline-flex h-7 w-12 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-mini-inset transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-foreground data-[state=unchecked]:bg-muted"
+					class="peer inline-flex h-7 w-12 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-mini-inset transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-foreground data-[state=unchecked]:bg-muted"
 					bind:checked={shopping}
 				>
 					<Switch.Thumb

From be373161fe206f1ff2637ff0e2a3e1574ed13f78 Mon Sep 17 00:00:00 2001
From: Hunter Johnston <johnstonhuntera@gmail.com>
Date: Sun, 19 Nov 2023 15:16:44 -0500
Subject: [PATCH 067/217] fix: menubar cursor

---
 src/components/demos/menubar-demo.svelte | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/demos/menubar-demo.svelte b/src/components/demos/menubar-demo.svelte
index a5c8957fa..d8b08a0df 100644
--- a/src/components/demos/menubar-demo.svelte
+++ b/src/components/demos/menubar-demo.svelte
@@ -14,7 +14,7 @@
 >
 	<Menubar.Menu>
 		<Menubar.Trigger
-			class="inline-flex h-10 items-center justify-center rounded-[9px] px-3 text-sm outline-none data-[highlighted]:bg-muted data-[state=open]:bg-muted"
+			class="inline-flex h-10 cursor-default items-center justify-center rounded-[9px] px-3 text-sm outline-none data-[highlighted]:bg-muted data-[state=open]:bg-muted"
 			>File</Menubar.Trigger
 		>
 		<Menubar.Content
@@ -70,7 +70,7 @@
 	</Menubar.Menu>
 	<Menubar.Menu>
 		<Menubar.Trigger
-			class="inline-flex h-10 items-center justify-center rounded-[9px] px-3 text-sm outline-none data-[highlighted]:bg-muted data-[state=open]:bg-muted"
+			class="inline-flex h-10 cursor-default items-center justify-center rounded-[9px] px-3 text-sm outline-none data-[highlighted]:bg-muted data-[state=open]:bg-muted"
 			>Edit</Menubar.Trigger
 		>
 		<Menubar.Content
@@ -135,7 +135,7 @@
 	</Menubar.Menu>
 	<Menubar.Menu>
 		<Menubar.Trigger
-			class="inline-flex h-10 items-center justify-center rounded-[9px] px-3 text-sm outline-none data-[highlighted]:bg-muted data-[state=open]:bg-muted"
+			class="inline-flex h-10 cursor-default items-center justify-center rounded-[9px] px-3 text-sm outline-none data-[highlighted]:bg-muted data-[state=open]:bg-muted"
 			>View</Menubar.Trigger
 		>
 		<Menubar.Content
@@ -173,7 +173,7 @@
 	</Menubar.Menu>
 	<Menubar.Menu>
 		<Menubar.Trigger
-			class="inline-flex h-10 items-center justify-center rounded-[9px] px-3 text-sm outline-none data-[highlighted]:bg-muted data-[state=open]:bg-muted"
+			class="inline-flex h-10 cursor-default items-center justify-center rounded-[9px] px-3 text-sm outline-none data-[highlighted]:bg-muted data-[state=open]:bg-muted"
 			>Profiles</Menubar.Trigger
 		>
 		<Menubar.Content

From b2228166fe186f85a8d1088630dbe3a471e0a7d9 Mon Sep 17 00:00:00 2001
From: Hunter Johnston <johnstonhuntera@gmail.com>
Date: Sun, 19 Nov 2023 17:15:52 -0500
Subject: [PATCH 068/217] refactor: floating

---
 src/lib/bits/floating/_types.ts               |  60 ++++++++++-
 src/lib/bits/floating/floating-config.ts      | 100 ++++++++++++++++++
 src/lib/bits/floating/helpers.ts              |  57 ++++++++++
 src/lib/bits/floating/types.ts                |   8 ++
 .../popover/components/PopoverContent.svelte  |  23 +++-
 src/lib/bits/popover/ctx.ts                   |  17 +++
 src/lib/bits/popover/types.ts                 |   9 +-
 src/lib/bits/tooltip/_types.ts                |  22 +---
 .../tooltip/components/TooltipContent.svelte  |  23 +++-
 src/lib/bits/tooltip/ctx.ts                   |  18 ++++
 10 files changed, 306 insertions(+), 31 deletions(-)
 create mode 100644 src/lib/bits/floating/floating-config.ts
 create mode 100644 src/lib/bits/floating/helpers.ts
 create mode 100644 src/lib/bits/floating/types.ts

diff --git a/src/lib/bits/floating/_types.ts b/src/lib/bits/floating/_types.ts
index 235a8546d..21b5e63a8 100644
--- a/src/lib/bits/floating/_types.ts
+++ b/src/lib/bits/floating/_types.ts
@@ -6,8 +6,66 @@ export type ArrowProps = Expand<
 	} & AsChild
 >;
 
+export type Boundary = "clippingAncestors" | Element | Array<Element> | Rect;
+
 export type ContentProps<
 	T extends Transition = Transition,
 	In extends Transition = Transition,
 	Out extends Transition = Transition
-> = Expand<TransitionProps<T, In, Out> & AsChild>;
+> = Expand<
+	{
+		/**
+		 * The preferred side of the anchor to render against when open.
+		 * Will be reversed when collisions occur.
+		 */
+		side?: "top" | "right" | "bottom" | "left";
+
+		/**
+		 * The preferred alignment of the anchor to render against when open.
+		 * This may change when collisions occur.
+		 */
+		align?: "start" | "center" | "end";
+
+		/**
+		 * An offset in pixels from the "start" or "end" alignment options.
+		 */
+		alignOffset?: number;
+
+		/**
+		 * The distance in pixels from the anchor to the floating element.
+		 */
+		sideOffset?: number;
+
+		/**
+		 * Whether the content should be the same width as the trigger.
+		 */
+		sameWidth?: boolean;
+
+		/**
+		 * When `true`, overrides the `side` and `align` options to prevent collisions
+		 * with the boundary edges.
+		 *
+		 * @defaultValue `true`
+		 */
+		avoidCollisions?: boolean;
+
+		/**
+		 * The amount in pixels of virtual padding around the viewport edges to check
+		 * for overflow which will cause a collision.
+		 */
+		collisionPadding?: number;
+
+		/**
+		 * A boundary element or array of elements to check for collisions against.
+		 */
+		collisionBoundary?: Boundary;
+
+		/**
+		 * Whether the floating element should be constrained to the viewport.
+		 *
+		 * @defaultValue `false`
+		 */
+		fitViewport?: boolean;
+	} & TransitionProps<T, In, Out> &
+		AsChild
+>;
diff --git a/src/lib/bits/floating/floating-config.ts b/src/lib/bits/floating/floating-config.ts
new file mode 100644
index 000000000..600085a0f
--- /dev/null
+++ b/src/lib/bits/floating/floating-config.ts
@@ -0,0 +1,100 @@
+export type FloatingConfig = {
+	/**
+	 * The initial placement of the floating element.
+	 * @defaultValue `"top"`
+	 *
+	 * @see https://floating-ui.com/docs/computePosition#placement
+	 */
+	placement?:
+		| "top"
+		| "top-start"
+		| "top-end"
+		| "right"
+		| "right-start"
+		| "right-end"
+		| "bottom"
+		| "bottom-start"
+		| "bottom-end"
+		| "left"
+		| "left-start"
+		| "left-end";
+
+	/**
+	 * The strategy to use for positioning.
+	 * @defaultValue `"absolute"`
+	 *
+	 * @see https://floating-ui.com/docs/computePosition#placement
+	 */
+	strategy?: "absolute" | "fixed";
+
+	/**
+	 * The offset of the floating element.
+	 *
+	 * @see https://floating-ui.com/docs/offset#options
+	 */
+	offset?: { mainAxis?: number; crossAxis?: number };
+
+	/**
+	 * The main axis offset or gap between the reference and floating elements.
+	 * @defaultValue `5`
+	 *
+	 * @see https://floating-ui.com/docs/offset#options
+	 */
+	gutter?: number;
+
+	/**
+	 * The virtual padding around the viewport edges to check for overflow.
+	 * @defaultValue `8`
+	 *
+	 * @see https://floating-ui.com/docs/detectOverflow#padding
+	 */
+	overflowPadding?: number;
+
+	/**
+	 * Whether to flip the placement.
+	 * @defaultValue `true`
+	 *
+	 * @see https://floating-ui.com/docs/flip
+	 */
+	flip?: boolean;
+
+	/**
+	 * Whether the floating element can overlap the reference element.
+	 * @defaultValue `false`
+	 *
+	 * @see https://floating-ui.com/docs/shift#options
+	 */
+	overlap?: boolean;
+
+	/**
+	 * Whether to make the floating element same width as the reference element.
+	 * @defaultValue `false`
+	 *
+	 * @see https://floating-ui.com/docs/size
+	 */
+	sameWidth?: boolean;
+
+	/**
+	 * Whether the floating element should fit the viewport.
+	 * @defaultValue `false`
+	 *
+	 * @see https://floating-ui.com/docs/size
+	 */
+	fitViewport?: boolean;
+
+	/**
+	 * The overflow boundary of the reference element.
+	 *
+	 * @see https://floating-ui.com/docs/detectoverflow#boundary
+	 */
+	boundary?: Boundary;
+};
+
+type Boundary = "clippingAncestors" | Element | Array<Element> | Rect;
+
+type Rect = {
+	x: number;
+	y: number;
+	width: number;
+	height: number;
+};
diff --git a/src/lib/bits/floating/helpers.ts b/src/lib/bits/floating/helpers.ts
new file mode 100644
index 000000000..fef9550ff
--- /dev/null
+++ b/src/lib/bits/floating/helpers.ts
@@ -0,0 +1,57 @@
+import type { Writable } from "svelte/store";
+
+export type Side = "top" | "right" | "bottom" | "left";
+export type Align = "start" | "center" | "end";
+
+export type PositioningProps = {
+	side?: Side;
+	align?: Align;
+	sideOffset?: number;
+	alignOffset?: number;
+	collisionPadding?: number;
+	avoidCollisions?: boolean;
+	sameWidth?: boolean;
+	collisionBoundary?: Boundary;
+	fitViewport?: boolean;
+};
+
+const defaultPositioningProps = {
+	side: "bottom",
+	align: "center",
+	sideOffset: 0,
+	alignOffset: 0,
+	sameWidth: false,
+	avoidCollisions: true,
+	collisionPadding: 8,
+	fitViewport: false
+} satisfies PositioningProps;
+
+export function getPositioningUpdater(store: Writable<FloatingConfig>) {
+	return (props: PositioningProps = {}) => {
+		return updatePositioning(store, props);
+	};
+}
+
+export function updatePositioning(store: Writable<FloatingConfig>, props: PositioningProps) {
+	const withDefaults = { ...defaultPositioningProps, ...props } satisfies PositioningProps;
+	store.update((prev) => {
+		return {
+			...prev,
+			placement: joinPlacement(withDefaults.side, withDefaults.align),
+			offset: {
+				mainAxis: withDefaults.sideOffset,
+				crossAxis: withDefaults.alignOffset
+			},
+			gutter: undefined,
+			sameWidth: withDefaults.sameWidth,
+			flip: withDefaults.avoidCollisions,
+			overflowPadding: withDefaults.collisionPadding,
+			boundary: withDefaults.collisionBoundary
+		};
+	});
+}
+
+function joinPlacement(side: Side, align: Align): FloatingConfig["placement"] {
+	if (align === "center") return side;
+	return `${side}-${align}`;
+}
diff --git a/src/lib/bits/floating/types.ts b/src/lib/bits/floating/types.ts
new file mode 100644
index 000000000..660a0a1e8
--- /dev/null
+++ b/src/lib/bits/floating/types.ts
@@ -0,0 +1,8 @@
+import type { HTMLDivAttributes, Transition } from "$lib/internal";
+import type * as I from "./_types.js";
+
+export type ContentProps<
+	T extends Transition = Transition,
+	In extends Transition = Transition,
+	Out extends Transition = Transition
+> = I.ContentProps<T, In, Out> & HTMLDivAttributes;
diff --git a/src/lib/bits/popover/components/PopoverContent.svelte b/src/lib/bits/popover/components/PopoverContent.svelte
index 253ba35e0..0d956c042 100644
--- a/src/lib/bits/popover/components/PopoverContent.svelte
+++ b/src/lib/bits/popover/components/PopoverContent.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { melt } from "@melt-ui/svelte";
 	import type { Transition } from "$lib/internal/index.js";
-	import { getCtx, getAttrs } from "../ctx.js";
+	import { getCtx, getAttrs, updatePositioning } from "../ctx.js";
 	import type { ContentProps } from "../types.js";
 
 	type T = $$Generic<Transition>;
@@ -18,6 +18,15 @@
 	export let outTransitionConfig: $$Props["outTransitionConfig"] = undefined;
 	export let asChild: $$Props["asChild"] = false;
 	export let id: $$Props["id"] = undefined;
+	export let side: $$Props["side"] = "bottom";
+	export let align: $$Props["align"] = "center";
+	export let sideOffset: $$Props["sideOffset"] = 0;
+	export let alignOffset: $$Props["alignOffset"] = 0;
+	export let collisionPadding: $$Props["collisionPadding"] = 8;
+	export let avoidCollisions: $$Props["avoidCollisions"] = true;
+	export let collisionBoundary: $$Props["collisionBoundary"] = undefined;
+	export let sameWidth: $$Props["sameWidth"] = false;
+	export let fitViewport: $$Props["fitViewport"] = false;
 
 	const {
 		elements: { content },
@@ -35,6 +44,18 @@
 		builder,
 		attrs
 	};
+
+	$: updatePositioning({
+		side,
+		align,
+		sideOffset,
+		alignOffset,
+		collisionPadding,
+		avoidCollisions,
+		collisionBoundary,
+		sameWidth,
+		fitViewport
+	});
 </script>
 
 {#if asChild && $open}
diff --git a/src/lib/bits/popover/ctx.ts b/src/lib/bits/popover/ctx.ts
index fd8154a1f..c4e3399b1 100644
--- a/src/lib/bits/popover/ctx.ts
+++ b/src/lib/bits/popover/ctx.ts
@@ -5,6 +5,8 @@ import {
 } from "@melt-ui/svelte";
 import { getContext, setContext } from "svelte";
 import { createBitAttrs, getOptionUpdater, removeUndefined } from "$lib/internal/index.js";
+import { getPositioningUpdater, type PositioningProps } from "../floating/helpers";
+import type { Writable } from "svelte/store";
 
 const NAME = "popover";
 const PARTS = ["arrow", "close", "content", "trigger"] as const;
@@ -34,3 +36,18 @@ export function setArrow(size = 8) {
 	popover.options.arrowSize.set(size);
 	return popover;
 }
+
+const defaultPlacement = {
+	side: "bottom",
+	align: "center"
+} satisfies PositioningProps;
+
+export function updatePositioning(props: PositioningProps) {
+	const withDefaults = { ...defaultPlacement, ...props } satisfies PositioningProps;
+	const {
+		options: { positioning }
+	} = getCtx();
+
+	const updater = getPositioningUpdater(positioning as Writable<FloatingConfig>);
+	updater(withDefaults);
+}
diff --git a/src/lib/bits/popover/types.ts b/src/lib/bits/popover/types.ts
index f56e01e56..490600da3 100644
--- a/src/lib/bits/popover/types.ts
+++ b/src/lib/bits/popover/types.ts
@@ -1,16 +1,11 @@
-import type { HTMLDivAttributes, Transition } from "$lib/internal/index.js";
+import type { HTMLDivAttributes } from "$lib/internal/index.js";
 import type { CustomEventHandler } from "$lib/index.js";
 import type { HTMLButtonAttributes } from "svelte/elements";
 import type * as I from "./_types.js";
+import type { ContentProps } from "$lib/bits/floating/types.js";
 
 type Props = I.Props;
 
-type ContentProps<
-	T extends Transition = Transition,
-	In extends Transition = Transition,
-	Out extends Transition = Transition
-> = I.ContentProps<T, In, Out> & HTMLDivAttributes;
-
 type TriggerProps = I.TriggerProps & HTMLButtonAttributes;
 
 type CloseProps = I.ContentProps & HTMLButtonAttributes;
diff --git a/src/lib/bits/tooltip/_types.ts b/src/lib/bits/tooltip/_types.ts
index b08f36d9a..37ee66e44 100644
--- a/src/lib/bits/tooltip/_types.ts
+++ b/src/lib/bits/tooltip/_types.ts
@@ -4,15 +4,8 @@
  * but we don't want to document the HTML attributes.
  */
 import type { CreateTooltipProps } from "@melt-ui/svelte";
-import type {
-	Expand,
-	OmitFloating,
-	Transition,
-	OnChangeFn,
-	AsChild,
-	TransitionProps
-} from "$lib/internal/index.js";
-import type { ArrowProps } from "$lib/bits/floating/_types.js";
+import type { Expand, OmitFloating, OnChangeFn, AsChild } from "$lib/internal/index.js";
+import type { ArrowProps, ContentProps } from "$lib/bits/floating/_types.js";
 
 type Props = Expand<OmitFloating<CreateTooltipProps>> & {
 	/**
@@ -43,17 +36,6 @@ type Props = Expand<OmitFloating<CreateTooltipProps>> & {
 	onOpenChange?: OnChangeFn<boolean>;
 };
 
-type ContentProps<
-	T extends Transition = Transition,
-	In extends Transition = Transition,
-	Out extends Transition = Transition
-> = Expand<
-	{
-		sideOffset?: number;
-	} & TransitionProps<T, In, Out> &
-		AsChild
->;
-
 type TriggerProps = AsChild;
 
 export type { Props, ArrowProps, TriggerProps, ContentProps };
diff --git a/src/lib/bits/tooltip/components/TooltipContent.svelte b/src/lib/bits/tooltip/components/TooltipContent.svelte
index 77b1ea70d..e3ccc66ec 100644
--- a/src/lib/bits/tooltip/components/TooltipContent.svelte
+++ b/src/lib/bits/tooltip/components/TooltipContent.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { melt } from "@melt-ui/svelte";
 	import { createDispatcher, type Transition } from "$lib/internal/index.js";
-	import { getCtx, getAttrs } from "../ctx.js";
+	import { getCtx, getAttrs, updatePositioning } from "../ctx.js";
 	import type { ContentEvents, ContentProps } from "../types.js";
 
 	type T = $$Generic<Transition>;
@@ -18,8 +18,16 @@
 	export let outTransition: $$Props["outTransition"] = undefined;
 	export let outTransitionConfig: $$Props["outTransitionConfig"] = undefined;
 	export let asChild: $$Props["asChild"] = false;
-	export let sideOffset: $$Props["sideOffset"] = 4;
 	export let id: $$Props["id"] = undefined;
+	export let side: $$Props["side"] = "bottom";
+	export let align: $$Props["align"] = "center";
+	export let sideOffset: $$Props["sideOffset"] = 0;
+	export let alignOffset: $$Props["alignOffset"] = 0;
+	export let collisionPadding: $$Props["collisionPadding"] = 8;
+	export let avoidCollisions: $$Props["avoidCollisions"] = true;
+	export let collisionBoundary: $$Props["collisionBoundary"] = undefined;
+	export let sameWidth: $$Props["sameWidth"] = false;
+	export let fitViewport: $$Props["fitViewport"] = false;
 
 	const {
 		elements: { content },
@@ -35,6 +43,17 @@
 	}
 	$: builder = $content;
 	$: slotProps = { builder, attrs };
+	$: updatePositioning({
+		side,
+		align,
+		sideOffset,
+		alignOffset,
+		collisionPadding,
+		avoidCollisions,
+		collisionBoundary,
+		sameWidth,
+		fitViewport
+	});
 </script>
 
 {#if asChild && $open}
diff --git a/src/lib/bits/tooltip/ctx.ts b/src/lib/bits/tooltip/ctx.ts
index b996c7fc0..0e0c86278 100644
--- a/src/lib/bits/tooltip/ctx.ts
+++ b/src/lib/bits/tooltip/ctx.ts
@@ -5,6 +5,9 @@ import {
 } from "@melt-ui/svelte";
 import { createBitAttrs, getOptionUpdater, removeUndefined } from "$lib/internal/index.js";
 import { getContext, setContext } from "svelte";
+import { getPositioningUpdater, type PositioningProps } from "../floating/helpers";
+import type { Writable } from "svelte/store";
+import type { FloatingConfig } from "../floating/floating-config";
 
 const NAME = "tooltip";
 const PARTS = ["arrow", "content", "trigger"] as const;
@@ -44,3 +47,18 @@ export function setArrow(size = 8) {
 	tooltip.options.arrowSize.set(size);
 	return tooltip;
 }
+
+const defaultPlacement = {
+	side: "bottom",
+	align: "center"
+} satisfies PositioningProps;
+
+export function updatePositioning(props: PositioningProps) {
+	const withDefaults = { ...defaultPlacement, ...props } satisfies PositioningProps;
+	const {
+		options: { positioning }
+	} = getCtx();
+
+	const updater = getPositioningUpdater(positioning as Writable<FloatingConfig>);
+	updater(withDefaults);
+}

From 73384c285ad261d191bf90cd634725d14502d9ee Mon Sep 17 00:00:00 2001
From: Hunter Johnston <johnstonhuntera@gmail.com>
Date: Sun, 19 Nov 2023 19:47:41 -0500
Subject: [PATCH 069/217] tooltip positioning

---
 src/lib/bits/tooltip/components/TooltipContent.svelte | 2 +-
 src/lib/bits/tooltip/ctx.ts                           | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/lib/bits/tooltip/components/TooltipContent.svelte b/src/lib/bits/tooltip/components/TooltipContent.svelte
index e3ccc66ec..b39aed774 100644
--- a/src/lib/bits/tooltip/components/TooltipContent.svelte
+++ b/src/lib/bits/tooltip/components/TooltipContent.svelte
@@ -19,7 +19,7 @@
 	export let outTransitionConfig: $$Props["outTransitionConfig"] = undefined;
 	export let asChild: $$Props["asChild"] = false;
 	export let id: $$Props["id"] = undefined;
-	export let side: $$Props["side"] = "bottom";
+	export let side: $$Props["side"] = "top";
 	export let align: $$Props["align"] = "center";
 	export let sideOffset: $$Props["sideOffset"] = 0;
 	export let alignOffset: $$Props["alignOffset"] = 0;
diff --git a/src/lib/bits/tooltip/ctx.ts b/src/lib/bits/tooltip/ctx.ts
index 0e0c86278..9731c1504 100644
--- a/src/lib/bits/tooltip/ctx.ts
+++ b/src/lib/bits/tooltip/ctx.ts
@@ -49,7 +49,7 @@ export function setArrow(size = 8) {
 }
 
 const defaultPlacement = {
-	side: "bottom",
+	side: "top",
 	align: "center"
 } satisfies PositioningProps;
 

From bd14118b79333f633c1a6b55eaa6e61e188ffb8d Mon Sep 17 00:00:00 2001
From: Hunter Johnston <johnstonhuntera@gmail.com>
Date: Sun, 19 Nov 2023 20:09:35 -0500
Subject: [PATCH 070/217] consolidation

---
 .../components/ContextMenuContent.svelte      |  31 +++-
 src/lib/bits/context-menu/ctx.ts              |  50 ++++--
 .../components/DropdownMenuContent.svelte     |  33 +++-
 src/lib/bits/menu/_types.ts                   |  37 +---
 src/lib/bits/menu/components/MenuArrow.svelte |  29 +++
 .../components/MenuCheckboxIndicator.svelte   |  25 +++
 .../menu/components/MenuCheckboxItem.svelte   |  60 +++++++
 .../bits/menu/components/MenuContent.svelte   | 110 ++++++++++++
 src/lib/bits/menu/components/MenuGroup.svelte |  24 +++
 src/lib/bits/menu/components/MenuItem.svelte  |  48 +++++
 src/lib/bits/menu/components/MenuLabel.svelte |  26 +++
 .../menu/components/MenuRadioGroup.svelte     |  42 +++++
 .../menu/components/MenuRadioIndicator.svelte |   8 +
 .../bits/menu/components/MenuRadioItem.svelte |  46 +++++
 .../bits/menu/components/MenuSeparator.svelte |  27 +++
 src/lib/bits/menu/components/MenuSub.svelte   |  42 +++++
 .../menu/components/MenuSubContent.svelte     | 124 +++++++++++++
 .../menu/components/MenuSubTrigger.svelte     |  51 ++++++
 .../bits/menu/components/MenuTrigger.svelte   |  44 +++++
 src/lib/bits/menu/ctx.ts                      | 166 ++++++++++++++++++
 src/lib/bits/menu/types.ts                    |  17 +-
 src/lib/internal/types.ts                     |   4 +-
 22 files changed, 962 insertions(+), 82 deletions(-)
 create mode 100644 src/lib/bits/menu/components/MenuArrow.svelte
 create mode 100644 src/lib/bits/menu/components/MenuCheckboxIndicator.svelte
 create mode 100644 src/lib/bits/menu/components/MenuCheckboxItem.svelte
 create mode 100644 src/lib/bits/menu/components/MenuContent.svelte
 create mode 100644 src/lib/bits/menu/components/MenuGroup.svelte
 create mode 100644 src/lib/bits/menu/components/MenuItem.svelte
 create mode 100644 src/lib/bits/menu/components/MenuLabel.svelte
 create mode 100644 src/lib/bits/menu/components/MenuRadioGroup.svelte
 create mode 100644 src/lib/bits/menu/components/MenuRadioIndicator.svelte
 create mode 100644 src/lib/bits/menu/components/MenuRadioItem.svelte
 create mode 100644 src/lib/bits/menu/components/MenuSeparator.svelte
 create mode 100644 src/lib/bits/menu/components/MenuSub.svelte
 create mode 100644 src/lib/bits/menu/components/MenuSubContent.svelte
 create mode 100644 src/lib/bits/menu/components/MenuSubTrigger.svelte
 create mode 100644 src/lib/bits/menu/components/MenuTrigger.svelte
 create mode 100644 src/lib/bits/menu/ctx.ts

diff --git a/src/lib/bits/context-menu/components/ContextMenuContent.svelte b/src/lib/bits/context-menu/components/ContextMenuContent.svelte
index 0ae6bf1a8..4a37c4b7a 100644
--- a/src/lib/bits/context-menu/components/ContextMenuContent.svelte
+++ b/src/lib/bits/context-menu/components/ContextMenuContent.svelte
@@ -1,8 +1,7 @@
 <script lang="ts">
 	import { createDispatcher } from "$lib/internal/events.js";
-
 	import { melt } from "@melt-ui/svelte";
-	import { getContent, getAttrs } from "../ctx.js";
+	import { getAttrs, getCtx, updatePositioning } from "../ctx.js";
 	import type { Transition } from "$lib/internal/types.js";
 	import type { ContentEvents, ContentProps } from "../types.js";
 
@@ -11,7 +10,6 @@
 	type Out = $$Generic<Transition>;
 	type $$Props = ContentProps<T, In, Out>;
 	type $$Events = ContentEvents;
-	export let sideOffset: $$Props["sideOffset"] = 5;
 
 	export let transition: $$Props["transition"] = undefined;
 	export let transitionConfig: $$Props["transitionConfig"] = undefined;
@@ -21,26 +19,45 @@
 	export let outTransitionConfig: $$Props["outTransitionConfig"] = undefined;
 	export let asChild: $$Props["asChild"] = false;
 	export let id: $$Props["id"] = undefined;
+	export let side: $$Props["side"] = "top";
+	export let align: $$Props["align"] = "center";
+	export let sideOffset: $$Props["sideOffset"] = 0;
+	export let alignOffset: $$Props["alignOffset"] = 0;
+	export let collisionPadding: $$Props["collisionPadding"] = 8;
+	export let avoidCollisions: $$Props["avoidCollisions"] = true;
+	export let collisionBoundary: $$Props["collisionBoundary"] = undefined;
+	export let sameWidth: $$Props["sameWidth"] = false;
+	export let fitViewport: $$Props["fitViewport"] = false;
 
 	const {
 		elements: { menu },
 		states: { open },
 		ids
-	} = getContent(sideOffset);
+	} = getCtx();
 
 	const dispatch = createDispatcher();
+	const attrs = getAttrs("content");
 
 	$: if (id) {
 		ids.menu.set(id);
 	}
-
 	$: builder = $menu;
-	const attrs = getAttrs("content");
-
 	$: slotProps = {
 		builder,
 		attrs
 	};
+
+	$: updatePositioning({
+		side,
+		align,
+		sideOffset,
+		alignOffset,
+		collisionPadding,
+		avoidCollisions,
+		collisionBoundary,
+		sameWidth,
+		fitViewport
+	});
 </script>
 
 {#if asChild && $open}
diff --git a/src/lib/bits/context-menu/ctx.ts b/src/lib/bits/context-menu/ctx.ts
index 982615b82..f4aee40bf 100644
--- a/src/lib/bits/context-menu/ctx.ts
+++ b/src/lib/bits/context-menu/ctx.ts
@@ -16,7 +16,8 @@ import {
 	type CreateContextSubmenuProps
 } from "@melt-ui/svelte";
 import { getContext, setContext } from "svelte";
-import type { Readable } from "svelte/store";
+import type { Readable, Writable } from "svelte/store";
+import { getPositioningUpdater, type PositioningProps } from "../floating/helpers.js";
 
 const NAME = "context-menu";
 const SUB_NAME = "context-menu-submenu";
@@ -105,23 +106,6 @@ export function getRadioIndicator() {
 	}>(RADIO_ITEM_NAME);
 }
 
-export function getContent(sideoffset = 5) {
-	const menu = getCtx();
-
-	menu.options.positioning.update((prev) => ({ ...prev, gutter: sideoffset }));
-
-	return menu;
-}
-
-export function getSubContent(sideOffset = -1) {
-	const submenu = getSubMenuCtx();
-	const {
-		options: { positioning }
-	} = submenu;
-	positioning.update((prev) => ({ ...prev, gutter: sideOffset }));
-	return submenu;
-}
-
 export function setCheckboxItem(props: ContextCheckboxItemProps) {
 	const {
 		builders: { createCheckboxItem }
@@ -161,3 +145,33 @@ export function setArrow(size = 8) {
 	menu.options.arrowSize.set(size);
 	return menu;
 }
+
+const defaultPlacement = {
+	side: "bottom",
+	align: "center"
+} satisfies PositioningProps;
+
+export function updatePositioning(props: PositioningProps) {
+	const withDefaults = { ...defaultPlacement, ...props } satisfies PositioningProps;
+	const {
+		options: { positioning }
+	} = getCtx();
+
+	const updater = getPositioningUpdater(positioning as Writable<FloatingConfig>);
+	updater(withDefaults);
+}
+
+const defaultSubPlacement = {
+	side: "right",
+	align: "start"
+} satisfies PositioningProps;
+
+export function updateSubPositioning(props: PositioningProps) {
+	const withDefaults = { ...defaultSubPlacement, ...props } satisfies PositioningProps;
+	const {
+		options: { positioning }
+	} = getCtx();
+
+	const updater = getPositioningUpdater(positioning as Writable<FloatingConfig>);
+	updater(withDefaults);
+}
diff --git a/src/lib/bits/dropdown-menu/components/DropdownMenuContent.svelte b/src/lib/bits/dropdown-menu/components/DropdownMenuContent.svelte
index 18a083a0e..4a37c4b7a 100644
--- a/src/lib/bits/dropdown-menu/components/DropdownMenuContent.svelte
+++ b/src/lib/bits/dropdown-menu/components/DropdownMenuContent.svelte
@@ -1,9 +1,8 @@
 <script lang="ts">
 	import { createDispatcher } from "$lib/internal/events.js";
-
 	import { melt } from "@melt-ui/svelte";
+	import { getAttrs, getCtx, updatePositioning } from "../ctx.js";
 	import type { Transition } from "$lib/internal/types.js";
-	import { getContent, getAttrs } from "../ctx.js";
 	import type { ContentEvents, ContentProps } from "../types.js";
 
 	type T = $$Generic<Transition>;
@@ -12,28 +11,32 @@
 	type $$Props = ContentProps<T, In, Out>;
 	type $$Events = ContentEvents;
 
-	export let sideOffset: $$Props["sideOffset"] = 5;
-
 	export let transition: $$Props["transition"] = undefined;
 	export let transitionConfig: $$Props["transitionConfig"] = undefined;
-
 	export let inTransition: $$Props["inTransition"] = undefined;
 	export let inTransitionConfig: $$Props["inTransitionConfig"] = undefined;
-
 	export let outTransition: $$Props["outTransition"] = undefined;
 	export let outTransitionConfig: $$Props["outTransitionConfig"] = undefined;
-
 	export let asChild: $$Props["asChild"] = false;
 	export let id: $$Props["id"] = undefined;
+	export let side: $$Props["side"] = "top";
+	export let align: $$Props["align"] = "center";
+	export let sideOffset: $$Props["sideOffset"] = 0;
+	export let alignOffset: $$Props["alignOffset"] = 0;
+	export let collisionPadding: $$Props["collisionPadding"] = 8;
+	export let avoidCollisions: $$Props["avoidCollisions"] = true;
+	export let collisionBoundary: $$Props["collisionBoundary"] = undefined;
+	export let sameWidth: $$Props["sameWidth"] = false;
+	export let fitViewport: $$Props["fitViewport"] = false;
 
 	const {
 		elements: { menu },
 		states: { open },
 		ids
-	} = getContent(sideOffset);
+	} = getCtx();
 
-	const attrs = getAttrs("content");
 	const dispatch = createDispatcher();
+	const attrs = getAttrs("content");
 
 	$: if (id) {
 		ids.menu.set(id);
@@ -43,6 +46,18 @@
 		builder,
 		attrs
 	};
+
+	$: updatePositioning({
+		side,
+		align,
+		sideOffset,
+		alignOffset,
+		collisionPadding,
+		avoidCollisions,
+		collisionBoundary,
+		sameWidth,
+		fitViewport
+	});
 </script>
 
 {#if asChild && $open}
diff --git a/src/lib/bits/menu/_types.ts b/src/lib/bits/menu/_types.ts
index ab6c7bc71..adf71aed2 100644
--- a/src/lib/bits/menu/_types.ts
+++ b/src/lib/bits/menu/_types.ts
@@ -1,14 +1,7 @@
 /**
  * Shared internal types for the various menu components.
  */
-import type {
-	AsChild,
-	OmitChecked,
-	OmitFloating,
-	OnChangeFn,
-	Transition,
-	TransitionProps
-} from "$lib/internal/index.js";
+import type { AsChild, OmitChecked, OmitFloating, OnChangeFn } from "$lib/internal/index.js";
 import type {
 	CreateContextMenuCheckboxItemProps,
 	CreateContextMenuRadioGroupProps,
@@ -16,10 +9,7 @@ import type {
 	CreateContextSubmenuProps,
 	CreateContextMenuProps
 } from "@melt-ui/svelte";
-import type {
-	ContentProps as FloatingContentProps,
-	ArrowProps as FloatingArrowProps
-} from "$lib/bits/floating/_types.js";
+import type { ArrowProps as FloatingArrowProps, ContentProps } from "$lib/bits/floating/_types.js";
 
 export type Props = Expand<
 	OmitFloating<CreateContextMenuProps> & {
@@ -38,17 +28,6 @@ export type Props = Expand<
 	}
 >;
 
-export type ContentProps<
-	T extends Transition = Transition,
-	In extends Transition = Transition,
-	Out extends Transition = Transition
-> = Expand<
-	{
-		sideOffset?: number;
-	} & FloatingContentProps<T, In, Out> &
-		AsChild
->;
-
 export type SubTriggerProps = Expand<
 	{
 		/**
@@ -123,19 +102,11 @@ export type ItemProps = Expand<
 	} & AsChild
 >;
 
-export type SubContentProps<
-	T extends Transition = Transition,
-	In extends Transition = Transition,
-	Out extends Transition = Transition
-> = Expand<
-	TransitionProps<T, In, Out> & {
-		sideOffset?: number;
-	} & AsChild
->;
-
 export type ArrowProps = FloatingArrowProps;
 export type GroupProps = AsChild;
 export type CheckboxItemIndicatorProps = AsChild;
 export type LabelProps = AsChild;
 export type SeparatorProps = AsChild;
 export type TriggerProps = AsChild;
+
+export { ContentProps, ContentProps as SubContentProps };
diff --git a/src/lib/bits/menu/components/MenuArrow.svelte b/src/lib/bits/menu/components/MenuArrow.svelte
new file mode 100644
index 000000000..e0e37099c
--- /dev/null
+++ b/src/lib/bits/menu/components/MenuArrow.svelte
@@ -0,0 +1,29 @@
+<script lang="ts">
+	import { melt } from "@melt-ui/svelte";
+	import { setArrow, getAttrs } from "../ctx.js";
+	import type { ArrowProps } from "../types.js";
+
+	type $$Props = ArrowProps;
+
+	export let size: $$Props["size"] = 8;
+	export let asChild: $$Props["asChild"] = false;
+
+	const {
+		elements: { arrow }
+	} = setArrow(size);
+
+	const attrs = getAttrs("arrow");
+
+	$: builder = $arrow;
+
+	$: slotProps = {
+		builder,
+		attrs
+	};
+</script>
+
+{#if asChild}
+	<slot {...slotProps} />
+{:else}
+	<div use:melt={builder} />
+{/if}
diff --git a/src/lib/bits/menu/components/MenuCheckboxIndicator.svelte b/src/lib/bits/menu/components/MenuCheckboxIndicator.svelte
new file mode 100644
index 000000000..5b9896e4e
--- /dev/null
+++ b/src/lib/bits/menu/components/MenuCheckboxIndicator.svelte
@@ -0,0 +1,25 @@
+<script lang="ts">
+	import type { CheckboxItemIndicatorProps } from "../types.js";
+	import { getAttrs, getCheckboxIndicator } from "../ctx.js";
+
+	type $$Props = CheckboxItemIndicatorProps;
+	export let asChild: $$Props["asChild"] = false;
+
+	const checked = getCheckboxIndicator();
+	const attrs = getAttrs("checkbox-indicator");
+
+	$: slotProps = {
+		attrs,
+		checked: $checked
+	};
+</script>
+
+{#if asChild}
+	<slot {...slotProps} />
+{:else}
+	<div {...$$restProps} {...attrs}>
+		{#if $checked}
+			<slot {...slotProps} />
+		{/if}
+	</div>
+{/if}
diff --git a/src/lib/bits/menu/components/MenuCheckboxItem.svelte b/src/lib/bits/menu/components/MenuCheckboxItem.svelte
new file mode 100644
index 000000000..a4184296d
--- /dev/null
+++ b/src/lib/bits/menu/components/MenuCheckboxItem.svelte
@@ -0,0 +1,60 @@
+<script lang="ts">
+	import { melt } from "@melt-ui/svelte";
+	import { setCheckboxItem, getAttrs } from "../ctx.js";
+	import type { CheckboxItemEvents, CheckboxItemProps } from "../types.js";
+	import { createDispatcher } from "$lib/internal/events.js";
+
+	type $$Props = CheckboxItemProps;
+	type $$Events = CheckboxItemEvents;
+
+	export let checked: $$Props["checked"] = undefined;
+	export let onCheckedChange: $$Props["onCheckedChange"] = undefined;
+	export let disabled: $$Props["disabled"] = undefined;
+	export let asChild: $$Props["asChild"] = false;
+
+	const {
+		elements: { checkboxItem },
+		states: { checked: localChecked },
+		updateOption
+	} = setCheckboxItem({
+		disabled,
+		defaultChecked: checked,
+		onCheckedChange: ({ next }) => {
+			onCheckedChange?.(next);
+			checked = next;
+			return next;
+		}
+	});
+
+	const dispatch = createDispatcher();
+	const attrs = getAttrs("checkbox-item");
+
+	$: checked !== undefined && localChecked.set(checked);
+	$: updateOption("disabled", disabled);
+
+	$: builder = $checkboxItem;
+
+	$: slotProps = {
+		builder,
+		attrs
+	};
+</script>
+
+{#if asChild}
+	<slot {...slotProps} />
+{:else}
+	<div
+		use:melt={builder}
+		{...$$restProps}
+		{...attrs}
+		on:m-click={dispatch}
+		on:m-focusin={dispatch}
+		on:m-focusout={dispatch}
+		on:m-keydown={dispatch}
+		on:m-pointerdown={dispatch}
+		on:m-pointerleave={dispatch}
+		on:m-pointermove={dispatch}
+	>
+		<slot {...slotProps} />
+	</div>
+{/if}
diff --git a/src/lib/bits/menu/components/MenuContent.svelte b/src/lib/bits/menu/components/MenuContent.svelte
new file mode 100644
index 000000000..4a37c4b7a
--- /dev/null
+++ b/src/lib/bits/menu/components/MenuContent.svelte
@@ -0,0 +1,110 @@
+<script lang="ts">
+	import { createDispatcher } from "$lib/internal/events.js";
+	import { melt } from "@melt-ui/svelte";
+	import { getAttrs, getCtx, updatePositioning } from "../ctx.js";
+	import type { Transition } from "$lib/internal/types.js";
+	import type { ContentEvents, ContentProps } from "../types.js";
+
+	type T = $$Generic<Transition>;
+	type In = $$Generic<Transition>;
+	type Out = $$Generic<Transition>;
+	type $$Props = ContentProps<T, In, Out>;
+	type $$Events = ContentEvents;
+
+	export let transition: $$Props["transition"] = undefined;
+	export let transitionConfig: $$Props["transitionConfig"] = undefined;
+	export let inTransition: $$Props["inTransition"] = undefined;
+	export let inTransitionConfig: $$Props["inTransitionConfig"] = undefined;
+	export let outTransition: $$Props["outTransition"] = undefined;
+	export let outTransitionConfig: $$Props["outTransitionConfig"] = undefined;
+	export let asChild: $$Props["asChild"] = false;
+	export let id: $$Props["id"] = undefined;
+	export let side: $$Props["side"] = "top";
+	export let align: $$Props["align"] = "center";
+	export let sideOffset: $$Props["sideOffset"] = 0;
+	export let alignOffset: $$Props["alignOffset"] = 0;
+	export let collisionPadding: $$Props["collisionPadding"] = 8;
+	export let avoidCollisions: $$Props["avoidCollisions"] = true;
+	export let collisionBoundary: $$Props["collisionBoundary"] = undefined;
+	export let sameWidth: $$Props["sameWidth"] = false;
+	export let fitViewport: $$Props["fitViewport"] = false;
+
+	const {
+		elements: { menu },
+		states: { open },
+		ids
+	} = getCtx();
+
+	const dispatch = createDispatcher();
+	const attrs = getAttrs("content");
+
+	$: if (id) {
+		ids.menu.set(id);
+	}
+	$: builder = $menu;
+	$: slotProps = {
+		builder,
+		attrs
+	};
+
+	$: updatePositioning({
+		side,
+		align,
+		sideOffset,
+		alignOffset,
+		collisionPadding,
+		avoidCollisions,
+		collisionBoundary,
+		sameWidth,
+		fitViewport
+	});
+</script>
+
+{#if asChild && $open}
+	<slot {...slotProps} />
+{:else if transition && $open}
+	<div
+		transition:transition={transitionConfig}
+		use:melt={builder}
+		{...$$restProps}
+		{...attrs}
+		on:m-keydown={dispatch}
+	>
+		<slot {...slotProps} />
+	</div>
+{:else if inTransition && outTransition && $open}
+	<div
+		in:inTransition={inTransitionConfig}
+		out:outTransition={outTransitionConfig}
+		use:melt={builder}
+		{...$$restProps}
+		{...attrs}
+		on:m-keydown={dispatch}
+	>
+		<slot {...slotProps} />
+	</div>
+{:else if inTransition && $open}
+	<div
+		in:inTransition={inTransitionConfig}
+		use:melt={builder}
+		{...$$restProps}
+		{...attrs}
+		on:m-keydown={dispatch}
+	>
+		<slot {...slotProps} />
+	</div>
+{:else if outTransition && $open}
+	<div
+		out:outTransition={outTransitionConfig}
+		use:melt={builder}
+		{...$$restProps}
+		{...attrs}
+		on:m-keydown={dispatch}
+	>
+		<slot {...slotProps} />
+	</div>
+{:else if $open}
+	<div use:melt={builder} {...$$restProps} {...attrs} on:m-keydown={dispatch}>
+		<slot {...slotProps} />
+	</div>
+{/if}
diff --git a/src/lib/bits/menu/components/MenuGroup.svelte b/src/lib/bits/menu/components/MenuGroup.svelte
new file mode 100644
index 000000000..4bb816081
--- /dev/null
+++ b/src/lib/bits/menu/components/MenuGroup.svelte
@@ -0,0 +1,24 @@
+<script lang="ts">
+	import { melt } from "@melt-ui/svelte";
+	import { setGroupCtx, getAttrs } from "../ctx.js";
+	import type { GroupProps } from "../types.js";
+	type $$Props = GroupProps;
+	export let asChild: $$Props["asChild"] = false;
+
+	const { group, id } = setGroupCtx();
+	const attrs = getAttrs("group");
+
+	$: builder = $group(id);
+	$: slotProps = {
+		builder,
+		attrs
+	};
+</script>
+
+{#if asChild}
+	<slot {...slotProps} />
+{:else}
+	<div use:melt={builder} {...$$restProps} {...attrs}>
+		<slot {...slotProps} />
+	</div>
+{/if}
diff --git a/src/lib/bits/menu/components/MenuItem.svelte b/src/lib/bits/menu/components/MenuItem.svelte
new file mode 100644
index 000000000..c9aa0bdb7
--- /dev/null
+++ b/src/lib/bits/menu/components/MenuItem.svelte
@@ -0,0 +1,48 @@
+<script lang="ts">
+	import { createDispatcher } from "$lib/internal/events.js";
+	import { disabledAttrs } from "$lib/internal/index.js";
+	import { melt } from "@melt-ui/svelte";
+	import { getCtx, getAttrs } from "../ctx.js";
+	import type { ItemEvents, ItemProps } from "../types.js";
+
+	type $$Props = ItemProps;
+	type $$Events = ItemEvents;
+
+	export let href: $$Props["href"] = undefined;
+	export let asChild: $$Props["asChild"] = false;
+	export let disabled: $$Props["disabled"] = false;
+
+	const {
+		elements: { item }
+	} = getCtx();
+	const dispatch = createDispatcher();
+
+	$: builder = $item;
+	$: attrs = { ...getAttrs("item"), ...disabledAttrs(disabled) };
+
+	$: slotProps = {
+		builder,
+		attrs
+	};
+</script>
+
+{#if asChild}
+	<slot {...slotProps} />
+{:else}
+	<svelte:element
+		this={href ? "a" : "div"}
+		{href}
+		use:melt={builder}
+		{...$$restProps}
+		{...attrs}
+		on:m-click={dispatch}
+		on:m-focusin={dispatch}
+		on:m-focusout={dispatch}
+		on:m-keydown={dispatch}
+		on:m-pointerdown={dispatch}
+		on:m-pointerleave={dispatch}
+		on:m-pointermove={dispatch}
+	>
+		<slot {...slotProps} />
+	</svelte:element>
+{/if}
diff --git a/src/lib/bits/menu/components/MenuLabel.svelte b/src/lib/bits/menu/components/MenuLabel.svelte
new file mode 100644
index 000000000..6f5db1b6d
--- /dev/null
+++ b/src/lib/bits/menu/components/MenuLabel.svelte
@@ -0,0 +1,26 @@
+<script lang="ts">
+	import { melt } from "@melt-ui/svelte";
+	import { getGroupLabel, getAttrs } from "../ctx.js";
+	import type { LabelProps } from "../types.js";
+
+	type $$Props = LabelProps;
+
+	export let asChild: $$Props["asChild"] = false;
+
+	const { groupLabel, id } = getGroupLabel();
+	const attrs = getAttrs("label");
+
+	$: builder = $groupLabel(id);
+	$: slotProps = {
+		builder,
+		attrs
+	};
+</script>
+
+{#if asChild}
+	<slot {...slotProps} />
+{:else}
+	<div use:melt={builder} {...$$restProps} {...attrs}>
+		<slot {...slotProps} />
+	</div>
+{/if}
diff --git a/src/lib/bits/menu/components/MenuRadioGroup.svelte b/src/lib/bits/menu/components/MenuRadioGroup.svelte
new file mode 100644
index 000000000..158632181
--- /dev/null
+++ b/src/lib/bits/menu/components/MenuRadioGroup.svelte
@@ -0,0 +1,42 @@
+<script lang="ts">
+	import { melt } from "@melt-ui/svelte";
+	import { setRadioGroupCtx, getAttrs } from "../ctx.js";
+	import type { RadioGroupProps } from "../types.js";
+
+	type $$Props = RadioGroupProps;
+
+	export let value: $$Props["value"] = undefined;
+	export let onValueChange: $$Props["onValueChange"] = undefined;
+	export let asChild: $$Props["asChild"] = false;
+
+	const {
+		elements: { radioGroup },
+		states: { value: localValue }
+	} = setRadioGroupCtx({
+		defaultValue: value,
+		onValueChange: ({ next }) => {
+			if (next) {
+				onValueChange?.(next);
+				value = next;
+			}
+			return next;
+		}
+	});
+
+	const attrs = getAttrs("radio-group");
+
+	$: value !== undefined && localValue.set(value);
+	$: builder = $radioGroup;
+	$: slotProps = {
+		builder,
+		attrs
+	};
+</script>
+
+{#if asChild}
+	<slot {...slotProps} />
+{:else}
+	<div use:melt={builder} {...$$restProps} {...attrs}>
+		<slot {...slotProps} />
+	</div>
+{/if}
diff --git a/src/lib/bits/menu/components/MenuRadioIndicator.svelte b/src/lib/bits/menu/components/MenuRadioIndicator.svelte
new file mode 100644
index 000000000..b0c0a7baa
--- /dev/null
+++ b/src/lib/bits/menu/components/MenuRadioIndicator.svelte
@@ -0,0 +1,8 @@
+<script lang="ts">
+	import { getRadioIndicator } from "../ctx.js";
+	const { isChecked, value } = getRadioIndicator();
+</script>
+
+{#if $isChecked(value)}
+	<slot />
+{/if}
diff --git a/src/lib/bits/menu/components/MenuRadioItem.svelte b/src/lib/bits/menu/components/MenuRadioItem.svelte
new file mode 100644
index 000000000..2d065f2dc
--- /dev/null
+++ b/src/lib/bits/menu/components/MenuRadioItem.svelte
@@ -0,0 +1,46 @@
+<script lang="ts">
+	import { melt } from "@melt-ui/svelte";
+	import { setRadioItem, getAttrs } from "../ctx.js";
+	import type { RadioItemEvents, RadioItemProps } from "../types.js";
+	import { createDispatcher } from "$lib/internal/events.js";
+
+	type $$Props = RadioItemProps;
+	type $$Events = RadioItemEvents;
+	export let value: $$Props["value"];
+	export let disabled = false;
+	export let asChild: $$Props["asChild"] = false;
+
+	const {
+		elements: { radioItem }
+	} = setRadioItem(value);
+
+	const attrs = getAttrs("radio-item");
+
+	const dispatch = createDispatcher();
+
+	$: builder = $radioItem({ value, disabled });
+
+	$: slotProps = {
+		builder,
+		attrs
+	};
+</script>
+
+{#if asChild}
+	<slot {...slotProps} />
+{:else}
+	<div
+		use:melt={builder}
+		{...$$restProps}
+		{...attrs}
+		on:m-click={dispatch}
+		on:m-focusin={dispatch}
+		on:m-focusout={dispatch}
+		on:m-keydown={dispatch}
+		on:m-pointerdown={dispatch}
+		on:m-pointerleave={dispatch}
+		on:m-pointermove={dispatch}
+	>
+		<slot {...slotProps} />
+	</div>
+{/if}
diff --git a/src/lib/bits/menu/components/MenuSeparator.svelte b/src/lib/bits/menu/components/MenuSeparator.svelte
new file mode 100644
index 000000000..a7adfef80
--- /dev/null
+++ b/src/lib/bits/menu/components/MenuSeparator.svelte
@@ -0,0 +1,27 @@
+<script lang="ts">
+	import { melt } from "@melt-ui/svelte";
+	import { getCtx, getAttrs } from "../ctx.js";
+	import type { SeparatorProps } from "../types.js";
+
+	type $$Props = SeparatorProps;
+
+	export let asChild: $$Props["asChild"] = false;
+
+	const {
+		elements: { separator }
+	} = getCtx();
+
+	const attrs = getAttrs("separator");
+
+	$: builder = $separator;
+	$: slotProps = {
+		builder,
+		attrs
+	};
+</script>
+
+{#if asChild}
+	<slot {...slotProps} />
+{:else}
+	<div use:melt={$separator} {...$$restProps} {...attrs} />
+{/if}
diff --git a/src/lib/bits/menu/components/MenuSub.svelte b/src/lib/bits/menu/components/MenuSub.svelte
new file mode 100644
index 000000000..5a837512d
--- /dev/null
+++ b/src/lib/bits/menu/components/MenuSub.svelte
@@ -0,0 +1,42 @@
+<script lang="ts">
+	import { derived } from "svelte/store";
+	import { setSubMenuCtx } from "../ctx.js";
+	import type { SubProps } from "../types.js";
+	type $$Props = SubProps;
+
+	export let positioning: $$Props["positioning"] = undefined;
+	export let disabled: $$Props["disabled"] = undefined;
+	export let open: $$Props["open"] = undefined;
+	export let onOpenChange: $$Props["onOpenChange"] = undefined;
+
+	const {
+		updateOption,
+		ids,
+		states: { subOpen }
+	} = setSubMenuCtx({
+		positioning,
+		disabled,
+		onOpenChange: ({ next }) => {
+			if (open !== next) {
+				onOpenChange?.(next);
+				open = next;
+			}
+			return next;
+		}
+	});
+
+	const idValues = derived(
+		[ids.menu, ids.trigger],
+		([$menuId, $triggerId]) => ({
+			menu: $menuId,
+			trigger: $triggerId
+		})
+	);
+
+	$: open !== undefined && subOpen.set(open);
+
+	$: updateOption("positioning", positioning);
+	$: updateOption("disabled", disabled);
+</script>
+
+<slot subIds={$idValues} />
diff --git a/src/lib/bits/menu/components/MenuSubContent.svelte b/src/lib/bits/menu/components/MenuSubContent.svelte
new file mode 100644
index 000000000..3bafefb93
--- /dev/null
+++ b/src/lib/bits/menu/components/MenuSubContent.svelte
@@ -0,0 +1,124 @@
+<script lang="ts">
+	import { melt } from "@melt-ui/svelte";
+	import { createDispatcher, type Transition } from "$lib/internal/index.js";
+	import { getAttrs, getSubMenuCtx, updateSubPositioning } from "../ctx.js";
+	import type { SubContentEvents, SubContentProps } from "../types.js";
+
+	type T = $$Generic<Transition>;
+	type In = $$Generic<Transition>;
+	type Out = $$Generic<Transition>;
+	type $$Props = SubContentProps<T, In, Out>;
+	type $$Events = SubContentEvents;
+
+	export let transition: $$Props["transition"] = undefined;
+	export let transitionConfig: $$Props["transitionConfig"] = undefined;
+	export let inTransition: $$Props["inTransition"] = undefined;
+	export let inTransitionConfig: $$Props["inTransitionConfig"] = undefined;
+	export let outTransition: $$Props["outTransition"] = undefined;
+	export let outTransitionConfig: $$Props["outTransitionConfig"] = undefined;
+	export let asChild: $$Props["asChild"] = false;
+	export let id: $$Props["id"] = undefined;
+	export let side: $$Props["side"] = "top";
+	export let align: $$Props["align"] = "center";
+	export let sideOffset: $$Props["sideOffset"] = 0;
+	export let alignOffset: $$Props["alignOffset"] = 0;
+	export let collisionPadding: $$Props["collisionPadding"] = 8;
+	export let avoidCollisions: $$Props["avoidCollisions"] = true;
+	export let collisionBoundary: $$Props["collisionBoundary"] = undefined;
+	export let sameWidth: $$Props["sameWidth"] = false;
+	export let fitViewport: $$Props["fitViewport"] = false;
+
+	const {
+		elements: { subMenu },
+		states: { subOpen },
+		ids
+	} = getSubMenuCtx();
+
+	const dispatch = createDispatcher();
+	const attrs = getAttrs("sub-content");
+
+	$: if (id) {
+		ids.menu.set(id);
+	}
+	$: builder = $subMenu;
+	$: slotProps = {
+		builder,
+		attrs
+	};
+
+	$: updateSubPositioning({
+		side,
+		align,
+		sideOffset,
+		alignOffset,
+		collisionPadding,
+		avoidCollisions,
+		collisionBoundary,
+		sameWidth,
+		fitViewport
+	});
+</script>
+
+{#if asChild && $subOpen}
+	<slot {...slotProps} />
+{:else if transition && $subOpen}
+	<div
+		transition:transition={transitionConfig}
+		use:melt={builder}
+		{...$$restProps}
+		{...attrs}
+		on:m-focusout={dispatch}
+		on:m-keydown={dispatch}
+		on:m-pointermove={dispatch}
+	>
+		<slot {...slotProps} />
+	</div>
+{:else if inTransition && outTransition && $subOpen}
+	<div
+		in:inTransition={inTransitionConfig}
+		out:outTransition={outTransitionConfig}
+		use:melt={builder}
+		{...$$restProps}
+		{...attrs}
+		on:m-focusout={dispatch}
+		on:m-keydown={dispatch}
+		on:m-pointermove={dispatch}
+	>
+		<slot {...slotProps} />
+	</div>
+{:else if inTransition && $subOpen}
+	<div
+		in:inTransition={inTransitionConfig}
+		use:melt={builder}
+		{...$$restProps}
+		{...attrs}
+		on:m-focusout={dispatch}
+		on:m-keydown={dispatch}
+		on:m-pointermove={dispatch}
+	>
+		<slot {...slotProps} />
+	</div>
+{:else if outTransition && $subOpen}
+	<div
+		out:outTransition={outTransitionConfig}
+		use:melt={builder}
+		{...$$restProps}
+		{...attrs}
+		on:m-focusout={dispatch}
+		on:m-keydown={dispatch}
+		on:m-pointermove={dispatch}
+	>
+		<slot {...slotProps} />
+	</div>
+{:else if $subOpen}
+	<div
+		use:melt={builder}
+		{...$$restProps}
+		{...attrs}
+		on:m-focusout={dispatch}
+		on:m-keydown={dispatch}
+		on:m-pointermove={dispatch}
+	>
+		<slot {...slotProps} />
+	</div>
+{/if}
diff --git a/src/lib/bits/menu/components/MenuSubTrigger.svelte b/src/lib/bits/menu/components/MenuSubTrigger.svelte
new file mode 100644
index 000000000..13bbea60a
--- /dev/null
+++ b/src/lib/bits/menu/components/MenuSubTrigger.svelte
@@ -0,0 +1,51 @@
+<script lang="ts">
+	import { melt } from "@melt-ui/svelte";
+	import { disabledAttrs } from "$lib/internal/index.js";
+	import { getSubTrigger, getAttrs } from "../ctx.js";
+	import type { SubTriggerEvents, SubTriggerProps } from "../types.js";
+	import { createDispatcher } from "$lib/internal/events.js";
+
+	type $$Props = SubTriggerProps & {
+		disabled?: boolean;
+	};
+	type $$Events = SubTriggerEvents;
+	export let disabled: $$Props["disabled"] = false;
+	export let asChild: $$Props["asChild"] = false;
+	export let id: $$Props["id"] = undefined;
+
+	const {
+		elements: { subTrigger },
+		ids
+	} = getSubTrigger();
+
+	const dispatch = createDispatcher();
+
+	$: if (id) {
+		ids.trigger.set(id);
+	}
+
+	$: builder = $subTrigger;
+	$: attrs = { ...getAttrs("sub-trigger"), ...disabledAttrs(disabled) };
+	$: slotProps = {
+		builder,
+		attrs
+	};
+</script>
+
+{#if asChild}
+	<slot {...slotProps} />
+{:else}
+	<div
+		use:melt={builder}
+		{...$$restProps}
+		{...attrs}
+		on:m-click={dispatch}
+		on:m-focusin={dispatch}
+		on:m-focusout={dispatch}
+		on:m-keydown={dispatch}
+		on:m-pointerleave={dispatch}
+		on:m-pointermove={dispatch}
+	>
+		<slot {...slotProps} />
+	</div>
+{/if}
diff --git a/src/lib/bits/menu/components/MenuTrigger.svelte b/src/lib/bits/menu/components/MenuTrigger.svelte
new file mode 100644
index 000000000..662c81191
--- /dev/null
+++ b/src/lib/bits/menu/components/MenuTrigger.svelte
@@ -0,0 +1,44 @@
+<script lang="ts">
+	import { melt } from "@melt-ui/svelte";
+	import { getCtx, getAttrs } from "../ctx.js";
+	import type { TriggerEvents, TriggerProps } from "../types.js";
+	import { createDispatcher } from "$lib/internal/events.js";
+
+	type $$Props = TriggerProps;
+	type $$Events = TriggerEvents;
+
+	export let asChild: $$Props["asChild"] = false;
+	export let id: $$Props["id"] = undefined;
+
+	const {
+		elements: { trigger },
+		ids
+	} = getCtx();
+
+	const dispatch = createDispatcher();
+	const attrs = getAttrs("trigger");
+
+	$: if (id) {
+		ids.trigger.set(id);
+	}
+	$: builder = $trigger;
+	$: slotProps = {
+		builder,
+		attrs
+	};
+</script>
+
+{#if asChild}
+	<slot {...slotProps} />
+{:else}
+	<button
+		use:melt={builder}
+		type="button"
+		{...$$restProps}
+		{...attrs}
+		on:m-keydown={dispatch}
+		on:m-pointerdown={dispatch}
+	>
+		<slot {...slotProps} />
+	</button>
+{/if}
diff --git a/src/lib/bits/menu/ctx.ts b/src/lib/bits/menu/ctx.ts
new file mode 100644
index 000000000..38bcb1725
--- /dev/null
+++ b/src/lib/bits/menu/ctx.ts
@@ -0,0 +1,166 @@
+import {
+	createBitAttrs,
+	generateId,
+	getOptionUpdater,
+	removeUndefined
+} from "$lib/internal/index.js";
+import type {
+	ContextMenu as ContextMenuReturn,
+	ContextMenuRadioGroup as ContextRadioGroupReturn,
+	ContextMenuSubmenu as ContextSubmenuReturn,
+	Checkbox as CheckboxReturn,
+	CreateContextMenuCheckboxItemProps as ContextCheckboxItemProps,
+	CreateContextMenuRadioGroupProps,
+	CreateContextSubmenuProps
+} from "@melt-ui/svelte";
+import { getContext, setContext } from "svelte";
+import type { Readable, Writable } from "svelte/store";
+import { getPositioningUpdater, type PositioningProps } from "../floating/helpers.js";
+
+const NAME = "menu";
+const SUB_NAME = "menu-submenu";
+const RADIO_GROUP_NAME = "menu-radiogroup";
+const CHECKBOX_ITEM_NAME = "menu-checkboxitem";
+const RADIO_ITEM_NAME = "menu-radioitem";
+const GROUP_NAME = "menu-group";
+
+const PARTS = [
+	"arrow",
+	"checkbox-indicator",
+	"checkbox-item",
+	"content",
+	"group",
+	"item",
+	"label",
+	"radio-group",
+	"radio-item",
+	"separator",
+	"sub-content",
+	"sub-trigger",
+	"trigger"
+] as const;
+
+export const getAttrs = createBitAttrs("menu", PARTS);
+
+type GetReturn = ContextMenuReturn;
+type GetSubReturn = ContextSubmenuReturn;
+type GetRadioReturn = ContextRadioGroupReturn;
+
+export function getCtx() {
+	return getContext<GetReturn>(NAME);
+}
+
+export function setSubMenuCtx(props: CreateContextSubmenuProps) {
+	const {
+		builders: { createSubmenu }
+	} = getCtx();
+	const sub = createSubmenu(removeUndefined(props));
+	setContext(SUB_NAME, sub);
+	return {
+		...sub,
+		updateOption: getOptionUpdater(sub.options)
+	};
+}
+
+export function getSubMenuCtx() {
+	return getContext<GetSubReturn>(SUB_NAME);
+}
+
+export function setRadioGroupCtx(props: CreateContextMenuRadioGroupProps) {
+	const {
+		builders: { createMenuRadioGroup }
+	} = getCtx();
+	const radioGroup = createMenuRadioGroup(removeUndefined(props));
+	setContext(RADIO_GROUP_NAME, radioGroup);
+	return radioGroup;
+}
+
+function getRadioGroupCtx() {
+	return getContext<GetRadioReturn>(RADIO_GROUP_NAME);
+}
+
+export function setRadioItem(value: string) {
+	const radioGroup = getRadioGroupCtx();
+	setContext(RADIO_ITEM_NAME, {
+		isChecked: radioGroup.helpers.isChecked,
+		value
+	});
+	return radioGroup;
+}
+
+export function getRadioIndicator() {
+	return getContext<{
+		isChecked: Readable<(itemValue: string) => boolean>;
+		value: string;
+	}>(RADIO_ITEM_NAME);
+}
+
+export function setCheckboxItem(props: ContextCheckboxItemProps) {
+	const {
+		builders: { createCheckboxItem }
+	} = getCtx();
+	const checkboxItem = createCheckboxItem(removeUndefined(props));
+	setContext(CHECKBOX_ITEM_NAME, checkboxItem.states.checked);
+
+	return {
+		...checkboxItem,
+		updateOption: getOptionUpdater(checkboxItem.options)
+	};
+}
+
+export function getCheckboxIndicator() {
+	return getContext<CheckboxReturn["states"]["checked"]>(CHECKBOX_ITEM_NAME);
+}
+
+export function setGroup() {
+	const {
+		elements: { group }
+	} = getCtx();
+	const id = generateId();
+	setContext(GROUP_NAME, id);
+	return { group, id };
+}
+
+export function getGroupLabel() {
+	const id = getContext<string>(GROUP_NAME) ?? generateId();
+	const {
+		elements: { groupLabel }
+	} = getCtx();
+	return { groupLabel, id };
+}
+
+export function setArrow(size = 8) {
+	const menu = getCtx();
+	menu.options.arrowSize.set(size);
+	return menu;
+}
+
+const defaultPlacement = {
+	side: "bottom",
+	align: "center"
+} satisfies PositioningProps;
+
+export function updatePositioning(props: PositioningProps) {
+	const withDefaults = { ...defaultPlacement, ...props } satisfies PositioningProps;
+	const {
+		options: { positioning }
+	} = getCtx();
+
+	const updater = getPositioningUpdater(positioning as Writable<FloatingConfig>);
+	updater(withDefaults);
+}
+
+const defaultSubPlacement = {
+	side: "right",
+	align: "start"
+} satisfies PositioningProps;
+
+export function updateSubPositioning(props: PositioningProps) {
+	const withDefaults = { ...defaultSubPlacement, ...props } satisfies PositioningProps;
+	const {
+		options: { positioning }
+	} = getCtx();
+
+	const updater = getPositioningUpdater(positioning as Writable<FloatingConfig>);
+	updater(withDefaults);
+}
diff --git a/src/lib/bits/menu/types.ts b/src/lib/bits/menu/types.ts
index f99d6435f..15eecfcd2 100644
--- a/src/lib/bits/menu/types.ts
+++ b/src/lib/bits/menu/types.ts
@@ -3,10 +3,11 @@
  * such as `DropdownMenu`, `Menubar` & `ContextMenu`.
  */
 
-import type { Transition, HTMLDivAttributes } from "$lib/internal/index.js";
+import type { HTMLDivAttributes } from "$lib/internal/index.js";
 import type { CustomEventHandler } from "$lib";
 import type { HTMLAnchorAttributes, HTMLButtonAttributes } from "svelte/elements";
 import type * as I from "$lib/bits/menu/_types.js";
+import type { ContentProps } from "$lib/bits/floating/types.js";
 
 type Props = I.Props;
 
@@ -16,12 +17,6 @@ type RadioGroupProps = I.RadioGroupProps & HTMLDivAttributes;
 
 type RadioItemProps = I.RadioItemProps & HTMLDivAttributes;
 
-type ContentProps<
-	T extends Transition = Transition,
-	In extends Transition = Transition,
-	Out extends Transition = Transition
-> = I.ContentProps<T, In, Out> & HTMLDivAttributes;
-
 type GroupProps = I.GroupProps & HTMLDivAttributes;
 
 type AnchorElement = HTMLAnchorAttributes & {
@@ -42,12 +37,6 @@ type SeparatorProps = I.SeparatorProps & HTMLDivAttributes;
 
 type SubProps = I.SubProps;
 
-type SubContentProps<
-	T extends Transition = Transition,
-	In extends Transition = Transition,
-	Out extends Transition = Transition
-> = I.SubContentProps<T, In, Out> & HTMLDivAttributes;
-
 type SubTriggerProps = I.SubTriggerProps & HTMLDivAttributes;
 
 // Trigger for context menu
@@ -116,7 +105,7 @@ export type {
 	RadioItemProps,
 	SeparatorProps,
 	SubProps,
-	SubContentProps,
+	ContentProps as SubContentProps,
 	SubTriggerProps,
 	ContextTriggerProps,
 	DropdownTriggerProps,
diff --git a/src/lib/internal/types.ts b/src/lib/internal/types.ts
index 771c72b90..63a9590f2 100644
--- a/src/lib/internal/types.ts
+++ b/src/lib/internal/types.ts
@@ -19,7 +19,9 @@ export type OmitPressed<T> = Omit<T, "pressed" | "defaultPressed" | "onPressedCh
 export type OmitForceVisible<T> = Omit<T, "forceVisible">;
 export type OmitIds<T> = Omit<T, "ids">;
 
-export type OmitFloating<T> = OmitOpen<Omit<T, "forceVisible" | "ids" | "arrowSize">>;
+export type OmitFloating<T> = OmitOpen<
+	Omit<T, "forceVisible" | "ids" | "arrowSize" | "positioning">
+>;
 
 export type OnChangeFn<T> = (value: T) => void;
 

From 65cab94461b4062fc6708d9e0a61cf43b30a3246 Mon Sep 17 00:00:00 2001
From: Hunter Johnston <johnstonhuntera@gmail.com>
Date: Sun, 19 Nov 2023 21:01:48 -0500
Subject: [PATCH 071/217] more things

---
 .../api-ref/prop-type-content.svelte          |   4 +-
 .../components/ContextMenu.svelte             |   3 -
 .../components/ContextMenuArrow.svelte        |  28 ----
 .../ContextMenuCheckboxIndicator.svelte       |  26 ---
 .../components/ContextMenuCheckboxItem.svelte |  58 -------
 .../components/ContextMenuGroup.svelte        |  27 ----
 .../components/ContextMenuItem.svelte         |  44 -----
 .../components/ContextMenuLabel.svelte        |  27 ----
 .../components/ContextMenuRadioGroup.svelte   |  40 -----
 .../ContextMenuRadioIndicator.svelte          |   8 -
 .../components/ContextMenuRadioItem.svelte    |  43 -----
 .../components/ContextMenuSeparator.svelte    |  26 ---
 .../components/ContextMenuSub.svelte          |  42 -----
 .../components/ContextMenuSubContent.svelte   | 106 ------------
 .../components/ContextMenuSubTrigger.svelte   |  53 ------
 .../components/ContextMenuTrigger.svelte      |   1 -
 src/lib/bits/context-menu/ctx.ts              | 130 +--------------
 src/lib/bits/context-menu/index.ts            |  26 +--
 .../components/DropdownMenuArrow.svelte       |  29 ----
 .../DropdownMenuCheckboxIndicator.svelte      |  25 ---
 .../DropdownMenuCheckboxItem.svelte           |  60 -------
 .../components/DropdownMenuContent.svelte     | 110 -------------
 .../components/DropdownMenuGroup.svelte       |  24 ---
 .../components/DropdownMenuItem.svelte        |  48 ------
 .../components/DropdownMenuLabel.svelte       |  26 ---
 .../components/DropdownMenuRadioGroup.svelte  |  42 -----
 .../DropdownMenuRadioIndicator.svelte         |   8 -
 .../components/DropdownMenuRadioItem.svelte   |  46 ------
 .../components/DropdownMenuSeparator.svelte   |  27 ----
 .../components/DropdownMenuSub.svelte         |  42 -----
 .../components/DropdownMenuSubContent.svelte  | 105 ------------
 .../components/DropdownMenuSubTrigger.svelte  |  51 ------
 .../components/DropdownMenuTrigger.svelte     |  44 -----
 src/lib/bits/dropdown-menu/ctx.ts             | 152 ------------------
 src/lib/bits/dropdown-menu/index.ts           |  32 ++--
 .../components/LinkPreview.svelte             |   3 -
 .../components/LinkPreviewContent.svelte      |  23 ++-
 src/lib/bits/link-preview/ctx.ts              |  19 +++
 .../components/Menu.svelte}                   |   3 -
 src/lib/bits/menu/components/MenuSub.svelte   |   4 +-
 .../menu/components/MenuSubContent.svelte     |   4 +-
 .../bits/menu/components/MenuTrigger.svelte   |   9 +-
 src/lib/bits/menu/ctx.ts                      |  75 +++++----
 src/lib/bits/menu/index.ts                    |  17 ++
 .../menubar/components/MenubarArrow.svelte    |  27 ----
 .../MenubarCheckboxIndicator.svelte           |  24 ---
 .../components/MenubarCheckboxItem.svelte     |  58 -------
 .../menubar/components/MenubarContent.svelte  |  89 ----------
 .../menubar/components/MenubarGroup.svelte    |  26 ---
 .../menubar/components/MenubarItem.svelte     |  44 -----
 .../menubar/components/MenubarLabel.svelte    |  26 ---
 .../menubar/components/MenubarMenu.svelte     |   3 -
 .../components/MenubarRadioGroup.svelte       |  42 -----
 .../components/MenubarRadioIndicator.svelte   |   8 -
 .../components/MenubarRadioItem.svelte        |  45 ------
 .../components/MenubarSeparator.svelte        |  27 ----
 .../bits/menubar/components/MenubarSub.svelte |   3 -
 .../components/MenubarSubContent.svelte       | 103 ------------
 .../components/MenubarSubTrigger.svelte       |  49 ------
 src/lib/bits/menubar/ctx.ts                   | 109 ++++---------
 src/lib/bits/menubar/index.ts                 |  26 +--
 .../bits/popover/components/Popover.svelte    |   3 -
 src/lib/bits/select/components/Select.svelte  |   3 -
 .../select/components/SelectContent.svelte    |  23 ++-
 src/lib/bits/select/ctx.ts                    |  18 +++
 .../bits/tooltip/components/Tooltip.svelte    |   3 -
 66 files changed, 227 insertions(+), 2252 deletions(-)
 delete mode 100644 src/lib/bits/context-menu/components/ContextMenuArrow.svelte
 delete mode 100644 src/lib/bits/context-menu/components/ContextMenuCheckboxIndicator.svelte
 delete mode 100644 src/lib/bits/context-menu/components/ContextMenuCheckboxItem.svelte
 delete mode 100644 src/lib/bits/context-menu/components/ContextMenuGroup.svelte
 delete mode 100644 src/lib/bits/context-menu/components/ContextMenuItem.svelte
 delete mode 100644 src/lib/bits/context-menu/components/ContextMenuLabel.svelte
 delete mode 100644 src/lib/bits/context-menu/components/ContextMenuRadioGroup.svelte
 delete mode 100644 src/lib/bits/context-menu/components/ContextMenuRadioIndicator.svelte
 delete mode 100644 src/lib/bits/context-menu/components/ContextMenuRadioItem.svelte
 delete mode 100644 src/lib/bits/context-menu/components/ContextMenuSeparator.svelte
 delete mode 100644 src/lib/bits/context-menu/components/ContextMenuSub.svelte
 delete mode 100644 src/lib/bits/context-menu/components/ContextMenuSubContent.svelte
 delete mode 100644 src/lib/bits/context-menu/components/ContextMenuSubTrigger.svelte
 delete mode 100644 src/lib/bits/dropdown-menu/components/DropdownMenuArrow.svelte
 delete mode 100644 src/lib/bits/dropdown-menu/components/DropdownMenuCheckboxIndicator.svelte
 delete mode 100644 src/lib/bits/dropdown-menu/components/DropdownMenuCheckboxItem.svelte
 delete mode 100644 src/lib/bits/dropdown-menu/components/DropdownMenuContent.svelte
 delete mode 100644 src/lib/bits/dropdown-menu/components/DropdownMenuGroup.svelte
 delete mode 100644 src/lib/bits/dropdown-menu/components/DropdownMenuItem.svelte
 delete mode 100644 src/lib/bits/dropdown-menu/components/DropdownMenuLabel.svelte
 delete mode 100644 src/lib/bits/dropdown-menu/components/DropdownMenuRadioGroup.svelte
 delete mode 100644 src/lib/bits/dropdown-menu/components/DropdownMenuRadioIndicator.svelte
 delete mode 100644 src/lib/bits/dropdown-menu/components/DropdownMenuRadioItem.svelte
 delete mode 100644 src/lib/bits/dropdown-menu/components/DropdownMenuSeparator.svelte
 delete mode 100644 src/lib/bits/dropdown-menu/components/DropdownMenuSub.svelte
 delete mode 100644 src/lib/bits/dropdown-menu/components/DropdownMenuSubContent.svelte
 delete mode 100644 src/lib/bits/dropdown-menu/components/DropdownMenuSubTrigger.svelte
 delete mode 100644 src/lib/bits/dropdown-menu/components/DropdownMenuTrigger.svelte
 delete mode 100644 src/lib/bits/dropdown-menu/ctx.ts
 rename src/lib/bits/{dropdown-menu/components/DropdownMenu.svelte => menu/components/Menu.svelte} (93%)
 delete mode 100644 src/lib/bits/menubar/components/MenubarArrow.svelte
 delete mode 100644 src/lib/bits/menubar/components/MenubarCheckboxIndicator.svelte
 delete mode 100644 src/lib/bits/menubar/components/MenubarCheckboxItem.svelte
 delete mode 100644 src/lib/bits/menubar/components/MenubarContent.svelte
 delete mode 100644 src/lib/bits/menubar/components/MenubarGroup.svelte
 delete mode 100644 src/lib/bits/menubar/components/MenubarItem.svelte
 delete mode 100644 src/lib/bits/menubar/components/MenubarLabel.svelte
 delete mode 100644 src/lib/bits/menubar/components/MenubarRadioGroup.svelte
 delete mode 100644 src/lib/bits/menubar/components/MenubarRadioIndicator.svelte
 delete mode 100644 src/lib/bits/menubar/components/MenubarRadioItem.svelte
 delete mode 100644 src/lib/bits/menubar/components/MenubarSeparator.svelte
 delete mode 100644 src/lib/bits/menubar/components/MenubarSubContent.svelte
 delete mode 100644 src/lib/bits/menubar/components/MenubarSubTrigger.svelte

diff --git a/src/components/api-ref/prop-type-content.svelte b/src/components/api-ref/prop-type-content.svelte
index 5640fe6ed..68f3ee6fc 100644
--- a/src/components/api-ref/prop-type-content.svelte
+++ b/src/components/api-ref/prop-type-content.svelte
@@ -13,7 +13,7 @@
 		<Code class="bg-transparent px-0">{type}</Code>
 	{:else}
 		<Code class="bg-transparent px-0">{type.type}</Code>
-		<Popover.Root positioning={{ placement: "top", gutter: 8 }}>
+		<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"
 			>
@@ -21,6 +21,8 @@
 				<span class="sr-only">See type definition</span>
 			</Popover.Trigger>
 			<Popover.Content
+				side="top"
+				sideOffset={8}
 				transition={flyAndScale}
 				transitionConfig={{ y: 8 }}
 				class="z-50 max-h-[400px] overflow-auto rounded-input border border-border bg-background p-4 shadow-popover"
diff --git a/src/lib/bits/context-menu/components/ContextMenu.svelte b/src/lib/bits/context-menu/components/ContextMenu.svelte
index 924bfa27a..fdb8dacfd 100644
--- a/src/lib/bits/context-menu/components/ContextMenu.svelte
+++ b/src/lib/bits/context-menu/components/ContextMenu.svelte
@@ -10,7 +10,6 @@
 	export let open: $$Props["open"] = undefined;
 	export let onOpenChange: $$Props["onOpenChange"] = undefined;
 	export let preventScroll: $$Props["preventScroll"] = undefined;
-	export let positioning: $$Props["positioning"] = undefined;
 	export let loop: $$Props["loop"] = undefined;
 	export let dir: $$Props["dir"] = undefined;
 	export let typeahead: $$Props["typeahead"] = undefined;
@@ -29,7 +28,6 @@
 		forceVisible: true,
 		defaultOpen: open,
 		preventScroll,
-		positioning,
 		loop,
 		dir,
 		typeahead,
@@ -58,7 +56,6 @@
 	$: updateOption("closeOnEscape", closeOnEscape);
 	$: updateOption("portal", portal);
 	$: updateOption("preventScroll", preventScroll);
-	$: updateOption("positioning", positioning);
 	$: updateOption("loop", loop);
 	$: updateOption("dir", dir);
 	$: updateOption("closeFocus", closeFocus);
diff --git a/src/lib/bits/context-menu/components/ContextMenuArrow.svelte b/src/lib/bits/context-menu/components/ContextMenuArrow.svelte
deleted file mode 100644
index 08d6b1ece..000000000
--- a/src/lib/bits/context-menu/components/ContextMenuArrow.svelte
+++ /dev/null
@@ -1,28 +0,0 @@
-<script lang="ts">
-	import { melt } from "@melt-ui/svelte";
-	import { setArrow, getAttrs } from "../ctx.js";
-	import type { ArrowProps } from "../types.js";
-
-	type $$Props = ArrowProps;
-
-	export let size = 8;
-	export let asChild: $$Props["asChild"] = false;
-
-	const {
-		elements: { arrow }
-	} = setArrow(size);
-
-	const attrs = getAttrs("arrow");
-
-	$: builder = $arrow;
-	$: slotProps = {
-		builder,
-		attrs
-	};
-</script>
-
-{#if asChild}
-	<slot {...slotProps} />
-{:else}
-	<div use:melt={$arrow} {...$$restProps} {...attrs} />
-{/if}
diff --git a/src/lib/bits/context-menu/components/ContextMenuCheckboxIndicator.svelte b/src/lib/bits/context-menu/components/ContextMenuCheckboxIndicator.svelte
deleted file mode 100644
index e684ca015..000000000
--- a/src/lib/bits/context-menu/components/ContextMenuCheckboxIndicator.svelte
+++ /dev/null
@@ -1,26 +0,0 @@
-<script lang="ts">
-	import type { CheckboxItemIndicatorProps } from "../types.js";
-	import { getCheckboxIndicator, getAttrs } from "../ctx.js";
-
-	type $$Props = CheckboxItemIndicatorProps;
-
-	export let asChild: $$Props["asChild"] = false;
-
-	const checked = getCheckboxIndicator();
-	const attrs = getAttrs("checkbox-indicator");
-
-	$: slotProps = {
-		attrs,
-		checked: $checked
-	};
-</script>
-
-{#if asChild}
-	<slot {...slotProps} />
-{:else}
-	<div {...$$restProps} {...attrs}>
-		{#if $checked}
-			<slot {...slotProps} />
-		{/if}
-	</div>
-{/if}
diff --git a/src/lib/bits/context-menu/components/ContextMenuCheckboxItem.svelte b/src/lib/bits/context-menu/components/ContextMenuCheckboxItem.svelte
deleted file mode 100644
index 75150e190..000000000
--- a/src/lib/bits/context-menu/components/ContextMenuCheckboxItem.svelte
+++ /dev/null
@@ -1,58 +0,0 @@
-<script lang="ts">
-	import { melt } from "@melt-ui/svelte";
-	import { setCheckboxItem, getAttrs } from "../ctx.js";
-	import type { CheckboxItemEvents, CheckboxItemProps } from "../types.js";
-	import { createDispatcher } from "$lib/internal/events.js";
-
-	type $$Props = CheckboxItemProps;
-	type $$Events = CheckboxItemEvents;
-	export let checked: $$Props["checked"] = undefined;
-	export let disabled: $$Props["disabled"] = undefined;
-	export let onCheckedChange: $$Props["onCheckedChange"] = undefined;
-	export let asChild: $$Props["asChild"] = false;
-	const {
-		elements: { checkboxItem },
-		states: { checked: localChecked },
-		updateOption
-	} = setCheckboxItem({
-		disabled,
-		defaultChecked: checked,
-		onCheckedChange: ({ next }) => {
-			checked = next;
-			onCheckedChange?.(next);
-			return next;
-		}
-	});
-
-	const dispatch = createDispatcher();
-
-	$: checked !== undefined && localChecked.set(checked);
-	$: updateOption("disabled", disabled);
-	$: builder = $checkboxItem;
-	const attrs = getAttrs("checkbox-item");
-
-	$: slotProps = {
-		builder,
-		attrs
-	};
-</script>
-
-<!-- svelte-ignore a11y-no-static-element-interactions applied by melt's action/store -->
-{#if asChild}
-	<slot {...slotProps} />
-{:else}
-	<div
-		use:melt={builder}
-		{...$$restProps}
-		{...attrs}
-		on:m-click={dispatch}
-		on:m-focusin={dispatch}
-		on:m-focusout={dispatch}
-		on:m-keydown={dispatch}
-		on:m-pointerdown={dispatch}
-		on:m-pointerleave={dispatch}
-		on:m-pointermove={dispatch}
-	>
-		<slot {...slotProps} />
-	</div>
-{/if}
diff --git a/src/lib/bits/context-menu/components/ContextMenuGroup.svelte b/src/lib/bits/context-menu/components/ContextMenuGroup.svelte
deleted file mode 100644
index 59e7b8f24..000000000
--- a/src/lib/bits/context-menu/components/ContextMenuGroup.svelte
+++ /dev/null
@@ -1,27 +0,0 @@
-<script lang="ts">
-	import { melt } from "@melt-ui/svelte";
-	import { setGroup, getAttrs } from "../ctx.js";
-	import type { GroupProps } from "../types.js";
-
-	type $$Props = GroupProps;
-
-	export let asChild: $$Props["asChild"] = false;
-
-	const { group, id } = setGroup();
-
-	$: builder = $group(id);
-	const attrs = getAttrs("group");
-
-	$: slotProps = {
-		builder,
-		attrs
-	};
-</script>
-
-{#if asChild}
-	<slot {...slotProps} />
-{:else}
-	<div use:melt={builder} {...$$restProps} {...attrs}>
-		<slot {...slotProps} />
-	</div>
-{/if}
diff --git a/src/lib/bits/context-menu/components/ContextMenuItem.svelte b/src/lib/bits/context-menu/components/ContextMenuItem.svelte
deleted file mode 100644
index 3362e0dcc..000000000
--- a/src/lib/bits/context-menu/components/ContextMenuItem.svelte
+++ /dev/null
@@ -1,44 +0,0 @@
-<script lang="ts">
-	import { melt } from "@melt-ui/svelte";
-	import { getCtx, getAttrs } from "../ctx.js";
-	import type { ItemEvents, ItemProps } from "../types.js";
-	import { disabledAttrs } from "$lib/internal/index.js";
-	import { createDispatcher } from "$lib/internal/events.js";
-
-	type $$Props = ItemProps;
-	type $$Events = ItemEvents;
-
-	export let asChild: $$Props["asChild"] = false;
-	export let disabled: $$Props["disabled"] = false;
-	export let href: $$Props["href"] = undefined;
-
-	const {
-		elements: { item }
-	} = getCtx();
-
-	const dispatch = createDispatcher();
-
-	$: builder = $item;
-	$: attrs = { ...getAttrs("item"), ...disabledAttrs(disabled) };
-</script>
-
-{#if asChild}
-	<slot {builder} {attrs} />
-{:else}
-	<svelte:element
-		this={href ? "a" : "div"}
-		{href}
-		use:melt={builder}
-		{...$$restProps}
-		{...attrs}
-		on:m-click={dispatch}
-		on:m-focusin={dispatch}
-		on:m-focusout={dispatch}
-		on:m-keydown={dispatch}
-		on:m-pointerdown={dispatch}
-		on:m-pointerleave={dispatch}
-		on:m-pointermove={dispatch}
-	>
-		<slot {builder} {attrs} />
-	</svelte:element>
-{/if}
diff --git a/src/lib/bits/context-menu/components/ContextMenuLabel.svelte b/src/lib/bits/context-menu/components/ContextMenuLabel.svelte
deleted file mode 100644
index 486e4d585..000000000
--- a/src/lib/bits/context-menu/components/ContextMenuLabel.svelte
+++ /dev/null
@@ -1,27 +0,0 @@
-<script lang="ts">
-	import { melt } from "@melt-ui/svelte";
-	import { getGroupLabel, getAttrs } from "../ctx.js";
-	import type { LabelProps } from "../types.js";
-
-	type $$Props = LabelProps;
-
-	export let asChild: $$Props["asChild"] = false;
-
-	const { groupLabel, id } = getGroupLabel();
-	const attrs = getAttrs("label");
-
-	$: builder = $groupLabel(id);
-
-	$: slotProps = {
-		builder,
-		attrs
-	};
-</script>
-
-{#if asChild}
-	<slot {...slotProps} />
-{:else}
-	<div use:melt={builder} {...$$restProps} {...attrs}>
-		<slot {...slotProps} />
-	</div>
-{/if}
diff --git a/src/lib/bits/context-menu/components/ContextMenuRadioGroup.svelte b/src/lib/bits/context-menu/components/ContextMenuRadioGroup.svelte
deleted file mode 100644
index 097302868..000000000
--- a/src/lib/bits/context-menu/components/ContextMenuRadioGroup.svelte
+++ /dev/null
@@ -1,40 +0,0 @@
-<script lang="ts">
-	import { melt } from "@melt-ui/svelte";
-	import { setRadioGroupCtx, getAttrs } from "../ctx.js";
-	import type { RadioGroupProps } from "../types.js";
-
-	type $$Props = RadioGroupProps;
-	export let value: $$Props["value"] = undefined;
-	export let onValueChange: $$Props["onValueChange"] = undefined;
-	export let asChild: $$Props["asChild"] = false;
-
-	const {
-		elements: { radioGroup },
-		states: { value: localValue }
-	} = setRadioGroupCtx({
-		defaultValue: value,
-		onValueChange: ({ next }) => {
-			if (next) {
-				onValueChange?.(next);
-				value = next;
-			}
-			return next;
-		}
-	});
-	const attrs = getAttrs("radio-group");
-
-	$: value !== undefined && localValue.set(value);
-	$: builder = $radioGroup;
-	$: slotProps = {
-		builder,
-		attrs
-	};
-</script>
-
-{#if asChild}
-	<slot {...slotProps} />
-{:else}
-	<div use:melt={builder} {...$$restProps} {...attrs}>
-		<slot {...slotProps} />
-	</div>
-{/if}
diff --git a/src/lib/bits/context-menu/components/ContextMenuRadioIndicator.svelte b/src/lib/bits/context-menu/components/ContextMenuRadioIndicator.svelte
deleted file mode 100644
index b0c0a7baa..000000000
--- a/src/lib/bits/context-menu/components/ContextMenuRadioIndicator.svelte
+++ /dev/null
@@ -1,8 +0,0 @@
-<script lang="ts">
-	import { getRadioIndicator } from "../ctx.js";
-	const { isChecked, value } = getRadioIndicator();
-</script>
-
-{#if $isChecked(value)}
-	<slot />
-{/if}
diff --git a/src/lib/bits/context-menu/components/ContextMenuRadioItem.svelte b/src/lib/bits/context-menu/components/ContextMenuRadioItem.svelte
deleted file mode 100644
index fe227105a..000000000
--- a/src/lib/bits/context-menu/components/ContextMenuRadioItem.svelte
+++ /dev/null
@@ -1,43 +0,0 @@
-<script lang="ts">
-	import { melt } from "@melt-ui/svelte";
-	import { setRadioItem, getAttrs } from "../ctx.js";
-	import type { RadioItemEvents, RadioItemProps } from "../types.js";
-	import { createDispatcher } from "$lib/internal/events.js";
-
-	type $$Props = RadioItemProps;
-	type $$Events = RadioItemEvents;
-	export let value: $$Props["value"];
-	export let disabled = false;
-	export let asChild: $$Props["asChild"] = false;
-	const {
-		elements: { radioItem }
-	} = setRadioItem(value);
-
-	const dispatch = createDispatcher();
-	const attrs = getAttrs("radio-item");
-
-	$: builder = $radioItem({ value, disabled });
-	$: slotProps = {
-		builder,
-		attrs
-	};
-</script>
-
-{#if asChild}
-	<slot {...slotProps} />
-{:else}
-	<div
-		use:melt={builder}
-		{...$$restProps}
-		{...attrs}
-		on:m-click={dispatch}
-		on:m-focusin={dispatch}
-		on:m-focusout={dispatch}
-		on:m-keydown={dispatch}
-		on:m-pointerdown={dispatch}
-		on:m-pointerleave={dispatch}
-		on:m-pointermove={dispatch}
-	>
-		<slot {...slotProps} />
-	</div>
-{/if}
diff --git a/src/lib/bits/context-menu/components/ContextMenuSeparator.svelte b/src/lib/bits/context-menu/components/ContextMenuSeparator.svelte
deleted file mode 100644
index a03879bd3..000000000
--- a/src/lib/bits/context-menu/components/ContextMenuSeparator.svelte
+++ /dev/null
@@ -1,26 +0,0 @@
-<script lang="ts">
-	import { melt } from "@melt-ui/svelte";
-	import { getCtx, getAttrs } from "../ctx.js";
-	import type { SeparatorProps } from "../types.js";
-
-	type $$Props = SeparatorProps;
-
-	export let asChild: $$Props["asChild"] = false;
-
-	const {
-		elements: { separator }
-	} = getCtx();
-	const attrs = getAttrs("separator");
-
-	$: builder = $separator;
-	$: slotProps = {
-		builder,
-		attrs
-	};
-</script>
-
-{#if asChild}
-	<slot {...slotProps} />
-{:else}
-	<div use:melt={$separator} {...$$restProps} {...attrs} />
-{/if}
diff --git a/src/lib/bits/context-menu/components/ContextMenuSub.svelte b/src/lib/bits/context-menu/components/ContextMenuSub.svelte
deleted file mode 100644
index 5a837512d..000000000
--- a/src/lib/bits/context-menu/components/ContextMenuSub.svelte
+++ /dev/null
@@ -1,42 +0,0 @@
-<script lang="ts">
-	import { derived } from "svelte/store";
-	import { setSubMenuCtx } from "../ctx.js";
-	import type { SubProps } from "../types.js";
-	type $$Props = SubProps;
-
-	export let positioning: $$Props["positioning"] = undefined;
-	export let disabled: $$Props["disabled"] = undefined;
-	export let open: $$Props["open"] = undefined;
-	export let onOpenChange: $$Props["onOpenChange"] = undefined;
-
-	const {
-		updateOption,
-		ids,
-		states: { subOpen }
-	} = setSubMenuCtx({
-		positioning,
-		disabled,
-		onOpenChange: ({ next }) => {
-			if (open !== next) {
-				onOpenChange?.(next);
-				open = next;
-			}
-			return next;
-		}
-	});
-
-	const idValues = derived(
-		[ids.menu, ids.trigger],
-		([$menuId, $triggerId]) => ({
-			menu: $menuId,
-			trigger: $triggerId
-		})
-	);
-
-	$: open !== undefined && subOpen.set(open);
-
-	$: updateOption("positioning", positioning);
-	$: updateOption("disabled", disabled);
-</script>
-
-<slot subIds={$idValues} />
diff --git a/src/lib/bits/context-menu/components/ContextMenuSubContent.svelte b/src/lib/bits/context-menu/components/ContextMenuSubContent.svelte
deleted file mode 100644
index f5af6c26a..000000000
--- a/src/lib/bits/context-menu/components/ContextMenuSubContent.svelte
+++ /dev/null
@@ -1,106 +0,0 @@
-<script lang="ts">
-	import { createDispatcher, type Transition } from "$lib/internal/index.js";
-	import { melt } from "@melt-ui/svelte";
-	import { getSubContent, getAttrs } from "../ctx.js";
-	import type { SubContentEvents, SubContentProps } from "../types.js";
-
-	type T = $$Generic<Transition>;
-	type In = $$Generic<Transition>;
-	type Out = $$Generic<Transition>;
-	type $$Props = SubContentProps<T, In, Out>;
-
-	type $$Events = SubContentEvents;
-	export let transition: $$Props["transition"] = undefined;
-	export let transitionConfig: $$Props["transitionConfig"] = undefined;
-	export let inTransition: $$Props["inTransition"] = undefined;
-	export let inTransitionConfig: $$Props["inTransitionConfig"] = undefined;
-	export let outTransition: $$Props["outTransition"] = undefined;
-	export let outTransitionConfig: $$Props["outTransitionConfig"] = undefined;
-	export let asChild: $$Props["asChild"] = false;
-	export let id: $$Props["id"] = undefined;
-
-	const {
-		elements: { subMenu },
-		states: { subOpen },
-		ids
-	} = getSubContent();
-
-	const dispatch = createDispatcher();
-	const attrs = getAttrs("sub-content");
-
-	$: builder = $subMenu;
-
-	$: if (id) {
-		ids.menu.set(id);
-	}
-
-	$: slotProps = {
-		builder,
-		attrs
-	};
-</script>
-
-<!-- svelte-ignore a11y-no-static-element-interactions / applied by melt store -->
-{#if asChild && $subOpen}
-	<slot {...slotProps} />
-{:else if transition && $subOpen}
-	<div
-		transition:transition={transitionConfig}
-		use:melt={builder}
-		{...$$restProps}
-		{...attrs}
-		on:m-focusout={dispatch}
-		on:m-keydown={dispatch}
-		on:m-pointermove={dispatch}
-	>
-		<slot {...slotProps} />
-	</div>
-{:else if inTransition && outTransition && $subOpen}
-	<div
-		in:inTransition={inTransitionConfig}
-		out:outTransition={outTransitionConfig}
-		use:melt={builder}
-		{...$$restProps}
-		{...attrs}
-		on:m-focusout={dispatch}
-		on:m-keydown={dispatch}
-		on:m-pointermove={dispatch}
-	>
-		<slot {...slotProps} />
-	</div>
-{:else if inTransition && $subOpen}
-	<div
-		in:inTransition={inTransitionConfig}
-		use:melt={builder}
-		{...$$restProps}
-		{...attrs}
-		on:m-focusout={dispatch}
-		on:m-keydown={dispatch}
-		on:m-pointermove={dispatch}
-	>
-		<slot {...slotProps} />
-	</div>
-{:else if outTransition && $subOpen}
-	<div
-		out:outTransition={outTransitionConfig}
-		use:melt={builder}
-		{...$$restProps}
-		{...attrs}
-		on:m-focusout={dispatch}
-		on:m-keydown={dispatch}
-		on:m-pointermove={dispatch}
-	>
-		<slot {...slotProps} />
-	</div>
-{:else if $subOpen}
-	<div
-		use:melt={builder}
-		{...$$restProps}
-		{...attrs}
-		on:m-focusout={dispatch}
-		on:m-keydown={dispatch}
-		on:m-pointermove={dispatch}
-	>
-		<slot {...slotProps} />
-	</div>
-{/if}
diff --git a/src/lib/bits/context-menu/components/ContextMenuSubTrigger.svelte b/src/lib/bits/context-menu/components/ContextMenuSubTrigger.svelte
deleted file mode 100644
index 665bc16e3..000000000
--- a/src/lib/bits/context-menu/components/ContextMenuSubTrigger.svelte
+++ /dev/null
@@ -1,53 +0,0 @@
-<script lang="ts">
-	import { melt } from "@melt-ui/svelte";
-	import { getSubMenuCtx, getAttrs } from "../ctx.js";
-	import type { SubTriggerEvents, SubTriggerProps } from "../types.js";
-	import { disabledAttrs } from "$lib/internal/index.js";
-	import { createDispatcher } from "$lib/internal/events.js";
-
-	type $$Props = SubTriggerProps;
-	type $$Events = SubTriggerEvents;
-
-	export let disabled: $$Props["disabled"] = false;
-	export let asChild: $$Props["asChild"] = false;
-	export let id: $$Props["id"] = undefined;
-
-	const {
-		elements: { subTrigger },
-		ids
-	} = getSubMenuCtx();
-
-	const dispatch = createDispatcher();
-
-	$: if (id) {
-		ids.trigger.set(id);
-	}
-
-	$: builder = $subTrigger;
-	$: attrs = { ...getAttrs("sub-trigger"), ...disabledAttrs(disabled) };
-
-	$: slotProps = {
-		builder,
-		attrs
-	};
-</script>
-
-<!-- svelte-ignore a11y-no-static-element-interactions / applied by melt store -->
-{#if asChild}
-	<slot {...slotProps} />
-{:else}
-	<div
-		use:melt={builder}
-		{...$$restProps}
-		{...attrs}
-		on:m-click={dispatch}
-		on:m-focusin={dispatch}
-		on:m-focusout={dispatch}
-		on:m-keydown={dispatch}
-		on:m-pointerleave={dispatch}
-		on:m-pointermove={dispatch}
-		on:m-keydown={dispatch}
-	>
-		<slot {...slotProps} />
-	</div>
-{/if}
diff --git a/src/lib/bits/context-menu/components/ContextMenuTrigger.svelte b/src/lib/bits/context-menu/components/ContextMenuTrigger.svelte
index 3fad50570..f640447a7 100644
--- a/src/lib/bits/context-menu/components/ContextMenuTrigger.svelte
+++ b/src/lib/bits/context-menu/components/ContextMenuTrigger.svelte
@@ -29,7 +29,6 @@
 	};
 </script>
 
-<!-- svelte-ignore a11y-no-static-element-interactions applied by melt's action/store -->
 {#if asChild}
 	<slot {...slotProps} />
 {:else}
diff --git a/src/lib/bits/context-menu/ctx.ts b/src/lib/bits/context-menu/ctx.ts
index f4aee40bf..096348fdf 100644
--- a/src/lib/bits/context-menu/ctx.ts
+++ b/src/lib/bits/context-menu/ctx.ts
@@ -1,30 +1,14 @@
-import {
-	createBitAttrs,
-	generateId,
-	getOptionUpdater,
-	removeUndefined
-} from "$lib/internal/index.js";
+import { createBitAttrs, getOptionUpdater, removeUndefined } from "$lib/internal/index.js";
 import {
 	type ContextMenu as ContextMenuReturn,
-	type ContextMenuRadioGroup as ContextRadioGroupReturn,
-	type ContextMenuSubmenu as ContextSubmenuReturn,
-	type Checkbox as CheckboxReturn,
-	type CreateContextMenuCheckboxItemProps as ContextCheckboxItemProps,
 	createContextMenu,
-	type CreateContextMenuProps,
-	type CreateContextMenuRadioGroupProps,
-	type CreateContextSubmenuProps
+	type CreateContextMenuProps
 } from "@melt-ui/svelte";
 import { getContext, setContext } from "svelte";
-import type { Readable, Writable } from "svelte/store";
+import type { Writable } from "svelte/store";
 import { getPositioningUpdater, type PositioningProps } from "../floating/helpers.js";
 
-const NAME = "context-menu";
-const SUB_NAME = "context-menu-submenu";
-const RADIO_GROUP_NAME = "context-menu-radiogroup";
-const CHECKBOX_ITEM_NAME = "context-menu-checkboxitem";
-const RADIO_ITEM_NAME = "context-menu-radioitem";
-const GROUP_NAME = "context-menu-group";
+const NAME = "menu";
 
 const PARTS = [
 	"arrow",
@@ -45,8 +29,6 @@ const PARTS = [
 export const getAttrs = createBitAttrs("menu", PARTS);
 
 type GetReturn = ContextMenuReturn;
-type GetSubReturn = ContextSubmenuReturn;
-type GetRadioReturn = ContextRadioGroupReturn;
 
 export function setCtx(props: CreateContextMenuProps) {
 	const contextMenu = createContextMenu(removeUndefined(props));
@@ -61,113 +43,13 @@ export function getCtx() {
 	return getContext<GetReturn>(NAME);
 }
 
-export function setSubMenuCtx(props: CreateContextSubmenuProps) {
-	const {
-		builders: { createSubmenu }
-	} = getCtx();
-	const sub = createSubmenu(removeUndefined(props));
-	setContext(SUB_NAME, sub);
-	return {
-		...sub,
-		updateOption: getOptionUpdater(sub.options)
-	};
-}
-
-export function getSubMenuCtx() {
-	return getContext<GetSubReturn>(SUB_NAME);
-}
-
-export function setRadioGroupCtx(props: CreateContextMenuRadioGroupProps) {
-	const {
-		builders: { createMenuRadioGroup }
-	} = getCtx();
-	const radioGroup = createMenuRadioGroup(removeUndefined(props));
-	setContext(RADIO_GROUP_NAME, radioGroup);
-	return radioGroup;
-}
-
-function getRadioGroupCtx() {
-	return getContext<GetRadioReturn>(RADIO_GROUP_NAME);
-}
-
-export function setRadioItem(value: string) {
-	const radioGroup = getRadioGroupCtx();
-	setContext(RADIO_ITEM_NAME, {
-		isChecked: radioGroup.helpers.isChecked,
-		value
-	});
-	return radioGroup;
-}
-
-export function getRadioIndicator() {
-	return getContext<{
-		isChecked: Readable<(itemValue: string) => boolean>;
-		value: string;
-	}>(RADIO_ITEM_NAME);
-}
-
-export function setCheckboxItem(props: ContextCheckboxItemProps) {
-	const {
-		builders: { createCheckboxItem }
-	} = getCtx();
-	const checkboxItem = createCheckboxItem(removeUndefined(props));
-	setContext(CHECKBOX_ITEM_NAME, checkboxItem.states.checked);
-
-	return {
-		...checkboxItem,
-		updateOption: getOptionUpdater(checkboxItem.options)
-	};
-}
-
-export function getCheckboxIndicator() {
-	return getContext<CheckboxReturn["states"]["checked"]>(CHECKBOX_ITEM_NAME);
-}
-
-export function setGroup() {
-	const {
-		elements: { group }
-	} = getCtx();
-	const id = generateId();
-	setContext(GROUP_NAME, id);
-	return { group, id };
-}
-
-export function getGroupLabel() {
-	const id = getContext<string>(GROUP_NAME) ?? generateId();
-	const {
-		elements: { groupLabel }
-	} = getCtx();
-	return { groupLabel, id };
-}
-
-export function setArrow(size = 8) {
-	const menu = getCtx();
-	menu.options.arrowSize.set(size);
-	return menu;
-}
-
 const defaultPlacement = {
-	side: "bottom",
-	align: "center"
-} satisfies PositioningProps;
-
-export function updatePositioning(props: PositioningProps) {
-	const withDefaults = { ...defaultPlacement, ...props } satisfies PositioningProps;
-	const {
-		options: { positioning }
-	} = getCtx();
-
-	const updater = getPositioningUpdater(positioning as Writable<FloatingConfig>);
-	updater(withDefaults);
-}
-
-const defaultSubPlacement = {
 	side: "right",
 	align: "start"
 } satisfies PositioningProps;
 
-export function updateSubPositioning(props: PositioningProps) {
-	const withDefaults = { ...defaultSubPlacement, ...props } satisfies PositioningProps;
+export function updatePositioning(props: PositioningProps) {
+	const withDefaults = { ...defaultPlacement, ...props } satisfies PositioningProps;
 	const {
 		options: { positioning }
 	} = getCtx();
diff --git a/src/lib/bits/context-menu/index.ts b/src/lib/bits/context-menu/index.ts
index e1644306f..8f75a287e 100644
--- a/src/lib/bits/context-menu/index.ts
+++ b/src/lib/bits/context-menu/index.ts
@@ -1,19 +1,19 @@
 import Root from "./components/ContextMenu.svelte";
-import Sub from "./components/ContextMenuSub.svelte";
-import Item from "./components/ContextMenuItem.svelte";
-import Group from "./components/ContextMenuGroup.svelte";
-import Label from "./components/ContextMenuLabel.svelte";
-import Arrow from "./components/ContextMenuArrow.svelte";
+import Sub from "$lib/bits/menu/components/MenuSub.svelte";
+import Item from "$lib/bits/menu/components/MenuItem.svelte";
+import Group from "$lib/bits/menu/components/MenuGroup.svelte";
+import Label from "$lib/bits/menu/components/MenuLabel.svelte";
+import Arrow from "$lib/bits/menu/components/MenuArrow.svelte";
 import Content from "./components/ContextMenuContent.svelte";
 import Trigger from "./components/ContextMenuTrigger.svelte";
-import RadioItem from "./components/ContextMenuRadioItem.svelte";
-import Separator from "./components/ContextMenuSeparator.svelte";
-import RadioGroup from "./components/ContextMenuRadioGroup.svelte";
-import SubContent from "./components/ContextMenuSubContent.svelte";
-import SubTrigger from "./components/ContextMenuSubTrigger.svelte";
-import CheckboxItem from "./components/ContextMenuCheckboxItem.svelte";
-import RadioIndicator from "./components/ContextMenuRadioIndicator.svelte";
-import CheckboxIndicator from "./components/ContextMenuCheckboxIndicator.svelte";
+import RadioItem from "$lib/bits/menu/components/MenuRadioItem.svelte";
+import Separator from "$lib/bits/menu/components/MenuSeparator.svelte";
+import RadioGroup from "$lib/bits/menu/components/MenuRadioGroup.svelte";
+import SubContent from "$lib/bits/menu/components/MenuSubContent.svelte";
+import SubTrigger from "$lib/bits/menu/components/MenuSubTrigger.svelte";
+import CheckboxItem from "$lib/bits/menu/components/MenuCheckboxItem.svelte";
+import RadioIndicator from "$lib/bits/menu/components/MenuRadioIndicator.svelte";
+import CheckboxIndicator from "$lib/bits/menu/components/MenuCheckboxIndicator.svelte";
 
 export {
 	Sub,
diff --git a/src/lib/bits/dropdown-menu/components/DropdownMenuArrow.svelte b/src/lib/bits/dropdown-menu/components/DropdownMenuArrow.svelte
deleted file mode 100644
index e0e37099c..000000000
--- a/src/lib/bits/dropdown-menu/components/DropdownMenuArrow.svelte
+++ /dev/null
@@ -1,29 +0,0 @@
-<script lang="ts">
-	import { melt } from "@melt-ui/svelte";
-	import { setArrow, getAttrs } from "../ctx.js";
-	import type { ArrowProps } from "../types.js";
-
-	type $$Props = ArrowProps;
-
-	export let size: $$Props["size"] = 8;
-	export let asChild: $$Props["asChild"] = false;
-
-	const {
-		elements: { arrow }
-	} = setArrow(size);
-
-	const attrs = getAttrs("arrow");
-
-	$: builder = $arrow;
-
-	$: slotProps = {
-		builder,
-		attrs
-	};
-</script>
-
-{#if asChild}
-	<slot {...slotProps} />
-{:else}
-	<div use:melt={builder} />
-{/if}
diff --git a/src/lib/bits/dropdown-menu/components/DropdownMenuCheckboxIndicator.svelte b/src/lib/bits/dropdown-menu/components/DropdownMenuCheckboxIndicator.svelte
deleted file mode 100644
index 5b9896e4e..000000000
--- a/src/lib/bits/dropdown-menu/components/DropdownMenuCheckboxIndicator.svelte
+++ /dev/null
@@ -1,25 +0,0 @@
-<script lang="ts">
-	import type { CheckboxItemIndicatorProps } from "../types.js";
-	import { getAttrs, getCheckboxIndicator } from "../ctx.js";
-
-	type $$Props = CheckboxItemIndicatorProps;
-	export let asChild: $$Props["asChild"] = false;
-
-	const checked = getCheckboxIndicator();
-	const attrs = getAttrs("checkbox-indicator");
-
-	$: slotProps = {
-		attrs,
-		checked: $checked
-	};
-</script>
-
-{#if asChild}
-	<slot {...slotProps} />
-{:else}
-	<div {...$$restProps} {...attrs}>
-		{#if $checked}
-			<slot {...slotProps} />
-		{/if}
-	</div>
-{/if}
diff --git a/src/lib/bits/dropdown-menu/components/DropdownMenuCheckboxItem.svelte b/src/lib/bits/dropdown-menu/components/DropdownMenuCheckboxItem.svelte
deleted file mode 100644
index a4184296d..000000000
--- a/src/lib/bits/dropdown-menu/components/DropdownMenuCheckboxItem.svelte
+++ /dev/null
@@ -1,60 +0,0 @@
-<script lang="ts">
-	import { melt } from "@melt-ui/svelte";
-	import { setCheckboxItem, getAttrs } from "../ctx.js";
-	import type { CheckboxItemEvents, CheckboxItemProps } from "../types.js";
-	import { createDispatcher } from "$lib/internal/events.js";
-
-	type $$Props = CheckboxItemProps;
-	type $$Events = CheckboxItemEvents;
-
-	export let checked: $$Props["checked"] = undefined;
-	export let onCheckedChange: $$Props["onCheckedChange"] = undefined;
-	export let disabled: $$Props["disabled"] = undefined;
-	export let asChild: $$Props["asChild"] = false;
-
-	const {
-		elements: { checkboxItem },
-		states: { checked: localChecked },
-		updateOption
-	} = setCheckboxItem({
-		disabled,
-		defaultChecked: checked,
-		onCheckedChange: ({ next }) => {
-			onCheckedChange?.(next);
-			checked = next;
-			return next;
-		}
-	});
-
-	const dispatch = createDispatcher();
-	const attrs = getAttrs("checkbox-item");
-
-	$: checked !== undefined && localChecked.set(checked);
-	$: updateOption("disabled", disabled);
-
-	$: builder = $checkboxItem;
-
-	$: slotProps = {
-		builder,
-		attrs
-	};
-</script>
-
-{#if asChild}
-	<slot {...slotProps} />
-{:else}
-	<div
-		use:melt={builder}
-		{...$$restProps}
-		{...attrs}
-		on:m-click={dispatch}
-		on:m-focusin={dispatch}
-		on:m-focusout={dispatch}
-		on:m-keydown={dispatch}
-		on:m-pointerdown={dispatch}
-		on:m-pointerleave={dispatch}
-		on:m-pointermove={dispatch}
-	>
-		<slot {...slotProps} />
-	</div>
-{/if}
diff --git a/src/lib/bits/dropdown-menu/components/DropdownMenuContent.svelte b/src/lib/bits/dropdown-menu/components/DropdownMenuContent.svelte
deleted file mode 100644
index 4a37c4b7a..000000000
--- a/src/lib/bits/dropdown-menu/components/DropdownMenuContent.svelte
+++ /dev/null
@@ -1,110 +0,0 @@
-<script lang="ts">
-	import { createDispatcher } from "$lib/internal/events.js";
-	import { melt } from "@melt-ui/svelte";
-	import { getAttrs, getCtx, updatePositioning } from "../ctx.js";
-	import type { Transition } from "$lib/internal/types.js";
-	import type { ContentEvents, ContentProps } from "../types.js";
-
-	type T = $$Generic<Transition>;
-	type In = $$Generic<Transition>;
-	type Out = $$Generic<Transition>;
-	type $$Props = ContentProps<T, In, Out>;
-	type $$Events = ContentEvents;
-
-	export let transition: $$Props["transition"] = undefined;
-	export let transitionConfig: $$Props["transitionConfig"] = undefined;
-	export let inTransition: $$Props["inTransition"] = undefined;
-	export let inTransitionConfig: $$Props["inTransitionConfig"] = undefined;
-	export let outTransition: $$Props["outTransition"] = undefined;
-	export let outTransitionConfig: $$Props["outTransitionConfig"] = undefined;
-	export let asChild: $$Props["asChild"] = false;
-	export let id: $$Props["id"] = undefined;
-	export let side: $$Props["side"] = "top";
-	export let align: $$Props["align"] = "center";
-	export let sideOffset: $$Props["sideOffset"] = 0;
-	export let alignOffset: $$Props["alignOffset"] = 0;
-	export let collisionPadding: $$Props["collisionPadding"] = 8;
-	export let avoidCollisions: $$Props["avoidCollisions"] = true;
-	export let collisionBoundary: $$Props["collisionBoundary"] = undefined;
-	export let sameWidth: $$Props["sameWidth"] = false;
-	export let fitViewport: $$Props["fitViewport"] = false;
-
-	const {
-		elements: { menu },
-		states: { open },
-		ids
-	} = getCtx();
-
-	const dispatch = createDispatcher();
-	const attrs = getAttrs("content");
-
-	$: if (id) {
-		ids.menu.set(id);
-	}
-	$: builder = $menu;
-	$: slotProps = {
-		builder,
-		attrs
-	};
-
-	$: updatePositioning({
-		side,
-		align,
-		sideOffset,
-		alignOffset,
-		collisionPadding,
-		avoidCollisions,
-		collisionBoundary,
-		sameWidth,
-		fitViewport
-	});
-</script>
-
-{#if asChild && $open}
-	<slot {...slotProps} />
-{:else if transition && $open}
-	<div
-		transition:transition={transitionConfig}
-		use:melt={builder}
-		{...$$restProps}
-		{...attrs}
-		on:m-keydown={dispatch}
-	>
-		<slot {...slotProps} />
-	</div>
-{:else if inTransition && outTransition && $open}
-	<div
-		in:inTransition={inTransitionConfig}
-		out:outTransition={outTransitionConfig}
-		use:melt={builder}
-		{...$$restProps}
-		{...attrs}
-		on:m-keydown={dispatch}
-	>
-		<slot {...slotProps} />
-	</div>
-{:else if inTransition && $open}
-	<div
-		in:inTransition={inTransitionConfig}
-		use:melt={builder}
-		{...$$restProps}
-		{...attrs}
-		on:m-keydown={dispatch}
-	>
-		<slot {...slotProps} />
-	</div>
-{:else if outTransition && $open}
-	<div
-		out:outTransition={outTransitionConfig}
-		use:melt={builder}
-		{...$$restProps}
-		{...attrs}
-		on:m-keydown={dispatch}
-	>
-		<slot {...slotProps} />
-	</div>
-{:else if $open}
-	<div use:melt={builder} {...$$restProps} {...attrs} on:m-keydown={dispatch}>
-		<slot {...slotProps} />
-	</div>
-{/if}
diff --git a/src/lib/bits/dropdown-menu/components/DropdownMenuGroup.svelte b/src/lib/bits/dropdown-menu/components/DropdownMenuGroup.svelte
deleted file mode 100644
index 4bb816081..000000000
--- a/src/lib/bits/dropdown-menu/components/DropdownMenuGroup.svelte
+++ /dev/null
@@ -1,24 +0,0 @@
-<script lang="ts">
-	import { melt } from "@melt-ui/svelte";
-	import { setGroupCtx, getAttrs } from "../ctx.js";
-	import type { GroupProps } from "../types.js";
-	type $$Props = GroupProps;
-	export let asChild: $$Props["asChild"] = false;
-
-	const { group, id } = setGroupCtx();
-	const attrs = getAttrs("group");
-
-	$: builder = $group(id);
-	$: slotProps = {
-		builder,
-		attrs
-	};
-</script>
-
-{#if asChild}
-	<slot {...slotProps} />
-{:else}
-	<div use:melt={builder} {...$$restProps} {...attrs}>
-		<slot {...slotProps} />
-	</div>
-{/if}
diff --git a/src/lib/bits/dropdown-menu/components/DropdownMenuItem.svelte b/src/lib/bits/dropdown-menu/components/DropdownMenuItem.svelte
deleted file mode 100644
index c9aa0bdb7..000000000
--- a/src/lib/bits/dropdown-menu/components/DropdownMenuItem.svelte
+++ /dev/null
@@ -1,48 +0,0 @@
-<script lang="ts">
-	import { createDispatcher } from "$lib/internal/events.js";
-	import { disabledAttrs } from "$lib/internal/index.js";
-	import { melt } from "@melt-ui/svelte";
-	import { getCtx, getAttrs } from "../ctx.js";
-	import type { ItemEvents, ItemProps } from "../types.js";
-
-	type $$Props = ItemProps;
-	type $$Events = ItemEvents;
-
-	export let href: $$Props["href"] = undefined;
-	export let asChild: $$Props["asChild"] = false;
-	export let disabled: $$Props["disabled"] = false;
-
-	const {
-		elements: { item }
-	} = getCtx();
-	const dispatch = createDispatcher();
-
-	$: builder = $item;
-	$: attrs = { ...getAttrs("item"), ...disabledAttrs(disabled) };
-
-	$: slotProps = {
-		builder,
-		attrs
-	};
-</script>
-
-{#if asChild}
-	<slot {...slotProps} />
-{:else}
-	<svelte:element
-		this={href ? "a" : "div"}
-		{href}
-		use:melt={builder}
-		{...$$restProps}
-		{...attrs}
-		on:m-click={dispatch}
-		on:m-focusin={dispatch}
-		on:m-focusout={dispatch}
-		on:m-keydown={dispatch}
-		on:m-pointerdown={dispatch}
-		on:m-pointerleave={dispatch}
-		on:m-pointermove={dispatch}
-	>
-		<slot {...slotProps} />
-	</svelte:element>
-{/if}
diff --git a/src/lib/bits/dropdown-menu/components/DropdownMenuLabel.svelte b/src/lib/bits/dropdown-menu/components/DropdownMenuLabel.svelte
deleted file mode 100644
index 6f5db1b6d..000000000
--- a/src/lib/bits/dropdown-menu/components/DropdownMenuLabel.svelte
+++ /dev/null
@@ -1,26 +0,0 @@
-<script lang="ts">
-	import { melt } from "@melt-ui/svelte";
-	import { getGroupLabel, getAttrs } from "../ctx.js";
-	import type { LabelProps } from "../types.js";
-
-	type $$Props = LabelProps;
-
-	export let asChild: $$Props["asChild"] = false;
-
-	const { groupLabel, id } = getGroupLabel();
-	const attrs = getAttrs("label");
-
-	$: builder = $groupLabel(id);
-	$: slotProps = {
-		builder,
-		attrs
-	};
-</script>
-
-{#if asChild}
-	<slot {...slotProps} />
-{:else}
-	<div use:melt={builder} {...$$restProps} {...attrs}>
-		<slot {...slotProps} />
-	</div>
-{/if}
diff --git a/src/lib/bits/dropdown-menu/components/DropdownMenuRadioGroup.svelte b/src/lib/bits/dropdown-menu/components/DropdownMenuRadioGroup.svelte
deleted file mode 100644
index 158632181..000000000
--- a/src/lib/bits/dropdown-menu/components/DropdownMenuRadioGroup.svelte
+++ /dev/null
@@ -1,42 +0,0 @@
-<script lang="ts">
-	import { melt } from "@melt-ui/svelte";
-	import { setRadioGroupCtx, getAttrs } from "../ctx.js";
-	import type { RadioGroupProps } from "../types.js";
-
-	type $$Props = RadioGroupProps;
-
-	export let value: $$Props["value"] = undefined;
-	export let onValueChange: $$Props["onValueChange"] = undefined;
-	export let asChild: $$Props["asChild"] = false;
-
-	const {
-		elements: { radioGroup },
-		states: { value: localValue }
-	} = setRadioGroupCtx({
-		defaultValue: value,
-		onValueChange: ({ next }) => {
-			if (next) {
-				onValueChange?.(next);
-				value = next;
-			}
-			return next;
-		}
-	});
-
-	const attrs = getAttrs("radio-group");
-
-	$: value !== undefined && localValue.set(value);
-	$: builder = $radioGroup;
-	$: slotProps = {
-		builder,
-		attrs
-	};
-</script>
-
-{#if asChild}
-	<slot {...slotProps} />
-{:else}
-	<div use:melt={builder} {...$$restProps} {...attrs}>
-		<slot {...slotProps} />
-	</div>
-{/if}
diff --git a/src/lib/bits/dropdown-menu/components/DropdownMenuRadioIndicator.svelte b/src/lib/bits/dropdown-menu/components/DropdownMenuRadioIndicator.svelte
deleted file mode 100644
index b0c0a7baa..000000000
--- a/src/lib/bits/dropdown-menu/components/DropdownMenuRadioIndicator.svelte
+++ /dev/null
@@ -1,8 +0,0 @@
-<script lang="ts">
-	import { getRadioIndicator } from "../ctx.js";
-	const { isChecked, value } = getRadioIndicator();
-</script>
-
-{#if $isChecked(value)}
-	<slot />
-{/if}
diff --git a/src/lib/bits/dropdown-menu/components/DropdownMenuRadioItem.svelte b/src/lib/bits/dropdown-menu/components/DropdownMenuRadioItem.svelte
deleted file mode 100644
index 2d065f2dc..000000000
--- a/src/lib/bits/dropdown-menu/components/DropdownMenuRadioItem.svelte
+++ /dev/null
@@ -1,46 +0,0 @@
-<script lang="ts">
-	import { melt } from "@melt-ui/svelte";
-	import { setRadioItem, getAttrs } from "../ctx.js";
-	import type { RadioItemEvents, RadioItemProps } from "../types.js";
-	import { createDispatcher } from "$lib/internal/events.js";
-
-	type $$Props = RadioItemProps;
-	type $$Events = RadioItemEvents;
-	export let value: $$Props["value"];
-	export let disabled = false;
-	export let asChild: $$Props["asChild"] = false;
-
-	const {
-		elements: { radioItem }
-	} = setRadioItem(value);
-
-	const attrs = getAttrs("radio-item");
-
-	const dispatch = createDispatcher();
-
-	$: builder = $radioItem({ value, disabled });
-
-	$: slotProps = {
-		builder,
-		attrs
-	};
-</script>
-
-{#if asChild}
-	<slot {...slotProps} />
-{:else}
-	<div
-		use:melt={builder}
-		{...$$restProps}
-		{...attrs}
-		on:m-click={dispatch}
-		on:m-focusin={dispatch}
-		on:m-focusout={dispatch}
-		on:m-keydown={dispatch}
-		on:m-pointerdown={dispatch}
-		on:m-pointerleave={dispatch}
-		on:m-pointermove={dispatch}
-	>
-		<slot {...slotProps} />
-	</div>
-{/if}
diff --git a/src/lib/bits/dropdown-menu/components/DropdownMenuSeparator.svelte b/src/lib/bits/dropdown-menu/components/DropdownMenuSeparator.svelte
deleted file mode 100644
index a7adfef80..000000000
--- a/src/lib/bits/dropdown-menu/components/DropdownMenuSeparator.svelte
+++ /dev/null
@@ -1,27 +0,0 @@
-<script lang="ts">
-	import { melt } from "@melt-ui/svelte";
-	import { getCtx, getAttrs } from "../ctx.js";
-	import type { SeparatorProps } from "../types.js";
-
-	type $$Props = SeparatorProps;
-
-	export let asChild: $$Props["asChild"] = false;
-
-	const {
-		elements: { separator }
-	} = getCtx();
-
-	const attrs = getAttrs("separator");
-
-	$: builder = $separator;
-	$: slotProps = {
-		builder,
-		attrs
-	};
-</script>
-
-{#if asChild}
-	<slot {...slotProps} />
-{:else}
-	<div use:melt={$separator} {...$$restProps} {...attrs} />
-{/if}
diff --git a/src/lib/bits/dropdown-menu/components/DropdownMenuSub.svelte b/src/lib/bits/dropdown-menu/components/DropdownMenuSub.svelte
deleted file mode 100644
index 5a837512d..000000000
--- a/src/lib/bits/dropdown-menu/components/DropdownMenuSub.svelte
+++ /dev/null
@@ -1,42 +0,0 @@
-<script lang="ts">
-	import { derived } from "svelte/store";
-	import { setSubMenuCtx } from "../ctx.js";
-	import type { SubProps } from "../types.js";
-	type $$Props = SubProps;
-
-	export let positioning: $$Props["positioning"] = undefined;
-	export let disabled: $$Props["disabled"] = undefined;
-	export let open: $$Props["open"] = undefined;
-	export let onOpenChange: $$Props["onOpenChange"] = undefined;
-
-	const {
-		updateOption,
-		ids,
-		states: { subOpen }
-	} = setSubMenuCtx({
-		positioning,
-		disabled,
-		onOpenChange: ({ next }) => {
-			if (open !== next) {
-				onOpenChange?.(next);
-				open = next;
-			}
-			return next;
-		}
-	});
-
-	const idValues = derived(
-		[ids.menu, ids.trigger],
-		([$menuId, $triggerId]) => ({
-			menu: $menuId,
-			trigger: $triggerId
-		})
-	);
-
-	$: open !== undefined && subOpen.set(open);
-
-	$: updateOption("positioning", positioning);
-	$: updateOption("disabled", disabled);
-</script>
-
-<slot subIds={$idValues} />
diff --git a/src/lib/bits/dropdown-menu/components/DropdownMenuSubContent.svelte b/src/lib/bits/dropdown-menu/components/DropdownMenuSubContent.svelte
deleted file mode 100644
index f7e54d05a..000000000
--- a/src/lib/bits/dropdown-menu/components/DropdownMenuSubContent.svelte
+++ /dev/null
@@ -1,105 +0,0 @@
-<script lang="ts">
-	import { melt } from "@melt-ui/svelte";
-	import { createDispatcher, type Transition } from "$lib/internal/index.js";
-	import { getSubContent, getAttrs } from "../ctx.js";
-	import type { SubContentEvents, SubContentProps } from "../types.js";
-
-	type T = $$Generic<Transition>;
-	type In = $$Generic<Transition>;
-	type Out = $$Generic<Transition>;
-	type $$Props = SubContentProps<T, In, Out>;
-	type $$Events = SubContentEvents;
-
-	export let transition: $$Props["transition"] = undefined;
-	export let transitionConfig: $$Props["transitionConfig"] = undefined;
-
-	export let inTransition: $$Props["inTransition"] = undefined;
-	export let inTransitionConfig: $$Props["inTransitionConfig"] = undefined;
-
-	export let outTransition: $$Props["outTransition"] = undefined;
-	export let outTransitionConfig: $$Props["outTransitionConfig"] = undefined;
-	export let asChild: $$Props["asChild"] = false;
-	export let id: $$Props["id"] = undefined;
-
-	const {
-		elements: { subMenu },
-		states: { subOpen },
-		ids
-	} = getSubContent();
-
-	const dispatch = createDispatcher();
-	const attrs = getAttrs("sub-content");
-
-	$: if (id) {
-		ids.menu.set(id);
-	}
-	$: builder = $subMenu;
-	$: slotProps = {
-		builder,
-		attrs
-	};
-</script>
-
-{#if asChild && $subOpen}
-	<slot {...slotProps} />
-{:else if transition && $subOpen}
-	<div
-		transition:transition={transitionConfig}
-		use:melt={builder}
-		{...$$restProps}
-		{...attrs}
-		on:m-focusout={dispatch}
-		on:m-keydown={dispatch}
-		on:m-pointermove={dispatch}
-	>
-		<slot {...slotProps} />
-	</div>
-{:else if inTransition && outTransition && $subOpen}
-	<div
-		in:inTransition={inTransitionConfig}
-		out:outTransition={outTransitionConfig}
-		use:melt={builder}
-		{...$$restProps}
-		{...attrs}
-		on:m-focusout={dispatch}
-		on:m-keydown={dispatch}
-		on:m-pointermove={dispatch}
-	>
-		<slot {...slotProps} />
-	</div>
-{:else if inTransition && $subOpen}
-	<div
-		in:inTransition={inTransitionConfig}
-		use:melt={builder}
-		{...$$restProps}
-		{...attrs}
-		on:m-focusout={dispatch}
-		on:m-keydown={dispatch}
-		on:m-pointermove={dispatch}
-	>
-		<slot {...slotProps} />
-	</div>
-{:else if outTransition && $subOpen}
-	<div
-		out:outTransition={outTransitionConfig}
-		use:melt={builder}
-		{...$$restProps}
-		{...attrs}
-		on:m-focusout={dispatch}
-		on:m-keydown={dispatch}
-		on:m-pointermove={dispatch}
-	>
-		<slot {...slotProps} />
-	</div>
-{:else if $subOpen}
-	<div
-		use:melt={builder}
-		{...$$restProps}
-		{...attrs}
-		on:m-focusout={dispatch}
-		on:m-keydown={dispatch}
-		on:m-pointermove={dispatch}
-	>
-		<slot {...slotProps} />
-	</div>
-{/if}
diff --git a/src/lib/bits/dropdown-menu/components/DropdownMenuSubTrigger.svelte b/src/lib/bits/dropdown-menu/components/DropdownMenuSubTrigger.svelte
deleted file mode 100644
index 13bbea60a..000000000
--- a/src/lib/bits/dropdown-menu/components/DropdownMenuSubTrigger.svelte
+++ /dev/null
@@ -1,51 +0,0 @@
-<script lang="ts">
-	import { melt } from "@melt-ui/svelte";
-	import { disabledAttrs } from "$lib/internal/index.js";
-	import { getSubTrigger, getAttrs } from "../ctx.js";
-	import type { SubTriggerEvents, SubTriggerProps } from "../types.js";
-	import { createDispatcher } from "$lib/internal/events.js";
-
-	type $$Props = SubTriggerProps & {
-		disabled?: boolean;
-	};
-	type $$Events = SubTriggerEvents;
-	export let disabled: $$Props["disabled"] = false;
-	export let asChild: $$Props["asChild"] = false;
-	export let id: $$Props["id"] = undefined;
-
-	const {
-		elements: { subTrigger },
-		ids
-	} = getSubTrigger();
-
-	const dispatch = createDispatcher();
-
-	$: if (id) {
-		ids.trigger.set(id);
-	}
-
-	$: builder = $subTrigger;
-	$: attrs = { ...getAttrs("sub-trigger"), ...disabledAttrs(disabled) };
-	$: slotProps = {
-		builder,
-		attrs
-	};
-</script>
-
-{#if asChild}
-	<slot {...slotProps} />
-{:else}
-	<div
-		use:melt={builder}
-		{...$$restProps}
-		{...attrs}
-		on:m-click={dispatch}
-		on:m-focusin={dispatch}
-		on:m-focusout={dispatch}
-		on:m-keydown={dispatch}
-		on:m-pointerleave={dispatch}
-		on:m-pointermove={dispatch}
-	>
-		<slot {...slotProps} />
-	</div>
-{/if}
diff --git a/src/lib/bits/dropdown-menu/components/DropdownMenuTrigger.svelte b/src/lib/bits/dropdown-menu/components/DropdownMenuTrigger.svelte
deleted file mode 100644
index 662c81191..000000000
--- a/src/lib/bits/dropdown-menu/components/DropdownMenuTrigger.svelte
+++ /dev/null
@@ -1,44 +0,0 @@
-<script lang="ts">
-	import { melt } from "@melt-ui/svelte";
-	import { getCtx, getAttrs } from "../ctx.js";
-	import type { TriggerEvents, TriggerProps } from "../types.js";
-	import { createDispatcher } from "$lib/internal/events.js";
-
-	type $$Props = TriggerProps;
-	type $$Events = TriggerEvents;
-
-	export let asChild: $$Props["asChild"] = false;
-	export let id: $$Props["id"] = undefined;
-
-	const {
-		elements: { trigger },
-		ids
-	} = getCtx();
-
-	const dispatch = createDispatcher();
-	const attrs = getAttrs("trigger");
-
-	$: if (id) {
-		ids.trigger.set(id);
-	}
-	$: builder = $trigger;
-	$: slotProps = {
-		builder,
-		attrs
-	};
-</script>
-
-{#if asChild}
-	<slot {...slotProps} />
-{:else}
-	<button
-		use:melt={builder}
-		type="button"
-		{...$$restProps}
-		{...attrs}
-		on:m-keydown={dispatch}
-		on:m-pointerdown={dispatch}
-	>
-		<slot {...slotProps} />
-	</button>
-{/if}
diff --git a/src/lib/bits/dropdown-menu/ctx.ts b/src/lib/bits/dropdown-menu/ctx.ts
deleted file mode 100644
index 1269e73b8..000000000
--- a/src/lib/bits/dropdown-menu/ctx.ts
+++ /dev/null
@@ -1,152 +0,0 @@
-import {
-	createBitAttrs,
-	generateId,
-	getOptionUpdater,
-	removeUndefined
-} from "$lib/internal/index.js";
-import {
-	type CreateDropdownSubmenuProps as DropdownSubmenuProps,
-	type DropdownMenu as DropdownMenuReturn,
-	type CreateMenuRadioGroupProps as DropdownRadioGroupProps,
-	type DropdownMenuRadioGroup as DropdownRadioGroupReturn,
-	type DropdownMenuSubmenu as DropdownSubmenuReturn,
-	type Checkbox as CheckboxReturn,
-	type CreateDropdownMenuCheckboxItemProps as DropdownCheckboxItemProps,
-	type CreateDropdownMenuProps,
-	createDropdownMenu
-} from "@melt-ui/svelte";
-import { getContext, setContext } from "svelte";
-import type { Readable } from "svelte/store";
-
-const NAME = "dropdown-menu";
-const SUB_NAME = "dropdown-menu-submenu";
-const RADIO_GROUP_NAME = "dropdown-menu-radiogroup";
-const CHECKBOX_ITEM_NAME = "dropdown-menu-checkboxitem";
-const RADIO_ITEM_NAME = "dropdown-menu-radioitem";
-const GROUP_NAME = "dropdown-menu-group";
-
-const PARTS = [
-	"arrow",
-	"checkbox-indicator",
-	"checkbox-item",
-	"content",
-	"group",
-	"item",
-	"label",
-	"radio-group",
-	"radio-item",
-	"separator",
-	"sub-content",
-	"sub-trigger",
-	"trigger"
-] as const;
-
-export const getAttrs = createBitAttrs("menu", PARTS);
-
-type GetReturn = DropdownMenuReturn;
-type GetSubReturn = DropdownSubmenuReturn;
-type GetRadioGroupReturn = DropdownRadioGroupReturn;
-
-export function getCtx() {
-	return getContext<GetReturn>(NAME);
-}
-
-export function setCtx(props: CreateDropdownMenuProps) {
-	const dropdownMenu = createDropdownMenu({ ...removeUndefined(props), forceVisible: true });
-	setContext(NAME, dropdownMenu);
-	return {
-		...dropdownMenu,
-		updateOption: getOptionUpdater(dropdownMenu.options)
-	};
-}
-
-export function setSubMenuCtx(props: DropdownSubmenuProps) {
-	const {
-		builders: { createSubmenu }
-	} = getCtx();
-	const sub = createSubmenu(removeUndefined(props));
-	setContext(SUB_NAME, sub);
-	return {
-		...sub,
-		updateOption: getOptionUpdater(sub.options)
-	};
-}
-
-export function setRadioGroupCtx(props: DropdownRadioGroupProps) {
-	const {
-		builders: { createMenuRadioGroup }
-	} = getCtx();
-	const radioGroup = createMenuRadioGroup(props);
-	setContext(RADIO_GROUP_NAME, radioGroup);
-	return radioGroup;
-}
-
-export function setRadioItem(value: string) {
-	const dropdownMenu = getContext<GetRadioGroupReturn>(RADIO_GROUP_NAME);
-	setContext(RADIO_ITEM_NAME, { isChecked: dropdownMenu.helpers.isChecked, value });
-	return dropdownMenu;
-}
-
-export function getRadioIndicator() {
-	return getContext<{
-		isChecked: Readable<(itemValue: string) => boolean>;
-		value: string;
-	}>(RADIO_ITEM_NAME);
-}
-
-export function getSubTrigger() {
-	const submenu = getContext<GetSubReturn>(SUB_NAME);
-	return submenu;
-}
-
-export function getContent(sideoffset = 5) {
-	const menu = getCtx();
-	menu.options.positioning.update((prev) => ({ ...prev, gutter: sideoffset }));
-
-	return menu;
-}
-
-export function getSubContent(sideOffset = -1) {
-	const submenu = getContext<GetSubReturn>(SUB_NAME);
-	submenu.options.positioning.update((prev) => ({ ...prev, gutter: sideOffset }));
-	return submenu;
-}
-
-export function setCheckboxItem(props: DropdownCheckboxItemProps) {
-	const {
-		builders: { createCheckboxItem }
-	} = getCtx();
-	const checkboxItem = createCheckboxItem(removeUndefined(props));
-	setContext(CHECKBOX_ITEM_NAME, checkboxItem.states.checked);
-
-	return {
-		...checkboxItem,
-		updateOption: getOptionUpdater(checkboxItem.options)
-	};
-}
-
-export function getCheckboxIndicator() {
-	return getContext<CheckboxReturn["states"]["checked"]>(CHECKBOX_ITEM_NAME);
-}
-export function setGroupCtx() {
-	const {
-		elements: { group }
-	} = getCtx();
-	const id = generateId();
-	setContext(GROUP_NAME, id);
-	return { group, id };
-}
-
-export function getGroupLabel() {
-	const id = getContext<string>(GROUP_NAME) ?? generateId();
-	const {
-		elements: { groupLabel }
-	} = getCtx();
-	return { groupLabel, id };
-}
-
-export function setArrow(size = 8) {
-	const menu = getCtx();
-	menu.options.arrowSize.set(size);
-	return menu;
-}
diff --git a/src/lib/bits/dropdown-menu/index.ts b/src/lib/bits/dropdown-menu/index.ts
index d049ab167..9a1c3f72f 100644
--- a/src/lib/bits/dropdown-menu/index.ts
+++ b/src/lib/bits/dropdown-menu/index.ts
@@ -1,19 +1,19 @@
-import Root from "./components/DropdownMenu.svelte";
-import Sub from "./components/DropdownMenuSub.svelte";
-import Item from "./components/DropdownMenuItem.svelte";
-import Group from "./components/DropdownMenuGroup.svelte";
-import Label from "./components/DropdownMenuLabel.svelte";
-import Arrow from "./components/DropdownMenuArrow.svelte";
-import Content from "./components/DropdownMenuContent.svelte";
-import Trigger from "./components/DropdownMenuTrigger.svelte";
-import RadioItem from "./components/DropdownMenuRadioItem.svelte";
-import Separator from "./components/DropdownMenuSeparator.svelte";
-import RadioGroup from "./components/DropdownMenuRadioGroup.svelte";
-import SubContent from "./components/DropdownMenuSubContent.svelte";
-import SubTrigger from "./components/DropdownMenuSubTrigger.svelte";
-import CheckboxItem from "./components/DropdownMenuCheckboxItem.svelte";
-import RadioIndicator from "./components/DropdownMenuRadioIndicator.svelte";
-import CheckboxIndicator from "./components/DropdownMenuCheckboxIndicator.svelte";
+import Root from "$lib/bits/menu/components/Menu.svelte";
+import Sub from "$lib/bits/menu/components/MenuSub.svelte";
+import Item from "$lib/bits/menu/components/MenuItem.svelte";
+import Group from "$lib/bits/menu/components/MenuGroup.svelte";
+import Label from "$lib/bits/menu/components/MenuLabel.svelte";
+import Arrow from "$lib/bits/menu/components/MenuArrow.svelte";
+import Content from "$lib/bits/menu/components/MenuContent.svelte";
+import Trigger from "$lib/bits/menu/components/MenuTrigger.svelte";
+import RadioItem from "$lib/bits/menu/components/MenuRadioItem.svelte";
+import Separator from "$lib/bits/menu/components/MenuSeparator.svelte";
+import RadioGroup from "$lib/bits/menu/components/MenuRadioGroup.svelte";
+import SubContent from "$lib/bits/menu/components/MenuSubContent.svelte";
+import SubTrigger from "$lib/bits/menu/components/MenuSubTrigger.svelte";
+import CheckboxItem from "$lib/bits/menu/components/MenuCheckboxItem.svelte";
+import RadioIndicator from "$lib/bits/menu/components/MenuRadioIndicator.svelte";
+import CheckboxIndicator from "$lib/bits/menu/components/MenuCheckboxIndicator.svelte";
 
 export {
 	Sub,
diff --git a/src/lib/bits/link-preview/components/LinkPreview.svelte b/src/lib/bits/link-preview/components/LinkPreview.svelte
index 5db8e09bd..d49b6b9e1 100644
--- a/src/lib/bits/link-preview/components/LinkPreview.svelte
+++ b/src/lib/bits/link-preview/components/LinkPreview.svelte
@@ -4,7 +4,6 @@
 	import type { Props } from "../types.js";
 	type $$Props = Props;
 
-	export let positioning: $$Props["positioning"] = undefined;
 	export let open: $$Props["open"] = undefined;
 	export let onOpenChange: $$Props["onOpenChange"] = undefined;
 	export let openDelay: $$Props["openDelay"] = 700;
@@ -19,7 +18,6 @@
 		ids
 	} = setCtx({
 		defaultOpen: open,
-		positioning,
 		openDelay,
 		closeDelay,
 		closeOnOutsideClick,
@@ -43,7 +41,6 @@
 	);
 
 	$: open !== undefined && localOpen.set(open);
-	$: updateOption("positioning", positioning);
 	$: updateOption("openDelay", openDelay);
 	$: updateOption("closeDelay", closeDelay);
 	$: updateOption("closeOnOutsideClick", closeOnOutsideClick);
diff --git a/src/lib/bits/link-preview/components/LinkPreviewContent.svelte b/src/lib/bits/link-preview/components/LinkPreviewContent.svelte
index c3a484d99..4e15f0b4c 100644
--- a/src/lib/bits/link-preview/components/LinkPreviewContent.svelte
+++ b/src/lib/bits/link-preview/components/LinkPreviewContent.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { melt } from "@melt-ui/svelte";
 	import { createDispatcher, type Transition } from "$lib/internal/index.js";
-	import { getCtx, getAttrs } from "../ctx.js";
+	import { getCtx, getAttrs, updatePositioning } from "../ctx.js";
 	import type { ContentEvents, ContentProps } from "../types.js";
 
 	type T = $$Generic<Transition>;
@@ -19,6 +19,15 @@
 	export let outTransitionConfig: $$Props["outTransitionConfig"] = undefined;
 	export let asChild: $$Props["asChild"] = false;
 	export let id: $$Props["id"] = undefined;
+	export let side: $$Props["side"] = "top";
+	export let align: $$Props["align"] = "center";
+	export let sideOffset: $$Props["sideOffset"] = 0;
+	export let alignOffset: $$Props["alignOffset"] = 0;
+	export let collisionPadding: $$Props["collisionPadding"] = 8;
+	export let avoidCollisions: $$Props["avoidCollisions"] = true;
+	export let collisionBoundary: $$Props["collisionBoundary"] = undefined;
+	export let sameWidth: $$Props["sameWidth"] = false;
+	export let fitViewport: $$Props["fitViewport"] = false;
 
 	const {
 		elements: { content },
@@ -38,6 +47,18 @@
 		builder,
 		attrs
 	};
+	
+	$: updatePositioning({
+		side,
+		align,
+		sideOffset,
+		alignOffset,
+		collisionPadding,
+		avoidCollisions,
+		collisionBoundary,
+		sameWidth,
+		fitViewport
+	});
 </script>
 
 {#if asChild && $open}
diff --git a/src/lib/bits/link-preview/ctx.ts b/src/lib/bits/link-preview/ctx.ts
index da8a24a49..bc90ace43 100644
--- a/src/lib/bits/link-preview/ctx.ts
+++ b/src/lib/bits/link-preview/ctx.ts
@@ -5,9 +5,13 @@ import {
 	type LinkPreview as LinkPreviewReturn
 } from "@melt-ui/svelte";
 import { getContext, setContext } from "svelte";
+import { getPositioningUpdater, type PositioningProps } from "../floating/helpers.js";
+import type { Writable } from "svelte/store";
+import type { FloatingConfig } from "../floating/floating-config.js";
 
 const NAME = "link-preview";
 const PARTS = ["arrow", "content", "trigger"];
+
 export const getAttrs = createBitAttrs(NAME, PARTS);
 
 type GetReturn = LinkPreviewReturn;
@@ -33,3 +37,18 @@ export function setArrow(size = 8) {
 	linkPreview.options.arrowSize.set(size);
 	return linkPreview;
 }
+
+const defaultPlacement = {
+	side: "bottom",
+	align: "center"
+} satisfies PositioningProps;
+
+export function updatePositioning(props: PositioningProps) {
+	const withDefaults = { ...defaultPlacement, ...props } satisfies PositioningProps;
+	const {
+		options: { positioning }
+	} = getCtx();
+
+	const updater = getPositioningUpdater(positioning as Writable<FloatingConfig>);
+	updater(withDefaults);
+}
diff --git a/src/lib/bits/dropdown-menu/components/DropdownMenu.svelte b/src/lib/bits/menu/components/Menu.svelte
similarity index 93%
rename from src/lib/bits/dropdown-menu/components/DropdownMenu.svelte
rename to src/lib/bits/menu/components/Menu.svelte
index 407c33bf9..f4c29744c 100644
--- a/src/lib/bits/dropdown-menu/components/DropdownMenu.svelte
+++ b/src/lib/bits/menu/components/Menu.svelte
@@ -10,7 +10,6 @@
 	export let open: $$Props["open"] = undefined;
 	export let onOpenChange: $$Props["onOpenChange"] = undefined;
 	export let preventScroll: $$Props["preventScroll"] = undefined;
-	export let positioning: $$Props["positioning"] = undefined;
 	export let loop: $$Props["loop"] = undefined;
 	export let dir: $$Props["dir"] = undefined;
 	export let typeahead: $$Props["typeahead"] = undefined;
@@ -29,7 +28,6 @@
 		forceVisible: true,
 		defaultOpen: open,
 		preventScroll,
-		positioning,
 		loop,
 		dir,
 		typeahead,
@@ -58,7 +56,6 @@
 	$: updateOption("closeOnEscape", closeOnEscape);
 	$: updateOption("portal", portal);
 	$: updateOption("preventScroll", preventScroll);
-	$: updateOption("positioning", positioning);
 	$: updateOption("loop", loop);
 	$: updateOption("dir", dir);
 	$: updateOption("closeFocus", closeFocus);
diff --git a/src/lib/bits/menu/components/MenuSub.svelte b/src/lib/bits/menu/components/MenuSub.svelte
index 5a837512d..ed6e571c2 100644
--- a/src/lib/bits/menu/components/MenuSub.svelte
+++ b/src/lib/bits/menu/components/MenuSub.svelte
@@ -2,9 +2,9 @@
 	import { derived } from "svelte/store";
 	import { setSubMenuCtx } from "../ctx.js";
 	import type { SubProps } from "../types.js";
+
 	type $$Props = SubProps;
 
-	export let positioning: $$Props["positioning"] = undefined;
 	export let disabled: $$Props["disabled"] = undefined;
 	export let open: $$Props["open"] = undefined;
 	export let onOpenChange: $$Props["onOpenChange"] = undefined;
@@ -14,7 +14,6 @@
 		ids,
 		states: { subOpen }
 	} = setSubMenuCtx({
-		positioning,
 		disabled,
 		onOpenChange: ({ next }) => {
 			if (open !== next) {
@@ -35,7 +34,6 @@
 
 	$: open !== undefined && subOpen.set(open);
 
-	$: updateOption("positioning", positioning);
 	$: updateOption("disabled", disabled);
 </script>
 
diff --git a/src/lib/bits/menu/components/MenuSubContent.svelte b/src/lib/bits/menu/components/MenuSubContent.svelte
index 3bafefb93..212807eb0 100644
--- a/src/lib/bits/menu/components/MenuSubContent.svelte
+++ b/src/lib/bits/menu/components/MenuSubContent.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { melt } from "@melt-ui/svelte";
 	import { createDispatcher, type Transition } from "$lib/internal/index.js";
-	import { getAttrs, getSubMenuCtx, updateSubPositioning } from "../ctx.js";
+	import { getAttrs, getSubmenuCtx, updateSubPositioning } from "../ctx.js";
 	import type { SubContentEvents, SubContentProps } from "../types.js";
 
 	type T = $$Generic<Transition>;
@@ -32,7 +32,7 @@
 		elements: { subMenu },
 		states: { subOpen },
 		ids
-	} = getSubMenuCtx();
+	} = getSubmenuCtx();
 
 	const dispatch = createDispatcher();
 	const attrs = getAttrs("sub-content");
diff --git a/src/lib/bits/menu/components/MenuTrigger.svelte b/src/lib/bits/menu/components/MenuTrigger.svelte
index 662c81191..d3c9b1270 100644
--- a/src/lib/bits/menu/components/MenuTrigger.svelte
+++ b/src/lib/bits/menu/components/MenuTrigger.svelte
@@ -1,11 +1,14 @@
 <script lang="ts">
 	import { melt } from "@melt-ui/svelte";
 	import { getCtx, getAttrs } from "../ctx.js";
-	import type { TriggerEvents, TriggerProps } from "../types.js";
+	import type {
+		DropdownTriggerEvents,
+		DropdownTriggerProps
+	} from "../types.js";
 	import { createDispatcher } from "$lib/internal/events.js";
 
-	type $$Props = TriggerProps;
-	type $$Events = TriggerEvents;
+	type $$Props = DropdownTriggerProps;
+	type $$Events = DropdownTriggerEvents;
 
 	export let asChild: $$Props["asChild"] = false;
 	export let id: $$Props["id"] = undefined;
diff --git a/src/lib/bits/menu/ctx.ts b/src/lib/bits/menu/ctx.ts
index 38bcb1725..41a2ac406 100644
--- a/src/lib/bits/menu/ctx.ts
+++ b/src/lib/bits/menu/ctx.ts
@@ -4,18 +4,21 @@ import {
 	getOptionUpdater,
 	removeUndefined
 } from "$lib/internal/index.js";
-import type {
-	ContextMenu as ContextMenuReturn,
-	ContextMenuRadioGroup as ContextRadioGroupReturn,
-	ContextMenuSubmenu as ContextSubmenuReturn,
-	Checkbox as CheckboxReturn,
-	CreateContextMenuCheckboxItemProps as ContextCheckboxItemProps,
-	CreateContextMenuRadioGroupProps,
-	CreateContextSubmenuProps
+import {
+	type CreateDropdownSubmenuProps as DropdownSubmenuProps,
+	type DropdownMenu as DropdownMenuReturn,
+	type CreateMenuRadioGroupProps as DropdownRadioGroupProps,
+	type DropdownMenuRadioGroup as DropdownRadioGroupReturn,
+	type DropdownMenuSubmenu as DropdownSubmenuReturn,
+	type Checkbox as CheckboxReturn,
+	type CreateDropdownMenuCheckboxItemProps as DropdownCheckboxItemProps,
+	type CreateDropdownMenuProps,
+	createDropdownMenu
 } from "@melt-ui/svelte";
 import { getContext, setContext } from "svelte";
 import type { Readable, Writable } from "svelte/store";
-import { getPositioningUpdater, type PositioningProps } from "../floating/helpers.js";
+import { getPositioningUpdater, type PositioningProps } from "../floating/helpers";
+import type { FloatingConfig } from "../floating/floating-config";
 
 const NAME = "menu";
 const SUB_NAME = "menu-submenu";
@@ -42,15 +45,24 @@ const PARTS = [
 
 export const getAttrs = createBitAttrs("menu", PARTS);
 
-type GetReturn = ContextMenuReturn;
-type GetSubReturn = ContextSubmenuReturn;
-type GetRadioReturn = ContextRadioGroupReturn;
+type GetReturn = DropdownMenuReturn;
+type GetSubReturn = DropdownSubmenuReturn;
+type GetRadioGroupReturn = DropdownRadioGroupReturn;
 
 export function getCtx() {
 	return getContext<GetReturn>(NAME);
 }
 
-export function setSubMenuCtx(props: CreateContextSubmenuProps) {
+export function setCtx(props: CreateDropdownMenuProps) {
+	const dropdownMenu = createDropdownMenu({ ...removeUndefined(props), forceVisible: true });
+	setContext(NAME, dropdownMenu);
+	return {
+		...dropdownMenu,
+		updateOption: getOptionUpdater(dropdownMenu.options)
+	};
+}
+
+export function setSubMenuCtx(props: DropdownSubmenuProps) {
 	const {
 		builders: { createSubmenu }
 	} = getCtx();
@@ -62,30 +74,19 @@ export function setSubMenuCtx(props: CreateContextSubmenuProps) {
 	};
 }
 
-export function getSubMenuCtx() {
-	return getContext<GetSubReturn>(SUB_NAME);
-}
-
-export function setRadioGroupCtx(props: CreateContextMenuRadioGroupProps) {
+export function setRadioGroupCtx(props: DropdownRadioGroupProps) {
 	const {
 		builders: { createMenuRadioGroup }
 	} = getCtx();
-	const radioGroup = createMenuRadioGroup(removeUndefined(props));
+	const radioGroup = createMenuRadioGroup(props);
 	setContext(RADIO_GROUP_NAME, radioGroup);
 	return radioGroup;
 }
 
-function getRadioGroupCtx() {
-	return getContext<GetRadioReturn>(RADIO_GROUP_NAME);
-}
-
 export function setRadioItem(value: string) {
-	const radioGroup = getRadioGroupCtx();
-	setContext(RADIO_ITEM_NAME, {
-		isChecked: radioGroup.helpers.isChecked,
-		value
-	});
-	return radioGroup;
+	const dropdownMenu = getContext<GetRadioGroupReturn>(RADIO_GROUP_NAME);
+	setContext(RADIO_ITEM_NAME, { isChecked: dropdownMenu.helpers.isChecked, value });
+	return dropdownMenu;
 }
 
 export function getRadioIndicator() {
@@ -95,7 +96,16 @@ export function getRadioIndicator() {
 	}>(RADIO_ITEM_NAME);
 }
 
-export function setCheckboxItem(props: ContextCheckboxItemProps) {
+export function getSubTrigger() {
+	const submenu = getContext<GetSubReturn>(SUB_NAME);
+	return submenu;
+}
+
+export function getSubmenuCtx() {
+	return getContext<GetSubReturn>(SUB_NAME);
+}
+
+export function setCheckboxItem(props: DropdownCheckboxItemProps) {
 	const {
 		builders: { createCheckboxItem }
 	} = getCtx();
@@ -111,8 +121,7 @@ export function setCheckboxItem(props: ContextCheckboxItemProps) {
 export function getCheckboxIndicator() {
 	return getContext<CheckboxReturn["states"]["checked"]>(CHECKBOX_ITEM_NAME);
 }
-
-export function setGroup() {
+export function setGroupCtx() {
 	const {
 		elements: { group }
 	} = getCtx();
@@ -159,7 +168,7 @@ export function updateSubPositioning(props: PositioningProps) {
 	const withDefaults = { ...defaultSubPlacement, ...props } satisfies PositioningProps;
 	const {
 		options: { positioning }
-	} = getCtx();
+	} = getSubmenuCtx();
 
 	const updater = getPositioningUpdater(positioning as Writable<FloatingConfig>);
 	updater(withDefaults);
diff --git a/src/lib/bits/menu/index.ts b/src/lib/bits/menu/index.ts
index a0c4ebf25..a6c8d1293 100644
--- a/src/lib/bits/menu/index.ts
+++ b/src/lib/bits/menu/index.ts
@@ -1 +1,18 @@
+export { default as Root } from "./components/Menu.svelte";
+export { default as Arrow } from "./components/MenuArrow.svelte";
+export { default as CheckboxIndicator } from "./components/MenuCheckboxIndicator.svelte";
+export { default as CheckboxItem } from "./components/MenuCheckboxItem.svelte";
+export { default as Content } from "./components/MenuContent.svelte";
+export { default as Group } from "./components/MenuGroup.svelte";
+export { default as Item } from "./components/MenuItem.svelte";
+export { default as Label } from "./components/MenuLabel.svelte";
+export { default as RadioGroup } from "./components/MenuRadioGroup.svelte";
+export { default as RadioIndicator } from "./components/MenuRadioIndicator.svelte";
+export { default as RadioItem } from "./components/MenuRadioItem.svelte";
+export { default as Separator } from "./components/MenuSeparator.svelte";
+export { default as Sub } from "./components/MenuSub.svelte";
+export { default as SubContent } from "./components/MenuSubContent.svelte";
+export { default as SubTrigger } from "./components/MenuSubTrigger.svelte";
+export { default as Trigger } from "./components/MenuTrigger.svelte";
+
 export * from "./types.js";
diff --git a/src/lib/bits/menubar/components/MenubarArrow.svelte b/src/lib/bits/menubar/components/MenubarArrow.svelte
deleted file mode 100644
index ea901e115..000000000
--- a/src/lib/bits/menubar/components/MenubarArrow.svelte
+++ /dev/null
@@ -1,27 +0,0 @@
-<script lang="ts">
-	import { melt } from "@melt-ui/svelte";
-	import { setArrow, getAttrs } from "../ctx.js";
-	import type { ArrowProps } from "../types.js";
-
-	type $$Props = ArrowProps;
-
-	export let size = 8;
-	export let asChild: $$Props["asChild"] = false;
-
-	const {
-		elements: { arrow }
-	} = setArrow(size);
-	const attrs = getAttrs("arrow");
-
-	$: builder = $arrow;
-	$: slotProps = {
-		builder,
-		attrs
-	};
-</script>
-
-{#if asChild}
-	<slot {...slotProps} />
-{:else}
-	<div use:melt={builder} {...attrs} />
-{/if}
diff --git a/src/lib/bits/menubar/components/MenubarCheckboxIndicator.svelte b/src/lib/bits/menubar/components/MenubarCheckboxIndicator.svelte
deleted file mode 100644
index 0aac5f175..000000000
--- a/src/lib/bits/menubar/components/MenubarCheckboxIndicator.svelte
+++ /dev/null
@@ -1,24 +0,0 @@
-<script lang="ts">
-	import type { CheckboxItemIndicatorProps } from "../types.js";
-	import { getCheckboxIndicator, getAttrs } from "../ctx.js";
-
-	type $$Props = CheckboxItemIndicatorProps;
-	export let asChild: $$Props["asChild"] = false;
-
-	const checked = getCheckboxIndicator();
-	const attrs = getAttrs("checkbox-indicator");
-	$: slotProps = {
-		attrs,
-		checked: $checked
-	};
-</script>
-
-{#if asChild}
-	<slot {...slotProps} />
-{:else}
-	<div {...$$restProps} {...attrs}>
-		{#if $checked}
-			<slot {...slotProps} />
-		{/if}
-	</div>
-{/if}
diff --git a/src/lib/bits/menubar/components/MenubarCheckboxItem.svelte b/src/lib/bits/menubar/components/MenubarCheckboxItem.svelte
deleted file mode 100644
index 9b142ee57..000000000
--- a/src/lib/bits/menubar/components/MenubarCheckboxItem.svelte
+++ /dev/null
@@ -1,58 +0,0 @@
-<script lang="ts">
-	import { melt } from "@melt-ui/svelte";
-	import { setCheckboxItem, getAttrs } from "../ctx.js";
-	import type { CheckboxItemEvents, CheckboxItemProps } from "../types.js";
-	import { createDispatcher } from "$lib/internal/events.js";
-
-	type $$Props = CheckboxItemProps;
-	type $$Events = CheckboxItemEvents;
-
-	export let checked: $$Props["checked"] = undefined;
-	export let onCheckedChange: $$Props["onCheckedChange"] = undefined;
-	export let disabled: $$Props["disabled"] = undefined;
-	export let asChild: $$Props["asChild"] = false;
-
-	const {
-		elements: { checkboxItem },
-		states: { checked: localChecked },
-		updateOption
-	} = setCheckboxItem({
-		disabled,
-		defaultChecked: checked,
-		onCheckedChange: ({ next }) => {
-			onCheckedChange?.(next);
-			checked = next;
-			return next;
-		}
-	});
-
-	const dispatch = createDispatcher();
-	const attrs = getAttrs("checkbox-item");
-
-	$: checked !== undefined && localChecked.set(checked);
-	$: updateOption("disabled", disabled);
-	$: builder = $checkboxItem;
-	$: slotProps = {
-		builder,
-		attrs
-	};
-</script>
-
-{#if asChild}
-	<slot {...slotProps} />
-{:else}
-	<div
-		use:melt={builder}
-		{...$$restProps}
-		{...attrs}
-		on:m-click={dispatch}
-		on:m-focusin={dispatch}
-		on:m-focusout={dispatch}
-		on:m-keydown={dispatch}
-		on:m-pointerdown={dispatch}
-		on:m-pointerleave={dispatch}
-		on:m-pointermove={dispatch}
-	>
-		<slot {...slotProps} />
-	</div>
-{/if}
diff --git a/src/lib/bits/menubar/components/MenubarContent.svelte b/src/lib/bits/menubar/components/MenubarContent.svelte
deleted file mode 100644
index fa6a89335..000000000
--- a/src/lib/bits/menubar/components/MenubarContent.svelte
+++ /dev/null
@@ -1,89 +0,0 @@
-<script lang="ts">
-	import { createDispatcher, type Transition } from "$lib/internal/index.js";
-	import { melt } from "@melt-ui/svelte";
-	import { getContent, getAttrs } from "../ctx.js";
-	import type { ContentEvents, ContentProps } from "../types.js";
-
-	type T = $$Generic<Transition>;
-	type In = $$Generic<Transition>;
-	type Out = $$Generic<Transition>;
-	type $$Props = ContentProps<T, In, Out>;
-	type $$Events = ContentEvents;
-
-	export let sideOffset: $$Props["sideOffset"] = 5;
-	export let transition: $$Props["transition"] = undefined;
-	export let transitionConfig: $$Props["transitionConfig"] = undefined;
-	export let inTransition: $$Props["inTransition"] = undefined;
-	export let inTransitionConfig: $$Props["inTransitionConfig"] = undefined;
-	export let outTransition: $$Props["outTransition"] = undefined;
-	export let outTransitionConfig: $$Props["outTransitionConfig"] = undefined;
-	export let asChild: $$Props["asChild"] = false;
-	export let id: $$Props["id"] = undefined;
-
-	const {
-		elements: { menu },
-		states: { open },
-		ids
-	} = getContent(sideOffset);
-
-	const dispatch = createDispatcher();
-	const attrs = getAttrs("content");
-
-	$: if (id) {
-		ids.menu.set(id);
-	}
-	$: builder = $menu;
-	$: slotProps = {
-		builder,
-		attrs
-	};
-</script>
-
-{#if asChild && $open}
-	<slot {...slotProps} />
-{:else if transition && $open}
-	<div
-		transition:transition={transitionConfig}
-		use:melt={builder}
-		{...$$restProps}
-		{...attrs}
-		on:m-keydown={dispatch}
-	>
-		<slot {...slotProps} />
-	</div>
-{:else if inTransition && outTransition && $open}
-	<div
-		in:inTransition={inTransitionConfig}
-		out:outTransition={outTransitionConfig}
-		use:melt={builder}
-		{...$$restProps}
-		{...attrs}
-		on:m-keydown={dispatch}
-	>
-		<slot {...slotProps} />
-	</div>
-{:else if inTransition && $open}
-	<div
-		in:inTransition={inTransitionConfig}
-		use:melt={builder}
-		{...$$restProps}
-		{...attrs}
-		on:m-keydown={dispatch}
-	>
-		<slot {...slotProps} />
-	</div>
-{:else if outTransition && $open}
-	<div
-		out:outTransition={outTransitionConfig}
-		use:melt={builder}
-		{...$$restProps}
-		{...attrs}
-		on:m-keydown={dispatch}
-	>
-		<slot {...slotProps} />
-	</div>
-{:else if $open}
-	<div use:melt={builder} {...$$restProps} {...attrs} on:m-keydown={dispatch}>
-		<slot {...slotProps} />
-	</div>
-{/if}
diff --git a/src/lib/bits/menubar/components/MenubarGroup.svelte b/src/lib/bits/menubar/components/MenubarGroup.svelte
deleted file mode 100644
index 9b2581d33..000000000
--- a/src/lib/bits/menubar/components/MenubarGroup.svelte
+++ /dev/null
@@ -1,26 +0,0 @@
-<script lang="ts">
-	import { melt } from "@melt-ui/svelte";
-	import { setGroupCtx, getAttrs } from "../ctx.js";
-	import type { GroupProps } from "../types.js";
-
-	type $$Props = GroupProps;
-
-	export let asChild: $$Props["asChild"] = false;
-
-	const { group, id } = setGroupCtx();
-	const attrs = getAttrs("group");
-
-	$: builder = $group(id);
-	$: slotProps = {
-		builder,
-		attrs
-	};
-</script>
-
-{#if asChild}
-	<slot {...slotProps} />
-{:else}
-	<div use:melt={builder} {...$$restProps} {...attrs}>
-		<slot {...slotProps} />
-	</div>
-{/if}
diff --git a/src/lib/bits/menubar/components/MenubarItem.svelte b/src/lib/bits/menubar/components/MenubarItem.svelte
deleted file mode 100644
index 29ca5a3f7..000000000
--- a/src/lib/bits/menubar/components/MenubarItem.svelte
+++ /dev/null
@@ -1,44 +0,0 @@
-<script lang="ts">
-	import { melt } from "@melt-ui/svelte";
-	import { disabledAttrs } from "$lib/internal/index.js";
-	import { getMenuCtx, getAttrs } from "../ctx.js";
-	import type { ItemEvents, ItemProps } from "../types.js";
-	import { createDispatcher } from "$lib/internal/events.js";
-
-	type $$Props = ItemProps;
-	type $$Events = ItemEvents;
-
-	export let asChild: $$Props["asChild"] = false;
-	export let disabled: $$Props["disabled"] = false;
-
-	const {
-		elements: { item }
-	} = getMenuCtx();
-	const dispatch = createDispatcher();
-
-	$: builder = $item;
-	$: attrs = { ...getAttrs("item"), ...disabledAttrs(disabled) };
-	$: slotProps = {
-		builder,
-		attrs
-	};
-</script>
-
-{#if asChild}
-	<slot {...slotProps} />
-{:else}
-	<div
-		use:melt={builder}
-		{...$$restProps}
-		{...attrs}
-		on:m-click={dispatch}
-		on:m-focusin={dispatch}
-		on:m-focusout={dispatch}
-		on:m-keydown={dispatch}
-		on:m-pointerdown={dispatch}
-		on:m-pointerleave={dispatch}
-		on:m-pointermove={dispatch}
-	>
-		<slot {...slotProps} />
-	</div>
-{/if}
diff --git a/src/lib/bits/menubar/components/MenubarLabel.svelte b/src/lib/bits/menubar/components/MenubarLabel.svelte
deleted file mode 100644
index 6f5db1b6d..000000000
--- a/src/lib/bits/menubar/components/MenubarLabel.svelte
+++ /dev/null
@@ -1,26 +0,0 @@
-<script lang="ts">
-	import { melt } from "@melt-ui/svelte";
-	import { getGroupLabel, getAttrs } from "../ctx.js";
-	import type { LabelProps } from "../types.js";
-
-	type $$Props = LabelProps;
-
-	export let asChild: $$Props["asChild"] = false;
-
-	const { groupLabel, id } = getGroupLabel();
-	const attrs = getAttrs("label");
-
-	$: builder = $groupLabel(id);
-	$: slotProps = {
-		builder,
-		attrs
-	};
-</script>
-
-{#if asChild}
-	<slot {...slotProps} />
-{:else}
-	<div use:melt={builder} {...$$restProps} {...attrs}>
-		<slot {...slotProps} />
-	</div>
-{/if}
diff --git a/src/lib/bits/menubar/components/MenubarMenu.svelte b/src/lib/bits/menubar/components/MenubarMenu.svelte
index dceb4b7a2..defdab715 100644
--- a/src/lib/bits/menubar/components/MenubarMenu.svelte
+++ b/src/lib/bits/menubar/components/MenubarMenu.svelte
@@ -10,7 +10,6 @@
 	export let open: $$Props["open"] = undefined;
 	export let onOpenChange: $$Props["onOpenChange"] = undefined;
 	export let preventScroll: $$Props["preventScroll"] = undefined;
-	export let positioning: $$Props["positioning"] = undefined;
 	export let loop: $$Props["loop"] = undefined;
 	export let dir: $$Props["dir"] = undefined;
 	export let typeahead: $$Props["typeahead"] = undefined;
@@ -27,7 +26,6 @@
 		closeOnEscape,
 		portal,
 		preventScroll,
-		positioning,
 		loop,
 		dir,
 		typeahead,
@@ -56,7 +54,6 @@
 	$: updateOption("closeOnEscape", closeOnEscape);
 	$: updateOption("portal", portal);
 	$: updateOption("preventScroll", preventScroll);
-	$: updateOption("positioning", positioning);
 	$: updateOption("loop", loop);
 	$: updateOption("dir", dir);
 	$: updateOption("closeFocus", closeFocus);
diff --git a/src/lib/bits/menubar/components/MenubarRadioGroup.svelte b/src/lib/bits/menubar/components/MenubarRadioGroup.svelte
deleted file mode 100644
index 0965c31ee..000000000
--- a/src/lib/bits/menubar/components/MenubarRadioGroup.svelte
+++ /dev/null
@@ -1,42 +0,0 @@
-<script lang="ts">
-	import { melt } from "@melt-ui/svelte";
-	import { setRadioGroupCtx, getAttrs } from "../ctx.js";
-	import type { RadioGroupProps } from "../types.js";
-
-	type $$Props = RadioGroupProps;
-
-	export let value: $$Props["value"] = undefined;
-	export let onValueChange: $$Props["onValueChange"] = undefined;
-	export let asChild: $$Props["asChild"] = false;
-
-	const {
-		elements: { radioGroup },
-		states: { value: localValue }
-	} = setRadioGroupCtx({
-		defaultValue: value,
-		onValueChange: ({ next }) => {
-			if (next) {
-				value = next;
-				onValueChange?.(next);
-			}
-			return next;
-		}
-	});
-
-	const attrs = getAttrs("radio-group");
-
-	$: value !== undefined && localValue.set(value);
-	$: builder = $radioGroup;
-	$: slotProps = {
-		builder,
-		attrs
-	};
-</script>
-
-{#if asChild}
-	<slot {...slotProps} />
-{:else}
-	<div use:melt={builder} {...$$restProps} {...attrs}>
-		<slot {...slotProps} />
-	</div>
-{/if}
diff --git a/src/lib/bits/menubar/components/MenubarRadioIndicator.svelte b/src/lib/bits/menubar/components/MenubarRadioIndicator.svelte
deleted file mode 100644
index b0c0a7baa..000000000
--- a/src/lib/bits/menubar/components/MenubarRadioIndicator.svelte
+++ /dev/null
@@ -1,8 +0,0 @@
-<script lang="ts">
-	import { getRadioIndicator } from "../ctx.js";
-	const { isChecked, value } = getRadioIndicator();
-</script>
-
-{#if $isChecked(value)}
-	<slot />
-{/if}
diff --git a/src/lib/bits/menubar/components/MenubarRadioItem.svelte b/src/lib/bits/menubar/components/MenubarRadioItem.svelte
deleted file mode 100644
index 45263e21b..000000000
--- a/src/lib/bits/menubar/components/MenubarRadioItem.svelte
+++ /dev/null
@@ -1,45 +0,0 @@
-<script lang="ts">
-	import { melt } from "@melt-ui/svelte";
-	import { setRadioItemCtx, getAttrs } from "../ctx.js";
-	import type { RadioItemEvents, RadioItemProps } from "../types.js";
-	import { createDispatcher } from "$lib/internal/events.js";
-
-	type $$Props = RadioItemProps;
-	type $$Events = RadioItemEvents;
-
-	export let value: $$Props["value"];
-	export let disabled: $$Props["disabled"] = false;
-	export let asChild: $$Props["asChild"] = false;
-
-	const {
-		elements: { radioItem }
-	} = setRadioItemCtx(value);
-
-	const dispatch = createDispatcher();
-	const attrs = getAttrs("radio-item");
-
-	$: builder = $radioItem({ value, disabled });
-	$: slotProps = {
-		builder,
-		attrs
-	};
-</script>
-
-{#if asChild}
-	<slot {...slotProps} />
-{:else}
-	<div
-		use:melt={builder}
-		{...$$restProps}
-		{...attrs}
-		on:m-click={dispatch}
-		on:m-focusin={dispatch}
-		on:m-focusout={dispatch}
-		on:m-keydown={dispatch}
-		on:m-pointerdown={dispatch}
-		on:m-pointerleave={dispatch}
-		on:m-pointermove={dispatch}
-	>
-		<slot {...slotProps} />
-	</div>
-{/if}
diff --git a/src/lib/bits/menubar/components/MenubarSeparator.svelte b/src/lib/bits/menubar/components/MenubarSeparator.svelte
deleted file mode 100644
index cb9f75023..000000000
--- a/src/lib/bits/menubar/components/MenubarSeparator.svelte
+++ /dev/null
@@ -1,27 +0,0 @@
-<script lang="ts">
-	import { melt } from "@melt-ui/svelte";
-	import { getMenuCtx, getAttrs } from "../ctx.js";
-	import type { SeparatorProps } from "../types.js";
-
-	type $$Props = SeparatorProps;
-
-	export let asChild: $$Props["asChild"] = false;
-
-	const {
-		elements: { separator }
-	} = getMenuCtx();
-
-	const attrs = getAttrs("separator");
-
-	$: builder = $separator;
-	$: slotProps = {
-		builder,
-		attrs
-	};
-</script>
-
-{#if asChild}
-	<slot {...slotProps} />
-{:else}
-	<div use:melt={builder} {...$$restProps} {...attrs} />
-{/if}
diff --git a/src/lib/bits/menubar/components/MenubarSub.svelte b/src/lib/bits/menubar/components/MenubarSub.svelte
index 7177c88b2..ed6e571c2 100644
--- a/src/lib/bits/menubar/components/MenubarSub.svelte
+++ b/src/lib/bits/menubar/components/MenubarSub.svelte
@@ -5,7 +5,6 @@
 
 	type $$Props = SubProps;
 
-	export let positioning: $$Props["positioning"] = undefined;
 	export let disabled: $$Props["disabled"] = undefined;
 	export let open: $$Props["open"] = undefined;
 	export let onOpenChange: $$Props["onOpenChange"] = undefined;
@@ -15,7 +14,6 @@
 		ids,
 		states: { subOpen }
 	} = setSubMenuCtx({
-		positioning,
 		disabled,
 		onOpenChange: ({ next }) => {
 			if (open !== next) {
@@ -36,7 +34,6 @@
 
 	$: open !== undefined && subOpen.set(open);
 
-	$: updateOption("positioning", positioning);
 	$: updateOption("disabled", disabled);
 </script>
 
diff --git a/src/lib/bits/menubar/components/MenubarSubContent.svelte b/src/lib/bits/menubar/components/MenubarSubContent.svelte
deleted file mode 100644
index c40734649..000000000
--- a/src/lib/bits/menubar/components/MenubarSubContent.svelte
+++ /dev/null
@@ -1,103 +0,0 @@
-<script lang="ts">
-	import { createDispatcher, type Transition } from "$lib/internal/index.js";
-	import { melt } from "@melt-ui/svelte";
-	import { getSubMenuCtx, getAttrs } from "../ctx.js";
-	import type { SubContentEvents, SubContentProps } from "../types.js";
-
-	type T = $$Generic<Transition>;
-	type In = $$Generic<Transition>;
-	type Out = $$Generic<Transition>;
-	type $$Props = SubContentProps<T, In, Out>;
-	type $$Events = SubContentEvents;
-
-	export let transition: $$Props["transition"] = undefined;
-	export let transitionConfig: $$Props["transitionConfig"] = undefined;
-	export let inTransition: $$Props["inTransition"] = undefined;
-	export let inTransitionConfig: $$Props["inTransitionConfig"] = undefined;
-	export let outTransition: $$Props["outTransition"] = undefined;
-	export let outTransitionConfig: $$Props["outTransitionConfig"] = undefined;
-	export let asChild: $$Props["asChild"] = false;
-	export let id: $$Props["id"] = undefined;
-
-	const {
-		elements: { subMenu },
-		states: { subOpen },
-		ids
-	} = getSubMenuCtx();
-
-	const dispatch = createDispatcher();
-	const attrs = getAttrs("sub-content");
-
-	$: if (id) {
-		ids.menu.set(id);
-	}
-	$: builder = $subMenu;
-	$: slotProps = {
-		builder,
-		attrs
-	};
-</script>
-
-{#if asChild && $subOpen}
-	<slot {...slotProps} />
-{:else if transition && $subOpen}
-	<div
-		transition:transition={transitionConfig}
-		use:melt={builder}
-		{...$$restProps}
-		{...attrs}
-		on:m-focusout={dispatch}
-		on:m-keydown={dispatch}
-		on:m-pointermove={dispatch}
-	>
-		<slot {...slotProps} />
-	</div>
-{:else if inTransition && outTransition && $subOpen}
-	<div
-		in:inTransition={inTransitionConfig}
-		out:outTransition={outTransitionConfig}
-		use:melt={builder}
-		{...$$restProps}
-		{...attrs}
-		on:m-focusout={dispatch}
-		on:m-keydown={dispatch}
-		on:m-pointermove={dispatch}
-	>
-		<slot {...slotProps} />
-	</div>
-{:else if inTransition && $subOpen}
-	<div
-		in:inTransition={inTransitionConfig}
-		use:melt={builder}
-		{...$$restProps}
-		{...attrs}
-		on:m-focusout={dispatch}
-		on:m-keydown={dispatch}
-		on:m-pointermove={dispatch}
-	>
-		<slot {...slotProps} />
-	</div>
-{:else if outTransition && $subOpen}
-	<div
-		out:outTransition={outTransitionConfig}
-		use:melt={builder}
-		{...$$restProps}
-		{...attrs}
-		on:m-focusout={dispatch}
-		on:m-keydown={dispatch}
-		on:m-pointermove={dispatch}
-	>
-		<slot {...slotProps} />
-	</div>
-{:else if $subOpen}
-	<div
-		use:melt={builder}
-		{...$$restProps}
-		{...attrs}
-		on:m-focusout={dispatch}
-		on:m-keydown={dispatch}
-		on:m-pointermove={dispatch}
-	>
-		<slot {...slotProps} />
-	</div>
-{/if}
diff --git a/src/lib/bits/menubar/components/MenubarSubTrigger.svelte b/src/lib/bits/menubar/components/MenubarSubTrigger.svelte
deleted file mode 100644
index a66f9ec45..000000000
--- a/src/lib/bits/menubar/components/MenubarSubTrigger.svelte
+++ /dev/null
@@ -1,49 +0,0 @@
-<script lang="ts">
-	import { melt } from "@melt-ui/svelte";
-	import { disabledAttrs } from "$lib/internal/index.js";
-	import { getSubMenuCtx, getAttrs } from "../ctx.js";
-	import type { SubTriggerEvents, SubTriggerProps } from "../types.js";
-	import { createDispatcher } from "$lib/internal/events.js";
-
-	type $$Props = SubTriggerProps;
-	type $$Events = SubTriggerEvents;
-
-	export let disabled: $$Props["disabled"] = false;
-	export let asChild: $$Props["asChild"] = false;
-	export let id: $$Props["id"] = undefined;
-
-	const {
-		elements: { subTrigger },
-		ids
-	} = getSubMenuCtx();
-
-	const dispatch = createDispatcher();
-
-	$: if (id) {
-		ids.trigger.set(id);
-	}
-	$: builder = $subTrigger;
-	$: attrs = { ...getAttrs("sub-trigger"), ...disabledAttrs(disabled) };
-	$: slotProps = {
-		builder,
-		attrs
-	};
-</script>
-
-{#if asChild}
-	<slot {...slotProps} />
-{:else}
-	<div
-		use:melt={builder}
-		{...$$restProps}
-		{...attrs}
-		on:m-click={dispatch}
-		on:m-focusin={dispatch}
-		on:m-focusout={dispatch}
-		on:m-keydown={dispatch}
-		on:m-pointerleave={dispatch}
-		on:m-pointermove={dispatch}
-	>
-		<slot {...slotProps} />
-	</div>
-{/if}
diff --git a/src/lib/bits/menubar/ctx.ts b/src/lib/bits/menubar/ctx.ts
index 1fc92c2ef..590510d51 100644
--- a/src/lib/bits/menubar/ctx.ts
+++ b/src/lib/bits/menubar/ctx.ts
@@ -3,30 +3,21 @@ import {
 	type Menubar as MenubarReturn,
 	type CreateMenubarProps as MenubarProps,
 	type MenubarMenu as MenubarMenuReturn,
-	type MenubarMenuRadioGroup as MenubarRadioGroupReturn,
-	type CreateMenuRadioGroupProps,
 	type CreateMenubarSubmenuProps,
 	type CreateMenubarMenuProps,
-	type MenubarMenuSubmenu as MenubarSubReturn,
-	type CreateMenuCheckboxItemProps,
-	type Checkbox as CheckboxReturn
+	type MenubarMenuSubmenu as MenubarSubReturn
 } from "@melt-ui/svelte";
 import { getContext, setContext } from "svelte";
-import {
-	createBitAttrs,
-	generateId,
-	getOptionUpdater,
-	removeUndefined
-} from "$lib/internal/index.js";
-import type { Readable } from "svelte/store";
+import { createBitAttrs, getOptionUpdater, removeUndefined } from "$lib/internal/index.js";
+import { getPositioningUpdater, type PositioningProps } from "../floating/helpers";
+import type { Writable } from "svelte/store";
+import type { FloatingConfig } from "../floating/floating-config";
+import { getSubmenuCtx } from "../menu/ctx";
 
 const NAME = "menubar";
-const MENU_NAME = "menubar-menu";
-const SUB_NAME = "menubar-sub";
-const CHECKBOX_ITEM_NAME = "menubar-checkbox-item";
-const RADIO_GROUP_NAME = "menubar-radio-group";
-const RADIO_ITEM_NAME = "menubar-radio-item";
-const GROUP_NAME = "menubar-group";
+const MENU_NAME = "menu";
+const SUB_NAME = "menu-submenu";
+
 const PARTS = [
 	"arrow",
 	"checkbox-indicator",
@@ -49,7 +40,6 @@ export const getAttrs = createBitAttrs("menu", PARTS);
 type GetReturn = MenubarReturn;
 type GetMenuReturn = MenubarMenuReturn;
 type GetSubmenuReturn = MenubarSubReturn;
-type GetRadioGroupReturn = MenubarRadioGroupReturn;
 
 export function setCtx(props: MenubarProps) {
 	const menubar = createMenubar(removeUndefined(props));
@@ -96,75 +86,32 @@ export function getSubMenuCtx() {
 	return getContext<GetSubmenuReturn>(SUB_NAME);
 }
 
-export function setRadioGroupCtx(props: CreateMenuRadioGroupProps) {
-	const {
-		builders: { createMenuRadioGroup }
-	} = getMenuCtx();
-	const radioGroup = createMenuRadioGroup(removeUndefined(props));
-	setContext(RADIO_GROUP_NAME, radioGroup);
-	return radioGroup;
-}
-
-export function setRadioItemCtx(value: string) {
-	const radioGroup = getContext<GetRadioGroupReturn>(RADIO_GROUP_NAME);
-	setContext(RADIO_ITEM_NAME, { isChecked: radioGroup.helpers.isChecked, value });
-	return radioGroup;
-}
-
-export function getContent(sideOffset = 5) {
-	const menu = getMenuCtx();
-	menu.options.positioning.update((prev) => ({ ...prev, gutter: sideOffset }));
-	return menu;
-}
-
-export function getSubContent(sideOffset = -1) {
-	const submenu = getSubMenuCtx();
-	submenu.options.positioning.update((prev) => ({ ...prev, gutter: sideOffset }));
-	return submenu;
-}
+const defaultPlacement = {
+	side: "bottom",
+	align: "center"
+} satisfies PositioningProps;
 
-export function setCheckboxItem(props: CreateMenuCheckboxItemProps) {
+export function updatePositioning(props: PositioningProps) {
+	const withDefaults = { ...defaultPlacement, ...props } satisfies PositioningProps;
 	const {
-		builders: { createCheckboxItem }
+		options: { positioning }
 	} = getMenuCtx();
-	const checkboxItem = createCheckboxItem(removeUndefined(props));
-	setContext(CHECKBOX_ITEM_NAME, checkboxItem.states.checked);
 
-	return {
-		...checkboxItem,
-		updateOption: getOptionUpdater(checkboxItem.options)
-	};
+	const updater = getPositioningUpdater(positioning as Writable<FloatingConfig>);
+	updater(withDefaults);
 }
 
-export function getCheckboxIndicator() {
-	return getContext<CheckboxReturn["states"]["checked"]>(CHECKBOX_ITEM_NAME);
-}
-
-export function getRadioIndicator() {
-	return getContext<{
-		isChecked: Readable<(itemValue: string) => boolean>;
-		value: string;
-	}>(RADIO_ITEM_NAME);
-}
-export function setGroupCtx() {
-	const {
-		elements: { group }
-	} = getMenuCtx();
-	const id = generateId();
-	setContext(GROUP_NAME, id);
-	return { group, id };
-}
+const defaultSubPlacement = {
+	side: "right",
+	align: "start"
+} satisfies PositioningProps;
 
-export function getGroupLabel() {
-	const id = getContext<string>(GROUP_NAME) ?? generateId();
+export function updateSubPositioning(props: PositioningProps) {
+	const withDefaults = { ...defaultSubPlacement, ...props } satisfies PositioningProps;
 	const {
-		elements: { groupLabel }
-	} = getMenuCtx();
-	return { groupLabel, id };
-}
+		options: { positioning }
+	} = getSubmenuCtx();
 
-export function setArrow(size = 8) {
-	const menu = getMenuCtx();
-	menu.options.arrowSize.set(size);
-	return menu;
+	const updater = getPositioningUpdater(positioning as Writable<FloatingConfig>);
+	updater(withDefaults);
 }
diff --git a/src/lib/bits/menubar/index.ts b/src/lib/bits/menubar/index.ts
index 7376dfa70..166657e01 100644
--- a/src/lib/bits/menubar/index.ts
+++ b/src/lib/bits/menubar/index.ts
@@ -1,20 +1,20 @@
 import Root from "./components/Menubar.svelte";
 import Sub from "./components/MenubarSub.svelte";
-import Item from "./components/MenubarItem.svelte";
 import Menu from "./components/MenubarMenu.svelte";
-import Group from "./components/MenubarGroup.svelte";
-import Label from "./components/MenubarLabel.svelte";
-import Arrow from "./components/MenubarArrow.svelte";
-import Content from "./components/MenubarContent.svelte";
 import Trigger from "./components/MenubarTrigger.svelte";
-import RadioItem from "./components/MenubarRadioItem.svelte";
-import Separator from "./components/MenubarSeparator.svelte";
-import SubContent from "./components/MenubarSubContent.svelte";
-import SubTrigger from "./components/MenubarSubTrigger.svelte";
-import RadioGroup from "./components/MenubarRadioGroup.svelte";
-import CheckboxItem from "./components/MenubarCheckboxItem.svelte";
-import RadioIndicator from "./components/MenubarRadioIndicator.svelte";
-import CheckboxIndicator from "./components/MenubarCheckboxIndicator.svelte";
+import Item from "$lib/bits/menu/components/MenuItem.svelte";
+import Group from "$lib/bits/menu/components/MenuGroup.svelte";
+import Label from "$lib/bits/menu/components/MenuLabel.svelte";
+import Arrow from "$lib/bits/menu/components/MenuArrow.svelte";
+import Content from "$lib/bits/menu/components/MenuContent.svelte";
+import RadioItem from "$lib/bits/menu/components/MenuRadioItem.svelte";
+import Separator from "$lib/bits/menu/components/MenuSeparator.svelte";
+import SubContent from "$lib/bits/menu/components/MenuSubContent.svelte";
+import SubTrigger from "$lib/bits/menu/components/MenuSubTrigger.svelte";
+import RadioGroup from "$lib/bits/menu/components/MenuRadioGroup.svelte";
+import CheckboxItem from "$lib/bits/menu/components/MenuCheckboxItem.svelte";
+import RadioIndicator from "$lib/bits/menu/components/MenuRadioIndicator.svelte";
+import CheckboxIndicator from "$lib/bits/menu/components/MenuCheckboxIndicator.svelte";
 
 export {
 	Sub,
diff --git a/src/lib/bits/popover/components/Popover.svelte b/src/lib/bits/popover/components/Popover.svelte
index 0c81b3b5e..13baabf9a 100644
--- a/src/lib/bits/popover/components/Popover.svelte
+++ b/src/lib/bits/popover/components/Popover.svelte
@@ -4,7 +4,6 @@
 	import { derived } from "svelte/store";
 
 	type $$Props = Props;
-	export let positioning: $$Props["positioning"] = undefined;
 	export let disableFocusTrap: $$Props["disableFocusTrap"] = undefined;
 	export let closeOnEscape: $$Props["closeOnEscape"] = undefined;
 	export let closeOnOutsideClick: $$Props["closeOnOutsideClick"] = undefined;
@@ -20,7 +19,6 @@
 		states: { open: localOpen },
 		ids
 	} = setCtx({
-		positioning,
 		disableFocusTrap,
 		closeOnEscape,
 		closeOnOutsideClick,
@@ -48,7 +46,6 @@
 
 	$: open !== undefined && localOpen.set(open);
 
-	$: updateOption("positioning", positioning);
 	$: updateOption("disableFocusTrap", disableFocusTrap);
 	$: updateOption("closeOnEscape", closeOnEscape);
 	$: updateOption("closeOnOutsideClick", closeOnOutsideClick);
diff --git a/src/lib/bits/select/components/Select.svelte b/src/lib/bits/select/components/Select.svelte
index b5a3ee3e9..fe5e855f5 100644
--- a/src/lib/bits/select/components/Select.svelte
+++ b/src/lib/bits/select/components/Select.svelte
@@ -12,7 +12,6 @@
 	export let closeOnEscape: $$Props["closeOnEscape"] = undefined;
 	export let closeOnOutsideClick: $$Props["closeOnOutsideClick"] = undefined;
 	export let portal: $$Props["portal"] = undefined;
-	export let positioning: $$Props["positioning"] = undefined;
 	export let name: $$Props["name"] = undefined;
 	export let multiple: $$Props["multiple"] = undefined;
 	export let selected: $$Props["selected"] = undefined;
@@ -32,7 +31,6 @@
 		closeOnEscape,
 		closeOnOutsideClick,
 		portal,
-		positioning,
 		name,
 		multiple,
 		forceVisible: true,
@@ -73,7 +71,6 @@
 	$: updateOption("closeOnEscape", closeOnEscape);
 	$: updateOption("closeOnOutsideClick", closeOnOutsideClick);
 	$: updateOption("portal", portal);
-	$: updateOption("positioning", positioning);
 	$: updateOption("name", name);
 	$: updateOption("multiple", multiple);
 </script>
diff --git a/src/lib/bits/select/components/SelectContent.svelte b/src/lib/bits/select/components/SelectContent.svelte
index a90c2c0c2..8dfc420cf 100644
--- a/src/lib/bits/select/components/SelectContent.svelte
+++ b/src/lib/bits/select/components/SelectContent.svelte
@@ -3,7 +3,7 @@
 
 	import { melt } from "@melt-ui/svelte";
 	import type { Transition } from "$lib/internal/types.js";
-	import { getCtx, getAttrs } from "../ctx.js";
+	import { getCtx, getAttrs, updatePositioning } from "../ctx.js";
 	import type { ContentEvents, ContentProps } from "../types.js";
 
 	type T = $$Generic<Transition>;
@@ -20,6 +20,15 @@
 	export let outTransitionConfig: $$Props["outTransitionConfig"] = undefined;
 	export let asChild: $$Props["asChild"] = false;
 	export let id: $$Props["id"] = undefined;
+	export let side: $$Props["side"] = "bottom";
+	export let align: $$Props["align"] = "center";
+	export let sideOffset: $$Props["sideOffset"] = 0;
+	export let alignOffset: $$Props["alignOffset"] = 0;
+	export let collisionPadding: $$Props["collisionPadding"] = 8;
+	export let avoidCollisions: $$Props["avoidCollisions"] = true;
+	export let collisionBoundary: $$Props["collisionBoundary"] = undefined;
+	export let sameWidth: $$Props["sameWidth"] = false;
+	export let fitViewport: $$Props["fitViewport"] = false;
 
 	const {
 		elements: { menu },
@@ -35,10 +44,20 @@
 	}
 	$: builder = $menu;
 	$: slotProps = { builder, attrs };
+	$: updatePositioning({
+		side,
+		align,
+		sideOffset,
+		alignOffset,
+		collisionPadding,
+		avoidCollisions,
+		collisionBoundary,
+		sameWidth,
+		fitViewport
+	});
 </script>
 
 <!-- svelte-ignore a11y-no-static-element-interactions / applied by melt's builder-->
-
 {#if asChild && $open}
 	<slot {...slotProps} />
 {:else if transition && $open}
diff --git a/src/lib/bits/select/ctx.ts b/src/lib/bits/select/ctx.ts
index 9335a817d..160af5e6a 100644
--- a/src/lib/bits/select/ctx.ts
+++ b/src/lib/bits/select/ctx.ts
@@ -6,6 +6,9 @@ import {
 	getOptionUpdater,
 	removeUndefined
 } from "$lib/internal/index.js";
+import { getPositioningUpdater, type PositioningProps } from "../floating/helpers";
+import type { Writable } from "svelte/store";
+import type { FloatingConfig } from "../floating/floating-config";
 
 const NAME = "select";
 const GROUP_NAME = "select-group";
@@ -69,3 +72,18 @@ export function setArrow(size = 8) {
 	select.options.arrowSize?.set(size);
 	return select;
 }
+
+const defaultPlacement = {
+	side: "bottom",
+	align: "center"
+} satisfies PositioningProps;
+
+export function updatePositioning(props: PositioningProps) {
+	const withDefaults = { ...defaultPlacement, ...props } satisfies PositioningProps;
+	const {
+		options: { positioning }
+	} = getCtx();
+
+	const updater = getPositioningUpdater(positioning as Writable<FloatingConfig>);
+	updater(withDefaults);
+}
diff --git a/src/lib/bits/tooltip/components/Tooltip.svelte b/src/lib/bits/tooltip/components/Tooltip.svelte
index 89622b85c..888ef8ffd 100644
--- a/src/lib/bits/tooltip/components/Tooltip.svelte
+++ b/src/lib/bits/tooltip/components/Tooltip.svelte
@@ -5,7 +5,6 @@
 
 	type $$Props = Props;
 
-	export let positioning: $$Props["positioning"] = undefined;
 	export let closeOnEscape: $$Props["closeOnEscape"] = undefined;
 	export let portal: $$Props["portal"] = undefined;
 	export let closeOnPointerDown: $$Props["closeOnPointerDown"] = undefined;
@@ -22,7 +21,6 @@
 		updateOption,
 		ids
 	} = setCtx({
-		positioning,
 		closeOnEscape,
 		portal,
 		closeOnPointerDown,
@@ -50,7 +48,6 @@
 	);
 
 	$: open !== undefined && localOpen.set(open);
-	$: updateOption("positioning", positioning);
 	$: updateOption("closeOnEscape", closeOnEscape);
 	$: updateOption("portal", portal);
 	$: updateOption("closeOnPointerDown", closeOnPointerDown);

From c23fd257b9f77e7ae358b9db0bd77d13b4cd8a32 Mon Sep 17 00:00:00 2001
From: Hunter Johnston <johnstonhuntera@gmail.com>
Date: Sun, 19 Nov 2023 21:30:51 -0500
Subject: [PATCH 072/217] change: positioning props

---
 .changeset/old-dancers-allow.md               |  5 ++
 src/content/api-reference/context-menu.ts     | 40 ++++++++++++-
 src/content/api-reference/floating.ts         | 59 +++++++++++++++++++
 src/content/api-reference/link-preview.ts     |  9 +--
 src/content/api-reference/menu.ts             | 25 ++------
 src/content/api-reference/popover.ts          | 10 +---
 src/content/api-reference/select.ts           | 13 ++--
 src/lib/bits/context-menu/_types.ts           | 41 +++++++++++++
 .../components/ContextMenuContent.svelte      |  8 ---
 src/lib/bits/context-menu/ctx.ts              |  2 +-
 src/lib/bits/context-menu/types.ts            |  9 ++-
 11 files changed, 167 insertions(+), 54 deletions(-)
 create mode 100644 .changeset/old-dancers-allow.md
 create mode 100644 src/content/api-reference/floating.ts
 create mode 100644 src/lib/bits/context-menu/_types.ts

diff --git a/.changeset/old-dancers-allow.md b/.changeset/old-dancers-allow.md
new file mode 100644
index 000000000..9363cc888
--- /dev/null
+++ b/.changeset/old-dancers-allow.md
@@ -0,0 +1,5 @@
+---
+"bits-ui": minor
+---
+
+Breaking change: separate floating `positioning` props into individual props and move them to content components
diff --git a/src/content/api-reference/context-menu.ts b/src/content/api-reference/context-menu.ts
index 6f8353120..3c055aaeb 100644
--- a/src/content/api-reference/context-menu.ts
+++ b/src/content/api-reference/context-menu.ts
@@ -1,6 +1,9 @@
 import type { APISchema } from "@/types";
 import { menu } from "./menu";
 import type * as Menu from "$lib/bits/menu/_types";
+import type * as ContextMenu from "$lib/bits/context-menu/_types";
+import * as C from "@/content/constants.js";
+import { transitionProps, asChild, union } from "./helpers";
 
 export const root: APISchema<Menu.Props> = {
 	title: "Root",
@@ -14,10 +17,43 @@ export const trigger: APISchema<Menu.TriggerProps> = {
 	...menu.trigger
 };
 
-export const content: APISchema<Menu.ContentProps> = {
+export const content: APISchema<ContextMenu.ContentProps> = {
 	title: "Content",
 	description: "The content displayed when the context menu is open.",
-	...menu.content
+	props: {
+		...transitionProps,
+		asChild,
+		alignOffset: {
+			type: C.NUMBER,
+			default: "0",
+			description: "An offset in pixels from the 'start' or 'end' alignment options."
+		},
+		avoidCollisions: {
+			type: C.BOOLEAN,
+			default: C.TRUE,
+			description:
+				"When `true`, overrides the `side` and `align` options to prevent collisions with the boundary edges."
+		},
+		collisionBoundary: {
+			type: {
+				type: C.UNION,
+				definition: union("'clippingAncestors'", "Element", "Array<Element>", "Rect")
+			},
+			description: "A boundary element or array of elements to check for collisions against."
+		},
+		collisionPadding: {
+			type: C.NUMBER,
+			default: "0",
+			description:
+				"The amount in pixels of virtual padding around the viewport edges to check for overflow which will cause a collision."
+		},
+		fitViewport: {
+			type: C.BOOLEAN,
+			default: C.FALSE,
+			description: "Whether the floating element should be constrained to the viewport."
+		}
+	},
+	dataAttributes: menu.content.dataAttributes
 };
 
 export const item: APISchema<Menu.ItemProps & { href: string }> = {
diff --git a/src/content/api-reference/floating.ts b/src/content/api-reference/floating.ts
new file mode 100644
index 000000000..67c705ee1
--- /dev/null
+++ b/src/content/api-reference/floating.ts
@@ -0,0 +1,59 @@
+import * as C from "@/content/constants.js";
+import { enums, union } from "./helpers.js";
+
+export const floatingPositioning = {
+	side: {
+		type: {
+			type: C.ENUM,
+			definition: enums("top", "right", "bottom", "left")
+		},
+		description:
+			"The preferred side of the anchor to render against when open. Will be reversed when collisions occur."
+	},
+	sideOffset: {
+		type: C.NUMBER,
+		default: "0",
+		description: "The amount of offset to apply to the menu's position on the x-axis."
+	},
+	align: {
+		type: {
+			type: C.ENUM,
+			definition: enums("start", "center", "end")
+		},
+		description: "The preferred alignment of the anchor to render against when open."
+	},
+	alignOffset: {
+		type: C.NUMBER,
+		default: "0",
+		description: "An offset in pixels from the 'start' or 'end' alignment options."
+	},
+	avoidCollisions: {
+		type: C.BOOLEAN,
+		default: C.TRUE,
+		description:
+			"When `true`, overrides the `side` and `align` options to prevent collisions with the boundary edges."
+	},
+	collisionBoundary: {
+		type: {
+			type: C.UNION,
+			definition: union("'clippingAncestors'", "Element", "Array<Element>", "Rect")
+		},
+		description: "A boundary element or array of elements to check for collisions against."
+	},
+	collisionPadding: {
+		type: C.NUMBER,
+		default: "0",
+		description:
+			"The amount in pixels of virtual padding around the viewport edges to check for overflow which will cause a collision."
+	},
+	fitViewport: {
+		type: C.BOOLEAN,
+		default: C.FALSE,
+		description: "Whether the floating element should be constrained to the viewport."
+	},
+	sameWidth: {
+		type: C.BOOLEAN,
+		default: C.FALSE,
+		description: "Whether the content should be the same width as the trigger."
+	}
+};
diff --git a/src/content/api-reference/link-preview.ts b/src/content/api-reference/link-preview.ts
index 7aafaaf44..9d19d9e4d 100644
--- a/src/content/api-reference/link-preview.ts
+++ b/src/content/api-reference/link-preview.ts
@@ -6,9 +6,9 @@ import {
 	portalProp,
 	transitionProps
 } from "@/content/api-reference/helpers.js";
+import { floatingPositioning } from "./floating.js";
 import type * as LinkPreview from "$lib/bits/link-preview/_types";
 import * as C from "@/content/constants";
-import { floatingConfigProp } from "./extended-types";
 
 export const root: APISchema<LinkPreview.Props> = {
 	title: "Root",
@@ -26,11 +26,6 @@ export const root: APISchema<LinkPreview.Props> = {
 			description:
 				"The amount of time in milliseconds to delay closing the preview when the mouse leaves the trigger."
 		},
-		positioning: {
-			type: floatingConfigProp,
-			default: '{ position: "bottom", align: "center" }',
-			description: "The positioning configuration for the preview. (docs coming soon)"
-		},
 		closeOnOutsideClick: {
 			type: C.BOOLEAN,
 			default: C.TRUE,
@@ -78,7 +73,7 @@ export const trigger: APISchema<LinkPreview.TriggerProps> = {
 export const content: APISchema<LinkPreview.ContentProps> = {
 	title: "Content",
 	description: "The contents of the link preview which are displayed when the preview is open.",
-	props: { ...transitionProps, asChild },
+	props: { ...transitionProps, ...floatingPositioning, asChild },
 	dataAttributes: [
 		{
 			name: "state",
diff --git a/src/content/api-reference/menu.ts b/src/content/api-reference/menu.ts
index 86b5523ba..57c7b00a3 100644
--- a/src/content/api-reference/menu.ts
+++ b/src/content/api-reference/menu.ts
@@ -1,5 +1,6 @@
 import type { APISchema, PropObj } from "@/types";
-import { floatingConfigProp, focusProp } from "./extended-types";
+import { focusProp } from "./extended-types/index.js";
+import { floatingPositioning } from "./floating.js";
 import {
 	asChild,
 	transitionProps,
@@ -43,10 +44,6 @@ const props = {
 		},
 		description: "A callback that is fired when the menu's open state changes."
 	},
-	positioning: {
-		type: floatingConfigProp,
-		description: "The positioning configuration for the  menu. (docs coming soon)"
-	},
 	dir: {
 		type: {
 			type: C.ENUM,
@@ -77,10 +74,6 @@ const subProps = {
 		type: C.BOOLEAN,
 		description: "Whether or not the submenu is disabled."
 	},
-	positioning: {
-		type: floatingConfigProp,
-		description: "The positioning configuration for the submenu."
-	},
 	open: {
 		type: C.BOOLEAN,
 		default: C.FALSE,
@@ -97,22 +90,14 @@ const subProps = {
 
 const contentProps = {
 	...transitionProps,
-	sideOffset: {
-		type: C.NUMBER,
-		default: "0",
-		description: "The amount of offset to apply to the menu's position on the x-axis."
-	},
+	...floatingPositioning,
 	asChild
 } satisfies PropObj<Menu.ContentProps>;
 
 const subContentProps = {
 	...transitionProps,
-	asChild,
-	sideOffset: {
-		type: C.NUMBER,
-		default: "0",
-		description: "The amount of offset to apply to the menu's position on the x-axis."
-	}
+	...floatingPositioning,
+	asChild
 } satisfies PropObj<Menu.SubContentProps>;
 
 const arrowProps = {
diff --git a/src/content/api-reference/popover.ts b/src/content/api-reference/popover.ts
index b11551667..529315d24 100644
--- a/src/content/api-reference/popover.ts
+++ b/src/content/api-reference/popover.ts
@@ -1,6 +1,7 @@
 import type { APISchema } from "@/types/index.js";
 import type * as Popover from "$lib/bits/popover/_types.js";
-import { floatingConfigProp, focusProp } from "./extended-types/index.js";
+import { focusProp } from "./extended-types/index.js";
+import { floatingPositioning } from "./floating.js";
 import {
 	portalProp,
 	transitionProps,
@@ -25,11 +26,6 @@ export const root: APISchema<Popover.Props> = {
 			default: C.FALSE,
 			description: "Whether or not to prevent scrolling the body while the popover is open."
 		},
-		positioning: {
-			type: floatingConfigProp,
-			default: '{ position: "bottom", align: "center" }',
-			description: "The positioning configuration for the popover. (docs coming soon)"
-		},
 		closeOnOutsideClick: {
 			type: C.BOOLEAN,
 			default: C.TRUE,
@@ -84,7 +80,7 @@ export const trigger: APISchema<Popover.TriggerProps> = {
 export const content: APISchema<Popover.ContentProps> = {
 	title: "Content",
 	description: "The contents of the popover which are displayed when the popover is open.",
-	props: { ...transitionProps, asChild },
+	props: { ...transitionProps, ...floatingPositioning, asChild },
 	dataAttributes: [
 		{
 			name: "state",
diff --git a/src/content/api-reference/select.ts b/src/content/api-reference/select.ts
index c51f7409f..500706867 100644
--- a/src/content/api-reference/select.ts
+++ b/src/content/api-reference/select.ts
@@ -1,4 +1,4 @@
-import type { APISchema } from "@/types";
+import type { APISchema } from "@/types/index.js";
 import {
 	arrowProps,
 	asChild,
@@ -6,8 +6,9 @@ import {
 	portalProp,
 	transitionProps
 } from "@/content/api-reference/helpers.js";
-import * as C from "@/content/constants";
-import type * as Select from "$lib/bits/select/_types";
+import { floatingPositioning } from "./floating.js";
+import * as C from "@/content/constants.js";
+import type * as Select from "$lib/bits/select/_types.js";
 
 export const root: APISchema<Select.Props> = {
 	title: "Root",
@@ -56,10 +57,6 @@ export const root: APISchema<Select.Props> = {
 			},
 			description: "A callback that is fired when the select menu's open state changes."
 		},
-		positioning: {
-			type: "FloatingConfig",
-			description: "The positioning configuration for the select menu. (docs coming soon)"
-		},
 		selected: {
 			type: {
 				type: C.OBJECT,
@@ -126,7 +123,7 @@ export const trigger: APISchema<Select.TriggerProps> = {
 export const content: APISchema<Select.ContentProps> = {
 	title: "Content",
 	description: "The content/menu element which contains the select menu's items.",
-	props: { ...transitionProps, asChild }
+	props: { ...transitionProps, ...floatingPositioning, asChild }
 };
 
 export const item: APISchema<Select.ItemProps> = {
diff --git a/src/lib/bits/context-menu/_types.ts b/src/lib/bits/context-menu/_types.ts
new file mode 100644
index 000000000..34d56e7fc
--- /dev/null
+++ b/src/lib/bits/context-menu/_types.ts
@@ -0,0 +1,41 @@
+import type { AsChild, Transition, TransitionProps } from "$lib/internal/index.js";
+
+export type ContentProps<
+	T extends Transition = Transition,
+	In extends Transition = Transition,
+	Out extends Transition = Transition
+> = Expand<
+	{
+		/**
+		 * An offset in pixels from the "start" or "end" alignment options.
+		 */
+		alignOffset?: number;
+
+		/**
+		 * When `true`, overrides the `side` and `align` options to prevent collisions
+		 * with the boundary edges.
+		 *
+		 * @defaultValue `true`
+		 */
+		avoidCollisions?: boolean;
+
+		/**
+		 * The amount in pixels of virtual padding around the viewport edges to check
+		 * for overflow which will cause a collision.
+		 */
+		collisionPadding?: number;
+
+		/**
+		 * A boundary element or array of elements to check for collisions against.
+		 */
+		collisionBoundary?: Boundary;
+
+		/**
+		 * Whether the floating element should be constrained to the viewport.
+		 *
+		 * @defaultValue `false`
+		 */
+		fitViewport?: boolean;
+	} & TransitionProps<T, In, Out> &
+		AsChild
+>;
diff --git a/src/lib/bits/context-menu/components/ContextMenuContent.svelte b/src/lib/bits/context-menu/components/ContextMenuContent.svelte
index 4a37c4b7a..d259107bb 100644
--- a/src/lib/bits/context-menu/components/ContextMenuContent.svelte
+++ b/src/lib/bits/context-menu/components/ContextMenuContent.svelte
@@ -19,14 +19,10 @@
 	export let outTransitionConfig: $$Props["outTransitionConfig"] = undefined;
 	export let asChild: $$Props["asChild"] = false;
 	export let id: $$Props["id"] = undefined;
-	export let side: $$Props["side"] = "top";
-	export let align: $$Props["align"] = "center";
-	export let sideOffset: $$Props["sideOffset"] = 0;
 	export let alignOffset: $$Props["alignOffset"] = 0;
 	export let collisionPadding: $$Props["collisionPadding"] = 8;
 	export let avoidCollisions: $$Props["avoidCollisions"] = true;
 	export let collisionBoundary: $$Props["collisionBoundary"] = undefined;
-	export let sameWidth: $$Props["sameWidth"] = false;
 	export let fitViewport: $$Props["fitViewport"] = false;
 
 	const {
@@ -48,14 +44,10 @@
 	};
 
 	$: updatePositioning({
-		side,
-		align,
-		sideOffset,
 		alignOffset,
 		collisionPadding,
 		avoidCollisions,
 		collisionBoundary,
-		sameWidth,
 		fitViewport
 	});
 </script>
diff --git a/src/lib/bits/context-menu/ctx.ts b/src/lib/bits/context-menu/ctx.ts
index 096348fdf..bbd125698 100644
--- a/src/lib/bits/context-menu/ctx.ts
+++ b/src/lib/bits/context-menu/ctx.ts
@@ -44,7 +44,7 @@ export function getCtx() {
 }
 
 const defaultPlacement = {
-	side: "right",
+	side: "bottom",
 	align: "start"
 } satisfies PositioningProps;
 
diff --git a/src/lib/bits/context-menu/types.ts b/src/lib/bits/context-menu/types.ts
index c2c80081b..7d3f9c3e4 100644
--- a/src/lib/bits/context-menu/types.ts
+++ b/src/lib/bits/context-menu/types.ts
@@ -1,6 +1,5 @@
 import type {
 	ArrowProps,
-	ContentProps,
 	CheckboxItemProps,
 	RadioGroupProps,
 	RadioItemProps,
@@ -23,6 +22,14 @@ import type {
 	ContextTriggerEvents as TriggerEvents,
 	SubContentEvents
 } from "$lib/bits/menu/index.js";
+import type { HTMLDivAttributes, Transition } from "$lib/internal";
+import type * as I from "./_types.js";
+
+type ContentProps<
+	T extends Transition = Transition,
+	In extends Transition = Transition,
+	Out extends Transition = Transition
+> = I.ContentProps<T, In, Out> & HTMLDivAttributes;
 
 export type {
 	Props,

From 797591ca5199a4f3e7023dda7b40468440b32b06 Mon Sep 17 00:00:00 2001
From: Hunter Johnston <johnstonhuntera@gmail.com>
Date: Mon, 20 Nov 2023 14:08:36 -0500
Subject: [PATCH 073/217] fixes

---
 src/components/demos/accordion-demo.svelte                | 2 +-
 src/components/demos/checkbox-demo.svelte                 | 4 ++--
 src/components/demos/context-menu-demo.svelte             | 8 ++++----
 src/components/demos/dialog-demo.svelte                   | 4 +++-
 src/components/demos/dropdown-menu-demo.svelte            | 2 +-
 src/components/navigation/sidebar-nav-items.svelte        | 2 +-
 src/components/navigation/sidebar-nav.svelte              | 2 +-
 src/components/page-header/page-header-description.svelte | 2 +-
 src/components/site-header.svelte                         | 2 +-
 src/lib/bits/menu/components/MenuSubContent.svelte        | 4 ++--
 10 files changed, 17 insertions(+), 15 deletions(-)

diff --git a/src/components/demos/accordion-demo.svelte b/src/components/demos/accordion-demo.svelte
index 72994b368..af1863572 100644
--- a/src/components/demos/accordion-demo.svelte
+++ b/src/components/demos/accordion-demo.svelte
@@ -40,7 +40,7 @@
 			<Accordion.Content
 				transition={slide}
 				transitionConfig={{ duration: 200 }}
-				class="pb-[25px] text-sm"
+				class="pb-[25px] text-sm tracking-[-0.01em]"
 			>
 				{item.content}
 			</Accordion.Content>
diff --git a/src/components/demos/checkbox-demo.svelte b/src/components/demos/checkbox-demo.svelte
index 8f9c286d3..6568f28b6 100644
--- a/src/components/demos/checkbox-demo.svelte
+++ b/src/components/demos/checkbox-demo.svelte
@@ -17,9 +17,9 @@
 			class="inline-flex items-center justify-center"
 		>
 			{#if isChecked}
-				<Check class="h-[15px] w-[15px] text-background" />
+				<Check class="h-[15px] w-[15px] text-background" weight="bold" />
 			{:else if isIndeterminate}
-				<Minus class="h-[15px] w-[15px] text-background" />
+				<Minus class="h-[15px] w-[15px] text-background" weight="bold" />
 			{/if}
 		</Checkbox.Indicator>
 	</Checkbox.Root>
diff --git a/src/components/demos/context-menu-demo.svelte b/src/components/demos/context-menu-demo.svelte
index 86e418641..0b36e1068 100644
--- a/src/components/demos/context-menu-demo.svelte
+++ b/src/components/demos/context-menu-demo.svelte
@@ -23,7 +23,7 @@
 			class="flex h-10 select-none items-center rounded-button py-3 pl-3 pr-1.5 text-sm font-medium outline-none transition-all duration-75 data-[highlighted]:bg-muted"
 		>
 			<div class="flex items-center">
-				<PencilSimpleLine class="mr-2 h-4 w-4 text-foreground-alt" />
+				<PencilSimpleLine class="mr-2 text-foreground-alt sq-[22px]" />
 				Edit
 			</div>
 			<div class="ml-auto flex items-center gap-px">
@@ -44,7 +44,7 @@
 				class="flex h-10 select-none items-center rounded-button py-3 pl-3 pr-1.5 text-sm font-medium outline-none transition-all duration-75 data-[highlighted]:bg-muted data-[state=open]:bg-muted"
 			>
 				<div class="flex items-center">
-					<PlusCircle class="mr-2 h-4 w-4 text-foreground-alt" />
+					<PlusCircle class="mr-2 text-foreground-alt sq-[22px]" />
 					Add
 				</div>
 				<div class="ml-auto flex items-center gap-px">
@@ -95,7 +95,7 @@
 			class="flex h-10 select-none items-center rounded-button py-3 pl-3 pr-1.5 text-sm font-medium outline-none transition-all duration-75 data-[highlighted]:bg-muted"
 		>
 			<div class="flex items-center">
-				<CopySimple class="mr-2 h-4 w-4 text-foreground-alt" />
+				<CopySimple class="mr-2 text-foreground-alt sq-[22px]" />
 				Duplicate
 			</div>
 			<div class="ml-auto flex items-center gap-px">
@@ -116,7 +116,7 @@
 			class="flex h-10 select-none items-center rounded-button py-3 pl-3 pr-1.5 text-sm font-medium outline-none transition-all duration-75 data-[highlighted]:bg-muted"
 		>
 			<div class="flex items-center">
-				<Trash class="mr-2 h-4 w-4 text-foreground-alt" />
+				<Trash class="mr-2 text-foreground-alt sq-[22px]" />
 				Delete
 			</div>
 		</ContextMenu.Item>
diff --git a/src/components/demos/dialog-demo.svelte b/src/components/demos/dialog-demo.svelte
index a97dfb23d..c1976dc55 100644
--- a/src/components/demos/dialog-demo.svelte
+++ b/src/components/demos/dialog-demo.svelte
@@ -43,7 +43,9 @@
 						type="password"
 						autocomplete="off"
 					/>
-					<LockKeyOpen class="absolute right-4 top-4 text-dark/30" />
+					<LockKeyOpen
+						class="absolute right-4 top-[14px] h-[22px] w-[22px] text-dark/30"
+					/>
 				</div>
 			</div>
 			<div class="flex w-full justify-end">
diff --git a/src/components/demos/dropdown-menu-demo.svelte b/src/components/demos/dropdown-menu-demo.svelte
index 975eb426f..51809715f 100644
--- a/src/components/demos/dropdown-menu-demo.svelte
+++ b/src/components/demos/dropdown-menu-demo.svelte
@@ -14,7 +14,7 @@
 
 <DropdownMenu.Root>
 	<DropdownMenu.Trigger
-		class="inline-flex h-10 w-10 items-center justify-center rounded-full border border-muted bg-background text-sm font-medium text-foreground shadow-btn focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground focus-visible:ring-offset-2 focus-visible:ring-offset-background"
+		class="border-input inline-flex h-10 w-10 items-center justify-center rounded-full border bg-background text-sm font-medium text-foreground shadow-btn focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground focus-visible:ring-offset-2 focus-visible:ring-offset-background"
 	>
 		<DotsThree class="h-6 w-6 text-foreground" />
 	</DropdownMenu.Trigger>
diff --git a/src/components/navigation/sidebar-nav-items.svelte b/src/components/navigation/sidebar-nav-items.svelte
index 9ba4b7304..ba69d8ca7 100644
--- a/src/components/navigation/sidebar-nav-items.svelte
+++ b/src/components/navigation/sidebar-nav-items.svelte
@@ -31,7 +31,7 @@
 				</a>
 			{:else}
 				<span
-					class="flex w-full cursor-not-allowed items-center rounded-md px-2.5 py-1.5 text-muted-foreground hover:underline"
+					class="flex w-full cursor-not-allowed items-center rounded-md px-2.5 py-1.5 text-sm text-muted-foreground hover:underline"
 				>
 					{item.title}
 				</span>
diff --git a/src/components/navigation/sidebar-nav.svelte b/src/components/navigation/sidebar-nav.svelte
index 190c1673a..856846f72 100644
--- a/src/components/navigation/sidebar-nav.svelte
+++ b/src/components/navigation/sidebar-nav.svelte
@@ -17,7 +17,7 @@
 						{:else}
 							<div class="pb-4">
 								<h4
-									class="mb-1 rounded-md px-2.5 py-2 pl-4 text-sm font-normal uppercase text-muted-foreground"
+									class="mb-1 ml-[9px] rounded-md px-2.5 py-2 pl-4 text-xs font-normal uppercase text-muted-foreground"
 								>
 									{item.title}
 								</h4>
diff --git a/src/components/page-header/page-header-description.svelte b/src/components/page-header/page-header-description.svelte
index 7577df647..950fb6fae 100644
--- a/src/components/page-header/page-header-description.svelte
+++ b/src/components/page-header/page-header-description.svelte
@@ -7,7 +7,7 @@
 
 <p
 	class={cn(
-		"mt-3 text-[21px] font-semibold tracking-tight text-foreground/40",
+		"mt-3 text-[21px] font-semibold tracking-[-0.01em] text-foreground/40",
 		className
 	)}
 >
diff --git a/src/components/site-header.svelte b/src/components/site-header.svelte
index 2874243c1..9f962f9b2 100644
--- a/src/components/site-header.svelte
+++ b/src/components/site-header.svelte
@@ -17,7 +17,7 @@
 					>bits</a
 				>
 			</div>
-			<div class="flex items-center justify-end gap-5">
+			<div class="flex items-center justify-end gap-3">
 				<Button.Root
 					href={siteConfig.links.github}
 					target="_blank"
diff --git a/src/lib/bits/menu/components/MenuSubContent.svelte b/src/lib/bits/menu/components/MenuSubContent.svelte
index 212807eb0..966dde7a7 100644
--- a/src/lib/bits/menu/components/MenuSubContent.svelte
+++ b/src/lib/bits/menu/components/MenuSubContent.svelte
@@ -18,8 +18,8 @@
 	export let outTransitionConfig: $$Props["outTransitionConfig"] = undefined;
 	export let asChild: $$Props["asChild"] = false;
 	export let id: $$Props["id"] = undefined;
-	export let side: $$Props["side"] = "top";
-	export let align: $$Props["align"] = "center";
+	export let side: $$Props["side"] = "right";
+	export let align: $$Props["align"] = "start";
 	export let sideOffset: $$Props["sideOffset"] = 0;
 	export let alignOffset: $$Props["alignOffset"] = 0;
 	export let collisionPadding: $$Props["collisionPadding"] = 8;

From 9e3464e46284f94c4b079eb9bd3d181a5360f5df Mon Sep 17 00:00:00 2001
From: Hunter Johnston <johnstonhuntera@gmail.com>
Date: Mon, 20 Nov 2023 14:12:27 -0500
Subject: [PATCH 074/217] more fixes;

---
 src/components/demos/aspect-ratio-demo.svelte |   2 +-
 static/avatar-1.png                           | Bin 3954 -> 11447 bytes
 2 files changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/demos/aspect-ratio-demo.svelte b/src/components/demos/aspect-ratio-demo.svelte
index 1cc6f5cf7..39a76d7e9 100644
--- a/src/components/demos/aspect-ratio-demo.svelte
+++ b/src/components/demos/aspect-ratio-demo.svelte
@@ -2,7 +2,7 @@
 	import * as AspectRatio from "@/components/ui/aspect-ratio";
 </script>
 
-<AspectRatio.Root ratio={16 / 9} class="rounded-[15px] bg-transparent">
+<AspectRatio.Root ratio={16 / 9} class="rounded-[15px] bg-transparent pt-4">
 	<img
 		src="/abstract.png"
 		alt="an abstract painting"
diff --git a/static/avatar-1.png b/static/avatar-1.png
index 0ea238a09bc50f29f80a3694b1b6d61880ebd6f5..e7c395ec2c847354045defd83eda453b7d8bdd8c 100644
GIT binary patch
literal 11447
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
RdV>G}002ovPDHLkV1k)4P}cwe

literal 3954
zcmV-&4~_7NP)<h;3K|Lk000e1NJLTq001%o001%w1^@s69zTe&00009a7bBm000XU
z000XU0RWnu7ytkO0drDELIAGL9O(c600d`2O+f$vv5yP<VFdsH4+lv^K~#7Fy;=!e
zRM*x2&%l7Vu&7ZC5XaQ5nz*GJwO<TLjZ2cRiK*@H`&tumYmBLiTb3qmjj>imMPrOx
zjhfxWph-*>6p<PgQ50nn7i8E3*_Q!^*-p>7!yqc?fY_stdGF1=@11kc_CM#22CYQ?
z{(3!N3D#&ZkS~LY$XBD$`pV~xQDgu#1|E}0gmZxINPfP-fL0(4?t%1ry|2k+p3A2p
z-rhd?@#Dv#U%!5M=%FC=@82IjKHl*5_O2hFot?u+Hj<N5kdl&$6DLl{wFtJCNVl%F
zgmRhu{R4yj{R3ip_x?GBg{`Jz$Bt7=DJdzL=FFK#Lx&D0e&%+EX79TIdVRNUfqR?+
zl$V!NYtmO=?YjR0u>f=VD7_y7+)DBe7AAv_5VR(B>lP3$D<x*|-=eInY^5D}H|~|h
znfXCy#fI;<78)aYXGq9Y5$3G$f|ig|2vM`^Waoc$%hA}G<Df?FG)BThi-l>v5KhK!
zzOvcv>aaJ;sI9?ar#q2Tn5Ou3YeI<dv17-+xN_xkxI+9M5T_&?0oBztDm!VkS`-!*
zVebz=;$-}3l$KX=)awFwH+L}0VA)_-X-uQ$3u!b>r?rtIM<6RJ$De)2*J!May!HFr
zW=f<83JThO=uqTM$*gH9?93RDnVW}?Hg843nFMs|*a<y<_OKGbz)4U@1nB?sKIrkV
z9$A^0A}N0H*bw~s+41PpQx7c*q0zeE@l_QS6&O8wEOK%(=jG+)t!+|}I+zg?A0MX=
z3JQcPB&&Jud=mcrw<SnR&$w}4bR^7CgR%90HR{E37TBdT)~;HP!2<`dAPw2kHu^q6
z1!KmHEn_4wxFHg_$+X(HZx_B`!TjLy<Hy2Ps;D&L)meW+IzQ8{7^FIbxn142-j|Wp
zMkA6_Q}O(B&%x8v<Ca;sn_8DHU3l@(CNAzLJ)79B+XNA91O)}`*uH%mTp{Hbe8inT
zgHOKvN-?ED^T3-L%UUZcDuI=37&ves+}(9>D5mMBJ@QC@?A-ZTU!AT^tkGCuxJeMv
z#*!tA2gx8;h$9hVV`H&t%Qj?RFS;l6X=7m$63_9%*fH|)VRse8)6)~RwY35|MJqd<
zqwBQcpAjE_!iCooY*stoTD%l{_U?7qz2=@kv?4n{!@pBUeE0R|c;JC9sAsMT636Gv
z53{+(&tNc=X&ro6LnXYqMj9lgreObp10aq(npO}(J(bP0xVQv{tXz-_<0Ycbm@yqD
zlQmSXl^|^EFHE044X#o`!dVziwXiDJZXJ^4kTCwmuHC4uF>zG4-*t{-@oBQ0YaM14
zq<7UfgmGg{bzP`*I=Cb^I6|$R>Nz8gBQn(=RQH9-n3{UCbb5n~`B&sYq^GB=yyA)=
ztQoz?pq28}b+dAa;_mLIGP70%Tt|lXZrcuXXU@Q$U7zCx4&NTkh#TE-AE*E7c<!i?
zkK^4%3-H8<5&R5NW}$^6_t@+<6ciS^9R9|Q8^?cb!R~D1gZlUHhvraaWd+<c4((Vu
z@IBDE6PEquZ9M(tFBRuu%a`Jf`Jp(Ul!8-d&fvm@3$R)(cyz!3Onhkqe%3>;82`;n
zFJeX5YJC0e9*4w^TnS@UmC~Lo?kBu!H1<L6>>mTAzIL57(CIwtGqW)CtN$5^r-PqB
zB{PtAF`XkyIR-u2AETchh0(tXcJjwoXUCQFtN38UCU~`Pj|tC?!|Sij#Id+|<mBeU
ziMz~Zv&$Nh{s7aH!iV_CU54A00oeps@mc#0KJ`M0D8WyT;!`_vujOII%2n9#(MLFW
zI>8auWHvi4BU~kPX-NrEl9Tao&OxUW6Va8mIrWuEb-qF>v3Ys5V-s_jnOcQAL=;g1
z%kHaTkVtuXIW7nyNe~K7?E3l}=sdmf<u?&%$1jcEzZV^S+OnWpSZo$(8T<)bTK0Z7
zjhk}d#|8~xc+pu2UTd)`bnNct1}!g6VM!^ToA6uMZ8khRW;85phQFKm663Fd{0!}l
zHEV<<pY-k9ugo1TkrQs)5E&VT$uIwbUq(p3lELktKJf8wuSU2@BxA;-q7Ezb_}}Np
zsYrC4;e2sv8M-n~Vkr?35rJwBvD2nZR?(@WpD+4z8>vsvhw;{eP@GG?fWtA-7(8g;
zT{)9{A{x=UDu^&@;}t98)$7*PA7|N#uUx)_|NGrU6?tT(9gF6M%a=2dpI7LBkNn@q
z*9TFDqG7UFloNO5`CeXL^@}VE(7SgpB&Q_fLP`>9IK1oJ9a?o6z)5Gs)q31&wNiL^
zIB`NGHX+*a>E{%E<lmgTZd7+HESb#~Vk}fw8QQ4QSWfFUY@|t3W>9`X5#OhqDn^<A
z;ifILJbWFonbGuDXH#lw8jrKN#Fw~-mOsnN%PZgtY1u4BkA4Q*c6@^U2cuETm`iGr
zx=dH6J3HGxl>N(nVux+p#uKmoak?_WlHx*DjG+!aJC7=c^Rn<u-hU5IjvC1t>RD$8
zccyGd;bxFLQYOWUD}|KcDv1({I7dW9A4JZzd=%v6tJ2j8qa{(MXJq2Xs6#MYZRp-T
z0HcNvLqS0aPQ)jmPoJZV)za{bA%hVV@F3jW95Zusa#73C<fRv%L-43kYSCQ5angd7
zezG`wY)(%0Ah<~K?C#xzFk|WzSUCF3o;zRV4{zo0TAWWwL+HXckduF1W&DS`2cmb6
z9x&IMG4<t1_;}||l=JHQb?StFEPj`h=o6?lTTyMQLD-7r=+M4xvw)~5L8GB_k`NQ6
zq1+sj7l}2wvqKJfY%tDqUijsR;YvtZ$=<zsVmM!S?$j9`Iyc0hjOUftz|XG(-u?4i
zxOC}?N`O8-J_?#ib=j@kgYa(OPR%EB9g3!MI^f}nT#NYYrI*`MGH^$5_Pm8uQB_S=
zn^ifeIJ24mgv^*pYc_16{GwvYD=479uUJVRY}`!Nx;B=Kwerc|mj0cNpFBw|AxE#+
zU$4#Q3Z9dS;rMY^imKZwAn-w6O@Dm(#g{4*D-g(8UJ~8fHDSmwWMbi)Z{wZ6E@r3q
z!n9XjR*8}{4!~JlT8{JQk}%-WN6=hKNl8)L5+Z}T!P^9jo8OFckc7^v>S|iJ=uHmC
zpHZ#Z#39&1&c>Upc~wmn)znt=xg+R0KJ8>Ondq-emQloa`)&&1uF~AO^Q38~+Cs{!
zq!sDm;Z=I-RGe$QtOi7N_H1Hj4qFq>U6o3_Jn0WA!Rd6m#+y1kg>x6SZQp^?vNHCY
zx8W&cwau$GhYcIS8Zq<`jnvPSjT>nNEnGMsEg=DUwVb)<gw9hiyoAA_r-ujE-w$xZ
zuA>sFhG9urd8q=96%|JK2L|Dzb!*_=&Pzd?=E$*Y*VhOQoxdYLKX-~;HxMK+*xS29
zjB8q<`l(cRT4Aih=B?XMSX6+e?=6;uqTsx=N~^1?6#~|I=+L1<2L)NgLzXOCiR!Xq
z{N<gu5fBi_0MiL|?~a@rYD2E;+d<MF^6+Rg$iu_4@0}|~$IHZ|By`r8OgMPxFv34r
zk8S}09Fjc{d*q11O6}UVg`bZfI(GDhuaB=1q`0^UXU?2O#J3T!S<D#0RpO_geU4Nv
zzPfjRNZL|$Wp2~zS-pA<4jhPNZRG8A-n*q`>aW*m+|Ncu9q?_sh9{*35hwM+MQqr(
z8CuTHf!(^|c`lTC_UesHh7EDN(V3EV5oT^u*i|{p|2U_#@$$r@eS2f%@W&CzrX_j9
zSY^cC@An~+7i4-!h=M4RTpLS_0!fAq8*X4@eyToNHAWl-LM1le2}oM3HrgL~kfy#m
zi{efv(BUI7v~kmBDle;`rOU(UaO_XSH3zYua1=9>i2>y0%U38PGgHmY%DqN!zVj||
zZO%s#Enl&MBcG8nv$E**xeF=cU;9-qx|M{dx;@4axI&DG*Gg!+K{kbAt&+evOvc0>
zrRg(g(S=KwDfZ}5#jJ%<FV`LP$){gXjj4u?{&bAyEm%Z0tA&}j(&Q;qDe>%Cg^qW8
z@)>>c&9@3cpGiDRd%pXgEEWq{`N+=Aqe;{LNO7l5lf`apusuZ1-K(`|4#}p<s#U9R
z5=5B2cD;Z?rq865v`e)6+dZ^(+s9PQ(EC7S6tBFQp*{=C%%9*)eZ8QNxVE68;u5-=
zk*S1`l`gL|l8H4YNI-IonFSC*($doCP;?9(J03^VUVV+fGt~<syxeJ{r^)c(>8X2)
zohnfr%UPQX?cTi`qeeZ!c<B<xj2(l?ue^ed8#nSMOg0xtZVVue2w%6J_eXki*!9Eu
z4>xkC+=YjN0>ID&5qtK)!hKs0H?68Rw`|!8H+L?PtyZjCzd?26hjafofU%c+FU_&l
ztHZ^?6NM+Vgq-_`qEaqeDDQe9g|ON`-uWqg6S0>VrmI!U%fHSmYE#$ec;|N)n~j*8
zl}#rxDTTPKRa*M-KqQ6EU&Mu$ku$lKSN;U0U%jgGzlF7P=}J1!u_?`EW#`iKzn-9e
zOmI(|p$$oVMx0D+d)bOGh88vK2erg2NZ<dkkNv=^%xlv>KUQ!>D#MB@BgMs^RDLBs
zQf;bc`_HAqq7o`8Ev2Y~2bG{=v|@tMhhvoK$^slaevIPc;;2`zzApQOOEo)pSwb0{
zO?m5$Hw~rSXx4dns*vf&iS3zZMys~Z5Bv6UQsNz$Httd%VDqLeh&mXf^37$g?cZDS
zzS=|d_4CI1^&j#x3mh4V6J^5b)2f3aB+a~8vu0z$go$OmWx!i(xuIxnl03tqZ^w`!
zLuu<jw<#wSQ^?A>Mx~`?D(W~P;i-fK;sQ#U%vHlxx^gvLX@;>Fo6r?DuPXk|%r$&I
z1Ik*ZrLeG7BqfFXOhn#=`%O-Ph7Nt4{{Q!r==IriRb#@=W>j5MLl-YyR1vAtSV_zN
zu}noJv3tf^G<E89_NjbTixd?V(r+gImfq)jL<C@%6eCaxEueea+;AWPw@|j87o?*v
z(5ASwSnc!8oim3)qYg=2Gdvyq6pXyrSW;So=;&x}D-lvtWRE3M8f*q;V<(&BTG_Bc
z3#oN>Y3hVx=q5ir8$_hx&KmJG^z|>|CI{PHnSAnhv8p_6#UGyi2dP){1&G5*bpQYW
M07*qoM6N<$g1q>|$p8QV


From 767e974aa9e076ca3c3e5688c5f8dce399267c62 Mon Sep 17 00:00:00 2001
From: Hunter Johnston <johnstonhuntera@gmail.com>
Date: Mon, 20 Nov 2023 14:15:25 -0500
Subject: [PATCH 075/217] fix light mode

---
 src/components/light-switch.svelte | 2 +-
 src/components/site-header.svelte  | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/light-switch.svelte b/src/components/light-switch.svelte
index 9391e3d99..b92d78440 100644
--- a/src/components/light-switch.svelte
+++ b/src/components/light-switch.svelte
@@ -12,7 +12,7 @@
 	aria-label="Light Switch"
 	aria-checked={$mode === "light"}
 	title="Toggle {$mode === 'dark' ? 'Dark' : 'Light'} Mode"
-	class="inline-flex h-10 w-10 items-center justify-center rounded-input px-2 transition-colors hover:bg-dark-10 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground focus-visible:ring-offset-2 focus-visible:ring-offset-background"
+	class="relative inline-flex h-10 w-10 items-center justify-center rounded-input px-2 transition-colors hover:bg-dark-10 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground focus-visible:ring-offset-2 focus-visible:ring-offset-background"
 >
 	{#if $mode === "light"}
 		<div
diff --git a/src/components/site-header.svelte b/src/components/site-header.svelte
index 9f962f9b2..d2731a6be 100644
--- a/src/components/site-header.svelte
+++ b/src/components/site-header.svelte
@@ -7,7 +7,7 @@
 <header
 	class="sticky top-0 z-50 overflow-x-hidden border-b border-border bg-background/75 backdrop-blur"
 >
-	<div class="container px-4">
+	<div class="container w-full px-4">
 		<div class="flex h-[70px] items-center justify-between gap-3">
 			<div class="flex items-center gap-1.5">
 				<MobileNav />

From 9101d66bae0ee96bd6b78555c6a71d80815303a3 Mon Sep 17 00:00:00 2001
From: Hunter Johnston <johnstonhuntera@gmail.com>
Date: Mon, 20 Nov 2023 14:41:10 -0500
Subject: [PATCH 076/217] link preview

---
 src/components/demos/context-menu-demo.svelte |  1 +
 .../demos/dropdown-menu-demo.svelte           |  2 +
 src/components/demos/link-preview-demo.svelte | 45 ++++++++++++-------
 src/components/site-header.svelte             |  2 +-
 .../components/LinkPreviewContent.svelte      |  2 +-
 .../bits/menu/components/MenuContent.svelte   |  2 +-
 6 files changed, 35 insertions(+), 19 deletions(-)

diff --git a/src/components/demos/context-menu-demo.svelte b/src/components/demos/context-menu-demo.svelte
index 0b36e1068..783b15db0 100644
--- a/src/components/demos/context-menu-demo.svelte
+++ b/src/components/demos/context-menu-demo.svelte
@@ -63,6 +63,7 @@
 			<ContextMenu.SubContent
 				class="w-full max-w-[209px] rounded-xl border border-muted bg-background px-1 py-1.5 shadow-popover outline-none"
 				transition={flyAndScale}
+				sideOffset={8}
 			>
 				<ContextMenu.Item
 					class="flex h-10 select-none items-center rounded-button py-3 pl-3 pr-1.5 text-sm font-normal outline-none transition-all duration-75 data-[highlighted]:bg-muted"
diff --git a/src/components/demos/dropdown-menu-demo.svelte b/src/components/demos/dropdown-menu-demo.svelte
index 51809715f..95aad7afa 100644
--- a/src/components/demos/dropdown-menu-demo.svelte
+++ b/src/components/demos/dropdown-menu-demo.svelte
@@ -21,6 +21,7 @@
 	<DropdownMenu.Content
 		class="w-full max-w-[229px] rounded-xl border border-muted bg-background px-1 py-1.5 shadow-popover outline-none"
 		transition={flyAndScale}
+		sideOffset={8}
 	>
 		<DropdownMenu.Item
 			class="flex h-10 select-none items-center rounded-button py-3 pl-3 pr-1.5 text-sm font-medium outline-none transition-all duration-75 data-[highlighted]:bg-muted"
@@ -98,6 +99,7 @@
 			<DropdownMenu.SubContent
 				class="w-full max-w-[209px] rounded-xl border border-muted bg-background px-1 py-1.5 shadow-popover outline-none"
 				transition={flyAndScale}
+				sideOffset={8}
 			>
 				<DropdownMenu.Item
 					class="flex h-10 select-none items-center rounded-button py-3 pl-3 pr-1.5 text-sm font-medium outline-none transition-all duration-75 data-[highlighted]:bg-muted"
diff --git a/src/components/demos/link-preview-demo.svelte b/src/components/demos/link-preview-demo.svelte
index 4b555c63c..bef238c38 100644
--- a/src/components/demos/link-preview-demo.svelte
+++ b/src/components/demos/link-preview-demo.svelte
@@ -1,7 +1,6 @@
 <script lang="ts">
-	import { CalendarDays } from "lucide-svelte";
-	import * as Avatar from "@/components/ui/avatar";
-	import * as LinkPreview from "@/components/ui/hover-card";
+	import { LinkPreview, Avatar } from "$lib";
+	import { MapPin, CalendarBlank } from "phosphor-svelte";
 </script>
 
 <LinkPreview.Root>
@@ -11,22 +10,36 @@
 		rel="noreferrer noopener"
 		class="rounded-sm underline-offset-4 hover:underline focus-visible:outline-2 focus-visible:outline-offset-8 focus-visible:outline-black"
 	>
-		@sveltejs
+		<Avatar.Root
+			class="flex h-12 w-12 items-center justify-center rounded-full bg-muted text-[17px] font-medium uppercase text-muted-foreground"
+		>
+			<Avatar.Image src="/avatar-1.png" alt="@huntabyte" />
+			<Avatar.Fallback>HB</Avatar.Fallback>
+		</Avatar.Root>
 	</LinkPreview.Trigger>
-	<LinkPreview.Content class="w-80">
-		<div class="flex justify-between space-x-4">
-			<Avatar.Root>
-				<Avatar.Image src="https://github.com/sveltejs.png" />
-				<Avatar.Fallback>SK</Avatar.Fallback>
+	<LinkPreview.Content
+		class="w-[331px] rounded-xl border border-muted bg-background p-[17px] shadow-popover"
+		sideOffset={8}
+	>
+		<div class="flex space-x-4">
+			<Avatar.Root
+				class="flex h-12 w-12 items-center justify-center rounded-full bg-muted text-[17px] font-medium uppercase text-muted-foreground"
+			>
+				<Avatar.Image src="/avatar-1.png" alt="@huntabyte" />
+				<Avatar.Fallback>HB</Avatar.Fallback>
 			</Avatar.Root>
 			<div class="space-y-1">
-				<h4 class="text-sm font-semibold">@sveltejs</h4>
-				<p class="text-sm">Cybernetically enhanced web apps.</p>
-				<div class="flex items-center pt-2">
-					<CalendarDays class="mr-2 h-4 w-4 opacity-70" />
-					<span class="text-xs text-muted-foreground">
-						Joined September 2022
-					</span>
+				<h4 class="text-sm font-medium">@huntabyte</h4>
+				<p class="text-sm">I do things on the internet.</p>
+				<div class="flex items-center gap-[21px]">
+					<div class="flex items-center pt-2">
+						<MapPin class="mr-1 h-4 w-4 opacity-70" />
+						<span class="text-xs text-muted-foreground"> FL, USA </span>
+					</div>
+					<div class="flex items-center pt-2">
+						<CalendarBlank class="mr-1 h-4 w-4 opacity-70" />
+						<span class="text-xs text-muted-foreground"> Joined May 2020</span>
+					</div>
 				</div>
 			</div>
 		</div>
diff --git a/src/components/site-header.svelte b/src/components/site-header.svelte
index d2731a6be..9f962f9b2 100644
--- a/src/components/site-header.svelte
+++ b/src/components/site-header.svelte
@@ -7,7 +7,7 @@
 <header
 	class="sticky top-0 z-50 overflow-x-hidden border-b border-border bg-background/75 backdrop-blur"
 >
-	<div class="container w-full px-4">
+	<div class="container px-4">
 		<div class="flex h-[70px] items-center justify-between gap-3">
 			<div class="flex items-center gap-1.5">
 				<MobileNav />
diff --git a/src/lib/bits/link-preview/components/LinkPreviewContent.svelte b/src/lib/bits/link-preview/components/LinkPreviewContent.svelte
index 4e15f0b4c..ba68f041a 100644
--- a/src/lib/bits/link-preview/components/LinkPreviewContent.svelte
+++ b/src/lib/bits/link-preview/components/LinkPreviewContent.svelte
@@ -19,7 +19,7 @@
 	export let outTransitionConfig: $$Props["outTransitionConfig"] = undefined;
 	export let asChild: $$Props["asChild"] = false;
 	export let id: $$Props["id"] = undefined;
-	export let side: $$Props["side"] = "top";
+	export let side: $$Props["side"] = "bottom";
 	export let align: $$Props["align"] = "center";
 	export let sideOffset: $$Props["sideOffset"] = 0;
 	export let alignOffset: $$Props["alignOffset"] = 0;
diff --git a/src/lib/bits/menu/components/MenuContent.svelte b/src/lib/bits/menu/components/MenuContent.svelte
index 4a37c4b7a..d68fb43c8 100644
--- a/src/lib/bits/menu/components/MenuContent.svelte
+++ b/src/lib/bits/menu/components/MenuContent.svelte
@@ -19,7 +19,7 @@
 	export let outTransitionConfig: $$Props["outTransitionConfig"] = undefined;
 	export let asChild: $$Props["asChild"] = false;
 	export let id: $$Props["id"] = undefined;
-	export let side: $$Props["side"] = "top";
+	export let side: $$Props["side"] = "bottom";
 	export let align: $$Props["align"] = "center";
 	export let sideOffset: $$Props["sideOffset"] = 0;
 	export let alignOffset: $$Props["alignOffset"] = 0;

From e1e1139642c29f40cbcbcbf754ee87709555b21f Mon Sep 17 00:00:00 2001
From: Hunter Johnston <johnstonhuntera@gmail.com>
Date: Mon, 20 Nov 2023 15:13:20 -0500
Subject: [PATCH 077/217] init menubar

---
 src/components/demos/menubar-demo.svelte      | 109 ++++++++++--------
 src/content/api-reference/menu.ts             |   7 ++
 src/lib/bits/menu/_types.ts                   |   3 +-
 .../components/MenuCheckboxIndicator.svelte   |   4 +-
 .../menu/components/MenuRadioIndicator.svelte |  24 +++-
 src/lib/bits/menu/ctx.ts                      |   1 +
 src/lib/bits/menu/types.ts                    |   7 +-
 7 files changed, 102 insertions(+), 53 deletions(-)

diff --git a/src/components/demos/menubar-demo.svelte b/src/components/demos/menubar-demo.svelte
index d8b08a0df..df1300559 100644
--- a/src/components/demos/menubar-demo.svelte
+++ b/src/components/demos/menubar-demo.svelte
@@ -1,81 +1,96 @@
 <script lang="ts">
 	import { Menubar } from "$lib";
 	import { flyAndScale } from "@/utils";
-	import { CaretRight } from "phosphor-svelte";
+	import { CaretRight, Cat, Check } from "phosphor-svelte";
 
 	let bookmarks = false;
 	let fullUrls = true;
 
+	let pixelGrid = true;
+	let layoutGrid = false;
+
+	let view = "table";
+
 	const profileRadioValue = "benoit";
 </script>
 
 <Menubar.Root
 	class="flex h-12 items-center gap-1 rounded-[10px] border border-muted px-[3px] shadow-mini"
 >
+	<div class="px-[10px]">
+		<Cat class="h-6 w-6" />
+	</div>
 	<Menubar.Menu>
 		<Menubar.Trigger
-			class="inline-flex h-10 cursor-default items-center justify-center rounded-[9px] px-3 text-sm outline-none data-[highlighted]:bg-muted data-[state=open]:bg-muted"
-			>File</Menubar.Trigger
+			class="inline-flex h-10 cursor-default items-center justify-center rounded-[9px] px-3 text-sm font-medium outline-none data-[highlighted]:bg-muted data-[state=open]:bg-muted"
+			>View</Menubar.Trigger
 		>
 		<Menubar.Content
 			class="w-full max-w-[220px] rounded-xl border border-muted bg-background px-1 py-1.5 shadow-popover outline-none"
 			transition={flyAndScale}
+			align="start"
+			sideOffset={3}
 		>
-			<Menubar.Item
-				class="flex h-10 select-none items-center rounded-button py-3 pl-3 pr-1.5 text-sm font-medium outline-none transition-all duration-75 data-[highlighted]:bg-muted"
-				>New Tab</Menubar.Item
-			>
-			<Menubar.Item
+			<Menubar.CheckboxItem
 				class="flex h-10 select-none items-center rounded-button py-3 pl-3 pr-1.5 text-sm font-medium outline-none transition-all duration-75 data-[highlighted]:bg-muted"
-				>New Window</Menubar.Item
+				bind:checked={pixelGrid}
 			>
-			<Menubar.Item
+				Pixel grid
+				<Menubar.CheckboxIndicator class="ml-auto ">
+					<Check class="h-5 w-5" />
+				</Menubar.CheckboxIndicator>
+			</Menubar.CheckboxItem>
+			<Menubar.CheckboxItem
 				class="flex h-10 select-none items-center rounded-button py-3 pl-3 pr-1.5 text-sm font-medium outline-none transition-all duration-75 data-[highlighted]:bg-muted"
-				>New Incognito Window</Menubar.Item
+				bind:checked={layoutGrid}
 			>
-			<Menubar.Separator />
-			<Menubar.Sub>
-				<Menubar.SubTrigger
-					class="flex h-10 select-none items-center rounded-button py-3 pl-3 pr-1.5 text-sm font-medium outline-none transition-all duration-75 data-[highlighted]:bg-muted data-[state=open]:bg-muted"
+				Layout grid
+				<Menubar.CheckboxIndicator class="ml-auto">
+					<Check class="h-5 w-5" />
+				</Menubar.CheckboxIndicator>
+			</Menubar.CheckboxItem>
+			<Menubar.Separator class="my-1 -ml-1 -mr-1 block h-px bg-muted" />
+			<Menubar.RadioGroup bind:value={view}>
+				<Menubar.RadioItem
+					value="table"
+					class="flex h-10 select-none items-center rounded-button py-3 pl-3 pr-1.5 text-sm font-medium outline-none transition-all duration-75 data-[highlighted]:bg-muted"
 				>
-					Share
-					<div class="ml-auto flex items-center gap-px">
-						<CaretRight class="h-4 w-4 text-foreground-alt" />
-					</div>
-				</Menubar.SubTrigger>
-				<Menubar.SubContent
-					class="w-full max-w-[209px] rounded-xl border border-muted bg-background px-1 py-1.5 shadow-popover outline-none"
-					transition={flyAndScale}
+					Table
+					<Menubar.RadioIndicator class="ml-auto">
+						<Check class="h-5 w-5" />
+					</Menubar.RadioIndicator>
+				</Menubar.RadioItem>
+				<Menubar.RadioItem
+					value="board"
+					class="flex h-10 select-none items-center rounded-button py-3 pl-3 pr-1.5 text-sm font-medium outline-none transition-all duration-75 data-[highlighted]:bg-muted"
 				>
-					<Menubar.Item
-						class="flex h-10 select-none items-center rounded-button py-3 pl-3 pr-1.5 text-sm font-medium outline-none transition-all duration-75 data-[highlighted]:bg-muted"
-						>Email link</Menubar.Item
-					>
-					<Menubar.Item
-						class="flex h-10 select-none items-center rounded-button py-3 pl-3 pr-1.5 text-sm font-medium outline-none transition-all duration-75 data-[highlighted]:bg-muted"
-						>Messages</Menubar.Item
-					>
-					<Menubar.Item
-						class="flex h-10 select-none items-center rounded-button py-3 pl-3 pr-1.5 text-sm font-medium outline-none transition-all duration-75 data-[highlighted]:bg-muted"
-						>Notes</Menubar.Item
-					>
-				</Menubar.SubContent>
-			</Menubar.Sub>
-			<Menubar.Separator />
-			<Menubar.Item
-				class="flex h-10 select-none items-center rounded-button py-3 pl-3 pr-1.5 text-sm font-medium outline-none transition-all duration-75 data-[highlighted]:bg-muted"
-				>Print...</Menubar.Item
-			>
+					Board
+					<Menubar.RadioIndicator class="ml-auto">
+						<Check class="h-5 w-5" />
+					</Menubar.RadioIndicator>
+				</Menubar.RadioItem>
+				<Menubar.RadioItem
+					value="gallery"
+					class="flex h-10 select-none items-center rounded-button py-3 pl-3 pr-1.5 text-sm font-medium outline-none transition-all duration-75 data-[highlighted]:bg-muted"
+				>
+					Gallery
+					<Menubar.RadioIndicator class="ml-auto">
+						<Check class="h-5 w-5" />
+					</Menubar.RadioIndicator>
+				</Menubar.RadioItem>
+			</Menubar.RadioGroup>
 		</Menubar.Content>
 	</Menubar.Menu>
 	<Menubar.Menu>
 		<Menubar.Trigger
-			class="inline-flex h-10 cursor-default items-center justify-center rounded-[9px] px-3 text-sm outline-none data-[highlighted]:bg-muted data-[state=open]:bg-muted"
+			class="inline-flex h-10 cursor-default items-center justify-center rounded-[9px] px-3 text-sm font-medium outline-none data-[highlighted]:bg-muted data-[state=open]:bg-muted"
 			>Edit</Menubar.Trigger
 		>
 		<Menubar.Content
 			class="w-full max-w-[220px] rounded-xl border border-muted bg-background px-1 py-1.5 shadow-popover outline-none"
 			transition={flyAndScale}
+			align="start"
+			sideOffset={3}
 		>
 			<Menubar.Item
 				class="flex h-10 select-none items-center rounded-button py-3 pl-3 pr-1.5 text-sm font-medium outline-none transition-all duration-75 data-[highlighted]:bg-muted"
@@ -135,12 +150,14 @@
 	</Menubar.Menu>
 	<Menubar.Menu>
 		<Menubar.Trigger
-			class="inline-flex h-10 cursor-default items-center justify-center rounded-[9px] px-3 text-sm outline-none data-[highlighted]:bg-muted data-[state=open]:bg-muted"
+			class="inline-flex h-10 cursor-default items-center justify-center rounded-[9px] px-3 text-sm font-medium outline-none data-[highlighted]:bg-muted data-[state=open]:bg-muted"
 			>View</Menubar.Trigger
 		>
 		<Menubar.Content
 			class="w-full max-w-[220px] rounded-xl border border-muted bg-background px-1 py-1.5 shadow-popover outline-none"
 			transition={flyAndScale}
+			align="start"
+			sideOffset={3}
 		>
 			<Menubar.CheckboxItem
 				class="flex h-10 select-none items-center rounded-button py-3 pl-3 pr-1.5 text-sm font-medium outline-none transition-all duration-75 data-[highlighted]:bg-muted"
@@ -173,12 +190,14 @@
 	</Menubar.Menu>
 	<Menubar.Menu>
 		<Menubar.Trigger
-			class="inline-flex h-10 cursor-default items-center justify-center rounded-[9px] px-3 text-sm outline-none data-[highlighted]:bg-muted data-[state=open]:bg-muted"
+			class="inline-flex h-10 cursor-default items-center justify-center rounded-[9px] px-3 text-sm font-medium outline-none data-[highlighted]:bg-muted data-[state=open]:bg-muted"
 			>Profiles</Menubar.Trigger
 		>
 		<Menubar.Content
 			class="w-full max-w-[220px] rounded-xl border border-muted bg-background px-1 py-1.5 shadow-popover outline-none"
 			transition={flyAndScale}
+			align="start"
+			sideOffset={3}
 		>
 			<Menubar.RadioGroup value={profileRadioValue}>
 				<Menubar.RadioItem
diff --git a/src/content/api-reference/menu.ts b/src/content/api-reference/menu.ts
index 57c7b00a3..b710ff7a3 100644
--- a/src/content/api-reference/menu.ts
+++ b/src/content/api-reference/menu.ts
@@ -329,6 +329,13 @@ const checkboxIndicatorAttrs: DataAttrs = [
 	}
 ];
 
+const radioIndicatorAttrs: DataAttrs = [
+	{
+		name: "bits-menu-radio-indicator",
+		description: "Present on the radio indicator element."
+	}
+];
+
 export const trigger = {
 	props: triggerProps,
 	dataAttributes: triggerAttrs
diff --git a/src/lib/bits/menu/_types.ts b/src/lib/bits/menu/_types.ts
index adf71aed2..9feab49a7 100644
--- a/src/lib/bits/menu/_types.ts
+++ b/src/lib/bits/menu/_types.ts
@@ -104,7 +104,8 @@ export type ItemProps = Expand<
 
 export type ArrowProps = FloatingArrowProps;
 export type GroupProps = AsChild;
-export type CheckboxItemIndicatorProps = AsChild;
+export type CheckboxIndicatorProps = AsChild;
+export type RadioIndicatorProps = AsChild;
 export type LabelProps = AsChild;
 export type SeparatorProps = AsChild;
 export type TriggerProps = AsChild;
diff --git a/src/lib/bits/menu/components/MenuCheckboxIndicator.svelte b/src/lib/bits/menu/components/MenuCheckboxIndicator.svelte
index 5b9896e4e..e21c7d4ef 100644
--- a/src/lib/bits/menu/components/MenuCheckboxIndicator.svelte
+++ b/src/lib/bits/menu/components/MenuCheckboxIndicator.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
-	import type { CheckboxItemIndicatorProps } from "../types.js";
+	import type { CheckboxIndicatorProps } from "../types.js";
 	import { getAttrs, getCheckboxIndicator } from "../ctx.js";
 
-	type $$Props = CheckboxItemIndicatorProps;
+	type $$Props = CheckboxIndicatorProps;
 	export let asChild: $$Props["asChild"] = false;
 
 	const checked = getCheckboxIndicator();
diff --git a/src/lib/bits/menu/components/MenuRadioIndicator.svelte b/src/lib/bits/menu/components/MenuRadioIndicator.svelte
index b0c0a7baa..56baa8ce4 100644
--- a/src/lib/bits/menu/components/MenuRadioIndicator.svelte
+++ b/src/lib/bits/menu/components/MenuRadioIndicator.svelte
@@ -1,8 +1,26 @@
 <script lang="ts">
-	import { getRadioIndicator } from "../ctx.js";
+	import type { RadioIndicatorProps } from "../types.js";
+	import { getAttrs, getRadioIndicator } from "../ctx.js";
+
+	type $$Props = RadioIndicatorProps;
+	export let asChild: $$Props["asChild"] = false;
+
 	const { isChecked, value } = getRadioIndicator();
+	const attrs = getAttrs("radio-indicator");
+
+	$: checked = $isChecked(value);
+	$: slotProps = {
+		checked,
+		attrs
+	};
 </script>
 
-{#if $isChecked(value)}
-	<slot />
+{#if asChild}
+	<slot {...slotProps} />
+{:else}
+	<div {...$$restProps} {...attrs}>
+		{#if $isChecked(value)}
+			<slot {...slotProps} />
+		{/if}
+	</div>
 {/if}
diff --git a/src/lib/bits/menu/ctx.ts b/src/lib/bits/menu/ctx.ts
index 41a2ac406..a021666ca 100644
--- a/src/lib/bits/menu/ctx.ts
+++ b/src/lib/bits/menu/ctx.ts
@@ -37,6 +37,7 @@ const PARTS = [
 	"label",
 	"radio-group",
 	"radio-item",
+	"radio-indicator",
 	"separator",
 	"sub-content",
 	"sub-trigger",
diff --git a/src/lib/bits/menu/types.ts b/src/lib/bits/menu/types.ts
index 15eecfcd2..32b0f1385 100644
--- a/src/lib/bits/menu/types.ts
+++ b/src/lib/bits/menu/types.ts
@@ -29,7 +29,9 @@ type DivElement = HTMLDivAttributes & {
 
 type ItemProps = I.ItemProps & (AnchorElement | DivElement);
 
-type CheckboxItemIndicatorProps = I.CheckboxItemIndicatorProps & HTMLDivAttributes;
+type CheckboxIndicatorProps = I.CheckboxIndicatorProps & HTMLDivAttributes;
+
+type RadioIndicatorProps = I.RadioIndicatorProps & HTMLDivAttributes;
 
 type LabelProps = I.LabelProps & HTMLDivAttributes;
 
@@ -99,7 +101,8 @@ export type {
 	ContentProps,
 	GroupProps,
 	ItemProps,
-	CheckboxItemIndicatorProps,
+	CheckboxIndicatorProps,
+	RadioIndicatorProps,
 	LabelProps,
 	RadioGroupProps,
 	RadioItemProps,

From 2261be3786b8a56a47c18a7b3d24531845238d7b Mon Sep 17 00:00:00 2001
From: Hunter Johnston <johnstonhuntera@gmail.com>
Date: Mon, 20 Nov 2023 15:22:06 -0500
Subject: [PATCH 078/217] logo

---
 src/components/icons/caret-right.svelte     | 14 ---------
 src/components/icons/index.ts               |  2 +-
 src/components/icons/logo.svelte            | 32 +++++++++++++++++++++
 src/components/navigation/mobile-nav.svelte |  7 +++--
 src/components/site-header.svelte           |  9 +++---
 src/content/api-reference/context-menu.ts   |  7 +++--
 src/content/api-reference/dropdown-menu.ts  |  7 +++--
 src/content/api-reference/menu.ts           | 12 +++++++-
 static/logo.svg                             |  7 +++++
 9 files changed, 67 insertions(+), 30 deletions(-)
 delete mode 100644 src/components/icons/caret-right.svelte
 create mode 100644 src/components/icons/logo.svelte
 create mode 100644 static/logo.svg

diff --git a/src/components/icons/caret-right.svelte b/src/components/icons/caret-right.svelte
deleted file mode 100644
index 0afe6e73c..000000000
--- a/src/components/icons/caret-right.svelte
+++ /dev/null
@@ -1,14 +0,0 @@
-<script lang="ts">
-	import type { IconProps } from ".";
-	type $$Props = IconProps;
-</script>
-
-<svg
-	xmlns="http://www.w3.org/2000/svg"
-	{...$$restProps}
-	fill="currentColor"
-	viewBox="0 0 256 256"
-	><path
-		d="M181.66,133.66l-80,80a8,8,0,0,1-11.32-11.32L164.69,128,90.34,53.66a8,8,0,0,1,11.32-11.32l80,80A8,8,0,0,1,181.66,133.66Z"
-	/></svg
->
diff --git a/src/components/icons/index.ts b/src/components/icons/index.ts
index b11a6d99f..6da7cc578 100644
--- a/src/components/icons/index.ts
+++ b/src/components/icons/index.ts
@@ -1,7 +1,6 @@
 import type { Icon as LucideIcon } from "lucide-svelte";
 import type { HTMLAttributes } from "svelte/elements";
 
-export { default as CaretRight } from "./caret-right.svelte";
 export { default as SunDim } from "./sun-dim.svelte";
 export { default as Sun } from "./sun.svelte";
 export { default as MoonStars } from "./moon-stars.svelte";
@@ -20,6 +19,7 @@ export { default as SquareHalf } from "./square-half.svelte";
 export { default as BookOpen } from "./book-open.svelte";
 export { default as Code } from "./code.svelte";
 export { default as RocketLaunch } from "./rocket-launch.svelte";
+export { default as Logo } from "./logo.svelte";
 
 export type IconProps = Partial<HTMLAttributes<SVGElement>> & {
 	class?: string;
diff --git a/src/components/icons/logo.svelte b/src/components/icons/logo.svelte
new file mode 100644
index 000000000..2ea193e6c
--- /dev/null
+++ b/src/components/icons/logo.svelte
@@ -0,0 +1,32 @@
+<svg
+	width="64"
+	height="20"
+	viewBox="0 0 64 20"
+	fill="none"
+	xmlns="http://www.w3.org/2000/svg"
+	{...$$restProps}
+>
+	<path
+		d="M58.0197 19.3381C55.7317 19.3381 53.8857 18.5581 52.4037 16.9721L54.7697 14.8141C55.7577 15.9321 56.7977 16.4781 57.9417 16.4781C59.1377 16.4781 59.8137 15.8801 59.8137 15.0741C59.8137 14.3721 59.4757 13.9821 57.3437 13.4881C53.7297 12.6301 53.1837 10.9921 53.1837 9.27609C53.1837 6.91009 55.0557 5.14209 58.2277 5.14209C60.4117 5.14209 61.8677 5.68809 63.2457 7.48209L60.6977 9.43209C60.0477 8.39209 59.2157 7.97609 58.3057 7.97609C57.3437 7.97609 56.6157 8.34009 56.6157 9.17209C56.6157 9.64009 56.8237 10.0561 58.4357 10.4721C62.3617 11.4861 63.2717 12.9421 63.2717 14.9701C63.2717 17.4661 61.0097 19.3381 58.0197 19.3381Z"
+		fill="currentColor"
+	/>
+	<path
+		d="M49.3294 19C46.6514 19 45.1954 17.752 45.1954 14.814V8.46999H43.2974V5.47999H45.1954V2.74999L48.7054 2.38599V5.47999H51.5654V8.46999H48.7054V14.632C48.7054 15.49 49.1214 15.88 49.7974 15.88H51.2534V19H49.3294Z"
+		fill="currentColor"
+	/>
+	<path
+		d="M37.8415 19V5.48003H41.3515V19H37.8415ZM37.4775 2.28203C37.4775 1.16403 38.3875 0.228027 39.5835 0.228027C40.8055 0.228027 41.6895 1.16403 41.6895 2.28203C41.6895 3.45203 40.8055 4.36203 39.5835 4.36203C38.3875 4.36203 37.4775 3.42603 37.4775 2.28203Z"
+		fill="currentColor"
+	/>
+	<path
+		d="M28.814 19.338C26.396 19.338 25.174 18.324 24.446 16.79V19H21.04V0.0200195H24.55V7.56002C25.278 6.13002 26.5 5.19402 28.814 5.19402C32.532 5.19402 35.496 8.39202 35.496 12.292C35.496 16.192 32.532 19.338 28.814 19.338ZM24.446 12.292C24.446 14.398 25.928 16.166 28.242 16.166C30.478 16.166 31.986 14.32 31.986 12.266C31.986 10.16 30.478 8.36602 28.242 8.36602C25.928 8.36602 24.446 10.186 24.446 12.292Z"
+		fill="currentColor"
+	/>
+	<circle
+		cx="5.93555"
+		cy="10.9873"
+		r="5"
+		transform="rotate(90 5.93555 10.9873)"
+		fill="currentColor"
+	/>
+</svg>
diff --git a/src/components/navigation/mobile-nav.svelte b/src/components/navigation/mobile-nav.svelte
index 5ac0fd716..054aaf5cb 100644
--- a/src/components/navigation/mobile-nav.svelte
+++ b/src/components/navigation/mobile-nav.svelte
@@ -2,8 +2,9 @@
 	import * as Sheet from "@/components/ui/sheet";
 	import { SquareHalf } from "@/components/icons";
 	import { Button } from "@/components/ui/button";
-	import { siteConfig, navigation } from "@/config";
+	import { navigation } from "@/config";
 	import MobileLink from "./mobile-link.svelte";
+	import { Logo } from "@/components/icons";
 
 	let open = false;
 </script>
@@ -13,7 +14,7 @@
 		<Button
 			builders={[builder]}
 			variant="ghost"
-			class="mr-2 px-0 text-base hover:bg-transparent focus-visible:bg-transparent focus-visible:ring-0 focus-visible:ring-offset-0 lg:hidden"
+			class="mr-2 px-0 text-base hover:bg-transparent focus-visible:bg-transparent focus-visible:ring-0 focus-visible:ring-offset-0 md:hidden"
 		>
 			<SquareHalf class="h-5 w-5" />
 			<span class="sr-only">Toggle Menu</span>
@@ -21,7 +22,7 @@
 	</Sheet.Trigger>
 	<Sheet.Content side="left" class="pr-0">
 		<MobileLink href="/" class="flex items-center" {open}>
-			<span class="font-bold">{siteConfig.name}</span>
+			<Logo />
 		</MobileLink>
 		<div class="my-4 h-[calc(100vh-8rem)] overflow-auto pb-10 pl-6">
 			<div class="flex flex-col space-y-2">
diff --git a/src/components/site-header.svelte b/src/components/site-header.svelte
index 9f962f9b2..f55292381 100644
--- a/src/components/site-header.svelte
+++ b/src/components/site-header.svelte
@@ -2,6 +2,7 @@
 	import { Button } from "$lib";
 	import { LightSwitch, MobileNav } from "@/components";
 	import { siteConfig } from "@/config";
+	import { Logo } from "@/components/icons";
 </script>
 
 <header
@@ -11,11 +12,9 @@
 		<div class="flex h-[70px] items-center justify-between gap-3">
 			<div class="flex items-center gap-1.5">
 				<MobileNav />
-				<a
-					href="/"
-					class="text-2xl font-bold tracking-tight underline underline-offset-4"
-					>bits</a
-				>
+				<a href="/">
+					<Logo />
+				</a>
 			</div>
 			<div class="flex items-center justify-end gap-3">
 				<Button.Root
diff --git a/src/content/api-reference/context-menu.ts b/src/content/api-reference/context-menu.ts
index 3c055aaeb..354e31f2d 100644
--- a/src/content/api-reference/context-menu.ts
+++ b/src/content/api-reference/context-menu.ts
@@ -80,7 +80,7 @@ export const checkboxItem: APISchema<Menu.CheckboxItemProps> = {
 	...menu.checkboxItem
 };
 
-export const checkboxIndicator: APISchema<Menu.CheckboxItemIndicatorProps> = {
+export const checkboxIndicator: APISchema<Menu.CheckboxIndicatorProps> = {
 	title: "CheckboxIndicator",
 	description:
 		"A visual indicator of the checkbox menu item's checked state. It passes the item's checked state as a slot prop `checked` and can be used to render a custom indicator.",
@@ -100,10 +100,11 @@ export const radioItem: APISchema<Menu.RadioItemProps> = {
 	...menu.radioItem
 };
 
-export const radioIndicator: APISchema = {
+export const radioIndicator: APISchema<Menu.RadioIndicatorProps> = {
 	title: "RadioIndicator",
 	description:
-		"A visual indicator helper for `RadioItem`s. It only renders it's children when the radio item is checked."
+		"A visual indicator helper for `RadioItem`s. It only renders it's children when the radio item is checked.",
+	...menu.radioIndicator
 };
 
 export const sub: APISchema<Menu.SubProps> = {
diff --git a/src/content/api-reference/dropdown-menu.ts b/src/content/api-reference/dropdown-menu.ts
index 4c7fb6367..8525074da 100644
--- a/src/content/api-reference/dropdown-menu.ts
+++ b/src/content/api-reference/dropdown-menu.ts
@@ -44,7 +44,7 @@ export const checkboxItem: APISchema<Menu.CheckboxItemProps> = {
 	...menu.checkboxItem
 };
 
-export const checkboxIndicator: APISchema<Menu.CheckboxItemIndicatorProps> = {
+export const checkboxIndicator: APISchema<Menu.CheckboxIndicatorProps> = {
 	title: "CheckboxIndicator",
 	description:
 		"A visual indicator of the checkbox menu item's checked state. It passed the item's checked state as a slot prop `checked` and can be used to render a custom indicator.",
@@ -64,10 +64,11 @@ export const radioItem: APISchema<Menu.RadioItemProps> = {
 	...menu.radioItem
 };
 
-export const radioIndicator: APISchema = {
+export const radioIndicator: APISchema<Menu.RadioIndicatorProps> = {
 	title: "RadioIndicator",
 	description:
-		"A visual indicator helper for `RadioItem`s. It only renders it's children when the radio item is checked."
+		"A visual indicator helper for `RadioItem`s. It only renders it's children when the radio item is checked.",
+	...menu.radioIndicator
 };
 
 export const sub: APISchema<Menu.SubProps> = {
diff --git a/src/content/api-reference/menu.ts b/src/content/api-reference/menu.ts
index b710ff7a3..2b7261132 100644
--- a/src/content/api-reference/menu.ts
+++ b/src/content/api-reference/menu.ts
@@ -161,6 +161,10 @@ const radioItemProps = {
 	asChild
 } satisfies PropObj<Menu.RadioItemProps>;
 
+const radioIndicatorProps = {
+	asChild
+} satisfies PropObj<Menu.RadioIndicatorProps>;
+
 const itemProps = {
 	asChild,
 	disabled: {
@@ -189,7 +193,7 @@ const labelProps = { asChild } satisfies PropObj<Menu.LabelProps>;
 const separatorProps = { asChild } satisfies PropObj<Menu.SeparatorProps>;
 const checkboxIndicatorProps = {
 	asChild
-} satisfies PropObj<Menu.CheckboxItemIndicatorProps>;
+} satisfies PropObj<Menu.CheckboxIndicatorProps>;
 
 const STATE = {
 	name: "state",
@@ -401,6 +405,11 @@ export const subContent = {
 	dataAttributes: subContentAttrs
 };
 
+export const radioIndicator = {
+	props: radioIndicatorProps,
+	dataAttributes: radioIndicatorAttrs
+};
+
 export const sub = {
 	props: subProps
 };
@@ -419,6 +428,7 @@ export const menu = {
 	checkboxIndicator,
 	radioGroup,
 	radioItem,
+	radioIndicator,
 	separator,
 	arrow,
 	group,
diff --git a/static/logo.svg b/static/logo.svg
new file mode 100644
index 000000000..cc9fa5cc8
--- /dev/null
+++ b/static/logo.svg
@@ -0,0 +1,7 @@
+<svg width="64" height="20" viewBox="0 0 64 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M58.0197 19.3381C55.7317 19.3381 53.8857 18.5581 52.4037 16.9721L54.7697 14.8141C55.7577 15.9321 56.7977 16.4781 57.9417 16.4781C59.1377 16.4781 59.8137 15.8801 59.8137 15.0741C59.8137 14.3721 59.4757 13.9821 57.3437 13.4881C53.7297 12.6301 53.1837 10.9921 53.1837 9.27609C53.1837 6.91009 55.0557 5.14209 58.2277 5.14209C60.4117 5.14209 61.8677 5.68809 63.2457 7.48209L60.6977 9.43209C60.0477 8.39209 59.2157 7.97609 58.3057 7.97609C57.3437 7.97609 56.6157 8.34009 56.6157 9.17209C56.6157 9.64009 56.8237 10.0561 58.4357 10.4721C62.3617 11.4861 63.2717 12.9421 63.2717 14.9701C63.2717 17.4661 61.0097 19.3381 58.0197 19.3381Z" fill="currentColor"/>
+<path d="M49.3294 19C46.6514 19 45.1954 17.752 45.1954 14.814V8.46999H43.2974V5.47999H45.1954V2.74999L48.7054 2.38599V5.47999H51.5654V8.46999H48.7054V14.632C48.7054 15.49 49.1214 15.88 49.7974 15.88H51.2534V19H49.3294Z" fill="currentColor"/>
+<path d="M37.8415 19V5.48003H41.3515V19H37.8415ZM37.4775 2.28203C37.4775 1.16403 38.3875 0.228027 39.5835 0.228027C40.8055 0.228027 41.6895 1.16403 41.6895 2.28203C41.6895 3.45203 40.8055 4.36203 39.5835 4.36203C38.3875 4.36203 37.4775 3.42603 37.4775 2.28203Z" fill="currentColor"/>
+<path d="M28.814 19.338C26.396 19.338 25.174 18.324 24.446 16.79V19H21.04V0.0200195H24.55V7.56002C25.278 6.13002 26.5 5.19402 28.814 5.19402C32.532 5.19402 35.496 8.39202 35.496 12.292C35.496 16.192 32.532 19.338 28.814 19.338ZM24.446 12.292C24.446 14.398 25.928 16.166 28.242 16.166C30.478 16.166 31.986 14.32 31.986 12.266C31.986 10.16 30.478 8.36602 28.242 8.36602C25.928 8.36602 24.446 10.186 24.446 12.292Z" fill="currentColor"/>
+<circle cx="5.93555" cy="10.9873" r="5" transform="rotate(90 5.93555 10.9873)" fill="currentColor"/>
+</svg>

From 382a5e579305688f814661cef3055df7545dfd2f Mon Sep 17 00:00:00 2001
From: Hunter Johnston <johnstonhuntera@gmail.com>
Date: Mon, 20 Nov 2023 15:26:39 -0500
Subject: [PATCH 079/217] favicon

---
 src/app.html             | 4 ++--
 static/favicon-dark.svg  | 3 +++
 static/favicon-light.svg | 3 +++
 3 files changed, 8 insertions(+), 2 deletions(-)
 create mode 100644 static/favicon-dark.svg
 create mode 100644 static/favicon-light.svg

diff --git a/src/app.html b/src/app.html
index b12cf28a6..22c771280 100644
--- a/src/app.html
+++ b/src/app.html
@@ -3,12 +3,12 @@
 	<head>
 		<meta charset="utf-8" />
 		<link
-			href="%sveltekit.assets%/favicon-light-mode.png"
+			href="%sveltekit.assets%/favicon-light.svg"
 			rel="icon"
 			media="(prefers-color-scheme: light)"
 		/>
 		<link
-			href="%sveltekit.assets%/favicon-dark-mode.png"
+			href="%sveltekit.assets%/favicon-dark.svg"
 			rel="icon"
 			media="(prefers-color-scheme: dark)"
 		/>
diff --git a/static/favicon-dark.svg b/static/favicon-dark.svg
new file mode 100644
index 000000000..baafa4d91
--- /dev/null
+++ b/static/favicon-dark.svg
@@ -0,0 +1,3 @@
+<svg width="11" height="11" viewBox="0 0 11 11" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="5.93555" cy="5.9873" r="5" transform="rotate(90 5.93555 5.9873)" fill="#FFFFFF"/>
+</svg>
diff --git a/static/favicon-light.svg b/static/favicon-light.svg
new file mode 100644
index 000000000..6a65da432
--- /dev/null
+++ b/static/favicon-light.svg
@@ -0,0 +1,3 @@
+<svg width="11" height="11" viewBox="0 0 11 11" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="5.93555" cy="5.9873" r="5" transform="rotate(90 5.93555 5.9873)" fill="#171717"/>
+</svg>

From 7d61a487fc7019ae6ba46f737b01c3af6cbcdb72 Mon Sep 17 00:00:00 2001
From: Hunter Johnston <johnstonhuntera@gmail.com>
Date: Mon, 20 Nov 2023 15:28:03 -0500
Subject: [PATCH 080/217] spacing

---
 src/components/api-ref/prop-type-content.svelte | 2 +-
 src/components/demos/context-menu-demo.svelte   | 2 +-
 src/components/demos/dropdown-menu-demo.svelte  | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/api-ref/prop-type-content.svelte b/src/components/api-ref/prop-type-content.svelte
index 68f3ee6fc..10dae03c7 100644
--- a/src/components/api-ref/prop-type-content.svelte
+++ b/src/components/api-ref/prop-type-content.svelte
@@ -22,7 +22,7 @@
 			</Popover.Trigger>
 			<Popover.Content
 				side="top"
-				sideOffset={8}
+				sideOffset={10}
 				transition={flyAndScale}
 				transitionConfig={{ y: 8 }}
 				class="z-50 max-h-[400px] overflow-auto rounded-input border border-border bg-background p-4 shadow-popover"
diff --git a/src/components/demos/context-menu-demo.svelte b/src/components/demos/context-menu-demo.svelte
index 783b15db0..935752bc1 100644
--- a/src/components/demos/context-menu-demo.svelte
+++ b/src/components/demos/context-menu-demo.svelte
@@ -63,7 +63,7 @@
 			<ContextMenu.SubContent
 				class="w-full max-w-[209px] rounded-xl border border-muted bg-background px-1 py-1.5 shadow-popover outline-none"
 				transition={flyAndScale}
-				sideOffset={8}
+				sideOffset={10}
 			>
 				<ContextMenu.Item
 					class="flex h-10 select-none items-center rounded-button py-3 pl-3 pr-1.5 text-sm font-normal outline-none transition-all duration-75 data-[highlighted]:bg-muted"
diff --git a/src/components/demos/dropdown-menu-demo.svelte b/src/components/demos/dropdown-menu-demo.svelte
index 95aad7afa..02ff52645 100644
--- a/src/components/demos/dropdown-menu-demo.svelte
+++ b/src/components/demos/dropdown-menu-demo.svelte
@@ -99,7 +99,7 @@
 			<DropdownMenu.SubContent
 				class="w-full max-w-[209px] rounded-xl border border-muted bg-background px-1 py-1.5 shadow-popover outline-none"
 				transition={flyAndScale}
-				sideOffset={8}
+				sideOffset={10}
 			>
 				<DropdownMenu.Item
 					class="flex h-10 select-none items-center rounded-button py-3 pl-3 pr-1.5 text-sm font-medium outline-none transition-all duration-75 data-[highlighted]:bg-muted"

From 2c4fe9e8a1bf14f13e35ec35222ee79f5e33de42 Mon Sep 17 00:00:00 2001
From: Hunter Johnston <johnstonhuntera@gmail.com>
Date: Mon, 20 Nov 2023 15:38:00 -0500
Subject: [PATCH 081/217] checkbox border

---
 src/components/demos/checkbox-demo.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/demos/checkbox-demo.svelte b/src/components/demos/checkbox-demo.svelte
index 6568f28b6..a487ad6f9 100644
--- a/src/components/demos/checkbox-demo.svelte
+++ b/src/components/demos/checkbox-demo.svelte
@@ -8,7 +8,7 @@
 	<Checkbox.Root
 		id="terms"
 		aria-labelledby="terms-label"
-		class="peer h-[25px] w-[25px] rounded-md border border-muted bg-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground focus-visible:ring-offset-2 focus-visible:ring-offset-background data-[state=unchecked]:bg-background"
+		class="peer h-[25px] w-[25px] rounded-md border border-muted bg-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground focus-visible:ring-offset-2 focus-visible:ring-offset-background data-[state=unchecked]:border-border-input data-[state=unchecked]:bg-background"
 		checked="indeterminate"
 	>
 		<Checkbox.Indicator

From c96d32f06e9a43e6c1709df119f3b2ff8a9f1c61 Mon Sep 17 00:00:00 2001
From: Hunter Johnston <johnstonhuntera@gmail.com>
Date: Mon, 20 Nov 2023 15:40:36 -0500
Subject: [PATCH 082/217] popover sideoffset

---
 src/components/demos/popover-demo.svelte | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/demos/popover-demo.svelte b/src/components/demos/popover-demo.svelte
index 36e1f7d17..d9cfc41f2 100644
--- a/src/components/demos/popover-demo.svelte
+++ b/src/components/demos/popover-demo.svelte
@@ -20,6 +20,7 @@
 	<Popover.Content
 		class="z-20 w-full max-w-[392px] rounded-card border border-muted bg-background p-5 shadow-card outline-none"
 		transition={flyAndScale}
+		sideOffset={8}
 	>
 		<div class="flex items-center">
 			<div

From 248a4717bb0a493c261694d967cdc0938730bd1b Mon Sep 17 00:00:00 2001
From: Hunter Johnston <johnstonhuntera@gmail.com>
Date: Mon, 20 Nov 2023 15:49:15 -0500
Subject: [PATCH 083/217] context menu

---
 src/components/demos/context-menu-demo.svelte | 10 ++++++---
 src/components/demos/select-demo.svelte       | 22 ++++++++++++-------
 .../select/components/SelectContent.svelte    |  2 +-
 src/lib/bits/select/ctx.ts                    |  3 ++-
 4 files changed, 24 insertions(+), 13 deletions(-)

diff --git a/src/components/demos/context-menu-demo.svelte b/src/components/demos/context-menu-demo.svelte
index 935752bc1..eec7bb451 100644
--- a/src/components/demos/context-menu-demo.svelte
+++ b/src/components/demos/context-menu-demo.svelte
@@ -5,15 +5,19 @@
 		PencilSimpleLine,
 		PlusCircle,
 		CopySimple,
-		Trash
+		Trash,
+		MouseSimple
 	} from "phosphor-svelte";
 </script>
 
 <ContextMenu.Root>
 	<ContextMenu.Trigger
-		class="flex h-[150px] w-[300px] select-none items-center justify-center rounded-card-sm bg-muted text-sm font-medium"
+		class="flex h-[188px] w-[279px] select-none items-center justify-center rounded-card border-2 border-dashed border-border-input bg-background  font-semibold text-muted-foreground"
 	>
-		Right click me
+		<div class="flex flex-col items-center justify-center gap-4 text-center">
+			<MouseSimple class="sq-8" />
+			Right click me
+		</div>
 	</ContextMenu.Trigger>
 	<ContextMenu.Content
 		class="w-full max-w-[229px] rounded-xl border border-muted bg-background px-1 py-1.5 shadow-popover outline-none"
diff --git a/src/components/demos/select-demo.svelte b/src/components/demos/select-demo.svelte
index d4c10146d..10f9acfc8 100644
--- a/src/components/demos/select-demo.svelte
+++ b/src/components/demos/select-demo.svelte
@@ -3,26 +3,32 @@
 	import { flyAndScale } from "@/utils";
 
 	const fruits = [
-		{ value: "apple", label: "Apple" },
-		{ value: "banana", label: "Banana" },
-		{ value: "blueberry", label: "Blueberry" },
-		{ value: "grapes", label: "Grapes" },
-		{ value: "pineapple", label: "Pineapple" }
+		{ value: "svelte", label: "Svelte" },
+		{ value: "vue", label: "Vue" },
+		{ value: "solid", label: "Solid" },
+		{ value: "angular", label: "Angular" },
+		{ value: "react", label: "React" }
 	];
 </script>
 
 <Select.Root>
 	<Select.Trigger
-		class="inline-flex h-input w-[180px] 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-[180px] items-center rounded-card-sm border border-dark-10 bg-background px-4 text-sm transition-colors placeholder:text-foreground-alt/50 focus:outline-none focus-visible:ring-2 focus-visible:ring-foreground focus-visible:ring-offset-2 focus-visible:ring-offset-background"
 	>
-		<Select.Value class="text-sm font-medium" placeholder="Select a fruit" />
+		<Select.Value
+			class="text-sm font-medium"
+			placeholder="Select a framework"
+		/>
 	</Select.Trigger>
 	<Select.Content
 		class="w-full rounded-xl border border-muted bg-background px-1 py-1.5 shadow-popover outline-none"
 		transition={flyAndScale}
+		sideOffset={8}
 	>
 		<Select.Group>
-			<Select.Label class="py-1.5 pl-2 font-medium">Fruits</Select.Label>
+			<Select.Label class="py-1.5 pl-2 text-sm font-medium"
+				>Frameworks</Select.Label
+			>
 			{#each fruits as fruit}
 				<Select.Item
 					class="flex h-10 select-none items-center rounded-button py-3 pl-3 pr-1.5 text-sm  outline-none transition-all duration-75 data-[highlighted]:bg-muted"
diff --git a/src/lib/bits/select/components/SelectContent.svelte b/src/lib/bits/select/components/SelectContent.svelte
index 8dfc420cf..b1a56e940 100644
--- a/src/lib/bits/select/components/SelectContent.svelte
+++ b/src/lib/bits/select/components/SelectContent.svelte
@@ -27,7 +27,7 @@
 	export let collisionPadding: $$Props["collisionPadding"] = 8;
 	export let avoidCollisions: $$Props["avoidCollisions"] = true;
 	export let collisionBoundary: $$Props["collisionBoundary"] = undefined;
-	export let sameWidth: $$Props["sameWidth"] = false;
+	export let sameWidth: $$Props["sameWidth"] = true;
 	export let fitViewport: $$Props["fitViewport"] = false;
 
 	const {
diff --git a/src/lib/bits/select/ctx.ts b/src/lib/bits/select/ctx.ts
index 160af5e6a..039574e1d 100644
--- a/src/lib/bits/select/ctx.ts
+++ b/src/lib/bits/select/ctx.ts
@@ -75,7 +75,8 @@ export function setArrow(size = 8) {
 
 const defaultPlacement = {
 	side: "bottom",
-	align: "center"
+	align: "center",
+	sameWidth: true
 } satisfies PositioningProps;
 
 export function updatePositioning(props: PositioningProps) {

From 3e1282f297a72ef5e7ffce657631d6ca22753c46 Mon Sep 17 00:00:00 2001
From: Hunter Johnston <johnstonhuntera@gmail.com>
Date: Mon, 20 Nov 2023 16:19:18 -0500
Subject: [PATCH 084/217] radio indicator doc

---
 src/content/api-reference/menubar.ts | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/content/api-reference/menubar.ts b/src/content/api-reference/menubar.ts
index 7e7d06875..e921fb495 100644
--- a/src/content/api-reference/menubar.ts
+++ b/src/content/api-reference/menubar.ts
@@ -66,7 +66,7 @@ export const checkboxItem: APISchema<Menu.CheckboxItemProps> = {
 	...m.checkboxItem
 };
 
-export const checkboxIndicator: APISchema<Menu.CheckboxItemIndicatorProps> = {
+export const checkboxIndicator: APISchema<Menu.CheckboxIndicatorProps> = {
 	title: "CheckboxIndicator",
 	description:
 		"A visual indicator of the checkbox menu item's checked state. It passed the item's checked state as a slot prop `checked` and can be used to render a custom indicator.",
@@ -86,10 +86,11 @@ export const radioItem: APISchema<Menu.RadioItemProps> = {
 	...m.radioItem
 };
 
-export const radioIndicator: APISchema = {
+export const radioIndicator: APISchema<Menu.RadioIndicatorProps> = {
 	title: "RadioIndicator",
 	description:
-		"A visual indicator helper for `RadioItem`s. It only renders it's children when the radio item is checked."
+		"A visual indicator helper for `RadioItem`s. It only renders it's children when the radio item is checked.",
+	...m.radioIndicator
 };
 
 export const sub: APISchema<Menu.SubProps> = {

From 62877d59f1fb2792df5badb627cf32e4882a3703 Mon Sep 17 00:00:00 2001
From: Hunter Johnston <johnstonhuntera@gmail.com>
Date: Mon, 20 Nov 2023 16:30:12 -0500
Subject: [PATCH 085/217] collapsible demo

---
 src/components/demos/collapsible-demo.svelte | 48 ++++++++++----------
 1 file changed, 25 insertions(+), 23 deletions(-)

diff --git a/src/components/demos/collapsible-demo.svelte b/src/components/demos/collapsible-demo.svelte
index c8813e91a..d847128bf 100644
--- a/src/components/demos/collapsible-demo.svelte
+++ b/src/components/demos/collapsible-demo.svelte
@@ -1,33 +1,35 @@
 <script lang="ts">
-	import * as Collapsible from "@/components/ui/collapsible";
-	import * as Button from "@/components/ui/button";
-	import { CaretUpDown } from "@/components/icons";
+	import { Collapsible } from "$lib";
+	import { CaretUpDown } from "phosphor-svelte";
+	import { slide } from "svelte/transition";
 </script>
 
-<Collapsible.Root class="w-[350px] space-y-2">
-	<div class="flex items-center justify-between space-x-4 px-4">
-		<h4 class="text-sm font-semibold">@huntabyte starred 3 repositories</h4>
-		<Collapsible.Trigger asChild let:builder>
-			<Button.Root
-				builders={[builder]}
-				variant="ghost"
-				size="sm"
-				class="w-9 p-0"
-			>
-				<CaretUpDown class="h-4 w-4" />
-				<span class="sr-only">Toggle</span>
-			</Button.Root>
+<Collapsible.Root class="w-[327px] space-y-3">
+	<div class="flex items-center justify-between space-x-10">
+		<h4 class="text-[15px] font-medium">@huntabyte starred 3 repositories</h4>
+		<Collapsible.Trigger
+			class="inline-flex h-10 w-10 items-center justify-center rounded-[9px] border border-border-input shadow-btn focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground focus-visible:ring-offset-2 focus-visible:ring-offset-background"
+		>
+			<CaretUpDown class="h-4 w-4 text-foreground" weight="bold" />
+			<span class="sr-only">Toggle</span>
 		</Collapsible.Trigger>
 	</div>
-	<div class="rounded-md border px-4 py-3 font-mono text-sm">
-		@huntabyte/bits
-	</div>
-	<Collapsible.Content class="space-y-2">
-		<div class="rounded-md border px-4 py-3 font-mono text-sm">
-			@melt-ui/melt
+
+	<Collapsible.Content class="space-y-2" transition={slide}>
+		<div
+			class="inline-flex h-12 w-full items-center rounded-[9px] bg-muted px-[18px] py-3 font-mono text-[15px] tracking-[0.01em]"
+		>
+			@huntabyte/bits-ui
 		</div>
-		<div class="rounded-md border px-4 py-3 font-mono text-sm">
+		<div
+			class="inline-flex h-12 w-full items-center rounded-[9px] bg-muted px-[18px] py-3 font-mono text-[15px] tracking-[0.01em]"
+		>
 			@huntabyte/shadcn-svelte
 		</div>
+		<div
+			class="inline-flex h-12 w-full items-center rounded-[9px] bg-muted px-[18px] py-3 font-mono text-[15px] tracking-[0.01em]"
+		>
+			@melt-ui/meltui
+		</div>
 	</Collapsible.Content>
 </Collapsible.Root>

From 11a714ab972ee1a6bbf33dc4835742461826b4c6 Mon Sep 17 00:00:00 2001
From: Hunter Johnston <johnstonhuntera@gmail.com>
Date: Mon, 20 Nov 2023 16:31:03 -0500
Subject: [PATCH 086/217] cleanup dropdown

---
 src/components/demos/dropdown-menu-demo.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/demos/dropdown-menu-demo.svelte b/src/components/demos/dropdown-menu-demo.svelte
index 02ff52645..e7c5e4a1b 100644
--- a/src/components/demos/dropdown-menu-demo.svelte
+++ b/src/components/demos/dropdown-menu-demo.svelte
@@ -113,7 +113,7 @@
 							class="aspect-square h-full w-full"
 						/>
 						<Avatar.Fallback
-							class="flex h-full w-full items-center justify-center rounded-full bg-muted"
+							class="flex h-full w-full items-center justify-center rounded-full bg-muted text-xs"
 							>HJ</Avatar.Fallback
 						>
 					</Avatar.Root>

From cd9a5a4a8022ca22c2d3f6c577dd9aba2be48ae8 Mon Sep 17 00:00:00 2001
From: Hunter Johnston <johnstonhuntera@gmail.com>
Date: Mon, 20 Nov 2023 17:57:03 -0500
Subject: [PATCH 087/217] init tabs demo

---
 src/components/demos/tabs-demo.svelte | 86 ++++++++++++++++++++-------
 src/styles/app.postcss                |  8 +++
 tailwind.config.ts                    |  4 ++
 3 files changed, 78 insertions(+), 20 deletions(-)

diff --git a/src/components/demos/tabs-demo.svelte b/src/components/demos/tabs-demo.svelte
index 8b46c36d2..1088d1a20 100644
--- a/src/components/demos/tabs-demo.svelte
+++ b/src/components/demos/tabs-demo.svelte
@@ -1,24 +1,70 @@
 <script lang="ts">
-	import * as Tabs from "$lib/bits/tabs";
+	import { Tabs, Label, Button } from "$lib";
+	import { LockKeyOpen } from "phosphor-svelte";
 </script>
 
-<div class="bg-primary rounded-xl p-4">
-	<Tabs.Root value="account" class="w-[400px]">
-		<Tabs.List
-			class="bg-primary/5 grid w-full grid-cols-2 rounded-lg border border-muted-foreground p-1"
+<Tabs.Root
+	value="login"
+	class="w-[428px] rounded-card border border-muted bg-background p-6 shadow-card"
+>
+	<Tabs.List
+		class="grid w-full grid-cols-2 gap-1 rounded-[9px] bg-dark-4 p-1 shadow-mini-inset"
+	>
+		<Tabs.Trigger
+			value="login"
+			class="h-8 rounded-[7px] bg-transparent py-2 text-sm font-semibold leading-[0.01em] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground focus-visible:ring-offset-2 focus-visible:ring-offset-background data-[state=active]:bg-white data-[state=active]:shadow-mini dark:bg-black dark:data-[state=active]:bg-black"
+			>Login</Tabs.Trigger
 		>
-			<Tabs.Trigger
-				value="account"
-				class="h-10 rounded-md data-[state=active]:bg-muted"
-				>Account</Tabs.Trigger
-			>
-			<Tabs.Trigger
-				value="password"
-				class="h-10 rounded-md data-[state=active]:bg-muted"
-				>Password</Tabs.Trigger
-			>
-		</Tabs.List>
-		<Tabs.Content value="account">Account</Tabs.Content>
-		<Tabs.Content value="password">Password</Tabs.Content>
-	</Tabs.Root>
-</div>
+		<Tabs.Trigger
+			value="register"
+			class="h-8 rounded-[7px] bg-transparent py-2 text-sm font-semibold leading-[0.01em] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground focus-visible:ring-offset-2 focus-visible:ring-offset-background data-[state=active]:bg-white data-[state=active]:shadow-mini dark:bg-black dark:data-[state=active]:bg-black"
+			>Register</Tabs.Trigger
+		>
+	</Tabs.List>
+	<Tabs.Content value="login" class="pt-6 focus-visible:outline-none">
+		<div class="flex flex-col">
+			<h4 class="text-[19px] font-semibold leading-none tracking-[-0.01em]">
+				Login to your account
+			</h4>
+			<p class="text-sm font-medium text-muted-foreground">
+				to access all your data
+			</p>
+		</div>
+		<div class="flex flex-col gap-4 pt-5">
+			<div class="flex flex-col gap-1">
+				<Label.Root for="username" class="text-sm font-medium text-foreground">
+					Username
+				</Label.Root>
+				<input
+					type="text"
+					id="username"
+					placeholder="name@example.com"
+					class="border-input inline-flex h-input w-full items-center rounded-input border px-3 text-sm placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-foreground focus:ring-offset-2 focus:ring-offset-background"
+				/>
+			</div>
+			<div class="flex flex-col gap-1">
+				<Label.Root for="password" class="text-sm font-medium text-foreground">
+					Password
+				</Label.Root>
+				<div class="relative w-full">
+					<input
+						id="password"
+						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"
+						placeholder="super_secret"
+						type="password"
+						autocomplete="off"
+					/>
+					<LockKeyOpen
+						class="absolute right-4 top-[14px] h-[22px] w-[22px] text-dark/30"
+					/>
+				</div>
+			</div>
+		</div>
+		<Button.Root
+			class="hover:button-gradient mt-[22px] inline-flex h-input w-full items-center justify-center rounded-input bg-dark px-[50px] text-[15px] font-semibold text-background shadow-mini focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-dark focus-visible:ring-offset-2 focus-visible:ring-offset-background"
+		>
+			Login
+		</Button.Root>
+	</Tabs.Content>
+	<Tabs.Content value="register">Password</Tabs.Content>
+</Tabs.Root>
diff --git a/src/styles/app.postcss b/src/styles/app.postcss
index 561e050d5..a76f202a4 100644
--- a/src/styles/app.postcss
+++ b/src/styles/app.postcss
@@ -17,10 +17,14 @@
 		--border-card: 240 6% 10% / 0.1;
 		--dark: 240 6% 10%;
 		--dark-10: 240 6% 10% / 0.1;
+		--dark-04: 240 6% 10% / 0.04;
 		--accent: 204 94% 94%;
 		--accent-foreground: 204 80% 16%;
 		--destructive: 347 77% 50%;
 
+		/* black */
+		--constrast: 0 0% 0%;
+
 		/* Shadows */
 		--shadow-mini: 0px 1px 0px 1px rgba(0, 0, 0, 0.04);
 		--shadow-mini-inset: 0px 1px 0px 0px rgba(0, 0, 0, 0.04) inset;
@@ -42,10 +46,14 @@
 		--border-card: 0 0% 96% / 0.1;
 		--dark: 0 0% 96%;
 		--dark-10: 0 0% 96% / 0.1;
+		--dark-04: 0 0% 96% / 0.04;
 		--accent: 204 80% 16%;
 		--accent-foreground: 204 94% 94%;
 		--destructive: 350 89% 60%;
 
+		/* white */
+		--constrast: 0 0% 100%;
+
 		/* Shadows */
 		--shadow-mini: 0px 1px 0px 1px rgba(255, 255, 255, 0.04);
 		--shadow-mini-inset: 0px 1px 0px 0px rgba(255, 255, 255, 0.04) inset;
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 2a9025caf..67e04d130 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -32,6 +32,7 @@ export default {
 				},
 				dark: {
 					DEFAULT: "hsl(var(--dark) / <alpha-value>)",
+					4: "hsl(var(--dark-04))",
 					10: "hsl(var(--dark-10))"
 				},
 				accent: {
@@ -40,6 +41,9 @@ export default {
 				},
 				destructive: {
 					DEFAULT: "hsl(var(--destructive) / <alpha-value>)"
+				},
+				contrast: {
+					DEFAULT: "hsl(var(--contrast) / <alpha-value>)"
 				}
 			},
 			fontFamily: {

From 1b44fcb031123d1681774b852fa6e3d1e15efdb1 Mon Sep 17 00:00:00 2001
From: Hunter Johnston <johnstonhuntera@gmail.com>
Date: Mon, 20 Nov 2023 19:57:06 -0500
Subject: [PATCH 088/217] tabs demo

---
 src/components/demos/tabs-demo.svelte | 72 +++++++++++++++++++++++++--
 1 file changed, 68 insertions(+), 4 deletions(-)

diff --git a/src/components/demos/tabs-demo.svelte b/src/components/demos/tabs-demo.svelte
index 1088d1a20..e0cfc01ff 100644
--- a/src/components/demos/tabs-demo.svelte
+++ b/src/components/demos/tabs-demo.svelte
@@ -12,12 +12,12 @@
 	>
 		<Tabs.Trigger
 			value="login"
-			class="h-8 rounded-[7px] bg-transparent py-2 text-sm font-semibold leading-[0.01em] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground focus-visible:ring-offset-2 focus-visible:ring-offset-background data-[state=active]:bg-white data-[state=active]:shadow-mini dark:bg-black dark:data-[state=active]:bg-black"
+			class="h-8 rounded-[7px] bg-transparent py-2 text-sm font-semibold leading-[0.01em] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground focus-visible:ring-offset-2 focus-visible:ring-offset-background data-[state=active]:bg-white data-[state=active]:shadow-mini dark:data-[state=active]:bg-background"
 			>Login</Tabs.Trigger
 		>
 		<Tabs.Trigger
 			value="register"
-			class="h-8 rounded-[7px] bg-transparent py-2 text-sm font-semibold leading-[0.01em] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground focus-visible:ring-offset-2 focus-visible:ring-offset-background data-[state=active]:bg-white data-[state=active]:shadow-mini dark:bg-black dark:data-[state=active]:bg-black"
+			class="h-8 rounded-[7px] bg-transparent py-2 text-sm font-semibold leading-[0.01em] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground focus-visible:ring-offset-2 focus-visible:ring-offset-background data-[state=active]:bg-white data-[state=active]:shadow-mini dark:data-[state=active]:bg-background"
 			>Register</Tabs.Trigger
 		>
 	</Tabs.List>
@@ -39,7 +39,7 @@
 					type="text"
 					id="username"
 					placeholder="name@example.com"
-					class="border-input inline-flex h-input w-full items-center rounded-input border px-3 text-sm placeholder:text-muted-foreground 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-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"
 				/>
 			</div>
 			<div class="flex flex-col gap-1">
@@ -66,5 +66,69 @@
 			Login
 		</Button.Root>
 	</Tabs.Content>
-	<Tabs.Content value="register">Password</Tabs.Content>
+	<Tabs.Content value="register" class="pt-6 focus-visible:outline-none">
+		<div class="flex flex-col">
+			<h4 class="text-[19px] font-semibold leading-none tracking-[-0.01em]">
+				Register for an account
+			</h4>
+			<p class="text-sm font-medium text-muted-foreground">
+				to start using all our features
+			</p>
+		</div>
+		<div class="flex flex-col gap-4 pt-5">
+			<div class="flex flex-col gap-1">
+				<Label.Root for="username" class="text-sm font-medium text-foreground">
+					Username
+				</Label.Root>
+				<input
+					type="text"
+					id="username"
+					placeholder="name@example.com"
+					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"
+				/>
+			</div>
+			<div class="flex flex-col gap-1">
+				<Label.Root for="password" class="text-sm font-medium text-foreground">
+					Password
+				</Label.Root>
+				<div class="relative w-full">
+					<input
+						id="password"
+						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"
+						placeholder="super_secret"
+						type="password"
+						autocomplete="off"
+					/>
+					<LockKeyOpen
+						class="absolute right-4 top-[14px] h-[22px] w-[22px] text-dark/30"
+					/>
+				</div>
+			</div>
+			<div class="flex flex-col gap-1">
+				<Label.Root
+					for="passwordConfirm"
+					class="text-sm font-medium text-foreground"
+				>
+					Confirm Password
+				</Label.Root>
+				<div class="relative w-full">
+					<input
+						id="passwordConfirm"
+						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"
+						placeholder="super_secret"
+						type="password"
+						autocomplete="off"
+					/>
+					<LockKeyOpen
+						class="absolute right-4 top-[14px] h-[22px] w-[22px] text-dark/30"
+					/>
+				</div>
+			</div>
+		</div>
+		<Button.Root
+			class="hover:button-gradient mt-[22px] inline-flex h-input w-full items-center justify-center rounded-input bg-dark px-[50px] text-[15px] font-semibold text-background shadow-mini focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-dark focus-visible:ring-offset-2 focus-visible:ring-offset-background"
+		>
+			Login
+		</Button.Root>
+	</Tabs.Content>
 </Tabs.Root>

From b1f787785e96d895c7f8a484f57bfe1d53632e5c Mon Sep 17 00:00:00 2001
From: Hunter Johnston <johnstonhuntera@gmail.com>
Date: Mon, 20 Nov 2023 20:13:50 -0500
Subject: [PATCH 089/217] slider demo

---
 src/components/demos/slider-demo.svelte | 18 ++++++++++++++++--
 1 file changed, 16 insertions(+), 2 deletions(-)

diff --git a/src/components/demos/slider-demo.svelte b/src/components/demos/slider-demo.svelte
index 378e468ea..a223b924f 100644
--- a/src/components/demos/slider-demo.svelte
+++ b/src/components/demos/slider-demo.svelte
@@ -1,5 +1,19 @@
 <script lang="ts">
-	import * as Slider from "@/components/ui/slider";
+	import { Slider } from "$lib";
+
+	let value = [50];
 </script>
 
-<Slider.Root value={[50]} max={100} step={1} class="max-w-[70%]" />
+<Slider.Root
+	bind:value
+	class="relative flex w-full touch-none select-none items-center"
+>
+	<span
+		class="relative h-2 w-full grow overflow-hidden rounded-full bg-dark-10"
+	>
+		<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 disabled:pointer-events-none disabled:opacity-50"
+	/>
+</Slider.Root>

From 44d5603601c98d5986a1230c53d66f2b2013b810 Mon Sep 17 00:00:00 2001
From: Hunter Johnston <johnstonhuntera@gmail.com>
Date: Mon, 20 Nov 2023 20:16:19 -0500
Subject: [PATCH 090/217] radio group demo init

---
 src/components/demos/radio-group-demo.svelte | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/components/demos/radio-group-demo.svelte b/src/components/demos/radio-group-demo.svelte
index 7ac51b86e..3e29d3ab5 100644
--- a/src/components/demos/radio-group-demo.svelte
+++ b/src/components/demos/radio-group-demo.svelte
@@ -2,34 +2,34 @@
 	import { RadioGroup, Label } from "$lib";
 </script>
 
-<RadioGroup.Root class="flex flex-col gap-3">
+<RadioGroup.Root class="flex flex-col gap-4">
 	<div
-		class="text-primary/50 [&:has([data-state=checked])]:text-primary group flex cursor-pointer select-none items-center gap-3 transition-colors"
+		class="group flex cursor-pointer select-none items-center gap-3 text-foreground/50 transition-colors [&:has([data-state=checked])]:text-foreground"
 	>
 		<RadioGroup.Item
 			id="amazing"
 			value="amazing"
-			class="border-primary/40 data-[state=checked]:group-hover:border-primary data-[state=checked]:border-primary shrink-0 rounded-full border-2 ring-offset-1 transition-all duration-200 sq-5 focus:outline-none focus-visible:ring-2 focus-visible:ring-background/70 data-[state=checked]:border-6"
+			class="shrink-0 rounded-full border-2 border-foreground/40 ring-offset-1 transition-all duration-200 sq-5 focus:outline-none focus-visible:ring-2 focus-visible:ring-foreground/70 data-[state=checked]:border-6 data-[state=checked]:border-foreground data-[state=checked]:group-hover:border-foreground"
 		/>
 		<Label.Root for="amazing" class="text-sm font-medium">Amazing</Label.Root>
 	</div>
 	<div
-		class="text-primary/50 [&:has([data-state=checked])]:text-primary group flex cursor-pointer select-none items-center gap-3 transition-colors"
+		class="group flex cursor-pointer select-none items-center gap-3 text-foreground/50 transition-colors [&:has([data-state=checked])]:text-foreground"
 	>
 		<RadioGroup.Item
 			id="average"
 			value="average"
-			class="border-primary/40 data-[state=checked]:group-hover:border-primary data-[state=checked]:border-primary shrink-0 rounded-full border-2 ring-offset-1 transition-all duration-200 sq-5 focus:outline-none focus-visible:ring-2 focus-visible:ring-background/70 data-[state=checked]:border-6 "
+			class="shrink-0 rounded-full border-2 border-foreground/40 ring-offset-1 transition-all duration-200 sq-5 focus:outline-none focus-visible:ring-2 focus-visible:ring-foreground/70 data-[state=checked]:border-6 data-[state=checked]:border-foreground data-[state=checked]:group-hover:border-foreground "
 		/>
 		<Label.Root for="average" class="text-sm font-medium">Average</Label.Root>
 	</div>
 	<div
-		class="text-primary/50 [&:has([data-state=checked])]:text-primary group flex cursor-pointer select-none items-center gap-3 transition-colors"
+		class="group flex cursor-pointer select-none items-center gap-3 text-foreground/50 transition-colors [&:has([data-state=checked])]:text-foreground"
 	>
 		<RadioGroup.Item
 			id="terrible"
 			value="terrible"
-			class="border-primary/40 data-[state=checked]:group-hover:border-primary data-[state=checked]:border-primary shrink-0 rounded-full border-2 ring-offset-1 transition-all duration-200 sq-5 focus:outline-none focus-visible:ring-2 focus-visible:ring-background/70 data-[state=checked]:border-6"
+			class="shrink-0 rounded-full border-2 border-foreground/40 ring-offset-1 transition-all duration-200 sq-5 focus:outline-none focus-visible:ring-2 focus-visible:ring-foreground/70 data-[state=checked]:border-6 data-[state=checked]:border-foreground data-[state=checked]:group-hover:border-foreground"
 		/>
 		<Label.Root for="terrible" class="text-sm font-medium">Terrible</Label.Root>
 	</div>

From 01f77a16c80b3099f0317d2721c89745c798edd6 Mon Sep 17 00:00:00 2001
From: Hunter Johnston <johnstonhuntera@gmail.com>
Date: Mon, 20 Nov 2023 20:26:48 -0500
Subject: [PATCH 091/217] update select indicator

---
 src/components/demos/select-demo.svelte       |  2 +-
 src/content/api-reference/select.ts           | 76 +++++++++++++++++--
 src/lib/bits/select/_types.ts                 |  3 +
 .../components/SelectItemIndicator.svelte     | 22 +++++-
 src/lib/bits/select/ctx.ts                    | 12 ++-
 src/lib/bits/select/types.ts                  |  4 +
 6 files changed, 107 insertions(+), 12 deletions(-)

diff --git a/src/components/demos/select-demo.svelte b/src/components/demos/select-demo.svelte
index 10f9acfc8..b0944179f 100644
--- a/src/components/demos/select-demo.svelte
+++ b/src/components/demos/select-demo.svelte
@@ -31,7 +31,7 @@
 			>
 			{#each fruits as fruit}
 				<Select.Item
-					class="flex h-10 select-none items-center rounded-button py-3 pl-3 pr-1.5 text-sm  outline-none transition-all duration-75 data-[highlighted]:bg-muted"
+					class="flex h-10 select-none items-center rounded-button py-3 pl-3 pr-1.5 text-sm outline-none transition-all duration-75 data-[selected]:bg-muted data-[highlighted]:hover:bg-muted/50"
 					value={fruit.value}
 					label={fruit.label}>{fruit.label}</Select.Item
 				>
diff --git a/src/content/api-reference/select.ts b/src/content/api-reference/select.ts
index 500706867..7e4fcd7aa 100644
--- a/src/content/api-reference/select.ts
+++ b/src/content/api-reference/select.ts
@@ -116,6 +116,10 @@ export const trigger: APISchema<Select.TriggerProps> = {
 		{
 			name: "disabled",
 			description: "Present when the trigger is disabled."
+		},
+		{
+			name: "bits-select-trigger",
+			description: "Present on the trigger element."
 		}
 	]
 };
@@ -123,7 +127,13 @@ export const trigger: APISchema<Select.TriggerProps> = {
 export const content: APISchema<Select.ContentProps> = {
 	title: "Content",
 	description: "The content/menu element which contains the select menu's items.",
-	props: { ...transitionProps, ...floatingPositioning, asChild }
+	props: { ...transitionProps, ...floatingPositioning, asChild },
+	dataAttributes: [
+		{
+			name: "bits-select-content",
+			description: "Present on the content element."
+		}
+	]
 };
 
 export const item: APISchema<Select.ItemProps> = {
@@ -145,7 +155,22 @@ export const item: APISchema<Select.ItemProps> = {
 				"Whether or not the select item is disabled. This will prevent interaction/selection."
 		},
 		asChild
-	}
+	},
+	dataAttributes: [
+		{
+			name: "state",
+			value: enums("selected", "hovered"),
+			description: "The state of the item."
+		},
+		{
+			name: "disabled",
+			description: "Present when the item is disabled."
+		},
+		{
+			name: "bits-select-item",
+			description: "Present on the item element."
+		}
+	]
 };
 
 export const value: APISchema = {
@@ -158,7 +183,13 @@ export const value: APISchema = {
 			description: "A placeholder value to display when no value is selected."
 		},
 		asChild
-	}
+	},
+	dataAttributes: [
+		{
+			name: "bits-select-value",
+			description: "Present on the value element."
+		}
+	]
 };
 
 export const input: APISchema<Select.InputProps> = {
@@ -171,14 +202,26 @@ export const input: APISchema<Select.InputProps> = {
 export const group: APISchema<Select.GroupProps> = {
 	title: "Group",
 	description: "An accessible group of select menu items.",
-	props: { asChild }
+	props: { asChild },
+	dataAttributes: [
+		{
+			name: "bits-select-group",
+			description: "Present on the group element."
+		}
+	]
 };
 
 export const label: APISchema<Select.LabelProps> = {
 	title: "Label",
 	description:
 		"A label for the select menu which will be skipped when navigating with the keyboard. This must be a child of the `Select.Group` component to be accessible.",
-	props: { asChild }
+	props: { asChild },
+	dataAttributes: [
+		{
+			name: "bits-select-label",
+			description: "Present on the label element."
+		}
+	]
 };
 
 export const separator: APISchema<Select.SeparatorProps> = {
@@ -186,7 +229,27 @@ export const separator: APISchema<Select.SeparatorProps> = {
 	description: "A visual separator for use between select items or groups.",
 	props: {
 		asChild
-	}
+	},
+	dataAttributes: [
+		{
+			name: "bits-select-separator",
+			description: "Present on the separator element."
+		}
+	]
+};
+
+export const indicator: APISchema<Select.IndicatorProps> = {
+	title: "Separator",
+	description: "A visual separator for use between select items or groups.",
+	props: {
+		asChild
+	},
+	dataAttributes: [
+		{
+			name: "bits-select-indicator",
+			description: "Present on the indicator element."
+		}
+	]
 };
 
 export const arrow: APISchema<Select.ArrowProps> = {
@@ -196,7 +259,6 @@ export const arrow: APISchema<Select.ArrowProps> = {
 	dataAttributes: [
 		{
 			name: "arrow",
-			value: "",
 			description: "Present on the arrow element."
 		}
 	]
diff --git a/src/lib/bits/select/_types.ts b/src/lib/bits/select/_types.ts
index e3295dc29..4acfcd9cd 100644
--- a/src/lib/bits/select/_types.ts
+++ b/src/lib/bits/select/_types.ts
@@ -43,6 +43,8 @@ type LabelProps = AsChild;
 type ItemProps = Expand<SelectOptionProps & AsChild>;
 type SeparatorProps = AsChild;
 
+type IndicatorProps = AsChild
+
 type TriggerProps = AsChild;
 
 type ValueProps = Expand<
@@ -60,6 +62,7 @@ export type {
 	Props,
 	ArrowProps,
 	ContentProps,
+	IndicatorProps,
 	GroupProps,
 	InputProps,
 	LabelProps,
diff --git a/src/lib/bits/select/components/SelectItemIndicator.svelte b/src/lib/bits/select/components/SelectItemIndicator.svelte
index 558ff88b4..361d86f45 100644
--- a/src/lib/bits/select/components/SelectItemIndicator.svelte
+++ b/src/lib/bits/select/components/SelectItemIndicator.svelte
@@ -1,8 +1,24 @@
 <script lang="ts">
-	import { getItemIndicator } from "../ctx.js";
+	import { getAttrs, getItemIndicator } from "../ctx.js";
+	import type { IndicatorProps } from "../types.js";
+
+	type $$Props = IndicatorProps;
+
+	export let asChild: $$Props["asChild"] = false;
+
 	const { isSelected, value } = getItemIndicator();
+	const attrs = getAttrs("indicator");
+
+	$: slotProps = {
+		isSelected: $isSelected(value),
+		attrs
+	};
 </script>
 
-{#if $isSelected(value)}
-	<slot />
+{#if asChild}
+	<slot {...slotProps} />
+{:else if $isSelected(value)}
+	<div {...$$restProps} {...attrs}>
+		<slot {...slotProps} />
+	</div>
 {/if}
diff --git a/src/lib/bits/select/ctx.ts b/src/lib/bits/select/ctx.ts
index 039574e1d..fda735044 100644
--- a/src/lib/bits/select/ctx.ts
+++ b/src/lib/bits/select/ctx.ts
@@ -14,7 +14,17 @@ const NAME = "select";
 const GROUP_NAME = "select-group";
 const ITEM_NAME = "select-item";
 
-const PARTS = ["arrow", "content", "group", "item", "input", "label", "trigger", "value"] as const;
+const PARTS = [
+	"arrow",
+	"content",
+	"group",
+	"item",
+	"indicator",
+	"input",
+	"label",
+	"trigger",
+	"value"
+] as const;
 
 export const getAttrs = createBitAttrs(NAME, PARTS);
 
diff --git a/src/lib/bits/select/types.ts b/src/lib/bits/select/types.ts
index 99f182697..16cfdc333 100644
--- a/src/lib/bits/select/types.ts
+++ b/src/lib/bits/select/types.ts
@@ -27,6 +27,8 @@ type ValueProps = I.ValueProps & HTMLAttributes<HTMLSpanElement>;
 
 type ArrowProps = I.ArrowProps & HTMLDivAttributes;
 
+type IndicatorProps = I.IndicatorProps & HTMLDivAttributes;
+
 type ItemEvents<T extends Element = HTMLDivElement> = {
 	click: CustomEventHandler<MouseEvent, T>;
 	pointermove: CustomEventHandler<PointerEvent, T>;
@@ -57,6 +59,7 @@ export type {
 	InputProps,
 	LabelProps,
 	ItemProps,
+	IndicatorProps,
 	SeparatorProps,
 	TriggerProps,
 	ValueProps,
@@ -68,6 +71,7 @@ export type {
 	InputProps as SelectInputProps,
 	LabelProps as SelectLabelProps,
 	ItemProps as SelectItemProps,
+	IndicatorProps as SelectIndicatorProps,
 	SeparatorProps as SelectSeparatorProps,
 	TriggerProps as SelectTriggerProps,
 	ValueProps as SelectValueProps,

From eea20e309933c4f7453bfe665ebf83ceb74eb8af Mon Sep 17 00:00:00 2001
From: Hunter Johnston <johnstonhuntera@gmail.com>
Date: Mon, 20 Nov 2023 20:35:26 -0500
Subject: [PATCH 092/217] cleanup select demo

---
 package.json                                       |  2 +-
 pnpm-lock.yaml                                     | 14 +++++++-------
 src/components/demos/select-demo.svelte            | 10 ++++++++--
 .../select/components/SelectItemIndicator.svelte   |  6 ++++--
 4 files changed, 20 insertions(+), 12 deletions(-)

diff --git a/package.json b/package.json
index 664d3a805..a44eff1e2 100644
--- a/package.json
+++ b/package.json
@@ -93,7 +93,7 @@
 	"types": "./dist/index.d.ts",
 	"type": "module",
 	"dependencies": {
-		"@melt-ui/svelte": "0.61.2",
+		"@melt-ui/svelte": "0.62.0",
 		"nanoid": "^5.0.3"
 	},
 	"peerDependencies": {
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index a6a730253..12824a2e8 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -6,8 +6,8 @@ settings:
 
 dependencies:
   '@melt-ui/svelte':
-    specifier: 0.61.2
-    version: 0.61.2(svelte@4.2.3)
+    specifier: 0.62.0
+    version: 0.62.0(svelte@4.2.3)
   nanoid:
     specifier: ^5.0.3
     version: 5.0.3
@@ -21,7 +21,7 @@ devDependencies:
     version: 0.16.5(svelte@4.2.3)
   '@melt-ui/pp':
     specifier: ^0.1.3
-    version: 0.1.3(@melt-ui/svelte@0.61.2)(svelte@4.2.3)
+    version: 0.1.3(@melt-ui/svelte@0.62.0)(svelte@4.2.3)
   '@playwright/test':
     specifier: ^1.28.1
     version: 1.36.2
@@ -1068,20 +1068,20 @@ packages:
       - supports-color
     dev: true
 
-  /@melt-ui/pp@0.1.3(@melt-ui/svelte@0.61.2)(svelte@4.2.3):
+  /@melt-ui/pp@0.1.3(@melt-ui/svelte@0.62.0)(svelte@4.2.3):
     resolution: {integrity: sha512-RuT+pmNAF3aT4lPHaQ1ojTvsV5RSZRuT/wYrCGcOAMoQwM5FdN/pEAvJUhO12ShaiTeUUYbI+dLq9eJRrgy60A==}
     engines: {pnpm: '>=8.6.3'}
     peerDependencies:
       '@melt-ui/svelte': '>= 0.29.0'
       svelte: ^3.55.0 || ^4.0.0 || ^5.0.0-next.1
     dependencies:
-      '@melt-ui/svelte': 0.61.2(svelte@4.2.3)
+      '@melt-ui/svelte': 0.62.0(svelte@4.2.3)
       estree-walker: 3.0.3
       svelte: 4.2.3
     dev: true
 
-  /@melt-ui/svelte@0.61.2(svelte@4.2.3):
-    resolution: {integrity: sha512-BHkD9G31zQBToA4euDRBgTQRvWxT9scufOVCXgDO6HKTvyxFspbWT2bgiSFqAK4BbAGDn9Ao36Q8F9O71KN4OQ==}
+  /@melt-ui/svelte@0.62.0(svelte@4.2.3):
+    resolution: {integrity: sha512-O0yrxClzrEt0iOdTBeslYopo4Oy9rdDgqOmqGrxZaFKdxlHmA+mBn40G1Xogf9OwhIW3Snc96q3XJqtGH8Up3A==}
     peerDependencies:
       svelte: '>=3 <5'
     dependencies:
diff --git a/src/components/demos/select-demo.svelte b/src/components/demos/select-demo.svelte
index b0944179f..0f4bf61cd 100644
--- a/src/components/demos/select-demo.svelte
+++ b/src/components/demos/select-demo.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
 	import { Select } from "$lib";
 	import { flyAndScale } from "@/utils";
+	import { Check } from "phosphor-svelte";
 
 	const fruits = [
 		{ value: "svelte", label: "Svelte" },
@@ -31,10 +32,15 @@
 			>
 			{#each fruits as fruit}
 				<Select.Item
-					class="flex h-10 select-none items-center rounded-button py-3 pl-3 pr-1.5 text-sm outline-none transition-all duration-75 data-[selected]:bg-muted data-[highlighted]:hover:bg-muted/50"
+					class="flex h-10 w-full select-none items-center rounded-button py-3 pl-3 pr-1.5 text-sm outline-none transition-all duration-75 data-[highlighted]:bg-muted/50 data-[selected]:bg-muted"
 					value={fruit.value}
-					label={fruit.label}>{fruit.label}</Select.Item
+					label={fruit.label}
 				>
+					{fruit.label}
+					<Select.ItemIndicator class="ml-auto" asChild={false}>
+						<Check />
+					</Select.ItemIndicator>
+				</Select.Item>
 			{/each}
 		</Select.Group>
 	</Select.Content>
diff --git a/src/lib/bits/select/components/SelectItemIndicator.svelte b/src/lib/bits/select/components/SelectItemIndicator.svelte
index 361d86f45..1734e0223 100644
--- a/src/lib/bits/select/components/SelectItemIndicator.svelte
+++ b/src/lib/bits/select/components/SelectItemIndicator.svelte
@@ -17,8 +17,10 @@
 
 {#if asChild}
 	<slot {...slotProps} />
-{:else if $isSelected(value)}
+{:else}
 	<div {...$$restProps} {...attrs}>
-		<slot {...slotProps} />
+		{#if $isSelected(value)}
+			<slot {...slotProps} />
+		{/if}
 	</div>
 {/if}

From e59cd5b969faad3a491a4a363d75944dba26b58d Mon Sep 17 00:00:00 2001
From: Hunter Johnston <johnstonhuntera@gmail.com>
Date: Mon, 20 Nov 2023 20:35:54 -0500
Subject: [PATCH 093/217] more select cleanup

---
 src/components/demos/select-demo.svelte | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/components/demos/select-demo.svelte b/src/components/demos/select-demo.svelte
index 0f4bf61cd..37122dd2d 100644
--- a/src/components/demos/select-demo.svelte
+++ b/src/components/demos/select-demo.svelte
@@ -3,7 +3,7 @@
 	import { flyAndScale } from "@/utils";
 	import { Check } from "phosphor-svelte";
 
-	const fruits = [
+	const frameworks = [
 		{ value: "svelte", label: "Svelte" },
 		{ value: "vue", label: "Vue" },
 		{ value: "solid", label: "Solid" },
@@ -30,13 +30,13 @@
 			<Select.Label class="py-1.5 pl-2 text-sm font-medium"
 				>Frameworks</Select.Label
 			>
-			{#each fruits as fruit}
+			{#each frameworks as framework}
 				<Select.Item
 					class="flex h-10 w-full select-none items-center rounded-button py-3 pl-3 pr-1.5 text-sm outline-none transition-all duration-75 data-[highlighted]:bg-muted/50 data-[selected]:bg-muted"
-					value={fruit.value}
-					label={fruit.label}
+					value={framework.value}
+					label={framework.label}
 				>
-					{fruit.label}
+					{framework.label}
 					<Select.ItemIndicator class="ml-auto" asChild={false}>
 						<Check />
 					</Select.ItemIndicator>

From 10c747b7f3b88354b9f78e2bd7045d2f49cfcfad Mon Sep 17 00:00:00 2001
From: Hunter Johnston <johnstonhuntera@gmail.com>
Date: Mon, 20 Nov 2023 21:29:58 -0500
Subject: [PATCH 094/217] more spacing at end of sidebar nav

---
 src/components/navigation/sidebar-nav.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/navigation/sidebar-nav.svelte b/src/components/navigation/sidebar-nav.svelte
index 856846f72..a34e621d1 100644
--- a/src/components/navigation/sidebar-nav.svelte
+++ b/src/components/navigation/sidebar-nav.svelte
@@ -10,7 +10,7 @@
 	>
 		<div class="h-full py-6 pr-4 lg:py-8">
 			<nav class="space-y-3">
-				<div class="flex w-full flex-col">
+				<div class="flex w-full flex-col pb-[50px]">
 					{#each items as item, index (index)}
 						{#if item.title === "Overview"}
 							<SidebarNavMainItems items={item.items} />

From b3f5fc6bd858a4131ff1f9c9fa54a4105fee9849 Mon Sep 17 00:00:00 2001
From: Hunter Johnston <johnstonhuntera@gmail.com>
Date: Mon, 20 Nov 2023 21:36:03 -0500
Subject: [PATCH 095/217] scaling on button active state

---
 src/components/demos/alert-dialog-demo.svelte  | 6 +++---
 src/components/demos/button-demo.svelte        | 2 +-
 src/components/demos/checkbox-demo.svelte      | 2 +-
 src/components/demos/collapsible-demo.svelte   | 2 +-
 src/components/demos/dialog-demo.svelte        | 6 +++---
 src/components/demos/dropdown-menu-demo.svelte | 2 +-
 src/components/demos/popover-demo.svelte       | 4 ++--
 src/components/demos/slider-demo.svelte        | 2 +-
 src/components/demos/tabs-demo.svelte          | 4 ++--
 tailwind.config.ts                             | 4 ++++
 10 files changed, 19 insertions(+), 15 deletions(-)

diff --git a/src/components/demos/alert-dialog-demo.svelte b/src/components/demos/alert-dialog-demo.svelte
index bf100ba10..0c56d138f 100644
--- a/src/components/demos/alert-dialog-demo.svelte
+++ b/src/components/demos/alert-dialog-demo.svelte
@@ -8,7 +8,7 @@
 	<AlertDialog.Trigger
 		class="inline-flex h-12 items-center
 	justify-center whitespace-nowrap rounded-input bg-dark px-[21px]
-	text-[15px] font-semibold text-background shadow-mini ring-dark ring-offset-background transition-colors hover:bg-foreground/80 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-dark focus-visible:ring-offset-2 focus-visible:ring-offset-background"
+	text-[15px] font-semibold text-background shadow-mini ring-dark ring-offset-background transition-colors hover:bg-foreground/80 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-dark focus-visible:ring-offset-2 focus-visible:ring-offset-background active:scale-98"
 	>
 		Subscribe
 	</AlertDialog.Trigger>
@@ -33,11 +33,11 @@
 			</div>
 			<div class="flex w-full items-center justify-center gap-2">
 				<AlertDialog.Cancel
-					class="inline-flex h-input w-full items-center justify-center rounded-input bg-muted text-[15px] font-medium shadow-mini 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 h-input w-full items-center justify-center rounded-input bg-muted text-[15px] font-medium shadow-mini focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground focus-visible:ring-offset-2 focus-visible:ring-offset-background active:scale-98"
 					>Cancel</AlertDialog.Cancel
 				>
 				<AlertDialog.Action
-					class="inline-flex h-input w-full items-center justify-center rounded-input bg-dark text-[15px] font-semibold text-background shadow-mini focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-dark focus-visible:ring-offset-2 focus-visible:ring-offset-background"
+					class="inline-flex h-input w-full items-center justify-center rounded-input bg-dark text-[15px] font-semibold text-background shadow-mini focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-dark focus-visible:ring-offset-2 focus-visible:ring-offset-background active:scale-98"
 					>Continue</AlertDialog.Action
 				>
 			</div>
diff --git a/src/components/demos/button-demo.svelte b/src/components/demos/button-demo.svelte
index 37680cf65..59eb152c6 100644
--- a/src/components/demos/button-demo.svelte
+++ b/src/components/demos/button-demo.svelte
@@ -5,7 +5,7 @@
 <Button.Root
 	class="hover:button-gradient inline-flex h-12 items-center justify-center rounded-input
 	bg-dark px-[21px] text-[15px] font-semibold text-background
-	shadow-mini transition-all"
+	shadow-mini transition-all active:scale-98"
 >
 	Unlimited
 </Button.Root>
diff --git a/src/components/demos/checkbox-demo.svelte b/src/components/demos/checkbox-demo.svelte
index a487ad6f9..6157b38a3 100644
--- a/src/components/demos/checkbox-demo.svelte
+++ b/src/components/demos/checkbox-demo.svelte
@@ -8,7 +8,7 @@
 	<Checkbox.Root
 		id="terms"
 		aria-labelledby="terms-label"
-		class="peer h-[25px] w-[25px] rounded-md border border-muted bg-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground focus-visible:ring-offset-2 focus-visible:ring-offset-background data-[state=unchecked]:border-border-input data-[state=unchecked]:bg-background"
+		class="peer h-[25px] w-[25px] rounded-md border border-muted bg-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground focus-visible:ring-offset-2 focus-visible:ring-offset-background active:scale-98 data-[state=unchecked]:border-border-input data-[state=unchecked]:bg-background"
 		checked="indeterminate"
 	>
 		<Checkbox.Indicator
diff --git a/src/components/demos/collapsible-demo.svelte b/src/components/demos/collapsible-demo.svelte
index d847128bf..0e04d8322 100644
--- a/src/components/demos/collapsible-demo.svelte
+++ b/src/components/demos/collapsible-demo.svelte
@@ -8,7 +8,7 @@
 	<div class="flex items-center justify-between space-x-10">
 		<h4 class="text-[15px] font-medium">@huntabyte starred 3 repositories</h4>
 		<Collapsible.Trigger
-			class="inline-flex h-10 w-10 items-center justify-center rounded-[9px] border border-border-input shadow-btn 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 h-10 w-10 items-center justify-center rounded-[9px] border border-border-input shadow-btn focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground focus-visible:ring-offset-2 focus-visible:ring-offset-background active:scale-98"
 		>
 			<CaretUpDown class="h-4 w-4 text-foreground" weight="bold" />
 			<span class="sr-only">Toggle</span>
diff --git a/src/components/demos/dialog-demo.svelte b/src/components/demos/dialog-demo.svelte
index c1976dc55..e85767d57 100644
--- a/src/components/demos/dialog-demo.svelte
+++ b/src/components/demos/dialog-demo.svelte
@@ -9,7 +9,7 @@
 	<Dialog.Trigger
 		class="inline-flex h-12 items-center
 	justify-center whitespace-nowrap rounded-input bg-dark px-[21px]
-	text-[15px] font-semibold text-background shadow-mini  transition-colors hover:bg-foreground/80 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground focus-visible:ring-offset-2 focus-visible:ring-offset-background"
+	text-[15px] font-semibold text-background shadow-mini  transition-colors hover:bg-foreground/80 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground focus-visible:ring-offset-2 focus-visible:ring-offset-background active:scale-98"
 	>
 		New API key
 	</Dialog.Trigger>
@@ -50,13 +50,13 @@
 			</div>
 			<div class="flex w-full justify-end">
 				<Dialog.Close
-					class="hover:button-gradient inline-flex h-input items-center justify-center rounded-input bg-dark px-[50px] text-[15px] font-semibold text-background shadow-mini focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-dark focus-visible:ring-offset-2 focus-visible:ring-offset-background"
+					class="hover:button-gradient inline-flex h-input items-center justify-center rounded-input bg-dark px-[50px] text-[15px] font-semibold text-background shadow-mini focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-dark focus-visible:ring-offset-2 focus-visible:ring-offset-background active:scale-98"
 				>
 					Save
 				</Dialog.Close>
 			</div>
 			<Dialog.Close
-				class="absolute right-5 top-5 rounded-md focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground focus-visible:ring-offset-2 focus-visible:ring-offset-background"
+				class="absolute right-5 top-5 rounded-md focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground focus-visible:ring-offset-2 focus-visible:ring-offset-background active:scale-98"
 			>
 				<div>
 					<X class="h-5 w-5 text-foreground" />
diff --git a/src/components/demos/dropdown-menu-demo.svelte b/src/components/demos/dropdown-menu-demo.svelte
index e7c5e4a1b..83fe4bb81 100644
--- a/src/components/demos/dropdown-menu-demo.svelte
+++ b/src/components/demos/dropdown-menu-demo.svelte
@@ -14,7 +14,7 @@
 
 <DropdownMenu.Root>
 	<DropdownMenu.Trigger
-		class="border-input inline-flex h-10 w-10 items-center justify-center rounded-full border bg-background text-sm font-medium text-foreground shadow-btn focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground focus-visible:ring-offset-2 focus-visible:ring-offset-background"
+		class="border-input inline-flex h-10 w-10 items-center justify-center rounded-full border bg-background text-sm font-medium text-foreground shadow-btn focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground focus-visible:ring-offset-2 focus-visible:ring-offset-background active:scale-98"
 	>
 		<DotsThree class="h-6 w-6 text-foreground" />
 	</DropdownMenu.Trigger>
diff --git a/src/components/demos/popover-demo.svelte b/src/components/demos/popover-demo.svelte
index d9cfc41f2..c5afaae9a 100644
--- a/src/components/demos/popover-demo.svelte
+++ b/src/components/demos/popover-demo.svelte
@@ -13,7 +13,7 @@
 	<Popover.Trigger
 		class="inline-flex h-12 items-center
 	justify-center whitespace-nowrap rounded-input bg-dark px-[21px]
-	text-[15px] font-semibold text-background shadow-mini ring-dark ring-offset-background transition-colors hover:bg-foreground/90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-dark focus-visible:ring-offset-2 focus-visible:ring-offset-background"
+	text-[15px] font-semibold text-background shadow-mini ring-dark ring-offset-background transition-colors hover:bg-foreground/90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-dark focus-visible:ring-offset-2 focus-visible:ring-offset-background active:scale-98"
 	>
 		Manage Cookies
 	</Popover.Trigger>
@@ -108,7 +108,7 @@
 			</div>
 		</div>
 		<Button.Root
-			class="inline-flex h-input w-full items-center justify-center rounded-input bg-dark text-[15px] font-semibold text-background shadow-mini focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-dark focus-visible:ring-offset-2 focus-visible:ring-offset-background"
+			class="inline-flex h-input w-full items-center justify-center rounded-input bg-dark text-[15px] font-semibold text-background shadow-mini focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-dark focus-visible:ring-offset-2 focus-visible:ring-offset-background active:scale-98"
 		>
 			Save settings
 		</Button.Root>
diff --git a/src/components/demos/slider-demo.svelte b/src/components/demos/slider-demo.svelte
index a223b924f..7770d8345 100644
--- a/src/components/demos/slider-demo.svelte
+++ b/src/components/demos/slider-demo.svelte
@@ -14,6 +14,6 @@
 		<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 disabled:pointer-events-none disabled:opacity-50"
+		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"
 	/>
 </Slider.Root>
diff --git a/src/components/demos/tabs-demo.svelte b/src/components/demos/tabs-demo.svelte
index e0cfc01ff..4c2575118 100644
--- a/src/components/demos/tabs-demo.svelte
+++ b/src/components/demos/tabs-demo.svelte
@@ -12,12 +12,12 @@
 	>
 		<Tabs.Trigger
 			value="login"
-			class="h-8 rounded-[7px] bg-transparent py-2 text-sm font-semibold leading-[0.01em] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground focus-visible:ring-offset-2 focus-visible:ring-offset-background data-[state=active]:bg-white data-[state=active]:shadow-mini dark:data-[state=active]:bg-background"
+			class="h-8 rounded-[7px] bg-transparent py-2 text-sm font-semibold leading-[0.01em] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground focus-visible:ring-offset-2 focus-visible:ring-offset-background active:scale-98 data-[state=active]:bg-white data-[state=active]:shadow-mini dark:data-[state=active]:bg-background"
 			>Login</Tabs.Trigger
 		>
 		<Tabs.Trigger
 			value="register"
-			class="h-8 rounded-[7px] bg-transparent py-2 text-sm font-semibold leading-[0.01em] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground focus-visible:ring-offset-2 focus-visible:ring-offset-background data-[state=active]:bg-white data-[state=active]:shadow-mini dark:data-[state=active]:bg-background"
+			class="h-8 rounded-[7px] bg-transparent py-2 text-sm font-semibold leading-[0.01em] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground focus-visible:ring-offset-2 focus-visible:ring-offset-background active:scale-98 data-[state=active]:bg-white data-[state=active]:shadow-mini dark:data-[state=active]:bg-background"
 			>Register</Tabs.Trigger
 		>
 	</Tabs.List>
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 67e04d130..48ec4ef46 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -74,6 +74,10 @@ export default {
 			},
 			opacity: {
 				8: "0.08"
+			},
+			scale: {
+				98: ".98",
+				99: ".99"
 			}
 		}
 	},

From 77424595e68fb3547878184fd6119b5bee54d44d Mon Sep 17 00:00:00 2001
From: Hunter Johnston <johnstonhuntera@gmail.com>
Date: Mon, 20 Nov 2023 21:37:34 -0500
Subject: [PATCH 096/217] remove scaling from tabs triggers

---
 src/components/demos/tabs-demo.svelte | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/demos/tabs-demo.svelte b/src/components/demos/tabs-demo.svelte
index 4c2575118..e0cfc01ff 100644
--- a/src/components/demos/tabs-demo.svelte
+++ b/src/components/demos/tabs-demo.svelte
@@ -12,12 +12,12 @@
 	>
 		<Tabs.Trigger
 			value="login"
-			class="h-8 rounded-[7px] bg-transparent py-2 text-sm font-semibold leading-[0.01em] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground focus-visible:ring-offset-2 focus-visible:ring-offset-background active:scale-98 data-[state=active]:bg-white data-[state=active]:shadow-mini dark:data-[state=active]:bg-background"
+			class="h-8 rounded-[7px] bg-transparent py-2 text-sm font-semibold leading-[0.01em] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground focus-visible:ring-offset-2 focus-visible:ring-offset-background data-[state=active]:bg-white data-[state=active]:shadow-mini dark:data-[state=active]:bg-background"
 			>Login</Tabs.Trigger
 		>
 		<Tabs.Trigger
 			value="register"
-			class="h-8 rounded-[7px] bg-transparent py-2 text-sm font-semibold leading-[0.01em] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground focus-visible:ring-offset-2 focus-visible:ring-offset-background active:scale-98 data-[state=active]:bg-white data-[state=active]:shadow-mini dark:data-[state=active]:bg-background"
+			class="h-8 rounded-[7px] bg-transparent py-2 text-sm font-semibold leading-[0.01em] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground focus-visible:ring-offset-2 focus-visible:ring-offset-background data-[state=active]:bg-white data-[state=active]:shadow-mini dark:data-[state=active]:bg-background"
 			>Register</Tabs.Trigger
 		>
 	</Tabs.List>

From 53490b60b4a6e432755971cce0c26678a5bb0f14 Mon Sep 17 00:00:00 2001
From: Hunter Johnston <johnstonhuntera@gmail.com>
Date: Mon, 20 Nov 2023 21:39:14 -0500
Subject: [PATCH 097/217] cleanup

---
 .../extended-types/floating-config.ts         | 100 ------------------
 .../api-reference/extended-types/index.ts     |   6 --
 2 files changed, 106 deletions(-)
 delete mode 100644 src/content/api-reference/extended-types/floating-config.ts

diff --git a/src/content/api-reference/extended-types/floating-config.ts b/src/content/api-reference/extended-types/floating-config.ts
deleted file mode 100644
index d285d30b8..000000000
--- a/src/content/api-reference/extended-types/floating-config.ts
+++ /dev/null
@@ -1,100 +0,0 @@
-type FloatingConfig = {
-	/**
-	 * The initial placement of the floating element.
-	 * @defaultValue `"top"`
-	 *
-	 * @see https://floating-ui.com/docs/computePosition#placement
-	 */
-	placement?:
-		| "top"
-		| "top-start"
-		| "top-end"
-		| "right"
-		| "right-start"
-		| "right-end"
-		| "bottom"
-		| "bottom-start"
-		| "bottom-end"
-		| "left"
-		| "left-start"
-		| "left-end";
-
-	/**
-	 * The strategy to use for positioning.
-	 * @defaultValue `"absolute"`
-	 *
-	 * @see https://floating-ui.com/docs/computePosition#placement
-	 */
-	strategy?: "absolute" | "fixed";
-
-	/**
-	 * The offset of the floating element.
-	 *
-	 * @see https://floating-ui.com/docs/offset#options
-	 */
-	offset?: { mainAxis?: number; crossAxis?: number };
-
-	/**
-	 * The main axis offset or gap between the reference and floating elements.
-	 * @defaultValue `5`
-	 *
-	 * @see https://floating-ui.com/docs/offset#options
-	 */
-	gutter?: number;
-
-	/**
-	 * The virtual padding around the viewport edges to check for overflow.
-	 * @defaultValue `8`
-	 *
-	 * @see https://floating-ui.com/docs/detectOverflow#padding
-	 */
-	overflowPadding?: number;
-
-	/**
-	 * Whether to flip the placement.
-	 * @defaultValue `true`
-	 *
-	 * @see https://floating-ui.com/docs/flip
-	 */
-	flip?: boolean;
-
-	/**
-	 * Whether the floating element can overlap the reference element.
-	 * @defaultValue `false`
-	 *
-	 * @see https://floating-ui.com/docs/shift#options
-	 */
-	overlap?: boolean;
-
-	/**
-	 * Whether to make the floating element same width as the reference element.
-	 * @defaultValue `false`
-	 *
-	 * @see https://floating-ui.com/docs/size
-	 */
-	sameWidth?: boolean;
-
-	/**
-	 * Whether the floating element should fit the viewport.
-	 * @defaultValue `false`
-	 *
-	 * @see https://floating-ui.com/docs/size
-	 */
-	fitViewport?: boolean;
-
-	/**
-	 * The overflow boundary of the reference element.
-	 *
-	 * @see https://floating-ui.com/docs/detectoverflow#boundary
-	 */
-	boundary?: Boundary;
-};
-
-type Boundary = "clippingAncestors" | Element | Array<Element> | Rect;
-
-type Rect = {
-	x: number;
-	y: number;
-	width: number;
-	height: number;
-};
diff --git a/src/content/api-reference/extended-types/index.ts b/src/content/api-reference/extended-types/index.ts
index 4bff9efdb..90c8e7113 100644
--- a/src/content/api-reference/extended-types/index.ts
+++ b/src/content/api-reference/extended-types/index.ts
@@ -1,13 +1,7 @@
 import type { PropType } from "@/types";
 import rawFocusProp from "@/content/api-reference/extended-types/focus-target.js?raw";
-import rawFloatingConfigProp from "@/content/api-reference/extended-types/floating-config.js?raw";
 
 export const focusProp: PropType = {
 	type: "FocusProp",
 	definition: rawFocusProp
 };
-
-export const floatingConfigProp: PropType = {
-	type: "FloatingConfig",
-	definition: rawFloatingConfigProp
-};

From 5434ff660294f2fba8e8ecb185535e21715ef332 Mon Sep 17 00:00:00 2001
From: Hunter Johnston <johnstonhuntera@gmail.com>
Date: Mon, 20 Nov 2023 21:39:51 -0500
Subject: [PATCH 098/217] comment cleanup

---
 src/tests/dialog/DialogTest.svelte | 12 ------------
 1 file changed, 12 deletions(-)

diff --git a/src/tests/dialog/DialogTest.svelte b/src/tests/dialog/DialogTest.svelte
index b794fff90..55b13cabe 100644
--- a/src/tests/dialog/DialogTest.svelte
+++ b/src/tests/dialog/DialogTest.svelte
@@ -1,18 +1,6 @@
 <script lang="ts">
 	import { Dialog } from "$lib";
 
-	/**
-	 *
-    preventScroll?: boolean | undefined;
-    closeOnEscape?: boolean | undefined;
-    closeOnOutsideClick?: boolean | undefined;
-    portal?: string | HTMLElement | null | undefined;
-    openFocus?: FocusProp | undefined;
-    closeFocus?: FocusProp | undefined;
-    open?: boolean | undefined;
-    onOpenChange?: OnChangeFn<...> | undefined;
-	 */
-
 	type $$Props = Dialog.Props;
 
 	export let open: Dialog.Props["open"] = false;

From cac3fd447d96533d5287ecd56b846e797b5d9e7c Mon Sep 17 00:00:00 2001
From: Hunter Johnston <johnstonhuntera@gmail.com>
Date: Tue, 21 Nov 2023 13:50:59 -0500
Subject: [PATCH 099/217] fixes

---
 src/components/demos/aspect-ratio-demo.svelte |  2 +-
 src/components/demos/checkbox-demo.svelte     |  2 +-
 src/components/demos/link-preview-demo.svelte | 22 ++++++++++---------
 src/components/site-header.svelte             |  2 +-
 tailwind.config.ts                            |  1 +
 5 files changed, 16 insertions(+), 13 deletions(-)

diff --git a/src/components/demos/aspect-ratio-demo.svelte b/src/components/demos/aspect-ratio-demo.svelte
index 39a76d7e9..5dd40a58c 100644
--- a/src/components/demos/aspect-ratio-demo.svelte
+++ b/src/components/demos/aspect-ratio-demo.svelte
@@ -2,7 +2,7 @@
 	import * as AspectRatio from "@/components/ui/aspect-ratio";
 </script>
 
-<AspectRatio.Root ratio={16 / 9} class="rounded-[15px] bg-transparent pt-4">
+<AspectRatio.Root ratio={16 / 9} class="scale-80 rounded-[15px] bg-transparent">
 	<img
 		src="/abstract.png"
 		alt="an abstract painting"
diff --git a/src/components/demos/checkbox-demo.svelte b/src/components/demos/checkbox-demo.svelte
index 6157b38a3..a7759c344 100644
--- a/src/components/demos/checkbox-demo.svelte
+++ b/src/components/demos/checkbox-demo.svelte
@@ -8,7 +8,7 @@
 	<Checkbox.Root
 		id="terms"
 		aria-labelledby="terms-label"
-		class="peer h-[25px] w-[25px] rounded-md border border-muted bg-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground focus-visible:ring-offset-2 focus-visible:ring-offset-background active:scale-98 data-[state=unchecked]:border-border-input data-[state=unchecked]:bg-background"
+		class="peer inline-flex h-[25px] w-[25px] items-center justify-center rounded-md border border-muted bg-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground focus-visible:ring-offset-2 focus-visible:ring-offset-background active:scale-98 data-[state=unchecked]:border-border-input data-[state=unchecked]:bg-background"
 		checked="indeterminate"
 	>
 		<Checkbox.Indicator
diff --git a/src/components/demos/link-preview-demo.svelte b/src/components/demos/link-preview-demo.svelte
index bef238c38..9e5489ba0 100644
--- a/src/components/demos/link-preview-demo.svelte
+++ b/src/components/demos/link-preview-demo.svelte
@@ -28,17 +28,19 @@
 				<Avatar.Image src="/avatar-1.png" alt="@huntabyte" />
 				<Avatar.Fallback>HB</Avatar.Fallback>
 			</Avatar.Root>
-			<div class="space-y-1">
-				<h4 class="text-sm font-medium">@huntabyte</h4>
-				<p class="text-sm">I do things on the internet.</p>
-				<div class="flex items-center gap-[21px]">
-					<div class="flex items-center pt-2">
-						<MapPin class="mr-1 h-4 w-4 opacity-70" />
-						<span class="text-xs text-muted-foreground"> FL, USA </span>
+			<div class="space-y-1 text-sm">
+				<h4 class="font-medium">@huntabyte</h4>
+				<p>I do things on the internet.</p>
+				<div
+					class="flex items-center gap-[21px] pt-2 text-xs text-muted-foreground"
+				>
+					<div class="flex items-center text-xs">
+						<MapPin class="mr-1 h-4 w-4" />
+						<span> FL, USA </span>
 					</div>
-					<div class="flex items-center pt-2">
-						<CalendarBlank class="mr-1 h-4 w-4 opacity-70" />
-						<span class="text-xs text-muted-foreground"> Joined May 2020</span>
+					<div class="flex items-center text-xs">
+						<CalendarBlank class="mr-1 h-4 w-4" />
+						<span> Joined May 2020</span>
 					</div>
 				</div>
 			</div>
diff --git a/src/components/site-header.svelte b/src/components/site-header.svelte
index f55292381..d54ec252c 100644
--- a/src/components/site-header.svelte
+++ b/src/components/site-header.svelte
@@ -12,7 +12,7 @@
 		<div class="flex h-[70px] items-center justify-between gap-3">
 			<div class="flex items-center gap-1.5">
 				<MobileNav />
-				<a href="/">
+				<a href="/" class="ml-2">
 					<Logo />
 				</a>
 			</div>
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 48ec4ef46..50fab6be3 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -76,6 +76,7 @@ export default {
 				8: "0.08"
 			},
 			scale: {
+				80: ".80",
 				98: ".98",
 				99: ".99"
 			}

From ab8eb1182574608e70c9db33bbb0042fb93589ed Mon Sep 17 00:00:00 2001
From: Hunter Johnston <johnstonhuntera@gmail.com>
Date: Tue, 21 Nov 2023 13:57:57 -0500
Subject: [PATCH 100/217] themes

---
 mdsvex.config.js                            |   8 +-
 src/styles/themes/serendipity-midnight.json | 635 ++++++++++++++++++++
 src/styles/themes/serendipity-morning.json  | 634 +++++++++++++++++++
 3 files changed, 1275 insertions(+), 2 deletions(-)
 create mode 100644 src/styles/themes/serendipity-midnight.json
 create mode 100644 src/styles/themes/serendipity-morning.json

diff --git a/mdsvex.config.js b/mdsvex.config.js
index b50451ddb..44a68b30f 100644
--- a/mdsvex.config.js
+++ b/mdsvex.config.js
@@ -17,8 +17,12 @@ const __dirname = fileURLToPath(new URL(".", import.meta.url));
  */
 const prettyCodeOptions = {
 	theme: {
-		dark: JSON.parse(readFileSync(resolve(__dirname, "./src/styles/themes/custom-dark.json"))),
-		light: JSON.parse(readFileSync(resolve(__dirname, "./src/styles/themes/custom-light.json")))
+		dark: JSON.parse(
+			readFileSync(resolve(__dirname, "./src/styles/themes/serendipity-midnight.json"))
+		),
+		light: JSON.parse(
+			readFileSync(resolve(__dirname, "./src/styles/themes/serendipity-morning.json"))
+		)
 	},
 	keepBackground: false,
 	onVisitLine(node) {
diff --git a/src/styles/themes/serendipity-midnight.json b/src/styles/themes/serendipity-midnight.json
new file mode 100644
index 000000000..e66bba2e9
--- /dev/null
+++ b/src/styles/themes/serendipity-midnight.json
@@ -0,0 +1,635 @@
+{
+	"name": "Serendipity Midnight",
+	"type": "dark",
+	"colors": {
+		"activityBar.activeBorder": "#DEE0EF",
+		"activityBar.background": "#151726",
+		"activityBar.dropBorder": "#232534",
+		"activityBar.foreground": "#DEE0EF",
+		"activityBar.inactiveForeground": "#8D8F9E",
+		"activityBarBadge.background": "#F8D2C9",
+		"activityBarBadge.foreground": "#151726",
+		"badge.background": "#F8D2C9",
+		"badge.foreground": "#151726",
+		"banner.background": "#1C1E2D",
+		"banner.foreground": "#DEE0EF",
+		"banner.iconForeground": "#8D8F9E",
+		"breadcrumb.activeSelectionForeground": "#F8D2C9",
+		"breadcrumb.background": "#151726",
+		"breadcrumb.focusForeground": "#8D8F9E",
+		"breadcrumb.foreground": "#6B6D7C",
+		"breadcrumbPicker.background": "#1C1E2D",
+		"button.background": "#F8D2C9",
+		"button.foreground": "#151726",
+		"button.hoverBackground": "#F8D2C9e6",
+		"button.secondaryBackground": "#1C1E2D",
+		"button.secondaryForeground": "#DEE0EF",
+		"button.secondaryHoverBackground": "#232534",
+		"charts.foreground": "#DEE0EF",
+		"charts.lines": "#8D8F9E",
+
+		"charts.blue": "#94b8ff",
+		"charts.green": "#5ba2d0",
+		"charts.orange": "#F8D2C9",
+		"charts.purple": "#9ccfd8",
+		"charts.red": "#ee8679",
+		"charts.yellow": "#a78bfa",
+		"checkbox.background": "#1C1E2D",
+		"checkbox.border": "#6B6D7C33",
+		"checkbox.foreground": "#DEE0EF",
+		"debugExceptionWidget.background": "#1C1E2D",
+		"debugExceptionWidget.border": "#6B6D7C33",
+		"debugIcon.breakpointCurrentStackframeForeground": "#8D8F9E",
+		"debugIcon.breakpointDisabledForeground": "#8D8F9E",
+		"debugIcon.breakpointForeground": "#8D8F9E",
+		"debugIcon.breakpointStackframeForeground": "#8D8F9E",
+		"debugIcon.breakpointUnverifiedForeground": "#8D8F9E",
+		"debugIcon.continueForeground": "#8D8F9E",
+		"debugIcon.disconnectForeground": "#8D8F9E",
+		"debugIcon.pauseForeground": "#8D8F9E",
+		"debugIcon.restartForeground": "#8D8F9E",
+		"debugIcon.startForeground": "#8D8F9E",
+		"debugIcon.stepBackForeground": "#8D8F9E",
+		"debugIcon.stepIntoForeground": "#8D8F9E",
+		"debugIcon.stepOutForeground": "#8D8F9E",
+		"debugIcon.stepOverForeground": "#8D8F9E",
+		"debugIcon.stopForeground": "#ee8679",
+		"debugToolBar.background": "#1C1E2D",
+		"debugToolBar.border": "#232534",
+		"descriptionForeground": "#8D8F9E",
+		"diffEditor.border": "#232534",
+		"diffEditor.diagonalFill": "#6B6D7C66",
+		"diffEditor.insertedTextBackground": "#94b8ff20",
+		"diffEditor.insertedTextBorder": "#151726C0",
+		"diffEditor.removedTextBackground": "#ee867927",
+		"diffEditor.removedTextBorder": "#151726C0",
+		"dropdown.background": "#1C1E2D",
+		"dropdown.border": "#6B6D7C33",
+		"dropdown.foreground": "#DEE0EF",
+		"dropdown.listBackground": "#1C1E2D",
+		"editor.background": "#151726",
+		"editor.findMatchBackground": "#6B6D7C66",
+		"editor.findMatchHighlightBackground": "#6B6D7C66",
+		"editor.findRangeHighlightBackground": "#6B6D7C66",
+		"editor.findRangeHighlightBorder": "#0000",
+		"editor.focusedStackFrameHighlightBackground": "#6B6D7C33",
+		"editor.foldBackground": "#1C1E2D",
+		"editor.foreground": "#DEE0EF",
+		"editor.hoverHighlightBackground": "#0000",
+		"editor.inactiveSelectionBackground": "#6B6D7C1a",
+		"editor.inlineValuesBackground": "#0000",
+		"editor.inlineValuesForeground": "#8D8F9E",
+		"editor.lineHighlightBackground": "#6B6D7C1a",
+		"editor.lineHighlightBorder": "#0000",
+		"editor.linkedEditingBackground": "#1C1E2D",
+		"editor.rangeHighlightBackground": "#6B6D7C1a",
+		"editor.rangeHighlightBorder": "#0000",
+		"editor.selectionBackground": "#6B6D7C33",
+		"editor.selectionForeground": "#DEE0EF",
+		"editor.selectionHighlightBackground": "#6B6D7C33",
+		"editor.selectionHighlightBorder": "#0000",
+		"editor.snippetFinalTabstopHighlightBackground": "#6B6D7C33",
+		"editor.snippetFinalTabstopHighlightBorder": "#1C1E2D",
+		"editor.snippetTabstopHighlightBackground": "#6B6D7C33",
+		"editor.snippetTabstopHighlightBorder": "#1C1E2D",
+		"editor.stackFrameHighlightBackground": "#6B6D7C33",
+		"editor.symbolHighlightBackground": "#6B6D7C33",
+		"editor.symbolHighlightBorder": "#0000",
+		"editor.wordHighlightBackground": "#6B6D7C33",
+		"editor.wordHighlightBorder": "#0000",
+		"editor.wordHighlightStrongBackground": "#6B6D7C33",
+		"editor.wordHighlightStrongBorder": "#6B6D7C33",
+		"editorBracketHighlight.foreground1": "#ee867980",
+		"editorBracketHighlight.foreground2": "#5ba2d080",
+		"editorBracketHighlight.foreground3": "#a78bfa80",
+		"editorBracketHighlight.foreground4": "#94b8ff80",
+		"editorBracketHighlight.foreground5": "#F8D2C980",
+		"editorBracketHighlight.foreground6": "#9ccfd880",
+		"editorBracketMatch.background": "#0000",
+		"editorBracketMatch.border": "#8D8F9E",
+		"editorBracketPairGuide.activeBackground1": "#5ba2d0",
+		"editorBracketPairGuide.activeBackground2": "#F8D2C9",
+		"editorBracketPairGuide.activeBackground3": "#9ccfd8",
+		"editorBracketPairGuide.activeBackground4": "#94b8ff",
+		"editorBracketPairGuide.activeBackground5": "#a78bfa",
+		"editorBracketPairGuide.activeBackground6": "#ee8679",
+		"editorBracketPairGuide.background1": "#5ba2d080",
+		"editorBracketPairGuide.background2": "#F8D2C980",
+		"editorBracketPairGuide.background3": "#9ccfd880",
+		"editorBracketPairGuide.background4": "#94b8ff80",
+		"editorBracketPairGuide.background5": "#a78bfa80",
+		"editorBracketPairGuide.background6": "#ee867980",
+		"editorCodeLens.foreground": "#F8D2C9",
+		"editorCursor.background": "#DEE0EF",
+		"editorCursor.foreground": "#D1918F",
+		"editorError.border": "#0000",
+		"editorError.foreground": "#ee8679",
+		"editorGhostText.foreground": "#8D8F9E",
+		"editorGroup.border": "#0000",
+		"editorGroup.dropBackground": "#1C1E2D",
+		"editorGroup.emptyBackground": "#0000",
+		"editorGroup.focusedEmptyBorder": "#0000",
+		"editorGroupHeader.noTabsBackground": "#0000",
+		"editorGroupHeader.tabsBackground": "#0000",
+		"editorGroupHeader.tabsBorder": "#0000",
+		"editorGutter.addedBackground": "#94b8ff",
+		"editorGutter.background": "#0000",
+		"editorGutter.commentRangeForeground": "#8D8F9E",
+		"editorGutter.deletedBackground": "#ee8679",
+		"editorGutter.foldingControlForeground": "#9ccfd8",
+		"editorGutter.modifiedBackground": "#F8D2C9",
+		"editorHint.border": "#0000",
+		"editorHint.foreground": "#8D8F9E",
+		"editorHoverWidget.background": "#1C1E2D",
+		"editorHoverWidget.border": "#6B6D7C80",
+		"editorHoverWidget.foreground": "#8D8F9E",
+		"editorHoverWidget.highlightForeground": "#DEE0EF",
+		"editorHoverWidget.statusBarBackground": "#0000",
+		"editorIndentGuide.activeBackground": "#6B6D7C",
+		"editorIndentGuide.background": "#6B6D7C66",
+		"editorInfo.border": "#232534",
+		"editorInfo.foreground": "#94b8ff",
+		"editorInlayHint.background": "#232534",
+		"editorInlayHint.foreground": "#8D8F9E",
+		"editorInlayHint.parameterBackground": "#232534",
+		"editorInlayHint.parameterForeground": "#9ccfd8",
+		"editorInlayHint.typeBackground": "#232534",
+		"editorInlayHint.typeForeground": "#94b8ff",
+		"editorLightBulb.foreground": "#5ba2d0",
+		"editorLightBulbAutoFix.foreground": "#F8D2C9",
+		"editorLineNumber.activeForeground": "#DEE0EF",
+		"editorLineNumber.foreground": "#8D8F9E",
+		"editorLink.activeForeground": "#F8D2C9",
+		"editorMarkerNavigation.background": "#1C1E2D",
+		"editorMarkerNavigationError.background": "#1C1E2D",
+		"editorMarkerNavigationInfo.background": "#1C1E2D",
+		"editorMarkerNavigationWarning.background": "#1C1E2D",
+		"editorOverviewRuler.addedForeground": "#94b8ff80",
+		"editorOverviewRuler.background": "#151726",
+		"editorOverviewRuler.border": "#6B6D7C66",
+		"editorOverviewRuler.bracketMatchForeground": "#8D8F9E",
+		"editorOverviewRuler.commonContentForeground": "#6B6D7C1a",
+		"editorOverviewRuler.currentContentForeground": "#6B6D7C33",
+		"editorOverviewRuler.deletedForeground": "#ee867980",
+		"editorOverviewRuler.errorForeground": "#ee867980",
+		"editorOverviewRuler.findMatchForeground": "#6B6D7C66",
+		"editorOverviewRuler.incomingContentForeground": "#9ccfd880",
+		"editorOverviewRuler.infoForeground": "#94b8ff80",
+		"editorOverviewRuler.modifiedForeground": "#F8D2C980",
+		"editorOverviewRuler.rangeHighlightForeground": "#6B6D7C66",
+		"editorOverviewRuler.selectionHighlightForeground": "#6B6D7C66",
+		"editorOverviewRuler.warningForeground": "#a78bfa80",
+		"editorOverviewRuler.wordHighlightForeground": "#6B6D7C33",
+		"editorOverviewRuler.wordHighlightStrongForeground": "#6B6D7C66",
+		"editorPane.background": "#0000",
+		"editorRuler.foreground": "#6B6D7C66",
+		"editorSuggestWidget.background": "#1C1E2D",
+		"editorSuggestWidget.border": "#0000",
+		"editorSuggestWidget.focusHighlightForeground": "#F8D2C9",
+		"editorSuggestWidget.foreground": "#8D8F9E",
+		"editorSuggestWidget.highlightForeground": "#F8D2C9",
+		"editorSuggestWidget.selectedBackground": "#6B6D7C33",
+		"editorSuggestWidget.selectedForeground": "#DEE0EF",
+		"editorSuggestWidget.selectedIconForeground": "#DEE0EF",
+		"editorUnnecessaryCode.border": "#0000",
+		"editorUnnecessaryCode.opacity": "#00000080",
+		"editorWarning.border": "#0000",
+		"editorWarning.foreground": "#a78bfa",
+		"editorWhitespace.foreground": "#6B6D7C",
+		"editorWidget.background": "#1C1E2D",
+		"editorWidget.border": "#232534",
+		"editorWidget.foreground": "#8D8F9E",
+		"editorWidget.resizeBorder": "#6B6D7C",
+		"errorForeground": "#ee8679",
+		"extensionBadge.remoteBackground": "#9ccfd8",
+		"extensionBadge.remoteForeground": "#151726",
+		"extensionButton.prominentBackground": "#F8D2C9",
+		"extensionButton.prominentForeground": "#151726",
+		"extensionButton.prominentHoverBackground": "#F8D2C9e6",
+		"extensionIcon.starForeground": "#F8D2C9",
+		"extensionIcon.verifiedForeground": "#9ccfd8",
+		"focusBorder": "#6B6D7C33",
+		"foreground": "#DEE0EF",
+		"gitDecoration.addedResourceForeground": "#94b8ff",
+		"gitDecoration.conflictingResourceForeground": "#ee8679",
+		"gitDecoration.deletedResourceForeground": "#8D8F9E",
+		"gitDecoration.ignoredResourceForeground": "#6B6D7C",
+		"gitDecoration.modifiedResourceForeground": "#F8D2C9",
+		"gitDecoration.renamedResourceForeground": "#5ba2d0",
+		"gitDecoration.stageDeletedResourceForeground": "#ee8679",
+		"gitDecoration.stageModifiedResourceForeground": "#9ccfd8",
+		"gitDecoration.submoduleResourceForeground": "#a78bfa",
+		"gitDecoration.untrackedResourceForeground": "#a78bfa",
+		"icon.foreground": "#8D8F9E",
+		"input.background": "#23253480",
+		"input.border": "#6B6D7C33",
+		"input.foreground": "#DEE0EF",
+		"input.placeholderForeground": "#8D8F9E",
+		"inputOption.activeBackground": "#F8D2C9",
+		"inputOption.activeBorder": "#0000",
+		"inputOption.activeForeground": "#151726",
+		"inputValidation.errorBackground": "#0000",
+		"inputValidation.errorBorder": "#0000",
+		"inputValidation.errorForeground": "#ee8679",
+		"inputValidation.infoBackground": "#0000",
+		"inputValidation.infoBorder": "#0000",
+		"inputValidation.infoForeground": "#94b8ff",
+		"inputValidation.warningBackground": "#0000",
+		"inputValidation.warningBorder": "#0000",
+		"inputValidation.warningForeground": "#94b8ff80",
+		"keybindingLabel.background": "#232534",
+		"keybindingLabel.border": "#6B6D7C66",
+		"keybindingLabel.bottomBorder": "#6B6D7C66",
+		"keybindingLabel.foreground": "#9ccfd8",
+		"keybindingTable.headerBackground": "#232534",
+		"keybindingTable.rowsBackground": "#1C1E2D",
+		"list.activeSelectionBackground": "#6B6D7C33",
+		"list.activeSelectionForeground": "#DEE0EF",
+		"list.activeSelectionIconForeground": "#DEE0EF",
+		"list.deemphasizedForeground": "#8D8F9E",
+		"list.dropBackground": "#1C1E2D",
+		"list.errorForeground": "#ee8679",
+		"list.filterMatchBackground": "#1C1E2D",
+		"list.filterMatchBorder": "#F8D2C9",
+		"list.focusBackground": "#6B6D7C66",
+		"list.focusForeground": "#DEE0EF",
+		"list.focusOutline": "#6B6D7C33",
+		"list.highlightForeground": "#F8D2C9",
+		"list.hoverBackground": "#6B6D7C1a",
+		"list.hoverForeground": "#DEE0EF",
+		"list.inactiveFocusBackground": "#6B6D7C1a",
+		"list.inactiveSelectionBackground": "#1C1E2D",
+		"list.inactiveSelectionForeground": "#DEE0EF",
+		"list.inactiveSelectionIconForeground": "#8D8F9E",
+		"list.invalidItemForeground": "#ee8679",
+		"list.warningForeground": "#a78bfa",
+		"listFilterWidget.background": "#1C1E2D",
+		"listFilterWidget.noMatchesOutline": "#ee8679",
+		"listFilterWidget.outline": "#232534",
+		"menu.background": "#1C1E2D",
+		"menu.border": "#6B6D7C1a",
+		"menu.foreground": "#DEE0EF",
+		"menu.selectionBackground": "#6B6D7C33",
+		"menu.selectionBorder": "#232534",
+		"menu.selectionForeground": "#DEE0EF",
+		"menu.separatorBackground": "#DEE0EF",
+		"menubar.selectionBackground": "#6B6D7C33",
+		"menubar.selectionBorder": "#6B6D7C1a",
+		"menubar.selectionForeground": "#DEE0EF",
+		"merge.border": "#232534",
+		"merge.commonContentBackground": "#6B6D7C33",
+		"merge.commonHeaderBackground": "#6B6D7C33",
+		"merge.currentContentBackground": "#a78bfa80",
+		"merge.currentHeaderBackground": "#a78bfa80",
+		"merge.incomingContentBackground": "#94b8ff80",
+		"merge.incomingHeaderBackground": "#94b8ff80",
+		"minimap.background": "#1C1E2D",
+		"minimap.errorHighlight": "#ee867980",
+		"minimap.findMatchHighlight": "#6B6D7C33",
+		"minimap.selectionHighlight": "#6B6D7C33",
+		"minimap.warningHighlight": "#a78bfa80",
+		"minimapGutter.addedBackground": "#94b8ff",
+		"minimapGutter.deletedBackground": "#ee8679",
+		"minimapGutter.modifiedBackground": "#F8D2C9",
+		"minimapSlider.activeBackground": "#6B6D7C66",
+		"minimapSlider.background": "#6B6D7C33",
+		"minimapSlider.hoverBackground": "#6B6D7C33",
+		"notificationCenter.border": "#6B6D7C33",
+		"notificationCenterHeader.background": "#1C1E2D",
+		"notificationCenterHeader.foreground": "#8D8F9E",
+		"notificationLink.foreground": "#9ccfd8",
+		"notifications.background": "#1C1E2D",
+		"notifications.border": "#6B6D7C33",
+		"notifications.foreground": "#DEE0EF",
+		"notificationsErrorIcon.foreground": "#ee8679",
+		"notificationsInfoIcon.foreground": "#94b8ff",
+		"notificationsWarningIcon.foreground": "#a78bfa",
+		"notificationToast.border": "#6B6D7C33",
+		"panel.background": "#1C1E2D",
+		"panel.border": "#0000",
+		"panel.dropBorder": "#232534",
+		"panelInput.border": "#1C1E2D",
+		"panelSection.dropBackground": "#6B6D7C33",
+		"panelSectionHeader.background": "#1C1E2D",
+		"panelSectionHeader.foreground": "#DEE0EF",
+		"panelTitle.activeBorder": "#6B6D7C66",
+		"panelTitle.activeForeground": "#DEE0EF",
+		"panelTitle.inactiveForeground": "#8D8F9E",
+		"peekView.border": "#232534",
+		"peekViewEditor.background": "#1C1E2D",
+		"peekViewEditor.matchHighlightBackground": "#6B6D7C66",
+		"peekViewResult.background": "#1C1E2D",
+		"peekViewResult.fileForeground": "#8D8F9E",
+		"peekViewResult.lineForeground": "#8D8F9E",
+		"peekViewResult.matchHighlightBackground": "#6B6D7C66",
+		"peekViewResult.selectionBackground": "#6B6D7C33",
+		"peekViewResult.selectionForeground": "#DEE0EF",
+		"peekViewTitle.background": "#232534",
+		"peekViewTitleDescription.foreground": "#8D8F9E",
+		"pickerGroup.border": "#6B6D7C66",
+		"pickerGroup.foreground": "#9ccfd8",
+		"ports.iconRunningProcessForeground": "#F8D2C9",
+		"problemsErrorIcon.foreground": "#ee8679",
+		"problemsInfoIcon.foreground": "#94b8ff",
+		"problemsWarningIcon.foreground": "#a78bfa",
+		"progressBar.background": "#F8D2C9",
+		"quickInput.background": "#1C1E2D",
+		"quickInput.foreground": "#8D8F9E",
+		"quickInputList.focusBackground": "#6B6D7C33",
+		"quickInputList.focusForeground": "#DEE0EF",
+		"quickInputList.focusIconForeground": "#DEE0EF",
+		"scrollbar.shadow": "#0000",
+		"scrollbarSlider.activeBackground": "#6B6D7C66",
+		"scrollbarSlider.background": "#6B6D7C1a",
+		"scrollbarSlider.hoverBackground": "#6B6D7C33",
+		"searchEditor.findMatchBackground": "#6B6D7C33",
+		"selection.background": "#6B6D7C66",
+		"settings.focusedRowBackground": "#1C1E2D",
+		"settings.headerForeground": "#DEE0EF",
+		"settings.modifiedItemIndicator": "#F8D2C9",
+		"settings.focusedRowBorder": "#6B6D7C33",
+		"settings.rowHoverBackground": "#1C1E2D",
+		"sideBar.background": "#151726",
+		"sideBar.dropBackground": "#1C1E2D",
+		"sideBar.foreground": "#8D8F9E",
+		"sideBarSectionHeader.background": "#0000",
+		"sideBarSectionHeader.border": "#6B6D7C33",
+		"statusBar.background": "#151726",
+		"statusBar.debuggingBackground": "#9ccfd8",
+		"statusBar.debuggingForeground": "#151726",
+		"statusBar.foreground": "#8D8F9E",
+		"statusBar.noFolderBackground": "#151726",
+		"statusBar.noFolderForeground": "#8D8F9E",
+		"statusBarItem.activeBackground": "#6B6D7C66",
+		"statusBarItem.hoverBackground": "#6B6D7C33",
+		"statusBarItem.prominentBackground": "#232534",
+		"statusBarItem.prominentForeground": "#DEE0EF",
+		"statusBarItem.prominentHoverBackground": "#6B6D7C33",
+		"statusBarItem.remoteBackground": "#151726",
+		"statusBarItem.remoteForeground": "#a78bfa",
+		"statusBarItem.errorBackground": "#151726",
+		"statusBarItem.errorForeground": "#ee8679",
+		"symbolIcon.arrayForeground": "#8D8F9E",
+		"symbolIcon.classForeground": "#8D8F9E",
+		"symbolIcon.colorForeground": "#8D8F9E",
+		"symbolIcon.constantForeground": "#8D8F9E",
+		"symbolIcon.constructorForeground": "#8D8F9E",
+		"symbolIcon.enumeratorForeground": "#8D8F9E",
+		"symbolIcon.enumeratorMemberForeground": "#8D8F9E",
+		"symbolIcon.eventForeground": "#8D8F9E",
+		"symbolIcon.fieldForeground": "#8D8F9E",
+		"symbolIcon.fileForeground": "#8D8F9E",
+		"symbolIcon.folderForeground": "#8D8F9E",
+		"symbolIcon.functionForeground": "#8D8F9E",
+		"symbolIcon.interfaceForeground": "#8D8F9E",
+		"symbolIcon.keyForeground": "#8D8F9E",
+		"symbolIcon.keywordForeground": "#8D8F9E",
+		"symbolIcon.methodForeground": "#8D8F9E",
+		"symbolIcon.moduleForeground": "#8D8F9E",
+		"symbolIcon.namespaceForeground": "#8D8F9E",
+		"symbolIcon.nullForeground": "#8D8F9E",
+		"symbolIcon.numberForeground": "#8D8F9E",
+		"symbolIcon.objectForeground": "#8D8F9E",
+		"symbolIcon.operatorForeground": "#8D8F9E",
+		"symbolIcon.packageForeground": "#8D8F9E",
+		"symbolIcon.propertyForeground": "#8D8F9E",
+		"symbolIcon.referenceForeground": "#8D8F9E",
+		"symbolIcon.snippetForeground": "#8D8F9E",
+		"symbolIcon.stringForeground": "#8D8F9E",
+		"symbolIcon.structForeground": "#8D8F9E",
+		"symbolIcon.textForeground": "#8D8F9E",
+		"symbolIcon.typeParameterForeground": "#8D8F9E",
+		"symbolIcon.unitForeground": "#8D8F9E",
+		"symbolIcon.variableForeground": "#8D8F9E",
+		"tab.activeBackground": "#6B6D7C1a",
+		"tab.activeForeground": "#DEE0EF",
+		"tab.activeModifiedBorder": "#94b8ff",
+		"tab.border": "#0000",
+		"tab.hoverBackground": "#6B6D7C33",
+		"tab.inactiveBackground": "#0000",
+		"tab.inactiveForeground": "#8D8F9E",
+		"tab.inactiveModifiedBorder": "#94b8ff80",
+		"tab.lastPinnedBorder": "#6B6D7C",
+		"tab.unfocusedActiveBackground": "#0000",
+		"tab.unfocusedHoverBackground": "#0000",
+		"tab.unfocusedInactiveBackground": "#0000",
+		"tab.unfocusedInactiveModifiedBorder": "#94b8ff80",
+		"terminal.ansiBlack": "#232534",
+		"terminal.ansiBlue": "#94b8ff",
+		"terminal.ansiBrightBlack": "#8D8F9E",
+		"terminal.ansiBrightBlue": "#94b8ff",
+		"terminal.ansiBrightCyan": "#F8D2C9",
+		"terminal.ansiBrightGreen": "#5ba2d0",
+		"terminal.ansiBrightMagenta": "#9ccfd8",
+		"terminal.ansiBrightRed": "#ee8679",
+		"terminal.ansiBrightWhite": "#DEE0EF",
+		"terminal.ansiBrightYellow": "#a78bfa",
+		"terminal.ansiCyan": "#F8D2C9",
+		"terminal.ansiGreen": "#5ba2d0",
+		"terminal.ansiMagenta": "#9ccfd8",
+		"terminal.ansiRed": "#ee8679",
+		"terminal.ansiWhite": "#DEE0EF",
+		"terminal.ansiYellow": "#a78bfa",
+		"terminal.dropBackground": "#6B6D7C33",
+		"terminal.foreground": "#DEE0EF",
+		"terminal.selectionBackground": "#6B6D7C33",
+		"terminal.tab.activeBorder": "#DEE0EF",
+		"terminalCursor.background": "#DEE0EF",
+		"terminalCursor.foreground": "#6B6D7C",
+		"textBlockQuote.background": "#1C1E2D",
+		"textBlockQuote.border": "#6B6D7C33",
+		"textCodeBlock.background": "#1C1E2D",
+		"textLink.activeForeground": "#9ccfd8e6",
+		"textLink.foreground": "#9ccfd8",
+		"textPreformat.foreground": "#a78bfa",
+		"textSeparator.foreground": "#8D8F9E",
+		"titleBar.activeBackground": "#151726",
+		"titleBar.activeForeground": "#8D8F9E",
+		"titleBar.inactiveBackground": "#1C1E2D",
+		"titleBar.inactiveForeground": "#8D8F9E",
+		"toolbar.activeBackground": "#6B6D7C66",
+		"toolbar.hoverBackground": "#6B6D7C33",
+		"tree.indentGuidesStroke": "#8D8F9E",
+		"walkThrough.embeddedEditorBackground": "#151726",
+		"welcomePage.background": "#151726",
+		"welcomePage.buttonBackground": "#1C1E2D",
+		"welcomePage.buttonHoverBackground": "#232534",
+		"widget.shadow": "#0101011a",
+		"window.activeBorder": "#1C1E2D",
+		"window.inactiveBorder": "#1C1E2D"
+	},
+	"tokenColors": [
+		{
+			"scope": ["comment"],
+			"settings": {
+				"foreground": "#6B6D7C",
+				"fontStyle": "italic"
+			}
+		},
+		{
+			"scope": ["constant"],
+			"settings": {
+				"foreground": "#5ba2d0"
+			}
+		},
+		{
+			"scope": ["constant.numeric", "constant.language", "constant.charcter.escape"],
+			"settings": {
+				"foreground": "#F8D2C9"
+			}
+		},
+		{
+			"scope": ["entity.name"],
+			"settings": {
+				"foreground": "#F8D2C9"
+			}
+		},
+		{
+			"scope": [
+				"entity.name.section",
+				"entity.name.tag",
+				"entity.name.namespace",
+				"entity.name.type"
+			],
+			"settings": {
+				"foreground": "#94b8ff"
+			}
+		},
+		{
+			"scope": ["entity.other.attribute-name", "entity.other.inherited-class"],
+			"settings": {
+				"foreground": "#9ccfd8",
+				"fontStyle": "italic"
+			}
+		},
+		{
+			"scope": ["invalid"],
+			"settings": {
+				"foreground": "#ee8679"
+			}
+		},
+		{
+			"scope": ["invalid.deprecated"],
+			"settings": {
+				"foreground": "#8D8F9E"
+			}
+		},
+		{
+			"scope": ["keyword"],
+			"settings": {
+				"foreground": "#5ba2d0"
+			}
+		},
+		{
+			"scope": ["meta.tag", "meta.brace"],
+			"settings": {
+				"foreground": "#DEE0EF"
+			}
+		},
+		{
+			"scope": ["meta.import", "meta.export"],
+			"settings": {
+				"foreground": "#5ba2d0"
+			}
+		},
+		{
+			"scope": "meta.directive.vue",
+			"settings": {
+				"foreground": "#9ccfd8",
+				"fontStyle": "italic"
+			}
+		},
+		{
+			"scope": "meta.property-name.css",
+			"settings": {
+				"foreground": "#94b8ff"
+			}
+		},
+		{
+			"scope": "meta.property-value.css",
+			"settings": {
+				"foreground": "#a78bfa"
+			}
+		},
+		{
+			"scope": "meta.tag.other.html",
+			"settings": {
+				"foreground": "#8D8F9E"
+			}
+		},
+		{
+			"scope": ["punctuation"],
+			"settings": {
+				"foreground": "#8D8F9E"
+			}
+		},
+		{
+			"scope": ["punctuation.accessor"],
+			"settings": {
+				"foreground": "#5ba2d0"
+			}
+		},
+		{
+			"scope": ["punctuation.definition.string"],
+			"settings": {
+				"foreground": "#a78bfa"
+			}
+		},
+		{
+			"scope": ["punctuation.definition.tag"],
+			"settings": {
+				"foreground": "#6B6D7C"
+			}
+		},
+		{
+			"scope": ["storage.type", "storage.modifier"],
+			"settings": {
+				"foreground": "#5ba2d0"
+			}
+		},
+		{
+			"scope": ["string"],
+			"settings": {
+				"foreground": "#a78bfa"
+			}
+		},
+		{
+			"scope": ["support"],
+			"settings": {
+				"foreground": "#94b8ff"
+			}
+		},
+		{
+			"scope": ["support.constant"],
+			"settings": {
+				"foreground": "#a78bfa"
+			}
+		},
+		{
+			"scope": ["support.function"],
+			"settings": {
+				"foreground": "#ee8679",
+				"fontStyle": "italic"
+			}
+		},
+		{
+			"scope": ["variable"],
+			"settings": {
+				"foreground": "#F8D2C9",
+				"fontStyle": "italic"
+			}
+		},
+		{
+			"scope": ["variable.other", "variable.language", "variable.function", "variable.argument"],
+			"settings": {
+				"foreground": "#DEE0EF"
+			}
+		},
+		{
+			"scope": ["variable.parameter"],
+			"settings": {
+				"foreground": "#9ccfd8"
+			}
+		}
+	]
+}
diff --git a/src/styles/themes/serendipity-morning.json b/src/styles/themes/serendipity-morning.json
new file mode 100644
index 000000000..96e080dd7
--- /dev/null
+++ b/src/styles/themes/serendipity-morning.json
@@ -0,0 +1,634 @@
+{
+	"name": "Serendipity Morning",
+	"type": "light",
+	"colors": {
+		"activityBar.activeBorder": "#4E5377",
+		"activityBar.background": "#FDFDFE",
+		"activityBar.dropBorder": "#D8DAE4",
+		"activityBar.foreground": "#4E5377",
+		"activityBar.inactiveForeground": "#5F6488",
+		"activityBarBadge.background": "#F19A8E",
+		"activityBarBadge.foreground": "#FDFDFE",
+		"badge.background": "#F19A8E",
+		"badge.foreground": "#FDFDFE",
+		"banner.background": "#F1F1F4",
+		"banner.foreground": "#4E5377",
+		"banner.iconForeground": "#5F6488",
+		"breadcrumb.activeSelectionForeground": "#F19A8E",
+		"breadcrumb.background": "#FDFDFE",
+		"breadcrumb.focusForeground": "#5F6488",
+		"breadcrumb.foreground": "#8388AD",
+		"breadcrumbPicker.background": "#F1F1F4",
+		"button.background": "#F19A8E",
+		"button.foreground": "#FDFDFE",
+		"button.hoverBackground": "#F19A8Ee6",
+		"button.secondaryBackground": "#F1F1F4",
+		"button.secondaryForeground": "#4E5377",
+		"button.secondaryHoverBackground": "#D8DAE4",
+		"charts.lines": "#5F6488",
+		"charts.foreground": "#4E5377",
+		"charts.blue": "#7397DE",
+		"charts.green": "#3788BE",
+		"charts.orange": "#F19A8E",
+		"charts.purple": "#77AAB3",
+		"charts.red": "#D26A5D",
+		"charts.yellow": "#886CDB",
+		"checkbox.background": "#F1F1F4",
+		"checkbox.border": "#6e6a8614",
+		"checkbox.foreground": "#4E5377",
+		"debugExceptionWidget.background": "#F1F1F4",
+		"debugExceptionWidget.border": "#6e6a8614",
+		"debugIcon.breakpointCurrentStackframeForeground": "#5F6488",
+		"debugIcon.breakpointDisabledForeground": "#5F6488",
+		"debugIcon.breakpointForeground": "#5F6488",
+		"debugIcon.breakpointStackframeForeground": "#5F6488",
+		"debugIcon.breakpointUnverifiedForeground": "#5F6488",
+		"debugIcon.continueForeground": "#5F6488",
+		"debugIcon.disconnectForeground": "#5F6488",
+		"debugIcon.pauseForeground": "#5F6488",
+		"debugIcon.restartForeground": "#5F6488",
+		"debugIcon.startForeground": "#5F6488",
+		"debugIcon.stepBackForeground": "#5F6488",
+		"debugIcon.stepIntoForeground": "#5F6488",
+		"debugIcon.stepOutForeground": "#5F6488",
+		"debugIcon.stepOverForeground": "#5F6488",
+		"debugIcon.stopForeground": "#D26A5D",
+		"debugToolBar.background": "#F1F1F4",
+		"debugToolBar.border": "#D8DAE4",
+		"descriptionForeground": "#5F6488",
+		"diffEditor.border": "#D8DAE4",
+		"diffEditor.diagonalFill": "#6e6a8626",
+		"diffEditor.insertedTextBackground": "#7397DE20",
+		"diffEditor.insertedTextBorder": "#FDFDFEB0",
+		"diffEditor.removedTextBackground": "#D26A5D29",
+		"diffEditor.removedTextBorder": "#FDFDFEB0",
+		"dropdown.background": "#F1F1F4",
+		"dropdown.border": "#6e6a8614",
+		"dropdown.foreground": "#4E5377",
+		"dropdown.listBackground": "#F1F1F4",
+		"editor.background": "#FDFDFE",
+		"editor.findMatchBackground": "#6e6a8626",
+		"editor.findMatchHighlightBackground": "#6e6a8626",
+		"editor.findRangeHighlightBackground": "#6e6a8626",
+		"editor.findRangeHighlightBorder": "#0000",
+		"editor.focusedStackFrameHighlightBackground": "#6e6a8614",
+		"editor.foldBackground": "#F1F1F4",
+		"editor.foreground": "#4E5377",
+		"editor.hoverHighlightBackground": "#0000",
+		"editor.inactiveSelectionBackground": "#6e6a860d",
+		"editor.inlineValuesBackground": "#0000",
+		"editor.inlineValuesForeground": "#5F6488",
+		"editor.lineHighlightBackground": "#6e6a860d",
+		"editor.lineHighlightBorder": "#0000",
+		"editor.linkedEditingBackground": "#F1F1F4",
+		"editor.rangeHighlightBackground": "#6e6a860d",
+		"editor.rangeHighlightBorder": "#0000",
+		"editor.selectionBackground": "#6e6a8614",
+		"editor.selectionForeground": "#4E5377",
+		"editor.selectionHighlightBackground": "#6e6a8614",
+		"editor.selectionHighlightBorder": "#0000",
+		"editor.snippetFinalTabstopHighlightBackground": "#6e6a8614",
+		"editor.snippetFinalTabstopHighlightBorder": "#F1F1F4",
+		"editor.snippetTabstopHighlightBackground": "#6e6a8614",
+		"editor.snippetTabstopHighlightBorder": "#F1F1F4",
+		"editor.stackFrameHighlightBackground": "#6e6a8614",
+		"editor.symbolHighlightBackground": "#6e6a8614",
+		"editor.symbolHighlightBorder": "#0000",
+		"editor.wordHighlightBackground": "#6e6a8614",
+		"editor.wordHighlightBorder": "#0000",
+		"editor.wordHighlightStrongBackground": "#6e6a8614",
+		"editor.wordHighlightStrongBorder": "#6e6a8614",
+		"editorBracketHighlight.foreground1": "#D26A5D80",
+		"editorBracketHighlight.foreground2": "#3788BE80",
+		"editorBracketHighlight.foreground3": "#886CDB80",
+		"editorBracketHighlight.foreground4": "#7397DE80",
+		"editorBracketHighlight.foreground5": "#F19A8E80",
+		"editorBracketHighlight.foreground6": "#77AAB380",
+		"editorBracketMatch.background": "#0000",
+		"editorBracketMatch.border": "#5F6488",
+		"editorBracketPairGuide.activeBackground1": "#3788BE",
+		"editorBracketPairGuide.activeBackground2": "#F19A8E",
+		"editorBracketPairGuide.activeBackground3": "#77AAB3",
+		"editorBracketPairGuide.activeBackground4": "#7397DE",
+		"editorBracketPairGuide.activeBackground5": "#886CDB",
+		"editorBracketPairGuide.activeBackground6": "#D26A5D",
+		"editorBracketPairGuide.background1": "#3788BE80",
+		"editorBracketPairGuide.background2": "#F19A8E80",
+		"editorBracketPairGuide.background3": "#77AAB380",
+		"editorBracketPairGuide.background4": "#7397DE80",
+		"editorBracketPairGuide.background5": "#886CDB80",
+		"editorBracketPairGuide.background6": "#D26A5D80",
+		"editorCodeLens.foreground": "#F19A8E",
+		"editorCursor.background": "#4E5377",
+		"editorCursor.foreground": "#8388AD",
+		"editorError.border": "#0000",
+		"editorError.foreground": "#D26A5D",
+		"editorGhostText.foreground": "#5F6488",
+		"editorGroup.border": "#0000",
+		"editorGroup.dropBackground": "#F1F1F4",
+		"editorGroup.emptyBackground": "#0000",
+		"editorGroup.focusedEmptyBorder": "#0000",
+		"editorGroupHeader.noTabsBackground": "#0000",
+		"editorGroupHeader.tabsBackground": "#0000",
+		"editorGroupHeader.tabsBorder": "#0000",
+		"editorGutter.addedBackground": "#7397DE",
+		"editorGutter.background": "#0000",
+		"editorGutter.commentRangeForeground": "#5F6488",
+		"editorGutter.deletedBackground": "#D26A5D",
+		"editorGutter.foldingControlForeground": "#77AAB3",
+		"editorGutter.modifiedBackground": "#F19A8E",
+		"editorHint.border": "#0000",
+		"editorHint.foreground": "#5F6488",
+		"editorHoverWidget.background": "#F1F1F4",
+		"editorHoverWidget.border": "#8388AD80",
+		"editorHoverWidget.foreground": "#5F6488",
+		"editorHoverWidget.highlightForeground": "#4E5377",
+		"editorHoverWidget.statusBarBackground": "#0000",
+		"editorIndentGuide.activeBackground": "#8388AD",
+		"editorIndentGuide.background": "#6e6a8626",
+		"editorInfo.border": "#D8DAE4",
+		"editorInfo.foreground": "#7397DE",
+		"editorInlayHint.background": "#D8DAE4",
+		"editorInlayHint.foreground": "#5F6488",
+		"editorInlayHint.parameterBackground": "#D8DAE4",
+		"editorInlayHint.parameterForeground": "#77AAB3",
+		"editorInlayHint.typeBackground": "#D8DAE4",
+		"editorInlayHint.typeForeground": "#7397DE",
+		"editorLightBulb.foreground": "#3788BE",
+		"editorLightBulbAutoFix.foreground": "#F19A8E",
+		"editorLineNumber.activeForeground": "#4E5377",
+		"editorLineNumber.foreground": "#5F6488",
+		"editorLink.activeForeground": "#F19A8E",
+		"editorMarkerNavigation.background": "#F1F1F4",
+		"editorMarkerNavigationError.background": "#F1F1F4",
+		"editorMarkerNavigationInfo.background": "#F1F1F4",
+		"editorMarkerNavigationWarning.background": "#F1F1F4",
+		"editorOverviewRuler.addedForeground": "#7397DE80",
+		"editorOverviewRuler.background": "#FDFDFE",
+		"editorOverviewRuler.border": "#6e6a8626",
+		"editorOverviewRuler.bracketMatchForeground": "#5F6488",
+		"editorOverviewRuler.commonContentForeground": "#6e6a860d",
+		"editorOverviewRuler.currentContentForeground": "#6e6a8614",
+		"editorOverviewRuler.deletedForeground": "#D26A5D80",
+		"editorOverviewRuler.errorForeground": "#D26A5D80",
+		"editorOverviewRuler.findMatchForeground": "#6e6a8626",
+		"editorOverviewRuler.incomingContentForeground": "#77AAB380",
+		"editorOverviewRuler.infoForeground": "#7397DE80",
+		"editorOverviewRuler.modifiedForeground": "#F19A8E80",
+		"editorOverviewRuler.rangeHighlightForeground": "#6e6a8626",
+		"editorOverviewRuler.selectionHighlightForeground": "#6e6a8626",
+		"editorOverviewRuler.warningForeground": "#886CDB80",
+		"editorOverviewRuler.wordHighlightForeground": "#6e6a8614",
+		"editorOverviewRuler.wordHighlightStrongForeground": "#6e6a8626",
+		"editorPane.background": "#0000",
+		"editorRuler.foreground": "#6e6a8626",
+		"editorSuggestWidget.background": "#F1F1F4",
+		"editorSuggestWidget.border": "#0000",
+		"editorSuggestWidget.focusHighlightForeground": "#F19A8E",
+		"editorSuggestWidget.foreground": "#5F6488",
+		"editorSuggestWidget.highlightForeground": "#F19A8E",
+		"editorSuggestWidget.selectedBackground": "#6e6a8614",
+		"editorSuggestWidget.selectedForeground": "#4E5377",
+		"editorSuggestWidget.selectedIconForeground": "#4E5377",
+		"editorUnnecessaryCode.border": "#0000",
+		"editorUnnecessaryCode.opacity": "#00000080",
+		"editorWarning.border": "#0000",
+		"editorWarning.foreground": "#886CDB",
+		"editorWhitespace.foreground": "#8388AD",
+		"editorWidget.background": "#F1F1F4",
+		"editorWidget.border": "#D8DAE4",
+		"editorWidget.foreground": "#5F6488",
+		"editorWidget.resizeBorder": "#8388AD",
+		"errorForeground": "#D26A5D",
+		"extensionBadge.remoteBackground": "#77AAB3",
+		"extensionBadge.remoteForeground": "#FDFDFE",
+		"extensionButton.prominentBackground": "#F19A8E",
+		"extensionButton.prominentForeground": "#FDFDFE",
+		"extensionButton.prominentHoverBackground": "#F19A8Ee6",
+		"extensionIcon.starForeground": "#F19A8E",
+		"extensionIcon.verifiedForeground": "#77AAB3",
+		"focusBorder": "#6e6a8614",
+		"foreground": "#4E5377",
+		"gitDecoration.addedResourceForeground": "#7397DE",
+		"gitDecoration.conflictingResourceForeground": "#D26A5D",
+		"gitDecoration.deletedResourceForeground": "#5F6488",
+		"gitDecoration.ignoredResourceForeground": "#8388AD",
+		"gitDecoration.modifiedResourceForeground": "#F19A8E",
+		"gitDecoration.renamedResourceForeground": "#3788BE",
+		"gitDecoration.stageDeletedResourceForeground": "#D26A5D",
+		"gitDecoration.stageModifiedResourceForeground": "#77AAB3",
+		"gitDecoration.submoduleResourceForeground": "#886CDB",
+		"gitDecoration.untrackedResourceForeground": "#886CDB",
+		"icon.foreground": "#5F6488",
+		"input.background": "#D8DAE480",
+		"input.border": "#6e6a8614",
+		"input.foreground": "#4E5377",
+		"input.placeholderForeground": "#5F6488",
+		"inputOption.activeBackground": "#F19A8E",
+		"inputOption.activeBorder": "#0000",
+		"inputOption.activeForeground": "#FDFDFE",
+		"inputValidation.errorBackground": "#0000",
+		"inputValidation.errorBorder": "#0000",
+		"inputValidation.errorForeground": "#D26A5D",
+		"inputValidation.infoBackground": "#0000",
+		"inputValidation.infoBorder": "#0000",
+		"inputValidation.infoForeground": "#7397DE",
+		"inputValidation.warningBackground": "#0000",
+		"inputValidation.warningBorder": "#0000",
+		"inputValidation.warningForeground": "#7397DE80",
+		"keybindingLabel.background": "#D8DAE4",
+		"keybindingLabel.border": "#6e6a8626",
+		"keybindingLabel.bottomBorder": "#6e6a8626",
+		"keybindingLabel.foreground": "#77AAB3",
+		"keybindingTable.headerBackground": "#D8DAE4",
+		"keybindingTable.rowsBackground": "#F1F1F4",
+		"list.activeSelectionBackground": "#6e6a8614",
+		"list.activeSelectionForeground": "#4E5377",
+		"list.activeSelectionIconForeground": "#4E5377",
+		"list.deemphasizedForeground": "#5F6488",
+		"list.dropBackground": "#F1F1F4",
+		"list.errorForeground": "#D26A5D",
+		"list.filterMatchBackground": "#F1F1F4",
+		"list.filterMatchBorder": "#F19A8E",
+		"list.focusBackground": "#6e6a8626",
+		"list.focusForeground": "#4E5377",
+		"list.focusOutline": "#6e6a8614",
+		"list.highlightForeground": "#F19A8E",
+		"list.hoverBackground": "#6e6a860d",
+		"list.hoverForeground": "#4E5377",
+		"list.inactiveFocusBackground": "#6e6a860d",
+		"list.inactiveSelectionBackground": "#F1F1F4",
+		"list.inactiveSelectionForeground": "#4E5377",
+		"list.inactiveSelectionIconForeground": "#5F6488",
+		"list.invalidItemForeground": "#D26A5D",
+		"list.warningForeground": "#886CDB",
+		"listFilterWidget.background": "#F1F1F4",
+		"listFilterWidget.noMatchesOutline": "#D26A5D",
+		"listFilterWidget.outline": "#D8DAE4",
+		"menu.background": "#F1F1F4",
+		"menu.border": "#6e6a860d",
+		"menu.foreground": "#4E5377",
+		"menu.selectionBackground": "#6e6a8614",
+		"menu.selectionBorder": "#D8DAE4",
+		"menu.selectionForeground": "#4E5377",
+		"menu.separatorBackground": "#4E5377",
+		"menubar.selectionBackground": "#6e6a8614",
+		"menubar.selectionBorder": "#6e6a860d",
+		"menubar.selectionForeground": "#4E5377",
+		"merge.border": "#D8DAE4",
+		"merge.commonContentBackground": "#6e6a8614",
+		"merge.commonHeaderBackground": "#6e6a8614",
+		"merge.currentContentBackground": "#886CDB80",
+		"merge.currentHeaderBackground": "#886CDB80",
+		"merge.incomingContentBackground": "#7397DE80",
+		"merge.incomingHeaderBackground": "#7397DE80",
+		"minimap.background": "#F1F1F4",
+		"minimap.errorHighlight": "#D26A5D80",
+		"minimap.findMatchHighlight": "#6e6a8614",
+		"minimap.selectionHighlight": "#6e6a8614",
+		"minimap.warningHighlight": "#886CDB80",
+		"minimapGutter.addedBackground": "#7397DE",
+		"minimapGutter.deletedBackground": "#D26A5D",
+		"minimapGutter.modifiedBackground": "#F19A8E",
+		"minimapSlider.activeBackground": "#6e6a8626",
+		"minimapSlider.background": "#6e6a8614",
+		"minimapSlider.hoverBackground": "#6e6a8614",
+		"notificationCenter.border": "#6e6a8614",
+		"notificationCenterHeader.background": "#F1F1F4",
+		"notificationCenterHeader.foreground": "#5F6488",
+		"notificationLink.foreground": "#77AAB3",
+		"notifications.background": "#F1F1F4",
+		"notifications.border": "#6e6a8614",
+		"notifications.foreground": "#4E5377",
+		"notificationsErrorIcon.foreground": "#D26A5D",
+		"notificationsInfoIcon.foreground": "#7397DE",
+		"notificationsWarningIcon.foreground": "#886CDB",
+		"notificationToast.border": "#6e6a8614",
+		"panel.background": "#F1F1F4",
+		"panel.border": "#0000",
+		"panel.dropBorder": "#D8DAE4",
+		"panelInput.border": "#F1F1F4",
+		"panelSection.dropBackground": "#6e6a8614",
+		"panelSectionHeader.background": "#F1F1F4",
+		"panelSectionHeader.foreground": "#4E5377",
+		"panelTitle.activeBorder": "#6e6a8626",
+		"panelTitle.activeForeground": "#4E5377",
+		"panelTitle.inactiveForeground": "#5F6488",
+		"peekView.border": "#D8DAE4",
+		"peekViewEditor.background": "#F1F1F4",
+		"peekViewEditor.matchHighlightBackground": "#6e6a8626",
+		"peekViewResult.background": "#F1F1F4",
+		"peekViewResult.fileForeground": "#5F6488",
+		"peekViewResult.lineForeground": "#5F6488",
+		"peekViewResult.matchHighlightBackground": "#6e6a8626",
+		"peekViewResult.selectionBackground": "#6e6a8614",
+		"peekViewResult.selectionForeground": "#4E5377",
+		"peekViewTitle.background": "#D8DAE4",
+		"peekViewTitleDescription.foreground": "#5F6488",
+		"pickerGroup.border": "#6e6a8626",
+		"pickerGroup.foreground": "#77AAB3",
+		"ports.iconRunningProcessForeground": "#F19A8E",
+		"problemsErrorIcon.foreground": "#D26A5D",
+		"problemsInfoIcon.foreground": "#7397DE",
+		"problemsWarningIcon.foreground": "#886CDB",
+		"progressBar.background": "#F19A8E",
+		"quickInput.background": "#F1F1F4",
+		"quickInput.foreground": "#5F6488",
+		"quickInputList.focusBackground": "#6e6a8614",
+		"quickInputList.focusForeground": "#4E5377",
+		"quickInputList.focusIconForeground": "#4E5377",
+		"scrollbar.shadow": "#0000",
+		"scrollbarSlider.activeBackground": "#6e6a8626",
+		"scrollbarSlider.background": "#6e6a860d",
+		"scrollbarSlider.hoverBackground": "#6e6a8614",
+		"searchEditor.findMatchBackground": "#6e6a8614",
+		"selection.background": "#6e6a8626",
+		"settings.focusedRowBackground": "#F1F1F4",
+		"settings.headerForeground": "#4E5377",
+		"settings.modifiedItemIndicator": "#F19A8E",
+		"settings.focusedRowBorder": "#6e6a8614",
+		"settings.rowHoverBackground": "#F1F1F4",
+		"sideBar.background": "#FDFDFE",
+		"sideBar.dropBackground": "#F1F1F4",
+		"sideBar.foreground": "#5F6488",
+		"sideBarSectionHeader.background": "#0000",
+		"sideBarSectionHeader.border": "#6e6a8614",
+		"statusBar.background": "#FDFDFE",
+		"statusBar.debuggingBackground": "#77AAB3",
+		"statusBar.debuggingForeground": "#FDFDFE",
+		"statusBar.foreground": "#5F6488",
+		"statusBar.noFolderBackground": "#FDFDFE",
+		"statusBar.noFolderForeground": "#5F6488",
+		"statusBarItem.activeBackground": "#6e6a8626",
+		"statusBarItem.hoverBackground": "#6e6a8614",
+		"statusBarItem.prominentBackground": "#D8DAE4",
+		"statusBarItem.prominentForeground": "#4E5377",
+		"statusBarItem.prominentHoverBackground": "#6e6a8614",
+		"statusBarItem.remoteBackground": "#FDFDFE",
+		"statusBarItem.remoteForeground": "#886CDB",
+		"statusBarItem.errorBackground": "#FDFDFE",
+		"statusBarItem.errorForeground": "#D26A5D",
+		"symbolIcon.arrayForeground": "#5F6488",
+		"symbolIcon.classForeground": "#5F6488",
+		"symbolIcon.colorForeground": "#5F6488",
+		"symbolIcon.constantForeground": "#5F6488",
+		"symbolIcon.constructorForeground": "#5F6488",
+		"symbolIcon.enumeratorForeground": "#5F6488",
+		"symbolIcon.enumeratorMemberForeground": "#5F6488",
+		"symbolIcon.eventForeground": "#5F6488",
+		"symbolIcon.fieldForeground": "#5F6488",
+		"symbolIcon.fileForeground": "#5F6488",
+		"symbolIcon.folderForeground": "#5F6488",
+		"symbolIcon.functionForeground": "#5F6488",
+		"symbolIcon.interfaceForeground": "#5F6488",
+		"symbolIcon.keyForeground": "#5F6488",
+		"symbolIcon.keywordForeground": "#5F6488",
+		"symbolIcon.methodForeground": "#5F6488",
+		"symbolIcon.moduleForeground": "#5F6488",
+		"symbolIcon.namespaceForeground": "#5F6488",
+		"symbolIcon.nullForeground": "#5F6488",
+		"symbolIcon.numberForeground": "#5F6488",
+		"symbolIcon.objectForeground": "#5F6488",
+		"symbolIcon.operatorForeground": "#5F6488",
+		"symbolIcon.packageForeground": "#5F6488",
+		"symbolIcon.propertyForeground": "#5F6488",
+		"symbolIcon.referenceForeground": "#5F6488",
+		"symbolIcon.snippetForeground": "#5F6488",
+		"symbolIcon.stringForeground": "#5F6488",
+		"symbolIcon.structForeground": "#5F6488",
+		"symbolIcon.textForeground": "#5F6488",
+		"symbolIcon.typeParameterForeground": "#5F6488",
+		"symbolIcon.unitForeground": "#5F6488",
+		"symbolIcon.variableForeground": "#5F6488",
+		"tab.activeBackground": "#6e6a860d",
+		"tab.activeForeground": "#4E5377",
+		"tab.activeModifiedBorder": "#7397DE",
+		"tab.border": "#0000",
+		"tab.hoverBackground": "#6e6a8614",
+		"tab.inactiveBackground": "#0000",
+		"tab.inactiveForeground": "#5F6488",
+		"tab.inactiveModifiedBorder": "#7397DE80",
+		"tab.lastPinnedBorder": "#8388AD",
+		"tab.unfocusedActiveBackground": "#0000",
+		"tab.unfocusedHoverBackground": "#0000",
+		"tab.unfocusedInactiveBackground": "#0000",
+		"tab.unfocusedInactiveModifiedBorder": "#7397DE80",
+		"terminal.ansiWhite": "#4E5377",
+		"terminal.ansiBrightWhite": "#4E5377",
+		"terminal.ansiBlack": "#D8DAE4",
+		"terminal.ansiBrightBlack": "#5F6488",
+		"terminal.ansiBlue": "#7397DE",
+		"terminal.ansiBrightBlue": "#7397DE",
+		"terminal.ansiCyan": "#F19A8E",
+		"terminal.ansiBrightCyan": "#F19A8E",
+		"terminal.ansiGreen": "#3788BE",
+		"terminal.ansiBrightGreen": "#3788BE",
+		"terminal.ansiMagenta": "#77AAB3",
+		"terminal.ansiBrightMagenta": "#77AAB3",
+		"terminal.ansiRed": "#D26A5D",
+		"terminal.ansiBrightRed": "#D26A5D",
+		"terminal.ansiBrightYellow": "#886CDB",
+		"terminal.ansiYellow": "#886CDB",
+		"terminal.dropBackground": "#6e6a8614",
+		"terminal.foreground": "#4E5377",
+		"terminal.selectionBackground": "#6e6a8614",
+		"terminal.tab.activeBorder": "#4E5377",
+		"terminalCursor.background": "#4E5377",
+		"terminalCursor.foreground": "#8388AD",
+		"textBlockQuote.background": "#F1F1F4",
+		"textBlockQuote.border": "#6e6a8614",
+		"textCodeBlock.background": "#F1F1F4",
+		"textLink.activeForeground": "#77AAB3e6",
+		"textLink.foreground": "#77AAB3",
+		"textPreformat.foreground": "#886CDB",
+		"textSeparator.foreground": "#5F6488",
+		"titleBar.activeBackground": "#FDFDFE",
+		"titleBar.activeForeground": "#5F6488",
+		"titleBar.inactiveBackground": "#F1F1F4",
+		"titleBar.inactiveForeground": "#5F6488",
+		"toolbar.activeBackground": "#6e6a8626",
+		"toolbar.hoverBackground": "#6e6a8614",
+		"tree.indentGuidesStroke": "#5F6488",
+		"walkThrough.embeddedEditorBackground": "#FDFDFE",
+		"welcomePage.background": "#FDFDFE",
+		"welcomePage.buttonBackground": "#F1F1F4",
+		"welcomePage.buttonHoverBackground": "#D8DAE4",
+		"widget.shadow": "#D8DAE44d",
+		"window.activeBorder": "#F1F1F4",
+		"window.inactiveBorder": "#F1F1F4"
+	},
+	"tokenColors": [
+		{
+			"scope": ["comment"],
+			"settings": {
+				"foreground": "#8388AD",
+				"fontStyle": "italic"
+			}
+		},
+		{
+			"scope": ["constant"],
+			"settings": {
+				"foreground": "#3788BE"
+			}
+		},
+		{
+			"scope": ["constant.numeric", "constant.language", "constant.charcter.escape"],
+			"settings": {
+				"foreground": "#F19A8E"
+			}
+		},
+		{
+			"scope": ["entity.name"],
+			"settings": {
+				"foreground": "#F19A8E"
+			}
+		},
+		{
+			"scope": [
+				"entity.name.section",
+				"entity.name.tag",
+				"entity.name.namespace",
+				"entity.name.type"
+			],
+			"settings": {
+				"foreground": "#7397DE"
+			}
+		},
+		{
+			"scope": ["entity.other.attribute-name", "entity.other.inherited-class"],
+			"settings": {
+				"foreground": "#77AAB3",
+				"fontStyle": "italic"
+			}
+		},
+		{
+			"scope": ["invalid"],
+			"settings": {
+				"foreground": "#D26A5D"
+			}
+		},
+		{
+			"scope": ["invalid.deprecated"],
+			"settings": {
+				"foreground": "#5F6488"
+			}
+		},
+		{
+			"scope": ["keyword"],
+			"settings": {
+				"foreground": "#3788BE"
+			}
+		},
+		{
+			"scope": ["meta.tag", "meta.brace"],
+			"settings": {
+				"foreground": "#4E5377"
+			}
+		},
+		{
+			"scope": ["meta.import", "meta.export"],
+			"settings": {
+				"foreground": "#3788BE"
+			}
+		},
+		{
+			"scope": "meta.directive.vue",
+			"settings": {
+				"foreground": "#77AAB3",
+				"fontStyle": "italic"
+			}
+		},
+		{
+			"scope": "meta.property-name.css",
+			"settings": {
+				"foreground": "#7397DE"
+			}
+		},
+		{
+			"scope": "meta.property-value.css",
+			"settings": {
+				"foreground": "#886CDB"
+			}
+		},
+		{
+			"scope": "meta.tag.other.html",
+			"settings": {
+				"foreground": "#5F6488"
+			}
+		},
+		{
+			"scope": ["punctuation"],
+			"settings": {
+				"foreground": "#5F6488"
+			}
+		},
+		{
+			"scope": ["punctuation.accessor"],
+			"settings": {
+				"foreground": "#3788BE"
+			}
+		},
+		{
+			"scope": ["punctuation.definition.string"],
+			"settings": {
+				"foreground": "#886CDB"
+			}
+		},
+		{
+			"scope": ["punctuation.definition.tag"],
+			"settings": {
+				"foreground": "#8388AD"
+			}
+		},
+		{
+			"scope": ["storage.type", "storage.modifier"],
+			"settings": {
+				"foreground": "#3788BE"
+			}
+		},
+		{
+			"scope": ["string"],
+			"settings": {
+				"foreground": "#886CDB"
+			}
+		},
+		{
+			"scope": ["support"],
+			"settings": {
+				"foreground": "#7397DE"
+			}
+		},
+		{
+			"scope": ["support.constant"],
+			"settings": {
+				"foreground": "#886CDB"
+			}
+		},
+		{
+			"scope": ["support.function"],
+			"settings": {
+				"foreground": "#D26A5D",
+				"fontStyle": "italic"
+			}
+		},
+		{
+			"scope": ["variable"],
+			"settings": {
+				"foreground": "#F19A8E",
+				"fontStyle": "italic"
+			}
+		},
+		{
+			"scope": ["variable.other", "variable.language", "variable.function", "variable.argument"],
+			"settings": {
+				"foreground": "#4E5377"
+			}
+		},
+		{
+			"scope": ["variable.parameter"],
+			"settings": {
+				"foreground": "#77AAB3"
+			}
+		}
+	]
+}

From 31e8284c69800ba24aa3ebe6578e9cb5b2bb62fd Mon Sep 17 00:00:00 2001
From: Hunter Johnston <johnstonhuntera@gmail.com>
Date: Tue, 21 Nov 2023 14:21:52 -0500
Subject: [PATCH 101/217] fixes

---
 src/components/demos/alert-dialog-demo.svelte |   6 +-
 src/components/demos/button-demo.svelte       |   6 +-
 src/components/demos/dialog-demo.svelte       |   4 +-
 .../demos/dropdown-menu-demo.svelte           |   8 +-
 src/components/demos/select-demo.svelte       |   2 +-
 src/components/demos/tabs-demo.svelte         | 242 +++++++++---------
 src/components/demos/tooltip-demo.svelte      |   3 +-
 src/styles/themes/serendipity-midnight.json   |  10 +-
 src/styles/themes/serendipity-morning.json    |  10 +-
 9 files changed, 153 insertions(+), 138 deletions(-)

diff --git a/src/components/demos/alert-dialog-demo.svelte b/src/components/demos/alert-dialog-demo.svelte
index 0c56d138f..19eb2e973 100644
--- a/src/components/demos/alert-dialog-demo.svelte
+++ b/src/components/demos/alert-dialog-demo.svelte
@@ -8,7 +8,7 @@
 	<AlertDialog.Trigger
 		class="inline-flex h-12 items-center
 	justify-center whitespace-nowrap rounded-input bg-dark px-[21px]
-	text-[15px] font-semibold text-background shadow-mini ring-dark ring-offset-background transition-colors hover:bg-foreground/80 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-dark focus-visible:ring-offset-2 focus-visible:ring-offset-background active:scale-98"
+	text-[15px] font-semibold text-background shadow-mini ring-dark ring-offset-background transition-all hover:bg-dark/95 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-dark focus-visible:ring-offset-2 focus-visible:ring-offset-background active:scale-98"
 	>
 		Subscribe
 	</AlertDialog.Trigger>
@@ -33,11 +33,11 @@
 			</div>
 			<div class="flex w-full items-center justify-center gap-2">
 				<AlertDialog.Cancel
-					class="inline-flex h-input w-full items-center justify-center rounded-input bg-muted text-[15px] font-medium shadow-mini focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground focus-visible:ring-offset-2 focus-visible:ring-offset-background active:scale-98"
+					class="inline-flex h-input w-full items-center justify-center rounded-input bg-muted text-[15px] font-medium shadow-mini transition-all hover:bg-muted/95 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground focus-visible:ring-offset-2 focus-visible:ring-offset-background active:scale-98"
 					>Cancel</AlertDialog.Cancel
 				>
 				<AlertDialog.Action
-					class="inline-flex h-input w-full items-center justify-center rounded-input bg-dark text-[15px] font-semibold text-background shadow-mini focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-dark focus-visible:ring-offset-2 focus-visible:ring-offset-background active:scale-98"
+					class="inline-flex h-input w-full items-center justify-center rounded-input bg-dark text-[15px] font-semibold text-background shadow-mini transition-all hover:bg-dark/95 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-dark focus-visible:ring-offset-2 focus-visible:ring-offset-background active:scale-98"
 					>Continue</AlertDialog.Action
 				>
 			</div>
diff --git a/src/components/demos/button-demo.svelte b/src/components/demos/button-demo.svelte
index 59eb152c6..759809d2c 100644
--- a/src/components/demos/button-demo.svelte
+++ b/src/components/demos/button-demo.svelte
@@ -3,9 +3,9 @@
 </script>
 
 <Button.Root
-	class="hover:button-gradient inline-flex h-12 items-center justify-center rounded-input
-	bg-dark px-[21px] text-[15px] font-semibold text-background
-	shadow-mini transition-all active:scale-98"
+	class="inline-flex h-12 items-center justify-center rounded-input bg-dark
+	px-[21px] text-[15px] font-semibold text-background shadow-mini
+	transition-all hover:bg-dark/95 active:scale-98 "
 >
 	Unlimited
 </Button.Root>
diff --git a/src/components/demos/dialog-demo.svelte b/src/components/demos/dialog-demo.svelte
index e85767d57..7a0d71c6c 100644
--- a/src/components/demos/dialog-demo.svelte
+++ b/src/components/demos/dialog-demo.svelte
@@ -9,7 +9,7 @@
 	<Dialog.Trigger
 		class="inline-flex h-12 items-center
 	justify-center whitespace-nowrap rounded-input bg-dark px-[21px]
-	text-[15px] font-semibold text-background shadow-mini  transition-colors hover:bg-foreground/80 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground focus-visible:ring-offset-2 focus-visible:ring-offset-background active:scale-98"
+	text-[15px] font-semibold text-background shadow-mini transition-colors hover:bg-dark/95 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground focus-visible:ring-offset-2 focus-visible:ring-offset-background active:scale-98"
 	>
 		New API key
 	</Dialog.Trigger>
@@ -50,7 +50,7 @@
 			</div>
 			<div class="flex w-full justify-end">
 				<Dialog.Close
-					class="hover:button-gradient inline-flex h-input items-center justify-center rounded-input bg-dark px-[50px] text-[15px] font-semibold text-background shadow-mini focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-dark focus-visible:ring-offset-2 focus-visible:ring-offset-background active:scale-98"
+					class="inline-flex h-input items-center justify-center rounded-input bg-dark px-[50px] text-[15px] font-semibold text-background shadow-mini hover:bg-dark/95 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-dark focus-visible:ring-offset-2 focus-visible:ring-offset-background active:scale-98"
 				>
 					Save
 				</Dialog.Close>
diff --git a/src/components/demos/dropdown-menu-demo.svelte b/src/components/demos/dropdown-menu-demo.svelte
index 83fe4bb81..522dca6e7 100644
--- a/src/components/demos/dropdown-menu-demo.svelte
+++ b/src/components/demos/dropdown-menu-demo.svelte
@@ -14,7 +14,7 @@
 
 <DropdownMenu.Root>
 	<DropdownMenu.Trigger
-		class="border-input inline-flex h-10 w-10 items-center justify-center rounded-full border bg-background text-sm font-medium text-foreground shadow-btn focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground focus-visible:ring-offset-2 focus-visible:ring-offset-background active:scale-98"
+		class="border-input inline-flex h-10 w-10 items-center justify-center rounded-full border bg-background text-sm font-medium text-foreground shadow-btn transition-all hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground focus-visible:ring-offset-2 focus-visible:ring-offset-background active:scale-98"
 	>
 		<DotsThree class="h-6 w-6 text-foreground" />
 	</DropdownMenu.Trigger>
@@ -131,7 +131,7 @@
 							class="aspect-square h-full w-full"
 						/>
 						<Avatar.Fallback
-							class="flex h-full w-full items-center justify-center rounded-full bg-muted"
+							class="flex h-full w-full items-center justify-center rounded-full bg-muted text-xs"
 							>PS</Avatar.Fallback
 						>
 					</Avatar.Root>
@@ -149,7 +149,7 @@
 							class="aspect-square h-full w-full"
 						/>
 						<Avatar.Fallback
-							class="flex h-full w-full items-center justify-center rounded-full bg-muted"
+							class="flex h-full w-full items-center justify-center rounded-full bg-muted text-xs"
 							>CK</Avatar.Fallback
 						>
 					</Avatar.Root>
@@ -167,7 +167,7 @@
 							class="aspect-square h-full w-full"
 						/>
 						<Avatar.Fallback
-							class="flex h-full w-full items-center justify-center rounded-full bg-muted"
+							class="flex h-full w-full items-center justify-center rounded-full bg-muted text-xs"
 							>TL</Avatar.Fallback
 						>
 					</Avatar.Root>
diff --git a/src/components/demos/select-demo.svelte b/src/components/demos/select-demo.svelte
index 37122dd2d..4253338d9 100644
--- a/src/components/demos/select-demo.svelte
+++ b/src/components/demos/select-demo.svelte
@@ -14,7 +14,7 @@
 
 <Select.Root>
 	<Select.Trigger
-		class="inline-flex h-input w-[180px] items-center rounded-card-sm border border-dark-10 bg-background px-4 text-sm transition-colors placeholder:text-foreground-alt/50 focus:outline-none focus-visible:ring-2 focus-visible:ring-foreground focus-visible:ring-offset-2 focus-visible:ring-offset-background"
+		class="inline-flex h-input w-[180px] items-center rounded-card-sm border border-dark-10 bg-background px-4 text-sm transition-all placeholder:text-foreground-alt/50 hover:bg-muted focus:outline-none focus-visible:ring-2 focus-visible:ring-foreground focus-visible:ring-offset-2 focus-visible:ring-offset-background active:scale-98"
 	>
 		<Select.Value
 			class="text-sm font-medium"
diff --git a/src/components/demos/tabs-demo.svelte b/src/components/demos/tabs-demo.svelte
index e0cfc01ff..3977558f5 100644
--- a/src/components/demos/tabs-demo.svelte
+++ b/src/components/demos/tabs-demo.svelte
@@ -3,132 +3,146 @@
 	import { LockKeyOpen } from "phosphor-svelte";
 </script>
 
-<Tabs.Root
-	value="login"
-	class="w-[428px] rounded-card border border-muted bg-background p-6 shadow-card"
->
-	<Tabs.List
-		class="grid w-full grid-cols-2 gap-1 rounded-[9px] bg-dark-4 p-1 shadow-mini-inset"
+<div class="pt-6">
+	<Tabs.Root
+		value="login"
+		class="w-[428px] rounded-card border border-muted bg-background p-6 shadow-card"
 	>
-		<Tabs.Trigger
-			value="login"
-			class="h-8 rounded-[7px] bg-transparent py-2 text-sm font-semibold leading-[0.01em] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground focus-visible:ring-offset-2 focus-visible:ring-offset-background data-[state=active]:bg-white data-[state=active]:shadow-mini dark:data-[state=active]:bg-background"
-			>Login</Tabs.Trigger
+		<Tabs.List
+			class="grid w-full grid-cols-2 gap-1 rounded-[9px] bg-dark-4 p-1 shadow-mini-inset"
 		>
-		<Tabs.Trigger
-			value="register"
-			class="h-8 rounded-[7px] bg-transparent py-2 text-sm font-semibold leading-[0.01em] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground focus-visible:ring-offset-2 focus-visible:ring-offset-background data-[state=active]:bg-white data-[state=active]:shadow-mini dark:data-[state=active]:bg-background"
-			>Register</Tabs.Trigger
-		>
-	</Tabs.List>
-	<Tabs.Content value="login" class="pt-6 focus-visible:outline-none">
-		<div class="flex flex-col">
-			<h4 class="text-[19px] font-semibold leading-none tracking-[-0.01em]">
-				Login to your account
-			</h4>
-			<p class="text-sm font-medium text-muted-foreground">
-				to access all your data
-			</p>
-		</div>
-		<div class="flex flex-col gap-4 pt-5">
-			<div class="flex flex-col gap-1">
-				<Label.Root for="username" class="text-sm font-medium text-foreground">
-					Username
-				</Label.Root>
-				<input
-					type="text"
-					id="username"
-					placeholder="name@example.com"
-					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"
-				/>
+			<Tabs.Trigger
+				value="login"
+				class="h-8 rounded-[7px] bg-transparent py-2 text-sm font-semibold leading-[0.01em] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground focus-visible:ring-offset-2 focus-visible:ring-offset-background data-[state=active]:bg-white data-[state=active]:shadow-mini dark:data-[state=active]:bg-background"
+				>Login</Tabs.Trigger
+			>
+			<Tabs.Trigger
+				value="register"
+				class="h-8 rounded-[7px] bg-transparent py-2 text-sm font-semibold leading-[0.01em] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground focus-visible:ring-offset-2 focus-visible:ring-offset-background data-[state=active]:bg-white data-[state=active]:shadow-mini dark:data-[state=active]:bg-background"
+				>Register</Tabs.Trigger
+			>
+		</Tabs.List>
+		<Tabs.Content value="login" class="pt-6 focus-visible:outline-none">
+			<div class="flex flex-col">
+				<h4 class="text-[19px] font-semibold leading-none tracking-[-0.01em]">
+					Login to your account
+				</h4>
+				<p class="text-sm font-medium text-muted-foreground">
+					to access all your data
+				</p>
 			</div>
-			<div class="flex flex-col gap-1">
-				<Label.Root for="password" class="text-sm font-medium text-foreground">
-					Password
-				</Label.Root>
-				<div class="relative w-full">
+			<div class="flex flex-col gap-4 pt-5">
+				<div class="flex flex-col gap-1">
+					<Label.Root
+						for="username"
+						class="text-sm font-medium text-foreground"
+					>
+						Username
+					</Label.Root>
 					<input
-						id="password"
+						type="text"
+						id="username"
+						placeholder="name@example.com"
 						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"
-						placeholder="super_secret"
-						type="password"
-						autocomplete="off"
-					/>
-					<LockKeyOpen
-						class="absolute right-4 top-[14px] h-[22px] w-[22px] text-dark/30"
 					/>
 				</div>
+				<div class="flex flex-col gap-1">
+					<Label.Root
+						for="password"
+						class="text-sm font-medium text-foreground"
+					>
+						Password
+					</Label.Root>
+					<div class="relative w-full">
+						<input
+							id="password"
+							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"
+							placeholder="super_secret"
+							type="password"
+							autocomplete="off"
+						/>
+						<LockKeyOpen
+							class="absolute right-4 top-[14px] h-[22px] w-[22px] text-dark/30"
+						/>
+					</div>
+				</div>
 			</div>
-		</div>
-		<Button.Root
-			class="hover:button-gradient mt-[22px] inline-flex h-input w-full items-center justify-center rounded-input bg-dark px-[50px] text-[15px] font-semibold text-background shadow-mini focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-dark focus-visible:ring-offset-2 focus-visible:ring-offset-background"
-		>
-			Login
-		</Button.Root>
-	</Tabs.Content>
-	<Tabs.Content value="register" class="pt-6 focus-visible:outline-none">
-		<div class="flex flex-col">
-			<h4 class="text-[19px] font-semibold leading-none tracking-[-0.01em]">
-				Register for an account
-			</h4>
-			<p class="text-sm font-medium text-muted-foreground">
-				to start using all our features
-			</p>
-		</div>
-		<div class="flex flex-col gap-4 pt-5">
-			<div class="flex flex-col gap-1">
-				<Label.Root for="username" class="text-sm font-medium text-foreground">
-					Username
-				</Label.Root>
-				<input
-					type="text"
-					id="username"
-					placeholder="name@example.com"
-					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"
-				/>
+			<Button.Root
+				class="hover:button-gradient mt-[22px] inline-flex h-input w-full items-center justify-center rounded-input bg-dark px-[50px] text-[15px] font-semibold text-background shadow-mini focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-dark focus-visible:ring-offset-2 focus-visible:ring-offset-background"
+			>
+				Login
+			</Button.Root>
+		</Tabs.Content>
+		<Tabs.Content value="register" class="pt-6 focus-visible:outline-none">
+			<div class="flex flex-col">
+				<h4 class="text-[19px] font-semibold leading-none tracking-[-0.01em]">
+					Register for an account
+				</h4>
+				<p class="text-sm font-medium text-muted-foreground">
+					to start using all our features
+				</p>
 			</div>
-			<div class="flex flex-col gap-1">
-				<Label.Root for="password" class="text-sm font-medium text-foreground">
-					Password
-				</Label.Root>
-				<div class="relative w-full">
+			<div class="flex flex-col gap-4 pt-5">
+				<div class="flex flex-col gap-1">
+					<Label.Root
+						for="username"
+						class="text-sm font-medium text-foreground"
+					>
+						Username
+					</Label.Root>
 					<input
-						id="password"
+						type="text"
+						id="username"
+						placeholder="name@example.com"
 						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"
-						placeholder="super_secret"
-						type="password"
-						autocomplete="off"
-					/>
-					<LockKeyOpen
-						class="absolute right-4 top-[14px] h-[22px] w-[22px] text-dark/30"
 					/>
 				</div>
-			</div>
-			<div class="flex flex-col gap-1">
-				<Label.Root
-					for="passwordConfirm"
-					class="text-sm font-medium text-foreground"
-				>
-					Confirm Password
-				</Label.Root>
-				<div class="relative w-full">
-					<input
-						id="passwordConfirm"
-						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"
-						placeholder="super_secret"
-						type="password"
-						autocomplete="off"
-					/>
-					<LockKeyOpen
-						class="absolute right-4 top-[14px] h-[22px] w-[22px] text-dark/30"
-					/>
+				<div class="flex flex-col gap-1">
+					<Label.Root
+						for="password"
+						class="text-sm font-medium text-foreground"
+					>
+						Password
+					</Label.Root>
+					<div class="relative w-full">
+						<input
+							id="password"
+							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"
+							placeholder="super_secret"
+							type="password"
+							autocomplete="off"
+						/>
+						<LockKeyOpen
+							class="absolute right-4 top-[14px] h-[22px] w-[22px] text-dark/30"
+						/>
+					</div>
+				</div>
+				<div class="flex flex-col gap-1">
+					<Label.Root
+						for="passwordConfirm"
+						class="text-sm font-medium text-foreground"
+					>
+						Confirm Password
+					</Label.Root>
+					<div class="relative w-full">
+						<input
+							id="passwordConfirm"
+							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"
+							placeholder="super_secret"
+							type="password"
+							autocomplete="off"
+						/>
+						<LockKeyOpen
+							class="absolute right-4 top-[14px] h-[22px] w-[22px] text-dark/30"
+						/>
+					</div>
 				</div>
 			</div>
-		</div>
-		<Button.Root
-			class="hover:button-gradient mt-[22px] inline-flex h-input w-full items-center justify-center rounded-input bg-dark px-[50px] text-[15px] font-semibold text-background shadow-mini focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-dark focus-visible:ring-offset-2 focus-visible:ring-offset-background"
-		>
-			Login
-		</Button.Root>
-	</Tabs.Content>
-</Tabs.Root>
+			<Button.Root
+				class="hover:button-gradient mt-[22px] inline-flex h-input w-full items-center justify-center rounded-input bg-dark px-[50px] text-[15px] font-semibold text-background shadow-mini focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-dark focus-visible:ring-offset-2 focus-visible:ring-offset-background"
+			>
+				Login
+			</Button.Root>
+		</Tabs.Content>
+	</Tabs.Root>
+</div>
diff --git a/src/components/demos/tooltip-demo.svelte b/src/components/demos/tooltip-demo.svelte
index 3e68fd0ac..b4849bbf8 100644
--- a/src/components/demos/tooltip-demo.svelte
+++ b/src/components/demos/tooltip-demo.svelte
@@ -7,7 +7,7 @@
 	<Tooltip.Trigger
 		class="inline-flex h-12 items-center
 	justify-center whitespace-nowrap rounded-input bg-dark px-[21px]
-	text-[15px] font-semibold text-background shadow-mini ring-dark ring-offset-background transition-colors hover:bg-foreground/90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-dark focus-visible:ring-offset-2 focus-visible:ring-offset-background"
+	text-[15px] font-semibold text-background shadow-mini ring-dark ring-offset-background transition-all hover:bg-dark/95 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-dark focus-visible:ring-offset-2 focus-visible:ring-offset-background active:scale-98"
 	>
 		Hover me
 	</Tooltip.Trigger>
@@ -15,6 +15,7 @@
 		class="z-20 flex items-center justify-center rounded-input border border-muted bg-background p-3 text-sm font-medium shadow-mini outline-none"
 		transition={flyAndScale}
 		transitionConfig={{ y: 8, duration: 150 }}
+		sideOffset={8}
 	>
 		It doesn't get much better than bits.
 	</Tooltip.Content>
diff --git a/src/styles/themes/serendipity-midnight.json b/src/styles/themes/serendipity-midnight.json
index e66bba2e9..cc17dacf9 100644
--- a/src/styles/themes/serendipity-midnight.json
+++ b/src/styles/themes/serendipity-midnight.json
@@ -463,7 +463,7 @@
 			"scope": ["comment"],
 			"settings": {
 				"foreground": "#6B6D7C",
-				"fontStyle": "italic"
+				"fontStyle": "normal"
 			}
 		},
 		{
@@ -499,7 +499,7 @@
 			"scope": ["entity.other.attribute-name", "entity.other.inherited-class"],
 			"settings": {
 				"foreground": "#9ccfd8",
-				"fontStyle": "italic"
+				"fontStyle": "normal"
 			}
 		},
 		{
@@ -536,7 +536,7 @@
 			"scope": "meta.directive.vue",
 			"settings": {
 				"foreground": "#9ccfd8",
-				"fontStyle": "italic"
+				"fontStyle": "normal"
 			}
 		},
 		{
@@ -609,14 +609,14 @@
 			"scope": ["support.function"],
 			"settings": {
 				"foreground": "#ee8679",
-				"fontStyle": "italic"
+				"fontStyle": "normal"
 			}
 		},
 		{
 			"scope": ["variable"],
 			"settings": {
 				"foreground": "#F8D2C9",
-				"fontStyle": "italic"
+				"fontStyle": "normal"
 			}
 		},
 		{
diff --git a/src/styles/themes/serendipity-morning.json b/src/styles/themes/serendipity-morning.json
index 96e080dd7..861174eb9 100644
--- a/src/styles/themes/serendipity-morning.json
+++ b/src/styles/themes/serendipity-morning.json
@@ -462,7 +462,7 @@
 			"scope": ["comment"],
 			"settings": {
 				"foreground": "#8388AD",
-				"fontStyle": "italic"
+				"fontStyle": "normal"
 			}
 		},
 		{
@@ -498,7 +498,7 @@
 			"scope": ["entity.other.attribute-name", "entity.other.inherited-class"],
 			"settings": {
 				"foreground": "#77AAB3",
-				"fontStyle": "italic"
+				"fontStyle": "normal"
 			}
 		},
 		{
@@ -535,7 +535,7 @@
 			"scope": "meta.directive.vue",
 			"settings": {
 				"foreground": "#77AAB3",
-				"fontStyle": "italic"
+				"fontStyle": "normal"
 			}
 		},
 		{
@@ -608,14 +608,14 @@
 			"scope": ["support.function"],
 			"settings": {
 				"foreground": "#D26A5D",
-				"fontStyle": "italic"
+				"fontStyle": "normal"
 			}
 		},
 		{
 			"scope": ["variable"],
 			"settings": {
 				"foreground": "#F19A8E",
-				"fontStyle": "italic"
+				"fontStyle": "normal"
 			}
 		},
 		{

From 756c1a11590a42df4606648999ac51cfe8fd7e58 Mon Sep 17 00:00:00 2001
From: Hunter Johnston <johnstonhuntera@gmail.com>
Date: Tue, 21 Nov 2023 14:23:35 -0500
Subject: [PATCH 102/217] more cleanup

---
 src/components/demos/popover-demo.svelte | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/demos/popover-demo.svelte b/src/components/demos/popover-demo.svelte
index c5afaae9a..d91d04091 100644
--- a/src/components/demos/popover-demo.svelte
+++ b/src/components/demos/popover-demo.svelte
@@ -13,7 +13,7 @@
 	<Popover.Trigger
 		class="inline-flex h-12 items-center
 	justify-center whitespace-nowrap rounded-input bg-dark px-[21px]
-	text-[15px] font-semibold text-background shadow-mini ring-dark ring-offset-background transition-colors hover:bg-foreground/90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-dark focus-visible:ring-offset-2 focus-visible:ring-offset-background active:scale-98"
+	text-[15px] font-semibold text-background shadow-mini transition-all hover:bg-dark/95 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-dark focus-visible:ring-offset-2 focus-visible:ring-offset-background active:scale-98"
 	>
 		Manage Cookies
 	</Popover.Trigger>
@@ -108,7 +108,7 @@
 			</div>
 		</div>
 		<Button.Root
-			class="inline-flex h-input w-full items-center justify-center rounded-input bg-dark text-[15px] font-semibold text-background shadow-mini focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-dark focus-visible:ring-offset-2 focus-visible:ring-offset-background active:scale-98"
+			class="inline-flex h-input w-full items-center justify-center rounded-input bg-dark text-[15px] font-semibold text-background shadow-mini transition-all hover:bg-dark/95 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-dark focus-visible:ring-offset-2 focus-visible:ring-offset-background active:scale-98"
 		>
 			Save settings
 		</Button.Root>

From a7d96333fff3d98d81b5924231a45ce1b127b9ff Mon Sep 17 00:00:00 2001
From: Hunter Johnston <johnstonhuntera@gmail.com>
Date: Tue, 21 Nov 2023 14:42:32 -0500
Subject: [PATCH 103/217] toggle demos

---
 src/components/demos/toggle-demo.svelte            | 13 ++++++++-----
 src/components/demos/toggle-group-demo.svelte      | 11 +++++------
 src/components/icons/aria.svelte                   |  2 +-
 src/components/icons/arrow-square-out.svelte       | 14 --------------
 src/components/icons/bold.svelte                   | 14 --------------
 src/components/icons/book-open.svelte              |  9 ---------
 src/components/icons/caret-up-down.svelte          | 14 --------------
 src/components/icons/check.svelte                  | 14 --------------
 src/components/icons/code.svelte                   |  9 ---------
 src/components/icons/copy-simple.svelte            |  9 ---------
 src/components/icons/github.svelte                 |  3 +--
 src/components/icons/index.ts                      | 14 --------------
 src/components/icons/moon-stars.svelte             | 14 --------------
 src/components/icons/pnpm.svelte                   |  3 +--
 src/components/icons/rocket-launch.svelte          |  9 ---------
 src/components/icons/square-half.svelte            | 10 ----------
 src/components/icons/sun-dim.svelte                | 14 --------------
 src/components/icons/sun.svelte                    | 14 --------------
 src/components/icons/tailwind.svelte               |  3 +--
 src/components/icons/x-com.svelte                  |  2 +-
 src/components/icons/yarn.svelte                   |  3 +--
 src/components/light-switch.svelte                 |  2 +-
 src/components/navigation/mobile-nav.svelte        |  2 +-
 .../navigation/sidebar-nav-main-items.svelte       |  2 +-
 src/lib/bits/context-menu/ctx.ts                   |  1 +
 src/lib/bits/context-menu/types.ts                 |  6 +++---
 src/lib/bits/dropdown-menu/types.ts                |  6 +++---
 src/lib/bits/floating/_types.ts                    |  7 +++++++
 src/lib/bits/floating/helpers.ts                   |  2 ++
 src/lib/bits/menubar/types.ts                      |  6 +++---
 src/lib/bits/popover/ctx.ts                        |  1 +
 31 files changed, 42 insertions(+), 191 deletions(-)
 delete mode 100644 src/components/icons/arrow-square-out.svelte
 delete mode 100644 src/components/icons/bold.svelte
 delete mode 100644 src/components/icons/book-open.svelte
 delete mode 100644 src/components/icons/caret-up-down.svelte
 delete mode 100644 src/components/icons/check.svelte
 delete mode 100644 src/components/icons/code.svelte
 delete mode 100644 src/components/icons/copy-simple.svelte
 delete mode 100644 src/components/icons/moon-stars.svelte
 delete mode 100644 src/components/icons/rocket-launch.svelte
 delete mode 100644 src/components/icons/square-half.svelte
 delete mode 100644 src/components/icons/sun-dim.svelte
 delete mode 100644 src/components/icons/sun.svelte

diff --git a/src/components/demos/toggle-demo.svelte b/src/components/demos/toggle-demo.svelte
index c4b477792..564b91cb8 100644
--- a/src/components/demos/toggle-demo.svelte
+++ b/src/components/demos/toggle-demo.svelte
@@ -1,8 +1,11 @@
 <script lang="ts">
-	import { Bold } from "lucide-svelte";
-	import { Toggle } from "@/components/ui/toggle";
+	import { TextB } from "phosphor-svelte";
+	import { Toggle } from "$lib";
 </script>
 
-<Toggle aria-label="toggle bold">
-	<Bold class="h-4 w-4" />
-</Toggle>
+<Toggle.Root
+	aria-label="toggle bold"
+	class="inline-flex items-center justify-center rounded-[9px] bg-background transition-all sq-10 hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground focus-visible:ring-offset-2 focus-visible:ring-offset-background active:scale-98 data-[state=on]:bg-muted"
+>
+	<TextB class="h-6 w-6" />
+</Toggle.Root>
diff --git a/src/components/demos/toggle-group-demo.svelte b/src/components/demos/toggle-group-demo.svelte
index cf86b1b64..6e6985cde 100644
--- a/src/components/demos/toggle-group-demo.svelte
+++ b/src/components/demos/toggle-group-demo.svelte
@@ -1,24 +1,23 @@
 <script lang="ts">
 	import { ToggleGroup } from "$lib";
-	import { Bold, Italic } from "lucide-svelte";
-	import { toggleVariants } from "@/components/ui/toggle";
+	import { TextB, TextItalic } from "phosphor-svelte";
 
 	let value: string[] | undefined = undefined;
 </script>
 
 <ToggleGroup.Root bind:value type="multiple">
 	<ToggleGroup.Item
-		class={toggleVariants({ variant: "default" })}
 		aria-label="toggle bold"
 		value="bold"
+		class="inline-flex items-center justify-center rounded-[9px] bg-background transition-all sq-10 hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground focus-visible:ring-offset-2 focus-visible:ring-offset-background active:scale-98 data-[state=on]:bg-muted"
 	>
-		<Bold class="h-4 w-4" />
+		<TextB class="sq-6" />
 	</ToggleGroup.Item>
 	<ToggleGroup.Item
-		class={toggleVariants({ variant: "default" })}
 		aria-label="toggle italic"
 		value="italic"
+		class="inline-flex items-center justify-center rounded-[9px] bg-background transition-all sq-10 hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground focus-visible:ring-offset-2 focus-visible:ring-offset-background active:scale-98 data-[state=on]:bg-muted"
 	>
-		<Italic class="h-4 w-4" />
+		<TextItalic class="sq-6" />
 	</ToggleGroup.Item>
 </ToggleGroup.Root>
diff --git a/src/components/icons/aria.svelte b/src/components/icons/aria.svelte
index 1aebb1489..dbbbe6a5a 100644
--- a/src/components/icons/aria.svelte
+++ b/src/components/icons/aria.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import type { IconProps } from "lucide-svelte";
+	import type { IconProps } from "./index.js";
 	type $$Props = IconProps;
 </script>
 
diff --git a/src/components/icons/arrow-square-out.svelte b/src/components/icons/arrow-square-out.svelte
deleted file mode 100644
index ebde5fb8b..000000000
--- a/src/components/icons/arrow-square-out.svelte
+++ /dev/null
@@ -1,14 +0,0 @@
-<script lang="ts">
-	import type { IconProps } from "lucide-svelte";
-	type $$Props = IconProps;
-</script>
-
-<svg
-	xmlns="http://www.w3.org/2000/svg"
-	{...$$restProps}
-	fill="currentColor"
-	viewBox="0 0 256 256"
-	><path
-		d="M224,104a8,8,0,0,1-16,0V59.32l-66.33,66.34a8,8,0,0,1-11.32-11.32L196.68,48H152a8,8,0,0,1,0-16h64a8,8,0,0,1,8,8Zm-40,24a8,8,0,0,0-8,8v72H48V80h72a8,8,0,0,0,0-16H48A16,16,0,0,0,32,80V208a16,16,0,0,0,16,16H176a16,16,0,0,0,16-16V136A8,8,0,0,0,184,128Z"
-	/></svg
->
diff --git a/src/components/icons/bold.svelte b/src/components/icons/bold.svelte
deleted file mode 100644
index 8d38f151c..000000000
--- a/src/components/icons/bold.svelte
+++ /dev/null
@@ -1,14 +0,0 @@
-<script lang="ts">
-	import type { IconProps } from "lucide-svelte";
-	type $$Props = IconProps;
-</script>
-
-<svg
-	xmlns="http://www.w3.org/2000/svg"
-	fill="currentcolor"
-	{...$$restProps}
-	viewBox="0 0 256 256"
-	><path
-		d="M170.48,115.7A44,44,0,0,0,140,40H72a8,8,0,0,0-8,8V200a8,8,0,0,0,8,8h80a48,48,0,0,0,18.48-92.3ZM80,56h60a28,28,0,0,1,0,56H80Zm72,136H80V128h72a32,32,0,0,1,0,64Z"
-	/></svg
->
diff --git a/src/components/icons/book-open.svelte b/src/components/icons/book-open.svelte
deleted file mode 100644
index b29f51c0c..000000000
--- a/src/components/icons/book-open.svelte
+++ /dev/null
@@ -1,9 +0,0 @@
-<svg
-	xmlns="http://www.w3.org/2000/svg"
-	fill="currentColor"
-	{...$$restProps}
-	viewBox="0 0 256 256"
-	><path
-		d="M224,48H160a40,40,0,0,0-32,16A40,40,0,0,0,96,48H32A16,16,0,0,0,16,64V192a16,16,0,0,0,16,16H96a24,24,0,0,1,24,24,8,8,0,0,0,16,0,24,24,0,0,1,24-24h64a16,16,0,0,0,16-16V64A16,16,0,0,0,224,48ZM96,192H32V64H96a24,24,0,0,1,24,24V200A39.81,39.81,0,0,0,96,192Zm128,0H160a39.81,39.81,0,0,0-24,8V88a24,24,0,0,1,24-24h64Z"
-	/></svg
->
diff --git a/src/components/icons/caret-up-down.svelte b/src/components/icons/caret-up-down.svelte
deleted file mode 100644
index bf8e5063d..000000000
--- a/src/components/icons/caret-up-down.svelte
+++ /dev/null
@@ -1,14 +0,0 @@
-<script lang="ts">
-	import type { IconProps } from ".";
-	type $$Props = IconProps;
-</script>
-
-<svg
-	xmlns="http://www.w3.org/2000/svg"
-	{...$$restProps}
-	fill="currentColor"
-	viewBox="0 0 256 256"
-	><path
-		d="M181.66,170.34a8,8,0,0,1,0,11.32l-48,48a8,8,0,0,1-11.32,0l-48-48a8,8,0,0,1,11.32-11.32L128,212.69l42.34-42.35A8,8,0,0,1,181.66,170.34Zm-96-84.68L128,43.31l42.34,42.35a8,8,0,0,0,11.32-11.32l-48-48a8,8,0,0,0-11.32,0l-48,48A8,8,0,0,0,85.66,85.66Z"
-	/></svg
->
diff --git a/src/components/icons/check.svelte b/src/components/icons/check.svelte
deleted file mode 100644
index a6275e320..000000000
--- a/src/components/icons/check.svelte
+++ /dev/null
@@ -1,14 +0,0 @@
-<script lang="ts">
-	import type { IconProps } from ".";
-	type $$Props = IconProps;
-</script>
-
-<svg
-	xmlns="http://www.w3.org/2000/svg"
-	{...$$restProps}
-	fill="currentColor"
-	viewBox="0 0 256 256"
-	><path
-		d="M229.66,77.66l-128,128a8,8,0,0,1-11.32,0l-56-56a8,8,0,0,1,11.32-11.32L96,188.69,218.34,66.34a8,8,0,0,1,11.32,11.32Z"
-	/></svg
->
diff --git a/src/components/icons/code.svelte b/src/components/icons/code.svelte
deleted file mode 100644
index 5202a8a0c..000000000
--- a/src/components/icons/code.svelte
+++ /dev/null
@@ -1,9 +0,0 @@
-<svg
-	xmlns="http://www.w3.org/2000/svg"
-	fill="currentColor"
-	{...$$restProps}
-	viewBox="0 0 256 256"
-	><path
-		d="M69.12,94.15,28.5,128l40.62,33.85a8,8,0,1,1-10.24,12.29l-48-40a8,8,0,0,1,0-12.29l48-40a8,8,0,0,1,10.24,12.3Zm176,27.7-48-40a8,8,0,1,0-10.24,12.3L227.5,128l-40.62,33.85a8,8,0,1,0,10.24,12.29l48-40a8,8,0,0,0,0-12.29ZM162.73,32.48a8,8,0,0,0-10.25,4.79l-64,176a8,8,0,0,0,4.79,10.26A8.14,8.14,0,0,0,96,224a8,8,0,0,0,7.52-5.27l64-176A8,8,0,0,0,162.73,32.48Z"
-	/></svg
->
diff --git a/src/components/icons/copy-simple.svelte b/src/components/icons/copy-simple.svelte
deleted file mode 100644
index 268708d9e..000000000
--- a/src/components/icons/copy-simple.svelte
+++ /dev/null
@@ -1,9 +0,0 @@
-<svg
-	xmlns="http://www.w3.org/2000/svg"
-	{...$$restProps}
-	fill="currentColor"
-	viewBox="0 0 256 256"
-	><path
-		d="M184,64H40a8,8,0,0,0-8,8V216a8,8,0,0,0,8,8H184a8,8,0,0,0,8-8V72A8,8,0,0,0,184,64Zm-8,144H48V80H176ZM224,40V184a8,8,0,0,1-16,0V48H72a8,8,0,0,1,0-16H216A8,8,0,0,1,224,40Z"
-	/></svg
->
diff --git a/src/components/icons/github.svelte b/src/components/icons/github.svelte
index 96cdaa7ec..3957e401d 100644
--- a/src/components/icons/github.svelte
+++ b/src/components/icons/github.svelte
@@ -1,6 +1,5 @@
 <script lang="ts">
-	import type { IconProps } from "lucide-svelte";
-
+	import type { IconProps } from "./index.js";
 	type $$Props = IconProps;
 </script>
 
diff --git a/src/components/icons/index.ts b/src/components/icons/index.ts
index 6da7cc578..dedb01ee7 100644
--- a/src/components/icons/index.ts
+++ b/src/components/icons/index.ts
@@ -1,9 +1,5 @@
-import type { Icon as LucideIcon } from "lucide-svelte";
 import type { HTMLAttributes } from "svelte/elements";
 
-export { default as SunDim } from "./sun-dim.svelte";
-export { default as Sun } from "./sun.svelte";
-export { default as MoonStars } from "./moon-stars.svelte";
 export { default as GitHub } from "./github.svelte";
 export { default as Xcom } from "./x-com.svelte";
 export { default as Tailwind } from "./tailwind.svelte";
@@ -11,18 +7,8 @@ export { default as Aria } from "./aria.svelte";
 export { default as Npm } from "./npm.svelte";
 export { default as Pnpm } from "./pnpm.svelte";
 export { default as Yarn } from "./yarn.svelte";
-export { default as Check } from "./check.svelte";
-export { default as CopySimple } from "./copy-simple.svelte";
-export { default as ArrowSquareOut } from "./arrow-square-out.svelte";
-export { default as CaretUpDown } from "./caret-up-down.svelte";
-export { default as SquareHalf } from "./square-half.svelte";
-export { default as BookOpen } from "./book-open.svelte";
-export { default as Code } from "./code.svelte";
-export { default as RocketLaunch } from "./rocket-launch.svelte";
 export { default as Logo } from "./logo.svelte";
 
 export type IconProps = Partial<HTMLAttributes<SVGElement>> & {
 	class?: string;
 };
-
-export type Icon = LucideIcon;
diff --git a/src/components/icons/moon-stars.svelte b/src/components/icons/moon-stars.svelte
deleted file mode 100644
index a2a6a5cb8..000000000
--- a/src/components/icons/moon-stars.svelte
+++ /dev/null
@@ -1,14 +0,0 @@
-<script lang="ts">
-	import type { IconProps } from ".";
-	type $$Props = IconProps;
-</script>
-
-<svg
-	xmlns="http://www.w3.org/2000/svg"
-	fill="currentColor"
-	{...$$restProps}
-	viewBox="0 0 256 256"
-	><path
-		d="M240,96a8,8,0,0,1-8,8H216v16a8,8,0,0,1-16,0V104H184a8,8,0,0,1,0-16h16V72a8,8,0,0,1,16,0V88h16A8,8,0,0,1,240,96ZM144,56h8v8a8,8,0,0,0,16,0V56h8a8,8,0,0,0,0-16h-8V32a8,8,0,0,0-16,0v8h-8a8,8,0,0,0,0,16Zm72.77,97a8,8,0,0,1,1.43,8A96,96,0,1,1,95.07,37.8a8,8,0,0,1,10.6,9.06A88.07,88.07,0,0,0,209.14,150.33,8,8,0,0,1,216.77,153Zm-19.39,14.88c-1.79.09-3.59.14-5.38.14A104.11,104.11,0,0,1,88,64c0-1.79,0-3.59.14-5.38A80,80,0,1,0,197.38,167.86Z"
-	/></svg
->
diff --git a/src/components/icons/pnpm.svelte b/src/components/icons/pnpm.svelte
index 20a0941d6..03a326518 100644
--- a/src/components/icons/pnpm.svelte
+++ b/src/components/icons/pnpm.svelte
@@ -1,6 +1,5 @@
 <script lang="ts">
-	import type { IconProps } from "lucide-svelte";
-
+	import type { IconProps } from "./index.js";
 	type $$Props = IconProps;
 </script>
 
diff --git a/src/components/icons/rocket-launch.svelte b/src/components/icons/rocket-launch.svelte
deleted file mode 100644
index f306ffbb0..000000000
--- a/src/components/icons/rocket-launch.svelte
+++ /dev/null
@@ -1,9 +0,0 @@
-<svg
-	xmlns="http://www.w3.org/2000/svg"
-	fill="currentColor"
-	{...$$restProps}
-	viewBox="0 0 256 256"
-	><path
-		d="M103.77,185.94C103.38,187.49,93.63,224,40,224a8,8,0,0,1-8-8c0-53.63,36.51-63.38,38.06-63.77a8,8,0,0,1,3.88,15.53c-.9.25-22.42,6.54-25.56,39.86C81.7,204.48,88,183,88.26,182a8,8,0,0,1,15.51,4Zm93-67.4L192,123.31v58.33A15.91,15.91,0,0,1,187.32,193L153,227.3A15.91,15.91,0,0,1,141.7,232a16.11,16.11,0,0,1-5.1-.83,15.94,15.94,0,0,1-10.78-12.92l-5.37-38.49L76.24,135.55l-38.47-5.37A16,16,0,0,1,28.7,103L63,68.68A15.91,15.91,0,0,1,74.36,64h58.33l4.77-4.77c26.68-26.67,58.83-27.82,71.41-27.07a16,16,0,0,1,15,15C224.6,59.71,223.45,91.86,196.78,118.54ZM40,114.34l37.15,5.18L116.69,80H74.36ZM91.32,128,128,164.68l57.45-57.45a76.46,76.46,0,0,0,22.42-59.16,76.65,76.65,0,0,0-59.11,22.47ZM176,139.31l-39.53,39.53L141.67,216,176,181.64Z"
-	/></svg
->
diff --git a/src/components/icons/square-half.svelte b/src/components/icons/square-half.svelte
deleted file mode 100644
index e4dc009a8..000000000
--- a/src/components/icons/square-half.svelte
+++ /dev/null
@@ -1,10 +0,0 @@
-<svg
-	xmlns="http://www.w3.org/2000/svg"
-	fill="currentColor"
-	{...$$restProps}
-	viewBox="0 0 256 256"
->
-	<path
-		d="M200,40H56A16,16,0,0,0,40,56V200a16,16,0,0,0,16,16H200a16,16,0,0,0,16-16V56A16,16,0,0,0,200,40Zm-64,80h64v16H136Zm0-16V88h64v16Zm0,48h64v16H136Zm64-80H136V56h64ZM56,56h64V200H56ZM200,200H136V184h64v16Z"
-	/>
-</svg>
diff --git a/src/components/icons/sun-dim.svelte b/src/components/icons/sun-dim.svelte
deleted file mode 100644
index 417b5695f..000000000
--- a/src/components/icons/sun-dim.svelte
+++ /dev/null
@@ -1,14 +0,0 @@
-<script lang="ts">
-	import type { IconProps } from ".";
-	type $$Props = IconProps;
-</script>
-
-<svg
-	xmlns="http://www.w3.org/2000/svg"
-	{...$$restProps}
-	fill="currentColor"
-	viewBox="0 0 256 256"
-	><path
-		d="M120,40V32a8,8,0,0,1,16,0v8a8,8,0,0,1-16,0Zm72,88a64,64,0,1,1-64-64A64.07,64.07,0,0,1,192,128Zm-16,0a48,48,0,1,0-48,48A48.05,48.05,0,0,0,176,128ZM58.34,69.66A8,8,0,0,0,69.66,58.34l-8-8A8,8,0,0,0,50.34,61.66Zm0,116.68-8,8a8,8,0,0,0,11.32,11.32l8-8a8,8,0,0,0-11.32-11.32ZM192,72a8,8,0,0,0,5.66-2.34l8-8a8,8,0,0,0-11.32-11.32l-8,8A8,8,0,0,0,192,72Zm5.66,114.34a8,8,0,0,0-11.32,11.32l8,8a8,8,0,0,0,11.32-11.32ZM40,120H32a8,8,0,0,0,0,16h8a8,8,0,0,0,0-16Zm88,88a8,8,0,0,0-8,8v8a8,8,0,0,0,16,0v-8A8,8,0,0,0,128,208Zm96-88h-8a8,8,0,0,0,0,16h8a8,8,0,0,0,0-16Z"
-	/></svg
->
diff --git a/src/components/icons/sun.svelte b/src/components/icons/sun.svelte
deleted file mode 100644
index 113077a2f..000000000
--- a/src/components/icons/sun.svelte
+++ /dev/null
@@ -1,14 +0,0 @@
-<script lang="ts">
-	import type { IconProps } from ".";
-	type $$Props = IconProps;
-</script>
-
-<svg
-	xmlns="http://www.w3.org/2000/svg"
-	fill="currentColor"
-	{...$$restProps}
-	viewBox="0 0 256 256"
-	><path
-		d="M120,40V16a8,8,0,0,1,16,0V40a8,8,0,0,1-16,0Zm72,88a64,64,0,1,1-64-64A64.07,64.07,0,0,1,192,128Zm-16,0a48,48,0,1,0-48,48A48.05,48.05,0,0,0,176,128ZM58.34,69.66A8,8,0,0,0,69.66,58.34l-16-16A8,8,0,0,0,42.34,53.66Zm0,116.68-16,16a8,8,0,0,0,11.32,11.32l16-16a8,8,0,0,0-11.32-11.32ZM192,72a8,8,0,0,0,5.66-2.34l16-16a8,8,0,0,0-11.32-11.32l-16,16A8,8,0,0,0,192,72Zm5.66,114.34a8,8,0,0,0-11.32,11.32l16,16a8,8,0,0,0,11.32-11.32ZM48,128a8,8,0,0,0-8-8H16a8,8,0,0,0,0,16H40A8,8,0,0,0,48,128Zm80,80a8,8,0,0,0-8,8v24a8,8,0,0,0,16,0V216A8,8,0,0,0,128,208Zm112-88H216a8,8,0,0,0,0,16h24a8,8,0,0,0,0-16Z"
-	/></svg
->
diff --git a/src/components/icons/tailwind.svelte b/src/components/icons/tailwind.svelte
index 65bae7ec6..d6ba2b9a1 100644
--- a/src/components/icons/tailwind.svelte
+++ b/src/components/icons/tailwind.svelte
@@ -1,6 +1,5 @@
 <script lang="ts">
-	import type { IconProps } from "lucide-svelte";
-
+	import type { IconProps } from "./index.js";
 	type $$Props = IconProps;
 </script>
 
diff --git a/src/components/icons/x-com.svelte b/src/components/icons/x-com.svelte
index 255d0e80c..1d7c4cc5c 100644
--- a/src/components/icons/x-com.svelte
+++ b/src/components/icons/x-com.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import type { IconProps } from "lucide-svelte";
+	import type { IconProps } from "./index.js";
 	type $$Props = IconProps;
 </script>
 
diff --git a/src/components/icons/yarn.svelte b/src/components/icons/yarn.svelte
index 11f9eeac1..df05e2dd8 100644
--- a/src/components/icons/yarn.svelte
+++ b/src/components/icons/yarn.svelte
@@ -1,6 +1,5 @@
 <script lang="ts">
-	import type { IconProps } from "lucide-svelte";
-
+	import type { IconProps } from "./index.js";
 	type $$Props = IconProps;
 </script>
 
diff --git a/src/components/light-switch.svelte b/src/components/light-switch.svelte
index b92d78440..980ae166a 100644
--- a/src/components/light-switch.svelte
+++ b/src/components/light-switch.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { Sun, MoonStars } from "@/components/icons";
+	import { Sun, MoonStars } from "phosphor-svelte";
 	import { Button } from "$lib";
 	import { toggleMode, mode } from "mode-watcher";
 	import { scale } from "svelte/transition";
diff --git a/src/components/navigation/mobile-nav.svelte b/src/components/navigation/mobile-nav.svelte
index 054aaf5cb..922e961cc 100644
--- a/src/components/navigation/mobile-nav.svelte
+++ b/src/components/navigation/mobile-nav.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
+	import { SquareHalf } from "phosphor-svelte";
 	import * as Sheet from "@/components/ui/sheet";
-	import { SquareHalf } from "@/components/icons";
 	import { Button } from "@/components/ui/button";
 	import { navigation } from "@/config";
 	import MobileLink from "./mobile-link.svelte";
diff --git a/src/components/navigation/sidebar-nav-main-items.svelte b/src/components/navigation/sidebar-nav-main-items.svelte
index ac2bcf186..c33d11a51 100644
--- a/src/components/navigation/sidebar-nav-main-items.svelte
+++ b/src/components/navigation/sidebar-nav-main-items.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import type { SidebarNavItem } from "@/config";
-	import { RocketLaunch, BookOpen, Code } from "@/components/icons";
+	import { RocketLaunch, BookOpen, Code } from "phosphor-svelte";
 	import { page } from "$app/stores";
 	import { cn } from "@/utils";
 
diff --git a/src/lib/bits/context-menu/ctx.ts b/src/lib/bits/context-menu/ctx.ts
index bbd125698..f3fd56470 100644
--- a/src/lib/bits/context-menu/ctx.ts
+++ b/src/lib/bits/context-menu/ctx.ts
@@ -7,6 +7,7 @@ import {
 import { getContext, setContext } from "svelte";
 import type { Writable } from "svelte/store";
 import { getPositioningUpdater, type PositioningProps } from "../floating/helpers.js";
+import type { FloatingConfig } from "../floating/floating-config.js";
 
 const NAME = "menu";
 
diff --git a/src/lib/bits/context-menu/types.ts b/src/lib/bits/context-menu/types.ts
index 7d3f9c3e4..7e841990f 100644
--- a/src/lib/bits/context-menu/types.ts
+++ b/src/lib/bits/context-menu/types.ts
@@ -8,7 +8,7 @@ import type {
 	SubTriggerProps,
 	ContextTriggerProps as TriggerProps,
 	ItemProps,
-	CheckboxItemIndicatorProps,
+	CheckboxIndicatorProps,
 	SeparatorProps,
 	SubProps,
 	LabelProps,
@@ -46,7 +46,7 @@ export type {
 	SubContentProps,
 	SubTriggerProps,
 	CheckboxItemProps,
-	CheckboxItemIndicatorProps,
+	CheckboxIndicatorProps,
 	//
 	Props as ContextMenuProps,
 	SubProps as ContextMenuSubProps,
@@ -62,7 +62,7 @@ export type {
 	SubContentProps as ContextMenuSubContentProps,
 	SubTriggerProps as ContextMenuSubTriggerProps,
 	CheckboxItemProps as ContextMenuCheckboxItemProps,
-	CheckboxItemIndicatorProps as ContextMenuCheckboxItemIndicatorProps,
+	CheckboxIndicatorProps as ContextMenuCheckboxIndicatorProps,
 	//,
 	ItemEvents,
 	TriggerEvents,
diff --git a/src/lib/bits/dropdown-menu/types.ts b/src/lib/bits/dropdown-menu/types.ts
index 1051071f3..5aedda12d 100644
--- a/src/lib/bits/dropdown-menu/types.ts
+++ b/src/lib/bits/dropdown-menu/types.ts
@@ -9,7 +9,7 @@ import type {
 	SubTriggerProps,
 	DropdownTriggerProps as TriggerProps,
 	ItemProps,
-	CheckboxItemIndicatorProps,
+	CheckboxIndicatorProps,
 	SeparatorProps,
 	SubProps,
 	LabelProps,
@@ -39,7 +39,7 @@ export type {
 	SubContentProps,
 	SubTriggerProps,
 	CheckboxItemProps,
-	CheckboxItemIndicatorProps,
+	CheckboxIndicatorProps,
 	//
 	Props as DropdownMenuProps,
 	SubProps as DropdownMenuSubProps,
@@ -55,7 +55,7 @@ export type {
 	RadioGroupProps as DropdownMenuRadioGroupProps,
 	SubContentProps as DropdownMenuSubContentProps,
 	CheckboxItemProps as DropdownMenuCheckboxItemProps,
-	CheckboxItemIndicatorProps as DropdownMenuCheckboxItemIndicatorProps,
+	CheckboxIndicatorProps as DropdownMenuCheckboxIndicatorProps,
 	//,
 	ItemEvents,
 	TriggerEvents,
diff --git a/src/lib/bits/floating/_types.ts b/src/lib/bits/floating/_types.ts
index 21b5e63a8..7e10ae6e0 100644
--- a/src/lib/bits/floating/_types.ts
+++ b/src/lib/bits/floating/_types.ts
@@ -8,6 +8,13 @@ export type ArrowProps = Expand<
 
 export type Boundary = "clippingAncestors" | Element | Array<Element> | Rect;
 
+export type Rect = {
+	x: number;
+	y: number;
+	width: number;
+	height: number;
+};
+
 export type ContentProps<
 	T extends Transition = Transition,
 	In extends Transition = Transition,
diff --git a/src/lib/bits/floating/helpers.ts b/src/lib/bits/floating/helpers.ts
index fef9550ff..44f4700ac 100644
--- a/src/lib/bits/floating/helpers.ts
+++ b/src/lib/bits/floating/helpers.ts
@@ -1,4 +1,6 @@
 import type { Writable } from "svelte/store";
+import type { FloatingConfig } from "./floating-config";
+import type { Boundary } from "./_types.js";
 
 export type Side = "top" | "right" | "bottom" | "left";
 export type Align = "start" | "center" | "end";
diff --git a/src/lib/bits/menubar/types.ts b/src/lib/bits/menubar/types.ts
index ab2ce998a..04d618838 100644
--- a/src/lib/bits/menubar/types.ts
+++ b/src/lib/bits/menubar/types.ts
@@ -15,7 +15,7 @@ import type {
 	SubContentProps,
 	SubTriggerProps,
 	CheckboxItemProps,
-	CheckboxItemIndicatorProps,
+	CheckboxIndicatorProps,
 	//
 	MenubarTriggerEvents as TriggerEvents,
 	ItemEvents,
@@ -44,7 +44,7 @@ export type {
 	SubContentProps,
 	SubTriggerProps,
 	CheckboxItemProps,
-	CheckboxItemIndicatorProps,
+	CheckboxIndicatorProps,
 	//
 	Props as MenubarProps,
 	SubProps as MenubarSubProps,
@@ -61,7 +61,7 @@ export type {
 	SubTriggerProps as MenubarSubTriggerProps,
 	RadioGroupProps as MenubarRadioGroupProps,
 	CheckboxItemProps as MenubarCheckboxItemProps,
-	CheckboxItemIndicatorProps as MenubarCheckboxItemIndicatorProps,
+	CheckboxIndicatorProps as MenubarCheckboxIndicatorProps,
 	//
 	ItemEvents,
 	TriggerEvents,
diff --git a/src/lib/bits/popover/ctx.ts b/src/lib/bits/popover/ctx.ts
index c4e3399b1..b6353e34d 100644
--- a/src/lib/bits/popover/ctx.ts
+++ b/src/lib/bits/popover/ctx.ts
@@ -7,6 +7,7 @@ import { getContext, setContext } from "svelte";
 import { createBitAttrs, getOptionUpdater, removeUndefined } from "$lib/internal/index.js";
 import { getPositioningUpdater, type PositioningProps } from "../floating/helpers";
 import type { Writable } from "svelte/store";
+import type { FloatingConfig } from "../floating/floating-config";
 
 const NAME = "popover";
 const PARTS = ["arrow", "close", "content", "trigger"] as const;

From 2780caca1bcb313637915fbcdd4ada193c2b420d Mon Sep 17 00:00:00 2001
From: Hunter Johnston <johnstonhuntera@gmail.com>
Date: Tue, 21 Nov 2023 14:46:59 -0500
Subject: [PATCH 104/217] more

---
 content/components/avatar.md                 |  2 +-
 src/components/demos/collapsible-demo.svelte |  2 +-
 src/components/demos/slider-demo.svelte      | 26 +++++++++++---------
 3 files changed, 16 insertions(+), 14 deletions(-)

diff --git a/content/components/avatar.md b/content/components/avatar.md
index 98e88602c..f663f085a 100644
--- a/content/components/avatar.md
+++ b/content/components/avatar.md
@@ -1,6 +1,6 @@
 ---
 title: Avatar
-description: Displays user or entity images with a fallback option for failed loading, ensuring consistent visual representation.
+description: Displays images with a fallback option for failed loading, ensuring consistent visual representation.
 ---
 
 <script>
diff --git a/src/components/demos/collapsible-demo.svelte b/src/components/demos/collapsible-demo.svelte
index 0e04d8322..fff579418 100644
--- a/src/components/demos/collapsible-demo.svelte
+++ b/src/components/demos/collapsible-demo.svelte
@@ -8,7 +8,7 @@
 	<div class="flex items-center justify-between space-x-10">
 		<h4 class="text-[15px] font-medium">@huntabyte starred 3 repositories</h4>
 		<Collapsible.Trigger
-			class="inline-flex h-10 w-10 items-center justify-center rounded-[9px] border border-border-input shadow-btn focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground focus-visible:ring-offset-2 focus-visible:ring-offset-background active:scale-98"
+			class="inline-flex h-10 w-10 items-center justify-center rounded-[9px] border border-border-input shadow-btn transition-all hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground focus-visible:ring-offset-2 focus-visible:ring-offset-background active:scale-98"
 		>
 			<CaretUpDown class="h-4 w-4 text-foreground" weight="bold" />
 			<span class="sr-only">Toggle</span>
diff --git a/src/components/demos/slider-demo.svelte b/src/components/demos/slider-demo.svelte
index 7770d8345..5fc83d729 100644
--- a/src/components/demos/slider-demo.svelte
+++ b/src/components/demos/slider-demo.svelte
@@ -4,16 +4,18 @@
 	let value = [50];
 </script>
 
-<Slider.Root
-	bind:value
-	class="relative flex w-full touch-none select-none items-center"
->
-	<span
-		class="relative h-2 w-full grow overflow-hidden rounded-full bg-dark-10"
+<div class="w-full md:max-w-[75%]">
+	<Slider.Root
+		bind:value
+		class="relative flex w-full touch-none select-none items-center"
 	>
-		<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"
-	/>
-</Slider.Root>
+		<span
+			class="relative h-2 w-full grow overflow-hidden rounded-full bg-dark-10"
+		>
+			<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"
+		/>
+	</Slider.Root>
+</div>

From d99ef87363d08571d487eb3be1a0a6b36f503f33 Mon Sep 17 00:00:00 2001
From: Hunter Johnston <johnstonhuntera@gmail.com>
Date: Tue, 21 Nov 2023 15:20:59 -0500
Subject: [PATCH 105/217] more docs

---
 src/content/api-reference/button.ts           |   1 +
 src/content/api-reference/index.ts            |   3 +-
 src/content/api-reference/slider.ts           | 111 ++++++++++++++++++
 src/content/api-reference/switch.ts           |  75 ++++++++++++
 .../bits/slider/components/SliderInput.svelte |   9 +-
 5 files changed, 196 insertions(+), 3 deletions(-)
 create mode 100644 src/content/api-reference/slider.ts
 create mode 100644 src/content/api-reference/switch.ts

diff --git a/src/content/api-reference/button.ts b/src/content/api-reference/button.ts
index 08d836c52..3b5c1e738 100644
--- a/src/content/api-reference/button.ts
+++ b/src/content/api-reference/button.ts
@@ -1,6 +1,7 @@
 import type { APISchema } from "@/types";
 import type * as Button from "$lib/bits/button/_types";
 import * as C from "@/content/constants";
+
 export const root: APISchema<Button.Props & { href: string }> = {
 	title: "Root",
 	description:
diff --git a/src/content/api-reference/index.ts b/src/content/api-reference/index.ts
index 80ff8ee53..5cf452fd1 100644
--- a/src/content/api-reference/index.ts
+++ b/src/content/api-reference/index.ts
@@ -17,6 +17,7 @@ import { progress } from "./progress";
 import { radioGroup } from "./radio-group";
 import { select } from "./select";
 import { separator } from "./separator";
+import { switchData } from "./switch";
 
 export const bits = [
 	"accordion",
@@ -72,7 +73,7 @@ export const apiSchemas: Record<Bit, APISchema[]> = {
 	"radio-group": radioGroup,
 	select,
 	separator,
-	switch: [],
+	switch: switchData,
 	slider: [],
 	tabs: [],
 	toggle: [],
diff --git a/src/content/api-reference/slider.ts b/src/content/api-reference/slider.ts
new file mode 100644
index 000000000..91ecf0c10
--- /dev/null
+++ b/src/content/api-reference/slider.ts
@@ -0,0 +1,111 @@
+import type { APISchema } from "@/types";
+import { asChild, enums } from "@/content/api-reference/helpers.js";
+import type * as Slider from "$lib/bits/slider/_types.js";
+import * as C from "@/content/constants.js";
+
+const root: APISchema<Slider.Props> = {
+	title: "Root",
+	description: "The root slider component which contains the remaining slider components.",
+	props: {
+		value: {
+			default: "[]",
+			type: "number[]",
+			description: "The current value of the slider."
+		},
+		onValueChange: {
+			type: {
+				type: C.FUNCTION,
+				definition: "(value: number[]) => void"
+			},
+			description: "A callback function called when the value state of the slider changes."
+		},
+		disabled: {
+			default: C.FALSE,
+			type: C.BOOLEAN,
+			description: "Whether or not the switch is disabled."
+		},
+		max: {
+			default: "100",
+			type: C.NUMBER,
+			description: "The maximum value of the slider."
+		},
+		min: {
+			default: "0",
+			type: C.NUMBER,
+			description: "The minimum value of the slider."
+		},
+		orientation: {
+			default: '"horizontal"',
+			type: {
+				type: C.ENUM,
+				definition: enums("horizontal", "vertical")
+			},
+			description: "The orientation of the slider."
+		},
+		step: {
+			default: "1",
+			type: C.NUMBER,
+			description: "The step value of the slider."
+		},
+		asChild
+	},
+	dataAttributes: [
+		{
+			name: "orientation",
+			value: enums("horizontal", "vertical"),
+			description: "The orientation of the slider."
+		},
+		{
+			name: "bits-slider-root",
+			description: "Present on the root element."
+		}
+	]
+};
+
+const thumb: APISchema<Slider.ThumbProps> = {
+	title: "Thumb",
+	description: "A thumb on the slider.",
+	props: {
+		asChild
+	},
+	dataAttributes: [
+		{
+			name: "bits-slider-thumb",
+			description: "Present on the thumb elements."
+		}
+	]
+};
+
+const range: APISchema<Slider.RangeProps> = {
+	title: "Range",
+	description: "The range of the slider.",
+	props: {
+		asChild
+	},
+	dataAttributes: [
+		{
+			name: "bits-slider-range",
+			description: "Present on the range elements."
+		}
+	]
+};
+
+const tick: APISchema<Slider.TickProps> = {
+	title: "Tick",
+	description: "A tick mark on the slider.",
+	props: {
+		asChild
+	},
+	dataAttributes: [
+		{
+			name: "bounded",
+			description: "Present when the tick is bounded."
+		},
+		{
+			name: "bits-slider-tick",
+			description: "Present on the tick elements."
+		}
+	]
+};
+
+export const slider = [root, range, thumb, tick];
diff --git a/src/content/api-reference/switch.ts b/src/content/api-reference/switch.ts
new file mode 100644
index 000000000..b8b646496
--- /dev/null
+++ b/src/content/api-reference/switch.ts
@@ -0,0 +1,75 @@
+import type { APISchema } from "@/types";
+import { asChild, enums } from "@/content/api-reference/helpers.js";
+import type * as Switch from "$lib/bits/switch/_types.js";
+import * as C from "@/content/constants.js";
+
+const root: APISchema<Switch.Props> = {
+	title: "Root",
+	description: "The root switch component used to set and manage the state of the switch.",
+	props: {
+		checked: {
+			default: C.FALSE,
+			type: C.BOOLEAN,
+			description: "Whether or not the switch is checked."
+		},
+		onCheckedChange: {
+			type: {
+				type: C.FUNCTION,
+				definition: "(checked: boolean) => void"
+			},
+			description: "A callback function called when the checked state of the switch changes."
+		},
+		disabled: {
+			default: C.FALSE,
+			type: C.BOOLEAN,
+			description: "Whether or not the switch is disabled."
+		},
+		includeInput: {
+			default: C.FALSE,
+			type: C.BOOLEAN,
+			description:
+				"Whether or not to include the input element in the switch. This will automatically add a hidden input element to the switch that will be checked when the switch is checked."
+		},
+		inputAttrs: {
+			type: C.OBJECT,
+			description: "Attributes to be spread onto the hidden input element."
+		},
+		name: {
+			type: C.STRING,
+			description:
+				"The name of the hidden input element, used to identify the input in form submissions."
+		},
+		required: {
+			default: C.FALSE,
+			type: C.BOOLEAN,
+			description: "Whether or not the switch is required to be checked."
+		},
+		value: {
+			type: C.STRING,
+			description:
+				"The value of the hidden input element to be used in form submissions when the switch is checked."
+		},
+		asChild
+	},
+	dataAttributes: [
+		{
+			name: "state",
+			value: enums("checked", "unchecked"),
+			description: "The switch's checked state."
+		},
+		{
+			name: "checked",
+			description: "Present when the switch is checked."
+		},
+		{
+			name: "disabled",
+			description: "Present when the switch is disabled."
+		},
+		{
+			name: "bits-switch-root",
+			description: "Present on the root element."
+		}
+	]
+};
+
+export const switchData = [root];
diff --git a/src/lib/bits/slider/components/SliderInput.svelte b/src/lib/bits/slider/components/SliderInput.svelte
index b15d649dc..70923aad2 100644
--- a/src/lib/bits/slider/components/SliderInput.svelte
+++ b/src/lib/bits/slider/components/SliderInput.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
 	import { getCtx, getAttrs } from "../ctx.js";
 	import type { InputProps } from "../types.js";
+	import { srOnlyStyles } from "$lib/internal/style.js";
 
 	type $$Props = InputProps;
 
@@ -15,9 +16,13 @@
 			return value[1] - value[0];
 		}
 	}
-	const attrs = getAttrs("input");
+
+	const attrs = {
+		...getAttrs("input"),
+		style: srOnlyStyles
+	};
 
 	$: inputValue = getValue($value);
 </script>
 
-<input {...$$restProps} value={inputValue} hidden {...attrs} />
+<input {...$$restProps} value={inputValue} {...attrs} />

From d72f9a1c2deb33ff172e4bab23c3432a9a30bb10 Mon Sep 17 00:00:00 2001
From: Hunter Johnston <johnstonhuntera@gmail.com>
Date: Tue, 21 Nov 2023 15:53:29 -0500
Subject: [PATCH 106/217] more docs

---
 content/components/slider.md              |   2 +
 content/components/switch.md              |   2 +
 content/components/tabs.md                |   2 +
 content/components/toggle-group.md        |   2 +
 content/components/toggle.md              |   2 +
 src/content/api-reference/index.ts        |  15 ++-
 src/content/api-reference/switch.ts       |  25 +++-
 src/content/api-reference/tabs.ts         | 139 ++++++++++++++++++++++
 src/content/api-reference/toggle-group.ts | 103 ++++++++++++++++
 src/content/api-reference/toggle.ts       |  46 +++++++
 src/content/api-reference/tooltip.ts      | 112 +++++++++++++++++
 src/content/constants.ts                  |   7 ++
 12 files changed, 451 insertions(+), 6 deletions(-)
 create mode 100644 src/content/api-reference/tabs.ts
 create mode 100644 src/content/api-reference/toggle-group.ts
 create mode 100644 src/content/api-reference/toggle.ts
 create mode 100644 src/content/api-reference/tooltip.ts

diff --git a/content/components/slider.md b/content/components/slider.md
index a603e7985..2e499e938 100644
--- a/content/components/slider.md
+++ b/content/components/slider.md
@@ -28,4 +28,6 @@ description: Enable users to select a value within a specific range with sliding
 </Slider.Root>
 ```
 
+<APISection {schemas} />
+
 🚧 **UNDER CONSTRUCTION** 🚧
diff --git a/content/components/switch.md b/content/components/switch.md
index 9f0a34074..e0000c344 100644
--- a/content/components/switch.md
+++ b/content/components/switch.md
@@ -27,4 +27,6 @@ description: Enables users to toggle between two states.
 </Switch.Root>
 ```
 
+<APISection {schemas} />
+
 🚧 **UNDER CONSTRUCTION** 🚧
diff --git a/content/components/tabs.md b/content/components/tabs.md
index 3f07b13b3..595ab5e52 100644
--- a/content/components/tabs.md
+++ b/content/components/tabs.md
@@ -29,4 +29,6 @@ description: Allows users to navigate between different views
 </Tabs.Root>
 ```
 
+<APISection {schemas} />
+
 🚧 **UNDER CONSTRUCTION** 🚧
diff --git a/content/components/toggle-group.md b/content/components/toggle-group.md
index db3ec9878..0bb3e7e8b 100644
--- a/content/components/toggle-group.md
+++ b/content/components/toggle-group.md
@@ -27,4 +27,6 @@ description: An interactive component that toggles between two states.
 </ToggleGroup.Root>
 ```
 
+<APISection {schemas} />
+
 🚧 **UNDER CONSTRUCTION** 🚧
diff --git a/content/components/toggle.md b/content/components/toggle.md
index 12811d273..ad03da443 100644
--- a/content/components/toggle.md
+++ b/content/components/toggle.md
@@ -27,4 +27,6 @@ description: An interactive component that toggles between two states.
 </Toggle.Root>
 ```
 
+<APISection {schemas} />
+
 🚧 **UNDER CONSTRUCTION** 🚧
diff --git a/src/content/api-reference/index.ts b/src/content/api-reference/index.ts
index 5cf452fd1..c1f406352 100644
--- a/src/content/api-reference/index.ts
+++ b/src/content/api-reference/index.ts
@@ -17,7 +17,12 @@ import { progress } from "./progress";
 import { radioGroup } from "./radio-group";
 import { select } from "./select";
 import { separator } from "./separator";
+import { slider } from "./slider";
 import { switchData } from "./switch";
+import { tabs } from "./tabs";
+import { toggle } from "./toggle";
+import { toggleGroup } from "./toggle-group";
+import { tooltip } from "./tooltip";
 
 export const bits = [
 	"accordion",
@@ -73,12 +78,12 @@ export const apiSchemas: Record<Bit, APISchema[]> = {
 	"radio-group": radioGroup,
 	select,
 	separator,
+	slider,
 	switch: switchData,
-	slider: [],
-	tabs: [],
-	toggle: [],
-	"toggle-group": [],
-	tooltip: []
+	tabs,
+	toggle: toggle,
+	"toggle-group": toggleGroup,
+	tooltip
 };
 
 export function getAPISchemas(bit: Bit): APISchema[] {
diff --git a/src/content/api-reference/switch.ts b/src/content/api-reference/switch.ts
index b8b646496..65814b7f1 100644
--- a/src/content/api-reference/switch.ts
+++ b/src/content/api-reference/switch.ts
@@ -72,4 +72,27 @@ const root: APISchema<Switch.Props> = {
 	]
 };
 
-export const switchData = [root];
+const thumb: APISchema<Switch.ThumbProps> = {
+	title: "Thumb",
+	description: "The thumb on the switch used to indicate the switch's state.",
+	props: {
+		asChild
+	},
+	dataAttributes: [
+		{
+			name: "state",
+			value: enums("checked", "unchecked"),
+			description: "The switch's checked state."
+		},
+		{
+			name: "checked",
+			description: "Present when the switch is checked."
+		},
+		{
+			name: "bits-switch-thumb",
+			description: "Present on the thumb element."
+		}
+	]
+};
+
+export const switchData = [root, thumb];
diff --git a/src/content/api-reference/tabs.ts b/src/content/api-reference/tabs.ts
new file mode 100644
index 000000000..878a9fda5
--- /dev/null
+++ b/src/content/api-reference/tabs.ts
@@ -0,0 +1,139 @@
+import type { APISchema } from "@/types";
+import * as C from "@/content/constants.js";
+import { union, enums, asChild } from "@/content/api-reference/helpers.js";
+import type * as Tabs from "$lib/bits/tabs/_types.js";
+
+const root: APISchema<Tabs.Props> = {
+	title: "Root",
+	description: "The root tabs component which contains the other tab components.",
+	props: {
+		value: {
+			type: {
+				type: C.UNION,
+				definition: union("string", "undefined")
+			},
+			description: "The active tab value."
+		},
+		onValueChange: {
+			type: {
+				type: C.FUNCTION,
+				definition: "(value: string | undefined) => void"
+			},
+			description: "A callback function called when the active tab value changes."
+		},
+		activateOnFocus: {
+			default: C.TRUE,
+			type: C.BOOLEAN,
+			description: "Whether or not to activate the tab when it receives focus."
+		},
+		autoSet: {
+			default: C.TRUE,
+			type: C.BOOLEAN,
+			description: "Whether or not to automatically set the tab value when it receives focus."
+		},
+		loop: {
+			default: C.TRUE,
+			type: C.BOOLEAN,
+			description: "Whether or not the tabs should loop when navigating with the keyboard."
+		},
+		orientation: {
+			default: C.HORIZONTAL,
+			type: enums(C.HORIZONTAL, C.VERTICAL),
+			description: "The orientation of the tabs."
+		},
+		asChild
+	},
+	dataAttributes: [
+		{
+			name: "orientation",
+			value: enums("horizontal", "vertical"),
+			description: "The orientation of the tabs."
+		},
+		{
+			name: "bits-tabs-root",
+			description: "Present on the root element."
+		}
+	]
+};
+
+const list: APISchema<Tabs.ListProps> = {
+	title: "List",
+	description: "The component containing the tab triggers.",
+	props: {
+		asChild
+	},
+	dataAttributes: [
+		{
+			name: "orientation",
+			value: enums("horizontal", "vertical"),
+			description: "The orientation of the tabs."
+		},
+		{
+			name: "bits-tabs-list",
+			description: "Present on the list element."
+		}
+	]
+};
+
+const trigger: APISchema<Tabs.TriggerProps> = {
+	title: "Trigger",
+	description: "The trigger for a tab.",
+	props: {
+		value: {
+			required: true,
+			type: "string",
+			description: "The value of the tab this trigger represents."
+		},
+		disabled: {
+			default: C.FALSE,
+			type: C.BOOLEAN,
+			description: "Whether or not the tab is disabled."
+		},
+		asChild
+	},
+	dataAttributes: [
+		{
+			name: "state",
+			value: enums("active", "inactive"),
+			description: "The state of the tab trigger."
+		},
+		{
+			name: "value",
+			description: "The value of the tab this trigger represents."
+		},
+		{
+			name: "orientation",
+			value: enums("horizontal", "vertical"),
+			description: "The orientation of the tabs."
+		},
+		{
+			name: "disabled",
+			description: "Present when the tab trigger is disabled."
+		},
+		{
+			name: "bits-tabs-trigger",
+			description: "Present on the trigger elements."
+		}
+	]
+};
+
+const content: APISchema<Tabs.ContentProps> = {
+	title: "Content",
+	description: "The panel containing the contents of a tab.",
+	props: {
+		value: {
+			required: true,
+			type: "string",
+			description: "The value of the tab this content represents."
+		},
+		asChild
+	},
+	dataAttributes: [
+		{
+			name: "bits-tabs-content",
+			description: "Present on the content elements."
+		}
+	]
+};
+
+export const tabs = [root, list, trigger, content];
diff --git a/src/content/api-reference/toggle-group.ts b/src/content/api-reference/toggle-group.ts
new file mode 100644
index 000000000..43c14ccea
--- /dev/null
+++ b/src/content/api-reference/toggle-group.ts
@@ -0,0 +1,103 @@
+import type { APISchema } from "@/types";
+import { asChild, enums } from "@/content/api-reference/helpers.js";
+import type * as ToggleGroup from "$lib/bits/toggle-group/_types.js";
+import * as C from "@/content/constants.js";
+import { union } from "./helpers";
+
+const root: APISchema<ToggleGroup.Props<"multiple">> = {
+	title: "Root",
+	description: "The root component which contains the toggle group items.",
+	props: {
+		value: {
+			type: union(C.STRING, "string[]"),
+			description:
+				"The value of the toggle group. If the type is multiple, this will be an array of strings, otherwise it will be a string."
+		},
+		onValueChange: {
+			type: {
+				type: C.FUNCTION,
+				definition: union("(value: string) => void", "(value: string[]) => void")
+			},
+			description:
+				"A callback function called when the value of the toggle group changes. The type of the value is dependent on the type of the toggle group."
+		},
+		disabled: {
+			default: C.FALSE,
+			type: C.BOOLEAN,
+			description: "Whether or not the switch is disabled."
+		},
+		loop: {
+			default: C.TRUE,
+			type: C.BOOLEAN,
+			description: "Whether or not the toggle group should loop when navigating."
+		},
+		orientation: {
+			default: C.HORIZONTAL,
+			type: enums(C.HORIZONTAL, C.VERTICAL),
+			description: "The orientation of the toggle group."
+		},
+		rovingFocus: {
+			default: C.TRUE,
+			type: C.BOOLEAN,
+			description: "Whether or not the toggle group should use roving focus when navigating."
+		},
+		type: {
+			default: "single",
+			description: "The type of toggle group.",
+			type: enums("single", "multiple")
+		},
+		asChild
+	},
+	dataAttributes: [
+		{
+			name: "orientation",
+			description: "The orientation of the toggle group."
+		},
+		{
+			name: "bits-toggle-group-root",
+			description: "Present on the root element."
+		}
+	]
+};
+
+const item: APISchema<ToggleGroup.ItemProps> = {
+	title: "Root",
+	description: "The toggle button.",
+	props: {
+		value: {
+			type: C.STRING,
+			description: "The value of the item."
+		},
+		disabled: {
+			default: C.FALSE,
+			type: C.BOOLEAN,
+			description: "Whether or not the switch is disabled."
+		},
+		asChild
+	},
+	dataAttributes: [
+		{
+			name: "state",
+			value: enums("on", "off"),
+			description: "Whether the toggle item is in the on or off state."
+		},
+		{
+			name: "value",
+			description: "The value of the toggle item."
+		},
+		{
+			name: "orientation",
+			description: "The orientation of the toggle group."
+		},
+		{
+			name: "disabled",
+			description: "Present when the toggle item is disabled."
+		},
+		{
+			name: "bits-toggle-group-item",
+			description: "Present on the item elements."
+		}
+	]
+};
+
+export const toggleGroup = [root, item];
diff --git a/src/content/api-reference/toggle.ts b/src/content/api-reference/toggle.ts
new file mode 100644
index 000000000..29473f145
--- /dev/null
+++ b/src/content/api-reference/toggle.ts
@@ -0,0 +1,46 @@
+import type { APISchema } from "@/types";
+import { asChild, enums } from "@/content/api-reference/helpers.js";
+import type * as Toggle from "$lib/bits/toggle/_types.js";
+import * as C from "@/content/constants.js";
+
+const root: APISchema<Toggle.Props> = {
+	title: "Root",
+	description: "The toggle button.",
+	props: {
+		pressed: {
+			default: C.FALSE,
+			type: C.BOOLEAN,
+			description: "Whether or not the toggle button is pressed."
+		},
+		onPressedChange: {
+			type: {
+				type: C.FUNCTION,
+				definition: "(checked: boolean) => void"
+			},
+			description: "A callback function called when the pressed state of the toggle changes."
+		},
+		disabled: {
+			default: C.FALSE,
+			type: C.BOOLEAN,
+			description: "Whether or not the switch is disabled."
+		},
+		asChild
+	},
+	dataAttributes: [
+		{
+			name: "state",
+			value: enums("on", "off"),
+			description: "Whether the toggle is in the on or off state."
+		},
+		{
+			name: "disabled",
+			description: "Present when the toggle is disabled."
+		},
+		{
+			name: "bits-toggle-root",
+			description: "Present on the root element."
+		}
+	]
+};
+
+export const toggle = [root];
diff --git a/src/content/api-reference/tooltip.ts b/src/content/api-reference/tooltip.ts
new file mode 100644
index 000000000..c1aee2e86
--- /dev/null
+++ b/src/content/api-reference/tooltip.ts
@@ -0,0 +1,112 @@
+import type { APISchema } from "@/types";
+import {
+	arrowProps,
+	asChild,
+	enums,
+	portalProp,
+	transitionProps
+} from "@/content/api-reference/helpers.js";
+import { floatingPositioning } from "./floating.js";
+import type * as Tooltip from "$lib/bits/tooltip/_types";
+import * as C from "@/content/constants";
+
+export const root: APISchema<Tooltip.Props> = {
+	title: "Root",
+	description: "The root component containing the parts of the tooltip.",
+	props: {
+		openDelay: {
+			type: C.NUMBER,
+			default: "700",
+			description:
+				"The amount of time in milliseconds to delay opening the tooltip when hovering over the trigger."
+		},
+		closeDelay: {
+			type: C.NUMBER,
+			default: "300",
+			description:
+				"The amount of time in milliseconds to delay closing the tooltip when the mouse leaves the trigger."
+		},
+		closeOnEscape: {
+			type: C.BOOLEAN,
+			default: C.TRUE,
+			description: "Whether or not to close the tooltip when pressing the escape key."
+		},
+		closeOnPointerDown: {
+			type: C.BOOLEAN,
+			default: C.TRUE,
+			description: "Whether or not to close the tooltip when clicking outside of the tooltip."
+		},
+		disableHoverableContent: {
+			type: C.BOOLEAN,
+			default: C.FALSE,
+			description:
+				"Whether or not to disable the hoverable content. This is useful when the content contains interactive elements."
+		},
+		group: {
+			type: C.STRING,
+			description: "The group the tooltip belongs to."
+		},
+		open: {
+			type: C.BOOLEAN,
+			default: "false",
+			description: "The open state of the tooltip component."
+		},
+		onOpenChange: {
+			type: {
+				type: C.FUNCTION,
+				definition: "(open: boolean) => void"
+			},
+			description: "A callback that fires when the open state changes."
+		},
+		portal: { ...portalProp("tooltip") }
+	}
+};
+
+export const trigger: APISchema<Tooltip.TriggerProps> = {
+	title: "Trigger",
+	description:
+		"A component which triggers the opening and closing of the tooltip on hover or focus.",
+	props: { asChild },
+	dataAttributes: [
+		{
+			name: "state",
+			value: enums("open", "closed"),
+			description: "The open state of the tooltip."
+		},
+		{
+			name: "bits-tooltip-trigger",
+			description: "Present on the trigger element."
+		}
+	]
+};
+
+export const content: APISchema<Tooltip.ContentProps> = {
+	title: "Content",
+	description: "The contents of the tooltip which are displayed when the tooltip is open.",
+	props: { ...transitionProps, ...floatingPositioning, asChild },
+	dataAttributes: [
+		{
+			name: "bits-tooltip-content",
+			description: "Present on the content element."
+		}
+	]
+};
+
+export const arrow: APISchema<Tooltip.ArrowProps> = {
+	title: "Arrow",
+	description: "An optional arrow element which points to the trigger when the tooltip is open.",
+	props: arrowProps,
+	dataAttributes: [
+		{
+			name: "arrow",
+			value: "",
+			description: "Present on the arrow element."
+		},
+		{
+			name: "bits-tooltip-arrow",
+			description: "Present on the arrow element."
+		}
+	]
+};
+
+export const tooltip = [root, trigger, content, arrow];
diff --git a/src/content/constants.ts b/src/content/constants.ts
index 7a4434305..18bbe4f9c 100644
--- a/src/content/constants.ts
+++ b/src/content/constants.ts
@@ -9,3 +9,10 @@ export const OBJECT = "object";
 export const FALSE = "false";
 export const TRUE = "true";
 export const UNKNOWN = "unknown";
+
+export const HORIZONTAL = "horizontal";
+export const VERTICAL = "vertical";
+export const CHECKED = "checked";
+export const UNCHECKED = "unchecked";
+export const ON = "on";
+export const OFF = "off";

From 26f42b45f6c3a89492450cfd65281f44753b5861 Mon Sep 17 00:00:00 2001
From: Hunter Johnston <johnstonhuntera@gmail.com>
Date: Tue, 21 Nov 2023 15:54:50 -0500
Subject: [PATCH 107/217] tooltip api ref

---
 content/components/tooltip.md     | 3 +++
 src/content/api-reference/tabs.ts | 5 ++++-
 2 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/content/components/tooltip.md b/content/components/tooltip.md
index 668eec807..496687e97 100644
--- a/content/components/tooltip.md
+++ b/content/components/tooltip.md
@@ -5,6 +5,7 @@ description: Displays floating content containing additional information about a
 
 <script>
 	import { ComponentPreview, TooltipDemo } from '@/components'
+	export let schemas;
 </script>
 
 <ComponentPreview name="tooltip-demo" comp="Tooltip">
@@ -28,4 +29,6 @@ description: Displays floating content containing additional information about a
 </Tooltip.Root>
 ```
 
+<APISection {schemas} />
+
 🚧 **UNDER CONSTRUCTION** 🚧
diff --git a/src/content/api-reference/tabs.ts b/src/content/api-reference/tabs.ts
index 878a9fda5..94c417ca9 100644
--- a/src/content/api-reference/tabs.ts
+++ b/src/content/api-reference/tabs.ts
@@ -38,7 +38,10 @@ const root: APISchema<Tabs.Props> = {
 		},
 		orientation: {
 			default: C.HORIZONTAL,
-			type: enums(C.HORIZONTAL, C.VERTICAL),
+			type: {
+				type: C.ENUM,
+				definition: enums(C.HORIZONTAL, C.VERTICAL)
+			},
 			description: "The orientation of the tabs."
 		},
 		asChild

From 363d4cf9aa2cf5817275a2d60f76656d2ea03cde Mon Sep 17 00:00:00 2001
From: Hunter Johnston <johnstonhuntera@gmail.com>
Date: Tue, 21 Nov 2023 15:57:45 -0500
Subject: [PATCH 108/217] tooltip api ref

---
 content/components/tooltip.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/content/components/tooltip.md b/content/components/tooltip.md
index 496687e97..236727072 100644
--- a/content/components/tooltip.md
+++ b/content/components/tooltip.md
@@ -4,7 +4,7 @@ description: Displays floating content containing additional information about a
 ---
 
 <script>
-	import { ComponentPreview, TooltipDemo } from '@/components'
+	import { ComponentPreview, TooltipDemo, APISection } from '@/components'
 	export let schemas;
 </script>
 

From 7732325440d483327f4a0299c5d6982884b60ad7 Mon Sep 17 00:00:00 2001
From: Hunter Johnston <johnstonhuntera@gmail.com>
Date: Tue, 21 Nov 2023 15:59:50 -0500
Subject: [PATCH 109/217] fix label demo

---
 src/components/demos/label-demo.svelte | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/demos/label-demo.svelte b/src/components/demos/label-demo.svelte
index 8f9c286d3..6882b19c4 100644
--- a/src/components/demos/label-demo.svelte
+++ b/src/components/demos/label-demo.svelte
@@ -8,7 +8,7 @@
 	<Checkbox.Root
 		id="terms"
 		aria-labelledby="terms-label"
-		class="peer h-[25px] w-[25px] rounded-md border border-muted bg-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground focus-visible:ring-offset-2 focus-visible:ring-offset-background data-[state=unchecked]:bg-background"
+		class="peer inline-flex h-[25px] w-[25px] items-center justify-center rounded-md border border-muted bg-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground focus-visible:ring-offset-2 focus-visible:ring-offset-background data-[state=unchecked]:bg-background"
 		checked="indeterminate"
 	>
 		<Checkbox.Indicator
@@ -17,9 +17,9 @@
 			class="inline-flex items-center justify-center"
 		>
 			{#if isChecked}
-				<Check class="h-[15px] w-[15px] text-background" />
+				<Check class="h-[15px] w-[15px] text-background" weight="bold" />
 			{:else if isIndeterminate}
-				<Minus class="h-[15px] w-[15px] text-background" />
+				<Minus class="h-[15px] w-[15px] text-background" weight="bold" />
 			{/if}
 		</Checkbox.Indicator>
 	</Checkbox.Root>

From 35b5de539e88c80b127525c19a98082ca8b13799 Mon Sep 17 00:00:00 2001
From: Hunter Johnston <johnstonhuntera@gmail.com>
Date: Tue, 21 Nov 2023 16:06:44 -0500
Subject: [PATCH 110/217] preview styles

---
 other/code-block-prettier.js            | 9 +++------
 src/components/component-preview.svelte | 4 ++--
 2 files changed, 5 insertions(+), 8 deletions(-)

diff --git a/other/code-block-prettier.js b/other/code-block-prettier.js
index 76de1012c..f14708c5f 100644
--- a/other/code-block-prettier.js
+++ b/other/code-block-prettier.js
@@ -3,13 +3,12 @@ export const codeBlockPrettierConfig = {
 	tabWidth: 2,
 	singleQuote: false,
 	trailingComma: "none",
-	printWidth: 60,
+	printWidth: 80,
 	endOfLine: "lf",
 	pluginSearchDirs: ["node_modules/prettier-plugin-svelte"],
 	parser: "svelte",
 	svelteIndexScriptAndStyle: true,
 	svelteStrictMode: false,
-	svelteSortOrder: "scripts-markup-styles-options",
 	plugins: ["prettier-plugin-svelte"],
 	overrides: [
 		{
@@ -17,10 +16,8 @@ export const codeBlockPrettierConfig = {
 			options: {
 				parser: "svelte",
 				svelteIndentScriptAndStyle: true,
-				svelteStrictMode: false,
-				svelteSortOrder: "scripts-markup-styles-options"
+				svelteStrictMode: false
 			}
 		}
-	],
-	bracketSameLine: false
+	]
 };
diff --git a/src/components/component-preview.svelte b/src/components/component-preview.svelte
index 579ee39e5..2303097fb 100644
--- a/src/components/component-preview.svelte
+++ b/src/components/component-preview.svelte
@@ -30,7 +30,7 @@
 					value === "preview"
 						? "font-semibold shadow-mini hover:bg-opacity-90"
 						: "shadow-none transition-all hover:text-foreground-alt",
-					"relative bg-transparent"
+					"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>
@@ -49,7 +49,7 @@
 					value === "code"
 						? "bg-transparent font-semibold shadow-mini hover:bg-opacity-90"
 						: "bg-transparent shadow-none transition-all hover:text-foreground-alt",
-					"relative"
+					"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>

From 8cb9e0eea519c62fcef958ffe2570b7c4bc3492f Mon Sep 17 00:00:00 2001
From: Hunter Johnston <johnstonhuntera@gmail.com>
Date: Tue, 21 Nov 2023 16:18:34 -0500
Subject: [PATCH 111/217] logo focus states

---
 src/components/site-header.svelte | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/components/site-header.svelte b/src/components/site-header.svelte
index d54ec252c..946a9649d 100644
--- a/src/components/site-header.svelte
+++ b/src/components/site-header.svelte
@@ -12,7 +12,10 @@
 		<div class="flex h-[70px] items-center justify-between gap-3">
 			<div class="flex items-center gap-1.5">
 				<MobileNav />
-				<a href="/" class="ml-2">
+				<a
+					href="/"
+					class="ml-2 rounded-md focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground focus-visible:ring-offset-2 focus-visible:ring-offset-background"
+				>
 					<Logo />
 				</a>
 			</div>

From 3dd9600a57e0cb03dbf316f4db703ef28eda1c2c Mon Sep 17 00:00:00 2001
From: Hunter Johnston <johnstonhuntera@gmail.com>
Date: Fri, 24 Nov 2023 13:29:50 -0500
Subject: [PATCH 112/217] fix: collapsible typo

---
 src/components/demos/collapsible-demo.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/demos/collapsible-demo.svelte b/src/components/demos/collapsible-demo.svelte
index fff579418..2d9df820a 100644
--- a/src/components/demos/collapsible-demo.svelte
+++ b/src/components/demos/collapsible-demo.svelte
@@ -29,7 +29,7 @@
 		<div
 			class="inline-flex h-12 w-full items-center rounded-[9px] bg-muted px-[18px] py-3 font-mono text-[15px] tracking-[0.01em]"
 		>
-			@melt-ui/meltui
+			@melt-ui/melt-ui
 		</div>
 	</Collapsible.Content>
 </Collapsible.Root>

From b298e71c8355de53b9e339dc573124227185c496 Mon Sep 17 00:00:00 2001
From: Hunter Johnston <johnstonhuntera@gmail.com>
Date: Fri, 24 Nov 2023 13:43:52 -0500
Subject: [PATCH 113/217] fixes

---
 src/components/component-preview.svelte    |  4 +-
 src/styles/themes/serendipity-morning.json | 52 +++++++++++-----------
 2 files changed, 28 insertions(+), 28 deletions(-)

diff --git a/src/components/component-preview.svelte b/src/components/component-preview.svelte
index 2303097fb..da1e1b0e5 100644
--- a/src/components/component-preview.svelte
+++ b/src/components/component-preview.svelte
@@ -21,7 +21,7 @@
 >
 	<Tabs.Root class="relative mr-auto w-full" let:value>
 		<Tabs.List
-			class="absolute right-2.5 top-2.5 z-20 flex h-input-sm items-center justify-center rounded-card-sm bg-black/8 px-[5px] shadow-mini-inset dark:bg-white/8"
+			class="absolute right-2.5 top-2.5 z-20 flex h-input-sm items-center justify-center rounded-card-sm bg-neutral-200 px-[5px] shadow-mini-inset dark:bg-neutral-800 "
 		>
 			<Tabs.Trigger
 				value="preview"
@@ -71,7 +71,7 @@
 		</Tabs.Content>
 		<Tabs.Content
 			value="preview"
-			class="relative rounded-card border-2 border-muted focus-visible:outline-none"
+			class="relative rounded-card border-2 border-muted bg-zinc-50 focus-visible:outline-none dark:bg-[#1f1f21]"
 		>
 			<div
 				class={cn(
diff --git a/src/styles/themes/serendipity-morning.json b/src/styles/themes/serendipity-morning.json
index 861174eb9..041659951 100644
--- a/src/styles/themes/serendipity-morning.json
+++ b/src/styles/themes/serendipity-morning.json
@@ -27,7 +27,7 @@
 		"button.secondaryHoverBackground": "#D8DAE4",
 		"charts.lines": "#5F6488",
 		"charts.foreground": "#4E5377",
-		"charts.blue": "#7397DE",
+		"charts.blue": "#4172D2",
 		"charts.green": "#3788BE",
 		"charts.orange": "#F19A8E",
 		"charts.purple": "#77AAB3",
@@ -58,7 +58,7 @@
 		"descriptionForeground": "#5F6488",
 		"diffEditor.border": "#D8DAE4",
 		"diffEditor.diagonalFill": "#6e6a8626",
-		"diffEditor.insertedTextBackground": "#7397DE20",
+		"diffEditor.insertedTextBackground": "#4172D220",
 		"diffEditor.insertedTextBorder": "#FDFDFEB0",
 		"diffEditor.removedTextBackground": "#D26A5D29",
 		"diffEditor.removedTextBorder": "#FDFDFEB0",
@@ -101,7 +101,7 @@
 		"editorBracketHighlight.foreground1": "#D26A5D80",
 		"editorBracketHighlight.foreground2": "#3788BE80",
 		"editorBracketHighlight.foreground3": "#886CDB80",
-		"editorBracketHighlight.foreground4": "#7397DE80",
+		"editorBracketHighlight.foreground4": "#4172D280",
 		"editorBracketHighlight.foreground5": "#F19A8E80",
 		"editorBracketHighlight.foreground6": "#77AAB380",
 		"editorBracketMatch.background": "#0000",
@@ -109,13 +109,13 @@
 		"editorBracketPairGuide.activeBackground1": "#3788BE",
 		"editorBracketPairGuide.activeBackground2": "#F19A8E",
 		"editorBracketPairGuide.activeBackground3": "#77AAB3",
-		"editorBracketPairGuide.activeBackground4": "#7397DE",
+		"editorBracketPairGuide.activeBackground4": "#4172D2",
 		"editorBracketPairGuide.activeBackground5": "#886CDB",
 		"editorBracketPairGuide.activeBackground6": "#D26A5D",
 		"editorBracketPairGuide.background1": "#3788BE80",
 		"editorBracketPairGuide.background2": "#F19A8E80",
 		"editorBracketPairGuide.background3": "#77AAB380",
-		"editorBracketPairGuide.background4": "#7397DE80",
+		"editorBracketPairGuide.background4": "#4172D280",
 		"editorBracketPairGuide.background5": "#886CDB80",
 		"editorBracketPairGuide.background6": "#D26A5D80",
 		"editorCodeLens.foreground": "#F19A8E",
@@ -131,7 +131,7 @@
 		"editorGroupHeader.noTabsBackground": "#0000",
 		"editorGroupHeader.tabsBackground": "#0000",
 		"editorGroupHeader.tabsBorder": "#0000",
-		"editorGutter.addedBackground": "#7397DE",
+		"editorGutter.addedBackground": "#4172D2",
 		"editorGutter.background": "#0000",
 		"editorGutter.commentRangeForeground": "#5F6488",
 		"editorGutter.deletedBackground": "#D26A5D",
@@ -147,13 +147,13 @@
 		"editorIndentGuide.activeBackground": "#8388AD",
 		"editorIndentGuide.background": "#6e6a8626",
 		"editorInfo.border": "#D8DAE4",
-		"editorInfo.foreground": "#7397DE",
+		"editorInfo.foreground": "#4172D2",
 		"editorInlayHint.background": "#D8DAE4",
 		"editorInlayHint.foreground": "#5F6488",
 		"editorInlayHint.parameterBackground": "#D8DAE4",
 		"editorInlayHint.parameterForeground": "#77AAB3",
 		"editorInlayHint.typeBackground": "#D8DAE4",
-		"editorInlayHint.typeForeground": "#7397DE",
+		"editorInlayHint.typeForeground": "#4172D2",
 		"editorLightBulb.foreground": "#3788BE",
 		"editorLightBulbAutoFix.foreground": "#F19A8E",
 		"editorLineNumber.activeForeground": "#4E5377",
@@ -163,7 +163,7 @@
 		"editorMarkerNavigationError.background": "#F1F1F4",
 		"editorMarkerNavigationInfo.background": "#F1F1F4",
 		"editorMarkerNavigationWarning.background": "#F1F1F4",
-		"editorOverviewRuler.addedForeground": "#7397DE80",
+		"editorOverviewRuler.addedForeground": "#4172D280",
 		"editorOverviewRuler.background": "#FDFDFE",
 		"editorOverviewRuler.border": "#6e6a8626",
 		"editorOverviewRuler.bracketMatchForeground": "#5F6488",
@@ -173,7 +173,7 @@
 		"editorOverviewRuler.errorForeground": "#D26A5D80",
 		"editorOverviewRuler.findMatchForeground": "#6e6a8626",
 		"editorOverviewRuler.incomingContentForeground": "#77AAB380",
-		"editorOverviewRuler.infoForeground": "#7397DE80",
+		"editorOverviewRuler.infoForeground": "#4172D280",
 		"editorOverviewRuler.modifiedForeground": "#F19A8E80",
 		"editorOverviewRuler.rangeHighlightForeground": "#6e6a8626",
 		"editorOverviewRuler.selectionHighlightForeground": "#6e6a8626",
@@ -209,7 +209,7 @@
 		"extensionIcon.verifiedForeground": "#77AAB3",
 		"focusBorder": "#6e6a8614",
 		"foreground": "#4E5377",
-		"gitDecoration.addedResourceForeground": "#7397DE",
+		"gitDecoration.addedResourceForeground": "#4172D2",
 		"gitDecoration.conflictingResourceForeground": "#D26A5D",
 		"gitDecoration.deletedResourceForeground": "#5F6488",
 		"gitDecoration.ignoredResourceForeground": "#8388AD",
@@ -232,10 +232,10 @@
 		"inputValidation.errorForeground": "#D26A5D",
 		"inputValidation.infoBackground": "#0000",
 		"inputValidation.infoBorder": "#0000",
-		"inputValidation.infoForeground": "#7397DE",
+		"inputValidation.infoForeground": "#4172D2",
 		"inputValidation.warningBackground": "#0000",
 		"inputValidation.warningBorder": "#0000",
-		"inputValidation.warningForeground": "#7397DE80",
+		"inputValidation.warningForeground": "#4172D280",
 		"keybindingLabel.background": "#D8DAE4",
 		"keybindingLabel.border": "#6e6a8626",
 		"keybindingLabel.bottomBorder": "#6e6a8626",
@@ -280,14 +280,14 @@
 		"merge.commonHeaderBackground": "#6e6a8614",
 		"merge.currentContentBackground": "#886CDB80",
 		"merge.currentHeaderBackground": "#886CDB80",
-		"merge.incomingContentBackground": "#7397DE80",
-		"merge.incomingHeaderBackground": "#7397DE80",
+		"merge.incomingContentBackground": "#4172D280",
+		"merge.incomingHeaderBackground": "#4172D280",
 		"minimap.background": "#F1F1F4",
 		"minimap.errorHighlight": "#D26A5D80",
 		"minimap.findMatchHighlight": "#6e6a8614",
 		"minimap.selectionHighlight": "#6e6a8614",
 		"minimap.warningHighlight": "#886CDB80",
-		"minimapGutter.addedBackground": "#7397DE",
+		"minimapGutter.addedBackground": "#4172D2",
 		"minimapGutter.deletedBackground": "#D26A5D",
 		"minimapGutter.modifiedBackground": "#F19A8E",
 		"minimapSlider.activeBackground": "#6e6a8626",
@@ -301,7 +301,7 @@
 		"notifications.border": "#6e6a8614",
 		"notifications.foreground": "#4E5377",
 		"notificationsErrorIcon.foreground": "#D26A5D",
-		"notificationsInfoIcon.foreground": "#7397DE",
+		"notificationsInfoIcon.foreground": "#4172D2",
 		"notificationsWarningIcon.foreground": "#886CDB",
 		"notificationToast.border": "#6e6a8614",
 		"panel.background": "#F1F1F4",
@@ -329,7 +329,7 @@
 		"pickerGroup.foreground": "#77AAB3",
 		"ports.iconRunningProcessForeground": "#F19A8E",
 		"problemsErrorIcon.foreground": "#D26A5D",
-		"problemsInfoIcon.foreground": "#7397DE",
+		"problemsInfoIcon.foreground": "#4172D2",
 		"problemsWarningIcon.foreground": "#886CDB",
 		"progressBar.background": "#F19A8E",
 		"quickInput.background": "#F1F1F4",
@@ -402,23 +402,23 @@
 		"symbolIcon.variableForeground": "#5F6488",
 		"tab.activeBackground": "#6e6a860d",
 		"tab.activeForeground": "#4E5377",
-		"tab.activeModifiedBorder": "#7397DE",
+		"tab.activeModifiedBorder": "#4172D2",
 		"tab.border": "#0000",
 		"tab.hoverBackground": "#6e6a8614",
 		"tab.inactiveBackground": "#0000",
 		"tab.inactiveForeground": "#5F6488",
-		"tab.inactiveModifiedBorder": "#7397DE80",
+		"tab.inactiveModifiedBorder": "#4172D280",
 		"tab.lastPinnedBorder": "#8388AD",
 		"tab.unfocusedActiveBackground": "#0000",
 		"tab.unfocusedHoverBackground": "#0000",
 		"tab.unfocusedInactiveBackground": "#0000",
-		"tab.unfocusedInactiveModifiedBorder": "#7397DE80",
+		"tab.unfocusedInactiveModifiedBorder": "#4172D280",
 		"terminal.ansiWhite": "#4E5377",
 		"terminal.ansiBrightWhite": "#4E5377",
 		"terminal.ansiBlack": "#D8DAE4",
 		"terminal.ansiBrightBlack": "#5F6488",
-		"terminal.ansiBlue": "#7397DE",
-		"terminal.ansiBrightBlue": "#7397DE",
+		"terminal.ansiBlue": "#4172D2",
+		"terminal.ansiBrightBlue": "#4172D2",
 		"terminal.ansiCyan": "#F19A8E",
 		"terminal.ansiBrightCyan": "#F19A8E",
 		"terminal.ansiGreen": "#3788BE",
@@ -491,7 +491,7 @@
 				"entity.name.type"
 			],
 			"settings": {
-				"foreground": "#7397DE"
+				"foreground": "#4172D2"
 			}
 		},
 		{
@@ -541,7 +541,7 @@
 		{
 			"scope": "meta.property-name.css",
 			"settings": {
-				"foreground": "#7397DE"
+				"foreground": "#4172D2"
 			}
 		},
 		{
@@ -595,7 +595,7 @@
 		{
 			"scope": ["support"],
 			"settings": {
-				"foreground": "#7397DE"
+				"foreground": "#4172D2"
 			}
 		},
 		{

From f1a3b1c486049056e43eec48a6c77c3456c7a174 Mon Sep 17 00:00:00 2001
From: Hunter Johnston <johnstonhuntera@gmail.com>
Date: Fri, 24 Nov 2023 13:46:07 -0500
Subject: [PATCH 114/217] cleanup tabs

---
 src/components/demos/tabs-demo.svelte | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/demos/tabs-demo.svelte b/src/components/demos/tabs-demo.svelte
index 3977558f5..e5a7e10e9 100644
--- a/src/components/demos/tabs-demo.svelte
+++ b/src/components/demos/tabs-demo.svelte
@@ -85,28 +85,28 @@
 			<div class="flex flex-col gap-4 pt-5">
 				<div class="flex flex-col gap-1">
 					<Label.Root
-						for="username"
+						for="registerUsername"
 						class="text-sm font-medium text-foreground"
 					>
 						Username
 					</Label.Root>
 					<input
 						type="text"
-						id="username"
+						id="registerUsername"
 						placeholder="name@example.com"
 						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"
 					/>
 				</div>
 				<div class="flex flex-col gap-1">
 					<Label.Root
-						for="password"
+						for="registerPassword"
 						class="text-sm font-medium text-foreground"
 					>
 						Password
 					</Label.Root>
 					<div class="relative w-full">
 						<input
-							id="password"
+							id="registerPassword"
 							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"
 							placeholder="super_secret"
 							type="password"

From ec2151ddb262d214a06ebe097757485ac2cc362b Mon Sep 17 00:00:00 2001
From: Hunter Johnston <johnstonhuntera@gmail.com>
Date: Fri, 24 Nov 2023 14:01:13 -0500
Subject: [PATCH 115/217] merge calendar

---
 src/components/demos/calendar-demo.svelte     | 28 +++++++++++--------
 ...ridBodyCell.svelte => CalendarCell.svelte} |  0
 ...eadCell.svelte => CalendarHeadCell.svelte} |  0
 src/lib/bits/calendar/index.ts                | 12 ++++----
 4 files changed, 23 insertions(+), 17 deletions(-)
 rename src/lib/bits/calendar/components/{CalendarGridBodyCell.svelte => CalendarCell.svelte} (100%)
 rename src/lib/bits/calendar/components/{CalendarGridHeadCell.svelte => CalendarHeadCell.svelte} (100%)

diff --git a/src/components/demos/calendar-demo.svelte b/src/components/demos/calendar-demo.svelte
index 8ed9fd5c7..d4e34bce4 100644
--- a/src/components/demos/calendar-demo.svelte
+++ b/src/components/demos/calendar-demo.svelte
@@ -5,8 +5,12 @@
 	import { buttonVariants } from "../ui/button";
 </script>
 
-<Calendar.Root class="p-3 rounded-md border" let:months let:daysOfWeek>
-	<Calendar.Header class="flex justify-between items-center">
+<Calendar.Root
+	class="rounded-card border bg-background p-6 shadow-card"
+	let:months
+	let:daysOfWeek
+>
+	<Calendar.Header class="flex items-center justify-between">
 		<Calendar.PrevButton
 			class={cn(
 				buttonVariants({ variant: "outline" }),
@@ -25,34 +29,36 @@
 			<ChevronRight class="h-4 w-4" />
 		</Calendar.NextButton>
 	</Calendar.Header>
-	<div class="flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0 pt-4">
+	<div
+		class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0"
+	>
 		{#each months as month}
 			<Calendar.Grid class="w-full border-collapse space-y-1">
 				<Calendar.GridHead>
 					<Calendar.GridRow class="flex w-full justify-between">
 						{#each daysOfWeek as day}
-							<Calendar.GridHeadCell
-								class="text-muted-foreground rounded-md w-9 font-normal text-[0.8rem]"
+							<Calendar.HeadCell
+								class="w-9 rounded-md text-[0.8rem] font-medium text-muted-foreground"
 							>
 								<div>{day}</div>
-							</Calendar.GridHeadCell>
+							</Calendar.HeadCell>
 						{/each}
 					</Calendar.GridRow>
 				</Calendar.GridHead>
 				<Calendar.GridBody>
 					{#each month.weeks as weekDates}
-						<Calendar.GridRow class="flex w-full mt-2">
+						<Calendar.GridRow class="mt-2 flex w-full">
 							{#each weekDates as date}
-								<Calendar.GridBodyCell
+								<Calendar.Cell
 									{date}
-									class="h-9 w-9 text-center text-sm p-0 relative [&:has([aria-selected])]:bg-accent first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md focus-within:relative focus-within:z-20"
+									class="relative h-9 w-9 p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([aria-selected])]:bg-muted first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md"
 								>
 									<Calendar.Date
 										{date}
 										month={month.value}
-										class="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 hover:bg-accent hover:text-accent-foreground h-9 w-9 p-0 font-normal aria-selected:opacity-100 text-muted-foreground opacity-50"
+										class="focus-visible:ring-ring inline-flex h-9 w-9 items-center justify-center whitespace-nowrap rounded-md bg-background p-0 text-sm font-normal text-foreground ring-offset-background transition-colors hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 aria-selected:bg-muted data-[outside-month]:opacity-0"
 									/>
-								</Calendar.GridBodyCell>
+								</Calendar.Cell>
 							{/each}
 						</Calendar.GridRow>
 					{/each}
diff --git a/src/lib/bits/calendar/components/CalendarGridBodyCell.svelte b/src/lib/bits/calendar/components/CalendarCell.svelte
similarity index 100%
rename from src/lib/bits/calendar/components/CalendarGridBodyCell.svelte
rename to src/lib/bits/calendar/components/CalendarCell.svelte
diff --git a/src/lib/bits/calendar/components/CalendarGridHeadCell.svelte b/src/lib/bits/calendar/components/CalendarHeadCell.svelte
similarity index 100%
rename from src/lib/bits/calendar/components/CalendarGridHeadCell.svelte
rename to src/lib/bits/calendar/components/CalendarHeadCell.svelte
diff --git a/src/lib/bits/calendar/index.ts b/src/lib/bits/calendar/index.ts
index 846b19506..6ccf5a392 100644
--- a/src/lib/bits/calendar/index.ts
+++ b/src/lib/bits/calendar/index.ts
@@ -2,9 +2,9 @@ import Root from "./components/Calendar.svelte";
 import Date from "./components/CalendarDate.svelte";
 import Grid from "./components/CalendarGrid.svelte";
 import GridBody from "./components/CalendarGridBody.svelte";
-import GridBodyCell from "./components/CalendarGridBodyCell.svelte";
+import Cell from "./components/CalendarCell.svelte";
 import GridHead from "./components/CalendarGridHead.svelte";
-import GridHeadCell from "./components/CalendarGridHeadCell.svelte";
+import HeadCell from "./components/CalendarHeadCell.svelte";
 import GridRow from "./components/CalendarGridRow.svelte";
 import Header from "./components/CalendarHeader.svelte";
 import Heading from "./components/CalendarHeading.svelte";
@@ -16,9 +16,9 @@ export {
 	Date,
 	Grid,
 	GridBody,
-	GridBodyCell,
+	Cell,
 	GridHead,
-	GridHeadCell,
+	HeadCell,
 	GridRow,
 	Header,
 	Heading,
@@ -29,9 +29,9 @@ export {
 	Date as CalendarDate,
 	Grid as CalendarGrid,
 	GridBody as CalendarGridBody,
-	GridBodyCell as CalendarGridBodyCell,
+	Cell as CalendarGridBodyCell,
 	GridHead as CalendarGridHead,
-	GridHeadCell as CalendarGridHeadCell,
+	HeadCell as CalendarGridHeadCell,
 	GridRow as CalendarGridRow,
 	Header as CalendarHeader,
 	Heading as CalendarHeading,

From a8ee6fdb3f4626505e69aa6ae14635f78cdfe428 Mon Sep 17 00:00:00 2001
From: Hunter Johnston <johnstonhuntera@gmail.com>
Date: Fri, 24 Nov 2023 14:01:38 -0500
Subject: [PATCH 116/217] add changeset

---
 .changeset/mighty-cobras-care.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/mighty-cobras-care.md

diff --git a/.changeset/mighty-cobras-care.md b/.changeset/mighty-cobras-care.md
new file mode 100644
index 000000000..5f298c597
--- /dev/null
+++ b/.changeset/mighty-cobras-care.md
@@ -0,0 +1,5 @@
+---
+"bits-ui": minor
+---
+
+feat: Calendar

From 940c66d4140e22c4b78a504249f6c5b1cdf7a67d Mon Sep 17 00:00:00 2001
From: Hunter Johnston <johnstonhuntera@gmail.com>
Date: Fri, 24 Nov 2023 14:06:03 -0500
Subject: [PATCH 117/217] cal style

---
 src/components/demos/calendar-demo.svelte | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/demos/calendar-demo.svelte b/src/components/demos/calendar-demo.svelte
index d4e34bce4..1e77846b0 100644
--- a/src/components/demos/calendar-demo.svelte
+++ b/src/components/demos/calendar-demo.svelte
@@ -19,7 +19,7 @@
 		>
 			<ChevronLeft class="h-4 w-4" />
 		</Calendar.PrevButton>
-		<Calendar.Heading class="text-sm font-medium" />
+		<Calendar.Heading class="font-medium" />
 		<Calendar.NextButton
 			class={cn(
 				buttonVariants({ variant: "outline" }),
@@ -47,7 +47,7 @@
 				</Calendar.GridHead>
 				<Calendar.GridBody>
 					{#each month.weeks as weekDates}
-						<Calendar.GridRow class="mt-2 flex w-full">
+						<Calendar.GridRow class="mt-2 flex w-full gap-1">
 							{#each weekDates as date}
 								<Calendar.Cell
 									{date}
@@ -56,7 +56,7 @@
 									<Calendar.Date
 										{date}
 										month={month.value}
-										class="focus-visible:ring-ring inline-flex h-9 w-9 items-center justify-center whitespace-nowrap rounded-md bg-background p-0 text-sm font-normal text-foreground ring-offset-background transition-colors hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 aria-selected:bg-muted data-[outside-month]:opacity-0"
+										class="focus-visible:ring-ring inline-flex h-9 w-9 items-center justify-center whitespace-nowrap rounded-md bg-background p-0 text-sm font-normal text-foreground ring-offset-background transition-colors hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 aria-selected:bg-muted data-[outside-month]:pointer-events-none data-[outside-month]:opacity-0"
 									/>
 								</Calendar.Cell>
 							{/each}

From 3883b858a432b55857cab639215d67996c7d8e76 Mon Sep 17 00:00:00 2001
From: Hunter Johnston <johnstonhuntera@gmail.com>
Date: Fri, 24 Nov 2023 14:07:02 -0500
Subject: [PATCH 118/217] attrs

---
 src/lib/bits/calendar/components/CalendarCell.svelte     | 2 +-
 src/lib/bits/calendar/components/CalendarHeadCell.svelte | 2 +-
 src/lib/bits/calendar/ctx.ts                             | 4 ++--
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/lib/bits/calendar/components/CalendarCell.svelte b/src/lib/bits/calendar/components/CalendarCell.svelte
index 0b3ac8678..afed5bc9c 100644
--- a/src/lib/bits/calendar/components/CalendarCell.svelte
+++ b/src/lib/bits/calendar/components/CalendarCell.svelte
@@ -12,7 +12,7 @@
 	} = getCtx();
 
 	$: attrs = {
-		...getAttrs("grid-body-cell"),
+		...getAttrs("cell"),
 		"aria-disabled": $isDateDisabled(date) || $isDateUnavailable(date),
 		role: "gridcell"
 	};
diff --git a/src/lib/bits/calendar/components/CalendarHeadCell.svelte b/src/lib/bits/calendar/components/CalendarHeadCell.svelte
index 89cd1c928..b11a0f43d 100644
--- a/src/lib/bits/calendar/components/CalendarHeadCell.svelte
+++ b/src/lib/bits/calendar/components/CalendarHeadCell.svelte
@@ -5,7 +5,7 @@
 	type $$Props = GridHeadCellProps;
 	export let asChild: $$Props["asChild"] = false;
 
-	const attrs = getAttrs("grid-head-cell");
+	const attrs = getAttrs("head-cell");
 </script>
 
 {#if asChild}
diff --git a/src/lib/bits/calendar/ctx.ts b/src/lib/bits/calendar/ctx.ts
index fbbb99d54..a649a2069 100644
--- a/src/lib/bits/calendar/ctx.ts
+++ b/src/lib/bits/calendar/ctx.ts
@@ -16,9 +16,9 @@ const PARTS = [
 	"date",
 	"header",
 	"grid-head",
-	"grid-head-cell",
+	"head-cell",
 	"grid-body",
-	"grid-body-cell",
+	"cell",
 	"grid-row"
 ] as const;
 

From 7e08c09aa4d8b7b60814b316a8ca11f9eacdb63b Mon Sep 17 00:00:00 2001
From: Hunter Johnston <johnstonhuntera@gmail.com>
Date: Fri, 24 Nov 2023 14:13:22 -0500
Subject: [PATCH 119/217] range calendar

---
 content/components/range-calendar.md          |  14 +++
 src/config/navigation.ts                      |   5 +
 src/content/api-reference/index.ts            |   2 +
 .../components/RangeCalendar.svelte           | 100 ++++++++++++++++++
 .../components/RangeCalendarCell.svelte       |  27 +++++
 .../components/RangeCalendarDate.svelte       |  37 +++++++
 .../components/RangeCalendarGrid.svelte       |  29 +++++
 .../components/RangeCalendarGridBody.svelte   |  17 +++
 .../components/RangeCalendarGridHead.svelte   |  17 +++
 .../components/RangeCalendarGridRow.svelte    |  18 ++++
 .../components/RangeCalendarHeadCell.svelte   |  17 +++
 .../components/RangeCalendarHeader.svelte     |  16 +++
 .../components/RangeCalendarHeading.svelte    |  27 +++++
 .../components/RangeCalendarNextButton.svelte |  24 +++++
 .../components/RangeCalendarPrevButton.svelte |  29 +++++
 src/lib/bits/range-calendar/ctx.ts            |  40 +++++++
 src/lib/bits/range-calendar/index.ts          |  41 +++++++
 src/lib/bits/range-calendar/types.ts          |  93 ++++++++++++++++
 18 files changed, 553 insertions(+)
 create mode 100644 content/components/range-calendar.md
 create mode 100644 src/lib/bits/range-calendar/components/RangeCalendar.svelte
 create mode 100644 src/lib/bits/range-calendar/components/RangeCalendarCell.svelte
 create mode 100644 src/lib/bits/range-calendar/components/RangeCalendarDate.svelte
 create mode 100644 src/lib/bits/range-calendar/components/RangeCalendarGrid.svelte
 create mode 100644 src/lib/bits/range-calendar/components/RangeCalendarGridBody.svelte
 create mode 100644 src/lib/bits/range-calendar/components/RangeCalendarGridHead.svelte
 create mode 100644 src/lib/bits/range-calendar/components/RangeCalendarGridRow.svelte
 create mode 100644 src/lib/bits/range-calendar/components/RangeCalendarHeadCell.svelte
 create mode 100644 src/lib/bits/range-calendar/components/RangeCalendarHeader.svelte
 create mode 100644 src/lib/bits/range-calendar/components/RangeCalendarHeading.svelte
 create mode 100644 src/lib/bits/range-calendar/components/RangeCalendarNextButton.svelte
 create mode 100644 src/lib/bits/range-calendar/components/RangeCalendarPrevButton.svelte
 create mode 100644 src/lib/bits/range-calendar/ctx.ts
 create mode 100644 src/lib/bits/range-calendar/index.ts
 create mode 100644 src/lib/bits/range-calendar/types.ts

diff --git a/content/components/range-calendar.md b/content/components/range-calendar.md
new file mode 100644
index 000000000..e4626cc2d
--- /dev/null
+++ b/content/components/range-calendar.md
@@ -0,0 +1,14 @@
+---
+title: Range Calendar
+description: A calendar component with range selection.
+---
+
+<script>
+	import { APISection, ComponentPreview, CalendarDemo } from '@/components'
+</script>
+
+<ComponentPreview name="calendar-demo" comp="Calendar">
+
+<CalendarDemo slot="preview" />
+
+</ComponentPreview>
diff --git a/src/config/navigation.ts b/src/config/navigation.ts
index 9ddebd34e..41b3a4e06 100644
--- a/src/config/navigation.ts
+++ b/src/config/navigation.ts
@@ -135,6 +135,11 @@ export const navigation: Navigation = {
 					href: "/docs/components/radio-group",
 					items: []
 				},
+				{
+					title: "Range Calendar",
+					href: "/docs/components/range-calendar",
+					items: []
+				},
 				{
 					title: "Select",
 					href: "/docs/components/select",
diff --git a/src/content/api-reference/index.ts b/src/content/api-reference/index.ts
index 55f5c74cf..c8c5137b0 100644
--- a/src/content/api-reference/index.ts
+++ b/src/content/api-reference/index.ts
@@ -42,6 +42,7 @@ export const bits = [
 	"popover",
 	"progress",
 	"radio-group",
+	"range-calendar",
 	"select",
 	"separator",
 	"slider",
@@ -78,6 +79,7 @@ export const apiSchemas: Record<Bit, APISchema[]> = {
 	popover,
 	progress,
 	"radio-group": radioGroup,
+	"range-calendar": [],
 	select,
 	separator,
 	slider,
diff --git a/src/lib/bits/range-calendar/components/RangeCalendar.svelte b/src/lib/bits/range-calendar/components/RangeCalendar.svelte
new file mode 100644
index 000000000..507e73909
--- /dev/null
+++ b/src/lib/bits/range-calendar/components/RangeCalendar.svelte
@@ -0,0 +1,100 @@
+<script lang="ts">
+	import { melt } from "@melt-ui/svelte";
+	import { setCtx, getAttrs } from "../ctx.js";
+	import type { Props } from "../types.js";
+
+	type $$Props = Props;
+
+	export let placeholder: $$Props["placeholder"] = undefined;
+	export let onPlaceholderChange: $$Props["onPlaceholderChange"] = undefined;
+	export let value: $$Props["value"] = undefined;
+	export let onValueChange: $$Props["onValueChange"] = undefined;
+	export let preventDeselect: $$Props["preventDeselect"] = undefined;
+	export let minValue: $$Props["minValue"] = undefined;
+	export let maxValue: $$Props["maxValue"] = undefined;
+	export let pagedNavigation: $$Props["pagedNavigation"] = undefined;
+	export let weekStartsOn: $$Props["weekStartsOn"] = undefined;
+	export let locale: $$Props["locale"] = undefined;
+	export let isDateUnavailable: $$Props["isDateUnavailable"] = undefined;
+	export let isDateDisabled: $$Props["isDateDisabled"] = undefined;
+	export let disabled: $$Props["disabled"] = undefined;
+	export let readonly: $$Props["readonly"] = undefined;
+	export let fixedWeeks: $$Props["fixedWeeks"] = undefined;
+	export let calendarLabel: $$Props["calendarLabel"] = undefined;
+	export let asChild: $$Props["asChild"] = false;
+	export let id: $$Props["id"] = undefined;
+
+	const {
+		elements: { calendar },
+		states: { value: localValue, placeholder: localPlaceholder, months, daysOfWeek },
+		updateOption,
+		ids
+	} = setCtx({
+		defaultPlaceholder: placeholder,
+		defaultValue: value,
+		preventDeselect,
+		minValue,
+		maxValue,
+		pagedNavigation,
+		weekStartsOn,
+		locale,
+		isDateUnavailable,
+		isDateDisabled,
+		disabled,
+		readonly,
+		fixedWeeks,
+		calendarLabel,
+		onPlaceholderChange: ({ next }) => {
+			if (placeholder !== next) {
+				onPlaceholderChange?.(next);
+				placeholder = next;
+			}
+			return next;
+		},
+		onValueChange: ({ next }) => {
+			if (value !== next) {
+				onValueChange?.(next);
+				value = next;
+			}
+			return next;
+		}
+	});
+
+	$: if (id) {
+		ids.calendar.set(id);
+	}
+
+	$: value !== undefined && localValue.set(value);
+	$: placeholder !== undefined && localPlaceholder.set(placeholder);
+
+	$: updateOption("preventDeselect", preventDeselect);
+	$: updateOption("minValue", minValue);
+	$: updateOption("maxValue", maxValue);
+	$: updateOption("pagedNavigation", pagedNavigation);
+	$: updateOption("weekStartsOn", weekStartsOn);
+	$: updateOption("locale", locale);
+	$: updateOption("isDateUnavailable", isDateUnavailable);
+	$: updateOption("isDateDisabled", isDateDisabled);
+	$: updateOption("disabled", disabled);
+	$: updateOption("readonly", readonly);
+	$: updateOption("fixedWeeks", fixedWeeks);
+	$: updateOption("calendarLabel", calendarLabel);
+
+	$: builder = $calendar;
+	const attrs = getAttrs("root");
+
+	$: slotProps = {
+		builder,
+		attrs,
+		months: $months,
+		daysOfWeek: $daysOfWeek
+	};
+</script>
+
+{#if asChild}
+	<slot {...slotProps} />
+{:else}
+	<div use:melt={builder} {...$$restProps} {...attrs}>
+		<slot {...slotProps} />
+	</div>
+{/if}
diff --git a/src/lib/bits/range-calendar/components/RangeCalendarCell.svelte b/src/lib/bits/range-calendar/components/RangeCalendarCell.svelte
new file mode 100644
index 000000000..afed5bc9c
--- /dev/null
+++ b/src/lib/bits/range-calendar/components/RangeCalendarCell.svelte
@@ -0,0 +1,27 @@
+<script lang="ts">
+	import { getCtx, getAttrs } from "../ctx.js";
+	import type { GridBodyCellProps } from "../types.js";
+
+	type $$Props = GridBodyCellProps;
+
+	export let date: $$Props["date"];
+	export let asChild: $$Props["asChild"] = false;
+
+	const {
+		helpers: { isDateDisabled, isDateUnavailable }
+	} = getCtx();
+
+	$: attrs = {
+		...getAttrs("cell"),
+		"aria-disabled": $isDateDisabled(date) || $isDateUnavailable(date),
+		role: "gridcell"
+	};
+</script>
+
+{#if asChild}
+	<slot {attrs} />
+{:else}
+	<td {...attrs}>
+		<slot {attrs} />
+	</td>
+{/if}
diff --git a/src/lib/bits/range-calendar/components/RangeCalendarDate.svelte b/src/lib/bits/range-calendar/components/RangeCalendarDate.svelte
new file mode 100644
index 000000000..a22ef45df
--- /dev/null
+++ b/src/lib/bits/range-calendar/components/RangeCalendarDate.svelte
@@ -0,0 +1,37 @@
+<script lang="ts">
+	import { melt } from "@melt-ui/svelte";
+	import { getCtx, getAttrs } from "../ctx.js";
+	import type { DateProps } from "../types.js";
+
+	type $$Props = DateProps;
+
+	export let date: $$Props["date"];
+	export let month: $$Props["month"];
+	export let asChild: $$Props["asChild"] = false;
+
+	const {
+		elements: { cell },
+		helpers: { isDateDisabled, isDateUnavailable, isDateSelected }
+	} = getCtx();
+
+	$: builder = $cell(date, month);
+	const attrs = getAttrs("date");
+
+	$: slotProps = {
+		builder,
+		attrs,
+		disabled: $isDateDisabled(date),
+		unavailable: $isDateUnavailable(date),
+		selected: $isDateSelected(date)
+	};
+</script>
+
+{#if asChild}
+	<slot {...slotProps} />
+{:else}
+	<div use:melt={builder} {...attrs} {...$$restProps}>
+		<slot {...slotProps}>
+			{date.day}
+		</slot>
+	</div>
+{/if}
diff --git a/src/lib/bits/range-calendar/components/RangeCalendarGrid.svelte b/src/lib/bits/range-calendar/components/RangeCalendarGrid.svelte
new file mode 100644
index 000000000..3c7b3f15f
--- /dev/null
+++ b/src/lib/bits/range-calendar/components/RangeCalendarGrid.svelte
@@ -0,0 +1,29 @@
+<script lang="ts">
+	import { melt } from "@melt-ui/svelte";
+	import { getAttrs, getCtx } from "../ctx.js";
+	import type { GridProps } from "../types.js";
+
+	type $$Props = GridProps;
+
+	export let asChild: $$Props["asChild"] = false;
+
+	const {
+		elements: { grid }
+	} = getCtx();
+
+	$: builder = $grid;
+	const attrs = getAttrs("grid");
+
+	$: slotProps = {
+		builder,
+		attrs
+	};
+</script>
+
+{#if asChild}
+	<slot {...slotProps} />
+{:else}
+	<table use:melt={builder} {...$$restProps} {...attrs}>
+		<slot {...slotProps} />
+	</table>
+{/if}
diff --git a/src/lib/bits/range-calendar/components/RangeCalendarGridBody.svelte b/src/lib/bits/range-calendar/components/RangeCalendarGridBody.svelte
new file mode 100644
index 000000000..3dbc84e88
--- /dev/null
+++ b/src/lib/bits/range-calendar/components/RangeCalendarGridBody.svelte
@@ -0,0 +1,17 @@
+<script lang="ts">
+	import { getAttrs } from "../ctx.js";
+	import type { GridBodyProps } from "../types.js";
+
+	type $$Props = GridBodyProps;
+	export let asChild: $$Props["asChild"] = false;
+
+	const attrs = getAttrs("grid-body");
+</script>
+
+{#if asChild}
+	<slot {attrs} />
+{:else}
+	<tbody {...$$restProps} {...attrs}>
+		<slot />
+	</tbody>
+{/if}
diff --git a/src/lib/bits/range-calendar/components/RangeCalendarGridHead.svelte b/src/lib/bits/range-calendar/components/RangeCalendarGridHead.svelte
new file mode 100644
index 000000000..a290dbd42
--- /dev/null
+++ b/src/lib/bits/range-calendar/components/RangeCalendarGridHead.svelte
@@ -0,0 +1,17 @@
+<script lang="ts">
+	import { getAttrs } from "../ctx.js";
+	import type { GridHeadProps } from "../types.js";
+
+	type $$Props = GridHeadProps;
+	export let asChild: $$Props["asChild"] = false;
+
+	const attrs = { ...getAttrs("grid-head"), "aria-hidden": true };
+</script>
+
+{#if asChild}
+	<slot {attrs} />
+{:else}
+	<thead {...$$restProps} {...attrs}>
+		<slot />
+	</thead>
+{/if}
diff --git a/src/lib/bits/range-calendar/components/RangeCalendarGridRow.svelte b/src/lib/bits/range-calendar/components/RangeCalendarGridRow.svelte
new file mode 100644
index 000000000..ff14c3d16
--- /dev/null
+++ b/src/lib/bits/range-calendar/components/RangeCalendarGridRow.svelte
@@ -0,0 +1,18 @@
+<script lang="ts">
+	import { getAttrs } from "../ctx.js";
+	import type { GridRowProps } from "../types.js";
+
+	type $$Props = GridRowProps;
+
+	export let asChild: $$Props["asChild"] = false;
+
+	const attrs = getAttrs("grid-row");
+</script>
+
+{#if asChild}
+	<slot {attrs} />
+{:else}
+	<tr {...$$restProps} {...attrs}>
+		<slot {attrs} />
+	</tr>
+{/if}
diff --git a/src/lib/bits/range-calendar/components/RangeCalendarHeadCell.svelte b/src/lib/bits/range-calendar/components/RangeCalendarHeadCell.svelte
new file mode 100644
index 000000000..b11a0f43d
--- /dev/null
+++ b/src/lib/bits/range-calendar/components/RangeCalendarHeadCell.svelte
@@ -0,0 +1,17 @@
+<script lang="ts">
+	import { getAttrs } from "../ctx.js";
+	import type { GridHeadCellProps } from "../types.js";
+
+	type $$Props = GridHeadCellProps;
+	export let asChild: $$Props["asChild"] = false;
+
+	const attrs = getAttrs("head-cell");
+</script>
+
+{#if asChild}
+	<slot {attrs} />
+{:else}
+	<th {...$$restProps} {...attrs}>
+		<slot />
+	</th>
+{/if}
diff --git a/src/lib/bits/range-calendar/components/RangeCalendarHeader.svelte b/src/lib/bits/range-calendar/components/RangeCalendarHeader.svelte
new file mode 100644
index 000000000..ec1df8ace
--- /dev/null
+++ b/src/lib/bits/range-calendar/components/RangeCalendarHeader.svelte
@@ -0,0 +1,16 @@
+<script lang="ts">
+	import { getAttrs } from "../ctx.js";
+	import type { HeaderProps } from "../types.js";
+	type $$Props = HeaderProps;
+	export let asChild: $$Props["asChild"] = false;
+
+	const attrs = getAttrs("header");
+</script>
+
+{#if asChild}
+	<slot {attrs} />
+{:else}
+	<header {...$$restProps} {...attrs}>
+		<slot {attrs} />
+	</header>
+{/if}
diff --git a/src/lib/bits/range-calendar/components/RangeCalendarHeading.svelte b/src/lib/bits/range-calendar/components/RangeCalendarHeading.svelte
new file mode 100644
index 000000000..c4463f49a
--- /dev/null
+++ b/src/lib/bits/range-calendar/components/RangeCalendarHeading.svelte
@@ -0,0 +1,27 @@
+<script lang="ts">
+	import { melt } from "@melt-ui/svelte";
+	import { getAttrs, getCtx } from "../ctx.js";
+	import type { HeadingProps } from "../types.js";
+
+	type $$Props = HeadingProps;
+
+	export let asChild: $$Props["asChild"] = false;
+
+	const {
+		elements: { heading },
+		states: { headingValue }
+	} = getCtx();
+
+	$: builder = $heading;
+	const attrs = getAttrs("heading");
+</script>
+
+{#if asChild}
+	<slot {builder} {attrs} headingValue={$headingValue} />
+{:else}
+	<div use:melt={builder} {...$$restProps} {...attrs}>
+		<slot {builder} {attrs} headingValue={$headingValue}>
+			{$headingValue}
+		</slot>
+	</div>
+{/if}
diff --git a/src/lib/bits/range-calendar/components/RangeCalendarNextButton.svelte b/src/lib/bits/range-calendar/components/RangeCalendarNextButton.svelte
new file mode 100644
index 000000000..b5285d949
--- /dev/null
+++ b/src/lib/bits/range-calendar/components/RangeCalendarNextButton.svelte
@@ -0,0 +1,24 @@
+<script lang="ts">
+	import { melt } from "@melt-ui/svelte";
+	import { getAttrs, getCtx } from "../ctx.js";
+	import type { NextButtonProps } from "../types.js";
+
+	type $$Props = NextButtonProps;
+
+	export let asChild: $$Props["asChild"] = false;
+
+	const {
+		elements: { nextButton }
+	} = getCtx();
+
+	$: builder = $nextButton;
+	const attrs = getAttrs("next-button");
+</script>
+
+{#if asChild}
+	<slot {builder} {attrs} />
+{:else}
+	<button use:melt={builder} type="button" {...$$restProps} {...attrs}>
+		<slot {builder} {attrs} />
+	</button>
+{/if}
diff --git a/src/lib/bits/range-calendar/components/RangeCalendarPrevButton.svelte b/src/lib/bits/range-calendar/components/RangeCalendarPrevButton.svelte
new file mode 100644
index 000000000..3775bc3c0
--- /dev/null
+++ b/src/lib/bits/range-calendar/components/RangeCalendarPrevButton.svelte
@@ -0,0 +1,29 @@
+<script lang="ts">
+	import { melt } from "@melt-ui/svelte";
+	import { getAttrs, getCtx } from "../ctx.js";
+	import type { PrevButtonProps } from "../types.js";
+
+	type $$Props = PrevButtonProps;
+
+	export let asChild: $$Props["asChild"] = false;
+
+	const {
+		elements: { prevButton }
+	} = getCtx();
+
+	$: builder = $prevButton;
+	const attrs = getAttrs("prev-button");
+
+	$: slotProps = {
+		builder,
+		attrs
+	};
+</script>
+
+{#if asChild}
+	<slot {...slotProps} />
+{:else}
+	<button use:melt={builder} type="button" {...$$restProps} {...attrs}>
+		<slot {...slotProps} />
+	</button>
+{/if}
diff --git a/src/lib/bits/range-calendar/ctx.ts b/src/lib/bits/range-calendar/ctx.ts
new file mode 100644
index 000000000..a649a2069
--- /dev/null
+++ b/src/lib/bits/range-calendar/ctx.ts
@@ -0,0 +1,40 @@
+import {
+	createCalendar,
+	type Calendar as CalendarReturn,
+	type CreateCalendarProps
+} from "@melt-ui/svelte";
+import { getContext, setContext } from "svelte";
+import { removeUndefined, getOptionUpdater, createBitAttrs } from "$lib/internal/index.js";
+
+const NAME = "calendar";
+const PARTS = [
+	"root",
+	"prev-button",
+	"next-button",
+	"heading",
+	"grid",
+	"date",
+	"header",
+	"grid-head",
+	"head-cell",
+	"grid-body",
+	"cell",
+	"grid-row"
+] as const;
+
+export const getAttrs = createBitAttrs(NAME, PARTS);
+
+type GetReturn = CalendarReturn;
+
+export function setCtx(props: CreateCalendarProps) {
+	const calendar = createCalendar(removeUndefined(props));
+	setContext(NAME, calendar);
+	return {
+		...calendar,
+		updateOption: getOptionUpdater(calendar.options)
+	};
+}
+
+export function getCtx() {
+	return getContext<GetReturn>(NAME);
+}
diff --git a/src/lib/bits/range-calendar/index.ts b/src/lib/bits/range-calendar/index.ts
new file mode 100644
index 000000000..6ec3b8767
--- /dev/null
+++ b/src/lib/bits/range-calendar/index.ts
@@ -0,0 +1,41 @@
+import Root from "./components/RangeCalendar.svelte";
+import Date from "./components/RangeCalendarDate.svelte";
+import Grid from "./components/RangeCalendarGrid.svelte";
+import GridBody from "./components/RangeCalendarGridBody.svelte";
+import Cell from "./components/RangeCalendarCell.svelte";
+import GridHead from "./components/RangeCalendarGridHead.svelte";
+import HeadCell from "./components/RangeCalendarHeadCell.svelte";
+import GridRow from "./components/RangeCalendarGridRow.svelte";
+import Header from "./components/RangeCalendarHeader.svelte";
+import Heading from "./components/RangeCalendarHeading.svelte";
+import NextButton from "./components/RangeCalendarNextButton.svelte";
+import PrevButton from "./components/RangeCalendarPrevButton.svelte";
+
+export {
+	Root,
+	Date,
+	Grid,
+	GridBody,
+	Cell,
+	GridHead,
+	HeadCell,
+	GridRow,
+	Header,
+	Heading,
+	NextButton,
+	PrevButton,
+	//
+	Root as RangeCalendar,
+	Date as RangeCalendarDate,
+	Grid as RangeCalendarGrid,
+	GridBody as RangeCalendarGridBody,
+	Cell as RangeCalendarGridBodyCell,
+	GridHead as RangeCalendarGridHead,
+	HeadCell as RangeCalendarGridHeadCell,
+	GridRow as RangeCalendarGridRow,
+	Header as RangeCalendarHeader,
+	Heading as RangeCalendarHeading,
+	NextButton as RangeCalendarNextButton,
+	PrevButton as RangeCalendarPrevButton
+};
+export * from "./types.js";
diff --git a/src/lib/bits/range-calendar/types.ts b/src/lib/bits/range-calendar/types.ts
new file mode 100644
index 000000000..69f83d276
--- /dev/null
+++ b/src/lib/bits/range-calendar/types.ts
@@ -0,0 +1,93 @@
+import type { CreateCalendarProps } from "@melt-ui/svelte";
+import type { DateValue } from "@internationalized/date";
+import type { AsChild, HTMLDivAttributes, OnChangeFn } from "$lib/internal";
+import type {
+	HTMLAttributes,
+	HTMLButtonAttributes,
+	HTMLTableAttributes,
+	HTMLTdAttributes,
+	HTMLThAttributes
+} from "svelte/elements";
+
+type Props = Expand<
+	Omit<
+		CreateCalendarProps,
+		| "placeholder"
+		| "defaultPlaceholder"
+		| "value"
+		| "defaultValue"
+		| "onPlaceholderChange"
+		| "onValueChange"
+	> & {
+		placeholder?: DateValue;
+		value?: DateValue;
+		onPlaceholderChange?: OnChangeFn<DateValue>;
+		onValueChange?: OnChangeFn<DateValue | undefined>;
+		asChild?: boolean;
+	}
+> &
+	Omit<HTMLDivAttributes, "placeholder">;
+
+type ButtonProps = Expand<AsChild> & HTMLButtonAttributes;
+
+type PrevButtonProps = ButtonProps;
+type NextButtonProps = ButtonProps;
+
+type HeadingProps = Expand<AsChild> & HTMLDivAttributes;
+
+type HeaderProps = Expand<AsChild> & HTMLDivAttributes;
+
+type GridProps = Expand<AsChild> & HTMLTableAttributes;
+
+type GridHeadProps = Expand<AsChild> & HTMLAttributes<HTMLTableSectionElement>;
+
+type GridHeadCellProps = Expand<AsChild> & HTMLThAttributes;
+
+type GridBodyProps = Expand<AsChild> & HTMLAttributes<HTMLTableSectionElement>;
+
+type GridRowProps = Expand<AsChild> & HTMLAttributes<HTMLTableRowElement>;
+
+type BaseDateProps = Expand<
+	{
+		/**
+		 * The date value of the cell.
+		 */
+		date: DateValue;
+
+		/**
+		 * The month value that the cell belongs to.
+		 */
+		month: DateValue;
+	} & AsChild
+>;
+
+type GridBodyCellProps = Expand<Omit<BaseDateProps, "month">> & HTMLTdAttributes;
+type DateProps = Expand<BaseDateProps> & HTMLDivAttributes;
+
+export type {
+	Props,
+	PrevButtonProps,
+	NextButtonProps,
+	HeadingProps,
+	GridProps,
+	GridBodyCellProps,
+	GridRowProps,
+	GridBodyProps,
+	GridHeadCellProps,
+	GridHeadProps,
+	HeaderProps,
+	DateProps,
+	//
+	Props as CalendarProps,
+	PrevButtonProps as CalendarPrevButtonProps,
+	NextButtonProps as CalendarNextButtonProps,
+	HeadingProps as CalendarHeadingProps,
+	HeaderProps as CalendarHeaderProps,
+	GridProps as CalendarGridProps,
+	GridHeadProps as CalendarGridHeadProps,
+	GridHeadCellProps as CalendarGridHeadCellProps,
+	GridBodyProps as CalendarGridBodyProps,
+	GridBodyCellProps as CalendarGridBodyCellProps,
+	GridRowProps as CalendarGridRowProps,
+	DateProps as CalendarDateProps
+};

From 0512c66b0a348774077c7fe2445a68c6f97bf437 Mon Sep 17 00:00:00 2001
From: Hunter Johnston <johnstonhuntera@gmail.com>
Date: Fri, 24 Nov 2023 14:18:14 -0500
Subject: [PATCH 120/217] fix: range

---
 content/components/range-calendar.md          |  6 +-
 src/components/demos/index.ts                 |  1 +
 .../demos/range-calendar-demo.svelte          | 69 +++++++++++++++++++
 src/lib/bits/index.ts                         |  1 +
 .../components/RangeCalendarDate.svelte       |  5 +-
 src/lib/bits/range-calendar/ctx.ts            | 20 +++---
 6 files changed, 86 insertions(+), 16 deletions(-)
 create mode 100644 src/components/demos/range-calendar-demo.svelte

diff --git a/content/components/range-calendar.md b/content/components/range-calendar.md
index e4626cc2d..86bd46d1f 100644
--- a/content/components/range-calendar.md
+++ b/content/components/range-calendar.md
@@ -4,11 +4,11 @@ description: A calendar component with range selection.
 ---
 
 <script>
-	import { APISection, ComponentPreview, CalendarDemo } from '@/components'
+	import { APISection, ComponentPreview, RangeCalendarDemo } from '@/components'
 </script>
 
-<ComponentPreview name="calendar-demo" comp="Calendar">
+<ComponentPreview name="range-calendar-demo" comp="Range Calendar">
 
-<CalendarDemo slot="preview" />
+<RangeCalendarDemo slot="preview" />
 
 </ComponentPreview>
diff --git a/src/components/demos/index.ts b/src/components/demos/index.ts
index 0807e9db0..8fd33ef4c 100644
--- a/src/components/demos/index.ts
+++ b/src/components/demos/index.ts
@@ -15,6 +15,7 @@ export { default as MenubarDemo } from "./menubar-demo.svelte";
 export { default as PopoverDemo } from "./popover-demo.svelte";
 export { default as ProgressDemo } from "./progress-demo.svelte";
 export { default as RadioGroupDemo } from "./radio-group-demo.svelte";
+export { default as RangeCalendarDemo } from "./range-calendar-demo.svelte";
 export { default as SelectDemo } from "./select-demo.svelte";
 export { default as SeparatorDemo } from "./separator-demo.svelte";
 export { default as SliderDemo } from "./slider-demo.svelte";
diff --git a/src/components/demos/range-calendar-demo.svelte b/src/components/demos/range-calendar-demo.svelte
new file mode 100644
index 000000000..382acc5ad
--- /dev/null
+++ b/src/components/demos/range-calendar-demo.svelte
@@ -0,0 +1,69 @@
+<script lang="ts">
+	import { RangeCalendar } from "$lib";
+	import { cn } from "@/utils";
+	import { ChevronLeft, ChevronRight } from "lucide-svelte";
+	import { buttonVariants } from "../ui/button";
+</script>
+
+<RangeCalendar.Root
+	class="rounded-card border bg-background p-6 shadow-card"
+	let:months
+	let:daysOfWeek
+>
+	<RangeCalendar.Header class="flex items-center justify-between">
+		<RangeCalendar.PrevButton
+			class={cn(
+				buttonVariants({ variant: "outline" }),
+				"h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100"
+			)}
+		>
+			<ChevronLeft class="h-4 w-4" />
+		</RangeCalendar.PrevButton>
+		<RangeCalendar.Heading class="font-medium" />
+		<RangeCalendar.NextButton
+			class={cn(
+				buttonVariants({ variant: "outline" }),
+				"h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100"
+			)}
+		>
+			<ChevronRight class="h-4 w-4" />
+		</RangeCalendar.NextButton>
+	</RangeCalendar.Header>
+	<div
+		class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0"
+	>
+		{#each months as month}
+			<RangeCalendar.Grid class="w-full border-collapse space-y-1">
+				<RangeCalendar.GridHead>
+					<RangeCalendar.GridRow class="flex w-full justify-between">
+						{#each daysOfWeek as day}
+							<RangeCalendar.HeadCell
+								class="w-9 rounded-md text-[0.8rem] font-medium text-muted-foreground"
+							>
+								<div>{day}</div>
+							</RangeCalendar.HeadCell>
+						{/each}
+					</RangeCalendar.GridRow>
+				</RangeCalendar.GridHead>
+				<RangeCalendar.GridBody>
+					{#each month.weeks as weekDates}
+						<RangeCalendar.GridRow class="mt-2 flex w-full gap-1">
+							{#each weekDates as date}
+								<RangeCalendar.Cell
+									{date}
+									class="relative h-9 w-9 p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([aria-selected])]:bg-muted first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md"
+								>
+									<RangeCalendar.Date
+										{date}
+										month={month.value}
+										class="focus-visible:ring-ring inline-flex h-9 w-9 items-center justify-center whitespace-nowrap rounded-md bg-background p-0 text-sm font-normal text-foreground ring-offset-background transition-colors hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 aria-selected:bg-muted data-[outside-month]:pointer-events-none data-[outside-month]:opacity-0"
+									/>
+								</RangeCalendar.Cell>
+							{/each}
+						</RangeCalendar.GridRow>
+					{/each}
+				</RangeCalendar.GridBody>
+			</RangeCalendar.Grid>
+		{/each}
+	</div>
+</RangeCalendar.Root>
diff --git a/src/lib/bits/index.ts b/src/lib/bits/index.ts
index 2570b9940..9a79ba5bf 100644
--- a/src/lib/bits/index.ts
+++ b/src/lib/bits/index.ts
@@ -15,6 +15,7 @@ export * as Menubar from "./menubar/index.js";
 export * as Popover from "./popover/index.js";
 export * as Progress from "./progress/index.js";
 export * as RadioGroup from "./radio-group/index.js";
+export * as RangeCalendar from "./range-calendar/index.js";
 export * as Select from "./select/index.js";
 export * as Separator from "./separator/index.js";
 export * as Slider from "./slider/index.js";
diff --git a/src/lib/bits/range-calendar/components/RangeCalendarDate.svelte b/src/lib/bits/range-calendar/components/RangeCalendarDate.svelte
index a22ef45df..c45e9ac7a 100644
--- a/src/lib/bits/range-calendar/components/RangeCalendarDate.svelte
+++ b/src/lib/bits/range-calendar/components/RangeCalendarDate.svelte
@@ -11,7 +11,7 @@
 
 	const {
 		elements: { cell },
-		helpers: { isDateDisabled, isDateUnavailable, isDateSelected }
+		helpers: { isDateDisabled, isDateUnavailable }
 	} = getCtx();
 
 	$: builder = $cell(date, month);
@@ -21,8 +21,7 @@
 		builder,
 		attrs,
 		disabled: $isDateDisabled(date),
-		unavailable: $isDateUnavailable(date),
-		selected: $isDateSelected(date)
+		unavailable: $isDateUnavailable(date)
 	};
 </script>
 
diff --git a/src/lib/bits/range-calendar/ctx.ts b/src/lib/bits/range-calendar/ctx.ts
index a649a2069..b62fc7f33 100644
--- a/src/lib/bits/range-calendar/ctx.ts
+++ b/src/lib/bits/range-calendar/ctx.ts
@@ -1,12 +1,12 @@
 import {
-	createCalendar,
-	type Calendar as CalendarReturn,
-	type CreateCalendarProps
+	type RangeCalendar as RangeCalendarReturn,
+	type CreateRangeCalendarProps,
+	createRangeCalendar
 } from "@melt-ui/svelte";
 import { getContext, setContext } from "svelte";
 import { removeUndefined, getOptionUpdater, createBitAttrs } from "$lib/internal/index.js";
 
-const NAME = "calendar";
+const NAME = "range-calendar";
 const PARTS = [
 	"root",
 	"prev-button",
@@ -24,14 +24,14 @@ const PARTS = [
 
 export const getAttrs = createBitAttrs(NAME, PARTS);
 
-type GetReturn = CalendarReturn;
+type GetReturn = RangeCalendarReturn;
 
-export function setCtx(props: CreateCalendarProps) {
-	const calendar = createCalendar(removeUndefined(props));
-	setContext(NAME, calendar);
+export function setCtx(props: CreateRangeCalendarProps) {
+	const rangeCalendar = createRangeCalendar(removeUndefined(props));
+	setContext(NAME, rangeCalendar);
 	return {
-		...calendar,
-		updateOption: getOptionUpdater(calendar.options)
+		...rangeCalendar,
+		updateOption: getOptionUpdater(rangeCalendar.options)
 	};
 }
 

From 0b959df2ec45ce8e58f2b4ce1ebc33c7199ac125 Mon Sep 17 00:00:00 2001
From: Hunter Johnston <johnstonhuntera@gmail.com>
Date: Fri, 24 Nov 2023 15:10:22 -0500
Subject: [PATCH 121/217] fix: pnpm lock

---
 package.json   | 10 +++++-----
 pnpm-lock.yaml | 54 ++++++++++++++++++++++++--------------------------
 2 files changed, 31 insertions(+), 33 deletions(-)

diff --git a/package.json b/package.json
index fb77757c5..9c60329ef 100644
--- a/package.json
+++ b/package.json
@@ -35,11 +35,11 @@
 	"devDependencies": {
 		"@changesets/cli": "^2.26.2",
 		"@huntabyte/mdsvex": "0.16.5",
-		"@melt-ui/pp": "^0.1.3",
+		"@melt-ui/pp": "^0.1.4",
 		"@playwright/test": "^1.28.1",
-		"@sveltejs/adapter-vercel": "^3.0.3",
-		"@sveltejs/kit": "^1.27.4",
-		"@sveltejs/package": "^2.2.2",
+		"@sveltejs/adapter-vercel": "^3.1.0",
+		"@sveltejs/kit": "^1.27.6",
+		"@sveltejs/package": "^2.2.3",
 		"@svitejs/changesets-changelog-github-compact": "^1.1.0",
 		"@tailwindcss/typography": "^0.5.10",
 		"@testing-library/dom": "^9.3.1",
@@ -94,7 +94,7 @@
 	"type": "module",
 	"dependencies": {
 		"@internationalized/date": "^3.5.0",
-		"@melt-ui/svelte": "0.61.1",
+		"@melt-ui/svelte": "0.62.1",
 		"nanoid": "^5.0.3"
 	},
 	"peerDependencies": {
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 1bf0436f5..a7294cd98 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -9,8 +9,8 @@ dependencies:
     specifier: ^3.5.0
     version: 3.5.0
   '@melt-ui/svelte':
-    specifier: 0.62.0
-    version: 0.62.0(svelte@4.2.3)
+    specifier: 0.62.1
+    version: 0.62.1(svelte@4.2.3)
   nanoid:
     specifier: ^5.0.3
     version: 5.0.3
@@ -23,20 +23,20 @@ devDependencies:
     specifier: 0.16.5
     version: 0.16.5(svelte@4.2.3)
   '@melt-ui/pp':
-    specifier: ^0.1.3
-    version: 0.1.3(@melt-ui/svelte@0.62.0)(svelte@4.2.3)
+    specifier: ^0.1.4
+    version: 0.1.4(@melt-ui/svelte@0.62.1)(svelte@4.2.3)
   '@playwright/test':
     specifier: ^1.28.1
     version: 1.36.2
   '@sveltejs/adapter-vercel':
-    specifier: ^3.0.3
-    version: 3.0.3(@sveltejs/kit@1.27.4)
+    specifier: ^3.1.0
+    version: 3.1.0(@sveltejs/kit@1.27.6)
   '@sveltejs/kit':
-    specifier: ^1.27.4
-    version: 1.27.4(svelte@4.2.3)(vite@4.5.0)
+    specifier: ^1.27.6
+    version: 1.27.6(svelte@4.2.3)(vite@4.5.0)
   '@sveltejs/package':
-    specifier: ^2.2.2
-    version: 2.2.2(svelte@4.2.3)(typescript@5.2.2)
+    specifier: ^2.2.3
+    version: 2.2.3(svelte@4.2.3)(typescript@5.2.2)
   '@svitejs/changesets-changelog-github-compact':
     specifier: ^1.1.0
     version: 1.1.0
@@ -933,7 +933,6 @@ packages:
     resolution: {integrity: sha512-nw0Q+oRkizBWMioseI8+2TeUPEyopJVz5YxoYVzR0W1v+2YytiYah7s/ot35F149q/xAg4F1gT/6eTd+tsUpFQ==}
     dependencies:
       '@swc/helpers': 0.5.3
-    dev: false
 
   /@jest/expect-utils@29.7.0:
     resolution: {integrity: sha512-GlsNBWiFQFCVi9QVSx7f5AgMeLxe9YCCs5PuP2O2LdjDAA8Jh9eX7lA1Jq/xdXw3Wb3hyvlFNfZIfcRetSzYcA==}
@@ -1072,20 +1071,20 @@ packages:
       - supports-color
     dev: true
 
-  /@melt-ui/pp@0.1.3(@melt-ui/svelte@0.62.0)(svelte@4.2.3):
-    resolution: {integrity: sha512-RuT+pmNAF3aT4lPHaQ1ojTvsV5RSZRuT/wYrCGcOAMoQwM5FdN/pEAvJUhO12ShaiTeUUYbI+dLq9eJRrgy60A==}
+  /@melt-ui/pp@0.1.4(@melt-ui/svelte@0.62.1)(svelte@4.2.3):
+    resolution: {integrity: sha512-zR+Kl3CZJPJBHW8V7YcdQCMI/dVcnW9Ct3yGbVaIywYVStVRS7F9uEDOea3xLLT2WTGodQePzPlUn53yKFu87g==}
     engines: {pnpm: '>=8.6.3'}
     peerDependencies:
       '@melt-ui/svelte': '>= 0.29.0'
       svelte: ^3.55.0 || ^4.0.0 || ^5.0.0-next.1
     dependencies:
-      '@melt-ui/svelte': 0.62.0(svelte@4.2.3)
+      '@melt-ui/svelte': 0.62.1(svelte@4.2.3)
       estree-walker: 3.0.3
       svelte: 4.2.3
     dev: true
 
-  /@melt-ui/svelte@0.62.0(svelte@4.2.3):
-    resolution: {integrity: sha512-O0yrxClzrEt0iOdTBeslYopo4Oy9rdDgqOmqGrxZaFKdxlHmA+mBn40G1Xogf9OwhIW3Snc96q3XJqtGH8Up3A==}
+  /@melt-ui/svelte@0.62.1(svelte@4.2.3):
+    resolution: {integrity: sha512-YgQzlNWI/Ehtu30vGC5md+QdAHaW7nV7OVTEy74b23phjAsozex2q6OnbjJ5/F0rxdHzFU7p1iEZyVZ33Sd7bQ==}
     peerDependencies:
       svelte: '>=3 <5'
     dependencies:
@@ -1398,21 +1397,21 @@ packages:
     resolution: {integrity: sha512-+Fj43pSMwJs4KRrH/938Uf+uAELIgVBmQzg/q1YG10djyfA3TnrU8N8XzqCh/okZdszqBQTZf96idMfE5lnwTA==}
     dev: true
 
-  /@sveltejs/adapter-vercel@3.0.3(@sveltejs/kit@1.27.4):
-    resolution: {integrity: sha512-0FQMjR6klW4627ewdclSr0lUe/DqiiyOaRTfgb5cXgNbVMsZMOA2fQ77TYQnJdvMfSEWe6y8uznV48XqKh9+vA==}
+  /@sveltejs/adapter-vercel@3.1.0(@sveltejs/kit@1.27.6):
+    resolution: {integrity: sha512-AkG7GuqPj/70zxfuOV7QbxXVuYFPUlyFEPlGUSXynDbIBTYu1Er+c676M2egnAyw0flB+kpj6nlxJIElRLKAaA==}
     peerDependencies:
       '@sveltejs/kit': ^1.5.0
     dependencies:
-      '@sveltejs/kit': 1.27.4(svelte@4.2.3)(vite@4.5.0)
-      '@vercel/nft': 0.23.1
+      '@sveltejs/kit': 1.27.6(svelte@4.2.3)(vite@4.5.0)
+      '@vercel/nft': 0.24.3
       esbuild: 0.18.18
     transitivePeerDependencies:
       - encoding
       - supports-color
     dev: true
 
-  /@sveltejs/kit@1.27.4(svelte@4.2.3)(vite@4.5.0):
-    resolution: {integrity: sha512-Vxl8Jf0C1+/8i/slsxFOnwJntCBDLueO/O6GJ0390KUnyW3Zs+4ZiIinD+cEcYnJPQQ9CRzVSr9Bn6DbmTn4Dw==}
+  /@sveltejs/kit@1.27.6(svelte@4.2.3)(vite@4.5.0):
+    resolution: {integrity: sha512-GsjTkMbKzXdbeRg0tk8S7HNShQ4879ftRr0ZHaZfjbig1xQwG57Bvcm9U9/mpLJtCapLbLWUnygKrgcLISLC8A==}
     engines: {node: ^16.14 || >=18}
     hasBin: true
     requiresBuild: true
@@ -1439,8 +1438,8 @@ packages:
       - supports-color
     dev: true
 
-  /@sveltejs/package@2.2.2(svelte@4.2.3)(typescript@5.2.2):
-    resolution: {integrity: sha512-rP3sVv6cAntcdcG4r4KspLU6nZYYUrHJBAX3Arrw0KJFdgxtlsi2iDwN0Jwr/vIkgjcU0ZPWM8kkT5kpZDlWAw==}
+  /@sveltejs/package@2.2.3(svelte@4.2.3)(typescript@5.2.2):
+    resolution: {integrity: sha512-iZEC5qw+2RIjfIAHR3O+IeokJIjVM/ieoxPxj6YmZCwu5JKFADtC4jzjSUJ7GkCMUQ4HqE7u4/3cCxXBocxi8A==}
     engines: {node: ^16.14 || >=18}
     hasBin: true
     peerDependencies:
@@ -1506,7 +1505,6 @@ packages:
     resolution: {integrity: sha512-FaruWX6KdudYloq1AHD/4nU+UsMTdNE8CKyrseXWEcgjDAbvkwJg2QGPAnfIJLIWsjZOSPLOAykK6fuYp4vp4A==}
     dependencies:
       tslib: 2.6.2
-    dev: false
 
   /@tailwindcss/typography@0.5.10(tailwindcss@3.3.5):
     resolution: {integrity: sha512-Pe8BuPJQJd3FfRnm6H0ulKIGoMEQS+Vq01R6M5aCrFB/ccR/shT+0kXLjouGC1gFLm9hopTFN+DMP0pfwRWzPw==}
@@ -1883,9 +1881,9 @@ packages:
     resolution: {integrity: sha512-zuVdFrMJiuCDQUMCzQaD6KL28MjnqqN8XnAqiEq9PNm/hCPTSGfrXCOfwj1ow4LFb/tNymJPwsNbVePc1xFqrQ==}
     dev: true
 
-  /@vercel/nft@0.23.1:
-    resolution: {integrity: sha512-NE0xSmGWVhgHF1OIoir71XAd0W0C1UE3nzFyhpFiMr3rVhetww7NvM1kc41trBsPG37Bh+dE5FYCTMzM/gBu0w==}
-    engines: {node: '>=14'}
+  /@vercel/nft@0.24.3:
+    resolution: {integrity: sha512-IyBdIxmFAeGZnEfMgt4QrGK7XX4lWazlQj34HEi9dw04/WeDBJ7r1yaOIO5tTf9pbfvwUFodj9b0H+NDGGoOMg==}
+    engines: {node: '>=16'}
     hasBin: true
     dependencies:
       '@mapbox/node-pre-gyp': 1.0.11

From 87f7e6259b837d668bf3c72fa43e12d9c82731aa Mon Sep 17 00:00:00 2001
From: Hunter Johnston <johnstonhuntera@gmail.com>
Date: Sat, 25 Nov 2023 12:45:47 -0500
Subject: [PATCH 122/217] fix: menubar border color

---
 src/components/demos/menubar-demo.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/demos/menubar-demo.svelte b/src/components/demos/menubar-demo.svelte
index df1300559..f4771522f 100644
--- a/src/components/demos/menubar-demo.svelte
+++ b/src/components/demos/menubar-demo.svelte
@@ -15,7 +15,7 @@
 </script>
 
 <Menubar.Root
-	class="flex h-12 items-center gap-1 rounded-[10px] border border-muted px-[3px] shadow-mini"
+	class="flex h-12 items-center gap-1 rounded-[10px] border border-dark-10 px-[3px] shadow-mini"
 >
 	<div class="px-[10px]">
 		<Cat class="h-6 w-6" />

From 20aefa8831e1c4279dda3a17f4826d4a05b4a32e Mon Sep 17 00:00:00 2001
From: Hunter Johnston <johnstonhuntera@gmail.com>
Date: Sat, 25 Nov 2023 12:46:24 -0500
Subject: [PATCH 123/217] fix: menubar bg

---
 src/components/demos/menubar-demo.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/demos/menubar-demo.svelte b/src/components/demos/menubar-demo.svelte
index f4771522f..287a21b0e 100644
--- a/src/components/demos/menubar-demo.svelte
+++ b/src/components/demos/menubar-demo.svelte
@@ -15,7 +15,7 @@
 </script>
 
 <Menubar.Root
-	class="flex h-12 items-center gap-1 rounded-[10px] border border-dark-10 px-[3px] shadow-mini"
+	class="flex h-12 items-center gap-1 rounded-[10px] border border-dark-10 bg-background px-[3px] shadow-mini"
 >
 	<div class="px-[10px]">
 		<Cat class="h-6 w-6" />

From f988d5598be84a8e4e138e041b9a7d50b2026c44 Mon Sep 17 00:00:00 2001
From: Hunter Johnston <johnstonhuntera@gmail.com>
Date: Sat, 25 Nov 2023 12:48:03 -0500
Subject: [PATCH 124/217] fixes

---
 src/components/demos/collapsible-demo.svelte  | 2 +-
 src/components/demos/context-menu-demo.svelte | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/demos/collapsible-demo.svelte b/src/components/demos/collapsible-demo.svelte
index 2d9df820a..4bdf174db 100644
--- a/src/components/demos/collapsible-demo.svelte
+++ b/src/components/demos/collapsible-demo.svelte
@@ -8,7 +8,7 @@
 	<div class="flex items-center justify-between space-x-10">
 		<h4 class="text-[15px] font-medium">@huntabyte starred 3 repositories</h4>
 		<Collapsible.Trigger
-			class="inline-flex h-10 w-10 items-center justify-center rounded-[9px] border border-border-input shadow-btn transition-all hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground focus-visible:ring-offset-2 focus-visible:ring-offset-background active:scale-98"
+			class="inline-flex h-10 w-10 items-center justify-center rounded-[9px] border border-border-input bg-background shadow-btn transition-all hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground focus-visible:ring-offset-2 focus-visible:ring-offset-background active:scale-98"
 		>
 			<CaretUpDown class="h-4 w-4 text-foreground" weight="bold" />
 			<span class="sr-only">Toggle</span>
diff --git a/src/components/demos/context-menu-demo.svelte b/src/components/demos/context-menu-demo.svelte
index eec7bb451..71bab89d8 100644
--- a/src/components/demos/context-menu-demo.svelte
+++ b/src/components/demos/context-menu-demo.svelte
@@ -12,7 +12,7 @@
 
 <ContextMenu.Root>
 	<ContextMenu.Trigger
-		class="flex h-[188px] w-[279px] select-none items-center justify-center rounded-card border-2 border-dashed border-border-input bg-background  font-semibold text-muted-foreground"
+		class="flex h-[188px] w-[279px] select-none items-center justify-center rounded-card border-2 border-dashed border-border-input bg-transparent font-semibold text-muted-foreground"
 	>
 		<div class="flex flex-col items-center justify-center gap-4 text-center">
 			<MouseSimple class="sq-8" />

From f917f01bd5ec667d81d6015cf92072c87414ac0e Mon Sep 17 00:00:00 2001
From: Hunter Johnston <johnstonhuntera@gmail.com>
Date: Sat, 25 Nov 2023 13:29:17 -0500
Subject: [PATCH 125/217] init calendar api reference

---
 content/components/calendar.md                |   3 +
 package.json                                  |   2 +-
 pnpm-lock.yaml                                |  14 +-
 src/content/api-reference/calendar.ts         | 345 ++++++++++++++++++
 src/content/api-reference/index.ts            |   3 +-
 src/lib/bits/calendar/_types.ts               |  78 ++++
 .../calendar/components/CalendarCell.svelte   |   5 +-
 .../components/CalendarHeadCell.svelte        |   4 +-
 src/lib/bits/calendar/types.ts                |  68 +---
 9 files changed, 459 insertions(+), 63 deletions(-)
 create mode 100644 src/content/api-reference/calendar.ts
 create mode 100644 src/lib/bits/calendar/_types.ts

diff --git a/content/components/calendar.md b/content/components/calendar.md
index 7105b5c0d..3b66a01d5 100644
--- a/content/components/calendar.md
+++ b/content/components/calendar.md
@@ -5,6 +5,7 @@ description: A calendar component.
 
 <script>
 	import { APISection, ComponentPreview, CalendarDemo } from '@/components'
+	export let schemas;
 </script>
 
 <ComponentPreview name="calendar-demo" comp="Calendar">
@@ -12,3 +13,5 @@ description: A calendar component.
 <CalendarDemo slot="preview" />
 
 </ComponentPreview>
+
+<APISection {schemas} />
diff --git a/package.json b/package.json
index 9c60329ef..17864ea1d 100644
--- a/package.json
+++ b/package.json
@@ -94,7 +94,7 @@
 	"type": "module",
 	"dependencies": {
 		"@internationalized/date": "^3.5.0",
-		"@melt-ui/svelte": "0.62.1",
+		"@melt-ui/svelte": "0.63.0",
 		"nanoid": "^5.0.3"
 	},
 	"peerDependencies": {
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index a7294cd98..d7a1427d9 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -9,8 +9,8 @@ dependencies:
     specifier: ^3.5.0
     version: 3.5.0
   '@melt-ui/svelte':
-    specifier: 0.62.1
-    version: 0.62.1(svelte@4.2.3)
+    specifier: 0.63.0
+    version: 0.63.0(svelte@4.2.3)
   nanoid:
     specifier: ^5.0.3
     version: 5.0.3
@@ -24,7 +24,7 @@ devDependencies:
     version: 0.16.5(svelte@4.2.3)
   '@melt-ui/pp':
     specifier: ^0.1.4
-    version: 0.1.4(@melt-ui/svelte@0.62.1)(svelte@4.2.3)
+    version: 0.1.4(@melt-ui/svelte@0.63.0)(svelte@4.2.3)
   '@playwright/test':
     specifier: ^1.28.1
     version: 1.36.2
@@ -1071,20 +1071,20 @@ packages:
       - supports-color
     dev: true
 
-  /@melt-ui/pp@0.1.4(@melt-ui/svelte@0.62.1)(svelte@4.2.3):
+  /@melt-ui/pp@0.1.4(@melt-ui/svelte@0.63.0)(svelte@4.2.3):
     resolution: {integrity: sha512-zR+Kl3CZJPJBHW8V7YcdQCMI/dVcnW9Ct3yGbVaIywYVStVRS7F9uEDOea3xLLT2WTGodQePzPlUn53yKFu87g==}
     engines: {pnpm: '>=8.6.3'}
     peerDependencies:
       '@melt-ui/svelte': '>= 0.29.0'
       svelte: ^3.55.0 || ^4.0.0 || ^5.0.0-next.1
     dependencies:
-      '@melt-ui/svelte': 0.62.1(svelte@4.2.3)
+      '@melt-ui/svelte': 0.63.0(svelte@4.2.3)
       estree-walker: 3.0.3
       svelte: 4.2.3
     dev: true
 
-  /@melt-ui/svelte@0.62.1(svelte@4.2.3):
-    resolution: {integrity: sha512-YgQzlNWI/Ehtu30vGC5md+QdAHaW7nV7OVTEy74b23phjAsozex2q6OnbjJ5/F0rxdHzFU7p1iEZyVZ33Sd7bQ==}
+  /@melt-ui/svelte@0.63.0(svelte@4.2.3):
+    resolution: {integrity: sha512-lAQgrglE4NrWyxcS99Px8iWYN09riU7Zt/AxV09FkFeejo7c3PhGFiCqr3cmQQi4JgdTB+Ek52E6hKgVHKZ/2w==}
     peerDependencies:
       svelte: '>=3 <5'
     dependencies:
diff --git a/src/content/api-reference/calendar.ts b/src/content/api-reference/calendar.ts
new file mode 100644
index 000000000..1ebd3631a
--- /dev/null
+++ b/src/content/api-reference/calendar.ts
@@ -0,0 +1,345 @@
+import type { APISchema } from "@/types";
+import * as C from "@/content/constants.js";
+import { asChild } from "@/content/api-reference/helpers.js";
+import type * as Calendar from "$lib/bits/calendar/_types.js";
+
+const root: APISchema<Calendar.Props> = {
+	title: "Root",
+	description: "The root calendar component which contains all other calendar components.",
+	props: {
+		value: {
+			type: "DateValue",
+			description: "The selected date."
+		},
+		onValueChange: {
+			type: {
+				type: C.FUNCTION,
+				definition: "(date: DateValue | undefined) => void"
+			},
+			description: "A function that is called when the selected date changes."
+		},
+		placeholder: {
+			type: "DateValue",
+			description:
+				"The placeholder date, which is used to determine what month to display when no date is selected. This updates as the user navigates the calendar, and can be used to programatically control the calendar's view."
+		},
+		onPlaceholderChange: {
+			type: {
+				type: C.FUNCTION,
+				definition: "(date: DateValue) => void"
+			},
+			description: "A function that is called when the placeholder date changes."
+		},
+		pagedNavigation: {
+			type: C.BOOLEAN,
+			description:
+				"Whether or not to use paged navigation for the calendar. Paged navigation causes the previous and next buttons to navigate by the number of months displayed at once, rather than by one month.",
+			default: C.FALSE
+		},
+		preventDeselect: {
+			type: C.BOOLEAN,
+			description:
+				"Whether or not to prevent the user from deselecting a date without selecting another date first.",
+			default: C.FALSE
+		},
+		weekStartsOn: {
+			type: C.NUMBER,
+			description: "The day of the week to start the calendar on. 0 is Sunday, 1 is Monday, etc.",
+			default: "0"
+		},
+		calendarLabel: {
+			type: C.STRING,
+			description: "The accessible label for the calendar."
+		},
+		fixedWeeks: {
+			type: C.BOOLEAN,
+			description: "Whether or not to always display 6 weeks in the calendar.",
+			default: C.FALSE
+		},
+		isDateDisabled: {
+			type: {
+				type: C.FUNCTION,
+				definition: "(date: DateValue) => boolean"
+			},
+			description: "A function that returns whether or not a date is disabled."
+		},
+		isDateUnavailable: {
+			type: {
+				type: C.FUNCTION,
+				definition: "(date: DateValue) => boolean"
+			},
+			description: "A function that returns whether or not a date is unavailable."
+		},
+		maxValue: {
+			type: "DateValue",
+			description: "The maximum date that can be selected."
+		},
+		minValue: {
+			type: "DateValue",
+			description: "The minimum date that can be selected."
+		},
+		locale: {
+			type: C.STRING,
+			description: "The locale to use for formatting dates."
+		},
+		multiple: {
+			type: C.BOOLEAN,
+			description: "Whether or not multiple dates can be selected.",
+			default: C.FALSE
+		},
+		numberOfMonths: {
+			type: C.NUMBER,
+			description: "The number of months to display at once.",
+			default: "1"
+		},
+		disabled: {
+			default: C.FALSE,
+			type: C.BOOLEAN,
+			description: "Whether or not the accordion is disabled."
+		},
+		readonly: {
+			type: C.BOOLEAN,
+			description: "Whether or not the calendar is readonly.",
+			default: C.FALSE
+		},
+		asChild
+	},
+	dataAttributes: [
+		{
+			name: "invalid",
+			description: "Present on the root element when the calendar is invalid."
+		},
+		{
+			name: "disabled",
+			description: "Present on the root element when the calendar is disabled."
+		},
+		{
+			name: "readonly",
+			description: "Present on the root element when the calendar is readonly."
+		},
+		{
+			name: "bits-calendar-root",
+			description: "Present on the root element."
+		}
+	]
+};
+
+const cell: APISchema<Calendar.CellProps> = {
+	title: "Cell",
+	description: "A cell in the calendar grid.",
+	props: {
+		asChild,
+		date: {
+			type: "DateValue",
+			description: "The date for the cell."
+		}
+	},
+	dataAttributes: [
+		{
+			name: "disabled",
+			description: "Present on the element when the date is disabled."
+		},
+		{
+			name: "bits-calendar-cell",
+			description: "Present on the cell element."
+		}
+	]
+};
+
+const date: APISchema<Calendar.DateProps> = {
+	title: "Date",
+	description: "A date in the calendar grid.",
+	props: {
+		asChild,
+		date: {
+			type: "DateValue",
+			description: "The date for the cell."
+		},
+		month: {
+			type: "DateValue",
+			description: "The current month the date is being displayed in."
+		}
+	},
+	dataAttributes: [
+		{
+			name: "disabled",
+			value: "",
+			description: "Present on the element when the date is disabled."
+		},
+		{
+			name: "selected",
+			value: "",
+			description: "Present on the element when the date is selected."
+		},
+		{
+			name: "unavailable",
+			value: "",
+			description: "Present on the element when the date is unavailable."
+		},
+		{
+			name: "value",
+			value: 'The date in the format "YYYY-MM-DD".'
+		},
+		{
+			name: "today",
+			description: "Present on the element when the date is today."
+		},
+		{
+			name: "outside-month",
+			description: "Present on the element when the date is outside the current month."
+		},
+		{
+			name: "outside-visible-months",
+			description: "Present on the element when the date is outside the visible months."
+		},
+		{
+			name: "focused",
+			description: "Present on the element when the date is focused."
+		},
+		{
+			name: "bits-calendar-date",
+			description: "Present on the date element."
+		}
+	]
+};
+
+const grid: APISchema<Calendar.GridProps> = {
+	title: "Grid",
+	description: "The grid of dates in the calendar, typically representing a month.",
+	props: {
+		asChild
+	},
+	dataAttributes: [
+		{
+			name: "bits-calendar-grid",
+			description: "Present on the grid element."
+		}
+	]
+};
+
+const gridBody: APISchema<Calendar.GridBodyProps> = {
+	title: "GridBody",
+	description: "The body of the grid of dates in the calendar.",
+	props: {
+		asChild
+	},
+	dataAttributes: [
+		{
+			name: "bits-calendar-grid-body",
+			description: "Present on the grid body element."
+		}
+	]
+};
+
+const gridHead: APISchema<Calendar.GridHeadProps> = {
+	title: "GridHead",
+	description: "The head of the grid of dates in the calendar.",
+	props: {
+		asChild
+	},
+	dataAttributes: [
+		{
+			name: "bits-calendar-grid-head",
+			description: "Present on the grid head element."
+		}
+	]
+};
+
+const gridRow: APISchema<Calendar.GridRowProps> = {
+	title: "GridRow",
+	description: "A row in the grid of dates in the calendar.",
+	props: {
+		asChild
+	},
+	dataAttributes: [
+		{
+			name: "bits-calendar-grid-row",
+			description: "Present on the grid row element."
+		}
+	]
+};
+
+const headCell: APISchema<Calendar.HeadCellProps> = {
+	title: "HeadCell",
+	description: "A cell in the head of the grid of dates in the calendar.",
+	props: {
+		asChild
+	},
+	dataAttributes: [
+		{
+			name: "bits-calendar-head-cell",
+			description: "Present on the head cell element."
+		}
+	]
+};
+
+const header: APISchema<Calendar.HeaderProps> = {
+	title: "Header",
+	description: "The header of the calendar.",
+	props: {
+		asChild
+	},
+	dataAttributes: [
+		{
+			name: "bits-calendar-header",
+			description: "Present on the header element."
+		}
+	]
+};
+
+const heading: APISchema<Calendar.HeadingProps> = {
+	title: "Heading",
+	description: "The heading of the calendar.",
+	props: {
+		asChild
+	},
+	dataAttributes: [
+		{
+			name: "bits-calendar-heading",
+			description: "Present on the heading element."
+		}
+	]
+};
+
+const nextButton: APISchema<Calendar.NextButtonProps> = {
+	title: "NextButton",
+	description: "The next button of the calendar.",
+	props: {
+		asChild
+	},
+	dataAttributes: [
+		{
+			name: "bits-calendar-next-button",
+			description: "Present on the next button element."
+		}
+	]
+};
+
+const prevButton: APISchema<Calendar.PrevButtonProps> = {
+	title: "PrevButton",
+	description: "The previous button of the calendar.",
+	props: {
+		asChild
+	},
+	dataAttributes: [
+		{
+			name: "bits-calendar-prev-button",
+			description: "Present on the prev button element."
+		}
+	]
+};
+
+export const calendar = [
+	root,
+	header,
+	heading,
+	nextButton,
+	prevButton,
+	cell,
+	date,
+	grid,
+	gridBody,
+	gridHead,
+	gridRow,
+	headCell
+];
diff --git a/src/content/api-reference/index.ts b/src/content/api-reference/index.ts
index c8c5137b0..7f13e89bd 100644
--- a/src/content/api-reference/index.ts
+++ b/src/content/api-reference/index.ts
@@ -5,6 +5,7 @@ import { dialog } from "./dialog";
 import { aspectRatio } from "./aspect-ratio";
 import { avatar } from "./avatar";
 import { button } from "./button";
+import { calendar } from "./calendar";
 import { checkbox } from "./checkbox";
 import { collapsible } from "./collapsible";
 import { contextMenu } from "./context-menu";
@@ -67,7 +68,7 @@ export const apiSchemas: Record<Bit, APISchema[]> = {
 	"aspect-ratio": aspectRatio,
 	avatar,
 	button,
-	calendar: [],
+	calendar,
 	checkbox,
 	collapsible,
 	"context-menu": contextMenu,
diff --git a/src/lib/bits/calendar/_types.ts b/src/lib/bits/calendar/_types.ts
new file mode 100644
index 000000000..f889d1c3c
--- /dev/null
+++ b/src/lib/bits/calendar/_types.ts
@@ -0,0 +1,78 @@
+/**
+ * We define prop types without the HTMLAttributes here so that we can use them
+ * to type-check our API documentation, which requires we document each prop,
+ * but we don't want to document the HTML attributes.
+ */
+
+import type { AsChild, OnChangeFn } from "$lib/internal";
+import type { DateValue } from "@internationalized/date";
+import type { CreateCalendarProps } from "@melt-ui/svelte";
+
+type Props = Expand<
+	Omit<
+		CreateCalendarProps,
+		| "placeholder"
+		| "defaultPlaceholder"
+		| "value"
+		| "defaultValue"
+		| "onPlaceholderChange"
+		| "onValueChange"
+		| "ids"
+	> & {
+		placeholder?: DateValue;
+		value?: DateValue;
+		onPlaceholderChange?: OnChangeFn<DateValue>;
+		onValueChange?: OnChangeFn<DateValue | undefined>;
+	} & AsChild
+>;
+
+type PrevButtonProps = AsChild;
+
+type NextButtonProps = AsChild;
+
+type HeadingProps = AsChild;
+
+type HeaderProps = AsChild;
+
+type GridHeadProps = AsChild;
+
+type HeadCellProps = AsChild;
+
+type GridProps = AsChild;
+
+type GridBodyProps = AsChild;
+
+type GridRowProps = AsChild;
+
+type BaseDateProps = Expand<
+	{
+		/**
+		 * The date value of the cell.
+		 */
+		date: DateValue;
+
+		/**
+		 * The month value that the cell belongs to.
+		 */
+		month: DateValue;
+	} & AsChild
+>;
+
+type CellProps = Expand<Omit<BaseDateProps, "month">>;
+
+type DateProps = Expand<BaseDateProps>;
+
+export type {
+	Props,
+	PrevButtonProps,
+	NextButtonProps,
+	HeadingProps,
+	HeaderProps,
+	GridProps,
+	GridHeadProps,
+	HeadCellProps,
+	GridBodyProps,
+	GridRowProps,
+	CellProps,
+	DateProps
+};
diff --git a/src/lib/bits/calendar/components/CalendarCell.svelte b/src/lib/bits/calendar/components/CalendarCell.svelte
index afed5bc9c..012fa3cbb 100644
--- a/src/lib/bits/calendar/components/CalendarCell.svelte
+++ b/src/lib/bits/calendar/components/CalendarCell.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
 	import { getCtx, getAttrs } from "../ctx.js";
-	import type { GridBodyCellProps } from "../types.js";
+	import type { CellProps } from "../types.js";
 
-	type $$Props = GridBodyCellProps;
+	type $$Props = CellProps;
 
 	export let date: $$Props["date"];
 	export let asChild: $$Props["asChild"] = false;
@@ -14,6 +14,7 @@
 	$: attrs = {
 		...getAttrs("cell"),
 		"aria-disabled": $isDateDisabled(date) || $isDateUnavailable(date),
+		"data-disabled": $isDateDisabled(date) ? "" : undefined,
 		role: "gridcell"
 	};
 </script>
diff --git a/src/lib/bits/calendar/components/CalendarHeadCell.svelte b/src/lib/bits/calendar/components/CalendarHeadCell.svelte
index b11a0f43d..e863b503d 100644
--- a/src/lib/bits/calendar/components/CalendarHeadCell.svelte
+++ b/src/lib/bits/calendar/components/CalendarHeadCell.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
 	import { getAttrs } from "../ctx.js";
-	import type { GridHeadCellProps } from "../types.js";
+	import type { HeadCellProps } from "../types.js";
 
-	type $$Props = GridHeadCellProps;
+	type $$Props = HeadCellProps;
 	export let asChild: $$Props["asChild"] = false;
 
 	const attrs = getAttrs("head-cell");
diff --git a/src/lib/bits/calendar/types.ts b/src/lib/bits/calendar/types.ts
index 69f83d276..3de587207 100644
--- a/src/lib/bits/calendar/types.ts
+++ b/src/lib/bits/calendar/types.ts
@@ -1,6 +1,4 @@
-import type { CreateCalendarProps } from "@melt-ui/svelte";
-import type { DateValue } from "@internationalized/date";
-import type { AsChild, HTMLDivAttributes, OnChangeFn } from "$lib/internal";
+import type { HTMLDivAttributes } from "$lib/internal";
 import type {
 	HTMLAttributes,
 	HTMLButtonAttributes,
@@ -8,61 +6,31 @@ import type {
 	HTMLTdAttributes,
 	HTMLThAttributes
 } from "svelte/elements";
+import type * as I from "./_types.js";
 
-type Props = Expand<
-	Omit<
-		CreateCalendarProps,
-		| "placeholder"
-		| "defaultPlaceholder"
-		| "value"
-		| "defaultValue"
-		| "onPlaceholderChange"
-		| "onValueChange"
-	> & {
-		placeholder?: DateValue;
-		value?: DateValue;
-		onPlaceholderChange?: OnChangeFn<DateValue>;
-		onValueChange?: OnChangeFn<DateValue | undefined>;
-		asChild?: boolean;
-	}
-> &
-	Omit<HTMLDivAttributes, "placeholder">;
+type Props = I.Props & Omit<HTMLDivAttributes, "placeholder">;
 
-type ButtonProps = Expand<AsChild> & HTMLButtonAttributes;
+type PrevButtonProps = I.PrevButtonProps & HTMLButtonAttributes;
 
-type PrevButtonProps = ButtonProps;
-type NextButtonProps = ButtonProps;
+type NextButtonProps = I.NextButtonProps & HTMLButtonAttributes;
 
-type HeadingProps = Expand<AsChild> & HTMLDivAttributes;
+type HeadingProps = I.HeadingProps & HTMLDivAttributes;
 
-type HeaderProps = Expand<AsChild> & HTMLDivAttributes;
+type HeaderProps = I.HeaderProps & HTMLDivAttributes;
 
-type GridProps = Expand<AsChild> & HTMLTableAttributes;
+type GridProps = I.GridProps & HTMLTableAttributes;
 
-type GridHeadProps = Expand<AsChild> & HTMLAttributes<HTMLTableSectionElement>;
+type GridHeadProps = I.GridHeadProps & HTMLAttributes<HTMLTableSectionElement>;
 
-type GridHeadCellProps = Expand<AsChild> & HTMLThAttributes;
+type HeadCellProps = I.HeadCellProps & HTMLThAttributes;
 
-type GridBodyProps = Expand<AsChild> & HTMLAttributes<HTMLTableSectionElement>;
+type GridBodyProps = I.GridBodyProps & HTMLAttributes<HTMLTableSectionElement>;
 
-type GridRowProps = Expand<AsChild> & HTMLAttributes<HTMLTableRowElement>;
+type GridRowProps = I.GridRowProps & HTMLAttributes<HTMLTableRowElement>;
 
-type BaseDateProps = Expand<
-	{
-		/**
-		 * The date value of the cell.
-		 */
-		date: DateValue;
+type CellProps = I.CellProps & HTMLTdAttributes;
 
-		/**
-		 * The month value that the cell belongs to.
-		 */
-		month: DateValue;
-	} & AsChild
->;
-
-type GridBodyCellProps = Expand<Omit<BaseDateProps, "month">> & HTMLTdAttributes;
-type DateProps = Expand<BaseDateProps> & HTMLDivAttributes;
+type DateProps = I.DateProps & HTMLDivAttributes;
 
 export type {
 	Props,
@@ -70,10 +38,10 @@ export type {
 	NextButtonProps,
 	HeadingProps,
 	GridProps,
-	GridBodyCellProps,
+	CellProps,
 	GridRowProps,
 	GridBodyProps,
-	GridHeadCellProps,
+	HeadCellProps,
 	GridHeadProps,
 	HeaderProps,
 	DateProps,
@@ -85,9 +53,9 @@ export type {
 	HeaderProps as CalendarHeaderProps,
 	GridProps as CalendarGridProps,
 	GridHeadProps as CalendarGridHeadProps,
-	GridHeadCellProps as CalendarGridHeadCellProps,
+	HeadCellProps as CalendarHeadCellProps,
 	GridBodyProps as CalendarGridBodyProps,
-	GridBodyCellProps as CalendarGridBodyCellProps,
+	CellProps as CalendarCellProps,
 	GridRowProps as CalendarGridRowProps,
 	DateProps as CalendarDateProps
 };

From f20cf5a3a2831acc9de94985ba395439b7939ef5 Mon Sep 17 00:00:00 2001
From: Hunter Johnston <johnstonhuntera@gmail.com>
Date: Sat, 25 Nov 2023 13:50:20 -0500
Subject: [PATCH 126/217] cal styles

---
 content/components/calendar.md            | 40 +++++++++++++++++++++++
 src/components/demos/calendar-demo.svelte | 24 +++++---------
 2 files changed, 48 insertions(+), 16 deletions(-)

diff --git a/content/components/calendar.md b/content/components/calendar.md
index 3b66a01d5..416d7bef4 100644
--- a/content/components/calendar.md
+++ b/content/components/calendar.md
@@ -14,4 +14,44 @@ description: A calendar component.
 
 </ComponentPreview>
 
+## Structure
+
+```svelte
+<script lang="ts">
+	import { Calendar } from "bits-ui";
+</script>
+
+<Calendar.Root let:months let:daysOfWeek>
+	<Calendar.Header>
+		<Calendar.PrevButton />
+		<Calendar.Heading />
+		<Calendar.NextButton />
+	</Calendar.Header>
+	{#each months as month}
+		<Calendar.Grid>
+			<Calendar.GridHead>
+				<Calendar.GridRow>
+					{#each daysOfWeek as day}
+						<Calendar.HeadCell>
+							{day}
+						</Calendar.HeadCell>
+					{/each}
+				</Calendar.GridRow>
+			</Calendar.GridHead>
+			<Calendar.GridBody>
+				{#each month.weeks as weekDates}
+					<Calendar.GridRow>
+						{#each weekDates as date}
+							<Calendar.Cell {date}>
+								<Calendar.Date {date} month={month.value} />
+							</Calendar.Cell>
+						{/each}
+					</Calendar.GridRow>
+				{/each}
+			</Calendar.GridBody>
+		</Calendar.Grid>
+	{/each}
+</Calendar.Root>
+```
+
 <APISection {schemas} />
diff --git a/src/components/demos/calendar-demo.svelte b/src/components/demos/calendar-demo.svelte
index 1e77846b0..2504d0582 100644
--- a/src/components/demos/calendar-demo.svelte
+++ b/src/components/demos/calendar-demo.svelte
@@ -1,32 +1,24 @@
 <script lang="ts">
 	import { Calendar } from "$lib";
-	import { cn } from "@/utils";
-	import { ChevronLeft, ChevronRight } from "lucide-svelte";
-	import { buttonVariants } from "../ui/button";
+	import { CaretRight, CaretLeft } from "phosphor-svelte";
 </script>
 
 <Calendar.Root
-	class="rounded-card border bg-background p-6 shadow-card"
+	class="mt-6 rounded-card border bg-background p-6 shadow-card"
 	let:months
 	let:daysOfWeek
 >
 	<Calendar.Header class="flex items-center justify-between">
 		<Calendar.PrevButton
-			class={cn(
-				buttonVariants({ variant: "outline" }),
-				"h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100"
-			)}
+			class="inline-flex h-7 w-7 items-center justify-center rounded-[7px] border border-border-input bg-background shadow-btn transition-all hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground focus-visible:ring-offset-2 focus-visible:ring-offset-background active:scale-98"
 		>
-			<ChevronLeft class="h-4 w-4" />
+			<CaretLeft class="h-4 w-4" />
 		</Calendar.PrevButton>
 		<Calendar.Heading class="font-medium" />
 		<Calendar.NextButton
-			class={cn(
-				buttonVariants({ variant: "outline" }),
-				"h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100"
-			)}
+			class="inline-flex h-7 w-7 items-center justify-center rounded-[7px] border border-border-input bg-background shadow-btn transition-all hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground focus-visible:ring-offset-2 focus-visible:ring-offset-background active:scale-98"
 		>
-			<ChevronRight class="h-4 w-4" />
+			<CaretRight class="h-4 w-4" />
 		</Calendar.NextButton>
 	</Calendar.Header>
 	<div
@@ -51,12 +43,12 @@
 							{#each weekDates as date}
 								<Calendar.Cell
 									{date}
-									class="relative h-9 w-9 p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([aria-selected])]:bg-muted first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md"
+									class="relative h-9 w-9 p-0 text-center text-sm focus-within:relative focus-within:z-20"
 								>
 									<Calendar.Date
 										{date}
 										month={month.value}
-										class="focus-visible:ring-ring inline-flex h-9 w-9 items-center justify-center whitespace-nowrap rounded-md bg-background p-0 text-sm font-normal text-foreground ring-offset-background transition-colors hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 aria-selected:bg-muted data-[outside-month]:pointer-events-none data-[outside-month]:opacity-0"
+										class="inline-flex h-9 w-9 items-center justify-center whitespace-nowrap rounded-[7px] bg-background p-0 text-sm font-normal text-foreground ring-offset-background transition-colors hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground focus-visible:ring-offset-2 data-[disabled]:pointer-events-none data-[outside-month]:pointer-events-none data-[selected]:bg-foreground data-[selected]:text-background data-[disabled]:opacity-50 data-[outside-month]:opacity-20"
 									/>
 								</Calendar.Cell>
 							{/each}

From b782ef23258cdf5306712d2ec952d601b6e2b9e4 Mon Sep 17 00:00:00 2001
From: Hunter Johnston <johnstonhuntera@gmail.com>
Date: Sat, 25 Nov 2023 14:07:59 -0500
Subject: [PATCH 127/217] range cal init api ref

---
 content/components/range-calendar.md          |  43 +++
 .../demos/range-calendar-demo.svelte          |  26 +-
 src/content/api-reference/index.ts            |   3 +-
 src/content/api-reference/range-calendar.ts   | 356 ++++++++++++++++++
 src/lib/bits/range-calendar/_types.ts         |  79 ++++
 src/lib/bits/range-calendar/ctx.ts            |   2 +-
 src/lib/bits/range-calendar/types.ts          |  88 ++---
 src/lib/shared/index.ts                       |   6 +
 8 files changed, 524 insertions(+), 79 deletions(-)
 create mode 100644 src/content/api-reference/range-calendar.ts
 create mode 100644 src/lib/bits/range-calendar/_types.ts
 create mode 100644 src/lib/shared/index.ts

diff --git a/content/components/range-calendar.md b/content/components/range-calendar.md
index 86bd46d1f..9e1e15b18 100644
--- a/content/components/range-calendar.md
+++ b/content/components/range-calendar.md
@@ -5,6 +5,7 @@ description: A calendar component with range selection.
 
 <script>
 	import { APISection, ComponentPreview, RangeCalendarDemo } from '@/components'
+	export let schemas;
 </script>
 
 <ComponentPreview name="range-calendar-demo" comp="Range Calendar">
@@ -12,3 +13,45 @@ description: A calendar component with range selection.
 <RangeCalendarDemo slot="preview" />
 
 </ComponentPreview>
+
+## Structure
+
+```svelte
+<script lang="ts">
+	import { RangeCalendar } from "bits-ui";
+</script>
+
+<RangeCalendar.Root let:months let:daysOfWeek>
+	<RangeCalendar.Header>
+		<RangeCalendar.PrevButton />
+		<RangeCalendar.Heading />
+		<RangeCalendar.NextButton />
+	</RangeCalendar.Header>
+	{#each months as month}
+		<RangeCalendar.Grid>
+			<RangeCalendar.GridHead>
+				<RangeCalendar.GridRow>
+					{#each daysOfWeek as day}
+						<RangeCalendar.HeadCell>
+							{day}
+						</RangeCalendar.HeadCell>
+					{/each}
+				</RangeCalendar.GridRow>
+			</RangeCalendar.GridHead>
+			<RangeCalendar.GridBody>
+				{#each month.weeks as weekDates}
+					<RangeCalendar.GridRow>
+						{#each weekDates as date}
+							<RangeCalendar.Cell {date}>
+								<RangeCalendar.Date {date} month={month.value} />
+							</RangeCalendar.Cell>
+						{/each}
+					</RangeCalendar.GridRow>
+				{/each}
+			</RangeCalendar.GridBody>
+		</RangeCalendar.Grid>
+	{/each}
+</RangeCalendar.Root>
+```
+
+<APISection {schemas} />
diff --git a/src/components/demos/range-calendar-demo.svelte b/src/components/demos/range-calendar-demo.svelte
index 382acc5ad..e591b20de 100644
--- a/src/components/demos/range-calendar-demo.svelte
+++ b/src/components/demos/range-calendar-demo.svelte
@@ -1,32 +1,24 @@
 <script lang="ts">
 	import { RangeCalendar } from "$lib";
-	import { cn } from "@/utils";
-	import { ChevronLeft, ChevronRight } from "lucide-svelte";
-	import { buttonVariants } from "../ui/button";
+	import { CaretRight, CaretLeft } from "phosphor-svelte";
 </script>
 
 <RangeCalendar.Root
-	class="rounded-card border bg-background p-6 shadow-card"
+	class="mt-6 rounded-card border bg-background p-6 shadow-card"
 	let:months
 	let:daysOfWeek
 >
 	<RangeCalendar.Header class="flex items-center justify-between">
 		<RangeCalendar.PrevButton
-			class={cn(
-				buttonVariants({ variant: "outline" }),
-				"h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100"
-			)}
+			class="inline-flex h-7 w-7 items-center justify-center rounded-[7px] border border-border-input bg-background shadow-btn transition-all hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground focus-visible:ring-offset-2 focus-visible:ring-offset-background active:scale-98"
 		>
-			<ChevronLeft class="h-4 w-4" />
+			<CaretLeft class="h-4 w-4" />
 		</RangeCalendar.PrevButton>
 		<RangeCalendar.Heading class="font-medium" />
 		<RangeCalendar.NextButton
-			class={cn(
-				buttonVariants({ variant: "outline" }),
-				"h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100"
-			)}
+			class="inline-flex h-7 w-7 items-center justify-center rounded-[7px] border border-border-input bg-background shadow-btn transition-all hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground focus-visible:ring-offset-2 focus-visible:ring-offset-background active:scale-98"
 		>
-			<ChevronRight class="h-4 w-4" />
+			<CaretRight class="h-4 w-4" />
 		</RangeCalendar.NextButton>
 	</RangeCalendar.Header>
 	<div
@@ -47,16 +39,16 @@
 				</RangeCalendar.GridHead>
 				<RangeCalendar.GridBody>
 					{#each month.weeks as weekDates}
-						<RangeCalendar.GridRow class="mt-2 flex w-full gap-1">
+						<RangeCalendar.GridRow class="mt-1 flex w-full gap-1">
 							{#each weekDates as date}
 								<RangeCalendar.Cell
 									{date}
-									class="relative h-9 w-9 p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([aria-selected])]:bg-muted first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md"
+									class="relative h-9 w-9 p-0 text-center text-sm focus-within:relative focus-within:z-20"
 								>
 									<RangeCalendar.Date
 										{date}
 										month={month.value}
-										class="focus-visible:ring-ring inline-flex h-9 w-9 items-center justify-center whitespace-nowrap rounded-md bg-background p-0 text-sm font-normal text-foreground ring-offset-background transition-colors hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 aria-selected:bg-muted data-[outside-month]:pointer-events-none data-[outside-month]:opacity-0"
+										class="inline-flex h-9 w-9 items-center justify-center whitespace-nowrap rounded-[7px] bg-background p-0 text-sm font-normal text-foreground ring-offset-background transition-colors hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground focus-visible:ring-offset-2 data-[disabled]:pointer-events-none data-[outside-month]:pointer-events-none data-[highlighted]:bg-muted data-[selected]:bg-foreground data-[selection-end]:bg-foreground data-[selection-start]:bg-foreground data-[selected]:text-background data-[disabled]:opacity-50 data-[outside-month]:opacity-20"
 									/>
 								</RangeCalendar.Cell>
 							{/each}
diff --git a/src/content/api-reference/index.ts b/src/content/api-reference/index.ts
index 7f13e89bd..4df0a9aec 100644
--- a/src/content/api-reference/index.ts
+++ b/src/content/api-reference/index.ts
@@ -16,6 +16,7 @@ import { popover } from "./popover";
 import { menubar } from "./menubar";
 import { progress } from "./progress";
 import { radioGroup } from "./radio-group";
+import { rangeCalendar } from "./range-calendar";
 import { select } from "./select";
 import { separator } from "./separator";
 import { slider } from "./slider";
@@ -80,7 +81,7 @@ export const apiSchemas: Record<Bit, APISchema[]> = {
 	popover,
 	progress,
 	"radio-group": radioGroup,
-	"range-calendar": [],
+	"range-calendar": rangeCalendar,
 	select,
 	separator,
 	slider,
diff --git a/src/content/api-reference/range-calendar.ts b/src/content/api-reference/range-calendar.ts
new file mode 100644
index 000000000..2e40248ab
--- /dev/null
+++ b/src/content/api-reference/range-calendar.ts
@@ -0,0 +1,356 @@
+import type { APISchema } from "@/types";
+import * as C from "@/content/constants.js";
+import { asChild } from "@/content/api-reference/helpers.js";
+import type * as RangeCalendar from "$lib/bits/range-calendar/_types.js";
+
+const root: APISchema<RangeCalendar.Props> = {
+	title: "Root",
+	description: "The root range calendar component which contains all other calendar components.",
+	props: {
+		value: {
+			type: {
+				type: "DateRange",
+				definition: "{ start: DateValue | undefined; end: DateValue | undefined; }"
+			},
+			description: "The selected date range."
+		},
+		onValueChange: {
+			type: {
+				type: C.FUNCTION,
+				definition: "(date: DateRange | undefined) => void"
+			},
+			description: "A function that is called when the selected date range changes."
+		},
+		placeholder: {
+			type: "DateValue",
+			description:
+				"The placeholder date, which is used to determine what month to display when no date range is selected. This updates as the user navigates the calendar, and can be used to programatically control the calendar's view."
+		},
+		onPlaceholderChange: {
+			type: {
+				type: C.FUNCTION,
+				definition: "(date: DateValue) => void"
+			},
+			description: "A function that is called when the placeholder date changes."
+		},
+		pagedNavigation: {
+			type: C.BOOLEAN,
+			description:
+				"Whether or not to use paged navigation for the calendar. Paged navigation causes the previous and next buttons to navigate by the number of months displayed at once, rather than by one month.",
+			default: C.FALSE
+		},
+		preventDeselect: {
+			type: C.BOOLEAN,
+			description:
+				"Whether or not to prevent the user from deselecting a date without selecting another date first.",
+			default: C.FALSE
+		},
+		weekStartsOn: {
+			type: C.NUMBER,
+			description: "The day of the week to start the calendar on. 0 is Sunday, 1 is Monday, etc.",
+			default: "0"
+		},
+		calendarLabel: {
+			type: C.STRING,
+			description: "The accessible label for the calendar."
+		},
+		fixedWeeks: {
+			type: C.BOOLEAN,
+			description: "Whether or not to always display 6 weeks in the calendar.",
+			default: C.FALSE
+		},
+		isDateDisabled: {
+			type: {
+				type: C.FUNCTION,
+				definition: "(date: DateValue) => boolean"
+			},
+			description: "A function that returns whether or not a date is disabled."
+		},
+		isDateUnavailable: {
+			type: {
+				type: C.FUNCTION,
+				definition: "(date: DateValue) => boolean"
+			},
+			description: "A function that returns whether or not a date is unavailable."
+		},
+		maxValue: {
+			type: "DateValue",
+			description: "The maximum date that can be selected."
+		},
+		minValue: {
+			type: "DateValue",
+			description: "The minimum date that can be selected."
+		},
+		locale: {
+			type: C.STRING,
+			description: "The locale to use for formatting dates."
+		},
+		numberOfMonths: {
+			type: C.NUMBER,
+			description: "The number of months to display at once.",
+			default: "1"
+		},
+		disabled: {
+			default: C.FALSE,
+			type: C.BOOLEAN,
+			description: "Whether or not the accordion is disabled."
+		},
+		readonly: {
+			type: C.BOOLEAN,
+			description: "Whether or not the calendar is readonly.",
+			default: C.FALSE
+		},
+		asChild
+	},
+	dataAttributes: [
+		{
+			name: "invalid",
+			description: "Present on the root element when the calendar is invalid."
+		},
+		{
+			name: "disabled",
+			description: "Present on the root element when the calendar is disabled."
+		},
+		{
+			name: "readonly",
+			description: "Present on the root element when the calendar is readonly."
+		},
+		{
+			name: "bits-calendar-root",
+			description: "Present on the root element."
+		}
+	]
+};
+
+const cell: APISchema<RangeCalendar.CellProps> = {
+	title: "Cell",
+	description: "A cell in the calendar grid.",
+	props: {
+		asChild,
+		date: {
+			type: "DateValue",
+			description: "The date for the cell."
+		}
+	},
+	dataAttributes: [
+		{
+			name: "disabled",
+			description: "Present on the element when the date is disabled."
+		},
+		{
+			name: "bits-calendar-cell",
+			description: "Present on the cell element."
+		}
+	]
+};
+
+const date: APISchema<RangeCalendar.DateProps> = {
+	title: "Date",
+	description: "A date in the calendar grid.",
+	props: {
+		asChild,
+		date: {
+			type: "DateValue",
+			description: "The date for the cell."
+		},
+		month: {
+			type: "DateValue",
+			description: "The current month the date is being displayed in."
+		}
+	},
+	dataAttributes: [
+		{
+			name: "disabled",
+			value: "",
+			description: "Present on the element when the date is disabled."
+		},
+		{
+			name: "selected",
+			value: "",
+			description: "Present on the element when the date is selected."
+		},
+		{
+			name: "unavailable",
+			value: "",
+			description: "Present on the element when the date is unavailable."
+		},
+		{
+			name: "value",
+			value: 'The date in the format "YYYY-MM-DD".'
+		},
+		{
+			name: "today",
+			description: "Present on the element when the date is today."
+		},
+		{
+			name: "outside-month",
+			description: "Present on the element when the date is outside the current month."
+		},
+		{
+			name: "outside-visible-months",
+			description: "Present on the element when the date is outside the visible months."
+		},
+		{
+			name: "selection-start",
+			description: "Present on the element when the date is the start of the selection."
+		},
+		{
+			name: "selection-end",
+			description: "Present on the element when the date is the end of the selection."
+		},
+		{
+			name: "highlighted",
+			description:
+				"Present on the element when the date is in the range as its still being selected."
+		},
+		{
+			name: "focused",
+			description: "Present on the element when the date is focused."
+		},
+		{
+			name: "bits-calendar-date",
+			description: "Present on the date element."
+		}
+	]
+};
+
+const grid: APISchema<RangeCalendar.GridProps> = {
+	title: "Grid",
+	description: "The grid of dates in the calendar, typically representing a month.",
+	props: {
+		asChild
+	},
+	dataAttributes: [
+		{
+			name: "bits-calendar-grid",
+			description: "Present on the grid element."
+		}
+	]
+};
+
+const gridBody: APISchema<RangeCalendar.GridBodyProps> = {
+	title: "GridBody",
+	description: "The body of the grid of dates in the calendar.",
+	props: {
+		asChild
+	},
+	dataAttributes: [
+		{
+			name: "bits-calendar-grid-body",
+			description: "Present on the grid body element."
+		}
+	]
+};
+
+const gridHead: APISchema<RangeCalendar.GridHeadProps> = {
+	title: "GridHead",
+	description: "The head of the grid of dates in the calendar.",
+	props: {
+		asChild
+	},
+	dataAttributes: [
+		{
+			name: "bits-calendar-grid-head",
+			description: "Present on the grid head element."
+		}
+	]
+};
+
+const gridRow: APISchema<RangeCalendar.GridRowProps> = {
+	title: "GridRow",
+	description: "A row in the grid of dates in the calendar.",
+	props: {
+		asChild
+	},
+	dataAttributes: [
+		{
+			name: "bits-calendar-grid-row",
+			description: "Present on the grid row element."
+		}
+	]
+};
+
+const headCell: APISchema<RangeCalendar.HeadCellProps> = {
+	title: "HeadCell",
+	description: "A cell in the head of the grid of dates in the calendar.",
+	props: {
+		asChild
+	},
+	dataAttributes: [
+		{
+			name: "bits-calendar-head-cell",
+			description: "Present on the head cell element."
+		}
+	]
+};
+
+const header: APISchema<RangeCalendar.HeaderProps> = {
+	title: "Header",
+	description: "The header of the calendar.",
+	props: {
+		asChild
+	},
+	dataAttributes: [
+		{
+			name: "bits-calendar-header",
+			description: "Present on the header element."
+		}
+	]
+};
+
+const heading: APISchema<RangeCalendar.HeadingProps> = {
+	title: "Heading",
+	description: "The heading of the calendar.",
+	props: {
+		asChild
+	},
+	dataAttributes: [
+		{
+			name: "bits-calendar-heading",
+			description: "Present on the heading element."
+		}
+	]
+};
+
+const nextButton: APISchema<RangeCalendar.NextButtonProps> = {
+	title: "NextButton",
+	description: "The next button of the calendar.",
+	props: {
+		asChild
+	},
+	dataAttributes: [
+		{
+			name: "bits-calendar-next-button",
+			description: "Present on the next button element."
+		}
+	]
+};
+
+const prevButton: APISchema<RangeCalendar.PrevButtonProps> = {
+	title: "PrevButton",
+	description: "The previous button of the calendar.",
+	props: {
+		asChild
+	},
+	dataAttributes: [
+		{
+			name: "bits-calendar-prev-button",
+			description: "Present on the prev button element."
+		}
+	]
+};
+
+export const rangeCalendar = [
+	root,
+	header,
+	heading,
+	nextButton,
+	prevButton,
+	cell,
+	date,
+	grid,
+	gridBody,
+	gridHead,
+	gridRow,
+	headCell
+];
diff --git a/src/lib/bits/range-calendar/_types.ts b/src/lib/bits/range-calendar/_types.ts
new file mode 100644
index 000000000..2cc84cca7
--- /dev/null
+++ b/src/lib/bits/range-calendar/_types.ts
@@ -0,0 +1,79 @@
+/**
+ * We define prop types without the HTMLAttributes here so that we can use them
+ * to type-check our API documentation, which requires we document each prop,
+ * but we don't want to document the HTML attributes.
+ */
+
+import type { AsChild, OnChangeFn } from "$lib/internal/index.js";
+import type { DateRange } from "$lib/shared/index.js";
+import type { DateValue } from "@internationalized/date";
+import type { CreateRangeCalendarProps } from "@melt-ui/svelte";
+
+type Props = Expand<
+	Omit<
+		CreateRangeCalendarProps,
+		| "placeholder"
+		| "defaultPlaceholder"
+		| "value"
+		| "defaultValue"
+		| "onPlaceholderChange"
+		| "onValueChange"
+		| "ids"
+	> & {
+		placeholder?: DateValue;
+		value?: DateRange;
+		onPlaceholderChange?: OnChangeFn<DateValue>;
+		onValueChange?: OnChangeFn<DateRange>;
+	} & AsChild
+>;
+
+type PrevButtonProps = AsChild;
+
+type NextButtonProps = AsChild;
+
+type HeadingProps = AsChild;
+
+type HeaderProps = AsChild;
+
+type GridHeadProps = AsChild;
+
+type HeadCellProps = AsChild;
+
+type GridProps = AsChild;
+
+type GridBodyProps = AsChild;
+
+type GridRowProps = AsChild;
+
+type BaseDateProps = Expand<
+	{
+		/**
+		 * The date value of the cell.
+		 */
+		date: DateValue;
+
+		/**
+		 * The month value that the cell belongs to.
+		 */
+		month: DateValue;
+	} & AsChild
+>;
+
+type CellProps = Expand<Omit<BaseDateProps, "month">>;
+
+type DateProps = Expand<BaseDateProps>;
+
+export type {
+	Props,
+	PrevButtonProps,
+	NextButtonProps,
+	HeadingProps,
+	HeaderProps,
+	GridProps,
+	GridHeadProps,
+	HeadCellProps,
+	GridBodyProps,
+	GridRowProps,
+	CellProps,
+	DateProps
+};
diff --git a/src/lib/bits/range-calendar/ctx.ts b/src/lib/bits/range-calendar/ctx.ts
index b62fc7f33..056aa92b7 100644
--- a/src/lib/bits/range-calendar/ctx.ts
+++ b/src/lib/bits/range-calendar/ctx.ts
@@ -6,7 +6,7 @@ import {
 import { getContext, setContext } from "svelte";
 import { removeUndefined, getOptionUpdater, createBitAttrs } from "$lib/internal/index.js";
 
-const NAME = "range-calendar";
+const NAME = "calendar";
 const PARTS = [
 	"root",
 	"prev-button",
diff --git a/src/lib/bits/range-calendar/types.ts b/src/lib/bits/range-calendar/types.ts
index 69f83d276..2a5e0d3d1 100644
--- a/src/lib/bits/range-calendar/types.ts
+++ b/src/lib/bits/range-calendar/types.ts
@@ -1,6 +1,4 @@
-import type { CreateCalendarProps } from "@melt-ui/svelte";
-import type { DateValue } from "@internationalized/date";
-import type { AsChild, HTMLDivAttributes, OnChangeFn } from "$lib/internal";
+import type { HTMLDivAttributes } from "$lib/internal";
 import type {
 	HTMLAttributes,
 	HTMLButtonAttributes,
@@ -8,61 +6,31 @@ import type {
 	HTMLTdAttributes,
 	HTMLThAttributes
 } from "svelte/elements";
+import type * as I from "./_types.js";
 
-type Props = Expand<
-	Omit<
-		CreateCalendarProps,
-		| "placeholder"
-		| "defaultPlaceholder"
-		| "value"
-		| "defaultValue"
-		| "onPlaceholderChange"
-		| "onValueChange"
-	> & {
-		placeholder?: DateValue;
-		value?: DateValue;
-		onPlaceholderChange?: OnChangeFn<DateValue>;
-		onValueChange?: OnChangeFn<DateValue | undefined>;
-		asChild?: boolean;
-	}
-> &
-	Omit<HTMLDivAttributes, "placeholder">;
+type Props = I.Props & Omit<HTMLDivAttributes, "placeholder">;
 
-type ButtonProps = Expand<AsChild> & HTMLButtonAttributes;
+type PrevButtonProps = I.PrevButtonProps & HTMLButtonAttributes;
 
-type PrevButtonProps = ButtonProps;
-type NextButtonProps = ButtonProps;
+type NextButtonProps = I.NextButtonProps & HTMLButtonAttributes;
 
-type HeadingProps = Expand<AsChild> & HTMLDivAttributes;
+type HeadingProps = I.HeadingProps & HTMLDivAttributes;
 
-type HeaderProps = Expand<AsChild> & HTMLDivAttributes;
+type HeaderProps = I.HeaderProps & HTMLDivAttributes;
 
-type GridProps = Expand<AsChild> & HTMLTableAttributes;
+type GridProps = I.GridProps & HTMLTableAttributes;
 
-type GridHeadProps = Expand<AsChild> & HTMLAttributes<HTMLTableSectionElement>;
+type GridHeadProps = I.GridHeadProps & HTMLAttributes<HTMLTableSectionElement>;
 
-type GridHeadCellProps = Expand<AsChild> & HTMLThAttributes;
+type HeadCellProps = I.HeadCellProps & HTMLThAttributes;
 
-type GridBodyProps = Expand<AsChild> & HTMLAttributes<HTMLTableSectionElement>;
+type GridBodyProps = I.GridBodyProps & HTMLAttributes<HTMLTableSectionElement>;
 
-type GridRowProps = Expand<AsChild> & HTMLAttributes<HTMLTableRowElement>;
+type GridRowProps = I.GridRowProps & HTMLAttributes<HTMLTableRowElement>;
 
-type BaseDateProps = Expand<
-	{
-		/**
-		 * The date value of the cell.
-		 */
-		date: DateValue;
+type CellProps = I.CellProps & HTMLTdAttributes;
 
-		/**
-		 * The month value that the cell belongs to.
-		 */
-		month: DateValue;
-	} & AsChild
->;
-
-type GridBodyCellProps = Expand<Omit<BaseDateProps, "month">> & HTMLTdAttributes;
-type DateProps = Expand<BaseDateProps> & HTMLDivAttributes;
+type DateProps = I.DateProps & HTMLDivAttributes;
 
 export type {
 	Props,
@@ -70,24 +38,24 @@ export type {
 	NextButtonProps,
 	HeadingProps,
 	GridProps,
-	GridBodyCellProps,
+	CellProps,
 	GridRowProps,
 	GridBodyProps,
-	GridHeadCellProps,
+	HeadCellProps,
 	GridHeadProps,
 	HeaderProps,
 	DateProps,
 	//
-	Props as CalendarProps,
-	PrevButtonProps as CalendarPrevButtonProps,
-	NextButtonProps as CalendarNextButtonProps,
-	HeadingProps as CalendarHeadingProps,
-	HeaderProps as CalendarHeaderProps,
-	GridProps as CalendarGridProps,
-	GridHeadProps as CalendarGridHeadProps,
-	GridHeadCellProps as CalendarGridHeadCellProps,
-	GridBodyProps as CalendarGridBodyProps,
-	GridBodyCellProps as CalendarGridBodyCellProps,
-	GridRowProps as CalendarGridRowProps,
-	DateProps as CalendarDateProps
+	Props as RangeCalendarProps,
+	PrevButtonProps as RangeCalendarPrevButtonProps,
+	NextButtonProps as RangeCalendarNextButtonProps,
+	HeadingProps as RangeCalendarHeadingProps,
+	HeaderProps as RangeCalendarHeaderProps,
+	GridProps as RangeCalendarGridProps,
+	GridHeadProps as RangeCalendarGridHeadProps,
+	HeadCellProps as RangeCalendarHeadCellProps,
+	GridBodyProps as RangeCalendarGridBodyProps,
+	CellProps as RangeCalendarCellProps,
+	GridRowProps as RangeCalendarGridRowProps,
+	DateProps as RangeCalendarDateProps
 };
diff --git a/src/lib/shared/index.ts b/src/lib/shared/index.ts
new file mode 100644
index 000000000..faa47916e
--- /dev/null
+++ b/src/lib/shared/index.ts
@@ -0,0 +1,6 @@
+import type { DateValue } from "@internationalized/date";
+
+export type DateRange = {
+	start: DateValue | undefined;
+	end: DateValue | undefined;
+};

From 2688a5267a907db5ad5fd8cd2f1140a3894cb16a Mon Sep 17 00:00:00 2001
From: Hunter Johnston <johnstonhuntera@gmail.com>
Date: Sat, 25 Nov 2023 14:16:45 -0500
Subject: [PATCH 128/217] cal styles

---
 src/components/demos/calendar-demo.svelte       | 8 ++++----
 src/components/demos/range-calendar-demo.svelte | 4 ++--
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/components/demos/calendar-demo.svelte b/src/components/demos/calendar-demo.svelte
index 2504d0582..fb15058c3 100644
--- a/src/components/demos/calendar-demo.svelte
+++ b/src/components/demos/calendar-demo.svelte
@@ -4,7 +4,7 @@
 </script>
 
 <Calendar.Root
-	class="mt-6 rounded-card border bg-background p-6 shadow-card"
+	class="mt-6 rounded-card border border-dark-10 bg-background p-6 shadow-card"
 	let:months
 	let:daysOfWeek
 >
@@ -25,7 +25,7 @@
 		class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0"
 	>
 		{#each months as month}
-			<Calendar.Grid class="w-full border-collapse space-y-1">
+			<Calendar.Grid class="w-full border-collapse select-none space-y-1">
 				<Calendar.GridHead>
 					<Calendar.GridRow class="flex w-full justify-between">
 						{#each daysOfWeek as day}
@@ -39,7 +39,7 @@
 				</Calendar.GridHead>
 				<Calendar.GridBody>
 					{#each month.weeks as weekDates}
-						<Calendar.GridRow class="mt-2 flex w-full gap-1">
+						<Calendar.GridRow class="mt-1 flex w-full gap-1">
 							{#each weekDates as date}
 								<Calendar.Cell
 									{date}
@@ -48,7 +48,7 @@
 									<Calendar.Date
 										{date}
 										month={month.value}
-										class="inline-flex h-9 w-9 items-center justify-center whitespace-nowrap rounded-[7px] bg-background p-0 text-sm font-normal text-foreground ring-offset-background transition-colors hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground focus-visible:ring-offset-2 data-[disabled]:pointer-events-none data-[outside-month]:pointer-events-none data-[selected]:bg-foreground data-[selected]:text-background data-[disabled]:opacity-50 data-[outside-month]:opacity-20"
+										class="inline-flex h-9 w-9 items-center justify-center whitespace-nowrap rounded-[7px] bg-background p-0 text-sm font-normal text-foreground ring-offset-background transition-colors hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground focus-visible:ring-offset-2 data-[disabled]:pointer-events-none data-[outside-month]:pointer-events-none data-[selected]:bg-foreground data-[selected]:text-background data-[disabled]:opacity-50 data-[outside-month]:opacity-20 "
 									/>
 								</Calendar.Cell>
 							{/each}
diff --git a/src/components/demos/range-calendar-demo.svelte b/src/components/demos/range-calendar-demo.svelte
index e591b20de..b4ae5c50f 100644
--- a/src/components/demos/range-calendar-demo.svelte
+++ b/src/components/demos/range-calendar-demo.svelte
@@ -4,7 +4,7 @@
 </script>
 
 <RangeCalendar.Root
-	class="mt-6 rounded-card border bg-background p-6 shadow-card"
+	class="mt-6 rounded-card border border-dark-10 bg-background p-6 shadow-card"
 	let:months
 	let:daysOfWeek
 >
@@ -25,7 +25,7 @@
 		class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0"
 	>
 		{#each months as month}
-			<RangeCalendar.Grid class="w-full border-collapse space-y-1">
+			<RangeCalendar.Grid class="w-full border-collapse select-none space-y-1">
 				<RangeCalendar.GridHead>
 					<RangeCalendar.GridRow class="flex w-full justify-between">
 						{#each daysOfWeek as day}

From 74199917e0e910f1a6f43fb9048b34342463e163 Mon Sep 17 00:00:00 2001
From: Hunter Johnston <johnstonhuntera@gmail.com>
Date: Sat, 25 Nov 2023 14:47:45 -0500
Subject: [PATCH 129/217] fix: toggle group doc

---
 src/content/api-reference/toggle-group.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/content/api-reference/toggle-group.ts b/src/content/api-reference/toggle-group.ts
index 43c14ccea..fc56d679d 100644
--- a/src/content/api-reference/toggle-group.ts
+++ b/src/content/api-reference/toggle-group.ts
@@ -61,8 +61,8 @@ const root: APISchema<ToggleGroup.Props<"multiple">> = {
 };
 
 const item: APISchema<ToggleGroup.ItemProps> = {
-	title: "Root",
-	description: "The toggle button.",
+	title: "Item",
+	description: "An individual toggle item within the group.",
 	props: {
 		value: {
 			type: C.STRING,

From 61cb4657a356e8f81c88117c6de160fd783d48c9 Mon Sep 17 00:00:00 2001
From: Hunter Johnston <johnstonhuntera@gmail.com>
Date: Sat, 25 Nov 2023 15:55:54 -0500
Subject: [PATCH 130/217] data attr table

---
 src/components/api-ref/data-attrs-table.svelte | 16 +++++++---------
 1 file changed, 7 insertions(+), 9 deletions(-)

diff --git a/src/components/api-ref/data-attrs-table.svelte b/src/components/api-ref/data-attrs-table.svelte
index 1494cbae0..2bc2a7d39 100644
--- a/src/components/api-ref/data-attrs-table.svelte
+++ b/src/components/api-ref/data-attrs-table.svelte
@@ -10,8 +10,9 @@
 <Table.Root>
 	<Table.Header>
 		<Table.Row class="w-1/4">
-			<Table.Head class="w-1/2 whitespace-nowrap">Data Attribute</Table.Head>
-			<Table.Head class="w-1/2 whitespace-nowrap">Description/Value</Table.Head>
+			<Table.Head class="w-[35%] whitespace-nowrap">Data Attribute</Table.Head>
+			<Table.Head class="w-[25%] whitespace-nowrap">Value</Table.Head>
+			<Table.Head class="w-[40%] whitespace-nowrap">Description</Table.Head>
 		</Table.Row>
 	</Table.Header>
 	<Table.Body>
@@ -21,19 +22,16 @@
 					<Table.Cell class="align-baseline">
 						<Code class="font-semibold text-foreground">data-{attr.name}</Code>
 					</Table.Cell>
+					<Table.Cell class="align-baseline">
+						<Code class="!h-min !bg-background !px-0">{attr.value ?? "——"}</Code
+						>
+					</Table.Cell>
 					<Table.Cell class="align-baseline">
 						{#if attr.description}
 							<p class="my-2 text-sm leading-7">
 								{@html parseMarkdown(attr.description)}
 							</p>
 						{/if}
-						{#if attr.value}
-							<Code class="!h-min !bg-background !px-0"
-								>Value: {attr.value}</Code
-							>
-						{:else}
-							<Code class="!h-min !bg-background !px-0">Value: ''</Code>
-						{/if}
 					</Table.Cell>
 				</Table.Row>
 			{/each}

From 70690b8cea1f238c99677723e159620d21d92664 Mon Sep 17 00:00:00 2001
From: Hunter Johnston <johnstonhuntera@gmail.com>
Date: Sun, 26 Nov 2023 13:00:50 -0500
Subject: [PATCH 131/217] switch styles

---
 src/components/demos/select-demo.svelte | 52 +++++++++++--------------
 src/components/demos/switch-demo.svelte |  4 +-
 src/styles/app.postcss                  |  2 -
 tailwind.config.ts                      | 13 ++++---
 4 files changed, 33 insertions(+), 38 deletions(-)

diff --git a/src/components/demos/select-demo.svelte b/src/components/demos/select-demo.svelte
index 4253338d9..f0f2b3839 100644
--- a/src/components/demos/select-demo.svelte
+++ b/src/components/demos/select-demo.svelte
@@ -1,48 +1,42 @@
 <script lang="ts">
 	import { Select } from "$lib";
 	import { flyAndScale } from "@/utils";
-	import { Check } from "phosphor-svelte";
+	import { Check, Palette, CaretUpDown } from "phosphor-svelte";
 
-	const frameworks = [
-		{ value: "svelte", label: "Svelte" },
-		{ value: "vue", label: "Vue" },
-		{ value: "solid", label: "Solid" },
-		{ value: "angular", label: "Angular" },
-		{ value: "react", label: "React" }
+	const themes = [
+		{ value: "light-monochrome", label: "Light Monochrome" },
+		{ value: "dark-green", label: "Dark Green" },
+		{ value: "svelte-orange", label: "Svelte Orange" },
+		{ value: "punk-pink", label: "Punk Pink" }
 	];
 </script>
 
 <Select.Root>
 	<Select.Trigger
-		class="inline-flex h-input w-[180px] items-center rounded-card-sm border border-dark-10 bg-background px-4 text-sm transition-all placeholder:text-foreground-alt/50 hover:bg-muted focus:outline-none focus-visible:ring-2 focus-visible:ring-foreground focus-visible:ring-offset-2 focus-visible:ring-offset-background active:scale-98"
+		class="inline-flex h-input w-[296px] items-center rounded-9px border border-border-input bg-background px-[11px] text-sm transition-colors placeholder:text-foreground-alt/50  focus:outline-none focus:ring-2 focus:ring-foreground focus:ring-offset-2 focus:ring-offset-background "
+		aria-label="Select a theme"
 	>
-		<Select.Value
-			class="text-sm font-medium"
-			placeholder="Select a framework"
-		/>
+		<Palette class="mr-[9px] text-muted-foreground sq-6" />
+		<Select.Value class="text-sm" placeholder="Select a theme" />
+		<CaretUpDown class="ml-auto text-muted-foreground sq-6" />
 	</Select.Trigger>
 	<Select.Content
-		class="w-full rounded-xl border border-muted bg-background px-1 py-1.5 shadow-popover outline-none"
+		class="w-full rounded-xl border border-muted bg-background px-1 py-3 shadow-popover outline-none"
 		transition={flyAndScale}
 		sideOffset={8}
 	>
-		<Select.Group>
-			<Select.Label class="py-1.5 pl-2 text-sm font-medium"
-				>Frameworks</Select.Label
+		{#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 data-[selected]:bg-muted"
+				value={theme.value}
+				label={theme.label}
 			>
-			{#each frameworks as framework}
-				<Select.Item
-					class="flex h-10 w-full select-none items-center rounded-button py-3 pl-3 pr-1.5 text-sm outline-none transition-all duration-75 data-[highlighted]:bg-muted/50 data-[selected]:bg-muted"
-					value={framework.value}
-					label={framework.label}
-				>
-					{framework.label}
-					<Select.ItemIndicator class="ml-auto" asChild={false}>
-						<Check />
-					</Select.ItemIndicator>
-				</Select.Item>
-			{/each}
-		</Select.Group>
+				{theme.label}
+				<Select.ItemIndicator class="ml-auto" asChild={false}>
+					<Check />
+				</Select.ItemIndicator>
+			</Select.Item>
+		{/each}
 	</Select.Content>
 	<Select.Input name="favoriteFruit" />
 </Select.Root>
diff --git a/src/components/demos/switch-demo.svelte b/src/components/demos/switch-demo.svelte
index 63d9d5b2d..24aed3918 100644
--- a/src/components/demos/switch-demo.svelte
+++ b/src/components/demos/switch-demo.svelte
@@ -5,10 +5,10 @@
 <div class="flex items-center space-x-3">
 	<Switch.Root
 		id="marketing"
-		class="peer inline-flex h-7 w-12 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-mini-inset transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-foreground data-[state=unchecked]:bg-muted"
+		class="peer inline-flex h-[36px] min-h-[36px] w-[60px] shrink-0 cursor-pointer items-center rounded-full bg-dark-10 px-[3px] transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-foreground data-[state=unchecked]:bg-dark-10 data-[state=unchecked]:shadow-mini-inset"
 	>
 		<Switch.Thumb
-			class="pointer-events-none block h-6 w-6 rounded-full bg-background shadow-mini ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0"
+			class="pointer-events-none block shrink-0 rounded-full bg-background transition-transform sq-[30px] data-[state=checked]:translate-x-6 data-[state=unchecked]:translate-x-0 data-[state=unchecked]:shadow-mini dark:border-border-input dark:shadow-mini dark:data-[state=unchecked]:border"
 		/>
 	</Switch.Root>
 	<Label.Root for="marketing" class="text-sm font-medium"
diff --git a/src/styles/app.postcss b/src/styles/app.postcss
index a76f202a4..1731650ff 100644
--- a/src/styles/app.postcss
+++ b/src/styles/app.postcss
@@ -55,8 +55,6 @@
 		--constrast: 0 0% 100%;
 
 		/* Shadows */
-		--shadow-mini: 0px 1px 0px 1px rgba(255, 255, 255, 0.04);
-		--shadow-mini-inset: 0px 1px 0px 0px rgba(255, 255, 255, 0.04) inset;
 		--shadow-popover: 0px 7px 12px 3px rbga(255, 255, 255, 0.2);
 		--shadow-kbd: 0px 2px 0px 0px rgba(255, 255, 255, 0.07);
 		--shadow-btn: 0px 1px 0px 1px rgba(255, 255, 255, 0.03);
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 50fab6be3..af3344f82 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -54,11 +54,14 @@ export default {
 				6: "6px"
 			},
 			borderRadius: {
-				card: "1rem",
-				"card-lg": "1.25rem",
-				"card-sm": "0.625rem",
-				input: "0.563rem",
-				button: "0.313rem"
+				card: "16px",
+				"card-lg": "20px",
+				"card-sm": "10px",
+				input: "9px",
+				button: "5px",
+				"5px": "5px",
+				"9px": "9px",
+				"10px": "10px"
 			},
 			height: {
 				input: "3rem",

From f066196eac02dd34184a8b8752a6ff546220a331 Mon Sep 17 00:00:00 2001
From: Hunter Johnston <johnstonhuntera@gmail.com>
Date: Sun, 26 Nov 2023 13:02:02 -0500
Subject: [PATCH 132/217] fix switch styles

---
 src/components/demos/popover-demo.svelte | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/components/demos/popover-demo.svelte b/src/components/demos/popover-demo.svelte
index d91d04091..45ccf2fc7 100644
--- a/src/components/demos/popover-demo.svelte
+++ b/src/components/demos/popover-demo.svelte
@@ -57,12 +57,12 @@
 				</div>
 				<Switch.Root
 					id="necessary"
-					class="peer inline-flex h-7 w-12 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-mini-inset transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-foreground data-[state=unchecked]:bg-muted"
+					class="peer inline-flex h-[36px] min-h-[36px] w-[60px] shrink-0 cursor-pointer items-center rounded-full bg-dark-10 px-[3px] transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-foreground data-[state=unchecked]:bg-dark-10 data-[state=unchecked]:shadow-mini-inset"
 					bind:checked={necessary}
 					disabled
 				>
 					<Switch.Thumb
-						class="pointer-events-none block h-6 w-6 rounded-full bg-background shadow-mini ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0"
+						class="pointer-events-none block shrink-0 rounded-full bg-background transition-transform sq-[30px] data-[state=checked]:translate-x-6 data-[state=unchecked]:translate-x-0 data-[state=unchecked]:shadow-mini dark:border-border-input dark:shadow-mini dark:data-[state=unchecked]:border"
 					/>
 				</Switch.Root>
 			</div>
@@ -78,11 +78,11 @@
 				</div>
 				<Switch.Root
 					id="marketing"
-					class="peer inline-flex h-7 w-12 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-mini-inset transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-foreground data-[state=unchecked]:bg-muted"
+					class="peer inline-flex h-[36px] min-h-[36px] w-[60px] shrink-0 cursor-pointer items-center rounded-full bg-dark-10 px-[3px] transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-foreground data-[state=unchecked]:bg-dark-10 data-[state=unchecked]:shadow-mini-inset"
 					bind:checked={marketing}
 				>
 					<Switch.Thumb
-						class="pointer-events-none block h-6 w-6 rounded-full bg-background shadow-mini ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0"
+						class="pointer-events-none block shrink-0 rounded-full bg-background transition-transform sq-[30px] data-[state=checked]:translate-x-6 data-[state=unchecked]:translate-x-0 data-[state=unchecked]:shadow-mini dark:border-border-input dark:shadow-mini dark:data-[state=unchecked]:border"
 					/>
 				</Switch.Root>
 			</div>
@@ -98,11 +98,11 @@
 				</div>
 				<Switch.Root
 					id="shopping"
-					class="peer inline-flex h-7 w-12 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-mini-inset transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-foreground data-[state=unchecked]:bg-muted"
+					class="peer inline-flex h-[36px] min-h-[36px] w-[60px] shrink-0 cursor-pointer items-center rounded-full bg-dark-10 px-[3px] transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-foreground data-[state=unchecked]:bg-dark-10 data-[state=unchecked]:shadow-mini-inset"
 					bind:checked={shopping}
 				>
 					<Switch.Thumb
-						class="pointer-events-none block h-6 w-6 rounded-full bg-background shadow-mini ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0"
+						class="pointer-events-none block shrink-0 rounded-full bg-background transition-transform sq-[30px] data-[state=checked]:translate-x-6 data-[state=unchecked]:translate-x-0 data-[state=unchecked]:shadow-mini dark:border-border-input dark:shadow-mini dark:data-[state=unchecked]:border"
 					/>
 				</Switch.Root>
 			</div>

From d832a9a59a9df1fd98d670f049ce0bab8fadbde3 Mon Sep 17 00:00:00 2001
From: Hunter Johnston <johnstonhuntera@gmail.com>
Date: Sun, 26 Nov 2023 13:04:40 -0500
Subject: [PATCH 133/217] fix menubar

---
 src/components/demos/menubar-demo.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/demos/menubar-demo.svelte b/src/components/demos/menubar-demo.svelte
index 287a21b0e..2f88ec616 100644
--- a/src/components/demos/menubar-demo.svelte
+++ b/src/components/demos/menubar-demo.svelte
@@ -190,7 +190,7 @@
 	</Menubar.Menu>
 	<Menubar.Menu>
 		<Menubar.Trigger
-			class="inline-flex h-10 cursor-default items-center justify-center rounded-[9px] px-3 text-sm font-medium outline-none data-[highlighted]:bg-muted data-[state=open]:bg-muted"
+			class="mr-[20px] inline-flex h-10 cursor-default items-center justify-center rounded-[9px] px-3 text-sm font-medium outline-none data-[highlighted]:bg-muted data-[state=open]:bg-muted"
 			>Profiles</Menubar.Trigger
 		>
 		<Menubar.Content

From 36c9e1fcecb255532803576f3b05eac3f1ff3543 Mon Sep 17 00:00:00 2001
From: Hunter Johnston <johnstonhuntera@gmail.com>
Date: Sun, 26 Nov 2023 13:11:23 -0500
Subject: [PATCH 134/217] progress-demo

---
 src/components/demos/progress-demo.svelte | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/demos/progress-demo.svelte b/src/components/demos/progress-demo.svelte
index c768a5429..1616fb69c 100644
--- a/src/components/demos/progress-demo.svelte
+++ b/src/components/demos/progress-demo.svelte
@@ -12,10 +12,10 @@
 <Progress.Root
 	{value}
 	max={100}
-	class="relative h-6 w-[60%] overflow-hidden rounded-full bg-foreground/20 "
+	class="relative h-[15px] w-[60%] overflow-hidden rounded-full bg-dark-10 shadow-mini-inset"
 >
 	<div
-		class="h-full w-full flex-1 bg-foreground transition-all"
+		class="h-full w-full flex-1 rounded-full bg-foreground shadow-mini-inset transition-all"
 		style={`transform: translateX(-${
 			100 - (100 * (value ?? 0)) / (100 ?? 1)
 		}%)`}

From 2cdec2ba9082708f6f285f1040202ed6f34780df Mon Sep 17 00:00:00 2001
From: Hunter Johnston <johnstonhuntera@gmail.com>
Date: Sun, 26 Nov 2023 13:17:33 -0500
Subject: [PATCH 135/217] shorten data attributes

---
 src/content/api-reference/accordion.ts       | 10 ++++----
 src/content/api-reference/alert-dialog.ts    | 16 ++++++------
 src/content/api-reference/avatar.ts          |  6 ++---
 src/content/api-reference/button.ts          |  2 +-
 src/content/api-reference/calendar.ts        | 24 +++++++++---------
 src/content/api-reference/checkbox.ts        |  4 +--
 src/content/api-reference/collapsible.ts     |  6 ++---
 src/content/api-reference/dialog.ts          | 14 +++++------
 src/content/api-reference/label.ts           |  2 +-
 src/content/api-reference/link-preview.ts    |  6 ++---
 src/content/api-reference/menu.ts            | 26 ++++++++++----------
 src/content/api-reference/popover.ts         |  8 +++---
 src/content/api-reference/progress.ts        |  2 +-
 src/content/api-reference/radio-group.ts     |  6 ++---
 src/content/api-reference/range-calendar.ts  | 24 +++++++++---------
 src/content/api-reference/select.ts          | 16 ++++++------
 src/content/api-reference/separator.ts       |  2 +-
 src/content/api-reference/slider.ts          |  8 +++---
 src/content/api-reference/switch.ts          |  4 +--
 src/content/api-reference/tabs.ts            |  8 +++---
 src/content/api-reference/toggle-group.ts    |  4 +--
 src/content/api-reference/toggle.ts          |  2 +-
 src/content/api-reference/tooltip.ts         |  6 ++---
 src/lib/bits/button/components/Button.svelte |  2 +-
 src/lib/internal/attrs.ts                    |  2 +-
 src/tests/accordion/Accordion.spec.ts        | 14 +++++------
 src/tests/alert-dialog/AlertDialog.spec.ts   |  2 +-
 src/tests/checkbox/Checkbox.spec.ts          |  4 +--
 src/tests/collapsible/Collapsible.spec.ts    |  6 ++---
 src/tests/context-menu/ContextMenu.spec.ts   |  4 +--
 src/tests/dialog/Dialog.spec.ts              |  2 +-
 src/tests/dropdown-menu/DropdownMenu.spec.ts |  4 +--
 src/tests/label/Label.spec.ts                |  2 +-
 src/tests/link-preview/LinkPreview.spec.ts   |  2 +-
 src/tests/menubar/Menubar.spec.ts            |  6 ++---
 src/tests/popover/Popover.spec.ts            |  2 +-
 src/tests/progress/Progress.spec.ts          |  2 +-
 src/tests/radio-group/RadioGroup.spec.ts     |  4 +--
 src/tests/select/Select.spec.ts              |  4 +--
 src/tests/separator/Separator.spec.ts        |  2 +-
 src/tests/switch/Switch.spec.ts              |  4 +--
 src/tests/tabs/Tabs.spec.ts                  |  8 +++---
 src/tests/toggle-group/ToggleGroup.spec.ts   |  4 +--
 src/tests/toggle/Toggle.spec.ts              |  2 +-
 src/tests/tooltip/Tooltip.spec.ts            |  2 +-
 45 files changed, 145 insertions(+), 145 deletions(-)

diff --git a/src/content/api-reference/accordion.ts b/src/content/api-reference/accordion.ts
index ae1c952d4..606a435ad 100644
--- a/src/content/api-reference/accordion.ts
+++ b/src/content/api-reference/accordion.ts
@@ -40,7 +40,7 @@ const root: APISchema<Accordion.Props<false>> = {
 			description: "The orientation of the accordion."
 		},
 		{
-			name: "bits-accordion-root",
+			name: "accordion-root",
 			value: "",
 			description: "Present on the root element."
 		}
@@ -75,7 +75,7 @@ const item: APISchema<Accordion.ItemProps> = {
 			description: "Present when the accordion item is disabled."
 		},
 		{
-			name: "bits-accordion-item",
+			name: "accordion-item",
 			description: "Present on the item element."
 		}
 	]
@@ -100,7 +100,7 @@ const trigger: APISchema<Accordion.TriggerProps> = {
 			description: "The value of the accordion item."
 		},
 		{
-			name: "bits-accordion-trigger",
+			name: "accordion-trigger",
 			description: "Present on the trigger element."
 		}
 	]
@@ -125,7 +125,7 @@ const content: APISchema<Accordion.ContentProps> = {
 			description: "The value of the accordion item."
 		},
 		{
-			name: "bits-accordion-content",
+			name: "accordion-content",
 			description: "Present on the content element."
 		}
 	]
@@ -151,7 +151,7 @@ const header: APISchema<Accordion.HeaderProps> = {
 			description: "The heading level of the header."
 		},
 		{
-			name: "bits-accordion-header",
+			name: "accordion-header",
 			description: "Present on the header element."
 		}
 	]
diff --git a/src/content/api-reference/alert-dialog.ts b/src/content/api-reference/alert-dialog.ts
index b2ff3c195..f4271e0cd 100644
--- a/src/content/api-reference/alert-dialog.ts
+++ b/src/content/api-reference/alert-dialog.ts
@@ -55,7 +55,7 @@ const action: APISchema<AlertDialog.ActionProps> = {
 	},
 	dataAttributes: [
 		{
-			name: "bits-alert-dialog-action",
+			name: "alert-dialog-action",
 			description: "Present on the action button."
 		}
 	]
@@ -67,7 +67,7 @@ const cancel: APISchema<AlertDialog.CancelProps> = {
 	props: { asChild },
 	dataAttributes: [
 		{
-			name: "bits-alert-dialog-cancel",
+			name: "alert-dialog-cancel",
 			description: "Present on the cancel button."
 		}
 	]
@@ -84,7 +84,7 @@ const content: APISchema<AlertDialog.ContentProps> = {
 			description: "The state of the alert dialog."
 		},
 		{
-			name: "bits-alert-dialog-content",
+			name: "alert-dialog-content",
 			description: "Present on the content."
 		}
 	]
@@ -105,7 +105,7 @@ const title: APISchema<AlertDialog.TitleProps> = {
 	},
 	dataAttributes: [
 		{
-			name: "bits-alert-dialog-title",
+			name: "alert-dialog-title",
 			description: "Present on the title."
 		}
 	]
@@ -117,7 +117,7 @@ const description: APISchema<AlertDialog.DescriptionProps> = {
 	props: { asChild },
 	dataAttributes: [
 		{
-			name: "bits-alert-dialog-description",
+			name: "alert-dialog-description",
 			description: "Present on the description."
 		}
 	]
@@ -129,7 +129,7 @@ const trigger: APISchema<AlertDialog.TriggerProps> = {
 	props: { asChild },
 	dataAttributes: [
 		{
-			name: "bits-alert-dialog-trigger",
+			name: "alert-dialog-trigger",
 			description: "Present on the trigger."
 		}
 	]
@@ -146,7 +146,7 @@ const overlay: APISchema<AlertDialog.OverlayProps> = {
 			description: "The state of the alert dialog."
 		},
 		{
-			name: "bits-alert-dialog-overlay",
+			name: "alert-dialog-overlay",
 			description: "Present on the overlay."
 		}
 	]
@@ -161,7 +161,7 @@ const portal: APISchema<AlertDialog.PortalProps> = {
 			description: "Present if the `portal` prop is not `null`."
 		},
 		{
-			name: "bits-alert-dialog-portal",
+			name: "alert-dialog-portal",
 			description: "Present on the portal."
 		}
 	]
diff --git a/src/content/api-reference/avatar.ts b/src/content/api-reference/avatar.ts
index 4aaea428d..e1fe7ec6b 100644
--- a/src/content/api-reference/avatar.ts
+++ b/src/content/api-reference/avatar.ts
@@ -32,7 +32,7 @@ export const root: APISchema<Avatar.Props> = {
 	},
 	dataAttributes: [
 		{
-			name: "bits-avatar-root",
+			name: "avatar-root",
 			description: "Present on the root element."
 		}
 	]
@@ -46,7 +46,7 @@ export const image: APISchema<Avatar.ImageProps> = {
 	},
 	dataAttributes: [
 		{
-			name: "bits-avatar-image",
+			name: "avatar-image",
 			description: "Present on the image element."
 		}
 	]
@@ -58,7 +58,7 @@ export const fallback: APISchema<Avatar.FallbackProps> = {
 	props: { asChild },
 	dataAttributes: [
 		{
-			name: "bits-avatar-fallback",
+			name: "avatar-fallback",
 			description: "Present on the fallback element."
 		}
 	]
diff --git a/src/content/api-reference/button.ts b/src/content/api-reference/button.ts
index 3b5c1e738..21ca411fb 100644
--- a/src/content/api-reference/button.ts
+++ b/src/content/api-reference/button.ts
@@ -19,7 +19,7 @@ export const root: APISchema<Button.Props & { href: string }> = {
 	},
 	dataAttributes: [
 		{
-			name: "bits-button-root",
+			name: "button-root",
 			description: "Present on the button element."
 		}
 	]
diff --git a/src/content/api-reference/calendar.ts b/src/content/api-reference/calendar.ts
index 1ebd3631a..2ff23d3bf 100644
--- a/src/content/api-reference/calendar.ts
+++ b/src/content/api-reference/calendar.ts
@@ -118,7 +118,7 @@ const root: APISchema<Calendar.Props> = {
 			description: "Present on the root element when the calendar is readonly."
 		},
 		{
-			name: "bits-calendar-root",
+			name: "calendar-root",
 			description: "Present on the root element."
 		}
 	]
@@ -140,7 +140,7 @@ const cell: APISchema<Calendar.CellProps> = {
 			description: "Present on the element when the date is disabled."
 		},
 		{
-			name: "bits-calendar-cell",
+			name: "calendar-cell",
 			description: "Present on the cell element."
 		}
 	]
@@ -197,7 +197,7 @@ const date: APISchema<Calendar.DateProps> = {
 			description: "Present on the element when the date is focused."
 		},
 		{
-			name: "bits-calendar-date",
+			name: "calendar-date",
 			description: "Present on the date element."
 		}
 	]
@@ -211,7 +211,7 @@ const grid: APISchema<Calendar.GridProps> = {
 	},
 	dataAttributes: [
 		{
-			name: "bits-calendar-grid",
+			name: "calendar-grid",
 			description: "Present on the grid element."
 		}
 	]
@@ -225,7 +225,7 @@ const gridBody: APISchema<Calendar.GridBodyProps> = {
 	},
 	dataAttributes: [
 		{
-			name: "bits-calendar-grid-body",
+			name: "calendar-grid-body",
 			description: "Present on the grid body element."
 		}
 	]
@@ -239,7 +239,7 @@ const gridHead: APISchema<Calendar.GridHeadProps> = {
 	},
 	dataAttributes: [
 		{
-			name: "bits-calendar-grid-head",
+			name: "calendar-grid-head",
 			description: "Present on the grid head element."
 		}
 	]
@@ -253,7 +253,7 @@ const gridRow: APISchema<Calendar.GridRowProps> = {
 	},
 	dataAttributes: [
 		{
-			name: "bits-calendar-grid-row",
+			name: "calendar-grid-row",
 			description: "Present on the grid row element."
 		}
 	]
@@ -267,7 +267,7 @@ const headCell: APISchema<Calendar.HeadCellProps> = {
 	},
 	dataAttributes: [
 		{
-			name: "bits-calendar-head-cell",
+			name: "calendar-head-cell",
 			description: "Present on the head cell element."
 		}
 	]
@@ -281,7 +281,7 @@ const header: APISchema<Calendar.HeaderProps> = {
 	},
 	dataAttributes: [
 		{
-			name: "bits-calendar-header",
+			name: "calendar-header",
 			description: "Present on the header element."
 		}
 	]
@@ -295,7 +295,7 @@ const heading: APISchema<Calendar.HeadingProps> = {
 	},
 	dataAttributes: [
 		{
-			name: "bits-calendar-heading",
+			name: "calendar-heading",
 			description: "Present on the heading element."
 		}
 	]
@@ -309,7 +309,7 @@ const nextButton: APISchema<Calendar.NextButtonProps> = {
 	},
 	dataAttributes: [
 		{
-			name: "bits-calendar-next-button",
+			name: "calendar-next-button",
 			description: "Present on the next button element."
 		}
 	]
@@ -323,7 +323,7 @@ const prevButton: APISchema<Calendar.PrevButtonProps> = {
 	},
 	dataAttributes: [
 		{
-			name: "bits-calendar-prev-button",
+			name: "calendar-prev-button",
 			description: "Present on the prev button element."
 		}
 	]
diff --git a/src/content/api-reference/checkbox.ts b/src/content/api-reference/checkbox.ts
index f9138f54c..3fd308790 100644
--- a/src/content/api-reference/checkbox.ts
+++ b/src/content/api-reference/checkbox.ts
@@ -56,7 +56,7 @@ export const root: APISchema<Checkbox.Props> = {
 			description: "The checkbox's state. Can be 'checked', 'unchecked', or 'indeterminate'."
 		},
 		{
-			name: "bits-checkbox-root",
+			name: "checkbox-root",
 			description: "Present on the root element."
 		}
 	]
@@ -89,7 +89,7 @@ export const indicator: APISchema<Checkbox.IndicatorProps> = {
 	props: { asChild },
 	dataAttributes: [
 		{
-			name: "bits-checkbox-indicator",
+			name: "checkbox-indicator",
 			description: "Present on the indicator element."
 		}
 	]
diff --git a/src/content/api-reference/collapsible.ts b/src/content/api-reference/collapsible.ts
index 88808e1f3..429111270 100644
--- a/src/content/api-reference/collapsible.ts
+++ b/src/content/api-reference/collapsible.ts
@@ -40,7 +40,7 @@ export const root: APISchema<Collapsible.Props> = {
 			description: "The collapsible's open state."
 		},
 		{
-			name: "bits-collapsible-root",
+			name: "collapsible-root",
 			description: "Present on the root element."
 		}
 	]
@@ -62,7 +62,7 @@ export const trigger: APISchema<Collapsible.TriggerProps> = {
 			description: "The collapsible's open state."
 		},
 		{
-			name: "bits-collapsible-trigger",
+			name: "collapsible-trigger",
 			description: "Present on the trigger element."
 		}
 	]
@@ -89,7 +89,7 @@ export const content: APISchema<Collapsible.ContentProps> = {
 			description: "The collapsible's open state."
 		},
 		{
-			name: "bits-collapsible-content",
+			name: "collapsible-content",
 			description: "Present on the content element."
 		}
 	]
diff --git a/src/content/api-reference/dialog.ts b/src/content/api-reference/dialog.ts
index 1a369a0a2..607e25046 100644
--- a/src/content/api-reference/dialog.ts
+++ b/src/content/api-reference/dialog.ts
@@ -53,7 +53,7 @@ export const close: APISchema<Dialog.CloseProps> = {
 	props: { asChild },
 	dataAttributes: [
 		{
-			name: "bits-dialog-close",
+			name: "dialog-close",
 			description: "Present on the close button."
 		}
 	]
@@ -70,7 +70,7 @@ export const content: APISchema<Dialog.ContentProps> = {
 			description: "The state of the dialog."
 		},
 		{
-			name: "bits-dialog-content",
+			name: "dialog-content",
 			description: "Present on the content."
 		}
 	]
@@ -91,7 +91,7 @@ export const title: APISchema<Dialog.TitleProps> = {
 	},
 	dataAttributes: [
 		{
-			name: "bits-dialog-title",
+			name: "dialog-title",
 			description: "Present on the title."
 		}
 	]
@@ -103,7 +103,7 @@ export const description: APISchema<Dialog.DescriptionProps> = {
 	props: { asChild },
 	dataAttributes: [
 		{
-			name: "bits-dialog-description",
+			name: "dialog-description",
 			description: "Present on the description."
 		}
 	]
@@ -115,7 +115,7 @@ export const trigger: APISchema<Dialog.TriggerProps> = {
 	props: { asChild },
 	dataAttributes: [
 		{
-			name: "bits-dialog-trigger",
+			name: "dialog-trigger",
 			description: "Present on the trigger."
 		}
 	]
@@ -132,7 +132,7 @@ export const overlay: APISchema<Dialog.OverlayProps> = {
 			description: "The state of the dialog."
 		},
 		{
-			name: "bits-dialog-overlay",
+			name: "dialog-overlay",
 			description: "Present on the overlay."
 		}
 	]
@@ -148,7 +148,7 @@ export const portal: APISchema<Dialog.PortalProps> = {
 			description: "Present on the portal."
 		},
 		{
-			name: "bits-dialog-portal",
+			name: "dialog-portal",
 			description: "Present on the portal."
 		}
 	]
diff --git a/src/content/api-reference/label.ts b/src/content/api-reference/label.ts
index 9276bd975..e8f7be2d2 100644
--- a/src/content/api-reference/label.ts
+++ b/src/content/api-reference/label.ts
@@ -8,7 +8,7 @@ export const root: APISchema<Label.Props> = {
 	props: { asChild },
 	dataAttributes: [
 		{
-			name: "bits-label-root",
+			name: "label-root",
 			description: "Present on the root element."
 		}
 	]
diff --git a/src/content/api-reference/link-preview.ts b/src/content/api-reference/link-preview.ts
index 9d19d9e4d..e5c8e20e6 100644
--- a/src/content/api-reference/link-preview.ts
+++ b/src/content/api-reference/link-preview.ts
@@ -64,7 +64,7 @@ export const trigger: APISchema<LinkPreview.TriggerProps> = {
 			description: "The open state of the link preview."
 		},
 		{
-			name: "bits-link-preview-trigger",
+			name: "link-preview-trigger",
 			description: "Present on the trigger element."
 		}
 	]
@@ -81,7 +81,7 @@ export const content: APISchema<LinkPreview.ContentProps> = {
 			description: "The open state of the link preview."
 		},
 		{
-			name: "bits-link-preview-content",
+			name: "link-preview-content",
 			description: "Present on the content element."
 		}
 	]
@@ -98,7 +98,7 @@ export const arrow: APISchema<LinkPreview.ArrowProps> = {
 			description: "Present on the arrow element."
 		},
 		{
-			name: "bits-link-preview-arrow",
+			name: "link-preview-arrow",
 			description: "Present on the arrow element."
 		}
 	]
diff --git a/src/content/api-reference/menu.ts b/src/content/api-reference/menu.ts
index 2b7261132..de12ba5cc 100644
--- a/src/content/api-reference/menu.ts
+++ b/src/content/api-reference/menu.ts
@@ -206,7 +206,7 @@ type DataAttrs = APISchema["dataAttributes"];
 const triggerAttrs: DataAttrs = [
 	STATE,
 	{
-		name: "bits-menu-trigger",
+		name: "menu-trigger",
 		description: "Present on the trigger element."
 	}
 ];
@@ -214,7 +214,7 @@ const triggerAttrs: DataAttrs = [
 const contentAttrs: DataAttrs = [
 	STATE,
 	{
-		name: "bits-menu-content",
+		name: "menu-content",
 		description: "Present on the content element."
 	}
 ];
@@ -222,7 +222,7 @@ const contentAttrs: DataAttrs = [
 const arrowAttrs: DataAttrs = [
 	STATE,
 	{
-		name: "bits-menu-arrow",
+		name: "menu-arrow",
 		description: "Present on the arrow element."
 	}
 ];
@@ -245,21 +245,21 @@ const sharedItemAttrs: DataAttrs = [
 const itemAttrs: DataAttrs = [
 	...sharedItemAttrs,
 	{
-		name: "bits-menu-item",
+		name: "menu-item",
 		description: "Present on the item element."
 	}
 ];
 
 const groupAttrs: DataAttrs = [
 	{
-		name: "bits-menu-group",
+		name: "menu-group",
 		description: "Present on the group element."
 	}
 ];
 
 const labelAttrs: DataAttrs = [
 	{
-		name: "bits-menu-label",
+		name: "menu-label",
 		description: "Present on the group label element."
 	}
 ];
@@ -275,7 +275,7 @@ const checkboxItemAttrs: DataAttrs = [
 
 const radioGroupAttrs: DataAttrs = [
 	{
-		name: "bits-menu-radio-group",
+		name: "menu-radio-group",
 		description: "Present on the radio group element."
 	}
 ];
@@ -292,7 +292,7 @@ const radioItemAttrs: DataAttrs = [
 		description: "The value of the radio item."
 	},
 	{
-		name: "bits-menu-radio-item",
+		name: "menu-radio-item",
 		description: "Present on the radio item element."
 	}
 ];
@@ -304,7 +304,7 @@ const separatorAttrs: DataAttrs = [
 		description: "The orientation of the separator."
 	},
 	{
-		name: "bits-menu-separator",
+		name: "menu-separator",
 		description: "Present on the separator element."
 	}
 ];
@@ -312,7 +312,7 @@ const separatorAttrs: DataAttrs = [
 const subContentAttrs: DataAttrs = [
 	STATE,
 	{
-		name: "bits-menu-sub-content",
+		name: "menu-sub-content",
 		description: "Present on the submenu content element."
 	}
 ];
@@ -321,21 +321,21 @@ const subTriggerAttrs: DataAttrs = [
 	...sharedItemAttrs,
 	STATE,
 	{
-		name: "bits-menu-sub-trigger",
+		name: "menu-sub-trigger",
 		description: "Present on the submenu trigger element."
 	}
 ];
 
 const checkboxIndicatorAttrs: DataAttrs = [
 	{
-		name: "bits-menu-checkbox-indicator",
+		name: "menu-checkbox-indicator",
 		description: "Present on the checkbox indicator element."
 	}
 ];
 
 const radioIndicatorAttrs: DataAttrs = [
 	{
-		name: "bits-menu-radio-indicator",
+		name: "menu-radio-indicator",
 		description: "Present on the radio indicator element."
 	}
 ];
diff --git a/src/content/api-reference/popover.ts b/src/content/api-reference/popover.ts
index 529315d24..9cac7dc36 100644
--- a/src/content/api-reference/popover.ts
+++ b/src/content/api-reference/popover.ts
@@ -71,7 +71,7 @@ export const trigger: APISchema<Popover.TriggerProps> = {
 			description: "The open state of the link preview."
 		},
 		{
-			name: "bits-popover-trigger",
+			name: "popover-trigger",
 			description: "Present on the trigger element."
 		}
 	]
@@ -88,7 +88,7 @@ export const content: APISchema<Popover.ContentProps> = {
 			description: "The open state of the popover."
 		},
 		{
-			name: "bits-popover-content",
+			name: "popover-content",
 			description: "Present on the content element."
 		}
 	]
@@ -101,7 +101,7 @@ export const close: APISchema<Popover.CloseProps> = {
 	props: { asChild },
 	dataAttributes: [
 		{
-			name: "bits-popover-close",
+			name: "popover-close",
 			description: "Present on the close button."
 		}
 	]
@@ -118,7 +118,7 @@ export const arrow: APISchema<Popover.ArrowProps> = {
 			description: "Present on the arrow element."
 		},
 		{
-			name: "bits-popover-arrow",
+			name: "popover-arrow",
 			description: "Present on the arrow element."
 		}
 	]
diff --git a/src/content/api-reference/progress.ts b/src/content/api-reference/progress.ts
index cd0d4261c..df344d698 100644
--- a/src/content/api-reference/progress.ts
+++ b/src/content/api-reference/progress.ts
@@ -42,7 +42,7 @@ export const root: APISchema<Progress.Props> = {
 			description: "The maximum value of the progress bar."
 		},
 		{
-			name: "bits-progress-root",
+			name: "progress-root",
 			description: "Present on the root element."
 		}
 	]
diff --git a/src/content/api-reference/radio-group.ts b/src/content/api-reference/radio-group.ts
index e7d5835b1..f91c74d4a 100644
--- a/src/content/api-reference/radio-group.ts
+++ b/src/content/api-reference/radio-group.ts
@@ -54,7 +54,7 @@ export const root: APISchema<RadioGroup.Props> = {
 			description: "The orientation of the radio group."
 		},
 		{
-			name: "bits-radio-group-root",
+			name: "radio-group-root",
 			description: "Present on the root element."
 		}
 	]
@@ -97,7 +97,7 @@ export const item: APISchema<RadioGroup.ItemProps> = {
 			description: "The orientation of the parent radio group."
 		},
 		{
-			name: "bits-radio-group-item",
+			name: "radio-group-item",
 			description: "Present on the radio item element."
 		}
 	]
@@ -116,7 +116,7 @@ export const indicator: APISchema = {
 		"A component which is used to indicate the radio item's checked state. Any children of this component will only be visible when the radio item is checked.",
 	dataAttributes: [
 		{
-			name: "bits-radio-group-indicator",
+			name: "radio-group-indicator",
 			description: "Present on the indicator element."
 		}
 	]
diff --git a/src/content/api-reference/range-calendar.ts b/src/content/api-reference/range-calendar.ts
index 2e40248ab..1ab1b88aa 100644
--- a/src/content/api-reference/range-calendar.ts
+++ b/src/content/api-reference/range-calendar.ts
@@ -116,7 +116,7 @@ const root: APISchema<RangeCalendar.Props> = {
 			description: "Present on the root element when the calendar is readonly."
 		},
 		{
-			name: "bits-calendar-root",
+			name: "calendar-root",
 			description: "Present on the root element."
 		}
 	]
@@ -138,7 +138,7 @@ const cell: APISchema<RangeCalendar.CellProps> = {
 			description: "Present on the element when the date is disabled."
 		},
 		{
-			name: "bits-calendar-cell",
+			name: "calendar-cell",
 			description: "Present on the cell element."
 		}
 	]
@@ -208,7 +208,7 @@ const date: APISchema<RangeCalendar.DateProps> = {
 			description: "Present on the element when the date is focused."
 		},
 		{
-			name: "bits-calendar-date",
+			name: "calendar-date",
 			description: "Present on the date element."
 		}
 	]
@@ -222,7 +222,7 @@ const grid: APISchema<RangeCalendar.GridProps> = {
 	},
 	dataAttributes: [
 		{
-			name: "bits-calendar-grid",
+			name: "calendar-grid",
 			description: "Present on the grid element."
 		}
 	]
@@ -236,7 +236,7 @@ const gridBody: APISchema<RangeCalendar.GridBodyProps> = {
 	},
 	dataAttributes: [
 		{
-			name: "bits-calendar-grid-body",
+			name: "calendar-grid-body",
 			description: "Present on the grid body element."
 		}
 	]
@@ -250,7 +250,7 @@ const gridHead: APISchema<RangeCalendar.GridHeadProps> = {
 	},
 	dataAttributes: [
 		{
-			name: "bits-calendar-grid-head",
+			name: "calendar-grid-head",
 			description: "Present on the grid head element."
 		}
 	]
@@ -264,7 +264,7 @@ const gridRow: APISchema<RangeCalendar.GridRowProps> = {
 	},
 	dataAttributes: [
 		{
-			name: "bits-calendar-grid-row",
+			name: "calendar-grid-row",
 			description: "Present on the grid row element."
 		}
 	]
@@ -278,7 +278,7 @@ const headCell: APISchema<RangeCalendar.HeadCellProps> = {
 	},
 	dataAttributes: [
 		{
-			name: "bits-calendar-head-cell",
+			name: "calendar-head-cell",
 			description: "Present on the head cell element."
 		}
 	]
@@ -292,7 +292,7 @@ const header: APISchema<RangeCalendar.HeaderProps> = {
 	},
 	dataAttributes: [
 		{
-			name: "bits-calendar-header",
+			name: "calendar-header",
 			description: "Present on the header element."
 		}
 	]
@@ -306,7 +306,7 @@ const heading: APISchema<RangeCalendar.HeadingProps> = {
 	},
 	dataAttributes: [
 		{
-			name: "bits-calendar-heading",
+			name: "calendar-heading",
 			description: "Present on the heading element."
 		}
 	]
@@ -320,7 +320,7 @@ const nextButton: APISchema<RangeCalendar.NextButtonProps> = {
 	},
 	dataAttributes: [
 		{
-			name: "bits-calendar-next-button",
+			name: "calendar-next-button",
 			description: "Present on the next button element."
 		}
 	]
@@ -334,7 +334,7 @@ const prevButton: APISchema<RangeCalendar.PrevButtonProps> = {
 	},
 	dataAttributes: [
 		{
-			name: "bits-calendar-prev-button",
+			name: "calendar-prev-button",
 			description: "Present on the prev button element."
 		}
 	]
diff --git a/src/content/api-reference/select.ts b/src/content/api-reference/select.ts
index 7e4fcd7aa..2edf4f9c3 100644
--- a/src/content/api-reference/select.ts
+++ b/src/content/api-reference/select.ts
@@ -118,7 +118,7 @@ export const trigger: APISchema<Select.TriggerProps> = {
 			description: "Present when the trigger is disabled."
 		},
 		{
-			name: "bits-select-trigger",
+			name: "select-trigger",
 			description: "Present on the trigger element."
 		}
 	]
@@ -130,7 +130,7 @@ export const content: APISchema<Select.ContentProps> = {
 	props: { ...transitionProps, ...floatingPositioning, asChild },
 	dataAttributes: [
 		{
-			name: "bits-select-content",
+			name: "select-content",
 			description: "Present on the content element."
 		}
 	]
@@ -167,7 +167,7 @@ export const item: APISchema<Select.ItemProps> = {
 			description: "Present when the item is disabled."
 		},
 		{
-			name: "bits-select-item",
+			name: "select-item",
 			description: "Present on the item element."
 		}
 	]
@@ -186,7 +186,7 @@ export const value: APISchema = {
 	},
 	dataAttributes: [
 		{
-			name: "bits-select-value",
+			name: "select-value",
 			description: "Present on the value element."
 		}
 	]
@@ -205,7 +205,7 @@ export const group: APISchema<Select.GroupProps> = {
 	props: { asChild },
 	dataAttributes: [
 		{
-			name: "bits-select-group",
+			name: "select-group",
 			description: "Present on the group element."
 		}
 	]
@@ -218,7 +218,7 @@ export const label: APISchema<Select.LabelProps> = {
 	props: { asChild },
 	dataAttributes: [
 		{
-			name: "bits-select-label",
+			name: "select-label",
 			description: "Present on the label element."
 		}
 	]
@@ -232,7 +232,7 @@ export const separator: APISchema<Select.SeparatorProps> = {
 	},
 	dataAttributes: [
 		{
-			name: "bits-select-separator",
+			name: "select-separator",
 			description: "Present on the separator element."
 		}
 	]
@@ -246,7 +246,7 @@ export const indicator: APISchema<Select.IndicatorProps> = {
 	},
 	dataAttributes: [
 		{
-			name: "bits-select-indicator",
+			name: "select-indicator",
 			description: "Present on the indicator element."
 		}
 	]
diff --git a/src/content/api-reference/separator.ts b/src/content/api-reference/separator.ts
index 5921867d8..7a061be3a 100644
--- a/src/content/api-reference/separator.ts
+++ b/src/content/api-reference/separator.ts
@@ -30,7 +30,7 @@ export const root: APISchema<Separator.Props> = {
 			description: "The orientation of the separator."
 		},
 		{
-			name: "bits-separator-root",
+			name: "separator-root",
 			description: "Present on the root element."
 		}
 	]
diff --git a/src/content/api-reference/slider.ts b/src/content/api-reference/slider.ts
index 91ecf0c10..04b4998e1 100644
--- a/src/content/api-reference/slider.ts
+++ b/src/content/api-reference/slider.ts
@@ -56,7 +56,7 @@ const root: APISchema<Slider.Props> = {
 			description: "The orientation of the slider."
 		},
 		{
-			name: "bits-slider-root",
+			name: "slider-root",
 			description: "Present on the root element."
 		}
 	]
@@ -70,7 +70,7 @@ const thumb: APISchema<Slider.ThumbProps> = {
 	},
 	dataAttributes: [
 		{
-			name: "bits-slider-thumb",
+			name: "slider-thumb",
 			description: "Present on the thumb elements."
 		}
 	]
@@ -84,7 +84,7 @@ const range: APISchema<Slider.RangeProps> = {
 	},
 	dataAttributes: [
 		{
-			name: "bits-slider-range",
+			name: "slider-range",
 			description: "Present on the range elements."
 		}
 	]
@@ -102,7 +102,7 @@ const tick: APISchema<Slider.TickProps> = {
 			description: "Present when the tick is bounded."
 		},
 		{
-			name: "bits-slider-tick",
+			name: "slider-tick",
 			description: "Present on the tick elements."
 		}
 	]
diff --git a/src/content/api-reference/switch.ts b/src/content/api-reference/switch.ts
index 65814b7f1..bb3832673 100644
--- a/src/content/api-reference/switch.ts
+++ b/src/content/api-reference/switch.ts
@@ -66,7 +66,7 @@ const root: APISchema<Switch.Props> = {
 			description: "Present when the switch is disabled."
 		},
 		{
-			name: "bits-switch-root",
+			name: "switch-root",
 			description: "Present on the root element."
 		}
 	]
@@ -89,7 +89,7 @@ const thumb: APISchema<Switch.ThumbProps> = {
 			description: "Present when the switch is checked."
 		},
 		{
-			name: "bits-switch-thumb",
+			name: "switch-thumb",
 			description: "Present on the thumb element."
 		}
 	]
diff --git a/src/content/api-reference/tabs.ts b/src/content/api-reference/tabs.ts
index 94c417ca9..d9edf1ec9 100644
--- a/src/content/api-reference/tabs.ts
+++ b/src/content/api-reference/tabs.ts
@@ -53,7 +53,7 @@ const root: APISchema<Tabs.Props> = {
 			description: "The orientation of the tabs."
 		},
 		{
-			name: "bits-tabs-root",
+			name: "tabs-root",
 			description: "Present on the root element."
 		}
 	]
@@ -72,7 +72,7 @@ const list: APISchema<Tabs.ListProps> = {
 			description: "The orientation of the tabs."
 		},
 		{
-			name: "bits-tabs-list",
+			name: "tabs-list",
 			description: "Present on the list element."
 		}
 	]
@@ -114,7 +114,7 @@ const trigger: APISchema<Tabs.TriggerProps> = {
 			description: "Present when the tab trigger is disabled."
 		},
 		{
-			name: "bits-tabs-trigger",
+			name: "tabs-trigger",
 			description: "Present on the trigger elements."
 		}
 	]
@@ -133,7 +133,7 @@ const content: APISchema<Tabs.ContentProps> = {
 	},
 	dataAttributes: [
 		{
-			name: "bits-tabs-content",
+			name: "tabs-content",
 			description: "Present on the content elements."
 		}
 	]
diff --git a/src/content/api-reference/toggle-group.ts b/src/content/api-reference/toggle-group.ts
index fc56d679d..886be1984 100644
--- a/src/content/api-reference/toggle-group.ts
+++ b/src/content/api-reference/toggle-group.ts
@@ -54,7 +54,7 @@ const root: APISchema<ToggleGroup.Props<"multiple">> = {
 			description: "The orientation of the toggle group."
 		},
 		{
-			name: "bits-toggle-group-root",
+			name: "toggle-group-root",
 			description: "Present on the root element."
 		}
 	]
@@ -94,7 +94,7 @@ const item: APISchema<ToggleGroup.ItemProps> = {
 			description: "Present when the toggle item is disabled."
 		},
 		{
-			name: "bits-toggle-group-item",
+			name: "toggle-group-item",
 			description: "Present on the item elements."
 		}
 	]
diff --git a/src/content/api-reference/toggle.ts b/src/content/api-reference/toggle.ts
index 29473f145..f909a6840 100644
--- a/src/content/api-reference/toggle.ts
+++ b/src/content/api-reference/toggle.ts
@@ -37,7 +37,7 @@ const root: APISchema<Toggle.Props> = {
 			description: "Present when the toggle is disabled."
 		},
 		{
-			name: "bits-toggle-root",
+			name: "toggle-root",
 			description: "Present on the root element."
 		}
 	]
diff --git a/src/content/api-reference/tooltip.ts b/src/content/api-reference/tooltip.ts
index c1aee2e86..ffe23daed 100644
--- a/src/content/api-reference/tooltip.ts
+++ b/src/content/api-reference/tooltip.ts
@@ -74,7 +74,7 @@ export const trigger: APISchema<Tooltip.TriggerProps> = {
 			description: "The open state of the tooltip."
 		},
 		{
-			name: "bits-tooltip-trigger",
+			name: "tooltip-trigger",
 			description: "Present on the trigger element."
 		}
 	]
@@ -86,7 +86,7 @@ export const content: APISchema<Tooltip.ContentProps> = {
 	props: { ...transitionProps, ...floatingPositioning, asChild },
 	dataAttributes: [
 		{
-			name: "bits-tooltip-content",
+			name: "tooltip-content",
 			description: "Present on the content element."
 		}
 	]
@@ -103,7 +103,7 @@ export const arrow: APISchema<Tooltip.ArrowProps> = {
 			description: "Present on the arrow element."
 		},
 		{
-			name: "bits-tooltip-arrow",
+			name: "tooltip-arrow",
 			description: "Present on the arrow element."
 		}
 	]
diff --git a/src/lib/bits/button/components/Button.svelte b/src/lib/bits/button/components/Button.svelte
index 0b1089abf..230aa21a0 100644
--- a/src/lib/bits/button/components/Button.svelte
+++ b/src/lib/bits/button/components/Button.svelte
@@ -8,7 +8,7 @@
 	export let type: $$Props["type"] = undefined;
 	export let builders: $$Props["builders"] = [];
 	const attrs = {
-		"data-bits-button-root": ""
+		"data-button-root": ""
 	};
 </script>
 
diff --git a/src/lib/internal/attrs.ts b/src/lib/internal/attrs.ts
index 252d52678..97dc3f660 100644
--- a/src/lib/internal/attrs.ts
+++ b/src/lib/internal/attrs.ts
@@ -4,7 +4,7 @@ export function createBitAttrs<T extends readonly string[]>(bit: Bit | "menu", p
 	const attrs: Record<string, Record<string, string>> = {};
 	parts.forEach((part) => {
 		attrs[part] = {
-			[`data-bits-${bit}-${part}`]: ""
+			[`data-${bit}-${part}`]: ""
 		};
 	});
 
diff --git a/src/tests/accordion/Accordion.spec.ts b/src/tests/accordion/Accordion.spec.ts
index 9befc04e9..72f0d276f 100644
--- a/src/tests/accordion/Accordion.spec.ts
+++ b/src/tests/accordion/Accordion.spec.ts
@@ -58,11 +58,11 @@ describe("Accordion", () => {
 		const item = getByTestId("item");
 		const header = getByTestId("header");
 		const content = getByTestId("content");
-		expect(root).toHaveAttribute("data-bits-accordion-root");
-		expect(item).toHaveAttribute("data-bits-accordion-item");
-		expect(header).toHaveAttribute("data-bits-accordion-header");
-		expect(content).toHaveAttribute("data-bits-accordion-content");
-		expect(trigger).toHaveAttribute("data-bits-accordion-trigger");
+		expect(root).toHaveAttribute("data-accordion-root");
+		expect(item).toHaveAttribute("data-accordion-item");
+		expect(header).toHaveAttribute("data-accordion-header");
+		expect(content).toHaveAttribute("data-accordion-content");
+		expect(trigger).toHaveAttribute("data-accordion-trigger");
 	});
 
 	it("has expected data attributes", async () => {
@@ -119,7 +119,7 @@ describe("Accordion", () => {
 			expect(itemEl).toHaveAttribute("data-state", "open");
 		}
 		const openItems = Array.from(
-			document.querySelectorAll("[data-state='open'][data-bits-accordion-item]")
+			document.querySelectorAll("[data-state='open'][data-accordion-item]")
 		);
 		expect(openItems.length).toBe(1);
 	});
@@ -141,7 +141,7 @@ describe("Accordion", () => {
 			expect(itemEl).toHaveAttribute("data-state", "open");
 		}
 		const openItems = Array.from(
-			document.querySelectorAll("[data-state='open'][data-bits-accordion-item]")
+			document.querySelectorAll("[data-state='open'][data-accordion-item]")
 		);
 		expect(openItems.length).toBe(4);
 	});
diff --git a/src/tests/alert-dialog/AlertDialog.spec.ts b/src/tests/alert-dialog/AlertDialog.spec.ts
index 5c600e13e..ed4d1c6d0 100644
--- a/src/tests/alert-dialog/AlertDialog.spec.ts
+++ b/src/tests/alert-dialog/AlertDialog.spec.ts
@@ -56,7 +56,7 @@ describe("Alert Dialog", () => {
 
 		for (const part of parts) {
 			const el = getByTestId(part);
-			expect(el).toHaveAttribute(`data-bits-alert-dialog-${part}`);
+			expect(el).toHaveAttribute(`data-alert-dialog-${part}`);
 		}
 	});
 
diff --git a/src/tests/checkbox/Checkbox.spec.ts b/src/tests/checkbox/Checkbox.spec.ts
index 336f72575..85a6d1ad8 100644
--- a/src/tests/checkbox/Checkbox.spec.ts
+++ b/src/tests/checkbox/Checkbox.spec.ts
@@ -29,8 +29,8 @@ describe("Checkbox", () => {
 	it("has bits data attrs", async () => {
 		const { getByTestId, root } = setup();
 		const indicator = getByTestId("indicator");
-		expect(root).toHaveAttribute("data-bits-checkbox-root");
-		expect(indicator).toHaveAttribute("data-bits-checkbox-indicator");
+		expect(root).toHaveAttribute("data-checkbox-root");
+		expect(indicator).toHaveAttribute("data-checkbox-indicator");
 	});
 
 	it('defaults the value to "on", when no value prop is passed', async () => {
diff --git a/src/tests/collapsible/Collapsible.spec.ts b/src/tests/collapsible/Collapsible.spec.ts
index afa481907..a39b660d8 100644
--- a/src/tests/collapsible/Collapsible.spec.ts
+++ b/src/tests/collapsible/Collapsible.spec.ts
@@ -15,9 +15,9 @@ describe("Collapsible", () => {
 		const root = getByTestId("root");
 		const trigger = getByTestId("trigger");
 		const content = getByTestId("content");
-		expect(root).toHaveAttribute("data-bits-collapsible-root");
-		expect(trigger).toHaveAttribute("data-bits-collapsible-trigger");
-		expect(content).toHaveAttribute("data-bits-collapsible-content");
+		expect(root).toHaveAttribute("data-collapsible-root");
+		expect(trigger).toHaveAttribute("data-collapsible-trigger");
+		expect(content).toHaveAttribute("data-collapsible-content");
 	});
 
 	it("doesnt render content when `open` is false", async () => {
diff --git a/src/tests/context-menu/ContextMenu.spec.ts b/src/tests/context-menu/ContextMenu.spec.ts
index 793359145..be20f1e2f 100644
--- a/src/tests/context-menu/ContextMenu.spec.ts
+++ b/src/tests/context-menu/ContextMenu.spec.ts
@@ -76,13 +76,13 @@ describe("Context Menu", () => {
 
 		for (const part of parts) {
 			const el = screen.getByTestId(part);
-			expect(el).toHaveAttribute(`data-bits-menu-${part}`);
+			expect(el).toHaveAttribute(`data-menu-${part}`);
 		}
 
 		await user.click(getByTestId("sub-trigger"));
 
 		const subContent = getByTestId("sub-content");
-		expect(subContent).toHaveAttribute(`data-bits-menu-sub-content`);
+		expect(subContent).toHaveAttribute(`data-menu-sub-content`);
 	});
 
 	it("Opens when right-clicked & respects binding", async () => {
diff --git a/src/tests/dialog/Dialog.spec.ts b/src/tests/dialog/Dialog.spec.ts
index df3698559..f777c7def 100644
--- a/src/tests/dialog/Dialog.spec.ts
+++ b/src/tests/dialog/Dialog.spec.ts
@@ -54,7 +54,7 @@ describe("Dialog", () => {
 
 		for (const part of parts) {
 			const el = getByTestId(part);
-			expect(el).toHaveAttribute(`data-bits-dialog-${part}`);
+			expect(el).toHaveAttribute(`data-dialog-${part}`);
 		}
 	});
 
diff --git a/src/tests/dropdown-menu/DropdownMenu.spec.ts b/src/tests/dropdown-menu/DropdownMenu.spec.ts
index cd19e5107..6c8f9aa38 100644
--- a/src/tests/dropdown-menu/DropdownMenu.spec.ts
+++ b/src/tests/dropdown-menu/DropdownMenu.spec.ts
@@ -87,13 +87,13 @@ describe("Dropdown Menu", () => {
 
 		for (const part of parts) {
 			const el = screen.getByTestId(part);
-			expect(el).toHaveAttribute(`data-bits-menu-${part}`);
+			expect(el).toHaveAttribute(`data-menu-${part}`);
 		}
 
 		await user.click(getByTestId("sub-trigger"));
 
 		const subContent = getByTestId("sub-content");
-		expect(subContent).toHaveAttribute(`data-bits-menu-sub-content`);
+		expect(subContent).toHaveAttribute(`data-menu-sub-content`);
 	});
 
 	it.each(OPEN_KEYS)("Opens when %s is pressed & respects binding", async (key) => {
diff --git a/src/tests/label/Label.spec.ts b/src/tests/label/Label.spec.ts
index 5aca5c801..3d090e147 100644
--- a/src/tests/label/Label.spec.ts
+++ b/src/tests/label/Label.spec.ts
@@ -13,7 +13,7 @@ describe("Label", () => {
 	it("has bits data attrs", async () => {
 		const { getByTestId } = render(LabelTest);
 		const root = getByTestId("label");
-		expect(root).toHaveAttribute("data-bits-label-root");
+		expect(root).toHaveAttribute("data-label-root");
 	});
 
 	it("renders the label text", async () => {
diff --git a/src/tests/link-preview/LinkPreview.spec.ts b/src/tests/link-preview/LinkPreview.spec.ts
index 0a5d1bcf9..a21481313 100644
--- a/src/tests/link-preview/LinkPreview.spec.ts
+++ b/src/tests/link-preview/LinkPreview.spec.ts
@@ -34,7 +34,7 @@ describe("Link Preview", () => {
 
 		for (const part of parts) {
 			const el = getByTestId(part);
-			expect(el).toHaveAttribute(`data-bits-link-preview-${part}`);
+			expect(el).toHaveAttribute(`data-link-preview-${part}`);
 		}
 	});
 
diff --git a/src/tests/menubar/Menubar.spec.ts b/src/tests/menubar/Menubar.spec.ts
index e14e523e0..1e9097390 100644
--- a/src/tests/menubar/Menubar.spec.ts
+++ b/src/tests/menubar/Menubar.spec.ts
@@ -29,7 +29,7 @@ describe("Menubar", () => {
 		await user.click(trigger);
 
 		const root = getByTestId("root");
-		expect(root).toHaveAttribute("data-bits-menubar-root");
+		expect(root).toHaveAttribute("data-menubar-root");
 
 		const parts = [
 			"content",
@@ -48,13 +48,13 @@ describe("Menubar", () => {
 
 		for (const part in parts) {
 			const el = screen.getByTestId(mappedParts[part]);
-			expect(el).toHaveAttribute(`data-bits-menu-${parts[part]}`);
+			expect(el).toHaveAttribute(`data-menu-${parts[part]}`);
 		}
 
 		await user.click(getByTestId("1-sub-trigger"));
 
 		const subContent = getByTestId("1-sub-content");
-		expect(subContent).toHaveAttribute(`data-bits-menu-sub-content`);
+		expect(subContent).toHaveAttribute(`data-menu-sub-content`);
 	});
 
 	it("navigates triggers within the menubar using arrow keys", async () => {
diff --git a/src/tests/popover/Popover.spec.ts b/src/tests/popover/Popover.spec.ts
index 4a053b86c..e73b85b3d 100644
--- a/src/tests/popover/Popover.spec.ts
+++ b/src/tests/popover/Popover.spec.ts
@@ -40,7 +40,7 @@ describe("Popover", () => {
 
 		for (const part of parts) {
 			const el = getByTestId(part);
-			expect(el).toHaveAttribute(`data-bits-popover-${part}`);
+			expect(el).toHaveAttribute(`data-popover-${part}`);
 		}
 	});
 
diff --git a/src/tests/progress/Progress.spec.ts b/src/tests/progress/Progress.spec.ts
index a79fd87c7..8c5e2c937 100644
--- a/src/tests/progress/Progress.spec.ts
+++ b/src/tests/progress/Progress.spec.ts
@@ -21,7 +21,7 @@ describe("Progress", () => {
 
 	it("has bits data attrs", async () => {
 		const { root } = setup();
-		expect(root).toHaveAttribute("data-bits-progress-root");
+		expect(root).toHaveAttribute("data-progress-root");
 	});
 
 	it("respects the value prop", async () => {
diff --git a/src/tests/radio-group/RadioGroup.spec.ts b/src/tests/radio-group/RadioGroup.spec.ts
index 47ab06433..23939da4b 100644
--- a/src/tests/radio-group/RadioGroup.spec.ts
+++ b/src/tests/radio-group/RadioGroup.spec.ts
@@ -56,8 +56,8 @@ describe("Radio Group", () => {
 		const root = getByTestId("root");
 		const item = getByTestId(testItems[0].value + "-item");
 
-		expect(root).toHaveAttribute("data-bits-radio-group-root");
-		expect(item).toHaveAttribute("data-bits-radio-group-item");
+		expect(root).toHaveAttribute("data-radio-group-root");
+		expect(item).toHaveAttribute("data-radio-group-item");
 	});
 
 	it("changes the value when an item is clicked", async () => {
diff --git a/src/tests/select/Select.spec.ts b/src/tests/select/Select.spec.ts
index 227f28a05..34912ee40 100644
--- a/src/tests/select/Select.spec.ts
+++ b/src/tests/select/Select.spec.ts
@@ -67,11 +67,11 @@ describe("Select", () => {
 
 		parts.forEach((part) => {
 			const el = getByTestId(part);
-			expect(el).toHaveAttribute(`data-bits-select-${part}`);
+			expect(el).toHaveAttribute(`data-select-${part}`);
 		});
 
 		const item = getByTestId("1");
-		expect(item).toHaveAttribute("data-bits-select-item");
+		expect(item).toHaveAttribute("data-select-item");
 		1;
 	});
 
diff --git a/src/tests/separator/Separator.spec.ts b/src/tests/separator/Separator.spec.ts
index 57c620071..d5e1d080e 100644
--- a/src/tests/separator/Separator.spec.ts
+++ b/src/tests/separator/Separator.spec.ts
@@ -21,6 +21,6 @@ describe("Separator", () => {
 
 	it("has bits data attrs", async () => {
 		const { root } = setup();
-		expect(root).toHaveAttribute("data-bits-separator-root");
+		expect(root).toHaveAttribute("data-separator-root");
 	});
 });
diff --git a/src/tests/switch/Switch.spec.ts b/src/tests/switch/Switch.spec.ts
index 60fc676f9..fb6ebc23d 100644
--- a/src/tests/switch/Switch.spec.ts
+++ b/src/tests/switch/Switch.spec.ts
@@ -27,8 +27,8 @@ describe("Switch", () => {
 
 	it("has bits data attrs", async () => {
 		const { root, thumb } = setup();
-		expect(root).toHaveAttribute("data-bits-switch-root");
-		expect(thumb).toHaveAttribute("data-bits-switch-thumb");
+		expect(root).toHaveAttribute("data-switch-root");
+		expect(thumb).toHaveAttribute("data-switch-thumb");
 	});
 
 	it('defaults the value to "on", when no value prop is passed', async () => {
diff --git a/src/tests/tabs/Tabs.spec.ts b/src/tests/tabs/Tabs.spec.ts
index 5a6adbc4e..d375581a1 100644
--- a/src/tests/tabs/Tabs.spec.ts
+++ b/src/tests/tabs/Tabs.spec.ts
@@ -58,10 +58,10 @@ describe("Tabs", () => {
 		const trigger = getByTestId("trigger-1");
 		const content = getByTestId("content-1");
 
-		expect(root).toHaveAttribute("data-bits-tabs-root");
-		expect(list).toHaveAttribute("data-bits-tabs-list");
-		expect(trigger).toHaveAttribute("data-bits-tabs-trigger");
-		expect(content).toHaveAttribute("data-bits-tabs-content");
+		expect(root).toHaveAttribute("data-tabs-root");
+		expect(list).toHaveAttribute("data-tabs-list");
+		expect(trigger).toHaveAttribute("data-tabs-trigger");
+		expect(content).toHaveAttribute("data-tabs-content");
 	});
 
 	it("switches tabs on click", async () => {
diff --git a/src/tests/toggle-group/ToggleGroup.spec.ts b/src/tests/toggle-group/ToggleGroup.spec.ts
index cb79a0dbc..130ce34d6 100644
--- a/src/tests/toggle-group/ToggleGroup.spec.ts
+++ b/src/tests/toggle-group/ToggleGroup.spec.ts
@@ -62,8 +62,8 @@ describe("Toggle", () => {
 	it("has bits data attrs", async () => {
 		const { root, getByTestId } = setup();
 		const item = getByTestId("item-1");
-		expect(root).toHaveAttribute("data-bits-toggle-group-root");
-		expect(item).toHaveAttribute("data-bits-toggle-group-item");
+		expect(root).toHaveAttribute("data-toggle-group-root");
+		expect(item).toHaveAttribute("data-toggle-group-item");
 	});
 
 	it("toggles when clicked", async () => {
diff --git a/src/tests/toggle/Toggle.spec.ts b/src/tests/toggle/Toggle.spec.ts
index 2bae0776e..3bacf6b66 100644
--- a/src/tests/toggle/Toggle.spec.ts
+++ b/src/tests/toggle/Toggle.spec.ts
@@ -25,7 +25,7 @@ describe("Toggle", () => {
 
 	it("has bits data attrs", async () => {
 		const { root } = setup();
-		expect(root).toHaveAttribute("data-bits-toggle-root");
+		expect(root).toHaveAttribute("data-toggle-root");
 	});
 
 	it("toggles when clicked", async () => {
diff --git a/src/tests/tooltip/Tooltip.spec.ts b/src/tests/tooltip/Tooltip.spec.ts
index 613085bb6..643cab728 100644
--- a/src/tests/tooltip/Tooltip.spec.ts
+++ b/src/tests/tooltip/Tooltip.spec.ts
@@ -34,7 +34,7 @@ describe("Tooltip", () => {
 
 		for (const part of parts) {
 			const el = getByTestId(part);
-			expect(el).toHaveAttribute(`data-bits-tooltip-${part}`);
+			expect(el).toHaveAttribute(`data-tooltip-${part}`);
 		}
 	});
 

From 27f3e5ef31ea472035b247525668b425444f803d Mon Sep 17 00:00:00 2001
From: Hunter Johnston <johnstonhuntera@gmail.com>
Date: Sun, 26 Nov 2023 13:59:20 -0500
Subject: [PATCH 136/217] styles

---
 content/styling.md                            | 86 +++++++++++++++++++
 .../navigation/sidebar-nav-main-items.svelte  |  5 +-
 src/config/navigation.ts                      |  5 ++
 src/styles/markdown.postcss                   |  2 +-
 4 files changed, 95 insertions(+), 3 deletions(-)
 create mode 100644 content/styling.md

diff --git a/content/styling.md b/content/styling.md
new file mode 100644
index 000000000..f84a17407
--- /dev/null
+++ b/content/styling.md
@@ -0,0 +1,86 @@
+---
+title: Styling
+description: Learn how to style Bits UI components.
+---
+
+We ship almost zero styles with Bits UI. This is intentional, as we want to give you the most flexibility possible when it comes to styling your components.
+
+For each component that renders an HTML element, we provide a `class` prop that you can use to apply styles to the component. This is the recommended and most straightforward way to style them.
+
+## CSS frameworks
+
+If you're using a CSS framework like Tailwind or UnoCSS, you can simply pass the classes you need to the component, and they will be applies to the underlying HTML element it renders.
+
+```svelte
+<script lang="ts">
+	import { Button } from "bits-ui";
+</script>
+
+<Button.Root class="h-12 w-full bg-blue-500 hover:bg-blue-600">
+	Click me
+</Button.Root>
+```
+
+## Data attributes
+
+A data attribute is applied to each element rendered by Bits UI, which you can use to target the component across your entire application. Check out the API reference of the component to determine what those data attributes are.
+
+You can then use those data attributes like so:
+
+#### Define global styles
+
+```css title="src/app.pcss"
+[data-button-root] {
+	height: 3rem;
+	width: 100%;
+	background-color: #3182ce;
+	color: #fff;
+}
+```
+
+#### Import stylesheet
+
+```svelte title="src/routes/+layout.svelte"
+<script lang="ts">
+	import "../app.pcss";
+</script>
+
+<slot />
+```
+
+Now every `Button.Root` component will have the styles applied to it.
+
+## Global classes
+
+If you prefer the class approach, you can simply apply your global classes to the component.
+
+#### Define global styles
+
+```css title="src/app.pcss"
+.button {
+	height: 3rem;
+	width: 100%;
+	background-color: #3182ce;
+	color: #fff;
+}
+```
+
+#### Apply global styles
+
+```svelte title="src/routes/+layout.svelte"
+<script lang="ts">
+	import "../app.pcss";
+</script>
+
+<slot />
+```
+
+#### Use with components
+
+```svelte title="Button.svelte"
+<script lang="ts">
+	import { Button } from "bits-ui";
+</script>
+
+<Button.Root class="button">Click me</Button.Root>
+```
diff --git a/src/components/navigation/sidebar-nav-main-items.svelte b/src/components/navigation/sidebar-nav-main-items.svelte
index c33d11a51..d67bf03e1 100644
--- a/src/components/navigation/sidebar-nav-main-items.svelte
+++ b/src/components/navigation/sidebar-nav-main-items.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import type { SidebarNavItem } from "@/config";
-	import { RocketLaunch, BookOpen, Code } from "phosphor-svelte";
+	import { RocketLaunch, BookOpen, Code, Palette } from "phosphor-svelte";
 	import { page } from "$app/stores";
 	import { cn } from "@/utils";
 
@@ -9,7 +9,8 @@
 	const iconMap = {
 		Introduction: BookOpen,
 		"Getting Started": RocketLaunch,
-		Delegation: Code
+		Delegation: Code,
+		Styling: Palette
 	} as const;
 
 	const iconMapKeys = Object.keys(iconMap) as (keyof typeof iconMap)[];
diff --git a/src/config/navigation.ts b/src/config/navigation.ts
index 41b3a4e06..36a09d0ae 100644
--- a/src/config/navigation.ts
+++ b/src/config/navigation.ts
@@ -44,6 +44,11 @@ export const navigation: Navigation = {
 					title: "Delegation",
 					href: "/docs/delegation",
 					items: []
+				},
+				{
+					title: "Styling",
+					href: "/docs/styling",
+					items: []
 				}
 			]
 		},
diff --git a/src/styles/markdown.postcss b/src/styles/markdown.postcss
index e6b09b33b..7a29a713e 100644
--- a/src/styles/markdown.postcss
+++ b/src/styles/markdown.postcss
@@ -30,7 +30,7 @@
 	text-align: right;
 }
 
-[data-metadata] [data-code-copy] {
+[data-metadata] [data-copy-code] {
 	@apply top-16 !important;
 }
 

From a943e659f6b8710df04774d1b03a4206a45aee3e Mon Sep 17 00:00:00 2001
From: Hunter Johnston <johnstonhuntera@gmail.com>
Date: Sun, 26 Nov 2023 14:02:10 -0500
Subject: [PATCH 137/217] init date field

---
 src/lib/bits/date-field/_types.ts                   | 0
 src/lib/bits/date-field/components/DateField.svelte | 0
 src/lib/bits/date-field/ctx.ts                      | 0
 src/lib/bits/date-field/index.ts                    | 0
 src/lib/bits/date-field/types.ts                    | 0
 5 files changed, 0 insertions(+), 0 deletions(-)
 create mode 100644 src/lib/bits/date-field/_types.ts
 create mode 100644 src/lib/bits/date-field/components/DateField.svelte
 create mode 100644 src/lib/bits/date-field/ctx.ts
 create mode 100644 src/lib/bits/date-field/index.ts
 create mode 100644 src/lib/bits/date-field/types.ts

diff --git a/src/lib/bits/date-field/_types.ts b/src/lib/bits/date-field/_types.ts
new file mode 100644
index 000000000..e69de29bb
diff --git a/src/lib/bits/date-field/components/DateField.svelte b/src/lib/bits/date-field/components/DateField.svelte
new file mode 100644
index 000000000..e69de29bb
diff --git a/src/lib/bits/date-field/ctx.ts b/src/lib/bits/date-field/ctx.ts
new file mode 100644
index 000000000..e69de29bb
diff --git a/src/lib/bits/date-field/index.ts b/src/lib/bits/date-field/index.ts
new file mode 100644
index 000000000..e69de29bb
diff --git a/src/lib/bits/date-field/types.ts b/src/lib/bits/date-field/types.ts
new file mode 100644
index 000000000..e69de29bb

From f7076a48dd89c9092cbc7856f3b8a79810497acb Mon Sep 17 00:00:00 2001
From: Hunter Johnston <johnstonhuntera@gmail.com>
Date: Sun, 26 Nov 2023 14:09:42 -0500
Subject: [PATCH 138/217] remove ununsed stuff

---
 package.json                                  |   2 -
 pnpm-lock.yaml                                |  18 ----
 src/components/demos/aspect-ratio-demo.svelte |   2 +-
 src/components/icons/npm.svelte               |   2 +-
 src/components/test-menubar.svelte            |  38 +++----
 .../ui/accordion/accordion-content.svelte     |  26 -----
 .../ui/accordion/accordion-item.svelte        |  18 ----
 .../ui/accordion/accordion-trigger.svelte     |  29 -----
 src/components/ui/accordion/index.ts          |  17 ---
 .../alert-dialog/alert-dialog-action.svelte   |  20 ----
 .../alert-dialog/alert-dialog-cancel.svelte   |  21 ----
 .../alert-dialog/alert-dialog-content.svelte  |  24 -----
 .../alert-dialog-description.svelte           |  16 ---
 .../alert-dialog/alert-dialog-footer.svelte   |  19 ----
 .../alert-dialog/alert-dialog-header.svelte   |  16 ---
 .../alert-dialog/alert-dialog-overlay.svelte  |  17 ---
 .../alert-dialog/alert-dialog-portal.svelte   |   9 --
 .../ui/alert-dialog/alert-dialog-title.svelte |  18 ----
 src/components/ui/alert-dialog/index.ts       |  88 ---------------
 .../ui/alert/alert-description.svelte         |  13 ---
 src/components/ui/alert/alert-title.svelte    |  21 ----
 src/components/ui/alert/alert.svelte          |  21 ----
 src/components/ui/alert/index.ts              |  32 ------
 .../ui/aspect-ratio/aspect-ratio.svelte       |  11 --
 src/components/ui/aspect-ratio/index.ts       |   3 -
 .../ui/avatar/avatar-fallback.svelte          |  19 ----
 src/components/ui/avatar/avatar-image.svelte  |  18 ----
 src/components/ui/avatar/avatar.svelte        |  21 ----
 src/components/ui/avatar/index.ts             |  13 ---
 src/components/ui/badge/badge.svelte          |  18 ----
 src/components/ui/badge/index.ts              |  20 ----
 src/components/ui/calendar/index.ts           |   0
 src/components/ui/card/card-content.svelte    |  13 ---
 .../ui/card/card-description.svelte           |  13 ---
 src/components/ui/card/card-footer.svelte     |  13 ---
 src/components/ui/card/card-header.svelte     |  13 ---
 src/components/ui/card/card-title.svelte      |  21 ----
 src/components/ui/card/card.svelte            |  22 ----
 src/components/ui/card/index.ts               |  24 -----
 src/components/ui/checkbox/checkbox.svelte    |  35 ------
 src/components/ui/checkbox/index.ts           |   6 --
 .../ui/collapsible/collapsible-content.svelte |  12 ---
 src/components/ui/collapsible/index.ts        |  15 ---
 .../context-menu-checkbox-item.svelte         |  35 ------
 .../context-menu/context-menu-content.svelte  |  22 ----
 .../ui/context-menu/context-menu-item.svelte  |  31 ------
 .../ui/context-menu/context-menu-label.svelte |  23 ----
 .../context-menu-radio-group.svelte           |  11 --
 .../context-menu-radio-item.svelte            |  35 ------
 .../context-menu-separator.svelte             |  14 ---
 .../context-menu/context-menu-shortcut.svelte |  16 ---
 .../context-menu-sub-content.svelte           |  25 -----
 .../context-menu-sub-trigger.svelte           |  32 ------
 src/components/ui/context-menu/index.ts       |  99 -----------------
 .../ui/dialog/dialog-content.svelte           |  32 ------
 .../ui/dialog/dialog-description.svelte       |  16 ---
 src/components/ui/dialog/dialog-footer.svelte |  19 ----
 src/components/ui/dialog/dialog-header.svelte |  16 ---
 .../ui/dialog/dialog-overlay.svelte           |  17 ---
 src/components/ui/dialog/dialog-portal.svelte |   9 --
 src/components/ui/dialog/dialog-title.svelte  |  16 ---
 src/components/ui/dialog/index.ts             |  82 --------------
 .../dropdown-menu-checkbox-item.svelte        |  30 ------
 .../dropdown-menu-content.svelte              |  21 ----
 .../dropdown-menu/dropdown-menu-item.svelte   |  27 -----
 .../dropdown-menu/dropdown-menu-label.svelte  |  19 ----
 .../dropdown-menu-radio-group.svelte          |  11 --
 .../dropdown-menu-radio-item.svelte           |  35 ------
 .../dropdown-menu-separator.svelte            |  14 ---
 .../dropdown-menu-shortcut.svelte             |  16 ---
 .../dropdown-menu-sub-content.svelte          |  22 ----
 .../dropdown-menu-sub-trigger.svelte          |  26 -----
 src/components/ui/dropdown-menu/index.ts      |  98 -----------------
 .../ui/form/form-description.svelte           |  17 ---
 src/components/ui/form/form-field.svelte      |  31 ------
 src/components/ui/form/form-label.svelte      |  14 ---
 src/components/ui/form/form-message.svelte    |  18 ----
 src/components/ui/form/index.ts               |  25 -----
 .../ui/hover-card/hover-card-content.svelte   |  20 ----
 src/components/ui/hover-card/index.ts         |  64 -----------
 src/components/ui/input/index.ts              |   7 --
 src/components/ui/input/input.svelte          |  31 ------
 src/components/ui/label/index.ts              |   7 --
 src/components/ui/label/label.svelte          |  19 ----
 src/components/ui/menubar/index.ts            | 102 ------------------
 .../ui/menubar/menubar-checkbox-item.svelte   |  32 ------
 .../ui/menubar/menubar-content.svelte         |  21 ----
 src/components/ui/menubar/menubar-item.svelte |  31 ------
 .../ui/menubar/menubar-label.svelte           |  18 ----
 .../ui/menubar/menubar-radio-item.svelte      |  33 ------
 .../ui/menubar/menubar-separator.svelte       |  13 ---
 .../ui/menubar/menubar-shortcut.svelte        |  15 ---
 .../ui/menubar/menubar-sub-content.svelte     |  24 -----
 .../ui/menubar/menubar-sub-trigger.svelte     |  32 ------
 .../ui/menubar/menubar-trigger.svelte         |  23 ----
 src/components/ui/menubar/menubar.svelte      |  18 ----
 src/components/ui/popover/index.ts            |  64 -----------
 .../ui/popover/popover-content.svelte         |  20 ----
 src/components/ui/progress/index.ts           |   7 --
 src/components/ui/progress/progress.svelte    |  26 -----
 src/components/ui/radio-group/index.ts        |  15 ---
 .../ui/radio-group/radio-group-item.svelte    |  32 ------
 .../ui/radio-group/radio-group.svelte         |  18 ----
 src/components/ui/select/index.ts             |  84 ---------------
 .../ui/select/select-content.svelte           |  23 ----
 src/components/ui/select/select-item.svelte   |  38 -------
 src/components/ui/select/select-label.svelte  |  16 ---
 .../ui/select/select-separator.svelte         |  14 ---
 .../ui/select/select-trigger.svelte           |  24 -----
 src/components/ui/select/select.svelte        |  12 ---
 src/components/ui/separator/index.ts          |   7 --
 src/components/ui/separator/separator.svelte  |  22 ----
 src/components/ui/sheet/sheet-content.svelte  |   4 +-
 src/components/ui/skeleton/index.ts           |   7 --
 src/components/ui/skeleton/skeleton.svelte    |  14 ---
 src/components/ui/slider/index.ts             |   7 --
 src/components/ui/slider/slider.svelte        |  28 -----
 src/components/ui/switch/index.ts             |   7 --
 src/components/ui/switch/switch.svelte        |  28 -----
 src/components/ui/tabs/index.ts               |  18 ----
 src/components/ui/tabs/tabs-content.svelte    |  21 ----
 src/components/ui/tabs/tabs-list.svelte       |  19 ----
 src/components/ui/tabs/tabs-trigger.svelte    |  25 -----
 src/components/ui/textarea/index.ts           |   7 --
 src/components/ui/textarea/textarea.svelte    |  31 ------
 src/components/ui/toggle/index.ts             |  31 ------
 src/components/ui/toggle/toggle.svelte        |  26 -----
 src/components/ui/tooltip/index.ts            |  65 -----------
 .../ui/tooltip/tooltip-content.svelte         |  24 -----
 .../bits/calendar/components/Calendar.svelte  |   7 +-
 src/lib/bits/context-menu/_types.ts           |   1 +
 .../components/LinkPreviewContent.svelte      |   2 +-
 .../components/RangeCalendar.svelte           |   7 +-
 .../components/RangeCalendarCell.svelte       |   4 +-
 .../components/RangeCalendarHeadCell.svelte   |   4 +-
 src/lib/bits/select/_types.ts                 |   2 +-
 src/routes/docs/sink/+page.svelte             |  37 -------
 137 files changed, 35 insertions(+), 3094 deletions(-)
 delete mode 100644 src/components/ui/accordion/accordion-content.svelte
 delete mode 100644 src/components/ui/accordion/accordion-item.svelte
 delete mode 100644 src/components/ui/accordion/accordion-trigger.svelte
 delete mode 100644 src/components/ui/accordion/index.ts
 delete mode 100644 src/components/ui/alert-dialog/alert-dialog-action.svelte
 delete mode 100644 src/components/ui/alert-dialog/alert-dialog-cancel.svelte
 delete mode 100644 src/components/ui/alert-dialog/alert-dialog-content.svelte
 delete mode 100644 src/components/ui/alert-dialog/alert-dialog-description.svelte
 delete mode 100644 src/components/ui/alert-dialog/alert-dialog-footer.svelte
 delete mode 100644 src/components/ui/alert-dialog/alert-dialog-header.svelte
 delete mode 100644 src/components/ui/alert-dialog/alert-dialog-overlay.svelte
 delete mode 100644 src/components/ui/alert-dialog/alert-dialog-portal.svelte
 delete mode 100644 src/components/ui/alert-dialog/alert-dialog-title.svelte
 delete mode 100644 src/components/ui/alert-dialog/index.ts
 delete mode 100644 src/components/ui/alert/alert-description.svelte
 delete mode 100644 src/components/ui/alert/alert-title.svelte
 delete mode 100644 src/components/ui/alert/alert.svelte
 delete mode 100644 src/components/ui/alert/index.ts
 delete mode 100644 src/components/ui/aspect-ratio/aspect-ratio.svelte
 delete mode 100644 src/components/ui/aspect-ratio/index.ts
 delete mode 100644 src/components/ui/avatar/avatar-fallback.svelte
 delete mode 100644 src/components/ui/avatar/avatar-image.svelte
 delete mode 100644 src/components/ui/avatar/avatar.svelte
 delete mode 100644 src/components/ui/avatar/index.ts
 delete mode 100644 src/components/ui/badge/badge.svelte
 delete mode 100644 src/components/ui/badge/index.ts
 delete mode 100644 src/components/ui/calendar/index.ts
 delete mode 100644 src/components/ui/card/card-content.svelte
 delete mode 100644 src/components/ui/card/card-description.svelte
 delete mode 100644 src/components/ui/card/card-footer.svelte
 delete mode 100644 src/components/ui/card/card-header.svelte
 delete mode 100644 src/components/ui/card/card-title.svelte
 delete mode 100644 src/components/ui/card/card.svelte
 delete mode 100644 src/components/ui/card/index.ts
 delete mode 100644 src/components/ui/checkbox/checkbox.svelte
 delete mode 100644 src/components/ui/checkbox/index.ts
 delete mode 100644 src/components/ui/collapsible/collapsible-content.svelte
 delete mode 100644 src/components/ui/collapsible/index.ts
 delete mode 100644 src/components/ui/context-menu/context-menu-checkbox-item.svelte
 delete mode 100644 src/components/ui/context-menu/context-menu-content.svelte
 delete mode 100644 src/components/ui/context-menu/context-menu-item.svelte
 delete mode 100644 src/components/ui/context-menu/context-menu-label.svelte
 delete mode 100644 src/components/ui/context-menu/context-menu-radio-group.svelte
 delete mode 100644 src/components/ui/context-menu/context-menu-radio-item.svelte
 delete mode 100644 src/components/ui/context-menu/context-menu-separator.svelte
 delete mode 100644 src/components/ui/context-menu/context-menu-shortcut.svelte
 delete mode 100644 src/components/ui/context-menu/context-menu-sub-content.svelte
 delete mode 100644 src/components/ui/context-menu/context-menu-sub-trigger.svelte
 delete mode 100644 src/components/ui/context-menu/index.ts
 delete mode 100644 src/components/ui/dialog/dialog-content.svelte
 delete mode 100644 src/components/ui/dialog/dialog-description.svelte
 delete mode 100644 src/components/ui/dialog/dialog-footer.svelte
 delete mode 100644 src/components/ui/dialog/dialog-header.svelte
 delete mode 100644 src/components/ui/dialog/dialog-overlay.svelte
 delete mode 100644 src/components/ui/dialog/dialog-portal.svelte
 delete mode 100644 src/components/ui/dialog/dialog-title.svelte
 delete mode 100644 src/components/ui/dialog/index.ts
 delete mode 100644 src/components/ui/dropdown-menu/dropdown-menu-checkbox-item.svelte
 delete mode 100644 src/components/ui/dropdown-menu/dropdown-menu-content.svelte
 delete mode 100644 src/components/ui/dropdown-menu/dropdown-menu-item.svelte
 delete mode 100644 src/components/ui/dropdown-menu/dropdown-menu-label.svelte
 delete mode 100644 src/components/ui/dropdown-menu/dropdown-menu-radio-group.svelte
 delete mode 100644 src/components/ui/dropdown-menu/dropdown-menu-radio-item.svelte
 delete mode 100644 src/components/ui/dropdown-menu/dropdown-menu-separator.svelte
 delete mode 100644 src/components/ui/dropdown-menu/dropdown-menu-shortcut.svelte
 delete mode 100644 src/components/ui/dropdown-menu/dropdown-menu-sub-content.svelte
 delete mode 100644 src/components/ui/dropdown-menu/dropdown-menu-sub-trigger.svelte
 delete mode 100644 src/components/ui/dropdown-menu/index.ts
 delete mode 100644 src/components/ui/form/form-description.svelte
 delete mode 100644 src/components/ui/form/form-field.svelte
 delete mode 100644 src/components/ui/form/form-label.svelte
 delete mode 100644 src/components/ui/form/form-message.svelte
 delete mode 100644 src/components/ui/form/index.ts
 delete mode 100644 src/components/ui/hover-card/hover-card-content.svelte
 delete mode 100644 src/components/ui/hover-card/index.ts
 delete mode 100644 src/components/ui/input/index.ts
 delete mode 100644 src/components/ui/input/input.svelte
 delete mode 100644 src/components/ui/label/index.ts
 delete mode 100644 src/components/ui/label/label.svelte
 delete mode 100644 src/components/ui/menubar/index.ts
 delete mode 100644 src/components/ui/menubar/menubar-checkbox-item.svelte
 delete mode 100644 src/components/ui/menubar/menubar-content.svelte
 delete mode 100644 src/components/ui/menubar/menubar-item.svelte
 delete mode 100644 src/components/ui/menubar/menubar-label.svelte
 delete mode 100644 src/components/ui/menubar/menubar-radio-item.svelte
 delete mode 100644 src/components/ui/menubar/menubar-separator.svelte
 delete mode 100644 src/components/ui/menubar/menubar-shortcut.svelte
 delete mode 100644 src/components/ui/menubar/menubar-sub-content.svelte
 delete mode 100644 src/components/ui/menubar/menubar-sub-trigger.svelte
 delete mode 100644 src/components/ui/menubar/menubar-trigger.svelte
 delete mode 100644 src/components/ui/menubar/menubar.svelte
 delete mode 100644 src/components/ui/popover/index.ts
 delete mode 100644 src/components/ui/popover/popover-content.svelte
 delete mode 100644 src/components/ui/progress/index.ts
 delete mode 100644 src/components/ui/progress/progress.svelte
 delete mode 100644 src/components/ui/radio-group/index.ts
 delete mode 100644 src/components/ui/radio-group/radio-group-item.svelte
 delete mode 100644 src/components/ui/radio-group/radio-group.svelte
 delete mode 100644 src/components/ui/select/index.ts
 delete mode 100644 src/components/ui/select/select-content.svelte
 delete mode 100644 src/components/ui/select/select-item.svelte
 delete mode 100644 src/components/ui/select/select-label.svelte
 delete mode 100644 src/components/ui/select/select-separator.svelte
 delete mode 100644 src/components/ui/select/select-trigger.svelte
 delete mode 100644 src/components/ui/select/select.svelte
 delete mode 100644 src/components/ui/separator/index.ts
 delete mode 100644 src/components/ui/separator/separator.svelte
 delete mode 100644 src/components/ui/skeleton/index.ts
 delete mode 100644 src/components/ui/skeleton/skeleton.svelte
 delete mode 100644 src/components/ui/slider/index.ts
 delete mode 100644 src/components/ui/slider/slider.svelte
 delete mode 100644 src/components/ui/switch/index.ts
 delete mode 100644 src/components/ui/switch/switch.svelte
 delete mode 100644 src/components/ui/tabs/index.ts
 delete mode 100644 src/components/ui/tabs/tabs-content.svelte
 delete mode 100644 src/components/ui/tabs/tabs-list.svelte
 delete mode 100644 src/components/ui/tabs/tabs-trigger.svelte
 delete mode 100644 src/components/ui/textarea/index.ts
 delete mode 100644 src/components/ui/textarea/textarea.svelte
 delete mode 100644 src/components/ui/toggle/index.ts
 delete mode 100644 src/components/ui/toggle/toggle.svelte
 delete mode 100644 src/components/ui/tooltip/index.ts
 delete mode 100644 src/components/ui/tooltip/tooltip-content.svelte

diff --git a/package.json b/package.json
index 17864ea1d..971ea70b2 100644
--- a/package.json
+++ b/package.json
@@ -61,7 +61,6 @@
 		"hast-util-to-html": "^9.0.0",
 		"jest-axe": "^8.0.0",
 		"jsdom": "^22.1.0",
-		"lucide-svelte": "^0.292.0",
 		"mode-watcher": "^0.1.1",
 		"phosphor-svelte": "^1.3.0",
 		"postcss": "^8.4.31",
@@ -70,7 +69,6 @@
 		"prettier-plugin-svelte": "^2.10.1",
 		"prettier-plugin-tailwindcss": "0.2.7",
 		"publint": "^0.2.5",
-		"radix-icons-svelte": "^1.2.1",
 		"rehype-pretty-code": "^0.10.0",
 		"remark-gfm": "^4.0.0",
 		"resize-observer-polyfill": "^1.5.1",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index d7a1427d9..fda161529 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -100,9 +100,6 @@ devDependencies:
   jsdom:
     specifier: ^22.1.0
     version: 22.1.0
-  lucide-svelte:
-    specifier: ^0.292.0
-    version: 0.292.0(svelte@4.2.3)
   mode-watcher:
     specifier: ^0.1.1
     version: 0.1.1(svelte@4.2.3)
@@ -127,9 +124,6 @@ devDependencies:
   publint:
     specifier: ^0.2.5
     version: 0.2.5
-  radix-icons-svelte:
-    specifier: ^1.2.1
-    version: 1.2.1
   rehype-pretty-code:
     specifier: ^0.10.0
     version: 0.10.0(shiki@0.14.5)
@@ -4430,14 +4424,6 @@ packages:
       yallist: 4.0.0
     dev: true
 
-  /lucide-svelte@0.292.0(svelte@4.2.3):
-    resolution: {integrity: sha512-bnTpg9pbm6pQDc+YiLK2yxtRFk2Cc+hbzwjAPaV85k56x10CJ9LsXjon6wRrlNTSdxJR7GOsRjz0A5ZNu3Z7dg==}
-    peerDependencies:
-      svelte: '>=3 <5'
-    dependencies:
-      svelte: 4.2.3
-    dev: true
-
   /lz-string@1.5.0:
     resolution: {integrity: sha512-h5bgJWpxJNswbU7qCrV0tIKQCaS3blPDrqKWx+QxzuzL1zGUzij9XCWLrSLsJPu5t+eWA/ycetzYAO5IOMcWAQ==}
     hasBin: true
@@ -6130,10 +6116,6 @@ packages:
     engines: {node: '>=8'}
     dev: true
 
-  /radix-icons-svelte@1.2.1:
-    resolution: {integrity: sha512-svmiMd0ocpdTm9cvAz0klcZpnh639lVctj6psQiawd4pYalVzOG4cX+JizAgRckyTAsRVdzObP7D2EBrSfdghA==}
-    dev: true
-
   /react-is@17.0.2:
     resolution: {integrity: sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==}
     dev: true
diff --git a/src/components/demos/aspect-ratio-demo.svelte b/src/components/demos/aspect-ratio-demo.svelte
index 5dd40a58c..67a14b82e 100644
--- a/src/components/demos/aspect-ratio-demo.svelte
+++ b/src/components/demos/aspect-ratio-demo.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import * as AspectRatio from "@/components/ui/aspect-ratio";
+	import { AspectRatio } from "$lib";
 </script>
 
 <AspectRatio.Root ratio={16 / 9} class="scale-80 rounded-[15px] bg-transparent">
diff --git a/src/components/icons/npm.svelte b/src/components/icons/npm.svelte
index 4e074d3c9..819961d1b 100644
--- a/src/components/icons/npm.svelte
+++ b/src/components/icons/npm.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import type { IconProps } from "lucide-svelte";
+	import type { IconProps } from "./index.js";
 
 	type $$Props = IconProps;
 </script>
diff --git a/src/components/test-menubar.svelte b/src/components/test-menubar.svelte
index 2130fc08d..4099ac1df 100644
--- a/src/components/test-menubar.svelte
+++ b/src/components/test-menubar.svelte
@@ -1,5 +1,5 @@
 <script>
-	import * as Menubar from "@/components/ui/menubar";
+	import { Menubar } from "$lib";
 	let bookmarks = false;
 	let fullUrls = true;
 	const profileRadioValue = "benoit";
@@ -9,12 +9,8 @@
 	<Menubar.Menu>
 		<Menubar.Trigger>File</Menubar.Trigger>
 		<Menubar.Content>
-			<Menubar.Item>
-				New Tab <Menubar.Shortcut>⌘T</Menubar.Shortcut>
-			</Menubar.Item>
-			<Menubar.Item>
-				New Window <Menubar.Shortcut>⌘N</Menubar.Shortcut>
-			</Menubar.Item>
+			<Menubar.Item>New Tab</Menubar.Item>
+			<Menubar.Item>New Window</Menubar.Item>
 			<Menubar.Item>New Incognito Window</Menubar.Item>
 			<Menubar.Separator />
 			<Menubar.Sub>
@@ -26,20 +22,14 @@
 				</Menubar.SubContent>
 			</Menubar.Sub>
 			<Menubar.Separator />
-			<Menubar.Item>
-				Print... <Menubar.Shortcut>⌘P</Menubar.Shortcut>
-			</Menubar.Item>
+			<Menubar.Item>Print...</Menubar.Item>
 		</Menubar.Content>
 	</Menubar.Menu>
 	<Menubar.Menu>
 		<Menubar.Trigger>Edit</Menubar.Trigger>
 		<Menubar.Content>
-			<Menubar.Item>
-				Undo <Menubar.Shortcut>⌘Z</Menubar.Shortcut>
-			</Menubar.Item>
-			<Menubar.Item>
-				Redo <Menubar.Shortcut>⇧⌘Z</Menubar.Shortcut>
-			</Menubar.Item>
+			<Menubar.Item>Undo</Menubar.Item>
+			<Menubar.Item>Redo</Menubar.Item>
 			<Menubar.Separator />
 			<Menubar.Sub>
 				<Menubar.SubTrigger>Find</Menubar.SubTrigger>
@@ -67,16 +57,12 @@
 				>Always Show Full URLs</Menubar.CheckboxItem
 			>
 			<Menubar.Separator />
-			<Menubar.Item inset>
-				Reload <Menubar.Shortcut>⌘R</Menubar.Shortcut>
-			</Menubar.Item>
-			<Menubar.Item inset>
-				Force Reload <Menubar.Shortcut>⇧⌘R</Menubar.Shortcut>
-			</Menubar.Item>
+			<Menubar.Item>Reload</Menubar.Item>
+			<Menubar.Item>Force Reload</Menubar.Item>
 			<Menubar.Separator />
-			<Menubar.Item inset>Toggle Fullscreen</Menubar.Item>
+			<Menubar.Item>Toggle Fullscreen</Menubar.Item>
 			<Menubar.Separator />
-			<Menubar.Item inset>Hide Sidebar</Menubar.Item>
+			<Menubar.Item>Hide Sidebar</Menubar.Item>
 		</Menubar.Content>
 	</Menubar.Menu>
 	<Menubar.Menu>
@@ -88,9 +74,9 @@
 				<Menubar.RadioItem value="Luis">Luis</Menubar.RadioItem>
 			</Menubar.RadioGroup>
 			<Menubar.Separator />
-			<Menubar.Item inset>Edit...</Menubar.Item>
+			<Menubar.Item>Edit...</Menubar.Item>
 			<Menubar.Separator />
-			<Menubar.Item inset>Add Profile...</Menubar.Item>
+			<Menubar.Item>Add Profile...</Menubar.Item>
 		</Menubar.Content>
 	</Menubar.Menu>
 </Menubar.Root>
diff --git a/src/components/ui/accordion/accordion-content.svelte b/src/components/ui/accordion/accordion-content.svelte
deleted file mode 100644
index c2b9c52d3..000000000
--- a/src/components/ui/accordion/accordion-content.svelte
+++ /dev/null
@@ -1,26 +0,0 @@
-<script lang="ts">
-	import { Accordion as AccordionPrimitive } from "@/lib";
-	import { cn } from "@/utils";
-	import { slide } from "svelte/transition";
-
-	type $$Props = AccordionPrimitive.ContentProps;
-
-	let className: $$Props["class"] = undefined;
-	export let transition: $$Props["transition"] = slide;
-	export let transitionConfig: $$Props["transitionConfig"] = {
-		duration: 200
-	};
-
-	export { className as class };
-</script>
-
-<AccordionPrimitive.Content
-	class={cn("overflow-hidden text-sm", className)}
-	{transition}
-	{transitionConfig}
-	{...$$restProps}
->
-	<div class="pb-4 pt-0">
-		<slot />
-	</div>
-</AccordionPrimitive.Content>
diff --git a/src/components/ui/accordion/accordion-item.svelte b/src/components/ui/accordion/accordion-item.svelte
deleted file mode 100644
index 66436db0f..000000000
--- a/src/components/ui/accordion/accordion-item.svelte
+++ /dev/null
@@ -1,18 +0,0 @@
-<script lang="ts">
-	import { Accordion as AccordionPrimitive } from "@/lib";
-	import { cn } from "@/utils";
-
-	type $$Props = AccordionPrimitive.ItemProps;
-
-	let className: $$Props["class"] = undefined;
-	export { className as class };
-	export let value: $$Props["value"];
-</script>
-
-<AccordionPrimitive.Item
-	{value}
-	class={cn("border-b", className)}
-	{...$$restProps}
->
-	<slot />
-</AccordionPrimitive.Item>
diff --git a/src/components/ui/accordion/accordion-trigger.svelte b/src/components/ui/accordion/accordion-trigger.svelte
deleted file mode 100644
index 5fceb6aef..000000000
--- a/src/components/ui/accordion/accordion-trigger.svelte
+++ /dev/null
@@ -1,29 +0,0 @@
-<script lang="ts">
-	import { Accordion as AccordionPrimitive } from "@/lib";
-	import { ChevronDown } from "lucide-svelte";
-	import { cn } from "@/utils";
-
-	type $$Props = AccordionPrimitive.TriggerProps;
-	type $$Events = AccordionPrimitive.TriggerEvents;
-
-	let className: $$Props["class"] = undefined;
-	export let level: AccordionPrimitive.HeaderProps["level"] = 3;
-	export { className as class };
-</script>
-
-<AccordionPrimitive.Header {level} class="flex">
-	<AccordionPrimitive.Trigger
-		class={cn(
-			"flex flex-1 items-center justify-between py-4 text-sm font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180",
-			className
-		)}
-		{...$$restProps}
-		on:click
-		on:keydown
-	>
-		<slot />
-		<ChevronDown
-			class="h-4 w-4 shrink-0 text-muted-foreground transition-transform duration-200"
-		/>
-	</AccordionPrimitive.Trigger>
-</AccordionPrimitive.Header>
diff --git a/src/components/ui/accordion/index.ts b/src/components/ui/accordion/index.ts
deleted file mode 100644
index a4568427b..000000000
--- a/src/components/ui/accordion/index.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import { Accordion as AccordionPrimitive } from "@/lib";
-import Content from "./accordion-content.svelte";
-import Item from "./accordion-item.svelte";
-import Trigger from "./accordion-trigger.svelte";
-
-const Root = AccordionPrimitive.Root;
-export {
-	Root,
-	Content,
-	Item,
-	Trigger,
-	//
-	Root as Accordion,
-	Content as AccordionContent,
-	Item as AccordionItem,
-	Trigger as AccordionTrigger
-};
diff --git a/src/components/ui/alert-dialog/alert-dialog-action.svelte b/src/components/ui/alert-dialog/alert-dialog-action.svelte
deleted file mode 100644
index b5aecf5d5..000000000
--- a/src/components/ui/alert-dialog/alert-dialog-action.svelte
+++ /dev/null
@@ -1,20 +0,0 @@
-<script lang="ts">
-	import { AlertDialog as AlertDialogPrimitive } from "@/lib";
-	import { buttonVariants } from "@/components/ui/button";
-	import { cn } from "@/utils";
-
-	type $$Props = AlertDialogPrimitive.ActionProps;
-	type $$Events = AlertDialogPrimitive.ActionEvents;
-
-	let className: $$Props["class"] = undefined;
-	export { className as class };
-</script>
-
-<AlertDialogPrimitive.Action
-	class={cn(buttonVariants(), className)}
-	{...$$restProps}
-	on:click
-	on:keydown
->
-	<slot />
-</AlertDialogPrimitive.Action>
diff --git a/src/components/ui/alert-dialog/alert-dialog-cancel.svelte b/src/components/ui/alert-dialog/alert-dialog-cancel.svelte
deleted file mode 100644
index c2a91788c..000000000
--- a/src/components/ui/alert-dialog/alert-dialog-cancel.svelte
+++ /dev/null
@@ -1,21 +0,0 @@
-<script lang="ts">
-	import { AlertDialog as AlertDialogPrimitive } from "@/lib";
-	import { buttonVariants } from "@/components/ui/button";
-	import { cn } from "@/utils";
-
-	type $$Props = AlertDialogPrimitive.CancelProps;
-	type $$Events = AlertDialogPrimitive.CancelEvents;
-
-	let className: $$Props["class"] = undefined;
-	export { className as class };
-</script>
-
-<AlertDialogPrimitive.Cancel
-	class={cn(buttonVariants({ variant: "outline" }), "mt-2 sm:mt-0", className)}
-	{...$$restProps}
-	on:click
-	on:keydown
-	let:builder
->
-	<slot {builder} />
-</AlertDialogPrimitive.Cancel>
diff --git a/src/components/ui/alert-dialog/alert-dialog-content.svelte b/src/components/ui/alert-dialog/alert-dialog-content.svelte
deleted file mode 100644
index 29e9f6c90..000000000
--- a/src/components/ui/alert-dialog/alert-dialog-content.svelte
+++ /dev/null
@@ -1,24 +0,0 @@
-<script lang="ts">
-	import { AlertDialog as AlertDialogPrimitive } from "@/lib";
-	import * as AlertDialog from ".";
-	import { cn } from "@/utils";
-
-	type $$Props = AlertDialogPrimitive.ContentProps;
-
-	let className: $$Props["class"] = undefined;
-	export { className as class };
-</script>
-
-<AlertDialog.Portal>
-	<AlertDialog.Overlay />
-	<AlertDialogPrimitive.Content
-		transition={AlertDialog.transition}
-		class={cn(
-			"fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg sm:rounded-lg md:w-full",
-			className
-		)}
-		{...$$restProps}
-	>
-		<slot />
-	</AlertDialogPrimitive.Content>
-</AlertDialog.Portal>
diff --git a/src/components/ui/alert-dialog/alert-dialog-description.svelte b/src/components/ui/alert-dialog/alert-dialog-description.svelte
deleted file mode 100644
index d450da5cd..000000000
--- a/src/components/ui/alert-dialog/alert-dialog-description.svelte
+++ /dev/null
@@ -1,16 +0,0 @@
-<script lang="ts">
-	import { AlertDialog as AlertDialogPrimitive } from "@/lib";
-	import { cn } from "@/utils";
-
-	type $$Props = AlertDialogPrimitive.DescriptionProps;
-
-	let className: $$Props["class"] = undefined;
-	export { className as class };
-</script>
-
-<AlertDialogPrimitive.Description
-	class={cn("text-sm text-muted-foreground", className)}
-	{...$$restProps}
->
-	<slot />
-</AlertDialogPrimitive.Description>
diff --git a/src/components/ui/alert-dialog/alert-dialog-footer.svelte b/src/components/ui/alert-dialog/alert-dialog-footer.svelte
deleted file mode 100644
index 30fcce149..000000000
--- a/src/components/ui/alert-dialog/alert-dialog-footer.svelte
+++ /dev/null
@@ -1,19 +0,0 @@
-<script lang="ts">
-	import { cn } from "@/utils";
-	import type { HTMLAttributes } from "svelte/elements";
-
-	type $$Props = HTMLAttributes<HTMLDivElement>;
-
-	let className: $$Props["class"] = undefined;
-	export { className as class };
-</script>
-
-<div
-	class={cn(
-		"flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
-		className
-	)}
-	{...$$restProps}
->
-	<slot />
-</div>
diff --git a/src/components/ui/alert-dialog/alert-dialog-header.svelte b/src/components/ui/alert-dialog/alert-dialog-header.svelte
deleted file mode 100644
index 181077da7..000000000
--- a/src/components/ui/alert-dialog/alert-dialog-header.svelte
+++ /dev/null
@@ -1,16 +0,0 @@
-<script lang="ts">
-	import { cn } from "@/utils";
-	import type { HTMLAttributes } from "svelte/elements";
-
-	type $$Props = HTMLAttributes<HTMLDivElement>;
-
-	let className: $$Props["class"] = undefined;
-	export { className as class };
-</script>
-
-<div
-	class={cn("flex flex-col space-y-2 text-center sm:text-left", className)}
-	{...$$restProps}
->
-	<slot />
-</div>
diff --git a/src/components/ui/alert-dialog/alert-dialog-overlay.svelte b/src/components/ui/alert-dialog/alert-dialog-overlay.svelte
deleted file mode 100644
index 25e6e9d9a..000000000
--- a/src/components/ui/alert-dialog/alert-dialog-overlay.svelte
+++ /dev/null
@@ -1,17 +0,0 @@
-<script lang="ts">
-	import { AlertDialog as AlertDialogPrimitive } from "@/lib";
-	import { cn } from "@/utils";
-	import { fade } from "svelte/transition";
-
-	type $$Props = AlertDialogPrimitive.OverlayProps;
-
-	let className: $$Props["class"] = undefined;
-	export { className as class };
-</script>
-
-<AlertDialogPrimitive.Overlay
-	transition={fade}
-	transitionConfig={{ duration: 150 }}
-	class={cn("fixed inset-0 z-50 bg-background/80 backdrop-blur-sm ", className)}
-	{...$$restProps}
-/>
diff --git a/src/components/ui/alert-dialog/alert-dialog-portal.svelte b/src/components/ui/alert-dialog/alert-dialog-portal.svelte
deleted file mode 100644
index 68720fe7a..000000000
--- a/src/components/ui/alert-dialog/alert-dialog-portal.svelte
+++ /dev/null
@@ -1,9 +0,0 @@
-<script lang="ts">
-	import { AlertDialog as AlertDialogPrimitive } from "@/lib";
-
-	type $$Props = AlertDialogPrimitive.PortalProps;
-</script>
-
-<AlertDialogPrimitive.Portal {...$$restProps}>
-	<slot />
-</AlertDialogPrimitive.Portal>
diff --git a/src/components/ui/alert-dialog/alert-dialog-title.svelte b/src/components/ui/alert-dialog/alert-dialog-title.svelte
deleted file mode 100644
index 9334903e1..000000000
--- a/src/components/ui/alert-dialog/alert-dialog-title.svelte
+++ /dev/null
@@ -1,18 +0,0 @@
-<script lang="ts">
-	import { AlertDialog as AlertDialogPrimitive } from "@/lib";
-	import { cn } from "@/utils";
-
-	type $$Props = AlertDialogPrimitive.TitleProps;
-
-	let className: $$Props["class"] = undefined;
-	export let level: $$Props["level"] = "h3";
-	export { className as class };
-</script>
-
-<AlertDialogPrimitive.Title
-	class={cn("text-lg font-semibold", className)}
-	{level}
-	{...$$restProps}
->
-	<slot />
-</AlertDialogPrimitive.Title>
diff --git a/src/components/ui/alert-dialog/index.ts b/src/components/ui/alert-dialog/index.ts
deleted file mode 100644
index 57716eb33..000000000
--- a/src/components/ui/alert-dialog/index.ts
+++ /dev/null
@@ -1,88 +0,0 @@
-import { AlertDialog as AlertDialogPrimitive } from "@/lib";
-const Root = AlertDialogPrimitive.Root;
-const Trigger = AlertDialogPrimitive.Trigger;
-
-import Title from "./alert-dialog-title.svelte";
-import Action from "./alert-dialog-action.svelte";
-import Cancel from "./alert-dialog-cancel.svelte";
-import Portal from "./alert-dialog-portal.svelte";
-import Footer from "./alert-dialog-footer.svelte";
-import Header from "./alert-dialog-header.svelte";
-import Overlay from "./alert-dialog-overlay.svelte";
-import Content from "./alert-dialog-content.svelte";
-import Description from "./alert-dialog-description.svelte";
-
-import type { TransitionConfig } from "svelte/transition";
-import { cubicOut } from "svelte/easing";
-
-export {
-	Root,
-	Title,
-	Action,
-	Cancel,
-	Portal,
-	Footer,
-	Header,
-	Trigger,
-	Overlay,
-	Content,
-	Description,
-	//
-	Root as AlertDialog,
-	Title as AlertDialogTitle,
-	Action as AlertDialogAction,
-	Cancel as AlertDialogCancel,
-	Portal as AlertDialogPortal,
-	Footer as AlertDialogFooter,
-	Header as AlertDialogHeader,
-	Trigger as AlertDialogTrigger,
-	Overlay as AlertDialogOverlay,
-	Content as AlertDialogContent,
-	Description as AlertDialogDescription
-};
-
-type TransitionParams = {
-	y: number;
-	start: number;
-	duration?: number;
-};
-
-export const transition = (
-	node: Element,
-	params: TransitionParams = { y: -8, start: 0.95, duration: 200 }
-): TransitionConfig => {
-	const style = getComputedStyle(node);
-	const transform = style.transform === "none" ? "" : style.transform;
-
-	const scaleConversion = (valueA: number, scaleA: [number, number], scaleB: [number, number]) => {
-		const [minA, maxA] = scaleA;
-		const [minB, maxB] = scaleB;
-
-		const percentage = (valueA - minA) / (maxA - minA);
-		const valueB = percentage * (maxB - minB) + minB;
-
-		return valueB;
-	};
-
-	const styleToString = (style: Record<string, number | string | undefined>): string => {
-		return Object.keys(style).reduce((str, key) => {
-			if (style[key] === undefined) return str;
-			return str + `${key}:${style[key]};`;
-		}, "");
-	};
-
-	return {
-		duration: params.duration ?? 200,
-		delay: 0,
-		css: (t) => {
-			const y = scaleConversion(t, [0, 1], [params.y, 0]);
-			const scale = scaleConversion(t, [0, 1], [params.start, 1]);
-
-			return styleToString({
-				transform: `${transform} translate3d(0, ${y}px, 0) scale(${scale})`,
-				opacity: t
-			});
-		},
-		easing: cubicOut
-	};
-};
diff --git a/src/components/ui/alert/alert-description.svelte b/src/components/ui/alert/alert-description.svelte
deleted file mode 100644
index feaf54e8f..000000000
--- a/src/components/ui/alert/alert-description.svelte
+++ /dev/null
@@ -1,13 +0,0 @@
-<script lang="ts">
-	import { cn } from "@/utils";
-	import type { HTMLAttributes } from "svelte/elements";
-
-	type $$Props = HTMLAttributes<HTMLDivElement>;
-
-	let className: $$Props["class"] = undefined;
-	export { className as class };
-</script>
-
-<div class={cn("text-sm [&_p]:leading-relaxed", className)} {...$$restProps}>
-	<slot />
-</div>
diff --git a/src/components/ui/alert/alert-title.svelte b/src/components/ui/alert/alert-title.svelte
deleted file mode 100644
index ddb4faab3..000000000
--- a/src/components/ui/alert/alert-title.svelte
+++ /dev/null
@@ -1,21 +0,0 @@
-<script lang="ts">
-	import { cn } from "@/utils";
-	import type { HTMLAttributes } from "svelte/elements";
-	import type { HeadingLevel } from ".";
-
-	type $$Props = HTMLAttributes<HTMLHeadingElement> & {
-		level?: HeadingLevel;
-	};
-
-	let className: $$Props["class"] = undefined;
-	export let level: $$Props["level"] = "h5";
-	export { className as class };
-</script>
-
-<svelte:element
-	this={level}
-	class={cn("mb-1 font-medium leading-none tracking-tight", className)}
-	{...$$restProps}
->
-	<slot />
-</svelte:element>
diff --git a/src/components/ui/alert/alert.svelte b/src/components/ui/alert/alert.svelte
deleted file mode 100644
index abc5cf19f..000000000
--- a/src/components/ui/alert/alert.svelte
+++ /dev/null
@@ -1,21 +0,0 @@
-<script lang="ts">
-	import { cn } from "@/utils";
-	import type { HTMLAttributes } from "svelte/elements";
-	import { alertVariants, type Variant } from ".";
-
-	type $$Props = HTMLAttributes<HTMLDivElement> & {
-		variant?: Variant;
-	};
-
-	let className: $$Props["class"] = undefined;
-	export let variant: $$Props["variant"] = "default";
-	export { className as class };
-</script>
-
-<div
-	class={cn(alertVariants({ variant }), className)}
-	{...$$restProps}
-	role="alert"
->
-	<slot />
-</div>
diff --git a/src/components/ui/alert/index.ts b/src/components/ui/alert/index.ts
deleted file mode 100644
index 2ece0cdbc..000000000
--- a/src/components/ui/alert/index.ts
+++ /dev/null
@@ -1,32 +0,0 @@
-import { tv, type VariantProps } from "tailwind-variants";
-
-import Root from "./alert.svelte";
-import Description from "./alert-description.svelte";
-import Title from "./alert-title.svelte";
-
-export const alertVariants = tv({
-	base: "relative w-full rounded-lg border px-4 py-3 text-sm [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground",
-	variants: {
-		variant: {
-			default: "bg-background text-foreground",
-			destructive:
-				"border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive"
-		}
-	},
-	defaultVariants: {
-		variant: "default"
-	}
-});
-
-export type Variant = VariantProps<typeof alertVariants>["variant"];
-export type HeadingLevel = "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
-
-export {
-	Root,
-	Description,
-	Title,
-	//
-	Root as Alert,
-	Description as AlertDescription,
-	Title as AlertTitle
-};
diff --git a/src/components/ui/aspect-ratio/aspect-ratio.svelte b/src/components/ui/aspect-ratio/aspect-ratio.svelte
deleted file mode 100644
index 7cd6a4ff2..000000000
--- a/src/components/ui/aspect-ratio/aspect-ratio.svelte
+++ /dev/null
@@ -1,11 +0,0 @@
-<script lang="ts">
-	import { AspectRatio as AspectRatioPrimitive } from "@/lib";
-
-	type $$Props = AspectRatioPrimitive.Props;
-
-	export let ratio: $$Props["ratio"] = 4 / 3;
-</script>
-
-<AspectRatioPrimitive.Root {ratio} {...$$restProps}>
-	<slot />
-</AspectRatioPrimitive.Root>
diff --git a/src/components/ui/aspect-ratio/index.ts b/src/components/ui/aspect-ratio/index.ts
deleted file mode 100644
index 985c75fdb..000000000
--- a/src/components/ui/aspect-ratio/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-import Root from "./aspect-ratio.svelte";
-
-export { Root, Root as AspectRatio };
diff --git a/src/components/ui/avatar/avatar-fallback.svelte b/src/components/ui/avatar/avatar-fallback.svelte
deleted file mode 100644
index 9caaa2ba8..000000000
--- a/src/components/ui/avatar/avatar-fallback.svelte
+++ /dev/null
@@ -1,19 +0,0 @@
-<script lang="ts">
-	import { Avatar as AvatarPrimitive } from "@/lib";
-	import { cn } from "@/utils";
-
-	type $$Props = AvatarPrimitive.FallbackProps;
-
-	let className: $$Props["class"] = undefined;
-	export { className as class };
-</script>
-
-<AvatarPrimitive.Fallback
-	class={cn(
-		"flex h-full w-full items-center justify-center rounded-full bg-muted",
-		className
-	)}
-	{...$$restProps}
->
-	<slot />
-</AvatarPrimitive.Fallback>
diff --git a/src/components/ui/avatar/avatar-image.svelte b/src/components/ui/avatar/avatar-image.svelte
deleted file mode 100644
index 3dac3dd40..000000000
--- a/src/components/ui/avatar/avatar-image.svelte
+++ /dev/null
@@ -1,18 +0,0 @@
-<script lang="ts">
-	import { Avatar as AvatarPrimitive } from "@/lib";
-	import { cn } from "@/utils";
-
-	type $$Props = AvatarPrimitive.ImageProps;
-
-	let className: $$Props["class"] = undefined;
-	export let src: $$Props["src"] = undefined;
-	export let alt: $$Props["alt"] = undefined;
-	export { className as class };
-</script>
-
-<AvatarPrimitive.Image
-	{src}
-	{alt}
-	class={cn("aspect-square h-full w-full", className)}
-	{...$$restProps}
-/>
diff --git a/src/components/ui/avatar/avatar.svelte b/src/components/ui/avatar/avatar.svelte
deleted file mode 100644
index f1ca6048e..000000000
--- a/src/components/ui/avatar/avatar.svelte
+++ /dev/null
@@ -1,21 +0,0 @@
-<script lang="ts">
-	import { Avatar as AvatarPrimitive } from "@/lib";
-	import { cn } from "@/utils";
-
-	type $$Props = AvatarPrimitive.Props;
-
-	let className: $$Props["class"] = undefined;
-	export let delayMs: $$Props["delayMs"] = undefined;
-	export { className as class };
-</script>
-
-<AvatarPrimitive.Root
-	{delayMs}
-	class={cn(
-		"relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full",
-		className
-	)}
-	{...$$restProps}
->
-	<slot />
-</AvatarPrimitive.Root>
diff --git a/src/components/ui/avatar/index.ts b/src/components/ui/avatar/index.ts
deleted file mode 100644
index b08c78030..000000000
--- a/src/components/ui/avatar/index.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-import Root from "./avatar.svelte";
-import Image from "./avatar-image.svelte";
-import Fallback from "./avatar-fallback.svelte";
-
-export {
-	Root,
-	Image,
-	Fallback,
-	//
-	Root as Avatar,
-	Image as AvatarImage,
-	Fallback as AvatarFallback
-};
diff --git a/src/components/ui/badge/badge.svelte b/src/components/ui/badge/badge.svelte
deleted file mode 100644
index 4e189c346..000000000
--- a/src/components/ui/badge/badge.svelte
+++ /dev/null
@@ -1,18 +0,0 @@
-<script lang="ts">
-	import { cn } from "@/utils";
-	import { badgeVariants, type Variant } from ".";
-
-	let className: string | undefined | null = undefined;
-	export let href: string | undefined = undefined;
-	export let variant: Variant = "default";
-	export { className as class };
-</script>
-
-<svelte:element
-	this={href ? "a" : "span"}
-	{href}
-	class={cn(badgeVariants({ variant, className }))}
-	{...$$restProps}
->
-	<slot />
-</svelte:element>
diff --git a/src/components/ui/badge/index.ts b/src/components/ui/badge/index.ts
deleted file mode 100644
index a3753c09d..000000000
--- a/src/components/ui/badge/index.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-import { tv, type VariantProps } from "tailwind-variants";
-
-export { default as Badge } from "./badge.svelte";
-export const badgeVariants = tv({
-	base: "inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
-	variants: {
-		variant: {
-			default: "border-transparent bg-primary text-primary-foreground shadow hover:bg-primary/80",
-			secondary: "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
-			destructive:
-				"border-transparent bg-destructive text-destructive-foreground shadow hover:bg-destructive/80",
-			outline: "text-foreground"
-		}
-	},
-	defaultVariants: {
-		variant: "default"
-	}
-});
-
-export type Variant = VariantProps<typeof badgeVariants>["variant"];
diff --git a/src/components/ui/calendar/index.ts b/src/components/ui/calendar/index.ts
deleted file mode 100644
index e69de29bb..000000000
diff --git a/src/components/ui/card/card-content.svelte b/src/components/ui/card/card-content.svelte
deleted file mode 100644
index 5273dced2..000000000
--- a/src/components/ui/card/card-content.svelte
+++ /dev/null
@@ -1,13 +0,0 @@
-<script lang="ts">
-	import { cn } from "@/utils";
-	import type { HTMLAttributes } from "svelte/elements";
-
-	type $$Props = HTMLAttributes<HTMLDivElement>;
-
-	let className: $$Props["class"] = undefined;
-	export { className as class };
-</script>
-
-<div class={cn("p-6 pt-0", className)} {...$$restProps}>
-	<slot />
-</div>
diff --git a/src/components/ui/card/card-description.svelte b/src/components/ui/card/card-description.svelte
deleted file mode 100644
index 9a2af71b8..000000000
--- a/src/components/ui/card/card-description.svelte
+++ /dev/null
@@ -1,13 +0,0 @@
-<script lang="ts">
-	import type { HTMLAttributes } from "svelte/elements";
-	import { cn } from "@/utils";
-
-	type $$Props = HTMLAttributes<HTMLParagraphElement>;
-
-	let className: $$Props["class"] = undefined;
-	export { className as class };
-</script>
-
-<p class={cn("text-sm text-muted-foreground", className)} {...$$restProps}>
-	<slot />
-</p>
diff --git a/src/components/ui/card/card-footer.svelte b/src/components/ui/card/card-footer.svelte
deleted file mode 100644
index ef53dcd2d..000000000
--- a/src/components/ui/card/card-footer.svelte
+++ /dev/null
@@ -1,13 +0,0 @@
-<script lang="ts">
-	import type { HTMLAttributes } from "svelte/elements";
-	import { cn } from "@/utils";
-
-	type $$Props = HTMLAttributes<HTMLDivElement>;
-
-	let className: $$Props["class"] = undefined;
-	export { className as class };
-</script>
-
-<div class={cn("flex items-center p-6 pt-0", className)} {...$$restProps}>
-	<slot />
-</div>
diff --git a/src/components/ui/card/card-header.svelte b/src/components/ui/card/card-header.svelte
deleted file mode 100644
index 159c7737d..000000000
--- a/src/components/ui/card/card-header.svelte
+++ /dev/null
@@ -1,13 +0,0 @@
-<script lang="ts">
-	import type { HTMLAttributes } from "svelte/elements";
-	import { cn } from "@/utils";
-
-	type $$Props = HTMLAttributes<HTMLDivElement>;
-
-	let className: $$Props["class"] = undefined;
-	export { className as class };
-</script>
-
-<div class={cn("flex flex-col space-y-1.5 p-6", className)} {...$$restProps}>
-	<slot />
-</div>
diff --git a/src/components/ui/card/card-title.svelte b/src/components/ui/card/card-title.svelte
deleted file mode 100644
index 137ff5d60..000000000
--- a/src/components/ui/card/card-title.svelte
+++ /dev/null
@@ -1,21 +0,0 @@
-<script lang="ts">
-	import type { HTMLAttributes } from "svelte/elements";
-	import { cn } from "@/utils";
-	import type { HeadingLevel } from "../alert";
-
-	type $$Props = HTMLAttributes<HTMLHeadingElement> & {
-		level?: HeadingLevel;
-	};
-
-	let className: $$Props["class"] = undefined;
-	export let tag: $$Props["level"] = "h3";
-	export { className as class };
-</script>
-
-<svelte:element
-	this={tag}
-	class={cn("font-semibold leading-none tracking-tight", className)}
-	{...$$restProps}
->
-	<slot />
-</svelte:element>
diff --git a/src/components/ui/card/card.svelte b/src/components/ui/card/card.svelte
deleted file mode 100644
index f0c99051c..000000000
--- a/src/components/ui/card/card.svelte
+++ /dev/null
@@ -1,22 +0,0 @@
-<script lang="ts">
-	import type { HTMLAttributes } from "svelte/elements";
-	import { cn } from "@/utils";
-
-	type $$Props = HTMLAttributes<HTMLDivElement>;
-
-	let className: $$Props["class"] = undefined;
-	export { className as class };
-</script>
-
-<!-- svelte-ignore a11y-no-static-element-interactions -->
-<div
-	class={cn("bg-card text-card-foreground rounded-xl border shadow", className)}
-	{...$$restProps}
-	on:click
-	on:focusin
-	on:focusout
-	on:mouseenter
-	on:mouseleave
->
-	<slot />
-</div>
diff --git a/src/components/ui/card/index.ts b/src/components/ui/card/index.ts
deleted file mode 100644
index 14a7f721f..000000000
--- a/src/components/ui/card/index.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-import Root from "./card.svelte";
-import Content from "./card-content.svelte";
-import Description from "./card-description.svelte";
-import Footer from "./card-footer.svelte";
-import Header from "./card-header.svelte";
-import Title from "./card-title.svelte";
-
-export {
-	Root,
-	Content,
-	Description,
-	Footer,
-	Header,
-	Title,
-	//
-	Root as Card,
-	Content as CardContent,
-	Description as CardDescription,
-	Footer as CardFooter,
-	Header as CardHeader,
-	Title as CardTitle
-};
-
-export type HeadingLevel = "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
diff --git a/src/components/ui/checkbox/checkbox.svelte b/src/components/ui/checkbox/checkbox.svelte
deleted file mode 100644
index 1df5dcca9..000000000
--- a/src/components/ui/checkbox/checkbox.svelte
+++ /dev/null
@@ -1,35 +0,0 @@
-<script lang="ts">
-	import { Checkbox as CheckboxPrimitive } from "@/lib";
-	import { Check, Minus } from "radix-icons-svelte";
-	import { cn } from "@/utils";
-
-	type $$Props = CheckboxPrimitive.Props;
-	type $$Events = CheckboxPrimitive.Events;
-
-	let className: $$Props["class"] = undefined;
-	export let checked: $$Props["checked"] = false;
-	export { className as class };
-</script>
-
-<CheckboxPrimitive.Root
-	class={cn(
-		"border-primary focus-visible:ring-ring data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground peer h-4 w-4 shrink-0 rounded-sm border shadow focus-visible:outline-none focus-visible:ring-1 disabled:cursor-not-allowed disabled:opacity-50",
-		className
-	)}
-	bind:checked
-	on:click
-	on:keydown
-	{...$$restProps}
->
-	<CheckboxPrimitive.Indicator
-		class={cn("flex items-center justify-center text-current")}
-		let:isChecked
-		let:isIndeterminate
-	>
-		{#if isIndeterminate}
-			<Minus class="h-4 w-4" />
-		{:else}
-			<Check class={cn("h-4 w-4", !isChecked && "text-transparent")} />
-		{/if}
-	</CheckboxPrimitive.Indicator>
-</CheckboxPrimitive.Root>
diff --git a/src/components/ui/checkbox/index.ts b/src/components/ui/checkbox/index.ts
deleted file mode 100644
index 5fba5a4d0..000000000
--- a/src/components/ui/checkbox/index.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-import Root from "./checkbox.svelte";
-export {
-	Root,
-	//
-	Root as Checkbox
-};
diff --git a/src/components/ui/collapsible/collapsible-content.svelte b/src/components/ui/collapsible/collapsible-content.svelte
deleted file mode 100644
index 53a452ace..000000000
--- a/src/components/ui/collapsible/collapsible-content.svelte
+++ /dev/null
@@ -1,12 +0,0 @@
-<script lang="ts">
-	import { Collapsible as CollapsiblePrimitive } from "@/lib";
-	import { slide } from "svelte/transition";
-	type $$Props = CollapsiblePrimitive.ContentProps;
-
-	export let transition: $$Props["transition"] = slide;
-	export let transitionConfig: $$Props["transitionConfig"] = undefined;
-</script>
-
-<CollapsiblePrimitive.Content {transition} {transitionConfig} {...$$restProps}>
-	<slot />
-</CollapsiblePrimitive.Content>
diff --git a/src/components/ui/collapsible/index.ts b/src/components/ui/collapsible/index.ts
deleted file mode 100644
index 9599d32d2..000000000
--- a/src/components/ui/collapsible/index.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import { Collapsible as CollapsiblePrimitive } from "@/lib";
-import Content from "./collapsible-content.svelte";
-
-const Root = CollapsiblePrimitive.Root;
-const Trigger = CollapsiblePrimitive.Trigger;
-
-export {
-	Root,
-	Content,
-	Trigger,
-	//
-	Root as Collapsible,
-	Content as CollapsibleContent,
-	Trigger as CollapsibleTrigger
-};
diff --git a/src/components/ui/context-menu/context-menu-checkbox-item.svelte b/src/components/ui/context-menu/context-menu-checkbox-item.svelte
deleted file mode 100644
index 6c74d4003..000000000
--- a/src/components/ui/context-menu/context-menu-checkbox-item.svelte
+++ /dev/null
@@ -1,35 +0,0 @@
-<script lang="ts">
-	import { ContextMenu as ContextMenuPrimitive } from "@/lib";
-	import { cn } from "@/utils";
-	import { Check } from "radix-icons-svelte";
-
-	type $$Props = ContextMenuPrimitive.CheckboxItemProps;
-	type $$Events = ContextMenuPrimitive.CheckboxItemEvents;
-
-	let className: $$Props["class"] = undefined;
-	export { className as class };
-	export let checked: $$Props["checked"] = undefined;
-</script>
-
-<ContextMenuPrimitive.CheckboxItem
-	bind:checked
-	class={cn(
-		"data-[highlighted]:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[disabled]:pointer-events-none data-[highlighted]:bg-accent data-[disabled]:opacity-50",
-		className
-	)}
-	{...$$restProps}
-	on:click
-	on:keydown
-	on:focusin
-	on:focusout
-	on:pointerdown
-	on:pointerleave
-	on:pointermove
->
-	<span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
-		<ContextMenuPrimitive.CheckboxIndicator>
-			<Check class="h-4 w-4" />
-		</ContextMenuPrimitive.CheckboxIndicator>
-	</span>
-	<slot />
-</ContextMenuPrimitive.CheckboxItem>
diff --git a/src/components/ui/context-menu/context-menu-content.svelte b/src/components/ui/context-menu/context-menu-content.svelte
deleted file mode 100644
index cd0bc328c..000000000
--- a/src/components/ui/context-menu/context-menu-content.svelte
+++ /dev/null
@@ -1,22 +0,0 @@
-<script lang="ts">
-	import { ContextMenu as ContextMenuPrimitive } from "@/lib";
-	import * as ContextMenu from ".";
-	import { cn } from "@/utils";
-
-	type $$Props = ContextMenuPrimitive.ContentProps;
-
-	let className: $$Props["class"] = undefined;
-	export { className as class };
-</script>
-
-<ContextMenuPrimitive.Content
-	transition={ContextMenu.transition}
-	class={cn(
-		"bg-popover text-popover-foreground z-50 min-w-[8rem] rounded-md border p-1 shadow-md focus:outline-none",
-		className
-	)}
-	{...$$restProps}
-	on:keydown
->
-	<slot />
-</ContextMenuPrimitive.Content>
diff --git a/src/components/ui/context-menu/context-menu-item.svelte b/src/components/ui/context-menu/context-menu-item.svelte
deleted file mode 100644
index 20a061eaf..000000000
--- a/src/components/ui/context-menu/context-menu-item.svelte
+++ /dev/null
@@ -1,31 +0,0 @@
-<script lang="ts">
-	import { ContextMenu as ContextMenuPrimitive } from "@/lib";
-	import { cn } from "@/utils";
-
-	type $$Props = ContextMenuPrimitive.ItemProps & {
-		inset?: boolean;
-	};
-	type $$Events = ContextMenuPrimitive.ItemEvents;
-
-	let className: $$Props["class"] = undefined;
-	export let inset: $$Props["inset"] = undefined;
-	export { className as class };
-</script>
-
-<ContextMenuPrimitive.Item
-	class={cn(
-		"data-[highlighted]:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled]:pointer-events-none data-[highlighted]:bg-accent data-[disabled]:opacity-50",
-		inset && "pl-8",
-		className
-	)}
-	{...$$restProps}
-	on:click
-	on:keydown
-	on:focusin
-	on:focusout
-	on:pointerdown
-	on:pointerleave
-	on:pointermove
->
-	<slot />
-</ContextMenuPrimitive.Item>
diff --git a/src/components/ui/context-menu/context-menu-label.svelte b/src/components/ui/context-menu/context-menu-label.svelte
deleted file mode 100644
index 132d8a919..000000000
--- a/src/components/ui/context-menu/context-menu-label.svelte
+++ /dev/null
@@ -1,23 +0,0 @@
-<script lang="ts">
-	import { ContextMenu as ContextMenuPrimitive } from "@/lib";
-	import { cn } from "@/utils";
-
-	type $$Props = ContextMenuPrimitive.LabelProps & {
-		inset?: boolean;
-	};
-
-	let className: $$Props["class"] = undefined;
-	export let inset: $$Props["inset"] = undefined;
-	export { className as class };
-</script>
-
-<ContextMenuPrimitive.Label
-	class={cn(
-		"px-2 py-1.5 text-sm font-semibold text-foreground",
-		inset && "pl-8",
-		className
-	)}
-	{...$$restProps}
->
-	<slot />
-</ContextMenuPrimitive.Label>
diff --git a/src/components/ui/context-menu/context-menu-radio-group.svelte b/src/components/ui/context-menu/context-menu-radio-group.svelte
deleted file mode 100644
index e7c882c23..000000000
--- a/src/components/ui/context-menu/context-menu-radio-group.svelte
+++ /dev/null
@@ -1,11 +0,0 @@
-<script lang="ts">
-	import { ContextMenu as ContextMenuPrimitive } from "@/lib";
-
-	type $$Props = ContextMenuPrimitive.RadioGroupProps;
-
-	export let value: $$Props["value"] = undefined;
-</script>
-
-<ContextMenuPrimitive.RadioGroup {...$$restProps} bind:value>
-	<slot />
-</ContextMenuPrimitive.RadioGroup>
diff --git a/src/components/ui/context-menu/context-menu-radio-item.svelte b/src/components/ui/context-menu/context-menu-radio-item.svelte
deleted file mode 100644
index 1776ba301..000000000
--- a/src/components/ui/context-menu/context-menu-radio-item.svelte
+++ /dev/null
@@ -1,35 +0,0 @@
-<script lang="ts">
-	import { ContextMenu as ContextMenuPrimitive } from "@/lib";
-	import { cn } from "@/utils";
-	import { DotFilled } from "radix-icons-svelte";
-
-	type $$Props = ContextMenuPrimitive.RadioItemProps;
-	type $$Events = ContextMenuPrimitive.RadioItemEvents;
-
-	let className: $$Props["class"] = undefined;
-	export let value: $$Props["value"];
-	export { className as class };
-</script>
-
-<ContextMenuPrimitive.RadioItem
-	class={cn(
-		"data-[highlighted]:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[disabled]:pointer-events-none data-[highlighted]:bg-accent data-[disabled]:opacity-50",
-		className
-	)}
-	{value}
-	{...$$restProps}
-	on:click
-	on:keydown
-	on:focusin
-	on:focusout
-	on:pointerdown
-	on:pointerleave
-	on:pointermove
->
-	<span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
-		<ContextMenuPrimitive.RadioIndicator>
-			<DotFilled class="h-4 w-4 fill-current" />
-		</ContextMenuPrimitive.RadioIndicator>
-	</span>
-	<slot />
-</ContextMenuPrimitive.RadioItem>
diff --git a/src/components/ui/context-menu/context-menu-separator.svelte b/src/components/ui/context-menu/context-menu-separator.svelte
deleted file mode 100644
index fc6ffef0a..000000000
--- a/src/components/ui/context-menu/context-menu-separator.svelte
+++ /dev/null
@@ -1,14 +0,0 @@
-<script lang="ts">
-	import { ContextMenu as ContextMenuPrimitive } from "@/lib";
-	import { cn } from "@/utils";
-
-	type $$Props = ContextMenuPrimitive.SeparatorProps;
-
-	let className: $$Props["class"] = undefined;
-	export { className as class };
-</script>
-
-<ContextMenuPrimitive.Separator
-	class={cn("-mx-1 my-1 h-px bg-border", className)}
-	{...$$restProps}
-/>
diff --git a/src/components/ui/context-menu/context-menu-shortcut.svelte b/src/components/ui/context-menu/context-menu-shortcut.svelte
deleted file mode 100644
index f1483a1be..000000000
--- a/src/components/ui/context-menu/context-menu-shortcut.svelte
+++ /dev/null
@@ -1,16 +0,0 @@
-<script lang="ts">
-	import { cn } from "@/utils";
-	import type { HTMLAttributes } from "svelte/elements";
-
-	type $$Props = HTMLAttributes<HTMLSpanElement>;
-
-	let className: $$Props["class"] = undefined;
-	export { className as class };
-</script>
-
-<span
-	class={cn("ml-auto text-xs tracking-widest text-muted-foreground", className)}
-	{...$$restProps}
->
-	<slot />
-</span>
diff --git a/src/components/ui/context-menu/context-menu-sub-content.svelte b/src/components/ui/context-menu/context-menu-sub-content.svelte
deleted file mode 100644
index 358074ccb..000000000
--- a/src/components/ui/context-menu/context-menu-sub-content.svelte
+++ /dev/null
@@ -1,25 +0,0 @@
-<script lang="ts">
-	import { ContextMenu as ContextMenuPrimitive } from "@/lib";
-	import { cn } from "@/utils";
-	import { transition } from ".";
-
-	type $$Props = ContextMenuPrimitive.SubContentProps;
-
-	let className: $$Props["class"] = undefined;
-	export { className as class };
-</script>
-
-<ContextMenuPrimitive.SubContent
-	{transition}
-	transitionConfig={{ x: -10, y: 0 }}
-	class={cn(
-		"bg-popover text-popover-foreground z-50 min-w-[8rem] rounded-md border p-1 shadow-lg focus:outline-none",
-		className
-	)}
-	{...$$restProps}
-	on:keydown
-	on:focusout
-	on:pointermove
->
-	<slot />
-</ContextMenuPrimitive.SubContent>
diff --git a/src/components/ui/context-menu/context-menu-sub-trigger.svelte b/src/components/ui/context-menu/context-menu-sub-trigger.svelte
deleted file mode 100644
index becec3d20..000000000
--- a/src/components/ui/context-menu/context-menu-sub-trigger.svelte
+++ /dev/null
@@ -1,32 +0,0 @@
-<script lang="ts">
-	import { ContextMenu as ContextMenuPrimitive } from "@/lib";
-	import { cn } from "@/utils";
-	import { ChevronRight } from "radix-icons-svelte";
-
-	type $$Props = ContextMenuPrimitive.SubTriggerProps & {
-		inset?: boolean;
-	};
-	type $$Events = ContextMenuPrimitive.SubTriggerEvents;
-
-	let className: $$Props["class"] = undefined;
-	export let inset: $$Props["inset"] = undefined;
-	export { className as class };
-</script>
-
-<ContextMenuPrimitive.SubTrigger
-	class={cn(
-		"data-[highlighted]:text-accent-foreground data-[state=open]:text-accent-foreground flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[highlighted]:bg-accent data-[state=open]:bg-accent",
-		inset && "pl-8",
-		className
-	)}
-	{...$$restProps}
-	on:click
-	on:keydown
-	on:focusin
-	on:focusout
-	on:pointerleave
-	on:pointermove
->
-	<slot />
-	<ChevronRight class="ml-auto h-4 w-4" />
-</ContextMenuPrimitive.SubTrigger>
diff --git a/src/components/ui/context-menu/index.ts b/src/components/ui/context-menu/index.ts
deleted file mode 100644
index 7d7d495a6..000000000
--- a/src/components/ui/context-menu/index.ts
+++ /dev/null
@@ -1,99 +0,0 @@
-import { ContextMenu as ContextMenuPrimitive } from "@/lib";
-
-import Item from "./context-menu-item.svelte";
-import Label from "./context-menu-label.svelte";
-import Content from "./context-menu-content.svelte";
-import Shortcut from "./context-menu-shortcut.svelte";
-import RadioItem from "./context-menu-radio-item.svelte";
-import Separator from "./context-menu-separator.svelte";
-import RadioGroup from "./context-menu-radio-group.svelte";
-import SubContent from "./context-menu-sub-content.svelte";
-import SubTrigger from "./context-menu-sub-trigger.svelte";
-import CheckboxItem from "./context-menu-checkbox-item.svelte";
-import type { TransitionConfig } from "svelte/transition";
-import { cubicOut } from "svelte/easing";
-
-const Sub = ContextMenuPrimitive.Sub;
-const Root = ContextMenuPrimitive.Root;
-const Trigger = ContextMenuPrimitive.Trigger;
-const Group = ContextMenuPrimitive.Group;
-
-export {
-	Sub,
-	Root,
-	Item,
-	Label,
-	Group,
-	Trigger,
-	Content,
-	Shortcut,
-	Separator,
-	RadioItem,
-	SubContent,
-	SubTrigger,
-	RadioGroup,
-	CheckboxItem,
-	//
-	Root as ContextMenu,
-	Sub as ContextMenuSub,
-	Item as ContextMenuItem,
-	Label as ContextMenuLabel,
-	Group as ContextMenuGroup,
-	Content as ContextMenuContent,
-	Trigger as ContextMenuTrigger,
-	Shortcut as ContextMenuShortcut,
-	RadioItem as ContextMenuRadioItem,
-	Separator as ContextMenuSeparator,
-	RadioGroup as ContextMenuRadioGroup,
-	SubContent as ContextMenuSubContent,
-	SubTrigger as ContextMenuSubTrigger,
-	CheckboxItem as ContextMenuCheckboxItem
-};
-
-type TransitionParams = {
-	y?: number;
-	x?: number;
-	start?: number;
-	duration?: number;
-};
-
-export const transition = (
-	node: Element,
-	params: TransitionParams = { y: -8, x: 0, start: 0.95, duration: 150 }
-): TransitionConfig => {
-	const style = getComputedStyle(node);
-	const transform = style.transform === "none" ? "" : style.transform;
-
-	const scaleConversion = (valueA: number, scaleA: [number, number], scaleB: [number, number]) => {
-		const [minA, maxA] = scaleA;
-		const [minB, maxB] = scaleB;
-
-		const percentage = (valueA - minA) / (maxA - minA);
-		const valueB = percentage * (maxB - minB) + minB;
-
-		return valueB;
-	};
-
-	const styleToString = (style: Record<string, number | string | undefined>): string => {
-		return Object.keys(style).reduce((str, key) => {
-			if (style[key] === undefined) return str;
-			return str + `${key}:${style[key]};`;
-		}, "");
-	};
-
-	return {
-		duration: params.duration ?? 200,
-		delay: 0,
-		css: (t) => {
-			const y = scaleConversion(t, [0, 1], [params.y ?? 5, 0]);
-			const x = scaleConversion(t, [0, 1], [params.x ?? 0, 0]);
-			const scale = scaleConversion(t, [0, 1], [params.start ?? 0.95, 1]);
-
-			return styleToString({
-				transform: `${transform} translate3d(${x}px, ${y}px, 0) scale(${scale})`,
-				opacity: t
-			});
-		},
-		easing: cubicOut
-	};
-};
diff --git a/src/components/ui/dialog/dialog-content.svelte b/src/components/ui/dialog/dialog-content.svelte
deleted file mode 100644
index 1bb8a6e62..000000000
--- a/src/components/ui/dialog/dialog-content.svelte
+++ /dev/null
@@ -1,32 +0,0 @@
-<script lang="ts">
-	import { Dialog as DialogPrimitive } from "@/lib";
-	import { transition } from "@/components/ui/alert-dialog";
-	import * as Dialog from ".";
-	import { cn } from "@/utils";
-	import { Cross2 } from "radix-icons-svelte";
-
-	type $$Props = DialogPrimitive.ContentProps;
-
-	let className: $$Props["class"] = undefined;
-	export { className as class };
-</script>
-
-<Dialog.Portal>
-	<Dialog.Overlay />
-	<DialogPrimitive.Content
-		{transition}
-		class={cn(
-			"fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg sm:rounded-lg md:w-full",
-			className
-		)}
-		{...$$restProps}
-	>
-		<slot />
-		<DialogPrimitive.Close
-			class="focus:ring-ring absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground"
-		>
-			<Cross2 class="h-4 w-4" />
-			<span class="sr-only">Close</span>
-		</DialogPrimitive.Close>
-	</DialogPrimitive.Content>
-</Dialog.Portal>
diff --git a/src/components/ui/dialog/dialog-description.svelte b/src/components/ui/dialog/dialog-description.svelte
deleted file mode 100644
index b56a6f37d..000000000
--- a/src/components/ui/dialog/dialog-description.svelte
+++ /dev/null
@@ -1,16 +0,0 @@
-<script lang="ts">
-	import { Dialog as DialogPrimitive } from "@/lib";
-	import { cn } from "@/utils";
-
-	type $$Props = DialogPrimitive.DescriptionProps;
-
-	let className: $$Props["class"] = undefined;
-	export { className as class };
-</script>
-
-<DialogPrimitive.Description
-	class={cn("text-sm text-muted-foreground", className)}
-	{...$$restProps}
->
-	<slot />
-</DialogPrimitive.Description>
diff --git a/src/components/ui/dialog/dialog-footer.svelte b/src/components/ui/dialog/dialog-footer.svelte
deleted file mode 100644
index 30fcce149..000000000
--- a/src/components/ui/dialog/dialog-footer.svelte
+++ /dev/null
@@ -1,19 +0,0 @@
-<script lang="ts">
-	import { cn } from "@/utils";
-	import type { HTMLAttributes } from "svelte/elements";
-
-	type $$Props = HTMLAttributes<HTMLDivElement>;
-
-	let className: $$Props["class"] = undefined;
-	export { className as class };
-</script>
-
-<div
-	class={cn(
-		"flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
-		className
-	)}
-	{...$$restProps}
->
-	<slot />
-</div>
diff --git a/src/components/ui/dialog/dialog-header.svelte b/src/components/ui/dialog/dialog-header.svelte
deleted file mode 100644
index e2385f5a8..000000000
--- a/src/components/ui/dialog/dialog-header.svelte
+++ /dev/null
@@ -1,16 +0,0 @@
-<script lang="ts">
-	import { cn } from "@/utils";
-	import type { HTMLAttributes } from "svelte/elements";
-
-	type $$Props = HTMLAttributes<HTMLDivElement>;
-
-	let className: $$Props["class"] = undefined;
-	export { className as class };
-</script>
-
-<div
-	class={cn("flex flex-col space-y-1.5 text-center sm:text-left", className)}
-	{...$$restProps}
->
-	<slot />
-</div>
diff --git a/src/components/ui/dialog/dialog-overlay.svelte b/src/components/ui/dialog/dialog-overlay.svelte
deleted file mode 100644
index eaccc08f1..000000000
--- a/src/components/ui/dialog/dialog-overlay.svelte
+++ /dev/null
@@ -1,17 +0,0 @@
-<script lang="ts">
-	import { Dialog as DialogPrimitive } from "@/lib";
-	import { cn } from "@/utils";
-	import { fade } from "svelte/transition";
-
-	type $$Props = DialogPrimitive.OverlayProps;
-
-	let className: $$Props["class"] = undefined;
-	export { className as class };
-</script>
-
-<DialogPrimitive.Overlay
-	transition={fade}
-	transitionConfig={{ duration: 150 }}
-	class={cn("fixed inset-0 z-50 bg-background/80 backdrop-blur-sm", className)}
-	{...$$restProps}
-/>
diff --git a/src/components/ui/dialog/dialog-portal.svelte b/src/components/ui/dialog/dialog-portal.svelte
deleted file mode 100644
index 711104e3b..000000000
--- a/src/components/ui/dialog/dialog-portal.svelte
+++ /dev/null
@@ -1,9 +0,0 @@
-<script lang="ts">
-	import { Dialog as DialogPrimitive } from "@/lib";
-
-	type $$Props = DialogPrimitive.PortalProps;
-</script>
-
-<DialogPrimitive.Portal {...$$restProps}>
-	<slot />
-</DialogPrimitive.Portal>
diff --git a/src/components/ui/dialog/dialog-title.svelte b/src/components/ui/dialog/dialog-title.svelte
deleted file mode 100644
index 38bcb0488..000000000
--- a/src/components/ui/dialog/dialog-title.svelte
+++ /dev/null
@@ -1,16 +0,0 @@
-<script lang="ts">
-	import { Dialog as DialogPrimitive } from "@/lib";
-	import { cn } from "@/utils";
-
-	type $$Props = DialogPrimitive.TitleProps;
-
-	let className: $$Props["class"] = undefined;
-	export { className as class };
-</script>
-
-<DialogPrimitive.Title
-	class={cn("text-lg font-semibold leading-none tracking-tight", className)}
-	{...$$restProps}
->
-	<slot />
-</DialogPrimitive.Title>
diff --git a/src/components/ui/dialog/index.ts b/src/components/ui/dialog/index.ts
deleted file mode 100644
index 7d7b523ca..000000000
--- a/src/components/ui/dialog/index.ts
+++ /dev/null
@@ -1,82 +0,0 @@
-import { Dialog as DialogPrimitive } from "@/lib";
-
-const Root = DialogPrimitive.Root;
-const Trigger = DialogPrimitive.Trigger;
-
-import Title from "./dialog-title.svelte";
-import Portal from "./dialog-portal.svelte";
-import Footer from "./dialog-footer.svelte";
-import Header from "./dialog-header.svelte";
-import Overlay from "./dialog-overlay.svelte";
-import Content from "./dialog-content.svelte";
-import Description from "./dialog-description.svelte";
-import type { TransitionConfig } from "svelte/transition";
-import { cubicOut } from "svelte/easing";
-
-export {
-	Root,
-	Title,
-	Portal,
-	Footer,
-	Header,
-	Trigger,
-	Overlay,
-	Content,
-	Description,
-	//
-	Root as Dialog,
-	Title as DialogTitle,
-	Portal as DialogPortal,
-	Footer as DialogFooter,
-	Header as DialogHeader,
-	Trigger as DialogTrigger,
-	Overlay as DialogOverlay,
-	Content as DialogContent,
-	Description as DialogDescription
-};
-
-type TransitionParams = {
-	y: number;
-	start: number;
-	duration?: number;
-};
-
-export const transition = (
-	node: Element,
-	params: TransitionParams = { y: -8, start: 0.95, duration: 200 }
-): TransitionConfig => {
-	const style = getComputedStyle(node);
-	const transform = style.transform === "none" ? "" : style.transform;
-
-	const scaleConversion = (valueA: number, scaleA: [number, number], scaleB: [number, number]) => {
-		const [minA, maxA] = scaleA;
-		const [minB, maxB] = scaleB;
-
-		const percentage = (valueA - minA) / (maxA - minA);
-		const valueB = percentage * (maxB - minB) + minB;
-
-		return valueB;
-	};
-
-	const styleToString = (style: Record<string, number | string | undefined>): string => {
-		return Object.keys(style).reduce((str, key) => {
-			if (style[key] === undefined) return str;
-			return str + `${key}:${style[key]};`;
-		}, "");
-	};
-
-	return {
-		duration: params.duration ?? 200,
-		delay: 0,
-		css: (t) => {
-			const y = scaleConversion(t, [0, 1], [params.y, 0]);
-			const scale = scaleConversion(t, [0, 1], [params.start, 1]);
-
-			return styleToString({
-				transform: `${transform} translate3d(0, ${y}px, 0) scale(${scale})`,
-				opacity: t
-			});
-		},
-		easing: cubicOut
-	};
-};
diff --git a/src/components/ui/dropdown-menu/dropdown-menu-checkbox-item.svelte b/src/components/ui/dropdown-menu/dropdown-menu-checkbox-item.svelte
deleted file mode 100644
index 28d792540..000000000
--- a/src/components/ui/dropdown-menu/dropdown-menu-checkbox-item.svelte
+++ /dev/null
@@ -1,30 +0,0 @@
-<script lang="ts">
-	import { DropdownMenu as DropdownMenuPrimitive } from "@/lib";
-	import { cn } from "@/utils";
-	import { Check } from "radix-icons-svelte";
-
-	type $$Props = DropdownMenuPrimitive.CheckboxItemProps;
-	type $$Events = DropdownMenuPrimitive.CheckboxItemEvents;
-
-	let className: $$Props["class"] = undefined;
-	export let checked: $$Props["checked"] = undefined;
-	export { className as class };
-</script>
-
-<DropdownMenuPrimitive.CheckboxItem
-	bind:checked
-	class={cn(
-		"data-[highlighted]:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors data-[disabled]:pointer-events-none data-[highlighted]:bg-accent data-[disabled]:opacity-50",
-		className
-	)}
-	{...$$restProps}
-	on:click
-	on:keydown
->
-	<span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
-		<DropdownMenuPrimitive.CheckboxIndicator>
-			<Check class="h-4 w-4" />
-		</DropdownMenuPrimitive.CheckboxIndicator>
-	</span>
-	<slot />
-</DropdownMenuPrimitive.CheckboxItem>
diff --git a/src/components/ui/dropdown-menu/dropdown-menu-content.svelte b/src/components/ui/dropdown-menu/dropdown-menu-content.svelte
deleted file mode 100644
index 356a960cd..000000000
--- a/src/components/ui/dropdown-menu/dropdown-menu-content.svelte
+++ /dev/null
@@ -1,21 +0,0 @@
-<script lang="ts">
-	import { DropdownMenu as DropdownMenuPrimitive } from "@/lib";
-	import { cn } from "@/utils";
-	import { transition } from ".";
-
-	type $$Props = DropdownMenuPrimitive.ContentProps;
-
-	let className: $$Props["class"] = undefined;
-	export { className as class };
-</script>
-
-<DropdownMenuPrimitive.Content
-	{transition}
-	class={cn(
-		"bg-popover text-popover-foreground z-50 min-w-[8rem] rounded-md border p-1 shadow-md focus:outline-none",
-		className
-	)}
-	{...$$restProps}
->
-	<slot />
-</DropdownMenuPrimitive.Content>
diff --git a/src/components/ui/dropdown-menu/dropdown-menu-item.svelte b/src/components/ui/dropdown-menu/dropdown-menu-item.svelte
deleted file mode 100644
index 639338a82..000000000
--- a/src/components/ui/dropdown-menu/dropdown-menu-item.svelte
+++ /dev/null
@@ -1,27 +0,0 @@
-<script lang="ts">
-	import { DropdownMenu as DropdownMenuPrimitive } from "@/lib";
-	import { cn } from "@/utils";
-
-	type $$Props = DropdownMenuPrimitive.ItemProps & {
-		inset?: boolean;
-	};
-	type $$Events = DropdownMenuPrimitive.ItemEvents;
-
-	let className: $$Props["class"] = undefined;
-	export let inset: $$Props["inset"] = undefined;
-	export { className as class };
-</script>
-
-<DropdownMenuPrimitive.Item
-	class={cn(
-		"data-[highlighted]:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors data-[disabled]:pointer-events-none data-[highlighted]:bg-accent data-[disabled]:opacity-50",
-		inset && "pl-8",
-		className
-	)}
-	on:click
-	on:pointermove
-	on:keydown
-	{...$$restProps}
->
-	<slot />
-</DropdownMenuPrimitive.Item>
diff --git a/src/components/ui/dropdown-menu/dropdown-menu-label.svelte b/src/components/ui/dropdown-menu/dropdown-menu-label.svelte
deleted file mode 100644
index 6b5e1fc3b..000000000
--- a/src/components/ui/dropdown-menu/dropdown-menu-label.svelte
+++ /dev/null
@@ -1,19 +0,0 @@
-<script lang="ts">
-	import { DropdownMenu as DropdownMenuPrimitive } from "@/lib";
-	import { cn } from "@/utils";
-
-	type $$Props = DropdownMenuPrimitive.LabelProps & {
-		inset?: boolean;
-	};
-
-	let className: $$Props["class"] = undefined;
-	export let inset: $$Props["inset"] = undefined;
-	export { className as class };
-</script>
-
-<DropdownMenuPrimitive.Label
-	class={cn("px-2 py-1.5 text-sm font-semibold", inset && "pl-8", className)}
-	{...$$restProps}
->
-	<slot />
-</DropdownMenuPrimitive.Label>
diff --git a/src/components/ui/dropdown-menu/dropdown-menu-radio-group.svelte b/src/components/ui/dropdown-menu/dropdown-menu-radio-group.svelte
deleted file mode 100644
index a350708bb..000000000
--- a/src/components/ui/dropdown-menu/dropdown-menu-radio-group.svelte
+++ /dev/null
@@ -1,11 +0,0 @@
-<script lang="ts">
-	import { DropdownMenu as DropdownMenuPrimitive } from "@/lib";
-
-	type $$Props = DropdownMenuPrimitive.RadioGroupProps;
-
-	export let value: $$Props["value"] = undefined;
-</script>
-
-<DropdownMenuPrimitive.RadioGroup {...$$restProps} bind:value>
-	<slot />
-</DropdownMenuPrimitive.RadioGroup>
diff --git a/src/components/ui/dropdown-menu/dropdown-menu-radio-item.svelte b/src/components/ui/dropdown-menu/dropdown-menu-radio-item.svelte
deleted file mode 100644
index f6280daac..000000000
--- a/src/components/ui/dropdown-menu/dropdown-menu-radio-item.svelte
+++ /dev/null
@@ -1,35 +0,0 @@
-<script lang="ts">
-	import { DropdownMenu as DropdownMenuPrimitive } from "@/lib";
-	import { cn } from "@/utils";
-	import { DotFilled } from "radix-icons-svelte";
-
-	type $$Props = DropdownMenuPrimitive.RadioItemProps;
-	type $$Events = DropdownMenuPrimitive.RadioItemEvents;
-
-	let className: $$Props["class"] = undefined;
-	export let value: DropdownMenuPrimitive.RadioItemProps["value"];
-	export { className as class };
-</script>
-
-<DropdownMenuPrimitive.RadioItem
-	class={cn(
-		"data-[highlighted]:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors data-[disabled]:pointer-events-none data-[highlighted]:bg-accent data-[disabled]:opacity-50",
-		className
-	)}
-	{value}
-	{...$$restProps}
-	on:click
-	on:keydown
-	on:focusin
-	on:focusout
-	on:pointerdown
-	on:pointerleave
-	on:pointermove
->
-	<span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
-		<DropdownMenuPrimitive.RadioIndicator>
-			<DotFilled class="h-4 w-4 fill-current" />
-		</DropdownMenuPrimitive.RadioIndicator>
-	</span>
-	<slot />
-</DropdownMenuPrimitive.RadioItem>
diff --git a/src/components/ui/dropdown-menu/dropdown-menu-separator.svelte b/src/components/ui/dropdown-menu/dropdown-menu-separator.svelte
deleted file mode 100644
index 8aa6341cb..000000000
--- a/src/components/ui/dropdown-menu/dropdown-menu-separator.svelte
+++ /dev/null
@@ -1,14 +0,0 @@
-<script lang="ts">
-	import { DropdownMenu as DropdownMenuPrimitive } from "@/lib";
-	import { cn } from "@/utils";
-
-	type $$Props = DropdownMenuPrimitive.SeparatorProps;
-
-	let className: $$Props["class"] = undefined;
-	export { className as class };
-</script>
-
-<DropdownMenuPrimitive.Separator
-	class={cn("-mx-1 my-1 h-px bg-muted", className)}
-	{...$$restProps}
-/>
diff --git a/src/components/ui/dropdown-menu/dropdown-menu-shortcut.svelte b/src/components/ui/dropdown-menu/dropdown-menu-shortcut.svelte
deleted file mode 100644
index 49d2171b2..000000000
--- a/src/components/ui/dropdown-menu/dropdown-menu-shortcut.svelte
+++ /dev/null
@@ -1,16 +0,0 @@
-<script lang="ts">
-	import { cn } from "@/utils";
-	import type { HTMLAttributes } from "svelte/elements";
-
-	type $$Props = HTMLAttributes<HTMLSpanElement>;
-
-	let className: $$Props["class"] = undefined;
-	export { className as class };
-</script>
-
-<span
-	class={cn("ml-auto text-xs tracking-widest opacity-60", className)}
-	{...$$restProps}
->
-	<slot />
-</span>
diff --git a/src/components/ui/dropdown-menu/dropdown-menu-sub-content.svelte b/src/components/ui/dropdown-menu/dropdown-menu-sub-content.svelte
deleted file mode 100644
index bad3d3f7e..000000000
--- a/src/components/ui/dropdown-menu/dropdown-menu-sub-content.svelte
+++ /dev/null
@@ -1,22 +0,0 @@
-<script lang="ts">
-	import { DropdownMenu as DropdownMenuPrimitive } from "@/lib";
-	import { cn } from "@/utils";
-	import { transition } from ".";
-
-	type $$Props = DropdownMenuPrimitive.SubContentProps;
-
-	let className: $$Props["class"] = undefined;
-	export { className as class };
-</script>
-
-<DropdownMenuPrimitive.SubContent
-	{transition}
-	transitionConfig={{ x: -10, y: 0 }}
-	class={cn(
-		"bg-popover text-popover-foreground z-50 min-w-[8rem] rounded-md border p-1 shadow-lg focus:outline-none",
-		className
-	)}
-	{...$$restProps}
->
-	<slot />
-</DropdownMenuPrimitive.SubContent>
diff --git a/src/components/ui/dropdown-menu/dropdown-menu-sub-trigger.svelte b/src/components/ui/dropdown-menu/dropdown-menu-sub-trigger.svelte
deleted file mode 100644
index 289a914a3..000000000
--- a/src/components/ui/dropdown-menu/dropdown-menu-sub-trigger.svelte
+++ /dev/null
@@ -1,26 +0,0 @@
-<script lang="ts">
-	import { DropdownMenu as DropdownMenuPrimitive } from "@/lib";
-	import { cn } from "@/utils";
-	import { ChevronRight } from "radix-icons-svelte";
-
-	type $$Props = DropdownMenuPrimitive.SubTriggerProps & {
-		inset?: boolean;
-	};
-	type $$Events = DropdownMenuPrimitive.SubTriggerEvents;
-
-	let className: $$Props["class"] = undefined;
-	export let inset: $$Props["inset"] = undefined;
-	export { className as class };
-</script>
-
-<DropdownMenuPrimitive.SubTrigger
-	class={cn(
-		"data-[highlighted]:text-accent-foreground flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[highlighted]:bg-accent data-[state=open]:bg-accent",
-		inset && "pl-8",
-		className
-	)}
-	{...$$restProps}
->
-	<slot />
-	<ChevronRight class="ml-auto h-4 w-4" />
-</DropdownMenuPrimitive.SubTrigger>
diff --git a/src/components/ui/dropdown-menu/index.ts b/src/components/ui/dropdown-menu/index.ts
deleted file mode 100644
index 539797aec..000000000
--- a/src/components/ui/dropdown-menu/index.ts
+++ /dev/null
@@ -1,98 +0,0 @@
-import { DropdownMenu as DropdownMenuPrimitive } from "@/lib";
-import Item from "./dropdown-menu-item.svelte";
-import Label from "./dropdown-menu-label.svelte";
-import Content from "./dropdown-menu-content.svelte";
-import Shortcut from "./dropdown-menu-shortcut.svelte";
-import RadioItem from "./dropdown-menu-radio-item.svelte";
-import Separator from "./dropdown-menu-separator.svelte";
-import RadioGroup from "./dropdown-menu-radio-group.svelte";
-import SubContent from "./dropdown-menu-sub-content.svelte";
-import SubTrigger from "./dropdown-menu-sub-trigger.svelte";
-import CheckboxItem from "./dropdown-menu-checkbox-item.svelte";
-import type { TransitionConfig } from "svelte/transition";
-import { cubicOut } from "svelte/easing";
-
-const Sub = DropdownMenuPrimitive.Sub;
-const Root = DropdownMenuPrimitive.Root;
-const Trigger = DropdownMenuPrimitive.Trigger;
-const Group = DropdownMenuPrimitive.Group;
-
-export {
-	Sub,
-	Root,
-	Item,
-	Label,
-	Group,
-	Trigger,
-	Content,
-	Shortcut,
-	Separator,
-	RadioItem,
-	SubContent,
-	SubTrigger,
-	RadioGroup,
-	CheckboxItem,
-	//
-	Root as ContextMenu,
-	Sub as ContextMenuSub,
-	Item as ContextMenuItem,
-	Label as ContextMenuLabel,
-	Group as ContextMenuGroup,
-	Content as ContextMenuContent,
-	Trigger as ContextMenuTrigger,
-	Shortcut as ContextMenuShortcut,
-	RadioItem as ContextMenuRadioItem,
-	Separator as ContextMenuSeparator,
-	RadioGroup as ContextMenuRadioGroup,
-	SubContent as ContextMenuSubContent,
-	SubTrigger as ContextMenuSubTrigger,
-	CheckboxItem as ContextMenuCheckboxItem
-};
-
-type TransitionParams = {
-	y?: number;
-	x?: number;
-	start?: number;
-	duration?: number;
-};
-
-export const transition = (
-	node: Element,
-	params: TransitionParams = { y: -8, x: 0, start: 0.95, duration: 150 }
-): TransitionConfig => {
-	const style = getComputedStyle(node);
-	const transform = style.transform === "none" ? "" : style.transform;
-
-	const scaleConversion = (valueA: number, scaleA: [number, number], scaleB: [number, number]) => {
-		const [minA, maxA] = scaleA;
-		const [minB, maxB] = scaleB;
-
-		const percentage = (valueA - minA) / (maxA - minA);
-		const valueB = percentage * (maxB - minB) + minB;
-
-		return valueB;
-	};
-
-	const styleToString = (style: Record<string, number | string | undefined>): string => {
-		return Object.keys(style).reduce((str, key) => {
-			if (style[key] === undefined) return str;
-			return str + `${key}:${style[key]};`;
-		}, "");
-	};
-
-	return {
-		duration: params.duration ?? 200,
-		delay: 0,
-		css: (t) => {
-			const y = scaleConversion(t, [0, 1], [params.y ?? 5, 0]);
-			const x = scaleConversion(t, [0, 1], [params.x ?? 0, 0]);
-			const scale = scaleConversion(t, [0, 1], [params.start ?? 0.95, 1]);
-
-			return styleToString({
-				transform: `${transform} translate3d(${x}px, ${y}px, 0) scale(${scale})`,
-				opacity: t
-			});
-		},
-		easing: cubicOut
-	};
-};
diff --git a/src/components/ui/form/form-description.svelte b/src/components/ui/form/form-description.svelte
deleted file mode 100644
index 337e09914..000000000
--- a/src/components/ui/form/form-description.svelte
+++ /dev/null
@@ -1,17 +0,0 @@
-<script lang="ts">
-	import { cn } from "@/utils";
-	import { getContext } from "svelte";
-	import type { FormFieldContext } from ".";
-	let className: string | undefined | null = undefined;
-	export { className as class };
-
-	const { formDescriptionId } = getContext<FormFieldContext>("FormField");
-</script>
-
-<p
-	class={cn("text-[0.8rem] text-muted-foreground", className)}
-	{...$$restProps}
-	id={formDescriptionId}
->
-	<slot />
-</p>
diff --git a/src/components/ui/form/form-field.svelte b/src/components/ui/form/form-field.svelte
deleted file mode 100644
index 85e82bd29..000000000
--- a/src/components/ui/form/form-field.svelte
+++ /dev/null
@@ -1,31 +0,0 @@
-<script lang="ts">
-	import { cn } from "@/utils";
-	import { setContext } from "svelte";
-	import { writable } from "svelte/store";
-
-	const id = Math.random().toString(36).slice(2);
-	export let errors: string[] | undefined = undefined;
-	export let name: string;
-	const errorStore = writable<string[] | undefined>(errors);
-	let className: string | undefined | null = undefined;
-	export { className as class };
-	setContext("FormField", {
-		formItemId: id,
-		formDescriptionId: `${id}-form-item-description`,
-		formMessageId: `${id}-form-item-message`,
-		errors: errorStore,
-		name
-	});
-
-	$: errorStore.set(errors);
-
-	$: field = {
-		"aria-invalid": errors ? true : undefined,
-		name,
-		id
-	};
-</script>
-
-<div class={cn("space-y-2", className)}>
-	<slot {field} />
-</div>
diff --git a/src/components/ui/form/form-label.svelte b/src/components/ui/form/form-label.svelte
deleted file mode 100644
index a42565650..000000000
--- a/src/components/ui/form/form-label.svelte
+++ /dev/null
@@ -1,14 +0,0 @@
-<script lang="ts">
-	import { Label } from "@/components/ui/label";
-	import { cn } from "@/utils";
-	import { getContext } from "svelte";
-	import type { FormFieldContext } from ".";
-	let className: string | undefined | null = undefined;
-	export { className as class };
-
-	const { formItemId, errors } = getContext<FormFieldContext>("FormField");
-</script>
-
-<Label class={cn($errors && "text-destructive", className)} for={formItemId}>
-	<slot />
-</Label>
diff --git a/src/components/ui/form/form-message.svelte b/src/components/ui/form/form-message.svelte
deleted file mode 100644
index 99b04287e..000000000
--- a/src/components/ui/form/form-message.svelte
+++ /dev/null
@@ -1,18 +0,0 @@
-<script lang="ts">
-	import { cn } from "@/utils";
-	import { getContext } from "svelte";
-	import type { FormFieldContext } from ".";
-	let className: string | undefined | null = undefined;
-	export { className as class };
-
-	const { formMessageId, errors } = getContext<FormFieldContext>("FormField");
-</script>
-
-{#if $errors}
-	<p
-		class={cn("text-destructive text-[0.8rem] font-medium", className)}
-		id={formMessageId}
-	>
-		{$errors}
-	</p>
-{/if}
diff --git a/src/components/ui/form/index.ts b/src/components/ui/form/index.ts
deleted file mode 100644
index 580214426..000000000
--- a/src/components/ui/form/index.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-import type { Writable } from "svelte/store";
-import Description from "./form-description.svelte";
-import Field from "./form-field.svelte";
-import Label from "./form-label.svelte";
-import Message from "./form-message.svelte";
-
-export type FormFieldContext = {
-	name: string;
-	formItemId: string;
-	formDescriptionId: string;
-	formMessageId: string;
-	errors: Writable<string[] | undefined>;
-};
-
-export {
-	Field,
-	Description,
-	Label,
-	Message,
-	//
-	Field as FormField,
-	Description as FormDescription,
-	Label as FormLabel,
-	Message as FormMessage
-};
diff --git a/src/components/ui/hover-card/hover-card-content.svelte b/src/components/ui/hover-card/hover-card-content.svelte
deleted file mode 100644
index a3541ebe3..000000000
--- a/src/components/ui/hover-card/hover-card-content.svelte
+++ /dev/null
@@ -1,20 +0,0 @@
-<script lang="ts">
-	import { LinkPreview as HoverCardPrimitive } from "@/lib";
-	import { cn } from "@/utils";
-	import { transition } from ".";
-	type $$Props = HoverCardPrimitive.ContentProps;
-
-	let className: $$Props["class"] = undefined;
-	export { className as class };
-</script>
-
-<HoverCardPrimitive.Content
-	{transition}
-	class={cn(
-		"bg-popover text-popover-foreground z-50 w-64 rounded-md border p-4 shadow-md outline-none ",
-		className
-	)}
-	{...$$restProps}
->
-	<slot />
-</HoverCardPrimitive.Content>
diff --git a/src/components/ui/hover-card/index.ts b/src/components/ui/hover-card/index.ts
deleted file mode 100644
index d03081bab..000000000
--- a/src/components/ui/hover-card/index.ts
+++ /dev/null
@@ -1,64 +0,0 @@
-import { LinkPreview as HoverCardPrimitive } from "@/lib";
-
-import Content from "./hover-card-content.svelte";
-import type { TransitionConfig } from "svelte/transition";
-import { cubicOut } from "svelte/easing";
-const Root = HoverCardPrimitive.Root;
-const Trigger = HoverCardPrimitive.Trigger;
-
-export {
-	Root,
-	Content,
-	Trigger,
-	Root as HoverCard,
-	Content as HoverCardContent,
-	Trigger as HoverCardTrigger
-};
-
-type TransitionParams = {
-	y?: number;
-	x?: number;
-	start?: number;
-	duration?: number;
-};
-
-export const transition = (
-	node: Element,
-	params: TransitionParams = { y: -8, x: 0, start: 0.95, duration: 150 }
-): TransitionConfig => {
-	const style = getComputedStyle(node);
-	const transform = style.transform === "none" ? "" : style.transform;
-
-	const scaleConversion = (valueA: number, scaleA: [number, number], scaleB: [number, number]) => {
-		const [minA, maxA] = scaleA;
-		const [minB, maxB] = scaleB;
-
-		const percentage = (valueA - minA) / (maxA - minA);
-		const valueB = percentage * (maxB - minB) + minB;
-
-		return valueB;
-	};
-
-	const styleToString = (style: Record<string, number | string | undefined>): string => {
-		return Object.keys(style).reduce((str, key) => {
-			if (style[key] === undefined) return str;
-			return str + `${key}:${style[key]};`;
-		}, "");
-	};
-
-	return {
-		duration: params.duration ?? 200,
-		delay: 0,
-		css: (t) => {
-			const y = scaleConversion(t, [0, 1], [params.y ?? 5, 0]);
-			const x = scaleConversion(t, [0, 1], [params.x ?? 0, 0]);
-			const scale = scaleConversion(t, [0, 1], [params.start ?? 0.95, 1]);
-
-			return styleToString({
-				transform: `${transform} translate3d(${x}px, ${y}px, 0) scale(${scale})`,
-				opacity: t
-			});
-		},
-		easing: cubicOut
-	};
-};
diff --git a/src/components/ui/input/index.ts b/src/components/ui/input/index.ts
deleted file mode 100644
index c9ffe2824..000000000
--- a/src/components/ui/input/index.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import Root from "./input.svelte";
-
-export {
-	Root,
-	//
-	Root as Input
-};
diff --git a/src/components/ui/input/input.svelte b/src/components/ui/input/input.svelte
deleted file mode 100644
index d5f1a6ba0..000000000
--- a/src/components/ui/input/input.svelte
+++ /dev/null
@@ -1,31 +0,0 @@
-<script lang="ts">
-	import type { HTMLInputAttributes } from "svelte/elements";
-	import { cn } from "@/utils";
-
-	type $$Props = HTMLInputAttributes;
-
-	let className: $$Props["class"] = undefined;
-	export let value: $$Props["value"] = undefined;
-	export { className as class };
-</script>
-
-<input
-	class={cn(
-		"border-input focus-visible:ring-ring flex h-9 w-full rounded-md border bg-background px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 disabled:cursor-not-allowed disabled:opacity-50",
-		className
-	)}
-	bind:value
-	on:blur
-	on:change
-	on:click
-	on:focus
-	on:keydown
-	on:keypress
-	on:keyup
-	on:mouseover
-	on:mouseenter
-	on:mouseleave
-	on:paste
-	on:input
-	{...$$restProps}
-/>
diff --git a/src/components/ui/label/index.ts b/src/components/ui/label/index.ts
deleted file mode 100644
index 2c3128ce4..000000000
--- a/src/components/ui/label/index.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import Root from "./label.svelte";
-
-export {
-	Root,
-	//
-	Root as Label
-};
diff --git a/src/components/ui/label/label.svelte b/src/components/ui/label/label.svelte
deleted file mode 100644
index edf12a859..000000000
--- a/src/components/ui/label/label.svelte
+++ /dev/null
@@ -1,19 +0,0 @@
-<script lang="ts">
-	import { Label as LabelPrimitive } from "@/lib";
-	import { cn } from "@/utils";
-
-	type $$Props = LabelPrimitive.Props;
-
-	let className: $$Props["class"] = undefined;
-	export { className as class };
-</script>
-
-<LabelPrimitive.Root
-	class={cn(
-		"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
-		className
-	)}
-	{...$$restProps}
->
-	<slot />
-</LabelPrimitive.Root>
diff --git a/src/components/ui/menubar/index.ts b/src/components/ui/menubar/index.ts
deleted file mode 100644
index 87a5219c4..000000000
--- a/src/components/ui/menubar/index.ts
+++ /dev/null
@@ -1,102 +0,0 @@
-import { Menubar as MenubarPrimitive } from "@/lib";
-
-import Root from "./menubar.svelte";
-import CheckboxItem from "./menubar-checkbox-item.svelte";
-import Content from "./menubar-content.svelte";
-import Item from "./menubar-item.svelte";
-import Label from "./menubar-label.svelte";
-import RadioItem from "./menubar-radio-item.svelte";
-import Separator from "./menubar-separator.svelte";
-import Shortcut from "./menubar-shortcut.svelte";
-import SubContent from "./menubar-sub-content.svelte";
-import SubTrigger from "./menubar-sub-trigger.svelte";
-import Trigger from "./menubar-trigger.svelte";
-import type { TransitionConfig } from "svelte/transition";
-import { cubicOut } from "svelte/easing";
-
-const Menu = MenubarPrimitive.Menu;
-const Group = MenubarPrimitive.Group;
-const Sub = MenubarPrimitive.Sub;
-const RadioGroup = MenubarPrimitive.RadioGroup;
-
-export {
-	Root,
-	CheckboxItem,
-	Content,
-	Item,
-	Label,
-	RadioItem,
-	Separator,
-	Shortcut,
-	SubContent,
-	SubTrigger,
-	Trigger,
-	Menu,
-	Group,
-	Sub,
-	RadioGroup,
-	//
-	Root as Menubar,
-	CheckboxItem as MenubarCheckboxItem,
-	Content as MenubarContent,
-	Item as MenubarItem,
-	Label as MenubarLabel,
-	RadioItem as MenubarRadioItem,
-	Separator as MenubarSeparator,
-	Shortcut as MenubarShortcut,
-	SubContent as MenubarSubContent,
-	SubTrigger as MenubarSubTrigger,
-	Trigger as MenubarTrigger,
-	Menu as MenubarMenu,
-	Group as MenubarGroup,
-	Sub as MenubarSub,
-	RadioGroup as MenubarRadioGroup
-};
-
-type TransitionParams = {
-	y?: number;
-	x?: number;
-	start?: number;
-	duration?: number;
-};
-
-export const transition = (
-	node: Element,
-	params: TransitionParams = { y: 5, x: 0, start: 0.95, duration: 200 }
-): TransitionConfig => {
-	const style = getComputedStyle(node);
-	const transform = style.transform === "none" ? "" : style.transform;
-
-	const scaleConversion = (valueA: number, scaleA: [number, number], scaleB: [number, number]) => {
-		const [minA, maxA] = scaleA;
-		const [minB, maxB] = scaleB;
-
-		const percentage = (valueA - minA) / (maxA - minA);
-		const valueB = percentage * (maxB - minB) + minB;
-
-		return valueB;
-	};
-
-	const styleToString = (style: Record<string, number | string | undefined>): string => {
-		return Object.keys(style).reduce((str, key) => {
-			if (style[key] === undefined) return str;
-			return str + `${key}:${style[key]};`;
-		}, "");
-	};
-
-	return {
-		duration: params.duration ?? 200,
-		delay: 0,
-		css: (t) => {
-			const y = scaleConversion(t, [0, 1], [params.y ?? 5, 0]);
-			const x = scaleConversion(t, [0, 1], [params.x ?? 0, 0]);
-			const scale = scaleConversion(t, [0, 1], [params.start ?? 0.95, 1]);
-
-			return styleToString({
-				transform: `${transform} translate3d(${x}px, ${y}px, 0) scale(${scale})`,
-				opacity: t
-			});
-		},
-		easing: cubicOut
-	};
-};
diff --git a/src/components/ui/menubar/menubar-checkbox-item.svelte b/src/components/ui/menubar/menubar-checkbox-item.svelte
deleted file mode 100644
index d7685c28f..000000000
--- a/src/components/ui/menubar/menubar-checkbox-item.svelte
+++ /dev/null
@@ -1,32 +0,0 @@
-<script lang="ts">
-	import { Menubar as MenubarPrimitive } from "@/lib";
-	import { cn } from "@/utils";
-	import { Check } from "radix-icons-svelte";
-
-	type $$Props = MenubarPrimitive.CheckboxItemProps;
-	let className: $$Props["class"] = undefined;
-	export { className as class };
-	export let checked: $$Props["checked"] = undefined;
-</script>
-
-<MenubarPrimitive.CheckboxItem
-	bind:checked
-	class={cn(
-		"data-[highlighted]:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[disabled]:pointer-events-none data-[highlighted]:bg-accent data-[disabled]:opacity-50",
-		className
-	)}
-	{...$$restProps}
-	on:focusin
-	on:focusout
-	on:keydown
-	on:pointerdown
-	on:pointerleave
-	on:pointermove
->
-	<span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
-		<MenubarPrimitive.CheckboxIndicator>
-			<Check class="h-4 w-4" />
-		</MenubarPrimitive.CheckboxIndicator>
-	</span>
-	<slot />
-</MenubarPrimitive.CheckboxItem>
diff --git a/src/components/ui/menubar/menubar-content.svelte b/src/components/ui/menubar/menubar-content.svelte
deleted file mode 100644
index 612c33e90..000000000
--- a/src/components/ui/menubar/menubar-content.svelte
+++ /dev/null
@@ -1,21 +0,0 @@
-<script lang="ts">
-	import { Menubar as MenubarPrimitive } from "@/lib";
-	import { cn } from "@/utils";
-	import { transition } from ".";
-	type $$Props = MenubarPrimitive.ContentProps;
-	let className: $$Props["class"] = undefined;
-	export { className as class };
-	export let sideOffset = 4;
-</script>
-
-<MenubarPrimitive.Content
-	{transition}
-	{sideOffset}
-	class={cn(
-		"bg-popover text-popover-foreground z-50 min-w-[12rem] rounded-md border p-1 shadow-md focus:outline-none",
-		className
-	)}
-	{...$$restProps}
->
-	<slot />
-</MenubarPrimitive.Content>
diff --git a/src/components/ui/menubar/menubar-item.svelte b/src/components/ui/menubar/menubar-item.svelte
deleted file mode 100644
index c9f914a21..000000000
--- a/src/components/ui/menubar/menubar-item.svelte
+++ /dev/null
@@ -1,31 +0,0 @@
-<script lang="ts">
-	import { Menubar as MenubarPrimitive } from "@/lib";
-	import { cn } from "@/utils";
-
-	type $$Props = MenubarPrimitive.ItemProps & {
-		inset?: boolean;
-	};
-	type $$Events = MenubarPrimitive.ItemEvents;
-
-	let className: $$Props["class"] = undefined;
-	export let inset: $$Props["inset"] = undefined;
-	export { className as class };
-</script>
-
-<MenubarPrimitive.Item
-	class={cn(
-		"data-[highlighted]:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled]:pointer-events-none data-[highlighted]:bg-accent data-[disabled]:opacity-50",
-		inset && "pl-8",
-		className
-	)}
-	{...$$restProps}
-	on:click
-	on:focusin
-	on:focusout
-	on:keydown
-	on:pointerdown
-	on:pointerleave
-	on:pointermove
->
-	<slot />
-</MenubarPrimitive.Item>
diff --git a/src/components/ui/menubar/menubar-label.svelte b/src/components/ui/menubar/menubar-label.svelte
deleted file mode 100644
index baed84cad..000000000
--- a/src/components/ui/menubar/menubar-label.svelte
+++ /dev/null
@@ -1,18 +0,0 @@
-<script lang="ts">
-	import { Menubar as MenubarPrimitive } from "@/lib";
-	import { cn } from "@/utils";
-
-	type $$Props = MenubarPrimitive.LabelProps & {
-		inset?: boolean;
-	};
-	let className: $$Props["class"] = undefined;
-	export let inset: $$Props["inset"] = undefined;
-	export { className as class };
-</script>
-
-<MenubarPrimitive.Label
-	class={cn("px-2 py-1.5 text-sm font-semibold", inset && "pl-8", className)}
-	{...$$restProps}
->
-	<slot />
-</MenubarPrimitive.Label>
diff --git a/src/components/ui/menubar/menubar-radio-item.svelte b/src/components/ui/menubar/menubar-radio-item.svelte
deleted file mode 100644
index 07d87ac61..000000000
--- a/src/components/ui/menubar/menubar-radio-item.svelte
+++ /dev/null
@@ -1,33 +0,0 @@
-<script lang="ts">
-	import { Menubar as MenubarPrimitive } from "@/lib";
-	import { cn } from "@/utils";
-	import { DotFilled } from "radix-icons-svelte";
-
-	type $$Props = MenubarPrimitive.RadioItemProps;
-	type $$Events = MenubarPrimitive.RadioItemEvents;
-	let className: $$Props["class"] = undefined;
-	export let value: $$Props["value"];
-	export { className as class };
-</script>
-
-<MenubarPrimitive.RadioItem
-	{value}
-	class={cn(
-		"data-[highlighted]:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[disabled]:pointer-events-none data-[highlighted]:bg-accent data-[disabled]:opacity-50",
-		className
-	)}
-	{...$$restProps}
-	on:focusin
-	on:focusout
-	on:keydown
-	on:pointerdown
-	on:pointerleave
-	on:pointermove
->
-	<span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
-		<MenubarPrimitive.RadioIndicator>
-			<DotFilled class="h-4 w-4 fill-current" />
-		</MenubarPrimitive.RadioIndicator>
-	</span>
-	<slot />
-</MenubarPrimitive.RadioItem>
diff --git a/src/components/ui/menubar/menubar-separator.svelte b/src/components/ui/menubar/menubar-separator.svelte
deleted file mode 100644
index e2a32c5ed..000000000
--- a/src/components/ui/menubar/menubar-separator.svelte
+++ /dev/null
@@ -1,13 +0,0 @@
-<script lang="ts">
-	import { Menubar as MenubarPrimitive } from "@/lib";
-	import { cn } from "@/utils";
-
-	type $$Props = MenubarPrimitive.SeparatorProps;
-	let className: $$Props["class"] = undefined;
-	export { className as class };
-</script>
-
-<MenubarPrimitive.Separator
-	class={cn("-mx-1 my-1 h-px bg-muted", className)}
-	{...$$restProps}
-/>
diff --git a/src/components/ui/menubar/menubar-shortcut.svelte b/src/components/ui/menubar/menubar-shortcut.svelte
deleted file mode 100644
index 2a4e3a548..000000000
--- a/src/components/ui/menubar/menubar-shortcut.svelte
+++ /dev/null
@@ -1,15 +0,0 @@
-<script lang="ts">
-	import { cn } from "@/utils";
-	import type { HTMLAttributes } from "svelte/elements";
-
-	type $$Props = HTMLAttributes<HTMLSpanElement>;
-	let className: $$Props["class"] = undefined;
-	export { className as class };
-</script>
-
-<span
-	class={cn("ml-auto text-xs tracking-widest text-muted-foreground", className)}
-	{...$$restProps}
->
-	<slot />
-</span>
diff --git a/src/components/ui/menubar/menubar-sub-content.svelte b/src/components/ui/menubar/menubar-sub-content.svelte
deleted file mode 100644
index e11432b3b..000000000
--- a/src/components/ui/menubar/menubar-sub-content.svelte
+++ /dev/null
@@ -1,24 +0,0 @@
-<script lang="ts">
-	import { Menubar as MenubarPrimitive } from "@/lib";
-	import { transition } from ".";
-	import { cn } from "@/utils";
-
-	type $$Props = MenubarPrimitive.SubContentProps;
-	let className: $$Props["class"] = undefined;
-	export { className as class };
-</script>
-
-<MenubarPrimitive.SubContent
-	{transition}
-	transitionConfig={{ x: -5, y: 0 }}
-	class={cn(
-		"bg-popover text-popover-foreground z-50 min-w-[8rem] rounded-md border p-1 shadow-lg  focus:outline-none",
-		className
-	)}
-	{...$$restProps}
-	on:keydown
-	on:focusout
-	on:pointermove
->
-	<slot />
-</MenubarPrimitive.SubContent>
diff --git a/src/components/ui/menubar/menubar-sub-trigger.svelte b/src/components/ui/menubar/menubar-sub-trigger.svelte
deleted file mode 100644
index 293cd4c1e..000000000
--- a/src/components/ui/menubar/menubar-sub-trigger.svelte
+++ /dev/null
@@ -1,32 +0,0 @@
-<script lang="ts">
-	import { Menubar as MenubarPrimitive } from "@/lib";
-	import { cn } from "@/utils";
-	import { ChevronRight } from "radix-icons-svelte";
-
-	type $$Props = MenubarPrimitive.SubTriggerProps & {
-		inset?: boolean;
-	};
-	type $$Events = MenubarPrimitive.SubTriggerEvents;
-
-	let className: $$Props["class"] = undefined;
-	export let inset: $$Props["inset"] = undefined;
-	export { className as class };
-</script>
-
-<MenubarPrimitive.SubTrigger
-	class={cn(
-		"data-[highlighted]:text-accent-foreground data-[state=open]:text-accent-foreground flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[highlighted]:bg-accent data-[state=open]:bg-accent",
-		inset && "pl-8",
-		className
-	)}
-	{...$$restProps}
-	on:click
-	on:keydown
-	on:focusin
-	on:focusout
-	on:pointermove
-	on:pointerleave
->
-	<slot />
-	<ChevronRight class="ml-auto h-4 w-4" />
-</MenubarPrimitive.SubTrigger>
diff --git a/src/components/ui/menubar/menubar-trigger.svelte b/src/components/ui/menubar/menubar-trigger.svelte
deleted file mode 100644
index eeddfa91d..000000000
--- a/src/components/ui/menubar/menubar-trigger.svelte
+++ /dev/null
@@ -1,23 +0,0 @@
-<script lang="ts">
-	import { Menubar as MenubarPrimitive } from "@/lib";
-	import { cn } from "@/utils";
-
-	type $$Props = MenubarPrimitive.TriggerProps;
-	type $$Events = MenubarPrimitive.TriggerEvents;
-
-	let className: $$Props["class"] = undefined;
-	export { className as class };
-</script>
-
-<MenubarPrimitive.Trigger
-	class={cn(
-		"focus:text-accent-foreground data-[state=open]:text-accent-foreground flex cursor-default select-none items-center rounded-sm px-3 py-1 text-sm font-medium outline-none focus:bg-accent data-[state=open]:bg-accent",
-		className
-	)}
-	{...$$restProps}
-	on:click
-	on:keydown
-	on:pointerenter
->
-	<slot />
-</MenubarPrimitive.Trigger>
diff --git a/src/components/ui/menubar/menubar.svelte b/src/components/ui/menubar/menubar.svelte
deleted file mode 100644
index 4084b7486..000000000
--- a/src/components/ui/menubar/menubar.svelte
+++ /dev/null
@@ -1,18 +0,0 @@
-<script lang="ts">
-	import { Menubar as MenubarPrimitive } from "@/lib";
-	import { cn } from "@/utils";
-
-	type $$Props = MenubarPrimitive.Props;
-
-	let className: $$Props["class"] = undefined;
-	export { className as class };
-</script>
-
-<MenubarPrimitive.Root
-	class={cn(
-		"flex h-9 items-center space-x-1 rounded-md border bg-background p-1 shadow-sm",
-		className
-	)}
->
-	<slot />
-</MenubarPrimitive.Root>
diff --git a/src/components/ui/popover/index.ts b/src/components/ui/popover/index.ts
deleted file mode 100644
index edfb0a352..000000000
--- a/src/components/ui/popover/index.ts
+++ /dev/null
@@ -1,64 +0,0 @@
-import { Popover as PopoverPrimitive } from "@/lib";
-import Content from "./popover-content.svelte";
-import type { TransitionConfig } from "svelte/transition";
-import { cubicOut } from "svelte/easing";
-const Root = PopoverPrimitive.Root;
-const Trigger = PopoverPrimitive.Trigger;
-
-export {
-	Root,
-	Content,
-	Trigger,
-	//
-	Root as Popover,
-	Content as PopoverContent,
-	Trigger as PopoverTrigger
-};
-
-type TransitionParams = {
-	y?: number;
-	x?: number;
-	start?: number;
-	duration?: number;
-};
-
-export const transition = (
-	node: Element,
-	params: TransitionParams = { y: -8, x: 0, start: 0.95, duration: 200 }
-): TransitionConfig => {
-	const style = getComputedStyle(node);
-	const transform = style.transform === "none" ? "" : style.transform;
-
-	const scaleConversion = (valueA: number, scaleA: [number, number], scaleB: [number, number]) => {
-		const [minA, maxA] = scaleA;
-		const [minB, maxB] = scaleB;
-
-		const percentage = (valueA - minA) / (maxA - minA);
-		const valueB = percentage * (maxB - minB) + minB;
-
-		return valueB;
-	};
-
-	const styleToString = (style: Record<string, number | string | undefined>): string => {
-		return Object.keys(style).reduce((str, key) => {
-			if (style[key] === undefined) return str;
-			return str + `${key}:${style[key]};`;
-		}, "");
-	};
-
-	return {
-		duration: params.duration ?? 200,
-		delay: 0,
-		css: (t) => {
-			const y = scaleConversion(t, [0, 1], [params.y ?? 5, 0]);
-			const x = scaleConversion(t, [0, 1], [params.x ?? 0, 0]);
-			const scale = scaleConversion(t, [0, 1], [params.start ?? 0.95, 1]);
-
-			return styleToString({
-				transform: `${transform} translate3d(${x}px, ${y}px, 0) scale(${scale})`,
-				opacity: t
-			});
-		},
-		easing: cubicOut
-	};
-};
diff --git a/src/components/ui/popover/popover-content.svelte b/src/components/ui/popover/popover-content.svelte
deleted file mode 100644
index 7f36486a6..000000000
--- a/src/components/ui/popover/popover-content.svelte
+++ /dev/null
@@ -1,20 +0,0 @@
-<script lang="ts">
-	import { Popover as PopoverPrimitive } from "@/lib";
-	import { cn } from "@/utils";
-	import { transition } from ".";
-	type $$Props = PopoverPrimitive.ContentProps;
-
-	let className: $$Props["class"] = undefined;
-	export { className as class };
-</script>
-
-<PopoverPrimitive.Content
-	{transition}
-	{...$$restProps}
-	class={cn(
-		"bg-popover text-popover-foreground z-50 w-72 rounded-md border p-4 shadow-md outline-none ",
-		className
-	)}
->
-	<slot />
-</PopoverPrimitive.Content>
diff --git a/src/components/ui/progress/index.ts b/src/components/ui/progress/index.ts
deleted file mode 100644
index 45dd0045d..000000000
--- a/src/components/ui/progress/index.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import Root from "./progress.svelte";
-
-export {
-	Root,
-	//
-	Root as Progress
-};
diff --git a/src/components/ui/progress/progress.svelte b/src/components/ui/progress/progress.svelte
deleted file mode 100644
index 80ce8605c..000000000
--- a/src/components/ui/progress/progress.svelte
+++ /dev/null
@@ -1,26 +0,0 @@
-<script lang="ts">
-	import { Progress as ProgressPrimitive } from "@/lib";
-	import { cn } from "@/utils";
-
-	type $$Props = ProgressPrimitive.Props;
-
-	let className: $$Props["class"] = undefined;
-	export let max: $$Props["max"] = 100;
-	export let value: $$Props["value"] = undefined;
-	export { className as class };
-</script>
-
-<ProgressPrimitive.Root
-	class={cn(
-		"bg-primary/20 relative h-2 w-full overflow-hidden rounded-full",
-		className
-	)}
-	{...$$restProps}
->
-	<div
-		class="bg-primary h-full w-full flex-1 transition-all"
-		style={`transform: translateX(-${
-			100 - (100 * (value ?? 0)) / (max ?? 1)
-		}%)`}
-	/>
-</ProgressPrimitive.Root>
diff --git a/src/components/ui/radio-group/index.ts b/src/components/ui/radio-group/index.ts
deleted file mode 100644
index 0e8a89fbf..000000000
--- a/src/components/ui/radio-group/index.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import { RadioGroup as RadioGroupPrimitive } from "@/lib";
-
-import Root from "./radio-group.svelte";
-import Item from "./radio-group-item.svelte";
-const Input = RadioGroupPrimitive.Input;
-
-export {
-	Root,
-	Input,
-	Item,
-	//
-	Root as RadioGroup,
-	Input as RadioGroupInput,
-	Item as RadioGroupItem
-};
diff --git a/src/components/ui/radio-group/radio-group-item.svelte b/src/components/ui/radio-group/radio-group-item.svelte
deleted file mode 100644
index a4ab60016..000000000
--- a/src/components/ui/radio-group/radio-group-item.svelte
+++ /dev/null
@@ -1,32 +0,0 @@
-<script lang="ts">
-	import { RadioGroup as RadioGroupPrimitive } from "@/lib";
-	import { Check } from "radix-icons-svelte";
-	import { cn } from "@/utils";
-
-	type $$Props = RadioGroupPrimitive.ItemProps & {
-		value: string;
-	};
-	type $$Events = RadioGroupPrimitive.ItemEvents;
-
-	let className: $$Props["class"] = undefined;
-	export let value: $$Props["value"];
-	export { className as class };
-</script>
-
-<RadioGroupPrimitive.Item
-	{value}
-	class={cn(
-		"border-primary text-primary focus-visible:ring-ring aspect-square h-4 w-4 rounded-full border shadow focus:outline-none focus-visible:ring-1 disabled:cursor-not-allowed disabled:opacity-50",
-		className
-	)}
-	{...$$restProps}
-	on:click
-	on:keydown
-	on:focus
->
-	<div class="flex items-center justify-center">
-		<RadioGroupPrimitive.ItemIndicator>
-			<Check class="fill-primary h-3.5 w-3.5" />
-		</RadioGroupPrimitive.ItemIndicator>
-	</div>
-</RadioGroupPrimitive.Item>
diff --git a/src/components/ui/radio-group/radio-group.svelte b/src/components/ui/radio-group/radio-group.svelte
deleted file mode 100644
index a202d12b5..000000000
--- a/src/components/ui/radio-group/radio-group.svelte
+++ /dev/null
@@ -1,18 +0,0 @@
-<script lang="ts">
-	import { RadioGroup as RadioGroupPrimitive } from "@/lib";
-	import { cn } from "@/utils";
-
-	type $$Props = RadioGroupPrimitive.Props;
-
-	let className: $$Props["class"] = undefined;
-	export let value: $$Props["value"] = undefined;
-	export { className as class };
-</script>
-
-<RadioGroupPrimitive.Root
-	bind:value
-	class={cn("grid gap-2", className)}
-	{...$$restProps}
->
-	<slot />
-</RadioGroupPrimitive.Root>
diff --git a/src/components/ui/select/index.ts b/src/components/ui/select/index.ts
deleted file mode 100644
index bdbd82034..000000000
--- a/src/components/ui/select/index.ts
+++ /dev/null
@@ -1,84 +0,0 @@
-import { Select as SelectPrimitive } from "@/lib";
-
-import Root from "./select.svelte";
-import Label from "./select-label.svelte";
-import Item from "./select-item.svelte";
-import Content from "./select-content.svelte";
-import Trigger from "./select-trigger.svelte";
-import Separator from "./select-separator.svelte";
-import type { TransitionConfig } from "svelte/transition";
-import { cubicOut } from "svelte/easing";
-
-const Group = SelectPrimitive.Group;
-const Input = SelectPrimitive.Input;
-const Value = SelectPrimitive.Value;
-
-export {
-	Root,
-	Item,
-	Group,
-	Input,
-	Label,
-	Value,
-	Content,
-	Trigger,
-	Separator,
-	//
-	Root as Select,
-	Item as SelectItem,
-	Group as SelectGroup,
-	Input as SelectInput,
-	Label as SelectLabel,
-	Value as SelectValue,
-	Content as SelectContent,
-	Trigger as SelectTrigger,
-	Separator as SelectSeparator
-};
-
-type TransitionParams = {
-	y?: number;
-	x?: number;
-	start?: number;
-	duration?: number;
-};
-
-export const transition = (
-	node: Element,
-	params: TransitionParams = { y: -8, x: 0, start: 0.95, duration: 150 }
-): TransitionConfig => {
-	const style = getComputedStyle(node);
-	const transform = style.transform === "none" ? "" : style.transform;
-
-	const scaleConversion = (valueA: number, scaleA: [number, number], scaleB: [number, number]) => {
-		const [minA, maxA] = scaleA;
-		const [minB, maxB] = scaleB;
-
-		const percentage = (valueA - minA) / (maxA - minA);
-		const valueB = percentage * (maxB - minB) + minB;
-
-		return valueB;
-	};
-
-	const styleToString = (style: Record<string, number | string | undefined>): string => {
-		return Object.keys(style).reduce((str, key) => {
-			if (style[key] === undefined) return str;
-			return str + `${key}:${style[key]};`;
-		}, "");
-	};
-
-	return {
-		duration: params.duration ?? 200,
-		delay: 0,
-		css: (t) => {
-			const y = scaleConversion(t, [0, 1], [params.y ?? 5, 0]);
-			const x = scaleConversion(t, [0, 1], [params.x ?? 0, 0]);
-			const scale = scaleConversion(t, [0, 1], [params.start ?? 0.95, 1]);
-
-			return styleToString({
-				transform: `${transform} translate3d(${x}px, ${y}px, 0) scale(${scale})`,
-				opacity: t
-			});
-		},
-		easing: cubicOut
-	};
-};
diff --git a/src/components/ui/select/select-content.svelte b/src/components/ui/select/select-content.svelte
deleted file mode 100644
index 39efe0eb1..000000000
--- a/src/components/ui/select/select-content.svelte
+++ /dev/null
@@ -1,23 +0,0 @@
-<script lang="ts">
-	import { Select as SelectPrimitive } from "@/lib";
-	import { cn } from "@/utils";
-	import { transition } from ".";
-	import { scale } from "svelte/transition";
-	type $$Props = SelectPrimitive.ContentProps;
-
-	let className: $$Props["class"] = undefined;
-	export { className as class };
-</script>
-
-<SelectPrimitive.Content
-	inTransition={transition}
-	outTransition={scale}
-	outTransitionConfig={{ start: 0.95, opacity: 0, duration: 50 }}
-	class={cn(
-		"bg-popover text-popover-foreground relative z-50 min-w-[8rem] overflow-hidden rounded-md border shadow-md outline-none data-[state=open]:translate-y-1",
-		className
-	)}
-	{...$$restProps}
->
-	<slot />
-</SelectPrimitive.Content>
diff --git a/src/components/ui/select/select-item.svelte b/src/components/ui/select/select-item.svelte
deleted file mode 100644
index 88bd3c3b0..000000000
--- a/src/components/ui/select/select-item.svelte
+++ /dev/null
@@ -1,38 +0,0 @@
-<script lang="ts">
-	import { Select as SelectPrimitive } from "@/lib";
-	import { Check } from "radix-icons-svelte";
-	import { cn } from "@/utils";
-
-	type $$Props = SelectPrimitive.ItemProps;
-	type $$Events = Required<SelectPrimitive.ItemEvents>;
-
-	let className: $$Props["class"] = undefined;
-	export let value: $$Props["value"];
-	export let label: $$Props["label"] = undefined;
-	export let disabled: $$Props["disabled"] = undefined;
-	export { className as class };
-</script>
-
-<SelectPrimitive.Item
-	{value}
-	{disabled}
-	{label}
-	class={cn(
-		"focus:text-accent-foreground relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none focus:bg-accent data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-		className
-	)}
-	{...$$restProps}
-	on:click
-	on:keydown
-	on:focusin
-	on:focusout
-	on:pointerleave
-	on:pointermove
->
-	<span class="absolute right-2 flex h-3.5 w-3.5 items-center justify-center">
-		<SelectPrimitive.ItemIndicator>
-			<Check class="h-4 w-4" />
-		</SelectPrimitive.ItemIndicator>
-	</span>
-	<slot />
-</SelectPrimitive.Item>
diff --git a/src/components/ui/select/select-label.svelte b/src/components/ui/select/select-label.svelte
deleted file mode 100644
index 1b13148da..000000000
--- a/src/components/ui/select/select-label.svelte
+++ /dev/null
@@ -1,16 +0,0 @@
-<script lang="ts">
-	import { Select as SelectPrimitive } from "@/lib";
-	import { cn } from "@/utils";
-
-	type $$Props = SelectPrimitive.LabelProps;
-
-	let className: $$Props["class"] = undefined;
-	export { className as class };
-</script>
-
-<SelectPrimitive.Label
-	class={cn("px-2 py-1.5 text-sm font-semibold", className)}
-	{...$$restProps}
->
-	<slot />
-</SelectPrimitive.Label>
diff --git a/src/components/ui/select/select-separator.svelte b/src/components/ui/select/select-separator.svelte
deleted file mode 100644
index bdcf82640..000000000
--- a/src/components/ui/select/select-separator.svelte
+++ /dev/null
@@ -1,14 +0,0 @@
-<script lang="ts">
-	import { Select as SelectPrimitive } from "@/lib";
-	import { cn } from "@/utils";
-
-	type $$Props = SelectPrimitive.SeparatorProps;
-
-	let className: $$Props["class"] = undefined;
-	export { className as class };
-</script>
-
-<SelectPrimitive.Separator
-	class={cn("-mx-1 my-1 h-px bg-muted", className)}
-	{...$$restProps}
-/>
diff --git a/src/components/ui/select/select-trigger.svelte b/src/components/ui/select/select-trigger.svelte
deleted file mode 100644
index dd6ca2584..000000000
--- a/src/components/ui/select/select-trigger.svelte
+++ /dev/null
@@ -1,24 +0,0 @@
-<script lang="ts">
-	import { Select as SelectPrimitive } from "@/lib";
-	import { CaretSort } from "radix-icons-svelte";
-	import { cn } from "@/utils";
-
-	type $$Props = SelectPrimitive.TriggerProps;
-	type $$Events = SelectPrimitive.TriggerEvents;
-
-	let className: $$Props["class"] = undefined;
-	export { className as class };
-</script>
-
-<SelectPrimitive.Trigger
-	class={cn(
-		"border-input focus:ring-ring flex h-9 w-full items-center justify-between rounded-md border bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
-		className
-	)}
-	{...$$restProps}
->
-	<slot />
-	<div>
-		<CaretSort class="h-4 w-4 opacity-50" />
-	</div>
-</SelectPrimitive.Trigger>
diff --git a/src/components/ui/select/select.svelte b/src/components/ui/select/select.svelte
deleted file mode 100644
index 6a7c5cced..000000000
--- a/src/components/ui/select/select.svelte
+++ /dev/null
@@ -1,12 +0,0 @@
-<script lang="ts">
-	import { Select as SelectPrimitive } from "@/lib";
-
-	type $$Props = SelectPrimitive.Props;
-
-	export let selected: $$Props["selected"] = undefined;
-	export let open: $$Props["open"] = undefined;
-</script>
-
-<SelectPrimitive.Root bind:selected bind:open {...$$restProps}>
-	<slot />
-</SelectPrimitive.Root>
diff --git a/src/components/ui/separator/index.ts b/src/components/ui/separator/index.ts
deleted file mode 100644
index dbfb13914..000000000
--- a/src/components/ui/separator/index.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import Root from "./separator.svelte";
-
-export {
-	Root,
-	//
-	Root as Separator
-};
diff --git a/src/components/ui/separator/separator.svelte b/src/components/ui/separator/separator.svelte
deleted file mode 100644
index bf21bd9ee..000000000
--- a/src/components/ui/separator/separator.svelte
+++ /dev/null
@@ -1,22 +0,0 @@
-<script lang="ts">
-	import { Separator as SeparatorPrimitive } from "@/lib";
-	import { cn } from "@/utils";
-
-	type $$Props = SeparatorPrimitive.Props;
-
-	let className: $$Props["class"] = undefined;
-	export let orientation: $$Props["orientation"] = "horizontal";
-	export let decorative: $$Props["decorative"] = undefined;
-	export { className as class };
-</script>
-
-<SeparatorPrimitive.Root
-	class={cn(
-		"shrink-0 bg-border",
-		orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
-		className
-	)}
-	{orientation}
-	{decorative}
-	{...$$restProps}
-/>
diff --git a/src/components/ui/sheet/sheet-content.svelte b/src/components/ui/sheet/sheet-content.svelte
index 698d7987a..e8f361e1e 100644
--- a/src/components/ui/sheet/sheet-content.svelte
+++ b/src/components/ui/sheet/sheet-content.svelte
@@ -7,7 +7,7 @@
 		sheetTransitions,
 		type Side
 	} from ".";
-	import { Cross2 } from "radix-icons-svelte";
+	import { X } from "phosphor-svelte";
 	import { cn } from "@/utils";
 	import { fly } from "svelte/transition";
 
@@ -35,7 +35,7 @@
 		<SheetPrimitive.Close
 			class="focus:ring-ring data-[state=open]:bg-secondary absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:pointer-events-none"
 		>
-			<Cross2 class="h-4 w-4" />
+			<X class="h-4 w-4" />
 			<span class="sr-only">Close</span>
 		</SheetPrimitive.Close>
 	</SheetPrimitive.Content>
diff --git a/src/components/ui/skeleton/index.ts b/src/components/ui/skeleton/index.ts
deleted file mode 100644
index 2be5c505e..000000000
--- a/src/components/ui/skeleton/index.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import Root from "./skeleton.svelte";
-
-export {
-	Root,
-	//
-	Root as Skeleton
-};
diff --git a/src/components/ui/skeleton/skeleton.svelte b/src/components/ui/skeleton/skeleton.svelte
deleted file mode 100644
index 5a1039160..000000000
--- a/src/components/ui/skeleton/skeleton.svelte
+++ /dev/null
@@ -1,14 +0,0 @@
-<script lang="ts">
-	import { cn } from "@/utils";
-	import type { HTMLAttributes } from "svelte/elements";
-
-	type $$Props = HTMLAttributes<HTMLDivElement>;
-
-	let className: $$Props["class"] = undefined;
-	export { className as class };
-</script>
-
-<div
-	class={cn("bg-primary/10 animate-pulse rounded-md", className)}
-	{...$$restProps}
-/>
diff --git a/src/components/ui/slider/index.ts b/src/components/ui/slider/index.ts
deleted file mode 100644
index 384418675..000000000
--- a/src/components/ui/slider/index.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import Root from "./slider.svelte";
-
-export {
-	Root,
-	//
-	Root as Slider
-};
diff --git a/src/components/ui/slider/slider.svelte b/src/components/ui/slider/slider.svelte
deleted file mode 100644
index 1b95379f1..000000000
--- a/src/components/ui/slider/slider.svelte
+++ /dev/null
@@ -1,28 +0,0 @@
-<script lang="ts">
-	import { Slider as SliderPrimitive } from "@/lib";
-	import { cn } from "@/utils";
-
-	type $$Props = SliderPrimitive.Props;
-
-	let className: $$Props["class"] = undefined;
-	export let value: $$Props["value"] = [0];
-	export { className as class };
-</script>
-
-<SliderPrimitive.Root
-	bind:value
-	class={cn(
-		"relative flex w-full touch-none select-none items-center",
-		className
-	)}
-	{...$$restProps}
->
-	<span
-		class="bg-primary/20 relative h-1.5 w-full grow overflow-hidden rounded-full"
-	>
-		<SliderPrimitive.Range class="bg-primary absolute h-full" />
-	</span>
-	<SliderPrimitive.Thumb
-		class="border-primary/50 focus-visible:ring-ring block h-4 w-4 rounded-full border bg-background shadow transition-colors focus-visible:outline-none focus-visible:ring-1 disabled:pointer-events-none disabled:opacity-50"
-	/>
-</SliderPrimitive.Root>
diff --git a/src/components/ui/switch/index.ts b/src/components/ui/switch/index.ts
deleted file mode 100644
index f0e5fb793..000000000
--- a/src/components/ui/switch/index.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import Root from "./switch.svelte";
-
-export {
-	Root,
-	//
-	Root as Switch
-};
diff --git a/src/components/ui/switch/switch.svelte b/src/components/ui/switch/switch.svelte
deleted file mode 100644
index 03ff17baf..000000000
--- a/src/components/ui/switch/switch.svelte
+++ /dev/null
@@ -1,28 +0,0 @@
-<script lang="ts">
-	import { Switch as SwitchPrimitive } from "@/lib";
-	import { cn } from "@/utils";
-
-	type $$Props = SwitchPrimitive.Props;
-	type $$Events = SwitchPrimitive.Events;
-
-	let className: $$Props["class"] = undefined;
-	export let checked: $$Props["checked"] = undefined;
-	export { className as class };
-</script>
-
-<SwitchPrimitive.Root
-	bind:checked
-	class={cn(
-		"focus-visible:ring-ring data-[state=checked]:bg-primary data-[state=unchecked]:bg-input peer inline-flex h-[20px] w-[36px] shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50",
-		className
-	)}
-	{...$$restProps}
-	on:click
-	on:keydown
->
-	<SwitchPrimitive.Thumb
-		class={cn(
-			"pointer-events-none block h-4 w-4 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0"
-		)}
-	/>
-</SwitchPrimitive.Root>
diff --git a/src/components/ui/tabs/index.ts b/src/components/ui/tabs/index.ts
deleted file mode 100644
index a3108f47d..000000000
--- a/src/components/ui/tabs/index.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import { Tabs as TabsPrimitive } from "@/lib";
-import Content from "./tabs-content.svelte";
-import List from "./tabs-list.svelte";
-import Trigger from "./tabs-trigger.svelte";
-
-const Root = TabsPrimitive.Root;
-
-export {
-	Root,
-	Content,
-	List,
-	Trigger,
-	//
-	Root as Tabs,
-	Content as TabsContent,
-	List as TabsList,
-	Trigger as TabsTrigger
-};
diff --git a/src/components/ui/tabs/tabs-content.svelte b/src/components/ui/tabs/tabs-content.svelte
deleted file mode 100644
index 16cb218a6..000000000
--- a/src/components/ui/tabs/tabs-content.svelte
+++ /dev/null
@@ -1,21 +0,0 @@
-<script lang="ts">
-	import { Tabs as TabsPrimitive } from "@/lib";
-	import { cn } from "@/utils";
-
-	type $$Props = TabsPrimitive.ContentProps;
-
-	let className: $$Props["class"] = undefined;
-	export let value: $$Props["value"];
-	export { className as class };
-</script>
-
-<TabsPrimitive.Content
-	class={cn(
-		"focus-visible:ring-ring mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2",
-		className
-	)}
-	{value}
-	{...$$restProps}
->
-	<slot />
-</TabsPrimitive.Content>
diff --git a/src/components/ui/tabs/tabs-list.svelte b/src/components/ui/tabs/tabs-list.svelte
deleted file mode 100644
index 7089e3628..000000000
--- a/src/components/ui/tabs/tabs-list.svelte
+++ /dev/null
@@ -1,19 +0,0 @@
-<script lang="ts">
-	import { Tabs as TabsPrimitive } from "@/lib";
-	import { cn } from "@/utils";
-
-	type $$Props = TabsPrimitive.ListProps;
-
-	let className: $$Props["class"] = undefined;
-	export { className as class };
-</script>
-
-<TabsPrimitive.List
-	class={cn(
-		"inline-flex h-9 items-center justify-center rounded-lg bg-muted p-1 text-muted-foreground",
-		className
-	)}
-	{...$$restProps}
->
-	<slot />
-</TabsPrimitive.List>
diff --git a/src/components/ui/tabs/tabs-trigger.svelte b/src/components/ui/tabs/tabs-trigger.svelte
deleted file mode 100644
index 3f077ce5f..000000000
--- a/src/components/ui/tabs/tabs-trigger.svelte
+++ /dev/null
@@ -1,25 +0,0 @@
-<script lang="ts">
-	import { Tabs as TabsPrimitive } from "@/lib";
-	import { cn } from "@/utils";
-
-	type $$Props = TabsPrimitive.TriggerProps;
-	type $$Events = TabsPrimitive.TriggerEvents;
-
-	let className: $$Props["class"] = undefined;
-	export let value: $$Props["value"];
-	export { className as class };
-</script>
-
-<TabsPrimitive.Trigger
-	class={cn(
-		"focus-visible:ring-ring inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow",
-		className
-	)}
-	{value}
-	{...$$restProps}
-	on:click
-	on:keydown
-	on:focus
->
-	<slot />
-</TabsPrimitive.Trigger>
diff --git a/src/components/ui/textarea/index.ts b/src/components/ui/textarea/index.ts
deleted file mode 100644
index 99752e957..000000000
--- a/src/components/ui/textarea/index.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import Root from "./textarea.svelte";
-
-export {
-	Root,
-	//
-	Root as Textarea
-};
diff --git a/src/components/ui/textarea/textarea.svelte b/src/components/ui/textarea/textarea.svelte
deleted file mode 100644
index fb198fdca..000000000
--- a/src/components/ui/textarea/textarea.svelte
+++ /dev/null
@@ -1,31 +0,0 @@
-<script lang="ts">
-	import type { HTMLTextareaAttributes } from "svelte/elements";
-	import { cn } from "@/utils";
-
-	type $$Props = HTMLTextareaAttributes;
-
-	let className: $$Props["class"] = undefined;
-	export let value: $$Props["value"] = undefined;
-	export { className as class };
-</script>
-
-<textarea
-	class={cn(
-		"border-input focus-visible:ring-ring flex min-h-[60px] w-full rounded-md border bg-transparent px-3 py-2 text-sm shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 disabled:cursor-not-allowed disabled:opacity-50",
-		className
-	)}
-	bind:value
-	on:blur
-	on:change
-	on:click
-	on:focus
-	on:keydown
-	on:keypress
-	on:keyup
-	on:mouseover
-	on:mouseenter
-	on:mouseleave
-	on:paste
-	on:input
-	{...$$restProps}
-/>
diff --git a/src/components/ui/toggle/index.ts b/src/components/ui/toggle/index.ts
deleted file mode 100644
index 3eeef9864..000000000
--- a/src/components/ui/toggle/index.ts
+++ /dev/null
@@ -1,31 +0,0 @@
-import Root from "./toggle.svelte";
-import { tv, type VariantProps } from "tailwind-variants";
-
-export const toggleVariants = tv({
-	base: "inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground",
-	variants: {
-		variant: {
-			default: "bg-transparent",
-			outline:
-				"border border-input bg-transparent shadow-sm hover:bg-accent hover:text-accent-foreground"
-		},
-		size: {
-			default: "h-9 px-3",
-			sm: "h-8 px-2",
-			lg: "h-10 px-3"
-		}
-	},
-	defaultVariants: {
-		variant: "default",
-		size: "default"
-	}
-});
-
-export type Variant = VariantProps<typeof toggleVariants>["variant"];
-export type Size = VariantProps<typeof toggleVariants>["size"];
-
-export {
-	Root,
-	//
-	Root as Toggle
-};
diff --git a/src/components/ui/toggle/toggle.svelte b/src/components/ui/toggle/toggle.svelte
deleted file mode 100644
index c793497e1..000000000
--- a/src/components/ui/toggle/toggle.svelte
+++ /dev/null
@@ -1,26 +0,0 @@
-<script lang="ts">
-	import { Toggle as TogglePrimitive } from "@/lib";
-	import { toggleVariants, type Variant, type Size } from ".";
-	import { cn } from "@/utils";
-
-	type $$Props = TogglePrimitive.Props & {
-		variant?: Variant;
-		size?: Size;
-	};
-	type $$Events = TogglePrimitive.Events;
-
-	let className: $$Props["class"] = undefined;
-	export let variant: $$Props["variant"] = "default";
-	export let size: $$Props["size"] = "default";
-	export let pressed: $$Props["pressed"] = undefined;
-	export { className as class };
-</script>
-
-<TogglePrimitive.Root
-	bind:pressed
-	class={cn(toggleVariants({ variant, size, className }))}
-	{...$$restProps}
-	on:click
->
-	<slot />
-</TogglePrimitive.Root>
diff --git a/src/components/ui/tooltip/index.ts b/src/components/ui/tooltip/index.ts
deleted file mode 100644
index 6ce23d913..000000000
--- a/src/components/ui/tooltip/index.ts
+++ /dev/null
@@ -1,65 +0,0 @@
-import { Tooltip as TooltipPrimitive } from "@/lib";
-import Content from "./tooltip-content.svelte";
-import type { TransitionConfig } from "svelte/transition";
-import { cubicOut } from "svelte/easing";
-
-const Root = TooltipPrimitive.Root;
-const Trigger = TooltipPrimitive.Trigger;
-
-export {
-	Root,
-	Trigger,
-	Content,
-	//
-	Root as Tooltip,
-	Content as TooltipContent,
-	Trigger as TooltipTrigger
-};
-
-type TransitionParams = {
-	y?: number;
-	x?: number;
-	start?: number;
-	duration?: number;
-};
-
-export const transition = (
-	node: Element,
-	params: TransitionParams = { y: -8, x: 0, start: 0.95, duration: 150 }
-): TransitionConfig => {
-	const style = getComputedStyle(node);
-	const transform = style.transform === "none" ? "" : style.transform;
-
-	const scaleConversion = (valueA: number, scaleA: [number, number], scaleB: [number, number]) => {
-		const [minA, maxA] = scaleA;
-		const [minB, maxB] = scaleB;
-
-		const percentage = (valueA - minA) / (maxA - minA);
-		const valueB = percentage * (maxB - minB) + minB;
-
-		return valueB;
-	};
-
-	const styleToString = (style: Record<string, number | string | undefined>): string => {
-		return Object.keys(style).reduce((str, key) => {
-			if (style[key] === undefined) return str;
-			return str + `${key}:${style[key]};`;
-		}, "");
-	};
-
-	return {
-		duration: params.duration ?? 200,
-		delay: 0,
-		css: (t) => {
-			const y = scaleConversion(t, [0, 1], [params.y ?? 5, 0]);
-			const x = scaleConversion(t, [0, 1], [params.x ?? 0, 0]);
-			const scale = scaleConversion(t, [0, 1], [params.start ?? 0.95, 1]);
-
-			return styleToString({
-				transform: `${transform} translate3d(${x}px, ${y}px, 0) scale(${scale})`,
-				opacity: t
-			});
-		},
-		easing: cubicOut
-	};
-};
diff --git a/src/components/ui/tooltip/tooltip-content.svelte b/src/components/ui/tooltip/tooltip-content.svelte
deleted file mode 100644
index 377aa3f9e..000000000
--- a/src/components/ui/tooltip/tooltip-content.svelte
+++ /dev/null
@@ -1,24 +0,0 @@
-<script lang="ts">
-	import { Tooltip as TooltipPrimitive } from "@/lib";
-	import { cn } from "@/utils";
-	import { transition } from "../alert-dialog";
-
-	type $$Props = TooltipPrimitive.ContentProps;
-
-	let className: $$Props["class"] = undefined;
-	export let sideOffset: $$Props["sideOffset"] = 4;
-	export { className as class };
-</script>
-
-<TooltipPrimitive.Content
-	{transition}
-	transitionConfig={{ y: 8, start: 0.95, duration: 150 }}
-	{sideOffset}
-	class={cn(
-		"bg-primary text-primary-foreground z-50 overflow-hidden rounded-md px-3 py-1.5 text-xs ",
-		className
-	)}
-	{...$$restProps}
->
-	<slot />
-</TooltipPrimitive.Content>
diff --git a/src/lib/bits/calendar/components/Calendar.svelte b/src/lib/bits/calendar/components/Calendar.svelte
index 507e73909..f8931bf55 100644
--- a/src/lib/bits/calendar/components/Calendar.svelte
+++ b/src/lib/bits/calendar/components/Calendar.svelte
@@ -26,7 +26,12 @@
 
 	const {
 		elements: { calendar },
-		states: { value: localValue, placeholder: localPlaceholder, months, daysOfWeek },
+		states: {
+			value: localValue,
+			placeholder: localPlaceholder,
+			months,
+			daysOfWeek
+		},
 		updateOption,
 		ids
 	} = setCtx({
diff --git a/src/lib/bits/context-menu/_types.ts b/src/lib/bits/context-menu/_types.ts
index 34d56e7fc..ecab902a7 100644
--- a/src/lib/bits/context-menu/_types.ts
+++ b/src/lib/bits/context-menu/_types.ts
@@ -1,4 +1,5 @@
 import type { AsChild, Transition, TransitionProps } from "$lib/internal/index.js";
+import type { Boundary } from "../floating/_types";
 
 export type ContentProps<
 	T extends Transition = Transition,
diff --git a/src/lib/bits/link-preview/components/LinkPreviewContent.svelte b/src/lib/bits/link-preview/components/LinkPreviewContent.svelte
index ba68f041a..b8121819e 100644
--- a/src/lib/bits/link-preview/components/LinkPreviewContent.svelte
+++ b/src/lib/bits/link-preview/components/LinkPreviewContent.svelte
@@ -47,7 +47,7 @@
 		builder,
 		attrs
 	};
-	
+
 	$: updatePositioning({
 		side,
 		align,
diff --git a/src/lib/bits/range-calendar/components/RangeCalendar.svelte b/src/lib/bits/range-calendar/components/RangeCalendar.svelte
index 507e73909..f8931bf55 100644
--- a/src/lib/bits/range-calendar/components/RangeCalendar.svelte
+++ b/src/lib/bits/range-calendar/components/RangeCalendar.svelte
@@ -26,7 +26,12 @@
 
 	const {
 		elements: { calendar },
-		states: { value: localValue, placeholder: localPlaceholder, months, daysOfWeek },
+		states: {
+			value: localValue,
+			placeholder: localPlaceholder,
+			months,
+			daysOfWeek
+		},
 		updateOption,
 		ids
 	} = setCtx({
diff --git a/src/lib/bits/range-calendar/components/RangeCalendarCell.svelte b/src/lib/bits/range-calendar/components/RangeCalendarCell.svelte
index afed5bc9c..10b386c44 100644
--- a/src/lib/bits/range-calendar/components/RangeCalendarCell.svelte
+++ b/src/lib/bits/range-calendar/components/RangeCalendarCell.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
 	import { getCtx, getAttrs } from "../ctx.js";
-	import type { GridBodyCellProps } from "../types.js";
+	import type { CellProps } from "../types.js";
 
-	type $$Props = GridBodyCellProps;
+	type $$Props = CellProps;
 
 	export let date: $$Props["date"];
 	export let asChild: $$Props["asChild"] = false;
diff --git a/src/lib/bits/range-calendar/components/RangeCalendarHeadCell.svelte b/src/lib/bits/range-calendar/components/RangeCalendarHeadCell.svelte
index b11a0f43d..e863b503d 100644
--- a/src/lib/bits/range-calendar/components/RangeCalendarHeadCell.svelte
+++ b/src/lib/bits/range-calendar/components/RangeCalendarHeadCell.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
 	import { getAttrs } from "../ctx.js";
-	import type { GridHeadCellProps } from "../types.js";
+	import type { HeadCellProps } from "../types.js";
 
-	type $$Props = GridHeadCellProps;
+	type $$Props = HeadCellProps;
 	export let asChild: $$Props["asChild"] = false;
 
 	const attrs = getAttrs("head-cell");
diff --git a/src/lib/bits/select/_types.ts b/src/lib/bits/select/_types.ts
index 4acfcd9cd..685b41fb9 100644
--- a/src/lib/bits/select/_types.ts
+++ b/src/lib/bits/select/_types.ts
@@ -43,7 +43,7 @@ type LabelProps = AsChild;
 type ItemProps = Expand<SelectOptionProps & AsChild>;
 type SeparatorProps = AsChild;
 
-type IndicatorProps = AsChild
+type IndicatorProps = AsChild;
 
 type TriggerProps = AsChild;
 
diff --git a/src/routes/docs/sink/+page.svelte b/src/routes/docs/sink/+page.svelte
index 6b2f96f0e..e69de29bb 100644
--- a/src/routes/docs/sink/+page.svelte
+++ b/src/routes/docs/sink/+page.svelte
@@ -1,37 +0,0 @@
-<script lang="ts">
-	import * as Sheet from "@/components/ui/sheet";
-	import * as Button from "@/components/ui/button";
-	import * as Label from "@/components/ui/label";
-	import * as Input from "@/components/ui/input";
-</script>
-
-<Sheet.Root>
-	<Sheet.Trigger asChild let:builder>
-		<Button.Root builders={[builder]} variant="outline">Open</Button.Root>
-	</Sheet.Trigger>
-	<Sheet.Content side="right">
-		<Sheet.Header>
-			<Sheet.Title>Edit profile</Sheet.Title>
-			<Sheet.Description>
-				Make changes to your profile here. Click save when you're done.
-			</Sheet.Description>
-		</Sheet.Header>
-		<div class="grid gap-4 py-4">
-			<div class="grid grid-cols-4 items-center gap-4">
-				<Label.Root for="name" class="text-right">Name</Label.Root>
-				<Input.Root id="name" value="Pedro Duarte" class="col-span-3" />
-			</div>
-			<div class="grid grid-cols-4 items-center gap-4">
-				<Label.Root for="username" class="text-right">Username</Label.Root>
-				<Input.Root id="username" value="@peduarte" class="col-span-3" />
-			</div>
-		</div>
-		<Sheet.Footer>
-			<Sheet.Close asChild let:builder>
-				<Button.Root builders={[builder]} type="submit"
-					>Save changes</Button.Root
-				>
-			</Sheet.Close>
-		</Sheet.Footer>
-	</Sheet.Content>
-</Sheet.Root>

From c34b8126688217ac5a7d14cf43f82c30eb26e1df Mon Sep 17 00:00:00 2001
From: Hunter Johnston <johnstonhuntera@gmail.com>
Date: Sun, 26 Nov 2023 16:55:00 -0500
Subject: [PATCH 139/217] rename things

---
 rename-script.sh                              | 22 +++++
 src/content/api-reference/index.ts            |  8 ++
 ...ontent.svelte => accordion-content.svelte} |  0
 ...nHeader.svelte => accordion-header.svelte} |  0
 ...rdionItem.svelte => accordion-item.svelte} |  0
 ...rigger.svelte => accordion-trigger.svelte} |  0
 .../{Accordion.svelte => accordion.svelte}    |  0
 src/lib/bits/accordion/index.ts               | 24 ++----
 ...tion.svelte => alert-dialog-action.svelte} |  0
 ...ncel.svelte => alert-dialog-cancel.svelte} |  0
 ...ent.svelte => alert-dialog-content.svelte} |  0
 ...svelte => alert-dialog-description.svelte} |  0
 ...lay.svelte => alert-dialog-overlay.svelte} |  0
 ...rtal.svelte => alert-dialog-portal.svelte} |  0
 ...Title.svelte => alert-dialog-title.svelte} |  0
 ...ger.svelte => alert-dialog-trigger.svelte} |  0
 ...AlertDialog.svelte => alert-dialog.svelte} |  0
 src/lib/bits/alert-dialog/index.ts            | 41 +++-------
 ...AspectRatio.svelte => aspect-ratio.svelte} |  0
 src/lib/bits/aspect-ratio/index.ts            |  8 +-
 ...Fallback.svelte => avatar-fallback.svelte} |  0
 ...AvatarImage.svelte => avatar-image.svelte} |  0
 .../{Avatar.svelte => avatar.svelte}          |  0
 src/lib/bits/avatar/index.ts                  | 15 +---
 .../{Button.svelte => button.svelte}          |  0
 src/lib/bits/button/index.ts                  |  3 +-
 ...lendarCell.svelte => calendar-cell.svelte} |  0
 ...lendarDate.svelte => calendar-date.svelte} |  0
 ...dBody.svelte => calendar-grid-body.svelte} |  0
 ...dHead.svelte => calendar-grid-head.svelte} |  0
 ...ridRow.svelte => calendar-grid-row.svelte} |  0
 ...lendarGrid.svelte => calendar-grid.svelte} |  0
 ...dCell.svelte => calendar-head-cell.svelte} |  0
 ...arHeader.svelte => calendar-header.svelte} |  0
 ...Heading.svelte => calendar-heading.svelte} |  0
 ...ton.svelte => calendar-next-button.svelte} |  0
 ...ton.svelte => calendar-prev-button.svelte} |  0
 .../{Calendar.svelte => calendar.svelte}      |  0
 src/lib/bits/calendar/index.ts                | 51 +++---------
 ...cator.svelte => checkbox-indicator.svelte} |  0
 ...kboxInput.svelte => checkbox-input.svelte} |  0
 .../{Checkbox.svelte => checkbox.svelte}      |  0
 src/lib/bits/checkbox/index.ts                | 15 +---
 ...tent.svelte => collapsible-content.svelte} |  0
 ...gger.svelte => collapsible-trigger.svelte} |  0
 ...{Collapsible.svelte => collapsible.svelte} |  0
 src/lib/bits/collapsible/index.ts             | 14 +---
 ...ent.svelte => context-menu-content.svelte} |  0
 ...ger.svelte => context-menu-trigger.svelte} |  0
 ...ContextMenu.svelte => context-menu.svelte} |  0
 src/lib/bits/context-menu/index.ts            | 67 ++++------------
 src/lib/bits/date-field/_types.ts             | 49 ++++++++++++
 .../date-field/components/DateField.svelte    |  0
 .../components/date-field-field.svelte        | 37 +++++++++
 .../components/date-field-input.svelte        | 27 +++++++
 .../components/date-field-label.svelte        | 35 ++++++++
 .../components/date-field-segment.svelte      | 36 +++++++++
 .../date-field/components/date-field.svelte   | 80 +++++++++++++++++++
 src/lib/bits/date-field/ctx.ts                | 28 +++++++
 src/lib/bits/date-field/index.ts              |  7 ++
 src/lib/bits/date-field/types.ts              | 15 ++++
 ...DialogClose.svelte => dialog-close.svelte} |  0
 ...ogContent.svelte => dialog-content.svelte} |  0
 ...ption.svelte => dialog-description.svelte} |  0
 ...ogOverlay.svelte => dialog-overlay.svelte} |  0
 ...alogPortal.svelte => dialog-portal.svelte} |  0
 ...DialogTitle.svelte => dialog-title.svelte} |  0
 ...ogTrigger.svelte => dialog-trigger.svelte} |  0
 .../{Dialog.svelte => dialog.svelte}          |  0
 src/lib/bits/dialog/index.ts                  | 37 ++-------
 src/lib/bits/dropdown-menu/index.ts           | 68 ++++------------
 .../components/{Label.svelte => label.svelte} |  0
 src/lib/bits/label/index.ts                   |  8 +-
 ...Arrow.svelte => link-preview-arrow.svelte} |  0
 ...ent.svelte => link-preview-content.svelte} |  0
 ...ger.svelte => link-preview-trigger.svelte} |  0
 ...LinkPreview.svelte => link-preview.svelte} |  0
 src/lib/bits/link-preview/index.ts            | 21 +----
 .../{MenuArrow.svelte => menu-arrow.svelte}   |  0
 ....svelte => menu-checkbox-indicator.svelte} |  0
 ...xItem.svelte => menu-checkbox-item.svelte} |  0
 ...MenuContent.svelte => menu-content.svelte} |  0
 .../{MenuGroup.svelte => menu-group.svelte}   |  0
 .../{MenuItem.svelte => menu-item.svelte}     |  0
 .../{MenuLabel.svelte => menu-label.svelte}   |  0
 ...ioGroup.svelte => menu-radio-group.svelte} |  0
 ...tor.svelte => menu-radio-indicator.svelte} |  0
 ...adioItem.svelte => menu-radio-item.svelte} |  0
 ...Separator.svelte => menu-separator.svelte} |  0
 ...Content.svelte => menu-sub-content.svelte} |  0
 ...Trigger.svelte => menu-sub-trigger.svelte} |  0
 .../{MenuSub.svelte => menu-sub.svelte}       |  0
 ...MenuTrigger.svelte => menu-trigger.svelte} |  0
 .../components/{Menu.svelte => menu.svelte}   |  0
 src/lib/bits/menu/index.ts                    | 32 ++++----
 ...MenubarMenu.svelte => menubar-menu.svelte} |  0
 .../{MenubarSub.svelte => menubar-sub.svelte} |  0
 ...rTrigger.svelte => menubar-trigger.svelte} |  0
 .../{Menubar.svelte => menubar.svelte}        |  0
 src/lib/bits/menubar/index.ts                 | 72 ++++-------------
 ...poverArrow.svelte => popover-arrow.svelte} |  0
 ...poverClose.svelte => popover-close.svelte} |  0
 ...rContent.svelte => popover-content.svelte} |  0
 ...rTrigger.svelte => popover-trigger.svelte} |  0
 .../{Popover.svelte => popover.svelte}        |  0
 src/lib/bits/popover/index.ts                 | 24 ++----
 .../{Progress.svelte => progress.svelte}      |  0
 src/lib/bits/progress/index.ts                |  4 +-
 ...pInput.svelte => radio-group-input.svelte} |  0
 ...elte => radio-group-item-indicator.svelte} |  0
 ...oupItem.svelte => radio-group-item.svelte} |  0
 .../{RadioGroup.svelte => radio-group.svelte} |  0
 src/lib/bits/radio-group/index.ts             | 20 +----
 ...Cell.svelte => range-calendar-cell.svelte} |  0
 ...Date.svelte => range-calendar-date.svelte} |  0
 ...svelte => range-calendar-grid-body.svelte} |  0
 ...svelte => range-calendar-grid-head.svelte} |  0
 ....svelte => range-calendar-grid-row.svelte} |  0
 ...Grid.svelte => range-calendar-grid.svelte} |  0
 ...svelte => range-calendar-head-cell.svelte} |  0
 ...er.svelte => range-calendar-header.svelte} |  0
 ...g.svelte => range-calendar-heading.svelte} |  0
 ...elte => range-calendar-next-button.svelte} |  0
 ...elte => range-calendar-prev-button.svelte} |  0
 ...eCalendar.svelte => range-calendar.svelte} |  0
 src/lib/bits/range-calendar/index.ts          | 51 +++---------
 ...SelectArrow.svelte => select-arrow.svelte} |  0
 ...ctContent.svelte => select-content.svelte} |  0
 ...SelectGroup.svelte => select-group.svelte} |  0
 ...SelectInput.svelte => select-input.svelte} |  0
 ...or.svelte => select-item-indicator.svelte} |  0
 .../{SelectItem.svelte => select-item.svelte} |  0
 ...SelectLabel.svelte => select-label.svelte} |  0
 ...ctTrigger.svelte => select-trigger.svelte} |  0
 ...SelectValue.svelte => select-value.svelte} |  0
 .../{Select.svelte => select.svelte}          |  0
 src/lib/bits/select/index.ts                  | 48 +++--------
 .../{Separator.svelte => separator.svelte}    |  0
 src/lib/bits/separator/index.ts               |  4 +-
 ...SliderInput.svelte => slider-input.svelte} |  0
 ...SliderRange.svelte => slider-range.svelte} |  0
 ...SliderThumb.svelte => slider-thumb.svelte} |  0
 .../{SliderTick.svelte => slider-tick.svelte} |  0
 .../{Slider.svelte => slider.svelte}          |  0
 src/lib/bits/slider/index.ts                  | 24 ++----
 ...SwitchInput.svelte => switch-input.svelte} |  0
 ...SwitchThumb.svelte => switch-thumb.svelte} |  0
 .../{Switch.svelte => switch.svelte}          |  2 +-
 src/lib/bits/switch/index.ts                  | 15 +---
 ...TabsContent.svelte => tabs-content.svelte} |  0
 .../{TabsList.svelte => tabs-list.svelte}     |  0
 ...TabsTrigger.svelte => tabs-trigger.svelte} |  0
 .../components/{Tabs.svelte => tabs.svelte}   |  0
 src/lib/bits/tabs/index.ts                    | 19 +----
 ...upItem.svelte => toggle-group-item.svelte} |  0
 ...ToggleGroup.svelte => toggle-group.svelte} |  0
 src/lib/bits/toggle-group/index.ts            | 11 +--
 .../{Toggle.svelte => toggle.svelte}          |  0
 src/lib/bits/toggle/index.ts                  |  8 +-
 ...oltipArrow.svelte => tooltip-arrow.svelte} |  0
 ...pContent.svelte => tooltip-content.svelte} |  0
 ...pTrigger.svelte => tooltip-trigger.svelte} |  0
 .../{Tooltip.svelte => tooltip.svelte}        |  0
 src/lib/bits/tooltip/index.ts                 | 19 +----
 src/lib/internal/types.ts                     | 10 +++
 src/lib/shared/index.ts                       | 11 +++
 166 files changed, 535 insertions(+), 555 deletions(-)
 create mode 100755 rename-script.sh
 rename src/lib/bits/accordion/components/{AccordionContent.svelte => accordion-content.svelte} (100%)
 rename src/lib/bits/accordion/components/{AccordionHeader.svelte => accordion-header.svelte} (100%)
 rename src/lib/bits/accordion/components/{AccordionItem.svelte => accordion-item.svelte} (100%)
 rename src/lib/bits/accordion/components/{AccordionTrigger.svelte => accordion-trigger.svelte} (100%)
 rename src/lib/bits/accordion/components/{Accordion.svelte => accordion.svelte} (100%)
 rename src/lib/bits/alert-dialog/components/{AlertDialogAction.svelte => alert-dialog-action.svelte} (100%)
 rename src/lib/bits/alert-dialog/components/{AlertDialogCancel.svelte => alert-dialog-cancel.svelte} (100%)
 rename src/lib/bits/alert-dialog/components/{AlertDialogContent.svelte => alert-dialog-content.svelte} (100%)
 rename src/lib/bits/alert-dialog/components/{AlertDialogDescription.svelte => alert-dialog-description.svelte} (100%)
 rename src/lib/bits/alert-dialog/components/{AlertDialogOverlay.svelte => alert-dialog-overlay.svelte} (100%)
 rename src/lib/bits/alert-dialog/components/{AlertDialogPortal.svelte => alert-dialog-portal.svelte} (100%)
 rename src/lib/bits/alert-dialog/components/{AlertDialogTitle.svelte => alert-dialog-title.svelte} (100%)
 rename src/lib/bits/alert-dialog/components/{AlertDialogTrigger.svelte => alert-dialog-trigger.svelte} (100%)
 rename src/lib/bits/alert-dialog/components/{AlertDialog.svelte => alert-dialog.svelte} (100%)
 rename src/lib/bits/aspect-ratio/components/{AspectRatio.svelte => aspect-ratio.svelte} (100%)
 rename src/lib/bits/avatar/components/{AvatarFallback.svelte => avatar-fallback.svelte} (100%)
 rename src/lib/bits/avatar/components/{AvatarImage.svelte => avatar-image.svelte} (100%)
 rename src/lib/bits/avatar/components/{Avatar.svelte => avatar.svelte} (100%)
 rename src/lib/bits/button/components/{Button.svelte => button.svelte} (100%)
 rename src/lib/bits/calendar/components/{CalendarCell.svelte => calendar-cell.svelte} (100%)
 rename src/lib/bits/calendar/components/{CalendarDate.svelte => calendar-date.svelte} (100%)
 rename src/lib/bits/calendar/components/{CalendarGridBody.svelte => calendar-grid-body.svelte} (100%)
 rename src/lib/bits/calendar/components/{CalendarGridHead.svelte => calendar-grid-head.svelte} (100%)
 rename src/lib/bits/calendar/components/{CalendarGridRow.svelte => calendar-grid-row.svelte} (100%)
 rename src/lib/bits/calendar/components/{CalendarGrid.svelte => calendar-grid.svelte} (100%)
 rename src/lib/bits/calendar/components/{CalendarHeadCell.svelte => calendar-head-cell.svelte} (100%)
 rename src/lib/bits/calendar/components/{CalendarHeader.svelte => calendar-header.svelte} (100%)
 rename src/lib/bits/calendar/components/{CalendarHeading.svelte => calendar-heading.svelte} (100%)
 rename src/lib/bits/calendar/components/{CalendarNextButton.svelte => calendar-next-button.svelte} (100%)
 rename src/lib/bits/calendar/components/{CalendarPrevButton.svelte => calendar-prev-button.svelte} (100%)
 rename src/lib/bits/calendar/components/{Calendar.svelte => calendar.svelte} (100%)
 rename src/lib/bits/checkbox/components/{CheckboxIndicator.svelte => checkbox-indicator.svelte} (100%)
 rename src/lib/bits/checkbox/components/{CheckboxInput.svelte => checkbox-input.svelte} (100%)
 rename src/lib/bits/checkbox/components/{Checkbox.svelte => checkbox.svelte} (100%)
 rename src/lib/bits/collapsible/components/{CollapsibleContent.svelte => collapsible-content.svelte} (100%)
 rename src/lib/bits/collapsible/components/{CollapsibleTrigger.svelte => collapsible-trigger.svelte} (100%)
 rename src/lib/bits/collapsible/components/{Collapsible.svelte => collapsible.svelte} (100%)
 rename src/lib/bits/context-menu/components/{ContextMenuContent.svelte => context-menu-content.svelte} (100%)
 rename src/lib/bits/context-menu/components/{ContextMenuTrigger.svelte => context-menu-trigger.svelte} (100%)
 rename src/lib/bits/context-menu/components/{ContextMenu.svelte => context-menu.svelte} (100%)
 delete mode 100644 src/lib/bits/date-field/components/DateField.svelte
 create mode 100644 src/lib/bits/date-field/components/date-field-field.svelte
 create mode 100644 src/lib/bits/date-field/components/date-field-input.svelte
 create mode 100644 src/lib/bits/date-field/components/date-field-label.svelte
 create mode 100644 src/lib/bits/date-field/components/date-field-segment.svelte
 create mode 100644 src/lib/bits/date-field/components/date-field.svelte
 rename src/lib/bits/dialog/components/{DialogClose.svelte => dialog-close.svelte} (100%)
 rename src/lib/bits/dialog/components/{DialogContent.svelte => dialog-content.svelte} (100%)
 rename src/lib/bits/dialog/components/{DialogDescription.svelte => dialog-description.svelte} (100%)
 rename src/lib/bits/dialog/components/{DialogOverlay.svelte => dialog-overlay.svelte} (100%)
 rename src/lib/bits/dialog/components/{DialogPortal.svelte => dialog-portal.svelte} (100%)
 rename src/lib/bits/dialog/components/{DialogTitle.svelte => dialog-title.svelte} (100%)
 rename src/lib/bits/dialog/components/{DialogTrigger.svelte => dialog-trigger.svelte} (100%)
 rename src/lib/bits/dialog/components/{Dialog.svelte => dialog.svelte} (100%)
 rename src/lib/bits/label/components/{Label.svelte => label.svelte} (100%)
 rename src/lib/bits/link-preview/components/{LinkPreviewArrow.svelte => link-preview-arrow.svelte} (100%)
 rename src/lib/bits/link-preview/components/{LinkPreviewContent.svelte => link-preview-content.svelte} (100%)
 rename src/lib/bits/link-preview/components/{LinkPreviewTrigger.svelte => link-preview-trigger.svelte} (100%)
 rename src/lib/bits/link-preview/components/{LinkPreview.svelte => link-preview.svelte} (100%)
 rename src/lib/bits/menu/components/{MenuArrow.svelte => menu-arrow.svelte} (100%)
 rename src/lib/bits/menu/components/{MenuCheckboxIndicator.svelte => menu-checkbox-indicator.svelte} (100%)
 rename src/lib/bits/menu/components/{MenuCheckboxItem.svelte => menu-checkbox-item.svelte} (100%)
 rename src/lib/bits/menu/components/{MenuContent.svelte => menu-content.svelte} (100%)
 rename src/lib/bits/menu/components/{MenuGroup.svelte => menu-group.svelte} (100%)
 rename src/lib/bits/menu/components/{MenuItem.svelte => menu-item.svelte} (100%)
 rename src/lib/bits/menu/components/{MenuLabel.svelte => menu-label.svelte} (100%)
 rename src/lib/bits/menu/components/{MenuRadioGroup.svelte => menu-radio-group.svelte} (100%)
 rename src/lib/bits/menu/components/{MenuRadioIndicator.svelte => menu-radio-indicator.svelte} (100%)
 rename src/lib/bits/menu/components/{MenuRadioItem.svelte => menu-radio-item.svelte} (100%)
 rename src/lib/bits/menu/components/{MenuSeparator.svelte => menu-separator.svelte} (100%)
 rename src/lib/bits/menu/components/{MenuSubContent.svelte => menu-sub-content.svelte} (100%)
 rename src/lib/bits/menu/components/{MenuSubTrigger.svelte => menu-sub-trigger.svelte} (100%)
 rename src/lib/bits/menu/components/{MenuSub.svelte => menu-sub.svelte} (100%)
 rename src/lib/bits/menu/components/{MenuTrigger.svelte => menu-trigger.svelte} (100%)
 rename src/lib/bits/menu/components/{Menu.svelte => menu.svelte} (100%)
 rename src/lib/bits/menubar/components/{MenubarMenu.svelte => menubar-menu.svelte} (100%)
 rename src/lib/bits/menubar/components/{MenubarSub.svelte => menubar-sub.svelte} (100%)
 rename src/lib/bits/menubar/components/{MenubarTrigger.svelte => menubar-trigger.svelte} (100%)
 rename src/lib/bits/menubar/components/{Menubar.svelte => menubar.svelte} (100%)
 rename src/lib/bits/popover/components/{PopoverArrow.svelte => popover-arrow.svelte} (100%)
 rename src/lib/bits/popover/components/{PopoverClose.svelte => popover-close.svelte} (100%)
 rename src/lib/bits/popover/components/{PopoverContent.svelte => popover-content.svelte} (100%)
 rename src/lib/bits/popover/components/{PopoverTrigger.svelte => popover-trigger.svelte} (100%)
 rename src/lib/bits/popover/components/{Popover.svelte => popover.svelte} (100%)
 rename src/lib/bits/progress/components/{Progress.svelte => progress.svelte} (100%)
 rename src/lib/bits/radio-group/components/{RadioGroupInput.svelte => radio-group-input.svelte} (100%)
 rename src/lib/bits/radio-group/components/{RadioGroupItemIndicator.svelte => radio-group-item-indicator.svelte} (100%)
 rename src/lib/bits/radio-group/components/{RadioGroupItem.svelte => radio-group-item.svelte} (100%)
 rename src/lib/bits/radio-group/components/{RadioGroup.svelte => radio-group.svelte} (100%)
 rename src/lib/bits/range-calendar/components/{RangeCalendarCell.svelte => range-calendar-cell.svelte} (100%)
 rename src/lib/bits/range-calendar/components/{RangeCalendarDate.svelte => range-calendar-date.svelte} (100%)
 rename src/lib/bits/range-calendar/components/{RangeCalendarGridBody.svelte => range-calendar-grid-body.svelte} (100%)
 rename src/lib/bits/range-calendar/components/{RangeCalendarGridHead.svelte => range-calendar-grid-head.svelte} (100%)
 rename src/lib/bits/range-calendar/components/{RangeCalendarGridRow.svelte => range-calendar-grid-row.svelte} (100%)
 rename src/lib/bits/range-calendar/components/{RangeCalendarGrid.svelte => range-calendar-grid.svelte} (100%)
 rename src/lib/bits/range-calendar/components/{RangeCalendarHeadCell.svelte => range-calendar-head-cell.svelte} (100%)
 rename src/lib/bits/range-calendar/components/{RangeCalendarHeader.svelte => range-calendar-header.svelte} (100%)
 rename src/lib/bits/range-calendar/components/{RangeCalendarHeading.svelte => range-calendar-heading.svelte} (100%)
 rename src/lib/bits/range-calendar/components/{RangeCalendarNextButton.svelte => range-calendar-next-button.svelte} (100%)
 rename src/lib/bits/range-calendar/components/{RangeCalendarPrevButton.svelte => range-calendar-prev-button.svelte} (100%)
 rename src/lib/bits/range-calendar/components/{RangeCalendar.svelte => range-calendar.svelte} (100%)
 rename src/lib/bits/select/components/{SelectArrow.svelte => select-arrow.svelte} (100%)
 rename src/lib/bits/select/components/{SelectContent.svelte => select-content.svelte} (100%)
 rename src/lib/bits/select/components/{SelectGroup.svelte => select-group.svelte} (100%)
 rename src/lib/bits/select/components/{SelectInput.svelte => select-input.svelte} (100%)
 rename src/lib/bits/select/components/{SelectItemIndicator.svelte => select-item-indicator.svelte} (100%)
 rename src/lib/bits/select/components/{SelectItem.svelte => select-item.svelte} (100%)
 rename src/lib/bits/select/components/{SelectLabel.svelte => select-label.svelte} (100%)
 rename src/lib/bits/select/components/{SelectTrigger.svelte => select-trigger.svelte} (100%)
 rename src/lib/bits/select/components/{SelectValue.svelte => select-value.svelte} (100%)
 rename src/lib/bits/select/components/{Select.svelte => select.svelte} (100%)
 rename src/lib/bits/separator/components/{Separator.svelte => separator.svelte} (100%)
 rename src/lib/bits/slider/components/{SliderInput.svelte => slider-input.svelte} (100%)
 rename src/lib/bits/slider/components/{SliderRange.svelte => slider-range.svelte} (100%)
 rename src/lib/bits/slider/components/{SliderThumb.svelte => slider-thumb.svelte} (100%)
 rename src/lib/bits/slider/components/{SliderTick.svelte => slider-tick.svelte} (100%)
 rename src/lib/bits/slider/components/{Slider.svelte => slider.svelte} (100%)
 rename src/lib/bits/switch/components/{SwitchInput.svelte => switch-input.svelte} (100%)
 rename src/lib/bits/switch/components/{SwitchThumb.svelte => switch-thumb.svelte} (100%)
 rename src/lib/bits/switch/components/{Switch.svelte => switch.svelte} (97%)
 rename src/lib/bits/tabs/components/{TabsContent.svelte => tabs-content.svelte} (100%)
 rename src/lib/bits/tabs/components/{TabsList.svelte => tabs-list.svelte} (100%)
 rename src/lib/bits/tabs/components/{TabsTrigger.svelte => tabs-trigger.svelte} (100%)
 rename src/lib/bits/tabs/components/{Tabs.svelte => tabs.svelte} (100%)
 rename src/lib/bits/toggle-group/components/{ToggleGroupItem.svelte => toggle-group-item.svelte} (100%)
 rename src/lib/bits/toggle-group/components/{ToggleGroup.svelte => toggle-group.svelte} (100%)
 rename src/lib/bits/toggle/components/{Toggle.svelte => toggle.svelte} (100%)
 rename src/lib/bits/tooltip/components/{TooltipArrow.svelte => tooltip-arrow.svelte} (100%)
 rename src/lib/bits/tooltip/components/{TooltipContent.svelte => tooltip-content.svelte} (100%)
 rename src/lib/bits/tooltip/components/{TooltipTrigger.svelte => tooltip-trigger.svelte} (100%)
 rename src/lib/bits/tooltip/components/{Tooltip.svelte => tooltip.svelte} (100%)

diff --git a/rename-script.sh b/rename-script.sh
new file mode 100755
index 000000000..7a4920588
--- /dev/null
+++ b/rename-script.sh
@@ -0,0 +1,22 @@
+#!/bin/bash
+
+# Find all .svelte files in the current directory
+files=$(find . -maxdepth 1 -type f -name '*.svelte')
+
+# Loop through each found file
+for file in $files; do
+    # Extract the filename without the extension
+    filename=$(basename -- "$file")
+    filename_noext="${filename%.*}"
+
+    # Convert PascalCase to kebab-case using sed
+    new_filename=$(echo "$filename_noext" | sed 's/\([^A-Z]\)\([A-Z]\)/\1-\2/g; s/\([A-Z]\)\([A-Z][a-z]\)/\1-\2/g; s/\([a-z0-9]\)\([A-Z]\)$/\1-\2/g' | tr '[:upper:]' '[:lower:]')
+
+    # Rename the file if needed using git mv
+    if [ "$filename_noext" != "$new_filename" ]; then
+        git mv "$file" "$(dirname "$file")/$new_filename.svelte"
+        echo "Renamed $filename to $new_filename.svelte"
+    else
+        echo "Skipped $filename (already in kebab-case)"
+    fi
+done
\ No newline at end of file
diff --git a/src/content/api-reference/index.ts b/src/content/api-reference/index.ts
index 4df0a9aec..2e15f4259 100644
--- a/src/content/api-reference/index.ts
+++ b/src/content/api-reference/index.ts
@@ -36,6 +36,10 @@ export const bits = [
 	"checkbox",
 	"collapsible",
 	"context-menu",
+	"date-field",
+	"date-picker",
+	"date-range-field",
+	"date-range-picker",
 	"dialog",
 	"dropdown-menu",
 	"link-preview",
@@ -73,6 +77,10 @@ export const apiSchemas: Record<Bit, APISchema[]> = {
 	checkbox,
 	collapsible,
 	"context-menu": contextMenu,
+	"date-field": [],
+	"date-picker": [],
+	"date-range-field": [],
+	"date-range-picker": [],
 	dialog,
 	"dropdown-menu": dropdownMenu,
 	label,
diff --git a/src/lib/bits/accordion/components/AccordionContent.svelte b/src/lib/bits/accordion/components/accordion-content.svelte
similarity index 100%
rename from src/lib/bits/accordion/components/AccordionContent.svelte
rename to src/lib/bits/accordion/components/accordion-content.svelte
diff --git a/src/lib/bits/accordion/components/AccordionHeader.svelte b/src/lib/bits/accordion/components/accordion-header.svelte
similarity index 100%
rename from src/lib/bits/accordion/components/AccordionHeader.svelte
rename to src/lib/bits/accordion/components/accordion-header.svelte
diff --git a/src/lib/bits/accordion/components/AccordionItem.svelte b/src/lib/bits/accordion/components/accordion-item.svelte
similarity index 100%
rename from src/lib/bits/accordion/components/AccordionItem.svelte
rename to src/lib/bits/accordion/components/accordion-item.svelte
diff --git a/src/lib/bits/accordion/components/AccordionTrigger.svelte b/src/lib/bits/accordion/components/accordion-trigger.svelte
similarity index 100%
rename from src/lib/bits/accordion/components/AccordionTrigger.svelte
rename to src/lib/bits/accordion/components/accordion-trigger.svelte
diff --git a/src/lib/bits/accordion/components/Accordion.svelte b/src/lib/bits/accordion/components/accordion.svelte
similarity index 100%
rename from src/lib/bits/accordion/components/Accordion.svelte
rename to src/lib/bits/accordion/components/accordion.svelte
diff --git a/src/lib/bits/accordion/index.ts b/src/lib/bits/accordion/index.ts
index aa3793421..dbcb289d5 100644
--- a/src/lib/bits/accordion/index.ts
+++ b/src/lib/bits/accordion/index.ts
@@ -1,21 +1,7 @@
-import Root from "./components/Accordion.svelte";
-import Item from "./components/AccordionItem.svelte";
-import Header from "./components/AccordionHeader.svelte";
-import Trigger from "./components/AccordionTrigger.svelte";
-import Content from "./components/AccordionContent.svelte";
-
-export {
-	Root,
-	Item,
-	Header,
-	Trigger,
-	Content,
-	//
-	Root as Accordion,
-	Item as AccordionItem,
-	Header as AccordionHeader,
-	Trigger as AccordionTrigger,
-	Content as AccordionContent
-};
+export { default as Root } from "./components/accordion.svelte";
+export { default as Item } from "./components/accordion-item.svelte";
+export { default as Header } from "./components/accordion-header.svelte";
+export { default as Trigger } from "./components/accordion-trigger.svelte";
+export { default as Content } from "./components/accordion-content.svelte";
 
 export * from "./types.js";
diff --git a/src/lib/bits/alert-dialog/components/AlertDialogAction.svelte b/src/lib/bits/alert-dialog/components/alert-dialog-action.svelte
similarity index 100%
rename from src/lib/bits/alert-dialog/components/AlertDialogAction.svelte
rename to src/lib/bits/alert-dialog/components/alert-dialog-action.svelte
diff --git a/src/lib/bits/alert-dialog/components/AlertDialogCancel.svelte b/src/lib/bits/alert-dialog/components/alert-dialog-cancel.svelte
similarity index 100%
rename from src/lib/bits/alert-dialog/components/AlertDialogCancel.svelte
rename to src/lib/bits/alert-dialog/components/alert-dialog-cancel.svelte
diff --git a/src/lib/bits/alert-dialog/components/AlertDialogContent.svelte b/src/lib/bits/alert-dialog/components/alert-dialog-content.svelte
similarity index 100%
rename from src/lib/bits/alert-dialog/components/AlertDialogContent.svelte
rename to src/lib/bits/alert-dialog/components/alert-dialog-content.svelte
diff --git a/src/lib/bits/alert-dialog/components/AlertDialogDescription.svelte b/src/lib/bits/alert-dialog/components/alert-dialog-description.svelte
similarity index 100%
rename from src/lib/bits/alert-dialog/components/AlertDialogDescription.svelte
rename to src/lib/bits/alert-dialog/components/alert-dialog-description.svelte
diff --git a/src/lib/bits/alert-dialog/components/AlertDialogOverlay.svelte b/src/lib/bits/alert-dialog/components/alert-dialog-overlay.svelte
similarity index 100%
rename from src/lib/bits/alert-dialog/components/AlertDialogOverlay.svelte
rename to src/lib/bits/alert-dialog/components/alert-dialog-overlay.svelte
diff --git a/src/lib/bits/alert-dialog/components/AlertDialogPortal.svelte b/src/lib/bits/alert-dialog/components/alert-dialog-portal.svelte
similarity index 100%
rename from src/lib/bits/alert-dialog/components/AlertDialogPortal.svelte
rename to src/lib/bits/alert-dialog/components/alert-dialog-portal.svelte
diff --git a/src/lib/bits/alert-dialog/components/AlertDialogTitle.svelte b/src/lib/bits/alert-dialog/components/alert-dialog-title.svelte
similarity index 100%
rename from src/lib/bits/alert-dialog/components/AlertDialogTitle.svelte
rename to src/lib/bits/alert-dialog/components/alert-dialog-title.svelte
diff --git a/src/lib/bits/alert-dialog/components/AlertDialogTrigger.svelte b/src/lib/bits/alert-dialog/components/alert-dialog-trigger.svelte
similarity index 100%
rename from src/lib/bits/alert-dialog/components/AlertDialogTrigger.svelte
rename to src/lib/bits/alert-dialog/components/alert-dialog-trigger.svelte
diff --git a/src/lib/bits/alert-dialog/components/AlertDialog.svelte b/src/lib/bits/alert-dialog/components/alert-dialog.svelte
similarity index 100%
rename from src/lib/bits/alert-dialog/components/AlertDialog.svelte
rename to src/lib/bits/alert-dialog/components/alert-dialog.svelte
diff --git a/src/lib/bits/alert-dialog/index.ts b/src/lib/bits/alert-dialog/index.ts
index 044e0c05a..b3a059465 100644
--- a/src/lib/bits/alert-dialog/index.ts
+++ b/src/lib/bits/alert-dialog/index.ts
@@ -1,34 +1,11 @@
-import Root from "./components/AlertDialog.svelte";
-import Title from "./components/AlertDialogTitle.svelte";
-import Action from "./components/AlertDialogAction.svelte";
-import Cancel from "./components/AlertDialogCancel.svelte";
-import Portal from "./components/AlertDialogPortal.svelte";
-import Content from "./components/AlertDialogContent.svelte";
-import Overlay from "./components/AlertDialogOverlay.svelte";
-import Trigger from "./components/AlertDialogTrigger.svelte";
-import Description from "./components/AlertDialogDescription.svelte";
-
-export {
-	Root,
-	Title,
-	Action,
-	Cancel,
-	Portal,
-	Content,
-	Overlay,
-	Trigger,
-	Description,
-
-	//
-	Root as AlertDialog,
-	Title as AlertDialogTitle,
-	Action as AlertDialogAction,
-	Cancel as AlertDialogCancel,
-	Portal as AlertDialogPortal,
-	Content as AlertDialogContent,
-	Overlay as AlertDialogOverlay,
-	Trigger as AlertDialogTrigger,
-	Description as AlertDialogDescription
-};
+export { default as Root } from "./components/alert-dialog.svelte";
+export { default as Title } from "./components/alert-dialog-title.svelte";
+export { default as Action } from "./components/alert-dialog-action.svelte";
+export { default as Cancel } from "./components/alert-dialog-cancel.svelte";
+export { default as Portal } from "./components/alert-dialog-portal.svelte";
+export { default as Content } from "./components/alert-dialog-content.svelte";
+export { default as Overlay } from "./components/alert-dialog-overlay.svelte";
+export { default as Trigger } from "./components/alert-dialog-trigger.svelte";
+export { default as Description } from "./components/alert-dialog-description.svelte";
 
 export * from "./types.js";
diff --git a/src/lib/bits/aspect-ratio/components/AspectRatio.svelte b/src/lib/bits/aspect-ratio/components/aspect-ratio.svelte
similarity index 100%
rename from src/lib/bits/aspect-ratio/components/AspectRatio.svelte
rename to src/lib/bits/aspect-ratio/components/aspect-ratio.svelte
diff --git a/src/lib/bits/aspect-ratio/index.ts b/src/lib/bits/aspect-ratio/index.ts
index c0bb796ec..cbc60338c 100644
--- a/src/lib/bits/aspect-ratio/index.ts
+++ b/src/lib/bits/aspect-ratio/index.ts
@@ -1,8 +1,2 @@
-import Root from "./components/AspectRatio.svelte";
-
-export {
-	Root,
-	//
-	Root as AspectRatio
-};
+export { default as Root } from "./components/aspect-ratio.svelte";
 export * from "./types.js";
diff --git a/src/lib/bits/avatar/components/AvatarFallback.svelte b/src/lib/bits/avatar/components/avatar-fallback.svelte
similarity index 100%
rename from src/lib/bits/avatar/components/AvatarFallback.svelte
rename to src/lib/bits/avatar/components/avatar-fallback.svelte
diff --git a/src/lib/bits/avatar/components/AvatarImage.svelte b/src/lib/bits/avatar/components/avatar-image.svelte
similarity index 100%
rename from src/lib/bits/avatar/components/AvatarImage.svelte
rename to src/lib/bits/avatar/components/avatar-image.svelte
diff --git a/src/lib/bits/avatar/components/Avatar.svelte b/src/lib/bits/avatar/components/avatar.svelte
similarity index 100%
rename from src/lib/bits/avatar/components/Avatar.svelte
rename to src/lib/bits/avatar/components/avatar.svelte
diff --git a/src/lib/bits/avatar/index.ts b/src/lib/bits/avatar/index.ts
index c6f1174d5..004c7d710 100644
--- a/src/lib/bits/avatar/index.ts
+++ b/src/lib/bits/avatar/index.ts
@@ -1,14 +1,5 @@
-import Root from "./components/Avatar.svelte";
-import Image from "./components/AvatarImage.svelte";
-import Fallback from "./components/AvatarFallback.svelte";
+export { default as Root } from "./components/avatar.svelte";
+export { default as Image } from "./components/avatar-image.svelte";
+export { default as Fallback } from "./components/avatar-fallback.svelte";
 
-export {
-	Root,
-	Image,
-	Fallback,
-	//
-	Root as Avatar,
-	Image as AvatarImage,
-	Fallback as AvatarFallback
-};
 export * from "./types.js";
diff --git a/src/lib/bits/button/components/Button.svelte b/src/lib/bits/button/components/button.svelte
similarity index 100%
rename from src/lib/bits/button/components/Button.svelte
rename to src/lib/bits/button/components/button.svelte
diff --git a/src/lib/bits/button/index.ts b/src/lib/bits/button/index.ts
index 9e4ebfa7f..01d4c94ae 100644
--- a/src/lib/bits/button/index.ts
+++ b/src/lib/bits/button/index.ts
@@ -1,4 +1,3 @@
-import Root from "./components/Button.svelte";
+export { default as Root } from "./components/button.svelte";
 
-export { Root, Root as Button };
 export * from "./types.js";
diff --git a/src/lib/bits/calendar/components/CalendarCell.svelte b/src/lib/bits/calendar/components/calendar-cell.svelte
similarity index 100%
rename from src/lib/bits/calendar/components/CalendarCell.svelte
rename to src/lib/bits/calendar/components/calendar-cell.svelte
diff --git a/src/lib/bits/calendar/components/CalendarDate.svelte b/src/lib/bits/calendar/components/calendar-date.svelte
similarity index 100%
rename from src/lib/bits/calendar/components/CalendarDate.svelte
rename to src/lib/bits/calendar/components/calendar-date.svelte
diff --git a/src/lib/bits/calendar/components/CalendarGridBody.svelte b/src/lib/bits/calendar/components/calendar-grid-body.svelte
similarity index 100%
rename from src/lib/bits/calendar/components/CalendarGridBody.svelte
rename to src/lib/bits/calendar/components/calendar-grid-body.svelte
diff --git a/src/lib/bits/calendar/components/CalendarGridHead.svelte b/src/lib/bits/calendar/components/calendar-grid-head.svelte
similarity index 100%
rename from src/lib/bits/calendar/components/CalendarGridHead.svelte
rename to src/lib/bits/calendar/components/calendar-grid-head.svelte
diff --git a/src/lib/bits/calendar/components/CalendarGridRow.svelte b/src/lib/bits/calendar/components/calendar-grid-row.svelte
similarity index 100%
rename from src/lib/bits/calendar/components/CalendarGridRow.svelte
rename to src/lib/bits/calendar/components/calendar-grid-row.svelte
diff --git a/src/lib/bits/calendar/components/CalendarGrid.svelte b/src/lib/bits/calendar/components/calendar-grid.svelte
similarity index 100%
rename from src/lib/bits/calendar/components/CalendarGrid.svelte
rename to src/lib/bits/calendar/components/calendar-grid.svelte
diff --git a/src/lib/bits/calendar/components/CalendarHeadCell.svelte b/src/lib/bits/calendar/components/calendar-head-cell.svelte
similarity index 100%
rename from src/lib/bits/calendar/components/CalendarHeadCell.svelte
rename to src/lib/bits/calendar/components/calendar-head-cell.svelte
diff --git a/src/lib/bits/calendar/components/CalendarHeader.svelte b/src/lib/bits/calendar/components/calendar-header.svelte
similarity index 100%
rename from src/lib/bits/calendar/components/CalendarHeader.svelte
rename to src/lib/bits/calendar/components/calendar-header.svelte
diff --git a/src/lib/bits/calendar/components/CalendarHeading.svelte b/src/lib/bits/calendar/components/calendar-heading.svelte
similarity index 100%
rename from src/lib/bits/calendar/components/CalendarHeading.svelte
rename to src/lib/bits/calendar/components/calendar-heading.svelte
diff --git a/src/lib/bits/calendar/components/CalendarNextButton.svelte b/src/lib/bits/calendar/components/calendar-next-button.svelte
similarity index 100%
rename from src/lib/bits/calendar/components/CalendarNextButton.svelte
rename to src/lib/bits/calendar/components/calendar-next-button.svelte
diff --git a/src/lib/bits/calendar/components/CalendarPrevButton.svelte b/src/lib/bits/calendar/components/calendar-prev-button.svelte
similarity index 100%
rename from src/lib/bits/calendar/components/CalendarPrevButton.svelte
rename to src/lib/bits/calendar/components/calendar-prev-button.svelte
diff --git a/src/lib/bits/calendar/components/Calendar.svelte b/src/lib/bits/calendar/components/calendar.svelte
similarity index 100%
rename from src/lib/bits/calendar/components/Calendar.svelte
rename to src/lib/bits/calendar/components/calendar.svelte
diff --git a/src/lib/bits/calendar/index.ts b/src/lib/bits/calendar/index.ts
index 6ccf5a392..4bd3cadfa 100644
--- a/src/lib/bits/calendar/index.ts
+++ b/src/lib/bits/calendar/index.ts
@@ -1,41 +1,14 @@
-import Root from "./components/Calendar.svelte";
-import Date from "./components/CalendarDate.svelte";
-import Grid from "./components/CalendarGrid.svelte";
-import GridBody from "./components/CalendarGridBody.svelte";
-import Cell from "./components/CalendarCell.svelte";
-import GridHead from "./components/CalendarGridHead.svelte";
-import HeadCell from "./components/CalendarHeadCell.svelte";
-import GridRow from "./components/CalendarGridRow.svelte";
-import Header from "./components/CalendarHeader.svelte";
-import Heading from "./components/CalendarHeading.svelte";
-import NextButton from "./components/CalendarNextButton.svelte";
-import PrevButton from "./components/CalendarPrevButton.svelte";
+export { default as Root } from "./components/calendar.svelte";
+export { default as Date } from "./components/calendar-date.svelte";
+export { default as Grid } from "./components/calendar-grid.svelte";
+export { default as GridBody } from "./components/calendar-grid-body.svelte";
+export { default as Cell } from "./components/calendar-cell.svelte";
+export { default as GridHead } from "./components/calendar-grid-head.svelte";
+export { default as HeadCell } from "./components/calendar-head-cell.svelte";
+export { default as GridRow } from "./components/calendar-grid-row.svelte";
+export { default as Header } from "./components/calendar-header.svelte";
+export { default as Heading } from "./components/calendar-heading.svelte";
+export { default as NextButton } from "./components/calendar-next-button.svelte";
+export { default as PrevButton } from "./components/calendar-prev-button.svelte";
 
-export {
-	Root,
-	Date,
-	Grid,
-	GridBody,
-	Cell,
-	GridHead,
-	HeadCell,
-	GridRow,
-	Header,
-	Heading,
-	NextButton,
-	PrevButton,
-	//
-	Root as Calendar,
-	Date as CalendarDate,
-	Grid as CalendarGrid,
-	GridBody as CalendarGridBody,
-	Cell as CalendarGridBodyCell,
-	GridHead as CalendarGridHead,
-	HeadCell as CalendarGridHeadCell,
-	GridRow as CalendarGridRow,
-	Header as CalendarHeader,
-	Heading as CalendarHeading,
-	NextButton as CalendarNextButton,
-	PrevButton as CalendarPrevButton
-};
 export * from "./types.js";
diff --git a/src/lib/bits/checkbox/components/CheckboxIndicator.svelte b/src/lib/bits/checkbox/components/checkbox-indicator.svelte
similarity index 100%
rename from src/lib/bits/checkbox/components/CheckboxIndicator.svelte
rename to src/lib/bits/checkbox/components/checkbox-indicator.svelte
diff --git a/src/lib/bits/checkbox/components/CheckboxInput.svelte b/src/lib/bits/checkbox/components/checkbox-input.svelte
similarity index 100%
rename from src/lib/bits/checkbox/components/CheckboxInput.svelte
rename to src/lib/bits/checkbox/components/checkbox-input.svelte
diff --git a/src/lib/bits/checkbox/components/Checkbox.svelte b/src/lib/bits/checkbox/components/checkbox.svelte
similarity index 100%
rename from src/lib/bits/checkbox/components/Checkbox.svelte
rename to src/lib/bits/checkbox/components/checkbox.svelte
diff --git a/src/lib/bits/checkbox/index.ts b/src/lib/bits/checkbox/index.ts
index 287830de3..071da44c4 100644
--- a/src/lib/bits/checkbox/index.ts
+++ b/src/lib/bits/checkbox/index.ts
@@ -1,14 +1,5 @@
-import Root from "./components/Checkbox.svelte";
-import Indicator from "./components/CheckboxIndicator.svelte";
-import Input from "./components/CheckboxInput.svelte";
+export { default as Root } from "./components/checkbox.svelte";
+export { default as Indicator } from "./components/checkbox-indicator.svelte";
+export { default as Input } from "./components/checkbox-input.svelte";
 
-export {
-	Root,
-	Indicator,
-	Input,
-	//
-	Root as Checkbox,
-	Indicator as CheckboxIndicator,
-	Input as CheckboxInput
-};
 export * from "./types.js";
diff --git a/src/lib/bits/collapsible/components/CollapsibleContent.svelte b/src/lib/bits/collapsible/components/collapsible-content.svelte
similarity index 100%
rename from src/lib/bits/collapsible/components/CollapsibleContent.svelte
rename to src/lib/bits/collapsible/components/collapsible-content.svelte
diff --git a/src/lib/bits/collapsible/components/CollapsibleTrigger.svelte b/src/lib/bits/collapsible/components/collapsible-trigger.svelte
similarity index 100%
rename from src/lib/bits/collapsible/components/CollapsibleTrigger.svelte
rename to src/lib/bits/collapsible/components/collapsible-trigger.svelte
diff --git a/src/lib/bits/collapsible/components/Collapsible.svelte b/src/lib/bits/collapsible/components/collapsible.svelte
similarity index 100%
rename from src/lib/bits/collapsible/components/Collapsible.svelte
rename to src/lib/bits/collapsible/components/collapsible.svelte
diff --git a/src/lib/bits/collapsible/index.ts b/src/lib/bits/collapsible/index.ts
index d0ae683fb..5ea995428 100644
--- a/src/lib/bits/collapsible/index.ts
+++ b/src/lib/bits/collapsible/index.ts
@@ -1,13 +1,5 @@
-import Root from "./components/Collapsible.svelte";
-import Content from "./components/CollapsibleContent.svelte";
-import Trigger from "./components/CollapsibleTrigger.svelte";
+export { default as Root } from "./components/collapsible.svelte";
+export { default as Content } from "./components/collapsible-content.svelte";
+export { default as Trigger } from "./components/collapsible-trigger.svelte";
 
-export {
-	Root,
-	Content,
-	Trigger,
-	Root as Collapsible,
-	Content as CollapsibleContent,
-	Trigger as CollapsibleTrigger
-};
 export * from "./types.js";
diff --git a/src/lib/bits/context-menu/components/ContextMenuContent.svelte b/src/lib/bits/context-menu/components/context-menu-content.svelte
similarity index 100%
rename from src/lib/bits/context-menu/components/ContextMenuContent.svelte
rename to src/lib/bits/context-menu/components/context-menu-content.svelte
diff --git a/src/lib/bits/context-menu/components/ContextMenuTrigger.svelte b/src/lib/bits/context-menu/components/context-menu-trigger.svelte
similarity index 100%
rename from src/lib/bits/context-menu/components/ContextMenuTrigger.svelte
rename to src/lib/bits/context-menu/components/context-menu-trigger.svelte
diff --git a/src/lib/bits/context-menu/components/ContextMenu.svelte b/src/lib/bits/context-menu/components/context-menu.svelte
similarity index 100%
rename from src/lib/bits/context-menu/components/ContextMenu.svelte
rename to src/lib/bits/context-menu/components/context-menu.svelte
diff --git a/src/lib/bits/context-menu/index.ts b/src/lib/bits/context-menu/index.ts
index 8f75a287e..7f8113ca8 100644
--- a/src/lib/bits/context-menu/index.ts
+++ b/src/lib/bits/context-menu/index.ts
@@ -1,53 +1,18 @@
-import Root from "./components/ContextMenu.svelte";
-import Sub from "$lib/bits/menu/components/MenuSub.svelte";
-import Item from "$lib/bits/menu/components/MenuItem.svelte";
-import Group from "$lib/bits/menu/components/MenuGroup.svelte";
-import Label from "$lib/bits/menu/components/MenuLabel.svelte";
-import Arrow from "$lib/bits/menu/components/MenuArrow.svelte";
-import Content from "./components/ContextMenuContent.svelte";
-import Trigger from "./components/ContextMenuTrigger.svelte";
-import RadioItem from "$lib/bits/menu/components/MenuRadioItem.svelte";
-import Separator from "$lib/bits/menu/components/MenuSeparator.svelte";
-import RadioGroup from "$lib/bits/menu/components/MenuRadioGroup.svelte";
-import SubContent from "$lib/bits/menu/components/MenuSubContent.svelte";
-import SubTrigger from "$lib/bits/menu/components/MenuSubTrigger.svelte";
-import CheckboxItem from "$lib/bits/menu/components/MenuCheckboxItem.svelte";
-import RadioIndicator from "$lib/bits/menu/components/MenuRadioIndicator.svelte";
-import CheckboxIndicator from "$lib/bits/menu/components/MenuCheckboxIndicator.svelte";
+export { default as Root } from "./components/context-menu.svelte";
+export { default as Sub } from "$lib/bits/menu/components/menu-sub.svelte";
+export { default as Item } from "$lib/bits/menu/components/menu-item.svelte";
+export { default as Group } from "$lib/bits/menu/components/menu-group.svelte";
+export { default as Label } from "$lib/bits/menu/components/menu-label.svelte";
+export { default as Arrow } from "$lib/bits/menu/components/menu-arrow.svelte";
+export { default as Content } from "./components/context-menu-content.svelte";
+export { default as Trigger } from "./components/context-menu-trigger.svelte";
+export { default as RadioItem } from "$lib/bits/menu/components/menu-radio-item.svelte";
+export { default as Separator } from "$lib/bits/menu/components/menu-separator.svelte";
+export { default as RadioGroup } from "$lib/bits/menu/components/menu-radio-group.svelte";
+export { default as SubContent } from "$lib/bits/menu/components/menu-sub-content.svelte";
+export { default as SubTrigger } from "$lib/bits/menu/components/menu-sub-trigger.svelte";
+export { default as CheckboxItem } from "$lib/bits/menu/components/menu-checkbox-item.svelte";
+export { default as RadioIndicator } from "$lib/bits/menu/components/menu-radio-indicator.svelte";
+export { default as CheckboxIndicator } from "$lib/bits/menu/components/menu-checkbox-indicator.svelte";
 
-export {
-	Sub,
-	Root,
-	Group,
-	Item,
-	Label,
-	Arrow,
-	Content,
-	Trigger,
-	RadioItem,
-	Separator,
-	SubTrigger,
-	RadioGroup,
-	SubContent,
-	CheckboxItem,
-	RadioIndicator,
-	CheckboxIndicator,
-	//
-	Root as ContextMenu,
-	Sub as ContextMenuSub,
-	Item as ContextMenuItem,
-	Group as ContextMenuGroup,
-	Label as ContextMenuLabel,
-	Arrow as ContextMenuArrow,
-	Content as ContextMenuContent,
-	Trigger as ContextMenuTrigger,
-	RadioItem as ContextMenuRadioItem,
-	Separator as ContextMenuSeparator,
-	SubContent as ContextMenuSubContent,
-	RadioGroup as ContextMenuRadioGroup,
-	SubTrigger as ContextMenuSubTrigger,
-	CheckboxItem as ContextMenuCheckboxItem,
-	RadioIndicator as ContextMenuRadioIndicator,
-	CheckboxIndicator as ContextMenuCheckboxIndicator
-};
 export * from "./types.js";
diff --git a/src/lib/bits/date-field/_types.ts b/src/lib/bits/date-field/_types.ts
index e69de29bb..c652993a0 100644
--- a/src/lib/bits/date-field/_types.ts
+++ b/src/lib/bits/date-field/_types.ts
@@ -0,0 +1,49 @@
+/**
+ * We define prop types without the HTMLAttributes here so that we can use them
+ * to type-check our API documentation, which requires we document each prop,
+ * but we don't want to document the HTML attributes.
+ */
+
+import type { Expand, OnChangeFn, AsChild, OmitDates } from "$lib/internal/index.js";
+import type { SegmentPart } from "$lib/shared";
+import type { DateValue } from "@internationalized/date";
+import type { CreateDateFieldProps } from "@melt-ui/svelte";
+
+type Props = Expand<
+	OmitDates<CreateDateFieldProps> & {
+		/**
+		 * The value of the date field.
+		 * You can bind this to a `DateValue` object to programmatically control the value.
+		 */
+		value?: DateValue;
+
+		/**
+		 * A callback function called when the value changes.
+		 */
+		onValueChange?: OnChangeFn<DateValue | undefined>;
+
+		/**
+		 * The placeholder date used to start the field.
+		 */
+		placeholder?: DateValue;
+
+		/**
+		 * A callback function called when the placeholder changes.
+		 */
+		onPlaceholderChange?: OnChangeFn<DateValue>;
+	} & AsChild
+>;
+
+type InputProps = AsChild;
+
+type FieldProps = AsChild;
+
+type LabelProps = AsChild;
+
+type SegmentProps = Expand<
+	{
+		part: SegmentPart;
+	} & AsChild
+>;
+
+export type { Props, FieldProps, LabelProps, InputProps, SegmentProps };
diff --git a/src/lib/bits/date-field/components/DateField.svelte b/src/lib/bits/date-field/components/DateField.svelte
deleted file mode 100644
index e69de29bb..000000000
diff --git a/src/lib/bits/date-field/components/date-field-field.svelte b/src/lib/bits/date-field/components/date-field-field.svelte
new file mode 100644
index 000000000..21d5d82b2
--- /dev/null
+++ b/src/lib/bits/date-field/components/date-field-field.svelte
@@ -0,0 +1,37 @@
+<script lang="ts">
+	import { melt } from "@melt-ui/svelte";
+	import { getCtx, getAttrs } from "../ctx.js";
+	import type { FieldProps } from "../types.js";
+
+	type $$Props = FieldProps;
+
+	export let asChild: $$Props["asChild"] = false;
+	export let id: $$Props["id"] = undefined;
+
+	const {
+		elements: { field },
+		states: { segmentContents },
+		ids
+	} = getCtx();
+
+	if (id) {
+		ids.field.set(id);
+	}
+
+	const attrs = getAttrs("field");
+
+	$: builder = $field;
+	$: slotProps = {
+		builder,
+		attrs,
+		segments: $segmentContents
+	};
+</script>
+
+{#if asChild}
+	<slot {...slotProps} />
+{:else}
+	<div use:melt={builder} {...$$restProps} {...attrs}>
+		<slot {...slotProps} />
+	</div>
+{/if}
diff --git a/src/lib/bits/date-field/components/date-field-input.svelte b/src/lib/bits/date-field/components/date-field-input.svelte
new file mode 100644
index 000000000..c9120736a
--- /dev/null
+++ b/src/lib/bits/date-field/components/date-field-input.svelte
@@ -0,0 +1,27 @@
+<script lang="ts">
+	import { melt } from "@melt-ui/svelte";
+	import { getCtx, getAttrs } from "../ctx.js";
+	import type { InputProps } from "../types.js";
+
+	type $$Props = InputProps;
+
+	export let asChild: $$Props["asChild"] = false;
+
+	const {
+		elements: { hiddenInput }
+	} = getCtx();
+
+	const attrs = getAttrs("input");
+
+	$: builder = $hiddenInput;
+	$: slotProps = {
+		builder,
+		attrs
+	};
+</script>
+
+{#if asChild}
+	<slot {...slotProps} />
+{:else}
+	<input use:melt={builder} {...$$restProps} {...attrs} />
+{/if}
diff --git a/src/lib/bits/date-field/components/date-field-label.svelte b/src/lib/bits/date-field/components/date-field-label.svelte
new file mode 100644
index 000000000..1a857689b
--- /dev/null
+++ b/src/lib/bits/date-field/components/date-field-label.svelte
@@ -0,0 +1,35 @@
+<script lang="ts">
+	import { melt } from "@melt-ui/svelte";
+	import { getCtx, getAttrs } from "../ctx.js";
+	import type { LabelProps } from "../types.js";
+
+	type $$Props = LabelProps;
+
+	export let asChild: $$Props["asChild"] = false;
+	export let id: $$Props["id"] = undefined;
+
+	const {
+		elements: { label },
+		ids
+	} = getCtx();
+
+	if (id) {
+		ids.label.set(id);
+	}
+
+	const attrs = getAttrs("label");
+
+	$: builder = $label;
+	$: slotProps = {
+		builder,
+		attrs
+	};
+</script>
+
+{#if asChild}
+	<slot {...slotProps} />
+{:else}
+	<div use:melt={builder} {...$$restProps} {...attrs}>
+		<slot {...slotProps} />
+	</div>
+{/if}
diff --git a/src/lib/bits/date-field/components/date-field-segment.svelte b/src/lib/bits/date-field/components/date-field-segment.svelte
new file mode 100644
index 000000000..e91ec30b6
--- /dev/null
+++ b/src/lib/bits/date-field/components/date-field-segment.svelte
@@ -0,0 +1,36 @@
+<script lang="ts">
+	import { melt } from "@melt-ui/svelte";
+	import { getCtx, getAttrs } from "../ctx.js";
+	import type { SegmentProps } from "../types.js";
+
+	type $$Props = SegmentProps;
+
+	export let asChild: $$Props["asChild"] = false;
+	export let id: $$Props["id"] = undefined;
+	export let part: $$Props["part"];
+
+	const {
+		elements: { segment },
+		ids
+	} = getCtx();
+
+	if (id && part !== "literal") {
+		ids[part].set(id);
+	}
+
+	const attrs = getAttrs("segment");
+
+	$: builder = $segment(part);
+	$: slotProps = {
+		builder,
+		attrs
+	};
+</script>
+
+{#if asChild}
+	<slot {...slotProps} />
+{:else}
+	<div use:melt={builder} {...$$restProps} {...attrs}>
+		<slot {...slotProps} />
+	</div>
+{/if}
diff --git a/src/lib/bits/date-field/components/date-field.svelte b/src/lib/bits/date-field/components/date-field.svelte
new file mode 100644
index 000000000..3a9d252e4
--- /dev/null
+++ b/src/lib/bits/date-field/components/date-field.svelte
@@ -0,0 +1,80 @@
+<script lang="ts">
+	import { setCtx } from "../ctx.js";
+	import type { Props } from "../types.js";
+
+	type $$Props = Props;
+
+	export let value: $$Props["value"] = undefined;
+	export let onValueChange: $$Props["onValueChange"] = undefined;
+	export let placeholder: $$Props["placeholder"] = undefined;
+	export let onPlaceholderChange: $$Props["onPlaceholderChange"] = undefined;
+	export let disabled: $$Props["disabled"] = undefined;
+	export let name: $$Props["name"] = undefined;
+	export let required: $$Props["required"] = undefined;
+	export let isDateUnavailable: $$Props["isDateUnavailable"] = undefined;
+	export let granularity: $$Props["granularity"] = undefined;
+	export let hideTimeZone: $$Props["hideTimeZone"] = undefined;
+	export let hourCycle: $$Props["hourCycle"] = undefined;
+	export let locale: $$Props["locale"] = undefined;
+	export let maxValue: $$Props["maxValue"] = undefined;
+	export let minValue: $$Props["minValue"] = undefined;
+	export let readonly: $$Props["readonly"] = undefined;
+
+	const {
+		states: {
+			value: localValue,
+			placeholder: localPlaceholder,
+			isInvalid: localIsInvalid
+		},
+		updateOption
+	} = setCtx({
+		defaultValue: value,
+		defaultPlaceholder: placeholder,
+		disabled,
+		name,
+		required,
+		granularity,
+		hideTimeZone,
+		hourCycle,
+		locale,
+		maxValue,
+		minValue,
+		readonly,
+		isDateUnavailable,
+		onValueChange: ({ next }) => {
+			if (value !== next) {
+				onValueChange?.(next);
+				value = next;
+			}
+			return next;
+		},
+		onPlaceholderChange: ({ next }) => {
+			if (placeholder !== next) {
+				onPlaceholderChange?.(next);
+				placeholder = next;
+			}
+			return next;
+		}
+	});
+
+	$: value !== undefined && localValue.set(value);
+	$: placeholder !== undefined && localPlaceholder.set(placeholder);
+
+	$: updateOption("disabled", disabled);
+	$: updateOption("name", name);
+	$: updateOption("required", required);
+	$: updateOption("isDateUnavailable", isDateUnavailable);
+	$: updateOption("granularity", granularity);
+	$: updateOption("hideTimeZone", hideTimeZone);
+	$: updateOption("hourCycle", hourCycle);
+	$: updateOption("locale", locale);
+	$: updateOption("maxValue", maxValue);
+	$: updateOption("minValue", minValue);
+	$: updateOption("readonly", readonly);
+
+	$: slotProps = {
+		isInvalid: $localIsInvalid
+	};
+</script>
+
+<slot {...slotProps} />
diff --git a/src/lib/bits/date-field/ctx.ts b/src/lib/bits/date-field/ctx.ts
index e69de29bb..cdc7bb609 100644
--- a/src/lib/bits/date-field/ctx.ts
+++ b/src/lib/bits/date-field/ctx.ts
@@ -0,0 +1,28 @@
+import {
+	createDateField,
+	type DateField as DateFieldReturn,
+	type CreateDateFieldProps
+} from "@melt-ui/svelte";
+import { getContext, setContext } from "svelte";
+import { removeUndefined, getOptionUpdater, createBitAttrs } from "$lib/internal/index.js";
+
+const NAME = "date-field";
+const PARTS = ["label", "field", "input", "segment"] as const;
+
+export const getAttrs = createBitAttrs(NAME, PARTS);
+
+type GetReturn = DateFieldReturn;
+
+export function setCtx(props: CreateDateFieldProps) {
+	const dateField = createDateField(removeUndefined(props));
+	setContext(NAME, dateField);
+
+	return {
+		...dateField,
+		updateOption: getOptionUpdater(dateField.options)
+	};
+}
+
+export function getCtx() {
+	return getContext<GetReturn>(NAME);
+}
diff --git a/src/lib/bits/date-field/index.ts b/src/lib/bits/date-field/index.ts
index e69de29bb..d8911c79d 100644
--- a/src/lib/bits/date-field/index.ts
+++ b/src/lib/bits/date-field/index.ts
@@ -0,0 +1,7 @@
+export { default as Root } from "./components/date-field.svelte";
+export { default as Input } from "./components/date-field-input.svelte";
+export { default as Label } from "./components/date-field-label.svelte";
+export { default as Segment } from "./components/date-field-segment.svelte";
+export { default as Field } from "./components/date-field-field.svelte";
+
+export type * from "./types.js";
diff --git a/src/lib/bits/date-field/types.ts b/src/lib/bits/date-field/types.ts
index e69de29bb..ec334c714 100644
--- a/src/lib/bits/date-field/types.ts
+++ b/src/lib/bits/date-field/types.ts
@@ -0,0 +1,15 @@
+import type { HTMLDivAttributes, HTMLSpanAttributes } from "$lib/internal/index.js";
+import type { HTMLInputAttributes } from "svelte/elements";
+import type * as I from "./_types.js";
+
+type Props = I.Props;
+
+type LabelProps = I.Props & HTMLSpanAttributes;
+
+type FieldProps = I.FieldProps & HTMLDivAttributes;
+
+type SegmentProps = I.SegmentProps & HTMLDivAttributes;
+
+type InputProps = I.InputProps & HTMLInputAttributes;
+
+export type { Props, FieldProps, LabelProps, InputProps, SegmentProps };
diff --git a/src/lib/bits/dialog/components/DialogClose.svelte b/src/lib/bits/dialog/components/dialog-close.svelte
similarity index 100%
rename from src/lib/bits/dialog/components/DialogClose.svelte
rename to src/lib/bits/dialog/components/dialog-close.svelte
diff --git a/src/lib/bits/dialog/components/DialogContent.svelte b/src/lib/bits/dialog/components/dialog-content.svelte
similarity index 100%
rename from src/lib/bits/dialog/components/DialogContent.svelte
rename to src/lib/bits/dialog/components/dialog-content.svelte
diff --git a/src/lib/bits/dialog/components/DialogDescription.svelte b/src/lib/bits/dialog/components/dialog-description.svelte
similarity index 100%
rename from src/lib/bits/dialog/components/DialogDescription.svelte
rename to src/lib/bits/dialog/components/dialog-description.svelte
diff --git a/src/lib/bits/dialog/components/DialogOverlay.svelte b/src/lib/bits/dialog/components/dialog-overlay.svelte
similarity index 100%
rename from src/lib/bits/dialog/components/DialogOverlay.svelte
rename to src/lib/bits/dialog/components/dialog-overlay.svelte
diff --git a/src/lib/bits/dialog/components/DialogPortal.svelte b/src/lib/bits/dialog/components/dialog-portal.svelte
similarity index 100%
rename from src/lib/bits/dialog/components/DialogPortal.svelte
rename to src/lib/bits/dialog/components/dialog-portal.svelte
diff --git a/src/lib/bits/dialog/components/DialogTitle.svelte b/src/lib/bits/dialog/components/dialog-title.svelte
similarity index 100%
rename from src/lib/bits/dialog/components/DialogTitle.svelte
rename to src/lib/bits/dialog/components/dialog-title.svelte
diff --git a/src/lib/bits/dialog/components/DialogTrigger.svelte b/src/lib/bits/dialog/components/dialog-trigger.svelte
similarity index 100%
rename from src/lib/bits/dialog/components/DialogTrigger.svelte
rename to src/lib/bits/dialog/components/dialog-trigger.svelte
diff --git a/src/lib/bits/dialog/components/Dialog.svelte b/src/lib/bits/dialog/components/dialog.svelte
similarity index 100%
rename from src/lib/bits/dialog/components/Dialog.svelte
rename to src/lib/bits/dialog/components/dialog.svelte
diff --git a/src/lib/bits/dialog/index.ts b/src/lib/bits/dialog/index.ts
index 1f7324455..4543e9033 100644
--- a/src/lib/bits/dialog/index.ts
+++ b/src/lib/bits/dialog/index.ts
@@ -1,31 +1,10 @@
-import Root from "./components/Dialog.svelte";
-import Title from "./components/DialogTitle.svelte";
-import Close from "./components/DialogClose.svelte";
-import Portal from "./components/DialogPortal.svelte";
-import Content from "./components/DialogContent.svelte";
-import Overlay from "./components/DialogOverlay.svelte";
-import Trigger from "./components/DialogTrigger.svelte";
-import Description from "./components/DialogDescription.svelte";
-
-export {
-	Root,
-	Title,
-	Close,
-	Portal,
-	Content,
-	Overlay,
-	Trigger,
-	Description,
-
-	//
-	Root as Dialog,
-	Title as DialogTitle,
-	Close as DialogClose,
-	Portal as DialogPortal,
-	Content as DialogContent,
-	Overlay as DialogOverlay,
-	Trigger as DialogTrigger,
-	Description as DialogDescription
-};
+export { default as Root } from "./components/dialog.svelte";
+export { default as Title } from "./components/dialog-title.svelte";
+export { default as Close } from "./components/dialog-close.svelte";
+export { default as Portal } from "./components/dialog-portal.svelte";
+export { default as Content } from "./components/dialog-content.svelte";
+export { default as Overlay } from "./components/dialog-overlay.svelte";
+export { default as Trigger } from "./components/dialog-trigger.svelte";
+export { default as Description } from "./components/dialog-description.svelte";
 
 export * from "./types.js";
diff --git a/src/lib/bits/dropdown-menu/index.ts b/src/lib/bits/dropdown-menu/index.ts
index 9a1c3f72f..39892a7e4 100644
--- a/src/lib/bits/dropdown-menu/index.ts
+++ b/src/lib/bits/dropdown-menu/index.ts
@@ -1,53 +1,17 @@
-import Root from "$lib/bits/menu/components/Menu.svelte";
-import Sub from "$lib/bits/menu/components/MenuSub.svelte";
-import Item from "$lib/bits/menu/components/MenuItem.svelte";
-import Group from "$lib/bits/menu/components/MenuGroup.svelte";
-import Label from "$lib/bits/menu/components/MenuLabel.svelte";
-import Arrow from "$lib/bits/menu/components/MenuArrow.svelte";
-import Content from "$lib/bits/menu/components/MenuContent.svelte";
-import Trigger from "$lib/bits/menu/components/MenuTrigger.svelte";
-import RadioItem from "$lib/bits/menu/components/MenuRadioItem.svelte";
-import Separator from "$lib/bits/menu/components/MenuSeparator.svelte";
-import RadioGroup from "$lib/bits/menu/components/MenuRadioGroup.svelte";
-import SubContent from "$lib/bits/menu/components/MenuSubContent.svelte";
-import SubTrigger from "$lib/bits/menu/components/MenuSubTrigger.svelte";
-import CheckboxItem from "$lib/bits/menu/components/MenuCheckboxItem.svelte";
-import RadioIndicator from "$lib/bits/menu/components/MenuRadioIndicator.svelte";
-import CheckboxIndicator from "$lib/bits/menu/components/MenuCheckboxIndicator.svelte";
-
-export {
-	Sub,
-	Root,
-	Item,
-	Group,
-	Label,
-	Arrow,
-	Content,
-	Trigger,
-	Separator,
-	RadioItem,
-	SubTrigger,
-	RadioGroup,
-	SubContent,
-	CheckboxItem,
-	RadioIndicator,
-	CheckboxIndicator,
-	//
-	Root as DropdownMenu,
-	Sub as DropdownMenuSub,
-	Item as DropdownMenuItem,
-	Group as DropdownMenuGroup,
-	Label as DropdownMenuLabel,
-	Arrow as DropdownMenuArrow,
-	Content as DropdownMenuContent,
-	Trigger as DropdownMenuTrigger,
-	RadioItem as DropdownMenuRadioItem,
-	Separator as DropdownMenuSeparator,
-	SubContent as DropdownMenuSubContent,
-	RadioGroup as DropdownMenuRadioGroup,
-	SubTrigger as DropdownMenuSubTrigger,
-	CheckboxItem as DropdownMenuCheckboxItem,
-	RadioIndicator as DropdownMenuRadioIndicator,
-	CheckboxIndicator as DropdownMenuCheckboxIndicator
-};
+export { default as Root } from "$lib/bits/menu/components/menu.svelte";
+export { default as Sub } from "$lib/bits/menu/components/menu-sub.svelte";
+export { default as Item } from "$lib/bits/menu/components/menu-item.svelte";
+export { default as Group } from "$lib/bits/menu/components/menu-group.svelte";
+export { default as Label } from "$lib/bits/menu/components/menu-label.svelte";
+export { default as Arrow } from "$lib/bits/menu/components/menu-arrow.svelte";
+export { default as Content } from "$lib/bits/menu/components/menu-content.svelte";
+export { default as Trigger } from "$lib/bits/menu/components/menu-trigger.svelte";
+export { default as RadioItem } from "$lib/bits/menu/components/menu-radio-item.svelte";
+export { default as Separator } from "$lib/bits/menu/components/menu-separator.svelte";
+export { default as RadioGroup } from "$lib/bits/menu/components/menu-radio-group.svelte";
+export { default as SubContent } from "$lib/bits/menu/components/menu-sub-content.svelte";
+export { default as SubTrigger } from "$lib/bits/menu/components/menu-sub-trigger.svelte";
+export { default as CheckboxItem } from "$lib/bits/menu/components/menu-checkbox-item.svelte";
+export { default as RadioIndicator } from "$lib/bits/menu/components/menu-radio-indicator.svelte";
+export { default as CheckboxIndicator } from "$lib/bits/menu/components/menu-checkbox-indicator.svelte";
 export * from "./types.js";
diff --git a/src/lib/bits/label/components/Label.svelte b/src/lib/bits/label/components/label.svelte
similarity index 100%
rename from src/lib/bits/label/components/Label.svelte
rename to src/lib/bits/label/components/label.svelte
diff --git a/src/lib/bits/label/index.ts b/src/lib/bits/label/index.ts
index 5adc47e70..126e6c475 100644
--- a/src/lib/bits/label/index.ts
+++ b/src/lib/bits/label/index.ts
@@ -1,8 +1,2 @@
-import Root from "./components/Label.svelte";
-
-export {
-	Root,
-	//
-	Root as Label
-};
+export { default as Root } from "./components/label.svelte";
 export * from "./types.js";
diff --git a/src/lib/bits/link-preview/components/LinkPreviewArrow.svelte b/src/lib/bits/link-preview/components/link-preview-arrow.svelte
similarity index 100%
rename from src/lib/bits/link-preview/components/LinkPreviewArrow.svelte
rename to src/lib/bits/link-preview/components/link-preview-arrow.svelte
diff --git a/src/lib/bits/link-preview/components/LinkPreviewContent.svelte b/src/lib/bits/link-preview/components/link-preview-content.svelte
similarity index 100%
rename from src/lib/bits/link-preview/components/LinkPreviewContent.svelte
rename to src/lib/bits/link-preview/components/link-preview-content.svelte
diff --git a/src/lib/bits/link-preview/components/LinkPreviewTrigger.svelte b/src/lib/bits/link-preview/components/link-preview-trigger.svelte
similarity index 100%
rename from src/lib/bits/link-preview/components/LinkPreviewTrigger.svelte
rename to src/lib/bits/link-preview/components/link-preview-trigger.svelte
diff --git a/src/lib/bits/link-preview/components/LinkPreview.svelte b/src/lib/bits/link-preview/components/link-preview.svelte
similarity index 100%
rename from src/lib/bits/link-preview/components/LinkPreview.svelte
rename to src/lib/bits/link-preview/components/link-preview.svelte
diff --git a/src/lib/bits/link-preview/index.ts b/src/lib/bits/link-preview/index.ts
index 2e16abd2f..6ccaf2bd4 100644
--- a/src/lib/bits/link-preview/index.ts
+++ b/src/lib/bits/link-preview/index.ts
@@ -1,18 +1,5 @@
-import Root from "./components/LinkPreview.svelte";
-import Arrow from "./components/LinkPreviewArrow.svelte";
-import Content from "./components/LinkPreviewContent.svelte";
-import Trigger from "./components/LinkPreviewTrigger.svelte";
-
-export {
-	Root,
-	Arrow,
-	Content,
-	Trigger,
-	//
-	Root as LinkPreview,
-	Arrow as LinkPreviewArrow,
-	Content as LinkPreviewContent,
-	Trigger as LinkPreviewTrigger
-};
-
+export { default as Root } from "./components/link-preview.svelte";
+export { default as Arrow } from "./components/link-preview-arrow.svelte";
+export { default as Content } from "./components/link-preview-content.svelte";
+export { default as Trigger } from "./components/link-preview-trigger.svelte";
 export * from "./types.js";
diff --git a/src/lib/bits/menu/components/MenuArrow.svelte b/src/lib/bits/menu/components/menu-arrow.svelte
similarity index 100%
rename from src/lib/bits/menu/components/MenuArrow.svelte
rename to src/lib/bits/menu/components/menu-arrow.svelte
diff --git a/src/lib/bits/menu/components/MenuCheckboxIndicator.svelte b/src/lib/bits/menu/components/menu-checkbox-indicator.svelte
similarity index 100%
rename from src/lib/bits/menu/components/MenuCheckboxIndicator.svelte
rename to src/lib/bits/menu/components/menu-checkbox-indicator.svelte
diff --git a/src/lib/bits/menu/components/MenuCheckboxItem.svelte b/src/lib/bits/menu/components/menu-checkbox-item.svelte
similarity index 100%
rename from src/lib/bits/menu/components/MenuCheckboxItem.svelte
rename to src/lib/bits/menu/components/menu-checkbox-item.svelte
diff --git a/src/lib/bits/menu/components/MenuContent.svelte b/src/lib/bits/menu/components/menu-content.svelte
similarity index 100%
rename from src/lib/bits/menu/components/MenuContent.svelte
rename to src/lib/bits/menu/components/menu-content.svelte
diff --git a/src/lib/bits/menu/components/MenuGroup.svelte b/src/lib/bits/menu/components/menu-group.svelte
similarity index 100%
rename from src/lib/bits/menu/components/MenuGroup.svelte
rename to src/lib/bits/menu/components/menu-group.svelte
diff --git a/src/lib/bits/menu/components/MenuItem.svelte b/src/lib/bits/menu/components/menu-item.svelte
similarity index 100%
rename from src/lib/bits/menu/components/MenuItem.svelte
rename to src/lib/bits/menu/components/menu-item.svelte
diff --git a/src/lib/bits/menu/components/MenuLabel.svelte b/src/lib/bits/menu/components/menu-label.svelte
similarity index 100%
rename from src/lib/bits/menu/components/MenuLabel.svelte
rename to src/lib/bits/menu/components/menu-label.svelte
diff --git a/src/lib/bits/menu/components/MenuRadioGroup.svelte b/src/lib/bits/menu/components/menu-radio-group.svelte
similarity index 100%
rename from src/lib/bits/menu/components/MenuRadioGroup.svelte
rename to src/lib/bits/menu/components/menu-radio-group.svelte
diff --git a/src/lib/bits/menu/components/MenuRadioIndicator.svelte b/src/lib/bits/menu/components/menu-radio-indicator.svelte
similarity index 100%
rename from src/lib/bits/menu/components/MenuRadioIndicator.svelte
rename to src/lib/bits/menu/components/menu-radio-indicator.svelte
diff --git a/src/lib/bits/menu/components/MenuRadioItem.svelte b/src/lib/bits/menu/components/menu-radio-item.svelte
similarity index 100%
rename from src/lib/bits/menu/components/MenuRadioItem.svelte
rename to src/lib/bits/menu/components/menu-radio-item.svelte
diff --git a/src/lib/bits/menu/components/MenuSeparator.svelte b/src/lib/bits/menu/components/menu-separator.svelte
similarity index 100%
rename from src/lib/bits/menu/components/MenuSeparator.svelte
rename to src/lib/bits/menu/components/menu-separator.svelte
diff --git a/src/lib/bits/menu/components/MenuSubContent.svelte b/src/lib/bits/menu/components/menu-sub-content.svelte
similarity index 100%
rename from src/lib/bits/menu/components/MenuSubContent.svelte
rename to src/lib/bits/menu/components/menu-sub-content.svelte
diff --git a/src/lib/bits/menu/components/MenuSubTrigger.svelte b/src/lib/bits/menu/components/menu-sub-trigger.svelte
similarity index 100%
rename from src/lib/bits/menu/components/MenuSubTrigger.svelte
rename to src/lib/bits/menu/components/menu-sub-trigger.svelte
diff --git a/src/lib/bits/menu/components/MenuSub.svelte b/src/lib/bits/menu/components/menu-sub.svelte
similarity index 100%
rename from src/lib/bits/menu/components/MenuSub.svelte
rename to src/lib/bits/menu/components/menu-sub.svelte
diff --git a/src/lib/bits/menu/components/MenuTrigger.svelte b/src/lib/bits/menu/components/menu-trigger.svelte
similarity index 100%
rename from src/lib/bits/menu/components/MenuTrigger.svelte
rename to src/lib/bits/menu/components/menu-trigger.svelte
diff --git a/src/lib/bits/menu/components/Menu.svelte b/src/lib/bits/menu/components/menu.svelte
similarity index 100%
rename from src/lib/bits/menu/components/Menu.svelte
rename to src/lib/bits/menu/components/menu.svelte
diff --git a/src/lib/bits/menu/index.ts b/src/lib/bits/menu/index.ts
index a6c8d1293..e3140746d 100644
--- a/src/lib/bits/menu/index.ts
+++ b/src/lib/bits/menu/index.ts
@@ -1,18 +1,18 @@
-export { default as Root } from "./components/Menu.svelte";
-export { default as Arrow } from "./components/MenuArrow.svelte";
-export { default as CheckboxIndicator } from "./components/MenuCheckboxIndicator.svelte";
-export { default as CheckboxItem } from "./components/MenuCheckboxItem.svelte";
-export { default as Content } from "./components/MenuContent.svelte";
-export { default as Group } from "./components/MenuGroup.svelte";
-export { default as Item } from "./components/MenuItem.svelte";
-export { default as Label } from "./components/MenuLabel.svelte";
-export { default as RadioGroup } from "./components/MenuRadioGroup.svelte";
-export { default as RadioIndicator } from "./components/MenuRadioIndicator.svelte";
-export { default as RadioItem } from "./components/MenuRadioItem.svelte";
-export { default as Separator } from "./components/MenuSeparator.svelte";
-export { default as Sub } from "./components/MenuSub.svelte";
-export { default as SubContent } from "./components/MenuSubContent.svelte";
-export { default as SubTrigger } from "./components/MenuSubTrigger.svelte";
-export { default as Trigger } from "./components/MenuTrigger.svelte";
+export { default as Root } from "./components/menu.svelte";
+export { default as Arrow } from "./components/menu-arrow.svelte";
+export { default as CheckboxIndicator } from "./components/menu-checkbox-indicator.svelte";
+export { default as CheckboxItem } from "./components/menu-checkbox-item.svelte";
+export { default as Content } from "./components/menu-content.svelte";
+export { default as Group } from "./components/menu-group.svelte";
+export { default as Item } from "./components/menu-item.svelte";
+export { default as Label } from "./components/menu-label.svelte";
+export { default as RadioGroup } from "./components/menu-radio-group.svelte";
+export { default as RadioIndicator } from "./components/menu-radio-indicator.svelte";
+export { default as RadioItem } from "./components/menu-radio-item.svelte";
+export { default as Separator } from "./components/menu-separator.svelte";
+export { default as Sub } from "./components/menu-sub.svelte";
+export { default as SubContent } from "./components/menu-sub-content.svelte";
+export { default as SubTrigger } from "./components/menu-sub-trigger.svelte";
+export { default as Trigger } from "./components/menu-trigger.svelte";
 
 export * from "./types.js";
diff --git a/src/lib/bits/menubar/components/MenubarMenu.svelte b/src/lib/bits/menubar/components/menubar-menu.svelte
similarity index 100%
rename from src/lib/bits/menubar/components/MenubarMenu.svelte
rename to src/lib/bits/menubar/components/menubar-menu.svelte
diff --git a/src/lib/bits/menubar/components/MenubarSub.svelte b/src/lib/bits/menubar/components/menubar-sub.svelte
similarity index 100%
rename from src/lib/bits/menubar/components/MenubarSub.svelte
rename to src/lib/bits/menubar/components/menubar-sub.svelte
diff --git a/src/lib/bits/menubar/components/MenubarTrigger.svelte b/src/lib/bits/menubar/components/menubar-trigger.svelte
similarity index 100%
rename from src/lib/bits/menubar/components/MenubarTrigger.svelte
rename to src/lib/bits/menubar/components/menubar-trigger.svelte
diff --git a/src/lib/bits/menubar/components/Menubar.svelte b/src/lib/bits/menubar/components/menubar.svelte
similarity index 100%
rename from src/lib/bits/menubar/components/Menubar.svelte
rename to src/lib/bits/menubar/components/menubar.svelte
diff --git a/src/lib/bits/menubar/index.ts b/src/lib/bits/menubar/index.ts
index 166657e01..30464cf49 100644
--- a/src/lib/bits/menubar/index.ts
+++ b/src/lib/bits/menubar/index.ts
@@ -1,56 +1,18 @@
-import Root from "./components/Menubar.svelte";
-import Sub from "./components/MenubarSub.svelte";
-import Menu from "./components/MenubarMenu.svelte";
-import Trigger from "./components/MenubarTrigger.svelte";
-import Item from "$lib/bits/menu/components/MenuItem.svelte";
-import Group from "$lib/bits/menu/components/MenuGroup.svelte";
-import Label from "$lib/bits/menu/components/MenuLabel.svelte";
-import Arrow from "$lib/bits/menu/components/MenuArrow.svelte";
-import Content from "$lib/bits/menu/components/MenuContent.svelte";
-import RadioItem from "$lib/bits/menu/components/MenuRadioItem.svelte";
-import Separator from "$lib/bits/menu/components/MenuSeparator.svelte";
-import SubContent from "$lib/bits/menu/components/MenuSubContent.svelte";
-import SubTrigger from "$lib/bits/menu/components/MenuSubTrigger.svelte";
-import RadioGroup from "$lib/bits/menu/components/MenuRadioGroup.svelte";
-import CheckboxItem from "$lib/bits/menu/components/MenuCheckboxItem.svelte";
-import RadioIndicator from "$lib/bits/menu/components/MenuRadioIndicator.svelte";
-import CheckboxIndicator from "$lib/bits/menu/components/MenuCheckboxIndicator.svelte";
-
-export {
-	Sub,
-	Root,
-	Group,
-	Item,
-	Menu,
-	Label,
-	Arrow,
-	Content,
-	Trigger,
-	RadioItem,
-	Separator,
-	SubTrigger,
-	SubContent,
-	RadioGroup,
-	CheckboxItem,
-	RadioIndicator,
-	CheckboxIndicator,
-	//
-	Root as Menubar,
-	Sub as MenubarSub,
-	Item as MenubarItem,
-	Menu as MenubarMenu,
-	Group as MenubarGroup,
-	Label as MenubarLabel,
-	Arrow as MenubarArrow,
-	Content as MenubarContent,
-	Trigger as MenubarTrigger,
-	RadioItem as MenubarRadioItem,
-	Separator as MenubarSeparator,
-	SubContent as MenubarSubContent,
-	SubTrigger as MenubarSubTrigger,
-	RadioGroup as MenubarRadioGroup,
-	CheckboxItem as MenubarCheckboxItem,
-	RadioIndicator as MenubarRadioIndicator,
-	CheckboxIndicator as MenubarCheckboxIndicator
-};
+export { default as Root } from "./components/menubar.svelte";
+export { default as Sub } from "./components/menubar-sub.svelte";
+export { default as Menu } from "./components/menubar-menu.svelte";
+export { default as Trigger } from "./components/menubar-trigger.svelte";
+export { default as Item } from "$lib/bits/menu/components/menu-item.svelte";
+export { default as Group } from "$lib/bits/menu/components/menu-group.svelte";
+export { default as Label } from "$lib/bits/menu/components/menu-label.svelte";
+export { default as Arrow } from "$lib/bits/menu/components/menu-arrow.svelte";
+export { default as Content } from "$lib/bits/menu/components/menu-content.svelte";
+export { default as RadioItem } from "$lib/bits/menu/components/menu-radio-item.svelte";
+export { default as Separator } from "$lib/bits/menu/components/menu-separator.svelte";
+export { default as SubContent } from "$lib/bits/menu/components/menu-sub-content.svelte";
+export { default as SubTrigger } from "$lib/bits/menu/components/menu-sub-trigger.svelte";
+export { default as RadioGroup } from "$lib/bits/menu/components/menu-radio-group.svelte";
+export { default as CheckboxItem } from "$lib/bits/menu/components/menu-checkbox-item.svelte";
+export { default as RadioIndicator } from "$lib/bits/menu/components/menu-radio-indicator.svelte";
+export { default as CheckboxIndicator } from "$lib/bits/menu/components/menu-checkbox-indicator.svelte";
 export * from "./types.js";
diff --git a/src/lib/bits/popover/components/PopoverArrow.svelte b/src/lib/bits/popover/components/popover-arrow.svelte
similarity index 100%
rename from src/lib/bits/popover/components/PopoverArrow.svelte
rename to src/lib/bits/popover/components/popover-arrow.svelte
diff --git a/src/lib/bits/popover/components/PopoverClose.svelte b/src/lib/bits/popover/components/popover-close.svelte
similarity index 100%
rename from src/lib/bits/popover/components/PopoverClose.svelte
rename to src/lib/bits/popover/components/popover-close.svelte
diff --git a/src/lib/bits/popover/components/PopoverContent.svelte b/src/lib/bits/popover/components/popover-content.svelte
similarity index 100%
rename from src/lib/bits/popover/components/PopoverContent.svelte
rename to src/lib/bits/popover/components/popover-content.svelte
diff --git a/src/lib/bits/popover/components/PopoverTrigger.svelte b/src/lib/bits/popover/components/popover-trigger.svelte
similarity index 100%
rename from src/lib/bits/popover/components/PopoverTrigger.svelte
rename to src/lib/bits/popover/components/popover-trigger.svelte
diff --git a/src/lib/bits/popover/components/Popover.svelte b/src/lib/bits/popover/components/popover.svelte
similarity index 100%
rename from src/lib/bits/popover/components/Popover.svelte
rename to src/lib/bits/popover/components/popover.svelte
diff --git a/src/lib/bits/popover/index.ts b/src/lib/bits/popover/index.ts
index d7f9d1115..447c0bca4 100644
--- a/src/lib/bits/popover/index.ts
+++ b/src/lib/bits/popover/index.ts
@@ -1,19 +1,7 @@
-import Root from "./components/Popover.svelte";
-import Arrow from "./components/PopoverArrow.svelte";
-import Content from "./components/PopoverContent.svelte";
-import Trigger from "./components/PopoverTrigger.svelte";
-import Close from "./components/PopoverClose.svelte";
-export {
-	Root,
-	Arrow,
-	Close,
-	Content,
-	Trigger,
-	//
-	Root as Popover,
-	Arrow as PopoverArrow,
-	Close as PopoverClose,
-	Content as PopoverContent,
-	Trigger as PopoverTrigger
-};
+export { default as Root } from "./components/popover.svelte";
+export { default as Arrow } from "./components/popover-arrow.svelte";
+export { default as Content } from "./components/popover-content.svelte";
+export { default as Trigger } from "./components/popover-trigger.svelte";
+export { default as Close } from "./components/popover-close.svelte";
+
 export * from "./types.js";
diff --git a/src/lib/bits/progress/components/Progress.svelte b/src/lib/bits/progress/components/progress.svelte
similarity index 100%
rename from src/lib/bits/progress/components/Progress.svelte
rename to src/lib/bits/progress/components/progress.svelte
diff --git a/src/lib/bits/progress/index.ts b/src/lib/bits/progress/index.ts
index f3d7bc346..1776df95f 100644
--- a/src/lib/bits/progress/index.ts
+++ b/src/lib/bits/progress/index.ts
@@ -1,4 +1,2 @@
-import Root from "./components/Progress.svelte";
-
-export { Root, Root as Progress };
+export { default as Root } from "./components/progress.svelte";
 export * from "./types.js";
diff --git a/src/lib/bits/radio-group/components/RadioGroupInput.svelte b/src/lib/bits/radio-group/components/radio-group-input.svelte
similarity index 100%
rename from src/lib/bits/radio-group/components/RadioGroupInput.svelte
rename to src/lib/bits/radio-group/components/radio-group-input.svelte
diff --git a/src/lib/bits/radio-group/components/RadioGroupItemIndicator.svelte b/src/lib/bits/radio-group/components/radio-group-item-indicator.svelte
similarity index 100%
rename from src/lib/bits/radio-group/components/RadioGroupItemIndicator.svelte
rename to src/lib/bits/radio-group/components/radio-group-item-indicator.svelte
diff --git a/src/lib/bits/radio-group/components/RadioGroupItem.svelte b/src/lib/bits/radio-group/components/radio-group-item.svelte
similarity index 100%
rename from src/lib/bits/radio-group/components/RadioGroupItem.svelte
rename to src/lib/bits/radio-group/components/radio-group-item.svelte
diff --git a/src/lib/bits/radio-group/components/RadioGroup.svelte b/src/lib/bits/radio-group/components/radio-group.svelte
similarity index 100%
rename from src/lib/bits/radio-group/components/RadioGroup.svelte
rename to src/lib/bits/radio-group/components/radio-group.svelte
diff --git a/src/lib/bits/radio-group/index.ts b/src/lib/bits/radio-group/index.ts
index 1e6fded97..2dc3fa420 100644
--- a/src/lib/bits/radio-group/index.ts
+++ b/src/lib/bits/radio-group/index.ts
@@ -1,18 +1,6 @@
-import Root from "./components/RadioGroup.svelte";
-import Input from "./components/RadioGroupInput.svelte";
-import Item from "./components/RadioGroupItem.svelte";
-import ItemIndicator from "./components/RadioGroupItemIndicator.svelte";
-
-export {
-	Root,
-	Input,
-	Item,
-	ItemIndicator,
-	//
-	Root as RadioGroup,
-	Input as RadioGroupInput,
-	Item as RadioGroupItem,
-	ItemIndicator as RadioGroupItemIndicator
-};
+export { default as Root } from "./components/radio-group.svelte";
+export { default as Input } from "./components/radio-group-input.svelte";
+export { default as Item } from "./components/radio-group-item.svelte";
+export { default as ItemIndicator } from "./components/radio-group-item-indicator.svelte";
 
 export * from "./types.js";
diff --git a/src/lib/bits/range-calendar/components/RangeCalendarCell.svelte b/src/lib/bits/range-calendar/components/range-calendar-cell.svelte
similarity index 100%
rename from src/lib/bits/range-calendar/components/RangeCalendarCell.svelte
rename to src/lib/bits/range-calendar/components/range-calendar-cell.svelte
diff --git a/src/lib/bits/range-calendar/components/RangeCalendarDate.svelte b/src/lib/bits/range-calendar/components/range-calendar-date.svelte
similarity index 100%
rename from src/lib/bits/range-calendar/components/RangeCalendarDate.svelte
rename to src/lib/bits/range-calendar/components/range-calendar-date.svelte
diff --git a/src/lib/bits/range-calendar/components/RangeCalendarGridBody.svelte b/src/lib/bits/range-calendar/components/range-calendar-grid-body.svelte
similarity index 100%
rename from src/lib/bits/range-calendar/components/RangeCalendarGridBody.svelte
rename to src/lib/bits/range-calendar/components/range-calendar-grid-body.svelte
diff --git a/src/lib/bits/range-calendar/components/RangeCalendarGridHead.svelte b/src/lib/bits/range-calendar/components/range-calendar-grid-head.svelte
similarity index 100%
rename from src/lib/bits/range-calendar/components/RangeCalendarGridHead.svelte
rename to src/lib/bits/range-calendar/components/range-calendar-grid-head.svelte
diff --git a/src/lib/bits/range-calendar/components/RangeCalendarGridRow.svelte b/src/lib/bits/range-calendar/components/range-calendar-grid-row.svelte
similarity index 100%
rename from src/lib/bits/range-calendar/components/RangeCalendarGridRow.svelte
rename to src/lib/bits/range-calendar/components/range-calendar-grid-row.svelte
diff --git a/src/lib/bits/range-calendar/components/RangeCalendarGrid.svelte b/src/lib/bits/range-calendar/components/range-calendar-grid.svelte
similarity index 100%
rename from src/lib/bits/range-calendar/components/RangeCalendarGrid.svelte
rename to src/lib/bits/range-calendar/components/range-calendar-grid.svelte
diff --git a/src/lib/bits/range-calendar/components/RangeCalendarHeadCell.svelte b/src/lib/bits/range-calendar/components/range-calendar-head-cell.svelte
similarity index 100%
rename from src/lib/bits/range-calendar/components/RangeCalendarHeadCell.svelte
rename to src/lib/bits/range-calendar/components/range-calendar-head-cell.svelte
diff --git a/src/lib/bits/range-calendar/components/RangeCalendarHeader.svelte b/src/lib/bits/range-calendar/components/range-calendar-header.svelte
similarity index 100%
rename from src/lib/bits/range-calendar/components/RangeCalendarHeader.svelte
rename to src/lib/bits/range-calendar/components/range-calendar-header.svelte
diff --git a/src/lib/bits/range-calendar/components/RangeCalendarHeading.svelte b/src/lib/bits/range-calendar/components/range-calendar-heading.svelte
similarity index 100%
rename from src/lib/bits/range-calendar/components/RangeCalendarHeading.svelte
rename to src/lib/bits/range-calendar/components/range-calendar-heading.svelte
diff --git a/src/lib/bits/range-calendar/components/RangeCalendarNextButton.svelte b/src/lib/bits/range-calendar/components/range-calendar-next-button.svelte
similarity index 100%
rename from src/lib/bits/range-calendar/components/RangeCalendarNextButton.svelte
rename to src/lib/bits/range-calendar/components/range-calendar-next-button.svelte
diff --git a/src/lib/bits/range-calendar/components/RangeCalendarPrevButton.svelte b/src/lib/bits/range-calendar/components/range-calendar-prev-button.svelte
similarity index 100%
rename from src/lib/bits/range-calendar/components/RangeCalendarPrevButton.svelte
rename to src/lib/bits/range-calendar/components/range-calendar-prev-button.svelte
diff --git a/src/lib/bits/range-calendar/components/RangeCalendar.svelte b/src/lib/bits/range-calendar/components/range-calendar.svelte
similarity index 100%
rename from src/lib/bits/range-calendar/components/RangeCalendar.svelte
rename to src/lib/bits/range-calendar/components/range-calendar.svelte
diff --git a/src/lib/bits/range-calendar/index.ts b/src/lib/bits/range-calendar/index.ts
index 6ec3b8767..3809d0fee 100644
--- a/src/lib/bits/range-calendar/index.ts
+++ b/src/lib/bits/range-calendar/index.ts
@@ -1,41 +1,14 @@
-import Root from "./components/RangeCalendar.svelte";
-import Date from "./components/RangeCalendarDate.svelte";
-import Grid from "./components/RangeCalendarGrid.svelte";
-import GridBody from "./components/RangeCalendarGridBody.svelte";
-import Cell from "./components/RangeCalendarCell.svelte";
-import GridHead from "./components/RangeCalendarGridHead.svelte";
-import HeadCell from "./components/RangeCalendarHeadCell.svelte";
-import GridRow from "./components/RangeCalendarGridRow.svelte";
-import Header from "./components/RangeCalendarHeader.svelte";
-import Heading from "./components/RangeCalendarHeading.svelte";
-import NextButton from "./components/RangeCalendarNextButton.svelte";
-import PrevButton from "./components/RangeCalendarPrevButton.svelte";
+export { default as Root } from "./components/range-calendar.svelte";
+export { default as Date } from "./components/range-calendar-date.svelte";
+export { default as Grid } from "./components/range-calendar-grid.svelte";
+export { default as GridBody } from "./components/range-calendar-grid-body.svelte";
+export { default as Cell } from "./components/range-calendar-cell.svelte";
+export { default as GridHead } from "./components/range-calendar-grid-head.svelte";
+export { default as HeadCell } from "./components/range-calendar-head-cell.svelte";
+export { default as GridRow } from "./components/range-calendar-grid-row.svelte";
+export { default as Header } from "./components/range-calendar-header.svelte";
+export { default as Heading } from "./components/range-calendar-heading.svelte";
+export { default as NextButton } from "./components/range-calendar-next-button.svelte";
+export { default as PrevButton } from "./components/range-calendar-prev-button.svelte";
 
-export {
-	Root,
-	Date,
-	Grid,
-	GridBody,
-	Cell,
-	GridHead,
-	HeadCell,
-	GridRow,
-	Header,
-	Heading,
-	NextButton,
-	PrevButton,
-	//
-	Root as RangeCalendar,
-	Date as RangeCalendarDate,
-	Grid as RangeCalendarGrid,
-	GridBody as RangeCalendarGridBody,
-	Cell as RangeCalendarGridBodyCell,
-	GridHead as RangeCalendarGridHead,
-	HeadCell as RangeCalendarGridHeadCell,
-	GridRow as RangeCalendarGridRow,
-	Header as RangeCalendarHeader,
-	Heading as RangeCalendarHeading,
-	NextButton as RangeCalendarNextButton,
-	PrevButton as RangeCalendarPrevButton
-};
 export * from "./types.js";
diff --git a/src/lib/bits/select/components/SelectArrow.svelte b/src/lib/bits/select/components/select-arrow.svelte
similarity index 100%
rename from src/lib/bits/select/components/SelectArrow.svelte
rename to src/lib/bits/select/components/select-arrow.svelte
diff --git a/src/lib/bits/select/components/SelectContent.svelte b/src/lib/bits/select/components/select-content.svelte
similarity index 100%
rename from src/lib/bits/select/components/SelectContent.svelte
rename to src/lib/bits/select/components/select-content.svelte
diff --git a/src/lib/bits/select/components/SelectGroup.svelte b/src/lib/bits/select/components/select-group.svelte
similarity index 100%
rename from src/lib/bits/select/components/SelectGroup.svelte
rename to src/lib/bits/select/components/select-group.svelte
diff --git a/src/lib/bits/select/components/SelectInput.svelte b/src/lib/bits/select/components/select-input.svelte
similarity index 100%
rename from src/lib/bits/select/components/SelectInput.svelte
rename to src/lib/bits/select/components/select-input.svelte
diff --git a/src/lib/bits/select/components/SelectItemIndicator.svelte b/src/lib/bits/select/components/select-item-indicator.svelte
similarity index 100%
rename from src/lib/bits/select/components/SelectItemIndicator.svelte
rename to src/lib/bits/select/components/select-item-indicator.svelte
diff --git a/src/lib/bits/select/components/SelectItem.svelte b/src/lib/bits/select/components/select-item.svelte
similarity index 100%
rename from src/lib/bits/select/components/SelectItem.svelte
rename to src/lib/bits/select/components/select-item.svelte
diff --git a/src/lib/bits/select/components/SelectLabel.svelte b/src/lib/bits/select/components/select-label.svelte
similarity index 100%
rename from src/lib/bits/select/components/SelectLabel.svelte
rename to src/lib/bits/select/components/select-label.svelte
diff --git a/src/lib/bits/select/components/SelectTrigger.svelte b/src/lib/bits/select/components/select-trigger.svelte
similarity index 100%
rename from src/lib/bits/select/components/SelectTrigger.svelte
rename to src/lib/bits/select/components/select-trigger.svelte
diff --git a/src/lib/bits/select/components/SelectValue.svelte b/src/lib/bits/select/components/select-value.svelte
similarity index 100%
rename from src/lib/bits/select/components/SelectValue.svelte
rename to src/lib/bits/select/components/select-value.svelte
diff --git a/src/lib/bits/select/components/Select.svelte b/src/lib/bits/select/components/select.svelte
similarity index 100%
rename from src/lib/bits/select/components/Select.svelte
rename to src/lib/bits/select/components/select.svelte
diff --git a/src/lib/bits/select/index.ts b/src/lib/bits/select/index.ts
index d3ef01cfe..25512cb4f 100644
--- a/src/lib/bits/select/index.ts
+++ b/src/lib/bits/select/index.ts
@@ -1,39 +1,13 @@
-import Root from "./components/Select.svelte";
-import Arrow from "./components/SelectArrow.svelte";
-import Content from "./components/SelectContent.svelte";
-import Group from "./components/SelectGroup.svelte";
-import Input from "./components/SelectInput.svelte";
-import Item from "./components/SelectItem.svelte";
-import ItemIndicator from "./components/SelectItemIndicator.svelte";
-import Label from "./components/SelectLabel.svelte";
-import Separator from "../separator/components/Separator.svelte";
-import Trigger from "./components/SelectTrigger.svelte";
-import Value from "./components/SelectValue.svelte";
-
-export {
-	Root,
-	Arrow,
-	Content,
-	Group,
-	Input,
-	Item,
-	ItemIndicator,
-	Label,
-	Separator,
-	Trigger,
-	Value,
-	//
-	Root as Select,
-	Arrow as SelectArrow,
-	Content as SelectContent,
-	Group as SelectGroup,
-	Input as SelectInput,
-	Item as SelectItem,
-	ItemIndicator as SelectItemIndicator,
-	Label as SelectLabel,
-	Separator as SelectSeparator,
-	Trigger as SelectTrigger,
-	Value as SelectValue
-};
+export { default as Root } from "./components/select.svelte";
+export { default as Arrow } from "./components/select-arrow.svelte";
+export { default as Content } from "./components/select-content.svelte";
+export { default as Group } from "./components/select-group.svelte";
+export { default as Input } from "./components/select-input.svelte";
+export { default as Item } from "./components/select-item.svelte";
+export { default as ItemIndicator } from "./components/select-item-indicator.svelte";
+export { default as Label } from "./components/select-label.svelte";
+export { default as Separator } from "../separator/components/separator.svelte";
+export { default as Trigger } from "./components/select-trigger.svelte";
+export { default as Value } from "./components/select-value.svelte";
 
 export * from "./types.js";
diff --git a/src/lib/bits/separator/components/Separator.svelte b/src/lib/bits/separator/components/separator.svelte
similarity index 100%
rename from src/lib/bits/separator/components/Separator.svelte
rename to src/lib/bits/separator/components/separator.svelte
diff --git a/src/lib/bits/separator/index.ts b/src/lib/bits/separator/index.ts
index 70fdce782..9e0668583 100644
--- a/src/lib/bits/separator/index.ts
+++ b/src/lib/bits/separator/index.ts
@@ -1,5 +1,3 @@
-import Root from "./components/Separator.svelte";
-
-export { Root, Root as Separator };
+export { default as Root } from "./components/separator.svelte";
 
 export * from "./types.js";
diff --git a/src/lib/bits/slider/components/SliderInput.svelte b/src/lib/bits/slider/components/slider-input.svelte
similarity index 100%
rename from src/lib/bits/slider/components/SliderInput.svelte
rename to src/lib/bits/slider/components/slider-input.svelte
diff --git a/src/lib/bits/slider/components/SliderRange.svelte b/src/lib/bits/slider/components/slider-range.svelte
similarity index 100%
rename from src/lib/bits/slider/components/SliderRange.svelte
rename to src/lib/bits/slider/components/slider-range.svelte
diff --git a/src/lib/bits/slider/components/SliderThumb.svelte b/src/lib/bits/slider/components/slider-thumb.svelte
similarity index 100%
rename from src/lib/bits/slider/components/SliderThumb.svelte
rename to src/lib/bits/slider/components/slider-thumb.svelte
diff --git a/src/lib/bits/slider/components/SliderTick.svelte b/src/lib/bits/slider/components/slider-tick.svelte
similarity index 100%
rename from src/lib/bits/slider/components/SliderTick.svelte
rename to src/lib/bits/slider/components/slider-tick.svelte
diff --git a/src/lib/bits/slider/components/Slider.svelte b/src/lib/bits/slider/components/slider.svelte
similarity index 100%
rename from src/lib/bits/slider/components/Slider.svelte
rename to src/lib/bits/slider/components/slider.svelte
diff --git a/src/lib/bits/slider/index.ts b/src/lib/bits/slider/index.ts
index b53514d79..cb81c4c79 100644
--- a/src/lib/bits/slider/index.ts
+++ b/src/lib/bits/slider/index.ts
@@ -1,21 +1,7 @@
-import Root from "./components/Slider.svelte";
-import Range from "./components/SliderRange.svelte";
-import Thumb from "./components/SliderThumb.svelte";
-import Input from "./components/SliderInput.svelte";
-import Tick from "./components/SliderTick.svelte";
-
-export {
-	Root,
-	Range,
-	Thumb,
-	Input,
-	Tick,
-	//
-	Root as Slider,
-	Range as SliderRange,
-	Thumb as SliderThumb,
-	Input as SliderInput,
-	Tick as SliderTick
-};
+export { default as Root } from "./components/slider.svelte";
+export { default as Range } from "./components/slider-range.svelte";
+export { default as Thumb } from "./components/slider-thumb.svelte";
+export { default as Input } from "./components/slider-input.svelte";
+export { default as Tick } from "./components/slider-tick.svelte";
 
 export * from "./types.js";
diff --git a/src/lib/bits/switch/components/SwitchInput.svelte b/src/lib/bits/switch/components/switch-input.svelte
similarity index 100%
rename from src/lib/bits/switch/components/SwitchInput.svelte
rename to src/lib/bits/switch/components/switch-input.svelte
diff --git a/src/lib/bits/switch/components/SwitchThumb.svelte b/src/lib/bits/switch/components/switch-thumb.svelte
similarity index 100%
rename from src/lib/bits/switch/components/SwitchThumb.svelte
rename to src/lib/bits/switch/components/switch-thumb.svelte
diff --git a/src/lib/bits/switch/components/Switch.svelte b/src/lib/bits/switch/components/switch.svelte
similarity index 97%
rename from src/lib/bits/switch/components/Switch.svelte
rename to src/lib/bits/switch/components/switch.svelte
index b21840e06..fcf030144 100644
--- a/src/lib/bits/switch/components/Switch.svelte
+++ b/src/lib/bits/switch/components/switch.svelte
@@ -3,7 +3,7 @@
 	import { setCtx, getAttrs } from "../ctx.js";
 	import type { Events, Props } from "../types.js";
 	import { createDispatcher } from "$lib/internal/events.js";
-	import SwitchInput from "./SwitchInput.svelte";
+	import SwitchInput from "./switch-input.svelte";
 
 	type $$Props = Props;
 	type $$Events = Events;
diff --git a/src/lib/bits/switch/index.ts b/src/lib/bits/switch/index.ts
index 9a9304fba..06df5b61a 100644
--- a/src/lib/bits/switch/index.ts
+++ b/src/lib/bits/switch/index.ts
@@ -1,14 +1,5 @@
-import Root from "./components/Switch.svelte";
-import Thumb from "./components/SwitchThumb.svelte";
-import Input from "./components/SwitchInput.svelte";
+export { default as Root } from "./components/switch.svelte";
+export { default as Thumb } from "./components/switch-thumb.svelte";
+export { default as Input } from "./components/switch-input.svelte";
 
-export {
-	Root,
-	Thumb,
-	Input,
-	//
-	Root as Switch,
-	Thumb as SwitchThumb,
-	Input as SwitchInput
-};
 export * from "./types.js";
diff --git a/src/lib/bits/tabs/components/TabsContent.svelte b/src/lib/bits/tabs/components/tabs-content.svelte
similarity index 100%
rename from src/lib/bits/tabs/components/TabsContent.svelte
rename to src/lib/bits/tabs/components/tabs-content.svelte
diff --git a/src/lib/bits/tabs/components/TabsList.svelte b/src/lib/bits/tabs/components/tabs-list.svelte
similarity index 100%
rename from src/lib/bits/tabs/components/TabsList.svelte
rename to src/lib/bits/tabs/components/tabs-list.svelte
diff --git a/src/lib/bits/tabs/components/TabsTrigger.svelte b/src/lib/bits/tabs/components/tabs-trigger.svelte
similarity index 100%
rename from src/lib/bits/tabs/components/TabsTrigger.svelte
rename to src/lib/bits/tabs/components/tabs-trigger.svelte
diff --git a/src/lib/bits/tabs/components/Tabs.svelte b/src/lib/bits/tabs/components/tabs.svelte
similarity index 100%
rename from src/lib/bits/tabs/components/Tabs.svelte
rename to src/lib/bits/tabs/components/tabs.svelte
diff --git a/src/lib/bits/tabs/index.ts b/src/lib/bits/tabs/index.ts
index 2ded3b472..893503867 100644
--- a/src/lib/bits/tabs/index.ts
+++ b/src/lib/bits/tabs/index.ts
@@ -1,17 +1,6 @@
-import Root from "./components/Tabs.svelte";
-import Content from "./components/TabsContent.svelte";
-import List from "./components/TabsList.svelte";
-import Trigger from "./components/TabsTrigger.svelte";
+export { default as Root } from "./components/tabs.svelte";
+export { default as Content } from "./components/tabs-content.svelte";
+export { default as List } from "./components/tabs-list.svelte";
+export { default as Trigger } from "./components/tabs-trigger.svelte";
 
-export {
-	Root,
-	Content,
-	List,
-	Trigger,
-	//
-	Root as Tabs,
-	Content as TabsContent,
-	List as TabsList,
-	Trigger as TabsTrigger
-};
 export * from "./types.js";
diff --git a/src/lib/bits/toggle-group/components/ToggleGroupItem.svelte b/src/lib/bits/toggle-group/components/toggle-group-item.svelte
similarity index 100%
rename from src/lib/bits/toggle-group/components/ToggleGroupItem.svelte
rename to src/lib/bits/toggle-group/components/toggle-group-item.svelte
diff --git a/src/lib/bits/toggle-group/components/ToggleGroup.svelte b/src/lib/bits/toggle-group/components/toggle-group.svelte
similarity index 100%
rename from src/lib/bits/toggle-group/components/ToggleGroup.svelte
rename to src/lib/bits/toggle-group/components/toggle-group.svelte
diff --git a/src/lib/bits/toggle-group/index.ts b/src/lib/bits/toggle-group/index.ts
index 714d3b466..fbdbd29c7 100644
--- a/src/lib/bits/toggle-group/index.ts
+++ b/src/lib/bits/toggle-group/index.ts
@@ -1,11 +1,4 @@
-import Root from "./components/ToggleGroup.svelte";
-import Item from "./components/ToggleGroupItem.svelte";
+export { default as Root } from "./components/toggle-group.svelte";
+export { default as Item } from "./components/toggle-group-item.svelte";
 
-export {
-	Root,
-	Item,
-	//
-	Root as ToggleGroup,
-	Item as ToggleGroupItem
-};
 export * from "./types.js";
diff --git a/src/lib/bits/toggle/components/Toggle.svelte b/src/lib/bits/toggle/components/toggle.svelte
similarity index 100%
rename from src/lib/bits/toggle/components/Toggle.svelte
rename to src/lib/bits/toggle/components/toggle.svelte
diff --git a/src/lib/bits/toggle/index.ts b/src/lib/bits/toggle/index.ts
index 258db4270..24faddf5b 100644
--- a/src/lib/bits/toggle/index.ts
+++ b/src/lib/bits/toggle/index.ts
@@ -1,8 +1,2 @@
-import Root from "./components/Toggle.svelte";
-
-export {
-	Root,
-	//
-	Root as Toggle
-};
+export { default as Root } from "./components/toggle.svelte";
 export * from "./types.js";
diff --git a/src/lib/bits/tooltip/components/TooltipArrow.svelte b/src/lib/bits/tooltip/components/tooltip-arrow.svelte
similarity index 100%
rename from src/lib/bits/tooltip/components/TooltipArrow.svelte
rename to src/lib/bits/tooltip/components/tooltip-arrow.svelte
diff --git a/src/lib/bits/tooltip/components/TooltipContent.svelte b/src/lib/bits/tooltip/components/tooltip-content.svelte
similarity index 100%
rename from src/lib/bits/tooltip/components/TooltipContent.svelte
rename to src/lib/bits/tooltip/components/tooltip-content.svelte
diff --git a/src/lib/bits/tooltip/components/TooltipTrigger.svelte b/src/lib/bits/tooltip/components/tooltip-trigger.svelte
similarity index 100%
rename from src/lib/bits/tooltip/components/TooltipTrigger.svelte
rename to src/lib/bits/tooltip/components/tooltip-trigger.svelte
diff --git a/src/lib/bits/tooltip/components/Tooltip.svelte b/src/lib/bits/tooltip/components/tooltip.svelte
similarity index 100%
rename from src/lib/bits/tooltip/components/Tooltip.svelte
rename to src/lib/bits/tooltip/components/tooltip.svelte
diff --git a/src/lib/bits/tooltip/index.ts b/src/lib/bits/tooltip/index.ts
index 65fc4fd29..d301f9985 100644
--- a/src/lib/bits/tooltip/index.ts
+++ b/src/lib/bits/tooltip/index.ts
@@ -1,17 +1,6 @@
-import Root from "./components/Tooltip.svelte";
-import Content from "./components/TooltipContent.svelte";
-import Trigger from "./components/TooltipTrigger.svelte";
-import Arrow from "./components/TooltipArrow.svelte";
+export { default as Root } from "./components/tooltip.svelte";
+export { default as Content } from "./components/tooltip-content.svelte";
+export { default as Trigger } from "./components/tooltip-trigger.svelte";
+export { default as Arrow } from "./components/tooltip-arrow.svelte";
 
-export {
-	Root,
-	Content,
-	Trigger,
-	Arrow,
-	//
-	Root as Tooltip,
-	Content as TooltipContent,
-	Trigger as TooltipTrigger,
-	Arrow as TooltipArrow
-};
 export * from "./types.js";
diff --git a/src/lib/internal/types.ts b/src/lib/internal/types.ts
index 63a9590f2..4a921ad8b 100644
--- a/src/lib/internal/types.ts
+++ b/src/lib/internal/types.ts
@@ -18,6 +18,16 @@ export type OmitChecked<T> = Omit<T, "checked" | "defaultChecked" | "onCheckedCh
 export type OmitPressed<T> = Omit<T, "pressed" | "defaultPressed" | "onPressedChange">;
 export type OmitForceVisible<T> = Omit<T, "forceVisible">;
 export type OmitIds<T> = Omit<T, "ids">;
+export type OmitDates<T> = Omit<
+	T,
+	| "value"
+	| "defaultValue"
+	| "placeholder"
+	| "defaultPlaceholder"
+	| "onPlaceholderChange"
+	| "onValueChange"
+	| "ids"
+>;
 
 export type OmitFloating<T> = OmitOpen<
 	Omit<T, "forceVisible" | "ids" | "arrowSize" | "positioning">
diff --git a/src/lib/shared/index.ts b/src/lib/shared/index.ts
index faa47916e..a6bd992ea 100644
--- a/src/lib/shared/index.ts
+++ b/src/lib/shared/index.ts
@@ -4,3 +4,14 @@ export type DateRange = {
 	start: DateValue | undefined;
 	end: DateValue | undefined;
 };
+
+export type SegmentPart =
+	| "month"
+	| "day"
+	| "year"
+	| "hour"
+	| "minute"
+	| "second"
+	| "dayPeriod"
+	| "timeZoneName"
+	| "literal";

From 74d94a3b381bd86aa1df597f0316a693d630dd4e Mon Sep 17 00:00:00 2001
From: Hunter Johnston <johnstonhuntera@gmail.com>
Date: Sun, 26 Nov 2023 17:27:51 -0500
Subject: [PATCH 140/217] date field init

---
 content/components/date-field.md              | 37 +++++++++++++++++++
 src/components/component-preview.svelte       |  4 +-
 src/components/demos/date-field-demo.svelte   | 25 +++++++++++++
 src/components/demos/index.ts                 |  1 +
 src/config/navigation.ts                      |  5 +++
 .../components/date-field-label.svelte        |  4 +-
 src/lib/bits/index.ts                         |  1 +
 7 files changed, 73 insertions(+), 4 deletions(-)
 create mode 100644 content/components/date-field.md
 create mode 100644 src/components/demos/date-field-demo.svelte

diff --git a/content/components/date-field.md b/content/components/date-field.md
new file mode 100644
index 000000000..886f06144
--- /dev/null
+++ b/content/components/date-field.md
@@ -0,0 +1,37 @@
+---
+title: Date Field
+description: A date field component.
+---
+
+<script>
+	import { APISection, ComponentPreview, DateFieldDemo } from '@/components'
+	export let schemas;
+</script>
+
+<ComponentPreview name="date-field-demo" comp="Date Field">
+
+<DateFieldDemo slot="preview" />
+
+</ComponentPreview>
+
+## Structure
+
+```svelte
+<script lang="ts">
+	import { DateField } from "$lib";
+</script>
+
+<DateField.Root>
+	<DateField.Label>Check-in date</DateField.Label>
+	<DateField.Field let:segments>
+		{#each segments as { part, value }}
+			<DateField.Segment {part}>
+				{value}
+			</DateField.Segment>
+		{/each}
+	</DateField.Field>
+	<DateField.Input />
+</DateField.Root>
+```
+
+<APISection {schemas} />
diff --git a/src/components/component-preview.svelte b/src/components/component-preview.svelte
index da1e1b0e5..92bca91b7 100644
--- a/src/components/component-preview.svelte
+++ b/src/components/component-preview.svelte
@@ -71,11 +71,11 @@
 		</Tabs.Content>
 		<Tabs.Content
 			value="preview"
-			class="relative rounded-card border-2 border-muted bg-zinc-50 focus-visible:outline-none dark:bg-[#1f1f21]"
+			class="relative rounded-card border-2 border-muted bg-zinc-50 focus-visible:outline-none  dark:bg-[#1f1f21]"
 		>
 			<div
 				class={cn(
-					"preview flex min-h-[443px] w-full justify-center p-12",
+					"preview relative flex min-h-[443px] w-full justify-center p-12",
 					{
 						"items-center": align === "center",
 						"items-start": align === "start",
diff --git a/src/components/demos/date-field-demo.svelte b/src/components/demos/date-field-demo.svelte
new file mode 100644
index 000000000..3f106e30b
--- /dev/null
+++ b/src/components/demos/date-field-demo.svelte
@@ -0,0 +1,25 @@
+<script lang="ts">
+	import { DateField } from "$lib";
+</script>
+
+<div class="relative w-full max-w-[50%]">
+	<div class="h-full w-full">
+		<DateField.Root>
+			<DateField.Label class="select-none">Check-in date</DateField.Label>
+			<DateField.Field
+				let:segments
+				class="flex h-input w-full max-w-[300px] items-center rounded-input border border-border-input p-3 shadow-mini"
+			>
+				{#each segments as { part, value }}
+					<DateField.Segment
+						{part}
+						class="grow-0 rounded-5px p-0.5 focus-visible:bg-foreground focus-visible:text-background focus-visible:outline-none data-[segment=literal]:text-muted-foreground"
+					>
+						{value}
+					</DateField.Segment>
+				{/each}
+			</DateField.Field>
+			<DateField.Input />
+		</DateField.Root>
+	</div>
+</div>
diff --git a/src/components/demos/index.ts b/src/components/demos/index.ts
index 8fd33ef4c..047d2cf79 100644
--- a/src/components/demos/index.ts
+++ b/src/components/demos/index.ts
@@ -7,6 +7,7 @@ export { default as CalendarDemo } from "./calendar-demo.svelte";
 export { default as CheckboxDemo } from "./checkbox-demo.svelte";
 export { default as CollapsibleDemo } from "./collapsible-demo.svelte";
 export { default as ContextMenuDemo } from "./context-menu-demo.svelte";
+export { default as DateFieldDemo } from "./date-field-demo.svelte";
 export { default as DialogDemo } from "./dialog-demo.svelte";
 export { default as DropdownMenuDemo } from "./dropdown-menu-demo.svelte";
 export { default as LabelDemo } from "./label-demo.svelte";
diff --git a/src/config/navigation.ts b/src/config/navigation.ts
index 36a09d0ae..1d14aceb9 100644
--- a/src/config/navigation.ts
+++ b/src/config/navigation.ts
@@ -100,6 +100,11 @@ export const navigation: Navigation = {
 					href: "/docs/components/context-menu",
 					items: []
 				},
+				{
+					title: "Date Field",
+					href: "/docs/components/date-field",
+					items: []
+				},
 				{
 					title: "Dialog",
 					href: "/docs/components/dialog",
diff --git a/src/lib/bits/date-field/components/date-field-label.svelte b/src/lib/bits/date-field/components/date-field-label.svelte
index 1a857689b..52773b0d5 100644
--- a/src/lib/bits/date-field/components/date-field-label.svelte
+++ b/src/lib/bits/date-field/components/date-field-label.svelte
@@ -29,7 +29,7 @@
 {#if asChild}
 	<slot {...slotProps} />
 {:else}
-	<div use:melt={builder} {...$$restProps} {...attrs}>
+	<span use:melt={builder} {...$$restProps} {...attrs}>
 		<slot {...slotProps} />
-	</div>
+	</span>
 {/if}
diff --git a/src/lib/bits/index.ts b/src/lib/bits/index.ts
index 9a79ba5bf..e98fe18af 100644
--- a/src/lib/bits/index.ts
+++ b/src/lib/bits/index.ts
@@ -7,6 +7,7 @@ export * as Calendar from "./calendar/index.js";
 export * as Checkbox from "./checkbox/index.js";
 export * as Collapsible from "./collapsible/index.js";
 export * as ContextMenu from "./context-menu/index.js";
+export * as DateField from "./date-field/index.js";
 export * as Dialog from "./dialog/index.js";
 export * as DropdownMenu from "./dropdown-menu/index.js";
 export * as LinkPreview from "./link-preview/index.js";

From bfe2399db73847a1260d557b86c92093852f5721 Mon Sep 17 00:00:00 2001
From: Hunter Johnston <johnstonhuntera@gmail.com>
Date: Sun, 26 Nov 2023 17:49:56 -0500
Subject: [PATCH 141/217] styles

---
 content/components/date-field.md              |  2 ++
 src/components/component-preview.svelte       |  2 +-
 src/components/demos/date-field-demo.svelte   | 30 +++++++++----------
 .../components/date-field-field.svelte        |  2 +-
 .../components/date-field-segment.svelte      |  2 +-
 5 files changed, 20 insertions(+), 18 deletions(-)

diff --git a/content/components/date-field.md b/content/components/date-field.md
index 886f06144..8e88c9746 100644
--- a/content/components/date-field.md
+++ b/content/components/date-field.md
@@ -35,3 +35,5 @@ description: A date field component.
 ```
 
 <APISection {schemas} />
+
+<DateFieldDemo />
diff --git a/src/components/component-preview.svelte b/src/components/component-preview.svelte
index 92bca91b7..413a82c02 100644
--- a/src/components/component-preview.svelte
+++ b/src/components/component-preview.svelte
@@ -75,7 +75,7 @@
 		>
 			<div
 				class={cn(
-					"preview relative flex min-h-[443px] w-full justify-center p-12",
+					"preview flex min-h-[443px] w-full justify-center p-12",
 					{
 						"items-center": align === "center",
 						"items-start": align === "start",
diff --git a/src/components/demos/date-field-demo.svelte b/src/components/demos/date-field-demo.svelte
index 3f106e30b..8257482ca 100644
--- a/src/components/demos/date-field-demo.svelte
+++ b/src/components/demos/date-field-demo.svelte
@@ -2,24 +2,24 @@
 	import { DateField } from "$lib";
 </script>
 
-<div class="relative w-full max-w-[50%]">
-	<div class="h-full w-full">
-		<DateField.Root>
-			<DateField.Label class="select-none">Check-in date</DateField.Label>
-			<DateField.Field
-				let:segments
-				class="flex h-input w-full max-w-[300px] items-center rounded-input border border-border-input p-3 shadow-mini"
-			>
-				{#each segments as { part, value }}
+<DateField.Root>
+	<div class="flex min-w-[200px] flex-col gap-1">
+		<DateField.Label class="block select-none">Check-in date</DateField.Label>
+		<DateField.Field
+			let:segments
+			class="flex h-input w-full max-w-[300px] grow-0 select-none items-center rounded-input border border-border-input p-3 shadow-mini"
+		>
+			{#each segments as { part, value }}
+				<div class="inline-block select-none px-0.5">
 					<DateField.Segment
 						{part}
-						class="grow-0 rounded-5px p-0.5 focus-visible:bg-foreground focus-visible:text-background focus-visible:outline-none data-[segment=literal]:text-muted-foreground"
+						class="rounded-[3px] focus-visible:bg-foreground focus-visible:font-medium focus-visible:text-background focus-visible:outline-none data-[segment=literal]:text-muted-foreground"
 					>
 						{value}
 					</DateField.Segment>
-				{/each}
-			</DateField.Field>
-			<DateField.Input />
-		</DateField.Root>
+				</div>
+			{/each}
+		</DateField.Field>
 	</div>
-</div>
+	<DateField.Input />
+</DateField.Root>
diff --git a/src/lib/bits/date-field/components/date-field-field.svelte b/src/lib/bits/date-field/components/date-field-field.svelte
index 21d5d82b2..852504cf2 100644
--- a/src/lib/bits/date-field/components/date-field-field.svelte
+++ b/src/lib/bits/date-field/components/date-field-field.svelte
@@ -14,7 +14,7 @@
 		ids
 	} = getCtx();
 
-	if (id) {
+	$: if (id) {
 		ids.field.set(id);
 	}
 
diff --git a/src/lib/bits/date-field/components/date-field-segment.svelte b/src/lib/bits/date-field/components/date-field-segment.svelte
index e91ec30b6..d013e08ba 100644
--- a/src/lib/bits/date-field/components/date-field-segment.svelte
+++ b/src/lib/bits/date-field/components/date-field-segment.svelte
@@ -14,7 +14,7 @@
 		ids
 	} = getCtx();
 
-	if (id && part !== "literal") {
+	$: if (id && part !== "literal") {
 		ids[part].set(id);
 	}
 

From f1c99e490910b4ce35b068fba5e93814eca4e53d Mon Sep 17 00:00:00 2001
From: Hunter Johnston <johnstonhuntera@gmail.com>
Date: Sun, 26 Nov 2023 21:36:49 -0500
Subject: [PATCH 142/217] add easing to progress

---
 src/components/demos/progress-demo.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/demos/progress-demo.svelte b/src/components/demos/progress-demo.svelte
index 1616fb69c..f3b4a5c39 100644
--- a/src/components/demos/progress-demo.svelte
+++ b/src/components/demos/progress-demo.svelte
@@ -15,7 +15,7 @@
 	class="relative h-[15px] w-[60%] overflow-hidden rounded-full bg-dark-10 shadow-mini-inset"
 >
 	<div
-		class="h-full w-full flex-1 rounded-full bg-foreground shadow-mini-inset transition-all"
+		class="h-full w-full flex-1 rounded-full bg-foreground shadow-mini-inset transition-all duration-300 ease-linear"
 		style={`transform: translateX(-${
 			100 - (100 * (value ?? 0)) / (100 ?? 1)
 		}%)`}

From f47cceaa68715c0e565c92fb038a7756a3f7f39e Mon Sep 17 00:00:00 2001
From: Hunter Johnston <johnstonhuntera@gmail.com>
Date: Sun, 26 Nov 2023 21:39:44 -0500
Subject: [PATCH 143/217] context menu icons

---
 content/delegation.md                         | 2 +-
 src/components/demos/context-menu-demo.svelte | 8 ++++----
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/content/delegation.md b/content/delegation.md
index d85d00255..80744084e 100644
--- a/content/delegation.md
+++ b/content/delegation.md
@@ -1,6 +1,6 @@
 ---
 title: Render Delegation
-description: Learn how to use the asChild prop to delegate rendering to a child element / component.
+description: Learn how to use the asChild prop to render your own elements.
 ---
 
 ## Usage
diff --git a/src/components/demos/context-menu-demo.svelte b/src/components/demos/context-menu-demo.svelte
index 71bab89d8..311f0a3a8 100644
--- a/src/components/demos/context-menu-demo.svelte
+++ b/src/components/demos/context-menu-demo.svelte
@@ -27,7 +27,7 @@
 			class="flex h-10 select-none items-center rounded-button py-3 pl-3 pr-1.5 text-sm font-medium outline-none transition-all duration-75 data-[highlighted]:bg-muted"
 		>
 			<div class="flex items-center">
-				<PencilSimpleLine class="mr-2 text-foreground-alt sq-[22px]" />
+				<PencilSimpleLine class="mr-2 text-foreground-alt sq-5" />
 				Edit
 			</div>
 			<div class="ml-auto flex items-center gap-px">
@@ -48,7 +48,7 @@
 				class="flex h-10 select-none items-center rounded-button py-3 pl-3 pr-1.5 text-sm font-medium outline-none transition-all duration-75 data-[highlighted]:bg-muted data-[state=open]:bg-muted"
 			>
 				<div class="flex items-center">
-					<PlusCircle class="mr-2 text-foreground-alt sq-[22px]" />
+					<PlusCircle class="mr-2 text-foreground-alt sq-5" />
 					Add
 				</div>
 				<div class="ml-auto flex items-center gap-px">
@@ -100,7 +100,7 @@
 			class="flex h-10 select-none items-center rounded-button py-3 pl-3 pr-1.5 text-sm font-medium outline-none transition-all duration-75 data-[highlighted]:bg-muted"
 		>
 			<div class="flex items-center">
-				<CopySimple class="mr-2 text-foreground-alt sq-[22px]" />
+				<CopySimple class="mr-2 text-foreground-alt sq-5" />
 				Duplicate
 			</div>
 			<div class="ml-auto flex items-center gap-px">
@@ -121,7 +121,7 @@
 			class="flex h-10 select-none items-center rounded-button py-3 pl-3 pr-1.5 text-sm font-medium outline-none transition-all duration-75 data-[highlighted]:bg-muted"
 		>
 			<div class="flex items-center">
-				<Trash class="mr-2 text-foreground-alt sq-[22px]" />
+				<Trash class="mr-2 text-foreground-alt sq-5" />
 				Delete
 			</div>
 		</ContextMenu.Item>

From b30c736cab3037940346cd170137a2b602758229 Mon Sep 17 00:00:00 2001
From: Hunter Johnston <johnstonhuntera@gmail.com>
Date: Mon, 27 Nov 2023 09:40:49 -0500
Subject: [PATCH 144/217] accordion

---
 src/components/demos/accordion-demo.svelte | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/demos/accordion-demo.svelte b/src/components/demos/accordion-demo.svelte
index af1863572..bd0b2e070 100644
--- a/src/components/demos/accordion-demo.svelte
+++ b/src/components/demos/accordion-demo.svelte
@@ -10,12 +10,12 @@
 				"Task management, messaging, file sharing, progress tracking, and reporting for your team."
 		},
 		{
-			title: "Advantages of our Platform",
+			title: "Platform Advantages",
 			content:
 				"Experience improved productivity, enhanced communication, and customizable project views for project execution."
 		},
 		{
-			title: "Effective Implementation Strategies",
+			title: "Implementation Strategies",
 			content:
 				"Define clear goals, provide training, encourage adoption, and iterate based on feedback."
 		}

From 673655718576d88ec856b360b07329a0c29868e9 Mon Sep 17 00:00:00 2001
From: Hunter Johnston <johnstonhuntera@gmail.com>
Date: Mon, 27 Nov 2023 09:50:26 -0500
Subject: [PATCH 145/217] cleanup date field

---
 src/components/demos/date-field-demo.svelte |  6 +--
 src/styles/themes/serendipity-morning.json  | 52 ++++++++++-----------
 2 files changed, 29 insertions(+), 29 deletions(-)

diff --git a/src/components/demos/date-field-demo.svelte b/src/components/demos/date-field-demo.svelte
index 8257482ca..5e04487ec 100644
--- a/src/components/demos/date-field-demo.svelte
+++ b/src/components/demos/date-field-demo.svelte
@@ -7,13 +7,13 @@
 		<DateField.Label class="block select-none">Check-in date</DateField.Label>
 		<DateField.Field
 			let:segments
-			class="flex h-input w-full max-w-[300px] grow-0 select-none items-center rounded-input border border-border-input p-3 shadow-mini"
+			class="flex h-input w-full max-w-[300px] select-none items-center rounded-input border border-border-input p-3 shadow-mini"
 		>
 			{#each segments as { part, value }}
-				<div class="inline-block select-none px-0.5">
+				<div class="inline-block select-none">
 					<DateField.Segment
 						{part}
-						class="rounded-[3px] focus-visible:bg-foreground focus-visible:font-medium focus-visible:text-background focus-visible:outline-none data-[segment=literal]:text-muted-foreground"
+						class="rounded-[3px] px-1 focus-visible:bg-foreground focus-visible:font-medium focus-visible:text-background focus-visible:outline-none data-[segment=literal]:px-0.5 data-[segment=literal]:text-muted-foreground"
 					>
 						{value}
 					</DateField.Segment>
diff --git a/src/styles/themes/serendipity-morning.json b/src/styles/themes/serendipity-morning.json
index 041659951..80c417b7a 100644
--- a/src/styles/themes/serendipity-morning.json
+++ b/src/styles/themes/serendipity-morning.json
@@ -27,7 +27,7 @@
 		"button.secondaryHoverBackground": "#D8DAE4",
 		"charts.lines": "#5F6488",
 		"charts.foreground": "#4E5377",
-		"charts.blue": "#4172D2",
+		"charts.blue": "#4F86AD",
 		"charts.green": "#3788BE",
 		"charts.orange": "#F19A8E",
 		"charts.purple": "#77AAB3",
@@ -58,7 +58,7 @@
 		"descriptionForeground": "#5F6488",
 		"diffEditor.border": "#D8DAE4",
 		"diffEditor.diagonalFill": "#6e6a8626",
-		"diffEditor.insertedTextBackground": "#4172D220",
+		"diffEditor.insertedTextBackground": "#4F86AD20",
 		"diffEditor.insertedTextBorder": "#FDFDFEB0",
 		"diffEditor.removedTextBackground": "#D26A5D29",
 		"diffEditor.removedTextBorder": "#FDFDFEB0",
@@ -101,7 +101,7 @@
 		"editorBracketHighlight.foreground1": "#D26A5D80",
 		"editorBracketHighlight.foreground2": "#3788BE80",
 		"editorBracketHighlight.foreground3": "#886CDB80",
-		"editorBracketHighlight.foreground4": "#4172D280",
+		"editorBracketHighlight.foreground4": "#4F86AD80",
 		"editorBracketHighlight.foreground5": "#F19A8E80",
 		"editorBracketHighlight.foreground6": "#77AAB380",
 		"editorBracketMatch.background": "#0000",
@@ -109,13 +109,13 @@
 		"editorBracketPairGuide.activeBackground1": "#3788BE",
 		"editorBracketPairGuide.activeBackground2": "#F19A8E",
 		"editorBracketPairGuide.activeBackground3": "#77AAB3",
-		"editorBracketPairGuide.activeBackground4": "#4172D2",
+		"editorBracketPairGuide.activeBackground4": "#4F86AD",
 		"editorBracketPairGuide.activeBackground5": "#886CDB",
 		"editorBracketPairGuide.activeBackground6": "#D26A5D",
 		"editorBracketPairGuide.background1": "#3788BE80",
 		"editorBracketPairGuide.background2": "#F19A8E80",
 		"editorBracketPairGuide.background3": "#77AAB380",
-		"editorBracketPairGuide.background4": "#4172D280",
+		"editorBracketPairGuide.background4": "#4F86AD80",
 		"editorBracketPairGuide.background5": "#886CDB80",
 		"editorBracketPairGuide.background6": "#D26A5D80",
 		"editorCodeLens.foreground": "#F19A8E",
@@ -131,7 +131,7 @@
 		"editorGroupHeader.noTabsBackground": "#0000",
 		"editorGroupHeader.tabsBackground": "#0000",
 		"editorGroupHeader.tabsBorder": "#0000",
-		"editorGutter.addedBackground": "#4172D2",
+		"editorGutter.addedBackground": "#4F86AD",
 		"editorGutter.background": "#0000",
 		"editorGutter.commentRangeForeground": "#5F6488",
 		"editorGutter.deletedBackground": "#D26A5D",
@@ -147,13 +147,13 @@
 		"editorIndentGuide.activeBackground": "#8388AD",
 		"editorIndentGuide.background": "#6e6a8626",
 		"editorInfo.border": "#D8DAE4",
-		"editorInfo.foreground": "#4172D2",
+		"editorInfo.foreground": "#4F86AD",
 		"editorInlayHint.background": "#D8DAE4",
 		"editorInlayHint.foreground": "#5F6488",
 		"editorInlayHint.parameterBackground": "#D8DAE4",
 		"editorInlayHint.parameterForeground": "#77AAB3",
 		"editorInlayHint.typeBackground": "#D8DAE4",
-		"editorInlayHint.typeForeground": "#4172D2",
+		"editorInlayHint.typeForeground": "#4F86AD",
 		"editorLightBulb.foreground": "#3788BE",
 		"editorLightBulbAutoFix.foreground": "#F19A8E",
 		"editorLineNumber.activeForeground": "#4E5377",
@@ -163,7 +163,7 @@
 		"editorMarkerNavigationError.background": "#F1F1F4",
 		"editorMarkerNavigationInfo.background": "#F1F1F4",
 		"editorMarkerNavigationWarning.background": "#F1F1F4",
-		"editorOverviewRuler.addedForeground": "#4172D280",
+		"editorOverviewRuler.addedForeground": "#4F86AD80",
 		"editorOverviewRuler.background": "#FDFDFE",
 		"editorOverviewRuler.border": "#6e6a8626",
 		"editorOverviewRuler.bracketMatchForeground": "#5F6488",
@@ -173,7 +173,7 @@
 		"editorOverviewRuler.errorForeground": "#D26A5D80",
 		"editorOverviewRuler.findMatchForeground": "#6e6a8626",
 		"editorOverviewRuler.incomingContentForeground": "#77AAB380",
-		"editorOverviewRuler.infoForeground": "#4172D280",
+		"editorOverviewRuler.infoForeground": "#4F86AD80",
 		"editorOverviewRuler.modifiedForeground": "#F19A8E80",
 		"editorOverviewRuler.rangeHighlightForeground": "#6e6a8626",
 		"editorOverviewRuler.selectionHighlightForeground": "#6e6a8626",
@@ -209,7 +209,7 @@
 		"extensionIcon.verifiedForeground": "#77AAB3",
 		"focusBorder": "#6e6a8614",
 		"foreground": "#4E5377",
-		"gitDecoration.addedResourceForeground": "#4172D2",
+		"gitDecoration.addedResourceForeground": "#4F86AD",
 		"gitDecoration.conflictingResourceForeground": "#D26A5D",
 		"gitDecoration.deletedResourceForeground": "#5F6488",
 		"gitDecoration.ignoredResourceForeground": "#8388AD",
@@ -232,10 +232,10 @@
 		"inputValidation.errorForeground": "#D26A5D",
 		"inputValidation.infoBackground": "#0000",
 		"inputValidation.infoBorder": "#0000",
-		"inputValidation.infoForeground": "#4172D2",
+		"inputValidation.infoForeground": "#4F86AD",
 		"inputValidation.warningBackground": "#0000",
 		"inputValidation.warningBorder": "#0000",
-		"inputValidation.warningForeground": "#4172D280",
+		"inputValidation.warningForeground": "#4F86AD80",
 		"keybindingLabel.background": "#D8DAE4",
 		"keybindingLabel.border": "#6e6a8626",
 		"keybindingLabel.bottomBorder": "#6e6a8626",
@@ -280,14 +280,14 @@
 		"merge.commonHeaderBackground": "#6e6a8614",
 		"merge.currentContentBackground": "#886CDB80",
 		"merge.currentHeaderBackground": "#886CDB80",
-		"merge.incomingContentBackground": "#4172D280",
-		"merge.incomingHeaderBackground": "#4172D280",
+		"merge.incomingContentBackground": "#4F86AD80",
+		"merge.incomingHeaderBackground": "#4F86AD80",
 		"minimap.background": "#F1F1F4",
 		"minimap.errorHighlight": "#D26A5D80",
 		"minimap.findMatchHighlight": "#6e6a8614",
 		"minimap.selectionHighlight": "#6e6a8614",
 		"minimap.warningHighlight": "#886CDB80",
-		"minimapGutter.addedBackground": "#4172D2",
+		"minimapGutter.addedBackground": "#4F86AD",
 		"minimapGutter.deletedBackground": "#D26A5D",
 		"minimapGutter.modifiedBackground": "#F19A8E",
 		"minimapSlider.activeBackground": "#6e6a8626",
@@ -301,7 +301,7 @@
 		"notifications.border": "#6e6a8614",
 		"notifications.foreground": "#4E5377",
 		"notificationsErrorIcon.foreground": "#D26A5D",
-		"notificationsInfoIcon.foreground": "#4172D2",
+		"notificationsInfoIcon.foreground": "#4F86AD",
 		"notificationsWarningIcon.foreground": "#886CDB",
 		"notificationToast.border": "#6e6a8614",
 		"panel.background": "#F1F1F4",
@@ -329,7 +329,7 @@
 		"pickerGroup.foreground": "#77AAB3",
 		"ports.iconRunningProcessForeground": "#F19A8E",
 		"problemsErrorIcon.foreground": "#D26A5D",
-		"problemsInfoIcon.foreground": "#4172D2",
+		"problemsInfoIcon.foreground": "#4F86AD",
 		"problemsWarningIcon.foreground": "#886CDB",
 		"progressBar.background": "#F19A8E",
 		"quickInput.background": "#F1F1F4",
@@ -402,23 +402,23 @@
 		"symbolIcon.variableForeground": "#5F6488",
 		"tab.activeBackground": "#6e6a860d",
 		"tab.activeForeground": "#4E5377",
-		"tab.activeModifiedBorder": "#4172D2",
+		"tab.activeModifiedBorder": "#4F86AD",
 		"tab.border": "#0000",
 		"tab.hoverBackground": "#6e6a8614",
 		"tab.inactiveBackground": "#0000",
 		"tab.inactiveForeground": "#5F6488",
-		"tab.inactiveModifiedBorder": "#4172D280",
+		"tab.inactiveModifiedBorder": "#4F86AD80",
 		"tab.lastPinnedBorder": "#8388AD",
 		"tab.unfocusedActiveBackground": "#0000",
 		"tab.unfocusedHoverBackground": "#0000",
 		"tab.unfocusedInactiveBackground": "#0000",
-		"tab.unfocusedInactiveModifiedBorder": "#4172D280",
+		"tab.unfocusedInactiveModifiedBorder": "#4F86AD80",
 		"terminal.ansiWhite": "#4E5377",
 		"terminal.ansiBrightWhite": "#4E5377",
 		"terminal.ansiBlack": "#D8DAE4",
 		"terminal.ansiBrightBlack": "#5F6488",
-		"terminal.ansiBlue": "#4172D2",
-		"terminal.ansiBrightBlue": "#4172D2",
+		"terminal.ansiBlue": "#4F86AD",
+		"terminal.ansiBrightBlue": "#4F86AD",
 		"terminal.ansiCyan": "#F19A8E",
 		"terminal.ansiBrightCyan": "#F19A8E",
 		"terminal.ansiGreen": "#3788BE",
@@ -491,7 +491,7 @@
 				"entity.name.type"
 			],
 			"settings": {
-				"foreground": "#4172D2"
+				"foreground": "#4F86AD"
 			}
 		},
 		{
@@ -541,7 +541,7 @@
 		{
 			"scope": "meta.property-name.css",
 			"settings": {
-				"foreground": "#4172D2"
+				"foreground": "#4F86AD"
 			}
 		},
 		{
@@ -595,7 +595,7 @@
 		{
 			"scope": ["support"],
 			"settings": {
-				"foreground": "#4172D2"
+				"foreground": "#4F86AD"
 			}
 		},
 		{

From 88f954a507d46e982bb32b5ed26c4c5cdb64b461 Mon Sep 17 00:00:00 2001
From: Hunter Johnston <johnstonhuntera@gmail.com>
Date: Mon, 27 Nov 2023 11:05:23 -0500
Subject: [PATCH 146/217] date field / date range field refactor

---
 content/components/date-field.md              |   5 +-
 content/components/date-range-field.md        |  36 ++++
 src/components/demos/date-field-demo.svelte   |   9 +-
 .../demos/date-range-field-demo.svelte        |  39 ++++
 src/components/demos/index.ts                 |   1 +
 src/config/navigation.ts                      |   5 +
 src/lib/bits/date-field/_types.ts             |  18 +-
 .../components/date-field-input.svelte        |  18 +-
 .../date-field/components/date-field.svelte   |  67 ++++++-
 src/lib/bits/date-field/ctx.ts                |   2 +-
 src/lib/bits/date-field/index.ts              |   1 -
 src/lib/bits/date-field/types.ts              |   9 +-
 src/lib/bits/date-range-field/_types.ts       |  67 +++++++
 .../components/date-range-field-input.svelte} |  13 +-
 .../components/date-range-field-label.svelte  |  35 ++++
 .../date-range-field-segment.svelte           |  42 ++++
 .../components/date-range-field.svelte        | 188 ++++++++++++++++++
 src/lib/bits/date-range-field/ctx.ts          |  28 +++
 src/lib/bits/date-range-field/index.ts        |   6 +
 src/lib/bits/date-range-field/types.ts        |  12 ++
 src/lib/bits/index.ts                         |   1 +
 21 files changed, 567 insertions(+), 35 deletions(-)
 create mode 100644 content/components/date-range-field.md
 create mode 100644 src/components/demos/date-range-field-demo.svelte
 create mode 100644 src/lib/bits/date-range-field/_types.ts
 rename src/lib/bits/{date-field/components/date-field-field.svelte => date-range-field/components/date-range-field-input.svelte} (70%)
 create mode 100644 src/lib/bits/date-range-field/components/date-range-field-label.svelte
 create mode 100644 src/lib/bits/date-range-field/components/date-range-field-segment.svelte
 create mode 100644 src/lib/bits/date-range-field/components/date-range-field.svelte
 create mode 100644 src/lib/bits/date-range-field/ctx.ts
 create mode 100644 src/lib/bits/date-range-field/index.ts
 create mode 100644 src/lib/bits/date-range-field/types.ts

diff --git a/content/components/date-field.md b/content/components/date-field.md
index 8e88c9746..9c72331bb 100644
--- a/content/components/date-field.md
+++ b/content/components/date-field.md
@@ -23,14 +23,13 @@ description: A date field component.
 
 <DateField.Root>
 	<DateField.Label>Check-in date</DateField.Label>
-	<DateField.Field let:segments>
+	<DateField.Input let:segments>
 		{#each segments as { part, value }}
 			<DateField.Segment {part}>
 				{value}
 			</DateField.Segment>
 		{/each}
-	</DateField.Field>
-	<DateField.Input />
+	</DateField.Input>
 </DateField.Root>
 ```
 
diff --git a/content/components/date-range-field.md b/content/components/date-range-field.md
new file mode 100644
index 000000000..246f7400a
--- /dev/null
+++ b/content/components/date-range-field.md
@@ -0,0 +1,36 @@
+---
+title: Date Range Field
+description: A date range field component.
+---
+
+<script>
+	import { APISection, ComponentPreview, DateRangeFieldDemo } from '@/components'
+	export let schemas;
+</script>
+
+<ComponentPreview name="date-range-field-demo" comp="Date Range Field">
+
+<DateRangeFieldDemo slot="preview" />
+
+</ComponentPreview>
+
+## Structure
+
+```svelte
+<script lang="ts">
+	import { DateField } from "$lib";
+</script>
+
+<DateField.Root>
+	<DateField.Label>Check-in date</DateField.Label>
+	<DateField.Input let:segments>
+		{#each segments as { part, value }}
+			<DateField.Segment {part}>
+				{value}
+			</DateField.Segment>
+		{/each}
+	</DateField.Input>
+</DateField.Root>
+```
+
+<APISection {schemas} />
diff --git a/src/components/demos/date-field-demo.svelte b/src/components/demos/date-field-demo.svelte
index 5e04487ec..456a52906 100644
--- a/src/components/demos/date-field-demo.svelte
+++ b/src/components/demos/date-field-demo.svelte
@@ -5,21 +5,20 @@
 <DateField.Root>
 	<div class="flex min-w-[200px] flex-col gap-1">
 		<DateField.Label class="block select-none">Check-in date</DateField.Label>
-		<DateField.Field
+		<DateField.Input
 			let:segments
-			class="flex h-input w-full max-w-[300px] select-none items-center rounded-input border border-border-input p-3 shadow-mini"
+			class="flex h-input w-full max-w-[300px] select-none items-center rounded-input border border-border-input bg-background p-3 text-sm shadow-mini"
 		>
 			{#each segments as { part, value }}
 				<div class="inline-block select-none">
 					<DateField.Segment
 						{part}
-						class="rounded-[3px] px-1 focus-visible:bg-foreground focus-visible:font-medium focus-visible:text-background focus-visible:outline-none data-[segment=literal]:px-0.5 data-[segment=literal]:text-muted-foreground"
+						class="rounded-[3px] px-1 focus-visible:bg-foreground focus-visible:font-medium focus-visible:text-background focus-visible:outline-none data-[segment=literal]:px-px data-[segment=literal]:text-muted-foreground"
 					>
 						{value}
 					</DateField.Segment>
 				</div>
 			{/each}
-		</DateField.Field>
+		</DateField.Input>
 	</div>
-	<DateField.Input />
 </DateField.Root>
diff --git a/src/components/demos/date-range-field-demo.svelte b/src/components/demos/date-range-field-demo.svelte
new file mode 100644
index 000000000..3646679f0
--- /dev/null
+++ b/src/components/demos/date-range-field-demo.svelte
@@ -0,0 +1,39 @@
+<script lang="ts">
+	import { DateRangeField } from "$lib";
+</script>
+
+<DateRangeField.Root>
+	<div class="flex min-w-[200px] flex-col gap-1">
+		<DateRangeField.Label class="block select-none"
+			>Hotel dates</DateRangeField.Label
+		>
+		<DateRangeField.Input
+			let:segments
+			class="flex h-input w-full max-w-[300px] select-none items-center rounded-input border border-border-input bg-background p-3 text-sm shadow-mini"
+		>
+			{#each segments.start as { part, value }}
+				<div class="inline-block select-none">
+					<DateRangeField.Segment
+						type="start"
+						{part}
+						class="rounded-[3px] px-1 focus-visible:bg-foreground focus-visible:font-medium focus-visible:text-background focus-visible:outline-none data-[segment=literal]:px-px data-[segment=literal]:text-muted-foreground"
+					>
+						{value}
+					</DateRangeField.Segment>
+				</div>
+			{/each}
+			<div aria-hidden class="px-1">-</div>
+			{#each segments.end as { part, value }}
+				<div class="inline-block select-none">
+					<DateRangeField.Segment
+						type="end"
+						{part}
+						class="rounded-[3px] px-1 focus-visible:bg-foreground focus-visible:font-medium focus-visible:text-background focus-visible:outline-none data-[segment=literal]:px-px data-[segment=literal]:text-muted-foreground"
+					>
+						{value}
+					</DateRangeField.Segment>
+				</div>
+			{/each}
+		</DateRangeField.Input>
+	</div>
+</DateRangeField.Root>
diff --git a/src/components/demos/index.ts b/src/components/demos/index.ts
index 047d2cf79..ce58856a9 100644
--- a/src/components/demos/index.ts
+++ b/src/components/demos/index.ts
@@ -8,6 +8,7 @@ export { default as CheckboxDemo } from "./checkbox-demo.svelte";
 export { default as CollapsibleDemo } from "./collapsible-demo.svelte";
 export { default as ContextMenuDemo } from "./context-menu-demo.svelte";
 export { default as DateFieldDemo } from "./date-field-demo.svelte";
+export { default as DateRangeFieldDemo } from "./date-range-field-demo.svelte";
 export { default as DialogDemo } from "./dialog-demo.svelte";
 export { default as DropdownMenuDemo } from "./dropdown-menu-demo.svelte";
 export { default as LabelDemo } from "./label-demo.svelte";
diff --git a/src/config/navigation.ts b/src/config/navigation.ts
index 1d14aceb9..222d1e3fb 100644
--- a/src/config/navigation.ts
+++ b/src/config/navigation.ts
@@ -105,6 +105,11 @@ export const navigation: Navigation = {
 					href: "/docs/components/date-field",
 					items: []
 				},
+				{
+					title: "Date Range Field",
+					href: "/docs/components/date-range-field",
+					items: []
+				},
 				{
 					title: "Dialog",
 					href: "/docs/components/dialog",
diff --git a/src/lib/bits/date-field/_types.ts b/src/lib/bits/date-field/_types.ts
index c652993a0..33ba175b0 100644
--- a/src/lib/bits/date-field/_types.ts
+++ b/src/lib/bits/date-field/_types.ts
@@ -10,7 +10,7 @@ import type { DateValue } from "@internationalized/date";
 import type { CreateDateFieldProps } from "@melt-ui/svelte";
 
 type Props = Expand<
-	OmitDates<CreateDateFieldProps> & {
+	Omit<OmitDates<CreateDateFieldProps>, "required" | "name"> & {
 		/**
 		 * The value of the date field.
 		 * You can bind this to a `DateValue` object to programmatically control the value.
@@ -31,12 +31,24 @@ type Props = Expand<
 		 * A callback function called when the placeholder changes.
 		 */
 		onPlaceholderChange?: OnChangeFn<DateValue>;
+
+		/**
+		 * The id of the validation message element which is used to apply the
+		 * appropriate `aria-describedby` attribute to the input.
+		 */
+		validationId?: string;
+
+		/**
+		 * The id of the description element which is used to describe the input.
+		 * This is used to apply the appropriate `aria-describedby` attribute to the input.
+		 */
+		descriptionId?: string;
 	} & AsChild
 >;
 
 type InputProps = AsChild;
 
-type FieldProps = AsChild;
+type DescriptionProps = AsChild;
 
 type LabelProps = AsChild;
 
@@ -46,4 +58,4 @@ type SegmentProps = Expand<
 	} & AsChild
 >;
 
-export type { Props, FieldProps, LabelProps, InputProps, SegmentProps };
+export type { Props, LabelProps, DescriptionProps, InputProps, SegmentProps };
diff --git a/src/lib/bits/date-field/components/date-field-input.svelte b/src/lib/bits/date-field/components/date-field-input.svelte
index c9120736a..e0a654bf1 100644
--- a/src/lib/bits/date-field/components/date-field-input.svelte
+++ b/src/lib/bits/date-field/components/date-field-input.svelte
@@ -6,22 +6,32 @@
 	type $$Props = InputProps;
 
 	export let asChild: $$Props["asChild"] = false;
+	export let id: $$Props["id"] = undefined;
 
 	const {
-		elements: { hiddenInput }
+		elements: { field },
+		states: { segmentContents },
+		ids
 	} = getCtx();
 
+	$: if (id) {
+		ids.field.set(id);
+	}
+
 	const attrs = getAttrs("input");
 
-	$: builder = $hiddenInput;
+	$: builder = $field;
 	$: slotProps = {
 		builder,
-		attrs
+		attrs,
+		segments: $segmentContents
 	};
 </script>
 
 {#if asChild}
 	<slot {...slotProps} />
 {:else}
-	<input use:melt={builder} {...$$restProps} {...attrs} />
+	<div use:melt={builder} {...$$restProps} {...attrs}>
+		<slot {...slotProps} />
+	</div>
 {/if}
diff --git a/src/lib/bits/date-field/components/date-field.svelte b/src/lib/bits/date-field/components/date-field.svelte
index 3a9d252e4..0c348c6c2 100644
--- a/src/lib/bits/date-field/components/date-field.svelte
+++ b/src/lib/bits/date-field/components/date-field.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { derived } from "svelte/store";
 	import { setCtx } from "../ctx.js";
 	import type { Props } from "../types.js";
 
@@ -9,8 +10,6 @@
 	export let placeholder: $$Props["placeholder"] = undefined;
 	export let onPlaceholderChange: $$Props["onPlaceholderChange"] = undefined;
 	export let disabled: $$Props["disabled"] = undefined;
-	export let name: $$Props["name"] = undefined;
-	export let required: $$Props["required"] = undefined;
 	export let isDateUnavailable: $$Props["isDateUnavailable"] = undefined;
 	export let granularity: $$Props["granularity"] = undefined;
 	export let hideTimeZone: $$Props["hideTimeZone"] = undefined;
@@ -19,6 +18,8 @@
 	export let maxValue: $$Props["maxValue"] = undefined;
 	export let minValue: $$Props["minValue"] = undefined;
 	export let readonly: $$Props["readonly"] = undefined;
+	export let validationId: $$Props["validationId"] = undefined;
+	export let descriptionId: $$Props["descriptionId"] = undefined;
 
 	const {
 		states: {
@@ -26,13 +27,12 @@
 			placeholder: localPlaceholder,
 			isInvalid: localIsInvalid
 		},
-		updateOption
+		updateOption,
+		ids
 	} = setCtx({
 		defaultValue: value,
 		defaultPlaceholder: placeholder,
 		disabled,
-		name,
-		required,
 		granularity,
 		hideTimeZone,
 		hourCycle,
@@ -57,12 +57,62 @@
 		}
 	});
 
+	const idValues = derived(
+		[
+			ids.day,
+			ids.description,
+			ids.dayPeriod,
+			ids.field,
+			ids.hour,
+			ids.minute,
+			ids.month,
+			ids.second,
+			ids.year,
+			ids.validation,
+			ids.label,
+			ids.timeZoneName
+		],
+		([
+			$dayId,
+			$descriptionId,
+			$dayPeriodId,
+			$fieldId,
+			$hourId,
+			$minuteId,
+			$monthId,
+			$secondId,
+			$yearId,
+			$validationId,
+			$labelId,
+			$timeZoneNameId
+		]) => ({
+			day: $dayId,
+			description: $descriptionId,
+			dayPeriod: $dayPeriodId,
+			field: $fieldId,
+			hour: $hourId,
+			minute: $minuteId,
+			month: $monthId,
+			second: $secondId,
+			year: $yearId,
+			validation: $validationId,
+			label: $labelId,
+			timeZoneName: $timeZoneNameId
+		})
+	);
+
+	$: if (validationId) {
+		ids.validation.set(validationId);
+	}
+
+	$: if (descriptionId) {
+		ids.description.set(descriptionId);
+	}
+
 	$: value !== undefined && localValue.set(value);
 	$: placeholder !== undefined && localPlaceholder.set(placeholder);
 
 	$: updateOption("disabled", disabled);
-	$: updateOption("name", name);
-	$: updateOption("required", required);
 	$: updateOption("isDateUnavailable", isDateUnavailable);
 	$: updateOption("granularity", granularity);
 	$: updateOption("hideTimeZone", hideTimeZone);
@@ -73,7 +123,8 @@
 	$: updateOption("readonly", readonly);
 
 	$: slotProps = {
-		isInvalid: $localIsInvalid
+		isInvalid: $localIsInvalid,
+		ids: $idValues
 	};
 </script>
 
diff --git a/src/lib/bits/date-field/ctx.ts b/src/lib/bits/date-field/ctx.ts
index cdc7bb609..fee76f929 100644
--- a/src/lib/bits/date-field/ctx.ts
+++ b/src/lib/bits/date-field/ctx.ts
@@ -7,7 +7,7 @@ import { getContext, setContext } from "svelte";
 import { removeUndefined, getOptionUpdater, createBitAttrs } from "$lib/internal/index.js";
 
 const NAME = "date-field";
-const PARTS = ["label", "field", "input", "segment"] as const;
+const PARTS = ["label", "input", "segment"] as const;
 
 export const getAttrs = createBitAttrs(NAME, PARTS);
 
diff --git a/src/lib/bits/date-field/index.ts b/src/lib/bits/date-field/index.ts
index d8911c79d..1adffa92a 100644
--- a/src/lib/bits/date-field/index.ts
+++ b/src/lib/bits/date-field/index.ts
@@ -2,6 +2,5 @@ export { default as Root } from "./components/date-field.svelte";
 export { default as Input } from "./components/date-field-input.svelte";
 export { default as Label } from "./components/date-field-label.svelte";
 export { default as Segment } from "./components/date-field-segment.svelte";
-export { default as Field } from "./components/date-field-field.svelte";
 
 export type * from "./types.js";
diff --git a/src/lib/bits/date-field/types.ts b/src/lib/bits/date-field/types.ts
index ec334c714..c2bed4c2e 100644
--- a/src/lib/bits/date-field/types.ts
+++ b/src/lib/bits/date-field/types.ts
@@ -1,15 +1,14 @@
 import type { HTMLDivAttributes, HTMLSpanAttributes } from "$lib/internal/index.js";
-import type { HTMLInputAttributes } from "svelte/elements";
 import type * as I from "./_types.js";
 
 type Props = I.Props;
 
 type LabelProps = I.Props & HTMLSpanAttributes;
 
-type FieldProps = I.FieldProps & HTMLDivAttributes;
-
 type SegmentProps = I.SegmentProps & HTMLDivAttributes;
 
-type InputProps = I.InputProps & HTMLInputAttributes;
+type InputProps = I.InputProps & HTMLDivAttributes;
+
+type DescriptionProps = I.DescriptionProps & HTMLDivAttributes;
 
-export type { Props, FieldProps, LabelProps, InputProps, SegmentProps };
+export type { Props, LabelProps, DescriptionProps, InputProps, SegmentProps };
diff --git a/src/lib/bits/date-range-field/_types.ts b/src/lib/bits/date-range-field/_types.ts
new file mode 100644
index 000000000..adefc2b76
--- /dev/null
+++ b/src/lib/bits/date-range-field/_types.ts
@@ -0,0 +1,67 @@
+/**
+ * We define prop types without the HTMLAttributes here so that we can use them
+ * to type-check our API documentation, which requires we document each prop,
+ * but we don't want to document the HTML attributes.
+ */
+
+import type { Expand, OnChangeFn, AsChild, OmitDates } from "$lib/internal/index.js";
+import type { DateRange, SegmentPart } from "$lib/shared/index.js";
+import type { DateValue } from "@internationalized/date";
+import type { CreateDateFieldProps } from "@melt-ui/svelte";
+
+type Props = Expand<
+	Omit<OmitDates<CreateDateFieldProps>, "required" | "name"> & {
+		/**
+		 * The value of the date field.
+		 * You can bind this to a `DateValue` object to programmatically control the value.
+		 */
+		value?: DateRange;
+
+		/**
+		 * A callback function called when the value changes.
+		 */
+		onValueChange?: OnChangeFn<DateRange | undefined>;
+
+		/**
+		 * The placeholder date used to start the field.
+		 */
+		placeholder?: DateValue;
+
+		/**
+		 * A callback function called when the placeholder changes.
+		 */
+		onPlaceholderChange?: OnChangeFn<DateValue>;
+
+		/**
+		 * The id of the validation message element which is used to apply the
+		 * appropriate `aria-describedby` attribute to the input.
+		 */
+		validationId?: string;
+
+		/**
+		 * The id of the description element which is used to describe the input.
+		 * This is used to apply the appropriate `aria-describedby` attribute to the input.
+		 */
+		descriptionId?: string;
+	} & AsChild
+>;
+
+type InputProps = AsChild;
+
+type LabelProps = AsChild;
+
+type SegmentProps = Expand<
+	{
+		/**
+		 * The type of field to render (start or end).
+		 */
+		type: "start" | "end";
+
+		/**
+		 * The part of the date to render.
+		 */
+		part: SegmentPart;
+	} & AsChild
+>;
+
+export type { Props, LabelProps, InputProps, SegmentProps };
diff --git a/src/lib/bits/date-field/components/date-field-field.svelte b/src/lib/bits/date-range-field/components/date-range-field-input.svelte
similarity index 70%
rename from src/lib/bits/date-field/components/date-field-field.svelte
rename to src/lib/bits/date-range-field/components/date-range-field-input.svelte
index 852504cf2..446af72de 100644
--- a/src/lib/bits/date-field/components/date-field-field.svelte
+++ b/src/lib/bits/date-range-field/components/date-range-field-input.svelte
@@ -1,9 +1,9 @@
 <script lang="ts">
 	import { melt } from "@melt-ui/svelte";
 	import { getCtx, getAttrs } from "../ctx.js";
-	import type { FieldProps } from "../types.js";
+	import type { InputProps } from "../types.js";
 
-	type $$Props = FieldProps;
+	type $$Props = InputProps;
 
 	export let asChild: $$Props["asChild"] = false;
 	export let id: $$Props["id"] = undefined;
@@ -15,16 +15,19 @@
 	} = getCtx();
 
 	$: if (id) {
-		ids.field.set(id);
+		ids.field.field.set(id);
 	}
 
-	const attrs = getAttrs("field");
+	const attrs = getAttrs("input");
 
 	$: builder = $field;
 	$: slotProps = {
 		builder,
 		attrs,
-		segments: $segmentContents
+		segments: {
+			start: $segmentContents.start,
+			end: $segmentContents.end
+		}
 	};
 </script>
 
diff --git a/src/lib/bits/date-range-field/components/date-range-field-label.svelte b/src/lib/bits/date-range-field/components/date-range-field-label.svelte
new file mode 100644
index 000000000..b75b6d0b9
--- /dev/null
+++ b/src/lib/bits/date-range-field/components/date-range-field-label.svelte
@@ -0,0 +1,35 @@
+<script lang="ts">
+	import { melt } from "@melt-ui/svelte";
+	import { getCtx, getAttrs } from "../ctx.js";
+	import type { LabelProps } from "../types.js";
+
+	type $$Props = LabelProps;
+
+	export let asChild: $$Props["asChild"] = false;
+	export let id: $$Props["id"] = undefined;
+
+	const {
+		elements: { label },
+		ids
+	} = getCtx();
+
+	if (id) {
+		ids.field.label.set(id);
+	}
+
+	const attrs = getAttrs("label");
+
+	$: builder = $label;
+	$: slotProps = {
+		builder,
+		attrs
+	};
+</script>
+
+{#if asChild}
+	<slot {...slotProps} />
+{:else}
+	<span use:melt={builder} {...$$restProps} {...attrs}>
+		<slot {...slotProps} />
+	</span>
+{/if}
diff --git a/src/lib/bits/date-range-field/components/date-range-field-segment.svelte b/src/lib/bits/date-range-field/components/date-range-field-segment.svelte
new file mode 100644
index 000000000..17fd30195
--- /dev/null
+++ b/src/lib/bits/date-range-field/components/date-range-field-segment.svelte
@@ -0,0 +1,42 @@
+<script lang="ts">
+	import { melt } from "@melt-ui/svelte";
+	import { getCtx, getAttrs } from "../ctx.js";
+	import type { SegmentProps } from "../types.js";
+
+	type $$Props = SegmentProps;
+
+	export let asChild: $$Props["asChild"] = false;
+	export let id: $$Props["id"] = undefined;
+	export let part: $$Props["part"];
+	export let type: $$Props["type"];
+
+	const {
+		elements: { startSegment, endSegment },
+		ids
+	} = getCtx();
+
+	$: if (id && part !== "literal") {
+		if (type === "start") {
+			ids.start[part].set(id);
+		} else {
+			ids.end[part].set(id);
+		}
+	}
+
+	const attrs = getAttrs("segment");
+
+	$: builder = type === "start" ? $startSegment(part) : $endSegment(part);
+
+	$: slotProps = {
+		builder,
+		attrs
+	};
+</script>
+
+{#if asChild}
+	<slot {...slotProps} />
+{:else}
+	<div use:melt={builder} {...$$restProps} {...attrs}>
+		<slot {...slotProps} />
+	</div>
+{/if}
diff --git a/src/lib/bits/date-range-field/components/date-range-field.svelte b/src/lib/bits/date-range-field/components/date-range-field.svelte
new file mode 100644
index 000000000..399c5d639
--- /dev/null
+++ b/src/lib/bits/date-range-field/components/date-range-field.svelte
@@ -0,0 +1,188 @@
+<script lang="ts">
+	import { derived } from "svelte/store";
+	import { setCtx } from "../ctx.js";
+	import type { Props } from "../types.js";
+
+	type $$Props = Props;
+
+	export let value: $$Props["value"] = undefined;
+	export let onValueChange: $$Props["onValueChange"] = undefined;
+	export let placeholder: $$Props["placeholder"] = undefined;
+	export let onPlaceholderChange: $$Props["onPlaceholderChange"] = undefined;
+	export let disabled: $$Props["disabled"] = undefined;
+	export let isDateUnavailable: $$Props["isDateUnavailable"] = undefined;
+	export let granularity: $$Props["granularity"] = undefined;
+	export let hideTimeZone: $$Props["hideTimeZone"] = undefined;
+	export let hourCycle: $$Props["hourCycle"] = undefined;
+	export let locale: $$Props["locale"] = undefined;
+	export let maxValue: $$Props["maxValue"] = undefined;
+	export let minValue: $$Props["minValue"] = undefined;
+	export let readonly: $$Props["readonly"] = undefined;
+	export let validationId: $$Props["validationId"] = undefined;
+	export let descriptionId: $$Props["descriptionId"] = undefined;
+
+	const {
+		states: {
+			value: localValue,
+			placeholder: localPlaceholder,
+			isInvalid: localIsInvalid
+		},
+		updateOption,
+		ids
+	} = setCtx({
+		defaultValue: value,
+		defaultPlaceholder: placeholder,
+		disabled,
+		granularity,
+		hideTimeZone,
+		hourCycle,
+		locale,
+		maxValue,
+		minValue,
+		readonly,
+		isDateUnavailable,
+		onValueChange: ({ next }) => {
+			if (value !== next) {
+				onValueChange?.(next);
+				value = next;
+			}
+			return next;
+		},
+		onPlaceholderChange: ({ next }) => {
+			if (placeholder !== next) {
+				onPlaceholderChange?.(next);
+				placeholder = next;
+			}
+			return next;
+		}
+	});
+
+	const startIdValues = derived(
+		[
+			ids.start.day,
+			ids.start.description,
+			ids.start.dayPeriod,
+			ids.start.hour,
+			ids.start.minute,
+			ids.start.month,
+			ids.start.second,
+			ids.start.year,
+			ids.start.validation,
+			ids.start.label,
+			ids.start.timeZoneName
+		],
+		([
+			$dayId,
+			$descriptionId,
+			$dayPeriodId,
+			$hourId,
+			$minuteId,
+			$monthId,
+			$secondId,
+			$yearId,
+			$validationId,
+			$labelId,
+			$timeZoneNameId
+		]) => ({
+			day: $dayId,
+			description: $descriptionId,
+			dayPeriod: $dayPeriodId,
+			hour: $hourId,
+			minute: $minuteId,
+			month: $monthId,
+			second: $secondId,
+			year: $yearId,
+			validation: $validationId,
+			label: $labelId,
+			timeZoneName: $timeZoneNameId
+		})
+	);
+
+	const endIdValues = derived(
+		[
+			ids.end.day,
+			ids.end.description,
+			ids.end.dayPeriod,
+			ids.end.hour,
+			ids.end.minute,
+			ids.end.month,
+			ids.end.second,
+			ids.end.year,
+			ids.end.validation,
+			ids.end.label,
+			ids.end.timeZoneName
+		],
+		([
+			$dayId,
+			$descriptionId,
+			$dayPeriodId,
+			$hourId,
+			$minuteId,
+			$monthId,
+			$secondId,
+			$yearId,
+			$validationId,
+			$labelId,
+			$timeZoneNameId
+		]) => ({
+			day: $dayId,
+			description: $descriptionId,
+			dayPeriod: $dayPeriodId,
+			hour: $hourId,
+			minute: $minuteId,
+			month: $monthId,
+			second: $secondId,
+			year: $yearId,
+			validation: $validationId,
+			label: $labelId,
+			timeZoneName: $timeZoneNameId
+		})
+	);
+
+	const fieldIdValues = derived(
+		[
+			ids.field.description,
+			ids.field.field,
+			ids.field.label,
+			ids.field.validation
+		],
+		([$descriptionId, $fieldId, $labelId, $validationId]) => ({
+			description: $descriptionId,
+			field: $fieldId,
+			label: $labelId,
+			validation: $validationId
+		})
+	);
+
+	$: if (descriptionId) {
+		ids.field.description.set(descriptionId);
+	}
+
+	$: if (validationId) {
+		ids.field.validation.set(validationId);
+	}
+
+	$: value !== undefined && localValue.set(value);
+	$: placeholder !== undefined && localPlaceholder.set(placeholder);
+
+	$: updateOption("disabled", disabled);
+	$: updateOption("isDateUnavailable", isDateUnavailable);
+	$: updateOption("granularity", granularity);
+	$: updateOption("hideTimeZone", hideTimeZone);
+	$: updateOption("hourCycle", hourCycle);
+	$: updateOption("locale", locale);
+	$: updateOption("maxValue", maxValue);
+	$: updateOption("minValue", minValue);
+	$: updateOption("readonly", readonly);
+
+	$: slotProps = {
+		isInvalid: $localIsInvalid,
+		ids: {
+			start: $startIdValues,
+			end: $endIdValues,
+			field: $fieldIdValues
+		}
+	};
+</script>
+
+<slot {...slotProps} />
diff --git a/src/lib/bits/date-range-field/ctx.ts b/src/lib/bits/date-range-field/ctx.ts
new file mode 100644
index 000000000..575ed1da9
--- /dev/null
+++ b/src/lib/bits/date-range-field/ctx.ts
@@ -0,0 +1,28 @@
+import {
+	type DateRangeField as DateRangeFieldReturn,
+	type CreateDateRangeFieldProps,
+	createDateRangeField
+} from "@melt-ui/svelte";
+import { getContext, setContext } from "svelte";
+import { removeUndefined, getOptionUpdater, createBitAttrs } from "$lib/internal/index.js";
+
+const NAME = "date-range-field";
+const PARTS = ["label", "field", "input", "segment"] as const;
+
+export const getAttrs = createBitAttrs(NAME, PARTS);
+
+type GetReturn = DateRangeFieldReturn;
+
+export function setCtx(props: CreateDateRangeFieldProps) {
+	const dateField = createDateRangeField(removeUndefined(props));
+	setContext(NAME, dateField);
+
+	return {
+		...dateField,
+		updateOption: getOptionUpdater(dateField.options)
+	};
+}
+
+export function getCtx() {
+	return getContext<GetReturn>(NAME);
+}
diff --git a/src/lib/bits/date-range-field/index.ts b/src/lib/bits/date-range-field/index.ts
new file mode 100644
index 000000000..327661d15
--- /dev/null
+++ b/src/lib/bits/date-range-field/index.ts
@@ -0,0 +1,6 @@
+export { default as Root } from "./components/date-range-field.svelte";
+export { default as Input } from "./components/date-range-field-input.svelte";
+export { default as Label } from "./components/date-range-field-label.svelte";
+export { default as Segment } from "./components/date-range-field-segment.svelte";
+
+export type * from "./types.js";
diff --git a/src/lib/bits/date-range-field/types.ts b/src/lib/bits/date-range-field/types.ts
new file mode 100644
index 000000000..2204843b8
--- /dev/null
+++ b/src/lib/bits/date-range-field/types.ts
@@ -0,0 +1,12 @@
+import type { HTMLDivAttributes, HTMLSpanAttributes } from "$lib/internal/index.js";
+import type * as I from "./_types.js";
+
+type Props = I.Props;
+
+type LabelProps = I.Props & HTMLSpanAttributes;
+
+type SegmentProps = I.SegmentProps & HTMLDivAttributes;
+
+type InputProps = I.InputProps & HTMLDivAttributes;
+
+export type { Props, LabelProps, InputProps, SegmentProps };
diff --git a/src/lib/bits/index.ts b/src/lib/bits/index.ts
index e98fe18af..03bb9830c 100644
--- a/src/lib/bits/index.ts
+++ b/src/lib/bits/index.ts
@@ -8,6 +8,7 @@ export * as Checkbox from "./checkbox/index.js";
 export * as Collapsible from "./collapsible/index.js";
 export * as ContextMenu from "./context-menu/index.js";
 export * as DateField from "./date-field/index.js";
+export * as DateRangeField from "./date-range-field/index.js";
 export * as Dialog from "./dialog/index.js";
 export * as DropdownMenu from "./dropdown-menu/index.js";
 export * as LinkPreview from "./link-preview/index.js";

From 75897053bbd16d2d384b5b3cf075a3ad34e5353f Mon Sep 17 00:00:00 2001
From: Hunter Johnston <johnstonhuntera@gmail.com>
Date: Mon, 27 Nov 2023 11:05:49 -0500
Subject: [PATCH 147/217] add changeset

---
 .changeset/spotty-beans-return.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/spotty-beans-return.md

diff --git a/.changeset/spotty-beans-return.md b/.changeset/spotty-beans-return.md
new file mode 100644
index 000000000..9bacfced9
--- /dev/null
+++ b/.changeset/spotty-beans-return.md
@@ -0,0 +1,5 @@
+---
+"bits-ui": minor
+---
+
+New components: Range Calendar, Date Field, Date Range Field

From c91edfd9f290eb7c0a040568b173e0cbc843565d Mon Sep 17 00:00:00 2001
From: Hunter Johnston <johnstonhuntera@gmail.com>
Date: Mon, 27 Nov 2023 11:39:40 -0500
Subject: [PATCH 148/217] figuring out picker

---
 src/lib/bits/date-picker/_types.ts            |  63 ++++++++
 .../components/calendar-cell.svelte           |  28 ++++
 .../components/calendar-date.svelte           |  37 +++++
 .../components/calendar-grid-body.svelte      |  17 ++
 .../components/calendar-grid-head.svelte      |  17 ++
 .../components/calendar-grid-row.svelte       |  18 +++
 .../components/calendar-grid.svelte           |  29 ++++
 .../components/calendar-head-cell.svelte      |  17 ++
 .../components/calendar-header.svelte         |  16 ++
 .../components/calendar-heading.svelte        |  27 ++++
 .../components/calendar-next-button.svelte    |  24 +++
 .../components/calendar-prev-button.svelte    |  29 ++++
 .../components/date-picker-calendar.svelte    |  38 +++++
 .../components/date-picker-field.svelte       | 131 +++++++++++++++
 .../components/date-picker-input.svelte       |  37 +++++
 .../components/date-picker-label.svelte       |  35 ++++
 .../components/date-picker-segment.svelte     |  36 +++++
 .../date-picker/components/date-picker.svelte | 149 ++++++++++++++++++
 src/lib/bits/date-picker/ctx.ts               |  23 +++
 src/lib/bits/date-picker/index.ts             |   6 +
 src/lib/bits/date-picker/types.ts             |  16 ++
 21 files changed, 793 insertions(+)
 create mode 100644 src/lib/bits/date-picker/_types.ts
 create mode 100644 src/lib/bits/date-picker/components/calendar-cell.svelte
 create mode 100644 src/lib/bits/date-picker/components/calendar-date.svelte
 create mode 100644 src/lib/bits/date-picker/components/calendar-grid-body.svelte
 create mode 100644 src/lib/bits/date-picker/components/calendar-grid-head.svelte
 create mode 100644 src/lib/bits/date-picker/components/calendar-grid-row.svelte
 create mode 100644 src/lib/bits/date-picker/components/calendar-grid.svelte
 create mode 100644 src/lib/bits/date-picker/components/calendar-head-cell.svelte
 create mode 100644 src/lib/bits/date-picker/components/calendar-header.svelte
 create mode 100644 src/lib/bits/date-picker/components/calendar-heading.svelte
 create mode 100644 src/lib/bits/date-picker/components/calendar-next-button.svelte
 create mode 100644 src/lib/bits/date-picker/components/calendar-prev-button.svelte
 create mode 100644 src/lib/bits/date-picker/components/date-picker-calendar.svelte
 create mode 100644 src/lib/bits/date-picker/components/date-picker-field.svelte
 create mode 100644 src/lib/bits/date-picker/components/date-picker-input.svelte
 create mode 100644 src/lib/bits/date-picker/components/date-picker-label.svelte
 create mode 100644 src/lib/bits/date-picker/components/date-picker-segment.svelte
 create mode 100644 src/lib/bits/date-picker/components/date-picker.svelte
 create mode 100644 src/lib/bits/date-picker/ctx.ts
 create mode 100644 src/lib/bits/date-picker/index.ts
 create mode 100644 src/lib/bits/date-picker/types.ts

diff --git a/src/lib/bits/date-picker/_types.ts b/src/lib/bits/date-picker/_types.ts
new file mode 100644
index 000000000..5c803e460
--- /dev/null
+++ b/src/lib/bits/date-picker/_types.ts
@@ -0,0 +1,63 @@
+/**
+ * We define prop types without the HTMLAttributes here so that we can use them
+ * to type-check our API documentation, which requires we document each prop,
+ * but we don't want to document the HTML attributes.
+ */
+
+import type { Expand, OnChangeFn, AsChild, OmitDates } from "$lib/internal/index.js";
+import type { SegmentPart } from "$lib/shared";
+import type { DateValue } from "@internationalized/date";
+import type { CreateDatePickerProps } from "@melt-ui/svelte";
+
+type Props = Expand<
+	Omit<OmitDates<CreateDatePickerProps>, "required" | "name"> & {
+		/**
+		 * The value of the date field.
+		 * You can bind this to a `DateValue` object to programmatically control the value.
+		 */
+		value?: DateValue;
+
+		/**
+		 * A callback function called when the value changes.
+		 */
+		onValueChange?: OnChangeFn<DateValue | undefined>;
+
+		/**
+		 * The placeholder date used to start the field.
+		 */
+		placeholder?: DateValue;
+
+		/**
+		 * A callback function called when the placeholder changes.
+		 */
+		onPlaceholderChange?: OnChangeFn<DateValue>;
+
+		/**
+		 * The id of the validation message element which is used to apply the
+		 * appropriate `aria-describedby` attribute to the input.
+		 */
+		validationId?: string;
+
+		/**
+		 * The id of the description element which is used to describe the input.
+		 * This is used to apply the appropriate `aria-describedby` attribute to the input.
+		 */
+		descriptionId?: string;
+	} & AsChild
+>;
+
+type InputProps = AsChild;
+
+type DescriptionProps = AsChild;
+
+type LabelProps = AsChild;
+
+type CalendarProps = AsChild;
+
+type SegmentProps = Expand<
+	{
+		part: SegmentPart;
+	} & AsChild
+>;
+
+export type { Props, CalendarProps, LabelProps, DescriptionProps, InputProps, SegmentProps };
diff --git a/src/lib/bits/date-picker/components/calendar-cell.svelte b/src/lib/bits/date-picker/components/calendar-cell.svelte
new file mode 100644
index 000000000..012fa3cbb
--- /dev/null
+++ b/src/lib/bits/date-picker/components/calendar-cell.svelte
@@ -0,0 +1,28 @@
+<script lang="ts">
+	import { getCtx, getAttrs } from "../ctx.js";
+	import type { CellProps } from "../types.js";
+
+	type $$Props = CellProps;
+
+	export let date: $$Props["date"];
+	export let asChild: $$Props["asChild"] = false;
+
+	const {
+		helpers: { isDateDisabled, isDateUnavailable }
+	} = getCtx();
+
+	$: attrs = {
+		...getAttrs("cell"),
+		"aria-disabled": $isDateDisabled(date) || $isDateUnavailable(date),
+		"data-disabled": $isDateDisabled(date) ? "" : undefined,
+		role: "gridcell"
+	};
+</script>
+
+{#if asChild}
+	<slot {attrs} />
+{:else}
+	<td {...attrs}>
+		<slot {attrs} />
+	</td>
+{/if}
diff --git a/src/lib/bits/date-picker/components/calendar-date.svelte b/src/lib/bits/date-picker/components/calendar-date.svelte
new file mode 100644
index 000000000..a22ef45df
--- /dev/null
+++ b/src/lib/bits/date-picker/components/calendar-date.svelte
@@ -0,0 +1,37 @@
+<script lang="ts">
+	import { melt } from "@melt-ui/svelte";
+	import { getCtx, getAttrs } from "../ctx.js";
+	import type { DateProps } from "../types.js";
+
+	type $$Props = DateProps;
+
+	export let date: $$Props["date"];
+	export let month: $$Props["month"];
+	export let asChild: $$Props["asChild"] = false;
+
+	const {
+		elements: { cell },
+		helpers: { isDateDisabled, isDateUnavailable, isDateSelected }
+	} = getCtx();
+
+	$: builder = $cell(date, month);
+	const attrs = getAttrs("date");
+
+	$: slotProps = {
+		builder,
+		attrs,
+		disabled: $isDateDisabled(date),
+		unavailable: $isDateUnavailable(date),
+		selected: $isDateSelected(date)
+	};
+</script>
+
+{#if asChild}
+	<slot {...slotProps} />
+{:else}
+	<div use:melt={builder} {...attrs} {...$$restProps}>
+		<slot {...slotProps}>
+			{date.day}
+		</slot>
+	</div>
+{/if}
diff --git a/src/lib/bits/date-picker/components/calendar-grid-body.svelte b/src/lib/bits/date-picker/components/calendar-grid-body.svelte
new file mode 100644
index 000000000..3dbc84e88
--- /dev/null
+++ b/src/lib/bits/date-picker/components/calendar-grid-body.svelte
@@ -0,0 +1,17 @@
+<script lang="ts">
+	import { getAttrs } from "../ctx.js";
+	import type { GridBodyProps } from "../types.js";
+
+	type $$Props = GridBodyProps;
+	export let asChild: $$Props["asChild"] = false;
+
+	const attrs = getAttrs("grid-body");
+</script>
+
+{#if asChild}
+	<slot {attrs} />
+{:else}
+	<tbody {...$$restProps} {...attrs}>
+		<slot />
+	</tbody>
+{/if}
diff --git a/src/lib/bits/date-picker/components/calendar-grid-head.svelte b/src/lib/bits/date-picker/components/calendar-grid-head.svelte
new file mode 100644
index 000000000..a290dbd42
--- /dev/null
+++ b/src/lib/bits/date-picker/components/calendar-grid-head.svelte
@@ -0,0 +1,17 @@
+<script lang="ts">
+	import { getAttrs } from "../ctx.js";
+	import type { GridHeadProps } from "../types.js";
+
+	type $$Props = GridHeadProps;
+	export let asChild: $$Props["asChild"] = false;
+
+	const attrs = { ...getAttrs("grid-head"), "aria-hidden": true };
+</script>
+
+{#if asChild}
+	<slot {attrs} />
+{:else}
+	<thead {...$$restProps} {...attrs}>
+		<slot />
+	</thead>
+{/if}
diff --git a/src/lib/bits/date-picker/components/calendar-grid-row.svelte b/src/lib/bits/date-picker/components/calendar-grid-row.svelte
new file mode 100644
index 000000000..ff14c3d16
--- /dev/null
+++ b/src/lib/bits/date-picker/components/calendar-grid-row.svelte
@@ -0,0 +1,18 @@
+<script lang="ts">
+	import { getAttrs } from "../ctx.js";
+	import type { GridRowProps } from "../types.js";
+
+	type $$Props = GridRowProps;
+
+	export let asChild: $$Props["asChild"] = false;
+
+	const attrs = getAttrs("grid-row");
+</script>
+
+{#if asChild}
+	<slot {attrs} />
+{:else}
+	<tr {...$$restProps} {...attrs}>
+		<slot {attrs} />
+	</tr>
+{/if}
diff --git a/src/lib/bits/date-picker/components/calendar-grid.svelte b/src/lib/bits/date-picker/components/calendar-grid.svelte
new file mode 100644
index 000000000..3c7b3f15f
--- /dev/null
+++ b/src/lib/bits/date-picker/components/calendar-grid.svelte
@@ -0,0 +1,29 @@
+<script lang="ts">
+	import { melt } from "@melt-ui/svelte";
+	import { getAttrs, getCtx } from "../ctx.js";
+	import type { GridProps } from "../types.js";
+
+	type $$Props = GridProps;
+
+	export let asChild: $$Props["asChild"] = false;
+
+	const {
+		elements: { grid }
+	} = getCtx();
+
+	$: builder = $grid;
+	const attrs = getAttrs("grid");
+
+	$: slotProps = {
+		builder,
+		attrs
+	};
+</script>
+
+{#if asChild}
+	<slot {...slotProps} />
+{:else}
+	<table use:melt={builder} {...$$restProps} {...attrs}>
+		<slot {...slotProps} />
+	</table>
+{/if}
diff --git a/src/lib/bits/date-picker/components/calendar-head-cell.svelte b/src/lib/bits/date-picker/components/calendar-head-cell.svelte
new file mode 100644
index 000000000..e863b503d
--- /dev/null
+++ b/src/lib/bits/date-picker/components/calendar-head-cell.svelte
@@ -0,0 +1,17 @@
+<script lang="ts">
+	import { getAttrs } from "../ctx.js";
+	import type { HeadCellProps } from "../types.js";
+
+	type $$Props = HeadCellProps;
+	export let asChild: $$Props["asChild"] = false;
+
+	const attrs = getAttrs("head-cell");
+</script>
+
+{#if asChild}
+	<slot {attrs} />
+{:else}
+	<th {...$$restProps} {...attrs}>
+		<slot />
+	</th>
+{/if}
diff --git a/src/lib/bits/date-picker/components/calendar-header.svelte b/src/lib/bits/date-picker/components/calendar-header.svelte
new file mode 100644
index 000000000..ec1df8ace
--- /dev/null
+++ b/src/lib/bits/date-picker/components/calendar-header.svelte
@@ -0,0 +1,16 @@
+<script lang="ts">
+	import { getAttrs } from "../ctx.js";
+	import type { HeaderProps } from "../types.js";
+	type $$Props = HeaderProps;
+	export let asChild: $$Props["asChild"] = false;
+
+	const attrs = getAttrs("header");
+</script>
+
+{#if asChild}
+	<slot {attrs} />
+{:else}
+	<header {...$$restProps} {...attrs}>
+		<slot {attrs} />
+	</header>
+{/if}
diff --git a/src/lib/bits/date-picker/components/calendar-heading.svelte b/src/lib/bits/date-picker/components/calendar-heading.svelte
new file mode 100644
index 000000000..c4463f49a
--- /dev/null
+++ b/src/lib/bits/date-picker/components/calendar-heading.svelte
@@ -0,0 +1,27 @@
+<script lang="ts">
+	import { melt } from "@melt-ui/svelte";
+	import { getAttrs, getCtx } from "../ctx.js";
+	import type { HeadingProps } from "../types.js";
+
+	type $$Props = HeadingProps;
+
+	export let asChild: $$Props["asChild"] = false;
+
+	const {
+		elements: { heading },
+		states: { headingValue }
+	} = getCtx();
+
+	$: builder = $heading;
+	const attrs = getAttrs("heading");
+</script>
+
+{#if asChild}
+	<slot {builder} {attrs} headingValue={$headingValue} />
+{:else}
+	<div use:melt={builder} {...$$restProps} {...attrs}>
+		<slot {builder} {attrs} headingValue={$headingValue}>
+			{$headingValue}
+		</slot>
+	</div>
+{/if}
diff --git a/src/lib/bits/date-picker/components/calendar-next-button.svelte b/src/lib/bits/date-picker/components/calendar-next-button.svelte
new file mode 100644
index 000000000..b5285d949
--- /dev/null
+++ b/src/lib/bits/date-picker/components/calendar-next-button.svelte
@@ -0,0 +1,24 @@
+<script lang="ts">
+	import { melt } from "@melt-ui/svelte";
+	import { getAttrs, getCtx } from "../ctx.js";
+	import type { NextButtonProps } from "../types.js";
+
+	type $$Props = NextButtonProps;
+
+	export let asChild: $$Props["asChild"] = false;
+
+	const {
+		elements: { nextButton }
+	} = getCtx();
+
+	$: builder = $nextButton;
+	const attrs = getAttrs("next-button");
+</script>
+
+{#if asChild}
+	<slot {builder} {attrs} />
+{:else}
+	<button use:melt={builder} type="button" {...$$restProps} {...attrs}>
+		<slot {builder} {attrs} />
+	</button>
+{/if}
diff --git a/src/lib/bits/date-picker/components/calendar-prev-button.svelte b/src/lib/bits/date-picker/components/calendar-prev-button.svelte
new file mode 100644
index 000000000..3775bc3c0
--- /dev/null
+++ b/src/lib/bits/date-picker/components/calendar-prev-button.svelte
@@ -0,0 +1,29 @@
+<script lang="ts">
+	import { melt } from "@melt-ui/svelte";
+	import { getAttrs, getCtx } from "../ctx.js";
+	import type { PrevButtonProps } from "../types.js";
+
+	type $$Props = PrevButtonProps;
+
+	export let asChild: $$Props["asChild"] = false;
+
+	const {
+		elements: { prevButton }
+	} = getCtx();
+
+	$: builder = $prevButton;
+	const attrs = getAttrs("prev-button");
+
+	$: slotProps = {
+		builder,
+		attrs
+	};
+</script>
+
+{#if asChild}
+	<slot {...slotProps} />
+{:else}
+	<button use:melt={builder} type="button" {...$$restProps} {...attrs}>
+		<slot {...slotProps} />
+	</button>
+{/if}
diff --git a/src/lib/bits/date-picker/components/date-picker-calendar.svelte b/src/lib/bits/date-picker/components/date-picker-calendar.svelte
new file mode 100644
index 000000000..e3ada9760
--- /dev/null
+++ b/src/lib/bits/date-picker/components/date-picker-calendar.svelte
@@ -0,0 +1,38 @@
+<script lang="ts">
+	import { melt } from "@melt-ui/svelte";
+	import { getCtx, getAttrs } from "../ctx.js";
+	import type { CalendarProps } from "../types.js";
+
+	type $$Props = CalendarProps;
+
+	export let asChild: $$Props["asChild"] = false;
+	export let id: $$Props["id"] = undefined;
+
+	const {
+		elements: { calendar },
+		states: { months, daysOfWeek },
+		ids
+	} = getCtx();
+
+	$: if (id) {
+		ids.calendar.calendar.set(id);
+	}
+
+	$: builder = $calendar;
+	const attrs = getAttrs("calendar");
+
+	$: slotProps = {
+		builder,
+		attrs,
+		months: $months,
+		daysOfWeek: $daysOfWeek
+	};
+</script>
+
+{#if asChild}
+	<slot {...slotProps} />
+{:else}
+	<div use:melt={builder} {...$$restProps} {...attrs}>
+		<slot {...slotProps} />
+	</div>
+{/if}
diff --git a/src/lib/bits/date-picker/components/date-picker-field.svelte b/src/lib/bits/date-picker/components/date-picker-field.svelte
new file mode 100644
index 000000000..a1da007dc
--- /dev/null
+++ b/src/lib/bits/date-picker/components/date-picker-field.svelte
@@ -0,0 +1,131 @@
+<script lang="ts">
+	import { derived } from "svelte/store";
+	import { setCtx } from "../ctx.js";
+	import type { Props } from "../types.js";
+
+	type $$Props = Props;
+
+	export let value: $$Props["value"] = undefined;
+	export let onValueChange: $$Props["onValueChange"] = undefined;
+	export let placeholder: $$Props["placeholder"] = undefined;
+	export let onPlaceholderChange: $$Props["onPlaceholderChange"] = undefined;
+	export let disabled: $$Props["disabled"] = undefined;
+	export let isDateUnavailable: $$Props["isDateUnavailable"] = undefined;
+	export let granularity: $$Props["granularity"] = undefined;
+	export let hideTimeZone: $$Props["hideTimeZone"] = undefined;
+	export let hourCycle: $$Props["hourCycle"] = undefined;
+	export let locale: $$Props["locale"] = undefined;
+	export let maxValue: $$Props["maxValue"] = undefined;
+	export let minValue: $$Props["minValue"] = undefined;
+	export let readonly: $$Props["readonly"] = undefined;
+	export let validationId: $$Props["validationId"] = undefined;
+	export let descriptionId: $$Props["descriptionId"] = undefined;
+
+	const {
+		states: {
+			value: localValue,
+			placeholder: localPlaceholder,
+			isInvalid: localIsInvalid
+		},
+		updateOption,
+		ids
+	} = setCtx({
+		defaultValue: value,
+		defaultPlaceholder: placeholder,
+		disabled,
+		granularity,
+		hideTimeZone,
+		hourCycle,
+		locale,
+		maxValue,
+		minValue,
+		readonly,
+		isDateUnavailable,
+		onValueChange: ({ next }) => {
+			if (value !== next) {
+				onValueChange?.(next);
+				value = next;
+			}
+			return next;
+		},
+		onPlaceholderChange: ({ next }) => {
+			if (placeholder !== next) {
+				onPlaceholderChange?.(next);
+				placeholder = next;
+			}
+			return next;
+		}
+	});
+
+	const idValues = derived(
+		[
+			ids.dateField.day,
+			ids.dateField.description,
+			ids.dateField.dayPeriod,
+			ids.dateField.field,
+			ids.dateField.hour,
+			ids.dateField.minute,
+			ids.dateField.month,
+			ids.dateField.second,
+			ids.dateField.year,
+			ids.dateField.validation,
+			ids.dateField.label,
+			ids.dateField.timeZoneName
+		],
+		([
+			$dayId,
+			$descriptionId,
+			$dayPeriodId,
+			$fieldId,
+			$hourId,
+			$minuteId,
+			$monthId,
+			$secondId,
+			$yearId,
+			$validationId,
+			$labelId,
+			$timeZoneNameId
+		]) => ({
+			day: $dayId,
+			description: $descriptionId,
+			dayPeriod: $dayPeriodId,
+			field: $fieldId,
+			hour: $hourId,
+			minute: $minuteId,
+			month: $monthId,
+			second: $secondId,
+			year: $yearId,
+			validation: $validationId,
+			label: $labelId,
+			timeZoneName: $timeZoneNameId
+		})
+	);
+
+	$: if (validationId) {
+		ids.dateField.validation.set(validationId);
+	}
+
+	$: if (descriptionId) {
+		ids.dateField.description.set(descriptionId);
+	}
+
+	$: value !== undefined && localValue.set(value);
+	$: placeholder !== undefined && localPlaceholder.set(placeholder);
+
+	$: updateOption("disabled", disabled);
+	$: updateOption("isDateUnavailable", isDateUnavailable);
+	$: updateOption("granularity", granularity);
+	$: updateOption("hideTimeZone", hideTimeZone);
+	$: updateOption("hourCycle", hourCycle);
+	$: updateOption("locale", locale);
+	$: updateOption("maxValue", maxValue);
+	$: updateOption("minValue", minValue);
+	$: updateOption("readonly", readonly);
+
+	$: slotProps = {
+		isInvalid: $localIsInvalid,
+		ids: $idValues
+	};
+</script>
+
+<slot {...slotProps} />
diff --git a/src/lib/bits/date-picker/components/date-picker-input.svelte b/src/lib/bits/date-picker/components/date-picker-input.svelte
new file mode 100644
index 000000000..83840f3aa
--- /dev/null
+++ b/src/lib/bits/date-picker/components/date-picker-input.svelte
@@ -0,0 +1,37 @@
+<script lang="ts">
+	import { melt } from "@melt-ui/svelte";
+	import { getCtx, getAttrs } from "../ctx.js";
+	import type { InputProps } from "../types.js";
+
+	type $$Props = InputProps;
+
+	export let asChild: $$Props["asChild"] = false;
+	export let id: $$Props["id"] = undefined;
+
+	const {
+		elements: { field },
+		states: { segmentContents },
+		ids
+	} = getCtx();
+
+	$: if (id) {
+		ids.dateField.field.set(id);
+	}
+
+	const attrs = getAttrs("input");
+
+	$: builder = $field;
+	$: slotProps = {
+		builder,
+		attrs,
+		segments: $segmentContents
+	};
+</script>
+
+{#if asChild}
+	<slot {...slotProps} />
+{:else}
+	<div use:melt={builder} {...$$restProps} {...attrs}>
+		<slot {...slotProps} />
+	</div>
+{/if}
diff --git a/src/lib/bits/date-picker/components/date-picker-label.svelte b/src/lib/bits/date-picker/components/date-picker-label.svelte
new file mode 100644
index 000000000..3b8e359b1
--- /dev/null
+++ b/src/lib/bits/date-picker/components/date-picker-label.svelte
@@ -0,0 +1,35 @@
+<script lang="ts">
+	import { melt } from "@melt-ui/svelte";
+	import { getCtx, getAttrs } from "../ctx.js";
+	import type { LabelProps } from "../types.js";
+
+	type $$Props = LabelProps;
+
+	export let asChild: $$Props["asChild"] = false;
+	export let id: $$Props["id"] = undefined;
+
+	const {
+		elements: { label },
+		ids
+	} = getCtx();
+
+	if (id) {
+		ids.dateField.label.set(id);
+	}
+
+	const attrs = getAttrs("label");
+
+	$: builder = $label;
+	$: slotProps = {
+		builder,
+		attrs
+	};
+</script>
+
+{#if asChild}
+	<slot {...slotProps} />
+{:else}
+	<span use:melt={builder} {...$$restProps} {...attrs}>
+		<slot {...slotProps} />
+	</span>
+{/if}
diff --git a/src/lib/bits/date-picker/components/date-picker-segment.svelte b/src/lib/bits/date-picker/components/date-picker-segment.svelte
new file mode 100644
index 000000000..c10b8db07
--- /dev/null
+++ b/src/lib/bits/date-picker/components/date-picker-segment.svelte
@@ -0,0 +1,36 @@
+<script lang="ts">
+	import { melt } from "@melt-ui/svelte";
+	import { getCtx, getAttrs } from "../ctx.js";
+	import type { SegmentProps } from "../types.js";
+
+	type $$Props = SegmentProps;
+
+	export let asChild: $$Props["asChild"] = false;
+	export let id: $$Props["id"] = undefined;
+	export let part: $$Props["part"];
+
+	const {
+		elements: { segment },
+		ids
+	} = getCtx();
+
+	$: if (id && part !== "literal") {
+		ids.dateField[part].set(id);
+	}
+
+	const attrs = getAttrs("segment");
+
+	$: builder = $segment(part);
+	$: slotProps = {
+		builder,
+		attrs
+	};
+</script>
+
+{#if asChild}
+	<slot {...slotProps} />
+{:else}
+	<div use:melt={builder} {...$$restProps} {...attrs}>
+		<slot {...slotProps} />
+	</div>
+{/if}
diff --git a/src/lib/bits/date-picker/components/date-picker.svelte b/src/lib/bits/date-picker/components/date-picker.svelte
new file mode 100644
index 000000000..94d4e3f8a
--- /dev/null
+++ b/src/lib/bits/date-picker/components/date-picker.svelte
@@ -0,0 +1,149 @@
+<script lang="ts">
+	import { derived } from "svelte/store";
+	import { setCtx } from "../ctx.js";
+	import type { Props } from "../types.js";
+
+	type $$Props = Props;
+
+	export let value: $$Props["value"] = undefined;
+	export let onValueChange: $$Props["onValueChange"] = undefined;
+	export let placeholder: $$Props["placeholder"] = undefined;
+	export let onPlaceholderChange: $$Props["onPlaceholderChange"] = undefined;
+	export let disabled: $$Props["disabled"] = undefined;
+	export let isDateUnavailable: $$Props["isDateUnavailable"] = undefined;
+	export let granularity: $$Props["granularity"] = undefined;
+	export let hideTimeZone: $$Props["hideTimeZone"] = undefined;
+	export let hourCycle: $$Props["hourCycle"] = undefined;
+	export let locale: $$Props["locale"] = undefined;
+	export let maxValue: $$Props["maxValue"] = undefined;
+	export let minValue: $$Props["minValue"] = undefined;
+	export let readonly: $$Props["readonly"] = undefined;
+	export let validationId: $$Props["validationId"] = undefined;
+	export let descriptionId: $$Props["descriptionId"] = undefined;
+	export let preventDeselect: $$Props["preventDeselect"] = undefined;
+	export let pagedNavigation: $$Props["pagedNavigation"] = undefined;
+	export let weekStartsOn: $$Props["weekStartsOn"] = undefined;
+	export let isDateDisabled: $$Props["isDateDisabled"] = undefined;
+	export let fixedWeeks: $$Props["fixedWeeks"] = undefined;
+	export let calendarLabel: $$Props["calendarLabel"] = undefined;
+
+	const {
+		states: {
+			value: localValue,
+			placeholder: localPlaceholder,
+			isInvalid: localIsInvalid
+		},
+		updateOption,
+		ids
+	} = setCtx({
+		defaultValue: value,
+		defaultPlaceholder: placeholder,
+		preventDeselect,
+		pagedNavigation,
+		weekStartsOn,
+		isDateDisabled,
+		fixedWeeks,
+		calendarLabel,
+		disabled,
+		granularity,
+		hideTimeZone,
+		hourCycle,
+		locale,
+		maxValue,
+		minValue,
+		readonly,
+		isDateUnavailable,
+		onValueChange: ({ next }) => {
+			if (value !== next) {
+				onValueChange?.(next);
+				value = next;
+			}
+			return next;
+		},
+		onPlaceholderChange: ({ next }) => {
+			if (placeholder !== next) {
+				onPlaceholderChange?.(next);
+				placeholder = next;
+			}
+			return next;
+		}
+	});
+
+	const idValues = derived(
+		[
+			ids.dateField.day,
+			ids.dateField.description,
+			ids.dateField.dayPeriod,
+			ids.dateField.field,
+			ids.dateField.hour,
+			ids.dateField.minute,
+			ids.dateField.month,
+			ids.dateField.second,
+			ids.dateField.year,
+			ids.dateField.validation,
+			ids.dateField.label,
+			ids.dateField.timeZoneName
+		],
+		([
+			$dayId,
+			$descriptionId,
+			$dayPeriodId,
+			$fieldId,
+			$hourId,
+			$minuteId,
+			$monthId,
+			$secondId,
+			$yearId,
+			$validationId,
+			$labelId,
+			$timeZoneNameId
+		]) => ({
+			day: $dayId,
+			description: $descriptionId,
+			dayPeriod: $dayPeriodId,
+			field: $fieldId,
+			hour: $hourId,
+			minute: $minuteId,
+			month: $monthId,
+			second: $secondId,
+			year: $yearId,
+			validation: $validationId,
+			label: $labelId,
+			timeZoneName: $timeZoneNameId
+		})
+	);
+
+	$: if (validationId) {
+		ids.dateField.validation.set(validationId);
+	}
+
+	$: if (descriptionId) {
+		ids.dateField.description.set(descriptionId);
+	}
+
+	$: value !== undefined && localValue.set(value);
+	$: placeholder !== undefined && localPlaceholder.set(placeholder);
+
+	$: updateOption("disabled", disabled);
+	$: updateOption("isDateUnavailable", isDateUnavailable);
+	$: updateOption("granularity", granularity);
+	$: updateOption("hideTimeZone", hideTimeZone);
+	$: updateOption("hourCycle", hourCycle);
+	$: updateOption("locale", locale);
+	$: updateOption("maxValue", maxValue);
+	$: updateOption("minValue", minValue);
+	$: updateOption("readonly", readonly);
+	$: updateOption("fixedWeeks", fixedWeeks);
+	$: updateOption("preventDeselect", preventDeselect);
+	$: updateOption("pagedNavigation", pagedNavigation);
+	$: updateOption("weekStartsOn", weekStartsOn);
+	$: updateOption("isDateDisabled", isDateDisabled);
+	$: updateOption("calendarLabel", calendarLabel);
+
+	$: slotProps = {
+		isInvalid: $localIsInvalid,
+		ids: $idValues
+	};
+</script>
+
+<slot {...slotProps} />
diff --git a/src/lib/bits/date-picker/ctx.ts b/src/lib/bits/date-picker/ctx.ts
new file mode 100644
index 000000000..e6b9da53d
--- /dev/null
+++ b/src/lib/bits/date-picker/ctx.ts
@@ -0,0 +1,23 @@
+import { createDatePicker, type CreateDatePickerProps } from "@melt-ui/svelte";
+import { getContext, setContext } from "svelte";
+import { removeUndefined, getOptionUpdater, createBitAttrs } from "$lib/internal/index.js";
+
+const NAME = "date-picker";
+const PARTS = ["label", "input", "segment", "calendar"] as const;
+
+export const getAttrs = createBitAttrs(NAME, PARTS);
+
+export function setCtx(props: CreateDatePickerProps) {
+	const datePicker = createDatePicker(removeUndefined(props));
+	const updateOption = getOptionUpdater(datePicker.options);
+	setContext(NAME, { ...datePicker, updateOption });
+
+	return {
+		...datePicker,
+		updateOption: getOptionUpdater(datePicker.options)
+	};
+}
+
+export function getCtx() {
+	return getContext<ReturnType<typeof setCtx>>(NAME);
+}
diff --git a/src/lib/bits/date-picker/index.ts b/src/lib/bits/date-picker/index.ts
new file mode 100644
index 000000000..1adffa92a
--- /dev/null
+++ b/src/lib/bits/date-picker/index.ts
@@ -0,0 +1,6 @@
+export { default as Root } from "./components/date-field.svelte";
+export { default as Input } from "./components/date-field-input.svelte";
+export { default as Label } from "./components/date-field-label.svelte";
+export { default as Segment } from "./components/date-field-segment.svelte";
+
+export type * from "./types.js";
diff --git a/src/lib/bits/date-picker/types.ts b/src/lib/bits/date-picker/types.ts
new file mode 100644
index 000000000..ce303c3ce
--- /dev/null
+++ b/src/lib/bits/date-picker/types.ts
@@ -0,0 +1,16 @@
+import type { HTMLDivAttributes, HTMLSpanAttributes } from "$lib/internal/index.js";
+import type * as I from "./_types.js";
+
+type Props = I.Props;
+
+type LabelProps = I.Props & HTMLSpanAttributes;
+
+type SegmentProps = I.SegmentProps & HTMLDivAttributes;
+
+type InputProps = I.InputProps & HTMLDivAttributes;
+
+type DescriptionProps = I.DescriptionProps & HTMLDivAttributes;
+
+type CalendarProps = I.CalendarProps & HTMLDivAttributes;
+
+export type { Props, CalendarProps, LabelProps, DescriptionProps, InputProps, SegmentProps };

From 51e2ae5b54e7195e4e601f129f8c668b67b1c4a2 Mon Sep 17 00:00:00 2001
From: Hunter Johnston <johnstonhuntera@gmail.com>
Date: Mon, 27 Nov 2023 12:05:04 -0500
Subject: [PATCH 149/217] more dpicker stuff

---
 src/components/demos/context-menu-demo.svelte |   4 +-
 src/components/demos/menubar-demo.svelte      |   8 +-
 .../components/date-picker-arrow.svelte       |  31 ++++++
 ...velte => date-picker-calendar-cell.svelte} |   4 +-
 ...velte => date-picker-calendar-date.svelte} |   4 +-
 ... => date-picker-calendar-grid-body.svelte} |   4 +-
 ... => date-picker-calendar-grid-head.svelte} |   4 +-
 ...e => date-picker-calendar-grid-row.svelte} |   4 +-
 ...velte => date-picker-calendar-grid.svelte} |   4 +-
 ... => date-picker-calendar-head-cell.svelte} |   4 +-
 ...lte => date-picker-calendar-header.svelte} |   4 +-
 ...te => date-picker-calendar-heading.svelte} |   4 +-
 ...> date-picker-calendar-next-button.svelte} |   4 +-
 ...> date-picker-calendar-prev-button.svelte} |   4 +-
 .../components/date-picker-calendar.svelte    |   4 +-
 .../components/date-picker-close.svelte       |  39 +++++++
 .../components/date-picker-content.svelte     | 104 ++++++++++++++++++
 .../components/date-picker-input.svelte       |   4 +-
 .../components/date-picker-label.svelte       |   4 +-
 .../components/date-picker-segment.svelte     |   4 +-
 .../components/date-picker-trigger.svelte     |  44 ++++++++
 .../date-picker/components/date-picker.svelte |  18 ++-
 src/lib/bits/date-picker/ctx.ts               |  26 ++++-
 src/lib/bits/date-picker/index.ts             |   5 -
 src/lib/bits/date-picker/types.ts             |  52 ++++++++-
 25 files changed, 338 insertions(+), 53 deletions(-)
 create mode 100644 src/lib/bits/date-picker/components/date-picker-arrow.svelte
 rename src/lib/bits/date-picker/components/{calendar-cell.svelte => date-picker-calendar-cell.svelte} (85%)
 rename src/lib/bits/date-picker/components/{calendar-date.svelte => date-picker-calendar-date.svelte} (88%)
 rename src/lib/bits/date-picker/components/{calendar-grid-body.svelte => date-picker-calendar-grid-body.svelte} (74%)
 rename src/lib/bits/date-picker/components/{calendar-grid-head.svelte => date-picker-calendar-grid-head.svelte} (68%)
 rename src/lib/bits/date-picker/components/{calendar-grid-row.svelte => date-picker-calendar-grid-row.svelte} (74%)
 rename src/lib/bits/date-picker/components/{calendar-grid.svelte => date-picker-calendar-grid.svelte} (82%)
 rename src/lib/bits/date-picker/components/{calendar-head-cell.svelte => date-picker-calendar-head-cell.svelte} (73%)
 rename src/lib/bits/date-picker/components/{calendar-header.svelte => date-picker-calendar-header.svelte} (75%)
 rename src/lib/bits/date-picker/components/{calendar-heading.svelte => date-picker-calendar-heading.svelte} (84%)
 rename src/lib/bits/date-picker/components/{calendar-next-button.svelte => date-picker-calendar-next-button.svelte} (81%)
 rename src/lib/bits/date-picker/components/{calendar-prev-button.svelte => date-picker-calendar-prev-button.svelte} (82%)
 create mode 100644 src/lib/bits/date-picker/components/date-picker-close.svelte
 create mode 100644 src/lib/bits/date-picker/components/date-picker-content.svelte
 create mode 100644 src/lib/bits/date-picker/components/date-picker-trigger.svelte

diff --git a/src/components/demos/context-menu-demo.svelte b/src/components/demos/context-menu-demo.svelte
index 311f0a3a8..cc4222bc2 100644
--- a/src/components/demos/context-menu-demo.svelte
+++ b/src/components/demos/context-menu-demo.svelte
@@ -20,7 +20,7 @@
 		</div>
 	</ContextMenu.Trigger>
 	<ContextMenu.Content
-		class="w-full max-w-[229px] rounded-xl border border-muted bg-background px-1 py-1.5 shadow-popover outline-none"
+		class="z-50 w-full max-w-[229px] rounded-xl border border-muted bg-background px-1 py-1.5 shadow-popover outline-none"
 		transition={flyAndScale}
 	>
 		<ContextMenu.Item
@@ -65,7 +65,7 @@
 				</div>
 			</ContextMenu.SubTrigger>
 			<ContextMenu.SubContent
-				class="w-full max-w-[209px] rounded-xl border border-muted bg-background px-1 py-1.5 shadow-popover outline-none"
+				class="z-50 w-full max-w-[209px] rounded-xl border border-muted bg-background px-1 py-1.5 shadow-popover outline-none"
 				transition={flyAndScale}
 				sideOffset={10}
 			>
diff --git a/src/components/demos/menubar-demo.svelte b/src/components/demos/menubar-demo.svelte
index 2f88ec616..401e63a16 100644
--- a/src/components/demos/menubar-demo.svelte
+++ b/src/components/demos/menubar-demo.svelte
@@ -26,7 +26,7 @@
 			>View</Menubar.Trigger
 		>
 		<Menubar.Content
-			class="w-full max-w-[220px] rounded-xl border border-muted bg-background px-1 py-1.5 shadow-popover outline-none"
+			class="z-50 w-full max-w-[220px] rounded-xl border border-muted bg-background px-1 py-1.5 shadow-popover outline-none"
 			transition={flyAndScale}
 			align="start"
 			sideOffset={3}
@@ -87,7 +87,7 @@
 			>Edit</Menubar.Trigger
 		>
 		<Menubar.Content
-			class="w-full max-w-[220px] rounded-xl border border-muted bg-background px-1 py-1.5 shadow-popover outline-none"
+			class="z-50 w-full max-w-[220px] rounded-xl border border-muted bg-background px-1 py-1.5 shadow-popover outline-none"
 			transition={flyAndScale}
 			align="start"
 			sideOffset={3}
@@ -154,7 +154,7 @@
 			>View</Menubar.Trigger
 		>
 		<Menubar.Content
-			class="w-full max-w-[220px] rounded-xl border border-muted bg-background px-1 py-1.5 shadow-popover outline-none"
+			class="z-50 w-full max-w-[220px] rounded-xl border border-muted bg-background px-1 py-1.5 shadow-popover outline-none"
 			transition={flyAndScale}
 			align="start"
 			sideOffset={3}
@@ -194,7 +194,7 @@
 			>Profiles</Menubar.Trigger
 		>
 		<Menubar.Content
-			class="w-full max-w-[220px] rounded-xl border border-muted bg-background px-1 py-1.5 shadow-popover outline-none"
+			class="z-50 w-full max-w-[220px] rounded-xl border border-muted bg-background px-1 py-1.5 shadow-popover outline-none"
 			transition={flyAndScale}
 			align="start"
 			sideOffset={3}
diff --git a/src/lib/bits/date-picker/components/date-picker-arrow.svelte b/src/lib/bits/date-picker/components/date-picker-arrow.svelte
new file mode 100644
index 000000000..b85456909
--- /dev/null
+++ b/src/lib/bits/date-picker/components/date-picker-arrow.svelte
@@ -0,0 +1,31 @@
+<script lang="ts">
+	import { getPopoverAttrs, getCtx } from "../ctx.js";
+	import { melt } from "@melt-ui/svelte";
+	import type { ArrowProps } from "../types.js";
+
+	type $$Props = ArrowProps;
+
+	export let asChild: $$Props["asChild"] = false;
+	export let size = 8;
+
+	const {
+		elements: { arrow },
+		updateOption
+	} = getCtx();
+
+	const attrs = getPopoverAttrs("arrow");
+
+	$: updateOption("arrowSize", size);
+
+	$: builder = $arrow;
+	$: slotProps = {
+		builder,
+		attrs
+	};
+</script>
+
+{#if asChild}
+	<slot {...slotProps} />
+{:else}
+	<div use:melt={builder} {...$$restProps} {...attrs} />
+{/if}
diff --git a/src/lib/bits/date-picker/components/calendar-cell.svelte b/src/lib/bits/date-picker/components/date-picker-calendar-cell.svelte
similarity index 85%
rename from src/lib/bits/date-picker/components/calendar-cell.svelte
rename to src/lib/bits/date-picker/components/date-picker-calendar-cell.svelte
index 012fa3cbb..e4d4d4c41 100644
--- a/src/lib/bits/date-picker/components/calendar-cell.svelte
+++ b/src/lib/bits/date-picker/components/date-picker-calendar-cell.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { getCtx, getAttrs } from "../ctx.js";
+	import { getCtx, getCalendarAttrs } from "../ctx.js";
 	import type { CellProps } from "../types.js";
 
 	type $$Props = CellProps;
@@ -12,7 +12,7 @@
 	} = getCtx();
 
 	$: attrs = {
-		...getAttrs("cell"),
+		...getCalendarAttrs("cell"),
 		"aria-disabled": $isDateDisabled(date) || $isDateUnavailable(date),
 		"data-disabled": $isDateDisabled(date) ? "" : undefined,
 		role: "gridcell"
diff --git a/src/lib/bits/date-picker/components/calendar-date.svelte b/src/lib/bits/date-picker/components/date-picker-calendar-date.svelte
similarity index 88%
rename from src/lib/bits/date-picker/components/calendar-date.svelte
rename to src/lib/bits/date-picker/components/date-picker-calendar-date.svelte
index a22ef45df..600f3d40c 100644
--- a/src/lib/bits/date-picker/components/calendar-date.svelte
+++ b/src/lib/bits/date-picker/components/date-picker-calendar-date.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { melt } from "@melt-ui/svelte";
-	import { getCtx, getAttrs } from "../ctx.js";
+	import { getCtx, getCalendarAttrs } from "../ctx.js";
 	import type { DateProps } from "../types.js";
 
 	type $$Props = DateProps;
@@ -15,7 +15,7 @@
 	} = getCtx();
 
 	$: builder = $cell(date, month);
-	const attrs = getAttrs("date");
+	const attrs = getCalendarAttrs("date");
 
 	$: slotProps = {
 		builder,
diff --git a/src/lib/bits/date-picker/components/calendar-grid-body.svelte b/src/lib/bits/date-picker/components/date-picker-calendar-grid-body.svelte
similarity index 74%
rename from src/lib/bits/date-picker/components/calendar-grid-body.svelte
rename to src/lib/bits/date-picker/components/date-picker-calendar-grid-body.svelte
index 3dbc84e88..7634f09f2 100644
--- a/src/lib/bits/date-picker/components/calendar-grid-body.svelte
+++ b/src/lib/bits/date-picker/components/date-picker-calendar-grid-body.svelte
@@ -1,11 +1,11 @@
 <script lang="ts">
-	import { getAttrs } from "../ctx.js";
+	import { getCalendarAttrs } from "../ctx.js";
 	import type { GridBodyProps } from "../types.js";
 
 	type $$Props = GridBodyProps;
 	export let asChild: $$Props["asChild"] = false;
 
-	const attrs = getAttrs("grid-body");
+	const attrs = getCalendarAttrs("grid-body");
 </script>
 
 {#if asChild}
diff --git a/src/lib/bits/date-picker/components/calendar-grid-head.svelte b/src/lib/bits/date-picker/components/date-picker-calendar-grid-head.svelte
similarity index 68%
rename from src/lib/bits/date-picker/components/calendar-grid-head.svelte
rename to src/lib/bits/date-picker/components/date-picker-calendar-grid-head.svelte
index a290dbd42..06ffac939 100644
--- a/src/lib/bits/date-picker/components/calendar-grid-head.svelte
+++ b/src/lib/bits/date-picker/components/date-picker-calendar-grid-head.svelte
@@ -1,11 +1,11 @@
 <script lang="ts">
-	import { getAttrs } from "../ctx.js";
+	import { getCalendarAttrs } from "../ctx.js";
 	import type { GridHeadProps } from "../types.js";
 
 	type $$Props = GridHeadProps;
 	export let asChild: $$Props["asChild"] = false;
 
-	const attrs = { ...getAttrs("grid-head"), "aria-hidden": true };
+	const attrs = { ...getCalendarAttrs("grid-head"), "aria-hidden": true };
 </script>
 
 {#if asChild}
diff --git a/src/lib/bits/date-picker/components/calendar-grid-row.svelte b/src/lib/bits/date-picker/components/date-picker-calendar-grid-row.svelte
similarity index 74%
rename from src/lib/bits/date-picker/components/calendar-grid-row.svelte
rename to src/lib/bits/date-picker/components/date-picker-calendar-grid-row.svelte
index ff14c3d16..5cdf946c1 100644
--- a/src/lib/bits/date-picker/components/calendar-grid-row.svelte
+++ b/src/lib/bits/date-picker/components/date-picker-calendar-grid-row.svelte
@@ -1,12 +1,12 @@
 <script lang="ts">
-	import { getAttrs } from "../ctx.js";
+	import { getCalendarAttrs } from "../ctx.js";
 	import type { GridRowProps } from "../types.js";
 
 	type $$Props = GridRowProps;
 
 	export let asChild: $$Props["asChild"] = false;
 
-	const attrs = getAttrs("grid-row");
+	const attrs = getCalendarAttrs("grid-row");
 </script>
 
 {#if asChild}
diff --git a/src/lib/bits/date-picker/components/calendar-grid.svelte b/src/lib/bits/date-picker/components/date-picker-calendar-grid.svelte
similarity index 82%
rename from src/lib/bits/date-picker/components/calendar-grid.svelte
rename to src/lib/bits/date-picker/components/date-picker-calendar-grid.svelte
index 3c7b3f15f..cb11be0e0 100644
--- a/src/lib/bits/date-picker/components/calendar-grid.svelte
+++ b/src/lib/bits/date-picker/components/date-picker-calendar-grid.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { melt } from "@melt-ui/svelte";
-	import { getAttrs, getCtx } from "../ctx.js";
+	import { getCalendarAttrs, getCtx } from "../ctx.js";
 	import type { GridProps } from "../types.js";
 
 	type $$Props = GridProps;
@@ -12,7 +12,7 @@
 	} = getCtx();
 
 	$: builder = $grid;
-	const attrs = getAttrs("grid");
+	const attrs = getCalendarAttrs("grid");
 
 	$: slotProps = {
 		builder,
diff --git a/src/lib/bits/date-picker/components/calendar-head-cell.svelte b/src/lib/bits/date-picker/components/date-picker-calendar-head-cell.svelte
similarity index 73%
rename from src/lib/bits/date-picker/components/calendar-head-cell.svelte
rename to src/lib/bits/date-picker/components/date-picker-calendar-head-cell.svelte
index e863b503d..c261a6ac6 100644
--- a/src/lib/bits/date-picker/components/calendar-head-cell.svelte
+++ b/src/lib/bits/date-picker/components/date-picker-calendar-head-cell.svelte
@@ -1,11 +1,11 @@
 <script lang="ts">
-	import { getAttrs } from "../ctx.js";
+	import { getCalendarAttrs } from "../ctx.js";
 	import type { HeadCellProps } from "../types.js";
 
 	type $$Props = HeadCellProps;
 	export let asChild: $$Props["asChild"] = false;
 
-	const attrs = getAttrs("head-cell");
+	const attrs = getCalendarAttrs("head-cell");
 </script>
 
 {#if asChild}
diff --git a/src/lib/bits/date-picker/components/calendar-header.svelte b/src/lib/bits/date-picker/components/date-picker-calendar-header.svelte
similarity index 75%
rename from src/lib/bits/date-picker/components/calendar-header.svelte
rename to src/lib/bits/date-picker/components/date-picker-calendar-header.svelte
index ec1df8ace..de8791404 100644
--- a/src/lib/bits/date-picker/components/calendar-header.svelte
+++ b/src/lib/bits/date-picker/components/date-picker-calendar-header.svelte
@@ -1,10 +1,10 @@
 <script lang="ts">
-	import { getAttrs } from "../ctx.js";
+	import { getCalendarAttrs } from "../ctx.js";
 	import type { HeaderProps } from "../types.js";
 	type $$Props = HeaderProps;
 	export let asChild: $$Props["asChild"] = false;
 
-	const attrs = getAttrs("header");
+	const attrs = getCalendarAttrs("header");
 </script>
 
 {#if asChild}
diff --git a/src/lib/bits/date-picker/components/calendar-heading.svelte b/src/lib/bits/date-picker/components/date-picker-calendar-heading.svelte
similarity index 84%
rename from src/lib/bits/date-picker/components/calendar-heading.svelte
rename to src/lib/bits/date-picker/components/date-picker-calendar-heading.svelte
index c4463f49a..b67adec42 100644
--- a/src/lib/bits/date-picker/components/calendar-heading.svelte
+++ b/src/lib/bits/date-picker/components/date-picker-calendar-heading.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { melt } from "@melt-ui/svelte";
-	import { getAttrs, getCtx } from "../ctx.js";
+	import { getCalendarAttrs, getCtx } from "../ctx.js";
 	import type { HeadingProps } from "../types.js";
 
 	type $$Props = HeadingProps;
@@ -13,7 +13,7 @@
 	} = getCtx();
 
 	$: builder = $heading;
-	const attrs = getAttrs("heading");
+	const attrs = getCalendarAttrs("heading");
 </script>
 
 {#if asChild}
diff --git a/src/lib/bits/date-picker/components/calendar-next-button.svelte b/src/lib/bits/date-picker/components/date-picker-calendar-next-button.svelte
similarity index 81%
rename from src/lib/bits/date-picker/components/calendar-next-button.svelte
rename to src/lib/bits/date-picker/components/date-picker-calendar-next-button.svelte
index b5285d949..c887fcf5e 100644
--- a/src/lib/bits/date-picker/components/calendar-next-button.svelte
+++ b/src/lib/bits/date-picker/components/date-picker-calendar-next-button.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { melt } from "@melt-ui/svelte";
-	import { getAttrs, getCtx } from "../ctx.js";
+	import { getCalendarAttrs, getCtx } from "../ctx.js";
 	import type { NextButtonProps } from "../types.js";
 
 	type $$Props = NextButtonProps;
@@ -12,7 +12,7 @@
 	} = getCtx();
 
 	$: builder = $nextButton;
-	const attrs = getAttrs("next-button");
+	const attrs = getCalendarAttrs("next-button");
 </script>
 
 {#if asChild}
diff --git a/src/lib/bits/date-picker/components/calendar-prev-button.svelte b/src/lib/bits/date-picker/components/date-picker-calendar-prev-button.svelte
similarity index 82%
rename from src/lib/bits/date-picker/components/calendar-prev-button.svelte
rename to src/lib/bits/date-picker/components/date-picker-calendar-prev-button.svelte
index 3775bc3c0..64e7cda89 100644
--- a/src/lib/bits/date-picker/components/calendar-prev-button.svelte
+++ b/src/lib/bits/date-picker/components/date-picker-calendar-prev-button.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { melt } from "@melt-ui/svelte";
-	import { getAttrs, getCtx } from "../ctx.js";
+	import { getCalendarAttrs, getCtx } from "../ctx.js";
 	import type { PrevButtonProps } from "../types.js";
 
 	type $$Props = PrevButtonProps;
@@ -12,7 +12,7 @@
 	} = getCtx();
 
 	$: builder = $prevButton;
-	const attrs = getAttrs("prev-button");
+	const attrs = getCalendarAttrs("prev-button");
 
 	$: slotProps = {
 		builder,
diff --git a/src/lib/bits/date-picker/components/date-picker-calendar.svelte b/src/lib/bits/date-picker/components/date-picker-calendar.svelte
index e3ada9760..329b9b77f 100644
--- a/src/lib/bits/date-picker/components/date-picker-calendar.svelte
+++ b/src/lib/bits/date-picker/components/date-picker-calendar.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { melt } from "@melt-ui/svelte";
-	import { getCtx, getAttrs } from "../ctx.js";
+	import { getCtx, getCalendarAttrs } from "../ctx.js";
 	import type { CalendarProps } from "../types.js";
 
 	type $$Props = CalendarProps;
@@ -19,7 +19,7 @@
 	}
 
 	$: builder = $calendar;
-	const attrs = getAttrs("calendar");
+	const attrs = getCalendarAttrs("root");
 
 	$: slotProps = {
 		builder,
diff --git a/src/lib/bits/date-picker/components/date-picker-close.svelte b/src/lib/bits/date-picker/components/date-picker-close.svelte
new file mode 100644
index 000000000..4c7fefd3f
--- /dev/null
+++ b/src/lib/bits/date-picker/components/date-picker-close.svelte
@@ -0,0 +1,39 @@
+<script lang="ts">
+	import { melt } from "@melt-ui/svelte";
+	import { getCtx, getPopoverAttrs } from "../ctx.js";
+	import type { CloseProps, CloseEvents } from "../types.js";
+	import { createDispatcher } from "$lib/internal/events.js";
+
+	type $$Props = CloseProps;
+	type $$Events = CloseEvents;
+
+	export let asChild: $$Props["asChild"] = false;
+
+	const {
+		elements: { close }
+	} = getCtx();
+
+	const dispatch = createDispatcher();
+	const attrs = getPopoverAttrs("close");
+
+	$: builder = $close;
+	$: slotProps = {
+		builder,
+		attrs
+	};
+</script>
+
+{#if asChild}
+	<slot {...slotProps} />
+{:else}
+	<button
+		use:melt={builder}
+		type="button"
+		{...$$restProps}
+		{...attrs}
+		on:m-click={dispatch}
+		on:m-keydown={dispatch}
+	>
+		<slot {...slotProps} />
+	</button>
+{/if}
diff --git a/src/lib/bits/date-picker/components/date-picker-content.svelte b/src/lib/bits/date-picker/components/date-picker-content.svelte
new file mode 100644
index 000000000..f06066bfa
--- /dev/null
+++ b/src/lib/bits/date-picker/components/date-picker-content.svelte
@@ -0,0 +1,104 @@
+<script lang="ts">
+	import { melt } from "@melt-ui/svelte";
+	import type { Transition } from "$lib/internal/index.js";
+	import { getCtx, getPopoverAttrs, updatePositioning } from "../ctx.js";
+	import type { ContentProps } from "../types.js";
+
+	type T = $$Generic<Transition>;
+	type In = $$Generic<Transition>;
+	type Out = $$Generic<Transition>;
+
+	type $$Props = ContentProps<T, In, Out>;
+
+	export let transition: $$Props["transition"] = undefined;
+	export let transitionConfig: $$Props["transitionConfig"] = undefined;
+	export let inTransition: $$Props["inTransition"] = undefined;
+	export let inTransitionConfig: $$Props["inTransitionConfig"] = undefined;
+	export let outTransition: $$Props["outTransition"] = undefined;
+	export let outTransitionConfig: $$Props["outTransitionConfig"] = undefined;
+	export let asChild: $$Props["asChild"] = false;
+	export let id: $$Props["id"] = undefined;
+	export let side: $$Props["side"] = "bottom";
+	export let align: $$Props["align"] = "center";
+	export let sideOffset: $$Props["sideOffset"] = 0;
+	export let alignOffset: $$Props["alignOffset"] = 0;
+	export let collisionPadding: $$Props["collisionPadding"] = 8;
+	export let avoidCollisions: $$Props["avoidCollisions"] = true;
+	export let collisionBoundary: $$Props["collisionBoundary"] = undefined;
+	export let sameWidth: $$Props["sameWidth"] = false;
+	export let fitViewport: $$Props["fitViewport"] = false;
+
+	const {
+		elements: { content },
+		states: { open },
+		ids
+	} = getCtx();
+
+	const attrs = getPopoverAttrs("content");
+
+	$: if (id) {
+		ids.popover.content.set(id);
+	}
+	$: builder = $content;
+	$: slotProps = {
+		builder,
+		attrs
+	};
+
+	$: updatePositioning({
+		side,
+		align,
+		sideOffset,
+		alignOffset,
+		collisionPadding,
+		avoidCollisions,
+		collisionBoundary,
+		sameWidth,
+		fitViewport
+	});
+</script>
+
+{#if asChild && $open}
+	<slot {...slotProps} />
+{:else if transition && $open}
+	<div
+		transition:transition={transitionConfig}
+		use:melt={builder}
+		{...$$restProps}
+		{...attrs}
+	>
+		<slot {...slotProps} />
+	</div>
+{:else if inTransition && outTransition && $open}
+	<div
+		in:inTransition={inTransitionConfig}
+		out:outTransition={outTransitionConfig}
+		use:melt={builder}
+		{...$$restProps}
+		{...attrs}
+	>
+		<slot {...slotProps} />
+	</div>
+{:else if inTransition && $open}
+	<div
+		in:inTransition={inTransitionConfig}
+		use:melt={builder}
+		{...$$restProps}
+		{...attrs}
+	>
+		<slot {...slotProps} />
+	</div>
+{:else if outTransition && $open}
+	<div
+		out:outTransition={outTransitionConfig}
+		use:melt={builder}
+		{...$$restProps}
+		{...attrs}
+	>
+		<slot {...slotProps} />
+	</div>
+{:else if $open}
+	<div use:melt={builder} {...$$restProps} {...attrs}>
+		<slot {...slotProps} />
+	</div>
+{/if}
diff --git a/src/lib/bits/date-picker/components/date-picker-input.svelte b/src/lib/bits/date-picker/components/date-picker-input.svelte
index 83840f3aa..bb7f5e690 100644
--- a/src/lib/bits/date-picker/components/date-picker-input.svelte
+++ b/src/lib/bits/date-picker/components/date-picker-input.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { melt } from "@melt-ui/svelte";
-	import { getCtx, getAttrs } from "../ctx.js";
+	import { getCtx, getFieldAttrs } from "../ctx.js";
 	import type { InputProps } from "../types.js";
 
 	type $$Props = InputProps;
@@ -18,7 +18,7 @@
 		ids.dateField.field.set(id);
 	}
 
-	const attrs = getAttrs("input");
+	const attrs = getFieldAttrs("input");
 
 	$: builder = $field;
 	$: slotProps = {
diff --git a/src/lib/bits/date-picker/components/date-picker-label.svelte b/src/lib/bits/date-picker/components/date-picker-label.svelte
index 3b8e359b1..cf6ff71fd 100644
--- a/src/lib/bits/date-picker/components/date-picker-label.svelte
+++ b/src/lib/bits/date-picker/components/date-picker-label.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { melt } from "@melt-ui/svelte";
-	import { getCtx, getAttrs } from "../ctx.js";
+	import { getCtx, getFieldAttrs } from "../ctx.js";
 	import type { LabelProps } from "../types.js";
 
 	type $$Props = LabelProps;
@@ -17,7 +17,7 @@
 		ids.dateField.label.set(id);
 	}
 
-	const attrs = getAttrs("label");
+	const attrs = getFieldAttrs("label");
 
 	$: builder = $label;
 	$: slotProps = {
diff --git a/src/lib/bits/date-picker/components/date-picker-segment.svelte b/src/lib/bits/date-picker/components/date-picker-segment.svelte
index c10b8db07..20c0937df 100644
--- a/src/lib/bits/date-picker/components/date-picker-segment.svelte
+++ b/src/lib/bits/date-picker/components/date-picker-segment.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { melt } from "@melt-ui/svelte";
-	import { getCtx, getAttrs } from "../ctx.js";
+	import { getCtx, getFieldAttrs } from "../ctx.js";
 	import type { SegmentProps } from "../types.js";
 
 	type $$Props = SegmentProps;
@@ -18,7 +18,7 @@
 		ids.dateField[part].set(id);
 	}
 
-	const attrs = getAttrs("segment");
+	const attrs = getFieldAttrs("segment");
 
 	$: builder = $segment(part);
 	$: slotProps = {
diff --git a/src/lib/bits/date-picker/components/date-picker-trigger.svelte b/src/lib/bits/date-picker/components/date-picker-trigger.svelte
new file mode 100644
index 000000000..3e965f7d2
--- /dev/null
+++ b/src/lib/bits/date-picker/components/date-picker-trigger.svelte
@@ -0,0 +1,44 @@
+<script lang="ts">
+	import { melt } from "@melt-ui/svelte";
+	import { getCtx, getPopoverAttrs } from "../ctx.js";
+	import type { TriggerEvents, TriggerProps } from "../types.js";
+	import { createDispatcher } from "$lib/internal/events.js";
+
+	type $$Props = TriggerProps;
+	type $$Events = TriggerEvents;
+
+	export let asChild: $$Props["asChild"] = false;
+	export let id: $$Props["id"] = undefined;
+
+	const {
+		elements: { trigger },
+		ids
+	} = getCtx();
+
+	const dispatch = createDispatcher();
+	const attrs = getPopoverAttrs("trigger");
+
+	$: if (id) {
+		ids.popover.trigger.set(id);
+	}
+	$: builder = $trigger;
+	$: slotProps = {
+		builder,
+		attrs
+	};
+</script>
+
+{#if asChild}
+	<slot {...slotProps} />
+{:else}
+	<button
+		use:melt={builder}
+		type="button"
+		{...$$restProps}
+		{...attrs}
+		on:m-click={dispatch}
+		on:m-keydown={dispatch}
+	>
+		<slot {...slotProps} />
+	</button>
+{/if}
diff --git a/src/lib/bits/date-picker/components/date-picker.svelte b/src/lib/bits/date-picker/components/date-picker.svelte
index 94d4e3f8a..e80ac755a 100644
--- a/src/lib/bits/date-picker/components/date-picker.svelte
+++ b/src/lib/bits/date-picker/components/date-picker.svelte
@@ -82,7 +82,11 @@
 			ids.dateField.year,
 			ids.dateField.validation,
 			ids.dateField.label,
-			ids.dateField.timeZoneName
+			ids.dateField.timeZoneName,
+			ids.calendar.calendar,
+			ids.calendar.grid,
+			ids.popover.content,
+			ids.popover.trigger
 		],
 		([
 			$dayId,
@@ -96,7 +100,11 @@
 			$yearId,
 			$validationId,
 			$labelId,
-			$timeZoneNameId
+			$timeZoneNameId,
+			$calendarId,
+			$gridId,
+			$contentId,
+			$triggerId
 		]) => ({
 			day: $dayId,
 			description: $descriptionId,
@@ -109,7 +117,11 @@
 			year: $yearId,
 			validation: $validationId,
 			label: $labelId,
-			timeZoneName: $timeZoneNameId
+			timeZoneName: $timeZoneNameId,
+			calendar: $calendarId,
+			grid: $gridId,
+			content: $contentId,
+			trigger: $triggerId
 		})
 	);
 
diff --git a/src/lib/bits/date-picker/ctx.ts b/src/lib/bits/date-picker/ctx.ts
index e6b9da53d..7807e80ea 100644
--- a/src/lib/bits/date-picker/ctx.ts
+++ b/src/lib/bits/date-picker/ctx.ts
@@ -1,11 +1,16 @@
 import { createDatePicker, type CreateDatePickerProps } from "@melt-ui/svelte";
 import { getContext, setContext } from "svelte";
-import { removeUndefined, getOptionUpdater, createBitAttrs } from "$lib/internal/index.js";
+import { removeUndefined, getOptionUpdater } from "$lib/internal/index.js";
+import { getAttrs as getCalendarAttrs } from "$lib/bits/calendar/ctx.js";
+import { getAttrs as getFieldAttrs } from "$lib/bits/date-field/ctx.js";
+import { getAttrs as getPopoverAttrs } from "$lib/bits/popover/ctx.js";
+import { getPositioningUpdater, type PositioningProps } from "../floating/helpers";
+import type { Writable } from "svelte/store";
+import type { FloatingConfig } from "../floating/floating-config";
 
 const NAME = "date-picker";
-const PARTS = ["label", "input", "segment", "calendar"] as const;
 
-export const getAttrs = createBitAttrs(NAME, PARTS);
+export { getCalendarAttrs, getFieldAttrs, getPopoverAttrs };
 
 export function setCtx(props: CreateDatePickerProps) {
 	const datePicker = createDatePicker(removeUndefined(props));
@@ -21,3 +26,18 @@ export function setCtx(props: CreateDatePickerProps) {
 export function getCtx() {
 	return getContext<ReturnType<typeof setCtx>>(NAME);
 }
+
+const defaultPlacement = {
+	side: "bottom",
+	align: "center"
+} satisfies PositioningProps;
+
+export function updatePositioning(props: PositioningProps) {
+	const withDefaults = { ...defaultPlacement, ...props } satisfies PositioningProps;
+	const {
+		options: { positioning }
+	} = getCtx();
+
+	const updater = getPositioningUpdater(positioning as Writable<FloatingConfig>);
+	updater(withDefaults);
+}
diff --git a/src/lib/bits/date-picker/index.ts b/src/lib/bits/date-picker/index.ts
index 1adffa92a..2e7353eed 100644
--- a/src/lib/bits/date-picker/index.ts
+++ b/src/lib/bits/date-picker/index.ts
@@ -1,6 +1 @@
-export { default as Root } from "./components/date-field.svelte";
-export { default as Input } from "./components/date-field-input.svelte";
-export { default as Label } from "./components/date-field-label.svelte";
-export { default as Segment } from "./components/date-field-segment.svelte";
-
 export type * from "./types.js";
diff --git a/src/lib/bits/date-picker/types.ts b/src/lib/bits/date-picker/types.ts
index ce303c3ce..63dc92e40 100644
--- a/src/lib/bits/date-picker/types.ts
+++ b/src/lib/bits/date-picker/types.ts
@@ -1,16 +1,56 @@
 import type { HTMLDivAttributes, HTMLSpanAttributes } from "$lib/internal/index.js";
 import type * as I from "./_types.js";
+import type {
+	CellProps,
+	DateProps,
+	GridBodyProps,
+	GridHeadProps,
+	GridRowProps,
+	GridProps,
+	HeadCellProps,
+	HeaderProps,
+	HeadingProps,
+	NextButtonProps,
+	PrevButtonProps
+} from "../calendar/types.js";
+import type {
+	TriggerProps,
+	ContentProps,
+	ArrowProps,
+	CloseProps,
+	CloseEvents,
+	TriggerEvents
+} from "../popover/types.js";
 
 type Props = I.Props;
-
 type LabelProps = I.Props & HTMLSpanAttributes;
-
 type SegmentProps = I.SegmentProps & HTMLDivAttributes;
-
 type InputProps = I.InputProps & HTMLDivAttributes;
-
 type DescriptionProps = I.DescriptionProps & HTMLDivAttributes;
-
 type CalendarProps = I.CalendarProps & HTMLDivAttributes;
 
-export type { Props, CalendarProps, LabelProps, DescriptionProps, InputProps, SegmentProps };
+export type {
+	Props,
+	CalendarProps,
+	LabelProps,
+	DescriptionProps,
+	InputProps,
+	SegmentProps,
+	CellProps,
+	DateProps,
+	GridBodyProps,
+	GridHeadProps,
+	GridRowProps,
+	GridProps,
+	HeadCellProps,
+	HeaderProps,
+	HeadingProps,
+	NextButtonProps,
+	PrevButtonProps,
+	TriggerProps,
+	ContentProps,
+	ArrowProps,
+	CloseProps,
+	CloseEvents,
+	TriggerEvents
+};

From f34ba95a794b105b45a19d0796e6300852b5ede5 Mon Sep 17 00:00:00 2001
From: Hunter Johnston <johnstonhuntera@gmail.com>
Date: Mon, 27 Nov 2023 15:15:22 -0500
Subject: [PATCH 150/217] fix data attrs

---
 content/components/date-field.md              |  2 -
 content/components/date-picker.md             | 19 ++++
 src/components/demos/calendar-demo.svelte     |  6 +-
 src/components/demos/date-picker-demo.svelte  | 91 +++++++++++++++++++
 src/components/demos/index.ts                 |  1 +
 src/config/navigation.ts                      |  5 +
 src/content/api-reference/accordion.ts        | 10 +-
 src/content/api-reference/alert-dialog.ts     | 16 ++--
 src/content/api-reference/avatar.ts           |  6 +-
 src/content/api-reference/button.ts           |  2 +-
 src/content/api-reference/calendar.ts         | 24 ++---
 src/content/api-reference/checkbox.ts         |  4 +-
 src/content/api-reference/collapsible.ts      |  6 +-
 src/content/api-reference/dialog.ts           | 14 +--
 src/content/api-reference/label.ts            |  2 +-
 src/content/api-reference/link-preview.ts     |  6 +-
 src/content/api-reference/menu.ts             | 26 +++---
 src/content/api-reference/popover.ts          |  8 +-
 src/content/api-reference/progress.ts         |  2 +-
 src/content/api-reference/radio-group.ts      |  6 +-
 src/content/api-reference/range-calendar.ts   | 24 ++---
 src/content/api-reference/select.ts           | 16 ++--
 src/content/api-reference/separator.ts        |  2 +-
 src/content/api-reference/slider.ts           |  8 +-
 src/content/api-reference/switch.ts           |  4 +-
 src/content/api-reference/tabs.ts             |  8 +-
 src/content/api-reference/toggle-group.ts     |  4 +-
 src/content/api-reference/toggle.ts           |  2 +-
 src/content/api-reference/tooltip.ts          |  6 +-
 src/lib/bits/button/components/button.svelte  |  2 +-
 .../calendar/components/calendar-grid.svelte  |  1 +
 src/lib/bits/date-picker/index.ts             | 22 +++++
 src/lib/bits/index.ts                         |  1 +
 src/lib/internal/attrs.ts                     |  2 +-
 src/tests/accordion/Accordion.spec.ts         | 14 +--
 src/tests/alert-dialog/AlertDialog.spec.ts    |  2 +-
 src/tests/checkbox/Checkbox.spec.ts           |  4 +-
 src/tests/collapsible/Collapsible.spec.ts     |  6 +-
 src/tests/context-menu/ContextMenu.spec.ts    |  4 +-
 src/tests/dialog/Dialog.spec.ts               |  2 +-
 src/tests/dropdown-menu/DropdownMenu.spec.ts  |  4 +-
 src/tests/label/Label.spec.ts                 |  2 +-
 src/tests/link-preview/LinkPreview.spec.ts    |  2 +-
 src/tests/menubar/Menubar.spec.ts             |  6 +-
 src/tests/popover/Popover.spec.ts             |  2 +-
 src/tests/progress/Progress.spec.ts           |  2 +-
 src/tests/radio-group/RadioGroup.spec.ts      |  4 +-
 src/tests/select/Select.spec.ts               |  4 +-
 src/tests/separator/Separator.spec.ts         |  2 +-
 src/tests/switch/Switch.spec.ts               |  4 +-
 src/tests/tabs/Tabs.spec.ts                   |  8 +-
 src/tests/toggle-group/ToggleGroup.spec.ts    |  4 +-
 src/tests/toggle/Toggle.spec.ts               |  2 +-
 src/tests/tooltip/Tooltip.spec.ts             |  2 +-
 54 files changed, 288 insertions(+), 150 deletions(-)
 create mode 100644 content/components/date-picker.md
 create mode 100644 src/components/demos/date-picker-demo.svelte

diff --git a/content/components/date-field.md b/content/components/date-field.md
index 9c72331bb..f843ac392 100644
--- a/content/components/date-field.md
+++ b/content/components/date-field.md
@@ -34,5 +34,3 @@ description: A date field component.
 ```
 
 <APISection {schemas} />
-
-<DateFieldDemo />
diff --git a/content/components/date-picker.md b/content/components/date-picker.md
new file mode 100644
index 000000000..6c074b853
--- /dev/null
+++ b/content/components/date-picker.md
@@ -0,0 +1,19 @@
+---
+title: Date Picker
+description: A date picker component.
+---
+
+<script>
+	import { APISection, ComponentPreview, DatePickerDemo } from '@/components'
+	export let schemas;
+</script>
+
+<ComponentPreview name="date-picker-demo" comp="Date Picker">
+
+<DatePickerDemo slot="preview" />
+
+</ComponentPreview>
+
+## Structure
+
+<APISection {schemas} />
diff --git a/src/components/demos/calendar-demo.svelte b/src/components/demos/calendar-demo.svelte
index fb15058c3..9db74ad01 100644
--- a/src/components/demos/calendar-demo.svelte
+++ b/src/components/demos/calendar-demo.svelte
@@ -39,16 +39,16 @@
 				</Calendar.GridHead>
 				<Calendar.GridBody>
 					{#each month.weeks as weekDates}
-						<Calendar.GridRow class="mt-1 flex w-full gap-1">
+						<Calendar.GridRow class="mt-1 flex w-full gap-0.5">
 							{#each weekDates as date}
 								<Calendar.Cell
 									{date}
-									class="relative h-9 w-9 p-0 text-center text-sm focus-within:relative focus-within:z-20"
+									class="relative h-7 w-7 p-0 text-center text-sm"
 								>
 									<Calendar.Date
 										{date}
 										month={month.value}
-										class="inline-flex h-9 w-9 items-center justify-center whitespace-nowrap rounded-[7px] bg-background p-0 text-sm font-normal text-foreground ring-offset-background transition-colors hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground focus-visible:ring-offset-2 data-[disabled]:pointer-events-none data-[outside-month]:pointer-events-none data-[selected]:bg-foreground data-[selected]:text-background data-[disabled]:opacity-50 data-[outside-month]:opacity-20 "
+										class="inline-flex h-7 w-7 items-center justify-center whitespace-nowrap rounded-[7px] bg-background p-0 text-sm font-normal text-foreground ring-offset-background transition-colors hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground focus-visible:ring-offset-2 data-[disabled]:pointer-events-none data-[outside-month]:pointer-events-none data-[selected]:bg-foreground data-[selected]:text-background data-[disabled]:opacity-50 data-[outside-month]:opacity-20 "
 									/>
 								</Calendar.Cell>
 							{/each}
diff --git a/src/components/demos/date-picker-demo.svelte b/src/components/demos/date-picker-demo.svelte
new file mode 100644
index 000000000..92de4000c
--- /dev/null
+++ b/src/components/demos/date-picker-demo.svelte
@@ -0,0 +1,91 @@
+<script lang="ts">
+	import { DatePicker } from "$lib";
+	import { flyAndScale } from "@/utils";
+	import { CaretLeft, CaretRight, CalendarBlank } from "phosphor-svelte";
+</script>
+
+<DatePicker.Root>
+	<div class="flex min-w-[200px] flex-col gap-1">
+		<DatePicker.Label class="block select-none">Check-in date</DatePicker.Label>
+		<DatePicker.Input
+			let:segments
+			class="flex h-input w-full max-w-[300px] select-none items-center rounded-input border border-border-input bg-background p-3 text-sm shadow-mini"
+		>
+			{#each segments as { part, value }}
+				<div class="inline-block select-none">
+					<DatePicker.Segment
+						{part}
+						class="rounded-[3px] px-1 focus-visible:bg-foreground focus-visible:font-medium focus-visible:text-background focus-visible:outline-none data-[segment=literal]:px-px data-[segment=literal]:text-muted-foreground"
+					>
+						{value}
+					</DatePicker.Segment>
+				</div>
+			{/each}
+			<DatePicker.Trigger
+				class="ml-auto rounded-[5px] p-1 transition-all hover:bg-dark-10"
+			>
+				<CalendarBlank class="h-5 w-5" />
+			</DatePicker.Trigger>
+		</DatePicker.Input>
+	</div>
+	<DatePicker.Content sideOffset={2} transition={flyAndScale}>
+		<DatePicker.Calendar
+			class="rounded-card border border-dark-10 bg-background p-6 shadow-popover"
+			let:months
+			let:daysOfWeek
+		>
+			<DatePicker.CalendarHeader class="flex items-center justify-between">
+				<DatePicker.CalendarPrevButton
+					class="inline-flex h-7 w-7 items-center justify-center rounded-[7px] border border-border-input bg-background shadow-btn transition-all hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground focus-visible:ring-offset-2 focus-visible:ring-offset-background active:scale-98"
+				>
+					<CaretLeft class="h-4 w-4" />
+				</DatePicker.CalendarPrevButton>
+				<DatePicker.CalendarHeading class="font-medium" />
+				<DatePicker.CalendarNextButton
+					class="inline-flex h-7 w-7 items-center justify-center rounded-[7px] border border-border-input bg-background shadow-btn transition-all hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground focus-visible:ring-offset-2 focus-visible:ring-offset-background active:scale-98"
+				>
+					<CaretRight class="h-4 w-4" />
+				</DatePicker.CalendarNextButton>
+			</DatePicker.CalendarHeader>
+			<div
+				class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0"
+			>
+				{#each months as month}
+					<DatePicker.CalendarGrid
+						class="w-full border-collapse select-none space-y-1"
+					>
+						<DatePicker.CalendarGridHead>
+							<DatePicker.CalendarGridRow class="flex w-full justify-between">
+								{#each daysOfWeek as day}
+									<DatePicker.CalendarHeadCell
+										class="w-9 rounded-md text-[0.8rem] font-medium text-muted-foreground"
+									>
+										<div>{day}</div>
+									</DatePicker.CalendarHeadCell>
+								{/each}
+							</DatePicker.CalendarGridRow>
+						</DatePicker.CalendarGridHead>
+						<DatePicker.CalendarGridBody>
+							{#each month.weeks as weekDates}
+								<DatePicker.CalendarGridRow class="mt-1 flex w-full gap-1">
+									{#each weekDates as date}
+										<DatePicker.CalendarCell
+											{date}
+											class="relative h-9 w-9 p-0 text-center text-sm focus-within:relative focus-within:z-20"
+										>
+											<DatePicker.CalendarDate
+												{date}
+												month={month.value}
+												class="inline-flex h-9 w-9 items-center justify-center whitespace-nowrap rounded-[7px] bg-background p-0 text-sm font-normal text-foreground ring-offset-background transition-colors hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground focus-visible:ring-offset-2 data-[disabled]:pointer-events-none data-[outside-month]:pointer-events-none data-[selected]:bg-foreground data-[selected]:text-background data-[disabled]:opacity-50 data-[outside-month]:opacity-20 "
+											/>
+										</DatePicker.CalendarCell>
+									{/each}
+								</DatePicker.CalendarGridRow>
+							{/each}
+						</DatePicker.CalendarGridBody>
+					</DatePicker.CalendarGrid>
+				{/each}
+			</div>
+		</DatePicker.Calendar>
+	</DatePicker.Content>
+</DatePicker.Root>
diff --git a/src/components/demos/index.ts b/src/components/demos/index.ts
index ce58856a9..82ee494d6 100644
--- a/src/components/demos/index.ts
+++ b/src/components/demos/index.ts
@@ -9,6 +9,7 @@ export { default as CollapsibleDemo } from "./collapsible-demo.svelte";
 export { default as ContextMenuDemo } from "./context-menu-demo.svelte";
 export { default as DateFieldDemo } from "./date-field-demo.svelte";
 export { default as DateRangeFieldDemo } from "./date-range-field-demo.svelte";
+export { default as DatePickerDemo } from "./date-picker-demo.svelte";
 export { default as DialogDemo } from "./dialog-demo.svelte";
 export { default as DropdownMenuDemo } from "./dropdown-menu-demo.svelte";
 export { default as LabelDemo } from "./label-demo.svelte";
diff --git a/src/config/navigation.ts b/src/config/navigation.ts
index 222d1e3fb..11d264959 100644
--- a/src/config/navigation.ts
+++ b/src/config/navigation.ts
@@ -110,6 +110,11 @@ export const navigation: Navigation = {
 					href: "/docs/components/date-range-field",
 					items: []
 				},
+				{
+					title: "Date Picker",
+					href: "/docs/components/date-picker",
+					items: []
+				},
 				{
 					title: "Dialog",
 					href: "/docs/components/dialog",
diff --git a/src/content/api-reference/accordion.ts b/src/content/api-reference/accordion.ts
index 606a435ad..d88443550 100644
--- a/src/content/api-reference/accordion.ts
+++ b/src/content/api-reference/accordion.ts
@@ -40,7 +40,7 @@ const root: APISchema<Accordion.Props<false>> = {
 			description: "The orientation of the accordion."
 		},
 		{
-			name: "accordion-root",
+			name: "b-accordion-root",
 			value: "",
 			description: "Present on the root element."
 		}
@@ -75,7 +75,7 @@ const item: APISchema<Accordion.ItemProps> = {
 			description: "Present when the accordion item is disabled."
 		},
 		{
-			name: "accordion-item",
+			name: "b-accordion-item",
 			description: "Present on the item element."
 		}
 	]
@@ -100,7 +100,7 @@ const trigger: APISchema<Accordion.TriggerProps> = {
 			description: "The value of the accordion item."
 		},
 		{
-			name: "accordion-trigger",
+			name: "b-accordion-trigger",
 			description: "Present on the trigger element."
 		}
 	]
@@ -125,7 +125,7 @@ const content: APISchema<Accordion.ContentProps> = {
 			description: "The value of the accordion item."
 		},
 		{
-			name: "accordion-content",
+			name: "b-accordion-content",
 			description: "Present on the content element."
 		}
 	]
@@ -151,7 +151,7 @@ const header: APISchema<Accordion.HeaderProps> = {
 			description: "The heading level of the header."
 		},
 		{
-			name: "accordion-header",
+			name: "b-accordion-header",
 			description: "Present on the header element."
 		}
 	]
diff --git a/src/content/api-reference/alert-dialog.ts b/src/content/api-reference/alert-dialog.ts
index f4271e0cd..3da670454 100644
--- a/src/content/api-reference/alert-dialog.ts
+++ b/src/content/api-reference/alert-dialog.ts
@@ -55,7 +55,7 @@ const action: APISchema<AlertDialog.ActionProps> = {
 	},
 	dataAttributes: [
 		{
-			name: "alert-dialog-action",
+			name: "b-alert-dialog-action",
 			description: "Present on the action button."
 		}
 	]
@@ -67,7 +67,7 @@ const cancel: APISchema<AlertDialog.CancelProps> = {
 	props: { asChild },
 	dataAttributes: [
 		{
-			name: "alert-dialog-cancel",
+			name: "b-alert-dialog-cancel",
 			description: "Present on the cancel button."
 		}
 	]
@@ -84,7 +84,7 @@ const content: APISchema<AlertDialog.ContentProps> = {
 			description: "The state of the alert dialog."
 		},
 		{
-			name: "alert-dialog-content",
+			name: "b-alert-dialog-content",
 			description: "Present on the content."
 		}
 	]
@@ -105,7 +105,7 @@ const title: APISchema<AlertDialog.TitleProps> = {
 	},
 	dataAttributes: [
 		{
-			name: "alert-dialog-title",
+			name: "b-alert-dialog-title",
 			description: "Present on the title."
 		}
 	]
@@ -117,7 +117,7 @@ const description: APISchema<AlertDialog.DescriptionProps> = {
 	props: { asChild },
 	dataAttributes: [
 		{
-			name: "alert-dialog-description",
+			name: "b-alert-dialog-description",
 			description: "Present on the description."
 		}
 	]
@@ -129,7 +129,7 @@ const trigger: APISchema<AlertDialog.TriggerProps> = {
 	props: { asChild },
 	dataAttributes: [
 		{
-			name: "alert-dialog-trigger",
+			name: "b-alert-dialog-trigger",
 			description: "Present on the trigger."
 		}
 	]
@@ -146,7 +146,7 @@ const overlay: APISchema<AlertDialog.OverlayProps> = {
 			description: "The state of the alert dialog."
 		},
 		{
-			name: "alert-dialog-overlay",
+			name: "b-alert-dialog-overlay",
 			description: "Present on the overlay."
 		}
 	]
@@ -161,7 +161,7 @@ const portal: APISchema<AlertDialog.PortalProps> = {
 			description: "Present if the `portal` prop is not `null`."
 		},
 		{
-			name: "alert-dialog-portal",
+			name: "b-alert-dialog-portal",
 			description: "Present on the portal."
 		}
 	]
diff --git a/src/content/api-reference/avatar.ts b/src/content/api-reference/avatar.ts
index e1fe7ec6b..bcc24757f 100644
--- a/src/content/api-reference/avatar.ts
+++ b/src/content/api-reference/avatar.ts
@@ -32,7 +32,7 @@ export const root: APISchema<Avatar.Props> = {
 	},
 	dataAttributes: [
 		{
-			name: "avatar-root",
+			name: "b-avatar-root",
 			description: "Present on the root element."
 		}
 	]
@@ -46,7 +46,7 @@ export const image: APISchema<Avatar.ImageProps> = {
 	},
 	dataAttributes: [
 		{
-			name: "avatar-image",
+			name: "b-avatar-image",
 			description: "Present on the image element."
 		}
 	]
@@ -58,7 +58,7 @@ export const fallback: APISchema<Avatar.FallbackProps> = {
 	props: { asChild },
 	dataAttributes: [
 		{
-			name: "avatar-fallback",
+			name: "b-avatar-fallback",
 			description: "Present on the fallback element."
 		}
 	]
diff --git a/src/content/api-reference/button.ts b/src/content/api-reference/button.ts
index 21ca411fb..b77a801a2 100644
--- a/src/content/api-reference/button.ts
+++ b/src/content/api-reference/button.ts
@@ -19,7 +19,7 @@ export const root: APISchema<Button.Props & { href: string }> = {
 	},
 	dataAttributes: [
 		{
-			name: "button-root",
+			name: "b-button-root",
 			description: "Present on the button element."
 		}
 	]
diff --git a/src/content/api-reference/calendar.ts b/src/content/api-reference/calendar.ts
index 2ff23d3bf..822b41743 100644
--- a/src/content/api-reference/calendar.ts
+++ b/src/content/api-reference/calendar.ts
@@ -118,7 +118,7 @@ const root: APISchema<Calendar.Props> = {
 			description: "Present on the root element when the calendar is readonly."
 		},
 		{
-			name: "calendar-root",
+			name: "b-calendar-root",
 			description: "Present on the root element."
 		}
 	]
@@ -140,7 +140,7 @@ const cell: APISchema<Calendar.CellProps> = {
 			description: "Present on the element when the date is disabled."
 		},
 		{
-			name: "calendar-cell",
+			name: "b-calendar-cell",
 			description: "Present on the cell element."
 		}
 	]
@@ -197,7 +197,7 @@ const date: APISchema<Calendar.DateProps> = {
 			description: "Present on the element when the date is focused."
 		},
 		{
-			name: "calendar-date",
+			name: "b-calendar-date",
 			description: "Present on the date element."
 		}
 	]
@@ -211,7 +211,7 @@ const grid: APISchema<Calendar.GridProps> = {
 	},
 	dataAttributes: [
 		{
-			name: "calendar-grid",
+			name: "b-calendar-grid",
 			description: "Present on the grid element."
 		}
 	]
@@ -225,7 +225,7 @@ const gridBody: APISchema<Calendar.GridBodyProps> = {
 	},
 	dataAttributes: [
 		{
-			name: "calendar-grid-body",
+			name: "b-calendar-grid-body",
 			description: "Present on the grid body element."
 		}
 	]
@@ -239,7 +239,7 @@ const gridHead: APISchema<Calendar.GridHeadProps> = {
 	},
 	dataAttributes: [
 		{
-			name: "calendar-grid-head",
+			name: "b-calendar-grid-head",
 			description: "Present on the grid head element."
 		}
 	]
@@ -253,7 +253,7 @@ const gridRow: APISchema<Calendar.GridRowProps> = {
 	},
 	dataAttributes: [
 		{
-			name: "calendar-grid-row",
+			name: "b-calendar-grid-row",
 			description: "Present on the grid row element."
 		}
 	]
@@ -267,7 +267,7 @@ const headCell: APISchema<Calendar.HeadCellProps> = {
 	},
 	dataAttributes: [
 		{
-			name: "calendar-head-cell",
+			name: "b-calendar-head-cell",
 			description: "Present on the head cell element."
 		}
 	]
@@ -281,7 +281,7 @@ const header: APISchema<Calendar.HeaderProps> = {
 	},
 	dataAttributes: [
 		{
-			name: "calendar-header",
+			name: "b-calendar-header",
 			description: "Present on the header element."
 		}
 	]
@@ -295,7 +295,7 @@ const heading: APISchema<Calendar.HeadingProps> = {
 	},
 	dataAttributes: [
 		{
-			name: "calendar-heading",
+			name: "b-calendar-heading",
 			description: "Present on the heading element."
 		}
 	]
@@ -309,7 +309,7 @@ const nextButton: APISchema<Calendar.NextButtonProps> = {
 	},
 	dataAttributes: [
 		{
-			name: "calendar-next-button",
+			name: "b-calendar-next-button",
 			description: "Present on the next button element."
 		}
 	]
@@ -323,7 +323,7 @@ const prevButton: APISchema<Calendar.PrevButtonProps> = {
 	},
 	dataAttributes: [
 		{
-			name: "calendar-prev-button",
+			name: "b-calendar-prev-button",
 			description: "Present on the prev button element."
 		}
 	]
diff --git a/src/content/api-reference/checkbox.ts b/src/content/api-reference/checkbox.ts
index 3fd308790..b993ed1cb 100644
--- a/src/content/api-reference/checkbox.ts
+++ b/src/content/api-reference/checkbox.ts
@@ -56,7 +56,7 @@ export const root: APISchema<Checkbox.Props> = {
 			description: "The checkbox's state. Can be 'checked', 'unchecked', or 'indeterminate'."
 		},
 		{
-			name: "checkbox-root",
+			name: "b-checkbox-root",
 			description: "Present on the root element."
 		}
 	]
@@ -89,7 +89,7 @@ export const indicator: APISchema<Checkbox.IndicatorProps> = {
 	props: { asChild },
 	dataAttributes: [
 		{
-			name: "checkbox-indicator",
+			name: "b-checkbox-indicator",
 			description: "Present on the indicator element."
 		}
 	]
diff --git a/src/content/api-reference/collapsible.ts b/src/content/api-reference/collapsible.ts
index 429111270..ff6730fd5 100644
--- a/src/content/api-reference/collapsible.ts
+++ b/src/content/api-reference/collapsible.ts
@@ -40,7 +40,7 @@ export const root: APISchema<Collapsible.Props> = {
 			description: "The collapsible's open state."
 		},
 		{
-			name: "collapsible-root",
+			name: "b-collapsible-root",
 			description: "Present on the root element."
 		}
 	]
@@ -62,7 +62,7 @@ export const trigger: APISchema<Collapsible.TriggerProps> = {
 			description: "The collapsible's open state."
 		},
 		{
-			name: "collapsible-trigger",
+			name: "b-collapsible-trigger",
 			description: "Present on the trigger element."
 		}
 	]
@@ -89,7 +89,7 @@ export const content: APISchema<Collapsible.ContentProps> = {
 			description: "The collapsible's open state."
 		},
 		{
-			name: "collapsible-content",
+			name: "b-collapsible-content",
 			description: "Present on the content element."
 		}
 	]
diff --git a/src/content/api-reference/dialog.ts b/src/content/api-reference/dialog.ts
index 607e25046..49ff9e1b6 100644
--- a/src/content/api-reference/dialog.ts
+++ b/src/content/api-reference/dialog.ts
@@ -53,7 +53,7 @@ export const close: APISchema<Dialog.CloseProps> = {
 	props: { asChild },
 	dataAttributes: [
 		{
-			name: "dialog-close",
+			name: "b-dialog-close",
 			description: "Present on the close button."
 		}
 	]
@@ -70,7 +70,7 @@ export const content: APISchema<Dialog.ContentProps> = {
 			description: "The state of the dialog."
 		},
 		{
-			name: "dialog-content",
+			name: "b-dialog-content",
 			description: "Present on the content."
 		}
 	]
@@ -91,7 +91,7 @@ export const title: APISchema<Dialog.TitleProps> = {
 	},
 	dataAttributes: [
 		{
-			name: "dialog-title",
+			name: "b-dialog-title",
 			description: "Present on the title."
 		}
 	]
@@ -103,7 +103,7 @@ export const description: APISchema<Dialog.DescriptionProps> = {
 	props: { asChild },
 	dataAttributes: [
 		{
-			name: "dialog-description",
+			name: "b-dialog-description",
 			description: "Present on the description."
 		}
 	]
@@ -115,7 +115,7 @@ export const trigger: APISchema<Dialog.TriggerProps> = {
 	props: { asChild },
 	dataAttributes: [
 		{
-			name: "dialog-trigger",
+			name: "b-dialog-trigger",
 			description: "Present on the trigger."
 		}
 	]
@@ -132,7 +132,7 @@ export const overlay: APISchema<Dialog.OverlayProps> = {
 			description: "The state of the dialog."
 		},
 		{
-			name: "dialog-overlay",
+			name: "b-dialog-overlay",
 			description: "Present on the overlay."
 		}
 	]
@@ -148,7 +148,7 @@ export const portal: APISchema<Dialog.PortalProps> = {
 			description: "Present on the portal."
 		},
 		{
-			name: "dialog-portal",
+			name: "b-dialog-portal",
 			description: "Present on the portal."
 		}
 	]
diff --git a/src/content/api-reference/label.ts b/src/content/api-reference/label.ts
index e8f7be2d2..d9835697b 100644
--- a/src/content/api-reference/label.ts
+++ b/src/content/api-reference/label.ts
@@ -8,7 +8,7 @@ export const root: APISchema<Label.Props> = {
 	props: { asChild },
 	dataAttributes: [
 		{
-			name: "label-root",
+			name: "b-labelroot",
 			description: "Present on the root element."
 		}
 	]
diff --git a/src/content/api-reference/link-preview.ts b/src/content/api-reference/link-preview.ts
index e5c8e20e6..fe76e00aa 100644
--- a/src/content/api-reference/link-preview.ts
+++ b/src/content/api-reference/link-preview.ts
@@ -64,7 +64,7 @@ export const trigger: APISchema<LinkPreview.TriggerProps> = {
 			description: "The open state of the link preview."
 		},
 		{
-			name: "link-preview-trigger",
+			name: "b-link-preview-trigger",
 			description: "Present on the trigger element."
 		}
 	]
@@ -81,7 +81,7 @@ export const content: APISchema<LinkPreview.ContentProps> = {
 			description: "The open state of the link preview."
 		},
 		{
-			name: "link-preview-content",
+			name: "b-link-preview-content",
 			description: "Present on the content element."
 		}
 	]
@@ -98,7 +98,7 @@ export const arrow: APISchema<LinkPreview.ArrowProps> = {
 			description: "Present on the arrow element."
 		},
 		{
-			name: "link-preview-arrow",
+			name: "b-link-preview-arrow",
 			description: "Present on the arrow element."
 		}
 	]
diff --git a/src/content/api-reference/menu.ts b/src/content/api-reference/menu.ts
index de12ba5cc..ef69e4e21 100644
--- a/src/content/api-reference/menu.ts
+++ b/src/content/api-reference/menu.ts
@@ -206,7 +206,7 @@ type DataAttrs = APISchema["dataAttributes"];
 const triggerAttrs: DataAttrs = [
 	STATE,
 	{
-		name: "menu-trigger",
+		name: "b-menu-trigger",
 		description: "Present on the trigger element."
 	}
 ];
@@ -214,7 +214,7 @@ const triggerAttrs: DataAttrs = [
 const contentAttrs: DataAttrs = [
 	STATE,
 	{
-		name: "menu-content",
+		name: "b-menu-content",
 		description: "Present on the content element."
 	}
 ];
@@ -222,7 +222,7 @@ const contentAttrs: DataAttrs = [
 const arrowAttrs: DataAttrs = [
 	STATE,
 	{
-		name: "menu-arrow",
+		name: "b-menu-arrow",
 		description: "Present on the arrow element."
 	}
 ];
@@ -245,21 +245,21 @@ const sharedItemAttrs: DataAttrs = [
 const itemAttrs: DataAttrs = [
 	...sharedItemAttrs,
 	{
-		name: "menu-item",
+		name: "b-menu-item",
 		description: "Present on the item element."
 	}
 ];
 
 const groupAttrs: DataAttrs = [
 	{
-		name: "menu-group",
+		name: "b-menu-group",
 		description: "Present on the group element."
 	}
 ];
 
 const labelAttrs: DataAttrs = [
 	{
-		name: "menu-label",
+		name: "b-menu-label",
 		description: "Present on the group label element."
 	}
 ];
@@ -275,7 +275,7 @@ const checkboxItemAttrs: DataAttrs = [
 
 const radioGroupAttrs: DataAttrs = [
 	{
-		name: "menu-radio-group",
+		name: "b-menu-radio-group",
 		description: "Present on the radio group element."
 	}
 ];
@@ -292,7 +292,7 @@ const radioItemAttrs: DataAttrs = [
 		description: "The value of the radio item."
 	},
 	{
-		name: "menu-radio-item",
+		name: "b-menu-radio-item",
 		description: "Present on the radio item element."
 	}
 ];
@@ -304,7 +304,7 @@ const separatorAttrs: DataAttrs = [
 		description: "The orientation of the separator."
 	},
 	{
-		name: "menu-separator",
+		name: "b-menu-separator",
 		description: "Present on the separator element."
 	}
 ];
@@ -312,7 +312,7 @@ const separatorAttrs: DataAttrs = [
 const subContentAttrs: DataAttrs = [
 	STATE,
 	{
-		name: "menu-sub-content",
+		name: "b-menu-sub-content",
 		description: "Present on the submenu content element."
 	}
 ];
@@ -321,21 +321,21 @@ const subTriggerAttrs: DataAttrs = [
 	...sharedItemAttrs,
 	STATE,
 	{
-		name: "menu-sub-trigger",
+		name: "b-menu-sub-trigger",
 		description: "Present on the submenu trigger element."
 	}
 ];
 
 const checkboxIndicatorAttrs: DataAttrs = [
 	{
-		name: "menu-checkbox-indicator",
+		name: "b-menu-checkbox-indicator",
 		description: "Present on the checkbox indicator element."
 	}
 ];
 
 const radioIndicatorAttrs: DataAttrs = [
 	{
-		name: "menu-radio-indicator",
+		name: "b-menu-radio-indicator",
 		description: "Present on the radio indicator element."
 	}
 ];
diff --git a/src/content/api-reference/popover.ts b/src/content/api-reference/popover.ts
index 9cac7dc36..6166c743a 100644
--- a/src/content/api-reference/popover.ts
+++ b/src/content/api-reference/popover.ts
@@ -71,7 +71,7 @@ export const trigger: APISchema<Popover.TriggerProps> = {
 			description: "The open state of the link preview."
 		},
 		{
-			name: "popover-trigger",
+			name: "b-popover-trigger",
 			description: "Present on the trigger element."
 		}
 	]
@@ -88,7 +88,7 @@ export const content: APISchema<Popover.ContentProps> = {
 			description: "The open state of the popover."
 		},
 		{
-			name: "popover-content",
+			name: "b-popover-content",
 			description: "Present on the content element."
 		}
 	]
@@ -101,7 +101,7 @@ export const close: APISchema<Popover.CloseProps> = {
 	props: { asChild },
 	dataAttributes: [
 		{
-			name: "popover-close",
+			name: "b-popover-close",
 			description: "Present on the close button."
 		}
 	]
@@ -118,7 +118,7 @@ export const arrow: APISchema<Popover.ArrowProps> = {
 			description: "Present on the arrow element."
 		},
 		{
-			name: "popover-arrow",
+			name: "b-popover-arrow",
 			description: "Present on the arrow element."
 		}
 	]
diff --git a/src/content/api-reference/progress.ts b/src/content/api-reference/progress.ts
index df344d698..93246ba6e 100644
--- a/src/content/api-reference/progress.ts
+++ b/src/content/api-reference/progress.ts
@@ -42,7 +42,7 @@ export const root: APISchema<Progress.Props> = {
 			description: "The maximum value of the progress bar."
 		},
 		{
-			name: "progress-root",
+			name: "b-progress-root",
 			description: "Present on the root element."
 		}
 	]
diff --git a/src/content/api-reference/radio-group.ts b/src/content/api-reference/radio-group.ts
index f91c74d4a..139b9fdf5 100644
--- a/src/content/api-reference/radio-group.ts
+++ b/src/content/api-reference/radio-group.ts
@@ -54,7 +54,7 @@ export const root: APISchema<RadioGroup.Props> = {
 			description: "The orientation of the radio group."
 		},
 		{
-			name: "radio-group-root",
+			name: "b-radio-group-root",
 			description: "Present on the root element."
 		}
 	]
@@ -97,7 +97,7 @@ export const item: APISchema<RadioGroup.ItemProps> = {
 			description: "The orientation of the parent radio group."
 		},
 		{
-			name: "radio-group-item",
+			name: "b-radio-group-item",
 			description: "Present on the radio item element."
 		}
 	]
@@ -116,7 +116,7 @@ export const indicator: APISchema = {
 		"A component which is used to indicate the radio item's checked state. Any children of this component will only be visible when the radio item is checked.",
 	dataAttributes: [
 		{
-			name: "radio-group-indicator",
+			name: "b-radio-group-indicator",
 			description: "Present on the indicator element."
 		}
 	]
diff --git a/src/content/api-reference/range-calendar.ts b/src/content/api-reference/range-calendar.ts
index 1ab1b88aa..65492aa24 100644
--- a/src/content/api-reference/range-calendar.ts
+++ b/src/content/api-reference/range-calendar.ts
@@ -116,7 +116,7 @@ const root: APISchema<RangeCalendar.Props> = {
 			description: "Present on the root element when the calendar is readonly."
 		},
 		{
-			name: "calendar-root",
+			name: "b-calendar-root",
 			description: "Present on the root element."
 		}
 	]
@@ -138,7 +138,7 @@ const cell: APISchema<RangeCalendar.CellProps> = {
 			description: "Present on the element when the date is disabled."
 		},
 		{
-			name: "calendar-cell",
+			name: "b-calendar-cell",
 			description: "Present on the cell element."
 		}
 	]
@@ -208,7 +208,7 @@ const date: APISchema<RangeCalendar.DateProps> = {
 			description: "Present on the element when the date is focused."
 		},
 		{
-			name: "calendar-date",
+			name: "b-calendar-date",
 			description: "Present on the date element."
 		}
 	]
@@ -222,7 +222,7 @@ const grid: APISchema<RangeCalendar.GridProps> = {
 	},
 	dataAttributes: [
 		{
-			name: "calendar-grid",
+			name: "b-calendar-grid",
 			description: "Present on the grid element."
 		}
 	]
@@ -236,7 +236,7 @@ const gridBody: APISchema<RangeCalendar.GridBodyProps> = {
 	},
 	dataAttributes: [
 		{
-			name: "calendar-grid-body",
+			name: "b-calendar-grid-body",
 			description: "Present on the grid body element."
 		}
 	]
@@ -250,7 +250,7 @@ const gridHead: APISchema<RangeCalendar.GridHeadProps> = {
 	},
 	dataAttributes: [
 		{
-			name: "calendar-grid-head",
+			name: "b-calendar-grid-head",
 			description: "Present on the grid head element."
 		}
 	]
@@ -264,7 +264,7 @@ const gridRow: APISchema<RangeCalendar.GridRowProps> = {
 	},
 	dataAttributes: [
 		{
-			name: "calendar-grid-row",
+			name: "b-calendar-grid-row",
 			description: "Present on the grid row element."
 		}
 	]
@@ -278,7 +278,7 @@ const headCell: APISchema<RangeCalendar.HeadCellProps> = {
 	},
 	dataAttributes: [
 		{
-			name: "calendar-head-cell",
+			name: "b-calendar-head-cell",
 			description: "Present on the head cell element."
 		}
 	]
@@ -292,7 +292,7 @@ const header: APISchema<RangeCalendar.HeaderProps> = {
 	},
 	dataAttributes: [
 		{
-			name: "calendar-header",
+			name: "b-calendar-header",
 			description: "Present on the header element."
 		}
 	]
@@ -306,7 +306,7 @@ const heading: APISchema<RangeCalendar.HeadingProps> = {
 	},
 	dataAttributes: [
 		{
-			name: "calendar-heading",
+			name: "b-calendar-heading",
 			description: "Present on the heading element."
 		}
 	]
@@ -320,7 +320,7 @@ const nextButton: APISchema<RangeCalendar.NextButtonProps> = {
 	},
 	dataAttributes: [
 		{
-			name: "calendar-next-button",
+			name: "b-calendar-next-button",
 			description: "Present on the next button element."
 		}
 	]
@@ -334,7 +334,7 @@ const prevButton: APISchema<RangeCalendar.PrevButtonProps> = {
 	},
 	dataAttributes: [
 		{
-			name: "calendar-prev-button",
+			name: "b-calendar-prev-button",
 			description: "Present on the prev button element."
 		}
 	]
diff --git a/src/content/api-reference/select.ts b/src/content/api-reference/select.ts
index 2edf4f9c3..2252edbb0 100644
--- a/src/content/api-reference/select.ts
+++ b/src/content/api-reference/select.ts
@@ -118,7 +118,7 @@ export const trigger: APISchema<Select.TriggerProps> = {
 			description: "Present when the trigger is disabled."
 		},
 		{
-			name: "select-trigger",
+			name: "b-select-trigger",
 			description: "Present on the trigger element."
 		}
 	]
@@ -130,7 +130,7 @@ export const content: APISchema<Select.ContentProps> = {
 	props: { ...transitionProps, ...floatingPositioning, asChild },
 	dataAttributes: [
 		{
-			name: "select-content",
+			name: "b-select-content",
 			description: "Present on the content element."
 		}
 	]
@@ -167,7 +167,7 @@ export const item: APISchema<Select.ItemProps> = {
 			description: "Present when the item is disabled."
 		},
 		{
-			name: "select-item",
+			name: "b-select-item",
 			description: "Present on the item element."
 		}
 	]
@@ -186,7 +186,7 @@ export const value: APISchema = {
 	},
 	dataAttributes: [
 		{
-			name: "select-value",
+			name: "b-select-value",
 			description: "Present on the value element."
 		}
 	]
@@ -205,7 +205,7 @@ export const group: APISchema<Select.GroupProps> = {
 	props: { asChild },
 	dataAttributes: [
 		{
-			name: "select-group",
+			name: "b-select-group",
 			description: "Present on the group element."
 		}
 	]
@@ -218,7 +218,7 @@ export const label: APISchema<Select.LabelProps> = {
 	props: { asChild },
 	dataAttributes: [
 		{
-			name: "select-label",
+			name: "b-select-label",
 			description: "Present on the label element."
 		}
 	]
@@ -232,7 +232,7 @@ export const separator: APISchema<Select.SeparatorProps> = {
 	},
 	dataAttributes: [
 		{
-			name: "select-separator",
+			name: "b-select-separator",
 			description: "Present on the separator element."
 		}
 	]
@@ -246,7 +246,7 @@ export const indicator: APISchema<Select.IndicatorProps> = {
 	},
 	dataAttributes: [
 		{
-			name: "select-indicator",
+			name: "b-select-indicator",
 			description: "Present on the indicator element."
 		}
 	]
diff --git a/src/content/api-reference/separator.ts b/src/content/api-reference/separator.ts
index 7a061be3a..4e0d6a70f 100644
--- a/src/content/api-reference/separator.ts
+++ b/src/content/api-reference/separator.ts
@@ -30,7 +30,7 @@ export const root: APISchema<Separator.Props> = {
 			description: "The orientation of the separator."
 		},
 		{
-			name: "separator-root",
+			name: "b-separator-root",
 			description: "Present on the root element."
 		}
 	]
diff --git a/src/content/api-reference/slider.ts b/src/content/api-reference/slider.ts
index 04b4998e1..f6f3f6ea7 100644
--- a/src/content/api-reference/slider.ts
+++ b/src/content/api-reference/slider.ts
@@ -56,7 +56,7 @@ const root: APISchema<Slider.Props> = {
 			description: "The orientation of the slider."
 		},
 		{
-			name: "slider-root",
+			name: "b-slider-root",
 			description: "Present on the root element."
 		}
 	]
@@ -70,7 +70,7 @@ const thumb: APISchema<Slider.ThumbProps> = {
 	},
 	dataAttributes: [
 		{
-			name: "slider-thumb",
+			name: "b-slider-thumb",
 			description: "Present on the thumb elements."
 		}
 	]
@@ -84,7 +84,7 @@ const range: APISchema<Slider.RangeProps> = {
 	},
 	dataAttributes: [
 		{
-			name: "slider-range",
+			name: "b-slider-range",
 			description: "Present on the range elements."
 		}
 	]
@@ -102,7 +102,7 @@ const tick: APISchema<Slider.TickProps> = {
 			description: "Present when the tick is bounded."
 		},
 		{
-			name: "slider-tick",
+			name: "b-slider-tick",
 			description: "Present on the tick elements."
 		}
 	]
diff --git a/src/content/api-reference/switch.ts b/src/content/api-reference/switch.ts
index bb3832673..08092eab6 100644
--- a/src/content/api-reference/switch.ts
+++ b/src/content/api-reference/switch.ts
@@ -66,7 +66,7 @@ const root: APISchema<Switch.Props> = {
 			description: "Present when the switch is disabled."
 		},
 		{
-			name: "switch-root",
+			name: "b-switch-root",
 			description: "Present on the root element."
 		}
 	]
@@ -89,7 +89,7 @@ const thumb: APISchema<Switch.ThumbProps> = {
 			description: "Present when the switch is checked."
 		},
 		{
-			name: "switch-thumb",
+			name: "b-switch-thumb",
 			description: "Present on the thumb element."
 		}
 	]
diff --git a/src/content/api-reference/tabs.ts b/src/content/api-reference/tabs.ts
index d9edf1ec9..dfcb03c94 100644
--- a/src/content/api-reference/tabs.ts
+++ b/src/content/api-reference/tabs.ts
@@ -53,7 +53,7 @@ const root: APISchema<Tabs.Props> = {
 			description: "The orientation of the tabs."
 		},
 		{
-			name: "tabs-root",
+			name: "b-tabs-root",
 			description: "Present on the root element."
 		}
 	]
@@ -72,7 +72,7 @@ const list: APISchema<Tabs.ListProps> = {
 			description: "The orientation of the tabs."
 		},
 		{
-			name: "tabs-list",
+			name: "b-tabs-list",
 			description: "Present on the list element."
 		}
 	]
@@ -114,7 +114,7 @@ const trigger: APISchema<Tabs.TriggerProps> = {
 			description: "Present when the tab trigger is disabled."
 		},
 		{
-			name: "tabs-trigger",
+			name: "b-tabs-trigger",
 			description: "Present on the trigger elements."
 		}
 	]
@@ -133,7 +133,7 @@ const content: APISchema<Tabs.ContentProps> = {
 	},
 	dataAttributes: [
 		{
-			name: "tabs-content",
+			name: "b-tabs-content",
 			description: "Present on the content elements."
 		}
 	]
diff --git a/src/content/api-reference/toggle-group.ts b/src/content/api-reference/toggle-group.ts
index 886be1984..461c999a5 100644
--- a/src/content/api-reference/toggle-group.ts
+++ b/src/content/api-reference/toggle-group.ts
@@ -54,7 +54,7 @@ const root: APISchema<ToggleGroup.Props<"multiple">> = {
 			description: "The orientation of the toggle group."
 		},
 		{
-			name: "toggle-group-root",
+			name: "b-b-toggle-group-root",
 			description: "Present on the root element."
 		}
 	]
@@ -94,7 +94,7 @@ const item: APISchema<ToggleGroup.ItemProps> = {
 			description: "Present when the toggle item is disabled."
 		},
 		{
-			name: "toggle-group-item",
+			name: "b-b-toggle-group-item",
 			description: "Present on the item elements."
 		}
 	]
diff --git a/src/content/api-reference/toggle.ts b/src/content/api-reference/toggle.ts
index f909a6840..9032bc1a1 100644
--- a/src/content/api-reference/toggle.ts
+++ b/src/content/api-reference/toggle.ts
@@ -37,7 +37,7 @@ const root: APISchema<Toggle.Props> = {
 			description: "Present when the toggle is disabled."
 		},
 		{
-			name: "toggle-root",
+			name: "b-toggle-root",
 			description: "Present on the root element."
 		}
 	]
diff --git a/src/content/api-reference/tooltip.ts b/src/content/api-reference/tooltip.ts
index ffe23daed..1542df460 100644
--- a/src/content/api-reference/tooltip.ts
+++ b/src/content/api-reference/tooltip.ts
@@ -74,7 +74,7 @@ export const trigger: APISchema<Tooltip.TriggerProps> = {
 			description: "The open state of the tooltip."
 		},
 		{
-			name: "tooltip-trigger",
+			name: "b-tooltip-trigger",
 			description: "Present on the trigger element."
 		}
 	]
@@ -86,7 +86,7 @@ export const content: APISchema<Tooltip.ContentProps> = {
 	props: { ...transitionProps, ...floatingPositioning, asChild },
 	dataAttributes: [
 		{
-			name: "tooltip-content",
+			name: "b-tooltip-content",
 			description: "Present on the content element."
 		}
 	]
@@ -103,7 +103,7 @@ export const arrow: APISchema<Tooltip.ArrowProps> = {
 			description: "Present on the arrow element."
 		},
 		{
-			name: "tooltip-arrow",
+			name: "b-tooltip-arrow",
 			description: "Present on the arrow element."
 		}
 	]
diff --git a/src/lib/bits/button/components/button.svelte b/src/lib/bits/button/components/button.svelte
index 230aa21a0..051d97ab6 100644
--- a/src/lib/bits/button/components/button.svelte
+++ b/src/lib/bits/button/components/button.svelte
@@ -8,7 +8,7 @@
 	export let type: $$Props["type"] = undefined;
 	export let builders: $$Props["builders"] = [];
 	const attrs = {
-		"data-button-root": ""
+		"data-b-button-root": ""
 	};
 </script>
 
diff --git a/src/lib/bits/calendar/components/calendar-grid.svelte b/src/lib/bits/calendar/components/calendar-grid.svelte
index 3c7b3f15f..4a27b674f 100644
--- a/src/lib/bits/calendar/components/calendar-grid.svelte
+++ b/src/lib/bits/calendar/components/calendar-grid.svelte
@@ -12,6 +12,7 @@
 	} = getCtx();
 
 	$: builder = $grid;
+
 	const attrs = getAttrs("grid");
 
 	$: slotProps = {
diff --git a/src/lib/bits/date-picker/index.ts b/src/lib/bits/date-picker/index.ts
index 2e7353eed..3206abdcb 100644
--- a/src/lib/bits/date-picker/index.ts
+++ b/src/lib/bits/date-picker/index.ts
@@ -1 +1,23 @@
+export { default as Arrow } from "./components/date-picker-arrow.svelte";
+export { default as CalendarCell } from "./components/date-picker-calendar-cell.svelte";
+export { default as CalendarDate } from "./components/date-picker-calendar-date.svelte";
+export { default as CalendarGridBody } from "./components/date-picker-calendar-grid-body.svelte";
+export { default as CalendarGridHead } from "./components/date-picker-calendar-grid-head.svelte";
+export { default as CalendarGridRow } from "./components/date-picker-calendar-grid-row.svelte";
+export { default as CalendarGrid } from "./components/date-picker-calendar-grid.svelte";
+export { default as CalendarHeadCell } from "./components/date-picker-calendar-head-cell.svelte";
+export { default as CalendarHeader } from "./components/date-picker-calendar-header.svelte";
+export { default as CalendarHeading } from "./components/date-picker-calendar-heading.svelte";
+export { default as CalendarNextButton } from "./components/date-picker-calendar-next-button.svelte";
+export { default as CalendarPrevButton } from "./components/date-picker-calendar-prev-button.svelte";
+export { default as Calendar } from "./components/date-picker-calendar.svelte";
+export { default as Close } from "./components/date-picker-close.svelte";
+export { default as Content } from "./components/date-picker-content.svelte";
+export { default as Field } from "./components/date-picker-field.svelte";
+export { default as Input } from "./components/date-picker-input.svelte";
+export { default as Label } from "./components/date-picker-label.svelte";
+export { default as Segment } from "./components/date-picker-segment.svelte";
+export { default as Trigger } from "./components/date-picker-trigger.svelte";
+export { default as Root } from "./components/date-picker.svelte";
+
 export type * from "./types.js";
diff --git a/src/lib/bits/index.ts b/src/lib/bits/index.ts
index 03bb9830c..2ffd7a2eb 100644
--- a/src/lib/bits/index.ts
+++ b/src/lib/bits/index.ts
@@ -9,6 +9,7 @@ export * as Collapsible from "./collapsible/index.js";
 export * as ContextMenu from "./context-menu/index.js";
 export * as DateField from "./date-field/index.js";
 export * as DateRangeField from "./date-range-field/index.js";
+export * as DatePicker from "./date-picker/index.js";
 export * as Dialog from "./dialog/index.js";
 export * as DropdownMenu from "./dropdown-menu/index.js";
 export * as LinkPreview from "./link-preview/index.js";
diff --git a/src/lib/internal/attrs.ts b/src/lib/internal/attrs.ts
index 97dc3f660..a9e88f308 100644
--- a/src/lib/internal/attrs.ts
+++ b/src/lib/internal/attrs.ts
@@ -4,7 +4,7 @@ export function createBitAttrs<T extends readonly string[]>(bit: Bit | "menu", p
 	const attrs: Record<string, Record<string, string>> = {};
 	parts.forEach((part) => {
 		attrs[part] = {
-			[`data-${bit}-${part}`]: ""
+			[`data-b-${bit}-${part}`]: ""
 		};
 	});
 
diff --git a/src/tests/accordion/Accordion.spec.ts b/src/tests/accordion/Accordion.spec.ts
index 72f0d276f..c83a9adee 100644
--- a/src/tests/accordion/Accordion.spec.ts
+++ b/src/tests/accordion/Accordion.spec.ts
@@ -58,11 +58,11 @@ describe("Accordion", () => {
 		const item = getByTestId("item");
 		const header = getByTestId("header");
 		const content = getByTestId("content");
-		expect(root).toHaveAttribute("data-accordion-root");
-		expect(item).toHaveAttribute("data-accordion-item");
-		expect(header).toHaveAttribute("data-accordion-header");
-		expect(content).toHaveAttribute("data-accordion-content");
-		expect(trigger).toHaveAttribute("data-accordion-trigger");
+		expect(root).toHaveAttribute("data-b-accordion-root");
+		expect(item).toHaveAttribute("data-b-accordion-item");
+		expect(header).toHaveAttribute("data-b-accordion-header");
+		expect(content).toHaveAttribute("data-b-accordion-content");
+		expect(trigger).toHaveAttribute("data-b-accordion-trigger");
 	});
 
 	it("has expected data attributes", async () => {
@@ -119,7 +119,7 @@ describe("Accordion", () => {
 			expect(itemEl).toHaveAttribute("data-state", "open");
 		}
 		const openItems = Array.from(
-			document.querySelectorAll("[data-state='open'][data-accordion-item]")
+			document.querySelectorAll("[data-state='open'][data-b-accordion-item]")
 		);
 		expect(openItems.length).toBe(1);
 	});
@@ -141,7 +141,7 @@ describe("Accordion", () => {
 			expect(itemEl).toHaveAttribute("data-state", "open");
 		}
 		const openItems = Array.from(
-			document.querySelectorAll("[data-state='open'][data-accordion-item]")
+			document.querySelectorAll("[data-state='open'][data-b-accordion-item]")
 		);
 		expect(openItems.length).toBe(4);
 	});
diff --git a/src/tests/alert-dialog/AlertDialog.spec.ts b/src/tests/alert-dialog/AlertDialog.spec.ts
index ed4d1c6d0..742fab0b5 100644
--- a/src/tests/alert-dialog/AlertDialog.spec.ts
+++ b/src/tests/alert-dialog/AlertDialog.spec.ts
@@ -56,7 +56,7 @@ describe("Alert Dialog", () => {
 
 		for (const part of parts) {
 			const el = getByTestId(part);
-			expect(el).toHaveAttribute(`data-alert-dialog-${part}`);
+			expect(el).toHaveAttribute(`data-b-alert-dialog-${part}`);
 		}
 	});
 
diff --git a/src/tests/checkbox/Checkbox.spec.ts b/src/tests/checkbox/Checkbox.spec.ts
index 85a6d1ad8..a8f9f1aa2 100644
--- a/src/tests/checkbox/Checkbox.spec.ts
+++ b/src/tests/checkbox/Checkbox.spec.ts
@@ -29,8 +29,8 @@ describe("Checkbox", () => {
 	it("has bits data attrs", async () => {
 		const { getByTestId, root } = setup();
 		const indicator = getByTestId("indicator");
-		expect(root).toHaveAttribute("data-checkbox-root");
-		expect(indicator).toHaveAttribute("data-checkbox-indicator");
+		expect(root).toHaveAttribute("data-b-checkbox-root");
+		expect(indicator).toHaveAttribute("data-b-checkbox-indicator");
 	});
 
 	it('defaults the value to "on", when no value prop is passed', async () => {
diff --git a/src/tests/collapsible/Collapsible.spec.ts b/src/tests/collapsible/Collapsible.spec.ts
index a39b660d8..0ed2d2b81 100644
--- a/src/tests/collapsible/Collapsible.spec.ts
+++ b/src/tests/collapsible/Collapsible.spec.ts
@@ -15,9 +15,9 @@ describe("Collapsible", () => {
 		const root = getByTestId("root");
 		const trigger = getByTestId("trigger");
 		const content = getByTestId("content");
-		expect(root).toHaveAttribute("data-collapsible-root");
-		expect(trigger).toHaveAttribute("data-collapsible-trigger");
-		expect(content).toHaveAttribute("data-collapsible-content");
+		expect(root).toHaveAttribute("data-b-collapsible-root");
+		expect(trigger).toHaveAttribute("data-b-collapsible-trigger");
+		expect(content).toHaveAttribute("data-b-collapsible-content");
 	});
 
 	it("doesnt render content when `open` is false", async () => {
diff --git a/src/tests/context-menu/ContextMenu.spec.ts b/src/tests/context-menu/ContextMenu.spec.ts
index be20f1e2f..3fdcb2a58 100644
--- a/src/tests/context-menu/ContextMenu.spec.ts
+++ b/src/tests/context-menu/ContextMenu.spec.ts
@@ -76,13 +76,13 @@ describe("Context Menu", () => {
 
 		for (const part of parts) {
 			const el = screen.getByTestId(part);
-			expect(el).toHaveAttribute(`data-menu-${part}`);
+			expect(el).toHaveAttribute(`data-b-menu-${part}`);
 		}
 
 		await user.click(getByTestId("sub-trigger"));
 
 		const subContent = getByTestId("sub-content");
-		expect(subContent).toHaveAttribute(`data-menu-sub-content`);
+		expect(subContent).toHaveAttribute(`data-b-menu-sub-content`);
 	});
 
 	it("Opens when right-clicked & respects binding", async () => {
diff --git a/src/tests/dialog/Dialog.spec.ts b/src/tests/dialog/Dialog.spec.ts
index f777c7def..c4bd771af 100644
--- a/src/tests/dialog/Dialog.spec.ts
+++ b/src/tests/dialog/Dialog.spec.ts
@@ -54,7 +54,7 @@ describe("Dialog", () => {
 
 		for (const part of parts) {
 			const el = getByTestId(part);
-			expect(el).toHaveAttribute(`data-dialog-${part}`);
+			expect(el).toHaveAttribute(`data-b-dialog-${part}`);
 		}
 	});
 
diff --git a/src/tests/dropdown-menu/DropdownMenu.spec.ts b/src/tests/dropdown-menu/DropdownMenu.spec.ts
index 6c8f9aa38..c818834f2 100644
--- a/src/tests/dropdown-menu/DropdownMenu.spec.ts
+++ b/src/tests/dropdown-menu/DropdownMenu.spec.ts
@@ -87,13 +87,13 @@ describe("Dropdown Menu", () => {
 
 		for (const part of parts) {
 			const el = screen.getByTestId(part);
-			expect(el).toHaveAttribute(`data-menu-${part}`);
+			expect(el).toHaveAttribute(`data-b-menu-${part}`);
 		}
 
 		await user.click(getByTestId("sub-trigger"));
 
 		const subContent = getByTestId("sub-content");
-		expect(subContent).toHaveAttribute(`data-menu-sub-content`);
+		expect(subContent).toHaveAttribute(`data-b-menu-sub-content`);
 	});
 
 	it.each(OPEN_KEYS)("Opens when %s is pressed & respects binding", async (key) => {
diff --git a/src/tests/label/Label.spec.ts b/src/tests/label/Label.spec.ts
index 3d090e147..bdd2314b3 100644
--- a/src/tests/label/Label.spec.ts
+++ b/src/tests/label/Label.spec.ts
@@ -13,7 +13,7 @@ describe("Label", () => {
 	it("has bits data attrs", async () => {
 		const { getByTestId } = render(LabelTest);
 		const root = getByTestId("label");
-		expect(root).toHaveAttribute("data-label-root");
+		expect(root).toHaveAttribute("data-b-label-root");
 	});
 
 	it("renders the label text", async () => {
diff --git a/src/tests/link-preview/LinkPreview.spec.ts b/src/tests/link-preview/LinkPreview.spec.ts
index a21481313..ffec9f4cd 100644
--- a/src/tests/link-preview/LinkPreview.spec.ts
+++ b/src/tests/link-preview/LinkPreview.spec.ts
@@ -34,7 +34,7 @@ describe("Link Preview", () => {
 
 		for (const part of parts) {
 			const el = getByTestId(part);
-			expect(el).toHaveAttribute(`data-link-preview-${part}`);
+			expect(el).toHaveAttribute(`data-b-link-preview-${part}`);
 		}
 	});
 
diff --git a/src/tests/menubar/Menubar.spec.ts b/src/tests/menubar/Menubar.spec.ts
index 1e9097390..42ec86385 100644
--- a/src/tests/menubar/Menubar.spec.ts
+++ b/src/tests/menubar/Menubar.spec.ts
@@ -29,7 +29,7 @@ describe("Menubar", () => {
 		await user.click(trigger);
 
 		const root = getByTestId("root");
-		expect(root).toHaveAttribute("data-menubar-root");
+		expect(root).toHaveAttribute("data-b-menubar-root");
 
 		const parts = [
 			"content",
@@ -48,13 +48,13 @@ describe("Menubar", () => {
 
 		for (const part in parts) {
 			const el = screen.getByTestId(mappedParts[part]);
-			expect(el).toHaveAttribute(`data-menu-${parts[part]}`);
+			expect(el).toHaveAttribute(`data-b-menu-${parts[part]}`);
 		}
 
 		await user.click(getByTestId("1-sub-trigger"));
 
 		const subContent = getByTestId("1-sub-content");
-		expect(subContent).toHaveAttribute(`data-menu-sub-content`);
+		expect(subContent).toHaveAttribute(`data-b-menu-sub-content`);
 	});
 
 	it("navigates triggers within the menubar using arrow keys", async () => {
diff --git a/src/tests/popover/Popover.spec.ts b/src/tests/popover/Popover.spec.ts
index e73b85b3d..14b17f019 100644
--- a/src/tests/popover/Popover.spec.ts
+++ b/src/tests/popover/Popover.spec.ts
@@ -40,7 +40,7 @@ describe("Popover", () => {
 
 		for (const part of parts) {
 			const el = getByTestId(part);
-			expect(el).toHaveAttribute(`data-popover-${part}`);
+			expect(el).toHaveAttribute(`data-b-popover-${part}`);
 		}
 	});
 
diff --git a/src/tests/progress/Progress.spec.ts b/src/tests/progress/Progress.spec.ts
index 8c5e2c937..a1bb41597 100644
--- a/src/tests/progress/Progress.spec.ts
+++ b/src/tests/progress/Progress.spec.ts
@@ -21,7 +21,7 @@ describe("Progress", () => {
 
 	it("has bits data attrs", async () => {
 		const { root } = setup();
-		expect(root).toHaveAttribute("data-progress-root");
+		expect(root).toHaveAttribute("data-b-progress-root");
 	});
 
 	it("respects the value prop", async () => {
diff --git a/src/tests/radio-group/RadioGroup.spec.ts b/src/tests/radio-group/RadioGroup.spec.ts
index 23939da4b..195571a2f 100644
--- a/src/tests/radio-group/RadioGroup.spec.ts
+++ b/src/tests/radio-group/RadioGroup.spec.ts
@@ -56,8 +56,8 @@ describe("Radio Group", () => {
 		const root = getByTestId("root");
 		const item = getByTestId(testItems[0].value + "-item");
 
-		expect(root).toHaveAttribute("data-radio-group-root");
-		expect(item).toHaveAttribute("data-radio-group-item");
+		expect(root).toHaveAttribute("data-b-radio-group-root");
+		expect(item).toHaveAttribute("data-b-radio-group-item");
 	});
 
 	it("changes the value when an item is clicked", async () => {
diff --git a/src/tests/select/Select.spec.ts b/src/tests/select/Select.spec.ts
index 34912ee40..f249bd940 100644
--- a/src/tests/select/Select.spec.ts
+++ b/src/tests/select/Select.spec.ts
@@ -67,11 +67,11 @@ describe("Select", () => {
 
 		parts.forEach((part) => {
 			const el = getByTestId(part);
-			expect(el).toHaveAttribute(`data-select-${part}`);
+			expect(el).toHaveAttribute(`data-b-select-${part}`);
 		});
 
 		const item = getByTestId("1");
-		expect(item).toHaveAttribute("data-select-item");
+		expect(item).toHaveAttribute("data-b-select-item");
 		1;
 	});
 
diff --git a/src/tests/separator/Separator.spec.ts b/src/tests/separator/Separator.spec.ts
index d5e1d080e..060755f8a 100644
--- a/src/tests/separator/Separator.spec.ts
+++ b/src/tests/separator/Separator.spec.ts
@@ -21,6 +21,6 @@ describe("Separator", () => {
 
 	it("has bits data attrs", async () => {
 		const { root } = setup();
-		expect(root).toHaveAttribute("data-separator-root");
+		expect(root).toHaveAttribute("data-b-separator-root");
 	});
 });
diff --git a/src/tests/switch/Switch.spec.ts b/src/tests/switch/Switch.spec.ts
index fb6ebc23d..6ade66a61 100644
--- a/src/tests/switch/Switch.spec.ts
+++ b/src/tests/switch/Switch.spec.ts
@@ -27,8 +27,8 @@ describe("Switch", () => {
 
 	it("has bits data attrs", async () => {
 		const { root, thumb } = setup();
-		expect(root).toHaveAttribute("data-switch-root");
-		expect(thumb).toHaveAttribute("data-switch-thumb");
+		expect(root).toHaveAttribute("data-b-switch-root");
+		expect(thumb).toHaveAttribute("data-b-switch-thumb");
 	});
 
 	it('defaults the value to "on", when no value prop is passed', async () => {
diff --git a/src/tests/tabs/Tabs.spec.ts b/src/tests/tabs/Tabs.spec.ts
index d375581a1..37ad09b60 100644
--- a/src/tests/tabs/Tabs.spec.ts
+++ b/src/tests/tabs/Tabs.spec.ts
@@ -58,10 +58,10 @@ describe("Tabs", () => {
 		const trigger = getByTestId("trigger-1");
 		const content = getByTestId("content-1");
 
-		expect(root).toHaveAttribute("data-tabs-root");
-		expect(list).toHaveAttribute("data-tabs-list");
-		expect(trigger).toHaveAttribute("data-tabs-trigger");
-		expect(content).toHaveAttribute("data-tabs-content");
+		expect(root).toHaveAttribute("data-b-tabs-root");
+		expect(list).toHaveAttribute("data-b-tabs-list");
+		expect(trigger).toHaveAttribute("data-b-tabs-trigger");
+		expect(content).toHaveAttribute("data-b-tabs-content");
 	});
 
 	it("switches tabs on click", async () => {
diff --git a/src/tests/toggle-group/ToggleGroup.spec.ts b/src/tests/toggle-group/ToggleGroup.spec.ts
index 130ce34d6..b7794b362 100644
--- a/src/tests/toggle-group/ToggleGroup.spec.ts
+++ b/src/tests/toggle-group/ToggleGroup.spec.ts
@@ -62,8 +62,8 @@ describe("Toggle", () => {
 	it("has bits data attrs", async () => {
 		const { root, getByTestId } = setup();
 		const item = getByTestId("item-1");
-		expect(root).toHaveAttribute("data-toggle-group-root");
-		expect(item).toHaveAttribute("data-toggle-group-item");
+		expect(root).toHaveAttribute("data-b-toggle-group-root");
+		expect(item).toHaveAttribute("data-b-toggle-group-item");
 	});
 
 	it("toggles when clicked", async () => {
diff --git a/src/tests/toggle/Toggle.spec.ts b/src/tests/toggle/Toggle.spec.ts
index 3bacf6b66..a870cd0e1 100644
--- a/src/tests/toggle/Toggle.spec.ts
+++ b/src/tests/toggle/Toggle.spec.ts
@@ -25,7 +25,7 @@ describe("Toggle", () => {
 
 	it("has bits data attrs", async () => {
 		const { root } = setup();
-		expect(root).toHaveAttribute("data-toggle-root");
+		expect(root).toHaveAttribute("data-b-toggle-root");
 	});
 
 	it("toggles when clicked", async () => {
diff --git a/src/tests/tooltip/Tooltip.spec.ts b/src/tests/tooltip/Tooltip.spec.ts
index 643cab728..7a97dfc23 100644
--- a/src/tests/tooltip/Tooltip.spec.ts
+++ b/src/tests/tooltip/Tooltip.spec.ts
@@ -34,7 +34,7 @@ describe("Tooltip", () => {
 
 		for (const part of parts) {
 			const el = getByTestId(part);
-			expect(el).toHaveAttribute(`data-tooltip-${part}`);
+			expect(el).toHaveAttribute(`data-b-tooltip-${part}`);
 		}
 	});
 

From cb64c96cbac7aee829870dff7ffa75d32bb977e7 Mon Sep 17 00:00:00 2001
From: Hunter Johnston <johnstonhuntera@gmail.com>
Date: Mon, 27 Nov 2023 15:22:05 -0500
Subject: [PATCH 151/217] datepicker demo

---
 src/components/demos/calendar-demo.svelte       |  2 +-
 src/components/demos/date-picker-demo.svelte    | 10 +++++-----
 src/components/demos/range-calendar-demo.svelte |  8 ++++----
 src/content/api-reference/toggle-group.ts       |  4 ++--
 src/lib/bits/date-picker/ctx.ts                 |  4 +++-
 5 files changed, 15 insertions(+), 13 deletions(-)

diff --git a/src/components/demos/calendar-demo.svelte b/src/components/demos/calendar-demo.svelte
index 9db74ad01..1927f78db 100644
--- a/src/components/demos/calendar-demo.svelte
+++ b/src/components/demos/calendar-demo.svelte
@@ -30,7 +30,7 @@
 					<Calendar.GridRow class="flex w-full justify-between">
 						{#each daysOfWeek as day}
 							<Calendar.HeadCell
-								class="w-9 rounded-md text-[0.8rem] font-medium text-muted-foreground"
+								class="w-7 rounded-md text-[0.8rem] font-medium text-muted-foreground"
 							>
 								<div>{day}</div>
 							</Calendar.HeadCell>
diff --git a/src/components/demos/date-picker-demo.svelte b/src/components/demos/date-picker-demo.svelte
index 92de4000c..9024de6ad 100644
--- a/src/components/demos/date-picker-demo.svelte
+++ b/src/components/demos/date-picker-demo.svelte
@@ -28,7 +28,7 @@
 			</DatePicker.Trigger>
 		</DatePicker.Input>
 	</div>
-	<DatePicker.Content sideOffset={2} transition={flyAndScale}>
+	<DatePicker.Content sideOffset={8} transition={flyAndScale} class="relative">
 		<DatePicker.Calendar
 			class="rounded-card border border-dark-10 bg-background p-6 shadow-popover"
 			let:months
@@ -58,7 +58,7 @@
 							<DatePicker.CalendarGridRow class="flex w-full justify-between">
 								{#each daysOfWeek as day}
 									<DatePicker.CalendarHeadCell
-										class="w-9 rounded-md text-[0.8rem] font-medium text-muted-foreground"
+										class="w-7 rounded-md text-[0.8rem] font-medium text-muted-foreground"
 									>
 										<div>{day}</div>
 									</DatePicker.CalendarHeadCell>
@@ -67,16 +67,16 @@
 						</DatePicker.CalendarGridHead>
 						<DatePicker.CalendarGridBody>
 							{#each month.weeks as weekDates}
-								<DatePicker.CalendarGridRow class="mt-1 flex w-full gap-1">
+								<DatePicker.CalendarGridRow class="mt-0.5 flex w-full gap-0.5">
 									{#each weekDates as date}
 										<DatePicker.CalendarCell
 											{date}
-											class="relative h-9 w-9 p-0 text-center text-sm focus-within:relative focus-within:z-20"
+											class="relative p-0 text-center text-sm sq-7 focus-within:relative focus-within:z-20"
 										>
 											<DatePicker.CalendarDate
 												{date}
 												month={month.value}
-												class="inline-flex h-9 w-9 items-center justify-center whitespace-nowrap rounded-[7px] bg-background p-0 text-sm font-normal text-foreground ring-offset-background transition-colors hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground focus-visible:ring-offset-2 data-[disabled]:pointer-events-none data-[outside-month]:pointer-events-none data-[selected]:bg-foreground data-[selected]:text-background data-[disabled]:opacity-50 data-[outside-month]:opacity-20 "
+												class="inline-flex items-center justify-center whitespace-nowrap rounded-[7px] bg-background p-0 text-sm font-normal text-foreground ring-offset-background transition-colors sq-7 hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground focus-visible:ring-offset-2 data-[disabled]:pointer-events-none data-[outside-month]:pointer-events-none data-[selected]:bg-foreground data-[selected]:text-background data-[disabled]:opacity-50 data-[outside-month]:opacity-20 "
 											/>
 										</DatePicker.CalendarCell>
 									{/each}
diff --git a/src/components/demos/range-calendar-demo.svelte b/src/components/demos/range-calendar-demo.svelte
index b4ae5c50f..54b2fef3f 100644
--- a/src/components/demos/range-calendar-demo.svelte
+++ b/src/components/demos/range-calendar-demo.svelte
@@ -30,7 +30,7 @@
 					<RangeCalendar.GridRow class="flex w-full justify-between">
 						{#each daysOfWeek as day}
 							<RangeCalendar.HeadCell
-								class="w-9 rounded-md text-[0.8rem] font-medium text-muted-foreground"
+								class="w-7 rounded-md text-[0.8rem] font-medium text-muted-foreground"
 							>
 								<div>{day}</div>
 							</RangeCalendar.HeadCell>
@@ -39,16 +39,16 @@
 				</RangeCalendar.GridHead>
 				<RangeCalendar.GridBody>
 					{#each month.weeks as weekDates}
-						<RangeCalendar.GridRow class="mt-1 flex w-full gap-1">
+						<RangeCalendar.GridRow class="mt-0.5 flex w-full gap-0.5">
 							{#each weekDates as date}
 								<RangeCalendar.Cell
 									{date}
-									class="relative h-9 w-9 p-0 text-center text-sm focus-within:relative focus-within:z-20"
+									class="relative p-0 text-center text-sm sq-7 focus-within:relative focus-within:z-20"
 								>
 									<RangeCalendar.Date
 										{date}
 										month={month.value}
-										class="inline-flex h-9 w-9 items-center justify-center whitespace-nowrap rounded-[7px] bg-background p-0 text-sm font-normal text-foreground ring-offset-background transition-colors hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground focus-visible:ring-offset-2 data-[disabled]:pointer-events-none data-[outside-month]:pointer-events-none data-[highlighted]:bg-muted data-[selected]:bg-foreground data-[selection-end]:bg-foreground data-[selection-start]:bg-foreground data-[selected]:text-background data-[disabled]:opacity-50 data-[outside-month]:opacity-20"
+										class="inline-flex items-center justify-center whitespace-nowrap rounded-[5px] bg-background p-0 text-sm font-normal text-foreground ring-offset-background transition-colors sq-7 hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground focus-visible:ring-offset-2 data-[disabled]:pointer-events-none data-[outside-month]:pointer-events-none data-[highlighted]:bg-muted data-[selected]:bg-foreground data-[selection-end]:bg-foreground data-[selection-start]:bg-foreground data-[selected]:text-background data-[disabled]:opacity-50 data-[outside-month]:opacity-20"
 									/>
 								</RangeCalendar.Cell>
 							{/each}
diff --git a/src/content/api-reference/toggle-group.ts b/src/content/api-reference/toggle-group.ts
index 461c999a5..82b823bab 100644
--- a/src/content/api-reference/toggle-group.ts
+++ b/src/content/api-reference/toggle-group.ts
@@ -54,7 +54,7 @@ const root: APISchema<ToggleGroup.Props<"multiple">> = {
 			description: "The orientation of the toggle group."
 		},
 		{
-			name: "b-b-toggle-group-root",
+			name: "b-toggle-group-root",
 			description: "Present on the root element."
 		}
 	]
@@ -94,7 +94,7 @@ const item: APISchema<ToggleGroup.ItemProps> = {
 			description: "Present when the toggle item is disabled."
 		},
 		{
-			name: "b-b-toggle-group-item",
+			name: "b-toggle-group-item",
 			description: "Present on the item elements."
 		}
 	]
diff --git a/src/lib/bits/date-picker/ctx.ts b/src/lib/bits/date-picker/ctx.ts
index 7807e80ea..280292da9 100644
--- a/src/lib/bits/date-picker/ctx.ts
+++ b/src/lib/bits/date-picker/ctx.ts
@@ -5,7 +5,7 @@ import { getAttrs as getCalendarAttrs } from "$lib/bits/calendar/ctx.js";
 import { getAttrs as getFieldAttrs } from "$lib/bits/date-field/ctx.js";
 import { getAttrs as getPopoverAttrs } from "$lib/bits/popover/ctx.js";
 import { getPositioningUpdater, type PositioningProps } from "../floating/helpers";
-import type { Writable } from "svelte/store";
+import { get, type Writable } from "svelte/store";
 import type { FloatingConfig } from "../floating/floating-config";
 
 const NAME = "date-picker";
@@ -33,6 +33,7 @@ const defaultPlacement = {
 } satisfies PositioningProps;
 
 export function updatePositioning(props: PositioningProps) {
+	console.log("updating positioning");
 	const withDefaults = { ...defaultPlacement, ...props } satisfies PositioningProps;
 	const {
 		options: { positioning }
@@ -40,4 +41,5 @@ export function updatePositioning(props: PositioningProps) {
 
 	const updater = getPositioningUpdater(positioning as Writable<FloatingConfig>);
 	updater(withDefaults);
+	console.log(get(positioning));
 }

From 30ab4e2fbc9c6ef7728bfbaa8979d567e4ab1bb9 Mon Sep 17 00:00:00 2001
From: Hunter Johnston <johnstonhuntera@gmail.com>
Date: Mon, 27 Nov 2023 15:46:28 -0500
Subject: [PATCH 152/217] stuff

---
 content/styling.md                           |   2 +-
 src/components/demos/date-picker-demo.svelte | 114 ++++++++++---------
 2 files changed, 59 insertions(+), 57 deletions(-)

diff --git a/content/styling.md b/content/styling.md
index f84a17407..bc47bece5 100644
--- a/content/styling.md
+++ b/content/styling.md
@@ -30,7 +30,7 @@ You can then use those data attributes like so:
 #### Define global styles
 
 ```css title="src/app.pcss"
-[data-button-root] {
+[data-b-button-root] {
 	height: 3rem;
 	width: 100%;
 	background-color: #3182ce;
diff --git a/src/components/demos/date-picker-demo.svelte b/src/components/demos/date-picker-demo.svelte
index 9024de6ad..f6e1511a6 100644
--- a/src/components/demos/date-picker-demo.svelte
+++ b/src/components/demos/date-picker-demo.svelte
@@ -27,65 +27,67 @@
 				<CalendarBlank class="h-5 w-5" />
 			</DatePicker.Trigger>
 		</DatePicker.Input>
-	</div>
-	<DatePicker.Content sideOffset={8} transition={flyAndScale} class="relative">
-		<DatePicker.Calendar
-			class="rounded-card border border-dark-10 bg-background p-6 shadow-popover"
-			let:months
-			let:daysOfWeek
-		>
-			<DatePicker.CalendarHeader class="flex items-center justify-between">
-				<DatePicker.CalendarPrevButton
-					class="inline-flex h-7 w-7 items-center justify-center rounded-[7px] border border-border-input bg-background shadow-btn transition-all hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground focus-visible:ring-offset-2 focus-visible:ring-offset-background active:scale-98"
-				>
-					<CaretLeft class="h-4 w-4" />
-				</DatePicker.CalendarPrevButton>
-				<DatePicker.CalendarHeading class="font-medium" />
-				<DatePicker.CalendarNextButton
-					class="inline-flex h-7 w-7 items-center justify-center rounded-[7px] border border-border-input bg-background shadow-btn transition-all hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground focus-visible:ring-offset-2 focus-visible:ring-offset-background active:scale-98"
-				>
-					<CaretRight class="h-4 w-4" />
-				</DatePicker.CalendarNextButton>
-			</DatePicker.CalendarHeader>
-			<div
-				class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0"
+		<DatePicker.Content sideOffset={8} transition={flyAndScale}>
+			<DatePicker.Calendar
+				class="rounded-card border border-dark-10 bg-background p-6 shadow-popover"
+				let:months
+				let:daysOfWeek
 			>
-				{#each months as month}
-					<DatePicker.CalendarGrid
-						class="w-full border-collapse select-none space-y-1"
+				<DatePicker.CalendarHeader class="flex items-center justify-between">
+					<DatePicker.CalendarPrevButton
+						class="inline-flex h-7 w-7 items-center justify-center rounded-[7px] border border-border-input bg-background shadow-btn transition-all hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground focus-visible:ring-offset-2 focus-visible:ring-offset-background active:scale-98"
 					>
-						<DatePicker.CalendarGridHead>
-							<DatePicker.CalendarGridRow class="flex w-full justify-between">
-								{#each daysOfWeek as day}
-									<DatePicker.CalendarHeadCell
-										class="w-7 rounded-md text-[0.8rem] font-medium text-muted-foreground"
-									>
-										<div>{day}</div>
-									</DatePicker.CalendarHeadCell>
-								{/each}
-							</DatePicker.CalendarGridRow>
-						</DatePicker.CalendarGridHead>
-						<DatePicker.CalendarGridBody>
-							{#each month.weeks as weekDates}
-								<DatePicker.CalendarGridRow class="mt-0.5 flex w-full gap-0.5">
-									{#each weekDates as date}
-										<DatePicker.CalendarCell
-											{date}
-											class="relative p-0 text-center text-sm sq-7 focus-within:relative focus-within:z-20"
+						<CaretLeft class="h-4 w-4" />
+					</DatePicker.CalendarPrevButton>
+					<DatePicker.CalendarHeading class="font-medium" />
+					<DatePicker.CalendarNextButton
+						class="inline-flex h-7 w-7 items-center justify-center rounded-[7px] border border-border-input bg-background shadow-btn transition-all hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground focus-visible:ring-offset-2 focus-visible:ring-offset-background active:scale-98"
+					>
+						<CaretRight class="h-4 w-4" />
+					</DatePicker.CalendarNextButton>
+				</DatePicker.CalendarHeader>
+				<div
+					class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0"
+				>
+					{#each months as month}
+						<DatePicker.CalendarGrid
+							class="w-full border-collapse select-none space-y-1"
+						>
+							<DatePicker.CalendarGridHead>
+								<DatePicker.CalendarGridRow class="flex w-full justify-between">
+									{#each daysOfWeek as day}
+										<DatePicker.CalendarHeadCell
+											class="w-7 rounded-md text-[0.8rem] font-medium text-muted-foreground"
 										>
-											<DatePicker.CalendarDate
-												{date}
-												month={month.value}
-												class="inline-flex items-center justify-center whitespace-nowrap rounded-[7px] bg-background p-0 text-sm font-normal text-foreground ring-offset-background transition-colors sq-7 hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground focus-visible:ring-offset-2 data-[disabled]:pointer-events-none data-[outside-month]:pointer-events-none data-[selected]:bg-foreground data-[selected]:text-background data-[disabled]:opacity-50 data-[outside-month]:opacity-20 "
-											/>
-										</DatePicker.CalendarCell>
+											<div>{day}</div>
+										</DatePicker.CalendarHeadCell>
 									{/each}
 								</DatePicker.CalendarGridRow>
-							{/each}
-						</DatePicker.CalendarGridBody>
-					</DatePicker.CalendarGrid>
-				{/each}
-			</div>
-		</DatePicker.Calendar>
-	</DatePicker.Content>
+							</DatePicker.CalendarGridHead>
+							<DatePicker.CalendarGridBody>
+								{#each month.weeks as weekDates}
+									<DatePicker.CalendarGridRow
+										class="mt-0.5 flex w-full gap-0.5"
+									>
+										{#each weekDates as date}
+											<DatePicker.CalendarCell
+												{date}
+												class="relative p-0 text-center text-sm sq-7 focus-within:relative focus-within:z-20"
+											>
+												<DatePicker.CalendarDate
+													{date}
+													month={month.value}
+													class="inline-flex items-center justify-center whitespace-nowrap rounded-[7px] bg-background p-0 text-sm font-normal text-foreground ring-offset-background transition-colors sq-7 hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground focus-visible:ring-offset-2 data-[disabled]:pointer-events-none data-[outside-month]:pointer-events-none data-[selected]:bg-foreground data-[selected]:text-background data-[disabled]:opacity-50 data-[outside-month]:opacity-20 "
+												/>
+											</DatePicker.CalendarCell>
+										{/each}
+									</DatePicker.CalendarGridRow>
+								{/each}
+							</DatePicker.CalendarGridBody>
+						</DatePicker.CalendarGrid>
+					{/each}
+				</div>
+			</DatePicker.Calendar>
+		</DatePicker.Content>
+	</div>
 </DatePicker.Root>

From 70f29e98c1cbd373b3b36fc49c3afc82f7ff3547 Mon Sep 17 00:00:00 2001
From: Hunter Johnston <johnstonhuntera@gmail.com>
Date: Wed, 29 Nov 2023 11:18:07 -0500
Subject: [PATCH 153/217] fix data attrs

---
 content/styling.md                           |  2 +-
 package.json                                 |  2 +-
 pnpm-lock.yaml                               | 14 +++++------
 src/content/api-reference/accordion.ts       | 10 ++++----
 src/content/api-reference/alert-dialog.ts    | 16 ++++++------
 src/content/api-reference/avatar.ts          |  6 ++---
 src/content/api-reference/button.ts          |  2 +-
 src/content/api-reference/calendar.ts        | 24 +++++++++---------
 src/content/api-reference/checkbox.ts        |  4 +--
 src/content/api-reference/collapsible.ts     |  6 ++---
 src/content/api-reference/dialog.ts          | 14 +++++------
 src/content/api-reference/label.ts           |  2 +-
 src/content/api-reference/link-preview.ts    |  6 ++---
 src/content/api-reference/menu.ts            | 26 ++++++++++----------
 src/content/api-reference/popover.ts         |  8 +++---
 src/content/api-reference/progress.ts        |  2 +-
 src/content/api-reference/radio-group.ts     |  6 ++---
 src/content/api-reference/range-calendar.ts  | 24 +++++++++---------
 src/content/api-reference/select.ts          | 16 ++++++------
 src/content/api-reference/separator.ts       |  2 +-
 src/content/api-reference/slider.ts          |  8 +++---
 src/content/api-reference/switch.ts          |  4 +--
 src/content/api-reference/tabs.ts            |  8 +++---
 src/content/api-reference/toggle-group.ts    |  4 +--
 src/content/api-reference/toggle.ts          |  2 +-
 src/content/api-reference/tooltip.ts         |  6 ++---
 src/lib/bits/button/components/button.svelte |  2 +-
 src/lib/internal/attrs.ts                    |  2 +-
 src/tests/accordion/Accordion.spec.ts        | 14 +++++------
 src/tests/alert-dialog/AlertDialog.spec.ts   |  2 +-
 src/tests/checkbox/Checkbox.spec.ts          |  4 +--
 src/tests/collapsible/Collapsible.spec.ts    |  6 ++---
 src/tests/context-menu/ContextMenu.spec.ts   |  4 +--
 src/tests/dialog/Dialog.spec.ts              |  2 +-
 src/tests/dropdown-menu/DropdownMenu.spec.ts |  4 +--
 src/tests/label/Label.spec.ts                |  2 +-
 src/tests/link-preview/LinkPreview.spec.ts   |  2 +-
 src/tests/menubar/Menubar.spec.ts            |  6 ++---
 src/tests/popover/Popover.spec.ts            |  2 +-
 src/tests/progress/Progress.spec.ts          |  2 +-
 src/tests/radio-group/RadioGroup.spec.ts     |  4 +--
 src/tests/select/Select.spec.ts              |  4 +--
 src/tests/separator/Separator.spec.ts        |  2 +-
 src/tests/switch/Switch.spec.ts              |  4 +--
 src/tests/tabs/Tabs.spec.ts                  |  8 +++---
 src/tests/toggle-group/ToggleGroup.spec.ts   |  4 +--
 src/tests/toggle/Toggle.spec.ts              |  2 +-
 src/tests/tooltip/Tooltip.spec.ts            |  2 +-
 48 files changed, 154 insertions(+), 154 deletions(-)

diff --git a/content/styling.md b/content/styling.md
index bc47bece5..f84a17407 100644
--- a/content/styling.md
+++ b/content/styling.md
@@ -30,7 +30,7 @@ You can then use those data attributes like so:
 #### Define global styles
 
 ```css title="src/app.pcss"
-[data-b-button-root] {
+[data-button-root] {
 	height: 3rem;
 	width: 100%;
 	background-color: #3182ce;
diff --git a/package.json b/package.json
index 971ea70b2..c4cc31cbe 100644
--- a/package.json
+++ b/package.json
@@ -92,7 +92,7 @@
 	"type": "module",
 	"dependencies": {
 		"@internationalized/date": "^3.5.0",
-		"@melt-ui/svelte": "0.63.0",
+		"@melt-ui/svelte": "0.63.1",
 		"nanoid": "^5.0.3"
 	},
 	"peerDependencies": {
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index fda161529..a02379539 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -9,8 +9,8 @@ dependencies:
     specifier: ^3.5.0
     version: 3.5.0
   '@melt-ui/svelte':
-    specifier: 0.63.0
-    version: 0.63.0(svelte@4.2.3)
+    specifier: 0.63.1
+    version: 0.63.1(svelte@4.2.3)
   nanoid:
     specifier: ^5.0.3
     version: 5.0.3
@@ -24,7 +24,7 @@ devDependencies:
     version: 0.16.5(svelte@4.2.3)
   '@melt-ui/pp':
     specifier: ^0.1.4
-    version: 0.1.4(@melt-ui/svelte@0.63.0)(svelte@4.2.3)
+    version: 0.1.4(@melt-ui/svelte@0.63.1)(svelte@4.2.3)
   '@playwright/test':
     specifier: ^1.28.1
     version: 1.36.2
@@ -1065,20 +1065,20 @@ packages:
       - supports-color
     dev: true
 
-  /@melt-ui/pp@0.1.4(@melt-ui/svelte@0.63.0)(svelte@4.2.3):
+  /@melt-ui/pp@0.1.4(@melt-ui/svelte@0.63.1)(svelte@4.2.3):
     resolution: {integrity: sha512-zR+Kl3CZJPJBHW8V7YcdQCMI/dVcnW9Ct3yGbVaIywYVStVRS7F9uEDOea3xLLT2WTGodQePzPlUn53yKFu87g==}
     engines: {pnpm: '>=8.6.3'}
     peerDependencies:
       '@melt-ui/svelte': '>= 0.29.0'
       svelte: ^3.55.0 || ^4.0.0 || ^5.0.0-next.1
     dependencies:
-      '@melt-ui/svelte': 0.63.0(svelte@4.2.3)
+      '@melt-ui/svelte': 0.63.1(svelte@4.2.3)
       estree-walker: 3.0.3
       svelte: 4.2.3
     dev: true
 
-  /@melt-ui/svelte@0.63.0(svelte@4.2.3):
-    resolution: {integrity: sha512-lAQgrglE4NrWyxcS99Px8iWYN09riU7Zt/AxV09FkFeejo7c3PhGFiCqr3cmQQi4JgdTB+Ek52E6hKgVHKZ/2w==}
+  /@melt-ui/svelte@0.63.1(svelte@4.2.3):
+    resolution: {integrity: sha512-WzuI4uePPsHMlk1aq95UAgb32gXYRjBSi8DmXApWuM9CpJgcvUt2YcQ5+BPSOyrDOWVvPJd9gL7QA0NPDSCtNw==}
     peerDependencies:
       svelte: '>=3 <5'
     dependencies:
diff --git a/src/content/api-reference/accordion.ts b/src/content/api-reference/accordion.ts
index d88443550..606a435ad 100644
--- a/src/content/api-reference/accordion.ts
+++ b/src/content/api-reference/accordion.ts
@@ -40,7 +40,7 @@ const root: APISchema<Accordion.Props<false>> = {
 			description: "The orientation of the accordion."
 		},
 		{
-			name: "b-accordion-root",
+			name: "accordion-root",
 			value: "",
 			description: "Present on the root element."
 		}
@@ -75,7 +75,7 @@ const item: APISchema<Accordion.ItemProps> = {
 			description: "Present when the accordion item is disabled."
 		},
 		{
-			name: "b-accordion-item",
+			name: "accordion-item",
 			description: "Present on the item element."
 		}
 	]
@@ -100,7 +100,7 @@ const trigger: APISchema<Accordion.TriggerProps> = {
 			description: "The value of the accordion item."
 		},
 		{
-			name: "b-accordion-trigger",
+			name: "accordion-trigger",
 			description: "Present on the trigger element."
 		}
 	]
@@ -125,7 +125,7 @@ const content: APISchema<Accordion.ContentProps> = {
 			description: "The value of the accordion item."
 		},
 		{
-			name: "b-accordion-content",
+			name: "accordion-content",
 			description: "Present on the content element."
 		}
 	]
@@ -151,7 +151,7 @@ const header: APISchema<Accordion.HeaderProps> = {
 			description: "The heading level of the header."
 		},
 		{
-			name: "b-accordion-header",
+			name: "accordion-header",
 			description: "Present on the header element."
 		}
 	]
diff --git a/src/content/api-reference/alert-dialog.ts b/src/content/api-reference/alert-dialog.ts
index 3da670454..f4271e0cd 100644
--- a/src/content/api-reference/alert-dialog.ts
+++ b/src/content/api-reference/alert-dialog.ts
@@ -55,7 +55,7 @@ const action: APISchema<AlertDialog.ActionProps> = {
 	},
 	dataAttributes: [
 		{
-			name: "b-alert-dialog-action",
+			name: "alert-dialog-action",
 			description: "Present on the action button."
 		}
 	]
@@ -67,7 +67,7 @@ const cancel: APISchema<AlertDialog.CancelProps> = {
 	props: { asChild },
 	dataAttributes: [
 		{
-			name: "b-alert-dialog-cancel",
+			name: "alert-dialog-cancel",
 			description: "Present on the cancel button."
 		}
 	]
@@ -84,7 +84,7 @@ const content: APISchema<AlertDialog.ContentProps> = {
 			description: "The state of the alert dialog."
 		},
 		{
-			name: "b-alert-dialog-content",
+			name: "alert-dialog-content",
 			description: "Present on the content."
 		}
 	]
@@ -105,7 +105,7 @@ const title: APISchema<AlertDialog.TitleProps> = {
 	},
 	dataAttributes: [
 		{
-			name: "b-alert-dialog-title",
+			name: "alert-dialog-title",
 			description: "Present on the title."
 		}
 	]
@@ -117,7 +117,7 @@ const description: APISchema<AlertDialog.DescriptionProps> = {
 	props: { asChild },
 	dataAttributes: [
 		{
-			name: "b-alert-dialog-description",
+			name: "alert-dialog-description",
 			description: "Present on the description."
 		}
 	]
@@ -129,7 +129,7 @@ const trigger: APISchema<AlertDialog.TriggerProps> = {
 	props: { asChild },
 	dataAttributes: [
 		{
-			name: "b-alert-dialog-trigger",
+			name: "alert-dialog-trigger",
 			description: "Present on the trigger."
 		}
 	]
@@ -146,7 +146,7 @@ const overlay: APISchema<AlertDialog.OverlayProps> = {
 			description: "The state of the alert dialog."
 		},
 		{
-			name: "b-alert-dialog-overlay",
+			name: "alert-dialog-overlay",
 			description: "Present on the overlay."
 		}
 	]
@@ -161,7 +161,7 @@ const portal: APISchema<AlertDialog.PortalProps> = {
 			description: "Present if the `portal` prop is not `null`."
 		},
 		{
-			name: "b-alert-dialog-portal",
+			name: "alert-dialog-portal",
 			description: "Present on the portal."
 		}
 	]
diff --git a/src/content/api-reference/avatar.ts b/src/content/api-reference/avatar.ts
index bcc24757f..e1fe7ec6b 100644
--- a/src/content/api-reference/avatar.ts
+++ b/src/content/api-reference/avatar.ts
@@ -32,7 +32,7 @@ export const root: APISchema<Avatar.Props> = {
 	},
 	dataAttributes: [
 		{
-			name: "b-avatar-root",
+			name: "avatar-root",
 			description: "Present on the root element."
 		}
 	]
@@ -46,7 +46,7 @@ export const image: APISchema<Avatar.ImageProps> = {
 	},
 	dataAttributes: [
 		{
-			name: "b-avatar-image",
+			name: "avatar-image",
 			description: "Present on the image element."
 		}
 	]
@@ -58,7 +58,7 @@ export const fallback: APISchema<Avatar.FallbackProps> = {
 	props: { asChild },
 	dataAttributes: [
 		{
-			name: "b-avatar-fallback",
+			name: "avatar-fallback",
 			description: "Present on the fallback element."
 		}
 	]
diff --git a/src/content/api-reference/button.ts b/src/content/api-reference/button.ts
index b77a801a2..21ca411fb 100644
--- a/src/content/api-reference/button.ts
+++ b/src/content/api-reference/button.ts
@@ -19,7 +19,7 @@ export const root: APISchema<Button.Props & { href: string }> = {
 	},
 	dataAttributes: [
 		{
-			name: "b-button-root",
+			name: "button-root",
 			description: "Present on the button element."
 		}
 	]
diff --git a/src/content/api-reference/calendar.ts b/src/content/api-reference/calendar.ts
index 822b41743..2ff23d3bf 100644
--- a/src/content/api-reference/calendar.ts
+++ b/src/content/api-reference/calendar.ts
@@ -118,7 +118,7 @@ const root: APISchema<Calendar.Props> = {
 			description: "Present on the root element when the calendar is readonly."
 		},
 		{
-			name: "b-calendar-root",
+			name: "calendar-root",
 			description: "Present on the root element."
 		}
 	]
@@ -140,7 +140,7 @@ const cell: APISchema<Calendar.CellProps> = {
 			description: "Present on the element when the date is disabled."
 		},
 		{
-			name: "b-calendar-cell",
+			name: "calendar-cell",
 			description: "Present on the cell element."
 		}
 	]
@@ -197,7 +197,7 @@ const date: APISchema<Calendar.DateProps> = {
 			description: "Present on the element when the date is focused."
 		},
 		{
-			name: "b-calendar-date",
+			name: "calendar-date",
 			description: "Present on the date element."
 		}
 	]
@@ -211,7 +211,7 @@ const grid: APISchema<Calendar.GridProps> = {
 	},
 	dataAttributes: [
 		{
-			name: "b-calendar-grid",
+			name: "calendar-grid",
 			description: "Present on the grid element."
 		}
 	]
@@ -225,7 +225,7 @@ const gridBody: APISchema<Calendar.GridBodyProps> = {
 	},
 	dataAttributes: [
 		{
-			name: "b-calendar-grid-body",
+			name: "calendar-grid-body",
 			description: "Present on the grid body element."
 		}
 	]
@@ -239,7 +239,7 @@ const gridHead: APISchema<Calendar.GridHeadProps> = {
 	},
 	dataAttributes: [
 		{
-			name: "b-calendar-grid-head",
+			name: "calendar-grid-head",
 			description: "Present on the grid head element."
 		}
 	]
@@ -253,7 +253,7 @@ const gridRow: APISchema<Calendar.GridRowProps> = {
 	},
 	dataAttributes: [
 		{
-			name: "b-calendar-grid-row",
+			name: "calendar-grid-row",
 			description: "Present on the grid row element."
 		}
 	]
@@ -267,7 +267,7 @@ const headCell: APISchema<Calendar.HeadCellProps> = {
 	},
 	dataAttributes: [
 		{
-			name: "b-calendar-head-cell",
+			name: "calendar-head-cell",
 			description: "Present on the head cell element."
 		}
 	]
@@ -281,7 +281,7 @@ const header: APISchema<Calendar.HeaderProps> = {
 	},
 	dataAttributes: [
 		{
-			name: "b-calendar-header",
+			name: "calendar-header",
 			description: "Present on the header element."
 		}
 	]
@@ -295,7 +295,7 @@ const heading: APISchema<Calendar.HeadingProps> = {
 	},
 	dataAttributes: [
 		{
-			name: "b-calendar-heading",
+			name: "calendar-heading",
 			description: "Present on the heading element."
 		}
 	]
@@ -309,7 +309,7 @@ const nextButton: APISchema<Calendar.NextButtonProps> = {
 	},
 	dataAttributes: [
 		{
-			name: "b-calendar-next-button",
+			name: "calendar-next-button",
 			description: "Present on the next button element."
 		}
 	]
@@ -323,7 +323,7 @@ const prevButton: APISchema<Calendar.PrevButtonProps> = {
 	},
 	dataAttributes: [
 		{
-			name: "b-calendar-prev-button",
+			name: "calendar-prev-button",
 			description: "Present on the prev button element."
 		}
 	]
diff --git a/src/content/api-reference/checkbox.ts b/src/content/api-reference/checkbox.ts
index b993ed1cb..3fd308790 100644
--- a/src/content/api-reference/checkbox.ts
+++ b/src/content/api-reference/checkbox.ts
@@ -56,7 +56,7 @@ export const root: APISchema<Checkbox.Props> = {
 			description: "The checkbox's state. Can be 'checked', 'unchecked', or 'indeterminate'."
 		},
 		{
-			name: "b-checkbox-root",
+			name: "checkbox-root",
 			description: "Present on the root element."
 		}
 	]
@@ -89,7 +89,7 @@ export const indicator: APISchema<Checkbox.IndicatorProps> = {
 	props: { asChild },
 	dataAttributes: [
 		{
-			name: "b-checkbox-indicator",
+			name: "checkbox-indicator",
 			description: "Present on the indicator element."
 		}
 	]
diff --git a/src/content/api-reference/collapsible.ts b/src/content/api-reference/collapsible.ts
index ff6730fd5..429111270 100644
--- a/src/content/api-reference/collapsible.ts
+++ b/src/content/api-reference/collapsible.ts
@@ -40,7 +40,7 @@ export const root: APISchema<Collapsible.Props> = {
 			description: "The collapsible's open state."
 		},
 		{
-			name: "b-collapsible-root",
+			name: "collapsible-root",
 			description: "Present on the root element."
 		}
 	]
@@ -62,7 +62,7 @@ export const trigger: APISchema<Collapsible.TriggerProps> = {
 			description: "The collapsible's open state."
 		},
 		{
-			name: "b-collapsible-trigger",
+			name: "collapsible-trigger",
 			description: "Present on the trigger element."
 		}
 	]
@@ -89,7 +89,7 @@ export const content: APISchema<Collapsible.ContentProps> = {
 			description: "The collapsible's open state."
 		},
 		{
-			name: "b-collapsible-content",
+			name: "collapsible-content",
 			description: "Present on the content element."
 		}
 	]
diff --git a/src/content/api-reference/dialog.ts b/src/content/api-reference/dialog.ts
index 49ff9e1b6..607e25046 100644
--- a/src/content/api-reference/dialog.ts
+++ b/src/content/api-reference/dialog.ts
@@ -53,7 +53,7 @@ export const close: APISchema<Dialog.CloseProps> = {
 	props: { asChild },
 	dataAttributes: [
 		{
-			name: "b-dialog-close",
+			name: "dialog-close",
 			description: "Present on the close button."
 		}
 	]
@@ -70,7 +70,7 @@ export const content: APISchema<Dialog.ContentProps> = {
 			description: "The state of the dialog."
 		},
 		{
-			name: "b-dialog-content",
+			name: "dialog-content",
 			description: "Present on the content."
 		}
 	]
@@ -91,7 +91,7 @@ export const title: APISchema<Dialog.TitleProps> = {
 	},
 	dataAttributes: [
 		{
-			name: "b-dialog-title",
+			name: "dialog-title",
 			description: "Present on the title."
 		}
 	]
@@ -103,7 +103,7 @@ export const description: APISchema<Dialog.DescriptionProps> = {
 	props: { asChild },
 	dataAttributes: [
 		{
-			name: "b-dialog-description",
+			name: "dialog-description",
 			description: "Present on the description."
 		}
 	]
@@ -115,7 +115,7 @@ export const trigger: APISchema<Dialog.TriggerProps> = {
 	props: { asChild },
 	dataAttributes: [
 		{
-			name: "b-dialog-trigger",
+			name: "dialog-trigger",
 			description: "Present on the trigger."
 		}
 	]
@@ -132,7 +132,7 @@ export const overlay: APISchema<Dialog.OverlayProps> = {
 			description: "The state of the dialog."
 		},
 		{
-			name: "b-dialog-overlay",
+			name: "dialog-overlay",
 			description: "Present on the overlay."
 		}
 	]
@@ -148,7 +148,7 @@ export const portal: APISchema<Dialog.PortalProps> = {
 			description: "Present on the portal."
 		},
 		{
-			name: "b-dialog-portal",
+			name: "dialog-portal",
 			description: "Present on the portal."
 		}
 	]
diff --git a/src/content/api-reference/label.ts b/src/content/api-reference/label.ts
index d9835697b..205c983d2 100644
--- a/src/content/api-reference/label.ts
+++ b/src/content/api-reference/label.ts
@@ -8,7 +8,7 @@ export const root: APISchema<Label.Props> = {
 	props: { asChild },
 	dataAttributes: [
 		{
-			name: "b-labelroot",
+			name: "labelroot",
 			description: "Present on the root element."
 		}
 	]
diff --git a/src/content/api-reference/link-preview.ts b/src/content/api-reference/link-preview.ts
index fe76e00aa..e5c8e20e6 100644
--- a/src/content/api-reference/link-preview.ts
+++ b/src/content/api-reference/link-preview.ts
@@ -64,7 +64,7 @@ export const trigger: APISchema<LinkPreview.TriggerProps> = {
 			description: "The open state of the link preview."
 		},
 		{
-			name: "b-link-preview-trigger",
+			name: "link-preview-trigger",
 			description: "Present on the trigger element."
 		}
 	]
@@ -81,7 +81,7 @@ export const content: APISchema<LinkPreview.ContentProps> = {
 			description: "The open state of the link preview."
 		},
 		{
-			name: "b-link-preview-content",
+			name: "link-preview-content",
 			description: "Present on the content element."
 		}
 	]
@@ -98,7 +98,7 @@ export const arrow: APISchema<LinkPreview.ArrowProps> = {
 			description: "Present on the arrow element."
 		},
 		{
-			name: "b-link-preview-arrow",
+			name: "link-preview-arrow",
 			description: "Present on the arrow element."
 		}
 	]
diff --git a/src/content/api-reference/menu.ts b/src/content/api-reference/menu.ts
index ef69e4e21..23a7885f2 100644
--- a/src/content/api-reference/menu.ts
+++ b/src/content/api-reference/menu.ts
@@ -206,7 +206,7 @@ type DataAttrs = APISchema["dataAttributes"];
 const triggerAttrs: DataAttrs = [
 	STATE,
 	{
-		name: "b-menu-trigger",
+		name: "menu-trigger",
 		description: "Present on the trigger element."
 	}
 ];
@@ -214,7 +214,7 @@ const triggerAttrs: DataAttrs = [
 const contentAttrs: DataAttrs = [
 	STATE,
 	{
-		name: "b-menu-content",
+		name: "menu-content",
 		description: "Present on the content element."
 	}
 ];
@@ -222,7 +222,7 @@ const contentAttrs: DataAttrs = [
 const arrowAttrs: DataAttrs = [
 	STATE,
 	{
-		name: "b-menu-arrow",
+		name: "menu-arrow",
 		description: "Present on the arrow element."
 	}
 ];
@@ -245,21 +245,21 @@ const sharedItemAttrs: DataAttrs = [
 const itemAttrs: DataAttrs = [
 	...sharedItemAttrs,
 	{
-		name: "b-menu-item",
+		name: "menu-item",
 		description: "Present on the item element."
 	}
 ];
 
 const groupAttrs: DataAttrs = [
 	{
-		name: "b-menu-group",
+		name: "menu-group",
 		description: "Present on the group element."
 	}
 ];
 
 const labelAttrs: DataAttrs = [
 	{
-		name: "b-menu-label",
+		name: "menu-label",
 		description: "Present on the group label element."
 	}
 ];
@@ -275,7 +275,7 @@ const checkboxItemAttrs: DataAttrs = [
 
 const radioGroupAttrs: DataAttrs = [
 	{
-		name: "b-menu-radio-group",
+		name: "menu-radio-group",
 		description: "Present on the radio group element."
 	}
 ];
@@ -292,7 +292,7 @@ const radioItemAttrs: DataAttrs = [
 		description: "The value of the radio item."
 	},
 	{
-		name: "b-menu-radio-item",
+		name: "menu-radio-item",
 		description: "Present on the radio item element."
 	}
 ];
@@ -304,7 +304,7 @@ const separatorAttrs: DataAttrs = [
 		description: "The orientation of the separator."
 	},
 	{
-		name: "b-menu-separator",
+		name: "menu-separator",
 		description: "Present on the separator element."
 	}
 ];
@@ -312,7 +312,7 @@ const separatorAttrs: DataAttrs = [
 const subContentAttrs: DataAttrs = [
 	STATE,
 	{
-		name: "b-menu-sub-content",
+		name: "menu-sucontent",
 		description: "Present on the submenu content element."
 	}
 ];
@@ -321,21 +321,21 @@ const subTriggerAttrs: DataAttrs = [
 	...sharedItemAttrs,
 	STATE,
 	{
-		name: "b-menu-sub-trigger",
+		name: "menu-sutrigger",
 		description: "Present on the submenu trigger element."
 	}
 ];
 
 const checkboxIndicatorAttrs: DataAttrs = [
 	{
-		name: "b-menu-checkbox-indicator",
+		name: "menu-checkbox-indicator",
 		description: "Present on the checkbox indicator element."
 	}
 ];
 
 const radioIndicatorAttrs: DataAttrs = [
 	{
-		name: "b-menu-radio-indicator",
+		name: "menu-radio-indicator",
 		description: "Present on the radio indicator element."
 	}
 ];
diff --git a/src/content/api-reference/popover.ts b/src/content/api-reference/popover.ts
index 6166c743a..9cac7dc36 100644
--- a/src/content/api-reference/popover.ts
+++ b/src/content/api-reference/popover.ts
@@ -71,7 +71,7 @@ export const trigger: APISchema<Popover.TriggerProps> = {
 			description: "The open state of the link preview."
 		},
 		{
-			name: "b-popover-trigger",
+			name: "popover-trigger",
 			description: "Present on the trigger element."
 		}
 	]
@@ -88,7 +88,7 @@ export const content: APISchema<Popover.ContentProps> = {
 			description: "The open state of the popover."
 		},
 		{
-			name: "b-popover-content",
+			name: "popover-content",
 			description: "Present on the content element."
 		}
 	]
@@ -101,7 +101,7 @@ export const close: APISchema<Popover.CloseProps> = {
 	props: { asChild },
 	dataAttributes: [
 		{
-			name: "b-popover-close",
+			name: "popover-close",
 			description: "Present on the close button."
 		}
 	]
@@ -118,7 +118,7 @@ export const arrow: APISchema<Popover.ArrowProps> = {
 			description: "Present on the arrow element."
 		},
 		{
-			name: "b-popover-arrow",
+			name: "popover-arrow",
 			description: "Present on the arrow element."
 		}
 	]
diff --git a/src/content/api-reference/progress.ts b/src/content/api-reference/progress.ts
index 93246ba6e..df344d698 100644
--- a/src/content/api-reference/progress.ts
+++ b/src/content/api-reference/progress.ts
@@ -42,7 +42,7 @@ export const root: APISchema<Progress.Props> = {
 			description: "The maximum value of the progress bar."
 		},
 		{
-			name: "b-progress-root",
+			name: "progress-root",
 			description: "Present on the root element."
 		}
 	]
diff --git a/src/content/api-reference/radio-group.ts b/src/content/api-reference/radio-group.ts
index 139b9fdf5..f91c74d4a 100644
--- a/src/content/api-reference/radio-group.ts
+++ b/src/content/api-reference/radio-group.ts
@@ -54,7 +54,7 @@ export const root: APISchema<RadioGroup.Props> = {
 			description: "The orientation of the radio group."
 		},
 		{
-			name: "b-radio-group-root",
+			name: "radio-group-root",
 			description: "Present on the root element."
 		}
 	]
@@ -97,7 +97,7 @@ export const item: APISchema<RadioGroup.ItemProps> = {
 			description: "The orientation of the parent radio group."
 		},
 		{
-			name: "b-radio-group-item",
+			name: "radio-group-item",
 			description: "Present on the radio item element."
 		}
 	]
@@ -116,7 +116,7 @@ export const indicator: APISchema = {
 		"A component which is used to indicate the radio item's checked state. Any children of this component will only be visible when the radio item is checked.",
 	dataAttributes: [
 		{
-			name: "b-radio-group-indicator",
+			name: "radio-group-indicator",
 			description: "Present on the indicator element."
 		}
 	]
diff --git a/src/content/api-reference/range-calendar.ts b/src/content/api-reference/range-calendar.ts
index 65492aa24..1ab1b88aa 100644
--- a/src/content/api-reference/range-calendar.ts
+++ b/src/content/api-reference/range-calendar.ts
@@ -116,7 +116,7 @@ const root: APISchema<RangeCalendar.Props> = {
 			description: "Present on the root element when the calendar is readonly."
 		},
 		{
-			name: "b-calendar-root",
+			name: "calendar-root",
 			description: "Present on the root element."
 		}
 	]
@@ -138,7 +138,7 @@ const cell: APISchema<RangeCalendar.CellProps> = {
 			description: "Present on the element when the date is disabled."
 		},
 		{
-			name: "b-calendar-cell",
+			name: "calendar-cell",
 			description: "Present on the cell element."
 		}
 	]
@@ -208,7 +208,7 @@ const date: APISchema<RangeCalendar.DateProps> = {
 			description: "Present on the element when the date is focused."
 		},
 		{
-			name: "b-calendar-date",
+			name: "calendar-date",
 			description: "Present on the date element."
 		}
 	]
@@ -222,7 +222,7 @@ const grid: APISchema<RangeCalendar.GridProps> = {
 	},
 	dataAttributes: [
 		{
-			name: "b-calendar-grid",
+			name: "calendar-grid",
 			description: "Present on the grid element."
 		}
 	]
@@ -236,7 +236,7 @@ const gridBody: APISchema<RangeCalendar.GridBodyProps> = {
 	},
 	dataAttributes: [
 		{
-			name: "b-calendar-grid-body",
+			name: "calendar-grid-body",
 			description: "Present on the grid body element."
 		}
 	]
@@ -250,7 +250,7 @@ const gridHead: APISchema<RangeCalendar.GridHeadProps> = {
 	},
 	dataAttributes: [
 		{
-			name: "b-calendar-grid-head",
+			name: "calendar-grid-head",
 			description: "Present on the grid head element."
 		}
 	]
@@ -264,7 +264,7 @@ const gridRow: APISchema<RangeCalendar.GridRowProps> = {
 	},
 	dataAttributes: [
 		{
-			name: "b-calendar-grid-row",
+			name: "calendar-grid-row",
 			description: "Present on the grid row element."
 		}
 	]
@@ -278,7 +278,7 @@ const headCell: APISchema<RangeCalendar.HeadCellProps> = {
 	},
 	dataAttributes: [
 		{
-			name: "b-calendar-head-cell",
+			name: "calendar-head-cell",
 			description: "Present on the head cell element."
 		}
 	]
@@ -292,7 +292,7 @@ const header: APISchema<RangeCalendar.HeaderProps> = {
 	},
 	dataAttributes: [
 		{
-			name: "b-calendar-header",
+			name: "calendar-header",
 			description: "Present on the header element."
 		}
 	]
@@ -306,7 +306,7 @@ const heading: APISchema<RangeCalendar.HeadingProps> = {
 	},
 	dataAttributes: [
 		{
-			name: "b-calendar-heading",
+			name: "calendar-heading",
 			description: "Present on the heading element."
 		}
 	]
@@ -320,7 +320,7 @@ const nextButton: APISchema<RangeCalendar.NextButtonProps> = {
 	},
 	dataAttributes: [
 		{
-			name: "b-calendar-next-button",
+			name: "calendar-next-button",
 			description: "Present on the next button element."
 		}
 	]
@@ -334,7 +334,7 @@ const prevButton: APISchema<RangeCalendar.PrevButtonProps> = {
 	},
 	dataAttributes: [
 		{
-			name: "b-calendar-prev-button",
+			name: "calendar-prev-button",
 			description: "Present on the prev button element."
 		}
 	]
diff --git a/src/content/api-reference/select.ts b/src/content/api-reference/select.ts
index 2252edbb0..2edf4f9c3 100644
--- a/src/content/api-reference/select.ts
+++ b/src/content/api-reference/select.ts
@@ -118,7 +118,7 @@ export const trigger: APISchema<Select.TriggerProps> = {
 			description: "Present when the trigger is disabled."
 		},
 		{
-			name: "b-select-trigger",
+			name: "select-trigger",
 			description: "Present on the trigger element."
 		}
 	]
@@ -130,7 +130,7 @@ export const content: APISchema<Select.ContentProps> = {
 	props: { ...transitionProps, ...floatingPositioning, asChild },
 	dataAttributes: [
 		{
-			name: "b-select-content",
+			name: "select-content",
 			description: "Present on the content element."
 		}
 	]
@@ -167,7 +167,7 @@ export const item: APISchema<Select.ItemProps> = {
 			description: "Present when the item is disabled."
 		},
 		{
-			name: "b-select-item",
+			name: "select-item",
 			description: "Present on the item element."
 		}
 	]
@@ -186,7 +186,7 @@ export const value: APISchema = {
 	},
 	dataAttributes: [
 		{
-			name: "b-select-value",
+			name: "select-value",
 			description: "Present on the value element."
 		}
 	]
@@ -205,7 +205,7 @@ export const group: APISchema<Select.GroupProps> = {
 	props: { asChild },
 	dataAttributes: [
 		{
-			name: "b-select-group",
+			name: "select-group",
 			description: "Present on the group element."
 		}
 	]
@@ -218,7 +218,7 @@ export const label: APISchema<Select.LabelProps> = {
 	props: { asChild },
 	dataAttributes: [
 		{
-			name: "b-select-label",
+			name: "select-label",
 			description: "Present on the label element."
 		}
 	]
@@ -232,7 +232,7 @@ export const separator: APISchema<Select.SeparatorProps> = {
 	},
 	dataAttributes: [
 		{
-			name: "b-select-separator",
+			name: "select-separator",
 			description: "Present on the separator element."
 		}
 	]
@@ -246,7 +246,7 @@ export const indicator: APISchema<Select.IndicatorProps> = {
 	},
 	dataAttributes: [
 		{
-			name: "b-select-indicator",
+			name: "select-indicator",
 			description: "Present on the indicator element."
 		}
 	]
diff --git a/src/content/api-reference/separator.ts b/src/content/api-reference/separator.ts
index 4e0d6a70f..7a061be3a 100644
--- a/src/content/api-reference/separator.ts
+++ b/src/content/api-reference/separator.ts
@@ -30,7 +30,7 @@ export const root: APISchema<Separator.Props> = {
 			description: "The orientation of the separator."
 		},
 		{
-			name: "b-separator-root",
+			name: "separator-root",
 			description: "Present on the root element."
 		}
 	]
diff --git a/src/content/api-reference/slider.ts b/src/content/api-reference/slider.ts
index f6f3f6ea7..04b4998e1 100644
--- a/src/content/api-reference/slider.ts
+++ b/src/content/api-reference/slider.ts
@@ -56,7 +56,7 @@ const root: APISchema<Slider.Props> = {
 			description: "The orientation of the slider."
 		},
 		{
-			name: "b-slider-root",
+			name: "slider-root",
 			description: "Present on the root element."
 		}
 	]
@@ -70,7 +70,7 @@ const thumb: APISchema<Slider.ThumbProps> = {
 	},
 	dataAttributes: [
 		{
-			name: "b-slider-thumb",
+			name: "slider-thumb",
 			description: "Present on the thumb elements."
 		}
 	]
@@ -84,7 +84,7 @@ const range: APISchema<Slider.RangeProps> = {
 	},
 	dataAttributes: [
 		{
-			name: "b-slider-range",
+			name: "slider-range",
 			description: "Present on the range elements."
 		}
 	]
@@ -102,7 +102,7 @@ const tick: APISchema<Slider.TickProps> = {
 			description: "Present when the tick is bounded."
 		},
 		{
-			name: "b-slider-tick",
+			name: "slider-tick",
 			description: "Present on the tick elements."
 		}
 	]
diff --git a/src/content/api-reference/switch.ts b/src/content/api-reference/switch.ts
index 08092eab6..bb3832673 100644
--- a/src/content/api-reference/switch.ts
+++ b/src/content/api-reference/switch.ts
@@ -66,7 +66,7 @@ const root: APISchema<Switch.Props> = {
 			description: "Present when the switch is disabled."
 		},
 		{
-			name: "b-switch-root",
+			name: "switch-root",
 			description: "Present on the root element."
 		}
 	]
@@ -89,7 +89,7 @@ const thumb: APISchema<Switch.ThumbProps> = {
 			description: "Present when the switch is checked."
 		},
 		{
-			name: "b-switch-thumb",
+			name: "switch-thumb",
 			description: "Present on the thumb element."
 		}
 	]
diff --git a/src/content/api-reference/tabs.ts b/src/content/api-reference/tabs.ts
index dfcb03c94..d9edf1ec9 100644
--- a/src/content/api-reference/tabs.ts
+++ b/src/content/api-reference/tabs.ts
@@ -53,7 +53,7 @@ const root: APISchema<Tabs.Props> = {
 			description: "The orientation of the tabs."
 		},
 		{
-			name: "b-tabs-root",
+			name: "tabs-root",
 			description: "Present on the root element."
 		}
 	]
@@ -72,7 +72,7 @@ const list: APISchema<Tabs.ListProps> = {
 			description: "The orientation of the tabs."
 		},
 		{
-			name: "b-tabs-list",
+			name: "tabs-list",
 			description: "Present on the list element."
 		}
 	]
@@ -114,7 +114,7 @@ const trigger: APISchema<Tabs.TriggerProps> = {
 			description: "Present when the tab trigger is disabled."
 		},
 		{
-			name: "b-tabs-trigger",
+			name: "tabs-trigger",
 			description: "Present on the trigger elements."
 		}
 	]
@@ -133,7 +133,7 @@ const content: APISchema<Tabs.ContentProps> = {
 	},
 	dataAttributes: [
 		{
-			name: "b-tabs-content",
+			name: "tabs-content",
 			description: "Present on the content elements."
 		}
 	]
diff --git a/src/content/api-reference/toggle-group.ts b/src/content/api-reference/toggle-group.ts
index 82b823bab..886be1984 100644
--- a/src/content/api-reference/toggle-group.ts
+++ b/src/content/api-reference/toggle-group.ts
@@ -54,7 +54,7 @@ const root: APISchema<ToggleGroup.Props<"multiple">> = {
 			description: "The orientation of the toggle group."
 		},
 		{
-			name: "b-toggle-group-root",
+			name: "toggle-group-root",
 			description: "Present on the root element."
 		}
 	]
@@ -94,7 +94,7 @@ const item: APISchema<ToggleGroup.ItemProps> = {
 			description: "Present when the toggle item is disabled."
 		},
 		{
-			name: "b-toggle-group-item",
+			name: "toggle-group-item",
 			description: "Present on the item elements."
 		}
 	]
diff --git a/src/content/api-reference/toggle.ts b/src/content/api-reference/toggle.ts
index 9032bc1a1..f909a6840 100644
--- a/src/content/api-reference/toggle.ts
+++ b/src/content/api-reference/toggle.ts
@@ -37,7 +37,7 @@ const root: APISchema<Toggle.Props> = {
 			description: "Present when the toggle is disabled."
 		},
 		{
-			name: "b-toggle-root",
+			name: "toggle-root",
 			description: "Present on the root element."
 		}
 	]
diff --git a/src/content/api-reference/tooltip.ts b/src/content/api-reference/tooltip.ts
index 1542df460..ffe23daed 100644
--- a/src/content/api-reference/tooltip.ts
+++ b/src/content/api-reference/tooltip.ts
@@ -74,7 +74,7 @@ export const trigger: APISchema<Tooltip.TriggerProps> = {
 			description: "The open state of the tooltip."
 		},
 		{
-			name: "b-tooltip-trigger",
+			name: "tooltip-trigger",
 			description: "Present on the trigger element."
 		}
 	]
@@ -86,7 +86,7 @@ export const content: APISchema<Tooltip.ContentProps> = {
 	props: { ...transitionProps, ...floatingPositioning, asChild },
 	dataAttributes: [
 		{
-			name: "b-tooltip-content",
+			name: "tooltip-content",
 			description: "Present on the content element."
 		}
 	]
@@ -103,7 +103,7 @@ export const arrow: APISchema<Tooltip.ArrowProps> = {
 			description: "Present on the arrow element."
 		},
 		{
-			name: "b-tooltip-arrow",
+			name: "tooltip-arrow",
 			description: "Present on the arrow element."
 		}
 	]
diff --git a/src/lib/bits/button/components/button.svelte b/src/lib/bits/button/components/button.svelte
index 051d97ab6..230aa21a0 100644
--- a/src/lib/bits/button/components/button.svelte
+++ b/src/lib/bits/button/components/button.svelte
@@ -8,7 +8,7 @@
 	export let type: $$Props["type"] = undefined;
 	export let builders: $$Props["builders"] = [];
 	const attrs = {
-		"data-b-button-root": ""
+		"data-button-root": ""
 	};
 </script>
 
diff --git a/src/lib/internal/attrs.ts b/src/lib/internal/attrs.ts
index a9e88f308..97dc3f660 100644
--- a/src/lib/internal/attrs.ts
+++ b/src/lib/internal/attrs.ts
@@ -4,7 +4,7 @@ export function createBitAttrs<T extends readonly string[]>(bit: Bit | "menu", p
 	const attrs: Record<string, Record<string, string>> = {};
 	parts.forEach((part) => {
 		attrs[part] = {
-			[`data-b-${bit}-${part}`]: ""
+			[`data-${bit}-${part}`]: ""
 		};
 	});
 
diff --git a/src/tests/accordion/Accordion.spec.ts b/src/tests/accordion/Accordion.spec.ts
index c83a9adee..72f0d276f 100644
--- a/src/tests/accordion/Accordion.spec.ts
+++ b/src/tests/accordion/Accordion.spec.ts
@@ -58,11 +58,11 @@ describe("Accordion", () => {
 		const item = getByTestId("item");
 		const header = getByTestId("header");
 		const content = getByTestId("content");
-		expect(root).toHaveAttribute("data-b-accordion-root");
-		expect(item).toHaveAttribute("data-b-accordion-item");
-		expect(header).toHaveAttribute("data-b-accordion-header");
-		expect(content).toHaveAttribute("data-b-accordion-content");
-		expect(trigger).toHaveAttribute("data-b-accordion-trigger");
+		expect(root).toHaveAttribute("data-accordion-root");
+		expect(item).toHaveAttribute("data-accordion-item");
+		expect(header).toHaveAttribute("data-accordion-header");
+		expect(content).toHaveAttribute("data-accordion-content");
+		expect(trigger).toHaveAttribute("data-accordion-trigger");
 	});
 
 	it("has expected data attributes", async () => {
@@ -119,7 +119,7 @@ describe("Accordion", () => {
 			expect(itemEl).toHaveAttribute("data-state", "open");
 		}
 		const openItems = Array.from(
-			document.querySelectorAll("[data-state='open'][data-b-accordion-item]")
+			document.querySelectorAll("[data-state='open'][data-accordion-item]")
 		);
 		expect(openItems.length).toBe(1);
 	});
@@ -141,7 +141,7 @@ describe("Accordion", () => {
 			expect(itemEl).toHaveAttribute("data-state", "open");
 		}
 		const openItems = Array.from(
-			document.querySelectorAll("[data-state='open'][data-b-accordion-item]")
+			document.querySelectorAll("[data-state='open'][data-accordion-item]")
 		);
 		expect(openItems.length).toBe(4);
 	});
diff --git a/src/tests/alert-dialog/AlertDialog.spec.ts b/src/tests/alert-dialog/AlertDialog.spec.ts
index 742fab0b5..ed4d1c6d0 100644
--- a/src/tests/alert-dialog/AlertDialog.spec.ts
+++ b/src/tests/alert-dialog/AlertDialog.spec.ts
@@ -56,7 +56,7 @@ describe("Alert Dialog", () => {
 
 		for (const part of parts) {
 			const el = getByTestId(part);
-			expect(el).toHaveAttribute(`data-b-alert-dialog-${part}`);
+			expect(el).toHaveAttribute(`data-alert-dialog-${part}`);
 		}
 	});
 
diff --git a/src/tests/checkbox/Checkbox.spec.ts b/src/tests/checkbox/Checkbox.spec.ts
index a8f9f1aa2..85a6d1ad8 100644
--- a/src/tests/checkbox/Checkbox.spec.ts
+++ b/src/tests/checkbox/Checkbox.spec.ts
@@ -29,8 +29,8 @@ describe("Checkbox", () => {
 	it("has bits data attrs", async () => {
 		const { getByTestId, root } = setup();
 		const indicator = getByTestId("indicator");
-		expect(root).toHaveAttribute("data-b-checkbox-root");
-		expect(indicator).toHaveAttribute("data-b-checkbox-indicator");
+		expect(root).toHaveAttribute("data-checkbox-root");
+		expect(indicator).toHaveAttribute("data-checkbox-indicator");
 	});
 
 	it('defaults the value to "on", when no value prop is passed', async () => {
diff --git a/src/tests/collapsible/Collapsible.spec.ts b/src/tests/collapsible/Collapsible.spec.ts
index 0ed2d2b81..a39b660d8 100644
--- a/src/tests/collapsible/Collapsible.spec.ts
+++ b/src/tests/collapsible/Collapsible.spec.ts
@@ -15,9 +15,9 @@ describe("Collapsible", () => {
 		const root = getByTestId("root");
 		const trigger = getByTestId("trigger");
 		const content = getByTestId("content");
-		expect(root).toHaveAttribute("data-b-collapsible-root");
-		expect(trigger).toHaveAttribute("data-b-collapsible-trigger");
-		expect(content).toHaveAttribute("data-b-collapsible-content");
+		expect(root).toHaveAttribute("data-collapsible-root");
+		expect(trigger).toHaveAttribute("data-collapsible-trigger");
+		expect(content).toHaveAttribute("data-collapsible-content");
 	});
 
 	it("doesnt render content when `open` is false", async () => {
diff --git a/src/tests/context-menu/ContextMenu.spec.ts b/src/tests/context-menu/ContextMenu.spec.ts
index 3fdcb2a58..be20f1e2f 100644
--- a/src/tests/context-menu/ContextMenu.spec.ts
+++ b/src/tests/context-menu/ContextMenu.spec.ts
@@ -76,13 +76,13 @@ describe("Context Menu", () => {
 
 		for (const part of parts) {
 			const el = screen.getByTestId(part);
-			expect(el).toHaveAttribute(`data-b-menu-${part}`);
+			expect(el).toHaveAttribute(`data-menu-${part}`);
 		}
 
 		await user.click(getByTestId("sub-trigger"));
 
 		const subContent = getByTestId("sub-content");
-		expect(subContent).toHaveAttribute(`data-b-menu-sub-content`);
+		expect(subContent).toHaveAttribute(`data-menu-sub-content`);
 	});
 
 	it("Opens when right-clicked & respects binding", async () => {
diff --git a/src/tests/dialog/Dialog.spec.ts b/src/tests/dialog/Dialog.spec.ts
index c4bd771af..f777c7def 100644
--- a/src/tests/dialog/Dialog.spec.ts
+++ b/src/tests/dialog/Dialog.spec.ts
@@ -54,7 +54,7 @@ describe("Dialog", () => {
 
 		for (const part of parts) {
 			const el = getByTestId(part);
-			expect(el).toHaveAttribute(`data-b-dialog-${part}`);
+			expect(el).toHaveAttribute(`data-dialog-${part}`);
 		}
 	});
 
diff --git a/src/tests/dropdown-menu/DropdownMenu.spec.ts b/src/tests/dropdown-menu/DropdownMenu.spec.ts
index c818834f2..6c8f9aa38 100644
--- a/src/tests/dropdown-menu/DropdownMenu.spec.ts
+++ b/src/tests/dropdown-menu/DropdownMenu.spec.ts
@@ -87,13 +87,13 @@ describe("Dropdown Menu", () => {
 
 		for (const part of parts) {
 			const el = screen.getByTestId(part);
-			expect(el).toHaveAttribute(`data-b-menu-${part}`);
+			expect(el).toHaveAttribute(`data-menu-${part}`);
 		}
 
 		await user.click(getByTestId("sub-trigger"));
 
 		const subContent = getByTestId("sub-content");
-		expect(subContent).toHaveAttribute(`data-b-menu-sub-content`);
+		expect(subContent).toHaveAttribute(`data-menu-sub-content`);
 	});
 
 	it.each(OPEN_KEYS)("Opens when %s is pressed & respects binding", async (key) => {
diff --git a/src/tests/label/Label.spec.ts b/src/tests/label/Label.spec.ts
index bdd2314b3..3d090e147 100644
--- a/src/tests/label/Label.spec.ts
+++ b/src/tests/label/Label.spec.ts
@@ -13,7 +13,7 @@ describe("Label", () => {
 	it("has bits data attrs", async () => {
 		const { getByTestId } = render(LabelTest);
 		const root = getByTestId("label");
-		expect(root).toHaveAttribute("data-b-label-root");
+		expect(root).toHaveAttribute("data-label-root");
 	});
 
 	it("renders the label text", async () => {
diff --git a/src/tests/link-preview/LinkPreview.spec.ts b/src/tests/link-preview/LinkPreview.spec.ts
index ffec9f4cd..a21481313 100644
--- a/src/tests/link-preview/LinkPreview.spec.ts
+++ b/src/tests/link-preview/LinkPreview.spec.ts
@@ -34,7 +34,7 @@ describe("Link Preview", () => {
 
 		for (const part of parts) {
 			const el = getByTestId(part);
-			expect(el).toHaveAttribute(`data-b-link-preview-${part}`);
+			expect(el).toHaveAttribute(`data-link-preview-${part}`);
 		}
 	});
 
diff --git a/src/tests/menubar/Menubar.spec.ts b/src/tests/menubar/Menubar.spec.ts
index 42ec86385..1e9097390 100644
--- a/src/tests/menubar/Menubar.spec.ts
+++ b/src/tests/menubar/Menubar.spec.ts
@@ -29,7 +29,7 @@ describe("Menubar", () => {
 		await user.click(trigger);
 
 		const root = getByTestId("root");
-		expect(root).toHaveAttribute("data-b-menubar-root");
+		expect(root).toHaveAttribute("data-menubar-root");
 
 		const parts = [
 			"content",
@@ -48,13 +48,13 @@ describe("Menubar", () => {
 
 		for (const part in parts) {
 			const el = screen.getByTestId(mappedParts[part]);
-			expect(el).toHaveAttribute(`data-b-menu-${parts[part]}`);
+			expect(el).toHaveAttribute(`data-menu-${parts[part]}`);
 		}
 
 		await user.click(getByTestId("1-sub-trigger"));
 
 		const subContent = getByTestId("1-sub-content");
-		expect(subContent).toHaveAttribute(`data-b-menu-sub-content`);
+		expect(subContent).toHaveAttribute(`data-menu-sub-content`);
 	});
 
 	it("navigates triggers within the menubar using arrow keys", async () => {
diff --git a/src/tests/popover/Popover.spec.ts b/src/tests/popover/Popover.spec.ts
index 14b17f019..e73b85b3d 100644
--- a/src/tests/popover/Popover.spec.ts
+++ b/src/tests/popover/Popover.spec.ts
@@ -40,7 +40,7 @@ describe("Popover", () => {
 
 		for (const part of parts) {
 			const el = getByTestId(part);
-			expect(el).toHaveAttribute(`data-b-popover-${part}`);
+			expect(el).toHaveAttribute(`data-popover-${part}`);
 		}
 	});
 
diff --git a/src/tests/progress/Progress.spec.ts b/src/tests/progress/Progress.spec.ts
index a1bb41597..8c5e2c937 100644
--- a/src/tests/progress/Progress.spec.ts
+++ b/src/tests/progress/Progress.spec.ts
@@ -21,7 +21,7 @@ describe("Progress", () => {
 
 	it("has bits data attrs", async () => {
 		const { root } = setup();
-		expect(root).toHaveAttribute("data-b-progress-root");
+		expect(root).toHaveAttribute("data-progress-root");
 	});
 
 	it("respects the value prop", async () => {
diff --git a/src/tests/radio-group/RadioGroup.spec.ts b/src/tests/radio-group/RadioGroup.spec.ts
index 195571a2f..23939da4b 100644
--- a/src/tests/radio-group/RadioGroup.spec.ts
+++ b/src/tests/radio-group/RadioGroup.spec.ts
@@ -56,8 +56,8 @@ describe("Radio Group", () => {
 		const root = getByTestId("root");
 		const item = getByTestId(testItems[0].value + "-item");
 
-		expect(root).toHaveAttribute("data-b-radio-group-root");
-		expect(item).toHaveAttribute("data-b-radio-group-item");
+		expect(root).toHaveAttribute("data-radio-group-root");
+		expect(item).toHaveAttribute("data-radio-group-item");
 	});
 
 	it("changes the value when an item is clicked", async () => {
diff --git a/src/tests/select/Select.spec.ts b/src/tests/select/Select.spec.ts
index f249bd940..34912ee40 100644
--- a/src/tests/select/Select.spec.ts
+++ b/src/tests/select/Select.spec.ts
@@ -67,11 +67,11 @@ describe("Select", () => {
 
 		parts.forEach((part) => {
 			const el = getByTestId(part);
-			expect(el).toHaveAttribute(`data-b-select-${part}`);
+			expect(el).toHaveAttribute(`data-select-${part}`);
 		});
 
 		const item = getByTestId("1");
-		expect(item).toHaveAttribute("data-b-select-item");
+		expect(item).toHaveAttribute("data-select-item");
 		1;
 	});
 
diff --git a/src/tests/separator/Separator.spec.ts b/src/tests/separator/Separator.spec.ts
index 060755f8a..d5e1d080e 100644
--- a/src/tests/separator/Separator.spec.ts
+++ b/src/tests/separator/Separator.spec.ts
@@ -21,6 +21,6 @@ describe("Separator", () => {
 
 	it("has bits data attrs", async () => {
 		const { root } = setup();
-		expect(root).toHaveAttribute("data-b-separator-root");
+		expect(root).toHaveAttribute("data-separator-root");
 	});
 });
diff --git a/src/tests/switch/Switch.spec.ts b/src/tests/switch/Switch.spec.ts
index 6ade66a61..fb6ebc23d 100644
--- a/src/tests/switch/Switch.spec.ts
+++ b/src/tests/switch/Switch.spec.ts
@@ -27,8 +27,8 @@ describe("Switch", () => {
 
 	it("has bits data attrs", async () => {
 		const { root, thumb } = setup();
-		expect(root).toHaveAttribute("data-b-switch-root");
-		expect(thumb).toHaveAttribute("data-b-switch-thumb");
+		expect(root).toHaveAttribute("data-switch-root");
+		expect(thumb).toHaveAttribute("data-switch-thumb");
 	});
 
 	it('defaults the value to "on", when no value prop is passed', async () => {
diff --git a/src/tests/tabs/Tabs.spec.ts b/src/tests/tabs/Tabs.spec.ts
index 37ad09b60..d375581a1 100644
--- a/src/tests/tabs/Tabs.spec.ts
+++ b/src/tests/tabs/Tabs.spec.ts
@@ -58,10 +58,10 @@ describe("Tabs", () => {
 		const trigger = getByTestId("trigger-1");
 		const content = getByTestId("content-1");
 
-		expect(root).toHaveAttribute("data-b-tabs-root");
-		expect(list).toHaveAttribute("data-b-tabs-list");
-		expect(trigger).toHaveAttribute("data-b-tabs-trigger");
-		expect(content).toHaveAttribute("data-b-tabs-content");
+		expect(root).toHaveAttribute("data-tabs-root");
+		expect(list).toHaveAttribute("data-tabs-list");
+		expect(trigger).toHaveAttribute("data-tabs-trigger");
+		expect(content).toHaveAttribute("data-tabs-content");
 	});
 
 	it("switches tabs on click", async () => {
diff --git a/src/tests/toggle-group/ToggleGroup.spec.ts b/src/tests/toggle-group/ToggleGroup.spec.ts
index b7794b362..130ce34d6 100644
--- a/src/tests/toggle-group/ToggleGroup.spec.ts
+++ b/src/tests/toggle-group/ToggleGroup.spec.ts
@@ -62,8 +62,8 @@ describe("Toggle", () => {
 	it("has bits data attrs", async () => {
 		const { root, getByTestId } = setup();
 		const item = getByTestId("item-1");
-		expect(root).toHaveAttribute("data-b-toggle-group-root");
-		expect(item).toHaveAttribute("data-b-toggle-group-item");
+		expect(root).toHaveAttribute("data-toggle-group-root");
+		expect(item).toHaveAttribute("data-toggle-group-item");
 	});
 
 	it("toggles when clicked", async () => {
diff --git a/src/tests/toggle/Toggle.spec.ts b/src/tests/toggle/Toggle.spec.ts
index a870cd0e1..3bacf6b66 100644
--- a/src/tests/toggle/Toggle.spec.ts
+++ b/src/tests/toggle/Toggle.spec.ts
@@ -25,7 +25,7 @@ describe("Toggle", () => {
 
 	it("has bits data attrs", async () => {
 		const { root } = setup();
-		expect(root).toHaveAttribute("data-b-toggle-root");
+		expect(root).toHaveAttribute("data-toggle-root");
 	});
 
 	it("toggles when clicked", async () => {
diff --git a/src/tests/tooltip/Tooltip.spec.ts b/src/tests/tooltip/Tooltip.spec.ts
index 7a97dfc23..643cab728 100644
--- a/src/tests/tooltip/Tooltip.spec.ts
+++ b/src/tests/tooltip/Tooltip.spec.ts
@@ -34,7 +34,7 @@ describe("Tooltip", () => {
 
 		for (const part of parts) {
 			const el = getByTestId(part);
-			expect(el).toHaveAttribute(`data-b-tooltip-${part}`);
+			expect(el).toHaveAttribute(`data-tooltip-${part}`);
 		}
 	});
 

From 2ab5efd9049b9c0578ea35ae59a9941eed4cce71 Mon Sep 17 00:00:00 2001
From: Hunter Johnston <johnstonhuntera@gmail.com>
Date: Wed, 29 Nov 2023 11:35:24 -0500
Subject: [PATCH 154/217] fix: menubar demo hover lag

---
 src/components/demos/menubar-demo.svelte | 52 ++++++++++++------------
 1 file changed, 26 insertions(+), 26 deletions(-)

diff --git a/src/components/demos/menubar-demo.svelte b/src/components/demos/menubar-demo.svelte
index 401e63a16..d12fe9eab 100644
--- a/src/components/demos/menubar-demo.svelte
+++ b/src/components/demos/menubar-demo.svelte
@@ -32,7 +32,7 @@
 			sideOffset={3}
 		>
 			<Menubar.CheckboxItem
-				class="flex h-10 select-none items-center rounded-button py-3 pl-3 pr-1.5 text-sm font-medium outline-none transition-all duration-75 data-[highlighted]:bg-muted"
+				class="flex h-10 select-none items-center rounded-button py-3 pl-3 pr-1.5 text-sm font-medium outline-none data-[highlighted]:bg-muted"
 				bind:checked={pixelGrid}
 			>
 				Pixel grid
@@ -41,7 +41,7 @@
 				</Menubar.CheckboxIndicator>
 			</Menubar.CheckboxItem>
 			<Menubar.CheckboxItem
-				class="flex h-10 select-none items-center rounded-button py-3 pl-3 pr-1.5 text-sm font-medium outline-none transition-all duration-75 data-[highlighted]:bg-muted"
+				class="flex h-10 select-none items-center rounded-button py-3 pl-3 pr-1.5 text-sm font-medium outline-none data-[highlighted]:bg-muted"
 				bind:checked={layoutGrid}
 			>
 				Layout grid
@@ -53,7 +53,7 @@
 			<Menubar.RadioGroup bind:value={view}>
 				<Menubar.RadioItem
 					value="table"
-					class="flex h-10 select-none items-center rounded-button py-3 pl-3 pr-1.5 text-sm font-medium outline-none transition-all duration-75 data-[highlighted]:bg-muted"
+					class="flex h-10 select-none items-center rounded-button py-3 pl-3 pr-1.5 text-sm font-medium outline-none data-[highlighted]:bg-muted"
 				>
 					Table
 					<Menubar.RadioIndicator class="ml-auto">
@@ -62,7 +62,7 @@
 				</Menubar.RadioItem>
 				<Menubar.RadioItem
 					value="board"
-					class="flex h-10 select-none items-center rounded-button py-3 pl-3 pr-1.5 text-sm font-medium outline-none transition-all duration-75 data-[highlighted]:bg-muted"
+					class="flex h-10 select-none items-center rounded-button py-3 pl-3 pr-1.5 text-sm font-medium outline-none data-[highlighted]:bg-muted"
 				>
 					Board
 					<Menubar.RadioIndicator class="ml-auto">
@@ -71,7 +71,7 @@
 				</Menubar.RadioItem>
 				<Menubar.RadioItem
 					value="gallery"
-					class="flex h-10 select-none items-center rounded-button py-3 pl-3 pr-1.5 text-sm font-medium outline-none transition-all duration-75 data-[highlighted]:bg-muted"
+					class="flex h-10 select-none items-center rounded-button py-3 pl-3 pr-1.5 text-sm font-medium outline-none data-[highlighted]:bg-muted"
 				>
 					Gallery
 					<Menubar.RadioIndicator class="ml-auto">
@@ -93,17 +93,17 @@
 			sideOffset={3}
 		>
 			<Menubar.Item
-				class="flex h-10 select-none items-center rounded-button py-3 pl-3 pr-1.5 text-sm font-medium outline-none transition-all duration-75 data-[highlighted]:bg-muted"
+				class="flex h-10 select-none items-center rounded-button py-3 pl-3 pr-1.5 text-sm font-medium outline-none data-[highlighted]:bg-muted"
 				>Undo</Menubar.Item
 			>
 			<Menubar.Item
-				class="flex h-10 select-none items-center rounded-button py-3 pl-3 pr-1.5 text-sm font-medium outline-none transition-all duration-75 data-[highlighted]:bg-muted"
+				class="flex h-10 select-none items-center rounded-button py-3 pl-3 pr-1.5 text-sm font-medium outline-none data-[highlighted]:bg-muted"
 				>Redo</Menubar.Item
 			>
 			<Menubar.Separator />
 			<Menubar.Sub>
 				<Menubar.SubTrigger
-					class="flex h-10 select-none items-center rounded-button py-3 pl-3 pr-1.5 text-sm font-medium outline-none transition-all duration-75 data-[highlighted]:bg-muted data-[state=open]:bg-muted"
+					class="flex h-10 select-none items-center rounded-button py-3 pl-3 pr-1.5 text-sm font-medium outline-none data-[highlighted]:bg-muted data-[state=open]:bg-muted"
 				>
 					Find
 					<div class="ml-auto flex items-center gap-px">
@@ -115,35 +115,35 @@
 					transition={flyAndScale}
 				>
 					<Menubar.Item
-						class="flex h-10 select-none items-center rounded-button py-3 pl-3 pr-1.5 text-sm font-medium outline-none transition-all duration-75 data-[highlighted]:bg-muted"
+						class="flex h-10 select-none items-center rounded-button py-3 pl-3 pr-1.5 text-sm font-medium outline-none data-[highlighted]:bg-muted"
 						>Search the web</Menubar.Item
 					>
 					<Menubar.Separator />
 					<Menubar.Item
-						class="flex h-10 select-none items-center rounded-button py-3 pl-3 pr-1.5 text-sm font-medium outline-none transition-all duration-75 data-[highlighted]:bg-muted"
+						class="flex h-10 select-none items-center rounded-button py-3 pl-3 pr-1.5 text-sm font-medium outline-none data-[highlighted]:bg-muted"
 						>Find...</Menubar.Item
 					>
 					<Menubar.Item
-						class="flex h-10 select-none items-center rounded-button py-3 pl-3 pr-1.5 text-sm font-medium outline-none transition-all duration-75 data-[highlighted]:bg-muted"
+						class="flex h-10 select-none items-center rounded-button py-3 pl-3 pr-1.5 text-sm font-medium outline-none data-[highlighted]:bg-muted"
 						>Find Next</Menubar.Item
 					>
 					<Menubar.Item
-						class="flex h-10 select-none items-center rounded-button py-3 pl-3 pr-1.5 text-sm font-medium outline-none transition-all duration-75 data-[highlighted]:bg-muted"
+						class="flex h-10 select-none items-center rounded-button py-3 pl-3 pr-1.5 text-sm font-medium outline-none data-[highlighted]:bg-muted"
 						>Find Previous</Menubar.Item
 					>
 				</Menubar.SubContent>
 			</Menubar.Sub>
 			<Menubar.Separator />
 			<Menubar.Item
-				class="flex h-10 select-none items-center rounded-button py-3 pl-3 pr-1.5 text-sm font-medium outline-none transition-all duration-75 data-[highlighted]:bg-muted"
+				class="flex h-10 select-none items-center rounded-button py-3 pl-3 pr-1.5 text-sm font-medium outline-none data-[highlighted]:bg-muted"
 				>Cut</Menubar.Item
 			>
 			<Menubar.Item
-				class="flex h-10 select-none items-center rounded-button py-3 pl-3 pr-1.5 text-sm font-medium outline-none transition-all duration-75 data-[highlighted]:bg-muted"
+				class="flex h-10 select-none items-center rounded-button py-3 pl-3 pr-1.5 text-sm font-medium outline-none data-[highlighted]:bg-muted"
 				>Copy</Menubar.Item
 			>
 			<Menubar.Item
-				class="flex h-10 select-none items-center rounded-button py-3 pl-3 pr-1.5 text-sm font-medium outline-none transition-all duration-75 data-[highlighted]:bg-muted"
+				class="flex h-10 select-none items-center rounded-button py-3 pl-3 pr-1.5 text-sm font-medium outline-none data-[highlighted]:bg-muted"
 				>Paste</Menubar.Item
 			>
 		</Menubar.Content>
@@ -160,30 +160,30 @@
 			sideOffset={3}
 		>
 			<Menubar.CheckboxItem
-				class="flex h-10 select-none items-center rounded-button py-3 pl-3 pr-1.5 text-sm font-medium outline-none transition-all duration-75 data-[highlighted]:bg-muted"
+				class="flex h-10 select-none items-center rounded-button py-3 pl-3 pr-1.5 text-sm font-medium outline-none data-[highlighted]:bg-muted"
 				bind:checked={bookmarks}>Show Bookmarks Bar</Menubar.CheckboxItem
 			>
 			<Menubar.CheckboxItem
-				class="flex h-10 select-none items-center rounded-button py-3 pl-3 pr-1.5 text-sm font-medium outline-none transition-all duration-75 data-[highlighted]:bg-muted"
+				class="flex h-10 select-none items-center rounded-button py-3 pl-3 pr-1.5 text-sm font-medium outline-none data-[highlighted]:bg-muted"
 				bind:checked={fullUrls}>Show Full URLs</Menubar.CheckboxItem
 			>
 			<Menubar.Separator />
 			<Menubar.Item
-				class="flex h-10 select-none items-center rounded-button py-3 pl-3 pr-1.5 text-sm font-medium outline-none transition-all duration-75 data-[highlighted]:bg-muted"
+				class="flex h-10 select-none items-center rounded-button py-3 pl-3 pr-1.5 text-sm font-medium outline-none data-[highlighted]:bg-muted"
 				>Reload</Menubar.Item
 			>
 			<Menubar.Item
-				class="flex h-10 select-none items-center rounded-button py-3 pl-3 pr-1.5 text-sm font-medium outline-none transition-all duration-75 data-[highlighted]:bg-muted"
+				class="flex h-10 select-none items-center rounded-button py-3 pl-3 pr-1.5 text-sm font-medium outline-none data-[highlighted]:bg-muted"
 				>Force Reload</Menubar.Item
 			>
 			<Menubar.Separator />
 			<Menubar.Item
-				class="flex h-10 select-none items-center rounded-button py-3 pl-3 pr-1.5 text-sm font-medium outline-none transition-all duration-75 data-[highlighted]:bg-muted"
+				class="flex h-10 select-none items-center rounded-button py-3 pl-3 pr-1.5 text-sm font-medium outline-none data-[highlighted]:bg-muted"
 				>Toggle Fullscreen</Menubar.Item
 			>
 			<Menubar.Separator />
 			<Menubar.Item
-				class="flex h-10 select-none items-center rounded-button py-3 pl-3 pr-1.5 text-sm font-medium outline-none transition-all duration-75 data-[highlighted]:bg-muted"
+				class="flex h-10 select-none items-center rounded-button py-3 pl-3 pr-1.5 text-sm font-medium outline-none data-[highlighted]:bg-muted"
 				>Hide Sidebar</Menubar.Item
 			>
 		</Menubar.Content>
@@ -201,26 +201,26 @@
 		>
 			<Menubar.RadioGroup value={profileRadioValue}>
 				<Menubar.RadioItem
-					class="flex h-10 select-none items-center rounded-button py-3 pl-3 pr-1.5 text-sm font-medium outline-none transition-all duration-75 data-[highlighted]:bg-muted"
+					class="flex h-10 select-none items-center rounded-button py-3 pl-3 pr-1.5 text-sm font-medium outline-none data-[highlighted]:bg-muted"
 					value="andy">Andy</Menubar.RadioItem
 				>
 				<Menubar.RadioItem
-					class="flex h-10 select-none items-center rounded-button py-3 pl-3 pr-1.5 text-sm font-medium outline-none transition-all duration-75 data-[highlighted]:bg-muted"
+					class="flex h-10 select-none items-center rounded-button py-3 pl-3 pr-1.5 text-sm font-medium outline-none data-[highlighted]:bg-muted"
 					value="benoit">Benoit</Menubar.RadioItem
 				>
 				<Menubar.RadioItem
-					class="flex h-10 select-none items-center rounded-button py-3 pl-3 pr-1.5 text-sm font-medium outline-none transition-all duration-75 data-[highlighted]:bg-muted"
+					class="flex h-10 select-none items-center rounded-button py-3 pl-3 pr-1.5 text-sm font-medium outline-none data-[highlighted]:bg-muted"
 					value="Luis">Luis</Menubar.RadioItem
 				>
 			</Menubar.RadioGroup>
 			<Menubar.Separator />
 			<Menubar.Item
-				class="flex h-10 select-none items-center rounded-button py-3 pl-3 pr-1.5 text-sm font-medium outline-none transition-all duration-75 data-[highlighted]:bg-muted"
+				class="flex h-10 select-none items-center rounded-button py-3 pl-3 pr-1.5 text-sm font-medium outline-none data-[highlighted]:bg-muted"
 				>Edit...</Menubar.Item
 			>
 			<Menubar.Separator />
 			<Menubar.Item
-				class="flex h-10 select-none items-center rounded-button py-3 pl-3 pr-1.5 text-sm font-medium outline-none transition-all duration-75 data-[highlighted]:bg-muted"
+				class="flex h-10 select-none items-center rounded-button py-3 pl-3 pr-1.5 text-sm font-medium outline-none data-[highlighted]:bg-muted"
 				>Add Profile...</Menubar.Item
 			>
 		</Menubar.Content>

From a4333664659577b8abf6ab0784276fdf57f09446 Mon Sep 17 00:00:00 2001
From: Hunter Johnston <johnstonhuntera@gmail.com>
Date: Wed, 29 Nov 2023 11:53:38 -0500
Subject: [PATCH 155/217] formatting

---
 src/components/metadata.svelte | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/components/metadata.svelte b/src/components/metadata.svelte
index ea3def4b8..d90c42439 100644
--- a/src/components/metadata.svelte
+++ b/src/components/metadata.svelte
@@ -4,7 +4,9 @@
 
 	export let title: string = siteConfig.name;
 
-	$: title = $page.data?.title ? `${$page.data.title} - ${siteConfig.name}` : siteConfig.name;
+	$: title = $page.data?.title
+		? `${$page.data.title} - ${siteConfig.name}`
+		: siteConfig.name;
 </script>
 
 <svelte:head>

From 60f2558d3342980a85b0caa27d95602a9ca6c6a9 Mon Sep 17 00:00:00 2001
From: Hunter Johnston <johnstonhuntera@gmail.com>
Date: Wed, 29 Nov 2023 12:57:18 -0500
Subject: [PATCH 156/217] date picker structure

---
 content/components/date-picker.md             | 51 +++++++++++++++++++
 src/components/demos/date-picker-demo.svelte  |  4 +-
 .../demos/dropdown-menu-demo.svelte           |  2 +-
 src/lib/bits/date-picker/ctx.ts               |  4 +-
 4 files changed, 55 insertions(+), 6 deletions(-)

diff --git a/content/components/date-picker.md b/content/components/date-picker.md
index 6c074b853..cca65babe 100644
--- a/content/components/date-picker.md
+++ b/content/components/date-picker.md
@@ -16,4 +16,55 @@ description: A date picker component.
 
 ## Structure
 
+```svelte
+<script lang="ts">
+	import { DatePicker } from "bits-ui";
+</script>
+
+<DatePicker.Root>
+	<DatePicker.Label />
+	<DatePicker.Input let:segments>
+		{#each segments as { part, value }}
+			<DatePicker.Segment {part}>
+				{value}
+			</DatePicker.Segment>
+		{/each}
+		<DatePicker.Trigger />
+	</DatePicker.Input>
+	<DatePicker.Content>
+		<DatePicker.Calendar let:months let:daysOfWeek>
+			<DatePicker.CalendarHeader>
+				<DatePicker.CalendarPrevButton />
+				<DatePicker.CalendarHeading />
+				<DatePicker.CalendarNextButton />
+			</DatePicker.CalendarHeader>
+			{#each months as month}
+				<DatePicker.CalendarGrid>
+					<DatePicker.CalendarGridHead>
+						<DatePicker.CalendarGridRow>
+							{#each daysOfWeek as day}
+								<DatePicker.CalendarHeadCell>
+									{day}
+								</DatePicker.CalendarHeadCell>
+							{/each}
+						</DatePicker.CalendarGridRow>
+					</DatePicker.CalendarGridHead>
+					<DatePicker.CalendarGridBody>
+						{#each month.weeks as weekDates}
+							<DatePicker.CalendarGridRow>
+								{#each weekDates as date}
+									<DatePicker.CalendarCell {date}>
+										<DatePicker.CalendarDate {date} month={month.value} />
+									</DatePicker.CalendarCell>
+								{/each}
+							</DatePicker.CalendarGridRow>
+						{/each}
+					</DatePicker.CalendarGridBody>
+				</DatePicker.CalendarGrid>
+			{/each}
+		</DatePicker.Calendar>
+	</DatePicker.Content>
+</DatePicker.Root>
+```
+
 <APISection {schemas} />
diff --git a/src/components/demos/date-picker-demo.svelte b/src/components/demos/date-picker-demo.svelte
index f6e1511a6..bb8451c3b 100644
--- a/src/components/demos/date-picker-demo.svelte
+++ b/src/components/demos/date-picker-demo.svelte
@@ -22,12 +22,12 @@
 				</div>
 			{/each}
 			<DatePicker.Trigger
-				class="ml-auto rounded-[5px] p-1 transition-all hover:bg-dark-10"
+				class="ml-auto rounded-[5px] p-1 transition-all hover:bg-dark-10 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground focus-visible:ring-offset-2 focus-visible:ring-offset-background"
 			>
 				<CalendarBlank class="h-5 w-5" />
 			</DatePicker.Trigger>
 		</DatePicker.Input>
-		<DatePicker.Content sideOffset={8} transition={flyAndScale}>
+		<DatePicker.Content sideOffset={10} transition={flyAndScale}>
 			<DatePicker.Calendar
 				class="rounded-card border border-dark-10 bg-background p-6 shadow-popover"
 				let:months
diff --git a/src/components/demos/dropdown-menu-demo.svelte b/src/components/demos/dropdown-menu-demo.svelte
index 522dca6e7..4a70c7f1e 100644
--- a/src/components/demos/dropdown-menu-demo.svelte
+++ b/src/components/demos/dropdown-menu-demo.svelte
@@ -14,7 +14,7 @@
 
 <DropdownMenu.Root>
 	<DropdownMenu.Trigger
-		class="border-input inline-flex h-10 w-10 items-center justify-center rounded-full border bg-background text-sm font-medium text-foreground shadow-btn transition-all hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground focus-visible:ring-offset-2 focus-visible:ring-offset-background active:scale-98"
+		class="border-input inline-flex h-10 w-10 items-center justify-center rounded-full border border bg-background text-sm font-medium text-foreground shadow-btn transition-all hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground focus-visible:ring-offset-2 focus-visible:ring-offset-background active:scale-98"
 	>
 		<DotsThree class="h-6 w-6 text-foreground" />
 	</DropdownMenu.Trigger>
diff --git a/src/lib/bits/date-picker/ctx.ts b/src/lib/bits/date-picker/ctx.ts
index 280292da9..7807e80ea 100644
--- a/src/lib/bits/date-picker/ctx.ts
+++ b/src/lib/bits/date-picker/ctx.ts
@@ -5,7 +5,7 @@ import { getAttrs as getCalendarAttrs } from "$lib/bits/calendar/ctx.js";
 import { getAttrs as getFieldAttrs } from "$lib/bits/date-field/ctx.js";
 import { getAttrs as getPopoverAttrs } from "$lib/bits/popover/ctx.js";
 import { getPositioningUpdater, type PositioningProps } from "../floating/helpers";
-import { get, type Writable } from "svelte/store";
+import type { Writable } from "svelte/store";
 import type { FloatingConfig } from "../floating/floating-config";
 
 const NAME = "date-picker";
@@ -33,7 +33,6 @@ const defaultPlacement = {
 } satisfies PositioningProps;
 
 export function updatePositioning(props: PositioningProps) {
-	console.log("updating positioning");
 	const withDefaults = { ...defaultPlacement, ...props } satisfies PositioningProps;
 	const {
 		options: { positioning }
@@ -41,5 +40,4 @@ export function updatePositioning(props: PositioningProps) {
 
 	const updater = getPositioningUpdater(positioning as Writable<FloatingConfig>);
 	updater(withDefaults);
-	console.log(get(positioning));
 }

From 5ebdb7610249f8c2de347d4a94f179adc073ccfb Mon Sep 17 00:00:00 2001
From: Hunter Johnston <johnstonhuntera@gmail.com>
Date: Wed, 29 Nov 2023 12:59:14 -0500
Subject: [PATCH 157/217] fix: duplicate style in dropdown

---
 src/components/demos/dropdown-menu-demo.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/demos/dropdown-menu-demo.svelte b/src/components/demos/dropdown-menu-demo.svelte
index 4a70c7f1e..522dca6e7 100644
--- a/src/components/demos/dropdown-menu-demo.svelte
+++ b/src/components/demos/dropdown-menu-demo.svelte
@@ -14,7 +14,7 @@
 
 <DropdownMenu.Root>
 	<DropdownMenu.Trigger
-		class="border-input inline-flex h-10 w-10 items-center justify-center rounded-full border border bg-background text-sm font-medium text-foreground shadow-btn transition-all hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground focus-visible:ring-offset-2 focus-visible:ring-offset-background active:scale-98"
+		class="border-input inline-flex h-10 w-10 items-center justify-center rounded-full border bg-background text-sm font-medium text-foreground shadow-btn transition-all hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground focus-visible:ring-offset-2 focus-visible:ring-offset-background active:scale-98"
 	>
 		<DotsThree class="h-6 w-6 text-foreground" />
 	</DropdownMenu.Trigger>

From 6bb1dd26e003bdb70187047c3aee889864601835 Mon Sep 17 00:00:00 2001
From: Hunter Johnston <johnstonhuntera@gmail.com>
Date: Wed, 29 Nov 2023 12:59:34 -0500
Subject: [PATCH 158/217] fix: dropdown border style

---
 src/components/demos/dropdown-menu-demo.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/demos/dropdown-menu-demo.svelte b/src/components/demos/dropdown-menu-demo.svelte
index 522dca6e7..5d882580f 100644
--- a/src/components/demos/dropdown-menu-demo.svelte
+++ b/src/components/demos/dropdown-menu-demo.svelte
@@ -14,7 +14,7 @@
 
 <DropdownMenu.Root>
 	<DropdownMenu.Trigger
-		class="border-input inline-flex h-10 w-10 items-center justify-center rounded-full border bg-background text-sm font-medium text-foreground shadow-btn transition-all hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground focus-visible:ring-offset-2 focus-visible:ring-offset-background active:scale-98"
+		class="inline-flex h-10 w-10 items-center justify-center rounded-full border border-border-input bg-background text-sm font-medium text-foreground shadow-btn transition-all hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground focus-visible:ring-offset-2 focus-visible:ring-offset-background active:scale-98"
 	>
 		<DotsThree class="h-6 w-6 text-foreground" />
 	</DropdownMenu.Trigger>

From 0ef8567a1f147002fcbbc436aa13ec60b958ff92 Mon Sep 17 00:00:00 2001
From: Hunter Johnston <johnstonhuntera@gmail.com>
Date: Wed, 29 Nov 2023 21:36:31 -0500
Subject: [PATCH 159/217] toggle demo

---
 content/components/calendar.md                |  1 +
 src/components/component-preview.svelte       |  7 ++-
 src/components/demos/accordion-demo.svelte    |  4 +-
 src/components/demos/calendar-demo.svelte     |  6 +--
 src/components/demos/checkbox-demo.svelte     |  8 ++--
 src/components/demos/collapsible-demo.svelte  | 15 +++---
 src/components/demos/context-menu-demo.svelte | 34 ++++++-------
 src/components/demos/date-picker-demo.svelte  |  6 +--
 src/components/demos/dialog-demo.svelte       |  4 +-
 .../demos/dropdown-menu-demo.svelte           | 48 +++++++++----------
 src/components/demos/label-demo.svelte        |  6 +--
 src/components/demos/link-preview-demo.svelte |  8 ++--
 src/components/demos/menubar-demo.svelte      | 12 ++---
 src/components/demos/popover-demo.svelte      | 18 +++----
 src/components/demos/radio-group-demo.svelte  |  8 ++--
 .../demos/range-calendar-demo.svelte          | 14 +++---
 src/components/demos/tabs-demo.svelte         | 28 +++++------
 src/components/demos/toggle-demo.svelte       | 28 ++++++++---
 src/components/demos/toggle-group-demo.svelte |  2 +-
 src/styles/app.postcss                        | 11 ++---
 tailwind.config.ts                            |  3 +-
 21 files changed, 143 insertions(+), 128 deletions(-)

diff --git a/content/components/calendar.md b/content/components/calendar.md
index 416d7bef4..52f5e9d70 100644
--- a/content/components/calendar.md
+++ b/content/components/calendar.md
@@ -27,6 +27,7 @@ description: A calendar component.
 		<Calendar.Heading />
 		<Calendar.NextButton />
 	</Calendar.Header>
+
 	{#each months as month}
 		<Calendar.Grid>
 			<Calendar.GridHead>
diff --git a/src/components/component-preview.svelte b/src/components/component-preview.svelte
index 413a82c02..290e0d5b3 100644
--- a/src/components/component-preview.svelte
+++ b/src/components/component-preview.svelte
@@ -62,7 +62,10 @@
 				{/if}
 			</Tabs.Trigger>
 		</Tabs.List>
-		<Tabs.Content value="code" class="focus-visible:outline-none">
+		<Tabs.Content
+			value="code"
+			class="!focus-visible:ring-0 focus-visible:outline-none"
+		>
 			<div
 				class="![&_pre]:mt-0 ![&_pre]:rounded-card w-full [&_pre]:max-h-[443px] [&_pre]:min-h-[443px] [&_pre]:overflow-auto"
 			>
@@ -71,7 +74,7 @@
 		</Tabs.Content>
 		<Tabs.Content
 			value="preview"
-			class="relative rounded-card border-2 border-muted bg-zinc-50 focus-visible:outline-none  dark:bg-[#1f1f21]"
+			class="!focus-visible:ring-0 relative rounded-card border-2 border-muted bg-zinc-50 focus-visible:outline-none dark:bg-[#1f1f21]"
 		>
 			<div
 				class={cn(
diff --git a/src/components/demos/accordion-demo.svelte b/src/components/demos/accordion-demo.svelte
index bd0b2e070..93c9c8c7a 100644
--- a/src/components/demos/accordion-demo.svelte
+++ b/src/components/demos/accordion-demo.svelte
@@ -31,9 +31,9 @@
 				>
 					{item.title}
 					<span
-						class="inline-flex h-8 w-8 items-center justify-center rounded-[7px] bg-transparent transition-all hover:bg-dark-10"
+						class="inline-flex items-center justify-center rounded-[7px] bg-transparent transition-all sq-8 hover:bg-dark-10"
 					>
-						<CaretDown class="h-[18px] w-[18px] transition-all duration-200" />
+						<CaretDown class="transition-all duration-200 sq-[18px]" />
 					</span>
 				</Accordion.Trigger>
 			</Accordion.Header>
diff --git a/src/components/demos/calendar-demo.svelte b/src/components/demos/calendar-demo.svelte
index 1927f78db..af6568cdf 100644
--- a/src/components/demos/calendar-demo.svelte
+++ b/src/components/demos/calendar-demo.svelte
@@ -30,7 +30,7 @@
 					<Calendar.GridRow class="flex w-full justify-between">
 						{#each daysOfWeek as day}
 							<Calendar.HeadCell
-								class="w-7 rounded-md text-[0.8rem] font-medium text-muted-foreground"
+								class="w-8 rounded-md text-[0.8rem] font-medium text-muted-foreground"
 							>
 								<div>{day}</div>
 							</Calendar.HeadCell>
@@ -43,12 +43,12 @@
 							{#each weekDates as date}
 								<Calendar.Cell
 									{date}
-									class="relative h-7 w-7 p-0 text-center text-sm"
+									class="relative h-8 w-8 p-0 text-center text-sm"
 								>
 									<Calendar.Date
 										{date}
 										month={month.value}
-										class="inline-flex h-7 w-7 items-center justify-center whitespace-nowrap rounded-[7px] bg-background p-0 text-sm font-normal text-foreground ring-offset-background transition-colors hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground focus-visible:ring-offset-2 data-[disabled]:pointer-events-none data-[outside-month]:pointer-events-none data-[selected]:bg-foreground data-[selected]:text-background data-[disabled]:opacity-50 data-[outside-month]:opacity-20 "
+										class="inline-flex h-8 w-8 items-center justify-center whitespace-nowrap rounded-[7px] bg-background p-0 text-sm font-normal text-foreground ring-offset-background transition-colors hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground focus-visible:ring-offset-2 data-[disabled]:pointer-events-none data-[outside-month]:pointer-events-none data-[selected]:bg-foreground data-[selected]:text-background data-[disabled]:opacity-50 data-[outside-month]:opacity-20 "
 									/>
 								</Calendar.Cell>
 							{/each}
diff --git a/src/components/demos/checkbox-demo.svelte b/src/components/demos/checkbox-demo.svelte
index a7759c344..fab923bb6 100644
--- a/src/components/demos/checkbox-demo.svelte
+++ b/src/components/demos/checkbox-demo.svelte
@@ -8,18 +8,18 @@
 	<Checkbox.Root
 		id="terms"
 		aria-labelledby="terms-label"
-		class="peer inline-flex h-[25px] w-[25px] items-center justify-center rounded-md border border-muted bg-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground focus-visible:ring-offset-2 focus-visible:ring-offset-background active:scale-98 data-[state=unchecked]:border-border-input data-[state=unchecked]:bg-background"
+		class="peer inline-flex items-center justify-center rounded-md border border-muted bg-foreground sq-[25px] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground focus-visible:ring-offset-2 focus-visible:ring-offset-background active:scale-98 data-[state=unchecked]:border-border-input data-[state=unchecked]:bg-background"
 		checked="indeterminate"
 	>
 		<Checkbox.Indicator
 			let:isChecked
 			let:isIndeterminate
-			class="inline-flex items-center justify-center"
+			class="inline-flex items-center justify-center text-background"
 		>
 			{#if isChecked}
-				<Check class="h-[15px] w-[15px] text-background" weight="bold" />
+				<Check class="sq-[15px]" weight="bold" />
 			{:else if isIndeterminate}
-				<Minus class="h-[15px] w-[15px] text-background" weight="bold" />
+				<Minus class="sq-[15px]" weight="bold" />
 			{/if}
 		</Checkbox.Indicator>
 	</Checkbox.Root>
diff --git a/src/components/demos/collapsible-demo.svelte b/src/components/demos/collapsible-demo.svelte
index 4bdf174db..4c19b3e5b 100644
--- a/src/components/demos/collapsible-demo.svelte
+++ b/src/components/demos/collapsible-demo.svelte
@@ -8,26 +8,29 @@
 	<div class="flex items-center justify-between space-x-10">
 		<h4 class="text-[15px] font-medium">@huntabyte starred 3 repositories</h4>
 		<Collapsible.Trigger
-			class="inline-flex h-10 w-10 items-center justify-center rounded-[9px] border border-border-input bg-background shadow-btn transition-all hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground focus-visible:ring-offset-2 focus-visible:ring-offset-background active:scale-98"
+			class="inline-flex h-10 w-10 items-center justify-center rounded-[9px] border border-border-input bg-background text-foreground shadow-btn transition-all hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground focus-visible:ring-offset-2 focus-visible:ring-offset-background active:scale-98"
 		>
-			<CaretUpDown class="h-4 w-4 text-foreground" weight="bold" />
+			<CaretUpDown class="sq-4 " weight="bold" />
 			<span class="sr-only">Toggle</span>
 		</Collapsible.Trigger>
 	</div>
 
-	<Collapsible.Content class="space-y-2" transition={slide}>
+	<Collapsible.Content
+		class="space-y-2 font-mono text-[15px] tracking-[0.01em]"
+		transition={slide}
+	>
 		<div
-			class="inline-flex h-12 w-full items-center rounded-[9px] bg-muted px-[18px] py-3 font-mono text-[15px] tracking-[0.01em]"
+			class="inline-flex h-12 w-full items-center rounded-[9px] bg-muted px-[18px] py-3"
 		>
 			@huntabyte/bits-ui
 		</div>
 		<div
-			class="inline-flex h-12 w-full items-center rounded-[9px] bg-muted px-[18px] py-3 font-mono text-[15px] tracking-[0.01em]"
+			class="inline-flex h-12 w-full items-center rounded-[9px] bg-muted px-[18px] py-3"
 		>
 			@huntabyte/shadcn-svelte
 		</div>
 		<div
-			class="inline-flex h-12 w-full items-center rounded-[9px] bg-muted px-[18px] py-3 font-mono text-[15px] tracking-[0.01em]"
+			class="inline-flex h-12 w-full items-center rounded-[9px] bg-muted px-[18px] py-3"
 		>
 			@melt-ui/melt-ui
 		</div>
diff --git a/src/components/demos/context-menu-demo.svelte b/src/components/demos/context-menu-demo.svelte
index cc4222bc2..9a4efc61e 100644
--- a/src/components/demos/context-menu-demo.svelte
+++ b/src/components/demos/context-menu-demo.svelte
@@ -24,7 +24,7 @@
 		transition={flyAndScale}
 	>
 		<ContextMenu.Item
-			class="flex h-10 select-none items-center rounded-button py-3 pl-3 pr-1.5 text-sm font-medium outline-none transition-all duration-75 data-[highlighted]:bg-muted"
+			class="flex h-10 select-none items-center rounded-button py-3 pl-3 pr-1.5 text-sm font-medium outline-none transition-colors data-[highlighted]:bg-muted"
 		>
 			<div class="flex items-center">
 				<PencilSimpleLine class="mr-2 text-foreground-alt sq-5" />
@@ -32,12 +32,12 @@
 			</div>
 			<div class="ml-auto flex items-center gap-px">
 				<kbd
-					class="inline-flex h-5 w-5 items-center justify-center rounded-button border border-dark-10 bg-background text-xs text-muted-foreground shadow-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"
 				>
 					⌘
 				</kbd>
 				<kbd
-					class="inline-flex h-5 w-5 items-center justify-center rounded-button border border-dark-10 bg-background text-[10px] text-muted-foreground shadow-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"
 				>
 					E
 				</kbd>
@@ -45,7 +45,7 @@
 		</ContextMenu.Item>
 		<ContextMenu.Sub>
 			<ContextMenu.SubTrigger
-				class="flex h-10 select-none items-center rounded-button py-3 pl-3 pr-1.5 text-sm font-medium outline-none transition-all duration-75 data-[highlighted]:bg-muted data-[state=open]:bg-muted"
+				class="flex h-10 select-none items-center rounded-button py-3 pl-3 pr-1.5 text-sm font-medium outline-none transition-colors data-[highlighted]:bg-muted data-[state=open]:bg-muted"
 			>
 				<div class="flex items-center">
 					<PlusCircle class="mr-2 text-foreground-alt sq-5" />
@@ -53,51 +53,51 @@
 				</div>
 				<div class="ml-auto flex items-center gap-px">
 					<kbd
-						class="inline-flex h-5 w-5 items-center justify-center rounded-button border border-dark-10 bg-background text-xs text-muted-foreground shadow-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"
 					>
 						⌘
 					</kbd>
 					<kbd
-						class="inline-flex h-5 w-5 items-center justify-center rounded-button border border-dark-10 bg-background text-[10px] text-muted-foreground shadow-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"
 					>
 						N
 					</kbd>
 				</div>
 			</ContextMenu.SubTrigger>
 			<ContextMenu.SubContent
-				class="z-50 w-full max-w-[209px] rounded-xl border border-muted bg-background px-1 py-1.5 shadow-popover outline-none"
+				class="z-50 w-full max-w-[209px] select-none rounded-xl border border-muted bg-background px-1 py-1.5 shadow-popover outline-none"
 				transition={flyAndScale}
 				sideOffset={10}
 			>
 				<ContextMenu.Item
-					class="flex h-10 select-none items-center rounded-button py-3 pl-3 pr-1.5 text-sm font-normal outline-none transition-all duration-75 data-[highlighted]:bg-muted"
+					class="flex h-10 items-center rounded-button py-3 pl-3 pr-1.5 text-sm font-normal outline-none transition-colors data-[highlighted]:bg-muted"
 				>
 					Header
 				</ContextMenu.Item>
 				<ContextMenu.Item
-					class="flex h-10 select-none items-center rounded-button py-3 pl-3 pr-1.5 text-sm font-normal outline-none transition-all duration-75 data-[highlighted]:bg-muted"
+					class="flex h-10 items-center rounded-button py-3 pl-3 pr-1.5 text-sm font-normal outline-none transition-colors data-[highlighted]:bg-muted"
 				>
 					Paragraph
 				</ContextMenu.Item>
 				<ContextMenu.Item
-					class="flex h-10 select-none items-center rounded-button py-3 pl-3 pr-1.5 text-sm font-normal outline-none transition-all duration-75 data-[highlighted]:bg-muted"
+					class="flex h-10 items-center rounded-button py-3 pl-3 pr-1.5 text-sm font-normal outline-none transition-colors data-[highlighted]:bg-muted"
 				>
 					Codeblock
 				</ContextMenu.Item>
 				<ContextMenu.Item
-					class="flex h-10 select-none items-center rounded-button py-3 pl-3 pr-1.5 text-sm font-normal outline-none transition-all duration-75 data-[highlighted]:bg-muted"
+					class="flex h-10 items-center rounded-button py-3 pl-3 pr-1.5 text-sm font-normal outline-none transition-colors data-[highlighted]:bg-muted"
 				>
 					List
 				</ContextMenu.Item>
 				<ContextMenu.Item
-					class="flex h-10 select-none items-center rounded-button py-3 pl-3 pr-1.5 text-sm font-normal outline-none transition-all duration-75 data-[highlighted]:bg-muted"
+					class="flex h-10 items-center rounded-button py-3 pl-3 pr-1.5 text-sm font-normal outline-none transition-colors data-[highlighted]:bg-muted"
 				>
 					Task
 				</ContextMenu.Item>
 			</ContextMenu.SubContent>
 		</ContextMenu.Sub>
 		<ContextMenu.Item
-			class="flex h-10 select-none items-center rounded-button py-3 pl-3 pr-1.5 text-sm font-medium outline-none transition-all duration-75 data-[highlighted]:bg-muted"
+			class="flex h-10 select-none items-center rounded-button py-3 pl-3 pr-1.5 text-sm font-medium outline-none transition-colors data-[highlighted]:bg-muted"
 		>
 			<div class="flex items-center">
 				<CopySimple class="mr-2 text-foreground-alt sq-5" />
@@ -105,20 +105,20 @@
 			</div>
 			<div class="ml-auto flex items-center gap-px">
 				<kbd
-					class="inline-flex h-5 w-5 items-center justify-center rounded-button border border-dark-10 bg-background text-xs text-muted-foreground shadow-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"
 				>
 					⌘
 				</kbd>
 				<kbd
-					class="inline-flex h-5 w-5 items-center justify-center rounded-button border border-dark-10 bg-background text-[10px] text-muted-foreground shadow-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"
 				>
 					D
 				</kbd>
 			</div>
 		</ContextMenu.Item>
-		<ContextMenu.Separator class="my-1 -ml-1 -mr-1 block h-px bg-muted" />
+		<ContextMenu.Separator class="-mx-1 my-1 block h-px bg-muted" />
 		<ContextMenu.Item
-			class="flex h-10 select-none items-center rounded-button py-3 pl-3 pr-1.5 text-sm font-medium outline-none transition-all duration-75 data-[highlighted]:bg-muted"
+			class="flex h-10 select-none items-center rounded-button py-3 pl-3 pr-1.5 text-sm font-medium outline-none transition-colors data-[highlighted]:bg-muted"
 		>
 			<div class="flex items-center">
 				<Trash class="mr-2 text-foreground-alt sq-5" />
diff --git a/src/components/demos/date-picker-demo.svelte b/src/components/demos/date-picker-demo.svelte
index bb8451c3b..553d7a7e6 100644
--- a/src/components/demos/date-picker-demo.svelte
+++ b/src/components/demos/date-picker-demo.svelte
@@ -24,7 +24,7 @@
 			<DatePicker.Trigger
 				class="ml-auto rounded-[5px] p-1 transition-all hover:bg-dark-10 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground focus-visible:ring-offset-2 focus-visible:ring-offset-background"
 			>
-				<CalendarBlank class="h-5 w-5" />
+				<CalendarBlank class="sq-5" />
 			</DatePicker.Trigger>
 		</DatePicker.Input>
 		<DatePicker.Content sideOffset={10} transition={flyAndScale}>
@@ -35,13 +35,13 @@
 			>
 				<DatePicker.CalendarHeader class="flex items-center justify-between">
 					<DatePicker.CalendarPrevButton
-						class="inline-flex h-7 w-7 items-center justify-center rounded-[7px] border border-border-input bg-background shadow-btn transition-all hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground focus-visible:ring-offset-2 focus-visible:ring-offset-background active:scale-98"
+						class="inline-flex items-center justify-center rounded-[7px] border border-border-input bg-background shadow-btn transition-all sq-7 hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground focus-visible:ring-offset-2 focus-visible:ring-offset-background active:scale-98"
 					>
 						<CaretLeft class="h-4 w-4" />
 					</DatePicker.CalendarPrevButton>
 					<DatePicker.CalendarHeading class="font-medium" />
 					<DatePicker.CalendarNextButton
-						class="inline-flex h-7 w-7 items-center justify-center rounded-[7px] border border-border-input bg-background shadow-btn transition-all hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground focus-visible:ring-offset-2 focus-visible:ring-offset-background active:scale-98"
+						class="inline-flex items-center justify-center rounded-[7px] border border-border-input bg-background shadow-btn transition-all sq-7 hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground focus-visible:ring-offset-2 focus-visible:ring-offset-background active:scale-98"
 					>
 						<CaretRight class="h-4 w-4" />
 					</DatePicker.CalendarNextButton>
diff --git a/src/components/demos/dialog-demo.svelte b/src/components/demos/dialog-demo.svelte
index 7a0d71c6c..6ba8f27d1 100644
--- a/src/components/demos/dialog-demo.svelte
+++ b/src/components/demos/dialog-demo.svelte
@@ -44,7 +44,7 @@
 						autocomplete="off"
 					/>
 					<LockKeyOpen
-						class="absolute right-4 top-[14px] h-[22px] w-[22px] text-dark/30"
+						class="absolute right-4 top-[14px] text-dark/30 sq-[22px]"
 					/>
 				</div>
 			</div>
@@ -59,7 +59,7 @@
 				class="absolute right-5 top-5 rounded-md focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground focus-visible:ring-offset-2 focus-visible:ring-offset-background active:scale-98"
 			>
 				<div>
-					<X class="h-5 w-5 text-foreground" />
+					<X class="text-foreground sq-5" />
 					<span class="sr-only">Close</span>
 				</div>
 			</Dialog.Close>
diff --git a/src/components/demos/dropdown-menu-demo.svelte b/src/components/demos/dropdown-menu-demo.svelte
index 5d882580f..51e0168bf 100644
--- a/src/components/demos/dropdown-menu-demo.svelte
+++ b/src/components/demos/dropdown-menu-demo.svelte
@@ -14,7 +14,7 @@
 
 <DropdownMenu.Root>
 	<DropdownMenu.Trigger
-		class="inline-flex h-10 w-10 items-center justify-center rounded-full border border-border-input bg-background text-sm font-medium text-foreground shadow-btn transition-all hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground focus-visible:ring-offset-2 focus-visible:ring-offset-background active:scale-98"
+		class="inline-flex h-10 w-10 items-center justify-center rounded-full border border-border-input bg-background text-sm font-medium text-foreground shadow-btn transition-colors hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground focus-visible:ring-offset-2 focus-visible:ring-offset-background active:scale-98"
 	>
 		<DotsThree class="h-6 w-6 text-foreground" />
 	</DropdownMenu.Trigger>
@@ -24,60 +24,60 @@
 		sideOffset={8}
 	>
 		<DropdownMenu.Item
-			class="flex h-10 select-none items-center rounded-button py-3 pl-3 pr-1.5 text-sm font-medium outline-none transition-all duration-75 data-[highlighted]:bg-muted"
+			class="flex h-10 select-none items-center rounded-button py-3 pl-3 pr-1.5 text-sm font-medium outline-none transition-colors data-[highlighted]:bg-muted"
 		>
 			<div class="flex items-center">
-				<UserCircle class="mr-2 h-4 w-4 text-foreground-alt" />
+				<UserCircle class="mr-2 text-foreground-alt sq-4" />
 				Profile
 			</div>
 			<div class="ml-auto flex items-center gap-px">
 				<kbd
-					class="inline-flex h-5 w-5 items-center justify-center rounded-button border border-dark-10 bg-background text-xs text-muted-foreground shadow-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"
 				>
 					⌘
 				</kbd>
 				<kbd
-					class="inline-flex h-5 w-5 items-center justify-center rounded-button border border-dark-10 bg-background text-[10px] text-muted-foreground shadow-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"
 				>
 					P
 				</kbd>
 			</div>
 		</DropdownMenu.Item>
 		<DropdownMenu.Item
-			class="flex h-10 select-none items-center rounded-button py-3 pl-3 pr-1.5 text-sm font-medium outline-none transition-all duration-75 data-[highlighted]:bg-muted"
+			class="flex h-10 select-none items-center rounded-button py-3 pl-3 pr-1.5 text-sm font-medium outline-none transition-colors data-[highlighted]:bg-muted"
 		>
 			<div class="flex items-center">
-				<Cardholder class="mr-2 h-4 w-4 text-foreground-alt" />
+				<Cardholder class="mr-2 text-foreground-alt sq-4" />
 				Billing
 			</div>
 			<div class="ml-auto flex items-center gap-px">
 				<kbd
-					class="inline-flex h-5 w-5 items-center justify-center rounded-button border border-dark-10 bg-background text-xs text-muted-foreground shadow-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"
 				>
 					⌘
 				</kbd>
 				<kbd
-					class="inline-flex h-5 w-5 items-center justify-center rounded-button border border-dark-10 bg-background text-[10px] text-muted-foreground shadow-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"
 				>
 					B
 				</kbd>
 			</div>
 		</DropdownMenu.Item>
 		<DropdownMenu.Item
-			class="flex h-10 select-none items-center rounded-button py-3 pl-3 pr-1.5 text-sm font-medium outline-none transition-all duration-75 data-[highlighted]:bg-muted"
+			class="flex h-10 select-none items-center rounded-button py-3 pl-3 pr-1.5 text-sm font-medium outline-none transition-colors data-[highlighted]:bg-muted"
 		>
 			<div class="flex items-center">
-				<GearSix class="mr-2 h-4 w-4 text-foreground-alt" />
+				<GearSix class="mr-2 text-foreground-alt sq-4" />
 				Settings
 			</div>
 			<div class="ml-auto flex items-center gap-px">
 				<kbd
-					class="inline-flex h-5 w-5 items-center justify-center rounded-button border border-dark-10 bg-background text-xs text-muted-foreground shadow-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"
 				>
 					⌘
 				</kbd>
 				<kbd
-					class="inline-flex h-5 w-5 items-center justify-center rounded-button border border-dark-10 bg-background text-[10px] text-muted-foreground shadow-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"
 				>
 					S
 				</kbd>
@@ -86,14 +86,14 @@
 		<DropdownMenu.Separator class="my-1 -ml-1 -mr-1 block h-px bg-muted" />
 		<DropdownMenu.Sub>
 			<DropdownMenu.SubTrigger
-				class="flex h-10 select-none items-center rounded-button py-3 pl-3 pr-1.5 text-sm font-medium outline-none transition-all duration-75 data-[highlighted]:bg-muted data-[state=open]:bg-muted"
+				class="flex h-10 select-none items-center rounded-button py-3 pl-3 pr-1.5 text-sm font-medium outline-none transition-colors data-[highlighted]:bg-muted data-[state=open]:bg-muted"
 			>
 				<div class="flex items-center">
-					<UserCirclePlus class="mr-2 h-4 w-4 text-foreground-alt" />
+					<UserCirclePlus class="mr-2 text-foreground-alt sq-4" />
 					Invite users
 				</div>
 				<div class="ml-auto flex items-center gap-px">
-					<CaretRight class="h-4 w-4 text-foreground-alt" />
+					<CaretRight class="text-foreground-alt sq-4" />
 				</div>
 			</DropdownMenu.SubTrigger>
 			<DropdownMenu.SubContent
@@ -102,10 +102,10 @@
 				sideOffset={10}
 			>
 				<DropdownMenu.Item
-					class="flex h-10 select-none items-center rounded-button py-3 pl-3 pr-1.5 text-sm font-medium outline-none transition-all duration-75 data-[highlighted]:bg-muted"
+					class="flex h-10 select-none items-center rounded-button py-3 pl-3 pr-1.5 text-sm font-medium outline-none transition-colors data-[highlighted]:bg-muted"
 				>
 					<Avatar.Root
-						class="relative mr-3 flex h-5 w-5 shrink-0 overflow-hidden rounded-full border border-foreground/50"
+						class="relative mr-3 flex shrink-0 overflow-hidden rounded-full border border-foreground/50 sq-5"
 					>
 						<Avatar.Image
 							src="https://github.com/huntabyte.png"
@@ -120,10 +120,10 @@
 					@huntabyte
 				</DropdownMenu.Item>
 				<DropdownMenu.Item
-					class="flex h-10 select-none items-center rounded-button py-3 pl-3 pr-1.5 text-sm font-medium outline-none transition-all duration-75 data-[highlighted]:bg-muted"
+					class="flex h-10 select-none items-center rounded-button py-3 pl-3 pr-1.5 text-sm font-medium outline-none transition-colors data-[highlighted]:bg-muted"
 				>
 					<Avatar.Root
-						class="relative mr-3 flex h-5 w-5 shrink-0 overflow-hidden rounded-full border border-foreground/50"
+						class="relative mr-3 flex shrink-0 overflow-hidden rounded-full border border-foreground/50 sq-5"
 					>
 						<Avatar.Image
 							src="https://github.com/pavelstianko.png"
@@ -138,10 +138,10 @@
 					@pavel_stianko
 				</DropdownMenu.Item>
 				<DropdownMenu.Item
-					class="flex h-10 select-none items-center rounded-button py-3 pl-3 pr-1.5 text-sm font-medium outline-none transition-all duration-75 data-[highlighted]:bg-muted"
+					class="flex h-10 select-none items-center rounded-button py-3 pl-3 pr-1.5 text-sm font-medium outline-none transition-colors data-[highlighted]:bg-muted"
 				>
 					<Avatar.Root
-						class="relative mr-3 flex h-5 w-5 shrink-0 overflow-hidden rounded-full border border-foreground/50"
+						class="relative mr-3 flex shrink-0 overflow-hidden rounded-full border border-foreground/50 sq-5"
 					>
 						<Avatar.Image
 							src="https://github.com/adriangonz97.png"
@@ -156,10 +156,10 @@
 					@cokakoala_
 				</DropdownMenu.Item>
 				<DropdownMenu.Item
-					class="flex h-10 select-none items-center rounded-button py-3 pl-3 pr-1.5 text-sm font-medium outline-none transition-all duration-75 data-[highlighted]:bg-muted"
+					class="flex h-10 select-none items-center rounded-button py-3 pl-3 pr-1.5 text-sm font-medium outline-none transition-colors data-[highlighted]:bg-muted"
 				>
 					<Avatar.Root
-						class="relative mr-3 flex h-5 w-5 shrink-0 overflow-hidden rounded-full border border-foreground/50"
+						class="relative mr-3 flex shrink-0 overflow-hidden rounded-full border border-foreground/50 sq-5"
 					>
 						<Avatar.Image
 							src="https://github.com/tglide.png"
diff --git a/src/components/demos/label-demo.svelte b/src/components/demos/label-demo.svelte
index 6882b19c4..9717fea44 100644
--- a/src/components/demos/label-demo.svelte
+++ b/src/components/demos/label-demo.svelte
@@ -8,7 +8,7 @@
 	<Checkbox.Root
 		id="terms"
 		aria-labelledby="terms-label"
-		class="peer inline-flex h-[25px] w-[25px] items-center justify-center rounded-md border border-muted bg-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground focus-visible:ring-offset-2 focus-visible:ring-offset-background data-[state=unchecked]:bg-background"
+		class="peer inline-flex items-center justify-center rounded-md border border-muted bg-foreground sq-[25px] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground focus-visible:ring-offset-2 focus-visible:ring-offset-background data-[state=unchecked]:bg-background"
 		checked="indeterminate"
 	>
 		<Checkbox.Indicator
@@ -17,9 +17,9 @@
 			class="inline-flex items-center justify-center"
 		>
 			{#if isChecked}
-				<Check class="h-[15px] w-[15px] text-background" weight="bold" />
+				<Check class="text-background sq-[15px]" weight="bold" />
 			{:else if isIndeterminate}
-				<Minus class="h-[15px] w-[15px] text-background" weight="bold" />
+				<Minus class="text-background sq-[15px]" weight="bold" />
 			{/if}
 		</Checkbox.Indicator>
 	</Checkbox.Root>
diff --git a/src/components/demos/link-preview-demo.svelte b/src/components/demos/link-preview-demo.svelte
index 9e5489ba0..dc1ab4076 100644
--- a/src/components/demos/link-preview-demo.svelte
+++ b/src/components/demos/link-preview-demo.svelte
@@ -11,7 +11,7 @@
 		class="rounded-sm underline-offset-4 hover:underline focus-visible:outline-2 focus-visible:outline-offset-8 focus-visible:outline-black"
 	>
 		<Avatar.Root
-			class="flex h-12 w-12 items-center justify-center rounded-full bg-muted text-[17px] font-medium uppercase text-muted-foreground"
+			class="flex items-center justify-center rounded-full bg-muted text-[17px] font-medium uppercase text-muted-foreground sq-12"
 		>
 			<Avatar.Image src="/avatar-1.png" alt="@huntabyte" />
 			<Avatar.Fallback>HB</Avatar.Fallback>
@@ -23,7 +23,7 @@
 	>
 		<div class="flex space-x-4">
 			<Avatar.Root
-				class="flex h-12 w-12 items-center justify-center rounded-full bg-muted text-[17px] font-medium uppercase text-muted-foreground"
+				class="flex items-center justify-center rounded-full bg-muted text-[17px] font-medium uppercase text-muted-foreground sq-12"
 			>
 				<Avatar.Image src="/avatar-1.png" alt="@huntabyte" />
 				<Avatar.Fallback>HB</Avatar.Fallback>
@@ -35,11 +35,11 @@
 					class="flex items-center gap-[21px] pt-2 text-xs text-muted-foreground"
 				>
 					<div class="flex items-center text-xs">
-						<MapPin class="mr-1 h-4 w-4" />
+						<MapPin class="mr-1 sq-4" />
 						<span> FL, USA </span>
 					</div>
 					<div class="flex items-center text-xs">
-						<CalendarBlank class="mr-1 h-4 w-4" />
+						<CalendarBlank class="mr-1 sq-4" />
 						<span> Joined May 2020</span>
 					</div>
 				</div>
diff --git a/src/components/demos/menubar-demo.svelte b/src/components/demos/menubar-demo.svelte
index d12fe9eab..c86edde7f 100644
--- a/src/components/demos/menubar-demo.svelte
+++ b/src/components/demos/menubar-demo.svelte
@@ -18,7 +18,7 @@
 	class="flex h-12 items-center gap-1 rounded-[10px] border border-dark-10 bg-background px-[3px] shadow-mini"
 >
 	<div class="px-[10px]">
-		<Cat class="h-6 w-6" />
+		<Cat class="sq-6" />
 	</div>
 	<Menubar.Menu>
 		<Menubar.Trigger
@@ -37,7 +37,7 @@
 			>
 				Pixel grid
 				<Menubar.CheckboxIndicator class="ml-auto ">
-					<Check class="h-5 w-5" />
+					<Check class="sq-5" />
 				</Menubar.CheckboxIndicator>
 			</Menubar.CheckboxItem>
 			<Menubar.CheckboxItem
@@ -46,7 +46,7 @@
 			>
 				Layout grid
 				<Menubar.CheckboxIndicator class="ml-auto">
-					<Check class="h-5 w-5" />
+					<Check class="sq-5" />
 				</Menubar.CheckboxIndicator>
 			</Menubar.CheckboxItem>
 			<Menubar.Separator class="my-1 -ml-1 -mr-1 block h-px bg-muted" />
@@ -57,7 +57,7 @@
 				>
 					Table
 					<Menubar.RadioIndicator class="ml-auto">
-						<Check class="h-5 w-5" />
+						<Check class="sq-5" />
 					</Menubar.RadioIndicator>
 				</Menubar.RadioItem>
 				<Menubar.RadioItem
@@ -66,7 +66,7 @@
 				>
 					Board
 					<Menubar.RadioIndicator class="ml-auto">
-						<Check class="h-5 w-5" />
+						<Check class="sq-5" />
 					</Menubar.RadioIndicator>
 				</Menubar.RadioItem>
 				<Menubar.RadioItem
@@ -75,7 +75,7 @@
 				>
 					Gallery
 					<Menubar.RadioIndicator class="ml-auto">
-						<Check class="h-5 w-5" />
+						<Check class="sq-5" />
 					</Menubar.RadioIndicator>
 				</Menubar.RadioItem>
 			</Menubar.RadioGroup>
diff --git a/src/components/demos/popover-demo.svelte b/src/components/demos/popover-demo.svelte
index 45ccf2fc7..f2cc2f67d 100644
--- a/src/components/demos/popover-demo.svelte
+++ b/src/components/demos/popover-demo.svelte
@@ -24,9 +24,9 @@
 	>
 		<div class="flex items-center">
 			<div
-				class="mr-[13px] flex h-12 w-12 items-center justify-center rounded-full bg-muted"
+				class="mr-[13px] flex items-center justify-center rounded-full bg-muted sq-12"
 			>
-				<Cookie class="h-6 w-6" />
+				<Cookie class="sq-6" />
 			</div>
 			<div class="flex flex-col">
 				<h4 class="text-[17px] font-semibold tracking-[-0.01em]">
@@ -40,18 +40,18 @@
 		<Separator.Root class="-mx-5 mb-7 mt-[17px] block h-px bg-muted" />
 		<div class="flex flex-col gap-7 pb-10 pl-2 pr-[2px]">
 			<div class="flex w-full items-center justify-between">
-				<div class="flex flex-col gap-0.5">
+				<div class="flex flex-col gap-0.5 font-medium">
 					<div class="flex items-center gap-1.5">
-						<Label.Root for="necessary" class="text-sm font-medium"
+						<Label.Root for="necessary" class="text-sm"
 							>Strictly necessary</Label.Root
 						>
 						<div
-							class="inline-flex h-5 items-center justify-center rounded-[30px] bg-accent px-2 text-[11px] font-medium text-accent-foreground"
+							class="inline-flex h-5 items-center justify-center rounded-[30px] bg-accent px-2 text-[11px] text-accent-foreground"
 						>
 							required
 						</div>
 					</div>
-					<p class="text-[13px] font-medium text-muted-foreground">
+					<p class="text-[13px] text-muted-foreground">
 						These cookies are essential
 					</p>
 				</div>
@@ -87,12 +87,12 @@
 				</Switch.Root>
 			</div>
 			<div class="flex w-full items-center justify-between">
-				<div class="flex flex-col gap-0.5">
-					<Label.Root for="shopping" class="text-sm font-medium"
+				<div class="flex flex-col gap-0.5 font-medium">
+					<Label.Root for="shopping" class="text-sm"
 						>Shopping cookies</Label.Root
 					>
 
-					<p class="text-[13px] font-medium text-muted-foreground">
+					<p class="text-[13px] text-muted-foreground">
 						These cookies are non-essential
 					</p>
 				</div>
diff --git a/src/components/demos/radio-group-demo.svelte b/src/components/demos/radio-group-demo.svelte
index 3e29d3ab5..5d0fb27d5 100644
--- a/src/components/demos/radio-group-demo.svelte
+++ b/src/components/demos/radio-group-demo.svelte
@@ -2,7 +2,7 @@
 	import { RadioGroup, Label } from "$lib";
 </script>
 
-<RadioGroup.Root class="flex flex-col gap-4">
+<RadioGroup.Root class="flex flex-col gap-4 text-sm font-medium">
 	<div
 		class="group flex cursor-pointer select-none items-center gap-3 text-foreground/50 transition-colors [&:has([data-state=checked])]:text-foreground"
 	>
@@ -11,7 +11,7 @@
 			value="amazing"
 			class="shrink-0 rounded-full border-2 border-foreground/40 ring-offset-1 transition-all duration-200 sq-5 focus:outline-none focus-visible:ring-2 focus-visible:ring-foreground/70 data-[state=checked]:border-6 data-[state=checked]:border-foreground data-[state=checked]:group-hover:border-foreground"
 		/>
-		<Label.Root for="amazing" class="text-sm font-medium">Amazing</Label.Root>
+		<Label.Root for="amazing">Amazing</Label.Root>
 	</div>
 	<div
 		class="group flex cursor-pointer select-none items-center gap-3 text-foreground/50 transition-colors [&:has([data-state=checked])]:text-foreground"
@@ -21,7 +21,7 @@
 			value="average"
 			class="shrink-0 rounded-full border-2 border-foreground/40 ring-offset-1 transition-all duration-200 sq-5 focus:outline-none focus-visible:ring-2 focus-visible:ring-foreground/70 data-[state=checked]:border-6 data-[state=checked]:border-foreground data-[state=checked]:group-hover:border-foreground "
 		/>
-		<Label.Root for="average" class="text-sm font-medium">Average</Label.Root>
+		<Label.Root for="average">Average</Label.Root>
 	</div>
 	<div
 		class="group flex cursor-pointer select-none items-center gap-3 text-foreground/50 transition-colors [&:has([data-state=checked])]:text-foreground"
@@ -31,6 +31,6 @@
 			value="terrible"
 			class="shrink-0 rounded-full border-2 border-foreground/40 ring-offset-1 transition-all duration-200 sq-5 focus:outline-none focus-visible:ring-2 focus-visible:ring-foreground/70 data-[state=checked]:border-6 data-[state=checked]:border-foreground data-[state=checked]:group-hover:border-foreground"
 		/>
-		<Label.Root for="terrible" class="text-sm font-medium">Terrible</Label.Root>
+		<Label.Root for="terrible">Terrible</Label.Root>
 	</div>
 </RadioGroup.Root>
diff --git a/src/components/demos/range-calendar-demo.svelte b/src/components/demos/range-calendar-demo.svelte
index 54b2fef3f..12d8cc738 100644
--- a/src/components/demos/range-calendar-demo.svelte
+++ b/src/components/demos/range-calendar-demo.svelte
@@ -10,15 +10,15 @@
 >
 	<RangeCalendar.Header class="flex items-center justify-between">
 		<RangeCalendar.PrevButton
-			class="inline-flex h-7 w-7 items-center justify-center rounded-[7px] border border-border-input bg-background shadow-btn transition-all hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground focus-visible:ring-offset-2 focus-visible:ring-offset-background active:scale-98"
+			class="inline-flex items-center justify-center rounded-[7px] border border-border-input bg-background shadow-btn transition-all sq-7 hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground focus-visible:ring-offset-2 focus-visible:ring-offset-background active:scale-98"
 		>
-			<CaretLeft class="h-4 w-4" />
+			<CaretLeft class="sq-4" />
 		</RangeCalendar.PrevButton>
 		<RangeCalendar.Heading class="font-medium" />
 		<RangeCalendar.NextButton
-			class="inline-flex h-7 w-7 items-center justify-center rounded-[7px] border border-border-input bg-background shadow-btn transition-all hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground focus-visible:ring-offset-2 focus-visible:ring-offset-background active:scale-98"
+			class="inline-flex items-center justify-center rounded-[7px] border border-border-input bg-background shadow-btn transition-all sq-7 hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground focus-visible:ring-offset-2 focus-visible:ring-offset-background active:scale-98"
 		>
-			<CaretRight class="h-4 w-4" />
+			<CaretRight class="sq-4" />
 		</RangeCalendar.NextButton>
 	</RangeCalendar.Header>
 	<div
@@ -30,7 +30,7 @@
 					<RangeCalendar.GridRow class="flex w-full justify-between">
 						{#each daysOfWeek as day}
 							<RangeCalendar.HeadCell
-								class="w-7 rounded-md text-[0.8rem] font-medium text-muted-foreground"
+								class="w-8 rounded-md text-[0.8rem] font-medium text-muted-foreground"
 							>
 								<div>{day}</div>
 							</RangeCalendar.HeadCell>
@@ -43,12 +43,12 @@
 							{#each weekDates as date}
 								<RangeCalendar.Cell
 									{date}
-									class="relative p-0 text-center text-sm sq-7 focus-within:relative focus-within:z-20"
+									class="relative p-0 text-center text-sm sq-8 focus-within:relative focus-within:z-20"
 								>
 									<RangeCalendar.Date
 										{date}
 										month={month.value}
-										class="inline-flex items-center justify-center whitespace-nowrap rounded-[5px] bg-background p-0 text-sm font-normal text-foreground ring-offset-background transition-colors sq-7 hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground focus-visible:ring-offset-2 data-[disabled]:pointer-events-none data-[outside-month]:pointer-events-none data-[highlighted]:bg-muted data-[selected]:bg-foreground data-[selection-end]:bg-foreground data-[selection-start]:bg-foreground data-[selected]:text-background data-[disabled]:opacity-50 data-[outside-month]:opacity-20"
+										class="inline-flex items-center justify-center whitespace-nowrap rounded-[5px] bg-background p-0 text-sm font-normal text-foreground ring-offset-background transition-colors sq-8 hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground focus-visible:ring-offset-2 data-[disabled]:pointer-events-none data-[outside-month]:pointer-events-none data-[highlighted]:bg-muted data-[selected]:bg-foreground data-[selection-end]:bg-foreground data-[selection-start]:bg-foreground data-[selected]:text-background data-[disabled]:opacity-50 data-[outside-month]:opacity-20"
 									/>
 								</RangeCalendar.Cell>
 							{/each}
diff --git a/src/components/demos/tabs-demo.svelte b/src/components/demos/tabs-demo.svelte
index e5a7e10e9..466c2bf64 100644
--- a/src/components/demos/tabs-demo.svelte
+++ b/src/components/demos/tabs-demo.svelte
@@ -9,16 +9,16 @@
 		class="w-[428px] rounded-card border border-muted bg-background p-6 shadow-card"
 	>
 		<Tabs.List
-			class="grid w-full grid-cols-2 gap-1 rounded-[9px] bg-dark-4 p-1 shadow-mini-inset"
+			class="grid w-full grid-cols-2 gap-1 rounded-[9px] bg-dark-4 p-1 text-sm font-semibold leading-[0.01em] shadow-mini-inset"
 		>
 			<Tabs.Trigger
 				value="login"
-				class="h-8 rounded-[7px] bg-transparent py-2 text-sm font-semibold leading-[0.01em] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground focus-visible:ring-offset-2 focus-visible:ring-offset-background data-[state=active]:bg-white data-[state=active]:shadow-mini dark:data-[state=active]:bg-background"
+				class="h-8 rounded-[7px] bg-transparent py-2 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground focus-visible:ring-offset-2 focus-visible:ring-offset-background data-[state=active]:bg-white data-[state=active]:shadow-mini dark:data-[state=active]:bg-background"
 				>Login</Tabs.Trigger
 			>
 			<Tabs.Trigger
 				value="register"
-				class="h-8 rounded-[7px] bg-transparent py-2 text-sm font-semibold leading-[0.01em] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground focus-visible:ring-offset-2 focus-visible:ring-offset-background data-[state=active]:bg-white data-[state=active]:shadow-mini dark:data-[state=active]:bg-background"
+				class="h-8 rounded-[7px] bg-transparent py-2 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground focus-visible:ring-offset-2 focus-visible:ring-offset-background data-[state=active]:bg-white data-[state=active]:shadow-mini dark:data-[state=active]:bg-background"
 				>Register</Tabs.Trigger
 			>
 		</Tabs.List>
@@ -31,38 +31,32 @@
 					to access all your data
 				</p>
 			</div>
-			<div class="flex flex-col gap-4 pt-5">
+			<div class="flex flex-col gap-4 pt-5 text-sm">
 				<div class="flex flex-col gap-1">
-					<Label.Root
-						for="username"
-						class="text-sm font-medium text-foreground"
-					>
+					<Label.Root for="username" class="font-medium text-foreground">
 						Username
 					</Label.Root>
 					<input
 						type="text"
 						id="username"
 						placeholder="name@example.com"
-						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-dark-10 bg-background px-4 placeholder:text-foreground-alt/50 focus:outline-none focus:ring-2 focus:ring-foreground focus:ring-offset-2 focus:ring-offset-background"
 					/>
 				</div>
 				<div class="flex flex-col gap-1">
-					<Label.Root
-						for="password"
-						class="text-sm font-medium text-foreground"
-					>
+					<Label.Root for="password" class="font-medium text-foreground">
 						Password
 					</Label.Root>
 					<div class="relative w-full">
 						<input
 							id="password"
-							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-dark-10 bg-background px-4 placeholder:text-foreground-alt/50 focus:outline-none focus:ring-2 focus:ring-foreground focus:ring-offset-2 focus:ring-offset-background"
 							placeholder="super_secret"
 							type="password"
 							autocomplete="off"
 						/>
 						<LockKeyOpen
-							class="absolute right-4 top-[14px] h-[22px] w-[22px] text-dark/30"
+							class="absolute right-4 top-[14px] text-dark/30 sq-[22px]"
 						/>
 					</div>
 				</div>
@@ -113,7 +107,7 @@
 							autocomplete="off"
 						/>
 						<LockKeyOpen
-							class="absolute right-4 top-[14px] h-[22px] w-[22px] text-dark/30"
+							class="absolute right-4 top-[14px] text-dark/30 sq-[22px]"
 						/>
 					</div>
 				</div>
@@ -133,7 +127,7 @@
 							autocomplete="off"
 						/>
 						<LockKeyOpen
-							class="absolute right-4 top-[14px] h-[22px] w-[22px] text-dark/30"
+							class="absolute right-4 top-[14px] text-dark/30 sq-[22px]"
 						/>
 					</div>
 				</div>
diff --git a/src/components/demos/toggle-demo.svelte b/src/components/demos/toggle-demo.svelte
index 564b91cb8..f42a45039 100644
--- a/src/components/demos/toggle-demo.svelte
+++ b/src/components/demos/toggle-demo.svelte
@@ -1,11 +1,27 @@
 <script lang="ts">
-	import { TextB } from "phosphor-svelte";
+	import { LockKeyOpen } from "phosphor-svelte";
 	import { Toggle } from "$lib";
+
+	let unlocked = true;
+	let code = "1985";
+	$: code = unlocked ? "1985" : "••••";
 </script>
 
-<Toggle.Root
-	aria-label="toggle bold"
-	class="inline-flex items-center justify-center rounded-[9px] bg-background transition-all sq-10 hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground focus-visible:ring-offset-2 focus-visible:ring-offset-background active:scale-98 data-[state=on]:bg-muted"
+<div
+	class="min-h-input flex h-full w-[176px] items-center gap-2 rounded-card-sm border border-muted bg-background py-1 pl-[18px] pr-1.5 shadow-mini"
 >
-	<TextB class="h-6 w-6" />
-</Toggle.Root>
+	<div
+		class="text-end font-alt text-[19px] tracking-[13.87px] {unlocked
+			? 'text-foreground'
+			: 'text-muted-foreground'}"
+	>
+		{code}
+	</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-muted data-[state=on]:bg-muted  active:data-[state=on]:bg-dark-10"
+		bind:pressed={unlocked}
+	>
+		<LockKeyOpen class="sq-6" />
+	</Toggle.Root>
+</div>
diff --git a/src/components/demos/toggle-group-demo.svelte b/src/components/demos/toggle-group-demo.svelte
index 6e6985cde..67e39039b 100644
--- a/src/components/demos/toggle-group-demo.svelte
+++ b/src/components/demos/toggle-group-demo.svelte
@@ -9,7 +9,7 @@
 	<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 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground focus-visible:ring-offset-2 focus-visible:ring-offset-background active:scale-98 data-[state=on]:bg-muted"
+		class="inline-flex items-center justify-center rounded-[9px] bg-background transition-all sq-10 hover:bg-muted  active:scale-98 data-[state=on]:bg-muted"
 	>
 		<TextB class="sq-6" />
 	</ToggleGroup.Item>
diff --git a/src/styles/app.postcss b/src/styles/app.postcss
index 1731650ff..ea075fb61 100644
--- a/src/styles/app.postcss
+++ b/src/styles/app.postcss
@@ -125,13 +125,10 @@
 }
 
 @layer components {
-	.button-gradient {
-		background: linear-gradient(0deg, #000 0%, #000 100%), hsla(var(--dark));
-	}
-
-	.dark {
-		& .button-gradient {
-			background: linear-gradient(0deg, #fff 0%, #fff 100%), hsla(var(--dark));
+	*:not(body) {
+		outline: none !important;
+		&:focus-visible {
+			@apply focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground focus-visible:ring-offset-2 focus-visible:ring-offset-background;
 		}
 	}
 
diff --git a/tailwind.config.ts b/tailwind.config.ts
index af3344f82..1d4c37df0 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -48,7 +48,8 @@ export default {
 			},
 			fontFamily: {
 				sans: ["Inter", ...fontFamily.sans],
-				mono: ["Source Code Pro", ...fontFamily.mono]
+				mono: ["Source Code Pro", ...fontFamily.mono],
+				alt: ["Courier", ...fontFamily.sans]
 			},
 			borderWidth: {
 				6: "6px"

From 44840db03048096c47b4c0290f652a4521c0bb91 Mon Sep 17 00:00:00 2001
From: Hunter Johnston <johnstonhuntera@gmail.com>
Date: Wed, 29 Nov 2023 21:42:00 -0500
Subject: [PATCH 160/217] toggle group demo

---
 src/components/demos/toggle-group-demo.svelte | 21 ++++++++++++++-----
 1 file changed, 16 insertions(+), 5 deletions(-)

diff --git a/src/components/demos/toggle-group-demo.svelte b/src/components/demos/toggle-group-demo.svelte
index 67e39039b..255c2a205 100644
--- a/src/components/demos/toggle-group-demo.svelte
+++ b/src/components/demos/toggle-group-demo.svelte
@@ -1,23 +1,34 @@
 <script lang="ts">
 	import { ToggleGroup } from "$lib";
-	import { TextB, TextItalic } from "phosphor-svelte";
+	import { TextB, TextItalic, TextStrikethrough } from "phosphor-svelte";
 
-	let value: string[] | undefined = undefined;
+	let value: string[] | undefined = ["bold"];
 </script>
 
-<ToggleGroup.Root bind:value type="multiple">
+<ToggleGroup.Root
+	bind:value
+	type="multiple"
+	class="flex h-input items-center gap-x-0.5 rounded-card-sm border border-muted bg-background px-[5px] py-1 shadow-mini"
+>
 	<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 data-[state=on]:bg-muted"
+		class="inline-flex items-center justify-center rounded-[9px] bg-background transition-all sq-10 hover:bg-muted active:scale-98 data-[state=on]:bg-muted"
 	>
 		<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 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground focus-visible:ring-offset-2 focus-visible:ring-offset-background active:scale-98 data-[state=on]:bg-muted"
+		class="inline-flex items-center justify-center rounded-[9px] bg-background transition-all sq-10 hover:bg-muted active:scale-98 data-[state=on]:bg-muted"
 	>
 		<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 data-[state=on]:bg-muted"
+	>
+		<TextStrikethrough class="sq-6" />
+	</ToggleGroup.Item>
 </ToggleGroup.Root>

From dbf59e1e7553850dea8a751c89df91a715ee52ac Mon Sep 17 00:00:00 2001
From: Hunter Johnston <johnstonhuntera@gmail.com>
Date: Wed, 29 Nov 2023 21:48:02 -0500
Subject: [PATCH 161/217] fix: dialog mobile padding

---
 src/components/demos/alert-dialog-demo.svelte | 2 +-
 src/components/demos/dialog-demo.svelte       | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/demos/alert-dialog-demo.svelte b/src/components/demos/alert-dialog-demo.svelte
index 19eb2e973..c8c58de81 100644
--- a/src/components/demos/alert-dialog-demo.svelte
+++ b/src/components/demos/alert-dialog-demo.svelte
@@ -20,7 +20,7 @@
 		/>
 		<AlertDialog.Content
 			transition={flyAndScale}
-			class="fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 rounded-card-lg border bg-background p-7 shadow-popover outline-none md:w-full"
+			class="fixed left-[50%] top-[50%] z-50 grid w-full max-w-[94%] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-card-lg border bg-background p-7 shadow-popover outline-none sm:max-w-lg md:w-full"
 		>
 			<div class="flex flex-col gap-4 pb-6">
 				<AlertDialog.Title class="text-lg font-semibold tracking-tight"
diff --git a/src/components/demos/dialog-demo.svelte b/src/components/demos/dialog-demo.svelte
index 6ba8f27d1..0b2452ddd 100644
--- a/src/components/demos/dialog-demo.svelte
+++ b/src/components/demos/dialog-demo.svelte
@@ -21,7 +21,7 @@
 		/>
 		<Dialog.Content
 			transition={flyAndScale}
-			class="fixed left-[50%] top-[50%] z-50 w-full max-w-[490px] translate-x-[-50%] translate-y-[-50%] rounded-card-lg border bg-background p-5 shadow-popover outline-none md:w-full"
+			class="fixed left-[50%] top-[50%] z-50 w-full max-w-[94%] translate-x-[-50%] translate-y-[-50%] rounded-card-lg border bg-background p-5 shadow-popover outline-none sm:max-w-[490px] md:w-full"
 		>
 			<Dialog.Title
 				class="flex w-full items-center justify-center text-lg font-semibold tracking-tight"

From ace86debd911f4b9f1ddd0e97ac7605fc94d43d5 Mon Sep 17 00:00:00 2001
From: Hunter Johnston <johnstonhuntera@gmail.com>
Date: Wed, 29 Nov 2023 22:02:00 -0500
Subject: [PATCH 162/217] styles

---
 src/components/demos/date-field-demo.svelte   |  2 +-
 src/components/demos/date-picker-demo.svelte  | 22 ++++++++++---------
 .../demos/date-range-field-demo.svelte        |  4 ++--
 src/components/demos/label-demo.svelte        |  8 +++----
 4 files changed, 19 insertions(+), 17 deletions(-)

diff --git a/src/components/demos/date-field-demo.svelte b/src/components/demos/date-field-demo.svelte
index 456a52906..db951bb8f 100644
--- a/src/components/demos/date-field-demo.svelte
+++ b/src/components/demos/date-field-demo.svelte
@@ -13,7 +13,7 @@
 				<div class="inline-block select-none">
 					<DateField.Segment
 						{part}
-						class="rounded-[3px] px-1 focus-visible:bg-foreground focus-visible:font-medium focus-visible:text-background focus-visible:outline-none data-[segment=literal]:px-px data-[segment=literal]:text-muted-foreground"
+						class="rounded-[3px] px-1 data-[segment=literal]:px-px data-[segment=literal]:text-muted-foreground"
 					>
 						{value}
 					</DateField.Segment>
diff --git a/src/components/demos/date-picker-demo.svelte b/src/components/demos/date-picker-demo.svelte
index 553d7a7e6..51c6d09c7 100644
--- a/src/components/demos/date-picker-demo.svelte
+++ b/src/components/demos/date-picker-demo.svelte
@@ -6,28 +6,30 @@
 
 <DatePicker.Root>
 	<div class="flex min-w-[200px] flex-col gap-1">
-		<DatePicker.Label class="block select-none">Check-in date</DatePicker.Label>
+		<DatePicker.Label class="block select-none font-medium"
+			>Birthday</DatePicker.Label
+		>
 		<DatePicker.Input
 			let:segments
-			class="flex h-input w-full max-w-[300px] select-none items-center rounded-input border border-border-input bg-background p-3 text-sm shadow-mini"
+			class="flex h-input w-full max-w-[300px] select-none items-center rounded-input border border-border-input bg-background py-3 pl-3 pr-1 text-sm shadow-mini"
 		>
 			{#each segments as { part, value }}
 				<div class="inline-block select-none">
 					<DatePicker.Segment
 						{part}
-						class="rounded-[3px] px-1 focus-visible:bg-foreground focus-visible:font-medium focus-visible:text-background focus-visible:outline-none data-[segment=literal]:px-px data-[segment=literal]:text-muted-foreground"
+						class="rounded-[3px] px-1 data-[segment=literal]:px-px data-[segment=literal]:text-muted-foreground"
 					>
 						{value}
 					</DatePicker.Segment>
 				</div>
 			{/each}
 			<DatePicker.Trigger
-				class="ml-auto rounded-[5px] p-1 transition-all hover:bg-dark-10 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground focus-visible:ring-offset-2 focus-visible:ring-offset-background"
+				class="ml-auto inline-flex items-center justify-center rounded-[5px] transition-all sq-9 hover:bg-muted active:bg-dark-10"
 			>
 				<CalendarBlank class="sq-5" />
 			</DatePicker.Trigger>
 		</DatePicker.Input>
-		<DatePicker.Content sideOffset={10} transition={flyAndScale}>
+		<DatePicker.Content sideOffset={6} transition={flyAndScale}>
 			<DatePicker.Calendar
 				class="rounded-card border border-dark-10 bg-background p-6 shadow-popover"
 				let:months
@@ -35,13 +37,13 @@
 			>
 				<DatePicker.CalendarHeader class="flex items-center justify-between">
 					<DatePicker.CalendarPrevButton
-						class="inline-flex items-center justify-center rounded-[7px] border border-border-input bg-background shadow-btn transition-all sq-7 hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground focus-visible:ring-offset-2 focus-visible:ring-offset-background active:scale-98"
+						class="inline-flex items-center justify-center rounded-[7px] border border-border-input bg-background shadow-btn transition-all sq-7 hover:bg-muted active:scale-98"
 					>
 						<CaretLeft class="h-4 w-4" />
 					</DatePicker.CalendarPrevButton>
 					<DatePicker.CalendarHeading class="font-medium" />
 					<DatePicker.CalendarNextButton
-						class="inline-flex items-center justify-center rounded-[7px] border border-border-input bg-background shadow-btn transition-all sq-7 hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground focus-visible:ring-offset-2 focus-visible:ring-offset-background active:scale-98"
+						class="inline-flex items-center justify-center rounded-[7px] border border-border-input bg-background shadow-btn transition-all sq-7 hover:bg-muted active:scale-98"
 					>
 						<CaretRight class="h-4 w-4" />
 					</DatePicker.CalendarNextButton>
@@ -57,7 +59,7 @@
 								<DatePicker.CalendarGridRow class="flex w-full justify-between">
 									{#each daysOfWeek as day}
 										<DatePicker.CalendarHeadCell
-											class="w-7 rounded-md text-[0.8rem] font-medium text-muted-foreground"
+											class="w-8 rounded-md text-[0.8rem] font-medium text-muted-foreground"
 										>
 											<div>{day}</div>
 										</DatePicker.CalendarHeadCell>
@@ -72,12 +74,12 @@
 										{#each weekDates as date}
 											<DatePicker.CalendarCell
 												{date}
-												class="relative p-0 text-center text-sm sq-7 focus-within:relative focus-within:z-20"
+												class="relative p-0 text-center text-sm sq-8 focus-within:relative focus-within:z-20"
 											>
 												<DatePicker.CalendarDate
 													{date}
 													month={month.value}
-													class="inline-flex items-center justify-center whitespace-nowrap rounded-[7px] bg-background p-0 text-sm font-normal text-foreground ring-offset-background transition-colors sq-7 hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground focus-visible:ring-offset-2 data-[disabled]:pointer-events-none data-[outside-month]:pointer-events-none data-[selected]:bg-foreground data-[selected]:text-background data-[disabled]:opacity-50 data-[outside-month]:opacity-20 "
+													class="inline-flex items-center justify-center whitespace-nowrap rounded-[7px] bg-background p-0 text-sm font-normal text-foreground ring-offset-background transition-colors sq-8 hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground focus-visible:ring-offset-2 data-[disabled]:pointer-events-none data-[outside-month]:pointer-events-none data-[selected]:bg-foreground data-[selected]:text-background data-[disabled]:opacity-50 data-[outside-month]:opacity-20 "
 												/>
 											</DatePicker.CalendarCell>
 										{/each}
diff --git a/src/components/demos/date-range-field-demo.svelte b/src/components/demos/date-range-field-demo.svelte
index 3646679f0..ef5415b9f 100644
--- a/src/components/demos/date-range-field-demo.svelte
+++ b/src/components/demos/date-range-field-demo.svelte
@@ -16,7 +16,7 @@
 					<DateRangeField.Segment
 						type="start"
 						{part}
-						class="rounded-[3px] px-1 focus-visible:bg-foreground focus-visible:font-medium focus-visible:text-background focus-visible:outline-none data-[segment=literal]:px-px data-[segment=literal]:text-muted-foreground"
+						class="rounded-[3px] px-1 data-[segment=literal]:px-px data-[segment=literal]:text-muted-foreground"
 					>
 						{value}
 					</DateRangeField.Segment>
@@ -28,7 +28,7 @@
 					<DateRangeField.Segment
 						type="end"
 						{part}
-						class="rounded-[3px] px-1 focus-visible:bg-foreground focus-visible:font-medium focus-visible:text-background focus-visible:outline-none data-[segment=literal]:px-px data-[segment=literal]:text-muted-foreground"
+						class="rounded-[3px] px-1 data-[segment=literal]:px-px data-[segment=literal]:text-muted-foreground"
 					>
 						{value}
 					</DateRangeField.Segment>
diff --git a/src/components/demos/label-demo.svelte b/src/components/demos/label-demo.svelte
index 9717fea44..fab923bb6 100644
--- a/src/components/demos/label-demo.svelte
+++ b/src/components/demos/label-demo.svelte
@@ -8,18 +8,18 @@
 	<Checkbox.Root
 		id="terms"
 		aria-labelledby="terms-label"
-		class="peer inline-flex items-center justify-center rounded-md border border-muted bg-foreground sq-[25px] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground focus-visible:ring-offset-2 focus-visible:ring-offset-background data-[state=unchecked]:bg-background"
+		class="peer inline-flex items-center justify-center rounded-md border border-muted bg-foreground sq-[25px] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground focus-visible:ring-offset-2 focus-visible:ring-offset-background active:scale-98 data-[state=unchecked]:border-border-input data-[state=unchecked]:bg-background"
 		checked="indeterminate"
 	>
 		<Checkbox.Indicator
 			let:isChecked
 			let:isIndeterminate
-			class="inline-flex items-center justify-center"
+			class="inline-flex items-center justify-center text-background"
 		>
 			{#if isChecked}
-				<Check class="text-background sq-[15px]" weight="bold" />
+				<Check class="sq-[15px]" weight="bold" />
 			{:else if isIndeterminate}
-				<Minus class="text-background sq-[15px]" weight="bold" />
+				<Minus class="sq-[15px]" weight="bold" />
 			{/if}
 		</Checkbox.Indicator>
 	</Checkbox.Root>

From d7357426576a59df0b2ebd8e37d6e5ac3ba9e60c Mon Sep 17 00:00:00 2001
From: Hunter Johnston <johnstonhuntera@gmail.com>
Date: Wed, 29 Nov 2023 22:03:33 -0500
Subject: [PATCH 163/217] more style

---
 src/components/demos/calendar-demo.svelte       | 4 ++--
 src/components/demos/range-calendar-demo.svelte | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/demos/calendar-demo.svelte b/src/components/demos/calendar-demo.svelte
index af6568cdf..651a6174f 100644
--- a/src/components/demos/calendar-demo.svelte
+++ b/src/components/demos/calendar-demo.svelte
@@ -10,13 +10,13 @@
 >
 	<Calendar.Header class="flex items-center justify-between">
 		<Calendar.PrevButton
-			class="inline-flex h-7 w-7 items-center justify-center rounded-[7px] border border-border-input bg-background shadow-btn transition-all hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground focus-visible:ring-offset-2 focus-visible:ring-offset-background active:scale-98"
+			class="inline-flex items-center justify-center rounded-[7px] border border-border-input bg-background shadow-btn transition-all sq-7 hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground focus-visible:ring-offset-2 focus-visible:ring-offset-background active:scale-98"
 		>
 			<CaretLeft class="h-4 w-4" />
 		</Calendar.PrevButton>
 		<Calendar.Heading class="font-medium" />
 		<Calendar.NextButton
-			class="inline-flex h-7 w-7 items-center justify-center rounded-[7px] border border-border-input bg-background shadow-btn transition-all hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground focus-visible:ring-offset-2 focus-visible:ring-offset-background active:scale-98"
+			class="inline-flex items-center justify-center rounded-[7px] border border-border-input bg-background shadow-btn transition-all sq-7 hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground focus-visible:ring-offset-2 focus-visible:ring-offset-background active:scale-98"
 		>
 			<CaretRight class="h-4 w-4" />
 		</Calendar.NextButton>
diff --git a/src/components/demos/range-calendar-demo.svelte b/src/components/demos/range-calendar-demo.svelte
index 12d8cc738..9cd593faa 100644
--- a/src/components/demos/range-calendar-demo.svelte
+++ b/src/components/demos/range-calendar-demo.svelte
@@ -39,7 +39,7 @@
 				</RangeCalendar.GridHead>
 				<RangeCalendar.GridBody>
 					{#each month.weeks as weekDates}
-						<RangeCalendar.GridRow class="mt-0.5 flex w-full gap-0.5">
+						<RangeCalendar.GridRow class="mt-1 flex w-full gap-0.5">
 							{#each weekDates as date}
 								<RangeCalendar.Cell
 									{date}

From 26e976d2bbec3977e5fc6d4407bdd24d205a25bc Mon Sep 17 00:00:00 2001
From: Hunter Johnston <johnstonhuntera@gmail.com>
Date: Wed, 29 Nov 2023 22:09:05 -0500
Subject: [PATCH 164/217] more stuff

---
 content/introduction.md                 | 7 +++----
 src/components/demos/toggle-demo.svelte | 3 +--
 2 files changed, 4 insertions(+), 6 deletions(-)

diff --git a/content/introduction.md b/content/introduction.md
index 10b60390a..1559e7a5b 100644
--- a/content/introduction.md
+++ b/content/introduction.md
@@ -3,15 +3,14 @@ title: Introduction
 description: A collection of headless components for Svelte, built with Melt UI builders.
 ---
 
-Bits are headless component primitives that provide a simple interface for composing your own components. They have been thoughtfully designed to prioritize simplicity, customizability, and compatibility with any styling or UI framework you choose to work with.
+Bits UI is a collection of headless component primitives that enable you to build your own custom components. They have been thoughtfully designed to prioritize simplicity without compromising customizability.
 
-Under the hood, these components are powered by [Melt UI](https://melt-ui.com), which provides an even lower-level builder API for creating headless components. Bits take that API and wrap it in a more familiar component interface which allows us to handle some quality of life improvements for you.
-
-While our goal has been to keep the APIs as close to Melt's as possible, there are some slight differences, so be sure to check out the documentation for the Bit you're interested in to understand how it works.
+Under the hood, most of these components are powered by [Melt UI](https://melt-ui.com), which provides an even lower-level builder API for creating headless components. We take that API and wrap it in a more familiar component interface, which allows us to handle some quality of life improvements for you.
 
 ## Credits
 
 - [Melt UI](https://melt-ui.com) - The underlying builder API that powers Bits.
 - [Radix UI](https://radix-ui.com) - The de-facto standard for headless APIs that we've strived to follow.
+- [React Spectrum](https://react-spectrum.adobe.com) - Another incredible collection of headless components we've taken inspiration from.
 
 🚧 **UNDER CONSTRUCTION** 🚧
diff --git a/src/components/demos/toggle-demo.svelte b/src/components/demos/toggle-demo.svelte
index f42a45039..193148723 100644
--- a/src/components/demos/toggle-demo.svelte
+++ b/src/components/demos/toggle-demo.svelte
@@ -2,8 +2,7 @@
 	import { LockKeyOpen } from "phosphor-svelte";
 	import { Toggle } from "$lib";
 
-	let unlocked = true;
-	let code = "1985";
+	let unlocked = false;
 	$: code = unlocked ? "1985" : "••••";
 </script>
 

From 66cb61a4dca82c4c017ef3d9cba7f959258c69ae Mon Sep 17 00:00:00 2001
From: Hunter Johnston <johnstonhuntera@gmail.com>
Date: Wed, 29 Nov 2023 22:28:17 -0500
Subject: [PATCH 165/217] enum data attr

---
 src/content/api-reference/accordion.ts            |  7 +++++--
 src/content/api-reference/alert-dialog.ts         |  3 ++-
 src/content/api-reference/aspect-ratio.ts         |  8 +++++++-
 src/content/api-reference/calendar.ts             |  3 ---
 src/content/api-reference/checkbox.ts             |  6 +++---
 src/content/api-reference/collapsible.ts          | 15 ++++++++-------
 src/content/api-reference/dialog.ts               |  6 ++++--
 src/content/api-reference/label.ts                |  2 +-
 src/content/api-reference/link-preview.ts         |  7 ++++---
 src/content/api-reference/menu.ts                 |  6 ++++--
 src/content/api-reference/popover.ts              |  7 ++++---
 src/content/api-reference/progress.ts             |  3 ++-
 src/content/api-reference/radio-group.ts          |  2 ++
 src/content/api-reference/range-calendar.ts       |  3 ---
 src/content/api-reference/select.ts               |  4 +++-
 src/content/api-reference/separator.ts            |  3 ++-
 src/content/api-reference/slider.ts               |  3 ++-
 src/content/api-reference/switch.ts               |  6 ++++--
 src/content/api-reference/tabs.ts                 |  6 ++++--
 src/content/api-reference/toggle-group.ts         |  3 ++-
 src/content/api-reference/toggle.ts               |  3 ++-
 src/content/api-reference/tooltip.ts              |  4 ++--
 .../aspect-ratio/components/aspect-ratio.svelte   |  6 ++++++
 src/types/api.ts                                  |  1 +
 24 files changed, 74 insertions(+), 43 deletions(-)

diff --git a/src/content/api-reference/accordion.ts b/src/content/api-reference/accordion.ts
index 606a435ad..619d9ae2e 100644
--- a/src/content/api-reference/accordion.ts
+++ b/src/content/api-reference/accordion.ts
@@ -114,7 +114,8 @@ const content: APISchema<Accordion.ContentProps> = {
 		{
 			name: "state",
 			value: enums("open", "closed"),
-			description: "The state of the accordion item."
+			description: "The state of the accordion item.",
+			isEnum: true
 		},
 		{
 			name: "disabled",
@@ -148,7 +149,9 @@ const header: APISchema<Accordion.HeaderProps> = {
 	dataAttributes: [
 		{
 			name: "heading-level",
-			description: "The heading level of the header."
+			value: enums("1", "2", "3", "4", "5", "6"),
+			description: "The heading level of the header.",
+			isEnum: true
 		},
 		{
 			name: "accordion-header",
diff --git a/src/content/api-reference/alert-dialog.ts b/src/content/api-reference/alert-dialog.ts
index f4271e0cd..8f9c57855 100644
--- a/src/content/api-reference/alert-dialog.ts
+++ b/src/content/api-reference/alert-dialog.ts
@@ -143,7 +143,8 @@ const overlay: APISchema<AlertDialog.OverlayProps> = {
 		{
 			name: "state",
 			value: enums("open", "closed"),
-			description: "The state of the alert dialog."
+			description: "The state of the alert dialog.",
+			isEnum: true
 		},
 		{
 			name: "alert-dialog-overlay",
diff --git a/src/content/api-reference/aspect-ratio.ts b/src/content/api-reference/aspect-ratio.ts
index a66efba46..06cd2a6a8 100644
--- a/src/content/api-reference/aspect-ratio.ts
+++ b/src/content/api-reference/aspect-ratio.ts
@@ -11,7 +11,13 @@ const root: APISchema<AspectRatio.Props> = {
 			default: "1",
 			description: "The desired aspect ratio."
 		}
-	}
+	},
+	dataAttributes: [
+		{
+			name: "aspect-ratio-root",
+			description: "Present on the element."
+		}
+	]
 };
 
 export const aspectRatio = [root];
diff --git a/src/content/api-reference/calendar.ts b/src/content/api-reference/calendar.ts
index 2ff23d3bf..5a64f235d 100644
--- a/src/content/api-reference/calendar.ts
+++ b/src/content/api-reference/calendar.ts
@@ -163,17 +163,14 @@ const date: APISchema<Calendar.DateProps> = {
 	dataAttributes: [
 		{
 			name: "disabled",
-			value: "",
 			description: "Present on the element when the date is disabled."
 		},
 		{
 			name: "selected",
-			value: "",
 			description: "Present on the element when the date is selected."
 		},
 		{
 			name: "unavailable",
-			value: "",
 			description: "Present on the element when the date is unavailable."
 		},
 		{
diff --git a/src/content/api-reference/checkbox.ts b/src/content/api-reference/checkbox.ts
index 3fd308790..ae1456976 100644
--- a/src/content/api-reference/checkbox.ts
+++ b/src/content/api-reference/checkbox.ts
@@ -47,13 +47,13 @@ export const root: APISchema<Checkbox.Props> = {
 	dataAttributes: [
 		{
 			name: "disabled",
-			description: "Present when the checkbox is disabled.",
-			value: "''"
+			description: "Present when the checkbox is disabled."
 		},
 		{
 			name: "state",
 			value: enums("checked", "unchecked", "indeterminate"),
-			description: "The checkbox's state. Can be 'checked', 'unchecked', or 'indeterminate'."
+			description: "The checkbox's state. Can be 'checked', 'unchecked', or 'indeterminate'.",
+			isEnum: true
 		},
 		{
 			name: "checkbox-root",
diff --git a/src/content/api-reference/collapsible.ts b/src/content/api-reference/collapsible.ts
index 429111270..47c29384e 100644
--- a/src/content/api-reference/collapsible.ts
+++ b/src/content/api-reference/collapsible.ts
@@ -31,13 +31,13 @@ export const root: APISchema<Collapsible.Props> = {
 	dataAttributes: [
 		{
 			name: "disabled",
-			description: "Present when the checkbox is disabled.",
-			value: "''"
+			description: "Present when the checkbox is disabled."
 		},
 		{
 			name: "state",
 			value: enums("open", "closed"),
-			description: "The collapsible's open state."
+			description: "The collapsible's open state.",
+			isEnum: true
 		},
 		{
 			name: "collapsible-root",
@@ -53,13 +53,13 @@ export const trigger: APISchema<Collapsible.TriggerProps> = {
 	dataAttributes: [
 		{
 			name: "disabled",
-			description: "Present when the checkbox is disabled.",
-			value: "''"
+			description: "Present when the checkbox is disabled."
 		},
 		{
 			name: "state",
 			value: enums("open", "closed"),
-			description: "The collapsible's open state."
+			description: "The collapsible's open state.",
+			isEnum: true
 		},
 		{
 			name: "collapsible-trigger",
@@ -86,7 +86,8 @@ export const content: APISchema<Collapsible.ContentProps> = {
 		{
 			name: "state",
 			value: enums("open", "closed"),
-			description: "The collapsible's open state."
+			description: "The collapsible's open state.",
+			isEnum: true
 		},
 		{
 			name: "collapsible-content",
diff --git a/src/content/api-reference/dialog.ts b/src/content/api-reference/dialog.ts
index 607e25046..1d18e1ffa 100644
--- a/src/content/api-reference/dialog.ts
+++ b/src/content/api-reference/dialog.ts
@@ -67,7 +67,8 @@ export const content: APISchema<Dialog.ContentProps> = {
 		{
 			name: "state",
 			value: enums("open", "closed"),
-			description: "The state of the dialog."
+			description: "The state of the dialog.",
+			isEnum: true
 		},
 		{
 			name: "dialog-content",
@@ -129,7 +130,8 @@ export const overlay: APISchema<Dialog.OverlayProps> = {
 		{
 			name: "state",
 			value: enums("open", "closed"),
-			description: "The state of the dialog."
+			description: "The state of the dialog.",
+			isEnum: true
 		},
 		{
 			name: "dialog-overlay",
diff --git a/src/content/api-reference/label.ts b/src/content/api-reference/label.ts
index 205c983d2..e8f7be2d2 100644
--- a/src/content/api-reference/label.ts
+++ b/src/content/api-reference/label.ts
@@ -8,7 +8,7 @@ export const root: APISchema<Label.Props> = {
 	props: { asChild },
 	dataAttributes: [
 		{
-			name: "labelroot",
+			name: "label-root",
 			description: "Present on the root element."
 		}
 	]
diff --git a/src/content/api-reference/link-preview.ts b/src/content/api-reference/link-preview.ts
index e5c8e20e6..986767e9c 100644
--- a/src/content/api-reference/link-preview.ts
+++ b/src/content/api-reference/link-preview.ts
@@ -61,7 +61,8 @@ export const trigger: APISchema<LinkPreview.TriggerProps> = {
 		{
 			name: "state",
 			value: enums("open", "closed"),
-			description: "The open state of the link preview."
+			description: "The open state of the link preview.",
+			isEnum: true
 		},
 		{
 			name: "link-preview-trigger",
@@ -78,7 +79,8 @@ export const content: APISchema<LinkPreview.ContentProps> = {
 		{
 			name: "state",
 			value: enums("open", "closed"),
-			description: "The open state of the link preview."
+			description: "The open state of the link preview.",
+			isEnum: true
 		},
 		{
 			name: "link-preview-content",
@@ -94,7 +96,6 @@ export const arrow: APISchema<LinkPreview.ArrowProps> = {
 	dataAttributes: [
 		{
 			name: "arrow",
-			value: "",
 			description: "Present on the arrow element."
 		},
 		{
diff --git a/src/content/api-reference/menu.ts b/src/content/api-reference/menu.ts
index 23a7885f2..e6feabece 100644
--- a/src/content/api-reference/menu.ts
+++ b/src/content/api-reference/menu.ts
@@ -269,7 +269,8 @@ const checkboxItemAttrs: DataAttrs = [
 	{
 		name: "state",
 		value: enums("checked", "unchecked", "indeterminate"),
-		description: "The checkbox menu item's checked state."
+		description: "The checkbox menu item's checked state.",
+		isEnum: true
 	}
 ];
 
@@ -285,7 +286,8 @@ const radioItemAttrs: DataAttrs = [
 	{
 		name: "state",
 		value: enums("checked", "unchecked"),
-		description: "The radio menu item's checked state."
+		description: "The radio menu item's checked state.",
+		isEnum: true
 	},
 	{
 		name: "value",
diff --git a/src/content/api-reference/popover.ts b/src/content/api-reference/popover.ts
index 9cac7dc36..543d62b5b 100644
--- a/src/content/api-reference/popover.ts
+++ b/src/content/api-reference/popover.ts
@@ -68,7 +68,8 @@ export const trigger: APISchema<Popover.TriggerProps> = {
 		{
 			name: "state",
 			value: enums("open", "closed"),
-			description: "The open state of the link preview."
+			description: "The open state of the link preview.",
+			isEnum: true
 		},
 		{
 			name: "popover-trigger",
@@ -85,7 +86,8 @@ export const content: APISchema<Popover.ContentProps> = {
 		{
 			name: "state",
 			value: enums("open", "closed"),
-			description: "The open state of the popover."
+			description: "The open state of the popover.",
+			isEnum: true
 		},
 		{
 			name: "popover-content",
@@ -114,7 +116,6 @@ export const arrow: APISchema<Popover.ArrowProps> = {
 	dataAttributes: [
 		{
 			name: "arrow",
-			value: "",
 			description: "Present on the arrow element."
 		},
 		{
diff --git a/src/content/api-reference/progress.ts b/src/content/api-reference/progress.ts
index df344d698..a77ed9ae7 100644
--- a/src/content/api-reference/progress.ts
+++ b/src/content/api-reference/progress.ts
@@ -35,7 +35,8 @@ export const root: APISchema<Progress.Props> = {
 		{
 			name: "state",
 			description: "The current state of the progress bar.",
-			value: enums("indeterminate", "complete", "loading")
+			value: enums("indeterminate", "complete", "loading"),
+			isEnum: true
 		},
 		{
 			name: "max",
diff --git a/src/content/api-reference/radio-group.ts b/src/content/api-reference/radio-group.ts
index f91c74d4a..051eaa7a7 100644
--- a/src/content/api-reference/radio-group.ts
+++ b/src/content/api-reference/radio-group.ts
@@ -89,11 +89,13 @@ export const item: APISchema<RadioGroup.ItemProps> = {
 		{
 			name: "state",
 			value: enums("checked", "unchecked"),
+			isEnum: true,
 			description: "The radio item's checked state."
 		},
 		{
 			name: "orientation",
 			value: enums("vertical", "horizontal"),
+			isEnum: true,
 			description: "The orientation of the parent radio group."
 		},
 		{
diff --git a/src/content/api-reference/range-calendar.ts b/src/content/api-reference/range-calendar.ts
index 1ab1b88aa..e8aa3748d 100644
--- a/src/content/api-reference/range-calendar.ts
+++ b/src/content/api-reference/range-calendar.ts
@@ -161,17 +161,14 @@ const date: APISchema<RangeCalendar.DateProps> = {
 	dataAttributes: [
 		{
 			name: "disabled",
-			value: "",
 			description: "Present on the element when the date is disabled."
 		},
 		{
 			name: "selected",
-			value: "",
 			description: "Present on the element when the date is selected."
 		},
 		{
 			name: "unavailable",
-			value: "",
 			description: "Present on the element when the date is unavailable."
 		},
 		{
diff --git a/src/content/api-reference/select.ts b/src/content/api-reference/select.ts
index 2edf4f9c3..36af2c43d 100644
--- a/src/content/api-reference/select.ts
+++ b/src/content/api-reference/select.ts
@@ -111,6 +111,7 @@ export const trigger: APISchema<Select.TriggerProps> = {
 		{
 			name: "state",
 			value: enums("open", "closed"),
+			isEnum: true,
 			description: "The dropdown menu's open state."
 		},
 		{
@@ -159,8 +160,9 @@ export const item: APISchema<Select.ItemProps> = {
 	dataAttributes: [
 		{
 			name: "state",
+			description: "The state of the item.",
 			value: enums("selected", "hovered"),
-			description: "The state of the item."
+			isEnum: true
 		},
 		{
 			name: "disabled",
diff --git a/src/content/api-reference/separator.ts b/src/content/api-reference/separator.ts
index 7a061be3a..c1d9a4b3d 100644
--- a/src/content/api-reference/separator.ts
+++ b/src/content/api-reference/separator.ts
@@ -26,8 +26,9 @@ export const root: APISchema<Separator.Props> = {
 	dataAttributes: [
 		{
 			name: "orientation",
+			description: "The orientation of the separator.",
 			value: enums("horizontal", "vertical"),
-			description: "The orientation of the separator."
+			isEnum: true
 		},
 		{
 			name: "separator-root",
diff --git a/src/content/api-reference/slider.ts b/src/content/api-reference/slider.ts
index 04b4998e1..9eb7f6c00 100644
--- a/src/content/api-reference/slider.ts
+++ b/src/content/api-reference/slider.ts
@@ -52,8 +52,9 @@ const root: APISchema<Slider.Props> = {
 	dataAttributes: [
 		{
 			name: "orientation",
+			description: "The orientation of the slider.",
 			value: enums("horizontal", "vertical"),
-			description: "The orientation of the slider."
+			isEnum: true
 		},
 		{
 			name: "slider-root",
diff --git a/src/content/api-reference/switch.ts b/src/content/api-reference/switch.ts
index bb3832673..7214c45d3 100644
--- a/src/content/api-reference/switch.ts
+++ b/src/content/api-reference/switch.ts
@@ -54,8 +54,9 @@ const root: APISchema<Switch.Props> = {
 	dataAttributes: [
 		{
 			name: "state",
+			description: "The switch's checked state.",
 			value: enums("checked", "unchecked"),
-			description: "The switch's checked state."
+			isEnum: true
 		},
 		{
 			name: "checked",
@@ -81,8 +82,9 @@ const thumb: APISchema<Switch.ThumbProps> = {
 	dataAttributes: [
 		{
 			name: "state",
+			description: "The switch's checked state.",
 			value: enums("checked", "unchecked"),
-			description: "The switch's checked state."
+			isEnum: true
 		},
 		{
 			name: "checked",
diff --git a/src/content/api-reference/tabs.ts b/src/content/api-reference/tabs.ts
index d9edf1ec9..f7f800bbb 100644
--- a/src/content/api-reference/tabs.ts
+++ b/src/content/api-reference/tabs.ts
@@ -97,8 +97,9 @@ const trigger: APISchema<Tabs.TriggerProps> = {
 	dataAttributes: [
 		{
 			name: "state",
+			description: "The state of the tab trigger.",
 			value: enums("active", "inactive"),
-			description: "The state of the tab trigger."
+			isEnum: true
 		},
 		{
 			name: "value",
@@ -106,8 +107,9 @@ const trigger: APISchema<Tabs.TriggerProps> = {
 		},
 		{
 			name: "orientation",
+			description: "The orientation of the tabs.",
 			value: enums("horizontal", "vertical"),
-			description: "The orientation of the tabs."
+			isEnum: true
 		},
 		{
 			name: "disabled",
diff --git a/src/content/api-reference/toggle-group.ts b/src/content/api-reference/toggle-group.ts
index 886be1984..cb1a39cdc 100644
--- a/src/content/api-reference/toggle-group.ts
+++ b/src/content/api-reference/toggle-group.ts
@@ -78,8 +78,9 @@ const item: APISchema<ToggleGroup.ItemProps> = {
 	dataAttributes: [
 		{
 			name: "state",
+			description: "Whether the toggle item is in the on or off state.",
 			value: enums("on", "off"),
-			description: "Whether the toggle item is in the on or off state."
+			isEnum: true
 		},
 		{
 			name: "value",
diff --git a/src/content/api-reference/toggle.ts b/src/content/api-reference/toggle.ts
index f909a6840..7872a84f3 100644
--- a/src/content/api-reference/toggle.ts
+++ b/src/content/api-reference/toggle.ts
@@ -29,8 +29,9 @@ const root: APISchema<Toggle.Props> = {
 	dataAttributes: [
 		{
 			name: "state",
+			description: "Whether the toggle is in the on or off state.",
 			value: enums("on", "off"),
-			description: "Whether the toggle is in the on or off state."
+			isEnum: true
 		},
 		{
 			name: "disabled",
diff --git a/src/content/api-reference/tooltip.ts b/src/content/api-reference/tooltip.ts
index ffe23daed..d087ad97d 100644
--- a/src/content/api-reference/tooltip.ts
+++ b/src/content/api-reference/tooltip.ts
@@ -70,8 +70,9 @@ export const trigger: APISchema<Tooltip.TriggerProps> = {
 	dataAttributes: [
 		{
 			name: "state",
+			description: "The open state of the tooltip.",
 			value: enums("open", "closed"),
-			description: "The open state of the tooltip."
+			isEnum: true
 		},
 		{
 			name: "tooltip-trigger",
@@ -99,7 +100,6 @@ export const arrow: APISchema<Tooltip.ArrowProps> = {
 	dataAttributes: [
 		{
 			name: "arrow",
-			value: "",
 			description: "Present on the arrow element."
 		},
 		{
diff --git a/src/lib/bits/aspect-ratio/components/aspect-ratio.svelte b/src/lib/bits/aspect-ratio/components/aspect-ratio.svelte
index dffec5c52..4e4682a82 100644
--- a/src/lib/bits/aspect-ratio/components/aspect-ratio.svelte
+++ b/src/lib/bits/aspect-ratio/components/aspect-ratio.svelte
@@ -1,7 +1,12 @@
 <script lang="ts">
 	import type { Props } from "../types.js";
+
 	type $$Props = Props;
 	export let ratio: $$Props["ratio"] = 1 / 1;
+
+	const attrs = {
+		"data-aspect-ratio-root": ""
+	};
 </script>
 
 <div
@@ -16,6 +21,7 @@
 		style:bottom="0"
 		style:left="0"
 		{...$$restProps}
+		{...attrs}
 	>
 		<slot />
 	</div>
diff --git a/src/types/api.ts b/src/types/api.ts
index c20bb6fe6..b968899c7 100644
--- a/src/types/api.ts
+++ b/src/types/api.ts
@@ -18,6 +18,7 @@ export type DataAttrSchema = {
 	name: string;
 	value?: string;
 	description?: string;
+	isEnum?: boolean;
 };
 
 export type APISchema<T = Record<string, unknown>> = {

From 1871b04b90181a2adf0b245a94ce2dd114316394 Mon Sep 17 00:00:00 2001
From: Hunter Johnston <johnstonhuntera@gmail.com>
Date: Wed, 29 Nov 2023 22:39:46 -0500
Subject: [PATCH 166/217] data attrs table adjustments

---
 .../api-ref/data-attr-value-content.svelte    | 36 +++++++++++++++++++
 .../api-ref/data-attrs-table.svelte           | 10 +++---
 src/components/api-ref/props-table.svelte     |  6 ++--
 src/content/api-reference/accordion.ts        |  9 +++--
 src/content/api-reference/alert-dialog.ts     |  3 +-
 src/content/api-reference/calendar.ts         |  2 +-
 6 files changed, 53 insertions(+), 13 deletions(-)
 create mode 100644 src/components/api-ref/data-attr-value-content.svelte

diff --git a/src/components/api-ref/data-attr-value-content.svelte b/src/components/api-ref/data-attr-value-content.svelte
new file mode 100644
index 000000000..4d3dbb2a1
--- /dev/null
+++ b/src/components/api-ref/data-attr-value-content.svelte
@@ -0,0 +1,36 @@
+<script lang="ts">
+	import { Popover } from "$lib";
+	import { flyAndScale } from "@/utils";
+	import { Code } from "@/components";
+	import { Info } from "phosphor-svelte";
+	import type { DataAttrSchema } from "@/types";
+
+	export let attr: DataAttrSchema;
+</script>
+
+<div class="flex items-center gap-1.5">
+	{#if !attr.isEnum}
+		<Code class="bg-transparent px-0">{attr.value ?? "——"}</Code>
+	{:else}
+		<Code class="bg-transparent px-0">enum</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"
+			>
+				<Info class="sq-4" weight="bold" />
+				<span class="sr-only">See possible values</span>
+			</Popover.Trigger>
+			<Popover.Content
+				side="top"
+				sideOffset={10}
+				transition={flyAndScale}
+				transitionConfig={{ y: 8 }}
+				class="z-50 max-h-[400px] overflow-auto rounded-input border border-border bg-background p-4 shadow-popover"
+			>
+				<Code class="h-auto bg-transparent px-0 tracking-tight text-foreground">
+					{attr.value}
+				</Code>
+			</Popover.Content>
+		</Popover.Root>
+	{/if}
+</div>
diff --git a/src/components/api-ref/data-attrs-table.svelte b/src/components/api-ref/data-attrs-table.svelte
index 2bc2a7d39..6a0bd569d 100644
--- a/src/components/api-ref/data-attrs-table.svelte
+++ b/src/components/api-ref/data-attrs-table.svelte
@@ -3,6 +3,7 @@
 	import { Code } from "@/components";
 	import { parseMarkdown } from "@/utils";
 	import type { DataAttrSchema } from "@/types";
+	import ValueContent from "./data-attr-value-content.svelte";
 
 	export let dataAttrs: DataAttrSchema[] = [];
 </script>
@@ -10,8 +11,8 @@
 <Table.Root>
 	<Table.Header>
 		<Table.Row class="w-1/4">
-			<Table.Head class="w-[35%] whitespace-nowrap">Data Attribute</Table.Head>
-			<Table.Head class="w-[25%] whitespace-nowrap">Value</Table.Head>
+			<Table.Head class="w-[38%] whitespace-nowrap">Data Attribute</Table.Head>
+			<Table.Head class="w-[22%] whitespace-nowrap">Value</Table.Head>
 			<Table.Head class="w-[40%] whitespace-nowrap">Description</Table.Head>
 		</Table.Row>
 	</Table.Header>
@@ -22,9 +23,8 @@
 					<Table.Cell class="align-baseline">
 						<Code class="font-semibold text-foreground">data-{attr.name}</Code>
 					</Table.Cell>
-					<Table.Cell class="align-baseline">
-						<Code class="!h-min !bg-background !px-0">{attr.value ?? "——"}</Code
-						>
+					<Table.Cell class="pr-1 align-baseline">
+						<ValueContent {attr} />
 					</Table.Cell>
 					<Table.Cell class="align-baseline">
 						{#if attr.description}
diff --git a/src/components/api-ref/props-table.svelte b/src/components/api-ref/props-table.svelte
index 6989f06a4..27c81d953 100644
--- a/src/components/api-ref/props-table.svelte
+++ b/src/components/api-ref/props-table.svelte
@@ -21,9 +21,9 @@
 <Table.Root>
 	<Table.Header>
 		<Table.Row class="w-1/4">
-			<Table.Head class="w-1/4 whitespace-nowrap pr-1">Property</Table.Head>
-			<Table.Head class="w-1/4 whitespace-nowrap pr-1">Type</Table.Head>
-			<Table.Head class="w-1/2 whitespace-nowrap">Description</Table.Head>
+			<Table.Head class="w-[38%] whitespace-nowrap pr-1">Property</Table.Head>
+			<Table.Head class="w-[22%] whitespace-nowrap pr-1">Type</Table.Head>
+			<Table.Head class="w-[40%] whitespace-nowrap">Description</Table.Head>
 		</Table.Row>
 	</Table.Header>
 	<Table.Body>
diff --git a/src/content/api-reference/accordion.ts b/src/content/api-reference/accordion.ts
index 619d9ae2e..e35dfcb6f 100644
--- a/src/content/api-reference/accordion.ts
+++ b/src/content/api-reference/accordion.ts
@@ -37,7 +37,8 @@ const root: APISchema<Accordion.Props<false>> = {
 		{
 			name: "orientation",
 			value: enums("horizontal", "vertical"),
-			description: "The orientation of the accordion."
+			description: "The orientation of the accordion.",
+			isEnum: true
 		},
 		{
 			name: "accordion-root",
@@ -67,7 +68,8 @@ const item: APISchema<Accordion.ItemProps> = {
 		{
 			name: "state",
 			value: enums("open", "closed"),
-			description: "The state of the accordion item."
+			description: "The state of the accordion item.",
+			isEnum: true
 		},
 		{
 			name: "disabled",
@@ -89,7 +91,8 @@ const trigger: APISchema<Accordion.TriggerProps> = {
 		{
 			name: "state",
 			value: enums("open", "closed"),
-			description: "The state of the accordion item."
+			description: "The state of the accordion item.",
+			isEnum: true
 		},
 		{
 			name: "disabled",
diff --git a/src/content/api-reference/alert-dialog.ts b/src/content/api-reference/alert-dialog.ts
index 8f9c57855..77e6c2441 100644
--- a/src/content/api-reference/alert-dialog.ts
+++ b/src/content/api-reference/alert-dialog.ts
@@ -81,7 +81,8 @@ const content: APISchema<AlertDialog.ContentProps> = {
 		{
 			name: "state",
 			value: enums("open", "closed"),
-			description: "The state of the alert dialog."
+			description: "The state of the alert dialog.",
+			isEnum: true
 		},
 		{
 			name: "alert-dialog-content",
diff --git a/src/content/api-reference/calendar.ts b/src/content/api-reference/calendar.ts
index 5a64f235d..058c4864c 100644
--- a/src/content/api-reference/calendar.ts
+++ b/src/content/api-reference/calendar.ts
@@ -175,7 +175,7 @@ const date: APISchema<Calendar.DateProps> = {
 		},
 		{
 			name: "value",
-			value: 'The date in the format "YYYY-MM-DD".'
+			description: 'The date in the format "YYYY-MM-DD".'
 		},
 		{
 			name: "today",

From a7ede802998445d2f7681b81bedafcbfbbbe58b2 Mon Sep 17 00:00:00 2001
From: Hunter Johnston <johnstonhuntera@gmail.com>
Date: Wed, 29 Nov 2023 23:52:32 -0500
Subject: [PATCH 167/217] slot prop api ref

---
 src/components/api-ref/props-table.svelte     |  5 +-
 src/content/api-reference/accordion.ts        | 12 +++
 src/content/api-reference/alert-dialog.ts     | 24 +++++-
 src/content/api-reference/avatar.ts           | 12 ++-
 src/content/api-reference/calendar.ts         | 53 +++++++++++-
 src/content/api-reference/checkbox.ts         | 15 +++-
 src/content/api-reference/collapsible.ts      |  7 +-
 src/content/api-reference/context-menu.ts     |  3 +-
 src/content/api-reference/dialog.ts           | 19 ++++-
 .../api-reference/extended-types/index.ts     |  6 ++
 .../api-reference/extended-types/months.ts    | 22 +++++
 src/content/api-reference/helpers.ts          | 45 +++++++++++
 src/content/api-reference/label.ts            |  3 +-
 src/content/api-reference/link-preview.ts     |  8 ++
 src/content/api-reference/menu.ts             | 40 +++++++++-
 src/content/api-reference/menubar.ts          |  6 +-
 src/content/api-reference/popover.ts          | 11 ++-
 src/content/api-reference/progress.ts         |  2 +
 src/content/api-reference/radio-group.ts      | 16 +++-
 src/content/api-reference/range-calendar.ts   | 80 ++++++++++++-------
 src/content/api-reference/select.ts           | 38 +++++++--
 src/content/api-reference/separator.ts        |  2 +
 src/content/api-reference/slider.ts           | 23 +++---
 src/content/api-reference/switch.ts           | 15 +++-
 src/content/api-reference/tabs.ts             | 15 +++-
 src/content/api-reference/toggle-group.ts     |  4 +-
 src/content/api-reference/toggle.ts           |  2 +
 src/content/api-reference/tooltip.ts          |  8 ++
 .../components/calendar-grid-body.svelte      |  2 +-
 .../components/calendar-grid-head.svelte      |  2 +-
 .../components/calendar-head-cell.svelte      |  2 +-
 .../components/calendar-heading.svelte        | 10 ++-
 .../components/calendar-next-button.svelte    |  9 ++-
 .../bits/checkbox/components/checkbox.svelte  |  1 -
 .../components/menu-radio-indicator.svelte    |  3 +-
 .../bits/menubar/components/menubar.svelte    |  7 +-
 src/lib/bits/radio-group/_types.ts            |  4 +-
 .../radio-group-item-indicator.svelte         | 21 ++++-
 src/lib/bits/radio-group/ctx.ts               |  2 +-
 src/lib/bits/radio-group/types.ts             |  4 +
 .../select/components/select-input.svelte     |  7 +-
 src/lib/index.ts                              |  1 +
 src/lib/shared/index.ts                       |  3 +
 src/types/api.ts                              |  3 +
 44 files changed, 477 insertions(+), 100 deletions(-)
 create mode 100644 src/content/api-reference/extended-types/months.ts

diff --git a/src/components/api-ref/props-table.svelte b/src/components/api-ref/props-table.svelte
index 27c81d953..ffeb9b154 100644
--- a/src/components/api-ref/props-table.svelte
+++ b/src/components/api-ref/props-table.svelte
@@ -6,6 +6,7 @@
 	import PropTypeContent from "./prop-type-content.svelte";
 
 	export let props: PropObj<Record<string, unknown>>;
+	export let slot = false;
 
 	$: propData = Object.entries(props).map(([name, prop]) => {
 		const {
@@ -21,7 +22,9 @@
 <Table.Root>
 	<Table.Header>
 		<Table.Row class="w-1/4">
-			<Table.Head class="w-[38%] whitespace-nowrap pr-1">Property</Table.Head>
+			<Table.Head class="w-[38%] whitespace-nowrap pr-1"
+				>{slot ? "Slot" : ""} Property</Table.Head
+			>
 			<Table.Head class="w-[22%] whitespace-nowrap pr-1">Type</Table.Head>
 			<Table.Head class="w-[40%] whitespace-nowrap">Description</Table.Head>
 		</Table.Row>
diff --git a/src/content/api-reference/accordion.ts b/src/content/api-reference/accordion.ts
index e35dfcb6f..2709b8773 100644
--- a/src/content/api-reference/accordion.ts
+++ b/src/content/api-reference/accordion.ts
@@ -2,6 +2,7 @@ import type { APISchema } from "@/types";
 import * as C from "@/content/constants.js";
 import { union, enums, asChild, transitionProps } from "@/content/api-reference/helpers.js";
 import type * as Accordion from "$lib/bits/accordion/_types.js";
+import { builderAndAttrsSlotProps } from "./helpers";
 
 const root: APISchema<Accordion.Props<false>> = {
 	title: "Root",
@@ -33,6 +34,9 @@ const root: APISchema<Accordion.Props<false>> = {
 		},
 		asChild
 	},
+	slotProps: {
+		...builderAndAttrsSlotProps
+	},
 	dataAttributes: [
 		{
 			name: "orientation",
@@ -64,6 +68,9 @@ const item: APISchema<Accordion.ItemProps> = {
 		},
 		asChild
 	},
+	slotProps: {
+		...builderAndAttrsSlotProps
+	},
 	dataAttributes: [
 		{
 			name: "state",
@@ -87,6 +94,7 @@ const trigger: APISchema<Accordion.TriggerProps> = {
 	title: "Trigger",
 	description: "The accordion item trigger, which opens and closes the accordion item.",
 	props: { asChild },
+	slotProps: { ...builderAndAttrsSlotProps },
 	dataAttributes: [
 		{
 			name: "state",
@@ -113,6 +121,7 @@ const content: APISchema<Accordion.ContentProps> = {
 	title: "Content",
 	description: "The accordion item content, which is displayed when the item is open.",
 	props: { ...transitionProps, asChild },
+	slotProps: { ...builderAndAttrsSlotProps },
 	dataAttributes: [
 		{
 			name: "state",
@@ -149,6 +158,9 @@ const header: APISchema<Accordion.HeaderProps> = {
 		},
 		asChild
 	},
+	slotProps: {
+		...builderAndAttrsSlotProps
+	},
 	dataAttributes: [
 		{
 			name: "heading-level",
diff --git a/src/content/api-reference/alert-dialog.ts b/src/content/api-reference/alert-dialog.ts
index 77e6c2441..e8095c72f 100644
--- a/src/content/api-reference/alert-dialog.ts
+++ b/src/content/api-reference/alert-dialog.ts
@@ -1,12 +1,22 @@
 import type { APISchema } from "@/types/api.js";
-import { asChild, enums, portalProp, transitionProps } from "@/content/api-reference/helpers.js";
+import {
+	asChild,
+	enums,
+	idsSlotProp,
+	portalProp,
+	transitionProps
+} from "@/content/api-reference/helpers.js";
 import * as C from "@/content/constants.js";
 import { focusProp } from "@/content/api-reference/extended-types/index.js";
 import type * as AlertDialog from "$lib/bits/alert-dialog/_types.js";
+import { builderAndAttrsSlotProps } from "./helpers";
 
 const root: APISchema<AlertDialog.Props> = {
 	title: "Root",
 	description: "The root component used to set and manage the state of the alert dialog.",
+	slotProps: {
+		ids: idsSlotProp
+	},
 	props: {
 		preventScroll: {
 			type: C.BOOLEAN,
@@ -50,9 +60,8 @@ const root: APISchema<AlertDialog.Props> = {
 const action: APISchema<AlertDialog.ActionProps> = {
 	title: "Action",
 	description: "A button used to close the alert dialog by taking an action.",
-	props: {
-		asChild
-	},
+	props: { asChild },
+	slotProps: { ...builderAndAttrsSlotProps },
 	dataAttributes: [
 		{
 			name: "alert-dialog-action",
@@ -65,6 +74,7 @@ const cancel: APISchema<AlertDialog.CancelProps> = {
 	title: "Cancel",
 	description: "A button used to close the alert dialog without taking an action.",
 	props: { asChild },
+	slotProps: { ...builderAndAttrsSlotProps },
 	dataAttributes: [
 		{
 			name: "alert-dialog-cancel",
@@ -77,6 +87,7 @@ const content: APISchema<AlertDialog.ContentProps> = {
 	title: "Content",
 	description: "The content displayed within the alert dialog modal.",
 	props: { ...transitionProps, asChild },
+	slotProps: { ...builderAndAttrsSlotProps },
 	dataAttributes: [
 		{
 			name: "state",
@@ -104,6 +115,7 @@ const title: APISchema<AlertDialog.TitleProps> = {
 			description: "The heading level of the title."
 		}
 	},
+	slotProps: { ...builderAndAttrsSlotProps },
 	dataAttributes: [
 		{
 			name: "alert-dialog-title",
@@ -116,6 +128,7 @@ const description: APISchema<AlertDialog.DescriptionProps> = {
 	title: "Description",
 	description: "An accessibile description for the alert dialog.",
 	props: { asChild },
+	slotProps: { ...builderAndAttrsSlotProps },
 	dataAttributes: [
 		{
 			name: "alert-dialog-description",
@@ -128,6 +141,7 @@ const trigger: APISchema<AlertDialog.TriggerProps> = {
 	title: "Trigger",
 	description: "The element which opens the alert dialog on press.",
 	props: { asChild },
+	slotProps: { ...builderAndAttrsSlotProps },
 	dataAttributes: [
 		{
 			name: "alert-dialog-trigger",
@@ -140,6 +154,7 @@ const overlay: APISchema<AlertDialog.OverlayProps> = {
 	title: "Overlay",
 	description: "An overlay which covers the body when the alert dialog is open.",
 	props: { ...transitionProps, asChild },
+	slotProps: { ...builderAndAttrsSlotProps },
 	dataAttributes: [
 		{
 			name: "state",
@@ -157,6 +172,7 @@ const overlay: APISchema<AlertDialog.OverlayProps> = {
 const portal: APISchema<AlertDialog.PortalProps> = {
 	title: "Portal",
 	description: "A portal which renders the alert dialog into the body when it is open.",
+	slotProps: { ...builderAndAttrsSlotProps },
 	dataAttributes: [
 		{
 			name: "portal",
diff --git a/src/content/api-reference/avatar.ts b/src/content/api-reference/avatar.ts
index e1fe7ec6b..e0ecac782 100644
--- a/src/content/api-reference/avatar.ts
+++ b/src/content/api-reference/avatar.ts
@@ -1,7 +1,8 @@
 import type { APISchema } from "@/types";
-import { asChild, enums } from "@/content/api-reference/helpers.js";
+import { asChild, attrsSlotProp, enums } from "@/content/api-reference/helpers.js";
 import type * as Avatar from "$lib/bits/avatar/_types";
 import * as C from "@/content/constants.js";
+import { builderAndAttrsSlotProps } from "./helpers";
 
 export const root: APISchema<Avatar.Props> = {
 	title: "Root",
@@ -30,6 +31,9 @@ export const root: APISchema<Avatar.Props> = {
 		},
 		asChild
 	},
+	slotProps: {
+		attrs: attrsSlotProp
+	},
 	dataAttributes: [
 		{
 			name: "avatar-root",
@@ -41,9 +45,8 @@ export const root: APISchema<Avatar.Props> = {
 export const image: APISchema<Avatar.ImageProps> = {
 	title: "Image",
 	description: "The avatar image displayed once it has loaded.",
-	props: {
-		asChild
-	},
+	props: { asChild },
+	slotProps: { ...builderAndAttrsSlotProps },
 	dataAttributes: [
 		{
 			name: "avatar-image",
@@ -56,6 +59,7 @@ export const fallback: APISchema<Avatar.FallbackProps> = {
 	title: "Fallback",
 	description: "The fallback displayed while the avatar image is loading or if it fails to load",
 	props: { asChild },
+	slotProps: { ...builderAndAttrsSlotProps },
 	dataAttributes: [
 		{
 			name: "avatar-fallback",
diff --git a/src/content/api-reference/calendar.ts b/src/content/api-reference/calendar.ts
index 058c4864c..30d55f59c 100644
--- a/src/content/api-reference/calendar.ts
+++ b/src/content/api-reference/calendar.ts
@@ -1,7 +1,8 @@
 import type { APISchema } from "@/types";
 import * as C from "@/content/constants.js";
-import { asChild } from "@/content/api-reference/helpers.js";
+import { asChild, daysOfWeekSlotProp, monthsSlotProp } from "@/content/api-reference/helpers.js";
 import type * as Calendar from "$lib/bits/calendar/_types.js";
+import { attrsSlotProp, builderAndAttrsSlotProps } from "./helpers";
 
 const root: APISchema<Calendar.Props> = {
 	title: "Root",
@@ -104,6 +105,11 @@ const root: APISchema<Calendar.Props> = {
 		},
 		asChild
 	},
+	slotProps: {
+		months: monthsSlotProp,
+		daysOfWeek: daysOfWeekSlotProp,
+		...builderAndAttrsSlotProps
+	},
 	dataAttributes: [
 		{
 			name: "invalid",
@@ -134,6 +140,9 @@ const cell: APISchema<Calendar.CellProps> = {
 			description: "The date for the cell."
 		}
 	},
+	slotProps: {
+		attrs: attrsSlotProp
+	},
 	dataAttributes: [
 		{
 			name: "disabled",
@@ -160,6 +169,21 @@ const date: APISchema<Calendar.DateProps> = {
 			description: "The current month the date is being displayed in."
 		}
 	},
+	slotProps: {
+		disabled: {
+			description: "Whether or not the date is disabled.",
+			type: C.BOOLEAN
+		},
+		unavailable: {
+			description: "Whether or not the date is unavailable.",
+			type: C.BOOLEAN
+		},
+		selected: {
+			description: "Whether or not the date is selected.",
+			type: C.BOOLEAN
+		},
+		...builderAndAttrsSlotProps
+	},
 	dataAttributes: [
 		{
 			name: "disabled",
@@ -206,6 +230,7 @@ const grid: APISchema<Calendar.GridProps> = {
 	props: {
 		asChild
 	},
+	slotProps: { ...builderAndAttrsSlotProps },
 	dataAttributes: [
 		{
 			name: "calendar-grid",
@@ -220,6 +245,7 @@ const gridBody: APISchema<Calendar.GridBodyProps> = {
 	props: {
 		asChild
 	},
+	slotProps: { attrs: attrsSlotProp },
 	dataAttributes: [
 		{
 			name: "calendar-grid-body",
@@ -234,6 +260,9 @@ const gridHead: APISchema<Calendar.GridHeadProps> = {
 	props: {
 		asChild
 	},
+	slotProps: {
+		attrs: attrsSlotProp
+	},
 	dataAttributes: [
 		{
 			name: "calendar-grid-head",
@@ -248,6 +277,9 @@ const gridRow: APISchema<Calendar.GridRowProps> = {
 	props: {
 		asChild
 	},
+	slotProps: {
+		attrs: attrsSlotProp
+	},
 	dataAttributes: [
 		{
 			name: "calendar-grid-row",
@@ -262,6 +294,9 @@ const headCell: APISchema<Calendar.HeadCellProps> = {
 	props: {
 		asChild
 	},
+	slotProps: {
+		attrs: attrsSlotProp
+	},
 	dataAttributes: [
 		{
 			name: "calendar-head-cell",
@@ -276,6 +311,9 @@ const header: APISchema<Calendar.HeaderProps> = {
 	props: {
 		asChild
 	},
+	slotProps: {
+		attrs: attrsSlotProp
+	},
 	dataAttributes: [
 		{
 			name: "calendar-header",
@@ -290,6 +328,13 @@ const heading: APISchema<Calendar.HeadingProps> = {
 	props: {
 		asChild
 	},
+	slotProps: {
+		...builderAndAttrsSlotProps,
+		headingValue: {
+			type: C.STRING,
+			description: "The heading value."
+		}
+	},
 	dataAttributes: [
 		{
 			name: "calendar-heading",
@@ -304,6 +349,9 @@ const nextButton: APISchema<Calendar.NextButtonProps> = {
 	props: {
 		asChild
 	},
+	slotProps: {
+		...builderAndAttrsSlotProps
+	},
 	dataAttributes: [
 		{
 			name: "calendar-next-button",
@@ -318,6 +366,9 @@ const prevButton: APISchema<Calendar.PrevButtonProps> = {
 	props: {
 		asChild
 	},
+	slotProps: {
+		...builderAndAttrsSlotProps
+	},
 	dataAttributes: [
 		{
 			name: "calendar-prev-button",
diff --git a/src/content/api-reference/checkbox.ts b/src/content/api-reference/checkbox.ts
index ae1456976..a80f04557 100644
--- a/src/content/api-reference/checkbox.ts
+++ b/src/content/api-reference/checkbox.ts
@@ -1,7 +1,8 @@
-import { asChild, enums, union } from "./helpers.js";
+import { asChild, attrsSlotProp, enums, union } from "./helpers.js";
 import type { APISchema } from "@/types";
 import type * as Checkbox from "$lib/bits/checkbox/_types";
 import * as C from "@/content/constants";
+import { builderAndAttrsSlotProps } from "./helpers";
 
 export const root: APISchema<Checkbox.Props> = {
 	title: "Root",
@@ -44,6 +45,7 @@ export const root: APISchema<Checkbox.Props> = {
 		},
 		asChild
 	},
+	slotProps: { ...builderAndAttrsSlotProps },
 	dataAttributes: [
 		{
 			name: "disabled",
@@ -87,6 +89,17 @@ export const indicator: APISchema<Checkbox.IndicatorProps> = {
 	description:
 		"A component which passes `isChecked` and `isIndeterminate` slot props to its children. This is useful for rendering the checkbox's indicator icon depending on its state.",
 	props: { asChild },
+	slotProps: {
+		isChecked: {
+			type: C.BOOLEAN,
+			description: "Whether or not the checkbox is checked."
+		},
+		isIndeterminate: {
+			type: C.BOOLEAN,
+			description: "Whether or not the checkbox is indeterminate."
+		},
+		attrs: attrsSlotProp
+	},
 	dataAttributes: [
 		{
 			name: "checkbox-indicator",
diff --git a/src/content/api-reference/collapsible.ts b/src/content/api-reference/collapsible.ts
index 47c29384e..d05bde4e8 100644
--- a/src/content/api-reference/collapsible.ts
+++ b/src/content/api-reference/collapsible.ts
@@ -2,6 +2,7 @@ import type { APISchema, PropObj } from "@/types";
 import { asChild, enums, transitionProps } from "@/content/api-reference/helpers.js";
 import type * as Collapsible from "$lib/bits/collapsible/_types";
 import * as C from "@/content/constants";
+import { builderAndAttrsSlotProps } from "./helpers";
 
 export const root: APISchema<Collapsible.Props> = {
 	title: "Root",
@@ -28,6 +29,7 @@ export const root: APISchema<Collapsible.Props> = {
 		},
 		asChild
 	},
+	slotProps: { ...builderAndAttrsSlotProps },
 	dataAttributes: [
 		{
 			name: "disabled",
@@ -50,6 +52,7 @@ export const trigger: APISchema<Collapsible.TriggerProps> = {
 	title: "Trigger",
 	description: "The button responsible for toggling the collapsible's open state.",
 	props: { asChild },
+	slotProps: { ...builderAndAttrsSlotProps },
 	dataAttributes: [
 		{
 			name: "disabled",
@@ -77,11 +80,11 @@ export const content: APISchema<Collapsible.ContentProps> = {
 	title: "Content",
 	description: "The content displayed when the collapsible is open.",
 	props: contentProps,
+	slotProps: { ...builderAndAttrsSlotProps },
 	dataAttributes: [
 		{
 			name: "disabled",
-			description: "Present when the checkbox is disabled.",
-			value: "''"
+			description: "Present when the checkbox is disabled."
 		},
 		{
 			name: "state",
diff --git a/src/content/api-reference/context-menu.ts b/src/content/api-reference/context-menu.ts
index 354e31f2d..882542150 100644
--- a/src/content/api-reference/context-menu.ts
+++ b/src/content/api-reference/context-menu.ts
@@ -3,7 +3,7 @@ import { menu } from "./menu";
 import type * as Menu from "$lib/bits/menu/_types";
 import type * as ContextMenu from "$lib/bits/context-menu/_types";
 import * as C from "@/content/constants.js";
-import { transitionProps, asChild, union } from "./helpers";
+import { transitionProps, asChild, union, builderAndAttrsSlotProps } from "./helpers";
 
 export const root: APISchema<Menu.Props> = {
 	title: "Root",
@@ -53,6 +53,7 @@ export const content: APISchema<ContextMenu.ContentProps> = {
 			description: "Whether the floating element should be constrained to the viewport."
 		}
 	},
+	slotProps: { ...builderAndAttrsSlotProps },
 	dataAttributes: menu.content.dataAttributes
 };
 
diff --git a/src/content/api-reference/dialog.ts b/src/content/api-reference/dialog.ts
index 1d18e1ffa..bac6d317a 100644
--- a/src/content/api-reference/dialog.ts
+++ b/src/content/api-reference/dialog.ts
@@ -1,8 +1,15 @@
 import type { APISchema } from "@/types";
-import { asChild, enums, portalProp, transitionProps } from "@/content/api-reference/helpers.js";
+import {
+	asChild,
+	enums,
+	idsSlotProp,
+	portalProp,
+	transitionProps
+} from "@/content/api-reference/helpers.js";
 import type * as Dialog from "$lib/bits/dialog/_types";
 import { focusProp } from "./extended-types";
 import * as C from "@/content/constants";
+import { builderAndAttrsSlotProps } from "./helpers";
 
 export const root: APISchema<Dialog.Props> = {
 	title: "Root",
@@ -44,6 +51,9 @@ export const root: APISchema<Dialog.Props> = {
 			description: "Override the focus when the dialog is closed."
 		},
 		portal: { ...portalProp("dialog") }
+	},
+	slotProps: {
+		ids: idsSlotProp
 	}
 };
 
@@ -51,6 +61,7 @@ export const close: APISchema<Dialog.CloseProps> = {
 	title: "Close",
 	description: "A button used to close the dialog.",
 	props: { asChild },
+	slotProps: { ...builderAndAttrsSlotProps },
 	dataAttributes: [
 		{
 			name: "dialog-close",
@@ -63,6 +74,7 @@ export const content: APISchema<Dialog.ContentProps> = {
 	title: "Content",
 	description: "The content displayed within the dialog modal.",
 	props: { ...transitionProps, asChild },
+	slotProps: { ...builderAndAttrsSlotProps },
 	dataAttributes: [
 		{
 			name: "state",
@@ -90,6 +102,7 @@ export const title: APISchema<Dialog.TitleProps> = {
 		},
 		asChild
 	},
+	slotProps: { ...builderAndAttrsSlotProps },
 	dataAttributes: [
 		{
 			name: "dialog-title",
@@ -102,6 +115,7 @@ export const description: APISchema<Dialog.DescriptionProps> = {
 	title: "Description",
 	description: "An accessibile description for the dialog.",
 	props: { asChild },
+	slotProps: { ...builderAndAttrsSlotProps },
 	dataAttributes: [
 		{
 			name: "dialog-description",
@@ -114,6 +128,7 @@ export const trigger: APISchema<Dialog.TriggerProps> = {
 	title: "Trigger",
 	description: "The element which opens the dialog on press.",
 	props: { asChild },
+	slotProps: { ...builderAndAttrsSlotProps },
 	dataAttributes: [
 		{
 			name: "dialog-trigger",
@@ -126,6 +141,7 @@ export const overlay: APISchema<Dialog.OverlayProps> = {
 	title: "Overlay",
 	description: "An overlay which covers the body when the dialog is open.",
 	props: { ...transitionProps, asChild },
+	slotProps: { ...builderAndAttrsSlotProps },
 	dataAttributes: [
 		{
 			name: "state",
@@ -144,6 +160,7 @@ export const portal: APISchema<Dialog.PortalProps> = {
 	title: "Portal",
 	description: "A portal which renders the dialog into the body when it is open.",
 	props: { asChild },
+	slotProps: { ...builderAndAttrsSlotProps },
 	dataAttributes: [
 		{
 			name: "portal",
diff --git a/src/content/api-reference/extended-types/index.ts b/src/content/api-reference/extended-types/index.ts
index 90c8e7113..58b4ca8fb 100644
--- a/src/content/api-reference/extended-types/index.ts
+++ b/src/content/api-reference/extended-types/index.ts
@@ -1,5 +1,11 @@
 import type { PropType } from "@/types";
 import rawFocusProp from "@/content/api-reference/extended-types/focus-target.js?raw";
+import rawMonthProp from "@/content/api-reference/extended-types/months.js?raw";
+
+export const monthsPropType: PropType = {
+	type: "Month[]",
+	definition: rawMonthProp
+};
 
 export const focusProp: PropType = {
 	type: "FocusProp",
diff --git a/src/content/api-reference/extended-types/months.ts b/src/content/api-reference/extended-types/months.ts
new file mode 100644
index 000000000..f663803ef
--- /dev/null
+++ b/src/content/api-reference/extended-types/months.ts
@@ -0,0 +1,22 @@
+import { DateValue } from "@internationalized/date";
+
+type Month = {
+	/**
+	 * The current month being iterated over.
+	 * This is passed to certain components to determine
+	 * if they fall within the current month.
+	 */
+	value: DateValue;
+
+	/**
+	 * An array of arrays of dates. Each top-level array represents
+	 * a week. Each nested array represents a day in the week.
+	 */
+	weeks: DateValue[][];
+
+	/**
+	 * An array of all the dates in the month. This is a flat array
+	 * used for rendering more custom calendars.
+	 */
+	dates: DateValue[];
+};
diff --git a/src/content/api-reference/helpers.ts b/src/content/api-reference/helpers.ts
index 008ce3efe..130178d9d 100644
--- a/src/content/api-reference/helpers.ts
+++ b/src/content/api-reference/helpers.ts
@@ -1,11 +1,56 @@
 import type { PropSchema } from "@/types/api.js";
 import * as C from "@/content/constants.js";
+import { monthsPropType } from "./extended-types";
 
 export const asChild = {
 	type: C.BOOLEAN,
 	default: C.FALSE,
 	description: "Whether to use [render delegation](/docs/delegation) with this component or not."
 };
+
+export const builderSlotProp: PropSchema = {
+	type: {
+		type: C.OBJECT,
+		definition: "{ [k: string]: any; action: Action<any, any, any>}"
+	},
+	description:
+		"The builder attributes and actions to apply to the element if using the `asChild` prop with [delegation[(/docs/delegation)."
+};
+
+export const attrsSlotProp: PropSchema = {
+	type: {
+		type: C.OBJECT,
+		definition: "Record<string, string>"
+	},
+	description:
+		"Additional attributes to apply to the element if using the `asChild` prop with [delegation[(/docs/delegation)."
+};
+
+export const builderAndAttrsSlotProps: Record<string, PropSchema> = {
+	builder: builderSlotProp,
+	attrs: attrsSlotProp
+};
+
+export const monthsSlotProp: PropSchema = {
+	type: monthsPropType,
+	description: "The current months to display in the calendar. Used to render the calendar."
+};
+
+export const daysOfWeekSlotProp: PropSchema = {
+	type: "string[]",
+	description:
+		"The days of the week to display in the calendar, typically used within the table header."
+};
+
+export const idsSlotProp: PropSchema = {
+	type: {
+		type: C.OBJECT,
+		definition: "Record<string, string>"
+	},
+	description:
+		"The ids of the elements within the component, useful when you don't necessarily want to provide a custom ID, but still want access to the ID being assigned (if any)."
+};
+
 export const arrowProps = {
 	asChild,
 	size: {
diff --git a/src/content/api-reference/label.ts b/src/content/api-reference/label.ts
index e8f7be2d2..f5a67d59f 100644
--- a/src/content/api-reference/label.ts
+++ b/src/content/api-reference/label.ts
@@ -1,11 +1,12 @@
 import type { APISchema } from "@/types";
-import { asChild } from "@/content/api-reference/helpers.js";
+import { asChild, builderAndAttrsSlotProps } from "@/content/api-reference/helpers.js";
 import type * as Label from "$lib/bits/label/_types";
 
 export const root: APISchema<Label.Props> = {
 	title: "Root",
 	description: "An enhanced label component that can be used with any input.",
 	props: { asChild },
+	slotProps: { ...builderAndAttrsSlotProps },
 	dataAttributes: [
 		{
 			name: "label-root",
diff --git a/src/content/api-reference/link-preview.ts b/src/content/api-reference/link-preview.ts
index 986767e9c..cdaf63bed 100644
--- a/src/content/api-reference/link-preview.ts
+++ b/src/content/api-reference/link-preview.ts
@@ -3,12 +3,14 @@ import {
 	arrowProps,
 	asChild,
 	enums,
+	idsSlotProp,
 	portalProp,
 	transitionProps
 } from "@/content/api-reference/helpers.js";
 import { floatingPositioning } from "./floating.js";
 import type * as LinkPreview from "$lib/bits/link-preview/_types";
 import * as C from "@/content/constants";
+import { builderAndAttrsSlotProps } from "./helpers";
 
 export const root: APISchema<LinkPreview.Props> = {
 	title: "Root",
@@ -49,6 +51,9 @@ export const root: APISchema<LinkPreview.Props> = {
 			description: "A callback that fires when the open state changes."
 		},
 		portal: { ...portalProp("link preview") }
+	},
+	slotProps: {
+		ids: idsSlotProp
 	}
 };
 
@@ -57,6 +62,7 @@ export const trigger: APISchema<LinkPreview.TriggerProps> = {
 	description:
 		"A component which triggers the opening and closing of the link preview on hover or focus.",
 	props: { asChild },
+	slotProps: { ...builderAndAttrsSlotProps },
 	dataAttributes: [
 		{
 			name: "state",
@@ -75,6 +81,7 @@ export const content: APISchema<LinkPreview.ContentProps> = {
 	title: "Content",
 	description: "The contents of the link preview which are displayed when the preview is open.",
 	props: { ...transitionProps, ...floatingPositioning, asChild },
+	slotProps: { ...builderAndAttrsSlotProps },
 	dataAttributes: [
 		{
 			name: "state",
@@ -93,6 +100,7 @@ export const arrow: APISchema<LinkPreview.ArrowProps> = {
 	title: "Arrow",
 	description: "An optional arrow element which points to the trigger when the preview is open.",
 	props: arrowProps,
+	slotProps: { ...builderAndAttrsSlotProps },
 	dataAttributes: [
 		{
 			name: "arrow",
diff --git a/src/content/api-reference/menu.ts b/src/content/api-reference/menu.ts
index e6feabece..fad693d00 100644
--- a/src/content/api-reference/menu.ts
+++ b/src/content/api-reference/menu.ts
@@ -6,10 +6,13 @@ import {
 	transitionProps,
 	portalProp,
 	enums,
-	union
+	union,
+	idsSlotProp,
+	attrsSlotProp
 } from "@/content/api-reference/helpers.js";
 import type * as Menu from "$lib/bits/menu/_types";
 import * as C from "@/content/constants";
+import { builderAndAttrsSlotProps } from "./helpers";
 
 const props = {
 	preventScroll: {
@@ -344,81 +347,112 @@ const radioIndicatorAttrs: DataAttrs = [
 
 export const trigger = {
 	props: triggerProps,
+	slotProps: { ...builderAndAttrsSlotProps },
 	dataAttributes: triggerAttrs
 };
 
 export const content = {
 	props: contentProps,
+	slotProps: { ...builderAndAttrsSlotProps },
 	dataAttributes: contentAttrs
 };
 
 export const arrow = {
 	props: arrowProps,
+	slotProps: { ...builderAndAttrsSlotProps },
 	dataAttributes: arrowAttrs
 };
 
 export const item = {
 	props: itemProps,
+	slotProps: { ...builderAndAttrsSlotProps },
 	dataAttributes: itemAttrs
 };
 
 export const group = {
 	props: groupProps,
+	slotProps: { ...builderAndAttrsSlotProps },
 	dataAttributes: groupAttrs
 };
 
 export const label = {
 	props: labelProps,
+	slotProps: { ...builderAndAttrsSlotProps },
 	dataAttributes: labelAttrs
 };
 
 export const separator = {
 	props: separatorProps,
+	slotProps: { ...builderAndAttrsSlotProps },
 	dataAttributes: separatorAttrs
 };
 
 export const checkboxIndicator = {
 	props: checkboxIndicatorProps,
+	slotProps: {
+		attrs: attrsSlotProp,
+		checked: {
+			type: C.BOOLEAN,
+			description: "Whether or not the checkbox is checked."
+		}
+	},
 	dataAttributes: checkboxIndicatorAttrs
 };
 
 export const checkboxItem = {
 	props: checkboxItemProps,
+	slotProps: { ...builderAndAttrsSlotProps },
 	dataAttributes: checkboxItemAttrs
 };
 
 export const radioGroup = {
 	props: radioGroupProps,
+	slotProps: { ...builderAndAttrsSlotProps },
 	dataAttributes: radioGroupAttrs
 };
 
 export const radioItem = {
 	props: radioItemProps,
+	slotProps: { ...builderAndAttrsSlotProps },
 	dataAttributes: radioItemAttrs
 };
 
 export const subTrigger = {
 	props: subTriggerProps,
+	slotProps: { ...builderAndAttrsSlotProps },
 	dataAttributes: subTriggerAttrs
 };
 
 export const subContent = {
 	props: subContentProps,
+	slotProps: { ...builderAndAttrsSlotProps },
 	dataAttributes: subContentAttrs
 };
 
 export const radioIndicator = {
 	props: radioIndicatorProps,
+	slotProps: {
+		attrs: attrsSlotProp,
+		checked: {
+			type: C.BOOLEAN,
+			description: "Whether or not the checkbox is checked."
+		}
+	},
 	dataAttributes: radioIndicatorAttrs
 };
 
 export const sub = {
-	props: subProps
+	props: subProps,
+	slotProps: {
+		subIds: idsSlotProp
+	}
 };
 
 export const root = {
 	props,
-	dataAttributes: [...triggerAttrs, ...contentAttrs]
+	slotProps: {
+		ids: idsSlotProp
+	}
 };
 
 export const menu = {
diff --git a/src/content/api-reference/menubar.ts b/src/content/api-reference/menubar.ts
index e921fb495..2a6b72d27 100644
--- a/src/content/api-reference/menubar.ts
+++ b/src/content/api-reference/menubar.ts
@@ -1,9 +1,10 @@
 import type { APISchema } from "@/types";
-import { asChild } from "@/content/api-reference/helpers.js";
+import { asChild, idsSlotProp } from "@/content/api-reference/helpers.js";
 import { menu as m } from "./menu";
 import type * as Menubar from "$lib/bits/menubar/_types";
 import type * as Menu from "$lib/bits/menu/_types";
 import * as C from "@/content/constants";
+import { builderAndAttrsSlotProps } from "./helpers";
 
 export const root: APISchema<Menubar.Props> = {
 	title: "Root",
@@ -21,7 +22,8 @@ export const root: APISchema<Menubar.Props> = {
 				"Whether or not to loop through the menubar menu triggers when navigating with the keyboard."
 		},
 		asChild
-	}
+	},
+	slotProps: { ...builderAndAttrsSlotProps, ids: idsSlotProp }
 };
 
 export const menu: APISchema<Menu.Props> = {
diff --git a/src/content/api-reference/popover.ts b/src/content/api-reference/popover.ts
index 543d62b5b..63dbddb6e 100644
--- a/src/content/api-reference/popover.ts
+++ b/src/content/api-reference/popover.ts
@@ -7,9 +7,11 @@ import {
 	transitionProps,
 	arrowProps,
 	asChild,
-	enums
+	enums,
+	idsSlotProp
 } from "@/content/api-reference/helpers.js";
 import * as C from "@/content/constants.js";
+import { builderAndAttrsSlotProps } from "./helpers";
 
 export const root: APISchema<Popover.Props> = {
 	title: "Root",
@@ -57,13 +59,15 @@ export const root: APISchema<Popover.Props> = {
 			description: "Override the focus when the popover is closed."
 		},
 		portal: { ...portalProp("popover") }
-	}
+	},
+	slotProps: { ids: idsSlotProp }
 };
 
 export const trigger: APISchema<Popover.TriggerProps> = {
 	title: "Trigger",
 	description: "A component which toggles the opening and closing of the popover on press.",
 	props: { asChild },
+	slotProps: { ...builderAndAttrsSlotProps },
 	dataAttributes: [
 		{
 			name: "state",
@@ -82,6 +86,7 @@ export const content: APISchema<Popover.ContentProps> = {
 	title: "Content",
 	description: "The contents of the popover which are displayed when the popover is open.",
 	props: { ...transitionProps, ...floatingPositioning, asChild },
+	slotProps: { ...builderAndAttrsSlotProps },
 	dataAttributes: [
 		{
 			name: "state",
@@ -101,6 +106,7 @@ export const close: APISchema<Popover.CloseProps> = {
 	description:
 		"A button which closes the popover when pressed and is typically placed in the content.",
 	props: { asChild },
+	slotProps: { ...builderAndAttrsSlotProps },
 	dataAttributes: [
 		{
 			name: "popover-close",
@@ -113,6 +119,7 @@ export const arrow: APISchema<Popover.ArrowProps> = {
 	title: "Arrow",
 	description: "An optional arrow element which points to the trigger when the popover is open.",
 	props: arrowProps,
+	slotProps: { ...builderAndAttrsSlotProps },
 	dataAttributes: [
 		{
 			name: "arrow",
diff --git a/src/content/api-reference/progress.ts b/src/content/api-reference/progress.ts
index a77ed9ae7..d602626b4 100644
--- a/src/content/api-reference/progress.ts
+++ b/src/content/api-reference/progress.ts
@@ -2,6 +2,7 @@ import type { APISchema } from "@/types/index.js";
 import { asChild, enums } from "@/content/api-reference/helpers.js";
 import * as C from "@/content/constants.js";
 import type * as Progress from "$lib/bits/progress/_types.js";
+import { builderAndAttrsSlotProps } from "./helpers";
 
 export const root: APISchema<Progress.Props> = {
 	title: "Root",
@@ -27,6 +28,7 @@ export const root: APISchema<Progress.Props> = {
 		},
 		asChild
 	},
+	slotProps: { ...builderAndAttrsSlotProps },
 	dataAttributes: [
 		{
 			name: "value",
diff --git a/src/content/api-reference/radio-group.ts b/src/content/api-reference/radio-group.ts
index 051eaa7a7..3bda7d823 100644
--- a/src/content/api-reference/radio-group.ts
+++ b/src/content/api-reference/radio-group.ts
@@ -1,7 +1,8 @@
 import type { APISchema } from "@/types";
-import { asChild, enums } from "@/content/api-reference/helpers.js";
+import { asChild, attrsSlotProp, enums } from "@/content/api-reference/helpers.js";
 import type * as RadioGroup from "$lib/bits/radio-group/_types";
 import * as C from "@/content/constants";
+import { builderAndAttrsSlotProps } from "./helpers";
 
 export const root: APISchema<RadioGroup.Props> = {
 	title: "Root",
@@ -47,6 +48,7 @@ export const root: APISchema<RadioGroup.Props> = {
 		},
 		asChild
 	},
+	slotProps: { ...builderAndAttrsSlotProps },
 	dataAttributes: [
 		{
 			name: "orientation",
@@ -59,6 +61,7 @@ export const root: APISchema<RadioGroup.Props> = {
 		}
 	]
 };
+
 export const item: APISchema<RadioGroup.ItemProps> = {
 	title: "Item",
 	description: "An radio item, which must be a child of the `RadioGroup.Root` component.",
@@ -77,6 +80,7 @@ export const item: APISchema<RadioGroup.ItemProps> = {
 		},
 		asChild
 	},
+	slotProps: { ...builderAndAttrsSlotProps },
 	dataAttributes: [
 		{
 			name: "disabled",
@@ -116,9 +120,17 @@ export const indicator: APISchema = {
 	title: "ItemIndicator",
 	description:
 		"A component which is used to indicate the radio item's checked state. Any children of this component will only be visible when the radio item is checked.",
+	props: { asChild },
+	slotProps: {
+		attrs: attrsSlotProp,
+		checked: {
+			type: C.BOOLEAN,
+			description: "Whether or not the radio item is checked."
+		}
+	},
 	dataAttributes: [
 		{
-			name: "radio-group-indicator",
+			name: "radio-item-indicator",
 			description: "Present on the indicator element."
 		}
 	]
diff --git a/src/content/api-reference/range-calendar.ts b/src/content/api-reference/range-calendar.ts
index e8aa3748d..bf9f395a2 100644
--- a/src/content/api-reference/range-calendar.ts
+++ b/src/content/api-reference/range-calendar.ts
@@ -1,7 +1,13 @@
 import type { APISchema } from "@/types";
 import * as C from "@/content/constants.js";
-import { asChild } from "@/content/api-reference/helpers.js";
+import {
+	asChild,
+	attrsSlotProp,
+	daysOfWeekSlotProp,
+	monthsSlotProp
+} from "@/content/api-reference/helpers.js";
 import type * as RangeCalendar from "$lib/bits/range-calendar/_types.js";
+import { builderAndAttrsSlotProps } from "./helpers";
 
 const root: APISchema<RangeCalendar.Props> = {
 	title: "Root",
@@ -102,6 +108,11 @@ const root: APISchema<RangeCalendar.Props> = {
 		},
 		asChild
 	},
+	slotProps: {
+		months: monthsSlotProp,
+		daysOfWeek: daysOfWeekSlotProp,
+		...builderAndAttrsSlotProps
+	},
 	dataAttributes: [
 		{
 			name: "invalid",
@@ -132,6 +143,9 @@ const cell: APISchema<RangeCalendar.CellProps> = {
 			description: "The date for the cell."
 		}
 	},
+	slotProps: {
+		attrs: attrsSlotProp
+	},
 	dataAttributes: [
 		{
 			name: "disabled",
@@ -158,6 +172,21 @@ const date: APISchema<RangeCalendar.DateProps> = {
 			description: "The current month the date is being displayed in."
 		}
 	},
+	slotProps: {
+		disabled: {
+			description: "Whether or not the date is disabled.",
+			type: C.BOOLEAN
+		},
+		unavailable: {
+			description: "Whether or not the date is unavailable.",
+			type: C.BOOLEAN
+		},
+		selected: {
+			description: "Whether or not the date is selected.",
+			type: C.BOOLEAN
+		},
+		...builderAndAttrsSlotProps
+	},
 	dataAttributes: [
 		{
 			name: "disabled",
@@ -214,9 +243,8 @@ const date: APISchema<RangeCalendar.DateProps> = {
 const grid: APISchema<RangeCalendar.GridProps> = {
 	title: "Grid",
 	description: "The grid of dates in the calendar, typically representing a month.",
-	props: {
-		asChild
-	},
+	props: { asChild },
+	slotProps: { ...builderAndAttrsSlotProps },
 	dataAttributes: [
 		{
 			name: "calendar-grid",
@@ -228,9 +256,8 @@ const grid: APISchema<RangeCalendar.GridProps> = {
 const gridBody: APISchema<RangeCalendar.GridBodyProps> = {
 	title: "GridBody",
 	description: "The body of the grid of dates in the calendar.",
-	props: {
-		asChild
-	},
+	props: { asChild },
+	slotProps: { attrs: attrsSlotProp },
 	dataAttributes: [
 		{
 			name: "calendar-grid-body",
@@ -242,9 +269,8 @@ const gridBody: APISchema<RangeCalendar.GridBodyProps> = {
 const gridHead: APISchema<RangeCalendar.GridHeadProps> = {
 	title: "GridHead",
 	description: "The head of the grid of dates in the calendar.",
-	props: {
-		asChild
-	},
+	props: { asChild },
+	slotProps: { attrs: attrsSlotProp },
 	dataAttributes: [
 		{
 			name: "calendar-grid-head",
@@ -256,9 +282,8 @@ const gridHead: APISchema<RangeCalendar.GridHeadProps> = {
 const gridRow: APISchema<RangeCalendar.GridRowProps> = {
 	title: "GridRow",
 	description: "A row in the grid of dates in the calendar.",
-	props: {
-		asChild
-	},
+	props: { asChild },
+	slotProps: { attrs: attrsSlotProp },
 	dataAttributes: [
 		{
 			name: "calendar-grid-row",
@@ -270,9 +295,8 @@ const gridRow: APISchema<RangeCalendar.GridRowProps> = {
 const headCell: APISchema<RangeCalendar.HeadCellProps> = {
 	title: "HeadCell",
 	description: "A cell in the head of the grid of dates in the calendar.",
-	props: {
-		asChild
-	},
+	props: { asChild },
+	slotProps: { attrs: attrsSlotProp },
 	dataAttributes: [
 		{
 			name: "calendar-head-cell",
@@ -284,9 +308,8 @@ const headCell: APISchema<RangeCalendar.HeadCellProps> = {
 const header: APISchema<RangeCalendar.HeaderProps> = {
 	title: "Header",
 	description: "The header of the calendar.",
-	props: {
-		asChild
-	},
+	props: { asChild },
+	slotProps: { attrs: attrsSlotProp },
 	dataAttributes: [
 		{
 			name: "calendar-header",
@@ -298,8 +321,13 @@ const header: APISchema<RangeCalendar.HeaderProps> = {
 const heading: APISchema<RangeCalendar.HeadingProps> = {
 	title: "Heading",
 	description: "The heading of the calendar.",
-	props: {
-		asChild
+	props: { asChild },
+	slotProps: {
+		...builderAndAttrsSlotProps,
+		headingValue: {
+			type: C.STRING,
+			description: "The heading value."
+		}
 	},
 	dataAttributes: [
 		{
@@ -312,9 +340,8 @@ const heading: APISchema<RangeCalendar.HeadingProps> = {
 const nextButton: APISchema<RangeCalendar.NextButtonProps> = {
 	title: "NextButton",
 	description: "The next button of the calendar.",
-	props: {
-		asChild
-	},
+	props: { asChild },
+	slotProps: { ...builderAndAttrsSlotProps },
 	dataAttributes: [
 		{
 			name: "calendar-next-button",
@@ -326,9 +353,8 @@ const nextButton: APISchema<RangeCalendar.NextButtonProps> = {
 const prevButton: APISchema<RangeCalendar.PrevButtonProps> = {
 	title: "PrevButton",
 	description: "The previous button of the calendar.",
-	props: {
-		asChild
-	},
+	props: { asChild },
+	slotProps: { ...builderAndAttrsSlotProps },
 	dataAttributes: [
 		{
 			name: "calendar-prev-button",
diff --git a/src/content/api-reference/select.ts b/src/content/api-reference/select.ts
index 36af2c43d..9f652cb22 100644
--- a/src/content/api-reference/select.ts
+++ b/src/content/api-reference/select.ts
@@ -2,13 +2,16 @@ import type { APISchema } from "@/types/index.js";
 import {
 	arrowProps,
 	asChild,
+	attrsSlotProp,
 	enums,
+	idsSlotProp,
 	portalProp,
 	transitionProps
 } from "@/content/api-reference/helpers.js";
 import { floatingPositioning } from "./floating.js";
 import * as C from "@/content/constants.js";
 import type * as Select from "$lib/bits/select/_types.js";
+import { builderAndAttrsSlotProps } from "./helpers";
 
 export const root: APISchema<Select.Props> = {
 	title: "Root",
@@ -100,13 +103,15 @@ export const root: APISchema<Select.Props> = {
 			description:
 				"Whether or not to enable typeahead functionality. When enabled, the user can type to navigate to menu items."
 		}
-	}
+	},
+	slotProps: { ids: idsSlotProp }
 };
 
 export const trigger: APISchema<Select.TriggerProps> = {
 	title: "Trigger",
 	description: "The button element which toggles the select menu's open state.",
 	props: { asChild },
+	slotProps: { ...builderAndAttrsSlotProps },
 	dataAttributes: [
 		{
 			name: "state",
@@ -129,6 +134,7 @@ export const content: APISchema<Select.ContentProps> = {
 	title: "Content",
 	description: "The content/menu element which contains the select menu's items.",
 	props: { ...transitionProps, ...floatingPositioning, asChild },
+	slotProps: { ...builderAndAttrsSlotProps },
 	dataAttributes: [
 		{
 			name: "select-content",
@@ -157,6 +163,7 @@ export const item: APISchema<Select.ItemProps> = {
 		},
 		asChild
 	},
+	slotProps: { ...builderAndAttrsSlotProps },
 	dataAttributes: [
 		{
 			name: "state",
@@ -186,6 +193,13 @@ export const value: APISchema = {
 		},
 		asChild
 	},
+	slotProps: {
+		attrs: attrsSlotProp,
+		label: {
+			type: C.STRING,
+			description: "The label of the currently selected item."
+		}
+	},
 	dataAttributes: [
 		{
 			name: "select-value",
@@ -198,13 +212,15 @@ export const input: APISchema<Select.InputProps> = {
 	title: "Input",
 	description:
 		"A hidden input element which is used to store the select menu's value, used for form submission. It receives the same value as the `Select.Value` component and can receive any props that a normal input element can receive.",
-	props: { asChild }
+	props: { asChild },
+	slotProps: { ...builderAndAttrsSlotProps }
 };
 
 export const group: APISchema<Select.GroupProps> = {
 	title: "Group",
 	description: "An accessible group of select menu items.",
 	props: { asChild },
+	slotProps: { ...builderAndAttrsSlotProps },
 	dataAttributes: [
 		{
 			name: "select-group",
@@ -218,6 +234,7 @@ export const label: APISchema<Select.LabelProps> = {
 	description:
 		"A label for the select menu which will be skipped when navigating with the keyboard. This must be a child of the `Select.Group` component to be accessible.",
 	props: { asChild },
+	slotProps: { ...builderAndAttrsSlotProps },
 	dataAttributes: [
 		{
 			name: "select-label",
@@ -229,12 +246,11 @@ export const label: APISchema<Select.LabelProps> = {
 export const separator: APISchema<Select.SeparatorProps> = {
 	title: "Separator",
 	description: "A visual separator for use between select items or groups.",
-	props: {
-		asChild
-	},
+	props: { asChild },
+	slotProps: { ...builderAndAttrsSlotProps },
 	dataAttributes: [
 		{
-			name: "select-separator",
+			name: "separator-root",
 			description: "Present on the separator element."
 		}
 	]
@@ -243,8 +259,13 @@ export const separator: APISchema<Select.SeparatorProps> = {
 export const indicator: APISchema<Select.IndicatorProps> = {
 	title: "Separator",
 	description: "A visual separator for use between select items or groups.",
-	props: {
-		asChild
+	props: { asChild },
+	slotProps: {
+		attrs: attrsSlotProp,
+		isSelected: {
+			type: C.BOOLEAN,
+			description: "Whether or not the item is selected."
+		}
 	},
 	dataAttributes: [
 		{
@@ -258,6 +279,7 @@ export const arrow: APISchema<Select.ArrowProps> = {
 	title: "Arrow",
 	description: "An optional arrow element which points to the trigger when open.",
 	props: arrowProps,
+	slotProps: { ...builderAndAttrsSlotProps },
 	dataAttributes: [
 		{
 			name: "arrow",
diff --git a/src/content/api-reference/separator.ts b/src/content/api-reference/separator.ts
index c1d9a4b3d..bf76fdfbd 100644
--- a/src/content/api-reference/separator.ts
+++ b/src/content/api-reference/separator.ts
@@ -2,6 +2,7 @@ import type { APISchema } from "@/types";
 import { asChild, enums } from "@/content/api-reference/helpers.js";
 import * as C from "@/content/constants";
 import type * as Separator from "$lib/bits/separator/_types";
+import { builderAndAttrsSlotProps } from "./helpers";
 
 export const root: APISchema<Separator.Props> = {
 	title: "Root",
@@ -23,6 +24,7 @@ export const root: APISchema<Separator.Props> = {
 		},
 		asChild
 	},
+	slotProps: { ...builderAndAttrsSlotProps },
 	dataAttributes: [
 		{
 			name: "orientation",
diff --git a/src/content/api-reference/slider.ts b/src/content/api-reference/slider.ts
index 9eb7f6c00..a1dcd0e8e 100644
--- a/src/content/api-reference/slider.ts
+++ b/src/content/api-reference/slider.ts
@@ -2,6 +2,7 @@ import type { APISchema } from "@/types";
 import { asChild, enums } from "@/content/api-reference/helpers.js";
 import type * as Slider from "$lib/bits/slider/_types.js";
 import * as C from "@/content/constants.js";
+import { builderAndAttrsSlotProps } from "./helpers";
 
 const root: APISchema<Slider.Props> = {
 	title: "Root",
@@ -49,6 +50,13 @@ const root: APISchema<Slider.Props> = {
 		},
 		asChild
 	},
+	slotProps: {
+		...builderAndAttrsSlotProps,
+		ticks: {
+			type: C.NUMBER,
+			description: "The number of ticks to display on the slider."
+		}
+	},
 	dataAttributes: [
 		{
 			name: "orientation",
@@ -66,9 +74,8 @@ const root: APISchema<Slider.Props> = {
 const thumb: APISchema<Slider.ThumbProps> = {
 	title: "Thumb",
 	description: "A thumb on the slider.",
-	props: {
-		asChild
-	},
+	props: { asChild },
+	slotProps: { ...builderAndAttrsSlotProps },
 	dataAttributes: [
 		{
 			name: "slider-thumb",
@@ -80,9 +87,8 @@ const thumb: APISchema<Slider.ThumbProps> = {
 const range: APISchema<Slider.RangeProps> = {
 	title: "Range",
 	description: "The range of the slider.",
-	props: {
-		asChild
-	},
+	props: { asChild },
+	slotProps: { ...builderAndAttrsSlotProps },
 	dataAttributes: [
 		{
 			name: "slider-range",
@@ -94,9 +100,8 @@ const range: APISchema<Slider.RangeProps> = {
 const tick: APISchema<Slider.TickProps> = {
 	title: "Tick",
 	description: "A tick mark on the slider.",
-	props: {
-		asChild
-	},
+	props: { asChild },
+	slotProps: { ...builderAndAttrsSlotProps },
 	dataAttributes: [
 		{
 			name: "bounded",
diff --git a/src/content/api-reference/switch.ts b/src/content/api-reference/switch.ts
index 7214c45d3..4bd31d21b 100644
--- a/src/content/api-reference/switch.ts
+++ b/src/content/api-reference/switch.ts
@@ -1,7 +1,8 @@
 import type { APISchema } from "@/types";
-import { asChild, enums } from "@/content/api-reference/helpers.js";
+import { asChild, attrsSlotProp, enums } from "@/content/api-reference/helpers.js";
 import type * as Switch from "$lib/bits/switch/_types.js";
 import * as C from "@/content/constants.js";
+import { builderAndAttrsSlotProps } from "./helpers";
 
 const root: APISchema<Switch.Props> = {
 	title: "Root",
@@ -51,6 +52,9 @@ const root: APISchema<Switch.Props> = {
 		},
 		asChild
 	},
+	slotProps: {
+		...builderAndAttrsSlotProps
+	},
 	dataAttributes: [
 		{
 			name: "state",
@@ -76,8 +80,13 @@ const root: APISchema<Switch.Props> = {
 const thumb: APISchema<Switch.ThumbProps> = {
 	title: "Thumb",
 	description: "The thumb on the switch used to indicate the switch's state.",
-	props: {
-		asChild
+	props: { asChild },
+	slotProps: {
+		attrs: attrsSlotProp,
+		checked: {
+			type: C.BOOLEAN,
+			description: "Whether or not the switch is checked."
+		}
 	},
 	dataAttributes: [
 		{
diff --git a/src/content/api-reference/tabs.ts b/src/content/api-reference/tabs.ts
index f7f800bbb..ee035d4f3 100644
--- a/src/content/api-reference/tabs.ts
+++ b/src/content/api-reference/tabs.ts
@@ -2,6 +2,7 @@ import type { APISchema } from "@/types";
 import * as C from "@/content/constants.js";
 import { union, enums, asChild } from "@/content/api-reference/helpers.js";
 import type * as Tabs from "$lib/bits/tabs/_types.js";
+import { builderAndAttrsSlotProps } from "./helpers";
 
 const root: APISchema<Tabs.Props> = {
 	title: "Root",
@@ -46,6 +47,13 @@ const root: APISchema<Tabs.Props> = {
 		},
 		asChild
 	},
+	slotProps: {
+		...builderAndAttrsSlotProps,
+		value: {
+			type: C.STRING,
+			description: "The currently active tab value."
+		}
+	},
 	dataAttributes: [
 		{
 			name: "orientation",
@@ -62,9 +70,8 @@ const root: APISchema<Tabs.Props> = {
 const list: APISchema<Tabs.ListProps> = {
 	title: "List",
 	description: "The component containing the tab triggers.",
-	props: {
-		asChild
-	},
+	props: { asChild },
+	slotProps: { ...builderAndAttrsSlotProps },
 	dataAttributes: [
 		{
 			name: "orientation",
@@ -94,6 +101,7 @@ const trigger: APISchema<Tabs.TriggerProps> = {
 		},
 		asChild
 	},
+	slotProps: { ...builderAndAttrsSlotProps },
 	dataAttributes: [
 		{
 			name: "state",
@@ -133,6 +141,7 @@ const content: APISchema<Tabs.ContentProps> = {
 		},
 		asChild
 	},
+	slotProps: { ...builderAndAttrsSlotProps },
 	dataAttributes: [
 		{
 			name: "tabs-content",
diff --git a/src/content/api-reference/toggle-group.ts b/src/content/api-reference/toggle-group.ts
index cb1a39cdc..8d0f607c3 100644
--- a/src/content/api-reference/toggle-group.ts
+++ b/src/content/api-reference/toggle-group.ts
@@ -2,7 +2,7 @@ import type { APISchema } from "@/types";
 import { asChild, enums } from "@/content/api-reference/helpers.js";
 import type * as ToggleGroup from "$lib/bits/toggle-group/_types.js";
 import * as C from "@/content/constants.js";
-import { union } from "./helpers";
+import { union, builderAndAttrsSlotProps } from "./helpers";
 
 const root: APISchema<ToggleGroup.Props<"multiple">> = {
 	title: "Root",
@@ -48,6 +48,7 @@ const root: APISchema<ToggleGroup.Props<"multiple">> = {
 		},
 		asChild
 	},
+	slotProps: { ...builderAndAttrsSlotProps },
 	dataAttributes: [
 		{
 			name: "orientation",
@@ -75,6 +76,7 @@ const item: APISchema<ToggleGroup.ItemProps> = {
 		},
 		asChild
 	},
+	slotProps: { ...builderAndAttrsSlotProps },
 	dataAttributes: [
 		{
 			name: "state",
diff --git a/src/content/api-reference/toggle.ts b/src/content/api-reference/toggle.ts
index 7872a84f3..d5f205dc8 100644
--- a/src/content/api-reference/toggle.ts
+++ b/src/content/api-reference/toggle.ts
@@ -2,6 +2,7 @@ import type { APISchema } from "@/types";
 import { asChild, enums } from "@/content/api-reference/helpers.js";
 import type * as Toggle from "$lib/bits/toggle/_types.js";
 import * as C from "@/content/constants.js";
+import { builderAndAttrsSlotProps } from "./helpers";
 
 const root: APISchema<Toggle.Props> = {
 	title: "Root",
@@ -26,6 +27,7 @@ const root: APISchema<Toggle.Props> = {
 		},
 		asChild
 	},
+	slotProps: { ...builderAndAttrsSlotProps },
 	dataAttributes: [
 		{
 			name: "state",
diff --git a/src/content/api-reference/tooltip.ts b/src/content/api-reference/tooltip.ts
index d087ad97d..0c8ce473f 100644
--- a/src/content/api-reference/tooltip.ts
+++ b/src/content/api-reference/tooltip.ts
@@ -3,12 +3,14 @@ import {
 	arrowProps,
 	asChild,
 	enums,
+	idsSlotProp,
 	portalProp,
 	transitionProps
 } from "@/content/api-reference/helpers.js";
 import { floatingPositioning } from "./floating.js";
 import type * as Tooltip from "$lib/bits/tooltip/_types";
 import * as C from "@/content/constants";
+import { builderAndAttrsSlotProps } from "./helpers";
 
 export const root: APISchema<Tooltip.Props> = {
 	title: "Root",
@@ -59,6 +61,9 @@ export const root: APISchema<Tooltip.Props> = {
 			description: "A callback that fires when the open state changes."
 		},
 		portal: { ...portalProp("tooltip") }
+	},
+	slotProps: {
+		ids: idsSlotProp
 	}
 };
 
@@ -67,6 +72,7 @@ export const trigger: APISchema<Tooltip.TriggerProps> = {
 	description:
 		"A component which triggers the opening and closing of the tooltip on hover or focus.",
 	props: { asChild },
+	slotProps: { ...builderAndAttrsSlotProps },
 	dataAttributes: [
 		{
 			name: "state",
@@ -85,6 +91,7 @@ export const content: APISchema<Tooltip.ContentProps> = {
 	title: "Content",
 	description: "The contents of the tooltip which are displayed when the tooltip is open.",
 	props: { ...transitionProps, ...floatingPositioning, asChild },
+	slotProps: { ...builderAndAttrsSlotProps },
 	dataAttributes: [
 		{
 			name: "tooltip-content",
@@ -97,6 +104,7 @@ export const arrow: APISchema<Tooltip.ArrowProps> = {
 	title: "Arrow",
 	description: "An optional arrow element which points to the trigger when the tooltip is open.",
 	props: arrowProps,
+	slotProps: { ...builderAndAttrsSlotProps },
 	dataAttributes: [
 		{
 			name: "arrow",
diff --git a/src/lib/bits/calendar/components/calendar-grid-body.svelte b/src/lib/bits/calendar/components/calendar-grid-body.svelte
index 3dbc84e88..f1b3e221c 100644
--- a/src/lib/bits/calendar/components/calendar-grid-body.svelte
+++ b/src/lib/bits/calendar/components/calendar-grid-body.svelte
@@ -12,6 +12,6 @@
 	<slot {attrs} />
 {:else}
 	<tbody {...$$restProps} {...attrs}>
-		<slot />
+		<slot {attrs} />
 	</tbody>
 {/if}
diff --git a/src/lib/bits/calendar/components/calendar-grid-head.svelte b/src/lib/bits/calendar/components/calendar-grid-head.svelte
index a290dbd42..5b961d393 100644
--- a/src/lib/bits/calendar/components/calendar-grid-head.svelte
+++ b/src/lib/bits/calendar/components/calendar-grid-head.svelte
@@ -12,6 +12,6 @@
 	<slot {attrs} />
 {:else}
 	<thead {...$$restProps} {...attrs}>
-		<slot />
+		<slot {attrs} />
 	</thead>
 {/if}
diff --git a/src/lib/bits/calendar/components/calendar-head-cell.svelte b/src/lib/bits/calendar/components/calendar-head-cell.svelte
index e863b503d..82c776084 100644
--- a/src/lib/bits/calendar/components/calendar-head-cell.svelte
+++ b/src/lib/bits/calendar/components/calendar-head-cell.svelte
@@ -12,6 +12,6 @@
 	<slot {attrs} />
 {:else}
 	<th {...$$restProps} {...attrs}>
-		<slot />
+		<slot {attrs} />
 	</th>
 {/if}
diff --git a/src/lib/bits/calendar/components/calendar-heading.svelte b/src/lib/bits/calendar/components/calendar-heading.svelte
index c4463f49a..1883c2dea 100644
--- a/src/lib/bits/calendar/components/calendar-heading.svelte
+++ b/src/lib/bits/calendar/components/calendar-heading.svelte
@@ -14,13 +14,19 @@
 
 	$: builder = $heading;
 	const attrs = getAttrs("heading");
+
+	$: slotProps = {
+		builder,
+		attrs,
+		headingValue: $headingValue
+	};
 </script>
 
 {#if asChild}
-	<slot {builder} {attrs} headingValue={$headingValue} />
+	<slot {...slotProps} />
 {:else}
 	<div use:melt={builder} {...$$restProps} {...attrs}>
-		<slot {builder} {attrs} headingValue={$headingValue}>
+		<slot {...slotProps}>
 			{$headingValue}
 		</slot>
 	</div>
diff --git a/src/lib/bits/calendar/components/calendar-next-button.svelte b/src/lib/bits/calendar/components/calendar-next-button.svelte
index b5285d949..10b923d0a 100644
--- a/src/lib/bits/calendar/components/calendar-next-button.svelte
+++ b/src/lib/bits/calendar/components/calendar-next-button.svelte
@@ -13,12 +13,17 @@
 
 	$: builder = $nextButton;
 	const attrs = getAttrs("next-button");
+
+	$: slotProps = {
+		builder,
+		attrs
+	};
 </script>
 
 {#if asChild}
-	<slot {builder} {attrs} />
+	<slot {...slotProps} />
 {:else}
 	<button use:melt={builder} type="button" {...$$restProps} {...attrs}>
-		<slot {builder} {attrs} />
+		<slot {...slotProps} />
 	</button>
 {/if}
diff --git a/src/lib/bits/checkbox/components/checkbox.svelte b/src/lib/bits/checkbox/components/checkbox.svelte
index cbcfed20d..ff6f6d9ee 100644
--- a/src/lib/bits/checkbox/components/checkbox.svelte
+++ b/src/lib/bits/checkbox/components/checkbox.svelte
@@ -63,7 +63,6 @@
 		{...attrs}
 		on:m-click={dispatch}
 		on:m-keydown={dispatch}
-		disabled={disabled ? true : undefined}
 	>
 		<slot {...slotProps} />
 	</button>
diff --git a/src/lib/bits/menu/components/menu-radio-indicator.svelte b/src/lib/bits/menu/components/menu-radio-indicator.svelte
index 56baa8ce4..ce617ad4e 100644
--- a/src/lib/bits/menu/components/menu-radio-indicator.svelte
+++ b/src/lib/bits/menu/components/menu-radio-indicator.svelte
@@ -8,9 +8,8 @@
 	const { isChecked, value } = getRadioIndicator();
 	const attrs = getAttrs("radio-indicator");
 
-	$: checked = $isChecked(value);
 	$: slotProps = {
-		checked,
+		checked: $isChecked(value),
 		attrs
 	};
 </script>
diff --git a/src/lib/bits/menubar/components/menubar.svelte b/src/lib/bits/menubar/components/menubar.svelte
index 75e2d5ac7..09dbc0fd0 100644
--- a/src/lib/bits/menubar/components/menubar.svelte
+++ b/src/lib/bits/menubar/components/menubar.svelte
@@ -31,14 +31,15 @@
 	$: builder = $menubar;
 	$: slotProps = {
 		builder,
-		attrs
+		attrs,
+		ids: $idValues
 	};
 </script>
 
 {#if asChild}
-	<slot {...slotProps} ids={$idValues} />
+	<slot {...slotProps} />
 {:else}
 	<div use:melt={builder} {...$$restProps} {...attrs}>
-		<slot {...slotProps} ids={$idValues} />
+		<slot {...slotProps} />
 	</div>
 {/if}
diff --git a/src/lib/bits/radio-group/_types.ts b/src/lib/bits/radio-group/_types.ts
index 9fb57f2da..a0215063c 100644
--- a/src/lib/bits/radio-group/_types.ts
+++ b/src/lib/bits/radio-group/_types.ts
@@ -33,4 +33,6 @@ type InputProps = AsChild;
 
 type ItemProps = Expand<ObjectVariation<RadioGroupItemProps> & AsChild>;
 
-export type { Props, InputProps, ItemProps };
+type ItemIndicatorProps = AsChild;
+
+export type { Props, InputProps, ItemProps, ItemIndicatorProps };
diff --git a/src/lib/bits/radio-group/components/radio-group-item-indicator.svelte b/src/lib/bits/radio-group/components/radio-group-item-indicator.svelte
index b0c0a7baa..0d7546db6 100644
--- a/src/lib/bits/radio-group/components/radio-group-item-indicator.svelte
+++ b/src/lib/bits/radio-group/components/radio-group-item-indicator.svelte
@@ -1,8 +1,23 @@
 <script lang="ts">
-	import { getRadioIndicator } from "../ctx.js";
+	import { getRadioIndicator, getAttrs } from "../ctx.js";
 	const { isChecked, value } = getRadioIndicator();
+
+	export let asChild = false;
+
+	const attrs = getAttrs("item-indicator");
+
+	$: slotProps = {
+		checked: $isChecked(value),
+		attrs
+	};
 </script>
 
-{#if $isChecked(value)}
-	<slot />
+{#if asChild}
+	<slot {...slotProps} />
+{:else}
+	<div {...attrs}>
+		{#if $isChecked(value)}
+			<slot {...slotProps} />
+		{/if}
+	</div>
 {/if}
diff --git a/src/lib/bits/radio-group/ctx.ts b/src/lib/bits/radio-group/ctx.ts
index d48b35a54..527545618 100644
--- a/src/lib/bits/radio-group/ctx.ts
+++ b/src/lib/bits/radio-group/ctx.ts
@@ -10,7 +10,7 @@ import type { Readable } from "svelte/store";
 
 const NAME = "radio-group";
 const ITEM_NAME = "radio-group-item";
-const PARTS = ["root", "item", "input"] as const;
+const PARTS = ["root", "item", "input", "item-indicator"] as const;
 
 export const getAttrs = createBitAttrs(NAME, PARTS);
 
diff --git a/src/lib/bits/radio-group/types.ts b/src/lib/bits/radio-group/types.ts
index 56ed93c3e..c44e45347 100644
--- a/src/lib/bits/radio-group/types.ts
+++ b/src/lib/bits/radio-group/types.ts
@@ -9,6 +9,8 @@ type InputProps = I.InputProps & HTMLInputAttributes;
 
 type ItemProps = I.ItemProps & HTMLButtonAttributes;
 
+type ItemIndicatorProps = I.ItemIndicatorProps & HTMLDivAttributes;
+
 type ItemEvents<T extends Element = HTMLButtonElement> = {
 	click: CustomEventHandler<MouseEvent, T>;
 	keydown: CustomEventHandler<KeyboardEvent, T>;
@@ -19,10 +21,12 @@ export type {
 	Props,
 	InputProps,
 	ItemProps,
+	ItemIndicatorProps,
 	//
 	Props as RadioGroupProps,
 	InputProps as RadioGroupInputProps,
 	ItemProps as RadioGroupItemProps,
+	ItemIndicatorProps as RadioGroupItemIndicatorProps,
 	//
 	ItemEvents,
 	//
diff --git a/src/lib/bits/select/components/select-input.svelte b/src/lib/bits/select/components/select-input.svelte
index 8548d0a4a..2ab5c34cd 100644
--- a/src/lib/bits/select/components/select-input.svelte
+++ b/src/lib/bits/select/components/select-input.svelte
@@ -24,10 +24,5 @@
 {#if asChild}
 	<slot {...slotProps} />
 {:else}
-	<input
-		use:melt={builder}
-		{...$$restProps}
-		{...attrs}
-		disabled={$disabled ? true : undefined}
-	/>
+	<input use:melt={builder} {...$$restProps} {...attrs} />
 {/if}
diff --git a/src/lib/index.ts b/src/lib/index.ts
index f6a32b12e..88d777608 100644
--- a/src/lib/index.ts
+++ b/src/lib/index.ts
@@ -1,3 +1,4 @@
 // Reexport your entry components here
 export * from "./bits/index.js";
 export * from "./helpers/index.js";
+export * from "./shared/index.js";
diff --git a/src/lib/shared/index.ts b/src/lib/shared/index.ts
index a6bd992ea..9e1672aa2 100644
--- a/src/lib/shared/index.ts
+++ b/src/lib/shared/index.ts
@@ -1,4 +1,5 @@
 import type { DateValue } from "@internationalized/date";
+import type { Month } from '@melt-ui/svelte'
 
 export type DateRange = {
 	start: DateValue | undefined;
@@ -15,3 +16,5 @@ export type SegmentPart =
 	| "dayPeriod"
 	| "timeZoneName"
 	| "literal";
+
+export type { Month }
\ No newline at end of file
diff --git a/src/types/api.ts b/src/types/api.ts
index b968899c7..6f54c4ded 100644
--- a/src/types/api.ts
+++ b/src/types/api.ts
@@ -14,6 +14,8 @@ export type PropObj<T> = {
 	[K in keyof T]-?: PropSchema;
 };
 
+export type SlotPropObj = Record<string, PropSchema>;
+
 export type DataAttrSchema = {
 	name: string;
 	value?: string;
@@ -25,5 +27,6 @@ export type APISchema<T = Record<string, unknown>> = {
 	title: string;
 	description: string;
 	props?: PropObj<T>;
+	slotProps?: SlotPropObj;
 	dataAttributes?: DataAttrSchema[];
 };

From 16bf31c417b16be578de20c319e0cffba9f06f07 Mon Sep 17 00:00:00 2001
From: Hunter Johnston <johnstonhuntera@gmail.com>
Date: Wed, 29 Nov 2023 23:55:41 -0500
Subject: [PATCH 168/217] slot prop api section table

---
 src/components/api-ref/props-table.svelte | 24 ++++++++++++-----------
 src/components/api-section.svelte         |  3 +++
 src/content/api-reference/helpers.ts      |  4 ++--
 src/content/api-reference/radio-group.ts  |  3 ++-
 4 files changed, 20 insertions(+), 14 deletions(-)

diff --git a/src/components/api-ref/props-table.svelte b/src/components/api-ref/props-table.svelte
index ffeb9b154..1ebb264d9 100644
--- a/src/components/api-ref/props-table.svelte
+++ b/src/components/api-ref/props-table.svelte
@@ -46,17 +46,19 @@
 					<p class="text-sm leading-[1.3rem]">
 						{@html parseMarkdown(description)}
 					</p>
-					<div class="mt-2">
-						<Code class="h-auto bg-background px-0"
-							>Default:
-							{#if defaultVal}
-								{` ${defaultVal}`}
-							{:else}
-								<span aria-hidden> &nbsp;—— </span>
-								<span class="sr-only"> undefined </span>
-							{/if}
-						</Code>
-					</div>
+					{#if !slot}
+						<div class="mt-2">
+							<Code class="h-auto bg-background px-0">
+								Default:
+								{#if defaultVal}
+									{` ${defaultVal}`}
+								{:else}
+									<span aria-hidden> &nbsp;—— </span>
+									<span class="sr-only"> undefined </span>
+								{/if}
+							</Code>
+						</div>
+					{/if}
 				</Table.Cell>
 			</Table.Row>
 		{/each}
diff --git a/src/components/api-section.svelte b/src/components/api-section.svelte
index 9b63e99c7..f240924c3 100644
--- a/src/components/api-section.svelte
+++ b/src/components/api-section.svelte
@@ -26,6 +26,9 @@
 				{#if schema.props}
 					<PropsTable props={schema.props} />
 				{/if}
+				{#if schema.slotProps}
+					<PropsTable slot props={schema.slotProps} />
+				{/if}
 				{#if schema.dataAttributes && schema.dataAttributes.length}
 					<DataAttrsTable dataAttrs={schema.dataAttributes} />
 				{/if}
diff --git a/src/content/api-reference/helpers.ts b/src/content/api-reference/helpers.ts
index 130178d9d..b96103719 100644
--- a/src/content/api-reference/helpers.ts
+++ b/src/content/api-reference/helpers.ts
@@ -14,7 +14,7 @@ export const builderSlotProp: PropSchema = {
 		definition: "{ [k: string]: any; action: Action<any, any, any>}"
 	},
 	description:
-		"The builder attributes and actions to apply to the element if using the `asChild` prop with [delegation[(/docs/delegation)."
+		"The builder attributes and actions to apply to the element if using the `asChild` prop with [delegation](/docs/delegation)."
 };
 
 export const attrsSlotProp: PropSchema = {
@@ -23,7 +23,7 @@ export const attrsSlotProp: PropSchema = {
 		definition: "Record<string, string>"
 	},
 	description:
-		"Additional attributes to apply to the element if using the `asChild` prop with [delegation[(/docs/delegation)."
+		"Additional attributes to apply to the element if using the `asChild` prop with [delegation](/docs/delegation)."
 };
 
 export const builderAndAttrsSlotProps: Record<string, PropSchema> = {
diff --git a/src/content/api-reference/radio-group.ts b/src/content/api-reference/radio-group.ts
index 3bda7d823..79771ca6a 100644
--- a/src/content/api-reference/radio-group.ts
+++ b/src/content/api-reference/radio-group.ts
@@ -53,7 +53,8 @@ export const root: APISchema<RadioGroup.Props> = {
 		{
 			name: "orientation",
 			value: enums("vertical", "horizontal"),
-			description: "The orientation of the radio group."
+			description: "The orientation of the radio group.",
+			isEnum: true
 		},
 		{
 			name: "radio-group-root",

From 37f715d68791d9af4df5d4ef05f1f55187db22b3 Mon Sep 17 00:00:00 2001
From: Hunter Johnston <johnstonhuntera@gmail.com>
Date: Wed, 29 Nov 2023 23:59:34 -0500
Subject: [PATCH 169/217] cleanup

---
 src/content/api-reference/menu.ts | 11 ++++++-----
 1 file changed, 6 insertions(+), 5 deletions(-)

diff --git a/src/content/api-reference/menu.ts b/src/content/api-reference/menu.ts
index fad693d00..f8586bba4 100644
--- a/src/content/api-reference/menu.ts
+++ b/src/content/api-reference/menu.ts
@@ -1,4 +1,4 @@
-import type { APISchema, PropObj } from "@/types";
+import type { APISchema, DataAttrSchema, PropObj } from "@/types";
 import { focusProp } from "./extended-types/index.js";
 import { floatingPositioning } from "./floating.js";
 import {
@@ -198,10 +198,11 @@ const checkboxIndicatorProps = {
 	asChild
 } satisfies PropObj<Menu.CheckboxIndicatorProps>;
 
-const STATE = {
+const STATE: DataAttrSchema = {
 	name: "state",
 	value: enums("open", "closed"),
-	description: "The open state of the menu or submenu the element controls or belongs to."
+	description: "The open state of the menu or submenu the element controls or belongs to.",
+	isEnum: true
 };
 
 type DataAttrs = APISchema["dataAttributes"];
@@ -317,7 +318,7 @@ const separatorAttrs: DataAttrs = [
 const subContentAttrs: DataAttrs = [
 	STATE,
 	{
-		name: "menu-sucontent",
+		name: "menu-subcontent",
 		description: "Present on the submenu content element."
 	}
 ];
@@ -326,7 +327,7 @@ const subTriggerAttrs: DataAttrs = [
 	...sharedItemAttrs,
 	STATE,
 	{
-		name: "menu-sutrigger",
+		name: "menu-subtrigger",
 		description: "Present on the submenu trigger element."
 	}
 ];

From 84146cd4faff44b973ec3c6c1c15a1f849367dd5 Mon Sep 17 00:00:00 2001
From: Hunter Johnston <johnstonhuntera@gmail.com>
Date: Thu, 30 Nov 2023 00:06:19 -0500
Subject: [PATCH 170/217] cleanup

---
 src/components/demos/toggle-demo.svelte       | 2 +-
 src/components/demos/toggle-group-demo.svelte | 6 +++---
 src/lib/shared/index.ts                       | 4 ++--
 3 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/components/demos/toggle-demo.svelte b/src/components/demos/toggle-demo.svelte
index 193148723..895a51ad7 100644
--- a/src/components/demos/toggle-demo.svelte
+++ b/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-muted 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-dark-10 active:scale-98 data-[state=on]:bg-muted  active:data-[state=on]:bg-dark-10"
 		bind:pressed={unlocked}
 	>
 		<LockKeyOpen class="sq-6" />
diff --git a/src/components/demos/toggle-group-demo.svelte b/src/components/demos/toggle-group-demo.svelte
index 255c2a205..decef4964 100644
--- a/src/components/demos/toggle-group-demo.svelte
+++ b/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 data-[state=on]:bg-muted"
+		class="inline-flex items-center justify-center rounded-[9px] bg-background transition-all sq-10 hover:bg-dark-10 active:scale-98 data-[state=on]:bg-muted"
 	>
 		<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 data-[state=on]:bg-muted"
+		class="inline-flex items-center justify-center rounded-[9px] bg-background transition-all sq-10 hover:bg-dark-10 active:scale-98 data-[state=on]:bg-muted"
 	>
 		<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 data-[state=on]:bg-muted"
+		class="inline-flex items-center justify-center rounded-[9px] bg-background transition-all sq-10 hover:bg-dark-10 active:scale-98 data-[state=on]:bg-muted"
 	>
 		<TextStrikethrough class="sq-6" />
 	</ToggleGroup.Item>
diff --git a/src/lib/shared/index.ts b/src/lib/shared/index.ts
index 9e1672aa2..b66e3375a 100644
--- a/src/lib/shared/index.ts
+++ b/src/lib/shared/index.ts
@@ -1,5 +1,5 @@
 import type { DateValue } from "@internationalized/date";
-import type { Month } from '@melt-ui/svelte'
+import type { Month } from "@melt-ui/svelte";
 
 export type DateRange = {
 	start: DateValue | undefined;
@@ -17,4 +17,4 @@ export type SegmentPart =
 	| "timeZoneName"
 	| "literal";
 
-export type { Month }
\ No newline at end of file
+export type { Month };

From 9064e93fa9e0fd43475eee7bcc5c0dcc3ac5ef22 Mon Sep 17 00:00:00 2001
From: Hunter Johnston <johnstonhuntera@gmail.com>
Date: Thu, 30 Nov 2023 10:16:11 -0500
Subject: [PATCH 171/217] redirect /docs to /docs/introductiong

---
 src/routes/docs/+page.ts | 6 ++++++
 1 file changed, 6 insertions(+)
 create mode 100644 src/routes/docs/+page.ts

diff --git a/src/routes/docs/+page.ts b/src/routes/docs/+page.ts
new file mode 100644
index 000000000..1a59957ab
--- /dev/null
+++ b/src/routes/docs/+page.ts
@@ -0,0 +1,6 @@
+import { redirect } from "@sveltejs/kit";
+import type { PageLoad } from "../$types";
+
+export const load: PageLoad = async () => {
+	throw redirect(303, "/docs/introduction");
+};

From 272b9d03ccfb0a8e07d71ca28e6455f988a7287e Mon Sep 17 00:00:00 2001
From: Hunter Johnston <johnstonhuntera@gmail.com>
Date: Thu, 30 Nov 2023 10:19:16 -0500
Subject: [PATCH 172/217] fix imports

---
 src/content/api-reference/extended-types/months.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/content/api-reference/extended-types/months.ts b/src/content/api-reference/extended-types/months.ts
index f663803ef..1bb3ef1cc 100644
--- a/src/content/api-reference/extended-types/months.ts
+++ b/src/content/api-reference/extended-types/months.ts
@@ -1,4 +1,4 @@
-import { DateValue } from "@internationalized/date";
+import type { DateValue } from "@internationalized/date";
 
 type Month = {
 	/**

From 7208a3a6acde0257a0679558c04e85926e5289b1 Mon Sep 17 00:00:00 2001
From: Hunter Johnston <johnstonhuntera@gmail.com>
Date: Thu, 30 Nov 2023 11:01:57 -0500
Subject: [PATCH 173/217] popover demo

---
 src/components/demos/popover-demo.svelte    | 132 +++++++-------------
 src/styles/app.postcss                      |  11 ++
 src/styles/themes/serendipity-midnight.json |  44 +++----
 src/styles/themes/serendipity-morning.json  |  44 +++----
 tailwind.config.ts                          |   3 +
 5 files changed, 103 insertions(+), 131 deletions(-)

diff --git a/src/components/demos/popover-demo.svelte b/src/components/demos/popover-demo.svelte
index f2cc2f67d..515a4dd1c 100644
--- a/src/components/demos/popover-demo.svelte
+++ b/src/components/demos/popover-demo.svelte
@@ -1,116 +1,74 @@
 <script lang="ts">
-	import { Popover, Label, Switch, Separator, Button } from "$lib";
-	import { Cookie } from "phosphor-svelte";
-
+	import { Popover, Separator, Toggle } from "$lib";
+	import { ImageSquare, LinkSimpleHorizontalBreak } from "phosphor-svelte";
 	import { flyAndScale } from "@/utils";
-
-	let necessary = true;
-	let marketing = false;
-	let shopping = false;
+	let open = true;
+	let width = 1024;
+	let height = 768;
 </script>
 
-<Popover.Root>
+<Popover.Root bind:open>
 	<Popover.Trigger
-		class="inline-flex h-12 items-center
-	justify-center whitespace-nowrap rounded-input bg-dark px-[21px]
-	text-[15px] font-semibold text-background shadow-mini transition-all hover:bg-dark/95 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-dark focus-visible:ring-offset-2 focus-visible:ring-offset-background active:scale-98"
+		class="inline-flex h-10
+	items-center justify-center whitespace-nowrap rounded-input border
+	border-border-input bg-background px-[21px] text-[15px] font-medium text-foreground shadow-mini transition-all hover:cursor-pointer hover:bg-muted active:scale-98"
 	>
-		Manage Cookies
+		Resize
 	</Popover.Trigger>
 	<Popover.Content
-		class="z-20 w-full max-w-[392px] rounded-card border border-muted bg-background p-5 shadow-card outline-none"
+		class="z-30 w-full max-w-[328px] rounded-[12px] border border-dark-10 bg-background p-4 shadow-popover"
 		transition={flyAndScale}
 		sideOffset={8}
 	>
 		<div class="flex items-center">
 			<div
-				class="mr-[13px] flex items-center justify-center rounded-full bg-muted sq-12"
+				class="mr-3 flex items-center justify-center rounded-full bg-muted sq-12"
 			>
-				<Cookie class="sq-6" />
+				<ImageSquare class="sq-6" />
 			</div>
 			<div class="flex flex-col">
-				<h4 class="text-[17px] font-semibold tracking-[-0.01em]">
-					Set Cookies
+				<h4 class="text-[17px] font-semibold leading-5 tracking-[-0.01em]">
+					Resize image
 				</h4>
 				<p class="text-sm font-medium text-muted-foreground">
-					Manage your cookie settings here
+					Resize your photos easily
 				</p>
 			</div>
 		</div>
-		<Separator.Root class="-mx-5 mb-7 mt-[17px] block h-px bg-muted" />
-		<div class="flex flex-col gap-7 pb-10 pl-2 pr-[2px]">
-			<div class="flex w-full items-center justify-between">
-				<div class="flex flex-col gap-0.5 font-medium">
-					<div class="flex items-center gap-1.5">
-						<Label.Root for="necessary" class="text-sm"
-							>Strictly necessary</Label.Root
-						>
-						<div
-							class="inline-flex h-5 items-center justify-center rounded-[30px] bg-accent px-2 text-[11px] text-accent-foreground"
-						>
-							required
-						</div>
-					</div>
-					<p class="text-[13px] text-muted-foreground">
-						These cookies are essential
-					</p>
-				</div>
-				<Switch.Root
-					id="necessary"
-					class="peer inline-flex h-[36px] min-h-[36px] w-[60px] shrink-0 cursor-pointer items-center rounded-full bg-dark-10 px-[3px] transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-foreground data-[state=unchecked]:bg-dark-10 data-[state=unchecked]:shadow-mini-inset"
-					bind:checked={necessary}
-					disabled
-				>
-					<Switch.Thumb
-						class="pointer-events-none block shrink-0 rounded-full bg-background transition-transform sq-[30px] data-[state=checked]:translate-x-6 data-[state=unchecked]:translate-x-0 data-[state=unchecked]:shadow-mini dark:border-border-input dark:shadow-mini dark:data-[state=unchecked]:border"
-					/>
-				</Switch.Root>
-			</div>
-			<div class="flex w-full items-center justify-between">
-				<div class="flex flex-col gap-0.5">
-					<Label.Root for="marketing" class="text-sm font-medium"
-						>Marketing cookies</Label.Root
+		<Separator.Root class="-mx-4 mb-6 mt-[17px] block h-px bg-dark-10" />
+		<div class="flex items-center pb-2">
+			<div class="mr-2 flex items-center">
+				<div class="relative mr-2">
+					<span class="sr-only">Width</span>
+					<span
+						aria-hidden
+						class="absolute left-5 top-4 text-xxs text-muted-foreground">W</span
 					>
-
-					<p class="text-[13px] font-medium text-muted-foreground">
-						These cookies are non-essential
-					</p>
-				</div>
-				<Switch.Root
-					id="marketing"
-					class="peer inline-flex h-[36px] min-h-[36px] w-[60px] shrink-0 cursor-pointer items-center rounded-full bg-dark-10 px-[3px] transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-foreground data-[state=unchecked]:bg-dark-10 data-[state=unchecked]:shadow-mini-inset"
-					bind:checked={marketing}
-				>
-					<Switch.Thumb
-						class="pointer-events-none block shrink-0 rounded-full bg-background transition-transform sq-[30px] data-[state=checked]:translate-x-6 data-[state=unchecked]:translate-x-0 data-[state=unchecked]:shadow-mini dark:border-border-input dark:shadow-mini dark:data-[state=unchecked]:border"
+					<input
+						type="number"
+						class="h-input w-[119px] rounded-10px border border-border-input pl-10 pr-2 text-sm text-foreground"
+						bind:value={width}
 					/>
-				</Switch.Root>
-			</div>
-			<div class="flex w-full items-center justify-between">
-				<div class="flex flex-col gap-0.5 font-medium">
-					<Label.Root for="shopping" class="text-sm"
-						>Shopping cookies</Label.Root
-					>
-
-					<p class="text-[13px] text-muted-foreground">
-						These cookies are non-essential
-					</p>
 				</div>
-				<Switch.Root
-					id="shopping"
-					class="peer inline-flex h-[36px] min-h-[36px] w-[60px] shrink-0 cursor-pointer items-center rounded-full bg-dark-10 px-[3px] transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-foreground data-[state=unchecked]:bg-dark-10 data-[state=unchecked]:shadow-mini-inset"
-					bind:checked={shopping}
-				>
-					<Switch.Thumb
-						class="pointer-events-none block shrink-0 rounded-full bg-background transition-transform sq-[30px] data-[state=checked]:translate-x-6 data-[state=unchecked]:translate-x-0 data-[state=unchecked]:shadow-mini dark:border-border-input dark:shadow-mini dark:data-[state=unchecked]:border"
+				<div class="relative">
+					<span class="sr-only">Height</span>
+					<span
+						aria-hidden
+						class="absolute left-5 top-4 text-xxs text-muted-foreground">H</span
+					>
+					<input
+						type="number"
+						class="h-input w-[119px] rounded-10px border border-border-input pl-10 pr-2 text-sm text-foreground"
+						bind:value={height}
 					/>
-				</Switch.Root>
+				</div>
 			</div>
+			<Toggle.Root
+				aria-label="toggle constrain portions"
+				class="inline-flex items-center justify-center rounded-[9px] bg-background transition-all sq-10 hover:bg-muted active:scale-98 data-[state=on]:bg-muted"
+			>
+				<LinkSimpleHorizontalBreak class="sq-6" />
+			</Toggle.Root>
 		</div>
-		<Button.Root
-			class="inline-flex h-input w-full items-center justify-center rounded-input bg-dark text-[15px] font-semibold text-background shadow-mini transition-all hover:bg-dark/95 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-dark focus-visible:ring-offset-2 focus-visible:ring-offset-background active:scale-98"
-		>
-			Save settings
-		</Button.Root>
 	</Popover.Content>
 </Popover.Root>
diff --git a/src/styles/app.postcss b/src/styles/app.postcss
index ea075fb61..c4b16773e 100644
--- a/src/styles/app.postcss
+++ b/src/styles/app.postcss
@@ -135,4 +135,15 @@
 	.link {
 		@apply inline-flex items-center gap-1 rounded-sm font-medium underline underline-offset-4 hover:text-foreground/80 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground focus-visible:ring-offset-2 focus-visible:ring-offset-background;
 	}
+
+	input::-webkit-outer-spin-button,
+	input::-webkit-inner-spin-button {
+		-webkit-appearance: none;
+		margin: 0;
+	}
+
+	/* Firefox */
+	input[type="number"] {
+		-moz-appearance: textfield;
+	}
 }
diff --git a/src/styles/themes/serendipity-midnight.json b/src/styles/themes/serendipity-midnight.json
index cc17dacf9..125cbee4a 100644
--- a/src/styles/themes/serendipity-midnight.json
+++ b/src/styles/themes/serendipity-midnight.json
@@ -33,7 +33,7 @@
 		"charts.orange": "#F8D2C9",
 		"charts.purple": "#9ccfd8",
 		"charts.red": "#ee8679",
-		"charts.yellow": "#a78bfa",
+		"charts.yellow": "#F1C774",
 		"checkbox.background": "#1C1E2D",
 		"checkbox.border": "#6B6D7C33",
 		"checkbox.foreground": "#DEE0EF",
@@ -101,7 +101,7 @@
 		"editor.wordHighlightStrongBorder": "#6B6D7C33",
 		"editorBracketHighlight.foreground1": "#ee867980",
 		"editorBracketHighlight.foreground2": "#5ba2d080",
-		"editorBracketHighlight.foreground3": "#a78bfa80",
+		"editorBracketHighlight.foreground3": "#F1C77480",
 		"editorBracketHighlight.foreground4": "#94b8ff80",
 		"editorBracketHighlight.foreground5": "#F8D2C980",
 		"editorBracketHighlight.foreground6": "#9ccfd880",
@@ -111,13 +111,13 @@
 		"editorBracketPairGuide.activeBackground2": "#F8D2C9",
 		"editorBracketPairGuide.activeBackground3": "#9ccfd8",
 		"editorBracketPairGuide.activeBackground4": "#94b8ff",
-		"editorBracketPairGuide.activeBackground5": "#a78bfa",
+		"editorBracketPairGuide.activeBackground5": "#F1C774",
 		"editorBracketPairGuide.activeBackground6": "#ee8679",
 		"editorBracketPairGuide.background1": "#5ba2d080",
 		"editorBracketPairGuide.background2": "#F8D2C980",
 		"editorBracketPairGuide.background3": "#9ccfd880",
 		"editorBracketPairGuide.background4": "#94b8ff80",
-		"editorBracketPairGuide.background5": "#a78bfa80",
+		"editorBracketPairGuide.background5": "#F1C77480",
 		"editorBracketPairGuide.background6": "#ee867980",
 		"editorCodeLens.foreground": "#F8D2C9",
 		"editorCursor.background": "#DEE0EF",
@@ -178,7 +178,7 @@
 		"editorOverviewRuler.modifiedForeground": "#F8D2C980",
 		"editorOverviewRuler.rangeHighlightForeground": "#6B6D7C66",
 		"editorOverviewRuler.selectionHighlightForeground": "#6B6D7C66",
-		"editorOverviewRuler.warningForeground": "#a78bfa80",
+		"editorOverviewRuler.warningForeground": "#F1C77480",
 		"editorOverviewRuler.wordHighlightForeground": "#6B6D7C33",
 		"editorOverviewRuler.wordHighlightStrongForeground": "#6B6D7C66",
 		"editorPane.background": "#0000",
@@ -194,7 +194,7 @@
 		"editorUnnecessaryCode.border": "#0000",
 		"editorUnnecessaryCode.opacity": "#00000080",
 		"editorWarning.border": "#0000",
-		"editorWarning.foreground": "#a78bfa",
+		"editorWarning.foreground": "#F1C774",
 		"editorWhitespace.foreground": "#6B6D7C",
 		"editorWidget.background": "#1C1E2D",
 		"editorWidget.border": "#232534",
@@ -218,8 +218,8 @@
 		"gitDecoration.renamedResourceForeground": "#5ba2d0",
 		"gitDecoration.stageDeletedResourceForeground": "#ee8679",
 		"gitDecoration.stageModifiedResourceForeground": "#9ccfd8",
-		"gitDecoration.submoduleResourceForeground": "#a78bfa",
-		"gitDecoration.untrackedResourceForeground": "#a78bfa",
+		"gitDecoration.submoduleResourceForeground": "#F1C774",
+		"gitDecoration.untrackedResourceForeground": "#F1C774",
 		"icon.foreground": "#8D8F9E",
 		"input.background": "#23253480",
 		"input.border": "#6B6D7C33",
@@ -262,7 +262,7 @@
 		"list.inactiveSelectionForeground": "#DEE0EF",
 		"list.inactiveSelectionIconForeground": "#8D8F9E",
 		"list.invalidItemForeground": "#ee8679",
-		"list.warningForeground": "#a78bfa",
+		"list.warningForeground": "#F1C774",
 		"listFilterWidget.background": "#1C1E2D",
 		"listFilterWidget.noMatchesOutline": "#ee8679",
 		"listFilterWidget.outline": "#232534",
@@ -279,15 +279,15 @@
 		"merge.border": "#232534",
 		"merge.commonContentBackground": "#6B6D7C33",
 		"merge.commonHeaderBackground": "#6B6D7C33",
-		"merge.currentContentBackground": "#a78bfa80",
-		"merge.currentHeaderBackground": "#a78bfa80",
+		"merge.currentContentBackground": "#F1C77480",
+		"merge.currentHeaderBackground": "#F1C77480",
 		"merge.incomingContentBackground": "#94b8ff80",
 		"merge.incomingHeaderBackground": "#94b8ff80",
 		"minimap.background": "#1C1E2D",
 		"minimap.errorHighlight": "#ee867980",
 		"minimap.findMatchHighlight": "#6B6D7C33",
 		"minimap.selectionHighlight": "#6B6D7C33",
-		"minimap.warningHighlight": "#a78bfa80",
+		"minimap.warningHighlight": "#F1C77480",
 		"minimapGutter.addedBackground": "#94b8ff",
 		"minimapGutter.deletedBackground": "#ee8679",
 		"minimapGutter.modifiedBackground": "#F8D2C9",
@@ -303,7 +303,7 @@
 		"notifications.foreground": "#DEE0EF",
 		"notificationsErrorIcon.foreground": "#ee8679",
 		"notificationsInfoIcon.foreground": "#94b8ff",
-		"notificationsWarningIcon.foreground": "#a78bfa",
+		"notificationsWarningIcon.foreground": "#F1C774",
 		"notificationToast.border": "#6B6D7C33",
 		"panel.background": "#1C1E2D",
 		"panel.border": "#0000",
@@ -331,7 +331,7 @@
 		"ports.iconRunningProcessForeground": "#F8D2C9",
 		"problemsErrorIcon.foreground": "#ee8679",
 		"problemsInfoIcon.foreground": "#94b8ff",
-		"problemsWarningIcon.foreground": "#a78bfa",
+		"problemsWarningIcon.foreground": "#F1C774",
 		"progressBar.background": "#F8D2C9",
 		"quickInput.background": "#1C1E2D",
 		"quickInput.foreground": "#8D8F9E",
@@ -366,7 +366,7 @@
 		"statusBarItem.prominentForeground": "#DEE0EF",
 		"statusBarItem.prominentHoverBackground": "#6B6D7C33",
 		"statusBarItem.remoteBackground": "#151726",
-		"statusBarItem.remoteForeground": "#a78bfa",
+		"statusBarItem.remoteForeground": "#F1C774",
 		"statusBarItem.errorBackground": "#151726",
 		"statusBarItem.errorForeground": "#ee8679",
 		"symbolIcon.arrayForeground": "#8D8F9E",
@@ -423,13 +423,13 @@
 		"terminal.ansiBrightMagenta": "#9ccfd8",
 		"terminal.ansiBrightRed": "#ee8679",
 		"terminal.ansiBrightWhite": "#DEE0EF",
-		"terminal.ansiBrightYellow": "#a78bfa",
+		"terminal.ansiBrightYellow": "#F1C774",
 		"terminal.ansiCyan": "#F8D2C9",
 		"terminal.ansiGreen": "#5ba2d0",
 		"terminal.ansiMagenta": "#9ccfd8",
 		"terminal.ansiRed": "#ee8679",
 		"terminal.ansiWhite": "#DEE0EF",
-		"terminal.ansiYellow": "#a78bfa",
+		"terminal.ansiYellow": "#F1C774",
 		"terminal.dropBackground": "#6B6D7C33",
 		"terminal.foreground": "#DEE0EF",
 		"terminal.selectionBackground": "#6B6D7C33",
@@ -441,7 +441,7 @@
 		"textCodeBlock.background": "#1C1E2D",
 		"textLink.activeForeground": "#9ccfd8e6",
 		"textLink.foreground": "#9ccfd8",
-		"textPreformat.foreground": "#a78bfa",
+		"textPreformat.foreground": "#F1C774",
 		"textSeparator.foreground": "#8D8F9E",
 		"titleBar.activeBackground": "#151726",
 		"titleBar.activeForeground": "#8D8F9E",
@@ -548,7 +548,7 @@
 		{
 			"scope": "meta.property-value.css",
 			"settings": {
-				"foreground": "#a78bfa"
+				"foreground": "#F1C774"
 			}
 		},
 		{
@@ -572,7 +572,7 @@
 		{
 			"scope": ["punctuation.definition.string"],
 			"settings": {
-				"foreground": "#a78bfa"
+				"foreground": "#F1C774"
 			}
 		},
 		{
@@ -590,7 +590,7 @@
 		{
 			"scope": ["string"],
 			"settings": {
-				"foreground": "#a78bfa"
+				"foreground": "#F1C774"
 			}
 		},
 		{
@@ -602,7 +602,7 @@
 		{
 			"scope": ["support.constant"],
 			"settings": {
-				"foreground": "#a78bfa"
+				"foreground": "#F1C774"
 			}
 		},
 		{
diff --git a/src/styles/themes/serendipity-morning.json b/src/styles/themes/serendipity-morning.json
index 80c417b7a..8046e6226 100644
--- a/src/styles/themes/serendipity-morning.json
+++ b/src/styles/themes/serendipity-morning.json
@@ -32,7 +32,7 @@
 		"charts.orange": "#F19A8E",
 		"charts.purple": "#77AAB3",
 		"charts.red": "#D26A5D",
-		"charts.yellow": "#886CDB",
+		"charts.yellow": "#D48F44",
 		"checkbox.background": "#F1F1F4",
 		"checkbox.border": "#6e6a8614",
 		"checkbox.foreground": "#4E5377",
@@ -100,7 +100,7 @@
 		"editor.wordHighlightStrongBorder": "#6e6a8614",
 		"editorBracketHighlight.foreground1": "#D26A5D80",
 		"editorBracketHighlight.foreground2": "#3788BE80",
-		"editorBracketHighlight.foreground3": "#886CDB80",
+		"editorBracketHighlight.foreground3": "#D48F4480",
 		"editorBracketHighlight.foreground4": "#4F86AD80",
 		"editorBracketHighlight.foreground5": "#F19A8E80",
 		"editorBracketHighlight.foreground6": "#77AAB380",
@@ -110,13 +110,13 @@
 		"editorBracketPairGuide.activeBackground2": "#F19A8E",
 		"editorBracketPairGuide.activeBackground3": "#77AAB3",
 		"editorBracketPairGuide.activeBackground4": "#4F86AD",
-		"editorBracketPairGuide.activeBackground5": "#886CDB",
+		"editorBracketPairGuide.activeBackground5": "#D48F44",
 		"editorBracketPairGuide.activeBackground6": "#D26A5D",
 		"editorBracketPairGuide.background1": "#3788BE80",
 		"editorBracketPairGuide.background2": "#F19A8E80",
 		"editorBracketPairGuide.background3": "#77AAB380",
 		"editorBracketPairGuide.background4": "#4F86AD80",
-		"editorBracketPairGuide.background5": "#886CDB80",
+		"editorBracketPairGuide.background5": "#D48F4480",
 		"editorBracketPairGuide.background6": "#D26A5D80",
 		"editorCodeLens.foreground": "#F19A8E",
 		"editorCursor.background": "#4E5377",
@@ -177,7 +177,7 @@
 		"editorOverviewRuler.modifiedForeground": "#F19A8E80",
 		"editorOverviewRuler.rangeHighlightForeground": "#6e6a8626",
 		"editorOverviewRuler.selectionHighlightForeground": "#6e6a8626",
-		"editorOverviewRuler.warningForeground": "#886CDB80",
+		"editorOverviewRuler.warningForeground": "#D48F4480",
 		"editorOverviewRuler.wordHighlightForeground": "#6e6a8614",
 		"editorOverviewRuler.wordHighlightStrongForeground": "#6e6a8626",
 		"editorPane.background": "#0000",
@@ -193,7 +193,7 @@
 		"editorUnnecessaryCode.border": "#0000",
 		"editorUnnecessaryCode.opacity": "#00000080",
 		"editorWarning.border": "#0000",
-		"editorWarning.foreground": "#886CDB",
+		"editorWarning.foreground": "#D48F44",
 		"editorWhitespace.foreground": "#8388AD",
 		"editorWidget.background": "#F1F1F4",
 		"editorWidget.border": "#D8DAE4",
@@ -217,8 +217,8 @@
 		"gitDecoration.renamedResourceForeground": "#3788BE",
 		"gitDecoration.stageDeletedResourceForeground": "#D26A5D",
 		"gitDecoration.stageModifiedResourceForeground": "#77AAB3",
-		"gitDecoration.submoduleResourceForeground": "#886CDB",
-		"gitDecoration.untrackedResourceForeground": "#886CDB",
+		"gitDecoration.submoduleResourceForeground": "#D48F44",
+		"gitDecoration.untrackedResourceForeground": "#D48F44",
 		"icon.foreground": "#5F6488",
 		"input.background": "#D8DAE480",
 		"input.border": "#6e6a8614",
@@ -261,7 +261,7 @@
 		"list.inactiveSelectionForeground": "#4E5377",
 		"list.inactiveSelectionIconForeground": "#5F6488",
 		"list.invalidItemForeground": "#D26A5D",
-		"list.warningForeground": "#886CDB",
+		"list.warningForeground": "#D48F44",
 		"listFilterWidget.background": "#F1F1F4",
 		"listFilterWidget.noMatchesOutline": "#D26A5D",
 		"listFilterWidget.outline": "#D8DAE4",
@@ -278,15 +278,15 @@
 		"merge.border": "#D8DAE4",
 		"merge.commonContentBackground": "#6e6a8614",
 		"merge.commonHeaderBackground": "#6e6a8614",
-		"merge.currentContentBackground": "#886CDB80",
-		"merge.currentHeaderBackground": "#886CDB80",
+		"merge.currentContentBackground": "#D48F4480",
+		"merge.currentHeaderBackground": "#D48F4480",
 		"merge.incomingContentBackground": "#4F86AD80",
 		"merge.incomingHeaderBackground": "#4F86AD80",
 		"minimap.background": "#F1F1F4",
 		"minimap.errorHighlight": "#D26A5D80",
 		"minimap.findMatchHighlight": "#6e6a8614",
 		"minimap.selectionHighlight": "#6e6a8614",
-		"minimap.warningHighlight": "#886CDB80",
+		"minimap.warningHighlight": "#D48F4480",
 		"minimapGutter.addedBackground": "#4F86AD",
 		"minimapGutter.deletedBackground": "#D26A5D",
 		"minimapGutter.modifiedBackground": "#F19A8E",
@@ -302,7 +302,7 @@
 		"notifications.foreground": "#4E5377",
 		"notificationsErrorIcon.foreground": "#D26A5D",
 		"notificationsInfoIcon.foreground": "#4F86AD",
-		"notificationsWarningIcon.foreground": "#886CDB",
+		"notificationsWarningIcon.foreground": "#D48F44",
 		"notificationToast.border": "#6e6a8614",
 		"panel.background": "#F1F1F4",
 		"panel.border": "#0000",
@@ -330,7 +330,7 @@
 		"ports.iconRunningProcessForeground": "#F19A8E",
 		"problemsErrorIcon.foreground": "#D26A5D",
 		"problemsInfoIcon.foreground": "#4F86AD",
-		"problemsWarningIcon.foreground": "#886CDB",
+		"problemsWarningIcon.foreground": "#D48F44",
 		"progressBar.background": "#F19A8E",
 		"quickInput.background": "#F1F1F4",
 		"quickInput.foreground": "#5F6488",
@@ -365,7 +365,7 @@
 		"statusBarItem.prominentForeground": "#4E5377",
 		"statusBarItem.prominentHoverBackground": "#6e6a8614",
 		"statusBarItem.remoteBackground": "#FDFDFE",
-		"statusBarItem.remoteForeground": "#886CDB",
+		"statusBarItem.remoteForeground": "#D48F44",
 		"statusBarItem.errorBackground": "#FDFDFE",
 		"statusBarItem.errorForeground": "#D26A5D",
 		"symbolIcon.arrayForeground": "#5F6488",
@@ -427,8 +427,8 @@
 		"terminal.ansiBrightMagenta": "#77AAB3",
 		"terminal.ansiRed": "#D26A5D",
 		"terminal.ansiBrightRed": "#D26A5D",
-		"terminal.ansiBrightYellow": "#886CDB",
-		"terminal.ansiYellow": "#886CDB",
+		"terminal.ansiBrightYellow": "#D48F44",
+		"terminal.ansiYellow": "#D48F44",
 		"terminal.dropBackground": "#6e6a8614",
 		"terminal.foreground": "#4E5377",
 		"terminal.selectionBackground": "#6e6a8614",
@@ -440,7 +440,7 @@
 		"textCodeBlock.background": "#F1F1F4",
 		"textLink.activeForeground": "#77AAB3e6",
 		"textLink.foreground": "#77AAB3",
-		"textPreformat.foreground": "#886CDB",
+		"textPreformat.foreground": "#D48F44",
 		"textSeparator.foreground": "#5F6488",
 		"titleBar.activeBackground": "#FDFDFE",
 		"titleBar.activeForeground": "#5F6488",
@@ -547,7 +547,7 @@
 		{
 			"scope": "meta.property-value.css",
 			"settings": {
-				"foreground": "#886CDB"
+				"foreground": "#D48F44"
 			}
 		},
 		{
@@ -571,7 +571,7 @@
 		{
 			"scope": ["punctuation.definition.string"],
 			"settings": {
-				"foreground": "#886CDB"
+				"foreground": "#D48F44"
 			}
 		},
 		{
@@ -589,7 +589,7 @@
 		{
 			"scope": ["string"],
 			"settings": {
-				"foreground": "#886CDB"
+				"foreground": "#D48F44"
 			}
 		},
 		{
@@ -601,7 +601,7 @@
 		{
 			"scope": ["support.constant"],
 			"settings": {
-				"foreground": "#886CDB"
+				"foreground": "#D48F44"
 			}
 		},
 		{
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 1d4c37df0..eac56eb58 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -51,6 +51,9 @@ export default {
 				mono: ["Source Code Pro", ...fontFamily.mono],
 				alt: ["Courier", ...fontFamily.sans]
 			},
+			fontSize: {
+				xxs: "10px"
+			},
 			borderWidth: {
 				6: "6px"
 			},

From 02ff0c8ded41c0781b119c712d26e0d62c50051e Mon Sep 17 00:00:00 2001
From: Hunter Johnston <johnstonhuntera@gmail.com>
Date: Thu, 30 Nov 2023 11:03:28 -0500
Subject: [PATCH 174/217] fix: popover demo input bg

---
 src/components/demos/popover-demo.svelte | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/demos/popover-demo.svelte b/src/components/demos/popover-demo.svelte
index 515a4dd1c..b5bb64cc8 100644
--- a/src/components/demos/popover-demo.svelte
+++ b/src/components/demos/popover-demo.svelte
@@ -46,7 +46,7 @@
 					>
 					<input
 						type="number"
-						class="h-input w-[119px] rounded-10px border border-border-input pl-10 pr-2 text-sm text-foreground"
+						class="h-input w-[119px] rounded-10px border border-border-input bg-background pl-10 pr-2 text-sm text-foreground"
 						bind:value={width}
 					/>
 				</div>
@@ -58,7 +58,7 @@
 					>
 					<input
 						type="number"
-						class="h-input w-[119px] rounded-10px border border-border-input pl-10 pr-2 text-sm text-foreground"
+						class="h-input w-[119px] rounded-10px border border-border-input bg-background pl-10 pr-2 text-sm text-foreground"
 						bind:value={height}
 					/>
 				</div>

From 077276021ba4c63095434a0210ddb6632c966e20 Mon Sep 17 00:00:00 2001
From: Hunter Johnston <johnstonhuntera@gmail.com>
Date: Thu, 30 Nov 2023 11:03:56 -0500
Subject: [PATCH 175/217] popover demo

---
 src/components/demos/popover-demo.svelte | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/demos/popover-demo.svelte b/src/components/demos/popover-demo.svelte
index b5bb64cc8..7ff31e49e 100644
--- a/src/components/demos/popover-demo.svelte
+++ b/src/components/demos/popover-demo.svelte
@@ -2,12 +2,12 @@
 	import { Popover, Separator, Toggle } from "$lib";
 	import { ImageSquare, LinkSimpleHorizontalBreak } from "phosphor-svelte";
 	import { flyAndScale } from "@/utils";
-	let open = true;
+
 	let width = 1024;
 	let height = 768;
 </script>
 
-<Popover.Root bind:open>
+<Popover.Root>
 	<Popover.Trigger
 		class="inline-flex h-10
 	items-center justify-center whitespace-nowrap rounded-input border

From 96ef625396cfd53a61838ea4c8e026e95e899897 Mon Sep 17 00:00:00 2001
From: Hunter Johnston <johnstonhuntera@gmail.com>
Date: Thu, 30 Nov 2023 11:06:02 -0500
Subject: [PATCH 176/217] fix attr type in api ref

---
 src/content/api-reference/helpers.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/content/api-reference/helpers.ts b/src/content/api-reference/helpers.ts
index b96103719..387f47474 100644
--- a/src/content/api-reference/helpers.ts
+++ b/src/content/api-reference/helpers.ts
@@ -11,7 +11,7 @@ export const asChild = {
 export const builderSlotProp: PropSchema = {
 	type: {
 		type: C.OBJECT,
-		definition: "{ [k: string]: any; action: Action<any, any, any>}"
+		definition: "{ [k: string]: any; action: Action<any, any, any>&nbsp;}"
 	},
 	description:
 		"The builder attributes and actions to apply to the element if using the `asChild` prop with [delegation](/docs/delegation)."
@@ -20,7 +20,7 @@ export const builderSlotProp: PropSchema = {
 export const attrsSlotProp: PropSchema = {
 	type: {
 		type: C.OBJECT,
-		definition: "Record<string, string>"
+		definition: "Record&lt;string, string&gt;"
 	},
 	description:
 		"Additional attributes to apply to the element if using the `asChild` prop with [delegation](/docs/delegation)."

From ca314e1c2374bd6de2a0dfc1ae7b28a80b6a44a7 Mon Sep 17 00:00:00 2001
From: Hunter Johnston <johnstonhuntera@gmail.com>
Date: Thu, 30 Nov 2023 11:12:17 -0500
Subject: [PATCH 177/217] fix tests

---
 src/lib/bits/checkbox/components/checkbox.svelte   | 1 +
 src/lib/bits/select/components/select-input.svelte | 7 ++++++-
 2 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/lib/bits/checkbox/components/checkbox.svelte b/src/lib/bits/checkbox/components/checkbox.svelte
index ff6f6d9ee..cbcfed20d 100644
--- a/src/lib/bits/checkbox/components/checkbox.svelte
+++ b/src/lib/bits/checkbox/components/checkbox.svelte
@@ -63,6 +63,7 @@
 		{...attrs}
 		on:m-click={dispatch}
 		on:m-keydown={dispatch}
+		disabled={disabled ? true : undefined}
 	>
 		<slot {...slotProps} />
 	</button>
diff --git a/src/lib/bits/select/components/select-input.svelte b/src/lib/bits/select/components/select-input.svelte
index 2ab5c34cd..8548d0a4a 100644
--- a/src/lib/bits/select/components/select-input.svelte
+++ b/src/lib/bits/select/components/select-input.svelte
@@ -24,5 +24,10 @@
 {#if asChild}
 	<slot {...slotProps} />
 {:else}
-	<input use:melt={builder} {...$$restProps} {...attrs} />
+	<input
+		use:melt={builder}
+		{...$$restProps}
+		{...attrs}
+		disabled={$disabled ? true : undefined}
+	/>
 {/if}

From cd2ff58e4f6b6b8acb31a459e68fe76bb64391b3 Mon Sep 17 00:00:00 2001
From: Hunter Johnston <johnstonhuntera@gmail.com>
Date: Thu, 30 Nov 2023 18:01:51 -0500
Subject: [PATCH 178/217] menubar updates

---
 src/components/demos/menubar-demo.svelte | 69 +++++++++++++++++++-----
 src/components/icons/index.ts            |  2 +
 src/components/icons/switch-off.svelte   |  7 +++
 src/components/icons/switch-on.svelte    |  7 +++
 4 files changed, 72 insertions(+), 13 deletions(-)
 create mode 100644 src/components/icons/switch-off.svelte
 create mode 100644 src/components/icons/switch-on.svelte

diff --git a/src/components/demos/menubar-demo.svelte b/src/components/demos/menubar-demo.svelte
index c86edde7f..c8533a04c 100644
--- a/src/components/demos/menubar-demo.svelte
+++ b/src/components/demos/menubar-demo.svelte
@@ -1,17 +1,15 @@
 <script lang="ts">
 	import { Menubar } from "$lib";
 	import { flyAndScale } from "@/utils";
+	import { SwitchOn, SwitchOff } from "@/components/icons";
 	import { CaretRight, Cat, Check } from "phosphor-svelte";
 
 	let bookmarks = false;
 	let fullUrls = true;
-
 	let pixelGrid = true;
 	let layoutGrid = false;
-
 	let view = "table";
-
-	const profileRadioValue = "benoit";
+	let profile = "pavel";
 </script>
 
 <Menubar.Root
@@ -36,9 +34,14 @@
 				bind:checked={pixelGrid}
 			>
 				Pixel grid
-				<Menubar.CheckboxIndicator class="ml-auto ">
-					<Check class="sq-5" />
+				<Menubar.CheckboxIndicator class="ml-auto">
+					<SwitchOn />
 				</Menubar.CheckboxIndicator>
+				{#if !pixelGrid}
+					<div class="ml-auto">
+						<SwitchOff />
+					</div>
+				{/if}
 			</Menubar.CheckboxItem>
 			<Menubar.CheckboxItem
 				class="flex h-10 select-none items-center rounded-button py-3 pl-3 pr-1.5 text-sm font-medium outline-none data-[highlighted]:bg-muted"
@@ -46,8 +49,13 @@
 			>
 				Layout grid
 				<Menubar.CheckboxIndicator class="ml-auto">
-					<Check class="sq-5" />
+					<SwitchOn />
 				</Menubar.CheckboxIndicator>
+				{#if !layoutGrid}
+					<div class="ml-auto">
+						<SwitchOff />
+					</div>
+				{/if}
 			</Menubar.CheckboxItem>
 			<Menubar.Separator class="my-1 -ml-1 -mr-1 block h-px bg-muted" />
 			<Menubar.RadioGroup bind:value={view}>
@@ -161,12 +169,32 @@
 		>
 			<Menubar.CheckboxItem
 				class="flex h-10 select-none items-center rounded-button py-3 pl-3 pr-1.5 text-sm font-medium outline-none data-[highlighted]:bg-muted"
-				bind:checked={bookmarks}>Show Bookmarks Bar</Menubar.CheckboxItem
+				bind:checked={bookmarks}
 			>
+				Show Bookmarks Bar
+				<Menubar.CheckboxIndicator class="ml-auto">
+					<SwitchOn />
+				</Menubar.CheckboxIndicator>
+				{#if !bookmarks}
+					<div class="ml-auto">
+						<SwitchOff />
+					</div>
+				{/if}
+			</Menubar.CheckboxItem>
 			<Menubar.CheckboxItem
 				class="flex h-10 select-none items-center rounded-button py-3 pl-3 pr-1.5 text-sm font-medium outline-none data-[highlighted]:bg-muted"
-				bind:checked={fullUrls}>Show Full URLs</Menubar.CheckboxItem
+				bind:checked={fullUrls}
 			>
+				Show Full URLs
+				<Menubar.CheckboxIndicator class="ml-auto">
+					<SwitchOn />
+				</Menubar.CheckboxIndicator>
+				{#if !fullUrls}
+					<div class="ml-auto">
+						<SwitchOff />
+					</div>
+				{/if}
+			</Menubar.CheckboxItem>
 			<Menubar.Separator />
 			<Menubar.Item
 				class="flex h-10 select-none items-center rounded-button py-3 pl-3 pr-1.5 text-sm font-medium outline-none data-[highlighted]:bg-muted"
@@ -199,19 +227,34 @@
 			align="start"
 			sideOffset={3}
 		>
-			<Menubar.RadioGroup value={profileRadioValue}>
+			<Menubar.RadioGroup bind:value={profile}>
 				<Menubar.RadioItem
 					class="flex h-10 select-none items-center rounded-button py-3 pl-3 pr-1.5 text-sm font-medium outline-none data-[highlighted]:bg-muted"
-					value="andy">Andy</Menubar.RadioItem
+					value="hunter"
 				>
+					Hunter
+					<Menubar.RadioIndicator class="ml-auto">
+						<Check class="sq-5" />
+					</Menubar.RadioIndicator>
+				</Menubar.RadioItem>
 				<Menubar.RadioItem
 					class="flex h-10 select-none items-center rounded-button py-3 pl-3 pr-1.5 text-sm font-medium outline-none data-[highlighted]:bg-muted"
-					value="benoit">Benoit</Menubar.RadioItem
+					value="pavel"
 				>
+					Pavel
+					<Menubar.RadioIndicator class="ml-auto">
+						<Check class="sq-5" />
+					</Menubar.RadioIndicator>
+				</Menubar.RadioItem>
 				<Menubar.RadioItem
 					class="flex h-10 select-none items-center rounded-button py-3 pl-3 pr-1.5 text-sm font-medium outline-none data-[highlighted]:bg-muted"
-					value="Luis">Luis</Menubar.RadioItem
+					value="adrian"
 				>
+					Adrian
+					<Menubar.RadioIndicator class="ml-auto">
+						<Check class="sq-5" />
+					</Menubar.RadioIndicator>
+				</Menubar.RadioItem>
 			</Menubar.RadioGroup>
 			<Menubar.Separator />
 			<Menubar.Item
diff --git a/src/components/icons/index.ts b/src/components/icons/index.ts
index dedb01ee7..2c5e325eb 100644
--- a/src/components/icons/index.ts
+++ b/src/components/icons/index.ts
@@ -7,6 +7,8 @@ export { default as Aria } from "./aria.svelte";
 export { default as Npm } from "./npm.svelte";
 export { default as Pnpm } from "./pnpm.svelte";
 export { default as Yarn } from "./yarn.svelte";
+export { default as SwitchOn } from "./switch-on.svelte";
+export { default as SwitchOff } from "./switch-off.svelte";
 export { default as Logo } from "./logo.svelte";
 
 export type IconProps = Partial<HTMLAttributes<SVGElement>> & {
diff --git a/src/components/icons/switch-off.svelte b/src/components/icons/switch-off.svelte
new file mode 100644
index 000000000..32a31f53f
--- /dev/null
+++ b/src/components/icons/switch-off.svelte
@@ -0,0 +1,7 @@
+<div
+	class="peer inline-flex h-[15.6px] w-[26px] shrink-0 items-center rounded-full bg-dark-10 px-[3px] shadow-mini-inset transition-colors"
+>
+	<span
+		class="pointer-events-none block shrink-0 translate-x-0 rounded-full bg-background shadow-mini transition-transform sq-[13px] dark:border dark:border-border-input dark:shadow-mini"
+	/>
+</div>
diff --git a/src/components/icons/switch-on.svelte b/src/components/icons/switch-on.svelte
new file mode 100644
index 000000000..24accec8a
--- /dev/null
+++ b/src/components/icons/switch-on.svelte
@@ -0,0 +1,7 @@
+<div
+	class="peer inline-flex h-[15.6px] min-h-[15.6px] w-[26px] shrink-0 items-center rounded-full bg-dark-10 bg-foreground px-[1.5px]"
+>
+	<span
+		class="pointer-events-none block shrink-0 translate-x-[10px] rounded-full bg-background sq-[13px] dark:border-border-input dark:shadow-mini"
+	/>
+</div>

From d3d50af97feb1360f057249007862679fe03b38d Mon Sep 17 00:00:00 2001
From: Hunter Johnston <johnstonhuntera@gmail.com>
Date: Thu, 30 Nov 2023 18:10:52 -0500
Subject: [PATCH 179/217] radio group updates

---
 src/components/demos/radio-group-demo.svelte | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/components/demos/radio-group-demo.svelte b/src/components/demos/radio-group-demo.svelte
index 5d0fb27d5..6de6778f4 100644
--- a/src/components/demos/radio-group-demo.svelte
+++ b/src/components/demos/radio-group-demo.svelte
@@ -4,32 +4,32 @@
 
 <RadioGroup.Root class="flex flex-col gap-4 text-sm font-medium">
 	<div
-		class="group flex cursor-pointer select-none items-center gap-3 text-foreground/50 transition-colors [&:has([data-state=checked])]:text-foreground"
+		class="group flex cursor-pointer select-none items-center gap-3 text-foreground transition-all"
 	>
 		<RadioGroup.Item
 			id="amazing"
 			value="amazing"
-			class="shrink-0 rounded-full border-2 border-foreground/40 ring-offset-1 transition-all duration-200 sq-5 focus:outline-none focus-visible:ring-2 focus-visible:ring-foreground/70 data-[state=checked]:border-6 data-[state=checked]:border-foreground data-[state=checked]:group-hover:border-foreground"
+			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"
 		/>
 		<Label.Root for="amazing">Amazing</Label.Root>
 	</div>
 	<div
-		class="group flex cursor-pointer select-none items-center gap-3 text-foreground/50 transition-colors [&:has([data-state=checked])]:text-foreground"
+		class="group flex cursor-pointer select-none items-center gap-3 text-foreground transition-all"
 	>
 		<RadioGroup.Item
 			id="average"
 			value="average"
-			class="shrink-0 rounded-full border-2 border-foreground/40 ring-offset-1 transition-all duration-200 sq-5 focus:outline-none focus-visible:ring-2 focus-visible:ring-foreground/70 data-[state=checked]:border-6 data-[state=checked]:border-foreground data-[state=checked]:group-hover:border-foreground "
+			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"
 		/>
 		<Label.Root for="average">Average</Label.Root>
 	</div>
 	<div
-		class="group flex cursor-pointer select-none items-center gap-3 text-foreground/50 transition-colors [&:has([data-state=checked])]:text-foreground"
+		class="group flex cursor-pointer select-none items-center gap-3 text-foreground transition-all"
 	>
 		<RadioGroup.Item
 			id="terrible"
 			value="terrible"
-			class="shrink-0 rounded-full border-2 border-foreground/40 ring-offset-1 transition-all duration-200 sq-5 focus:outline-none focus-visible:ring-2 focus-visible:ring-foreground/70 data-[state=checked]:border-6 data-[state=checked]:border-foreground data-[state=checked]:group-hover:border-foreground"
+			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"
 		/>
 		<Label.Root for="terrible">Terrible</Label.Root>
 	</div>

From 1ec7799b64a613094ff464296925acd513df8cb8 Mon Sep 17 00:00:00 2001
From: Hunter Johnston <johnstonhuntera@gmail.com>
Date: Thu, 30 Nov 2023 20:23:28 -0500
Subject: [PATCH 180/217] calendar styles

---
 src/components/demos/calendar-demo.svelte     | 34 ++++++++++++-------
 .../demos/range-calendar-demo.svelte          | 32 ++++++++++-------
 .../calendar/components/calendar-cell.svelte  |  2 +-
 .../components/range-calendar-cell.svelte     |  2 +-
 tailwind.config.ts                            |  3 +-
 5 files changed, 46 insertions(+), 27 deletions(-)

diff --git a/src/components/demos/calendar-demo.svelte b/src/components/demos/calendar-demo.svelte
index 651a6174f..f0c657a19 100644
--- a/src/components/demos/calendar-demo.svelte
+++ b/src/components/demos/calendar-demo.svelte
@@ -1,24 +1,29 @@
 <script lang="ts">
 	import { Calendar } from "$lib";
 	import { CaretRight, CaretLeft } from "phosphor-svelte";
+
+	const isDateUnavailable: Calendar.Props["isDateUnavailable"] = (date) => {
+		return date.day === 17 || date.day === 18;
+	};
 </script>
 
 <Calendar.Root
-	class="mt-6 rounded-card border border-dark-10 bg-background p-6 shadow-card"
+	class="mt-6 rounded-[15px] border border-dark-10 bg-background p-[22px] shadow-card"
 	let:months
 	let:daysOfWeek
+	{isDateUnavailable}
 >
 	<Calendar.Header class="flex items-center justify-between">
 		<Calendar.PrevButton
-			class="inline-flex items-center justify-center rounded-[7px] border border-border-input bg-background shadow-btn transition-all sq-7 hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground focus-visible:ring-offset-2 focus-visible:ring-offset-background active:scale-98"
+			class="inline-flex items-center justify-center rounded-9px bg-background transition-all sq-10 hover:bg-muted active:scale-98"
 		>
-			<CaretLeft class="h-4 w-4" />
+			<CaretLeft class="sq-6" />
 		</Calendar.PrevButton>
-		<Calendar.Heading class="font-medium" />
+		<Calendar.Heading class="text-[15px] font-medium" />
 		<Calendar.NextButton
-			class="inline-flex items-center justify-center rounded-[7px] border border-border-input bg-background shadow-btn transition-all sq-7 hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground focus-visible:ring-offset-2 focus-visible:ring-offset-background active:scale-98"
+			class="inline-flex items-center justify-center rounded-9px bg-background transition-all sq-10 hover:bg-muted active:scale-98"
 		>
-			<CaretRight class="h-4 w-4" />
+			<CaretRight class="sq-6" />
 		</Calendar.NextButton>
 	</Calendar.Header>
 	<div
@@ -27,10 +32,10 @@
 		{#each months as month}
 			<Calendar.Grid class="w-full border-collapse select-none space-y-1">
 				<Calendar.GridHead>
-					<Calendar.GridRow class="flex w-full justify-between">
+					<Calendar.GridRow class="mb-1 flex w-full justify-between">
 						{#each daysOfWeek as day}
 							<Calendar.HeadCell
-								class="w-8 rounded-md text-[0.8rem] font-medium text-muted-foreground"
+								class="w-10 rounded-md text-xs !font-normal text-muted-foreground"
 							>
 								<div>{day}</div>
 							</Calendar.HeadCell>
@@ -39,17 +44,22 @@
 				</Calendar.GridHead>
 				<Calendar.GridBody>
 					{#each month.weeks as weekDates}
-						<Calendar.GridRow class="mt-1 flex w-full gap-0.5">
+						<Calendar.GridRow class="flex w-full">
 							{#each weekDates as date}
 								<Calendar.Cell
 									{date}
-									class="relative h-8 w-8 p-0 text-center text-sm"
+									class="relative !p-0 text-center text-sm sq-10"
 								>
 									<Calendar.Date
 										{date}
 										month={month.value}
-										class="inline-flex h-8 w-8 items-center justify-center whitespace-nowrap rounded-[7px] bg-background p-0 text-sm font-normal text-foreground ring-offset-background transition-colors hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground focus-visible:ring-offset-2 data-[disabled]:pointer-events-none data-[outside-month]:pointer-events-none data-[selected]:bg-foreground data-[selected]:text-background data-[disabled]:opacity-50 data-[outside-month]:opacity-20 "
-									/>
+										class="group relative inline-flex items-center justify-center whitespace-nowrap rounded-9px border border-transparent 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-[selected]:bg-foreground data-[selected]:font-medium data-[disabled]:text-foreground/30 data-[selected]:text-background data-[unavailable]:text-muted-foreground data-[unavailable]:line-through"
+									>
+										<div
+											class="absolute top-[5px] hidden rounded-full bg-foreground transition-all sq-1 group-data-[today]:block group-data-[selected]:bg-background"
+										/>
+										{date.day}
+									</Calendar.Date>
 								</Calendar.Cell>
 							{/each}
 						</Calendar.GridRow>
diff --git a/src/components/demos/range-calendar-demo.svelte b/src/components/demos/range-calendar-demo.svelte
index 9cd593faa..f9264a154 100644
--- a/src/components/demos/range-calendar-demo.svelte
+++ b/src/components/demos/range-calendar-demo.svelte
@@ -1,24 +1,25 @@
 <script lang="ts">
 	import { RangeCalendar } from "$lib";
+	import { cn } from "@/utils";
 	import { CaretRight, CaretLeft } from "phosphor-svelte";
 </script>
 
 <RangeCalendar.Root
-	class="mt-6 rounded-card border border-dark-10 bg-background p-6 shadow-card"
+	class="mt-6 rounded-[15px] border border-dark-10 bg-background p-[22px] shadow-card"
 	let:months
 	let:daysOfWeek
 >
 	<RangeCalendar.Header class="flex items-center justify-between">
 		<RangeCalendar.PrevButton
-			class="inline-flex items-center justify-center rounded-[7px] border border-border-input bg-background shadow-btn transition-all sq-7 hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground focus-visible:ring-offset-2 focus-visible:ring-offset-background active:scale-98"
+			class="inline-flex items-center justify-center rounded-9px bg-background transition-all sq-10 hover:bg-muted active:scale-98"
 		>
-			<CaretLeft class="sq-4" />
+			<CaretLeft class="sq-6" />
 		</RangeCalendar.PrevButton>
-		<RangeCalendar.Heading class="font-medium" />
+		<RangeCalendar.Heading class="text-[15px] font-medium" />
 		<RangeCalendar.NextButton
-			class="inline-flex items-center justify-center rounded-[7px] border border-border-input bg-background shadow-btn transition-all sq-7 hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground focus-visible:ring-offset-2 focus-visible:ring-offset-background active:scale-98"
+			class="inline-flex items-center justify-center rounded-9px bg-background transition-all sq-10 hover:bg-muted active:scale-98"
 		>
-			<CaretRight class="sq-4" />
+			<CaretRight class="sq-6" />
 		</RangeCalendar.NextButton>
 	</RangeCalendar.Header>
 	<div
@@ -27,10 +28,10 @@
 		{#each months as month}
 			<RangeCalendar.Grid class="w-full border-collapse select-none space-y-1">
 				<RangeCalendar.GridHead>
-					<RangeCalendar.GridRow class="flex w-full justify-between">
+					<RangeCalendar.GridRow class="mb-1 flex w-full justify-between">
 						{#each daysOfWeek as day}
 							<RangeCalendar.HeadCell
-								class="w-8 rounded-md text-[0.8rem] font-medium text-muted-foreground"
+								class="w-10 rounded-md text-xs !font-normal text-muted-foreground"
 							>
 								<div>{day}</div>
 							</RangeCalendar.HeadCell>
@@ -39,17 +40,24 @@
 				</RangeCalendar.GridHead>
 				<RangeCalendar.GridBody>
 					{#each month.weeks as weekDates}
-						<RangeCalendar.GridRow class="mt-1 flex w-full gap-0.5">
+						<RangeCalendar.GridRow class="flex w-full">
 							{#each weekDates as date}
 								<RangeCalendar.Cell
 									{date}
-									class="relative p-0 text-center text-sm sq-8 focus-within:relative focus-within:z-20"
+									class="relative m-0 !p-0 text-center text-sm sq-10"
 								>
 									<RangeCalendar.Date
 										{date}
 										month={month.value}
-										class="inline-flex items-center justify-center whitespace-nowrap rounded-[5px] bg-background p-0 text-sm font-normal text-foreground ring-offset-background transition-colors sq-8 hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground focus-visible:ring-offset-2 data-[disabled]:pointer-events-none data-[outside-month]:pointer-events-none data-[highlighted]:bg-muted data-[selected]:bg-foreground data-[selection-end]:bg-foreground data-[selection-start]:bg-foreground data-[selected]:text-background data-[disabled]:opacity-50 data-[outside-month]:opacity-20"
-									/>
+										class={cn(
+											"group relative inline-flex items-center justify-center whitespace-nowrap rounded-9px bg-background bg-transparent p-0 text-sm font-normal text-foreground transition-all sq-10 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"
+										/>
+										{date.day}
+									</RangeCalendar.Date>
 								</RangeCalendar.Cell>
 							{/each}
 						</RangeCalendar.GridRow>
diff --git a/src/lib/bits/calendar/components/calendar-cell.svelte b/src/lib/bits/calendar/components/calendar-cell.svelte
index 012fa3cbb..04954286a 100644
--- a/src/lib/bits/calendar/components/calendar-cell.svelte
+++ b/src/lib/bits/calendar/components/calendar-cell.svelte
@@ -22,7 +22,7 @@
 {#if asChild}
 	<slot {attrs} />
 {:else}
-	<td {...attrs}>
+	<td {...$$restProps} {...attrs}>
 		<slot {attrs} />
 	</td>
 {/if}
diff --git a/src/lib/bits/range-calendar/components/range-calendar-cell.svelte b/src/lib/bits/range-calendar/components/range-calendar-cell.svelte
index 10b386c44..c81762148 100644
--- a/src/lib/bits/range-calendar/components/range-calendar-cell.svelte
+++ b/src/lib/bits/range-calendar/components/range-calendar-cell.svelte
@@ -21,7 +21,7 @@
 {#if asChild}
 	<slot {attrs} />
 {:else}
-	<td {...attrs}>
+	<td {...$$restProps} {...attrs}>
 		<slot {attrs} />
 	</td>
 {/if}
diff --git a/tailwind.config.ts b/tailwind.config.ts
index eac56eb58..b90972611 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -65,7 +65,8 @@ export default {
 				button: "5px",
 				"5px": "5px",
 				"9px": "9px",
-				"10px": "10px"
+				"10px": "10px",
+				"15px": "15px"
 			},
 			height: {
 				input: "3rem",

From f775645f212592cb0e8dab81a1ee3b6e33831767 Mon Sep 17 00:00:00 2001
From: Hunter Johnston <johnstonhuntera@gmail.com>
Date: Thu, 30 Nov 2023 20:27:16 -0500
Subject: [PATCH 181/217] datepicker styles

---
 src/components/demos/date-picker-demo.svelte  | 33 +++++++++++--------
 .../date-picker-calendar-cell.svelte          |  2 +-
 2 files changed, 20 insertions(+), 15 deletions(-)

diff --git a/src/components/demos/date-picker-demo.svelte b/src/components/demos/date-picker-demo.svelte
index 51c6d09c7..e7f66dd74 100644
--- a/src/components/demos/date-picker-demo.svelte
+++ b/src/components/demos/date-picker-demo.svelte
@@ -31,21 +31,21 @@
 		</DatePicker.Input>
 		<DatePicker.Content sideOffset={6} transition={flyAndScale}>
 			<DatePicker.Calendar
-				class="rounded-card border border-dark-10 bg-background p-6 shadow-popover"
+				class="rounded-[15px] border border-dark-10 bg-background p-[22px] shadow-card"
 				let:months
 				let:daysOfWeek
 			>
 				<DatePicker.CalendarHeader class="flex items-center justify-between">
 					<DatePicker.CalendarPrevButton
-						class="inline-flex items-center justify-center rounded-[7px] border border-border-input bg-background shadow-btn transition-all sq-7 hover:bg-muted active:scale-98"
+						class="inline-flex items-center justify-center rounded-9px bg-background transition-all sq-10 hover:bg-muted active:scale-98"
 					>
-						<CaretLeft class="h-4 w-4" />
+						<CaretLeft class="sq-6" />
 					</DatePicker.CalendarPrevButton>
-					<DatePicker.CalendarHeading class="font-medium" />
+					<DatePicker.CalendarHeading class="text-[15px] font-medium" />
 					<DatePicker.CalendarNextButton
-						class="inline-flex items-center justify-center rounded-[7px] border border-border-input bg-background shadow-btn transition-all sq-7 hover:bg-muted active:scale-98"
+						class="inline-flex items-center justify-center rounded-9px bg-background transition-all sq-10 hover:bg-muted active:scale-98"
 					>
-						<CaretRight class="h-4 w-4" />
+						<CaretRight class="sq-6" />
 					</DatePicker.CalendarNextButton>
 				</DatePicker.CalendarHeader>
 				<div
@@ -56,10 +56,12 @@
 							class="w-full border-collapse select-none space-y-1"
 						>
 							<DatePicker.CalendarGridHead>
-								<DatePicker.CalendarGridRow class="flex w-full justify-between">
+								<DatePicker.CalendarGridRow
+									class="mb-1 flex w-full justify-between"
+								>
 									{#each daysOfWeek as day}
 										<DatePicker.CalendarHeadCell
-											class="w-8 rounded-md text-[0.8rem] font-medium text-muted-foreground"
+											class="w-10 rounded-md text-xs !font-normal text-muted-foreground"
 										>
 											<div>{day}</div>
 										</DatePicker.CalendarHeadCell>
@@ -68,19 +70,22 @@
 							</DatePicker.CalendarGridHead>
 							<DatePicker.CalendarGridBody>
 								{#each month.weeks as weekDates}
-									<DatePicker.CalendarGridRow
-										class="mt-0.5 flex w-full gap-0.5"
-									>
+									<DatePicker.CalendarGridRow class="flex w-full">
 										{#each weekDates as date}
 											<DatePicker.CalendarCell
 												{date}
-												class="relative p-0 text-center text-sm sq-8 focus-within:relative focus-within:z-20"
+												class="relative !p-0 text-center text-sm sq-10"
 											>
 												<DatePicker.CalendarDate
 													{date}
 													month={month.value}
-													class="inline-flex items-center justify-center whitespace-nowrap rounded-[7px] bg-background p-0 text-sm font-normal text-foreground ring-offset-background transition-colors sq-8 hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground focus-visible:ring-offset-2 data-[disabled]:pointer-events-none data-[outside-month]:pointer-events-none data-[selected]:bg-foreground data-[selected]:text-background data-[disabled]:opacity-50 data-[outside-month]:opacity-20 "
-												/>
+													class="group relative inline-flex items-center justify-center whitespace-nowrap rounded-9px border border-transparent 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-[selected]:bg-foreground data-[selected]:font-medium data-[disabled]:text-foreground/30 data-[selected]:text-background data-[unavailable]:text-muted-foreground data-[unavailable]:line-through"
+												>
+													<div
+														class="absolute top-[5px] hidden rounded-full bg-foreground transition-all sq-1 group-data-[today]:block group-data-[selected]:bg-background"
+													/>
+													{date.day}
+												</DatePicker.CalendarDate>
 											</DatePicker.CalendarCell>
 										{/each}
 									</DatePicker.CalendarGridRow>
diff --git a/src/lib/bits/date-picker/components/date-picker-calendar-cell.svelte b/src/lib/bits/date-picker/components/date-picker-calendar-cell.svelte
index e4d4d4c41..af9aea3a8 100644
--- a/src/lib/bits/date-picker/components/date-picker-calendar-cell.svelte
+++ b/src/lib/bits/date-picker/components/date-picker-calendar-cell.svelte
@@ -22,7 +22,7 @@
 {#if asChild}
 	<slot {attrs} />
 {:else}
-	<td {...attrs}>
+	<td {...$$restProps} {...attrs}>
 		<slot {attrs} />
 	</td>
 {/if}

From 56e093ae9a08abcba97f5dde4c4af1856e5c5983 Mon Sep 17 00:00:00 2001
From: Hunter Johnston <johnstonhuntera@gmail.com>
Date: Thu, 30 Nov 2023 20:38:29 -0500
Subject: [PATCH 182/217] tabs demo styles

---
 src/components/component-preview.svelte      |  7 ++----
 src/components/demos/checkbox-demo.svelte    |  2 +-
 src/components/demos/collapsible-demo.svelte |  8 +++----
 src/components/demos/tabs-demo.svelte        | 24 ++++++++++----------
 4 files changed, 19 insertions(+), 22 deletions(-)

diff --git a/src/components/component-preview.svelte b/src/components/component-preview.svelte
index 290e0d5b3..df7353f3f 100644
--- a/src/components/component-preview.svelte
+++ b/src/components/component-preview.svelte
@@ -62,10 +62,7 @@
 				{/if}
 			</Tabs.Trigger>
 		</Tabs.List>
-		<Tabs.Content
-			value="code"
-			class="!focus-visible:ring-0 focus-visible:outline-none"
-		>
+		<Tabs.Content value="code" class="!ring-transparent">
 			<div
 				class="![&_pre]:mt-0 ![&_pre]:rounded-card w-full [&_pre]:max-h-[443px] [&_pre]:min-h-[443px] [&_pre]:overflow-auto"
 			>
@@ -74,7 +71,7 @@
 		</Tabs.Content>
 		<Tabs.Content
 			value="preview"
-			class="!focus-visible:ring-0 relative rounded-card border-2 border-muted bg-zinc-50 focus-visible:outline-none dark:bg-[#1f1f21]"
+			class="relative rounded-card border-2 border-muted bg-zinc-50 !ring-transparent dark:bg-[#1f1f21]"
 		>
 			<div
 				class={cn(
diff --git a/src/components/demos/checkbox-demo.svelte b/src/components/demos/checkbox-demo.svelte
index fab923bb6..5696d80c4 100644
--- a/src/components/demos/checkbox-demo.svelte
+++ b/src/components/demos/checkbox-demo.svelte
@@ -8,7 +8,7 @@
 	<Checkbox.Root
 		id="terms"
 		aria-labelledby="terms-label"
-		class="peer inline-flex items-center justify-center rounded-md border border-muted bg-foreground sq-[25px] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground focus-visible:ring-offset-2 focus-visible:ring-offset-background active:scale-98 data-[state=unchecked]:border-border-input data-[state=unchecked]:bg-background"
+		class="peer inline-flex items-center justify-center rounded-md border border-muted bg-foreground sq-[25px] active:scale-98 data-[state=unchecked]:border-border-input data-[state=unchecked]:bg-background"
 		checked="indeterminate"
 	>
 		<Checkbox.Indicator
diff --git a/src/components/demos/collapsible-demo.svelte b/src/components/demos/collapsible-demo.svelte
index 4c19b3e5b..3027d2b3d 100644
--- a/src/components/demos/collapsible-demo.svelte
+++ b/src/components/demos/collapsible-demo.svelte
@@ -8,7 +8,7 @@
 	<div class="flex items-center justify-between space-x-10">
 		<h4 class="text-[15px] font-medium">@huntabyte starred 3 repositories</h4>
 		<Collapsible.Trigger
-			class="inline-flex h-10 w-10 items-center justify-center rounded-[9px] border border-border-input bg-background text-foreground shadow-btn transition-all hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground focus-visible:ring-offset-2 focus-visible:ring-offset-background active:scale-98"
+			class="inline-flex h-10 w-10 items-center justify-center rounded-9px border border-border-input bg-background text-foreground shadow-btn transition-all hover:bg-muted active:scale-98"
 		>
 			<CaretUpDown class="sq-4 " weight="bold" />
 			<span class="sr-only">Toggle</span>
@@ -20,17 +20,17 @@
 		transition={slide}
 	>
 		<div
-			class="inline-flex h-12 w-full items-center rounded-[9px] bg-muted px-[18px] py-3"
+			class="inline-flex h-12 w-full items-center rounded-9px bg-muted px-[18px] py-3"
 		>
 			@huntabyte/bits-ui
 		</div>
 		<div
-			class="inline-flex h-12 w-full items-center rounded-[9px] bg-muted px-[18px] py-3"
+			class="inline-flex h-12 w-full items-center rounded-9px bg-muted px-[18px] py-3"
 		>
 			@huntabyte/shadcn-svelte
 		</div>
 		<div
-			class="inline-flex h-12 w-full items-center rounded-[9px] bg-muted px-[18px] py-3"
+			class="inline-flex h-12 w-full items-center rounded-9px bg-muted px-[18px] py-3"
 		>
 			@melt-ui/melt-ui
 		</div>
diff --git a/src/components/demos/tabs-demo.svelte b/src/components/demos/tabs-demo.svelte
index 466c2bf64..842676cf9 100644
--- a/src/components/demos/tabs-demo.svelte
+++ b/src/components/demos/tabs-demo.svelte
@@ -9,20 +9,20 @@
 		class="w-[428px] rounded-card border border-muted bg-background p-6 shadow-card"
 	>
 		<Tabs.List
-			class="grid w-full grid-cols-2 gap-1 rounded-[9px] bg-dark-4 p-1 text-sm font-semibold leading-[0.01em] shadow-mini-inset"
+			class="grid w-full grid-cols-2 gap-1 rounded-9px bg-dark-4 p-1 text-sm font-semibold leading-[0.01em] shadow-mini-inset"
 		>
 			<Tabs.Trigger
 				value="login"
-				class="h-8 rounded-[7px] bg-transparent py-2 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground focus-visible:ring-offset-2 focus-visible:ring-offset-background data-[state=active]:bg-white data-[state=active]:shadow-mini dark:data-[state=active]:bg-background"
+				class="h-8 rounded-[7px] bg-transparent py-2 data-[state=active]:bg-white data-[state=active]:shadow-mini dark:data-[state=active]:bg-background"
 				>Login</Tabs.Trigger
 			>
 			<Tabs.Trigger
 				value="register"
-				class="h-8 rounded-[7px] bg-transparent py-2 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground focus-visible:ring-offset-2 focus-visible:ring-offset-background data-[state=active]:bg-white data-[state=active]:shadow-mini dark:data-[state=active]:bg-background"
+				class="h-8 rounded-[7px] bg-transparent py-2 data-[state=active]:bg-white data-[state=active]:shadow-mini dark:data-[state=active]:bg-background"
 				>Register</Tabs.Trigger
 			>
 		</Tabs.List>
-		<Tabs.Content value="login" class="pt-6 focus-visible:outline-none">
+		<Tabs.Content value="login" class="pt-6">
 			<div class="flex flex-col">
 				<h4 class="text-[19px] font-semibold leading-none tracking-[-0.01em]">
 					Login to your account
@@ -40,7 +40,7 @@
 						type="text"
 						id="username"
 						placeholder="name@example.com"
-						class="inline-flex h-input w-full items-center rounded-card-sm border border-dark-10 bg-background px-4 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-dark-10 bg-background px-4 placeholder:text-foreground-alt/50"
 					/>
 				</div>
 				<div class="flex flex-col gap-1">
@@ -50,7 +50,7 @@
 					<div class="relative w-full">
 						<input
 							id="password"
-							class="inline-flex h-input w-full items-center rounded-card-sm border border-dark-10 bg-background px-4 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-dark-10 bg-background px-4 placeholder:text-foreground-alt/50"
 							placeholder="super_secret"
 							type="password"
 							autocomplete="off"
@@ -62,12 +62,12 @@
 				</div>
 			</div>
 			<Button.Root
-				class="hover:button-gradient mt-[22px] inline-flex h-input w-full items-center justify-center rounded-input bg-dark px-[50px] text-[15px] font-semibold text-background shadow-mini focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-dark focus-visible:ring-offset-2 focus-visible:ring-offset-background"
+				class="hover:button-gradient mt-[22px] inline-flex h-input w-full items-center justify-center rounded-input bg-dark px-[50px] text-[15px] font-semibold text-background shadow-mini"
 			>
 				Login
 			</Button.Root>
 		</Tabs.Content>
-		<Tabs.Content value="register" class="pt-6 focus-visible:outline-none">
+		<Tabs.Content value="register" class="pt-6">
 			<div class="flex flex-col">
 				<h4 class="text-[19px] font-semibold leading-none tracking-[-0.01em]">
 					Register for an account
@@ -88,7 +88,7 @@
 						type="text"
 						id="registerUsername"
 						placeholder="name@example.com"
-						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-dark-10 bg-background px-4 text-sm placeholder:text-foreground-alt/50"
 					/>
 				</div>
 				<div class="flex flex-col gap-1">
@@ -101,7 +101,7 @@
 					<div class="relative w-full">
 						<input
 							id="registerPassword"
-							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-dark-10 bg-background px-4 text-sm placeholder:text-foreground-alt/50"
 							placeholder="super_secret"
 							type="password"
 							autocomplete="off"
@@ -121,7 +121,7 @@
 					<div class="relative w-full">
 						<input
 							id="passwordConfirm"
-							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-dark-10 bg-background px-4 text-sm placeholder:text-foreground-alt/50"
 							placeholder="super_secret"
 							type="password"
 							autocomplete="off"
@@ -133,7 +133,7 @@
 				</div>
 			</div>
 			<Button.Root
-				class="hover:button-gradient mt-[22px] inline-flex h-input w-full items-center justify-center rounded-input bg-dark px-[50px] text-[15px] font-semibold text-background shadow-mini focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-dark focus-visible:ring-offset-2 focus-visible:ring-offset-background"
+				class="hover:button-gradient mt-[22px] inline-flex h-input w-full items-center justify-center rounded-input bg-dark px-[50px] text-[15px] font-semibold text-background shadow-mini"
 			>
 				Login
 			</Button.Root>

From adb9c3fda5461b8cdb7cbb99459b614e9cdeac3c Mon Sep 17 00:00:00 2001
From: Hunter Johnston <johnstonhuntera@gmail.com>
Date: Fri, 1 Dec 2023 12:29:37 -0500
Subject: [PATCH 183/217] range hover styles

---
 src/components/demos/range-calendar-demo.svelte | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/demos/range-calendar-demo.svelte b/src/components/demos/range-calendar-demo.svelte
index f9264a154..87a7aa265 100644
--- a/src/components/demos/range-calendar-demo.svelte
+++ b/src/components/demos/range-calendar-demo.svelte
@@ -5,7 +5,7 @@
 </script>
 
 <RangeCalendar.Root
-	class="mt-6 rounded-[15px] border border-dark-10 bg-background p-[22px] shadow-card"
+	class="mt-6 rounded-15px border border-dark-10 bg-background p-[22px] shadow-card"
 	let:months
 	let:daysOfWeek
 >
@@ -50,7 +50,7 @@
 										{date}
 										month={month.value}
 										class={cn(
-											"group relative inline-flex items-center justify-center whitespace-nowrap rounded-9px bg-background bg-transparent p-0 text-sm font-normal text-foreground transition-all sq-10 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 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"
 										)}
 									>
 										<div

From 77c1394e448c10ecf04b27a7822505655cf2fd0f Mon Sep 17 00:00:00 2001
From: Hunter Johnston <johnstonhuntera@gmail.com>
Date: Fri, 1 Dec 2023 12:33:23 -0500
Subject: [PATCH 184/217] revert popover button style

---
 src/components/demos/alert-dialog-demo.svelte | 2 +-
 src/components/demos/popover-demo.svelte      | 3 +--
 2 files changed, 2 insertions(+), 3 deletions(-)

diff --git a/src/components/demos/alert-dialog-demo.svelte b/src/components/demos/alert-dialog-demo.svelte
index c8c58de81..8c450c00c 100644
--- a/src/components/demos/alert-dialog-demo.svelte
+++ b/src/components/demos/alert-dialog-demo.svelte
@@ -8,7 +8,7 @@
 	<AlertDialog.Trigger
 		class="inline-flex h-12 items-center
 	justify-center whitespace-nowrap rounded-input bg-dark px-[21px]
-	text-[15px] font-semibold text-background shadow-mini ring-dark ring-offset-background transition-all hover:bg-dark/95 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-dark focus-visible:ring-offset-2 focus-visible:ring-offset-background active:scale-98"
+	text-[15px] font-semibold text-background shadow-mini transition-all hover:bg-dark/95 active:scale-98"
 	>
 		Subscribe
 	</AlertDialog.Trigger>
diff --git a/src/components/demos/popover-demo.svelte b/src/components/demos/popover-demo.svelte
index 7ff31e49e..74a0fe5cf 100644
--- a/src/components/demos/popover-demo.svelte
+++ b/src/components/demos/popover-demo.svelte
@@ -10,8 +10,7 @@
 <Popover.Root>
 	<Popover.Trigger
 		class="inline-flex h-10
-	items-center justify-center whitespace-nowrap rounded-input border
-	border-border-input bg-background px-[21px] text-[15px] font-medium text-foreground shadow-mini transition-all hover:cursor-pointer hover:bg-muted active:scale-98"
+	items-center justify-center whitespace-nowrap rounded-input bg-dark px-[21px] text-[15px] font-medium text-background shadow-mini transition-all hover:cursor-pointer hover:bg-dark/95 active:scale-98"
 	>
 		Resize
 	</Popover.Trigger>

From 0a9b578ff44a93816b41548a139ea21af65ea005 Mon Sep 17 00:00:00 2001
From: Hunter Johnston <johnstonhuntera@gmail.com>
Date: Fri, 1 Dec 2023 12:36:48 -0500
Subject: [PATCH 185/217] toggle active tyles

---
 src/components/demos/toggle-demo.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/demos/toggle-demo.svelte b/src/components/demos/toggle-demo.svelte
index 895a51ad7..27fc3890e 100644
--- a/src/components/demos/toggle-demo.svelte
+++ b/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-dark-10 active:scale-98 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 active:data-[state=on]:bg-dark-10"
 		bind:pressed={unlocked}
 	>
 		<LockKeyOpen class="sq-6" />

From a59ef1ce56a7f3b5822ad0c9933587e88db0065e Mon Sep 17 00:00:00 2001
From: Hunter Johnston <johnstonhuntera@gmail.com>
Date: Fri, 1 Dec 2023 12:37:43 -0500
Subject: [PATCH 186/217] toggle group styles

---
 src/components/demos/toggle-group-demo.svelte | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/demos/toggle-group-demo.svelte b/src/components/demos/toggle-group-demo.svelte
index decef4964..eb928a494 100644
--- a/src/components/demos/toggle-group-demo.svelte
+++ b/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-dark-10 active:scale-98 data-[state=on]:bg-muted"
+		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"
 	>
 		<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-dark-10 active:scale-98 data-[state=on]:bg-muted"
+		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"
 	>
 		<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-dark-10 active:scale-98 data-[state=on]:bg-muted"
+		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"
 	>
 		<TextStrikethrough class="sq-6" />
 	</ToggleGroup.Item>

From 7fc40d76ab04c805abb6e104a39d0ec23becaff9 Mon Sep 17 00:00:00 2001
From: Hunter Johnston <johnstonhuntera@gmail.com>
Date: Fri, 1 Dec 2023 13:12:15 -0500
Subject: [PATCH 187/217] update melt

---
 package.json                                  |  2 +-
 pnpm-lock.yaml                                | 14 +++++-----
 src/components/api-ref/prop-copy.svelte       | 26 +++++++++++++++++++
 src/components/demos/calendar-demo.svelte     |  5 ++--
 src/components/demos/date-picker-demo.svelte  |  6 ++---
 .../demos/range-calendar-demo.svelte          |  5 ++--
 src/content/api-reference/calendar.ts         | 15 ++++++++++-
 src/content/api-reference/range-calendar.ts   |  9 +++++++
 .../bits/calendar/components/calendar.svelte  |  7 +++--
 .../components/date-picker-calendar.svelte    |  4 +--
 .../date-picker/components/date-picker.svelte | 12 ++++-----
 .../components/range-calendar.svelte          |  7 +++--
 12 files changed, 83 insertions(+), 29 deletions(-)
 create mode 100644 src/components/api-ref/prop-copy.svelte

diff --git a/package.json b/package.json
index 12368847a..68e03fa4d 100644
--- a/package.json
+++ b/package.json
@@ -92,7 +92,7 @@
 	"type": "module",
 	"dependencies": {
 		"@internationalized/date": "^3.5.0",
-		"@melt-ui/svelte": "0.63.1",
+		"@melt-ui/svelte": "0.64.0",
 		"nanoid": "^5.0.3"
 	},
 	"peerDependencies": {
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index a02379539..d1aba103c 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -9,8 +9,8 @@ dependencies:
     specifier: ^3.5.0
     version: 3.5.0
   '@melt-ui/svelte':
-    specifier: 0.63.1
-    version: 0.63.1(svelte@4.2.3)
+    specifier: 0.64.0
+    version: 0.64.0(svelte@4.2.3)
   nanoid:
     specifier: ^5.0.3
     version: 5.0.3
@@ -24,7 +24,7 @@ devDependencies:
     version: 0.16.5(svelte@4.2.3)
   '@melt-ui/pp':
     specifier: ^0.1.4
-    version: 0.1.4(@melt-ui/svelte@0.63.1)(svelte@4.2.3)
+    version: 0.1.4(@melt-ui/svelte@0.64.0)(svelte@4.2.3)
   '@playwright/test':
     specifier: ^1.28.1
     version: 1.36.2
@@ -1065,20 +1065,20 @@ packages:
       - supports-color
     dev: true
 
-  /@melt-ui/pp@0.1.4(@melt-ui/svelte@0.63.1)(svelte@4.2.3):
+  /@melt-ui/pp@0.1.4(@melt-ui/svelte@0.64.0)(svelte@4.2.3):
     resolution: {integrity: sha512-zR+Kl3CZJPJBHW8V7YcdQCMI/dVcnW9Ct3yGbVaIywYVStVRS7F9uEDOea3xLLT2WTGodQePzPlUn53yKFu87g==}
     engines: {pnpm: '>=8.6.3'}
     peerDependencies:
       '@melt-ui/svelte': '>= 0.29.0'
       svelte: ^3.55.0 || ^4.0.0 || ^5.0.0-next.1
     dependencies:
-      '@melt-ui/svelte': 0.63.1(svelte@4.2.3)
+      '@melt-ui/svelte': 0.64.0(svelte@4.2.3)
       estree-walker: 3.0.3
       svelte: 4.2.3
     dev: true
 
-  /@melt-ui/svelte@0.63.1(svelte@4.2.3):
-    resolution: {integrity: sha512-WzuI4uePPsHMlk1aq95UAgb32gXYRjBSi8DmXApWuM9CpJgcvUt2YcQ5+BPSOyrDOWVvPJd9gL7QA0NPDSCtNw==}
+  /@melt-ui/svelte@0.64.0(svelte@4.2.3):
+    resolution: {integrity: sha512-68VJ+Q+PQ6gziDVp0u96MfPe4hGYP/cHtWrFGJAQ5+XFYwk+vkL3emWAK9GXIeZ0duToecEC2W1tlkEj1Zai0A==}
     peerDependencies:
       svelte: '>=3 <5'
     dependencies:
diff --git a/src/components/api-ref/prop-copy.svelte b/src/components/api-ref/prop-copy.svelte
new file mode 100644
index 000000000..938c0ced4
--- /dev/null
+++ b/src/components/api-ref/prop-copy.svelte
@@ -0,0 +1,26 @@
+<script lang="ts">
+	import { Popover } from "$lib";
+	import { flyAndScale } from "@/utils";
+	import { Code } from "@/components";
+
+	export let name: string;
+</script>
+
+<div class="flex items-center gap-1.5">
+	<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"
+		>
+			<Code class="bg-transparent px-0">{name}</Code>
+		</Popover.Trigger>
+		<Popover.Content
+			side="top"
+			sideOffset={10}
+			transition={flyAndScale}
+			transitionConfig={{ y: 8 }}
+			class="z-50 max-h-[400px] overflow-auto rounded-input border border-border bg-background p-4 shadow-popover"
+		>
+			<button class="bg-transparent"> Copy to clipboard </button>
+		</Popover.Content>
+	</Popover.Root>
+</div>
diff --git a/src/components/demos/calendar-demo.svelte b/src/components/demos/calendar-demo.svelte
index f0c657a19..2c2778ef7 100644
--- a/src/components/demos/calendar-demo.svelte
+++ b/src/components/demos/calendar-demo.svelte
@@ -10,8 +10,9 @@
 <Calendar.Root
 	class="mt-6 rounded-[15px] border border-dark-10 bg-background p-[22px] shadow-card"
 	let:months
-	let:daysOfWeek
+	let:weekdays
 	{isDateUnavailable}
+	weekdayFormat="short"
 >
 	<Calendar.Header class="flex items-center justify-between">
 		<Calendar.PrevButton
@@ -33,7 +34,7 @@
 			<Calendar.Grid class="w-full border-collapse select-none space-y-1">
 				<Calendar.GridHead>
 					<Calendar.GridRow class="mb-1 flex w-full justify-between">
-						{#each daysOfWeek as day}
+						{#each weekdays as day}
 							<Calendar.HeadCell
 								class="w-10 rounded-md text-xs !font-normal text-muted-foreground"
 							>
diff --git a/src/components/demos/date-picker-demo.svelte b/src/components/demos/date-picker-demo.svelte
index e7f66dd74..ecc60a7a3 100644
--- a/src/components/demos/date-picker-demo.svelte
+++ b/src/components/demos/date-picker-demo.svelte
@@ -4,7 +4,7 @@
 	import { CaretLeft, CaretRight, CalendarBlank } from "phosphor-svelte";
 </script>
 
-<DatePicker.Root>
+<DatePicker.Root weekdayFormat="short">
 	<div class="flex min-w-[200px] flex-col gap-1">
 		<DatePicker.Label class="block select-none font-medium"
 			>Birthday</DatePicker.Label
@@ -33,7 +33,7 @@
 			<DatePicker.Calendar
 				class="rounded-[15px] border border-dark-10 bg-background p-[22px] shadow-card"
 				let:months
-				let:daysOfWeek
+				let:weekdays
 			>
 				<DatePicker.CalendarHeader class="flex items-center justify-between">
 					<DatePicker.CalendarPrevButton
@@ -59,7 +59,7 @@
 								<DatePicker.CalendarGridRow
 									class="mb-1 flex w-full justify-between"
 								>
-									{#each daysOfWeek as day}
+									{#each weekdays as day}
 										<DatePicker.CalendarHeadCell
 											class="w-10 rounded-md text-xs !font-normal text-muted-foreground"
 										>
diff --git a/src/components/demos/range-calendar-demo.svelte b/src/components/demos/range-calendar-demo.svelte
index 87a7aa265..eddf01a15 100644
--- a/src/components/demos/range-calendar-demo.svelte
+++ b/src/components/demos/range-calendar-demo.svelte
@@ -7,7 +7,8 @@
 <RangeCalendar.Root
 	class="mt-6 rounded-15px border border-dark-10 bg-background p-[22px] shadow-card"
 	let:months
-	let:daysOfWeek
+	let:weekdays
+	weekdayFormat="short"
 >
 	<RangeCalendar.Header class="flex items-center justify-between">
 		<RangeCalendar.PrevButton
@@ -29,7 +30,7 @@
 			<RangeCalendar.Grid class="w-full border-collapse select-none space-y-1">
 				<RangeCalendar.GridHead>
 					<RangeCalendar.GridRow class="mb-1 flex w-full justify-between">
-						{#each daysOfWeek as day}
+						{#each weekdays as day}
 							<RangeCalendar.HeadCell
 								class="w-10 rounded-md text-xs !font-normal text-muted-foreground"
 							>
diff --git a/src/content/api-reference/calendar.ts b/src/content/api-reference/calendar.ts
index 30d55f59c..948d02cdb 100644
--- a/src/content/api-reference/calendar.ts
+++ b/src/content/api-reference/calendar.ts
@@ -1,6 +1,11 @@
 import type { APISchema } from "@/types";
 import * as C from "@/content/constants.js";
-import { asChild, daysOfWeekSlotProp, monthsSlotProp } from "@/content/api-reference/helpers.js";
+import {
+	asChild,
+	daysOfWeekSlotProp,
+	enums,
+	monthsSlotProp
+} from "@/content/api-reference/helpers.js";
 import type * as Calendar from "$lib/bits/calendar/_types.js";
 import { attrsSlotProp, builderAndAttrsSlotProps } from "./helpers";
 
@@ -48,6 +53,14 @@ const root: APISchema<Calendar.Props> = {
 			description: "The day of the week to start the calendar on. 0 is Sunday, 1 is Monday, etc.",
 			default: "0"
 		},
+		weekdayFormat: {
+			type: {
+				type: C.ENUM,
+				definition: enums("narrow", "short", "long")
+			},
+			description:
+				"The format to use for the weekday strings provided via the `weekdays` slot prop."
+		},
 		calendarLabel: {
 			type: C.STRING,
 			description: "The accessible label for the calendar."
diff --git a/src/content/api-reference/range-calendar.ts b/src/content/api-reference/range-calendar.ts
index bf9f395a2..f2bfc4e25 100644
--- a/src/content/api-reference/range-calendar.ts
+++ b/src/content/api-reference/range-calendar.ts
@@ -4,6 +4,7 @@ import {
 	asChild,
 	attrsSlotProp,
 	daysOfWeekSlotProp,
+	enums,
 	monthsSlotProp
 } from "@/content/api-reference/helpers.js";
 import type * as RangeCalendar from "$lib/bits/range-calendar/_types.js";
@@ -51,6 +52,14 @@ const root: APISchema<RangeCalendar.Props> = {
 				"Whether or not to prevent the user from deselecting a date without selecting another date first.",
 			default: C.FALSE
 		},
+		weekdayFormat: {
+			type: {
+				type: C.ENUM,
+				definition: enums("narrow", "short", "long")
+			},
+			description:
+				"The format to use for the weekday strings provided via the `weekdays` slot prop."
+		},
 		weekStartsOn: {
 			type: C.NUMBER,
 			description: "The day of the week to start the calendar on. 0 is Sunday, 1 is Monday, etc.",
diff --git a/src/lib/bits/calendar/components/calendar.svelte b/src/lib/bits/calendar/components/calendar.svelte
index f8931bf55..121383571 100644
--- a/src/lib/bits/calendar/components/calendar.svelte
+++ b/src/lib/bits/calendar/components/calendar.svelte
@@ -21,6 +21,7 @@
 	export let readonly: $$Props["readonly"] = undefined;
 	export let fixedWeeks: $$Props["fixedWeeks"] = undefined;
 	export let calendarLabel: $$Props["calendarLabel"] = undefined;
+	export let weekdayFormat: $$Props["weekdayFormat"] = undefined;
 	export let asChild: $$Props["asChild"] = false;
 	export let id: $$Props["id"] = undefined;
 
@@ -30,7 +31,7 @@
 			value: localValue,
 			placeholder: localPlaceholder,
 			months,
-			daysOfWeek
+			weekdays
 		},
 		updateOption,
 		ids
@@ -49,6 +50,7 @@
 		readonly,
 		fixedWeeks,
 		calendarLabel,
+		weekdayFormat,
 		onPlaceholderChange: ({ next }) => {
 			if (placeholder !== next) {
 				onPlaceholderChange?.(next);
@@ -84,6 +86,7 @@
 	$: updateOption("readonly", readonly);
 	$: updateOption("fixedWeeks", fixedWeeks);
 	$: updateOption("calendarLabel", calendarLabel);
+	$: updateOption("weekdayFormat", weekdayFormat);
 
 	$: builder = $calendar;
 	const attrs = getAttrs("root");
@@ -92,7 +95,7 @@
 		builder,
 		attrs,
 		months: $months,
-		daysOfWeek: $daysOfWeek
+		weekdays: $weekdays
 	};
 </script>
 
diff --git a/src/lib/bits/date-picker/components/date-picker-calendar.svelte b/src/lib/bits/date-picker/components/date-picker-calendar.svelte
index 329b9b77f..846c587aa 100644
--- a/src/lib/bits/date-picker/components/date-picker-calendar.svelte
+++ b/src/lib/bits/date-picker/components/date-picker-calendar.svelte
@@ -10,7 +10,7 @@
 
 	const {
 		elements: { calendar },
-		states: { months, daysOfWeek },
+		states: { months, weekdays },
 		ids
 	} = getCtx();
 
@@ -25,7 +25,7 @@
 		builder,
 		attrs,
 		months: $months,
-		daysOfWeek: $daysOfWeek
+		weekdays: $weekdays
 	};
 </script>
 
diff --git a/src/lib/bits/date-picker/components/date-picker.svelte b/src/lib/bits/date-picker/components/date-picker.svelte
index e80ac755a..3edca28fd 100644
--- a/src/lib/bits/date-picker/components/date-picker.svelte
+++ b/src/lib/bits/date-picker/components/date-picker.svelte
@@ -26,6 +26,7 @@
 	export let isDateDisabled: $$Props["isDateDisabled"] = undefined;
 	export let fixedWeeks: $$Props["fixedWeeks"] = undefined;
 	export let calendarLabel: $$Props["calendarLabel"] = undefined;
+	export let weekdayFormat: $$Props["weekdayFormat"] = undefined;
 
 	const {
 		states: {
@@ -52,6 +53,7 @@
 		maxValue,
 		minValue,
 		readonly,
+		weekdayFormat,
 		isDateUnavailable,
 		onValueChange: ({ next }) => {
 			if (value !== next) {
@@ -84,7 +86,6 @@
 			ids.dateField.label,
 			ids.dateField.timeZoneName,
 			ids.calendar.calendar,
-			ids.calendar.grid,
 			ids.popover.content,
 			ids.popover.trigger
 		],
@@ -102,9 +103,7 @@
 			$labelId,
 			$timeZoneNameId,
 			$calendarId,
-			$gridId,
-			$contentId,
-			$triggerId
+			$contentId
 		]) => ({
 			day: $dayId,
 			description: $descriptionId,
@@ -119,9 +118,7 @@
 			label: $labelId,
 			timeZoneName: $timeZoneNameId,
 			calendar: $calendarId,
-			grid: $gridId,
-			content: $contentId,
-			trigger: $triggerId
+			content: $contentId
 		})
 	);
 
@@ -151,6 +148,7 @@
 	$: updateOption("weekStartsOn", weekStartsOn);
 	$: updateOption("isDateDisabled", isDateDisabled);
 	$: updateOption("calendarLabel", calendarLabel);
+	$: updateOption("weekdayFormat", weekdayFormat);
 
 	$: slotProps = {
 		isInvalid: $localIsInvalid,
diff --git a/src/lib/bits/range-calendar/components/range-calendar.svelte b/src/lib/bits/range-calendar/components/range-calendar.svelte
index f8931bf55..e3ebc86a1 100644
--- a/src/lib/bits/range-calendar/components/range-calendar.svelte
+++ b/src/lib/bits/range-calendar/components/range-calendar.svelte
@@ -23,6 +23,7 @@
 	export let calendarLabel: $$Props["calendarLabel"] = undefined;
 	export let asChild: $$Props["asChild"] = false;
 	export let id: $$Props["id"] = undefined;
+	export let weekdayFormat: $$Props["weekdayFormat"] = undefined;
 
 	const {
 		elements: { calendar },
@@ -30,7 +31,7 @@
 			value: localValue,
 			placeholder: localPlaceholder,
 			months,
-			daysOfWeek
+			weekdays
 		},
 		updateOption,
 		ids
@@ -49,6 +50,7 @@
 		readonly,
 		fixedWeeks,
 		calendarLabel,
+		weekdayFormat,
 		onPlaceholderChange: ({ next }) => {
 			if (placeholder !== next) {
 				onPlaceholderChange?.(next);
@@ -84,6 +86,7 @@
 	$: updateOption("readonly", readonly);
 	$: updateOption("fixedWeeks", fixedWeeks);
 	$: updateOption("calendarLabel", calendarLabel);
+	$: updateOption("weekdayFormat", weekdayFormat);
 
 	$: builder = $calendar;
 	const attrs = getAttrs("root");
@@ -92,7 +95,7 @@
 		builder,
 		attrs,
 		months: $months,
-		daysOfWeek: $daysOfWeek
+		weekdays: $weekdays
 	};
 </script>
 

From f382c2675e0824e58a61e6349c58375229e421ce Mon Sep 17 00:00:00 2001
From: Hunter Johnston <johnstonhuntera@gmail.com>
Date: Fri, 1 Dec 2023 13:14:27 -0500
Subject: [PATCH 188/217] slice weekday

---
 src/components/demos/calendar-demo.svelte       | 2 +-
 src/components/demos/date-picker-demo.svelte    | 2 +-
 src/components/demos/range-calendar-demo.svelte | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/demos/calendar-demo.svelte b/src/components/demos/calendar-demo.svelte
index 2c2778ef7..d8dcd171d 100644
--- a/src/components/demos/calendar-demo.svelte
+++ b/src/components/demos/calendar-demo.svelte
@@ -38,7 +38,7 @@
 							<Calendar.HeadCell
 								class="w-10 rounded-md text-xs !font-normal text-muted-foreground"
 							>
-								<div>{day}</div>
+								<div>{day.slice(0, 2)}</div>
 							</Calendar.HeadCell>
 						{/each}
 					</Calendar.GridRow>
diff --git a/src/components/demos/date-picker-demo.svelte b/src/components/demos/date-picker-demo.svelte
index ecc60a7a3..869e0a115 100644
--- a/src/components/demos/date-picker-demo.svelte
+++ b/src/components/demos/date-picker-demo.svelte
@@ -63,7 +63,7 @@
 										<DatePicker.CalendarHeadCell
 											class="w-10 rounded-md text-xs !font-normal text-muted-foreground"
 										>
-											<div>{day}</div>
+											<div>{day.slice(0, 2)}</div>
 										</DatePicker.CalendarHeadCell>
 									{/each}
 								</DatePicker.CalendarGridRow>
diff --git a/src/components/demos/range-calendar-demo.svelte b/src/components/demos/range-calendar-demo.svelte
index eddf01a15..8e71a5734 100644
--- a/src/components/demos/range-calendar-demo.svelte
+++ b/src/components/demos/range-calendar-demo.svelte
@@ -34,7 +34,7 @@
 							<RangeCalendar.HeadCell
 								class="w-10 rounded-md text-xs !font-normal text-muted-foreground"
 							>
-								<div>{day}</div>
+								<div>{day.slice(0, 2)}</div>
 							</RangeCalendar.HeadCell>
 						{/each}
 					</RangeCalendar.GridRow>

From 70b37d18357a38ae4091d85a516837b2584b8ccf Mon Sep 17 00:00:00 2001
From: Hunter Johnston <johnstonhuntera@gmail.com>
Date: Fri, 1 Dec 2023 13:20:49 -0500
Subject: [PATCH 189/217] fix: typo

---
 content/styling.md                          | 2 +-
 src/content/api-reference/calendar.ts       | 3 ++-
 src/content/api-reference/range-calendar.ts | 3 ++-
 3 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/content/styling.md b/content/styling.md
index f84a17407..de48aa108 100644
--- a/content/styling.md
+++ b/content/styling.md
@@ -9,7 +9,7 @@ For each component that renders an HTML element, we provide a `class` prop that
 
 ## CSS frameworks
 
-If you're using a CSS framework like Tailwind or UnoCSS, you can simply pass the classes you need to the component, and they will be applies to the underlying HTML element it renders.
+If you're using a CSS framework like Tailwind or UnoCSS, you can simply pass the classes you need to the component, and they will be applied to the underlying HTML element it renders.
 
 ```svelte
 <script lang="ts">
diff --git a/src/content/api-reference/calendar.ts b/src/content/api-reference/calendar.ts
index 948d02cdb..e8db1187b 100644
--- a/src/content/api-reference/calendar.ts
+++ b/src/content/api-reference/calendar.ts
@@ -59,7 +59,8 @@ const root: APISchema<Calendar.Props> = {
 				definition: enums("narrow", "short", "long")
 			},
 			description:
-				"The format to use for the weekday strings provided via the `weekdays` slot prop."
+				"The format to use for the weekday strings provided via the `weekdays` slot prop.",
+			default: "'narrow'"
 		},
 		calendarLabel: {
 			type: C.STRING,
diff --git a/src/content/api-reference/range-calendar.ts b/src/content/api-reference/range-calendar.ts
index f2bfc4e25..e33da4ead 100644
--- a/src/content/api-reference/range-calendar.ts
+++ b/src/content/api-reference/range-calendar.ts
@@ -58,7 +58,8 @@ const root: APISchema<RangeCalendar.Props> = {
 				definition: enums("narrow", "short", "long")
 			},
 			description:
-				"The format to use for the weekday strings provided via the `weekdays` slot prop."
+				"The format to use for the weekday strings provided via the `weekdays` slot prop.",
+			default: "'narrow'"
 		},
 		weekStartsOn: {
 			type: C.NUMBER,

From c8e0fa31286de14ce8b2994043caebcabe1c7c2d Mon Sep 17 00:00:00 2001
From: Hunter Johnston <johnstonhuntera@gmail.com>
Date: Fri, 1 Dec 2023 15:06:39 -0500
Subject: [PATCH 190/217] add date range picker

---
 .changeset/fresh-dryers-sneeze.md             |   5 +
 content/components/date-picker.md             |  40 ++--
 content/components/date-range-picker.md       |  70 ++++++
 src/components/demos/date-picker-demo.svelte  |  48 ++--
 .../demos/date-range-picker-demo.svelte       | 115 ++++++++++
 src/components/demos/index.ts                 |   1 +
 src/config/navigation.ts                      |   9 +-
 .../date-picker-calendar-grid-body.svelte     |  17 --
 .../date-picker-calendar-grid-head.svelte     |  17 --
 .../date-picker-calendar-grid-row.svelte      |  18 --
 .../date-picker-calendar-head-cell.svelte     |  17 --
 .../date-picker-calendar-header.svelte        |  16 --
 ...ar-cell.svelte => date-picker-cell.svelte} |   0
 ...ar-date.svelte => date-picker-date.svelte} |   0
 ...ar-grid.svelte => date-picker-grid.svelte} |   0
 ...ding.svelte => date-picker-heading.svelte} |   0
 ....svelte => date-picker-next-button.svelte} |   0
 ....svelte => date-picker-prev-button.svelte} |   0
 src/lib/bits/date-picker/index.ts             |  23 +-
 src/lib/bits/date-range-picker/_types.ts      |  71 ++++++
 .../components/date-range-picker-arrow.svelte |  31 +++
 .../date-range-picker-calendar.svelte         |  38 ++++
 .../components/date-range-picker-cell.svelte  |  28 +++
 .../components/date-range-picker-close.svelte |  39 ++++
 .../date-range-picker-content.svelte          | 104 +++++++++
 .../components/date-range-picker-date.svelte  |  36 +++
 .../components/date-range-picker-field.svelte |  74 +++++++
 .../components/date-range-picker-grid.svelte  |  29 +++
 .../date-range-picker-heading.svelte          |  27 +++
 .../components/date-range-picker-input.svelte |  37 ++++
 .../components/date-range-picker-label.svelte |  35 +++
 .../date-range-picker-next-button.svelte      |  24 ++
 .../date-range-picker-prev-button.svelte      |  29 +++
 .../date-range-picker-segment.svelte          |  41 ++++
 .../date-range-picker-trigger.svelte          |  44 ++++
 .../components/date-range-picker.svelte       | 209 ++++++++++++++++++
 src/lib/bits/date-range-picker/ctx.ts         |  43 ++++
 src/lib/bits/date-range-picker/index.ts       |  23 ++
 src/lib/bits/date-range-picker/types.ts       |  56 +++++
 src/lib/bits/index.ts                         |   1 +
 40 files changed, 1272 insertions(+), 143 deletions(-)
 create mode 100644 .changeset/fresh-dryers-sneeze.md
 create mode 100644 content/components/date-range-picker.md
 create mode 100644 src/components/demos/date-range-picker-demo.svelte
 delete mode 100644 src/lib/bits/date-picker/components/date-picker-calendar-grid-body.svelte
 delete mode 100644 src/lib/bits/date-picker/components/date-picker-calendar-grid-head.svelte
 delete mode 100644 src/lib/bits/date-picker/components/date-picker-calendar-grid-row.svelte
 delete mode 100644 src/lib/bits/date-picker/components/date-picker-calendar-head-cell.svelte
 delete mode 100644 src/lib/bits/date-picker/components/date-picker-calendar-header.svelte
 rename src/lib/bits/date-picker/components/{date-picker-calendar-cell.svelte => date-picker-cell.svelte} (100%)
 rename src/lib/bits/date-picker/components/{date-picker-calendar-date.svelte => date-picker-date.svelte} (100%)
 rename src/lib/bits/date-picker/components/{date-picker-calendar-grid.svelte => date-picker-grid.svelte} (100%)
 rename src/lib/bits/date-picker/components/{date-picker-calendar-heading.svelte => date-picker-heading.svelte} (100%)
 rename src/lib/bits/date-picker/components/{date-picker-calendar-next-button.svelte => date-picker-next-button.svelte} (100%)
 rename src/lib/bits/date-picker/components/{date-picker-calendar-prev-button.svelte => date-picker-prev-button.svelte} (100%)
 create mode 100644 src/lib/bits/date-range-picker/_types.ts
 create mode 100644 src/lib/bits/date-range-picker/components/date-range-picker-arrow.svelte
 create mode 100644 src/lib/bits/date-range-picker/components/date-range-picker-calendar.svelte
 create mode 100644 src/lib/bits/date-range-picker/components/date-range-picker-cell.svelte
 create mode 100644 src/lib/bits/date-range-picker/components/date-range-picker-close.svelte
 create mode 100644 src/lib/bits/date-range-picker/components/date-range-picker-content.svelte
 create mode 100644 src/lib/bits/date-range-picker/components/date-range-picker-date.svelte
 create mode 100644 src/lib/bits/date-range-picker/components/date-range-picker-field.svelte
 create mode 100644 src/lib/bits/date-range-picker/components/date-range-picker-grid.svelte
 create mode 100644 src/lib/bits/date-range-picker/components/date-range-picker-heading.svelte
 create mode 100644 src/lib/bits/date-range-picker/components/date-range-picker-input.svelte
 create mode 100644 src/lib/bits/date-range-picker/components/date-range-picker-label.svelte
 create mode 100644 src/lib/bits/date-range-picker/components/date-range-picker-next-button.svelte
 create mode 100644 src/lib/bits/date-range-picker/components/date-range-picker-prev-button.svelte
 create mode 100644 src/lib/bits/date-range-picker/components/date-range-picker-segment.svelte
 create mode 100644 src/lib/bits/date-range-picker/components/date-range-picker-trigger.svelte
 create mode 100644 src/lib/bits/date-range-picker/components/date-range-picker.svelte
 create mode 100644 src/lib/bits/date-range-picker/ctx.ts
 create mode 100644 src/lib/bits/date-range-picker/index.ts
 create mode 100644 src/lib/bits/date-range-picker/types.ts

diff --git a/.changeset/fresh-dryers-sneeze.md b/.changeset/fresh-dryers-sneeze.md
new file mode 100644
index 000000000..21b706108
--- /dev/null
+++ b/.changeset/fresh-dryers-sneeze.md
@@ -0,0 +1,5 @@
+---
+"bits-ui": minor
+---
+
+New component: Date Range Picker
diff --git a/content/components/date-picker.md b/content/components/date-picker.md
index cca65babe..ee806c48b 100644
--- a/content/components/date-picker.md
+++ b/content/components/date-picker.md
@@ -33,34 +33,34 @@ description: A date picker component.
 	</DatePicker.Input>
 	<DatePicker.Content>
 		<DatePicker.Calendar let:months let:daysOfWeek>
-			<DatePicker.CalendarHeader>
-				<DatePicker.CalendarPrevButton />
-				<DatePicker.CalendarHeading />
-				<DatePicker.CalendarNextButton />
-			</DatePicker.CalendarHeader>
+			<DatePicker.Header>
+				<DatePicker.PrevButton />
+				<DatePicker.Heading />
+				<DatePicker.NextButton />
+			</DatePicker.Header>
 			{#each months as month}
-				<DatePicker.CalendarGrid>
-					<DatePicker.CalendarGridHead>
-						<DatePicker.CalendarGridRow>
+				<DatePicker.Grid>
+					<DatePicker.GridHead>
+						<DatePicker.GridRow>
 							{#each daysOfWeek as day}
-								<DatePicker.CalendarHeadCell>
+								<DatePicker.HeadCell>
 									{day}
-								</DatePicker.CalendarHeadCell>
+								</DatePicker.HeadCell>
 							{/each}
-						</DatePicker.CalendarGridRow>
-					</DatePicker.CalendarGridHead>
-					<DatePicker.CalendarGridBody>
+						</DatePicker.GridRow>
+					</DatePicker.GridHead>
+					<DatePicker.GridBody>
 						{#each month.weeks as weekDates}
-							<DatePicker.CalendarGridRow>
+							<DatePicker.GridRow>
 								{#each weekDates as date}
-									<DatePicker.CalendarCell {date}>
-										<DatePicker.CalendarDate {date} month={month.value} />
-									</DatePicker.CalendarCell>
+									<DatePicker.Cell {date}>
+										<DatePicker.Date {date} month={month.value} />
+									</DatePicker.Cell>
 								{/each}
-							</DatePicker.CalendarGridRow>
+							</DatePicker.GridRow>
 						{/each}
-					</DatePicker.CalendarGridBody>
-				</DatePicker.CalendarGrid>
+					</DatePicker.GridBody>
+				</DatePicker.Grid>
 			{/each}
 		</DatePicker.Calendar>
 	</DatePicker.Content>
diff --git a/content/components/date-range-picker.md b/content/components/date-range-picker.md
new file mode 100644
index 000000000..d732cd323
--- /dev/null
+++ b/content/components/date-range-picker.md
@@ -0,0 +1,70 @@
+---
+title: Date Range Picker
+description: A date range picker component.
+---
+
+<script>
+	import { APISection, ComponentPreview, DateRangePickerDemo } from '@/components'
+	export let schemas;
+</script>
+
+<ComponentPreview name="date-range-picker-demo" comp="Date Range Picker">
+
+<DateRangePickerDemo slot="preview" />
+
+</ComponentPreview>
+
+## Structure
+
+```svelte
+<script lang="ts">
+	import { DateRangePicker } from "bits-ui";
+</script>
+
+<DateRangePicker.Root>
+	<DateRangePicker.Label />
+	<DateRangePicker.Input let:segments>
+		{#each segments as { part, value }}
+			<DateRangePicker.Segment {part}>
+				{value}
+			</DateRangePicker.Segment>
+		{/each}
+		<DateRangePicker.Trigger />
+	</DateRangePicker.Input>
+	<DateRangePicker.Content>
+		<DateRangePicker.Calendar let:months let:daysOfWeek>
+			<DateRangePicker.Header>
+				<DateRangePicker.PrevButton />
+				<DateRangePicker.Heading />
+				<DateRangePicker.NextButton />
+			</DateRangePicker.Header>
+			{#each months as month}
+				<DateRangePicker.Grid>
+					<DateRangePicker.GridHead>
+						<DateRangePicker.GridRow>
+							{#each daysOfWeek as day}
+								<DateRangePicker.HeadCell>
+									{day}
+								</DateRangePicker.HeadCell>
+							{/each}
+						</DateRangePicker.GridRow>
+					</DateRangePicker.GridHead>
+					<DateRangePicker.GridBody>
+						{#each month.weeks as weekDates}
+							<DateRangePicker.GridRow>
+								{#each weekDates as date}
+									<DateRangePicker.Cell {date}>
+										<DateRangePicker.Date {date} month={month.value} />
+									</DateRangePicker.Cell>
+								{/each}
+							</DateRangePicker.GridRow>
+						{/each}
+					</DateRangePicker.GridBody>
+				</DateRangePicker.Grid>
+			{/each}
+		</DateRangePicker.Calendar>
+	</DateRangePicker.Content>
+</DateRangePicker.Root>
+```
+
+<APISection {schemas} />
diff --git a/src/components/demos/date-picker-demo.svelte b/src/components/demos/date-picker-demo.svelte
index 869e0a115..09497f5ef 100644
--- a/src/components/demos/date-picker-demo.svelte
+++ b/src/components/demos/date-picker-demo.svelte
@@ -35,48 +35,46 @@
 				let:months
 				let:weekdays
 			>
-				<DatePicker.CalendarHeader class="flex items-center justify-between">
-					<DatePicker.CalendarPrevButton
+				<DatePicker.Header class="flex items-center justify-between">
+					<DatePicker.PrevButton
 						class="inline-flex items-center justify-center rounded-9px bg-background transition-all sq-10 hover:bg-muted active:scale-98"
 					>
 						<CaretLeft class="sq-6" />
-					</DatePicker.CalendarPrevButton>
-					<DatePicker.CalendarHeading class="text-[15px] font-medium" />
-					<DatePicker.CalendarNextButton
+					</DatePicker.PrevButton>
+					<DatePicker.Heading class="text-[15px] font-medium" />
+					<DatePicker.NextButton
 						class="inline-flex items-center justify-center rounded-9px bg-background transition-all sq-10 hover:bg-muted active:scale-98"
 					>
 						<CaretRight class="sq-6" />
-					</DatePicker.CalendarNextButton>
-				</DatePicker.CalendarHeader>
+					</DatePicker.NextButton>
+				</DatePicker.Header>
 				<div
 					class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0"
 				>
 					{#each months as month}
-						<DatePicker.CalendarGrid
+						<DatePicker.Grid
 							class="w-full border-collapse select-none space-y-1"
 						>
-							<DatePicker.CalendarGridHead>
-								<DatePicker.CalendarGridRow
-									class="mb-1 flex w-full justify-between"
-								>
+							<DatePicker.GridHead>
+								<DatePicker.GridRow class="mb-1 flex w-full justify-between">
 									{#each weekdays as day}
-										<DatePicker.CalendarHeadCell
+										<DatePicker.HeadCell
 											class="w-10 rounded-md text-xs !font-normal text-muted-foreground"
 										>
 											<div>{day.slice(0, 2)}</div>
-										</DatePicker.CalendarHeadCell>
+										</DatePicker.HeadCell>
 									{/each}
-								</DatePicker.CalendarGridRow>
-							</DatePicker.CalendarGridHead>
-							<DatePicker.CalendarGridBody>
+								</DatePicker.GridRow>
+							</DatePicker.GridHead>
+							<DatePicker.GridBody>
 								{#each month.weeks as weekDates}
-									<DatePicker.CalendarGridRow class="flex w-full">
+									<DatePicker.GridRow class="flex w-full">
 										{#each weekDates as date}
-											<DatePicker.CalendarCell
+											<DatePicker.Cell
 												{date}
 												class="relative !p-0 text-center text-sm sq-10"
 											>
-												<DatePicker.CalendarDate
+												<DatePicker.Date
 													{date}
 													month={month.value}
 													class="group relative inline-flex items-center justify-center whitespace-nowrap rounded-9px border border-transparent 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-[selected]:bg-foreground data-[selected]:font-medium data-[disabled]:text-foreground/30 data-[selected]:text-background data-[unavailable]:text-muted-foreground data-[unavailable]:line-through"
@@ -85,13 +83,13 @@
 														class="absolute top-[5px] hidden rounded-full bg-foreground transition-all sq-1 group-data-[today]:block group-data-[selected]:bg-background"
 													/>
 													{date.day}
-												</DatePicker.CalendarDate>
-											</DatePicker.CalendarCell>
+												</DatePicker.Date>
+											</DatePicker.Cell>
 										{/each}
-									</DatePicker.CalendarGridRow>
+									</DatePicker.GridRow>
 								{/each}
-							</DatePicker.CalendarGridBody>
-						</DatePicker.CalendarGrid>
+							</DatePicker.GridBody>
+						</DatePicker.Grid>
 					{/each}
 				</div>
 			</DatePicker.Calendar>
diff --git a/src/components/demos/date-range-picker-demo.svelte b/src/components/demos/date-range-picker-demo.svelte
new file mode 100644
index 000000000..74b970a8b
--- /dev/null
+++ b/src/components/demos/date-range-picker-demo.svelte
@@ -0,0 +1,115 @@
+<script lang="ts">
+	import { DateRangePicker } from "$lib";
+	import { cn, flyAndScale } from "@/utils";
+	import { CaretLeft, CaretRight, CalendarBlank } from "phosphor-svelte";
+</script>
+
+<DateRangePicker.Root weekdayFormat="short">
+	<div class="flex min-w-[200px] flex-col gap-1">
+		<DateRangePicker.Label class="block select-none font-medium"
+			>Rental Days</DateRangePicker.Label
+		>
+		<DateRangePicker.Input
+			let:segments
+			class="flex h-input w-full max-w-[300px] select-none items-center rounded-input border border-border-input bg-background py-3 pl-3 pr-1 text-sm shadow-mini"
+		>
+			{#each segments.start as { part, value }}
+				<div class="inline-block select-none">
+					<DateRangePicker.Segment
+						{part}
+						type="start"
+						class="rounded-[3px] px-1 data-[segment=literal]:px-px data-[segment=literal]:text-muted-foreground"
+					>
+						{value}
+					</DateRangePicker.Segment>
+				</div>
+			{/each}
+			<div aria-hidden class="px-1">-</div>
+			{#each segments.end as { part, value }}
+				<div class="inline-block select-none">
+					<DateRangePicker.Segment
+						{part}
+						type="end"
+						class="rounded-[3px] px-1 data-[segment=literal]:px-px data-[segment=literal]:text-muted-foreground"
+					>
+						{value}
+					</DateRangePicker.Segment>
+				</div>
+			{/each}
+			<DateRangePicker.Trigger
+				class="ml-auto inline-flex items-center justify-center rounded-[5px] transition-all sq-9 hover:bg-muted active:bg-dark-10"
+			>
+				<CalendarBlank class="sq-5" />
+			</DateRangePicker.Trigger>
+		</DateRangePicker.Input>
+		<DateRangePicker.Content sideOffset={6} transition={flyAndScale}>
+			<DateRangePicker.Calendar
+				class="mt-6 rounded-15px border border-dark-10 bg-background p-[22px] shadow-card"
+				let:months
+				let:weekdays
+			>
+				<DateRangePicker.Header class="flex items-center justify-between">
+					<DateRangePicker.PrevButton
+						class="inline-flex items-center justify-center rounded-9px bg-background transition-all sq-10 hover:bg-muted active:scale-98"
+					>
+						<CaretLeft class="sq-6" />
+					</DateRangePicker.PrevButton>
+					<DateRangePicker.Heading class="text-[15px] font-medium" />
+					<DateRangePicker.NextButton
+						class="inline-flex items-center justify-center rounded-9px bg-background transition-all sq-10 hover:bg-muted active:scale-98"
+					>
+						<CaretRight class="sq-6" />
+					</DateRangePicker.NextButton>
+				</DateRangePicker.Header>
+				<div
+					class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0"
+				>
+					{#each months as month}
+						<DateRangePicker.Grid
+							class="w-full border-collapse select-none space-y-1"
+						>
+							<DateRangePicker.GridHead>
+								<DateRangePicker.GridRow
+									class="mb-1 flex w-full justify-between"
+								>
+									{#each weekdays as day}
+										<DateRangePicker.HeadCell
+											class="w-10 rounded-md text-xs !font-normal text-muted-foreground"
+										>
+											<div>{day.slice(0, 2)}</div>
+										</DateRangePicker.HeadCell>
+									{/each}
+								</DateRangePicker.GridRow>
+							</DateRangePicker.GridHead>
+							<DateRangePicker.GridBody>
+								{#each month.weeks as weekDates}
+									<DateRangePicker.GridRow class="flex w-full">
+										{#each weekDates as date}
+											<DateRangePicker.Cell
+												{date}
+												class="relative m-0 !p-0 text-center text-sm sq-10"
+											>
+												<DateRangePicker.Date
+													{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"
+													)}
+												>
+													<div
+														class="absolute top-[5px] hidden rounded-full bg-foreground transition-all sq-1 group-data-[today]:block group-data-[selected]:bg-background"
+													/>
+													{date.day}
+												</DateRangePicker.Date>
+											</DateRangePicker.Cell>
+										{/each}
+									</DateRangePicker.GridRow>
+								{/each}
+							</DateRangePicker.GridBody>
+						</DateRangePicker.Grid>
+					{/each}
+				</div>
+			</DateRangePicker.Calendar>
+		</DateRangePicker.Content>
+	</div>
+</DateRangePicker.Root>
diff --git a/src/components/demos/index.ts b/src/components/demos/index.ts
index 82ee494d6..2c704ef61 100644
--- a/src/components/demos/index.ts
+++ b/src/components/demos/index.ts
@@ -10,6 +10,7 @@ export { default as ContextMenuDemo } from "./context-menu-demo.svelte";
 export { default as DateFieldDemo } from "./date-field-demo.svelte";
 export { default as DateRangeFieldDemo } from "./date-range-field-demo.svelte";
 export { default as DatePickerDemo } from "./date-picker-demo.svelte";
+export { default as DateRangePickerDemo } from "./date-range-picker-demo.svelte";
 export { default as DialogDemo } from "./dialog-demo.svelte";
 export { default as DropdownMenuDemo } from "./dropdown-menu-demo.svelte";
 export { default as LabelDemo } from "./label-demo.svelte";
diff --git a/src/config/navigation.ts b/src/config/navigation.ts
index 11d264959..7da8677b4 100644
--- a/src/config/navigation.ts
+++ b/src/config/navigation.ts
@@ -105,14 +105,19 @@ export const navigation: Navigation = {
 					href: "/docs/components/date-field",
 					items: []
 				},
+				{
+					title: "Date Picker",
+					href: "/docs/components/date-picker",
+					items: []
+				},
 				{
 					title: "Date Range Field",
 					href: "/docs/components/date-range-field",
 					items: []
 				},
 				{
-					title: "Date Picker",
-					href: "/docs/components/date-picker",
+					title: "Date Range Picker",
+					href: "/docs/components/date-range-picker",
 					items: []
 				},
 				{
diff --git a/src/lib/bits/date-picker/components/date-picker-calendar-grid-body.svelte b/src/lib/bits/date-picker/components/date-picker-calendar-grid-body.svelte
deleted file mode 100644
index 7634f09f2..000000000
--- a/src/lib/bits/date-picker/components/date-picker-calendar-grid-body.svelte
+++ /dev/null
@@ -1,17 +0,0 @@
-<script lang="ts">
-	import { getCalendarAttrs } from "../ctx.js";
-	import type { GridBodyProps } from "../types.js";
-
-	type $$Props = GridBodyProps;
-	export let asChild: $$Props["asChild"] = false;
-
-	const attrs = getCalendarAttrs("grid-body");
-</script>
-
-{#if asChild}
-	<slot {attrs} />
-{:else}
-	<tbody {...$$restProps} {...attrs}>
-		<slot />
-	</tbody>
-{/if}
diff --git a/src/lib/bits/date-picker/components/date-picker-calendar-grid-head.svelte b/src/lib/bits/date-picker/components/date-picker-calendar-grid-head.svelte
deleted file mode 100644
index 06ffac939..000000000
--- a/src/lib/bits/date-picker/components/date-picker-calendar-grid-head.svelte
+++ /dev/null
@@ -1,17 +0,0 @@
-<script lang="ts">
-	import { getCalendarAttrs } from "../ctx.js";
-	import type { GridHeadProps } from "../types.js";
-
-	type $$Props = GridHeadProps;
-	export let asChild: $$Props["asChild"] = false;
-
-	const attrs = { ...getCalendarAttrs("grid-head"), "aria-hidden": true };
-</script>
-
-{#if asChild}
-	<slot {attrs} />
-{:else}
-	<thead {...$$restProps} {...attrs}>
-		<slot />
-	</thead>
-{/if}
diff --git a/src/lib/bits/date-picker/components/date-picker-calendar-grid-row.svelte b/src/lib/bits/date-picker/components/date-picker-calendar-grid-row.svelte
deleted file mode 100644
index 5cdf946c1..000000000
--- a/src/lib/bits/date-picker/components/date-picker-calendar-grid-row.svelte
+++ /dev/null
@@ -1,18 +0,0 @@
-<script lang="ts">
-	import { getCalendarAttrs } from "../ctx.js";
-	import type { GridRowProps } from "../types.js";
-
-	type $$Props = GridRowProps;
-
-	export let asChild: $$Props["asChild"] = false;
-
-	const attrs = getCalendarAttrs("grid-row");
-</script>
-
-{#if asChild}
-	<slot {attrs} />
-{:else}
-	<tr {...$$restProps} {...attrs}>
-		<slot {attrs} />
-	</tr>
-{/if}
diff --git a/src/lib/bits/date-picker/components/date-picker-calendar-head-cell.svelte b/src/lib/bits/date-picker/components/date-picker-calendar-head-cell.svelte
deleted file mode 100644
index c261a6ac6..000000000
--- a/src/lib/bits/date-picker/components/date-picker-calendar-head-cell.svelte
+++ /dev/null
@@ -1,17 +0,0 @@
-<script lang="ts">
-	import { getCalendarAttrs } from "../ctx.js";
-	import type { HeadCellProps } from "../types.js";
-
-	type $$Props = HeadCellProps;
-	export let asChild: $$Props["asChild"] = false;
-
-	const attrs = getCalendarAttrs("head-cell");
-</script>
-
-{#if asChild}
-	<slot {attrs} />
-{:else}
-	<th {...$$restProps} {...attrs}>
-		<slot />
-	</th>
-{/if}
diff --git a/src/lib/bits/date-picker/components/date-picker-calendar-header.svelte b/src/lib/bits/date-picker/components/date-picker-calendar-header.svelte
deleted file mode 100644
index de8791404..000000000
--- a/src/lib/bits/date-picker/components/date-picker-calendar-header.svelte
+++ /dev/null
@@ -1,16 +0,0 @@
-<script lang="ts">
-	import { getCalendarAttrs } from "../ctx.js";
-	import type { HeaderProps } from "../types.js";
-	type $$Props = HeaderProps;
-	export let asChild: $$Props["asChild"] = false;
-
-	const attrs = getCalendarAttrs("header");
-</script>
-
-{#if asChild}
-	<slot {attrs} />
-{:else}
-	<header {...$$restProps} {...attrs}>
-		<slot {attrs} />
-	</header>
-{/if}
diff --git a/src/lib/bits/date-picker/components/date-picker-calendar-cell.svelte b/src/lib/bits/date-picker/components/date-picker-cell.svelte
similarity index 100%
rename from src/lib/bits/date-picker/components/date-picker-calendar-cell.svelte
rename to src/lib/bits/date-picker/components/date-picker-cell.svelte
diff --git a/src/lib/bits/date-picker/components/date-picker-calendar-date.svelte b/src/lib/bits/date-picker/components/date-picker-date.svelte
similarity index 100%
rename from src/lib/bits/date-picker/components/date-picker-calendar-date.svelte
rename to src/lib/bits/date-picker/components/date-picker-date.svelte
diff --git a/src/lib/bits/date-picker/components/date-picker-calendar-grid.svelte b/src/lib/bits/date-picker/components/date-picker-grid.svelte
similarity index 100%
rename from src/lib/bits/date-picker/components/date-picker-calendar-grid.svelte
rename to src/lib/bits/date-picker/components/date-picker-grid.svelte
diff --git a/src/lib/bits/date-picker/components/date-picker-calendar-heading.svelte b/src/lib/bits/date-picker/components/date-picker-heading.svelte
similarity index 100%
rename from src/lib/bits/date-picker/components/date-picker-calendar-heading.svelte
rename to src/lib/bits/date-picker/components/date-picker-heading.svelte
diff --git a/src/lib/bits/date-picker/components/date-picker-calendar-next-button.svelte b/src/lib/bits/date-picker/components/date-picker-next-button.svelte
similarity index 100%
rename from src/lib/bits/date-picker/components/date-picker-calendar-next-button.svelte
rename to src/lib/bits/date-picker/components/date-picker-next-button.svelte
diff --git a/src/lib/bits/date-picker/components/date-picker-calendar-prev-button.svelte b/src/lib/bits/date-picker/components/date-picker-prev-button.svelte
similarity index 100%
rename from src/lib/bits/date-picker/components/date-picker-calendar-prev-button.svelte
rename to src/lib/bits/date-picker/components/date-picker-prev-button.svelte
diff --git a/src/lib/bits/date-picker/index.ts b/src/lib/bits/date-picker/index.ts
index 3206abdcb..279af2423 100644
--- a/src/lib/bits/date-picker/index.ts
+++ b/src/lib/bits/date-picker/index.ts
@@ -1,15 +1,4 @@
 export { default as Arrow } from "./components/date-picker-arrow.svelte";
-export { default as CalendarCell } from "./components/date-picker-calendar-cell.svelte";
-export { default as CalendarDate } from "./components/date-picker-calendar-date.svelte";
-export { default as CalendarGridBody } from "./components/date-picker-calendar-grid-body.svelte";
-export { default as CalendarGridHead } from "./components/date-picker-calendar-grid-head.svelte";
-export { default as CalendarGridRow } from "./components/date-picker-calendar-grid-row.svelte";
-export { default as CalendarGrid } from "./components/date-picker-calendar-grid.svelte";
-export { default as CalendarHeadCell } from "./components/date-picker-calendar-head-cell.svelte";
-export { default as CalendarHeader } from "./components/date-picker-calendar-header.svelte";
-export { default as CalendarHeading } from "./components/date-picker-calendar-heading.svelte";
-export { default as CalendarNextButton } from "./components/date-picker-calendar-next-button.svelte";
-export { default as CalendarPrevButton } from "./components/date-picker-calendar-prev-button.svelte";
 export { default as Calendar } from "./components/date-picker-calendar.svelte";
 export { default as Close } from "./components/date-picker-close.svelte";
 export { default as Content } from "./components/date-picker-content.svelte";
@@ -19,5 +8,17 @@ export { default as Label } from "./components/date-picker-label.svelte";
 export { default as Segment } from "./components/date-picker-segment.svelte";
 export { default as Trigger } from "./components/date-picker-trigger.svelte";
 export { default as Root } from "./components/date-picker.svelte";
+export { default as GridBody } from "$lib/bits/calendar/components/calendar-grid-body.svelte";
+export { default as GridHead } from "$lib/bits/calendar/components/calendar-grid-head.svelte";
+export { default as GridRow } from "$lib/bits/calendar/components/calendar-grid-row.svelte";
+export { default as HeadCell } from "$lib/bits/calendar/components/calendar-head-cell.svelte";
+export { default as Header } from "$lib/bits/calendar/components/calendar-header.svelte";
+export { default as Cell } from "./components/date-picker-cell.svelte";
+export { default as Date } from "./components/date-picker-date.svelte";
+export { default as Grid } from "./components/date-picker-grid.svelte";
+
+export { default as Heading } from "./components/date-picker-heading.svelte";
+export { default as NextButton } from "./components/date-picker-next-button.svelte";
+export { default as PrevButton } from "./components/date-picker-prev-button.svelte";
 
 export type * from "./types.js";
diff --git a/src/lib/bits/date-range-picker/_types.ts b/src/lib/bits/date-range-picker/_types.ts
new file mode 100644
index 000000000..c020164fa
--- /dev/null
+++ b/src/lib/bits/date-range-picker/_types.ts
@@ -0,0 +1,71 @@
+/**
+ * We define prop types without the HTMLAttributes here so that we can use them
+ * to type-check our API documentation, which requires we document each prop,
+ * but we don't want to document the HTML attributes.
+ */
+
+import type { Expand, OnChangeFn, AsChild, OmitDates } from "$lib/internal/index.js";
+import type { DateRange, SegmentPart } from "$lib/shared";
+import type { DateValue } from "@internationalized/date";
+import type { CreateDateRangePickerProps } from "@melt-ui/svelte";
+
+type Props = Expand<
+	Omit<OmitDates<CreateDateRangePickerProps>, "required" | "name"> & {
+		/**
+		 * The value of the date field.
+		 * You can bind this to a `DateValue` object to programmatically control the value.
+		 */
+		value?: DateRange;
+
+		/**
+		 * A callback function called when the value changes.
+		 */
+		onValueChange?: OnChangeFn<DateRange | undefined>;
+
+		/**
+		 * The placeholder date used to start the field.
+		 */
+		placeholder?: DateValue;
+
+		/**
+		 * A callback function called when the placeholder changes.
+		 */
+		onPlaceholderChange?: OnChangeFn<DateValue>;
+
+		/**
+		 * The id of the validation message element which is used to apply the
+		 * appropriate `aria-describedby` attribute to the input.
+		 */
+		validationId?: string;
+
+		/**
+		 * The id of the description element which is used to describe the input.
+		 * This is used to apply the appropriate `aria-describedby` attribute to the input.
+		 */
+		descriptionId?: string;
+	} & AsChild
+>;
+
+type InputProps = AsChild;
+
+type DescriptionProps = AsChild;
+
+type LabelProps = AsChild;
+
+type CalendarProps = AsChild;
+
+type SegmentProps = Expand<
+	{
+		/**
+		 * The type of field to render (start or end).
+		 */
+		type: "start" | "end";
+
+		/**
+		 * The part of the date to render.
+		 */
+		part: SegmentPart;
+	} & AsChild
+>;
+
+export type { Props, CalendarProps, LabelProps, DescriptionProps, InputProps, SegmentProps };
diff --git a/src/lib/bits/date-range-picker/components/date-range-picker-arrow.svelte b/src/lib/bits/date-range-picker/components/date-range-picker-arrow.svelte
new file mode 100644
index 000000000..b85456909
--- /dev/null
+++ b/src/lib/bits/date-range-picker/components/date-range-picker-arrow.svelte
@@ -0,0 +1,31 @@
+<script lang="ts">
+	import { getPopoverAttrs, getCtx } from "../ctx.js";
+	import { melt } from "@melt-ui/svelte";
+	import type { ArrowProps } from "../types.js";
+
+	type $$Props = ArrowProps;
+
+	export let asChild: $$Props["asChild"] = false;
+	export let size = 8;
+
+	const {
+		elements: { arrow },
+		updateOption
+	} = getCtx();
+
+	const attrs = getPopoverAttrs("arrow");
+
+	$: updateOption("arrowSize", size);
+
+	$: builder = $arrow;
+	$: slotProps = {
+		builder,
+		attrs
+	};
+</script>
+
+{#if asChild}
+	<slot {...slotProps} />
+{:else}
+	<div use:melt={builder} {...$$restProps} {...attrs} />
+{/if}
diff --git a/src/lib/bits/date-range-picker/components/date-range-picker-calendar.svelte b/src/lib/bits/date-range-picker/components/date-range-picker-calendar.svelte
new file mode 100644
index 000000000..846c587aa
--- /dev/null
+++ b/src/lib/bits/date-range-picker/components/date-range-picker-calendar.svelte
@@ -0,0 +1,38 @@
+<script lang="ts">
+	import { melt } from "@melt-ui/svelte";
+	import { getCtx, getCalendarAttrs } from "../ctx.js";
+	import type { CalendarProps } from "../types.js";
+
+	type $$Props = CalendarProps;
+
+	export let asChild: $$Props["asChild"] = false;
+	export let id: $$Props["id"] = undefined;
+
+	const {
+		elements: { calendar },
+		states: { months, weekdays },
+		ids
+	} = getCtx();
+
+	$: if (id) {
+		ids.calendar.calendar.set(id);
+	}
+
+	$: builder = $calendar;
+	const attrs = getCalendarAttrs("root");
+
+	$: slotProps = {
+		builder,
+		attrs,
+		months: $months,
+		weekdays: $weekdays
+	};
+</script>
+
+{#if asChild}
+	<slot {...slotProps} />
+{:else}
+	<div use:melt={builder} {...$$restProps} {...attrs}>
+		<slot {...slotProps} />
+	</div>
+{/if}
diff --git a/src/lib/bits/date-range-picker/components/date-range-picker-cell.svelte b/src/lib/bits/date-range-picker/components/date-range-picker-cell.svelte
new file mode 100644
index 000000000..af9aea3a8
--- /dev/null
+++ b/src/lib/bits/date-range-picker/components/date-range-picker-cell.svelte
@@ -0,0 +1,28 @@
+<script lang="ts">
+	import { getCtx, getCalendarAttrs } from "../ctx.js";
+	import type { CellProps } from "../types.js";
+
+	type $$Props = CellProps;
+
+	export let date: $$Props["date"];
+	export let asChild: $$Props["asChild"] = false;
+
+	const {
+		helpers: { isDateDisabled, isDateUnavailable }
+	} = getCtx();
+
+	$: attrs = {
+		...getCalendarAttrs("cell"),
+		"aria-disabled": $isDateDisabled(date) || $isDateUnavailable(date),
+		"data-disabled": $isDateDisabled(date) ? "" : undefined,
+		role: "gridcell"
+	};
+</script>
+
+{#if asChild}
+	<slot {attrs} />
+{:else}
+	<td {...$$restProps} {...attrs}>
+		<slot {attrs} />
+	</td>
+{/if}
diff --git a/src/lib/bits/date-range-picker/components/date-range-picker-close.svelte b/src/lib/bits/date-range-picker/components/date-range-picker-close.svelte
new file mode 100644
index 000000000..4c7fefd3f
--- /dev/null
+++ b/src/lib/bits/date-range-picker/components/date-range-picker-close.svelte
@@ -0,0 +1,39 @@
+<script lang="ts">
+	import { melt } from "@melt-ui/svelte";
+	import { getCtx, getPopoverAttrs } from "../ctx.js";
+	import type { CloseProps, CloseEvents } from "../types.js";
+	import { createDispatcher } from "$lib/internal/events.js";
+
+	type $$Props = CloseProps;
+	type $$Events = CloseEvents;
+
+	export let asChild: $$Props["asChild"] = false;
+
+	const {
+		elements: { close }
+	} = getCtx();
+
+	const dispatch = createDispatcher();
+	const attrs = getPopoverAttrs("close");
+
+	$: builder = $close;
+	$: slotProps = {
+		builder,
+		attrs
+	};
+</script>
+
+{#if asChild}
+	<slot {...slotProps} />
+{:else}
+	<button
+		use:melt={builder}
+		type="button"
+		{...$$restProps}
+		{...attrs}
+		on:m-click={dispatch}
+		on:m-keydown={dispatch}
+	>
+		<slot {...slotProps} />
+	</button>
+{/if}
diff --git a/src/lib/bits/date-range-picker/components/date-range-picker-content.svelte b/src/lib/bits/date-range-picker/components/date-range-picker-content.svelte
new file mode 100644
index 000000000..f06066bfa
--- /dev/null
+++ b/src/lib/bits/date-range-picker/components/date-range-picker-content.svelte
@@ -0,0 +1,104 @@
+<script lang="ts">
+	import { melt } from "@melt-ui/svelte";
+	import type { Transition } from "$lib/internal/index.js";
+	import { getCtx, getPopoverAttrs, updatePositioning } from "../ctx.js";
+	import type { ContentProps } from "../types.js";
+
+	type T = $$Generic<Transition>;
+	type In = $$Generic<Transition>;
+	type Out = $$Generic<Transition>;
+
+	type $$Props = ContentProps<T, In, Out>;
+
+	export let transition: $$Props["transition"] = undefined;
+	export let transitionConfig: $$Props["transitionConfig"] = undefined;
+	export let inTransition: $$Props["inTransition"] = undefined;
+	export let inTransitionConfig: $$Props["inTransitionConfig"] = undefined;
+	export let outTransition: $$Props["outTransition"] = undefined;
+	export let outTransitionConfig: $$Props["outTransitionConfig"] = undefined;
+	export let asChild: $$Props["asChild"] = false;
+	export let id: $$Props["id"] = undefined;
+	export let side: $$Props["side"] = "bottom";
+	export let align: $$Props["align"] = "center";
+	export let sideOffset: $$Props["sideOffset"] = 0;
+	export let alignOffset: $$Props["alignOffset"] = 0;
+	export let collisionPadding: $$Props["collisionPadding"] = 8;
+	export let avoidCollisions: $$Props["avoidCollisions"] = true;
+	export let collisionBoundary: $$Props["collisionBoundary"] = undefined;
+	export let sameWidth: $$Props["sameWidth"] = false;
+	export let fitViewport: $$Props["fitViewport"] = false;
+
+	const {
+		elements: { content },
+		states: { open },
+		ids
+	} = getCtx();
+
+	const attrs = getPopoverAttrs("content");
+
+	$: if (id) {
+		ids.popover.content.set(id);
+	}
+	$: builder = $content;
+	$: slotProps = {
+		builder,
+		attrs
+	};
+
+	$: updatePositioning({
+		side,
+		align,
+		sideOffset,
+		alignOffset,
+		collisionPadding,
+		avoidCollisions,
+		collisionBoundary,
+		sameWidth,
+		fitViewport
+	});
+</script>
+
+{#if asChild && $open}
+	<slot {...slotProps} />
+{:else if transition && $open}
+	<div
+		transition:transition={transitionConfig}
+		use:melt={builder}
+		{...$$restProps}
+		{...attrs}
+	>
+		<slot {...slotProps} />
+	</div>
+{:else if inTransition && outTransition && $open}
+	<div
+		in:inTransition={inTransitionConfig}
+		out:outTransition={outTransitionConfig}
+		use:melt={builder}
+		{...$$restProps}
+		{...attrs}
+	>
+		<slot {...slotProps} />
+	</div>
+{:else if inTransition && $open}
+	<div
+		in:inTransition={inTransitionConfig}
+		use:melt={builder}
+		{...$$restProps}
+		{...attrs}
+	>
+		<slot {...slotProps} />
+	</div>
+{:else if outTransition && $open}
+	<div
+		out:outTransition={outTransitionConfig}
+		use:melt={builder}
+		{...$$restProps}
+		{...attrs}
+	>
+		<slot {...slotProps} />
+	</div>
+{:else if $open}
+	<div use:melt={builder} {...$$restProps} {...attrs}>
+		<slot {...slotProps} />
+	</div>
+{/if}
diff --git a/src/lib/bits/date-range-picker/components/date-range-picker-date.svelte b/src/lib/bits/date-range-picker/components/date-range-picker-date.svelte
new file mode 100644
index 000000000..714669ec6
--- /dev/null
+++ b/src/lib/bits/date-range-picker/components/date-range-picker-date.svelte
@@ -0,0 +1,36 @@
+<script lang="ts">
+	import { melt } from "@melt-ui/svelte";
+	import { getCtx, getCalendarAttrs } from "../ctx.js";
+	import type { DateProps } from "../types.js";
+
+	type $$Props = DateProps;
+
+	export let date: $$Props["date"];
+	export let month: $$Props["month"];
+	export let asChild: $$Props["asChild"] = false;
+
+	const {
+		elements: { cell },
+		helpers: { isDateDisabled, isDateUnavailable }
+	} = getCtx();
+
+	$: builder = $cell(date, month);
+	const attrs = getCalendarAttrs("date");
+
+	$: slotProps = {
+		builder,
+		attrs,
+		disabled: $isDateDisabled(date),
+		unavailable: $isDateUnavailable(date)
+	};
+</script>
+
+{#if asChild}
+	<slot {...slotProps} />
+{:else}
+	<div use:melt={builder} {...attrs} {...$$restProps}>
+		<slot {...slotProps}>
+			{date.day}
+		</slot>
+	</div>
+{/if}
diff --git a/src/lib/bits/date-range-picker/components/date-range-picker-field.svelte b/src/lib/bits/date-range-picker/components/date-range-picker-field.svelte
new file mode 100644
index 000000000..5b8cb92af
--- /dev/null
+++ b/src/lib/bits/date-range-picker/components/date-range-picker-field.svelte
@@ -0,0 +1,74 @@
+<script lang="ts">
+	import { setCtx } from "../ctx.js";
+	import type { Props } from "../types.js";
+
+	type $$Props = Props;
+
+	export let value: $$Props["value"] = undefined;
+	export let onValueChange: $$Props["onValueChange"] = undefined;
+	export let placeholder: $$Props["placeholder"] = undefined;
+	export let onPlaceholderChange: $$Props["onPlaceholderChange"] = undefined;
+	export let disabled: $$Props["disabled"] = undefined;
+	export let isDateUnavailable: $$Props["isDateUnavailable"] = undefined;
+	export let granularity: $$Props["granularity"] = undefined;
+	export let hideTimeZone: $$Props["hideTimeZone"] = undefined;
+	export let hourCycle: $$Props["hourCycle"] = undefined;
+	export let locale: $$Props["locale"] = undefined;
+	export let maxValue: $$Props["maxValue"] = undefined;
+	export let minValue: $$Props["minValue"] = undefined;
+	export let readonly: $$Props["readonly"] = undefined;
+
+	const {
+		states: {
+			value: localValue,
+			placeholder: localPlaceholder,
+			isInvalid: localIsInvalid
+		},
+		updateOption
+	} = setCtx({
+		defaultValue: value,
+		defaultPlaceholder: placeholder,
+		disabled,
+		granularity,
+		hideTimeZone,
+		hourCycle,
+		locale,
+		maxValue,
+		minValue,
+		readonly,
+		isDateUnavailable,
+		onValueChange: ({ next }) => {
+			if (value !== next) {
+				onValueChange?.(next);
+				value = next;
+			}
+			return next;
+		},
+		onPlaceholderChange: ({ next }) => {
+			if (placeholder !== next) {
+				onPlaceholderChange?.(next);
+				placeholder = next;
+			}
+			return next;
+		}
+	});
+
+	$: value !== undefined && localValue.set(value);
+	$: placeholder !== undefined && localPlaceholder.set(placeholder);
+
+	$: updateOption("disabled", disabled);
+	$: updateOption("isDateUnavailable", isDateUnavailable);
+	$: updateOption("granularity", granularity);
+	$: updateOption("hideTimeZone", hideTimeZone);
+	$: updateOption("hourCycle", hourCycle);
+	$: updateOption("locale", locale);
+	$: updateOption("maxValue", maxValue);
+	$: updateOption("minValue", minValue);
+	$: updateOption("readonly", readonly);
+
+	$: slotProps = {
+		isInvalid: $localIsInvalid
+	};
+</script>
+
+<slot {...slotProps} />
diff --git a/src/lib/bits/date-range-picker/components/date-range-picker-grid.svelte b/src/lib/bits/date-range-picker/components/date-range-picker-grid.svelte
new file mode 100644
index 000000000..cb11be0e0
--- /dev/null
+++ b/src/lib/bits/date-range-picker/components/date-range-picker-grid.svelte
@@ -0,0 +1,29 @@
+<script lang="ts">
+	import { melt } from "@melt-ui/svelte";
+	import { getCalendarAttrs, getCtx } from "../ctx.js";
+	import type { GridProps } from "../types.js";
+
+	type $$Props = GridProps;
+
+	export let asChild: $$Props["asChild"] = false;
+
+	const {
+		elements: { grid }
+	} = getCtx();
+
+	$: builder = $grid;
+	const attrs = getCalendarAttrs("grid");
+
+	$: slotProps = {
+		builder,
+		attrs
+	};
+</script>
+
+{#if asChild}
+	<slot {...slotProps} />
+{:else}
+	<table use:melt={builder} {...$$restProps} {...attrs}>
+		<slot {...slotProps} />
+	</table>
+{/if}
diff --git a/src/lib/bits/date-range-picker/components/date-range-picker-heading.svelte b/src/lib/bits/date-range-picker/components/date-range-picker-heading.svelte
new file mode 100644
index 000000000..b67adec42
--- /dev/null
+++ b/src/lib/bits/date-range-picker/components/date-range-picker-heading.svelte
@@ -0,0 +1,27 @@
+<script lang="ts">
+	import { melt } from "@melt-ui/svelte";
+	import { getCalendarAttrs, getCtx } from "../ctx.js";
+	import type { HeadingProps } from "../types.js";
+
+	type $$Props = HeadingProps;
+
+	export let asChild: $$Props["asChild"] = false;
+
+	const {
+		elements: { heading },
+		states: { headingValue }
+	} = getCtx();
+
+	$: builder = $heading;
+	const attrs = getCalendarAttrs("heading");
+</script>
+
+{#if asChild}
+	<slot {builder} {attrs} headingValue={$headingValue} />
+{:else}
+	<div use:melt={builder} {...$$restProps} {...attrs}>
+		<slot {builder} {attrs} headingValue={$headingValue}>
+			{$headingValue}
+		</slot>
+	</div>
+{/if}
diff --git a/src/lib/bits/date-range-picker/components/date-range-picker-input.svelte b/src/lib/bits/date-range-picker/components/date-range-picker-input.svelte
new file mode 100644
index 000000000..f646c5501
--- /dev/null
+++ b/src/lib/bits/date-range-picker/components/date-range-picker-input.svelte
@@ -0,0 +1,37 @@
+<script lang="ts">
+	import { melt } from "@melt-ui/svelte";
+	import { getCtx, getFieldAttrs } from "../ctx.js";
+	import type { InputProps } from "../types.js";
+
+	type $$Props = InputProps;
+
+	export let asChild: $$Props["asChild"] = false;
+	export let id: $$Props["id"] = undefined;
+
+	const {
+		elements: { field },
+		states: { segmentContents },
+		ids
+	} = getCtx();
+
+	$: if (id) {
+		ids.rangeField.field.field.set(id);
+	}
+
+	const attrs = getFieldAttrs("input");
+
+	$: builder = $field;
+	$: slotProps = {
+		builder,
+		attrs,
+		segments: $segmentContents
+	};
+</script>
+
+{#if asChild}
+	<slot {...slotProps} />
+{:else}
+	<div use:melt={builder} {...$$restProps} {...attrs}>
+		<slot {...slotProps} />
+	</div>
+{/if}
diff --git a/src/lib/bits/date-range-picker/components/date-range-picker-label.svelte b/src/lib/bits/date-range-picker/components/date-range-picker-label.svelte
new file mode 100644
index 000000000..9242303a3
--- /dev/null
+++ b/src/lib/bits/date-range-picker/components/date-range-picker-label.svelte
@@ -0,0 +1,35 @@
+<script lang="ts">
+	import { melt } from "@melt-ui/svelte";
+	import { getCtx, getFieldAttrs } from "../ctx.js";
+	import type { LabelProps } from "../types.js";
+
+	type $$Props = LabelProps;
+
+	export let asChild: $$Props["asChild"] = false;
+	export let id: $$Props["id"] = undefined;
+
+	const {
+		elements: { label },
+		ids
+	} = getCtx();
+
+	if (id) {
+		ids.rangeField.field.label.set(id);
+	}
+
+	const attrs = getFieldAttrs("label");
+
+	$: builder = $label;
+	$: slotProps = {
+		builder,
+		attrs
+	};
+</script>
+
+{#if asChild}
+	<slot {...slotProps} />
+{:else}
+	<span use:melt={builder} {...$$restProps} {...attrs}>
+		<slot {...slotProps} />
+	</span>
+{/if}
diff --git a/src/lib/bits/date-range-picker/components/date-range-picker-next-button.svelte b/src/lib/bits/date-range-picker/components/date-range-picker-next-button.svelte
new file mode 100644
index 000000000..c887fcf5e
--- /dev/null
+++ b/src/lib/bits/date-range-picker/components/date-range-picker-next-button.svelte
@@ -0,0 +1,24 @@
+<script lang="ts">
+	import { melt } from "@melt-ui/svelte";
+	import { getCalendarAttrs, getCtx } from "../ctx.js";
+	import type { NextButtonProps } from "../types.js";
+
+	type $$Props = NextButtonProps;
+
+	export let asChild: $$Props["asChild"] = false;
+
+	const {
+		elements: { nextButton }
+	} = getCtx();
+
+	$: builder = $nextButton;
+	const attrs = getCalendarAttrs("next-button");
+</script>
+
+{#if asChild}
+	<slot {builder} {attrs} />
+{:else}
+	<button use:melt={builder} type="button" {...$$restProps} {...attrs}>
+		<slot {builder} {attrs} />
+	</button>
+{/if}
diff --git a/src/lib/bits/date-range-picker/components/date-range-picker-prev-button.svelte b/src/lib/bits/date-range-picker/components/date-range-picker-prev-button.svelte
new file mode 100644
index 000000000..64e7cda89
--- /dev/null
+++ b/src/lib/bits/date-range-picker/components/date-range-picker-prev-button.svelte
@@ -0,0 +1,29 @@
+<script lang="ts">
+	import { melt } from "@melt-ui/svelte";
+	import { getCalendarAttrs, getCtx } from "../ctx.js";
+	import type { PrevButtonProps } from "../types.js";
+
+	type $$Props = PrevButtonProps;
+
+	export let asChild: $$Props["asChild"] = false;
+
+	const {
+		elements: { prevButton }
+	} = getCtx();
+
+	$: builder = $prevButton;
+	const attrs = getCalendarAttrs("prev-button");
+
+	$: slotProps = {
+		builder,
+		attrs
+	};
+</script>
+
+{#if asChild}
+	<slot {...slotProps} />
+{:else}
+	<button use:melt={builder} type="button" {...$$restProps} {...attrs}>
+		<slot {...slotProps} />
+	</button>
+{/if}
diff --git a/src/lib/bits/date-range-picker/components/date-range-picker-segment.svelte b/src/lib/bits/date-range-picker/components/date-range-picker-segment.svelte
new file mode 100644
index 000000000..e1fdcad8d
--- /dev/null
+++ b/src/lib/bits/date-range-picker/components/date-range-picker-segment.svelte
@@ -0,0 +1,41 @@
+<script lang="ts">
+	import { melt } from "@melt-ui/svelte";
+	import { getCtx, getFieldAttrs } from "../ctx.js";
+	import type { SegmentProps } from "../types.js";
+
+	type $$Props = SegmentProps;
+
+	export let asChild: $$Props["asChild"] = false;
+	export let id: $$Props["id"] = undefined;
+	export let part: $$Props["part"];
+	export let type: $$Props["type"];
+
+	const {
+		elements: { startSegment, endSegment },
+		ids
+	} = getCtx();
+
+	$: if (id && part !== "literal") {
+		if (type === "start") {
+			ids.rangeField.start[part].set(id);
+		} else {
+			ids.rangeField.end[part].set(id);
+		}
+	}
+
+	const attrs = getFieldAttrs("segment");
+
+	$: builder = type === "start" ? $startSegment(part) : $endSegment(part);
+	$: slotProps = {
+		builder,
+		attrs
+	};
+</script>
+
+{#if asChild}
+	<slot {...slotProps} />
+{:else}
+	<div use:melt={builder} {...$$restProps} {...attrs}>
+		<slot {...slotProps} />
+	</div>
+{/if}
diff --git a/src/lib/bits/date-range-picker/components/date-range-picker-trigger.svelte b/src/lib/bits/date-range-picker/components/date-range-picker-trigger.svelte
new file mode 100644
index 000000000..3e965f7d2
--- /dev/null
+++ b/src/lib/bits/date-range-picker/components/date-range-picker-trigger.svelte
@@ -0,0 +1,44 @@
+<script lang="ts">
+	import { melt } from "@melt-ui/svelte";
+	import { getCtx, getPopoverAttrs } from "../ctx.js";
+	import type { TriggerEvents, TriggerProps } from "../types.js";
+	import { createDispatcher } from "$lib/internal/events.js";
+
+	type $$Props = TriggerProps;
+	type $$Events = TriggerEvents;
+
+	export let asChild: $$Props["asChild"] = false;
+	export let id: $$Props["id"] = undefined;
+
+	const {
+		elements: { trigger },
+		ids
+	} = getCtx();
+
+	const dispatch = createDispatcher();
+	const attrs = getPopoverAttrs("trigger");
+
+	$: if (id) {
+		ids.popover.trigger.set(id);
+	}
+	$: builder = $trigger;
+	$: slotProps = {
+		builder,
+		attrs
+	};
+</script>
+
+{#if asChild}
+	<slot {...slotProps} />
+{:else}
+	<button
+		use:melt={builder}
+		type="button"
+		{...$$restProps}
+		{...attrs}
+		on:m-click={dispatch}
+		on:m-keydown={dispatch}
+	>
+		<slot {...slotProps} />
+	</button>
+{/if}
diff --git a/src/lib/bits/date-range-picker/components/date-range-picker.svelte b/src/lib/bits/date-range-picker/components/date-range-picker.svelte
new file mode 100644
index 000000000..b9267636a
--- /dev/null
+++ b/src/lib/bits/date-range-picker/components/date-range-picker.svelte
@@ -0,0 +1,209 @@
+<script lang="ts">
+	import { derived } from "svelte/store";
+	import { setCtx } from "../ctx.js";
+	import type { Props } from "../types.js";
+
+	type $$Props = Props;
+
+	export let value: $$Props["value"] = undefined;
+	export let onValueChange: $$Props["onValueChange"] = undefined;
+	export let placeholder: $$Props["placeholder"] = undefined;
+	export let onPlaceholderChange: $$Props["onPlaceholderChange"] = undefined;
+	export let disabled: $$Props["disabled"] = undefined;
+	export let isDateUnavailable: $$Props["isDateUnavailable"] = undefined;
+	export let granularity: $$Props["granularity"] = undefined;
+	export let hideTimeZone: $$Props["hideTimeZone"] = undefined;
+	export let hourCycle: $$Props["hourCycle"] = undefined;
+	export let locale: $$Props["locale"] = undefined;
+	export let maxValue: $$Props["maxValue"] = undefined;
+	export let minValue: $$Props["minValue"] = undefined;
+	export let readonly: $$Props["readonly"] = undefined;
+	export let validationId: $$Props["validationId"] = undefined;
+	export let descriptionId: $$Props["descriptionId"] = undefined;
+	export let preventDeselect: $$Props["preventDeselect"] = undefined;
+	export let pagedNavigation: $$Props["pagedNavigation"] = undefined;
+	export let weekStartsOn: $$Props["weekStartsOn"] = undefined;
+	export let isDateDisabled: $$Props["isDateDisabled"] = undefined;
+	export let fixedWeeks: $$Props["fixedWeeks"] = undefined;
+	export let calendarLabel: $$Props["calendarLabel"] = undefined;
+	export let weekdayFormat: $$Props["weekdayFormat"] = undefined;
+
+	const {
+		states: {
+			value: localValue,
+			placeholder: localPlaceholder,
+			isInvalid: localIsInvalid
+		},
+		updateOption,
+		ids
+	} = setCtx({
+		defaultValue: value,
+		defaultPlaceholder: placeholder,
+		preventDeselect,
+		pagedNavigation,
+		weekStartsOn,
+		isDateDisabled,
+		fixedWeeks,
+		calendarLabel,
+		disabled,
+		granularity,
+		hideTimeZone,
+		hourCycle,
+		locale,
+		maxValue,
+		minValue,
+		readonly,
+		weekdayFormat,
+		isDateUnavailable,
+		onValueChange: ({ next }) => {
+			if (value !== next) {
+				onValueChange?.(next);
+				value = next;
+			}
+			return next;
+		},
+		onPlaceholderChange: ({ next }) => {
+			if (placeholder !== next) {
+				onPlaceholderChange?.(next);
+				placeholder = next;
+			}
+			return next;
+		}
+	});
+
+	const startFieldIds = derived(
+		[
+			ids.rangeField.start.day,
+			ids.rangeField.start.dayPeriod,
+			ids.rangeField.start.field,
+			ids.rangeField.start.hour,
+			ids.rangeField.start.minute,
+			ids.rangeField.start.month,
+			ids.rangeField.start.second,
+			ids.rangeField.start.year,
+			ids.rangeField.start.timeZoneName
+		],
+		([
+			$dayId,
+			$dayPeriodId,
+			$hourId,
+			$minuteId,
+			$monthId,
+			$secondId,
+			$yearId,
+			$timeZoneNameId
+		]) => ({
+			day: $dayId,
+			dayPeriod: $dayPeriodId,
+			hour: $hourId,
+			minute: $minuteId,
+			month: $monthId,
+			second: $secondId,
+			year: $yearId,
+			timeZoneName: $timeZoneNameId
+		})
+	);
+
+	const endFieldIds = derived(
+		[
+			ids.rangeField.end.day,
+			ids.rangeField.end.dayPeriod,
+			ids.rangeField.end.field,
+			ids.rangeField.end.hour,
+			ids.rangeField.end.minute,
+			ids.rangeField.end.month,
+			ids.rangeField.end.second,
+			ids.rangeField.end.year,
+			ids.rangeField.end.timeZoneName
+		],
+		([
+			$dayId,
+			$dayPeriodId,
+			$hourId,
+			$minuteId,
+			$monthId,
+			$secondId,
+			$yearId,
+			$timeZoneNameId
+		]) => ({
+			day: $dayId,
+			dayPeriod: $dayPeriodId,
+			hour: $hourId,
+			minute: $minuteId,
+			month: $monthId,
+			second: $secondId,
+			year: $yearId,
+			timeZoneName: $timeZoneNameId
+		})
+	);
+
+	const idValues = derived(
+		[
+			ids.rangeField.field.field,
+			ids.rangeField.field.description,
+			ids.rangeField.field.label,
+			ids.rangeField.field.validation,
+			ids.calendar.calendar,
+			ids.popover.content,
+			ids.popover.trigger,
+			startFieldIds,
+			endFieldIds
+		],
+		([
+			$fieldId,
+			$descriptionId,
+			$labelId,
+			$validationId,
+			$calendarId,
+			$contentId,
+			$triggerId,
+			$startFieldIds,
+			$endFieldIds
+		]) => ({
+			field: $fieldId,
+			description: $descriptionId,
+			label: $labelId,
+			validation: $validationId,
+			calendar: $calendarId,
+			content: $contentId,
+			trigger: $triggerId,
+			startField: $startFieldIds,
+			endField: $endFieldIds
+		})
+	);
+
+	$: if (validationId) {
+		ids.rangeField.field.validation.set(validationId);
+	}
+
+	$: if (descriptionId) {
+		ids.rangeField.field.description.set(descriptionId);
+	}
+
+	$: value !== undefined && localValue.set(value);
+	$: placeholder !== undefined && localPlaceholder.set(placeholder);
+
+	$: updateOption("disabled", disabled);
+	$: updateOption("isDateUnavailable", isDateUnavailable);
+	$: updateOption("granularity", granularity);
+	$: updateOption("hideTimeZone", hideTimeZone);
+	$: updateOption("hourCycle", hourCycle);
+	$: updateOption("locale", locale);
+	$: updateOption("maxValue", maxValue);
+	$: updateOption("minValue", minValue);
+	$: updateOption("readonly", readonly);
+	$: updateOption("fixedWeeks", fixedWeeks);
+	$: updateOption("preventDeselect", preventDeselect);
+	$: updateOption("pagedNavigation", pagedNavigation);
+	$: updateOption("weekStartsOn", weekStartsOn);
+	$: updateOption("isDateDisabled", isDateDisabled);
+	$: updateOption("calendarLabel", calendarLabel);
+	$: updateOption("weekdayFormat", weekdayFormat);
+
+	$: slotProps = {
+		isInvalid: $localIsInvalid,
+		ids: $idValues
+	};
+</script>
+
+<slot {...slotProps} />
diff --git a/src/lib/bits/date-range-picker/ctx.ts b/src/lib/bits/date-range-picker/ctx.ts
new file mode 100644
index 000000000..97a8a6c76
--- /dev/null
+++ b/src/lib/bits/date-range-picker/ctx.ts
@@ -0,0 +1,43 @@
+import { createDateRangePicker, type CreateDateRangePickerProps } from "@melt-ui/svelte";
+import { getContext, setContext } from "svelte";
+import type { Writable } from "svelte/store";
+import { removeUndefined, getOptionUpdater } from "$lib/internal/index.js";
+import { getAttrs as getCalendarAttrs } from "$lib/bits/calendar/ctx.js";
+import { getAttrs as getFieldAttrs } from "$lib/bits/date-field/ctx.js";
+import { getAttrs as getPopoverAttrs } from "$lib/bits/popover/ctx.js";
+import type { FloatingConfig } from "$lib/bits/floating/floating-config.js";
+import { getPositioningUpdater, type PositioningProps } from "$lib/bits/floating/helpers.js";
+
+const NAME = "date-range-picker";
+
+export { getCalendarAttrs, getFieldAttrs, getPopoverAttrs };
+
+export function setCtx(props: CreateDateRangePickerProps) {
+	const dateRangePicker = createDateRangePicker(removeUndefined(props));
+	const updateOption = getOptionUpdater(dateRangePicker.options);
+	setContext(NAME, { ...dateRangePicker, updateOption });
+
+	return {
+		...dateRangePicker,
+		updateOption: getOptionUpdater(dateRangePicker.options)
+	};
+}
+
+export function getCtx() {
+	return getContext<ReturnType<typeof setCtx>>(NAME);
+}
+
+const defaultPlacement = {
+	side: "bottom",
+	align: "center"
+} satisfies PositioningProps;
+
+export function updatePositioning(props: PositioningProps) {
+	const withDefaults = { ...defaultPlacement, ...props } satisfies PositioningProps;
+	const {
+		options: { positioning }
+	} = getCtx();
+
+	const updater = getPositioningUpdater(positioning as Writable<FloatingConfig>);
+	updater(withDefaults);
+}
diff --git a/src/lib/bits/date-range-picker/index.ts b/src/lib/bits/date-range-picker/index.ts
new file mode 100644
index 000000000..87e3251df
--- /dev/null
+++ b/src/lib/bits/date-range-picker/index.ts
@@ -0,0 +1,23 @@
+export { default as Arrow } from "./components/date-range-picker-arrow.svelte";
+export { default as Cell } from "./components/date-range-picker-cell.svelte";
+export { default as Date } from "./components/date-range-picker-date.svelte";
+export { default as Heading } from "./components/date-range-picker-heading.svelte";
+export { default as NextButton } from "./components/date-range-picker-next-button.svelte";
+export { default as PrevButton } from "./components/date-range-picker-prev-button.svelte";
+export { default as Calendar } from "./components/date-range-picker-calendar.svelte";
+export { default as Close } from "./components/date-range-picker-close.svelte";
+export { default as Content } from "./components/date-range-picker-content.svelte";
+export { default as Field } from "./components/date-range-picker-field.svelte";
+export { default as Input } from "./components/date-range-picker-input.svelte";
+export { default as Label } from "./components/date-range-picker-label.svelte";
+export { default as Segment } from "./components/date-range-picker-segment.svelte";
+export { default as Trigger } from "./components/date-range-picker-trigger.svelte";
+export { default as Root } from "./components/date-range-picker.svelte";
+export { default as Grid } from "./components/date-range-picker-grid.svelte";
+export { default as GridBody } from "$lib/bits/range-calendar/components/range-calendar-grid-body.svelte";
+export { default as GridHead } from "$lib/bits/range-calendar/components/range-calendar-grid-head.svelte";
+export { default as GridRow } from "$lib/bits/range-calendar/components/range-calendar-grid-row.svelte";
+export { default as HeadCell } from "$lib/bits/range-calendar/components/range-calendar-head-cell.svelte";
+export { default as Header } from "$lib/bits/range-calendar/components/range-calendar-header.svelte";
+
+export type * from "./types.js";
diff --git a/src/lib/bits/date-range-picker/types.ts b/src/lib/bits/date-range-picker/types.ts
new file mode 100644
index 000000000..92b3598bf
--- /dev/null
+++ b/src/lib/bits/date-range-picker/types.ts
@@ -0,0 +1,56 @@
+import type { HTMLDivAttributes, HTMLSpanAttributes } from "$lib/internal/index.js";
+import type * as I from "./_types.js";
+import type {
+	CellProps,
+	DateProps,
+	GridBodyProps,
+	GridHeadProps,
+	GridRowProps,
+	GridProps,
+	HeadCellProps,
+	HeaderProps,
+	HeadingProps,
+	NextButtonProps,
+	PrevButtonProps
+} from "$lib/bits/calendar/types.js";
+import type {
+	TriggerProps,
+	ContentProps,
+	ArrowProps,
+	CloseProps,
+	CloseEvents,
+	TriggerEvents
+} from "$lib/bits/popover/types.js";
+
+type Props = I.Props;
+type LabelProps = I.Props & HTMLSpanAttributes;
+type SegmentProps = I.SegmentProps & HTMLDivAttributes;
+type InputProps = I.InputProps & HTMLDivAttributes;
+type DescriptionProps = I.DescriptionProps & HTMLDivAttributes;
+type CalendarProps = I.CalendarProps & HTMLDivAttributes;
+
+export type {
+	Props,
+	CalendarProps,
+	LabelProps,
+	DescriptionProps,
+	InputProps,
+	SegmentProps,
+	CellProps,
+	DateProps,
+	GridBodyProps,
+	GridHeadProps,
+	GridRowProps,
+	GridProps,
+	HeadCellProps,
+	HeaderProps,
+	HeadingProps,
+	NextButtonProps,
+	PrevButtonProps,
+	TriggerProps,
+	ContentProps,
+	ArrowProps,
+	CloseProps,
+	CloseEvents,
+	TriggerEvents
+};
diff --git a/src/lib/bits/index.ts b/src/lib/bits/index.ts
index 2ffd7a2eb..965e8c7a9 100644
--- a/src/lib/bits/index.ts
+++ b/src/lib/bits/index.ts
@@ -10,6 +10,7 @@ export * as ContextMenu from "./context-menu/index.js";
 export * as DateField from "./date-field/index.js";
 export * as DateRangeField from "./date-range-field/index.js";
 export * as DatePicker from "./date-picker/index.js";
+export * as DateRangePicker from "./date-range-picker/index.js";
 export * as Dialog from "./dialog/index.js";
 export * as DropdownMenu from "./dropdown-menu/index.js";
 export * as LinkPreview from "./link-preview/index.js";

From 932973667fec20b9bb432dc47bd3bada46394601 Mon Sep 17 00:00:00 2001
From: Hunter Johnston <johnstonhuntera@gmail.com>
Date: Fri, 1 Dec 2023 15:51:57 -0500
Subject: [PATCH 191/217] date field api ref

---
 src/content/api-reference/calendar.ts       |  28 +-
 src/content/api-reference/date-field.ts     | 212 +++++++++++++++
 src/content/api-reference/date-picker.ts    | 280 ++++++++++++++++++++
 src/content/api-reference/helpers.ts        |   2 +-
 src/content/api-reference/index.ts          |   6 +-
 src/content/api-reference/range-calendar.ts |   4 +-
 src/content/constants.ts                    |   1 +
 src/lib/bits/date-field/_types.ts           |   2 +-
 src/lib/bits/date-picker/_types.ts          |  20 +-
 9 files changed, 533 insertions(+), 22 deletions(-)
 create mode 100644 src/content/api-reference/date-field.ts
 create mode 100644 src/content/api-reference/date-picker.ts

diff --git a/src/content/api-reference/calendar.ts b/src/content/api-reference/calendar.ts
index e8db1187b..8094d98c5 100644
--- a/src/content/api-reference/calendar.ts
+++ b/src/content/api-reference/calendar.ts
@@ -2,14 +2,14 @@ import type { APISchema } from "@/types";
 import * as C from "@/content/constants.js";
 import {
 	asChild,
-	daysOfWeekSlotProp,
+	weekdaysSlotProp,
 	enums,
 	monthsSlotProp
 } from "@/content/api-reference/helpers.js";
 import type * as Calendar from "$lib/bits/calendar/_types.js";
 import { attrsSlotProp, builderAndAttrsSlotProps } from "./helpers";
 
-const root: APISchema<Calendar.Props> = {
+export const root: APISchema<Calendar.Props> = {
 	title: "Root",
 	description: "The root calendar component which contains all other calendar components.",
 	props: {
@@ -121,7 +121,7 @@ const root: APISchema<Calendar.Props> = {
 	},
 	slotProps: {
 		months: monthsSlotProp,
-		daysOfWeek: daysOfWeekSlotProp,
+		daysOfWeek: weekdaysSlotProp,
 		...builderAndAttrsSlotProps
 	},
 	dataAttributes: [
@@ -144,7 +144,7 @@ const root: APISchema<Calendar.Props> = {
 	]
 };
 
-const cell: APISchema<Calendar.CellProps> = {
+export const cell: APISchema<Calendar.CellProps> = {
 	title: "Cell",
 	description: "A cell in the calendar grid.",
 	props: {
@@ -169,7 +169,7 @@ const cell: APISchema<Calendar.CellProps> = {
 	]
 };
 
-const date: APISchema<Calendar.DateProps> = {
+export const date: APISchema<Calendar.DateProps> = {
 	title: "Date",
 	description: "A date in the calendar grid.",
 	props: {
@@ -238,7 +238,7 @@ const date: APISchema<Calendar.DateProps> = {
 	]
 };
 
-const grid: APISchema<Calendar.GridProps> = {
+export const grid: APISchema<Calendar.GridProps> = {
 	title: "Grid",
 	description: "The grid of dates in the calendar, typically representing a month.",
 	props: {
@@ -253,7 +253,7 @@ const grid: APISchema<Calendar.GridProps> = {
 	]
 };
 
-const gridBody: APISchema<Calendar.GridBodyProps> = {
+export const gridBody: APISchema<Calendar.GridBodyProps> = {
 	title: "GridBody",
 	description: "The body of the grid of dates in the calendar.",
 	props: {
@@ -268,7 +268,7 @@ const gridBody: APISchema<Calendar.GridBodyProps> = {
 	]
 };
 
-const gridHead: APISchema<Calendar.GridHeadProps> = {
+export const gridHead: APISchema<Calendar.GridHeadProps> = {
 	title: "GridHead",
 	description: "The head of the grid of dates in the calendar.",
 	props: {
@@ -285,7 +285,7 @@ const gridHead: APISchema<Calendar.GridHeadProps> = {
 	]
 };
 
-const gridRow: APISchema<Calendar.GridRowProps> = {
+export const gridRow: APISchema<Calendar.GridRowProps> = {
 	title: "GridRow",
 	description: "A row in the grid of dates in the calendar.",
 	props: {
@@ -302,7 +302,7 @@ const gridRow: APISchema<Calendar.GridRowProps> = {
 	]
 };
 
-const headCell: APISchema<Calendar.HeadCellProps> = {
+export const headCell: APISchema<Calendar.HeadCellProps> = {
 	title: "HeadCell",
 	description: "A cell in the head of the grid of dates in the calendar.",
 	props: {
@@ -319,7 +319,7 @@ const headCell: APISchema<Calendar.HeadCellProps> = {
 	]
 };
 
-const header: APISchema<Calendar.HeaderProps> = {
+export const header: APISchema<Calendar.HeaderProps> = {
 	title: "Header",
 	description: "The header of the calendar.",
 	props: {
@@ -336,7 +336,7 @@ const header: APISchema<Calendar.HeaderProps> = {
 	]
 };
 
-const heading: APISchema<Calendar.HeadingProps> = {
+export const heading: APISchema<Calendar.HeadingProps> = {
 	title: "Heading",
 	description: "The heading of the calendar.",
 	props: {
@@ -357,7 +357,7 @@ const heading: APISchema<Calendar.HeadingProps> = {
 	]
 };
 
-const nextButton: APISchema<Calendar.NextButtonProps> = {
+export const nextButton: APISchema<Calendar.NextButtonProps> = {
 	title: "NextButton",
 	description: "The next button of the calendar.",
 	props: {
@@ -374,7 +374,7 @@ const nextButton: APISchema<Calendar.NextButtonProps> = {
 	]
 };
 
-const prevButton: APISchema<Calendar.PrevButtonProps> = {
+export const prevButton: APISchema<Calendar.PrevButtonProps> = {
 	title: "PrevButton",
 	description: "The previous button of the calendar.",
 	props: {
diff --git a/src/content/api-reference/date-field.ts b/src/content/api-reference/date-field.ts
new file mode 100644
index 000000000..47fdb7b30
--- /dev/null
+++ b/src/content/api-reference/date-field.ts
@@ -0,0 +1,212 @@
+import * as C from "@/content/constants.js";
+import type * as DateField from "$lib/bits/date-field/_types.js";
+import type { APISchema } from "@/types";
+import { enums, idsSlotProp, union, asChild } from "@/content/api-reference/helpers.js";
+import { builderAndAttrsSlotProps } from "./helpers";
+
+export const root: APISchema<DateField.Props> = {
+	title: "Root",
+	description: "The root date field component.",
+	props: {
+		value: {
+			type: "DateValue",
+			description: "The selected date."
+		},
+		onValueChange: {
+			type: {
+				type: C.FUNCTION,
+				definition: "(date: DateValue | undefined) => void"
+			},
+			description: "A function that is called when the selected date changes."
+		},
+		placeholder: {
+			type: "DateValue",
+			description:
+				"The placeholder date, which is used to determine what date to start the segments from when no value exists."
+		},
+		onPlaceholderChange: {
+			type: {
+				type: C.FUNCTION,
+				definition: "(date: DateValue) => void"
+			},
+			description: "A function that is called when the placeholder date changes."
+		},
+		isDateUnavailable: {
+			type: {
+				type: C.FUNCTION,
+				definition: "(date: DateValue) => boolean"
+			},
+			description: "A function that returns whether or not a date is unavailable."
+		},
+		hourCycle: {
+			type: {
+				type: C.ENUM,
+				definition: union("12", "24")
+			},
+			description: "The hour cycle to use for formatting times. Defaults to the locale preference"
+		},
+		granularity: {
+			type: {
+				type: C.ENUM,
+				definition: enums("day", "hour", "minute", "second")
+			},
+			description:
+				"The granularity to use for formatting the field. Defaults to `'day'` if a `CalendarDate` is provided, otherwise defaults to `'minute'`. The field will render segments for each part of the date up to and including the specified granularity."
+		},
+		hideTimeZone: {
+			type: C.BOOLEAN,
+			description: "Whether or not to hide the time zone segment of the field.",
+			default: C.FALSE
+		},
+		validationId: {
+			type: C.STRING,
+			description:
+				"The id of your validation message element, if any, which will be applied to the `aria-describedby` attribute of the appropriate elements when a validation error occurs."
+		},
+		descriptionId: {
+			type: C.STRING,
+			description:
+				"The id of your description element, if any, which will be applied to the `aria-describedby` attribute of the appropriate elements."
+		},
+		maxValue: {
+			type: "DateValue",
+			description: "The maximum valid date that can be entered."
+		},
+		minValue: {
+			type: "DateValue",
+			description: "The minimum valid date that can be entered."
+		},
+		locale: {
+			type: C.STRING,
+			description: "The locale to use for formatting dates."
+		},
+		disabled: {
+			default: C.FALSE,
+			type: C.BOOLEAN,
+			description: "Whether or not the accordion is disabled."
+		},
+		readonly: {
+			type: C.BOOLEAN,
+			description: "Whether or not the field is readonly.",
+			default: C.FALSE
+		}
+	},
+	slotProps: {
+		ids: idsSlotProp,
+		isInvalid: {
+			type: C.BOOLEAN,
+			description: "Whether or not the field is invalid."
+		}
+	}
+};
+
+const input: APISchema<DateField.InputProps> = {
+	title: "Input",
+	description: "The container for the segments of the date field.",
+	props: {
+		asChild
+	},
+	slotProps: {
+		...builderAndAttrsSlotProps,
+		segments: {
+			type: {
+				type: C.ARRAY,
+				definition: "{ part: SegmentPart; value: string; }[]"
+			},
+			description: "An array of objects used to render the segments of the date field."
+		}
+	},
+	dataAttributes: [
+		{
+			name: "invalid",
+			description: "Present on the element when the field is invalid."
+		},
+		{
+			name: "disabled",
+			description: "Present on the element when the field is disabled."
+		},
+		{
+			name: "date-field-input",
+			description: "Present on the element."
+		}
+	]
+};
+
+const segment: APISchema<DateField.SegmentProps> = {
+	title: "Segment",
+	description: "A segment of the date field.",
+	props: {
+		asChild,
+		part: {
+			type: {
+				type: "SegmentPart",
+				definition: enums(
+					"month",
+					"day",
+					"year",
+					"hour",
+					"minute",
+					"second",
+					"dayPeriod",
+					"timeZoneName",
+					"literal"
+				)
+			},
+			description: "The part of the date to render."
+		}
+	},
+	slotProps: {
+		...builderAndAttrsSlotProps
+	},
+	dataAttributes: [
+		{
+			name: "invalid",
+			description: "Present on the element when the field is invalid"
+		},
+		{
+			name: "disabled",
+			description: "Present on the element when the field is disabled"
+		},
+		{
+			name: "segment",
+			value: enums(
+				"month",
+				"day",
+				"year",
+				"hour",
+				"minute",
+				"second",
+				"dayPeriod",
+				"timeZoneName",
+				"literal"
+			),
+			isEnum: true,
+			description: "The type of segment the element represents."
+		},
+		{
+			name: "date-field-segment",
+			description: "Present on the element."
+		}
+	]
+};
+
+const label: APISchema<DateField.LabelProps> = {
+	title: "Label",
+	description: "The label for the date field.",
+	props: { asChild },
+	slotProps: {
+		...builderAndAttrsSlotProps
+	},
+	dataAttributes: [
+		{
+			name: "invalid",
+			description: "Present on the element when the field is invalid"
+		},
+		{
+			name: "date-field-label",
+			description: "Present on the element."
+		}
+	]
+};
+
+export const dateField = [root, input, segment, label];
diff --git a/src/content/api-reference/date-picker.ts b/src/content/api-reference/date-picker.ts
new file mode 100644
index 000000000..87640e8fe
--- /dev/null
+++ b/src/content/api-reference/date-picker.ts
@@ -0,0 +1,280 @@
+import type { APISchema } from "@/types";
+import * as C from "@/content/constants.js";
+import {
+	asChild,
+	weekdaysSlotProp,
+	enums,
+	monthsSlotProp,
+	union
+} from "@/content/api-reference/helpers.js";
+import type * as DatePicker from "$lib/bits/date-picker/_types.js";
+import { builderAndAttrsSlotProps, portalProp } from "./helpers";
+import { focusProp } from "./extended-types";
+import {
+	header,
+	cell,
+	gridBody,
+	gridHead,
+	headCell,
+	gridRow,
+	heading,
+	nextButton,
+	prevButton,
+	date,
+	grid
+} from "./calendar";
+import { content, trigger } from "./popover";
+
+const root: APISchema<DatePicker.Props> = {
+	title: "Root",
+	description: "The root date picker component.",
+	props: {
+		value: {
+			type: "DateValue",
+			description: "The selected date."
+		},
+		onValueChange: {
+			type: {
+				type: C.FUNCTION,
+				definition: "(date: DateValue | undefined) => void"
+			},
+			description: "A function that is called when the selected date changes."
+		},
+		placeholder: {
+			type: "DateValue",
+			description:
+				"The placeholder date, which is used to determine what month to display when no date is selected. This updates as the user navigates the calendar, and can be used to programatically control the calendar's view."
+		},
+		onPlaceholderChange: {
+			type: {
+				type: C.FUNCTION,
+				definition: "(date: DateValue) => void"
+			},
+			description: "A function that is called when the placeholder date changes."
+		},
+		pagedNavigation: {
+			type: C.BOOLEAN,
+			description:
+				"Whether or not to use paged navigation for the calendar. Paged navigation causes the previous and next buttons to navigate by the number of months displayed at once, rather than by one month.",
+			default: C.FALSE
+		},
+		preventDeselect: {
+			type: C.BOOLEAN,
+			description:
+				"Whether or not to prevent the user from deselecting a date without selecting another date first.",
+			default: C.FALSE
+		},
+		weekStartsOn: {
+			type: C.NUMBER,
+			description: "The day of the week to start the calendar on. 0 is Sunday, 1 is Monday, etc.",
+			default: "0"
+		},
+		weekdayFormat: {
+			type: {
+				type: C.ENUM,
+				definition: enums("narrow", "short", "long")
+			},
+			description:
+				"The format to use for the weekday strings provided via the `weekdays` slot prop.",
+			default: "'narrow'"
+		},
+		calendarLabel: {
+			type: C.STRING,
+			description: "The accessible label for the calendar."
+		},
+		fixedWeeks: {
+			type: C.BOOLEAN,
+			description: "Whether or not to always display 6 weeks in the calendar.",
+			default: C.FALSE
+		},
+		isDateDisabled: {
+			type: {
+				type: C.FUNCTION,
+				definition: "(date: DateValue) => boolean"
+			},
+			description: "A function that returns whether or not a date is disabled."
+		},
+		isDateUnavailable: {
+			type: {
+				type: C.FUNCTION,
+				definition: "(date: DateValue) => boolean"
+			},
+			description: "A function that returns whether or not a date is unavailable."
+		},
+		maxValue: {
+			type: "DateValue",
+			description: "The maximum date that can be selected."
+		},
+		minValue: {
+			type: "DateValue",
+			description: "The minimum date that can be selected."
+		},
+		locale: {
+			type: C.STRING,
+			description: "The locale to use for formatting dates."
+		},
+		multiple: {
+			type: C.BOOLEAN,
+			description: "Whether or not multiple dates can be selected.",
+			default: C.FALSE
+		},
+		numberOfMonths: {
+			type: C.NUMBER,
+			description: "The number of months to display at once.",
+			default: "1"
+		},
+		disabled: {
+			default: C.FALSE,
+			type: C.BOOLEAN,
+			description: "Whether or not the accordion is disabled."
+		},
+		readonly: {
+			type: C.BOOLEAN,
+			description: "Whether or not the calendar is readonly.",
+			default: C.FALSE
+		},
+		hourCycle: {
+			type: {
+				type: C.ENUM,
+				definition: union("12", "24")
+			},
+			description: "The hour cycle to use for formatting times. Defaults to the locale preference"
+		},
+		granularity: {
+			type: {
+				type: C.ENUM,
+				definition: enums("day", "hour", "minute", "second")
+			},
+			description:
+				"The granularity to use for formatting the field. Defaults to `'day'` if a `CalendarDate` is provided, otherwise defaults to `'minute'`. The field will render segments for each part of the date up to and including the specified granularity."
+		},
+		hideTimeZone: {
+			type: C.BOOLEAN,
+			description: "Whether or not to hide the time zone segment of the field.",
+			default: C.FALSE
+		},
+		validationId: {
+			type: C.STRING,
+			description:
+				"The id of your validation message element, if any, which will be applied to the `aria-describedby` attribute of the appropriate elements when a validation error occurs."
+		},
+		descriptionId: {
+			type: C.STRING,
+			description:
+				"The id of your description element, if any, which will be applied to the `aria-describedby` attribute of the appropriate elements."
+		},
+		disableFocusTrap: {
+			type: C.BOOLEAN,
+			default: C.FALSE,
+			description:
+				"Whether or not to disable the focus trap that is applied to the popover when it's open."
+		},
+		preventScroll: {
+			type: C.BOOLEAN,
+			default: C.FALSE,
+			description: "Whether or not to prevent scrolling the body while the popover is open."
+		},
+		closeOnOutsideClick: {
+			type: C.BOOLEAN,
+			default: C.TRUE,
+			description: "Whether or not to close the popover when clicking outside of it."
+		},
+		closeOnEscape: {
+			type: C.BOOLEAN,
+			default: C.TRUE,
+			description: "Whether or not to close the popover when pressing the escape key."
+		},
+		open: {
+			type: C.BOOLEAN,
+			default: C.FALSE,
+			description: "The open state of the link popover component."
+		},
+		onOpenChange: {
+			type: {
+				type: C.FUNCTION,
+				definition: "(open: boolean) => void"
+			},
+			description: "A callback that fires when the open state changes."
+		},
+		openFocus: {
+			type: focusProp,
+			description: "Override the focus when the popover is opened."
+		},
+		closeFocus: {
+			type: focusProp,
+			description: "Override the focus when the popover is closed."
+		},
+		portal: { ...portalProp("popover") },
+
+		asChild
+	},
+	slotProps: {
+		months: monthsSlotProp,
+		daysOfWeek: weekdaysSlotProp,
+		...builderAndAttrsSlotProps
+	},
+	dataAttributes: [
+		{
+			name: "invalid",
+			description: "Present on the root element when the calendar is invalid."
+		},
+		{
+			name: "disabled",
+			description: "Present on the root element when the calendar is disabled."
+		},
+		{
+			name: "readonly",
+			description: "Present on the root element when the calendar is readonly."
+		},
+		{
+			name: "calendar-root",
+			description: "Present on the root element."
+		}
+	]
+};
+
+const calendar: APISchema<DatePicker.CalendarProps> = {
+	title: "Calendar",
+	description: "The calendar component containing the grids of dates.",
+	slotProps: {
+		months: monthsSlotProp,
+		weekdays: weekdaysSlotProp,
+		...builderAndAttrsSlotProps
+	},
+	dataAttributes: [
+		{
+			name: "invalid",
+			description: "Present on the root element when the calendar is invalid."
+		},
+		{
+			name: "disabled",
+			description: "Present on the root element when the calendar is disabled."
+		},
+		{
+			name: "readonly",
+			description: "Present on the root element when the calendar is readonly."
+		},
+		{
+			name: "calendar-root",
+			description: "Present on the root element."
+		}
+	]
+};
+
+export const datePicker = [
+	root,
+	calendar,
+	header,
+	content,
+	trigger,
+	heading,
+	nextButton,
+	prevButton,
+	cell,
+	date,
+	grid,
+	gridBody,
+	gridHead,
+	gridRow,
+	headCell
+];
diff --git a/src/content/api-reference/helpers.ts b/src/content/api-reference/helpers.ts
index 387f47474..66f728130 100644
--- a/src/content/api-reference/helpers.ts
+++ b/src/content/api-reference/helpers.ts
@@ -36,7 +36,7 @@ export const monthsSlotProp: PropSchema = {
 	description: "The current months to display in the calendar. Used to render the calendar."
 };
 
-export const daysOfWeekSlotProp: PropSchema = {
+export const weekdaysSlotProp: PropSchema = {
 	type: "string[]",
 	description:
 		"The days of the week to display in the calendar, typically used within the table header."
diff --git a/src/content/api-reference/index.ts b/src/content/api-reference/index.ts
index 2e15f4259..5b4da2c8e 100644
--- a/src/content/api-reference/index.ts
+++ b/src/content/api-reference/index.ts
@@ -9,6 +9,8 @@ import { calendar } from "./calendar";
 import { checkbox } from "./checkbox";
 import { collapsible } from "./collapsible";
 import { contextMenu } from "./context-menu";
+import { dateField } from "./date-field";
+import { datePicker } from "./date-picker";
 import { dropdownMenu } from "./dropdown-menu";
 import { label } from "./label";
 import { linkPreview } from "./link-preview";
@@ -77,8 +79,8 @@ export const apiSchemas: Record<Bit, APISchema[]> = {
 	checkbox,
 	collapsible,
 	"context-menu": contextMenu,
-	"date-field": [],
-	"date-picker": [],
+	"date-field": dateField,
+	"date-picker": datePicker,
 	"date-range-field": [],
 	"date-range-picker": [],
 	dialog,
diff --git a/src/content/api-reference/range-calendar.ts b/src/content/api-reference/range-calendar.ts
index e33da4ead..055822ed9 100644
--- a/src/content/api-reference/range-calendar.ts
+++ b/src/content/api-reference/range-calendar.ts
@@ -3,7 +3,7 @@ import * as C from "@/content/constants.js";
 import {
 	asChild,
 	attrsSlotProp,
-	daysOfWeekSlotProp,
+	weekdaysSlotProp,
 	enums,
 	monthsSlotProp
 } from "@/content/api-reference/helpers.js";
@@ -120,7 +120,7 @@ const root: APISchema<RangeCalendar.Props> = {
 	},
 	slotProps: {
 		months: monthsSlotProp,
-		daysOfWeek: daysOfWeekSlotProp,
+		daysOfWeek: weekdaysSlotProp,
 		...builderAndAttrsSlotProps
 	},
 	dataAttributes: [
diff --git a/src/content/constants.ts b/src/content/constants.ts
index 18bbe4f9c..adaa89720 100644
--- a/src/content/constants.ts
+++ b/src/content/constants.ts
@@ -9,6 +9,7 @@ export const OBJECT = "object";
 export const FALSE = "false";
 export const TRUE = "true";
 export const UNKNOWN = "unknown";
+export const ARRAY = "array";
 
 export const HORIZONTAL = "horizontal";
 export const VERTICAL = "vertical";
diff --git a/src/lib/bits/date-field/_types.ts b/src/lib/bits/date-field/_types.ts
index 33ba175b0..63e51d891 100644
--- a/src/lib/bits/date-field/_types.ts
+++ b/src/lib/bits/date-field/_types.ts
@@ -43,7 +43,7 @@ type Props = Expand<
 		 * This is used to apply the appropriate `aria-describedby` attribute to the input.
 		 */
 		descriptionId?: string;
-	} & AsChild
+	}
 >;
 
 type InputProps = AsChild;
diff --git a/src/lib/bits/date-picker/_types.ts b/src/lib/bits/date-picker/_types.ts
index 5c803e460..de64e13d9 100644
--- a/src/lib/bits/date-picker/_types.ts
+++ b/src/lib/bits/date-picker/_types.ts
@@ -4,13 +4,29 @@
  * but we don't want to document the HTML attributes.
  */
 
-import type { Expand, OnChangeFn, AsChild, OmitDates } from "$lib/internal/index.js";
+import type { Expand, OnChangeFn, AsChild, OmitDates, OmitFloating } from "$lib/internal/index.js";
 import type { SegmentPart } from "$lib/shared";
 import type { DateValue } from "@internationalized/date";
 import type { CreateDatePickerProps } from "@melt-ui/svelte";
 
 type Props = Expand<
-	Omit<OmitDates<CreateDatePickerProps>, "required" | "name"> & {
+	Omit<
+		OmitFloating<OmitDates<CreateDatePickerProps>>,
+		"required" | "name" | "calendarIds" | "dateFieldIds" | "popoverIds"
+	> & {
+		/**
+		 * The open state of the popover.
+		 * You can bind this to a boolean value to programmatically control the open state.
+		 *
+		 * @default false
+		 */
+		open?: boolean;
+
+		/**
+		 * A callback function called when the open state changes.
+		 */
+		onOpenChange?: OnChangeFn<boolean>;
+
 		/**
 		 * The value of the date field.
 		 * You can bind this to a `DateValue` object to programmatically control the value.

From 56c5668d7c9e7ef0e9e531c52a15e2001f9514a8 Mon Sep 17 00:00:00 2001
From: Hunter Johnston <johnstonhuntera@gmail.com>
Date: Fri, 1 Dec 2023 15:57:50 -0500
Subject: [PATCH 192/217] date range field api ref

---
 content/components/calendar.md                |   4 +-
 content/components/date-picker.md             |   4 +-
 content/components/date-range-picker.md       |   4 +-
 content/components/range-calendar.md          |   4 +-
 src/content/api-reference/calendar.ts         |   2 +-
 src/content/api-reference/date-picker.ts      |   2 +-
 src/content/api-reference/date-range-field.ts | 222 ++++++++++++++++++
 src/content/api-reference/index.ts            |   3 +-
 src/content/api-reference/range-calendar.ts   |   2 +-
 src/lib/bits/date-range-field/_types.ts       |   2 +-
 src/lib/bits/date-range-field/ctx.ts          |   2 +-
 11 files changed, 237 insertions(+), 14 deletions(-)
 create mode 100644 src/content/api-reference/date-range-field.ts

diff --git a/content/components/calendar.md b/content/components/calendar.md
index 52f5e9d70..9a7410f55 100644
--- a/content/components/calendar.md
+++ b/content/components/calendar.md
@@ -21,7 +21,7 @@ description: A calendar component.
 	import { Calendar } from "bits-ui";
 </script>
 
-<Calendar.Root let:months let:daysOfWeek>
+<Calendar.Root let:months let:weekdays>
 	<Calendar.Header>
 		<Calendar.PrevButton />
 		<Calendar.Heading />
@@ -32,7 +32,7 @@ description: A calendar component.
 		<Calendar.Grid>
 			<Calendar.GridHead>
 				<Calendar.GridRow>
-					{#each daysOfWeek as day}
+					{#each weekdays as day}
 						<Calendar.HeadCell>
 							{day}
 						</Calendar.HeadCell>
diff --git a/content/components/date-picker.md b/content/components/date-picker.md
index ee806c48b..6af9f9b36 100644
--- a/content/components/date-picker.md
+++ b/content/components/date-picker.md
@@ -32,7 +32,7 @@ description: A date picker component.
 		<DatePicker.Trigger />
 	</DatePicker.Input>
 	<DatePicker.Content>
-		<DatePicker.Calendar let:months let:daysOfWeek>
+		<DatePicker.Calendar let:months let:weekdays>
 			<DatePicker.Header>
 				<DatePicker.PrevButton />
 				<DatePicker.Heading />
@@ -42,7 +42,7 @@ description: A date picker component.
 				<DatePicker.Grid>
 					<DatePicker.GridHead>
 						<DatePicker.GridRow>
-							{#each daysOfWeek as day}
+							{#each weekdays as day}
 								<DatePicker.HeadCell>
 									{day}
 								</DatePicker.HeadCell>
diff --git a/content/components/date-range-picker.md b/content/components/date-range-picker.md
index d732cd323..f20c838bb 100644
--- a/content/components/date-range-picker.md
+++ b/content/components/date-range-picker.md
@@ -32,7 +32,7 @@ description: A date range picker component.
 		<DateRangePicker.Trigger />
 	</DateRangePicker.Input>
 	<DateRangePicker.Content>
-		<DateRangePicker.Calendar let:months let:daysOfWeek>
+		<DateRangePicker.Calendar let:months let:weekdays>
 			<DateRangePicker.Header>
 				<DateRangePicker.PrevButton />
 				<DateRangePicker.Heading />
@@ -42,7 +42,7 @@ description: A date range picker component.
 				<DateRangePicker.Grid>
 					<DateRangePicker.GridHead>
 						<DateRangePicker.GridRow>
-							{#each daysOfWeek as day}
+							{#each weekdays as day}
 								<DateRangePicker.HeadCell>
 									{day}
 								</DateRangePicker.HeadCell>
diff --git a/content/components/range-calendar.md b/content/components/range-calendar.md
index 9e1e15b18..7c6d58adb 100644
--- a/content/components/range-calendar.md
+++ b/content/components/range-calendar.md
@@ -21,7 +21,7 @@ description: A calendar component with range selection.
 	import { RangeCalendar } from "bits-ui";
 </script>
 
-<RangeCalendar.Root let:months let:daysOfWeek>
+<RangeCalendar.Root let:months let:weekdays>
 	<RangeCalendar.Header>
 		<RangeCalendar.PrevButton />
 		<RangeCalendar.Heading />
@@ -31,7 +31,7 @@ description: A calendar component with range selection.
 		<RangeCalendar.Grid>
 			<RangeCalendar.GridHead>
 				<RangeCalendar.GridRow>
-					{#each daysOfWeek as day}
+					{#each weekdays as day}
 						<RangeCalendar.HeadCell>
 							{day}
 						</RangeCalendar.HeadCell>
diff --git a/src/content/api-reference/calendar.ts b/src/content/api-reference/calendar.ts
index 8094d98c5..ba8a5d879 100644
--- a/src/content/api-reference/calendar.ts
+++ b/src/content/api-reference/calendar.ts
@@ -121,7 +121,7 @@ export const root: APISchema<Calendar.Props> = {
 	},
 	slotProps: {
 		months: monthsSlotProp,
-		daysOfWeek: weekdaysSlotProp,
+		weekdays: weekdaysSlotProp,
 		...builderAndAttrsSlotProps
 	},
 	dataAttributes: [
diff --git a/src/content/api-reference/date-picker.ts b/src/content/api-reference/date-picker.ts
index 87640e8fe..f6198ba3b 100644
--- a/src/content/api-reference/date-picker.ts
+++ b/src/content/api-reference/date-picker.ts
@@ -210,7 +210,7 @@ const root: APISchema<DatePicker.Props> = {
 	},
 	slotProps: {
 		months: monthsSlotProp,
-		daysOfWeek: weekdaysSlotProp,
+		weekdays: weekdaysSlotProp,
 		...builderAndAttrsSlotProps
 	},
 	dataAttributes: [
diff --git a/src/content/api-reference/date-range-field.ts b/src/content/api-reference/date-range-field.ts
new file mode 100644
index 000000000..efafab72d
--- /dev/null
+++ b/src/content/api-reference/date-range-field.ts
@@ -0,0 +1,222 @@
+import * as C from "@/content/constants.js";
+import type * as DateRangeField from "$lib/bits/date-range-field/_types.js";
+import type { APISchema } from "@/types";
+import { enums, idsSlotProp, union, asChild } from "@/content/api-reference/helpers.js";
+import { builderAndAttrsSlotProps } from "./helpers";
+
+export const root: APISchema<DateRangeField.Props> = {
+	title: "Root",
+	description: "The root date field component.",
+	props: {
+		value: {
+			type: {
+				type: "DateRange",
+				definition: "{ start: DateValue; end: DateValue; }"
+			},
+			description: "The selected date range."
+		},
+		onValueChange: {
+			type: {
+				type: C.FUNCTION,
+				definition: "(date: DateRange | undefined) => void"
+			},
+			description: "A function that is called when the selected date changes."
+		},
+		placeholder: {
+			type: "DateValue",
+			description:
+				"The placeholder date, which is used to determine what date to start the segments from when no value exists."
+		},
+		onPlaceholderChange: {
+			type: {
+				type: C.FUNCTION,
+				definition: "(date: DateValue) => void"
+			},
+			description: "A function that is called when the placeholder date changes."
+		},
+		isDateUnavailable: {
+			type: {
+				type: C.FUNCTION,
+				definition: "(date: DateValue) => boolean"
+			},
+			description: "A function that returns whether or not a date is unavailable."
+		},
+		hourCycle: {
+			type: {
+				type: C.ENUM,
+				definition: union("12", "24")
+			},
+			description: "The hour cycle to use for formatting times. Defaults to the locale preference"
+		},
+		granularity: {
+			type: {
+				type: C.ENUM,
+				definition: enums("day", "hour", "minute", "second")
+			},
+			description:
+				"The granularity to use for formatting the field. Defaults to `'day'` if a `CalendarDate` is provided, otherwise defaults to `'minute'`. The field will render segments for each part of the date up to and including the specified granularity."
+		},
+		hideTimeZone: {
+			type: C.BOOLEAN,
+			description: "Whether or not to hide the time zone segment of the field.",
+			default: C.FALSE
+		},
+		validationId: {
+			type: C.STRING,
+			description:
+				"The id of your validation message element, if any, which will be applied to the `aria-describedby` attribute of the appropriate elements when a validation error occurs."
+		},
+		descriptionId: {
+			type: C.STRING,
+			description:
+				"The id of your description element, if any, which will be applied to the `aria-describedby` attribute of the appropriate elements."
+		},
+		maxValue: {
+			type: "DateValue",
+			description: "The maximum valid date that can be entered."
+		},
+		minValue: {
+			type: "DateValue",
+			description: "The minimum valid date that can be entered."
+		},
+		locale: {
+			type: C.STRING,
+			description: "The locale to use for formatting dates."
+		},
+		disabled: {
+			default: C.FALSE,
+			type: C.BOOLEAN,
+			description: "Whether or not the accordion is disabled."
+		},
+		readonly: {
+			type: C.BOOLEAN,
+			description: "Whether or not the field is readonly.",
+			default: C.FALSE
+		}
+	},
+	slotProps: {
+		ids: idsSlotProp,
+		isInvalid: {
+			type: C.BOOLEAN,
+			description: "Whether or not the field is invalid."
+		}
+	}
+};
+
+const input: APISchema<DateRangeField.InputProps> = {
+	title: "Input",
+	description: "The container for the segments of the date field.",
+	props: {
+		asChild
+	},
+	slotProps: {
+		...builderAndAttrsSlotProps,
+		segments: {
+			type: {
+				type: C.ARRAY,
+				definition: "{ part: SegmentPart; value: string; }[]"
+			},
+			description: "An array of objects used to render the segments of the date field."
+		}
+	},
+	dataAttributes: [
+		{
+			name: "invalid",
+			description: "Present on the element when the field is invalid."
+		},
+		{
+			name: "disabled",
+			description: "Present on the element when the field is disabled."
+		},
+		{
+			name: "date-field-input",
+			description: "Present on the element."
+		}
+	]
+};
+
+const segment: APISchema<DateRangeField.SegmentProps> = {
+	title: "Segment",
+	description: "A segment of the date field.",
+	props: {
+		asChild,
+		part: {
+			type: {
+				type: "SegmentPart",
+				definition: enums(
+					"month",
+					"day",
+					"year",
+					"hour",
+					"minute",
+					"second",
+					"dayPeriod",
+					"timeZoneName",
+					"literal"
+				)
+			},
+			description: "The part of the date to render."
+		},
+		type: {
+			type: {
+				type: C.ENUM,
+				definition: enums("start", "end")
+			},
+			description: "The type of field to render (start or end)."
+		}
+	},
+	slotProps: {
+		...builderAndAttrsSlotProps
+	},
+	dataAttributes: [
+		{
+			name: "invalid",
+			description: "Present on the element when the field is invalid"
+		},
+		{
+			name: "disabled",
+			description: "Present on the element when the field is disabled"
+		},
+		{
+			name: "segment",
+			value: enums(
+				"month",
+				"day",
+				"year",
+				"hour",
+				"minute",
+				"second",
+				"dayPeriod",
+				"timeZoneName",
+				"literal"
+			),
+			isEnum: true,
+			description: "The type of segment the element represents."
+		},
+		{
+			name: "date-field-segment",
+			description: "Present on the element."
+		}
+	]
+};
+
+const label: APISchema<DateRangeField.LabelProps> = {
+	title: "Label",
+	description: "The label for the date field.",
+	props: { asChild },
+	slotProps: {
+		...builderAndAttrsSlotProps
+	},
+	dataAttributes: [
+		{
+			name: "invalid",
+			description: "Present on the element when the field is invalid"
+		},
+		{
+			name: "date-field-label",
+			description: "Present on the element."
+		}
+	]
+};
+
+export const dateRangeField = [root, input, segment, label];
diff --git a/src/content/api-reference/index.ts b/src/content/api-reference/index.ts
index 5b4da2c8e..939cd390b 100644
--- a/src/content/api-reference/index.ts
+++ b/src/content/api-reference/index.ts
@@ -10,6 +10,7 @@ import { checkbox } from "./checkbox";
 import { collapsible } from "./collapsible";
 import { contextMenu } from "./context-menu";
 import { dateField } from "./date-field";
+import { dateRangeField } from "./date-range-field";
 import { datePicker } from "./date-picker";
 import { dropdownMenu } from "./dropdown-menu";
 import { label } from "./label";
@@ -81,7 +82,7 @@ export const apiSchemas: Record<Bit, APISchema[]> = {
 	"context-menu": contextMenu,
 	"date-field": dateField,
 	"date-picker": datePicker,
-	"date-range-field": [],
+	"date-range-field": dateRangeField,
 	"date-range-picker": [],
 	dialog,
 	"dropdown-menu": dropdownMenu,
diff --git a/src/content/api-reference/range-calendar.ts b/src/content/api-reference/range-calendar.ts
index 055822ed9..8f7c3c589 100644
--- a/src/content/api-reference/range-calendar.ts
+++ b/src/content/api-reference/range-calendar.ts
@@ -120,7 +120,7 @@ const root: APISchema<RangeCalendar.Props> = {
 	},
 	slotProps: {
 		months: monthsSlotProp,
-		daysOfWeek: weekdaysSlotProp,
+		weekdays: weekdaysSlotProp,
 		...builderAndAttrsSlotProps
 	},
 	dataAttributes: [
diff --git a/src/lib/bits/date-range-field/_types.ts b/src/lib/bits/date-range-field/_types.ts
index adefc2b76..c959a4259 100644
--- a/src/lib/bits/date-range-field/_types.ts
+++ b/src/lib/bits/date-range-field/_types.ts
@@ -43,7 +43,7 @@ type Props = Expand<
 		 * This is used to apply the appropriate `aria-describedby` attribute to the input.
 		 */
 		descriptionId?: string;
-	} & AsChild
+	}
 >;
 
 type InputProps = AsChild;
diff --git a/src/lib/bits/date-range-field/ctx.ts b/src/lib/bits/date-range-field/ctx.ts
index 575ed1da9..d722b426e 100644
--- a/src/lib/bits/date-range-field/ctx.ts
+++ b/src/lib/bits/date-range-field/ctx.ts
@@ -6,7 +6,7 @@ import {
 import { getContext, setContext } from "svelte";
 import { removeUndefined, getOptionUpdater, createBitAttrs } from "$lib/internal/index.js";
 
-const NAME = "date-range-field";
+const NAME = "date-field";
 const PARTS = ["label", "field", "input", "segment"] as const;
 
 export const getAttrs = createBitAttrs(NAME, PARTS);

From 35863a0ed4034703e02cf8a8e7c535769d995e70 Mon Sep 17 00:00:00 2001
From: Hunter Johnston <johnstonhuntera@gmail.com>
Date: Fri, 1 Dec 2023 16:18:23 -0500
Subject: [PATCH 193/217] date range picker api ref

---
 src/components/api-section.svelte             |   2 +-
 src/content/api-reference/date-field.ts       |  11 +-
 src/content/api-reference/date-picker.ts      |  50 ++-
 src/content/api-reference/date-range-field.ts |  16 +-
 .../api-reference/date-range-picker.ts        | 313 ++++++++++++++++++
 src/content/api-reference/index.ts            |   3 +-
 src/content/api-reference/range-calendar.ts   |  24 +-
 src/lib/bits/date-range-picker/_types.ts      |  26 +-
 8 files changed, 409 insertions(+), 36 deletions(-)
 create mode 100644 src/content/api-reference/date-range-picker.ts

diff --git a/src/components/api-section.svelte b/src/components/api-section.svelte
index f240924c3..0fdbd8454 100644
--- a/src/components/api-section.svelte
+++ b/src/components/api-section.svelte
@@ -17,7 +17,7 @@
 			>
 				<h3>
 					<span class="text-muted-foreground"
-						>{$page.data.title.replace(" ", "")}.</span
+						>{$page.data.title.replaceAll(" ", "")}.</span
 					>{schema.title}
 				</h3>
 			</div>
diff --git a/src/content/api-reference/date-field.ts b/src/content/api-reference/date-field.ts
index 47fdb7b30..4bbc940a6 100644
--- a/src/content/api-reference/date-field.ts
+++ b/src/content/api-reference/date-field.ts
@@ -132,11 +132,10 @@ const input: APISchema<DateField.InputProps> = {
 	]
 };
 
-const segment: APISchema<DateField.SegmentProps> = {
+export const segment: APISchema<DateField.SegmentProps> = {
 	title: "Segment",
 	description: "A segment of the date field.",
 	props: {
-		asChild,
 		part: {
 			type: {
 				type: "SegmentPart",
@@ -152,8 +151,10 @@ const segment: APISchema<DateField.SegmentProps> = {
 					"literal"
 				)
 			},
-			description: "The part of the date to render."
-		}
+			description: "The part of the date to render.",
+			required: true
+		},
+		asChild
 	},
 	slotProps: {
 		...builderAndAttrsSlotProps
@@ -190,7 +191,7 @@ const segment: APISchema<DateField.SegmentProps> = {
 	]
 };
 
-const label: APISchema<DateField.LabelProps> = {
+export const label: APISchema<DateField.LabelProps> = {
 	title: "Label",
 	description: "The label for the date field.",
 	props: { asChild },
diff --git a/src/content/api-reference/date-picker.ts b/src/content/api-reference/date-picker.ts
index f6198ba3b..c6ab1ac3b 100644
--- a/src/content/api-reference/date-picker.ts
+++ b/src/content/api-reference/date-picker.ts
@@ -24,6 +24,7 @@ import {
 	grid
 } from "./calendar";
 import { content, trigger } from "./popover";
+import { label, segment } from "./date-field";
 
 const root: APISchema<DatePicker.Props> = {
 	title: "Root",
@@ -261,20 +262,53 @@ const calendar: APISchema<DatePicker.CalendarProps> = {
 	]
 };
 
+const input: APISchema<DatePicker.InputProps> = {
+	title: "Input",
+	description: "The field input component which contains the segments of the date field.",
+	props: { asChild },
+	slotProps: {
+		...builderAndAttrsSlotProps,
+		segments: {
+			type: {
+				type: C.ARRAY,
+				definition: "{ part: SegmentPart; value: string; }[]"
+			},
+			description: "An array of objects used to render the segments of the date field."
+		}
+	},
+	dataAttributes: [
+		{
+			name: "invalid",
+			description: "Present on the element when the field is invalid."
+		},
+		{
+			name: "disabled",
+			description: "Present on the element when the field is disabled."
+		},
+		{
+			name: "date-field-input",
+			description: "Present on the element."
+		}
+	]
+};
+
 export const datePicker = [
 	root,
+	label,
+	input,
+	segment,
+	trigger,
+	content,
 	calendar,
 	header,
-	content,
-	trigger,
+	prevButton,
 	heading,
 	nextButton,
-	prevButton,
-	cell,
-	date,
 	grid,
-	gridBody,
-	gridHead,
 	gridRow,
-	headCell
+	gridHead,
+	headCell,
+	gridBody,
+	cell,
+	date
 ];
diff --git a/src/content/api-reference/date-range-field.ts b/src/content/api-reference/date-range-field.ts
index efafab72d..9abc2b53a 100644
--- a/src/content/api-reference/date-range-field.ts
+++ b/src/content/api-reference/date-range-field.ts
@@ -103,7 +103,7 @@ export const root: APISchema<DateRangeField.Props> = {
 	}
 };
 
-const input: APISchema<DateRangeField.InputProps> = {
+export const input: APISchema<DateRangeField.InputProps> = {
 	title: "Input",
 	description: "The container for the segments of the date field.",
 	props: {
@@ -135,11 +135,10 @@ const input: APISchema<DateRangeField.InputProps> = {
 	]
 };
 
-const segment: APISchema<DateRangeField.SegmentProps> = {
+export const segment: APISchema<DateRangeField.SegmentProps> = {
 	title: "Segment",
 	description: "A segment of the date field.",
 	props: {
-		asChild,
 		part: {
 			type: {
 				type: "SegmentPart",
@@ -155,15 +154,18 @@ const segment: APISchema<DateRangeField.SegmentProps> = {
 					"literal"
 				)
 			},
-			description: "The part of the date to render."
+			description: "The part of the date to render.",
+			required: true
 		},
 		type: {
 			type: {
 				type: C.ENUM,
 				definition: enums("start", "end")
 			},
-			description: "The type of field to render (start or end)."
-		}
+			description: "The type of field to render (start or end).",
+			required: true
+		},
+		asChild
 	},
 	slotProps: {
 		...builderAndAttrsSlotProps
@@ -200,7 +202,7 @@ const segment: APISchema<DateRangeField.SegmentProps> = {
 	]
 };
 
-const label: APISchema<DateRangeField.LabelProps> = {
+export const label: APISchema<DateRangeField.LabelProps> = {
 	title: "Label",
 	description: "The label for the date field.",
 	props: { asChild },
diff --git a/src/content/api-reference/date-range-picker.ts b/src/content/api-reference/date-range-picker.ts
new file mode 100644
index 000000000..456668641
--- /dev/null
+++ b/src/content/api-reference/date-range-picker.ts
@@ -0,0 +1,313 @@
+import type { APISchema } from "@/types";
+import * as C from "@/content/constants.js";
+import {
+	asChild,
+	weekdaysSlotProp,
+	enums,
+	monthsSlotProp,
+	union
+} from "@/content/api-reference/helpers.js";
+import type * as DateRangePicker from "$lib/bits/date-range-picker/_types.js";
+import { builderAndAttrsSlotProps, portalProp } from "./helpers";
+import { focusProp } from "./extended-types";
+import {
+	header,
+	cell,
+	gridBody,
+	gridHead,
+	headCell,
+	gridRow,
+	heading,
+	nextButton,
+	prevButton,
+	date,
+	grid
+} from "./range-calendar";
+import { content, trigger } from "./popover";
+import { label, segment } from "./date-range-field";
+
+const root: APISchema<DateRangePicker.Props> = {
+	title: "Root",
+	description: "The root date picker component.",
+	props: {
+		value: {
+			type: {
+				type: "DateRange",
+				definition: "{ start: DateValue; end: DateValue; }"
+			},
+			description: "The selected date range."
+		},
+		onValueChange: {
+			type: {
+				type: C.FUNCTION,
+				definition: "(date: DateRange | undefined) => void"
+			},
+			description: "A function that is called when the selected date changes."
+		},
+		placeholder: {
+			type: "DateValue",
+			description:
+				"The placeholder date, which is used to determine what month to display when no date is selected. This updates as the user navigates the calendar, and can be used to programatically control the calendar's view."
+		},
+		onPlaceholderChange: {
+			type: {
+				type: C.FUNCTION,
+				definition: "(date: DateValue) => void"
+			},
+			description: "A function that is called when the placeholder date changes."
+		},
+		pagedNavigation: {
+			type: C.BOOLEAN,
+			description:
+				"Whether or not to use paged navigation for the calendar. Paged navigation causes the previous and next buttons to navigate by the number of months displayed at once, rather than by one month.",
+			default: C.FALSE
+		},
+		preventDeselect: {
+			type: C.BOOLEAN,
+			description:
+				"Whether or not to prevent the user from deselecting a date without selecting another date first.",
+			default: C.FALSE
+		},
+		weekStartsOn: {
+			type: C.NUMBER,
+			description: "The day of the week to start the calendar on. 0 is Sunday, 1 is Monday, etc.",
+			default: "0"
+		},
+		weekdayFormat: {
+			type: {
+				type: C.ENUM,
+				definition: enums("narrow", "short", "long")
+			},
+			description:
+				"The format to use for the weekday strings provided via the `weekdays` slot prop.",
+			default: "'narrow'"
+		},
+		calendarLabel: {
+			type: C.STRING,
+			description: "The accessible label for the calendar."
+		},
+		fixedWeeks: {
+			type: C.BOOLEAN,
+			description: "Whether or not to always display 6 weeks in the calendar.",
+			default: C.FALSE
+		},
+		isDateDisabled: {
+			type: {
+				type: C.FUNCTION,
+				definition: "(date: DateValue) => boolean"
+			},
+			description: "A function that returns whether or not a date is disabled."
+		},
+		isDateUnavailable: {
+			type: {
+				type: C.FUNCTION,
+				definition: "(date: DateValue) => boolean"
+			},
+			description: "A function that returns whether or not a date is unavailable."
+		},
+		maxValue: {
+			type: "DateValue",
+			description: "The maximum date that can be selected."
+		},
+		minValue: {
+			type: "DateValue",
+			description: "The minimum date that can be selected."
+		},
+		locale: {
+			type: C.STRING,
+			description: "The locale to use for formatting dates."
+		},
+		numberOfMonths: {
+			type: C.NUMBER,
+			description: "The number of months to display at once.",
+			default: "1"
+		},
+		disabled: {
+			default: C.FALSE,
+			type: C.BOOLEAN,
+			description: "Whether or not the accordion is disabled."
+		},
+		readonly: {
+			type: C.BOOLEAN,
+			description: "Whether or not the calendar is readonly.",
+			default: C.FALSE
+		},
+		hourCycle: {
+			type: {
+				type: C.ENUM,
+				definition: union("12", "24")
+			},
+			description: "The hour cycle to use for formatting times. Defaults to the locale preference"
+		},
+		granularity: {
+			type: {
+				type: C.ENUM,
+				definition: enums("day", "hour", "minute", "second")
+			},
+			description:
+				"The granularity to use for formatting the field. Defaults to `'day'` if a `CalendarDate` is provided, otherwise defaults to `'minute'`. The field will render segments for each part of the date up to and including the specified granularity."
+		},
+		hideTimeZone: {
+			type: C.BOOLEAN,
+			description: "Whether or not to hide the time zone segment of the field.",
+			default: C.FALSE
+		},
+		validationId: {
+			type: C.STRING,
+			description:
+				"The id of your validation message element, if any, which will be applied to the `aria-describedby` attribute of the appropriate elements when a validation error occurs."
+		},
+		descriptionId: {
+			type: C.STRING,
+			description:
+				"The id of your description element, if any, which will be applied to the `aria-describedby` attribute of the appropriate elements."
+		},
+		disableFocusTrap: {
+			type: C.BOOLEAN,
+			default: C.FALSE,
+			description:
+				"Whether or not to disable the focus trap that is applied to the popover when it's open."
+		},
+		preventScroll: {
+			type: C.BOOLEAN,
+			default: C.FALSE,
+			description: "Whether or not to prevent scrolling the body while the popover is open."
+		},
+		closeOnOutsideClick: {
+			type: C.BOOLEAN,
+			default: C.TRUE,
+			description: "Whether or not to close the popover when clicking outside of it."
+		},
+		closeOnEscape: {
+			type: C.BOOLEAN,
+			default: C.TRUE,
+			description: "Whether or not to close the popover when pressing the escape key."
+		},
+		open: {
+			type: C.BOOLEAN,
+			default: C.FALSE,
+			description: "The open state of the link popover component."
+		},
+		onOpenChange: {
+			type: {
+				type: C.FUNCTION,
+				definition: "(open: boolean) => void"
+			},
+			description: "A callback that fires when the open state changes."
+		},
+		openFocus: {
+			type: focusProp,
+			description: "Override the focus when the popover is opened."
+		},
+		closeFocus: {
+			type: focusProp,
+			description: "Override the focus when the popover is closed."
+		},
+		portal: { ...portalProp("popover") },
+
+		asChild
+	},
+	slotProps: {
+		months: monthsSlotProp,
+		weekdays: weekdaysSlotProp,
+		...builderAndAttrsSlotProps
+	},
+	dataAttributes: [
+		{
+			name: "invalid",
+			description: "Present on the root element when the calendar is invalid."
+		},
+		{
+			name: "disabled",
+			description: "Present on the root element when the calendar is disabled."
+		},
+		{
+			name: "readonly",
+			description: "Present on the root element when the calendar is readonly."
+		},
+		{
+			name: "calendar-root",
+			description: "Present on the root element."
+		}
+	]
+};
+
+const calendar: APISchema<DateRangePicker.CalendarProps> = {
+	title: "Calendar",
+	description: "The calendar component containing the grids of dates.",
+	slotProps: {
+		months: monthsSlotProp,
+		weekdays: weekdaysSlotProp,
+		...builderAndAttrsSlotProps
+	},
+	dataAttributes: [
+		{
+			name: "invalid",
+			description: "Present on the root element when the calendar is invalid."
+		},
+		{
+			name: "disabled",
+			description: "Present on the root element when the calendar is disabled."
+		},
+		{
+			name: "readonly",
+			description: "Present on the root element when the calendar is readonly."
+		},
+		{
+			name: "calendar-root",
+			description: "Present on the root element."
+		}
+	]
+};
+
+const input: APISchema<DateRangePicker.InputProps> = {
+	title: "Input",
+	description: "The field input component which contains the segments of the date field.",
+	props: { asChild },
+	slotProps: {
+		...builderAndAttrsSlotProps,
+		segments: {
+			type: {
+				type: C.OBJECT,
+				definition: "Record&lt;'start' | 'end', { part: SegmentPart; value: string; }[]&gt;"
+			},
+			description:
+				"An object containing the start and end segment arrays used to render the start and end segments of the date field."
+		}
+	},
+	dataAttributes: [
+		{
+			name: "invalid",
+			description: "Present on the element when the field is invalid."
+		},
+		{
+			name: "disabled",
+			description: "Present on the element when the field is disabled."
+		},
+		{
+			name: "date-field-input",
+			description: "Present on the element."
+		}
+	]
+};
+
+export const dateRangePicker = [
+	root,
+	label,
+	input,
+	segment,
+	trigger,
+	content,
+	calendar,
+	header,
+	prevButton,
+	heading,
+	nextButton,
+	grid,
+	gridRow,
+	gridHead,
+	headCell,
+	gridBody,
+	cell,
+	date
+];
diff --git a/src/content/api-reference/index.ts b/src/content/api-reference/index.ts
index 939cd390b..32b235a73 100644
--- a/src/content/api-reference/index.ts
+++ b/src/content/api-reference/index.ts
@@ -12,6 +12,7 @@ import { contextMenu } from "./context-menu";
 import { dateField } from "./date-field";
 import { dateRangeField } from "./date-range-field";
 import { datePicker } from "./date-picker";
+import { dateRangePicker } from "./date-range-picker";
 import { dropdownMenu } from "./dropdown-menu";
 import { label } from "./label";
 import { linkPreview } from "./link-preview";
@@ -83,7 +84,7 @@ export const apiSchemas: Record<Bit, APISchema[]> = {
 	"date-field": dateField,
 	"date-picker": datePicker,
 	"date-range-field": dateRangeField,
-	"date-range-picker": [],
+	"date-range-picker": dateRangePicker,
 	dialog,
 	"dropdown-menu": dropdownMenu,
 	label,
diff --git a/src/content/api-reference/range-calendar.ts b/src/content/api-reference/range-calendar.ts
index 8f7c3c589..e59d17be7 100644
--- a/src/content/api-reference/range-calendar.ts
+++ b/src/content/api-reference/range-calendar.ts
@@ -10,7 +10,7 @@ import {
 import type * as RangeCalendar from "$lib/bits/range-calendar/_types.js";
 import { builderAndAttrsSlotProps } from "./helpers";
 
-const root: APISchema<RangeCalendar.Props> = {
+export const root: APISchema<RangeCalendar.Props> = {
 	title: "Root",
 	description: "The root range calendar component which contains all other calendar components.",
 	props: {
@@ -143,7 +143,7 @@ const root: APISchema<RangeCalendar.Props> = {
 	]
 };
 
-const cell: APISchema<RangeCalendar.CellProps> = {
+export const cell: APISchema<RangeCalendar.CellProps> = {
 	title: "Cell",
 	description: "A cell in the calendar grid.",
 	props: {
@@ -168,7 +168,7 @@ const cell: APISchema<RangeCalendar.CellProps> = {
 	]
 };
 
-const date: APISchema<RangeCalendar.DateProps> = {
+export const date: APISchema<RangeCalendar.DateProps> = {
 	title: "Date",
 	description: "A date in the calendar grid.",
 	props: {
@@ -250,7 +250,7 @@ const date: APISchema<RangeCalendar.DateProps> = {
 	]
 };
 
-const grid: APISchema<RangeCalendar.GridProps> = {
+export const grid: APISchema<RangeCalendar.GridProps> = {
 	title: "Grid",
 	description: "The grid of dates in the calendar, typically representing a month.",
 	props: { asChild },
@@ -263,7 +263,7 @@ const grid: APISchema<RangeCalendar.GridProps> = {
 	]
 };
 
-const gridBody: APISchema<RangeCalendar.GridBodyProps> = {
+export const gridBody: APISchema<RangeCalendar.GridBodyProps> = {
 	title: "GridBody",
 	description: "The body of the grid of dates in the calendar.",
 	props: { asChild },
@@ -276,7 +276,7 @@ const gridBody: APISchema<RangeCalendar.GridBodyProps> = {
 	]
 };
 
-const gridHead: APISchema<RangeCalendar.GridHeadProps> = {
+export const gridHead: APISchema<RangeCalendar.GridHeadProps> = {
 	title: "GridHead",
 	description: "The head of the grid of dates in the calendar.",
 	props: { asChild },
@@ -289,7 +289,7 @@ const gridHead: APISchema<RangeCalendar.GridHeadProps> = {
 	]
 };
 
-const gridRow: APISchema<RangeCalendar.GridRowProps> = {
+export const gridRow: APISchema<RangeCalendar.GridRowProps> = {
 	title: "GridRow",
 	description: "A row in the grid of dates in the calendar.",
 	props: { asChild },
@@ -302,7 +302,7 @@ const gridRow: APISchema<RangeCalendar.GridRowProps> = {
 	]
 };
 
-const headCell: APISchema<RangeCalendar.HeadCellProps> = {
+export const headCell: APISchema<RangeCalendar.HeadCellProps> = {
 	title: "HeadCell",
 	description: "A cell in the head of the grid of dates in the calendar.",
 	props: { asChild },
@@ -315,7 +315,7 @@ const headCell: APISchema<RangeCalendar.HeadCellProps> = {
 	]
 };
 
-const header: APISchema<RangeCalendar.HeaderProps> = {
+export const header: APISchema<RangeCalendar.HeaderProps> = {
 	title: "Header",
 	description: "The header of the calendar.",
 	props: { asChild },
@@ -328,7 +328,7 @@ const header: APISchema<RangeCalendar.HeaderProps> = {
 	]
 };
 
-const heading: APISchema<RangeCalendar.HeadingProps> = {
+export const heading: APISchema<RangeCalendar.HeadingProps> = {
 	title: "Heading",
 	description: "The heading of the calendar.",
 	props: { asChild },
@@ -347,7 +347,7 @@ const heading: APISchema<RangeCalendar.HeadingProps> = {
 	]
 };
 
-const nextButton: APISchema<RangeCalendar.NextButtonProps> = {
+export const nextButton: APISchema<RangeCalendar.NextButtonProps> = {
 	title: "NextButton",
 	description: "The next button of the calendar.",
 	props: { asChild },
@@ -360,7 +360,7 @@ const nextButton: APISchema<RangeCalendar.NextButtonProps> = {
 	]
 };
 
-const prevButton: APISchema<RangeCalendar.PrevButtonProps> = {
+export const prevButton: APISchema<RangeCalendar.PrevButtonProps> = {
 	title: "PrevButton",
 	description: "The previous button of the calendar.",
 	props: { asChild },
diff --git a/src/lib/bits/date-range-picker/_types.ts b/src/lib/bits/date-range-picker/_types.ts
index c020164fa..884ffa58a 100644
--- a/src/lib/bits/date-range-picker/_types.ts
+++ b/src/lib/bits/date-range-picker/_types.ts
@@ -4,13 +4,35 @@
  * but we don't want to document the HTML attributes.
  */
 
-import type { Expand, OnChangeFn, AsChild, OmitDates } from "$lib/internal/index.js";
+import type { Expand, OnChangeFn, AsChild, OmitDates, OmitFloating } from "$lib/internal/index.js";
 import type { DateRange, SegmentPart } from "$lib/shared";
 import type { DateValue } from "@internationalized/date";
 import type { CreateDateRangePickerProps } from "@melt-ui/svelte";
 
+type OmitStartEnd<T> = Omit<
+	T,
+	"startName" | "endName" | "startIds" | "endIds" | "dateFieldIds" | "popoverIds" | "calendarIds"
+>;
+
+type OmitForm<T> = Omit<T, "required" | "name">;
+
+type WithOmission<T> = OmitForm<OmitDates<OmitStartEnd<OmitFloating<T>>>>;
+
 type Props = Expand<
-	Omit<OmitDates<CreateDateRangePickerProps>, "required" | "name"> & {
+	WithOmission<CreateDateRangePickerProps> & {
+		/**
+		 * The open state of the popover.
+		 * You can bind this to a boolean value to programmatically control the open state.
+		 *
+		 * @default false
+		 */
+		open?: boolean;
+
+		/**
+		 * A callback function called when the open state changes.
+		 */
+		onOpenChange?: OnChangeFn<boolean>;
+
 		/**
 		 * The value of the date field.
 		 * You can bind this to a `DateValue` object to programmatically control the value.

From 8349969c54b405a51c851a1f0f986f8e1271f334 Mon Sep 17 00:00:00 2001
From: Hunter Johnston <johnstonhuntera@gmail.com>
Date: Fri, 1 Dec 2023 16:19:16 -0500
Subject: [PATCH 194/217] cleanup

---
 src/content/api-reference/range-calendar.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/content/api-reference/range-calendar.ts b/src/content/api-reference/range-calendar.ts
index e59d17be7..4c4f41922 100644
--- a/src/content/api-reference/range-calendar.ts
+++ b/src/content/api-reference/range-calendar.ts
@@ -212,7 +212,7 @@ export const date: APISchema<RangeCalendar.DateProps> = {
 		},
 		{
 			name: "value",
-			value: 'The date in the format "YYYY-MM-DD".'
+			description: 'The date in the format "YYYY-MM-DD".'
 		},
 		{
 			name: "today",

From 5af6b8e5ece4651c639c7ca38b0e71bd257b3820 Mon Sep 17 00:00:00 2001
From: Hunter Johnston <johnstonhuntera@gmail.com>
Date: Fri, 1 Dec 2023 16:50:51 -0500
Subject: [PATCH 195/217] api section formatting

---
 src/components/api-section.svelte | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/components/api-section.svelte b/src/components/api-section.svelte
index 0fdbd8454..dbaaf34f7 100644
--- a/src/components/api-section.svelte
+++ b/src/components/api-section.svelte
@@ -3,6 +3,7 @@
 	import { DataAttrsTable, PropsTable } from "@/components";
 	import { h2 as H2, p as P } from "@/components/markdown";
 	import type { APISchema } from "@/types";
+	import { parseMarkdown } from "@/utils";
 
 	export let schemas: APISchema[] = [];
 </script>
@@ -21,7 +22,7 @@
 					>{schema.title}
 				</h3>
 			</div>
-			<P class="!mb-5 !mt-2">{schema.description}</P>
+			<P class="!mb-5 !mt-2">{@html parseMarkdown(schema.description)}</P>
 			<div class="flex flex-col gap-4">
 				{#if schema.props}
 					<PropsTable props={schema.props} />

From 63ce0f8f6550e8444c73cc683dd1b05b4eecee31 Mon Sep 17 00:00:00 2001
From: Hunter Johnston <johnstonhuntera@gmail.com>
Date: Fri, 1 Dec 2023 19:33:19 -0500
Subject: [PATCH 196/217] multiple calendar types

---
 src/lib/bits/calendar/_types.ts               | 52 ++++++++++++++-----
 .../bits/calendar/components/calendar.svelte  |  7 ++-
 src/lib/bits/calendar/ctx.ts                  |  2 +-
 src/lib/bits/calendar/types.ts                |  3 +-
 4 files changed, 47 insertions(+), 17 deletions(-)

diff --git a/src/lib/bits/calendar/_types.ts b/src/lib/bits/calendar/_types.ts
index f889d1c3c..3af0c0009 100644
--- a/src/lib/bits/calendar/_types.ts
+++ b/src/lib/bits/calendar/_types.ts
@@ -8,21 +8,47 @@ import type { AsChild, OnChangeFn } from "$lib/internal";
 import type { DateValue } from "@internationalized/date";
 import type { CreateCalendarProps } from "@melt-ui/svelte";
 
-type Props = Expand<
-	Omit<
-		CreateCalendarProps,
-		| "placeholder"
-		| "defaultPlaceholder"
-		| "value"
-		| "defaultValue"
-		| "onPlaceholderChange"
-		| "onValueChange"
-		| "ids"
-	> & {
+type OmitCalendarProps<T> = Omit<
+	T,
+	| "placeholder"
+	| "defaultPlaceholder"
+	| "value"
+	| "defaultValue"
+	| "onPlaceholderChange"
+	| "onValueChange"
+	| "ids"
+>;
+
+type Props<Multiple extends boolean> = Expand<
+	OmitCalendarProps<CreateCalendarProps<Multiple>> & {
+		/**
+		 * The selected date value. This updates as the user selects
+		 * date(s) in the calendar.
+		 *
+		 * You can bind this to a value to programmatically control the
+		 * value state.
+		 */
+		value?: CreateCalendarProps<Multiple>["defaultValue"];
+
+		/**
+		 * A callback function called when the value changes.
+		 */
+		onValueChange?: OnChangeFn<CreateCalendarProps<Multiple>["defaultValue"]>;
+
+		/**
+		 * The placeholder date, used to display the calendar when no
+		 * date is selected. This updates as the user navigates
+		 * the calendar.
+		 *
+		 * You can bind this to a value to programmatically control the
+		 * placeholder state.
+		 */
 		placeholder?: DateValue;
-		value?: DateValue;
+
+		/**
+		 * A callback function called when the placeholder changes.
+		 */
 		onPlaceholderChange?: OnChangeFn<DateValue>;
-		onValueChange?: OnChangeFn<DateValue | undefined>;
 	} & AsChild
 >;
 
diff --git a/src/lib/bits/calendar/components/calendar.svelte b/src/lib/bits/calendar/components/calendar.svelte
index 121383571..32bb938aa 100644
--- a/src/lib/bits/calendar/components/calendar.svelte
+++ b/src/lib/bits/calendar/components/calendar.svelte
@@ -3,7 +3,8 @@
 	import { setCtx, getAttrs } from "../ctx.js";
 	import type { Props } from "../types.js";
 
-	type $$Props = Props;
+	type Multiple = $$Generic<boolean>;
+	type $$Props = Props<Multiple>;
 
 	export let placeholder: $$Props["placeholder"] = undefined;
 	export let onPlaceholderChange: $$Props["onPlaceholderChange"] = undefined;
@@ -22,6 +23,7 @@
 	export let fixedWeeks: $$Props["fixedWeeks"] = undefined;
 	export let calendarLabel: $$Props["calendarLabel"] = undefined;
 	export let weekdayFormat: $$Props["weekdayFormat"] = undefined;
+	export let multiple: $$Props["multiple"] = false as Multiple;
 	export let asChild: $$Props["asChild"] = false;
 	export let id: $$Props["id"] = undefined;
 
@@ -51,6 +53,7 @@
 		fixedWeeks,
 		calendarLabel,
 		weekdayFormat,
+		multiple,
 		onPlaceholderChange: ({ next }) => {
 			if (placeholder !== next) {
 				onPlaceholderChange?.(next);
@@ -58,7 +61,7 @@
 			}
 			return next;
 		},
-		onValueChange: ({ next }) => {
+		onValueChange: ({ next }: { next: $$Props["value"] }) => {
 			if (value !== next) {
 				onValueChange?.(next);
 				value = next;
diff --git a/src/lib/bits/calendar/ctx.ts b/src/lib/bits/calendar/ctx.ts
index a649a2069..af5ed595e 100644
--- a/src/lib/bits/calendar/ctx.ts
+++ b/src/lib/bits/calendar/ctx.ts
@@ -26,7 +26,7 @@ export const getAttrs = createBitAttrs(NAME, PARTS);
 
 type GetReturn = CalendarReturn;
 
-export function setCtx(props: CreateCalendarProps) {
+export function setCtx<Multiple extends boolean>(props: CreateCalendarProps<Multiple>) {
 	const calendar = createCalendar(removeUndefined(props));
 	setContext(NAME, calendar);
 	return {
diff --git a/src/lib/bits/calendar/types.ts b/src/lib/bits/calendar/types.ts
index 3de587207..5a810ad5d 100644
--- a/src/lib/bits/calendar/types.ts
+++ b/src/lib/bits/calendar/types.ts
@@ -8,7 +8,8 @@ import type {
 } from "svelte/elements";
 import type * as I from "./_types.js";
 
-type Props = I.Props & Omit<HTMLDivAttributes, "placeholder">;
+type Props<Multiple extends boolean = false> = I.Props<Multiple> &
+	Omit<HTMLDivAttributes, "placeholder">;
 
 type PrevButtonProps = I.PrevButtonProps & HTMLButtonAttributes;
 

From 2a431e5750712e57ee9272162e553d3f16d91d2e Mon Sep 17 00:00:00 2001
From: Hunter Johnston <johnstonhuntera@gmail.com>
Date: Fri, 1 Dec 2023 20:00:05 -0500
Subject: [PATCH 197/217] descriptions

---
 content/components/accordion.md         | 2 +-
 content/components/alert-dialog.md      | 2 +-
 content/components/aspect-ratio.md      | 2 +-
 content/components/avatar.md            | 2 +-
 content/components/calendar.md          | 2 +-
 content/components/checkbox.md          | 2 +-
 content/components/collapsible.md       | 2 +-
 content/components/context-menu.md      | 2 +-
 content/components/date-field.md        | 2 +-
 content/components/date-picker.md       | 2 +-
 content/components/date-range-field.md  | 2 +-
 content/components/date-range-picker.md | 2 +-
 content/components/dialog.md            | 2 +-
 content/components/dropdown-menu.md     | 2 +-
 content/components/label.md             | 2 +-
 content/components/link-preview.md      | 2 +-
 content/components/menubar.md           | 2 +-
 content/components/popover.md           | 2 +-
 content/components/progress.md          | 2 +-
 content/components/radio-group.md       | 2 +-
 content/components/range-calendar.md    | 2 +-
 content/components/select.md            | 2 +-
 content/components/separator.md         | 2 +-
 content/components/slider.md            | 2 +-
 content/components/switch.md            | 2 +-
 content/components/tabs.md              | 2 +-
 content/components/toggle-group.md      | 2 +-
 content/components/toggle.md            | 2 +-
 content/components/tooltip.md           | 2 +-
 content/introduction.md                 | 5 +++--
 30 files changed, 32 insertions(+), 31 deletions(-)

diff --git a/content/components/accordion.md b/content/components/accordion.md
index a2f94b846..adb3253aa 100644
--- a/content/components/accordion.md
+++ b/content/components/accordion.md
@@ -1,6 +1,6 @@
 ---
 title: Accordion
-description: Organizes content into collapsible sections.
+description: Organizes content into collapsible sections, allowing users to focus on one section at a time.
 ---
 
 <script>
diff --git a/content/components/alert-dialog.md b/content/components/alert-dialog.md
index 697c84ea2..97b9a090f 100644
--- a/content/components/alert-dialog.md
+++ b/content/components/alert-dialog.md
@@ -1,6 +1,6 @@
 ---
 title: Alert Dialog
-description: Presents critical information or prompts to the user, typically requiring their attention or action.
+description: A modal window that alerts users with important information and awaits their acknowledgment or action.
 ---
 
 <script>
diff --git a/content/components/aspect-ratio.md b/content/components/aspect-ratio.md
index 530f04b5e..1cf15df53 100644
--- a/content/components/aspect-ratio.md
+++ b/content/components/aspect-ratio.md
@@ -1,6 +1,6 @@
 ---
 title: Aspect Ratio
-description: Displays content with a specified aspect ratio, ensuring consistent and visually balanced presentation.
+description: Displays content while maintaining a specified aspect ratio, ensuring consistent visual proportions.
 ---
 
 <script>
diff --git a/content/components/avatar.md b/content/components/avatar.md
index f663f085a..e610e64a9 100644
--- a/content/components/avatar.md
+++ b/content/components/avatar.md
@@ -1,6 +1,6 @@
 ---
 title: Avatar
-description: Displays images with a fallback option for failed loading, ensuring consistent visual representation.
+description: Represents a user or entity with a recognizable image or placeholder in UI elements.
 ---
 
 <script>
diff --git a/content/components/calendar.md b/content/components/calendar.md
index 9a7410f55..7747879f2 100644
--- a/content/components/calendar.md
+++ b/content/components/calendar.md
@@ -1,6 +1,6 @@
 ---
 title: Calendar
-description: A calendar component.
+description: Displays dates and days of the week, facilitating date-related interactions.
 ---
 
 <script>
diff --git a/content/components/checkbox.md b/content/components/checkbox.md
index 1f8d6cde4..7b8104561 100644
--- a/content/components/checkbox.md
+++ b/content/components/checkbox.md
@@ -1,6 +1,6 @@
 ---
 title: Checkbox
-description: Allow users to mark options as checked, unchecked, or indeterminate, accommodating versatile states.
+description: Allow users to switch between checked, unchecked, and indeterminate states.
 ---
 
 <script>
diff --git a/content/components/collapsible.md b/content/components/collapsible.md
index 063cfe46d..e8a8b2bb4 100644
--- a/content/components/collapsible.md
+++ b/content/components/collapsible.md
@@ -1,6 +1,6 @@
 ---
 title: Collapsible
-description: An interactive component which expands and collapses content.
+description: Conceals or reveals content sections, enhancing space utilization and organization.
 ---
 
 <script>
diff --git a/content/components/context-menu.md b/content/components/context-menu.md
index 3d0954d85..475bc4b2f 100644
--- a/content/components/context-menu.md
+++ b/content/components/context-menu.md
@@ -1,6 +1,6 @@
 ---
 title: Context Menu
-description: Displays a menu at the pointer's position when the trigger is right-clicked or long-pressed.
+description: Displays options or actions relevant to a specific context or selected item, triggered by a right-click.
 ---
 
 <script>
diff --git a/content/components/date-field.md b/content/components/date-field.md
index f843ac392..4053b4f6a 100644
--- a/content/components/date-field.md
+++ b/content/components/date-field.md
@@ -1,6 +1,6 @@
 ---
 title: Date Field
-description: A date field component.
+description: Enables users to input specific dates within a designated field.
 ---
 
 <script>
diff --git a/content/components/date-picker.md b/content/components/date-picker.md
index 6af9f9b36..d517e2bfe 100644
--- a/content/components/date-picker.md
+++ b/content/components/date-picker.md
@@ -1,6 +1,6 @@
 ---
 title: Date Picker
-description: A date picker component.
+description: Facilitates the selection of dates through an input and calendar-based interface.
 ---
 
 <script>
diff --git a/content/components/date-range-field.md b/content/components/date-range-field.md
index 246f7400a..3c25f8970 100644
--- a/content/components/date-range-field.md
+++ b/content/components/date-range-field.md
@@ -1,6 +1,6 @@
 ---
 title: Date Range Field
-description: A date range field component.
+description: Allows users to input a range of dates within a designated field.
 ---
 
 <script>
diff --git a/content/components/date-range-picker.md b/content/components/date-range-picker.md
index f20c838bb..302372649 100644
--- a/content/components/date-range-picker.md
+++ b/content/components/date-range-picker.md
@@ -1,6 +1,6 @@
 ---
 title: Date Range Picker
-description: A date range picker component.
+description: Facilitates the selection of date ranges through an input and calendar-based interface.
 ---
 
 <script>
diff --git a/content/components/dialog.md b/content/components/dialog.md
index 927ad0329..28c01a992 100644
--- a/content/components/dialog.md
+++ b/content/components/dialog.md
@@ -1,6 +1,6 @@
 ---
 title: Dialog
-description: A window overlaid on either the primary window or another dialog window, rendering the content underneath inert.
+description: A modal window presenting content or seeking user input without navigating away from the current context.
 ---
 
 <script>
diff --git a/content/components/dropdown-menu.md b/content/components/dropdown-menu.md
index a45e378f3..417d0031c 100644
--- a/content/components/dropdown-menu.md
+++ b/content/components/dropdown-menu.md
@@ -1,6 +1,6 @@
 ---
 title: Dropdown Menu
-description: Displays a menu to the user, which can consist of links or functions, triggered by a button.
+description: Displays a menu of items that users can select from when triggered.
 ---
 
 <script>
diff --git a/content/components/label.md b/content/components/label.md
index f8e83cb06..16d663c4e 100644
--- a/content/components/label.md
+++ b/content/components/label.md
@@ -1,6 +1,6 @@
 ---
 title: Label
-description: An enhanced version of the native HTML label element.
+description: Identifies or describes associated UI elements.
 ---
 
 <script>
diff --git a/content/components/link-preview.md b/content/components/link-preview.md
index a67a66a48..52b931e50 100644
--- a/content/components/link-preview.md
+++ b/content/components/link-preview.md
@@ -1,6 +1,6 @@
 ---
 title: Link Preview
-description: Enable sighted users to preview content behind a link.
+description: Displays a summarized preview of a linked content's details or information.
 ---
 
 <script>
diff --git a/content/components/menubar.md b/content/components/menubar.md
index 48fca0a2b..fc20c04ae 100644
--- a/content/components/menubar.md
+++ b/content/components/menubar.md
@@ -1,6 +1,6 @@
 ---
 title: Menubar
-description: Displays a list of menus that can be used to control the application.
+description: Organizes and presents a collection of menu options or actions within a horizontal bar.
 ---
 
 <script>
diff --git a/content/components/popover.md b/content/components/popover.md
index 952f8a894..af9cc8a8c 100644
--- a/content/components/popover.md
+++ b/content/components/popover.md
@@ -1,6 +1,6 @@
 ---
 title: Popover
-description: Displays content in a floating container that appears above the surrounding content.
+description: Display supplementary content or information when users interact with specific elements.
 ---
 
 <script>
diff --git a/content/components/progress.md b/content/components/progress.md
index 2cb24fd4e..ba0b018ab 100644
--- a/content/components/progress.md
+++ b/content/components/progress.md
@@ -1,6 +1,6 @@
 ---
 title: Progress
-description: A visual indicator that displays the progress of a task, usually in the form of a progress bar.
+description: Visualizes the progress or completion status of a task or process.
 ---
 
 <script>
diff --git a/content/components/radio-group.md b/content/components/radio-group.md
index ac14e0721..a17d9de5b 100644
--- a/content/components/radio-group.md
+++ b/content/components/radio-group.md
@@ -1,6 +1,6 @@
 ---
 title: Radio Group
-description: Allows users to select a single option from a predetermined set of choices.
+description: Allows users to select a single option from a list of mutually exclusive choices.
 ---
 
 <script>
diff --git a/content/components/range-calendar.md b/content/components/range-calendar.md
index 7c6d58adb..f52113c9f 100644
--- a/content/components/range-calendar.md
+++ b/content/components/range-calendar.md
@@ -1,6 +1,6 @@
 ---
 title: Range Calendar
-description: A calendar component with range selection.
+description: Presents a calendar view tailored for selecting date ranges.
 ---
 
 <script>
diff --git a/content/components/select.md b/content/components/select.md
index 5f5fb32e1..c24203ea3 100644
--- a/content/components/select.md
+++ b/content/components/select.md
@@ -1,6 +1,6 @@
 ---
 title: Select
-description: Enable users to choose a single option from a dropdown menu that presents a list of selectable items.
+description: Enables users to choose from a list of options presented in a dropdown.
 ---
 
 <script>
diff --git a/content/components/separator.md b/content/components/separator.md
index 4527db94b..e21cca24e 100644
--- a/content/components/separator.md
+++ b/content/components/separator.md
@@ -1,6 +1,6 @@
 ---
 title: Separator
-description: Visually divide or separate sections or elements, providing clarity and organization.
+description: Visually separates content or UI elements for clarity and organization.
 ---
 
 <script>
diff --git a/content/components/slider.md b/content/components/slider.md
index 2e499e938..e5b9174b4 100644
--- a/content/components/slider.md
+++ b/content/components/slider.md
@@ -1,6 +1,6 @@
 ---
 title: Slider
-description: Enable users to select a value within a specific range with sliding handles.
+description: Allows users to select a value from a continuous range by sliding a handle.
 ---
 
 <script>
diff --git a/content/components/switch.md b/content/components/switch.md
index e0000c344..75e339468 100644
--- a/content/components/switch.md
+++ b/content/components/switch.md
@@ -1,6 +1,6 @@
 ---
 title: Switch
-description: Enables users to toggle between two states.
+description: A toggle control enabling users to switch between "on" and "off" states.
 ---
 
 <script>
diff --git a/content/components/tabs.md b/content/components/tabs.md
index 595ab5e52..9d47b891c 100644
--- a/content/components/tabs.md
+++ b/content/components/tabs.md
@@ -1,6 +1,6 @@
 ---
 title: Tabs
-description: Allows users to navigate between different views
+description: Organizes content into distinct sections, allowing users to switch between them.
 ---
 
 <script>
diff --git a/content/components/toggle-group.md b/content/components/toggle-group.md
index 0bb3e7e8b..36a3490bc 100644
--- a/content/components/toggle-group.md
+++ b/content/components/toggle-group.md
@@ -1,6 +1,6 @@
 ---
 title: Toggle Group
-description: An interactive component that toggles between two states.
+description: A control element that switches between two states, providing a binary choice.
 ---
 
 <script>
diff --git a/content/components/toggle.md b/content/components/toggle.md
index ad03da443..6afb01e66 100644
--- a/content/components/toggle.md
+++ b/content/components/toggle.md
@@ -1,6 +1,6 @@
 ---
 title: Toggle
-description: An interactive component that toggles between two states.
+description: Groups multiple toggle controls, allowing users to enable one or multiple options.
 ---
 
 <script>
diff --git a/content/components/tooltip.md b/content/components/tooltip.md
index 236727072..f613a0765 100644
--- a/content/components/tooltip.md
+++ b/content/components/tooltip.md
@@ -1,6 +1,6 @@
 ---
 title: Tooltip
-description: Displays floating content containing additional information about an action on hover or focus.
+description: Provides additional information or context when users hover over or interact with an element.
 ---
 
 <script>
diff --git a/content/introduction.md b/content/introduction.md
index 1559e7a5b..c7f2f297a 100644
--- a/content/introduction.md
+++ b/content/introduction.md
@@ -9,8 +9,9 @@ Under the hood, most of these components are powered by [Melt UI](https://melt-u
 
 ## Credits
 
+- [Bitworks](https://bitworks.cz) - The design team behind the Bits UI documentation and example components.
 - [Melt UI](https://melt-ui.com) - The underlying builder API that powers Bits.
-- [Radix UI](https://radix-ui.com) - The de-facto standard for headless APIs that we've strived to follow.
-- [React Spectrum](https://react-spectrum.adobe.com) - Another incredible collection of headless components we've taken inspiration from.
+- [Radix UI](https://radix-ui.com) - The incredible headless component APIs that we've taken heavy inspiration from.
+- [React Spectrum](https://react-spectrum.adobe.com) - An incredible collection of headless components we've taken inspiration from.
 
 🚧 **UNDER CONSTRUCTION** 🚧

From 82abe49136e406255a29a92384189bc88e33c7f1 Mon Sep 17 00:00:00 2001
From: Hunter Johnston <johnstonhuntera@gmail.com>
Date: Fri, 1 Dec 2023 23:00:28 -0500
Subject: [PATCH 198/217] wip select multiple

---
 src/components/demos/select-demo.svelte      |  4 +--
 src/lib/bits/select/_types.ts                | 11 +++++---
 src/lib/bits/select/components/select.svelte | 28 +++++++++++++++++---
 src/lib/bits/select/ctx.ts                   | 16 +++++++++--
 src/lib/bits/select/types.ts                 |  2 +-
 src/lib/shared/index.ts                      |  5 ++++
 6 files changed, 54 insertions(+), 12 deletions(-)

diff --git a/src/components/demos/select-demo.svelte b/src/components/demos/select-demo.svelte
index f0f2b3839..88c35c9a3 100644
--- a/src/components/demos/select-demo.svelte
+++ b/src/components/demos/select-demo.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { Select } from "$lib";
+	import { Select, type Selected } from "$lib";
 	import { flyAndScale } from "@/utils";
 	import { Check, Palette, CaretUpDown } from "phosphor-svelte";
 
@@ -11,7 +11,7 @@
 	];
 </script>
 
-<Select.Root>
+<Select.Root multiple onSelectedChange={() => console.log("selectedChange")}>
 	<Select.Trigger
 		class="inline-flex h-input w-[296px] items-center rounded-9px border border-border-input bg-background px-[11px] text-sm transition-colors placeholder:text-foreground-alt/50  focus:outline-none focus:ring-2 focus:ring-foreground focus:ring-offset-2 focus:ring-offset-background "
 		aria-label="Select a theme"
diff --git a/src/lib/bits/select/_types.ts b/src/lib/bits/select/_types.ts
index 685b41fb9..0759d36e1 100644
--- a/src/lib/bits/select/_types.ts
+++ b/src/lib/bits/select/_types.ts
@@ -7,7 +7,7 @@ import type { CreateSelectProps, SelectOptionProps } from "@melt-ui/svelte";
 import type { AsChild, Expand, OmitFloating, OnChangeFn } from "$lib/internal/index.js";
 import type { ContentProps, ArrowProps } from "$lib/bits/floating/_types.js";
 
-type Props<T = unknown> = Expand<
+type Props<T, Multiple extends boolean> = Expand<
 	OmitFloating<Omit<CreateSelectProps, "selected" | "defaultSelected" | "onSelectedChange">> & {
 		/**
 		 * The selected value of the select.
@@ -15,12 +15,12 @@ type Props<T = unknown> = Expand<
 		 *
 		 * @defaultValue undefined
 		 */
-		selected?: CreateSelectProps["defaultSelected"] & {};
+		selected?: CreateSelectProps<T, Multiple>["defaultSelected"] & {};
 
 		/**
 		 * A callback function called when the selected value changes.
 		 */
-		onSelectedChange?: OnChangeFn<T>;
+		onSelectedChange?: OnChangeFn<CreateSelectProps<T, Multiple>["defaultSelected"]>;
 
 		/**
 		 * The open state of the select menu.
@@ -34,6 +34,11 @@ type Props<T = unknown> = Expand<
 		 * A callback function called when the open state changes.
 		 */
 		onOpenChange?: OnChangeFn<boolean>;
+
+		/**
+		 *
+		 */
+		multiple?: Multiple;
 	}
 >;
 
diff --git a/src/lib/bits/select/components/select.svelte b/src/lib/bits/select/components/select.svelte
index fe5e855f5..b7c938fd5 100644
--- a/src/lib/bits/select/components/select.svelte
+++ b/src/lib/bits/select/components/select.svelte
@@ -3,7 +3,18 @@
 	import { setCtx } from "../ctx.js";
 	import type { SelectProps } from "../types.js";
 
-	type $$Props = SelectProps;
+	type T = $$Generic<unknown>;
+	type Multiple = $$Generic<boolean>;
+
+	type $$Props = Omit<SelectProps<T, Multiple>, "multiple"> & {
+		items?: Items<T>;
+		multiple?: Multiple;
+	};
+
+	type Items<T> = {
+		value: T;
+		label?: string;
+	}[];
 
 	export let required: $$Props["required"] = undefined;
 	export let disabled: $$Props["disabled"] = undefined;
@@ -13,11 +24,13 @@
 	export let closeOnOutsideClick: $$Props["closeOnOutsideClick"] = undefined;
 	export let portal: $$Props["portal"] = undefined;
 	export let name: $$Props["name"] = undefined;
-	export let multiple: $$Props["multiple"] = undefined;
+	export let multiple: $$Props["multiple"] = false as Multiple;
 	export let selected: $$Props["selected"] = undefined;
 	export let onSelectedChange: $$Props["onSelectedChange"] = undefined;
 	export let open: $$Props["open"] = undefined;
 	export let onOpenChange: $$Props["onOpenChange"] = undefined;
+	// eslint-disable-next-line svelte/valid-compile
+	export let items: $$Props["items"] = [];
 
 	const {
 		states: { open: localOpen, selected: localSelected },
@@ -32,11 +45,17 @@
 		closeOnOutsideClick,
 		portal,
 		name,
-		multiple,
+		multiple: multiple as Multiple,
 		forceVisible: true,
 		defaultSelected: selected,
 		defaultOpen: open,
 		onSelectedChange: ({ next }) => {
+			if (Array.isArray(next)) {
+				onSelectedChange?.(next);
+				selected = next;
+				return next;
+			}
+
 			if (selected !== next) {
 				onSelectedChange?.(next);
 				selected = next;
@@ -49,7 +68,8 @@
 				open = next;
 			}
 			return next;
-		}
+		},
+		items
 	});
 
 	const idValues = derived(
diff --git a/src/lib/bits/select/ctx.ts b/src/lib/bits/select/ctx.ts
index fda735044..944ff7041 100644
--- a/src/lib/bits/select/ctx.ts
+++ b/src/lib/bits/select/ctx.ts
@@ -34,8 +34,20 @@ export function getCtx() {
 	return getContext<GetReturn>(NAME);
 }
 
-export function setCtx(props: CreateSelectProps) {
-	const select = createSelect(removeUndefined(props));
+type Items<T> = {
+	value: T;
+	label?: string;
+};
+
+type Props<T = unknown, M extends boolean = false> = CreateSelectProps<T, M> & {
+	items?: Items<T>[];
+};
+
+export function setCtx<T = unknown, M extends boolean = false>(
+	// eslint-disable-next-line @typescript-eslint/no-explicit-any
+	props: Props<T, M>
+) {
+	const select = createSelect<T, M>(removeUndefined(props));
 	setContext(NAME, select);
 	return {
 		...select,
diff --git a/src/lib/bits/select/types.ts b/src/lib/bits/select/types.ts
index 16cfdc333..494bf678a 100644
--- a/src/lib/bits/select/types.ts
+++ b/src/lib/bits/select/types.ts
@@ -8,7 +8,7 @@ import type {
 import type { CustomEventHandler } from "$lib/index.js";
 import type * as I from "./_types.js";
 
-type Props<T = unknown> = I.Props<T>;
+type Props<T, Multiple extends boolean> = I.Props<T, Multiple>;
 
 type ContentProps<
 	T extends Transition = Transition,
diff --git a/src/lib/shared/index.ts b/src/lib/shared/index.ts
index b66e3375a..88fda7420 100644
--- a/src/lib/shared/index.ts
+++ b/src/lib/shared/index.ts
@@ -1,6 +1,11 @@
 import type { DateValue } from "@internationalized/date";
 import type { Month } from "@melt-ui/svelte";
 
+export type Selected<Value> = {
+	value: Value;
+	label?: string;
+};
+
 export type DateRange = {
 	start: DateValue | undefined;
 	end: DateValue | undefined;

From 695721fbcdc4b1084872b6cb6ce299cf33c125da Mon Sep 17 00:00:00 2001
From: Hunter Johnston <johnstonhuntera@gmail.com>
Date: Fri, 1 Dec 2023 23:00:54 -0500
Subject: [PATCH 199/217] cleanup

---
 src/components/demos/select-demo.svelte | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/demos/select-demo.svelte b/src/components/demos/select-demo.svelte
index 88c35c9a3..f0f2b3839 100644
--- a/src/components/demos/select-demo.svelte
+++ b/src/components/demos/select-demo.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { Select, type Selected } from "$lib";
+	import { Select } from "$lib";
 	import { flyAndScale } from "@/utils";
 	import { Check, Palette, CaretUpDown } from "phosphor-svelte";
 
@@ -11,7 +11,7 @@
 	];
 </script>
 
-<Select.Root multiple onSelectedChange={() => console.log("selectedChange")}>
+<Select.Root>
 	<Select.Trigger
 		class="inline-flex h-input w-[296px] items-center rounded-9px border border-border-input bg-background px-[11px] text-sm transition-colors placeholder:text-foreground-alt/50  focus:outline-none focus:ring-2 focus:ring-foreground focus:ring-offset-2 focus:ring-offset-background "
 		aria-label="Select a theme"

From 965961147265f2b9f47fb548f622cc1bd1eff8f1 Mon Sep 17 00:00:00 2001
From: Hunter Johnston <johnstonhuntera@gmail.com>
Date: Fri, 1 Dec 2023 23:11:27 -0500
Subject: [PATCH 200/217] fix select multiple

---
 src/components/demos/select-demo.svelte      |  2 +-
 src/lib/bits/select/components/select.svelte | 17 +++++++++++++----
 2 files changed, 14 insertions(+), 5 deletions(-)

diff --git a/src/components/demos/select-demo.svelte b/src/components/demos/select-demo.svelte
index f0f2b3839..b5cfa4b06 100644
--- a/src/components/demos/select-demo.svelte
+++ b/src/components/demos/select-demo.svelte
@@ -13,7 +13,7 @@
 
 <Select.Root>
 	<Select.Trigger
-		class="inline-flex h-input w-[296px] items-center rounded-9px border border-border-input bg-background px-[11px] text-sm transition-colors 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-[296px] items-center rounded-9px border border-border-input bg-background px-[11px] text-sm transition-colors placeholder:text-foreground-alt/50  focus:outline-none focus:ring-2 focus:ring-foreground focus:ring-offset-2 focus:ring-offset-background"
 		aria-label="Select a theme"
 	>
 		<Palette class="mr-[9px] text-muted-foreground sq-6" />
diff --git a/src/lib/bits/select/components/select.svelte b/src/lib/bits/select/components/select.svelte
index b7c938fd5..a9ce8ae05 100644
--- a/src/lib/bits/select/components/select.svelte
+++ b/src/lib/bits/select/components/select.svelte
@@ -47,12 +47,16 @@
 		name,
 		multiple: multiple as Multiple,
 		forceVisible: true,
-		defaultSelected: selected,
+		defaultSelected: Array.isArray(selected)
+			? ([...selected] as $$Props["selected"])
+			: selected,
 		defaultOpen: open,
 		onSelectedChange: ({ next }) => {
 			if (Array.isArray(next)) {
-				onSelectedChange?.(next);
-				selected = next;
+				if (JSON.stringify(next) !== JSON.stringify(selected)) {
+					onSelectedChange?.(next);
+					selected = next;
+				}
 				return next;
 			}
 
@@ -82,7 +86,12 @@
 	);
 
 	$: open !== undefined && localOpen.set(open);
-	$: selected !== undefined && localSelected.set(selected);
+	$: selected !== undefined &&
+		localSelected.set(
+			Array.isArray(selected)
+				? ([...selected] as $$Props["selected"])
+				: selected
+		);
 
 	$: updateOption("required", required);
 	$: updateOption("disabled", disabled);

From 541cb33b36d7de4ccf3736812a68ef187bacacf8 Mon Sep 17 00:00:00 2001
From: Hunter Johnston <johnstonhuntera@gmail.com>
Date: Fri, 1 Dec 2023 23:31:40 -0500
Subject: [PATCH 201/217] check cleanup

---
 src/lib/bits/calendar/_types.ts        | 2 +-
 src/lib/bits/date-field/types.ts       | 2 +-
 src/lib/bits/date-range-field/types.ts | 2 +-
 src/lib/bits/select/_types.ts          | 2 +-
 src/lib/bits/select/types.ts           | 2 +-
 5 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/lib/bits/calendar/_types.ts b/src/lib/bits/calendar/_types.ts
index 3af0c0009..dc9de8b4f 100644
--- a/src/lib/bits/calendar/_types.ts
+++ b/src/lib/bits/calendar/_types.ts
@@ -19,7 +19,7 @@ type OmitCalendarProps<T> = Omit<
 	| "ids"
 >;
 
-type Props<Multiple extends boolean> = Expand<
+type Props<Multiple extends boolean = false> = Expand<
 	OmitCalendarProps<CreateCalendarProps<Multiple>> & {
 		/**
 		 * The selected date value. This updates as the user selects
diff --git a/src/lib/bits/date-field/types.ts b/src/lib/bits/date-field/types.ts
index c2bed4c2e..a44b25513 100644
--- a/src/lib/bits/date-field/types.ts
+++ b/src/lib/bits/date-field/types.ts
@@ -3,7 +3,7 @@ import type * as I from "./_types.js";
 
 type Props = I.Props;
 
-type LabelProps = I.Props & HTMLSpanAttributes;
+type LabelProps = I.LabelProps & HTMLSpanAttributes;
 
 type SegmentProps = I.SegmentProps & HTMLDivAttributes;
 
diff --git a/src/lib/bits/date-range-field/types.ts b/src/lib/bits/date-range-field/types.ts
index 2204843b8..076e95f77 100644
--- a/src/lib/bits/date-range-field/types.ts
+++ b/src/lib/bits/date-range-field/types.ts
@@ -3,7 +3,7 @@ import type * as I from "./_types.js";
 
 type Props = I.Props;
 
-type LabelProps = I.Props & HTMLSpanAttributes;
+type LabelProps = I.LabelProps & HTMLSpanAttributes;
 
 type SegmentProps = I.SegmentProps & HTMLDivAttributes;
 
diff --git a/src/lib/bits/select/_types.ts b/src/lib/bits/select/_types.ts
index 0759d36e1..e1b1cdf7b 100644
--- a/src/lib/bits/select/_types.ts
+++ b/src/lib/bits/select/_types.ts
@@ -7,7 +7,7 @@ import type { CreateSelectProps, SelectOptionProps } from "@melt-ui/svelte";
 import type { AsChild, Expand, OmitFloating, OnChangeFn } from "$lib/internal/index.js";
 import type { ContentProps, ArrowProps } from "$lib/bits/floating/_types.js";
 
-type Props<T, Multiple extends boolean> = Expand<
+type Props<T = unknown, Multiple extends boolean = false> = Expand<
 	OmitFloating<Omit<CreateSelectProps, "selected" | "defaultSelected" | "onSelectedChange">> & {
 		/**
 		 * The selected value of the select.
diff --git a/src/lib/bits/select/types.ts b/src/lib/bits/select/types.ts
index 494bf678a..e9b0d61af 100644
--- a/src/lib/bits/select/types.ts
+++ b/src/lib/bits/select/types.ts
@@ -8,7 +8,7 @@ import type {
 import type { CustomEventHandler } from "$lib/index.js";
 import type * as I from "./_types.js";
 
-type Props<T, Multiple extends boolean> = I.Props<T, Multiple>;
+type Props<T = unknown, Multiple extends boolean = false> = I.Props<T, Multiple>;
 
 type ContentProps<
 	T extends Transition = Transition,

From 05b70df1d38e18c8f2a129f5ac7a827e02630b2c Mon Sep 17 00:00:00 2001
From: Hunter Johnston <johnstonhuntera@gmail.com>
Date: Sat, 2 Dec 2023 14:12:08 -0500
Subject: [PATCH 202/217] add more floating things

---
 src/content/api-reference/context-menu.ts     |  55 +++++--
 src/content/api-reference/floating.ts         |  69 +++++++--
 src/content/api-reference/helpers.ts          |  10 +-
 src/lib/bits/context-menu/_types.ts           |  40 +-----
 .../components/date-picker-content.svelte     |   6 +-
 .../date-range-picker-content.svelte          |   6 +-
 src/lib/bits/floating/_types.ts               | 134 +++++++++++-------
 src/lib/bits/floating/floating-config.ts      |  16 +--
 src/lib/bits/floating/helpers.ts              |  26 +---
 .../components/link-preview-content.svelte    |   6 +-
 .../bits/menu/components/menu-content.svelte  |   6 +-
 .../menu/components/menu-sub-content.svelte   |   6 +-
 src/lib/bits/menu/ctx.ts                      |  17 +--
 .../tooltip/components/tooltip-content.svelte |   6 +-
 14 files changed, 251 insertions(+), 152 deletions(-)

diff --git a/src/content/api-reference/context-menu.ts b/src/content/api-reference/context-menu.ts
index 882542150..24983ed6c 100644
--- a/src/content/api-reference/context-menu.ts
+++ b/src/content/api-reference/context-menu.ts
@@ -3,7 +3,14 @@ import { menu } from "./menu";
 import type * as Menu from "$lib/bits/menu/_types";
 import type * as ContextMenu from "$lib/bits/context-menu/_types";
 import * as C from "@/content/constants.js";
-import { transitionProps, asChild, union, builderAndAttrsSlotProps } from "./helpers";
+import {
+	transitionProps,
+	asChild,
+	union,
+	builderAndAttrsSlotProps,
+	enums,
+	seeFloating
+} from "./helpers";
 
 export const root: APISchema<Menu.Props> = {
 	title: "Root",
@@ -26,31 +33,63 @@ export const content: APISchema<ContextMenu.ContentProps> = {
 		alignOffset: {
 			type: C.NUMBER,
 			default: "0",
-			description: "An offset in pixels from the 'start' or 'end' alignment options."
+			description: seeFloating(
+				"An offset in pixels from the 'start' or 'end' alignment options.",
+				"https://floating-ui.com/docs/offset#options"
+			)
 		},
 		avoidCollisions: {
 			type: C.BOOLEAN,
 			default: C.TRUE,
-			description:
-				"When `true`, overrides the `side` and `align` options to prevent collisions with the boundary edges."
+			description: seeFloating(
+				"When `true`, overrides the `side` and `align` options to prevent collisions with the boundary edges.",
+				"https://floating-ui.com/docs/flip"
+			)
 		},
 		collisionBoundary: {
 			type: {
 				type: C.UNION,
 				definition: union("'clippingAncestors'", "Element", "Array<Element>", "Rect")
 			},
-			description: "A boundary element or array of elements to check for collisions against."
+			description: seeFloating(
+				"A boundary element or array of elements to check for collisions against.",
+				"https://floating-ui.com/docs/detectoverflow#boundary"
+			)
 		},
 		collisionPadding: {
 			type: C.NUMBER,
 			default: "0",
-			description:
-				"The amount in pixels of virtual padding around the viewport edges to check for overflow which will cause a collision."
+			description: seeFloating(
+				"The amount in pixels of virtual padding around the viewport edges to check for overflow which will cause a collision.",
+				"https://floating-ui.com/docs/detectOverflow#padding"
+			)
 		},
 		fitViewport: {
 			type: C.BOOLEAN,
 			default: C.FALSE,
-			description: "Whether the floating element should be constrained to the viewport."
+			description: seeFloating(
+				"Whether the floating element should be constrained to the viewport.",
+				"https://floating-ui.com/docs/size"
+			)
+		},
+		strategy: {
+			type: {
+				type: C.ENUM,
+				definition: enums("absolute", "fixed")
+			},
+			default: "absolute",
+			description: seeFloating(
+				"The positioning strategy to use for the floating element.",
+				"https://floating-ui.com/docs/computeposition#strategy"
+			)
+		},
+		overlap: {
+			type: C.BOOLEAN,
+			default: C.FALSE,
+			description: seeFloating(
+				"Whether the floating element can overlap the reference element.",
+				"https://floating-ui.com/docs/shift#options"
+			)
 		}
 	},
 	slotProps: { ...builderAndAttrsSlotProps },
diff --git a/src/content/api-reference/floating.ts b/src/content/api-reference/floating.ts
index 67c705ee1..681e7c097 100644
--- a/src/content/api-reference/floating.ts
+++ b/src/content/api-reference/floating.ts
@@ -1,5 +1,5 @@
 import * as C from "@/content/constants.js";
-import { enums, union } from "./helpers.js";
+import { enums, seeFloating, union } from "./helpers.js";
 
 export const floatingPositioning = {
 	side: {
@@ -7,53 +7,96 @@ export const floatingPositioning = {
 			type: C.ENUM,
 			definition: enums("top", "right", "bottom", "left")
 		},
-		description:
-			"The preferred side of the anchor to render against when open. Will be reversed when collisions occur."
+		description: seeFloating(
+			"The preferred side of the anchor to render against when open. Will be reversed when collisions occur.",
+			"https://floating-ui.com/docs/computePosition#placement"
+		)
 	},
 	sideOffset: {
 		type: C.NUMBER,
 		default: "0",
-		description: "The amount of offset to apply to the menu's position on the x-axis."
+		description: seeFloating(
+			"The amount of offset to apply to the menu's position on the x-axis.",
+			"https://floating-ui.com/docs/offset#options"
+		)
 	},
 	align: {
 		type: {
 			type: C.ENUM,
 			definition: enums("start", "center", "end")
 		},
-		description: "The preferred alignment of the anchor to render against when open."
+		description: seeFloating(
+			"The preferred alignment of the anchor to render against when open.",
+			"https://floating-ui.com/docs/computePosition#placement"
+		)
 	},
 	alignOffset: {
 		type: C.NUMBER,
 		default: "0",
-		description: "An offset in pixels from the 'start' or 'end' alignment options."
+		description: seeFloating(
+			"An offset in pixels from the 'start' or 'end' alignment options.",
+			"https://floating-ui.com/docs/offset#options"
+		)
 	},
 	avoidCollisions: {
 		type: C.BOOLEAN,
 		default: C.TRUE,
-		description:
-			"When `true`, overrides the `side` and `align` options to prevent collisions with the boundary edges."
+		description: seeFloating(
+			"When `true`, overrides the `side` and `align` options to prevent collisions with the boundary edges.",
+			"https://floating-ui.com/docs/flip"
+		)
 	},
 	collisionBoundary: {
 		type: {
 			type: C.UNION,
 			definition: union("'clippingAncestors'", "Element", "Array<Element>", "Rect")
 		},
-		description: "A boundary element or array of elements to check for collisions against."
+		description: seeFloating(
+			"A boundary element or array of elements to check for collisions against.",
+			"https://floating-ui.com/docs/detectoverflow#boundary"
+		)
 	},
 	collisionPadding: {
 		type: C.NUMBER,
 		default: "0",
-		description:
-			"The amount in pixels of virtual padding around the viewport edges to check for overflow which will cause a collision."
+		description: seeFloating(
+			"The amount in pixels of virtual padding around the viewport edges to check for overflow which will cause a collision.",
+			"https://floating-ui.com/docs/detectOverflow#padding"
+		)
 	},
 	fitViewport: {
 		type: C.BOOLEAN,
 		default: C.FALSE,
-		description: "Whether the floating element should be constrained to the viewport."
+		description: seeFloating(
+			"Whether the floating element should be constrained to the viewport.",
+			"https://floating-ui.com/docs/size"
+		)
 	},
 	sameWidth: {
 		type: C.BOOLEAN,
 		default: C.FALSE,
-		description: "Whether the content should be the same width as the trigger."
+		description: seeFloating(
+			"Whether the content should be the same width as the trigger.",
+			"https://floating-ui.com/docs/size"
+		)
+	},
+	strategy: {
+		type: {
+			type: C.ENUM,
+			definition: enums("absolute", "fixed")
+		},
+		default: "absolute",
+		description: seeFloating(
+			"The positioning strategy to use for the floating element.",
+			"https://floating-ui.com/docs/computeposition#strategy"
+		)
+	},
+	overlap: {
+		type: C.BOOLEAN,
+		default: C.FALSE,
+		description: seeFloating(
+			"Whether the floating element can overlap the reference element.",
+			"https://floating-ui.com/docs/shift#options"
+		)
 	}
 };
diff --git a/src/content/api-reference/helpers.ts b/src/content/api-reference/helpers.ts
index 66f728130..a260e62b4 100644
--- a/src/content/api-reference/helpers.ts
+++ b/src/content/api-reference/helpers.ts
@@ -93,9 +93,17 @@ export function portalProp(compName = "content") {
 }
 
 export function union(...types: string[]): string {
-	return types.join(" | ");
+	return types
+		.join(" | ")
+		.replaceAll(" ", "&nbsp;")
+		.replaceAll("<", "&lt;")
+		.replaceAll(">", "&gt;");
 }
 
 export function enums(...values: string[]): string {
 	return values.map((value) => `'${value}'`).join(" | ");
 }
+
+export function seeFloating(content: string, link: string) {
+	return `${content} [Floating UI reference](${link}).`;
+}
diff --git a/src/lib/bits/context-menu/_types.ts b/src/lib/bits/context-menu/_types.ts
index ecab902a7..0152f4abd 100644
--- a/src/lib/bits/context-menu/_types.ts
+++ b/src/lib/bits/context-menu/_types.ts
@@ -1,42 +1,10 @@
 import type { AsChild, Transition, TransitionProps } from "$lib/internal/index.js";
-import type { Boundary } from "../floating/_types";
+import type { FloatingProps } from "$lib/bits/floating/_types.js";
+
+type ContextFloatingProps = Omit<FloatingProps, "sameWidth" | "side" | "sideOffset" | "align">;
 
 export type ContentProps<
 	T extends Transition = Transition,
 	In extends Transition = Transition,
 	Out extends Transition = Transition
-> = Expand<
-	{
-		/**
-		 * An offset in pixels from the "start" or "end" alignment options.
-		 */
-		alignOffset?: number;
-
-		/**
-		 * When `true`, overrides the `side` and `align` options to prevent collisions
-		 * with the boundary edges.
-		 *
-		 * @defaultValue `true`
-		 */
-		avoidCollisions?: boolean;
-
-		/**
-		 * The amount in pixels of virtual padding around the viewport edges to check
-		 * for overflow which will cause a collision.
-		 */
-		collisionPadding?: number;
-
-		/**
-		 * A boundary element or array of elements to check for collisions against.
-		 */
-		collisionBoundary?: Boundary;
-
-		/**
-		 * Whether the floating element should be constrained to the viewport.
-		 *
-		 * @defaultValue `false`
-		 */
-		fitViewport?: boolean;
-	} & TransitionProps<T, In, Out> &
-		AsChild
->;
+> = Expand<ContextFloatingProps & TransitionProps<T, In, Out> & AsChild>;
diff --git a/src/lib/bits/date-picker/components/date-picker-content.svelte b/src/lib/bits/date-picker/components/date-picker-content.svelte
index f06066bfa..b237fcaff 100644
--- a/src/lib/bits/date-picker/components/date-picker-content.svelte
+++ b/src/lib/bits/date-picker/components/date-picker-content.svelte
@@ -27,6 +27,8 @@
 	export let collisionBoundary: $$Props["collisionBoundary"] = undefined;
 	export let sameWidth: $$Props["sameWidth"] = false;
 	export let fitViewport: $$Props["fitViewport"] = false;
+	export let strategy: $$Props["strategy"] = "absolute";
+	export let overlap: $$Props["overlap"] = false;
 
 	const {
 		elements: { content },
@@ -54,7 +56,9 @@
 		avoidCollisions,
 		collisionBoundary,
 		sameWidth,
-		fitViewport
+		fitViewport,
+		strategy,
+		overlap
 	});
 </script>
 
diff --git a/src/lib/bits/date-range-picker/components/date-range-picker-content.svelte b/src/lib/bits/date-range-picker/components/date-range-picker-content.svelte
index f06066bfa..b237fcaff 100644
--- a/src/lib/bits/date-range-picker/components/date-range-picker-content.svelte
+++ b/src/lib/bits/date-range-picker/components/date-range-picker-content.svelte
@@ -27,6 +27,8 @@
 	export let collisionBoundary: $$Props["collisionBoundary"] = undefined;
 	export let sameWidth: $$Props["sameWidth"] = false;
 	export let fitViewport: $$Props["fitViewport"] = false;
+	export let strategy: $$Props["strategy"] = "absolute";
+	export let overlap: $$Props["overlap"] = false;
 
 	const {
 		elements: { content },
@@ -54,7 +56,9 @@
 		avoidCollisions,
 		collisionBoundary,
 		sameWidth,
-		fitViewport
+		fitViewport,
+		strategy,
+		overlap
 	});
 </script>
 
diff --git a/src/lib/bits/floating/_types.ts b/src/lib/bits/floating/_types.ts
index 7e10ae6e0..39b701811 100644
--- a/src/lib/bits/floating/_types.ts
+++ b/src/lib/bits/floating/_types.ts
@@ -15,64 +15,92 @@ export type Rect = {
 	height: number;
 };
 
-export type ContentProps<
-	T extends Transition = Transition,
-	In extends Transition = Transition,
-	Out extends Transition = Transition
-> = Expand<
-	{
-		/**
-		 * The preferred side of the anchor to render against when open.
-		 * Will be reversed when collisions occur.
-		 */
-		side?: "top" | "right" | "bottom" | "left";
+export type FloatingProps = {
+	/**
+	 * The preferred side of the anchor to render against when open.
+	 * Will be reversed when collisions occur.
+	 *
+	 * @see https://floating-ui.com/docs/computePosition#placement
+	 */
+	side?: "top" | "right" | "bottom" | "left";
 
-		/**
-		 * The preferred alignment of the anchor to render against when open.
-		 * This may change when collisions occur.
-		 */
-		align?: "start" | "center" | "end";
+	/**
+	 * The preferred alignment of the anchor to render against when open.
+	 * This may change when collisions occur.
+	 *
+	 * @see https://floating-ui.com/docs/computePosition#placement
+	 */
+	align?: "start" | "center" | "end";
 
-		/**
-		 * An offset in pixels from the "start" or "end" alignment options.
-		 */
-		alignOffset?: number;
+	/**
+	 * An offset in pixels from the "start" or "end" alignment options.
+	 * @see https://floating-ui.com/docs/offset#options
+	 */
+	alignOffset?: number;
 
-		/**
-		 * The distance in pixels from the anchor to the floating element.
-		 */
-		sideOffset?: number;
+	/**
+	 * The distance in pixels from the anchor to the floating element.
+	 * @see https://floating-ui.com/docs/offset#options
+	 */
+	sideOffset?: number;
 
-		/**
-		 * Whether the content should be the same width as the trigger.
-		 */
-		sameWidth?: boolean;
+	/**
+	 * Whether the content should be the same width as the trigger.
+	 *
+	 * @see https://floating-ui.com/docs/size
+	 */
+	sameWidth?: boolean;
 
-		/**
-		 * When `true`, overrides the `side` and `align` options to prevent collisions
-		 * with the boundary edges.
-		 *
-		 * @defaultValue `true`
-		 */
-		avoidCollisions?: boolean;
+	/**
+	 * When `true`, overrides the `side` and `align` options to prevent collisions
+	 * with the boundary edges.
+	 *
+	 * @default true
+	 * @see https://floating-ui.com/docs/flip
+	 */
+	avoidCollisions?: boolean;
 
-		/**
-		 * The amount in pixels of virtual padding around the viewport edges to check
-		 * for overflow which will cause a collision.
-		 */
-		collisionPadding?: number;
+	/**
+	 * The amount in pixels of virtual padding around the viewport edges to check
+	 * for overflow which will cause a collision.
+	 *
+	 * @default 8
+	 * @see https://floating-ui.com/docs/detectOverflow#padding
+	 */
+	collisionPadding?: number;
 
-		/**
-		 * A boundary element or array of elements to check for collisions against.
-		 */
-		collisionBoundary?: Boundary;
+	/**
+	 * A boundary element or array of elements to check for collisions against.
+	 *
+	 * @see https://floating-ui.com/docs/detectoverflow#boundary
+	 */
+	collisionBoundary?: Boundary;
 
-		/**
-		 * Whether the floating element should be constrained to the viewport.
-		 *
-		 * @defaultValue `false`
-		 */
-		fitViewport?: boolean;
-	} & TransitionProps<T, In, Out> &
-		AsChild
->;
+	/**
+	 * Whether the floating element should be constrained to the viewport.
+	 *
+	 * @default false
+	 * @see https://floating-ui.com/docs/size
+	 */
+	fitViewport?: boolean;
+
+	/**
+	 * The positioning strategy to use for the floating element.
+	 * @see https://floating-ui.com/docs/computeposition#strategy
+	 */
+	strategy?: "absolute" | "fixed";
+
+	/**
+	 * Whether the floating element can overlap the reference element.
+	 * @default false
+	 *
+	 * @see https://floating-ui.com/docs/shift#options
+	 */
+	overlap?: boolean;
+};
+
+export type ContentProps<
+	T extends Transition = Transition,
+	In extends Transition = Transition,
+	Out extends Transition = Transition
+> = Expand<FloatingProps & TransitionProps<T, In, Out> & AsChild>;
diff --git a/src/lib/bits/floating/floating-config.ts b/src/lib/bits/floating/floating-config.ts
index 600085a0f..d28321bc0 100644
--- a/src/lib/bits/floating/floating-config.ts
+++ b/src/lib/bits/floating/floating-config.ts
@@ -1,7 +1,7 @@
 export type FloatingConfig = {
 	/**
 	 * The initial placement of the floating element.
-	 * @defaultValue `"top"`
+	 * @default `"top"`
 	 *
 	 * @see https://floating-ui.com/docs/computePosition#placement
 	 */
@@ -21,7 +21,7 @@ export type FloatingConfig = {
 
 	/**
 	 * The strategy to use for positioning.
-	 * @defaultValue `"absolute"`
+	 * @default `"absolute"`
 	 *
 	 * @see https://floating-ui.com/docs/computePosition#placement
 	 */
@@ -36,7 +36,7 @@ export type FloatingConfig = {
 
 	/**
 	 * The main axis offset or gap between the reference and floating elements.
-	 * @defaultValue `5`
+	 * @default `5`
 	 *
 	 * @see https://floating-ui.com/docs/offset#options
 	 */
@@ -44,7 +44,7 @@ export type FloatingConfig = {
 
 	/**
 	 * The virtual padding around the viewport edges to check for overflow.
-	 * @defaultValue `8`
+	 * @default `8`
 	 *
 	 * @see https://floating-ui.com/docs/detectOverflow#padding
 	 */
@@ -52,7 +52,7 @@ export type FloatingConfig = {
 
 	/**
 	 * Whether to flip the placement.
-	 * @defaultValue `true`
+	 * @default `true`
 	 *
 	 * @see https://floating-ui.com/docs/flip
 	 */
@@ -60,7 +60,7 @@ export type FloatingConfig = {
 
 	/**
 	 * Whether the floating element can overlap the reference element.
-	 * @defaultValue `false`
+	 * @default `false`
 	 *
 	 * @see https://floating-ui.com/docs/shift#options
 	 */
@@ -68,7 +68,7 @@ export type FloatingConfig = {
 
 	/**
 	 * Whether to make the floating element same width as the reference element.
-	 * @defaultValue `false`
+	 * @default `false`
 	 *
 	 * @see https://floating-ui.com/docs/size
 	 */
@@ -76,7 +76,7 @@ export type FloatingConfig = {
 
 	/**
 	 * Whether the floating element should fit the viewport.
-	 * @defaultValue `false`
+	 * @default `false`
 	 *
 	 * @see https://floating-ui.com/docs/size
 	 */
diff --git a/src/lib/bits/floating/helpers.ts b/src/lib/bits/floating/helpers.ts
index 44f4700ac..c2dff351b 100644
--- a/src/lib/bits/floating/helpers.ts
+++ b/src/lib/bits/floating/helpers.ts
@@ -1,21 +1,9 @@
 import type { Writable } from "svelte/store";
 import type { FloatingConfig } from "./floating-config";
-import type { Boundary } from "./_types.js";
+import type { FloatingProps } from "./_types.js";
 
-export type Side = "top" | "right" | "bottom" | "left";
-export type Align = "start" | "center" | "end";
-
-export type PositioningProps = {
-	side?: Side;
-	align?: Align;
-	sideOffset?: number;
-	alignOffset?: number;
-	collisionPadding?: number;
-	avoidCollisions?: boolean;
-	sameWidth?: boolean;
-	collisionBoundary?: Boundary;
-	fitViewport?: boolean;
-};
+type Side = "top" | "right" | "bottom" | "left";
+type Align = "start" | "center" | "end";
 
 const defaultPositioningProps = {
 	side: "bottom",
@@ -26,16 +14,16 @@ const defaultPositioningProps = {
 	avoidCollisions: true,
 	collisionPadding: 8,
 	fitViewport: false
-} satisfies PositioningProps;
+} satisfies FloatingProps;
 
 export function getPositioningUpdater(store: Writable<FloatingConfig>) {
-	return (props: PositioningProps = {}) => {
+	return (props: FloatingProps = {}) => {
 		return updatePositioning(store, props);
 	};
 }
 
-export function updatePositioning(store: Writable<FloatingConfig>, props: PositioningProps) {
-	const withDefaults = { ...defaultPositioningProps, ...props } satisfies PositioningProps;
+export function updatePositioning(store: Writable<FloatingConfig>, props: FloatingProps) {
+	const withDefaults = { ...defaultPositioningProps, ...props } satisfies FloatingProps;
 	store.update((prev) => {
 		return {
 			...prev,
diff --git a/src/lib/bits/link-preview/components/link-preview-content.svelte b/src/lib/bits/link-preview/components/link-preview-content.svelte
index b8121819e..cd81821a6 100644
--- a/src/lib/bits/link-preview/components/link-preview-content.svelte
+++ b/src/lib/bits/link-preview/components/link-preview-content.svelte
@@ -28,6 +28,8 @@
 	export let collisionBoundary: $$Props["collisionBoundary"] = undefined;
 	export let sameWidth: $$Props["sameWidth"] = false;
 	export let fitViewport: $$Props["fitViewport"] = false;
+	export let strategy: $$Props["strategy"] = "absolute";
+	export let overlap: $$Props["overlap"] = false;
 
 	const {
 		elements: { content },
@@ -57,7 +59,9 @@
 		avoidCollisions,
 		collisionBoundary,
 		sameWidth,
-		fitViewport
+		fitViewport,
+		strategy,
+		overlap
 	});
 </script>
 
diff --git a/src/lib/bits/menu/components/menu-content.svelte b/src/lib/bits/menu/components/menu-content.svelte
index d68fb43c8..d5c14ecaa 100644
--- a/src/lib/bits/menu/components/menu-content.svelte
+++ b/src/lib/bits/menu/components/menu-content.svelte
@@ -28,6 +28,8 @@
 	export let collisionBoundary: $$Props["collisionBoundary"] = undefined;
 	export let sameWidth: $$Props["sameWidth"] = false;
 	export let fitViewport: $$Props["fitViewport"] = false;
+	export let strategy: $$Props["strategy"] = "absolute";
+	export let overlap: $$Props["overlap"] = false;
 
 	const {
 		elements: { menu },
@@ -56,7 +58,9 @@
 		avoidCollisions,
 		collisionBoundary,
 		sameWidth,
-		fitViewport
+		fitViewport,
+		strategy,
+		overlap
 	});
 </script>
 
diff --git a/src/lib/bits/menu/components/menu-sub-content.svelte b/src/lib/bits/menu/components/menu-sub-content.svelte
index 966dde7a7..56cb1d5d8 100644
--- a/src/lib/bits/menu/components/menu-sub-content.svelte
+++ b/src/lib/bits/menu/components/menu-sub-content.svelte
@@ -27,6 +27,8 @@
 	export let collisionBoundary: $$Props["collisionBoundary"] = undefined;
 	export let sameWidth: $$Props["sameWidth"] = false;
 	export let fitViewport: $$Props["fitViewport"] = false;
+	export let strategy: $$Props["strategy"] = "absolute";
+	export let overlap: $$Props["overlap"] = false;
 
 	const {
 		elements: { subMenu },
@@ -55,7 +57,9 @@
 		avoidCollisions,
 		collisionBoundary,
 		sameWidth,
-		fitViewport
+		fitViewport,
+		strategy,
+		overlap
 	});
 </script>
 
diff --git a/src/lib/bits/menu/ctx.ts b/src/lib/bits/menu/ctx.ts
index a021666ca..0011bdc45 100644
--- a/src/lib/bits/menu/ctx.ts
+++ b/src/lib/bits/menu/ctx.ts
@@ -17,8 +17,9 @@ import {
 } from "@melt-ui/svelte";
 import { getContext, setContext } from "svelte";
 import type { Readable, Writable } from "svelte/store";
-import { getPositioningUpdater, type PositioningProps } from "../floating/helpers";
-import type { FloatingConfig } from "../floating/floating-config";
+import { getPositioningUpdater } from "../floating/helpers.js";
+import type { FloatingConfig } from "../floating/floating-config.js";
+import type { FloatingProps } from "../floating/_types.js";
 
 const NAME = "menu";
 const SUB_NAME = "menu-submenu";
@@ -148,10 +149,10 @@ export function setArrow(size = 8) {
 const defaultPlacement = {
 	side: "bottom",
 	align: "center"
-} satisfies PositioningProps;
+} satisfies FloatingProps;
 
-export function updatePositioning(props: PositioningProps) {
-	const withDefaults = { ...defaultPlacement, ...props } satisfies PositioningProps;
+export function updatePositioning(props: FloatingProps) {
+	const withDefaults = { ...defaultPlacement, ...props } satisfies FloatingProps;
 	const {
 		options: { positioning }
 	} = getCtx();
@@ -163,10 +164,10 @@ export function updatePositioning(props: PositioningProps) {
 const defaultSubPlacement = {
 	side: "right",
 	align: "start"
-} satisfies PositioningProps;
+} satisfies FloatingProps;
 
-export function updateSubPositioning(props: PositioningProps) {
-	const withDefaults = { ...defaultSubPlacement, ...props } satisfies PositioningProps;
+export function updateSubPositioning(props: FloatingProps) {
+	const withDefaults = { ...defaultSubPlacement, ...props } satisfies FloatingProps;
 	const {
 		options: { positioning }
 	} = getSubmenuCtx();
diff --git a/src/lib/bits/tooltip/components/tooltip-content.svelte b/src/lib/bits/tooltip/components/tooltip-content.svelte
index b39aed774..cdcdabfb6 100644
--- a/src/lib/bits/tooltip/components/tooltip-content.svelte
+++ b/src/lib/bits/tooltip/components/tooltip-content.svelte
@@ -28,6 +28,8 @@
 	export let collisionBoundary: $$Props["collisionBoundary"] = undefined;
 	export let sameWidth: $$Props["sameWidth"] = false;
 	export let fitViewport: $$Props["fitViewport"] = false;
+	export let strategy: $$Props["strategy"] = "absolute";
+	export let overlap: $$Props["overlap"] = false;
 
 	const {
 		elements: { content },
@@ -52,7 +54,9 @@
 		avoidCollisions,
 		collisionBoundary,
 		sameWidth,
-		fitViewport
+		fitViewport,
+		strategy,
+		overlap
 	});
 </script>
 

From 4122979fd171da68ab4db9a551ce87f8c1f49361 Mon Sep 17 00:00:00 2001
From: Hunter Johnston <johnstonhuntera@gmail.com>
Date: Sat, 2 Dec 2023 15:06:33 -0500
Subject: [PATCH 203/217] init calendar tests

---
 src/tests/calendar/Calendar.spec.ts    | 143 +++++++++++++++++++++++++
 src/tests/calendar/CalendarTest.svelte |  74 +++++++++++++
 2 files changed, 217 insertions(+)
 create mode 100644 src/tests/calendar/Calendar.spec.ts
 create mode 100644 src/tests/calendar/CalendarTest.svelte

diff --git a/src/tests/calendar/Calendar.spec.ts b/src/tests/calendar/Calendar.spec.ts
new file mode 100644
index 000000000..c772249e3
--- /dev/null
+++ b/src/tests/calendar/Calendar.spec.ts
@@ -0,0 +1,143 @@
+import { render, waitFor } from "@testing-library/svelte";
+import userEvent from "@testing-library/user-event";
+import { axe } from "jest-axe";
+import { describe, it } from "vitest";
+import { testKbd as kbd } from "../utils.js";
+import CalendarTest from "./CalendarTest.svelte";
+import type { Calendar } from "$lib";
+import { CalendarDate, CalendarDateTime, toZoned } from "@internationalized/date";
+import { tick } from "svelte";
+
+const calendarDate = new CalendarDate(1980, 1, 20);
+const calendarDateTime = new CalendarDateTime(1980, 1, 20, 12, 30, 0, 0);
+const zonedDateTime = toZoned(calendarDateTime, "America/New_York");
+
+const narrowWeekdays = ["S", "M", "T", "W", "T", "F", "S"];
+const shortWeekdays = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
+const longWeekdays = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
+// prettier-ignore
+const months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October" ,"November", "December"];
+
+function setup(props: Calendar.Props = {}) {
+	const user = userEvent.setup();
+	const returned = render(CalendarTest, { ...props });
+	const calendar = returned.getByTestId("calendar");
+	expect(calendar).toBeVisible();
+	return { ...returned, user, calendar };
+}
+
+describe("Calendar", () => {
+	it("has no accessibility violations", async () => {
+		const { container } = render(CalendarTest);
+		expect(await axe(container)).toHaveNoViolations();
+	});
+
+	it("respects a default value if provided - `CalendarDate`", async () => {
+		const { calendar, getByTestId } = setup({ value: calendarDate });
+
+		const selectedDay = calendar.querySelector("[data-selected]");
+		expect(selectedDay).toHaveTextContent(String(calendarDate.day));
+
+		expect(getByTestId("heading")).toHaveTextContent("January 1980");
+	});
+
+	it("respects a default value if provided - `CalendarDateTime`", async () => {
+		const { calendar, getByTestId } = setup({ value: calendarDateTime });
+
+		const selectedDay = calendar.querySelector("[data-selected]");
+		expect(selectedDay).toHaveTextContent(String(calendarDateTime.day));
+
+		expect(getByTestId("heading")).toHaveTextContent("January 1980");
+	});
+
+	it("respects a default value if provided - `ZonedDateTime`", async () => {
+		const { calendar, getByTestId } = setup({ value: zonedDateTime });
+
+		const selectedDay = calendar.querySelector("[data-selected]");
+		expect(selectedDay).toHaveTextContent(String(zonedDateTime.day));
+
+		expect(getByTestId("heading")).toHaveTextContent("January 1980");
+	});
+
+	it("properly binds to `value` - `CalendarDate`", async () => {
+		const { getByTestId, user } = setup({ value: calendarDate });
+
+		const addDayBtn = getByTestId("add-day");
+		await user.click(addDayBtn);
+		const valueEl = getByTestId("value");
+		expect(valueEl).toHaveTextContent("1980-01-21");
+
+		const addMonthBtn = getByTestId("add-month");
+		await user.click(addMonthBtn);
+		expect(valueEl).toHaveTextContent("1980-02-21");
+
+		const addYearBtn = getByTestId("add-year");
+		await user.click(addYearBtn);
+		expect(valueEl).toHaveTextContent("1981-02-21");
+	});
+
+	it("properly binds to `value` - `CalendarDateTime`", async () => {
+		const { getByTestId, user } = setup({ value: calendarDateTime });
+
+		const addDayBtn = getByTestId("add-day");
+		await user.click(addDayBtn);
+		const valueEl = getByTestId("value");
+		expect(valueEl).toHaveTextContent("1980-01-21");
+
+		const addMonthBtn = getByTestId("add-month");
+		await user.click(addMonthBtn);
+		expect(valueEl).toHaveTextContent("1980-02-21");
+
+		const addYearBtn = getByTestId("add-year");
+		await user.click(addYearBtn);
+		expect(valueEl).toHaveTextContent("1981-02-21");
+	});
+
+	it("properly binds to `value` - `ZonedDateTime`", async () => {
+		const { getByTestId, user } = setup({ value: zonedDateTime });
+
+		const addDayBtn = getByTestId("add-day");
+		await user.click(addDayBtn);
+		const valueEl = getByTestId("value");
+		expect(valueEl).toHaveTextContent("1980-01-21");
+
+		const addMonthBtn = getByTestId("add-month");
+		await user.click(addMonthBtn);
+		expect(valueEl).toHaveTextContent("1980-02-21");
+
+		const addYearBtn = getByTestId("add-year");
+		await user.click(addYearBtn);
+		expect(valueEl).toHaveTextContent("1981-02-21");
+	});
+
+	it("navigates the months forward using the next button", async () => {
+		const { getByTestId, user } = setup({ value: calendarDate });
+
+		const heading = getByTestId("heading");
+		const nextBtn = getByTestId("next-button");
+
+		for (const month of months) {
+			expect(heading).toHaveTextContent(month + " 1980");
+			await user.click(nextBtn);
+		}
+		expect(heading).toHaveTextContent("January 1981");
+	});
+
+	it("navigates the months backwards using the prev button", async () => {
+		const { getByTestId, user } = setup({ value: calendarDate });
+
+		const heading = getByTestId("heading");
+		const prevBtn = getByTestId("prev-button");
+		const newMonths = [...months].reverse();
+		newMonths.pop();
+
+		expect(heading).toHaveTextContent("January 1980");
+		await user.click(prevBtn);
+
+		for (const month of newMonths) {
+			expect(heading).toHaveTextContent(month + " 1979");
+			await user.click(prevBtn);
+		}
+		expect(heading).toHaveTextContent("January 1979");
+	});
+});
diff --git a/src/tests/calendar/CalendarTest.svelte b/src/tests/calendar/CalendarTest.svelte
new file mode 100644
index 000000000..3cc79b180
--- /dev/null
+++ b/src/tests/calendar/CalendarTest.svelte
@@ -0,0 +1,74 @@
+<script lang="ts">
+	import { Calendar } from "$lib";
+
+	type $$Props = Calendar.Props;
+
+	export let placeholder: $$Props["placeholder"] = undefined;
+	export let value: $$Props["value"] = undefined;
+
+	function changeValue(field: "day" | "month" | "year") {
+		if (value) {
+			value = value.cycle(field, 1);
+		}
+	}
+</script>
+
+<main>
+	<div data-testid="value">{value}</div>
+	<button on:click={() => changeValue("day")} data-testid="add-day">
+		Add Day
+	</button>
+	<button on:click={() => changeValue("month")} data-testid="add-month"
+		>Add Month</button
+	>
+	<button on:click={() => changeValue("year")} data-testid="add-year"
+		>Add Year</button
+	>
+	<Calendar.Root
+		let:months
+		let:weekdays
+		bind:placeholder
+		bind:value
+		{...$$restProps}
+		data-testid="calendar"
+	>
+		<Calendar.Header data-testid="header">
+			<Calendar.PrevButton data-testid="prev-button">Prev</Calendar.PrevButton>
+			<Calendar.Heading data-testid="heading" />
+			<Calendar.NextButton data-testid="next-button">Next</Calendar.NextButton>
+		</Calendar.Header>
+		<div>
+			{#each months as month}
+				{@const m = month.value.month}
+				<Calendar.Grid data-testid="grid-{m}">
+					<Calendar.GridHead data-testid="grid-head-{m}">
+						<Calendar.GridRow data-testid="grid-row-{m}">
+							{#each weekdays as day, i}
+								<Calendar.HeadCell data-testid="head-cell-{i}">
+									{day}
+								</Calendar.HeadCell>
+							{/each}
+						</Calendar.GridRow>
+					</Calendar.GridHead>
+					<Calendar.GridBody data-testid="grid-body-{m}">
+						{#each month.weeks as weekDates, i}
+							<Calendar.GridRow data-testid="grid-row-{m}-{i}">
+								{#each weekDates as date, d}
+									<Calendar.Cell {date} data-testid="cell-{date.month}-{d}">
+										<Calendar.Date
+											{date}
+											month={month.value}
+											data-testid="date-{date.month}-{date.day}"
+										>
+											{date.day}
+										</Calendar.Date>
+									</Calendar.Cell>
+								{/each}
+							</Calendar.GridRow>
+						{/each}
+					</Calendar.GridBody>
+				</Calendar.Grid>
+			{/each}
+		</div>
+	</Calendar.Root>
+</main>

From fbe87de0dee5dc3328569439fdc6e1442be864dd Mon Sep 17 00:00:00 2001
From: Hunter Johnston <johnstonhuntera@gmail.com>
Date: Sat, 2 Dec 2023 15:19:56 -0500
Subject: [PATCH 204/217] cal tests

---
 .../bits/calendar/components/calendar.svelte  |  3 +
 src/tests/calendar/Calendar.spec.ts           | 94 ++++++++++++++++++-
 2 files changed, 96 insertions(+), 1 deletion(-)

diff --git a/src/lib/bits/calendar/components/calendar.svelte b/src/lib/bits/calendar/components/calendar.svelte
index 32bb938aa..1f1f2007a 100644
--- a/src/lib/bits/calendar/components/calendar.svelte
+++ b/src/lib/bits/calendar/components/calendar.svelte
@@ -26,6 +26,7 @@
 	export let multiple: $$Props["multiple"] = false as Multiple;
 	export let asChild: $$Props["asChild"] = false;
 	export let id: $$Props["id"] = undefined;
+	export let numberOfMonths: $$Props["numberOfMonths"] = undefined;
 
 	const {
 		elements: { calendar },
@@ -54,6 +55,7 @@
 		calendarLabel,
 		weekdayFormat,
 		multiple,
+		numberOfMonths,
 		onPlaceholderChange: ({ next }) => {
 			if (placeholder !== next) {
 				onPlaceholderChange?.(next);
@@ -90,6 +92,7 @@
 	$: updateOption("fixedWeeks", fixedWeeks);
 	$: updateOption("calendarLabel", calendarLabel);
 	$: updateOption("weekdayFormat", weekdayFormat);
+	$: updateOption("numberOfMonths", numberOfMonths);
 
 	$: builder = $calendar;
 	const attrs = getAttrs("root");
diff --git a/src/tests/calendar/Calendar.spec.ts b/src/tests/calendar/Calendar.spec.ts
index c772249e3..7c040c9df 100644
--- a/src/tests/calendar/Calendar.spec.ts
+++ b/src/tests/calendar/Calendar.spec.ts
@@ -6,7 +6,7 @@ import { testKbd as kbd } from "../utils.js";
 import CalendarTest from "./CalendarTest.svelte";
 import type { Calendar } from "$lib";
 import { CalendarDate, CalendarDateTime, toZoned } from "@internationalized/date";
-import { tick } from "svelte";
+import { get } from "svelte/store";
 
 const calendarDate = new CalendarDate(1980, 1, 20);
 const calendarDateTime = new CalendarDateTime(1980, 1, 20, 12, 30, 0, 0);
@@ -140,4 +140,96 @@ describe("Calendar", () => {
 		}
 		expect(heading).toHaveTextContent("January 1979");
 	});
+
+	it("allows dates to be deselected by clicking the selected date", async () => {
+		const { getByTestId, user, calendar } = setup({
+			value: calendarDate
+		});
+
+		const value = getByTestId("value");
+		expect(value).toHaveTextContent("1980-01-20");
+
+		const selectedDay = calendar.querySelector("[data-selected]") as HTMLElement;
+		expect(selectedDay).toHaveTextContent(String(calendarDate.day));
+
+		await user.click(selectedDay);
+		expect(value).toHaveTextContent("undefined");
+	});
+
+	it.each([kbd.ENTER, kbd.SPACE])("allows deselection with %s key", async (key) => {
+		const { getByTestId, user, calendar } = setup({
+			value: calendarDate
+		});
+
+		const value = getByTestId("value");
+		expect(value).toHaveTextContent("1980-01-20");
+
+		const selectedDay = calendar.querySelector("[data-selected]") as HTMLElement;
+		expect(selectedDay).toHaveTextContent(String(calendarDate.day));
+		selectedDay.focus();
+		await user.keyboard(key);
+		expect(value).toHaveTextContent("undefined");
+	});
+
+	it("allows selection with mouse", async () => {
+		const { getByTestId, user } = setup({
+			placeholder: zonedDateTime
+		});
+
+		const secondDayInMonth = getByTestId("date-1-2");
+		expect(secondDayInMonth).toHaveTextContent("2");
+		await user.click(secondDayInMonth);
+
+		const newDate = zonedDateTime.set({ day: 2 });
+		expect(getByTestId("value")).toHaveTextContent(newDate.toString());
+	});
+
+	it.each([kbd.SPACE, kbd.ENTER])("allows selection with %s key", async (key) => {
+		const { getByTestId, user } = setup({
+			placeholder: zonedDateTime
+		});
+
+		const secondDayInMonth = getByTestId("date-1-2");
+		expect(secondDayInMonth).toHaveTextContent("2");
+		secondDayInMonth.focus();
+		await user.keyboard(key);
+
+		const newDate = zonedDateTime.set({ day: 2 });
+		expect(getByTestId("value")).toHaveTextContent(newDate.toString());
+	});
+
+	it("displays multiple months when `numberOfMonths` is greater than 1", async () => {
+		const { getByTestId, calendar, user } = setup({ value: calendarDateTime, numberOfMonths: 2 });
+
+		const selectedDay = calendar.querySelector("[data-selected]") as HTMLElement;
+		expect(selectedDay).toHaveTextContent(String(calendarDateTime.day));
+
+		const heading = getByTestId("heading");
+		expect(heading).toHaveTextContent("January - February 1980");
+
+		const firstMonthDayDateStr = calendarDateTime.set({ day: 12 }).toString();
+		const firstMonthDay = getByTestId("date-1-12");
+		expect(firstMonthDay).toHaveTextContent("12");
+		expect(firstMonthDay).toHaveAttribute("data-value", firstMonthDayDateStr);
+
+		const secondMonthDay = getByTestId("date-2-15");
+		const secondMonthDayDateStr = calendarDateTime.set({ day: 15, month: 2 }).toString();
+		expect(secondMonthDay).toHaveTextContent("15");
+		expect(secondMonthDay).toHaveAttribute("data-value", secondMonthDayDateStr);
+
+		const prevButton = getByTestId("prev-button");
+		const nextButton = getByTestId("next-button");
+
+		await user.click(nextButton);
+		expect(heading).toHaveTextContent("February - March 1980");
+		expect(firstMonthDay).not.toHaveAttribute("data-value", firstMonthDayDateStr);
+
+		await user.click(prevButton);
+		expect(heading).toHaveTextContent("January - February 1980");
+		expect(firstMonthDay).toHaveAttribute("data-value", firstMonthDayDateStr);
+
+		await user.click(prevButton);
+		expect(heading).toHaveTextContent("December 1979 - January 1980");
+		expect(firstMonthDay).not.toHaveAttribute("data-value", firstMonthDayDateStr);
+	});
 });

From af7727244711867a0f63a4d624ada41c4d21447a Mon Sep 17 00:00:00 2001
From: Hunter Johnston <johnstonhuntera@gmail.com>
Date: Sat, 2 Dec 2023 15:27:59 -0500
Subject: [PATCH 205/217] more cal tests

---
 src/tests/calendar/Calendar.spec.ts    | 80 +++++++++++++++++++++++++-
 src/tests/calendar/CalendarTest.svelte |  2 +-
 2 files changed, 79 insertions(+), 3 deletions(-)

diff --git a/src/tests/calendar/Calendar.spec.ts b/src/tests/calendar/Calendar.spec.ts
index 7c040c9df..9e6802317 100644
--- a/src/tests/calendar/Calendar.spec.ts
+++ b/src/tests/calendar/Calendar.spec.ts
@@ -1,4 +1,4 @@
-import { render, waitFor } from "@testing-library/svelte";
+import { render } from "@testing-library/svelte";
 import userEvent from "@testing-library/user-event";
 import { axe } from "jest-axe";
 import { describe, it } from "vitest";
@@ -6,7 +6,6 @@ import { testKbd as kbd } from "../utils.js";
 import CalendarTest from "./CalendarTest.svelte";
 import type { Calendar } from "$lib";
 import { CalendarDate, CalendarDateTime, toZoned } from "@internationalized/date";
-import { get } from "svelte/store";
 
 const calendarDate = new CalendarDate(1980, 1, 20);
 const calendarDateTime = new CalendarDateTime(1980, 1, 20, 12, 30, 0, 0);
@@ -232,4 +231,81 @@ describe("Calendar", () => {
 		expect(heading).toHaveTextContent("December 1979 - January 1980");
 		expect(firstMonthDay).not.toHaveAttribute("data-value", firstMonthDayDateStr);
 	});
+
+	it("properly handles `pagedNavigation` with multiple months", async () => {
+		const { getByTestId, calendar, user } = setup({
+			value: calendarDateTime,
+			numberOfMonths: 2,
+			pagedNavigation: true
+		});
+
+		const selectedDay = calendar.querySelector("[data-selected]") as HTMLElement;
+		expect(selectedDay).toHaveTextContent(String(calendarDateTime.day));
+
+		const heading = getByTestId("heading");
+		expect(heading).toHaveTextContent("January - February 1980");
+
+		const firstMonthDayDateStr = calendarDateTime.set({ day: 12 }).toString();
+		const firstMonthDay = getByTestId("date-1-12");
+		expect(firstMonthDay).toHaveTextContent("12");
+		expect(firstMonthDay).toHaveAttribute("data-value", firstMonthDayDateStr);
+
+		const secondMonthDay = getByTestId("date-2-15");
+		const secondMonthDayDateStr = calendarDateTime.set({ day: 15, month: 2 }).toString();
+		expect(secondMonthDay).toHaveTextContent("15");
+		expect(secondMonthDay).toHaveAttribute("data-value", secondMonthDayDateStr);
+
+		const prevButton = getByTestId("prev-button");
+		const nextButton = getByTestId("next-button");
+
+		await user.click(nextButton);
+		expect(heading).toHaveTextContent("March - April 1980");
+		expect(firstMonthDay).not.toHaveAttribute("data-value", firstMonthDayDateStr);
+
+		await user.click(prevButton);
+		expect(heading).toHaveTextContent("January - February 1980");
+		expect(firstMonthDay).toHaveAttribute("data-value", firstMonthDayDateStr);
+
+		await user.click(prevButton);
+		expect(heading).toHaveTextContent("November - December 1979");
+		expect(firstMonthDay).not.toHaveAttribute("data-value", firstMonthDayDateStr);
+	});
+
+	it("always renders six weeks when `fixedWeeks` is `true`", async () => {
+		const { getByTestId, calendar, user } = setup({
+			value: calendarDate,
+			fixedWeeks: true
+		});
+
+		function getNumberOfWeeks() {
+			return calendar.querySelectorAll("[data-week]").length;
+		}
+
+		const nextButton = getByTestId("next-button");
+
+		for (let i = 0; i < 12; i++) {
+			expect(getNumberOfWeeks()).toBe(6);
+			await user.click(nextButton);
+		}
+
+		for (let i = 0; i < 24; i++) {
+			expect(getNumberOfWeeks()).toBe(6);
+			await user.click(nextButton);
+		}
+	});
+
+	it("should update the selected date when value controlled externally", async () => {
+		const { getByTestId, user, calendar } = setup({
+			value: calendarDate
+		});
+
+		const selectedDate = calendar.querySelector("[data-selected]") as HTMLElement;
+		expect(selectedDate).toHaveTextContent("20");
+		expect(calendar.querySelectorAll("[data-selected]").length).toBe(1);
+
+		const addDayBtn = getByTestId("add-day");
+		await user.click(addDayBtn);
+		expect(calendar.querySelector("[data-selected]")).toHaveTextContent("21");
+		expect(calendar.querySelectorAll("[data-selected]").length).toBe(1);
+	});
 });
diff --git a/src/tests/calendar/CalendarTest.svelte b/src/tests/calendar/CalendarTest.svelte
index 3cc79b180..a1c513c9c 100644
--- a/src/tests/calendar/CalendarTest.svelte
+++ b/src/tests/calendar/CalendarTest.svelte
@@ -52,7 +52,7 @@
 					</Calendar.GridHead>
 					<Calendar.GridBody data-testid="grid-body-{m}">
 						{#each month.weeks as weekDates, i}
-							<Calendar.GridRow data-testid="grid-row-{m}-{i}">
+							<Calendar.GridRow data-testid="grid-row-{m}-{i}" data-week>
 								{#each weekDates as date, d}
 									<Calendar.Cell {date} data-testid="cell-{date.month}-{d}">
 										<Calendar.Date

From 0e638667f52aba22aad43dec05ad05656875b3d0 Mon Sep 17 00:00:00 2001
From: Hunter Johnston <johnstonhuntera@gmail.com>
Date: Sat, 2 Dec 2023 15:52:40 -0500
Subject: [PATCH 206/217] more cal tests

---
 src/tests/calendar/Calendar.spec.ts    | 243 +++++++++++++++++++++++++
 src/tests/calendar/CalendarTest.svelte |   4 +-
 2 files changed, 246 insertions(+), 1 deletion(-)

diff --git a/src/tests/calendar/Calendar.spec.ts b/src/tests/calendar/Calendar.spec.ts
index 9e6802317..e3da9d617 100644
--- a/src/tests/calendar/Calendar.spec.ts
+++ b/src/tests/calendar/Calendar.spec.ts
@@ -308,4 +308,247 @@ describe("Calendar", () => {
 		expect(calendar.querySelector("[data-selected]")).toHaveTextContent("21");
 		expect(calendar.querySelectorAll("[data-selected]").length).toBe(1);
 	});
+
+	it("should change view when controlled placeholder changes", async () => {
+		const { getByTestId, user } = setup({
+			placeholder: calendarDate
+		});
+
+		const heading = getByTestId("heading");
+		expect(heading).toHaveTextContent("January 1980");
+		const addMonthBtn = getByTestId("add-month");
+		await user.click(addMonthBtn);
+		expect(heading).toHaveTextContent("February 1980");
+		const addYearBtn = getByTestId("add-year");
+		await user.click(addYearBtn);
+		expect(heading).toHaveTextContent("February 1981");
+		await user.click(addMonthBtn);
+		await user.click(addMonthBtn);
+		await user.click(addMonthBtn);
+		expect(heading).toHaveTextContent("May 1981");
+	});
+
+	it("should not allow navigation before the `minValue` (prev button)", async () => {
+		const { getByTestId, user } = setup({
+			value: calendarDate,
+			minValue: new CalendarDate(1979, 11, 25)
+		});
+
+		const prevBtn = getByTestId("prev-button");
+		await user.click(prevBtn);
+		const heading = getByTestId("heading");
+		expect(heading).toHaveTextContent("December 1979");
+		expect(prevBtn).not.toHaveAttribute("aria-disabled", "true");
+		expect(prevBtn).not.toHaveAttribute("data-disabled");
+
+		await user.click(prevBtn);
+		expect(heading).toHaveTextContent("November 1979");
+		expect(prevBtn).toHaveAttribute("aria-disabled", "true");
+		expect(prevBtn).toHaveAttribute("data-disabled");
+
+		await user.click(prevBtn);
+		expect(heading).toHaveTextContent("November 1979");
+	});
+
+	it("should not allow navigation after the `maxValue` (next button)", async () => {
+		const { getByTestId, user } = setup({
+			value: calendarDate,
+			maxValue: new CalendarDate(1980, 3, 25)
+		});
+
+		const nextBtn = getByTestId("next-button");
+		await user.click(nextBtn);
+		const heading = getByTestId("heading");
+		expect(heading).toHaveTextContent("February 1980");
+		expect(nextBtn).not.toHaveAttribute("aria-disabled", "true");
+		expect(nextBtn).not.toHaveAttribute("data-disabled");
+
+		await user.click(nextBtn);
+		expect(heading).toHaveTextContent("March 1980");
+		expect(nextBtn).toHaveAttribute("aria-disabled", "true");
+		expect(nextBtn).toHaveAttribute("data-disabled");
+
+		await user.click(nextBtn);
+		expect(heading).toHaveTextContent("March 1980");
+	});
+
+	it("does not navigate after `maxValue` (with keyboard)", async () => {
+		const { getByTestId, user } = setup({
+			value: calendarDate,
+			maxValue: new CalendarDate(1980, 3, 31)
+		});
+
+		const firstDayInMonth = getByTestId("date-1-1");
+		firstDayInMonth.focus();
+		expect(firstDayInMonth).toHaveFocus();
+
+		const heading = getByTestId("heading");
+		expect(heading).toHaveTextContent("January 1980");
+
+		// five keypresses to February 1980
+		await user.keyboard(kbd.ARROW_DOWN);
+		expect(getByTestId("date-1-8")).toHaveFocus();
+		await user.keyboard(kbd.ARROW_DOWN);
+		expect(getByTestId("date-1-15")).toHaveFocus();
+		await user.keyboard(kbd.ARROW_DOWN);
+		expect(getByTestId("date-1-22")).toHaveFocus();
+		await user.keyboard(kbd.ARROW_DOWN);
+		expect(getByTestId("date-1-29")).toHaveFocus();
+		await user.keyboard(kbd.ARROW_DOWN);
+		expect(getByTestId("date-2-5")).toHaveFocus();
+		expect(heading).toHaveTextContent("February 1980");
+
+		// four keypresses to March 1980
+		await user.keyboard(kbd.ARROW_DOWN);
+		expect(getByTestId("date-2-12")).toHaveFocus();
+		await user.keyboard(kbd.ARROW_DOWN);
+		expect(getByTestId("date-2-19")).toHaveFocus();
+		await user.keyboard(kbd.ARROW_DOWN);
+		expect(getByTestId("date-2-26")).toHaveFocus();
+		await user.keyboard(kbd.ARROW_DOWN);
+		expect(getByTestId("date-3-4")).toHaveFocus();
+		expect(heading).toHaveTextContent("March 1980");
+
+		// four keypresses to April 1980
+		await user.keyboard(kbd.ARROW_DOWN);
+		expect(getByTestId("date-3-11")).toHaveFocus();
+		await user.keyboard(kbd.ARROW_DOWN);
+		expect(getByTestId("date-3-18")).toHaveFocus();
+		await user.keyboard(kbd.ARROW_DOWN);
+		expect(getByTestId("date-3-25")).toHaveFocus();
+		await user.keyboard(kbd.ARROW_DOWN);
+		expect(getByTestId("date-3-25")).toHaveFocus();
+		expect(heading).toHaveTextContent("March 1980");
+	});
+
+	it("does not navigate before `minValue` (with keyboard)", async () => {
+		const { getByTestId, user } = setup({
+			value: calendarDate,
+			minValue: new CalendarDate(1979, 12, 1)
+		});
+
+		const firstDayInMonth = getByTestId("date-1-1");
+		firstDayInMonth.focus();
+		expect(firstDayInMonth).toHaveFocus();
+
+		const heading = getByTestId("heading");
+		expect(heading).toHaveTextContent("January 1980");
+
+		// one keypress to get to December 1979
+		await user.keyboard(kbd.ARROW_UP);
+		expect(getByTestId("date-12-25")).toHaveFocus();
+		expect(heading).toHaveTextContent("December 1979");
+
+		// four keypresses to November 1979
+		await user.keyboard(kbd.ARROW_UP);
+		expect(getByTestId("date-12-18")).toHaveFocus();
+		await user.keyboard(kbd.ARROW_UP);
+		expect(getByTestId("date-12-11")).toHaveFocus();
+		await user.keyboard(kbd.ARROW_UP);
+		expect(getByTestId("date-12-4")).toHaveFocus();
+		await user.keyboard(kbd.ARROW_UP);
+		expect(getByTestId("date-12-4")).toHaveFocus();
+		expect(heading).toHaveTextContent("December 1979");
+	});
+
+	it("handles unavailable dates appropriately", async () => {
+		const { getByTestId, user } = setup({
+			placeholder: calendarDate,
+			isDateUnavailable: (date) => {
+				return date.day === 3;
+			}
+		});
+
+		const thirdDayInMonth = getByTestId("date-1-3");
+		expect(thirdDayInMonth).toHaveTextContent("3");
+		expect(thirdDayInMonth).toHaveAttribute("data-unavailable");
+		expect(thirdDayInMonth).toHaveAttribute("aria-disabled", "true");
+		await user.click(thirdDayInMonth);
+		expect(thirdDayInMonth).not.toHaveAttribute("data-selected");
+	});
+
+	it("doesnt allow focus or interaction when `disabled` is `true`", async () => {
+		const { getByTestId, user } = setup({
+			placeholder: calendarDate,
+			disabled: true
+		});
+
+		const grid = getByTestId("grid-1");
+		expect(grid).toHaveAttribute("aria-disabled", "true");
+		expect(grid).toHaveAttribute("data-disabled");
+
+		const firstDayOfMonth = getByTestId("date-1-1");
+		expect(firstDayOfMonth).toHaveAttribute("aria-disabled", "true");
+		expect(firstDayOfMonth).toHaveAttribute("data-disabled");
+		await user.click(firstDayOfMonth);
+		expect(firstDayOfMonth).not.toHaveAttribute("data-selected");
+		firstDayOfMonth.focus();
+		expect(firstDayOfMonth).not.toHaveFocus();
+
+		const tenthDayOfMonth = getByTestId("date-1-10");
+		expect(tenthDayOfMonth).toHaveAttribute("aria-disabled", "true");
+		expect(tenthDayOfMonth).toHaveAttribute("data-disabled");
+		await user.click(tenthDayOfMonth);
+		expect(tenthDayOfMonth).not.toHaveAttribute("data-selected");
+		tenthDayOfMonth.focus();
+		expect(tenthDayOfMonth).not.toHaveFocus();
+	});
+
+	it("prevents selection but allows focus when `readonly` is `true`", async () => {
+		const { getByTestId, user } = setup({
+			placeholder: calendarDate,
+			readonly: true
+		});
+
+		const grid = getByTestId("grid-1");
+		expect(grid).toHaveAttribute("aria-readonly", "true");
+		expect(grid).toHaveAttribute("data-readonly");
+
+		const firstDayOfMonth = getByTestId("date-1-1");
+		await user.click(firstDayOfMonth);
+		expect(firstDayOfMonth).not.toHaveAttribute("data-selected");
+		firstDayOfMonth.focus();
+		expect(firstDayOfMonth).toHaveFocus();
+
+		const tenthDayOfMonth = getByTestId("date-1-10");
+		await user.click(tenthDayOfMonth);
+		expect(tenthDayOfMonth).not.toHaveAttribute("data-selected");
+		tenthDayOfMonth.focus();
+		expect(tenthDayOfMonth).toHaveFocus();
+	});
+
+	it("formats the weekday labels correctly - `'narrow'`", async () => {
+		const { getByTestId } = setup({
+			placeholder: calendarDate,
+			weekdayFormat: "narrow"
+		});
+		for (const [i, weekday] of narrowWeekdays.entries()) {
+			const weekdayEl = getByTestId(`weekday-1-${i}`);
+			expect(weekdayEl).toHaveTextContent(weekday);
+		}
+	});
+
+	it("formats the weekday labels correctly - `'short'`", async () => {
+		const { getByTestId } = setup({
+			placeholder: calendarDate,
+			weekdayFormat: "short"
+		});
+		for (const [i, weekday] of shortWeekdays.entries()) {
+			const weekdayEl = getByTestId(`weekday-1-${i}`);
+			expect(weekdayEl).toHaveTextContent(weekday);
+		}
+	});
+
+	it("formats the weekday labels correctly - `'long'`", async () => {
+		const { getByTestId } = setup({
+			placeholder: calendarDate,
+			weekdayFormat: "long"
+		});
+		for (const [i, weekday] of longWeekdays.entries()) {
+			const weekdayEl = getByTestId(`weekday-1-${i}`);
+			expect(weekdayEl).toHaveTextContent(weekday);
+		}
+	});
 });
+
+describe.todo("Calendar - `multiple`");
diff --git a/src/tests/calendar/CalendarTest.svelte b/src/tests/calendar/CalendarTest.svelte
index a1c513c9c..1d79b83a8 100644
--- a/src/tests/calendar/CalendarTest.svelte
+++ b/src/tests/calendar/CalendarTest.svelte
@@ -9,6 +9,8 @@
 	function changeValue(field: "day" | "month" | "year") {
 		if (value) {
 			value = value.cycle(field, 1);
+		} else if (placeholder) {
+			placeholder = placeholder.cycle(field, 1);
 		}
 	}
 </script>
@@ -44,7 +46,7 @@
 					<Calendar.GridHead data-testid="grid-head-{m}">
 						<Calendar.GridRow data-testid="grid-row-{m}">
 							{#each weekdays as day, i}
-								<Calendar.HeadCell data-testid="head-cell-{i}">
+								<Calendar.HeadCell data-testid="weekday-{m}-{i}">
 									{day}
 								</Calendar.HeadCell>
 							{/each}

From e4eb83c135fa0cf83bacf9964be48f85e14d5f56 Mon Sep 17 00:00:00 2001
From: Hunter Johnston <johnstonhuntera@gmail.com>
Date: Sun, 3 Dec 2023 11:59:57 -0500
Subject: [PATCH 207/217] more calendar tests

---
 src/tests/calendar/Calendar.spec.ts         | 95 ++++++++++++++++++++-
 src/tests/calendar/CalendarMultiTest.svelte | 61 +++++++++++++
 2 files changed, 155 insertions(+), 1 deletion(-)
 create mode 100644 src/tests/calendar/CalendarMultiTest.svelte

diff --git a/src/tests/calendar/Calendar.spec.ts b/src/tests/calendar/Calendar.spec.ts
index e3da9d617..987d952d4 100644
--- a/src/tests/calendar/Calendar.spec.ts
+++ b/src/tests/calendar/Calendar.spec.ts
@@ -6,6 +6,7 @@ import { testKbd as kbd } from "../utils.js";
 import CalendarTest from "./CalendarTest.svelte";
 import type { Calendar } from "$lib";
 import { CalendarDate, CalendarDateTime, toZoned } from "@internationalized/date";
+import CalendarMultiTest from "./CalendarMultiTest.svelte";
 
 const calendarDate = new CalendarDate(1980, 1, 20);
 const calendarDateTime = new CalendarDateTime(1980, 1, 20, 12, 30, 0, 0);
@@ -25,6 +26,14 @@ function setup(props: Calendar.Props = {}) {
 	return { ...returned, user, calendar };
 }
 
+function setupMulti(props: Calendar.Props<true> = {}) {
+	const user = userEvent.setup();
+	const returned = render(CalendarMultiTest, { ...props, multiple: true });
+	const calendar = returned.getByTestId("calendar");
+	expect(calendar).toBeVisible();
+	return { ...returned, user, calendar };
+}
+
 describe("Calendar", () => {
 	it("has no accessibility violations", async () => {
 		const { container } = render(CalendarTest);
@@ -551,4 +560,88 @@ describe("Calendar", () => {
 	});
 });
 
-describe.todo("Calendar - `multiple`");
+describe("Calendar - `multiple`", () => {
+	it("handles default value when `value` prop is provided - `CalendarDate[]`", async () => {
+		const d1 = new CalendarDate(1980, 1, 2);
+		const d2 = new CalendarDate(1980, 1, 5);
+
+		const { calendar } = setupMulti({
+			value: [d1, d2]
+		});
+
+		const selectedDays = calendar.querySelectorAll("[data-selected]");
+		expect(selectedDays.length).toBe(2);
+		expect(selectedDays[0]).toHaveTextContent(String(d1.day));
+		expect(selectedDays[1]).toHaveTextContent(String(d2.day));
+	});
+
+	it("handles default value when `value` prop is provided - `CalendarDateTime[]`", async () => {
+		const d1 = new CalendarDateTime(1980, 1, 2);
+		const d2 = new CalendarDateTime(1980, 1, 5);
+
+		const { calendar } = setupMulti({
+			value: [d1, d2]
+		});
+
+		const selectedDays = calendar.querySelectorAll("[data-selected]");
+		expect(selectedDays.length).toBe(2);
+		expect(selectedDays[0]).toHaveTextContent(String(d1.day));
+		expect(selectedDays[1]).toHaveTextContent(String(d2.day));
+	});
+
+	it("handles default value when `value` prop is provided - `ZonedDateTime[]`", async () => {
+		const d1 = toZoned(new CalendarDateTime(1980, 1, 2), "America/New_York");
+		const d2 = toZoned(new CalendarDateTime(1980, 1, 5), "America/New_York");
+
+		const { calendar } = setupMulti({
+			value: [d1, d2]
+		});
+
+		const selectedDays = calendar.querySelectorAll("[data-selected]");
+		expect(selectedDays.length).toBe(2);
+		expect(selectedDays[0]).toHaveTextContent(String(d1.day));
+		expect(selectedDays[1]).toHaveTextContent(String(d2.day));
+	});
+
+	it("sets placeholder to last value in `value` prop", async () => {
+		const d1 = new CalendarDate(1980, 1, 2);
+		const d2 = new CalendarDate(1980, 5, 5);
+
+		const { calendar, getByTestId } = setupMulti({
+			value: [d1, d2]
+		});
+
+		const selectedDays = calendar.querySelectorAll("[data-selected]");
+		expect(selectedDays.length).toBe(1);
+		expect(getByTestId("heading")).toHaveTextContent("May 1980");
+	});
+
+	it("allows deselection", async () => {
+		const d1 = new CalendarDate(1980, 1, 2);
+		const d2 = new CalendarDate(1980, 1, 5);
+
+		const { calendar, user } = setupMulti({
+			value: [d1, d2]
+		});
+		const selectedDays = calendar.querySelectorAll<HTMLElement>("[data-selected]");
+		expect(selectedDays.length).toBe(2);
+		await user.click(selectedDays[0]);
+		expect(calendar.querySelectorAll("[data-selected]").length).toBe(1);
+	});
+
+	it("prevents deselection when only one date is selected and `preventDeselect` is `true`", async () => {
+		const d1 = new CalendarDate(1980, 1, 2);
+
+		const { calendar, user } = setupMulti({
+			value: [d1],
+			preventDeselect: true
+		});
+		const selectedDays = calendar.querySelectorAll("[data-selected]");
+		expect(selectedDays.length).toBe(1);
+		await user.click(selectedDays[0]);
+		const selectedDays2 = calendar.querySelectorAll("[data-selected]");
+		expect(selectedDays2.length).toBe(1);
+		await user.click(selectedDays2[0]);
+		expect(calendar.querySelectorAll("[data-selected]").length).toBe(1);
+	});
+});
diff --git a/src/tests/calendar/CalendarMultiTest.svelte b/src/tests/calendar/CalendarMultiTest.svelte
new file mode 100644
index 000000000..f0bc2c3b0
--- /dev/null
+++ b/src/tests/calendar/CalendarMultiTest.svelte
@@ -0,0 +1,61 @@
+<script lang="ts">
+	import { Calendar } from "$lib";
+
+	type $$Props = Calendar.Props<true>;
+
+	export let placeholder: $$Props["placeholder"] = undefined;
+	export let value: $$Props["value"] = undefined;
+	export let multiple: $$Props["multiple"] = true;
+</script>
+
+<main>
+	<div data-testid="value">{value}</div>
+	<Calendar.Root
+		let:months
+		let:weekdays
+		bind:placeholder
+		bind:value
+		{...$$restProps}
+		{multiple}
+		data-testid="calendar"
+	>
+		<Calendar.Header data-testid="header">
+			<Calendar.PrevButton data-testid="prev-button">Prev</Calendar.PrevButton>
+			<Calendar.Heading data-testid="heading" />
+			<Calendar.NextButton data-testid="next-button">Next</Calendar.NextButton>
+		</Calendar.Header>
+		<div>
+			{#each months as month}
+				{@const m = month.value.month}
+				<Calendar.Grid data-testid="grid-{m}">
+					<Calendar.GridHead data-testid="grid-head-{m}">
+						<Calendar.GridRow data-testid="grid-row-{m}">
+							{#each weekdays as day, i}
+								<Calendar.HeadCell data-testid="weekday-{m}-{i}">
+									{day}
+								</Calendar.HeadCell>
+							{/each}
+						</Calendar.GridRow>
+					</Calendar.GridHead>
+					<Calendar.GridBody data-testid="grid-body-{m}">
+						{#each month.weeks as weekDates, i}
+							<Calendar.GridRow data-testid="grid-row-{m}-{i}" data-week>
+								{#each weekDates as date, d}
+									<Calendar.Cell {date} data-testid="cell-{date.month}-{d}">
+										<Calendar.Date
+											{date}
+											month={month.value}
+											data-testid="date-{date.month}-{date.day}"
+										>
+											{date.day}
+										</Calendar.Date>
+									</Calendar.Cell>
+								{/each}
+							</Calendar.GridRow>
+						{/each}
+					</Calendar.GridBody>
+				</Calendar.Grid>
+			{/each}
+		</div>
+	</Calendar.Root>
+</main>

From 9989e32bf0a76ee0140351fb51e42ccd5dd13f35 Mon Sep 17 00:00:00 2001
From: Hunter Johnston <johnstonhuntera@gmail.com>
Date: Sun, 3 Dec 2023 13:26:17 -0500
Subject: [PATCH 208/217] range calendar tests

---
 package.json                                  |   6 +-
 pnpm-lock.yaml                                | 188 +++++-----
 .../demos/range-calendar-demo.svelte          |   6 +-
 src/tests/helpers/calendar.ts                 |   7 +
 .../range-calendar/RangeCalendar.spec.ts      | 327 ++++++++++++++++++
 .../range-calendar/RangeCalendarTest.svelte   |  68 ++++
 6 files changed, 497 insertions(+), 105 deletions(-)
 create mode 100644 src/tests/helpers/calendar.ts
 create mode 100644 src/tests/range-calendar/RangeCalendar.spec.ts
 create mode 100644 src/tests/range-calendar/RangeCalendarTest.svelte

diff --git a/package.json b/package.json
index 593563247..b4c342b27 100644
--- a/package.json
+++ b/package.json
@@ -33,7 +33,7 @@
 		"!dist/**/*.spec.*"
 	],
 	"devDependencies": {
-		"@changesets/cli": "^2.26.2",
+		"@changesets/cli": "^2.27.1",
 		"@huntabyte/mdsvex": "0.16.5",
 		"@melt-ui/pp": "^0.1.4",
 		"@playwright/test": "^1.28.1",
@@ -92,8 +92,8 @@
 	"type": "module",
 	"dependencies": {
 		"@internationalized/date": "^3.5.0",
-		"@melt-ui/svelte": "0.64.0",
-		"nanoid": "^5.0.3"
+		"@melt-ui/svelte": "0.64.1",
+		"nanoid": "^5.0.4"
 	},
 	"peerDependencies": {
 		"svelte": "^4.0.0"
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index d1aba103c..d6898b435 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -9,22 +9,22 @@ dependencies:
     specifier: ^3.5.0
     version: 3.5.0
   '@melt-ui/svelte':
-    specifier: 0.64.0
-    version: 0.64.0(svelte@4.2.3)
+    specifier: 0.64.1
+    version: 0.64.1(svelte@4.2.3)
   nanoid:
-    specifier: ^5.0.3
-    version: 5.0.3
+    specifier: ^5.0.4
+    version: 5.0.4
 
 devDependencies:
   '@changesets/cli':
-    specifier: ^2.26.2
-    version: 2.26.2
+    specifier: ^2.27.1
+    version: 2.27.1
   '@huntabyte/mdsvex':
     specifier: 0.16.5
     version: 0.16.5(svelte@4.2.3)
   '@melt-ui/pp':
     specifier: ^0.1.4
-    version: 0.1.4(@melt-ui/svelte@0.64.0)(svelte@4.2.3)
+    version: 0.1.4(@melt-ui/svelte@0.64.1)(svelte@4.2.3)
   '@playwright/test':
     specifier: ^1.28.1
     version: 1.36.2
@@ -227,14 +227,14 @@ packages:
       regenerator-runtime: 0.13.11
     dev: true
 
-  /@changesets/apply-release-plan@6.1.4:
-    resolution: {integrity: sha512-FMpKF1fRlJyCZVYHr3CbinpZZ+6MwvOtWUuO8uo+svcATEoc1zRDcj23pAurJ2TZ/uVz1wFHH6K3NlACy0PLew==}
+  /@changesets/apply-release-plan@7.0.0:
+    resolution: {integrity: sha512-vfi69JR416qC9hWmFGSxj7N6wA5J222XNBmezSVATPWDVPIF7gkd4d8CpbEbXmRWbVrkoli3oerGS6dcL/BGsQ==}
     dependencies:
       '@babel/runtime': 7.22.6
-      '@changesets/config': 2.3.1
-      '@changesets/get-version-range-type': 0.3.2
-      '@changesets/git': 2.0.0
-      '@changesets/types': 5.2.1
+      '@changesets/config': 3.0.0
+      '@changesets/get-version-range-type': 0.4.0
+      '@changesets/git': 3.0.0
+      '@changesets/types': 6.0.0
       '@manypkg/get-packages': 1.1.3
       detect-indent: 6.1.0
       fs-extra: 7.0.1
@@ -245,51 +245,50 @@ packages:
       semver: 7.5.4
     dev: true
 
-  /@changesets/assemble-release-plan@5.2.4:
-    resolution: {integrity: sha512-xJkWX+1/CUaOUWTguXEbCDTyWJFECEhmdtbkjhn5GVBGxdP/JwaHBIU9sW3FR6gD07UwZ7ovpiPclQZs+j+mvg==}
+  /@changesets/assemble-release-plan@6.0.0:
+    resolution: {integrity: sha512-4QG7NuisAjisbW4hkLCmGW2lRYdPrKzro+fCtZaILX+3zdUELSvYjpL4GTv0E4aM9Mef3PuIQp89VmHJ4y2bfw==}
     dependencies:
       '@babel/runtime': 7.22.6
-      '@changesets/errors': 0.1.4
-      '@changesets/get-dependents-graph': 1.3.6
-      '@changesets/types': 5.2.1
+      '@changesets/errors': 0.2.0
+      '@changesets/get-dependents-graph': 2.0.0
+      '@changesets/types': 6.0.0
       '@manypkg/get-packages': 1.1.3
       semver: 7.5.4
     dev: true
 
-  /@changesets/changelog-git@0.1.14:
-    resolution: {integrity: sha512-+vRfnKtXVWsDDxGctOfzJsPhaCdXRYoe+KyWYoq5X/GqoISREiat0l3L8B0a453B2B4dfHGcZaGyowHbp9BSaA==}
+  /@changesets/changelog-git@0.2.0:
+    resolution: {integrity: sha512-bHOx97iFI4OClIT35Lok3sJAwM31VbUM++gnMBV16fdbtBhgYu4dxsphBF/0AZZsyAHMrnM0yFcj5gZM1py6uQ==}
     dependencies:
-      '@changesets/types': 5.2.1
+      '@changesets/types': 6.0.0
     dev: true
 
-  /@changesets/cli@2.26.2:
-    resolution: {integrity: sha512-dnWrJTmRR8bCHikJHl9b9HW3gXACCehz4OasrXpMp7sx97ECuBGGNjJhjPhdZNCvMy9mn4BWdplI323IbqsRig==}
+  /@changesets/cli@2.27.1:
+    resolution: {integrity: sha512-iJ91xlvRnnrJnELTp4eJJEOPjgpF3NOh4qeQehM6Ugiz9gJPRZ2t+TsXun6E3AMN4hScZKjqVXl0TX+C7AB3ZQ==}
     hasBin: true
     dependencies:
       '@babel/runtime': 7.22.6
-      '@changesets/apply-release-plan': 6.1.4
-      '@changesets/assemble-release-plan': 5.2.4
-      '@changesets/changelog-git': 0.1.14
-      '@changesets/config': 2.3.1
-      '@changesets/errors': 0.1.4
-      '@changesets/get-dependents-graph': 1.3.6
-      '@changesets/get-release-plan': 3.0.17
-      '@changesets/git': 2.0.0
-      '@changesets/logger': 0.0.5
-      '@changesets/pre': 1.0.14
-      '@changesets/read': 0.5.9
-      '@changesets/types': 5.2.1
-      '@changesets/write': 0.2.3
+      '@changesets/apply-release-plan': 7.0.0
+      '@changesets/assemble-release-plan': 6.0.0
+      '@changesets/changelog-git': 0.2.0
+      '@changesets/config': 3.0.0
+      '@changesets/errors': 0.2.0
+      '@changesets/get-dependents-graph': 2.0.0
+      '@changesets/get-release-plan': 4.0.0
+      '@changesets/git': 3.0.0
+      '@changesets/logger': 0.1.0
+      '@changesets/pre': 2.0.0
+      '@changesets/read': 0.6.0
+      '@changesets/types': 6.0.0
+      '@changesets/write': 0.3.0
       '@manypkg/get-packages': 1.1.3
-      '@types/is-ci': 3.0.0
       '@types/semver': 7.5.0
       ansi-colors: 4.1.3
       chalk: 2.4.2
+      ci-info: 3.8.0
       enquirer: 2.4.1
       external-editor: 3.1.0
       fs-extra: 7.0.1
       human-id: 1.0.2
-      is-ci: 3.0.1
       meow: 6.1.1
       outdent: 0.5.0
       p-limit: 2.3.0
@@ -301,28 +300,28 @@ packages:
       tty-table: 4.2.1
     dev: true
 
-  /@changesets/config@2.3.1:
-    resolution: {integrity: sha512-PQXaJl82CfIXddUOppj4zWu+987GCw2M+eQcOepxN5s+kvnsZOwjEJO3DH9eVy+OP6Pg/KFEWdsECFEYTtbg6w==}
+  /@changesets/config@3.0.0:
+    resolution: {integrity: sha512-o/rwLNnAo/+j9Yvw9mkBQOZySDYyOr/q+wptRLcAVGlU6djOeP9v1nlalbL9MFsobuBVQbZCTp+dIzdq+CLQUA==}
     dependencies:
-      '@changesets/errors': 0.1.4
-      '@changesets/get-dependents-graph': 1.3.6
-      '@changesets/logger': 0.0.5
-      '@changesets/types': 5.2.1
+      '@changesets/errors': 0.2.0
+      '@changesets/get-dependents-graph': 2.0.0
+      '@changesets/logger': 0.1.0
+      '@changesets/types': 6.0.0
       '@manypkg/get-packages': 1.1.3
       fs-extra: 7.0.1
       micromatch: 4.0.5
     dev: true
 
-  /@changesets/errors@0.1.4:
-    resolution: {integrity: sha512-HAcqPF7snsUJ/QzkWoKfRfXushHTu+K5KZLJWPb34s4eCZShIf8BFO3fwq6KU8+G7L5KdtN2BzQAXOSXEyiY9Q==}
+  /@changesets/errors@0.2.0:
+    resolution: {integrity: sha512-6BLOQUscTpZeGljvyQXlWOItQyU71kCdGz7Pi8H8zdw6BI0g3m43iL4xKUVPWtG+qrrL9DTjpdn8eYuCQSRpow==}
     dependencies:
       extendable-error: 0.1.7
     dev: true
 
-  /@changesets/get-dependents-graph@1.3.6:
-    resolution: {integrity: sha512-Q/sLgBANmkvUm09GgRsAvEtY3p1/5OCzgBE5vX3vgb5CvW0j7CEljocx5oPXeQSNph6FXulJlXV3Re/v3K3P3Q==}
+  /@changesets/get-dependents-graph@2.0.0:
+    resolution: {integrity: sha512-cafUXponivK4vBgZ3yLu944mTvam06XEn2IZGjjKc0antpenkYANXiiE6GExV/yKdsCnE8dXVZ25yGqLYZmScA==}
     dependencies:
-      '@changesets/types': 5.2.1
+      '@changesets/types': 6.0.0
       '@manypkg/get-packages': 1.1.3
       chalk: 2.4.2
       fs-extra: 7.0.1
@@ -338,65 +337,65 @@ packages:
       - encoding
     dev: true
 
-  /@changesets/get-release-plan@3.0.17:
-    resolution: {integrity: sha512-6IwKTubNEgoOZwDontYc2x2cWXfr6IKxP3IhKeK+WjyD6y3M4Gl/jdQvBw+m/5zWILSOCAaGLu2ZF6Q+WiPniw==}
+  /@changesets/get-release-plan@4.0.0:
+    resolution: {integrity: sha512-9L9xCUeD/Tb6L/oKmpm8nyzsOzhdNBBbt/ZNcjynbHC07WW4E1eX8NMGC5g5SbM5z/V+MOrYsJ4lRW41GCbg3w==}
     dependencies:
       '@babel/runtime': 7.22.6
-      '@changesets/assemble-release-plan': 5.2.4
-      '@changesets/config': 2.3.1
-      '@changesets/pre': 1.0.14
-      '@changesets/read': 0.5.9
-      '@changesets/types': 5.2.1
+      '@changesets/assemble-release-plan': 6.0.0
+      '@changesets/config': 3.0.0
+      '@changesets/pre': 2.0.0
+      '@changesets/read': 0.6.0
+      '@changesets/types': 6.0.0
       '@manypkg/get-packages': 1.1.3
     dev: true
 
-  /@changesets/get-version-range-type@0.3.2:
-    resolution: {integrity: sha512-SVqwYs5pULYjYT4op21F2pVbcrca4qA/bAA3FmFXKMN7Y+HcO8sbZUTx3TAy2VXulP2FACd1aC7f2nTuqSPbqg==}
+  /@changesets/get-version-range-type@0.4.0:
+    resolution: {integrity: sha512-hwawtob9DryoGTpixy1D3ZXbGgJu1Rhr+ySH2PvTLHvkZuQ7sRT4oQwMh0hbqZH1weAooedEjRsbrWcGLCeyVQ==}
     dev: true
 
-  /@changesets/git@2.0.0:
-    resolution: {integrity: sha512-enUVEWbiqUTxqSnmesyJGWfzd51PY4H7mH9yUw0hPVpZBJ6tQZFMU3F3mT/t9OJ/GjyiM4770i+sehAn6ymx6A==}
+  /@changesets/git@3.0.0:
+    resolution: {integrity: sha512-vvhnZDHe2eiBNRFHEgMiGd2CT+164dfYyrJDhwwxTVD/OW0FUD6G7+4DIx1dNwkwjHyzisxGAU96q0sVNBns0w==}
     dependencies:
       '@babel/runtime': 7.22.6
-      '@changesets/errors': 0.1.4
-      '@changesets/types': 5.2.1
+      '@changesets/errors': 0.2.0
+      '@changesets/types': 6.0.0
       '@manypkg/get-packages': 1.1.3
       is-subdir: 1.2.0
       micromatch: 4.0.5
       spawndamnit: 2.0.0
     dev: true
 
-  /@changesets/logger@0.0.5:
-    resolution: {integrity: sha512-gJyZHomu8nASHpaANzc6bkQMO9gU/ib20lqew1rVx753FOxffnCrJlGIeQVxNWCqM+o6OOleCo/ivL8UAO5iFw==}
+  /@changesets/logger@0.1.0:
+    resolution: {integrity: sha512-pBrJm4CQm9VqFVwWnSqKEfsS2ESnwqwH+xR7jETxIErZcfd1u2zBSqrHbRHR7xjhSgep9x2PSKFKY//FAshA3g==}
     dependencies:
       chalk: 2.4.2
     dev: true
 
-  /@changesets/parse@0.3.16:
-    resolution: {integrity: sha512-127JKNd167ayAuBjUggZBkmDS5fIKsthnr9jr6bdnuUljroiERW7FBTDNnNVyJ4l69PzR57pk6mXQdtJyBCJKg==}
+  /@changesets/parse@0.4.0:
+    resolution: {integrity: sha512-TS/9KG2CdGXS27S+QxbZXgr8uPsP4yNJYb4BC2/NeFUj80Rni3TeD2qwWmabymxmrLo7JEsytXH1FbpKTbvivw==}
     dependencies:
-      '@changesets/types': 5.2.1
+      '@changesets/types': 6.0.0
       js-yaml: 3.14.1
     dev: true
 
-  /@changesets/pre@1.0.14:
-    resolution: {integrity: sha512-dTsHmxQWEQekHYHbg+M1mDVYFvegDh9j/kySNuDKdylwfMEevTeDouR7IfHNyVodxZXu17sXoJuf2D0vi55FHQ==}
+  /@changesets/pre@2.0.0:
+    resolution: {integrity: sha512-HLTNYX/A4jZxc+Sq8D1AMBsv+1qD6rmmJtjsCJa/9MSRybdxh0mjbTvE6JYZQ/ZiQ0mMlDOlGPXTm9KLTU3jyw==}
     dependencies:
       '@babel/runtime': 7.22.6
-      '@changesets/errors': 0.1.4
-      '@changesets/types': 5.2.1
+      '@changesets/errors': 0.2.0
+      '@changesets/types': 6.0.0
       '@manypkg/get-packages': 1.1.3
       fs-extra: 7.0.1
     dev: true
 
-  /@changesets/read@0.5.9:
-    resolution: {integrity: sha512-T8BJ6JS6j1gfO1HFq50kU3qawYxa4NTbI/ASNVVCBTsKquy2HYwM9r7ZnzkiMe8IEObAJtUVGSrePCOxAK2haQ==}
+  /@changesets/read@0.6.0:
+    resolution: {integrity: sha512-ZypqX8+/im1Fm98K4YcZtmLKgjs1kDQ5zHpc2U1qdtNBmZZfo/IBiG162RoP0CUF05tvp2y4IspH11PLnPxuuw==}
     dependencies:
       '@babel/runtime': 7.22.6
-      '@changesets/git': 2.0.0
-      '@changesets/logger': 0.0.5
-      '@changesets/parse': 0.3.16
-      '@changesets/types': 5.2.1
+      '@changesets/git': 3.0.0
+      '@changesets/logger': 0.1.0
+      '@changesets/parse': 0.4.0
+      '@changesets/types': 6.0.0
       chalk: 2.4.2
       fs-extra: 7.0.1
       p-filter: 2.1.0
@@ -406,15 +405,15 @@ packages:
     resolution: {integrity: sha512-LDQvVDv5Kb50ny2s25Fhm3d9QSZimsoUGBsUioj6MC3qbMUCuC8GPIvk/M6IvXx3lYhAs0lwWUQLb+VIEUCECw==}
     dev: true
 
-  /@changesets/types@5.2.1:
-    resolution: {integrity: sha512-myLfHbVOqaq9UtUKqR/nZA/OY7xFjQMdfgfqeZIBK4d0hA6pgxArvdv8M+6NUzzBsjWLOtvApv8YHr4qM+Kpfg==}
+  /@changesets/types@6.0.0:
+    resolution: {integrity: sha512-b1UkfNulgKoWfqyHtzKS5fOZYSJO+77adgL7DLRDr+/7jhChN+QcHnbjiQVOz/U+Ts3PGNySq7diAItzDgugfQ==}
     dev: true
 
-  /@changesets/write@0.2.3:
-    resolution: {integrity: sha512-Dbamr7AIMvslKnNYsLFafaVORx4H0pvCA2MHqgtNCySMe1blImEyAEOzDmcgKAkgz4+uwoLz7demIrX+JBr/Xw==}
+  /@changesets/write@0.3.0:
+    resolution: {integrity: sha512-slGLb21fxZVUYbyea+94uFiD6ntQW0M2hIKNznFizDhZPDgn2c/fv1UzzlW43RVzh1BEDuIqW6hzlJ1OflNmcw==}
     dependencies:
       '@babel/runtime': 7.22.6
-      '@changesets/types': 5.2.1
+      '@changesets/types': 6.0.0
       fs-extra: 7.0.1
       human-id: 1.0.2
       prettier: 2.8.8
@@ -1065,20 +1064,20 @@ packages:
       - supports-color
     dev: true
 
-  /@melt-ui/pp@0.1.4(@melt-ui/svelte@0.64.0)(svelte@4.2.3):
+  /@melt-ui/pp@0.1.4(@melt-ui/svelte@0.64.1)(svelte@4.2.3):
     resolution: {integrity: sha512-zR+Kl3CZJPJBHW8V7YcdQCMI/dVcnW9Ct3yGbVaIywYVStVRS7F9uEDOea3xLLT2WTGodQePzPlUn53yKFu87g==}
     engines: {pnpm: '>=8.6.3'}
     peerDependencies:
       '@melt-ui/svelte': '>= 0.29.0'
       svelte: ^3.55.0 || ^4.0.0 || ^5.0.0-next.1
     dependencies:
-      '@melt-ui/svelte': 0.64.0(svelte@4.2.3)
+      '@melt-ui/svelte': 0.64.1(svelte@4.2.3)
       estree-walker: 3.0.3
       svelte: 4.2.3
     dev: true
 
-  /@melt-ui/svelte@0.64.0(svelte@4.2.3):
-    resolution: {integrity: sha512-68VJ+Q+PQ6gziDVp0u96MfPe4hGYP/cHtWrFGJAQ5+XFYwk+vkL3emWAK9GXIeZ0duToecEC2W1tlkEj1Zai0A==}
+  /@melt-ui/svelte@0.64.1(svelte@4.2.3):
+    resolution: {integrity: sha512-53c+8fIIfwXt8SzkwoywcILaX2zHEES3Z6jVw17RL3WDH8ebsG+iCeEtQDzXCfyRyiBWm01zVqK1gvHZfQ3Kew==}
     peerDependencies:
       svelte: '>=3 <5'
     dependencies:
@@ -1616,12 +1615,6 @@ packages:
       '@types/unist': 3.0.0
     dev: true
 
-  /@types/is-ci@3.0.0:
-    resolution: {integrity: sha512-Q0Op0hdWbYd1iahB+IFNQcWXFq4O0Q5MwQP7uN0souuQ4rPg1vEYcnIOfr1gY+M+6rc8FGoRaBO1mOOvL29sEQ==}
-    dependencies:
-      ci-info: 3.8.0
-    dev: true
-
   /@types/istanbul-lib-coverage@2.0.5:
     resolution: {integrity: sha512-zONci81DZYCZjiLe0r6equvZut0b+dBRPBN5kBDjsONnutYNtJMoWQ9uR2RkL1gLG9NMTzvf+29e5RFfPbeKhQ==}
     dev: true
@@ -3958,13 +3951,6 @@ packages:
     engines: {node: '>= 0.4'}
     dev: true
 
-  /is-ci@3.0.1:
-    resolution: {integrity: sha512-ZYvCgrefwqoQ6yTyYUbQu64HsITZ3NfKX1lzaEYdkTDcfKzzCI/wthRRYKkdjHKFVgNiXKAKm65Zo1pk2as/QQ==}
-    hasBin: true
-    dependencies:
-      ci-info: 3.8.0
-    dev: true
-
   /is-core-module@2.13.0:
     resolution: {integrity: sha512-Z7dk6Qo8pOCp3l4tsX2C5ZVas4V+UxwQodwZhLopL91TX8UyyHEXafPcyoeeWuLrwzHcr3igO78wNLwHJHsMCQ==}
     dependencies:
@@ -5442,8 +5428,8 @@ packages:
     engines: {node: ^14 || ^16 || >=18}
     hasBin: true
 
-  /nanoid@5.0.3:
-    resolution: {integrity: sha512-I7X2b22cxA4LIHXPSqbBCEQSL+1wv8TuoefejsX4HFWyC6jc5JG7CEaxOltiKjc1M+YCS2YkrZZcj4+dytw9GA==}
+  /nanoid@5.0.4:
+    resolution: {integrity: sha512-vAjmBf13gsmhXSgBrtIclinISzFFy22WwCYoyilZlsrRXNIHSwgFQ1bEdjRwMT3aoadeIF6HMuDRlOxzfXV8ig==}
     engines: {node: ^18 || >=20}
     hasBin: true
     dev: false
diff --git a/src/components/demos/range-calendar-demo.svelte b/src/components/demos/range-calendar-demo.svelte
index 8e71a5734..c415fde62 100644
--- a/src/components/demos/range-calendar-demo.svelte
+++ b/src/components/demos/range-calendar-demo.svelte
@@ -1,13 +1,17 @@
 <script lang="ts">
-	import { RangeCalendar } from "$lib";
+	import { RangeCalendar, type DateRange } from "$lib";
 	import { cn } from "@/utils";
 	import { CaretRight, CaretLeft } from "phosphor-svelte";
+	let value: DateRange | undefined = undefined;
 </script>
 
+<div>start: {value?.start}</div>
+<div>end: {value?.end}</div>
 <RangeCalendar.Root
 	class="mt-6 rounded-15px border border-dark-10 bg-background p-[22px] shadow-card"
 	let:months
 	let:weekdays
+	bind:value
 	weekdayFormat="short"
 >
 	<RangeCalendar.Header class="flex items-center justify-between">
diff --git a/src/tests/helpers/calendar.ts b/src/tests/helpers/calendar.ts
new file mode 100644
index 000000000..78cb49e27
--- /dev/null
+++ b/src/tests/helpers/calendar.ts
@@ -0,0 +1,7 @@
+export function getSelectedDays(calendar: HTMLElement) {
+	return Array.from(calendar.querySelectorAll<HTMLElement>("[data-selected]"));
+}
+
+export function getSelectedDay(calendar: HTMLElement) {
+	return calendar.querySelector<HTMLElement>("[data-selected]");
+}
diff --git a/src/tests/range-calendar/RangeCalendar.spec.ts b/src/tests/range-calendar/RangeCalendar.spec.ts
new file mode 100644
index 000000000..2317b7db2
--- /dev/null
+++ b/src/tests/range-calendar/RangeCalendar.spec.ts
@@ -0,0 +1,327 @@
+import { render } from "@testing-library/svelte";
+import userEvent from "@testing-library/user-event";
+import { axe } from "jest-axe";
+import { describe, it } from "vitest";
+import { testKbd as kbd } from "../utils.js";
+import RangeCalendarTest from "./RangeCalendarTest.svelte";
+import type { RangeCalendar } from "$lib";
+import { CalendarDate, CalendarDateTime, toZoned } from "@internationalized/date";
+import { getSelectedDays } from "../helpers/calendar.js";
+import { tick } from "svelte";
+
+const calendarDateRange = {
+	start: new CalendarDate(1980, 1, 20),
+	end: new CalendarDate(1980, 1, 25)
+};
+
+const calendarDateTimeRange = {
+	start: new CalendarDateTime(1980, 1, 20, 12, 30, 0, 0),
+	end: new CalendarDateTime(1980, 1, 25, 12, 30, 0, 0)
+};
+
+const zonedDateTimeRange = {
+	start: toZoned(calendarDateTimeRange.start, "America/New_York"),
+	end: toZoned(calendarDateTimeRange.end, "America/New_York")
+};
+
+const narrowWeekdays = ["S", "M", "T", "W", "T", "F", "S"];
+const shortWeekdays = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
+const longWeekdays = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
+// prettier-ignore
+const months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October" ,"November", "December"];
+
+function setup(props: RangeCalendar.Props = {}) {
+	const user = userEvent.setup();
+	const returned = render(RangeCalendarTest, { ...props });
+	const calendar = returned.getByTestId("calendar");
+	expect(calendar).toBeVisible();
+	return { ...returned, user, calendar };
+}
+
+describe("Calendar", () => {
+	it("has no accessibility violations", async () => {
+		const { container } = render(RangeCalendarTest);
+		expect(await axe(container)).toHaveNoViolations();
+	});
+
+	it("respects a default value if provided - `CalendarDate`", async () => {
+		const { calendar, getByTestId } = setup({ value: calendarDateRange });
+
+		const selectedDays = calendar.querySelectorAll<HTMLElement>("[data-selected]");
+		expect(selectedDays).toHaveLength(6);
+
+		const heading = getByTestId("heading");
+		expect(heading).toHaveTextContent("January 1980");
+	});
+
+	it("respects a default value if provided - `CalendarDateTime`", async () => {
+		const { calendar, getByTestId } = setup({ value: calendarDateTimeRange });
+
+		const selectedDays = calendar.querySelectorAll<HTMLElement>("[data-selected]");
+		expect(selectedDays).toHaveLength(6);
+
+		const heading = getByTestId("heading");
+		expect(heading).toHaveTextContent("January 1980");
+	});
+
+	it("respects a default value if provided - `ZonedDateTime`", async () => {
+		const { calendar, getByTestId } = setup({ value: zonedDateTimeRange });
+
+		const selectedDays = calendar.querySelectorAll<HTMLElement>("[data-selected]");
+		expect(selectedDays).toHaveLength(6);
+
+		const heading = getByTestId("heading");
+		expect(heading).toHaveTextContent("January 1980");
+	});
+
+	it("resets range on select when a range is already selected", async () => {
+		const { getByTestId, calendar, user } = setup({
+			value: calendarDateRange
+		});
+
+		const startValue = getByTestId("start-value");
+		const endValue = getByTestId("end-value");
+
+		expect(startValue).toHaveTextContent(String(calendarDateRange.start));
+		expect(endValue).toHaveTextContent(String(calendarDateRange.end));
+
+		const fifthDayInMonth = getByTestId("date-1-5");
+		await user.click(fifthDayInMonth);
+		expect(fifthDayInMonth).toHaveFocus();
+
+		const selectedDays = getSelectedDays(calendar);
+		expect(selectedDays).toHaveLength(1);
+		expect(startValue).toHaveTextContent(String(undefined));
+		expect(endValue).toHaveTextContent(String(undefined));
+		const seventhDayInMonth = getByTestId("date-1-7");
+		await user.click(seventhDayInMonth);
+		await tick();
+		expect(getSelectedDays(calendar)).toHaveLength(3);
+	});
+
+	it("navigates the months forward using the next button", async () => {
+		const { getByTestId, user } = setup({ value: calendarDateTimeRange });
+
+		const heading = getByTestId("heading");
+		const nextBtn = getByTestId("next-button");
+
+		for (const month of months) {
+			expect(heading).toHaveTextContent(month + " 1980");
+			await user.click(nextBtn);
+		}
+		expect(heading).toHaveTextContent("January 1981");
+	});
+
+	it("navigates the months backwards using the prev button", async () => {
+		const { getByTestId, user } = setup({ value: calendarDateTimeRange });
+
+		const heading = getByTestId("heading");
+		const prevBtn = getByTestId("prev-button");
+		const newMonths = [...months].reverse();
+		newMonths.pop();
+
+		expect(heading).toHaveTextContent("January 1980");
+		await user.click(prevBtn);
+
+		for (const month of newMonths) {
+			expect(heading).toHaveTextContent(month + " 1979");
+			await user.click(prevBtn);
+		}
+		expect(heading).toHaveTextContent("January 1979");
+	});
+
+	it("always renders six weeks when `fixedWeeks` is `true`", async () => {
+		const { getByTestId, calendar, user } = setup({
+			value: calendarDateTimeRange,
+			fixedWeeks: true
+		});
+
+		function getNumberOfWeeks() {
+			return calendar.querySelectorAll("[data-week]").length;
+		}
+
+		const nextButton = getByTestId("next-button");
+
+		for (let i = 0; i < 12; i++) {
+			expect(getNumberOfWeeks()).toBe(6);
+			await user.click(nextButton);
+		}
+
+		for (let i = 0; i < 24; i++) {
+			expect(getNumberOfWeeks()).toBe(6);
+			await user.click(nextButton);
+		}
+	});
+
+	it("should not allow navigation before the `minValue` (prev button)", async () => {
+		const { getByTestId, user } = setup({
+			value: calendarDateRange,
+			minValue: new CalendarDate(1979, 11, 25)
+		});
+
+		const prevBtn = getByTestId("prev-button");
+		await user.click(prevBtn);
+		const heading = getByTestId("heading");
+		expect(heading).toHaveTextContent("December 1979");
+		expect(prevBtn).not.toHaveAttribute("aria-disabled", "true");
+		expect(prevBtn).not.toHaveAttribute("data-disabled");
+
+		await user.click(prevBtn);
+		expect(heading).toHaveTextContent("November 1979");
+		expect(prevBtn).toHaveAttribute("aria-disabled", "true");
+		expect(prevBtn).toHaveAttribute("data-disabled");
+
+		await user.click(prevBtn);
+		expect(heading).toHaveTextContent("November 1979");
+	});
+
+	it("should not allow navigation after the `maxValue` (next button)", async () => {
+		const { getByTestId, user } = setup({
+			value: calendarDateRange,
+			maxValue: new CalendarDate(1980, 3, 25)
+		});
+
+		const nextBtn = getByTestId("next-button");
+		await user.click(nextBtn);
+		const heading = getByTestId("heading");
+		expect(heading).toHaveTextContent("February 1980");
+		expect(nextBtn).not.toHaveAttribute("aria-disabled", "true");
+		expect(nextBtn).not.toHaveAttribute("data-disabled");
+
+		await user.click(nextBtn);
+		expect(heading).toHaveTextContent("March 1980");
+		expect(nextBtn).toHaveAttribute("aria-disabled", "true");
+		expect(nextBtn).toHaveAttribute("data-disabled");
+
+		await user.click(nextBtn);
+		expect(heading).toHaveTextContent("March 1980");
+	});
+
+	it("does not navigate after `maxValue` (with keyboard)", async () => {
+		const { getByTestId, user } = setup({
+			value: calendarDateRange,
+			maxValue: new CalendarDate(1980, 3, 31)
+		});
+
+		const firstDayInMonth = getByTestId("date-1-1");
+		firstDayInMonth.focus();
+		expect(firstDayInMonth).toHaveFocus();
+
+		const heading = getByTestId("heading");
+		expect(heading).toHaveTextContent("January 1980");
+
+		// five keypresses to February 1980
+		await user.keyboard(kbd.ARROW_DOWN);
+		expect(getByTestId("date-1-8")).toHaveFocus();
+		await user.keyboard(kbd.ARROW_DOWN);
+		expect(getByTestId("date-1-15")).toHaveFocus();
+		await user.keyboard(kbd.ARROW_DOWN);
+		expect(getByTestId("date-1-22")).toHaveFocus();
+		await user.keyboard(kbd.ARROW_DOWN);
+		expect(getByTestId("date-1-29")).toHaveFocus();
+		await user.keyboard(kbd.ARROW_DOWN);
+		expect(getByTestId("date-2-5")).toHaveFocus();
+		expect(heading).toHaveTextContent("February 1980");
+
+		// four keypresses to March 1980
+		await user.keyboard(kbd.ARROW_DOWN);
+		expect(getByTestId("date-2-12")).toHaveFocus();
+		await user.keyboard(kbd.ARROW_DOWN);
+		expect(getByTestId("date-2-19")).toHaveFocus();
+		await user.keyboard(kbd.ARROW_DOWN);
+		expect(getByTestId("date-2-26")).toHaveFocus();
+		await user.keyboard(kbd.ARROW_DOWN);
+		expect(getByTestId("date-3-4")).toHaveFocus();
+		expect(heading).toHaveTextContent("March 1980");
+
+		// four keypresses to April 1980
+		await user.keyboard(kbd.ARROW_DOWN);
+		expect(getByTestId("date-3-11")).toHaveFocus();
+		await user.keyboard(kbd.ARROW_DOWN);
+		expect(getByTestId("date-3-18")).toHaveFocus();
+		await user.keyboard(kbd.ARROW_DOWN);
+		expect(getByTestId("date-3-25")).toHaveFocus();
+		await user.keyboard(kbd.ARROW_DOWN);
+		expect(getByTestId("date-3-25")).toHaveFocus();
+		expect(heading).toHaveTextContent("March 1980");
+	});
+
+	it("does not navigate before `minValue` (with keyboard)", async () => {
+		const { getByTestId, user } = setup({
+			value: calendarDateRange,
+			minValue: new CalendarDate(1979, 12, 1)
+		});
+
+		const firstDayInMonth = getByTestId("date-1-1");
+		firstDayInMonth.focus();
+		expect(firstDayInMonth).toHaveFocus();
+
+		const heading = getByTestId("heading");
+		expect(heading).toHaveTextContent("January 1980");
+
+		// one keypress to get to December 1979
+		await user.keyboard(kbd.ARROW_UP);
+		expect(getByTestId("date-12-25")).toHaveFocus();
+		expect(heading).toHaveTextContent("December 1979");
+
+		// four keypresses to November 1979
+		await user.keyboard(kbd.ARROW_UP);
+		expect(getByTestId("date-12-18")).toHaveFocus();
+		await user.keyboard(kbd.ARROW_UP);
+		expect(getByTestId("date-12-11")).toHaveFocus();
+		await user.keyboard(kbd.ARROW_UP);
+		expect(getByTestId("date-12-4")).toHaveFocus();
+		await user.keyboard(kbd.ARROW_UP);
+		expect(getByTestId("date-12-4")).toHaveFocus();
+		expect(heading).toHaveTextContent("December 1979");
+	});
+
+	it("handles unavailable dates appropriately", async () => {
+		const { getByTestId, user } = setup({
+			placeholder: calendarDateRange.start,
+			isDateUnavailable: (date) => {
+				return date.day === 3;
+			}
+		});
+
+		const thirdDayInMonth = getByTestId("date-1-3");
+		expect(thirdDayInMonth).toHaveTextContent("3");
+		expect(thirdDayInMonth).toHaveAttribute("data-unavailable");
+		expect(thirdDayInMonth).toHaveAttribute("aria-disabled", "true");
+		await user.click(thirdDayInMonth);
+		expect(thirdDayInMonth).not.toHaveAttribute("data-selected");
+	});
+
+	it("formats the weekday labels correctly - `'narrow'`", async () => {
+		const { getByTestId } = setup({
+			placeholder: calendarDateRange.start,
+			weekdayFormat: "narrow"
+		});
+		for (const [i, weekday] of narrowWeekdays.entries()) {
+			const weekdayEl = getByTestId(`weekday-1-${i}`);
+			expect(weekdayEl).toHaveTextContent(weekday);
+		}
+	});
+
+	it("formats the weekday labels correctly - `'short'`", async () => {
+		const { getByTestId } = setup({
+			placeholder: calendarDateRange.start,
+			weekdayFormat: "short"
+		});
+		for (const [i, weekday] of shortWeekdays.entries()) {
+			const weekdayEl = getByTestId(`weekday-1-${i}`);
+			expect(weekdayEl).toHaveTextContent(weekday);
+		}
+	});
+
+	it("formats the weekday labels correctly - `'long'`", async () => {
+		const { getByTestId } = setup({
+			placeholder: calendarDateRange.start,
+			weekdayFormat: "long"
+		});
+		for (const [i, weekday] of longWeekdays.entries()) {
+			const weekdayEl = getByTestId(`weekday-1-${i}`);
+			expect(weekdayEl).toHaveTextContent(weekday);
+		}
+	});
+});
diff --git a/src/tests/range-calendar/RangeCalendarTest.svelte b/src/tests/range-calendar/RangeCalendarTest.svelte
new file mode 100644
index 000000000..f04bfa854
--- /dev/null
+++ b/src/tests/range-calendar/RangeCalendarTest.svelte
@@ -0,0 +1,68 @@
+<script lang="ts">
+	import { RangeCalendar } from "$lib";
+
+	type $$Props = RangeCalendar.Props;
+
+	export let placeholder: $$Props["placeholder"] = undefined;
+	export let value: $$Props["value"] = undefined;
+</script>
+
+<main>
+	<div data-testid="start-value">{value?.start}</div>
+	<div data-testid="end-value">{value?.end}</div>
+
+	<RangeCalendar.Root
+		let:months
+		let:weekdays
+		bind:placeholder
+		bind:value
+		{...$$restProps}
+		data-testid="calendar"
+	>
+		<RangeCalendar.Header data-testid="header">
+			<RangeCalendar.PrevButton data-testid="prev-button"
+				>Prev</RangeCalendar.PrevButton
+			>
+			<RangeCalendar.Heading data-testid="heading" />
+			<RangeCalendar.NextButton data-testid="next-button"
+				>Next</RangeCalendar.NextButton
+			>
+		</RangeCalendar.Header>
+		<div>
+			{#each months as month}
+				{@const m = month.value.month}
+				<RangeCalendar.Grid data-testid="grid-{m}">
+					<RangeCalendar.GridHead data-testid="grid-head-{m}">
+						<RangeCalendar.GridRow data-testid="grid-row-{m}">
+							{#each weekdays as day, i}
+								<RangeCalendar.HeadCell data-testid="weekday-{m}-{i}">
+									{day}
+								</RangeCalendar.HeadCell>
+							{/each}
+						</RangeCalendar.GridRow>
+					</RangeCalendar.GridHead>
+					<RangeCalendar.GridBody data-testid="grid-body-{m}">
+						{#each month.weeks as weekDates, i}
+							<RangeCalendar.GridRow data-testid="grid-row-{m}-{i}" data-week>
+								{#each weekDates as date, d}
+									<RangeCalendar.Cell
+										{date}
+										data-testid="cell-{date.month}-{d}"
+									>
+										<RangeCalendar.Date
+											{date}
+											month={month.value}
+											data-testid="date-{date.month}-{date.day}"
+										>
+											{date.day}
+										</RangeCalendar.Date>
+									</RangeCalendar.Cell>
+								{/each}
+							</RangeCalendar.GridRow>
+						{/each}
+					</RangeCalendar.GridBody>
+				</RangeCalendar.Grid>
+			{/each}
+		</div>
+	</RangeCalendar.Root>
+</main>

From 858a8568fc1a12cec09ec6a815ea6ddaac35987a Mon Sep 17 00:00:00 2001
From: Hunter Johnston <johnstonhuntera@gmail.com>
Date: Sun, 3 Dec 2023 13:30:21 -0500
Subject: [PATCH 209/217] refactor: calendar tests

---
 src/tests/calendar/Calendar.spec.ts | 48 +++++++++++++----------------
 src/tests/helpers/calendar.ts       |  2 +-
 2 files changed, 22 insertions(+), 28 deletions(-)

diff --git a/src/tests/calendar/Calendar.spec.ts b/src/tests/calendar/Calendar.spec.ts
index 987d952d4..9f2b093c9 100644
--- a/src/tests/calendar/Calendar.spec.ts
+++ b/src/tests/calendar/Calendar.spec.ts
@@ -7,6 +7,7 @@ import CalendarTest from "./CalendarTest.svelte";
 import type { Calendar } from "$lib";
 import { CalendarDate, CalendarDateTime, toZoned } from "@internationalized/date";
 import CalendarMultiTest from "./CalendarMultiTest.svelte";
+import { getSelectedDay, getSelectedDays } from "../helpers/calendar.js";
 
 const calendarDate = new CalendarDate(1980, 1, 20);
 const calendarDateTime = new CalendarDateTime(1980, 1, 20, 12, 30, 0, 0);
@@ -43,27 +44,21 @@ describe("Calendar", () => {
 	it("respects a default value if provided - `CalendarDate`", async () => {
 		const { calendar, getByTestId } = setup({ value: calendarDate });
 
-		const selectedDay = calendar.querySelector("[data-selected]");
-		expect(selectedDay).toHaveTextContent(String(calendarDate.day));
-
+		expect(getSelectedDay(calendar)).toHaveTextContent(String(calendarDate.day));
 		expect(getByTestId("heading")).toHaveTextContent("January 1980");
 	});
 
 	it("respects a default value if provided - `CalendarDateTime`", async () => {
 		const { calendar, getByTestId } = setup({ value: calendarDateTime });
 
-		const selectedDay = calendar.querySelector("[data-selected]");
-		expect(selectedDay).toHaveTextContent(String(calendarDateTime.day));
-
+		expect(getSelectedDay(calendar)).toHaveTextContent(String(calendarDateTime.day));
 		expect(getByTestId("heading")).toHaveTextContent("January 1980");
 	});
 
 	it("respects a default value if provided - `ZonedDateTime`", async () => {
 		const { calendar, getByTestId } = setup({ value: zonedDateTime });
 
-		const selectedDay = calendar.querySelector("[data-selected]");
-		expect(selectedDay).toHaveTextContent(String(zonedDateTime.day));
-
+		expect(getSelectedDay(calendar)).toHaveTextContent(String(zonedDateTime.day));
 		expect(getByTestId("heading")).toHaveTextContent("January 1980");
 	});
 
@@ -157,7 +152,7 @@ describe("Calendar", () => {
 		const value = getByTestId("value");
 		expect(value).toHaveTextContent("1980-01-20");
 
-		const selectedDay = calendar.querySelector("[data-selected]") as HTMLElement;
+		const selectedDay = getSelectedDay(calendar);
 		expect(selectedDay).toHaveTextContent(String(calendarDate.day));
 
 		await user.click(selectedDay);
@@ -172,7 +167,7 @@ describe("Calendar", () => {
 		const value = getByTestId("value");
 		expect(value).toHaveTextContent("1980-01-20");
 
-		const selectedDay = calendar.querySelector("[data-selected]") as HTMLElement;
+		const selectedDay = getSelectedDay(calendar);
 		expect(selectedDay).toHaveTextContent(String(calendarDate.day));
 		selectedDay.focus();
 		await user.keyboard(key);
@@ -209,7 +204,7 @@ describe("Calendar", () => {
 	it("displays multiple months when `numberOfMonths` is greater than 1", async () => {
 		const { getByTestId, calendar, user } = setup({ value: calendarDateTime, numberOfMonths: 2 });
 
-		const selectedDay = calendar.querySelector("[data-selected]") as HTMLElement;
+		const selectedDay = getSelectedDay(calendar);
 		expect(selectedDay).toHaveTextContent(String(calendarDateTime.day));
 
 		const heading = getByTestId("heading");
@@ -248,7 +243,7 @@ describe("Calendar", () => {
 			pagedNavigation: true
 		});
 
-		const selectedDay = calendar.querySelector("[data-selected]") as HTMLElement;
+		const selectedDay = getSelectedDay(calendar);
 		expect(selectedDay).toHaveTextContent(String(calendarDateTime.day));
 
 		const heading = getByTestId("heading");
@@ -308,14 +303,14 @@ describe("Calendar", () => {
 			value: calendarDate
 		});
 
-		const selectedDate = calendar.querySelector("[data-selected]") as HTMLElement;
+		const selectedDate = getSelectedDay(calendar);
 		expect(selectedDate).toHaveTextContent("20");
-		expect(calendar.querySelectorAll("[data-selected]").length).toBe(1);
+		expect(getSelectedDays(calendar).length).toBe(1);
 
 		const addDayBtn = getByTestId("add-day");
 		await user.click(addDayBtn);
-		expect(calendar.querySelector("[data-selected]")).toHaveTextContent("21");
-		expect(calendar.querySelectorAll("[data-selected]").length).toBe(1);
+		expect(getSelectedDay(calendar)).toHaveTextContent("21");
+		expect(getSelectedDays(calendar).length).toBe(1);
 	});
 
 	it("should change view when controlled placeholder changes", async () => {
@@ -569,7 +564,7 @@ describe("Calendar - `multiple`", () => {
 			value: [d1, d2]
 		});
 
-		const selectedDays = calendar.querySelectorAll("[data-selected]");
+		const selectedDays = getSelectedDays(calendar);
 		expect(selectedDays.length).toBe(2);
 		expect(selectedDays[0]).toHaveTextContent(String(d1.day));
 		expect(selectedDays[1]).toHaveTextContent(String(d2.day));
@@ -583,7 +578,7 @@ describe("Calendar - `multiple`", () => {
 			value: [d1, d2]
 		});
 
-		const selectedDays = calendar.querySelectorAll("[data-selected]");
+		const selectedDays = getSelectedDays(calendar);
 		expect(selectedDays.length).toBe(2);
 		expect(selectedDays[0]).toHaveTextContent(String(d1.day));
 		expect(selectedDays[1]).toHaveTextContent(String(d2.day));
@@ -597,7 +592,7 @@ describe("Calendar - `multiple`", () => {
 			value: [d1, d2]
 		});
 
-		const selectedDays = calendar.querySelectorAll("[data-selected]");
+		const selectedDays = getSelectedDays(calendar);
 		expect(selectedDays.length).toBe(2);
 		expect(selectedDays[0]).toHaveTextContent(String(d1.day));
 		expect(selectedDays[1]).toHaveTextContent(String(d2.day));
@@ -611,7 +606,7 @@ describe("Calendar - `multiple`", () => {
 			value: [d1, d2]
 		});
 
-		const selectedDays = calendar.querySelectorAll("[data-selected]");
+		const selectedDays = getSelectedDays(calendar);
 		expect(selectedDays.length).toBe(1);
 		expect(getByTestId("heading")).toHaveTextContent("May 1980");
 	});
@@ -623,10 +618,10 @@ describe("Calendar - `multiple`", () => {
 		const { calendar, user } = setupMulti({
 			value: [d1, d2]
 		});
-		const selectedDays = calendar.querySelectorAll<HTMLElement>("[data-selected]");
+		const selectedDays = getSelectedDays(calendar);
 		expect(selectedDays.length).toBe(2);
 		await user.click(selectedDays[0]);
-		expect(calendar.querySelectorAll("[data-selected]").length).toBe(1);
+		expect(getSelectedDays(calendar).length).toBe(1);
 	});
 
 	it("prevents deselection when only one date is selected and `preventDeselect` is `true`", async () => {
@@ -636,12 +631,11 @@ describe("Calendar - `multiple`", () => {
 			value: [d1],
 			preventDeselect: true
 		});
-		const selectedDays = calendar.querySelectorAll("[data-selected]");
-		expect(selectedDays.length).toBe(1);
+		const selectedDays = getSelectedDays(calendar);
 		await user.click(selectedDays[0]);
-		const selectedDays2 = calendar.querySelectorAll("[data-selected]");
+		const selectedDays2 = getSelectedDays(calendar);
 		expect(selectedDays2.length).toBe(1);
 		await user.click(selectedDays2[0]);
-		expect(calendar.querySelectorAll("[data-selected]").length).toBe(1);
+		expect(getSelectedDays(calendar).length).toBe(1);
 	});
 });
diff --git a/src/tests/helpers/calendar.ts b/src/tests/helpers/calendar.ts
index 78cb49e27..63972c16d 100644
--- a/src/tests/helpers/calendar.ts
+++ b/src/tests/helpers/calendar.ts
@@ -3,5 +3,5 @@ export function getSelectedDays(calendar: HTMLElement) {
 }
 
 export function getSelectedDay(calendar: HTMLElement) {
-	return calendar.querySelector<HTMLElement>("[data-selected]");
+	return calendar.querySelector<HTMLElement>("[data-selected]") as HTMLElement;
 }

From 39c8b83b76b5809a2ff611c12370ac16fb803739 Mon Sep 17 00:00:00 2001
From: Hunter Johnston <johnstonhuntera@gmail.com>
Date: Sun, 3 Dec 2023 14:38:44 -0500
Subject: [PATCH 210/217] tests: date field

---
 src/tests/date-field/DateField.spec.ts    | 542 ++++++++++++++++++++++
 src/tests/date-field/DateFieldTest.svelte |  26 ++
 src/tests/utils.ts                        |   7 +-
 3 files changed, 574 insertions(+), 1 deletion(-)
 create mode 100644 src/tests/date-field/DateField.spec.ts
 create mode 100644 src/tests/date-field/DateFieldTest.svelte

diff --git a/src/tests/date-field/DateField.spec.ts b/src/tests/date-field/DateField.spec.ts
new file mode 100644
index 000000000..01e4734f5
--- /dev/null
+++ b/src/tests/date-field/DateField.spec.ts
@@ -0,0 +1,542 @@
+import { render } from "@testing-library/svelte";
+import userEvent from "@testing-library/user-event";
+import { axe } from "jest-axe";
+import { describe, it } from "vitest";
+import { testKbd as kbd } from "../utils.js";
+import DateFieldTest from "./DateFieldTest.svelte";
+import type { DateField } from "$lib";
+import {
+	CalendarDate,
+	CalendarDateTime,
+	toZoned,
+	type TimeFields,
+	type DateFields,
+	now,
+	parseAbsoluteToLocal
+} from "@internationalized/date";
+
+const calendarDate = new CalendarDate(1980, 1, 20);
+const calendarDateTime = new CalendarDateTime(1980, 1, 20, 12, 30, 0, 0);
+const zonedDateTime = toZoned(calendarDateTime, "America/New_York");
+
+function setup(props: DateField.Props = {}) {
+	const user = userEvent.setup();
+	const returned = render(DateFieldTest, { ...props });
+	const month = returned.getByTestId("month");
+	const day = returned.getByTestId("day");
+	const year = returned.getByTestId("year");
+	const value = returned.getByTestId("value");
+	const input = returned.getByTestId("input");
+	const label = returned.getByTestId("label");
+
+	return { ...returned, user, month, day, year, value, input, label };
+}
+
+describe("Date Field", () => {
+	it("has no axe violations", async () => {
+		const { container } = setup();
+		expect(await axe(container)).toHaveNoViolations();
+	});
+
+	it("populates segment with value - `CalendarDate`", async () => {
+		const { month, day, year, value } = setup({
+			value: calendarDate
+		});
+
+		expect(month).toHaveTextContent(String(calendarDate.month));
+		expect(day).toHaveTextContent(String(calendarDate.day));
+		expect(year).toHaveTextContent(String(calendarDate.year));
+		expect(value).toHaveTextContent(calendarDate.toString());
+	});
+
+	it("populates segment with value - `CalendarDateTime`", async () => {
+		const { month, day, year, value, getByTestId } = setup({
+			value: calendarDateTime
+		});
+
+		expect(month).toHaveTextContent(String(calendarDateTime.month));
+		expect(day).toHaveTextContent(String(calendarDateTime.day));
+		expect(year).toHaveTextContent(String(calendarDateTime.year));
+		expect(getByTestId("hour")).toHaveTextContent(String(calendarDateTime.hour));
+		expect(getByTestId("minute")).toHaveTextContent(String(calendarDateTime.minute));
+		expect(value).toHaveTextContent(calendarDate.toString());
+	});
+
+	it("populates segment with value - `ZonedDateTime`", async () => {
+		const { month, day, year, value, getByTestId } = setup({
+			value: zonedDateTime
+		});
+
+		expect(month).toHaveTextContent(String(zonedDateTime.month));
+		expect(day).toHaveTextContent(String(zonedDateTime.day));
+		expect(year).toHaveTextContent(String(zonedDateTime.year));
+		expect(getByTestId("hour")).toHaveTextContent(String(zonedDateTime.hour));
+		expect(getByTestId("minute")).toHaveTextContent(String(zonedDateTime.minute));
+		expect(getByTestId("dayPeriod")).toHaveTextContent("PM");
+		expect(getByTestId("timeZoneName")).toHaveTextContent("EST");
+		expect(value).toHaveTextContent(calendarDate.toString());
+	});
+
+	it("changes segment positioning based on `locale`", async () => {
+		const { input } = setup({
+			locale: "en-UK"
+		});
+
+		const firstSeg = input.children[0];
+		// skipping the literal slashes here
+		const secondSeg = input.children[2];
+		const thirdSeg = input.children[4];
+
+		expect(firstSeg).toHaveTextContent("dd");
+		expect(secondSeg).toHaveTextContent("mm");
+		expect(thirdSeg).toHaveTextContent("yyyy");
+	});
+
+	it("doesnt show the day period for locales that don't use them", async () => {
+		const { queryByTestId } = setup({
+			locale: "en-UK",
+			value: calendarDateTime
+		});
+		expect(queryByTestId("dayPeriod")).toBeNull();
+	});
+
+	it("does show the day period for locales that do use them", async () => {
+		const { queryByTestId } = setup({
+			value: calendarDateTime
+		});
+		expect(queryByTestId("dayPeriod")).not.toBeNull();
+	});
+
+	it("focuses first segment on label click", async () => {
+		const { user, label, input } = setup();
+		await user.click(label);
+		expect(input.firstChild).toHaveFocus();
+	});
+
+	it("focuses segments on click", async () => {
+		const { user, day, month, year, getByTestId } = setup({
+			value: zonedDateTime
+		});
+
+		const hour = getByTestId("hour");
+		const minute = getByTestId("minute");
+		const dayPeriod = getByTestId("dayPeriod");
+		const timeZoneName = getByTestId("timeZoneName");
+		const segments = [day, month, year, hour, minute, dayPeriod, timeZoneName];
+
+		for (const segment of segments) {
+			await user.click(segment);
+			expect(segment).toHaveFocus();
+		}
+	});
+
+	it("incremenets segment on arrow up", async () => {
+		const { user, day, month, year, getByTestId } = setup({
+			value: zonedDateTime,
+			granularity: "second"
+		});
+
+		const hour = getByTestId("hour");
+		const minute = getByTestId("minute");
+		const second = getByTestId("second");
+
+		function cycle(segment: keyof TimeFields | keyof DateFields) {
+			return String(zonedDateTime.cycle(segment, 1)[segment]);
+		}
+
+		await user.click(day);
+		await user.keyboard(kbd.ARROW_UP);
+		expect(day).toHaveTextContent(cycle("day"));
+		await user.click(month);
+		await user.keyboard(kbd.ARROW_UP);
+		expect(month).toHaveTextContent(cycle("month"));
+		await user.click(year);
+		await user.keyboard(kbd.ARROW_UP);
+		expect(year).toHaveTextContent(cycle("year"));
+		await user.click(hour);
+		await user.keyboard(kbd.ARROW_UP);
+		expect(hour).toHaveTextContent("1");
+		await user.click(minute);
+		await user.keyboard(kbd.ARROW_UP);
+		expect(minute).toHaveTextContent(cycle("minute"));
+		await user.click(second);
+		await user.keyboard(kbd.ARROW_UP);
+		expect(second).toHaveTextContent(cycle("second"));
+	});
+
+	it("decrements segment on arrow down", async () => {
+		const { user, day, month, year, getByTestId } = setup({
+			value: zonedDateTime,
+			granularity: "second"
+		});
+
+		const hour = getByTestId("hour");
+		const minute = getByTestId("minute");
+		const second = getByTestId("second");
+
+		function cycle(segment: keyof TimeFields | keyof DateFields) {
+			return String(zonedDateTime.cycle(segment, -1)[segment]);
+		}
+
+		await user.click(day);
+		await user.keyboard(kbd.ARROW_DOWN);
+		expect(day).toHaveTextContent(cycle("day"));
+		await user.click(month);
+		await user.keyboard(kbd.ARROW_DOWN);
+		expect(month).toHaveTextContent(cycle("month"));
+		await user.click(year);
+		await user.keyboard(kbd.ARROW_DOWN);
+		expect(year).toHaveTextContent(cycle("year"));
+		await user.click(hour);
+		await user.keyboard(kbd.ARROW_DOWN);
+		expect(hour).toHaveTextContent(cycle("hour"));
+		await user.click(minute);
+		await user.keyboard(kbd.ARROW_DOWN);
+		expect(minute).toHaveTextContent(cycle("minute"));
+		await user.click(second);
+		await user.keyboard(kbd.ARROW_DOWN);
+		expect(second).toHaveTextContent(cycle("second"));
+	});
+
+	it("navigates segments using the arrow keys", async () => {
+		const { getByTestId, user, day, month, year } = setup({
+			value: zonedDateTime,
+			granularity: "second"
+		});
+		const { hour, minute, second, dayPeriod, timeZoneName } = getTimeSegments(getByTestId);
+
+		const segments = [month, day, year, hour, minute, second, dayPeriod, timeZoneName];
+
+		await user.click(month);
+
+		for (const seg of segments) {
+			expect(seg).toHaveFocus();
+			await user.keyboard(kbd.ARROW_RIGHT);
+		}
+		expect(timeZoneName).toHaveFocus();
+
+		for (const seg of segments.reverse()) {
+			expect(seg).toHaveFocus();
+			await user.keyboard(kbd.ARROW_LEFT);
+		}
+		expect(month).toHaveFocus();
+	});
+
+	it("navigates the segments using tab", async () => {
+		const { getByTestId, user, day, month, year } = setup({
+			value: zonedDateTime,
+			granularity: "second"
+		});
+		const { hour, minute, second, dayPeriod, timeZoneName } = getTimeSegments(getByTestId);
+
+		const segments = [month, day, year, hour, minute, second, dayPeriod];
+
+		await user.click(month);
+
+		for (const seg of segments) {
+			expect(seg).toHaveFocus();
+			await user.keyboard(kbd.TAB);
+		}
+		expect(timeZoneName).toHaveFocus();
+
+		for (const seg of segments.reverse()) {
+			await user.keyboard(kbd.SHIFT_TAB);
+			expect(seg).toHaveFocus();
+		}
+	});
+
+	it("prevents interaction when `disabled`", async () => {
+		const { user, getByTestId, day, month, year } = setup({
+			value: zonedDateTime,
+			granularity: "second",
+			disabled: true
+		});
+
+		const { hour, minute, second, dayPeriod, timeZoneName } = getTimeSegments(getByTestId);
+
+		const segments = [month, day, year, hour, minute, second, dayPeriod, timeZoneName];
+
+		for (const seg of segments) {
+			await user.click(seg);
+			expect(seg).not.toHaveFocus();
+		}
+	});
+
+	it("prevents modification when `readonly`", async () => {
+		const { user, getByTestId, day, month, year } = setup({
+			value: zonedDateTime,
+			granularity: "second",
+			readonly: true
+		});
+		const { hour, minute, second } = getTimeSegments(getByTestId);
+		const segments = [month, day, year, hour, minute, second];
+
+		for (const segment of segments) {
+			await user.click(segment);
+			expect(segment).toHaveFocus();
+			await user.keyboard(kbd.ARROW_UP);
+			expect(segment).toHaveTextContent(
+				String(zonedDateTime[segment.dataset.segment as keyof TimeFields | keyof DateFields])
+			);
+		}
+	});
+
+	it("correctly marks the field as invalid if the value is invalid", async () => {
+		const { getByTestId, day, month, year, input, label, user } = setup({
+			granularity: "second",
+			isDateUnavailable: (date) => date.day === 19,
+			value: zonedDateTime
+		});
+
+		const { hour, minute, second, dayPeriod, timeZoneName } = getTimeSegments(getByTestId);
+		const segments = [month, day, year, hour, minute, second, dayPeriod, timeZoneName];
+
+		await user.click(month);
+		await user.keyboard(`{2}`);
+		expect(month).toHaveTextContent("2");
+		expect(day).toHaveFocus();
+		await user.keyboard(`{19}`);
+		expect(day).toHaveTextContent("19");
+		expect(year).toHaveFocus();
+		await user.keyboard(`{1111}`);
+		expect(year).toHaveTextContent("1111");
+
+		for (const seg of segments) {
+			expect(seg).toHaveAttribute("aria-invalid", "true");
+			expect(seg).toHaveAttribute("data-invalid");
+		}
+
+		expect(input).toHaveAttribute("data-invalid");
+		expect(label).toHaveAttribute("data-invalid");
+	});
+
+	it("adjusts the hour cycle with the `hourCycle` prop", async () => {
+		const { getByTestId, queryByTestId, user } = setup({
+			value: zonedDateTime,
+			hourCycle: 24
+		});
+
+		expect(queryByTestId("dayPeriod")).toBeNull();
+		const hour = getByTestId("hour");
+		expect(hour).toHaveTextContent("12");
+		await user.click(hour);
+		expect(hour).toHaveFocus();
+		await user.keyboard(kbd.ARROW_UP);
+		expect(hour).toHaveTextContent("13");
+	});
+
+	it("overrides the default displayed segments with the `granularity` prop - `'day'`", async () => {
+		const { queryByTestId, month, day, year } = setup({
+			value: calendarDateTime,
+			granularity: "day"
+		});
+
+		const nonDisplayedSegments = ["hour", "minute", "second", "dayPeriod"];
+		const displayedSegments = [month, day, year];
+		for (const seg of nonDisplayedSegments) {
+			expect(queryByTestId(seg)).toBeNull();
+		}
+
+		for (const seg of displayedSegments) {
+			expect(seg).toBeVisible();
+		}
+	});
+	it("overrides the default displayed segments with the `granularity` prop - `'minute'`", async () => {
+		const { queryByTestId, getByTestId, month, day, year } = setup({
+			value: calendarDateTime,
+			granularity: "minute"
+		});
+
+		const displayedSegments = [
+			month,
+			day,
+			year,
+			getByTestId("hour"),
+			getByTestId("minute"),
+			getByTestId("dayPeriod")
+		];
+
+		expect(queryByTestId("second")).toBeNull();
+
+		for (const seg of displayedSegments) {
+			expect(seg).toBeVisible();
+		}
+	});
+
+	it("changes the value when the dayPeriod segment is changed", async () => {
+		const { getByTestId, user, value } = setup({
+			value: calendarDateTime
+		});
+
+		expect(value).toHaveTextContent("1980-01-20T12:30");
+		const dayPeriod = getByTestId("dayPeriod");
+		expect(dayPeriod).toHaveTextContent("PM");
+
+		await user.click(dayPeriod);
+		expect(dayPeriod).toHaveFocus();
+		await user.keyboard(kbd.ARROW_UP);
+		expect(dayPeriod).toHaveTextContent("AM");
+		expect(value).toHaveTextContent("1980-01-20T00:30");
+	});
+
+	it("takes you all the way through the segment with spamming 3", async () => {
+		const { getByTestId, user, month, day, year } = setup({
+			value: zonedDateTime,
+			granularity: "second"
+		});
+
+		const { hour, minute, second, dayPeriod } = getTimeSegments(getByTestId);
+
+		await user.click(month);
+		await user.keyboard(`{3}`);
+		expect(day).toHaveFocus();
+		await user.keyboard(`{3}`);
+		await user.keyboard(`{3}`);
+		expect(year).toHaveFocus();
+		await user.keyboard(`{3}`);
+		await user.keyboard(`{3}`);
+		await user.keyboard(`{3}`);
+		await user.keyboard(`{3}`);
+		expect(hour).toHaveFocus();
+		await user.keyboard(`{3}`);
+		expect(minute).toHaveFocus();
+		await user.keyboard(`{3}`);
+		await user.keyboard(`{3}`);
+		expect(second).toHaveFocus();
+		await user.keyboard(`{3}`);
+		await user.keyboard(`{3}`);
+		expect(dayPeriod).toHaveFocus();
+	});
+
+	it("fully overwrites on first click and type - `month`", async () => {
+		const { user, month } = setup({
+			value: zonedDateTime,
+			granularity: "second"
+		});
+
+		await user.click(month);
+		expect(month).toHaveFocus();
+		expect(month).toHaveTextContent(String(zonedDateTime.month));
+		await user.keyboard(`{3}`);
+		expect(month).toHaveTextContent("3");
+	});
+
+	it("fully overwrites on first click and type - `day`", async () => {
+		const { user, day } = setup({
+			value: zonedDateTime,
+			granularity: "second"
+		});
+
+		await user.click(day);
+		expect(day).toHaveFocus();
+		expect(day).toHaveTextContent(String(zonedDateTime.day));
+		await user.keyboard(`{1}`);
+		expect(day).toHaveTextContent("1");
+	});
+
+	it("fully overwrites on first click and type - `year`", async () => {
+		const { user, year } = setup({
+			value: zonedDateTime,
+			granularity: "second"
+		});
+
+		await user.click(year);
+		expect(year).toHaveFocus();
+		expect(year).toHaveTextContent(String(zonedDateTime.year));
+		await user.keyboard(`{1}`);
+		expect(year).toHaveTextContent("1");
+	});
+
+	it("fully overwrites on first click and type - `hour`", async () => {
+		const { user, getByTestId } = setup({
+			value: zonedDateTime,
+			granularity: "second"
+		});
+		const hour = getByTestId("hour");
+
+		await user.click(hour);
+		expect(hour).toHaveFocus();
+		expect(hour).toHaveTextContent(String(zonedDateTime.hour));
+		await user.keyboard(`{1}`);
+		expect(hour).toHaveTextContent("1");
+	});
+
+	it("fully overwrites on first click and type - `minute`", async () => {
+		const { user, getByTestId } = setup({
+			value: zonedDateTime,
+			granularity: "second"
+		});
+		const minute = getByTestId("minute");
+
+		await user.click(minute);
+		expect(minute).toHaveFocus();
+		expect(minute).toHaveTextContent(String(zonedDateTime.minute));
+		await user.keyboard(`{1}`);
+		expect(minute).toHaveTextContent("1");
+	});
+
+	it("fully overwrites on first click and type - `second`", async () => {
+		const { user, getByTestId } = setup({
+			value: zonedDateTime,
+			granularity: "second"
+		});
+		const second = getByTestId("second");
+
+		await user.click(second);
+		expect(second).toHaveFocus();
+		expect(second).toHaveTextContent(String(zonedDateTime.second));
+		await user.keyboard(`{1}`);
+		expect(second).toHaveTextContent("1");
+	});
+
+	it("displays correct timezone with ZonedDateTime value - `now`", async () => {
+		const { getByTestId } = setup({
+			value: now("America/Los_Angeles")
+		});
+
+		const timeZone = getByTestId("timeZoneName");
+		if (isDaylightSavingsTime()) {
+			expect(timeZone).toHaveTextContent("PDT");
+		} else {
+			expect(timeZone).toHaveTextContent("PST");
+		}
+	});
+
+	it("displays correct timezone with ZonedDateTime value - absolute -> local", async () => {
+		const { getByTestId } = setup({
+			value: parseAbsoluteToLocal("2023-10-12T12:30:00Z")
+		});
+
+		const timeZone = getByTestId("timeZoneName");
+		expect(timeZone).toHaveTextContent(thisTimeZone("2023-10-12T12:30:00Z"));
+	});
+});
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+function getTimeSegments(getByTestId: (...args: any[]) => HTMLElement) {
+	return {
+		hour: getByTestId("hour"),
+		minute: getByTestId("minute"),
+		second: getByTestId("second"),
+		dayPeriod: getByTestId("dayPeriod"),
+		timeZoneName: getByTestId("timeZoneName")
+	};
+}
+
+function isDaylightSavingsTime(): boolean {
+	const now = new Date();
+	const january = new Date(now.getFullYear(), 0, 1);
+	const july = new Date(now.getFullYear(), 6, 1);
+	const timezoneOffset = now.getTimezoneOffset();
+	const isDaylightSavingsTime =
+		timezoneOffset < Math.max(january.getTimezoneOffset(), july.getTimezoneOffset());
+	return isDaylightSavingsTime;
+}
+
+function thisTimeZone(date: string): string {
+	const timezone =
+		Intl.DateTimeFormat(undefined, { timeZoneName: "short" })
+			.formatToParts(new Date(date))
+			.find((p) => p.type === "timeZoneName")?.value ?? "";
+	return timezone;
+}
diff --git a/src/tests/date-field/DateFieldTest.svelte b/src/tests/date-field/DateFieldTest.svelte
new file mode 100644
index 000000000..539f4af6a
--- /dev/null
+++ b/src/tests/date-field/DateFieldTest.svelte
@@ -0,0 +1,26 @@
+<script lang="ts">
+	import { DateField } from "$lib";
+
+	type $$Props = DateField.Props;
+	export let placeholder: DateField.Props["placeholder"] = undefined;
+	export let value: DateField.Props["value"] = undefined;
+</script>
+
+<main>
+	<div data-testid="value">{value}</div>
+	<DateField.Root bind:value bind:placeholder {...$$restProps}>
+		<div>
+			<DateField.Label data-testid="label">Label</DateField.Label>
+			<DateField.Input let:segments data-testid="input">
+				{#each segments as { part, value }}
+					<DateField.Segment
+						{part}
+						data-testid={part === "literal" ? undefined : part}
+					>
+						{value}
+					</DateField.Segment>
+				{/each}
+			</DateField.Input>
+		</div>
+	</DateField.Root>
+</main>
diff --git a/src/tests/utils.ts b/src/tests/utils.ts
index e88478402..bdf5f8efb 100644
--- a/src/tests/utils.ts
+++ b/src/tests/utils.ts
@@ -6,11 +6,16 @@ import type { Matcher, MatcherOptions } from "@testing-library/svelte";
  * which require the key names to be wrapped in curly braces.
  */
 export type KbdKeys = keyof typeof kbd;
-export const testKbd: Record<KbdKeys, string> = Object.entries(kbd).reduce((acc, [key, value]) => {
+const initTestKbd: Record<KbdKeys, string> = Object.entries(kbd).reduce((acc, [key, value]) => {
 	acc[key as KbdKeys] = `{${value}}`;
 	return acc;
 }, {} as Record<KbdKeys, string>);
 
+export const testKbd = {
+	...initTestKbd,
+	SHIFT_TAB: `{Shift>}{${kbd.TAB}}`
+};
+
 export type queryByTestId = (
 	id: Matcher,
 	options?: MatcherOptions | undefined

From 4444c7790e2d49626793124bb0c2ff7c195bb58e Mon Sep 17 00:00:00 2001
From: Hunter Johnston <johnstonhuntera@gmail.com>
Date: Sun, 3 Dec 2023 15:57:18 -0500
Subject: [PATCH 211/217] date range field tests

---
 package.json                                  |   2 +-
 pnpm-lock.yaml                                |  14 +-
 src/components/demos/date-picker-demo.svelte  |   2 +-
 .../demos/date-range-field-demo.svelte        |   8 +-
 .../demos/date-range-picker-demo.svelte       |  12 +-
 .../date-range-field/DateRangeField.spec.ts   | 190 ++++++++++++++++++
 .../DateRangeFieldTest.svelte                 |  36 ++++
 7 files changed, 251 insertions(+), 13 deletions(-)
 create mode 100644 src/tests/date-range-field/DateRangeField.spec.ts
 create mode 100644 src/tests/date-range-field/DateRangeFieldTest.svelte

diff --git a/package.json b/package.json
index b4c342b27..ac96f63ac 100644
--- a/package.json
+++ b/package.json
@@ -92,7 +92,7 @@
 	"type": "module",
 	"dependencies": {
 		"@internationalized/date": "^3.5.0",
-		"@melt-ui/svelte": "0.64.1",
+		"@melt-ui/svelte": "0.64.2",
 		"nanoid": "^5.0.4"
 	},
 	"peerDependencies": {
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index d6898b435..8c4521446 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -9,8 +9,8 @@ dependencies:
     specifier: ^3.5.0
     version: 3.5.0
   '@melt-ui/svelte':
-    specifier: 0.64.1
-    version: 0.64.1(svelte@4.2.3)
+    specifier: 0.64.2
+    version: 0.64.2(svelte@4.2.3)
   nanoid:
     specifier: ^5.0.4
     version: 5.0.4
@@ -24,7 +24,7 @@ devDependencies:
     version: 0.16.5(svelte@4.2.3)
   '@melt-ui/pp':
     specifier: ^0.1.4
-    version: 0.1.4(@melt-ui/svelte@0.64.1)(svelte@4.2.3)
+    version: 0.1.4(@melt-ui/svelte@0.64.2)(svelte@4.2.3)
   '@playwright/test':
     specifier: ^1.28.1
     version: 1.36.2
@@ -1064,20 +1064,20 @@ packages:
       - supports-color
     dev: true
 
-  /@melt-ui/pp@0.1.4(@melt-ui/svelte@0.64.1)(svelte@4.2.3):
+  /@melt-ui/pp@0.1.4(@melt-ui/svelte@0.64.2)(svelte@4.2.3):
     resolution: {integrity: sha512-zR+Kl3CZJPJBHW8V7YcdQCMI/dVcnW9Ct3yGbVaIywYVStVRS7F9uEDOea3xLLT2WTGodQePzPlUn53yKFu87g==}
     engines: {pnpm: '>=8.6.3'}
     peerDependencies:
       '@melt-ui/svelte': '>= 0.29.0'
       svelte: ^3.55.0 || ^4.0.0 || ^5.0.0-next.1
     dependencies:
-      '@melt-ui/svelte': 0.64.1(svelte@4.2.3)
+      '@melt-ui/svelte': 0.64.2(svelte@4.2.3)
       estree-walker: 3.0.3
       svelte: 4.2.3
     dev: true
 
-  /@melt-ui/svelte@0.64.1(svelte@4.2.3):
-    resolution: {integrity: sha512-53c+8fIIfwXt8SzkwoywcILaX2zHEES3Z6jVw17RL3WDH8ebsG+iCeEtQDzXCfyRyiBWm01zVqK1gvHZfQ3Kew==}
+  /@melt-ui/svelte@0.64.2(svelte@4.2.3):
+    resolution: {integrity: sha512-p9soqEDmFSiL/XFqywiVEcpOjnWbYU5aEj7UGOQEqEpF4EcUJJpSZOpozqWE2R9ZwP3NIy9BwWzVhQvgys80Ng==}
     peerDependencies:
       svelte: '>=3 <5'
     dependencies:
diff --git a/src/components/demos/date-picker-demo.svelte b/src/components/demos/date-picker-demo.svelte
index 09497f5ef..4925830ad 100644
--- a/src/components/demos/date-picker-demo.svelte
+++ b/src/components/demos/date-picker-demo.svelte
@@ -29,7 +29,7 @@
 				<CalendarBlank class="sq-5" />
 			</DatePicker.Trigger>
 		</DatePicker.Input>
-		<DatePicker.Content sideOffset={6} transition={flyAndScale}>
+		<DatePicker.Content sideOffset={6} transition={flyAndScale} class="z-50">
 			<DatePicker.Calendar
 				class="rounded-[15px] border border-dark-10 bg-background p-[22px] shadow-card"
 				let:months
diff --git a/src/components/demos/date-range-field-demo.svelte b/src/components/demos/date-range-field-demo.svelte
index ef5415b9f..28ed8c2ec 100644
--- a/src/components/demos/date-range-field-demo.svelte
+++ b/src/components/demos/date-range-field-demo.svelte
@@ -1,8 +1,14 @@
 <script lang="ts">
 	import { DateRangeField } from "$lib";
+	import { CalendarDate } from "@internationalized/date";
+
+	let value = {
+		start: new CalendarDate(2022, 1, 1),
+		end: new CalendarDate(2022, 3, 1)
+	};
 </script>
 
-<DateRangeField.Root>
+<DateRangeField.Root bind:value>
 	<div class="flex min-w-[200px] flex-col gap-1">
 		<DateRangeField.Label class="block select-none"
 			>Hotel dates</DateRangeField.Label
diff --git a/src/components/demos/date-range-picker-demo.svelte b/src/components/demos/date-range-picker-demo.svelte
index 74b970a8b..6905e5dba 100644
--- a/src/components/demos/date-range-picker-demo.svelte
+++ b/src/components/demos/date-range-picker-demo.svelte
@@ -1,10 +1,12 @@
 <script lang="ts">
-	import { DateRangePicker } from "$lib";
+	import { DateRangePicker, type DateRange } from "$lib";
 	import { cn, flyAndScale } from "@/utils";
 	import { CaretLeft, CaretRight, CalendarBlank } from "phosphor-svelte";
+
+	let value: DateRange | undefined = undefined;
 </script>
 
-<DateRangePicker.Root weekdayFormat="short">
+<DateRangePicker.Root bind:value weekdayFormat="short">
 	<div class="flex min-w-[200px] flex-col gap-1">
 		<DateRangePicker.Label class="block select-none font-medium"
 			>Rental Days</DateRangePicker.Label
@@ -42,7 +44,11 @@
 				<CalendarBlank class="sq-5" />
 			</DateRangePicker.Trigger>
 		</DateRangePicker.Input>
-		<DateRangePicker.Content sideOffset={6} transition={flyAndScale}>
+		<DateRangePicker.Content
+			sideOffset={6}
+			transition={flyAndScale}
+			class="z-50"
+		>
 			<DateRangePicker.Calendar
 				class="mt-6 rounded-15px border border-dark-10 bg-background p-[22px] shadow-card"
 				let:months
diff --git a/src/tests/date-range-field/DateRangeField.spec.ts b/src/tests/date-range-field/DateRangeField.spec.ts
new file mode 100644
index 000000000..6533e8412
--- /dev/null
+++ b/src/tests/date-range-field/DateRangeField.spec.ts
@@ -0,0 +1,190 @@
+import { render } from "@testing-library/svelte";
+import userEvent from "@testing-library/user-event";
+import { axe } from "jest-axe";
+import { describe, it } from "vitest";
+import { testKbd as kbd } from "../utils.js";
+import DateRangeFieldTest from "./DateRangeFieldTest.svelte";
+import type { DateRangeField } from "$lib";
+import { CalendarDate, CalendarDateTime, toZoned } from "@internationalized/date";
+
+const calendarDate = {
+	start: new CalendarDate(2022, 1, 1),
+	end: new CalendarDate(2022, 3, 1)
+};
+
+const calendarDateTime = {
+	start: new CalendarDateTime(2022, 1, 1, 12, 30),
+	end: new CalendarDateTime(2022, 3, 1, 12, 30)
+};
+const zonedDateTime = {
+	start: toZoned(calendarDateTime.start, "America/New_York"),
+	end: toZoned(calendarDateTime.end, "America/New_York")
+};
+
+function setup(props: DateRangeField.Props = {}) {
+	const user = userEvent.setup();
+	const returned = render(DateRangeFieldTest, { ...props });
+
+	const start = {
+		month: returned.getByTestId("start-month"),
+		day: returned.getByTestId("start-day"),
+		year: returned.getByTestId("start-year"),
+		value: returned.getByTestId("start-value")
+	};
+
+	const end = {
+		month: returned.getByTestId("end-month"),
+		day: returned.getByTestId("end-day"),
+		year: returned.getByTestId("end-year"),
+		value: returned.getByTestId("end-value")
+	};
+
+	const input = returned.getByTestId("input");
+	const label = returned.getByTestId("label");
+
+	return { ...returned, user, start, end, input, label };
+}
+
+describe("Date Range Field", () => {
+	it("has no axe violations", async () => {
+		const { container } = setup();
+		expect(await axe(container)).toHaveNoViolations();
+	});
+
+	it("populates segment with value - `CalendarDate`", async () => {
+		const { start, end } = setup({
+			value: calendarDate
+		});
+
+		expect(start.month).toHaveTextContent(String(calendarDate.start.month));
+		expect(start.day).toHaveTextContent(String(calendarDate.start.day));
+		expect(start.year).toHaveTextContent(String(calendarDate.start.year));
+		expect(start.value).toHaveTextContent(calendarDate.start.toString());
+
+		expect(end.month).toHaveTextContent(String(calendarDate.end.month));
+		expect(end.day).toHaveTextContent(String(calendarDate.end.day));
+		expect(end.year).toHaveTextContent(String(calendarDate.end.year));
+		expect(end.value).toHaveTextContent(calendarDate.end.toString());
+	});
+
+	it("populates segment with value - `CalendarDateTime`", async () => {
+		const { start, end, getByTestId } = setup({
+			value: calendarDateTime,
+			granularity: "second"
+		});
+
+		expect(start.month).toHaveTextContent(String(calendarDateTime.start.month));
+		expect(start.day).toHaveTextContent(String(calendarDateTime.start.day));
+		expect(start.year).toHaveTextContent(String(calendarDateTime.start.year));
+		expect(getByTestId("start-hour")).toHaveTextContent(String(calendarDateTime.start.hour));
+		expect(getByTestId("start-minute")).toHaveTextContent(String(calendarDateTime.start.minute));
+		expect(getByTestId("start-second")).toHaveTextContent(String(calendarDateTime.start.second));
+		expect(start.value).toHaveTextContent(calendarDateTime.start.toString());
+
+		expect(end.month).toHaveTextContent(String(calendarDateTime.end.month));
+		expect(end.day).toHaveTextContent(String(calendarDateTime.end.day));
+		expect(end.year).toHaveTextContent(String(calendarDateTime.end.year));
+		expect(getByTestId("end-hour")).toHaveTextContent(String(calendarDateTime.end.hour));
+		expect(getByTestId("end-minute")).toHaveTextContent(String(calendarDateTime.end.minute));
+		expect(getByTestId("end-second")).toHaveTextContent(String(calendarDateTime.end.second));
+		expect(end.value).toHaveTextContent(calendarDateTime.end.toString());
+	});
+
+	it("populates segment with value - `ZonedDateTime`", async () => {
+		const { start, end, getByTestId } = setup({
+			value: zonedDateTime,
+			granularity: "second"
+		});
+
+		expect(start.month).toHaveTextContent(String(calendarDateTime.start.month));
+		expect(start.day).toHaveTextContent(String(calendarDateTime.start.day));
+		expect(start.year).toHaveTextContent(String(calendarDateTime.start.year));
+		expect(getByTestId("start-hour")).toHaveTextContent(String(calendarDateTime.start.hour));
+		expect(getByTestId("start-minute")).toHaveTextContent(String(calendarDateTime.start.minute));
+		expect(getByTestId("start-second")).toHaveTextContent(String(calendarDateTime.start.second));
+		expect(start.value).toHaveTextContent(calendarDateTime.start.toString());
+
+		expect(end.month).toHaveTextContent(String(calendarDateTime.end.month));
+		expect(end.day).toHaveTextContent(String(calendarDateTime.end.day));
+		expect(end.year).toHaveTextContent(String(calendarDateTime.end.year));
+		expect(getByTestId("end-hour")).toHaveTextContent(String(calendarDateTime.end.hour));
+		expect(getByTestId("end-minute")).toHaveTextContent(String(calendarDateTime.end.minute));
+		expect(getByTestId("end-second")).toHaveTextContent(String(calendarDateTime.end.second));
+		expect(end.value).toHaveTextContent(calendarDateTime.end.toString());
+	});
+
+	it("navigates between the fields", async () => {
+		const { getByTestId, user } = setup({
+			value: calendarDate
+		});
+
+		const fields = ["start", "end"] as const;
+		const segments = ["month", "day", "year"] as const;
+
+		await user.click(getByTestId("start-month"));
+
+		for (const field of fields) {
+			for (const segment of segments) {
+				if (field === "start" && segment === "month") continue;
+				const seg = getByTestId(`${field}-${segment}`);
+				await user.keyboard(kbd.ARROW_RIGHT);
+				expect(seg).toHaveFocus();
+			}
+		}
+
+		await user.click(getByTestId("start-month"));
+
+		for (const field of fields) {
+			for (const segment of segments) {
+				if (field === "start" && segment === "month") continue;
+				const seg = getByTestId(`${field}-${segment}`);
+				await user.keyboard(kbd.TAB);
+				expect(seg).toHaveFocus();
+			}
+		}
+	});
+
+	it("navigates between the fields - right to left", async () => {
+		const { getByTestId, user } = setup({
+			value: calendarDate
+		});
+
+		const fields = ["end", "start"] as const;
+		const segments = ["year", "day", "month"] as const;
+
+		await user.click(getByTestId("end-year"));
+
+		for (const field of fields) {
+			for (const segment of segments) {
+				if (field === "end" && segment === "year") continue;
+				const seg = getByTestId(`${field}-${segment}`);
+				await user.keyboard(kbd.ARROW_LEFT);
+				expect(seg).toHaveFocus();
+			}
+		}
+
+		await user.click(getByTestId("end-year"));
+
+		for (const field of fields) {
+			for (const segment of segments) {
+				if (field === "end" && segment === "year") continue;
+				const seg = getByTestId(`${field}-${segment}`);
+				await user.keyboard(kbd.SHIFT_TAB);
+				expect(seg).toHaveFocus();
+			}
+		}
+	});
+
+	it("binds to the value", async () => {
+		const { start, end, user } = setup({
+			value: calendarDate
+		});
+		expect(start.value).toHaveTextContent(calendarDate.start.toString());
+		expect(end.value).toHaveTextContent(calendarDate.end.toString());
+
+		await user.click(start.month);
+		await user.keyboard("2");
+		expect(start.value).toHaveTextContent("2022-02-01");
+		expect(end.value).toHaveTextContent(calendarDate.end.toString());
+	});
+});
diff --git a/src/tests/date-range-field/DateRangeFieldTest.svelte b/src/tests/date-range-field/DateRangeFieldTest.svelte
new file mode 100644
index 000000000..e5daee83a
--- /dev/null
+++ b/src/tests/date-range-field/DateRangeFieldTest.svelte
@@ -0,0 +1,36 @@
+<script lang="ts">
+	import { DateRangeField } from "$lib";
+
+	type $$Props = DateRangeField.Props;
+	export let value: $$Props["value"] = undefined;
+	export let placeholder: $$Props["placeholder"] = undefined;
+</script>
+
+<main>
+	<div data-testid="value">{value}</div>
+	<div data-testid="start-value">{value?.start}</div>
+	<div data-testid="end-value">{value?.end}</div>
+	<DateRangeField.Root bind:value bind:placeholder {...$$restProps}>
+		<DateRangeField.Label data-testid="label">Hotel dates</DateRangeField.Label>
+		<DateRangeField.Input let:segments data-testid="input">
+			{#each segments.start as { part, value }}
+				<DateRangeField.Segment
+					type="start"
+					data-testid={part === "literal" ? undefined : `start-${part}`}
+					{part}
+				>
+					{value}
+				</DateRangeField.Segment>
+			{/each}
+			{#each segments.end as { part, value }}
+				<DateRangeField.Segment
+					type="end"
+					data-testid={part === "literal" ? undefined : `end-${part}`}
+					{part}
+				>
+					{value}
+				</DateRangeField.Segment>
+			{/each}
+		</DateRangeField.Input>
+	</DateRangeField.Root>
+</main>

From 560c7f11464b6ddb3b1ed24ab0ad7f7c3d89b935 Mon Sep 17 00:00:00 2001
From: Hunter Johnston <johnstonhuntera@gmail.com>
Date: Sun, 3 Dec 2023 17:49:52 -0500
Subject: [PATCH 212/217] work on type exports

---
 src/lib/bits/accordion/_export.types.ts       | 23 ++++++++
 src/lib/bits/alert-dialog/_export.types.ts    | 35 ++++++++++++
 src/lib/bits/aspect-ratio/_export.types.ts    |  3 +
 src/lib/bits/avatar/_export.types.ts          |  7 +++
 src/lib/bits/button/_export.types.ts          |  3 +
 src/lib/bits/calendar/_export.types.ts        | 43 ++++++++++++++
 .../calendar/components/calendar-date.svelte  |  8 ++-
 .../components/calendar-next-button.svelte    | 14 ++++-
 .../components/calendar-prev-button.svelte    | 14 ++++-
 .../bits/calendar/components/calendar.svelte  |  6 +-
 src/lib/bits/calendar/types.ts                | 35 +++++++++++-
 src/lib/bits/checkbox/_export.types.ts        | 19 +++++++
 src/lib/bits/collapsible/_export.types.ts     | 19 +++++++
 src/lib/bits/context-menu/_export.types.ts    | 57 +++++++++++++++++++
 src/lib/bits/context-menu/types.ts            |  2 +
 .../components/date-field-segment.svelte      | 14 ++++-
 src/lib/bits/date-field/types.ts              | 27 ++++++++-
 .../components/date-picker-calendar.svelte    |  8 ++-
 .../components/date-picker-date.svelte        |  8 ++-
 .../components/date-picker-next-button.svelte | 25 ++++++--
 .../components/date-picker-prev-button.svelte | 16 +++++-
 .../components/date-picker-segment.svelte     | 14 ++++-
 src/lib/bits/date-picker/types.ts             | 17 +++++-
 .../date-range-field-segment.svelte           | 11 +++-
 src/lib/bits/date-range-field/types.ts        |  6 +-
 25 files changed, 402 insertions(+), 32 deletions(-)
 create mode 100644 src/lib/bits/accordion/_export.types.ts
 create mode 100644 src/lib/bits/alert-dialog/_export.types.ts
 create mode 100644 src/lib/bits/aspect-ratio/_export.types.ts
 create mode 100644 src/lib/bits/avatar/_export.types.ts
 create mode 100644 src/lib/bits/button/_export.types.ts
 create mode 100644 src/lib/bits/calendar/_export.types.ts
 create mode 100644 src/lib/bits/checkbox/_export.types.ts
 create mode 100644 src/lib/bits/collapsible/_export.types.ts
 create mode 100644 src/lib/bits/context-menu/_export.types.ts

diff --git a/src/lib/bits/accordion/_export.types.ts b/src/lib/bits/accordion/_export.types.ts
new file mode 100644
index 000000000..c0a09738b
--- /dev/null
+++ b/src/lib/bits/accordion/_export.types.ts
@@ -0,0 +1,23 @@
+import type {
+	Props,
+	ItemProps,
+	HeaderProps,
+	TriggerProps,
+	ContentProps,
+	//
+	// Events
+	//
+	TriggerEvents
+} from "./types.js";
+
+export type {
+	Props as AccordionProps,
+	ItemProps as AccordionItemProps,
+	HeaderProps as AccordionHeaderProps,
+	TriggerProps as AccordionTriggerProps,
+	ContentProps as AccordionContentProps,
+	//
+	// Events
+	//
+	TriggerEvents as AccordionTriggerEvents
+};
diff --git a/src/lib/bits/alert-dialog/_export.types.ts b/src/lib/bits/alert-dialog/_export.types.ts
new file mode 100644
index 000000000..4523112f6
--- /dev/null
+++ b/src/lib/bits/alert-dialog/_export.types.ts
@@ -0,0 +1,35 @@
+import type {
+	Props,
+	TriggerProps,
+	ActionProps,
+	CancelProps,
+	ContentProps,
+	DescriptionProps,
+	PortalProps,
+	OverlayProps,
+	TitleProps,
+	//
+	// Events
+	//
+	TriggerEvents,
+	CancelEvents,
+	ActionEvents
+} from "./types.js";
+
+export type {
+	Props as AlertDialogProps,
+	TriggerProps as AlertDialogTriggerProps,
+	ActionProps as AlertDialogActionProps,
+	CancelProps as AlertDialogCancelProps,
+	ContentProps as AlertDialogContentProps,
+	DescriptionProps as AlertDialogDescriptionProps,
+	PortalProps as AlertDialogPortalProps,
+	OverlayProps as AlertDialogOverlayProps,
+	TitleProps as AlertDialogTitleProps,
+	//
+	// Events
+	//
+	TriggerEvents as AlertDialogTriggerEvents,
+	CancelEvents as AlertDialogCancelEvents,
+	ActionEvents as AlertDialogActionEvents
+};
diff --git a/src/lib/bits/aspect-ratio/_export.types.ts b/src/lib/bits/aspect-ratio/_export.types.ts
new file mode 100644
index 000000000..dc87247c8
--- /dev/null
+++ b/src/lib/bits/aspect-ratio/_export.types.ts
@@ -0,0 +1,3 @@
+import type { Props } from "./types.js";
+
+export type { Props as AspectRatioProps };
diff --git a/src/lib/bits/avatar/_export.types.ts b/src/lib/bits/avatar/_export.types.ts
new file mode 100644
index 000000000..ebd225ee6
--- /dev/null
+++ b/src/lib/bits/avatar/_export.types.ts
@@ -0,0 +1,7 @@
+import type { Props, ImageProps, FallbackProps } from "./types.js";
+
+export type {
+	Props as AvatarProps,
+	ImageProps as AvatarImageProps,
+	FallbackProps as AvatarFallbackProps
+};
diff --git a/src/lib/bits/button/_export.types.ts b/src/lib/bits/button/_export.types.ts
new file mode 100644
index 000000000..760c082cd
--- /dev/null
+++ b/src/lib/bits/button/_export.types.ts
@@ -0,0 +1,3 @@
+import type { Props, Events } from "./types.js";
+
+export type { Props as ButtonProps, Events as ButtonEvents };
diff --git a/src/lib/bits/calendar/_export.types.ts b/src/lib/bits/calendar/_export.types.ts
new file mode 100644
index 000000000..f6c68e7a2
--- /dev/null
+++ b/src/lib/bits/calendar/_export.types.ts
@@ -0,0 +1,43 @@
+import type {
+	Props,
+	PrevButtonProps,
+	NextButtonProps,
+	HeadingProps,
+	GridProps,
+	CellProps,
+	GridRowProps,
+	GridBodyProps,
+	HeadCellProps,
+	GridHeadProps,
+	HeaderProps,
+	DateProps,
+	//
+	// Events
+	//
+	Events,
+	PrevButtonEvents,
+	NextButtonEvents,
+	DateEvents
+} from "./types.js";
+
+export type {
+	Props as CalendarProps,
+	PrevButtonProps as CalendarPrevButtonProps,
+	NextButtonProps as CalendarNextButtonProps,
+	HeadingProps as CalendarHeadingProps,
+	GridProps as CalendarGridProps,
+	CellProps as CalendarCellProps,
+	GridRowProps as CalendarGridRowProps,
+	GridBodyProps as CalendarGridBodyProps,
+	HeadCellProps as CalendarHeadCellProps,
+	GridHeadProps as CalendarGridHeadProps,
+	HeaderProps as CalendarHeaderProps,
+	DateProps as CalendarDateProps,
+	//
+	// Events
+	//
+	Events as CalendarEvents,
+	PrevButtonEvents as CalendarPrevButtonEvents,
+	NextButtonEvents as CalendarNextButtonEvents,
+	DateEvents as CalendarDateEvents
+};
diff --git a/src/lib/bits/calendar/components/calendar-date.svelte b/src/lib/bits/calendar/components/calendar-date.svelte
index a22ef45df..77de19def 100644
--- a/src/lib/bits/calendar/components/calendar-date.svelte
+++ b/src/lib/bits/calendar/components/calendar-date.svelte
@@ -1,9 +1,11 @@
 <script lang="ts">
 	import { melt } from "@melt-ui/svelte";
 	import { getCtx, getAttrs } from "../ctx.js";
-	import type { DateProps } from "../types.js";
+	import type { DateEvents, DateProps } from "../types.js";
+	import { createDispatcher } from "$lib/internal/events.js";
 
 	type $$Props = DateProps;
+	type $$Events = DateEvents;
 
 	export let date: $$Props["date"];
 	export let month: $$Props["month"];
@@ -15,7 +17,9 @@
 	} = getCtx();
 
 	$: builder = $cell(date, month);
+
 	const attrs = getAttrs("date");
+	const dispatch = createDispatcher();
 
 	$: slotProps = {
 		builder,
@@ -29,7 +33,7 @@
 {#if asChild}
 	<slot {...slotProps} />
 {:else}
-	<div use:melt={builder} {...attrs} {...$$restProps}>
+	<div use:melt={builder} {...attrs} {...$$restProps} on:m-click={dispatch}>
 		<slot {...slotProps}>
 			{date.day}
 		</slot>
diff --git a/src/lib/bits/calendar/components/calendar-next-button.svelte b/src/lib/bits/calendar/components/calendar-next-button.svelte
index 10b923d0a..106c0f789 100644
--- a/src/lib/bits/calendar/components/calendar-next-button.svelte
+++ b/src/lib/bits/calendar/components/calendar-next-button.svelte
@@ -1,9 +1,11 @@
 <script lang="ts">
 	import { melt } from "@melt-ui/svelte";
 	import { getAttrs, getCtx } from "../ctx.js";
-	import type { NextButtonProps } from "../types.js";
+	import type { NextButtonEvents, NextButtonProps } from "../types.js";
+	import { createDispatcher } from "$lib/internal/events.js";
 
 	type $$Props = NextButtonProps;
+	type $$Events = NextButtonEvents;
 
 	export let asChild: $$Props["asChild"] = false;
 
@@ -12,7 +14,9 @@
 	} = getCtx();
 
 	$: builder = $nextButton;
+
 	const attrs = getAttrs("next-button");
+	const dispatch = createDispatcher();
 
 	$: slotProps = {
 		builder,
@@ -23,7 +27,13 @@
 {#if asChild}
 	<slot {...slotProps} />
 {:else}
-	<button use:melt={builder} type="button" {...$$restProps} {...attrs}>
+	<button
+		use:melt={builder}
+		type="button"
+		{...$$restProps}
+		{...attrs}
+		on:m-click={dispatch}
+	>
 		<slot {...slotProps} />
 	</button>
 {/if}
diff --git a/src/lib/bits/calendar/components/calendar-prev-button.svelte b/src/lib/bits/calendar/components/calendar-prev-button.svelte
index 3775bc3c0..ad2c63c15 100644
--- a/src/lib/bits/calendar/components/calendar-prev-button.svelte
+++ b/src/lib/bits/calendar/components/calendar-prev-button.svelte
@@ -1,9 +1,11 @@
 <script lang="ts">
 	import { melt } from "@melt-ui/svelte";
 	import { getAttrs, getCtx } from "../ctx.js";
-	import type { PrevButtonProps } from "../types.js";
+	import type { PrevButtonEvents, PrevButtonProps } from "../types.js";
+	import { createDispatcher } from "$lib/internal/events.js";
 
 	type $$Props = PrevButtonProps;
+	type $$Events = PrevButtonEvents;
 
 	export let asChild: $$Props["asChild"] = false;
 
@@ -12,7 +14,9 @@
 	} = getCtx();
 
 	$: builder = $prevButton;
+
 	const attrs = getAttrs("prev-button");
+	const dispatch = createDispatcher();
 
 	$: slotProps = {
 		builder,
@@ -23,7 +27,13 @@
 {#if asChild}
 	<slot {...slotProps} />
 {:else}
-	<button use:melt={builder} type="button" {...$$restProps} {...attrs}>
+	<button
+		use:melt={builder}
+		type="button"
+		{...$$restProps}
+		{...attrs}
+		on:m-click={dispatch}
+	>
 		<slot {...slotProps} />
 	</button>
 {/if}
diff --git a/src/lib/bits/calendar/components/calendar.svelte b/src/lib/bits/calendar/components/calendar.svelte
index 1f1f2007a..54221dca5 100644
--- a/src/lib/bits/calendar/components/calendar.svelte
+++ b/src/lib/bits/calendar/components/calendar.svelte
@@ -1,4 +1,6 @@
 <script lang="ts">
+	import { createDispatcher } from "$lib/internal/events.js";
+
 	import { melt } from "@melt-ui/svelte";
 	import { setCtx, getAttrs } from "../ctx.js";
 	import type { Props } from "../types.js";
@@ -95,7 +97,9 @@
 	$: updateOption("numberOfMonths", numberOfMonths);
 
 	$: builder = $calendar;
+
 	const attrs = getAttrs("root");
+	const dispatch = createDispatcher();
 
 	$: slotProps = {
 		builder,
@@ -108,7 +112,7 @@
 {#if asChild}
 	<slot {...slotProps} />
 {:else}
-	<div use:melt={builder} {...$$restProps} {...attrs}>
+	<div use:melt={builder} {...$$restProps} {...attrs} on:m-keydown={dispatch}>
 		<slot {...slotProps} />
 	</div>
 {/if}
diff --git a/src/lib/bits/calendar/types.ts b/src/lib/bits/calendar/types.ts
index 5a810ad5d..c7a853dbd 100644
--- a/src/lib/bits/calendar/types.ts
+++ b/src/lib/bits/calendar/types.ts
@@ -7,6 +7,7 @@ import type {
 	HTMLThAttributes
 } from "svelte/elements";
 import type * as I from "./_types.js";
+import type { CustomEventHandler } from "$lib";
 
 type Props<Multiple extends boolean = false> = I.Props<Multiple> &
 	Omit<HTMLDivAttributes, "placeholder">;
@@ -33,6 +34,26 @@ type CellProps = I.CellProps & HTMLTdAttributes;
 
 type DateProps = I.DateProps & HTMLDivAttributes;
 
+/**
+ * Events
+ */
+
+type ButtonEvents = {
+	click: CustomEventHandler<MouseEvent, HTMLButtonElement>;
+};
+
+type PrevButtonEvents = ButtonEvents;
+
+type NextButtonEvents = ButtonEvents;
+
+type DateEvents = {
+	click: CustomEventHandler<MouseEvent, HTMLDivElement>;
+};
+
+type Events = {
+	keydown: CustomEventHandler<KeyboardEvent, HTMLDivElement>;
+};
+
 export type {
 	Props,
 	PrevButtonProps,
@@ -58,5 +79,17 @@ export type {
 	GridBodyProps as CalendarGridBodyProps,
 	CellProps as CalendarCellProps,
 	GridRowProps as CalendarGridRowProps,
-	DateProps as CalendarDateProps
+	DateProps as CalendarDateProps,
+	//
+	// Events
+	//
+	Events,
+	PrevButtonEvents,
+	NextButtonEvents,
+	DateEvents,
+	//
+	Events as CalendarEvents,
+	PrevButtonEvents as CalendarPrevButtonEvents,
+	NextButtonEvents as CalendarNextButtonEvents,
+	DateEvents as CalendarDateEvents
 };
diff --git a/src/lib/bits/checkbox/_export.types.ts b/src/lib/bits/checkbox/_export.types.ts
new file mode 100644
index 000000000..b8aaddfce
--- /dev/null
+++ b/src/lib/bits/checkbox/_export.types.ts
@@ -0,0 +1,19 @@
+import type {
+	Props,
+	IndicatorProps,
+	InputProps,
+	//
+	// Events
+	//
+	Events
+} from "./types.js";
+
+export type {
+	Props as CheckboxProps,
+	IndicatorProps as CheckboxIndicatorProps,
+	InputProps as CheckboxInputProps,
+	//
+	// Events
+	//
+	Events as CheckboxEvents
+};
diff --git a/src/lib/bits/collapsible/_export.types.ts b/src/lib/bits/collapsible/_export.types.ts
new file mode 100644
index 000000000..69b66ed40
--- /dev/null
+++ b/src/lib/bits/collapsible/_export.types.ts
@@ -0,0 +1,19 @@
+import type {
+	Props,
+	ContentProps,
+	TriggerProps,
+	//
+	// Events
+	//
+	TriggerEvents
+} from "./types.js";
+
+export type {
+	Props as CollapsibleProps,
+	ContentProps as CollapsibleContentProps,
+	TriggerProps as CollapsibleTriggerProps,
+	//
+	// Events
+	//
+	TriggerEvents as CollapsibleTriggerEvents
+};
diff --git a/src/lib/bits/context-menu/_export.types.ts b/src/lib/bits/context-menu/_export.types.ts
new file mode 100644
index 000000000..720a3ccaf
--- /dev/null
+++ b/src/lib/bits/context-menu/_export.types.ts
@@ -0,0 +1,57 @@
+import type {
+	Props,
+	SubProps,
+	ItemProps,
+	ArrowProps,
+	GroupProps,
+	LabelProps,
+	ContentProps,
+	TriggerProps,
+	RadioItemProps,
+	SeparatorProps,
+	RadioGroupProps,
+	SubContentProps,
+	SubTriggerProps,
+	CheckboxItemProps,
+	RadioIndicatorProps,
+	CheckboxIndicatorProps,
+	//
+	// Events
+	//
+	ItemEvents,
+	TriggerEvents,
+	ContentEvents,
+	RadioItemEvents,
+	SubContentEvents,
+	SubTriggerEvents,
+	CheckboxItemEvents
+} from "./types.js";
+
+export type {
+	Props as ContextMenuProps,
+	SubProps as ContextMenuSubProps,
+	ItemProps as ContextMenuItemProps,
+	ArrowProps as ContextMenuArrowProps,
+	GroupProps as ContextMenuGroupProps,
+	LabelProps as ContextMenuLabelProps,
+	ContentProps as ContextMenuContentProps,
+	TriggerProps as ContextMenuTriggerProps,
+	RadioItemProps as ContextMenuRadioItemProps,
+	SeparatorProps as ContextMenuSeparatorProps,
+	RadioGroupProps as ContextMenuRadioGroupProps,
+	SubContentProps as ContextMenuSubContentProps,
+	SubTriggerProps as ContextMenuSubTriggerProps,
+	CheckboxItemProps as ContextMenuCheckboxItemProps,
+	RadioIndicatorProps as ContextMenuRadioIndicatorProps,
+	CheckboxIndicatorProps as ContextMenuCheckboxIndicatorProps,
+	//
+	// Events
+	//
+	ItemEvents as ContextMenuItemEvents,
+	TriggerEvents as ContextMenuTriggerEvents,
+	ContentEvents as ContextMenuContentEvents,
+	RadioItemEvents as ContextMenuRadioItemEvents,
+	SubContentEvents as ContextMenuSubContentEvents,
+	SubTriggerEvents as ContextMenuSubTriggerEvents,
+	CheckboxItemEvents as ContextMenuCheckboxItemEvents
+};
diff --git a/src/lib/bits/context-menu/types.ts b/src/lib/bits/context-menu/types.ts
index 7e841990f..24c39dcd4 100644
--- a/src/lib/bits/context-menu/types.ts
+++ b/src/lib/bits/context-menu/types.ts
@@ -13,6 +13,7 @@ import type {
 	SubProps,
 	LabelProps,
 	Props,
+	RadioIndicatorProps,
 	//
 	ContentEvents,
 	CheckboxItemEvents,
@@ -47,6 +48,7 @@ export type {
 	SubTriggerProps,
 	CheckboxItemProps,
 	CheckboxIndicatorProps,
+	RadioIndicatorProps,
 	//
 	Props as ContextMenuProps,
 	SubProps as ContextMenuSubProps,
diff --git a/src/lib/bits/date-field/components/date-field-segment.svelte b/src/lib/bits/date-field/components/date-field-segment.svelte
index d013e08ba..a10adc361 100644
--- a/src/lib/bits/date-field/components/date-field-segment.svelte
+++ b/src/lib/bits/date-field/components/date-field-segment.svelte
@@ -1,9 +1,11 @@
 <script lang="ts">
 	import { melt } from "@melt-ui/svelte";
 	import { getCtx, getAttrs } from "../ctx.js";
-	import type { SegmentProps } from "../types.js";
+	import type { SegmentEvents, SegmentProps } from "../types.js";
+	import { createDispatcher } from "$lib/internal/events.js";
 
 	type $$Props = SegmentProps;
+	type $$Events = SegmentEvents;
 
 	export let asChild: $$Props["asChild"] = false;
 	export let id: $$Props["id"] = undefined;
@@ -19,6 +21,7 @@
 	}
 
 	const attrs = getAttrs("segment");
+	const dispatch = createDispatcher();
 
 	$: builder = $segment(part);
 	$: slotProps = {
@@ -30,7 +33,14 @@
 {#if asChild}
 	<slot {...slotProps} />
 {:else}
-	<div use:melt={builder} {...$$restProps} {...attrs}>
+	<div
+		use:melt={builder}
+		{...$$restProps}
+		{...attrs}
+		on:m-click={dispatch}
+		on:m-focusout={dispatch}
+		on:m-keydown={dispatch}
+	>
 		<slot {...slotProps} />
 	</div>
 {/if}
diff --git a/src/lib/bits/date-field/types.ts b/src/lib/bits/date-field/types.ts
index a44b25513..061357e2b 100644
--- a/src/lib/bits/date-field/types.ts
+++ b/src/lib/bits/date-field/types.ts
@@ -1,3 +1,4 @@
+import type { CustomEventHandler } from "$lib";
 import type { HTMLDivAttributes, HTMLSpanAttributes } from "$lib/internal/index.js";
 import type * as I from "./_types.js";
 
@@ -11,4 +12,28 @@ type InputProps = I.InputProps & HTMLDivAttributes;
 
 type DescriptionProps = I.DescriptionProps & HTMLDivAttributes;
 
-export type { Props, LabelProps, DescriptionProps, InputProps, SegmentProps };
+type SegmentEvents = {
+	click: CustomEventHandler<MouseEvent, HTMLDivElement>;
+	focusout: CustomEventHandler<FocusEvent, HTMLDivElement>;
+	keydown: CustomEventHandler<KeyboardEvent, HTMLDivElement>;
+};
+
+export type {
+	Props,
+	LabelProps,
+	DescriptionProps,
+	InputProps,
+	SegmentProps,
+	//
+	Props as DateFieldProps,
+	LabelProps as DateFieldLabelProps,
+	DescriptionProps as DateFieldDescriptionProps,
+	InputProps as DateFieldInputProps,
+	SegmentProps as DateFieldSegmentProps,
+	//
+	// Events
+	//
+	SegmentEvents,
+	//
+	SegmentEvents as DateFieldSegmentEvents
+};
diff --git a/src/lib/bits/date-picker/components/date-picker-calendar.svelte b/src/lib/bits/date-picker/components/date-picker-calendar.svelte
index 846c587aa..f1d67e960 100644
--- a/src/lib/bits/date-picker/components/date-picker-calendar.svelte
+++ b/src/lib/bits/date-picker/components/date-picker-calendar.svelte
@@ -1,9 +1,11 @@
 <script lang="ts">
 	import { melt } from "@melt-ui/svelte";
 	import { getCtx, getCalendarAttrs } from "../ctx.js";
-	import type { CalendarProps } from "../types.js";
+	import type { CalendarEvents, CalendarProps } from "../types.js";
+	import { createDispatcher } from "$lib/internal/events.js";
 
 	type $$Props = CalendarProps;
+	type $$Events = CalendarEvents;
 
 	export let asChild: $$Props["asChild"] = false;
 	export let id: $$Props["id"] = undefined;
@@ -19,7 +21,9 @@
 	}
 
 	$: builder = $calendar;
+
 	const attrs = getCalendarAttrs("root");
+	const dispatch = createDispatcher();
 
 	$: slotProps = {
 		builder,
@@ -32,7 +36,7 @@
 {#if asChild}
 	<slot {...slotProps} />
 {:else}
-	<div use:melt={builder} {...$$restProps} {...attrs}>
+	<div use:melt={builder} {...$$restProps} {...attrs} on:m-keydown={dispatch}>
 		<slot {...slotProps} />
 	</div>
 {/if}
diff --git a/src/lib/bits/date-picker/components/date-picker-date.svelte b/src/lib/bits/date-picker/components/date-picker-date.svelte
index 600f3d40c..b1e5a48e5 100644
--- a/src/lib/bits/date-picker/components/date-picker-date.svelte
+++ b/src/lib/bits/date-picker/components/date-picker-date.svelte
@@ -1,9 +1,11 @@
 <script lang="ts">
 	import { melt } from "@melt-ui/svelte";
 	import { getCtx, getCalendarAttrs } from "../ctx.js";
-	import type { DateProps } from "../types.js";
+	import type { DateEvents, DateProps } from "../types.js";
+	import { createDispatcher } from "$lib/internal/events.js";
 
 	type $$Props = DateProps;
+	type $$Events = DateEvents;
 
 	export let date: $$Props["date"];
 	export let month: $$Props["month"];
@@ -15,7 +17,9 @@
 	} = getCtx();
 
 	$: builder = $cell(date, month);
+
 	const attrs = getCalendarAttrs("date");
+	const dispatch = createDispatcher();
 
 	$: slotProps = {
 		builder,
@@ -29,7 +33,7 @@
 {#if asChild}
 	<slot {...slotProps} />
 {:else}
-	<div use:melt={builder} {...attrs} {...$$restProps}>
+	<div use:melt={builder} {...attrs} {...$$restProps} on:m-click={dispatch}>
 		<slot {...slotProps}>
 			{date.day}
 		</slot>
diff --git a/src/lib/bits/date-picker/components/date-picker-next-button.svelte b/src/lib/bits/date-picker/components/date-picker-next-button.svelte
index c887fcf5e..027f9b231 100644
--- a/src/lib/bits/date-picker/components/date-picker-next-button.svelte
+++ b/src/lib/bits/date-picker/components/date-picker-next-button.svelte
@@ -1,9 +1,11 @@
 <script lang="ts">
 	import { melt } from "@melt-ui/svelte";
 	import { getCalendarAttrs, getCtx } from "../ctx.js";
-	import type { NextButtonProps } from "../types.js";
+	import type { NextButtonEvents, NextButtonProps } from "../types.js";
+	import { createDispatcher } from "$lib/internal/events.js";
 
 	type $$Props = NextButtonProps;
+	type $$Events = NextButtonEvents;
 
 	export let asChild: $$Props["asChild"] = false;
 
@@ -11,14 +13,27 @@
 		elements: { nextButton }
 	} = getCtx();
 
-	$: builder = $nextButton;
 	const attrs = getCalendarAttrs("next-button");
+	const dispatch = createDispatcher();
+
+	$: builder = $nextButton;
+
+	$: slotProps = {
+		builder,
+		attrs
+	};
 </script>
 
 {#if asChild}
-	<slot {builder} {attrs} />
+	<slot {...slotProps} />
 {:else}
-	<button use:melt={builder} type="button" {...$$restProps} {...attrs}>
-		<slot {builder} {attrs} />
+	<button
+		use:melt={builder}
+		type="button"
+		{...$$restProps}
+		{...attrs}
+		on:m-click={dispatch}
+	>
+		<slot {...slotProps} />
 	</button>
 {/if}
diff --git a/src/lib/bits/date-picker/components/date-picker-prev-button.svelte b/src/lib/bits/date-picker/components/date-picker-prev-button.svelte
index 64e7cda89..a5472fde6 100644
--- a/src/lib/bits/date-picker/components/date-picker-prev-button.svelte
+++ b/src/lib/bits/date-picker/components/date-picker-prev-button.svelte
@@ -1,9 +1,11 @@
 <script lang="ts">
 	import { melt } from "@melt-ui/svelte";
 	import { getCalendarAttrs, getCtx } from "../ctx.js";
-	import type { PrevButtonProps } from "../types.js";
+	import type { PrevButtonEvents, PrevButtonProps } from "../types.js";
+	import { createDispatcher } from "$lib/internal/events.js";
 
 	type $$Props = PrevButtonProps;
+	type $$Events = PrevButtonEvents;
 
 	export let asChild: $$Props["asChild"] = false;
 
@@ -11,8 +13,10 @@
 		elements: { prevButton }
 	} = getCtx();
 
-	$: builder = $prevButton;
 	const attrs = getCalendarAttrs("prev-button");
+	const dispatch = createDispatcher();
+
+	$: builder = $prevButton;
 
 	$: slotProps = {
 		builder,
@@ -23,7 +27,13 @@
 {#if asChild}
 	<slot {...slotProps} />
 {:else}
-	<button use:melt={builder} type="button" {...$$restProps} {...attrs}>
+	<button
+		use:melt={builder}
+		type="button"
+		{...$$restProps}
+		{...attrs}
+		on:m-click={dispatch}
+	>
 		<slot {...slotProps} />
 	</button>
 {/if}
diff --git a/src/lib/bits/date-picker/components/date-picker-segment.svelte b/src/lib/bits/date-picker/components/date-picker-segment.svelte
index 20c0937df..c7c230d81 100644
--- a/src/lib/bits/date-picker/components/date-picker-segment.svelte
+++ b/src/lib/bits/date-picker/components/date-picker-segment.svelte
@@ -1,9 +1,11 @@
 <script lang="ts">
 	import { melt } from "@melt-ui/svelte";
 	import { getCtx, getFieldAttrs } from "../ctx.js";
-	import type { SegmentProps } from "../types.js";
+	import type { SegmentEvents, SegmentProps } from "../types.js";
+	import { createDispatcher } from "$lib/internal/events.js";
 
 	type $$Props = SegmentProps;
+	type $$Events = SegmentEvents;
 
 	export let asChild: $$Props["asChild"] = false;
 	export let id: $$Props["id"] = undefined;
@@ -19,6 +21,7 @@
 	}
 
 	const attrs = getFieldAttrs("segment");
+	const dispatch = createDispatcher();
 
 	$: builder = $segment(part);
 	$: slotProps = {
@@ -30,7 +33,14 @@
 {#if asChild}
 	<slot {...slotProps} />
 {:else}
-	<div use:melt={builder} {...$$restProps} {...attrs}>
+	<div
+		use:melt={builder}
+		{...$$restProps}
+		{...attrs}
+		on:m-click={dispatch}
+		on:m-focusout={dispatch}
+		on:m-focusout={dispatch}
+	>
 		<slot {...slotProps} />
 	</div>
 {/if}
diff --git a/src/lib/bits/date-picker/types.ts b/src/lib/bits/date-picker/types.ts
index 63dc92e40..8b8e3b1af 100644
--- a/src/lib/bits/date-picker/types.ts
+++ b/src/lib/bits/date-picker/types.ts
@@ -11,7 +11,11 @@ import type {
 	HeaderProps,
 	HeadingProps,
 	NextButtonProps,
-	PrevButtonProps
+	PrevButtonProps,
+	CalendarEvents,
+	DateEvents,
+	PrevButtonEvents,
+	NextButtonEvents
 } from "../calendar/types.js";
 import type {
 	TriggerProps,
@@ -21,6 +25,7 @@ import type {
 	CloseEvents,
 	TriggerEvents
 } from "../popover/types.js";
+import type { SegmentEvents } from "../date-field/types.js";
 
 type Props = I.Props;
 type LabelProps = I.Props & HTMLSpanAttributes;
@@ -51,6 +56,14 @@ export type {
 	ContentProps,
 	ArrowProps,
 	CloseProps,
+	//
+	// Events
+	//
 	CloseEvents,
-	TriggerEvents
+	TriggerEvents,
+	CalendarEvents,
+	DateEvents,
+	PrevButtonEvents,
+	NextButtonEvents,
+	SegmentEvents
 };
diff --git a/src/lib/bits/date-range-field/components/date-range-field-segment.svelte b/src/lib/bits/date-range-field/components/date-range-field-segment.svelte
index 17fd30195..462441f2a 100644
--- a/src/lib/bits/date-range-field/components/date-range-field-segment.svelte
+++ b/src/lib/bits/date-range-field/components/date-range-field-segment.svelte
@@ -2,6 +2,7 @@
 	import { melt } from "@melt-ui/svelte";
 	import { getCtx, getAttrs } from "../ctx.js";
 	import type { SegmentProps } from "../types.js";
+	import { createDispatcher } from "$lib/internal/events.js";
 
 	type $$Props = SegmentProps;
 
@@ -24,6 +25,7 @@
 	}
 
 	const attrs = getAttrs("segment");
+	const dispatch = createDispatcher();
 
 	$: builder = type === "start" ? $startSegment(part) : $endSegment(part);
 
@@ -36,7 +38,14 @@
 {#if asChild}
 	<slot {...slotProps} />
 {:else}
-	<div use:melt={builder} {...$$restProps} {...attrs}>
+	<div
+		use:melt={builder}
+		{...$$restProps}
+		{...attrs}
+		on:m-click={dispatch}
+		on:m-focusout={dispatch}
+		on:m-keydown={dispatch}
+	>
 		<slot {...slotProps} />
 	</div>
 {/if}
diff --git a/src/lib/bits/date-range-field/types.ts b/src/lib/bits/date-range-field/types.ts
index 076e95f77..fc05b1feb 100644
--- a/src/lib/bits/date-range-field/types.ts
+++ b/src/lib/bits/date-range-field/types.ts
@@ -1,12 +1,10 @@
 import type { HTMLDivAttributes, HTMLSpanAttributes } from "$lib/internal/index.js";
 import type * as I from "./_types.js";
+import type { SegmentEvents } from "../date-field/types.js";
 
 type Props = I.Props;
-
 type LabelProps = I.LabelProps & HTMLSpanAttributes;
-
 type SegmentProps = I.SegmentProps & HTMLDivAttributes;
-
 type InputProps = I.InputProps & HTMLDivAttributes;
 
-export type { Props, LabelProps, InputProps, SegmentProps };
+export type { Props, LabelProps, InputProps, SegmentProps, SegmentEvents };

From 72d5745aaec98c1deedbe5efbc38c0483cf6b5ff Mon Sep 17 00:00:00 2001
From: Hunter Johnston <johnstonhuntera@gmail.com>
Date: Sun, 3 Dec 2023 21:07:00 -0500
Subject: [PATCH 213/217] add attrs to builder

---
 package.json                                  |  2 +-
 pnpm-lock.yaml                                | 14 ++---
 .../components/accordion-content.svelte       | 29 +++-------
 .../components/accordion-header.svelte        | 11 ++--
 .../components/accordion-item.svelte          | 11 ++--
 .../components/accordion-trigger.svelte       | 10 +---
 .../accordion/components/accordion.svelte     | 11 ++--
 .../components/alert-dialog-action.svelte     | 10 +---
 .../components/alert-dialog-cancel.svelte     | 10 +---
 .../components/alert-dialog-content.svelte    | 29 +++-------
 .../alert-dialog-description.svelte           | 11 ++--
 .../components/alert-dialog-overlay.svelte    | 12 +---
 .../components/alert-dialog-portal.svelte     | 11 ++--
 .../components/alert-dialog-title.svelte      | 11 ++--
 .../components/alert-dialog-trigger.svelte    | 10 +---
 .../avatar/components/avatar-fallback.svelte  | 11 ++--
 .../avatar/components/avatar-image.svelte     | 10 ++--
 .../calendar/components/calendar-date.svelte  |  7 +--
 .../calendar/components/calendar-grid.svelte  | 14 ++---
 .../components/calendar-heading.svelte        |  7 ++-
 .../components/calendar-next-button.svelte    | 14 ++---
 .../components/calendar-prev-button.svelte    | 14 ++---
 .../bits/calendar/components/calendar.svelte  |  8 +--
 .../components/checkbox-indicator.svelte      | 14 ++++-
 .../bits/checkbox/components/checkbox.svelte  | 16 ++---
 src/lib/bits/collapsible/_export.types.ts     |  6 ++
 .../components/collapsible-content.svelte     | 29 +++-------
 .../components/collapsible-trigger.svelte     | 10 +---
 .../collapsible/components/collapsible.svelte | 13 ++---
 .../components/context-menu-content.svelte    | 23 +++-----
 .../components/context-menu-trigger.svelte    | 12 ++--
 .../components/date-field-input.svelte        |  5 +-
 .../components/date-field-label.svelte        | 11 ++--
 .../components/date-field-segment.svelte      | 10 +---
 .../components/date-picker-arrow.svelte       |  9 +--
 .../components/date-picker-calendar.svelte    |  8 +--
 .../components/date-picker-close.svelte       | 10 +---
 .../components/date-picker-content.svelte     | 30 ++++------
 .../components/date-picker-date.svelte        |  8 +--
 .../components/date-picker-grid.svelte        | 13 ++---
 .../components/date-picker-heading.svelte     | 14 +++--
 .../components/date-picker-input.svelte       |  5 +-
 .../components/date-picker-label.svelte       | 11 ++--
 .../components/date-picker-next-button.svelte | 11 +---
 .../components/date-picker-prev-button.svelte | 11 +---
 .../components/date-picker-segment.svelte     | 10 +---
 .../components/date-picker-trigger.svelte     | 11 ++--
 .../components/date-range-field-input.svelte  |  5 +-
 .../components/date-range-field-label.svelte  | 11 ++--
 .../date-range-field-segment.svelte           | 11 +---
 .../components/date-range-picker-arrow.svelte |  9 +--
 .../date-range-picker-calendar.svelte         |  7 ++-
 .../components/date-range-picker-close.svelte | 10 +---
 .../date-range-picker-content.svelte          | 29 +++-------
 .../components/date-range-picker-date.svelte  |  7 ++-
 .../components/date-range-picker-grid.svelte  | 13 ++---
 .../date-range-picker-heading.svelte          | 15 +++--
 .../components/date-range-picker-input.svelte |  5 +-
 .../components/date-range-picker-label.svelte | 11 ++--
 .../date-range-picker-next-button.svelte      | 10 ++--
 .../date-range-picker-prev-button.svelte      | 13 ++---
 .../date-range-picker-segment.svelte          | 11 ++--
 .../date-range-picker-trigger.svelte          | 11 ++--
 .../dialog/components/dialog-close.svelte     | 10 +---
 .../dialog/components/dialog-content.svelte   | 29 +++-------
 .../components/dialog-description.svelte      | 11 ++--
 .../dialog/components/dialog-overlay.svelte   | 13 +----
 .../dialog/components/dialog-portal.svelte    | 12 ++--
 .../dialog/components/dialog-title.svelte     | 13 ++---
 .../dialog/components/dialog-trigger.svelte   | 10 +---
 src/lib/bits/dropdown-menu/_export.types.ts   | 57 ++++++++++++++++++
 src/lib/bits/dropdown-menu/index.ts           |  2 +-
 src/lib/bits/dropdown-menu/types.ts           | 58 +++++++------------
 src/lib/bits/label/components/label.svelte    | 16 ++---
 .../components/link-preview-arrow.svelte      |  9 +--
 .../components/link-preview-content.svelte    | 22 +++----
 .../components/link-preview-trigger.svelte    | 10 +---
 .../bits/menu/components/menu-arrow.svelte    | 10 +---
 .../menu/components/menu-checkbox-item.svelte | 11 +---
 .../bits/menu/components/menu-content.svelte  | 23 +++-----
 .../bits/menu/components/menu-group.svelte    | 11 ++--
 src/lib/bits/menu/components/menu-item.svelte | 11 +---
 .../bits/menu/components/menu-label.svelte    | 11 ++--
 .../menu/components/menu-radio-group.svelte   | 11 ++--
 .../menu/components/menu-radio-item.svelte    | 12 +---
 .../menu/components/menu-separator.svelte     |  9 +--
 .../menu/components/menu-sub-content.svelte   | 23 +++-----
 .../menu/components/menu-sub-trigger.svelte   | 10 +---
 .../bits/menu/components/menu-trigger.svelte  | 10 +---
 .../menubar/components/menubar-trigger.svelte | 10 +---
 .../bits/menubar/components/menubar.svelte    |  4 +-
 .../popover/components/popover-arrow.svelte   |  9 +--
 .../popover/components/popover-close.svelte   | 10 +---
 .../popover/components/popover-content.svelte | 29 +++-------
 .../popover/components/popover-trigger.svelte | 10 +---
 .../bits/progress/components/progress.svelte  | 11 ++--
 .../components/radio-group-input.svelte       |  9 +--
 .../radio-group-item-indicator.svelte         |  8 ++-
 .../components/radio-group-item.svelte        | 10 +---
 .../radio-group/components/radio-group.svelte | 11 ++--
 .../components/range-calendar-date.svelte     |  6 +-
 .../components/range-calendar-grid.svelte     | 14 ++---
 .../components/range-calendar-heading.svelte  | 15 +++--
 .../range-calendar-next-button.svelte         |  9 +--
 .../range-calendar-prev-button.svelte         | 14 ++---
 .../components/range-calendar.svelte          |  6 +-
 .../select/components/select-arrow.svelte     |  6 +-
 .../select/components/select-content.svelte   | 21 +++----
 .../select/components/select-group.svelte     |  8 +--
 .../select/components/select-input.svelte     | 19 +++---
 .../bits/select/components/select-item.svelte |  7 +--
 .../select/components/select-label.svelte     |  8 +--
 .../select/components/select-trigger.svelte   |  7 +--
 .../separator/components/separator.svelte     |  6 +-
 .../slider/components/slider-range.svelte     |  6 +-
 .../slider/components/slider-thumb.svelte     | 11 +---
 .../bits/slider/components/slider-tick.svelte |  6 +-
 src/lib/bits/slider/components/slider.svelte  |  5 +-
 .../switch/components/switch-thumb.svelte     |  1 +
 src/lib/bits/switch/components/switch.svelte  |  7 +--
 .../bits/tabs/components/tabs-content.svelte  | 12 ++--
 src/lib/bits/tabs/components/tabs-list.svelte | 11 ++--
 .../bits/tabs/components/tabs-trigger.svelte  | 10 +---
 src/lib/bits/tabs/components/tabs.svelte      |  4 +-
 .../components/toggle-group-item.svelte       |  7 +--
 .../components/toggle-group.svelte            | 11 ++--
 src/lib/bits/toggle/components/toggle.svelte  |  7 +--
 .../tooltip/components/tooltip-arrow.svelte   |  6 +-
 .../tooltip/components/tooltip-content.svelte | 19 +++---
 .../tooltip/components/tooltip-trigger.svelte |  7 +--
 src/lib/internal/attrs.ts                     |  4 +-
 131 files changed, 638 insertions(+), 942 deletions(-)
 create mode 100644 src/lib/bits/dropdown-menu/_export.types.ts

diff --git a/package.json b/package.json
index ac96f63ac..ac26f0f00 100644
--- a/package.json
+++ b/package.json
@@ -92,7 +92,7 @@
 	"type": "module",
 	"dependencies": {
 		"@internationalized/date": "^3.5.0",
-		"@melt-ui/svelte": "0.64.2",
+		"@melt-ui/svelte": "0.64.3",
 		"nanoid": "^5.0.4"
 	},
 	"peerDependencies": {
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 8c4521446..67e5bbe70 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -9,8 +9,8 @@ dependencies:
     specifier: ^3.5.0
     version: 3.5.0
   '@melt-ui/svelte':
-    specifier: 0.64.2
-    version: 0.64.2(svelte@4.2.3)
+    specifier: 0.64.3
+    version: 0.64.3(svelte@4.2.3)
   nanoid:
     specifier: ^5.0.4
     version: 5.0.4
@@ -24,7 +24,7 @@ devDependencies:
     version: 0.16.5(svelte@4.2.3)
   '@melt-ui/pp':
     specifier: ^0.1.4
-    version: 0.1.4(@melt-ui/svelte@0.64.2)(svelte@4.2.3)
+    version: 0.1.4(@melt-ui/svelte@0.64.3)(svelte@4.2.3)
   '@playwright/test':
     specifier: ^1.28.1
     version: 1.36.2
@@ -1064,20 +1064,20 @@ packages:
       - supports-color
     dev: true
 
-  /@melt-ui/pp@0.1.4(@melt-ui/svelte@0.64.2)(svelte@4.2.3):
+  /@melt-ui/pp@0.1.4(@melt-ui/svelte@0.64.3)(svelte@4.2.3):
     resolution: {integrity: sha512-zR+Kl3CZJPJBHW8V7YcdQCMI/dVcnW9Ct3yGbVaIywYVStVRS7F9uEDOea3xLLT2WTGodQePzPlUn53yKFu87g==}
     engines: {pnpm: '>=8.6.3'}
     peerDependencies:
       '@melt-ui/svelte': '>= 0.29.0'
       svelte: ^3.55.0 || ^4.0.0 || ^5.0.0-next.1
     dependencies:
-      '@melt-ui/svelte': 0.64.2(svelte@4.2.3)
+      '@melt-ui/svelte': 0.64.3(svelte@4.2.3)
       estree-walker: 3.0.3
       svelte: 4.2.3
     dev: true
 
-  /@melt-ui/svelte@0.64.2(svelte@4.2.3):
-    resolution: {integrity: sha512-p9soqEDmFSiL/XFqywiVEcpOjnWbYU5aEj7UGOQEqEpF4EcUJJpSZOpozqWE2R9ZwP3NIy9BwWzVhQvgys80Ng==}
+  /@melt-ui/svelte@0.64.3(svelte@4.2.3):
+    resolution: {integrity: sha512-6P2H0Kf3mqS3fzCI75k0DHqsMhBYniO4HsOTMqMQFEPKTAiUNRPUD5n8m/p2MQk88ba+RacK+9Mp5GhDdIM9WA==}
     peerDependencies:
       svelte: '>=3 <5'
     dependencies:
diff --git a/src/lib/bits/accordion/components/accordion-content.svelte b/src/lib/bits/accordion/components/accordion-content.svelte
index 7885e830e..364126852 100644
--- a/src/lib/bits/accordion/components/accordion-content.svelte
+++ b/src/lib/bits/accordion/components/accordion-content.svelte
@@ -24,22 +24,18 @@
 	const attrs = getAttrs("content");
 
 	$: builder = $content(props);
-	$: slotProps = {
-		builder,
-		attrs
-	};
+	$: Object.assign(builder, attrs);
 </script>
 
 {#if asChild && $isSelected(props)}
-	<slot {...slotProps} />
+	<slot {builder} />
 {:else if transition && $isSelected(props)}
 	<div
 		transition:transition={transitionConfig}
 		use:melt={builder}
 		{...$$restProps}
-		{...attrs}
 	>
-		<slot {...slotProps} />
+		<slot {builder} />
 	</div>
 {:else if inTransition && outTransition && $isSelected(props)}
 	<div
@@ -47,30 +43,23 @@
 		out:outTransition={outTransitionConfig}
 		use:melt={builder}
 		{...$$restProps}
-		{...attrs}
 	>
-		<slot {...slotProps} />
+		<slot {builder} />
 	</div>
 {:else if inTransition && $isSelected(props)}
-	<div
-		in:inTransition={inTransitionConfig}
-		use:melt={builder}
-		{...$$restProps}
-		{...attrs}
-	>
-		<slot {...slotProps} />
+	<div in:inTransition={inTransitionConfig} use:melt={builder} {...$$restProps}>
+		<slot {builder} />
 	</div>
 {:else if outTransition && $isSelected(props)}
 	<div
 		out:outTransition={outTransitionConfig}
 		use:melt={builder}
 		{...$$restProps}
-		{...attrs}
 	>
-		<slot {...slotProps} />
+		<slot {builder} />
 	</div>
 {:else if $isSelected(props)}
-	<div use:melt={builder} {...$$restProps} {...attrs}>
-		<slot {...slotProps} />
+	<div use:melt={builder} {...$$restProps}>
+		<slot {builder} />
 	</div>
 {/if}
diff --git a/src/lib/bits/accordion/components/accordion-header.svelte b/src/lib/bits/accordion/components/accordion-header.svelte
index e7e49b059..6a3173dbb 100644
--- a/src/lib/bits/accordion/components/accordion-header.svelte
+++ b/src/lib/bits/accordion/components/accordion-header.svelte
@@ -15,16 +15,13 @@
 	const attrs = getAttrs("header");
 
 	$: builder = $header(level);
-	$: slotProps = {
-		builder,
-		attrs
-	};
+	$: Object.assign(builder, attrs);
 </script>
 
 {#if asChild}
-	<slot {...slotProps} />
+	<slot {builder} />
 {:else}
-	<div use:melt={builder} {...$$restProps} {...attrs}>
-		<slot {...slotProps} />
+	<div use:melt={builder} {...$$restProps}>
+		<slot {builder} />
 	</div>
 {/if}
diff --git a/src/lib/bits/accordion/components/accordion-item.svelte b/src/lib/bits/accordion/components/accordion-item.svelte
index 506b7708b..5caf10f66 100644
--- a/src/lib/bits/accordion/components/accordion-item.svelte
+++ b/src/lib/bits/accordion/components/accordion-item.svelte
@@ -12,16 +12,13 @@
 	const attrs = getAttrs("item");
 
 	$: builder = $item(props);
-	$: slotProps = {
-		builder,
-		attrs
-	};
+	$: Object.assign(builder, attrs);
 </script>
 
 {#if asChild}
-	<slot {...slotProps} />
+	<slot {builder} />
 {:else}
-	<div use:melt={builder} {...$$restProps} {...attrs}>
-		<slot {...slotProps} />
+	<div use:melt={builder} {...$$restProps}>
+		<slot {builder} />
 	</div>
 {/if}
diff --git a/src/lib/bits/accordion/components/accordion-trigger.svelte b/src/lib/bits/accordion/components/accordion-trigger.svelte
index 2809edbb5..bfb75aeae 100644
--- a/src/lib/bits/accordion/components/accordion-trigger.svelte
+++ b/src/lib/bits/accordion/components/accordion-trigger.svelte
@@ -14,23 +14,19 @@
 	const attrs = getAttrs("trigger");
 
 	$: builder = $trigger(props);
-	$: slotProps = {
-		builder,
-		attrs
-	};
+	$: Object.assign(builder, attrs);
 </script>
 
 {#if asChild}
-	<slot {...slotProps} />
+	<slot {builder} />
 {:else}
 	<button
 		use:melt={builder}
 		type="button"
 		{...$$restProps}
-		{...attrs}
 		on:m-keydown={dispatch}
 		on:m-click={dispatch}
 	>
-		<slot {...slotProps} />
+		<slot {builder} />
 	</button>
 {/if}
diff --git a/src/lib/bits/accordion/components/accordion.svelte b/src/lib/bits/accordion/components/accordion.svelte
index 7f70402c4..547f528cb 100644
--- a/src/lib/bits/accordion/components/accordion.svelte
+++ b/src/lib/bits/accordion/components/accordion.svelte
@@ -40,16 +40,13 @@
 	$: updateOption("disabled", disabled);
 
 	$: builder = $root;
-	$: slotProps = {
-		builder,
-		attrs
-	};
+	$: Object.assign(builder, attrs);
 </script>
 
 {#if asChild}
-	<slot {...slotProps} />
+	<slot {builder} />
 {:else}
-	<div use:melt={builder} {...$$restProps} {...attrs}>
-		<slot {...slotProps} />
+	<div use:melt={builder} {...$$restProps}>
+		<slot {builder} />
 	</div>
 {/if}
diff --git a/src/lib/bits/alert-dialog/components/alert-dialog-action.svelte b/src/lib/bits/alert-dialog/components/alert-dialog-action.svelte
index d9752b33b..ac1852853 100644
--- a/src/lib/bits/alert-dialog/components/alert-dialog-action.svelte
+++ b/src/lib/bits/alert-dialog/components/alert-dialog-action.svelte
@@ -17,23 +17,19 @@
 	const attrs = getAttrs("action");
 
 	$: builder = $close;
-	$: slotProps = {
-		builder,
-		attrs
-	};
+	$: Object.assign(builder, attrs);
 </script>
 
 {#if asChild}
-	<slot {...slotProps} />
+	<slot {builder} />
 {:else}
 	<button
 		use:melt={builder}
 		type="button"
 		{...$$restProps}
-		{...attrs}
 		on:m-click={dispatch}
 		on:m-keydown={dispatch}
 	>
-		<slot {...slotProps} />
+		<slot {builder} />
 	</button>
 {/if}
diff --git a/src/lib/bits/alert-dialog/components/alert-dialog-cancel.svelte b/src/lib/bits/alert-dialog/components/alert-dialog-cancel.svelte
index 241594ec0..fe406cd47 100644
--- a/src/lib/bits/alert-dialog/components/alert-dialog-cancel.svelte
+++ b/src/lib/bits/alert-dialog/components/alert-dialog-cancel.svelte
@@ -17,23 +17,19 @@
 	const attrs = getAttrs("cancel");
 
 	$: builder = $close;
-	$: slotProps = {
-		builder,
-		attrs
-	};
+	$: Object.assign(builder, attrs);
 </script>
 
 {#if asChild}
-	<slot {...slotProps} />
+	<slot {builder} />
 {:else}
 	<button
 		use:melt={builder}
 		type="button"
 		{...$$restProps}
-		{...attrs}
 		on:m-click={dispatch}
 		on:m-keydown={dispatch}
 	>
-		<slot {...slotProps} />
+		<slot {builder} />
 	</button>
 {/if}
diff --git a/src/lib/bits/alert-dialog/components/alert-dialog-content.svelte b/src/lib/bits/alert-dialog/components/alert-dialog-content.svelte
index 7a055fb68..d8af052ce 100644
--- a/src/lib/bits/alert-dialog/components/alert-dialog-content.svelte
+++ b/src/lib/bits/alert-dialog/components/alert-dialog-content.svelte
@@ -31,22 +31,18 @@
 		ids.content.set(id);
 	}
 	$: builder = $content;
-	$: slotProps = {
-		builder,
-		attrs
-	};
+	$: Object.assign(builder, attrs);
 </script>
 
 {#if asChild && $open}
-	<slot {...slotProps} />
+	<slot {builder} />
 {:else if transition && $open}
 	<div
 		transition:transition={transitionConfig}
 		use:melt={builder}
 		{...$$restProps}
-		{...attrs}
 	>
-		<slot {...slotProps} />
+		<slot {builder} />
 	</div>
 {:else if inTransition && outTransition && $open}
 	<div
@@ -54,30 +50,23 @@
 		out:outTransition={outTransitionConfig}
 		use:melt={builder}
 		{...$$restProps}
-		{...attrs}
 	>
-		<slot {...slotProps} />
+		<slot {builder} />
 	</div>
 {:else if inTransition && $open}
-	<div
-		in:inTransition={inTransitionConfig}
-		use:melt={builder}
-		{...$$restProps}
-		{...attrs}
-	>
-		<slot {...slotProps} />
+	<div in:inTransition={inTransitionConfig} use:melt={builder} {...$$restProps}>
+		<slot {builder} />
 	</div>
 {:else if outTransition && $open}
 	<div
 		out:outTransition={outTransitionConfig}
 		use:melt={builder}
 		{...$$restProps}
-		{...attrs}
 	>
-		<slot {...slotProps} />
+		<slot {builder} />
 	</div>
 {:else if $open}
-	<div use:melt={builder} {...$$restProps} {...attrs}>
-		<slot {...slotProps} />
+	<div use:melt={builder} {...$$restProps}>
+		<slot {builder} />
 	</div>
 {/if}
diff --git a/src/lib/bits/alert-dialog/components/alert-dialog-description.svelte b/src/lib/bits/alert-dialog/components/alert-dialog-description.svelte
index e0570d2ee..299ee6967 100644
--- a/src/lib/bits/alert-dialog/components/alert-dialog-description.svelte
+++ b/src/lib/bits/alert-dialog/components/alert-dialog-description.svelte
@@ -19,16 +19,13 @@
 		ids.description.set(id);
 	}
 	$: builder = $description;
-	$: slotProps = {
-		builder,
-		attrs
-	};
+	$: Object.assign(builder, attrs);
 </script>
 
 {#if asChild}
-	<slot {...slotProps} />
+	<slot {builder} />
 {:else}
-	<div use:melt={builder} {...$$restProps} {...attrs}>
-		<slot {...slotProps} />
+	<div use:melt={builder} {...$$restProps}>
+		<slot {builder} />
 	</div>
 {/if}
diff --git a/src/lib/bits/alert-dialog/components/alert-dialog-overlay.svelte b/src/lib/bits/alert-dialog/components/alert-dialog-overlay.svelte
index a87704d05..a2e1962eb 100644
--- a/src/lib/bits/alert-dialog/components/alert-dialog-overlay.svelte
+++ b/src/lib/bits/alert-dialog/components/alert-dialog-overlay.svelte
@@ -26,20 +26,16 @@
 	const attrs = getAttrs("overlay");
 
 	$: builder = $overlay;
-	$: slotProps = {
-		builder,
-		attrs
-	};
+	$: Object.assign(builder, attrs);
 </script>
 
 {#if asChild && $open}
-	<slot {...slotProps} />
+	<slot {builder} />
 {:else if transition && $open}
 	<div
 		transition:transition={transitionConfig}
 		use:melt={builder}
 		{...$$restProps}
-		{...attrs}
 	/>
 {:else if inTransition && outTransition && $open}
 	<div
@@ -53,15 +49,13 @@
 		in:inTransition={inTransitionConfig}
 		use:melt={builder}
 		{...$$restProps}
-		{...attrs}
 	/>
 {:else if outTransition && $open}
 	<div
 		out:outTransition={outTransitionConfig}
 		use:melt={builder}
 		{...$$restProps}
-		{...attrs}
 	/>
 {:else if $open}
-	<div use:melt={builder} {...$$restProps} {...attrs} />
+	<div use:melt={builder} {...$$restProps} />
 {/if}
diff --git a/src/lib/bits/alert-dialog/components/alert-dialog-portal.svelte b/src/lib/bits/alert-dialog/components/alert-dialog-portal.svelte
index b99b3e54a..a0458450a 100644
--- a/src/lib/bits/alert-dialog/components/alert-dialog-portal.svelte
+++ b/src/lib/bits/alert-dialog/components/alert-dialog-portal.svelte
@@ -13,16 +13,13 @@
 	const attrs = getAttrs("portal");
 
 	$: builder = $portalled;
-	$: slotProps = {
-		builder,
-		attrs
-	};
+	$: Object.assign(builder, attrs);
 </script>
 
 {#if asChild}
-	<slot {...slotProps} />
+	<slot {builder} />
 {:else}
-	<div use:melt={builder} {...$$restProps} {...attrs}>
-		<slot {...slotProps} />
+	<div use:melt={builder} {...$$restProps}>
+		<slot {builder} />
 	</div>
 {/if}
diff --git a/src/lib/bits/alert-dialog/components/alert-dialog-title.svelte b/src/lib/bits/alert-dialog/components/alert-dialog-title.svelte
index 73e494952..baeec477a 100644
--- a/src/lib/bits/alert-dialog/components/alert-dialog-title.svelte
+++ b/src/lib/bits/alert-dialog/components/alert-dialog-title.svelte
@@ -21,16 +21,13 @@
 	}
 
 	$: builder = $title;
-	$: slotProps = {
-		builder,
-		attrs
-	};
+	$: Object.assign(builder, attrs);
 </script>
 
 {#if asChild}
-	<slot {...slotProps} />
+	<slot {builder} />
 {:else}
-	<svelte:element this={level} use:melt={builder} {...$$restProps} {...attrs}>
-		<slot {...slotProps} />
+	<svelte:element this={level} use:melt={builder} {...$$restProps}>
+		<slot {builder} />
 	</svelte:element>
 {/if}
diff --git a/src/lib/bits/alert-dialog/components/alert-dialog-trigger.svelte b/src/lib/bits/alert-dialog/components/alert-dialog-trigger.svelte
index 6f3dcd2fa..2d343e56d 100644
--- a/src/lib/bits/alert-dialog/components/alert-dialog-trigger.svelte
+++ b/src/lib/bits/alert-dialog/components/alert-dialog-trigger.svelte
@@ -17,14 +17,11 @@
 	const attrs = getAttrs("trigger");
 
 	$: builder = $trigger;
-	$: slotProps = {
-		builder,
-		attrs
-	};
+	$: Object.assign(builder, attrs);
 </script>
 
 {#if asChild}
-	<slot {...slotProps} />
+	<slot {builder} />
 {:else}
 	<button
 		use:melt={builder}
@@ -32,8 +29,7 @@
 		on:m-click={dispatch}
 		on:m-keydown={dispatch}
 		{...$$restProps}
-		{...attrs}
 	>
-		<slot {...slotProps} />
+		<slot {builder} />
 	</button>
 {/if}
diff --git a/src/lib/bits/avatar/components/avatar-fallback.svelte b/src/lib/bits/avatar/components/avatar-fallback.svelte
index bee375a04..4d05e46f3 100644
--- a/src/lib/bits/avatar/components/avatar-fallback.svelte
+++ b/src/lib/bits/avatar/components/avatar-fallback.svelte
@@ -13,16 +13,13 @@
 	const attrs = getAttrs("fallback");
 
 	$: builder = $fallback;
-	$: slotProps = {
-		builder,
-		attrs
-	};
+	$: Object.assign(builder, attrs);
 </script>
 
 {#if asChild}
-	<slot {...slotProps} />
+	<slot {builder} />
 {:else}
-	<span use:melt={builder} {...$$restProps} {...attrs}>
-		<slot {...slotProps} />
+	<span use:melt={builder} {...$$restProps}>
+		<slot {builder} />
 	</span>
 {/if}
diff --git a/src/lib/bits/avatar/components/avatar-image.svelte b/src/lib/bits/avatar/components/avatar-image.svelte
index 23729ffb0..a90daca42 100644
--- a/src/lib/bits/avatar/components/avatar-image.svelte
+++ b/src/lib/bits/avatar/components/avatar-image.svelte
@@ -12,15 +12,13 @@
 	const attrs = getAttrs("image");
 
 	$: image = getImage(src).elements.image;
+
 	$: builder = $image;
-	$: slotProps = {
-		builder,
-		attrs
-	};
+	$: Object.assign(builder, attrs);
 </script>
 
 {#if asChild}
-	<slot {...slotProps} />
+	<slot {builder} />
 {:else}
-	<img use:melt={builder} {alt} {...$$restProps} {...attrs} />
+	<img use:melt={builder} {alt} {...$$restProps} />
 {/if}
diff --git a/src/lib/bits/calendar/components/calendar-date.svelte b/src/lib/bits/calendar/components/calendar-date.svelte
index 77de19def..48d3b22ed 100644
--- a/src/lib/bits/calendar/components/calendar-date.svelte
+++ b/src/lib/bits/calendar/components/calendar-date.svelte
@@ -15,15 +15,14 @@
 		elements: { cell },
 		helpers: { isDateDisabled, isDateUnavailable, isDateSelected }
 	} = getCtx();
+	const attrs = getAttrs("date");
 
 	$: builder = $cell(date, month);
-
-	const attrs = getAttrs("date");
+	$: Object.assign(builder, attrs);
 	const dispatch = createDispatcher();
 
 	$: slotProps = {
 		builder,
-		attrs,
 		disabled: $isDateDisabled(date),
 		unavailable: $isDateUnavailable(date),
 		selected: $isDateSelected(date)
@@ -33,7 +32,7 @@
 {#if asChild}
 	<slot {...slotProps} />
 {:else}
-	<div use:melt={builder} {...attrs} {...$$restProps} on:m-click={dispatch}>
+	<div use:melt={builder} {...$$restProps} on:m-click={dispatch}>
 		<slot {...slotProps}>
 			{date.day}
 		</slot>
diff --git a/src/lib/bits/calendar/components/calendar-grid.svelte b/src/lib/bits/calendar/components/calendar-grid.svelte
index 4a27b674f..7ff153ee6 100644
--- a/src/lib/bits/calendar/components/calendar-grid.svelte
+++ b/src/lib/bits/calendar/components/calendar-grid.svelte
@@ -11,20 +11,16 @@
 		elements: { grid }
 	} = getCtx();
 
-	$: builder = $grid;
-
 	const attrs = getAttrs("grid");
 
-	$: slotProps = {
-		builder,
-		attrs
-	};
+	$: builder = $grid;
+	$: Object.assign(builder, attrs);
 </script>
 
 {#if asChild}
-	<slot {...slotProps} />
+	<slot {builder} />
 {:else}
-	<table use:melt={builder} {...$$restProps} {...attrs}>
-		<slot {...slotProps} />
+	<table use:melt={builder} {...$$restProps}>
+		<slot {builder} />
 	</table>
 {/if}
diff --git a/src/lib/bits/calendar/components/calendar-heading.svelte b/src/lib/bits/calendar/components/calendar-heading.svelte
index 1883c2dea..e55b6dea7 100644
--- a/src/lib/bits/calendar/components/calendar-heading.svelte
+++ b/src/lib/bits/calendar/components/calendar-heading.svelte
@@ -12,12 +12,13 @@
 		states: { headingValue }
 	} = getCtx();
 
-	$: builder = $heading;
 	const attrs = getAttrs("heading");
 
+	$: builder = $heading;
+	$: Object.assign(builder, attrs);
+
 	$: slotProps = {
 		builder,
-		attrs,
 		headingValue: $headingValue
 	};
 </script>
@@ -25,7 +26,7 @@
 {#if asChild}
 	<slot {...slotProps} />
 {:else}
-	<div use:melt={builder} {...$$restProps} {...attrs}>
+	<div use:melt={builder} {...$$restProps}>
 		<slot {...slotProps}>
 			{$headingValue}
 		</slot>
diff --git a/src/lib/bits/calendar/components/calendar-next-button.svelte b/src/lib/bits/calendar/components/calendar-next-button.svelte
index 106c0f789..3863a6063 100644
--- a/src/lib/bits/calendar/components/calendar-next-button.svelte
+++ b/src/lib/bits/calendar/components/calendar-next-button.svelte
@@ -13,27 +13,23 @@
 		elements: { nextButton }
 	} = getCtx();
 
+	const attrs = getAttrs("next-button");
+
 	$: builder = $nextButton;
+	$: Object.assign(builder, attrs);
 
-	const attrs = getAttrs("next-button");
 	const dispatch = createDispatcher();
-
-	$: slotProps = {
-		builder,
-		attrs
-	};
 </script>
 
 {#if asChild}
-	<slot {...slotProps} />
+	<slot {builder} />
 {:else}
 	<button
 		use:melt={builder}
 		type="button"
 		{...$$restProps}
-		{...attrs}
 		on:m-click={dispatch}
 	>
-		<slot {...slotProps} />
+		<slot {builder} />
 	</button>
 {/if}
diff --git a/src/lib/bits/calendar/components/calendar-prev-button.svelte b/src/lib/bits/calendar/components/calendar-prev-button.svelte
index ad2c63c15..d9749f335 100644
--- a/src/lib/bits/calendar/components/calendar-prev-button.svelte
+++ b/src/lib/bits/calendar/components/calendar-prev-button.svelte
@@ -13,27 +13,23 @@
 		elements: { prevButton }
 	} = getCtx();
 
+	const attrs = getAttrs("prev-button");
+
 	$: builder = $prevButton;
+	$: Object.assign(builder, attrs);
 
-	const attrs = getAttrs("prev-button");
 	const dispatch = createDispatcher();
-
-	$: slotProps = {
-		builder,
-		attrs
-	};
 </script>
 
 {#if asChild}
-	<slot {...slotProps} />
+	<slot {builder} />
 {:else}
 	<button
 		use:melt={builder}
 		type="button"
 		{...$$restProps}
-		{...attrs}
 		on:m-click={dispatch}
 	>
-		<slot {...slotProps} />
+		<slot {builder} />
 	</button>
 {/if}
diff --git a/src/lib/bits/calendar/components/calendar.svelte b/src/lib/bits/calendar/components/calendar.svelte
index 54221dca5..61e83dd1b 100644
--- a/src/lib/bits/calendar/components/calendar.svelte
+++ b/src/lib/bits/calendar/components/calendar.svelte
@@ -96,14 +96,14 @@
 	$: updateOption("weekdayFormat", weekdayFormat);
 	$: updateOption("numberOfMonths", numberOfMonths);
 
-	$: builder = $calendar;
-
 	const attrs = getAttrs("root");
+
+	$: builder = $calendar;
+	$: Object.assign(builder, attrs);
 	const dispatch = createDispatcher();
 
 	$: slotProps = {
 		builder,
-		attrs,
 		months: $months,
 		weekdays: $weekdays
 	};
@@ -112,7 +112,7 @@
 {#if asChild}
 	<slot {...slotProps} />
 {:else}
-	<div use:melt={builder} {...$$restProps} {...attrs} on:m-keydown={dispatch}>
+	<div use:melt={builder} {...$$restProps} on:m-keydown={dispatch}>
 		<slot {...slotProps} />
 	</div>
 {/if}
diff --git a/src/lib/bits/checkbox/components/checkbox-indicator.svelte b/src/lib/bits/checkbox/components/checkbox-indicator.svelte
index 4fe15bc7b..a28221bc0 100644
--- a/src/lib/bits/checkbox/components/checkbox-indicator.svelte
+++ b/src/lib/bits/checkbox/components/checkbox-indicator.svelte
@@ -7,10 +7,20 @@
 	export let asChild: $$Props["asChild"] = false;
 
 	const {
-		helpers: { isChecked, isIndeterminate }
+		helpers: { isChecked, isIndeterminate },
+		states: { checked }
 	} = getCtx();
 
-	const attrs = getAttrs("indicator");
+	function getStateAttr(state: boolean | "indeterminate") {
+		if (state === "indeterminate") return "indeterminate";
+		if (state) return "checked";
+		return "unchecked";
+	}
+
+	$: attrs = {
+		...getAttrs("indicator"),
+		"data-state": getStateAttr($checked)
+	};
 
 	$: slotProps = {
 		isChecked: $isChecked,
diff --git a/src/lib/bits/checkbox/components/checkbox.svelte b/src/lib/bits/checkbox/components/checkbox.svelte
index cbcfed20d..658ceba38 100644
--- a/src/lib/bits/checkbox/components/checkbox.svelte
+++ b/src/lib/bits/checkbox/components/checkbox.svelte
@@ -34,8 +34,8 @@
 	});
 
 	const dispatch = createDispatcher();
-	const attrs = getAttrs("root");
 
+	$: attrs = { ...getAttrs("root"), disabled: disabled ? true : undefined };
 	$: checked !== undefined && localChecked.set(checked);
 
 	$: updateOption("disabled", disabled);
@@ -44,27 +44,19 @@
 	$: updateOption("value", value);
 
 	$: builder = $root;
-	$: slotProps = {
-		builder,
-		attrs: {
-			...attrs,
-			disabled: disabled ? true : undefined
-		}
-	};
+	$: Object.assign(builder, attrs);
 </script>
 
 {#if asChild}
-	<slot {...slotProps} />
+	<slot {builder} />
 {:else}
 	<button
 		use:melt={builder}
 		type="button"
 		{...$$restProps}
-		{...attrs}
 		on:m-click={dispatch}
 		on:m-keydown={dispatch}
-		disabled={disabled ? true : undefined}
 	>
-		<slot {...slotProps} />
+		<slot {builder} />
 	</button>
 {/if}
diff --git a/src/lib/bits/collapsible/_export.types.ts b/src/lib/bits/collapsible/_export.types.ts
index 69b66ed40..2a6f4dc97 100644
--- a/src/lib/bits/collapsible/_export.types.ts
+++ b/src/lib/bits/collapsible/_export.types.ts
@@ -1,3 +1,9 @@
+/**
+ * These types are exported from the root of the package for
+ * convenience. We have to prefix them with the component name to avoid
+ * conflicts with other components.
+ */
+
 import type {
 	Props,
 	ContentProps,
diff --git a/src/lib/bits/collapsible/components/collapsible-content.svelte b/src/lib/bits/collapsible/components/collapsible-content.svelte
index a29e53f41..485273d7b 100644
--- a/src/lib/bits/collapsible/components/collapsible-content.svelte
+++ b/src/lib/bits/collapsible/components/collapsible-content.svelte
@@ -25,22 +25,18 @@
 	const attrs = getAttrs("content");
 
 	$: builder = $content;
-	$: slotProps = {
-		builder,
-		attrs
-	};
+	$: Object.assign(builder, attrs);
 </script>
 
 {#if asChild && $open}
-	<slot {...slotProps} />
+	<slot {builder} />
 {:else if transition && $open}
 	<div
 		transition:transition={transitionConfig}
 		use:melt={builder}
 		{...$$restProps}
-		{...attrs}
 	>
-		<slot {...slotProps} />
+		<slot {builder} />
 	</div>
 {:else if inTransition && outTransition && $open}
 	<div
@@ -48,30 +44,23 @@
 		out:outTransition={outTransitionConfig}
 		use:melt={builder}
 		{...$$restProps}
-		{...attrs}
 	>
-		<slot {...slotProps} />
+		<slot {builder} />
 	</div>
 {:else if inTransition && $open}
-	<div
-		in:inTransition={inTransitionConfig}
-		use:melt={builder}
-		{...$$restProps}
-		{...attrs}
-	>
-		<slot {...slotProps} />
+	<div in:inTransition={inTransitionConfig} use:melt={builder} {...$$restProps}>
+		<slot {builder} />
 	</div>
 {:else if outTransition && $open}
 	<div
 		out:outTransition={outTransitionConfig}
 		use:melt={builder}
 		{...$$restProps}
-		{...attrs}
 	>
-		<slot {...slotProps} />
+		<slot {builder} />
 	</div>
 {:else if $open}
-	<div use:melt={builder} {...$$restProps} {...attrs}>
-		<slot {...slotProps} />
+	<div use:melt={builder} {...$$restProps}>
+		<slot {builder} />
 	</div>
 {/if}
diff --git a/src/lib/bits/collapsible/components/collapsible-trigger.svelte b/src/lib/bits/collapsible/components/collapsible-trigger.svelte
index 431c88d10..da8758d18 100644
--- a/src/lib/bits/collapsible/components/collapsible-trigger.svelte
+++ b/src/lib/bits/collapsible/components/collapsible-trigger.svelte
@@ -17,22 +17,18 @@
 	const attrs = getAttrs("trigger");
 
 	$: builder = $trigger;
-	$: slotProps = {
-		builder,
-		attrs
-	};
+	$: Object.assign(builder, attrs);
 </script>
 
 {#if asChild}
-	<slot {...slotProps} />
+	<slot {builder} />
 {:else}
 	<button
 		use:melt={builder}
 		type="button"
 		{...$$restProps}
-		{...attrs}
 		on:m-click={dispatch}
 	>
-		<slot {...slotProps} />
+		<slot {builder} />
 	</button>
 {/if}
diff --git a/src/lib/bits/collapsible/components/collapsible.svelte b/src/lib/bits/collapsible/components/collapsible.svelte
index ac9f9b6fe..d71f94287 100644
--- a/src/lib/bits/collapsible/components/collapsible.svelte
+++ b/src/lib/bits/collapsible/components/collapsible.svelte
@@ -28,18 +28,17 @@
 	const attrs = getAttrs("root");
 
 	$: open !== undefined && localOpen.set(open);
+
 	$: updateOption("disabled", disabled);
+
 	$: builder = $root;
-	$: slotProps = {
-		builder,
-		attrs
-	};
+	$: Object.assign(builder, attrs);
 </script>
 
 {#if asChild}
-	<slot {...slotProps} />
+	<slot {builder} />
 {:else}
-	<div use:melt={builder} {...$$restProps} {...attrs}>
-		<slot {...slotProps} />
+	<div use:melt={builder} {...$$restProps}>
+		<slot {builder} />
 	</div>
 {/if}
diff --git a/src/lib/bits/context-menu/components/context-menu-content.svelte b/src/lib/bits/context-menu/components/context-menu-content.svelte
index d259107bb..4263d0660 100644
--- a/src/lib/bits/context-menu/components/context-menu-content.svelte
+++ b/src/lib/bits/context-menu/components/context-menu-content.svelte
@@ -38,10 +38,7 @@
 		ids.menu.set(id);
 	}
 	$: builder = $menu;
-	$: slotProps = {
-		builder,
-		attrs
-	};
+	$: Object.assign(builder, attrs);
 
 	$: updatePositioning({
 		alignOffset,
@@ -53,16 +50,15 @@
 </script>
 
 {#if asChild && $open}
-	<slot {...slotProps} />
+	<slot {builder} />
 {:else if transition && $open}
 	<div
 		transition:transition={transitionConfig}
 		use:melt={builder}
 		{...$$restProps}
-		{...attrs}
 		on:m-keydown={dispatch}
 	>
-		<slot {...slotProps} />
+		<slot {builder} />
 	</div>
 {:else if inTransition && outTransition && $open}
 	<div
@@ -70,33 +66,30 @@
 		out:outTransition={outTransitionConfig}
 		use:melt={builder}
 		{...$$restProps}
-		{...attrs}
 		on:m-keydown={dispatch}
 	>
-		<slot {...slotProps} />
+		<slot {builder} />
 	</div>
 {:else if inTransition && $open}
 	<div
 		in:inTransition={inTransitionConfig}
 		use:melt={builder}
 		{...$$restProps}
-		{...attrs}
 		on:m-keydown={dispatch}
 	>
-		<slot {...slotProps} />
+		<slot {builder} />
 	</div>
 {:else if outTransition && $open}
 	<div
 		out:outTransition={outTransitionConfig}
 		use:melt={builder}
 		{...$$restProps}
-		{...attrs}
 		on:m-keydown={dispatch}
 	>
-		<slot {...slotProps} />
+		<slot {builder} />
 	</div>
 {:else if $open}
-	<div use:melt={builder} {...$$restProps} {...attrs} on:m-keydown={dispatch}>
-		<slot {...slotProps} />
+	<div use:melt={builder} {...$$restProps} on:m-keydown={dispatch}>
+		<slot {builder} />
 	</div>
 {/if}
diff --git a/src/lib/bits/context-menu/components/context-menu-trigger.svelte b/src/lib/bits/context-menu/components/context-menu-trigger.svelte
index f640447a7..b8c69febe 100644
--- a/src/lib/bits/context-menu/components/context-menu-trigger.svelte
+++ b/src/lib/bits/context-menu/components/context-menu-trigger.svelte
@@ -21,27 +21,23 @@
 	$: if (id) {
 		ids.trigger.set(id);
 	}
-	$: builder = $trigger;
 
-	$: slotProps = {
-		builder,
-		attrs
-	};
+	$: builder = $trigger;
+	$: Object.assign(builder, attrs);
 </script>
 
 {#if asChild}
-	<slot {...slotProps} />
+	<slot {builder} />
 {:else}
 	<div
 		use:melt={builder}
 		{...$$restProps}
-		{...attrs}
 		on:m-contextmenu={dispatch}
 		on:m-pointercancel={dispatch}
 		on:m-pointerdown={dispatch}
 		on:m-pointermove={dispatch}
 		on:m-pointerup={dispatch}
 	>
-		<slot {...slotProps} />
+		<slot {builder} />
 	</div>
 {/if}
diff --git a/src/lib/bits/date-field/components/date-field-input.svelte b/src/lib/bits/date-field/components/date-field-input.svelte
index e0a654bf1..db579420f 100644
--- a/src/lib/bits/date-field/components/date-field-input.svelte
+++ b/src/lib/bits/date-field/components/date-field-input.svelte
@@ -21,9 +21,10 @@
 	const attrs = getAttrs("input");
 
 	$: builder = $field;
+	$: Object.assign(builder, attrs);
+
 	$: slotProps = {
 		builder,
-		attrs,
 		segments: $segmentContents
 	};
 </script>
@@ -31,7 +32,7 @@
 {#if asChild}
 	<slot {...slotProps} />
 {:else}
-	<div use:melt={builder} {...$$restProps} {...attrs}>
+	<div use:melt={builder} {...$$restProps}>
 		<slot {...slotProps} />
 	</div>
 {/if}
diff --git a/src/lib/bits/date-field/components/date-field-label.svelte b/src/lib/bits/date-field/components/date-field-label.svelte
index 52773b0d5..81a9180fe 100644
--- a/src/lib/bits/date-field/components/date-field-label.svelte
+++ b/src/lib/bits/date-field/components/date-field-label.svelte
@@ -20,16 +20,13 @@
 	const attrs = getAttrs("label");
 
 	$: builder = $label;
-	$: slotProps = {
-		builder,
-		attrs
-	};
+	$: Object.assign(builder, attrs);
 </script>
 
 {#if asChild}
-	<slot {...slotProps} />
+	<slot {builder} />
 {:else}
-	<span use:melt={builder} {...$$restProps} {...attrs}>
-		<slot {...slotProps} />
+	<span use:melt={builder} {...$$restProps}>
+		<slot {builder} />
 	</span>
 {/if}
diff --git a/src/lib/bits/date-field/components/date-field-segment.svelte b/src/lib/bits/date-field/components/date-field-segment.svelte
index a10adc361..3ac538903 100644
--- a/src/lib/bits/date-field/components/date-field-segment.svelte
+++ b/src/lib/bits/date-field/components/date-field-segment.svelte
@@ -24,23 +24,19 @@
 	const dispatch = createDispatcher();
 
 	$: builder = $segment(part);
-	$: slotProps = {
-		builder,
-		attrs
-	};
+	$: Object.assign(builder, attrs);
 </script>
 
 {#if asChild}
-	<slot {...slotProps} />
+	<slot {builder} />
 {:else}
 	<div
 		use:melt={builder}
 		{...$$restProps}
-		{...attrs}
 		on:m-click={dispatch}
 		on:m-focusout={dispatch}
 		on:m-keydown={dispatch}
 	>
-		<slot {...slotProps} />
+		<slot {builder} />
 	</div>
 {/if}
diff --git a/src/lib/bits/date-picker/components/date-picker-arrow.svelte b/src/lib/bits/date-picker/components/date-picker-arrow.svelte
index b85456909..ae66538aa 100644
--- a/src/lib/bits/date-picker/components/date-picker-arrow.svelte
+++ b/src/lib/bits/date-picker/components/date-picker-arrow.svelte
@@ -18,14 +18,11 @@
 	$: updateOption("arrowSize", size);
 
 	$: builder = $arrow;
-	$: slotProps = {
-		builder,
-		attrs
-	};
+	$: Object.assign(builder, attrs);
 </script>
 
 {#if asChild}
-	<slot {...slotProps} />
+	<slot {builder} />
 {:else}
-	<div use:melt={builder} {...$$restProps} {...attrs} />
+	<div use:melt={builder} {...$$restProps} />
 {/if}
diff --git a/src/lib/bits/date-picker/components/date-picker-calendar.svelte b/src/lib/bits/date-picker/components/date-picker-calendar.svelte
index f1d67e960..9c72b1d13 100644
--- a/src/lib/bits/date-picker/components/date-picker-calendar.svelte
+++ b/src/lib/bits/date-picker/components/date-picker-calendar.svelte
@@ -20,14 +20,14 @@
 		ids.calendar.calendar.set(id);
 	}
 
-	$: builder = $calendar;
-
 	const attrs = getCalendarAttrs("root");
 	const dispatch = createDispatcher();
 
+	$: builder = $calendar;
+	$: Object.assign(builder, attrs);
+
 	$: slotProps = {
 		builder,
-		attrs,
 		months: $months,
 		weekdays: $weekdays
 	};
@@ -36,7 +36,7 @@
 {#if asChild}
 	<slot {...slotProps} />
 {:else}
-	<div use:melt={builder} {...$$restProps} {...attrs} on:m-keydown={dispatch}>
+	<div use:melt={builder} {...$$restProps} on:m-keydown={dispatch}>
 		<slot {...slotProps} />
 	</div>
 {/if}
diff --git a/src/lib/bits/date-picker/components/date-picker-close.svelte b/src/lib/bits/date-picker/components/date-picker-close.svelte
index 4c7fefd3f..07c3bd110 100644
--- a/src/lib/bits/date-picker/components/date-picker-close.svelte
+++ b/src/lib/bits/date-picker/components/date-picker-close.svelte
@@ -17,23 +17,19 @@
 	const attrs = getPopoverAttrs("close");
 
 	$: builder = $close;
-	$: slotProps = {
-		builder,
-		attrs
-	};
+	$: Object.assign(builder, attrs);
 </script>
 
 {#if asChild}
-	<slot {...slotProps} />
+	<slot {builder} />
 {:else}
 	<button
 		use:melt={builder}
 		type="button"
 		{...$$restProps}
-		{...attrs}
 		on:m-click={dispatch}
 		on:m-keydown={dispatch}
 	>
-		<slot {...slotProps} />
+		<slot {builder} />
 	</button>
 {/if}
diff --git a/src/lib/bits/date-picker/components/date-picker-content.svelte b/src/lib/bits/date-picker/components/date-picker-content.svelte
index b237fcaff..dd2dffd99 100644
--- a/src/lib/bits/date-picker/components/date-picker-content.svelte
+++ b/src/lib/bits/date-picker/components/date-picker-content.svelte
@@ -41,11 +41,9 @@
 	$: if (id) {
 		ids.popover.content.set(id);
 	}
+
 	$: builder = $content;
-	$: slotProps = {
-		builder,
-		attrs
-	};
+	$: Object.assign(builder, attrs);
 
 	$: updatePositioning({
 		side,
@@ -63,15 +61,14 @@
 </script>
 
 {#if asChild && $open}
-	<slot {...slotProps} />
+	<slot {builder} />
 {:else if transition && $open}
 	<div
 		transition:transition={transitionConfig}
 		use:melt={builder}
 		{...$$restProps}
-		{...attrs}
 	>
-		<slot {...slotProps} />
+		<slot {builder} />
 	</div>
 {:else if inTransition && outTransition && $open}
 	<div
@@ -79,30 +76,23 @@
 		out:outTransition={outTransitionConfig}
 		use:melt={builder}
 		{...$$restProps}
-		{...attrs}
 	>
-		<slot {...slotProps} />
+		<slot {builder} />
 	</div>
 {:else if inTransition && $open}
-	<div
-		in:inTransition={inTransitionConfig}
-		use:melt={builder}
-		{...$$restProps}
-		{...attrs}
-	>
-		<slot {...slotProps} />
+	<div in:inTransition={inTransitionConfig} use:melt={builder} {...$$restProps}>
+		<slot {builder} />
 	</div>
 {:else if outTransition && $open}
 	<div
 		out:outTransition={outTransitionConfig}
 		use:melt={builder}
 		{...$$restProps}
-		{...attrs}
 	>
-		<slot {...slotProps} />
+		<slot {builder} />
 	</div>
 {:else if $open}
-	<div use:melt={builder} {...$$restProps} {...attrs}>
-		<slot {...slotProps} />
+	<div use:melt={builder} {...$$restProps}>
+		<slot {builder} />
 	</div>
 {/if}
diff --git a/src/lib/bits/date-picker/components/date-picker-date.svelte b/src/lib/bits/date-picker/components/date-picker-date.svelte
index b1e5a48e5..e3472b020 100644
--- a/src/lib/bits/date-picker/components/date-picker-date.svelte
+++ b/src/lib/bits/date-picker/components/date-picker-date.svelte
@@ -16,14 +16,14 @@
 		helpers: { isDateDisabled, isDateUnavailable, isDateSelected }
 	} = getCtx();
 
-	$: builder = $cell(date, month);
-
 	const attrs = getCalendarAttrs("date");
 	const dispatch = createDispatcher();
 
+	$: builder = $cell(date, month);
+	$: Object.assign(builder, attrs);
+
 	$: slotProps = {
 		builder,
-		attrs,
 		disabled: $isDateDisabled(date),
 		unavailable: $isDateUnavailable(date),
 		selected: $isDateSelected(date)
@@ -33,7 +33,7 @@
 {#if asChild}
 	<slot {...slotProps} />
 {:else}
-	<div use:melt={builder} {...attrs} {...$$restProps} on:m-click={dispatch}>
+	<div use:melt={builder} {...$$restProps} on:m-click={dispatch}>
 		<slot {...slotProps}>
 			{date.day}
 		</slot>
diff --git a/src/lib/bits/date-picker/components/date-picker-grid.svelte b/src/lib/bits/date-picker/components/date-picker-grid.svelte
index cb11be0e0..39c4e4549 100644
--- a/src/lib/bits/date-picker/components/date-picker-grid.svelte
+++ b/src/lib/bits/date-picker/components/date-picker-grid.svelte
@@ -11,19 +11,16 @@
 		elements: { grid }
 	} = getCtx();
 
-	$: builder = $grid;
 	const attrs = getCalendarAttrs("grid");
 
-	$: slotProps = {
-		builder,
-		attrs
-	};
+	$: builder = $grid;
+	$: Object.assign(builder, attrs);
 </script>
 
 {#if asChild}
-	<slot {...slotProps} />
+	<slot {builder} />
 {:else}
-	<table use:melt={builder} {...$$restProps} {...attrs}>
-		<slot {...slotProps} />
+	<table use:melt={builder} {...$$restProps}>
+		<slot {builder} />
 	</table>
 {/if}
diff --git a/src/lib/bits/date-picker/components/date-picker-heading.svelte b/src/lib/bits/date-picker/components/date-picker-heading.svelte
index b67adec42..3dafde7f4 100644
--- a/src/lib/bits/date-picker/components/date-picker-heading.svelte
+++ b/src/lib/bits/date-picker/components/date-picker-heading.svelte
@@ -12,15 +12,21 @@
 		states: { headingValue }
 	} = getCtx();
 
-	$: builder = $heading;
 	const attrs = getCalendarAttrs("heading");
+	$: builder = $heading;
+	$: Object.assign(builder, attrs);
+
+	$: slotProps = {
+		builder,
+		headingValue: $headingValue
+	};
 </script>
 
 {#if asChild}
-	<slot {builder} {attrs} headingValue={$headingValue} />
+	<slot {...slotProps} />
 {:else}
-	<div use:melt={builder} {...$$restProps} {...attrs}>
-		<slot {builder} {attrs} headingValue={$headingValue}>
+	<div use:melt={builder} {...$$restProps}>
+		<slot {...slotProps}>
 			{$headingValue}
 		</slot>
 	</div>
diff --git a/src/lib/bits/date-picker/components/date-picker-input.svelte b/src/lib/bits/date-picker/components/date-picker-input.svelte
index bb7f5e690..d45533433 100644
--- a/src/lib/bits/date-picker/components/date-picker-input.svelte
+++ b/src/lib/bits/date-picker/components/date-picker-input.svelte
@@ -21,9 +21,10 @@
 	const attrs = getFieldAttrs("input");
 
 	$: builder = $field;
+	$: Object.assign(builder, attrs);
+
 	$: slotProps = {
 		builder,
-		attrs,
 		segments: $segmentContents
 	};
 </script>
@@ -31,7 +32,7 @@
 {#if asChild}
 	<slot {...slotProps} />
 {:else}
-	<div use:melt={builder} {...$$restProps} {...attrs}>
+	<div use:melt={builder} {...$$restProps}>
 		<slot {...slotProps} />
 	</div>
 {/if}
diff --git a/src/lib/bits/date-picker/components/date-picker-label.svelte b/src/lib/bits/date-picker/components/date-picker-label.svelte
index cf6ff71fd..78102efe3 100644
--- a/src/lib/bits/date-picker/components/date-picker-label.svelte
+++ b/src/lib/bits/date-picker/components/date-picker-label.svelte
@@ -20,16 +20,13 @@
 	const attrs = getFieldAttrs("label");
 
 	$: builder = $label;
-	$: slotProps = {
-		builder,
-		attrs
-	};
+	$: Object.assign(builder, attrs);
 </script>
 
 {#if asChild}
-	<slot {...slotProps} />
+	<slot {builder} />
 {:else}
-	<span use:melt={builder} {...$$restProps} {...attrs}>
-		<slot {...slotProps} />
+	<span use:melt={builder} {...$$restProps}>
+		<slot {builder} />
 	</span>
 {/if}
diff --git a/src/lib/bits/date-picker/components/date-picker-next-button.svelte b/src/lib/bits/date-picker/components/date-picker-next-button.svelte
index 027f9b231..23b26cbbb 100644
--- a/src/lib/bits/date-picker/components/date-picker-next-button.svelte
+++ b/src/lib/bits/date-picker/components/date-picker-next-button.svelte
@@ -17,23 +17,18 @@
 	const dispatch = createDispatcher();
 
 	$: builder = $nextButton;
-
-	$: slotProps = {
-		builder,
-		attrs
-	};
+	$: Object.assign(builder, attrs);
 </script>
 
 {#if asChild}
-	<slot {...slotProps} />
+	<slot {builder} />
 {:else}
 	<button
 		use:melt={builder}
 		type="button"
 		{...$$restProps}
-		{...attrs}
 		on:m-click={dispatch}
 	>
-		<slot {...slotProps} />
+		<slot {builder} />
 	</button>
 {/if}
diff --git a/src/lib/bits/date-picker/components/date-picker-prev-button.svelte b/src/lib/bits/date-picker/components/date-picker-prev-button.svelte
index a5472fde6..e2f585ccd 100644
--- a/src/lib/bits/date-picker/components/date-picker-prev-button.svelte
+++ b/src/lib/bits/date-picker/components/date-picker-prev-button.svelte
@@ -17,23 +17,18 @@
 	const dispatch = createDispatcher();
 
 	$: builder = $prevButton;
-
-	$: slotProps = {
-		builder,
-		attrs
-	};
+	$: Object.assign(builder, attrs);
 </script>
 
 {#if asChild}
-	<slot {...slotProps} />
+	<slot {builder} />
 {:else}
 	<button
 		use:melt={builder}
 		type="button"
 		{...$$restProps}
-		{...attrs}
 		on:m-click={dispatch}
 	>
-		<slot {...slotProps} />
+		<slot {builder} />
 	</button>
 {/if}
diff --git a/src/lib/bits/date-picker/components/date-picker-segment.svelte b/src/lib/bits/date-picker/components/date-picker-segment.svelte
index c7c230d81..d39d5fae4 100644
--- a/src/lib/bits/date-picker/components/date-picker-segment.svelte
+++ b/src/lib/bits/date-picker/components/date-picker-segment.svelte
@@ -24,23 +24,19 @@
 	const dispatch = createDispatcher();
 
 	$: builder = $segment(part);
-	$: slotProps = {
-		builder,
-		attrs
-	};
+	$: Object.assign(builder, attrs);
 </script>
 
 {#if asChild}
-	<slot {...slotProps} />
+	<slot {builder} />
 {:else}
 	<div
 		use:melt={builder}
 		{...$$restProps}
-		{...attrs}
 		on:m-click={dispatch}
 		on:m-focusout={dispatch}
 		on:m-focusout={dispatch}
 	>
-		<slot {...slotProps} />
+		<slot {builder} />
 	</div>
 {/if}
diff --git a/src/lib/bits/date-picker/components/date-picker-trigger.svelte b/src/lib/bits/date-picker/components/date-picker-trigger.svelte
index 3e965f7d2..2b1e724fd 100644
--- a/src/lib/bits/date-picker/components/date-picker-trigger.svelte
+++ b/src/lib/bits/date-picker/components/date-picker-trigger.svelte
@@ -21,24 +21,21 @@
 	$: if (id) {
 		ids.popover.trigger.set(id);
 	}
+
 	$: builder = $trigger;
-	$: slotProps = {
-		builder,
-		attrs
-	};
+	$: Object.assign(builder, attrs);
 </script>
 
 {#if asChild}
-	<slot {...slotProps} />
+	<slot {builder} />
 {:else}
 	<button
 		use:melt={builder}
 		type="button"
 		{...$$restProps}
-		{...attrs}
 		on:m-click={dispatch}
 		on:m-keydown={dispatch}
 	>
-		<slot {...slotProps} />
+		<slot {builder} />
 	</button>
 {/if}
diff --git a/src/lib/bits/date-range-field/components/date-range-field-input.svelte b/src/lib/bits/date-range-field/components/date-range-field-input.svelte
index 446af72de..a8bf94654 100644
--- a/src/lib/bits/date-range-field/components/date-range-field-input.svelte
+++ b/src/lib/bits/date-range-field/components/date-range-field-input.svelte
@@ -21,9 +21,10 @@
 	const attrs = getAttrs("input");
 
 	$: builder = $field;
+	$: Object.assign(builder, attrs);
+
 	$: slotProps = {
 		builder,
-		attrs,
 		segments: {
 			start: $segmentContents.start,
 			end: $segmentContents.end
@@ -34,7 +35,7 @@
 {#if asChild}
 	<slot {...slotProps} />
 {:else}
-	<div use:melt={builder} {...$$restProps} {...attrs}>
+	<div use:melt={builder} {...$$restProps}>
 		<slot {...slotProps} />
 	</div>
 {/if}
diff --git a/src/lib/bits/date-range-field/components/date-range-field-label.svelte b/src/lib/bits/date-range-field/components/date-range-field-label.svelte
index b75b6d0b9..0849a1184 100644
--- a/src/lib/bits/date-range-field/components/date-range-field-label.svelte
+++ b/src/lib/bits/date-range-field/components/date-range-field-label.svelte
@@ -20,16 +20,13 @@
 	const attrs = getAttrs("label");
 
 	$: builder = $label;
-	$: slotProps = {
-		builder,
-		attrs
-	};
+	$: Object.assign(builder, attrs);
 </script>
 
 {#if asChild}
-	<slot {...slotProps} />
+	<slot {builder} />
 {:else}
-	<span use:melt={builder} {...$$restProps} {...attrs}>
-		<slot {...slotProps} />
+	<span use:melt={builder} {...$$restProps}>
+		<slot {builder} />
 	</span>
 {/if}
diff --git a/src/lib/bits/date-range-field/components/date-range-field-segment.svelte b/src/lib/bits/date-range-field/components/date-range-field-segment.svelte
index 462441f2a..a40d08546 100644
--- a/src/lib/bits/date-range-field/components/date-range-field-segment.svelte
+++ b/src/lib/bits/date-range-field/components/date-range-field-segment.svelte
@@ -28,24 +28,19 @@
 	const dispatch = createDispatcher();
 
 	$: builder = type === "start" ? $startSegment(part) : $endSegment(part);
-
-	$: slotProps = {
-		builder,
-		attrs
-	};
+	$: Object.assign(builder, attrs);
 </script>
 
 {#if asChild}
-	<slot {...slotProps} />
+	<slot {builder} />
 {:else}
 	<div
 		use:melt={builder}
 		{...$$restProps}
-		{...attrs}
 		on:m-click={dispatch}
 		on:m-focusout={dispatch}
 		on:m-keydown={dispatch}
 	>
-		<slot {...slotProps} />
+		<slot {builder} />
 	</div>
 {/if}
diff --git a/src/lib/bits/date-range-picker/components/date-range-picker-arrow.svelte b/src/lib/bits/date-range-picker/components/date-range-picker-arrow.svelte
index b85456909..ae66538aa 100644
--- a/src/lib/bits/date-range-picker/components/date-range-picker-arrow.svelte
+++ b/src/lib/bits/date-range-picker/components/date-range-picker-arrow.svelte
@@ -18,14 +18,11 @@
 	$: updateOption("arrowSize", size);
 
 	$: builder = $arrow;
-	$: slotProps = {
-		builder,
-		attrs
-	};
+	$: Object.assign(builder, attrs);
 </script>
 
 {#if asChild}
-	<slot {...slotProps} />
+	<slot {builder} />
 {:else}
-	<div use:melt={builder} {...$$restProps} {...attrs} />
+	<div use:melt={builder} {...$$restProps} />
 {/if}
diff --git a/src/lib/bits/date-range-picker/components/date-range-picker-calendar.svelte b/src/lib/bits/date-range-picker/components/date-range-picker-calendar.svelte
index 846c587aa..05a1b8cac 100644
--- a/src/lib/bits/date-range-picker/components/date-range-picker-calendar.svelte
+++ b/src/lib/bits/date-range-picker/components/date-range-picker-calendar.svelte
@@ -18,12 +18,13 @@
 		ids.calendar.calendar.set(id);
 	}
 
-	$: builder = $calendar;
 	const attrs = getCalendarAttrs("root");
 
+	$: builder = $calendar;
+	$: Object.assign(builder, attrs);
+
 	$: slotProps = {
 		builder,
-		attrs,
 		months: $months,
 		weekdays: $weekdays
 	};
@@ -32,7 +33,7 @@
 {#if asChild}
 	<slot {...slotProps} />
 {:else}
-	<div use:melt={builder} {...$$restProps} {...attrs}>
+	<div use:melt={builder} {...$$restProps}>
 		<slot {...slotProps} />
 	</div>
 {/if}
diff --git a/src/lib/bits/date-range-picker/components/date-range-picker-close.svelte b/src/lib/bits/date-range-picker/components/date-range-picker-close.svelte
index 4c7fefd3f..07c3bd110 100644
--- a/src/lib/bits/date-range-picker/components/date-range-picker-close.svelte
+++ b/src/lib/bits/date-range-picker/components/date-range-picker-close.svelte
@@ -17,23 +17,19 @@
 	const attrs = getPopoverAttrs("close");
 
 	$: builder = $close;
-	$: slotProps = {
-		builder,
-		attrs
-	};
+	$: Object.assign(builder, attrs);
 </script>
 
 {#if asChild}
-	<slot {...slotProps} />
+	<slot {builder} />
 {:else}
 	<button
 		use:melt={builder}
 		type="button"
 		{...$$restProps}
-		{...attrs}
 		on:m-click={dispatch}
 		on:m-keydown={dispatch}
 	>
-		<slot {...slotProps} />
+		<slot {builder} />
 	</button>
 {/if}
diff --git a/src/lib/bits/date-range-picker/components/date-range-picker-content.svelte b/src/lib/bits/date-range-picker/components/date-range-picker-content.svelte
index b237fcaff..c27419777 100644
--- a/src/lib/bits/date-range-picker/components/date-range-picker-content.svelte
+++ b/src/lib/bits/date-range-picker/components/date-range-picker-content.svelte
@@ -42,10 +42,7 @@
 		ids.popover.content.set(id);
 	}
 	$: builder = $content;
-	$: slotProps = {
-		builder,
-		attrs
-	};
+	$: Object.assign(builder, attrs);
 
 	$: updatePositioning({
 		side,
@@ -63,15 +60,14 @@
 </script>
 
 {#if asChild && $open}
-	<slot {...slotProps} />
+	<slot {builder} />
 {:else if transition && $open}
 	<div
 		transition:transition={transitionConfig}
 		use:melt={builder}
 		{...$$restProps}
-		{...attrs}
 	>
-		<slot {...slotProps} />
+		<slot {builder} />
 	</div>
 {:else if inTransition && outTransition && $open}
 	<div
@@ -79,30 +75,23 @@
 		out:outTransition={outTransitionConfig}
 		use:melt={builder}
 		{...$$restProps}
-		{...attrs}
 	>
-		<slot {...slotProps} />
+		<slot {builder} />
 	</div>
 {:else if inTransition && $open}
-	<div
-		in:inTransition={inTransitionConfig}
-		use:melt={builder}
-		{...$$restProps}
-		{...attrs}
-	>
-		<slot {...slotProps} />
+	<div in:inTransition={inTransitionConfig} use:melt={builder} {...$$restProps}>
+		<slot {builder} />
 	</div>
 {:else if outTransition && $open}
 	<div
 		out:outTransition={outTransitionConfig}
 		use:melt={builder}
 		{...$$restProps}
-		{...attrs}
 	>
-		<slot {...slotProps} />
+		<slot {builder} />
 	</div>
 {:else if $open}
-	<div use:melt={builder} {...$$restProps} {...attrs}>
-		<slot {...slotProps} />
+	<div use:melt={builder} {...$$restProps}>
+		<slot {builder} />
 	</div>
 {/if}
diff --git a/src/lib/bits/date-range-picker/components/date-range-picker-date.svelte b/src/lib/bits/date-range-picker/components/date-range-picker-date.svelte
index 714669ec6..2e7437583 100644
--- a/src/lib/bits/date-range-picker/components/date-range-picker-date.svelte
+++ b/src/lib/bits/date-range-picker/components/date-range-picker-date.svelte
@@ -14,12 +14,13 @@
 		helpers: { isDateDisabled, isDateUnavailable }
 	} = getCtx();
 
-	$: builder = $cell(date, month);
 	const attrs = getCalendarAttrs("date");
 
+	$: builder = $cell(date, month);
+	$: Object.assign(builder, attrs);
+
 	$: slotProps = {
 		builder,
-		attrs,
 		disabled: $isDateDisabled(date),
 		unavailable: $isDateUnavailable(date)
 	};
@@ -28,7 +29,7 @@
 {#if asChild}
 	<slot {...slotProps} />
 {:else}
-	<div use:melt={builder} {...attrs} {...$$restProps}>
+	<div use:melt={builder} {...$$restProps}>
 		<slot {...slotProps}>
 			{date.day}
 		</slot>
diff --git a/src/lib/bits/date-range-picker/components/date-range-picker-grid.svelte b/src/lib/bits/date-range-picker/components/date-range-picker-grid.svelte
index cb11be0e0..39c4e4549 100644
--- a/src/lib/bits/date-range-picker/components/date-range-picker-grid.svelte
+++ b/src/lib/bits/date-range-picker/components/date-range-picker-grid.svelte
@@ -11,19 +11,16 @@
 		elements: { grid }
 	} = getCtx();
 
-	$: builder = $grid;
 	const attrs = getCalendarAttrs("grid");
 
-	$: slotProps = {
-		builder,
-		attrs
-	};
+	$: builder = $grid;
+	$: Object.assign(builder, attrs);
 </script>
 
 {#if asChild}
-	<slot {...slotProps} />
+	<slot {builder} />
 {:else}
-	<table use:melt={builder} {...$$restProps} {...attrs}>
-		<slot {...slotProps} />
+	<table use:melt={builder} {...$$restProps}>
+		<slot {builder} />
 	</table>
 {/if}
diff --git a/src/lib/bits/date-range-picker/components/date-range-picker-heading.svelte b/src/lib/bits/date-range-picker/components/date-range-picker-heading.svelte
index b67adec42..313bb9603 100644
--- a/src/lib/bits/date-range-picker/components/date-range-picker-heading.svelte
+++ b/src/lib/bits/date-range-picker/components/date-range-picker-heading.svelte
@@ -12,15 +12,22 @@
 		states: { headingValue }
 	} = getCtx();
 
-	$: builder = $heading;
 	const attrs = getCalendarAttrs("heading");
+
+	$: builder = $heading;
+	$: Object.assign(builder, attrs);
+
+	$: slotProps = {
+		builder,
+		headingValue: $headingValue
+	};
 </script>
 
 {#if asChild}
-	<slot {builder} {attrs} headingValue={$headingValue} />
+	<slot {...slotProps} />
 {:else}
-	<div use:melt={builder} {...$$restProps} {...attrs}>
-		<slot {builder} {attrs} headingValue={$headingValue}>
+	<div use:melt={builder} {...$$restProps}>
+		<slot {...slotProps}>
 			{$headingValue}
 		</slot>
 	</div>
diff --git a/src/lib/bits/date-range-picker/components/date-range-picker-input.svelte b/src/lib/bits/date-range-picker/components/date-range-picker-input.svelte
index f646c5501..60db6c35d 100644
--- a/src/lib/bits/date-range-picker/components/date-range-picker-input.svelte
+++ b/src/lib/bits/date-range-picker/components/date-range-picker-input.svelte
@@ -21,9 +21,10 @@
 	const attrs = getFieldAttrs("input");
 
 	$: builder = $field;
+	$: Object.assign(builder, attrs);
+
 	$: slotProps = {
 		builder,
-		attrs,
 		segments: $segmentContents
 	};
 </script>
@@ -31,7 +32,7 @@
 {#if asChild}
 	<slot {...slotProps} />
 {:else}
-	<div use:melt={builder} {...$$restProps} {...attrs}>
+	<div use:melt={builder} {...$$restProps}>
 		<slot {...slotProps} />
 	</div>
 {/if}
diff --git a/src/lib/bits/date-range-picker/components/date-range-picker-label.svelte b/src/lib/bits/date-range-picker/components/date-range-picker-label.svelte
index 9242303a3..b5addef79 100644
--- a/src/lib/bits/date-range-picker/components/date-range-picker-label.svelte
+++ b/src/lib/bits/date-range-picker/components/date-range-picker-label.svelte
@@ -20,16 +20,13 @@
 	const attrs = getFieldAttrs("label");
 
 	$: builder = $label;
-	$: slotProps = {
-		builder,
-		attrs
-	};
+	$: Object.assign(builder, attrs);
 </script>
 
 {#if asChild}
-	<slot {...slotProps} />
+	<slot {builder} />
 {:else}
-	<span use:melt={builder} {...$$restProps} {...attrs}>
-		<slot {...slotProps} />
+	<span use:melt={builder} {...$$restProps}>
+		<slot {builder} />
 	</span>
 {/if}
diff --git a/src/lib/bits/date-range-picker/components/date-range-picker-next-button.svelte b/src/lib/bits/date-range-picker/components/date-range-picker-next-button.svelte
index c887fcf5e..b88c3fe89 100644
--- a/src/lib/bits/date-range-picker/components/date-range-picker-next-button.svelte
+++ b/src/lib/bits/date-range-picker/components/date-range-picker-next-button.svelte
@@ -11,14 +11,16 @@
 		elements: { nextButton }
 	} = getCtx();
 
-	$: builder = $nextButton;
 	const attrs = getCalendarAttrs("next-button");
+
+	$: builder = $nextButton;
+	$: Object.assign(builder, attrs);
 </script>
 
 {#if asChild}
-	<slot {builder} {attrs} />
+	<slot {builder} />
 {:else}
-	<button use:melt={builder} type="button" {...$$restProps} {...attrs}>
-		<slot {builder} {attrs} />
+	<button use:melt={builder} type="button" {...$$restProps}>
+		<slot {builder} />
 	</button>
 {/if}
diff --git a/src/lib/bits/date-range-picker/components/date-range-picker-prev-button.svelte b/src/lib/bits/date-range-picker/components/date-range-picker-prev-button.svelte
index 64e7cda89..2ebb70eb8 100644
--- a/src/lib/bits/date-range-picker/components/date-range-picker-prev-button.svelte
+++ b/src/lib/bits/date-range-picker/components/date-range-picker-prev-button.svelte
@@ -11,19 +11,16 @@
 		elements: { prevButton }
 	} = getCtx();
 
-	$: builder = $prevButton;
 	const attrs = getCalendarAttrs("prev-button");
 
-	$: slotProps = {
-		builder,
-		attrs
-	};
+	$: builder = $prevButton;
+	$: Object.assign(builder, attrs);
 </script>
 
 {#if asChild}
-	<slot {...slotProps} />
+	<slot {builder} />
 {:else}
-	<button use:melt={builder} type="button" {...$$restProps} {...attrs}>
-		<slot {...slotProps} />
+	<button use:melt={builder} type="button" {...$$restProps}>
+		<slot {builder} />
 	</button>
 {/if}
diff --git a/src/lib/bits/date-range-picker/components/date-range-picker-segment.svelte b/src/lib/bits/date-range-picker/components/date-range-picker-segment.svelte
index e1fdcad8d..1d3679063 100644
--- a/src/lib/bits/date-range-picker/components/date-range-picker-segment.svelte
+++ b/src/lib/bits/date-range-picker/components/date-range-picker-segment.svelte
@@ -26,16 +26,13 @@
 	const attrs = getFieldAttrs("segment");
 
 	$: builder = type === "start" ? $startSegment(part) : $endSegment(part);
-	$: slotProps = {
-		builder,
-		attrs
-	};
+	$: Object.assign(builder, attrs);
 </script>
 
 {#if asChild}
-	<slot {...slotProps} />
+	<slot {builder} />
 {:else}
-	<div use:melt={builder} {...$$restProps} {...attrs}>
-		<slot {...slotProps} />
+	<div use:melt={builder} {...$$restProps}>
+		<slot {builder} />
 	</div>
 {/if}
diff --git a/src/lib/bits/date-range-picker/components/date-range-picker-trigger.svelte b/src/lib/bits/date-range-picker/components/date-range-picker-trigger.svelte
index 3e965f7d2..2b1e724fd 100644
--- a/src/lib/bits/date-range-picker/components/date-range-picker-trigger.svelte
+++ b/src/lib/bits/date-range-picker/components/date-range-picker-trigger.svelte
@@ -21,24 +21,21 @@
 	$: if (id) {
 		ids.popover.trigger.set(id);
 	}
+
 	$: builder = $trigger;
-	$: slotProps = {
-		builder,
-		attrs
-	};
+	$: Object.assign(builder, attrs);
 </script>
 
 {#if asChild}
-	<slot {...slotProps} />
+	<slot {builder} />
 {:else}
 	<button
 		use:melt={builder}
 		type="button"
 		{...$$restProps}
-		{...attrs}
 		on:m-click={dispatch}
 		on:m-keydown={dispatch}
 	>
-		<slot {...slotProps} />
+		<slot {builder} />
 	</button>
 {/if}
diff --git a/src/lib/bits/dialog/components/dialog-close.svelte b/src/lib/bits/dialog/components/dialog-close.svelte
index 4761015cd..f3a3ce9fa 100644
--- a/src/lib/bits/dialog/components/dialog-close.svelte
+++ b/src/lib/bits/dialog/components/dialog-close.svelte
@@ -17,23 +17,19 @@
 	const attrs = getAttrs("close");
 
 	$: builder = $close;
-	$: slotProps = {
-		builder,
-		attrs
-	};
+	$: Object.assign(builder, attrs);
 </script>
 
 {#if asChild}
-	<slot {...slotProps} />
+	<slot {builder} />
 {:else}
 	<button
 		use:melt={builder}
 		type="button"
 		{...$$restProps}
-		{...attrs}
 		on:m-click={dispatch}
 		on:m-keydown={dispatch}
 	>
-		<slot {...slotProps} />
+		<slot {builder} />
 	</button>
 {/if}
diff --git a/src/lib/bits/dialog/components/dialog-content.svelte b/src/lib/bits/dialog/components/dialog-content.svelte
index f563e5a02..ca7523862 100644
--- a/src/lib/bits/dialog/components/dialog-content.svelte
+++ b/src/lib/bits/dialog/components/dialog-content.svelte
@@ -31,22 +31,18 @@
 	}
 
 	$: builder = $content;
-	$: slotProps = {
-		builder,
-		attrs
-	};
+	$: Object.assign(builder, attrs);
 </script>
 
 {#if asChild && $open}
-	<slot {...slotProps} />
+	<slot {builder} />
 {:else if transition && $open}
 	<div
 		transition:transition={transitionConfig}
 		use:melt={builder}
 		{...$$restProps}
-		{...attrs}
 	>
-		<slot {...slotProps} />
+		<slot {builder} />
 	</div>
 {:else if inTransition && outTransition && $open}
 	<div
@@ -54,30 +50,23 @@
 		out:outTransition={outTransitionConfig}
 		use:melt={builder}
 		{...$$restProps}
-		{...attrs}
 	>
-		<slot {...slotProps} />
+		<slot {builder} />
 	</div>
 {:else if inTransition && $open}
-	<div
-		in:inTransition={inTransitionConfig}
-		use:melt={builder}
-		{...$$restProps}
-		{...attrs}
-	>
-		<slot {...slotProps} />
+	<div in:inTransition={inTransitionConfig} use:melt={builder} {...$$restProps}>
+		<slot {builder} />
 	</div>
 {:else if outTransition && $open}
 	<div
 		out:outTransition={outTransitionConfig}
 		use:melt={builder}
 		{...$$restProps}
-		{...attrs}
 	>
-		<slot {...slotProps} />
+		<slot {builder} />
 	</div>
 {:else if $open}
-	<div use:melt={builder} {...$$restProps} {...attrs}>
-		<slot {...slotProps} />
+	<div use:melt={builder} {...$$restProps}>
+		<slot {builder} />
 	</div>
 {/if}
diff --git a/src/lib/bits/dialog/components/dialog-description.svelte b/src/lib/bits/dialog/components/dialog-description.svelte
index 4c8197047..95a02e689 100644
--- a/src/lib/bits/dialog/components/dialog-description.svelte
+++ b/src/lib/bits/dialog/components/dialog-description.svelte
@@ -18,16 +18,13 @@
 		ids.description.set(id);
 	}
 	$: builder = $description;
-	$: slotProps = {
-		builder,
-		attrs
-	};
+	$: Object.assign(builder, attrs);
 </script>
 
 {#if asChild}
-	<slot {...slotProps} />
+	<slot {builder} />
 {:else}
-	<div use:melt={builder} {...$$restProps} {...attrs}>
-		<slot {...slotProps} />
+	<div use:melt={builder} {...$$restProps}>
+		<slot {builder} />
 	</div>
 {/if}
diff --git a/src/lib/bits/dialog/components/dialog-overlay.svelte b/src/lib/bits/dialog/components/dialog-overlay.svelte
index ccaf96815..e65e17cdf 100644
--- a/src/lib/bits/dialog/components/dialog-overlay.svelte
+++ b/src/lib/bits/dialog/components/dialog-overlay.svelte
@@ -25,20 +25,16 @@
 	const attrs = getAttrs("overlay");
 
 	$: builder = $overlay;
-	$: slotProps = {
-		builder,
-		attrs
-	};
+	$: Object.assign(builder, attrs);
 </script>
 
 {#if asChild && $open}
-	<slot {...slotProps} />
+	<slot {builder} />
 {:else if transition && $open}
 	<div
 		transition:transition={transitionConfig}
 		use:melt={builder}
 		{...$$restProps}
-		{...attrs}
 	/>
 {:else if inTransition && outTransition && $open}
 	<div
@@ -46,22 +42,19 @@
 		out:outTransition={outTransitionConfig}
 		use:melt={builder}
 		{...$$restProps}
-		{...attrs}
 	/>
 {:else if inTransition && $open}
 	<div
 		in:inTransition={inTransitionConfig}
 		use:melt={builder}
 		{...$$restProps}
-		{...attrs}
 	/>
 {:else if outTransition && $open}
 	<div
 		out:outTransition={outTransitionConfig}
 		use:melt={builder}
 		{...$$restProps}
-		{...attrs}
 	/>
 {:else if $open}
-	<div use:melt={builder} {...$$restProps} {...attrs} />
+	<div use:melt={builder} {...$$restProps} />
 {/if}
diff --git a/src/lib/bits/dialog/components/dialog-portal.svelte b/src/lib/bits/dialog/components/dialog-portal.svelte
index b99b3e54a..d9c4c2de3 100644
--- a/src/lib/bits/dialog/components/dialog-portal.svelte
+++ b/src/lib/bits/dialog/components/dialog-portal.svelte
@@ -10,19 +10,17 @@
 	const {
 		elements: { portalled }
 	} = getCtx();
+
 	const attrs = getAttrs("portal");
 
 	$: builder = $portalled;
-	$: slotProps = {
-		builder,
-		attrs
-	};
+	$: Object.assign(builder, attrs);
 </script>
 
 {#if asChild}
-	<slot {...slotProps} />
+	<slot {builder} />
 {:else}
-	<div use:melt={builder} {...$$restProps} {...attrs}>
-		<slot {...slotProps} />
+	<div use:melt={builder} {...$$restProps}>
+		<slot {builder} />
 	</div>
 {/if}
diff --git a/src/lib/bits/dialog/components/dialog-title.svelte b/src/lib/bits/dialog/components/dialog-title.svelte
index 4b50b17bf..baeec477a 100644
--- a/src/lib/bits/dialog/components/dialog-title.svelte
+++ b/src/lib/bits/dialog/components/dialog-title.svelte
@@ -13,22 +13,21 @@
 		elements: { title },
 		ids
 	} = getCtx();
+
 	const attrs = getAttrs("title");
 
 	$: if (id) {
 		ids.title.set(id);
 	}
+
 	$: builder = $title;
-	$: slotProps = {
-		builder,
-		attrs
-	};
+	$: Object.assign(builder, attrs);
 </script>
 
 {#if asChild}
-	<slot {...slotProps} />
+	<slot {builder} />
 {:else}
-	<svelte:element this={level} use:melt={builder} {...$$restProps} {...attrs}>
-		<slot {...slotProps} />
+	<svelte:element this={level} use:melt={builder} {...$$restProps}>
+		<slot {builder} />
 	</svelte:element>
 {/if}
diff --git a/src/lib/bits/dialog/components/dialog-trigger.svelte b/src/lib/bits/dialog/components/dialog-trigger.svelte
index 465caf5fe..75732aba0 100644
--- a/src/lib/bits/dialog/components/dialog-trigger.svelte
+++ b/src/lib/bits/dialog/components/dialog-trigger.svelte
@@ -17,23 +17,19 @@
 	const attrs = getAttrs("trigger");
 
 	$: builder = $trigger;
-	$: slotProps = {
-		builder,
-		attrs
-	};
+	$: Object.assign(builder, attrs);
 </script>
 
 {#if asChild}
-	<slot {...slotProps} />
+	<slot {builder} />
 {:else}
 	<button
 		use:melt={builder}
 		type="button"
 		{...$$restProps}
-		{...attrs}
 		on:m-click={dispatch}
 		on:m-keydown={dispatch}
 	>
-		<slot {...slotProps} />
+		<slot {builder} />
 	</button>
 {/if}
diff --git a/src/lib/bits/dropdown-menu/_export.types.ts b/src/lib/bits/dropdown-menu/_export.types.ts
new file mode 100644
index 000000000..2c8a30453
--- /dev/null
+++ b/src/lib/bits/dropdown-menu/_export.types.ts
@@ -0,0 +1,57 @@
+import type {
+	Props,
+	SubProps,
+	ItemProps,
+	ArrowProps,
+	GroupProps,
+	LabelProps,
+	ContentProps,
+	TriggerProps,
+	RadioItemProps,
+	SeparatorProps,
+	RadioGroupProps,
+	SubContentProps,
+	SubTriggerProps,
+	CheckboxItemProps,
+	RadioIndicatorProps,
+	CheckboxIndicatorProps,
+	//
+	// Events
+	//
+	ItemEvents,
+	TriggerEvents,
+	ContentEvents,
+	RadioItemEvents,
+	SubContentEvents,
+	SubTriggerEvents,
+	CheckboxItemEvents
+} from "./types.js";
+
+export type {
+	Props as DropdownMenuProps,
+	SubProps as DropdownMenuSubProps,
+	ItemProps as DropdownMenuItemProps,
+	ArrowProps as DropdownMenuArrowProps,
+	GroupProps as DropdownMenuGroupProps,
+	LabelProps as DropdownMenuLabelProps,
+	ContentProps as DropdownMenuContentProps,
+	TriggerProps as DropdownMenuTriggerProps,
+	RadioItemProps as DropdownMenuRadioItemProps,
+	SeparatorProps as DropdownMenuSeparatorProps,
+	RadioGroupProps as DropdownMenuRadioGroupProps,
+	SubContentProps as DropdownMenuSubContentProps,
+	SubTriggerProps as DropdownMenuSubTriggerProps,
+	CheckboxItemProps as DropdownMenuCheckboxItemProps,
+	RadioIndicatorProps as DropdownMenuRadioIndicatorProps,
+	CheckboxIndicatorProps as DropdownMenuCheckboxIndicatorProps,
+	//
+	// Events
+	//
+	ItemEvents as DropdownMenuItemEvents,
+	TriggerEvents as DropdownMenuTriggerEvents,
+	ContentEvents as DropdownMenuContentEvents,
+	RadioItemEvents as DropdownMenuRadioItemEvents,
+	SubContentEvents as DropdownMenuSubContentEvents,
+	SubTriggerEvents as DropdownMenuSubTriggerEvents,
+	CheckboxItemEvents as DropdownMenuCheckboxItemEvents
+};
diff --git a/src/lib/bits/dropdown-menu/index.ts b/src/lib/bits/dropdown-menu/index.ts
index 39892a7e4..29ac29f8d 100644
--- a/src/lib/bits/dropdown-menu/index.ts
+++ b/src/lib/bits/dropdown-menu/index.ts
@@ -12,6 +12,6 @@ export { default as RadioGroup } from "$lib/bits/menu/components/menu-radio-grou
 export { default as SubContent } from "$lib/bits/menu/components/menu-sub-content.svelte";
 export { default as SubTrigger } from "$lib/bits/menu/components/menu-sub-trigger.svelte";
 export { default as CheckboxItem } from "$lib/bits/menu/components/menu-checkbox-item.svelte";
-export { default as RadioIndicator } from "$lib/bits/menu/components/menu-radio-indicator.svelte";
 export { default as CheckboxIndicator } from "$lib/bits/menu/components/menu-checkbox-indicator.svelte";
+export { default as RadioIndicator } from "$lib/bits/menu/components/menu-radio-indicator.svelte";
 export * from "./types.js";
diff --git a/src/lib/bits/dropdown-menu/types.ts b/src/lib/bits/dropdown-menu/types.ts
index 5aedda12d..5681d6c98 100644
--- a/src/lib/bits/dropdown-menu/types.ts
+++ b/src/lib/bits/dropdown-menu/types.ts
@@ -1,27 +1,30 @@
 import type {
+	Props,
+	SubProps,
+	ItemProps,
+	LabelProps,
+	GroupProps,
 	ArrowProps,
 	ContentProps,
-	CheckboxItemProps,
-	RadioGroupProps,
+	SeparatorProps,
 	RadioItemProps,
-	GroupProps,
+	RadioGroupProps,
 	SubContentProps,
 	SubTriggerProps,
-	DropdownTriggerProps as TriggerProps,
-	ItemProps,
+	CheckboxItemProps,
+	RadioIndicatorProps,
 	CheckboxIndicatorProps,
-	SeparatorProps,
-	SubProps,
-	LabelProps,
-	Props,
+	DropdownTriggerProps as TriggerProps,
+	//
+	// Events
 	//
-	ContentEvents,
-	CheckboxItemEvents,
 	ItemEvents,
+	ContentEvents,
 	RadioItemEvents,
 	SubTriggerEvents,
-	DropdownTriggerEvents as TriggerEvents,
-	SubContentEvents
+	SubContentEvents,
+	CheckboxItemEvents,
+	DropdownTriggerEvents as TriggerEvents
 } from "$lib/bits/menu/index.js";
 
 export type {
@@ -39,37 +42,16 @@ export type {
 	SubContentProps,
 	SubTriggerProps,
 	CheckboxItemProps,
+	RadioIndicatorProps,
 	CheckboxIndicatorProps,
 	//
-	Props as DropdownMenuProps,
-	SubProps as DropdownMenuSubProps,
-	ItemProps as DropdownMenuItemProps,
-	LabelProps as DropdownMenuLabelProps,
-	ArrowProps as DropdownMenuArrowProps,
-	GroupProps as DropdownMenuGroupProps,
-	ContentProps as DropdownMenuContentProps,
-	TriggerProps as DropdownMenuTriggerProps,
-	RadioItemProps as DropdownMenuRadioItemProps,
-	SeparatorProps as DropdownMenuSeparatorProps,
-	SubTriggerProps as DropdownMenuSubTriggerProps,
-	RadioGroupProps as DropdownMenuRadioGroupProps,
-	SubContentProps as DropdownMenuSubContentProps,
-	CheckboxItemProps as DropdownMenuCheckboxItemProps,
-	CheckboxIndicatorProps as DropdownMenuCheckboxIndicatorProps,
-	//,
+	// Events
+	//
 	ItemEvents,
 	TriggerEvents,
 	ContentEvents,
 	RadioItemEvents,
 	SubContentEvents,
 	SubTriggerEvents,
-	CheckboxItemEvents,
-	//
-	ItemEvents as DropdownMenuItemEvents,
-	TriggerEvents as DropdownMenuTriggerEvents,
-	ContentEvents as DropdownMenuContentEvents,
-	RadioItemEvents as DropdownMenuRadioItemEvents,
-	SubContentEvents as DropdownMenuSubContentEvents,
-	SubTriggerEvents as DropdownMenuSubTriggerEvents,
-	CheckboxItemEvents as DropdownMenuCheckboxItemEvents
+	CheckboxItemEvents
 };
diff --git a/src/lib/bits/label/components/label.svelte b/src/lib/bits/label/components/label.svelte
index 9ea38cc11..bc5b6e9df 100644
--- a/src/lib/bits/label/components/label.svelte
+++ b/src/lib/bits/label/components/label.svelte
@@ -17,21 +17,13 @@
 	const attrs = getAttrs("root");
 
 	$: builder = $root;
-	$: slotProps = {
-		builder,
-		attrs
-	};
+	$: Object.assign(builder, attrs);
 </script>
 
 {#if asChild}
-	<slot {...slotProps} />
+	<slot {builder} />
 {:else}
-	<label
-		use:melt={builder}
-		{...$$restProps}
-		{...attrs}
-		on:m-mousedown={dispatch}
-	>
-		<slot {...slotProps} />
+	<label use:melt={builder} {...$$restProps} on:m-mousedown={dispatch}>
+		<slot {builder} />
 	</label>
 {/if}
diff --git a/src/lib/bits/link-preview/components/link-preview-arrow.svelte b/src/lib/bits/link-preview/components/link-preview-arrow.svelte
index 57745c382..122747c30 100644
--- a/src/lib/bits/link-preview/components/link-preview-arrow.svelte
+++ b/src/lib/bits/link-preview/components/link-preview-arrow.svelte
@@ -14,14 +14,11 @@
 	const attrs = getAttrs("arrow");
 
 	$: builder = $arrow;
-	$: slotProps = {
-		builder,
-		attrs
-	};
+	$: Object.assign(builder, attrs);
 </script>
 
 {#if asChild}
-	<slot {...slotProps} />
+	<slot {builder} />
 {:else}
-	<div use:melt={builder} {...$$restProps} {...attrs} />
+	<div use:melt={builder} {...$$restProps} />
 {/if}
diff --git a/src/lib/bits/link-preview/components/link-preview-content.svelte b/src/lib/bits/link-preview/components/link-preview-content.svelte
index cd81821a6..8a0e3149b 100644
--- a/src/lib/bits/link-preview/components/link-preview-content.svelte
+++ b/src/lib/bits/link-preview/components/link-preview-content.svelte
@@ -45,10 +45,7 @@
 	const dispatch = createDispatcher();
 
 	$: builder = $content;
-	$: slotProps = {
-		builder,
-		attrs
-	};
+	$: Object.assign(builder, attrs);
 
 	$: updatePositioning({
 		side,
@@ -66,19 +63,18 @@
 </script>
 
 {#if asChild && $open}
-	<slot {...slotProps} />
+	<slot {builder} />
 {:else if transition && $open}
 	<div
 		transition:transition={transitionConfig}
 		use:melt={builder}
 		{...$$restProps}
-		{...attrs}
 		on:m-focusout={dispatch}
 		on:m-pointerdown={dispatch}
 		on:m-pointerenter={dispatch}
 		on:m-pointerleave={dispatch}
 	>
-		<slot {...slotProps} />
+		<slot {builder} />
 	</div>
 {:else if inTransition && outTransition && $open}
 	<div
@@ -86,50 +82,46 @@
 		out:outTransition={outTransitionConfig}
 		use:melt={builder}
 		{...$$restProps}
-		{...attrs}
 		on:m-focusout={dispatch}
 		on:m-pointerdown={dispatch}
 		on:m-pointerenter={dispatch}
 		on:m-pointerleave={dispatch}
 	>
-		<slot {...slotProps} />
+		<slot {builder} />
 	</div>
 {:else if inTransition && $open}
 	<div
 		in:inTransition={inTransitionConfig}
 		use:melt={builder}
 		{...$$restProps}
-		{...attrs}
 		on:m-focusout={dispatch}
 		on:m-pointerdown={dispatch}
 		on:m-pointerenter={dispatch}
 		on:m-pointerleave={dispatch}
 	>
-		<slot {...slotProps} />
+		<slot {builder} />
 	</div>
 {:else if outTransition && $open}
 	<div
 		out:outTransition={outTransitionConfig}
 		use:melt={builder}
 		{...$$restProps}
-		{...attrs}
 		on:m-focusout={dispatch}
 		on:m-pointerdown={dispatch}
 		on:m-pointerenter={dispatch}
 		on:m-pointerleave={dispatch}
 	>
-		<slot {...slotProps} />
+		<slot {builder} />
 	</div>
 {:else if $open}
 	<div
 		use:melt={builder}
 		{...$$restProps}
-		{...attrs}
 		on:m-focusout={dispatch}
 		on:m-pointerdown={dispatch}
 		on:m-pointerenter={dispatch}
 		on:m-pointerleave={dispatch}
 	>
-		<slot {...slotProps} />
+		<slot {builder} />
 	</div>
 {/if}
diff --git a/src/lib/bits/link-preview/components/link-preview-trigger.svelte b/src/lib/bits/link-preview/components/link-preview-trigger.svelte
index 833f5762d..62bd561c3 100644
--- a/src/lib/bits/link-preview/components/link-preview-trigger.svelte
+++ b/src/lib/bits/link-preview/components/link-preview-trigger.svelte
@@ -22,16 +22,12 @@
 		ids.trigger.set(id);
 	}
 	$: builder = $trigger;
-	$: slotProps = {
-		builder,
-		attrs
-	};
+	$: Object.assign(builder, attrs);
 </script>
 
 {#if asChild}
-	<slot {...slotProps} />
+	<slot {builder} />
 {:else}
-	{@const builder = $trigger}
 	<svelte:element
 		this={"a"}
 		use:melt={builder}
@@ -42,6 +38,6 @@
 		on:m-pointerenter={dispatch}
 		on:m-pointerleave={dispatch}
 	>
-		<slot {...slotProps} />
+		<slot {builder} />
 	</svelte:element>
 {/if}
diff --git a/src/lib/bits/menu/components/menu-arrow.svelte b/src/lib/bits/menu/components/menu-arrow.svelte
index e0e37099c..8fed57e31 100644
--- a/src/lib/bits/menu/components/menu-arrow.svelte
+++ b/src/lib/bits/menu/components/menu-arrow.svelte
@@ -15,15 +15,11 @@
 	const attrs = getAttrs("arrow");
 
 	$: builder = $arrow;
-
-	$: slotProps = {
-		builder,
-		attrs
-	};
+	$: Object.assign(builder, attrs);
 </script>
 
 {#if asChild}
-	<slot {...slotProps} />
+	<slot {builder} />
 {:else}
-	<div use:melt={builder} />
+	<div use:melt={builder} {...$$restProps} />
 {/if}
diff --git a/src/lib/bits/menu/components/menu-checkbox-item.svelte b/src/lib/bits/menu/components/menu-checkbox-item.svelte
index 161764642..3e5859b48 100644
--- a/src/lib/bits/menu/components/menu-checkbox-item.svelte
+++ b/src/lib/bits/menu/components/menu-checkbox-item.svelte
@@ -35,20 +35,15 @@
 	$: updateOption("disabled", disabled);
 
 	$: builder = $checkboxItem;
-
-	$: slotProps = {
-		builder,
-		attrs
-	};
+	$: Object.assign(builder, attrs);
 </script>
 
 {#if asChild}
-	<slot {...slotProps} />
+	<slot {builder} />
 {:else}
 	<div
 		use:melt={builder}
 		{...$$restProps}
-		{...attrs}
 		on:m-click={dispatch}
 		on:m-focusin={dispatch}
 		on:m-focusout={dispatch}
@@ -57,6 +52,6 @@
 		on:m-pointerleave={dispatch}
 		on:m-pointermove={dispatch}
 	>
-		<slot {...slotProps} />
+		<slot {builder} />
 	</div>
 {/if}
diff --git a/src/lib/bits/menu/components/menu-content.svelte b/src/lib/bits/menu/components/menu-content.svelte
index d5c14ecaa..153b1c95f 100644
--- a/src/lib/bits/menu/components/menu-content.svelte
+++ b/src/lib/bits/menu/components/menu-content.svelte
@@ -44,10 +44,7 @@
 		ids.menu.set(id);
 	}
 	$: builder = $menu;
-	$: slotProps = {
-		builder,
-		attrs
-	};
+	$: Object.assign(builder, attrs);
 
 	$: updatePositioning({
 		side,
@@ -65,16 +62,15 @@
 </script>
 
 {#if asChild && $open}
-	<slot {...slotProps} />
+	<slot {builder} />
 {:else if transition && $open}
 	<div
 		transition:transition={transitionConfig}
 		use:melt={builder}
 		{...$$restProps}
-		{...attrs}
 		on:m-keydown={dispatch}
 	>
-		<slot {...slotProps} />
+		<slot {builder} />
 	</div>
 {:else if inTransition && outTransition && $open}
 	<div
@@ -82,33 +78,30 @@
 		out:outTransition={outTransitionConfig}
 		use:melt={builder}
 		{...$$restProps}
-		{...attrs}
 		on:m-keydown={dispatch}
 	>
-		<slot {...slotProps} />
+		<slot {builder} />
 	</div>
 {:else if inTransition && $open}
 	<div
 		in:inTransition={inTransitionConfig}
 		use:melt={builder}
 		{...$$restProps}
-		{...attrs}
 		on:m-keydown={dispatch}
 	>
-		<slot {...slotProps} />
+		<slot {builder} />
 	</div>
 {:else if outTransition && $open}
 	<div
 		out:outTransition={outTransitionConfig}
 		use:melt={builder}
 		{...$$restProps}
-		{...attrs}
 		on:m-keydown={dispatch}
 	>
-		<slot {...slotProps} />
+		<slot {builder} />
 	</div>
 {:else if $open}
-	<div use:melt={builder} {...$$restProps} {...attrs} on:m-keydown={dispatch}>
-		<slot {...slotProps} />
+	<div use:melt={builder} {...$$restProps} on:m-keydown={dispatch}>
+		<slot {builder} />
 	</div>
 {/if}
diff --git a/src/lib/bits/menu/components/menu-group.svelte b/src/lib/bits/menu/components/menu-group.svelte
index 4bb816081..f50827cab 100644
--- a/src/lib/bits/menu/components/menu-group.svelte
+++ b/src/lib/bits/menu/components/menu-group.svelte
@@ -9,16 +9,13 @@
 	const attrs = getAttrs("group");
 
 	$: builder = $group(id);
-	$: slotProps = {
-		builder,
-		attrs
-	};
+	$: Object.assign(builder, attrs);
 </script>
 
 {#if asChild}
-	<slot {...slotProps} />
+	<slot {builder} />
 {:else}
-	<div use:melt={builder} {...$$restProps} {...attrs}>
-		<slot {...slotProps} />
+	<div use:melt={builder} {...$$restProps}>
+		<slot {builder} />
 	</div>
 {/if}
diff --git a/src/lib/bits/menu/components/menu-item.svelte b/src/lib/bits/menu/components/menu-item.svelte
index c9aa0bdb7..4f6c60179 100644
--- a/src/lib/bits/menu/components/menu-item.svelte
+++ b/src/lib/bits/menu/components/menu-item.svelte
@@ -19,22 +19,17 @@
 
 	$: builder = $item;
 	$: attrs = { ...getAttrs("item"), ...disabledAttrs(disabled) };
-
-	$: slotProps = {
-		builder,
-		attrs
-	};
+	$: Object.assign(builder, attrs);
 </script>
 
 {#if asChild}
-	<slot {...slotProps} />
+	<slot {builder} />
 {:else}
 	<svelte:element
 		this={href ? "a" : "div"}
 		{href}
 		use:melt={builder}
 		{...$$restProps}
-		{...attrs}
 		on:m-click={dispatch}
 		on:m-focusin={dispatch}
 		on:m-focusout={dispatch}
@@ -43,6 +38,6 @@
 		on:m-pointerleave={dispatch}
 		on:m-pointermove={dispatch}
 	>
-		<slot {...slotProps} />
+		<slot {builder} />
 	</svelte:element>
 {/if}
diff --git a/src/lib/bits/menu/components/menu-label.svelte b/src/lib/bits/menu/components/menu-label.svelte
index 6f5db1b6d..7551d9d7e 100644
--- a/src/lib/bits/menu/components/menu-label.svelte
+++ b/src/lib/bits/menu/components/menu-label.svelte
@@ -11,16 +11,13 @@
 	const attrs = getAttrs("label");
 
 	$: builder = $groupLabel(id);
-	$: slotProps = {
-		builder,
-		attrs
-	};
+	$: Object.assign(builder, attrs);
 </script>
 
 {#if asChild}
-	<slot {...slotProps} />
+	<slot {builder} />
 {:else}
-	<div use:melt={builder} {...$$restProps} {...attrs}>
-		<slot {...slotProps} />
+	<div use:melt={builder} {...$$restProps}>
+		<slot {builder} />
 	</div>
 {/if}
diff --git a/src/lib/bits/menu/components/menu-radio-group.svelte b/src/lib/bits/menu/components/menu-radio-group.svelte
index d286a245b..136205221 100644
--- a/src/lib/bits/menu/components/menu-radio-group.svelte
+++ b/src/lib/bits/menu/components/menu-radio-group.svelte
@@ -27,16 +27,13 @@
 
 	$: value !== undefined && localValue.set(value);
 	$: builder = $radioGroup;
-	$: slotProps = {
-		builder,
-		attrs
-	};
+	$: Object.assign(builder, attrs);
 </script>
 
 {#if asChild}
-	<slot {...slotProps} />
+	<slot {builder} />
 {:else}
-	<div use:melt={builder} {...$$restProps} {...attrs}>
-		<slot {...slotProps} />
+	<div use:melt={builder} {...$$restProps}>
+		<slot {builder} />
 	</div>
 {/if}
diff --git a/src/lib/bits/menu/components/menu-radio-item.svelte b/src/lib/bits/menu/components/menu-radio-item.svelte
index 2d065f2dc..889c064b6 100644
--- a/src/lib/bits/menu/components/menu-radio-item.svelte
+++ b/src/lib/bits/menu/components/menu-radio-item.svelte
@@ -15,24 +15,18 @@
 	} = setRadioItem(value);
 
 	const attrs = getAttrs("radio-item");
-
 	const dispatch = createDispatcher();
 
 	$: builder = $radioItem({ value, disabled });
-
-	$: slotProps = {
-		builder,
-		attrs
-	};
+	$: Object.assign(builder, attrs);
 </script>
 
 {#if asChild}
-	<slot {...slotProps} />
+	<slot {builder} />
 {:else}
 	<div
 		use:melt={builder}
 		{...$$restProps}
-		{...attrs}
 		on:m-click={dispatch}
 		on:m-focusin={dispatch}
 		on:m-focusout={dispatch}
@@ -41,6 +35,6 @@
 		on:m-pointerleave={dispatch}
 		on:m-pointermove={dispatch}
 	>
-		<slot {...slotProps} />
+		<slot {builder} />
 	</div>
 {/if}
diff --git a/src/lib/bits/menu/components/menu-separator.svelte b/src/lib/bits/menu/components/menu-separator.svelte
index a7adfef80..cbc3e1375 100644
--- a/src/lib/bits/menu/components/menu-separator.svelte
+++ b/src/lib/bits/menu/components/menu-separator.svelte
@@ -14,14 +14,11 @@
 	const attrs = getAttrs("separator");
 
 	$: builder = $separator;
-	$: slotProps = {
-		builder,
-		attrs
-	};
+	$: Object.assign(builder, attrs);
 </script>
 
 {#if asChild}
-	<slot {...slotProps} />
+	<slot {builder} />
 {:else}
-	<div use:melt={$separator} {...$$restProps} {...attrs} />
+	<div use:melt={$separator} {...$$restProps} />
 {/if}
diff --git a/src/lib/bits/menu/components/menu-sub-content.svelte b/src/lib/bits/menu/components/menu-sub-content.svelte
index 56cb1d5d8..86b370b93 100644
--- a/src/lib/bits/menu/components/menu-sub-content.svelte
+++ b/src/lib/bits/menu/components/menu-sub-content.svelte
@@ -42,11 +42,9 @@
 	$: if (id) {
 		ids.menu.set(id);
 	}
+
 	$: builder = $subMenu;
-	$: slotProps = {
-		builder,
-		attrs
-	};
+	$: Object.assign(builder, attrs);
 
 	$: updateSubPositioning({
 		side,
@@ -64,18 +62,17 @@
 </script>
 
 {#if asChild && $subOpen}
-	<slot {...slotProps} />
+	<slot {builder} />
 {:else if transition && $subOpen}
 	<div
 		transition:transition={transitionConfig}
 		use:melt={builder}
 		{...$$restProps}
-		{...attrs}
 		on:m-focusout={dispatch}
 		on:m-keydown={dispatch}
 		on:m-pointermove={dispatch}
 	>
-		<slot {...slotProps} />
+		<slot {builder} />
 	</div>
 {:else if inTransition && outTransition && $subOpen}
 	<div
@@ -83,46 +80,42 @@
 		out:outTransition={outTransitionConfig}
 		use:melt={builder}
 		{...$$restProps}
-		{...attrs}
 		on:m-focusout={dispatch}
 		on:m-keydown={dispatch}
 		on:m-pointermove={dispatch}
 	>
-		<slot {...slotProps} />
+		<slot {builder} />
 	</div>
 {:else if inTransition && $subOpen}
 	<div
 		in:inTransition={inTransitionConfig}
 		use:melt={builder}
 		{...$$restProps}
-		{...attrs}
 		on:m-focusout={dispatch}
 		on:m-keydown={dispatch}
 		on:m-pointermove={dispatch}
 	>
-		<slot {...slotProps} />
+		<slot {builder} />
 	</div>
 {:else if outTransition && $subOpen}
 	<div
 		out:outTransition={outTransitionConfig}
 		use:melt={builder}
 		{...$$restProps}
-		{...attrs}
 		on:m-focusout={dispatch}
 		on:m-keydown={dispatch}
 		on:m-pointermove={dispatch}
 	>
-		<slot {...slotProps} />
+		<slot {builder} />
 	</div>
 {:else if $subOpen}
 	<div
 		use:melt={builder}
 		{...$$restProps}
-		{...attrs}
 		on:m-focusout={dispatch}
 		on:m-keydown={dispatch}
 		on:m-pointermove={dispatch}
 	>
-		<slot {...slotProps} />
+		<slot {builder} />
 	</div>
 {/if}
diff --git a/src/lib/bits/menu/components/menu-sub-trigger.svelte b/src/lib/bits/menu/components/menu-sub-trigger.svelte
index 13bbea60a..8547501c1 100644
--- a/src/lib/bits/menu/components/menu-sub-trigger.svelte
+++ b/src/lib/bits/menu/components/menu-sub-trigger.svelte
@@ -26,19 +26,15 @@
 
 	$: builder = $subTrigger;
 	$: attrs = { ...getAttrs("sub-trigger"), ...disabledAttrs(disabled) };
-	$: slotProps = {
-		builder,
-		attrs
-	};
+	$: Object.assign(builder, attrs);
 </script>
 
 {#if asChild}
-	<slot {...slotProps} />
+	<slot {builder} />
 {:else}
 	<div
 		use:melt={builder}
 		{...$$restProps}
-		{...attrs}
 		on:m-click={dispatch}
 		on:m-focusin={dispatch}
 		on:m-focusout={dispatch}
@@ -46,6 +42,6 @@
 		on:m-pointerleave={dispatch}
 		on:m-pointermove={dispatch}
 	>
-		<slot {...slotProps} />
+		<slot {builder} />
 	</div>
 {/if}
diff --git a/src/lib/bits/menu/components/menu-trigger.svelte b/src/lib/bits/menu/components/menu-trigger.svelte
index d3c9b1270..8a1030f39 100644
--- a/src/lib/bits/menu/components/menu-trigger.svelte
+++ b/src/lib/bits/menu/components/menu-trigger.svelte
@@ -25,23 +25,19 @@
 		ids.trigger.set(id);
 	}
 	$: builder = $trigger;
-	$: slotProps = {
-		builder,
-		attrs
-	};
+	$: Object.assign(builder, attrs);
 </script>
 
 {#if asChild}
-	<slot {...slotProps} />
+	<slot {builder} />
 {:else}
 	<button
 		use:melt={builder}
 		type="button"
 		{...$$restProps}
-		{...attrs}
 		on:m-keydown={dispatch}
 		on:m-pointerdown={dispatch}
 	>
-		<slot {...slotProps} />
+		<slot {builder} />
 	</button>
 {/if}
diff --git a/src/lib/bits/menubar/components/menubar-trigger.svelte b/src/lib/bits/menubar/components/menubar-trigger.svelte
index f3e986359..9170c65af 100644
--- a/src/lib/bits/menubar/components/menubar-trigger.svelte
+++ b/src/lib/bits/menubar/components/menubar-trigger.svelte
@@ -22,24 +22,20 @@
 		ids.trigger.set(id);
 	}
 	$: builder = $trigger;
-	$: slotProps = {
-		builder,
-		attrs
-	};
+	$: Object.assign(builder, attrs);
 </script>
 
 {#if asChild}
-	<slot {...slotProps} />
+	<slot {builder} />
 {:else}
 	<button
 		use:melt={builder}
 		type="button"
 		{...$$restProps}
-		{...attrs}
 		on:m-click={dispatch}
 		on:m-keydown={dispatch}
 		on:m-pointerenter={dispatch}
 	>
-		<slot {...slotProps} />
+		<slot {builder} />
 	</button>
 {/if}
diff --git a/src/lib/bits/menubar/components/menubar.svelte b/src/lib/bits/menubar/components/menubar.svelte
index 09dbc0fd0..67299ae64 100644
--- a/src/lib/bits/menubar/components/menubar.svelte
+++ b/src/lib/bits/menubar/components/menubar.svelte
@@ -29,9 +29,9 @@
 	$: updateOption("loop", loop);
 	$: updateOption("closeOnEscape", closeOnEscape);
 	$: builder = $menubar;
+	$: Object.assign(builder, attrs);
 	$: slotProps = {
 		builder,
-		attrs,
 		ids: $idValues
 	};
 </script>
@@ -39,7 +39,7 @@
 {#if asChild}
 	<slot {...slotProps} />
 {:else}
-	<div use:melt={builder} {...$$restProps} {...attrs}>
+	<div use:melt={builder} {...$$restProps}>
 		<slot {...slotProps} />
 	</div>
 {/if}
diff --git a/src/lib/bits/popover/components/popover-arrow.svelte b/src/lib/bits/popover/components/popover-arrow.svelte
index d004ea43e..61d4e5b8e 100644
--- a/src/lib/bits/popover/components/popover-arrow.svelte
+++ b/src/lib/bits/popover/components/popover-arrow.svelte
@@ -15,14 +15,11 @@
 	const attrs = getAttrs("arrow");
 
 	$: builder = $arrow;
-	$: slotProps = {
-		builder,
-		attrs
-	};
+	$: Object.assign(builder, attrs);
 </script>
 
 {#if asChild}
-	<slot {...slotProps} />
+	<slot {builder} />
 {:else}
-	<div use:melt={builder} {...$$restProps} {...attrs} />
+	<div use:melt={builder} {...$$restProps} />
 {/if}
diff --git a/src/lib/bits/popover/components/popover-close.svelte b/src/lib/bits/popover/components/popover-close.svelte
index 62cbcc012..5d4a99507 100644
--- a/src/lib/bits/popover/components/popover-close.svelte
+++ b/src/lib/bits/popover/components/popover-close.svelte
@@ -17,23 +17,19 @@
 	const attrs = getAttrs("close");
 
 	$: builder = $close;
-	$: slotProps = {
-		builder,
-		attrs
-	};
+	$: Object.assign(builder, attrs);
 </script>
 
 {#if asChild}
-	<slot {...slotProps} />
+	<slot {builder} />
 {:else}
 	<button
 		use:melt={builder}
 		type="button"
 		{...$$restProps}
-		{...attrs}
 		on:m-click={dispatch}
 		on:m-keydown={dispatch}
 	>
-		<slot {...slotProps} />
+		<slot {builder} />
 	</button>
 {/if}
diff --git a/src/lib/bits/popover/components/popover-content.svelte b/src/lib/bits/popover/components/popover-content.svelte
index 0d956c042..022929c47 100644
--- a/src/lib/bits/popover/components/popover-content.svelte
+++ b/src/lib/bits/popover/components/popover-content.svelte
@@ -40,10 +40,7 @@
 		ids.content.set(id);
 	}
 	$: builder = $content;
-	$: slotProps = {
-		builder,
-		attrs
-	};
+	$: Object.assign(builder, attrs);
 
 	$: updatePositioning({
 		side,
@@ -59,15 +56,14 @@
 </script>
 
 {#if asChild && $open}
-	<slot {...slotProps} />
+	<slot {builder} />
 {:else if transition && $open}
 	<div
 		transition:transition={transitionConfig}
 		use:melt={builder}
 		{...$$restProps}
-		{...attrs}
 	>
-		<slot {...slotProps} />
+		<slot {builder} />
 	</div>
 {:else if inTransition && outTransition && $open}
 	<div
@@ -75,30 +71,23 @@
 		out:outTransition={outTransitionConfig}
 		use:melt={builder}
 		{...$$restProps}
-		{...attrs}
 	>
-		<slot {...slotProps} />
+		<slot {builder} />
 	</div>
 {:else if inTransition && $open}
-	<div
-		in:inTransition={inTransitionConfig}
-		use:melt={builder}
-		{...$$restProps}
-		{...attrs}
-	>
-		<slot {...slotProps} />
+	<div in:inTransition={inTransitionConfig} use:melt={builder} {...$$restProps}>
+		<slot {builder} />
 	</div>
 {:else if outTransition && $open}
 	<div
 		out:outTransition={outTransitionConfig}
 		use:melt={builder}
 		{...$$restProps}
-		{...attrs}
 	>
-		<slot {...slotProps} />
+		<slot {builder} />
 	</div>
 {:else if $open}
-	<div use:melt={builder} {...$$restProps} {...attrs}>
-		<slot {...slotProps} />
+	<div use:melt={builder} {...$$restProps}>
+		<slot {builder} />
 	</div>
 {/if}
diff --git a/src/lib/bits/popover/components/popover-trigger.svelte b/src/lib/bits/popover/components/popover-trigger.svelte
index 2a4e2175d..1f653f17f 100644
--- a/src/lib/bits/popover/components/popover-trigger.svelte
+++ b/src/lib/bits/popover/components/popover-trigger.svelte
@@ -22,23 +22,19 @@
 		ids.trigger.set(id);
 	}
 	$: builder = $trigger;
-	$: slotProps = {
-		builder,
-		attrs
-	};
+	$: Object.assign(builder, attrs);
 </script>
 
 {#if asChild}
-	<slot {...slotProps} />
+	<slot {builder} />
 {:else}
 	<button
 		use:melt={builder}
 		type="button"
 		{...$$restProps}
-		{...attrs}
 		on:m-click={dispatch}
 		on:m-keydown={dispatch}
 	>
-		<slot {...slotProps} />
+		<slot {builder} />
 	</button>
 {/if}
diff --git a/src/lib/bits/progress/components/progress.svelte b/src/lib/bits/progress/components/progress.svelte
index d032c3b7f..d0a6ffbeb 100644
--- a/src/lib/bits/progress/components/progress.svelte
+++ b/src/lib/bits/progress/components/progress.svelte
@@ -30,16 +30,13 @@
 	$: updateOption("max", max);
 
 	$: builder = $root;
-	$: slotProps = {
-		builder,
-		attrs
-	};
+	$: Object.assign(builder, attrs);
 </script>
 
 {#if asChild}
-	<slot {...slotProps} />
+	<slot {builder} />
 {:else}
-	<div use:melt={builder} {...$$restProps} {...attrs}>
-		<slot {...slotProps} />
+	<div use:melt={builder} {...$$restProps}>
+		<slot {builder} />
 	</div>
 {/if}
diff --git a/src/lib/bits/radio-group/components/radio-group-input.svelte b/src/lib/bits/radio-group/components/radio-group-input.svelte
index d9e4d7a25..85112a813 100644
--- a/src/lib/bits/radio-group/components/radio-group-input.svelte
+++ b/src/lib/bits/radio-group/components/radio-group-input.svelte
@@ -14,14 +14,11 @@
 	const attrs = getAttrs("input");
 
 	$: builder = $hiddenInput;
-	$: slotProps = {
-		builder,
-		attrs
-	};
+	$: Object.assign(builder, attrs);
 </script>
 
 {#if asChild}
-	<slot {...slotProps} />
+	<slot {builder} />
 {:else}
-	<input use:melt={builder} {...$$restProps} {...attrs} />
+	<input use:melt={builder} {...$$restProps} />
 {/if}
diff --git a/src/lib/bits/radio-group/components/radio-group-item-indicator.svelte b/src/lib/bits/radio-group/components/radio-group-item-indicator.svelte
index 0d7546db6..750b94626 100644
--- a/src/lib/bits/radio-group/components/radio-group-item-indicator.svelte
+++ b/src/lib/bits/radio-group/components/radio-group-item-indicator.svelte
@@ -1,9 +1,13 @@
 <script lang="ts">
 	import { getRadioIndicator, getAttrs } from "../ctx.js";
-	const { isChecked, value } = getRadioIndicator();
+	import type { ItemIndicatorProps } from "../types.js";
+
+	type $$Props = ItemIndicatorProps;
 
 	export let asChild = false;
 
+	const { isChecked, value } = getRadioIndicator();
+
 	const attrs = getAttrs("item-indicator");
 
 	$: slotProps = {
@@ -15,7 +19,7 @@
 {#if asChild}
 	<slot {...slotProps} />
 {:else}
-	<div {...attrs}>
+	<div {...attrs} {...$$restProps}>
 		{#if $isChecked(value)}
 			<slot {...slotProps} />
 		{/if}
diff --git a/src/lib/bits/radio-group/components/radio-group-item.svelte b/src/lib/bits/radio-group/components/radio-group-item.svelte
index 36d0a662f..66984456b 100644
--- a/src/lib/bits/radio-group/components/radio-group-item.svelte
+++ b/src/lib/bits/radio-group/components/radio-group-item.svelte
@@ -19,24 +19,20 @@
 	const attrs = getAttrs("item");
 
 	$: builder = $item({ value, disabled });
-	$: slotProps = {
-		builder,
-		attrs
-	};
+	$: Object.assign(builder, attrs);
 </script>
 
 {#if asChild}
-	<slot {...slotProps} />
+	<slot {builder} />
 {:else}
 	<button
 		use:melt={builder}
 		type="button"
 		{...$$restProps}
-		{...attrs}
 		on:m-click={dispatch}
 		on:m-focus={dispatch}
 		on:m-keydown={dispatch}
 	>
-		<slot {...slotProps} />
+		<slot {builder} />
 	</button>
 {/if}
diff --git a/src/lib/bits/radio-group/components/radio-group.svelte b/src/lib/bits/radio-group/components/radio-group.svelte
index 969151680..f76c902ab 100644
--- a/src/lib/bits/radio-group/components/radio-group.svelte
+++ b/src/lib/bits/radio-group/components/radio-group.svelte
@@ -40,16 +40,13 @@
 	$: updateOption("orientation", orientation);
 
 	$: builder = $root;
-	$: slotProps = {
-		builder,
-		attrs
-	};
+	$: Object.assign(builder, attrs);
 </script>
 
 {#if asChild}
-	<slot {...slotProps} />
+	<slot {builder} />
 {:else}
-	<div use:melt={builder} {...$$restProps} {...attrs}>
-		<slot {...slotProps} />
+	<div use:melt={builder} {...$$restProps}>
+		<slot {builder} />
 	</div>
 {/if}
diff --git a/src/lib/bits/range-calendar/components/range-calendar-date.svelte b/src/lib/bits/range-calendar/components/range-calendar-date.svelte
index c45e9ac7a..9c50b8efa 100644
--- a/src/lib/bits/range-calendar/components/range-calendar-date.svelte
+++ b/src/lib/bits/range-calendar/components/range-calendar-date.svelte
@@ -14,12 +14,12 @@
 		helpers: { isDateDisabled, isDateUnavailable }
 	} = getCtx();
 
-	$: builder = $cell(date, month);
 	const attrs = getAttrs("date");
+	$: builder = $cell(date, month);
+	$: Object.assign(builder, attrs);
 
 	$: slotProps = {
 		builder,
-		attrs,
 		disabled: $isDateDisabled(date),
 		unavailable: $isDateUnavailable(date)
 	};
@@ -28,7 +28,7 @@
 {#if asChild}
 	<slot {...slotProps} />
 {:else}
-	<div use:melt={builder} {...attrs} {...$$restProps}>
+	<div use:melt={builder} {...$$restProps}>
 		<slot {...slotProps}>
 			{date.day}
 		</slot>
diff --git a/src/lib/bits/range-calendar/components/range-calendar-grid.svelte b/src/lib/bits/range-calendar/components/range-calendar-grid.svelte
index 3c7b3f15f..8345c1dc3 100644
--- a/src/lib/bits/range-calendar/components/range-calendar-grid.svelte
+++ b/src/lib/bits/range-calendar/components/range-calendar-grid.svelte
@@ -11,19 +11,15 @@
 		elements: { grid }
 	} = getCtx();
 
-	$: builder = $grid;
 	const attrs = getAttrs("grid");
-
-	$: slotProps = {
-		builder,
-		attrs
-	};
+	$: builder = $grid;
+	$: Object.assign(builder, attrs);
 </script>
 
 {#if asChild}
-	<slot {...slotProps} />
+	<slot {builder} />
 {:else}
-	<table use:melt={builder} {...$$restProps} {...attrs}>
-		<slot {...slotProps} />
+	<table use:melt={builder} {...$$restProps}>
+		<slot {builder} />
 	</table>
 {/if}
diff --git a/src/lib/bits/range-calendar/components/range-calendar-heading.svelte b/src/lib/bits/range-calendar/components/range-calendar-heading.svelte
index c4463f49a..e55b6dea7 100644
--- a/src/lib/bits/range-calendar/components/range-calendar-heading.svelte
+++ b/src/lib/bits/range-calendar/components/range-calendar-heading.svelte
@@ -12,15 +12,22 @@
 		states: { headingValue }
 	} = getCtx();
 
-	$: builder = $heading;
 	const attrs = getAttrs("heading");
+
+	$: builder = $heading;
+	$: Object.assign(builder, attrs);
+
+	$: slotProps = {
+		builder,
+		headingValue: $headingValue
+	};
 </script>
 
 {#if asChild}
-	<slot {builder} {attrs} headingValue={$headingValue} />
+	<slot {...slotProps} />
 {:else}
-	<div use:melt={builder} {...$$restProps} {...attrs}>
-		<slot {builder} {attrs} headingValue={$headingValue}>
+	<div use:melt={builder} {...$$restProps}>
+		<slot {...slotProps}>
 			{$headingValue}
 		</slot>
 	</div>
diff --git a/src/lib/bits/range-calendar/components/range-calendar-next-button.svelte b/src/lib/bits/range-calendar/components/range-calendar-next-button.svelte
index b5285d949..e557f4d00 100644
--- a/src/lib/bits/range-calendar/components/range-calendar-next-button.svelte
+++ b/src/lib/bits/range-calendar/components/range-calendar-next-button.svelte
@@ -11,14 +11,15 @@
 		elements: { nextButton }
 	} = getCtx();
 
-	$: builder = $nextButton;
 	const attrs = getAttrs("next-button");
+	$: builder = $nextButton;
+	$: Object.assign(builder, attrs);
 </script>
 
 {#if asChild}
-	<slot {builder} {attrs} />
+	<slot {builder} />
 {:else}
-	<button use:melt={builder} type="button" {...$$restProps} {...attrs}>
-		<slot {builder} {attrs} />
+	<button use:melt={builder} type="button" {...$$restProps}>
+		<slot {builder} />
 	</button>
 {/if}
diff --git a/src/lib/bits/range-calendar/components/range-calendar-prev-button.svelte b/src/lib/bits/range-calendar/components/range-calendar-prev-button.svelte
index 3775bc3c0..ce84b1b68 100644
--- a/src/lib/bits/range-calendar/components/range-calendar-prev-button.svelte
+++ b/src/lib/bits/range-calendar/components/range-calendar-prev-button.svelte
@@ -11,19 +11,15 @@
 		elements: { prevButton }
 	} = getCtx();
 
-	$: builder = $prevButton;
 	const attrs = getAttrs("prev-button");
-
-	$: slotProps = {
-		builder,
-		attrs
-	};
+	$: builder = $prevButton;
+	$: Object.assign(builder, attrs);
 </script>
 
 {#if asChild}
-	<slot {...slotProps} />
+	<slot {builder} />
 {:else}
-	<button use:melt={builder} type="button" {...$$restProps} {...attrs}>
-		<slot {...slotProps} />
+	<button use:melt={builder} type="button" {...$$restProps}>
+		<slot {builder} />
 	</button>
 {/if}
diff --git a/src/lib/bits/range-calendar/components/range-calendar.svelte b/src/lib/bits/range-calendar/components/range-calendar.svelte
index e3ebc86a1..ca3106f09 100644
--- a/src/lib/bits/range-calendar/components/range-calendar.svelte
+++ b/src/lib/bits/range-calendar/components/range-calendar.svelte
@@ -88,12 +88,12 @@
 	$: updateOption("calendarLabel", calendarLabel);
 	$: updateOption("weekdayFormat", weekdayFormat);
 
-	$: builder = $calendar;
 	const attrs = getAttrs("root");
+	$: builder = $calendar;
+	$: Object.assign(builder, attrs);
 
 	$: slotProps = {
 		builder,
-		attrs,
 		months: $months,
 		weekdays: $weekdays
 	};
@@ -102,7 +102,7 @@
 {#if asChild}
 	<slot {...slotProps} />
 {:else}
-	<div use:melt={builder} {...$$restProps} {...attrs}>
+	<div use:melt={builder} {...$$restProps}>
 		<slot {...slotProps} />
 	</div>
 {/if}
diff --git a/src/lib/bits/select/components/select-arrow.svelte b/src/lib/bits/select/components/select-arrow.svelte
index b8b1cb13b..a93146a27 100644
--- a/src/lib/bits/select/components/select-arrow.svelte
+++ b/src/lib/bits/select/components/select-arrow.svelte
@@ -15,11 +15,11 @@
 	const attrs = getAttrs("arrow");
 
 	$: builder = $arrow;
-	$: slotProps = { builder, attrs };
+	$: Object.assign(builder, attrs);
 </script>
 
 {#if asChild}
-	<slot {...slotProps} />
+	<slot {builder} />
 {:else}
-	<div use:melt={builder} {...$$restProps} {...attrs} />
+	<div use:melt={builder} {...$$restProps} />
 {/if}
diff --git a/src/lib/bits/select/components/select-content.svelte b/src/lib/bits/select/components/select-content.svelte
index b1a56e940..ce307e8ea 100644
--- a/src/lib/bits/select/components/select-content.svelte
+++ b/src/lib/bits/select/components/select-content.svelte
@@ -42,8 +42,10 @@
 	$: if (id) {
 		ids.menu.set(id);
 	}
+
 	$: builder = $menu;
-	$: slotProps = { builder, attrs };
+	$: Object.assign(builder, attrs);
+
 	$: updatePositioning({
 		side,
 		align,
@@ -59,17 +61,16 @@
 
 <!-- svelte-ignore a11y-no-static-element-interactions / applied by melt's builder-->
 {#if asChild && $open}
-	<slot {...slotProps} />
+	<slot {builder} />
 {:else if transition && $open}
 	<div
 		transition:transition={transitionConfig}
 		use:melt={builder}
 		{...$$restProps}
-		{...attrs}
 		on:m-pointerleave={dispatch}
 		on:keydown
 	>
-		<slot {...slotProps} />
+		<slot {builder} />
 	</div>
 {:else if inTransition && outTransition && $open}
 	<div
@@ -77,42 +78,38 @@
 		out:outTransition={outTransitionConfig}
 		use:melt={builder}
 		{...$$restProps}
-		{...attrs}
 		on:m-pointerleave={dispatch}
 		on:keydown
 	>
-		<slot {...slotProps} />
+		<slot {builder} />
 	</div>
 {:else if inTransition && $open}
 	<div
 		in:inTransition={inTransitionConfig}
 		use:melt={builder}
 		{...$$restProps}
-		{...attrs}
 		on:m-pointerleave={dispatch}
 		on:keydown
 	>
-		<slot {...slotProps} />
+		<slot {builder} />
 	</div>
 {:else if outTransition && $open}
 	<div
 		out:outTransition={outTransitionConfig}
 		use:melt={builder}
 		{...$$restProps}
-		{...attrs}
 		on:m-pointerleave={dispatch}
 		on:keydown
 	>
-		<slot {...slotProps} />
+		<slot {builder} />
 	</div>
 {:else if $open}
 	<div
 		use:melt={builder}
 		{...$$restProps}
-		{...attrs}
 		on:m-pointerleave={dispatch}
 		on:keydown
 	>
-		<slot {...slotProps} />
+		<slot {builder} />
 	</div>
 {/if}
diff --git a/src/lib/bits/select/components/select-group.svelte b/src/lib/bits/select/components/select-group.svelte
index 4d482b014..8d10de715 100644
--- a/src/lib/bits/select/components/select-group.svelte
+++ b/src/lib/bits/select/components/select-group.svelte
@@ -10,13 +10,13 @@
 	const attrs = getAttrs("group");
 
 	$: builder = $group(id);
-	$: slotProps = { builder, attrs };
+	$: Object.assign(builder, attrs);
 </script>
 
 {#if asChild}
-	<slot {...slotProps} />
+	<slot {builder} />
 {:else}
-	<div use:melt={builder} {...$$restProps} {...attrs}>
-		<slot {...slotProps} />
+	<div use:melt={builder} {...$$restProps}>
+		<slot {builder} />
 	</div>
 {/if}
diff --git a/src/lib/bits/select/components/select-input.svelte b/src/lib/bits/select/components/select-input.svelte
index 8548d0a4a..2a07740f2 100644
--- a/src/lib/bits/select/components/select-input.svelte
+++ b/src/lib/bits/select/components/select-input.svelte
@@ -12,22 +12,17 @@
 		options: { disabled }
 	} = getCtx();
 
-	const attrs = getAttrs("input");
+	$: attrs = {
+		...getAttrs("input"),
+		disabled: $disabled ? true : undefined
+	};
 
 	$: builder = $hiddenInput;
-	$: slotProps = {
-		builder,
-		attrs: { ...attrs, disabled: $disabled ? true : undefined }
-	};
+	$: Object.assign(builder, attrs);
 </script>
 
 {#if asChild}
-	<slot {...slotProps} />
+	<slot {builder} />
 {:else}
-	<input
-		use:melt={builder}
-		{...$$restProps}
-		{...attrs}
-		disabled={$disabled ? true : undefined}
-	/>
+	<input use:melt={builder} {...$$restProps} />
 {/if}
diff --git a/src/lib/bits/select/components/select-item.svelte b/src/lib/bits/select/components/select-item.svelte
index 437edb37f..a779113a2 100644
--- a/src/lib/bits/select/components/select-item.svelte
+++ b/src/lib/bits/select/components/select-item.svelte
@@ -20,18 +20,17 @@
 	const attrs = getAttrs("item");
 
 	$: builder = $item({ value, disabled, label });
-	$: slotProps = { builder, attrs };
+	$: Object.assign(builder, attrs);
 </script>
 
 <!-- svelte-ignore a11y-no-static-element-interactions / applied by melt's builder-->
 
 {#if asChild}
-	<slot {...slotProps} />
+	<slot {builder} />
 {:else}
 	<div
 		use:melt={builder}
 		{...$$restProps}
-		{...attrs}
 		on:m-click={dispatch}
 		on:m-pointermove={dispatch}
 		on:focusin
@@ -39,7 +38,7 @@
 		on:focusout
 		on:pointerleave
 	>
-		<slot {...slotProps}>
+		<slot {builder}>
 			{label ? label : value}
 		</slot>
 	</div>
diff --git a/src/lib/bits/select/components/select-label.svelte b/src/lib/bits/select/components/select-label.svelte
index 92ed4b7f6..c7ec9eea2 100644
--- a/src/lib/bits/select/components/select-label.svelte
+++ b/src/lib/bits/select/components/select-label.svelte
@@ -17,13 +17,13 @@
 		ids.label.set(id);
 	}
 	$: builder = $groupLabel(groupId);
-	$: slotProps = { builder, attrs };
+	$: Object.assign(builder, attrs);
 </script>
 
 {#if asChild}
-	<slot {...slotProps} />
+	<slot {builder} />
 {:else}
-	<div use:melt={builder} {...$$restProps} {...attrs}>
-		<slot {...slotProps} />
+	<div use:melt={builder} {...$$restProps}>
+		<slot {builder} />
 	</div>
 {/if}
diff --git a/src/lib/bits/select/components/select-trigger.svelte b/src/lib/bits/select/components/select-trigger.svelte
index de4ec7d92..1f653f17f 100644
--- a/src/lib/bits/select/components/select-trigger.svelte
+++ b/src/lib/bits/select/components/select-trigger.svelte
@@ -22,20 +22,19 @@
 		ids.trigger.set(id);
 	}
 	$: builder = $trigger;
-	$: slotProps = { builder, attrs };
+	$: Object.assign(builder, attrs);
 </script>
 
 {#if asChild}
-	<slot {...slotProps} />
+	<slot {builder} />
 {:else}
 	<button
 		use:melt={builder}
 		type="button"
 		{...$$restProps}
-		{...attrs}
 		on:m-click={dispatch}
 		on:m-keydown={dispatch}
 	>
-		<slot {...slotProps} />
+		<slot {builder} />
 	</button>
 {/if}
diff --git a/src/lib/bits/separator/components/separator.svelte b/src/lib/bits/separator/components/separator.svelte
index 001b2a9e7..0388ade73 100644
--- a/src/lib/bits/separator/components/separator.svelte
+++ b/src/lib/bits/separator/components/separator.svelte
@@ -20,11 +20,11 @@
 	$: updateOption("decorative", decorative);
 
 	$: builder = $root;
-	$: slotProps = { builder, attrs };
+	$: Object.assign(builder, attrs);
 </script>
 
 {#if asChild}
-	<slot {...slotProps} />
+	<slot {builder} />
 {:else}
-	<div use:melt={builder} {...$$restProps} {...attrs} />
+	<div use:melt={builder} {...$$restProps} />
 {/if}
diff --git a/src/lib/bits/slider/components/slider-range.svelte b/src/lib/bits/slider/components/slider-range.svelte
index e3a549d6b..8c2e624b7 100644
--- a/src/lib/bits/slider/components/slider-range.svelte
+++ b/src/lib/bits/slider/components/slider-range.svelte
@@ -14,11 +14,11 @@
 	const attrs = getAttrs("range");
 
 	$: builder = $range;
-	$: slotProps = { builder, attrs };
+	$: Object.assign(builder, attrs);
 </script>
 
 {#if asChild}
-	<slot {...slotProps} />
+	<slot {builder} />
 {:else}
-	<span use:melt={builder} {...$$restProps} {...attrs} />
+	<span use:melt={builder} {...$$restProps} />
 {/if}
diff --git a/src/lib/bits/slider/components/slider-thumb.svelte b/src/lib/bits/slider/components/slider-thumb.svelte
index 7e445a672..61ec14feb 100644
--- a/src/lib/bits/slider/components/slider-thumb.svelte
+++ b/src/lib/bits/slider/components/slider-thumb.svelte
@@ -17,16 +17,11 @@
 	const attrs = getAttrs("thumb");
 
 	$: builder = $thumb();
-	$: slotProps = { builder, attrs };
+	$: Object.assign(builder, attrs);
 </script>
 
 {#if asChild}
-	<slot {...slotProps} />
+	<slot {builder} />
 {:else}
-	<span
-		use:melt={builder}
-		{...$$restProps}
-		{...attrs}
-		on:m-keydown={dispatch}
-	/>
+	<span use:melt={builder} {...$$restProps} on:m-keydown={dispatch} />
 {/if}
diff --git a/src/lib/bits/slider/components/slider-tick.svelte b/src/lib/bits/slider/components/slider-tick.svelte
index 19e4d3b0c..cef112027 100644
--- a/src/lib/bits/slider/components/slider-tick.svelte
+++ b/src/lib/bits/slider/components/slider-tick.svelte
@@ -14,11 +14,11 @@
 	const attrs = getAttrs("tick");
 
 	$: builder = $tick();
-	$: slotProps = { builder, attrs };
+	$: Object.assign(builder, attrs);
 </script>
 
 {#if asChild}
-	<slot {...slotProps} />
+	<slot {builder} />
 {:else}
-	<span use:melt={builder} {...$$restProps} {...attrs} />
+	<span use:melt={builder} {...$$restProps} />
 {/if}
diff --git a/src/lib/bits/slider/components/slider.svelte b/src/lib/bits/slider/components/slider.svelte
index 5966cf903..e7030ae4f 100644
--- a/src/lib/bits/slider/components/slider.svelte
+++ b/src/lib/bits/slider/components/slider.svelte
@@ -44,13 +44,14 @@
 	$: updateOption("orientation", orientation);
 
 	$: builder = $root;
-	$: slotProps = { builder, attrs, ticks: $ticks };
+	$: Object.assign(builder, attrs);
+	$: slotProps = { builder, ticks: $ticks };
 </script>
 
 {#if asChild}
 	<slot {...slotProps} />
 {:else}
-	<span use:melt={builder} {...$$restProps} {...attrs}>
+	<span use:melt={builder} {...$$restProps}>
 		<slot {...slotProps} />
 	</span>
 {/if}
diff --git a/src/lib/bits/switch/components/switch-thumb.svelte b/src/lib/bits/switch/components/switch-thumb.svelte
index 91413963b..5180a3476 100644
--- a/src/lib/bits/switch/components/switch-thumb.svelte
+++ b/src/lib/bits/switch/components/switch-thumb.svelte
@@ -15,6 +15,7 @@
 		"data-state": $checked ? "checked" : "unchecked",
 		"data-checked": $checked ? "" : undefined
 	};
+
 	$: slotProps = { checked: $checked, attrs };
 </script>
 
diff --git a/src/lib/bits/switch/components/switch.svelte b/src/lib/bits/switch/components/switch.svelte
index fcf030144..ad4b5cf2b 100644
--- a/src/lib/bits/switch/components/switch.svelte
+++ b/src/lib/bits/switch/components/switch.svelte
@@ -46,21 +46,20 @@
 
 	$: builder = $root;
 	$: attrs = { ...getAttrs("root"), "data-checked": checked ? "" : undefined };
-	$: slotProps = { builder, attrs };
+	$: Object.assign(builder, attrs);
 </script>
 
 {#if asChild}
-	<slot {...slotProps} />
+	<slot {builder} />
 {:else}
 	<button
 		use:melt={builder}
 		type="button"
 		{...$$restProps}
-		{...attrs}
 		on:m-click={dispatch}
 		on:m-keydown={dispatch}
 	>
-		<slot {...slotProps} />
+		<slot {builder} />
 	</button>
 {/if}
 {#if includeInput}
diff --git a/src/lib/bits/tabs/components/tabs-content.svelte b/src/lib/bits/tabs/components/tabs-content.svelte
index 301713a80..2c00cb75f 100644
--- a/src/lib/bits/tabs/components/tabs-content.svelte
+++ b/src/lib/bits/tabs/components/tabs-content.svelte
@@ -14,17 +14,13 @@
 	const attrs = getAttrs("content");
 
 	$: builder = $content(value);
-
-	$: slotProps = {
-		builder,
-		attrs
-	};
+	$: Object.assign(builder, attrs);
 </script>
 
 {#if asChild}
-	<slot {...slotProps} />
+	<slot {builder} />
 {:else}
-	<div use:melt={builder} {...$$restProps} {...attrs}>
-		<slot {...slotProps} />
+	<div use:melt={builder} {...$$restProps}>
+		<slot {builder} />
 	</div>
 {/if}
diff --git a/src/lib/bits/tabs/components/tabs-list.svelte b/src/lib/bits/tabs/components/tabs-list.svelte
index 16f84797e..807e92635 100644
--- a/src/lib/bits/tabs/components/tabs-list.svelte
+++ b/src/lib/bits/tabs/components/tabs-list.svelte
@@ -14,16 +14,13 @@
 	const attrs = getAttrs("list");
 
 	$: builder = $list;
-	$: slotProps = {
-		builder,
-		attrs
-	};
+	$: Object.assign(builder, attrs);
 </script>
 
 {#if asChild}
-	<slot {...slotProps} />
+	<slot {builder} />
 {:else}
-	<div use:melt={builder} {...$$restProps} {...attrs}>
-		<slot {...slotProps} />
+	<div use:melt={builder} {...$$restProps}>
+		<slot {builder} />
 	</div>
 {/if}
diff --git a/src/lib/bits/tabs/components/tabs-trigger.svelte b/src/lib/bits/tabs/components/tabs-trigger.svelte
index 40222779a..ef23c1bee 100644
--- a/src/lib/bits/tabs/components/tabs-trigger.svelte
+++ b/src/lib/bits/tabs/components/tabs-trigger.svelte
@@ -19,24 +19,20 @@
 	const attrs = getAttrs("trigger");
 
 	$: builder = $trigger({ value, disabled });
-	$: slotProps = {
-		builder,
-		attrs
-	};
+	$: Object.assign(builder, attrs);
 </script>
 
 {#if asChild}
-	<slot {...slotProps} />
+	<slot {builder} />
 {:else}
 	<button
 		use:melt={builder}
 		type="button"
 		{...$$restProps}
-		{...attrs}
 		on:m-click={dispatch}
 		on:m-focus={dispatch}
 		on:m-keydown={dispatch}
 	>
-		<slot {...slotProps} />
+		<slot {builder} />
 	</button>
 {/if}
diff --git a/src/lib/bits/tabs/components/tabs.svelte b/src/lib/bits/tabs/components/tabs.svelte
index 123abab51..521b4265e 100644
--- a/src/lib/bits/tabs/components/tabs.svelte
+++ b/src/lib/bits/tabs/components/tabs.svelte
@@ -40,9 +40,9 @@
 	$: updateOption("autoSet", autoSet);
 
 	$: builder = $root;
+	$: Object.assign(builder, attrs);
 	$: slotProps = {
 		builder,
-		attrs,
 		value: $localValue
 	};
 </script>
@@ -50,7 +50,7 @@
 {#if asChild}
 	<slot {...slotProps} />
 {:else}
-	<div use:melt={builder} {...$$restProps} {...attrs}>
+	<div use:melt={builder} {...$$restProps}>
 		<slot {...slotProps} />
 	</div>
 {/if}
diff --git a/src/lib/bits/toggle-group/components/toggle-group-item.svelte b/src/lib/bits/toggle-group/components/toggle-group-item.svelte
index 3e0f763f6..b2dd4ca07 100644
--- a/src/lib/bits/toggle-group/components/toggle-group-item.svelte
+++ b/src/lib/bits/toggle-group/components/toggle-group-item.svelte
@@ -19,19 +19,18 @@
 	const attrs = getAttrs("item");
 
 	$: builder = $item({ value, disabled });
-	$: slotProps = { builder, attrs };
+	$: Object.assign(builder, attrs);
 </script>
 
 {#if asChild}
-	<slot {...slotProps} />
+	<slot {builder} />
 {:else}
 	<button
 		use:melt={builder}
 		{...$$restProps}
-		{...attrs}
 		on:m-click={dispatch}
 		on:m-keydown={dispatch}
 	>
-		<slot {...slotProps} />
+		<slot {builder} />
 	</button>
 {/if}
diff --git a/src/lib/bits/toggle-group/components/toggle-group.svelte b/src/lib/bits/toggle-group/components/toggle-group.svelte
index 929d8f27a..8e0073654 100644
--- a/src/lib/bits/toggle-group/components/toggle-group.svelte
+++ b/src/lib/bits/toggle-group/components/toggle-group.svelte
@@ -50,16 +50,13 @@
 	$: updateOption("orientation", orientation);
 
 	$: builder = $root;
-	$: slotProps = {
-		builder,
-		attrs
-	};
+	$: Object.assign(builder, attrs);
 </script>
 
 {#if asChild}
-	<slot {...slotProps} />
+	<slot {builder} />
 {:else}
-	<div use:melt={builder} {...$$restProps} {...attrs}>
-		<slot {...slotProps} />
+	<div use:melt={builder} {...$$restProps}>
+		<slot {builder} />
 	</div>
 {/if}
diff --git a/src/lib/bits/toggle/components/toggle.svelte b/src/lib/bits/toggle/components/toggle.svelte
index 974d1908e..28445d4a7 100644
--- a/src/lib/bits/toggle/components/toggle.svelte
+++ b/src/lib/bits/toggle/components/toggle.svelte
@@ -35,20 +35,19 @@
 	$: updateOption("disabled", disabled);
 
 	$: builder = $root;
-	$: slotProps = { builder, attrs };
+	$: Object.assign(builder, attrs);
 </script>
 
 {#if asChild}
-	<slot {...slotProps} />
+	<slot {builder} />
 {:else}
 	<button
 		use:melt={builder}
 		type="button"
 		{...$$restProps}
-		{...attrs}
 		on:m-click={dispatch}
 		on:m-keydown={dispatch}
 	>
-		<slot {...slotProps} />
+		<slot {builder} />
 	</button>
 {/if}
diff --git a/src/lib/bits/tooltip/components/tooltip-arrow.svelte b/src/lib/bits/tooltip/components/tooltip-arrow.svelte
index b41fb7ffc..6749874f2 100644
--- a/src/lib/bits/tooltip/components/tooltip-arrow.svelte
+++ b/src/lib/bits/tooltip/components/tooltip-arrow.svelte
@@ -15,11 +15,11 @@
 	const attrs = getAttrs("arrow");
 
 	$: builder = $arrow;
-	$: slotProps = { builder, attrs };
+	$: Object.assign(builder, attrs);
 </script>
 
 {#if asChild}
-	<slot {...slotProps} />
+	<slot {builder} />
 {:else}
-	<div use:melt={builder} {...attrs} {...$$restProps} />
+	<div use:melt={builder} {...$$restProps} />
 {/if}
diff --git a/src/lib/bits/tooltip/components/tooltip-content.svelte b/src/lib/bits/tooltip/components/tooltip-content.svelte
index cdcdabfb6..0baa66f47 100644
--- a/src/lib/bits/tooltip/components/tooltip-content.svelte
+++ b/src/lib/bits/tooltip/components/tooltip-content.svelte
@@ -44,7 +44,7 @@
 		ids.content.set(id);
 	}
 	$: builder = $content;
-	$: slotProps = { builder, attrs };
+	$: Object.assign(builder, attrs);
 	$: updatePositioning({
 		side,
 		align,
@@ -61,17 +61,16 @@
 </script>
 
 {#if asChild && $open}
-	<slot {...slotProps} />
+	<slot {builder} />
 {:else if transition && $open}
 	<div
 		use:melt={builder}
 		transition:transition={transitionConfig}
 		{...$$restProps}
-		{...attrs}
 		on:m-pointerdown={dispatch}
 		on:m-pointerenter={dispatch}
 	>
-		<slot {...slotProps} />
+		<slot {builder} />
 	</div>
 {:else if inTransition && outTransition && $open}
 	<div
@@ -79,42 +78,38 @@
 		in:inTransition={inTransitionConfig}
 		out:outTransition={outTransitionConfig}
 		{...$$restProps}
-		{...attrs}
 		on:m-pointerdown={dispatch}
 		on:m-pointerenter={dispatch}
 	>
-		<slot {...slotProps} />
+		<slot {builder} />
 	</div>
 {:else if inTransition && $open}
 	<div
 		use:melt={builder}
 		in:inTransition={inTransitionConfig}
 		{...$$restProps}
-		{...attrs}
 		on:m-pointerdown={dispatch}
 		on:m-pointerenter={dispatch}
 	>
-		<slot {...slotProps} />
+		<slot {builder} />
 	</div>
 {:else if outTransition && $open}
 	<div
 		use:melt={builder}
 		out:outTransition={outTransitionConfig}
 		{...$$restProps}
-		{...attrs}
 		on:m-pointerdown={dispatch}
 		on:m-pointerenter={dispatch}
 	>
-		<slot {...slotProps} />
+		<slot {builder} />
 	</div>
 {:else if $open}
 	<div
 		use:melt={builder}
 		{...$$restProps}
-		{...attrs}
 		on:m-pointerdown={dispatch}
 		on:m-pointerenter={dispatch}
 	>
-		<slot {...slotProps} />
+		<slot {builder} />
 	</div>
 {/if}
diff --git a/src/lib/bits/tooltip/components/tooltip-trigger.svelte b/src/lib/bits/tooltip/components/tooltip-trigger.svelte
index f62a17cb5..2761f0617 100644
--- a/src/lib/bits/tooltip/components/tooltip-trigger.svelte
+++ b/src/lib/bits/tooltip/components/tooltip-trigger.svelte
@@ -22,17 +22,16 @@
 		ids.trigger.set(id);
 	}
 	$: builder = $trigger;
-	$: slotProps = { builder, attrs };
+	$: Object.assign(builder, attrs);
 </script>
 
 {#if asChild}
-	<slot {...slotProps} />
+	<slot {builder} />
 {:else}
 	<button
 		use:melt={builder}
 		type="button"
 		{...$$restProps}
-		{...attrs}
 		on:m-blur={dispatch}
 		on:m-focus={dispatch}
 		on:m-keydown={dispatch}
@@ -40,6 +39,6 @@
 		on:m-pointerenter={dispatch}
 		on:m-pointerleave={dispatch}
 	>
-		<slot {...slotProps} />
+		<slot {builder} />
 	</button>
 {/if}
diff --git a/src/lib/internal/attrs.ts b/src/lib/internal/attrs.ts
index 97dc3f660..dc764a549 100644
--- a/src/lib/internal/attrs.ts
+++ b/src/lib/internal/attrs.ts
@@ -12,5 +12,7 @@ export function createBitAttrs<T extends readonly string[]>(bit: Bit | "menu", p
 }
 
 export function disabledAttrs(disabled: boolean | undefined | null) {
-	return disabled ? { "aria-disabled": true, "data-disabled": "" } : {};
+	return disabled
+		? { "aria-disabled": "true", "data-disabled": "" }
+		: { "aria-disabled": undefined, "data-disabled": undefined };
 }

From c76d0a8b3788b2c2ad2d74c590c4d761749cc902 Mon Sep 17 00:00:00 2001
From: Hunter Johnston <johnstonhuntera@gmail.com>
Date: Sun, 3 Dec 2023 21:35:19 -0500
Subject: [PATCH 214/217] types

---
 src/lib/bits/accordion/_export.types.ts       | 16 +-------
 src/lib/bits/accordion/types.ts               | 10 +----
 src/lib/bits/alert-dialog/_export.types.ts    | 22 +----------
 src/lib/bits/alert-dialog/types.ts            | 16 +-------
 src/lib/bits/aspect-ratio/_export.types.ts    |  4 +-
 src/lib/bits/aspect-ratio/types.ts            |  6 +--
 src/lib/bits/avatar/_export.types.ts          |  4 +-
 src/lib/bits/avatar/types.ts                  | 10 +----
 src/lib/bits/button/_export.types.ts          |  8 ++--
 src/lib/bits/button/types.ts                  |  4 --
 src/lib/bits/calendar/_export.types.ts        | 26 +------------
 src/lib/bits/calendar/types.ts                | 22 +----------
 src/lib/bits/checkbox/_export.types.ts        | 14 +------
 src/lib/bits/checkbox/types.ts                |  8 +---
 src/lib/bits/collapsible/_export.types.ts     | 20 +---------
 src/lib/bits/collapsible/types.ts             |  8 +---
 src/lib/bits/context-menu/_export.types.ts    | 31 +--------------
 src/lib/bits/context-menu/types.ts            | 26 +------------
 src/lib/bits/date-field/_export.types.ts      |  9 +++++
 src/lib/bits/date-field/types.ts              | 12 +-----
 src/lib/bits/date-picker/_export.types.ts     | 33 ++++++++++++++++
 src/lib/bits/date-picker/types.ts             |  2 +-
 .../bits/date-range-field/_export.types.ts    |  8 ++++
 .../bits/date-range-picker/_export.types.ts   | 33 ++++++++++++++++
 src/lib/bits/date-range-picker/types.ts       | 17 ++++++--
 src/lib/bits/dialog/_export.types.ts          | 13 +++++++
 src/lib/bits/dialog/types.ts                  | 14 +------
 src/lib/bits/dropdown-menu/_export.types.ts   | 33 +---------------
 src/lib/bits/dropdown-menu/types.ts           |  2 -
 src/lib/bits/label/_export.types.ts           |  7 ++++
 src/lib/bits/label/types.ts                   |  6 +--
 src/lib/bits/link-preview/_export.types.ts    | 19 +++++++++
 src/lib/bits/link-preview/types.ts            | 10 +----
 src/lib/bits/menubar/_export.types.ts         | 27 +++++++++++++
 src/lib/bits/menubar/types.ts                 | 30 ++------------
 src/lib/bits/popover/_export.types.ts         | 10 +++++
 src/lib/bits/popover/types.ts                 | 11 +-----
 src/lib/bits/progress/_export.types.ts        |  1 +
 src/lib/bits/progress/types.ts                |  6 +--
 src/lib/bits/radio-group/_export.types.ts     |  8 ++++
 src/lib/bits/radio-group/types.ts             |  9 +----
 src/lib/bits/range-calendar/_export.types.ts  | 19 +++++++++
 .../components/range-calendar-date.svelte     | 14 ++++++-
 .../range-calendar-next-button.svelte         | 13 ++++++-
 .../range-calendar-prev-button.svelte         | 13 ++++++-
 .../components/range-calendar.svelte          |  8 +++-
 src/lib/bits/range-calendar/types.ts          | 39 +++++++++++++------
 src/lib/bits/select/_export.types.ts          | 18 +++++++++
 src/lib/bits/select/types.ts                  | 19 +--------
 src/lib/bits/separator/_export.types.ts       |  1 +
 src/lib/bits/separator/types.ts               |  6 +--
 src/lib/bits/slider/_export.types.ts          |  9 +++++
 src/lib/bits/slider/types.ts                  | 10 +----
 src/lib/bits/switch/_export.types.ts          |  7 ++++
 src/lib/bits/switch/types.ts                  |  8 +---
 src/lib/bits/tabs/_export.types.ts            |  8 ++++
 src/lib/bits/tabs/types.ts                    |  9 +----
 src/lib/bits/toggle-group/_export.types.ts    |  6 +++
 src/lib/bits/toggle-group/types.ts            |  7 +---
 src/lib/bits/toggle/_export.types.ts          |  5 +++
 src/lib/bits/toggle/types.ts                  |  6 +--
 src/lib/bits/tooltip/_export.types.ts         |  9 +++++
 src/lib/bits/tooltip/types.ts                 | 10 +----
 63 files changed, 373 insertions(+), 446 deletions(-)
 create mode 100644 src/lib/bits/date-field/_export.types.ts
 create mode 100644 src/lib/bits/date-picker/_export.types.ts
 create mode 100644 src/lib/bits/date-range-field/_export.types.ts
 create mode 100644 src/lib/bits/date-range-picker/_export.types.ts
 create mode 100644 src/lib/bits/dialog/_export.types.ts
 create mode 100644 src/lib/bits/label/_export.types.ts
 create mode 100644 src/lib/bits/link-preview/_export.types.ts
 create mode 100644 src/lib/bits/menubar/_export.types.ts
 create mode 100644 src/lib/bits/popover/_export.types.ts
 create mode 100644 src/lib/bits/progress/_export.types.ts
 create mode 100644 src/lib/bits/radio-group/_export.types.ts
 create mode 100644 src/lib/bits/range-calendar/_export.types.ts
 create mode 100644 src/lib/bits/select/_export.types.ts
 create mode 100644 src/lib/bits/separator/_export.types.ts
 create mode 100644 src/lib/bits/slider/_export.types.ts
 create mode 100644 src/lib/bits/switch/_export.types.ts
 create mode 100644 src/lib/bits/tabs/_export.types.ts
 create mode 100644 src/lib/bits/toggle-group/_export.types.ts
 create mode 100644 src/lib/bits/toggle/_export.types.ts
 create mode 100644 src/lib/bits/tooltip/_export.types.ts

diff --git a/src/lib/bits/accordion/_export.types.ts b/src/lib/bits/accordion/_export.types.ts
index c0a09738b..cf02b6f3b 100644
--- a/src/lib/bits/accordion/_export.types.ts
+++ b/src/lib/bits/accordion/_export.types.ts
@@ -1,15 +1,3 @@
-import type {
-	Props,
-	ItemProps,
-	HeaderProps,
-	TriggerProps,
-	ContentProps,
-	//
-	// Events
-	//
-	TriggerEvents
-} from "./types.js";
-
 export type {
 	Props as AccordionProps,
 	ItemProps as AccordionItemProps,
@@ -17,7 +5,5 @@ export type {
 	TriggerProps as AccordionTriggerProps,
 	ContentProps as AccordionContentProps,
 	//
-	// Events
-	//
 	TriggerEvents as AccordionTriggerEvents
-};
+} from "./types.js";
diff --git a/src/lib/bits/accordion/types.ts b/src/lib/bits/accordion/types.ts
index 45b8afd62..1f65a9733 100644
--- a/src/lib/bits/accordion/types.ts
+++ b/src/lib/bits/accordion/types.ts
@@ -33,13 +33,5 @@ export type {
 	TriggerProps,
 	ContentProps,
 	//
-	Props as AccordionProps,
-	ItemProps as AccordionItemProps,
-	HeaderProps as AccordionHeaderProps,
-	TriggerProps as AccordionTriggerProps,
-	ContentProps as AccordionContentProps,
-	//
-	TriggerEvents,
-	//
-	TriggerEvents as AccordionTriggerEvents
+	TriggerEvents
 };
diff --git a/src/lib/bits/alert-dialog/_export.types.ts b/src/lib/bits/alert-dialog/_export.types.ts
index 4523112f6..94d39ace3 100644
--- a/src/lib/bits/alert-dialog/_export.types.ts
+++ b/src/lib/bits/alert-dialog/_export.types.ts
@@ -1,21 +1,3 @@
-import type {
-	Props,
-	TriggerProps,
-	ActionProps,
-	CancelProps,
-	ContentProps,
-	DescriptionProps,
-	PortalProps,
-	OverlayProps,
-	TitleProps,
-	//
-	// Events
-	//
-	TriggerEvents,
-	CancelEvents,
-	ActionEvents
-} from "./types.js";
-
 export type {
 	Props as AlertDialogProps,
 	TriggerProps as AlertDialogTriggerProps,
@@ -27,9 +9,7 @@ export type {
 	OverlayProps as AlertDialogOverlayProps,
 	TitleProps as AlertDialogTitleProps,
 	//
-	// Events
-	//
 	TriggerEvents as AlertDialogTriggerEvents,
 	CancelEvents as AlertDialogCancelEvents,
 	ActionEvents as AlertDialogActionEvents
-};
+} from "./types.js";
diff --git a/src/lib/bits/alert-dialog/types.ts b/src/lib/bits/alert-dialog/types.ts
index 1e61cd0f1..711a2a371 100644
--- a/src/lib/bits/alert-dialog/types.ts
+++ b/src/lib/bits/alert-dialog/types.ts
@@ -42,21 +42,7 @@ export type {
 	PortalProps,
 	TitleProps,
 	//
-	Props as AlertDialogProps,
-	TriggerProps as AlertDialogTriggerProps,
-	ActionProps as AlertDialogActionProps,
-	CancelProps as AlertDialogCancelProps,
-	ContentProps as AlertDialogContentProps,
-	DescriptionProps as AlertDialogDescriptionProps,
-	ContentProps as AlertDialogOverlayProps,
-	PortalProps as AlertDialogPortalProps,
-	TitleProps as AlertDialogTitleProps,
-	//
 	TriggerEvents,
 	CancelEvents,
-	ActionEvents,
-	//
-	TriggerEvents as AlertDialogTriggerEvents,
-	CancelEvents as AlertDialogCancelEvents,
-	ActionEvents as AlertDialogActionEvents
+	ActionEvents
 };
diff --git a/src/lib/bits/aspect-ratio/_export.types.ts b/src/lib/bits/aspect-ratio/_export.types.ts
index dc87247c8..a0c284f74 100644
--- a/src/lib/bits/aspect-ratio/_export.types.ts
+++ b/src/lib/bits/aspect-ratio/_export.types.ts
@@ -1,3 +1 @@
-import type { Props } from "./types.js";
-
-export type { Props as AspectRatioProps };
+export type { Props as AspectRatioProps } from "./types.js";
diff --git a/src/lib/bits/aspect-ratio/types.ts b/src/lib/bits/aspect-ratio/types.ts
index eec27ef3d..3685d4033 100644
--- a/src/lib/bits/aspect-ratio/types.ts
+++ b/src/lib/bits/aspect-ratio/types.ts
@@ -3,8 +3,4 @@ import type * as I from "./_types.js";
 
 type Props = I.Props & HTMLDivAttributes;
 
-export type {
-	Props,
-	//
-	Props as AspectRatioProps
-};
+export type { Props };
diff --git a/src/lib/bits/avatar/_export.types.ts b/src/lib/bits/avatar/_export.types.ts
index ebd225ee6..25b65ac43 100644
--- a/src/lib/bits/avatar/_export.types.ts
+++ b/src/lib/bits/avatar/_export.types.ts
@@ -1,7 +1,5 @@
-import type { Props, ImageProps, FallbackProps } from "./types.js";
-
 export type {
 	Props as AvatarProps,
 	ImageProps as AvatarImageProps,
 	FallbackProps as AvatarFallbackProps
-};
+} from "./types.js";
diff --git a/src/lib/bits/avatar/types.ts b/src/lib/bits/avatar/types.ts
index d3cf63451..04fa2792b 100644
--- a/src/lib/bits/avatar/types.ts
+++ b/src/lib/bits/avatar/types.ts
@@ -8,12 +8,4 @@ type ImageProps = I.ImageProps & HTMLImgAttributes;
 
 type FallbackProps = I.FallbackProps & HTMLSpanAttributes;
 
-export type {
-	Props,
-	ImageProps,
-	FallbackProps,
-	//
-	Props as AvatarProps,
-	ImageProps as AvatarImageProps,
-	FallbackProps as AvatarFallbackProps
-};
+export type { Props, ImageProps, FallbackProps };
diff --git a/src/lib/bits/button/_export.types.ts b/src/lib/bits/button/_export.types.ts
index 760c082cd..af796f81e 100644
--- a/src/lib/bits/button/_export.types.ts
+++ b/src/lib/bits/button/_export.types.ts
@@ -1,3 +1,5 @@
-import type { Props, Events } from "./types.js";
-
-export type { Props as ButtonProps, Events as ButtonEvents };
+export type {
+	Props as ButtonProps,
+	//
+	Events as ButtonEvents
+} from "./types.js";
diff --git a/src/lib/bits/button/types.ts b/src/lib/bits/button/types.ts
index 3f303e94c..ef86e96f0 100644
--- a/src/lib/bits/button/types.ts
+++ b/src/lib/bits/button/types.ts
@@ -31,11 +31,7 @@ type Events = {
 export type {
 	Props,
 	//
-	Props as ButtonProps,
-	//
 	Events,
 	//
-	Events as ButtonEvents,
-	//
 	ButtonEventHandler
 };
diff --git a/src/lib/bits/calendar/_export.types.ts b/src/lib/bits/calendar/_export.types.ts
index f6c68e7a2..c16b668f4 100644
--- a/src/lib/bits/calendar/_export.types.ts
+++ b/src/lib/bits/calendar/_export.types.ts
@@ -1,25 +1,3 @@
-import type {
-	Props,
-	PrevButtonProps,
-	NextButtonProps,
-	HeadingProps,
-	GridProps,
-	CellProps,
-	GridRowProps,
-	GridBodyProps,
-	HeadCellProps,
-	GridHeadProps,
-	HeaderProps,
-	DateProps,
-	//
-	// Events
-	//
-	Events,
-	PrevButtonEvents,
-	NextButtonEvents,
-	DateEvents
-} from "./types.js";
-
 export type {
 	Props as CalendarProps,
 	PrevButtonProps as CalendarPrevButtonProps,
@@ -34,10 +12,8 @@ export type {
 	HeaderProps as CalendarHeaderProps,
 	DateProps as CalendarDateProps,
 	//
-	// Events
-	//
 	Events as CalendarEvents,
 	PrevButtonEvents as CalendarPrevButtonEvents,
 	NextButtonEvents as CalendarNextButtonEvents,
 	DateEvents as CalendarDateEvents
-};
+} from "./types.js";
diff --git a/src/lib/bits/calendar/types.ts b/src/lib/bits/calendar/types.ts
index c7a853dbd..7b900758e 100644
--- a/src/lib/bits/calendar/types.ts
+++ b/src/lib/bits/calendar/types.ts
@@ -68,28 +68,8 @@ export type {
 	HeaderProps,
 	DateProps,
 	//
-	Props as CalendarProps,
-	PrevButtonProps as CalendarPrevButtonProps,
-	NextButtonProps as CalendarNextButtonProps,
-	HeadingProps as CalendarHeadingProps,
-	HeaderProps as CalendarHeaderProps,
-	GridProps as CalendarGridProps,
-	GridHeadProps as CalendarGridHeadProps,
-	HeadCellProps as CalendarHeadCellProps,
-	GridBodyProps as CalendarGridBodyProps,
-	CellProps as CalendarCellProps,
-	GridRowProps as CalendarGridRowProps,
-	DateProps as CalendarDateProps,
-	//
-	// Events
-	//
 	Events,
 	PrevButtonEvents,
 	NextButtonEvents,
-	DateEvents,
-	//
-	Events as CalendarEvents,
-	PrevButtonEvents as CalendarPrevButtonEvents,
-	NextButtonEvents as CalendarNextButtonEvents,
-	DateEvents as CalendarDateEvents
+	DateEvents
 };
diff --git a/src/lib/bits/checkbox/_export.types.ts b/src/lib/bits/checkbox/_export.types.ts
index b8aaddfce..b27041d11 100644
--- a/src/lib/bits/checkbox/_export.types.ts
+++ b/src/lib/bits/checkbox/_export.types.ts
@@ -1,19 +1,7 @@
-import type {
-	Props,
-	IndicatorProps,
-	InputProps,
-	//
-	// Events
-	//
-	Events
-} from "./types.js";
-
 export type {
 	Props as CheckboxProps,
 	IndicatorProps as CheckboxIndicatorProps,
 	InputProps as CheckboxInputProps,
 	//
-	// Events
-	//
 	Events as CheckboxEvents
-};
+} from "./types.js";
diff --git a/src/lib/bits/checkbox/types.ts b/src/lib/bits/checkbox/types.ts
index 573267d43..79ac369ba 100644
--- a/src/lib/bits/checkbox/types.ts
+++ b/src/lib/bits/checkbox/types.ts
@@ -19,11 +19,5 @@ export type {
 	IndicatorProps,
 	InputProps,
 	//
-	Props as CheckboxProps,
-	IndicatorProps as CheckboxIndicatorProps,
-	InputProps as CheckboxInputProps,
-	//
-	Events,
-	//
-	Events as CheckboxEvents
+	Events
 };
diff --git a/src/lib/bits/collapsible/_export.types.ts b/src/lib/bits/collapsible/_export.types.ts
index 2a6f4dc97..64583a876 100644
--- a/src/lib/bits/collapsible/_export.types.ts
+++ b/src/lib/bits/collapsible/_export.types.ts
@@ -1,25 +1,7 @@
-/**
- * These types are exported from the root of the package for
- * convenience. We have to prefix them with the component name to avoid
- * conflicts with other components.
- */
-
-import type {
-	Props,
-	ContentProps,
-	TriggerProps,
-	//
-	// Events
-	//
-	TriggerEvents
-} from "./types.js";
-
 export type {
 	Props as CollapsibleProps,
 	ContentProps as CollapsibleContentProps,
 	TriggerProps as CollapsibleTriggerProps,
 	//
-	// Events
-	//
 	TriggerEvents as CollapsibleTriggerEvents
-};
+} from "./types.js";
diff --git a/src/lib/bits/collapsible/types.ts b/src/lib/bits/collapsible/types.ts
index 724c1a1bc..4274457ea 100644
--- a/src/lib/bits/collapsible/types.ts
+++ b/src/lib/bits/collapsible/types.ts
@@ -22,11 +22,5 @@ export type {
 	ContentProps,
 	TriggerProps,
 	//
-	Props as CollapsibleProps,
-	ContentProps as CollapsibleContentProps,
-	TriggerProps as CollapsibleTriggerProps,
-	//
-	TriggerEvents,
-	//
-	TriggerEvents as CollapsibleTriggerEvents
+	TriggerEvents
 };
diff --git a/src/lib/bits/context-menu/_export.types.ts b/src/lib/bits/context-menu/_export.types.ts
index 720a3ccaf..6694d0b4d 100644
--- a/src/lib/bits/context-menu/_export.types.ts
+++ b/src/lib/bits/context-menu/_export.types.ts
@@ -1,32 +1,3 @@
-import type {
-	Props,
-	SubProps,
-	ItemProps,
-	ArrowProps,
-	GroupProps,
-	LabelProps,
-	ContentProps,
-	TriggerProps,
-	RadioItemProps,
-	SeparatorProps,
-	RadioGroupProps,
-	SubContentProps,
-	SubTriggerProps,
-	CheckboxItemProps,
-	RadioIndicatorProps,
-	CheckboxIndicatorProps,
-	//
-	// Events
-	//
-	ItemEvents,
-	TriggerEvents,
-	ContentEvents,
-	RadioItemEvents,
-	SubContentEvents,
-	SubTriggerEvents,
-	CheckboxItemEvents
-} from "./types.js";
-
 export type {
 	Props as ContextMenuProps,
 	SubProps as ContextMenuSubProps,
@@ -54,4 +25,4 @@ export type {
 	SubContentEvents as ContextMenuSubContentEvents,
 	SubTriggerEvents as ContextMenuSubTriggerEvents,
 	CheckboxItemEvents as ContextMenuCheckboxItemEvents
-};
+} from "./types.js";
diff --git a/src/lib/bits/context-menu/types.ts b/src/lib/bits/context-menu/types.ts
index 24c39dcd4..e6a2ab2ff 100644
--- a/src/lib/bits/context-menu/types.ts
+++ b/src/lib/bits/context-menu/types.ts
@@ -49,22 +49,6 @@ export type {
 	CheckboxItemProps,
 	CheckboxIndicatorProps,
 	RadioIndicatorProps,
-	//
-	Props as ContextMenuProps,
-	SubProps as ContextMenuSubProps,
-	ItemProps as ContextMenuItemProps,
-	LabelProps as ContextMenuLabelProps,
-	ArrowProps as ContextMenuArrowProps,
-	GroupProps as ContextMenuGroupProps,
-	ContentProps as ContextMenuContentProps,
-	TriggerProps as ContextMenuTriggerProps,
-	RadioItemProps as ContextMenuRadioItemProps,
-	SeparatorProps as ContextMenuSeparatorProps,
-	RadioGroupProps as ContextMenuRadioGroupProps,
-	SubContentProps as ContextMenuSubContentProps,
-	SubTriggerProps as ContextMenuSubTriggerProps,
-	CheckboxItemProps as ContextMenuCheckboxItemProps,
-	CheckboxIndicatorProps as ContextMenuCheckboxIndicatorProps,
 	//,
 	ItemEvents,
 	TriggerEvents,
@@ -72,13 +56,5 @@ export type {
 	RadioItemEvents,
 	SubContentEvents,
 	SubTriggerEvents,
-	CheckboxItemEvents,
-	//
-	ItemEvents as ContextMenuItemEvents,
-	TriggerEvents as ContextMenuTriggerEvents,
-	ContentEvents as ContextMenuContentEvents,
-	RadioItemEvents as ContextMenuRadioItemEvents,
-	SubContentEvents as ContextMenuSubContentEvents,
-	SubTriggerEvents as ContextMenuSubTriggerEvents,
-	CheckboxItemEvents as ContextMenuCheckboxItemEvents
+	CheckboxItemEvents
 };
diff --git a/src/lib/bits/date-field/_export.types.ts b/src/lib/bits/date-field/_export.types.ts
new file mode 100644
index 000000000..b9c9342d1
--- /dev/null
+++ b/src/lib/bits/date-field/_export.types.ts
@@ -0,0 +1,9 @@
+export type {
+	Props as DateFieldProps,
+	LabelProps as DateFieldLabelProps,
+	DescriptionProps as DateFieldDescriptionProps,
+	InputProps as DateFieldInputProps,
+	SegmentProps as DateFieldSegmentProps,
+	//
+	SegmentEvents as DateFieldSegmentEvents
+} from "./types.js";
diff --git a/src/lib/bits/date-field/types.ts b/src/lib/bits/date-field/types.ts
index 061357e2b..bb3caa8ee 100644
--- a/src/lib/bits/date-field/types.ts
+++ b/src/lib/bits/date-field/types.ts
@@ -25,15 +25,5 @@ export type {
 	InputProps,
 	SegmentProps,
 	//
-	Props as DateFieldProps,
-	LabelProps as DateFieldLabelProps,
-	DescriptionProps as DateFieldDescriptionProps,
-	InputProps as DateFieldInputProps,
-	SegmentProps as DateFieldSegmentProps,
-	//
-	// Events
-	//
-	SegmentEvents,
-	//
-	SegmentEvents as DateFieldSegmentEvents
+	SegmentEvents
 };
diff --git a/src/lib/bits/date-picker/_export.types.ts b/src/lib/bits/date-picker/_export.types.ts
new file mode 100644
index 000000000..38a159179
--- /dev/null
+++ b/src/lib/bits/date-picker/_export.types.ts
@@ -0,0 +1,33 @@
+export type {
+	Props as DatePickerProps,
+	CalendarProps as DatePickerCalendarProps,
+	LabelProps as DatePickerLabelProps,
+	DescriptionProps as DatePickerDescriptionProps,
+	InputProps as DatePickerInputProps,
+	SegmentProps as DatePickerSegmentProps,
+	CellProps as DatePickerCellProps,
+	DateProps as DatePickerDateProps,
+	GridBodyProps as DatePickerGridBodyProps,
+	GridHeadProps as DatePickerGridHeadProps,
+	GridRowProps as DatePickerGridRowProps,
+	GridProps as DatePickerGridProps,
+	HeadCellProps as DatePickerHeadCellProps,
+	HeaderProps as DatePickerHeaderProps,
+	HeadingProps as DatePickerHeadingProps,
+	NextButtonProps as DatePickerNextButtonProps,
+	PrevButtonProps as DatePickerPrevButtonProps,
+	TriggerProps as DatePickerTriggerProps,
+	ContentProps as DatePickerContentProps,
+	ArrowProps as DatePickerArrowProps,
+	CloseProps as DatePickerCloseProps,
+	//
+	// Events
+	//
+	CloseEvents as DatePickerCloseEvents,
+	TriggerEvents as DatePickerTriggerEvents,
+	CalendarEvents as DatePickerCalendarEvents,
+	DateEvents as DatePickerDateEvents,
+	PrevButtonEvents as DatePickerPrevButtonEvents,
+	NextButtonEvents as DatePickerNextButtonEvents,
+	SegmentEvents as DatePickerSegmentEvents
+} from "./types.js";
diff --git a/src/lib/bits/date-picker/types.ts b/src/lib/bits/date-picker/types.ts
index 8b8e3b1af..3bd32ad79 100644
--- a/src/lib/bits/date-picker/types.ts
+++ b/src/lib/bits/date-picker/types.ts
@@ -12,7 +12,7 @@ import type {
 	HeadingProps,
 	NextButtonProps,
 	PrevButtonProps,
-	CalendarEvents,
+	Events as CalendarEvents,
 	DateEvents,
 	PrevButtonEvents,
 	NextButtonEvents
diff --git a/src/lib/bits/date-range-field/_export.types.ts b/src/lib/bits/date-range-field/_export.types.ts
new file mode 100644
index 000000000..760fb361d
--- /dev/null
+++ b/src/lib/bits/date-range-field/_export.types.ts
@@ -0,0 +1,8 @@
+export type {
+	Props as DateRangeFieldProps,
+	LabelProps as DateRangeFieldLabelProps,
+	InputProps as DateRangeFieldInputProps,
+	SegmentProps as DateRangeFieldSegmentProps,
+	//
+	SegmentEvents as DateRangeFieldSegmentEvents
+} from "./types.js";
diff --git a/src/lib/bits/date-range-picker/_export.types.ts b/src/lib/bits/date-range-picker/_export.types.ts
new file mode 100644
index 000000000..b7c32b046
--- /dev/null
+++ b/src/lib/bits/date-range-picker/_export.types.ts
@@ -0,0 +1,33 @@
+export type {
+	Props as DateRangePickerProps,
+	CalendarProps as DateRangePickerCalendarProps,
+	LabelProps as DateRangePickerLabelProps,
+	DescriptionProps as DateRangePickerDescriptionProps,
+	InputProps as DateRangePickerInputProps,
+	SegmentProps as DateRangePickerSegmentProps,
+	CellProps as DateRangePickerCellProps,
+	DateProps as DateRangePickerDateProps,
+	GridBodyProps as DateRangePickerGridBodyProps,
+	GridHeadProps as DateRangePickerGridHeadProps,
+	GridRowProps as DateRangePickerGridRowProps,
+	GridProps as DateRangePickerGridProps,
+	HeadCellProps as DateRangePickerHeadCellProps,
+	HeaderProps as DateRangePickerHeaderProps,
+	HeadingProps as DateRangePickerHeadingProps,
+	NextButtonProps as DateRangePickerNextButtonProps,
+	PrevButtonProps as DateRangePickerPrevButtonProps,
+	TriggerProps as DateRangePickerTriggerProps,
+	ContentProps as DateRangePickerContentProps,
+	ArrowProps as DateRangePickerArrowProps,
+	CloseProps as DateRangePickerCloseProps,
+	//
+	// Events
+	//
+	CloseEvents as DateRangePickerCloseEvents,
+	TriggerEvents as DateRangePickerTriggerEvents,
+	CalendarEvents as DateRangePickerCalendarEvents,
+	DateEvents as DateRangePickerDateEvents,
+	PrevButtonEvents as DateRangePickerPrevButtonEvents,
+	NextButtonEvents as DateRangePickerNextButtonEvents,
+	SegmentEvents as DateRangePickerSegmentEvents
+} from "./types.js";
diff --git a/src/lib/bits/date-range-picker/types.ts b/src/lib/bits/date-range-picker/types.ts
index 92b3598bf..29c6ca819 100644
--- a/src/lib/bits/date-range-picker/types.ts
+++ b/src/lib/bits/date-range-picker/types.ts
@@ -11,8 +11,12 @@ import type {
 	HeaderProps,
 	HeadingProps,
 	NextButtonProps,
-	PrevButtonProps
-} from "$lib/bits/calendar/types.js";
+	PrevButtonProps,
+	NextButtonEvents,
+	PrevButtonEvents,
+	DateEvents,
+	Events as CalendarEvents
+} from "$lib/bits/range-calendar/types.js";
 import type {
 	TriggerProps,
 	ContentProps,
@@ -21,6 +25,7 @@ import type {
 	CloseEvents,
 	TriggerEvents
 } from "$lib/bits/popover/types.js";
+import type { SegmentEvents } from "$lib/bits/date-range-field/types.js";
 
 type Props = I.Props;
 type LabelProps = I.Props & HTMLSpanAttributes;
@@ -51,6 +56,12 @@ export type {
 	ContentProps,
 	ArrowProps,
 	CloseProps,
+	//
 	CloseEvents,
-	TriggerEvents
+	TriggerEvents,
+	NextButtonEvents,
+	PrevButtonEvents,
+	DateEvents,
+	CalendarEvents,
+	SegmentEvents
 };
diff --git a/src/lib/bits/dialog/_export.types.ts b/src/lib/bits/dialog/_export.types.ts
new file mode 100644
index 000000000..1fdbfffd9
--- /dev/null
+++ b/src/lib/bits/dialog/_export.types.ts
@@ -0,0 +1,13 @@
+export type {
+	Props as DialogProps,
+	CloseProps as DialogCloseProps,
+	TitleProps as DialogTitleProps,
+	PortalProps as DialogPortalProps,
+	ContentProps as DialogContentProps,
+	TriggerProps as DialogTriggerProps,
+	OverlayProps as DialogOverlayProps,
+	DescriptionProps as DialogDescriptionProps,
+	//
+	TriggerEvents as DialogTriggerEvents,
+	CloseEvents as DialogCloseEvents
+} from "./types.js";
diff --git a/src/lib/bits/dialog/types.ts b/src/lib/bits/dialog/types.ts
index 3bdf1db27..a6f01ece6 100644
--- a/src/lib/bits/dialog/types.ts
+++ b/src/lib/bits/dialog/types.ts
@@ -41,18 +41,6 @@ export type {
 	OverlayProps,
 	DescriptionProps,
 	//
-	Props as DialogProps,
-	CloseProps as DialogCloseProps,
-	TitleProps as DialogTitleProps,
-	PortalProps as DialogPortalProps,
-	ContentProps as DialogContentProps,
-	TriggerProps as DialogTriggerProps,
-	OverlayProps as DialogOverlayProps,
-	DescriptionProps as DialogDescriptionProps,
-	//
 	TriggerEvents,
-	CloseEvents,
-	//
-	TriggerEvents as DialogTriggerEvents,
-	CloseEvents as DialogCloseEvents
+	CloseEvents
 };
diff --git a/src/lib/bits/dropdown-menu/_export.types.ts b/src/lib/bits/dropdown-menu/_export.types.ts
index 2c8a30453..f3e56e86f 100644
--- a/src/lib/bits/dropdown-menu/_export.types.ts
+++ b/src/lib/bits/dropdown-menu/_export.types.ts
@@ -1,32 +1,3 @@
-import type {
-	Props,
-	SubProps,
-	ItemProps,
-	ArrowProps,
-	GroupProps,
-	LabelProps,
-	ContentProps,
-	TriggerProps,
-	RadioItemProps,
-	SeparatorProps,
-	RadioGroupProps,
-	SubContentProps,
-	SubTriggerProps,
-	CheckboxItemProps,
-	RadioIndicatorProps,
-	CheckboxIndicatorProps,
-	//
-	// Events
-	//
-	ItemEvents,
-	TriggerEvents,
-	ContentEvents,
-	RadioItemEvents,
-	SubContentEvents,
-	SubTriggerEvents,
-	CheckboxItemEvents
-} from "./types.js";
-
 export type {
 	Props as DropdownMenuProps,
 	SubProps as DropdownMenuSubProps,
@@ -45,8 +16,6 @@ export type {
 	RadioIndicatorProps as DropdownMenuRadioIndicatorProps,
 	CheckboxIndicatorProps as DropdownMenuCheckboxIndicatorProps,
 	//
-	// Events
-	//
 	ItemEvents as DropdownMenuItemEvents,
 	TriggerEvents as DropdownMenuTriggerEvents,
 	ContentEvents as DropdownMenuContentEvents,
@@ -54,4 +23,4 @@ export type {
 	SubContentEvents as DropdownMenuSubContentEvents,
 	SubTriggerEvents as DropdownMenuSubTriggerEvents,
 	CheckboxItemEvents as DropdownMenuCheckboxItemEvents
-};
+} from "./types.js";
diff --git a/src/lib/bits/dropdown-menu/types.ts b/src/lib/bits/dropdown-menu/types.ts
index 5681d6c98..f1bebe9cb 100644
--- a/src/lib/bits/dropdown-menu/types.ts
+++ b/src/lib/bits/dropdown-menu/types.ts
@@ -45,8 +45,6 @@ export type {
 	RadioIndicatorProps,
 	CheckboxIndicatorProps,
 	//
-	// Events
-	//
 	ItemEvents,
 	TriggerEvents,
 	ContentEvents,
diff --git a/src/lib/bits/label/_export.types.ts b/src/lib/bits/label/_export.types.ts
new file mode 100644
index 000000000..956facf16
--- /dev/null
+++ b/src/lib/bits/label/_export.types.ts
@@ -0,0 +1,7 @@
+import type { Props, Events } from "./types.js";
+
+export type {
+	Props as LabelProps,
+	//
+	Events as LabelEvents
+};
diff --git a/src/lib/bits/label/types.ts b/src/lib/bits/label/types.ts
index 0f76dcb91..f1159f941 100644
--- a/src/lib/bits/label/types.ts
+++ b/src/lib/bits/label/types.ts
@@ -11,9 +11,5 @@ type Events<T extends Element = HTMLLabelElement> = {
 export type {
 	Props,
 	//
-	Props as LabelProps,
-	//
-	Events,
-	//
-	Events as LabelEvents
+	Events
 };
diff --git a/src/lib/bits/link-preview/_export.types.ts b/src/lib/bits/link-preview/_export.types.ts
new file mode 100644
index 000000000..26fb40b99
--- /dev/null
+++ b/src/lib/bits/link-preview/_export.types.ts
@@ -0,0 +1,19 @@
+import type {
+	Props,
+	ArrowProps,
+	TriggerProps,
+	ContentProps,
+	//
+	TriggerEvents,
+	ContentEvents
+} from "./types.js";
+
+export type {
+	Props as LinkPreviewProps,
+	ArrowProps as LinkPreviewArrowProps,
+	TriggerProps as LinkPreviewTriggerProps,
+	ContentProps as LinkPreviewContentProps,
+	//
+	TriggerEvents as LinkPreviewTriggerEvents,
+	ContentEvents as LinkPreviewContentEvents
+};
diff --git a/src/lib/bits/link-preview/types.ts b/src/lib/bits/link-preview/types.ts
index f8bc7f13f..8a0cf667f 100644
--- a/src/lib/bits/link-preview/types.ts
+++ b/src/lib/bits/link-preview/types.ts
@@ -35,14 +35,6 @@ export type {
 	TriggerProps,
 	ContentProps,
 	//
-	Props as LinkPreviewProps,
-	ArrowProps as LinkPreviewArrowProps,
-	TriggerProps as LinkPreviewTriggerProps,
-	ContentProps as LinkPreviewContentProps,
-	//
 	TriggerEvents,
-	ContentEvents,
-	//
-	TriggerEvents as LinkPreviewTriggerEvents,
-	ContentEvents as LinkPreviewContentEvents
+	ContentEvents
 };
diff --git a/src/lib/bits/menubar/_export.types.ts b/src/lib/bits/menubar/_export.types.ts
new file mode 100644
index 000000000..bcc0c9aeb
--- /dev/null
+++ b/src/lib/bits/menubar/_export.types.ts
@@ -0,0 +1,27 @@
+export type {
+	Props as MenubarProps,
+	SubProps as MenubarSubProps,
+	MenuProps as MenubarMenuProps,
+	ItemProps as MenubarItemProps,
+	ArrowProps as MenubarArrowProps,
+	GroupProps as MenubarGroupProps,
+	LabelProps as MenubarLabelProps,
+	TriggerProps as MenubarTriggerProps,
+	ContentProps as MenubarContentProps,
+	RadioItemProps as MenubarRadioItemProps,
+	SeparatorProps as MenubarSeparatorProps,
+	RadioGroupProps as MenubarRadioGroupProps,
+	SubContentProps as MenubarSubContentProps,
+	SubTriggerProps as MenubarSubTriggerProps,
+	CheckboxItemProps as MenubarCheckboxItemProps,
+	RadioIndicatorProps as MenubarRadioIndicatorProps,
+	CheckboxIndicatorProps as MenubarCheckboxIndicatorProps,
+	//
+	ItemEvents as MenubarItemEvents,
+	TriggerEvents as MenubarTriggerEvents,
+	ContentEvents as MenubarContentEvents,
+	RadioItemEvents as MenubarRadioItemEvents,
+	SubTriggerEvents as MenubarSubTriggerEvents,
+	SubContentEvents as MenubarSubContentEvents,
+	CheckboxItemEvents as MenubarCheckboxItemEvents
+} from "./types.js";
diff --git a/src/lib/bits/menubar/types.ts b/src/lib/bits/menubar/types.ts
index 04d618838..87b88d5c5 100644
--- a/src/lib/bits/menubar/types.ts
+++ b/src/lib/bits/menubar/types.ts
@@ -1,5 +1,6 @@
 import type { HTMLDivAttributes } from "$lib/internal/index.js";
 import type { Props as MenubarProps } from "./_types.js";
+
 import type {
 	Props as MenuProps,
 	SubProps,
@@ -15,6 +16,7 @@ import type {
 	SubContentProps,
 	SubTriggerProps,
 	CheckboxItemProps,
+	RadioIndicatorProps,
 	CheckboxIndicatorProps,
 	//
 	MenubarTriggerEvents as TriggerEvents,
@@ -44,38 +46,14 @@ export type {
 	SubContentProps,
 	SubTriggerProps,
 	CheckboxItemProps,
+	RadioIndicatorProps,
 	CheckboxIndicatorProps,
 	//
-	Props as MenubarProps,
-	SubProps as MenubarSubProps,
-	MenuProps as MenubarMenuProps,
-	ItemProps as MenubarItemProps,
-	ArrowProps as MenubarArrowProps,
-	GroupProps as MenubarGroupProps,
-	LabelProps as MenubarLabelProps,
-	ContentProps as MenubarContentProps,
-	TriggerProps as MenubarTriggerProps,
-	RadioItemProps as MenubarRadioItemProps,
-	SeparatorProps as MenubarSeparatorProps,
-	SubContentProps as MenubarSubContentProps,
-	SubTriggerProps as MenubarSubTriggerProps,
-	RadioGroupProps as MenubarRadioGroupProps,
-	CheckboxItemProps as MenubarCheckboxItemProps,
-	CheckboxIndicatorProps as MenubarCheckboxIndicatorProps,
-	//
 	ItemEvents,
 	TriggerEvents,
 	ContentEvents,
 	RadioItemEvents,
 	SubTriggerEvents,
 	SubContentEvents,
-	CheckboxItemEvents,
-	//
-	ItemEvents as MenubarItemEvents,
-	ContentEvents as MenubarContentEvents,
-	TriggerEvents as MenubarTriggerEvents,
-	RadioItemEvents as MenubarRadioItemEvents,
-	SubTriggerEvents as MenubarSubTriggerEvents,
-	SubContentEvents as MenubarSubContentEvents,
-	CheckboxItemEvents as MenubarCheckboxItemEvents
+	CheckboxItemEvents
 };
diff --git a/src/lib/bits/popover/_export.types.ts b/src/lib/bits/popover/_export.types.ts
new file mode 100644
index 000000000..c930b200e
--- /dev/null
+++ b/src/lib/bits/popover/_export.types.ts
@@ -0,0 +1,10 @@
+export type {
+	Props as PopoverProps,
+	ArrowProps as PopoverArrowProps,
+	CloseProps as PopoverCloseProps,
+	ContentProps as PopoverContentProps,
+	TriggerProps as PopoverTriggerProps,
+	//
+	TriggerEvents as PopoverTriggerEvents,
+	CloseEvents as PopoverCloseEvents
+} from "./types.js";
diff --git a/src/lib/bits/popover/types.ts b/src/lib/bits/popover/types.ts
index 490600da3..7da5458ad 100644
--- a/src/lib/bits/popover/types.ts
+++ b/src/lib/bits/popover/types.ts
@@ -26,15 +26,6 @@ export type {
 	ContentProps,
 	TriggerProps,
 	//
-	Props as PopoverProps,
-	ArrowProps as PopoverArrowProps,
-	CloseProps as PopoverCloseProps,
-	ContentProps as PopoverContentProps,
-	TriggerProps as PopoverTriggerProps,
-	//
 	TriggerEvents,
-	CloseEvents,
-	//
-	TriggerEvents as PopoverTriggerEvents,
-	CloseEvents as PopoverCloseEvents
+	CloseEvents
 };
diff --git a/src/lib/bits/progress/_export.types.ts b/src/lib/bits/progress/_export.types.ts
new file mode 100644
index 000000000..2219b13bb
--- /dev/null
+++ b/src/lib/bits/progress/_export.types.ts
@@ -0,0 +1 @@
+export type { Props as ProgressProps } from "./types.js";
diff --git a/src/lib/bits/progress/types.ts b/src/lib/bits/progress/types.ts
index 60972cfca..3685d4033 100644
--- a/src/lib/bits/progress/types.ts
+++ b/src/lib/bits/progress/types.ts
@@ -3,8 +3,4 @@ import type * as I from "./_types.js";
 
 type Props = I.Props & HTMLDivAttributes;
 
-export type {
-	Props,
-	//
-	Props as ProgressProps
-};
+export type { Props };
diff --git a/src/lib/bits/radio-group/_export.types.ts b/src/lib/bits/radio-group/_export.types.ts
new file mode 100644
index 000000000..560b0c3d8
--- /dev/null
+++ b/src/lib/bits/radio-group/_export.types.ts
@@ -0,0 +1,8 @@
+export type {
+	Props as RadioGroupProps,
+	InputProps as RadioGroupInputProps,
+	ItemProps as RadioGroupItemProps,
+	ItemIndicatorProps as RadioGroupItemIndicatorProps,
+	//
+	ItemEvents as RadioGroupItemEvents
+} from "./types.js";
diff --git a/src/lib/bits/radio-group/types.ts b/src/lib/bits/radio-group/types.ts
index c44e45347..750e841aa 100644
--- a/src/lib/bits/radio-group/types.ts
+++ b/src/lib/bits/radio-group/types.ts
@@ -23,12 +23,5 @@ export type {
 	ItemProps,
 	ItemIndicatorProps,
 	//
-	Props as RadioGroupProps,
-	InputProps as RadioGroupInputProps,
-	ItemProps as RadioGroupItemProps,
-	ItemIndicatorProps as RadioGroupItemIndicatorProps,
-	//
-	ItemEvents,
-	//
-	ItemEvents as RadioGroupItemEvents
+	ItemEvents
 };
diff --git a/src/lib/bits/range-calendar/_export.types.ts b/src/lib/bits/range-calendar/_export.types.ts
new file mode 100644
index 000000000..0b95a0d2a
--- /dev/null
+++ b/src/lib/bits/range-calendar/_export.types.ts
@@ -0,0 +1,19 @@
+export type {
+	Props as RangeCalendarProps,
+	PrevButtonProps as RangeCalendarPrevButtonProps,
+	NextButtonProps as RangeCalendarNextButtonProps,
+	HeadingProps as RangeCalendarHeadingProps,
+	HeaderProps as RangeCalendarHeaderProps,
+	GridProps as RangeCalendarGridProps,
+	GridHeadProps as RangeCalendarGridHeadProps,
+	HeadCellProps as RangeCalendarHeadCellProps,
+	GridBodyProps as RangeCalendarGridBodyProps,
+	CellProps as RangeCalendarCellProps,
+	GridRowProps as RangeCalendarGridRowProps,
+	DateProps as RangeCalendarDateProps,
+	//
+	Events as RangeCalendarEvents,
+	PrevButtonEvents as RangeCalendarPrevButtonEvents,
+	NextButtonEvents as RangeCalendarNextButtonEvents,
+	DateEvents as RangeCalendarDateEvents
+} from "./types.js";
diff --git a/src/lib/bits/range-calendar/components/range-calendar-date.svelte b/src/lib/bits/range-calendar/components/range-calendar-date.svelte
index 9c50b8efa..3b1c967fc 100644
--- a/src/lib/bits/range-calendar/components/range-calendar-date.svelte
+++ b/src/lib/bits/range-calendar/components/range-calendar-date.svelte
@@ -1,9 +1,11 @@
 <script lang="ts">
 	import { melt } from "@melt-ui/svelte";
 	import { getCtx, getAttrs } from "../ctx.js";
-	import type { DateProps } from "../types.js";
+	import type { DateEvents, DateProps } from "../types.js";
+	import { createDispatcher } from "$lib/internal/events.js";
 
 	type $$Props = DateProps;
+	type $$Events = DateEvents;
 
 	export let date: $$Props["date"];
 	export let month: $$Props["month"];
@@ -15,6 +17,8 @@
 	} = getCtx();
 
 	const attrs = getAttrs("date");
+	const dispatch = createDispatcher();
+
 	$: builder = $cell(date, month);
 	$: Object.assign(builder, attrs);
 
@@ -28,7 +32,13 @@
 {#if asChild}
 	<slot {...slotProps} />
 {:else}
-	<div use:melt={builder} {...$$restProps}>
+	<div
+		use:melt={builder}
+		{...$$restProps}
+		on:m-click={dispatch}
+		on:m-focusin={dispatch}
+		on:m-mouseenter={dispatch}
+	>
 		<slot {...slotProps}>
 			{date.day}
 		</slot>
diff --git a/src/lib/bits/range-calendar/components/range-calendar-next-button.svelte b/src/lib/bits/range-calendar/components/range-calendar-next-button.svelte
index e557f4d00..a2d50ad3d 100644
--- a/src/lib/bits/range-calendar/components/range-calendar-next-button.svelte
+++ b/src/lib/bits/range-calendar/components/range-calendar-next-button.svelte
@@ -1,9 +1,11 @@
 <script lang="ts">
 	import { melt } from "@melt-ui/svelte";
 	import { getAttrs, getCtx } from "../ctx.js";
-	import type { NextButtonProps } from "../types.js";
+	import type { NextButtonEvents, NextButtonProps } from "../types.js";
+	import { createDispatcher } from "$lib/internal/events.js";
 
 	type $$Props = NextButtonProps;
+	type $$Events = NextButtonEvents;
 
 	export let asChild: $$Props["asChild"] = false;
 
@@ -12,6 +14,8 @@
 	} = getCtx();
 
 	const attrs = getAttrs("next-button");
+	const dispatch = createDispatcher();
+
 	$: builder = $nextButton;
 	$: Object.assign(builder, attrs);
 </script>
@@ -19,7 +23,12 @@
 {#if asChild}
 	<slot {builder} />
 {:else}
-	<button use:melt={builder} type="button" {...$$restProps}>
+	<button
+		use:melt={builder}
+		type="button"
+		{...$$restProps}
+		on:m-click={dispatch}
+	>
 		<slot {builder} />
 	</button>
 {/if}
diff --git a/src/lib/bits/range-calendar/components/range-calendar-prev-button.svelte b/src/lib/bits/range-calendar/components/range-calendar-prev-button.svelte
index ce84b1b68..347fbce94 100644
--- a/src/lib/bits/range-calendar/components/range-calendar-prev-button.svelte
+++ b/src/lib/bits/range-calendar/components/range-calendar-prev-button.svelte
@@ -1,9 +1,11 @@
 <script lang="ts">
 	import { melt } from "@melt-ui/svelte";
 	import { getAttrs, getCtx } from "../ctx.js";
-	import type { PrevButtonProps } from "../types.js";
+	import type { PrevButtonEvents, PrevButtonProps } from "../types.js";
+	import { createDispatcher } from "$lib/internal/events.js";
 
 	type $$Props = PrevButtonProps;
+	type $$Events = PrevButtonEvents;
 
 	export let asChild: $$Props["asChild"] = false;
 
@@ -12,6 +14,8 @@
 	} = getCtx();
 
 	const attrs = getAttrs("prev-button");
+	const dispatch = createDispatcher();
+
 	$: builder = $prevButton;
 	$: Object.assign(builder, attrs);
 </script>
@@ -19,7 +23,12 @@
 {#if asChild}
 	<slot {builder} />
 {:else}
-	<button use:melt={builder} type="button" {...$$restProps}>
+	<button
+		use:melt={builder}
+		type="button"
+		{...$$restProps}
+		on:m-click={dispatch}
+	>
 		<slot {builder} />
 	</button>
 {/if}
diff --git a/src/lib/bits/range-calendar/components/range-calendar.svelte b/src/lib/bits/range-calendar/components/range-calendar.svelte
index ca3106f09..9a60c2189 100644
--- a/src/lib/bits/range-calendar/components/range-calendar.svelte
+++ b/src/lib/bits/range-calendar/components/range-calendar.svelte
@@ -1,9 +1,11 @@
 <script lang="ts">
 	import { melt } from "@melt-ui/svelte";
 	import { setCtx, getAttrs } from "../ctx.js";
-	import type { Props } from "../types.js";
+	import type { Events, Props } from "../types.js";
+	import { createDispatcher } from "$lib/internal/events.js";
 
 	type $$Props = Props;
+	type $$Events = Events;
 
 	export let placeholder: $$Props["placeholder"] = undefined;
 	export let onPlaceholderChange: $$Props["onPlaceholderChange"] = undefined;
@@ -89,6 +91,8 @@
 	$: updateOption("weekdayFormat", weekdayFormat);
 
 	const attrs = getAttrs("root");
+	const dispatch = createDispatcher();
+
 	$: builder = $calendar;
 	$: Object.assign(builder, attrs);
 
@@ -102,7 +106,7 @@
 {#if asChild}
 	<slot {...slotProps} />
 {:else}
-	<div use:melt={builder} {...$$restProps}>
+	<div use:melt={builder} {...$$restProps} on:m-keydown={dispatch}>
 		<slot {...slotProps} />
 	</div>
 {/if}
diff --git a/src/lib/bits/range-calendar/types.ts b/src/lib/bits/range-calendar/types.ts
index 2a5e0d3d1..f8f5d4695 100644
--- a/src/lib/bits/range-calendar/types.ts
+++ b/src/lib/bits/range-calendar/types.ts
@@ -7,6 +7,7 @@ import type {
 	HTMLThAttributes
 } from "svelte/elements";
 import type * as I from "./_types.js";
+import type { CustomEventHandler } from "$lib";
 
 type Props = I.Props & Omit<HTMLDivAttributes, "placeholder">;
 
@@ -32,6 +33,28 @@ type CellProps = I.CellProps & HTMLTdAttributes;
 
 type DateProps = I.DateProps & HTMLDivAttributes;
 
+/**
+ * Events
+ */
+
+type ButtonEvents = {
+	click: CustomEventHandler<MouseEvent, HTMLButtonElement>;
+};
+
+type PrevButtonEvents = ButtonEvents;
+
+type NextButtonEvents = ButtonEvents;
+
+type DateEvents = {
+	click: CustomEventHandler<MouseEvent, HTMLDivElement>;
+	focusin: CustomEventHandler<FocusEvent, HTMLDivElement>;
+	mouseenter: CustomEventHandler<MouseEvent, HTMLDivElement>;
+};
+
+type Events = {
+	keydown: CustomEventHandler<KeyboardEvent, HTMLDivElement>;
+};
+
 export type {
 	Props,
 	PrevButtonProps,
@@ -46,16 +69,8 @@ export type {
 	HeaderProps,
 	DateProps,
 	//
-	Props as RangeCalendarProps,
-	PrevButtonProps as RangeCalendarPrevButtonProps,
-	NextButtonProps as RangeCalendarNextButtonProps,
-	HeadingProps as RangeCalendarHeadingProps,
-	HeaderProps as RangeCalendarHeaderProps,
-	GridProps as RangeCalendarGridProps,
-	GridHeadProps as RangeCalendarGridHeadProps,
-	HeadCellProps as RangeCalendarHeadCellProps,
-	GridBodyProps as RangeCalendarGridBodyProps,
-	CellProps as RangeCalendarCellProps,
-	GridRowProps as RangeCalendarGridRowProps,
-	DateProps as RangeCalendarDateProps
+	Events,
+	PrevButtonEvents,
+	NextButtonEvents,
+	DateEvents
 };
diff --git a/src/lib/bits/select/_export.types.ts b/src/lib/bits/select/_export.types.ts
new file mode 100644
index 000000000..9d47517a6
--- /dev/null
+++ b/src/lib/bits/select/_export.types.ts
@@ -0,0 +1,18 @@
+export type {
+	Props as SelectProps,
+	ArrowProps as SelectArrowProps,
+	ContentProps as SelectContentProps,
+	GroupProps as SelectGroupProps,
+	InputProps as SelectInputProps,
+	LabelProps as SelectLabelProps,
+	ItemProps as SelectItemProps,
+	IndicatorProps as SelectIndicatorProps,
+	SeparatorProps as SelectSeparatorProps,
+	TriggerProps as SelectTriggerProps,
+	ValueProps as SelectValueProps,
+	//
+	ItemEvents as SelectItemEvents,
+	ContentEvents as SelectContentEvents,
+	TriggerEvents as SelectTriggerEvents,
+	LabelEvents as SelectLabelEvents
+} from "./types.js";
diff --git a/src/lib/bits/select/types.ts b/src/lib/bits/select/types.ts
index e9b0d61af..14f817d05 100644
--- a/src/lib/bits/select/types.ts
+++ b/src/lib/bits/select/types.ts
@@ -64,25 +64,8 @@ export type {
 	TriggerProps,
 	ValueProps,
 	//
-	Props as SelectProps,
-	ArrowProps as SelectArrowProps,
-	ContentProps as SelectContentProps,
-	GroupProps as SelectGroupProps,
-	InputProps as SelectInputProps,
-	LabelProps as SelectLabelProps,
-	ItemProps as SelectItemProps,
-	IndicatorProps as SelectIndicatorProps,
-	SeparatorProps as SelectSeparatorProps,
-	TriggerProps as SelectTriggerProps,
-	ValueProps as SelectValueProps,
-	//
 	ItemEvents,
 	ContentEvents,
 	TriggerEvents,
-	LabelEvents,
-	//
-	ItemEvents as SelectItemEvents,
-	ContentEvents as SelectContentEvents,
-	TriggerEvents as SelectTriggerEvents,
-	LabelEvents as SelectLabelEvents
+	LabelEvents
 };
diff --git a/src/lib/bits/separator/_export.types.ts b/src/lib/bits/separator/_export.types.ts
new file mode 100644
index 000000000..accb58f01
--- /dev/null
+++ b/src/lib/bits/separator/_export.types.ts
@@ -0,0 +1 @@
+export type { Props as SeparatorProps } from "./types.js";
diff --git a/src/lib/bits/separator/types.ts b/src/lib/bits/separator/types.ts
index 61c5ac407..3685d4033 100644
--- a/src/lib/bits/separator/types.ts
+++ b/src/lib/bits/separator/types.ts
@@ -3,8 +3,4 @@ import type * as I from "./_types.js";
 
 type Props = I.Props & HTMLDivAttributes;
 
-export type {
-	Props,
-	//
-	Props as SeparatorProps
-};
+export type { Props };
diff --git a/src/lib/bits/slider/_export.types.ts b/src/lib/bits/slider/_export.types.ts
new file mode 100644
index 000000000..ad884f261
--- /dev/null
+++ b/src/lib/bits/slider/_export.types.ts
@@ -0,0 +1,9 @@
+export type {
+	Props as SliderProps,
+	RangeProps as SliderRangeProps,
+	ThumbProps as SliderThumbProps,
+	InputProps as SliderInputProps,
+	TickProps as SliderTickProps,
+	//
+	ThumbEvents as SliderThumbEvents
+} from "./types.js";
diff --git a/src/lib/bits/slider/types.ts b/src/lib/bits/slider/types.ts
index ae3bf04a6..7a60ca0d9 100644
--- a/src/lib/bits/slider/types.ts
+++ b/src/lib/bits/slider/types.ts
@@ -24,13 +24,5 @@ export type {
 	InputProps,
 	TickProps,
 	//
-	Props as SliderProps,
-	RangeProps as SliderRangeProps,
-	ThumbProps as SliderThumbProps,
-	InputProps as SliderInputProps,
-	TickProps as SliderTickProps,
-	//
-	ThumbEvents,
-	//
-	ThumbEvents as SliderThumbEvents
+	ThumbEvents
 };
diff --git a/src/lib/bits/switch/_export.types.ts b/src/lib/bits/switch/_export.types.ts
new file mode 100644
index 000000000..34245b13f
--- /dev/null
+++ b/src/lib/bits/switch/_export.types.ts
@@ -0,0 +1,7 @@
+export type {
+	Props as SwitchProps,
+	ThumbProps as SwitchThumbProps,
+	InputProps as SwitchInputProps,
+	//
+	Events as SwitchEvents
+} from "./types.js";
diff --git a/src/lib/bits/switch/types.ts b/src/lib/bits/switch/types.ts
index 097727b28..b337f8666 100644
--- a/src/lib/bits/switch/types.ts
+++ b/src/lib/bits/switch/types.ts
@@ -19,11 +19,5 @@ export type {
 	ThumbProps,
 	InputProps,
 	//
-	Props as SwitchProps,
-	ThumbProps as SwitchThumbProps,
-	InputProps as SwitchInputProps,
-	//
-	Events,
-	//
-	Events as SwitchEvents
+	Events
 };
diff --git a/src/lib/bits/tabs/_export.types.ts b/src/lib/bits/tabs/_export.types.ts
new file mode 100644
index 000000000..9411894f3
--- /dev/null
+++ b/src/lib/bits/tabs/_export.types.ts
@@ -0,0 +1,8 @@
+export type {
+	Props as TabsProps,
+	ContentProps as TabsContentProps,
+	TriggerProps as TabsTriggerProps,
+	ListProps as TabsListProps,
+	//
+	TriggerEvents as TabsTriggerEvents
+} from "./types.js";
diff --git a/src/lib/bits/tabs/types.ts b/src/lib/bits/tabs/types.ts
index 47638a30c..d64049ede 100644
--- a/src/lib/bits/tabs/types.ts
+++ b/src/lib/bits/tabs/types.ts
@@ -23,12 +23,5 @@ export type {
 	TriggerProps,
 	ListProps,
 	//
-	Props as TabsProps,
-	ContentProps as TabsContentProps,
-	TriggerProps as TabsTriggerProps,
-	ListProps as TabsListProps,
-	//
-	TriggerEvents,
-	//
-	TriggerEvents as TabsTriggerEvents
+	TriggerEvents
 };
diff --git a/src/lib/bits/toggle-group/_export.types.ts b/src/lib/bits/toggle-group/_export.types.ts
new file mode 100644
index 000000000..3f21cf183
--- /dev/null
+++ b/src/lib/bits/toggle-group/_export.types.ts
@@ -0,0 +1,6 @@
+export type {
+	Props as ToggleGroupProps,
+	ItemProps as ToggleGroupItemProps,
+	//
+	ItemEvents as ToggleGroupItemEvents
+} from "./types.js";
diff --git a/src/lib/bits/toggle-group/types.ts b/src/lib/bits/toggle-group/types.ts
index b5801c49f..623229048 100644
--- a/src/lib/bits/toggle-group/types.ts
+++ b/src/lib/bits/toggle-group/types.ts
@@ -16,10 +16,5 @@ export type {
 	Props,
 	ItemProps,
 	//
-	Props as ToggleGroupProps,
-	ItemProps as ToggleGroupItemProps,
-	//
-	ItemEvents,
-	//
-	ItemEvents as ToggleGroupItemEvents
+	ItemEvents
 };
diff --git a/src/lib/bits/toggle/_export.types.ts b/src/lib/bits/toggle/_export.types.ts
new file mode 100644
index 000000000..ecda67467
--- /dev/null
+++ b/src/lib/bits/toggle/_export.types.ts
@@ -0,0 +1,5 @@
+export type {
+	Props as ToggleProps,
+	//
+	Events as ToggleEvents
+} from "./types.js";
diff --git a/src/lib/bits/toggle/types.ts b/src/lib/bits/toggle/types.ts
index da29d1e5a..e94af54d5 100644
--- a/src/lib/bits/toggle/types.ts
+++ b/src/lib/bits/toggle/types.ts
@@ -12,9 +12,5 @@ type Events<T extends Element = HTMLButtonElement> = {
 export type {
 	Props,
 	//
-	Props as ToggleProps,
-	//
-	Events,
-	//
-	Events as ToggleEvents
+	Events
 };
diff --git a/src/lib/bits/tooltip/_export.types.ts b/src/lib/bits/tooltip/_export.types.ts
new file mode 100644
index 000000000..cce260fde
--- /dev/null
+++ b/src/lib/bits/tooltip/_export.types.ts
@@ -0,0 +1,9 @@
+export type {
+	Props as TooltipProps,
+	ArrowProps as TooltipArrowProps,
+	ContentProps as TooltipContentProps,
+	TriggerProps as TooltipTriggerProps,
+	//
+	TriggerEvents as TooltipTriggerEvents,
+	ContentEvents as TooltipContentEvents
+} from "./types.js";
diff --git a/src/lib/bits/tooltip/types.ts b/src/lib/bits/tooltip/types.ts
index 6bfe1c99b..ea07d7a36 100644
--- a/src/lib/bits/tooltip/types.ts
+++ b/src/lib/bits/tooltip/types.ts
@@ -34,14 +34,6 @@ export type {
 	TriggerProps,
 	ContentProps,
 	//
-	Props as TooltipProps,
-	ArrowProps as TooltipArrowProps,
-	ContentProps as TooltipContentProps,
-	TriggerProps as TooltipTriggerProps,
-	//
 	TriggerEvents,
-	ContentEvents,
-	//
-	TriggerEvents as TooltipTriggerEvents,
-	ContentEvents as TooltipContentEvents
+	ContentEvents
 };

From 3812ed25ffde8de356d208ee2c4db5a5a361613a Mon Sep 17 00:00:00 2001
From: Hunter Johnston <johnstonhuntera@gmail.com>
Date: Sun, 3 Dec 2023 21:38:29 -0500
Subject: [PATCH 215/217] export types

---
 src/lib/index.ts |  1 +
 src/lib/types.ts | 31 +++++++++++++++++++++++++++++++
 2 files changed, 32 insertions(+)
 create mode 100644 src/lib/types.ts

diff --git a/src/lib/index.ts b/src/lib/index.ts
index 88d777608..40f9e7790 100644
--- a/src/lib/index.ts
+++ b/src/lib/index.ts
@@ -2,3 +2,4 @@
 export * from "./bits/index.js";
 export * from "./helpers/index.js";
 export * from "./shared/index.js";
+export * from "./types.js";
diff --git a/src/lib/types.ts b/src/lib/types.ts
new file mode 100644
index 000000000..b8de9884a
--- /dev/null
+++ b/src/lib/types.ts
@@ -0,0 +1,31 @@
+// Prop/Event types prefixed with the component name for convenience
+export type * from "$lib/bits/accordion/_export.types.js";
+export type * from "$lib/bits/alert-dialog/_export.types.js";
+export type * from "$lib/bits/aspect-ratio/_export.types.js";
+export type * from "$lib/bits/avatar/_export.types.js";
+export type * from "$lib/bits/button/_export.types.js";
+export type * from "$lib/bits/calendar/_export.types.js";
+export type * from "$lib/bits/checkbox/_export.types.js";
+export type * from "$lib/bits/collapsible/_export.types.js";
+export type * from "$lib/bits/context-menu/_export.types.js";
+export type * from "$lib/bits/date-field/_export.types.js";
+export type * from "$lib/bits/date-picker/_export.types.js";
+export type * from "$lib/bits/date-range-field/_export.types.js";
+export type * from "$lib/bits/date-range-picker/_export.types.js";
+export type * from "$lib/bits/dialog/_export.types.js";
+export type * from "$lib/bits/dropdown-menu/_export.types.js";
+export type * from "$lib/bits/label/_export.types.js";
+export type * from "$lib/bits/link-preview/_export.types.js";
+export type * from "$lib/bits/menubar/_export.types.js";
+export type * from "$lib/bits/popover/_export.types.js";
+export type * from "$lib/bits/progress/_export.types.js";
+export type * from "$lib/bits/radio-group/_export.types.js";
+export type * from "$lib/bits/range-calendar/_export.types.js";
+export type * from "$lib/bits/select/_export.types.js";
+export type * from "$lib/bits/separator/_export.types.js";
+export type * from "$lib/bits/slider/_export.types.js";
+export type * from "$lib/bits/switch/_export.types.js";
+export type * from "$lib/bits/tabs/_export.types.js";
+export type * from "$lib/bits/toggle/_export.types.js";
+export type * from "$lib/bits/toggle-group/_export.types.js";
+export type * from "$lib/bits/tooltip/_export.types.js";

From 68b96ab1d7d71b71c1257442ad6ba8f10915356d Mon Sep 17 00:00:00 2001
From: Hunter Johnston <johnstonhuntera@gmail.com>
Date: Sun, 3 Dec 2023 21:44:33 -0500
Subject: [PATCH 216/217] fix floating types

---
 src/lib/bits/accordion/ctx.ts                |  6 +++---
 src/lib/bits/context-menu/ctx.ts             | 11 ++++++-----
 src/lib/bits/date-picker/ctx.ts              | 11 ++++++-----
 src/lib/bits/date-range-picker/ctx.ts        |  9 +++++----
 src/lib/bits/link-preview/ctx.ts             |  9 +++++----
 src/lib/bits/menubar/ctx.ts                  | 17 +++++++++--------
 src/lib/bits/popover/ctx.ts                  | 11 ++++++-----
 src/lib/bits/select/components/select.svelte |  4 ++--
 src/lib/bits/select/ctx.ts                   | 11 ++++++-----
 src/lib/bits/tooltip/ctx.ts                  | 11 ++++++-----
 10 files changed, 54 insertions(+), 46 deletions(-)

diff --git a/src/lib/bits/accordion/ctx.ts b/src/lib/bits/accordion/ctx.ts
index 900a78edb..ec419c7d7 100644
--- a/src/lib/bits/accordion/ctx.ts
+++ b/src/lib/bits/accordion/ctx.ts
@@ -4,7 +4,7 @@ import {
 	type CreateAccordionProps
 } from "@melt-ui/svelte";
 import { getContext, setContext } from "svelte";
-import type { AccordionItemProps } from "./types.js";
+import type { ItemProps } from "./types.js";
 import { createBitAttrs, getOptionUpdater, removeUndefined } from "$lib/internal/index.js";
 
 const NAME = "accordion";
@@ -28,7 +28,7 @@ export function getCtx() {
 	return getContext<GetReturn>(NAME);
 }
 
-export function setItem(props: AccordionItemProps) {
+export function setItem(props: ItemProps) {
 	setContext(ITEM_NAME, { ...props });
 	const {
 		elements: { item }
@@ -37,7 +37,7 @@ export function setItem(props: AccordionItemProps) {
 }
 
 export function getItemProps() {
-	const itemProps = getContext<AccordionItemProps>(ITEM_NAME);
+	const itemProps = getContext<ItemProps>(ITEM_NAME);
 	return itemProps;
 }
 
diff --git a/src/lib/bits/context-menu/ctx.ts b/src/lib/bits/context-menu/ctx.ts
index f3fd56470..625673600 100644
--- a/src/lib/bits/context-menu/ctx.ts
+++ b/src/lib/bits/context-menu/ctx.ts
@@ -6,8 +6,9 @@ import {
 } from "@melt-ui/svelte";
 import { getContext, setContext } from "svelte";
 import type { Writable } from "svelte/store";
-import { getPositioningUpdater, type PositioningProps } from "../floating/helpers.js";
-import type { FloatingConfig } from "../floating/floating-config.js";
+import { getPositioningUpdater } from "$lib/bits/floating/helpers.js";
+import type { FloatingConfig } from "$lib/bits/floating/floating-config.js";
+import type { FloatingProps } from "$lib/bits/floating/_types.js";
 
 const NAME = "menu";
 
@@ -47,10 +48,10 @@ export function getCtx() {
 const defaultPlacement = {
 	side: "bottom",
 	align: "start"
-} satisfies PositioningProps;
+} satisfies FloatingProps;
 
-export function updatePositioning(props: PositioningProps) {
-	const withDefaults = { ...defaultPlacement, ...props } satisfies PositioningProps;
+export function updatePositioning(props: FloatingProps) {
+	const withDefaults = { ...defaultPlacement, ...props } satisfies FloatingProps;
 	const {
 		options: { positioning }
 	} = getCtx();
diff --git a/src/lib/bits/date-picker/ctx.ts b/src/lib/bits/date-picker/ctx.ts
index 7807e80ea..15ba5b20e 100644
--- a/src/lib/bits/date-picker/ctx.ts
+++ b/src/lib/bits/date-picker/ctx.ts
@@ -4,9 +4,10 @@ import { removeUndefined, getOptionUpdater } from "$lib/internal/index.js";
 import { getAttrs as getCalendarAttrs } from "$lib/bits/calendar/ctx.js";
 import { getAttrs as getFieldAttrs } from "$lib/bits/date-field/ctx.js";
 import { getAttrs as getPopoverAttrs } from "$lib/bits/popover/ctx.js";
-import { getPositioningUpdater, type PositioningProps } from "../floating/helpers";
+import { getPositioningUpdater } from "$lib/bits/floating/helpers.js";
 import type { Writable } from "svelte/store";
-import type { FloatingConfig } from "../floating/floating-config";
+import type { FloatingConfig } from "$lib/bits/floating/floating-config.js";
+import type { FloatingProps } from "$lib/bits/floating/_types.js";
 
 const NAME = "date-picker";
 
@@ -30,10 +31,10 @@ export function getCtx() {
 const defaultPlacement = {
 	side: "bottom",
 	align: "center"
-} satisfies PositioningProps;
+} satisfies FloatingProps;
 
-export function updatePositioning(props: PositioningProps) {
-	const withDefaults = { ...defaultPlacement, ...props } satisfies PositioningProps;
+export function updatePositioning(props: FloatingProps) {
+	const withDefaults = { ...defaultPlacement, ...props } satisfies FloatingProps;
 	const {
 		options: { positioning }
 	} = getCtx();
diff --git a/src/lib/bits/date-range-picker/ctx.ts b/src/lib/bits/date-range-picker/ctx.ts
index 97a8a6c76..6fcee2ec0 100644
--- a/src/lib/bits/date-range-picker/ctx.ts
+++ b/src/lib/bits/date-range-picker/ctx.ts
@@ -6,7 +6,8 @@ import { getAttrs as getCalendarAttrs } from "$lib/bits/calendar/ctx.js";
 import { getAttrs as getFieldAttrs } from "$lib/bits/date-field/ctx.js";
 import { getAttrs as getPopoverAttrs } from "$lib/bits/popover/ctx.js";
 import type { FloatingConfig } from "$lib/bits/floating/floating-config.js";
-import { getPositioningUpdater, type PositioningProps } from "$lib/bits/floating/helpers.js";
+import { getPositioningUpdater } from "$lib/bits/floating/helpers.js";
+import type { FloatingProps } from "$lib/bits/floating/_types.js";
 
 const NAME = "date-range-picker";
 
@@ -30,10 +31,10 @@ export function getCtx() {
 const defaultPlacement = {
 	side: "bottom",
 	align: "center"
-} satisfies PositioningProps;
+} satisfies FloatingProps;
 
-export function updatePositioning(props: PositioningProps) {
-	const withDefaults = { ...defaultPlacement, ...props } satisfies PositioningProps;
+export function updatePositioning(props: FloatingProps) {
+	const withDefaults = { ...defaultPlacement, ...props } satisfies FloatingProps;
 	const {
 		options: { positioning }
 	} = getCtx();
diff --git a/src/lib/bits/link-preview/ctx.ts b/src/lib/bits/link-preview/ctx.ts
index bc90ace43..bf980d413 100644
--- a/src/lib/bits/link-preview/ctx.ts
+++ b/src/lib/bits/link-preview/ctx.ts
@@ -5,7 +5,8 @@ import {
 	type LinkPreview as LinkPreviewReturn
 } from "@melt-ui/svelte";
 import { getContext, setContext } from "svelte";
-import { getPositioningUpdater, type PositioningProps } from "../floating/helpers.js";
+import { getPositioningUpdater } from "../floating/helpers.js";
+import type { FloatingProps } from "../floating/_types.js";
 import type { Writable } from "svelte/store";
 import type { FloatingConfig } from "../floating/floating-config.js";
 
@@ -41,10 +42,10 @@ export function setArrow(size = 8) {
 const defaultPlacement = {
 	side: "bottom",
 	align: "center"
-} satisfies PositioningProps;
+} satisfies FloatingProps;
 
-export function updatePositioning(props: PositioningProps) {
-	const withDefaults = { ...defaultPlacement, ...props } satisfies PositioningProps;
+export function updatePositioning(props: FloatingProps) {
+	const withDefaults = { ...defaultPlacement, ...props } satisfies FloatingProps;
 	const {
 		options: { positioning }
 	} = getCtx();
diff --git a/src/lib/bits/menubar/ctx.ts b/src/lib/bits/menubar/ctx.ts
index 590510d51..18806aa26 100644
--- a/src/lib/bits/menubar/ctx.ts
+++ b/src/lib/bits/menubar/ctx.ts
@@ -9,9 +9,10 @@ import {
 } from "@melt-ui/svelte";
 import { getContext, setContext } from "svelte";
 import { createBitAttrs, getOptionUpdater, removeUndefined } from "$lib/internal/index.js";
-import { getPositioningUpdater, type PositioningProps } from "../floating/helpers";
+import { getPositioningUpdater } from "../floating/helpers.js";
 import type { Writable } from "svelte/store";
-import type { FloatingConfig } from "../floating/floating-config";
+import type { FloatingConfig } from "../floating/floating-config.js";
+import type { FloatingProps } from "../floating/_types.js";
 import { getSubmenuCtx } from "../menu/ctx";
 
 const NAME = "menubar";
@@ -89,10 +90,10 @@ export function getSubMenuCtx() {
 const defaultPlacement = {
 	side: "bottom",
 	align: "center"
-} satisfies PositioningProps;
+} satisfies FloatingProps;
 
-export function updatePositioning(props: PositioningProps) {
-	const withDefaults = { ...defaultPlacement, ...props } satisfies PositioningProps;
+export function updatePositioning(props: FloatingProps) {
+	const withDefaults = { ...defaultPlacement, ...props } satisfies FloatingProps;
 	const {
 		options: { positioning }
 	} = getMenuCtx();
@@ -104,10 +105,10 @@ export function updatePositioning(props: PositioningProps) {
 const defaultSubPlacement = {
 	side: "right",
 	align: "start"
-} satisfies PositioningProps;
+} satisfies FloatingProps;
 
-export function updateSubPositioning(props: PositioningProps) {
-	const withDefaults = { ...defaultSubPlacement, ...props } satisfies PositioningProps;
+export function updateSubPositioning(props: FloatingProps) {
+	const withDefaults = { ...defaultSubPlacement, ...props } satisfies FloatingProps;
 	const {
 		options: { positioning }
 	} = getSubmenuCtx();
diff --git a/src/lib/bits/popover/ctx.ts b/src/lib/bits/popover/ctx.ts
index b6353e34d..81a9d9ae7 100644
--- a/src/lib/bits/popover/ctx.ts
+++ b/src/lib/bits/popover/ctx.ts
@@ -5,9 +5,10 @@ import {
 } from "@melt-ui/svelte";
 import { getContext, setContext } from "svelte";
 import { createBitAttrs, getOptionUpdater, removeUndefined } from "$lib/internal/index.js";
-import { getPositioningUpdater, type PositioningProps } from "../floating/helpers";
+import { getPositioningUpdater } from "$lib/bits/floating/helpers.js";
 import type { Writable } from "svelte/store";
-import type { FloatingConfig } from "../floating/floating-config";
+import type { FloatingConfig } from "$lib/bits/floating/floating-config.js";
+import type { FloatingProps } from "$lib/bits/floating/_types.js";
 
 const NAME = "popover";
 const PARTS = ["arrow", "close", "content", "trigger"] as const;
@@ -41,10 +42,10 @@ export function setArrow(size = 8) {
 const defaultPlacement = {
 	side: "bottom",
 	align: "center"
-} satisfies PositioningProps;
+} satisfies FloatingProps;
 
-export function updatePositioning(props: PositioningProps) {
-	const withDefaults = { ...defaultPlacement, ...props } satisfies PositioningProps;
+export function updatePositioning(props: FloatingProps) {
+	const withDefaults = { ...defaultPlacement, ...props } satisfies FloatingProps;
 	const {
 		options: { positioning }
 	} = getCtx();
diff --git a/src/lib/bits/select/components/select.svelte b/src/lib/bits/select/components/select.svelte
index a9ce8ae05..4f8a3f6c6 100644
--- a/src/lib/bits/select/components/select.svelte
+++ b/src/lib/bits/select/components/select.svelte
@@ -1,12 +1,12 @@
 <script lang="ts">
 	import { derived } from "svelte/store";
 	import { setCtx } from "../ctx.js";
-	import type { SelectProps } from "../types.js";
+	import type { Props } from "../types.js";
 
 	type T = $$Generic<unknown>;
 	type Multiple = $$Generic<boolean>;
 
-	type $$Props = Omit<SelectProps<T, Multiple>, "multiple"> & {
+	type $$Props = Omit<Props<T, Multiple>, "multiple"> & {
 		items?: Items<T>;
 		multiple?: Multiple;
 	};
diff --git a/src/lib/bits/select/ctx.ts b/src/lib/bits/select/ctx.ts
index 944ff7041..e157ec66f 100644
--- a/src/lib/bits/select/ctx.ts
+++ b/src/lib/bits/select/ctx.ts
@@ -6,9 +6,10 @@ import {
 	getOptionUpdater,
 	removeUndefined
 } from "$lib/internal/index.js";
-import { getPositioningUpdater, type PositioningProps } from "../floating/helpers";
+import { getPositioningUpdater } from "../floating/helpers.js";
 import type { Writable } from "svelte/store";
-import type { FloatingConfig } from "../floating/floating-config";
+import type { FloatingConfig } from "../floating/floating-config.js";
+import type { FloatingProps } from "../floating/_types.js";
 
 const NAME = "select";
 const GROUP_NAME = "select-group";
@@ -99,10 +100,10 @@ const defaultPlacement = {
 	side: "bottom",
 	align: "center",
 	sameWidth: true
-} satisfies PositioningProps;
+} satisfies FloatingProps;
 
-export function updatePositioning(props: PositioningProps) {
-	const withDefaults = { ...defaultPlacement, ...props } satisfies PositioningProps;
+export function updatePositioning(props: FloatingProps) {
+	const withDefaults = { ...defaultPlacement, ...props } satisfies FloatingProps;
 	const {
 		options: { positioning }
 	} = getCtx();
diff --git a/src/lib/bits/tooltip/ctx.ts b/src/lib/bits/tooltip/ctx.ts
index 9731c1504..9c5898841 100644
--- a/src/lib/bits/tooltip/ctx.ts
+++ b/src/lib/bits/tooltip/ctx.ts
@@ -5,9 +5,10 @@ import {
 } from "@melt-ui/svelte";
 import { createBitAttrs, getOptionUpdater, removeUndefined } from "$lib/internal/index.js";
 import { getContext, setContext } from "svelte";
-import { getPositioningUpdater, type PositioningProps } from "../floating/helpers";
+import { getPositioningUpdater } from "../floating/helpers.js";
 import type { Writable } from "svelte/store";
-import type { FloatingConfig } from "../floating/floating-config";
+import type { FloatingConfig } from "../floating/floating-config.js";
+import type { FloatingProps } from "../floating/_types.js";
 
 const NAME = "tooltip";
 const PARTS = ["arrow", "content", "trigger"] as const;
@@ -51,10 +52,10 @@ export function setArrow(size = 8) {
 const defaultPlacement = {
 	side: "top",
 	align: "center"
-} satisfies PositioningProps;
+} satisfies FloatingProps;
 
-export function updatePositioning(props: PositioningProps) {
-	const withDefaults = { ...defaultPlacement, ...props } satisfies PositioningProps;
+export function updatePositioning(props: FloatingProps) {
+	const withDefaults = { ...defaultPlacement, ...props } satisfies FloatingProps;
 	const {
 		options: { positioning }
 	} = getCtx();

From 83b2a5b483261563c59526dfc7247233cbdaa440 Mon Sep 17 00:00:00 2001
From: Hunter Johnston <johnstonhuntera@gmail.com>
Date: Sun, 3 Dec 2023 21:49:29 -0500
Subject: [PATCH 217/217] update API ref

---
 src/content/api-reference/helpers.ts | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/src/content/api-reference/helpers.ts b/src/content/api-reference/helpers.ts
index a260e62b4..f2d2c1c4a 100644
--- a/src/content/api-reference/helpers.ts
+++ b/src/content/api-reference/helpers.ts
@@ -8,7 +8,7 @@ export const asChild = {
 	description: "Whether to use [render delegation](/docs/delegation) with this component or not."
 };
 
-export const builderSlotProp: PropSchema = {
+const builderSlotProp: PropSchema = {
 	type: {
 		type: C.OBJECT,
 		definition: "{ [k: string]: any; action: Action<any, any, any>&nbsp;}"
@@ -27,8 +27,7 @@ export const attrsSlotProp: PropSchema = {
 };
 
 export const builderAndAttrsSlotProps: Record<string, PropSchema> = {
-	builder: builderSlotProp,
-	attrs: attrsSlotProp
+	builder: builderSlotProp
 };
 
 export const monthsSlotProp: PropSchema = {