@happyvertical/smrt-ui 0.38.26 → 0.39.0

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

@@ -1 +1 @@
-{"version":3,"file":"FormGroup.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/forms/FormGroup.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAQtC,MAAM,WAAW,KAAK;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,EAAE,OAAO,CAAC;CACnB;AAiDD,QAAA,MAAM,SAAS,2CAAwC,CAAC;AACxD,KAAK,SAAS,GAAG,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC;AAC9C,eAAe,SAAS,CAAC"}
+{"version":3,"file":"FormGroup.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/forms/FormGroup.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACtC,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,0BAA0B,CAAC;AAQ1E,MAAM,WAAW,KAAK;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,4EAA4E;IAC5E,WAAW,CAAC,EAAE,yBAAyB,GAAG,KAAK,CAAC;IAChD,QAAQ,EAAE,OAAO,CAAC;CACnB;AAgED,QAAA,MAAM,SAAS,2CAAwC,CAAC;AACxD,KAAK,SAAS,GAAG,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC;AAC9C,eAAe,SAAS,CAAC"}

package/dist/components/forms/Input.svelte

@@ -1,10 +1,22 @@
 <script lang="ts">
 import type { HTMLInputAttributes } from 'svelte/elements';
+import {
+  emitControlChange,
+  highlightControl,
+  revealControl,
+} from './control-dom.js';
+import type {
+  ControlInteractionOptions,
+  ControlKind,
+} from './control-interaction.js';
+import { tryGetControlInteractionContext } from './control-interaction-context.js';
 import { tryGetFormGroupContext } from './form-group-context.js';
 
 export interface Props extends Omit<HTMLInputAttributes, 'class' | 'value'> {
   value?: string | number;
   class?: string;
+  /** Stable identity and sensitivity metadata for interaction adapters. */
+  interaction?: ControlInteractionOptions | false;
 }
 
 let {
@@ -17,6 +29,8 @@ let {
   required = false,
   name,
   class: className = '',
+  interaction,
+  'aria-label': ariaLabel,
   'aria-describedby': ariaDescribedby,
   'aria-invalid': ariaInvalid,
   ...rest
@@ -25,6 +39,8 @@ let {
 // When wrapped in a <FormGroup>, inherit the id (so its <label for> resolves),
 // the hint/error association, and the error state — unless set explicitly.
 const formGroup = tryGetFormGroupContext();
+const controlInteraction = tryGetControlInteractionContext();
+let inputEl = $state<HTMLInputElement | null>(null);
 const resolvedId = $derived(id ?? formGroup?.().inputId);
 const resolvedDescribedBy = $derived(
   ariaDescribedby ?? formGroup?.().describedBy,
@@ -32,9 +48,111 @@ 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 kindFromType(): ControlKind {
+  switch (type) {
+    case 'email':
+      return 'email';
+    case 'password':
+      return 'password';
+    case 'number':
+      return 'number';
+    case 'date':
+      return 'date';
+    case 'time':
+      return 'time';
+    case 'datetime-local':
+      return 'datetime';
+    case 'range':
+      return 'slider';
+    default:
+      return 'text';
+  }
+}
+
+function setControlValue(next: unknown) {
+  value =
+    type === 'number' || type === 'range' ? Number(next) : String(next ?? '');
+  if (inputEl) emitControlChange(inputEl);
+}
+
+$effect(() => {
+  const context = controlInteraction;
+  const element = inputEl;
+  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: kindFromType(),
+      label: formGroup?.().label ?? ariaLabel ?? undefined,
+      description: options.description ?? formGroup?.().description,
+      sensitivity:
+        options.sensitivity ?? (type === 'password' ? 'secret' : 'public'),
+      readable: options.readable,
+      writable: options.writable,
+      constraints: {
+        required: required === true,
+        min: element.min || undefined,
+        max: element.max || undefined,
+        step: element.step || undefined,
+        minLength: element.minLength >= 0 ? element.minLength : undefined,
+        maxLength: element.maxLength >= 0 ? element.maxLength : undefined,
+        pattern: element.pattern || 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 {
+  inputEl?.focus();
+}
+
+export function reveal(): void {
+  if (inputEl) revealControl(inputEl);
+}
+
+export function highlight(durationMs?: number): void {
+  if (inputEl) highlightControl(inputEl, durationMs);
+}
+
+export function getElement(): HTMLInputElement | null {
+  return inputEl;
+}
 </script>
 
 <input
+	bind:this={inputEl}
 	id={resolvedId}
 	{type}
 	bind:value
@@ -43,9 +161,12 @@ const resolvedInvalid = $derived(
 	{readonly}
 	{required}
 	{name}
+	aria-label={ariaLabel}
 	aria-describedby={resolvedDescribedBy}
 	aria-invalid={resolvedInvalid}
 	class="input {className}"
+	data-smrt-control={resolvedControlId}
+	data-smrt-form={controlInteraction?.formId}
 	{...rest}
 />
 
@@ -71,6 +192,12 @@ const resolvedInvalid = $derived(
 		box-shadow: 0 0 0 3px color-mix(in srgb, var(--smrt-color-primary, #005ac1) 10%, transparent);
 	}
 
+	.input[data-smrt-highlighted='true'] {
+		outline: 3px solid var(--smrt-color-tertiary, #7d5260);
+		outline-offset: 3px;
+		box-shadow: 0 0 0 6px color-mix(in srgb, var(--smrt-color-tertiary, #7d5260) 20%, transparent);
+	}
+
 	.input:disabled {
 		background-color: var(--smrt-color-surface-container-high, #f3f4f6);
 		cursor: not-allowed;

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

@@ -1,9 +1,17 @@
 import type { HTMLInputAttributes } from 'svelte/elements';
+import type { ControlInteractionOptions } from './control-interaction.js';
 export interface Props extends Omit<HTMLInputAttributes, 'class' | 'value'> {
     value?: string | number;
     class?: string;
+    /** Stable identity and sensitivity metadata for interaction adapters. */
+    interaction?: ControlInteractionOptions | false;
 }
-declare const Input: import("svelte").Component<Props, {}, "value">;
+declare const Input: import("svelte").Component<Props, {
+    focus: () => void;
+    reveal: () => void;
+    highlight: (durationMs?: number) => void;
+    getElement: () => HTMLInputElement | null;
+}, "value">;
 type Input = ReturnType<typeof Input>;
 export default Input;
 //# sourceMappingURL=Input.svelte.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Input.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/forms/Input.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,iBAAiB,CAAC;AAI3D,MAAM,WAAW,KAAM,SAAQ,IAAI,CAAC,mBAAmB,EAAE,OAAO,GAAG,OAAO,CAAC;IACzE,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAuCD,QAAA,MAAM,KAAK,gDAAwC,CAAC;AACpD,KAAK,KAAK,GAAG,UAAU,CAAC,OAAO,KAAK,CAAC,CAAC;AACtC,eAAe,KAAK,CAAC"}
+{"version":3,"file":"Input.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/forms/Input.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,iBAAiB,CAAC;AAM3D,OAAO,KAAK,EACV,yBAAyB,EAE1B,MAAM,0BAA0B,CAAC;AAKlC,MAAM,WAAW,KAAM,SAAQ,IAAI,CAAC,mBAAmB,EAAE,OAAO,GAAG,OAAO,CAAC;IACzE,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,yEAAyE;IACzE,WAAW,CAAC,EAAE,yBAAyB,GAAG,KAAK,CAAC;CACjD;AAmJD,QAAA,MAAM,KAAK;iBAvBQ,IAAI;kBAIH,IAAI;6BAIS,MAAM,KAAG,IAAI;sBAItB,gBAAgB,GAAG,IAAI;WAWI,CAAC;AACpD,KAAK,KAAK,GAAG,UAAU,CAAC,OAAO,KAAK,CAAC,CAAC;AACtC,eAAe,KAAK,CAAC"}

package/dist/components/forms/InputGroup.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+import type { Snippet } from 'svelte';
+export interface Props {
+  prefix?: Snippet;
+  suffix?: Snippet;
+  children: Snippet;
+  class?: string;
+}
+let { prefix, suffix, children, class: className = '' }: Props = $props();
+</script>
+<div class="input-group {className}">{#if prefix}<span class="adornment">{@render prefix()}</span>{/if}<div class="control">{@render children()}</div>{#if suffix}<span class="adornment">{@render suffix()}</span>{/if}</div>
+<style>
+  .input-group { display: flex; align-items: stretch; width: 100%; border: 1px solid var(--smrt-color-outline-variant); border-radius: var(--smrt-radius-small); background: var(--smrt-color-surface); overflow: hidden; }
+  .adornment { display: inline-flex; align-items: center; padding: 0 var(--smrt-spacing-3); background: var(--smrt-color-surface-container-low); color: var(--smrt-color-on-surface-variant); }
+  .control { flex: 1; min-width: 0; } .control :global(input), .control :global(select), .control :global(textarea) { border: 0 !important; border-radius: 0 !important; box-shadow: none !important; }
+  .input-group:focus-within { outline: 2px solid var(--smrt-color-primary); outline-offset: 1px; }
+</style>

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

@@ -0,0 +1,11 @@
+import type { Snippet } from 'svelte';
+export interface Props {
+    prefix?: Snippet;
+    suffix?: Snippet;
+    children: Snippet;
+    class?: string;
+}
+declare const InputGroup: import("svelte").Component<Props, {}, "">;
+type InputGroup = ReturnType<typeof InputGroup>;
+export default InputGroup;
+//# sourceMappingURL=InputGroup.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"InputGroup.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/forms/InputGroup.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAEtC,MAAM,WAAW,KAAK;IACpB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAWD,QAAA,MAAM,UAAU,2CAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}

package/dist/components/forms/Listbox.svelte

@@ -0,0 +1,97 @@
+<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 | number;
+  label: string;
+  name?: string;
+  disabled?: boolean;
+  interaction?: ControlInteractionOptions | false;
+  onvaluechange?: (value: string | number) => void;
+  class?: string;
+}
+let {
+  options,
+  value = $bindable(),
+  label,
+  name,
+  disabled = false,
+  interaction,
+  onvaluechange,
+  class: className = '',
+}: Props = $props();
+const instanceId = $props.id();
+const interactionContext = tryGetControlInteractionContext();
+let rootEl = $state<HTMLDivElement | null>(null);
+let optionEls = $state<Array<HTMLButtonElement | null>>([]);
+const controlId = $derived(
+  interaction === false
+    ? undefined
+    : (interaction?.id ?? name ?? `listbox-${instanceId}`),
+);
+function select(next: unknown) {
+  const option = options.find((item) => String(item.value) === String(next));
+  if (!option || option.disabled || disabled) return;
+  value = option.value;
+  onvaluechange?.(option.value);
+}
+function move(event: KeyboardEvent, index: number) {
+  let next = index;
+  if (event.key === 'ArrowDown') next = (index + 1) % options.length;
+  else if (event.key === 'ArrowUp')
+    next = (index - 1 + options.length) % options.length;
+  else if (event.key === 'Home') next = 0;
+  else if (event.key === 'End') next = options.length - 1;
+  else return;
+  event.preventDefault();
+  while (options[next]?.disabled && next !== index)
+    next =
+      event.key === 'ArrowUp'
+        ? (next - 1 + options.length) % options.length
+        : (next + 1) % options.length;
+  optionEls[next]?.focus();
+}
+useControlRegistration(() => {
+  const root = rootEl;
+  if (!root || interaction === false) return false;
+  return {
+    controlId,
+    subject: interaction?.subject,
+    metadata: {
+      kind: 'listbox',
+      label,
+      description: interaction?.description,
+      sensitivity: interaction?.sensitivity ?? 'public',
+      readable: interaction?.readable,
+      writable: interaction?.writable,
+      options,
+    },
+    getValue: () => value,
+    setValue: select,
+    clear: () => {
+      value = undefined;
+    },
+    focus: () => optionEls.find((item) => item && !item.disabled)?.focus(),
+    reveal: () => revealControl(root),
+    highlight: (durationMs) => highlightControl(root, durationMs),
+    getState: () => ({ disabled }),
+  };
+});
+</script>
+<div bind:this={rootEl} class="listbox {className}" role="listbox" aria-label={label} aria-disabled={disabled} data-smrt-control={controlId} data-smrt-form={interactionContext?.formId}>
+  {#each options as option, index (option.value)}<button bind:this={optionEls[index]} type="button" role="option" aria-selected={value === option.value}
+    disabled={disabled || option.disabled} tabindex={value === option.value || (value === undefined && index === 0) ? 0 : -1}
+    onkeydown={(event) => move(event, index)} onclick={() => select(option.value)}>{option.label}</button>{/each}
+</div>
+<style>
+  .listbox { 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); }
+  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; cursor: pointer; }
+  button[aria-selected='true'] { background: var(--smrt-color-secondary-container); color: var(--smrt-color-on-secondary-container); } button:focus-visible { outline: 2px solid var(--smrt-color-primary); }
+  button:disabled { opacity: .5; cursor: not-allowed; } :global(.listbox[data-smrt-highlighted='true']) { outline: 3px solid var(--smrt-color-tertiary); outline-offset: 4px; }
+</style>

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"Listbox.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/forms/Listbox.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,GAAG,MAAM,CAAC;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,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;AAkFD,QAAA,MAAM,OAAO,gDAAwC,CAAC;AACtD,KAAK,OAAO,GAAG,UAAU,CAAC,OAAO,OAAO,CAAC,CAAC;AAC1C,eAAe,OAAO,CAAC"}

package/dist/components/forms/MultiSelect.svelte

@@ -0,0 +1,159 @@
+<script lang="ts">
+import { tick } 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 { useControlRegistration } from './use-control-registration.svelte.js';
+export interface Props {
+  options: ControlOption[];
+  values?: Array<string | number>;
+  label: string;
+  name?: string;
+  placeholder?: string;
+  disabled?: boolean;
+  interaction?: ControlInteractionOptions | false;
+  onvalueschange?: (values: Array<string | number>) => void;
+  class?: string;
+}
+let {
+  options,
+  values = $bindable([]),
+  label,
+  name,
+  placeholder = 'Select options',
+  disabled = false,
+  interaction,
+  onvalueschange,
+  class: className = '',
+}: Props = $props();
+const instanceId = $props.id();
+const listId = `smrt-multiselect-${instanceId}`;
+const triggerId = `${listId}-trigger`;
+const interactionContext = tryGetControlInteractionContext();
+let rootEl = $state<HTMLDivElement | null>(null);
+let triggerEl = $state<HTMLButtonElement | null>(null);
+let optionEls = $state<Array<HTMLButtonElement | null>>([]);
+let open = $state(false);
+const controlId = $derived(
+  interaction === false ? undefined : (interaction?.id ?? name ?? listId),
+);
+const selectedLabels = $derived(
+  options
+    .filter((option) =>
+      values.some((value) => String(value) === String(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));
+  values = has
+    ? values.filter((value) => String(value) !== String(option.value))
+    : [...values, option.value];
+  onvalueschange?.(values);
+}
+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);
+  onvalueschange?.(values);
+}
+async function openOptions(focusFirst = false) {
+  if (disabled) return;
+  open = true;
+  if (focusFirst) {
+    await tick();
+    optionEls.find((element) => element && !element.disabled)?.focus();
+  }
+}
+function closeOptions(refocus = false) {
+  open = false;
+  if (refocus) triggerEl?.focus();
+}
+function handleTriggerKeydown(event: KeyboardEvent) {
+  if (event.key === 'ArrowDown') {
+    event.preventDefault();
+    openOptions(true);
+  } else if (event.key === 'Escape') {
+    closeOptions();
+  }
+}
+function handleOptionsKeydown(event: KeyboardEvent) {
+  if (event.key === 'Escape') {
+    event.preventDefault();
+    closeOptions(true);
+    return;
+  }
+  if (event.key === 'Tab') {
+    closeOptions();
+    return;
+  }
+  if (!['ArrowDown', 'ArrowUp', 'Home', 'End'].includes(event.key)) return;
+  event.preventDefault();
+  const enabled = optionEls.filter(
+    (element): element is HTMLButtonElement => !!element && !element.disabled,
+  );
+  if (enabled.length === 0) return;
+  const current = enabled.indexOf(document.activeElement as HTMLButtonElement);
+  const next =
+    event.key === 'Home'
+      ? 0
+      : event.key === 'End'
+        ? enabled.length - 1
+        : (current + (event.key === 'ArrowUp' ? -1 : 1) + enabled.length) %
+          enabled.length;
+  enabled[next]?.focus();
+}
+$effect(() => {
+  if (!open) return;
+  const dismiss = (event: PointerEvent) => {
+    if (rootEl && !rootEl.contains(event.target as Node)) closeOptions();
+  };
+  document.addEventListener('pointerdown', dismiss, true);
+  return () => document.removeEventListener('pointerdown', dismiss, true);
+});
+useControlRegistration(() => {
+  const root = rootEl;
+  const trigger = triggerEl;
+  if (!root || !trigger || interaction === false) return false;
+  return {
+    controlId,
+    subject: interaction?.subject,
+    metadata: {
+      kind: 'multi-select',
+      label,
+      description: interaction?.description,
+      sensitivity: interaction?.sensitivity ?? 'public',
+      readable: interaction?.readable,
+      writable: interaction?.writable,
+      options,
+    },
+    getValue: () => [...values],
+    setValue: setValues,
+    clear: () => setValues([]),
+    focus: () => trigger.focus(),
+    reveal: () => revealControl(root),
+    highlight: (durationMs) => highlightControl(root, durationMs),
+    getState: () => ({ disabled }),
+  };
+});
+</script>
+<div bind:this={rootEl} class="multi-select {className}" data-smrt-control={controlId} data-smrt-form={interactionContext?.formId}>
+  <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}
+</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); }
+  .trigger { width: 100%; min-height: 2.5rem; 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; text-align: left; }
+  .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); background: var(--smrt-color-surface-container); box-shadow: var(--smrt-elevation-2); }
+  .options button { display: grid; grid-template-columns: 1.25rem 1fr; gap: var(--smrt-spacing-2); padding: var(--smrt-spacing-2); border: 0; background: transparent; color: inherit; text-align: left; } .options button[aria-selected='true'] { background: var(--smrt-color-secondary-container); }
+  :global(.multi-select[data-smrt-highlighted='true']) { outline: 3px solid var(--smrt-color-tertiary); outline-offset: 4px; }
+</style>

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

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

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

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

package/dist/components/forms/Radio.svelte

@@ -0,0 +1,34 @@
+<script lang="ts">
+import type { HTMLInputAttributes } from 'svelte/elements';
+import { getRadioGroupContext } from './radio-group-context.js';
+export interface Props
+  extends Omit<HTMLInputAttributes, 'type' | 'name' | 'checked' | 'value'> {
+  value: string;
+  label: string;
+  disabled?: boolean;
+}
+let { value, label, disabled = false, id, onchange, ...rest }: Props = $props();
+const instanceId = $props.id();
+const group = getRadioGroupContext();
+const resolvedId = $derived(id ?? `smrt-radio-${instanceId}`);
+$effect(() => group.registerOption({ value, label, disabled }));
+function handleChange(event: Event & { currentTarget: HTMLInputElement }) {
+  if (event.currentTarget.checked) group.setValue(value);
+  onchange?.(event);
+}
+</script>
+<label class="radio" class:disabled={disabled || group.disabled}>
+  <input id={resolvedId} type="radio" name={group.name} {value} disabled={disabled || group.disabled} required={group.required}
+    checked={group.value === value} onchange={handleChange} {...rest} />
+  <span class="radio__mark" aria-hidden="true"></span><span>{label}</span>
+</label>
+<style>
+  .radio { display: inline-flex; align-items: center; gap: var(--smrt-spacing-2); cursor: pointer; }
+  .radio.disabled { opacity: .5; cursor: not-allowed; }
+  input { position: absolute; opacity: 0; width: 1px; height: 1px; }
+  .radio__mark { width: 1.15rem; height: 1.15rem; border: 2px solid var(--smrt-color-outline); border-radius: 50%; display: grid; place-items: center; }
+  .radio__mark::after { content: ''; width: .55rem; height: .55rem; border-radius: 50%; background: var(--smrt-color-primary); transform: scale(0); transition: transform var(--smrt-duration-short2); }
+  input:checked + .radio__mark { border-color: var(--smrt-color-primary); }
+  input:checked + .radio__mark::after { transform: scale(1); }
+  input:focus-visible + .radio__mark { outline: 2px solid var(--smrt-color-primary); outline-offset: 3px; }
+</style>

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

@@ -0,0 +1,10 @@
+import type { HTMLInputAttributes } from 'svelte/elements';
+export interface Props extends Omit<HTMLInputAttributes, 'type' | 'name' | 'checked' | 'value'> {
+    value: string;
+    label: string;
+    disabled?: boolean;
+}
+declare const Radio: import("svelte").Component<Props, {}, "">;
+type Radio = ReturnType<typeof Radio>;
+export default Radio;
+//# sourceMappingURL=Radio.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Radio.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/forms/Radio.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,iBAAiB,CAAC;AAG3D,MAAM,WAAW,KACf,SAAQ,IAAI,CAAC,mBAAmB,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,GAAG,OAAO,CAAC;IACxE,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAuBD,QAAA,MAAM,KAAK,2CAAwC,CAAC;AACpD,KAAK,KAAK,GAAG,UAAU,CAAC,OAAO,KAAK,CAAC,CAAC;AACtC,eAAe,KAAK,CAAC"}