@selvajs/ui 6.6.0-beta.2 → 6.6.0-beta.20

package/dist/components/primitives/DataTable.svelte

@@ -3,6 +3,8 @@
 		label: string;
 		width?: string;
 		align?: 'left' | 'right';
+		/** Drop the column below 640px, where fixed widths would crush the flexible one. */
+		hideOnMobile?: boolean;
 	}
 </script>
 
@@ -19,20 +21,52 @@
 
 	let { rows, columns, getKey, row, class: className = '' }: Props = $props();
 
-	const gridTemplate = $derived(columns.map((c) => c.width ?? '1fr').join(' '));
+	// `minmax(0, …)` so a long name truncates rather than widening its row past the others.
+	const toTemplate = (cols: DataTableColumn[]) =>
+		cols.map((c) => c.width ?? 'minmax(0, 1fr)').join(' ');
+	const gridTemplate = $derived(toTemplate(columns));
+	const mobileTemplate = $derived(toTemplate(columns.filter((c) => !c.hideOnMobile)));
+	// Cells come from the caller's snippet, so they're hidden by position.
+	const hiddenCols = $derived(
+		columns
+			.map((c, i) => (c.hideOnMobile ? `hide-col-${i + 1}` : ''))
+			.filter(Boolean)
+			.join(' ')
+	);
 </script>
 
-<div class={`divide-y rounded-lg border ${className}`} style:--table-cols={gridTemplate}>
+<div
+	class={`divide-y rounded-lg border ${className}`}
+	style:--table-cols={gridTemplate}
+	style:--table-cols-sm={mobileTemplate}
+>
 	<div
-		class="gap-4 px-4 py-2 text-xs font-medium tracking-wide grid grid-cols-(--table-cols) bg-muted/40 text-muted-foreground uppercase"
+		class="data-table-row gap-4 px-4 py-2 text-xs font-medium tracking-wide sm:grid-cols-(--table-cols) grid grid-cols-(--table-cols-sm) bg-muted text-muted-foreground uppercase {hiddenCols}"
 	>
 		{#each columns as col (col.label)}
 			<span class={col.align === 'right' ? 'text-right' : ''}>{col.label}</span>
 		{/each}
 	</div>
 	{#each rows as item (getKey(item))}
-		<div class="gap-4 px-4 py-3 grid grid-cols-(--table-cols) items-center">
+		<div
+			class="data-table-row gap-4 px-4 py-3 sm:grid-cols-(--table-cols) grid grid-cols-(--table-cols-sm) items-center {hiddenCols}"
+		>
 			{@render row(item)}
 		</div>
 	{/each}
 </div>
+
+<style>
+	@media (max-width: 639px) {
+		:global(.data-table-row.hide-col-1 > :nth-child(1)),
+		:global(.data-table-row.hide-col-2 > :nth-child(2)),
+		:global(.data-table-row.hide-col-3 > :nth-child(3)),
+		:global(.data-table-row.hide-col-4 > :nth-child(4)),
+		:global(.data-table-row.hide-col-5 > :nth-child(5)),
+		:global(.data-table-row.hide-col-6 > :nth-child(6)),
+		:global(.data-table-row.hide-col-7 > :nth-child(7)),
+		:global(.data-table-row.hide-col-8 > :nth-child(8)) {
+			display: none;
+		}
+	}
+</style>

package/dist/components/primitives/DataTable.svelte.d.ts

@@ -2,6 +2,8 @@ export interface DataTableColumn {
     label: string;
     width?: string;
     align?: 'left' | 'right';
+    /** Drop the column below 640px, where fixed widths would crush the flexible one. */
+    hideOnMobile?: boolean;
 }
 import type { Snippet } from 'svelte';
 declare function $$render<T>(): {

package/dist/components/primitives/FilterableDropdown.svelte

@@ -11,6 +11,7 @@
 		label: string;
 		icon?: Component;
 		iconClass?: string;
+		disabled?: boolean;
 	}
 
 	interface Props {
@@ -24,6 +25,10 @@
 		/** Above this many items the list gets a filter box. */
 		searchThreshold?: number;
 		disabled?: boolean;
+		/** Submits the picked id with a plain <form>, like a native select's name. */
+		name?: string;
+		size?: 'default' | 'sm';
+		'aria-label'?: string;
 		class?: string;
 	}
 
@@ -37,6 +42,9 @@
 		searchPlaceholder = 'Filter...',
 		searchThreshold = 4,
 		disabled = false,
+		name,
+		size = 'default',
+		'aria-label': ariaLabel,
 		class: className
 	}: Props = $props();
 
@@ -51,14 +59,17 @@
 	}
 </script>
 
+{#if name}<input type="hidden" {name} value={value ?? ''} />{/if}
+
 <Popover.Root bind:open>
 	<Popover.Trigger
 		{id}
 		{disabled}
 		role="combobox"
 		aria-expanded={open}
+		aria-label={ariaLabel}
 		class={cn(
-			buttonVariants({ variant: 'outline' }),
+			buttonVariants({ variant: 'outline', size }),
 			'font-normal w-full justify-start',
 			className
 		)}
@@ -85,6 +96,7 @@
 						value={item.id}
 						keywords={[item.label]}
 						data-checked={item.id === value}
+						disabled={item.disabled}
 						onSelect={() => pick(item)}
 					>
 						{#if ItemIcon}

package/dist/components/primitives/FilterableDropdown.svelte.d.ts

@@ -4,6 +4,7 @@ export interface FilterableDropdownItem {
     label: string;
     icon?: Component;
     iconClass?: string;
+    disabled?: boolean;
 }
 interface Props {
     items: FilterableDropdownItem[];
@@ -16,6 +17,10 @@ interface Props {
     /** Above this many items the list gets a filter box. */
     searchThreshold?: number;
     disabled?: boolean;
+    /** Submits the picked id with a plain <form>, like a native select's name. */
+    name?: string;
+    size?: 'default' | 'sm';
+    'aria-label'?: string;
     class?: string;
 }
 declare const FilterableDropdown: Component<Props, {}, "">;

package/dist/components/primitives/ImageUploadField.svelte

@@ -60,7 +60,7 @@
 				accept="image/*"
 				{disabled}
 				onchange={onFileSelected}
-				class="h-10 px-3 py-2 text-sm file:text-sm file:font-medium flex flex-1 rounded-md border border-input bg-background file:border-0 file:bg-transparent focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none disabled:opacity-50"
+				class="h-10 px-3 py-2 text-sm file:text-sm file:font-medium flex flex-1 rounded-md border border-input bg-field file:border-0 file:bg-transparent focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none disabled:opacity-50"
 			/>
 			<Button
 				size="sm"

package/dist/components/primitives/SolvingIndicator.svelte

@@ -1,31 +1,261 @@
 <script lang="ts">
+	import { untrack } from 'svelte';
+	import { fade } from 'svelte/transition';
+	import { Check, LoaderCircle } from '@lucide/svelte';
+	import { EMPTY_LIVE_SOLVE, type LiveSolveState } from '@selvajs/solve/client';
+	import { Button } from './button/index.js';
+	import { createLiveProgress } from '../../compute/liveProgress.svelte.js';
 	import { getLocaleContext } from '../../i18n/localeContext.svelte';
 
+	// The solve status in a panel's action row. It grows only as far as the solve needs: a quiet
+	// "up to date" row, a pill once a solve is visible, a card with progress and Abort once it is
+	// slow. It grows upward over the fields, so the footer never changes height.
 	interface Props {
+		/** The raw flag: times the solve, and acknowledges one too short to show. */
+		isSolving: boolean;
+		/** `createSolvingIndicator(...).show`. */
 		show: boolean;
+		/** `createSolvingIndicator(...).slow`. */
+		slow?: boolean;
+		/** Live progress for the card. Without it the card's bar is indeterminate. */
+		live?: LiveSolveState;
+		/** Without it the card has no Abort button; Esc still works where the host handles it. */
+		onabort?: () => void;
+		/**
+		 * The page can't repaint mid-solve (see `createSolvingIndicator`): the pill says Esc aborts
+		 * instead of counting seconds, and never grows into the card.
+		 */
+		freezesDuringSolve?: boolean;
 	}
 
-	let { show }: Props = $props();
+	let {
+		isSolving,
+		show,
+		slow = false,
+		live,
+		onabort,
+		freezesDuringSolve = false
+	}: Props = $props();
 
 	const locale = getLocaleContext();
 	const t = $derived(locale.messages);
+
+	const DONE_VISIBLE_MS = 1400;
+	// A drag fires a solve per step; one acknowledgement per this many ms is enough.
+	const PING_EVERY_MS = 500;
+
+	const progress = createLiveProgress(() => live ?? EMPTY_LIVE_SOLVE);
+	const head = $derived(progress.headline ?? progress.progress[0]);
+	const bar = $derived(
+		head?.fraction === undefined
+			? undefined
+			: (progress.bars[head.source ?? ''] ?? { width: head.fraction, ms: 150 })
+	);
+
+	let startedAt = 0;
+	let elapsed = $state(0);
+	let finished = $state<{ ms: number; aborted: boolean } | null>(null);
+	let ping = $state(0);
+	let lastPingAt = 0;
+	// Not `show` itself at the solve's end: the host's indicator may already have dropped it.
+	let shownThisSolve = false;
+
+	$effect(() => {
+		if (show) shownThisSolve = true;
+	});
+
+	$effect(() => {
+		const solving = isSolving;
+		untrack(() => {
+			if (solving) {
+				startedAt = performance.now();
+				shownThisSolve = show;
+				elapsed = 0;
+				finished = null;
+				return;
+			}
+			if (!startedAt) return;
+			const ms = performance.now() - startedAt;
+			startedAt = 0;
+			if (shownThisSolve) {
+				finished = { ms, aborted: live?.ended?.kind === 'aborted' };
+			} else if (performance.now() - lastPingAt > PING_EVERY_MS) {
+				lastPingAt = performance.now();
+				ping++;
+			}
+		});
+	});
+
+	$effect(() => {
+		if (!finished) return;
+		const timer = setTimeout(() => (finished = null), DONE_VISIBLE_MS);
+		return () => clearTimeout(timer);
+	});
+
+	$effect(() => {
+		if (!isSolving || !show || freezesDuringSolve) return;
+		const tick = () => (elapsed = performance.now() - startedAt);
+		tick();
+		const id = setInterval(tick, 100);
+		return () => clearInterval(id);
+	});
+
+	// Done wins over a held `show`: the indicator outlives the solve by up to its minimum time,
+	// and saying "Solving" over a result that has already landed would be wrong.
+	const mode = $derived<'idle' | 'work' | 'card' | 'done'>(
+		finished ? 'done' : show ? (slow && !freezesDuringSolve ? 'card' : 'work') : 'idle'
+	);
+
+	const seconds = $derived(
+		new Intl.NumberFormat(locale.locale, { minimumFractionDigits: 1, maximumFractionDigits: 1 })
+	);
+	const fmt = (ms: number) => `${seconds.format(ms / 1000)} s`;
+
+	const announcement = $derived(
+		mode === 'work' || mode === 'card'
+			? t.solvingEllipsis
+			: mode === 'done'
+				? finished?.aborted
+					? t.solveStopped
+					: t.solveDone
+				: ''
+	);
 </script>
 
-{#if show}
+<div class="h-9 min-w-0 relative flex-1">
+	<!-- The live region stays mounted: a screen reader only announces text that changes inside a
+	     region it already knows about, so one created together with its text says nothing. -->
+	<div role="status" aria-live="polite" aria-atomic="true" class="sr-only">{announcement}</div>
+
 	<div
-		class="bottom-6 left-6 gap-3 px-5 py-3 shadow-xl animate-in fade-in slide-in-from-left fixed z-50 flex items-center rounded-lg border border-primary/20 bg-primary text-primary-foreground duration-200"
+		class="inset-x-0 bottom-0 backdrop-blur-md ease-out absolute z-10 overflow-hidden border border-border-strong transition-all duration-300 motion-reduce:transition-none {mode ===
+		'card'
+			? 'h-24 shadow-md rounded-lg bg-card/75'
+			: mode === 'idle'
+				? 'h-9 shadow-sm rounded-md bg-card/90'
+				: 'h-9 shadow-md rounded-md bg-card/75'}"
+		data-testid="solve-status"
+		data-state={mode}
 	>
-		<div class="h-5 w-5 relative flex shrink-0 items-center justify-center">
-			<div
-				class="animate-ping absolute h-full w-full rounded-full bg-primary-foreground opacity-30"
-			></div>
+		{#if mode === 'card'}
 			<div
-				class="h-3 w-3 animate-spin rounded-full border-2 border-primary-foreground border-t-transparent"
-			></div>
-		</div>
-		<div class="leading-tight flex flex-col">
-			<span class="text-sm font-semibold">{t.solving}</span>
-			<span class="text-xs opacity-70">{t.solvingSubtitle}</span>
-		</div>
+				class="px-3 gap-2 flex h-full flex-col justify-center"
+				in:fade={{ duration: 150, delay: 80 }}
+			>
+				<div class="gap-2 min-w-0 flex items-center">
+					<LoaderCircle
+						class="size-4 animate-spin shrink-0 text-muted-foreground"
+						aria-hidden="true"
+					/>
+					<span class="text-sm font-medium min-w-0 flex-1 truncate">{head?.label ?? t.solving}</span
+					>
+					{#if head?.done !== undefined && head?.total !== undefined}
+						<span class="text-xs shrink-0 text-muted-foreground tabular-nums">
+							{head.done} / {head.total}
+						</span>
+					{/if}
+				</div>
+				<div
+					class="h-1 overflow-hidden rounded-full bg-muted"
+					role="progressbar"
+					aria-label={head?.label ?? t.solving}
+					aria-valuemin={0}
+					aria-valuemax={100}
+					aria-valuenow={bar ? Math.round(bar.width * 100) : undefined}
+				>
+					{#if bar}
+						<div
+							class="h-full w-(--bar-width) rounded-full bg-primary transition-all duration-(--bar-ms) ease-linear"
+							style:--bar-width="{bar.width * 100}%"
+							style:--bar-ms="{bar.ms}ms"
+						></div>
+					{:else}
+						<div class="animate-pulse h-full w-1/3 rounded-full bg-primary/60"></div>
+					{/if}
+				</div>
+				<div class="gap-2 flex items-center">
+					<span class="text-xs text-muted-foreground tabular-nums">{fmt(elapsed)}</span>
+					{#if onabort}
+						<Button
+							variant="outline"
+							size="xs"
+							class="ml-auto shrink-0"
+							onclick={onabort}
+							aria-keyshortcuts="Escape"
+							title={t.solveMessagesEscHint}
+						>
+							{t.solveMessagesAbort}
+							<kbd
+								class="px-1 rounded-sm border border-border font-sans text-2xs text-muted-foreground"
+							>
+								Esc
+							</kbd>
+						</Button>
+					{/if}
+				</div>
+			</div>
+		{:else if mode === 'work'}
+			<div class="px-3 gap-2 flex h-full items-center" in:fade={{ duration: 150, delay: 80 }}>
+				<LoaderCircle
+					class="size-4 animate-spin shrink-0 text-muted-foreground"
+					aria-hidden="true"
+				/>
+				{#if freezesDuringSolve}
+					<span class="text-sm font-medium shrink-0">{t.solvingEllipsis}</span>
+					<span class="text-xs min-w-0 truncate text-muted-foreground" data-testid="solve-esc-hint">
+						{t.solveMessagesEscHint}
+					</span>
+				{:else}
+					<span class="text-sm font-medium shrink-0">{t.solving}</span>
+					<span class="text-xs text-muted-foreground tabular-nums">{fmt(elapsed)}</span>
+				{/if}
+			</div>
+		{:else if mode === 'done' && finished}
+			<div class="px-3 gap-2 flex h-full items-center" in:fade={{ duration: 150, delay: 80 }}>
+				{#if finished.aborted}
+					<span class="text-sm font-medium min-w-0 truncate">{t.solveStopped}</span>
+				{:else}
+					<Check class="size-4 shrink-0 text-success" aria-hidden="true" />
+					<span class="text-sm font-medium shrink-0">{t.solveDone}</span>
+					<span class="text-xs text-muted-foreground tabular-nums">{fmt(finished.ms)}</span>
+				{/if}
+			</div>
+		{:else}
+			<div class="px-3 gap-2 flex h-full items-center" in:fade={{ duration: 150 }}>
+				<span class="size-1.5 relative shrink-0 rounded-full bg-success">
+					{#key ping}
+						{#if ping > 0}
+							<span class="solve-ping inset-0 absolute rounded-full border-2 border-success"></span>
+						{/if}
+					{/key}
+				</span>
+				<span class="text-sm min-w-0 truncate text-muted-foreground">{t.upToDate}</span>
+			</div>
+		{/if}
 	</div>
-{/if}
+</div>
+
+<style>
+	/* One ring that grows and fades: the result landed faster than an indicator could show. */
+	.solve-ping {
+		animation: solve-ping 0.6s ease-out forwards;
+	}
+
+	@keyframes solve-ping {
+		from {
+			transform: scale(1);
+			opacity: 0.9;
+		}
+		to {
+			transform: scale(3.2);
+			opacity: 0;
+		}
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		.solve-ping {
+			animation: none;
+			opacity: 0;
+		}
+	}
+</style>

package/dist/components/primitives/SolvingIndicator.svelte.d.ts

@@ -1,5 +1,20 @@
+import { type LiveSolveState } from '@selvajs/solve/client';
 interface Props {
+    /** The raw flag: times the solve, and acknowledges one too short to show. */
+    isSolving: boolean;
+    /** `createSolvingIndicator(...).show`. */
     show: boolean;
+    /** `createSolvingIndicator(...).slow`. */
+    slow?: boolean;
+    /** Live progress for the card. Without it the card's bar is indeterminate. */
+    live?: LiveSolveState;
+    /** Without it the card has no Abort button; Esc still works where the host handles it. */
+    onabort?: () => void;
+    /**
+     * The page can't repaint mid-solve (see `createSolvingIndicator`): the pill says Esc aborts
+     * instead of counting seconds, and never grows into the card.
+     */
+    freezesDuringSolve?: boolean;
 }
 declare const SolvingIndicator: import("svelte").Component<Props, {}, "">;
 type SolvingIndicator = ReturnType<typeof SolvingIndicator>;

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

@@ -19,7 +19,7 @@
 		bind:ref
 		data-slot="alert-dialog-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 gap-4 p-6 shadow-lg sm:max-w-lg fixed start-1/2 top-1/2 z-50 grid w-full max-w-screen-inset -translate-x-1/2 -translate-y-1/2 rounded-lg border bg-background duration-200',
+			'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 gap-4 p-6 sm:max-w-lg fixed start-1/2 top-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}

package/dist/components/primitives/badge/badge.svelte

@@ -2,15 +2,15 @@
 	import { type VariantProps, tv } from 'tailwind-variants';
 
 	export const badgeVariants = tv({
-		base: 'focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-full border px-2 py-0.5 text-xs font-medium whitespace-nowrap transition focus-visible:ring-3 [&>svg]:pointer-events-none [&>svg]:size-3',
+		base: 'focus-visible:border-ring focus-visible:ring-ring aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-full border px-2 py-0.5 text-xs font-medium whitespace-nowrap transition focus-visible:ring-3 [&>svg]:pointer-events-none [&>svg]:size-3',
 		variants: {
 			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 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/70 border-transparent text-destructive-foreground',
-				outline: 'text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground'
+					'bg-destructive [a&]:hover:bg-destructive/90 dark:bg-destructive/70 border-transparent text-destructive-foreground',
+				outline: 'text-foreground [a&]:hover:bg-hover [a&]:hover:text-foreground'
 			}
 		},
 		defaultVariants: {

package/dist/components/primitives/badge/badge.svelte.d.ts

@@ -2,23 +2,23 @@ import { type VariantProps } from 'tailwind-variants';
 export declare const badgeVariants: import("tailwind-variants").TVReturnType<{
     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";
-        destructive: "bg-destructive [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/70 border-transparent text-destructive-foreground";
-        outline: "text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground";
+        secondary: "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-hover [a&]:hover:text-foreground";
     };
-}, undefined, "focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-full border px-2 py-0.5 text-xs font-medium whitespace-nowrap transition focus-visible:ring-3 [&>svg]:pointer-events-none [&>svg]:size-3", {
+}, undefined, "focus-visible:border-ring focus-visible:ring-ring aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-full border px-2 py-0.5 text-xs font-medium whitespace-nowrap transition focus-visible:ring-3 [&>svg]:pointer-events-none [&>svg]:size-3", {
     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";
-        destructive: "bg-destructive [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/70 border-transparent text-destructive-foreground";
-        outline: "text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground";
+        secondary: "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-hover [a&]:hover:text-foreground";
     };
 }, undefined, import("tailwind-variants").TVReturnTypeLike<{
     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";
-        destructive: "bg-destructive [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/70 border-transparent text-destructive-foreground";
-        outline: "text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground";
+        secondary: "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-hover [a&]:hover:text-foreground";
     };
 }, undefined>>;
 export type BadgeVariant = VariantProps<typeof badgeVariants>['variant'];

package/dist/components/primitives/button/button.svelte

@@ -1,21 +1,23 @@
 <script lang="ts" module>
-	import { cn, type WithElementRef } from '../../../utils';
+	import { cn, type WithElementRef } from '../../../utils.js';
 	import type { HTMLAnchorAttributes, HTMLButtonAttributes } from 'svelte/elements';
 	import { type VariantProps, tv } from 'tailwind-variants';
 
 	export const buttonVariants = tv({
-		base: "focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive inline-flex shrink-0 items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium outline-none transition-all focus-visible:ring-3 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+		base: "focus-visible:border-ring focus-visible:ring-ring aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive inline-flex shrink-0 items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium outline-none transition-all focus-visible:ring-3 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
 		variants: {
 			variant: {
 				default: 'bg-primary text-primary-foreground shadow-xs hover:bg-primary/90',
-				destructive:
-					'bg-destructive shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 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',
-				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-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:
+					'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/dist/components/primitives/button/button.svelte.d.ts

@@ -1,14 +1,15 @@
-import { type WithElementRef } from '../../../utils';
+import { type WithElementRef } from '../../../utils.js';
 import type { HTMLAnchorAttributes, HTMLButtonAttributes } from 'svelte/elements';
 import { type VariantProps } from 'tailwind-variants';
 export declare const buttonVariants: import("tailwind-variants").TVReturnType<{
     variant: {
         default: "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90";
-        destructive: "bg-destructive shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60 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";
-        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";
-        dashed: "border border-dashed border-input bg-background text-muted-foreground hover:bg-muted hover:text-foreground";
+        destructive: "bg-destructive shadow-xs hover:bg-destructive/90 text-destructive-foreground";
+        outline: "border border-border-strong bg-transparent shadow-xs hover:bg-hover hover:text-foreground";
+        overlay: "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-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: {
@@ -20,14 +21,15 @@ export declare const buttonVariants: import("tailwind-variants").TVReturnType<{
         'icon-sm': "size-8";
         'icon-lg': "size-10";
     };
-}, undefined, "focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive inline-flex shrink-0 items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium outline-none transition-all focus-visible:ring-3 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0", {
+}, undefined, "focus-visible:border-ring focus-visible:ring-ring aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive inline-flex shrink-0 items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium outline-none transition-all focus-visible:ring-3 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0", {
     variant: {
         default: "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90";
-        destructive: "bg-destructive shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60 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";
-        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";
-        dashed: "border border-dashed border-input bg-background text-muted-foreground hover:bg-muted hover:text-foreground";
+        destructive: "bg-destructive shadow-xs hover:bg-destructive/90 text-destructive-foreground";
+        outline: "border border-border-strong bg-transparent shadow-xs hover:bg-hover hover:text-foreground";
+        overlay: "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-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: {
@@ -42,11 +44,12 @@ export declare const buttonVariants: import("tailwind-variants").TVReturnType<{
 }, undefined, import("tailwind-variants").TVReturnTypeLike<{
     variant: {
         default: "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90";
-        destructive: "bg-destructive shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60 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";
-        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";
-        dashed: "border border-dashed border-input bg-background text-muted-foreground hover:bg-muted hover:text-foreground";
+        destructive: "bg-destructive shadow-xs hover:bg-destructive/90 text-destructive-foreground";
+        outline: "border border-border-strong bg-transparent shadow-xs hover:bg-hover hover:text-foreground";
+        overlay: "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-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/dist/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',

package/dist/components/primitives/card/card.svelte.d.ts

@@ -5,7 +5,7 @@ export declare const cardVariants: import("tailwind-variants").TVReturnType<{
         /** No padding or gap: for a card whose children draw their own edges, like a tab panel. */
         flush: "gap-0 overflow-hidden";
     };
-}, undefined, "shadow-sm flex flex-col rounded-xl border bg-card text-card-foreground", {
+}, undefined, "shadow-raised flex flex-col rounded-xl border bg-card text-card-foreground", {
     variant: {
         default: "gap-6 py-6";
         /** No padding or gap: for a card whose children draw their own edges, like a tab panel. */