@happyvertical/smrt-ui 0.51.38 → 0.52.0

package/dist/components/forms/DictationStatus.svelte

@@ -0,0 +1,164 @@
+<script lang="ts">
+/**
+ * DictationStatus — what dictation is doing, in words (see `Dictation`).
+ *
+ * "Listening…" (with the words heard so far) while the microphone is on,
+ * "Writing it down…" while a recording is turned into text, and
+ * a plain explanation when it cannot listen: the browser cannot turn speech
+ * into text, the microphone is blocked, or nothing was heard. Nothing while
+ * idle. Listening is announced politely; problems are announced as alerts.
+ */
+import { M } from '../../i18n/strings.ui.js';
+import { useI18n } from '../../i18n/use-i18n.js';
+import type { Dictation, DictationErrorKind } from './dictation.svelte.js';
+
+export interface Props {
+  /** The dictation session whose listening state and messages this shows. */
+  dictation: Dictation;
+  /** Extra class names. */
+  class?: string;
+}
+
+let { dictation, class: className = '' }: Props = $props();
+
+const { t } = useI18n();
+const showLine = $derived(
+  dictation.state === 'starting' ||
+    dictation.state === 'listening' ||
+    dictation.state === 'stopping' ||
+    dictation.state === 'transcribing',
+);
+
+function errorText(kind: DictationErrorKind | null): string {
+  switch (kind) {
+    case 'unsupported':
+      return t(M['ui.dictation.unsupported']);
+    case 'denied':
+      return t(M['ui.dictation.denied']);
+    case 'no-speech':
+      return t(M['ui.dictation.no_speech']);
+    case 'microphone':
+      return t(M['ui.dictation.microphone']);
+    case 'interrupted':
+      return t(M['ui.dictation.interrupted']);
+    case 'too-long':
+      return t(M['ui.dictation.too_long']);
+    case 'not-transcribed':
+      return t(M['ui.dictation.not_transcribed']);
+    case 'unavailable':
+      return t(M['ui.dictation.unavailable']);
+    case 'forbidden':
+      return t(M['ui.dictation.forbidden']);
+    default:
+      return t(M['ui.dictation.failed']);
+  }
+}
+</script>
+
+<div class={`smrt-dictation-status ${className}`.trim()}>
+  <p
+    class="smrt-dictation-status-line"
+    class:smrt-dictation-status--empty={!showLine}
+    role="status"
+    aria-live="polite"
+  >
+    {#if dictation.state === 'starting'}
+      {t(M['ui.dictation.starting'])}
+    {:else if dictation.state === 'listening' || dictation.state === 'stopping'}
+      <span class="smrt-dictation-status-dot" aria-hidden="true"></span>
+      {t(M['ui.dictation.listening'])}
+      {#if dictation.interim}
+        <span class="smrt-dictation-status-interim">“{dictation.interim}”</span>
+      {/if}
+    {:else if dictation.state === 'transcribing'}
+      <span class="smrt-dictation-status-spinner" aria-hidden="true"></span>
+      {t(M['ui.dictation.transcribing'])}
+    {/if}
+  </p>
+  <p
+    class="smrt-dictation-status-error"
+    class:smrt-dictation-status--empty={dictation.state !== 'error'}
+    role="alert"
+    data-dictation-error={dictation.state === 'error'
+      ? (dictation.errorCode ?? dictation.errorKind)
+      : undefined}
+  >
+    {#if dictation.state === 'error'}
+      {errorText(dictation.errorKind)}
+    {/if}
+  </p>
+</div>
+
+<style>
+  .smrt-dictation-status {
+    display: contents;
+  }
+
+  .smrt-dictation-status-line,
+  .smrt-dictation-status-error {
+    margin: 0;
+    font: var(--smrt-typography-body-small-font, 0.8125rem / 1.4 sans-serif);
+  }
+
+
+  .smrt-dictation-status-line {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 0.4rem;
+    padding: 0.25rem 0;
+    color: var(--smrt-color-on-surface, #1a1c1e);
+  }
+
+  /* Kept mounted while empty (live regions must exist before they speak),
+     but take no room. */
+  .smrt-dictation-status--empty {
+    position: absolute;
+    inline-size: 1px;
+    block-size: 1px;
+    overflow: hidden;
+    clip-path: inset(50%);
+    padding: 0;
+    white-space: nowrap;
+  }
+
+  .smrt-dictation-status-dot {
+    inline-size: 8px;
+    block-size: 8px;
+    border-radius: 50%;
+    background: var(--smrt-color-error, #ba1a1a);
+  }
+
+  .smrt-dictation-status-spinner {
+    inline-size: 12px;
+    block-size: 12px;
+    border-radius: 50%;
+    border: 2px solid var(--smrt-color-outline-variant, #c4c6cf);
+    border-block-start-color: var(--smrt-color-primary, #2f5ea8);
+    animation: smrt-dictation-spin 0.9s linear infinite;
+  }
+
+  @keyframes smrt-dictation-spin {
+    to {
+      transform: rotate(360deg);
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .smrt-dictation-status-spinner {
+      animation: none;
+    }
+  }
+
+  .smrt-dictation-status-interim {
+    color: var(--smrt-color-on-surface-variant, #43474e);
+    font-style: italic;
+  }
+
+  .smrt-dictation-status-error {
+    padding: 0.4rem 0.6rem;
+    border-radius: var(--smrt-radius-medium, 8px);
+    background: var(--smrt-color-error-container, #ffdad6);
+    color: var(--smrt-color-on-error-container, #410002);
+  }
+</style>

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

@@ -0,0 +1,11 @@
+import type { Dictation } from './dictation.svelte.js';
+export interface Props {
+    /** The dictation session whose listening state and messages this shows. */
+    dictation: Dictation;
+    /** Extra class names. */
+    class?: string;
+}
+declare const DictationStatus: import("svelte").Component<Props, {}, "">;
+type DictationStatus = ReturnType<typeof DictationStatus>;
+export default DictationStatus;
+//# sourceMappingURL=DictationStatus.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DictationStatus.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/forms/DictationStatus.svelte.ts"],"names":[],"mappings":"AAcA,OAAO,KAAK,EAAE,SAAS,EAAsB,MAAM,uBAAuB,CAAC;AAG3E,MAAM,WAAW,KAAK;IACpB,2EAA2E;IAC3E,SAAS,EAAE,SAAS,CAAC;IACrB,yBAAyB;IACzB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAwED,QAAA,MAAM,eAAe,2CAAwC,CAAC;AAC9D,KAAK,eAAe,GAAG,UAAU,CAAC,OAAO,eAAe,CAAC,CAAC;AAC1D,eAAe,eAAe,CAAC"}

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/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

@@ -257,6 +257,15 @@ 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;

package/dist/components/forms/Radio.svelte

@@ -20,18 +20,29 @@ 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; }
+
+  /* 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/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/Select.svelte

@@ -190,6 +190,15 @@ 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;