@kayord/ui 2.0.10 → 2.0.12

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

@@ -1,14 +1,14 @@
 <script lang="ts" module>
 	import { tv, type VariantProps } from "tailwind-variants";
 	export const inputGroupAddonVariants = tv({
-		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",
+		base: "text-muted-foreground flex h-auto cursor-text items-center justify-center gap-2 py-1.5 text-sm font-medium select-none 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",
+					"order-first w-full justify-start px-3 pt-3 group-has-[>input]/input-group:pt-2.5 [.border-b]:pb-3",
+				"block-end": "order-last w-full justify-start px-3 pb-3 group-has-[>input]/input-group:pb-2.5 [.border-t]:pt-3",
 			},
 		},
 		defaultVariants: {

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

@@ -6,7 +6,7 @@ export declare const inputGroupAddonVariants: import("tailwind-variants").TVRetu
         "block-start": string;
         "block-end": string;
     };
-}, undefined, "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", {
+}, undefined, "text-muted-foreground flex h-auto cursor-text items-center justify-center gap-2 py-1.5 text-sm font-medium select-none group-data-[disabled=true]/input-group:opacity-50 [&>kbd]:rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-4", {
     align: {
         "inline-start": string;
         "inline-end": string;
@@ -20,7 +20,7 @@ export declare const inputGroupAddonVariants: import("tailwind-variants").TVRetu
         "block-start": string;
         "block-end": string;
     };
-}, undefined, "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", unknown, unknown, undefined>>;
+}, undefined, "text-muted-foreground flex h-auto cursor-text items-center justify-center gap-2 py-1.5 text-sm font-medium select-none group-data-[disabled=true]/input-group:opacity-50 [&>kbd]:rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-4", unknown, unknown, undefined>>;
 export type InputGroupAddonAlign = VariantProps<typeof inputGroupAddonVariants>["align"];
 import { type WithElementRef } from "../../../utils.js";
 import type { HTMLAttributes } from "svelte/elements";

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-separator.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import type { HTMLAttributes } from "svelte/elements";
 	import type { WithElementRef } from "../../../utils.js";
-	import DotIcon from "@lucide/svelte/icons/dot";
+	import MinusIcon from "@lucide/svelte/icons/minus";
 
 	let { ref = $bindable(null), children, ...restProps }: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
 </script>
@@ -10,6 +10,6 @@
 	{#if children}
 		{@render children?.()}
 	{:else}
-		<DotIcon />
+		<MinusIcon />
 	{/if}
 </div>

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

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

@@ -2,7 +2,7 @@
 	import { tv, type VariantProps } from "tailwind-variants";
 
 	export const itemVariants = tv({
-		base: "group/item [a]:hover:bg-accent/50 [a]:transition-colors focus-visible:border-ring focus-visible:ring-ring/50 flex flex-wrap items-center rounded-md border border-transparent text-sm outline-none transition-colors duration-100 focus-visible:ring-[3px]",
+		base: "group/item [a]:hover:bg-accent/50 focus-visible:border-ring focus-visible:ring-ring/50 flex flex-wrap items-center rounded-md border border-transparent text-sm transition-colors duration-100 outline-none focus-visible:ring-[3px] [a]:transition-colors",
 		variants: {
 			variant: {
 				default: "bg-transparent",

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

@@ -9,7 +9,7 @@ export declare const itemVariants: import("tailwind-variants").TVReturnType<{
         default: string;
         sm: string;
     };
-}, undefined, "group/item [a]:hover:bg-accent/50 [a]:transition-colors focus-visible:border-ring focus-visible:ring-ring/50 flex flex-wrap items-center rounded-md border border-transparent text-sm outline-none transition-colors duration-100 focus-visible:ring-[3px]", {
+}, undefined, "group/item [a]:hover:bg-accent/50 focus-visible:border-ring focus-visible:ring-ring/50 flex flex-wrap items-center rounded-md border border-transparent text-sm transition-colors duration-100 outline-none focus-visible:ring-[3px] [a]:transition-colors", {
     variant: {
         default: string;
         outline: string;
@@ -29,7 +29,7 @@ export declare const itemVariants: import("tailwind-variants").TVReturnType<{
         default: string;
         sm: string;
     };
-}, undefined, "group/item [a]:hover:bg-accent/50 [a]:transition-colors focus-visible:border-ring focus-visible:ring-ring/50 flex flex-wrap items-center rounded-md border border-transparent text-sm outline-none transition-colors duration-100 focus-visible:ring-[3px]", unknown, unknown, undefined>>;
+}, undefined, "group/item [a]:hover:bg-accent/50 focus-visible:border-ring focus-visible:ring-ring/50 flex flex-wrap items-center rounded-md border border-transparent text-sm transition-colors duration-100 outline-none focus-visible:ring-[3px] [a]:transition-colors", unknown, unknown, undefined>>;
 export type ItemSize = VariantProps<typeof itemVariants>["size"];
 export type ItemVariant = VariantProps<typeof itemVariants>["variant"];
 import { type WithElementRef } from "../../../utils.js";

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

@@ -1,5 +1,7 @@
-import { Menubar as MenubarPrimitive } from "bits-ui";
 import Root from "./menubar.svelte";
+import Menu from "./menubar-menu.svelte";
+import Sub from "./menubar-sub.svelte";
+import RadioGroup from "./menubar-radio-group.svelte";
 import CheckboxItem from "./menubar-checkbox-item.svelte";
 import Content from "./menubar-content.svelte";
 import Item from "./menubar-item.svelte";
@@ -12,7 +14,5 @@ import SubTrigger from "./menubar-sub-trigger.svelte";
 import Trigger from "./menubar-trigger.svelte";
 import Label from "./menubar-label.svelte";
 import GroupHeading from "./menubar-group-heading.svelte";
-declare const Menu: import("svelte").Component<import("bits-ui").MenubarMenuPropsWithoutHTML, {}, "">;
-declare const Sub: import("svelte").Component<MenubarPrimitive.SubProps, {}, "open">;
-declare const RadioGroup: import("svelte").Component<MenubarPrimitive.RadioGroupProps, {}, "value" | "ref">;
-export { Root, CheckboxItem, Content, Item, RadioItem, Separator, Shortcut, SubContent, SubTrigger, Trigger, Menu, Group, Sub, RadioGroup, Label, GroupHeading, Root as Menubar, CheckboxItem as MenubarCheckboxItem, Content as MenubarContent, Item as MenubarItem, RadioItem as MenubarRadioItem, Separator as MenubarSeparator, Shortcut as MenubarShortcut, SubContent as MenubarSubContent, SubTrigger as MenubarSubTrigger, Trigger as MenubarTrigger, Menu as MenubarMenu, Group as MenubarGroup, Sub as MenubarSub, RadioGroup as MenubarRadioGroup, Label as MenubarLabel, GroupHeading as MenubarGroupHeading, };
+import Portal from "./menubar-portal.svelte";
+export { Root, CheckboxItem, Content, Item, RadioItem, Separator, Shortcut, SubContent, SubTrigger, Trigger, Menu, Group, Sub, RadioGroup, Label, GroupHeading, Portal, Root as Menubar, CheckboxItem as MenubarCheckboxItem, Content as MenubarContent, Item as MenubarItem, RadioItem as MenubarRadioItem, Separator as MenubarSeparator, Shortcut as MenubarShortcut, SubContent as MenubarSubContent, SubTrigger as MenubarSubTrigger, Trigger as MenubarTrigger, Menu as MenubarMenu, Group as MenubarGroup, Sub as MenubarSub, RadioGroup as MenubarRadioGroup, Label as MenubarLabel, GroupHeading as MenubarGroupHeading, Portal as MenubarPortal, };

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

@@ -1,5 +1,7 @@
-import { Menubar as MenubarPrimitive } from "bits-ui";
 import Root from "./menubar.svelte";
+import Menu from "./menubar-menu.svelte";
+import Sub from "./menubar-sub.svelte";
+import RadioGroup from "./menubar-radio-group.svelte";
 import CheckboxItem from "./menubar-checkbox-item.svelte";
 import Content from "./menubar-content.svelte";
 import Item from "./menubar-item.svelte";
@@ -12,9 +14,7 @@ import SubTrigger from "./menubar-sub-trigger.svelte";
 import Trigger from "./menubar-trigger.svelte";
 import Label from "./menubar-label.svelte";
 import GroupHeading from "./menubar-group-heading.svelte";
-const Menu = MenubarPrimitive.Menu;
-const Sub = MenubarPrimitive.Sub;
-const RadioGroup = MenubarPrimitive.RadioGroup;
-export { Root, CheckboxItem, Content, Item, RadioItem, Separator, Shortcut, SubContent, SubTrigger, Trigger, Menu, Group, Sub, RadioGroup, Label, GroupHeading, 
+import Portal from "./menubar-portal.svelte";
+export { Root, CheckboxItem, Content, Item, RadioItem, Separator, Shortcut, SubContent, SubTrigger, Trigger, Menu, Group, Sub, RadioGroup, Label, GroupHeading, Portal, 
 //
-Root as Menubar, CheckboxItem as MenubarCheckboxItem, Content as MenubarContent, Item as MenubarItem, RadioItem as MenubarRadioItem, Separator as MenubarSeparator, Shortcut as MenubarShortcut, SubContent as MenubarSubContent, SubTrigger as MenubarSubTrigger, Trigger as MenubarTrigger, Menu as MenubarMenu, Group as MenubarGroup, Sub as MenubarSub, RadioGroup as MenubarRadioGroup, Label as MenubarLabel, GroupHeading as MenubarGroupHeading, };
+Root as Menubar, CheckboxItem as MenubarCheckboxItem, Content as MenubarContent, Item as MenubarItem, RadioItem as MenubarRadioItem, Separator as MenubarSeparator, Shortcut as MenubarShortcut, SubContent as MenubarSubContent, SubTrigger as MenubarSubTrigger, Trigger as MenubarTrigger, Menu as MenubarMenu, Group as MenubarGroup, Sub as MenubarSub, RadioGroup as MenubarRadioGroup, Label as MenubarLabel, GroupHeading as MenubarGroupHeading, Portal as MenubarPortal, };

package/dist/components/ui/menubar/menubar-checkbox-item.svelte

@@ -23,13 +23,13 @@
 	bind:indeterminate
 	data-slot="menubar-checkbox-item"
 	class={cn(
-		"focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-xs 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-xs 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/menubar/menubar-content.svelte

@@ -1,6 +1,8 @@
 <script lang="ts">
 	import { Menubar as MenubarPrimitive } from "bits-ui";
-	import { cn } from "../../../utils.js";
+	import MenubarPortal from "./menubar-portal.svelte";
+	import { cn, type WithoutChildrenOrChild } from "../../../utils.js";
+	import type { ComponentProps } from "svelte";
 
 	let {
 		ref = $bindable(null),
@@ -12,11 +14,11 @@
 		portalProps,
 		...restProps
 	}: MenubarPrimitive.ContentProps & {
-		portalProps?: MenubarPrimitive.PortalProps;
+		portalProps?: WithoutChildrenOrChild<ComponentProps<typeof MenubarPortal>>;
 	} = $props();
 </script>
 
-<MenubarPrimitive.Portal {...portalProps}>
+<MenubarPortal {...portalProps}>
 	<MenubarPrimitive.Content
 		bind:ref
 		data-slot="menubar-content"
@@ -25,9 +27,9 @@
 		{alignOffset}
 		{side}
 		class={cn(
-			"bg-popover text-popover-foreground data-[state=open]:animate-in 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-[12rem] origin-(--bits-menubar-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-md",
+			"bg-popover text-popover-foreground data-[state=open]:animate-in 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-[12rem] origin-(--bits-menubar-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-md",
 			className
 		)}
 		{...restProps}
 	/>
-</MenubarPrimitive.Portal>
+</MenubarPortal>

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

@@ -1,6 +1,9 @@
 import { Menubar as MenubarPrimitive } from "bits-ui";
+import MenubarPortal from "./menubar-portal.svelte";
+import { type WithoutChildrenOrChild } from "../../../utils.js";
+import type { ComponentProps } from "svelte";
 type $$ComponentProps = MenubarPrimitive.ContentProps & {
-    portalProps?: MenubarPrimitive.PortalProps;
+    portalProps?: WithoutChildrenOrChild<ComponentProps<typeof MenubarPortal>>;
 };
 declare const MenubarContent: import("svelte").Component<$$ComponentProps, {}, "ref">;
 type MenubarContent = ReturnType<typeof MenubarContent>;

package/dist/components/ui/menubar/menubar-group-heading.svelte

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

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

@@ -20,7 +20,7 @@
 	data-inset={inset}
 	data-variant={variant}
 	class={cn(
-		"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 [&_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",
+		"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 [&_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/menubar/menubar-label.svelte

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

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

@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { Menubar as MenubarPrimitive } from "bits-ui";
+
+	let { ...restProps }: MenubarPrimitive.MenuProps = $props();
+</script>
+
+<MenubarPrimitive.Menu {...restProps} />

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

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

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

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

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

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

package/dist/components/ui/menubar/menubar-radio-group.svelte

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

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

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

package/dist/components/ui/menubar/menubar-radio-item.svelte

@@ -15,13 +15,13 @@
 	bind:ref
 	data-slot="menubar-radio-item"
 	class={cn(
-		"focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-xs 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-xs 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/menubar/menubar-shortcut.svelte

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

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

package/dist/components/ui/menubar/menubar-sub-trigger.svelte

@@ -19,11 +19,11 @@
 	data-slot="menubar-sub-trigger"
 	data-inset={inset}
 	class={cn(
-		"focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-none select-none data-[inset]:pl-8",
+		"focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-none select-none data-[inset]:ps-8",
 		className
 	)}
 	{...restProps}
 >
 	{@render children?.()}
-	<ChevronRightIcon class="ml-auto size-4" />
+	<ChevronRightIcon class="ms-auto size-4" />
 </MenubarPrimitive.SubTrigger>

package/dist/components/ui/menubar/menubar-sub.svelte

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

package/dist/components/ui/menubar/menubar-sub.svelte.d.ts

@@ -0,0 +1,4 @@
+import { Menubar as MenubarPrimitive } from "bits-ui";
+declare const MenubarSub: import("svelte").Component<MenubarPrimitive.SubProps, {}, "open">;
+type MenubarSub = ReturnType<typeof MenubarSub>;
+export default MenubarSub;

package/dist/components/ui/native-select/native-select.svelte

@@ -18,7 +18,7 @@
 		bind:this={ref}
 		data-slot="native-select"
 		class={cn(
-			"border-input placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 dark:hover:bg-input/50 h-9 w-full min-w-0 appearance-none rounded-md border bg-transparent px-3 py-2 pr-9 text-sm shadow-xs transition-[color,box-shadow] outline-none disabled:pointer-events-none disabled:cursor-not-allowed",
+			"border-input placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 dark:hover:bg-input/50 h-9 w-full min-w-0 appearance-none rounded-md border bg-transparent px-3 py-2 pe-9 text-sm shadow-xs transition-[color,box-shadow] outline-none disabled:pointer-events-none disabled:cursor-not-allowed",
 			"focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
 			"aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
 			className
@@ -28,7 +28,7 @@
 		{@render children?.()}
 	</select>
 	<ChevronDownIcon
-		class="text-muted-foreground pointer-events-none absolute top-1/2 right-3.5 size-4 -translate-y-1/2 opacity-50 select-none"
+		class="text-muted-foreground pointer-events-none absolute end-3.5 top-1/2 size-4 -translate-y-1/2 opacity-50 select-none"
 		aria-hidden="true"
 		data-slot="native-select-icon"
 	/>

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

@@ -9,7 +9,7 @@
 	bind:ref
 	data-slot="navigation-menu-content"
 	class={cn(
-		"data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 top-0 left-0 w-full md:absolute md:w-auto",
+		"data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-end-52 data-[motion=from-start]:slide-in-from-start-52 data-[motion=to-end]:slide-out-to-end-52 data-[motion=to-start]:slide-out-to-start-52 start-0 top-0 w-full p-2 pe-2.5 md:absolute md:w-auto",
 		"group-data-[viewport=false]/navigation-menu:bg-popover group-data-[viewport=false]/navigation-menu:text-popover-foreground group-data-[viewport=false]/navigation-menu:data-[state=open]:animate-in group-data-[viewport=false]/navigation-menu:data-[state=closed]:animate-out group-data-[viewport=false]/navigation-menu:data-[state=closed]:zoom-out-95 group-data-[viewport=false]/navigation-menu:data-[state=open]:zoom-in-95 group-data-[viewport=false]/navigation-menu:data-[state=open]:fade-in-0 group-data-[viewport=false]/navigation-menu:data-[state=closed]:fade-out-0 group-data-[viewport=false]/navigation-menu:top-full group-data-[viewport=false]/navigation-menu:mt-1.5 group-data-[viewport=false]/navigation-menu:overflow-hidden group-data-[viewport=false]/navigation-menu:rounded-md group-data-[viewport=false]/navigation-menu:border group-data-[viewport=false]/navigation-menu:shadow group-data-[viewport=false]/navigation-menu:duration-200 **:data-[slot=navigation-menu-link]:focus:ring-0 **:data-[slot=navigation-menu-link]:focus:outline-none",
 		className
 	)}

package/dist/components/ui/navigation-menu/navigation-menu-indicator.svelte

@@ -14,5 +14,5 @@
 	)}
 	{...restProps}
 >
-	<div class="bg-border relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm shadow-md"></div>
+	<div class="bg-border rounded-ts-sm relative top-[60%] h-2 w-2 rotate-45 shadow-md"></div>
 </NavigationMenuPrimitive.Indicator>

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

@@ -3,7 +3,7 @@
 	import { tv } from "tailwind-variants";
 
 	export const navigationMenuTriggerStyle = tv({
-		base: "bg-background hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground data-[state=open]:hover:bg-accent data-[state=open]:text-accent-foreground data-[state=open]:focus:bg-accent data-[state=open]:bg-accent/50 focus-visible:ring-ring/50 group inline-flex h-9 w-max items-center justify-center rounded-md px-4 py-2 text-sm font-medium outline-none transition-[color,box-shadow] focus-visible:outline-1 focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50",
+		base: "bg-background hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground data-[state=open]:hover:bg-accent data-[state=open]:text-accent-foreground data-[state=open]:focus:bg-accent data-[state=open]:bg-accent/50 focus-visible:ring-ring/50 group inline-flex h-9 w-max items-center justify-center rounded-md px-4 py-2 text-sm font-medium transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50",
 	});
 </script>
 
@@ -28,7 +28,7 @@
 	{@render children?.()}
 
 	<ChevronDownIcon
-		class="relative top-[1px] ml-1 size-3 transition duration-300 group-data-[state=open]:rotate-180"
+		class="relative top-[1px] ms-1 size-3 transition duration-300 group-data-[state=open]:rotate-180"
 		aria-hidden="true"
 	/>
 </NavigationMenuPrimitive.Trigger>

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

@@ -1,4 +1,4 @@
-export declare const navigationMenuTriggerStyle: import("tailwind-variants").TVReturnType<{} | {} | {}, undefined, "bg-background hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground data-[state=open]:hover:bg-accent data-[state=open]:text-accent-foreground data-[state=open]:focus:bg-accent data-[state=open]:bg-accent/50 focus-visible:ring-ring/50 group inline-flex h-9 w-max items-center justify-center rounded-md px-4 py-2 text-sm font-medium outline-none transition-[color,box-shadow] focus-visible:outline-1 focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50", {} | {}, undefined, import("tailwind-variants").TVReturnType<unknown, undefined, "bg-background hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground data-[state=open]:hover:bg-accent data-[state=open]:text-accent-foreground data-[state=open]:focus:bg-accent data-[state=open]:bg-accent/50 focus-visible:ring-ring/50 group inline-flex h-9 w-max items-center justify-center rounded-md px-4 py-2 text-sm font-medium outline-none transition-[color,box-shadow] focus-visible:outline-1 focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50", unknown, unknown, undefined>>;
+export declare const navigationMenuTriggerStyle: import("tailwind-variants").TVReturnType<{} | {} | {}, undefined, "bg-background hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground data-[state=open]:hover:bg-accent data-[state=open]:text-accent-foreground data-[state=open]:focus:bg-accent data-[state=open]:bg-accent/50 focus-visible:ring-ring/50 group inline-flex h-9 w-max items-center justify-center rounded-md px-4 py-2 text-sm font-medium transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50", {} | {}, undefined, import("tailwind-variants").TVReturnType<unknown, undefined, "bg-background hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground data-[state=open]:hover:bg-accent data-[state=open]:text-accent-foreground data-[state=open]:focus:bg-accent data-[state=open]:bg-accent/50 focus-visible:ring-ring/50 group inline-flex h-9 w-max items-center justify-center rounded-md px-4 py-2 text-sm font-medium transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50", unknown, unknown, undefined>>;
 import { NavigationMenu as NavigationMenuPrimitive } from "bits-ui";
 declare const NavigationMenuTrigger: import("svelte").Component<NavigationMenuPrimitive.TriggerProps, {}, "ref">;
 type NavigationMenuTrigger = ReturnType<typeof NavigationMenuTrigger>;

package/dist/components/ui/navigation-menu/navigation-menu-viewport.svelte

@@ -5,7 +5,7 @@
 	let { ref = $bindable(null), class: className, ...restProps }: NavigationMenuPrimitive.ViewportProps = $props();
 </script>
 
-<div class={cn("absolute top-full left-0 isolate z-50 flex justify-center")}>
+<div class={cn("absolute start-0 top-full isolate z-50 flex justify-center")}>
 	<NavigationMenuPrimitive.Viewport
 		bind:ref
 		data-slot="navigation-menu-viewport"

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

@@ -5,4 +5,10 @@ import Link from "./pagination-link.svelte";
 import PrevButton from "./pagination-prev-button.svelte";
 import NextButton from "./pagination-next-button.svelte";
 import Ellipsis from "./pagination-ellipsis.svelte";
-export { Root, Content, Item, Link, PrevButton, NextButton, Ellipsis, Root as Pagination, Content as PaginationContent, Item as PaginationItem, Link as PaginationLink, PrevButton as PaginationPrevButton, NextButton as PaginationNextButton, Ellipsis as PaginationEllipsis, };
+import Previous from "./pagination-previous.svelte";
+import Next from "./pagination-next.svelte";
+export { Root, Content, Item, Link, PrevButton, //old
+NextButton, //old
+Ellipsis, Previous, Next, Root as Pagination, Content as PaginationContent, Item as PaginationItem, Link as PaginationLink, PrevButton as PaginationPrevButton, //old
+NextButton as PaginationNextButton, //old
+Ellipsis as PaginationEllipsis, Previous as PaginationPrevious, Next as PaginationNext, };

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

@@ -5,6 +5,12 @@ import Link from "./pagination-link.svelte";
 import PrevButton from "./pagination-prev-button.svelte";
 import NextButton from "./pagination-next-button.svelte";
 import Ellipsis from "./pagination-ellipsis.svelte";
-export { Root, Content, Item, Link, PrevButton, NextButton, Ellipsis, 
+import Previous from "./pagination-previous.svelte";
+import Next from "./pagination-next.svelte";
+export { Root, Content, Item, Link, PrevButton, //old
+NextButton, //old
+Ellipsis, Previous, Next, 
 //
-Root as Pagination, Content as PaginationContent, Item as PaginationItem, Link as PaginationLink, PrevButton as PaginationPrevButton, NextButton as PaginationNextButton, Ellipsis as PaginationEllipsis, };
+Root as Pagination, Content as PaginationContent, Item as PaginationItem, Link as PaginationLink, PrevButton as PaginationPrevButton, //old
+NextButton as PaginationNextButton, //old
+Ellipsis as PaginationEllipsis, Previous as PaginationPrevious, Next as PaginationNext, };

package/dist/components/ui/pagination/pagination-next-button.svelte

@@ -24,7 +24,7 @@
 		buttonVariants({
 			size: "default",
 			variant: "ghost",
-			class: "gap-1 px-2.5 sm:pr-2.5",
+			class: "gap-1 px-2.5 sm:pe-2.5",
 		}),
 		className
 	)}