@kayord/ui 2.1.13 → 3.0.0

package/dist/components/ui/chart/chart-container.svelte

@@ -17,7 +17,7 @@
 		config: ChartConfig;
 	} = $props();
 
-	const chartId = `chart-${id || uid.replace(/:/g, "")}`;
+	const chartId = $derived(`chart-${id || uid.replace(/:/g, "")}`);
 
 	setChartContext({
 		get config() {

package/dist/components/ui/chart/chart-tooltip.svelte

@@ -85,6 +85,7 @@
 
 <TooltipPrimitive.Root variant="none">
 	<div
+		bind:this={ref}
 		class={cn(
 			"border-border/50 bg-background grid min-w-[9rem] items-start gap-1.5 rounded-lg border px-2.5 py-1.5 text-xs shadow-xl",
 			className

package/dist/components/ui/checkbox/checkbox.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
 	import { Checkbox as CheckboxPrimitive } from "bits-ui";
+	import { cn, type WithoutChildrenOrChild } from "../../../utils.js";
 	import CheckIcon from "@lucide/svelte/icons/check";
 	import MinusIcon from "@lucide/svelte/icons/minus";
-	import { cn, type WithoutChildrenOrChild } from "../../../utils.js";
 
 	let {
 		ref = $bindable(null),
@@ -17,7 +17,7 @@
 	bind:ref
 	data-slot="checkbox"
 	class={cn(
-		"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 peer flex size-4 shrink-0 items-center justify-center rounded-[4px] border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
+		"border-input dark:bg-input/30 data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary data-checked:border-primary aria-invalid:aria-checked:border-primary aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 peer relative flex size-4 shrink-0 items-center justify-center rounded-[4px] border transition-colors outline-none group-has-disabled/field:opacity-50 after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:ring-3 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:ring-3",
 		className
 	)}
 	bind:checked
@@ -25,11 +25,11 @@
 	{...restProps}
 >
 	{#snippet children({ checked, indeterminate })}
-		<div data-slot="checkbox-indicator" class="text-current transition-none">
+		<div data-slot="checkbox-indicator" class="grid place-content-center text-current transition-none [&>svg]:size-3.5">
 			{#if checked}
-				<CheckIcon class="size-3.5" />
+				<CheckIcon />
 			{:else if indeterminate}
-				<MinusIcon class="size-3.5" />
+				<MinusIcon />
 			{/if}
 		</div>
 	{/snippet}

package/dist/components/ui/command/command-dialog.svelte

@@ -3,16 +3,18 @@
 	import type { Snippet } from "svelte";
 	import Command from "./command.svelte";
 	import * as Dialog from "../dialog/index.js";
-	import type { WithoutChildrenOrChild } from "../../../utils.js";
+	import { cn, type WithoutChildrenOrChild } from "../../../utils.js";
 
 	let {
 		open = $bindable(false),
 		ref = $bindable(null),
 		value = $bindable(""),
 		title = "Command Palette",
-		description = "Search for a command to run",
+		description = "Search for a command to run...",
+		showCloseButton = false,
 		portalProps,
 		children,
+		class: className,
 		...restProps
 	}: WithoutChildrenOrChild<DialogPrimitive.RootProps> &
 		WithoutChildrenOrChild<CommandPrimitive.RootProps> & {
@@ -20,6 +22,8 @@
 			children: Snippet;
 			title?: string;
 			description?: string;
+			showCloseButton?: boolean;
+			class?: string;
 		} = $props();
 </script>
 
@@ -28,13 +32,11 @@
 		<Dialog.Title>{title}</Dialog.Title>
 		<Dialog.Description>{description}</Dialog.Description>
 	</Dialog.Header>
-	<Dialog.Content class="overflow-hidden p-0" {portalProps}>
-		<Command
-			class="**:data-[slot=command-input-wrapper]:h-12 [&_[data-command-group]]:px-2 [&_[data-command-group]:not([hidden])_~[data-command-group]]:pt-0 [&_[data-command-input-wrapper]_svg]:h-5 [&_[data-command-input-wrapper]_svg]:w-5 [&_[data-command-input]]:h-12 [&_[data-command-item]]:px-2 [&_[data-command-item]]:py-3 [&_[data-command-item]_svg]:h-5 [&_[data-command-item]_svg]:w-5"
-			{...restProps}
-			bind:value
-			bind:ref
-			{children}
-		/>
+	<Dialog.Content
+		class={cn("top-1/3 translate-y-0 overflow-hidden rounded-xl! p-0", className)}
+		{showCloseButton}
+		{portalProps}
+	>
+		<Command {...restProps} bind:value bind:ref {children} />
 	</Dialog.Content>
 </Dialog.Root>

package/dist/components/ui/command/command-dialog.svelte.d.ts

@@ -1,11 +1,13 @@
 import type { Command as CommandPrimitive, Dialog as DialogPrimitive } from "bits-ui";
 import type { Snippet } from "svelte";
-import type { WithoutChildrenOrChild } from "../../../utils.js";
+import { type WithoutChildrenOrChild } from "../../../utils.js";
 type $$ComponentProps = WithoutChildrenOrChild<DialogPrimitive.RootProps> & WithoutChildrenOrChild<CommandPrimitive.RootProps> & {
     portalProps?: DialogPrimitive.PortalProps;
     children: Snippet;
     title?: string;
     description?: string;
+    showCloseButton?: boolean;
+    class?: string;
 };
 declare const CommandDialog: import("svelte").Component<$$ComponentProps, {}, "ref" | "value" | "open">;
 type CommandDialog = ReturnType<typeof CommandDialog>;

package/dist/components/ui/command/command-group.svelte

@@ -17,7 +17,10 @@
 <CommandPrimitive.Group
 	bind:ref
 	data-slot="command-group"
-	class={cn("text-foreground overflow-hidden p-1", className)}
+	class={cn(
+		"text-foreground **:[[cmdk-group-heading]]:text-muted-foreground overflow-hidden p-1 **:[[cmdk-group-heading]]:px-2 **:[[cmdk-group-heading]]:py-1.5 **:[[cmdk-group-heading]]:text-xs **:[[cmdk-group-heading]]:font-medium",
+		className
+	)}
 	value={value ?? heading ?? `----${useId()}`}
 	{...restProps}
 >

package/dist/components/ui/command/command-input.svelte

@@ -1,7 +1,8 @@
 <script lang="ts">
 	import { Command as CommandPrimitive } from "bits-ui";
-	import SearchIcon from "@lucide/svelte/icons/search";
 	import { cn } from "../../../utils.js";
+	import * as InputGroup from "../input-group/index.js";
+	import SearchIcon from "@lucide/svelte/icons/search";
 
 	let {
 		ref = $bindable(null),
@@ -11,16 +12,19 @@
 	}: CommandPrimitive.InputProps = $props();
 </script>
 
-<div class="flex h-9 items-center gap-2 border-b ps-3 pe-8" data-slot="command-input-wrapper">
-	<SearchIcon class="size-4 shrink-0 opacity-50" />
-	<CommandPrimitive.Input
-		data-slot="command-input"
-		class={cn(
-			"placeholder:text-muted-foreground flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50",
-			className
-		)}
-		bind:ref
-		{...restProps}
-		bind:value
-	/>
+<div data-slot="command-input-wrapper" class="p-1 pb-0">
+	<InputGroup.Root
+		class="bg-input/30 border-input/30 h-8! rounded-lg! shadow-none! *:data-[slot=input-group-addon]:pl-2!"
+	>
+		<CommandPrimitive.Input
+			data-slot="command-input"
+			class={cn("w-full text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50", className)}
+			bind:ref
+			{...restProps}
+			bind:value
+		/>
+		<InputGroup.Addon>
+			<SearchIcon class="size-4 shrink-0 opacity-50" />
+		</InputGroup.Addon>
+	</InputGroup.Root>
 </div>

package/dist/components/ui/command/command-item.svelte

@@ -1,16 +1,22 @@
 <script lang="ts">
 	import { Command as CommandPrimitive } from "bits-ui";
 	import { cn } from "../../../utils.js";
+	import CheckIcon from "@lucide/svelte/icons/check";
 
-	let { ref = $bindable(null), class: className, ...restProps }: CommandPrimitive.ItemProps = $props();
+	let { ref = $bindable(null), class: className, children, ...restProps }: CommandPrimitive.ItemProps = $props();
 </script>
 
 <CommandPrimitive.Item
 	bind:ref
 	data-slot="command-item"
 	class={cn(
-		"aria-selected:bg-accent aria-selected:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+		"group/command-item data-selected:bg-muted data-selected:text-foreground data-selected:*:[svg]:text-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none in-data-[slot=dialog-content]:rounded-lg! data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
 		className
 	)}
 	{...restProps}
-/>
+>
+	{@render children?.()}
+	<CheckIcon
+		class="cn-command-item-indicator ml-auto opacity-0 group-has-[[data-slot=command-shortcut]]/command-item:hidden group-data-[checked=true]/command-item:opacity-100"
+	/>
+</CommandPrimitive.Item>

package/dist/components/ui/command/command-list.svelte

@@ -8,6 +8,6 @@
 <CommandPrimitive.List
 	bind:ref
 	data-slot="command-list"
-	class={cn("max-h-[300px] scroll-py-1 overflow-x-hidden overflow-y-auto", className)}
+	class={cn("no-scrollbar max-h-72 scroll-py-1 overflow-x-hidden overflow-y-auto outline-none", className)}
 	{...restProps}
 />

package/dist/components/ui/command/command-shortcut.svelte

@@ -13,7 +13,10 @@
 <span
 	bind:this={ref}
 	data-slot="command-shortcut"
-	class={cn("text-muted-foreground ms-auto text-xs tracking-widest", className)}
+	class={cn(
+		"text-muted-foreground group-data-selected/command-item:text-foreground ml-auto text-xs tracking-widest",
+		className
+	)}
 	{...restProps}
 >
 	{@render children?.()}

package/dist/components/ui/command/command.svelte

@@ -20,6 +20,6 @@
 	bind:value
 	bind:ref
 	data-slot="command"
-	class={cn("bg-popover text-popover-foreground flex h-full w-full flex-col overflow-hidden rounded-md", className)}
+	class={cn("bg-popover text-popover-foreground flex size-full flex-col overflow-hidden rounded-xl! p-1", className)}
 	{...restProps}
 />

package/dist/components/ui/context-menu/context-menu-checkbox-item.svelte

@@ -1,17 +1,19 @@
 <script lang="ts">
 	import { ContextMenu as ContextMenuPrimitive } from "bits-ui";
-	import CheckIcon from "@lucide/svelte/icons/check";
 	import { cn, type WithoutChildrenOrChild } from "../../../utils.js";
 	import type { Snippet } from "svelte";
+	import CheckIcon from "@lucide/svelte/icons/check";
 
 	let {
 		ref = $bindable(null),
 		checked = $bindable(false),
 		indeterminate = $bindable(false),
 		class: className,
+		inset,
 		children: childrenProp,
 		...restProps
 	}: WithoutChildrenOrChild<ContextMenuPrimitive.CheckboxItemProps> & {
+		inset?: boolean;
 		children?: Snippet;
 	} = $props();
 </script>
@@ -21,16 +23,17 @@
 	bind:checked
 	bind:indeterminate
 	data-slot="context-menu-checkbox-item"
+	data-inset={inset}
 	class={cn(
-		"data-highlighted:bg-accent data-highlighted:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 ps-8 pe-2 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+		"focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-inset:pl-7 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
 		className
 	)}
 	{...restProps}
 >
 	{#snippet children({ checked })}
-		<span class="pointer-events-none absolute start-2 flex size-3.5 items-center justify-center">
+		<span class="pointer-events-none absolute right-2">
 			{#if checked}
-				<CheckIcon class="size-4" />
+				<CheckIcon />
 			{/if}
 		</span>
 		{@render childrenProp?.()}

package/dist/components/ui/context-menu/context-menu-checkbox-item.svelte.d.ts

@@ -2,6 +2,7 @@ import { ContextMenu as ContextMenuPrimitive } from "bits-ui";
 import { type WithoutChildrenOrChild } from "../../../utils.js";
 import type { Snippet } from "svelte";
 type $$ComponentProps = WithoutChildrenOrChild<ContextMenuPrimitive.CheckboxItemProps> & {
+    inset?: boolean;
     children?: Snippet;
 };
 declare const ContextMenuCheckboxItem: import("svelte").Component<$$ComponentProps, {}, "ref" | "checked" | "indeterminate">;

package/dist/components/ui/context-menu/context-menu-content.svelte

@@ -20,7 +20,7 @@
 		bind:ref
 		data-slot="context-menu-content"
 		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-end-2 data-[side=right]:slide-in-from-start-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-(--bits-context-menu-content-available-height) min-w-[8rem] origin-(--bits-context-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md",
+			"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-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 ring-foreground/10 bg-popover text-popover-foreground z-50 min-w-36 overflow-x-hidden overflow-y-auto rounded-lg p-1 shadow-md ring-1 duration-100 outline-none",
 			className
 		)}
 		{...restProps}

package/dist/components/ui/context-menu/context-menu-group-heading.svelte

@@ -16,6 +16,6 @@
 	bind:ref
 	data-slot="context-menu-group-heading"
 	data-inset={inset}
-	class={cn("text-foreground px-2 py-1.5 text-sm font-medium data-[inset]:ps-8", className)}
+	class={cn("text-foreground px-2 py-1.5 text-sm font-medium data-inset:ps-8", className)}
 	{...restProps}
 />

package/dist/components/ui/context-menu/context-menu-item.svelte

@@ -20,7 +20,7 @@
 	data-inset={inset}
 	data-variant={variant}
 	class={cn(
-		"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 relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:ps-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+		"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 focus:*:[svg]:text-accent-foreground group/context-menu-item relative flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-inset:pl-7 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
 		className
 	)}
 	{...restProps}

package/dist/components/ui/context-menu/context-menu-label.svelte

@@ -17,7 +17,7 @@
 	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]:ps-8", className)}
+	class={cn("text-muted-foreground px-1.5 py-1 text-xs font-medium data-inset:pl-7 data-inset:pl-8", className)}
 	{...restProps}
 >
 	{@render children?.()}

package/dist/components/ui/context-menu/context-menu-radio-item.svelte

@@ -1,29 +1,33 @@
 <script lang="ts">
 	import { ContextMenu as ContextMenuPrimitive } from "bits-ui";
-	import CircleIcon from "@lucide/svelte/icons/circle";
 	import { cn, type WithoutChild } from "../../../utils.js";
+	import CheckIcon from "@lucide/svelte/icons/check";
 
 	let {
 		ref = $bindable(null),
 		class: className,
+		inset,
 		children: childrenProp,
 		...restProps
-	}: WithoutChild<ContextMenuPrimitive.RadioItemProps> = $props();
+	}: WithoutChild<ContextMenuPrimitive.RadioItemProps> & {
+		inset?: boolean;
+	} = $props();
 </script>
 
 <ContextMenuPrimitive.RadioItem
 	bind:ref
 	data-slot="context-menu-radio-item"
+	data-inset={inset}
 	class={cn(
-		"data-highlighted:bg-accent data-highlighted:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 ps-8 pe-2 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+		"focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-inset:pl-7 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
 		className
 	)}
 	{...restProps}
 >
 	{#snippet children({ checked })}
-		<span class="pointer-events-none absolute start-2 flex size-3.5 items-center justify-center">
+		<span class="pointer-events-none absolute right-2">
 			{#if checked}
-				<CircleIcon class="size-2 fill-current" />
+				<CheckIcon />
 			{/if}
 		</span>
 		{@render childrenProp?.({ checked })}

package/dist/components/ui/context-menu/context-menu-radio-item.svelte.d.ts

@@ -1,4 +1,8 @@
 import { ContextMenu as ContextMenuPrimitive } from "bits-ui";
-declare const ContextMenuRadioItem: import("svelte").Component<Omit<ContextMenuPrimitive.RadioItemProps, "child">, {}, "ref">;
+import { type WithoutChild } from "../../../utils.js";
+type $$ComponentProps = WithoutChild<ContextMenuPrimitive.RadioItemProps> & {
+    inset?: boolean;
+};
+declare const ContextMenuRadioItem: import("svelte").Component<$$ComponentProps, {}, "ref">;
 type ContextMenuRadioItem = ReturnType<typeof ContextMenuRadioItem>;
 export default ContextMenuRadioItem;

package/dist/components/ui/context-menu/context-menu-shortcut.svelte

@@ -13,7 +13,10 @@
 <span
 	bind:this={ref}
 	data-slot="context-menu-shortcut"
-	class={cn("text-muted-foreground ms-auto text-xs tracking-widest", className)}
+	class={cn(
+		"text-muted-foreground group-focus/context-menu-item:text-accent-foreground ml-auto text-xs tracking-widest",
+		className
+	)}
 	{...restProps}
 >
 	{@render children?.()}

package/dist/components/ui/context-menu/context-menu-sub-content.svelte

@@ -9,7 +9,7 @@
 	bind:ref
 	data-slot="context-menu-sub-content"
 	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-end-2 data-[side=right]:slide-in-from-start-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] origin-(--bits-context-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg",
+		"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-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 bg-popover text-popover-foreground min-w-32 rounded-lg border p-1 shadow-lg duration-100",
 		className
 	)}
 	{...restProps}

package/dist/components/ui/context-menu/context-menu-sub-trigger.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { ContextMenu as ContextMenuPrimitive } from "bits-ui";
-	import ChevronRightIcon from "@lucide/svelte/icons/chevron-right";
 	import { cn, type WithoutChild } from "../../../utils.js";
+	import ChevronRightIcon from "@lucide/svelte/icons/chevron-right";
 
 	let {
 		ref = $bindable(null),
@@ -19,11 +19,11 @@
 	data-slot="context-menu-sub-trigger"
 	data-inset={inset}
 	class={cn(
-		"data-highlighted:bg-accent data-highlighted:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:ps-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+		"focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none data-inset:ps-8 data-inset:pl-7 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
 		className
 	)}
 	{...restProps}
 >
 	{@render children?.()}
-	<ChevronRightIcon class="ms-auto" />
+	<ChevronRightIcon class="ml-auto" />
 </ContextMenuPrimitive.SubTrigger>

package/dist/components/ui/context-menu/context-menu-trigger.svelte

@@ -1,7 +1,13 @@
 <script lang="ts">
 	import { ContextMenu as ContextMenuPrimitive } from "bits-ui";
+	import { cn } from "../../../utils.js";
 
-	let { ref = $bindable(null), ...restProps }: ContextMenuPrimitive.TriggerProps = $props();
+	let { ref = $bindable(null), class: className, ...restProps }: ContextMenuPrimitive.TriggerProps = $props();
 </script>
 
-<ContextMenuPrimitive.Trigger bind:ref data-slot="context-menu-trigger" {...restProps} />
+<ContextMenuPrimitive.Trigger
+	bind:ref
+	data-slot="context-menu-trigger"
+	class={cn("cn-context-menu-trigger select-none", className)}
+	{...restProps}
+/>

package/dist/components/ui/dialog/dialog-close.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { Dialog as DialogPrimitive } from "bits-ui";
 
-	let { ref = $bindable(null), ...restProps }: DialogPrimitive.CloseProps = $props();
+	let { ref = $bindable(null), type = "button", ...restProps }: DialogPrimitive.CloseProps = $props();
 </script>
 
-<DialogPrimitive.Close bind:ref data-slot="dialog-close" {...restProps} />
+<DialogPrimitive.Close bind:ref data-slot="dialog-close" {type} {...restProps} />

package/dist/components/ui/dialog/dialog-content.svelte

@@ -1,11 +1,12 @@
 <script lang="ts">
 	import { Dialog as DialogPrimitive } from "bits-ui";
 	import DialogPortal from "./dialog-portal.svelte";
-	import XIcon from "@lucide/svelte/icons/x";
 	import type { Snippet } from "svelte";
 	import * as Dialog from "./index.js";
 	import { cn, type WithoutChildrenOrChild } from "../../../utils.js";
 	import type { ComponentProps } from "svelte";
+	import { Button } from "../button/index.js";
+	import XIcon from "@lucide/svelte/icons/x";
 
 	let {
 		ref = $bindable(null),
@@ -27,18 +28,20 @@
 		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 top-[50%] left-[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",
+			"bg-background data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 ring-foreground/10 fixed top-1/2 left-1/2 z-50 grid w-full max-w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 gap-4 rounded-xl p-4 text-sm ring-1 duration-100 outline-none sm:max-w-sm",
 			className
 		)}
 		{...restProps}
 	>
 		{@render children?.()}
 		{#if showCloseButton}
-			<DialogPrimitive.Close
-				class="ring-offset-background focus:ring-ring absolute end-4 top-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
-			>
-				<XIcon />
-				<span class="sr-only">Close</span>
+			<DialogPrimitive.Close data-slot="dialog-close">
+				{#snippet child({ props })}
+					<Button variant="ghost" class="absolute top-2 right-2" size="icon-sm" {...props}>
+						<XIcon />
+						<span class="sr-only">Close</span>
+					</Button>
+				{/snippet}
 			</DialogPrimitive.Close>
 		{/if}
 	</DialogPrimitive.Content>

package/dist/components/ui/dialog/dialog-description.svelte

@@ -8,6 +8,9 @@
 <DialogPrimitive.Description
 	bind:ref
 	data-slot="dialog-description"
-	class={cn("text-muted-foreground text-sm", className)}
+	class={cn(
+		"text-muted-foreground *:[a]:hover:text-foreground text-sm *:[a]:underline *:[a]:underline-offset-3",
+		className
+	)}
 	{...restProps}
 />

package/dist/components/ui/dialog/dialog-footer.svelte

@@ -1,20 +1,35 @@
 <script lang="ts">
 	import { cn, type WithElementRef } from "../../../utils.js";
 	import type { HTMLAttributes } from "svelte/elements";
+	import { Dialog as DialogPrimitive } from "bits-ui";
+	import { Button } from "../button/index.js";
 
 	let {
 		ref = $bindable(null),
 		class: className,
 		children,
+		showCloseButton = false,
 		...restProps
-	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> & {
+		showCloseButton?: boolean;
+	} = $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)}
+	class={cn(
+		"bg-muted/50 -mx-4 -mb-4 flex flex-col-reverse gap-2 rounded-b-xl border-t p-4 sm:flex-row sm:justify-end",
+		className
+	)}
 	{...restProps}
 >
 	{@render children?.()}
+	{#if showCloseButton}
+		<DialogPrimitive.Close>
+			{#snippet child({ props })}
+				<Button variant="outline" {...props}>Close</Button>
+			{/snippet}
+		</DialogPrimitive.Close>
+	{/if}
 </div>

package/dist/components/ui/dialog/dialog-footer.svelte.d.ts

@@ -1,5 +1,8 @@
 import { type WithElementRef } from "../../../utils.js";
 import type { HTMLAttributes } from "svelte/elements";
-declare const DialogFooter: import("svelte").Component<WithElementRef<HTMLAttributes<HTMLDivElement>>, {}, "ref">;
+type $$ComponentProps = WithElementRef<HTMLAttributes<HTMLDivElement>> & {
+    showCloseButton?: boolean;
+};
+declare const DialogFooter: import("svelte").Component<$$ComponentProps, {}, "ref">;
 type DialogFooter = ReturnType<typeof DialogFooter>;
 export default DialogFooter;

package/dist/components/ui/dialog/dialog-header.svelte

@@ -10,11 +10,6 @@
 	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
 </script>
 
-<div
-	bind:this={ref}
-	data-slot="dialog-header"
-	class={cn("flex flex-col gap-2 text-center sm:text-start", className)}
-	{...restProps}
->
+<div bind:this={ref} data-slot="dialog-header" class={cn("flex flex-col gap-2", className)} {...restProps}>
 	{@render children?.()}
 </div>

package/dist/components/ui/dialog/dialog-overlay.svelte

@@ -9,7 +9,7 @@
 	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",
+		"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 fixed inset-0 isolate z-50 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs",
 		className
 	)}
 	{...restProps}

package/dist/components/ui/dialog/dialog-title.svelte

@@ -8,6 +8,6 @@
 <DialogPrimitive.Title
 	bind:ref
 	data-slot="dialog-title"
-	class={cn("text-lg leading-none font-semibold", className)}
+	class={cn("text-base leading-none font-medium", className)}
 	{...restProps}
 />

package/dist/components/ui/dialog/dialog-trigger.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { Dialog as DialogPrimitive } from "bits-ui";
 
-	let { ref = $bindable(null), ...restProps }: DialogPrimitive.TriggerProps = $props();
+	let { ref = $bindable(null), type = "button", ...restProps }: DialogPrimitive.TriggerProps = $props();
 </script>
 
-<DialogPrimitive.Trigger bind:ref data-slot="dialog-trigger" {...restProps} />
+<DialogPrimitive.Trigger bind:ref data-slot="dialog-trigger" {type} {...restProps} />

package/dist/components/ui/drawer/drawer-content.svelte

@@ -23,17 +23,13 @@
 		bind:ref
 		data-slot="drawer-content"
 		class={cn(
-			"group/drawer-content bg-background fixed z-50 flex h-auto flex-col",
-			"data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80vh] data-[vaul-drawer-direction=top]:rounded-b-lg data-[vaul-drawer-direction=top]:border-b",
-			"data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[80vh] data-[vaul-drawer-direction=bottom]:rounded-t-lg data-[vaul-drawer-direction=bottom]:border-t",
-			"data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:end-0 data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=right]:border-s data-[vaul-drawer-direction=right]:sm:max-w-sm",
-			"data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:start-0 data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=left]:border-e data-[vaul-drawer-direction=left]:sm:max-w-sm",
+			"bg-background group/drawer-content fixed z-50 flex h-auto flex-col text-sm data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[80vh] data-[vaul-drawer-direction=bottom]:rounded-t-xl data-[vaul-drawer-direction=bottom]:border-t data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:left-0 data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=left]:rounded-r-xl data-[vaul-drawer-direction=left]:border-r data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:right-0 data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=right]:rounded-l-xl data-[vaul-drawer-direction=right]:border-l data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80vh] data-[vaul-drawer-direction=top]:rounded-b-xl data-[vaul-drawer-direction=top]:border-b data-[vaul-drawer-direction=left]:sm:max-w-sm data-[vaul-drawer-direction=right]:sm:max-w-sm",
 			className
 		)}
 		{...restProps}
 	>
 		<div
-			class="bg-muted mx-auto mt-4 hidden h-2 w-[100px] shrink-0 rounded-full group-data-[vaul-drawer-direction=bottom]/drawer-content:block"
+			class="bg-muted bg-muted mx-auto mt-4 hidden h-1 w-[100px] shrink-0 rounded-full group-data-[vaul-drawer-direction=bottom]/drawer-content:block"
 		></div>
 		{@render children?.()}
 	</DrawerPrimitive.Content>