@happyvertical/smrt-ui 0.38.26 → 0.39.0

package/dist/components/forms/Slider.svelte

@@ -0,0 +1,131 @@
+<script lang="ts">
+import type { HTMLInputAttributes } 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';
+import { useControlRegistration } from './use-control-registration.svelte.js';
+export interface Props
+  extends Omit<
+    HTMLInputAttributes,
+    'type' | 'class' | 'value' | 'min' | 'max' | 'step'
+  > {
+  value?: number;
+  min?: number;
+  max?: number;
+  step?: number;
+  label?: string;
+  unit?: string;
+  showInput?: boolean;
+  formatValue?: (value: number) => string;
+  class?: string;
+  interaction?: ControlInteractionOptions | false;
+}
+let {
+  value = $bindable(0),
+  min = 0,
+  max = 100,
+  step = 1,
+  label,
+  unit,
+  showInput = true,
+  formatValue = (next) => `${next}${unit ?? ''}`,
+  id,
+  name,
+  disabled = false,
+  class: className = '',
+  interaction,
+  onchange,
+  ...rest
+}: Props = $props();
+const instanceId = $props.id();
+const formGroup = tryGetFormGroupContext();
+const interactionContext = tryGetControlInteractionContext();
+let rangeEl = $state<HTMLInputElement | null>(null);
+const resolvedId = $derived(
+  id ?? formGroup?.().inputId ?? `smrt-slider-${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 ?? resolvedId),
+);
+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));
+}
+function setValue(next: unknown) {
+  const parsed = Number(next);
+  if (!Number.isFinite(parsed)) return;
+  value = clamp(parsed);
+  if (rangeEl) emitControlChange(rangeEl);
+}
+function handleInput(event: Event & { currentTarget: HTMLInputElement }) {
+  value = Number(event.currentTarget.value);
+}
+function handleChange(event: Event & { currentTarget: HTMLInputElement }) {
+  value = Number(event.currentTarget.value);
+  onchange?.(event);
+}
+useControlRegistration(() => {
+  const element = rangeEl;
+  const options = resolvedInteraction;
+  if (!element || options === false) return false;
+  return {
+    controlId,
+    subject: options.subject,
+    metadata: {
+      kind: '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,
+    clear: () => setValue(min),
+    focus: () => element.focus(),
+    reveal: () => revealControl(element),
+    highlight: (durationMs) =>
+      highlightControl(element.closest('.slider') ?? element, durationMs),
+    validate: () => element.reportValidity(),
+    getState: () => ({
+      disabled: element.disabled,
+      valid: element.validity.valid,
+      validationMessage: element.validationMessage || undefined,
+    }),
+  };
+});
+</script>
+<div class="slider {className}" data-smrt-control={controlId} data-smrt-form={interactionContext?.formId}>
+  {#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}
+      style={`--smrt-slider-percent: ${percent}%`} aria-valuetext={formatValue(value)} aria-describedby={formGroup?.().describedBy}
+      oninput={handleInput} onchange={handleChange} {...rest} />
+    {#if showInput}<input class="slider__number" type="number" {min} {max} {step} {disabled} value={value}
+      aria-label={label ? `${label} value` : 'Slider value'} onchange={(event) => setValue(event.currentTarget.value)} />{/if}
+  </div>
+</div>
+<style>
+  .slider { display: grid; gap: var(--smrt-spacing-2); color: var(--smrt-color-on-surface); }
+  .slider__header, .slider__controls { display: flex; align-items: center; gap: var(--smrt-spacing-3); }
+  .slider__header { justify-content: space-between; font: var(--smrt-typography-label-large-font); }
+  output { color: var(--smrt-color-primary); font-variant-numeric: tabular-nums; }
+  input[type='range'] { flex: 1; min-width: 8rem; accent-color: var(--smrt-color-primary); cursor: pointer; }
+  .slider__number { width: 5.5rem; 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; }
+  .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/Slider.svelte.d.ts

@@ -0,0 +1,18 @@
+import type { HTMLInputAttributes } from 'svelte/elements';
+import type { ControlInteractionOptions } from './control-interaction.js';
+export interface Props extends Omit<HTMLInputAttributes, 'type' | 'class' | 'value' | 'min' | 'max' | 'step'> {
+    value?: number;
+    min?: number;
+    max?: number;
+    step?: number;
+    label?: string;
+    unit?: string;
+    showInput?: boolean;
+    formatValue?: (value: number) => string;
+    class?: string;
+    interaction?: ControlInteractionOptions | false;
+}
+declare const Slider: import("svelte").Component<Props, {}, "value">;
+type Slider = ReturnType<typeof Slider>;
+export default Slider;
+//# sourceMappingURL=Slider.svelte.d.ts.map

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

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

package/dist/components/forms/Switch.svelte

@@ -0,0 +1,128 @@
+<script lang="ts">
+import type { HTMLInputAttributes } 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';
+import { useControlRegistration } from './use-control-registration.svelte.js';
+
+export interface Props
+  extends Omit<
+    HTMLInputAttributes,
+    'type' | 'class' | 'checked' | 'role' | 'size'
+  > {
+  checked?: boolean;
+  label?: string;
+  labelPosition?: 'left' | 'right';
+  size?: 'sm' | 'md' | 'lg';
+  class?: string;
+  interaction?: ControlInteractionOptions | false;
+}
+
+let {
+  checked = $bindable(false),
+  label,
+  labelPosition = 'right',
+  size = 'md',
+  id,
+  name,
+  value,
+  disabled = false,
+  required = false,
+  class: className = '',
+  interaction,
+  onchange,
+  'aria-label': ariaLabel,
+  ...rest
+}: Props = $props();
+const instanceId = $props.id();
+const formGroup = tryGetFormGroupContext();
+const interactionContext = tryGetControlInteractionContext();
+let inputEl = $state<HTMLInputElement | null>(null);
+const resolvedId = $derived(
+  id ?? formGroup?.().inputId ?? `smrt-switch-${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 ?? resolvedId),
+);
+function setChecked(next: unknown) {
+  checked =
+    typeof next === 'string'
+      ? ['true', '1', 'yes', 'on'].includes(next.toLowerCase())
+      : Boolean(next);
+  if (inputEl) emitControlChange(inputEl);
+}
+function handleChange(event: Event & { currentTarget: HTMLInputElement }) {
+  checked = event.currentTarget.checked;
+  onchange?.(event);
+}
+useControlRegistration(() => {
+  const element = inputEl;
+  const options = resolvedInteraction;
+  if (!element || options === false) return false;
+  return {
+    controlId,
+    subject: options.subject,
+    metadata: {
+      kind: 'switch',
+      label: formGroup?.().label ?? label ?? ariaLabel ?? undefined,
+      description: options.description ?? formGroup?.().description,
+      sensitivity: options.sensitivity ?? 'public',
+      readable: options.readable,
+      writable: options.writable,
+      constraints: { required: required === true },
+    },
+    getValue: () => checked,
+    setValue: setChecked,
+    clear: () => setChecked(false),
+    focus: () => element.focus(),
+    reveal: () => revealControl(element),
+    highlight: (durationMs) =>
+      highlightControl(element.closest('label') ?? element, durationMs),
+    validate: () => element.reportValidity(),
+    getState: () => ({
+      disabled: element.disabled,
+      valid: element.validity.valid,
+      validationMessage: element.validationMessage || undefined,
+    }),
+  };
+});
+</script>
+
+<label class="switch switch--{size} {className}" class:switch--disabled={disabled} data-smrt-control={controlId} data-smrt-form={interactionContext?.formId}>
+  {#if label && labelPosition === 'left'}<span>{label}</span>{/if}
+  <span class="switch__control">
+    <input bind:this={inputEl} id={resolvedId} type="checkbox" role="switch" {name} {value} {disabled} {required} checked={checked}
+      aria-label={ariaLabel ?? label ?? formGroup?.().label} aria-describedby={formGroup?.().describedBy}
+      aria-invalid={formGroup?.().invalid ? 'true' : undefined} onchange={handleChange} {...rest} />
+    <span class="switch__track" aria-hidden="true"><span class="switch__thumb"></span></span>
+  </span>
+  {#if label && labelPosition === 'right'}<span>{label}</span>{/if}
+</label>
+
+<style>
+  .switch { display: inline-flex; align-items: center; gap: var(--smrt-spacing-2, .5rem); cursor: pointer; color: var(--smrt-color-on-surface); }
+  .switch--disabled { opacity: .5; cursor: not-allowed; }
+  .switch__control { position: relative; display: inline-flex; }
+  input { position: absolute; width: 1px; height: 1px; opacity: 0; }
+  .switch__track { width: 2.75rem; height: 1.5rem; padding: 2px; border-radius: var(--smrt-radius-full); background: var(--smrt-color-surface-container-highest); border: 1px solid var(--smrt-color-outline); transition: background var(--smrt-duration-short2); }
+  .switch__thumb { display: block; width: 1.125rem; height: 1.125rem; border-radius: 50%; background: var(--smrt-color-outline); transition: transform var(--smrt-duration-short2), background var(--smrt-duration-short2); }
+  input:checked + .switch__track { background: var(--smrt-color-primary); border-color: var(--smrt-color-primary); }
+  input:checked + .switch__track .switch__thumb { transform: translateX(1.25rem); background: var(--smrt-color-on-primary); }
+  input:focus-visible + .switch__track { outline: 2px solid var(--smrt-color-primary); outline-offset: 3px; }
+  .switch--sm { font-size: .8rem; transform-origin: left center; }
+  .switch--lg .switch__track { transform: scale(1.15); margin-inline: .2rem; }
+  .switch[data-smrt-highlighted='true'] { outline: 3px solid var(--smrt-color-tertiary); outline-offset: 4px; border-radius: var(--smrt-radius-full); }
+  @media (prefers-reduced-motion: reduce) { .switch__track, .switch__thumb { transition: none; } }
+</style>

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

@@ -0,0 +1,14 @@
+import type { HTMLInputAttributes } from 'svelte/elements';
+import type { ControlInteractionOptions } from './control-interaction.js';
+export interface Props extends Omit<HTMLInputAttributes, 'type' | 'class' | 'checked' | 'role' | 'size'> {
+    checked?: boolean;
+    label?: string;
+    labelPosition?: 'left' | 'right';
+    size?: 'sm' | 'md' | 'lg';
+    class?: string;
+    interaction?: ControlInteractionOptions | false;
+}
+declare const Switch: import("svelte").Component<Props, {}, "checked">;
+type Switch = ReturnType<typeof Switch>;
+export default Switch;
+//# sourceMappingURL=Switch.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Switch.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/forms/Switch.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,iBAAiB,CAAC;AAM3D,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,0BAA0B,CAAC;AAM1E,MAAM,WAAW,KACf,SAAQ,IAAI,CACV,mBAAmB,EACnB,MAAM,GAAG,OAAO,GAAG,SAAS,GAAG,MAAM,GAAG,MAAM,CAC/C;IACD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,aAAa,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IACjC,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,yBAAyB,GAAG,KAAK,CAAC;CACjD;AAoGD,QAAA,MAAM,MAAM,kDAAwC,CAAC;AACrD,KAAK,MAAM,GAAG,UAAU,CAAC,OAAO,MAAM,CAAC,CAAC;AACxC,eAAe,MAAM,CAAC"}

package/dist/components/forms/TagsInput.svelte

@@ -0,0 +1,106 @@
+<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 { useControlRegistration } from './use-control-registration.svelte.js';
+export interface Props {
+  values?: string[];
+  label: string;
+  name?: string;
+  placeholder?: string;
+  disabled?: boolean;
+  maxTags?: number;
+  allowDuplicates?: boolean;
+  interaction?: ControlInteractionOptions | false;
+  onvalueschange?: (values: string[]) => void;
+  class?: string;
+}
+let {
+  values = $bindable([]),
+  label,
+  name,
+  placeholder = 'Add a tag',
+  disabled = false,
+  maxTags,
+  allowDuplicates = false,
+  interaction,
+  onvalueschange,
+  class: className = '',
+}: Props = $props();
+const instanceId = $props.id();
+const inputId = `smrt-tags-${instanceId}`;
+const interactionContext = tryGetControlInteractionContext();
+let rootEl = $state<HTMLDivElement | null>(null);
+let inputEl = $state<HTMLInputElement | null>(null);
+let draft = $state('');
+const controlId = $derived(
+  interaction === false ? undefined : (interaction?.id ?? name ?? inputId),
+);
+function commit(raw: string) {
+  const tag = raw.trim();
+  if (
+    !tag ||
+    disabled ||
+    (maxTags !== undefined && values.length >= maxTags) ||
+    (!allowDuplicates && values.includes(tag))
+  )
+    return;
+  values = [...values, tag];
+  draft = '';
+  onvalueschange?.(values);
+}
+function remove(index: number) {
+  values = values.filter((_, candidate) => candidate !== index);
+  onvalueschange?.(values);
+}
+function setValues(next: unknown) {
+  if (!Array.isArray(next)) return;
+  values = next
+    .map(String)
+    .filter((tag, index, all) => allowDuplicates || all.indexOf(tag) === index)
+    .slice(0, maxTags);
+  onvalueschange?.(values);
+}
+function handleKeydown(event: KeyboardEvent) {
+  if (event.key === 'Enter' || event.key === ',') {
+    event.preventDefault();
+    commit(draft);
+  } else if (event.key === 'Backspace' && !draft && values.length)
+    remove(values.length - 1);
+}
+useControlRegistration(() => {
+  const root = rootEl;
+  const input = inputEl;
+  if (!root || !input || interaction === false) return false;
+  return {
+    controlId,
+    subject: interaction?.subject,
+    metadata: {
+      kind: 'tags-input',
+      label,
+      description: interaction?.description,
+      sensitivity: interaction?.sensitivity ?? 'public',
+      readable: interaction?.readable,
+      writable: interaction?.writable,
+    },
+    getValue: () => [...values],
+    setValue: setValues,
+    clear: () => setValues([]),
+    focus: () => input.focus(),
+    reveal: () => revealControl(root),
+    highlight: (durationMs) => highlightControl(root, durationMs),
+    getState: () => ({ disabled }),
+  };
+});
+</script>
+<div class="tags-field {className}"><label for={inputId}>{label}</label><div bind:this={rootEl} class="tags" data-smrt-control={controlId} data-smrt-form={interactionContext?.formId}>
+  {#each values as tag, index}<span class="tag">{tag}<button type="button" disabled={disabled} aria-label={`Remove ${tag}`} onclick={() => remove(index)}>×</button><input type="hidden" name={name ? `${name}[]` : undefined} value={tag} /></span>{/each}
+  <input bind:this={inputEl} id={inputId} {placeholder} {disabled} bind:value={draft} onkeydown={handleKeydown} onblur={() => commit(draft)} />
+</div></div>
+<style>
+  .tags-field { display: grid; gap: var(--smrt-spacing-1); color: var(--smrt-color-on-surface); } label { font: var(--smrt-typography-label-large-font); }
+  .tags { display: flex; flex-wrap: wrap; gap: var(--smrt-spacing-1); min-height: 2.5rem; padding: var(--smrt-spacing-1); border: 1px solid var(--smrt-color-outline-variant); border-radius: var(--smrt-radius-small); background: var(--smrt-color-surface); }
+  .tag { display: inline-flex; align-items: center; gap: var(--smrt-spacing-1); padding: var(--smrt-spacing-1) var(--smrt-spacing-2); border-radius: var(--smrt-radius-full); background: var(--smrt-color-secondary-container); color: var(--smrt-color-on-secondary-container); }
+  .tag button { border: 0; background: transparent; color: inherit; cursor: pointer; } .tags > input { flex: 1; min-width: 8rem; border: 0; outline: 0; background: transparent; color: inherit; }
+  :global(.tags[data-smrt-highlighted='true']) { outline: 3px solid var(--smrt-color-tertiary); outline-offset: 4px; }
+</style>

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"TagsInput.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/forms/TagsInput.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,0BAA0B,CAAC;AAI1E,MAAM,WAAW,KAAK;IACpB,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,WAAW,CAAC,EAAE,yBAAyB,GAAG,KAAK,CAAC;IAChD,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IAC5C,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AA6FD,QAAA,MAAM,SAAS,iDAAwC,CAAC;AACxD,KAAK,SAAS,GAAG,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC;AAC9C,eAAe,SAAS,CAAC"}

package/dist/components/forms/Textarea.svelte

@@ -1,11 +1,19 @@
 <script lang="ts">
 import type { HTMLTextareaAttributes } 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<HTMLTextareaAttributes, 'class' | 'value'> {
   value?: string;
   rows?: number;
   class?: string;
+  interaction?: ControlInteractionOptions | false;
 }
 
 let {
@@ -18,6 +26,8 @@ let {
   name,
   rows = 4,
   class: className = '',
+  interaction,
+  'aria-label': ariaLabel,
   'aria-describedby': ariaDescribedby,
   'aria-invalid': ariaInvalid,
   ...rest
@@ -25,6 +35,8 @@ let {
 
 // Inherit id / hint+error association / error state from a wrapping FormGroup.
 const formGroup = tryGetFormGroupContext();
+const controlInteraction = tryGetControlInteractionContext();
+let textareaEl = $state<HTMLTextAreaElement | null>(null);
 const resolvedId = $derived(id ?? formGroup?.().inputId);
 const resolvedDescribedBy = $derived(
   ariaDescribedby ?? formGroup?.().describedBy,
@@ -32,20 +44,84 @@ 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 (textareaEl) emitControlChange(textareaEl);
+}
+
+$effect(() => {
+  const context = controlInteraction;
+  const element = textareaEl;
+  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: 'textarea',
+      label: formGroup?.().label ?? ariaLabel ?? undefined,
+      description: options.description ?? formGroup?.().description,
+      sensitivity: options.sensitivity ?? 'public',
+      readable: options.readable,
+      writable: options.writable,
+      constraints: {
+        required: required === true,
+        minLength: element.minLength >= 0 ? element.minLength : undefined,
+        maxLength: element.maxLength >= 0 ? element.maxLength : undefined,
+      },
+    },
+    getValue: () => value,
+    setValue: setControlValue,
+    clear: () => setControlValue(''),
+    focus: () => element.focus(),
+    reveal: () => revealControl(element),
+    highlight: (durationMs) => highlightControl(element, durationMs),
+    validate: () => element.reportValidity(),
+    getState: () => ({
+      disabled: element.disabled,
+      readonly: element.readOnly,
+      valid: element.validity.valid,
+      validationMessage: element.validationMessage || undefined,
+    }),
+  });
+});
+
+export function focus(): void {
+  textareaEl?.focus();
+}
+
+export function getElement(): HTMLTextAreaElement | null {
+  return textareaEl;
+}
 </script>
 
-<textarea
+	<textarea
+		bind:this={textareaEl}
 	id={resolvedId}
 	bind:value
 	{placeholder}
 	{disabled}
 	{readonly}
 	{required}
-	{name}
+		{name}
+		aria-label={ariaLabel}
 	{rows}
 	aria-describedby={resolvedDescribedBy}
 	aria-invalid={resolvedInvalid}
-	class="textarea {className}"
+		class="textarea {className}"
+		data-smrt-control={resolvedControlId}
+		data-smrt-form={controlInteraction?.formId}
 	{...rest}
 ></textarea>
 
@@ -73,6 +149,11 @@ const resolvedInvalid = $derived(
 		box-shadow: 0 0 0 3px color-mix(in srgb, var(--smrt-color-primary, #005ac1) 10%, transparent);
 	}
 
+	.textarea[data-smrt-highlighted='true'] {
+		outline: 3px solid var(--smrt-color-tertiary, #7d5260);
+		outline-offset: 3px;
+	}
+
 	.textarea:disabled {
 		background-color: var(--smrt-color-surface-container-high, #f3f4f6);
 		cursor: not-allowed;

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

@@ -1,10 +1,15 @@
 import type { HTMLTextareaAttributes } from 'svelte/elements';
+import type { ControlInteractionOptions } from './control-interaction.js';
 export interface Props extends Omit<HTMLTextareaAttributes, 'class' | 'value'> {
     value?: string;
     rows?: number;
     class?: string;
+    interaction?: ControlInteractionOptions | false;
 }
-declare const Textarea: import("svelte").Component<Props, {}, "value">;
+declare const Textarea: import("svelte").Component<Props, {
+    focus: () => void;
+    getElement: () => HTMLTextAreaElement | null;
+}, "value">;
 type Textarea = ReturnType<typeof Textarea>;
 export default Textarea;
 //# sourceMappingURL=Textarea.svelte.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Textarea.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/forms/Textarea.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,iBAAiB,CAAC;AAI9D,MAAM,WAAW,KAAM,SAAQ,IAAI,CAAC,sBAAsB,EAAE,OAAO,GAAG,OAAO,CAAC;IAC5E,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAsCD,QAAA,MAAM,QAAQ,gDAAwC,CAAC;AACvD,KAAK,QAAQ,GAAG,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC;AAC5C,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"Textarea.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/forms/Textarea.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,iBAAiB,CAAC;AAM9D,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,0BAA0B,CAAC;AAK1E,MAAM,WAAW,KAAM,SAAQ,IAAI,CAAC,sBAAsB,EAAE,OAAO,GAAG,OAAO,CAAC;IAC5E,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,yBAAyB,GAAG,KAAK,CAAC;CACjD;AAyGD,QAAA,MAAM,QAAQ;iBAfK,IAAI;sBAIC,mBAAmB,GAAG,IAAI;WAWI,CAAC;AACvD,KAAK,QAAQ,GAAG,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC;AAC5C,eAAe,QAAQ,CAAC"}

package/dist/components/forms/TimePicker.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+import type { HTMLInputAttributes } from 'svelte/elements';
+import type { ControlInteractionOptions } from './control-interaction.js';
+import Input from './Input.svelte';
+export interface Props
+  extends Omit<HTMLInputAttributes, 'type' | 'value' | 'class'> {
+  value?: string;
+  label: string;
+  class?: string;
+  interaction?: ControlInteractionOptions | false;
+}
+let {
+  value = $bindable(''),
+  label,
+  id,
+  name,
+  class: className = '',
+  interaction,
+  ...rest
+}: Props = $props();
+const instanceId = $props.id();
+const resolvedId = $derived(id ?? `smrt-time-${instanceId}`);
+</script>
+<label class="picker {className}" for={resolvedId}><span>{label}</span><Input id={resolvedId} {name} type="time" aria-label={label} {interaction} bind:value {...rest} /></label>
+<style>.picker { display: grid; gap: var(--smrt-spacing-1); color: var(--smrt-color-on-surface); font: var(--smrt-typography-label-large-font); }</style>

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

@@ -0,0 +1,12 @@
+import type { HTMLInputAttributes } from 'svelte/elements';
+import type { ControlInteractionOptions } from './control-interaction.js';
+export interface Props extends Omit<HTMLInputAttributes, 'type' | 'value' | 'class'> {
+    value?: string;
+    label: string;
+    class?: string;
+    interaction?: ControlInteractionOptions | false;
+}
+declare const TimePicker: import("svelte").Component<Props, {}, "value">;
+type TimePicker = ReturnType<typeof TimePicker>;
+export default TimePicker;
+//# sourceMappingURL=TimePicker.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TimePicker.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/forms/TimePicker.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,iBAAiB,CAAC;AAC3D,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,0BAA0B,CAAC;AAG1E,MAAM,WAAW,KACf,SAAQ,IAAI,CAAC,mBAAmB,EAAE,MAAM,GAAG,OAAO,GAAG,OAAO,CAAC;IAC7D,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,yBAAyB,GAAG,KAAK,CAAC;CACjD;AAuBD,QAAA,MAAM,UAAU,gDAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}