@happyvertical/smrt-ui 0.52.0 → 0.53.1

package/AGENTS.md

@@ -52,7 +52,8 @@ components are exempt — they *are* the primitives.
 | `./layout` | `Container`, `Grid`, `Header`, `Footer`, `PageHeader`, `EmptyState`, … |
 | `./calendar` | `CalendarView` (time-zone-aware month grid + phone agenda) and its Svelte-free date model (`toEntries`, `layoutMonth`, `dateKeyInZone`, …); deprecated `Calendar`, `DayView` |
 | `./chat` | `MessageBubble`, `ReactionPicker`, `TypingIndicator` |
-| `./forms` | Provider-free fields, choice controls, sliders/ranges, combobox/listbox/multiselect/tags, date/time/file controls, plus the transport-neutral control interaction registry |
+| `./forms` | Provider-free fields, choice controls, sliders/ranges, combobox/listbox/multiselect/tags, date/time/file controls, `CameraCapture`/`SignaturePad` capture, plus the transport-neutral control interaction registry |
+| `./form-retry` | **Svelte-free** form retry (#3291): submission key, in-flight refusal, conditional reset, opt-in restore-after-reload, browser `runOnce()` digest. Also re-exported from `./forms`. Framework-free TS typed structurally against SvelteKit's `SubmitFunction` — never import `@sveltejs/kit` here. Guide: `docs/content/form-retry.md` |
 | `./i18n` | i18n **client**: `useI18n`, `<Trans>`, `defineMessages`, `renderTemplate` (no `smrt-languages` import — the server resolver stays in `smrt-svelte/i18n/server`) |
 | `./registry` | `ModuleUIRegistry` for cross-package component discovery |
 | `./theme` | deprecated compatibility path forwarding to the canonical theme system |
@@ -153,6 +154,15 @@ other text pairing clears WCAG AA in both schemes.
   instants into the zone once (`dateKeyInZone`) and do all grid/span math on
   keys; never `new Date(y, m, d)` / `getDay()` in the browser zone. Months are
   1-12 in the public API (`CalendarMonth`), unlike `Date#getMonth`.
+- **Capture controls post natively.** `CameraCapture` and `SignaturePad` fill
+  a hidden named file input via `DataTransfer`, falling back to a `formdata`
+  listener (`native-file-field.ts`). Keep camera lifecycle in the
+  framework-free `camera-capture-session.ts` and the pointer gate in
+  `signature-pad-logic.ts`; their effects must not read rendered state. The
+  `<input capture>` path stays opt-in (`fileInputFallback`), off by default.
+  A form `reset` empties a native file input, so both clear their capture on
+  their form's reset (`attachFormResetListener`), even while `disabled`;
+  otherwise the UI shows a file the next submit no longer posts.
 
 - **i18n split**: the client (here) is dependency-free; the Node-only server
   resolver (`buildI18nSnapshot`, → `@happyvertical/smrt-languages`) stays in

package/README.md

@@ -33,6 +33,7 @@ pnpm add @happyvertical/smrt-ui
 | Text and structured input | `Input`, `Textarea`, `Select`, `Combobox`, `Listbox`, `MultiSelect`, `TagsInput`, `SearchInput` |
 | Choices | `Checkbox`, `RadioGroup`/`Radio`, `Switch`, `Toggle`, `ToggleButton`, `SegmentedControl` |
 | Values and files | `Slider`, `RangeSlider`, `DatePicker`, `TimePicker`, `FilePicker` |
+| Capture | `CameraCapture`, `SignaturePad` |
 | Actions and display | `Button`, `Dropdown`/`Menu`, `Badge`, `Chip`, `Avatar`, `Card`, `Skeleton`, `Tooltip`, `Tree` |
 | Disclosure and overlays | `Popover`, `Disclosure`, `Accordion`/`AccordionItem`, `Modal`, `Drawer`/`Sheet`, `PhoneSheet`, `ConfirmDialog` |
 | Feedback | `Alert`, `ToastViewport`, `Progress`, `Meter`, `Spinner`, `LoadingOverlay`, `WorkingStrip` |
@@ -91,12 +92,65 @@ kept in view. It carries `data-shell-tabs`, so AdminShell keeps it sticky
 under the phone top bar. Pair it with `useLinkSurface` (smrt-svelte) so
 agents can switch tabs too.
 
-Use the focused subpaths (`/forms`, `/ui`, `/feedback`, `/data`,
+Use the focused subpaths (`/forms`, `/form-retry`, `/ui`, `/feedback`, `/data`,
 `/data-surface`, `/layout`, `/themes`) to keep imports explicit. The
 Svelte-free `/data-surface` entry exposes the registry contracts and shared
-protocol limits for server adapters. The package root remains a compatibility
+protocol limits for server adapters; the Svelte-free `/form-retry` entry
+exposes the form-retry helper. The package root remains a compatibility
 barrel.
 
+### Calendar dates and shop time
+
+`DateDisplay` accepts `timeZone` (an IANA id such as `America/Edmonton`) for
+instant inputs (`Date`, numeric timestamps, and timestamp strings). Omit it to
+keep browser-local absolute formatting and the existing duration-based relative
+format. With an explicit zone, relative today/yesterday/tomorrow boundaries use
+calendar days in that zone, including daylight saving transitions.
+
+A bare `YYYY-MM-DD` string always denotes that calendar date, independent of the
+viewer or shop zone. It formats in UTC, retains a date-only `datetime` attribute,
+and ignores `showTime` because it contains no time. Relative calendar-date
+labels compare it with today's date in the supplied zone (or the browser zone).
+Impossible calendar dates render `fallback`. Invalid explicit zones used for
+instant or relative formatting also render `fallback` rather than throwing.
+
+### Combobox form submission
+
+A named `Combobox` submits its selected option value through a hidden native
+input. Its visible search text and option label are display-only. With
+`allowCustom`, typed text becomes the submitted value; otherwise searching keeps
+the last committed selection. A named empty selection submits an empty string;
+controls with no name or an empty name are omitted. Disabled controls, including
+those inside disabled fieldsets, are omitted by native `FormData`. Native form
+reset restores the initial selection and its label, unless reset is canceled.
+
+### MultiSelect form submission
+
+A named `MultiSelect` submits one hidden native input per selected option value,
+using repeated field names in selection order. Read them with `FormData.getAll`.
+Option labels are display-only, and numeric option values submit as strings.
+Empty selections, missing or empty names, and disabled controls (including
+ancestor fieldsets) contribute no entries. Native reset restores the initial
+selection unless reset is canceled.
+
+### Listbox form submission
+
+A named `Listbox` submits one hidden native input containing its selected option
+value, with numeric values encoded as strings. A named listbox without a
+selection submits an empty string. Missing or empty names and disabled controls
+(including ancestor fieldsets) are omitted. Native reset restores the initial
+selection unless reset is canceled.
+
+### Status badge tones
+
+`StatusBadge` accepts `tone="success"`, `"warning"`, `"danger"`, `"info"`, or
+`"neutral"` for custom status vocabulary such as `awaiting_cert`. An explicit
+tone overrides the built-in domain scheme while label, size, and outline variant
+continue to work independently. Tones use the active theme's paired container
+and text tokens. Without a tone, known domain statuses retain their existing
+colors and unknown statuses retain the neutral fallback. `StatusTone` is exported
+as a TypeScript type from the package root.
+
 ### Touch targets for Checkbox, Radio and Switch
 
 `Checkbox`, `Radio` and `Switch` have an invisible 44x44px hit area around the
@@ -229,6 +283,34 @@ Application-specific editors, maps, charts, media workbenches, and domain
 records remain composites built from this foundation rather than generic base
 components.
 
+## Native and enhanced forms
+
+`Form` forwards native form attributes and Svelte attachments through its rest
+props to the underlying `<form>`. For a SvelteKit action, adapt `enhance` with
+`fromAction` and set `preventDefault={false}` so the enhancement handles submission:
+
+```svelte
+<script lang="ts">
+  import { enhance } from '$app/forms';
+  import { fromAction } from 'svelte/attachments';
+  import { Form, Input } from '@happyvertical/smrt-ui/forms';
+</script>
+
+<Form method="POST" action="?/save" preventDefault={false} {@attach fromAction(enhance)}>
+  <Input name="displayName" />
+  <button type="submit">Save</button>
+</Form>
+```
+
+For a customized enhancement, pass its callback as a getter:
+`{@attach fromAction(enhance, () => submitFunction)}`. The attachment runs on the
+native element and cleans up when it unmounts; the interaction registry and
+staged-review surface remain available. A component reference obtained with
+`bind:this` exposes `getFormElement(): HTMLFormElement | null`, which returns
+`null` before mount and after unmount. For ordinary browser GET/POST forms, use
+`preventDefault={false}` without an attachment. The default remains `true` for
+existing handler-driven forms.
+
 ## Agent-addressable forms
 
 `Form` can expose its controls to a chat, voice, tutorial, or test adapter
@@ -362,6 +444,130 @@ disabled, read-only, file, or password controls), and staging only ever
 creates reviewable proposals. smrt-svelte's `<Form webmcp>` and `FormScope`
 build their `*_stage_changes` tool from these.
 
+## Form retry
+
+`createFormRetry()` is the browser half of `runOnce()` (`@happyvertical/smrt-core`)
+for a SvelteKit enhanced form: a per-tab, per-form submission key, a refused
+second submit while one is in flight, typed values kept across a validation or
+transport failure, a reset after success only when the fields are unchanged
+since submit, and opt-in restore after a reload (a file that cannot be restored
+is reported, never silently dropped). It is framework-free and imports neither
+Svelte nor SvelteKit; the submit function is typed against SvelteKit's
+`SubmitFunction` shape structurally.
+
+```svelte
+<script lang="ts">
+  import { enhance } from '$app/forms';
+  import { createFormRetry } from '@happyvertical/smrt-ui/form-retry';
+
+  const retry = createFormRetry({ form: 'report' });
+</script>
+
+<form method="POST" use:enhance={retry.enhance()} {@attach retry.attach}>
+  <input name="title" />
+  <button type="submit">Send</button>
+  {#if $retry.status === 'transport-error'}<p role="alert">Send it again unchanged.</p>{/if}
+</form>
+```
+
+With smrt-ui's own `Form`, attach the same two pieces to it (see
+[Native and enhanced forms](#native-and-enhanced-forms)):
+`<Form method="POST" preventDefault={false} {@attach fromAction(enhance, () => retry.enhance())} {@attach retry.attach}>`.
+
+`/forms` re-exports the same API as the Svelte-free `/form-retry` entry. See the
+[form retry guide](../../docs/content/form-retry.md) for the server half, the
+per-result table, storage and private-window behaviour, and restore.
+
+## Camera and signature capture
+
+`CameraCapture` takes a photo from the device camera and `SignaturePad` takes a
+signature, each inside an ordinary form. Both live in `/forms`, need only
+browser APIs, and post their file through a plain multipart form when given a
+`name`; the page wires no hidden input and no submit handler.
+
+```svelte
+<script lang="ts">
+  import { CameraCapture, SignaturePad } from '@happyvertical/smrt-ui/forms';
+</script>
+
+<form method="POST" enctype="multipart/form-data">
+  <CameraCapture name="photo" facingMode="environment" />
+  <SignaturePad name="signature" stylusOnly={settings.signatureStylusOnly} />
+  <button type="submit">Send</button>
+</form>
+```
+
+**CameraCapture** uses `getUserMedia` with a live preview. The user takes a
+photo, reviews it, and can retake it before "Use photo" commits it. Committing
+calls `onCapture({ blob, dataUrl })` and fills the named field (`photo.jpg` by
+default; set `fileName`, `imageType`, and `quality` to change it). "Retake"
+after a commit empties the field and calls `onClear`. The root's `data-state`
+is one of `starting`, `streaming`, `reviewing`, `committed`, `off` (disabled),
+`permission-denied`, `no-camera`, `unsupported`, `error`, or `fallback`. Each
+problem state has its own copy and, where it can help, a "Try again" action.
+`getUserMedia` exists only in a secure context, so a page served over plain
+HTTP renders `unsupported`.
+
+The stream's tracks are stopped on unmount, when `disabled` turns on, when
+`facingMode` changes (the camera is then requested again), and as soon as a
+frame is captured. A permission prompt answered after unmount or disable is
+discarded and its stream released. The lifecycle lives in the framework-free
+`createCameraSession()` (exported with `classifyGetUserMediaError()` and
+`isCameraApiSupported()`), so it can be tested against a fake `MediaDevices`.
+
+`fileInputFallback` is opt-in and off by default. With it on, browsers without
+`getUserMedia` render an `<input type="file" accept="image/*" capture>` that
+carries `name` itself (`disabled` blocks it with `aria-disabled` rather than
+the native attribute, so a committed photo keeps posting). It opens the
+operating system's picker, which has no
+live preview and can offer the gallery, so it is not a substitute for the
+camera flow. With it off, those browsers render the `unsupported` state.
+
+**SignaturePad** draws on its own canvas. "Use signature" stays disabled until
+an accepted stroke exists, then returns a PNG through `onCapture({ blob,
+dataUrl })` and fills the named field (`signature.png` by default). A committed
+pad is locked until "Clear", which empties the field and calls `onClear`.
+`stylusOnly` is a prop the caller resolves; with it on, only `pointerType ===
+'pen'` draws. `isAcceptedPointerType()` and `mapPointerToCanvasPoint()` are
+exported as pure functions. The pad is dark ink on white paper in every theme
+and colour scheme, and the exported PNG is opaque white, so it reads the same
+wherever it is shown.
+
+**Native form posting.** The named field is a hidden `<input type="file">`
+filled through `DataTransfer` (Chrome 60+, Firefox 62+, Safari 14.1+). Where
+`DataTransfer` cannot be constructed or assigned, the field drops its `name`
+and a capture-phase `formdata` listener appends the file while the browser
+builds the request, which covers native navigation submits as well as
+`new FormData(form)`. Where neither API exists, nothing is posted and
+`onCapture` is the only channel. The root's `data-smrt-file-field` attribute
+reports `data-transfer`, `formdata-event`, `file-input`, or `none`. Before a
+commit the field posts what an empty native file input posts. `disabled`
+freezes the controls but keeps a committed file in the submission; unmount the
+component to drop it, or put it in a disabled `<fieldset>`, which leaves the
+field out of the submission (committed or empty) in every posting strategy.
+
+A reset of the owning form (`form.reset()`, a reset button, or SvelteKit
+`enhance`'s `update()` after a success, including `createFormRetry()`'s
+conditional reset) empties the field as it empties a native file input, in
+every posting strategy. A committed photo or signature is discarded as
+"Retake" or "Clear" would and `onClear` is called. A photo under review or
+ink not yet committed is discarded too, without `onClear`, so the next entry
+cannot attach the previous one's capture. `CameraCapture` returns to the live
+camera (`off` while `disabled`, the emptied picker with `fileInputFallback`)
+and supersedes a frame still encoding; with nothing held, a reset changes
+nothing and never re-prompts for the camera. `SignaturePad` returns to blank,
+unlocked paper. A reset clears both even while `disabled`, as it clears a
+disabled native input, and a reset a later listener cancels still leaves the
+component and the posted field both empty.
+
+Text comes from the `ui.camera_capture.*` and `ui.signature_pad.*` i18n keys
+and can be overridden per instance with `labels`. Capture is a touch flow, so
+its actions (and the fallback picker) are touch targets at every density: at
+least `--smrt-touch-target-min` (48px by default; see
+[Touch density](#touch-density)), which ThemeProvider `overrides` can raise.
+Both register with an enclosing `Form`'s interaction registry as non-readable,
+non-writable `file` controls.
+
 ## DataTable controller
 
 `DataTable` can share one headless `DataTableController` between rendered
@@ -789,3 +995,95 @@ pnpm test
 pnpm build
 pnpm verify:pack
 ```
+
+### Touch density
+
+Set `<ThemeProvider density="touch">` for floor tablets and phones, or set
+`density="touch"` on Input, Select, Textarea, Checkbox, Switch, RadioGroup,
+Button (including links), FilterChips, SegmentedControl, or DataTable. DataTable
+applies density to its sort buttons. Density is independent of existing `size`
+props, including native Input/Select sizes. Omitted density inherits; explicitly
+setting `density="comfortable"` opts that control out and keeps its usual size.
+RadioGroup expands each option's clickable label, and Checkbox/Switch expand
+the label hit area while preserving the visual mark.
+
+`--smrt-touch-target-min` defaults to `48px` across all presets and works without
+a provider. Customize it globally with ThemeProvider's `overrides`, for example
+`overrides={{ '--smrt-touch-target-min': '56px' }}`. Touch targets grow with larger
+content; normal density keeps existing component sizing. `CameraCapture` and
+`SignaturePad` actions use `--smrt-touch-target-min` at every density, since
+capture is a touch flow. TenantNav sizing is
+tracked separately in [#3246](https://github.com/happyvertical/smrt/issues/3246).
+
+### Narrow DataTable
+
+Set `responsiveMode="hide-columns"` to adapt to the table's container width.
+The default `responsiveBreakpoint={800}` includes both 768px tablets and 390px
+phones. Narrow mode budgets one column per `responsiveColumnMinWidth={160}`
+pixels, after reserving space for selection and expansion controls. Higher
+`column.responsive.priority` values survive first (missing/nonfinite values are
+zero); ties preserve declared display order. `responsive.keepVisible` columns
+always survive responsive collapse, while explicitly hidden columns stay hidden.
+
+Retained cells wrap, and their desktop width and pinning settings resume when
+the container widens. Responsive presentation never changes controller state,
+sorting, selection, or persisted column visibility. Header groups and structural
+row colspans follow the retained columns. If keepVisible columns exceed the
+budget, all remain visible and share the available width. Custom cell/header
+snippets should fit their cells. Default `responsiveMode="scroll"` preserves
+existing horizontal scrolling.
+
+ConfirmDialog opens a native modal dialog above existing Modal and Drawer surfaces.
+Its `message` accepts plain text or a Svelte snippet (including lists and emphasis);
+each instance owns its accessible title and description ids. Escape and backdrop
+clicks request `oncancel`; the parent controls `open`. The opener regains focus
+on close. Buttons remain disabled while `loading`, and Escape stays available.
+The native top layer replaces the previous fixed div; confirmation now stacks
+above an already open modal and makes its background inert. Escape is scoped to
+the active dialog rather than handled globally. Existing `open`, `loading` and
+action callbacks retain their controlled-state contracts.
+
+Browser feedback contracts run with `pnpm --filter @happyvertical/smrt-ui test:e2e`
+(after installing Playwright Chromium, or setting
+`PLAYWRIGHT_CHROMIUM_EXECUTABLE_PATH` to a local Chromium executable).
+
+ToastViewport follows the topmost native modal dialog and restores its original
+host when all modals close. Its live region, dismiss buttons and actions stay
+interactive inside Modal, Drawer and ConfirmDialog. Hover and focus independently
+pause auto-dismiss, then resume the remaining duration. Configure
+`createToaster({ successDuration: 0 })` to keep success records until dismissal;
+per-toast `duration: 0` remains supported. `inset` accepts a CSS length, `anchor`
+accepts a content-region element, and `top-center`/`bottom-center` positions center
+the viewport within that region (or the window). Anchor geometry follows resize
+and scroll. Custom injected Toaster implementations may optionally implement
+`pause(id, reason)` and `resume(id, reason)` to support interaction pausing.
+
+### SegmentedControl forms
+
+SegmentedControl renders native radio inputs. Set `name` to post the selected
+option value with ordinary form submission or FormData; numeric values post as
+strings while bound values retain their declared type. Unselected, unknown,
+disabled-option, disabled-control and disabled-fieldset values are omitted.
+`required` uses native form validation and accepts numeric zero. Nameless controls
+validate without posting a generated field. Arrow keys cycle enabled options;
+Home/End select the first/last enabled option. Touch density applies to the full
+clickable segment.
+
+Native form reset restores the initial bound value if that option is still
+available and enabled; otherwise it clears the selection. Canceling the reset
+event preserves the current selection. Reset does not fire `onvaluechange`,
+matching native controls; bind:value reflects it.
+
+### Application icons
+
+Icon includes the original menu/search/chevron/action glyphs plus `alert`,
+`warning`, `info`, `home`, `user`, `settings`, `trash`, `edit`, `calendar`,
+`clock`, `camera`, `upload`, and `download`. Import `registerIcons` from
+`@happyvertical/smrt-ui` to install an application SVG path map at startup.
+Registrations update mounted icons; the returned cleanup function removes that
+registration and restores the previous active set. Last active registration wins,
+and an explicit Icon `path` prop wins over every named set. Unknown names retain
+their empty shape. Names and paths must be nonempty strings; invalid mixed sets
+are rejected atomically. Sets are snapshotted, so later caller mutations do not
+change glyphs. Register static application assets, never request or identity data,
+and install the same application set for SSR and client hydration.

package/dist/components/data/DataTable.svelte

@@ -35,6 +35,7 @@ import {
   type DataTableResolvedColumn,
   resolveDataTableLayout,
 } from './DataTableLayout.js';
+import { responsiveColumns } from './DataTableResponsive.js';
 import {
   maximumDataTableVirtualScrollTop,
   resolveDataTableVirtualWindow,
@@ -103,6 +104,10 @@ let {
   empty,
   rowClass,
   size = 'md',
+  density,
+  responsiveMode = 'scroll',
+  responsiveBreakpoint = 800,
+  responsiveColumnMinWidth = 160,
   striped = false,
   hoverable = true,
   stickyHeader = false,
@@ -775,6 +780,7 @@ function updateOverflowState() {
   const container = tableContainer;
   if (!container) return;
 
+  containerWidth = container.clientWidth;
   const maxScrollLeft = Math.max(
     0,
     container.scrollWidth - container.clientWidth,
@@ -836,9 +842,30 @@ function setIndeterminate(node: HTMLInputElement, value: boolean) {
   };
 }
 
-const dataTableLayout = $derived(
+let containerWidth = $state(0);
+const isNarrow = $derived(
+  responsiveMode === 'hide-columns' &&
+    containerWidth > 0 &&
+    containerWidth <=
+      (Number.isFinite(responsiveBreakpoint) && responsiveBreakpoint > 0
+        ? responsiveBreakpoint
+        : 800),
+);
+const declaredLayout = $derived(
   resolveDataTableLayout(columns, constrainedLayoutState, measuredColumnWidths),
 );
+const dataTableLayout = $derived(
+  isNarrow
+    ? resolveDataTableLayout(
+        responsiveColumns(
+          declaredLayout.columns.map((entry) => entry.column),
+          containerWidth - (selectable ? 48 : 0) - (expandedContent ? 48 : 0),
+          responsiveColumnMinWidth,
+        ),
+        { ...constrainedLayoutState, columnWidths: [], columnPinning: [] },
+      )
+    : declaredLayout,
+);
 const visibleColumns = $derived(dataTableLayout.columns);
 const dataBodyStructuralRows = $derived(
   structuralRows.filter((row) => row.kind !== 'footer'),
@@ -1222,6 +1249,7 @@ function getCellValue(row: T, column: DataTableColumn<T>): unknown {
 function widthForColumn(
   column: DataTableResolvedColumn<T>,
 ): string | undefined {
+  if (isNarrow) return undefined;
   return column.width === undefined ? column.column.width : `${column.width}px`;
 }
 
@@ -1390,10 +1418,18 @@ $effect(() => {
   void displayRows.length;
   if (!container) return;
 
+  let resizeFrame: number | undefined;
+  const scheduleOverflowUpdate = () => {
+    if (resizeFrame !== undefined) return;
+    resizeFrame = requestAnimationFrame(() => {
+      resizeFrame = undefined;
+      updateOverflowState();
+    });
+  };
   const resizeObserver =
     typeof ResizeObserver === 'undefined'
       ? undefined
-      : new ResizeObserver(updateOverflowState);
+      : new ResizeObserver(scheduleOverflowUpdate);
   resizeObserver?.observe(container);
   const table = container.querySelector('table');
   if (table) resizeObserver?.observe(table);
@@ -1402,6 +1438,7 @@ $effect(() => {
 
   return () => {
     resizeObserver?.disconnect();
+    if (resizeFrame !== undefined) cancelAnimationFrame(resizeFrame);
     window.removeEventListener('resize', updateOverflowState);
   };
 });
@@ -1411,7 +1448,9 @@ $effect(() => {
 <!-- svelte-ignore a11y_no_noninteractive_tabindex: the region provides horizontal or virtual keyboard scrolling. -->
 <div
   bind:this={tableContainer}
+  data-density={density}
   class="data-table-container"
+  class:data-table-container--narrow={isNarrow}
   class:data-table-container--sticky={stickyHeader || virtualizedBody}
   class:data-table-container--overflowing={hasHorizontalOverflow}
   class:data-table-container--virtualized={virtualizationWindow.enabled}
@@ -1503,8 +1542,8 @@ $effect(() => {
                 data-keep-visible={column.responsive?.keepVisible ? 'true' : undefined}
                 use:observeColumnWidth={column.id}
                 style:width={widthForColumn(resolvedColumn)}
-                style:min-width={column.minWidth}
-                style:max-width={column.maxWidth}
+                style:min-width={isNarrow ? undefined : column.minWidth}
+                style:max-width={isNarrow ? undefined : column.maxWidth}
                 style:left={resolvedColumn.pin === 'start' ? resolvedColumn.stickyOffset : undefined}
                 style:right={resolvedColumn.pin === 'end' ? resolvedColumn.stickyOffset : undefined}
                 style:text-align={column.align}
@@ -1560,7 +1599,7 @@ $effect(() => {
                 {:else}
                   {column.label}
                 {/if}
-                {#if column.resizable}
+                {#if column.resizable && !isNarrow}
                   <!-- svelte-ignore a11y_no_noninteractive_element_interactions: a focusable ARIA separator is the resize control. -->
                   <span
                     class="data-table__resize-handle"
@@ -1686,8 +1725,8 @@ $effect(() => {
                 data-responsive-priority={column.responsive?.priority}
                 data-keep-visible={column.responsive?.keepVisible ? 'true' : undefined}
                 style:width={widthForColumn(resolvedColumn)}
-                style:min-width={column.minWidth}
-                style:max-width={column.maxWidth}
+                style:min-width={isNarrow ? undefined : column.minWidth}
+                style:max-width={isNarrow ? undefined : column.maxWidth}
                 style:left={resolvedColumn.pin === 'start' ? resolvedColumn.stickyOffset : undefined}
                 style:right={resolvedColumn.pin === 'end' ? resolvedColumn.stickyOffset : undefined}
                 style:text-align={column.align}
@@ -1743,8 +1782,8 @@ $effect(() => {
                   scope="row"
                   data-column-id={column.id}
                   style:width={widthForColumn(resolvedColumn)}
-                  style:min-width={column.minWidth}
-                  style:max-width={column.maxWidth}
+                  style:min-width={isNarrow ? undefined : column.minWidth}
+                  style:max-width={isNarrow ? undefined : column.maxWidth}
                   style:left={resolvedColumn.pin === 'start' ? resolvedColumn.stickyOffset : undefined}
                   style:right={resolvedColumn.pin === 'end' ? resolvedColumn.stickyOffset : undefined}
                   style:text-align={column.align}
@@ -1764,8 +1803,8 @@ $effect(() => {
                   class:data-table__cell--pinned-end={resolvedColumn.pin === 'end'}
                   data-column-id={column.id}
                   style:width={widthForColumn(resolvedColumn)}
-                  style:min-width={column.minWidth}
-                  style:max-width={column.maxWidth}
+                  style:min-width={isNarrow ? undefined : column.minWidth}
+                  style:max-width={isNarrow ? undefined : column.maxWidth}
                   style:left={resolvedColumn.pin === 'start' ? resolvedColumn.stickyOffset : undefined}
                   style:right={resolvedColumn.pin === 'end' ? resolvedColumn.stickyOffset : undefined}
                   style:text-align={column.align}
@@ -1807,8 +1846,8 @@ $effect(() => {
                   scope="row"
                   data-column-id={column.id}
                   style:width={widthForColumn(resolvedColumn)}
-                  style:min-width={column.minWidth}
-                  style:max-width={column.maxWidth}
+                  style:min-width={isNarrow ? undefined : column.minWidth}
+                  style:max-width={isNarrow ? undefined : column.maxWidth}
                   style:left={resolvedColumn.pin === 'start' ? resolvedColumn.stickyOffset : undefined}
                   style:right={resolvedColumn.pin === 'end' ? resolvedColumn.stickyOffset : undefined}
                   style:text-align={column.align}
@@ -1828,8 +1867,8 @@ $effect(() => {
                   class:data-table__cell--pinned-end={resolvedColumn.pin === 'end'}
                   data-column-id={column.id}
                   style:width={widthForColumn(resolvedColumn)}
-                  style:min-width={column.minWidth}
-                  style:max-width={column.maxWidth}
+                  style:min-width={isNarrow ? undefined : column.minWidth}
+                  style:max-width={isNarrow ? undefined : column.maxWidth}
                   style:left={resolvedColumn.pin === 'start' ? resolvedColumn.stickyOffset : undefined}
                   style:right={resolvedColumn.pin === 'end' ? resolvedColumn.stickyOffset : undefined}
                   style:text-align={column.align}
@@ -2292,4 +2331,10 @@ $effect(() => {
       animation: none;
     }
   }
+  .data-table-container[data-density='touch'] { --smrt-control-target-min: var(--smrt-touch-target-min, 48px); }
+  .data-table-container[data-density='comfortable'] { --smrt-control-target-min: 0px; }
+  .data-table__sort-button { min-height: var(--smrt-control-target-min, 0px); min-width: var(--smrt-control-target-min, 0px); }
+  .data-table-container--narrow .data-table { table-layout: fixed; }
+  .data-table-container--narrow .data-table__cell { white-space: normal; overflow-wrap: anywhere; }
+  .data-table-container--narrow .data-table__sort-button { max-width: 100%; text-align: left; white-space: normal; overflow-wrap: anywhere; }
 </style>

package/dist/components/data/DataTable.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DataTable.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/data/DataTable.svelte.ts"],"names":[],"mappings":"AAGA;;;;;;;;;;GAUG;AACH,OAAO,EAAa,KAAK,OAAO,EAAiB,MAAM,QAAQ,CAAC;AAmChE,OAAO,KAAK,EACV,eAAe,EAEf,cAAc,EAGf,MAAM,YAAY,CAAC;AAIpB,UAAU,aAAa,CAAC,CAAC,CAAE,SAAQ,cAAc,CAAC,CAAC,CAAC;IAClD,+DAA+D;IAC/D,IAAI,CAAC,EAAE,OAAO,CACZ;QAAC;YAAE,MAAM,EAAE,eAAe,CAAC,CAAC,CAAC,CAAC;YAAC,GAAG,EAAE,CAAC,CAAC;YAAC,KAAK,EAAE,OAAO,CAAC;YAAC,KAAK,EAAE,MAAM,CAAA;SAAE;KAAC,CACxE,CAAC;CACH;AAYC,iBAAS,QAAQ,CAAC,CAAC;WAwmDQ,aAAa,CAAC,CAAC,CAAC;;;;;EAAgH;AAC7J,cAAM,iBAAiB,CAAC,CAAC;IACrB,KAAK,IAAI,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC;IAChD,MAAM,IAAI,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC;IAClD,KAAK,IAAI,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC;IAChD,QAAQ;IACR,OAAO;CACV;AAED,UAAU,qBAAqB;IAC3B,KAAK,CAAC,EAAE,OAAO,EAAE,OAAO,QAAQ,EAAE,2BAA2B,CAAC,UAAU,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,UAAU,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,EAAE,UAAU,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,EAAE,UAAU,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,UAAU,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAA;KAAE,GAAG,UAAU,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC;IAC5X,CAAC,CAAC,EAAE,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,UAAU,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,GAAG,EAAE,GAAG,UAAU,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC;IAC3H,YAAY,CAAC,EAAE,UAAU,CAAC,iBAAiB,CAAC,GAAG,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC;CACjE;AACD,QAAA,MAAM,SAAS,EAAE,qBAAmC,CAAC;AACnC,KAAK,SAAS,CAAC,CAAC,IAAI,YAAY,CAAC,OAAO,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC;AACxD,eAAe,SAAS,CAAC"}
+{"version":3,"file":"DataTable.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/data/DataTable.svelte.ts"],"names":[],"mappings":"AAGA;;;;;;;;;;GAUG;AACH,OAAO,EAAa,KAAK,OAAO,EAAiB,MAAM,QAAQ,CAAC;AAoChE,OAAO,KAAK,EACV,eAAe,EAEf,cAAc,EAGf,MAAM,YAAY,CAAC;AAIpB,UAAU,aAAa,CAAC,CAAC,CAAE,SAAQ,cAAc,CAAC,CAAC,CAAC;IAClD,+DAA+D;IAC/D,IAAI,CAAC,EAAE,OAAO,CACZ;QAAC;YAAE,MAAM,EAAE,eAAe,CAAC,CAAC,CAAC,CAAC;YAAC,GAAG,EAAE,CAAC,CAAC;YAAC,KAAK,EAAE,OAAO,CAAC;YAAC,KAAK,EAAE,MAAM,CAAA;SAAE;KAAC,CACxE,CAAC;CACH;AAYC,iBAAS,QAAQ,CAAC,CAAC;WA6oDQ,aAAa,CAAC,CAAC,CAAC;;;;;EAAgH;AAC7J,cAAM,iBAAiB,CAAC,CAAC;IACrB,KAAK,IAAI,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC;IAChD,MAAM,IAAI,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC;IAClD,KAAK,IAAI,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC;IAChD,QAAQ;IACR,OAAO;CACV;AAED,UAAU,qBAAqB;IAC3B,KAAK,CAAC,EAAE,OAAO,EAAE,OAAO,QAAQ,EAAE,2BAA2B,CAAC,UAAU,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,UAAU,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,EAAE,UAAU,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,EAAE,UAAU,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,UAAU,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAA;KAAE,GAAG,UAAU,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC;IAC5X,CAAC,CAAC,EAAE,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,UAAU,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,GAAG,EAAE,GAAG,UAAU,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC;IAC3H,YAAY,CAAC,EAAE,UAAU,CAAC,iBAAiB,CAAC,GAAG,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC;CACjE;AACD,QAAA,MAAM,SAAS,EAAE,qBAAmC,CAAC;AACnC,KAAK,SAAS,CAAC,CAAC,IAAI,YAAY,CAAC,OAAO,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC;AACxD,eAAe,SAAS,CAAC"}

package/dist/components/data/DataTableResponsive.d.ts

@@ -0,0 +1,4 @@
+import type { DataTableColumn } from './types.js';
+/** Choose narrow-mode columns without changing their declared display order. */
+export declare function responsiveColumns<T>(columns: readonly DataTableColumn<T>[], width: number, minimumWidth: number): DataTableColumn<T>[];
+//# sourceMappingURL=DataTableResponsive.d.ts.map

package/dist/components/data/DataTableResponsive.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DataTableResponsive.d.ts","sourceRoot":"","sources":["../../../src/components/data/DataTableResponsive.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,YAAY,CAAC;AAElD,gFAAgF;AAChF,wBAAgB,iBAAiB,CAAC,CAAC,EACjC,OAAO,EAAE,SAAS,eAAe,CAAC,CAAC,CAAC,EAAE,EACtC,KAAK,EAAE,MAAM,EACb,YAAY,EAAE,MAAM,GACnB,eAAe,CAAC,CAAC,CAAC,EAAE,CAuBtB"}

package/dist/components/data/DataTableResponsive.js

@@ -0,0 +1,22 @@
+/** Choose narrow-mode columns without changing their declared display order. */
+export function responsiveColumns(columns, width, minimumWidth) {
+    const target = Number.isFinite(minimumWidth) && minimumWidth > 0 ? minimumWidth : 160;
+    const budget = Math.max(1, Math.floor(Math.max(0, width) / target));
+    const retained = new Set(columns
+        .filter((column) => column.responsive?.keepVisible)
+        .map((column) => column.id));
+    const ranked = columns
+        .map((column, index) => ({ column, index }))
+        .sort((a, b) => {
+        const priority = (column) => Number.isFinite(column.responsive?.priority)
+            ? (column.responsive?.priority ?? 0)
+            : 0;
+        return priority(b.column) - priority(a.column) || a.index - b.index;
+    });
+    for (const { column } of ranked) {
+        if (retained.size >= budget)
+            break;
+        retained.add(column.id);
+    }
+    return columns.filter((column) => retained.has(column.id));
+}