@kayord/ui 2.0.10 → 2.0.12

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/badge/badge.svelte

@@ -2,7 +2,7 @@
 	import { type VariantProps, tv } from "tailwind-variants";
 
 	export const badgeVariants = tv({
-		base: "focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden whitespace-nowrap rounded-full border px-2 py-0.5 text-xs font-medium transition-[color,box-shadow] focus-visible:ring-[3px] [&>svg]:pointer-events-none [&>svg]:size-3",
+		base: "focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-full border px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] [&>svg]:pointer-events-none [&>svg]:size-3",
 		variants: {
 			variant: {
 				default: "bg-primary text-primary-foreground [a&]:hover:bg-primary/90 border-transparent",

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

@@ -6,7 +6,7 @@ export declare const badgeVariants: import("tailwind-variants").TVReturnType<{
         destructive: string;
         outline: string;
     };
-}, undefined, "focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden whitespace-nowrap rounded-full border px-2 py-0.5 text-xs font-medium transition-[color,box-shadow] focus-visible:ring-[3px] [&>svg]:pointer-events-none [&>svg]:size-3", {
+}, undefined, "focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-full border px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] [&>svg]:pointer-events-none [&>svg]:size-3", {
     variant: {
         default: string;
         secondary: string;
@@ -20,7 +20,7 @@ export declare const badgeVariants: import("tailwind-variants").TVReturnType<{
         destructive: string;
         outline: string;
     };
-}, undefined, "focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden whitespace-nowrap rounded-full border px-2 py-0.5 text-xs font-medium transition-[color,box-shadow] focus-visible:ring-[3px] [&>svg]:pointer-events-none [&>svg]:size-3", unknown, unknown, undefined>>;
+}, undefined, "focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-full border px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] [&>svg]:pointer-events-none [&>svg]:size-3", unknown, unknown, undefined>>;
 export type BadgeVariant = VariantProps<typeof badgeVariants>["variant"];
 import type { HTMLAnchorAttributes } from "svelte/elements";
 import { type WithElementRef } from "../../../utils.js";

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

@@ -4,15 +4,15 @@
 	import { type VariantProps, tv } from "tailwind-variants";
 
 	export const buttonVariants = tv({
-		base: "focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive inline-flex shrink-0 items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium outline-none transition-all focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+		base: "focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive inline-flex shrink-0 items-center justify-center gap-2 rounded-md text-sm font-medium whitespace-nowrap transition-all outline-none focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
 		variants: {
 			variant: {
-				default: "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",
+				default: "bg-primary text-primary-foreground hover:bg-primary/90 shadow-xs",
 				destructive:
-					"bg-destructive shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60 text-white",
+					"bg-destructive hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60 text-white shadow-xs",
 				outline:
-					"bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 border",
-				secondary: "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",
+					"bg-background hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 border shadow-xs",
+				secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80 shadow-xs",
 				ghost: "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
 				link: "text-primary underline-offset-4 hover:underline",
 			},

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

@@ -18,7 +18,7 @@ export declare const buttonVariants: import("tailwind-variants").TVReturnType<{
         "icon-sm": string;
         "icon-lg": string;
     };
-}, undefined, "focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive inline-flex shrink-0 items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium outline-none transition-all focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0", {
+}, undefined, "focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive inline-flex shrink-0 items-center justify-center gap-2 rounded-md text-sm font-medium whitespace-nowrap transition-all outline-none focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", {
     variant: {
         default: string;
         destructive: string;
@@ -52,7 +52,7 @@ export declare const buttonVariants: import("tailwind-variants").TVReturnType<{
         "icon-sm": string;
         "icon-lg": string;
     };
-}, undefined, "focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive inline-flex shrink-0 items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium outline-none transition-all focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0", unknown, unknown, undefined>>;
+}, undefined, "focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive inline-flex shrink-0 items-center justify-center gap-2 rounded-md text-sm font-medium whitespace-nowrap transition-all outline-none focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", unknown, unknown, undefined>>;
 export type ButtonVariant = VariantProps<typeof buttonVariants>["variant"];
 export type ButtonSize = VariantProps<typeof buttonVariants>["size"];
 export type ButtonProps = WithElementRef<HTMLButtonAttributes> & WithElementRef<HTMLAnchorAttributes> & {

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

@@ -15,7 +15,7 @@
 	const mergedProps = $derived({
 		...restProps,
 		class: cn(
-			"bg-muted shadow-xs flex items-center gap-2 rounded-md border px-4 text-sm font-medium [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none",
+			"bg-muted flex items-center gap-2 rounded-md border px-4 text-sm font-medium shadow-xs [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4",
 			className
 		),
 	});

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

@@ -35,7 +35,7 @@
 		// Overrides
 		//
 		// Stroke around dots/marks when hovering
-		"[&_.stroke-white]:stroke-transparent",
+		"[&_.lc-highlight-point]:stroke-transparent",
 		// override the default stroke color of lines
 		"[&_.lc-line]:stroke-border/50",
 

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?.()}