@kayord/ui 3.0.11 → 4.0.0

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

@@ -15,7 +15,7 @@
 	data-slot="input-group"
 	role="group"
 	class={cn(
-		"group/input-group border-input dark:bg-input/30 has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[[data-slot][aria-invalid=true]]:border-destructive dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40 has-disabled:bg-input/50 dark:has-disabled:bg-input/80 relative flex h-8 w-full min-w-0 items-center rounded-lg border transition-colors outline-none in-data-[slot=combobox-content]:focus-within:border-inherit in-data-[slot=combobox-content]:focus-within:ring-0 has-disabled:opacity-50 has-[[data-slot=input-group-control]:focus-visible]:ring-3 has-[[data-slot][aria-invalid=true]]:ring-3 has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>textarea]:h-auto has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-end]]:[&>input]:pr-1.5 has-[>[data-align=inline-start]]:[&>input]:pl-1.5",
+		"group/input-group h-8 rounded-lg border border-input transition-colors in-data-[slot=combobox-content]:focus-within:border-inherit in-data-[slot=combobox-content]:focus-within:ring-0 has-disabled:bg-input/50 has-disabled:opacity-50 has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-3 has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot][aria-invalid=true]]:border-destructive has-[[data-slot][aria-invalid=true]]:ring-3 has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col dark:bg-input/30 dark:has-disabled:bg-input/80 dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40 has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-end]]:[&>input]:pr-1.5 has-[>[data-align=inline-start]]:[&>input]:pl-1.5 relative flex w-full min-w-0 items-center outline-none has-[>textarea]:h-auto",
 		className
 	)}
 	{...props}

package/dist/components/ui/input-otp/index.d.ts

@@ -1,5 +1,5 @@
-import Root from "./input-otp.svelte";
 import Group from "./input-otp-group.svelte";
-import Slot from "./input-otp-slot.svelte";
 import Separator from "./input-otp-separator.svelte";
+import Slot from "./input-otp-slot.svelte";
+import Root from "./input-otp.svelte";
 export { Root, Group, Slot, Separator, Root as InputOTP, Group as InputOTPGroup, Slot as InputOTPSlot, Separator as InputOTPSeparator, };

package/dist/components/ui/input-otp/index.js

@@ -1,5 +1,5 @@
-import Root from "./input-otp.svelte";
 import Group from "./input-otp-group.svelte";
-import Slot from "./input-otp-slot.svelte";
 import Separator from "./input-otp-separator.svelte";
+import Slot from "./input-otp-slot.svelte";
+import Root from "./input-otp.svelte";
 export { Root, Group, Slot, Separator, Root as InputOTP, Group as InputOTPGroup, Slot as InputOTPSlot, Separator as InputOTPSeparator, };

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

@@ -1,6 +1,6 @@
 <script lang="ts">
-	import type { HTMLAttributes } from "svelte/elements";
 	import { cn, type WithElementRef } from "../../../utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
 
 	let {
 		ref = $bindable(null),
@@ -13,10 +13,7 @@
 <div
 	bind:this={ref}
 	data-slot="input-otp-group"
-	class={cn(
-		"has-aria-invalid:ring-destructive/20 dark:has-aria-invalid:ring-destructive/40 has-aria-invalid:border-destructive flex items-center rounded-lg has-aria-invalid:ring-3",
-		className
-	)}
+	class={cn("rounded-lg has-aria-invalid:border-destructive has-aria-invalid:ring-3 has-aria-invalid:ring-destructive/20 dark:has-aria-invalid:ring-destructive/40 flex items-center", className)}
 	{...restProps}
 >
 	{@render children?.()}

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

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

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

@@ -1,8 +1,8 @@
 <script lang="ts">
-	import type { HTMLAttributes } from "svelte/elements";
+	import MinusIcon from '@lucide/svelte/icons/minus';
 	import type { WithElementRef } from "../../../utils.js";
 	import { cn } from "../../../utils.js";
-	import MinusIcon from "@lucide/svelte/icons/minus";
+	import type { HTMLAttributes } from "svelte/elements";
 
 	let {
 		ref = $bindable(null),
@@ -16,12 +16,12 @@
 	bind:this={ref}
 	data-slot="input-otp-separator"
 	role="separator"
-	class={cn("flex items-center [&_svg:not([class*='size-'])]:size-4", className)}
+	class={cn("[&_svg:not([class*='size-'])]:size-4 flex items-center", className)}
 	{...restProps}
 >
 	{#if children}
 		{@render children?.()}
 	{:else}
-		<MinusIcon />
+		<MinusIcon  />
 	{/if}
 </div>

package/dist/components/ui/input-otp/input-otp-separator.svelte.d.ts

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

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

@@ -2,7 +2,12 @@
 	import { PinInput as InputOTPPrimitive } from "bits-ui";
 	import { cn } from "../../../utils.js";
 
-	let { ref = $bindable(null), cell, class: className, ...restProps }: InputOTPPrimitive.CellProps = $props();
+	let {
+		ref = $bindable(null),
+		cell,
+		class: className,
+		...restProps
+	}: InputOTPPrimitive.CellProps = $props();
 </script>
 
 <InputOTPPrimitive.Cell
@@ -10,15 +15,17 @@
 	bind:ref
 	data-slot="input-otp-slot"
 	class={cn(
-		"dark:bg-input/30 border-input data-[active=true]:border-ring data-[active=true]:ring-ring/50 data-[active=true]:aria-invalid:ring-destructive/20 dark:data-[active=true]:aria-invalid:ring-destructive/40 aria-invalid:border-destructive data-[active=true]:aria-invalid:border-destructive relative flex size-8 items-center justify-center border-y border-r text-sm transition-all outline-none first:rounded-l-lg first:border-l last:rounded-r-lg data-[active=true]:z-10 data-[active=true]:ring-3",
+		"size-8 border-y border-r border-input text-sm transition-all outline-none first:rounded-l-lg first:border-l last:rounded-r-lg aria-invalid:border-destructive data-[active=true]:border-ring data-[active=true]:ring-3 data-[active=true]:ring-ring/50 data-[active=true]:aria-invalid:border-destructive data-[active=true]:aria-invalid:ring-destructive/20 dark:bg-input/30 dark:data-[active=true]:aria-invalid:ring-destructive/40 relative flex items-center justify-center data-[active=true]:z-10",
 		className
 	)}
 	{...restProps}
 >
 	{cell.char}
 	{#if cell.hasFakeCaret}
-		<div class="cn-input-otp-caret pointer-events-none absolute inset-0 flex items-center justify-center">
-			<div class="animate-caret-blink bg-foreground bg-foreground h-4 w-px duration-1000"></div>
+		<div
+			class="cn-input-otp-caret pointer-events-none absolute inset-0 flex items-center justify-center"
+		>
+			<div class="h-4 w-px animate-caret-blink bg-foreground duration-1000 h-4 w-px bg-foreground"></div>
 		</div>
 	{/if}
 </InputOTPPrimitive.Cell>

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

@@ -16,7 +16,7 @@
 	data-slot="input-otp"
 	spellcheck={false}
 	class={cn(
-		"cn-input-otp-input flex items-center gap-2 disabled:cursor-not-allowed has-disabled:opacity-50",
+		"cn-input-otp-input gap-2 flex items-center disabled:cursor-not-allowed has-disabled:opacity-50",
 		className
 	)}
 	{...restProps}

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

@@ -1,11 +1,11 @@
-import Root from "./item.svelte";
-import Group from "./item-group.svelte";
-import Separator from "./item-separator.svelte";
-import Header from "./item-header.svelte";
-import Footer from "./item-footer.svelte";
+import Actions from "./item-actions.svelte";
 import Content from "./item-content.svelte";
-import Title from "./item-title.svelte";
 import Description from "./item-description.svelte";
-import Actions from "./item-actions.svelte";
+import Footer from "./item-footer.svelte";
+import Group from "./item-group.svelte";
+import Header from "./item-header.svelte";
 import Media from "./item-media.svelte";
+import Separator from "./item-separator.svelte";
+import Title from "./item-title.svelte";
+import Root from "./item.svelte";
 export { Root, Group, Separator, Header, Footer, Content, Title, Description, Actions, Media, Root as Item, Group as ItemGroup, Separator as ItemSeparator, Header as ItemHeader, Footer as ItemFooter, Content as ItemContent, Title as ItemTitle, Description as ItemDescription, Actions as ItemActions, Media as ItemMedia, };

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

@@ -1,13 +1,13 @@
-import Root from "./item.svelte";
-import Group from "./item-group.svelte";
-import Separator from "./item-separator.svelte";
-import Header from "./item-header.svelte";
-import Footer from "./item-footer.svelte";
+import Actions from "./item-actions.svelte";
 import Content from "./item-content.svelte";
-import Title from "./item-title.svelte";
 import Description from "./item-description.svelte";
-import Actions from "./item-actions.svelte";
+import Footer from "./item-footer.svelte";
+import Group from "./item-group.svelte";
+import Header from "./item-header.svelte";
 import Media from "./item-media.svelte";
+import Separator from "./item-separator.svelte";
+import Title from "./item-title.svelte";
+import Root from "./item.svelte";
 export { Root, Group, Separator, Header, Footer, Content, Title, Description, Actions, Media, 
 //
 Root as Item, Group as ItemGroup, Separator as ItemSeparator, Header as ItemHeader, Footer as ItemFooter, Content as ItemContent, Title as ItemTitle, Description as ItemDescription, Actions as ItemActions, Media as ItemMedia, };

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

@@ -10,6 +10,11 @@
 	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
 </script>
 
-<div bind:this={ref} data-slot="item-actions" class={cn("flex items-center gap-2", className)} {...restProps}>
+<div
+	bind:this={ref}
+	data-slot="item-actions"
+	class={cn("gap-2 flex items-center", className)}
+	{...restProps}
+>
 	{@render children?.()}
 </div>

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

@@ -14,7 +14,7 @@
 	bind:this={ref}
 	data-slot="item-content"
 	class={cn(
-		"flex flex-1 flex-col gap-1 group-data-[size=xs]/item:gap-0 [&+[data-slot=item-content]]:flex-none",
+		"gap-1 group-data-[size=xs]/item:gap-0 flex flex-1 flex-col [&+[data-slot=item-content]]:flex-none",
 		className
 	)}
 	{...restProps}

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

@@ -14,7 +14,7 @@
 	bind:this={ref}
 	data-slot="item-description"
 	class={cn(
-		"text-muted-foreground [&>a:hover]:text-primary line-clamp-2 text-left text-sm leading-normal font-normal group-data-[size=xs]/item:text-xs [&>a]:underline [&>a]:underline-offset-4",
+		"text-left text-sm leading-normal text-muted-foreground group-data-[size=xs]/item:text-xs line-clamp-2 font-normal [&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary",
 		className
 	)}
 	{...restProps}

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

@@ -13,7 +13,7 @@
 <div
 	bind:this={ref}
 	data-slot="item-footer"
-	class={cn("flex basis-full items-center justify-between gap-2", className)}
+	class={cn("gap-2 flex basis-full items-center justify-between", className)}
 	{...restProps}
 >
 	{@render children?.()}

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

@@ -14,10 +14,7 @@
 	bind:this={ref}
 	role="list"
 	data-slot="item-group"
-	class={cn(
-		"group/item-group flex w-full flex-col gap-4 has-data-[size=sm]:gap-2.5 has-data-[size=xs]:gap-2",
-		className
-	)}
+	class={cn("gap-4 has-data-[size=sm]:gap-2.5 has-data-[size=xs]:gap-2 group/item-group flex w-full flex-col", className)}
 	{...restProps}
 >
 	{@render children?.()}

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

@@ -13,7 +13,7 @@
 <div
 	bind:this={ref}
 	data-slot="item-header"
-	class={cn("flex basis-full items-center justify-between gap-2", className)}
+	class={cn("gap-2 flex basis-full items-center justify-between", className)}
 	{...restProps}
 >
 	{@render children?.()}

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

@@ -7,8 +7,7 @@
 			variant: {
 				default: "bg-transparent",
 				icon: "[&_svg:not([class*='size-'])]:size-4",
-				image:
-					"size-10 overflow-hidden rounded-sm group-data-[size=sm]/item:size-8 group-data-[size=xs]/item:size-6 [&_img]:size-full [&_img]:object-cover",
+				image: "size-10 overflow-hidden rounded-sm group-data-[size=sm]/item:size-8 group-data-[size=xs]/item:size-6 [&_img]:size-full [&_img]:object-cover",
 			},
 		},
 		defaultVariants: {

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

@@ -1,23 +1,23 @@
 import { type VariantProps } from "tailwind-variants";
 export declare const itemMediaVariants: import("tailwind-variants").TVReturnType<{
     variant: {
-        default: string;
-        icon: string;
-        image: string;
+        default: "bg-transparent";
+        icon: "[&_svg:not([class*='size-'])]:size-4";
+        image: "size-10 overflow-hidden rounded-sm group-data-[size=sm]/item:size-8 group-data-[size=xs]/item:size-6 [&_img]:size-full [&_img]:object-cover";
     };
 }, undefined, "gap-2 group-has-data-[slot=item-description]/item:translate-y-0.5 group-has-data-[slot=item-description]/item:self-start flex shrink-0 items-center justify-center [&_svg]:pointer-events-none", {
     variant: {
-        default: string;
-        icon: string;
-        image: string;
+        default: "bg-transparent";
+        icon: "[&_svg:not([class*='size-'])]:size-4";
+        image: "size-10 overflow-hidden rounded-sm group-data-[size=sm]/item:size-8 group-data-[size=xs]/item:size-6 [&_img]:size-full [&_img]:object-cover";
     };
-}, undefined, import("tailwind-variants").TVReturnType<{
+}, undefined, import("tailwind-variants").TVReturnTypeLike<{
     variant: {
-        default: string;
-        icon: string;
-        image: string;
+        default: "bg-transparent";
+        icon: "[&_svg:not([class*='size-'])]:size-4";
+        image: "size-10 overflow-hidden rounded-sm group-data-[size=sm]/item:size-8 group-data-[size=xs]/item:size-6 [&_img]:size-full [&_img]:object-cover";
     };
-}, undefined, "gap-2 group-has-data-[slot=item-description]/item:translate-y-0.5 group-has-data-[slot=item-description]/item:self-start flex shrink-0 items-center justify-center [&_svg]:pointer-events-none", unknown, unknown, undefined>>;
+}, undefined>>;
 export type ItemMediaVariant = VariantProps<typeof itemMediaVariants>["variant"];
 import { type WithElementRef } from "../../../utils.js";
 import type { HTMLAttributes } from "svelte/elements";

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

@@ -3,7 +3,17 @@
 	import { cn } from "../../../utils.js";
 	import type { ComponentProps } from "svelte";
 
-	let { ref = $bindable(null), class: className, ...restProps }: ComponentProps<typeof Separator> = $props();
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: ComponentProps<typeof Separator> = $props();
 </script>
 
-<Separator bind:ref data-slot="item-separator" orientation="horizontal" class={cn("my-2", className)} {...restProps} />
+<Separator
+	bind:ref
+	data-slot="item-separator"
+	orientation="horizontal"
+	class={cn("my-2", className)}
+	{...restProps}
+/>

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

@@ -13,10 +13,7 @@
 <div
 	bind:this={ref}
 	data-slot="item-title"
-	class={cn(
-		"line-clamp-1 flex w-fit items-center gap-2 text-sm leading-snug font-medium underline-offset-4",
-		className
-	)}
+	class={cn("gap-2 text-sm leading-snug font-medium underline-offset-4 line-clamp-1 flex w-fit items-center", className)}
 	{...restProps}
 >
 	{@render children?.()}

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

@@ -2,12 +2,12 @@
 	import { tv, type VariantProps } from "tailwind-variants";
 
 	export const itemVariants = tv({
-		base: "[a]:hover:bg-muted rounded-lg border text-sm group/item focus-visible:border-ring focus-visible:ring-ring/50 flex w-full flex-wrap items-center transition-colors duration-100 outline-none focus-visible:ring-[3px] [a]:transition-colors",
+		base: "rounded-lg border text-sm [a]:hover:bg-muted group/item flex w-full flex-wrap items-center transition-colors duration-100 outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 [a]:transition-colors",
 		variants: {
 			variant: {
 				default: "border-transparent",
 				outline: "border-border",
-				muted: "bg-muted/50 border-transparent",
+				muted: "border-transparent bg-muted/50",
 			},
 			size: {
 				default: "gap-2.5 px-3 py-2.5",
@@ -27,8 +27,8 @@
 
 <script lang="ts">
 	import { cn, type WithElementRef } from "../../../utils.js";
-	import type { HTMLAttributes } from "svelte/elements";
 	import type { Snippet } from "svelte";
+	import type { HTMLAttributes } from "svelte/elements";
 
 	let {
 		ref = $bindable(null),

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

@@ -1,43 +1,43 @@
 import { type VariantProps } from "tailwind-variants";
 export declare const itemVariants: import("tailwind-variants").TVReturnType<{
     variant: {
-        default: string;
-        outline: string;
-        muted: string;
+        default: "border-transparent";
+        outline: "border-border";
+        muted: "border-transparent bg-muted/50";
     };
     size: {
-        default: string;
-        sm: string;
-        xs: string;
+        default: "gap-2.5 px-3 py-2.5";
+        sm: "gap-2.5 px-3 py-2.5";
+        xs: "gap-2 px-2.5 py-2 in-data-[slot=dropdown-menu-content]:p-0";
     };
-}, undefined, "[a]:hover:bg-muted rounded-lg border text-sm group/item focus-visible:border-ring focus-visible:ring-ring/50 flex w-full flex-wrap items-center transition-colors duration-100 outline-none focus-visible:ring-[3px] [a]:transition-colors", {
+}, undefined, "rounded-lg border text-sm [a]:hover:bg-muted group/item flex w-full flex-wrap items-center transition-colors duration-100 outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 [a]:transition-colors", {
     variant: {
-        default: string;
-        outline: string;
-        muted: string;
+        default: "border-transparent";
+        outline: "border-border";
+        muted: "border-transparent bg-muted/50";
     };
     size: {
-        default: string;
-        sm: string;
-        xs: string;
+        default: "gap-2.5 px-3 py-2.5";
+        sm: "gap-2.5 px-3 py-2.5";
+        xs: "gap-2 px-2.5 py-2 in-data-[slot=dropdown-menu-content]:p-0";
     };
-}, undefined, import("tailwind-variants").TVReturnType<{
+}, undefined, import("tailwind-variants").TVReturnTypeLike<{
     variant: {
-        default: string;
-        outline: string;
-        muted: string;
+        default: "border-transparent";
+        outline: "border-border";
+        muted: "border-transparent bg-muted/50";
     };
     size: {
-        default: string;
-        sm: string;
-        xs: string;
+        default: "gap-2.5 px-3 py-2.5";
+        sm: "gap-2.5 px-3 py-2.5";
+        xs: "gap-2 px-2.5 py-2 in-data-[slot=dropdown-menu-content]:p-0";
     };
-}, undefined, "[a]:hover:bg-muted rounded-lg border text-sm group/item focus-visible:border-ring focus-visible:ring-ring/50 flex w-full flex-wrap items-center transition-colors duration-100 outline-none focus-visible:ring-[3px] [a]:transition-colors", unknown, unknown, undefined>>;
+}, undefined>>;
 export type ItemSize = VariantProps<typeof itemVariants>["size"];
 export type ItemVariant = VariantProps<typeof itemVariants>["variant"];
 import { type WithElementRef } from "../../../utils.js";
-import type { HTMLAttributes } from "svelte/elements";
 import type { Snippet } from "svelte";
+import type { HTMLAttributes } from "svelte/elements";
 type $$ComponentProps = WithElementRef<HTMLAttributes<HTMLDivElement>> & {
     child?: Snippet<[{
         props: Record<string, unknown>;

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

@@ -1,3 +1,3 @@
-import Root from "./kbd.svelte";
 import Group from "./kbd-group.svelte";
+import Root from "./kbd.svelte";
 export { Root, Group, Root as Kbd, Group as KbdGroup, };

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

@@ -1,5 +1,5 @@
-import Root from "./kbd.svelte";
 import Group from "./kbd-group.svelte";
+import Root from "./kbd.svelte";
 export { Root, Group, 
 //
 Root as Kbd, Group as KbdGroup, };

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

@@ -10,6 +10,11 @@
 	}: WithElementRef<HTMLAttributes<HTMLElement>> = $props();
 </script>
 
-<kbd bind:this={ref} data-slot="kbd-group" class={cn("inline-flex items-center gap-1", className)} {...restProps}>
+<kbd
+	bind:this={ref}
+	data-slot="kbd-group"
+	class={cn("gap-1 inline-flex items-center", className)}
+	{...restProps}
+>
 	{@render children?.()}
 </kbd>

package/dist/components/ui/kbd/kbd.svelte

@@ -14,7 +14,7 @@
 	bind:this={ref}
 	data-slot="kbd"
 	class={cn(
-		"bg-muted text-muted-foreground in-data-[slot=tooltip-content]:bg-background/20 in-data-[slot=tooltip-content]:text-background dark:in-data-[slot=tooltip-content]:bg-background/10 pointer-events-none inline-flex h-5 w-fit min-w-5 items-center justify-center gap-1 rounded-sm px-1 font-sans text-xs font-medium select-none [&_svg:not([class*='size-'])]:size-3",
+		"h-5 w-fit min-w-5 gap-1 rounded-sm bg-muted px-1 font-sans text-xs font-medium text-muted-foreground in-data-[slot=tooltip-content]:bg-background/20 in-data-[slot=tooltip-content]:text-background dark:in-data-[slot=tooltip-content]:bg-background/10 [&_svg:not([class*='size-'])]:size-3 pointer-events-none inline-flex items-center justify-center select-none",
 		className
 	)}
 	{...restProps}

package/dist/components/ui/label/label.svelte

@@ -2,14 +2,18 @@
 	import { Label as LabelPrimitive } from "bits-ui";
 	import { cn } from "../../../utils.js";
 
-	let { ref = $bindable(null), class: className, ...restProps }: LabelPrimitive.RootProps = $props();
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: LabelPrimitive.RootProps = $props();
 </script>
 
 <LabelPrimitive.Root
 	bind:ref
 	data-slot="label"
 	class={cn(
-		"flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
+		"gap-2 text-sm leading-none font-medium group-data-[disabled=true]:opacity-50 peer-disabled:opacity-50 flex items-center select-none group-data-[disabled=true]:pointer-events-none peer-disabled:cursor-not-allowed",
 		className
 	)}
 	{...restProps}

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

@@ -1,18 +1,18 @@
-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";
+import GroupHeading from "./menubar-group-heading.svelte";
 import Group from "./menubar-group.svelte";
+import Item from "./menubar-item.svelte";
+import Label from "./menubar-label.svelte";
+import Menu from "./menubar-menu.svelte";
+import Portal from "./menubar-portal.svelte";
+import RadioGroup from "./menubar-radio-group.svelte";
 import RadioItem from "./menubar-radio-item.svelte";
 import Separator from "./menubar-separator.svelte";
 import Shortcut from "./menubar-shortcut.svelte";
 import SubContent from "./menubar-sub-content.svelte";
 import SubTrigger from "./menubar-sub-trigger.svelte";
+import Sub from "./menubar-sub.svelte";
 import Trigger from "./menubar-trigger.svelte";
-import Label from "./menubar-label.svelte";
-import GroupHeading from "./menubar-group-heading.svelte";
-import Portal from "./menubar-portal.svelte";
+import Root from "./menubar.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,20 +1,20 @@
-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";
+import GroupHeading from "./menubar-group-heading.svelte";
 import Group from "./menubar-group.svelte";
+import Item from "./menubar-item.svelte";
+import Label from "./menubar-label.svelte";
+import Menu from "./menubar-menu.svelte";
+import Portal from "./menubar-portal.svelte";
+import RadioGroup from "./menubar-radio-group.svelte";
 import RadioItem from "./menubar-radio-item.svelte";
 import Separator from "./menubar-separator.svelte";
 import Shortcut from "./menubar-shortcut.svelte";
 import SubContent from "./menubar-sub-content.svelte";
 import SubTrigger from "./menubar-sub-trigger.svelte";
+import Sub from "./menubar-sub.svelte";
 import Trigger from "./menubar-trigger.svelte";
-import Label from "./menubar-label.svelte";
-import GroupHeading from "./menubar-group-heading.svelte";
-import Portal from "./menubar-portal.svelte";
+import Root from "./menubar.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/menubar-checkbox-item.svelte

@@ -1,9 +1,9 @@
 <script lang="ts">
 	import { Menubar as MenubarPrimitive } from "bits-ui";
+	import MinusIcon from '@lucide/svelte/icons/minus';
+	import CheckIcon from '@lucide/svelte/icons/check';
 	import { cn, type WithoutChildrenOrChild } from "../../../utils.js";
 	import type { Snippet } from "svelte";
-	import MinusIcon from "@lucide/svelte/icons/minus";
-	import CheckIcon from "@lucide/svelte/icons/check";
 
 	let {
 		ref = $bindable(null),
@@ -26,19 +26,19 @@
 	data-slot="menubar-checkbox-item"
 	data-inset={inset}
 	class={cn(
-		"focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground relative flex cursor-default items-center gap-1.5 rounded-md py-1 pr-1.5 pl-7 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-inset:pl-7 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+		"gap-1.5 rounded-md py-1 pr-1.5 pl-7 text-sm focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:pl-7 relative flex cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
 		className
 	)}
 	{...restProps}
 >
 	{#snippet children({ checked: checked, indeterminate: indeterminate })}
 		<span
-			class="pointer-events-none absolute left-1.5 flex size-4 items-center justify-center [&_svg:not([class*='size-'])]:size-4"
+			class="left-1.5 size-4 [&_svg:not([class*='size-'])]:size-4 pointer-events-none absolute flex items-center justify-center"
 		>
 			{#if indeterminate}
-				<MinusIcon />
+				<MinusIcon  />
 			{:else if checked}
-				<CheckIcon />
+				<CheckIcon  />
 			{/if}
 		</span>
 		{@render childrenProp?.()}

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

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { Menubar as MenubarPrimitive } from "bits-ui";
-	import MenubarPortal from "./menubar-portal.svelte";
 	import { cn, type WithoutChildrenOrChild } from "../../../utils.js";
+	import MenubarPortal from "./menubar-portal.svelte";
 	import type { ComponentProps } from "svelte";
 
 	let {
@@ -27,7 +27,7 @@
 		{side}
 		{sideOffset}
 		class={cn(
-			"bg-popover text-popover-foreground ring-foreground/10 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 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 z-50 min-w-36 origin-(--bits-menubar-content-transform-origin) overflow-hidden rounded-lg p-1 shadow-md ring-1 duration-100",
+			"z-50 min-w-36 origin-(--bits-menubar-content-transform-origin) overflow-hidden rounded-lg bg-popover p-1 text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 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 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95",
 			className
 		)}
 		{...restProps}

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

@@ -1,6 +1,6 @@
 import { Menubar as MenubarPrimitive } from "bits-ui";
-import MenubarPortal from "./menubar-portal.svelte";
 import { type WithoutChildrenOrChild } from "../../../utils.js";
+import MenubarPortal from "./menubar-portal.svelte";
 import type { ComponentProps } from "svelte";
 type $$ComponentProps = MenubarPrimitive.ContentProps & {
     portalProps?: WithoutChildrenOrChild<ComponentProps<typeof MenubarPortal>>;

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

@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { cn } from "../../../utils.js";
 	import { Menubar as MenubarPrimitive } from "bits-ui";
+	import { cn } from "../../../utils.js";
 	import type { ComponentProps } from "svelte";
 
 	let {