@happyvertical/smrt-ui 0.43.4 → 0.43.5

package/dist/components/forms/__tests__/core-controls.fixture.svelte

@@ -8,32 +8,43 @@ import RangeSlider from '../RangeSlider.svelte';
 import SegmentedControl from '../SegmentedControl.svelte';
 import Slider from '../Slider.svelte';
 import Switch from '../Switch.svelte';
+import Textarea from '../Textarea.svelte';
+import ToggleButton from '../ToggleButton.svelte';
 
 interface Props {
   registry: ControlInteractionRegistry;
+  validInitial?: boolean;
 }
-let { registry }: Props = $props();
+let { registry, validInitial = false }: Props = $props();
 let accepted = $state(false);
 let notifications = $state(false);
 let role = $state('editor');
 let volume = $state(30);
 let range = $state({ min: 20, max: 80 });
 let view = $state<string | number>('grid');
+let notes = $state('valid notes');
+let pinned = $state(false);
+$effect(() => {
+  accepted = validInitial;
+  notifications = validInitial;
+});
 </script>
 
 <Form formId="settings" interactionRegistry={registry} aria-label="Settings">
-  <Checkbox name="accepted" label="Accept terms" bind:checked={accepted} />
-  <Switch name="notifications" label="Notifications" bind:checked={notifications} />
+  <Checkbox name="accepted" label="Accept terms" required bind:checked={accepted} />
+  <Switch name="notifications" label="Notifications" required bind:checked={notifications} />
   <RadioGroup name="role" label="Role" bind:value={role}>
     <Radio value="editor" label="Editor" />
     <Radio value="viewer" label="Viewer" />
   </RadioGroup>
-  <Slider name="volume" label="Volume" bind:value={volume} />
-  <RangeSlider name="price" label="Price" bind:value={range} />
+  <Slider name="volume" label="Volume" step={5} bind:value={volume} />
+  <RangeSlider name="price" label="Price" step={5} bind:value={range} />
   <SegmentedControl
     name="view"
     label="View"
     options={[{ value: 'grid', label: 'Grid' }, { value: 'list', label: 'List' }]}
     bind:value={view}
   />
+  <Textarea name="notes" aria-label="Notes" required minlength={3} bind:value={notes} />
+  <ToggleButton name="pinned" aria-label="Pinned" bind:pressed={pinned}>Pinned</ToggleButton>
 </Form>

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

@@ -1,6 +1,7 @@
 import type { ControlInteractionRegistry } from '../control-interaction.js';
 interface Props {
     registry: ControlInteractionRegistry;
+    validInitial?: boolean;
 }
 declare const CoreControls: import("svelte").Component<Props, {}, "">;
 type CoreControls = ReturnType<typeof CoreControls>;

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

@@ -1 +1 @@
-{"version":3,"file":"core-controls.fixture.svelte.d.ts","sourceRoot":"","sources":["../../../../src/components/forms/__tests__/core-controls.fixture.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,0BAA0B,EAAE,MAAM,2BAA2B,CAAC;AAU5E,UAAU,KAAK;IACb,QAAQ,EAAE,0BAA0B,CAAC;CACtC;AAmCD,QAAA,MAAM,YAAY,2CAAwC,CAAC;AAC3D,KAAK,YAAY,GAAG,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC;AACpD,eAAe,YAAY,CAAC"}
+{"version":3,"file":"core-controls.fixture.svelte.d.ts","sourceRoot":"","sources":["../../../../src/components/forms/__tests__/core-controls.fixture.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,0BAA0B,EAAE,MAAM,2BAA2B,CAAC;AAY5E,UAAU,KAAK;IACb,QAAQ,EAAE,0BAA0B,CAAC;IACrC,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB;AA6CD,QAAA,MAAM,YAAY,2CAAwC,CAAC;AAC3D,KAAK,YAAY,GAAG,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC;AACpD,eAAe,YAAY,CAAC"}

package/dist/components/forms/__tests__/core-controls.test.js

@@ -5,8 +5,10 @@ import { expectNoA11yViolations } from '../../../test-support/a11y';
 import Progress from '../../feedback/Progress.svelte';
 import Spinner from '../../feedback/Spinner.svelte';
 import { createControlInteractionRegistry } from '../control-interaction.js';
+import { snapSteppedNumber, validatesSteppedNumber, } from '../control-value-validation.js';
 import ErrorSummary from '../ErrorSummary.svelte';
 import Fixture from './core-controls.fixture.svelte';
+import DecimalSlidersFixture from './decimal-sliders.fixture.svelte';
 describe('core controls', () => {
     it('provides distinct checkbox, switch, radio, slider, range, and segmented semantics', async () => {
         const registry = createControlInteractionRegistry();
@@ -21,8 +23,10 @@ describe('core controls', () => {
         await userEvent.click(screen.getByRole('radio', { name: 'List' }));
         expect(screen.getByRole('radio', { name: 'List' })).toHaveAttribute('aria-checked', 'true');
     });
-    it('registers all controls and lets an agent stage before confirmed apply', async () => {
-        const registry = createControlInteractionRegistry();
+    it('registers all controls and keeps agent staging separate from human apply', async () => {
+        const registry = createControlInteractionRegistry({
+            isLocalGesture: () => true,
+        });
         render(Fixture, { props: { registry } });
         expect(registry.list('settings').map((item) => item.identity.controlId)).toEqual(expect.arrayContaining([
             'accepted',
@@ -42,7 +46,224 @@ describe('core controls', () => {
             action: 'apply',
             identity: { formId: 'settings', controlId: 'volume' },
         }, { source: 'agent', confirmed: true });
+        expect(screen.getByRole('slider', { name: 'Volume' })).toHaveValue('30');
+        await userEvent.click(screen.getByRole('button', { name: 'Apply Volume' }));
+        expect(screen.getByRole('slider', { name: 'Volume' })).toHaveValue('55');
+        await registry.execute({
+            action: 'stage',
+            identity: { formId: 'settings', controlId: 'volume' },
+            value: '',
+        }, { source: 'agent' });
+        expect(registry.get({ formId: 'settings', controlId: 'volume' })?.state.staged
+            ?.value).toBe(0);
+        await userEvent.click(screen.getByRole('button', { name: 'Apply Volume' }));
+        expect(screen.getByRole('slider', { name: 'Volume' })).toHaveValue('0');
+        expect(registry.get({ formId: 'settings', controlId: 'volume' })?.state.staged).toBeUndefined();
+    });
+    it('canonicalizes scalar proposals before exposing them for review', async () => {
+        const registry = createControlInteractionRegistry({
+            isLocalGesture: () => true,
+        });
+        render(Fixture, { props: { registry } });
+        for (const controlId of ['accepted', 'notes']) {
+            expect(await registry.execute({
+                action: 'stage',
+                identity: { formId: 'settings', controlId },
+                value: { malformed: true },
+            }, { source: 'agent' })).toMatchObject({ ok: false, reason: 'staged_value_invalid' });
+            expect(registry.get({ formId: 'settings', controlId })?.state.staged).toBeUndefined();
+        }
+        await registry.execute({
+            action: 'stage',
+            identity: { formId: 'settings', controlId: 'volume' },
+            value: '55',
+        }, { source: 'agent' });
+        expect(registry.get({ formId: 'settings', controlId: 'volume' })?.state.staged
+            ?.value).toBe(55);
+        await userEvent.click(screen.getByRole('button', { name: 'Apply Volume' }));
+        expect(screen.getByRole('slider', { name: 'Volume' })).toHaveValue('55');
+    });
+    it('applies decimal-step slider proposals without floating-point drift', async () => {
+        const registry = createControlInteractionRegistry({
+            isLocalGesture: () => true,
+        });
+        render(DecimalSlidersFixture, { props: { registry } });
+        const valueIdentity = { formId: 'decimal', controlId: 'value' };
+        const rangeIdentity = { formId: 'decimal', controlId: 'range' };
+        const tinyIdentity = { formId: 'decimal', controlId: 'tiny' };
+        const microscopicIdentity = {
+            formId: 'decimal',
+            controlId: 'microscopic',
+        };
+        const microscopicRangeIdentity = {
+            formId: 'decimal',
+            controlId: 'microscopic-range',
+        };
+        const decimalDrift = 0.1 + 0.2;
+        const validCases = [
+            { next: 0.3, expected: 0.3, min: 0.1, max: 1, step: 0.2 },
+            { next: decimalDrift, expected: 0.3, min: 0.1, max: 1, step: 0.2 },
+            {
+                next: 3e-16,
+                expected: 3e-16,
+                min: 1e-16,
+                max: 9e-16,
+                step: 2e-16,
+            },
+            {
+                next: 3e-101,
+                expected: 3e-101,
+                min: 1e-101,
+                max: 9e-101,
+                step: 2e-101,
+            },
+            {
+                next: 1.12e-101,
+                expected: 1.12e-101,
+                min: 1e-101,
+                max: 1.9e-101,
+                step: 3e-103,
+            },
+            {
+                next: Number.MIN_VALUE * 3,
+                expected: Number.MIN_VALUE * 3,
+                min: Number.MIN_VALUE,
+                max: Number.MIN_VALUE * 5,
+                step: Number.MIN_VALUE,
+            },
+        ];
+        for (const { next, expected, min, max, step } of validCases) {
+            expect(validatesSteppedNumber(next, min, max, step)).toBe(true);
+            const snapped = snapSteppedNumber(next, min, max, step);
+            expect(snapped).toBe(expected);
+            expect(validatesSteppedNumber(snapped, min, max, step)).toBe(true);
+            expect(snapSteppedNumber(snapped, min, max, step)).toBe(snapped);
+        }
+        for (const { min, max, step } of [
+            { min: 0.1, max: 0.9, step: 0.2 },
+            { min: 1e-16, max: 9e-16, step: 2e-16 },
+            { min: 1e-101, max: 1.9e-101, step: 3e-103 },
+            {
+                min: Number.MIN_VALUE,
+                max: Number.MIN_VALUE * 5,
+                step: Number.MIN_VALUE,
+            },
+        ]) {
+            const lastIndex = Math.round((max - min) / step);
+            for (let index = 0; index <= lastIndex; index += 1) {
+                const validValue = min + index * step;
+                expect(validatesSteppedNumber(validValue, min, max, step)).toBe(true);
+                const canonical = snapSteppedNumber(validValue, min, max, step);
+                expect(validatesSteppedNumber(canonical, min, max, step)).toBe(true);
+                expect(snapSteppedNumber(canonical, min, max, step)).toBe(canonical);
+            }
+        }
+        await registry.execute({ action: 'stage', identity: valueIdentity, value: decimalDrift }, { source: 'agent' });
+        await registry.execute({ action: 'stage', identity: tinyIdentity, value: 3e-16 }, { source: 'agent' });
+        await registry.execute({ action: 'stage', identity: microscopicIdentity, value: 1.12e-101 }, { source: 'agent' });
+        await registry.execute({
+            action: 'stage',
+            identity: microscopicRangeIdentity,
+            value: { min: 1.12e-101, max: 1.9e-101 },
+        }, { source: 'agent' });
+        await registry.execute({
+            action: 'stage',
+            identity: rangeIdentity,
+            value: { min: decimalDrift, max: 0.5 },
+        }, { source: 'agent' });
+        expect(registry.get(valueIdentity)?.state.staged).toMatchObject({
+            value: 0.3,
+            valid: true,
+        });
+        expect(registry.get(rangeIdentity)?.state.staged).toMatchObject({
+            value: { min: 0.3, max: 0.5 },
+            valid: true,
+        });
+        expect(registry.get(tinyIdentity)?.state.staged).toMatchObject({
+            value: 3e-16,
+            valid: true,
+        });
+        expect(registry.get(microscopicIdentity)?.state.staged).toMatchObject({
+            value: 1.12e-101,
+            valid: true,
+        });
+        expect(registry.get(microscopicRangeIdentity)?.state.staged).toMatchObject({
+            value: { min: 1.12e-101, max: 1.9e-101 },
+            valid: true,
+        });
+        await userEvent.click(screen.getByRole('button', { name: 'Apply Value' }));
+        await userEvent.click(screen.getByRole('button', { name: 'Apply Range' }));
+        await userEvent.click(screen.getByRole('button', { name: 'Apply Tiny value' }));
+        await userEvent.click(screen.getByRole('button', { name: 'Apply Microscopic value' }));
+        await userEvent.click(screen.getByRole('button', { name: 'Apply Microscopic range' }));
+        expect(registry.get(valueIdentity)?.state).toMatchObject({ value: 0.3 });
+        expect(registry.get(rangeIdentity)?.state).toMatchObject({
+            value: { min: 0.3, max: 0.5 },
+        });
+        expect(registry.get(tinyIdentity)?.state).toMatchObject({ value: 3e-16 });
+        expect(registry.get(microscopicIdentity)?.state).toMatchObject({
+            value: 1.12e-101,
+        });
+        expect(registry.get(microscopicRangeIdentity)?.state).toMatchObject({
+            value: { min: 1.12e-101, max: 1.9e-101 },
+        });
+        expect(registry.get(valueIdentity)?.state.staged).toBeUndefined();
+        expect(registry.get(rangeIdentity)?.state.staged).toBeUndefined();
+        expect(registry.get(tinyIdentity)?.state.staged).toBeUndefined();
+        expect(registry.get(microscopicIdentity)?.state.staged).toBeUndefined();
+        expect(registry.get(microscopicRangeIdentity)?.state.staged).toBeUndefined();
+        expect(screen.getByRole('slider', { name: 'Value' })).toHaveValue('0.3');
+        expect(screen.getByRole('spinbutton', { name: 'Value value' })).toHaveValue(0.3);
+        expect(screen.getByRole('slider', { name: 'Minimum' })).toHaveValue('0.3');
+        expect(screen.getByRole('slider', { name: 'Maximum' })).toHaveValue('0.5');
+        expect(screen.getByRole('slider', { name: 'Tiny value' })).toHaveValue('3e-16');
+        expect(screen.getByRole('slider', { name: 'Microscopic value' })).toHaveValue('1.12e-101');
+        expect(screen.getByRole('slider', { name: 'Microscopic minimum' })).toHaveValue('1.12e-101');
+        expect(screen.getByRole('slider', { name: 'Microscopic maximum' })).toHaveValue('1.9e-101');
+    });
+    it('marks constrained proposals invalid before the first valid-only batch', async () => {
+        const registry = createControlInteractionRegistry({
+            isLocalGesture: () => true,
+        });
+        render(Fixture, { props: { registry, validInitial: true } });
+        const invalid = new Map([
+            ['accepted', false],
+            ['notifications', false],
+            ['role', 'administrator'],
+            ['price', { min: 20, max: 83 }],
+            ['view', 'cards'],
+            ['notes', 'x'],
+            ['pinned', 'yes'],
+        ]);
+        for (const [controlId, value] of invalid) {
+            await registry.execute({
+                action: 'stage',
+                identity: { formId: 'settings', controlId },
+                value,
+            }, { source: 'agent' });
+            expect(registry.get({ formId: 'settings', controlId })?.state.staged?.valid).toBe(false);
+        }
+        await registry.execute({
+            action: 'stage',
+            identity: { formId: 'settings', controlId: 'volume' },
+            value: 12,
+        }, { source: 'agent' });
+        expect(registry.get({ formId: 'settings', controlId: 'volume' })?.state.staged
+            ?.valid).toBe(false);
+        await registry.execute({
+            action: 'stage',
+            identity: { formId: 'settings', controlId: 'volume' },
+            value: 55,
+        }, { source: 'agent' });
+        expect(registry.get({ formId: 'settings', controlId: 'volume' })?.state.staged
+            ?.valid).toBe(true);
+        expect(await screen.findAllByRole('alert')).toHaveLength(invalid.size);
+        await userEvent.click(screen.getByRole('button', { name: 'Apply valid changes' }));
         expect(screen.getByRole('slider', { name: 'Volume' })).toHaveValue('55');
+        expect(registry.get({ formId: 'settings', controlId: 'volume' })?.state.staged).toBeUndefined();
+        for (const controlId of invalid.keys()) {
+            expect(registry.get({ formId: 'settings', controlId })?.state.staged?.valid).toBe(false);
+        }
     });
     it('is axe-clean as a composed form', async () => {
         const registry = createControlInteractionRegistry();

package/dist/components/forms/__tests__/decimal-sliders.fixture.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+import type { ControlInteractionRegistry } from '../control-interaction.js';
+import Form from '../Form.svelte';
+import RangeSlider from '../RangeSlider.svelte';
+import Slider from '../Slider.svelte';
+
+interface Props {
+  registry: ControlInteractionRegistry;
+}
+
+let { registry }: Props = $props();
+let value = $state(0.1);
+let range = $state({ min: 0.1, max: 0.5 });
+let tinyValue = $state(1e-16);
+let microscopicValue = $state(1e-101);
+let microscopicRange = $state({ min: 1e-101, max: 1.9e-101 });
+</script>
+
+<Form formId="decimal" interactionRegistry={registry} aria-label="Decimal controls">
+  <Slider name="value" label="Value" min={0.1} max={1} step={0.2} bind:value />
+  <RangeSlider name="range" label="Range" min={0.1} max={1} step={0.2} bind:value={range} />
+  <Slider name="tiny" label="Tiny value" min={1e-16} max={9e-16} step={2e-16} bind:value={tinyValue} />
+  <Slider name="microscopic" label="Microscopic value" min={1e-101} max={1.9e-101} step={3e-103} bind:value={microscopicValue} />
+  <RangeSlider name="microscopic-range" label="Microscopic range" minLabel="Microscopic minimum" maxLabel="Microscopic maximum" min={1e-101} max={1.9e-101} step={3e-103} bind:value={microscopicRange} />
+</Form>

package/dist/components/forms/__tests__/decimal-sliders.fixture.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { ControlInteractionRegistry } from '../control-interaction.js';
+interface Props {
+    registry: ControlInteractionRegistry;
+}
+declare const DecimalSliders: import("svelte").Component<Props, {}, "">;
+type DecimalSliders = ReturnType<typeof DecimalSliders>;
+export default DecimalSliders;
+//# sourceMappingURL=decimal-sliders.fixture.svelte.d.ts.map

package/dist/components/forms/__tests__/decimal-sliders.fixture.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"decimal-sliders.fixture.svelte.d.ts","sourceRoot":"","sources":["../../../../src/components/forms/__tests__/decimal-sliders.fixture.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,0BAA0B,EAAE,MAAM,2BAA2B,CAAC;AAM5E,UAAU,KAAK;IACb,QAAQ,EAAE,0BAA0B,CAAC;CACtC;AA0BD,QAAA,MAAM,cAAc,2CAAwC,CAAC;AAC7D,KAAK,cAAc,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AACxD,eAAe,cAAc,CAAC"}

package/dist/components/forms/__tests__/select-interaction.fixture.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+import type { ControlInteractionRegistry } from '../control-interaction.js';
+import Form from '../Form.svelte';
+import Select from '../Select.svelte';
+
+let {
+  registry,
+  required = false,
+}: {
+  registry: ControlInteractionRegistry;
+  required?: boolean;
+} = $props();
+let role = $state('user');
+</script>
+
+<Form formId="account" interactionRegistry={registry} aria-label="Account form">
+  <Select name="role" aria-label="Role" {required} bind:value={role}>
+    <option value="">Choose a role</option>
+    <option value="user">User</option>
+    <option value="admin" disabled>Administrator</option>
+    <optgroup label="Unavailable roles" disabled>
+      <option value="owner">Owner</option>
+    </optgroup>
+  </Select>
+</Form>

package/dist/components/forms/__tests__/select-interaction.fixture.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { ControlInteractionRegistry } from '../control-interaction.js';
+type $$ComponentProps = {
+    registry: ControlInteractionRegistry;
+    required?: boolean;
+};
+declare const SelectInteraction: import("svelte").Component<$$ComponentProps, {}, "">;
+type SelectInteraction = ReturnType<typeof SelectInteraction>;
+export default SelectInteraction;
+//# sourceMappingURL=select-interaction.fixture.svelte.d.ts.map

package/dist/components/forms/__tests__/select-interaction.fixture.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"select-interaction.fixture.svelte.d.ts","sourceRoot":"","sources":["../../../../src/components/forms/__tests__/select-interaction.fixture.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,0BAA0B,EAAE,MAAM,2BAA2B,CAAC;AAI3E,KAAK,gBAAgB,GAAI;IACxB,QAAQ,EAAE,0BAA0B,CAAC;IACrC,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AA0BF,QAAA,MAAM,iBAAiB,sDAAwC,CAAC;AAChE,KAAK,iBAAiB,GAAG,UAAU,CAAC,OAAO,iBAAiB,CAAC,CAAC;AAC9D,eAAe,iBAAiB,CAAC"}

package/dist/components/forms/__tests__/staged-review-fieldset.fixture.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+import type { ControlInteractionRegistry } from '../control-interaction.js';
+import Form from '../Form.svelte';
+import FormGroup from '../FormGroup.svelte';
+import Input from '../Input.svelte';
+
+let {
+  registry,
+}: {
+  registry: ControlInteractionRegistry;
+} = $props();
+let displayName = $state('Ada');
+</script>
+
+<Form formId="profile" interactionRegistry={registry} aria-label="Profile form">
+  <fieldset>
+    <FormGroup label="Display name">
+      <Input name="display-name" bind:value={displayName} required minlength={3} />
+    </FormGroup>
+  </fieldset>
+</Form>

package/dist/components/forms/__tests__/staged-review-fieldset.fixture.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { ControlInteractionRegistry } from '../control-interaction.js';
+type $$ComponentProps = {
+    registry: ControlInteractionRegistry;
+};
+declare const StagedReviewFieldset: import("svelte").Component<$$ComponentProps, {}, "">;
+type StagedReviewFieldset = ReturnType<typeof StagedReviewFieldset>;
+export default StagedReviewFieldset;
+//# sourceMappingURL=staged-review-fieldset.fixture.svelte.d.ts.map

package/dist/components/forms/__tests__/staged-review-fieldset.fixture.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"staged-review-fieldset.fixture.svelte.d.ts","sourceRoot":"","sources":["../../../../src/components/forms/__tests__/staged-review-fieldset.fixture.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,0BAA0B,EAAE,MAAM,2BAA2B,CAAC;AAK3E,KAAK,gBAAgB,GAAI;IACxB,QAAQ,EAAE,0BAA0B,CAAC;CACtC,CAAC;AAuBF,QAAA,MAAM,oBAAoB,sDAAwC,CAAC;AACnE,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,oBAAoB,CAAC,CAAC;AACpE,eAAe,oBAAoB,CAAC"}

package/dist/components/forms/__tests__/staged-review-outer-fieldset.fixture.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+import type { ControlInteractionRegistry } from '../control-interaction.js';
+import Form from '../Form.svelte';
+import FormGroup from '../FormGroup.svelte';
+import Input from '../Input.svelte';
+
+let {
+  registry,
+}: {
+  registry: ControlInteractionRegistry;
+} = $props();
+let displayName = $state('Ada');
+</script>
+
+<fieldset>
+  <fieldset>
+    <Form formId="profile" interactionRegistry={registry} aria-label="Profile form">
+      <FormGroup label="Display name">
+        <Input name="display-name" bind:value={displayName} required minlength={3} />
+      </FormGroup>
+    </Form>
+  </fieldset>
+</fieldset>

package/dist/components/forms/__tests__/staged-review-outer-fieldset.fixture.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { ControlInteractionRegistry } from '../control-interaction.js';
+type $$ComponentProps = {
+    registry: ControlInteractionRegistry;
+};
+declare const StagedReviewOuterFieldset: import("svelte").Component<$$ComponentProps, {}, "">;
+type StagedReviewOuterFieldset = ReturnType<typeof StagedReviewOuterFieldset>;
+export default StagedReviewOuterFieldset;
+//# sourceMappingURL=staged-review-outer-fieldset.fixture.svelte.d.ts.map

package/dist/components/forms/__tests__/staged-review-outer-fieldset.fixture.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"staged-review-outer-fieldset.fixture.svelte.d.ts","sourceRoot":"","sources":["../../../../src/components/forms/__tests__/staged-review-outer-fieldset.fixture.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,0BAA0B,EAAE,MAAM,2BAA2B,CAAC;AAK3E,KAAK,gBAAgB,GAAI;IACxB,QAAQ,EAAE,0BAA0B,CAAC;CACtC,CAAC;AAyBF,QAAA,MAAM,yBAAyB,sDAAwC,CAAC;AACxE,KAAK,yBAAyB,GAAG,UAAU,CAAC,OAAO,yBAAyB,CAAC,CAAC;AAC9E,eAAe,yBAAyB,CAAC"}

package/dist/components/forms/__tests__/staged-review.fixture.svelte

@@ -0,0 +1,56 @@
+<script lang="ts">
+import type {
+  ControlInteractionRegistry,
+  ControlSubject,
+} from '../control-interaction.js';
+import Form from '../Form.svelte';
+import FormGroup from '../FormGroup.svelte';
+import Input from '../Input.svelte';
+import Slider from '../Slider.svelte';
+
+let {
+  registry,
+  subject,
+  displayNameLabel = 'Display name',
+  formOnInput,
+  formId = 'profile',
+}: {
+  registry: ControlInteractionRegistry;
+  subject?: ControlSubject;
+  displayNameLabel?: string;
+  formOnInput?: (event: Event) => void;
+  formId?: string;
+} = $props();
+let displayName = $state('Ada');
+let apiToken = $state('token');
+let volume = $state(25);
+let score = $state<string | number>(1);
+let birthday = $state('');
+let meetingTime = $state('');
+let intensity = $state(50);
+let mutableSubject = $state<ControlSubject | undefined>();
+$effect(() => {
+  mutableSubject = subject ? { ...subject } : undefined;
+});
+function mutateSubject() {
+  if (mutableSubject) mutableSubject.id = 'two';
+}
+</script>
+
+<Form {formId} interactionRegistry={registry} aria-label="Profile form" oninput={formOnInput}>
+  <FormGroup label={displayNameLabel}>
+    <Input name="display-name" interaction={mutableSubject ? { subject: mutableSubject } : undefined} bind:value={displayName} required minlength={3} />
+  </FormGroup>
+  <FormGroup label="API token" interaction={{ sensitivity: 'secret' }}>
+    <Input name="api-token" type="password" bind:value={apiToken} />
+  </FormGroup>
+  <Slider name="volume" label="Volume" bind:value={volume} />
+  <Input name="score" aria-label="Score" type="number" bind:value={score} />
+  <Input name="birthday" aria-label="Birthday" type="date" bind:value={birthday} />
+  <Input name="meeting-time" aria-label="Meeting time" type="time" bind:value={meetingTime} />
+  <Input name="intensity" aria-label="Intensity" type="range" min="10" max="90" bind:value={intensity} />
+  <button type="reset">Reset</button>
+  {#if mutableSubject}
+    <button type="button" onclick={mutateSubject}>Mutate subject</button>
+  {/if}
+</Form>

package/dist/components/forms/__tests__/staged-review.fixture.svelte.d.ts

@@ -0,0 +1,12 @@
+import type { ControlInteractionRegistry, ControlSubject } from '../control-interaction.js';
+type $$ComponentProps = {
+    registry: ControlInteractionRegistry;
+    subject?: ControlSubject;
+    displayNameLabel?: string;
+    formOnInput?: (event: Event) => void;
+    formId?: string;
+};
+declare const StagedReview: import("svelte").Component<$$ComponentProps, {}, "">;
+type StagedReview = ReturnType<typeof StagedReview>;
+export default StagedReview;
+//# sourceMappingURL=staged-review.fixture.svelte.d.ts.map

package/dist/components/forms/__tests__/staged-review.fixture.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"staged-review.fixture.svelte.d.ts","sourceRoot":"","sources":["../../../../src/components/forms/__tests__/staged-review.fixture.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EACV,0BAA0B,EAC1B,cAAc,EACf,MAAM,2BAA2B,CAAC;AAMlC,KAAK,gBAAgB,GAAI;IACxB,QAAQ,EAAE,0BAA0B,CAAC;IACrC,OAAO,CAAC,EAAE,cAAc,CAAC;IACzB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;IACrC,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,CAAC;AAmDF,QAAA,MAAM,YAAY,sDAAwC,CAAC;AAC3D,KAAK,YAAY,GAAG,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC;AACpD,eAAe,YAAY,CAAC"}

package/dist/components/forms/control-interaction-context.d.ts

@@ -1,4 +1,4 @@
-import type { ControlInteractionRegistry } from './control-interaction.js';
+import type { ControlInteractionRegistry, ControlSubject } from './control-interaction.js';
 export interface ControlInteractionContextValue {
     readonly formId: string;
     readonly registry: ControlInteractionRegistry;
@@ -6,4 +6,12 @@ export interface ControlInteractionContextValue {
 export declare function setControlInteractionContext(context: ControlInteractionContextValue): void;
 export declare function tryGetControlInteractionContext(): ControlInteractionContextValue | undefined;
 export declare function getControlInteractionContext(): ControlInteractionContextValue;
+/**
+ * Records an edit made by a composite control's own user-event handler.
+ *
+ * Native inputs bubble trusted `input`/`change` events to their Form host.
+ * Composite controls must use this only after a user action has actually
+ * changed their value; programmatic setters deliberately do not call it.
+ */
+export declare function recordControlUserEdit(context: ControlInteractionContextValue | undefined, controlId: string | undefined, subject: ControlSubject | undefined): void;
 //# sourceMappingURL=control-interaction-context.d.ts.map

package/dist/components/forms/control-interaction-context.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"control-interaction-context.d.ts","sourceRoot":"","sources":["../../../src/components/forms/control-interaction-context.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,0BAA0B,EAAE,MAAM,0BAA0B,CAAC;AAI3E,MAAM,WAAW,8BAA8B;IAC7C,QAAQ,CAAC,MAAM,EAAE,MAAM,CAAC;IACxB,QAAQ,CAAC,QAAQ,EAAE,0BAA0B,CAAC;CAC/C;AAED,wBAAgB,4BAA4B,CAC1C,OAAO,EAAE,8BAA8B,GACtC,IAAI,CAEN;AAED,wBAAgB,+BAA+B,IAC3C,8BAA8B,GAC9B,SAAS,CAIZ;AAED,wBAAgB,4BAA4B,IAAI,8BAA8B,CAQ7E"}
+{"version":3,"file":"control-interaction-context.d.ts","sourceRoot":"","sources":["../../../src/components/forms/control-interaction-context.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EACV,0BAA0B,EAC1B,cAAc,EACf,MAAM,0BAA0B,CAAC;AAIlC,MAAM,WAAW,8BAA8B;IAC7C,QAAQ,CAAC,MAAM,EAAE,MAAM,CAAC;IACxB,QAAQ,CAAC,QAAQ,EAAE,0BAA0B,CAAC;CAC/C;AAED,wBAAgB,4BAA4B,CAC1C,OAAO,EAAE,8BAA8B,GACtC,IAAI,CAEN;AAED,wBAAgB,+BAA+B,IAC3C,8BAA8B,GAC9B,SAAS,CAIZ;AAED,wBAAgB,4BAA4B,IAAI,8BAA8B,CAQ7E;AAED;;;;;;GAMG;AACH,wBAAgB,qBAAqB,CACnC,OAAO,EAAE,8BAA8B,GAAG,SAAS,EACnD,SAAS,EAAE,MAAM,GAAG,SAAS,EAC7B,OAAO,EAAE,cAAc,GAAG,SAAS,GAClC,IAAI,CAON"}

package/dist/components/forms/control-interaction-context.js

@@ -13,3 +13,19 @@ export function getControlInteractionContext() {
     }
     return context;
 }
+/**
+ * Records an edit made by a composite control's own user-event handler.
+ *
+ * Native inputs bubble trusted `input`/`change` events to their Form host.
+ * Composite controls must use this only after a user action has actually
+ * changed their value; programmatic setters deliberately do not call it.
+ */
+export function recordControlUserEdit(context, controlId, subject) {
+    if (!context || !controlId)
+        return;
+    context.registry.recordUserEdit?.({
+        formId: context.formId,
+        controlId,
+        subject,
+    });
+}