@happyvertical/smrt-ui 0.52.0 → 0.53.1

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

@@ -0,0 +1,166 @@
+/**
+ * `createFormRetry()` around a form holding a named `CameraCapture` or
+ * `SignaturePad` (#3290, #3291), through the structural fake of SvelteKit's
+ * `use:enhance` from the form-retry tests.
+ *
+ * A successful submit of an unchanged form calls `update({ reset: true })`,
+ * which resets the form and so empties every native file input. The capture
+ * component must empty with it: otherwise it keeps showing the attachment
+ * while the next submit posts an empty file entry, and the person believes a
+ * photo or signature went with a record that has none.
+ *
+ * The reverse matters as much: a capture taken or replaced while the submit is
+ * in flight is an edit the server has never seen, so the success must NOT
+ * reset it. Under the `formdata`-event strategy the file lives in no element,
+ * only in the entry list, so `useBrowserFormData()` makes `new FormData(form)`
+ * fire `formdata` as browsers do.
+ */
+import { fireEvent, render, screen, waitFor } from '@testing-library/svelte';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { fakeEnhance, fakeRunOnceServer, } from '../form-retry/__tests__/fake-kit.js';
+import { createFormRetry } from '../form-retry/controller.js';
+import { resetFormRetryMemory } from '../form-retry/submission-key.js';
+import CaptureFormFixture from './capture-form.fixture.svelte';
+import { fakeStream, installMediaDevices, removeMediaDevices, stubCanvas, stubMediaPlayback, useBrowserFormData, useFileFieldStrategy, } from './capture-test-env.js';
+const FIELD = { camera: 'photo', signature: 'signature' };
+const FILE = {
+    camera: 'file:photo.jpg',
+    signature: 'file:signature.png',
+};
+beforeEach(() => {
+    resetFormRetryMemory();
+    sessionStorage.clear();
+    stubCanvas();
+    stubMediaPlayback();
+    useBrowserFormData();
+    installMediaDevices({
+        getUserMedia: vi.fn().mockResolvedValue(fakeStream()),
+    });
+});
+afterEach(() => {
+    removeMediaDevices();
+    vi.restoreAllMocks();
+    vi.unstubAllGlobals();
+});
+function root(container) {
+    return container.querySelector('[data-state]');
+}
+async function expectState(container, state) {
+    await waitFor(() => expect(root(container)).toHaveAttribute('data-state', state));
+}
+async function commit(container, kind) {
+    if (kind === 'camera') {
+        await expectState(container, 'streaming');
+        await fireEvent.click(screen.getByRole('button', { name: 'Take photo' }));
+        await expectState(container, 'reviewing');
+        await fireEvent.click(screen.getByRole('button', { name: 'Use photo' }));
+    }
+    else {
+        const canvas = container.querySelector('canvas');
+        await fireEvent.pointerDown(canvas, { pointerType: 'mouse', pointerId: 1 });
+        await fireEvent.pointerMove(canvas, {
+            pointerType: 'mouse',
+            pointerId: 1,
+            clientX: 40,
+            clientY: 20,
+        });
+        await fireEvent.pointerUp(canvas, { pointerType: 'mouse', pointerId: 1 });
+        await fireEvent.click(screen.getByRole('button', { name: 'Use signature' }));
+    }
+    await expectState(container, 'committed');
+}
+/** Discard the committed capture as the person would, then commit another. */
+async function replace(container, kind) {
+    // A different photo or signature: different bytes, so a different file.
+    vi.mocked(HTMLCanvasElement.prototype.toBlob).mockImplementation((callback, type) => callback(new Blob(['other pixels'], { type })));
+    await fireEvent.click(screen.getByRole('button', {
+        name: kind === 'camera' ? 'Retake' : 'Clear',
+    }));
+    await commit(container, kind);
+}
+function setup(kind, strategy) {
+    useFileFieldStrategy(strategy);
+    const onClear = vi.fn();
+    const view = render(CaptureFormFixture, {
+        props: { kind, name: FIELD[kind], onClear },
+    });
+    const form = view.container.querySelector('form');
+    const server = fakeRunOnceServer();
+    const retry = createFormRetry({ form: `capture-${kind}`, storage: null });
+    retry.attach(form);
+    const kit = fakeEnhance(form, retry.enhance(), server);
+    return { ...view, form, server, retry, kit, onClear };
+}
+const CASES = [
+    ['camera', 'data-transfer'],
+    ['camera', 'formdata-event'],
+    ['signature', 'data-transfer'],
+    ['signature', 'formdata-event'],
+];
+describe('createFormRetry with a capture field', () => {
+    it.each(CASES)('a successful submit clears the %s (%s), so the next submit cannot post a shown-but-empty attachment', async (kind, strategy) => {
+        const name = FIELD[kind];
+        const { container, server, retry, kit, onClear } = setup(kind, strategy);
+        await waitFor(() => expect(root(container)).toHaveAttribute('data-smrt-file-field', strategy));
+        await commit(container, kind);
+        await kit.submit();
+        expect(retry.state.status).toBe('success');
+        expect(kit.updates).toEqual([{ reset: true }]);
+        expect(server.rows).toHaveLength(1);
+        expect(server.rows[0].fields[name]).toEqual([FILE[kind]]);
+        // The reset reached the component: nothing is shown, onClear fired.
+        await expectState(container, kind === 'camera' ? 'streaming' : 'empty');
+        expect(onClear).toHaveBeenCalledTimes(1);
+        expect(screen.queryByRole('img')).not.toBeInTheDocument();
+        // The next submit posts what is shown: no file, and not the old one.
+        await kit.submit();
+        expect(server.rows).toHaveLength(2);
+        expect(server.rows[1].fields[name]).toEqual(['file:']);
+        // A new capture posts as its own record.
+        await commit(container, kind);
+        await kit.submit();
+        expect(server.rows).toHaveLength(3);
+        expect(server.rows[2].fields[name]).toEqual([FILE[kind]]);
+    });
+    it.each(CASES)('keeps a %s (%s) captured while the submit was in flight', async (kind, strategy) => {
+        const name = FIELD[kind];
+        const { container, server, retry, kit, onClear } = setup(kind, strategy);
+        await waitFor(() => expect(root(container)).toHaveAttribute('data-smrt-file-field', strategy));
+        const held = server.hold();
+        const first = kit.submit();
+        await vi.waitFor(() => expect(retry.state.status).toBe('submitting'));
+        // The next entry's capture is taken while the first is unresolved.
+        await commit(container, kind);
+        held.release();
+        await first;
+        expect(kit.updates).toEqual([{ reset: false }]);
+        expect(root(container)).toHaveAttribute('data-state', 'committed');
+        expect(onClear).not.toHaveBeenCalled();
+        await kit.submit();
+        expect(server.rows.at(-1)?.fields[name]).toEqual([FILE[kind]]);
+    });
+    it.each(CASES)('keeps a %s (%s) replaced while the submit was in flight', async (kind, strategy) => {
+        const name = FIELD[kind];
+        const { container, server, retry, kit, onClear } = setup(kind, strategy);
+        await waitFor(() => expect(root(container)).toHaveAttribute('data-smrt-file-field', strategy));
+        await commit(container, kind);
+        const held = server.hold();
+        const first = kit.submit();
+        await vi.waitFor(() => expect(retry.state.status).toBe('submitting'));
+        await replace(container, kind);
+        expect(onClear).toHaveBeenCalledTimes(1);
+        held.release();
+        await first;
+        // The first capture was recorded; the newer one is an unsent edit, so the
+        // success must leave it on screen and in the field.
+        expect(server.rows[0].fields[name]).toEqual([FILE[kind]]);
+        expect(kit.updates).toEqual([{ reset: false }]);
+        expect(root(container)).toHaveAttribute('data-state', 'committed');
+        expect(onClear).toHaveBeenCalledTimes(1);
+        await kit.submit();
+        const sent = server.requests.at(-1)?.get(name);
+        expect(sent.name).toBe(FILE[kind].slice('file:'.length));
+        expect(sent.size).toBe('other pixels'.length);
+        expect(server.rows).toHaveLength(2);
+    });
+});

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

@@ -0,0 +1,38 @@
+<script lang="ts">
+import CameraCapture from '../CameraCapture.svelte';
+import SignaturePad from '../SignaturePad.svelte';
+
+let {
+  kind,
+  inFieldset = false,
+  ...props
+}: {
+  kind: 'camera' | 'signature';
+  /** Wrap the component in a `<fieldset>` the test can disable. */
+  inFieldset?: boolean;
+  [key: string]: unknown;
+} = $props();
+</script>
+
+{#snippet capture()}
+  {#if kind === 'camera'}
+    <CameraCapture {...props} />
+  {:else}
+    <SignaturePad {...props} />
+  {/if}
+{/snippet}
+
+<!-- A plain native form: no submit handler, no hidden inputs wired by the caller. -->
+<form method="POST" enctype="multipart/form-data" action="/submit">
+  <input type="hidden" name="note" value="hazard" />
+  {#if inFieldset}
+    <fieldset>
+      <legend>Capture</legend>
+      {@render capture()}
+    </fieldset>
+  {:else}
+    {@render capture()}
+  {/if}
+  <button type="submit">Submit</button>
+  <button type="reset">Reset form</button>
+</form>

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

@@ -0,0 +1,10 @@
+type $$ComponentProps = {
+    kind: 'camera' | 'signature';
+    /** Wrap the component in a `<fieldset>` the test can disable. */
+    inFieldset?: boolean;
+    [key: string]: unknown;
+};
+declare const CaptureForm: import("svelte").Component<$$ComponentProps, {}, "">;
+type CaptureForm = ReturnType<typeof CaptureForm>;
+export default CaptureForm;
+//# sourceMappingURL=capture-form.fixture.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"capture-form.fixture.svelte.d.ts","sourceRoot":"","sources":["../../../../src/components/forms/__tests__/capture-form.fixture.svelte.ts"],"names":[],"mappings":"AAMC,KAAK,gBAAgB,GAAI;IACxB,IAAI,EAAE,QAAQ,GAAG,WAAW,CAAC;IAC7B,iEAAiE;IACjE,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;CACxB,CAAC;AAqCF,QAAA,MAAM,WAAW,sDAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}

package/dist/components/forms/__tests__/capture-test-env.d.ts

@@ -0,0 +1,70 @@
+/**
+ * jsdom stand-ins for the browser APIs `CameraCapture` and `SignaturePad` use
+ * (smrt#3290). jsdom has no `DataTransfer`, no canvas, no media playback and
+ * never fires the `formdata` event, so each is supplied here, as close to the
+ * browser contract as the tests need.
+ */
+import { type Mock } from 'vitest';
+/**
+ * A real jsdom `FileList` holding `files`. jsdom's `input.files` setter only
+ * accepts genuine `FileList` instances and exposes no constructor, so the list
+ * is taken from a detached file input and filled through its implementation
+ * object. This keeps `new FormData(form)` reading the files exactly as a
+ * browser would after `input.files = dataTransfer.files`.
+ */
+export declare function createFileList(files: File[]): FileList;
+/** Browser-shaped `DataTransfer` for jsdom: `items.add()` plus a real `files`. */
+export declare class TestDataTransfer {
+    #private;
+    readonly items: {
+        add: (file: File) => null;
+    };
+    get files(): FileList;
+}
+/** Marker constructor: its presence is what feature detection reads. */
+export declare class TestFormDataEvent {
+}
+/** Select the posting strategy the component will detect on mount. */
+export declare function useFileFieldStrategy(strategy: 'data-transfer' | 'formdata-event' | 'none'): void;
+/**
+ * The entry list a native submit of `form` would send: what `new FormData`
+ * builds, plus the browser's `formdata` event (which jsdom never fires) so the
+ * fallback strategy's listener can contribute.
+ */
+export declare function submittedEntries(form: HTMLFormElement): FormData;
+/**
+ * Make `new FormData(form)` fire `formdata` on the form, as browsers do while
+ * constructing the entry list (jsdom does not), so code that snapshots a form
+ * — SvelteKit's `enhance`, form-retry's draft comparison — sees files the
+ * `formdata`-event strategy appends. Do not combine with
+ * {@link submittedEntries}, which dispatches the event itself.
+ */
+export declare function useBrowserFormData(): void;
+/** Canvas 2D, `toBlob` and `toDataURL` stubs. Returns the fake context. */
+/** The canvas 2D surface the capture components touch. */
+export interface FakeCanvasContext {
+    drawImage: Mock;
+    fillRect: Mock;
+    beginPath: Mock;
+    moveTo: Mock;
+    lineTo: Mock;
+    stroke: Mock;
+    fillStyle: string;
+    strokeStyle: string;
+    lineWidth: number;
+    lineCap: string;
+    lineJoin: string;
+}
+export declare function stubCanvas(): FakeCanvasContext;
+/** `play()` is unimplemented in jsdom; resolve it like an allowed autoplay. */
+export declare function stubMediaPlayback(): void;
+export interface FakeTrack {
+    stop: Mock;
+}
+export declare function fakeStream(tracks?: FakeTrack[]): MediaStream;
+/** Install `navigator.mediaDevices` (or remove it with `undefined`). */
+export declare function installMediaDevices(mediaDevices: {
+    getUserMedia: (...args: unknown[]) => unknown;
+} | undefined): void;
+export declare function removeMediaDevices(): void;
+//# sourceMappingURL=capture-test-env.d.ts.map

package/dist/components/forms/__tests__/capture-test-env.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"capture-test-env.d.ts","sourceRoot":"","sources":["../../../../src/components/forms/__tests__/capture-test-env.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,OAAO,EAAE,KAAK,IAAI,EAAM,MAAM,QAAQ,CAAC;AAYvC;;;;;;GAMG;AACH,wBAAgB,cAAc,CAAC,KAAK,EAAE,IAAI,EAAE,GAAG,QAAQ,CAWtD;AAED,kFAAkF;AAClF,qBAAa,gBAAgB;;IAE3B,QAAQ,CAAC,KAAK;oBACA,IAAI;MAIhB;IACF,IAAI,KAAK,IAAI,QAAQ,CAEpB;CACF;AAED,wEAAwE;AACxE,qBAAa,iBAAiB;CAAG;AAEjC,sEAAsE;AACtE,wBAAgB,oBAAoB,CAClC,QAAQ,EAAE,eAAe,GAAG,gBAAgB,GAAG,MAAM,GACpD,IAAI,CASN;AAED;;;;GAIG;AACH,wBAAgB,gBAAgB,CAAC,IAAI,EAAE,eAAe,GAAG,QAAQ,CAMhE;AAED;;;;;;GAMG;AACH,wBAAgB,kBAAkB,IAAI,IAAI,CAYzC;AAED,2EAA2E;AAC3E,0DAA0D;AAC1D,MAAM,WAAW,iBAAiB;IAChC,SAAS,EAAE,IAAI,CAAC;IAChB,QAAQ,EAAE,IAAI,CAAC;IACf,SAAS,EAAE,IAAI,CAAC;IAChB,MAAM,EAAE,IAAI,CAAC;IACb,MAAM,EAAE,IAAI,CAAC;IACb,MAAM,EAAE,IAAI,CAAC;IACb,SAAS,EAAE,MAAM,CAAC;IAClB,WAAW,EAAE,MAAM,CAAC;IACpB,SAAS,EAAE,MAAM,CAAC;IAClB,OAAO,EAAE,MAAM,CAAC;IAChB,QAAQ,EAAE,MAAM,CAAC;CAClB;AAED,wBAAgB,UAAU,IAAI,iBAAiB,CA0B9C;AAED,+EAA+E;AAC/E,wBAAgB,iBAAiB,IAAI,IAAI,CAExC;AAED,MAAM,WAAW,SAAS;IACxB,IAAI,EAAE,IAAI,CAAC;CACZ;AAED,wBAAgB,UAAU,CAAC,MAAM,GAAE,SAAS,EAAwB,GACjB,WAAW,CAC7D;AAED,wEAAwE;AACxE,wBAAgB,mBAAmB,CACjC,YAAY,EAAE;IAAE,YAAY,EAAE,CAAC,GAAG,IAAI,EAAE,OAAO,EAAE,KAAK,OAAO,CAAA;CAAE,GAAG,SAAS,GAC1E,IAAI,CAKN;AAED,wBAAgB,kBAAkB,IAAI,IAAI,CAEzC"}

package/dist/components/forms/__tests__/capture-test-env.js

@@ -0,0 +1,122 @@
+/**
+ * jsdom stand-ins for the browser APIs `CameraCapture` and `SignaturePad` use
+ * (smrt#3290). jsdom has no `DataTransfer`, no canvas, no media playback and
+ * never fires the `formdata` event, so each is supplied here, as close to the
+ * browser contract as the tests need.
+ */
+import { vi } from 'vitest';
+function implOf(wrapper, guard) {
+    const key = Object.getOwnPropertySymbols(wrapper).find((symbol) => guard(wrapper[symbol]));
+    if (!key)
+        throw new Error('jsdom wrapper has no implementation symbol');
+    return wrapper[key];
+}
+/**
+ * A real jsdom `FileList` holding `files`. jsdom's `input.files` setter only
+ * accepts genuine `FileList` instances and exposes no constructor, so the list
+ * is taken from a detached file input and filled through its implementation
+ * object. This keeps `new FormData(form)` reading the files exactly as a
+ * browser would after `input.files = dataTransfer.files`.
+ */
+export function createFileList(files) {
+    const input = document.createElement('input');
+    input.type = 'file';
+    const list = input.files;
+    const impl = implOf(list, Array.isArray);
+    for (const file of files) {
+        impl.push(implOf(file, (value) => typeof value === 'object' && value !== null));
+    }
+    return list;
+}
+/** Browser-shaped `DataTransfer` for jsdom: `items.add()` plus a real `files`. */
+export class TestDataTransfer {
+    #files = [];
+    items = {
+        add: (file) => {
+            this.#files.push(file);
+            return null;
+        },
+    };
+    get files() {
+        return createFileList(this.#files);
+    }
+}
+/** Marker constructor: its presence is what feature detection reads. */
+export class TestFormDataEvent {
+}
+/** Select the posting strategy the component will detect on mount. */
+export function useFileFieldStrategy(strategy) {
+    vi.stubGlobal('DataTransfer', strategy === 'data-transfer' ? TestDataTransfer : undefined);
+    vi.stubGlobal('FormDataEvent', strategy === 'formdata-event' ? TestFormDataEvent : undefined);
+}
+/**
+ * The entry list a native submit of `form` would send: what `new FormData`
+ * builds, plus the browser's `formdata` event (which jsdom never fires) so the
+ * fallback strategy's listener can contribute.
+ */
+export function submittedEntries(form) {
+    const formData = new FormData(form);
+    const event = new Event('formdata');
+    Object.defineProperty(event, 'formData', { value: formData });
+    form.dispatchEvent(event);
+    return formData;
+}
+/**
+ * Make `new FormData(form)` fire `formdata` on the form, as browsers do while
+ * constructing the entry list (jsdom does not), so code that snapshots a form
+ * — SvelteKit's `enhance`, form-retry's draft comparison — sees files the
+ * `formdata`-event strategy appends. Do not combine with
+ * {@link submittedEntries}, which dispatches the event itself.
+ */
+export function useBrowserFormData() {
+    const NativeFormData = FormData;
+    class BrowserFormData extends NativeFormData {
+        constructor(form, submitter) {
+            super(form, submitter);
+            if (!form)
+                return;
+            const event = new Event('formdata');
+            Object.defineProperty(event, 'formData', { value: this });
+            form.dispatchEvent(event);
+        }
+    }
+    vi.stubGlobal('FormData', BrowserFormData);
+}
+export function stubCanvas() {
+    const context = {
+        drawImage: vi.fn(),
+        fillRect: vi.fn(),
+        beginPath: vi.fn(),
+        moveTo: vi.fn(),
+        lineTo: vi.fn(),
+        stroke: vi.fn(),
+        fillStyle: '',
+        strokeStyle: '',
+        lineWidth: 1,
+        lineCap: 'butt',
+        lineJoin: 'miter',
+    };
+    vi.spyOn(HTMLCanvasElement.prototype, 'getContext').mockImplementation(() => context);
+    vi.spyOn(HTMLCanvasElement.prototype, 'toDataURL').mockImplementation((type = 'image/png') => `data:${type};base64,AAAA`);
+    vi.spyOn(HTMLCanvasElement.prototype, 'toBlob').mockImplementation((callback, type = 'image/png') => {
+        callback(new Blob(['pixels'], { type }));
+    });
+    return context;
+}
+/** `play()` is unimplemented in jsdom; resolve it like an allowed autoplay. */
+export function stubMediaPlayback() {
+    vi.spyOn(HTMLMediaElement.prototype, 'play').mockResolvedValue(undefined);
+}
+export function fakeStream(tracks = [{ stop: vi.fn() }]) {
+    return { getTracks: () => tracks };
+}
+/** Install `navigator.mediaDevices` (or remove it with `undefined`). */
+export function installMediaDevices(mediaDevices) {
+    Object.defineProperty(window.navigator, 'mediaDevices', {
+        configurable: true,
+        value: mediaDevices,
+    });
+}
+export function removeMediaDevices() {
+    delete window.navigator.mediaDevices;
+}

package/dist/components/forms/__tests__/capture-touch.fixture.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+import ThemeProvider from '../../../themes/ThemeProvider.svelte';
+import CameraCapture from '../CameraCapture.svelte';
+import SignaturePad from '../SignaturePad.svelte';
+
+let {
+  density = 'comfortable',
+  target = '48px',
+}: { density?: 'comfortable' | 'touch'; target?: string } = $props();
+</script>
+<!-- Capture actions are touch targets at every density: comfortable is the default here on purpose. -->
+<ThemeProvider {density} overrides={{ '--smrt-touch-target-min': target }} persist={false} inlineVariables>
+  <CameraCapture name="photo" fileInputFallback interaction={false} />
+  <SignaturePad name="signature" interaction={false} />
+</ThemeProvider>

package/dist/components/forms/__tests__/capture-touch.fixture.svelte.d.ts

@@ -0,0 +1,8 @@
+type $$ComponentProps = {
+    density?: 'comfortable' | 'touch';
+    target?: string;
+};
+declare const CaptureTouch: import("svelte").Component<$$ComponentProps, {}, "">;
+type CaptureTouch = ReturnType<typeof CaptureTouch>;
+export default CaptureTouch;
+//# sourceMappingURL=capture-touch.fixture.svelte.d.ts.map

package/dist/components/forms/__tests__/capture-touch.fixture.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"capture-touch.fixture.svelte.d.ts","sourceRoot":"","sources":["../../../../src/components/forms/__tests__/capture-touch.fixture.svelte.ts"],"names":[],"mappings":"AAOC,KAAK,gBAAgB,GAAI;IAAE,OAAO,CAAC,EAAE,aAAa,GAAG,OAAO,CAAC;IAAC,MAAM,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC;AAmBjF,QAAA,MAAM,YAAY,sDAAwC,CAAC;AAC3D,KAAK,YAAY,GAAG,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC;AACpD,eAAe,YAAY,CAAC"}

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

@@ -0,0 +1,29 @@
+<script lang="ts">
+import Combobox from '../Combobox.svelte';
+import type { ControlInteractionRegistry } from '../control-interaction.js';
+import Form from '../Form.svelte';
+
+interface Props {
+  name?: string;
+  unnamed?: boolean;
+  value?: string;
+  disabled?: boolean;
+  fieldsetDisabled?: boolean;
+  allowCustom?: boolean;
+  registry?: ControlInteractionRegistry;
+}
+let {
+  name = 'sku',
+  unnamed = false,
+  value = $bindable(''),
+  disabled = false,
+  fieldsetDisabled = false,
+  allowCustom = false,
+  registry,
+}: Props = $props();
+</script>
+<Form formId="order" interactionRegistry={registry} aria-label="Order">
+  <fieldset disabled={fieldsetDisabled}>
+    <Combobox name={unnamed ? undefined : name} label="SKU" options={[{value: '42', label: 'Plate 1/4 A36'}, {value: '43', label: 'Disabled plate', disabled: true}]} bind:value {disabled} {allowCustom} interaction={{id: 'sku'}} />
+  </fieldset>
+</Form>

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"combobox-form.fixture.svelte.d.ts","sourceRoot":"","sources":["../../../../src/components/forms/__tests__/combobox-form.fixture.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,0BAA0B,EAAE,MAAM,2BAA2B,CAAC;AAI5E,UAAU,KAAK;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,QAAQ,CAAC,EAAE,0BAA0B,CAAC;CACvC;AAwBD,QAAA,MAAM,YAAY,gDAAwC,CAAC;AAC3D,KAAK,YAAY,GAAG,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC;AACpD,eAAe,YAAY,CAAC"}

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

@@ -0,0 +1,28 @@
+<script lang="ts">
+import type { Action } from 'svelte/action';
+import { fromAction } from 'svelte/attachments';
+import type { ControlInteractionRegistry } from '../control-interaction.js';
+import Form from '../Form.svelte';
+import Input from '../Input.svelte';
+
+interface Props {
+  enhance: Action<HTMLFormElement, void>;
+  registry: ControlInteractionRegistry;
+  onsubmit?: (event: SubmitEvent) => void;
+}
+
+let { enhance, registry, onsubmit }: Props = $props();
+</script>
+
+<Form
+  method="POST"
+  action="/profile"
+  preventDefault={false}
+  formId="profile"
+  interactionRegistry={registry}
+  {onsubmit}
+  {@attach fromAction(enhance)}
+>
+  <Input name="displayName" value="Dana" />
+  <button type="submit">Save</button>
+</Form>

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

@@ -0,0 +1,11 @@
+import type { Action } from 'svelte/action';
+import type { ControlInteractionRegistry } from '../control-interaction.js';
+interface Props {
+    enhance: Action<HTMLFormElement, void>;
+    registry: ControlInteractionRegistry;
+    onsubmit?: (event: SubmitEvent) => void;
+}
+declare const FormAttachment: import("svelte").Component<Props, {}, "">;
+type FormAttachment = ReturnType<typeof FormAttachment>;
+export default FormAttachment;
+//# sourceMappingURL=form-attachment.fixture.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"form-attachment.fixture.svelte.d.ts","sourceRoot":"","sources":["../../../../src/components/forms/__tests__/form-attachment.fixture.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AAE5C,OAAO,KAAK,EAAE,0BAA0B,EAAE,MAAM,2BAA2B,CAAC;AAK5E,UAAU,KAAK;IACb,OAAO,EAAE,MAAM,CAAC,eAAe,EAAE,IAAI,CAAC,CAAC;IACvC,QAAQ,EAAE,0BAA0B,CAAC;IACrC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,KAAK,IAAI,CAAC;CACzC;AAmBD,QAAA,MAAM,cAAc,2CAAwC,CAAC;AAC7D,KAAK,cAAc,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AACxD,eAAe,cAAc,CAAC"}

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

@@ -0,0 +1,31 @@
+<script lang="ts">
+import { fromAction } from 'svelte/attachments';
+import Form from '../Form.svelte';
+import type { FormRetry } from '../form-retry/controller.js';
+import type { FormRetrySubmitFunction } from '../form-retry/types.js';
+import Input from '../Input.svelte';
+
+interface Props {
+  /** SvelteKit's `enhance` action (here: the structural fake). */
+  enhance: (
+    form: HTMLFormElement,
+    submit?: FormRetrySubmitFunction,
+  ) => { destroy(): void };
+  retry: FormRetry;
+}
+
+let { enhance, retry }: Props = $props();
+</script>
+
+<!-- The pairing the guide documents: kit's enhance with the retry submit
+     function, plus the retry attachment for the hidden key field. -->
+<Form
+  method="POST"
+  action="?/create"
+  preventDefault={false}
+  {@attach fromAction(enhance, () => retry.enhance())}
+  {@attach retry.attach}
+>
+  <Input name="title" aria-label="Title" />
+  <button type="submit">Send</button>
+</Form>

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

@@ -0,0 +1,13 @@
+import type { FormRetry } from '../form-retry/controller.js';
+import type { FormRetrySubmitFunction } from '../form-retry/types.js';
+interface Props {
+    /** SvelteKit's `enhance` action (here: the structural fake). */
+    enhance: (form: HTMLFormElement, submit?: FormRetrySubmitFunction) => {
+        destroy(): void;
+    };
+    retry: FormRetry;
+}
+declare const FormRetryForm: import("svelte").Component<Props, {}, "">;
+type FormRetryForm = ReturnType<typeof FormRetryForm>;
+export default FormRetryForm;
+//# sourceMappingURL=form-retry-form.fixture.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"form-retry-form.fixture.svelte.d.ts","sourceRoot":"","sources":["../../../../src/components/forms/__tests__/form-retry-form.fixture.svelte.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,6BAA6B,CAAC;AAC7D,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,wBAAwB,CAAC;AAItE,UAAU,KAAK;IACb,gEAAgE;IAChE,OAAO,EAAE,CACP,IAAI,EAAE,eAAe,EACrB,MAAM,CAAC,EAAE,uBAAuB,KAC7B;QAAE,OAAO,IAAI,IAAI,CAAA;KAAE,CAAC;IACzB,KAAK,EAAE,SAAS,CAAC;CAClB;AAoBD,QAAA,MAAM,aAAa,2CAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}