@happyvertical/smrt-ui 0.38.26 → 0.39.0

package/dist/components/forms/RadioGroup.svelte

@@ -0,0 +1,130 @@
+<script lang="ts">
+import type { Snippet } from 'svelte';
+import { untrack } from 'svelte';
+import { highlightControl, revealControl } from './control-dom.js';
+import type {
+  ControlInteractionOptions,
+  ControlOption,
+} from './control-interaction.js';
+import { tryGetControlInteractionContext } from './control-interaction-context.js';
+import { setRadioGroupContext } from './radio-group-context.js';
+import { useControlRegistration } from './use-control-registration.svelte.js';
+export interface Props {
+  name: string;
+  value?: string;
+  label?: string;
+  description?: string;
+  error?: string;
+  disabled?: boolean;
+  required?: boolean;
+  interaction?: ControlInteractionOptions | false;
+  onvaluechange?: (value: string) => void;
+  children: Snippet;
+  class?: string;
+}
+let {
+  name,
+  value = $bindable(''),
+  label,
+  description,
+  error,
+  disabled = false,
+  required = false,
+  interaction,
+  onvaluechange,
+  children,
+  class: className = '',
+}: Props = $props();
+const interactionContext = tryGetControlInteractionContext();
+let fieldsetEl = $state<HTMLFieldSetElement | null>(null);
+let options = $state<ControlOption[]>([]);
+function setValue(next: string) {
+  value = next;
+  onvaluechange?.(next);
+}
+setRadioGroupContext({
+  get name() {
+    return name;
+  },
+  get value() {
+    return value;
+  },
+  get disabled() {
+    return disabled;
+  },
+  get required() {
+    return required;
+  },
+  setValue,
+  registerOption(option) {
+    return untrack(() => {
+      options = [
+        ...options.filter((item) => item.value !== option.value),
+        option,
+      ];
+      return () => {
+        untrack(() => {
+          options = options.filter((item) => item.value !== option.value);
+        });
+      };
+    });
+  },
+});
+const controlId = $derived(
+  interaction === false ? undefined : (interaction?.id ?? name),
+);
+useControlRegistration(() => {
+  const element = fieldsetEl;
+  if (!element || interaction === false) return false;
+  return {
+    controlId,
+    subject: interaction?.subject,
+    metadata: {
+      kind: 'radio-group',
+      label,
+      description: interaction?.description ?? description,
+      sensitivity: interaction?.sensitivity ?? 'public',
+      readable: interaction?.readable,
+      writable: interaction?.writable,
+      constraints: { required },
+      options,
+    },
+    getValue: () => value,
+    setValue: (next) => {
+      const candidate = String(next);
+      if (
+        options.some(
+          (option) => String(option.value) === candidate && !option.disabled,
+        )
+      )
+        setValue(candidate);
+    },
+    clear: () => setValue(''),
+    focus: () =>
+      element.querySelector<HTMLInputElement>('input:not(:disabled)')?.focus(),
+    reveal: () => revealControl(element),
+    highlight: (durationMs) => highlightControl(element, durationMs),
+    validate: () => element.reportValidity(),
+    getState: () => ({
+      disabled,
+      valid: !required || !!value,
+      validationMessage: error,
+    }),
+  };
+});
+</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}>
+  {#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>
+  {#if error}<p class="error" role="alert">{error}</p>{/if}
+</fieldset>
+<style>
+  .radio-group { margin: 0; padding: 0; border: 0; color: var(--smrt-color-on-surface); }
+  legend { margin-bottom: var(--smrt-spacing-2); font: var(--smrt-typography-label-large-font); }
+  .description, .error { margin: var(--smrt-spacing-1) 0 var(--smrt-spacing-2); font: var(--smrt-typography-body-small-font); color: var(--smrt-color-on-surface-variant); }
+  .error { color: var(--smrt-color-error); }
+  .options { display: flex; flex-wrap: wrap; gap: var(--smrt-spacing-3); }
+  :global(.radio-group[data-smrt-highlighted='true']) { outline: 3px solid var(--smrt-color-tertiary); outline-offset: 4px; border-radius: var(--smrt-radius-small); }
+</style>

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

@@ -0,0 +1,19 @@
+import type { Snippet } from 'svelte';
+import type { ControlInteractionOptions } from './control-interaction.js';
+export interface Props {
+    name: string;
+    value?: string;
+    label?: string;
+    description?: string;
+    error?: string;
+    disabled?: boolean;
+    required?: boolean;
+    interaction?: ControlInteractionOptions | false;
+    onvaluechange?: (value: string) => void;
+    children: Snippet;
+    class?: string;
+}
+declare const RadioGroup: import("svelte").Component<Props, {}, "value">;
+type RadioGroup = ReturnType<typeof RadioGroup>;
+export default RadioGroup;
+//# sourceMappingURL=RadioGroup.svelte.d.ts.map

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

@@ -0,0 +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"}

package/dist/components/forms/RangeSlider.svelte

@@ -0,0 +1,137 @@
+<script lang="ts">
+import {
+  emitControlChange,
+  highlightControl,
+  revealControl,
+} from './control-dom.js';
+import type { ControlInteractionOptions } from './control-interaction.js';
+import { tryGetControlInteractionContext } from './control-interaction-context.js';
+import { tryGetFormGroupContext } from './form-group-context.js';
+import type { RangeSliderValue } from './types.js';
+import { useControlRegistration } from './use-control-registration.svelte.js';
+export interface Props {
+  value?: RangeSliderValue;
+  min?: number;
+  max?: number;
+  step?: number;
+  label?: string;
+  minLabel?: string;
+  maxLabel?: string;
+  unit?: string;
+  disabled?: boolean;
+  name?: string;
+  interaction?: ControlInteractionOptions | false;
+  onvaluechange?: (value: RangeSliderValue) => void;
+  class?: string;
+}
+let {
+  value = $bindable({ min: 25, max: 75 }),
+  min = 0,
+  max = 100,
+  step = 1,
+  label,
+  minLabel = 'Minimum',
+  maxLabel = 'Maximum',
+  unit,
+  disabled = false,
+  name,
+  interaction,
+  onvaluechange,
+  class: className = '',
+}: Props = $props();
+const instanceId = $props.id();
+const formGroup = tryGetFormGroupContext();
+const interactionContext = tryGetControlInteractionContext();
+let rootEl = $state<HTMLDivElement | null>(null);
+let minEl = $state<HTMLInputElement | null>(null);
+let maxEl = $state<HTMLInputElement | null>(null);
+const minId = `smrt-range-min-${instanceId}`;
+const maxId = `smrt-range-max-${instanceId}`;
+const resolvedInteraction = $derived.by(() => {
+  const inherited = formGroup?.().interaction;
+  if (interaction === false || inherited === false) return false;
+  return { ...(inherited ?? {}), ...(interaction ?? {}) };
+});
+const controlId = $derived(
+  resolvedInteraction === false
+    ? undefined
+    : (resolvedInteraction.id ??
+        name ??
+        formGroup?.().inputId ??
+        `range-${instanceId}`),
+);
+function snap(next: number) {
+  return Math.min(max, Math.max(min, Math.round(next / step) * step));
+}
+function setRange(next: unknown) {
+  if (!next || typeof next !== 'object') return;
+  const candidate = next as Partial<RangeSliderValue>;
+  const low = snap(Number(candidate.min ?? value.min));
+  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);
+}
+function setMin(next: number) {
+  setRange({ min: Math.min(next, value.max), max: value.max });
+}
+function setMax(next: number) {
+  setRange({ min: value.min, max: Math.max(next, value.min) });
+}
+useControlRegistration(() => {
+  const root = rootEl;
+  const options = resolvedInteraction;
+  if (!root || options === false) return false;
+  return {
+    controlId,
+    subject: options.subject,
+    metadata: {
+      kind: 'range-slider',
+      label: formGroup?.().label ?? label,
+      description: options.description ?? formGroup?.().description,
+      sensitivity: options.sensitivity ?? 'public',
+      readable: options.readable,
+      writable: options.writable,
+      constraints: { min, max, step },
+      unit,
+    },
+    getValue: () => ({ ...value }),
+    setValue: setRange,
+    clear: () => setRange({ min, max }),
+    focus: () => minEl?.focus(),
+    reveal: () => revealControl(root),
+    highlight: (durationMs) => highlightControl(root, durationMs),
+    validate: () => value.min <= value.max,
+    getState: () => ({ disabled, 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'}>
+  {#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}
+      aria-label={minLabel} aria-valuetext={`${value.min}${unit ?? ''}`} oninput={(event) => setMin(Number(event.currentTarget.value))} />
+    <input bind:this={maxEl} id={maxId} type="range" name={name ? `${name}[max]` : undefined} min={value.min} {max} {step} {disabled} value={value.max}
+      aria-label={maxLabel} aria-valuetext={`${value.max}${unit ?? ''}`} oninput={(event) => setMax(Number(event.currentTarget.value))} />
+  </div>
+  <div class="range-slider__inputs">
+    <label for={`${minId}-number`}>{minLabel}<input id={`${minId}-number`} type="number" {min} max={value.max} {step} {disabled} value={value.min} onchange={(event) => setMin(Number(event.currentTarget.value))} /></label>
+    <label for={`${maxId}-number`}>{maxLabel}<input id={`${maxId}-number`} type="number" min={value.min} {max} {step} {disabled} value={value.max} onchange={(event) => setMax(Number(event.currentTarget.value))} /></label>
+  </div>
+</div>
+<style>
+  .range-slider { display: grid; gap: var(--smrt-spacing-3); color: var(--smrt-color-on-surface); }
+  .range-slider.disabled { opacity: .5; }
+  .range-slider__header { display: flex; justify-content: space-between; font: var(--smrt-typography-label-large-font); }
+  output { color: var(--smrt-color-primary); font-variant-numeric: tabular-nums; }
+  .range-slider__track { position: relative; min-height: 1.75rem; display: grid; align-items: center; }
+  .range-slider__track input { grid-area: 1 / 1; width: 100%; pointer-events: none; accent-color: var(--smrt-color-primary); background: transparent; }
+  .range-slider__track input::-webkit-slider-thumb { pointer-events: auto; }
+  .range-slider__track input::-moz-range-thumb { pointer-events: auto; }
+  .range-slider__inputs { display: flex; gap: var(--smrt-spacing-3); }
+  .range-slider__inputs label { display: grid; gap: var(--smrt-spacing-1); flex: 1; font: var(--smrt-typography-label-small-font); color: var(--smrt-color-on-surface-variant); }
+  .range-slider__inputs input { width: 100%; padding: var(--smrt-spacing-2); border: 1px solid var(--smrt-color-outline-variant); border-radius: var(--smrt-radius-small); background: var(--smrt-color-surface); color: var(--smrt-color-on-surface); }
+  input:focus-visible { outline: 2px solid var(--smrt-color-primary); outline-offset: 3px; }
+  :global(.range-slider[data-smrt-highlighted='true']) { outline: 3px solid var(--smrt-color-tertiary); outline-offset: 4px; border-radius: var(--smrt-radius-small); }
+</style>

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

@@ -0,0 +1,21 @@
+import type { ControlInteractionOptions } from './control-interaction.js';
+import type { RangeSliderValue } from './types.js';
+export interface Props {
+    value?: RangeSliderValue;
+    min?: number;
+    max?: number;
+    step?: number;
+    label?: string;
+    minLabel?: string;
+    maxLabel?: string;
+    unit?: string;
+    disabled?: boolean;
+    name?: string;
+    interaction?: ControlInteractionOptions | false;
+    onvaluechange?: (value: RangeSliderValue) => void;
+    class?: string;
+}
+declare const RangeSlider: import("svelte").Component<Props, {}, "value">;
+type RangeSlider = ReturnType<typeof RangeSlider>;
+export default RangeSlider;
+//# sourceMappingURL=RangeSlider.svelte.d.ts.map

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

@@ -0,0 +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"}

package/dist/components/forms/SegmentedControl.svelte

@@ -0,0 +1,87 @@
+<script lang="ts">
+import { highlightControl, revealControl } from './control-dom.js';
+import type { ControlInteractionOptions } from './control-interaction.js';
+import { tryGetControlInteractionContext } from './control-interaction-context.js';
+import type { SegmentedControlOption } from './types.js';
+import { useControlRegistration } from './use-control-registration.svelte.js';
+export interface Props {
+  options: SegmentedControlOption[];
+  value?: string | number;
+  label: string;
+  name?: string;
+  disabled?: boolean;
+  fullWidth?: boolean;
+  interaction?: ControlInteractionOptions | false;
+  onvaluechange?: (value: string | number) => void;
+  class?: string;
+}
+let {
+  options,
+  value = $bindable(),
+  label,
+  name,
+  disabled = false,
+  fullWidth = false,
+  interaction,
+  onvaluechange,
+  class: className = '',
+}: Props = $props();
+const instanceId = $props.id();
+const interactionContext = tryGetControlInteractionContext();
+let rootEl = $state<HTMLDivElement | null>(null);
+const controlId = $derived(
+  interaction === false
+    ? undefined
+    : (interaction?.id ?? name ?? `segment-${instanceId}`),
+);
+function setValue(next: unknown) {
+  const option = options.find((item) => String(item.value) === String(next));
+  if (!option || option.disabled) return;
+  value = option.value;
+  onvaluechange?.(option.value);
+}
+useControlRegistration(() => {
+  const root = rootEl;
+  if (!root || interaction === false) return false;
+  return {
+    controlId,
+    subject: interaction?.subject,
+    metadata: {
+      kind: 'segmented-control',
+      label,
+      description: interaction?.description,
+      sensitivity: interaction?.sensitivity ?? 'public',
+      readable: interaction?.readable,
+      writable: interaction?.writable,
+      options,
+    },
+    getValue: () => value,
+    setValue,
+    clear: () => {
+      value = undefined;
+    },
+    focus: () =>
+      root
+        .querySelector<HTMLElement>('[role="radio"]:not([disabled])')
+        ?.focus(),
+    reveal: () => revealControl(root),
+    highlight: (durationMs) => highlightControl(root, durationMs),
+    getState: () => ({ disabled }),
+  };
+});
+</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}>
+  {#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>
+  {/each}
+</div>
+<style>
+  .segmented { display: inline-flex; border: 1px solid var(--smrt-color-outline); border-radius: var(--smrt-radius-full); overflow: hidden; }
+  .segmented.full-width { display: flex; width: 100%; }
+  button { flex: 1; min-height: 2.5rem; padding: 0 var(--smrt-spacing-4); border: 0; border-right: 1px solid var(--smrt-color-outline); background: var(--smrt-color-surface); color: var(--smrt-color-on-surface); cursor: pointer; }
+  button:last-child { border-right: 0; } button.selected { background: var(--smrt-color-secondary-container); color: var(--smrt-color-on-secondary-container); }
+  button:focus-visible { outline: 2px solid var(--smrt-color-primary); outline-offset: -3px; } button:disabled { opacity: .5; cursor: not-allowed; }
+  :global(.segmented[data-smrt-highlighted='true']) { outline: 3px solid var(--smrt-color-tertiary); outline-offset: 4px; }
+</style>

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

@@ -0,0 +1,17 @@
+import type { ControlInteractionOptions } from './control-interaction.js';
+import type { SegmentedControlOption } from './types.js';
+export interface Props {
+    options: SegmentedControlOption[];
+    value?: string | number;
+    label: string;
+    name?: string;
+    disabled?: boolean;
+    fullWidth?: boolean;
+    interaction?: ControlInteractionOptions | false;
+    onvaluechange?: (value: string | number) => void;
+    class?: string;
+}
+declare const SegmentedControl: import("svelte").Component<Props, {}, "value">;
+type SegmentedControl = ReturnType<typeof SegmentedControl>;
+export default SegmentedControl;
+//# sourceMappingURL=SegmentedControl.svelte.d.ts.map

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

@@ -0,0 +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"}

package/dist/components/forms/Select.svelte

@@ -1,11 +1,19 @@
 <script lang="ts">
 import type { Snippet } from 'svelte';
 import type { HTMLSelectAttributes } from 'svelte/elements';
+import {
+  emitControlChange,
+  highlightControl,
+  revealControl,
+} from './control-dom.js';
+import type { ControlInteractionOptions } from './control-interaction.js';
+import { tryGetControlInteractionContext } from './control-interaction-context.js';
 import { tryGetFormGroupContext } from './form-group-context.js';
 
 export interface Props extends Omit<HTMLSelectAttributes, 'class' | 'value'> {
   value?: string;
   class?: string;
+  interaction?: ControlInteractionOptions | false;
   children: Snippet;
 }
 
@@ -16,7 +24,9 @@ let {
   required = false,
   name,
   class: className = '',
+  interaction,
   children,
+  'aria-label': ariaLabel,
   'aria-describedby': ariaDescribedby,
   'aria-invalid': ariaInvalid,
   ...rest
@@ -24,6 +34,8 @@ let {
 
 // Inherit id / hint+error association / error state from a wrapping FormGroup.
 const formGroup = tryGetFormGroupContext();
+const controlInteraction = tryGetControlInteractionContext();
+let selectEl = $state<HTMLSelectElement | null>(null);
 const resolvedId = $derived(id ?? formGroup?.().inputId);
 const resolvedDescribedBy = $derived(
   ariaDescribedby ?? formGroup?.().describedBy,
@@ -31,17 +43,81 @@ const resolvedDescribedBy = $derived(
 const resolvedInvalid = $derived(
   ariaInvalid ?? (formGroup?.().invalid ? 'true' : undefined),
 );
+const resolvedInteraction = $derived.by(() => {
+  const inherited = formGroup?.().interaction;
+  if (interaction === false || inherited === false) return false;
+  return { ...(inherited ?? {}), ...(interaction ?? {}) };
+});
+const resolvedControlId = $derived(
+  resolvedInteraction === false
+    ? undefined
+    : (resolvedInteraction.id ?? name ?? resolvedId),
+);
+
+function setControlValue(next: unknown) {
+  value = String(next ?? '');
+  if (selectEl) emitControlChange(selectEl);
+}
+
+$effect(() => {
+  const context = controlInteraction;
+  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 },
+    metadata: {
+      kind: 'select',
+      label: formGroup?.().label ?? ariaLabel ?? undefined,
+      description: options.description ?? formGroup?.().description,
+      sensitivity: options.sensitivity ?? 'public',
+      readable: options.readable,
+      writable: options.writable,
+      constraints: { required: required === true },
+      options: Array.from(element.options).map((option) => ({
+        value: option.value,
+        label: option.label,
+        disabled: option.disabled,
+      })),
+    },
+    getValue: () => value,
+    setValue: setControlValue,
+    clear: () => setControlValue(''),
+    focus: () => element.focus(),
+    reveal: () => revealControl(element),
+    highlight: (durationMs) => highlightControl(element, durationMs),
+    validate: () => element.reportValidity(),
+    getState: () => ({
+      disabled: element.disabled,
+      valid: element.validity.valid,
+      validationMessage: element.validationMessage || undefined,
+    }),
+  });
+});
+
+export function focus(): void {
+  selectEl?.focus();
+}
+
+export function getElement(): HTMLSelectElement | null {
+  return selectEl;
+}
 </script>
 
-<select
+	<select
+		bind:this={selectEl}
 	id={resolvedId}
 	bind:value
 	{disabled}
 	{required}
-	{name}
+		{name}
+		aria-label={ariaLabel}
 	aria-describedby={resolvedDescribedBy}
 	aria-invalid={resolvedInvalid}
-	class="select {className}"
+		class="select {className}"
+		data-smrt-control={resolvedControlId}
+		data-smrt-form={controlInteraction?.formId}
 	{...rest}
 >
 	{@render children()}
@@ -75,6 +151,11 @@ const resolvedInvalid = $derived(
 		box-shadow: 0 0 0 3px color-mix(in srgb, var(--smrt-color-primary, #005ac1) 10%, transparent);
 	}
 
+	.select[data-smrt-highlighted='true'] {
+		outline: 3px solid var(--smrt-color-tertiary, #7d5260);
+		outline-offset: 3px;
+	}
+
 	.select:disabled {
 		background-color: var(--smrt-color-surface-container-high, #f3f4f6);
 		cursor: not-allowed;

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

@@ -1,11 +1,16 @@
 import type { Snippet } from 'svelte';
 import type { HTMLSelectAttributes } from 'svelte/elements';
+import type { ControlInteractionOptions } from './control-interaction.js';
 export interface Props extends Omit<HTMLSelectAttributes, 'class' | 'value'> {
     value?: string;
     class?: string;
+    interaction?: ControlInteractionOptions | false;
     children: Snippet;
 }
-declare const Select: import("svelte").Component<Props, {}, "value">;
+declare const Select: import("svelte").Component<Props, {
+    focus: () => void;
+    getElement: () => HTMLSelectElement | null;
+}, "value">;
 type Select = ReturnType<typeof Select>;
 export default Select;
 //# sourceMappingURL=Select.svelte.d.ts.map

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;AAI5D,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,QAAQ,EAAE,OAAO,CAAC;CACnB;AAuCD,QAAA,MAAM,MAAM,gDAAwC,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;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"}