@selvajs/ui 6.6.0-beta.4 → 6.6.0-beta.6

package/dist/components/primitives/SolvingIndicator.svelte

@@ -11,21 +11,25 @@
 	const t = $derived(locale.messages);
 </script>
 
-{#if show}
-	<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"
-	>
-		<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>
-			<div
-				class="h-3 w-3 animate-spin rounded-full border-2 border-primary-foreground border-t-transparent"
-			></div>
+<!-- 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">
+	{#if show}
+		<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"
+		>
+			<div class="h-5 w-5 relative flex shrink-0 items-center justify-center" aria-hidden="true">
+				<div
+					class="animate-ping absolute h-full w-full rounded-full bg-primary-foreground opacity-30"
+				></div>
+				<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>
 		</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>
-	</div>
-{/if}
+	{/if}
+</div>

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

@@ -2,14 +2,14 @@
 	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',
 				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',
+					'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'
 			}
 		},

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

@@ -3,21 +3,21 @@ 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";
+        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";
     };
-}, 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";
+        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";
     };
 }, 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";
+        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";
     };
 }, undefined>>;

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

@@ -4,12 +4,12 @@
 	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',
+					'bg-destructive shadow-xs hover:bg-destructive/90 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',

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

@@ -4,7 +4,7 @@ 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";
+        destructive: "bg-destructive shadow-xs hover:bg-destructive/90 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";
@@ -20,10 +20,10 @@ 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";
+        destructive: "bg-destructive shadow-xs hover:bg-destructive/90 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";
@@ -42,7 +42,7 @@ 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";
+        destructive: "bg-destructive shadow-xs hover:bg-destructive/90 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";

package/dist/components/primitives/checkbox/checkbox.svelte

@@ -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/50 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 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',
 		className
 	)}
 	bind:checked

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

@@ -4,6 +4,7 @@
 	import type { Snippet } from 'svelte';
 	import * as Dialog from './index.js';
 	import { cn, type WithoutChildrenOrChild } from '../../../utils.js';
+	import { getLocaleContext } from '../../../i18n/localeContext.svelte';
 
 	let {
 		ref = $bindable(null),
@@ -20,6 +21,8 @@
 		/** `flush` drops padding and gap, for content that draws its own sections edge to edge. */
 		variant?: 'default' | 'flush';
 	} = $props();
+
+	const locale = getLocaleContext();
 </script>
 
 <Dialog.Portal {...portalProps}>
@@ -36,11 +39,12 @@
 	>
 		{@render children?.()}
 		{#if showCloseButton}
+			<!-- 24px around the 16px icon, and 44px of hit area on touch, without moving the icon. -->
 			<DialogPrimitive.Close
-				class="end-4 top-4 rounded-xs [&_svg:not([class*='size-'])]:size-4 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 [&_svg]:pointer-events-none [&_svg]:shrink-0"
+				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"
 			>
 				<XIcon />
-				<span class="sr-only">Close</span>
+				<span class="sr-only">{locale.messages.close}</span>
 			</DialogPrimitive.Close>
 		{/if}
 	</DialogPrimitive.Content>

package/dist/components/primitives/input/input.svelte

@@ -26,7 +26,7 @@
 		data-slot={dataSlot}
 		class={cn(
 			'h-9 min-w-0 px-3 pt-1.5 text-sm font-medium shadow-xs flex w-full rounded-md border border-input bg-transparent ring-offset-background transition outline-none selection:bg-primary selection:text-primary-foreground placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50 dark:bg-input/30',
-			'focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50',
+			'focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring',
 			'aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40',
 			className
 		)}
@@ -41,7 +41,7 @@
 		data-slot={dataSlot}
 		class={cn(
 			'h-9 min-w-0 px-3 py-1 text-base shadow-xs md:text-sm flex w-full rounded-md border border-input bg-background ring-offset-background transition outline-none selection:bg-primary selection:text-primary-foreground placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50 dark:bg-input/30',
-			'focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50',
+			'focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring',
 			'aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40',
 			className
 		)}

package/dist/components/primitives/input-group/input-group.svelte

@@ -15,7 +15,7 @@
 	data-slot="input-group"
 	role="group"
 	class={cn(
-		'group/input-group h-9 has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-end]]:[&>input]:pr-1.5 has-[>[data-align=inline-start]]:[&>input]:pl-1.5 min-w-0 shadow-xs relative flex w-full items-center rounded-md border border-input bg-background transition-colors outline-none in-data-[slot=combobox-content]:focus-within:border-inherit in-data-[slot=combobox-content]:focus-within:ring-0 has-disabled:bg-input/50 has-disabled:opacity-50 has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-3 has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot][aria-invalid=true]]:border-destructive has-[[data-slot][aria-invalid=true]]:ring-3 has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>textarea]:h-auto dark:bg-input/30 dark:has-disabled:bg-input/80 dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40',
+		'group/input-group h-9 has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-end]]:[&>input]:pr-1.5 has-[>[data-align=inline-start]]:[&>input]:pl-1.5 min-w-0 shadow-xs relative flex w-full items-center rounded-md border border-input bg-background transition-colors outline-none in-data-[slot=combobox-content]:focus-within:border-inherit in-data-[slot=combobox-content]:focus-within:ring-0 has-disabled:bg-input/50 has-disabled:opacity-50 has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-3 has-[[data-slot=input-group-control]:focus-visible]:ring-ring has-[[data-slot][aria-invalid=true]]:border-destructive has-[[data-slot][aria-invalid=true]]:ring-3 has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>textarea]:h-auto dark:bg-input/30 dark:has-disabled:bg-input/80 dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40',
 		className
 	)}
 	{...props}

package/dist/components/primitives/mode-toggle/mode-toggle.svelte

@@ -3,10 +3,13 @@
 	import Moon from '@lucide/svelte/icons/moon';
 	import { toggleMode } from 'mode-watcher';
 	import { Button } from '../button';
+	import { getLocaleContext } from '../../../i18n/localeContext.svelte';
+
+	const locale = getLocaleContext();
 </script>
 
 <Button onclick={toggleMode} variant="outline" size="icon">
 	<Sun class="size-5 scale-100 rotate-0 transition-all dark:scale-0 dark:-rotate-90" />
 	<Moon class="size-5 absolute scale-0 rotate-90 transition-all dark:scale-100 dark:rotate-0" />
-	<span class="sr-only">Toggle theme</span>
+	<span class="sr-only">{locale.messages.toggleTheme}</span>
 </Button>

package/dist/components/primitives/scroll-area/scroll-area.svelte

@@ -29,7 +29,7 @@
 	<ScrollAreaPrimitive.Viewport
 		bind:ref={viewportRef}
 		data-slot="scroll-area-viewport"
-		class="size-full rounded-inherit ring-ring/10 outline-ring/50 transition focus-visible:ring-4 focus-visible:outline-1 dark:ring-ring/20 dark:outline-ring/40"
+		class="size-full rounded-inherit ring-ring/10 outline-ring transition focus-visible:ring-4 focus-visible:outline-1 dark:ring-ring/20"
 	>
 		{@render children?.()}
 	</ScrollAreaPrimitive.Viewport>

package/dist/components/primitives/search/search.svelte

@@ -46,7 +46,7 @@
 		data-slot="input"
 		class={cn(
 			'h-9 min-w-0 px-3 py-1 text-base shadow-xs md:text-sm flex w-full rounded-md border border-input bg-background ring-offset-background transition outline-none selection:bg-primary selection:text-primary-foreground placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50 dark:bg-input/30',
-			'focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50',
+			'focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring',
 			'aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40',
 			'pl-9 pr-12',
 			className

package/dist/components/primitives/select/select-trigger.svelte

@@ -19,7 +19,7 @@
 	data-slot="select-trigger"
 	data-size={size}
 	class={cn(
-		"gap-2 px-3 py-2 text-sm shadow-xs data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:gap-2 [&_svg:not([class*='size-'])]:size-4 flex w-fit items-center justify-between rounded-md border border-input bg-transparent whitespace-nowrap transition outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-[placeholder]:text-muted-foreground *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center dark:bg-input/30 dark:hover:bg-input/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='text-'])]:text-muted-foreground",
+		"gap-2 px-3 py-2 text-sm shadow-xs data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:gap-2 [&_svg:not([class*='size-'])]:size-4 flex w-fit items-center justify-between rounded-md border border-input bg-transparent whitespace-nowrap transition outline-none select-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-[placeholder]:text-muted-foreground *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center dark:bg-input/30 dark:hover:bg-input/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='text-'])]:text-muted-foreground",
 		className
 	)}
 	{...restProps}

package/dist/components/primitives/slider/slider.svelte

@@ -7,8 +7,12 @@
 		value = $bindable(),
 		orientation = 'horizontal',
 		class: className,
+		thumbLabelledby,
 		...restProps
-	}: WithoutChildrenOrChild<SliderPrimitive.RootProps> = $props();
+	}: WithoutChildrenOrChild<SliderPrimitive.RootProps> & {
+		/** Id of the element naming the thumbs, which carry the slider role. */
+		thumbLabelledby?: string;
+	} = $props();
 </script>
 
 <!--
@@ -45,7 +49,8 @@ get along, so we shut typescript up by casting `value` to `never`.
 			<SliderPrimitive.Thumb
 				data-slot="slider-thumb"
 				index={thumb}
-				class="size-4 shadow-sm block shrink-0 rounded-full border border-primary bg-background ring-ring/50 transition hover:ring-4 focus-visible:ring-4 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50"
+				aria-labelledby={thumbLabelledby}
+				class="size-4 shadow-sm block shrink-0 rounded-full border border-primary bg-background ring-ring/50 transition hover:ring-4 focus-visible:ring-4 focus-visible:ring-ring focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50"
 			/>
 		{/each}
 	{/snippet}

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

@@ -1,5 +1,9 @@
 import { Slider as SliderPrimitive } from 'bits-ui';
 import { type WithoutChildrenOrChild } from '../../../utils.js';
-declare const Slider: import("svelte").Component<WithoutChildrenOrChild<SliderPrimitive.RootProps>, {}, "ref" | "value">;
+type $$ComponentProps = WithoutChildrenOrChild<SliderPrimitive.RootProps> & {
+    /** Id of the element naming the thumbs, which carry the slider role. */
+    thumbLabelledby?: string;
+};
+declare const Slider: import("svelte").Component<$$ComponentProps, {}, "ref" | "value">;
 type Slider = ReturnType<typeof Slider>;
 export default Slider;

package/dist/components/primitives/switch/switch.svelte

@@ -15,7 +15,7 @@
 	bind:checked
 	data-slot="switch"
 	class={cn(
-		'peer w-8 shadow-xs h-4.5 inline-flex shrink-0 items-center rounded-full border border-transparent transition-all outline-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input dark:data-[state=unchecked]:bg-input/80',
+		'peer w-8 shadow-xs h-4.5 inline-flex shrink-0 items-center rounded-full border border-transparent transition-all outline-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input dark:data-[state=unchecked]:bg-input/80',
 		className
 	)}
 	{...restProps}

package/dist/components/primitives/tabs/tabs-trigger.svelte

@@ -2,7 +2,7 @@
 	import { type VariantProps, tv } from 'tailwind-variants';
 
 	export const tabsTriggerVariants = tv({
-		base: "gap-1.5 text-sm font-medium [&_svg:not([class*='size-'])]:size-4 inline-flex items-center justify-center whitespace-nowrap focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:outline-1 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+		base: "gap-1.5 text-sm font-medium [&_svg:not([class*='size-'])]:size-4 inline-flex items-center justify-center whitespace-nowrap focus-visible:ring-3 focus-visible:ring-ring focus-visible:outline-1 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
 		variants: {
 			variant: {
 				default:

package/dist/components/primitives/tabs/tabs-trigger.svelte.d.ts

@@ -4,7 +4,7 @@ export declare const tabsTriggerVariants: import("tailwind-variants").TVReturnTy
         default: "px-2 py-1 data-[state=active]:shadow-sm h-full flex-1 rounded-md border border-transparent text-foreground transition focus-visible:border-ring data-[state=active]:bg-background dark:text-muted-foreground dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 dark:data-[state=active]:text-foreground";
         line: "px-2.5 py-3 relative flex-none text-muted-foreground transition-colors after:absolute after:inset-x-2 after:bottom-0 after:h-0.5 after:rounded-full hover:text-foreground data-[state=active]:text-foreground data-[state=active]:after:bg-primary";
     };
-}, undefined, "gap-1.5 text-sm font-medium [&_svg:not([class*='size-'])]:size-4 inline-flex items-center justify-center whitespace-nowrap focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:outline-1 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0", {
+}, undefined, "gap-1.5 text-sm font-medium [&_svg:not([class*='size-'])]:size-4 inline-flex items-center justify-center whitespace-nowrap focus-visible:ring-3 focus-visible:ring-ring focus-visible:outline-1 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0", {
     variant: {
         default: "px-2 py-1 data-[state=active]:shadow-sm h-full flex-1 rounded-md border border-transparent text-foreground transition focus-visible:border-ring data-[state=active]:bg-background dark:text-muted-foreground dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 dark:data-[state=active]:text-foreground";
         line: "px-2.5 py-3 relative flex-none text-muted-foreground transition-colors after:absolute after:inset-x-2 after:bottom-0 after:h-0.5 after:rounded-full hover:text-foreground data-[state=active]:text-foreground data-[state=active]:after:bg-primary";

package/dist/components/primitives/textarea/textarea.svelte

@@ -15,7 +15,7 @@
 	bind:this={ref}
 	data-slot={dataSlot}
 	class={cn(
-		'min-h-16 px-3 py-2 text-base shadow-xs md:text-sm flex field-sizing-content w-full rounded-md border border-input bg-transparent transition outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:bg-input/30 dark:aria-invalid:ring-destructive/40',
+		'min-h-16 px-3 py-2 text-base shadow-xs md:text-sm flex field-sizing-content w-full rounded-md border border-input bg-transparent transition outline-none placeholder:text-muted-foreground 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 dark:bg-input/30 dark:aria-invalid:ring-destructive/40',
 		className
 	)}
 	bind:value

package/dist/components/primitives/toggle/toggle.svelte

@@ -2,7 +2,7 @@
 	import { type VariantProps, tv } from 'tailwind-variants';
 
 	export const toggleVariants = tv({
-		base: "hover:text-foreground aria-pressed:bg-muted focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive data-[state=on]:bg-muted gap-1 rounded-lg text-sm font-medium transition-all [&_svg:not([class*='size-'])]:size-4 group/toggle inline-flex items-center justify-center whitespace-nowrap outline-none hover:bg-muted focus-visible:ring-3 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+		base: "hover:text-foreground aria-pressed:bg-muted focus-visible:border-ring focus-visible:ring-ring aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive data-[state=on]:bg-muted gap-1 rounded-lg text-sm font-medium transition-all [&_svg:not([class*='size-'])]:size-4 group/toggle inline-flex items-center justify-center whitespace-nowrap outline-none hover:bg-muted focus-visible:ring-3 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
 		variants: {
 			variant: {
 				default: 'bg-transparent',

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

@@ -9,7 +9,7 @@ export declare const toggleVariants: import("tailwind-variants").TVReturnType<{
         sm: "h-7 min-w-7 rounded-md px-2.5 text-xs has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5";
         lg: "h-9 min-w-9 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2";
     };
-}, undefined, "hover:text-foreground aria-pressed:bg-muted focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive data-[state=on]:bg-muted gap-1 rounded-lg text-sm font-medium transition-all [&_svg:not([class*='size-'])]:size-4 group/toggle inline-flex items-center justify-center whitespace-nowrap outline-none hover:bg-muted focus-visible:ring-3 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0", {
+}, undefined, "hover:text-foreground aria-pressed:bg-muted focus-visible:border-ring focus-visible:ring-ring aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive data-[state=on]:bg-muted gap-1 rounded-lg text-sm font-medium transition-all [&_svg:not([class*='size-'])]:size-4 group/toggle inline-flex items-center justify-center whitespace-nowrap outline-none hover:bg-muted focus-visible:ring-3 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0", {
     variant: {
         default: "bg-transparent";
         outline: "border-input hover:bg-muted border bg-transparent";

package/dist/components/viewer/Viewer.svelte

@@ -39,7 +39,7 @@
 	import * as DropdownMenu from '../primitives/dropdown-menu/index.js';
 	import { Button } from '../primitives/button/index.js';
 	import type { Locale } from '../../i18n/messages';
-	import { setLocaleContext, getLocaleContext } from '../../i18n/localeContext.svelte';
+	import { layerLocaleContext } from '../../i18n/localeContext.svelte';
 
 	export interface ViewerConfig {
 		showScreenshotButton?: boolean;
@@ -103,12 +103,8 @@
 
 	const config = $derived({ ...defaultViewerConfig, ...viewerConfig });
 
-	// Read the host's locale before overriding it for our subtree.
-	const hostLocale = getLocaleContext();
-
 	// A getter, not a value: it is re-read reactively, so changing `lang` updates the chrome live.
-	setLocaleContext(() => lang ?? hostLocale.locale);
-	const locale = getLocaleContext();
+	const locale = layerLocaleContext(() => lang);
 	const t = $derived(locale.messages);
 
 	let canvas: HTMLCanvasElement;
@@ -146,16 +142,23 @@
 	let selectedMeshMetadata: Record<string, any> | null = $state(null);
 	let selectedMeshName: string | null = $state(null);
 
-	// Derived from LOOKS so adding a look in @selvajs/visualization shows up here with no edit; the
-	// map only overrides the names that don't survive capitalisation ('xray' → 'X-Ray').
-	const LOOK_LABELS: Partial<Record<Look, string>> = {
-		xray: 'X-Ray',
-		lineart: 'Line Art'
-	};
-	const STYLE_OPTIONS: { look: Look; label: string }[] = LOOKS.map((look) => ({
-		look,
-		label: LOOK_LABELS[look] ?? look.charAt(0).toUpperCase() + look.slice(1)
-	}));
+	// Derived from LOOKS so a look added in @selvajs/visualization shows up here with no edit,
+	// under its capitalised name until it gets a message.
+	const lookLabels = $derived<Partial<Record<Look, string>>>({
+		technical: t.lookTechnical,
+		studio: t.lookStudio,
+		showcase: t.lookShowcase,
+		arctic: t.lookArctic,
+		xray: t.lookXray,
+		lineart: t.lookLineart,
+		wireframe: t.lookWireframe
+	});
+	const styleOptions = $derived<{ look: Look; label: string }[]>(
+		LOOKS.map((look) => ({
+			look,
+			label: lookLabels[look] ?? look.charAt(0).toUpperCase() + look.slice(1)
+		}))
+	);
 
 	const VIEW_PRESETS: { preset: ViewPreset; label: () => string }[] = [
 		{ preset: 'top', label: () => t.viewTop },
@@ -527,7 +530,7 @@
 												value={renderStyle}
 												onValueChange={(look) => setRenderStyle(look as typeof renderStyle)}
 											>
-												{#each STYLE_OPTIONS as { look, label } (look)}
+												{#each styleOptions as { look, label } (look)}
 													<DropdownMenu.RadioItem value={look} closeOnSelect={false}>
 														{label}
 													</DropdownMenu.RadioItem>

package/dist/compute/run-panel-action.d.ts

@@ -0,0 +1,8 @@
+import type { SolveSettlement } from '@selvajs/solve/client';
+import type { ActionButton } from '../types/actionButton';
+/**
+ * Runs a footer-menu action. A `solvesFirst` action waits for the result for the current
+ * inputs and runs only on an applied one; a refused or failed solve has already shown the user
+ * why. A host that can't solve (`ensureSolved` undefined) runs it straight away.
+ */
+export declare function runPanelAction(action: ActionButton, ensureSolved: (() => Promise<SolveSettlement>) | undefined): Promise<void>;

package/dist/compute/run-panel-action.js

@@ -0,0 +1,12 @@
+/**
+ * Runs a footer-menu action. A `solvesFirst` action waits for the result for the current
+ * inputs and runs only on an applied one; a refused or failed solve has already shown the user
+ * why. A host that can't solve (`ensureSolved` undefined) runs it straight away.
+ */
+export async function runPanelAction(action, ensureSolved) {
+    if (!action.solvesFirst || !ensureSolved)
+        return action.onclick();
+    const settled = await ensureSolved();
+    if (settled.status === 'applied')
+        await action.onclick(settled);
+}

package/dist/compute/useSolveSession.svelte.js

@@ -79,10 +79,13 @@ export function useSolveSession(args) {
         discard: () => session.discard(),
         setValue: (id, value, forceSolve) => session.setValue(id, value, forceSolve),
         solve: () => session.solve(),
+        ensureSolved: () => session.ensureSolved(),
+        onSettled: (listener) => session.onSettled(listener),
         loadValues: (incoming) => session.loadValues(incoming),
         rebuild: (schema, scopeKey) => session.rebuild(schema, scopeKey),
         report: (result) => session.report(result),
         reportError: (message) => session.reportError(message),
+        reportAborted: () => session.reportAborted(),
         subscribe: (listener) => session.subscribe(listener),
         notify: () => session.notify(),
         dispose: () => session.dispose()

package/dist/i18n/localeContext.svelte.d.ts

@@ -4,11 +4,18 @@ export interface LocaleContext {
     readonly messages: ViewerMessages;
 }
 /**
- * Provide the locale to descendants. Pass a getter, not a value: it is re-read on every
+ * Provide the locale to descendants. Pass getters, not values: they are re-read on every
  * consumer render, so a reactive source (a `$state`, the app's Paraglide locale) switches
- * the language live.
+ * the language live. `getOverrides` replaces individual strings of the resolved catalog.
  */
-export declare function setLocaleContext(getLocale: () => Locale | undefined): void;
+export declare function setLocaleContext(getLocale: () => Locale | undefined, getOverrides?: () => Partial<ViewerMessages> | undefined): void;
+/**
+ * Re-provides the nearest context for a component that takes its own `lang`/`messages` props.
+ * Without `lang`, or with the inherited locale, the subtree keeps the overrides an outer provider
+ * applied; a different `lang` starts from that locale's catalog, since those overrides were
+ * written for another language.
+ */
+export declare function layerLocaleContext(getLang: () => Locale | undefined, getOverrides?: () => Partial<ViewerMessages> | undefined): LocaleContext;
 /**
  * Falls back to an English-only context when no provider exists (a primitive used in
  * isolation), so consumers never need a null check.

package/dist/i18n/localeContext.svelte.js

@@ -1,10 +1,11 @@
 import { getContext, setContext } from 'svelte';
-import { messagesFor, DEFAULT_LOCALE } from './messages';
+import { messagesFor, withOverrides, DEFAULT_LOCALE } from './messages';
 // Carries the UI locale down to the viewer and its panels without threading a
 // `lang` prop through every layer.
 //
 // Resolution order for any consuming component:
 //   explicit `lang` prop  →  nearest locale context  →  English default
+// and the strings are that locale's catalog with any `messages` overrides on top.
 //
 // Two ways to provide it:
 //   - Standalone: <Viewer lang="de" /> — Viewer provides the context itself.
@@ -12,21 +13,42 @@ import { messagesFor, DEFAULT_LOCALE } from './messages';
 //     viewer (and anything else) reads it.
 const LOCALE_CONTEXT_KEY = Symbol('viewer-locale-context');
 /**
- * Provide the locale to descendants. Pass a getter, not a value: it is re-read on every
+ * Provide the locale to descendants. Pass getters, not values: they are re-read on every
  * consumer render, so a reactive source (a `$state`, the app's Paraglide locale) switches
- * the language live.
+ * the language live. `getOverrides` replaces individual strings of the resolved catalog.
  */
-export function setLocaleContext(getLocale) {
+export function setLocaleContext(getLocale, getOverrides) {
     const ctx = {
         get locale() {
             return getLocale() ?? DEFAULT_LOCALE;
         },
         get messages() {
-            return messagesFor(getLocale());
+            return withOverrides(messagesFor(getLocale()), getOverrides?.());
         }
     };
     setContext(LOCALE_CONTEXT_KEY, ctx);
 }
+/**
+ * Re-provides the nearest context for a component that takes its own `lang`/`messages` props.
+ * Without `lang`, or with the inherited locale, the subtree keeps the overrides an outer provider
+ * applied; a different `lang` starts from that locale's catalog, since those overrides were
+ * written for another language.
+ */
+export function layerLocaleContext(getLang, getOverrides) {
+    const outer = getLocaleContext();
+    const ctx = {
+        get locale() {
+            return getLang() ?? outer.locale;
+        },
+        get messages() {
+            const lang = getLang();
+            const base = lang === undefined || lang === outer.locale ? outer.messages : messagesFor(lang);
+            return withOverrides(base, getOverrides?.());
+        }
+    };
+    setContext(LOCALE_CONTEXT_KEY, ctx);
+    return ctx;
+}
 /**
  * Falls back to an English-only context when no provider exists (a primitive used in
  * isolation), so consumers never need a null check.