@selvajs/ui 6.6.0-beta.9 → 7.0.0

package/src/lib/components/preview/inputs/FileInput.svelte

@@ -1,14 +1,19 @@
 <script lang="ts">
-	import { Input } from '$lib/components/primitives/input';
-	import { Button } from '$lib/components/primitives/button';
-	import { Label } from '$lib/components/primitives/label';
-	import { toast } from '$lib/components/primitives/sonner';
+	import { Input } from '#lib/components/primitives/input/index.js';
+	import { Button } from '#lib/components/primitives/button/index.js';
+	import { Label } from '#lib/components/primitives/label/index.js';
+	import { toast } from '#lib/components/primitives/sonner/index.js';
 	import { FileUp, Link, CircleAlert, CircleCheck } from '@lucide/svelte';
-	import { APP_DEFAULTS } from '$lib/constants';
-	import { getLocaleContext } from '$lib/i18n/localeContext.svelte';
-	import { formatMessage } from '$lib/i18n/messages';
-	import { pickFile } from '$lib/utils/host-files';
-	import { acceptsFileEnding, isWebp, shouldConvertWebp, webpToPng } from '$lib/utils/webp-to-png';
+	import { APP_DEFAULTS } from '#lib/constants.js';
+	import { getLocaleContext } from '#lib/i18n/localeContext.svelte.js';
+	import { formatMessage } from '#lib/i18n/messages.js';
+	import { pickFile } from '#lib/utils/host-files.js';
+	import {
+		acceptsFileEnding,
+		isWebp,
+		shouldConvertWebp,
+		webpToPng
+	} from '#lib/utils/webp-to-png.js';
 
 	interface Props {
 		value?: string;
@@ -282,10 +287,10 @@
 					type="button"
 					onclick={() => (activeMode = mode)}
 					aria-pressed={activeMode === mode}
-					class={`px-3 py-1 font-medium flex-1 rounded-sm transition-colors ${
+					class={`px-3 py-1 font-medium flex-1 rounded-sm border transition-colors ${
 						activeMode === mode
-							? 'shadow-xs bg-background text-foreground'
-							: 'text-muted-foreground hover:text-foreground'
+							? 'shadow-xs border-border-strong bg-raised text-foreground'
+							: 'border-transparent text-muted-foreground hover:text-foreground'
 					}`}
 				>
 					{mode === 'upload' ? t.fileModeUpload : t.fileModeUrl}

package/src/lib/components/preview/inputs/GeometryInput.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
-	import { Button } from '$lib/components/primitives/button';
-	import type { GeometryPickResult, PickKind } from '$lib/contexts/hostContext.svelte';
-	import { getLocaleContext } from '$lib/i18n/localeContext.svelte';
-	import type { ViewerMessages } from '$lib/i18n/messages';
+	import { Button } from '#lib/components/primitives/button/index.js';
+	import type { GeometryPickResult, PickKind } from '#lib/contexts/hostContext.svelte.js';
+	import { getLocaleContext } from '#lib/i18n/localeContext.svelte.js';
+	import type { ViewerMessages } from '#lib/i18n/messages.js';
 
 	interface Props {
 		inputId: string;

package/src/lib/components/preview/inputs/NumberInput.svelte

@@ -1,13 +1,13 @@
 <script lang="ts">
 	import type { NumberWidgetConfig, SupportedTypes } from '@selvajs/schemas';
-	import { debounce } from '$lib/utils/debounce';
-	import { Input } from '$lib/components/primitives/input';
-	import { Slider } from '$lib/components/primitives/slider';
-	import * as InputGroup from '$lib/components/primitives/input-group';
-	import { Separator } from '$lib/components/primitives/separator';
-	import * as Field from '$lib/components/primitives/field';
-	import { getLocaleContext } from '$lib/i18n/localeContext.svelte';
-	import { formatMessage } from '$lib/i18n/messages';
+	import { debounce } from '#lib/utils/debounce.js';
+	import { Input } from '#lib/components/primitives/input/index.js';
+	import { Slider } from '#lib/components/primitives/slider/index.js';
+	import * as InputGroup from '#lib/components/primitives/input-group/index.js';
+	import { Separator } from '#lib/components/primitives/separator/index.js';
+	import * as Field from '#lib/components/primitives/field/index.js';
+	import { getLocaleContext } from '#lib/i18n/localeContext.svelte.js';
+	import { formatMessage } from '#lib/i18n/messages.js';
 
 	interface Props {
 		inputId: string;

package/src/lib/components/preview/inputs/OptionGlyph.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
-	import type { GlyphSource } from '$lib/schema/option-display';
-	import { cn } from '$lib/utils.js';
+	import type { GlyphSource } from '#lib/schema/option-display.js';
+	import { cn } from '#lib/utils.js';
 
 	interface Props {
 		glyph: GlyphSource;

package/src/lib/components/preview/inputs/SegmentedInput.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import type { DropdownWidgetConfig, SupportedTypes, UISchema } from '@selvajs/schemas';
-	import * as ToggleGroup from '$lib/components/primitives/toggle-group';
-	import { optionGlyph } from '$lib/schema/option-display';
+	import * as ToggleGroup from '#lib/components/primitives/toggle-group/index.js';
+	import { optionGlyph } from '#lib/schema/option-display.js';
 	import OptionGlyph from './OptionGlyph.svelte';
 
 	interface Props {
@@ -24,6 +24,7 @@
 <ToggleGroup.Root
 	type="single"
 	variant="outline"
+	spacing={0}
 	size={hasIcons ? 'stacked' : 'default'}
 	class="w-full"
 	aria-labelledby={labelId}

package/src/lib/components/preview/inputs/TextInput.svelte

@@ -1,10 +1,10 @@
 <script lang="ts">
 	import type { TextWidgetConfig, SupportedTypes } from '@selvajs/schemas';
-	import { debounce } from '$lib/utils/debounce';
-	import { Input } from '$lib/components/primitives/input';
-	import * as Field from '$lib/components/primitives/field';
-	import { getLocaleContext } from '$lib/i18n/localeContext.svelte';
-	import { formatMessage } from '$lib/i18n/messages';
+	import { debounce } from '#lib/utils/debounce.js';
+	import { Input } from '#lib/components/primitives/input/index.js';
+	import * as Field from '#lib/components/primitives/field/index.js';
+	import { getLocaleContext } from '#lib/i18n/localeContext.svelte.js';
+	import { formatMessage } from '#lib/i18n/messages.js';
 
 	interface Props {
 		inputId: string;

package/src/lib/components/preview/inputs/TileInput.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import type { DropdownWidgetConfig, SupportedTypes, UISchema } from '@selvajs/schemas';
-	import { optionGlyph } from '$lib/schema/option-display';
+	import { optionGlyph } from '#lib/schema/option-display.js';
 	import OptionGlyph from './OptionGlyph.svelte';
 
 	interface Props {
@@ -45,17 +45,20 @@
 			bind:this={tiles[index]}
 			type="button"
 			role="radio"
+			title={option.name}
 			aria-checked={selected}
 			tabindex={index === focusIndex ? 0 : -1}
 			{disabled}
 			onclick={() => onChange(option.value)}
 			onkeydown={(e) => onKeydown(e, index)}
 			class="gap-1.5 p-1.5 min-w-0 flex flex-col rounded-lg border text-left transition-colors outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 {selected
-				? 'border-primary bg-primary/5 ring-1 ring-primary'
-				: 'border-input hover:bg-accent/40'}"
+				? 'border-primary bg-primary/10 ring-1 ring-primary'
+				: 'border-input hover:bg-hover'}"
 		>
 			<span
-				class="flex aspect-square w-full items-center justify-center overflow-hidden rounded-md bg-muted text-muted-foreground"
+				class="flex aspect-square w-full items-center justify-center overflow-hidden rounded-md bg-muted {selected
+					? 'text-foreground'
+					: 'text-muted-foreground'}"
 			>
 				{#if glyph?.kind === 'image'}
 					<OptionGlyph {glyph} class="size-full" />
@@ -65,7 +68,7 @@
 					<span class="text-lg font-medium" aria-hidden="true">{option.name.charAt(0)}</span>
 				{/if}
 			</span>
-			<span class="px-0.5 text-xs leading-tight truncate" class:font-medium={selected}>
+			<span class="px-0.5 text-xs leading-tight line-clamp-2" class:font-medium={selected}>
 				{option.name}
 			</span>
 		</button>

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

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { untrack, type Snippet } from 'svelte';
 	import { Button } from './button';
-	import { Zap, Check, Loader, Play } from '@lucide/svelte';
+	import { Zap, LoaderCircle, Play } from '@lucide/svelte';
 	import { getLocaleContext } from '../../i18n/localeContext.svelte';
 
 	const locale = getLocaleContext();
@@ -38,7 +38,7 @@
 	});
 </script>
 
-<div class="bottom-0 mt-3 pb-3 pt-2 backdrop-blur-sm px-2 sticky border-t border-border/50">
+<div class="bottom-0 mt-3 pb-3 pt-2 backdrop-blur-sm px-2 sticky border-t border-border">
 	<span class="sr-only" role="status" aria-live="polite">{announcement}</span>
 	<div class="gap-2 flex">
 		<Button
@@ -52,8 +52,14 @@
 			{!hasPendingChanges && !isSolving ? 'text-muted-foreground' : ''}"
 		>
 			{#if isSolving}
-				<Loader class="h-4 w-4 animate-spin" />
+				<LoaderCircle class="h-4 w-4 animate-spin" />
 				{t.solvingEllipsis}
+				<kbd
+					class="px-1 rounded-sm border border-current/30 font-sans text-2xs opacity-70"
+					title={t.solveMessagesEscHint}
+				>
+					Esc
+				</kbd>
 			{:else if hasNeverSolved}
 				<Play class="h-4 w-4" />
 				{t.pressToCalculate}
@@ -61,7 +67,7 @@
 				<Zap class="h-4 w-4" />
 				{t.calculate}
 			{:else}
-				<Check class="h-4 w-4" />
+				<span class="size-1.5 shrink-0 rounded-full bg-success" aria-hidden="true"></span>
 				{t.upToDate}
 			{/if}
 		</Button>

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

@@ -8,7 +8,7 @@
 		variants: {
 			tone: {
 				info: 'border-info/40 bg-info/10',
-				tip: 'border-border bg-muted/40',
+				tip: 'border-border bg-muted',
 				success: 'border-success/40 bg-success/10',
 				warning: 'border-warning/40 bg-warning/10',
 				danger: 'border-destructive/40 bg-destructive/10'
@@ -31,14 +31,14 @@
 <script lang="ts">
 	import type { HTMLAttributes } from 'svelte/elements';
 	import type { Snippet } from 'svelte';
-	import { cn } from '$lib/utils.js';
+	import { cn } from '#lib/utils.js';
 
 	interface Props extends HTMLAttributes<HTMLDivElement> {
 		tone?: CalloutTone;
 		title?: string;
 		/** Replaces the tone's default icon. `null` drops the icon entirely. */
 		icon?: Component | null;
-		children: Snippet;
+		children?: Snippet;
 	}
 
 	let { tone = 'info', title, icon, class: className, children, ...restProps }: Props = $props();
@@ -55,12 +55,14 @@
 	{#if Icon}
 		<Icon class={cn('mt-0.5 h-4 w-4 shrink-0', accent)} />
 	{/if}
-	<div class="min-w-0 space-y-1">
+	<div class="min-w-0 space-y-1 wrap-anywhere">
 		{#if title}
 			<p class={cn('leading-tight font-medium', accent)}>{title}</p>
 		{/if}
-		<div class="leading-relaxed text-muted-foreground [&_a]:underline [&_strong]:text-foreground">
-			{@render children()}
-		</div>
+		{#if children}
+			<div class="leading-relaxed text-muted-foreground [&_a]:underline [&_strong]:text-foreground">
+				{@render children()}
+			</div>
+		{/if}
 	</div>
 </div>

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

@@ -41,7 +41,7 @@
 	style:--table-cols-sm={mobileTemplate}
 >
 	<div
-		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/40 text-muted-foreground uppercase {hiddenCols}"
+		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>

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

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import type { Component } from 'svelte';
 	import { ChevronDown } from '@lucide/svelte';
-	import { cn } from '$lib/utils.js';
+	import { cn } from '#lib/utils.js';
 	import { buttonVariants } from './button';
 	import * as Popover from './popover';
 	import * as Command from './command';
@@ -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/src/lib/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/src/lib/components/primitives/IssueList.svelte

@@ -14,7 +14,7 @@
 </script>
 
 <script lang="ts">
-	import { cn } from '$lib/utils.js';
+	import { cn } from '#lib/utils.js';
 	import SeverityIcon from './SeverityIcon.svelte';
 
 	interface Props {

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

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { cn } from '$lib/utils.js';
+	import { cn } from '#lib/utils.js';
 	import { SEVERITY_ICON, SEVERITY_TEXT, type Severity } from './severity';
 
 	interface Props {