@kayord/ui 2.0.9 → 2.0.11

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

@@ -1,9 +1,11 @@
 <script lang="ts">
 	import { Dialog as DialogPrimitive } from "bits-ui";
+	import DialogPortal from "./dialog-portal.svelte";
 	import XIcon from "@lucide/svelte/icons/x";
 	import type { Snippet } from "svelte";
 	import * as Dialog from "./index.js";
 	import { cn, type WithoutChildrenOrChild } from "../../../utils.js";
+	import type { ComponentProps } from "svelte";
 
 	let {
 		ref = $bindable(null),
@@ -13,19 +15,19 @@
 		showCloseButton = true,
 		...restProps
 	}: WithoutChildrenOrChild<DialogPrimitive.ContentProps> & {
-		portalProps?: DialogPrimitive.PortalProps;
+		portalProps?: WithoutChildrenOrChild<ComponentProps<typeof DialogPortal>>;
 		children: Snippet;
 		showCloseButton?: boolean;
 	} = $props();
 </script>
 
-<Dialog.Portal {...portalProps}>
+<DialogPortal {...portalProps}>
 	<Dialog.Overlay />
 	<DialogPrimitive.Content
 		bind:ref
 		data-slot="dialog-content"
 		class={cn(
-			"bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed 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}
@@ -40,4 +42,4 @@
 			</DialogPrimitive.Close>
 		{/if}
 	</DialogPrimitive.Content>
-</Dialog.Portal>
+</DialogPortal>

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

@@ -1,8 +1,10 @@
 import { Dialog as DialogPrimitive } from "bits-ui";
+import DialogPortal from "./dialog-portal.svelte";
 import type { Snippet } from "svelte";
 import { type WithoutChildrenOrChild } from "../../../utils.js";
+import type { ComponentProps } from "svelte";
 type $$ComponentProps = WithoutChildrenOrChild<DialogPrimitive.ContentProps> & {
-    portalProps?: DialogPrimitive.PortalProps;
+    portalProps?: WithoutChildrenOrChild<ComponentProps<typeof DialogPortal>>;
     children: Snippet;
     showCloseButton?: boolean;
 };

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

@@ -13,7 +13,7 @@
 <div
 	bind:this={ref}
 	data-slot="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/dialog/dialog-portal.svelte

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

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

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

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

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

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

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

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

@@ -1,3 +1,5 @@
+import Root from "./dialog.svelte";
+import Portal from "./dialog-portal.svelte";
 import Title from "./dialog-title.svelte";
 import Footer from "./dialog-footer.svelte";
 import Header from "./dialog-header.svelte";
@@ -6,6 +8,4 @@ import Content from "./dialog-content.svelte";
 import Description from "./dialog-description.svelte";
 import Trigger from "./dialog-trigger.svelte";
 import Close from "./dialog-close.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, Portal, Footer, Header, Trigger, Overlay, Content, Description, Close, Root as Dialog, Title as DialogTitle, Portal as DialogPortal, Footer as DialogFooter, Header as DialogHeader, Trigger as DialogTrigger, Overlay as DialogOverlay, Content as DialogContent, Description as DialogDescription, Close as DialogClose, };

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

@@ -1,4 +1,5 @@
-import { Dialog as DialogPrimitive } from "bits-ui";
+import Root from "./dialog.svelte";
+import Portal from "./dialog-portal.svelte";
 import Title from "./dialog-title.svelte";
 import Footer from "./dialog-footer.svelte";
 import Header from "./dialog-header.svelte";
@@ -7,8 +8,6 @@ import Content from "./dialog-content.svelte";
 import Description from "./dialog-description.svelte";
 import Trigger from "./dialog-trigger.svelte";
 import Close from "./dialog-close.svelte";
-const Root = DialogPrimitive.Root;
-const Portal = DialogPrimitive.Portal;
 export { Root, Title, Portal, Footer, Header, Trigger, Overlay, Content, Description, Close, 
 //
 Root as Dialog, Title as DialogTitle, Portal as DialogPortal, Footer as DialogFooter, Header as DialogHeader, Trigger as DialogTrigger, Overlay as DialogOverlay, Content as DialogContent, Description as DialogDescription, Close as DialogClose, };

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

@@ -1,7 +1,10 @@
 <script lang="ts">
 	import { Drawer as DrawerPrimitive } from "vaul-svelte";
+	import DrawerPortal from "./drawer-portal.svelte";
 	import DrawerOverlay from "./drawer-overlay.svelte";
 	import { cn } from "../../../utils.js";
+	import type { ComponentProps } from "svelte";
+	import type { WithoutChildrenOrChild } from "../../../utils.js";
 
 	let {
 		ref = $bindable(null),
@@ -10,11 +13,11 @@
 		children,
 		...restProps
 	}: DrawerPrimitive.ContentProps & {
-		portalProps?: DrawerPrimitive.PortalProps;
+		portalProps?: WithoutChildrenOrChild<ComponentProps<typeof DrawerPortal>>;
 	} = $props();
 </script>
 
-<DrawerPrimitive.Portal {...portalProps}>
+<DrawerPortal {...portalProps}>
 	<DrawerOverlay />
 	<DrawerPrimitive.Content
 		bind:ref
@@ -23,8 +26,8 @@
 			"group/drawer-content bg-background fixed z-50 flex h-auto flex-col",
 			"data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80vh] data-[vaul-drawer-direction=top]:rounded-b-lg data-[vaul-drawer-direction=top]:border-b",
 			"data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[80vh] data-[vaul-drawer-direction=bottom]:rounded-t-lg data-[vaul-drawer-direction=bottom]:border-t",
-			"data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:right-0 data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=right]:border-l data-[vaul-drawer-direction=right]:sm:max-w-sm",
-			"data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:left-0 data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=left]:border-r data-[vaul-drawer-direction=left]:sm:max-w-sm",
+			"data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:end-0 data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=right]:border-s data-[vaul-drawer-direction=right]:sm:max-w-sm",
+			"data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:start-0 data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=left]:border-e data-[vaul-drawer-direction=left]:sm:max-w-sm",
 			className
 		)}
 		{...restProps}
@@ -34,4 +37,4 @@
 		></div>
 		{@render children?.()}
 	</DrawerPrimitive.Content>
-</DrawerPrimitive.Portal>
+</DrawerPortal>

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

@@ -1,6 +1,9 @@
 import { Drawer as DrawerPrimitive } from "vaul-svelte";
+import DrawerPortal from "./drawer-portal.svelte";
+import type { ComponentProps } from "svelte";
+import type { WithoutChildrenOrChild } from "../../../utils.js";
 type $$ComponentProps = DrawerPrimitive.ContentProps & {
-    portalProps?: DrawerPrimitive.PortalProps;
+    portalProps?: WithoutChildrenOrChild<ComponentProps<typeof DrawerPortal>>;
 };
 declare const DrawerContent: import("svelte").Component<$$ComponentProps, {}, "ref">;
 type DrawerContent = ReturnType<typeof DrawerContent>;

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

@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { Drawer as DrawerPrimitive } from "vaul-svelte";
+
+	let { ...restProps }: DrawerPrimitive.PortalProps = $props();
+</script>
+
+<DrawerPrimitive.Portal {...restProps} />

package/dist/components/ui/drawer/drawer-portal.svelte.d.ts

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

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

@@ -1,4 +1,3 @@
-import { Drawer as DrawerPrimitive } from "vaul-svelte";
 import Root from "./drawer.svelte";
 import Content from "./drawer-content.svelte";
 import Description from "./drawer-description.svelte";
@@ -9,5 +8,5 @@ import Title from "./drawer-title.svelte";
 import NestedRoot from "./drawer-nested.svelte";
 import Close from "./drawer-close.svelte";
 import Trigger from "./drawer-trigger.svelte";
-declare const Portal: typeof DrawerPrimitive.Portal;
+import Portal from "./drawer-portal.svelte";
 export { Root, NestedRoot, Content, Description, Overlay, Footer, Header, Title, Trigger, Portal, Close, Root as Drawer, NestedRoot as DrawerNestedRoot, Content as DrawerContent, Description as DrawerDescription, Overlay as DrawerOverlay, Footer as DrawerFooter, Header as DrawerHeader, Title as DrawerTitle, Trigger as DrawerTrigger, Portal as DrawerPortal, Close as DrawerClose, };

package/dist/components/ui/drawer/index.js

@@ -1,4 +1,3 @@
-import { Drawer as DrawerPrimitive } from "vaul-svelte";
 import Root from "./drawer.svelte";
 import Content from "./drawer-content.svelte";
 import Description from "./drawer-description.svelte";
@@ -9,7 +8,7 @@ import Title from "./drawer-title.svelte";
 import NestedRoot from "./drawer-nested.svelte";
 import Close from "./drawer-close.svelte";
 import Trigger from "./drawer-trigger.svelte";
-const Portal = DrawerPrimitive.Portal;
+import Portal from "./drawer-portal.svelte";
 export { Root, NestedRoot, Content, Description, Overlay, Footer, Header, Title, Trigger, Portal, Close, 
 //
 Root as Drawer, NestedRoot as DrawerNestedRoot, Content as DrawerContent, Description as DrawerDescription, Overlay as DrawerOverlay, Footer as DrawerFooter, Header as DrawerHeader, Title as DrawerTitle, Trigger as DrawerTrigger, Portal as DrawerPortal, Close as DrawerClose, };

package/dist/components/ui/dropdown-menu/dropdown-menu-checkbox-group.svelte

@@ -1,7 +1,11 @@
 <script lang="ts">
 	import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
 
-	let { ref = $bindable(null), value = $bindable(), ...restProps }: DropdownMenuPrimitive.CheckboxGroupProps = $props();
+	let {
+		ref = $bindable(null),
+		value = $bindable([]),
+		...restProps
+	}: DropdownMenuPrimitive.CheckboxGroupProps = $props();
 </script>
 
 <DropdownMenuPrimitive.CheckboxGroup bind:ref bind:value data-slot="dropdown-menu-checkbox-group" {...restProps} />

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

@@ -23,13 +23,13 @@
 	bind:indeterminate
 	data-slot="dropdown-menu-checkbox-item"
 	class={cn(
-		"focus:bg-accent focus: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",
+		"focus:bg-accent focus: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, indeterminate })}
-		<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 indeterminate}
 				<MinusIcon class="size-4" />
 			{:else}

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

@@ -1,6 +1,8 @@
 <script lang="ts">
-	import { cn } from "../../../utils.js";
+	import { cn, type WithoutChildrenOrChild } from "../../../utils.js";
+	import DropdownMenuPortal from "./dropdown-menu-portal.svelte";
 	import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
+	import type { ComponentProps } from "svelte";
 
 	let {
 		ref = $bindable(null),
@@ -9,19 +11,19 @@
 		class: className,
 		...restProps
 	}: DropdownMenuPrimitive.ContentProps & {
-		portalProps?: DropdownMenuPrimitive.PortalProps;
+		portalProps?: WithoutChildrenOrChild<ComponentProps<typeof DropdownMenuPortal>>;
 	} = $props();
 </script>
 
-<DropdownMenuPrimitive.Portal {...portalProps}>
+<DropdownMenuPortal {...portalProps}>
 	<DropdownMenuPrimitive.Content
 		bind:ref
 		data-slot="dropdown-menu-content"
 		{sideOffset}
 		class={cn(
-			"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-(--bits-dropdown-menu-content-available-height) min-w-[8rem] origin-(--bits-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md outline-none",
+			"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-end-2 data-[side=right]:slide-in-from-start-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-(--bits-dropdown-menu-content-available-height) min-w-[8rem] origin-(--bits-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md outline-none",
 			className
 		)}
 		{...restProps}
 	/>
-</DropdownMenuPrimitive.Portal>
+</DropdownMenuPortal>

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

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

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

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

package/dist/components/ui/dropdown-menu/dropdown-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/dropdown-menu/dropdown-menu-label.svelte

@@ -17,7 +17,7 @@
 	bind:this={ref}
 	data-slot="dropdown-menu-label"
 	data-inset={inset}
-	class={cn("px-2 py-1.5 text-sm font-semibold data-[inset]:pl-8", className)}
+	class={cn("px-2 py-1.5 text-sm font-semibold data-[inset]:ps-8", className)}
 	{...restProps}
 >
 	{@render children?.()}

package/dist/components/ui/dropdown-menu/dropdown-menu-portal.svelte

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

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

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

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

@@ -15,13 +15,13 @@
 	bind:ref
 	data-slot="dropdown-menu-radio-item"
 	class={cn(
-		"focus:bg-accent focus: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",
+		"focus:bg-accent focus: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/dropdown-menu/dropdown-menu-shortcut.svelte

@@ -13,7 +13,7 @@
 <span
 	bind:this={ref}
 	data-slot="dropdown-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/dropdown-menu/dropdown-menu-sub-content.svelte

@@ -9,7 +9,7 @@
 	bind:ref
 	data-slot="dropdown-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-dropdown-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-dropdown-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg",
 		className
 	)}
 	{...restProps}

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

@@ -19,11 +19,11 @@
 	data-slot="dropdown-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 size-4" />
+	<ChevronRightIcon class="ms-auto size-4" />
 </DropdownMenuPrimitive.SubTrigger>

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,18 @@
+import Root from "./dropdown-menu.svelte";
+import Sub from "./dropdown-menu-sub.svelte";
+import CheckboxGroup from "./dropdown-menu-checkbox-group.svelte";
+import CheckboxItem from "./dropdown-menu-checkbox-item.svelte";
+import Content from "./dropdown-menu-content.svelte";
+import Group from "./dropdown-menu-group.svelte";
+import Item from "./dropdown-menu-item.svelte";
+import Label from "./dropdown-menu-label.svelte";
+import RadioGroup from "./dropdown-menu-radio-group.svelte";
+import RadioItem from "./dropdown-menu-radio-item.svelte";
+import Separator from "./dropdown-menu-separator.svelte";
+import Shortcut from "./dropdown-menu-shortcut.svelte";
+import Trigger from "./dropdown-menu-trigger.svelte";
+import SubContent from "./dropdown-menu-sub-content.svelte";
+import SubTrigger from "./dropdown-menu-sub-trigger.svelte";
+import GroupHeading from "./dropdown-menu-group-heading.svelte";
+import Portal from "./dropdown-menu-portal.svelte";
+export { CheckboxGroup, CheckboxItem, Content, Portal, Root as DropdownMenu, CheckboxGroup as DropdownMenuCheckboxGroup, CheckboxItem as DropdownMenuCheckboxItem, Content as DropdownMenuContent, Portal as DropdownMenuPortal, Group as DropdownMenuGroup, Item as DropdownMenuItem, Label as DropdownMenuLabel, RadioGroup as DropdownMenuRadioGroup, RadioItem as DropdownMenuRadioItem, Separator as DropdownMenuSeparator, Shortcut as DropdownMenuShortcut, Sub as DropdownMenuSub, SubContent as DropdownMenuSubContent, SubTrigger as DropdownMenuSubTrigger, Trigger as DropdownMenuTrigger, GroupHeading as DropdownMenuGroupHeading, Group, GroupHeading, Item, Label, RadioGroup, RadioItem, Root, Separator, Shortcut, Sub, SubContent, SubTrigger, Trigger, };

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

@@ -1,4 +1,5 @@
-import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
+import Root from "./dropdown-menu.svelte";
+import Sub from "./dropdown-menu-sub.svelte";
 import CheckboxGroup from "./dropdown-menu-checkbox-group.svelte";
 import CheckboxItem from "./dropdown-menu-checkbox-item.svelte";
 import Content from "./dropdown-menu-content.svelte";
@@ -13,6 +14,5 @@ import Trigger from "./dropdown-menu-trigger.svelte";
 import SubContent from "./dropdown-menu-sub-content.svelte";
 import SubTrigger from "./dropdown-menu-sub-trigger.svelte";
 import GroupHeading from "./dropdown-menu-group-heading.svelte";
-const Sub = DropdownMenuPrimitive.Sub;
-const Root = DropdownMenuPrimitive.Root;
-export { CheckboxGroup, CheckboxItem, Content, Root as DropdownMenu, CheckboxGroup as DropdownMenuCheckboxGroup, CheckboxItem as DropdownMenuCheckboxItem, Content as DropdownMenuContent, Group as DropdownMenuGroup, Item as DropdownMenuItem, Label as DropdownMenuLabel, RadioGroup as DropdownMenuRadioGroup, RadioItem as DropdownMenuRadioItem, Separator as DropdownMenuSeparator, Shortcut as DropdownMenuShortcut, Sub as DropdownMenuSub, SubContent as DropdownMenuSubContent, SubTrigger as DropdownMenuSubTrigger, Trigger as DropdownMenuTrigger, GroupHeading as DropdownMenuGroupHeading, Group, GroupHeading, Item, Label, RadioGroup, RadioItem, Root, Separator, Shortcut, Sub, SubContent, SubTrigger, Trigger, };
+import Portal from "./dropdown-menu-portal.svelte";
+export { CheckboxGroup, CheckboxItem, Content, Portal, Root as DropdownMenu, CheckboxGroup as DropdownMenuCheckboxGroup, CheckboxItem as DropdownMenuCheckboxItem, Content as DropdownMenuContent, Portal as DropdownMenuPortal, Group as DropdownMenuGroup, Item as DropdownMenuItem, Label as DropdownMenuLabel, RadioGroup as DropdownMenuRadioGroup, RadioItem as DropdownMenuRadioItem, Separator as DropdownMenuSeparator, Shortcut as DropdownMenuShortcut, Sub as DropdownMenuSub, SubContent as DropdownMenuSubContent, SubTrigger as DropdownMenuSubTrigger, Trigger as DropdownMenuTrigger, GroupHeading as DropdownMenuGroupHeading, Group, GroupHeading, Item, Label, RadioGroup, RadioItem, Root, Separator, Shortcut, Sub, SubContent, SubTrigger, Trigger, };

package/dist/components/ui/field/field-error.svelte

@@ -46,7 +46,7 @@
 		{:else if singleErrorMessage}
 			{singleErrorMessage}
 		{:else if isMultipleErrors}
-			<ul class="ml-4 flex list-disc flex-col gap-1">
+			<ul class="ms-4 flex list-disc flex-col gap-1">
 				{#each errors ?? [] as error, index (index)}
 					{#if error?.message}
 						<li>{error.message}</li>

package/dist/components/ui/hover-card/hover-card-content.svelte

@@ -1,6 +1,8 @@
 <script lang="ts">
 	import { LinkPreview as HoverCardPrimitive } from "bits-ui";
-	import { cn } from "../../../utils.js";
+	import { cn, type WithoutChildrenOrChild } from "../../../utils.js";
+	import HoverCardPortal from "./hover-card-portal.svelte";
+	import type { ComponentProps } from "svelte";
 
 	let {
 		ref = $bindable(null),
@@ -10,20 +12,20 @@
 		portalProps,
 		...restProps
 	}: HoverCardPrimitive.ContentProps & {
-		portalProps?: HoverCardPrimitive.PortalProps;
+		portalProps?: WithoutChildrenOrChild<ComponentProps<typeof HoverCardPortal>>;
 	} = $props();
 </script>
 
-<HoverCardPrimitive.Portal {...portalProps}>
+<HoverCardPortal {...portalProps}>
 	<HoverCardPrimitive.Content
 		bind:ref
 		data-slot="hover-card-content"
 		{align}
 		{sideOffset}
 		class={cn(
-			"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 mt-3 w-64 rounded-md border p-4 shadow-md outline-hidden outline-none",
+			"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-end-2 data-[side=right]:slide-in-from-start-2 data-[side=top]:slide-in-from-bottom-2 z-50 mt-3 w-64 rounded-md border p-4 shadow-md outline-hidden outline-none",
 			className
 		)}
 		{...restProps}
 	/>
-</HoverCardPrimitive.Portal>
+</HoverCardPortal>

package/dist/components/ui/hover-card/hover-card-content.svelte.d.ts

@@ -1,6 +1,9 @@
 import { LinkPreview as HoverCardPrimitive } from "bits-ui";
+import { type WithoutChildrenOrChild } from "../../../utils.js";
+import HoverCardPortal from "./hover-card-portal.svelte";
+import type { ComponentProps } from "svelte";
 type $$ComponentProps = HoverCardPrimitive.ContentProps & {
-    portalProps?: HoverCardPrimitive.PortalProps;
+    portalProps?: WithoutChildrenOrChild<ComponentProps<typeof HoverCardPortal>>;
 };
 declare const HoverCardContent: import("svelte").Component<$$ComponentProps, {}, "ref">;
 type HoverCardContent = ReturnType<typeof HoverCardContent>;

package/dist/components/ui/hover-card/hover-card-portal.svelte

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

package/dist/components/ui/hover-card/hover-card-portal.svelte.d.ts

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

package/dist/components/ui/hover-card/hover-card.svelte

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

package/dist/components/ui/hover-card/hover-card.svelte.d.ts

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

package/dist/components/ui/hover-card/index.d.ts

@@ -1,4 +1,5 @@
+import Root from "./hover-card.svelte";
 import Content from "./hover-card-content.svelte";
 import Trigger from "./hover-card-trigger.svelte";
-declare const Root: import("svelte").Component<import("bits-ui").LinkPreviewRootPropsWithoutHTML, {}, "open">;
-export { Root, Content, Trigger, Root as HoverCard, Content as HoverCardContent, Trigger as HoverCardTrigger };
+import Portal from "./hover-card-portal.svelte";
+export { Root, Content, Trigger, Portal, Root as HoverCard, Content as HoverCardContent, Trigger as HoverCardTrigger, Portal as HoverCardPortal, };

package/dist/components/ui/hover-card/index.js

@@ -1,5 +1,5 @@
-import { LinkPreview as HoverCardPrimitive } from "bits-ui";
+import Root from "./hover-card.svelte";
 import Content from "./hover-card-content.svelte";
 import Trigger from "./hover-card-trigger.svelte";
-const Root = HoverCardPrimitive.Root;
-export { Root, Content, Trigger, Root as HoverCard, Content as HoverCardContent, Trigger as HoverCardTrigger };
+import Portal from "./hover-card-portal.svelte";
+export { Root, Content, Trigger, Portal, Root as HoverCard, Content as HoverCardContent, Trigger as HoverCardTrigger, Portal as HoverCardPortal, };

package/dist/components/ui/input-group/input-group-addon.svelte

@@ -4,8 +4,8 @@
 		base: "text-muted-foreground flex h-auto cursor-text select-none items-center justify-center gap-2 py-1.5 text-sm font-medium group-data-[disabled=true]/input-group:opacity-50 [&>kbd]:rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-4",
 		variants: {
 			align: {
-				"inline-start": "order-first pl-3 has-[>button]:ml-[-0.45rem] has-[>kbd]:ml-[-0.35rem]",
-				"inline-end": "order-last pr-3 has-[>button]:mr-[-0.45rem] has-[>kbd]:mr-[-0.35rem]",
+				"inline-start": "order-first ps-3 has-[>button]:ms-[-0.45rem] has-[>kbd]:ms-[-0.35rem]",
+				"inline-end": "order-last pe-3 has-[>button]:me-[-0.45rem] has-[>kbd]:me-[-0.35rem]",
 				"block-start":
 					"[.border-b]:pb-3 order-first w-full justify-start px-3 pt-3 group-has-[>input]/input-group:pt-2.5",
 				"block-end": "[.border-t]:pt-3 order-last w-full justify-start px-3 pb-3 group-has-[>input]/input-group:pb-2.5",

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

@@ -19,8 +19,8 @@
 		"h-9 has-[>textarea]:h-auto",
 
 		// Variants based on alignment.
-		"has-[>[data-align=inline-start]]:[&>input]:pl-2",
-		"has-[>[data-align=inline-end]]:[&>input]:pr-2",
+		"has-[>[data-align=inline-start]]:[&>input]:ps-2",
+		"has-[>[data-align=inline-end]]:[&>input]:pe-2",
 		"has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>[data-align=block-start]]:[&>input]:pb-3",
 		"has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-end]]:[&>input]:pt-3",
 

package/dist/components/ui/input-otp/input-otp-slot.svelte

@@ -10,7 +10,7 @@
 	bind:ref
 	data-slot="input-otp-slot"
 	class={cn(
-		"border-input aria-invalid:border-destructive dark:bg-input/30 relative flex size-9 items-center justify-center border-y border-r text-sm transition-all outline-none first:rounded-l-md first:border-l last:rounded-r-md",
+		"border-input aria-invalid:border-destructive dark:bg-input/30 relative flex size-9 items-center justify-center border-y border-e text-sm transition-all outline-none first:rounded-s-md first:border-s last:rounded-e-md",
 		cell.isActive &&
 			"border-ring ring-ring/50 aria-invalid:border-destructive dark:aria-invalid:ring-destructive/40 aria-invalid:ring-destructive/20 ring-offset-background z-10 ring-[3px]",
 		className