@happyvertical/smrt-ui 0.52.0 → 0.53.1

package/dist/components/forms/__tests__/form-retry-form.test.js

@@ -0,0 +1,107 @@
+/**
+ * `createFormRetry()` with smrt-ui's own `Form` (#3291, deferred on #3265).
+ *
+ * `Form` forwards Svelte attachments to its native `<form>` (#3265, shipped in
+ * #3331), so the pairing is SvelteKit's `enhance` through `fromAction` with
+ * the retry submit function, plus `retry.attach` for the hidden key field.
+ * `enhance` is the structural fake from the form-retry tests, attached as the
+ * real action and driven by real submit events; the action behind it records
+ * rows the way `runOnce()` does.
+ */
+import { fireEvent, render, screen } from '@testing-library/svelte';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { fakeEnhanceAction, fakeRunOnceServer, } from '../form-retry/__tests__/fake-kit.js';
+import { memoryStorage } from '../form-retry/__tests__/storage.js';
+import { createFormRetry } from '../form-retry/controller.js';
+import { resetFormRetryMemory } from '../form-retry/submission-key.js';
+import FormRetryFormFixture from './form-retry-form.fixture.svelte';
+beforeEach(() => {
+    resetFormRetryMemory();
+    sessionStorage.clear();
+});
+function setup() {
+    const server = fakeRunOnceServer();
+    const kit = fakeEnhanceAction(server);
+    const retry = createFormRetry({ form: 'report', storage: memoryStorage() });
+    const { container } = render(FormRetryFormFixture, {
+        props: { enhance: kit.action, retry },
+    });
+    const form = container.querySelector('form');
+    const title = screen.getByRole('textbox', { name: 'Title' });
+    const send = async () => {
+        await fireEvent.click(screen.getByRole('button', { name: 'Send' }));
+    };
+    const type = async (value) => {
+        await fireEvent.input(title, { target: { value } });
+    };
+    return { server, kit, retry, form, title, send, type };
+}
+describe('createFormRetry with an enhanced smrt-ui Form', () => {
+    it('keeps the key field inside Form and posts the key in the body', async () => {
+        const { server, kit, retry, form, send, type } = setup();
+        const token = retry.token;
+        const fields = form.querySelectorAll('input[name="submissionKey"]');
+        expect(fields).toHaveLength(1);
+        expect(fields[0].value).toBe(token);
+        await type('Hose');
+        await send();
+        await kit.settle();
+        expect(server.requests).toHaveLength(1);
+        expect(server.requests[0].get('submissionKey')).toBe(token);
+        expect(server.requests[0].get('title')).toBe('Hose');
+    });
+    it('refuses a double submit while the first is in flight', async () => {
+        const { server, kit, retry, send, type } = setup();
+        await type('Hose');
+        const held = server.hold();
+        await send();
+        await vi.waitFor(() => expect(retry.state.status).toBe('submitting'));
+        await send();
+        expect(retry.state.status).toBe('busy');
+        held.release();
+        await kit.settle();
+        expect(kit.enhanced.cancelled).toBe(1);
+        expect(server.requests).toHaveLength(1);
+        expect(server.rows).toHaveLength(1);
+    });
+    it('retries a lost response under the same key, recording one row', async () => {
+        const { server, kit, retry, title, send, type } = setup();
+        await type('Hose');
+        const token = retry.token;
+        server.next('lost-response');
+        await send();
+        await kit.settle();
+        expect(retry.state.status).toBe('transport-error');
+        expect(kit.enhanced.unmounted).toBe(0);
+        expect(title.value).toBe('Hose');
+        await send();
+        await kit.settle();
+        expect(server.requests.map((body) => body.get('submissionKey'))).toEqual([
+            token,
+            token,
+        ]);
+        expect(server.rows).toHaveLength(1);
+    });
+    it('resets on success only when the form is unchanged', async () => {
+        const { server, kit, retry, title, send, type } = setup();
+        await type('First');
+        const token = retry.token;
+        const held = server.hold();
+        await send();
+        await vi.waitFor(() => expect(retry.state.status).toBe('submitting'));
+        await type('Second');
+        held.release();
+        await kit.settle();
+        expect(retry.state.status).toBe('success');
+        expect(title.value).toBe('Second');
+        expect(retry.token).toBe(token);
+        await send();
+        await kit.settle();
+        expect(server.rows.map((row) => row.fields.title)).toEqual([
+            ['First'],
+            ['Second'],
+        ]);
+        expect(title.value).toBe('');
+        expect(retry.token).not.toBe(token);
+    });
+});

package/dist/components/forms/__tests__/hidden-controls-form-retry.test.js

@@ -0,0 +1,69 @@
+/**
+ * `createFormRetry()` around #3331's choice controls (#3291). `Listbox`,
+ * `Combobox` and `MultiSelect` post their selection through hidden inputs, so
+ * the "unchanged since submit" check must compare hidden inputs too — every
+ * one except the retry helper's own key field, which rotates by design.
+ *
+ * A selection changed while a submit is in flight was never sent: the success
+ * must keep it (and its key), and the next submit must post it.
+ */
+import { render } from '@testing-library/svelte';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { fakeEnhance, fakeRunOnceServer, } from '../form-retry/__tests__/fake-kit.js';
+import { memoryStorage } from '../form-retry/__tests__/storage.js';
+import { createFormRetry } from '../form-retry/controller.js';
+import { resetFormRetryMemory } from '../form-retry/submission-key.js';
+import HiddenControlsForm from './hidden-controls-form.fixture.svelte';
+beforeEach(() => {
+    resetFormRetryMemory();
+    sessionStorage.clear();
+});
+function setup() {
+    const view = render(HiddenControlsForm);
+    const form = view.container.querySelector('form');
+    const server = fakeRunOnceServer();
+    const retry = createFormRetry({ form: 'choices', storage: memoryStorage() });
+    retry.attach(form);
+    const kit = fakeEnhance(form, retry.enhance(), server);
+    const title = form.querySelector('[name=title]');
+    title.value = 'Hose';
+    return { ...view, form, server, retry, kit, title };
+}
+const posted = (body, name) => body.getAll(name);
+describe('hidden-input-backed controls under createFormRetry', () => {
+    it.each([
+        ['Listbox', 'listbox', 'b'],
+        ['Combobox', 'combobox', 'b'],
+        ['MultiSelect', 'multi', ['a', 'b']],
+    ])('a %s change during an in-flight submit survives the success', async (_name, prop, next) => {
+        const { form, server, retry, kit, rerender } = setup();
+        const token = retry.token;
+        const field = prop;
+        const before = posted(new FormData(form), field);
+        const held = server.hold();
+        const first = kit.submit();
+        await vi.waitFor(() => expect(retry.state.status).toBe('submitting'));
+        await rerender({ [prop]: next });
+        const changed = posted(new FormData(form), field);
+        expect(changed).not.toEqual(before);
+        held.release();
+        await first;
+        expect(retry.state.status).toBe('success');
+        expect(kit.updates).toEqual([{ reset: false }]);
+        expect(posted(new FormData(form), field)).toEqual(changed);
+        expect(retry.token).toBe(token);
+        await kit.submit();
+        expect(posted(server.requests[0], field)).toEqual(before);
+        expect(posted(server.requests[1], field)).toEqual(changed);
+        expect(server.rows).toHaveLength(2);
+    });
+    it('still resets when only the key field changed', async () => {
+        const { form, retry, kit, title } = setup();
+        const token = retry.token;
+        await kit.submit();
+        expect(kit.updates).toEqual([{ reset: true }]);
+        expect(title.value).toBe('');
+        expect(retry.token).not.toBe(token);
+        expect(form.querySelector('[name=submissionKey]').value).toBe(retry.token);
+    });
+});

package/dist/components/forms/__tests__/hidden-controls-form.fixture.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+import Combobox from '../Combobox.svelte';
+import Listbox from '../Listbox.svelte';
+import MultiSelect from '../MultiSelect.svelte';
+
+let {
+  listbox = $bindable('a'),
+  combobox = $bindable('a'),
+  multi = $bindable<Array<string | number>>(['a']),
+}: {
+  listbox?: string | number;
+  combobox?: string;
+  multi?: Array<string | number>;
+} = $props();
+
+const options = [
+  { value: 'a', label: 'Alpha' },
+  { value: 'b', label: 'Bravo' },
+];
+</script>
+
+<!-- #3331's choice controls post through hidden inputs, not visible fields. -->
+<form method="POST">
+  <input name="title" aria-label="Title" />
+  <Listbox name="listbox" label="Listbox" bind:value={listbox} {options} interaction={false} />
+  <Combobox name="combobox" label="Combobox" bind:value={combobox} {options} interaction={false} />
+  <MultiSelect name="multi" label="Multi" bind:values={multi} {options} interaction={false} />
+  <button type="submit">Send</button>
+</form>

package/dist/components/forms/__tests__/hidden-controls-form.fixture.svelte.d.ts

@@ -0,0 +1,9 @@
+type $$ComponentProps = {
+    listbox?: string | number;
+    combobox?: string;
+    multi?: Array<string | number>;
+};
+declare const HiddenControlsForm: import("svelte").Component<$$ComponentProps, {}, "combobox" | "listbox" | "multi">;
+type HiddenControlsForm = ReturnType<typeof HiddenControlsForm>;
+export default HiddenControlsForm;
+//# sourceMappingURL=hidden-controls-form.fixture.svelte.d.ts.map

package/dist/components/forms/__tests__/hidden-controls-form.fixture.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"hidden-controls-form.fixture.svelte.d.ts","sourceRoot":"","sources":["../../../../src/components/forms/__tests__/hidden-controls-form.fixture.svelte.ts"],"names":[],"mappings":"AAOC,KAAK,gBAAgB,GAAI;IACxB,OAAO,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC1B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,KAAK,CAAC,MAAM,GAAG,MAAM,CAAC,CAAC;CAChC,CAAC;AA6BF,QAAA,MAAM,kBAAkB,oFAAwC,CAAC;AACjE,KAAK,kBAAkB,GAAG,UAAU,CAAC,OAAO,kBAAkB,CAAC,CAAC;AAChE,eAAe,kBAAkB,CAAC"}

package/dist/components/forms/__tests__/listbox-form.fixture.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+import type { ControlInteractionRegistry } from '../control-interaction.js';
+import Form from '../Form.svelte';
+import Listbox from '../Listbox.svelte';
+
+interface Props {
+  name?: string;
+  unnamed?: boolean;
+  value?: string | number;
+  disabled?: boolean;
+  fieldsetDisabled?: boolean;
+  registry?: ControlInteractionRegistry;
+}
+let {
+  name = 'vendor',
+  unnamed = false,
+  value = $bindable(),
+  disabled = false,
+  fieldsetDisabled = false,
+  registry,
+}: Props = $props();
+</script>
+<Form formId="vendor-form" interactionRegistry={registry} aria-label="Vendor form">
+  <fieldset disabled={fieldsetDisabled}>
+    <Listbox name={unnamed ? undefined : name} label="Vendor" options={[{ value: 42, label: 'Plate supplier' }, { value: 'steel', label: 'Steel supplier' }, { value: 'blocked', label: 'Disabled supplier', disabled: true }]} bind:value {disabled} interaction={{ id: 'vendor' }} />
+  </fieldset>
+</Form>

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

@@ -0,0 +1,13 @@
+import type { ControlInteractionRegistry } from '../control-interaction.js';
+interface Props {
+    name?: string;
+    unnamed?: boolean;
+    value?: string | number;
+    disabled?: boolean;
+    fieldsetDisabled?: boolean;
+    registry?: ControlInteractionRegistry;
+}
+declare const ListboxForm: import("svelte").Component<Props, {}, "value">;
+type ListboxForm = ReturnType<typeof ListboxForm>;
+export default ListboxForm;
+//# sourceMappingURL=listbox-form.fixture.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"listbox-form.fixture.svelte.d.ts","sourceRoot":"","sources":["../../../../src/components/forms/__tests__/listbox-form.fixture.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,0BAA0B,EAAE,MAAM,2BAA2B,CAAC;AAK5E,UAAU,KAAK;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,QAAQ,CAAC,EAAE,0BAA0B,CAAC;CACvC;AAuBD,QAAA,MAAM,WAAW,gDAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}

package/dist/components/forms/__tests__/multiselect-form.fixture.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+import type { ControlInteractionRegistry } from '../control-interaction.js';
+import Form from '../Form.svelte';
+import MultiSelect from '../MultiSelect.svelte';
+
+interface Props {
+  name?: string;
+  unnamed?: boolean;
+  values?: Array<string | number>;
+  disabled?: boolean;
+  fieldsetDisabled?: boolean;
+  registry?: ControlInteractionRegistry;
+}
+let {
+  name = 'roles',
+  unnamed = false,
+  values = $bindable([]),
+  disabled = false,
+  fieldsetDisabled = false,
+  registry,
+}: Props = $props();
+</script>
+<Form formId="roles-form" interactionRegistry={registry} aria-label="Roles form">
+  <fieldset disabled={fieldsetDisabled}>
+    <MultiSelect name={unnamed ? undefined : name} label="Roles" options={[{ value: 42, label: 'Operator' }, { value: 'admin', label: 'Administrator' }, { value: 'blocked', label: 'Disabled role', disabled: true }]} bind:values {disabled} interaction={{ id: 'roles' }} />
+  </fieldset>
+</Form>

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

@@ -0,0 +1,13 @@
+import type { ControlInteractionRegistry } from '../control-interaction.js';
+interface Props {
+    name?: string;
+    unnamed?: boolean;
+    values?: Array<string | number>;
+    disabled?: boolean;
+    fieldsetDisabled?: boolean;
+    registry?: ControlInteractionRegistry;
+}
+declare const MultiselectForm: import("svelte").Component<Props, {}, "values">;
+type MultiselectForm = ReturnType<typeof MultiselectForm>;
+export default MultiselectForm;
+//# sourceMappingURL=multiselect-form.fixture.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"multiselect-form.fixture.svelte.d.ts","sourceRoot":"","sources":["../../../../src/components/forms/__tests__/multiselect-form.fixture.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,0BAA0B,EAAE,MAAM,2BAA2B,CAAC;AAK5E,UAAU,KAAK;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,MAAM,CAAC,EAAE,KAAK,CAAC,MAAM,GAAG,MAAM,CAAC,CAAC;IAChC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,QAAQ,CAAC,EAAE,0BAA0B,CAAC;CACvC;AAuBD,QAAA,MAAM,eAAe,iDAAwC,CAAC;AAC9D,KAAK,eAAe,GAAG,UAAU,CAAC,OAAO,eAAe,CAAC,CAAC;AAC1D,eAAe,eAAe,CAAC"}

package/dist/components/forms/__tests__/native-file-field.test.js

@@ -0,0 +1,177 @@
+/**
+ * Native file-field posting strategies (smrt#3290).
+ */
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import { assignFileWithDataTransfer, attachFormDataFallback, attachFormResetListener, clearFileInput, detectNativeFileFieldStrategy, fileNameForType, } from '../native-file-field.js';
+import { submittedEntries, TestDataTransfer, TestFormDataEvent, } from './capture-test-env.js';
+function fileInput() {
+    const input = document.createElement('input');
+    input.type = 'file';
+    return input;
+}
+const env = (overrides) => ({
+    File,
+    createFileInput: fileInput,
+    ...overrides,
+});
+afterEach(() => {
+    document.body.innerHTML = '';
+});
+describe('detectNativeFileFieldStrategy', () => {
+    it('prefers DataTransfer when an input accepts its files', () => {
+        expect(detectNativeFileFieldStrategy(env({
+            DataTransfer: TestDataTransfer,
+            FormDataEvent: TestFormDataEvent,
+        }))).toBe('data-transfer');
+    });
+    it('falls back to the formdata event without DataTransfer', () => {
+        expect(detectNativeFileFieldStrategy(env({ FormDataEvent: TestFormDataEvent }))).toBe('formdata-event');
+    });
+    it('falls back when the DataTransfer constructor throws (old engines)', () => {
+        class IllegalConstructor {
+            constructor() {
+                throw new TypeError('Illegal constructor');
+            }
+        }
+        expect(detectNativeFileFieldStrategy(env({
+            DataTransfer: IllegalConstructor,
+            FormDataEvent: TestFormDataEvent,
+        }))).toBe('formdata-event');
+    });
+    it('falls back when the input rejects the files assignment', () => {
+        class PlainDataTransfer {
+            items = { add: () => null };
+            files = [];
+        }
+        expect(detectNativeFileFieldStrategy(env({
+            DataTransfer: PlainDataTransfer,
+            FormDataEvent: TestFormDataEvent,
+        }))).toBe('formdata-event');
+    });
+    it('reports none when neither API exists, and during SSR', () => {
+        expect(detectNativeFileFieldStrategy(env({}))).toBe('none');
+        expect(detectNativeFileFieldStrategy({})).toBe('none');
+    });
+});
+describe('assignFileWithDataTransfer / clearFileInput', () => {
+    it('puts the file into the input so a native submit posts it, then clears it', () => {
+        const form = document.createElement('form');
+        const input = fileInput();
+        input.name = 'photo';
+        form.append(input);
+        const file = new File(['jpeg'], 'photo.jpg', { type: 'image/jpeg' });
+        expect(assignFileWithDataTransfer(input, file, TestDataTransfer)).toBe(true);
+        expect(new FormData(form).get('photo')).toBe(file);
+        clearFileInput(input);
+        const empty = new FormData(form).get('photo');
+        expect(empty.name).toBe('');
+        expect(empty.size).toBe(0);
+    });
+    it('returns false without a DataTransfer constructor', () => {
+        expect(assignFileWithDataTransfer(fileInput(), new File([], 'x'), undefined)).toBe(false);
+    });
+});
+describe('attachFormDataFallback', () => {
+    it('appends the committed file to its own form only, until disposed', () => {
+        const form = document.createElement('form');
+        const other = document.createElement('form');
+        document.body.append(form, other);
+        const file = new File(['png'], 'signature.png', { type: 'image/png' });
+        const dispose = attachFormDataFallback(document, () => ({
+            form,
+            name: 'signature',
+            file,
+        }));
+        expect(submittedEntries(form).getAll('signature')).toEqual([file]);
+        expect(submittedEntries(other).has('signature')).toBe(false);
+        dispose();
+        expect(submittedEntries(form).has('signature')).toBe(false);
+    });
+    it('posts the native empty-file entry when nothing is committed', () => {
+        const form = document.createElement('form');
+        document.body.append(form);
+        attachFormDataFallback(document, () => ({
+            form,
+            name: 'photo',
+            file: null,
+        }));
+        const entry = submittedEntries(form).get('photo');
+        expect(entry.name).toBe('');
+        expect(entry.size).toBe(0);
+        expect(entry.type).toBe('application/octet-stream');
+    });
+    it('contributes nothing while its source input is disabled by a fieldset', () => {
+        document.body.innerHTML =
+            '<form><fieldset><input type="file" hidden /></fieldset></form>';
+        const form = document.querySelector('form');
+        const fieldset = form.querySelector('fieldset');
+        const source = form.querySelector('input');
+        const file = new File(['png'], 'signature.png', { type: 'image/png' });
+        let committed = file;
+        attachFormDataFallback(document, () => ({
+            form,
+            name: 'signature',
+            file: committed,
+            source,
+        }));
+        expect(submittedEntries(form).getAll('signature')).toEqual([file]);
+        fieldset.disabled = true;
+        // Both a committed file and the empty entry are filtered, as the browser
+        // filters a disabled native control.
+        expect(submittedEntries(form).has('signature')).toBe(false);
+        committed = null;
+        expect(submittedEntries(form).has('signature')).toBe(false);
+        fieldset.disabled = false;
+        expect(submittedEntries(form).get('signature').size).toBe(0);
+    });
+    it('contributes nothing when the entry is unavailable', () => {
+        const form = document.createElement('form');
+        document.body.append(form);
+        const read = vi.fn(() => null);
+        attachFormDataFallback(document, read);
+        expect([...submittedEntries(form).keys()]).toEqual([]);
+        expect(read).toHaveBeenCalled();
+    });
+});
+describe('fileNameForType', () => {
+    it('maps known image types and falls back to bin', () => {
+        expect(fileNameForType('photo', 'image/jpeg')).toBe('photo.jpg');
+        expect(fileNameForType('photo', 'image/png')).toBe('photo.png');
+        expect(fileNameForType('photo', 'image/webp')).toBe('photo.webp');
+        expect(fileNameForType('photo', 'image/heic')).toBe('photo.bin');
+    });
+});
+describe('attachFormResetListener', () => {
+    it('fires for the owning form only, read at dispatch time, until disposed', () => {
+        document.body.innerHTML = '<form id="a"></form><form id="b"></form>';
+        const a = document.getElementById('a');
+        const b = document.getElementById('b');
+        let owner = a;
+        const onReset = vi.fn();
+        const dispose = attachFormResetListener(document, () => owner, onReset);
+        b.reset();
+        expect(onReset).not.toHaveBeenCalled();
+        a.reset();
+        expect(onReset).toHaveBeenCalledTimes(1);
+        owner = b;
+        b.reset();
+        expect(onReset).toHaveBeenCalledTimes(2);
+        owner = null;
+        b.reset();
+        expect(onReset).toHaveBeenCalledTimes(2);
+        owner = a;
+        dispose();
+        a.reset();
+        expect(onReset).toHaveBeenCalledTimes(2);
+    });
+    it('is not hidden by a page listener that stops propagation', () => {
+        document.body.innerHTML = '<form></form>';
+        const form = document.querySelector('form');
+        form.addEventListener('reset', (event) => event.stopPropagation());
+        const onReset = vi.fn();
+        const dispose = attachFormResetListener(document, () => form, onReset);
+        form.reset();
+        expect(onReset).toHaveBeenCalledTimes(1);
+        dispose();
+    });
+});

package/dist/components/forms/__tests__/segmented-posting.fixture.svelte

@@ -0,0 +1,28 @@
+<script lang="ts">
+import SegmentedControl from '../SegmentedControl.svelte';
+
+let {
+  required = false,
+  disabled = false,
+  outerDisabled = false,
+  initial = 'one',
+  named = true,
+  onvaluechange,
+}: {
+  required?: boolean;
+  disabled?: boolean;
+  outerDisabled?: boolean;
+  initial?: string | number;
+  named?: boolean;
+  onvaluechange?: (value: string | number) => void;
+} = $props();
+let value = $state(initial);
+</script>
+<form>
+  <fieldset disabled={outerDisabled}>
+    <SegmentedControl name={named ? 'kind' : undefined} label="Kind" bind:value {onvaluechange} {required} {disabled}
+      options={[{ value: 'one', label: 'One' }, { value: 'off', label: 'Disabled', disabled: true }, { value: 0, label: 'Zero' }]} density="touch" />
+  </fieldset>
+  <span data-bound-value data-bound-type={typeof value}>{String(value)}</span>
+  <button type="reset">Reset</button>
+</form>

package/dist/components/forms/__tests__/segmented-posting.fixture.svelte.d.ts

@@ -0,0 +1,12 @@
+type $$ComponentProps = {
+    required?: boolean;
+    disabled?: boolean;
+    outerDisabled?: boolean;
+    initial?: string | number;
+    named?: boolean;
+    onvaluechange?: (value: string | number) => void;
+};
+declare const SegmentedPosting: import("svelte").Component<$$ComponentProps, {}, "">;
+type SegmentedPosting = ReturnType<typeof SegmentedPosting>;
+export default SegmentedPosting;
+//# sourceMappingURL=segmented-posting.fixture.svelte.d.ts.map

package/dist/components/forms/__tests__/segmented-posting.fixture.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"segmented-posting.fixture.svelte.d.ts","sourceRoot":"","sources":["../../../../src/components/forms/__tests__/segmented-posting.fixture.svelte.ts"],"names":[],"mappings":"AAKC,KAAK,gBAAgB,GAAI;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,OAAO,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC1B,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,KAAK,IAAI,CAAC;CAClD,CAAC;AAwBF,QAAA,MAAM,gBAAgB,sDAAwC,CAAC;AAC/D,KAAK,gBAAgB,GAAG,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAC5D,eAAe,gBAAgB,CAAC"}

package/dist/components/forms/__tests__/segmented-posting.test.js

@@ -0,0 +1,92 @@
+import { fireEvent, render, screen, waitFor } from '@testing-library/svelte';
+import userEvent from '@testing-library/user-event';
+import { describe, expect, it, vi } from 'vitest';
+import Fixture from './segmented-posting.fixture.svelte';
+function form(container) {
+    return container.querySelector('form');
+}
+describe('SegmentedControl native forms', () => {
+    it('posts selected values and preserves numeric zero in bindings', async () => {
+        const { container } = render(Fixture);
+        expect(new FormData(form(container)).get('kind')).toBe('one');
+        await userEvent.click(screen.getByRole('radio', { name: 'Zero' }));
+        expect(new FormData(form(container)).get('kind')).toBe('0');
+        expect(container.querySelector('[data-bound-value]')).toHaveTextContent('0');
+    });
+    it.each([
+        { disabled: true },
+        { outerDisabled: true },
+        { initial: 'off' },
+        { initial: 'missing' },
+        { named: false },
+    ])('omits disabled, unmatched, or unnamed values %j', (props) => {
+        const { container } = render(Fixture, { props });
+        expect(new FormData(form(container)).has('kind')).toBe(false);
+    });
+    it('requires an enabled selection including zero', async () => {
+        const { container } = render(Fixture, {
+            props: { required: true, initial: 'missing' },
+        });
+        expect(form(container).checkValidity()).toBe(false);
+        await userEvent.click(screen.getByRole('radio', { name: 'Zero' }));
+        expect(form(container).checkValidity()).toBe(true);
+    });
+    it('validates required unnamed controls without posting a generated field', async () => {
+        const { container } = render(Fixture, {
+            props: { required: true, named: false, initial: 'missing' },
+        });
+        expect(form(container).checkValidity()).toBe(false);
+        await userEvent.click(screen.getByRole('radio', { name: 'Zero' }));
+        expect(form(container).checkValidity()).toBe(true);
+        expect([...new FormData(form(container)).keys()]).toEqual([]);
+    });
+    it('resets to the initial selection and binding and honors reset cancellation', async () => {
+        const { container } = render(Fixture);
+        await userEvent.click(screen.getByRole('radio', { name: 'Zero' }));
+        await userEvent.click(screen.getByRole('button', { name: 'Reset' }));
+        await waitFor(() => expect(new FormData(form(container)).get('kind')).toBe('one'));
+        await waitFor(() => expect(container.querySelector('[data-bound-value]')).toHaveTextContent('one'));
+        await userEvent.click(screen.getByRole('radio', { name: 'Zero' }));
+        form(container).addEventListener('reset', (e) => e.preventDefault());
+        await userEvent.click(screen.getByRole('button', { name: 'Reset' }));
+        expect(new FormData(form(container)).get('kind')).toBe('0');
+    });
+    it('resets a numeric initial value and clears unmatched initial values', async () => {
+        const { container, unmount } = render(Fixture, { props: { initial: 0 } });
+        await userEvent.click(screen.getByRole('radio', { name: 'One' }));
+        form(container).reset();
+        await waitFor(() => expect(container.querySelector('[data-bound-value]')).toHaveTextContent('0'));
+        expect(container.querySelector('[data-bound-value]')).toHaveAttribute('data-bound-type', 'number');
+        unmount();
+        const second = render(Fixture, {
+            props: { initial: 'missing', required: true },
+        });
+        await userEvent.click(screen.getByRole('radio', { name: 'One' }));
+        form(second.container).reset();
+        await waitFor(() => expect(second.container.querySelector('[data-bound-value]')).toHaveTextContent('undefined'));
+        expect(form(second.container).checkValidity()).toBe(false);
+        expect(new FormData(form(second.container)).has('kind')).toBe(false);
+    });
+    it('emits one native change and one value callback per pointer selection', async () => {
+        const onvaluechange = vi.fn();
+        const { container } = render(Fixture, { props: { onvaluechange } });
+        const onchange = vi.fn();
+        form(container).addEventListener('change', onchange);
+        await userEvent.click(screen.getByRole('radio', { name: 'Zero' }));
+        expect(onvaluechange).toHaveBeenCalledExactlyOnceWith(0);
+        expect(onchange).toHaveBeenCalledTimes(1);
+    });
+    it('supports arrow/home/end navigation while skipping disabled options', async () => {
+        render(Fixture);
+        const one = screen.getByRole('radio', { name: 'One' });
+        one.focus();
+        await fireEvent.keyDown(one, { key: 'ArrowRight' });
+        expect(screen.getByRole('radio', { name: 'Zero' })).toBeChecked();
+        expect(screen.getByRole('radio', { name: 'Zero' })).toHaveFocus();
+        await fireEvent.keyDown(screen.getByRole('radio', { name: 'Zero' }), {
+            key: 'Home',
+        });
+        expect(one).toBeChecked();
+        expect(screen.getByRole('radio', { name: 'Disabled' })).toBeDisabled();
+    });
+});