@happyvertical/smrt-ui 0.43.4 → 0.43.5

package/dist/components/forms/MultiSelect.svelte

@@ -1,11 +1,24 @@
 <script lang="ts">
 import { tick } from 'svelte';
-import { highlightControl, revealControl } from './control-dom.js';
+import {
+  emitControlChange,
+  highlightControl,
+  revealControl,
+} from './control-dom.js';
 import type {
   ControlInteractionOptions,
   ControlOption,
 } from './control-interaction.js';
-import { tryGetControlInteractionContext } from './control-interaction-context.js';
+import {
+  recordControlUserEdit,
+  tryGetControlInteractionContext,
+} from './control-interaction-context.js';
+import {
+  normalizeCurrentOptionValues,
+  normalizeEnabledOptions,
+  prepareEnabledOptionValues,
+  validatesEnabledOptions,
+} from './control-value-validation.js';
 import { useControlRegistration } from './use-control-registration.svelte.js';
 export interface Props {
   options: ControlOption[];
@@ -40,30 +53,32 @@ let open = $state(false);
 const controlId = $derived(
   interaction === false ? undefined : (interaction?.id ?? name ?? listId),
 );
+const canonicalValues = $derived(normalizeCurrentOptionValues(options, values));
 const selectedLabels = $derived(
   options
     .filter((option) =>
-      values.some((value) => String(value) === String(option.value)),
+      canonicalValues.some((value) => Object.is(value, option.value)),
     )
     .map((option) => option.label),
 );
 function toggle(option: ControlOption) {
   if (option.disabled || disabled) return;
-  const has = values.some((value) => String(value) === String(option.value));
+  const has = canonicalValues.some((value) => Object.is(value, option.value));
   values = has
-    ? values.filter((value) => String(value) !== String(option.value))
-    : [...values, option.value];
+    ? canonicalValues.filter((value) => !Object.is(value, option.value))
+    : [...canonicalValues, option.value];
   onvalueschange?.(values);
+  recordControlUserEdit(
+    interactionContext,
+    controlId,
+    interaction === false ? undefined : interaction?.subject,
+  );
+  if (rootEl) emitControlChange(rootEl);
 }
 function setValues(next: unknown) {
-  if (!Array.isArray(next)) return;
-  values = options
-    .filter(
-      (option) =>
-        next.some((value) => String(value) === String(option.value)) &&
-        !option.disabled,
-    )
-    .map((option) => option.value);
+  const normalized = normalizeEnabledOptions(options, next);
+  if (!normalized) return;
+  values = normalized;
   onvalueschange?.(values);
 }
 async function openOptions(focusFirst = false) {
@@ -136,19 +151,26 @@ useControlRegistration(() => {
       writable: interaction?.writable,
       options,
     },
-    getValue: () => [...values],
+    getValue: () => [...canonicalValues],
+    prepareValue: (next) => prepareEnabledOptionValues(options, next),
     setValue: setValues,
-    clear: () => setValues([]),
+    clear: () => {
+      setValues([]);
+      return true;
+    },
     focus: () => trigger.focus(),
     reveal: () => revealControl(root),
     highlight: (durationMs) => highlightControl(root, durationMs),
-    getState: () => ({ disabled }),
+    validateValue: (next) => validatesEnabledOptions(options, next),
+    getState: () => ({ disabled: trigger.matches(':disabled') }),
   };
 });
 </script>
-<div bind:this={rootEl} class="multi-select {className}" data-smrt-control={controlId} data-smrt-form={interactionContext?.formId}>
+<div bind:this={rootEl} class="multi-select {className}" data-smrt-control={controlId} data-smrt-form={interactionContext?.formId}
+  data-smrt-subject-type={interaction === false ? undefined : interaction?.subject?.type}
+  data-smrt-subject-id={interaction === false ? undefined : interaction?.subject?.id}>
   <span class="label" id={`${listId}-label`}>{label}</span><button bind:this={triggerEl} id={triggerId} type="button" class="trigger" {disabled} aria-haspopup="listbox" aria-expanded={open} aria-controls={listId} aria-labelledby={`${listId}-label ${triggerId}`} onclick={() => open ? closeOptions() : openOptions()} onkeydown={handleTriggerKeydown}>{selectedLabels.length ? selectedLabels.join(', ') : placeholder}</button>
-  {#if open}<div id={listId} class="options" role="listbox" tabindex="-1" aria-multiselectable="true" aria-labelledby={`${listId}-label`} onkeydown={handleOptionsKeydown}>{#each options as option, index (option.value)}<button bind:this={optionEls[index]} type="button" role="option" tabindex="-1" aria-selected={values.some((value) => String(value) === String(option.value))} disabled={option.disabled} onclick={() => toggle(option)}><span aria-hidden="true">{values.some((value) => String(value) === String(option.value)) ? '✓' : ''}</span>{option.label}</button>{/each}</div>{/if}
+  {#if open}<div id={listId} class="options" role="listbox" tabindex="-1" aria-multiselectable="true" aria-labelledby={`${listId}-label`} onkeydown={handleOptionsKeydown}>{#each options as option, index (option.value)}<button bind:this={optionEls[index]} type="button" role="option" tabindex="-1" aria-selected={canonicalValues.some((value) => Object.is(value, option.value))} disabled={option.disabled} onclick={() => toggle(option)}><span aria-hidden="true">{canonicalValues.some((value) => Object.is(value, option.value)) ? '✓' : ''}</span>{option.label}</button>{/each}</div>{/if}
 </div>
 <style>
   .multi-select { position: relative; display: grid; gap: var(--smrt-spacing-1); color: var(--smrt-color-on-surface); } .label { font: var(--smrt-typography-label-large-font); }

package/dist/components/forms/MultiSelect.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MultiSelect.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/forms/MultiSelect.svelte.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EACV,yBAAyB,EACzB,aAAa,EACd,MAAM,0BAA0B,CAAC;AAIlC,MAAM,WAAW,KAAK;IACpB,OAAO,EAAE,aAAa,EAAE,CAAC;IACzB,MAAM,CAAC,EAAE,KAAK,CAAC,MAAM,GAAG,MAAM,CAAC,CAAC;IAChC,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,yBAAyB,GAAG,KAAK,CAAC;IAChD,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,KAAK,CAAC,MAAM,GAAG,MAAM,CAAC,KAAK,IAAI,CAAC;IAC1D,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAgJD,QAAA,MAAM,WAAW,iDAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}
+{"version":3,"file":"MultiSelect.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/forms/MultiSelect.svelte.ts"],"names":[],"mappings":"AASA,OAAO,KAAK,EACV,yBAAyB,EACzB,aAAa,EACd,MAAM,0BAA0B,CAAC;AAalC,MAAM,WAAW,KAAK;IACpB,OAAO,EAAE,aAAa,EAAE,CAAC;IACzB,MAAM,CAAC,EAAE,KAAK,CAAC,MAAM,GAAG,MAAM,CAAC,CAAC;IAChC,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,yBAAyB,GAAG,KAAK,CAAC;IAChD,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,KAAK,CAAC,MAAM,GAAG,MAAM,CAAC,KAAK,IAAI,CAAC;IAC1D,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAwJD,QAAA,MAAM,WAAW,iDAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}

package/dist/components/forms/RadioGroup.svelte

@@ -7,6 +7,10 @@ import type {
   ControlOption,
 } from './control-interaction.js';
 import { tryGetControlInteractionContext } from './control-interaction-context.js';
+import {
+  prepareEnabledOptionValue,
+  validatesEnabledOption,
+} from './control-value-validation.js';
 import { setRadioGroupContext } from './radio-group-context.js';
 import { useControlRegistration } from './use-control-registration.svelte.js';
 export interface Props {
@@ -90,6 +94,7 @@ useControlRegistration(() => {
       options,
     },
     getValue: () => value,
+    prepareValue: (next) => String(prepareEnabledOptionValue(options, next)),
     setValue: (next) => {
       const candidate = String(next);
       if (
@@ -99,14 +104,18 @@ useControlRegistration(() => {
       )
         setValue(candidate);
     },
-    clear: () => setValue(''),
+    clear: () => {
+      setValue('');
+      return true;
+    },
     focus: () =>
       element.querySelector<HTMLInputElement>('input:not(:disabled)')?.focus(),
     reveal: () => revealControl(element),
     highlight: (durationMs) => highlightControl(element, durationMs),
     validate: () => element.reportValidity(),
+    validateValue: (next) => validatesEnabledOption(options, next),
     getState: () => ({
-      disabled,
+      disabled: element.matches(':disabled'),
       valid: !required || !!value,
       validationMessage: error,
     }),
@@ -114,7 +123,9 @@ useControlRegistration(() => {
 });
 </script>
 <fieldset bind:this={fieldsetEl} class="radio-group {className}" {disabled}
-  aria-describedby={description ? `${name}-description` : undefined} data-smrt-control={controlId} data-smrt-form={interactionContext?.formId}>
+  aria-describedby={description ? `${name}-description` : undefined} data-smrt-control={controlId} data-smrt-form={interactionContext?.formId}
+  data-smrt-subject-type={interaction === false ? undefined : interaction?.subject?.type}
+  data-smrt-subject-id={interaction === false ? undefined : interaction?.subject?.id}>
   {#if label}<legend>{label}{#if required}<span aria-hidden="true"> *</span>{/if}</legend>{/if}
   {#if description}<p id={`${name}-description`} class="description">{description}</p>{/if}
   <div class="options">{@render children()}</div>

package/dist/components/forms/RadioGroup.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RadioGroup.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/forms/RadioGroup.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAGtC,OAAO,KAAK,EACV,yBAAyB,EAE1B,MAAM,0BAA0B,CAAC;AAKlC,MAAM,WAAW,KAAK;IACpB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,yBAAyB,GAAG,KAAK,CAAC;IAChD,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,QAAQ,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AA+GD,QAAA,MAAM,UAAU,gDAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}
+{"version":3,"file":"RadioGroup.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/forms/RadioGroup.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAGtC,OAAO,KAAK,EACV,yBAAyB,EAE1B,MAAM,0BAA0B,CAAC;AASlC,MAAM,WAAW,KAAK;IACpB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,yBAAyB,GAAG,KAAK,CAAC;IAChD,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,QAAQ,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAqHD,QAAA,MAAM,UAAU,gDAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}

package/dist/components/forms/RangeSlider.svelte

@@ -6,6 +6,10 @@ import {
 } from './control-dom.js';
 import type { ControlInteractionOptions } from './control-interaction.js';
 import { tryGetControlInteractionContext } from './control-interaction-context.js';
+import {
+  snapSteppedNumber,
+  validatesSteppedNumber,
+} from './control-value-validation.js';
 import { tryGetFormGroupContext } from './form-group-context.js';
 import type { RangeSliderValue } from './types.js';
 import { useControlRegistration } from './use-control-registration.svelte.js';
@@ -61,7 +65,22 @@ const controlId = $derived(
         `range-${instanceId}`),
 );
 function snap(next: number) {
-  return Math.min(max, Math.max(min, Math.round(next / step) * step));
+  return snapSteppedNumber(next, min, max, step);
+}
+function validateRange(next: unknown) {
+  if (!next || typeof next !== 'object' || Array.isArray(next)) return false;
+  const candidate = next as Record<string, unknown>;
+  if (
+    !Object.hasOwn(candidate, 'min') ||
+    !Object.hasOwn(candidate, 'max') ||
+    Object.keys(candidate).some((key) => key !== 'min' && key !== 'max')
+  )
+    return false;
+  return (
+    validatesSteppedNumber(candidate.min, min, max, step) &&
+    validatesSteppedNumber(candidate.max, min, max, step) &&
+    Number(candidate.min) <= Number(candidate.max)
+  );
 }
 function setRange(next: unknown) {
   if (!next || typeof next !== 'object') return;
@@ -70,8 +89,31 @@ function setRange(next: unknown) {
   const high = snap(Number(candidate.max ?? value.max));
   value = { min: Math.min(low, high), max: Math.max(low, high) };
   onvaluechange?.(value);
-  if (minEl) emitControlChange(minEl);
-  if (maxEl) emitControlChange(maxEl);
+  if (rootEl) emitControlChange(rootEl);
+}
+function prepareRange(next: unknown): RangeSliderValue {
+  if (!next || typeof next !== 'object' || Array.isArray(next)) {
+    throw new Error('staged_value_invalid');
+  }
+  const candidate = next as Partial<RangeSliderValue>;
+  if (
+    (typeof candidate.min !== 'number' && typeof candidate.min !== 'string') ||
+    (typeof candidate.max !== 'number' && typeof candidate.max !== 'string')
+  ) {
+    throw new Error('staged_value_invalid');
+  }
+  const prepared = { min: Number(candidate.min), max: Number(candidate.max) };
+  if (!Number.isFinite(prepared.min) || !Number.isFinite(prepared.max)) {
+    throw new Error('staged_value_invalid');
+  }
+  return {
+    min: validatesSteppedNumber(prepared.min, min, max, step)
+      ? snap(prepared.min)
+      : prepared.min,
+    max: validatesSteppedNumber(prepared.max, min, max, step)
+      ? snap(prepared.max)
+      : prepared.max,
+  };
 }
 function setMin(next: number) {
   setRange({ min: Math.min(next, value.max), max: value.max });
@@ -97,17 +139,30 @@ useControlRegistration(() => {
       unit,
     },
     getValue: () => ({ ...value }),
+    prepareValue: prepareRange,
     setValue: setRange,
-    clear: () => setRange({ min, max }),
+    clear: () => {
+      setRange({ min, max });
+      return true;
+    },
     focus: () => minEl?.focus(),
     reveal: () => revealControl(root),
     highlight: (durationMs) => highlightControl(root, durationMs),
     validate: () => value.min <= value.max,
-    getState: () => ({ disabled, valid: value.min <= value.max }),
+    validateValue: validateRange,
+    getState: () => ({
+      disabled:
+        disabled ||
+        minEl?.matches(':disabled') === true ||
+        maxEl?.matches(':disabled') === true,
+      valid: value.min <= value.max,
+    }),
   };
 });
 </script>
-<div bind:this={rootEl} class="range-slider {className}" class:disabled data-smrt-control={controlId} data-smrt-form={interactionContext?.formId} role="group" aria-label={label ?? formGroup?.().label ?? 'Range'}>
+<div bind:this={rootEl} class="range-slider {className}" class:disabled data-smrt-control={controlId} data-smrt-form={interactionContext?.formId}
+  data-smrt-subject-type={resolvedInteraction === false ? undefined : resolvedInteraction.subject?.type}
+  data-smrt-subject-id={resolvedInteraction === false ? undefined : resolvedInteraction.subject?.id} role="group" aria-label={label ?? formGroup?.().label ?? 'Range'}>
   {#if label}<div class="range-slider__header"><span>{label}</span><output>{value.min}{unit ?? ''} – {value.max}{unit ?? ''}</output></div>{/if}
   <div class="range-slider__track">
     <input bind:this={minEl} id={minId} type="range" name={name ? `${name}[min]` : undefined} {min} max={value.max} {step} {disabled} value={value.min}

package/dist/components/forms/RangeSlider.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RangeSlider.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/forms/RangeSlider.svelte.ts"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,0BAA0B,CAAC;AAG1E,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,YAAY,CAAC;AAGnD,MAAM,WAAW,KAAK;IACpB,KAAK,CAAC,EAAE,gBAAgB,CAAC;IACzB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,yBAAyB,GAAG,KAAK,CAAC;IAChD,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,gBAAgB,KAAK,IAAI,CAAC;IAClD,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AA2GD,QAAA,MAAM,WAAW,gDAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}
+{"version":3,"file":"RangeSlider.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/forms/RangeSlider.svelte.ts"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,0BAA0B,CAAC;AAO1E,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,YAAY,CAAC;AAGnD,MAAM,WAAW,KAAK;IACpB,KAAK,CAAC,EAAE,gBAAgB,CAAC;IACzB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,yBAAyB,GAAG,KAAK,CAAC;IAChD,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,gBAAgB,KAAK,IAAI,CAAC;IAClD,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AA6JD,QAAA,MAAM,WAAW,gDAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}

package/dist/components/forms/SegmentedControl.svelte

@@ -1,7 +1,18 @@
 <script lang="ts">
-import { highlightControl, revealControl } from './control-dom.js';
+import {
+  emitControlChange,
+  highlightControl,
+  revealControl,
+} from './control-dom.js';
 import type { ControlInteractionOptions } from './control-interaction.js';
-import { tryGetControlInteractionContext } from './control-interaction-context.js';
+import {
+  recordControlUserEdit,
+  tryGetControlInteractionContext,
+} from './control-interaction-context.js';
+import {
+  prepareEnabledOptionValue,
+  validatesEnabledOption,
+} from './control-value-validation.js';
 import type { SegmentedControlOption } from './types.js';
 import { useControlRegistration } from './use-control-registration.svelte.js';
 export interface Props {
@@ -34,11 +45,20 @@ const controlId = $derived(
     ? undefined
     : (interaction?.id ?? name ?? `segment-${instanceId}`),
 );
-function setValue(next: unknown) {
+function setValue(next: unknown, userEdit = false) {
   const option = options.find((item) => String(item.value) === String(next));
   if (!option || option.disabled) return;
+  const changed = !Object.is(value, option.value);
   value = option.value;
   onvaluechange?.(option.value);
+  if (userEdit && changed) {
+    recordControlUserEdit(
+      interactionContext,
+      controlId,
+      interaction === false ? undefined : interaction?.subject,
+    );
+    if (rootEl) emitControlChange(rootEl);
+  }
 }
 useControlRegistration(() => {
   const root = rootEl;
@@ -56,9 +76,11 @@ useControlRegistration(() => {
       options,
     },
     getValue: () => value,
+    prepareValue: (next) => prepareEnabledOptionValue(options, next),
     setValue,
     clear: () => {
       value = undefined;
+      return true;
     },
     focus: () =>
       root
@@ -66,15 +88,20 @@ useControlRegistration(() => {
         ?.focus(),
     reveal: () => revealControl(root),
     highlight: (durationMs) => highlightControl(root, durationMs),
-    getState: () => ({ disabled }),
+    validateValue: (next) => validatesEnabledOption(options, next),
+    getState: () => ({
+      disabled: disabled || root.closest('fieldset:disabled') !== null,
+    }),
   };
 });
 </script>
-<div bind:this={rootEl} class="segmented {className}" class:full-width={fullWidth} role="radiogroup" aria-label={label} data-smrt-control={controlId} data-smrt-form={interactionContext?.formId}>
+<div bind:this={rootEl} class="segmented {className}" class:full-width={fullWidth} role="radiogroup" aria-label={label} data-smrt-control={controlId} data-smrt-form={interactionContext?.formId}
+  data-smrt-subject-type={interaction === false ? undefined : interaction?.subject?.type}
+  data-smrt-subject-id={interaction === false ? undefined : interaction?.subject?.id}>
   {#each options as option (option.value)}
     <button type="button" role="radio" aria-checked={value === option.value} disabled={disabled || option.disabled}
       tabindex={value === option.value || (value === undefined && option === options[0]) ? 0 : -1}
-      class:selected={value === option.value} onclick={() => setValue(option.value)}>{option.label}</button>
+      class:selected={value === option.value} onclick={() => setValue(option.value, true)}>{option.label}</button>
   {/each}
 </div>
 <style>

package/dist/components/forms/SegmentedControl.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SegmentedControl.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/forms/SegmentedControl.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,0BAA0B,CAAC;AAE1E,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,YAAY,CAAC;AAGzD,MAAM,WAAW,KAAK;IACpB,OAAO,EAAE,sBAAsB,EAAE,CAAC;IAClC,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,WAAW,CAAC,EAAE,yBAAyB,GAAG,KAAK,CAAC;IAChD,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,KAAK,IAAI,CAAC;IACjD,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAwED,QAAA,MAAM,gBAAgB,gDAAwC,CAAC;AAC/D,KAAK,gBAAgB,GAAG,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAC5D,eAAe,gBAAgB,CAAC"}
+{"version":3,"file":"SegmentedControl.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/forms/SegmentedControl.svelte.ts"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,0BAA0B,CAAC;AAS1E,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,YAAY,CAAC;AAGzD,MAAM,WAAW,KAAK;IACpB,OAAO,EAAE,sBAAsB,EAAE,CAAC;IAClC,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,WAAW,CAAC,EAAE,yBAAyB,GAAG,KAAK,CAAC;IAChD,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,KAAK,IAAI,CAAC;IACjD,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAuFD,QAAA,MAAM,gBAAgB,gDAAwC,CAAC;AAC/D,KAAK,gBAAgB,GAAG,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAC5D,eAAe,gBAAgB,CAAC"}

package/dist/components/forms/Select.svelte

@@ -8,7 +8,9 @@ import {
 } from './control-dom.js';
 import type { ControlInteractionOptions } from './control-interaction.js';
 import { tryGetControlInteractionContext } from './control-interaction-context.js';
+import { prepareTextControlValue } from './control-value-validation.js';
 import { tryGetFormGroupContext } from './form-group-context.js';
+import { useControlRegistration } from './use-control-registration.svelte.js';
 
 export interface Props extends Omit<HTMLSelectAttributes, 'class' | 'value'> {
   value?: string;
@@ -59,14 +61,28 @@ function setControlValue(next: unknown) {
   if (selectEl) emitControlChange(selectEl);
 }
 
-$effect(() => {
-  const context = controlInteraction;
+function isOptionDisabled(option: HTMLOptionElement) {
+  return option.disabled || option.closest('optgroup')?.disabled === true;
+}
+
+function validateControlValue(next: unknown) {
+  const element = selectEl;
+  if (!element) return true;
+  const candidate = String(next ?? '');
+  if (candidate === '') return !required;
+  return Array.from(element.options).some(
+    (option) => option.value === candidate && !isOptionDisabled(option),
+  );
+}
+
+useControlRegistration(() => {
   const element = selectEl;
   const controlId = resolvedControlId;
   const options = resolvedInteraction;
-  if (!context || !element || !controlId || options === false) return;
-  return context.registry.register({
-    identity: { formId: context.formId, controlId, subject: options.subject },
+  if (!element || !controlId || options === false) return false;
+  return {
+    controlId,
+    subject: options.subject,
     metadata: {
       kind: 'select',
       label: formGroup?.().label ?? ariaLabel ?? undefined,
@@ -78,22 +94,27 @@ $effect(() => {
       options: Array.from(element.options).map((option) => ({
         value: option.value,
         label: option.label,
-        disabled: option.disabled,
+        disabled: isOptionDisabled(option),
       })),
     },
     getValue: () => value,
+    prepareValue: prepareTextControlValue,
     setValue: setControlValue,
-    clear: () => setControlValue(''),
+    clear: () => {
+      setControlValue('');
+      return true;
+    },
     focus: () => element.focus(),
     reveal: () => revealControl(element),
     highlight: (durationMs) => highlightControl(element, durationMs),
     validate: () => element.reportValidity(),
+    validateValue: validateControlValue,
     getState: () => ({
-      disabled: element.disabled,
+      disabled: element.matches(':disabled'),
       valid: element.validity.valid,
       validationMessage: element.validationMessage || undefined,
     }),
-  });
+  };
 });
 
 export function focus(): void {
@@ -118,6 +139,8 @@ export function getElement(): HTMLSelectElement | null {
 		class="select {className}"
 		data-smrt-control={resolvedControlId}
 		data-smrt-form={controlInteraction?.formId}
+		data-smrt-subject-type={resolvedInteraction === false ? undefined : resolvedInteraction.subject?.type}
+		data-smrt-subject-id={resolvedInteraction === false ? undefined : resolvedInteraction.subject?.id}
 	{...rest}
 >
 	{@render children()}

package/dist/components/forms/Select.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Select.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/forms/Select.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACtC,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,iBAAiB,CAAC;AAM5D,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,0BAA0B,CAAC;AAK1E,MAAM,WAAW,KAAM,SAAQ,IAAI,CAAC,oBAAoB,EAAE,OAAO,GAAG,OAAO,CAAC;IAC1E,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,yBAAyB,GAAG,KAAK,CAAC;IAChD,QAAQ,EAAE,OAAO,CAAC;CACnB;AA0GD,QAAA,MAAM,MAAM;iBAjBO,IAAI;sBAIC,iBAAiB,GAAG,IAAI;WAaI,CAAC;AACrD,KAAK,MAAM,GAAG,UAAU,CAAC,OAAO,MAAM,CAAC,CAAC;AACxC,eAAe,MAAM,CAAC"}
+{"version":3,"file":"Select.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/forms/Select.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACtC,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,iBAAiB,CAAC;AAM5D,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,0BAA0B,CAAC;AAO1E,MAAM,WAAW,KAAM,SAAQ,IAAI,CAAC,oBAAoB,EAAE,OAAO,GAAG,OAAO,CAAC;IAC1E,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,yBAAyB,GAAG,KAAK,CAAC;IAChD,QAAQ,EAAE,OAAO,CAAC;CACnB;AA+HD,QAAA,MAAM,MAAM;iBAjBO,IAAI;sBAIC,iBAAiB,GAAG,IAAI;WAaI,CAAC;AACrD,KAAK,MAAM,GAAG,UAAU,CAAC,OAAO,MAAM,CAAC,CAAC;AACxC,eAAe,MAAM,CAAC"}

package/dist/components/forms/Slider.svelte

@@ -7,6 +7,11 @@ import {
 } from './control-dom.js';
 import type { ControlInteractionOptions } from './control-interaction.js';
 import { tryGetControlInteractionContext } from './control-interaction-context.js';
+import {
+  prepareNumberControlValue,
+  snapSteppedNumber,
+  validatesSteppedNumber,
+} from './control-value-validation.js';
 import { tryGetFormGroupContext } from './form-group-context.js';
 import { useControlRegistration } from './use-control-registration.svelte.js';
 export interface Props
@@ -61,7 +66,7 @@ const controlId = $derived(
 );
 const percent = $derived(max === min ? 0 : ((value - min) / (max - min)) * 100);
 function clamp(next: number) {
-  return Math.min(max, Math.max(min, Math.round(next / step) * step));
+  return snapSteppedNumber(next, min, max, step);
 }
 function setValue(next: unknown) {
   const parsed = Number(next);
@@ -69,11 +74,19 @@ function setValue(next: unknown) {
   value = clamp(parsed);
   if (rangeEl) emitControlChange(rangeEl);
 }
+function prepareValue(next: unknown) {
+  const prepared = prepareNumberControlValue(next);
+  if (prepared === '') return clamp(0);
+  return typeof prepared === 'number' &&
+    validatesSteppedNumber(prepared, min, max, step)
+    ? clamp(prepared)
+    : prepared;
+}
 function handleInput(event: Event & { currentTarget: HTMLInputElement }) {
-  value = Number(event.currentTarget.value);
+  value = clamp(Number(event.currentTarget.value));
 }
 function handleChange(event: Event & { currentTarget: HTMLInputElement }) {
-  value = Number(event.currentTarget.value);
+  value = clamp(Number(event.currentTarget.value));
   onchange?.(event);
 }
 useControlRegistration(() => {
@@ -94,22 +107,29 @@ useControlRegistration(() => {
       unit,
     },
     getValue: () => value,
+    prepareValue,
     setValue,
-    clear: () => setValue(min),
+    clear: () => {
+      setValue(min);
+      return true;
+    },
     focus: () => element.focus(),
     reveal: () => revealControl(element),
     highlight: (durationMs) =>
       highlightControl(element.closest('.slider') ?? element, durationMs),
     validate: () => element.reportValidity(),
+    validateValue: (next) => validatesSteppedNumber(next, min, max, step),
     getState: () => ({
-      disabled: element.disabled,
+      disabled: element.matches(':disabled'),
       valid: element.validity.valid,
       validationMessage: element.validationMessage || undefined,
     }),
   };
 });
 </script>
-<div class="slider {className}" data-smrt-control={controlId} data-smrt-form={interactionContext?.formId}>
+<div class="slider {className}" data-smrt-control={controlId} data-smrt-form={interactionContext?.formId}
+  data-smrt-subject-type={resolvedInteraction === false ? undefined : resolvedInteraction.subject?.type}
+  data-smrt-subject-id={resolvedInteraction === false ? undefined : resolvedInteraction.subject?.id}>
   {#if label}<div class="slider__header"><label for={resolvedId}>{label}</label><output for={resolvedId}>{formatValue(value)}</output></div>{/if}
   <div class="slider__controls">
     <input bind:this={rangeEl} id={resolvedId} type="range" {name} {min} {max} {step} {disabled} value={value}

package/dist/components/forms/Slider.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Slider.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/forms/Slider.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,iBAAiB,CAAC;AAM3D,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,0BAA0B,CAAC;AAK1E,MAAM,WAAW,KACf,SAAQ,IAAI,CACV,mBAAmB,EACnB,MAAM,GAAG,OAAO,GAAG,OAAO,GAAG,KAAK,GAAG,KAAK,GAAG,MAAM,CACpD;IACD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IACxC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,yBAAyB,GAAG,KAAK,CAAC;CACjD;AAwGD,QAAA,MAAM,MAAM,gDAAwC,CAAC;AACrD,KAAK,MAAM,GAAG,UAAU,CAAC,OAAO,MAAM,CAAC,CAAC;AACxC,eAAe,MAAM,CAAC"}
+{"version":3,"file":"Slider.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/forms/Slider.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,iBAAiB,CAAC;AAM3D,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,0BAA0B,CAAC;AAU1E,MAAM,WAAW,KACf,SAAQ,IAAI,CACV,mBAAmB,EACnB,MAAM,GAAG,OAAO,GAAG,OAAO,GAAG,KAAK,GAAG,KAAK,GAAG,MAAM,CACpD;IACD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IACxC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,yBAAyB,GAAG,KAAK,CAAC;CACjD;AAsHD,QAAA,MAAM,MAAM,gDAAwC,CAAC;AACrD,KAAK,MAAM,GAAG,UAAU,CAAC,OAAO,MAAM,CAAC,CAAC;AACxC,eAAe,MAAM,CAAC"}