@eifi1/ui-kit 0.51.7 → 0.52.0

package/src/components/data-table-column-settings.tsx

@@ -1,7 +1,9 @@
-import { useRef } from "react";
+import { useId, useLayoutEffect, useRef } from "react";
 import type { Dispatch, SetStateAction } from "react";
 import { X } from "lucide-react";
 import { cn } from "../lib/cn";
+import { claimEscape } from "../hooks/use-dismiss";
+import { firstTabStop } from "../lib/focus-left";
 import { Tooltip } from "./tooltip";
 import type { DataTableLabels } from "./data-table-labels";
 import { isTableOwnColumn } from "./data-table-row-actions";
@@ -26,7 +28,7 @@ export function ColumnSettingsPanel<T>({
   autoSizeAll,
 }: {
   /** Every column, hidden ones included; the actions column is left out here. */
-  columns: DataTableColumn<T>[];
+  columns: readonly DataTableColumn<T>[];
   hiddenCols: Set<string>;
   setHiddenCols: Dispatch<SetStateAction<Set<string>>>;
   /** The columns the table's width leaves out (`fitPriority`, 0.48): unticked, and
@@ -43,15 +45,45 @@ export function ColumnSettingsPanel<T>({
 }) {
   // The "Columns" rail button — where the drawer's X hands focus back (BUG-7a).
   const columnsRail = useRef<HTMLButtonElement | null>(null);
+  const drawerRef = useRef<HTMLDivElement | null>(null);
+  const drawerId = useId();
+  // The opening half (refactor audit 2026-10-30, DSP-13). Opened from the rail, the focus
+  // goes into the drawer: the rail it was on turns zero wide and leaves the tab order in
+  // the same render, and the focus sat in a control nobody could see. To the first column
+  // box — what the drawer is opened for — or, with none, its first control. Only when the
+  // rail opened it: a drawer that starts open (its state is the table's) takes nothing.
+  const focusOnOpen = useRef(false);
+  useLayoutEffect(() => {
+    if (!showSettings || !focusOnOpen.current) return;
+    focusOnOpen.current = false;
+    const drawer = drawerRef.current;
+    if (!drawer) return;
+    (
+      drawer.querySelector<HTMLElement>('input[type="checkbox"]') ?? firstTabStop(drawer, { includeSelf: false })
+    )?.focus();
+  }, [showSettings]);
+  const close = () => {
+    setShowSettings(false);
+    // Back to the rail that opened it: the drawer is about to go inert, and focus would
+    // fall to <body> with it (BUG-7a).
+    columnsRail.current?.focus();
+  };
   return (
     <>
       <Tooltip label={columnsCountLabel} portal>
         <button
           ref={columnsRail}
           type="button"
-          onClick={() => setShowSettings(true)}
+          onClick={() => {
+            focusOnOpen.current = true;
+            setShowSettings(true);
+          }}
           aria-label={columnsCountLabel}
-          aria-hidden={showSettings}
+          // A disclosure: it says whether the drawer is open, and never hides itself from
+          // a screen reader — `aria-hidden` on it while it held the focus left the reader
+          // with nothing to say (DSP-13). Zero wide and out of the tab order while open.
+          aria-expanded={showSettings}
+          aria-controls={drawerId}
           tabIndex={showSettings ? -1 : 0}
           className={cn(
             "group flex shrink-0 items-start justify-center overflow-hidden pt-3 transition-[width] duration-200 ease-out",
@@ -68,11 +100,26 @@ export function ColumnSettingsPanel<T>({
           </span>
         </button>
       </Tooltip>
+      {/* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions -- Escape
+          for whatever control in the drawer holds the focus; the group itself is no control. */}
       <div
+        ref={drawerRef}
+        id={drawerId}
+        // Named by its own heading's words, so a reader entering it hears "Columns (4/9),
+        // group" before the first box (DSP-13).
+        role="group"
+        aria-label={columnsCountLabel}
         // Closed, the drawer is only `w-0`: without `inert` its X, Auto-size and one
         // checkbox per column stayed tab stops and in the accessibility tree, and Tab
         // after the last cell walked into controls nobody could see (BUG-7a).
         inert={!showSettings || undefined}
+        // Escape closes it onto the rail, as its X does. Claimed, not handed to the Escape
+        // stack: inside a dialog the drawer is what the key closes, not the dialog.
+        onKeyDown={(e) => {
+          if (e.key !== "Escape" || !showSettings) return;
+          claimEscape(e);
+          close();
+        }}
         className={cn(
           "shrink-0 overflow-hidden transition-[width] duration-200 ease-out",
           showSettings ? "w-56" : "w-0",
@@ -84,12 +131,7 @@ export function ColumnSettingsPanel<T>({
             <Tooltip label={labels.close} portal>
               <button
                 type="button"
-                onClick={() => {
-                  setShowSettings(false);
-                  // Back to the rail that opened it: the X is about to go inert, and
-                  // focus would fall to <body> with it (BUG-7a).
-                  columnsRail.current?.focus();
-                }}
+                onClick={close}
                 aria-label={labels.close}
                 className="rounded p-0.5 text-placeholder hover:bg-hover hover:text-secondary"
               >

package/src/components/data-table-filters.ts

@@ -1,6 +1,6 @@
 import type { DataTableColumn } from "./data-table";
 import { toLocalIso } from "../lib/dates";
-import { foldForSearch } from "../lib/text-match";
+import { matchesSearch, searchWords } from "../lib/text-match";
 
 /** How a column is filtered. `text`/`select`/`date`/`number` each read a value
  *  off the row and compare it against the user's {@link FilterValue}. */
@@ -76,8 +76,10 @@ function localDay(raw: string): string {
  * `locale` is for the text filter's case folding. Plain `toLowerCase` folds by the
  * root rules, under which a Turkish user typing "ırmak" does not find "IRMAK";
  * `toLocaleLowerCase(locale)` does. Optional, and `undefined` is the runtime's default.
- * The text filter folds as every kit list does ({@link foldForSearch}, DUP-5): accents
- * off too, so "zurich" finds Zürich.
+ * The text filter folds as every kit list does (`foldForSearch`, DUP-5): accents off
+ * too, so "zurich" finds Zürich. And it matches as the pickers do since 0.51.4 (refactor
+ * audit 2026-10-30, DUP-4): every word of the query, anywhere in the value, in any order —
+ * "zurich migros" finds "Migros · 8004 Zürich". One word matches as before.
  */
 export function rowMatches<T>(col: DataTableColumn<T>, row: T, state: FilterValue, locale?: string): boolean {
   const filter = resolveFilter(col);
@@ -85,7 +87,7 @@ export function rowMatches<T>(col: DataTableColumn<T>, row: T, state: FilterValu
   switch (filter.type) {
     case "text": {
       if (state.type !== "text" || !state.q.trim()) return true;
-      return foldForSearch(filter.getValue(row), locale).includes(foldForSearch(state.q.trim(), locale));
+      return matchesSearch(searchWords(state.q, locale), [filter.getValue(row)], locale);
     }
     case "select": {
       if (state.type !== "select" || state.values.length === 0) return true;

package/src/components/data-table-fit.ts

@@ -48,7 +48,7 @@ export const GROW_PEER_CELL_CLASS = "not-large:whitespace-nowrap";
 // until kastlan's admin pane scrolled 21px at 1280px (0.48 build review 2, kastlan S1).
 
 /** The auto-hide order: lowest `fitPriority` first, the later column first on a tie. */
-export function fitHideOrder<T>(columns: DataTableColumn<T>[]): DataTableColumn<T>[] {
+export function fitHideOrder<T>(columns: readonly DataTableColumn<T>[]): DataTableColumn<T>[] {
   return columns
     .map((col, index) => ({ col, index }))
     .filter(({ col }) => col.fitPriority != null)
@@ -72,7 +72,7 @@ export function useColumnFit<T>({
   enabled,
   content,
 }: {
-  columns: DataTableColumn<T>[];
+  columns: readonly DataTableColumn<T>[];
   /** The user's hidden columns: never candidates (they are out already). */
   hiddenCols: Set<string>;
   headRefs: Map<string, HTMLTableCellElement>;
@@ -83,8 +83,10 @@ export function useColumnFit<T>({
   /**
    * What can change the columns' widths besides the scroller (0.48.2): the rows on
    * screen, the columns, the stored widths, the text size. Compared item by item after
-   * each render, and the table is measured only when one changed — a selection tick no
-   * longer forces a layout of the whole table. Without it, every render measures.
+   * each render (`Object.is`), and the table is measured only when one changed — a
+   * selection tick no longer forces a layout of the whole table. Without it, every render
+   * measures. So each item must keep its identity while it means the same: the page's
+   * rows memoised, the columns as their keys (DSP-19).
    */
   content?: readonly unknown[];
 }): {
@@ -223,11 +225,23 @@ export function useColumnFit<T>({
   // drawn first. A render that changed none of it (a ticked box, a focused row) skips the
   // measure, which forces a layout of the whole table (0.48.2, keksdose dev #632).
   const lastContent = useRef<readonly unknown[] | null>(null);
+  // The candidates by their keys, not by identity (refactor audit 2026-10-30, DSP-19):
+  // both are memoised on `columns`, which a call site writes inline — a new array, and
+  // so a "change", on every render of the page around the table.
+  const orderSig = order.map((c) => c.key).join("\u0000");
+  const currentSig = current.join("\u0000");
   useLayoutEffect(() => {
     // The table the observer watches is this render's (a table drawn after a loading
     // state, or remounted, is a new element).
     watchTable();
-    const now = content ? [...content, order, current, growKey, active] : null;
+    // And what the fit measures under the same keys (0.52 code review, data-table.tsx):
+    // the headers' text as drawn — a locale switch keeps every key and changes every
+    // header, and German → English left out the columns German had no room for, on a
+    // table with room to spare (narrower, a `w-full` table keeps the scroller's width,
+    // which the observer below watches) — and the grow column's floor. Text is read
+    // without a layout.
+    const headText = active ? (scroller()?.querySelector("thead")?.textContent ?? "") : "";
+    const now = content ? [...content, orderSig, currentSig, growKey, growMin, active, headText] : null;
     const prev = lastContent.current;
     lastContent.current = now;
     if (now && prev && prev.length === now.length && prev.every((v, i) => Object.is(v, now[i]))) return;

package/src/components/data-table-groups.tsx

@@ -57,7 +57,7 @@ export interface RowGroup<T> {
 }
 
 /** Consecutive runs by `level.key`, nested once for a second level. */
-export function groupRows<T>(rows: T[], levels: readonly DataTableGroupBy<T>[], offset = 0): RowGroup<T>[] {
+export function groupRows<T>(rows: readonly T[], levels: readonly DataTableGroupBy<T>[], offset = 0): RowGroup<T>[] {
   const [level, ...rest] = levels;
   if (!level) return [];
   const out: RowGroup<T>[] = [];

package/src/components/data-table-head.tsx

@@ -7,6 +7,7 @@ import type { SortState } from "./data-table-sort";
 import { FilterPopover } from "./data-table-filter-popover";
 import { Popover } from "./popover";
 import { Tooltip } from "./tooltip";
+import { Checkbox } from "./checkbox";
 import type { DataTableLabels } from "./data-table-labels";
 import { isTableOwnColumn } from "./data-table-row-actions";
 import { columnLabel, logicalAlign, splitCellProps } from "./data-table-shared";
@@ -59,7 +60,7 @@ export function DataTableHead<T>({
   hasSortCallback: boolean;
   /** The caller owns the filters (`onFiltersChange`), likewise. */
   hasFilterCallback: boolean;
-  sorts: SortState[];
+  sorts: readonly SortState[];
   filters: FilterState;
   selectOptionsByKey: Record<string, { value: string; label: string }[]>;
   multiSort: boolean;
@@ -98,13 +99,16 @@ export function DataTableHead<T>({
               compact ? "w-8 px-2 py-1" : "w-10 px-3 py-2",
             )}
           >
-            <input
-              type="checkbox"
-              className={cn("align-middle accent-indigo-600", compact ? "size-3.5" : "size-4")}
+            {/* The kit's Checkbox, as the phone card's (refactor audit 2026-10-30, DSP-14): the
+                native box wore `accent-indigo-600` over the kit's `--brand` accent, indigo on
+                every palette and, in dark mode, a checked box that read as unchecked. "Some"
+                is its `indeterminate` dash, set on the element after every render as the
+                ref here did. */}
+            <Checkbox
+              className="align-middle"
+              inputClassName={compact ? "size-3.5" : undefined}
               checked={selection.allSelected}
-              ref={(el) => {
-                if (el) el.indeterminate = selection.someSelected && !selection.allSelected;
-              }}
+              indeterminate={selection.someSelected && !selection.allSelected}
               onChange={(e) => selection.onToggleAll(e.target.checked)}
               aria-label={labels.selectAllRows}
             />
@@ -175,21 +179,27 @@ export function DataTableHead<T>({
               )}
             >
               <div className={cn("flex items-center gap-1", isEndAligned && "flex-row-reverse")}>
-                <Tooltip label={sortable && multiSort ? labels.sortHint : undefined} portal>
-                  <button
-                    type="button"
-                    onClick={(e) => sortable && toggleSort(col.key, e.shiftKey)}
-                    disabled={!sortable}
-                    className={cn("flex items-center gap-1 text-start", sortable && "hover:text-primary")}
-                  >
-                    <span>{col.header}</span>
-                    {sortable && <Icon className={cn("size-3", active ? "opacity-100" : "opacity-40")} />}
-                    {/* Priority badge, only meaningful with 2+ sort keys */}
-                    {active && sorts.length > 1 && (
-                      <span className="text-micro font-semibold leading-none text-brand">{sortIdx + 1}</span>
-                    )}
-                  </button>
-                </Tooltip>
+                {sortable ? (
+                  <Tooltip label={multiSort ? labels.sortHint : undefined} portal>
+                    <button
+                      type="button"
+                      onClick={(e) => toggleSort(col.key, e.shiftKey)}
+                      className="flex items-center gap-1 text-start hover:text-primary"
+                    >
+                      <span>{col.header}</span>
+                      <Icon className={cn("size-3", active ? "opacity-100" : "opacity-40")} />
+                      {/* Priority badge, only meaningful with 2+ sort keys */}
+                      {active && sorts.length > 1 && (
+                        <span className="text-micro font-semibold leading-none text-brand">{sortIdx + 1}</span>
+                      )}
+                    </button>
+                  </Tooltip>
+                ) : (
+                  // Plain text (refactor audit 2026-10-30, DSP-23 a): a `<button disabled>`
+                  // round it was read out as a dimmed button on every column that cannot
+                  // be sorted — a control that is not there.
+                  <span className="text-start">{col.header}</span>
+                )}
                 {filter && (
                   <Popover
                     // 420 px at Normal, in rem so the calendar grows with its

package/src/components/data-table-mobile.tsx

@@ -74,7 +74,7 @@ export function StackedFields<T>({
   compact,
   liftOwnClicks = false,
 }: {
-  columns: DataTableColumn<T>[];
+  columns: readonly DataTableColumn<T>[];
   row: T;
   compact: boolean;
   /** On a stretched card (0.50 K4): lift the own-click fields above its title link. */
@@ -137,7 +137,7 @@ export const MOBILE_CARD_FIELDS = 3;
  * fields and the marks leave it on the card; only `mobileHidden` / `mobile: "hidden"`
  * (which keep it out of `columns`) remove it.
  */
-export function mobileCardColumns<T>(columns: DataTableColumn<T>[]): {
+export function mobileCardColumns<T>(columns: readonly DataTableColumn<T>[]): {
   primary: DataTableColumn<T> | null;
   status: DataTableColumn<T>[];
   fields: DataTableColumn<T>[];
@@ -181,7 +181,11 @@ function devWarnings(): boolean {
  * (the table's `storageKey` or `urlSync` prefix) says which table, else its title
  * column does.
  */
-export function useCardColumnWarnings<T>(columns: DataTableColumn<T>[], enabled: boolean, name?: string): void {
+export function useCardColumnWarnings<T>(
+  columns: readonly DataTableColumn<T>[],
+  enabled: boolean,
+  name?: string,
+): void {
   const warned = useRef<Set<string> | null>(null);
   useEffect(() => {
     if (!enabled || !devWarnings()) return;
@@ -220,7 +224,10 @@ export function isEmptyCell(value: ReactNode): boolean {
 }
 
 /** Each column's rendered cell, without the empty ones. */
-function filledFields<T>(columns: DataTableColumn<T>[], row: T): { col: DataTableColumn<T>; value: ReactNode }[] {
+function filledFields<T>(
+  columns: readonly DataTableColumn<T>[],
+  row: T,
+): { col: DataTableColumn<T>; value: ReactNode }[] {
   return columns.map((col) => ({ col, value: col.cell(row) })).filter(({ value }) => !isEmptyCell(value));
 }
 
@@ -261,8 +268,8 @@ export function MobileSort<T>({
   onPick,
   onFlip,
 }: {
-  columns: DataTableColumn<T>[];
-  sorts: SortState[];
+  columns: readonly DataTableColumn<T>[];
+  sorts: readonly SortState[];
   sortCycle: SortCycle;
   compact: boolean;
   labels: DataTableLabels;
@@ -357,6 +364,11 @@ export interface MobileRowProps<T> {
   large: boolean;
   /** Phone selection (0.40, keksdose live #421); null without DataTable's `selection`. */
   select: MobileRowSelect | null;
+  /** The card's place in the list, on its `<li>` — where the table finds the card that
+   *  takes the focus when a focused one leaves (refactor audit 2026-10-30, DSP-4). */
+  rowIndex?: number;
+  /** The focus came into the card, or into anything it opened (a portal included). */
+  onFocusIn?: () => void;
 }
 
 /** A phone card's part in DataTable's `selection` (0.40, keksdose live #421). */
@@ -395,6 +407,8 @@ export function MobileRow<T>({
   compact,
   large,
   select,
+  rowIndex,
+  onFocusIn,
 }: MobileRowProps<T>) {
   const expanded = isExpanded?.(row) ?? false;
   // Selection mode (#421): the whole card is the row's checkbox — a tap toggles it
@@ -411,6 +425,11 @@ export function MobileRow<T>({
   // contain their own interactive controls (status toggles, action
   // icons) don't end up as illegal nested buttons.
   const interactive = !!onRowClick;
+  // `rowHref` without `onRowClick` (refactor audit 2026-10-30, DSP-23 b): nothing opens the
+  // row in place, so the card — or its stretched title — is a link that is followed. It
+  // was neither, and the phone had no way into the row at all.
+  const rowUrl = rowHref?.(row);
+  const linkOnly = !interactive && rowUrl !== undefined;
   // Say that the card OPENS something (Keksdose feedback #163). A phone card had
   // only a cursor and a tap-tint to advertise its editor — on the invoice review
   // screen, whose entire purpose is correcting mis-read lines, that read as "these
@@ -428,8 +447,10 @@ export function MobileRow<T>({
   const swipeEnabled = !!swipe && !selecting;
   // The stretched card (0.50 K4): the title is the control, the card a plain box.
   // Selection mode keeps its own card (the whole card is the toggle there).
-  const stretched = mobileCardStretched && interactive && !selecting && !mobileCard && !!mobilePrimaryCol;
-  const href = mobileCardLinkable || stretched ? rowHref?.(row) : undefined;
+  const stretched = mobileCardStretched && (interactive || linkOnly) && !selecting && !mobileCard && !!mobilePrimaryCol;
+  const href = mobileCardLinkable || stretched ? rowUrl : undefined;
+  // The card opens something on a tap: the row (`onRowClick`), or its link.
+  const opens = interactive || (linkOnly && href !== undefined);
   const cardClass = cn(
     "w-full text-start flex items-center",
     // §4: more room per row at Large — a taller row is a bigger tap target too.
@@ -441,7 +462,7 @@ export function MobileRow<T>({
     // on every row of a long list, so anything larger becomes the list's personality
     // rather than feedback. `transition-transform` alone, so the existing background
     // flip stays instant.
-    interactive &&
+    opens &&
       "cursor-pointer transition-transform duration-100 active:scale-[0.995] active:bg-active motion-reduce:transition-none motion-reduce:active:scale-100",
     // The keyboard's frame drawn INSIDE the card, as the desktop row's is (keksdose live
     // #394): the browser's own ring and tap highlight sit on the card's outer edge, and
@@ -449,7 +470,7 @@ export function MobileRow<T>({
     // AppShell main's `overflow-x-clip` — so the frame went missing on one side. A press
     // keeps the fill and the squeeze above; an outline on every tap of a long list would
     // be louder than the acknowledgement it replaces.
-    (interactive || selecting) &&
+    (opens || selecting) &&
       !stretched &&
       cn("[-webkit-tap-highlight-color:transparent] focus-visible:ring-inset", FOCUS_RING),
     // A stretched card (0.50 K4) draws the same frame, inside the card, while its TITLE
@@ -485,15 +506,20 @@ export function MobileRow<T>({
         href={href}
         data-card-link=""
         data-row-link=""
-        onActivate={() => onRowClick!(row)}
-        aria-expanded={opensRow ? expanded : undefined}
+        navigate={linkOnly}
+        onActivate={interactive ? () => onRowClick!(row) : undefined}
+        aria-expanded={opensRow && interactive ? expanded : undefined}
         className={stretchedClass}
         // Enter follows RowLink's own onClick; Space opens the row too, not the list's scroll.
-        onKeyDown={(e) => {
-          if (e.key !== " ") return;
-          e.preventDefault();
-          onRowClick!(row);
-        }}
+        onKeyDown={
+          interactive
+            ? (e) => {
+                if (e.key !== " ") return;
+                e.preventDefault();
+                onRowClick!(row);
+              }
+            : undefined
+        }
       >
         {title}
       </RowLink>
@@ -686,25 +712,30 @@ export function MobileRow<T>({
     <div {...press} data-card-stretched="" className={cardClass}>
       {cardInner}
     </div>
-  ) : interactive && href ? (
+  ) : opens && href ? (
     // A card with a URL of its own is a LINK, not a div wearing role="button"
     // (feedback #451): the phone's long-press "open in new tab" and a screen
     // reader's link semantics both come free, and the fake role goes away.
     <RowLink
       href={href}
       {...press}
-      onActivate={() => onRowClick!(row)}
-      aria-expanded={opensRow ? expanded : undefined}
+      navigate={linkOnly}
+      onActivate={interactive ? () => onRowClick!(row) : undefined}
+      aria-expanded={opensRow && interactive ? expanded : undefined}
       className={cardClass}
       // Enter already activates a link natively, and that routes through
       // RowLink's own onClick — handling it here too would open the row twice.
       // Space is the only key left, and only so it opens the row instead of
       // scrolling the list.
-      onKeyDown={(e) => {
-        if (e.key !== " ") return;
-        e.preventDefault();
-        onRowClick!(row);
-      }}
+      onKeyDown={
+        interactive
+          ? (e) => {
+              if (e.key !== " ") return;
+              e.preventDefault();
+              onRowClick!(row);
+            }
+          : undefined
+      }
     >
       {cardInner}
     </RowLink>
@@ -746,9 +777,13 @@ export function MobileRow<T>({
     </div>
   );
   return (
+    /* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions -- `onFocus`
+       only notes that the focus is in this card (DSP-4); the card inside is the control. */
     <li
       className={cn(tint)}
       {...cleanAttrs(rowAttributes?.(row))}
+      data-row-index={rowIndex}
+      onFocus={onFocusIn}
       data-selected={selecting && select!.selected ? "" : undefined}
       onClickCapture={
         select
@@ -946,7 +981,7 @@ export function MobileFilters<T>({
   labels,
   locale,
 }: {
-  columns: DataTableColumn<T>[];
+  columns: readonly DataTableColumn<T>[];
   filters: FilterState;
   selectOptionsByKey: Record<string, { value: string; label: string }[]>;
   isServer: boolean;

package/src/components/data-table-pagination.tsx

@@ -53,6 +53,17 @@ const PAGE_WINDOW_LARGE_PHONE = 1;
 const PAGE_STRIP = "flex min-w-0 max-w-full items-center gap-1";
 const PAGE_NUMBERS = "flex min-w-0 flex-wrap items-center justify-center gap-1";
 
+/**
+ * The arrows at the ends of the strip are `aria-disabled`, not `disabled` (refactor audit
+ * 2026-10-30, DSP-12): Next pressed onto the last page — or Previous onto the first —
+ * is still the focused button, and a button that turns `disabled` drops the focus it
+ * holds to `<body>`. JumpCalendar's arrows keep the same rule, and the table's
+ * `isLoading` pager the same reason (`ServerPagination.isLoading`). Dimmed as before; a
+ * press there does nothing.
+ */
+const ARROW =
+  "rounded hover:bg-hover aria-disabled:cursor-not-allowed aria-disabled:opacity-40 aria-disabled:hover:bg-transparent";
+
 /** Footer for {@link DataTable}: range summary, page-size select, and a
  *  windowed page-number strip (first/last + ±2 around the current page, ±1 on a phone
  *  at Large — see {@link PAGE_WINDOW}). */
@@ -137,9 +148,11 @@ export function Pagination({
         <div data-slot="page-strip" className={PAGE_STRIP}>
           <button
             type="button"
-            onClick={() => onPage(Math.max(0, page - 1))}
-            disabled={page === 0}
-            className={cn("rounded hover:bg-hover disabled:opacity-40", compact ? "p-0.5" : "p-1")}
+            onClick={() => {
+              if (page > 0) onPage(page - 1);
+            }}
+            aria-disabled={page === 0 || undefined}
+            className={cn(ARROW, compact ? "p-0.5" : "p-1")}
             aria-label={labels.prevPage}
           >
             {/* "Previous" points back along the line — left in LTR, right in RTL. */}
@@ -173,9 +186,11 @@ export function Pagination({
           </div>
           <button
             type="button"
-            onClick={() => onPage(Math.min(totalPages - 1, page + 1))}
-            disabled={page >= totalPages - 1}
-            className={cn("rounded hover:bg-hover disabled:opacity-40", compact ? "p-0.5" : "p-1")}
+            onClick={() => {
+              if (page < totalPages - 1) onPage(page + 1);
+            }}
+            aria-disabled={page >= totalPages - 1 || undefined}
+            className={cn(ARROW, compact ? "p-0.5" : "p-1")}
             aria-label={labels.nextPage}
           >
             <ChevronRight className={cn("rtl:-scale-x-100", compact ? "size-3.5" : "size-4")} />

package/src/components/data-table-resize.ts

@@ -65,7 +65,7 @@ export function useColumnResize<T>({
   /** The widths React renders the columns at. */
   widths: Record<string, number>;
   setWidths: Dispatch<SetStateAction<Record<string, number>>>;
-  columns: DataTableColumn<T>[];
+  columns: readonly DataTableColumn<T>[];
   hiddenCols: Set<string>;
 }) {
   const resizing = useRef<Resize | null>(null);

package/src/components/data-table-row-actions.tsx

@@ -171,7 +171,7 @@ export function useRowActionColumn<T>({
   mobileSwipeActions,
   desktopSwipeActions,
 }: {
-  columns: DataTableColumn<T>[];
+  columns: readonly DataTableColumn<T>[];
   rowActions: DataTableProps<T>["rowActions"];
   rowActionsHeader?: DataTableProps<T>["rowActionsHeader"];
   rowName: DataTableProps<T>["rowName"];
@@ -180,7 +180,7 @@ export function useRowActionColumn<T>({
   mobileSwipeActions?: DataTableProps<T>["mobileSwipeActions"];
   desktopSwipeActions?: DataTableProps<T>["desktopSwipeActions"];
 }): {
-  columns: DataTableColumn<T>[];
+  columns: readonly DataTableColumn<T>[];
   swipesFromActions: (row: T) => MobileSwipeActions | null;
 } {
   const rowActionsFor = useCallback(
@@ -242,7 +242,7 @@ export function useRowActionColumn<T>({
       labels.actions,
     ],
   );
-  const actionColumns = useMemo<DataTableColumn<T>[]>(
+  const actionColumns = useMemo<readonly DataTableColumn<T>[]>(
     () =>
       rowActions
         ? [