@happyvertical/smrt-svelte 0.30.0

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

@@ -0,0 +1,132 @@
+/**
+ * Deep behavior tests for SelectInput (Sweep S11, #1416).
+ *
+ * The existing a11y suite only asserts labelling + describedby + axe. This
+ * suite drives the real selection pipeline: choosing an option → handleChange →
+ * updateValue → onchange + bindable value; the placeholder option (disabled +
+ * selected when empty); option rendering from the options prop; and the
+ * required/disabled wiring.
+ *
+ * SelectInput 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. (SelectInput 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 SelectInput from '../SelectInput.svelte';
+const COUNTRIES = [
+    { value: 'us', label: 'United States' },
+    { value: 'ca', label: 'Canada' },
+    { value: 'mx', label: 'Mexico' },
+];
+describe('SelectInput — selection', () => {
+    it('fires onchange with the chosen option value', async () => {
+        const onchange = vi.fn();
+        render(SelectInput, {
+            props: {
+                name: 'country',
+                label: 'Country',
+                options: COUNTRIES,
+                onchange,
+            },
+        });
+        await userEvent.selectOptions(screen.getByLabelText('Country'), 'ca');
+        expect(onchange).toHaveBeenCalledWith('ca');
+    });
+    it('reflects the selected value on the <select>', async () => {
+        render(SelectInput, {
+            props: { name: 'country', label: 'Country', options: COUNTRIES },
+        });
+        const select = screen.getByLabelText('Country');
+        await userEvent.selectOptions(select, 'mx');
+        expect(select).toHaveValue('mx');
+    });
+    it('renders the initial value prop as the selected option', () => {
+        render(SelectInput, {
+            props: {
+                name: 'country',
+                label: 'Country',
+                options: COUNTRIES,
+                value: 'us',
+            },
+        });
+        expect(screen.getByLabelText('Country')).toHaveValue('us');
+    });
+});
+describe('SelectInput — options & placeholder', () => {
+    it('renders one <option> per provided option plus the placeholder', () => {
+        render(SelectInput, {
+            props: {
+                name: 'country',
+                label: 'Country',
+                options: COUNTRIES,
+                placeholder: 'Choose a country…',
+            },
+        });
+        // 3 countries + 1 placeholder option.
+        expect(screen.getAllByRole('option')).toHaveLength(4);
+        expect(screen.getByRole('option', { name: 'United States' })).toBeInTheDocument();
+    });
+    it('renders the placeholder as a disabled option, selected when value is empty', () => {
+        render(SelectInput, {
+            props: {
+                name: 'country',
+                label: 'Country',
+                options: COUNTRIES,
+                placeholder: 'Choose a country…',
+            },
+        });
+        const placeholder = screen.getByRole('option', {
+            name: 'Choose a country…',
+        });
+        expect(placeholder).toBeDisabled();
+        expect(placeholder.value).toBe('');
+    });
+});
+describe('SelectInput — states & attributes', () => {
+    it('reflects required onto the select', () => {
+        // NOTE: with required, the "*" lives inside the <label>, so the select's
+        // accessible name becomes "Country *" — query by id rather than label.
+        const { container } = render(SelectInput, {
+            props: {
+                name: 'country',
+                label: 'Country',
+                options: COUNTRIES,
+                required: true,
+            },
+        });
+        expect(container.querySelector('#country')).toBeRequired();
+    });
+    it('disables the select and ignores selection when disabled', async () => {
+        const onchange = vi.fn();
+        render(SelectInput, {
+            props: {
+                name: 'country',
+                label: 'Country',
+                options: COUNTRIES,
+                disabled: true,
+                onchange,
+            },
+        });
+        const select = screen.getByLabelText('Country');
+        expect(select).toBeDisabled();
+        await userEvent.selectOptions(select, 'ca').catch(() => { });
+        expect(onchange).not.toHaveBeenCalled();
+    });
+    it('is axe-clean when labelled with a placeholder', async () => {
+        const { container } = render(SelectInput, {
+            props: {
+                name: 'country',
+                label: 'Country',
+                placeholder: 'Choose…',
+                options: COUNTRIES,
+            },
+        });
+        await expectNoA11yViolations(container);
+    });
+});

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

@@ -0,0 +1,131 @@
+/**
+ * Deep behavior tests for TextInput (Sweep S11, #1416).
+ *
+ * The existing a11y suite only asserts labelling + describedby + axe. This
+ * suite exercises the real value pipeline: typing → handleInput → updateValue →
+ * onchange + bindable value, the email-validation derived state (aria-invalid,
+ * the invalid-email supporting message), disabled/required wiring, and the
+ * placeholder-on-focus behavior.
+ *
+ * TextInput calls useAppState/useSTT (they throw outside a <Provider>), so both
+ * are mocked to non-listening stubs — the reference pattern from
+ * rich-inputs-a11y.test.ts.
+ */
+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 TextInput from '../TextInput.svelte';
+describe('TextInput — typing & value', () => {
+    it('fires onchange with the current value on each keystroke', async () => {
+        const onchange = vi.fn();
+        render(TextInput, {
+            props: { name: 'fullname', label: 'Full name', onchange },
+        });
+        await userEvent.type(screen.getByLabelText('Full name'), 'Ada');
+        expect(onchange).toHaveBeenLastCalledWith('Ada');
+    });
+    it('renders the initial value prop into the input', () => {
+        render(TextInput, {
+            props: { name: 'fullname', label: 'Full name', value: 'Seed' },
+        });
+        expect(screen.getByLabelText('Full name')).toHaveValue('Seed');
+    });
+    it('updates the input value as the user types', async () => {
+        render(TextInput, { props: { name: 'fullname', label: 'Full name' } });
+        const input = screen.getByLabelText('Full name');
+        await userEvent.type(input, 'Lovelace');
+        expect(input).toHaveValue('Lovelace');
+    });
+});
+describe('TextInput — email validation', () => {
+    it('marks aria-invalid when an email value is malformed', () => {
+        render(TextInput, {
+            props: {
+                name: 'email',
+                label: 'Email',
+                type: 'email',
+                value: 'not-an-email',
+            },
+        });
+        expect(screen.getByLabelText('Email')).toHaveAttribute('aria-invalid', 'true');
+    });
+    it('shows the invalid-email supporting message for a bad address', () => {
+        render(TextInput, {
+            props: { name: 'email', label: 'Email', type: 'email', value: 'nope' },
+        });
+        expect(screen.getByText('Invalid email address')).toBeInTheDocument();
+    });
+    it('is valid (no aria-invalid) for a well-formed email', () => {
+        render(TextInput, {
+            props: {
+                name: 'email',
+                label: 'Email',
+                type: 'email',
+                value: 'ada@example.com',
+            },
+        });
+        expect(screen.getByLabelText('Email')).not.toHaveAttribute('aria-invalid', 'true');
+    });
+    it('treats an empty email as valid (no error until the user types)', () => {
+        render(TextInput, {
+            props: { name: 'email', label: 'Email', type: 'email' },
+        });
+        expect(screen.getByLabelText('Email')).not.toHaveAttribute('aria-invalid', 'true');
+    });
+});
+describe('TextInput — states & attributes', () => {
+    it('reflects required onto the input', () => {
+        // NOTE: with required, the "*" lives inside the <label>, so the input's
+        // accessible name becomes "Full name *" — query by id rather than label.
+        const { container } = render(TextInput, {
+            props: { name: 'fullname', label: 'Full name', required: true },
+        });
+        expect(container.querySelector('#fullname')).toBeRequired();
+    });
+    it('disables the input and ignores typing when disabled', async () => {
+        const onchange = vi.fn();
+        render(TextInput, {
+            props: { name: 'fullname', label: 'Full name', disabled: true, onchange },
+        });
+        const input = screen.getByLabelText('Full name');
+        expect(input).toBeDisabled();
+        await userEvent.type(input, 'ignored');
+        expect(onchange).not.toHaveBeenCalled();
+    });
+    it('reveals the placeholder only while focused', async () => {
+        render(TextInput, {
+            props: {
+                name: 'fullname',
+                label: 'Full name',
+                placeholder: 'Enter name',
+            },
+        });
+        const input = screen.getByLabelText('Full name');
+        expect(input).toHaveAttribute('placeholder', '');
+        await userEvent.click(input);
+        expect(input).toHaveAttribute('placeholder', 'Enter name');
+    });
+    it('is axe-clean when labelled', async () => {
+        const { container } = render(TextInput, {
+            props: { name: 'fullname', label: 'Full name' },
+        });
+        await expectNoA11yViolations(container);
+    });
+});

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

@@ -0,0 +1,39 @@
+/**
+ * Golden test for Textarea (Sweep L1, #1420).
+ *
+ * Textarea forwards aria attributes 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 userEvent from '@testing-library/user-event';
+import { describe, expect, it } from 'vitest';
+import Textarea from '../Textarea.svelte';
+describe('Textarea', () => {
+    it('forwards aria-label / aria-describedby / aria-invalid', () => {
+        render(Textarea, {
+            props: {
+                'aria-label': 'Notes',
+                'aria-describedby': 'notes-hint',
+                'aria-invalid': 'true',
+            },
+        });
+        const textarea = screen.getByRole('textbox', { name: 'Notes' });
+        expect(textarea).toHaveAttribute('aria-describedby', 'notes-hint');
+        expect(textarea).toHaveAttribute('aria-invalid', 'true');
+    });
+    it('accepts typed input', async () => {
+        render(Textarea, { props: { 'aria-label': 'Notes' } });
+        const textarea = screen.getByRole('textbox', {
+            name: 'Notes',
+        });
+        await userEvent.type(textarea, 'hello');
+        expect(textarea).toHaveValue('hello');
+    });
+    it('is axe-clean when labelled', async () => {
+        const { container } = render(Textarea, {
+            props: { 'aria-label': 'Notes' },
+        });
+        await expectNoA11yViolations(container);
+    });
+});

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

@@ -0,0 +1,96 @@
+/**
+ * Deep behavior tests for TextareaInput (Sweep S11, #1416).
+ *
+ * The existing a11y suite only asserts labelling + describedby + axe. This
+ * suite drives the real value pipeline: typing → handleInput → updateValue →
+ * onchange + bindable value, plus the rows/required/disabled wiring and the
+ * focus-gated placeholder.
+ *
+ * TextareaInput calls useAppState/useSTT (they throw outside a <Provider>), so
+ * both are mocked to non-listening stubs — the reference pattern from
+ * rich-inputs-a11y.test.ts.
+ */
+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 TextareaInput from '../TextareaInput.svelte';
+describe('TextareaInput — typing & value', () => {
+    it('fires onchange with the current value as the user types', async () => {
+        const onchange = vi.fn();
+        render(TextareaInput, { props: { name: 'bio', label: 'Bio', onchange } });
+        await userEvent.type(screen.getByLabelText('Bio'), 'Hello');
+        expect(onchange).toHaveBeenLastCalledWith('Hello');
+    });
+    it('renders the initial value prop', () => {
+        render(TextareaInput, {
+            props: { name: 'bio', label: 'Bio', value: 'Seeded text' },
+        });
+        expect(screen.getByLabelText('Bio')).toHaveValue('Seeded text');
+    });
+    it('captures multi-line input', async () => {
+        render(TextareaInput, { props: { name: 'bio', label: 'Bio' } });
+        const textarea = screen.getByLabelText('Bio');
+        await userEvent.type(textarea, 'line one{enter}line two');
+        expect(textarea).toHaveValue('line one\nline two');
+    });
+});
+describe('TextareaInput — states & attributes', () => {
+    it('forwards the rows prop onto the textarea', () => {
+        render(TextareaInput, { props: { name: 'bio', label: 'Bio', rows: 8 } });
+        expect(screen.getByLabelText('Bio')).toHaveAttribute('rows', '8');
+    });
+    it('defaults to 4 rows when not specified', () => {
+        render(TextareaInput, { props: { name: 'bio', label: 'Bio' } });
+        expect(screen.getByLabelText('Bio')).toHaveAttribute('rows', '4');
+    });
+    it('reflects required onto the textarea', () => {
+        // NOTE: with required, the "*" lives inside the <label>, so the textarea's
+        // accessible name becomes "Bio *" — query by id rather than label.
+        const { container } = render(TextareaInput, {
+            props: { name: 'bio', label: 'Bio', required: true },
+        });
+        expect(container.querySelector('#bio')).toBeRequired();
+    });
+    it('disables the textarea and ignores typing when disabled', async () => {
+        const onchange = vi.fn();
+        render(TextareaInput, {
+            props: { name: 'bio', label: 'Bio', disabled: true, onchange },
+        });
+        const textarea = screen.getByLabelText('Bio');
+        expect(textarea).toBeDisabled();
+        await userEvent.type(textarea, 'ignored');
+        expect(onchange).not.toHaveBeenCalled();
+    });
+    it('reveals the placeholder only while focused', async () => {
+        render(TextareaInput, {
+            props: { name: 'bio', label: 'Bio', placeholder: 'Tell us about you' },
+        });
+        const textarea = screen.getByLabelText('Bio');
+        expect(textarea).toHaveAttribute('placeholder', '');
+        await userEvent.click(textarea);
+        expect(textarea).toHaveAttribute('placeholder', 'Tell us about you');
+    });
+    it('is axe-clean when labelled', async () => {
+        const { container } = render(TextareaInput, {
+            props: { name: 'bio', label: 'Bio' },
+        });
+        await expectNoA11yViolations(container);
+    });
+});

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

@@ -0,0 +1,87 @@
+/**
+ * Component test for Toggle (Sweep S11, #1416).
+ *
+ * Follows the golden pattern (src/components/ui/__tests__/Button.test.ts):
+ * render → assert role/name/state → drive with user-event → prove axe-clean.
+ * Toggle renders native checkbox semantics, so it surfaces as a `checkbox` role.
+ */
+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 Toggle from '../Toggle.svelte';
+describe('Toggle', () => {
+    it('renders a checkbox with its label as the accessible name', () => {
+        render(Toggle, { props: { label: 'Email notifications' } });
+        const toggle = screen.getByRole('checkbox', {
+            name: 'Email notifications',
+        });
+        expect(toggle).toBeInTheDocument();
+        expect(toggle).not.toBeChecked();
+    });
+    it('prefers ariaLabel over label for the accessible name', () => {
+        render(Toggle, { props: { label: 'Visible', ariaLabel: 'Wifi' } });
+        expect(screen.getByRole('checkbox', { name: 'Wifi' })).toBeInTheDocument();
+    });
+    it('reflects the checked prop', () => {
+        render(Toggle, { props: { ariaLabel: 'Active', checked: true } });
+        expect(screen.getByRole('checkbox', { name: 'Active' })).toBeChecked();
+    });
+    it('reflects the disabled prop', () => {
+        render(Toggle, { props: { ariaLabel: 'Active', disabled: true } });
+        expect(screen.getByRole('checkbox', { name: 'Active' })).toBeDisabled();
+    });
+    it('forwards name, value, and id to the input for form submission', () => {
+        render(Toggle, {
+            props: { ariaLabel: 'Sub', name: 'sub', value: 'on', id: 'sub-toggle' },
+        });
+        const toggle = screen.getByRole('checkbox', {
+            name: 'Sub',
+        });
+        expect(toggle).toHaveAttribute('name', 'sub');
+        expect(toggle).toHaveAttribute('id', 'sub-toggle');
+        // Svelte binds `value` as the DOM property on checkboxes (not a reflected attribute).
+        expect(toggle.value).toBe('on');
+    });
+    it('toggles checked and fires onchange when clicked', async () => {
+        const onchange = vi.fn();
+        render(Toggle, { props: { ariaLabel: 'Active', onchange } });
+        const toggle = screen.getByRole('checkbox', { name: 'Active' });
+        await userEvent.click(toggle);
+        expect(toggle).toBeChecked();
+        expect(onchange).toHaveBeenCalledWith(true);
+        await userEvent.click(toggle);
+        expect(toggle).not.toBeChecked();
+        expect(onchange).toHaveBeenLastCalledWith(false);
+    });
+    it('is keyboard-activatable with Space when focused', async () => {
+        const onchange = vi.fn();
+        render(Toggle, { props: { ariaLabel: 'Active', onchange } });
+        const toggle = screen.getByRole('checkbox', { name: 'Active' });
+        toggle.focus();
+        expect(toggle).toHaveFocus();
+        await userEvent.keyboard(' ');
+        expect(toggle).toBeChecked();
+        expect(onchange).toHaveBeenCalledWith(true);
+    });
+    it('does not fire onchange when disabled', async () => {
+        const onchange = vi.fn();
+        render(Toggle, {
+            props: { ariaLabel: 'Active', disabled: true, onchange },
+        });
+        await userEvent.click(screen.getByRole('checkbox', { name: 'Active' }));
+        expect(onchange).not.toHaveBeenCalled();
+    });
+    it('is axe-clean with a label', async () => {
+        const { container } = render(Toggle, {
+            props: { label: 'Accessible toggle' },
+        });
+        await expectNoA11yViolations(container);
+    });
+    it('is axe-clean in the checked + disabled state', async () => {
+        const { container } = render(Toggle, {
+            props: { label: 'Locked on', checked: true, disabled: true },
+        });
+        await expectNoA11yViolations(container);
+    });
+});

package/dist/components/forms/__tests__/composite-inputs-a11y.test.js

@@ -0,0 +1,69 @@
+/**
+ * Accessibility golden tests for the multi-field composite form inputs
+ * (Sweep L1, #1420). Each sub-field is programmatically labelled and the
+ * shared/validation error is associated via aria-describedby + role="alert".
+ * Hooks are mocked (Provider-backed, throw otherwise).
+ */
+import { expectNoA11yViolations } from '@happyvertical/smrt-ui/test-support/a11y';
+import { render, screen } from '@testing-library/svelte';
+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 AddressInput from '../AddressInput.svelte';
+import DateRangeInput from '../DateRangeInput.svelte';
+import DateTimeInput from '../DateTimeInput.svelte';
+import MeasurementInput from '../MeasurementInput.svelte';
+import MoneyInput from '../MoneyInput.svelte';
+describe('composite form inputs — accessibility', () => {
+    it('MoneyInput: labelled amount + axe-clean', async () => {
+        const { container } = render(MoneyInput, {
+            props: { name: 'price', label: 'Price' },
+        });
+        expect(screen.getByLabelText('Price')).toBeInTheDocument();
+        await expectNoA11yViolations(container);
+    });
+    it('MeasurementInput: labelled value + labelled unit select + axe-clean', async () => {
+        const { container } = render(MeasurementInput, {
+            props: { name: 'weight', label: 'Weight' },
+        });
+        expect(screen.getByLabelText('Weight')).toBeInTheDocument();
+        expect(screen.getByLabelText('Weight unit')).toBeInTheDocument();
+        await expectNoA11yViolations(container);
+    });
+    it('DateRangeInput: labelled start/end + axe-clean', async () => {
+        const { container } = render(DateRangeInput, {
+            props: { name: 'range', label: 'Dates' },
+        });
+        expect(screen.getByLabelText('Start')).toBeInTheDocument();
+        expect(screen.getByLabelText('End')).toBeInTheDocument();
+        await expectNoA11yViolations(container);
+    });
+    it('AddressInput: all fields labelled + axe-clean', async () => {
+        const { container } = render(AddressInput, {
+            props: { name: 'addr', label: 'Address' },
+        });
+        expect(screen.getAllByRole('textbox').length).toBeGreaterThan(0);
+        await expectNoA11yViolations(container);
+    });
+    it('DateTimeInput: labelled + axe-clean', async () => {
+        const { container } = render(DateTimeInput, {
+            props: { name: 'when', label: 'When' },
+        });
+        expect(screen.getByLabelText('When')).toBeInTheDocument();
+        await expectNoA11yViolations(container);
+    });
+});

package/dist/components/forms/__tests__/form-group-input.fixture.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+/** Test fixture (L1 #1420): an Input wrapped in a FormGroup, to exercise the
+ *  FormGroup → base-input accessibility auto-wiring. */
+import FormGroup from '../FormGroup.svelte';
+import Input from '../Input.svelte';
+
+let {
+  error = undefined,
+  hint = undefined,
+  required = false,
+}: { error?: string; hint?: string; required?: boolean } = $props();
+</script>
+
+<FormGroup label="Email" {error} {hint} {required}>
+	<Input type="email" name="email" />
+</FormGroup>

package/dist/components/forms/__tests__/form-group-input.fixture.svelte.d.ts

@@ -0,0 +1,9 @@
+type $$ComponentProps = {
+    error?: string;
+    hint?: string;
+    required?: boolean;
+};
+declare const FormGroupInput: import("svelte").Component<$$ComponentProps, {}, "">;
+type FormGroupInput = ReturnType<typeof FormGroupInput>;
+export default FormGroupInput;
+//# sourceMappingURL=form-group-input.fixture.svelte.d.ts.map

package/dist/components/forms/__tests__/form-group-input.fixture.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"form-group-input.fixture.svelte.d.ts","sourceRoot":"","sources":["../../../../src/components/forms/__tests__/form-group-input.fixture.svelte.ts"],"names":[],"mappings":"AAQC,KAAK,gBAAgB,GAAI;IAAE,KAAK,CAAC,EAAE,MAAM,CAAC;IAAC,IAAI,CAAC,EAAE,MAAM,CAAC;IAAC,QAAQ,CAAC,EAAE,OAAO,CAAA;CAAE,CAAC;AAmBhF,QAAA,MAAM,cAAc,sDAAwC,CAAC;AAC7D,KAAK,cAAc,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AACxD,eAAe,cAAc,CAAC"}

package/dist/components/forms/__tests__/form-with-fields.fixture.svelte

@@ -0,0 +1,33 @@
+<script lang="ts">
+/** Test fixture (S11 #1416): a Form wrapping a TextInput + NumberInput so the
+ *  Form's field-registration → value-collection → onsubmit contract can be
+ *  exercised end-to-end (the submit handler reads each registered field's
+ *  getValue()). */
+import Form from '../Form.svelte';
+import NumberInput from '../NumberInput.svelte';
+import TextInput from '../TextInput.svelte';
+
+let {
+  onsubmit = undefined,
+  method = undefined,
+  action = undefined,
+  textValue = '',
+  numberValue = null,
+  showAge = true,
+}: {
+  onsubmit?: (data: Record<string, unknown>) => void;
+  method?: 'GET' | 'POST';
+  action?: string;
+  textValue?: string;
+  numberValue?: number | null;
+  showAge?: boolean;
+} = $props();
+</script>
+
+<Form {onsubmit} {method} {action}>
+	<TextInput name="fullname" label="Full name" bind:value={textValue} />
+	{#if showAge}
+		<NumberInput name="age" label="Age" bind:value={numberValue} />
+	{/if}
+	<button type="submit">Submit</button>
+</Form>

package/dist/components/forms/__tests__/form-with-fields.fixture.svelte.d.ts

@@ -0,0 +1,12 @@
+type $$ComponentProps = {
+    onsubmit?: (data: Record<string, unknown>) => void;
+    method?: 'GET' | 'POST';
+    action?: string;
+    textValue?: string;
+    numberValue?: number | null;
+    showAge?: boolean;
+};
+declare const FormWithFields: import("svelte").Component<$$ComponentProps, {}, "">;
+type FormWithFields = ReturnType<typeof FormWithFields>;
+export default FormWithFields;
+//# sourceMappingURL=form-with-fields.fixture.svelte.d.ts.map

package/dist/components/forms/__tests__/form-with-fields.fixture.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"form-with-fields.fixture.svelte.d.ts","sourceRoot":"","sources":["../../../../src/components/forms/__tests__/form-with-fields.fixture.svelte.ts"],"names":[],"mappings":"AAWC,KAAK,gBAAgB,GAAI;IACxB,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,KAAK,IAAI,CAAC;IACnD,MAAM,CAAC,EAAE,KAAK,GAAG,MAAM,CAAC;IACxB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC5B,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AA2BF,QAAA,MAAM,cAAc,sDAAwC,CAAC;AAC7D,KAAK,cAAc,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AACxD,eAAe,cAAc,CAAC"}