@happyvertical/smrt-ui 0.51.39 → 0.53.0

package/dist/components/forms/Fieldset.svelte

@@ -8,6 +8,8 @@ export interface Props extends Omit<HTMLFieldsetAttributes, 'class'> {
   description?: string;
   /** Optional error message displayed in alert color. */
   error?: string;
+  /** Lays the fields out in one column with a gap between them. */
+  stack?: boolean;
   /** CSS class to apply to the fieldset. */
   class?: string;
   /** Form controls and content inside the fieldset. */
@@ -17,6 +19,7 @@ let {
   legend,
   description,
   error,
+  stack = false,
   class: className = '',
   children,
   ...rest
@@ -28,10 +31,11 @@ const descriptionId = $derived(
 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}
+  <legend>{legend}</legend>{#if description}<p id={descriptionId} class="description">{description}</p>{/if}<div class="content" class:content--stack={stack}>{@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); }
+  .content--stack { display: grid; gap: var(--smrt-spacing-4); }
   .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

@@ -7,6 +7,8 @@ export interface Props extends Omit<HTMLFieldsetAttributes, 'class'> {
     description?: string;
     /** Optional error message displayed in alert color. */
     error?: string;
+    /** Lays the fields out in one column with a gap between them. */
+    stack?: boolean;
     /** CSS class to apply to the fieldset. */
     class?: string;
     /** Form controls and content inside the fieldset. */

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

@@ -1 +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,4CAA4C;IAC5C,MAAM,EAAE,MAAM,CAAC;IACf,4DAA4D;IAC5D,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,uDAAuD;IACvD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,0CAA0C;IAC1C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,qDAAqD;IACrD,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"}
+{"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,4CAA4C;IAC5C,MAAM,EAAE,MAAM,CAAC;IACf,4DAA4D;IAC5D,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,uDAAuD;IACvD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,iEAAiE;IACjE,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,0CAA0C;IAC1C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,qDAAqD;IACrD,QAAQ,EAAE,OAAO,CAAC;CACnB;AA2BD,QAAA,MAAM,QAAQ,2CAAwC,CAAC;AACvD,KAAK,QAAQ,GAAG,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC;AAC5C,eAAe,QAAQ,CAAC"}

package/dist/components/forms/Form.svelte

@@ -92,6 +92,11 @@ export function getFormId(): string {
   return resolvedFormId;
 }
 
+/** Returns the native form while mounted, or null before mount/after unmount. */
+export function getFormElement(): HTMLFormElement | null {
+  return formElement;
+}
+
 function handleSubmit(event: SubmitEvent & { currentTarget: HTMLFormElement }) {
   if (preventDefault) event.preventDefault();
   onsubmit?.(event);

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

@@ -38,6 +38,7 @@ export interface Props extends Omit<HTMLFormAttributes, 'class'> {
 declare const Form: import("svelte").Component<Props, {
     getInteractionRegistry: () => ControlInteractionRegistry;
     getFormId: () => string;
+    getFormElement: () => HTMLFormElement | null;
 }, "">;
 type Form = ReturnType<typeof Form>;
 export default Form;

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;AAC1D,OAAO,EACL,KAAK,uBAAuB,EAC5B,KAAK,0BAA0B,EAEhC,MAAM,0BAA0B,CAAC;AAKlC,MAAM,WAAW,KAAM,SAAQ,IAAI,CAAC,kBAAkB,EAAE,OAAO,CAAC;IAC9D,8CAA8C;IAC9C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,2DAA2D;IAC3D,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,mEAAmE;IACnE,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,iDAAiD;IACjD,QAAQ,EAAE,OAAO,CAAC;CACnB;AAgHD,QAAA,MAAM,IAAI;kCA9D0B,0BAA0B;qBAIvC,MAAM;MA0DqB,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;AAKlC,MAAM,WAAW,KAAM,SAAQ,IAAI,CAAC,kBAAkB,EAAE,OAAO,CAAC;IAC9D,8CAA8C;IAC9C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,2DAA2D;IAC3D,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,mEAAmE;IACnE,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,iDAAiD;IACjD,QAAQ,EAAE,OAAO,CAAC;CACnB;AAqHD,QAAA,MAAM,IAAI;kCAnE0B,0BAA0B;qBAIvC,MAAM;0BAKD,eAAe,GAAG,IAAI;MA0DA,CAAC;AACnD,KAAK,IAAI,GAAG,UAAU,CAAC,OAAO,IAAI,CAAC,CAAC;AACpC,eAAe,IAAI,CAAC"}

package/dist/components/forms/FormActionBar.svelte

@@ -0,0 +1,84 @@
+<script lang="ts">
+/**
+ * FormActionBar — a form's actions (Cancel · Save draft · Publish).
+ *
+ * Inline under the form on wider screens. On phones (up to 48rem) it is fixed
+ * to the bottom of the screen, padded for the safe area, and replaces the
+ * shell's phone bottom bar: `AdminShell` sees the `data-form-action-bar`
+ * attribute and hides its own bar. Hidden while the on-screen keyboard is open
+ * (`:root[data-keyboard-open]`, set by the shell's keyboard watcher). Put the
+ * primary action last.
+ */
+import type { Snippet } from 'svelte';
+import { M } from '../../i18n/strings.ui.js';
+import { useI18n } from '../../i18n/use-i18n.js';
+
+export interface Props {
+  /** Accessible name of the action group (default "Form actions"). */
+  label?: string;
+  /** Inside a toolbar the page already draws: no rule or margin on wider screens. */
+  plain?: boolean;
+  /** The action buttons, primary last. */
+  children: Snippet;
+}
+
+let { label, plain = false, children }: Props = $props();
+
+const { t } = useI18n();
+</script>
+
+<div
+  class="form-action-bar"
+  class:plain
+  role="group"
+  aria-label={label ?? t(M['ui.form_action_bar.label'])}
+  data-form-action-bar
+  data-testid="form-action-bar"
+>
+  {@render children()}
+</div>
+
+<style>
+  .form-action-bar {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: flex-end;
+    align-items: center;
+    gap: var(--smrt-spacing-3);
+    margin-block-start: var(--smrt-spacing-6);
+    padding-block-start: var(--smrt-spacing-4);
+    border-block-start: 1px solid var(--smrt-color-outline-variant);
+  }
+
+  .form-action-bar.plain {
+    margin: 0;
+    padding: 0;
+    border: 0;
+  }
+
+  @media (max-width: 48rem) {
+    .form-action-bar,
+    .form-action-bar.plain {
+      position: fixed;
+      inset: auto 0 0;
+      z-index: 12;
+      flex-wrap: nowrap;
+      gap: var(--smrt-spacing-2);
+      margin: 0;
+      padding: var(--smrt-spacing-2) var(--smrt-spacing-4)
+        calc(var(--smrt-spacing-2) + env(safe-area-inset-bottom));
+      border-block-start: 1px solid var(--smrt-color-outline-variant);
+      background: var(--smrt-color-surface);
+      box-shadow: var(--smrt-elevation-2);
+    }
+
+    .form-action-bar > :global(*) {
+      flex: 1 1 0;
+      min-block-size: 2.75rem;
+    }
+
+    :global(:root[data-keyboard-open]) .form-action-bar {
+      display: none;
+    }
+  }
+</style>

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

@@ -0,0 +1,23 @@
+/**
+ * FormActionBar — a form's actions (Cancel · Save draft · Publish).
+ *
+ * Inline under the form on wider screens. On phones (up to 48rem) it is fixed
+ * to the bottom of the screen, padded for the safe area, and replaces the
+ * shell's phone bottom bar: `AdminShell` sees the `data-form-action-bar`
+ * attribute and hides its own bar. Hidden while the on-screen keyboard is open
+ * (`:root[data-keyboard-open]`, set by the shell's keyboard watcher). Put the
+ * primary action last.
+ */
+import type { Snippet } from 'svelte';
+export interface Props {
+    /** Accessible name of the action group (default "Form actions"). */
+    label?: string;
+    /** Inside a toolbar the page already draws: no rule or margin on wider screens. */
+    plain?: boolean;
+    /** The action buttons, primary last. */
+    children: Snippet;
+}
+declare const FormActionBar: import("svelte").Component<Props, {}, "">;
+type FormActionBar = ReturnType<typeof FormActionBar>;
+export default FormActionBar;
+//# sourceMappingURL=FormActionBar.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FormActionBar.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/forms/FormActionBar.svelte.ts"],"names":[],"mappings":"AAGA;;;;;;;;;GASG;AACH,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAKtC,MAAM,WAAW,KAAK;IACpB,oEAAoE;IACpE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,mFAAmF;IACnF,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,wCAAwC;IACxC,QAAQ,EAAE,OAAO,CAAC;CACnB;AAqBD,QAAA,MAAM,aAAa,2CAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}

package/dist/components/forms/Input.svelte

@@ -18,6 +18,8 @@ import { tryGetFormGroupContext } from './form-group-context.js';
 import { useControlRegistration } from './use-control-registration.svelte.js';
 
 export interface Props extends Omit<HTMLInputAttributes, 'class' | 'value'> {
+  /** Target density; omit to inherit the ThemeProvider setting. */
+  density?: 'comfortable' | 'touch';
   /** Input value as string or number (bindable). */
   value?: string | number;
   /** CSS class to apply to the input element. */
@@ -40,6 +42,7 @@ let {
   'aria-label': ariaLabel,
   'aria-describedby': ariaDescribedby,
   'aria-invalid': ariaInvalid,
+  density,
   ...rest
 }: Props = $props();
 
@@ -210,7 +213,7 @@ export function getElement(): HTMLInputElement | null {
 	aria-label={ariaLabel}
 	aria-describedby={resolvedDescribedBy}
 	aria-invalid={resolvedInvalid}
-	class="input {className}"
+	data-density={density} class="input {className}"
 	data-smrt-control={resolvedControlId}
 	data-smrt-form={controlInteraction?.formId}
 	data-smrt-subject-type={resolvedInteraction === false ? undefined : resolvedInteraction.subject?.type}
@@ -257,9 +260,22 @@ export function getElement(): HTMLInputElement | null {
 		color: var(--smrt-color-on-surface-variant, #9ca3af);
 	}
 
+	/* Phones: 16px text so iOS Safari doesn't zoom the page when the field
+	   gets focus, and a 44px touch target. */
+	@media (max-width: 48rem) {
+		.input {
+			font-size: max(var(--smrt-typography-body-medium-size, 0.875rem), 16px);
+			min-height: 2.75rem;
+		}
+	}
+
 	@media (prefers-reduced-motion: reduce) {
 		.input {
 			transition: none;
 		}
 	}
+
+  .input[data-density='touch'] { --smrt-control-target-min: var(--smrt-touch-target-min, 48px); }
+  .input[data-density='comfortable'] { --smrt-control-target-min: 0px; }
+  .input { min-height: var(--smrt-control-target-min, 0px); }
 </style>

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

@@ -1,6 +1,8 @@
 import type { HTMLInputAttributes } from 'svelte/elements';
 import type { ControlInteractionOptions } from './control-interaction.js';
 export interface Props extends Omit<HTMLInputAttributes, 'class' | 'value'> {
+    /** Target density; omit to inherit the ThemeProvider setting. */
+    density?: 'comfortable' | 'touch';
     /** Input value as string or number (bindable). */
     value?: string | number;
     /** CSS class to apply to the input element. */

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;AAM3D,OAAO,KAAK,EACV,yBAAyB,EAE1B,MAAM,0BAA0B,CAAC;AAUlC,MAAM,WAAW,KAAM,SAAQ,IAAI,CAAC,mBAAmB,EAAE,OAAO,GAAG,OAAO,CAAC;IACzE,kDAAkD;IAClD,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,+CAA+C;IAC/C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,yEAAyE;IACzE,WAAW,CAAC,EAAE,yBAAyB,GAAG,KAAK,CAAC;CACjD;AA4LD,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"}
+{"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;AAUlC,MAAM,WAAW,KAAM,SAAQ,IAAI,CAAC,mBAAmB,EAAE,OAAO,GAAG,OAAO,CAAC;IACzE,iEAAiE;IACjE,OAAO,CAAC,EAAE,aAAa,GAAG,OAAO,CAAC;IAClC,kDAAkD;IAClD,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,+CAA+C;IAC/C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,yEAAyE;IACzE,WAAW,CAAC,EAAE,yBAAyB,GAAG,KAAK,CAAC;CACjD;AA6LD,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/Listbox.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+import { untrack } from 'svelte';
 import {
   emitControlChange,
   highlightControl,
@@ -13,6 +14,7 @@ import {
   tryGetControlInteractionContext,
 } from './control-interaction-context.js';
 import {
+  matchingOption,
   prepareEnabledOptionValue,
   validatesEnabledOption,
 } from './control-value-validation.js';
@@ -49,13 +51,14 @@ const instanceId = $props.id();
 const interactionContext = tryGetControlInteractionContext();
 let rootEl = $state<HTMLDivElement | null>(null);
 let optionEls = $state<Array<HTMLButtonElement | null>>([]);
+const initialValue = untrack(() => value);
 const controlId = $derived(
   interaction === false
     ? undefined
     : (interaction?.id ?? name ?? `listbox-${instanceId}`),
 );
 function select(next: unknown, userEdit = false) {
-  const option = options.find((item) => String(item.value) === String(next));
+  const option = matchingOption(options, next);
   if (!option || option.disabled || disabled) return;
   const changed = !Object.is(value, option.value);
   value = option.value;
@@ -85,6 +88,40 @@ function move(event: KeyboardEvent, index: number) {
         : (next + 1) % options.length;
   optionEls[next]?.focus();
 }
+$effect(() => {
+  const form = rootEl?.closest('form');
+  if (!form) return;
+  let disposed = false;
+  const timers = new Set<ReturnType<typeof setTimeout>>();
+  const reset = (event: Event) => {
+    const valueAtDispatch = value;
+    // Native dispatch can checkpoint microtasks between reset listeners.
+    // Wait for the next task so later cancellation and edits win.
+    const timer = setTimeout(() => {
+      timers.delete(timer);
+      if (
+        disposed ||
+        event.defaultPrevented ||
+        !Object.is(value, valueAtDispatch)
+      )
+        return;
+      value = initialValue;
+      recordControlUserEdit(
+        interactionContext,
+        controlId,
+        interaction === false ? undefined : interaction?.subject,
+      );
+      if (value !== undefined) onvaluechange?.(value);
+    });
+    timers.add(timer);
+  };
+  form.addEventListener('reset', reset);
+  return () => {
+    disposed = true;
+    form.removeEventListener('reset', reset);
+    for (const timer of timers) clearTimeout(timer);
+  };
+});
 useControlRegistration(() => {
   const root = rootEl;
   if (!root || interaction === false) return false;
@@ -120,6 +157,7 @@ useControlRegistration(() => {
 <div bind:this={rootEl} class="listbox {className}" role="listbox" aria-label={label} aria-disabled={disabled} data-smrt-control={controlId} data-smrt-form={interactionContext?.formId}
   data-smrt-subject-type={interaction === false ? undefined : interaction?.subject?.type}
   data-smrt-subject-id={interaction === false ? undefined : interaction?.subject?.id}>
+  {#if name}<input type="hidden" {name} value={value ?? ''} disabled={disabled || matchingOption(options, value)?.disabled} />{/if}
   {#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, true)}>{option.label}</button>{/each}

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

@@ -1 +1 @@
-{"version":3,"file":"Listbox.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/forms/Listbox.svelte.ts"],"names":[],"mappings":"AAQA,OAAO,KAAK,EACV,yBAAyB,EACzB,aAAa,EACd,MAAM,0BAA0B,CAAC;AAWlC,MAAM,WAAW,KAAK;IACpB,uCAAuC;IACvC,OAAO,EAAE,aAAa,EAAE,CAAC;IACzB,kDAAkD;IAClD,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,2CAA2C;IAC3C,KAAK,EAAE,MAAM,CAAC;IACd,4BAA4B;IAC5B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,uCAAuC;IACvC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,mDAAmD;IACnD,WAAW,CAAC,EAAE,yBAAyB,GAAG,KAAK,CAAC;IAChD,gDAAgD;IAChD,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,KAAK,IAAI,CAAC;IACjD,mDAAmD;IACnD,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAiGD,QAAA,MAAM,OAAO,gDAAwC,CAAC;AACtD,KAAK,OAAO,GAAG,UAAU,CAAC,OAAO,OAAO,CAAC,CAAC;AAC1C,eAAe,OAAO,CAAC"}
+{"version":3,"file":"Listbox.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/forms/Listbox.svelte.ts"],"names":[],"mappings":"AASA,OAAO,KAAK,EACV,yBAAyB,EACzB,aAAa,EACd,MAAM,0BAA0B,CAAC;AAYlC,MAAM,WAAW,KAAK;IACpB,uCAAuC;IACvC,OAAO,EAAE,aAAa,EAAE,CAAC;IACzB,kDAAkD;IAClD,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,2CAA2C;IAC3C,KAAK,EAAE,MAAM,CAAC;IACd,4BAA4B;IAC5B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,uCAAuC;IACvC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,mDAAmD;IACnD,WAAW,CAAC,EAAE,yBAAyB,GAAG,KAAK,CAAC;IAChD,gDAAgD;IAChD,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,KAAK,IAAI,CAAC;IACjD,mDAAmD;IACnD,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAsID,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

@@ -1,5 +1,5 @@
 <script lang="ts">
-import { tick } from 'svelte';
+import { tick, untrack } from 'svelte';
 import {
   emitControlChange,
   highlightControl,
@@ -59,6 +59,7 @@ let rootEl = $state<HTMLDivElement | null>(null);
 let triggerEl = $state<HTMLButtonElement | null>(null);
 let optionEls = $state<Array<HTMLButtonElement | null>>([]);
 let open = $state(false);
+const initialValues = untrack(() => [...values]);
 const controlId = $derived(
   interaction === false ? undefined : (interaction?.id ?? name ?? listId),
 );
@@ -136,6 +137,44 @@ function handleOptionsKeydown(event: KeyboardEvent) {
           enabled.length;
   enabled[next]?.focus();
 }
+$effect(() => {
+  const form = triggerEl?.form;
+  if (!form) return;
+  let disposed = false;
+  const timers = new Set<ReturnType<typeof setTimeout>>();
+  const reset = (event: Event) => {
+    const valuesAtDispatch = values;
+    const snapshot = [...values];
+    // Native dispatch can checkpoint microtasks between reset listeners.
+    // Wait for the next task so later cancellation and edits win.
+    const timer = setTimeout(() => {
+      timers.delete(timer);
+      if (
+        disposed ||
+        event.defaultPrevented ||
+        values !== valuesAtDispatch ||
+        values.length !== snapshot.length ||
+        values.some((value, index) => !Object.is(value, snapshot[index]))
+      )
+        return;
+      values = [...initialValues];
+      closeOptions();
+      recordControlUserEdit(
+        interactionContext,
+        controlId,
+        interaction === false ? undefined : interaction?.subject,
+      );
+      onvalueschange?.(values);
+    });
+    timers.add(timer);
+  };
+  form.addEventListener('reset', reset);
+  return () => {
+    disposed = true;
+    form.removeEventListener('reset', reset);
+    for (const timer of timers) clearTimeout(timer);
+  };
+});
 $effect(() => {
   if (!open) return;
   const dismiss = (event: PointerEvent) => {
@@ -178,6 +217,7 @@ useControlRegistration(() => {
 <div bind:this={rootEl} class="multi-select {className}" data-smrt-control={controlId} data-smrt-form={interactionContext?.formId}
   data-smrt-subject-type={interaction === false ? undefined : interaction?.subject?.type}
   data-smrt-subject-id={interaction === false ? undefined : interaction?.subject?.id}>
+  {#if name}{#each canonicalValues as value}<input type="hidden" {name} value={String(value)} disabled={disabled || options.some((option) => Object.is(option.value, value) && option.disabled)} />{/each}{/if}
   <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={canonicalValues.some((value) => Object.is(value, option.value))} disabled={option.disabled} onclick={() => toggle(option)}><span aria-hidden="true">{canonicalValues.some((value) => Object.is(value, option.value)) ? '✓' : ''}</span>{option.label}</button>{/each}</div>{/if}
 </div>

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

@@ -1 +1 @@
-{"version":3,"file":"MultiSelect.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/forms/MultiSelect.svelte.ts"],"names":[],"mappings":"AASA,OAAO,KAAK,EACV,yBAAyB,EACzB,aAAa,EACd,MAAM,0BAA0B,CAAC;AAalC,MAAM,WAAW,KAAK;IACpB,uCAAuC;IACvC,OAAO,EAAE,aAAa,EAAE,CAAC;IACzB,mDAAmD;IACnD,MAAM,CAAC,EAAE,KAAK,CAAC,MAAM,GAAG,MAAM,CAAC,CAAC;IAChC,0CAA0C;IAC1C,KAAK,EAAE,MAAM,CAAC;IACd,4BAA4B;IAC5B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,qDAAqD;IACrD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,4CAA4C;IAC5C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,mDAAmD;IACnD,WAAW,CAAC,EAAE,yBAAyB,GAAG,KAAK,CAAC;IAChD,gDAAgD;IAChD,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,KAAK,CAAC,MAAM,GAAG,MAAM,CAAC,KAAK,IAAI,CAAC;IAC1D,mDAAmD;IACnD,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAwJD,QAAA,MAAM,WAAW,iDAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}
+{"version":3,"file":"MultiSelect.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/forms/MultiSelect.svelte.ts"],"names":[],"mappings":"AASA,OAAO,KAAK,EACV,yBAAyB,EACzB,aAAa,EACd,MAAM,0BAA0B,CAAC;AAalC,MAAM,WAAW,KAAK;IACpB,uCAAuC;IACvC,OAAO,EAAE,aAAa,EAAE,CAAC;IACzB,mDAAmD;IACnD,MAAM,CAAC,EAAE,KAAK,CAAC,MAAM,GAAG,MAAM,CAAC,CAAC;IAChC,0CAA0C;IAC1C,KAAK,EAAE,MAAM,CAAC;IACd,4BAA4B;IAC5B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,qDAAqD;IACrD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,4CAA4C;IAC5C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,mDAAmD;IACnD,WAAW,CAAC,EAAE,yBAAyB,GAAG,KAAK,CAAC;IAChD,gDAAgD;IAChD,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,KAAK,CAAC,MAAM,GAAG,MAAM,CAAC,KAAK,IAAI,CAAC;IAC1D,mDAAmD;IACnD,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAgMD,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

@@ -20,18 +20,30 @@ function handleChange(event: Event & { currentTarget: HTMLInputElement }) {
   onchange?.(event);
 }
 </script>
-<label class="radio" class:disabled={disabled || group.disabled}>
+<label class="radio" class:disabled={disabled || group.disabled} data-smrt-hit-target>
   <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>
+  <span class="radio__mark" aria-hidden="true"></span><span class="radio__label">{label}</span>
 </label>
 <style>
-  .radio { display: inline-flex; align-items: center; gap: var(--smrt-spacing-2); cursor: pointer; }
+  /* The visible mark stays 18px; a transparent 44x44 ::before hit area (see Checkbox) makes the
+     touch target. Mark and label text sit above every hit area, so neighbours' hit areas never
+     steal their clicks. Beside other content (a group's other options, text, a link) it keeps to
+     the mark's column and grows vertically only. --smrt-control-hit-size resizes it (0px turns it
+     off). */
+  .radio { --_box: 1.15rem; --_hit: max(var(--smrt-control-hit-size, 2.75rem), var(--_box)); position: relative; display: inline-flex; align-items: center; gap: var(--smrt-spacing-2); cursor: pointer; }
+  .radio::before { content: ''; position: absolute; z-index: 0; inset-block-start: 50%; inset-inline-start: calc(var(--_box) / 2); inline-size: var(--_hit); block-size: var(--_hit); margin-block-start: calc(var(--_hit) / -2); margin-inline-start: calc(var(--_hit) / -2); }
+  .radio:not(:only-child)::before { inline-size: var(--_box); margin-inline-start: calc(var(--_box) / -2); }
   .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 { position: relative; z-index: 1; width: 1.15rem; height: 1.15rem; border: 2px solid var(--smrt-color-outline); border-radius: 50%; display: grid; place-items: center; }
+  .radio__label { position: relative; z-index: 1; }
   .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; }
+  .radio { min-height: var(--smrt-control-target-min, 0px); min-width: var(--smrt-control-target-min, 0px); }
+
+  /* Table cells: grow vertically only, never into a neighbouring cell. */
+  :global(:is(td, th)) .radio::before { inline-size: var(--_box); margin-inline-start: calc(var(--_box) / -2); }
 </style>

package/dist/components/forms/RadioGroup.svelte

@@ -14,6 +14,8 @@ import {
 import { setRadioGroupContext } from './radio-group-context.js';
 import { useControlRegistration } from './use-control-registration.svelte.js';
 export interface Props {
+  /** Target density; omit to inherit the ThemeProvider setting. */
+  density?: 'comfortable' | 'touch';
   /** Identifier for this radio group and its form field. */
   name: string;
   /** The currently selected option value. */
@@ -49,6 +51,7 @@ let {
   onvaluechange,
   children,
   class: className = '',
+  density,
 }: Props = $props();
 const interactionContext = tryGetControlInteractionContext();
 let fieldsetEl = $state<HTMLFieldSetElement | null>(null);
@@ -133,7 +136,7 @@ useControlRegistration(() => {
   };
 });
 </script>
-<fieldset bind:this={fieldsetEl} class="radio-group {className}" {disabled}
+<fieldset bind:this={fieldsetEl} data-density={density} class="radio-group {className}" {disabled}
   aria-describedby={description ? `${name}-description` : undefined} data-smrt-control={controlId} data-smrt-form={interactionContext?.formId}
   data-smrt-subject-type={interaction === false ? undefined : interaction?.subject?.type}
   data-smrt-subject-id={interaction === false ? undefined : interaction?.subject?.id}>
@@ -149,4 +152,7 @@ useControlRegistration(() => {
   .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); }
+
+  .radio-group[data-density='touch'] { --smrt-control-target-min: var(--smrt-touch-target-min, 48px); }
+  .radio-group[data-density='comfortable'] { --smrt-control-target-min: 0px; }
 </style>

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

@@ -1,6 +1,8 @@
 import type { Snippet } from 'svelte';
 import type { ControlInteractionOptions } from './control-interaction.js';
 export interface Props {
+    /** Target density; omit to inherit the ThemeProvider setting. */
+    density?: 'comfortable' | 'touch';
     /** Identifier for this radio group and its form field. */
     name: string;
     /** The currently selected option value. */

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

@@ -1 +1 @@
-{"version":3,"file":"RadioGroup.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/forms/RadioGroup.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAGtC,OAAO,KAAK,EACV,yBAAyB,EAE1B,MAAM,0BAA0B,CAAC;AASlC,MAAM,WAAW,KAAK;IACpB,0DAA0D;IAC1D,IAAI,EAAE,MAAM,CAAC;IACb,2CAA2C;IAC3C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,qDAAqD;IACrD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,8CAA8C;IAC9C,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,2CAA2C;IAC3C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,yDAAyD;IACzD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,0DAA0D;IAC1D,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,mFAAmF;IACnF,WAAW,CAAC,EAAE,yBAAyB,GAAG,KAAK,CAAC;IAChD,oDAAoD;IACpD,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,6CAA6C;IAC7C,QAAQ,EAAE,OAAO,CAAC;IAClB,kCAAkC;IAClC,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAqHD,QAAA,MAAM,UAAU,gDAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}
+{"version":3,"file":"RadioGroup.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/forms/RadioGroup.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAGtC,OAAO,KAAK,EACV,yBAAyB,EAE1B,MAAM,0BAA0B,CAAC;AASlC,MAAM,WAAW,KAAK;IACpB,iEAAiE;IACjE,OAAO,CAAC,EAAE,aAAa,GAAG,OAAO,CAAC;IAClC,0DAA0D;IAC1D,IAAI,EAAE,MAAM,CAAC;IACb,2CAA2C;IAC3C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,qDAAqD;IACrD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,8CAA8C;IAC9C,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,2CAA2C;IAC3C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,yDAAyD;IACzD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,0DAA0D;IAC1D,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,mFAAmF;IACnF,WAAW,CAAC,EAAE,yBAAyB,GAAG,KAAK,CAAC;IAChD,oDAAoD;IACpD,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,6CAA6C;IAC7C,QAAQ,EAAE,OAAO,CAAC;IAClB,kCAAkC;IAClC,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAsHD,QAAA,MAAM,UAAU,gDAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}