@happyvertical/smrt-ui 0.51.39 → 0.53.0

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__/long-press.test.js

@@ -0,0 +1,175 @@
+/**
+ * Long press vs tap vs drag: only a still, primary press held for the delay
+ * fires; moving past the tolerance (a drag or scroll) or a native dragstart
+ * cancels it; the click after a fired press is swallowed; the context menu is
+ * suppressed only when opted in and only during a tracked press.
+ */
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { createLongPress, longPress } from '../long-press.js';
+function pointer(type, init = {}) {
+    return {
+        type,
+        isPrimary: true,
+        pointerId: 1,
+        pointerType: 'touch',
+        button: 0,
+        clientX: 100,
+        clientY: 100,
+        target: document.body,
+        ...init,
+    };
+}
+describe('createLongPress', () => {
+    beforeEach(() => vi.useFakeTimers());
+    afterEach(() => vi.useRealTimers());
+    it('fires after the delay when the pointer stays still', () => {
+        const onLongPress = vi.fn();
+        const press = createLongPress({ onLongPress });
+        press.handlePointerDown(pointer('pointerdown'));
+        vi.advanceTimersByTime(499);
+        expect(onLongPress).not.toHaveBeenCalled();
+        // Small wobble inside the tolerance still counts as still.
+        press.handlePointerMove(pointer('pointermove', { clientX: 106, clientY: 104 }));
+        vi.advanceTimersByTime(1);
+        expect(onLongPress).toHaveBeenCalledTimes(1);
+        expect(onLongPress.mock.calls[0][0]).toMatchObject({
+            pointerType: 'touch',
+        });
+        expect(press.fired).toBe(true);
+    });
+    it('a quick tap never fires and reports a cancel', () => {
+        const onLongPress = vi.fn();
+        const onCancel = vi.fn();
+        const press = createLongPress({ onLongPress, onCancel });
+        press.handlePointerDown(pointer('pointerdown'));
+        vi.advanceTimersByTime(200);
+        press.handlePointerUp(pointer('pointerup'));
+        vi.advanceTimersByTime(1000);
+        expect(onLongPress).not.toHaveBeenCalled();
+        expect(onCancel).toHaveBeenCalledTimes(1);
+    });
+    it('moving past the tolerance is a drag, not a long press', () => {
+        const onLongPress = vi.fn();
+        const press = createLongPress({ onLongPress, moveTolerance: 10 });
+        press.handlePointerDown(pointer('pointerdown'));
+        vi.advanceTimersByTime(300);
+        press.handlePointerMove(pointer('pointermove', { clientX: 115 }));
+        vi.advanceTimersByTime(1000);
+        expect(onLongPress).not.toHaveBeenCalled();
+    });
+    it('a native dragstart cancels a pending press', () => {
+        const onLongPress = vi.fn();
+        const press = createLongPress({ onLongPress });
+        press.handlePointerDown(pointer('pointerdown', { pointerType: 'mouse' }));
+        press.handleDragStart();
+        vi.advanceTimersByTime(1000);
+        expect(onLongPress).not.toHaveBeenCalled();
+    });
+    it('ignores right clicks and secondary pointers', () => {
+        const onLongPress = vi.fn();
+        const press = createLongPress({ onLongPress });
+        press.handlePointerDown(pointer('pointerdown', { pointerType: 'mouse', button: 2 }));
+        press.handlePointerDown(pointer('pointerdown', { isPrimary: false }));
+        vi.advanceTimersByTime(1000);
+        expect(onLongPress).not.toHaveBeenCalled();
+    });
+    it('only counts presses the filter accepts, about the element it returns', () => {
+        const picture = document.createElement('img');
+        const onLongPress = vi.fn();
+        const press = createLongPress({
+            onLongPress,
+            filter: (event) => (event.target === picture ? picture : null),
+        });
+        press.handlePointerDown(pointer('pointerdown', { target: document.body }));
+        vi.advanceTimersByTime(600);
+        expect(onLongPress).not.toHaveBeenCalled();
+        press.handlePointerDown(pointer('pointerdown', { target: picture }));
+        vi.advanceTimersByTime(600);
+        expect(onLongPress.mock.calls[0][0].target).toBe(picture);
+    });
+    it('reports the release after a fired press and swallows the next click', () => {
+        const onRelease = vi.fn();
+        const press = createLongPress({ onLongPress: () => { }, onRelease });
+        press.handlePointerDown(pointer('pointerdown'));
+        vi.advanceTimersByTime(500);
+        press.handlePointerUp(pointer('pointerup'));
+        expect(onRelease).toHaveBeenCalledTimes(1);
+        const click = {
+            preventDefault: vi.fn(),
+            stopPropagation: vi.fn(),
+        };
+        press.handleClick(click);
+        expect(click.preventDefault).toHaveBeenCalled();
+        // Only the one click right after the release.
+        const later = {
+            preventDefault: vi.fn(),
+            stopPropagation: vi.fn(),
+        };
+        press.handleClick(later);
+        expect(later.preventDefault).not.toHaveBeenCalled();
+    });
+    it('suppresses the context menu only when opted in and during a press', () => {
+        const plain = createLongPress({ onLongPress: () => { } });
+        const guarded = createLongPress({
+            onLongPress: () => { },
+            preventContextMenu: true,
+        });
+        const idleMenu = { preventDefault: vi.fn() };
+        guarded.handleContextMenu(idleMenu);
+        expect(idleMenu.preventDefault).not.toHaveBeenCalled();
+        plain.handlePointerDown(pointer('pointerdown'));
+        guarded.handlePointerDown(pointer('pointerdown'));
+        vi.advanceTimersByTime(500);
+        const plainMenu = { preventDefault: vi.fn() };
+        const guardedMenu = { preventDefault: vi.fn() };
+        plain.handleContextMenu(plainMenu);
+        guarded.handleContextMenu(guardedMenu);
+        expect(plainMenu.preventDefault).not.toHaveBeenCalled();
+        expect(guardedMenu.preventDefault).toHaveBeenCalled();
+    });
+});
+describe('longPress action', () => {
+    beforeEach(() => vi.useFakeTimers());
+    afterEach(() => vi.useRealTimers());
+    function dispatch(target, type, init = {}) {
+        const event = new Event(type, { bubbles: true, cancelable: true });
+        Object.assign(event, {
+            isPrimary: true,
+            pointerId: 7,
+            pointerType: 'mouse',
+            button: 0,
+            clientX: 10,
+            clientY: 10,
+            ...init,
+        });
+        target.dispatchEvent(event);
+        return event;
+    }
+    it('wires pointer events on the node and the window, and cleans up', () => {
+        const node = document.createElement('div');
+        document.body.append(node);
+        const onLongPress = vi.fn();
+        const action = longPress(node, { onLongPress });
+        dispatch(node, 'pointerdown');
+        vi.advanceTimersByTime(500);
+        expect(onLongPress).toHaveBeenCalledTimes(1);
+        dispatch(window, 'pointerup');
+        action.destroy();
+        dispatch(node, 'pointerdown');
+        vi.advanceTimersByTime(500);
+        expect(onLongPress).toHaveBeenCalledTimes(1);
+        node.remove();
+    });
+    it('a drag on the node (move past tolerance) never fires', () => {
+        const node = document.createElement('div');
+        document.body.append(node);
+        const onLongPress = vi.fn();
+        const action = longPress(node, { onLongPress });
+        dispatch(node, 'pointerdown');
+        dispatch(window, 'pointermove', { clientX: 40 });
+        vi.advanceTimersByTime(800);
+        expect(onLongPress).not.toHaveBeenCalled();
+        action.destroy();
+        node.remove();
+    });
+});

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__/place-picker.fixture.svelte

@@ -0,0 +1,33 @@
+<script lang="ts">
+import { useControlRegistration } from '../index.js';
+
+type Place = { name: string; latitude: number; longitude: number };
+interface Props {
+  value: Place | null;
+}
+let { value = $bindable(null) }: Props = $props();
+
+// A composite: search text, a result list, and hidden coordinates — one value.
+useControlRegistration(() => ({
+  controlId: 'place',
+  metadata: {
+    kind: 'custom',
+    label: 'Town location',
+    valueSchema: {
+      type: 'object',
+      required: ['name', 'latitude', 'longitude'],
+      properties: {
+        name: { type: 'string' },
+        latitude: { type: 'number' },
+        longitude: { type: 'number' },
+      },
+    },
+  },
+  getValue: () => value,
+  setValue: (next) => {
+    value = next as Place;
+  },
+}));
+</script>
+
+<div class="place-picker"><span>{value?.name ?? 'Pick a town'}</span></div>

package/dist/components/forms/__tests__/place-picker.fixture.svelte.d.ts

@@ -0,0 +1,12 @@
+type Place = {
+    name: string;
+    latitude: number;
+    longitude: number;
+};
+interface Props {
+    value: Place | null;
+}
+declare const PlacePicker: import("svelte").Component<Props, {}, "value">;
+type PlacePicker = ReturnType<typeof PlacePicker>;
+export default PlacePicker;
+//# sourceMappingURL=place-picker.fixture.svelte.d.ts.map

package/dist/components/forms/__tests__/place-picker.fixture.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"place-picker.fixture.svelte.d.ts","sourceRoot":"","sources":["../../../../src/components/forms/__tests__/place-picker.fixture.svelte.ts"],"names":[],"mappings":"AAMA,KAAK,KAAK,GAAG;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,QAAQ,EAAE,MAAM,CAAC;IAAC,SAAS,EAAE,MAAM,CAAA;CAAE,CAAC;AACnE,UAAU,KAAK;IACb,KAAK,EAAE,KAAK,GAAG,IAAI,CAAC;CACrB;AAkCD,QAAA,MAAM,WAAW,gDAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}

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"}