@happyvertical/smrt-svelte 0.53.0 → 0.53.2

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

@@ -1,92 +0,0 @@
-/**
- * Component test for FormMicButton (Sweep S11, #1416).
- *
- * Follows the golden pattern (src/components/ui/__tests__/Button.test.ts).
- * FormMicButton only renders when smrt mode is active AND a form context is
- * present (`{#if isSmrt && formContext}`). Both come from Provider-backed
- * lookups that throw / return null outside a <Provider>, so we mock
- * `useAppState` (smrt mode) and `tryGetFormContext` (a stub form context). The
- * stub stands in for the real form coordinator — we never mock business logic,
- * only the context boundary that a <Provider> would otherwise supply.
- *
- * The component polls `formContext.isFormListening`/`isExtracting` on a 50ms
- * interval to drive its label/state, so listening/extracting assertions wait
- * for that poll via Testing Library's `findBy*`.
- */
-import { expectNoA11yViolations } from '@happyvertical/smrt-ui/test-support/a11y';
-import { render, screen } from '@testing-library/svelte';
-import userEvent from '@testing-library/user-event';
-import { beforeEach, describe, expect, it, vi } from 'vitest';
-vi.mock('../../../hooks/useAppState.svelte.js', () => ({
-    useAppState: () => ({ state: { mode: 'smrt' }, setMode: vi.fn() }),
-}));
-const toggleListening = vi.fn();
-let formState = {
-    isFormListening: false,
-    isExtracting: false,
-};
-vi.mock('../../../state/form-context.js', () => ({
-    tryGetFormContext: () => ({
-        get mode() {
-            return 'smrt';
-        },
-        get isFormListening() {
-            return formState.isFormListening;
-        },
-        get isExtracting() {
-            return formState.isExtracting;
-        },
-        toggleListening,
-        registerField: vi.fn(),
-        getFieldSchema: () => [],
-    }),
-}));
-import FormMicButton from '../FormMicButton.svelte';
-describe('FormMicButton', () => {
-    beforeEach(() => {
-        toggleListening.mockClear();
-        formState = { isFormListening: false, isExtracting: false };
-    });
-    it('renders a button labelled "Click to speak" when idle', () => {
-        render(FormMicButton);
-        expect(screen.getByRole('button', { name: 'Click to speak' })).toBeInTheDocument();
-    });
-    it('is keyboard-focusable (tabindex 0)', () => {
-        render(FormMicButton);
-        expect(screen.getByRole('button', { name: 'Click to speak' })).toHaveAttribute('tabindex', '0');
-    });
-    it('toggles listening on the form context when clicked', async () => {
-        render(FormMicButton);
-        await userEvent.click(screen.getByRole('button', { name: 'Click to speak' }));
-        expect(toggleListening).toHaveBeenCalledTimes(1);
-    });
-    it('toggles listening when activated with Enter', async () => {
-        render(FormMicButton);
-        const button = screen.getByRole('button', { name: 'Click to speak' });
-        button.focus();
-        await userEvent.keyboard('{Enter}');
-        expect(toggleListening).toHaveBeenCalledTimes(1);
-    });
-    it('toggles listening when activated with Space (CS2)', async () => {
-        render(FormMicButton);
-        const button = screen.getByRole('button', { name: 'Click to speak' });
-        button.focus();
-        await userEvent.keyboard(' ');
-        expect(toggleListening).toHaveBeenCalledTimes(1);
-    });
-    it('relabels to "Stop listening" once the form is listening', async () => {
-        formState = { isFormListening: true, isExtracting: false };
-        render(FormMicButton);
-        expect(await screen.findByRole('button', { name: 'Stop listening' })).toBeInTheDocument();
-    });
-    it('is axe-clean in the idle state', async () => {
-        const { container } = render(FormMicButton);
-        await expectNoA11yViolations(container);
-    });
-    it('is axe-clean in the listening state', async () => {
-        formState = { isFormListening: true, isExtracting: false };
-        const { container } = render(FormMicButton);
-        await screen.findByRole('button', { name: 'Stop listening' });
-        await expectNoA11yViolations(container);
-    });
-});

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

@@ -1,39 +0,0 @@
-import { createControlInteractionRegistry } from '@happyvertical/smrt-ui/forms';
-import { render, screen, waitFor } from '@testing-library/svelte';
-import { tick } from 'svelte';
-import { afterEach, describe, expect, it, vi } from 'vitest';
-import Fixture from './form-scope.fixture.svelte';
-afterEach(() => {
-    delete document.modelContext;
-});
-describe('FormScope', () => {
-    it('registers a stage-only tool for the smrt-ui controls inside a plain container', async () => {
-        const registered = [];
-        document.modelContext = {
-            async registerTool(tool) {
-                registered.push(tool);
-            },
-        };
-        const registry = createControlInteractionRegistry();
-        const { container, rerender } = render(Fixture, {
-            props: { interactionRegistry: registry },
-        });
-        expect(container.querySelector('form')).toBeNull();
-        await tick();
-        await vi.waitFor(() => expect(registered.length).toBeGreaterThan(0));
-        const tool = registered.at(-1);
-        expect(tool.name).toBe('new_site_stage_changes');
-        expect(Object.keys(tool.inputSchema.properties).sort()).toEqual([
-            'name',
-            'town',
-        ]);
-        const result = JSON.parse(await tool.execute({ name: 'Lacombe News', key: 'x' }));
-        expect(result).toMatchObject({ ok: true, staged: 1, skipped: ['key'] });
-        expect(screen.getByRole('textbox', { name: 'Site name' })).toHaveValue('');
-        await waitFor(() => expect(screen.getByRole('region', { name: 'Review proposed changes' })).toBeInTheDocument());
-        const before = registered.length;
-        await rerender({ interactionRegistry: registry, showTown: false });
-        await vi.waitFor(() => expect(registered.length).toBeGreaterThan(before));
-        expect(Object.keys(registered.at(-1).inputSchema.properties)).toEqual(['name']);
-    });
-});

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

@@ -1,129 +0,0 @@
-/**
- * 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

@@ -1,124 +0,0 @@
-/**
- * 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

@@ -1,151 +0,0 @@
-/**
- * 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';
-import numberInputSource from '../NumberInput.svelte?raw';
-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('allows its native input to shrink inside a narrow form track', () => {
-        const { container } = render(NumberInput, {
-            props: { name: 'amount', label: 'Amount' },
-        });
-        container.style.width = '80px';
-        const input = screen.getByLabelText('Amount');
-        expect(input).toHaveClass('smrt-input');
-        expect(numberInputSource).toMatch(/\.smrt-input\s*\{[^}]*box-sizing:\s*border-box;[^}]*min-width:\s*0;[^}]*width:\s*100%;/);
-    });
-    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

@@ -1,96 +0,0 @@
-/**
- * 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);
-    });
-});