@selvajs/ui 6.6.0-beta.9 → 7.0.1-beta.0

package/src/lib/components/primitives/badge/badge.svelte

@@ -7,10 +7,10 @@
 			variant: {
 				default: 'bg-primary text-primary-foreground [a&]:hover:bg-primary/90 border-transparent',
 				secondary:
-					'bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90 border-transparent',
+					'bg-secondary text-secondary-foreground [a&]:hover:bg-selected border-transparent',
 				destructive:
 					'bg-destructive [a&]:hover:bg-destructive/90 dark:bg-destructive/70 border-transparent text-destructive-foreground',
-				outline: 'text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground'
+				outline: 'text-foreground [a&]:hover:bg-hover [a&]:hover:text-foreground'
 			}
 		},
 		defaultVariants: {
@@ -23,7 +23,7 @@
 
 <script lang="ts">
 	import type { HTMLAnchorAttributes } from 'svelte/elements';
-	import { cn, type WithElementRef } from '$lib/utils.js';
+	import { cn, type WithElementRef } from '#lib/utils.js';
 
 	let {
 		ref = $bindable(null),

package/src/lib/components/primitives/button/button.svelte

@@ -1,5 +1,5 @@
 <script lang="ts" module>
-	import { cn, type WithElementRef } from '$lib/utils';
+	import { cn, type WithElementRef } from '#lib/utils.js';
 	import type { HTMLAnchorAttributes, HTMLButtonAttributes } from 'svelte/elements';
 	import { type VariantProps, tv } from 'tailwind-variants';
 
@@ -8,17 +8,16 @@
 		variants: {
 			variant: {
 				default: 'bg-primary text-primary-foreground shadow-xs hover:bg-primary/90',
-				destructive:
-					'bg-destructive shadow-xs hover:bg-destructive/90 dark:bg-destructive/60 text-destructive-foreground',
+				destructive: 'bg-destructive shadow-xs hover:bg-destructive/90 text-destructive-foreground',
 				outline:
-					'bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 border',
+					'border border-border-strong bg-transparent shadow-xs hover:bg-hover hover:text-foreground',
 				// Outline with an opaque dark fill: the translucent one washes out over the light 3D canvas.
 				overlay:
-					'bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:border-input border',
-				secondary: 'bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80',
-				ghost: 'hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50',
+					'border border-border-strong bg-raised shadow-raised hover:bg-muted hover:text-foreground',
+				secondary: 'bg-secondary text-secondary-foreground shadow-xs hover:bg-selected',
+				ghost: 'hover:bg-hover hover:text-foreground',
 				dashed:
-					'border border-dashed border-input bg-background text-muted-foreground hover:bg-muted hover:text-foreground',
+					'border border-dashed border-border-strong bg-transparent text-muted-foreground hover:border-input hover:bg-hover hover:text-foreground',
 				link: 'text-primary underline-offset-4 hover:underline'
 			},
 			size: {

package/src/lib/components/primitives/button-group/button-group-separator.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
-	import { cn } from '$lib/utils.js';
+	import { cn } from '#lib/utils.js';
 	import type { ComponentProps } from 'svelte';
-	import { Separator } from '$lib/components/primitives/separator/index.js';
+	import { Separator } from '#lib/components/primitives/separator/index.js';
 
 	let {
 		ref = $bindable(null),

package/src/lib/components/primitives/button-group/button-group-text.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { cn, type WithElementRef } from '$lib/utils.js';
+	import { cn, type WithElementRef } from '#lib/utils.js';
 	import type { HTMLAttributes } from 'svelte/elements';
 	import type { Snippet } from 'svelte';
 

package/src/lib/components/primitives/button-group/button-group.svelte

@@ -20,7 +20,7 @@
 </script>
 
 <script lang="ts">
-	import { cn, type WithElementRef } from '$lib/utils.js';
+	import { cn, type WithElementRef } from '#lib/utils.js';
 	import type { HTMLAttributes } from 'svelte/elements';
 
 	let {

package/src/lib/components/primitives/card/card-content.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import type { HTMLAttributes } from 'svelte/elements';
-	import { cn, type WithElementRef } from '$lib/utils.js';
+	import { cn, type WithElementRef } from '#lib/utils.js';
 
 	let {
 		ref = $bindable(null),

package/src/lib/components/primitives/card/card-description.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import type { HTMLAttributes } from 'svelte/elements';
-	import { cn, type WithElementRef } from '$lib/utils.js';
+	import { cn, type WithElementRef } from '#lib/utils.js';
 
 	let {
 		ref = $bindable(null),

package/src/lib/components/primitives/card/card-footer.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { cn, type WithElementRef } from '$lib/utils.js';
+	import { cn, type WithElementRef } from '#lib/utils.js';
 	import type { HTMLAttributes } from 'svelte/elements';
 
 	let {

package/src/lib/components/primitives/card/card-header.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { cn, type WithElementRef } from '$lib/utils.js';
+	import { cn, type WithElementRef } from '#lib/utils.js';
 	import type { HTMLAttributes } from 'svelte/elements';
 
 	let {

package/src/lib/components/primitives/card/card-title.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import type { HTMLAttributes } from 'svelte/elements';
-	import { cn, type WithElementRef } from '$lib/utils.js';
+	import { cn, type WithElementRef } from '#lib/utils.js';
 
 	let {
 		ref = $bindable(null),

package/src/lib/components/primitives/card/card.svelte

@@ -2,7 +2,7 @@
 	import { tv, type VariantProps } from 'tailwind-variants';
 
 	export const cardVariants = tv({
-		base: 'shadow-sm flex flex-col rounded-xl border bg-card text-card-foreground',
+		base: 'shadow-raised flex flex-col rounded-xl border bg-card text-card-foreground',
 		variants: {
 			variant: {
 				default: 'gap-6 py-6',
@@ -18,7 +18,7 @@
 
 <script lang="ts">
 	import type { HTMLAttributes } from 'svelte/elements';
-	import { cn, type WithElementRef } from '$lib/utils.js';
+	import { cn, type WithElementRef } from '#lib/utils.js';
 
 	let {
 		ref = $bindable(null),

package/src/lib/components/primitives/checkbox/checkbox.svelte

@@ -2,7 +2,7 @@
 	import { Checkbox as CheckboxPrimitive } from 'bits-ui';
 	import CheckIcon from '@lucide/svelte/icons/check';
 	import MinusIcon from '@lucide/svelte/icons/minus';
-	import { cn, type WithoutChildrenOrChild } from '$lib/utils.js';
+	import { cn, type WithoutChildrenOrChild } from '#lib/utils.js';
 
 	let {
 		ref = $bindable(null),
@@ -17,7 +17,7 @@
 	bind:ref
 	data-slot="checkbox"
 	class={cn(
-		'peer size-4 shadow-xs flex shrink-0 items-center justify-center rounded-sm border border-input transition-shadow outline-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-[state=checked]:border-primary data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:bg-input/30 dark:aria-invalid:ring-destructive/40 dark:data-[state=checked]:bg-primary',
+		'peer size-4 shadow-xs flex shrink-0 items-center justify-center rounded-sm border border-input bg-field transition-shadow outline-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-[state=checked]:border-primary data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:aria-invalid:ring-destructive/40 dark:data-[state=checked]:bg-primary',
 		className
 	)}
 	bind:checked

package/src/lib/components/primitives/command/command-dialog.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
-	import * as Dialog from '$lib/components/primitives/dialog/index.js';
-	import { cn, type WithoutChildrenOrChild } from '$lib/utils.js';
+	import * as Dialog from '#lib/components/primitives/dialog/index.js';
+	import { cn, type WithoutChildrenOrChild } from '#lib/utils.js';
 	import Command from './command.svelte';
 	import type { Command as CommandPrimitive, Dialog as DialogPrimitive } from 'bits-ui';
 	import type { Snippet } from 'svelte';

package/src/lib/components/primitives/command/command-empty.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { Command as CommandPrimitive } from 'bits-ui';
-	import { cn } from '$lib/utils.js';
+	import { cn } from '#lib/utils.js';
 
 	let {
 		ref = $bindable(null),

package/src/lib/components/primitives/command/command-group.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { Command as CommandPrimitive, useId } from 'bits-ui';
-	import { cn } from '$lib/utils.js';
+	import { cn } from '#lib/utils.js';
 
 	let {
 		ref = $bindable(null),

package/src/lib/components/primitives/command/command-input.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
 	import { Command as CommandPrimitive } from 'bits-ui';
-	import * as InputGroup from '$lib/components/primitives/input-group/index.js';
+	import * as InputGroup from '#lib/components/primitives/input-group/index.js';
 	import SearchIcon from '@lucide/svelte/icons/search';
-	import { cn } from '$lib/utils.js';
+	import { cn } from '#lib/utils.js';
 
 	let {
 		ref = $bindable(null),
@@ -14,7 +14,7 @@
 
 <div data-slot="command-input-wrapper" class="p-1 pb-0">
 	<InputGroup.Root
-		class="h-8! *:data-[slot=input-group-addon]:pl-2! rounded-lg! border-input/30 bg-input/30 shadow-none!"
+		class="h-8! *:data-[slot=input-group-addon]:pl-2! rounded-inner! border-border-strong bg-field shadow-none!"
 	>
 		<CommandPrimitive.Input
 			{value}

package/src/lib/components/primitives/command/command-item.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { Command as CommandPrimitive } from 'bits-ui';
 	import CheckIcon from '@lucide/svelte/icons/check';
-	import { cn } from '$lib/utils.js';
+	import { cn } from '#lib/utils.js';
 
 	let {
 		ref = $bindable(null),
@@ -15,7 +15,7 @@
 	bind:ref
 	data-slot="command-item"
 	class={cn(
-		"gap-2 px-2 py-1.5 text-sm [&_svg:not([class*='size-'])]:size-4 group/command-item relative flex cursor-default items-center rounded-sm outline-hidden select-none in-data-[slot=dialog-content]:rounded-lg! data-selected:bg-muted data-selected:text-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 data-selected:*:[svg]:text-foreground",
+		"gap-2 px-2 py-1.5 text-sm [&_svg:not([class*='size-'])]:size-4 group/command-item relative flex cursor-default items-center rounded-inner outline-hidden select-none in-data-[slot=dialog-content]:rounded-lg! data-selected:bg-selected data-selected:text-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 data-selected:*:[svg]:text-foreground",
 		'data-disabled:pointer-events-none data-disabled:opacity-50',
 		className
 	)}

package/src/lib/components/primitives/command/command-link-item.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { Command as CommandPrimitive } from 'bits-ui';
-	import { cn } from '$lib/utils.js';
+	import { cn } from '#lib/utils.js';
 
 	let {
 		ref = $bindable(null),
@@ -13,7 +13,7 @@
 	bind:ref
 	data-slot="command-item"
 	class={cn(
-		"gap-2 px-2 py-1.5 text-sm [&_svg:not([class*='size-'])]:size-4 group/command-item relative flex cursor-default items-center rounded-sm outline-hidden select-none in-data-[slot=dialog-content]:rounded-lg! data-selected:bg-muted data-selected:text-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 data-selected:*:[svg]:text-foreground",
+		"gap-2 px-2 py-1.5 text-sm [&_svg:not([class*='size-'])]:size-4 group/command-item relative flex cursor-default items-center rounded-inner outline-hidden select-none in-data-[slot=dialog-content]:rounded-lg! data-selected:bg-selected data-selected:text-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 data-selected:*:[svg]:text-foreground",
 		'data-disabled:pointer-events-none data-disabled:opacity-50',
 		className
 	)}

package/src/lib/components/primitives/command/command-list.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { Command as CommandPrimitive } from 'bits-ui';
-	import { cn } from '$lib/utils.js';
+	import { cn } from '#lib/utils.js';
 
 	let {
 		ref = $bindable(null),

package/src/lib/components/primitives/command/command-separator.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { Command as CommandPrimitive } from 'bits-ui';
-	import { cn } from '$lib/utils.js';
+	import { cn } from '#lib/utils.js';
 
 	let {
 		ref = $bindable(null),

package/src/lib/components/primitives/command/command-shortcut.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { cn, type WithElementRef } from '$lib/utils.js';
+	import { cn, type WithElementRef } from '#lib/utils.js';
 	import type { HTMLAttributes } from 'svelte/elements';
 
 	let {

package/src/lib/components/primitives/command/command.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { Command as CommandPrimitive } from 'bits-ui';
-	import { cn } from '$lib/utils.js';
+	import { cn } from '#lib/utils.js';
 
 	export type CommandRootApi = CommandPrimitive.Root;
 
@@ -21,7 +21,7 @@
 	bind:ref
 	data-slot="command"
 	class={cn(
-		'p-1 flex size-full flex-col overflow-hidden rounded-xl! bg-popover text-popover-foreground',
+		'p-1 flex size-full flex-col overflow-hidden rounded-lg! bg-popover text-popover-foreground',
 		className
 	)}
 	{...restProps}

package/src/lib/components/primitives/context-menu/context-menu-checkbox-item.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { ContextMenu as ContextMenuPrimitive } from 'bits-ui';
 	import CheckIcon from '@lucide/svelte/icons/check';
-	import { cn, type WithoutChildrenOrChild } from '$lib/utils.js';
+	import { cn, type WithoutChildrenOrChild } from '#lib/utils.js';
 	import type { Snippet } from 'svelte';
 
 	let {
@@ -22,7 +22,7 @@
 	bind:indeterminate
 	data-slot="context-menu-checkbox-item"
 	class={cn(
-		"gap-2 py-1.5 pe-2 ps-8 text-sm [&_svg:not([class*='size-'])]:size-4 relative flex cursor-default items-center rounded-sm outline-hidden select-none data-highlighted:bg-accent data-highlighted:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+		"gap-2 py-1.5 pe-2 ps-8 text-sm [&_svg:not([class*='size-'])]:size-4 relative flex cursor-default items-center rounded-inner outline-hidden select-none data-highlighted:bg-hover data-highlighted:text-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
 		className
 	)}
 	{...restProps}

package/src/lib/components/primitives/context-menu/context-menu-content.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { ContextMenu as ContextMenuPrimitive } from 'bits-ui';
-	import { cn } from '$lib/utils.js';
+	import { cn } from '#lib/utils.js';
 
 	let {
 		ref = $bindable(null),
@@ -17,7 +17,7 @@
 		bind:ref
 		data-slot="context-menu-content"
 		class={cn(
-			'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 p-1 shadow-md min-w-32 z-50 max-h-(--bits-context-menu-content-available-height) origin-(--bits-context-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border 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 p-1 min-w-32 z-50 max-h-(--bits-context-menu-content-available-height) origin-(--bits-context-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-lg border border-border-strong bg-popover text-popover-foreground shadow-popover',
 			className
 		)}
 		{...restProps}

package/src/lib/components/primitives/context-menu/context-menu-group-heading.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { ContextMenu as ContextMenuPrimitive } from 'bits-ui';
-	import { cn } from '$lib/utils.js';
+	import { cn } from '#lib/utils.js';
 
 	let {
 		ref = $bindable(null),

package/src/lib/components/primitives/context-menu/context-menu-item.svelte

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

package/src/lib/components/primitives/context-menu/context-menu-label.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { cn, type WithElementRef } from '$lib/utils.js';
+	import { cn, type WithElementRef } from '#lib/utils.js';
 	import type { HTMLAttributes } from 'svelte/elements';
 
 	let {

package/src/lib/components/primitives/context-menu/context-menu-radio-item.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { ContextMenu as ContextMenuPrimitive } from 'bits-ui';
 	import CircleIcon from '@lucide/svelte/icons/circle';
-	import { cn, type WithoutChild } from '$lib/utils.js';
+	import { cn, type WithoutChild } from '#lib/utils.js';
 
 	let {
 		ref = $bindable(null),
@@ -15,7 +15,7 @@
 	bind:ref
 	data-slot="context-menu-radio-item"
 	class={cn(
-		"gap-2 py-1.5 pe-2 ps-8 text-sm [&_svg:not([class*='size-'])]:size-4 relative flex cursor-default items-center rounded-sm outline-hidden select-none data-highlighted:bg-accent data-highlighted:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+		"gap-2 py-1.5 pe-2 ps-8 text-sm [&_svg:not([class*='size-'])]:size-4 relative flex cursor-default items-center rounded-inner outline-hidden select-none data-highlighted:bg-hover data-highlighted:text-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
 		className
 	)}
 	{...restProps}

package/src/lib/components/primitives/context-menu/context-menu-separator.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { ContextMenu as ContextMenuPrimitive } from 'bits-ui';
-	import { cn } from '$lib/utils.js';
+	import { cn } from '#lib/utils.js';
 
 	let {
 		ref = $bindable(null),

package/src/lib/components/primitives/context-menu/context-menu-shortcut.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { cn, type WithElementRef } from '$lib/utils.js';
+	import { cn, type WithElementRef } from '#lib/utils.js';
 	import type { HTMLAttributes } from 'svelte/elements';
 
 	let {

package/src/lib/components/primitives/context-menu/context-menu-sub-content.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { ContextMenu as ContextMenuPrimitive } from 'bits-ui';
-	import { cn } from '$lib/utils.js';
+	import { cn } from '#lib/utils.js';
 
 	let {
 		ref = $bindable(null),
@@ -13,7 +13,7 @@
 	bind:ref
 	data-slot="context-menu-sub-content"
 	class={cn(
-		'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 p-1 shadow-lg min-w-32 z-50 origin-(--bits-context-menu-content-transform-origin) overflow-hidden rounded-md border 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 p-1 min-w-32 z-50 origin-(--bits-context-menu-content-transform-origin) overflow-hidden rounded-lg border border-border-strong bg-popover text-popover-foreground shadow-popover',
 		className
 	)}
 	{...restProps}

package/src/lib/components/primitives/context-menu/context-menu-sub-trigger.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { ContextMenu as ContextMenuPrimitive } from 'bits-ui';
 	import ChevronRightIcon from '@lucide/svelte/icons/chevron-right';
-	import { cn, type WithoutChild } from '$lib/utils.js';
+	import { cn, type WithoutChild } from '#lib/utils.js';
 
 	let {
 		ref = $bindable(null),
@@ -19,7 +19,7 @@
 	data-slot="context-menu-sub-trigger"
 	data-inset={inset}
 	class={cn(
-		"gap-2 px-2 py-1.5 text-sm data-[inset]:ps-8 [&_svg:not([class*='size-'])]:size-4 flex cursor-default items-center rounded-sm outline-hidden select-none data-highlighted:bg-accent data-highlighted:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[state=open]:bg-accent data-[state=open]:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='text-'])]:text-muted-foreground",
+		"gap-2 px-2 py-1.5 text-sm data-[inset]:ps-8 [&_svg:not([class*='size-'])]:size-4 flex cursor-default items-center rounded-inner outline-hidden select-none data-highlighted:bg-hover data-highlighted:text-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[state=open]:bg-selected data-[state=open]:text-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='text-'])]:text-muted-foreground",
 		className
 	)}
 	{...restProps}

package/src/lib/components/primitives/dialog/dialog-content.svelte

@@ -3,8 +3,8 @@
 	import XIcon from '@lucide/svelte/icons/x';
 	import type { Snippet } from 'svelte';
 	import * as Dialog from './index.js';
-	import { cn, type WithoutChildrenOrChild } from '$lib/utils.js';
-	import { getLocaleContext } from '$lib/i18n/localeContext.svelte';
+	import { cn, type WithoutChildrenOrChild } from '#lib/utils.js';
+	import { getLocaleContext } from '#lib/i18n/localeContext.svelte.js';
 
 	let {
 		ref = $bindable(null),
@@ -32,7 +32,7 @@
 		data-slot="dialog-content"
 		class={cn(
 			variant === 'flush' ? 'gap-0' : 'gap-4 p-6',
-			'shadow-lg data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 sm:max-w-lg fixed top-1/2 left-1/2 z-50 grid max-h-dialog w-screen-inset -translate-x-1/2 -translate-y-1/2 overflow-y-auto rounded-lg border bg-background duration-200',
+			'data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 sm:max-w-lg fixed top-1/2 left-1/2 z-50 grid max-h-dialog w-screen-inset -translate-x-1/2 -translate-y-1/2 overflow-y-auto rounded-xl border bg-raised shadow-popover duration-200',
 			className
 		)}
 		{...restProps}
@@ -41,7 +41,7 @@
 		{#if showCloseButton}
 			<!-- 24px around the 16px icon, and 44px of hit area on touch, without moving the icon. -->
 			<DialogPrimitive.Close
-				class="end-3 top-3 p-1 rounded-xs [&_svg:not([class*='size-'])]:size-4 pointer-coarse:after:-inset-2.5 absolute opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:ring-2 focus:ring-ring focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none pointer-coarse:after:absolute [&_svg]:pointer-events-none [&_svg]:shrink-0"
+				class="end-3 top-3 p-1 [&_svg:not([class*='size-'])]:size-4 pointer-coarse:after:-inset-2.5 absolute rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:ring-2 focus:ring-ring focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none pointer-coarse:after:absolute [&_svg]:pointer-events-none [&_svg]:shrink-0"
 			>
 				<XIcon />
 				<span class="sr-only">{locale.messages.close}</span>

package/src/lib/components/primitives/dialog/dialog-description.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { Dialog as DialogPrimitive } from 'bits-ui';
-	import { cn } from '$lib/utils.js';
+	import { cn } from '#lib/utils.js';
 
 	let {
 		ref = $bindable(null),

package/src/lib/components/primitives/dialog/dialog-footer.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { cn, type WithElementRef } from '$lib/utils.js';
+	import { cn, type WithElementRef } from '#lib/utils.js';
 	import type { HTMLAttributes } from 'svelte/elements';
 
 	let {

package/src/lib/components/primitives/dialog/dialog-header.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import type { HTMLAttributes } from 'svelte/elements';
-	import { cn, type WithElementRef } from '$lib/utils.js';
+	import { cn, type WithElementRef } from '#lib/utils.js';
 
 	let {
 		ref = $bindable(null),

package/src/lib/components/primitives/dialog/dialog-overlay.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { Dialog as DialogPrimitive } from 'bits-ui';
-	import { cn } from '$lib/utils.js';
+	import { cn } from '#lib/utils.js';
 
 	let {
 		ref = $bindable(null),

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

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { Dialog as DialogPrimitive } from 'bits-ui';
-	import { cn } from '$lib/utils.js';
+	import { cn } from '#lib/utils.js';
 
 	let {
 		ref = $bindable(null),

package/src/lib/components/primitives/drawer/Drawer.svelte

@@ -26,7 +26,7 @@
 	onkeydown={handleKey}
 ></div>
 <div
-	class="animate-in slide-in-from-right-4 top-0 right-0 fixed z-50 flex h-full max-w-full border-border bg-background {width} flex-col overflow-y-auto border-l duration-150"
+	class="animate-in slide-in-from-right-4 top-0 right-0 fixed z-50 flex h-full max-w-full border-border bg-raised {width} flex-col overflow-y-auto border-l duration-150"
 >
 	{@render children()}
 </div>

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

@@ -2,7 +2,7 @@
 	import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui';
 	import MinusIcon from '@lucide/svelte/icons/minus';
 	import CheckIcon from '@lucide/svelte/icons/check';
-	import { cn, type WithoutChildrenOrChild } from '$lib/utils.js';
+	import { cn, type WithoutChildrenOrChild } from '#lib/utils.js';
 	import type { Snippet } from 'svelte';
 
 	let {
@@ -12,9 +12,12 @@
 		class: className,
 		children: childrenProp,
 		closeOnSelect = false,
+		switch: asSwitch = false,
 		...restProps
 	}: WithoutChildrenOrChild<DropdownMenuPrimitive.CheckboxItemProps> & {
 		children?: Snippet;
+		/** Shows an on/off switch at the row's end instead of a checkmark. */
+		switch?: boolean;
 	} = $props();
 </script>
 
@@ -25,22 +28,39 @@
 	bind:indeterminate
 	data-slot="dropdown-menu-checkbox-item"
 	class={cn(
-		"gap-1.5 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 rounded-md outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+		asSwitch ? 'pr-2 gap-2.5' : 'pr-8',
+		"gap-1.5 py-1 pointer-coarse:py-2.5 pl-1.5 text-sm data-inset:pl-7 [&_svg:not([class*='size-'])]:size-4 relative flex cursor-default items-center rounded-inner outline-hidden select-none focus:bg-hover focus:text-foreground focus:**:text-foreground data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
 		className
 	)}
 	{...restProps}
 >
 	{#snippet children({ checked, indeterminate })}
-		<span
-			class="right-2 pointer-events-none absolute flex items-center justify-center"
-			data-slot="dropdown-menu-checkbox-item-indicator"
-		>
-			{#if indeterminate}
-				<MinusIcon />
-			{:else if checked}
-				<CheckIcon />
-			{/if}
-		</span>
 		{@render childrenProp?.()}
+		{#if asSwitch}
+			<span
+				class="[[data-slot=dropdown-menu-shortcut]+&]:ml-2 h-4.5 w-8 pointer-events-none relative ml-auto shrink-0 rounded-full transition-colors {checked
+					? 'bg-primary'
+					: 'bg-input'}"
+				data-slot="dropdown-menu-checkbox-item-switch"
+				aria-hidden="true"
+			>
+				<span
+					class="left-0.5 top-0.5 size-3.5 absolute rounded-full bg-background transition-transform dark:bg-foreground {checked
+						? 'translate-x-3.5 dark:bg-primary-foreground'
+						: ''}"
+				></span>
+			</span>
+		{:else}
+			<span
+				class="right-2 pointer-events-none absolute flex items-center justify-center"
+				data-slot="dropdown-menu-checkbox-item-indicator"
+			>
+				{#if indeterminate}
+					<MinusIcon />
+				{:else if checked}
+					<CheckIcon />
+				{/if}
+			</span>
+		{/if}
 	{/snippet}
 </DropdownMenuPrimitive.CheckboxItem>