@kayord/ui 2.0.9 → 2.0.11

package/dist/components/custom/action/Action.svelte

@@ -6,9 +6,9 @@
 
 	let { text, icon, action, href, class: className }: ActionType = $props();
 
-	const ActionIcon = icon;
+	const ActionIcon = $derived(icon);
 
-	const clickAction = href ? () => goto(href) : action;
+	const clickAction = $derived(href ? () => goto(href) : action);
 </script>
 
 <DropdownMenu.Item onclick={clickAction} class={cn(className)}>

package/dist/components/custom/action/Actions.svelte

@@ -8,9 +8,9 @@
 
 	let { actions, text, class: className, icon, variant = "ghost" }: ActionsType = $props();
 
-	const ActionIcon = icon;
+	const ActionIcon = $derived(icon);
 
-	const size = text ? "default" : "icon";
+	const size = $derived(text ? "default" : "icon");
 </script>
 
 <DropdownMenu.Root>

package/dist/components/custom/animations/NumberTicker.svelte

@@ -13,6 +13,7 @@
 
 	let { value, initial = 0, duration = 2000, class: className, ...restProps }: Props = $props();
 
+	// svelte-ignore state_referenced_locally
 	let num = new Tween(initial, {
 		duration: duration,
 		easing: cubicOut,

package/dist/components/custom/data-table/DataTable.svelte

@@ -56,6 +56,7 @@
 	}: Props<T> = $props();
 
 	const tableStore = new TableStore();
+	// svelte-ignore state_referenced_locally
 	const isPaginationEnabled = table.options.getPaginationRowModel !== undefined;
 
 	// Load Default Values from Page Params

package/dist/components/custom/data-table/Pagination.svelte

@@ -13,6 +13,7 @@
 
 	let { table, canChangePageSize = false }: Props<T> = $props();
 
+	// svelte-ignore state_referenced_locally
 	let value = $state(table.getState().pagination.pageSize.toString());
 </script>
 

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

@@ -19,7 +19,7 @@
 		data-slot="accordion-trigger"
 		bind:ref
 		class={cn(
-			"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 transition-all outline-none hover:underline focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&[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-start text-sm font-medium transition-all outline-none hover:underline focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180",
 			className
 		)}
 		{...restProps}

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

@@ -1,7 +1,9 @@
 <script lang="ts">
 	import { AlertDialog as AlertDialogPrimitive } from "bits-ui";
+	import AlertDialogPortal from "./alert-dialog-portal.svelte";
 	import AlertDialogOverlay from "./alert-dialog-overlay.svelte";
 	import { cn, type WithoutChild, type WithoutChildrenOrChild } from "../../../utils.js";
+	import type { ComponentProps } from "svelte";
 
 	let {
 		ref = $bindable(null),
@@ -9,19 +11,19 @@
 		portalProps,
 		...restProps
 	}: WithoutChild<AlertDialogPrimitive.ContentProps> & {
-		portalProps?: WithoutChildrenOrChild<AlertDialogPrimitive.PortalProps>;
+		portalProps?: WithoutChildrenOrChild<ComponentProps<typeof AlertDialogPortal>>;
 	} = $props();
 </script>
 
-<AlertDialogPrimitive.Portal {...portalProps}>
+<AlertDialogPortal {...portalProps}>
 	<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 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-[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 start-[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}
 	/>
-</AlertDialogPrimitive.Portal>
+</AlertDialogPortal>

package/dist/components/ui/alert-dialog/alert-dialog-content.svelte.d.ts

@@ -1,7 +1,9 @@
 import { AlertDialog as AlertDialogPrimitive } from "bits-ui";
+import AlertDialogPortal from "./alert-dialog-portal.svelte";
 import { type WithoutChild, type WithoutChildrenOrChild } from "../../../utils.js";
+import type { ComponentProps } from "svelte";
 type $$ComponentProps = WithoutChild<AlertDialogPrimitive.ContentProps> & {
-    portalProps?: WithoutChildrenOrChild<AlertDialogPrimitive.PortalProps>;
+    portalProps?: WithoutChildrenOrChild<ComponentProps<typeof AlertDialogPortal>>;
 };
 declare const AlertDialogContent: import("svelte").Component<$$ComponentProps, {}, "ref">;
 type AlertDialogContent = ReturnType<typeof AlertDialogContent>;

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

@@ -13,7 +13,7 @@
 <div
 	bind:this={ref}
 	data-slot="alert-dialog-header"
-	class={cn("flex flex-col gap-2 text-center sm:text-left", className)}
+	class={cn("flex flex-col gap-2 text-center sm:text-start", className)}
 	{...restProps}
 >
 	{@render children?.()}

package/dist/components/ui/alert-dialog/alert-dialog-portal.svelte

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

package/dist/components/ui/alert-dialog/alert-dialog-portal.svelte.d.ts

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

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

@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { AlertDialog as AlertDialogPrimitive } from "bits-ui";
+
+	let { open = $bindable(false), ...restProps }: AlertDialogPrimitive.RootProps = $props();
+</script>
+
+<AlertDialogPrimitive.Root bind:open {...restProps} />

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

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

package/dist/components/ui/alert-dialog/index.d.ts

@@ -1,3 +1,5 @@
+import Root from "./alert-dialog.svelte";
+import Portal from "./alert-dialog-portal.svelte";
 import Trigger from "./alert-dialog-trigger.svelte";
 import Title from "./alert-dialog-title.svelte";
 import Action from "./alert-dialog-action.svelte";
@@ -7,6 +9,4 @@ import Header from "./alert-dialog-header.svelte";
 import Overlay from "./alert-dialog-overlay.svelte";
 import Content from "./alert-dialog-content.svelte";
 import Description from "./alert-dialog-description.svelte";
-declare const Root: import("svelte").Component<import("bits-ui").AlertDialogRootPropsWithoutHTML, {}, "open">;
-declare const Portal: import("svelte").Component<import("bits-ui").PortalProps, {}, "">;
 export { Root, Title, Action, Cancel, Portal, Footer, Header, Trigger, Overlay, Content, Description, Root as AlertDialog, Title as AlertDialogTitle, Action as AlertDialogAction, Cancel as AlertDialogCancel, Portal as AlertDialogPortal, Footer as AlertDialogFooter, Header as AlertDialogHeader, Trigger as AlertDialogTrigger, Overlay as AlertDialogOverlay, Content as AlertDialogContent, Description as AlertDialogDescription, };

package/dist/components/ui/alert-dialog/index.js

@@ -1,4 +1,5 @@
-import { AlertDialog as AlertDialogPrimitive } from "bits-ui";
+import Root from "./alert-dialog.svelte";
+import Portal from "./alert-dialog-portal.svelte";
 import Trigger from "./alert-dialog-trigger.svelte";
 import Title from "./alert-dialog-title.svelte";
 import Action from "./alert-dialog-action.svelte";
@@ -8,8 +9,6 @@ import Header from "./alert-dialog-header.svelte";
 import Overlay from "./alert-dialog-overlay.svelte";
 import Content from "./alert-dialog-content.svelte";
 import Description from "./alert-dialog-description.svelte";
-const Root = AlertDialogPrimitive.Root;
-const Portal = AlertDialogPrimitive.Portal;
 export { Root, Title, Action, Cancel, Portal, Footer, Header, Trigger, Overlay, Content, Description, 
 //
 Root as AlertDialog, Title as AlertDialogTitle, Action as AlertDialogAction, Cancel as AlertDialogCancel, Portal as AlertDialogPortal, Footer as AlertDialogFooter, Header as AlertDialogHeader, Trigger as AlertDialogTrigger, Overlay as AlertDialogOverlay, Content as AlertDialogContent, Description as AlertDialogDescription, };

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

@@ -2,11 +2,11 @@
 	import { tv, type VariantProps } from "tailwind-variants";
 
 	export const buttonGroupVariants = tv({
-		base: "flex w-fit items-stretch has-[>[data-slot=button-group]]:gap-2 [&>*]:focus-visible:relative [&>*]:focus-visible:z-10 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-md [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1",
+		base: "flex w-fit items-stretch has-[>[data-slot=button-group]]:gap-2 [&>*]:focus-visible:relative [&>*]:focus-visible:z-10 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-e-md [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1",
 		variants: {
 			orientation: {
 				horizontal:
-					"[&>*:not(:first-child)]:rounded-l-none [&>*:not(:first-child)]:border-l-0 [&>*:not(:last-child)]:rounded-r-none",
+					"[&>*:not(:first-child)]:rounded-s-none [&>*:not(:first-child)]:border-s-0 [&>*:not(:last-child)]:rounded-e-none",
 				vertical:
 					"flex-col [&>*:not(:first-child)]:rounded-t-none [&>*:not(:first-child)]:border-t-0 [&>*:not(:last-child)]:rounded-b-none",
 			},

package/dist/components/ui/button-group/button-group.svelte.d.ts

@@ -4,7 +4,7 @@ export declare const buttonGroupVariants: import("tailwind-variants").TVReturnTy
         horizontal: string;
         vertical: string;
     };
-}, undefined, "flex w-fit items-stretch has-[>[data-slot=button-group]]:gap-2 [&>*]:focus-visible:relative [&>*]:focus-visible:z-10 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-md [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1", {
+}, undefined, "flex w-fit items-stretch has-[>[data-slot=button-group]]:gap-2 [&>*]:focus-visible:relative [&>*]:focus-visible:z-10 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-e-md [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1", {
     orientation: {
         horizontal: string;
         vertical: string;
@@ -14,7 +14,7 @@ export declare const buttonGroupVariants: import("tailwind-variants").TVReturnTy
         horizontal: string;
         vertical: string;
     };
-}, undefined, "flex w-fit items-stretch has-[>[data-slot=button-group]]:gap-2 [&>*]:focus-visible:relative [&>*]:focus-visible:z-10 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-md [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1", unknown, unknown, undefined>>;
+}, undefined, "flex w-fit items-stretch has-[>[data-slot=button-group]]:gap-2 [&>*]:focus-visible:relative [&>*]:focus-visible:z-10 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-e-md [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1", unknown, unknown, undefined>>;
 export type ButtonGroupOrientation = VariantProps<typeof buttonGroupVariants>["orientation"];
 import { type WithElementRef } from "../../../utils.js";
 import type { HTMLAttributes } from "svelte/elements";

package/dist/components/ui/calendar/calendar-cell.svelte

@@ -8,7 +8,7 @@
 <CalendarPrimitive.Cell
 	bind:ref
 	class={cn(
-		"relative size-(--cell-size) 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",
+		"relative size-(--cell-size) p-0 text-center text-sm focus-within:z-20 [&:first-child[data-selected]_[data-bits-day]]:rounded-s-md [&:last-child[data-selected]_[data-bits-day]]:rounded-e-md",
 		className
 	)}
 	{...restProps}

package/dist/components/ui/calendar/calendar-month-select.svelte

@@ -31,7 +31,7 @@
 				{/each}
 			</select>
 			<span
-				class="[&>svg]:text-muted-foreground flex h-8 items-center gap-1 rounded-md pr-1 pl-2 text-sm font-medium select-none [&>svg]:size-3.5"
+				class="[&>svg]:text-muted-foreground flex h-8 items-center gap-1 rounded-md ps-2 pe-1 text-sm font-medium select-none [&>svg]:size-3.5"
 				aria-hidden="true"
 			>
 				{monthItems.find((item) => item.value === value)?.label || selectedMonthItem.label}

package/dist/components/ui/calendar/calendar-year-select.svelte

@@ -30,7 +30,7 @@
 				{/each}
 			</select>
 			<span
-				class="[&>svg]:text-muted-foreground flex h-8 items-center gap-1 rounded-md pr-1 pl-2 text-sm font-medium select-none [&>svg]:size-3.5"
+				class="[&>svg]:text-muted-foreground flex h-8 items-center gap-1 rounded-md ps-2 pe-1 text-sm font-medium select-none [&>svg]:size-3.5"
 				aria-hidden="true"
 			>
 				{yearItems.find((item) => item.value === value)?.label || selectedYearItem.label}

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

@@ -30,7 +30,7 @@
 >
 	<div
 		bind:this={ref}
-		class={cn("flex", emblaCtx.orientation === "horizontal" ? "-ml-4" : "-mt-4 flex-col", className)}
+		class={cn("flex", emblaCtx.orientation === "horizontal" ? "-ms-4" : "-mt-4 flex-col", className)}
 		data-embla-container=""
 		{...restProps}
 	>

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

@@ -18,7 +18,7 @@
 	data-slot="carousel-item"
 	role="group"
 	aria-roledescription="slide"
-	class={cn("min-w-0 shrink-0 grow-0 basis-full", emblaCtx.orientation === "horizontal" ? "pl-4" : "pt-4", className)}
+	class={cn("min-w-0 shrink-0 grow-0 basis-full", emblaCtx.orientation === "horizontal" ? "ps-4" : "pt-4", className)}
 	data-embla-slide=""
 	{...restProps}
 >

package/dist/components/ui/carousel/carousel-next.svelte

@@ -24,8 +24,8 @@
 	class={cn(
 		"absolute size-8 rounded-full",
 		emblaCtx.orientation === "horizontal"
-			? "top-1/2 -right-12 -translate-y-1/2"
-			: "-bottom-12 left-1/2 -translate-x-1/2 rotate-90",
+			? "-end-12 top-1/2 -translate-y-1/2"
+			: "start-1/2 -bottom-12 -translate-x-1/2 rotate-90",
 		className
 	)}
 	onclick={emblaCtx.scrollNext}

package/dist/components/ui/carousel/carousel-previous.svelte

@@ -24,8 +24,8 @@
 	class={cn(
 		"absolute size-8 rounded-full",
 		emblaCtx.orientation === "horizontal"
-			? "top-1/2 -left-12 -translate-y-1/2"
-			: "-top-12 left-1/2 -translate-x-1/2 rotate-90",
+			? "-start-12 top-1/2 -translate-y-1/2"
+			: "start-1/2 -top-12 -translate-x-1/2 rotate-90",
 		className
 	)}
 	onclick={emblaCtx.scrollPrev}

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

@@ -33,7 +33,7 @@
 		hideIndicator?: boolean;
 		labelClassName?: string;
 		labelFormatter?: // eslint-disable-next-line @typescript-eslint/no-explicit-any
-		((value: any, payload: TooltipPayload[]) => string | number | Snippet) | null;
+			((value: any, payload: TooltipPayload[]) => string | number | Snippet) | null;
 		formatter?: Snippet<
 			[
 				{

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

@@ -11,7 +11,7 @@
 	}: CommandPrimitive.InputProps = $props();
 </script>
 
-<div class="flex h-9 items-center gap-2 border-b pr-8 pl-3" data-slot="command-input-wrapper">
+<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"

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

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

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

@@ -1,5 +1,5 @@
-import { Command as CommandPrimitive } from "bits-ui";
 import Root from "./command.svelte";
+import Loading from "./command-loading.svelte";
 import Dialog from "./command-dialog.svelte";
 import Empty from "./command-empty.svelte";
 import Group from "./command-group.svelte";
@@ -9,5 +9,4 @@ import List from "./command-list.svelte";
 import Separator from "./command-separator.svelte";
 import Shortcut from "./command-shortcut.svelte";
 import LinkItem from "./command-link-item.svelte";
-declare const Loading: import("svelte").Component<CommandPrimitive.LoadingProps, {}, "ref">;
 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/components/ui/command/index.js

@@ -1,5 +1,5 @@
-import { Command as CommandPrimitive } from "bits-ui";
 import Root from "./command.svelte";
+import Loading from "./command-loading.svelte";
 import Dialog from "./command-dialog.svelte";
 import Empty from "./command-empty.svelte";
 import Group from "./command-group.svelte";
@@ -9,7 +9,6 @@ import List from "./command-list.svelte";
 import Separator from "./command-separator.svelte";
 import Shortcut from "./command-shortcut.svelte";
 import LinkItem from "./command-link-item.svelte";
-const Loading = CommandPrimitive.Loading;
 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/components/ui/context-menu/context-menu-checkbox-item.svelte

@@ -22,13 +22,13 @@
 	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 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",
+		"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",
 		className
 	)}
 	{...restProps}
 >
 	{#snippet children({ checked })}
-		<span class="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+		<span class="pointer-events-none absolute start-2 flex size-3.5 items-center justify-center">
 			{#if checked}
 				<CheckIcon class="size-4" />
 			{/if}

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

@@ -1,6 +1,9 @@
 <script lang="ts">
 	import { ContextMenu as ContextMenuPrimitive } from "bits-ui";
 	import { cn } from "../../../utils.js";
+	import ContextMenuPortal from "./context-menu-portal.svelte";
+	import type { ComponentProps } from "svelte";
+	import type { WithoutChildrenOrChild } from "../../../utils.js";
 
 	let {
 		ref = $bindable(null),
@@ -8,18 +11,18 @@
 		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 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",
+			"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",
 			className
 		)}
 		{...restProps}
 	/>
-</ContextMenuPrimitive.Portal>
+</ContextMenuPortal>

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

@@ -1,6 +1,9 @@
 import { ContextMenu as ContextMenuPrimitive } from "bits-ui";
+import ContextMenuPortal from "./context-menu-portal.svelte";
+import type { ComponentProps } from "svelte";
+import type { WithoutChildrenOrChild } from "../../../utils.js";
 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/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]:pl-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]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+		"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",
 		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]:pl-8", className)}
+	class={cn("text-foreground px-2 py-1.5 text-sm font-medium data-[inset]:ps-8", className)}
 	{...restProps}
 >
 	{@render children?.()}

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

@@ -15,13 +15,13 @@
 	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 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",
+		"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",
 		className
 	)}
 	{...restProps}
 >
 	{#snippet children({ checked })}
-		<span class="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+		<span class="pointer-events-none absolute start-2 flex size-3.5 items-center justify-center">
 			{#if checked}
 				<CircleIcon class="size-2 fill-current" />
 			{/if}

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

@@ -13,7 +13,7 @@
 <span
 	bind:this={ref}
 	data-slot="context-menu-shortcut"
-	class={cn("text-muted-foreground ml-auto text-xs tracking-widest", className)}
+	class={cn("text-muted-foreground ms-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-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",
+		"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",
 		className
 	)}
 	{...restProps}

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

@@ -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]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+		"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",
 		className
 	)}
 	{...restProps}
 >
 	{@render children?.()}
-	<ChevronRightIcon class="ml-auto" />
+	<ChevronRightIcon class="ms-auto" />
 </ContextMenuPrimitive.SubTrigger>

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

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

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

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

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

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

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

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

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

@@ -1,3 +1,6 @@
+import Root from "./context-menu.svelte";
+import Sub from "./context-menu-sub.svelte";
+import Portal from "./context-menu-portal.svelte";
 import Trigger from "./context-menu-trigger.svelte";
 import Group from "./context-menu-group.svelte";
 import RadioGroup from "./context-menu-radio-group.svelte";
@@ -11,6 +14,4 @@ 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">;
-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, };
+export { Root, Sub, Portal, Item, GroupHeading, Label, Group, Trigger, Content, Shortcut, Separator, RadioItem, SubContent, SubTrigger, RadioGroup, CheckboxItem, Root as ContextMenu, Sub as ContextMenuSub, Portal as ContextMenuPortal, 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,6 @@
-import { ContextMenu as ContextMenuPrimitive } from "bits-ui";
+import Root from "./context-menu.svelte";
+import Sub from "./context-menu-sub.svelte";
+import Portal from "./context-menu-portal.svelte";
 import Trigger from "./context-menu-trigger.svelte";
 import Group from "./context-menu-group.svelte";
 import RadioGroup from "./context-menu-radio-group.svelte";
@@ -12,8 +14,6 @@ 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;
-export { Sub, Root, Item, GroupHeading, Label, Group, Trigger, Content, Shortcut, Separator, RadioItem, SubContent, SubTrigger, RadioGroup, CheckboxItem, 
+export { Root, Sub, Portal, 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, };
+Root as ContextMenu, Sub as ContextMenuSub, Portal as ContextMenuPortal, 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, };