@happyvertical/smrt-ui 0.38.26 → 0.39.0

package/dist/components/forms/Combobox.svelte

@@ -0,0 +1,172 @@
+<script lang="ts">
+import { highlightControl, revealControl } from './control-dom.js';
+import type {
+  ControlInteractionOptions,
+  ControlOption,
+} from './control-interaction.js';
+import { tryGetControlInteractionContext } from './control-interaction-context.js';
+import { useControlRegistration } from './use-control-registration.svelte.js';
+export interface Props {
+  options: ControlOption[];
+  value?: string;
+  label: string;
+  name?: string;
+  placeholder?: string;
+  disabled?: boolean;
+  required?: boolean;
+  allowCustom?: boolean;
+  interaction?: ControlInteractionOptions | false;
+  onvaluechange?: (value: string) => void;
+  class?: string;
+}
+let {
+  options,
+  value = $bindable(''),
+  label,
+  name,
+  placeholder,
+  disabled = false,
+  required = false,
+  allowCustom = false,
+  interaction,
+  onvaluechange,
+  class: className = '',
+}: Props = $props();
+const instanceId = $props.id();
+const inputId = `smrt-combobox-${instanceId}`;
+const listId = `${inputId}-list`;
+const interactionContext = tryGetControlInteractionContext();
+let rootEl = $state<HTMLDivElement | null>(null);
+let inputEl = $state<HTMLInputElement | null>(null);
+let open = $state(false);
+let query = $state(value);
+let activeIndex = $state(0);
+const filtered = $derived(
+  options.filter((option) =>
+    option.label.toLowerCase().includes(query.toLowerCase()),
+  ),
+);
+const controlId = $derived(
+  interaction === false ? undefined : (interaction?.id ?? name ?? inputId),
+);
+function commit(option: ControlOption) {
+  if (option.disabled || disabled) return;
+  value = String(option.value);
+  query = option.label;
+  open = false;
+  onvaluechange?.(value);
+}
+function setValue(next: unknown) {
+  const candidate = String(next ?? '');
+  const option = options.find(
+    (item) => String(item.value) === candidate || item.label === candidate,
+  );
+  if (option) commit(option);
+  else if (allowCustom) {
+    value = candidate;
+    query = candidate;
+    onvaluechange?.(candidate);
+  }
+}
+function handleInput(event: Event & { currentTarget: HTMLInputElement }) {
+  query = event.currentTarget.value;
+  open = true;
+  activeIndex = 0;
+  if (allowCustom) {
+    value = query;
+    onvaluechange?.(value);
+  }
+}
+function handleKeydown(event: KeyboardEvent) {
+  if (event.key === 'ArrowDown') {
+    event.preventDefault();
+    open = true;
+    const enabled = filtered
+      .map((option, index) => (option.disabled ? -1 : index))
+      .filter((index) => index >= 0);
+    const position = enabled.indexOf(activeIndex);
+    activeIndex = enabled[(position + 1) % enabled.length] ?? 0;
+  } else if (event.key === 'ArrowUp') {
+    event.preventDefault();
+    const enabled = filtered
+      .map((option, index) => (option.disabled ? -1 : index))
+      .filter((index) => index >= 0);
+    const position = enabled.indexOf(activeIndex);
+    activeIndex =
+      enabled[(position - 1 + enabled.length) % enabled.length] ?? 0;
+  } else if (event.key === 'Enter' && open && filtered[activeIndex]) {
+    event.preventDefault();
+    commit(filtered[activeIndex]);
+  } else if (event.key === 'Escape') {
+    open = false;
+  }
+}
+$effect(() => {
+  if (!open) return;
+  const dismissPointer = (event: PointerEvent) => {
+    if (rootEl && !rootEl.contains(event.target as Node)) open = false;
+  };
+  const dismissFocus = (event: FocusEvent) => {
+    if (rootEl && !rootEl.contains(event.target as Node)) open = false;
+  };
+  document.addEventListener('pointerdown', dismissPointer, true);
+  document.addEventListener('focusin', dismissFocus, true);
+  return () => {
+    document.removeEventListener('pointerdown', dismissPointer, true);
+    document.removeEventListener('focusin', dismissFocus, true);
+  };
+});
+$effect(() => {
+  const option = options.find((item) => String(item.value) === value);
+  if (option && document.activeElement !== inputEl) query = option.label;
+});
+useControlRegistration(() => {
+  const root = rootEl;
+  const input = inputEl;
+  if (!root || !input || interaction === false) return false;
+  return {
+    controlId,
+    subject: interaction?.subject,
+    metadata: {
+      kind: 'combobox',
+      label,
+      description: interaction?.description,
+      sensitivity: interaction?.sensitivity ?? 'public',
+      readable: interaction?.readable,
+      writable: interaction?.writable,
+      constraints: { required },
+      options,
+    },
+    getValue: () => value,
+    setValue,
+    clear: () => {
+      value = '';
+      query = '';
+      onvaluechange?.('');
+    },
+    focus: () => input.focus(),
+    reveal: () => revealControl(root),
+    highlight: (durationMs) => highlightControl(root, durationMs),
+    validate: () => input.reportValidity(),
+    getState: () => ({
+      disabled,
+      valid: input.validity.valid,
+      validationMessage: input.validationMessage || undefined,
+    }),
+  };
+});
+</script>
+<div bind:this={rootEl} class="combobox {className}" data-smrt-control={controlId} data-smrt-form={interactionContext?.formId}>
+  <label for={inputId}>{label}</label><input bind:this={inputEl} id={inputId} {name} role="combobox" autocomplete="off" {placeholder} {disabled} {required} value={query}
+    aria-expanded={open} aria-controls={listId} aria-autocomplete="list" aria-activedescendant={open && filtered[activeIndex] ? `${listId}-${activeIndex}` : undefined}
+    onfocus={() => open = true} oninput={handleInput} onkeydown={handleKeydown} />
+  {#if open && filtered.length}<div id={listId} class="options" role="listbox">{#each filtered as option, index (option.value)}<button id={`${listId}-${index}`} type="button" role="option"
+      aria-selected={String(option.value) === value} class:active={index === activeIndex} disabled={option.disabled} onpointerdown={(event) => event.preventDefault()} onclick={() => commit(option)}>{option.label}</button>{/each}</div>{/if}
+</div>
+<style>
+  .combobox { position: relative; display: grid; gap: var(--smrt-spacing-1); color: var(--smrt-color-on-surface); }
+  label { font: var(--smrt-typography-label-large-font); } input { width: 100%; padding: var(--smrt-spacing-2) var(--smrt-spacing-3); border: 1px solid var(--smrt-color-outline-variant); border-radius: var(--smrt-radius-small); background: var(--smrt-color-surface); color: inherit; }
+  input:focus { outline: 2px solid var(--smrt-color-primary); outline-offset: 1px; } .options { position: absolute; z-index: var(--smrt-z-index-dropdown); top: 100%; left: 0; right: 0; display: grid; padding: var(--smrt-spacing-1); border: 1px solid var(--smrt-color-outline-variant); border-radius: var(--smrt-radius-small); background: var(--smrt-color-surface-container); box-shadow: var(--smrt-elevation-2); }
+  .options button { padding: var(--smrt-spacing-2) var(--smrt-spacing-3); border: 0; border-radius: var(--smrt-radius-extra-small); background: transparent; color: var(--smrt-color-on-surface); text-align: left; } .options button.active { background: var(--smrt-color-secondary-container); }
+  :global(.combobox[data-smrt-highlighted='true']) { outline: 3px solid var(--smrt-color-tertiary); outline-offset: 4px; }
+</style>

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"Combobox.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/forms/Combobox.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EACV,yBAAyB,EACzB,aAAa,EACd,MAAM,0BAA0B,CAAC;AAIlC,MAAM,WAAW,KAAK;IACpB,OAAO,EAAE,aAAa,EAAE,CAAC;IACzB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,WAAW,CAAC,EAAE,yBAAyB,GAAG,KAAK,CAAC;IAChD,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAwJD,QAAA,MAAM,QAAQ,gDAAwC,CAAC;AACvD,KAAK,QAAQ,GAAG,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC;AAC5C,eAAe,QAAQ,CAAC"}

package/dist/components/forms/DatePicker.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-date-${instanceId}`);
+</script>
+<label class="picker {className}" for={resolvedId}><span>{label}</span><Input id={resolvedId} {name} type="date" 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/DatePicker.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 DatePicker: import("svelte").Component<Props, {}, "value">;
+type DatePicker = ReturnType<typeof DatePicker>;
+export default DatePicker;
+//# sourceMappingURL=DatePicker.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DatePicker.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/forms/DatePicker.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"}

package/dist/components/forms/ErrorSummary.svelte

@@ -0,0 +1,32 @@
+<script lang="ts">
+import { focusControl } from './control-dom.js';
+import type { FormError } from './types.js';
+export interface Props {
+  errors: FormError[];
+  title?: string;
+  onselect?: (controlId: string) => void;
+  class?: string;
+}
+let {
+  errors,
+  title = 'Please correct the following',
+  onselect,
+  class: className = '',
+}: Props = $props();
+const instanceId = $props.id();
+const titleId = `error-summary-${instanceId}`;
+function select(error: FormError) {
+  const target = document.querySelector<HTMLElement>(
+    `[data-smrt-control="${CSS.escape(error.controlId)}"]`,
+  );
+  target?.scrollIntoView({ block: 'center' });
+  if (target) focusControl(target);
+  onselect?.(error.controlId);
+}
+</script>
+{#if errors.length > 0}<section class="error-summary {className}" role="alert" aria-labelledby={titleId}><h2 id={titleId}>{title}</h2><ul>{#each errors as error}<li><button type="button" onclick={() => select(error)}>{error.label ? `${error.label}: ` : ''}{error.message}</button></li>{/each}</ul></section>{/if}
+<style>
+  .error-summary { padding: var(--smrt-spacing-4); border-inline-start: 4px solid var(--smrt-color-error); border-radius: var(--smrt-radius-small); background: var(--smrt-color-error-container); color: var(--smrt-color-on-error-container); }
+  h2 { margin: 0 0 var(--smrt-spacing-2); font: var(--smrt-typography-title-small-font); } ul { margin: 0; padding-inline-start: var(--smrt-spacing-5); }
+  button { padding: 0; border: 0; background: transparent; color: inherit; text-decoration: underline; cursor: pointer; }
+</style>

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

@@ -0,0 +1,11 @@
+import type { FormError } from './types.js';
+export interface Props {
+    errors: FormError[];
+    title?: string;
+    onselect?: (controlId: string) => void;
+    class?: string;
+}
+declare const ErrorSummary: import("svelte").Component<Props, {}, "">;
+type ErrorSummary = ReturnType<typeof ErrorSummary>;
+export default ErrorSummary;
+//# sourceMappingURL=ErrorSummary.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ErrorSummary.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/forms/ErrorSummary.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,YAAY,CAAC;AAE5C,MAAM,WAAW,KAAK;IACpB,MAAM,EAAE,SAAS,EAAE,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AA2BD,QAAA,MAAM,YAAY,2CAAwC,CAAC;AAC3D,KAAK,YAAY,GAAG,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC;AACpD,eAAe,YAAY,CAAC"}

package/dist/components/forms/Fieldset.svelte

@@ -0,0 +1,32 @@
+<script lang="ts">
+import type { Snippet } from 'svelte';
+import type { HTMLFieldsetAttributes } from 'svelte/elements';
+export interface Props extends Omit<HTMLFieldsetAttributes, 'class'> {
+  legend: string;
+  description?: string;
+  error?: string;
+  class?: string;
+  children: Snippet;
+}
+let {
+  legend,
+  description,
+  error,
+  class: className = '',
+  children,
+  ...rest
+}: Props = $props();
+const instanceId = $props.id();
+const descriptionId = $derived(
+  description ? `fieldset-${instanceId}-description` : undefined,
+);
+const errorId = $derived(error ? `fieldset-${instanceId}-error` : undefined);
+</script>
+<fieldset class="fieldset {className}" aria-describedby={[descriptionId, errorId].filter(Boolean).join(' ') || undefined} {...rest}>
+  <legend>{legend}</legend>{#if description}<p id={descriptionId} class="description">{description}</p>{/if}<div class="content">{@render children()}</div>{#if error}<p id={errorId} class="error" role="alert">{error}</p>{/if}
+</fieldset>
+<style>
+  .fieldset { margin: 0; padding: var(--smrt-spacing-4); border: 1px solid var(--smrt-color-outline-variant); border-radius: var(--smrt-radius-medium); }
+  legend { padding: 0 var(--smrt-spacing-2); color: var(--smrt-color-on-surface); font: var(--smrt-typography-title-small-font); }
+  .description, .error { margin: 0 0 var(--smrt-spacing-3); font: var(--smrt-typography-body-small-font); color: var(--smrt-color-on-surface-variant); } .error { margin: var(--smrt-spacing-3) 0 0; color: var(--smrt-color-error); }
+</style>

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

@@ -0,0 +1,13 @@
+import type { Snippet } from 'svelte';
+import type { HTMLFieldsetAttributes } from 'svelte/elements';
+export interface Props extends Omit<HTMLFieldsetAttributes, 'class'> {
+    legend: string;
+    description?: string;
+    error?: string;
+    class?: string;
+    children: Snippet;
+}
+declare const Fieldset: import("svelte").Component<Props, {}, "">;
+type Fieldset = ReturnType<typeof Fieldset>;
+export default Fieldset;
+//# sourceMappingURL=Fieldset.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Fieldset.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/forms/Fieldset.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACtC,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,iBAAiB,CAAC;AAE9D,MAAM,WAAW,KAAM,SAAQ,IAAI,CAAC,sBAAsB,EAAE,OAAO,CAAC;IAClE,MAAM,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,OAAO,CAAC;CACnB;AA0BD,QAAA,MAAM,QAAQ,2CAAwC,CAAC;AACvD,KAAK,QAAQ,GAAG,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC;AAC5C,eAAe,QAAQ,CAAC"}

package/dist/components/forms/FilePicker.svelte

@@ -0,0 +1,116 @@
+<script lang="ts">
+import type { HTMLInputAttributes } from 'svelte/elements';
+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
+  extends Omit<HTMLInputAttributes, 'type' | 'class' | 'value' | 'files'> {
+  files?: File[];
+  label?: string;
+  description?: string;
+  dropzone?: boolean;
+  class?: string;
+  interaction?: ControlInteractionOptions | false;
+  onchangefiles?: (files: File[]) => void;
+}
+let {
+  files = $bindable([]),
+  label = 'Choose files',
+  description = 'Drop files here or browse',
+  dropzone = false,
+  id,
+  name,
+  accept,
+  multiple = false,
+  disabled = false,
+  required = false,
+  class: className = '',
+  interaction,
+  onchange,
+  onchangefiles,
+  ...rest
+}: Props = $props();
+const instanceId = $props.id();
+const interactionContext = tryGetControlInteractionContext();
+let inputEl = $state<HTMLInputElement | null>(null);
+let rootEl = $state<HTMLLabelElement | null>(null);
+const resolvedId = $derived(id ?? `smrt-file-${instanceId}`);
+const controlId = $derived(
+  interaction === false ? undefined : (interaction?.id ?? name ?? resolvedId),
+);
+let dragging = $state(false);
+function setFiles(next: FileList | File[], syncInput = true) {
+  files = Array.from(next).slice(0, multiple ? undefined : 1);
+  if (syncInput && inputEl && typeof DataTransfer !== 'undefined') {
+    const transfer = new DataTransfer();
+    for (const file of files) transfer.items.add(file);
+    inputEl.files = transfer.files;
+  }
+  onchangefiles?.(files);
+}
+function handleChange(event: Event & { currentTarget: HTMLInputElement }) {
+  setFiles(event.currentTarget.files ?? [], false);
+  onchange?.(event);
+}
+function handleDrop(event: DragEvent) {
+  event.preventDefault();
+  dragging = false;
+  if (!disabled && event.dataTransfer?.files)
+    setFiles(event.dataTransfer.files);
+}
+export function open(): void {
+  if (!disabled) inputEl?.click();
+}
+export function clear(): void {
+  files = [];
+  if (inputEl) inputEl.value = '';
+  onchangefiles?.([]);
+}
+export function getElement(): HTMLInputElement | null {
+  return inputEl;
+}
+useControlRegistration(() => {
+  const input = inputEl;
+  const root = rootEl;
+  if (!input || !root || interaction === false) return false;
+  return {
+    controlId,
+    subject: interaction?.subject,
+    metadata: {
+      kind: 'file',
+      label,
+      description: interaction?.description ?? description,
+      sensitivity: interaction?.sensitivity ?? 'sensitive',
+      readable: false,
+      writable: false,
+      constraints: { required: required === true },
+      capabilities: ['focus', 'reveal', 'highlight', 'explain', 'validate'],
+    },
+    focus: () => input.focus(),
+    reveal: () => revealControl(root),
+    highlight: (durationMs) => highlightControl(root, durationMs),
+    validate: () => input.reportValidity(),
+    getState: () => ({
+      disabled: input.disabled,
+      valid: input.validity.valid,
+      validationMessage: input.validationMessage || undefined,
+    }),
+  };
+});
+</script>
+<label bind:this={rootEl} for={resolvedId} class="file-picker {className}" class:dropzone class:dragging class:disabled
+  data-smrt-control={controlId} data-smrt-form={interactionContext?.formId} ondragenter={(event) => { event.preventDefault(); dragging = true; }}
+  ondragover={(event) => event.preventDefault()} ondragleave={() => dragging = false} ondrop={handleDrop}>
+  <input bind:this={inputEl} id={resolvedId} type="file" {name} {accept} {multiple} {disabled} {required} onchange={handleChange} {...rest} />
+  <span class="label">{label}</span><span class="description">{files.length ? `${files.length} file${files.length === 1 ? '' : 's'} selected` : description}</span>
+</label>
+<style>
+  .file-picker { display: inline-flex; flex-direction: column; gap: var(--smrt-spacing-1); padding: var(--smrt-spacing-3) var(--smrt-spacing-4); 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); cursor: pointer; }
+  .file-picker.dropzone { width: 100%; min-height: 8rem; align-items: center; justify-content: center; border-style: dashed; text-align: center; }
+  .file-picker.dragging { border-color: var(--smrt-color-primary); background: var(--smrt-color-primary-container); }
+  .file-picker.disabled { opacity: .5; cursor: not-allowed; } input { position: absolute; width: 1px; height: 1px; opacity: 0; }
+  input:focus-visible ~ .label { outline: 2px solid var(--smrt-color-primary); outline-offset: 3px; }
+  .label { font: var(--smrt-typography-label-large-font); } .description { font: var(--smrt-typography-body-small-font); color: var(--smrt-color-on-surface-variant); }
+  .file-picker[data-smrt-highlighted='true'] { outline: 3px solid var(--smrt-color-tertiary); outline-offset: 4px; }
+</style>

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

@@ -0,0 +1,19 @@
+import type { HTMLInputAttributes } from 'svelte/elements';
+import type { ControlInteractionOptions } from './control-interaction.js';
+export interface Props extends Omit<HTMLInputAttributes, 'type' | 'class' | 'value' | 'files'> {
+    files?: File[];
+    label?: string;
+    description?: string;
+    dropzone?: boolean;
+    class?: string;
+    interaction?: ControlInteractionOptions | false;
+    onchangefiles?: (files: File[]) => void;
+}
+declare const FilePicker: import("svelte").Component<Props, {
+    open: () => void;
+    clear: () => void;
+    getElement: () => HTMLInputElement | null;
+}, "files">;
+type FilePicker = ReturnType<typeof FilePicker>;
+export default FilePicker;
+//# sourceMappingURL=FilePicker.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FilePicker.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/forms/FilePicker.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,iBAAiB,CAAC;AAE3D,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,0BAA0B,CAAC;AAI1E,MAAM,WAAW,KACf,SAAQ,IAAI,CAAC,mBAAmB,EAAE,MAAM,GAAG,OAAO,GAAG,OAAO,GAAG,OAAO,CAAC;IACvE,KAAK,CAAC,EAAE,IAAI,EAAE,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,yBAAyB,GAAG,KAAK,CAAC;IAChD,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,IAAI,EAAE,KAAK,IAAI,CAAC;CACzC;AAqGD,QAAA,MAAM,UAAU;gBAhDE,IAAI;iBAGH,IAAI;sBAKC,gBAAgB,GAAG,IAAI;WAwCS,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}

package/dist/components/forms/Form.svelte

@@ -19,28 +19,82 @@
  */
 import type { Snippet } from 'svelte';
 import type { HTMLFormAttributes } from 'svelte/elements';
+import {
+  type ControlInteractionEvent,
+  type ControlInteractionRegistry,
+  createControlInteractionRegistry,
+} from './control-interaction.js';
+import { setControlInteractionContext } from './control-interaction-context.js';
 
 export interface Props extends Omit<HTMLFormAttributes, 'class'> {
   class?: string;
   preventDefault?: boolean;
+  /** Stable form scope used by voice/chat/tutorial adapters. */
+  formId?: string;
+  /** Supply a registry to coordinate multiple forms or inspect commands. */
+  interactionRegistry?: ControlInteractionRegistry;
+  /** Receives registry lifecycle and command events. */
+  oninteraction?: (event: ControlInteractionEvent) => void;
   children: Snippet;
 }
 
 let {
   class: className = '',
   preventDefault = true,
+  formId,
+  interactionRegistry,
+  oninteraction,
+  id,
+  name,
   onsubmit,
   children,
   ...rest
 }: Props = $props();
 
+const instanceId = $props.id();
+const generatedFormId = `smrt-form-${instanceId}`;
+const localInteractionRegistry = createControlInteractionRegistry();
+const resolvedFormId = $derived(formId ?? id ?? name ?? generatedFormId);
+const resolvedInteractionRegistry = $derived(
+  interactionRegistry ?? localInteractionRegistry,
+);
+
+setControlInteractionContext({
+  get formId() {
+    return resolvedFormId;
+  },
+  get registry() {
+    return resolvedInteractionRegistry;
+  },
+});
+
+$effect(() => {
+  if (!oninteraction) return;
+  return resolvedInteractionRegistry.subscribe(oninteraction);
+});
+
+export function getInteractionRegistry(): ControlInteractionRegistry {
+  return resolvedInteractionRegistry;
+}
+
+export function getFormId(): string {
+  return resolvedFormId;
+}
+
 function handleSubmit(event: SubmitEvent & { currentTarget: HTMLFormElement }) {
   if (preventDefault) event.preventDefault();
   onsubmit?.(event);
 }
 </script>
 
-<form class="form {className}" onsubmit={handleSubmit} {...rest}>
+<form
+  id={id}
+  name={name}
+  class="form {className}"
+  data-smrt-form={resolvedFormId}
+  onsubmit={handleSubmit}
+  {...rest}
+>
 	{@render children()}
 </form>
 
@@ -50,4 +104,3 @@ function handleSubmit(event: SubmitEvent & { currentTarget: HTMLFormElement }) {
   with a consumer's single-class layout override (e.g. `:global(.x){display:flex}`)
   and can win by stylesheet order. The `form` class stays as a stable hook.
 -->
-

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

@@ -18,12 +18,22 @@
  */
 import type { Snippet } from 'svelte';
 import type { HTMLFormAttributes } from 'svelte/elements';
+import { type ControlInteractionEvent, type ControlInteractionRegistry } from './control-interaction.js';
 export interface Props extends Omit<HTMLFormAttributes, 'class'> {
     class?: string;
     preventDefault?: boolean;
+    /** Stable form scope used by voice/chat/tutorial adapters. */
+    formId?: string;
+    /** Supply a registry to coordinate multiple forms or inspect commands. */
+    interactionRegistry?: ControlInteractionRegistry;
+    /** Receives registry lifecycle and command events. */
+    oninteraction?: (event: ControlInteractionEvent) => void;
     children: Snippet;
 }
-declare const Form: import("svelte").Component<Props, {}, "">;
+declare const Form: import("svelte").Component<Props, {
+    getInteractionRegistry: () => ControlInteractionRegistry;
+    getFormId: () => string;
+}, "">;
 type Form = ReturnType<typeof Form>;
 export default Form;
 //# sourceMappingURL=Form.svelte.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Form.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/forms/Form.svelte.ts"],"names":[],"mappings":"AAGA;;;;;;;;;;;;;;;;;GAiBG;AACH,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACtC,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAG1D,MAAM,WAAW,KAAM,SAAQ,IAAI,CAAC,kBAAkB,EAAE,OAAO,CAAC;IAC9D,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,QAAQ,EAAE,OAAO,CAAC;CACnB;AA8BD,QAAA,MAAM,IAAI,2CAAwC,CAAC;AACnD,KAAK,IAAI,GAAG,UAAU,CAAC,OAAO,IAAI,CAAC,CAAC;AACpC,eAAe,IAAI,CAAC"}
+{"version":3,"file":"Form.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/forms/Form.svelte.ts"],"names":[],"mappings":"AAGA;;;;;;;;;;;;;;;;;GAiBG;AACH,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACtC,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAC1D,OAAO,EACL,KAAK,uBAAuB,EAC5B,KAAK,0BAA0B,EAEhC,MAAM,0BAA0B,CAAC;AAIlC,MAAM,WAAW,KAAM,SAAQ,IAAI,CAAC,kBAAkB,EAAE,OAAO,CAAC;IAC9D,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,8DAA8D;IAC9D,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,0EAA0E;IAC1E,mBAAmB,CAAC,EAAE,0BAA0B,CAAC;IACjD,sDAAsD;IACtD,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,uBAAuB,KAAK,IAAI,CAAC;IACzD,QAAQ,EAAE,OAAO,CAAC;CACnB;AAkED,QAAA,MAAM,IAAI;kCAtB0B,0BAA0B;qBAIvC,MAAM;MAkBqB,CAAC;AACnD,KAAK,IAAI,GAAG,UAAU,CAAC,OAAO,IAAI,CAAC,CAAC;AACpC,eAAe,IAAI,CAAC"}

package/dist/components/forms/FormGroup.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 import type { Snippet } from 'svelte';
+import type { ControlInteractionOptions } from './control-interaction.js';
 import {
   type FormGroupContextValue,
   nextFieldId,
@@ -12,14 +13,25 @@ export interface Props {
   error?: string;
   hint?: string;
   required?: boolean;
+  /** Agent/tutorial interaction metadata inherited by the wrapped control. */
+  interaction?: ControlInteractionOptions | false;
   children: Snippet;
 }
 
-const { label, id, error, hint, required = false, children }: Props = $props();
+const {
+  label,
+  id,
+  error,
+  hint,
+  required = false,
+  interaction,
+  children,
+}: Props = $props();
 
 // Stable id so the label's `for` and the wrapped input's `id` agree even when
 // the consumer doesn't pass one.
-const fallbackId = nextFieldId();
+const instanceId = $props.id();
+const fallbackId = `smrt-field-${instanceId}`;
 const fieldId = $derived(id ?? fallbackId);
 const hintId = $derived(hint && !error ? `${fieldId}-hint` : undefined);
 const errorId = $derived(error ? `${fieldId}-error` : undefined);
@@ -34,6 +46,11 @@ setFormGroupContext(
     inputId: fieldId,
     describedBy,
     invalid: !!error,
+    label,
+    description: hint,
+    required,
+    error,
+    interaction,
   }),
 );
 </script>

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

@@ -1,10 +1,13 @@
 import type { Snippet } from 'svelte';
+import type { ControlInteractionOptions } from './control-interaction.js';
 export interface Props {
     label: string;
     id?: string;
     error?: string;
     hint?: string;
     required?: boolean;
+    /** Agent/tutorial interaction metadata inherited by the wrapped control. */
+    interaction?: ControlInteractionOptions | false;
     children: Snippet;
 }
 declare const FormGroup: import("svelte").Component<Props, {}, "">;