@tanglemedia/svelte-starter-ui-shadcn 0.0.6 → 0.2.0

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

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { Command as CommandPrimitive } from "bits-ui";
-	import { cn } from "../../../utils";
+	import { cn } from "../../utils.js";
 
 	let {
 		ref = $bindable(null),
@@ -10,7 +10,8 @@
 </script>
 
 <CommandPrimitive.List
-	class={cn("max-h-[300px] overflow-y-auto overflow-x-hidden", className)}
 	bind:ref
+	data-slot="command-list"
+	class={cn("no-scrollbar max-h-72 scroll-py-1 outline-none overflow-x-hidden overflow-y-auto", className)}
 	{...restProps}
 />

package/dist/lib/components/ui/command/command-loading.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { Command as CommandPrimitive } from "bits-ui";
+
+	let { ref = $bindable(null), ...restProps }: CommandPrimitive.LoadingProps = $props();
+</script>
+
+<CommandPrimitive.Loading bind:ref {...restProps} />

package/dist/lib/components/ui/command/command-loading.svelte.d.ts

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

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

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { Command as CommandPrimitive } from "bits-ui";
-	import { cn } from "../../../utils";
+	import { cn } from "../../utils.js";
 
 	let {
 		ref = $bindable(null),
@@ -9,4 +9,9 @@
 	}: CommandPrimitive.SeparatorProps = $props();
 </script>
 
-<CommandPrimitive.Separator bind:ref class={cn("bg-border -mx-1 h-px", className)} {...restProps} />
+<CommandPrimitive.Separator
+	bind:ref
+	data-slot="command-separator"
+	class={cn("bg-border -mx-1 h-px", className)}
+	{...restProps}
+/>

package/dist/lib/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";
 
 	let {
 		ref = $bindable(null),
@@ -12,9 +11,10 @@
 </script>
 
 <span
-	class={cn("text-muted-foreground ml-auto text-xs tracking-widest", className)}
-	{...restProps}
 	bind:this={ref}
+	data-slot="command-shortcut"
+	class={cn("text-muted-foreground group-data-selected/command-item:text-foreground ml-auto text-xs tracking-widest", className)}
+	{...restProps}
 >
 	{@render children?.()}
 </span>

package/dist/lib/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/lib/components/ui/command/command.svelte

@@ -1,21 +1,25 @@
 <script lang="ts">
 	import { Command as CommandPrimitive } from "bits-ui";
-	import { cn } from "../../../utils";
+	import { cn } from "../../utils.js";
+
+	export type CommandRootApi = CommandPrimitive.Root;
 
 	let {
-		value = $bindable(""),
+		api = $bindable(null),
 		ref = $bindable(null),
+		value = $bindable(""),
 		class: className,
 		...restProps
-	}: CommandPrimitive.RootProps = $props();
+	}: CommandPrimitive.RootProps & {
+		api?: CommandRootApi | null;
+	} = $props();
 </script>
 
 <CommandPrimitive.Root
-	class={cn(
-		"bg-popover text-popover-foreground flex h-full w-full flex-col overflow-hidden rounded-md",
-		className
-	)}
-	bind:ref
+	bind:this={api}
 	bind:value
+	bind:ref
+	data-slot="command"
+	class={cn("bg-popover text-popover-foreground rounded-xl! p-1 flex size-full flex-col overflow-hidden", className)}
 	{...restProps}
 />

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

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

package/dist/lib/components/ui/command/index.d.ts

@@ -1,13 +1,12 @@
-import { Command as CommandPrimitive } from "bits-ui";
-import Root from "./command.svelte";
 import Dialog from "./command-dialog.svelte";
 import Empty from "./command-empty.svelte";
 import Group from "./command-group.svelte";
-import Item from "./command-item.svelte";
 import Input from "./command-input.svelte";
+import Item from "./command-item.svelte";
+import LinkItem from "./command-link-item.svelte";
 import List from "./command-list.svelte";
+import Loading from "./command-loading.svelte";
 import Separator from "./command-separator.svelte";
 import Shortcut from "./command-shortcut.svelte";
-import LinkItem from "./command-link-item.svelte";
-declare const Loading: typeof CommandPrimitive.Loading;
+import Root from "./command.svelte";
 export { Root, Dialog, Empty, Group, Item, LinkItem, Input, List, Separator, Shortcut, Loading, Root as Command, Dialog as CommandDialog, Empty as CommandEmpty, Group as CommandGroup, Item as CommandItem, LinkItem as CommandLinkItem, Input as CommandInput, List as CommandList, Separator as CommandSeparator, Shortcut as CommandShortcut, Loading as CommandLoading, };

package/dist/lib/components/ui/command/index.js

@@ -1,15 +1,14 @@
-import { Command as CommandPrimitive } from "bits-ui";
-import Root from "./command.svelte";
 import Dialog from "./command-dialog.svelte";
 import Empty from "./command-empty.svelte";
 import Group from "./command-group.svelte";
-import Item from "./command-item.svelte";
 import Input from "./command-input.svelte";
+import Item from "./command-item.svelte";
+import LinkItem from "./command-link-item.svelte";
 import List from "./command-list.svelte";
+import Loading from "./command-loading.svelte";
 import Separator from "./command-separator.svelte";
 import Shortcut from "./command-shortcut.svelte";
-import LinkItem from "./command-link-item.svelte";
-const Loading = CommandPrimitive.Loading;
+import Root from "./command.svelte";
 export { Root, Dialog, Empty, Group, Item, LinkItem, Input, List, Separator, Shortcut, Loading, 
 //
 Root as Command, Dialog as CommandDialog, Empty as CommandEmpty, Group as CommandGroup, Item as CommandItem, LinkItem as CommandLinkItem, Input as CommandInput, List as CommandList, Separator as CommandSeparator, Shortcut as CommandShortcut, Loading as CommandLoading, };

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

@@ -1,38 +1,41 @@
 <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 { 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 { cn } from "../../../utils";
 
 	let {
 		ref = $bindable(null),
-		class: className,
 		checked = $bindable(false),
 		indeterminate = $bindable(false),
+		class: className,
+		inset,
 		children: childrenProp,
+		closeOnSelect = false,
 		...restProps
 	}: WithoutChildrenOrChild<ContextMenuPrimitive.CheckboxItemProps> & {
+		inset?: boolean;
 		children?: Snippet;
 	} = $props();
 </script>
 
 <ContextMenuPrimitive.CheckboxItem
 	bind:ref
+	{closeOnSelect}
 	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 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 gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm data-inset:pl-7 [&_svg:not([class*='size-'])]:size-4 relative flex cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_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-4" />
-			{:else}
-				<Check class={cn("size-4", !checked && "text-transparent")} />
+	{#snippet children({ checked })}
+		<span class="absolute right-2 pointer-events-none">
+			{#if checked}
+				<CheckIcon  />
 			{/if}
 		</span>
 		{@render childrenProp?.()}

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

@@ -1,6 +1,8 @@
-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> & {
+    inset?: boolean;
     children?: Snippet;
 };
 declare const ContextMenuCheckboxItem: import("svelte").Component<$$ComponentProps, {}, "ref" | "checked" | "indeterminate">;

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

@@ -1,24 +1,28 @@
 <script lang="ts">
 	import { ContextMenu as ContextMenuPrimitive } from "bits-ui";
-	import { cn } from "../../../utils";
+	import { cn } from "../../utils.js";
+	import type { WithoutChildrenOrChild } from "../../utils.js";
+	import ContextMenuPortal from "./context-menu-portal.svelte";
+	import type { ComponentProps } from "svelte";
 
 	let {
 		ref = $bindable(null),
-		class: className,
 		portalProps,
+		class: className,
 		...restProps
 	}: ContextMenuPrimitive.ContentProps & {
-		portalProps?: ContextMenuPrimitive.PortalProps;
+		portalProps?: WithoutChildrenOrChild<ComponentProps<typeof ContextMenuPortal>>;
 	} = $props();
 </script>
 
-<ContextMenuPrimitive.Portal {...portalProps}>
+<ContextMenuPortal {...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",
+			"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 min-w-36 rounded-lg p-1 shadow-md ring-1 duration-100 z-50 max-h-(--bits-context-menu-content-available-height) origin-(--bits-context-menu-content-transform-origin) overflow-x-hidden overflow-y-auto",
 			className
 		)}
 		{...restProps}
-		bind:ref
 	/>
-</ContextMenuPrimitive.Portal>
+</ContextMenuPortal>

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

@@ -1,6 +1,9 @@
 import { ContextMenu as ContextMenuPrimitive } from "bits-ui";
+import type { WithoutChildrenOrChild } from "../../utils.js";
+import ContextMenuPortal from "./context-menu-portal.svelte";
+import type { ComponentProps } from "svelte";
 type $$ComponentProps = ContextMenuPrimitive.ContentProps & {
-    portalProps?: ContextMenuPrimitive.PortalProps;
+    portalProps?: WithoutChildrenOrChild<ComponentProps<typeof ContextMenuPortal>>;
 };
 declare const ContextMenuContent: import("svelte").Component<$$ComponentProps, {}, "ref">;
 type ContextMenuContent = ReturnType<typeof ContextMenuContent>;

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

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { ContextMenu as ContextMenuPrimitive } from "bits-ui";
-	import { cn } from "../../../utils";
+	import { cn } from "../../utils.js";
 
 	let {
 		ref = $bindable(null),
@@ -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-muted-foreground px-1.5 py-1 text-xs font-medium data-inset:pl-7", className)}
 	{...restProps}
 />

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

package/dist/lib/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/lib/components/ui/context-menu/context-menu-item.svelte

@@ -1,23 +1,27 @@
 <script lang="ts">
 	import { ContextMenu as ContextMenuPrimitive } from "bits-ui";
-	import { cn } from "../../../utils";
+	import { cn } from "../../utils.js";
 
 	let {
 		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",
+		"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 gap-1.5 rounded-md px-1.5 py-1 text-sm data-inset:pl-7 [&_svg:not([class*='size-'])]:size-4 group/context-menu-item relative flex cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
 		className
 	)}
-	bind:ref
 	{...restProps}
 />

package/dist/lib/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/lib/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-muted-foreground px-1.5 py-1 text-xs font-medium data-inset:pl-7", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>

package/dist/lib/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/lib/components/ui/context-menu/context-menu-portal.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { ContextMenu as ContextMenuPrimitive } from "bits-ui";
+
+	let { ...restProps }: ContextMenuPrimitive.PortalProps = $props();
+</script>
+
+<ContextMenuPrimitive.Portal {...restProps} />

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

@@ -0,0 +1,3 @@
+declare const ContextMenuPortal: import("svelte").Component<import("bits-ui").PortalProps, {}, "">;
+type ContextMenuPortal = ReturnType<typeof ContextMenuPortal>;
+export default ContextMenuPortal;

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

@@ -0,0 +1,16 @@
+<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/lib/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, {}, "ref" | "value">;
+type ContextMenuRadioGroup = ReturnType<typeof ContextMenuRadioGroup>;
+export default ContextMenuRadioGroup;

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

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

package/dist/lib/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/lib/components/ui/context-menu/context-menu-separator.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { ContextMenu as ContextMenuPrimitive } from "bits-ui";
-	import { cn } from "../../../utils";
+	import { cn } from "../../utils.js";
 
 	let {
 		ref = $bindable(null),
@@ -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}
 />

package/dist/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 "../../utils.js";
 	import type { HTMLAttributes } from "svelte/elements";
-	import { cn } from "../../../utils";
 
 	let {
 		ref = $bindable(null),
@@ -13,7 +12,8 @@
 
 <span
 	bind:this={ref}
-	class={cn("text-muted-foreground ml-auto text-xs tracking-widest", className)}
+	data-slot="context-menu-shortcut"
+	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/lib/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/lib/components/ui/context-menu/context-menu-sub-content.svelte

@@ -1,19 +1,31 @@
 <script lang="ts">
 	import { ContextMenu as ContextMenuPrimitive } from "bits-ui";
-	import { cn } from "../../../utils";
+	import { cn, type WithoutChildrenOrChild } from "../../utils.js";
+	import ContextMenuPortal from "./context-menu-portal.svelte";
+	import type { ComponentProps } from "svelte";
 
 	let {
 		ref = $bindable(null),
 		class: className,
+		align = "start",
+		alignOffset = -3,
+		portalProps,
 		...restProps
-	}: ContextMenuPrimitive.SubContentProps = $props();
+	}: ContextMenuPrimitive.SubContentProps & {
+		portalProps?: WithoutChildrenOrChild<ComponentProps<typeof ContextMenuPortal>>;
+	} = $props();
 </script>
 
-<ContextMenuPrimitive.SubContent
-	bind:ref
-	class={cn(
-		"bg-popover text-popover-foreground z-50 min-w-[8rem] rounded-md border p-1 shadow-lg focus:outline-none",
-		className
-	)}
-	{...restProps}
-/>
+<ContextMenuPortal {...portalProps}>
+	<ContextMenuPrimitive.SubContent
+		bind:ref
+		data-slot="context-menu-sub-content"
+		{align}
+		{alignOffset}
+		class={cn(
+			"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 z-50 origin-(--bits-context-menu-content-transform-origin) overflow-hidden",
+			className
+		)}
+		{...restProps}
+	/>
+</ContextMenuPortal>

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

@@ -1,4 +1,10 @@
 import { ContextMenu as ContextMenuPrimitive } from "bits-ui";
-declare const ContextMenuSubContent: import("svelte").Component<ContextMenuPrimitive.SubContentProps, {}, "ref">;
+import { type WithoutChildrenOrChild } from "../../utils.js";
+import ContextMenuPortal from "./context-menu-portal.svelte";
+import type { ComponentProps } from "svelte";
+type $$ComponentProps = ContextMenuPrimitive.SubContentProps & {
+    portalProps?: WithoutChildrenOrChild<ComponentProps<typeof ContextMenuPortal>>;
+};
+declare const ContextMenuSubContent: import("svelte").Component<$$ComponentProps, {}, "ref">;
 type ContextMenuSubContent = ReturnType<typeof ContextMenuSubContent>;
 export default ContextMenuSubContent;

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

@@ -1,13 +1,13 @@
 <script lang="ts">
-	import { ContextMenu as ContextMenuPrimitive, type WithoutChild } from "bits-ui";
-	import ChevronRight from "@lucide/svelte/icons/chevron-right";
-	import { cn } from "../../../utils";
+	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),
 		class: className,
-		children,
 		inset,
+		children,
 		...restProps
 	}: WithoutChild<ContextMenuPrimitive.SubTriggerProps> & {
 		inset?: boolean;
@@ -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",
+		"focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground gap-1.5 rounded-md px-1.5 py-1 text-sm data-inset:pl-7 [&_svg:not([class*='size-'])]:size-4 flex cursor-default items-center outline-hidden select-none [&_svg]:pointer-events-none [&_svg]:shrink-0",
 		className
 	)}
 	{...restProps}
 >
 	{@render children?.()}
-	<ChevronRight class="ml-auto size-4" />
+	<ChevronRightIcon class="cn-rtl-flip ml-auto" />
 </ContextMenuPrimitive.SubTrigger>

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