@happyvertical/smrt-svelte 0.30.0

package/dist/components/forms/__tests__/MeasurementInput.behavior.test.js

@@ -0,0 +1,129 @@
+/**
+ * Behavior tests for MeasurementInput (Sweep S11, #1416).
+ *
+ * Exercises numeric value parsing, the unit <select>, real unit conversion on
+ * unit change, the emitted MeasurementValue shape, and min/max validation. The
+ * hooks throw outside a <Provider>, so useAppState is mocked to 'default' mode.
+ */
+import { expectNoA11yViolations } from '@happyvertical/smrt-ui/test-support/a11y';
+import { render, screen } from '@testing-library/svelte';
+import userEvent from '@testing-library/user-event';
+import { describe, expect, it, vi } from 'vitest';
+vi.mock('../../../hooks/useAppState.svelte.js', () => ({
+    useAppState: () => ({ state: { mode: 'default' }, setMode: vi.fn() }),
+}));
+import MeasurementInput from '../MeasurementInput.svelte';
+describe('MeasurementInput — behavior', () => {
+    it('typing a number emits { value, unit } via onchange', async () => {
+        const onchange = vi.fn();
+        render(MeasurementInput, {
+            props: { name: 'len', label: 'Length', onchange },
+        });
+        await userEvent.type(screen.getByLabelText('Length'), '12');
+        expect(onchange).toHaveBeenLastCalledWith({ value: 12, unit: 'ft' });
+    });
+    it('clearing the value emits null', async () => {
+        const onchange = vi.fn();
+        render(MeasurementInput, {
+            props: { name: 'len', label: 'Length', value: 5, onchange },
+        });
+        await userEvent.clear(screen.getByLabelText('Length'));
+        expect(onchange).toHaveBeenLastCalledWith(null);
+    });
+    it('renders the available units as <option>s with abbreviation + label', () => {
+        render(MeasurementInput, {
+            props: { name: 'len', label: 'Length', units: ['ft', 'm'] },
+        });
+        const select = screen.getByLabelText('Length unit');
+        const options = Array.from(select.querySelectorAll('option'));
+        expect(options.map((o) => o.value)).toEqual(['ft', 'm']);
+        expect(options[0].textContent).toContain('ft (Feet)');
+        expect(options[1].textContent).toContain('m (Meters)');
+    });
+    it('changing the unit converts the value to the new unit', async () => {
+        const onchange = vi.fn();
+        render(MeasurementInput, {
+            props: {
+                name: 'len',
+                label: 'Length',
+                value: 1,
+                unit: 'ft',
+                units: ['ft', 'in'],
+                onchange,
+            },
+        });
+        // 1 ft -> 12 in (rounded to 4 decimals)
+        await userEvent.selectOptions(screen.getByLabelText('Length unit'), 'in');
+        expect(onchange).toHaveBeenLastCalledWith({ value: 12, unit: 'in' });
+    });
+    it('1 m converts to 100 cm on unit change', async () => {
+        const onchange = vi.fn();
+        render(MeasurementInput, {
+            props: {
+                name: 'len',
+                label: 'Length',
+                value: 1,
+                unit: 'm',
+                units: ['m', 'cm'],
+                onchange,
+            },
+        });
+        await userEvent.selectOptions(screen.getByLabelText('Length unit'), 'cm');
+        expect(onchange).toHaveBeenLastCalledWith({ value: 100, unit: 'cm' });
+    });
+    it('changing the unit with no value just switches the unit (no onchange)', async () => {
+        const onchange = vi.fn();
+        render(MeasurementInput, {
+            props: {
+                name: 'len',
+                label: 'Length',
+                units: ['ft', 'm'],
+                onchange,
+            },
+        });
+        await userEvent.selectOptions(screen.getByLabelText('Length unit'), 'm');
+        expect(onchange).not.toHaveBeenCalled();
+        expect(screen.getByLabelText('Length unit')).toHaveValue('m');
+    });
+    it('writes a combined "value unit" string into the hidden input', async () => {
+        const { container } = render(MeasurementInput, {
+            props: { name: 'len', label: 'Length', units: ['ft'] },
+        });
+        await userEvent.type(screen.getByLabelText('Length'), '3');
+        const hidden = container.querySelector('input[type="hidden"][name="len_combined"]');
+        expect(hidden).toHaveValue('3 ft');
+    });
+    it('flags below-min with a linked error citing the unit abbreviation', () => {
+        render(MeasurementInput, {
+            props: { name: 'len', label: 'Length', min: 10, value: 5, unit: 'ft' },
+        });
+        const input = screen.getByLabelText('Length');
+        expect(input).toHaveAttribute('aria-invalid', 'true');
+        expect(input).toHaveAttribute('aria-describedby', 'len-error');
+        const err = document.getElementById('len-error');
+        expect(err).toHaveAttribute('role', 'alert');
+        expect(err?.textContent).toContain('10');
+        expect(err?.textContent).toContain('ft');
+    });
+    it('flags above-max as invalid', () => {
+        render(MeasurementInput, {
+            props: { name: 'len', label: 'Length', max: 10, value: 50, unit: 'm' },
+        });
+        expect(screen.getByLabelText('Length')).toHaveAttribute('aria-invalid', 'true');
+        expect(document.getElementById('len-error')?.textContent).toContain('10');
+    });
+    it('an in-range value is valid (no error)', () => {
+        render(MeasurementInput, {
+            props: { name: 'len', label: 'Length', min: 0, max: 100, value: 5 },
+        });
+        const input = screen.getByLabelText('Length');
+        expect(input).not.toHaveAttribute('aria-invalid');
+        expect(document.getElementById('len-error')).toBeNull();
+    });
+    it('is axe-clean in a labelled + error state', async () => {
+        const { container } = render(MeasurementInput, {
+            props: { name: 'len', label: 'Length', error: 'Required', value: 5 },
+        });
+        await expectNoA11yViolations(container);
+    });
+});

package/dist/components/forms/__tests__/MoneyInput.behavior.test.js

@@ -0,0 +1,124 @@
+/**
+ * Behavior tests for MoneyInput (Sweep S11, #1416).
+ *
+ * Exercises the cents<->display formatting, parsing, currency symbol/code,
+ * negative/decimal handling, blur reformatting, and min/max range validation
+ * — the logic the shallow a11y suite never touches. The hooks throw outside a
+ * <Provider>, so useAppState is mocked to non-smrt ('default') mode.
+ */
+import { expectNoA11yViolations } from '@happyvertical/smrt-ui/test-support/a11y';
+import { render, screen } from '@testing-library/svelte';
+import userEvent from '@testing-library/user-event';
+import { describe, expect, it, vi } from 'vitest';
+vi.mock('../../../hooks/useAppState.svelte.js', () => ({
+    useAppState: () => ({ state: { mode: 'default' }, setMode: vi.fn() }),
+}));
+import MoneyInput from '../MoneyInput.svelte';
+describe('MoneyInput — behavior', () => {
+    it('renders an existing cents value as a 2-decimal dollar string', () => {
+        render(MoneyInput, {
+            props: { name: 'price', label: 'Price', value: 15000 },
+        });
+        expect(screen.getByLabelText('Price')).toHaveValue('150.00');
+    });
+    it('typing dollars emits the parsed value in cents via onchange', async () => {
+        const onchange = vi.fn();
+        render(MoneyInput, { props: { name: 'price', label: 'Price', onchange } });
+        const input = screen.getByLabelText('Price');
+        await userEvent.type(input, '12.34');
+        expect(onchange).toHaveBeenLastCalledWith(1234);
+    });
+    it('strips $ and comma noise when parsing', async () => {
+        const onchange = vi.fn();
+        render(MoneyInput, { props: { name: 'price', label: 'Price', onchange } });
+        await userEvent.type(screen.getByLabelText('Price'), '$1,200');
+        expect(onchange).toHaveBeenLastCalledWith(120000);
+    });
+    it('clearing the input emits null', async () => {
+        const onchange = vi.fn();
+        render(MoneyInput, {
+            props: { name: 'price', label: 'Price', value: 5000, onchange },
+        });
+        const input = screen.getByLabelText('Price');
+        await userEvent.clear(input);
+        expect(onchange).toHaveBeenLastCalledWith(null);
+    });
+    it('reformats the display to 2 decimals on blur', async () => {
+        render(MoneyInput, { props: { name: 'price', label: 'Price' } });
+        const input = screen.getByLabelText('Price');
+        await userEvent.type(input, '5');
+        expect(input).toHaveValue('5'); // not reformatted while focused
+        await userEvent.tab();
+        expect(input).toHaveValue('5.00'); // reformatted on blur
+    });
+    it('shows CA$ symbol and CAD code by default', () => {
+        const { container } = render(MoneyInput, {
+            props: { name: 'price', label: 'Price' },
+        });
+        expect(container.querySelector('.currency-symbol')?.textContent).toBe('CA$');
+        expect(container.querySelector('.currency-code')?.textContent).toBe('CAD');
+    });
+    it('shows US$ symbol and USD code when currency=USD', () => {
+        const { container } = render(MoneyInput, {
+            props: { name: 'price', label: 'Price', currency: 'USD' },
+        });
+        expect(container.querySelector('.currency-symbol')?.textContent).toBe('US$');
+        expect(container.querySelector('.currency-code')?.textContent).toBe('USD');
+    });
+    it('writes the cents value into the hidden submission input', async () => {
+        const { container } = render(MoneyInput, {
+            props: { name: 'price', label: 'Price' },
+        });
+        await userEvent.type(screen.getByLabelText('Price'), '7.50');
+        const hidden = container.querySelector('input[type="hidden"][name="price_cents"]');
+        expect(hidden).toHaveValue('750');
+    });
+    it('flags below-min as invalid with a linked error message', () => {
+        render(MoneyInput, {
+            props: { name: 'price', label: 'Price', min: 10000, value: 5000 },
+        });
+        const input = screen.getByLabelText('Price');
+        expect(input).toHaveAttribute('aria-invalid', 'true');
+        expect(input).toHaveAttribute('aria-describedby', 'price-error');
+        const err = document.getElementById('price-error');
+        expect(err).toHaveAttribute('role', 'alert');
+        // CA$ symbol + 2-decimal min ($100.00)
+        expect(err?.textContent).toContain('CA$100.00');
+    });
+    it('flags above-max as invalid', () => {
+        render(MoneyInput, {
+            props: { name: 'price', label: 'Price', max: 10000, value: 20000 },
+        });
+        const input = screen.getByLabelText('Price');
+        expect(input).toHaveAttribute('aria-invalid', 'true');
+        expect(document.getElementById('price-error')?.textContent).toContain('CA$100.00');
+    });
+    it('treats an in-range value as valid (no error)', () => {
+        render(MoneyInput, {
+            props: {
+                name: 'price',
+                label: 'Price',
+                min: 0,
+                max: 100000,
+                value: 5000,
+            },
+        });
+        const input = screen.getByLabelText('Price');
+        expect(input).not.toHaveAttribute('aria-invalid');
+        expect(document.getElementById('price-error')).toBeNull();
+    });
+    it('renders an explicit error prop over range checks', () => {
+        render(MoneyInput, {
+            props: { name: 'price', label: 'Price', error: 'Required' },
+        });
+        const err = document.getElementById('price-error');
+        expect(err).toHaveTextContent('Required');
+        expect(err).toHaveAttribute('role', 'alert');
+    });
+    it('is axe-clean in a labelled + error state', async () => {
+        const { container } = render(MoneyInput, {
+            props: { name: 'price', label: 'Price', error: 'Required', value: 1000 },
+        });
+        await expectNoA11yViolations(container);
+    });
+});

package/dist/components/forms/__tests__/NumberInput.behavior.test.js

@@ -0,0 +1,141 @@
+/**
+ * Deep behavior tests for NumberInput (Sweep S11, #1416).
+ *
+ * The existing a11y suite covers labelling + a single out-of-range case. This
+ * suite drives the real numeric pipeline: typing → handleInput (parseFloat /
+ * empty→null) → onchange + bindable value; the min/max derived range-validation
+ * (aria-invalid, the linked role=alert error, its at-least/at-most message
+ * variants); and the step/required/disabled attribute wiring.
+ *
+ * NumberInput calls useAppState (it throws outside a <Provider>), so it is
+ * mocked to a non-listening stub — the reference pattern from
+ * rich-inputs-a11y.test.ts. (NumberInput does not use useSTT.)
+ */
+import { expectNoA11yViolations } from '@happyvertical/smrt-ui/test-support/a11y';
+import { render, screen } from '@testing-library/svelte';
+import userEvent from '@testing-library/user-event';
+import { describe, expect, it, vi } from 'vitest';
+vi.mock('../../../hooks/useAppState.svelte.js', () => ({
+    useAppState: () => ({ state: { mode: 'default' }, setMode: vi.fn() }),
+}));
+import NumberInput from '../NumberInput.svelte';
+describe('NumberInput — typing & parsing', () => {
+    it('fires onchange with the parsed number as the user types', async () => {
+        const onchange = vi.fn();
+        render(NumberInput, { props: { name: 'age', label: 'Age', onchange } });
+        await userEvent.type(screen.getByLabelText('Age'), '42');
+        expect(onchange).toHaveBeenLastCalledWith(42);
+    });
+    it('parses a decimal value', async () => {
+        const onchange = vi.fn();
+        render(NumberInput, {
+            props: { name: 'weight', label: 'Weight', step: 0.1, onchange },
+        });
+        await userEvent.type(screen.getByLabelText('Weight'), '3.5');
+        expect(onchange).toHaveBeenLastCalledWith(3.5);
+    });
+    it('emits null when the field is cleared back to empty', async () => {
+        const onchange = vi.fn();
+        render(NumberInput, {
+            props: { name: 'age', label: 'Age', value: 7, onchange },
+        });
+        const input = screen.getByLabelText('Age');
+        await userEvent.clear(input);
+        expect(onchange).toHaveBeenLastCalledWith(null);
+    });
+    it('renders the initial numeric value', () => {
+        render(NumberInput, { props: { name: 'age', label: 'Age', value: 99 } });
+        expect(screen.getByLabelText('Age')).toHaveValue(99);
+    });
+    it('renders an empty string for a null value', () => {
+        render(NumberInput, { props: { name: 'age', label: 'Age', value: null } });
+        expect(screen.getByLabelText('Age')).toHaveValue(null);
+    });
+});
+describe('NumberInput — range validation', () => {
+    it('flags aria-invalid and shows the at-most message above max', () => {
+        render(NumberInput, {
+            props: { name: 'age', label: 'Age', max: 10, value: 99 },
+        });
+        const input = screen.getByLabelText('Age');
+        expect(input).toHaveAttribute('aria-invalid', 'true');
+        expect(input).toHaveAttribute('aria-describedby', 'age-error');
+        const error = document.getElementById('age-error');
+        expect(error).toHaveAttribute('role', 'alert');
+        expect(error).toHaveTextContent('Value must be at most 10');
+    });
+    it('flags aria-invalid and shows the at-least message below min', () => {
+        render(NumberInput, {
+            props: { name: 'age', label: 'Age', min: 18, value: 5 },
+        });
+        const input = screen.getByLabelText('Age');
+        expect(input).toHaveAttribute('aria-invalid', 'true');
+        expect(document.getElementById('age-error')).toHaveTextContent('Value must be at least 18');
+    });
+    it('is valid for a value inside the range', () => {
+        render(NumberInput, {
+            props: { name: 'age', label: 'Age', min: 0, max: 120, value: 30 },
+        });
+        const input = screen.getByLabelText('Age');
+        expect(input).not.toHaveAttribute('aria-invalid', 'true');
+        expect(document.getElementById('age-error')).toBeNull();
+    });
+    it('treats a boundary value (== max) as valid', () => {
+        render(NumberInput, {
+            props: { name: 'age', label: 'Age', max: 10, value: 10 },
+        });
+        expect(screen.getByLabelText('Age')).not.toHaveAttribute('aria-invalid', 'true');
+    });
+    it('treats a null value as valid even with a range', () => {
+        render(NumberInput, {
+            props: { name: 'age', label: 'Age', min: 1, max: 5, value: null },
+        });
+        expect(screen.getByLabelText('Age')).not.toHaveAttribute('aria-invalid', 'true');
+    });
+    it('clears the invalid state once the user types an in-range value', async () => {
+        render(NumberInput, {
+            props: { name: 'age', label: 'Age', max: 10, value: 99 },
+        });
+        const input = screen.getByLabelText('Age');
+        expect(input).toHaveAttribute('aria-invalid', 'true');
+        await userEvent.clear(input);
+        await userEvent.type(input, '5');
+        expect(input).not.toHaveAttribute('aria-invalid', 'true');
+    });
+});
+describe('NumberInput — attributes', () => {
+    it('forwards min, max, and step onto the input', () => {
+        render(NumberInput, {
+            props: { name: 'age', label: 'Age', min: 1, max: 100, step: 5 },
+        });
+        const input = screen.getByLabelText('Age');
+        expect(input).toHaveAttribute('min', '1');
+        expect(input).toHaveAttribute('max', '100');
+        expect(input).toHaveAttribute('step', '5');
+    });
+    it('reflects required and disabled', async () => {
+        const onchange = vi.fn();
+        // NOTE: with required, the "*" lives inside the <label>, so the input's
+        // accessible name becomes "Age *" — query by id rather than label.
+        const { container } = render(NumberInput, {
+            props: {
+                name: 'age',
+                label: 'Age',
+                required: true,
+                disabled: true,
+                onchange,
+            },
+        });
+        const input = container.querySelector('#age');
+        expect(input).toBeRequired();
+        expect(input).toBeDisabled();
+        await userEvent.type(input, '5');
+        expect(onchange).not.toHaveBeenCalled();
+    });
+    it('is axe-clean when labelled', async () => {
+        const { container } = render(NumberInput, {
+            props: { name: 'age', label: 'Age' },
+        });
+        await expectNoA11yViolations(container);
+    });
+});

package/dist/components/forms/__tests__/PhoneInput.behavior.test.js

@@ -0,0 +1,96 @@
+/**
+ * Behavior tests for PhoneInput (Sweep S11, #1416).
+ *
+ * Exercises the progressive digit-masking formatter (parens/space/dash, the
+ * +1 country-code branch), normalized emission via onchange, and the
+ * 10–11 digit validity check. The hooks throw outside a <Provider>, so
+ * useAppState (default mode) + useSTT (non-listening stub) are mocked.
+ */
+import { expectNoA11yViolations } from '@happyvertical/smrt-ui/test-support/a11y';
+import { render, screen } from '@testing-library/svelte';
+import userEvent from '@testing-library/user-event';
+import { describe, expect, it, vi } from 'vitest';
+vi.mock('../../../hooks/useAppState.svelte.js', () => ({
+    useAppState: () => ({ state: { mode: 'default' }, setMode: vi.fn() }),
+}));
+vi.mock('../../../hooks/useSTT.svelte.js', () => ({
+    useSTT: () => ({
+        isListening: false,
+        isInitializing: false,
+        isReady: false,
+        adapterType: null,
+        downloadProgress: 0,
+        lastResult: '',
+        initialize: vi.fn(),
+        start: vi.fn(),
+        stop: vi.fn(),
+    }),
+}));
+import PhoneInput from '../PhoneInput.svelte';
+describe('PhoneInput — behavior', () => {
+    it('masks digits progressively as the user types a 10-digit number', async () => {
+        render(PhoneInput, { props: { name: 'phone', label: 'Phone' } });
+        const input = screen.getByLabelText('Phone');
+        await userEvent.type(input, '5551234567');
+        expect(input).toHaveValue('(555) 123-4567');
+    });
+    it('formats a partial number with an open paren', async () => {
+        render(PhoneInput, { props: { name: 'phone', label: 'Phone' } });
+        const input = screen.getByLabelText('Phone');
+        await userEvent.type(input, '55');
+        expect(input).toHaveValue('(55');
+    });
+    it('emits the formatted (normalized) value via onchange', async () => {
+        const onchange = vi.fn();
+        render(PhoneInput, { props: { name: 'phone', label: 'Phone', onchange } });
+        await userEvent.type(screen.getByLabelText('Phone'), '5551234567');
+        expect(onchange).toHaveBeenLastCalledWith('(555) 123-4567');
+    });
+    it('strips non-digit noise from pasted input', async () => {
+        render(PhoneInput, { props: { name: 'phone', label: 'Phone' } });
+        const input = screen.getByLabelText('Phone');
+        await userEvent.click(input);
+        await userEvent.paste('555-123-4567');
+        expect(input).toHaveValue('(555) 123-4567');
+    });
+    it('formats an 11-digit number starting with 1 as +1 (...)', async () => {
+        render(PhoneInput, { props: { name: 'phone', label: 'Phone' } });
+        const input = screen.getByLabelText('Phone');
+        await userEvent.click(input);
+        await userEvent.paste('15551234567');
+        expect(input).toHaveValue('+1 (555) 123-4567');
+    });
+    it('flags an incomplete number as invalid with a linked alert', () => {
+        render(PhoneInput, {
+            props: { name: 'phone', label: 'Phone', value: '(555) 12' },
+        });
+        const input = screen.getByLabelText('Phone');
+        expect(input).toHaveAttribute('aria-invalid', 'true');
+        expect(input).toHaveAttribute('aria-describedby', 'phone-error');
+        const err = document.getElementById('phone-error');
+        expect(err).toHaveAttribute('role', 'alert');
+        expect(err).toHaveTextContent('Invalid phone number');
+    });
+    it('treats a complete 10-digit number as valid (no error)', () => {
+        render(PhoneInput, {
+            props: { name: 'phone', label: 'Phone', value: '(555) 123-4567' },
+        });
+        const input = screen.getByLabelText('Phone');
+        expect(input).not.toHaveAttribute('aria-invalid');
+        expect(document.getElementById('phone-error')).toBeNull();
+    });
+    it('treats an empty value as valid (not invalid)', () => {
+        render(PhoneInput, { props: { name: 'phone', label: 'Phone', value: '' } });
+        expect(screen.getByLabelText('Phone')).not.toHaveAttribute('aria-invalid');
+    });
+    it('uses a tel input type', () => {
+        render(PhoneInput, { props: { name: 'phone', label: 'Phone' } });
+        expect(screen.getByLabelText('Phone')).toHaveAttribute('type', 'tel');
+    });
+    it('is axe-clean in a labelled invalid state', async () => {
+        const { container } = render(PhoneInput, {
+            props: { name: 'phone', label: 'Phone', value: '(555) 12' },
+        });
+        await expectNoA11yViolations(container);
+    });
+});

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

@@ -0,0 +1,79 @@
+/**
+ * Component test for SearchInput (Sweep S11, #1416).
+ *
+ * Follows the golden pattern (src/components/ui/__tests__/Button.test.ts).
+ * A `type="search"` input surfaces as a `searchbox` role. The component is
+ * Provider-free (its i18n falls back to registered defaults outside a Provider).
+ */
+import { expectNoA11yViolations } from '@happyvertical/smrt-ui/test-support/a11y';
+import { render, screen } from '@testing-library/svelte';
+import userEvent from '@testing-library/user-event';
+import { describe, expect, it, vi } from 'vitest';
+import SearchInput from '../SearchInput.svelte';
+describe('SearchInput', () => {
+    it('renders a searchbox with its default accessible name', () => {
+        render(SearchInput);
+        expect(screen.getByRole('searchbox', { name: 'Search' })).toBeInTheDocument();
+    });
+    it('uses ariaLabel as the accessible name and shows the placeholder', () => {
+        render(SearchInput, {
+            props: { ariaLabel: 'Find articles', placeholder: 'Type to search…' },
+        });
+        const box = screen.getByRole('searchbox', { name: 'Find articles' });
+        expect(box).toHaveAttribute('placeholder', 'Type to search…');
+    });
+    it('reflects the value and disabled props', () => {
+        render(SearchInput, {
+            props: { ariaLabel: 'Search', value: 'hello', disabled: true },
+        });
+        const box = screen.getByRole('searchbox', { name: 'Search' });
+        expect(box).toHaveValue('hello');
+        expect(box).toBeDisabled();
+    });
+    it('fires oninput immediately while typing (no debounce)', async () => {
+        const oninput = vi.fn();
+        render(SearchInput, {
+            props: { ariaLabel: 'Search', debounce: 0, oninput },
+        });
+        await userEvent.type(screen.getByRole('searchbox', { name: 'Search' }), 'ab');
+        expect(oninput).toHaveBeenCalledTimes(2);
+        expect(oninput).toHaveBeenLastCalledWith('ab');
+    });
+    it('fires onsearch on Enter and onsubmit with the current value', async () => {
+        const onsearch = vi.fn();
+        const onsubmit = vi.fn();
+        render(SearchInput, {
+            props: { ariaLabel: 'Search', debounce: 0, onsearch, onsubmit },
+        });
+        const box = screen.getByRole('searchbox', { name: 'Search' });
+        await userEvent.type(box, 'query{Enter}');
+        expect(onsubmit).toHaveBeenCalledWith('query');
+        expect(onsearch).toHaveBeenLastCalledWith('query');
+    });
+    it('shows a clear button once there is a value and clears on click', async () => {
+        const oninput = vi.fn();
+        render(SearchInput, {
+            props: { ariaLabel: 'Search', debounce: 0, value: 'something', oninput },
+        });
+        const clear = screen.getByRole('button', { name: 'Clear search' });
+        await userEvent.click(clear);
+        expect(screen.getByRole('searchbox', { name: 'Search' })).toHaveValue('');
+        expect(oninput).toHaveBeenLastCalledWith('');
+    });
+    it('does not render a clear button when empty', () => {
+        render(SearchInput, { props: { ariaLabel: 'Search' } });
+        expect(screen.queryByRole('button', { name: 'Clear search' })).not.toBeInTheDocument();
+    });
+    it('is axe-clean in the default state', async () => {
+        const { container } = render(SearchInput, {
+            props: { ariaLabel: 'Search the catalog' },
+        });
+        await expectNoA11yViolations(container);
+    });
+    it('is axe-clean with a value (clear button visible)', async () => {
+        const { container } = render(SearchInput, {
+            props: { ariaLabel: 'Search the catalog', value: 'shoes' },
+        });
+        await expectNoA11yViolations(container);
+    });
+});

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

@@ -0,0 +1,37 @@
+/**
+ * Golden test for Select (Sweep L1, #1420).
+ *
+ * Select forwards aria attributes (so it can be labelled / error-associated)
+ * and inherits id / describedby / invalid from a wrapping FormGroup via context.
+ */
+import { expectNoA11yViolations } from '@happyvertical/smrt-ui/test-support/a11y';
+import { render, screen } from '@testing-library/svelte';
+import { createRawSnippet } from 'svelte';
+import { describe, expect, it } from 'vitest';
+import Select from '../Select.svelte';
+function options() {
+    return createRawSnippet(() => ({
+        render: () => `<option value="a">A</option><option value="b">B</option>`,
+    }));
+}
+describe('Select', () => {
+    it('forwards aria-label / aria-describedby / aria-invalid', () => {
+        render(Select, {
+            props: {
+                'aria-label': 'Country',
+                'aria-describedby': 'country-hint',
+                'aria-invalid': 'true',
+                children: options(),
+            },
+        });
+        const select = screen.getByRole('combobox', { name: 'Country' });
+        expect(select).toHaveAttribute('aria-describedby', 'country-hint');
+        expect(select).toHaveAttribute('aria-invalid', 'true');
+    });
+    it('is axe-clean when labelled', async () => {
+        const { container } = render(Select, {
+            props: { 'aria-label': 'Country', children: options() },
+        });
+        await expectNoA11yViolations(container);
+    });
+});