@kayord/ui 3.0.12 → 4.0.0

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/menubar-checkbox-item.svelte

@@ -1,7 +1,7 @@
 <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 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";
 
@@ -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

@@ -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-item.svelte

@@ -19,9 +19,6 @@
 	data-slot="menubar-item"
 	data-inset={inset}
 	data-variant={variant}
-	class={cn(
-		"focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:*:[svg]:text-destructive! group/menubar-item flex items-center gap-1.5 rounded-md px-1.5 py-1 text-sm data-disabled:opacity-50 data-inset:pl-7 [&_svg:not([class*='size-'])]:size-4",
-		className
-	)}
+	class={cn("gap-1.5 rounded-md px-1.5 py-1 text-sm focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:pl-7 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 data-disabled:opacity-50 [&_svg:not([class*='size-'])]:size-4 data-[variant=destructive]:*:[svg]:text-destructive! group/menubar-item flex items-center", className)}
 	{...restProps}
 />

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

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

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

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { Menubar as MenubarPrimitive } from "bits-ui";
-	import CheckIcon from "@lucide/svelte/icons/check";
+	import CheckIcon from '@lucide/svelte/icons/check';
 	import { cn, type WithoutChild } from "../../../utils.js";
 
 	let {
@@ -19,17 +19,17 @@
 	data-slot="menubar-radio-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 [&_svg:not([class*='size-'])]:size-4",
+		"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 data-disabled:opacity-50 [&_svg:not([class*='size-'])]:size-4 relative flex cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0",
 		className
 	)}
 	{...restProps}
 >
 	{#snippet children({ checked })}
 		<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 checked}
-				<CheckIcon />
+				<CheckIcon  />
 			{/if}
 		</span>
 		{@render childrenProp?.({ checked })}

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

@@ -2,7 +2,11 @@
 	import { Menubar as MenubarPrimitive } from "bits-ui";
 	import { cn } from "../../../utils.js";
 
-	let { ref = $bindable(null), class: className, ...restProps }: MenubarPrimitive.SeparatorProps = $props();
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: MenubarPrimitive.SeparatorProps = $props();
 </script>
 
 <MenubarPrimitive.Separator

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

@@ -13,10 +13,7 @@
 <span
 	bind:this={ref}
 	data-slot="menubar-shortcut"
-	class={cn(
-		"text-muted-foreground group-focus/menubar-item:text-accent-foreground ml-auto text-xs tracking-widest",
-		className
-	)}
+	class={cn("text-xs tracking-widest text-muted-foreground group-focus/menubar-item:text-accent-foreground ml-auto", className)}
 	{...restProps}
 >
 	{@render children?.()}

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

@@ -2,15 +2,16 @@
 	import { Menubar as MenubarPrimitive } from "bits-ui";
 	import { cn } from "../../../utils.js";
 
-	let { ref = $bindable(null), class: className, ...restProps }: MenubarPrimitive.SubContentProps = $props();
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: MenubarPrimitive.SubContentProps = $props();
 </script>
 
 <MenubarPrimitive.SubContent
 	bind:ref
 	data-slot="menubar-sub-content"
-	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 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 min-w-32 rounded-lg p-1 shadow-lg ring-1 duration-100",
-		className
-	)}
+	class={cn("min-w-32 rounded-lg bg-popover p-1 text-popover-foreground shadow-lg 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 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", className)}
 	{...restProps}
 />

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

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { Menubar as MenubarPrimitive } from "bits-ui";
-	import ChevronRightIcon from "@lucide/svelte/icons/chevron-right";
+	import ChevronRightIcon from '@lucide/svelte/icons/chevron-right';
 	import { cn, type WithoutChild } from "../../../utils.js";
 
 	let {
@@ -19,7 +19,7 @@
 	data-slot="menubar-sub-trigger"
 	data-inset={inset}
 	class={cn(
-		"focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-none select-none data-inset:pl-7 [&_svg:not([class*='size-'])]:size-4",
+		"gap-1.5 rounded-md px-1.5 py-1 text-sm focus:bg-accent focus:text-accent-foreground data-inset:pl-7 data-open:bg-accent data-open:text-accent-foreground [&_svg:not([class*='size-'])]:size-4 flex cursor-default items-center outline-none select-none",
 		className
 	)}
 	{...restProps}

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

@@ -2,15 +2,16 @@
 	import { Menubar as MenubarPrimitive } from "bits-ui";
 	import { cn } from "../../../utils.js";
 
-	let { ref = $bindable(null), class: className, ...restProps }: MenubarPrimitive.TriggerProps = $props();
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: MenubarPrimitive.TriggerProps = $props();
 </script>
 
 <MenubarPrimitive.Trigger
 	bind:ref
 	data-slot="menubar-trigger"
-	class={cn(
-		"hover:bg-muted aria-expanded:bg-muted flex items-center rounded-sm px-1.5 py-[2px] text-sm font-medium outline-hidden select-none",
-		className
-	)}
+	class={cn("rounded-sm px-1.5 py-[2px] text-sm font-medium hover:bg-muted aria-expanded:bg-muted flex items-center outline-hidden select-none", className)}
 	{...restProps}
 />

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

@@ -2,12 +2,16 @@
 	import { Menubar as MenubarPrimitive } from "bits-ui";
 	import { cn } from "../../../utils.js";
 
-	let { ref = $bindable(null), class: className, ...restProps }: MenubarPrimitive.RootProps = $props();
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: MenubarPrimitive.RootProps = $props();
 </script>
 
 <MenubarPrimitive.Root
 	bind:ref
 	data-slot="menubar"
-	class={cn("flex h-8 items-center gap-0.5 rounded-lg border p-[3px]", className)}
+	class={cn("h-8 gap-0.5 rounded-lg border p-[3px] flex items-center", className)}
 	{...restProps}
 />

package/dist/components/ui/native-select/index.d.ts

@@ -1,4 +1,4 @@
 import OptGroup from "./native-select-opt-group.svelte";
 import Option from "./native-select-option.svelte";
 import Root from "./native-select.svelte";
-export { Root, Option, OptGroup, Root as NativeSelect, Option as NativeSelectOption, OptGroup as NativeSelectOptGroup };
+export { Root, Option, OptGroup, Root as NativeSelect, Option as NativeSelectOption, OptGroup as NativeSelectOptGroup, };

package/dist/components/ui/native-select/index.js

@@ -1,4 +1,4 @@
 import OptGroup from "./native-select-opt-group.svelte";
 import Option from "./native-select-option.svelte";
 import Root from "./native-select.svelte";
-export { Root, Option, OptGroup, Root as NativeSelect, Option as NativeSelectOption, OptGroup as NativeSelectOptGroup };
+export { Root, Option, OptGroup, Root as NativeSelect, Option as NativeSelectOption, OptGroup as NativeSelectOptGroup, };

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

@@ -2,7 +2,11 @@
 	import type { WithElementRef } from "../../../utils.js";
 	import type { HTMLOptgroupAttributes } from "svelte/elements";
 
-	let { ref = $bindable(null), children, ...restProps }: WithElementRef<HTMLOptgroupAttributes> = $props();
+	let {
+		ref = $bindable(null),
+		children,
+		...restProps
+	}: WithElementRef<HTMLOptgroupAttributes> = $props();
 </script>
 
 <optgroup bind:this={ref} data-slot="native-select-opt-group" {...restProps}>

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

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import ChevronDownIcon from "@lucide/svelte/icons/chevron-down";
+	import ChevronDownIcon from '@lucide/svelte/icons/chevron-down';
 	import { cn, type WithElementRef } from "../../../utils.js";
 	import type { HTMLSelectAttributes } from "svelte/elements";
 
@@ -18,7 +18,10 @@
 </script>
 
 <div
-	class={cn("cn-native-select-wrapper group/native-select relative w-fit has-[select:disabled]:opacity-50", className)}
+	class={cn(
+		"cn-native-select-wrapper group/native-select relative w-fit has-[select:disabled]:opacity-50",
+		className
+	)}
 	data-slot="native-select-wrapper"
 	data-size={size}
 >
@@ -27,14 +30,10 @@
 		bind:this={ref}
 		data-slot="native-select"
 		data-size={size}
-		class="border-input selection:bg-primary selection:text-primary-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:bg-input/30 dark:hover:bg-input/50 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 h-8 w-full min-w-0 appearance-none rounded-lg border bg-transparent py-1 pr-8 pl-2.5 text-sm transition-colors outline-none select-none focus-visible:ring-3 disabled:pointer-events-none disabled:cursor-not-allowed aria-invalid:ring-3 data-[size=sm]:h-7 data-[size=sm]:rounded-[min(var(--radius-md),10px)] data-[size=sm]:py-0.5"
+		class="h-8 w-full min-w-0 appearance-none rounded-lg border border-input bg-transparent py-1 pr-8 pl-2.5 text-sm transition-colors select-none selection:bg-primary selection:text-primary-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 data-[size=sm]:h-7 data-[size=sm]:rounded-[min(var(--radius-md),10px)] data-[size=sm]:py-0.5 dark:bg-input/30 dark:hover:bg-input/50 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 outline-none disabled:pointer-events-none disabled:cursor-not-allowed"
 		{...restProps}
 	>
 		{@render children?.()}
 	</select>
-	<ChevronDownIcon
-		class="text-muted-foreground pointer-events-none absolute top-1/2 right-2.5 size-4 -translate-y-1/2 select-none"
-		aria-hidden
-		data-slot="native-select-icon"
-	/>
+	<ChevronDownIcon class="top-1/2 right-2.5 size-4 -translate-y-1/2 text-muted-foreground pointer-events-none absolute select-none" aria-hidden data-slot="native-select-icon" />
 </div>

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

@@ -2,14 +2,18 @@
 	import { NavigationMenu as NavigationMenuPrimitive } from "bits-ui";
 	import { cn } from "../../../utils.js";
 
-	let { ref = $bindable(null), class: className, ...restProps }: NavigationMenuPrimitive.ContentProps = $props();
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: NavigationMenuPrimitive.ContentProps = $props();
 </script>
 
 <NavigationMenuPrimitive.Content
 	bind:ref
 	data-slot="navigation-menu-content"
 	class={cn(
-		"group-data-[viewport=false]/navigation-menu:bg-popover group-data-[viewport=false]/navigation-menu:text-popover-foreground group-data-[viewport=false]/navigation-menu:ring-foreground/10 data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 data-[motion^=from-]:animate-in data-[motion^=from-]:fade-in data-[motion^=to-]:animate-out data-[motion^=to-]:fade-out group-data-[viewport=false]/navigation-menu:data-open:animate-in group-data-[viewport=false]/navigation-menu:data-open:fade-in-0 group-data-[viewport=false]/navigation-menu:data-open:zoom-in-95 group-data-[viewport=false]/navigation-menu:data-closed:animate-out group-data-[viewport=false]/navigation-menu:data-closed:fade-out-0 group-data-[viewport=false]/navigation-menu:data-closed:zoom-out-95 top-0 left-0 w-full p-1 ease-[cubic-bezier(0.22,1,0.36,1)] group-data-[viewport=false]/navigation-menu:top-full group-data-[viewport=false]/navigation-menu:mt-1.5 group-data-[viewport=false]/navigation-menu:overflow-hidden group-data-[viewport=false]/navigation-menu:rounded-lg group-data-[viewport=false]/navigation-menu:shadow group-data-[viewport=false]/navigation-menu:ring-1 group-data-[viewport=false]/navigation-menu:duration-300 **:data-[slot=navigation-menu-link]:focus:ring-0 **:data-[slot=navigation-menu-link]:focus:outline-none md:absolute md:w-auto",
+		"p-1 ease-[cubic-bezier(0.22,1,0.36,1)] group-data-[viewport=false]/navigation-menu:rounded-lg group-data-[viewport=false]/navigation-menu:bg-popover group-data-[viewport=false]/navigation-menu:text-popover-foreground group-data-[viewport=false]/navigation-menu:shadow group-data-[viewport=false]/navigation-menu:ring-1 group-data-[viewport=false]/navigation-menu:ring-foreground/10 group-data-[viewport=false]/navigation-menu:duration-300 data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 data-[motion^=from-]:animate-in data-[motion^=from-]:fade-in data-[motion^=to-]:animate-out data-[motion^=to-]:fade-out group-data-[viewport=false]/navigation-menu:data-open:animate-in group-data-[viewport=false]/navigation-menu:data-open:fade-in-0 group-data-[viewport=false]/navigation-menu:data-open:zoom-in-95 group-data-[viewport=false]/navigation-menu:data-closed:animate-out group-data-[viewport=false]/navigation-menu:data-closed:fade-out-0 group-data-[viewport=false]/navigation-menu:data-closed:zoom-out-95 top-0 left-0 w-full group-data-[viewport=false]/navigation-menu:top-full group-data-[viewport=false]/navigation-menu:mt-1.5 group-data-[viewport=false]/navigation-menu:overflow-hidden **:data-[slot=navigation-menu-link]:focus:ring-0 **:data-[slot=navigation-menu-link]:focus:outline-none md:absolute md:w-auto",
 		className
 	)}
 	{...restProps}

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

@@ -2,7 +2,11 @@
 	import { NavigationMenu as NavigationMenuPrimitive } from "bits-ui";
 	import { cn } from "../../../utils.js";
 
-	let { ref = $bindable(null), class: className, ...restProps }: NavigationMenuPrimitive.IndicatorProps = $props();
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: NavigationMenuPrimitive.IndicatorProps = $props();
 </script>
 
 <NavigationMenuPrimitive.Indicator
@@ -14,5 +18,5 @@
 	)}
 	{...restProps}
 >
-	<div class="bg-border relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm shadow-md"></div>
+	<div class="rounded-tl-sm bg-border shadow-md relative top-[60%] h-2 w-2 rotate-45"></div>
 </NavigationMenuPrimitive.Indicator>

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

@@ -2,7 +2,11 @@
 	import { NavigationMenu as NavigationMenuPrimitive } from "bits-ui";
 	import { cn } from "../../../utils.js";
 
-	let { ref = $bindable(null), class: className, ...restProps }: NavigationMenuPrimitive.ItemProps = $props();
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: NavigationMenuPrimitive.ItemProps = $props();
 </script>
 
 <NavigationMenuPrimitive.Item

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

@@ -2,15 +2,16 @@
 	import { NavigationMenu as NavigationMenuPrimitive } from "bits-ui";
 	import { cn } from "../../../utils.js";
 
-	let { ref = $bindable(null), class: className, ...restProps }: NavigationMenuPrimitive.LinkProps = $props();
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: NavigationMenuPrimitive.LinkProps = $props();
 </script>
 
 <NavigationMenuPrimitive.Link
 	bind:ref
 	data-slot="navigation-menu-link"
-	class={cn(
-		"hover:bg-muted focus:bg-muted focus-visible:ring-ring/50 data-active:bg-muted/50 data-active:hover:bg-muted data-active:focus:bg-muted flex items-center gap-2 rounded-lg p-2 text-sm transition-all outline-none focus-visible:ring-3 focus-visible:outline-1 in-data-[slot=navigation-menu-content]:rounded-md [&_svg:not([class*='size-'])]:size-4",
-		className
-	)}
+	class={cn("flex items-center gap-2 rounded-lg p-2 text-sm transition-all outline-none hover:bg-muted focus:bg-muted focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:outline-1 in-data-[slot=navigation-menu-content]:rounded-md data-active:bg-muted/50 data-active:hover:bg-muted data-active:focus:bg-muted [&_svg:not([class*='size-'])]:size-4", className)}
 	{...restProps}
 />

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

@@ -2,12 +2,19 @@
 	import { NavigationMenu as NavigationMenuPrimitive } from "bits-ui";
 	import { cn } from "../../../utils.js";
 
-	let { ref = $bindable(null), class: className, ...restProps }: NavigationMenuPrimitive.ListProps = $props();
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: NavigationMenuPrimitive.ListProps = $props();
 </script>
 
 <NavigationMenuPrimitive.List
 	bind:ref
 	data-slot="navigation-menu-list"
-	class={cn("group flex flex-1 list-none items-center justify-center gap-0", className)}
+	class={cn(
+		"gap-0 group flex flex-1 list-none items-center justify-center",
+		className
+	)}
 	{...restProps}
 />

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

@@ -9,7 +9,7 @@
 
 <script lang="ts">
 	import { NavigationMenu as NavigationMenuPrimitive } from "bits-ui";
-	import ChevronDownIcon from "@lucide/svelte/icons/chevron-down";
+	import ChevronDownIcon from '@lucide/svelte/icons/chevron-down';
 	let {
 		ref = $bindable(null),
 		class: className,
@@ -25,8 +25,5 @@
 	{...restProps}
 >
 	{@render children?.()}
-	<ChevronDownIcon
-		class="relative top-px ml-1 size-3 transition duration-300 group-data-open/navigation-menu-trigger:rotate-180 group-data-popup-open/navigation-menu-trigger:rotate-180"
-		aria-hidden="true"
-	/>
+	<ChevronDownIcon class="relative top-px ml-1 size-3 transition duration-300 group-data-popup-open/navigation-menu-trigger:rotate-180 group-data-open/navigation-menu-trigger:rotate-180" aria-hidden="true" />
 </NavigationMenuPrimitive.Trigger>

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

@@ -2,7 +2,11 @@
 	import { NavigationMenu as NavigationMenuPrimitive } from "bits-ui";
 	import { cn } from "../../../utils.js";
 
-	let { ref = $bindable(null), class: className, ...restProps }: NavigationMenuPrimitive.ViewportProps = $props();
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: NavigationMenuPrimitive.ViewportProps = $props();
 </script>
 
 <div class={cn("absolute start-0 top-full isolate z-50 flex justify-center")}>
@@ -10,7 +14,7 @@
 		bind:ref
 		data-slot="navigation-menu-viewport"
 		class={cn(
-			"bg-popover text-popover-foreground ring-foreground/10 data-open:animate-in data-open:zoom-in-90 data-closed:animate-out data-closed:zoom-out-90 origin-top-center relative mt-1.5 h-[calc(var(--bits-navigation-menu-viewport-height)+1rem)] w-full overflow-hidden rounded-lg shadow ring-1 duration-100 md:w-[calc(var(--bits-navigation-menu-viewport-width)+1rem)]",
+			"rounded-lg bg-popover text-popover-foreground shadow ring-1 ring-foreground/10 duration-100 data-open:animate-in data-open:zoom-in-90 data-closed:animate-out data-closed:zoom-out-90 origin-top-center relative mt-1.5 h-[calc(var(--bits-navigation-menu-viewport-height)+1rem)] w-full overflow-hidden md:w-[calc(var(--bits-navigation-menu-viewport-width)+1rem)]",
 			className
 		)}
 		{...restProps}

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

@@ -18,7 +18,10 @@
 	bind:ref
 	data-slot="navigation-menu"
 	data-viewport={viewport}
-	class={cn("group/navigation-menu relative flex max-w-max max-w-max flex-1 items-center justify-center", className)}
+	class={cn(
+		"max-w-max group/navigation-menu relative flex max-w-max flex-1 items-center justify-center",
+		className
+	)}
 	{...restProps}
 >
 	{@render children?.()}

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

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

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

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import MoreHorizontalIcon from "@lucide/svelte/icons/more-horizontal";
+	import MoreHorizontalIcon from '@lucide/svelte/icons/more-horizontal';
 	import { cn, type WithElementRef, type WithoutChildren } from "../../../utils.js";
 	import type { HTMLAttributes } from "svelte/elements";
 
@@ -14,12 +14,9 @@
 	bind:this={ref}
 	aria-hidden="true"
 	data-slot="pagination-ellipsis"
-	class={cn(
-		"flex size-8 items-center items-center justify-center justify-center [&_svg:not([class*='size-'])]:size-4",
-		className
-	)}
+	class={cn("size-8 items-center justify-center [&_svg:not([class*='size-'])]:size-4 flex items-center justify-center", className)}
 	{...restProps}
 >
-	<MoreHorizontalIcon />
+	<MoreHorizontalIcon  />
 	<span class="sr-only">More pages</span>
 </span>

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

@@ -2,7 +2,11 @@
 	import type { WithElementRef } from "../../../utils.js";
 	import type { HTMLLiAttributes } from "svelte/elements";
 
-	let { ref = $bindable(null), children, ...restProps }: WithElementRef<HTMLLiAttributes> = $props();
+	let {
+		ref = $bindable(null),
+		children,
+		...restProps
+	}: WithElementRef<HTMLLiAttributes> = $props();
 </script>
 
 <li bind:this={ref} data-slot="pagination-item" {...restProps}>

package/dist/components/ui/pagination/pagination-link.svelte

@@ -27,7 +27,11 @@
 	data-slot="pagination-link"
 	data-active={isActive}
 	data-size={size}
-	class={cn(buttonVariants({ size, variant: isActive ? "outline" : "ghost" }), "cn-pagination-link", className)}
+	class={cn(
+		buttonVariants({ size, variant: isActive ? "outline" : "ghost" }),
+		"cn-pagination-link",
+		className
+	)}
 	{...restProps}
 >
 	{#if children}

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

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { Pagination as PaginationPrimitive } from "bits-ui";
-	import ChevronRightIcon from "@lucide/svelte/icons/chevron-right";
+	import ChevronRightIcon from '@lucide/svelte/icons/chevron-right';
 	import { cn } from "../../../utils.js";
 	import { buttonVariants } from "../button/index.js";
 

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

@@ -1,10 +1,14 @@
 <script lang="ts">
 	import { Pagination as PaginationPrimitive } from "bits-ui";
-	import ChevronRightIcon from "@lucide/svelte/icons/chevron-right";
+	import ChevronRightIcon from '@lucide/svelte/icons/chevron-right';
 	import { buttonVariants } from "../button/index.js";
 	import { cn } from "../../../utils.js";
 
-	let { ref = $bindable(null), class: className, ...restProps }: PaginationPrimitive.NextButtonProps = $props();
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: PaginationPrimitive.NextButtonProps = $props();
 </script>
 
 <PaginationPrimitive.NextButton

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

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { Pagination as PaginationPrimitive } from "bits-ui";
-	import ChevronLeftIcon from "@lucide/svelte/icons/chevron-left";
+	import ChevronLeftIcon from '@lucide/svelte/icons/chevron-left';
 	import { cn } from "../../../utils.js";
 	import { buttonVariants } from "../button/index.js";
 

package/dist/components/ui/pagination/pagination-previous.svelte

@@ -1,16 +1,24 @@
 <script lang="ts">
 	import { Pagination as PaginationPrimitive } from "bits-ui";
-	import ChevronLeftIcon from "@lucide/svelte/icons/chevron-left";
+	import ChevronLeftIcon from '@lucide/svelte/icons/chevron-left';
 	import { buttonVariants } from "../button/index.js";
 	import { cn } from "../../../utils.js";
 
-	let { ref = $bindable(null), class: className, ...restProps }: PaginationPrimitive.PrevButtonProps = $props();
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: PaginationPrimitive.PrevButtonProps = $props();
 </script>
 
 <PaginationPrimitive.PrevButton
 	bind:ref
 	aria-label="Go to previous page"
-	class={cn(buttonVariants({ variant: "ghost", size: "default" }), "pl-1.5!", className)}
+	class={cn(
+		buttonVariants({ variant: "ghost", size: "default" }),
+		"pl-1.5!",
+		className
+	)}
 	{...restProps}
 >
 	<ChevronLeftIcon data-icon="inline-start" />

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

@@ -23,7 +23,7 @@
 		{sideOffset}
 		{align}
 		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 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 z-50 flex w-72 origin-(--transform-origin) flex-col gap-2.5 rounded-lg p-2.5 text-sm shadow-md ring-1 outline-hidden duration-100",
+			"flex flex-col gap-2.5 rounded-lg bg-popover p-2.5 text-sm 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 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 z-50 w-72 origin-(--transform-origin) outline-hidden",
 			className
 		)}
 		{...restProps}