@happyvertical/smrt-ui 0.51.39 → 0.53.0

package/dist/components/forms/Checkbox.svelte

@@ -17,6 +17,8 @@ import { useControlRegistration } from './use-control-registration.svelte.js';
 
 export interface Props
   extends Omit<HTMLInputAttributes, 'type' | 'class' | 'checked'> {
+  /** Target density; omit to inherit the ThemeProvider setting. */
+  density?: 'comfortable' | 'touch';
   /** Whether the checkbox is checked (bindable). */
   checked?: boolean;
   /** Whether the checkbox shows indeterminate state. */
@@ -43,6 +45,7 @@ let {
   onchange,
   'aria-label': ariaLabel,
   'aria-describedby': ariaDescribedby,
+  density,
   ...rest
 }: Props = $props();
 
@@ -121,8 +124,9 @@ useControlRegistration(() => {
 </script>
 
 <label
-  class="checkbox {className}"
+  data-density={density} class="checkbox {className}"
   class:checkbox--disabled={disabled}
+  data-smrt-hit-target
   data-smrt-control={controlId}
   data-smrt-form={interactionContext?.formId}
   data-smrt-subject-type={resolvedInteraction === false ? undefined : resolvedInteraction.subject?.type}
@@ -150,14 +154,41 @@ useControlRegistration(() => {
 </label>
 
 <style>
-  .checkbox { display: inline-flex; align-items: center; gap: var(--smrt-spacing-2, .5rem); cursor: pointer; color: var(--smrt-color-on-surface); }
+  /* The visible box stays 18px. A transparent 44x44 hit area (WCAG 2.5.8 / M3 touch target) is
+     centred on it with ::before, so clicks nearby still land on the wrapping <label>. It adds no
+     layout. The box and the label text sit above every hit area (z-index 1 over 0), so one
+     control's hit area never steals a click from another control's box or text.
+     The hit area is painted above plain content around it, so it only grows sideways when the
+     checkbox stands alone in its parent. Beside anything else (a row title, a link, other text)
+     it keeps to the box's own column and grows vertically only. Resize it with
+     --smrt-control-hit-size (0px turns it off). */
+  .checkbox { --_box: 1.125rem; --_hit: max(var(--smrt-control-hit-size, 2.75rem), var(--_box)); position: relative; display: inline-flex; align-items: center; gap: var(--smrt-spacing-2, .5rem); cursor: pointer; color: var(--smrt-color-on-surface); }
+  .checkbox::before { content: ''; position: absolute; z-index: 0; inset-block-start: 50%; inset-inline-start: calc(var(--_box) / 2); inline-size: var(--_hit); block-size: var(--_hit); margin-block-start: calc(var(--_hit) / -2); margin-inline-start: calc(var(--_hit) / -2); }
   .checkbox--disabled { opacity: .5; cursor: not-allowed; }
   input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
-  .checkbox__box { width: 1.125rem; height: 1.125rem; display: grid; place-items: center; border: 2px solid var(--smrt-color-outline); border-radius: var(--smrt-radius-extra-small, 3px); background: var(--smrt-color-surface); transition: background var(--smrt-duration-short2), border-color var(--smrt-duration-short2); }
+  .checkbox__box { position: relative; z-index: 1; width: 1.125rem; height: 1.125rem; display: grid; place-items: center; border: 2px solid var(--smrt-color-outline); border-radius: var(--smrt-radius-extra-small, 3px); background: var(--smrt-color-surface); transition: background var(--smrt-duration-short2), border-color var(--smrt-duration-short2); }
+  .checkbox__label { position: relative; z-index: 1; }
   input:checked + .checkbox__box, input:indeterminate + .checkbox__box { background: var(--smrt-color-primary); border-color: var(--smrt-color-primary); color: var(--smrt-color-on-primary); }
   input:focus-visible + .checkbox__box { outline: 2px solid var(--smrt-color-primary); outline-offset: 3px; }
   .checkbox__check { font-size: .8rem; font-weight: 800; line-height: 1; }
   .checkbox__dash { width: .6rem; height: 2px; background: currentColor; }
+  .checkbox:not(:only-child)::before { inline-size: var(--_box); margin-inline-start: calc(var(--_box) / -2); }
   .checkbox[data-smrt-highlighted='true'] { outline: 3px solid var(--smrt-color-tertiary); outline-offset: 4px; border-radius: var(--smrt-radius-small); }
+
+  /* Table cells: neighbouring cells hold links and other controls, so the hit area never leaves
+     the cell's column. It grows vertically only (box wide)... */
+  :global(:is(td, th)) .checkbox::before { inline-size: var(--_box); margin-inline-start: calc(var(--_box) / -2); }
+  /* ...unless the checkbox is the cell's only content: then the whole cell, clipped to its own
+     edges, is the hit area (the 44px target the header and every row share). The cell only needs
+     a containing block, so :where() keeps that rule at zero specificity: a sticky header or a
+     pinned column's own position always wins (a sticky cell contains the hit area too). */
+  :global(:where(td:has(> [data-smrt-hit-target]:only-child), th:has(> [data-smrt-hit-target]:only-child))) { position: relative; }
+  :global(:is(td, th):has(> [data-smrt-hit-target]:only-child)) > .checkbox { position: static; }
+  :global(:is(td, th):has(> [data-smrt-hit-target]:only-child)) > .checkbox::before { inset: 0; inline-size: auto; block-size: auto; margin: 0; }
+
   @media (prefers-reduced-motion: reduce) { .checkbox__box { transition: none; } }
+
+  .checkbox[data-density='touch'] { --smrt-control-target-min: var(--smrt-touch-target-min, 48px); }
+  .checkbox[data-density='comfortable'] { --smrt-control-target-min: 0px; }
+  .checkbox { min-height: var(--smrt-control-target-min, 0px); min-width: var(--smrt-control-target-min, 0px); }
 </style>

package/dist/components/forms/Checkbox.svelte.d.ts

@@ -1,6 +1,8 @@
 import type { HTMLInputAttributes } from 'svelte/elements';
 import type { ControlInteractionOptions } from './control-interaction.js';
 export interface Props extends Omit<HTMLInputAttributes, 'type' | 'class' | 'checked'> {
+    /** Target density; omit to inherit the ThemeProvider setting. */
+    density?: 'comfortable' | 'touch';
     /** Whether the checkbox is checked (bindable). */
     checked?: boolean;
     /** Whether the checkbox shows indeterminate state. */

package/dist/components/forms/Checkbox.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/forms/Checkbox.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,iBAAiB,CAAC;AAM3D,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,0BAA0B,CAAC;AAW1E,MAAM,WAAW,KACf,SAAQ,IAAI,CAAC,mBAAmB,EAAE,MAAM,GAAG,OAAO,GAAG,SAAS,CAAC;IAC/D,kDAAkD;IAClD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,sDAAsD;IACtD,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,iDAAiD;IACjD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,oDAAoD;IACpD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,mDAAmD;IACnD,WAAW,CAAC,EAAE,yBAAyB,GAAG,KAAK,CAAC;CACjD;AAkHD,QAAA,MAAM,QAAQ,kDAAwC,CAAC;AACvD,KAAK,QAAQ,GAAG,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC;AAC5C,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"Checkbox.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/forms/Checkbox.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,iBAAiB,CAAC;AAM3D,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,0BAA0B,CAAC;AAW1E,MAAM,WAAW,KACf,SAAQ,IAAI,CAAC,mBAAmB,EAAE,MAAM,GAAG,OAAO,GAAG,SAAS,CAAC;IAC/D,iEAAiE;IACjE,OAAO,CAAC,EAAE,aAAa,GAAG,OAAO,CAAC;IAClC,kDAAkD;IAClD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,sDAAsD;IACtD,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,iDAAiD;IACjD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,oDAAoD;IACpD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,mDAAmD;IACnD,WAAW,CAAC,EAAE,yBAAyB,GAAG,KAAK,CAAC;CACjD;AAmHD,QAAA,MAAM,QAAQ,kDAAwC,CAAC;AACvD,KAAK,QAAQ,GAAG,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC;AAC5C,eAAe,QAAQ,CAAC"}

package/dist/components/forms/Combobox.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+import { untrack } from 'svelte';
 import {
   emitControlChange,
   highlightControl,
@@ -36,6 +37,12 @@ export interface Props {
   allowCustom?: boolean;
   /** Interaction options or false to disable all. */
   interaction?: ControlInteractionOptions | false;
+  /**
+   * Label for `value` while its option is not in `options` yet (options load
+   * asynchronously, or only the current record is known). Without it the
+   * field stays empty rather than flashing the raw value (an id).
+   */
+  valueLabel?: string;
   /** Callback when the selected value changes. */
   onvaluechange?: (value: string) => void;
   /** CSS class to apply to the combobox container. */
@@ -51,6 +58,7 @@ let {
   required = false,
   allowCustom = false,
   interaction,
+  valueLabel,
   onvaluechange,
   class: className = '',
 }: Props = $props();
@@ -61,12 +69,25 @@ const interactionContext = tryGetControlInteractionContext();
 let rootEl = $state<HTMLDivElement | null>(null);
 let inputEl = $state<HTMLInputElement | null>(null);
 let open = $state(false);
-let query = $state(value);
+const initialValue = untrack(() => value);
+/** The text for a value: its option's label, never a raw id (see valueLabel). */
+function labelForValue(candidate: string): string {
+  if (!candidate) return '';
+  const option = options.find((item) => String(item.value) === candidate);
+  if (option) return option.label;
+  if (valueLabel) return valueLabel;
+  return allowCustom ? candidate : '';
+}
+let query = $state(untrack(() => labelForValue(value)));
+/** The person has typed since opening: only then does the list filter. */
+let typed = $state(false);
 let activeIndex = $state(0);
 const filtered = $derived(
-  options.filter((option) =>
-    option.label.toLowerCase().includes(query.toLowerCase()),
-  ),
+  typed
+    ? options.filter((option) =>
+        option.label.toLowerCase().includes(query.toLowerCase()),
+      )
+    : options,
 );
 const controlId = $derived(
   interaction === false ? undefined : (interaction?.id ?? name ?? inputId),
@@ -76,6 +97,7 @@ function commit(option: ControlOption, userEdit = false) {
   const changed = String(option.value) !== value;
   value = String(option.value);
   query = option.label;
+  typed = false;
   open = false;
   onvaluechange?.(value);
   if (userEdit && changed) {
@@ -94,6 +116,7 @@ function setValue(next: unknown) {
   else if (allowCustom) {
     value = candidate;
     query = candidate;
+    typed = false;
     onvaluechange?.(candidate);
   }
 }
@@ -104,8 +127,24 @@ function prepareValue(next: unknown) {
   if (allowCustom) return candidate;
   return candidate;
 }
+function openList() {
+  if (open) return;
+  open = true;
+  // Reopening shows every option, starting at the current choice.
+  typed = false;
+  const selected = options.findIndex(
+    (option) => String(option.value) === value,
+  );
+  activeIndex = selected >= 0 ? selected : 0;
+}
+function closeList() {
+  open = false;
+  // Leaving without choosing puts the chosen label back.
+  typed = false;
+}
 function handleInput(event: Event & { currentTarget: HTMLInputElement }) {
   query = event.currentTarget.value;
+  typed = true;
   open = true;
   activeIndex = 0;
   if (allowCustom) {
@@ -116,7 +155,10 @@ function handleInput(event: Event & { currentTarget: HTMLInputElement }) {
 function handleKeydown(event: KeyboardEvent) {
   if (event.key === 'ArrowDown') {
     event.preventDefault();
-    open = true;
+    if (!open) {
+      openList();
+      return;
+    }
     const enabled = filtered
       .map((option, index) => (option.disabled ? -1 : index))
       .filter((index) => index >= 0);
@@ -134,16 +176,55 @@ function handleKeydown(event: KeyboardEvent) {
     event.preventDefault();
     commit(filtered[activeIndex], true);
   } else if (event.key === 'Escape') {
-    open = false;
+    closeList();
   }
 }
+$effect(() => {
+  const form = inputEl?.form;
+  if (!form) return;
+  let disposed = false;
+  const timers = new Set<ReturnType<typeof setTimeout>>();
+  const reset = (event: Event) => {
+    const valueAtDispatch = value;
+    const queryAtDispatch = query;
+    // Native dispatch can checkpoint microtasks between reset listeners.
+    // Wait for the next task so later cancellation and edits win.
+    const timer = setTimeout(() => {
+      timers.delete(timer);
+      if (
+        disposed ||
+        event.defaultPrevented ||
+        value !== valueAtDispatch ||
+        query !== queryAtDispatch
+      )
+        return;
+      value = initialValue;
+      query = labelForValue(initialValue);
+      typed = false;
+      open = false;
+      recordControlUserEdit(
+        interactionContext,
+        controlId,
+        interaction === false ? undefined : interaction?.subject,
+      );
+      onvaluechange?.(value);
+    });
+    timers.add(timer);
+  };
+  form.addEventListener('reset', reset);
+  return () => {
+    disposed = true;
+    form.removeEventListener('reset', reset);
+    for (const timer of timers) clearTimeout(timer);
+  };
+});
 $effect(() => {
   if (!open) return;
   const dismissPointer = (event: PointerEvent) => {
-    if (rootEl && !rootEl.contains(event.target as Node)) open = false;
+    if (rootEl && !rootEl.contains(event.target as Node)) closeList();
   };
   const dismissFocus = (event: FocusEvent) => {
-    if (rootEl && !rootEl.contains(event.target as Node)) open = false;
+    if (rootEl && !rootEl.contains(event.target as Node)) closeList();
   };
   document.addEventListener('pointerdown', dismissPointer, true);
   document.addEventListener('focusin', dismissFocus, true);
@@ -152,9 +233,21 @@ $effect(() => {
     document.removeEventListener('focusin', dismissFocus, true);
   };
 });
+// Follow the value (and options that load later) unless the person is typing.
+$effect(() => {
+  const label = labelForValue(value);
+  if (!typed) query = label;
+});
+// Validity follows the committed `value`, not the visible text: a value whose
+// option has not loaded shows an empty field but is filled in, and text typed
+// without choosing an option is not a value.
 $effect(() => {
-  const option = options.find((item) => String(item.value) === value);
-  if (option && document.activeElement !== inputEl) query = option.label;
+  if (!inputEl) return;
+  inputEl.setCustomValidity(
+    required && !disabled && !value && query.trim() !== ''
+      ? 'Choose an option from the list.'
+      : '',
+  );
 });
 useControlRegistration(() => {
   const root = rootEl;
@@ -203,9 +296,12 @@ useControlRegistration(() => {
 <div bind:this={rootEl} class="combobox {className}" data-smrt-control={controlId} data-smrt-form={interactionContext?.formId}
   data-smrt-subject-type={interaction === false ? undefined : interaction?.subject?.type}
   data-smrt-subject-id={interaction === false ? undefined : interaction?.subject?.id}>
-  <label for={inputId}>{label}</label><input bind:this={inputEl} id={inputId} {name} role="combobox" autocomplete="off" {placeholder} {disabled} {required} value={query}
+  <label for={inputId}>{label}</label>
+  <!-- The form posts the committed value (an option id), never the label the person sees. -->
+  {#if name}<input type="hidden" {name} {value} {disabled} />{/if}
+  <input bind:this={inputEl} id={inputId} role="combobox" autocomplete="off" {placeholder} {disabled} required={required && !value} aria-required={required ? 'true' : undefined} value={query}
     aria-expanded={open} aria-controls={listId} aria-autocomplete="list" aria-activedescendant={open && filtered[activeIndex] ? `${listId}-${activeIndex}` : undefined}
-    onfocus={() => open = true} oninput={handleInput} onkeydown={handleKeydown} />
+    onfocus={openList} onclick={openList} oninput={handleInput} onkeydown={handleKeydown} />
   {#if open && filtered.length}<div id={listId} class="options" role="listbox">{#each filtered as option, index (option.value)}<button id={`${listId}-${index}`} type="button" role="option"
       aria-selected={String(option.value) === value} class:active={index === activeIndex} disabled={option.disabled} onpointerdown={(event) => event.preventDefault()} onclick={() => commit(option, true)}>{option.label}</button>{/each}</div>{/if}
 </div>

package/dist/components/forms/Combobox.svelte.d.ts

@@ -18,6 +18,12 @@ export interface Props {
     allowCustom?: boolean;
     /** Interaction options or false to disable all. */
     interaction?: ControlInteractionOptions | false;
+    /**
+     * Label for `value` while its option is not in `options` yet (options load
+     * asynchronously, or only the current record is known). Without it the
+     * field stays empty rather than flashing the raw value (an id).
+     */
+    valueLabel?: string;
     /** Callback when the selected value changes. */
     onvaluechange?: (value: string) => void;
     /** CSS class to apply to the combobox container. */

package/dist/components/forms/Combobox.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Combobox.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/forms/Combobox.svelte.ts"],"names":[],"mappings":"AAQA,OAAO,KAAK,EACV,yBAAyB,EACzB,aAAa,EACd,MAAM,0BAA0B,CAAC;AAWlC,MAAM,WAAW,KAAK;IACpB,uCAAuC;IACvC,OAAO,EAAE,aAAa,EAAE,CAAC;IACzB,kDAAkD;IAClD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,sCAAsC;IACtC,KAAK,EAAE,MAAM,CAAC;IACd,4BAA4B;IAC5B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,kDAAkD;IAClD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,uCAAuC;IACvC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,uCAAuC;IACvC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,8DAA8D;IAC9D,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,mDAAmD;IACnD,WAAW,CAAC,EAAE,yBAAyB,GAAG,KAAK,CAAC;IAChD,gDAAgD;IAChD,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,oDAAoD;IACpD,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AA+KD,QAAA,MAAM,QAAQ,gDAAwC,CAAC;AACvD,KAAK,QAAQ,GAAG,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC;AAC5C,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"Combobox.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/forms/Combobox.svelte.ts"],"names":[],"mappings":"AASA,OAAO,KAAK,EACV,yBAAyB,EACzB,aAAa,EACd,MAAM,0BAA0B,CAAC;AAWlC,MAAM,WAAW,KAAK;IACpB,uCAAuC;IACvC,OAAO,EAAE,aAAa,EAAE,CAAC;IACzB,kDAAkD;IAClD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,sCAAsC;IACtC,KAAK,EAAE,MAAM,CAAC;IACd,4BAA4B;IAC5B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,kDAAkD;IAClD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,uCAAuC;IACvC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,uCAAuC;IACvC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,8DAA8D;IAC9D,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,mDAAmD;IACnD,WAAW,CAAC,EAAE,yBAAyB,GAAG,KAAK,CAAC;IAChD;;;;OAIG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,gDAAgD;IAChD,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,oDAAoD;IACpD,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAyQD,QAAA,MAAM,QAAQ,gDAAwC,CAAC;AACvD,KAAK,QAAQ,GAAG,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC;AAC5C,eAAe,QAAQ,CAAC"}

package/dist/components/forms/DictationButton.svelte

@@ -0,0 +1,128 @@
+<script lang="ts">
+/**
+ * DictationButton — the microphone next to a text field (see `Dictation`).
+ *
+ * Tap to start listening, tap again to stop. It is always there, so people
+ * who cannot (or do not know to) press and hold the field can still speak.
+ * 44px target, named by `aria-label`, `aria-pressed` while listening, and a
+ * listening dot that does not rely on color alone (the name changes too).
+ * Pair it with `DictationStatus` for the words ("Listening…", errors).
+ */
+import { M } from '../../i18n/strings.ui.js';
+import { useI18n } from '../../i18n/use-i18n.js';
+import Button from '../ui/Button.svelte';
+import type { Dictation } from './dictation.svelte.js';
+import { primeReadyBeep } from './ready-beep.js';
+
+export interface Props {
+  /** The dictation this button starts and stops. */
+  dictation: Dictation;
+  /** Disable the button (for example while the form sends). */
+  disabled?: boolean;
+  /** Accessible name to start (default "Speak instead of typing"). */
+  label?: string;
+  /** Accessible name to stop (default "Stop listening"). */
+  stopLabel?: string;
+  /** Tooltip (default mentions press-and-hold on the text box). */
+  title?: string;
+  /** Extra class names. */
+  class?: string;
+}
+
+let {
+  dictation,
+  disabled = false,
+  label,
+  stopLabel,
+  title,
+  class: className = '',
+}: Props = $props();
+
+const { t } = useI18n();
+const active = $derived(dictation.active);
+// While a recording is being written down, a tap would do nothing.
+const busy = $derived(dictation.state === 'transcribing');
+const name = $derived(
+  active
+    ? (stopLabel ?? t(M['ui.dictation.stop']))
+    : (label ?? t(M['ui.dictation.start'])),
+);
+
+function handleClick() {
+  // A tap is a user gesture: wake the audio so the ready beep can play.
+  primeReadyBeep();
+  void dictation.unlock();
+  void dictation.toggle();
+}
+</script>
+
+<Button
+  type="button"
+  variant="ghost"
+  size="sm"
+  class={`smrt-dictation-button${active ? ' smrt-dictation-button--listening' : ''} ${className}`.trim()}
+  aria-label={name}
+  aria-pressed={active}
+  aria-busy={busy || undefined}
+  title={active ? name : (title ?? t(M['ui.dictation.start_hint']))}
+  disabled={disabled || busy}
+  onclick={handleClick}
+  data-dictation-state={dictation.state}
+>
+  <svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+    <rect x="9" y="2" width="6" height="12" rx="3"></rect>
+    <path d="M5 10a7 7 0 0 0 14 0"></path>
+    <path d="M12 17v4"></path>
+  </svg>
+  {#if active}
+    <span class="smrt-dictation-dot" aria-hidden="true"></span>
+  {/if}
+</Button>
+
+<style>
+  :global(.smrt-dictation-button) {
+    position: relative;
+    flex-shrink: 0;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    inline-size: 44px;
+    block-size: 44px;
+    min-inline-size: 44px;
+    padding: 0;
+    border-radius: var(--smrt-radius-full, 9999px);
+    color: var(--smrt-color-on-surface-variant, #43474e);
+  }
+
+  :global(.smrt-dictation-button--listening) {
+    background: var(--smrt-color-error-container, #ffdad6);
+    color: var(--smrt-color-on-error-container, #410002);
+  }
+
+  .smrt-dictation-dot {
+    position: absolute;
+    inset-block-start: 6px;
+    inset-inline-end: 6px;
+    inline-size: 10px;
+    block-size: 10px;
+    border-radius: 50%;
+    background: var(--smrt-color-error, #ba1a1a);
+    animation: smrt-dictation-pulse 1.2s ease-in-out infinite;
+  }
+
+  @keyframes smrt-dictation-pulse {
+    0%,
+    100% {
+      opacity: 1;
+    }
+    50% {
+      opacity: 0.35;
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .smrt-dictation-dot {
+      animation: none;
+    }
+  }
+</style>

package/dist/components/forms/DictationButton.svelte.d.ts

@@ -0,0 +1,19 @@
+import type { Dictation } from './dictation.svelte.js';
+export interface Props {
+    /** The dictation this button starts and stops. */
+    dictation: Dictation;
+    /** Disable the button (for example while the form sends). */
+    disabled?: boolean;
+    /** Accessible name to start (default "Speak instead of typing"). */
+    label?: string;
+    /** Accessible name to stop (default "Stop listening"). */
+    stopLabel?: string;
+    /** Tooltip (default mentions press-and-hold on the text box). */
+    title?: string;
+    /** Extra class names. */
+    class?: string;
+}
+declare const DictationButton: import("svelte").Component<Props, {}, "">;
+type DictationButton = ReturnType<typeof DictationButton>;
+export default DictationButton;
+//# sourceMappingURL=DictationButton.svelte.d.ts.map

package/dist/components/forms/DictationButton.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DictationButton.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/forms/DictationButton.svelte.ts"],"names":[],"mappings":"AAeA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAIvD,MAAM,WAAW,KAAK;IACpB,kDAAkD;IAClD,SAAS,EAAE,SAAS,CAAC;IACrB,6DAA6D;IAC7D,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,oEAAoE;IACpE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,0DAA0D;IAC1D,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,iEAAiE;IACjE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,yBAAyB;IACzB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAoDD,QAAA,MAAM,eAAe,2CAAwC,CAAC;AAC9D,KAAK,eAAe,GAAG,UAAU,CAAC,OAAO,eAAe,CAAC,CAAC;AAC1D,eAAe,eAAe,CAAC"}

package/dist/components/forms/DictationStatus.svelte

@@ -0,0 +1,164 @@
+<script lang="ts">
+/**
+ * DictationStatus — what dictation is doing, in words (see `Dictation`).
+ *
+ * "Listening…" (with the words heard so far) while the microphone is on,
+ * "Writing it down…" while a recording is turned into text, and
+ * a plain explanation when it cannot listen: the browser cannot turn speech
+ * into text, the microphone is blocked, or nothing was heard. Nothing while
+ * idle. Listening is announced politely; problems are announced as alerts.
+ */
+import { M } from '../../i18n/strings.ui.js';
+import { useI18n } from '../../i18n/use-i18n.js';
+import type { Dictation, DictationErrorKind } from './dictation.svelte.js';
+
+export interface Props {
+  /** The dictation session whose listening state and messages this shows. */
+  dictation: Dictation;
+  /** Extra class names. */
+  class?: string;
+}
+
+let { dictation, class: className = '' }: Props = $props();
+
+const { t } = useI18n();
+const showLine = $derived(
+  dictation.state === 'starting' ||
+    dictation.state === 'listening' ||
+    dictation.state === 'stopping' ||
+    dictation.state === 'transcribing',
+);
+
+function errorText(kind: DictationErrorKind | null): string {
+  switch (kind) {
+    case 'unsupported':
+      return t(M['ui.dictation.unsupported']);
+    case 'denied':
+      return t(M['ui.dictation.denied']);
+    case 'no-speech':
+      return t(M['ui.dictation.no_speech']);
+    case 'microphone':
+      return t(M['ui.dictation.microphone']);
+    case 'interrupted':
+      return t(M['ui.dictation.interrupted']);
+    case 'too-long':
+      return t(M['ui.dictation.too_long']);
+    case 'not-transcribed':
+      return t(M['ui.dictation.not_transcribed']);
+    case 'unavailable':
+      return t(M['ui.dictation.unavailable']);
+    case 'forbidden':
+      return t(M['ui.dictation.forbidden']);
+    default:
+      return t(M['ui.dictation.failed']);
+  }
+}
+</script>
+
+<div class={`smrt-dictation-status ${className}`.trim()}>
+  <p
+    class="smrt-dictation-status-line"
+    class:smrt-dictation-status--empty={!showLine}
+    role="status"
+    aria-live="polite"
+  >
+    {#if dictation.state === 'starting'}
+      {t(M['ui.dictation.starting'])}
+    {:else if dictation.state === 'listening' || dictation.state === 'stopping'}
+      <span class="smrt-dictation-status-dot" aria-hidden="true"></span>
+      {t(M['ui.dictation.listening'])}
+      {#if dictation.interim}
+        <span class="smrt-dictation-status-interim">“{dictation.interim}”</span>
+      {/if}
+    {:else if dictation.state === 'transcribing'}
+      <span class="smrt-dictation-status-spinner" aria-hidden="true"></span>
+      {t(M['ui.dictation.transcribing'])}
+    {/if}
+  </p>
+  <p
+    class="smrt-dictation-status-error"
+    class:smrt-dictation-status--empty={dictation.state !== 'error'}
+    role="alert"
+    data-dictation-error={dictation.state === 'error'
+      ? (dictation.errorCode ?? dictation.errorKind)
+      : undefined}
+  >
+    {#if dictation.state === 'error'}
+      {errorText(dictation.errorKind)}
+    {/if}
+  </p>
+</div>
+
+<style>
+  .smrt-dictation-status {
+    display: contents;
+  }
+
+  .smrt-dictation-status-line,
+  .smrt-dictation-status-error {
+    margin: 0;
+    font: var(--smrt-typography-body-small-font, 0.8125rem / 1.4 sans-serif);
+  }
+
+
+  .smrt-dictation-status-line {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 0.4rem;
+    padding: 0.25rem 0;
+    color: var(--smrt-color-on-surface, #1a1c1e);
+  }
+
+  /* Kept mounted while empty (live regions must exist before they speak),
+     but take no room. */
+  .smrt-dictation-status--empty {
+    position: absolute;
+    inline-size: 1px;
+    block-size: 1px;
+    overflow: hidden;
+    clip-path: inset(50%);
+    padding: 0;
+    white-space: nowrap;
+  }
+
+  .smrt-dictation-status-dot {
+    inline-size: 8px;
+    block-size: 8px;
+    border-radius: 50%;
+    background: var(--smrt-color-error, #ba1a1a);
+  }
+
+  .smrt-dictation-status-spinner {
+    inline-size: 12px;
+    block-size: 12px;
+    border-radius: 50%;
+    border: 2px solid var(--smrt-color-outline-variant, #c4c6cf);
+    border-block-start-color: var(--smrt-color-primary, #2f5ea8);
+    animation: smrt-dictation-spin 0.9s linear infinite;
+  }
+
+  @keyframes smrt-dictation-spin {
+    to {
+      transform: rotate(360deg);
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .smrt-dictation-status-spinner {
+      animation: none;
+    }
+  }
+
+  .smrt-dictation-status-interim {
+    color: var(--smrt-color-on-surface-variant, #43474e);
+    font-style: italic;
+  }
+
+  .smrt-dictation-status-error {
+    padding: 0.4rem 0.6rem;
+    border-radius: var(--smrt-radius-medium, 8px);
+    background: var(--smrt-color-error-container, #ffdad6);
+    color: var(--smrt-color-on-error-container, #410002);
+  }
+</style>

package/dist/components/forms/DictationStatus.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { Dictation } from './dictation.svelte.js';
+export interface Props {
+    /** The dictation session whose listening state and messages this shows. */
+    dictation: Dictation;
+    /** Extra class names. */
+    class?: string;
+}
+declare const DictationStatus: import("svelte").Component<Props, {}, "">;
+type DictationStatus = ReturnType<typeof DictationStatus>;
+export default DictationStatus;
+//# sourceMappingURL=DictationStatus.svelte.d.ts.map

package/dist/components/forms/DictationStatus.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DictationStatus.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/forms/DictationStatus.svelte.ts"],"names":[],"mappings":"AAcA,OAAO,KAAK,EAAE,SAAS,EAAsB,MAAM,uBAAuB,CAAC;AAG3E,MAAM,WAAW,KAAK;IACpB,2EAA2E;IAC3E,SAAS,EAAE,SAAS,CAAC;IACrB,yBAAyB;IACzB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAwED,QAAA,MAAM,eAAe,2CAAwC,CAAC;AAC9D,KAAK,eAAe,GAAG,UAAU,CAAC,OAAO,eAAe,CAAC,CAAC;AAC1D,eAAe,eAAe,CAAC"}