@kayord/ui 0.19.0 → 0.19.3

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

@@ -33,7 +33,7 @@
 					{@render action.child?.()}
 				{:else}
 					<DropdownMenu.Group>
-						<DropdownMenu.Label>Actions</DropdownMenu.Label>
+						<DropdownMenu.Label>{action.label}</DropdownMenu.Label>
 					</DropdownMenu.Group>
 				{/if}
 			{:else}

package/dist/components/custom/combobox/Combobox.svelte.d.ts

@@ -12,6 +12,6 @@ interface Props {
     shouldFilter?: boolean;
     search?: string;
 }
-declare const Combobox: import("svelte").Component<Props, {}, "search" | "value" | "open">;
+declare const Combobox: import("svelte").Component<Props, {}, "value" | "search" | "open">;
 type Combobox = ReturnType<typeof Combobox>;
 export default Combobox;

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

@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { Accordion as AccordionPrimitive, type WithoutChild } from "bits-ui";
-	import { cn } from "../../../utils.js";
+	import { Accordion as AccordionPrimitive } from "bits-ui";
+	import { cn, type WithoutChild } from "../../../utils.js";
 
 	let {
 		ref = $bindable(null),
@@ -12,8 +12,9 @@
 
 <AccordionPrimitive.Content
 	bind:ref
+	data-slot="accordion-content"
 	class={cn(
-		"data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm transition-all",
+		"data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm",
 		className
 	)}
 	{...restProps}

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

@@ -5,4 +5,9 @@
 	let { ref = $bindable(null), class: className, ...restProps }: AccordionPrimitive.ItemProps = $props();
 </script>
 
-<AccordionPrimitive.Item bind:ref class={cn("border-b", className)} {...restProps} />
+<AccordionPrimitive.Item
+	bind:ref
+	data-slot="accordion-item"
+	class={cn("border-b last:border-b-0", className)}
+	{...restProps}
+/>

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

@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { Accordion as AccordionPrimitive } from "bits-ui";
+
+	let { ref = $bindable(null), value = $bindable(), ...restProps }: AccordionPrimitive.RootProps = $props();
+</script>
+
+<AccordionPrimitive.Root bind:ref bind:value={value as never} data-slot="accordion" {...restProps} />

package/dist/components/ui/accordion/accordion-root.svelte.d.ts

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

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

@@ -1,7 +1,7 @@
 <script lang="ts">
-	import { Accordion as AccordionPrimitive, type WithoutChild } from "bits-ui";
-	import ChevronDown from "@lucide/svelte/icons/chevron-down";
-	import { cn } from "../../../utils.js";
+	import { Accordion as AccordionPrimitive } from "bits-ui";
+	import ChevronDownIcon from "@lucide/svelte/icons/chevron-down";
+	import { cn, type WithoutChild } from "../../../utils.js";
 
 	let {
 		ref = $bindable(null),
@@ -16,14 +16,17 @@
 
 <AccordionPrimitive.Header {level} class="flex">
 	<AccordionPrimitive.Trigger
+		data-slot="accordion-trigger"
 		bind:ref
 		class={cn(
-			"flex flex-1 items-center justify-between py-4 font-medium transition-all hover:underline [&[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-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",
 			className
 		)}
 		{...restProps}
 	>
 		{@render children?.()}
-		<ChevronDown class="size-4 shrink-0 transition-transform duration-200" />
+		<ChevronDownIcon
+			class="text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200"
+		/>
 	</AccordionPrimitive.Trigger>
 </AccordionPrimitive.Header>

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

@@ -1,4 +1,5 @@
-import { Accordion as AccordionPrimitive, type WithoutChild } from "bits-ui";
+import { Accordion as AccordionPrimitive } from "bits-ui";
+import { type WithoutChild } from "../../../utils.js";
 type $$ComponentProps = WithoutChild<AccordionPrimitive.TriggerProps> & {
     level?: AccordionPrimitive.HeaderProps["level"];
 };

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

@@ -1,6 +1,5 @@
-import { Accordion as AccordionPrimitive } from "bits-ui";
+import Root from "./accordion-root.svelte";
 import Content from "./accordion-content.svelte";
 import Item from "./accordion-item.svelte";
 import Trigger from "./accordion-trigger.svelte";
-declare const Root: import("svelte").Component<AccordionPrimitive.RootProps, {}, "ref" | "value">;
 export { Root, Content, Item, Trigger, Root as Accordion, Content as AccordionContent, Item as AccordionItem, Trigger as AccordionTrigger, };

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

@@ -1,8 +1,7 @@
-import { Accordion as AccordionPrimitive } from "bits-ui";
+import Root from "./accordion-root.svelte";
 import Content from "./accordion-content.svelte";
 import Item from "./accordion-item.svelte";
 import Trigger from "./accordion-trigger.svelte";
-const Root = AccordionPrimitive.Root;
 export { Root, Content, Item, Trigger, 
 //
 Root as Accordion, Content as AccordionContent, Item as AccordionItem, Trigger as AccordionTrigger, };

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

@@ -1,7 +1,6 @@
 <script lang="ts">
-	import type { WithElementRef } from "bits-ui";
 	import type { HTMLAttributes } from "svelte/elements";
-	import { cn } from "../../../utils.js";
+	import { cn, type WithElementRef } from "../../../utils.js";
 
 	let {
 		ref = $bindable(null),
@@ -11,6 +10,14 @@
 	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
 </script>
 
-<div bind:this={ref} class={cn("text-sm [&_p]:leading-relaxed", className)} {...restProps}>
+<div
+	bind:this={ref}
+	data-slot="alert-description"
+	class={cn(
+		"text-muted-foreground col-start-2 grid justify-items-start gap-1 text-sm [&_p]:leading-relaxed",
+		className
+	)}
+	{...restProps}
+>
 	{@render children?.()}
 </div>

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

@@ -1,5 +1,5 @@
-import type { WithElementRef } from "bits-ui";
 import type { HTMLAttributes } from "svelte/elements";
+import { type WithElementRef } from "../../../utils.js";
 declare const AlertDescription: import("svelte").Component<WithElementRef<HTMLAttributes<HTMLDivElement>>, {}, "ref">;
 type AlertDescription = ReturnType<typeof AlertDescription>;
 export default AlertDescription;

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

@@ -1,24 +1,19 @@
 <script lang="ts">
 	import type { HTMLAttributes } from "svelte/elements";
-	import type { WithElementRef } from "bits-ui";
-	import { cn } from "../../../utils.js";
+	import { cn, type WithElementRef } from "../../../utils.js";
 
 	let {
 		ref = $bindable(null),
 		class: className,
-		level = 5,
 		children,
 		...restProps
-	}: WithElementRef<HTMLAttributes<HTMLDivElement>> & {
-		level?: 1 | 2 | 3 | 4 | 5 | 6;
-	} = $props();
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
 </script>
 
 <div
-	role="heading"
-	aria-level={level}
 	bind:this={ref}
-	class={cn("mb-1 leading-none font-medium tracking-tight", className)}
+	data-slot="alert-title"
+	class={cn("col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight", className)}
 	{...restProps}
 >
 	{@render children?.()}

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

@@ -1,8 +1,5 @@
 import type { HTMLAttributes } from "svelte/elements";
-import type { WithElementRef } from "bits-ui";
-type $$ComponentProps = WithElementRef<HTMLAttributes<HTMLDivElement>> & {
-    level?: 1 | 2 | 3 | 4 | 5 | 6;
-};
-declare const AlertTitle: import("svelte").Component<$$ComponentProps, {}, "ref">;
+import { type WithElementRef } from "../../../utils.js";
+declare const AlertTitle: import("svelte").Component<WithElementRef<HTMLAttributes<HTMLDivElement>>, {}, "ref">;
 type AlertTitle = ReturnType<typeof AlertTitle>;
 export default AlertTitle;

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

@@ -2,11 +2,12 @@
 	import { type VariantProps, tv } from "tailwind-variants";
 
 	export const alertVariants = tv({
-		base: "[&>svg]:text-foreground relative w-full rounded-lg border p-4 [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg~*]:pl-7",
+		base: "relative grid w-full grid-cols-[0_1fr] items-start gap-y-0.5 rounded-lg border px-4 py-3 text-sm has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] has-[>svg]:gap-x-3 [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current",
 		variants: {
 			variant: {
-				default: "bg-background text-foreground",
-				destructive: "border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive",
+				default: "bg-card text-card-foreground",
+				destructive:
+					"text-destructive bg-card *:data-[slot=alert-description]:text-destructive/90 [&>svg]:text-current",
 			},
 		},
 		defaultVariants: {
@@ -19,8 +20,7 @@
 
 <script lang="ts">
 	import type { HTMLAttributes } from "svelte/elements";
-	import type { WithElementRef } from "bits-ui";
-	import { cn } from "../../../utils.js";
+	import { cn, type WithElementRef } from "../../../utils.js";
 
 	let {
 		ref = $bindable(null),
@@ -33,6 +33,6 @@
 	} = $props();
 </script>
 
-<div bind:this={ref} class={cn(alertVariants({ variant }), className)} {...restProps} role="alert">
+<div bind:this={ref} data-slot="alert" class={cn(alertVariants({ variant }), className)} {...restProps} role="alert">
 	{@render children?.()}
 </div>

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

@@ -4,7 +4,7 @@ export declare const alertVariants: import("tailwind-variants").TVReturnType<{
         default: string;
         destructive: string;
     };
-}, undefined, "[&>svg]:text-foreground relative w-full rounded-lg border p-4 [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg~*]:pl-7", {
+}, undefined, "relative grid w-full grid-cols-[0_1fr] items-start gap-y-0.5 rounded-lg border px-4 py-3 text-sm has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] has-[>svg]:gap-x-3 [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current", {
     variant: {
         default: string;
         destructive: string;
@@ -14,10 +14,10 @@ export declare const alertVariants: import("tailwind-variants").TVReturnType<{
         default: string;
         destructive: string;
     };
-}, undefined, "[&>svg]:text-foreground relative w-full rounded-lg border p-4 [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg~*]:pl-7", unknown, unknown, undefined>>;
+}, undefined, "relative grid w-full grid-cols-[0_1fr] items-start gap-y-0.5 rounded-lg border px-4 py-3 text-sm has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] has-[>svg]:gap-x-3 [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current", unknown, unknown, undefined>>;
 export type AlertVariant = VariantProps<typeof alertVariants>["variant"];
 import type { HTMLAttributes } from "svelte/elements";
-import type { WithElementRef } from "bits-ui";
+import { type WithElementRef } from "../../../utils.js";
 type $$ComponentProps = WithElementRef<HTMLAttributes<HTMLDivElement>> & {
     variant?: AlertVariant;
 };

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

@@ -6,4 +6,9 @@
 	let { ref = $bindable(null), class: className, ...restProps }: AlertDialogPrimitive.ActionProps = $props();
 </script>
 
-<AlertDialogPrimitive.Action bind:ref class={cn(buttonVariants(), className)} {...restProps} />
+<AlertDialogPrimitive.Action
+	bind:ref
+	data-slot="alert-dialog-action"
+	class={cn(buttonVariants(), className)}
+	{...restProps}
+/>

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

@@ -8,6 +8,7 @@
 
 <AlertDialogPrimitive.Cancel
 	bind:ref
-	class={cn(buttonVariants({ variant: "outline" }), "mt-2 sm:mt-0", className)}
+	data-slot="alert-dialog-cancel"
+	class={cn(buttonVariants({ variant: "outline" }), className)}
 	{...restProps}
 />

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

@@ -1,7 +1,7 @@
 <script lang="ts">
-	import { AlertDialog as AlertDialogPrimitive, type WithoutChild } from "bits-ui";
+	import { AlertDialog as AlertDialogPrimitive } from "bits-ui";
 	import AlertDialogOverlay from "./alert-dialog-overlay.svelte";
-	import { cn } from "../../../utils.js";
+	import { cn, type WithoutChild, type WithoutChildrenOrChild } from "../../../utils.js";
 
 	let {
 		ref = $bindable(null),
@@ -9,7 +9,7 @@
 		portalProps,
 		...restProps
 	}: WithoutChild<AlertDialogPrimitive.ContentProps> & {
-		portalProps?: AlertDialogPrimitive.PortalProps;
+		portalProps?: WithoutChildrenOrChild<AlertDialogPrimitive.PortalProps>;
 	} = $props();
 </script>
 
@@ -17,8 +17,9 @@
 	<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 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] fixed top-[50%] left-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border p-6 shadow-lg duration-200 sm:rounded-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 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",
 			className
 		)}
 		{...restProps}

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

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

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

@@ -5,4 +5,9 @@
 	let { ref = $bindable(null), class: className, ...restProps }: AlertDialogPrimitive.DescriptionProps = $props();
 </script>
 
-<AlertDialogPrimitive.Description bind:ref class={cn("text-muted-foreground text-sm", className)} {...restProps} />
+<AlertDialogPrimitive.Description
+	bind:ref
+	data-slot="alert-dialog-description"
+	class={cn("text-muted-foreground text-sm", className)}
+	{...restProps}
+/>

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

@@ -1,7 +1,6 @@
 <script lang="ts">
-	import type { WithElementRef } from "bits-ui";
+	import { cn, type WithElementRef } from "../../../utils.js";
 	import type { HTMLAttributes } from "svelte/elements";
-	import { cn } from "../../../utils.js";
 
 	let {
 		ref = $bindable(null),
@@ -13,7 +12,8 @@
 
 <div
 	bind:this={ref}
-	class={cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", className)}
+	data-slot="alert-dialog-footer"
+	class={cn("flex flex-col-reverse gap-2 sm:flex-row sm:justify-end", className)}
 	{...restProps}
 >
 	{@render children?.()}

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

@@ -1,4 +1,4 @@
-import type { WithElementRef } from "bits-ui";
+import { type WithElementRef } from "../../../utils.js";
 import type { HTMLAttributes } from "svelte/elements";
 declare const AlertDialogFooter: import("svelte").Component<WithElementRef<HTMLAttributes<HTMLDivElement>>, {}, "ref">;
 type AlertDialogFooter = ReturnType<typeof AlertDialogFooter>;

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

@@ -1,7 +1,6 @@
 <script lang="ts">
-	import type { WithElementRef } from "bits-ui";
 	import type { HTMLAttributes } from "svelte/elements";
-	import { cn } from "../../../utils.js";
+	import { cn, type WithElementRef } from "../../../utils.js";
 
 	let {
 		ref = $bindable(null),
@@ -11,6 +10,11 @@
 	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
 </script>
 
-<div bind:this={ref} class={cn("flex flex-col space-y-2 text-center sm:text-left", className)} {...restProps}>
+<div
+	bind:this={ref}
+	data-slot="alert-dialog-header"
+	class={cn("flex flex-col gap-2 text-center sm:text-left", className)}
+	{...restProps}
+>
 	{@render children?.()}
 </div>

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

@@ -1,5 +1,5 @@
-import type { WithElementRef } from "bits-ui";
 import type { HTMLAttributes } from "svelte/elements";
+import { type WithElementRef } from "../../../utils.js";
 declare const AlertDialogHeader: import("svelte").Component<WithElementRef<HTMLAttributes<HTMLDivElement>>, {}, "ref">;
 type AlertDialogHeader = ReturnType<typeof AlertDialogHeader>;
 export default AlertDialogHeader;

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

@@ -7,8 +7,9 @@
 
 <AlertDialogPrimitive.Overlay
 	bind:ref
+	data-slot="alert-dialog-overlay"
 	class={cn(
-		"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0  fixed inset-0 z-50 bg-black/80",
+		"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
 		className
 	)}
 	{...restProps}

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

@@ -2,7 +2,12 @@
 	import { AlertDialog as AlertDialogPrimitive } from "bits-ui";
 	import { cn } from "../../../utils.js";
 
-	let { ref = $bindable(null), class: className, level = 3, ...restProps }: AlertDialogPrimitive.TitleProps = $props();
+	let { ref = $bindable(null), class: className, ...restProps }: AlertDialogPrimitive.TitleProps = $props();
 </script>
 
-<AlertDialogPrimitive.Title bind:ref class={cn("text-lg font-semibold", className)} {level} {...restProps} />
+<AlertDialogPrimitive.Title
+	bind:ref
+	data-slot="alert-dialog-title"
+	class={cn("text-lg font-semibold", className)}
+	{...restProps}
+/>

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

@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { AlertDialog as AlertDialogPrimitive } from "bits-ui";
+
+	let { ref = $bindable(null), ...restProps }: AlertDialogPrimitive.TriggerProps = $props();
+</script>
+
+<AlertDialogPrimitive.Trigger bind:ref data-slot="alert-dialog-trigger" {...restProps} />

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

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

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

@@ -1,4 +1,4 @@
-import { AlertDialog as AlertDialogPrimitive } from "bits-ui";
+import Trigger from "./alert-dialog-trigger.svelte";
 import Title from "./alert-dialog-title.svelte";
 import Action from "./alert-dialog-action.svelte";
 import Cancel from "./alert-dialog-cancel.svelte";
@@ -8,6 +8,5 @@ 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 Trigger: import("svelte").Component<AlertDialogPrimitive.TriggerProps, {}, "ref">;
 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 Trigger from "./alert-dialog-trigger.svelte";
 import Title from "./alert-dialog-title.svelte";
 import Action from "./alert-dialog-action.svelte";
 import Cancel from "./alert-dialog-cancel.svelte";
@@ -8,7 +9,6 @@ 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 Trigger = AlertDialogPrimitive.Trigger;
 const Portal = AlertDialogPrimitive.Portal;
 export { Root, Title, Action, Cancel, Portal, Footer, Header, Trigger, Overlay, Content, Description, 
 //

package/dist/components/ui/aspect-ratio/aspect-ratio.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { AspectRatio as AspectRatioPrimitive } from "bits-ui";
+
+	let { ref = $bindable(null), ...restProps }: AspectRatioPrimitive.RootProps = $props();
+</script>
+
+<AspectRatioPrimitive.Root bind:ref data-slot="aspect-ratio" {...restProps} />

package/dist/components/ui/aspect-ratio/aspect-ratio.svelte.d.ts

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

package/dist/components/ui/aspect-ratio/index.d.ts

@@ -1,3 +1,2 @@
-import { AspectRatio as AspectRatioPrimitive } from "bits-ui";
-declare const Root: import("svelte").Component<AspectRatioPrimitive.RootProps, {}, "ref">;
+import Root from "./aspect-ratio.svelte";
 export { Root, Root as AspectRatio };

package/dist/components/ui/aspect-ratio/index.js

@@ -1,3 +1,2 @@
-import { AspectRatio as AspectRatioPrimitive } from "bits-ui";
-const Root = AspectRatioPrimitive.Root;
+import Root from "./aspect-ratio.svelte";
 export { Root, Root as AspectRatio };

package/dist/components/ui/avatar/avatar-fallback.svelte

@@ -7,6 +7,7 @@
 
 <AvatarPrimitive.Fallback
 	bind:ref
-	class={cn("bg-muted flex size-full items-center justify-center", className)}
+	data-slot="avatar-fallback"
+	class={cn("bg-muted flex size-full items-center justify-center rounded-full", className)}
 	{...restProps}
 />

package/dist/components/ui/avatar/avatar-image.svelte

@@ -5,4 +5,9 @@
 	let { ref = $bindable(null), class: className, ...restProps }: AvatarPrimitive.ImageProps = $props();
 </script>
 
-<AvatarPrimitive.Image bind:ref class={cn("aspect-square size-full", className)} {...restProps} />
+<AvatarPrimitive.Image
+	bind:ref
+	data-slot="avatar-image"
+	class={cn("aspect-square size-full", className)}
+	{...restProps}
+/>

package/dist/components/ui/avatar/avatar.svelte

@@ -7,6 +7,7 @@
 
 <AvatarPrimitive.Root
 	bind:ref
-	class={cn("relative flex size-10 shrink-0 overflow-hidden rounded-full", className)}
+	data-slot="avatar"
+	class={cn("relative flex size-8 shrink-0 overflow-hidden rounded-full", className)}
 	{...restProps}
 />

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

@@ -2,13 +2,14 @@
 	import { type VariantProps, tv } from "tailwind-variants";
 
 	export const badgeVariants = tv({
-		base: "focus:ring-ring inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-hidden focus:ring-2 focus:ring-offset-2",
+		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-md 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",
 		variants: {
 			variant: {
-				default: "bg-primary text-primary-foreground hover:bg-primary/80 border-transparent",
-				secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80 border-transparent",
-				destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/80 border-transparent",
-				outline: "text-foreground",
+				default: "bg-primary text-primary-foreground [a&]:hover:bg-primary/90 border-transparent",
+				secondary: "bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90 border-transparent",
+				destructive:
+					"bg-destructive [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/70 border-transparent text-white",
+				outline: "text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
 			},
 		},
 		defaultVariants: {
@@ -20,9 +21,8 @@
 </script>
 
 <script lang="ts">
-	import type { WithElementRef } from "bits-ui";
 	import type { HTMLAnchorAttributes } from "svelte/elements";
-	import { cn } from "../../../utils.js";
+	import { cn, type WithElementRef } from "../../../utils.js";
 
 	let {
 		ref = $bindable(null),
@@ -39,6 +39,7 @@
 <svelte:element
 	this={href ? "a" : "span"}
 	bind:this={ref}
+	data-slot="badge"
 	{href}
 	class={cn(badgeVariants({ variant }), className)}
 	{...restProps}

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:ring-ring inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-hidden focus:ring-2 focus:ring-offset-2", {
+}, 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-md 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", {
     variant: {
         default: string;
         secondary: string;
@@ -20,10 +20,10 @@ export declare const badgeVariants: import("tailwind-variants").TVReturnType<{
         destructive: string;
         outline: string;
     };
-}, undefined, "focus:ring-ring inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-hidden focus:ring-2 focus:ring-offset-2", 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 whitespace-nowrap rounded-md 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>>;
 export type BadgeVariant = VariantProps<typeof badgeVariants>["variant"];
-import type { WithElementRef } from "bits-ui";
 import type { HTMLAnchorAttributes } from "svelte/elements";
+import { type WithElementRef } from "../../../utils.js";
 type $$ComponentProps = WithElementRef<HTMLAnchorAttributes> & {
     variant?: BadgeVariant;
 };

package/dist/components/ui/breadcrumb/breadcrumb-ellipsis.svelte

@@ -1,8 +1,7 @@
 <script lang="ts">
-	import Ellipsis from "@lucide/svelte/icons/ellipsis";
-	import type { WithElementRef, WithoutChildren } from "bits-ui";
+	import EllipsisIcon from "@lucide/svelte/icons/ellipsis";
 	import type { HTMLAttributes } from "svelte/elements";
-	import { cn } from "../../../utils.js";
+	import { cn, type WithElementRef, type WithoutChildren } from "../../../utils.js";
 
 	let {
 		ref = $bindable(null),
@@ -13,11 +12,12 @@
 
 <span
 	bind:this={ref}
+	data-slot="breadcrumb-ellipsis"
 	role="presentation"
 	aria-hidden="true"
 	class={cn("flex size-9 items-center justify-center", className)}
 	{...restProps}
 >
-	<Ellipsis class="size-4" />
+	<EllipsisIcon class="size-4" />
 	<span class="sr-only">More</span>
 </span>

package/dist/components/ui/breadcrumb/breadcrumb-ellipsis.svelte.d.ts

@@ -1,5 +1,5 @@
-import type { WithElementRef } from "bits-ui";
 import type { HTMLAttributes } from "svelte/elements";
+import { type WithElementRef } from "../../../utils.js";
 declare const BreadcrumbEllipsis: import("svelte").Component<Omit<WithElementRef<HTMLAttributes<HTMLSpanElement>>, "children">, {}, "ref">;
 type BreadcrumbEllipsis = ReturnType<typeof BreadcrumbEllipsis>;
 export default BreadcrumbEllipsis;