@happyvertical/smrt-ui 0.51.39 → 0.53.0

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,
@@ -77,6 +78,7 @@ let {
   sortable = false,
   sort = $bindable({ columnId: null, direction: null }),
   onSortChange,
+  sortClearable = true,
   manualSorting = false,
   filterFn,
   page = $bindable(1),
@@ -102,9 +104,14 @@ let {
   empty,
   rowClass,
   size = 'md',
+  density,
+  responsiveMode = 'scroll',
+  responsiveBreakpoint = 800,
+  responsiveColumnMinWidth = 160,
   striped = false,
   hoverable = true,
   stickyHeader = false,
+  phoneLayout = 'scroll',
   caption,
   dense = false,
   cell,
@@ -648,6 +655,10 @@ function handleSort(column: DataTableColumn<T>, event: MouseEvent) {
     type: 'toggleSorting',
     columnId: column.id,
     multi: event.shiftKey,
+    ...(column.sortFirstDirection
+      ? { firstDirection: column.sortFirstDirection }
+      : {}),
+    ...(sortClearable ? {} : { clearable: false }),
   });
 }
 
@@ -661,10 +672,22 @@ function sortActionLabel(column: DataTableColumn<T>): string {
   const columnSort = tableState.sorting.find(
     (sort) => sort.columnId === column.id,
   );
-  if (!columnSort) {
+  const first = column.sortFirstDirection === 'desc' ? 'desc' : 'asc';
+  const next = !columnSort
+    ? first
+    : !sortClearable
+      ? columnSort.direction === 'asc'
+        ? 'desc'
+        : 'asc'
+      : columnSort.direction === first
+        ? first === 'asc'
+          ? 'desc'
+          : 'asc'
+        : null;
+  if (next === 'asc') {
     return t(M['ui.data_table.sort_ascending'], { column: column.label });
   }
-  if (columnSort.direction === 'asc') {
+  if (next === 'desc') {
     return t(M['ui.data_table.sort_descending'], { column: column.label });
   }
   return t(M['ui.data_table.clear_sort'], { column: column.label });
@@ -757,6 +780,7 @@ function updateOverflowState() {
   const container = tableContainer;
   if (!container) return;
 
+  containerWidth = container.clientWidth;
   const maxScrollLeft = Math.max(
     0,
     container.scrollWidth - container.clientWidth,
@@ -818,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'),
@@ -1173,6 +1218,12 @@ const errorMessage = $derived.by(() => {
   return message.trim() || t(M['ui.data_table.load_error']);
 });
 const hasRenderedRows = $derived(displayRows.length > 0);
+// Phone cards restyle table, rows and cells as blocks and grids, which drops
+// their table roles in WebKit. Explicit roles keep the table, its column
+// headers (visually hidden, still in the accessibility tree) and every cell
+// announced as such.
+const cardsRole = (role: string) =>
+  phoneLayout === 'cards' ? role : undefined;
 const isInitialLoading = $derived(
   (loading || refreshing) && !hasRenderedRows && !errorMessage,
 );
@@ -1198,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`;
 }
 
@@ -1366,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);
@@ -1378,6 +1438,7 @@ $effect(() => {
 
   return () => {
     resizeObserver?.disconnect();
+    if (resizeFrame !== undefined) cancelAnimationFrame(resizeFrame);
     window.removeEventListener('resize', updateOverflowState);
   };
 });
@@ -1387,11 +1448,14 @@ $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}
   class:data-table-container--highlighted={surfaceHighlighted}
+  class:data-table-container--phone-cards={phoneLayout === 'cards'}
   style:height={virtualContainerHeight === undefined ? undefined : `${virtualContainerHeight}px`}
   tabindex={virtualizationWindow.enabled || hasHorizontalOverflow ? 0 : dataSurface ? -1 : undefined}
   role={virtualizationWindow.enabled || hasHorizontalOverflow ? 'region' : undefined}
@@ -1411,7 +1475,7 @@ $effect(() => {
     if (!event.defaultPrevented) handleOverflowKeydown(event);
   }}
 >
-  <table
+  <table role={cardsRole('table')}
     class="data-table {sizeClasses[size]}"
     class:data-table--striped={striped}
     class:data-table--virtualized={virtualizationWindow.enabled}
@@ -1428,16 +1492,16 @@ $effect(() => {
       <caption bind:this={tableCaption} class="data-table__caption">{caption}</caption>
     {/if}
 
-    <thead bind:this={tableHead} class="data-table__head">
+    <thead role={cardsRole('rowgroup')} bind:this={tableHead} class="data-table__head">
       {#each dataTableLayout.headerRows as headerRow, headerIndex (headerIndex)}
-        <tr class="data-table__row data-table__row--header">
+        <tr role={cardsRole('row')} class="data-table__row data-table__row--header">
           {#if headerIndex === 0 && expandedContent}
-            <th class="data-table__cell data-table__cell--expand" scope="col" rowspan={headerRowCount}>
+            <th role={cardsRole('columnheader')} class="data-table__cell data-table__cell--expand" scope="col" rowspan={headerRowCount}>
               <span class="sr-only"><Trans key={M['ui.data_table.expand']} /></span>
             </th>
           {/if}
           {#if headerIndex === 0 && selectable}
-            <th class="data-table__cell data-table__cell--checkbox" scope="col" rowspan={headerRowCount}>
+            <th role={cardsRole('columnheader')} class="data-table__cell data-table__cell--checkbox" scope="col" rowspan={headerRowCount}>
               <input
                 type="checkbox"
                 checked={allSelected}
@@ -1451,7 +1515,7 @@ $effect(() => {
 
           {#each headerRow as headerCell, cellIndex (`${headerIndex}:${cellIndex}`)}
             {#if headerCell.kind === 'group'}
-              <th
+              <th role={cardsRole('columnheader')}
                 class="data-table__cell data-table__cell--header data-table__cell--header-group"
                 class:data-table__cell--pinned-start={headerCell.pin === 'start'}
                 class:data-table__cell--pinned-end={headerCell.pin === 'end'}
@@ -1466,7 +1530,7 @@ $effect(() => {
             {:else}
               {@const resolvedColumn = headerCell.column}
               {@const column = resolvedColumn.column}
-              <th
+              <th role={cardsRole('columnheader')}
                 class="data-table__cell data-table__cell--header"
                 class:data-table__cell--sortable={usesAutomaticSortButton(column)}
                 class:data-table__cell--sorted={currentSort.columnId === column.id}
@@ -1478,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}
@@ -1535,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"
@@ -1557,10 +1621,10 @@ $effect(() => {
       {/each}
     </thead>
 
-    <tbody bind:this={tableBody} class="data-table__body">
+    <tbody role={cardsRole('rowgroup')} bind:this={tableBody} class="data-table__body">
       {#if errorMessage && !hasRenderedRows}
-        <tr class="data-table__row data-table__row--error">
-          <td
+        <tr role={cardsRole('row')} class="data-table__row data-table__row--error">
+          <td role={cardsRole('cell')}
             class="data-table__cell data-table__cell--error"
             colspan={columnCount}
           >
@@ -1575,8 +1639,8 @@ $effect(() => {
           </td>
         </tr>
       {:else if isInitialLoading}
-        <tr class="data-table__row data-table__row--loading">
-          <td
+        <tr role={cardsRole('row')} class="data-table__row data-table__row--loading">
+          <td role={cardsRole('cell')}
             class="data-table__cell data-table__cell--loading"
             colspan={columnCount}
           >
@@ -1587,8 +1651,8 @@ $effect(() => {
           </td>
         </tr>
       {:else if displayRows.length === 0}
-        <tr class="data-table__row data-table__row--empty">
-          <td
+        <tr role={cardsRole('row')} class="data-table__row data-table__row--empty">
+          <td role={cardsRole('cell')}
             class="data-table__cell data-table__cell--empty"
             colspan={columnCount}
           >
@@ -1603,8 +1667,8 @@ $effect(() => {
         </tr>
       {:else}
         {#if virtualizationWindow.topSpacerHeight > 0}
-          <tr class="data-table__virtual-spacer" aria-hidden="true">
-            <td colspan={columnCount} style:height={`${virtualizationWindow.topSpacerHeight}px`}></td>
+          <tr role={cardsRole('row')} class="data-table__virtual-spacer" aria-hidden="true">
+            <td role={cardsRole('cell')} colspan={columnCount} style:height={`${virtualizationWindow.topSpacerHeight}px`}></td>
           </tr>
         {/if}
         {#each renderedRows as entry, index (entry.rowId)}
@@ -1614,7 +1678,7 @@ $effect(() => {
           {@const isSelected = tableState.selection.scope === 'allMatching' || selectedIds.has(key)}
           {@const isExpanded = expandedIds.has(key)}
           {@const rowCanExpand = canExpand?.(row, displayIndex) ?? true}
-          <tr
+          <tr role={cardsRole('row')}
             class="data-table__row {rowClass?.(row, displayIndex) ?? ''}"
             class:data-table__row--selected={isSelected}
             class:data-table__row--striped={
@@ -1631,12 +1695,12 @@ $effect(() => {
             onkeydown={(event) => handleRowKeydown(event, row, displayIndex)}
           >
             {#if expandedContent}
-              <td class="data-table__cell data-table__cell--expand">
+              <td role={cardsRole('cell')} class="data-table__cell data-table__cell--expand">
                 {#if rowCanExpand}<button type="button" class="data-table__expand-button" aria-label={isExpanded ? t(M['ui.data_table.collapse_row'], { row: getRowLabel(row, displayIndex) }) : t(M['ui.data_table.expand_row'], { row: getRowLabel(row, displayIndex) })} aria-expanded={isExpanded} aria-controls={expansionContentId(key)} onclick={(event) => handleExpanded(key, event)}>{isExpanded ? '−' : '+'}</button>{/if}
               </td>
             {/if}
             {#if selectable}
-              <td class="data-table__cell data-table__cell--checkbox">
+              <td role={cardsRole('cell')} class="data-table__cell data-table__cell--checkbox">
                 <input
                   type="checkbox"
                   checked={isSelected}
@@ -1651,8 +1715,9 @@ $effect(() => {
             {#each visibleColumns as resolvedColumn (resolvedColumn.column.id)}
               {@const column = resolvedColumn.column}
               {@const value = getCellValue(row, column)}
-              <td
+              <td role={cardsRole('cell')}
                 class="data-table__cell {column.className ?? ''}"
+                data-label={phoneLayout === 'cards' ? column.label : undefined}
                 class:data-table__cell--pinned-start={resolvedColumn.pin === 'start'}
                 class:data-table__cell--pinned-end={resolvedColumn.pin === 'end'}
                 data-column-id={column.id}
@@ -1660,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}
@@ -1677,26 +1742,26 @@ $effect(() => {
             {/each}
           </tr>
           {#if expandedContent && isExpanded}
-            <tr id={expansionContentId(key)} class="data-table__row data-table__row--expanded">
-              <td class="data-table__cell data-table__cell--expanded" colspan={columnCount}>{@render expandedContent({ row, index: displayIndex })}</td>
+            <tr role={cardsRole('row')} id={expansionContentId(key)} class="data-table__row data-table__row--expanded">
+              <td role={cardsRole('cell')} class="data-table__cell data-table__cell--expanded" colspan={columnCount}>{@render expandedContent({ row, index: displayIndex })}</td>
             </tr>
           {/if}
         {/each}
         {#if virtualizationWindow.bottomSpacerHeight > 0}
-          <tr class="data-table__virtual-spacer" aria-hidden="true">
-            <td colspan={columnCount} style:height={`${virtualizationWindow.bottomSpacerHeight}px`}></td>
+          <tr role={cardsRole('row')} class="data-table__virtual-spacer" aria-hidden="true">
+            <td role={cardsRole('cell')} colspan={columnCount} style:height={`${virtualizationWindow.bottomSpacerHeight}px`}></td>
           </tr>
         {/if}
       {/if}
     </tbody>
     {#if dataBodyStructuralRows.length > 0}
-      <tbody
+      <tbody role={cardsRole('rowgroup')}
         bind:this={tableStructuralBody}
         class="data-table__body data-table__body--structural"
       >
         {#each dataBodyStructuralRows as structuralRow, structuralIndex (structuralRow.id)}
           {@const labelColumnId = structuralLabelColumnId(structuralRow)}
-          <tr
+          <tr role={cardsRole('row')}
             class="data-table__row data-table__row--structural"
             data-row-kind={structuralRow.kind}
             aria-label={structuralRowLabel(structuralRow)}
@@ -1704,21 +1769,21 @@ $effect(() => {
               ? virtualRowOffset + displayRows.length + headerRowCount + structuralIndex + 1
               : undefined}
           >
-            {#if expandedContent}<td class="data-table__cell data-table__cell--expand"></td>{/if}
-            {#if selectable}<td class="data-table__cell data-table__cell--checkbox"></td>{/if}
+            {#if expandedContent}<td role={cardsRole('cell')} class="data-table__cell data-table__cell--expand"></td>{/if}
+            {#if selectable}<td role={cardsRole('cell')} class="data-table__cell data-table__cell--checkbox"></td>{/if}
             {#each visibleColumns as resolvedColumn (resolvedColumn.column.id)}
               {@const column = resolvedColumn.column}
               {@const value = structuralCellValue(structuralRow, column)}
               {#if column.id === labelColumnId}
-                <th
+                <th role={cardsRole('rowheader')}
                   class="data-table__cell data-table__cell--structural-label {column.className ?? ''}"
                   class:data-table__cell--pinned-start={resolvedColumn.pin === 'start'}
                   class:data-table__cell--pinned-end={resolvedColumn.pin === 'end'}
                   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}
@@ -1731,14 +1796,15 @@ $effect(() => {
                   {/if}
                 </th>
               {:else}
-                <td
+                <td role={cardsRole('cell')}
                   class="data-table__cell {column.className ?? ''}"
+                  data-label={phoneLayout === 'cards' ? column.label : undefined}
                   class:data-table__cell--pinned-start={resolvedColumn.pin === 'start'}
                   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}
@@ -1756,10 +1822,10 @@ $effect(() => {
       </tbody>
     {/if}
     {#if footer || footerStructuralRows.length > 0}
-      <tfoot bind:this={tableFooter}>
+      <tfoot role={cardsRole('rowgroup')} bind:this={tableFooter}>
         {#each footerStructuralRows as structuralRow, structuralIndex (structuralRow.id)}
           {@const labelColumnId = structuralLabelColumnId(structuralRow)}
-          <tr
+          <tr role={cardsRole('row')}
             class="data-table__row data-table__row--structural data-table__row--footer"
             data-row-kind={structuralRow.kind}
             aria-label={structuralRowLabel(structuralRow)}
@@ -1767,21 +1833,21 @@ $effect(() => {
               ? virtualRowCount + headerRowCount + dataBodyStructuralRows.length + structuralIndex + 1
               : undefined}
           >
-            {#if expandedContent}<td class="data-table__cell data-table__cell--expand"></td>{/if}
-            {#if selectable}<td class="data-table__cell data-table__cell--checkbox"></td>{/if}
+            {#if expandedContent}<td role={cardsRole('cell')} class="data-table__cell data-table__cell--expand"></td>{/if}
+            {#if selectable}<td role={cardsRole('cell')} class="data-table__cell data-table__cell--checkbox"></td>{/if}
             {#each visibleColumns as resolvedColumn (resolvedColumn.column.id)}
               {@const column = resolvedColumn.column}
               {@const value = structuralCellValue(structuralRow, column)}
               {#if column.id === labelColumnId}
-                <th
+                <th role={cardsRole('rowheader')}
                   class="data-table__cell data-table__cell--structural-label {column.className ?? ''}"
                   class:data-table__cell--pinned-start={resolvedColumn.pin === 'start'}
                   class:data-table__cell--pinned-end={resolvedColumn.pin === 'end'}
                   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}
@@ -1794,14 +1860,15 @@ $effect(() => {
                   {/if}
                 </th>
               {:else}
-                <td
+                <td role={cardsRole('cell')}
                   class="data-table__cell {column.className ?? ''}"
+                  data-label={phoneLayout === 'cards' ? column.label : undefined}
                   class:data-table__cell--pinned-start={resolvedColumn.pin === 'start'}
                   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}
@@ -1817,10 +1884,10 @@ $effect(() => {
           </tr>
         {/each}
         {#if footer}
-          <tr aria-rowindex={virtualizationWindow.enabled
+          <tr role={cardsRole('row')} aria-rowindex={virtualizationWindow.enabled
             ? virtualRowCount + headerRowCount + structuralRowCount
             : undefined}>
-            <td class="data-table__cell data-table__footer" colspan={columnCount}>
+            <td role={cardsRole('cell')} class="data-table__cell data-table__footer" colspan={columnCount}>
               {@render footer({ rows: displayRows.map(({ row }) => row) })}
             </td>
           </tr>
@@ -2209,9 +2276,65 @@ $effect(() => {
     opacity: 0.7;
   }
 
+  /* Phones with phoneLayout="cards": one block of stacked cells per row. Each cell shows its
+     column's name (data-label) above its value; the header row stays in the accessibility tree,
+     visually hidden, and the explicit roles keep the table structure announced. */
+  @media (max-width: 48rem) {
+    /* A virtualized body keeps its own scroller. */
+    .data-table-container--phone-cards:not(.data-table-container--virtualized) {
+      overflow: visible;
+    }
+    .data-table-container--phone-cards .data-table,
+    .data-table-container--phone-cards .data-table__body {
+      display: block;
+      width: 100%;
+    }
+    .data-table-container--phone-cards .data-table__head {
+      position: absolute;
+      width: 1px;
+      height: 1px;
+      overflow: hidden;
+      clip: rect(0 0 0 0);
+      clip-path: inset(50%);
+      white-space: nowrap;
+    }
+    .data-table-container--phone-cards .data-table__overflow-cue {
+      display: none;
+    }
+    .data-table-container--phone-cards .data-table__cell[data-label]:not([data-label=''])::before {
+      content: attr(data-label);
+      /* The header already names the cell for assistive technology. */
+      content: attr(data-label) / '';
+      display: block;
+      font-size: var(--smrt-typography-label-small-size, 0.75rem);
+      font-weight: 600;
+      color: var(--smrt-color-on-surface-variant, #4b5563);
+    }
+    .data-table-container--phone-cards .data-table__row {
+      display: grid;
+      gap: var(--smrt-spacing-1, 0.35rem);
+      padding: var(--smrt-spacing-3, 0.85rem) var(--smrt-spacing-4, 1rem);
+      border-bottom: 1px solid var(--smrt-color-outline-variant, #e5e7eb);
+    }
+    .data-table-container--phone-cards .data-table__cell {
+      display: block;
+      padding: 0;
+      border: 0;
+    }
+    .data-table-container--phone-cards .data-table__cell:empty {
+      display: none;
+    }
+  }
+
   @media (prefers-reduced-motion: reduce) {
     .data-table__spinner {
       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;WAglDQ,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/DataTableController.d.ts

@@ -114,6 +114,10 @@ export type DataTableCommand = {
     type: 'toggleSorting';
     columnId: string;
     multi?: boolean;
+    /** Direction when the column is not sorted yet (default `asc`). */
+    firstDirection?: DataTableSortRule['direction'];
+    /** `false` toggles asc ⇄ desc instead of clearing on the third activation. */
+    clearable?: boolean;
 } | {
     type: 'setPage';
     page: number;

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

@@ -1 +1 @@
-{"version":3,"file":"DataTableController.d.ts","sourceRoot":"","sources":["../../../src/components/data/DataTableController.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"DataTableController.d.ts","sourceRoot":"","sources":["../../../src/components/data/DataTableController.ts"],"names":[],"mappings":"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"}

package/dist/components/data/DataTableController.js

@@ -403,11 +403,18 @@ export function transitionDataTableState(state, command) {
             const columnId = assertColumnId(command.columnId, 'sort column id');
             const index = current.sorting.findIndex((rule) => rule.columnId === columnId);
             const previous = index >= 0 ? current.sorting[index] : undefined;
+            const firstDirection = command.firstDirection === 'desc' ? 'desc' : 'asc';
+            const lastDirection = firstDirection === 'asc' ? 'desc' : 'asc';
             const toggled = !previous
-                ? { columnId, direction: 'asc' }
-                : previous.direction === 'asc'
-                    ? { columnId, direction: 'desc' }
-                    : null;
+                ? { columnId, direction: firstDirection }
+                : command.clearable === false
+                    ? {
+                        columnId,
+                        direction: previous.direction === 'asc' ? 'desc' : 'asc',
+                    }
+                    : previous.direction === firstDirection
+                        ? { columnId, direction: lastDirection }
+                        : null;
             const sorting = command.multi
                 ? previous
                     ? toggled

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));
+}