progress

2025-12-03 02:12:12 +00:00 · 2025-06-21 21:07:36 +02:00
parent f0230d4634
commit 1cc07901f6
803 changed files with 7937 additions and 6329 deletions
--- a/website/src/lib/components/ui/accordion/accordion-content.svelte
+++ b/website/src/lib/components/ui/accordion/accordion-content.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { Accordion as AccordionPrimitive, type WithoutChild } from "bits-ui";
-	import { cn } from "$lib/utils.js";
+	import { Accordion as AccordionPrimitive } from "bits-ui";
+	import { cn, type WithoutChild } from "$lib/utils.js";

 	let {
 		ref = $bindable(null),
@@ -12,13 +12,11 @@

 <AccordionPrimitive.Content
 	bind:ref
-	class={cn(
-		"data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm transition-all",
-		className
-	)}
+	data-slot="accordion-content"
+	class="data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm"
 	{...restProps}
 >
-	<div class="pb-4 pt-0">
+	<div class={cn("pb-4 pt-0", className)}>
 		{@render children?.()}
 	</div>
 </AccordionPrimitive.Content>
--- a/website/src/lib/components/ui/accordion/accordion-item.svelte
+++ b/website/src/lib/components/ui/accordion/accordion-item.svelte
@@ -9,4 +9,9 @@
 	}: AccordionPrimitive.ItemProps = $props();
 </script>

-<AccordionPrimitive.Item bind:ref class={cn("border-b", className)} {...restProps} />
+<AccordionPrimitive.Item
+	bind:ref
+	data-slot="accordion-item"
+	class={cn("border-b last:border-b-0", className)}
+	{...restProps}
+/>
--- a/website/src/lib/components/ui/accordion/accordion-trigger.svelte
+++ b/website/src/lib/components/ui/accordion/accordion-trigger.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
-	import { Accordion as AccordionPrimitive, type WithoutChild } from "bits-ui";
-	import ChevronDown from "@lucide/svelte/icons/chevron-down";
-	import { cn } from "$lib/utils.js";
+	import { Accordion as AccordionPrimitive } from "bits-ui";
+	import ChevronDownIcon from "@lucide/svelte/icons/chevron-down";
+	import { cn, type WithoutChild } from "$lib/utils.js";

 	let {
 		ref = $bindable(null),
@@ -16,14 +16,17 @@

 <AccordionPrimitive.Header {level} class="flex">
 	<AccordionPrimitive.Trigger
+		data-slot="accordion-trigger"
 		bind:ref
 		class={cn(
-			"flex flex-1 items-center justify-between py-4 font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180",
+			"focus-visible:border-ring focus-visible:ring-ring/50 flex flex-1 items-start justify-between gap-4 rounded-md py-4 text-left text-sm font-medium outline-none transition-all hover:underline focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180",
 			className
 		)}
 		{...restProps}
 	>
 		{@render children?.()}
-		<ChevronDown class="size-4 shrink-0 transition-transform duration-200" />
+		<ChevronDownIcon
+			class="text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200"
+		/>
 	</AccordionPrimitive.Trigger>
 </AccordionPrimitive.Header>
--- a/website/src/lib/components/ui/accordion/accordion.svelte
+++ b/website/src/lib/components/ui/accordion/accordion.svelte
@@ -0,0 +1,16 @@
+<script lang="ts">
+	import { Accordion as AccordionPrimitive } from "bits-ui";
+
+	let {
+		ref = $bindable(null),
+		value = $bindable(),
+		...restProps
+	}: AccordionPrimitive.RootProps = $props();
+</script>
+
+<AccordionPrimitive.Root
+	bind:ref
+	bind:value={value as never}
+	data-slot="accordion"
+	{...restProps}
+/>
--- a/website/src/lib/components/ui/accordion/index.ts
+++ b/website/src/lib/components/ui/accordion/index.ts
@@ -1,8 +1,7 @@
-import { Accordion as AccordionPrimitive } from "bits-ui";
+import Root from "./accordion.svelte";
 import Content from "./accordion-content.svelte";
 import Item from "./accordion-item.svelte";
 import Trigger from "./accordion-trigger.svelte";
-const Root = AccordionPrimitive.Root;

 export {
 	Root,
--- a/website/src/lib/components/ui/alert-dialog/alert-dialog-action.svelte
+++ b/website/src/lib/components/ui/alert-dialog/alert-dialog-action.svelte
@@ -10,4 +10,9 @@
 	}: AlertDialogPrimitive.ActionProps = $props();
 </script>

-<AlertDialogPrimitive.Action bind:ref class={cn(buttonVariants(), className)} {...restProps} />
+<AlertDialogPrimitive.Action
+	bind:ref
+	data-slot="alert-dialog-action"
+	class={cn(buttonVariants(), className)}
+	{...restProps}
+/>
--- a/website/src/lib/components/ui/alert-dialog/alert-dialog-cancel.svelte
+++ b/website/src/lib/components/ui/alert-dialog/alert-dialog-cancel.svelte
@@ -12,6 +12,7 @@

 <AlertDialogPrimitive.Cancel
 	bind:ref
-	class={cn(buttonVariants({ variant: "outline" }), "mt-2 sm:mt-0", className)}
+	data-slot="alert-dialog-cancel"
+	class={cn(buttonVariants({ variant: "outline" }), className)}
 	{...restProps}
 />
--- a/website/src/lib/components/ui/alert-dialog/alert-dialog-content.svelte
+++ b/website/src/lib/components/ui/alert-dialog/alert-dialog-content.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
-	import { AlertDialog as AlertDialogPrimitive, type WithoutChild } from "bits-ui";
+	import { AlertDialog as AlertDialogPrimitive } from "bits-ui";
 	import AlertDialogOverlay from "./alert-dialog-overlay.svelte";
-	import { cn } from "$lib/utils.js";
+	import { cn, type WithoutChild, type WithoutChildrenOrChild } from "$lib/utils.js";

 	let {
 		ref = $bindable(null),
@@ -9,7 +9,7 @@
 		portalProps,
 		...restProps
 	}: WithoutChild<AlertDialogPrimitive.ContentProps> & {
-		portalProps?: AlertDialogPrimitive.PortalProps;
+		portalProps?: WithoutChildrenOrChild<AlertDialogPrimitive.PortalProps>;
 	} = $props();
 </script>

@@ -17,8 +17,9 @@
 	<AlertDialogOverlay />
 	<AlertDialogPrimitive.Content
 		bind:ref
+		data-slot="alert-dialog-content"
 		class={cn(
-			"bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border p-6 shadow-lg duration-200 sm:rounded-lg",
+			"bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed left-[50%] top-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg",
 			className
 		)}
 		{...restProps}
--- a/website/src/lib/components/ui/alert-dialog/alert-dialog-description.svelte
+++ b/website/src/lib/components/ui/alert-dialog/alert-dialog-description.svelte
@@ -11,6 +11,7 @@

 <AlertDialogPrimitive.Description
 	bind:ref
+	data-slot="alert-dialog-description"
 	class={cn("text-muted-foreground text-sm", className)}
 	{...restProps}
 />
--- a/website/src/lib/components/ui/alert-dialog/alert-dialog-footer.svelte
+++ b/website/src/lib/components/ui/alert-dialog/alert-dialog-footer.svelte
@@ -1,7 +1,6 @@
 <script lang="ts">
-	import type { WithElementRef } from "bits-ui";
+	import { cn, type WithElementRef } from "$lib/utils.js";
 	import type { HTMLAttributes } from "svelte/elements";
-	import { cn } from "$lib/utils.js";

 	let {
 		ref = $bindable(null),
@@ -13,7 +12,8 @@

 <div
 	bind:this={ref}
-	class={cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", className)}
+	data-slot="alert-dialog-footer"
+	class={cn("flex flex-col-reverse gap-2 sm:flex-row sm:justify-end", className)}
 	{...restProps}
 >
 	{@render children?.()}
--- a/website/src/lib/components/ui/alert-dialog/alert-dialog-header.svelte
+++ b/website/src/lib/components/ui/alert-dialog/alert-dialog-header.svelte
@@ -1,7 +1,6 @@
 <script lang="ts">
-	import type { WithElementRef } from "bits-ui";
 	import type { HTMLAttributes } from "svelte/elements";
-	import { cn } from "$lib/utils.js";
+	import { cn, type WithElementRef } from "$lib/utils.js";

 	let {
 		ref = $bindable(null),
@@ -13,7 +12,8 @@

 <div
 	bind:this={ref}
-	class={cn("flex flex-col space-y-2 text-center sm:text-left", className)}
+	data-slot="alert-dialog-header"
+	class={cn("flex flex-col gap-2 text-center sm:text-left", className)}
 	{...restProps}
 >
 	{@render children?.()}
--- a/website/src/lib/components/ui/alert-dialog/alert-dialog-overlay.svelte
+++ b/website/src/lib/components/ui/alert-dialog/alert-dialog-overlay.svelte
@@ -11,8 +11,9 @@

 <AlertDialogPrimitive.Overlay
 	bind:ref
+	data-slot="alert-dialog-overlay"
 	class={cn(
-		"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0  fixed inset-0 z-50 bg-black/80",
+		"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
 		className
 	)}
 	{...restProps}
--- a/website/src/lib/components/ui/alert-dialog/alert-dialog-title.svelte
+++ b/website/src/lib/components/ui/alert-dialog/alert-dialog-title.svelte
@@ -5,14 +5,13 @@
 	let {
 		ref = $bindable(null),
 		class: className,
-		level = 3,
 		...restProps
 	}: AlertDialogPrimitive.TitleProps = $props();
 </script>

 <AlertDialogPrimitive.Title
 	bind:ref
+	data-slot="alert-dialog-title"
 	class={cn("text-lg font-semibold", className)}
-	{level}
 	{...restProps}
 />
--- a/website/src/lib/components/ui/alert-dialog/alert-dialog-trigger.svelte
+++ b/website/src/lib/components/ui/alert-dialog/alert-dialog-trigger.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { AlertDialog as AlertDialogPrimitive } from "bits-ui";
+
+	let { ref = $bindable(null), ...restProps }: AlertDialogPrimitive.TriggerProps = $props();
+</script>
+
+<AlertDialogPrimitive.Trigger bind:ref data-slot="alert-dialog-trigger" {...restProps} />
--- a/website/src/lib/components/ui/alert-dialog/index.ts
+++ b/website/src/lib/components/ui/alert-dialog/index.ts
@@ -1,4 +1,5 @@
 import { AlertDialog as AlertDialogPrimitive } from "bits-ui";
+import Trigger from "./alert-dialog-trigger.svelte";
 import Title from "./alert-dialog-title.svelte";
 import Action from "./alert-dialog-action.svelte";
 import Cancel from "./alert-dialog-cancel.svelte";
@@ -9,7 +10,6 @@ import Content from "./alert-dialog-content.svelte";
 import Description from "./alert-dialog-description.svelte";

 const Root = AlertDialogPrimitive.Root;
-const Trigger = AlertDialogPrimitive.Trigger;
 const Portal = AlertDialogPrimitive.Portal;

 export {
--- a/website/src/lib/components/ui/alert/alert-description.svelte
+++ b/website/src/lib/components/ui/alert/alert-description.svelte
@@ -1,7 +1,6 @@
 <script lang="ts">
-	import type { WithElementRef } from "bits-ui";
 	import type { HTMLAttributes } from "svelte/elements";
-	import { cn } from "$lib/utils.js";
+	import { cn, type WithElementRef } from "$lib/utils.js";

 	let {
 		ref = $bindable(null),
@@ -11,6 +10,14 @@
 	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
 </script>

-<div bind:this={ref} class={cn("text-sm [&_p]:leading-relaxed", className)} {...restProps}>
+<div
+	bind:this={ref}
+	data-slot="alert-description"
+	class={cn(
+		"text-muted-foreground col-start-2 grid justify-items-start gap-1 text-sm [&_p]:leading-relaxed",
+		className
+	)}
+	{...restProps}
+>
 	{@render children?.()}
 </div>
--- a/website/src/lib/components/ui/alert/alert-title.svelte
+++ b/website/src/lib/components/ui/alert/alert-title.svelte
@@ -1,24 +1,19 @@
 <script lang="ts">
 	import type { HTMLAttributes } from "svelte/elements";
-	import type { WithElementRef } from "bits-ui";
-	import { cn } from "$lib/utils.js";
+	import { cn, type WithElementRef } from "$lib/utils.js";

 	let {
 		ref = $bindable(null),
 		class: className,
-		level = 5,
 		children,
 		...restProps
-	}: WithElementRef<HTMLAttributes<HTMLDivElement>> & {
-		level?: 1 | 2 | 3 | 4 | 5 | 6;
-	} = $props();
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
 </script>

 <div
-	role="heading"
-	aria-level={level}
 	bind:this={ref}
-	class={cn("mb-1 font-medium leading-none tracking-tight", className)}
+	data-slot="alert-title"
+	class={cn("col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight", className)}
 	{...restProps}
 >
 	{@render children?.()}
--- a/website/src/lib/components/ui/alert/alert.svelte
+++ b/website/src/lib/components/ui/alert/alert.svelte
@@ -2,12 +2,12 @@
 	import { type VariantProps, tv } from "tailwind-variants";

 	export const alertVariants = tv({
-		base: "[&>svg]:text-foreground relative w-full rounded-lg border p-4 [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg~*]:pl-7",
+		base: "relative grid w-full grid-cols-[0_1fr] items-start gap-y-0.5 rounded-lg border px-4 py-3 text-sm has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] has-[>svg]:gap-x-3 [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current",
 		variants: {
 			variant: {
-				default: "bg-background text-foreground",
+				default: "bg-card text-card-foreground",
 				destructive:
-					"border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive",
+					"text-destructive bg-card *:data-[slot=alert-description]:text-destructive/90 [&>svg]:text-current",
 			},
 		},
 		defaultVariants: {
@@ -20,8 +20,7 @@

 <script lang="ts">
 	import type { HTMLAttributes } from "svelte/elements";
-	import type { WithElementRef } from "bits-ui";
-	import { cn } from "$lib/utils.js";
+	import { cn, type WithElementRef } from "$lib/utils.js";

 	let {
 		ref = $bindable(null),
@@ -34,6 +33,12 @@
 	} = $props();
 </script>

-<div bind:this={ref} class={cn(alertVariants({ variant }), className)} {...restProps} role="alert">
+<div
+	bind:this={ref}
+	data-slot="alert"
+	class={cn(alertVariants({ variant }), className)}
+	{...restProps}
+	role="alert"
+>
 	{@render children?.()}
 </div>
--- a/website/src/lib/components/ui/button/button.svelte
+++ b/website/src/lib/components/ui/button/button.svelte
@@ -1,74 +1,80 @@
 <script lang="ts" module>
-	import type { WithElementRef } from "bits-ui";
-	import type { HTMLAnchorAttributes, HTMLButtonAttributes } from "svelte/elements";
-	import { type VariantProps, tv } from "tailwind-variants";
+    import { cn, type WithElementRef } from '$lib/utils.js';
+    import type { HTMLAnchorAttributes, HTMLButtonAttributes } from 'svelte/elements';
+    import { type VariantProps, tv } from 'tailwind-variants';

-	export const buttonVariants = tv({
-		base: "ring-offset-background focus-visible:ring-ring inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
-		variants: {
-			variant: {
-				default: "bg-primary text-primary-foreground hover:bg-primary/90",
-				destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
-				outline:
-					"border-input bg-background hover:bg-accent hover:text-accent-foreground border",
-				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-10 px-4 py-2",
-				sm: "h-9 rounded-md px-3",
-				lg: "h-11 rounded-md px-8",
-				icon: "h-10 w-10",
-			},
-		},
-		defaultVariants: {
-			variant: "default",
-			size: "default",
-		},
-	});
+    export const buttonVariants = tv({
+        base: "focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive inline-flex shrink-0 items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium outline-none transition-all focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+        variants: {
+            variant: {
+                default: 'bg-primary text-primary-foreground shadow-xs hover:bg-primary/90',
+                destructive:
+                    'bg-destructive shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60 text-white',
+                outline:
+                    'bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 border',
+                secondary: 'bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80',
+                ghost: 'hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50',
+                link: 'text-primary underline-offset-4 hover:underline',
+            },
+            size: {
+                default: 'h-9 px-4 py-2 has-[>svg]:px-3',
+                sm: 'h-8 gap-1.5 rounded-md px-3 has-[>svg]:px-2.5',
+                lg: 'h-10 rounded-md px-6 has-[>svg]:px-4',
+                icon: 'size-9',
+            },
+        },
+        defaultVariants: {
+            variant: 'default',
+            size: 'default',
+        },
+    });

-	export type ButtonVariant = VariantProps<typeof buttonVariants>["variant"];
-	export type ButtonSize = VariantProps<typeof buttonVariants>["size"];
+    export type ButtonVariant = VariantProps<typeof buttonVariants>['variant'];
+    export type ButtonSize = VariantProps<typeof buttonVariants>['size'];

-	export type ButtonProps = WithElementRef<HTMLButtonAttributes> &
-		WithElementRef<HTMLAnchorAttributes> & {
-			variant?: ButtonVariant;
-			size?: ButtonSize;
-		};
+    export type ButtonProps = WithElementRef<HTMLButtonAttributes> &
+        WithElementRef<HTMLAnchorAttributes> & {
+            variant?: ButtonVariant;
+            size?: ButtonSize;
+        };
 </script>

 <script lang="ts">
-	import { cn } from "$lib/utils.js";
-
-	let {
-		class: className,
-		variant = "default",
-		size = "default",
-		ref = $bindable(null),
-		href = undefined,
-		type = "button",
-		children,
-		...restProps
-	}: ButtonProps = $props();
+    let {
+        class: className,
+        variant = 'default',
+        size = 'default',
+        ref = $bindable(null),
+        href = undefined,
+        type = 'button',
+        disabled,
+        children,
+        ...restProps
+    }: ButtonProps = $props();
 </script>

 {#if href}
-	<a
-		bind:this={ref}
-		class={cn(buttonVariants({ variant, size }), className)}
-		{href}
-		{...restProps}
-	>
-		{@render children?.()}
-	</a>
+    <a
+        bind:this={ref}
+        data-slot="button"
+        class={cn(buttonVariants({ variant, size }), className)}
+        href={disabled ? undefined : href}
+        aria-disabled={disabled}
+        role={disabled ? 'link' : undefined}
+        tabindex={disabled ? -1 : undefined}
+        {...restProps}
+    >
+        {@render children?.()}
+    </a>
 {:else}
-	<button
-		bind:this={ref}
-		class={cn(buttonVariants({ variant, size }), className)}
-		{type}
-		{...restProps}
-	>
-		{@render children?.()}
-	</button>
+    <button
+        bind:this={ref}
+        data-slot="button"
+        class={cn(buttonVariants({ variant, size }), className)}
+        {type}
+        {disabled}
+        {...restProps}
+    >
+        {@render children?.()}
+    </button>
 {/if}
--- a/website/src/lib/components/ui/calendar/calendar-caption.svelte
+++ b/website/src/lib/components/ui/calendar/calendar-caption.svelte
@@ -0,0 +1,76 @@
+<script lang="ts">
+	import type { ComponentProps } from "svelte";
+	import type Calendar from "./calendar.svelte";
+	import CalendarMonthSelect from "./calendar-month-select.svelte";
+	import CalendarYearSelect from "./calendar-year-select.svelte";
+	import { DateFormatter, getLocalTimeZone, type DateValue } from "@internationalized/date";
+
+	let {
+		captionLayout,
+		months,
+		monthFormat,
+		years,
+		yearFormat,
+		month,
+		locale,
+		placeholder = $bindable(),
+		monthIndex = 0,
+	}: {
+		captionLayout: ComponentProps<typeof Calendar>["captionLayout"];
+		months: ComponentProps<typeof CalendarMonthSelect>["months"];
+		monthFormat: ComponentProps<typeof CalendarMonthSelect>["monthFormat"];
+		years: ComponentProps<typeof CalendarYearSelect>["years"];
+		yearFormat: ComponentProps<typeof CalendarYearSelect>["yearFormat"];
+		month: DateValue;
+		placeholder: DateValue | undefined;
+		locale: string;
+		monthIndex: number;
+	} = $props();
+
+	function formatYear(date: DateValue) {
+		const dateObj = date.toDate(getLocalTimeZone());
+		if (typeof yearFormat === "function") return yearFormat(dateObj.getFullYear());
+		return new DateFormatter(locale, { year: yearFormat }).format(dateObj);
+	}
+
+	function formatMonth(date: DateValue) {
+		const dateObj = date.toDate(getLocalTimeZone());
+		if (typeof monthFormat === "function") return monthFormat(dateObj.getMonth() + 1);
+		return new DateFormatter(locale, { month: monthFormat }).format(dateObj);
+	}
+</script>
+
+{#snippet MonthSelect()}
+	<CalendarMonthSelect
+		{months}
+		{monthFormat}
+		value={month.month}
+		onchange={(e) => {
+			if (!placeholder) return;
+			const v = Number.parseInt(e.currentTarget.value);
+			const newPlaceholder = placeholder.set({ month: v });
+			placeholder = newPlaceholder.subtract({ months: monthIndex });
+		}}
+	/>
+{/snippet}
+
+{#snippet YearSelect()}
+	<CalendarYearSelect {years} {yearFormat} value={month.year} />
+{/snippet}
+
+{#if captionLayout === "dropdown"}
+	{@render MonthSelect()}
+	{@render YearSelect()}
+{:else if captionLayout === "dropdown-months"}
+	{@render MonthSelect()}
+	{#if placeholder}
+		{formatYear(placeholder)}
+	{/if}
+{:else if captionLayout === "dropdown-years"}
+	{#if placeholder}
+		{formatMonth(placeholder)}
+	{/if}
+	{@render YearSelect()}
+{:else}
+	{formatMonth(month)} {formatYear(month)}
+{/if}
--- a/website/src/lib/components/ui/calendar/calendar-cell.svelte
+++ b/website/src/lib/components/ui/calendar/calendar-cell.svelte
@@ -12,7 +12,7 @@
 <CalendarPrimitive.Cell
 	bind:ref
 	class={cn(
-		"[&:has([data-selected])]:bg-accent [&:has([data-selected][data-outside-month])]:bg-accent/50 relative size-9 p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([data-selected])]:rounded-md",
+		"size-(--cell-size) relative p-0 text-center text-sm focus-within:z-20 [&:first-child[data-selected]_[data-bits-day]]:rounded-l-md [&:last-child[data-selected]_[data-bits-day]]:rounded-r-md",
 		className
 	)}
 	{...restProps}
--- a/website/src/lib/components/ui/calendar/calendar-day.svelte
+++ b/website/src/lib/components/ui/calendar/calendar-day.svelte
@@ -14,16 +14,21 @@
 	bind:ref
 	class={cn(
 		buttonVariants({ variant: "ghost" }),
-		"size-9 p-0 font-normal",
-		"[&[data-today]:not([data-selected])]:bg-accent [&[data-today]:not([data-selected])]:text-accent-foreground",
-		// Selected
-		"data-[selected]:bg-primary data-[selected]:text-primary-foreground data-[selected]:hover:bg-primary data-[selected]:hover:text-primary-foreground data-[selected]:focus:bg-primary data-[selected]:focus:text-primary-foreground data-[selected]:opacity-100",
-		// Disabled
-		"data-[disabled]:text-muted-foreground data-[disabled]:opacity-50",
-		// Unavailable
-		"data-[unavailable]:text-destructive-foreground data-[unavailable]:line-through",
+		"size-(--cell-size) flex select-none flex-col items-center justify-center gap-1 whitespace-nowrap p-0 font-normal leading-none",
+		"[&[data-today]:not([data-selected])]:bg-accent [&[data-today]:not([data-selected])]:text-accent-foreground [&[data-today][data-disabled]]:text-muted-foreground",
+		"data-[selected]:bg-primary dark:data-[selected]:hover:bg-accent/50 data-[selected]:text-primary-foreground",
 		// Outside months
-		"data-[outside-month]:text-muted-foreground [&[data-outside-month][data-selected]]:bg-accent/50 [&[data-outside-month][data-selected]]:text-muted-foreground data-[outside-month]:pointer-events-none data-[outside-month]:opacity-50 [&[data-outside-month][data-selected]]:opacity-30",
+		"[&[data-outside-month]:not([data-selected])]:text-muted-foreground [&[data-outside-month]:not([data-selected])]:hover:text-accent-foreground",
+		// Disabled
+		"data-[disabled]:text-muted-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+		// Unavailable
+		"data-[unavailable]:text-muted-foreground data-[unavailable]:line-through",
+		// hover
+		"dark:hover:text-accent-foreground",
+		// focus
+		"focus:border-ring focus:ring-ring/50 focus:relative",
+		// inner spans
+		"[&>span]:text-xs [&>span]:opacity-70",
 		className
 	)}
 	{...restProps}
--- a/website/src/lib/components/ui/calendar/calendar-grid.svelte
+++ b/website/src/lib/components/ui/calendar/calendar-grid.svelte
@@ -11,6 +11,6 @@

 <CalendarPrimitive.Grid
 	bind:ref
-	class={cn("w-full border-collapse space-y-1", className)}
+	class={cn("mt-4 flex w-full border-collapse flex-col gap-1", className)}
 	{...restProps}
 />
--- a/website/src/lib/components/ui/calendar/calendar-head-cell.svelte
+++ b/website/src/lib/components/ui/calendar/calendar-head-cell.svelte
@@ -11,6 +11,9 @@

 <CalendarPrimitive.HeadCell
 	bind:ref
-	class={cn("text-muted-foreground w-9 rounded-md text-[0.8rem] font-normal", className)}
+	class={cn(
+		"text-muted-foreground w-(--cell-size) rounded-md text-[0.8rem] font-normal",
+		className
+	)}
 	{...restProps}
 />
--- a/website/src/lib/components/ui/calendar/calendar-header.svelte
+++ b/website/src/lib/components/ui/calendar/calendar-header.svelte
@@ -11,6 +11,9 @@

 <CalendarPrimitive.Header
 	bind:ref
-	class={cn("relative flex w-full items-center justify-between pt-1", className)}
+	class={cn(
+		"h-(--cell-size) flex w-full items-center justify-center gap-1.5 text-sm font-medium",
+		className
+	)}
 	{...restProps}
 />
--- a/website/src/lib/components/ui/calendar/calendar-heading.svelte
+++ b/website/src/lib/components/ui/calendar/calendar-heading.svelte
@@ -9,4 +9,8 @@
 	}: CalendarPrimitive.HeadingProps = $props();
 </script>

-<CalendarPrimitive.Heading bind:ref class={cn("text-sm font-medium", className)} {...restProps} />
+<CalendarPrimitive.Heading
+	bind:ref
+	class={cn("px-(--cell-size) text-sm font-medium", className)}
+	{...restProps}
+/>
--- a/website/src/lib/components/ui/calendar/calendar-month-select.svelte
+++ b/website/src/lib/components/ui/calendar/calendar-month-select.svelte
@@ -0,0 +1,44 @@
+<script lang="ts">
+	import { Calendar as CalendarPrimitive } from "bits-ui";
+	import { cn, type WithoutChildrenOrChild } from "$lib/utils.js";
+	import ChevronDownIcon from "@lucide/svelte/icons/chevron-down";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		value,
+		onchange,
+		...restProps
+	}: WithoutChildrenOrChild<CalendarPrimitive.MonthSelectProps> = $props();
+</script>
+
+<span
+	class={cn(
+		"has-focus:border-ring border-input shadow-xs has-focus:ring-ring/50 has-focus:ring-[3px] relative flex rounded-md border",
+		className
+	)}
+>
+	<CalendarPrimitive.MonthSelect bind:ref class="absolute inset-0 opacity-0" {...restProps}>
+		{#snippet child({ props, monthItems, selectedMonthItem })}
+			<select {...props} {value} {onchange}>
+				{#each monthItems as monthItem (monthItem.value)}
+					<option
+						value={monthItem.value}
+						selected={value !== undefined
+							? monthItem.value === value
+							: monthItem.value === selectedMonthItem.value}
+					>
+						{monthItem.label}
+					</option>
+				{/each}
+			</select>
+			<span
+				class="[&>svg]:text-muted-foreground flex h-8 select-none items-center gap-1 rounded-md pl-2 pr-1 text-sm font-medium [&>svg]:size-3.5"
+				aria-hidden="true"
+			>
+				{monthItems.find((item) => item.value === value)?.label || selectedMonthItem.label}
+				<ChevronDownIcon class="size-4" />
+			</span>
+		{/snippet}
+	</CalendarPrimitive.MonthSelect>
+</span>
--- a/website/src/lib/components/ui/calendar/calendar-month.svelte
+++ b/website/src/lib/components/ui/calendar/calendar-month.svelte
@@ -0,0 +1,15 @@
+<script lang="ts">
+	import { type WithElementRef, cn } from "$lib/utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLElement>> = $props();
+</script>
+
+<div {...restProps} bind:this={ref} class={cn("flex flex-col", className)}>
+	{@render children?.()}
+</div>
--- a/website/src/lib/components/ui/calendar/calendar-months.svelte
+++ b/website/src/lib/components/ui/calendar/calendar-months.svelte
@@ -1,7 +1,6 @@
 <script lang="ts">
-	import type { WithElementRef } from "bits-ui";
 	import type { HTMLAttributes } from "svelte/elements";
-	import { cn } from "$lib/utils.js";
+	import { cn, type WithElementRef } from "$lib/utils.js";

 	let {
 		ref = $bindable(null),
@@ -13,7 +12,7 @@

 <div
 	bind:this={ref}
-	class={cn("mt-4 flex flex-col space-y-4 sm:flex-row sm:space-x-4 sm:space-y-0", className)}
+	class={cn("relative flex flex-col gap-4 md:flex-row", className)}
 	{...restProps}
 >
 	{@render children?.()}
--- a/website/src/lib/components/ui/calendar/calendar-nav.svelte
+++ b/website/src/lib/components/ui/calendar/calendar-nav.svelte
@@ -0,0 +1,19 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from "$lib/utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLElement>> = $props();
+</script>
+
+<nav
+	{...restProps}
+	bind:this={ref}
+	class={cn("absolute inset-x-0 top-0 flex w-full items-center justify-between gap-1", className)}
+>
+	{@render children?.()}
+</nav>
--- a/website/src/lib/components/ui/calendar/calendar-next-button.svelte
+++ b/website/src/lib/components/ui/calendar/calendar-next-button.svelte
@@ -1,26 +1,29 @@
 <script lang="ts">
 	import { Calendar as CalendarPrimitive } from "bits-ui";
-	import ChevronRight from "@lucide/svelte/icons/chevron-right";
-	import { buttonVariants } from "$lib/components/ui/button/index.js";
+	import ChevronRightIcon from "@lucide/svelte/icons/chevron-right";
+	import { buttonVariants, type ButtonVariant } from "$lib/components/ui/button/index.js";
 	import { cn } from "$lib/utils.js";

 	let {
 		ref = $bindable(null),
 		class: className,
 		children,
+		variant = "ghost",
 		...restProps
-	}: CalendarPrimitive.PrevButtonProps = $props();
+	}: CalendarPrimitive.NextButtonProps & {
+		variant?: ButtonVariant;
+	} = $props();
 </script>

 {#snippet Fallback()}
-	<ChevronRight class="size-4" />
+	<ChevronRightIcon class="size-4" />
 {/snippet}

 <CalendarPrimitive.NextButton
 	bind:ref
 	class={cn(
-		buttonVariants({ variant: "outline" }),
-		"size-7 bg-transparent p-0 opacity-50 hover:opacity-100",
+		buttonVariants({ variant }),
+		"size-(--cell-size) select-none bg-transparent p-0 disabled:opacity-50 rtl:rotate-180",
 		className
 	)}
 	children={children || Fallback}
--- a/website/src/lib/components/ui/calendar/calendar-prev-button.svelte
+++ b/website/src/lib/components/ui/calendar/calendar-prev-button.svelte
@@ -1,26 +1,29 @@
 <script lang="ts">
 	import { Calendar as CalendarPrimitive } from "bits-ui";
-	import ChevronLeft from "@lucide/svelte/icons/chevron-left";
-	import { buttonVariants } from "$lib/components/ui/button/index.js";
+	import ChevronLeftIcon from "@lucide/svelte/icons/chevron-left";
+	import { buttonVariants, type ButtonVariant } from "$lib/components/ui/button/index.js";
 	import { cn } from "$lib/utils.js";

 	let {
 		ref = $bindable(null),
 		class: className,
 		children,
+		variant = "ghost",
 		...restProps
-	}: CalendarPrimitive.PrevButtonProps = $props();
+	}: CalendarPrimitive.PrevButtonProps & {
+		variant?: ButtonVariant;
+	} = $props();
 </script>

 {#snippet Fallback()}
-	<ChevronLeft class="size-4" />
+	<ChevronLeftIcon class="size-4" />
 {/snippet}

 <CalendarPrimitive.PrevButton
 	bind:ref
 	class={cn(
-		buttonVariants({ variant: "outline" }),
-		"size-7 bg-transparent p-0 opacity-50 hover:opacity-100",
+		buttonVariants({ variant }),
+		"size-(--cell-size) select-none bg-transparent p-0 disabled:opacity-50 rtl:rotate-180",
 		className
 	)}
 	children={children || Fallback}
--- a/website/src/lib/components/ui/calendar/calendar-year-select.svelte
+++ b/website/src/lib/components/ui/calendar/calendar-year-select.svelte
@@ -0,0 +1,43 @@
+<script lang="ts">
+	import { Calendar as CalendarPrimitive } from "bits-ui";
+	import { cn, type WithoutChildrenOrChild } from "$lib/utils.js";
+	import ChevronDownIcon from "@lucide/svelte/icons/chevron-down";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		value,
+		...restProps
+	}: WithoutChildrenOrChild<CalendarPrimitive.YearSelectProps> = $props();
+</script>
+
+<span
+	class={cn(
+		"has-focus:border-ring border-input shadow-xs has-focus:ring-ring/50 has-focus:ring-[3px] relative flex rounded-md border",
+		className
+	)}
+>
+	<CalendarPrimitive.YearSelect bind:ref class="absolute inset-0 opacity-0" {...restProps}>
+		{#snippet child({ props, yearItems, selectedYearItem })}
+			<select {...props} {value}>
+				{#each yearItems as yearItem (yearItem.value)}
+					<option
+						value={yearItem.value}
+						selected={value !== undefined
+							? yearItem.value === value
+							: yearItem.value === selectedYearItem.value}
+					>
+						{yearItem.label}
+					</option>
+				{/each}
+			</select>
+			<span
+				class="[&>svg]:text-muted-foreground flex h-8 select-none items-center gap-1 rounded-md pl-2 pr-1 text-sm font-medium [&>svg]:size-3.5"
+				aria-hidden="true"
+			>
+				{yearItems.find((item) => item.value === value)?.label || selectedYearItem.label}
+				<ChevronDownIcon class="size-4" />
+			</span>
+		{/snippet}
+	</CalendarPrimitive.YearSelect>
+</span>
--- a/website/src/lib/components/ui/calendar/calendar.svelte
+++ b/website/src/lib/components/ui/calendar/calendar.svelte
@@ -1,7 +1,10 @@
 <script lang="ts">
-	import { Calendar as CalendarPrimitive, type WithoutChildrenOrChild } from "bits-ui";
+	import { Calendar as CalendarPrimitive } from "bits-ui";
 	import * as Calendar from "./index.js";
-	import { cn } from "$lib/utils.js";
+	import { cn, type WithoutChildrenOrChild } from "$lib/utils.js";
+	import type { ButtonVariant } from "../button/button.svelte";
+	import { isEqualMonth, type DateValue } from "@internationalized/date";
+	import type { Snippet } from "svelte";

 	let {
 		ref = $bindable(null),
@@ -9,8 +12,31 @@
 		placeholder = $bindable(),
 		class: className,
 		weekdayFormat = "short",
+		buttonVariant = "ghost",
+		captionLayout = "label",
+		locale = "en-US",
+		months: monthsProp,
+		years,
+		monthFormat: monthFormatProp,
+		yearFormat = "numeric",
+		day,
+		disableDaysOutsideMonth = false,
 		...restProps
-	}: WithoutChildrenOrChild<CalendarPrimitive.RootProps> = $props();
+	}: WithoutChildrenOrChild<CalendarPrimitive.RootProps> & {
+		buttonVariant?: ButtonVariant;
+		captionLayout?: "dropdown" | "dropdown-months" | "dropdown-years" | "label";
+		months?: CalendarPrimitive.MonthSelectProps["months"];
+		years?: CalendarPrimitive.YearSelectProps["years"];
+		monthFormat?: CalendarPrimitive.MonthSelectProps["monthFormat"];
+		yearFormat?: CalendarPrimitive.YearSelectProps["yearFormat"];
+		day?: Snippet<[{ day: DateValue; outsideMonth: boolean }]>;
+	} = $props();
+
+	const monthFormat = $derived.by(() => {
+		if (monthFormatProp) return monthFormatProp;
+		if (captionLayout.startsWith("dropdown")) return "short";
+		return "long";
+	});
 </script>

 <!--
@@ -22,39 +48,67 @@ get along, so we shut typescript up by casting `value` to `never`.
 	bind:ref
 	bind:placeholder
 	{weekdayFormat}
-	class={cn("p-3", className)}
+	{disableDaysOutsideMonth}
+	class={cn(
+		"bg-background group/calendar p-3 [--cell-size:--spacing(8)] [[data-slot=card-content]_&]:bg-transparent [[data-slot=popover-content]_&]:bg-transparent",
+		className
+	)}
+	{locale}
+	{monthFormat}
+	{yearFormat}
 	{...restProps}
 >
 	{#snippet children({ months, weekdays })}
-		<Calendar.Header>
-			<Calendar.PrevButton />
-			<Calendar.Heading />
-			<Calendar.NextButton />
-		</Calendar.Header>
 		<Calendar.Months>
-			{#each months as month (month)}
-				<Calendar.Grid>
-					<Calendar.GridHead>
-						<Calendar.GridRow class="flex">
-							{#each weekdays as weekday (weekday)}
-								<Calendar.HeadCell>
-									{weekday.slice(0, 2)}
-								</Calendar.HeadCell>
-							{/each}
-						</Calendar.GridRow>
-					</Calendar.GridHead>
-					<Calendar.GridBody>
-						{#each month.weeks as weekDates (weekDates)}
-							<Calendar.GridRow class="mt-2 w-full">
-								{#each weekDates as date (date)}
-									<Calendar.Cell {date} month={month.value}>
-										<Calendar.Day />
-									</Calendar.Cell>
+			<Calendar.Nav>
+				<Calendar.PrevButton variant={buttonVariant} />
+				<Calendar.NextButton variant={buttonVariant} />
+			</Calendar.Nav>
+			{#each months as month, monthIndex (month)}
+				<Calendar.Month>
+					<Calendar.Header>
+						<Calendar.Caption
+							{captionLayout}
+							months={monthsProp}
+							{monthFormat}
+							{years}
+							{yearFormat}
+							month={month.value}
+							bind:placeholder
+							{locale}
+							{monthIndex}
+						/>
+					</Calendar.Header>
+					<Calendar.Grid>
+						<Calendar.GridHead>
+							<Calendar.GridRow class="select-none">
+								{#each weekdays as weekday (weekday)}
+									<Calendar.HeadCell>
+										{weekday.slice(0, 2)}
+									</Calendar.HeadCell>
 								{/each}
 							</Calendar.GridRow>
-						{/each}
-					</Calendar.GridBody>
-				</Calendar.Grid>
+						</Calendar.GridHead>
+						<Calendar.GridBody>
+							{#each month.weeks as weekDates (weekDates)}
+								<Calendar.GridRow class="mt-2 w-full">
+									{#each weekDates as date (date)}
+										<Calendar.Cell {date} month={month.value}>
+											{#if day}
+												{@render day({
+													day: date,
+													outsideMonth: !isEqualMonth(date, month.value),
+												})}
+											{:else}
+												<Calendar.Day />
+											{/if}
+										</Calendar.Cell>
+									{/each}
+								</Calendar.GridRow>
+							{/each}
+						</Calendar.GridBody>
+					</Calendar.Grid>
+				</Calendar.Month>
 			{/each}
 		</Calendar.Months>
 	{/snippet}
--- a/website/src/lib/components/ui/calendar/index.ts
+++ b/website/src/lib/components/ui/calendar/index.ts
@@ -11,6 +11,11 @@ import GridHead from "./calendar-grid-head.svelte";
 import HeadCell from "./calendar-head-cell.svelte";
 import NextButton from "./calendar-next-button.svelte";
 import PrevButton from "./calendar-prev-button.svelte";
+import MonthSelect from "./calendar-month-select.svelte";
+import YearSelect from "./calendar-year-select.svelte";
+import Month from "./calendar-month.svelte";
+import Nav from "./calendar-nav.svelte";
+import Caption from "./calendar-caption.svelte";

 export {
 	Day,
@@ -25,6 +30,11 @@ export {
 	HeadCell,
 	NextButton,
 	PrevButton,
+	Nav,
+	Month,
+	YearSelect,
+	MonthSelect,
+	Caption,
 	//
 	Root as Calendar,
 };
--- a/website/src/lib/components/ui/card/card-action.svelte
+++ b/website/src/lib/components/ui/card/card-action.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from "$lib/utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="card-action"
+	class={cn("col-start-2 row-span-2 row-start-1 self-start justify-self-end", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>
--- a/website/src/lib/components/ui/card/card-content.svelte
+++ b/website/src/lib/components/ui/card/card-content.svelte
@@ -1,7 +1,6 @@
 <script lang="ts">
-	import type { WithElementRef } from "bits-ui";
 	import type { HTMLAttributes } from "svelte/elements";
-	import { cn } from "$lib/utils.js";
+	import { cn, type WithElementRef } from "$lib/utils.js";

 	let {
 		ref = $bindable(null),
@@ -11,6 +10,6 @@
 	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
 </script>

-<div bind:this={ref} class={cn("p-6", className)} {...restProps}>
+<div bind:this={ref} data-slot="card-content" class={cn("px-6", className)} {...restProps}>
 	{@render children?.()}
 </div>
--- a/website/src/lib/components/ui/card/card-description.svelte
+++ b/website/src/lib/components/ui/card/card-description.svelte
@@ -1,7 +1,6 @@
 <script lang="ts">
-	import type { WithElementRef } from "bits-ui";
 	import type { HTMLAttributes } from "svelte/elements";
-	import { cn } from "$lib/utils.js";
+	import { cn, type WithElementRef } from "$lib/utils.js";

 	let {
 		ref = $bindable(null),
@@ -11,6 +10,11 @@
 	}: WithElementRef<HTMLAttributes<HTMLParagraphElement>> = $props();
 </script>

-<p bind:this={ref} class={cn("text-muted-foreground text-sm", className)} {...restProps}>
+<p
+	bind:this={ref}
+	data-slot="card-description"
+	class={cn("text-muted-foreground text-sm", className)}
+	{...restProps}
+>
 	{@render children?.()}
 </p>
--- a/website/src/lib/components/ui/card/card-footer.svelte
+++ b/website/src/lib/components/ui/card/card-footer.svelte
@@ -1,7 +1,6 @@
 <script lang="ts">
-	import type { WithElementRef } from "bits-ui";
+	import { cn, type WithElementRef } from "$lib/utils.js";
 	import type { HTMLAttributes } from "svelte/elements";
-	import { cn } from "$lib/utils.js";

 	let {
 		ref = $bindable(null),
@@ -11,6 +10,11 @@
 	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
 </script>

-<div bind:this={ref} class={cn("flex items-center p-6 pt-0", className)} {...restProps}>
+<div
+	bind:this={ref}
+	data-slot="card-footer"
+	class={cn("[.border-t]:pt-6 flex items-center px-6", className)}
+	{...restProps}
+>
 	{@render children?.()}
 </div>
--- a/website/src/lib/components/ui/card/card-header.svelte
+++ b/website/src/lib/components/ui/card/card-header.svelte
@@ -1,7 +1,6 @@
 <script lang="ts">
-	import type { WithElementRef } from "bits-ui";
+	import { cn, type WithElementRef } from "$lib/utils.js";
 	import type { HTMLAttributes } from "svelte/elements";
-	import { cn } from "$lib/utils.js";

 	let {
 		ref = $bindable(null),
@@ -11,6 +10,14 @@
 	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
 </script>

-<div bind:this={ref} class={cn("flex flex-col space-y-1.5 p-6 pb-0", className)} {...restProps}>
+<div
+	bind:this={ref}
+	data-slot="card-header"
+	class={cn(
+		"@container/card-header has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6 grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6",
+		className
+	)}
+	{...restProps}
+>
 	{@render children?.()}
 </div>
--- a/website/src/lib/components/ui/card/card-title.svelte
+++ b/website/src/lib/components/ui/card/card-title.svelte
@@ -1,24 +1,19 @@
 <script lang="ts">
-	import type { WithElementRef } from "bits-ui";
 	import type { HTMLAttributes } from "svelte/elements";
-	import { cn } from "$lib/utils.js";
+	import { cn, type WithElementRef } from "$lib/utils.js";

 	let {
 		ref = $bindable(null),
 		class: className,
-		level = 3,
 		children,
 		...restProps
-	}: WithElementRef<HTMLAttributes<HTMLDivElement>> & {
-		level?: 1 | 2 | 3 | 4 | 5 | 6;
-	} = $props();
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
 </script>

 <div
-	role="heading"
-	aria-level={level}
 	bind:this={ref}
-	class={cn("text-2xl font-semibold leading-none tracking-tight", className)}
+	data-slot="card-title"
+	class={cn("font-semibold leading-none", className)}
 	{...restProps}
 >
 	{@render children?.()}
--- a/website/src/lib/components/ui/card/card.svelte
+++ b/website/src/lib/components/ui/card/card.svelte
@@ -1,7 +1,6 @@
 <script lang="ts">
-	import type { WithElementRef } from "bits-ui";
 	import type { HTMLAttributes } from "svelte/elements";
-	import { cn } from "$lib/utils.js";
+	import { cn, type WithElementRef } from "$lib/utils.js";

 	let {
 		ref = $bindable(null),
@@ -13,7 +12,11 @@

 <div
 	bind:this={ref}
-	class={cn("bg-card text-card-foreground rounded-lg border shadow-sm", className)}
+	data-slot="card"
+	class={cn(
+		"bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm",
+		className
+	)}
 	{...restProps}
 >
 	{@render children?.()}
--- a/website/src/lib/components/ui/card/index.ts
+++ b/website/src/lib/components/ui/card/index.ts
@@ -4,6 +4,7 @@ import Description from "./card-description.svelte";
 import Footer from "./card-footer.svelte";
 import Header from "./card-header.svelte";
 import Title from "./card-title.svelte";
+import Action from "./card-action.svelte";

 export {
 	Root,
@@ -12,6 +13,7 @@ export {
 	Footer,
 	Header,
 	Title,
+	Action,
 	//
 	Root as Card,
 	Content as CardContent,
@@ -19,4 +21,5 @@ export {
 	Footer as CardFooter,
 	Header as CardHeader,
 	Title as CardTitle,
+	Action as CardAction,
 };
--- a/website/src/lib/components/ui/checkbox/checkbox.svelte
+++ b/website/src/lib/components/ui/checkbox/checkbox.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
-	import { Checkbox as CheckboxPrimitive, type WithoutChildrenOrChild } from "bits-ui";
-	import Check from "@lucide/svelte/icons/check";
-	import Minus from "@lucide/svelte/icons/minus";
-	import { cn } from "$lib/utils.js";
+	import { Checkbox as CheckboxPrimitive } from "bits-ui";
+	import CheckIcon from "@lucide/svelte/icons/check";
+	import MinusIcon from "@lucide/svelte/icons/minus";
+	import { cn, type WithoutChildrenOrChild } from "$lib/utils.js";

 	let {
 		ref = $bindable(null),
@@ -15,8 +15,9 @@

 <CheckboxPrimitive.Root
 	bind:ref
+	data-slot="checkbox"
 	class={cn(
-		"border-primary ring-offset-background focus-visible:ring-ring data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground peer box-content size-4 shrink-0 rounded-sm border focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[disabled=true]:cursor-not-allowed data-[disabled=true]:opacity-50",
+		"border-input dark:bg-input/30 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:data-[state=checked]:bg-primary data-[state=checked]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive shadow-xs peer flex size-4 shrink-0 items-center justify-center rounded-[4px] border outline-none transition-shadow focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
 		className
 	)}
 	bind:checked
@@ -24,11 +25,11 @@
 	{...restProps}
 >
 	{#snippet children({ checked, indeterminate })}
-		<div class="flex size-4 items-center justify-center text-current">
-			{#if indeterminate}
-				<Minus class="size-3.5" />
-			{:else}
-				<Check class={cn("size-3.5", !checked && "text-transparent")} />
+		<div data-slot="checkbox-indicator" class="text-current transition-none">
+			{#if checked}
+				<CheckIcon class="size-3.5" />
+			{:else if indeterminate}
+				<MinusIcon class="size-3.5" />
 			{/if}
 		</div>
 	{/snippet}
--- a/website/src/lib/components/ui/collapsible/collapsible-content.svelte
+++ b/website/src/lib/components/ui/collapsible/collapsible-content.svelte
@@ -1,15 +1,7 @@
 <script lang="ts">
 	import { Collapsible as CollapsiblePrimitive } from "bits-ui";
-	import { slide } from "svelte/transition";

-	type $$Props = CollapsiblePrimitive.ContentProps;
-
-	export let transition: $$Props["transition"] = slide;
-	export let transitionConfig: $$Props["transitionConfig"] = {
-		duration: 150,
-	};
+	let { ref = $bindable(null), ...restProps }: CollapsiblePrimitive.ContentProps = $props();
 </script>

-<CollapsiblePrimitive.Content {transition} {transitionConfig} {...$$restProps}>
-	<slot />
-</CollapsiblePrimitive.Content>
+<CollapsiblePrimitive.Content bind:ref data-slot="collapsible-content" {...restProps} />
--- a/website/src/lib/components/ui/collapsible/collapsible-trigger.svelte
+++ b/website/src/lib/components/ui/collapsible/collapsible-trigger.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { Collapsible as CollapsiblePrimitive } from "bits-ui";
+
+	let { ref = $bindable(null), ...restProps }: CollapsiblePrimitive.TriggerProps = $props();
+</script>
+
+<CollapsiblePrimitive.Trigger bind:ref data-slot="collapsible-trigger" {...restProps} />
--- a/website/src/lib/components/ui/collapsible/collapsible.svelte
+++ b/website/src/lib/components/ui/collapsible/collapsible.svelte
@@ -0,0 +1,11 @@
+<script lang="ts">
+	import { Collapsible as CollapsiblePrimitive } from "bits-ui";
+
+	let {
+		ref = $bindable(null),
+		open = $bindable(false),
+		...restProps
+	}: CollapsiblePrimitive.RootProps = $props();
+</script>
+
+<CollapsiblePrimitive.Root bind:ref bind:open data-slot="collapsible" {...restProps} />
--- a/website/src/lib/components/ui/collapsible/index.ts
+++ b/website/src/lib/components/ui/collapsible/index.ts
@@ -1,9 +1,7 @@
-import { Collapsible as CollapsiblePrimitive } from "bits-ui";
+import Root from "./collapsible.svelte";
+import Trigger from "./collapsible-trigger.svelte";
 import Content from "./collapsible-content.svelte";

-const Root = CollapsiblePrimitive.Root;
-const Trigger = CollapsiblePrimitive.Trigger;
-
 export {
 	Root,
 	Content,
--- a/website/src/lib/components/ui/context-menu/context-menu-checkbox-item.svelte
+++ b/website/src/lib/components/ui/context-menu/context-menu-checkbox-item.svelte
@@ -1,8 +1,7 @@
 <script lang="ts">
-	import { ContextMenu as ContextMenuPrimitive, type WithoutChildrenOrChild } from "bits-ui";
-	import Check from "@lucide/svelte/icons/check";
-	import Minus from "@lucide/svelte/icons/minus";
-	import { cn } from "$lib/utils.js";
+	import { ContextMenu as ContextMenuPrimitive } from "bits-ui";
+	import CheckIcon from "@lucide/svelte/icons/check";
+	import { cn, type WithoutChildrenOrChild } from "$lib/utils.js";
 	import type { Snippet } from "svelte";

 	let {
@@ -21,18 +20,17 @@
 	bind:ref
 	bind:checked
 	bind:indeterminate
+	data-slot="context-menu-checkbox-item"
 	class={cn(
-		"data-[highlighted]:bg-accent 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-[disabled]:opacity-50",
+		"data-highlighted:bg-accent data-highlighted:text-accent-foreground outline-hidden relative flex cursor-default select-none items-center gap-2 rounded-sm py-1.5 pl-8 pr-2 text-sm data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
 		className
 	)}
 	{...restProps}
 >
-	{#snippet children({ checked, indeterminate })}
-		<span class="absolute left-2 flex size-3.5 items-center justify-center">
-			{#if indeterminate}
-				<Minus class="size-3.5" />
-			{:else}
-				<Check class={cn("size-3.5", !checked && "text-transparent")} />
+	{#snippet children({ checked })}
+		<span class="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+			{#if checked}
+				<CheckIcon class="size-4" />
 			{/if}
 		</span>
 		{@render childrenProp?.()}
--- a/website/src/lib/components/ui/context-menu/context-menu-content.svelte
+++ b/website/src/lib/components/ui/context-menu/context-menu-content.svelte
@@ -15,8 +15,9 @@
 <ContextMenuPrimitive.Portal {...portalProps}>
 	<ContextMenuPrimitive.Content
 		bind:ref
+		data-slot="context-menu-content"
 		class={cn(
-			"bg-popover text-popover-foreground z-50 min-w-[8rem] rounded-md border p-1 shadow-md focus:outline-none",
+			"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 max-h-(--bits-context-menu-content-available-height) origin-(--bits-context-menu-content-transform-origin) z-50 min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-md border p-1 shadow-md",
 			className
 		)}
 		{...restProps}
--- a/website/src/lib/components/ui/context-menu/context-menu-group-heading.svelte
+++ b/website/src/lib/components/ui/context-menu/context-menu-group-heading.svelte
@@ -14,6 +14,8 @@

 <ContextMenuPrimitive.GroupHeading
 	bind:ref
-	class={cn("text-foreground px-2 py-1.5 text-sm font-semibold", inset && "pl-8", className)}
+	data-slot="context-menu-group-heading"
+	data-inset={inset}
+	class={cn("text-foreground px-2 py-1.5 text-sm font-medium data-[inset]:pl-8", className)}
 	{...restProps}
 />
--- a/website/src/lib/components/ui/context-menu/context-menu-group.svelte
+++ b/website/src/lib/components/ui/context-menu/context-menu-group.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { ContextMenu as ContextMenuPrimitive } from "bits-ui";
+
+	let { ref = $bindable(null), ...restProps }: ContextMenuPrimitive.GroupProps = $props();
+</script>
+
+<ContextMenuPrimitive.Group bind:ref data-slot="context-menu-group" {...restProps} />
--- a/website/src/lib/components/ui/context-menu/context-menu-item.svelte
+++ b/website/src/lib/components/ui/context-menu/context-menu-item.svelte
@@ -6,17 +6,21 @@
 		ref = $bindable(null),
 		class: className,
 		inset,
+		variant = "default",
 		...restProps
 	}: ContextMenuPrimitive.ItemProps & {
 		inset?: boolean;
+		variant?: "default" | "destructive";
 	} = $props();
 </script>

 <ContextMenuPrimitive.Item
 	bind:ref
+	data-slot="context-menu-item"
+	data-inset={inset}
+	data-variant={variant}
 	class={cn(
-		"data-[highlighted]:bg-accent 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-[disabled]:opacity-50",
-		inset && "pl-8",
+		"data-highlighted:bg-accent data-highlighted:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:data-highlighted:bg-destructive/10 dark:data-[variant=destructive]:data-highlighted:bg-destructive/20 data-[variant=destructive]:data-highlighted:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground outline-hidden relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm data-[disabled]:pointer-events-none data-[inset]:pl-8 data-[disabled]:opacity-50 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
 		className
 	)}
 	{...restProps}
--- a/website/src/lib/components/ui/context-menu/context-menu-label.svelte
+++ b/website/src/lib/components/ui/context-menu/context-menu-label.svelte
@@ -1,19 +1,24 @@
 <script lang="ts">
-	import { ContextMenu as ContextMenuPrimitive } from "bits-ui";
-	import { cn } from "$lib/utils.js";
+	import { cn, type WithElementRef } from "$lib/utils.js";
+	import type { HTMLAttributes } from "svelte/elements";

-	type $$Props = ContextMenuPrimitive.LabelProps & {
+	let {
+		ref = $bindable(null),
+		class: className,
+		inset,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> & {
 		inset?: boolean;
-	};
-
-	let className: $$Props["class"] = undefined;
-	export let inset: $$Props["inset"] = undefined;
-	export { className as class };
+	} = $props();
 </script>

-<ContextMenuPrimitive.Label
-	class={cn("px-2 py-1.5 text-sm font-semibold text-foreground", inset && "pl-8", className)}
-	{...$$restProps}
+<div
+	bind:this={ref}
+	data-slot="context-menu-label"
+	data-inset={inset}
+	class={cn("text-foreground px-2 py-1.5 text-sm font-medium data-[inset]:pl-8", className)}
+	{...restProps}
 >
-	<slot />
-</ContextMenuPrimitive.Label>
+	{@render children?.()}
+</div>
--- a/website/src/lib/components/ui/context-menu/context-menu-radio-group.svelte
+++ b/website/src/lib/components/ui/context-menu/context-menu-radio-group.svelte
@@ -1,11 +1,16 @@
 <script lang="ts">
 	import { ContextMenu as ContextMenuPrimitive } from "bits-ui";

-	type $$Props = ContextMenuPrimitive.RadioGroupProps;
-
-	export let value: $$Props["value"] = undefined;
+	let {
+		ref = $bindable(null),
+		value = $bindable(""),
+		...restProps
+	}: ContextMenuPrimitive.RadioGroupProps = $props();
 </script>

-<ContextMenuPrimitive.RadioGroup {...$$restProps} bind:value>
-	<slot />
-</ContextMenuPrimitive.RadioGroup>
+<ContextMenuPrimitive.RadioGroup
+	bind:ref
+	bind:value
+	data-slot="context-menu-radio-group"
+	{...restProps}
+/>
--- a/website/src/lib/components/ui/context-menu/context-menu-radio-item.svelte
+++ b/website/src/lib/components/ui/context-menu/context-menu-radio-item.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
-	import { ContextMenu as ContextMenuPrimitive, type WithoutChild } from "bits-ui";
-	import Circle from "@lucide/svelte/icons/circle";
-	import { cn } from "$lib/utils.js";
+	import { ContextMenu as ContextMenuPrimitive } from "bits-ui";
+	import CircleIcon from "@lucide/svelte/icons/circle";
+	import { cn, type WithoutChild } from "$lib/utils.js";

 	let {
 		ref = $bindable(null),
@@ -13,16 +13,17 @@

 <ContextMenuPrimitive.RadioItem
 	bind:ref
+	data-slot="context-menu-radio-item"
 	class={cn(
-		"data-[highlighted]:bg-accent 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-[disabled]:opacity-50",
+		"data-highlighted:bg-accent data-highlighted:text-accent-foreground outline-hidden relative flex cursor-default select-none items-center gap-2 rounded-sm py-1.5 pl-8 pr-2 text-sm data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
 		className
 	)}
 	{...restProps}
 >
 	{#snippet children({ checked })}
-		<span class="absolute left-2 flex size-3.5 items-center justify-center">
+		<span class="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
 			{#if checked}
-				<Circle class="size-2 fill-current" />
+				<CircleIcon class="size-2 fill-current" />
 			{/if}
 		</span>
 		{@render childrenProp?.({ checked })}
--- a/website/src/lib/components/ui/context-menu/context-menu-separator.svelte
+++ b/website/src/lib/components/ui/context-menu/context-menu-separator.svelte
@@ -11,6 +11,7 @@

 <ContextMenuPrimitive.Separator
 	bind:ref
+	data-slot="context-menu-separator"
 	class={cn("bg-border -mx-1 my-1 h-px", className)}
 	{...restProps}
 />
--- a/website/src/lib/components/ui/context-menu/context-menu-shortcut.svelte
+++ b/website/src/lib/components/ui/context-menu/context-menu-shortcut.svelte
@@ -1,7 +1,6 @@
 <script lang="ts">
-	import type { WithElementRef } from "bits-ui";
+	import { cn, type WithElementRef } from "$lib/utils.js";
 	import type { HTMLAttributes } from "svelte/elements";
-	import { cn } from "$lib/utils.js";

 	let {
 		ref = $bindable(null),
@@ -13,6 +12,7 @@

 <span
 	bind:this={ref}
+	data-slot="context-menu-shortcut"
 	class={cn("text-muted-foreground ml-auto text-xs tracking-widest", className)}
 	{...restProps}
 >
--- a/website/src/lib/components/ui/context-menu/context-menu-sub-content.svelte
+++ b/website/src/lib/components/ui/context-menu/context-menu-sub-content.svelte
@@ -11,8 +11,9 @@

 <ContextMenuPrimitive.SubContent
 	bind:ref
+	data-slot="context-menu-sub-content"
 	class={cn(
-		"bg-popover text-popover-foreground z-50 min-w-[8rem] overflow-hidden rounded-md border p-1 shadow-md focus:outline-none",
+		"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-(--bits-context-menu-content-transform-origin) z-50 min-w-[8rem] overflow-hidden rounded-md border p-1 shadow-lg",
 		className
 	)}
 	{...restProps}
--- a/website/src/lib/components/ui/context-menu/context-menu-sub-trigger.svelte
+++ b/website/src/lib/components/ui/context-menu/context-menu-sub-trigger.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
-	import { ContextMenu as ContextMenuPrimitive, type WithoutChild } from "bits-ui";
-	import ChevronRight from "@lucide/svelte/icons/chevron-right";
-	import { cn } from "$lib/utils.js";
+	import { ContextMenu as ContextMenuPrimitive } from "bits-ui";
+	import ChevronRightIcon from "@lucide/svelte/icons/chevron-right";
+	import { cn, type WithoutChild } from "$lib/utils.js";

 	let {
 		ref = $bindable(null),
@@ -16,13 +16,14 @@

 <ContextMenuPrimitive.SubTrigger
 	bind:ref
+	data-slot="context-menu-sub-trigger"
+	data-inset={inset}
 	class={cn(
-		"data-[highlighted]:bg-accent data-[state=open]:bg-accent 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",
-		inset && "pl-8",
+		"data-highlighted:bg-accent data-highlighted:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground outline-hidden [&_svg:not([class*='text-'])]:text-muted-foreground flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm data-[disabled]:pointer-events-none data-[inset]:pl-8 data-[disabled]:opacity-50 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
 		className
 	)}
 	{...restProps}
 >
 	{@render children?.()}
-	<ChevronRight class="ml-auto size-4" />
+	<ChevronRightIcon class="ml-auto" />
 </ContextMenuPrimitive.SubTrigger>
--- a/website/src/lib/components/ui/context-menu/context-menu-trigger.svelte
+++ b/website/src/lib/components/ui/context-menu/context-menu-trigger.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { ContextMenu as ContextMenuPrimitive } from "bits-ui";
+
+	let { ref = $bindable(null), ...restProps }: ContextMenuPrimitive.TriggerProps = $props();
+</script>
+
+<ContextMenuPrimitive.Trigger bind:ref data-slot="context-menu-trigger" {...restProps} />
--- a/website/src/lib/components/ui/context-menu/index.ts
+++ b/website/src/lib/components/ui/context-menu/index.ts
@@ -1,5 +1,8 @@
 import { ContextMenu as ContextMenuPrimitive } from "bits-ui";

+import Trigger from "./context-menu-trigger.svelte";
+import Group from "./context-menu-group.svelte";
+import RadioGroup from "./context-menu-radio-group.svelte";
 import Item from "./context-menu-item.svelte";
 import GroupHeading from "./context-menu-group-heading.svelte";
 import Content from "./context-menu-content.svelte";
@@ -9,18 +12,16 @@ import Separator from "./context-menu-separator.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 Label from "./context-menu-label.svelte";
 const Sub = ContextMenuPrimitive.Sub;
 const Root = ContextMenuPrimitive.Root;
-const Trigger = ContextMenuPrimitive.Trigger;
-const Group = ContextMenuPrimitive.Group;
-const RadioGroup = ContextMenuPrimitive.RadioGroup;

 export {
 	Sub,
 	Root,
 	Item,
 	GroupHeading,
+	Label,
 	Group,
 	Trigger,
 	Content,
@@ -46,4 +47,5 @@ export {
 	SubContent as ContextMenuSubContent,
 	SubTrigger as ContextMenuSubTrigger,
 	CheckboxItem as ContextMenuCheckboxItem,
+	Label as ContextMenuLabel,
 };
--- a/website/src/lib/components/ui/date-picker/DatePicker.svelte
+++ b/website/src/lib/components/ui/date-picker/DatePicker.svelte
@@ -1,39 +1,39 @@
 <script lang="ts">
-	import CalendarIcon from 'lucide-svelte/icons/calendar';
-	import { DateFormatter, type DateValue, getLocalTimeZone } from '@internationalized/date';
-	import { cn } from '$lib/utils.js';
-	import { Button } from '$lib/components/ui/button/index.js';
-	import { Calendar } from '$lib/components/ui/calendar/index.js';
-	import * as Popover from '$lib/components/ui/popover/index.js';
+    import { CalendarIcon } from '@lucide/svelte';
+    import { DateFormatter, type DateValue, getLocalTimeZone } from '@internationalized/date';
+    import { cn } from '$lib/utils.js';
+    import { Button } from '$lib/components/ui/button/index.js';
+    import { Calendar } from '$lib/components/ui/calendar/index.js';
+    import * as Popover from '$lib/components/ui/popover/index.js';

-	export let value: DateValue | undefined = undefined;
-	export let placeholder: string = 'Pick a date';
-	export let locale = 'en';
-	export let disabled: boolean = false;
-	export let onValueChange: any;
+    export let value: DateValue | undefined = undefined;
+    export let placeholder: string = 'Pick a date';
+    export let locale = 'en';
+    export let disabled: boolean = false;
+    export let onValueChange: any;

-	const df = new DateFormatter(locale, {
-		dateStyle: 'long'
-	});
+    const df = new DateFormatter(locale, {
+        dateStyle: 'long',
+    });
 </script>

 <Popover.Root>
-	<Popover.Trigger asChild let:builder>
-		<Button
-			variant="outline"
-			class={cn(
-				'w-[280px] justify-start text-left font-normal',
-				!value && 'text-muted-foreground',
-				$$props.class
-			)}
-			{disabled}
-			builders={[builder]}
-		>
-			<CalendarIcon class="mr-2 h-4 w-4" />
-			{value ? df.format(value.toDate(getLocalTimeZone())) : placeholder}
-		</Button>
-	</Popover.Trigger>
-	<Popover.Content class="w-auto p-0">
-		<Calendar bind:value initialFocus {locale} {onValueChange} />
-	</Popover.Content>
+    <Popover.Trigger asChild let:builder>
+        <Button
+            variant="outline"
+            class={cn(
+                'w-[280px] justify-start text-left font-normal',
+                !value && 'text-muted-foreground',
+                $$props.class
+            )}
+            {disabled}
+            builders={[builder]}
+        >
+            <CalendarIcon class="mr-2 h-4 w-4" />
+            {value ? df.format(value.toDate(getLocalTimeZone())) : placeholder}
+        </Button>
+    </Popover.Trigger>
+    <Popover.Content class="w-auto p-0">
+        <Calendar bind:value initialFocus {locale} {onValueChange} />
+    </Popover.Content>
 </Popover.Root>
--- a/website/src/lib/components/ui/dialog/dialog-close.svelte
+++ b/website/src/lib/components/ui/dialog/dialog-close.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { Dialog as DialogPrimitive } from "bits-ui";
+
+	let { ref = $bindable(null), ...restProps }: DialogPrimitive.CloseProps = $props();
+</script>
+
+<DialogPrimitive.Close bind:ref data-slot="dialog-close" {...restProps} />
--- a/website/src/lib/components/ui/dialog/dialog-content.svelte
+++ b/website/src/lib/components/ui/dialog/dialog-content.svelte
@@ -0,0 +1,43 @@
+<script lang="ts">
+	import { Dialog as DialogPrimitive } from "bits-ui";
+	import XIcon from "@lucide/svelte/icons/x";
+	import type { Snippet } from "svelte";
+	import * as Dialog from "./index.js";
+	import { cn, type WithoutChildrenOrChild } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		portalProps,
+		children,
+		showCloseButton = true,
+		...restProps
+	}: WithoutChildrenOrChild<DialogPrimitive.ContentProps> & {
+		portalProps?: DialogPrimitive.PortalProps;
+		children: Snippet;
+		showCloseButton?: boolean;
+	} = $props();
+</script>
+
+<Dialog.Portal {...portalProps}>
+	<Dialog.Overlay />
+	<DialogPrimitive.Content
+		bind:ref
+		data-slot="dialog-content"
+		class={cn(
+			"bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed left-[50%] top-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg",
+			className
+		)}
+		{...restProps}
+	>
+		{@render children?.()}
+		{#if showCloseButton}
+			<DialogPrimitive.Close
+				class="ring-offset-background focus:ring-ring rounded-xs focus:outline-hidden absolute right-4 top-4 opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 disabled:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0"
+			>
+				<XIcon />
+				<span class="sr-only">Close</span>
+			</DialogPrimitive.Close>
+		{/if}
+	</DialogPrimitive.Content>
+</Dialog.Portal>
--- a/website/src/lib/components/ui/dialog/dialog-description.svelte
+++ b/website/src/lib/components/ui/dialog/dialog-description.svelte
@@ -0,0 +1,17 @@
+<script lang="ts">
+	import { Dialog as DialogPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: DialogPrimitive.DescriptionProps = $props();
+</script>
+
+<DialogPrimitive.Description
+	bind:ref
+	data-slot="dialog-description"
+	class={cn("text-muted-foreground text-sm", className)}
+	{...restProps}
+/>
--- a/website/src/lib/components/ui/dialog/dialog-footer.svelte
+++ b/website/src/lib/components/ui/dialog/dialog-footer.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from "$lib/utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="dialog-footer"
+	class={cn("flex flex-col-reverse gap-2 sm:flex-row sm:justify-end", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>
--- a/website/src/lib/components/ui/dialog/dialog-header.svelte
+++ b/website/src/lib/components/ui/dialog/dialog-header.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn, type WithElementRef } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="dialog-header"
+	class={cn("flex flex-col gap-2 text-center sm:text-left", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>
--- a/website/src/lib/components/ui/dialog/dialog-overlay.svelte
+++ b/website/src/lib/components/ui/dialog/dialog-overlay.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { Dialog as DialogPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: DialogPrimitive.OverlayProps = $props();
+</script>
+
+<DialogPrimitive.Overlay
+	bind:ref
+	data-slot="dialog-overlay"
+	class={cn(
+		"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
+		className
+	)}
+	{...restProps}
+/>
--- a/website/src/lib/components/ui/dialog/dialog-title.svelte
+++ b/website/src/lib/components/ui/dialog/dialog-title.svelte
@@ -0,0 +1,17 @@
+<script lang="ts">
+	import { Dialog as DialogPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: DialogPrimitive.TitleProps = $props();
+</script>
+
+<DialogPrimitive.Title
+	bind:ref
+	data-slot="dialog-title"
+	class={cn("text-lg font-semibold leading-none", className)}
+	{...restProps}
+/>
--- a/website/src/lib/components/ui/dialog/dialog-trigger.svelte
+++ b/website/src/lib/components/ui/dialog/dialog-trigger.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { Dialog as DialogPrimitive } from "bits-ui";
+
+	let { ref = $bindable(null), ...restProps }: DialogPrimitive.TriggerProps = $props();
+</script>
+
+<DialogPrimitive.Trigger bind:ref data-slot="dialog-trigger" {...restProps} />
--- a/website/src/lib/components/ui/dialog/index.ts
+++ b/website/src/lib/components/ui/dialog/index.ts
@@ -0,0 +1,37 @@
+import { Dialog as DialogPrimitive } from "bits-ui";
+
+import Title from "./dialog-title.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 Trigger from "./dialog-trigger.svelte";
+import Close from "./dialog-close.svelte";
+
+const Root = DialogPrimitive.Root;
+const Portal = DialogPrimitive.Portal;
+
+export {
+	Root,
+	Title,
+	Portal,
+	Footer,
+	Header,
+	Trigger,
+	Overlay,
+	Content,
+	Description,
+	Close,
+	//
+	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,
+	Close as DialogClose,
+};
--- a/website/src/lib/components/ui/dropdown-menu/dropdown-menu-checkbox-item.svelte
+++ b/website/src/lib/components/ui/dropdown-menu/dropdown-menu-checkbox-item.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
-	import { DropdownMenu as DropdownMenuPrimitive, type WithoutChildrenOrChild } from "bits-ui";
-	import Check from "@lucide/svelte/icons/check";
-	import Minus from "@lucide/svelte/icons/minus";
-	import { cn } from "$lib/utils.js";
+	import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
+	import CheckIcon from "@lucide/svelte/icons/check";
+	import MinusIcon from "@lucide/svelte/icons/minus";
+	import { cn, type WithoutChildrenOrChild } from "$lib/utils.js";
 	import type { Snippet } from "svelte";

 	let {
@@ -21,18 +21,19 @@
 	bind:ref
 	bind:checked
 	bind:indeterminate
+	data-slot="dropdown-menu-checkbox-item"
 	class={cn(
-		"data-[highlighted]:bg-accent 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-[disabled]:opacity-50",
+		"focus:bg-accent focus:text-accent-foreground outline-hidden relative flex cursor-default select-none items-center gap-2 rounded-sm py-1.5 pl-8 pr-2 text-sm data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
 		className
 	)}
 	{...restProps}
 >
 	{#snippet children({ checked, indeterminate })}
-		<span class="absolute left-2 flex size-3.5 items-center justify-center">
+		<span class="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
 			{#if indeterminate}
-				<Minus class="size-4" />
+				<MinusIcon class="size-4" />
 			{:else}
-				<Check class={cn("size-4", !checked && "text-transparent")} />
+				<CheckIcon class={cn("size-4", !checked && "text-transparent")} />
 			{/if}
 		</span>
 		{@render childrenProp?.()}
--- a/website/src/lib/components/ui/dropdown-menu/dropdown-menu-content.svelte
+++ b/website/src/lib/components/ui/dropdown-menu/dropdown-menu-content.svelte
@@ -16,9 +16,10 @@
 <DropdownMenuPrimitive.Portal {...portalProps}>
 	<DropdownMenuPrimitive.Content
 		bind:ref
+		data-slot="dropdown-menu-content"
 		{sideOffset}
 		class={cn(
-			"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] overflow-hidden rounded-md border p-1 shadow-md outline-none",
+			"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 max-h-(--radix-dropdown-menu-content-available-height) origin-(--radix-dropdown-menu-content-transform-origin) z-50 min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-md border p-1 shadow-md",
 			className
 		)}
 		{...restProps}
--- a/website/src/lib/components/ui/dropdown-menu/dropdown-menu-group-heading.svelte
+++ b/website/src/lib/components/ui/dropdown-menu/dropdown-menu-group-heading.svelte
@@ -1,19 +1,22 @@
 <script lang="ts">
 	import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
 	import { cn } from "$lib/utils.js";
+	import type { ComponentProps } from "svelte";

 	let {
 		ref = $bindable(null),
 		class: className,
 		inset,
 		...restProps
-	}: DropdownMenuPrimitive.GroupHeadingProps & {
+	}: ComponentProps<typeof DropdownMenuPrimitive.GroupHeading> & {
 		inset?: boolean;
 	} = $props();
 </script>

 <DropdownMenuPrimitive.GroupHeading
 	bind:ref
-	class={cn("px-2 py-1.5 text-sm font-semibold", inset && "pl-8", className)}
+	data-slot="dropdown-menu-group-heading"
+	data-inset={inset}
+	class={cn("px-2 py-1.5 text-sm font-semibold data-[inset]:pl-8", className)}
 	{...restProps}
 />
--- a/website/src/lib/components/ui/dropdown-menu/dropdown-menu-group.svelte
+++ b/website/src/lib/components/ui/dropdown-menu/dropdown-menu-group.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
+
+	let { ref = $bindable(null), ...restProps }: DropdownMenuPrimitive.GroupProps = $props();
+</script>
+
+<DropdownMenuPrimitive.Group bind:ref data-slot="dropdown-menu-group" {...restProps} />
--- a/website/src/lib/components/ui/dropdown-menu/dropdown-menu-item.svelte
+++ b/website/src/lib/components/ui/dropdown-menu/dropdown-menu-item.svelte
@@ -6,17 +6,21 @@
 		ref = $bindable(null),
 		class: className,
 		inset,
+		variant = "default",
 		...restProps
 	}: DropdownMenuPrimitive.ItemProps & {
 		inset?: boolean;
+		variant?: "default" | "destructive";
 	} = $props();
 </script>

 <DropdownMenuPrimitive.Item
 	bind:ref
+	data-slot="dropdown-menu-item"
+	data-inset={inset}
+	data-variant={variant}
 	class={cn(
-		"data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
-		inset && "pl-8",
+		"data-highlighted:bg-accent data-highlighted:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:data-highlighted:bg-destructive/10 dark:data-[variant=destructive]:data-highlighted:bg-destructive/20 data-[variant=destructive]:data-highlighted:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground outline-hidden relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm data-[disabled]:pointer-events-none data-[inset]:pl-8 data-[disabled]:opacity-50 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
 		className
 	)}
 	{...restProps}
--- a/website/src/lib/components/ui/dropdown-menu/dropdown-menu-label.svelte
+++ b/website/src/lib/components/ui/dropdown-menu/dropdown-menu-label.svelte
@@ -1,6 +1,5 @@
 <script lang="ts">
-	import { cn } from "$lib/utils.js";
-	import { type WithElementRef } from "bits-ui";
+	import { cn, type WithElementRef } from "$lib/utils.js";
 	import type { HTMLAttributes } from "svelte/elements";

 	let {
@@ -16,7 +15,9 @@

 <div
 	bind:this={ref}
-	class={cn("px-2 py-1.5 text-sm font-semibold", inset && "pl-8", className)}
+	data-slot="dropdown-menu-label"
+	data-inset={inset}
+	class={cn("px-2 py-1.5 text-sm font-semibold data-[inset]:pl-8", className)}
 	{...restProps}
 >
 	{@render children?.()}
--- a/website/src/lib/components/ui/dropdown-menu/dropdown-menu-radio-group.svelte
+++ b/website/src/lib/components/ui/dropdown-menu/dropdown-menu-radio-group.svelte
@@ -1,11 +1,16 @@
 <script lang="ts">
 	import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";

-	type $$Props = DropdownMenuPrimitive.RadioGroupProps;
-
-	export let value: $$Props["value"] = undefined;
+	let {
+		ref = $bindable(null),
+		value = $bindable(),
+		...restProps
+	}: DropdownMenuPrimitive.RadioGroupProps = $props();
 </script>

-<DropdownMenuPrimitive.RadioGroup {...$$restProps} bind:value>
-	<slot />
-</DropdownMenuPrimitive.RadioGroup>
+<DropdownMenuPrimitive.RadioGroup
+	bind:ref
+	bind:value
+	data-slot="dropdown-menu-radio-group"
+	{...restProps}
+/>
--- a/website/src/lib/components/ui/dropdown-menu/dropdown-menu-radio-item.svelte
+++ b/website/src/lib/components/ui/dropdown-menu/dropdown-menu-radio-item.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
-	import { DropdownMenu as DropdownMenuPrimitive, type WithoutChild } from "bits-ui";
-	import Circle from "@lucide/svelte/icons/circle";
-	import { cn } from "$lib/utils.js";
+	import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
+	import CircleIcon from "@lucide/svelte/icons/circle";
+	import { cn, type WithoutChild } from "$lib/utils.js";

 	let {
 		ref = $bindable(null),
@@ -13,16 +13,17 @@

 <DropdownMenuPrimitive.RadioItem
 	bind:ref
+	data-slot="dropdown-menu-radio-item"
 	class={cn(
-		"data-[highlighted]:bg-accent 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-[disabled]:opacity-50",
+		"focus:bg-accent focus:text-accent-foreground outline-hidden relative flex cursor-default select-none items-center gap-2 rounded-sm py-1.5 pl-8 pr-2 text-sm data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
 		className
 	)}
 	{...restProps}
 >
 	{#snippet children({ checked })}
-		<span class="absolute left-2 flex size-3.5 items-center justify-center">
+		<span class="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
 			{#if checked}
-				<Circle class="size-2 fill-current" />
+				<CircleIcon class="size-2 fill-current" />
 			{/if}
 		</span>
 		{@render childrenProp?.({ checked })}
--- a/website/src/lib/components/ui/dropdown-menu/dropdown-menu-separator.svelte
+++ b/website/src/lib/components/ui/dropdown-menu/dropdown-menu-separator.svelte
@@ -11,6 +11,7 @@

 <DropdownMenuPrimitive.Separator
 	bind:ref
-	class={cn("bg-muted -mx-1 my-1 h-px", className)}
+	data-slot="dropdown-menu-separator"
+	class={cn("bg-border -mx-1 my-1 h-px", className)}
 	{...restProps}
 />
--- a/website/src/lib/components/ui/dropdown-menu/dropdown-menu-shortcut.svelte
+++ b/website/src/lib/components/ui/dropdown-menu/dropdown-menu-shortcut.svelte
@@ -1,7 +1,6 @@
 <script lang="ts">
 	import type { HTMLAttributes } from "svelte/elements";
-	import { type WithElementRef } from "bits-ui";
-	import { cn } from "$lib/utils.js";
+	import { cn, type WithElementRef } from "$lib/utils.js";

 	let {
 		ref = $bindable(null),
@@ -13,7 +12,8 @@

 <span
 	bind:this={ref}
-	class={cn("ml-auto text-xs tracking-widest opacity-60", className)}
+	data-slot="dropdown-menu-shortcut"
+	class={cn("text-muted-foreground ml-auto text-xs tracking-widest", className)}
 	{...restProps}
 >
 	{@render children?.()}
--- a/website/src/lib/components/ui/dropdown-menu/dropdown-menu-sub-content.svelte
+++ b/website/src/lib/components/ui/dropdown-menu/dropdown-menu-sub-content.svelte
@@ -11,8 +11,9 @@

 <DropdownMenuPrimitive.SubContent
 	bind:ref
+	data-slot="dropdown-menu-sub-content"
 	class={cn(
-		"bg-popover text-popover-foreground z-50 min-w-[8rem] rounded-md border p-1 shadow-lg focus:outline-none",
+		"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-(--radix-dropdown-menu-content-transform-origin) z-50 min-w-[8rem] overflow-hidden rounded-md border p-1 shadow-lg",
 		className
 	)}
 	{...restProps}
--- a/website/src/lib/components/ui/dropdown-menu/dropdown-menu-sub-trigger.svelte
+++ b/website/src/lib/components/ui/dropdown-menu/dropdown-menu-sub-trigger.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
-	import ChevronRight from "@lucide/svelte/icons/chevron-right";
+	import ChevronRightIcon from "@lucide/svelte/icons/chevron-right";
 	import { cn } from "$lib/utils.js";

 	let {
@@ -16,13 +16,14 @@

 <DropdownMenuPrimitive.SubTrigger
 	bind:ref
+	data-slot="dropdown-menu-sub-trigger"
+	data-inset={inset}
 	class={cn(
-		"data-[highlighted]:bg-accent data-[state=open]:bg-accent flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
-		inset && "pl-8",
+		"data-highlighted:bg-accent data-highlighted:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground outline-hidden [&_svg:not([class*='text-'])]:text-muted-foreground flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm data-[disabled]:pointer-events-none data-[inset]:pl-8 data-[disabled]:opacity-50 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
 		className
 	)}
 	{...restProps}
 >
 	{@render children?.()}
-	<ChevronRight class="ml-auto" />
+	<ChevronRightIcon class="ml-auto size-4" />
 </DropdownMenuPrimitive.SubTrigger>
--- a/website/src/lib/components/ui/dropdown-menu/dropdown-menu-trigger.svelte
+++ b/website/src/lib/components/ui/dropdown-menu/dropdown-menu-trigger.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
+
+	let { ref = $bindable(null), ...restProps }: DropdownMenuPrimitive.TriggerProps = $props();
+</script>
+
+<DropdownMenuPrimitive.Trigger bind:ref data-slot="dropdown-menu-trigger" {...restProps} />
--- a/website/src/lib/components/ui/dropdown-menu/index.ts
+++ b/website/src/lib/components/ui/dropdown-menu/index.ts
@@ -1,20 +1,19 @@
 import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
 import CheckboxItem from "./dropdown-menu-checkbox-item.svelte";
 import Content from "./dropdown-menu-content.svelte";
-import GroupHeading from "./dropdown-menu-group-heading.svelte";
+import Group from "./dropdown-menu-group.svelte";
 import Item from "./dropdown-menu-item.svelte";
 import Label from "./dropdown-menu-label.svelte";
+import RadioGroup from "./dropdown-menu-radio-group.svelte";
 import RadioItem from "./dropdown-menu-radio-item.svelte";
 import Separator from "./dropdown-menu-separator.svelte";
 import Shortcut from "./dropdown-menu-shortcut.svelte";
+import Trigger from "./dropdown-menu-trigger.svelte";
 import SubContent from "./dropdown-menu-sub-content.svelte";
 import SubTrigger from "./dropdown-menu-sub-trigger.svelte";
-
+import GroupHeading from "./dropdown-menu-group-heading.svelte";
 const Sub = DropdownMenuPrimitive.Sub;
 const Root = DropdownMenuPrimitive.Root;
-const Trigger = DropdownMenuPrimitive.Trigger;
-const Group = DropdownMenuPrimitive.Group;
-const RadioGroup = DropdownMenuPrimitive.RadioGroup;

 export {
 	CheckboxItem,
@@ -23,7 +22,6 @@ export {
 	CheckboxItem as DropdownMenuCheckboxItem,
 	Content as DropdownMenuContent,
 	Group as DropdownMenuGroup,
-	GroupHeading as DropdownMenuGroupHeading,
 	Item as DropdownMenuItem,
 	Label as DropdownMenuLabel,
 	RadioGroup as DropdownMenuRadioGroup,
@@ -34,6 +32,7 @@ export {
 	SubContent as DropdownMenuSubContent,
 	SubTrigger as DropdownMenuSubTrigger,
 	Trigger as DropdownMenuTrigger,
+	GroupHeading as DropdownMenuGroupHeading,
 	Group,
 	GroupHeading,
 	Item,
--- a/website/src/lib/components/ui/input/input.svelte
+++ b/website/src/lib/components/ui/input/input.svelte
@@ -1,7 +1,6 @@
 <script lang="ts">
 	import type { HTMLInputAttributes, HTMLInputTypeAttribute } from "svelte/elements";
-	import type { WithElementRef } from "bits-ui";
-	import { cn } from "$lib/utils.js";
+	import { cn, type WithElementRef } from "$lib/utils.js";

 	type InputType = Exclude<HTMLInputTypeAttribute, "file">;

@@ -23,8 +22,11 @@
 {#if type === "file"}
 	<input
 		bind:this={ref}
+		data-slot="input"
 		class={cn(
-			"border-input bg-background ring-offset-background placeholder:text-muted-foreground focus-visible:ring-ring flex h-10 w-full rounded-md border px-3 py-2 text-base file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+			"selection:bg-primary dark:bg-input/30 selection:text-primary-foreground border-input ring-offset-background placeholder:text-muted-foreground shadow-xs flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 pt-1.5 text-sm font-medium outline-none transition-[color,box-shadow] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+			"focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
+			"aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
 			className
 		)}
 		type="file"
@@ -35,8 +37,11 @@
 {:else}
 	<input
 		bind:this={ref}
+		data-slot="input"
 		class={cn(
-			"border-input bg-background ring-offset-background placeholder:text-muted-foreground focus-visible:ring-ring flex h-10 w-full rounded-md border px-3 py-2 text-base file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+			"border-input bg-background selection:bg-primary dark:bg-input/30 selection:text-primary-foreground ring-offset-background placeholder:text-muted-foreground shadow-xs flex h-9 w-full min-w-0 rounded-md border px-3 py-1 text-base outline-none transition-[color,box-shadow] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+			"focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
+			"aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
 			className
 		)}
 		{type}
--- a/website/src/lib/components/ui/label/label.svelte
+++ b/website/src/lib/components/ui/label/label.svelte
@@ -11,8 +11,9 @@

 <LabelPrimitive.Root
 	bind:ref
+	data-slot="label"
 	class={cn(
-		"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
+		"flex select-none items-center gap-2 text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-50 group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50",
 		className
 	)}
 	{...restProps}
--- a/website/src/lib/components/ui/menubar/index.ts
+++ b/website/src/lib/components/ui/menubar/index.ts
@@ -3,16 +3,17 @@ 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 GroupHeading from "./menubar-group-heading.svelte";
+import Group from "./menubar-group.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 Label from "./menubar-label.svelte";
+import GroupHeading from "./menubar-group-heading.svelte";

 const Menu = MenubarPrimitive.Menu;
-const Group = MenubarPrimitive.Group;
 const Sub = MenubarPrimitive.Sub;
 const RadioGroup = MenubarPrimitive.RadioGroup;

@@ -21,7 +22,6 @@ export {
 	CheckboxItem,
 	Content,
 	Item,
-	GroupHeading,
 	RadioItem,
 	Separator,
 	Shortcut,
@@ -32,12 +32,13 @@ export {
 	Group,
 	Sub,
 	RadioGroup,
+	Label,
+	GroupHeading,
 	//
 	Root as Menubar,
 	CheckboxItem as MenubarCheckboxItem,
 	Content as MenubarContent,
 	Item as MenubarItem,
-	GroupHeading as MenubarGroupHeading,
 	RadioItem as MenubarRadioItem,
 	Separator as MenubarSeparator,
 	Shortcut as MenubarShortcut,
@@ -48,4 +49,6 @@ export {
 	Group as MenubarGroup,
 	Sub as MenubarSub,
 	RadioGroup as MenubarRadioGroup,
+	Label as MenubarLabel,
+	GroupHeading as MenubarGroupHeading,
 };
--- a/website/src/lib/components/ui/menubar/menubar-checkbox-item.svelte
+++ b/website/src/lib/components/ui/menubar/menubar-checkbox-item.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
-	import { Menubar as MenubarPrimitive, type WithoutChildrenOrChild } from "bits-ui";
-	import Check from "@lucide/svelte/icons/check";
-	import Minus from "@lucide/svelte/icons/minus";
-	import { cn } from "$lib/utils.js";
+	import { Menubar as MenubarPrimitive } from "bits-ui";
+	import CheckIcon from "@lucide/svelte/icons/check";
+	import MinusIcon from "@lucide/svelte/icons/minus";
+	import { cn, type WithoutChildrenOrChild } from "$lib/utils.js";
 	import type { Snippet } from "svelte";

 	let {
@@ -21,18 +21,19 @@
 	bind:ref
 	bind:checked
 	bind:indeterminate
+	data-slot="menubar-checkbox-item"
 	class={cn(
-		"data-[highlighted]:bg-accent 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-[disabled]:opacity-50",
+		"focus:bg-accent focus:text-accent-foreground rounded-xs outline-hidden relative flex cursor-default select-none items-center gap-2 py-1.5 pl-8 pr-2 text-sm data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
 		className
 	)}
 	{...restProps}
 >
 	{#snippet children({ checked, indeterminate })}
-		<span class="absolute left-2 flex size-3.5 items-center justify-center">
+		<span class="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
 			{#if indeterminate}
-				<Minus class="size-4" />
+				<MinusIcon class="size-4" />
 			{:else}
-				<Check class={cn("size-4", !checked && "text-transparent")} />
+				<CheckIcon class={cn("size-4", !checked && "text-transparent")} />
 			{/if}
 		</span>
 		{@render childrenProp?.()}
--- a/website/src/lib/components/ui/menubar/menubar-content.svelte
+++ b/website/src/lib/components/ui/menubar/menubar-content.svelte
@@ -19,12 +19,13 @@
 <MenubarPrimitive.Portal {...portalProps}>
 	<MenubarPrimitive.Content
 		bind:ref
+		data-slot="menubar-content"
 		{sideOffset}
 		{align}
 		{alignOffset}
 		{side}
 		class={cn(
-			"bg-popover text-popover-foreground z-50 min-w-[12rem] rounded-md border p-1 shadow-md focus:outline-none",
+			"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-(--bits-menubar-content-transform-origin) z-50 min-w-[12rem] overflow-hidden rounded-md border p-1 shadow-md",
 			className
 		)}
 		{...restProps}
--- a/website/src/lib/components/ui/menubar/menubar-group-heading.svelte
+++ b/website/src/lib/components/ui/menubar/menubar-group-heading.svelte
@@ -1,19 +1,22 @@
 <script lang="ts">
-	import { Menubar as MenubarPrimitive } from "bits-ui";
 	import { cn } from "$lib/utils.js";
+	import { Menubar as MenubarPrimitive } from "bits-ui";
+	import type { ComponentProps } from "svelte";

 	let {
 		ref = $bindable(null),
+		inset,
 		class: className,
-		inset = undefined,
 		...restProps
-	}: MenubarPrimitive.GroupHeadingProps & {
+	}: ComponentProps<typeof MenubarPrimitive.GroupHeading> & {
 		inset?: boolean;
 	} = $props();
 </script>

 <MenubarPrimitive.GroupHeading
 	bind:ref
-	class={cn("px-2 py-1.5 text-sm font-semibold", inset && "pl-8", className)}
+	data-slot="menubar-group-heading"
+	data-inset={inset}
+	class={cn("px-2 py-1.5 text-sm font-medium data-[inset]:pl-8", className)}
 	{...restProps}
 />
--- a/website/src/lib/components/ui/menubar/menubar-group.svelte
+++ b/website/src/lib/components/ui/menubar/menubar-group.svelte
@@ -0,0 +1,12 @@
+<script lang="ts">
+	import { Menubar as MenubarPrimitive } from "bits-ui";
+
+	let {
+		ref = $bindable(null),
+		...restProps
+	}: MenubarPrimitive.GroupProps & {
+		inset?: boolean;
+	} = $props();
+</script>
+
+<MenubarPrimitive.Group bind:ref data-slot="menubar-group" {...restProps} />
--- a/website/src/lib/components/ui/menubar/menubar-item.svelte
+++ b/website/src/lib/components/ui/menubar/menubar-item.svelte
@@ -6,17 +6,21 @@
 		ref = $bindable(null),
 		class: className,
 		inset = undefined,
+		variant = "default",
 		...restProps
 	}: MenubarPrimitive.ItemProps & {
 		inset?: boolean;
+		variant?: "default" | "destructive";
 	} = $props();
 </script>

 <MenubarPrimitive.Item
 	bind:ref
+	data-slot="menubar-item"
+	data-inset={inset}
+	data-variant={variant}
 	class={cn(
-		"data-[highlighted]:bg-accent 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-[disabled]:opacity-50",
-		inset && "pl-8",
+		"focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground outline-hidden relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm data-[disabled]:pointer-events-none data-[inset]:pl-8 data-[disabled]:opacity-50 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
 		className
 	)}
 	{...restProps}
--- a/website/src/lib/components/ui/menubar/menubar-label.svelte
+++ b/website/src/lib/components/ui/menubar/menubar-label.svelte
@@ -1,19 +1,25 @@
 <script lang="ts">
-	import { Menubar as MenubarPrimitive } from "bits-ui";
 	import { cn } from "$lib/utils.js";
+	import { type WithElementRef } from "bits-ui";
+	import type { HTMLAttributes } from "svelte/elements";

-	type $$Props = MenubarPrimitive.LabelProps & {
+	let {
+		ref = $bindable(null),
+		inset,
+		children,
+		class: className,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLElement>> & {
 		inset?: boolean;
-	};
-
-	let className: $$Props["class"] = undefined;
-	export let inset: $$Props["inset"] = undefined;
-	export { className as class };
+	} = $props();
 </script>

-<MenubarPrimitive.Label
-	class={cn("px-2 py-1.5 text-sm font-semibold", inset && "pl-8", className)}
-	{...$$restProps}
+<div
+	bind:this={ref}
+	data-slot="menubar-label"
+	data-inset={inset}
+	class={cn("px-2 py-1.5 text-sm font-medium data-[inset]:pl-8", className)}
+	{...restProps}
 >
-	<slot />
-</MenubarPrimitive.Label>
+	{@render children?.()}
+</div>
--- a/website/src/lib/components/ui/menubar/menubar-radio-item.svelte
+++ b/website/src/lib/components/ui/menubar/menubar-radio-item.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
-	import { Menubar as MenubarPrimitive, type WithoutChild } from "bits-ui";
-	import Circle from "@lucide/svelte/icons/circle";
-	import { cn } from "$lib/utils.js";
+	import { Menubar as MenubarPrimitive } from "bits-ui";
+	import CircleIcon from "@lucide/svelte/icons/circle";
+	import { cn, type WithoutChild } from "$lib/utils.js";

 	let {
 		ref = $bindable(null),
@@ -13,16 +13,17 @@

 <MenubarPrimitive.RadioItem
 	bind:ref
+	data-slot="menubar-radio-item"
 	class={cn(
-		"data-[highlighted]:bg-accent 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-[disabled]:opacity-50",
+		"focus:bg-accent focus:text-accent-foreground rounded-xs outline-hidden relative flex cursor-default select-none items-center gap-2 py-1.5 pl-8 pr-2 text-sm data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
 		className
 	)}
 	{...restProps}
 >
 	{#snippet children({ checked })}
-		<span class="absolute left-2 flex size-3.5 items-center justify-center">
+		<span class="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
 			{#if checked}
-				<Circle class="size-2 fill-current" />
+				<CircleIcon class="size-2 fill-current" />
 			{/if}
 		</span>
 		{@render childrenProp?.({ checked })}
--- a/website/src/lib/components/ui/menubar/menubar-separator.svelte
+++ b/website/src/lib/components/ui/menubar/menubar-separator.svelte
@@ -11,6 +11,7 @@

 <MenubarPrimitive.Separator
 	bind:ref
-	class={cn("bg-muted -mx-1 my-1 h-px", className)}
+	data-slot="menubar-separator"
+	class={cn("bg-border -mx-1 my-1 h-px", className)}
 	{...restProps}
 />
--- a/website/src/lib/components/ui/menubar/menubar-shortcut.svelte
+++ b/website/src/lib/components/ui/menubar/menubar-shortcut.svelte
@@ -1,7 +1,6 @@
 <script lang="ts">
 	import type { HTMLAttributes } from "svelte/elements";
-	import type { WithElementRef } from "bits-ui";
-	import { cn } from "$lib/utils.js";
+	import { cn, type WithElementRef } from "$lib/utils.js";

 	let {
 		ref = $bindable(null),
@@ -13,6 +12,7 @@

 <span
 	bind:this={ref}
+	data-slot="menubar-shortcut"
 	class={cn("text-muted-foreground ml-auto text-xs tracking-widest", className)}
 	{...restProps}
 >
--- a/website/src/lib/components/ui/menubar/menubar-sub-content.svelte
+++ b/website/src/lib/components/ui/menubar/menubar-sub-content.svelte
@@ -11,8 +11,9 @@

 <MenubarPrimitive.SubContent
 	bind:ref
+	data-slot="menubar-sub-content"
 	class={cn(
-		"bg-popover text-popover-foreground z-50 min-w-max rounded-md border p-1 focus:outline-none",
+		"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-(--bits-menubar-content-transform-origin) z-50 min-w-[8rem] overflow-hidden rounded-md border p-1 shadow-lg",
 		className
 	)}
 	{...restProps}
--- a/website/src/lib/components/ui/menubar/menubar-sub-trigger.svelte
+++ b/website/src/lib/components/ui/menubar/menubar-sub-trigger.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
-	import { Menubar as MenubarPrimitive, type WithoutChild } from "bits-ui";
-	import ChevronRight from "@lucide/svelte/icons/chevron-right";
-	import { cn } from "$lib/utils.js";
+	import { Menubar as MenubarPrimitive } from "bits-ui";
+	import ChevronRightIcon from "@lucide/svelte/icons/chevron-right";
+	import { cn, type WithoutChild } from "$lib/utils.js";

 	let {
 		ref = $bindable(null),
@@ -16,13 +16,14 @@

 <MenubarPrimitive.SubTrigger
 	bind:ref
+	data-slot="menubar-sub-trigger"
+	data-inset={inset}
 	class={cn(
-		"data-[highlighted]:bg-accent data-[state=open]:bg-accent 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-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-		inset && "pl-8",
+		"focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent 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-[inset]:pl-8",
 		className
 	)}
 	{...restProps}
 >
 	{@render children?.()}
-	<ChevronRight class="ml-auto size-4" />
+	<ChevronRightIcon class="ml-auto size-4" />
 </MenubarPrimitive.SubTrigger>
--- a/Show More
+++ b/Show More