@happyvertical/smrt-svelte 0.43.3 → 0.43.5

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

@@ -38,7 +38,6 @@ vi.mock('../../../state/form-context.js', () => ({
         },
         toggleListening,
         registerField: vi.fn(),
-        unregisterField: vi.fn(),
         getFieldSchema: () => [],
     }),
 }));

package/dist/components/forms/__tests__/async-invalid-field.fixture.svelte

@@ -0,0 +1,30 @@
+<script lang="ts">
+import { onMount } from 'svelte';
+import {
+  type FieldDefinition,
+  tryGetFormContext,
+} from '../../../state/form-context.js';
+
+let {
+  validate,
+}: {
+  validate: () => boolean | Promise<boolean>;
+} = $props();
+
+const formContext = tryGetFormContext();
+const label = 'Async invalid field';
+
+onMount(() => {
+  const field: FieldDefinition = {
+    name: 'async-invalid',
+    type: 'text',
+    label,
+    getValue: () => 'proposal',
+    setValue: () => {},
+    validate,
+  };
+  return formContext?.registerField(field);
+});
+</script>
+
+<input aria-label={label} value="proposal" />

package/dist/components/forms/__tests__/async-invalid-field.fixture.svelte.d.ts

@@ -0,0 +1,7 @@
+type $$ComponentProps = {
+    validate: () => boolean | Promise<boolean>;
+};
+declare const AsyncInvalidField: import("svelte").Component<$$ComponentProps, {}, "">;
+type AsyncInvalidField = ReturnType<typeof AsyncInvalidField>;
+export default AsyncInvalidField;
+//# sourceMappingURL=async-invalid-field.fixture.svelte.d.ts.map

package/dist/components/forms/__tests__/async-invalid-field.fixture.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"async-invalid-field.fixture.svelte.d.ts","sourceRoot":"","sources":["../../../../src/components/forms/__tests__/async-invalid-field.fixture.svelte.ts"],"names":[],"mappings":"AASC,KAAK,gBAAgB,GAAI;IACxB,QAAQ,EAAE,MAAM,OAAO,GAAG,OAAO,CAAC,OAAO,CAAC,CAAC;CAC5C,CAAC;AA6BF,QAAA,MAAM,iBAAiB,sDAAwC,CAAC;AAChE,KAAK,iBAAiB,GAAG,UAAU,CAAC,OAAO,iBAAiB,CAAC,CAAC;AAC9D,eAAe,iBAAiB,CAAC"}

package/dist/components/forms/__tests__/async-validation-form.fixture.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+import Form from '../Form.svelte';
+import AsyncInvalidField from './async-invalid-field.fixture.svelte';
+
+let {
+  onsubmit,
+  validate,
+  webmcp = true,
+}: {
+  onsubmit: (data: Record<string, unknown>) => void | Promise<void>;
+  validate: () => boolean | Promise<boolean>;
+  webmcp?: boolean;
+} = $props();
+</script>
+
+<Form {onsubmit} {webmcp}>
+  <AsyncInvalidField {validate} />
+  <button type="submit">Submit</button>
+</Form>

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

@@ -0,0 +1,9 @@
+type $$ComponentProps = {
+    onsubmit: (data: Record<string, unknown>) => void | Promise<void>;
+    validate: () => boolean | Promise<boolean>;
+    webmcp?: boolean;
+};
+declare const AsyncValidationForm: import("svelte").Component<$$ComponentProps, {}, "">;
+type AsyncValidationForm = ReturnType<typeof AsyncValidationForm>;
+export default AsyncValidationForm;
+//# sourceMappingURL=async-validation-form.fixture.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"async-validation-form.fixture.svelte.d.ts","sourceRoot":"","sources":["../../../../src/components/forms/__tests__/async-validation-form.fixture.svelte.ts"],"names":[],"mappings":"AAMC,KAAK,gBAAgB,GAAI;IACxB,QAAQ,EAAE,CAAC,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IAClE,QAAQ,EAAE,MAAM,OAAO,GAAG,OAAO,CAAC,OAAO,CAAC,CAAC;IAC3C,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB,CAAC;AAmBF,QAAA,MAAM,mBAAmB,sDAAwC,CAAC;AAClE,KAAK,mBAAmB,GAAG,UAAU,CAAC,OAAO,mBAAmB,CAAC,CAAC;AAClE,eAAe,mBAAmB,CAAC"}

package/dist/components/forms/__tests__/async-validation-snapshot-form.fixture.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+import Form from '../Form.svelte';
+import TextInput from '../TextInput.svelte';
+import AsyncInvalidField from './async-invalid-field.fixture.svelte';
+
+let {
+  onsubmit,
+  validate,
+}: {
+  onsubmit: (data: Record<string, unknown>) => void | Promise<void>;
+  validate: () => boolean | Promise<boolean>;
+} = $props();
+
+let laterValue = $state('before');
+</script>
+
+<Form {onsubmit} webmcp>
+  <AsyncInvalidField {validate} />
+  <TextInput name="later" label="Later value" bind:value={laterValue} />
+  <button type="submit">Submit</button>
+</Form>

package/dist/components/forms/__tests__/async-validation-snapshot-form.fixture.svelte.d.ts

@@ -0,0 +1,8 @@
+type $$ComponentProps = {
+    onsubmit: (data: Record<string, unknown>) => void | Promise<void>;
+    validate: () => boolean | Promise<boolean>;
+};
+declare const AsyncValidationSnapshotForm: import("svelte").Component<$$ComponentProps, {}, "">;
+type AsyncValidationSnapshotForm = ReturnType<typeof AsyncValidationSnapshotForm>;
+export default AsyncValidationSnapshotForm;
+//# sourceMappingURL=async-validation-snapshot-form.fixture.svelte.d.ts.map

package/dist/components/forms/__tests__/async-validation-snapshot-form.fixture.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"async-validation-snapshot-form.fixture.svelte.d.ts","sourceRoot":"","sources":["../../../../src/components/forms/__tests__/async-validation-snapshot-form.fixture.svelte.ts"],"names":[],"mappings":"AAOC,KAAK,gBAAgB,GAAI;IACxB,QAAQ,EAAE,CAAC,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IAClE,QAAQ,EAAE,MAAM,OAAO,GAAG,OAAO,CAAC,OAAO,CAAC,CAAC;CAC5C,CAAC;AAsBF,QAAA,MAAM,2BAA2B,sDAAwC,CAAC;AAC1E,KAAK,2BAA2B,GAAG,UAAU,CAAC,OAAO,2BAA2B,CAAC,CAAC;AAClF,eAAe,2BAA2B,CAAC"}

package/dist/components/forms/__tests__/compound-registration-wrapper.fixture.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+import { getFormContext } from '../../../state/form-context.js';
+import CustomRegistrationField from './custom-registration-field.fixture.svelte';
+
+let {
+  showFirst,
+  showReplacement,
+  legacyCleanup,
+}: {
+  showFirst: boolean;
+  showReplacement: boolean;
+  legacyCleanup: boolean;
+} = $props();
+
+// Compound fields often read the context for their own coordination before
+// mounting nested custom fields. Their descendants must still own cleanup.
+const formId = getFormContext().formId;
+</script>
+
+<div data-compound-form={formId}>
+  {#if showFirst}
+    <CustomRegistrationField name="custom-shared" label="Custom first" {legacyCleanup} />
+  {/if}
+  {#if showReplacement}
+    <CustomRegistrationField name="custom-shared" label="Custom replacement" {legacyCleanup} />
+  {/if}
+</div>

package/dist/components/forms/__tests__/compound-registration-wrapper.fixture.svelte.d.ts

@@ -0,0 +1,9 @@
+type $$ComponentProps = {
+    showFirst: boolean;
+    showReplacement: boolean;
+    legacyCleanup: boolean;
+};
+declare const CompoundRegistrationWrapper: import("svelte").Component<$$ComponentProps, {}, "">;
+type CompoundRegistrationWrapper = ReturnType<typeof CompoundRegistrationWrapper>;
+export default CompoundRegistrationWrapper;
+//# sourceMappingURL=compound-registration-wrapper.fixture.svelte.d.ts.map

package/dist/components/forms/__tests__/compound-registration-wrapper.fixture.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"compound-registration-wrapper.fixture.svelte.d.ts","sourceRoot":"","sources":["../../../../src/components/forms/__tests__/compound-registration-wrapper.fixture.svelte.ts"],"names":[],"mappings":"AAMC,KAAK,gBAAgB,GAAI;IACxB,SAAS,EAAE,OAAO,CAAC;IACnB,eAAe,EAAE,OAAO,CAAC;IACzB,aAAa,EAAE,OAAO,CAAC;CACxB,CAAC;AA2BF,QAAA,MAAM,2BAA2B,sDAAwC,CAAC;AAC1E,KAAK,2BAA2B,GAAG,UAAU,CAAC,OAAO,2BAA2B,CAAC,CAAC;AAClF,eAAe,2BAA2B,CAAC"}

package/dist/components/forms/__tests__/custom-registration-field.fixture.svelte

@@ -0,0 +1,48 @@
+<script lang="ts">
+import { onMount } from 'svelte';
+import {
+  type FieldDefinition,
+  getFormContext,
+  tryGetFormContext,
+} from '../../../state/form-context.js';
+
+let {
+  name,
+  label,
+  legacyCleanup = false,
+  separateLegacyCleanupContext = false,
+}: {
+  name: string;
+  label: string;
+  legacyCleanup?: boolean;
+  separateLegacyCleanupContext?: boolean;
+} = $props();
+
+let value = $state('');
+const formContext = tryGetFormContext();
+// Legacy helpers sometimes obtain the context again for teardown. The accessors
+// must retain this component's ownership boundary across both calls.
+// svelte-ignore state_referenced_locally
+const cleanupContext = separateLegacyCleanupContext
+  ? getFormContext()
+  : formContext;
+
+onMount(() => {
+  const field: FieldDefinition = {
+    name,
+    type: 'text',
+    label,
+    setValue: (next) => {
+      value = String(next ?? '');
+    },
+    getValue: () => value,
+  };
+  const dispose = formContext?.registerField(field);
+  if (!formContext) return;
+  return legacyCleanup
+    ? () => cleanupContext?.unregisterField(field.name)
+    : dispose;
+});
+</script>
+
+<input {name} aria-label={label} bind:value />

package/dist/components/forms/__tests__/custom-registration-field.fixture.svelte.d.ts

@@ -0,0 +1,10 @@
+type $$ComponentProps = {
+    name: string;
+    label: string;
+    legacyCleanup?: boolean;
+    separateLegacyCleanupContext?: boolean;
+};
+declare const CustomRegistrationField: import("svelte").Component<$$ComponentProps, {}, "">;
+type CustomRegistrationField = ReturnType<typeof CustomRegistrationField>;
+export default CustomRegistrationField;
+//# sourceMappingURL=custom-registration-field.fixture.svelte.d.ts.map

package/dist/components/forms/__tests__/custom-registration-field.fixture.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"custom-registration-field.fixture.svelte.d.ts","sourceRoot":"","sources":["../../../../src/components/forms/__tests__/custom-registration-field.fixture.svelte.ts"],"names":[],"mappings":"AAUC,KAAK,gBAAgB,GAAI;IACxB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,4BAA4B,CAAC,EAAE,OAAO,CAAC;CACxC,CAAC;AA2CF,QAAA,MAAM,uBAAuB,sDAAwC,CAAC;AACtE,KAAK,uBAAuB,GAAG,UAAU,CAAC,OAAO,uBAAuB,CAAC,CAAC;AAC1E,eAAe,uBAAuB,CAAC"}

package/dist/components/forms/__tests__/form-extraction-values.fixture.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+import DateRangeInput from '../DateRangeInput.svelte';
+import Form from '../Form.svelte';
+import NumberInput from '../NumberInput.svelte';
+import TextInput from '../TextInput.svelte';
+
+let {
+  onagechange,
+  ondateschange,
+  ontextchange,
+  showDateRange = false,
+}: {
+  onagechange?: (value: number | null) => void;
+  ondateschange?: (value: { startDate: string; endDate: string }) => void;
+  ontextchange?: (value: string) => void;
+  showDateRange?: boolean;
+} = $props();
+</script>
+
+<Form showFormListen sttAdapter="browser-speech">
+  <NumberInput name="age" label="Age" onchange={onagechange} />
+  {#if showDateRange}
+    <DateRangeInput name="dates" label="Dates" onchange={ondateschange} />
+  {/if}
+  <TextInput name="fullname" label="Full name" onchange={ontextchange} />
+</Form>

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

@@ -0,0 +1,13 @@
+type $$ComponentProps = {
+    onagechange?: (value: number | null) => void;
+    ondateschange?: (value: {
+        startDate: string;
+        endDate: string;
+    }) => void;
+    ontextchange?: (value: string) => void;
+    showDateRange?: boolean;
+};
+declare const FormExtractionValues: import("svelte").Component<$$ComponentProps, {}, "">;
+type FormExtractionValues = ReturnType<typeof FormExtractionValues>;
+export default FormExtractionValues;
+//# sourceMappingURL=form-extraction-values.fixture.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"form-extraction-values.fixture.svelte.d.ts","sourceRoot":"","sources":["../../../../src/components/forms/__tests__/form-extraction-values.fixture.svelte.ts"],"names":[],"mappings":"AAQC,KAAK,gBAAgB,GAAI;IACxB,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IAC7C,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE;QAAE,SAAS,EAAE,MAAM,CAAC;QAAC,OAAO,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;IACxE,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB,CAAC;AAyBF,QAAA,MAAM,oBAAoB,sDAAwC,CAAC;AACnE,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,oBAAoB,CAAC,CAAC;AACpE,eAAe,oBAAoB,CAAC"}

package/dist/components/forms/__tests__/form-registration-lifecycle.fixture.svelte

@@ -0,0 +1,52 @@
+<script lang="ts">
+import type { ControlInteractionRegistry } from '@happyvertical/smrt-ui/forms';
+import Form from '../Form.svelte';
+import TextInput from '../TextInput.svelte';
+import CompoundRegistrationWrapper from './compound-registration-wrapper.fixture.svelte';
+import CustomRegistrationField from './custom-registration-field.fixture.svelte';
+
+let {
+  interactionRegistry,
+  firstName = 'first',
+  showFirst = true,
+  showReplacement = false,
+  showCustomFirst = false,
+  showCustomReplacement = false,
+  legacyCustomCleanup = false,
+  separateLegacyCleanupContext = false,
+  compoundLegacyCustom = false,
+}: {
+  interactionRegistry: ControlInteractionRegistry;
+  firstName?: string;
+  showFirst?: boolean;
+  showReplacement?: boolean;
+  showCustomFirst?: boolean;
+  showCustomReplacement?: boolean;
+  legacyCustomCleanup?: boolean;
+  separateLegacyCleanupContext?: boolean;
+  compoundLegacyCustom?: boolean;
+} = $props();
+</script>
+
+<Form {interactionRegistry} formId="registration-lifecycle">
+  {#if showFirst}
+    <TextInput name={firstName} label="First field" />
+  {/if}
+  {#if showReplacement}
+    <TextInput name="shared" label="Replacement field" />
+  {/if}
+  {#if compoundLegacyCustom}
+    <CompoundRegistrationWrapper
+      showFirst={showCustomFirst}
+      showReplacement={showCustomReplacement}
+      legacyCleanup={legacyCustomCleanup}
+    />
+  {:else}
+    {#if showCustomFirst}
+      <CustomRegistrationField name="custom-shared" label="Custom first" legacyCleanup={legacyCustomCleanup} {separateLegacyCleanupContext} />
+    {/if}
+    {#if showCustomReplacement}
+      <CustomRegistrationField name="custom-shared" label="Custom replacement" legacyCleanup={legacyCustomCleanup} {separateLegacyCleanupContext} />
+    {/if}
+  {/if}
+</Form>

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

@@ -0,0 +1,16 @@
+import type { ControlInteractionRegistry } from '@happyvertical/smrt-ui/forms';
+type $$ComponentProps = {
+    interactionRegistry: ControlInteractionRegistry;
+    firstName?: string;
+    showFirst?: boolean;
+    showReplacement?: boolean;
+    showCustomFirst?: boolean;
+    showCustomReplacement?: boolean;
+    legacyCustomCleanup?: boolean;
+    separateLegacyCleanupContext?: boolean;
+    compoundLegacyCustom?: boolean;
+};
+declare const FormRegistrationLifecycle: import("svelte").Component<$$ComponentProps, {}, "">;
+type FormRegistrationLifecycle = ReturnType<typeof FormRegistrationLifecycle>;
+export default FormRegistrationLifecycle;
+//# sourceMappingURL=form-registration-lifecycle.fixture.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"form-registration-lifecycle.fixture.svelte.d.ts","sourceRoot":"","sources":["../../../../src/components/forms/__tests__/form-registration-lifecycle.fixture.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,0BAA0B,EAAE,MAAM,8BAA8B,CAAC;AAM9E,KAAK,gBAAgB,GAAI;IACxB,mBAAmB,EAAE,0BAA0B,CAAC;IAChD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,4BAA4B,CAAC,EAAE,OAAO,CAAC;IACvC,oBAAoB,CAAC,EAAE,OAAO,CAAC;CAChC,CAAC;AA0CF,QAAA,MAAM,yBAAyB,sDAAwC,CAAC;AACxE,KAAK,yBAAyB,GAAG,UAAU,CAAC,OAAO,yBAAyB,CAAC,CAAC;AAC9E,eAAe,yBAAyB,CAAC"}

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

@@ -3,8 +3,15 @@
  *  Form's field-registration → value-collection → onsubmit contract can be
  *  exercised end-to-end (the submit handler reads each registered field's
  *  getValue()). */
+import type { ControlInteractionRegistry } from '@happyvertical/smrt-ui/forms';
+import CheckboxInput from '../CheckboxInput.svelte';
+import DateTimeInput from '../DateTimeInput.svelte';
 import Form from '../Form.svelte';
+import MoneyInput from '../MoneyInput.svelte';
 import NumberInput from '../NumberInput.svelte';
+import PhoneInput from '../PhoneInput.svelte';
+import SelectInput from '../SelectInput.svelte';
+import TextareaInput from '../TextareaInput.svelte';
 import TextInput from '../TextInput.svelte';
 
 let {
@@ -14,11 +21,36 @@ let {
   textValue = '',
   numberValue = null,
   showAge = true,
+  showMoney = false,
+  showClearFields = false,
+  showScalarFields = false,
+  checkboxValue = true,
+  checkboxRequired = false,
+  selectValue = 'second',
+  selectRequired = false,
+  dateValue = '',
+  phoneValue = '',
+  notesValue = '',
+  notesAppendMode = false,
+  notesRequired = false,
+  moneyMin = undefined,
+  moneyMax = undefined,
   webmcp = false,
   textRequired = false,
+  textDisabled = false,
+  fieldsetDisabled = false,
+  formSubject = undefined,
   ageRequired = false,
+  ageLabel = 'Age',
   ageMin = undefined,
   ageMax = undefined,
+  ageStep = undefined,
+  interactionRegistry = undefined,
+  ontextchange = undefined,
+  oncheckboxchange = undefined,
+  onselectchange = undefined,
+  onnoteschange = undefined,
+  onnumberchange = undefined,
 }: {
   onsubmit?: (data: Record<string, unknown>) => void;
   method?: 'GET' | 'POST';
@@ -26,30 +58,101 @@ let {
   textValue?: string;
   numberValue?: number | null;
   showAge?: boolean;
+  showMoney?: boolean;
+  showClearFields?: boolean;
+  showScalarFields?: boolean;
+  checkboxValue?: boolean;
+  checkboxRequired?: boolean;
+  selectValue?: string;
+  selectRequired?: boolean;
+  dateValue?: string;
+  phoneValue?: string;
+  notesValue?: string;
+  notesAppendMode?: boolean;
+  notesRequired?: boolean;
+  moneyMin?: number;
+  moneyMax?: number;
   webmcp?: boolean;
   textRequired?: boolean;
+  textDisabled?: boolean;
+  fieldsetDisabled?: boolean;
+  formSubject?: { type: string; id: string; label?: string };
   ageRequired?: boolean;
+  ageLabel?: string;
   ageMin?: number;
   ageMax?: number;
+  ageStep?: number;
+  interactionRegistry?: ControlInteractionRegistry;
+  ontextchange?: (value: string) => void;
+  oncheckboxchange?: (value: boolean) => void;
+  onselectchange?: (value: string) => void;
+  onnoteschange?: (value: string) => void;
+  onnumberchange?: (value: number | null) => void;
 } = $props();
+let lastSubject: { type: string; id: string; label?: string } | undefined;
+let mutableSubject = $state<
+  { type: string; id: string; label?: string } | undefined
+>(undefined);
+const mutateSubjectLabel = 'Mutate subject';
+$effect(() => {
+  const nextSubject = formSubject;
+  if (nextSubject !== lastSubject) {
+    lastSubject = nextSubject;
+    mutableSubject = nextSubject ? { ...nextSubject } : undefined;
+  }
+});
+function mutateSubject() {
+  if (mutableSubject) mutableSubject.id = 'person-mutated';
+}
 </script>
 
-<Form {onsubmit} {method} {action} {webmcp}>
+<Form {onsubmit} {method} {action} {webmcp} {interactionRegistry} subject={mutableSubject}>
+	<fieldset disabled={fieldsetDisabled}>
 	<TextInput
 		name="fullname"
 		label="Full name"
-		required={textRequired}
+			required={textRequired}
+			disabled={textDisabled}
+			onchange={ontextchange}
 		bind:value={textValue}
 	/>
 	{#if showAge}
-		<NumberInput
-			name="age"
-			label="Age"
+			<NumberInput
+				name="age"
+				label={ageLabel}
 			required={ageRequired}
 			min={ageMin}
 			max={ageMax}
+			step={ageStep}
+			onchange={onnumberchange}
 			bind:value={numberValue}
 		/>
 	{/if}
+	{#if showMoney}
+			<MoneyInput name="budget" label="Budget" min={moneyMin} max={moneyMax} />
+	{/if}
+	{#if showClearFields}
+		<CheckboxInput name="enabled" label="Enabled" required={checkboxRequired} onchange={oncheckboxchange} bind:checked={checkboxValue} />
+		<SelectInput
+			name="choice"
+			label="Choice"
+			required={selectRequired}
+			onchange={onselectchange}
+			options={[
+				{ value: 'first', label: 'First' },
+				{ value: 'second', label: 'Second' },
+			]}
+			bind:value={selectValue}
+		/>
+	{/if}
+	{#if showScalarFields}
+		<DateTimeInput name="appointment" label="Appointment" includeTime={false} bind:value={dateValue} />
+		<PhoneInput name="phone" label="Phone" bind:value={phoneValue} />
+		<TextareaInput name="notes" label="Notes" required={notesRequired} appendMode={notesAppendMode} onchange={onnoteschange} bind:value={notesValue} />
+	{/if}
+	</fieldset>
+	{#if mutableSubject}
+		<button type="button" onclick={mutateSubject}>{mutateSubjectLabel}</button>
+	{/if}
 	<button type="submit">Submit</button>
 </Form>

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

@@ -1,3 +1,8 @@
+/** Test fixture (S11 #1416): a Form wrapping a TextInput + NumberInput so the
+ *  Form's field-registration → value-collection → onsubmit contract can be
+ *  exercised end-to-end (the submit handler reads each registered field's
+ *  getValue()). */
+import type { ControlInteractionRegistry } from '@happyvertical/smrt-ui/forms';
 type $$ComponentProps = {
     onsubmit?: (data: Record<string, unknown>) => void;
     method?: 'GET' | 'POST';
@@ -5,11 +10,40 @@ type $$ComponentProps = {
     textValue?: string;
     numberValue?: number | null;
     showAge?: boolean;
+    showMoney?: boolean;
+    showClearFields?: boolean;
+    showScalarFields?: boolean;
+    checkboxValue?: boolean;
+    checkboxRequired?: boolean;
+    selectValue?: string;
+    selectRequired?: boolean;
+    dateValue?: string;
+    phoneValue?: string;
+    notesValue?: string;
+    notesAppendMode?: boolean;
+    notesRequired?: boolean;
+    moneyMin?: number;
+    moneyMax?: number;
     webmcp?: boolean;
     textRequired?: boolean;
+    textDisabled?: boolean;
+    fieldsetDisabled?: boolean;
+    formSubject?: {
+        type: string;
+        id: string;
+        label?: string;
+    };
     ageRequired?: boolean;
+    ageLabel?: string;
     ageMin?: number;
     ageMax?: number;
+    ageStep?: number;
+    interactionRegistry?: ControlInteractionRegistry;
+    ontextchange?: (value: string) => void;
+    oncheckboxchange?: (value: boolean) => void;
+    onselectchange?: (value: string) => void;
+    onnoteschange?: (value: string) => void;
+    onnumberchange?: (value: number | null) => void;
 };
 declare const FormWithFields: import("svelte").Component<$$ComponentProps, {}, "">;
 type FormWithFields = ReturnType<typeof FormWithFields>;

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

@@ -1 +1 @@
-{"version":3,"file":"form-with-fields.fixture.svelte.d.ts","sourceRoot":"","sources":["../../../../src/components/forms/__tests__/form-with-fields.fixture.svelte.ts"],"names":[],"mappings":"AAWC,KAAK,gBAAgB,GAAI;IACxB,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,KAAK,IAAI,CAAC;IACnD,MAAM,CAAC,EAAE,KAAK,GAAG,MAAM,CAAC;IACxB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC5B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,CAAC;AAgCF,QAAA,MAAM,cAAc,sDAAwC,CAAC;AAC7D,KAAK,cAAc,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AACxD,eAAe,cAAc,CAAC"}
+{"version":3,"file":"form-with-fields.fixture.svelte.d.ts","sourceRoot":"","sources":["../../../../src/components/forms/__tests__/form-with-fields.fixture.svelte.ts"],"names":[],"mappings":"AAGA;;;mBAGmB;AACnB,OAAO,KAAK,EAAE,0BAA0B,EAAE,MAAM,8BAA8B,CAAC;AAW9E,KAAK,gBAAgB,GAAI;IACxB,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,KAAK,IAAI,CAAC;IACnD,MAAM,CAAC,EAAE,KAAK,GAAG,MAAM,CAAC;IACxB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC5B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,WAAW,CAAC,EAAE;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,EAAE,EAAE,MAAM,CAAC;QAAC,KAAK,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAC3D,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,mBAAmB,CAAC,EAAE,0BAA0B,CAAC;IACjD,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,gBAAgB,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;IAC5C,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;CACjD,CAAC;AAmGF,QAAA,MAAM,cAAc,sDAAwC,CAAC;AAC7D,KAAK,cAAc,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AACxD,eAAe,cAAc,CAAC"}

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

@@ -0,0 +1,24 @@
+<script lang="ts">
+import type {
+  ControlInteractionRegistry,
+  ControlSensitivity,
+} from '@happyvertical/smrt-ui/forms';
+import Form from '../Form.svelte';
+import PolicyField from './policy-field.fixture.svelte';
+
+let {
+  webmcp = false,
+  interactionRegistry,
+  sensitivity = 'public',
+  writable = true,
+}: {
+  webmcp?: boolean;
+  interactionRegistry?: ControlInteractionRegistry;
+  sensitivity?: ControlSensitivity;
+  writable?: boolean;
+} = $props();
+</script>
+
+<Form {webmcp} {interactionRegistry} formId="policy-form">
+  <PolicyField sensitivity={sensitivity === 'secret' ? 'secret' : 'public'} {writable} />
+</Form>

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

@@ -0,0 +1,11 @@
+import type { ControlInteractionRegistry, ControlSensitivity } from '@happyvertical/smrt-ui/forms';
+type $$ComponentProps = {
+    webmcp?: boolean;
+    interactionRegistry?: ControlInteractionRegistry;
+    sensitivity?: ControlSensitivity;
+    writable?: boolean;
+};
+declare const FormWithPolicyField: import("svelte").Component<$$ComponentProps, {}, "">;
+type FormWithPolicyField = ReturnType<typeof FormWithPolicyField>;
+export default FormWithPolicyField;
+//# sourceMappingURL=form-with-policy-field.fixture.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"form-with-policy-field.fixture.svelte.d.ts","sourceRoot":"","sources":["../../../../src/components/forms/__tests__/form-with-policy-field.fixture.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EACV,0BAA0B,EAC1B,kBAAkB,EACnB,MAAM,8BAA8B,CAAC;AAIrC,KAAK,gBAAgB,GAAI;IACxB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,mBAAmB,CAAC,EAAE,0BAA0B,CAAC;IACjD,WAAW,CAAC,EAAE,kBAAkB,CAAC;IACjC,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAoBF,QAAA,MAAM,mBAAmB,sDAAwC,CAAC;AAClE,KAAK,mBAAmB,GAAG,UAAU,CAAC,OAAO,mBAAmB,CAAC,CAAC;AAClE,eAAe,mBAAmB,CAAC"}