@happyvertical/smrt-ui 0.51.39 → 0.53.0

package/dist/components/forms/SearchInput.svelte

@@ -0,0 +1,207 @@
+<script lang="ts">
+/**
+ * SearchInput — the search box of a list's filter bar.
+ *
+ * It searches as you type (`debounceMs` after the last key; Enter searches at
+ * once) and reports the trimmed, single-line text through `onsearch`. The page
+ * keeps the applied search (a `?q=` URL parameter, say) and passes it back as
+ * `value`; the box follows it, so Back, a filter link or an agent's search
+ * update the text, and a search the box itself sent never undoes newer typing.
+ * The × clears it. The label ("Search") is read by screen readers; the
+ * placeholder says what the search matches. The field is a 44px target and
+ * 16px on phones so iOS does not zoom when it gets focus.
+ */
+import { onDestroy } from 'svelte';
+import Input from './Input.svelte';
+
+export interface Props {
+  /** The search the list is showing (from the URL or the page's state). */
+  value: string;
+  /** Called with the trimmed, single-line text (`''` to clear). */
+  onsearch: (query: string) => void | Promise<void>;
+  /** Placeholder text: what the search matches. */
+  placeholder?: string;
+  /** Accessible name of the field. */
+  label?: string;
+  /** Accessible name of the clear button. */
+  clearLabel?: string;
+  /** Pause after the last key before searching, in milliseconds. */
+  debounceMs?: number;
+  /** Form field name. */
+  name?: string;
+  /** Additional CSS class names on the wrapper. */
+  class?: string;
+}
+
+const {
+  value,
+  onsearch,
+  placeholder = 'Search',
+  label = 'Search',
+  clearLabel = 'Clear search',
+  debounceMs = 300,
+  name = 'q',
+  class: className = '',
+}: Props = $props();
+
+const instanceId = $props.id();
+const inputId = `smrt-search-${instanceId}`;
+let text = $state('');
+let timer: ReturnType<typeof setTimeout> | null = null;
+/** The search this box last sent; its own round trip must not undo newer typing. */
+let sent: string | null = null;
+
+// Follow the applied search (back/forward, a filter link, an agent's search).
+$effect(() => {
+  const next = value;
+  if (sent !== null && next === sent) {
+    sent = null;
+    return;
+  }
+  // Any other applied value supersedes what this box last sent (the host may
+  // have normalized it, or the search failed): never let a stale `sent`
+  // swallow a later value.
+  sent = null;
+  text = next;
+});
+
+function normalized(raw: string): string {
+  return raw.replace(/\s+/g, ' ').trim();
+}
+
+function cancel() {
+  if (timer) clearTimeout(timer);
+  timer = null;
+}
+
+function search(raw: string) {
+  cancel();
+  const query = normalized(raw);
+  if (query === normalized(value)) return;
+  sent = query;
+  // A failed search is not the applied one.
+  const forget = () => {
+    if (sent === query) sent = null;
+  };
+  try {
+    void Promise.resolve(onsearch(query)).catch(forget);
+  } catch {
+    forget();
+  }
+}
+
+function handleInput() {
+  cancel();
+  timer = setTimeout(() => search(text), debounceMs);
+}
+
+// Enter searches at once. The box is not a <form>: inside a host form a
+// nested form is invalid and Enter would submit the outer one.
+function handleKeydown(event: KeyboardEvent) {
+  if (event.key !== 'Enter' || event.isComposing) return;
+  event.preventDefault();
+  search(text);
+}
+
+function clear() {
+  text = '';
+  search('');
+  document.getElementById(inputId)?.focus();
+}
+
+onDestroy(cancel);
+</script>
+
+<div class="search-input {className}" role="search">
+  <label class="search-input__label" for={inputId}>{label}</label>
+  <span class="search-input__icon" aria-hidden="true">
+    <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="7" /><path d="m20 20-3.5-3.5" /></svg>
+  </span>
+  <Input
+    id={inputId}
+    type="search"
+    {name}
+    {placeholder}
+    enterkeyhint="search"
+    autocomplete="off"
+    class="search-input__field"
+    bind:value={text}
+    oninput={handleInput}
+    onkeydown={handleKeydown}
+  />
+  {#if text}
+    <button type="button" class="search-input__clear" aria-label={clearLabel} onclick={clear}>
+      <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M18 6 6 18" /><path d="m6 6 12 12" /></svg>
+    </button>
+  {/if}
+</div>
+
+<style>
+  .search-input {
+    position: relative;
+    display: flex;
+    align-items: center;
+    flex: 1 1 16rem;
+    max-inline-size: 28rem;
+    min-inline-size: 0;
+  }
+  .search-input__label {
+    position: absolute;
+    inline-size: 1px;
+    block-size: 1px;
+    margin: -1px;
+    padding: 0;
+    overflow: hidden;
+    clip: rect(0 0 0 0);
+    white-space: nowrap;
+    border: 0;
+  }
+  .search-input :global(.search-input__field) {
+    inline-size: 100%;
+    min-block-size: 2.75rem;
+    padding-inline: 2.4rem 2.75rem;
+  }
+  /* The browser's own clear button would sit on top of ours. */
+  .search-input :global(.search-input__field::-webkit-search-cancel-button) {
+    -webkit-appearance: none;
+    appearance: none;
+  }
+  .search-input__icon {
+    position: absolute;
+    inset-inline-start: 0.8rem;
+    z-index: 1;
+    display: inline-flex;
+    color: var(--smrt-color-on-surface-variant);
+    pointer-events: none;
+  }
+  .search-input__clear {
+    position: absolute;
+    inset-inline-end: 0;
+    z-index: 1;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    inline-size: 2.75rem;
+    block-size: 2.75rem;
+    padding: 0;
+    border: none;
+    border-radius: var(--smrt-radius-full, 999px);
+    background: transparent;
+    color: var(--smrt-color-on-surface-variant);
+    cursor: pointer;
+  }
+  .search-input__clear:hover {
+    color: var(--smrt-color-on-surface);
+  }
+  .search-input__clear:focus-visible {
+    outline: 2px solid var(--smrt-color-primary);
+    outline-offset: -2px;
+  }
+  /* Phones: full width. */
+  @media (max-width: 48rem) {
+    .search-input {
+      flex-basis: 100%;
+      max-inline-size: none;
+    }
+  }
+</style>

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

@@ -0,0 +1,22 @@
+export interface Props {
+    /** The search the list is showing (from the URL or the page's state). */
+    value: string;
+    /** Called with the trimmed, single-line text (`''` to clear). */
+    onsearch: (query: string) => void | Promise<void>;
+    /** Placeholder text: what the search matches. */
+    placeholder?: string;
+    /** Accessible name of the field. */
+    label?: string;
+    /** Accessible name of the clear button. */
+    clearLabel?: string;
+    /** Pause after the last key before searching, in milliseconds. */
+    debounceMs?: number;
+    /** Form field name. */
+    name?: string;
+    /** Additional CSS class names on the wrapper. */
+    class?: string;
+}
+declare const SearchInput: import("svelte").Component<Props, {}, "">;
+type SearchInput = ReturnType<typeof SearchInput>;
+export default SearchInput;
+//# sourceMappingURL=SearchInput.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SearchInput.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/forms/SearchInput.svelte.ts"],"names":[],"mappings":"AAmBA,MAAM,WAAW,KAAK;IACpB,yEAAyE;IACzE,KAAK,EAAE,MAAM,CAAC;IACd,iEAAiE;IACjE,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IAClD,iDAAiD;IACjD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,oCAAoC;IACpC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,2CAA2C;IAC3C,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,kEAAkE;IAClE,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,uBAAuB;IACvB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,iDAAiD;IACjD,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAuGD,QAAA,MAAM,WAAW,2CAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}

package/dist/components/forms/SegmentedControl.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+import { tick, untrack } from 'svelte';
 import {
   emitControlChange,
   highlightControl,
@@ -16,6 +17,8 @@ import {
 import type { SegmentedControlOption } from './types.js';
 import { useControlRegistration } from './use-control-registration.svelte.js';
 export interface Props {
+  /** Target density; omit to inherit the ThemeProvider setting. */
+  density?: 'comfortable' | 'touch';
   /** The available segments and their values. */
   options: SegmentedControlOption[];
   /** The currently selected option value. */
@@ -24,6 +27,8 @@ export interface Props {
   label: string;
   /** Form field identifier. */
   name?: string;
+  /** Requires an enabled option to be selected before native form submission. */
+  required?: boolean;
   /** Blocks interaction and submission of this control. */
   disabled?: boolean;
   /** Makes the control stretch to full container width. */
@@ -40,13 +45,128 @@ let {
   value = $bindable(),
   label,
   name,
+  required = false,
   disabled = false,
   fullWidth = false,
   interaction,
   onvaluechange,
   class: className = '',
+  density,
 }: Props = $props();
 const instanceId = $props.id();
+const initialValue = untrack(() => value);
+const selectedOption = $derived(
+  options.find((option) => option.value === value && !option.disabled),
+);
+const firstEnabledOption = $derived(options.find((option) => !option.disabled));
+const validationOption = $derived(selectedOption ?? firstEnabledOption);
+// Required nameless radio groups need explicit validity in browsers, while
+// remaining unnamed so native FormData never receives a generated field.
+$effect(() => {
+  rootEl
+    ?.querySelectorAll<HTMLInputElement>('input[type="radio"]')
+    .forEach((input) => {
+      input.setCustomValidity(
+        !name &&
+          required &&
+          !selectedOption &&
+          options[Number(input.dataset.optionIndex)] === validationOption
+          ? 'Please select an option.'
+          : '',
+      );
+    });
+});
+function initializeRadio(
+  node: HTMLInputElement,
+  option: SegmentedControlOption,
+) {
+  node.defaultChecked = initialValue === option.value && !option.disabled;
+}
+function handleKeydown(event: KeyboardEvent) {
+  if (
+    !(event.target instanceof HTMLInputElement) ||
+    event.target.matches(':disabled')
+  )
+    return;
+  const radios = Array.from(
+    rootEl?.querySelectorAll<HTMLInputElement>(
+      'input[type="radio"]:not(:disabled)',
+    ) ?? [],
+  );
+  const index = radios.indexOf(event.target);
+  let next: number;
+  switch (event.key) {
+    case 'ArrowRight':
+    case 'ArrowDown':
+      next = (index + 1) % radios.length;
+      break;
+    case 'ArrowLeft':
+    case 'ArrowUp':
+      next = (index - 1 + radios.length) % radios.length;
+      break;
+    case 'Home':
+      next = 0;
+      break;
+    case 'End':
+      next = radios.length - 1;
+      break;
+    default:
+      return;
+  }
+  const radio = radios[next];
+  if (!radio) return;
+  event.preventDefault();
+  radio.focus();
+  setValue(options[Number(radio.dataset.optionIndex)].value, true);
+}
+$effect(() => {
+  const root = rootEl;
+  if (!root) return;
+  let form: HTMLFormElement | null = null;
+  let disposed = false;
+  const reset = (event: Event) => {
+    const valueAtDispatch = value;
+    // Native event dispatch may checkpoint microtasks between listeners; wait
+    // for the next task so a later form listener can still cancel the reset.
+    setTimeout(async () => {
+      if (
+        event.defaultPrevented ||
+        !rootEl?.isConnected ||
+        !Object.is(value, valueAtDispatch)
+      )
+        return;
+      const resetOption = options.find(
+        (option) => option.value === initialValue && !option.disabled,
+      );
+      value = resetOption?.value;
+      recordControlUserEdit(
+        interactionContext,
+        controlId,
+        interaction === false ? undefined : interaction?.subject,
+      );
+      await tick();
+      // A canceled reset never reaches this reconciliation; unchanged bound values
+      // still need checked properties restored after the browser's native reset.
+      rootEl
+        ?.querySelectorAll<HTMLInputElement>('input[type="radio"]')
+        .forEach((input) => {
+          input.checked =
+            options[Number(input.dataset.optionIndex)]?.value === value &&
+            !input.disabled;
+        });
+    });
+  };
+  // Parent form ancestry is complete after the mount flush, including in SSR hydration.
+  tick().then(() => {
+    if (disposed) return;
+    form = root.closest('form');
+    form?.addEventListener('reset', reset);
+  });
+  return () => {
+    disposed = true;
+    form?.removeEventListener('reset', reset);
+  };
+});
 const interactionContext = tryGetControlInteractionContext();
 let rootEl = $state<HTMLDivElement | null>(null);
 const controlId = $derived(
@@ -54,7 +174,7 @@ const controlId = $derived(
     ? undefined
     : (interaction?.id ?? name ?? `segment-${instanceId}`),
 );
-function setValue(next: unknown, userEdit = false) {
+function setValue(next: unknown, userEdit = false, emitChange = true) {
   const option = options.find((item) => String(item.value) === String(next));
   if (!option || option.disabled) return;
   const changed = !Object.is(value, option.value);
@@ -66,7 +186,7 @@ function setValue(next: unknown, userEdit = false) {
       controlId,
       interaction === false ? undefined : interaction?.subject,
     );
-    if (rootEl) emitControlChange(rootEl);
+    if (rootEl && emitChange) emitControlChange(rootEl);
   }
 }
 useControlRegistration(() => {
@@ -83,6 +203,7 @@ useControlRegistration(() => {
       readable: interaction?.readable,
       writable: interaction?.writable,
       options,
+      constraints: { required },
     },
     getValue: () => value,
     prepareValue: (next) => prepareEnabledOptionValue(options, next),
@@ -93,31 +214,51 @@ useControlRegistration(() => {
     },
     focus: () =>
       root
-        .querySelector<HTMLElement>('[role="radio"]:not([disabled])')
+        .querySelector<HTMLElement>('input[type="radio"]:not(:disabled)')
         ?.focus(),
     reveal: () => revealControl(root),
     highlight: (durationMs) => highlightControl(root, durationMs),
+    validate: () =>
+      root
+        .querySelector<HTMLInputElement>('input[type="radio"]:not(:disabled)')
+        ?.reportValidity() ?? true,
     validateValue: (next) => validatesEnabledOption(options, next),
     getState: () => ({
       disabled: disabled || root.closest('fieldset:disabled') !== null,
+      valid:
+        !required ||
+        !!selectedOption ||
+        disabled ||
+        root.closest('fieldset:disabled') !== null,
     }),
   };
 });
 </script>
-<div bind:this={rootEl} class="segmented {className}" class:full-width={fullWidth} role="radiogroup" aria-label={label} data-smrt-control={controlId} data-smrt-form={interactionContext?.formId}
+<div bind:this={rootEl} data-density={density} class="segmented {className}" class:full-width={fullWidth} role="radiogroup" tabindex="-1" aria-label={label} aria-required={required} onkeydown={handleKeydown} 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}>
-  {#each options as option (option.value)}
-    <button type="button" role="radio" aria-checked={value === option.value} disabled={disabled || option.disabled}
-      tabindex={value === option.value || (value === undefined && option === options[0]) ? 0 : -1}
-      class:selected={value === option.value} onclick={() => setValue(option.value, true)}>{option.label}</button>
+  {#each options as option, index (option.value)}
+    <label class:selected={selectedOption === option} class:disabled={disabled || option.disabled}>
+      <input type="radio" {name} value={option.value} disabled={disabled || option.disabled}
+        required={required && validationOption === option} aria-label={option.label}
+        checked={selectedOption === option} aria-checked={selectedOption === option}
+        tabindex={selectedOption === option || (!selectedOption && firstEnabledOption === option) ? 0 : -1}
+        data-option-index={index} use:initializeRadio={option}
+        onchange={() => setValue(option.value, true, false)} />
+      <span>{option.label}</span>
+    </label>
   {/each}
 </div>
 <style>
   .segmented { display: inline-flex; border: 1px solid var(--smrt-color-outline); border-radius: var(--smrt-radius-full); overflow: hidden; }
   .segmented.full-width { display: flex; width: 100%; }
-  button { flex: 1; min-height: 2.5rem; padding: 0 var(--smrt-spacing-4); border: 0; border-right: 1px solid var(--smrt-color-outline); background: var(--smrt-color-surface); color: var(--smrt-color-on-surface); cursor: pointer; }
-  button:last-child { border-right: 0; } button.selected { background: var(--smrt-color-secondary-container); color: var(--smrt-color-on-secondary-container); }
-  button:focus-visible { outline: 2px solid var(--smrt-color-primary); outline-offset: -3px; } button:disabled { opacity: .5; cursor: not-allowed; }
+  label { position: relative; display: inline-flex; align-items: center; justify-content: center; flex: 1; min-height: 2.5rem; padding: 0 var(--smrt-spacing-4); border: 0; border-right: 1px solid var(--smrt-color-outline); background: var(--smrt-color-surface); color: var(--smrt-color-on-surface); cursor: pointer; }
+  label:last-child { border-right: 0; } label.selected { background: var(--smrt-color-secondary-container); color: var(--smrt-color-on-secondary-container); }
+  label:has(input:focus-visible) { outline: 2px solid var(--smrt-color-primary); outline-offset: -3px; } label.disabled, label:has(input:disabled) { opacity: .5; cursor: not-allowed; }
   :global(.segmented[data-smrt-highlighted='true']) { outline: 3px solid var(--smrt-color-tertiary); outline-offset: 4px; }
+
+  .segmented[data-density='touch'] { --smrt-control-target-min: var(--smrt-touch-target-min, 48px); }
+  .segmented[data-density='comfortable'] { --smrt-control-target-min: 0px; }
+  label { min-height: max(2.5rem, var(--smrt-control-target-min, 0px)); min-width: var(--smrt-control-target-min, 0px); }
+  input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: inherit; }
 </style>

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

@@ -1,6 +1,8 @@
 import type { ControlInteractionOptions } from './control-interaction.js';
 import type { SegmentedControlOption } from './types.js';
 export interface Props {
+    /** Target density; omit to inherit the ThemeProvider setting. */
+    density?: 'comfortable' | 'touch';
     /** The available segments and their values. */
     options: SegmentedControlOption[];
     /** The currently selected option value. */
@@ -9,6 +11,8 @@ export interface Props {
     label: string;
     /** Form field identifier. */
     name?: string;
+    /** Requires an enabled option to be selected before native form submission. */
+    required?: boolean;
     /** Blocks interaction and submission of this control. */
     disabled?: boolean;
     /** Makes the control stretch to full container width. */

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

@@ -1 +1 @@
-{"version":3,"file":"SegmentedControl.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/forms/SegmentedControl.svelte.ts"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,0BAA0B,CAAC;AAS1E,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,YAAY,CAAC;AAGzD,MAAM,WAAW,KAAK;IACpB,+CAA+C;IAC/C,OAAO,EAAE,sBAAsB,EAAE,CAAC;IAClC,2CAA2C;IAC3C,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,2CAA2C;IAC3C,KAAK,EAAE,MAAM,CAAC;IACd,6BAA6B;IAC7B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,yDAAyD;IACzD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,yDAAyD;IACzD,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,mFAAmF;IACnF,WAAW,CAAC,EAAE,yBAAyB,GAAG,KAAK,CAAC;IAChD,+CAA+C;IAC/C,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,KAAK,IAAI,CAAC;IACjD,kCAAkC;IAClC,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAuFD,QAAA,MAAM,gBAAgB,gDAAwC,CAAC;AAC/D,KAAK,gBAAgB,GAAG,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAC5D,eAAe,gBAAgB,CAAC"}
+{"version":3,"file":"SegmentedControl.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/forms/SegmentedControl.svelte.ts"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,0BAA0B,CAAC;AAS1E,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,YAAY,CAAC;AAGzD,MAAM,WAAW,KAAK;IACpB,iEAAiE;IACjE,OAAO,CAAC,EAAE,aAAa,GAAG,OAAO,CAAC;IAClC,+CAA+C;IAC/C,OAAO,EAAE,sBAAsB,EAAE,CAAC;IAClC,2CAA2C;IAC3C,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,2CAA2C;IAC3C,KAAK,EAAE,MAAM,CAAC;IACd,6BAA6B;IAC7B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,+EAA+E;IAC/E,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,yDAAyD;IACzD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,yDAAyD;IACzD,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,mFAAmF;IACnF,WAAW,CAAC,EAAE,yBAAyB,GAAG,KAAK,CAAC;IAChD,+CAA+C;IAC/C,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,KAAK,IAAI,CAAC;IACjD,kCAAkC;IAClC,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAwND,QAAA,MAAM,gBAAgB,gDAAwC,CAAC;AAC/D,KAAK,gBAAgB,GAAG,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAC5D,eAAe,gBAAgB,CAAC"}

package/dist/components/forms/Select.svelte

@@ -13,6 +13,8 @@ import { tryGetFormGroupContext } from './form-group-context.js';
 import { useControlRegistration } from './use-control-registration.svelte.js';
 
 export interface Props extends Omit<HTMLSelectAttributes, 'class' | 'value'> {
+  /** Target density; omit to inherit the ThemeProvider setting. */
+  density?: 'comfortable' | 'touch';
   /** The currently selected option value. */
   value?: string;
   /** Additional CSS class names. */
@@ -35,6 +37,7 @@ let {
   'aria-label': ariaLabel,
   'aria-describedby': ariaDescribedby,
   'aria-invalid': ariaInvalid,
+  density,
   ...rest
 }: Props = $props();
 
@@ -140,7 +143,7 @@ export function getElement(): HTMLSelectElement | null {
 		aria-label={ariaLabel}
 	aria-describedby={resolvedDescribedBy}
 	aria-invalid={resolvedInvalid}
-		class="select {className}"
+		data-density={density} class="select {className}"
 		data-smrt-control={resolvedControlId}
 		data-smrt-form={controlInteraction?.formId}
 		data-smrt-subject-type={resolvedInteraction === false ? undefined : resolvedInteraction.subject?.type}
@@ -190,9 +193,22 @@ export function getElement(): HTMLSelectElement | null {
 		opacity: 0.7;
 	}
 
+	/* 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) {
+		.select {
+			font-size: max(var(--smrt-typography-body-medium-size, 0.875rem), 16px);
+			min-height: 2.75rem;
+		}
+	}
+
 	@media (prefers-reduced-motion: reduce) {
 		.select {
 			transition: none;
 		}
 	}
+
+  .select[data-density='touch'] { --smrt-control-target-min: var(--smrt-touch-target-min, 48px); }
+  .select[data-density='comfortable'] { --smrt-control-target-min: 0px; }
+  .select { min-height: var(--smrt-control-target-min, 0px); }
 </style>

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

@@ -2,6 +2,8 @@ import type { Snippet } from 'svelte';
 import type { HTMLSelectAttributes } from 'svelte/elements';
 import type { ControlInteractionOptions } from './control-interaction.js';
 export interface Props extends Omit<HTMLSelectAttributes, 'class' | 'value'> {
+    /** Target density; omit to inherit the ThemeProvider setting. */
+    density?: 'comfortable' | 'touch';
     /** The currently selected option value. */
     value?: string;
     /** Additional CSS class names. */

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

@@ -1 +1 @@
-{"version":3,"file":"Select.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/forms/Select.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACtC,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,iBAAiB,CAAC;AAM5D,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,0BAA0B,CAAC;AAO1E,MAAM,WAAW,KAAM,SAAQ,IAAI,CAAC,oBAAoB,EAAE,OAAO,GAAG,OAAO,CAAC;IAC1E,2CAA2C;IAC3C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,kCAAkC;IAClC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,mFAAmF;IACnF,WAAW,CAAC,EAAE,yBAAyB,GAAG,KAAK,CAAC;IAChD,wCAAwC;IACxC,QAAQ,EAAE,OAAO,CAAC;CACnB;AA+HD,QAAA,MAAM,MAAM;iBAjBO,IAAI;sBAIC,iBAAiB,GAAG,IAAI;WAaI,CAAC;AACrD,KAAK,MAAM,GAAG,UAAU,CAAC,OAAO,MAAM,CAAC,CAAC;AACxC,eAAe,MAAM,CAAC"}
+{"version":3,"file":"Select.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/forms/Select.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACtC,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,iBAAiB,CAAC;AAM5D,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,0BAA0B,CAAC;AAO1E,MAAM,WAAW,KAAM,SAAQ,IAAI,CAAC,oBAAoB,EAAE,OAAO,GAAG,OAAO,CAAC;IAC1E,iEAAiE;IACjE,OAAO,CAAC,EAAE,aAAa,GAAG,OAAO,CAAC;IAClC,2CAA2C;IAC3C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,kCAAkC;IAClC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,mFAAmF;IACnF,WAAW,CAAC,EAAE,yBAAyB,GAAG,KAAK,CAAC;IAChD,wCAAwC;IACxC,QAAQ,EAAE,OAAO,CAAC;CACnB;AAgID,QAAA,MAAM,MAAM;iBAjBO,IAAI;sBAIC,iBAAiB,GAAG,IAAI;WAaI,CAAC;AACrD,KAAK,MAAM,GAAG,UAAU,CAAC,OAAO,MAAM,CAAC,CAAC;AACxC,eAAe,MAAM,CAAC"}