@tanglemedia/svelte-starter-ui-shadcn 0.1.0 → 0.2.0

package/src/lib/components/ui/dialog/dialog-title.svelte

@@ -12,6 +12,6 @@
 <DialogPrimitive.Title
 	bind:ref
 	data-slot="dialog-title"
-	class={cn("text-lg font-semibold leading-none", className)}
+	class={cn("text-base leading-none font-medium", className)}
 	{...restProps}
 />

package/src/lib/components/ui/dialog/dialog-trigger.svelte

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

package/src/lib/components/ui/dialog/index.ts

@@ -1,13 +1,13 @@
-import Root from "./dialog.svelte";
-import Portal from "./dialog-portal.svelte";
-import Title from "./dialog-title.svelte";
+import Close from "./dialog-close.svelte";
+import Content from "./dialog-content.svelte";
+import Description from "./dialog-description.svelte";
 import Footer from "./dialog-footer.svelte";
 import Header from "./dialog-header.svelte";
 import Overlay from "./dialog-overlay.svelte";
-import Content from "./dialog-content.svelte";
-import Description from "./dialog-description.svelte";
+import Portal from "./dialog-portal.svelte";
+import Title from "./dialog-title.svelte";
 import Trigger from "./dialog-trigger.svelte";
-import Close from "./dialog-close.svelte";
+import Root from "./dialog.svelte";
 
 export {
 	Root,

package/src/lib/components/ui/drawer/drawer-content.svelte

@@ -1,10 +1,10 @@
 <script lang="ts">
 	import { Drawer as DrawerPrimitive } from "vaul-svelte";
-	import DrawerPortal from "./drawer-portal.svelte";
-	import DrawerOverlay from "./drawer-overlay.svelte";
 	import { cn } from "$lib/components/utils.js";
-	import type { ComponentProps } from "svelte";
 	import type { WithoutChildrenOrChild } from "$lib/components/utils.js";
+	import DrawerOverlay from "./drawer-overlay.svelte";
+	import DrawerPortal from "./drawer-portal.svelte";
+	import type { ComponentProps } from "svelte";
 
 	let {
 		ref = $bindable(null),
@@ -23,17 +23,13 @@
 		bind:ref
 		data-slot="drawer-content"
 		class={cn(
-			"group/drawer-content bg-background fixed z-50 flex h-auto flex-col",
-			"data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80vh] data-[vaul-drawer-direction=top]:rounded-b-lg data-[vaul-drawer-direction=top]:border-b",
-			"data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[80vh] data-[vaul-drawer-direction=bottom]:rounded-t-lg data-[vaul-drawer-direction=bottom]:border-t",
-			"data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:end-0 data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=right]:border-s data-[vaul-drawer-direction=right]:sm:max-w-sm",
-			"data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:start-0 data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=left]:border-e data-[vaul-drawer-direction=left]:sm:max-w-sm",
+			"bg-popover text-popover-foreground flex h-auto flex-col text-sm data-[vaul-drawer-direction=bottom]:rounded-t-xl data-[vaul-drawer-direction=bottom]:border-t data-[vaul-drawer-direction=left]:rounded-r-xl data-[vaul-drawer-direction=left]:border-r data-[vaul-drawer-direction=right]:rounded-l-xl data-[vaul-drawer-direction=right]:border-l data-[vaul-drawer-direction=top]:rounded-b-xl data-[vaul-drawer-direction=top]:border-b group/drawer-content fixed z-50 data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[80vh] data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:start-0 data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:end-0 data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80vh] data-[vaul-drawer-direction=left]:sm:max-w-sm data-[vaul-drawer-direction=right]:sm:max-w-sm",
 			className
 		)}
 		{...restProps}
 	>
 		<div
-			class="bg-muted mx-auto mt-4 hidden h-2 w-[100px] shrink-0 rounded-full group-data-[vaul-drawer-direction=bottom]/drawer-content:block"
+			class="bg-muted mx-auto mt-4 hidden h-1 w-[100px] shrink-0 rounded-full mx-auto hidden shrink-0 group-data-[vaul-drawer-direction=bottom]/drawer-content:block"
 		></div>
 		{@render children?.()}
 	</DrawerPrimitive.Content>

package/src/lib/components/ui/drawer/drawer-footer.svelte

@@ -13,7 +13,7 @@
 <div
 	bind:this={ref}
 	data-slot="drawer-footer"
-	class={cn("mt-auto flex flex-col gap-2 p-4", className)}
+	class={cn("gap-2 p-4 mt-auto flex flex-col", className)}
 	{...restProps}
 >
 	{@render children?.()}

package/src/lib/components/ui/drawer/drawer-header.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
-	import type { HTMLAttributes } from "svelte/elements";
 	import { cn, type WithElementRef } from "$lib/components/utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
 
 	let {
 		ref = $bindable(null),
@@ -13,7 +13,10 @@
 <div
 	bind:this={ref}
 	data-slot="drawer-header"
-	class={cn("flex flex-col gap-1.5 p-4", className)}
+	class={cn(
+		"gap-0.5 p-4 md:gap-0.5 md:text-left flex flex-col group-data-[vaul-drawer-direction=bottom]/drawer-content:text-center group-data-[vaul-drawer-direction=top]/drawer-content:text-center",
+		className
+	)}
 	{...restProps}
 >
 	{@render children?.()}

package/src/lib/components/ui/drawer/drawer-overlay.svelte

@@ -13,7 +13,7 @@
 	bind:ref
 	data-slot="drawer-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/50",
+		"bg-black/10 supports-backdrop-filter:backdrop-blur-xs fixed inset-0 z-50 data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0",
 		className
 	)}
 	{...restProps}

package/src/lib/components/ui/drawer/drawer-title.svelte

@@ -12,6 +12,6 @@
 <DrawerPrimitive.Title
 	bind:ref
 	data-slot="drawer-title"
-	class={cn("text-foreground font-semibold", className)}
+	class={cn("text-foreground text-base font-medium", className)}
 	{...restProps}
 />

package/src/lib/components/ui/drawer/index.ts

@@ -1,14 +1,14 @@
-import Root from "./drawer.svelte";
+import Close from "./drawer-close.svelte";
 import Content from "./drawer-content.svelte";
 import Description from "./drawer-description.svelte";
-import Overlay from "./drawer-overlay.svelte";
 import Footer from "./drawer-footer.svelte";
 import Header from "./drawer-header.svelte";
-import Title from "./drawer-title.svelte";
 import NestedRoot from "./drawer-nested.svelte";
-import Close from "./drawer-close.svelte";
-import Trigger from "./drawer-trigger.svelte";
+import Overlay from "./drawer-overlay.svelte";
 import Portal from "./drawer-portal.svelte";
+import Title from "./drawer-title.svelte";
+import Trigger from "./drawer-trigger.svelte";
+import Root from "./drawer.svelte";
 
 export {
 	Root,

package/src/lib/components/ui/dropdown-menu/dropdown-menu-checkbox-item.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
-	import CheckIcon from "@lucide/svelte/icons/check";
-	import MinusIcon from "@lucide/svelte/icons/minus";
+	import MinusIcon from '@lucide/svelte/icons/minus';
+	import CheckIcon from '@lucide/svelte/icons/check';
 	import { cn, type WithoutChildrenOrChild } from "$lib/components/utils.js";
 	import type { Snippet } from "svelte";
 
@@ -11,6 +11,7 @@
 		indeterminate = $bindable(false),
 		class: className,
 		children: childrenProp,
+		closeOnSelect = false,
 		...restProps
 	}: WithoutChildrenOrChild<DropdownMenuPrimitive.CheckboxItemProps> & {
 		children?: Snippet;
@@ -19,23 +20,25 @@
 
 <DropdownMenuPrimitive.CheckboxItem
 	bind:ref
+	{closeOnSelect}
 	bind:checked
 	bind:indeterminate
 	data-slot="dropdown-menu-checkbox-item"
 	class={cn(
-		"focus:bg-accent focus:text-accent-foreground outline-hidden relative flex cursor-default select-none items-center gap-2 rounded-sm py-1.5 pe-2 ps-8 text-sm data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+		"focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm data-inset:pl-7 [&_svg:not([class*='size-'])]:size-4 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, indeterminate })}
 		<span
-			class="pointer-events-none absolute start-2 flex size-3.5 items-center justify-center"
+			class="absolute right-2 flex items-center justify-center pointer-events-none"
+			data-slot="dropdown-menu-checkbox-item-indicator"
 		>
 			{#if indeterminate}
-				<MinusIcon class="size-4" />
-			{:else}
-				<CheckIcon class={cn("size-4", !checked && "text-transparent")} />
+				<MinusIcon  />
+			{:else if checked}
+				<CheckIcon  />
 			{/if}
 		</span>
 		{@render childrenProp?.()}

package/src/lib/components/ui/dropdown-menu/dropdown-menu-content.svelte

@@ -1,12 +1,13 @@
 <script lang="ts">
+	import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
 	import { cn, type WithoutChildrenOrChild } from "$lib/components/utils.js";
 	import DropdownMenuPortal from "./dropdown-menu-portal.svelte";
-	import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
 	import type { ComponentProps } from "svelte";
 
 	let {
 		ref = $bindable(null),
 		sideOffset = 4,
+		align = "start",
 		portalProps,
 		class: className,
 		...restProps
@@ -20,8 +21,9 @@
 		bind:ref
 		data-slot="dropdown-menu-content"
 		{sideOffset}
+		{align}
 		class={cn(
-			"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-end-2 data-[side=right]:slide-in-from-start-2 data-[side=top]:slide-in-from-bottom-2 max-h-(--bits-dropdown-menu-content-available-height) origin-(--bits-dropdown-menu-content-transform-origin) z-50 min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-md border p-1 shadow-md outline-none",
+			"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 bg-popover text-popover-foreground min-w-32 rounded-lg p-1 shadow-md ring-1 duration-100 z-50 max-h-(--bits-dropdown-menu-content-available-height) w-(--bits-dropdown-menu-anchor-width) origin-(--bits-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto data-closed:overflow-hidden",
 			className
 		)}
 		{...restProps}

package/src/lib/components/ui/dropdown-menu/dropdown-menu-group-heading.svelte

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

package/src/lib/components/ui/dropdown-menu/dropdown-menu-item.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { cn } from "$lib/components/utils.js";
 	import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
+	import { cn } from "$lib/components/utils.js";
 
 	let {
 		ref = $bindable(null),
@@ -20,7 +20,7 @@
 	data-inset={inset}
 	data-variant={variant}
 	class={cn(
-		"data-highlighted:bg-accent data-highlighted:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:data-highlighted:bg-destructive/10 dark:data-[variant=destructive]:data-highlighted:bg-destructive/20 data-[variant=destructive]:data-highlighted:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground outline-hidden relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm data-[disabled]:pointer-events-none data-[inset]:ps-8 data-[disabled]:opacity-50 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+		"focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:text-destructive not-data-[variant=destructive]:focus:**:text-accent-foreground gap-1.5 rounded-md px-1.5 py-1 text-sm data-inset:pl-7 [&_svg:not([class*='size-'])]:size-4 group/dropdown-menu-item 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}

package/src/lib/components/ui/dropdown-menu/dropdown-menu-label.svelte

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

package/src/lib/components/ui/dropdown-menu/dropdown-menu-radio-item.svelte

@@ -1,31 +1,34 @@
 <script lang="ts">
 	import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
-	import CircleIcon from "@lucide/svelte/icons/circle";
+	import CheckIcon from '@lucide/svelte/icons/check';
 	import { cn, type WithoutChild } from "$lib/components/utils.js";
 
 	let {
 		ref = $bindable(null),
 		class: className,
 		children: childrenProp,
+		closeOnSelect = false,
 		...restProps
 	}: WithoutChild<DropdownMenuPrimitive.RadioItemProps> = $props();
 </script>
 
 <DropdownMenuPrimitive.RadioItem
 	bind:ref
+	{closeOnSelect}
 	data-slot="dropdown-menu-radio-item"
 	class={cn(
-		"focus:bg-accent focus:text-accent-foreground outline-hidden relative flex cursor-default select-none items-center gap-2 rounded-sm py-1.5 pe-2 ps-8 text-sm data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+		"focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm data-inset:pl-7 [&_svg:not([class*='size-'])]:size-4 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 })}
 		<span
-			class="pointer-events-none absolute start-2 flex size-3.5 items-center justify-center"
+			class="absolute right-2 flex items-center justify-center pointer-events-none"
+			data-slot="dropdown-menu-radio-item-indicator"
 		>
 			{#if checked}
-				<CircleIcon class="size-2 fill-current" />
+				<CheckIcon  />
 			{/if}
 		</span>
 		{@render childrenProp?.({ checked })}

package/src/lib/components/ui/dropdown-menu/dropdown-menu-shortcut.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
-	import type { HTMLAttributes } from "svelte/elements";
 	import { cn, type WithElementRef } from "$lib/components/utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
 
 	let {
 		ref = $bindable(null),
@@ -13,7 +13,7 @@
 <span
 	bind:this={ref}
 	data-slot="dropdown-menu-shortcut"
-	class={cn("text-muted-foreground ms-auto text-xs tracking-widest", className)}
+	class={cn("text-muted-foreground group-focus/dropdown-menu-item:text-accent-foreground ml-auto text-xs tracking-widest", className)}
 	{...restProps}
 >
 	{@render children?.()}

package/src/lib/components/ui/dropdown-menu/dropdown-menu-sub-content.svelte

@@ -1,20 +1,31 @@
 <script lang="ts">
 	import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
-	import { cn } from "$lib/components/utils.js";
+	import { cn, type WithoutChildrenOrChild } from "$lib/components/utils.js";
+	import DropdownMenuPortal from "./dropdown-menu-portal.svelte";
+	import type { ComponentProps } from "svelte";
 
 	let {
 		ref = $bindable(null),
 		class: className,
+		align = "start",
+		alignOffset = -3,
+		portalProps,
 		...restProps
-	}: DropdownMenuPrimitive.SubContentProps = $props();
+	}: DropdownMenuPrimitive.SubContentProps & {
+		portalProps?: WithoutChildrenOrChild<ComponentProps<typeof DropdownMenuPortal>>;
+	} = $props();
 </script>
 
-<DropdownMenuPrimitive.SubContent
-	bind:ref
-	data-slot="dropdown-menu-sub-content"
-	class={cn(
-		"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-end-2 data-[side=right]:slide-in-from-start-2 data-[side=top]:slide-in-from-bottom-2 origin-(--bits-dropdown-menu-content-transform-origin) z-50 min-w-[8rem] overflow-hidden rounded-md border p-1 shadow-lg",
-		className
-	)}
-	{...restProps}
-/>
+<DropdownMenuPortal {...portalProps}>
+	<DropdownMenuPrimitive.SubContent
+		bind:ref
+		data-slot="dropdown-menu-sub-content"
+		{align}
+		{alignOffset}
+		class={cn(
+			"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 bg-popover text-popover-foreground min-w-[96px] rounded-lg p-1 shadow-lg ring-1 duration-100 z-50 origin-(--bits-dropdown-menu-content-transform-origin) overflow-hidden",
+			className
+		)}
+		{...restProps}
+	/>
+</DropdownMenuPortal>

package/src/lib/components/ui/dropdown-menu/dropdown-menu-sub-trigger.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
-	import ChevronRightIcon from "@lucide/svelte/icons/chevron-right";
+	import ChevronRightIcon from '@lucide/svelte/icons/chevron-right';
 	import { cn } from "$lib/components/utils.js";
 
 	let {
@@ -19,11 +19,11 @@
 	data-slot="dropdown-menu-sub-trigger"
 	data-inset={inset}
 	class={cn(
-		"data-highlighted:bg-accent data-highlighted:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground outline-hidden [&_svg:not([class*='text-'])]:text-muted-foreground flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm data-[disabled]:pointer-events-none data-[inset]:ps-8 data-[disabled]:opacity-50 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+		"focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground gap-1.5 rounded-md px-1.5 py-1 text-sm data-inset:pl-7 [&_svg:not([class*='size-'])]:size-4 flex cursor-default items-center outline-hidden select-none [&_svg]:pointer-events-none [&_svg]:shrink-0",
 		className
 	)}
 	{...restProps}
 >
 	{@render children?.()}
-	<ChevronRightIcon class="ms-auto size-4" />
+	<ChevronRightIcon class="cn-rtl-flip ml-auto" />
 </DropdownMenuPrimitive.SubTrigger>

package/src/lib/components/ui/dropdown-menu/index.ts

@@ -1,20 +1,20 @@
-import Root from "./dropdown-menu.svelte";
-import Sub from "./dropdown-menu-sub.svelte";
 import CheckboxGroup from "./dropdown-menu-checkbox-group.svelte";
 import CheckboxItem from "./dropdown-menu-checkbox-item.svelte";
 import Content from "./dropdown-menu-content.svelte";
+import GroupHeading from "./dropdown-menu-group-heading.svelte";
 import Group from "./dropdown-menu-group.svelte";
 import Item from "./dropdown-menu-item.svelte";
 import Label from "./dropdown-menu-label.svelte";
+import Portal from "./dropdown-menu-portal.svelte";
 import RadioGroup from "./dropdown-menu-radio-group.svelte";
 import RadioItem from "./dropdown-menu-radio-item.svelte";
 import Separator from "./dropdown-menu-separator.svelte";
 import Shortcut from "./dropdown-menu-shortcut.svelte";
-import Trigger from "./dropdown-menu-trigger.svelte";
 import SubContent from "./dropdown-menu-sub-content.svelte";
 import SubTrigger from "./dropdown-menu-sub-trigger.svelte";
-import GroupHeading from "./dropdown-menu-group-heading.svelte";
-import Portal from "./dropdown-menu-portal.svelte";
+import Sub from "./dropdown-menu-sub.svelte";
+import Trigger from "./dropdown-menu-trigger.svelte";
+import Root from "./dropdown-menu.svelte";
 
 export {
 	CheckboxGroup,

package/src/lib/components/ui/empty/empty-content.svelte

@@ -14,7 +14,7 @@
 	bind:this={ref}
 	data-slot="empty-content"
 	class={cn(
-		"flex w-full min-w-0 max-w-sm flex-col items-center gap-4 text-balance text-sm",
+		"gap-2.5 text-sm flex w-full max-w-sm min-w-0 flex-col items-center text-balance",
 		className
 	)}
 	{...restProps}

package/src/lib/components/ui/empty/empty-description.svelte

@@ -14,7 +14,7 @@
 	bind:this={ref}
 	data-slot="empty-description"
 	class={cn(
-		"text-muted-foreground [&>a:hover]:text-primary text-sm/relaxed [&>a]:underline [&>a]:underline-offset-4",
+		"text-sm/relaxed text-muted-foreground [&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary",
 		className
 	)}
 	{...restProps}

package/src/lib/components/ui/empty/empty-header.svelte

@@ -13,7 +13,7 @@
 <div
 	bind:this={ref}
 	data-slot="empty-header"
-	class={cn("flex max-w-sm flex-col items-center gap-2 text-center", className)}
+	class={cn("gap-2 flex max-w-sm flex-col items-center", className)}
 	{...restProps}
 >
 	{@render children?.()}

package/src/lib/components/ui/empty/empty-media.svelte

@@ -6,7 +6,7 @@
 		variants: {
 			variant: {
 				default: "bg-transparent",
-				icon: "bg-muted text-foreground flex size-10 shrink-0 items-center justify-center rounded-lg [&_svg:not([class*='size-'])]:size-6",
+				icon: "bg-muted text-foreground flex size-8 shrink-0 items-center justify-center rounded-lg [&_svg:not([class*='size-'])]:size-4",
 			},
 		},
 		defaultVariants: {

package/src/lib/components/ui/empty/empty-title.svelte

@@ -13,7 +13,7 @@
 <div
 	bind:this={ref}
 	data-slot="empty-title"
-	class={cn("text-lg font-medium tracking-tight", className)}
+	class={cn("text-sm font-medium tracking-tight", className)}
 	{...restProps}
 >
 	{@render children?.()}

package/src/lib/components/ui/empty/empty.svelte

@@ -14,7 +14,7 @@
 	bind:this={ref}
 	data-slot="empty"
 	class={cn(
-		"flex min-w-0 flex-1 flex-col items-center justify-center gap-6 text-balance rounded-lg border-dashed p-6 text-center md:p-12",
+		"gap-4 rounded-xl border-dashed p-6 flex w-full min-w-0 flex-1 flex-col items-center justify-center text-center text-balance",
 		className
 	)}
 	{...restProps}

package/src/lib/components/ui/empty/index.ts

@@ -1,9 +1,9 @@
-import Root from "./empty.svelte";
+import Content from "./empty-content.svelte";
+import Description from "./empty-description.svelte";
 import Header from "./empty-header.svelte";
 import Media from "./empty-media.svelte";
 import Title from "./empty-title.svelte";
-import Description from "./empty-description.svelte";
-import Content from "./empty-content.svelte";
+import Root from "./empty.svelte";
 
 export {
 	Root,

package/src/lib/components/ui/field/field-content.svelte

@@ -13,7 +13,7 @@
 <div
 	bind:this={ref}
 	data-slot="field-content"
-	class={cn("group/field-content flex flex-1 flex-col gap-1.5 leading-snug", className)}
+	class={cn("gap-0.5 group/field-content flex flex-1 flex-col leading-snug", className)}
 	{...restProps}
 >
 	{@render children?.()}

package/src/lib/components/ui/field/field-description.svelte

@@ -14,9 +14,9 @@
 	bind:this={ref}
 	data-slot="field-description"
 	class={cn(
-		"text-muted-foreground text-sm font-normal leading-normal group-has-[[data-orientation=horizontal]]/field:text-balance",
-		"nth-last-2:-mt-1 last:mt-0 [[data-variant=legend]+&]:-mt-1.5",
-		"[&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4",
+		"text-muted-foreground text-left text-sm [[data-variant=legend]+&]:-mt-1.5 leading-normal font-normal group-has-data-horizontal/field:text-balance",
+		"last:mt-0 nth-last-2:-mt-1",
+		"[&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary",
 		className
 	)}
 	{...restProps}

package/src/lib/components/ui/field/field-error.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { cn, type WithElementRef } from "$lib/components/utils.js";
-	import type { HTMLAttributes } from "svelte/elements";
 	import type { Snippet } from "svelte";
+	import type { HTMLAttributes } from "svelte/elements";
 
 	let {
 		ref = $bindable(null),
@@ -19,7 +19,7 @@
 		if (children) return true;
 
 		// no errors
-		if (!errors) return false;
+		if (!errors || errors.length === 0) return false;
 
 		// has an error but no message
 		if (errors.length === 1 && !errors[0]?.message) {
@@ -46,7 +46,7 @@
 		{:else if singleErrorMessage}
 			{singleErrorMessage}
 		{:else if isMultipleErrors}
-			<ul class="ms-4 flex list-disc flex-col gap-1">
+			<ul class="ml-4 flex list-disc flex-col gap-1">
 				{#each errors ?? [] as error, index (index)}
 					{#if error?.message}
 						<li>{error.message}</li>

package/src/lib/components/ui/field/field-group.svelte

@@ -14,7 +14,7 @@
 	bind:this={ref}
 	data-slot="field-group"
 	class={cn(
-		"group/field-group @container/field-group flex w-full flex-col gap-7 data-[slot=checkbox-group]:gap-3 [&>[data-slot=field-group]]:gap-4",
+		"gap-5 data-[slot=checkbox-group]:gap-3 *:data-[slot=field-group]:gap-4 group/field-group @container/field-group flex w-full flex-col",
 		className
 	)}
 	{...restProps}

package/src/lib/components/ui/field/field-label.svelte

@@ -15,9 +15,8 @@
 	bind:ref
 	data-slot="field-label"
 	class={cn(
-		"group/field-label peer/field-label flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50",
-		"has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col has-[>[data-slot=field]]:rounded-md has-[>[data-slot=field]]:border [&>*]:data-[slot=field]:p-4",
-		"has-data-[state=checked]:bg-primary/5 has-data-[state=checked]:border-primary dark:has-data-[state=checked]:bg-primary/10",
+		"has-data-checked:bg-primary/5 has-data-checked:border-primary/30 dark:has-data-checked:border-primary/20 dark:has-data-checked:bg-primary/10 gap-2 leading-snug group-data-[disabled=true]/field:opacity-50 has-[>[data-slot=field]]:rounded-lg has-[>[data-slot=field]]:border has-[>[data-slot=field]]:not-has-[:disabled,[data-disabled]]:hover:bg-muted/50 has-[>[data-slot=field]]:has-[:focus-visible]:border-ring has-[>[data-slot=field]]:has-[:focus-visible]:ring-ring/50 has-[>[data-slot=field]]:has-[:focus-visible]:ring-3 *:data-[slot=field]:p-2.5 group/field-label peer/field-label flex w-fit",
+		"has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col",
 		className
 	)}
 	{...restProps}

package/src/lib/components/ui/field/field-legend.svelte

@@ -17,12 +17,7 @@
 	bind:this={ref}
 	data-slot="field-legend"
 	data-variant={variant}
-	class={cn(
-		"mb-3 font-medium",
-		"data-[variant=legend]:text-base",
-		"data-[variant=label]:text-sm",
-		className
-	)}
+	class={cn("mb-1.5 font-medium data-[variant=label]:text-sm data-[variant=legend]:text-base", className)}
 	{...restProps}
 >
 	{@render children?.()}

package/src/lib/components/ui/field/field-separator.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
 	import { Separator } from "$lib/components/ui/separator/index.js";
 	import { cn, type WithElementRef } from "$lib/components/utils.js";
-	import type { HTMLAttributes } from "svelte/elements";
 	import type { Snippet } from "svelte";
+	import type { HTMLAttributes } from "svelte/elements";
 
 	let {
 		ref = $bindable(null),
@@ -20,16 +20,13 @@
 	bind:this={ref}
 	data-slot="field-separator"
 	data-content={hasContent}
-	class={cn(
-		"relative -my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2",
-		className
-	)}
+	class={cn("-my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2 relative", className)}
 	{...restProps}
 >
 	<Separator class="absolute inset-0 top-1/2" />
 	{#if children}
 		<span
-			class="bg-background text-muted-foreground relative mx-auto block w-fit px-2"
+			class="text-muted-foreground px-2 relative mx-auto block w-fit bg-background"
 			data-slot="field-separator-content"
 		>
 			{@render children()}

package/src/lib/components/ui/field/field-set.svelte

@@ -13,11 +13,7 @@
 <fieldset
 	bind:this={ref}
 	data-slot="field-set"
-	class={cn(
-		"flex flex-col gap-6",
-		"has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3",
-		className
-	)}
+	class={cn("gap-4 has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3 flex flex-col", className)}
 	{...restProps}
 >
 	{@render children?.()}