@happyvertical/smrt-ui 0.51.39 → 0.53.0

package/dist/components/forms/SignaturePad.svelte

@@ -0,0 +1,436 @@
+<!--
+  Signature pad that draws on its own canvas and returns a PNG.
+
+  A committed signature leaves through `onCapture({ blob, dataUrl })` and, when
+  `name` is set, posts in a plain native form as a file field, the same way
+  `CameraCapture` posts its photo (`native-file-field.ts`).
+
+  `stylusOnly` is resolved by the caller (a tenant setting, a device profile)
+  and passed in; the pointer-type gate is the pure `isAcceptedPointerType()` in
+  `signature-pad-logic.ts`. "Use signature" stays disabled until an accepted
+  stroke exists, so an empty canvas can never be submitted. Once committed the
+  canvas is locked; "Clear" discards the signature and unlocks it. A reset of
+  the owning form does the same, as it empties a native file input.
+
+  The bitmap is painted white and inked dark in every theme and colour scheme:
+  a signature is document content, so the exported PNG reads the same wherever
+  it is shown, and the pad looks like paper in dark mode too.
+
+  Ported from teamworks-os `SignaturePad.svelte`, smrt#3290.
+-->
+<script lang="ts">
+import { onMount, untrack } from 'svelte';
+import { M, useI18n } from '../../i18n/index.js';
+import {
+  focusControl,
+  highlightControl,
+  revealControl,
+} from './control-dom.js';
+import type { ControlInteractionOptions } from './control-interaction.js';
+import { tryGetControlInteractionContext } from './control-interaction-context.js';
+import {
+  assignFileWithDataTransfer,
+  attachFormDataFallback,
+  attachFormResetListener,
+  clearFileInput,
+  detectNativeFileFieldStrategy,
+  type NativeFileFieldStrategy,
+} from './native-file-field.js';
+import {
+  isAcceptedPointerType,
+  mapPointerToCanvasPoint,
+  SIGNATURE_INK_COLOR,
+  SIGNATURE_PAPER_COLOR,
+} from './signature-pad-logic.js';
+import type {
+  CaptureResult,
+  SignaturePadLabels,
+  SignaturePadState,
+} from './types.js';
+import { useControlRegistration } from './use-control-registration.svelte.js';
+
+export interface Props {
+  /** Accept pen input only; the caller resolves this rule. */
+  stylusOnly?: boolean;
+  /** Ignores input and disables both actions. */
+  disabled?: boolean;
+  /** Called when the user commits a signature with "Use signature". */
+  onCapture?: (result: CaptureResult) => void;
+  /** Called when a committed signature is discarded by "Clear" or a form reset. */
+  onClear?: () => void;
+  /** Field name: the committed PNG posts as a file in a native form. */
+  name?: string;
+  /** Posted file name. */
+  fileName?: string;
+  /** Canvas backing width in pixels (the display width is responsive). */
+  width?: number;
+  /** Canvas backing height in pixels. */
+  height?: number;
+  /** Text overrides; defaults come from the `ui` i18n catalog. */
+  labels?: Partial<SignaturePadLabels>;
+  /** DOM id of the component root. */
+  id?: string;
+  /** CSS class to apply to the component root. */
+  class?: string;
+  /** Interaction options or false to disable registration. */
+  interaction?: ControlInteractionOptions | false;
+}
+
+let {
+  stylusOnly = false,
+  disabled = false,
+  onCapture,
+  onClear,
+  name,
+  fileName = 'signature.png',
+  width = 600,
+  height = 240,
+  labels,
+  id,
+  class: className = '',
+  interaction,
+}: Props = $props();
+
+const { t } = useI18n();
+const text = $derived<SignaturePadLabels>({
+  region: t(M['ui.signature_pad.region']),
+  canvasEmpty: t(M['ui.signature_pad.canvas_empty']),
+  canvasSigned: t(M['ui.signature_pad.canvas_signed']),
+  hintAny: t(M['ui.signature_pad.hint_any']),
+  hintStylus: t(M['ui.signature_pad.hint_stylus']),
+  clear: t(M['ui.signature_pad.clear']),
+  useSignature: t(M['ui.signature_pad.use_signature']),
+  committed: t(M['ui.signature_pad.committed']),
+  ...labels,
+});
+
+const instanceId = $props.id();
+const interactionContext = tryGetControlInteractionContext();
+const resolvedId = $derived(id ?? `smrt-signature-${instanceId}`);
+const hintId = $derived(`${resolvedId}-hint`);
+const controlId = $derived(
+  interaction === false ? undefined : (interaction?.id ?? name ?? resolvedId),
+);
+
+let padState = $state<SignaturePadState>('empty');
+let strategy = $state<NativeFileFieldStrategy>('data-transfer');
+let rootEl = $state<HTMLDivElement | null>(null);
+let canvasEl = $state<HTMLCanvasElement | null>(null);
+let fieldEl = $state<HTMLInputElement | null>(null);
+let activePointerId: number | null = null;
+let lastPoint: { x: number; y: number } | null = null;
+let committedFile: File | null = null;
+// Set while "Use signature" encodes the PNG: the pad is locked so the posted
+// file always equals the ink on screen, and a second click cannot commit twice.
+let encoding = $state(false);
+let encodeRequest = 0;
+
+function paintPaper(): void {
+  const context = canvasEl?.getContext('2d');
+  if (!context || !canvasEl) return;
+  context.fillStyle = SIGNATURE_PAPER_COLOR;
+  context.fillRect(0, 0, canvasEl.width, canvasEl.height);
+}
+
+onMount(() => {
+  strategy = detectNativeFileFieldStrategy();
+});
+
+// Paint paper when the canvas mounts. A backing-size change clears the bitmap,
+// so it resets the pad (discarding a committed signature) rather than leaving
+// a posted file that no longer matches what is shown. Only a real change
+// counts: a re-run at the same size (a parent re-spreading a fresh props
+// object) leaves the bitmap intact and must not discard the signature.
+let paintedFor: { canvas: HTMLCanvasElement; size: string } | null = null;
+$effect(() => {
+  const canvas = canvasEl;
+  const size = `${width}x${height}`;
+  if (!canvas || (paintedFor?.canvas === canvas && paintedFor.size === size)) {
+    return;
+  }
+  paintedFor = { canvas, size };
+  untrack(resetPad);
+});
+
+$effect(() => {
+  if (strategy !== 'formdata-event' || typeof document === 'undefined') return;
+  return attachFormDataFallback(document, () =>
+    name && fieldEl
+      ? { form: fieldEl.form, name, file: committedFile, source: fieldEl }
+      : null,
+  );
+});
+
+// A reset of the owning form (`form.reset()`, a reset button, `enhance`'s
+// `update()` after a success) empties a native file input, so it discards the
+// signature exactly as "Clear" does: committed or still being drawn, and even
+// while `disabled`, as a reset empties a disabled native input too.
+$effect(() => {
+  if (typeof document === 'undefined') return;
+  return attachFormResetListener(
+    document,
+    () => fieldEl?.form ?? rootEl?.closest('form'),
+    resetPad,
+  );
+});
+
+function canvasPoint(event: PointerEvent): { x: number; y: number } {
+  if (!canvasEl) return { x: 0, y: 0 };
+  return mapPointerToCanvasPoint(
+    event.clientX,
+    event.clientY,
+    canvasEl.getBoundingClientRect(),
+    canvasEl.width,
+    canvasEl.height,
+  );
+}
+
+function drawSegment(
+  from: { x: number; y: number },
+  to: { x: number; y: number },
+): void {
+  const context = canvasEl?.getContext('2d');
+  if (!context) return;
+  context.lineCap = 'round';
+  context.lineJoin = 'round';
+  context.lineWidth = 4;
+  context.strokeStyle = SIGNATURE_INK_COLOR;
+  context.beginPath();
+  context.moveTo(from.x, from.y);
+  context.lineTo(to.x, to.y);
+  context.stroke();
+}
+
+function handlePointerDown(event: PointerEvent): void {
+  if (disabled || encoding || padState === 'committed') return;
+  if (!isAcceptedPointerType(event.pointerType, stylusOnly)) return;
+  event.preventDefault();
+  activePointerId = event.pointerId;
+  lastPoint = canvasPoint(event);
+  canvasEl?.setPointerCapture?.(event.pointerId);
+}
+
+function handlePointerMove(event: PointerEvent): void {
+  if (activePointerId !== event.pointerId) return;
+  if (disabled || encoding || padState === 'committed') return;
+  event.preventDefault();
+  const point = canvasPoint(event);
+  if (lastPoint) drawSegment(lastPoint, point);
+  lastPoint = point;
+  padState = 'signed';
+}
+
+function endStroke(event: PointerEvent): void {
+  if (activePointerId !== event.pointerId) return;
+  activePointerId = null;
+  lastPoint = null;
+}
+
+function writeField(file: File | null): void {
+  if (!fieldEl || !name || strategy !== 'data-transfer') return;
+  if (!file) {
+    clearFileInput(fieldEl);
+    return;
+  }
+  if (!assignFileWithDataTransfer(fieldEl, file)) {
+    strategy = detectNativeFileFieldStrategy({
+      FormDataEvent: (globalThis as Record<string, unknown>).FormDataEvent,
+    });
+  }
+}
+
+function clear(): void {
+  if (!disabled) resetPad();
+}
+
+function resetPad(): void {
+  const wasCommitted = padState === 'committed';
+  encodeRequest += 1;
+  encoding = false;
+  activePointerId = null;
+  lastPoint = null;
+  paintPaper();
+  padState = 'empty';
+  if (wasCommitted) {
+    committedFile = null;
+    writeField(null);
+    onClear?.();
+  }
+}
+
+function accept(): void {
+  const canvas = canvasEl;
+  if (disabled || encoding || padState !== 'signed' || !canvas) return;
+  encoding = true;
+  activePointerId = null;
+  lastPoint = null;
+  const request = ++encodeRequest;
+  const dataUrl = canvas.toDataURL('image/png');
+  canvas.toBlob((blob) => {
+    // A Clear (or resize) during encoding superseded this request.
+    if (request !== encodeRequest) return;
+    encoding = false;
+    if (!blob) return;
+    committedFile = new File([blob], fileName, { type: 'image/png' });
+    writeField(committedFile);
+    padState = 'committed';
+    onCapture?.({ blob, dataUrl });
+  }, 'image/png');
+}
+
+useControlRegistration(() => {
+  const root = rootEl;
+  if (!root || interaction === false) return false;
+  return {
+    controlId,
+    subject: interaction?.subject,
+    metadata: {
+      kind: 'file',
+      label: text.region,
+      description: interaction?.description,
+      sensitivity: interaction?.sensitivity ?? 'sensitive',
+      readable: false,
+      writable: false,
+      capabilities: ['focus', 'reveal', 'highlight', 'explain'],
+    },
+    focus: () => focusControl(root),
+    reveal: () => revealControl(root),
+    highlight: (durationMs) => highlightControl(root, durationMs),
+    getState: () => ({ disabled }),
+  };
+});
+</script>
+
+<div
+  bind:this={rootEl}
+  id={resolvedId}
+  class="signature-pad {className}"
+  class:disabled
+  role="group"
+  aria-label={text.region}
+  data-state={padState}
+  data-smrt-file-field={name ? strategy : 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}
+>
+  <canvas
+    bind:this={canvasEl}
+    {width}
+    {height}
+    aria-label={padState === 'empty' ? text.canvasEmpty : text.canvasSigned}
+    aria-describedby={hintId}
+    data-stylus-only={stylusOnly}
+    style:background-color={SIGNATURE_PAPER_COLOR}
+    onpointerdown={handlePointerDown}
+    onpointermove={handlePointerMove}
+    onpointerup={endStroke}
+    onpointercancel={endStroke}
+  ></canvas>
+
+  <p id={hintId} class="hint">{stylusOnly ? text.hintStylus : text.hintAny}</p>
+  <p class="message" role="status">{padState === 'committed' ? text.committed : ''}</p>
+
+  <div class="actions">
+    <button type="button" class="action" onclick={clear} {disabled}>{text.clear}</button>
+    <button
+      type="button"
+      class="action primary"
+      onclick={accept}
+      disabled={disabled || encoding || padState !== 'signed'}
+    >
+      {text.useSignature}
+    </button>
+  </div>
+
+  {#if name}
+    <input
+      bind:this={fieldEl}
+      class="field"
+      type="file"
+      hidden
+      tabindex="-1"
+      name={strategy === 'data-transfer' ? name : undefined}
+      data-smrt-capture-field
+    />
+  {/if}
+</div>
+
+<style>
+  .signature-pad {
+    display: grid;
+    gap: var(--smrt-spacing-3);
+    width: 100%;
+    max-width: 40rem;
+    color: var(--smrt-color-on-surface);
+  }
+  canvas {
+    display: block;
+    width: 100%;
+    height: auto;
+    border: 2px solid var(--smrt-color-outline);
+    border-radius: var(--smrt-radius-medium);
+    cursor: crosshair;
+    touch-action: none;
+  }
+  .disabled canvas,
+  [data-state='committed'] canvas {
+    cursor: default;
+  }
+  .disabled canvas {
+    opacity: 0.5;
+  }
+  .hint,
+  .message {
+    margin: 0;
+  }
+  .hint {
+    font: var(--smrt-typography-body-medium-font);
+    color: var(--smrt-color-on-surface-variant);
+  }
+  .message {
+    font: var(--smrt-typography-body-large-font);
+  }
+  .message:empty,
+  .field {
+    display: none;
+  }
+  .actions {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--smrt-spacing-3);
+  }
+  .action {
+    flex: 1 1 auto;
+    /* Capture is a touch flow: its actions are touch targets at every
+       density, on the shared scale (smrt#3252). */
+    min-width: var(--smrt-touch-target-min, 48px);
+    min-height: var(--smrt-touch-target-min, 48px);
+    padding: 0 var(--smrt-spacing-4);
+    border: 1px solid var(--smrt-color-outline);
+    border-radius: var(--smrt-radius-small);
+    background: var(--smrt-color-surface);
+    color: var(--smrt-color-on-surface);
+    font: var(--smrt-typography-label-large-font);
+    cursor: pointer;
+  }
+  .action.primary {
+    flex-grow: 2;
+    border-color: var(--smrt-color-primary);
+    background: var(--smrt-color-primary);
+    color: var(--smrt-color-on-primary);
+  }
+  .action:focus-visible {
+    outline: 2px solid var(--smrt-color-primary);
+    outline-offset: 2px;
+  }
+  .action:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+  :global(.signature-pad[data-smrt-highlighted='true']) {
+    outline: 3px solid var(--smrt-color-tertiary);
+    outline-offset: 4px;
+  }
+</style>

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

@@ -0,0 +1,32 @@
+import type { ControlInteractionOptions } from './control-interaction.js';
+import type { CaptureResult, SignaturePadLabels } from './types.js';
+export interface Props {
+    /** Accept pen input only; the caller resolves this rule. */
+    stylusOnly?: boolean;
+    /** Ignores input and disables both actions. */
+    disabled?: boolean;
+    /** Called when the user commits a signature with "Use signature". */
+    onCapture?: (result: CaptureResult) => void;
+    /** Called when a committed signature is discarded by "Clear" or a form reset. */
+    onClear?: () => void;
+    /** Field name: the committed PNG posts as a file in a native form. */
+    name?: string;
+    /** Posted file name. */
+    fileName?: string;
+    /** Canvas backing width in pixels (the display width is responsive). */
+    width?: number;
+    /** Canvas backing height in pixels. */
+    height?: number;
+    /** Text overrides; defaults come from the `ui` i18n catalog. */
+    labels?: Partial<SignaturePadLabels>;
+    /** DOM id of the component root. */
+    id?: string;
+    /** CSS class to apply to the component root. */
+    class?: string;
+    /** Interaction options or false to disable registration. */
+    interaction?: ControlInteractionOptions | false;
+}
+declare const SignaturePad: import("svelte").Component<Props, {}, "">;
+type SignaturePad = ReturnType<typeof SignaturePad>;
+export default SignaturePad;
+//# sourceMappingURL=SignaturePad.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SignaturePad.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/forms/SignaturePad.svelte.ts"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,0BAA0B,CAAC;AAgB1E,OAAO,KAAK,EACV,aAAa,EACb,kBAAkB,EAEnB,MAAM,YAAY,CAAC;AAIpB,MAAM,WAAW,KAAK;IACpB,4DAA4D;IAC5D,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,+CAA+C;IAC/C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,qEAAqE;IACrE,SAAS,CAAC,EAAE,CAAC,MAAM,EAAE,aAAa,KAAK,IAAI,CAAC;IAC5C,iFAAiF;IACjF,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,sEAAsE;IACtE,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,wBAAwB;IACxB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,wEAAwE;IACxE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,uCAAuC;IACvC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,gEAAgE;IAChE,MAAM,CAAC,EAAE,OAAO,CAAC,kBAAkB,CAAC,CAAC;IACrC,oCAAoC;IACpC,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,gDAAgD;IAChD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,4DAA4D;IAC5D,WAAW,CAAC,EAAE,yBAAyB,GAAG,KAAK,CAAC;CACjD;AAqQD,QAAA,MAAM,YAAY,2CAAwC,CAAC;AAC3D,KAAK,YAAY,GAAG,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC;AACpD,eAAe,YAAY,CAAC"}

package/dist/components/forms/StagedControlReview.svelte

@@ -83,18 +83,27 @@ function formatValue(value: unknown): string {
   }
 }
 
-function formatIdentity(snapshot: ControlSnapshot): string {
-  const { formId, controlId, subject } = snapshot.identity;
-  return subject
-    ? `${formId}/${controlId} · ${subject.type}:${subject.id}`
-    : `${formId}/${controlId}`;
+/**
+ * The words a person sees for a control: its label, or — for a control that
+ * registered none — its id made readable (`site_name` → "Site name"). The
+ * form id, subject type/id, and other registry addressing never show.
+ */
+function plainLabel(snapshot: ControlSnapshot): string {
+  const label = snapshot.metadata.label?.trim();
+  if (label) return label;
+  const tail = snapshot.identity.controlId.split('/').at(-1) ?? '';
+  const words = tail
+    .replace(/([a-z0-9])([A-Z])/g, '$1 $2')
+    .replace(/[-_.:]+/g, ' ')
+    .trim()
+    .toLowerCase();
+  return words ? words[0].toUpperCase() + words.slice(1) : tail;
 }
 
 function actionIdentity(snapshot: ControlSnapshot): string {
-  const label = snapshot.metadata.label ?? snapshot.identity.controlId;
+  const label = plainLabel(snapshot);
   const sameLabel = snapshots.filter(
-    (candidate) =>
-      (candidate.metadata.label ?? candidate.identity.controlId) === label,
+    (candidate) => plainLabel(candidate) === label,
   );
   if (sameLabel.length < 2) return label;
 
@@ -541,11 +550,11 @@ async function discardAll(event: MouseEvent): Promise<void> {
     <ul>
       {#each snapshots as snapshot (keyOf(snapshot))}
         {@const staged = snapshot.state.staged}
-        {@const label = snapshot.metadata.label ?? snapshot.identity.controlId}
+        {@const label = plainLabel(snapshot)}
         {@const actionName = actionIdentity(snapshot)}
         <li data-staged-review-item class:stale={staged?.stale} class:invalid={staged?.valid === false}>
           <div class="proposal-heading">
-            <div><strong>{label}</strong><code>{formatIdentity(snapshot)}</code></div>
+            <div><strong>{label}</strong>{#if snapshot.identity.subject?.label}<span class="subject">{snapshot.identity.subject.label}</span>{/if}</div>
             <span>{text.proposedBy} {staged?.provenance.actorId ?? staged?.provenance.source} · {text.stagedAt} {staged ? new Date(staged.stagedAt).toLocaleString() : ''}</span>
           </div>
           <dl>
@@ -620,8 +629,8 @@ async function discardAll(event: MouseEvent): Promise<void> {
   header, .proposal-heading, .batch-actions, .item-actions { display: flex; align-items: center; gap: var(--smrt-spacing-2, .5rem); }
   header { justify-content: space-between; align-items: flex-start; gap: var(--smrt-spacing-4, 1rem); }
   h2, p { margin: 0; } h2 { font: var(--smrt-typography-title-medium-font, 600 1rem/1.4 system-ui); }
-  header p, .proposal-heading span, .proposal-heading code, dt { color: var(--smrt-color-on-surface-variant, #475569); font-size: .875rem; }
-  .proposal-heading strong, .proposal-heading code { display: block; }
+  header p, .proposal-heading span, dt { color: var(--smrt-color-on-surface-variant, #475569); font-size: .875rem; }
+  .proposal-heading strong, .proposal-heading .subject { display: block; }
   ul { display: grid; gap: var(--smrt-spacing-3, .75rem); padding: 0; list-style: none; }
   li { padding: var(--smrt-spacing-3, .75rem); background: var(--smrt-color-surface, #fff); border: 1px solid var(--smrt-color-outline-variant, #cbd5e1); border-radius: var(--smrt-radius-small, .375rem); }
   li.stale, li.invalid { border-color: var(--smrt-color-error, #b3261e); }

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

@@ -1 +1 @@
-{"version":3,"file":"StagedControlReview.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/forms/StagedControlReview.svelte.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAEV,0BAA0B,EAE3B,MAAM,0BAA0B,CAAC;AAKlC,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,4BAA4B,CAAC;AAG5E,MAAM,WAAW,KAAK;IACpB,gEAAgE;IAChE,QAAQ,EAAE,0BAA0B,CAAC;IACrC,8CAA8C;IAC9C,MAAM,EAAE,MAAM,CAAC;IACf,mFAAmF;IACnF,WAAW,CAAC,EAAE,eAAe,GAAG,IAAI,CAAC;IACrC,2DAA2D;IAC3D,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,uDAAuD;IACvD,MAAM,CAAC,EAAE,OAAO,CAAC,yBAAyB,CAAC,CAAC;CAC7C;AAkkBD,QAAA,MAAM,mBAAmB,2CAAwC,CAAC;AAClE,KAAK,mBAAmB,GAAG,UAAU,CAAC,OAAO,mBAAmB,CAAC,CAAC;AAClE,eAAe,mBAAmB,CAAC"}
+{"version":3,"file":"StagedControlReview.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/forms/StagedControlReview.svelte.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAEV,0BAA0B,EAE3B,MAAM,0BAA0B,CAAC;AAKlC,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,4BAA4B,CAAC;AAG5E,MAAM,WAAW,KAAK;IACpB,gEAAgE;IAChE,QAAQ,EAAE,0BAA0B,CAAC;IACrC,8CAA8C;IAC9C,MAAM,EAAE,MAAM,CAAC;IACf,mFAAmF;IACnF,WAAW,CAAC,EAAE,eAAe,GAAG,IAAI,CAAC;IACrC,2DAA2D;IAC3D,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,uDAAuD;IACvD,MAAM,CAAC,EAAE,OAAO,CAAC,yBAAyB,CAAC,CAAC;CAC7C;AA2kBD,QAAA,MAAM,mBAAmB,2CAAwC,CAAC;AAClE,KAAK,mBAAmB,GAAG,UAAU,CAAC,OAAO,mBAAmB,CAAC,CAAC;AAClE,eAAe,mBAAmB,CAAC"}

package/dist/components/forms/Switch.svelte

@@ -20,6 +20,8 @@ export interface Props
     HTMLInputAttributes,
     'type' | 'class' | 'checked' | 'role' | 'size'
   > {
+  /** Target density; omit to inherit the ThemeProvider setting. */
+  density?: 'comfortable' | 'touch';
   /** Whether the switch is checked. */
   checked?: boolean;
   /** Text displayed next to the switch. */
@@ -48,6 +50,7 @@ let {
   interaction,
   onchange,
   'aria-label': ariaLabel,
+  density,
   ...rest
 }: Props = $props();
 const instanceId = $props.id();
@@ -113,25 +116,31 @@ useControlRegistration(() => {
 });
 </script>
 
-<label class="switch switch--{size} {className}" class:switch--disabled={disabled} data-smrt-control={controlId} data-smrt-form={interactionContext?.formId}
+<label data-density={density} class="switch switch--{size} {className}" class:switch--disabled={disabled} data-smrt-hit-target data-smrt-control={controlId} data-smrt-form={interactionContext?.formId}
   data-smrt-subject-type={resolvedInteraction === false ? undefined : resolvedInteraction.subject?.type}
   data-smrt-subject-id={resolvedInteraction === false ? undefined : resolvedInteraction.subject?.id}>
-  {#if label && labelPosition === 'left'}<span>{label}</span>{/if}
+  {#if label && labelPosition === 'left'}<span class="switch__label">{label}</span>{/if}
   <span class="switch__control">
     <input bind:this={inputEl} id={resolvedId} type="checkbox" role="switch" {name} {value} {disabled} {required} checked={checked}
       aria-label={ariaLabel ?? label ?? formGroup?.().label} aria-describedby={formGroup?.().describedBy}
       aria-invalid={formGroup?.().invalid ? 'true' : undefined} onchange={handleChange} {...rest} />
     <span class="switch__track" aria-hidden="true"><span class="switch__thumb"></span></span>
   </span>
-  {#if label && labelPosition === 'right'}<span>{label}</span>{/if}
+  {#if label && labelPosition === 'right'}<span class="switch__label">{label}</span>{/if}
 </label>
 
 <style>
   .switch { display: inline-flex; align-items: center; gap: var(--smrt-spacing-2, .5rem); cursor: pointer; color: var(--smrt-color-on-surface); }
   .switch--disabled { opacity: .5; cursor: not-allowed; }
-  .switch__control { position: relative; display: inline-flex; }
+  /* Phones: the whole row (track and label) is at least a 44px touch target. */
+  @media (max-width: 48rem) { .switch { min-block-size: 2.75rem; } }
+  /* The 2.75rem-wide track gets a transparent 44px-tall ::before hit area (see Checkbox); the
+     track and label sit above every hit area. --smrt-control-hit-size resizes it (0px = off). */
+  .switch__control { --_hit: max(var(--smrt-control-hit-size, 2.75rem), 1.5rem); position: relative; display: inline-flex; }
+  .switch__control::before { content: ''; position: absolute; z-index: 0; inset-block-start: 50%; inset-inline: calc((100% - var(--_hit)) / 2); block-size: var(--_hit); margin-block-start: calc(var(--_hit) / -2); }
+  .switch__label { position: relative; z-index: 1; }
   input { position: absolute; width: 1px; height: 1px; opacity: 0; }
-  .switch__track { width: 2.75rem; height: 1.5rem; padding: 2px; border-radius: var(--smrt-radius-full); background: var(--smrt-color-surface-container-highest); border: 1px solid var(--smrt-color-outline); transition: background var(--smrt-duration-short2); }
+  .switch__track { position: relative; z-index: 1; width: 2.75rem; height: 1.5rem; padding: 2px; border-radius: var(--smrt-radius-full); background: var(--smrt-color-surface-container-highest); border: 1px solid var(--smrt-color-outline); transition: background var(--smrt-duration-short2); }
   .switch__thumb { display: block; width: 1.125rem; height: 1.125rem; border-radius: 50%; background: var(--smrt-color-outline); transition: transform var(--smrt-duration-short2), background var(--smrt-duration-short2); }
   input:checked + .switch__track { background: var(--smrt-color-primary); border-color: var(--smrt-color-primary); }
   input:checked + .switch__track .switch__thumb { transform: translateX(1.25rem); background: var(--smrt-color-on-primary); }
@@ -140,4 +149,8 @@ useControlRegistration(() => {
   .switch--lg .switch__track { transform: scale(1.15); margin-inline: .2rem; }
   .switch[data-smrt-highlighted='true'] { outline: 3px solid var(--smrt-color-tertiary); outline-offset: 4px; border-radius: var(--smrt-radius-full); }
   @media (prefers-reduced-motion: reduce) { .switch__track, .switch__thumb { transition: none; } }
+
+  .switch[data-density='touch'] { --smrt-control-target-min: var(--smrt-touch-target-min, 48px); }
+  .switch[data-density='comfortable'] { --smrt-control-target-min: 0px; }
+  .switch { min-height: var(--smrt-control-target-min, 0px); min-width: var(--smrt-control-target-min, 0px); }
 </style>

package/dist/components/forms/Switch.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, 'type' | 'class' | 'checked' | 'role' | 'size'> {
+    /** Target density; omit to inherit the ThemeProvider setting. */
+    density?: 'comfortable' | 'touch';
     /** Whether the switch is checked. */
     checked?: boolean;
     /** Text displayed next to the switch. */

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

@@ -1 +1 @@
-{"version":3,"file":"Switch.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/forms/Switch.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,iBAAiB,CAAC;AAM3D,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,0BAA0B,CAAC;AAW1E,MAAM,WAAW,KACf,SAAQ,IAAI,CACV,mBAAmB,EACnB,MAAM,GAAG,OAAO,GAAG,SAAS,GAAG,MAAM,GAAG,MAAM,CAC/C;IACD,qCAAqC;IACrC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,yCAAyC;IACzC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,oDAAoD;IACpD,aAAa,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IACjC,yCAAyC;IACzC,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,kCAAkC;IAClC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,mFAAmF;IACnF,WAAW,CAAC,EAAE,yBAAyB,GAAG,KAAK,CAAC;CACjD;AAuGD,QAAA,MAAM,MAAM,kDAAwC,CAAC;AACrD,KAAK,MAAM,GAAG,UAAU,CAAC,OAAO,MAAM,CAAC,CAAC;AACxC,eAAe,MAAM,CAAC"}
+{"version":3,"file":"Switch.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/forms/Switch.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,iBAAiB,CAAC;AAM3D,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,0BAA0B,CAAC;AAW1E,MAAM,WAAW,KACf,SAAQ,IAAI,CACV,mBAAmB,EACnB,MAAM,GAAG,OAAO,GAAG,SAAS,GAAG,MAAM,GAAG,MAAM,CAC/C;IACD,iEAAiE;IACjE,OAAO,CAAC,EAAE,aAAa,GAAG,OAAO,CAAC;IAClC,qCAAqC;IACrC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,yCAAyC;IACzC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,oDAAoD;IACpD,aAAa,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IACjC,yCAAyC;IACzC,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,kCAAkC;IAClC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,mFAAmF;IACnF,WAAW,CAAC,EAAE,yBAAyB,GAAG,KAAK,CAAC;CACjD;AAwGD,QAAA,MAAM,MAAM,kDAAwC,CAAC;AACrD,KAAK,MAAM,GAAG,UAAU,CAAC,OAAO,MAAM,CAAC,CAAC;AACxC,eAAe,MAAM,CAAC"}

package/dist/components/forms/TagsInput.svelte

@@ -139,6 +139,13 @@ useControlRegistration(() => {
   .tags-field { display: grid; gap: var(--smrt-spacing-1); color: var(--smrt-color-on-surface); } label { font: var(--smrt-typography-label-large-font); }
   .tags { display: flex; flex-wrap: wrap; gap: var(--smrt-spacing-1); min-height: 2.5rem; padding: var(--smrt-spacing-1); border: 1px solid var(--smrt-color-outline); border-radius: var(--smrt-radius-small); background: var(--smrt-color-surface); }
   .tag { display: inline-flex; align-items: center; gap: var(--smrt-spacing-1); padding: var(--smrt-spacing-1) var(--smrt-spacing-2); border-radius: var(--smrt-radius-full); background: var(--smrt-color-secondary-container); color: var(--smrt-color-on-secondary-container); }
-  .tag button { border: 0; background: transparent; color: inherit; cursor: pointer; } .tags > input { flex: 1; min-width: 8rem; border: 0; outline: 0; background: transparent; color: inherit; }
+  .tag button { display: inline-flex; align-items: center; justify-content: center; border: 0; background: transparent; color: inherit; cursor: pointer; }
+  /* Phones and touch screens: the × is a 44px target (the tag grows with it). */
+  @media (max-width: 48rem), (pointer: coarse) {
+    .tag { padding-inline-end: 0; }
+    .tag button { min-inline-size: 2.75rem; min-block-size: 2.75rem; font-size: 1.25rem; }
+  }
+  .tag button:focus-visible { outline: 2px solid var(--smrt-color-primary); outline-offset: -2px; border-radius: var(--smrt-radius-full); }
+  .tags > input { flex: 1; min-width: 8rem; border: 0; outline: 0; background: transparent; color: inherit; }
   :global(.tags[data-smrt-highlighted='true']) { outline: 3px solid var(--smrt-color-tertiary); outline-offset: 4px; }
 </style>