@kayord/ui 0.19.0 → 0.19.3

package/dist/components/ui/collapsible/collapsible.svelte

@@ -0,0 +1,7 @@
+<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 data-slot="collapsible" {...restProps} />

package/dist/components/ui/collapsible/collapsible.svelte.d.ts

@@ -0,0 +1,4 @@
+import { Collapsible as CollapsiblePrimitive } from "bits-ui";
+declare const Collapsible: import("svelte").Component<CollapsiblePrimitive.RootProps, {}, "ref" | "open">;
+type Collapsible = ReturnType<typeof Collapsible>;
+export default Collapsible;

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

@@ -1,13 +1,16 @@
 <script lang="ts">
-	import type { Command as CommandPrimitive, Dialog as DialogPrimitive, WithoutChildrenOrChild } from "bits-ui";
+	import type { Command as CommandPrimitive, Dialog as DialogPrimitive } from "bits-ui";
 	import type { Snippet } from "svelte";
 	import Command from "./command.svelte";
 	import * as Dialog from "../dialog/index.js";
+	import type { WithoutChildrenOrChild } from "../../../utils.js";
 
 	let {
 		open = $bindable(false),
 		ref = $bindable(null),
 		value = $bindable(""),
+		title = "Command Palette",
+		description = "Search for a command to run",
 		portalProps,
 		children,
 		...restProps
@@ -15,13 +18,19 @@
 		WithoutChildrenOrChild<CommandPrimitive.RootProps> & {
 			portalProps?: DialogPrimitive.PortalProps;
 			children: Snippet;
+			title?: string;
+			description?: string;
 		} = $props();
 </script>
 
 <Dialog.Root bind:open {...restProps}>
-	<Dialog.Content class="overflow-hidden p-0 shadow-lg" {portalProps}>
+	<Dialog.Header class="sr-only">
+		<Dialog.Title>{title}</Dialog.Title>
+		<Dialog.Description>{description}</Dialog.Description>
+	</Dialog.Header>
+	<Dialog.Content class="overflow-hidden p-0" {portalProps}>
 		<Command
-			class="[&_[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"
+			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

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

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

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

@@ -5,4 +5,9 @@
 	let { ref = $bindable(null), class: className, ...restProps }: CommandPrimitive.EmptyProps = $props();
 </script>
 
-<CommandPrimitive.Empty class={cn("py-6 text-center text-sm", className)} {...restProps} />
+<CommandPrimitive.Empty
+	bind:ref
+	data-slot="command-empty"
+	class={cn("py-6 text-center text-sm", className)}
+	{...restProps}
+/>

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

@@ -15,8 +15,9 @@
 </script>
 
 <CommandPrimitive.Group
-	class={cn("text-foreground overflow-hidden p-1", className)}
 	bind:ref
+	data-slot="command-group"
+	class={cn("text-foreground overflow-hidden p-1", className)}
 	value={value ?? heading ?? `----${useId()}`}
 	{...restProps}
 >

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

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { Command as CommandPrimitive } from "bits-ui";
-	import Search from "@lucide/svelte/icons/search";
+	import SearchIcon from "@lucide/svelte/icons/search";
 	import { cn } from "../../../utils.js";
 
 	let {
@@ -11,11 +11,12 @@
 	}: CommandPrimitive.InputProps = $props();
 </script>
 
-<div class="flex items-center border-b px-2" data-command-input-wrapper="">
-	<Search class="mr-2 size-4 shrink-0 opacity-50" />
+<div class="flex h-9 items-center gap-2 border-b px-3" 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-11 w-full rounded-md bg-transparent py-3 text-base outline-hidden disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+			"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

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

@@ -1,4 +1,4 @@
 import { Command as CommandPrimitive } from "bits-ui";
-declare const CommandInput: import("svelte").Component<CommandPrimitive.InputProps, {}, "ref" | "value">;
+declare const CommandInput: import("svelte").Component<CommandPrimitive.InputProps, {}, "value" | "ref">;
 type CommandInput = ReturnType<typeof CommandInput>;
 export default CommandInput;

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

@@ -6,10 +6,11 @@
 </script>
 
 <CommandPrimitive.Item
+	bind:ref
+	data-slot="command-item"
 	class={cn(
-		"aria-selected:bg-accent aria-selected:text-accent-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]:size-4 [&_svg]:shrink-0",
+		"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=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
 		className
 	)}
-	bind:ref
 	{...restProps}
 />

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

@@ -6,10 +6,11 @@
 </script>
 
 <CommandPrimitive.LinkItem
+	bind:ref
+	data-slot="command-item"
 	class={cn(
-		"aria-selected:bg-accent aria-selected:text-accent-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]:size-4 [&_svg]:shrink-0",
+		"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=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
 		className
 	)}
-	bind:ref
 	{...restProps}
 />

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

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

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

@@ -5,4 +5,9 @@
 	let { ref = $bindable(null), class: className, ...restProps }: CommandPrimitive.SeparatorProps = $props();
 </script>
 
-<CommandPrimitive.Separator class={cn("bg-border -mx-1 h-px", className)} bind:ref {...restProps} />
+<CommandPrimitive.Separator
+	bind:ref
+	data-slot="command-separator"
+	class={cn("bg-border -mx-1 h-px", className)}
+	{...restProps}
+/>

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

@@ -1,7 +1,6 @@
 <script lang="ts">
-	import type { WithElementRef } from "bits-ui";
+	import { cn, type WithElementRef } from "../../../utils.js";
 	import type { HTMLAttributes } from "svelte/elements";
-	import { cn } from "../../../utils.js";
 
 	let {
 		ref = $bindable(null),
@@ -11,6 +10,11 @@
 	}: WithElementRef<HTMLAttributes<HTMLSpanElement>> = $props();
 </script>
 
-<span bind:this={ref} class={cn("text-muted-foreground ml-auto text-xs tracking-widest", className)} {...restProps}>
+<span
+	bind:this={ref}
+	data-slot="command-shortcut"
+	class={cn("text-muted-foreground ml-auto text-xs tracking-widest", className)}
+	{...restProps}
+>
 	{@render children?.()}
 </span>

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

@@ -1,4 +1,4 @@
-import type { WithElementRef } from "bits-ui";
+import { type WithElementRef } from "../../../utils.js";
 import type { HTMLAttributes } from "svelte/elements";
 declare const CommandShortcut: import("svelte").Component<WithElementRef<HTMLAttributes<HTMLSpanElement>>, {}, "ref">;
 type CommandShortcut = ReturnType<typeof CommandShortcut>;

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

@@ -11,8 +11,9 @@
 </script>
 
 <CommandPrimitive.Root
-	class={cn("bg-popover text-popover-foreground flex h-full w-full flex-col overflow-hidden rounded-md", className)}
 	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)}
 	{...restProps}
 />

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

@@ -1,4 +1,4 @@
 import { Command as CommandPrimitive } from "bits-ui";
-declare const Command: import("svelte").Component<CommandPrimitive.RootProps, {}, "ref" | "value">;
+declare const Command: import("svelte").Component<CommandPrimitive.RootProps, {}, "value" | "ref">;
 type Command = ReturnType<typeof Command>;
 export default Command;

package/dist/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 "../../../utils.js";
+	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";
 
 	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 items-center rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+		"data-highlighted:bg-accent data-highlighted:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 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",
 		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?.()}

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

@@ -1,4 +1,5 @@
-import { ContextMenu as ContextMenuPrimitive, type WithoutChildrenOrChild } from "bits-ui";
+import { ContextMenu as ContextMenuPrimitive } from "bits-ui";
+import { type WithoutChildrenOrChild } from "../../../utils.js";
 import type { Snippet } from "svelte";
 type $$ComponentProps = WithoutChildrenOrChild<ContextMenuPrimitive.CheckboxItemProps> & {
     children?: Snippet;

package/dist/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-hidden",
+			"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 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",
 			className
 		)}
 		{...restProps}

package/dist/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}
 />

package/dist/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} />

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

@@ -0,0 +1,4 @@
+import { ContextMenu as ContextMenuPrimitive } from "bits-ui";
+declare const ContextMenuGroup: import("svelte").Component<ContextMenuPrimitive.GroupProps, {}, "ref">;
+type ContextMenuGroup = ReturnType<typeof ContextMenuGroup>;
+export default ContextMenuGroup;

package/dist/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 items-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-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 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]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
 		className
 	)}
 	{...restProps}

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

@@ -1,6 +1,7 @@
 import { ContextMenu as ContextMenuPrimitive } from "bits-ui";
 type $$ComponentProps = ContextMenuPrimitive.ItemProps & {
     inset?: boolean;
+    variant?: "default" | "destructive";
 };
 declare const ContextMenuItem: import("svelte").Component<$$ComponentProps, {}, "ref">;
 type ContextMenuItem = ReturnType<typeof ContextMenuItem>;

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

@@ -0,0 +1,24 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from "../../../utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		inset,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> & {
+		inset?: boolean;
+	} = $props();
+</script>
+
+<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}
+>
+	{@render children?.()}
+</div>

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

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

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

@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { ContextMenu as ContextMenuPrimitive } from "bits-ui";
+
+	let { ref = $bindable(null), value = $bindable(""), ...restProps }: ContextMenuPrimitive.RadioGroupProps = $props();
+</script>
+
+<ContextMenuPrimitive.RadioGroup bind:ref bind:value data-slot="context-menu-radio-group" {...restProps} />

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

@@ -0,0 +1,4 @@
+import { ContextMenu as ContextMenuPrimitive } from "bits-ui";
+declare const ContextMenuRadioGroup: import("svelte").Component<ContextMenuPrimitive.RadioGroupProps, {}, "value" | "ref">;
+type ContextMenuRadioGroup = ReturnType<typeof ContextMenuRadioGroup>;
+export default ContextMenuRadioGroup;

package/dist/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 "../../../utils.js";
+	import { ContextMenu as ContextMenuPrimitive } from "bits-ui";
+	import CircleIcon from "@lucide/svelte/icons/circle";
+	import { cn, type WithoutChild } from "../../../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 items-center rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+		"data-highlighted:bg-accent data-highlighted:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 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",
 		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 })}

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

@@ -5,4 +5,9 @@
 	let { ref = $bindable(null), class: className, ...restProps }: ContextMenuPrimitive.SeparatorProps = $props();
 </script>
 
-<ContextMenuPrimitive.Separator bind:ref class={cn("bg-border -mx-1 my-1 h-px", className)} {...restProps} />
+<ContextMenuPrimitive.Separator
+	bind:ref
+	data-slot="context-menu-separator"
+	class={cn("bg-border -mx-1 my-1 h-px", className)}
+	{...restProps}
+/>

package/dist/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 "../../../utils.js";
 	import type { HTMLAttributes } from "svelte/elements";
-	import { cn } from "../../../utils.js";
 
 	let {
 		ref = $bindable(null),
@@ -11,6 +10,11 @@
 	}: WithElementRef<HTMLAttributes<HTMLSpanElement>> = $props();
 </script>
 
-<span bind:this={ref} class={cn("text-muted-foreground ml-auto text-xs tracking-widest", className)} {...restProps}>
+<span
+	bind:this={ref}
+	data-slot="context-menu-shortcut"
+	class={cn("text-muted-foreground ml-auto text-xs tracking-widest", className)}
+	{...restProps}
+>
 	{@render children?.()}
 </span>

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

@@ -1,4 +1,4 @@
-import type { WithElementRef } from "bits-ui";
+import { type WithElementRef } from "../../../utils.js";
 import type { HTMLAttributes } from "svelte/elements";
 declare const ContextMenuShortcut: import("svelte").Component<WithElementRef<HTMLAttributes<HTMLSpanElement>>, {}, "ref">;
 type ContextMenuShortcut = ReturnType<typeof ContextMenuShortcut>;

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

@@ -7,8 +7,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-hidden",
+		"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] origin-(--bits-context-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg",
 		className
 	)}
 	{...restProps}

package/dist/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 "../../../utils.js";
+	import { ContextMenu as ContextMenuPrimitive } from "bits-ui";
+	import ChevronRightIcon from "@lucide/svelte/icons/chevron-right";
+	import { cn, type WithoutChild } from "../../../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 items-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none",
-		inset && "pl-8",
+		"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]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
 		className
 	)}
 	{...restProps}
 >
 	{@render children?.()}
-	<ChevronRight class="ml-auto size-4" />
+	<ChevronRightIcon class="ml-auto" />
 </ContextMenuPrimitive.SubTrigger>

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

@@ -1,4 +1,5 @@
-import { ContextMenu as ContextMenuPrimitive, type WithoutChild } from "bits-ui";
+import { ContextMenu as ContextMenuPrimitive } from "bits-ui";
+import { type WithoutChild } from "../../../utils.js";
 type $$ComponentProps = WithoutChild<ContextMenuPrimitive.SubTriggerProps> & {
     inset?: boolean;
 };

package/dist/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} />

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

@@ -0,0 +1,4 @@
+import { ContextMenu as ContextMenuPrimitive } from "bits-ui";
+declare const ContextMenuTrigger: import("svelte").Component<ContextMenuPrimitive.TriggerProps, {}, "ref">;
+type ContextMenuTrigger = ReturnType<typeof ContextMenuTrigger>;
+export default ContextMenuTrigger;

package/dist/components/ui/context-menu/index.d.ts

@@ -1,4 +1,6 @@
-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";
@@ -8,9 +10,7 @@ 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";
 declare const Sub: import("svelte").Component<import("bits-ui").ContextMenuSubPropsWithoutHTML, {}, "open">;
 declare const Root: import("svelte").Component<import("bits-ui").ContextMenuRootPropsWithoutHTML, {}, "open">;
-declare const Trigger: import("svelte").Component<ContextMenuPrimitive.TriggerProps, {}, "ref">;
-declare const Group: import("svelte").Component<ContextMenuPrimitive.GroupProps, {}, "ref">;
-declare const RadioGroup: import("svelte").Component<ContextMenuPrimitive.RadioGroupProps, {}, "ref" | "value">;
-export { Sub, Root, Item, GroupHeading, Group, Trigger, Content, Shortcut, Separator, RadioItem, SubContent, SubTrigger, RadioGroup, CheckboxItem, Root as ContextMenu, Sub as ContextMenuSub, Item as ContextMenuItem, GroupHeading as ContextMenuGroupHeading, Group as ContextMenuGroup, Content as ContextMenuContent, Trigger as ContextMenuTrigger, Shortcut as ContextMenuShortcut, RadioItem as ContextMenuRadioItem, Separator as ContextMenuSeparator, RadioGroup as ContextMenuRadioGroup, SubContent as ContextMenuSubContent, SubTrigger as ContextMenuSubTrigger, CheckboxItem as ContextMenuCheckboxItem, };
+export { Sub, Root, Item, GroupHeading, Label, Group, Trigger, Content, Shortcut, Separator, RadioItem, SubContent, SubTrigger, RadioGroup, CheckboxItem, Root as ContextMenu, Sub as ContextMenuSub, Item as ContextMenuItem, GroupHeading as ContextMenuGroupHeading, Group as ContextMenuGroup, Content as ContextMenuContent, Trigger as ContextMenuTrigger, Shortcut as ContextMenuShortcut, RadioItem as ContextMenuRadioItem, Separator as ContextMenuSeparator, RadioGroup as ContextMenuRadioGroup, SubContent as ContextMenuSubContent, SubTrigger as ContextMenuSubTrigger, CheckboxItem as ContextMenuCheckboxItem, Label as ContextMenuLabel, };

package/dist/components/ui/context-menu/index.js

@@ -1,4 +1,7 @@
 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";
@@ -8,11 +11,9 @@ 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, Group, Trigger, Content, Shortcut, Separator, RadioItem, SubContent, SubTrigger, RadioGroup, CheckboxItem, 
+export { Sub, Root, Item, GroupHeading, Label, Group, Trigger, Content, Shortcut, Separator, RadioItem, SubContent, SubTrigger, RadioGroup, CheckboxItem, 
 //
-Root as ContextMenu, Sub as ContextMenuSub, Item as ContextMenuItem, GroupHeading as ContextMenuGroupHeading, Group as ContextMenuGroup, Content as ContextMenuContent, Trigger as ContextMenuTrigger, Shortcut as ContextMenuShortcut, RadioItem as ContextMenuRadioItem, Separator as ContextMenuSeparator, RadioGroup as ContextMenuRadioGroup, SubContent as ContextMenuSubContent, SubTrigger as ContextMenuSubTrigger, CheckboxItem as ContextMenuCheckboxItem, };
+Root as ContextMenu, Sub as ContextMenuSub, Item as ContextMenuItem, GroupHeading as ContextMenuGroupHeading, Group as ContextMenuGroup, Content as ContextMenuContent, Trigger as ContextMenuTrigger, Shortcut as ContextMenuShortcut, RadioItem as ContextMenuRadioItem, Separator as ContextMenuSeparator, RadioGroup as ContextMenuRadioGroup, SubContent as ContextMenuSubContent, SubTrigger as ContextMenuSubTrigger, CheckboxItem as ContextMenuCheckboxItem, Label as ContextMenuLabel, };

package/dist/components/ui/data-table/render-helpers.d.ts

@@ -62,7 +62,7 @@ export declare class RenderSnippetConfig<TProps> {
  * ```
  * @see {@link https://tanstack.com/table/latest/docs/guide/column-defs}
  */
-export declare function renderComponent<T extends Component<any>, Props extends ComponentProps<T>>(component: T, props: Props): RenderComponentConfig<T>;
+export declare function renderComponent<T extends Component<any>, Props extends ComponentProps<T>>(component: T, props?: Props): RenderComponentConfig<T>;
 /**
  * A helper function to help create cells from Svelte Snippets through ColumnDef's `cell` and `header` properties.
  *
@@ -87,4 +87,4 @@ export declare function renderComponent<T extends Component<any>, Props extends
  * ```
  * @see {@link https://tanstack.com/table/latest/docs/guide/column-defs}
  */
-export declare function renderSnippet<TProps>(snippet: Snippet<[TProps]>, params: TProps): RenderSnippetConfig<TProps>;
+export declare function renderSnippet<TProps>(snippet: Snippet<[TProps]>, params?: TProps): RenderSnippetConfig<TProps>;

package/dist/components/ui/data-table/render-helpers.js

@@ -67,7 +67,7 @@ export class RenderSnippetConfig {
  * ```
  * @see {@link https://tanstack.com/table/latest/docs/guide/column-defs}
  */
-export function renderComponent(component, props) {
+export function renderComponent(component, props = {}) {
     return new RenderComponentConfig(component, props);
 }
 /**
@@ -94,6 +94,6 @@ export function renderComponent(component, props) {
  * ```
  * @see {@link https://tanstack.com/table/latest/docs/guide/column-defs}
  */
-export function renderSnippet(snippet, params) {
+export function renderSnippet(snippet, params = {}) {
     return new RenderSnippetConfig(snippet, params);
 }