@nqmcreative/ui 0.4.1 → 0.4.2

package/dist/styles/sprout/DatePicker.svelte

@@ -3,7 +3,12 @@
 	import { clickOutside, portal } from '../../core/actions/dismissable.js';
 	import { dateHint } from '../../core/calendar.js';
 	import { formatISO, parseFormatted, type DateFormat } from '../../core/date.js';
-	import { toneFocusWithinBorder, type Tone } from '../../core/tones.js';
+	import {
+		focusWithinRing,
+		toneFocusWithinBorder,
+		toneFocusWithinRing,
+		type Tone
+	} from '../../core/tones.js';
 	import Calendar from './Calendar.svelte';
 	import { edge, soft } from './lift.js';
 
@@ -95,7 +100,9 @@
 
 <div
 	bind:this={wrapper}
-	class="inline-flex w-full items-center gap-1 rounded-xl border bg-bg pr-1 pl-3 {edge} transition-colors duration-150 ease-brand-out
+	class="inline-flex w-full items-center gap-1 rounded-xl border bg-bg pr-1 pl-3 {edge} transition-colors duration-150 ease-brand-out {focusWithinRing} {toneFocusWithinRing[
+		tone
+	]}
 		{invalid ? 'border-danger' : `border-hairline-strong ${toneFocusWithinBorder[tone]}`}
 		{disabled ? 'pointer-events-none opacity-50' : ''} {className}"
 >
@@ -134,7 +141,7 @@
 				inputEl?.focus();
 			}}
 			aria-label="Clear selection"
-			class="shrink-0 rounded p-1 text-text-muted transition-colors duration-150 hover:bg-bg-inset hover:text-text focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-current"
+			class="shrink-0 rounded-xl p-1 text-text-muted transition-colors duration-150 hover:bg-bg-inset hover:text-text focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-current"
 		>
 			<svg class="size-3.5" viewBox="0 0 14 14" fill="none" aria-hidden="true">
 				<path
@@ -153,7 +160,7 @@
 		onclick={() => (open = !open)}
 		aria-label="Select a date"
 		aria-expanded={open}
-		class="shrink-0 rounded p-1.5 text-text-muted transition-colors duration-150 hover:bg-bg-inset hover:text-text focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-current"
+		class="shrink-0 rounded-xl p-1.5 text-text-muted transition-colors duration-150 hover:bg-bg-inset hover:text-text focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-current"
 	>
 		<svg class="size-4" viewBox="0 0 20 20" fill="none" aria-hidden="true">
 			<rect x="3" y="4.5" width="14" height="12" rx="2" stroke="currentColor" stroke-width="1.4" />

package/dist/styles/sprout/Divider.svelte

@@ -20,7 +20,7 @@
 		{...rest}
 	></div>
 {:else if label}
-	<div class="flex items-center gap-3 {className}" {...rest}>
+	<div role="separator" class="flex items-center gap-3 {className}" {...rest}>
 		<span class="h-px flex-1 bg-hairline"></span>
 		<span class="font-sans text-xs font-medium text-text-muted">{label}</span>
 		<span class="h-px flex-1 bg-hairline"></span>

package/dist/styles/sprout/Drawer.svelte

@@ -39,6 +39,8 @@
 		...rest
 	}: Props = $props();
 
+	const uid = $props.id();
+
 	let dialog: HTMLDialogElement | null = $state(null);
 
 	const horizontal = $derived(side === 'left' || side === 'right');
@@ -81,6 +83,8 @@
 
 <dialog
 	bind:this={dialog}
+	aria-labelledby={title ? `${uid}-title` : undefined}
+	aria-describedby={description ? `${uid}-description` : undefined}
 	onclose={close}
 	onclick={(event) => {
 		if (dismissible && isBackdropClick(event, dialog)) close();
@@ -98,10 +102,12 @@
 				{#if icon}<span class={iconLg}>{@render icon()}</span>{/if}
 				<div class="flex min-w-0 flex-1 flex-col gap-1">
 					{#if title}
-						<h2 class="font-heading text-base font-semibold text-text">{title}</h2>
+						<h2 id="{uid}-title" class="font-heading text-base font-semibold text-text">{title}</h2>
 					{/if}
 					{#if description}
-						<p class="font-sans text-[13px] text-text-muted">{description}</p>
+						<p id="{uid}-description" class="font-sans text-[13px] text-text-muted">
+							{description}
+						</p>
 					{/if}
 				</div>
 				{#if dismissible}

package/dist/styles/sprout/Dropzone.svelte

@@ -190,7 +190,7 @@
 						type="button"
 						onclick={() => remove(i)}
 						aria-label="Remove {file.name}"
-						class="-m-1 shrink-0 rounded p-1 text-text-muted transition-colors duration-150 hover:bg-bg-inset hover:text-danger focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-danger"
+						class="-m-1 shrink-0 rounded-xl p-1 text-text-muted transition-colors duration-150 hover:bg-bg-inset hover:text-danger focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-danger"
 					>
 						<svg class="size-3.5" viewBox="0 0 14 14" fill="none" aria-hidden="true">
 							<path

package/dist/styles/sprout/Field.svelte

@@ -24,9 +24,65 @@
 		children,
 		...rest
 	}: Props = $props();
+
+	const uid = $props.id();
+	const messageId = $derived(error ? `${uid}-error` : hint ? `${uid}-hint` : undefined);
+
+	interface Described {
+		for?: string;
+		messageId?: string;
+		required: boolean;
+		invalid: boolean;
+	}
+
+	/**
+	 * A hint nobody can hear is not a hint. `aria-describedby` has to sit on the
+	 * control, and the control arrives through `children` — out of reach of this
+	 * template — so the field finds it once the DOM exists and keeps the three
+	 * attributes in step itself. It touches only what it set: an `aria-invalid`
+	 * the control already carries from its own `invalid` prop stays that
+	 * control's business.
+	 */
+	function describes(node: HTMLElement, state: Described) {
+		let ourId: string | undefined;
+		let ownsInvalid = false;
+
+		const apply = (next: Described) => {
+			const control =
+				(next.for ? node.querySelector<HTMLElement>(`#${CSS.escape(next.for)}`) : null) ??
+				node.querySelector<HTMLElement>('input, select, textarea');
+			if (!control) return;
+
+			const ids = (control.getAttribute('aria-describedby') ?? '')
+				.split(/\s+/)
+				.filter((id) => id && id !== ourId);
+			if (next.messageId) ids.push(next.messageId);
+			if (ids.length) control.setAttribute('aria-describedby', ids.join(' '));
+			else control.removeAttribute('aria-describedby');
+			ourId = next.messageId;
+
+			if (next.required) control.setAttribute('aria-required', 'true');
+			else control.removeAttribute('aria-required');
+
+			if (next.invalid) {
+				ownsInvalid ||= !control.hasAttribute('aria-invalid');
+				control.setAttribute('aria-invalid', 'true');
+			} else if (ownsInvalid) {
+				control.removeAttribute('aria-invalid');
+				ownsInvalid = false;
+			}
+		};
+
+		apply(state);
+		return { update: apply };
+	}
 </script>
 
-<div class="flex w-full flex-col gap-1.5 {className}" {...rest}>
+<div
+	use:describes={{ for: htmlFor, messageId, required, invalid: Boolean(error) }}
+	class="flex w-full flex-col gap-1.5 {className}"
+	{...rest}
+>
 	{#if label}
 		<label for={htmlFor} class="font-sans text-sm font-medium text-text">
 			{label}
@@ -35,8 +91,8 @@
 	{/if}
 	{@render children()}
 	{#if error}
-		<p class="font-sans text-[13px] text-danger">{error}</p>
+		<p id="{uid}-error" role="alert" class="font-sans text-[13px] text-danger">{error}</p>
 	{:else if hint}
-		<p class="font-sans text-[13px] text-text-muted">{hint}</p>
+		<p id="{uid}-hint" class="font-sans text-[13px] text-text-muted">{hint}</p>
 	{/if}
 </div>

package/dist/styles/sprout/FileInput.svelte

@@ -119,7 +119,7 @@
 			type="button"
 			{disabled}
 			onclick={() => input?.click()}
-			class="shrink-0 rounded-lg border border-hairline-strong bg-bg-alt font-sans font-medium text-text-secondary transition-colors duration-150 hover:bg-bg-inset hover:text-text focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-current
+			class="shrink-0 rounded-xl border border-hairline-strong bg-bg-alt font-sans font-medium text-text-secondary transition-colors duration-150 hover:bg-bg-inset hover:text-text focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-current
 				{buttons[size]}"
 		>
 			{label ?? 'Choose file'}
@@ -136,7 +136,7 @@
 				type="button"
 				onclick={clear}
 				aria-label="Remove"
-				class="mr-1 shrink-0 rounded p-1 text-text-muted transition-colors duration-150 hover:bg-bg-inset hover:text-danger focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-danger"
+				class="mr-1 shrink-0 rounded-xl p-1 text-text-muted transition-colors duration-150 hover:bg-bg-inset hover:text-danger focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-danger"
 			>
 				<svg class="size-3.5" viewBox="0 0 14 14" fill="none" aria-hidden="true">
 					<path
@@ -184,7 +184,7 @@
 						type="button"
 						onclick={() => (files = files.filter((_, at) => at !== i))}
 						aria-label="Remove {file.name}"
-						class="-m-1 shrink-0 rounded p-1 text-text-muted transition-colors duration-150 hover:bg-bg-inset hover:text-danger focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-danger"
+						class="-m-1 shrink-0 rounded-xl p-1 text-text-muted transition-colors duration-150 hover:bg-bg-inset hover:text-danger focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-danger"
 					>
 						<svg class="size-3.5" viewBox="0 0 14 14" fill="none" aria-hidden="true">
 							<path

package/dist/styles/sprout/Footer.svelte

@@ -59,15 +59,26 @@
 											<a
 												href={item.href}
 												target={item.external ? '_blank' : undefined}
-												rel={item.external ? 'noreferrer' : undefined}
+												rel={item.external ? 'noopener noreferrer' : undefined}
 												class="inline-flex items-center gap-2 font-sans text-[13px] text-text-muted transition-colors duration-150 ease-brand-out {toneHoverText[
 													tone
 												]}"
 											>
 												{#if item.icon}<span class={iconSm}>{@render item.icon()}</span
 													>{/if}{item.label}
-												{#if item.external}<span aria-hidden="true" class="text-[0.85em]">↗</span
-													>{/if}
+												{#if item.external}<svg
+														class="inline-block size-[0.85em] align-[-0.05em]"
+														viewBox="0 0 14 14"
+														fill="none"
+														aria-hidden="true"
+														><path
+															d="M5.5 2.5h6v6M11.5 2.5 3.5 10.5"
+															stroke="currentColor"
+															stroke-width="1.5"
+															stroke-linecap="round"
+															stroke-linejoin="round"
+														/></svg
+													><span class="sr-only">(opens in a new tab)</span>{/if}
 											</a>
 										</li>
 									{/each}

package/dist/styles/sprout/Input.svelte

@@ -1,7 +1,12 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
 	import type { HTMLInputAttributes } from 'svelte/elements';
-	import { toneFocusWithinBorder, type Tone } from '../../core/tones.js';
+	import {
+		focusWithinRing,
+		toneFocusWithinBorder,
+		toneFocusWithinRing,
+		type Tone
+	} from '../../core/tones.js';
 	import { edge } from './lift.js';
 
 	export type InputSize = 'sm' | 'md' | 'lg';
@@ -38,7 +43,9 @@
 </script>
 
 <span
-	class="inline-flex w-full items-center gap-2 rounded-xl border bg-bg px-3 {edge} transition-colors duration-150 ease-brand-out
+	class="inline-flex w-full items-center gap-2 rounded-xl border bg-bg px-3 {edge} transition-colors duration-150 ease-brand-out {focusWithinRing} {toneFocusWithinRing[
+		tone
+	]}
 		{sizes[size]}
 		{invalid
 		? 'border-danger focus-within:border-danger'

package/dist/styles/sprout/Label.svelte

@@ -12,5 +12,7 @@
 
 <label class="font-sans text-sm font-medium text-text {className}" {...rest}>
 	{@render children()}
-	{#if required}<span class="ml-0.5 text-danger" aria-hidden="true">*</span>{/if}
+	{#if required}<span class="ml-0.5 text-danger" aria-hidden="true">*</span><span class="sr-only"
+			>(required)</span
+		>{/if}
 </label>

package/dist/styles/sprout/Link.svelte

@@ -40,7 +40,7 @@
 
 <a
 	target={external ? '_blank' : undefined}
-	rel={external ? 'noreferrer' : undefined}
+	rel={external ? 'noopener noreferrer' : undefined}
 	class="inline-flex items-center gap-1 rounded-md font-sans transition-colors duration-150 ease-brand-out
 		{muted ? `text-text-secondary ${toneHoverText[tone]}` : toneText[tone]}
 		{underlines[underline]} {focusRing} {toneRing[tone]} {className}"
@@ -49,5 +49,16 @@
 	{#if icon}<span class={iconSm}>{@render icon()}</span>{/if}
 	{@render children()}
 	{#if iconEnd}<span class={iconSm}>{@render iconEnd()}</span>{/if}
-	{#if external}<span aria-hidden="true" class="text-[0.85em]">↗</span>{/if}
+	{#if external}
+		<svg class="size-[0.85em] shrink-0" viewBox="0 0 14 14" fill="none" aria-hidden="true">
+			<path
+				d="M5.5 2.5h6v6M11.5 2.5 3.5 10.5"
+				stroke="currentColor"
+				stroke-width="1.5"
+				stroke-linecap="round"
+				stroke-linejoin="round"
+			/>
+		</svg>
+		<span class="sr-only">(opens in a new tab)</span>
+	{/if}
 </a>

package/dist/styles/sprout/LogoCloud.svelte

@@ -42,7 +42,7 @@
 					<svelte:element
 						this={logo.href ? 'a' : 'div'}
 						href={logo.href}
-						class="flex items-center rounded transition-all duration-200 ease-brand-out {muted
+						class="flex items-center rounded-md transition-all duration-200 ease-brand-out {muted
 							? 'opacity-60 grayscale hover:opacity-100 hover:grayscale-0'
 							: ''}"
 					>

package/dist/styles/sprout/MenuItem.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
 	import type { HTMLButtonAttributes } from 'svelte/elements';
-	import { toneSoftHover, toneText, type Tone } from '../../core/tones.js';
+	import { toneSoft, toneSoftHover, toneText, type Tone } from '../../core/tones.js';
 	import { iconMd } from './icon.js';
 
 	interface Props extends HTMLButtonAttributes {
@@ -28,6 +28,11 @@
 		children,
 		...rest
 	}: Props = $props();
+
+	// A chosen row speaks in the brand, the same as an active nav link — a tick
+	// alone leaves it the same grey as every row above it. An item that already
+	// carries a tone (a red `Delete`) keeps its own.
+	const chosen = $derived(toneSoft[tone === 'neutral' ? 'brand' : tone]);
 </script>
 
 <svelte:element
@@ -39,9 +44,11 @@
 	aria-disabled={disabled ? 'true' : undefined}
 	tabindex={disabled ? undefined : -1}
 	class="mx-1 flex items-center gap-2.5 rounded-xl px-2.5 py-1.5 text-left text-sm transition-colors duration-100 ease-brand-out focus:outline-none disabled:pointer-events-none disabled:opacity-40
-		{tone === 'neutral'
-		? 'text-text-secondary hover:bg-bg-inset focus-visible:bg-bg-inset'
-		: `${toneText[tone]} ${toneSoftHover[tone]}`}
+		{selected
+		? `${chosen} font-medium`
+		: tone === 'neutral'
+			? 'text-text-secondary hover:bg-bg-inset focus-visible:bg-bg-inset'
+			: `${toneText[tone]} ${toneSoftHover[tone]}`}
 		{className}"
 	{...rest}
 >

package/dist/styles/sprout/Modal.svelte

@@ -40,6 +40,8 @@
 		...rest
 	}: Props = $props();
 
+	const uid = $props.id();
+
 	let dialog: HTMLDialogElement | null = $state(null);
 
 	const closable = $derived(showClose ?? dismissible);
@@ -65,6 +67,8 @@
 
 <dialog
 	bind:this={dialog}
+	aria-labelledby={title ? `${uid}-title` : undefined}
+	aria-describedby={description ? `${uid}-description` : undefined}
 	onclose={close}
 	onclick={onBackdrop}
 	oncancel={(event) => {
@@ -81,10 +85,12 @@
 				{#if icon}<span class={iconLg}>{@render icon()}</span>{/if}
 				<div class="flex min-w-0 flex-1 flex-col gap-1">
 					{#if title}
-						<h2 class="font-heading text-base font-semibold text-text">{title}</h2>
+						<h2 id="{uid}-title" class="font-heading text-base font-semibold text-text">{title}</h2>
 					{/if}
 					{#if description}
-						<p class="font-sans text-[13px] text-text-muted">{description}</p>
+						<p id="{uid}-description" class="font-sans text-[13px] text-text-muted">
+							{description}
+						</p>
 					{/if}
 				</div>
 				{#if closable}

package/dist/styles/sprout/MultiSelect.svelte

@@ -161,7 +161,7 @@
 					type="button"
 					onclick={() => remove(option)}
 					aria-label="Remove {option.label}"
-					class="inline-flex size-4 items-center justify-center rounded transition-colors duration-150 hover:bg-bg/70 focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-current"
+					class="inline-flex size-4 items-center justify-center rounded-full transition-colors duration-150 hover:bg-bg/70 focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-current"
 				>
 					<svg class="size-2.5" viewBox="0 0 14 14" fill="none" aria-hidden="true">
 						<path
@@ -210,7 +210,7 @@
 				inputEl?.focus();
 			}}
 			aria-label="Clear selection"
-			class="shrink-0 rounded p-1 text-text-muted transition-colors duration-150 hover:bg-bg-inset hover:text-text focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-current"
+			class="shrink-0 rounded-xl p-1 text-text-muted transition-colors duration-150 hover:bg-bg-inset hover:text-text focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-current"
 		>
 			<svg class="size-3.5" viewBox="0 0 14 14" fill="none" aria-hidden="true">
 				<path
@@ -261,7 +261,7 @@
 							{index === active ? toneSoft[tone] : 'text-text-secondary'}"
 					>
 						<span
-							class="mt-0.5 flex size-4 shrink-0 items-center justify-center rounded border transition-colors duration-100
+							class="mt-0.5 flex size-4 shrink-0 items-center justify-center rounded-md border transition-colors duration-100
 								{checked ? `border-transparent ${toneText[tone]}` : 'border-hairline-strong'}"
 						>
 							{#if checked}

package/dist/styles/sprout/Navbar.svelte

@@ -111,7 +111,7 @@
 							class="{link} {focusRing} {toneRing[tone]} {item.active
 								? toneSoft[tone]
 								: 'text-text-secondary hover:bg-bg-inset hover:text-text'} {item.disabled
-								? 'pointer-events-none opacity-50'
+								? 'pointer-events-none opacity-40'
 								: ''}"
 						>
 							{#if item.icon}<span class={iconMd}>{@render item.icon()}</span>{/if}
@@ -164,7 +164,7 @@
 					class="flex items-center justify-between gap-3 rounded-xl px-3 py-2.5 font-sans text-sm font-medium {item.active
 						? `${toneSoft[tone]}`
 						: 'text-text-secondary hover:bg-bg-inset'} {item.disabled
-						? 'pointer-events-none opacity-50'
+						? 'pointer-events-none opacity-40'
 						: ''}"
 				>
 					<span class="flex min-w-0 items-center gap-2.5">

package/dist/styles/sprout/Radio.svelte

@@ -25,32 +25,51 @@
 		children,
 		...rest
 	}: Props = $props();
+
+	const uid = $props.id();
 </script>
 
-<label
-	class="group inline-flex items-start gap-2.5 font-sans text-sm
-		{disabled ? 'pointer-events-none opacity-50' : 'cursor-pointer'} {className}"
+<div
+	class="inline-block font-sans text-sm {disabled
+		? 'pointer-events-none opacity-50'
+		: ''} {className}"
 >
-	<input type="radio" bind:group {value} {disabled} class="peer sr-only" {...rest} />
-	<span
-		class="mt-0.5 flex size-[18px] shrink-0 items-center justify-center rounded-full border border-hairline-strong bg-bg {edge} transition-colors duration-150 ease-brand-out
+	<label class="group inline-flex items-start gap-2.5 {disabled ? '' : 'cursor-pointer'}">
+		<input
+			type="radio"
+			bind:group
+			{value}
+			{disabled}
+			aria-describedby={description ? `${uid}-description` : undefined}
+			class="peer sr-only"
+			{...rest}
+		/>
+		<span
+			class="mt-0.5 flex size-[18px] shrink-0 items-center justify-center rounded-full border border-hairline-strong bg-bg {edge} transition-colors duration-150 ease-brand-out
 			{tonePeerChecked[tone]} {peerFocusRing} {tonePeerFocus[tone]}"
-		aria-hidden="true"
-	>
+			aria-hidden="true"
+		>
+			<span
+				class="size-1.5 rounded-full bg-text-inverse opacity-0 transition-opacity duration-150 group-has-[:checked]:opacity-100"
+			></span>
+		</span>
+		{#if label || children}
+			<span class="flex flex-col gap-0.5">
+				{#if children}
+					{@render children()}
+				{:else if label}
+					<span class="leading-snug text-text">{label}</span>
+				{/if}
+			</span>
+		{/if}
+	</label>
+	{#if description}
+		<!-- ponytail: the indent tracks the 18px dot plus the label's gap; move one, move both. -->
 		<span
-			class="size-1.5 rounded-full bg-text-inverse opacity-0 transition-opacity duration-150 group-has-[:checked]:opacity-100"
-		></span>
-	</span>
-	{#if label || description || children}
-		<span class="flex flex-col gap-0.5">
-			{#if children}
-				{@render children()}
-			{:else if label}
-				<span class="leading-snug text-text">{label}</span>
-			{/if}
-			{#if description}
-				<span class="text-[13px] leading-snug text-text-muted">{description}</span>
-			{/if}
+			id="{uid}-description"
+			class="mt-0.5 block pl-[28px] text-[13px] leading-snug text-text-muted"
+		>
+			{description}
 		</span>
 	{/if}
-</label>
+</div>

package/dist/styles/sprout/RadioGroup.svelte

@@ -45,13 +45,24 @@
 		children,
 		...rest
 	}: Props = $props();
+
+	const uid = $props.id();
+	// The group's own hint and error sit outside every control in it, so the
+	// fieldset is what has to point at them.
+	const messageId = $derived(error ? `${uid}-error` : hint ? `${uid}-hint` : undefined);
 </script>
 
-<fieldset class="flex flex-col gap-3 border-0 p-0 {className}" {...rest}>
+<fieldset
+	aria-describedby={messageId}
+	class="flex flex-col gap-3 border-0 p-0 {className}"
+	{...rest}
+>
 	{#if legend}
 		<legend class="mb-1 font-sans text-sm font-medium text-text">
 			{legend}
-			{#if required}<span class="ml-0.5 text-danger" aria-hidden="true">*</span>{/if}
+			{#if required}<span class="ml-0.5 text-danger" aria-hidden="true">*</span><span
+					class="sr-only">(required)</span
+				>{/if}
 		</legend>
 	{/if}
 
@@ -95,8 +106,8 @@
 	</div>
 
 	{#if error}
-		<p class="font-sans text-[13px] text-danger">{error}</p>
+		<p id="{uid}-error" role="alert" class="font-sans text-[13px] text-danger">{error}</p>
 	{:else if hint}
-		<p class="font-sans text-[13px] text-text-muted">{hint}</p>
+		<p id="{uid}-hint" class="font-sans text-[13px] text-text-muted">{hint}</p>
 	{/if}
 </fieldset>

package/dist/styles/sprout/SearchInput.svelte

@@ -73,7 +73,7 @@
 				type="button"
 				onclick={clear}
 				aria-label="Clear search"
-				class="-mr-1 rounded p-1 text-text-muted transition-colors duration-150 hover:bg-bg-inset hover:text-text focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-current"
+				class="-mr-1 rounded-xl p-1 text-text-muted transition-colors duration-150 hover:bg-bg-inset hover:text-text focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-current"
 			>
 				<svg class="size-3.5" viewBox="0 0 14 14" fill="none" aria-hidden="true">
 					<path

package/dist/styles/sprout/SegmentedControl.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
 	import type { HTMLAttributes } from 'svelte/elements';
-	import { focusRing, toneRing, type Tone } from '../../core/tones.js';
+	import { focusRing, toneRing, toneText, type Tone } from '../../core/tones.js';
 	import { iconMd } from './icon.js';
 	import { edge } from './lift.js';
 
@@ -93,7 +93,7 @@
 			onclick={() => select(option)}
 			class="inline-flex items-center justify-center rounded-xl font-sans font-medium whitespace-nowrap transition-all duration-150 ease-brand-out disabled:pointer-events-none disabled:opacity-40
 				{iconOnly ? squares[size] : sizes[size]} {focusRing} {toneRing[tone]}
-				{value === option.value ? `bg-bg text-text ${edge}` : 'text-text-muted hover:text-text'}"
+				{value === option.value ? `bg-bg ${toneText[tone]} ${edge}` : 'text-text-muted hover:text-text'}"
 		>
 			{#if option.icon}<span class={iconMd}>{@render option.icon()}</span>{/if}
 			{#if !iconOnly}{option.label}{/if}

package/dist/styles/sprout/Select.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
 	import type { HTMLSelectAttributes } from 'svelte/elements';
-	import { toneFocusBorder, type Tone } from '../../core/tones.js';
+	import { focusRing, toneFocusBorder, toneRing, type Tone } from '../../core/tones.js';
 	import { edge } from './lift.js';
 
 	export interface SelectOption {
@@ -36,7 +36,9 @@
 	<select
 		bind:value
 		aria-invalid={invalid ? 'true' : undefined}
-		class="h-10 w-full appearance-none rounded-xl border bg-bg py-0 pr-9 pl-3 font-sans text-sm text-text {edge} transition-colors duration-150 ease-brand-out focus:outline-none disabled:pointer-events-none disabled:opacity-50
+		class="{focusRing} {toneRing[
+			tone
+		]} h-10 w-full appearance-none rounded-xl border bg-bg py-0 pr-9 pl-3 font-sans text-sm text-text {edge} transition-colors duration-150 ease-brand-out disabled:pointer-events-none disabled:opacity-50
 			{invalid ? 'border-danger' : `border-hairline-strong ${toneFocusBorder[tone]}`} {className}"
 		{...rest}
 	>

package/dist/styles/sprout/Sidebar.svelte

@@ -36,6 +36,7 @@
 
 <script lang="ts">
 	import { iconMd } from './icon.js';
+	import { soft } from './lift.js';
 	import { focusRing, toneRing, toneSoft, type Tone } from '../../core/tones.js';
 
 	interface Props {
@@ -90,7 +91,7 @@
 	const surfaces: Record<SidebarVariant, string> = {
 		plain: 'h-full bg-transparent',
 		filled: 'h-full border-r border-hairline bg-bg-alt',
-		floating: 'm-3 h-[calc(100%-1.5rem)] rounded-2xl border border-hairline bg-bg-alt shadow-sm'
+		floating: `m-3 h-[calc(100%-1.5rem)] rounded-2xl border border-hairline bg-bg-alt ${soft}`
 	};
 
 	const row =

package/dist/styles/sprout/Skeleton.svelte

@@ -29,7 +29,7 @@
 </script>
 
 {#if variant === 'text' && lines > 1}
-	<div class="flex w-full flex-col gap-2 {className}" {...rest}>
+	<div aria-hidden="true" class="flex w-full flex-col gap-2 {className}" {...rest}>
 		{#each { length: lines }, i (i)}
 			<div
 				class="h-4 animate-pulse rounded-xl bg-bg-inset {i === lines - 1 ? 'w-2/3' : 'w-full'}"
@@ -39,6 +39,7 @@
 	</div>
 {:else}
 	<div
+		aria-hidden="true"
 		class="animate-pulse bg-bg-inset {variants[variant]} {className}"
 		style="{width ? `width:${width};` : ''}{height ? `height:${height};` : ''}"
 		{...rest}