@happyvertical/smrt-ui 0.51.39 → 0.53.0

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

@@ -0,0 +1,354 @@
+import { fireEvent, render, screen } from '@testing-library/svelte';
+import userEvent from '@testing-library/user-event';
+import { tick } from 'svelte';
+import { describe, expect, it, vi } from 'vitest';
+import Combobox from '../Combobox.svelte';
+import { createControlInteractionRegistry, executeLocalControlCommand, } from '../control-interaction.js';
+import FormFixture from './combobox-form.fixture.svelte';
+import LabelsFixture from './combobox-labels.fixture.svelte';
+function data() {
+    return new FormData(screen.getByRole('form', { name: 'Order' }));
+}
+async function selectPlate() {
+    await userEvent.click(screen.getByRole('combobox', { name: 'SKU' }));
+    await userEvent.click(screen.getByRole('option', { name: 'Plate 1/4 A36' }));
+}
+describe('Combobox native form value', () => {
+    it('posts the selected value once, retaining it while searching', async () => {
+        render(FormFixture);
+        await selectPlate();
+        expect(data().getAll('sku')).toEqual(['42']);
+        const input = screen.getByRole('combobox', { name: 'SKU' });
+        expect(input).not.toHaveAttribute('name');
+        await userEvent.clear(input);
+        await userEvent.type(input, 'unselected search');
+        expect(data().getAll('sku')).toEqual(['42']);
+    });
+    it('posts keyboard-selected and custom values', async () => {
+        render(FormFixture, { props: { allowCustom: true } });
+        const input = screen.getByRole('combobox', { name: 'SKU' });
+        await userEvent.type(input, 'Plate');
+        await userEvent.keyboard('{Enter}');
+        expect(data().getAll('sku')).toEqual(['42']);
+        await userEvent.clear(input);
+        await userEvent.type(input, 'custom');
+        expect(data().getAll('sku')).toEqual(['custom']);
+    });
+    it('posts an empty named value and omits missing or empty names', async () => {
+        const { rerender } = render(FormFixture);
+        expect(data().getAll('sku')).toEqual(['']);
+        await rerender({ name: '' });
+        expect([...data()]).toEqual([]);
+        await rerender({ unnamed: true });
+        expect([...data()]).toEqual([]);
+    });
+    it.each([
+        { disabled: true },
+        { fieldsetDisabled: true },
+    ])('omits disabled values: %j', (props) => {
+        render(FormFixture, { props: { ...props, value: '42' } });
+        expect([...data()]).toEqual([]);
+    });
+    it('does not select disabled options', async () => {
+        render(FormFixture);
+        await userEvent.click(screen.getByRole('combobox', { name: 'SKU' }));
+        await userEvent.click(screen.getByRole('option', { name: 'Disabled plate' }));
+        expect(data().getAll('sku')).toEqual(['']);
+    });
+    it.each([
+        '',
+        '42',
+    ])('restores initial selection %j on native reset', async (value) => {
+        render(FormFixture, { props: { value, allowCustom: true } });
+        const input = screen.getByRole('combobox', { name: 'SKU' });
+        await userEvent.clear(input);
+        await userEvent.type(input, 'changed');
+        screen.getByRole('form', { name: 'Order' }).reset();
+        await settleReset();
+        expect(data().getAll('sku')).toEqual([value]);
+        expect(input).toHaveValue(value ? 'Plate 1/4 A36' : '');
+    });
+    it('preserves selection when reset is canceled', async () => {
+        render(FormFixture);
+        await selectPlate();
+        const form = screen.getByRole('form', { name: 'Order' });
+        form.addEventListener('reset', (event) => event.preventDefault());
+        await fireEvent.reset(form);
+        await settleReset();
+        expect(data().getAll('sku')).toEqual(['42']);
+    });
+    it('posts registry-applied values while preserving identity and staged isolation', async () => {
+        const registry = createControlInteractionRegistry({
+            isLocalGesture: () => true,
+        });
+        render(FormFixture, { props: { registry } });
+        await registry.execute({
+            action: 'stage',
+            identity: { formId: 'order', controlId: 'sku' },
+            value: '42',
+        }, { source: 'agent' });
+        expect(data().getAll('sku')).toEqual(['']);
+        await userEvent.click(screen.getByRole('button', { name: 'Apply valid changes' }));
+        expect(data().getAll('sku')).toEqual(['42']);
+        expect(registry.get({ formId: 'order', controlId: 'sku' })?.state.value).toBe('42');
+    });
+});
+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(LabelsFixture, {
+            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(LabelsFixture, {
+            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 settleReset();
+        expect(input).toHaveValue('');
+        expect(input).not.toHaveValue('12cd-uuid-ponoka');
+        await view.rerender({ options: towns, value: '12cd-uuid-ponoka' });
+        await settleReset();
+        expect(input).toHaveValue('Ponoka');
+    });
+    it('reopening after a choice lists every option, not only the current one', async () => {
+        render(LabelsFixture, { 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(LabelsFixture, {
+            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(LabelsFixture, {
+            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(LabelsFixture, {
+            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 settleReset();
+        expect(input.checkValidity()).toBe(false);
+    });
+});
+async function settleReset() {
+    await new Promise((resolve) => setTimeout(resolve));
+    await tick();
+}
+describe('Combobox deferred native reset', () => {
+    it('preserves a newer programmatic value before reset completion', async () => {
+        const target = document.createElement('form');
+        document.body.append(target);
+        const view = render(Combobox, {
+            target,
+            props: {
+                options: [
+                    { value: 42, label: 'Initial' },
+                    { value: 'other', label: 'Other' },
+                    { value: 'changed', label: 'Changed' },
+                ],
+                label: 'Choice',
+                name: 'choice',
+                value: '42',
+            },
+        });
+        await view.rerender({ value: 'changed' });
+        target.reset();
+        await view.rerender({ value: 'other' });
+        await settleReset();
+        expect(new FormData(target).getAll('choice')).toEqual(['other']);
+        await view.unmount();
+        target.remove();
+    });
+    it('cancels pending completion when unmounted', async () => {
+        const target = document.createElement('form');
+        document.body.append(target);
+        const onChange = vi.fn();
+        const view = render(Combobox, {
+            target,
+            props: {
+                options: [
+                    { value: 42, label: 'Initial' },
+                    { value: 'other', label: 'Other' },
+                    { value: 'changed', label: 'Changed' },
+                ],
+                label: 'Choice',
+                name: 'choice',
+                value: '42',
+                onvaluechange: onChange,
+            },
+        });
+        target.reset();
+        await view.unmount();
+        await settleReset();
+        expect(onChange).not.toHaveBeenCalled();
+        target.remove();
+    });
+});
+describe('Combobox reset listener ordering', () => {
+    it('honors cancellation from a later listener microtask', async () => {
+        const target = document.createElement('form');
+        document.body.append(target);
+        const onChange = vi.fn();
+        const view = render(Combobox, {
+            target,
+            props: {
+                options: [
+                    { value: 42, label: 'Initial' },
+                    { value: 'changed', label: 'Changed' },
+                ],
+                label: 'Choice',
+                name: 'choice',
+                value: '42',
+                onvaluechange: onChange,
+            },
+        });
+        await view.rerender({ value: 'changed' });
+        target.addEventListener('reset', (event) => {
+            queueMicrotask(() => event.preventDefault());
+        });
+        target.reset();
+        await settleReset();
+        expect(new FormData(target).getAll('choice')).toEqual(['changed']);
+        expect(onChange).not.toHaveBeenCalled();
+        await view.unmount();
+        target.remove();
+    });
+});
+function dispatchLocalCommand(registry, command) {
+    const target = new EventTarget();
+    let pending;
+    target.addEventListener('click', (event) => {
+        pending = executeLocalControlCommand(registry, command, event);
+    }, { once: true });
+    target.dispatchEvent(new Event('click'));
+    if (!pending)
+        throw new Error('local command handler did not run');
+    return pending;
+}
+describe('Combobox reset registry currency', () => {
+    it.each([
+        false,
+        true,
+    ])('keeps staged proposal currency correct when cancellation is %s', async (cancel) => {
+        const registry = createControlInteractionRegistry({
+            isLocalGesture: () => true,
+        });
+        render(FormFixture, {
+            props: { ...{ value: '42', allowCustom: true }, registry },
+        });
+        const identity = { formId: 'order', controlId: 'sku' };
+        const target = screen.getByRole('form', {
+            name: 'Order',
+        });
+        await userEvent.clear(screen.getByRole('combobox', { name: 'SKU' }));
+        await userEvent.type(screen.getByRole('combobox', { name: 'SKU' }), 'custom');
+        expect((await registry.execute({ action: 'stage', identity, value: '42' }, { source: 'agent' })).ok).toBe(true);
+        if (cancel)
+            target.addEventListener('reset', (event) => event.preventDefault());
+        target.reset();
+        await settleReset();
+        expect(registry.get(identity)?.state.staged?.stale).toBe(!cancel);
+        const applied = await dispatchLocalCommand(registry, {
+            action: 'apply',
+            identity,
+        });
+        expect(applied.ok).toBe(cancel);
+        if (!cancel) {
+            expect(applied.reason).toBe('staged_value_stale');
+            expect(new FormData(target).getAll('sku')).toEqual(['42']);
+        }
+    });
+    it.each([
+        false,
+        true,
+    ])('preserves reset over an async local clear when cancellation is %s', async (cancel) => {
+        let releasePolicy;
+        let policyStarted;
+        const blocked = new Promise((resolve) => {
+            releasePolicy = resolve;
+        });
+        const started = new Promise((resolve) => {
+            policyStarted = resolve;
+        });
+        const registry = createControlInteractionRegistry({
+            isLocalGesture: () => true,
+            policy: async (command) => {
+                if (command.action === 'clear') {
+                    policyStarted();
+                    await blocked;
+                }
+                return { allowed: true };
+            },
+        });
+        render(FormFixture, {
+            props: { ...{ value: '42', allowCustom: true }, registry },
+        });
+        const identity = { formId: 'order', controlId: 'sku' };
+        const target = screen.getByRole('form', {
+            name: 'Order',
+        });
+        await userEvent.clear(screen.getByRole('combobox', { name: 'SKU' }));
+        await userEvent.type(screen.getByRole('combobox', { name: 'SKU' }), 'custom');
+        const clearing = dispatchLocalCommand(registry, {
+            action: 'clear',
+            identity,
+        });
+        await started;
+        if (cancel)
+            target.addEventListener('reset', (event) => event.preventDefault());
+        target.reset();
+        await settleReset();
+        releasePolicy();
+        const result = await clearing;
+        await tick();
+        expect(result.ok).toBe(cancel);
+        if (!cancel)
+            expect(result.reason).toBe('staged_value_stale');
+        expect(new FormData(target).getAll('sku')).toEqual(cancel ? [''] : ['42']);
+    });
+});

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);
+    });
+});