@crewlethq/ui 0.68.0 → 0.70.0

package/dist/ColorSwatch/index.js

@@ -1,9 +1,9 @@
-export { ColorSwatch } from '../chunk-2A6DL3K5.js';
-import '../chunk-IYG4ETAQ.js';
+export { ColorSwatch } from '../chunk-6FBPFG3C.js';
+import '../chunk-T5GBTXNC.js';
 import '../chunk-STJ7QBC3.js';
 import '../chunk-DTIW4CHZ.js';
 import '../chunk-7W3LYIOC.js';
-import '../chunk-7QTPJDRF.js';
+import '../chunk-DGXZ635L.js';
 import '../chunk-XSPCITPN.js';
 import '../chunk-UAUP6XGK.js';
 import '../chunk-UT6CW3C7.js';

package/dist/Combobox/index.js

@@ -1,12 +1,12 @@
-export { Combobox } from '../chunk-IQQSMK4E.js';
+export { Combobox } from '../chunk-ZUBFVK6B.js';
 import '../chunk-7KHM2FZH.js';
-import '../chunk-DCQ2VTBB.js';
+import '../chunk-ETSF7SU6.js';
 import '../chunk-PGCLHYVP.js';
 import '../chunk-PQADV6P6.js';
 import '../chunk-2G355KDJ.js';
 import '../chunk-2YTOOH3A.js';
 import '../chunk-H5XTJ7GJ.js';
-import '../chunk-NUZHC6MM.js';
 import '../chunk-UAUP6XGK.js';
+import '../chunk-NUZHC6MM.js';
 import '../chunk-UT6CW3C7.js';
 import '../chunk-ODEQTPFM.js';

package/dist/CommandPalette/index.js

@@ -1,18 +1,18 @@
-export { CommandPalette } from '../chunk-XDVQ72BE.js';
-import '../chunk-I24FI46B.js';
+export { CommandPalette } from '../chunk-NXNLAZPK.js';
+import '../chunk-C667GCU7.js';
 import '../chunk-7KHM2FZH.js';
 import '../chunk-ANTAQAR4.js';
-import '../chunk-DCQ2VTBB.js';
+import '../chunk-ETSF7SU6.js';
 import '../chunk-PGCLHYVP.js';
 import '../chunk-MLDTLZAO.js';
 import '../chunk-PQADV6P6.js';
 import '../chunk-2G355KDJ.js';
-import '../chunk-7QTPJDRF.js';
+import '../chunk-DGXZ635L.js';
 import '../chunk-OMV5W53A.js';
 import '../chunk-2YTOOH3A.js';
 import '../chunk-XSPCITPN.js';
 import '../chunk-H5XTJ7GJ.js';
-import '../chunk-NUZHC6MM.js';
 import '../chunk-UAUP6XGK.js';
+import '../chunk-NUZHC6MM.js';
 import '../chunk-UT6CW3C7.js';
 import '../chunk-ODEQTPFM.js';

package/dist/CommentThread/index.js

@@ -1,22 +1,22 @@
-export { COMMENT_THREAD_LABELS, CommentThread } from '../chunk-HHZ5ZXYO.js';
-import '../chunk-BXCL6P5Z.js';
+export { COMMENT_THREAD_LABELS, CommentThread } from '../chunk-YGWIWDXE.js';
 import '../chunk-CI3VPIJN.js';
 import '../chunk-EJNJMHQG.js';
 import '../chunk-RE3FBGQQ.js';
 import '../chunk-BKP6XCAJ.js';
 import '../chunk-PZKHBB7D.js';
-import '../chunk-OXEWUAND.js';
+import '../chunk-BXCL6P5Z.js';
+import '../chunk-5OFRDX66.js';
 import '../chunk-ANTAQAR4.js';
-import '../chunk-DCQ2VTBB.js';
+import '../chunk-ETSF7SU6.js';
 import '../chunk-PGCLHYVP.js';
 import '../chunk-MLDTLZAO.js';
 import '../chunk-PQADV6P6.js';
 import '../chunk-2G355KDJ.js';
-import '../chunk-7QTPJDRF.js';
+import '../chunk-DGXZ635L.js';
 import '../chunk-OMV5W53A.js';
 import '../chunk-XSPCITPN.js';
 import '../chunk-H5XTJ7GJ.js';
-import '../chunk-NUZHC6MM.js';
 import '../chunk-UAUP6XGK.js';
+import '../chunk-NUZHC6MM.js';
 import '../chunk-UT6CW3C7.js';
 import '../chunk-ODEQTPFM.js';

package/dist/Composer/index.js

@@ -1,12 +1,12 @@
-export { COMPOSER_COUNTER_AT, Composer } from '../chunk-OXEWUAND.js';
+export { COMPOSER_COUNTER_AT, Composer } from '../chunk-5OFRDX66.js';
 import '../chunk-ANTAQAR4.js';
-import '../chunk-DCQ2VTBB.js';
+import '../chunk-ETSF7SU6.js';
 import '../chunk-PGCLHYVP.js';
 import '../chunk-PQADV6P6.js';
 import '../chunk-2G355KDJ.js';
 import '../chunk-OMV5W53A.js';
 import '../chunk-H5XTJ7GJ.js';
-import '../chunk-NUZHC6MM.js';
 import '../chunk-UAUP6XGK.js';
+import '../chunk-NUZHC6MM.js';
 import '../chunk-UT6CW3C7.js';
 import '../chunk-ODEQTPFM.js';

package/dist/ConfirmField/index.js

@@ -1,11 +1,11 @@
-export { ConfirmField, confirmMatches } from '../chunk-CFXDWGQI.js';
+export { ConfirmField, confirmMatches } from '../chunk-JVII5264.js';
 import '../chunk-PLL7ZJHY.js';
-import '../chunk-DCQ2VTBB.js';
+import '../chunk-ETSF7SU6.js';
 import '../chunk-PGCLHYVP.js';
 import '../chunk-PQADV6P6.js';
 import '../chunk-2G355KDJ.js';
 import '../chunk-H5XTJ7GJ.js';
-import '../chunk-NUZHC6MM.js';
 import '../chunk-UAUP6XGK.js';
+import '../chunk-NUZHC6MM.js';
 import '../chunk-UT6CW3C7.js';
 import '../chunk-ODEQTPFM.js';

package/dist/ConflictNote/index.js

@@ -1,5 +1,5 @@
-export { CONFLICT_NOTE_LABELS, ConflictNote } from '../chunk-SUJO3AHN.js';
-import '../chunk-7QTPJDRF.js';
+export { CONFLICT_NOTE_LABELS, ConflictNote } from '../chunk-B3PK2LND.js';
+import '../chunk-DGXZ635L.js';
 import '../chunk-XSPCITPN.js';
 import '../chunk-UT6CW3C7.js';
 import '../chunk-ODEQTPFM.js';

package/dist/ContrastHelp/index.js

@@ -6,7 +6,7 @@ import '../chunk-I5OIKDX2.js';
 import '../chunk-WIATRXEJ.js';
 import '../chunk-OMV5W53A.js';
 import '../chunk-H5XTJ7GJ.js';
-import '../chunk-NUZHC6MM.js';
 import '../chunk-UAUP6XGK.js';
+import '../chunk-NUZHC6MM.js';
 import '../chunk-UT6CW3C7.js';
 import '../chunk-ODEQTPFM.js';

package/dist/Copyable/index.js

@@ -1,7 +1,7 @@
-export { CopyButton, Copyable } from '../chunk-IYG4ETAQ.js';
+export { CopyButton, Copyable } from '../chunk-T5GBTXNC.js';
 import '../chunk-STJ7QBC3.js';
 import '../chunk-DTIW4CHZ.js';
-import '../chunk-7QTPJDRF.js';
+import '../chunk-DGXZ635L.js';
 import '../chunk-XSPCITPN.js';
 import '../chunk-UAUP6XGK.js';
 import '../chunk-UT6CW3C7.js';

package/dist/DataGrid/DataGrid.d.ts

@@ -5,6 +5,10 @@ import { type MouseEvent as ReactMouseEvent, type KeyboardEvent as ReactKeyboard
  * Each carries the modifier keys a handler reads to open in a new tab.
  */
 export type DataGridActivationEvent = ReactMouseEvent | ReactKeyboardEvent | KeyboardEvent;
+/** The edge a column's head and values share. */
+export type DataGridAlign = 'left' | 'right' | 'center';
+/** The track an `icon` column is drawn in: the target size and the cell's inset either side. */
+export declare const DATA_GRID_ICON_TRACK = "calc(var(--size-target-min) + var(--spacing-3) * 2)";
 /** One column of a [DataGrid]. */
 export interface DataGridColumn<T> {
     key: string;
@@ -12,7 +16,23 @@ export interface DataGridColumn<T> {
     cell: (row: T) => ReactNode;
     /** The value sorted on. Omit to make the column unsortable. */
     sortValue?: ((row: T) => string | number | null | undefined) | undefined;
-    align?: 'left' | 'right' | undefined;
+    /**
+     * Which edge the column's values and its head share: `left` (the default)
+     * for words, `right` for figures, times and dates (their digits are
+     * tabular, so a column of them reads down one edge), `center` for a column
+     * of one mark per row. The head and every cell take the same edge and the
+     * same inset, so a head never stands off the values it names.
+     */
+    align?: DataGridAlign | undefined;
+    /**
+     * A column of ONE MARK per row (a glyph, a face, a priority): a fixed track
+     * (`DATA_GRID_ICON_TRACK`, the target size and the cell's inset either
+     * side), its head and every cell centred. A run of such columns then reads
+     * as aligned columns rather than marks scattered at their content's width.
+     * Name it with `label`, which the head says to assistive technology and
+     * shows on hover.
+     */
+    icon?: boolean | undefined;
     /**
      * The column's name where `header` cannot carry one: a glyph head, or none
      * at all. Drawn by the card layout a grid takes on a phone, where every value
@@ -156,7 +176,10 @@ export interface DataGridLabels {
 export interface DataGridHandle {
     /** Moves the cursor row by `by` rows, clamped, and scrolls it into view. */
     step: (by: number) => void;
-    /** Activates the cursor row, as a click on it would. False when there is none. */
+    /**
+     * Activates the cursor row, as a click on it would: its `onRowActivate`, or
+     * where it has none, its `rowHref` link. False when there is neither.
+     */
     activate: (event: ReactKeyboardEvent | KeyboardEvent) => boolean;
     /** How many rows the grid draws, its bands' rows included. */
     rowCount: () => number;
@@ -189,7 +212,16 @@ export interface DataGridProps<T> {
      * Controlled, so an application keeps it where it keeps state (an address).
      */
     sort?: string | undefined;
-    /** A sortable head pressed: ascending, then descending, then unsorted. */
+    /**
+     * The order the rows take while `sort` is empty (`key` or `-key`), drawn on
+     * its column's head as the sort in force. Empty for the rows' own order.
+     */
+    defaultSort?: string | undefined;
+    /**
+     * A sortable head pressed: ascending, then descending, then back to the
+     * default. Called with `''` for the default, never with `defaultSort`
+     * itself, so an address holds the reader's choice and nothing else.
+     */
     onSortChange?: ((sort: string) => void) | undefined;
     /** The rows arrive ordered by their source (a paged answer ordered over the whole set). */
     serverSorted?: boolean | undefined;
@@ -235,6 +267,20 @@ export declare function parseGridSort(raw: string): {
     key: string;
     desc: boolean;
 } | null;
+/**
+ * The sort a press on a column's head asks for: ascending, then descending,
+ * then back to the default. PURE, so the cycle is held without a render.
+ *
+ * Against the EFFECTIVE sort (the reader's, else the default), because a head
+ * that reads "descending" must take its next press as one more step from
+ * descending, whoever chose it. Two rules keep every press a visible change:
+ *
+ * - a column already at its DEFAULT descending turns ascending, where the
+ *   cycle's "back to the default" would have changed nothing;
+ * - a step that lands on the default is written as `''`, so the address holds
+ *   only what the reader chose and the default can change under it.
+ */
+export declare function nextGridSort(column: string, sort: string, defaultSort?: string): string;
 /** What the fit has decided for one set of columns, at one width. */
 export interface GridFit {
     /** The column set it was decided for. */
@@ -323,4 +369,4 @@ export declare function squeezed<T>(wrap: HTMLElement, visible: readonly DataGri
  * lets its head stick against the page's scroller; an application whose
  * scroller carries a sticky bar sets `--crewlet-data-grid-sticky-top`.
  */
-export declare function DataGrid<T>({ rows, bands, columns, rowKey, onRowActivate, rowHref, isSelected, selection, isFailed, sort: sortRaw, onSortChange, serverSorted, cols: colsRaw, onColsChange, empty, footer, onLoadMore, loadedNote, phoneRows, flush, handleRef, onPointerDown, labels, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledby, className, }: DataGridProps<T>): import("react").JSX.Element;
+export declare function DataGrid<T>({ rows, bands, columns, rowKey, onRowActivate, rowHref, isSelected, selection, isFailed, sort: sortRaw, defaultSort, onSortChange, serverSorted, cols: colsRaw, onColsChange, empty, footer, onLoadMore, loadedNote, phoneRows, flush, handleRef, onPointerDown, labels, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledby, className, }: DataGridProps<T>): import("react").JSX.Element;

package/dist/DataGrid/index.d.ts

@@ -1,5 +1,5 @@
 import './DataGrid.css';
-export { ChooserList, ColumnChooser, DataGrid, columnChoicesOf, fitGridColumns, parseGridSort } from './DataGrid.js';
+export { ChooserList, ColumnChooser, DATA_GRID_ICON_TRACK, DataGrid, columnChoicesOf, fitGridColumns, nextGridSort, parseGridSort, } from './DataGrid.js';
 export { countDataGridRows, useAnyDataGridDriving, useDataGridDriving } from './driving.js';
 export type { DataGridDriving } from './driving.js';
-export type { ColumnChoice, ChooserItem, ChooserListProps, ColumnChooserProps, DataGridActivationEvent, DataGridBand, DataGridColumn, DataGridHandle, DataGridLabels, DataGridProps, GridFit, } from './DataGrid.js';
+export type { ColumnChoice, ChooserItem, ChooserListProps, ColumnChooserProps, DataGridActivationEvent, DataGridAlign, DataGridBand, DataGridColumn, DataGridHandle, DataGridLabels, DataGridProps, GridFit, } from './DataGrid.js';

package/dist/DataGrid/index.js

@@ -1,15 +1,15 @@
-export { ChooserList, ColumnChooser, DataGrid, columnChoicesOf, countDataGridRows, fitGridColumns, parseGridSort, useAnyDataGridDriving, useDataGridDriving } from '../chunk-CLJHQHPS.js';
-import '../chunk-EAR2F5OA.js';
+export { ChooserList, ColumnChooser, DATA_GRID_ICON_TRACK, DataGrid, columnChoicesOf, countDataGridRows, fitGridColumns, nextGridSort, parseGridSort, useAnyDataGridDriving, useDataGridDriving } from '../chunk-FURJVZCT.js';
+import '../chunk-PBCNINMB.js';
 import '../chunk-PPUR46MK.js';
-import '../chunk-DCQ2VTBB.js';
+import '../chunk-ETSF7SU6.js';
 import '../chunk-PGCLHYVP.js';
 import '../chunk-PQADV6P6.js';
 import '../chunk-2G355KDJ.js';
 import '../chunk-RTPQDNW3.js';
-import '../chunk-7QTPJDRF.js';
+import '../chunk-DGXZ635L.js';
 import '../chunk-XSPCITPN.js';
 import '../chunk-H5XTJ7GJ.js';
-import '../chunk-NUZHC6MM.js';
 import '../chunk-UAUP6XGK.js';
+import '../chunk-NUZHC6MM.js';
 import '../chunk-UT6CW3C7.js';
 import '../chunk-ODEQTPFM.js';

package/dist/{DataGrid-NHIN2I42.css → DataGrid-Q26F2V5Q.css}

@@ -120,6 +120,18 @@
   --crewlet-data-grid-cell-start: var(--spacing-3);
 }
 
+/*
+ * AND AN ICON COLUMN, whose track (`DATA_GRID_ICON_TRACK`) is the target size
+ * and the cells' own step either side. At the grid's edge (a card's 16px) the
+ * edge inset left 20px for a 24px mark; the column keeps the cells' step on
+ * both sides wherever it stands, as the selection column does.
+ */
+.crewlet-data-grid__th.crewlet-data-grid__th--icon,
+.crewlet-data-grid__cell.crewlet-data-grid__cell--icon {
+  --crewlet-data-grid-cell-start: var(--spacing-3);
+  --crewlet-data-grid-cell-end: var(--spacing-3);
+}
+
 /*
  * THE LIST TABLE'S HEAD: the micro-label register every table takes, 11/500
  * uppercase. A sortable head is a button with its chrome reset; the reset
@@ -127,6 +139,7 @@
  */
 .crewlet-data-grid__th {
   display: flex;
+  align-self: stretch;
   align-items: center;
   gap: var(--spacing-1);
   padding-block: var(--spacing-2);
@@ -173,22 +186,91 @@
   margin-inline: calc(-1 * var(--crewlet-data-grid-cell-start)) calc(-1 * var(--crewlet-data-grid-cell-end));
   padding-block: var(--spacing-2);
   padding-inline: var(--crewlet-data-grid-cell-start) var(--crewlet-data-grid-cell-end);
+  /* THE HEAD'S WHOLE HEIGHT, so a press anywhere in the cell sorts. */
+  align-self: stretch;
   cursor: pointer;
 }
 
+/*
+ * ONE EDGE PER COLUMN, shared by its head and its values. `align` gives the
+ * head and every cell the same modifier, and both take the same inline inset
+ * (`--crewlet-data-grid-cell-start` and `-end`), so the word in the head and
+ * the values under it start (or end, or centre) on one line. A head that
+ * sorts is a button filling its head, and takes the same edge.
+ */
 .crewlet-data-grid__th--right .crewlet-data-grid__sort {
   justify-content: flex-end;
 }
 
+.crewlet-data-grid__th--center .crewlet-data-grid__sort {
+  justify-content: center;
+}
+
 .crewlet-data-grid__th:not(.crewlet-data-grid__th--plain):hover,
 .crewlet-data-grid__th--sorted {
   color: var(--color-text-primary);
 }
 
+/*
+ * A SORTABLE HEAD SAYS SO UNDER THE POINTER: the row's own hover overlay over
+ * the whole cell, the way a row says it opens, so the target is the head and
+ * not the word in it.
+ */
+.crewlet-data-grid__th:not(.crewlet-data-grid__th--plain):hover {
+  background: var(--color-surface-hover);
+}
+
+/*
+ * THE SORT ARROW. Its box is always laid out, so a head never changes width
+ * when the arrow appears and the fit measured at rest still holds under the
+ * pointer. The two-way arrow of a head that is not the sort shows only on
+ * hover and focus, in the head's own ink; the sorted head's arrow is always
+ * shown, at full ink, and names the direction.
+ */
+.crewlet-data-grid__sort-mark {
+  display: inline-flex;
+  flex: none;
+  inline-size: var(--spacing-3);
+  color: inherit;
+  transition: opacity var(--motion-duration-fast) var(--motion-easing-default);
+}
+
+.crewlet-data-grid__th:not(.crewlet-data-grid__th--sorted) .crewlet-data-grid__sort-mark {
+  opacity: 0;
+}
+
+/* BEFORE THE WORD IN A RIGHT-ALIGNED COLUMN, so the word stays on the column's
+   right edge over its figures, arrow or not. */
+.crewlet-data-grid__th--right .crewlet-data-grid__sort-mark {
+  order: -1;
+}
+
+/*
+ * AND MIRRORED IN A CENTRED COLUMN: a box the arrow's size before the word, a
+ * gap away, so the word stands on the column's middle over its values rather
+ * than half an arrow off it. ONLY BEFORE A WORD: a head with none (a sortable
+ * mark column) draws its arrow alone, already on the middle, and the reserve
+ * would push it off.
+ */
+.crewlet-data-grid__th--center .crewlet-data-grid__sort:has(> .crewlet-data-grid__truncate)::before {
+  content: '';
+  flex: none;
+  inline-size: var(--spacing-3);
+}
+
+.crewlet-data-grid__th:hover .crewlet-data-grid__sort-mark,
+.crewlet-data-grid__sort:focus-visible .crewlet-data-grid__sort-mark {
+  opacity: 1;
+}
+
 .crewlet-data-grid__th--right {
   justify-content: flex-end;
 }
 
+.crewlet-data-grid__th--center {
+  justify-content: center;
+}
+
 .crewlet-data-grid__sort:focus-visible,
 .crewlet-data-grid__cols-reset:focus-visible {
   outline: 2px solid var(--color-focus);
@@ -295,23 +377,30 @@ button.crewlet-data-grid__row-link {
  * A GHOST CONTROL STARTS ON THE COLUMN'S TEXT EDGE. A small ghost button that
  * opens a cell ("Open ENG-12", a choice made in place through a menu) drew its
  * word one padding and one edge (9px) inside the line its column starts on.
- * Its padding and edge are taken back, as a card's foot does (StatusCard.css):
- * the word sits on the line and only the hover's ground reaches past it, into
- * the step between two columns. A column of figures ends its controls on the
- * far edge, so it is left alone.
+ * ONE MECHANISM, Button's `flush`: a flush control anywhere in a cell takes
+ * its padding and edge back, and a ghost control written straight into a cell
+ * (or as a menu's trigger there) is drawn flush without being asked, by the
+ * same declaration. The word sits on the line and only the hover's ground
+ * reaches past it, into the step between two columns.
+ *
+ * THE EXEMPTIONS ARE ONE VARIABLE, `--crewlet-btn-flush-outdent: 0`, which
+ * the flush declaration reads:
  *
- * NEVER AT THE GRID'S OWN EDGE: its first column, and every line of a phone's
- * card (below). A grid standing alone has only its 12px edge there, and with
- * the 9px taken back, the 4px the control's focus ring stands off it ran past
- * the grid's clip: the ring lost a pixel and the hover ground stood 3px from
- * the frame.
+ * - THE GRID'S OWN EDGE, its first column and every line of a phone's card
+ *   (below). A grid standing alone has only its 12px edge there, and with the
+ *   9px taken back the control's focus ring ran past the grid's clip and the
+ *   hover ground stood 3px from the frame.
+ * - A RIGHT OR A CENTRED COLUMN, which lines its values up by their end or
+ *   their middle, where a control taken back at its start would stand off
+ *   both.
  */
-.crewlet-data-grid__cell:not(:first-child, .crewlet-data-grid__cell--right)
-  > .crewlet-btn--ghost.crewlet-btn--small:first-child,
-.crewlet-data-grid__cell:not(:first-child, .crewlet-data-grid__cell--right)
-  > .crewlet-menu-anchor:first-child
-  > .crewlet-btn--ghost.crewlet-btn--small {
-  margin-inline-start: var(--crewlet-data-grid-control-outdent, calc(-1 * (var(--spacing-2) + 1px)));
+.crewlet-data-grid__cell > .crewlet-btn--ghost.crewlet-btn--small:first-child,
+.crewlet-data-grid__cell > .crewlet-menu-anchor:first-child > .crewlet-btn--ghost.crewlet-btn--small {
+  margin-inline-start: var(--crewlet-btn-flush-outdent, calc(-1 * (var(--crewlet-btn-inset) + 1px)));
+}
+
+.crewlet-data-grid__cell:is(:first-child, .crewlet-data-grid__cell--right, .crewlet-data-grid__cell--center) {
+  --crewlet-btn-flush-outdent: 0px;
 }
 
 /*
@@ -325,10 +414,18 @@ button.crewlet-data-grid__row-link {
   overflow: clip;
 }
 
+/* A RIGHT-ALIGNED COLUMN holds figures, times and dates: tabular digits, so
+   "53s ago" and "12h ago" end on one edge and their digits stand in columns. */
 .crewlet-data-grid__cell--right {
   justify-content: flex-end;
+  font-variant-numeric: tabular-nums;
 }
 
+.crewlet-data-grid__cell--center {
+  justify-content: center;
+}
+
+
 .crewlet-data-grid__truncate {
   min-width: 0;
   overflow: hidden;
@@ -401,14 +498,25 @@ button.crewlet-data-grid__row-link {
   color: var(--color-text-primary);
 }
 
+/*
+ * THE FOOT IS A CAPTION, NOT A ROW. At the row's height and on the head's
+ * raised ground it read as one more row, so a grid's head, rows and foot
+ * blurred into one stack. It takes the micro step of type, the tertiary ink,
+ * half the row's inset and the grid's own ground under the rows' hairline:
+ * quieter than either neighbour, and plainly the end of the list.
+ */
 .crewlet-data-grid__foot {
   display: flex;
   align-items: center;
-  gap: var(--spacing-2);
-  padding: var(--spacing-2) var(--crewlet-data-grid-edge);
-  border-top: 1px solid var(--color-border-hover);
-  background: var(--color-surface-elevated);
-  font-size: var(--font-size-xs);
+  flex-wrap: wrap;
+  gap: var(--spacing-1) var(--spacing-3);
+  min-height: var(--size-control-sm);
+  padding: var(--spacing-1) var(--crewlet-data-grid-edge);
+  border-top: 1px solid var(--color-border-default);
+  background: transparent;
+  color: var(--color-text-tertiary);
+  font-size: var(--font-size-2xs);
+  line-height: var(--font-line-height-tight);
 }
 
 .crewlet-data-grid__foot-spacer {
@@ -416,7 +524,7 @@ button.crewlet-data-grid__row-link {
 }
 
 .crewlet-data-grid__note {
-  font-size: var(--font-size-xs);
+  font-size: inherit;
   color: var(--color-text-tertiary);
 }
 
@@ -460,9 +568,21 @@ button.crewlet-data-grid__row-link {
   cursor: pointer;
 }
 
+/*
+ * WHERE NOTHING HOVERS (a touch screen), a sortable head shows its arrow at
+ * rest: there is no pointer to bring it out, and a head that only says it
+ * sorts under a pointer says nothing there.
+ */
+@media (hover: none) {
+  .crewlet-data-grid__th:not(.crewlet-data-grid__th--plain) .crewlet-data-grid__sort-mark {
+    opacity: 1;
+  }
+}
+
 @media (prefers-reduced-motion: reduce) {
   .crewlet-data-grid__th,
-  .crewlet-data-grid__row {
+  .crewlet-data-grid__row,
+  .crewlet-data-grid__sort-mark {
     transition: none;
   }
 }
@@ -486,7 +606,7 @@ button.crewlet-data-grid__row-link {
   /* No ghost control is pulled out here (see above): every line of a card
      starts at the grid's edge, and a compact row's marks run on one line,
      where the hover ground swallowed the gap before it. */
-  --crewlet-data-grid-control-outdent: 0px;
+  --crewlet-btn-flush-outdent: 0px;
 
   display: block;
 }
@@ -532,7 +652,8 @@ button.crewlet-data-grid__row-link {
 
 /* `shrink` and `right` are column shapes, and there are no columns here. */
 :where(.crewlet-data-grid[data-stacked]) .crewlet-data-grid__cell--shrink,
-:where(.crewlet-data-grid[data-stacked]) .crewlet-data-grid__cell--right {
+:where(.crewlet-data-grid[data-stacked]) .crewlet-data-grid__cell--right,
+:where(.crewlet-data-grid[data-stacked]) .crewlet-data-grid__cell--center {
   white-space: normal;
   justify-content: flex-start;
 }

package/dist/DataTable/index.js

@@ -1,20 +1,20 @@
-export { ALL_ITEMS, CopyableCell, DATA_TABLE_LABELS, DataTable, RowActionsMenu } from '../chunk-ZFFQMRPJ.js';
+export { ALL_ITEMS, CopyableCell, DATA_TABLE_LABELS, DataTable, RowActionsMenu } from '../chunk-BWFJB5JD.js';
+import '../chunk-C667GCU7.js';
 import '../chunk-STJ7QBC3.js';
 import '../chunk-DTIW4CHZ.js';
-import '../chunk-I24FI46B.js';
 import '../chunk-RE3FBGQQ.js';
 import '../chunk-AV2DXAEL.js';
-import '../chunk-EAR2F5OA.js';
-import '../chunk-DCQ2VTBB.js';
+import '../chunk-PBCNINMB.js';
+import '../chunk-ETSF7SU6.js';
 import '../chunk-PGCLHYVP.js';
 import '../chunk-PQADV6P6.js';
 import '../chunk-2G355KDJ.js';
-import '../chunk-2566PSQ3.js';
-import '../chunk-7QTPJDRF.js';
+import '../chunk-OQG4P5KU.js';
+import '../chunk-DGXZ635L.js';
 import '../chunk-OMV5W53A.js';
 import '../chunk-XSPCITPN.js';
 import '../chunk-H5XTJ7GJ.js';
-import '../chunk-NUZHC6MM.js';
 import '../chunk-UAUP6XGK.js';
+import '../chunk-NUZHC6MM.js';
 import '../chunk-UT6CW3C7.js';
 import '../chunk-ODEQTPFM.js';

package/dist/DataView/index.js

@@ -1,10 +1,11 @@
-export { DATA_VIEW_TOOLBAR_LABELS, DataView, DataViewToolbar, FILTER_AXIS_LABELS, FilterAxisBar, FilterAxisChip, applyColumnFilters, applyFilters, blankFilterValue, defaultOperator, filterDefsFromColumns, filterHasValue, filterPredicate, formatFilterValue, operatorOf, tableColumns } from '../chunk-4VPDY7AD.js';
+export { DATA_VIEW_TOOLBAR_LABELS, DataView, DataViewToolbar, FILTER_AXIS_LABELS, FilterAxisBar, FilterAxisChip, applyColumnFilters, applyFilters, blankFilterValue, defaultOperator, filterDefsFromColumns, filterHasValue, filterPredicate, formatFilterValue, operatorOf, tableColumns } from '../chunk-J5WWMC35.js';
 import '../chunk-FPDIHEM4.js';
-import '../chunk-ZFFQMRPJ.js';
-import '../chunk-7DD2GR7I.js';
+import '../chunk-K4LZXSKZ.js';
+import '../chunk-BWFJB5JD.js';
+import '../chunk-HPI5J6AR.js';
+import '../chunk-C667GCU7.js';
 import '../chunk-STJ7QBC3.js';
 import '../chunk-DTIW4CHZ.js';
-import '../chunk-I24FI46B.js';
 import '../chunk-7KHM2FZH.js';
 import '../chunk-EE3DJMSQ.js';
 import '../chunk-NR4CPM4T.js';
@@ -12,19 +13,19 @@ import '../chunk-KHJIEPZV.js';
 import '../chunk-EJNJMHQG.js';
 import '../chunk-RE3FBGQQ.js';
 import '../chunk-AV2DXAEL.js';
-import '../chunk-EAR2F5OA.js';
+import '../chunk-PBCNINMB.js';
 import '../chunk-ANTAQAR4.js';
-import '../chunk-DCQ2VTBB.js';
+import '../chunk-ETSF7SU6.js';
 import '../chunk-PGCLHYVP.js';
 import '../chunk-MLDTLZAO.js';
 import '../chunk-PQADV6P6.js';
 import '../chunk-2G355KDJ.js';
-import '../chunk-2566PSQ3.js';
-import '../chunk-7QTPJDRF.js';
+import '../chunk-OQG4P5KU.js';
+import '../chunk-DGXZ635L.js';
 import '../chunk-OMV5W53A.js';
 import '../chunk-XSPCITPN.js';
 import '../chunk-H5XTJ7GJ.js';
-import '../chunk-NUZHC6MM.js';
 import '../chunk-UAUP6XGK.js';
+import '../chunk-NUZHC6MM.js';
 import '../chunk-UT6CW3C7.js';
 import '../chunk-ODEQTPFM.js';