@happyvertical/smrt-ui 0.51.38 → 0.52.0

package/dist/components/data/DataTable.svelte

@@ -77,6 +77,7 @@ let {
   sortable = false,
   sort = $bindable({ columnId: null, direction: null }),
   onSortChange,
+  sortClearable = true,
   manualSorting = false,
   filterFn,
   page = $bindable(1),
@@ -105,6 +106,7 @@ let {
   striped = false,
   hoverable = true,
   stickyHeader = false,
+  phoneLayout = 'scroll',
   caption,
   dense = false,
   cell,
@@ -648,6 +650,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 +667,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 });
@@ -1173,6 +1191,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,
 );
@@ -1392,6 +1416,7 @@ $effect(() => {
   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 +1436,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 +1453,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 +1476,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 +1491,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}
@@ -1557,10 +1582,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 +1600,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 +1612,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 +1628,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 +1639,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 +1656,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 +1676,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}
@@ -1677,26 +1703,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,13 +1730,13 @@ $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'}
@@ -1731,8 +1757,9 @@ $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}
@@ -1756,10 +1783,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,13 +1794,13 @@ $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'}
@@ -1794,8 +1821,9 @@ $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}
@@ -1817,10 +1845,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,6 +2237,56 @@ $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;

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;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"}

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/ListSortSelect.svelte

@@ -0,0 +1,121 @@
+<!--
+  ListSortSelect — a "Sort by" picker for lists without column headers
+  (card lists, and tables that turn into cards on phones).
+
+  One option per column and direction, in plain words: dates read
+  "newest first / oldest first", numbers "highest first / lowest first",
+  text "A–Z / Z–A". Calls `onChange` with the chosen sort; server-sorted lists
+  navigate to `listSortHref(...)` there.
+-->
+<script lang="ts">
+import type {
+  ListSort,
+  ListSortDirection,
+  ListSortSelectColumn,
+} from './list-sort.js';
+import type { ListSortState } from './list-sort-state.svelte.js';
+
+interface Props {
+  /** Sortable columns; each gives two options, one per direction. */
+  columns: readonly ListSortSelectColumn[];
+  /** The list's sort state; supplies `sort` and `onChange`. */
+  list?: ListSortState;
+  /** Current sort of the list, when `list` is not given. */
+  sort?: ListSort;
+  /** Called with the chosen sort, when `list` is not given. */
+  onChange?: (sort: ListSort) => void;
+  /** Visible label for the picker (default "Sort by"). */
+  label?: string;
+  /** Id of the select element, tying the label to it. */
+  id?: string;
+  /** Extra class names. */
+  class?: string;
+}
+
+let {
+  columns,
+  list,
+  sort: sortProp,
+  onChange: onChangeProp,
+  label = 'Sort by',
+  id = `list-sort-${Math.random().toString(36).slice(2, 9)}`,
+  class: className = '',
+}: Props = $props();
+
+function directionWords(
+  kind: ListSortSelectColumn['kind'],
+  direction: ListSortDirection,
+): string {
+  if (kind === 'date')
+    return direction === 'desc' ? 'newest first' : 'oldest first';
+  if (kind === 'number')
+    return direction === 'desc' ? 'highest first' : 'lowest first';
+  return direction === 'asc' ? 'A–Z' : 'Z–A';
+}
+
+const sort = $derived<ListSort>(
+  list?.sort ??
+    sortProp ?? { columnId: columns[0]?.id ?? '', direction: 'desc' },
+);
+const onChange = (next: ListSort) => {
+  if (list) void list.set(next);
+  else onChangeProp?.(next);
+};
+
+const options = $derived(
+  columns.flatMap((column) => {
+    const order: ListSortDirection[] =
+      column.kind === 'date' || column.kind === 'number'
+        ? ['desc', 'asc']
+        : ['asc', 'desc'];
+    return order.map((direction) => ({
+      value: `${column.id}:${direction}`,
+      label: `${column.label}, ${directionWords(column.kind, direction)}`,
+    }));
+  }),
+);
+
+function handleChange(event: Event) {
+  const value = (event.currentTarget as HTMLSelectElement).value;
+  const separator = value.lastIndexOf(':');
+  const direction = value.slice(separator + 1);
+  if (direction !== 'asc' && direction !== 'desc') return;
+  onChange({ columnId: value.slice(0, separator), direction });
+}
+</script>
+
+<div class={`list-sort-select ${className}`}>
+  <label class="list-sort-select__label" for={id}>{label}</label>
+  <select
+    {id}
+    class="list-sort-select__control"
+    value={`${sort.columnId}:${sort.direction}`}
+    onchange={handleChange}
+  >
+    {#each options as option (option.value)}
+      <option value={option.value}>{option.label}</option>
+    {/each}
+  </select>
+</div>
+
+<style>
+  .list-sort-select {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+  .list-sort-select__label {
+    font-size: 0.875rem;
+    color: var(--color-text-secondary, inherit);
+    white-space: nowrap;
+  }
+  .list-sort-select__control {
+    min-height: 2.75rem;
+    padding: 0.25rem 0.5rem;
+    border: 1px solid var(--color-border, currentColor);
+    border-radius: var(--radius-md, 0.375rem);
+    background: var(--color-surface, transparent);
+    color: inherit;
+    font: inherit;
+  }
+</style>

package/dist/components/data/ListSortSelect.svelte.d.ts

@@ -0,0 +1,22 @@
+import type { ListSort, ListSortSelectColumn } from './list-sort.js';
+import type { ListSortState } from './list-sort-state.svelte.js';
+interface Props {
+    /** Sortable columns; each gives two options, one per direction. */
+    columns: readonly ListSortSelectColumn[];
+    /** The list's sort state; supplies `sort` and `onChange`. */
+    list?: ListSortState;
+    /** Current sort of the list, when `list` is not given. */
+    sort?: ListSort;
+    /** Called with the chosen sort, when `list` is not given. */
+    onChange?: (sort: ListSort) => void;
+    /** Visible label for the picker (default "Sort by"). */
+    label?: string;
+    /** Id of the select element, tying the label to it. */
+    id?: string;
+    /** Extra class names. */
+    class?: string;
+}
+declare const ListSortSelect: import("svelte").Component<Props, {}, "">;
+type ListSortSelect = ReturnType<typeof ListSortSelect>;
+export default ListSortSelect;
+//# sourceMappingURL=ListSortSelect.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ListSortSelect.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/data/ListSortSelect.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EACV,QAAQ,EAER,oBAAoB,EACrB,MAAM,gBAAgB,CAAC;AACxB,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,6BAA6B,CAAC;AAGjE,UAAU,KAAK;IACb,mEAAmE;IACnE,OAAO,EAAE,SAAS,oBAAoB,EAAE,CAAC;IACzC,6DAA6D;IAC7D,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,0DAA0D;IAC1D,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,6DAA6D;IAC7D,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,QAAQ,KAAK,IAAI,CAAC;IACpC,wDAAwD;IACxD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,uDAAuD;IACvD,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,yBAAyB;IACzB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAwED,QAAA,MAAM,cAAc,2CAAwC,CAAC;AAC7D,KAAK,cAAc,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AACxD,eAAe,cAAc,CAAC"}