@apliteni/apliteni-ui 0.136.0 → 0.137.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@apliteni/apliteni-ui",
-  "version": "0.136.0",
+  "version": "0.137.0",
 
   "workspaces": [
     "react"

package/react/README.md

@@ -307,6 +307,19 @@ once installed. In the repo there is no copy to resolve to, so `kit-alias.ts` po
 vitest and Storybook straight at `../src/` — which is why the class-name parity tests
 now compare against the working tree rather than the last published release.
 
+### Table appearance
+
+`DataTable` takes the vanilla table hooks as props. `zebra`, `hover` (on unless `false`), `stack`,
+`density`, `stickyHeader` and `pinnedIdentity` set the table modifiers. `rowState={(row) => 'target' | 'dead' | undefined}`
+marks a row, `footer` takes totals rows, and `caption` names the table for assistive technology. A column takes
+`rowHeader` and `cell` (`'title' | 'code' | 'long' | 'strong' | 'act'`). A `dead` row is muted, so put the word
+that names its state in one of its cells.
+
+```tsx
+<DataTable columns={columns} rows={rows} selectable={false} pager={false}
+  density="dense" zebra stack rowState={(r) => (r.id === landedOn ? 'target' : undefined)} />
+```
+
 ### Tables with another presentation of the same rows
 
 Pass `selectable={false}` to omit selection controls and their callbacks. Existing callers

package/react/dist/index.d.ts

@@ -281,6 +281,10 @@ type Column<T> = {
      * why: docs/components.md#dense-financial-tables
      */
     linked?: boolean;
+    /** Renders this column's body cells as row headers (`th scope="row"`), as the kit's compact table does. */
+    rowHeader?: boolean;
+    /** `title` gives the column the remaining width, `code` sets a handle or id in the table's small text, `long` is running text that gets its own line in a stacked row, `strong` bolds a figure, `act` right-aligns a row action. */
+    cell?: 'title' | 'code' | 'long' | 'strong' | 'act';
 };
 type TableSort<T> = {
     key: (keyof T & string) | undefined;
@@ -316,6 +320,16 @@ type PagerProps = {
 type DataTableProps<T> = {
     columns: Column<T>[];
     rows: T[];
+    /** The kit's `--zebra`, `--hover` (on unless `false`) and `--stack` hooks. A stacked table lays each row out as a block below the phone step, so no column scrolls out of reach. */
+    zebra?: boolean;
+    hover?: boolean;
+    stack?: boolean;
+    /** Marks a row the reader landed on (`target`) or a revoked one (`dead`). A dead row is muted, so put the word that names its state in one of its cells. */
+    rowState?: (row: T) => 'target' | 'dead' | undefined;
+    /** Table footer rows, such as totals: `<tr>` elements with a `th scope="row"` label. */
+    footer?: ReactNode;
+    /** A caption read by assistive technology only. */
+    caption?: string;
     dense?: boolean;
     density?: 'default' | 'dense' | 'compact';
     stickyHeader?: boolean;
@@ -345,7 +359,7 @@ type DataTableProps<T> = {
 declare function sortTableRows<T>(rows: T[], sort: TableSort<T>): T[];
 declare function DataTable<T extends {
     name: string;
-}>({ columns, rows, dense, density, stickyHeader, pinnedIdentity, scrollLabel, empty, pageSize, pageSizes, onPageSizeChange, pager, pagerLabel, loading, selectable, selected, onToggle, onTogglePage, sort: controlledSort, onSortChange, page: controlledPage, onPageChange, total, hasMore, }: DataTableProps<T>): react.JSX.Element;
+}>({ columns, rows, zebra, hover, stack, rowState, footer, caption, dense, density, stickyHeader, pinnedIdentity, scrollLabel, empty, pageSize, pageSizes, onPageSizeChange, pager, pagerLabel, loading, selectable, selected, onToggle, onTogglePage, sort: controlledSort, onSortChange, page: controlledPage, onPageChange, total, hasMore, }: DataTableProps<T>): react.JSX.Element;
 
 type PaginationProps = {
     page?: number;

package/react/dist/index.js

@@ -1351,7 +1351,7 @@ function rowId(uid, groups, item) {
 }
 
 // src/DataTable.tsx
-import { useCallback as useCallback3, useEffect as useEffect6, useMemo as useMemo2, useRef as useRef10, useState as useState7 } from "react";
+import { Fragment as Fragment6, useCallback as useCallback3, useEffect as useEffect6, useMemo as useMemo2, useRef as useRef10, useState as useState7 } from "react";
 import { DEFAULT_PAGE_SIZE as DEFAULT_PAGE_SIZE2 } from "@apliteni/apliteni-ui";
 
 // src/Pagination.tsx
@@ -1579,7 +1579,8 @@ function Pagination({
 }
 
 // src/DataTable.tsx
-import { Fragment as Fragment6, jsx as jsx19, jsxs as jsxs15 } from "react/jsx-runtime";
+import { Fragment as Fragment7, jsx as jsx19, jsxs as jsxs15 } from "react/jsx-runtime";
+var CELL_CLASS = { title: "ui-table__title", code: "ui-table__code", long: "ui-table__long", strong: "ui-table__num--strong", act: "ui-table__act" };
 var NO_SORT = { key: void 0, dir: -1 };
 function sortTableRows(rows, sort) {
   if (sort.key === void 0) return [...rows];
@@ -1589,6 +1590,12 @@ function sortTableRows(rows, sort) {
 function DataTable({
   columns,
   rows,
+  zebra = false,
+  hover = true,
+  stack: stack2 = false,
+  rowState,
+  footer,
+  caption,
   dense = false,
   density,
   stickyHeader = false,
@@ -1686,70 +1693,72 @@ function DataTable({
       strokeLinejoin: "round",
       "aria-hidden": "true",
       focusable: "false",
-      children: sort.key === k ? /* @__PURE__ */ jsx19("path", { d: "m8 10 4 4 4-4" }) : /* @__PURE__ */ jsxs15(Fragment6, { children: [
+      children: sort.key === k ? /* @__PURE__ */ jsx19("path", { d: "m8 10 4 4 4-4" }) : /* @__PURE__ */ jsxs15(Fragment7, { children: [
         /* @__PURE__ */ jsx19("path", { d: "m8 9 4-4 4 4" }),
         /* @__PURE__ */ jsx19("path", { d: "m8 15 4 4 4-4" })
       ] })
     }
   );
+  const Wrap = scrollable ? "div" : Fragment6;
   const pageAllOn = selectable && slice.length > 0 && slice.every((r) => selected.has(r.name));
   const pageSomeOn = selectable && !pageAllOn && slice.some((r) => selected.has(r.name));
-  return /* @__PURE__ */ jsxs15(Fragment6, { children: [
-    /* @__PURE__ */ jsx19(
-      "div",
+  return /* @__PURE__ */ jsxs15(Fragment7, { children: [
+    /* @__PURE__ */ jsx19(Wrap, { ...scrollable ? { className: "ui-table-scroll", role: "region", "aria-label": scrollLabel, tabIndex: 0 } : {}, children: /* @__PURE__ */ jsxs15(
+      "table",
       {
-        className: scrollable ? "ui-table-scroll" : void 0,
-        role: scrollable ? "region" : void 0,
-        "aria-label": scrollable ? scrollLabel : void 0,
-        tabIndex: scrollable ? 0 : void 0,
-        children: /* @__PURE__ */ jsxs15(
-          "table",
-          {
-            ref: table,
-            className: ["ui-table ui-table--hover", (density === "dense" || !density && dense) && "ui-table--dense", density === "compact" && "ui-table--compact", stickyHeader && "ui-table--sticky", pinnedIdentity && "ui-table--pinned"].filter(Boolean).join(" "),
-            "aria-busy": loading || void 0,
-            children: [
-              /* @__PURE__ */ jsx19("thead", { children: /* @__PURE__ */ jsxs15("tr", { children: [
-                selectable ? /* @__PURE__ */ jsx19("th", { scope: "col", className: "ui-table__selection", children: /* @__PURE__ */ jsx19(
-                  "input",
-                  {
-                    type: "checkbox",
-                    checked: pageAllOn,
-                    "aria-label": "Select all rows on this page",
-                    ref: (input) => {
-                      if (input) input.indeterminate = pageSomeOn;
-                    },
-                    onChange: () => onTogglePage(slice.map((r) => r.name))
-                  }
-                ) }) : null,
-                columns.map((c, columnIndex) => (
-                  // The sort control is a real <button> inside the header cell. It used to be
-                  // role="button" ON the <th>, which threw away the columnheader role and put
-                  // aria-sort on a role that forbids it.
-                  /* @__PURE__ */ jsx19(
-                    "th",
-                    {
-                      scope: "col",
-                      className: [pinnedIdentity && columnIndex === 0 && "ui-table__identity", c.num && "ui-table__num", c.sortable && "rx-sortable"].filter(Boolean).join(" "),
-                      "aria-sort": sort.key === c.key ? sort.dir === 1 ? "ascending" : "descending" : c.sortable && sortIsKnown ? "none" : void 0,
-                      children: c.sortable ? (
-                        // The label is its own box so it can truncate: in a pinned
-                        // identity column on a phone the header is capped, and a bare
-                        // text node would push the caret out of the cell instead.
-                        /* @__PURE__ */ jsxs15("button", { type: "button", className: "rx-sort", onClick: () => onSort(c.key), children: [
-                          /* @__PURE__ */ jsx19("span", { className: "rx-sort__label", children: c.label }),
-                          caret(c.key)
-                        ] })
-                      ) : c.label
-                    },
-                    c.key
-                  )
-                ))
-              ] }) }),
-              /* @__PURE__ */ jsxs15("tbody", { children: [
-                !slice.length && /* @__PURE__ */ jsx19("tr", { children: /* @__PURE__ */ jsx19("td", { colSpan: columns.length + (selectable ? 1 : 0), children: loading ? "Loading rows\u2026" : empty }) }),
-                slice.map((r) => /* @__PURE__ */ jsxs15("tr", { children: [
-                  selectable ? /* @__PURE__ */ jsx19("td", { className: "ui-table__selection", children: /* @__PURE__ */ jsx19(
+        ref: table,
+        className: ["ui-table", hover && "ui-table--hover", zebra && "ui-table--zebra", stack2 && "ui-table--stack", (density === "dense" || !density && dense) && "ui-table--dense", density === "compact" && "ui-table--compact", stickyHeader && "ui-table--sticky", pinnedIdentity && "ui-table--pinned"].filter(Boolean).join(" "),
+        "aria-busy": loading || void 0,
+        role: stack2 ? "table" : void 0,
+        children: [
+          caption ? /* @__PURE__ */ jsx19("caption", { className: "ui-sr", children: caption }) : null,
+          /* @__PURE__ */ jsx19("thead", { role: stack2 ? "rowgroup" : void 0, children: /* @__PURE__ */ jsxs15("tr", { role: stack2 ? "row" : void 0, children: [
+            selectable ? /* @__PURE__ */ jsx19("th", { scope: "col", role: stack2 ? "columnheader" : void 0, className: "ui-table__selection", children: /* @__PURE__ */ jsx19(
+              "input",
+              {
+                type: "checkbox",
+                checked: pageAllOn,
+                "aria-label": "Select all rows on this page",
+                ref: (input) => {
+                  if (input) input.indeterminate = pageSomeOn;
+                },
+                onChange: () => onTogglePage(slice.map((r) => r.name))
+              }
+            ) }) : null,
+            columns.map((c, columnIndex) => (
+              // The sort control is a real <button> inside the header cell. It used to be
+              // role="button" ON the <th>, which threw away the columnheader role and put
+              // aria-sort on a role that forbids it.
+              /* @__PURE__ */ jsx19(
+                "th",
+                {
+                  scope: "col",
+                  role: stack2 ? "columnheader" : void 0,
+                  className: [pinnedIdentity && columnIndex === 0 && "ui-table__identity", c.num && "ui-table__num", c.sortable && "rx-sortable"].filter(Boolean).join(" "),
+                  "aria-sort": sort.key === c.key ? sort.dir === 1 ? "ascending" : "descending" : c.sortable && sortIsKnown ? "none" : void 0,
+                  children: c.sortable ? (
+                    // The label is its own box so it can truncate: in a pinned
+                    // identity column on a phone the header is capped, and a bare
+                    // text node would push the caret out of the cell instead.
+                    /* @__PURE__ */ jsxs15("button", { type: "button", className: "rx-sort", onClick: () => onSort(c.key), children: [
+                      /* @__PURE__ */ jsx19("span", { className: "rx-sort__label", children: c.label }),
+                      caret(c.key)
+                    ] })
+                  ) : c.label
+                },
+                c.key
+              )
+            ))
+          ] }) }),
+          /* @__PURE__ */ jsxs15("tbody", { role: stack2 ? "rowgroup" : void 0, children: [
+            !slice.length && /* @__PURE__ */ jsx19("tr", { role: stack2 ? "row" : void 0, children: /* @__PURE__ */ jsx19("td", { role: stack2 ? "cell" : void 0, colSpan: columns.length + (selectable ? 1 : 0), children: loading ? "Loading rows\u2026" : empty }) }),
+            slice.map((r) => /* @__PURE__ */ jsxs15(
+              "tr",
+              {
+                role: stack2 ? "row" : void 0,
+                className: rowState?.(r) ? `is-${rowState(r)}` : void 0,
+                children: [
+                  selectable ? /* @__PURE__ */ jsx19("td", { role: stack2 ? "cell" : void 0, className: "ui-table__selection", children: /* @__PURE__ */ jsx19(
                     "input",
                     {
                       type: "checkbox",
@@ -1758,14 +1767,29 @@ function DataTable({
                       onChange: () => onToggle(r.name)
                     }
                   ) }) : null,
-                  columns.map((c, columnIndex) => /* @__PURE__ */ jsx19("td", { className: [c.num && "ui-table__num", pinnedIdentity && columnIndex === 0 && "ui-table__identity", c.linked && "ui-table__linked"].filter(Boolean).join(" "), children: c.render ? c.render(r) : String(r[c.key]) }, c.key))
-                ] }, r.name))
-              ] })
-            ]
-          }
-        )
+                  columns.map((c, columnIndex) => {
+                    const Cell = c.rowHeader ? "th" : "td";
+                    return /* @__PURE__ */ jsx19(
+                      Cell,
+                      {
+                        scope: c.rowHeader ? "row" : void 0,
+                        role: stack2 ? c.rowHeader ? "rowheader" : "cell" : void 0,
+                        "data-label": stack2 && c.num && typeof c.label === "string" ? c.label : void 0,
+                        className: [c.num && "ui-table__num", c.cell && CELL_CLASS[c.cell], pinnedIdentity && columnIndex === 0 && "ui-table__identity", c.linked && "ui-table__linked"].filter(Boolean).join(" ") || void 0,
+                        children: c.render ? c.render(r) : String(r[c.key])
+                      },
+                      c.key
+                    );
+                  })
+                ]
+              },
+              r.name
+            ))
+          ] }),
+          footer ? /* @__PURE__ */ jsx19("tfoot", { role: stack2 ? "rowgroup" : void 0, children: footer }) : null
+        ]
       }
-    ),
+    ) }),
     pager ? (
       // The strip that pages a table may not be wider than the rows it pages (#504).
       // The two are siblings, and no selector sizes one to the other, so the width is
@@ -2347,7 +2371,7 @@ function DatePicker({
 
 // src/Dropdown.tsx
 import {
-  Fragment as Fragment7,
+  Fragment as Fragment8,
   useCallback as useCallback5,
   useContext as useContext2,
   useEffect as useEffect8,
@@ -2375,7 +2399,7 @@ import { createContext as createContext2 } from "react";
 var FieldContext = createContext2(null);
 
 // src/Dropdown.tsx
-import { Fragment as Fragment8, jsx as jsx22, jsxs as jsxs18 } from "react/jsx-runtime";
+import { Fragment as Fragment9, jsx as jsx22, jsxs as jsxs18 } from "react/jsx-runtime";
 var EXIT_SLACK_MS2 = 50;
 var SETTLE_MS = 450;
 var inPanel = (node) => {
@@ -2838,7 +2862,7 @@ function Dropdown({
       ...asLink ? { href: entry.href, ...entry.target ? { target: entry.target } : null } : null,
       ...sx ? { id: rowIds.get(entry), hidden: hiddenBy(entry) || void 0 } : null,
       onClick: (e) => choose(entry, e),
-      children: /* @__PURE__ */ jsxs18(Fragment8, { children: [
+      children: /* @__PURE__ */ jsxs18(Fragment9, { children: [
         entry.avatar ? /* @__PURE__ */ jsx22(Avatar, { personKey: entry.avatar.key, name: entry.avatar.name, src: entry.avatar.src, empty: entry.avatar.empty }) : entry.icon && /* @__PURE__ */ jsx22(Glyph2, { name: entry.icon, className: "ui-dropdown__ic" }),
         /* @__PURE__ */ jsxs18("span", { className: "ui-dropdown__main", children: [
           /* @__PURE__ */ jsx22("span", { className: "ui-dropdown__label", children: entry.label }),
@@ -2848,7 +2872,7 @@ function Dropdown({
         asOption && /* @__PURE__ */ jsx22(Glyph2, { name: "check", className: "ui-dropdown__tick", hidden: true })
       ] })
     };
-    if (row) return /* @__PURE__ */ jsx22(Fragment7, { children: row(entry, props) }, key);
+    if (row) return /* @__PURE__ */ jsx22(Fragment8, { children: row(entry, props) }, key);
     const Tag = asLink ? "a" : "div";
     return /* @__PURE__ */ jsx22(Tag, { ...props }, key);
   }
@@ -2870,7 +2894,7 @@ function Dropdown({
     );
   }) : (items || []).map((entry, i) => renderRow(entry, `i${i}`));
   const cap = scroll && scroll !== true ? { "--ui-dropdown-cap": typeof scroll === "number" ? `${scroll}px` : scroll } : void 0;
-  const none = sx && filtering && !visible.length ? /* @__PURE__ */ jsxs18(Fragment8, { children: [
+  const none = sx && filtering && !visible.length ? /* @__PURE__ */ jsxs18(Fragment9, { children: [
     /* @__PURE__ */ jsx22("span", { className: "ui-dropdown__none-title", children: sx.empty.replace("{q}", () => query.trim()) }),
     /* @__PURE__ */ jsx22("span", { className: "ui-dropdown__none-hint", children: sx.hint })
   ] }) : null;
@@ -2895,7 +2919,7 @@ function Dropdown({
           setOpen(!open);
         },
         children: [
-          triggerContent != null ? triggerContent : /* @__PURE__ */ jsxs18(Fragment8, { children: [
+          triggerContent != null ? triggerContent : /* @__PURE__ */ jsxs18(Fragment9, { children: [
             marked2 && (chosen?.avatar ? /* @__PURE__ */ jsx22(Avatar, { personKey: chosen.avatar.key, name: chosen.avatar.name, src: chosen.avatar.src, empty: chosen.avatar.empty }) : /* @__PURE__ */ jsx22(Avatar, { empty: true })),
             label && /* @__PURE__ */ jsx22("span", { className: "ui-dropdown__pre", children: label }),
             /* @__PURE__ */ jsx22("span", { className: cx6("ui-dropdown__value", marked2 && !chosen && "is-placeholder"), children: shown != null ? shown : placeholder })
@@ -2925,7 +2949,7 @@ function Dropdown({
         onMouseMove,
         children: [
           header,
-          sx ? /* @__PURE__ */ jsxs18(Fragment8, { children: [
+          sx ? /* @__PURE__ */ jsxs18(Fragment9, { children: [
             /* @__PURE__ */ jsxs18("div", { className: "ui-dropdown__search", children: [
               /* @__PURE__ */ jsx22(Glyph2, { name: "search", className: "ui-dropdown__search-ic", hidden: true }),
               /* @__PURE__ */ jsx22(
@@ -3076,7 +3100,7 @@ function Segmented({ options, value, onChange, label, appearance = "pill", size,
 // src/FilterBar.tsx
 import { useRef as useRef13, useState as useState10 } from "react";
 import { filterChipText, filterChipName, filterChipUnset, filterChipItems, focusNextStop } from "@apliteni/apliteni-ui";
-import { Fragment as Fragment9, jsx as jsx26, jsxs as jsxs21 } from "react/jsx-runtime";
+import { Fragment as Fragment10, jsx as jsx26, jsxs as jsxs21 } from "react/jsx-runtime";
 var SEARCH_AT = 10;
 var isRow2 = (entry) => entry !== "---" && !entry.separator;
 function FilterBar({ filters, label = "Filters", clearLabel = "Clear all", clearVariant = "ghost", add, addLabel = "Filter", disabled = false, busy = false, onRemove, onClear, onChange, onAdd }) {
@@ -3183,7 +3207,7 @@ function FilterBar({ filters, label = "Filters", clearLabel = "Clear all", clear
             variant: "menu",
             sections,
             ariaLabel: addLabel,
-            triggerContent: /* @__PURE__ */ jsxs21(Fragment9, { children: [
+            triggerContent: /* @__PURE__ */ jsxs21(Fragment10, { children: [
               /* @__PURE__ */ jsx26(Icon, { name: "plus" }),
               addLabel
             ] }),
@@ -3234,7 +3258,7 @@ function DrawerSection({ title, headingLevel = 3, className, children, ...rest }
 
 // src/Snippet.tsx
 import { useEffect as useEffect9, useRef as useRef14, useState as useState11 } from "react";
-import { Fragment as Fragment10, jsx as jsx28, jsxs as jsxs23 } from "react/jsx-runtime";
+import { Fragment as Fragment11, jsx as jsx28, jsxs as jsxs23 } from "react/jsx-runtime";
 function Snippet({ label = "shell", code = "", children, copy = true, reveal = false, copyLabel = "Copy code" }) {
   const [status, setStatus] = useState11("idle");
   const request = useRef14(0);
@@ -3262,7 +3286,7 @@ function Snippet({ label = "shell", code = "", children, copy = true, reveal = f
   return /* @__PURE__ */ jsxs23("div", { className: reveal ? "ui-snippet ui-snippet--reveal" : "ui-snippet", children: [
     /* @__PURE__ */ jsxs23("div", { className: "ui-snippet__bar", children: [
       /* @__PURE__ */ jsx28("span", { children: label }),
-      copy && /* @__PURE__ */ jsxs23(Fragment10, { children: [
+      copy && /* @__PURE__ */ jsxs23(Fragment11, { children: [
         /* @__PURE__ */ jsx28(
           "button",
           {
@@ -3284,7 +3308,7 @@ function Snippet({ label = "shell", code = "", children, copy = true, reveal = f
 // src/Tabs.tsx
 import { useEffect as useEffect10, useId as useId9, useRef as useRef15 } from "react";
 import { playEntrance } from "@apliteni/apliteni-ui/motion";
-import { Fragment as Fragment11, jsx as jsx29, jsxs as jsxs24 } from "react/jsx-runtime";
+import { Fragment as Fragment12, jsx as jsx29, jsxs as jsxs24 } from "react/jsx-runtime";
 function Tabs({ items, value, onChange, label }) {
   const id = useId9();
   const previous = useRef15(value);
@@ -3333,7 +3357,7 @@ function Tabs({ items, value, onChange, label }) {
         },
         children: [
           item.label,
-          item.count != null && /* @__PURE__ */ jsxs24(Fragment11, { children: [
+          item.count != null && /* @__PURE__ */ jsxs24(Fragment12, { children: [
             " ",
             item.count
           ] })
@@ -3585,7 +3609,7 @@ function EmptyState({ variant = "first-run", title, sub, icon: icon8, art, actio
 }
 
 // src/FileDrop.tsx
-import { Fragment as Fragment12, jsx as jsx33, jsxs as jsxs28 } from "react/jsx-runtime";
+import { Fragment as Fragment13, jsx as jsx33, jsxs as jsxs28 } from "react/jsx-runtime";
 var MARKS = {
   uploading: "clock",
   done: "circleCheck",
@@ -3753,7 +3777,7 @@ function FileDrop({
             children: /* @__PURE__ */ jsx33("span", { style: { width: `${file.progress}%` } })
           }
         )
-      ] }) : /* @__PURE__ */ jsxs28(Fragment12, { children: [
+      ] }) : /* @__PURE__ */ jsxs28(Fragment13, { children: [
         /* @__PURE__ */ jsx33(
           Button,
           {
@@ -3936,7 +3960,7 @@ import { paletteHotkey, prism, railCollapsed } from "@apliteni/apliteni-ui";
 // src/SidebarNav.tsx
 import { forwardRef as forwardRef8, useEffect as useEffect14, useId as useId11, useState as useState15 } from "react";
 import { ENTRANCE_FALLBACK_MS } from "@apliteni/apliteni-ui/motion";
-import { Fragment as Fragment13, jsx as jsx36, jsxs as jsxs31 } from "react/jsx-runtime";
+import { Fragment as Fragment14, jsx as jsx36, jsxs as jsxs31 } from "react/jsx-runtime";
 var badgeText = (badge) => typeof badge === "object" ? badge.text : badge;
 function Row({ item, active, activeIs, collapsed, renderLink, sub }) {
   const uid = useId11();
@@ -3962,7 +3986,7 @@ function Row({ item, active, activeIs, collapsed, renderLink, sub }) {
     item.disabled && "is-disabled",
     item.danger && "is-danger"
   ].filter(Boolean).join(" ");
-  const children = /* @__PURE__ */ jsxs31(Fragment13, { children: [
+  const children = /* @__PURE__ */ jsxs31(Fragment14, { children: [
     (item.leading ?? item.icon) && /* @__PURE__ */ jsx36("span", { className: "ui-nav__ic", children: item.leading ?? /* @__PURE__ */ jsx36(Icon, { name: item.icon }) }),
     /* @__PURE__ */ jsx36("span", { className: "ui-nav__label", children: item.label }),
     count != null && count !== "" && /* @__PURE__ */ jsx36("span", { className: `ui-nav__badge is-${typeof item.badge === "object" ? item.badge.tone ?? "neutral" : "neutral"}`, children: count }),
@@ -4102,7 +4126,7 @@ function ThemeToggle({ labelled = false }) {
 }
 
 // src/AppShell.tsx
-import { Fragment as Fragment14, jsx as jsx38, jsxs as jsxs33 } from "react/jsx-runtime";
+import { Fragment as Fragment15, jsx as jsx38, jsxs as jsxs33 } from "react/jsx-runtime";
 var path = (value) => value.split(/[?#]/)[0].replace(/\/+$/, "") || "/";
 function AppShell({
   sections,
@@ -4204,7 +4228,7 @@ function AppShell({
     ] }),
     /* @__PURE__ */ jsxs33("div", { className: "ui-app__well", children: [
       /* @__PURE__ */ jsxs33("header", { className: "ui-app__bar", children: [
-        navigable && /* @__PURE__ */ jsxs33(Fragment14, { children: [
+        navigable && /* @__PURE__ */ jsxs33(Fragment15, { children: [
           /* @__PURE__ */ jsx38(
             Button,
             {
@@ -4467,7 +4491,7 @@ import {
   useState as useState18
 } from "react";
 import { CHART_FLOOR, bridgeWalk, chartScale, pointTarget } from "@apliteni/apliteni-ui";
-import { Fragment as Fragment15, jsx as jsx41, jsxs as jsxs36 } from "react/jsx-runtime";
+import { Fragment as Fragment16, jsx as jsx41, jsxs as jsxs36 } from "react/jsx-runtime";
 var HEIGHT = { months: 216, bridge: 216, spark: 32 };
 var PAD = 2;
 var ZERO_INSET = 1.5;
@@ -5097,7 +5121,7 @@ function Chart(props) {
                   `${column.label}-${i}`
                 )) })
               ] }) }),
-              /* @__PURE__ */ jsx41("span", { ref: tipEl, className: cx8("ui-tip", openId && "is-open"), role: open ? "tooltip" : void 0, children: open && /* @__PURE__ */ jsxs36(Fragment15, { children: [
+              /* @__PURE__ */ jsx41("span", { ref: tipEl, className: cx8("ui-tip", openId && "is-open"), role: open ? "tooltip" : void 0, children: open && /* @__PURE__ */ jsxs36(Fragment16, { children: [
                 /* @__PURE__ */ jsx41("span", { className: "ui-tip__label", children: spark ? columns[open.column]?.label : `${open.name}, ${columns[open.column]?.label}` }),
                 /* @__PURE__ */ jsx41("span", { className: "ui-tip__value", children: format(open.value) }),
                 (stateOf(columns[open.column]) || open.detail) && /* @__PURE__ */ jsx41("span", { className: "ui-tip__detail", children: stateOf(columns[open.column]) || open.detail })
@@ -5120,7 +5144,7 @@ function Chart(props) {
                 /* @__PURE__ */ jsx41("tbody", { children: tableRows.map((row, i) => /* @__PURE__ */ jsxs36("tr", { "aria-current": pick === i ? true : void 0, children: [
                   /* @__PURE__ */ jsxs36("th", { scope: "row", children: [
                     row.column.label,
-                    row.column.estimated && /* @__PURE__ */ jsxs36(Fragment15, { children: [
+                    row.column.estimated && /* @__PURE__ */ jsxs36(Fragment16, { children: [
                       " ",
                       /* @__PURE__ */ jsx41("span", { className: "ui-chart__state", children: stateOf(row.column) })
                     ] })
@@ -5178,9 +5202,9 @@ var AccentPicker = forwardRef10(function AccentPicker2({
 });
 
 // src/NavTabs.tsx
-import { Fragment as Fragment16, forwardRef as forwardRef11, useEffect as useEffect18, useRef as useRef23, useImperativeHandle as useImperativeHandle2 } from "react";
+import { Fragment as Fragment17, forwardRef as forwardRef11, useEffect as useEffect18, useRef as useRef23, useImperativeHandle as useImperativeHandle2 } from "react";
 import { safeUrl as safeUrl3, observeNavFit, revealCurrentNav, revealFocusedNav } from "@apliteni/apliteni-ui";
-import { Fragment as Fragment17, jsx as jsx43, jsxs as jsxs37 } from "react/jsx-runtime";
+import { Fragment as Fragment18, jsx as jsx43, jsxs as jsxs37 } from "react/jsx-runtime";
 var NavTabs = forwardRef11(function NavTabs2({
   items,
   active,
@@ -5211,7 +5235,7 @@ var NavTabs = forwardRef11(function NavTabs2({
       },
       children: items.map((item) => {
         const badge = item.badge != null && typeof item.badge === "object" ? item.badge : { text: item.badge, tone: void 0 };
-        const inner = /* @__PURE__ */ jsxs37(Fragment17, { children: [
+        const inner = /* @__PURE__ */ jsxs37(Fragment18, { children: [
           /* @__PURE__ */ jsx43("span", { className: "ui-nav__tab-label", children: item.label }),
           badge.text != null && badge.text !== "" && /* @__PURE__ */ jsx43("span", { className: `ui-nav__badge is-${badge.tone || "neutral"}`, children: badge.text })
         ] });
@@ -5224,7 +5248,7 @@ var NavTabs = forwardRef11(function NavTabs2({
           "aria-current": current ? "page" : void 0,
           children: inner
         };
-        return /* @__PURE__ */ jsx43(Fragment16, { children: renderLink ? renderLink(item, linkProps) : /* @__PURE__ */ jsx43("a", { ...linkProps }) }, item.id);
+        return /* @__PURE__ */ jsx43(Fragment17, { children: renderLink ? renderLink(item, linkProps) : /* @__PURE__ */ jsx43("a", { ...linkProps }) }, item.id);
       })
     }
   );
@@ -5233,7 +5257,7 @@ var NavTabs = forwardRef11(function NavTabs2({
 // src/Breadcrumbs.tsx
 import { forwardRef as forwardRef12 } from "react";
 import { icon as icon7, safeUrl as safeUrl4 } from "@apliteni/apliteni-ui";
-import { Fragment as Fragment18, jsx as jsx44, jsxs as jsxs38 } from "react/jsx-runtime";
+import { Fragment as Fragment19, jsx as jsx44, jsxs as jsxs38 } from "react/jsx-runtime";
 var Breadcrumbs = forwardRef12(function Breadcrumbs2({
   items,
   renderLink,
@@ -5250,7 +5274,7 @@ var Breadcrumbs = forwardRef12(function Breadcrumbs2({
       "aria-label": ariaLabel,
       children: /* @__PURE__ */ jsx44("ol", { className: "ui-nav__crumbs", children: items.map((item, index) => {
         const current = index === items.length - 1;
-        const inner = /* @__PURE__ */ jsxs38(Fragment18, { children: [
+        const inner = /* @__PURE__ */ jsxs38(Fragment19, { children: [
           item.icon && /* @__PURE__ */ jsx44("span", { className: "ui-nav__ic", dangerouslySetInnerHTML: { __html: icon7(item.icon) } }),
           /* @__PURE__ */ jsx44("span", { className: "ui-nav__crumb-label", children: item.label })
         ] });

package/src/styles/table.css

@@ -1,6 +1,6 @@
 /* ============================================================================
  * Table — .ui-table  (hairline rows, opaque base surface)
- * Row modifiers: .is-dead (revoked/struck), .is-target (landed on), right-aligned .ui-table__act
+ * Row modifiers: .is-dead (revoked, shown by its muted ink and a word), .is-target (landed on), right-aligned .ui-table__act
  * ========================================================================== */
 
 .ui-table {
@@ -52,14 +52,6 @@
 .ui-table th:last-child { padding-right: 0; }
 .ui-table td.ui-table__act { padding-right: 0; text-align: right; }
 .ui-table tr.is-dead td { /* muted-ink: state — revoked row */ color: var(--muted); }
-.ui-table tr.is-dead td.ui-table__title { text-decoration: line-through; }
-/* The strike is painted by the cell across its in-flow inline descendants, and an atomic
-   inline-level box is not one — so a linked name in a revoked row needs it struck itself.
-   On hover it carries both lines: the cell-link hover rule below is a whole `text-decoration`,
-   which would otherwise replace the strike with the underline.
-   held by: src/styles/table-focus.test.js */
-.ui-table tr.is-dead td.ui-table__title a { text-decoration: line-through; }
-.ui-table tr.is-dead td.ui-table__title a:hover { text-decoration-line: underline line-through; }
 .ui-table tbody tr { transition: background var(--dur-fast) var(--ease); }
 
 /* Row hover: an inset, rounded fill so the highlight never sits flush against a
@@ -72,7 +64,6 @@
   border-spacing: 0;
   padding: 0 var(--space-2);
 }
-.ui-table--hover:not(.ui-table--zebra) tbody tr:hover td { background: var(--surface-2); }
 .ui-table--hover:not(.ui-table--zebra) tbody tr:hover td:first-child {
   border-top-left-radius: var(--radius-sm); border-bottom-left-radius: var(--radius-sm); }
 .ui-table--hover:not(.ui-table--zebra) tbody tr:hover td:last-child {
@@ -106,8 +97,6 @@
 .ui-table--zebra td:first-child { padding-left: var(--space-3); }
 .ui-table--zebra th:last-child,
 .ui-table--zebra td:last-child { padding-right: var(--space-3); }
-.ui-table--zebra.ui-table--hover tbody tr:hover td,
-.ui-table--zebra tbody tr:hover td { background: color-mix(in srgb, var(--accent) 8%, transparent); /* code-bg: inherit — a wash paints over a ground and behind a chip, so the opaque ground below it is the step. */ }
 
 /* A link in a cell is a value that happens to open something: the row's ink, underlined
    on hover — what .ui-identity below has always done. Without it, base.css's bare
@@ -213,7 +202,7 @@
  * bold only in the figure. Scoped to the table, the helper wins on either cell and the
  * row reads as one row. */
 .ui-table :is(th, td).ui-table__num--strong { color: var(--strong); font-weight: var(--weight-semibold); }
-.ui-table__code { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--text); }
+.ui-table__code { font-size: var(--text-sm); color: var(--text); }
 /* Two things in one cell — a row's own name and the state of it — side by side
  * while the column has room and stacked when it does not. The wrap comes from flex
  * because a dense cell is nowrap, and the column is then only as wide as the wider
@@ -234,13 +223,13 @@
 
 /* White in light, base canvas in dark; never a grey or tinted data surface. */
 .ui-table { background: var(--table-bg); }
-.ui-table--zebra tbody tr:nth-child(even) td,
-.ui-table--hover:not(.ui-table--zebra) tbody tr:hover td,
-.ui-table--zebra tbody tr:hover td,
-.ui-table--zebra.ui-table--hover tbody tr:hover td {
-  background: var(--table-bg);
+.ui-table--zebra tbody tr:nth-child(even) td { background: var(--table-bg); }
+/* A row hover is a quiet neutral step. The row paints under transparent cells in a
+   scroll region, while ordinary cells cover the row without breaking its fill. */
+.ui-table--hover tbody tr:hover:not(.is-target),
+.ui-table--hover tbody tr:hover:not(.is-target) > :is(td, th) {
+  background: var(--surface-2);
 }
-.ui-table tbody tr:hover { outline: 1px solid var(--border-strong); outline-offset: -1px; }
 
 /* The row a reference landed a reader on. The mark is a GROUND, not a line: an outline
    says the keyboard is here (Artur, r34), and this one persists — it answers which row the
@@ -332,6 +321,9 @@
    beneath them. */
 .ui-table-scroll > .ui-table,
 .ui-table-scroll > .ui-table tbody td:not(.ui-table__identity, .ui-table__selection) { background-color: transparent; }
+.ui-table-scroll > .ui-table--hover tbody tr:hover:not(.is-target) > :is(td, th) {
+  background: var(--surface-2);
+}
 /* The kit's first ringed scroller, and a scroll region inside a card like the rest, so
    it draws the band inward too rather than spending a halo across the card around it.
    It had no room of its own to draw in — the padding above is horizontal — which is the
@@ -387,7 +379,7 @@
 .ui-delta--success { color: var(--chip-success-ink); }
 .ui-delta--danger { color: var(--chip-danger-ink); }
 .ui-identity { min-height: 24px; display: inline-flex; align-items: center; gap: var(--space-2); color: var(--text); text-decoration: none; }
-.ui-identity__symbol { font-family: var(--font-mono); font-weight: var(--weight-semibold); }
+.ui-identity__symbol { font-weight: var(--weight-semibold); }
 .ui-identity__name { white-space: normal; max-width: var(--panel-sm); }
 .ui-identity__logo { width: 24px; height: 24px; flex: 0 0 24px; position: relative; display: grid; place-items: center; border: 1px solid var(--border); border-radius: var(--radius-xs); font-size: var(--text-xs); }
 .ui-identity__logo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
@@ -500,10 +492,8 @@ a.ui-identity:hover { text-decoration: underline; }
   .ui-table.ui-table--stack > tbody > tr {
     display: flex; flex-wrap: wrap; align-items: baseline;
     column-gap: var(--space-3); row-gap: var(--space-1);
-    /* The inset is on the row, not the table: the hover outline draws at the row's own
-       edge, so a pad on the table would put the outline back against the text (#71). It is
-       the step a dense cell already pays sideways, so the outline and the row separator keep
-       the clearance they had at the width above this one. */
+    /* The inset is on the row, not the table, so its hover fill and separator keep
+       their clearance at the width above this one. */
     padding: var(--space-3); border-bottom: 1px solid var(--border);
   }
   .ui-table.ui-table--stack > tbody > tr:last-child { border-bottom: 0; }
@@ -515,7 +505,21 @@ a.ui-identity:hover { text-decoration: underline; }
     display: block; width: auto; min-width: 0; max-width: 100%; height: auto;
     padding: 0; border-bottom: 0; white-space: normal; overflow-wrap: break-word;
   }
+  .ui-table.ui-table--stack.ui-table--hover tbody tr:hover:not(.is-target) > :is(td, th) {
+    background: transparent;
+  }
   .ui-table.ui-table--stack > tbody > tr > td.ui-table__long { flex: 0 0 100%; text-align: left; }
+  /* The head is gone, so an amount that names its column in `data-label` says it in front of
+     the figure, in the unit's size and body ink. */
+  .ui-table.ui-table--stack > tbody > tr > td[data-label]::before {
+    content: attr(data-label) / ""; margin-right: var(--space-1); font-size: var(--text-xs);
+  }
+  /* The cells of a stacked row are separate boxes with gaps between them, so a tint on each
+     would paint patches. The row paints one tint and the cells let it through. */
+  .ui-table.ui-table--stack tbody tr.is-target:is(*, :hover) {
+    background: color-mix(in srgb, var(--accent) 12%, transparent); /* code-bg: inherit — this translucent wash leaves the chip on its opaque ground. */
+  }
+  .ui-table.ui-table--stack tbody tr.is-target:is(*, :hover) > :is(td, th) { background: transparent; }
   /* A stacked row has no columns left to pin, stick or inset, and the identity's name is
      what the row is about — the fold hides it only because a pinned column is narrow. */
   .ui-table.ui-table--stack.ui-table--pinned > :where(thead, tbody) > tr > :where(.ui-table__identity, .ui-table__selection) {

package/src/tokens/tokens.css

@@ -574,10 +574,7 @@
 .ui-table-scroll,
 .ui-table--sticky thead th,
 .ui-table--pinned .ui-table__identity, .ui-table--pinned .ui-table__selection,
-.ui-table--hover:not(.ui-table--zebra) tbody tr:hover td,
 .ui-table--zebra tbody tr:nth-child(even) td,
-.ui-table--zebra tbody tr:hover td,
-.ui-table--zebra.ui-table--hover tbody tr:hover td,
 .ui-toast,
 .ui-toast--soft,
 .ui-toast--outline,
@@ -598,10 +595,14 @@
 .ui-table-scroll,
 .ui-table--sticky thead th,
 .ui-table--pinned .ui-table__identity, .ui-table--pinned .ui-table__selection,
-.ui-table--hover:not(.ui-table--zebra) tbody tr:hover td,
-.ui-table--zebra tbody tr:nth-child(even) td,
-.ui-table--zebra tbody tr:hover td,
-.ui-table--zebra.ui-table--hover tbody tr:hover td { --code-bg: var(--table-code-bg); }
+.ui-table--zebra tbody tr:nth-child(even) td { --code-bg: var(--table-code-bg); }
+/* A neutral hovered row gives an inline code chip the card surface. The step from
+ * --surface-2 clears 1.1:1 in both themes, even when the table follows a card. */
+.ui-table--hover tbody tr:hover:not(.is-target),
+.ui-table--hover tbody tr:hover:not(.is-target) > :is(td, th),
+.ui-table-scroll > .ui-table--hover tbody tr:hover:not(.is-target) > :is(td, th) {
+  --code-bg: var(--surface);
+}
 .ui-card--accent,
 .ui-card--live,
 .ui-snippet--reveal { --code-bg: var(--surface); }