@dorsk/tsumikit 0.74.0 → 0.76.0

package/dist/components/atoms/Input.svelte

@@ -136,15 +136,17 @@
 
 <style>
 	.input {
+		--input-icon: var(--control-icon-md);
 		width: 100%;
 		min-height: var(--input-size, var(--control-height-default));
-		padding: var(--sp-2) var(--sp-3);
+		padding: var(--sp-2) var(--control-px-md);
+		font-size: var(--control-fs-md);
 		line-height: var(--lh-tight);
 		background: var(--input-bg, var(--bg));
 		border: 1px solid var(--input-border, var(--border-strong));
 		border-radius: var(--input-radius, var(--r-md));
 		color: var(--input-fg, var(--text));
-		transition: border-color 0.12s var(--ease);
+		transition: border-color var(--dur-fast) ease;
 	}
 	.input:focus {
 		outline: none;
@@ -154,21 +156,33 @@
 		outline: var(--focus-ring);
 		outline-offset: var(--focus-ring-offset);
 	}
+	.input:disabled {
+		opacity: var(--disabled-opacity);
+		cursor: not-allowed;
+	}
 	.input-sm {
 		min-height: var(--input-size, var(--control-height-compact));
-		padding: var(--sp-1) var(--sp-2);
-		font-size: var(--fs-sm);
+		padding: var(--sp-1) var(--control-px-sm);
+		font-size: var(--control-fs-sm);
+		--input-icon: var(--control-icon-sm);
 	}
 	.input-lg {
 		min-height: var(--input-size, var(--control-height-large));
-		padding: var(--sp-3) var(--sp-4);
-		font-size: max(16px, var(--fs-md));
+		padding: var(--sp-3) var(--control-px-lg);
+		font-size: var(--control-fs-lg);
+		--input-icon: var(--control-icon-lg);
 	}
 	/* iOS auto-zooms any field under 16px on focus; on touch the size modifiers
 	   carry their difference through padding and height alone. */
 	@media (pointer: coarse) {
+		.input {
+			font-size: max(16px, var(--control-fs-md));
+		}
 		.input-sm {
-			font-size: max(16px, var(--fs-sm));
+			font-size: max(16px, var(--control-fs-sm));
+		}
+		.input-lg {
+			font-size: max(16px, var(--control-fs-lg));
 		}
 		.input-sm:not(.grouped) {
 			min-height: max(var(--touch-target-compact), var(--input-size, var(--control-height-compact)));
@@ -192,8 +206,8 @@
 	.input[aria-invalid='true']:focus {
 		border-color: var(--danger);
 	}
-	/* Inside an InputGroup the group draws the focus ring and the overlaid
-	   adornments report their widths; the text stays clear of them. */
+	/* Inside an InputGroup the group draws the focus ring, dims the whole group
+	   and the overlaid adornments report their widths; the text stays clear of them. */
 	.input.grouped {
 		width: 100%;
 		border-radius: var(--ig-radius);
@@ -203,6 +217,9 @@
 	.input.grouped:focus-visible {
 		outline: none;
 	}
+	.input.grouped:disabled {
+		opacity: 1;
+	}
 	.mono {
 		font-family: var(--font-mono);
 	}
@@ -216,11 +233,18 @@
 	.input-wrap .input {
 		width: 100%;
 	}
+	/* The wrap dims as one so the icon and the clear button fade with the field. */
+	.input-wrap:has(.input:disabled) {
+		opacity: var(--disabled-opacity);
+	}
+	.input-wrap .input:disabled {
+		opacity: 1;
+	}
 	.has-icon {
-		padding-inline-start: calc(var(--sp-3) + 1em + var(--sp-2));
+		padding-inline-start: calc(var(--control-px-md) + var(--input-icon) + var(--sp-2));
 	}
 	.has-clear {
-		padding-inline-end: calc(var(--sp-3) + 1em + var(--sp-2));
+		padding-inline-end: calc(var(--control-px-md) + var(--input-icon) + var(--sp-2));
 	}
 	.input-icon,
 	.input-clear {
@@ -229,13 +253,21 @@
 		bottom: 0;
 		display: flex;
 		align-items: center;
+		font-size: var(--input-icon, var(--control-icon-md));
 		color: var(--text-faint);
 		pointer-events: none;
 	}
+	.input-wrap:has(.input-sm) {
+		--input-icon: var(--control-icon-sm);
+	}
+	.input-wrap:has(.input-lg) {
+		--input-icon: var(--control-icon-lg);
+	}
 	.input-icon {
-		left: var(--sp-3);
+		left: var(--control-px-md);
 	}
 	.input-clear {
+		--clear-scale-dur: var(--dur-fast);
 		right: var(--sp-2);
 		pointer-events: auto;
 		border: 0;
@@ -243,9 +275,31 @@
 		padding: 0 var(--sp-1);
 		cursor: pointer;
 		border-radius: var(--r-sm);
+		transition:
+			color var(--dur-fast) ease,
+			opacity var(--dur-fast) ease,
+			scale var(--clear-scale-dur) var(--ease-out);
+	}
+	@starting-style {
+		.input-clear {
+			opacity: 0;
+		}
 	}
-	.input-clear:hover,
 	.input-clear:focus-visible {
 		color: var(--text);
+		outline: var(--focus-ring);
+		outline-offset: var(--focus-ring-offset-inset);
+	}
+	.input-clear:active {
+		--clear-scale-dur: var(--dur-press);
+		scale: var(--press-scale-sm);
+	}
+	@media (hover: hover) and (pointer: fine) {
+		.input:hover:not(:disabled, :focus, [aria-invalid='true']) {
+			border-color: var(--text-faint);
+		}
+		.input-clear:hover {
+			color: var(--text);
+		}
 	}
 </style>

package/dist/components/atoms/Kbd.svelte

@@ -95,7 +95,7 @@
 	.kbd-group {
 		display: inline-flex;
 		align-items: center;
-		gap: 2px;
+		gap: var(--sp-0-5);
 		font-size: var(--fs-xs);
 		color: var(--text-muted);
 		vertical-align: baseline;
@@ -106,7 +106,7 @@
 	.kbd {
 		font-family: var(--font-mono);
 		font-size: inherit;
-		line-height: 1.4;
+		line-height: var(--lh-snug);
 		padding: 0 var(--sp-1);
 		border: 1px solid var(--border-strong);
 		border-bottom-width: 2px;
@@ -124,7 +124,7 @@
 		white-space: nowrap;
 	}
 	.kbd-sep {
-		font-size: 0.85em;
+		font-size: var(--fs-2xs);
 		color: var(--text-faint);
 	}
 </style>

package/dist/components/atoms/Link.svelte

@@ -56,6 +56,9 @@
 		text-decoration: underline;
 		font: inherit;
 		text-align: start;
+		transition:
+			color var(--dur-fast) ease,
+			text-decoration-color var(--dur-fast) ease;
 	}
 	.tone-info {
 		color: var(--info);
@@ -70,8 +73,10 @@
 	.underline-none {
 		text-decoration: none;
 	}
-	.underline-hover:hover {
-		text-decoration: underline;
+	@media (hover: hover) and (pointer: fine) {
+		.underline-hover:hover {
+			text-decoration: underline;
+		}
 	}
 	.align-center {
 		text-align: center;

package/dist/components/atoms/Progress.svelte

@@ -95,7 +95,7 @@
 	aria-valuemax={indeterminate ? undefined : max}
 	aria-valuenow={indeterminate ? undefined : value}
 >
-	<div class="bar" style={indeterminate ? undefined : `width: ${pct}%`}></div>
+	<div class="bar" style={indeterminate ? undefined : `--p: ${pct / 100}`}></div>
 	{#each markers as m, i (`${i}:${m.at}`)}
 		<span
 			class="marker tone-{m.tone ? canonicalTone(m.tone) : 'text'}"
@@ -154,10 +154,12 @@
 		height: 0.3125rem;
 	}
 	.bar {
+		width: 100%;
 		height: 100%;
 		background: var(--fill, var(--accent));
 		border-radius: inherit;
-		transition: width 0.2s var(--ease);
+		translate: calc((var(--p, 1) - 1) * 100%) 0;
+		transition: translate var(--dur-base) var(--ease-out);
 	}
 	.marker {
 		position: absolute;

package/dist/components/atoms/Scrim.svelte

@@ -88,16 +88,11 @@
 		border: 0;
 		background: color-mix(in srgb, var(--bg) 45%, transparent);
 		cursor: default;
-		animation: scrim-fade 0.18s var(--ease);
+		transition: opacity var(--dur-base) var(--ease-out);
 	}
-	@keyframes scrim-fade {
-		from {
-			opacity: 0;
-		}
-	}
-	@media (prefers-reduced-motion: reduce) {
+	@starting-style {
 		.scrim {
-			animation: none;
+			opacity: 0;
 		}
 	}
 </style>

package/dist/components/atoms/SegmentedProgress.svelte

@@ -103,7 +103,7 @@
 		>
 			{#each segments as seg, i (i)}
 				<div class="segment tone-{seg.tone ?? 'accent'}" style="flex-grow: {grow(seg)}" title={seg.label}>
-					<div class="bar" style="width: {pct(seg)}%"></div>
+					<div class="bar" style="--p: {pct(seg) / 100}"></div>
 				</div>
 			{/each}
 			{#if remainder > 0}
@@ -124,7 +124,7 @@
 		>
 			{#each segments as seg, i (i)}
 				<div class="segment tone-{seg.tone ?? 'accent'}" style="flex-grow: {grow(seg)}" title={seg.label}>
-					<div class="bar" style="width: {pct(seg)}%"></div>
+					<div class="bar" style="--p: {pct(seg) / 100}"></div>
 				</div>
 			{/each}
 		</div>
@@ -180,9 +180,11 @@
 		border-bottom-right-radius: var(--r-pill);
 	}
 	.bar {
+		width: 100%;
 		height: 100%;
 		background: var(--fill, var(--accent));
-		transition: width 0.2s var(--ease);
+		translate: calc((var(--p, 1) - 1) * 100%) 0;
+		transition: translate var(--dur-base) var(--ease-out);
 	}
 	.tone-success,
 	.tone-ok {
@@ -210,7 +212,6 @@
 		min-width: 0;
 		border-radius: 0;
 		background: transparent;
-		transition: flex-grow 0.2s var(--ease);
 	}
 
 	.segmented-progress-wrap {

package/dist/components/atoms/Select.svelte

@@ -171,7 +171,7 @@
 		{#if hasFace}
 			<span class="select-face" class:compact={small} aria-hidden="true">
 				{#if selected?.icon}
-					<Icon name={selected.icon} size={small ? 14 : 16} />
+					<Icon name={selected.icon} />
 				{:else if selected?.emoji}
 					<span class="select-emoji">{selected.emoji}</span>
 				{/if}
@@ -183,7 +183,7 @@
 		{/if}
 		{#if showChevron}
 			<span class="select-chevron" aria-hidden="true">
-				<Icon name="chevron-down" size={16} />
+				<Icon name="chevron-down" />
 			</span>
 		{/if}
 	</div>
@@ -191,6 +191,7 @@
 
 <style>
 	.select-wrap {
+		--select-icon: var(--control-icon-md);
 		position: relative;
 		display: block;
 		width: 100%;
@@ -203,39 +204,46 @@
 		flex: 1 1 0;
 		min-width: 0;
 	}
+	.select-wrap:has(.select.compact) {
+		--select-icon: var(--control-icon-sm);
+	}
+	.select-wrap:has(.select.select-lg) {
+		--select-icon: var(--control-icon-lg);
+	}
 	.select {
 		width: 100%;
 		min-height: var(--select-size, var(--control-height-default));
-		padding: var(--sp-2) var(--sp-3);
+		padding: var(--sp-2) var(--control-px-md);
+		font-size: var(--control-fs-md);
 		line-height: var(--lh-tight);
 		background: var(--select-bg, var(--bg));
 		border: 1px solid var(--select-border, var(--border-strong));
 		border-radius: var(--select-radius, var(--r-md));
 		color: var(--select-fg, var(--text));
-		transition: border-color 0.12s var(--ease);
+		transition: border-color var(--dur-fast) ease;
 	}
 	/* Default variant: drop the OS chevron, reserve room for our own. */
 	.select-wrap .select {
 		appearance: none;
 		-webkit-appearance: none;
-		padding-right: calc(var(--sp-3) + 1.25rem);
+		padding-right: calc(var(--control-px-md) + var(--select-icon) + var(--sp-1));
 	}
 	/* No custom chevron: reclaim the reserved right padding. */
 	.select-wrap.no-chevron .select {
-		padding-right: var(--sp-3);
+		padding-right: var(--control-px-md);
 	}
-	/* Compact inline form for dense headers/toolbars. */
 	.select.select-lg {
 		min-height: var(--select-size, var(--control-height-large));
-		padding: var(--sp-3) var(--sp-4);
-		font-size: max(16px, var(--fs-md));
+		padding: var(--sp-3) var(--control-px-lg);
+		font-size: var(--control-fs-lg);
 	}
+	/* Compact inline form for dense headers/toolbars. */
 	.select.compact {
-		padding: var(--sp-1) var(--sp-2);
-		font-size: var(--fs-xs);
+		padding: var(--sp-1) var(--control-px-sm);
+		font-size: var(--control-fs-sm);
 	}
 	.select-wrap:not(.no-chevron) .select.compact {
-		padding-right: calc(var(--sp-2) + 1rem);
+		padding-right: calc(var(--control-px-sm) + var(--select-icon) + var(--sp-1));
 	}
 	/* Toolbar contract: size="sm" shares the compact control height so it lines up
 	   with Button size="sm", Popover size="sm" and SegmentedControl size="sm". */
@@ -263,6 +271,13 @@
 	.select[aria-invalid='true']:focus {
 		border-color: var(--danger);
 	}
+	.select:disabled {
+		cursor: not-allowed;
+	}
+	/* The wrap dims as one so the face and the chevron fade with the control. */
+	.select-wrap:has(.select:disabled) {
+		opacity: var(--disabled-opacity);
+	}
 	/* The face draws the trigger text; the native text underneath stays laid out
 	   (so `width="auto"` still sizes to it) but invisible. Popup options keep
 	   their own colour so the transparency does not inherit into the list. */
@@ -280,38 +295,45 @@
 		display: flex;
 		align-items: center;
 		gap: var(--sp-2);
-		padding: 0 var(--sp-3);
-		padding-right: calc(var(--sp-3) + 1.25rem);
+		padding: 0 var(--control-px-md);
+		padding-right: calc(var(--control-px-md) + var(--select-icon) + var(--sp-1));
+		font-size: var(--control-fs-md);
 		color: var(--select-fg, var(--text));
 		pointer-events: none;
 		overflow: hidden;
 	}
+	.select-face > :global(svg) {
+		flex: none;
+		font-size: var(--select-icon);
+	}
 	.select-wrap.no-chevron .select-face {
-		padding-right: var(--sp-3);
+		padding-right: var(--control-px-md);
 	}
 	.select-face.compact {
-		padding: 0 var(--sp-2);
-		padding-right: calc(var(--sp-2) + 1rem);
-		font-size: var(--fs-xs);
+		padding: 0 var(--control-px-sm);
+		padding-right: calc(var(--control-px-sm) + var(--select-icon) + var(--sp-1));
+		font-size: var(--control-fs-sm);
 	}
 	.select-wrap.no-chevron .select-face.compact {
-		padding-right: var(--sp-2);
+		padding-right: var(--control-px-sm);
 	}
 	/* iOS auto-zooms any field under 16px on focus; on touch the size modifiers
 	   carry their difference through padding and height alone. */
 	@media (pointer: coarse) {
-		.select.compact {
-			font-size: max(16px, var(--fs-xs));
+		.select,
+		.select-face {
+			font-size: max(16px, var(--control-fs-md));
 		}
+		.select.select-lg {
+			font-size: max(16px, var(--control-fs-lg));
+		}
+		.select.compact,
 		.select-face.compact {
-			font-size: max(16px, var(--fs-xs));
+			font-size: max(16px, var(--control-fs-sm));
 		}
 	}
-	.select:disabled ~ .select-face {
-		color: var(--text-muted);
-	}
 	.select-emoji {
-		line-height: 1;
+		line-height: var(--lh-none);
 	}
 	.select-label {
 		flex: 1 1 auto;
@@ -330,12 +352,21 @@
 	.select-chevron {
 		position: absolute;
 		top: 50%;
-		right: var(--sp-3);
+		right: var(--control-px-md);
 		transform: translateY(-50%);
 		display: inline-flex;
+		font-size: var(--select-icon);
 		color: var(--text-muted);
 		pointer-events: none; /* clicks fall through to the select */
 	}
+	.select-wrap:has(.select.compact) .select-chevron {
+		right: var(--control-px-sm);
+	}
+	@media (hover: hover) and (pointer: fine) {
+		.select:hover:not(:disabled, :focus, [aria-invalid='true'], .ghost, .embedded) {
+			border-color: var(--text-faint);
+		}
+	}
 	/* Transparent overlay: fills the positioned parent, the trigger shows through. */
 	.select.ghost {
 		position: absolute;

package/dist/components/atoms/Slider.svelte

@@ -7,6 +7,7 @@
 	// Recolor per-instance via `--slider-accent` (defaults to the theme accent).
 	import type { HTMLInputAttributes } from 'svelte/elements';
 	import { getFieldContext, warnUnlabelled } from '../../field-context';
+	import { playSound } from '../../sound';
 
 	let {
 		value = $bindable(0),
@@ -23,6 +24,11 @@
 		ticks = false,
 		marks = [],
 		width,
+		sound = true,
+		oninput,
+		onpointerdown,
+		onpointerup,
+		onpointercancel,
 		class: klass = '',
 		el = $bindable(null),
 		...rest
@@ -43,6 +49,8 @@
 		marks?: { value: number; label: string }[];
 		/** Fixed width (`flex: none`). */
 		width?: string;
+		/** Play UI sounds when enabled globally; false silences this instance. */
+		sound?: boolean;
 		id?: string;
 		'aria-describedby'?: string | null;
 		'aria-invalid'?: HTMLInputAttributes['aria-invalid'];
@@ -60,6 +68,32 @@
 
 	$effect(() => warnUnlabelled(el, 'Slider'));
 
+	let dragging = false;
+	const discrete = $derived((+max - +min) / (+step || 1) <= 20);
+	function tick() {
+		if (!dragging || discrete) playSound('tick', sound);
+	}
+	function handleInput(e: Event & { currentTarget: EventTarget & HTMLInputElement }) {
+		tick();
+		oninput?.(e);
+	}
+	function handlePointerDown(e: PointerEvent & { currentTarget: EventTarget & HTMLInputElement }) {
+		dragging = true;
+		onpointerdown?.(e);
+	}
+	function handlePointerUp(e: PointerEvent & { currentTarget: EventTarget & HTMLInputElement }) {
+		dragging = false;
+		onpointerup?.(e);
+	}
+	function handlePointerCancel(e: PointerEvent & { currentTarget: EventTarget & HTMLInputElement }) {
+		dragging = false;
+		onpointercancel?.(e);
+	}
+	function pick(v: number) {
+		value = v;
+		playSound('tick', sound);
+	}
+
 	const frac = (v: number) => Math.max(0, Math.min(1, (v - +min) / (+max - +min || 1)));
 	const pct = $derived(frac(Number(value)) * 100);
 	const tickValues = $derived.by(() => {
@@ -84,6 +118,10 @@
 		aria-label={label}
 		aria-valuetext={valueText}
 		{...rest}
+		oninput={handleInput}
+		onpointerdown={handlePointerDown}
+		onpointerup={handlePointerUp}
+		onpointercancel={handlePointerCancel}
 		aria-describedby={ariaDescribedby ?? field?.describedBy}
 		aria-invalid={ariaInvalid ?? (isInvalid ? 'true' : undefined)}
 	/>
@@ -101,7 +139,7 @@
 	{#if marks.length > 0}
 		<span class="marks" aria-hidden="true">
 			{#each marks as m, i (`${i}:${m.value}`)}
-				<button type="button" class="mark" class:on={Number(value) === m.value} style="--f: {frac(m.value)}" tabindex="-1" onclick={() => (value = m.value)}>{m.label}</button>
+				<button type="button" class="mark" class:on={Number(value) === m.value} style="--f: {frac(m.value)}" tabindex="-1" onclick={() => pick(m.value)}>{m.label}</button>
 			{/each}
 		</span>
 	{/if}
@@ -138,6 +176,9 @@
 		color: var(--text);
 	}
 	.slider {
+		--thumb: 1.2rem;
+		--track: 0.35rem;
+		--halo: 0 0 0 4px color-mix(in srgb, var(--slider-accent, var(--accent)) 20%, transparent);
 		display: flex;
 		align-items: center;
 		gap: var(--sp-3);
@@ -164,7 +205,7 @@
 	}
 	/* Track — WebKit/Blink. Filled up to --pct with the accent, then the rail. */
 	input[type='range']::-webkit-slider-runnable-track {
-		height: 0.35rem;
+		height: var(--track);
 		border-radius: var(--r-pill);
 		background: linear-gradient(
 			to right,
@@ -173,12 +214,12 @@
 		);
 	}
 	input[type='range']::-moz-range-track {
-		height: 0.35rem;
+		height: var(--track);
 		border-radius: var(--r-pill);
 		background: var(--bg-elevated-2);
 	}
 	input[type='range']::-moz-range-progress {
-		height: 0.35rem;
+		height: var(--track);
 		border-radius: var(--r-pill);
 		background: var(--slider-accent, var(--accent));
 	}
@@ -186,36 +227,52 @@
 	input[type='range']::-webkit-slider-thumb {
 		appearance: none;
 		-webkit-appearance: none;
-		margin-top: -0.425rem; /* center on the 0.35rem track */
-		width: 1.2rem;
-		height: 1.2rem;
-		border-radius: 50%;
+		margin-top: calc((var(--track) - var(--thumb)) / 2);
+		width: var(--thumb);
+		height: var(--thumb);
+		border-radius: var(--r-pill);
 		background: var(--slider-accent, var(--accent));
 		border: 2px solid var(--bg);
 		box-shadow: var(--shadow-sm);
-		transition: transform 0.1s var(--ease);
+		transition:
+			scale var(--dur-press) var(--ease-out),
+			box-shadow var(--dur-fast) var(--ease);
 	}
 	input[type='range']::-moz-range-thumb {
-		width: 1.2rem;
-		height: 1.2rem;
-		border-radius: 50%;
+		width: var(--thumb);
+		height: var(--thumb);
+		border-radius: var(--r-pill);
 		background: var(--slider-accent, var(--accent));
 		border: 2px solid var(--bg);
 		box-shadow: var(--shadow-sm);
+		transition:
+			scale var(--dur-press) var(--ease-out),
+			box-shadow var(--dur-fast) var(--ease);
 	}
-	input[type='range']:active::-webkit-slider-thumb {
-		transform: scale(1.12);
+	@media (hover: hover) and (pointer: fine) {
+		input[type='range']:not(:disabled):hover::-webkit-slider-thumb {
+			box-shadow: var(--shadow-sm), var(--halo);
+		}
+		input[type='range']:not(:disabled):hover::-moz-range-thumb {
+			box-shadow: var(--shadow-sm), var(--halo);
+		}
+	}
+	input[type='range']:not(:disabled):active::-webkit-slider-thumb {
+		scale: 1.15;
+	}
+	input[type='range']:not(:disabled):active::-moz-range-thumb {
+		scale: 1.15;
 	}
 	input[type='range']:focus-visible {
 		outline: none;
 	}
 	input[type='range']:focus-visible::-webkit-slider-thumb {
 		outline: var(--focus-ring);
-		outline-offset: 2px;
+		outline-offset: var(--focus-ring-offset);
 	}
 	input[type='range']:focus-visible::-moz-range-thumb {
 		outline: var(--focus-ring);
-		outline-offset: 2px;
+		outline-offset: var(--focus-ring-offset);
 	}
 	@media (pointer: coarse) {
 		input[type='range'] {
@@ -223,7 +280,7 @@
 		}
 	}
 	input[type='range']:disabled {
-		opacity: 0.45;
+		opacity: var(--disabled-opacity);
 		cursor: not-allowed;
 	}
 	.ticks {
@@ -235,11 +292,11 @@
 	.tick {
 		position: absolute;
 		top: 50%;
-		left: calc(0.6rem + (100% - 1.2rem) * var(--f));
-		width: 0.35rem;
-		height: 0.35rem;
-		margin: -0.175rem 0 0 -0.175rem;
-		border-radius: 50%;
+		left: calc(var(--thumb) / 2 + (100% - var(--thumb)) * var(--f));
+		width: var(--track);
+		height: var(--track);
+		margin: calc(var(--track) / -2) 0 0 calc(var(--track) / -2);
+		border-radius: var(--r-pill);
 		background: var(--border-strong);
 	}
 	.tick.reached {

package/dist/components/atoms/Slider.svelte.d.ts

@@ -19,6 +19,8 @@ type $$ComponentProps = HTMLInputAttributes & {
     }[];
     /** Fixed width (`flex: none`). */
     width?: string;
+    /** Play UI sounds when enabled globally; false silences this instance. */
+    sound?: boolean;
     id?: string;
     'aria-describedby'?: string | null;
     'aria-invalid'?: HTMLInputAttributes['aria-invalid'];