@happyvertical/smrt-ui 0.51.39 → 0.52.0

package/dist/components/forms/StagedControlReview.svelte

@@ -83,18 +83,27 @@ function formatValue(value: unknown): string {
   }
 }
 
-function formatIdentity(snapshot: ControlSnapshot): string {
-  const { formId, controlId, subject } = snapshot.identity;
-  return subject
-    ? `${formId}/${controlId} · ${subject.type}:${subject.id}`
-    : `${formId}/${controlId}`;
+/**
+ * The words a person sees for a control: its label, or — for a control that
+ * registered none — its id made readable (`site_name` → "Site name"). The
+ * form id, subject type/id, and other registry addressing never show.
+ */
+function plainLabel(snapshot: ControlSnapshot): string {
+  const label = snapshot.metadata.label?.trim();
+  if (label) return label;
+  const tail = snapshot.identity.controlId.split('/').at(-1) ?? '';
+  const words = tail
+    .replace(/([a-z0-9])([A-Z])/g, '$1 $2')
+    .replace(/[-_.:]+/g, ' ')
+    .trim()
+    .toLowerCase();
+  return words ? words[0].toUpperCase() + words.slice(1) : tail;
 }
 
 function actionIdentity(snapshot: ControlSnapshot): string {
-  const label = snapshot.metadata.label ?? snapshot.identity.controlId;
+  const label = plainLabel(snapshot);
   const sameLabel = snapshots.filter(
-    (candidate) =>
-      (candidate.metadata.label ?? candidate.identity.controlId) === label,
+    (candidate) => plainLabel(candidate) === label,
   );
   if (sameLabel.length < 2) return label;
 
@@ -541,11 +550,11 @@ async function discardAll(event: MouseEvent): Promise<void> {
     <ul>
       {#each snapshots as snapshot (keyOf(snapshot))}
         {@const staged = snapshot.state.staged}
-        {@const label = snapshot.metadata.label ?? snapshot.identity.controlId}
+        {@const label = plainLabel(snapshot)}
         {@const actionName = actionIdentity(snapshot)}
         <li data-staged-review-item class:stale={staged?.stale} class:invalid={staged?.valid === false}>
           <div class="proposal-heading">
-            <div><strong>{label}</strong><code>{formatIdentity(snapshot)}</code></div>
+            <div><strong>{label}</strong>{#if snapshot.identity.subject?.label}<span class="subject">{snapshot.identity.subject.label}</span>{/if}</div>
             <span>{text.proposedBy} {staged?.provenance.actorId ?? staged?.provenance.source} · {text.stagedAt} {staged ? new Date(staged.stagedAt).toLocaleString() : ''}</span>
           </div>
           <dl>
@@ -620,8 +629,8 @@ async function discardAll(event: MouseEvent): Promise<void> {
   header, .proposal-heading, .batch-actions, .item-actions { display: flex; align-items: center; gap: var(--smrt-spacing-2, .5rem); }
   header { justify-content: space-between; align-items: flex-start; gap: var(--smrt-spacing-4, 1rem); }
   h2, p { margin: 0; } h2 { font: var(--smrt-typography-title-medium-font, 600 1rem/1.4 system-ui); }
-  header p, .proposal-heading span, .proposal-heading code, dt { color: var(--smrt-color-on-surface-variant, #475569); font-size: .875rem; }
-  .proposal-heading strong, .proposal-heading code { display: block; }
+  header p, .proposal-heading span, dt { color: var(--smrt-color-on-surface-variant, #475569); font-size: .875rem; }
+  .proposal-heading strong, .proposal-heading .subject { display: block; }
   ul { display: grid; gap: var(--smrt-spacing-3, .75rem); padding: 0; list-style: none; }
   li { padding: var(--smrt-spacing-3, .75rem); background: var(--smrt-color-surface, #fff); border: 1px solid var(--smrt-color-outline-variant, #cbd5e1); border-radius: var(--smrt-radius-small, .375rem); }
   li.stale, li.invalid { border-color: var(--smrt-color-error, #b3261e); }

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

@@ -1 +1 @@
-{"version":3,"file":"StagedControlReview.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/forms/StagedControlReview.svelte.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAEV,0BAA0B,EAE3B,MAAM,0BAA0B,CAAC;AAKlC,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,4BAA4B,CAAC;AAG5E,MAAM,WAAW,KAAK;IACpB,gEAAgE;IAChE,QAAQ,EAAE,0BAA0B,CAAC;IACrC,8CAA8C;IAC9C,MAAM,EAAE,MAAM,CAAC;IACf,mFAAmF;IACnF,WAAW,CAAC,EAAE,eAAe,GAAG,IAAI,CAAC;IACrC,2DAA2D;IAC3D,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,uDAAuD;IACvD,MAAM,CAAC,EAAE,OAAO,CAAC,yBAAyB,CAAC,CAAC;CAC7C;AAkkBD,QAAA,MAAM,mBAAmB,2CAAwC,CAAC;AAClE,KAAK,mBAAmB,GAAG,UAAU,CAAC,OAAO,mBAAmB,CAAC,CAAC;AAClE,eAAe,mBAAmB,CAAC"}
+{"version":3,"file":"StagedControlReview.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/forms/StagedControlReview.svelte.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAEV,0BAA0B,EAE3B,MAAM,0BAA0B,CAAC;AAKlC,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,4BAA4B,CAAC;AAG5E,MAAM,WAAW,KAAK;IACpB,gEAAgE;IAChE,QAAQ,EAAE,0BAA0B,CAAC;IACrC,8CAA8C;IAC9C,MAAM,EAAE,MAAM,CAAC;IACf,mFAAmF;IACnF,WAAW,CAAC,EAAE,eAAe,GAAG,IAAI,CAAC;IACrC,2DAA2D;IAC3D,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,uDAAuD;IACvD,MAAM,CAAC,EAAE,OAAO,CAAC,yBAAyB,CAAC,CAAC;CAC7C;AA2kBD,QAAA,MAAM,mBAAmB,2CAAwC,CAAC;AAClE,KAAK,mBAAmB,GAAG,UAAU,CAAC,OAAO,mBAAmB,CAAC,CAAC;AAClE,eAAe,mBAAmB,CAAC"}

package/dist/components/forms/Switch.svelte

@@ -113,25 +113,31 @@ useControlRegistration(() => {
 });
 </script>
 
-<label class="switch switch--{size} {className}" class:switch--disabled={disabled} data-smrt-control={controlId} data-smrt-form={interactionContext?.formId}
+<label class="switch switch--{size} {className}" class:switch--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}
   data-smrt-subject-id={resolvedInteraction === false ? undefined : resolvedInteraction.subject?.id}>
-  {#if label && labelPosition === 'left'}<span>{label}</span>{/if}
+  {#if label && labelPosition === 'left'}<span class="switch__label">{label}</span>{/if}
   <span class="switch__control">
     <input bind:this={inputEl} id={resolvedId} type="checkbox" role="switch" {name} {value} {disabled} {required} checked={checked}
       aria-label={ariaLabel ?? label ?? formGroup?.().label} aria-describedby={formGroup?.().describedBy}
       aria-invalid={formGroup?.().invalid ? 'true' : undefined} onchange={handleChange} {...rest} />
     <span class="switch__track" aria-hidden="true"><span class="switch__thumb"></span></span>
   </span>
-  {#if label && labelPosition === 'right'}<span>{label}</span>{/if}
+  {#if label && labelPosition === 'right'}<span class="switch__label">{label}</span>{/if}
 </label>
 
 <style>
   .switch { display: inline-flex; align-items: center; gap: var(--smrt-spacing-2, .5rem); cursor: pointer; color: var(--smrt-color-on-surface); }
   .switch--disabled { opacity: .5; cursor: not-allowed; }
-  .switch__control { position: relative; display: inline-flex; }
+  /* Phones: the whole row (track and label) is at least a 44px touch target. */
+  @media (max-width: 48rem) { .switch { min-block-size: 2.75rem; } }
+  /* The 2.75rem-wide track gets a transparent 44px-tall ::before hit area (see Checkbox); the
+     track and label sit above every hit area. --smrt-control-hit-size resizes it (0px = off). */
+  .switch__control { --_hit: max(var(--smrt-control-hit-size, 2.75rem), 1.5rem); position: relative; display: inline-flex; }
+  .switch__control::before { content: ''; position: absolute; z-index: 0; inset-block-start: 50%; inset-inline: calc((100% - var(--_hit)) / 2); block-size: var(--_hit); margin-block-start: calc(var(--_hit) / -2); }
+  .switch__label { position: relative; z-index: 1; }
   input { position: absolute; width: 1px; height: 1px; opacity: 0; }
-  .switch__track { width: 2.75rem; height: 1.5rem; padding: 2px; border-radius: var(--smrt-radius-full); background: var(--smrt-color-surface-container-highest); border: 1px solid var(--smrt-color-outline); transition: background var(--smrt-duration-short2); }
+  .switch__track { position: relative; z-index: 1; width: 2.75rem; height: 1.5rem; padding: 2px; border-radius: var(--smrt-radius-full); background: var(--smrt-color-surface-container-highest); border: 1px solid var(--smrt-color-outline); transition: background var(--smrt-duration-short2); }
   .switch__thumb { display: block; width: 1.125rem; height: 1.125rem; border-radius: 50%; background: var(--smrt-color-outline); transition: transform var(--smrt-duration-short2), background var(--smrt-duration-short2); }
   input:checked + .switch__track { background: var(--smrt-color-primary); border-color: var(--smrt-color-primary); }
   input:checked + .switch__track .switch__thumb { transform: translateX(1.25rem); background: var(--smrt-color-on-primary); }

package/dist/components/forms/TagsInput.svelte

@@ -139,6 +139,13 @@ useControlRegistration(() => {
   .tags-field { display: grid; gap: var(--smrt-spacing-1); color: var(--smrt-color-on-surface); } label { font: var(--smrt-typography-label-large-font); }
   .tags { display: flex; flex-wrap: wrap; gap: var(--smrt-spacing-1); min-height: 2.5rem; padding: var(--smrt-spacing-1); border: 1px solid var(--smrt-color-outline); border-radius: var(--smrt-radius-small); background: var(--smrt-color-surface); }
   .tag { display: inline-flex; align-items: center; gap: var(--smrt-spacing-1); padding: var(--smrt-spacing-1) var(--smrt-spacing-2); border-radius: var(--smrt-radius-full); background: var(--smrt-color-secondary-container); color: var(--smrt-color-on-secondary-container); }
-  .tag button { border: 0; background: transparent; color: inherit; cursor: pointer; } .tags > input { flex: 1; min-width: 8rem; border: 0; outline: 0; background: transparent; color: inherit; }
+  .tag button { display: inline-flex; align-items: center; justify-content: center; border: 0; background: transparent; color: inherit; cursor: pointer; }
+  /* Phones and touch screens: the × is a 44px target (the tag grows with it). */
+  @media (max-width: 48rem), (pointer: coarse) {
+    .tag { padding-inline-end: 0; }
+    .tag button { min-inline-size: 2.75rem; min-block-size: 2.75rem; font-size: 1.25rem; }
+  }
+  .tag button:focus-visible { outline: 2px solid var(--smrt-color-primary); outline-offset: -2px; border-radius: var(--smrt-radius-full); }
+  .tags > input { flex: 1; min-width: 8rem; border: 0; outline: 0; background: transparent; color: inherit; }
   :global(.tags[data-smrt-highlighted='true']) { outline: 3px solid var(--smrt-color-tertiary); outline-offset: 4px; }
 </style>

package/dist/components/forms/Textarea.svelte

@@ -181,6 +181,14 @@ export function getElement(): HTMLTextAreaElement | null {
 		color: var(--smrt-color-on-surface-variant, #9ca3af);
 	}
 
+	/* Phones: 16px text so iOS Safari doesn't zoom the page when the field
+	   gets focus. */
+	@media (max-width: 48rem) {
+		.textarea {
+			font-size: max(var(--smrt-typography-body-medium-size, 0.875rem), 16px);
+		}
+	}
+
 	@media (prefers-reduced-motion: reduce) {
 		.textarea {
 			transition: none;

package/dist/components/forms/__tests__/Combobox.test.js

@@ -0,0 +1,87 @@
+import { render, screen } from '@testing-library/svelte';
+import userEvent from '@testing-library/user-event';
+import { tick } from 'svelte';
+import { describe, expect, it } from 'vitest';
+import Fixture from './combobox-labels.fixture.svelte';
+const towns = [
+    { value: '0b9c-uuid-lacombe', label: 'Lacombe' },
+    { value: '77aa-uuid-blackfalds', label: 'Blackfalds' },
+    { value: '12cd-uuid-ponoka', label: 'Ponoka' },
+];
+describe('Combobox labels and reopening', () => {
+    it('shows the option label on first render, never the raw id', () => {
+        render(Fixture, {
+            props: { options: towns, value: '77aa-uuid-blackfalds' },
+        });
+        expect(screen.getByRole('combobox', { name: 'Town' })).toHaveValue('Blackfalds');
+    });
+    it('shows valueLabel (or nothing) until async options arrive, then the label', async () => {
+        const view = render(Fixture, {
+            props: { options: [], value: '12cd-uuid-ponoka', valueLabel: 'Ponoka' },
+        });
+        const input = screen.getByRole('combobox', { name: 'Town' });
+        expect(input).toHaveValue('Ponoka');
+        await view.rerender({
+            options: [],
+            value: '12cd-uuid-ponoka',
+            valueLabel: undefined,
+        });
+        await tick();
+        expect(input).toHaveValue('');
+        expect(input).not.toHaveValue('12cd-uuid-ponoka');
+        await view.rerender({ options: towns, value: '12cd-uuid-ponoka' });
+        await tick();
+        expect(input).toHaveValue('Ponoka');
+    });
+    it('reopening after a choice lists every option, not only the current one', async () => {
+        render(Fixture, { props: { options: towns, value: '' } });
+        const input = screen.getByRole('combobox', { name: 'Town' });
+        await userEvent.type(input, 'lacom');
+        expect(screen.getAllByRole('option')).toHaveLength(1);
+        await userEvent.click(screen.getByRole('option', { name: 'Lacombe' }));
+        expect(screen.getByTestId('value')).toHaveTextContent('0b9c-uuid-lacombe');
+        expect(input).toHaveValue('Lacombe');
+        await userEvent.click(document.body);
+        await userEvent.click(input);
+        expect(screen.getAllByRole('option')).toHaveLength(3);
+        expect(screen.getByRole('option', { name: 'Lacombe' })).toHaveAttribute('aria-selected', 'true');
+    });
+    it('puts the chosen label back when the person leaves without choosing', async () => {
+        render(Fixture, {
+            props: { options: towns, value: '77aa-uuid-blackfalds' },
+        });
+        const input = screen.getByRole('combobox', { name: 'Town' });
+        await userEvent.clear(input);
+        await userEvent.type(input, 'pon');
+        await userEvent.keyboard('{Escape}');
+        expect(input).toHaveValue('Blackfalds');
+        expect(screen.getByTestId('value')).toHaveTextContent('77aa-uuid-blackfalds');
+    });
+    it('posts the committed id under its name, not the visible label', async () => {
+        const { container } = render(Fixture, {
+            props: { options: towns, value: '77aa-uuid-blackfalds' },
+        });
+        const input = screen.getByRole('combobox', { name: 'Town' });
+        expect(input).not.toHaveAttribute('name');
+        const posted = container.querySelectorAll('input[name="town"]');
+        expect(posted).toHaveLength(1);
+        expect(posted[0]).toHaveValue('77aa-uuid-blackfalds');
+        await userEvent.click(input);
+        await userEvent.click(screen.getByRole('option', { name: 'Ponoka' }));
+        expect(container.querySelector('input[name="town"]')).toHaveValue('12cd-uuid-ponoka');
+    });
+    it('a required combobox is valid while its value is committed, even before its option loads', async () => {
+        const view = render(Fixture, {
+            props: { options: [], value: '12cd-uuid-ponoka', required: true },
+        });
+        const input = screen.getByRole('combobox', {
+            name: 'Town',
+        });
+        expect(input).toHaveValue('');
+        expect(input.checkValidity()).toBe(true);
+        expect(input).toHaveAttribute('aria-required', 'true');
+        await view.rerender({ options: towns, value: '', required: true });
+        await tick();
+        expect(input.checkValidity()).toBe(false);
+    });
+});

package/dist/components/forms/__tests__/ControlHitArea.test.js

@@ -0,0 +1,73 @@
+/**
+ * Checkbox, Radio and Switch carry an invisible 44x44 hit area around the
+ * visible control. jsdom does no layout, so the geometry is asserted against
+ * the component source (the contract) and the click behavior against the DOM;
+ * the measured result is verified in a real browser.
+ */
+import { readFileSync } from 'node:fs';
+import { dirname, resolve } from 'node:path';
+import { fileURLToPath } from 'node:url';
+import { render, screen } from '@testing-library/svelte';
+import userEvent from '@testing-library/user-event';
+import { describe, expect, it } from 'vitest';
+import Checkbox from '../Checkbox.svelte';
+import Switch from '../Switch.svelte';
+const here = dirname(fileURLToPath(import.meta.url));
+const source = (name) => readFileSync(resolve(here, '..', `${name}.svelte`), 'utf8');
+describe.each(['Checkbox', 'Radio', 'Switch'])('%s hit area', (name) => {
+    const css = source(name).slice(source(name).indexOf('<style>'));
+    it('draws a 44px (2.75rem) transparent ::before target that adds no layout', () => {
+        expect(css).toContain('--smrt-control-hit-size, 2.75rem');
+        expect(css).toMatch(/::before \{[^}]*position: absolute/);
+        expect(css).toMatch(/::before \{[^}]*content: ''/);
+    });
+    it('keeps the visible control and its label above every hit area', () => {
+        expect(css).toMatch(/__(box|mark|track)[^{]*\{[^}]*z-index: 1/);
+        expect(css).toMatch(/__label[^{]*\{[^}]*z-index: 1/);
+    });
+});
+describe.each(['Checkbox', 'Radio'])('%s in table cells', (name) => {
+    it('never grows horizontally out of the cell', () => {
+        expect(source(name)).toMatch(/:global\(:is\(td, th\)\) \.(checkbox|radio)::before \{ inline-size: var\(--_box\)/);
+    });
+});
+describe.each(['Checkbox', 'Radio'])('%s beside other content', (name) => {
+    it('keeps to its own column unless it stands alone, so it never covers a neighbouring link or text', () => {
+        expect(source(name)).toMatch(/\.(checkbox|radio):not\(:only-child\)::before \{ inline-size: var\(--_box\); margin-inline-start: calc\(var\(--_box\) \/ -2\)/);
+    });
+});
+describe('Checkbox table cell fill', () => {
+    it('uses the whole cell, clipped to it, when the checkbox is its only content', () => {
+        const css = source('Checkbox');
+        expect(css).toContain('> [data-smrt-hit-target]:only-child');
+        expect(css).toMatch(/::before \{ inset: 0;/);
+    });
+    it('positions the cell at zero specificity, so sticky headers and pinned cells keep theirs', () => {
+        const css = source('Checkbox');
+        expect(css).toContain(':global(:where(td:has(> [data-smrt-hit-target]:only-child), th:has(> [data-smrt-hit-target]:only-child))) { position: relative; }');
+        expect(css).not.toMatch(/:global\(:is\(td, th\):has\([^)]*\)\)\) \{ position: relative/);
+    });
+});
+describe('hit area behavior', () => {
+    it('Checkbox toggles from a click on its label element', async () => {
+        const user = userEvent.setup();
+        const { container } = render(Checkbox, { props: { label: 'Accept' } });
+        expect(container.querySelector('label')).toHaveAttribute('data-smrt-hit-target');
+        await user.click(container.querySelector('label'));
+        expect(screen.getByRole('checkbox', { name: 'Accept' })).toBeChecked();
+    });
+    it('Checkbox without text keeps the label as the click target', async () => {
+        const user = userEvent.setup();
+        const { container } = render(Checkbox, {
+            props: { 'aria-label': 'Select row' },
+        });
+        await user.click(container.querySelector('label'));
+        expect(screen.getByRole('checkbox', { name: 'Select row' })).toBeChecked();
+    });
+    it('Switch toggles from a click on its label element', async () => {
+        const user = userEvent.setup();
+        const { container } = render(Switch, { props: { label: 'Alerts' } });
+        await user.click(container.querySelector('label'));
+        expect(screen.getByRole('switch', { name: 'Alerts' })).toBeChecked();
+    });
+});

package/dist/components/forms/__tests__/DictationButton.test.js

@@ -0,0 +1,176 @@
+/**
+ * DictationButton + DictationStatus: a named 44px mic toggle with
+ * aria-pressed, and plain-words status for listening and each error.
+ */
+import { render, screen } from '@testing-library/svelte';
+import userEvent from '@testing-library/user-event';
+import { flushSync } from 'svelte';
+import { describe, expect, it, vi } from 'vitest';
+import { expectNoA11yViolations } from '../../../test-support/a11y';
+import { DictationError } from '../audio-capture.js';
+import DictationButton from '../DictationButton.svelte';
+import DictationStatus from '../DictationStatus.svelte';
+import { Dictation } from '../dictation.svelte.js';
+function quietSource() {
+    const ends = new Set();
+    return {
+        start: async () => { },
+        stop: async () => {
+            for (const cb of ends)
+                cb();
+        },
+        onResult: () => () => { },
+        onError: () => () => { },
+        onEnd: (cb) => (ends.add(cb), () => ends.delete(cb)),
+    };
+}
+describe('DictationButton', () => {
+    it('toggles listening with a name that follows the state', async () => {
+        const dictation = new Dictation({
+            source: quietSource,
+            onText: () => { },
+            beep: false,
+        });
+        const { container } = render(DictationButton, { props: { dictation } });
+        const button = screen.getByRole('button', {
+            name: 'Speak instead of typing',
+        });
+        expect(button).toHaveAttribute('aria-pressed', 'false');
+        await expectNoA11yViolations(container);
+        await userEvent.click(button);
+        await vi.waitFor(() => expect(dictation.state).toBe('listening'));
+        flushSync();
+        const stop = screen.getByRole('button', { name: 'Stop listening' });
+        expect(stop).toHaveAttribute('aria-pressed', 'true');
+        await userEvent.click(stop);
+        await vi.waitFor(() => expect(dictation.state).toBe('idle'));
+    });
+});
+describe('DictationButton — one click, one toggle', () => {
+    it('a single click starts once and does not stop again', async () => {
+        const start = vi.fn(async () => { });
+        const stop = vi.fn(async () => { });
+        const source = {
+            start,
+            stop,
+            onResult: () => () => { },
+            onError: () => () => { },
+            onEnd: () => () => { },
+        };
+        const dictation = new Dictation({
+            source: () => source,
+            onText: () => { },
+            beep: false,
+        });
+        render(DictationButton, { props: { dictation } });
+        // userEvent.click sends pointerdown, pointerup and click.
+        await userEvent.click(screen.getByRole('button', { name: 'Speak instead of typing' }));
+        await vi.waitFor(() => expect(dictation.state).toBe('listening'));
+        expect(start).toHaveBeenCalledTimes(1);
+        expect(stop).not.toHaveBeenCalled();
+    });
+});
+describe('DictationStatus', () => {
+    function erroringSource(code) {
+        const errors = new Set();
+        return {
+            start: async () => {
+                queueMicrotask(() => {
+                    for (const cb of errors)
+                        cb(Object.assign(new Error(code), { speechError: code }));
+                });
+            },
+            stop: async () => { },
+            onResult: () => () => { },
+            onError: (cb) => (errors.add(cb), () => errors.delete(cb)),
+            onEnd: () => () => { },
+        };
+    }
+    it.each([
+        [
+            'network',
+            "Speech recognition isn't available in this browser. Brave blocks it",
+        ],
+        [
+            'service-not-allowed',
+            "Speech recognition isn't available in this browser",
+        ],
+        ['not-allowed', 'The microphone is blocked'],
+        ['no-speech', "Didn't hear anything. Tap the mic and try again."],
+        ['audio-capture', "Couldn't use the microphone"],
+        ['aborted', 'Listening stopped straight away'],
+    ])('shows a plain message for %s instead of "Listening"', async (code, text) => {
+        const source = erroringSource(code);
+        const dictation = new Dictation({
+            source: () => source,
+            onText: () => { },
+            beep: false,
+            log: () => { },
+        });
+        const { container } = render(DictationStatus, { props: { dictation } });
+        await dictation.start();
+        await vi.waitFor(() => expect(dictation.state).toBe('error'));
+        flushSync();
+        expect(screen.getByRole('alert')).toHaveTextContent(text);
+        expect(screen.getByRole('alert')).toHaveAttribute('data-dictation-error', code);
+        expect(screen.getByRole('status')).not.toHaveTextContent('Listening');
+        expect(container.querySelector('[data-dictation-error]')).not.toBeNull();
+    });
+    it('says it is listening, then explains a blocked microphone', async () => {
+        const dictation = new Dictation({
+            source: quietSource,
+            onText: () => { },
+            beep: false,
+        });
+        render(DictationStatus, { props: { dictation } });
+        await dictation.start();
+        flushSync();
+        expect(screen.getByRole('status')).toHaveTextContent('Listening. Tap the microphone when you are done.');
+        const blocked = new Dictation({ source: null, onText: () => { } });
+        render(DictationStatus, { props: { dictation: blocked } });
+        await blocked.start();
+        flushSync();
+        expect(screen.getAllByRole('alert').at(-1)).toHaveTextContent("Speech recognition isn't available in this browser");
+    });
+});
+describe('Dictation recording fallback in words', () => {
+    it('says "Writing it down…" while a recording is written down, then explains a failure', async () => {
+        let finish;
+        const dictation = new Dictation({
+            onText: () => { },
+            beep: false,
+            log: () => { },
+            capture: () => ({
+                start: async () => { },
+                stop: async () => ({
+                    audio: new Blob(['x'], { type: 'audio/webm' }),
+                    mimeType: 'audio/webm',
+                    durationMs: 1000,
+                    reachedTimeLimit: false,
+                }),
+                cancel: () => { },
+                onLimit: () => () => { },
+            }),
+            transcribe: () => new Promise((_resolve, reject) => (finish = reject)),
+        });
+        const { container } = render(DictationStatus, { props: { dictation } });
+        render(DictationButton, { props: { dictation } });
+        await dictation.start();
+        flushSync();
+        expect(screen.getByRole('status')).toHaveTextContent('Listening');
+        void dictation.stop();
+        await vi.waitFor(() => expect(finish).toBeTypeOf('function'));
+        flushSync();
+        expect(screen.getByRole('status')).toHaveTextContent('Writing it down…');
+        const button = screen.getByRole('button', {
+            name: 'Speak instead of typing',
+        });
+        expect(button).toBeDisabled();
+        expect(button).toHaveAttribute('aria-busy', 'true');
+        await expectNoA11yViolations(container);
+        finish(new DictationError('unavailable', 'not set up'));
+        await vi.waitFor(() => expect(dictation.state).toBe('error'));
+        flushSync();
+        expect(screen.getByRole('alert')).toHaveTextContent("Speaking isn't set up here yet. Please type instead.");
+    });
+});

package/dist/components/forms/__tests__/Fieldset.test.js

@@ -0,0 +1,37 @@
+import { render, screen } from '@testing-library/svelte';
+import { createRawSnippet } from 'svelte';
+import { describe, expect, it } from 'vitest';
+import { expectNoA11yViolations } from '../../../test-support/a11y';
+import Fieldset from '../Fieldset.svelte';
+const fields = createRawSnippet(() => ({
+    render: () => '<label>Headline <input name="headline" /></label>',
+}));
+describe('Fieldset', () => {
+    it('is a group named by its legend', () => {
+        render(Fieldset, { props: { legend: 'The ad', children: fields } });
+        expect(screen.getByRole('group', { name: 'The ad' })).toBeInTheDocument();
+    });
+    it('flows its content unless asked to stack it', () => {
+        const { container } = render(Fieldset, {
+            props: { legend: 'The ad', children: fields },
+        });
+        expect(container.querySelector('.content--stack')).toBeNull();
+    });
+    it('stacks its fields in one column with a gap when asked', () => {
+        const { container } = render(Fieldset, {
+            props: { legend: 'The ad', stack: true, children: fields },
+        });
+        expect(container.querySelector('.content.content--stack')).not.toBeNull();
+    });
+    it('is axe-clean', async () => {
+        const { container } = render(Fieldset, {
+            props: {
+                legend: 'The ad',
+                description: 'Shown to readers',
+                stack: true,
+                children: fields,
+            },
+        });
+        await expectNoA11yViolations(container);
+    });
+});

package/dist/components/forms/__tests__/FormActionBar.test.js

@@ -0,0 +1,22 @@
+import { render, screen } from '@testing-library/svelte';
+import { createRawSnippet } from 'svelte';
+import { describe, expect, it } from 'vitest';
+import FormActionBar from '../FormActionBar.svelte';
+const actions = createRawSnippet(() => ({
+    render: () => '<span><button type="button">Cancel</button><button type="submit">Publish</button></span>',
+}));
+describe('FormActionBar', () => {
+    it('is a labelled group carrying the shell contract attribute', () => {
+        render(FormActionBar, {
+            props: { label: 'Video actions', children: actions },
+        });
+        const group = screen.getByRole('group', { name: 'Video actions' });
+        expect(group.hasAttribute('data-form-action-bar')).toBe(true);
+        expect(screen.getByRole('button', { name: 'Publish' })).toBeInTheDocument();
+    });
+    it('defaults its accessible name and supports the plain variant', () => {
+        render(FormActionBar, { props: { plain: true, children: actions } });
+        const group = screen.getByRole('group', { name: 'Form actions' });
+        expect(group.classList.contains('plain')).toBe(true);
+    });
+});

package/dist/components/forms/__tests__/SearchInput.test.js

@@ -0,0 +1,92 @@
+import { render, screen } from '@testing-library/svelte';
+import userEvent from '@testing-library/user-event';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { expectNoA11yViolations } from '../../../test-support/a11y';
+import SearchInput from '../SearchInput.svelte';
+describe('SearchInput', () => {
+    beforeEach(() => vi.useFakeTimers({ shouldAdvanceTime: true }));
+    afterEach(() => vi.useRealTimers());
+    it('is a labelled search field in a search landmark', () => {
+        render(SearchInput, {
+            props: { value: '', onsearch: vi.fn(), placeholder: 'Search by title' },
+        });
+        expect(screen.getByRole('search')).toBeInTheDocument();
+        expect(screen.getByRole('searchbox', { name: 'Search' })).toHaveAttribute('placeholder', 'Search by title');
+    });
+    it('searches once, trimmed and single-line, after the last key', async () => {
+        const onsearch = vi.fn();
+        const user = userEvent.setup({ advanceTimers: vi.advanceTimersByTime });
+        render(SearchInput, { props: { value: '', onsearch, debounceMs: 300 } });
+        await user.type(screen.getByRole('searchbox'), '  council   hall ');
+        expect(onsearch).not.toHaveBeenCalled();
+        vi.advanceTimersByTime(300);
+        expect(onsearch).toHaveBeenCalledTimes(1);
+        expect(onsearch).toHaveBeenCalledWith('council hall');
+    });
+    it('searches at once on Enter', async () => {
+        const onsearch = vi.fn();
+        const user = userEvent.setup({ advanceTimers: vi.advanceTimersByTime });
+        render(SearchInput, { props: { value: '', onsearch } });
+        await user.type(screen.getByRole('searchbox'), 'roads{Enter}');
+        expect(onsearch).toHaveBeenCalledWith('roads');
+    });
+    it('does not search for the search it is already showing', async () => {
+        const onsearch = vi.fn();
+        const user = userEvent.setup({ advanceTimers: vi.advanceTimersByTime });
+        render(SearchInput, { props: { value: 'roads', onsearch } });
+        await user.type(screen.getByRole('searchbox'), '{Enter}');
+        expect(onsearch).not.toHaveBeenCalled();
+    });
+    it('clears with the x and focuses the field', async () => {
+        const onsearch = vi.fn();
+        const user = userEvent.setup({ advanceTimers: vi.advanceTimersByTime });
+        render(SearchInput, { props: { value: 'roads', onsearch } });
+        const field = screen.getByRole('searchbox');
+        expect(field).toHaveValue('roads');
+        await user.click(screen.getByRole('button', { name: 'Clear search' }));
+        expect(onsearch).toHaveBeenCalledWith('');
+        expect(field).toHaveValue('');
+        expect(field).toHaveFocus();
+        expect(screen.queryByRole('button', { name: 'Clear search' })).toBeNull();
+    });
+    it('follows the applied search when it changes from outside', async () => {
+        const { rerender } = render(SearchInput, {
+            props: { value: 'roads', onsearch: vi.fn() },
+        });
+        await rerender({ value: 'parks', onsearch: vi.fn() });
+        expect(screen.getByRole('searchbox')).toHaveValue('parks');
+    });
+    it('inside a host form, Enter searches and never submits the host form', async () => {
+        const onsearch = vi.fn();
+        const onsubmit = vi.fn((event) => event.preventDefault());
+        const user = userEvent.setup({ advanceTimers: vi.advanceTimersByTime });
+        const host = document.createElement('form');
+        host.addEventListener('submit', onsubmit);
+        document.body.append(host);
+        render(SearchInput, { target: host, props: { value: '', onsearch } });
+        expect(host.querySelector('form')).toBeNull();
+        await user.type(screen.getByRole('searchbox'), 'roads{Enter}');
+        expect(onsearch).toHaveBeenCalledWith('roads');
+        expect(onsubmit).not.toHaveBeenCalled();
+        host.remove();
+    });
+    it('a value the host normalized differently does not swallow a later one', async () => {
+        const onsearch = vi.fn();
+        const user = userEvent.setup({ advanceTimers: vi.advanceTimersByTime });
+        const view = render(SearchInput, { props: { value: '', onsearch } });
+        await user.type(screen.getByRole('searchbox'), 'Roads{Enter}');
+        expect(onsearch).toHaveBeenCalledWith('Roads');
+        // The host applies its own normalization, then later navigates to the
+        // exact text the box once sent: the box must follow both.
+        await view.rerender({ value: 'roads', onsearch });
+        expect(screen.getByRole('searchbox')).toHaveValue('roads');
+        await view.rerender({ value: 'Roads', onsearch });
+        expect(screen.getByRole('searchbox')).toHaveValue('Roads');
+    });
+    it('is axe-clean', async () => {
+        const { container } = render(SearchInput, {
+            props: { value: 'roads', onsearch: vi.fn() },
+        });
+        await expectNoA11yViolations(container);
+    });
+});