@eifi1/ui-kit 0.31.1 → 0.32.1

package/dist/components/data-table-pagination.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/data-table-pagination.tsx"],"sourcesContent":["import { useMemo } from \"react\";\nimport { ChevronLeft, ChevronRight } from \"lucide-react\";\nimport { cn } from \"../lib/cn\";\nimport { DEFAULT_DATA_TABLE_LABELS, type DataTableLabels } from \"./data-table-labels\";\nimport { useKitLabels, useKitLocale } from \"../i18n/kit-labels\";\n\nexport const PAGE_SIZE_OPTIONS = [10, 25, 50, 100, 200] as const;\n\n/** The page-size steps, with the current size slotted in when it is not one of them. */\nfunction sizeOptions(pageSize: number): number[] {\n  const steps: number[] = [...PAGE_SIZE_OPTIONS];\n  if (!Number.isFinite(pageSize) || steps.includes(pageSize)) return steps;\n  return [...steps, pageSize].sort((a, b) => a - b);\n}\n\ninterface PaginationProps {\n  page: number;\n  totalPages: number;\n  pageSize: number;\n  total: number;\n  onPage: (p: number) => void;\n  /** Omit when the page size is not the user's to change (a server that fixes it):\n   *  the select is then not rendered at all, rather than rendered and inert. */\n  onPageSize?: (n: number) => void;\n  /** Over `dataTable` from `<UiKitProvider labels>`, over the English defaults. */\n  labels?: Partial<DataTableLabels>;\n  /** For the page numbers and page-size options; falls back to the provider's. */\n  locale?: string;\n  /** `\"compact\"` for a pager under a compact {@link DataTable} (lenkbank's in-card\n   *  tables): a slimmer footer and page buttons, so the pager is not the tallest row\n   *  of a table that was made compact on purpose. */\n  density?: \"comfortable\" | \"compact\";\n}\n\n/** Footer for {@link DataTable}: range summary, page-size select, and a\n *  windowed page-number strip (first/last + ±2 around the current page). */\nexport function Pagination({\n  page,\n  totalPages,\n  pageSize,\n  total,\n  onPage,\n  onPageSize,\n  labels: labelsProp,\n  locale: localeProp,\n  density = \"comfortable\",\n}: PaginationProps) {\n  const compact = density === \"compact\";\n  // prop > provider > English, like every other kit component. This defaulted straight\n  // to the English object, so a standalone pager under a translated provider still\n  // said \"Rows per page\" — only the pager INSIDE a DataTable was translated, because\n  // the table resolved the provider's labels and handed them down.\n  const labels = useKitLabels(\"dataTable\", DEFAULT_DATA_TABLE_LABELS, labelsProp);\n  const locale = useKitLocale(localeProp);\n  // The bare numbers on the strip and in the select are text too: `String(n)` is\n  // always ASCII digits, which is wrong for a locale that writes its own. The range\n  // summary is not formatted here — `pageRange` / `rowCount` take NUMBERS so the\n  // translation can format them itself, alongside the words around them.\n  const num = useMemo(() => new Intl.NumberFormat(locale), [locale]);\n  const visible = useMemo(() => {\n    if (totalPages <= 7) return Array.from({ length: totalPages }, (_, i) => i);\n    const set = new Set<number>([0, totalPages - 1, page]);\n    for (let d = 1; d <= 2; d++) {\n      if (page - d >= 0) set.add(page - d);\n      if (page + d <= totalPages - 1) set.add(page + d);\n    }\n    return Array.from(set).sort((a, b) => a - b);\n  }, [page, totalPages]);\n\n  const items: (number | \"ellipsis\")[] = [];\n  visible.forEach((p, idx) => {\n    if (idx > 0 && p - visible[idx - 1] > 1) items.push(\"ellipsis\");\n    items.push(p);\n  });\n\n  return (\n    <div\n      data-density={density}\n      className={cn(\n        \"flex flex-wrap items-center justify-between gap-2 border-t border-[var(--border)] text-xs text-[var(--text-secondary)]\",\n        compact ? \"px-2 py-1\" : \"px-3 py-2\",\n      )}\n    >\n      <div className=\"flex items-center gap-2\">\n        <span>\n          {pageSize === Infinity\n            ? labels.rowCount(total)\n            : labels.pageRange(page * pageSize + 1, Math.min(total, (page + 1) * pageSize), total)}\n        </span>\n        {onPageSize && (\n          <select\n            value={pageSize === Infinity ? \"all\" : pageSize}\n            onChange={(e) =>\n              onPageSize(e.target.value === \"all\" ? Infinity : Number(e.target.value))\n            }\n            className=\"rounded border border-[var(--border)] bg-[var(--bg-surface)] px-1 py-0.5 text-xs\"\n            aria-label={labels.pageSize}\n          >\n            {/* A `defaultPageSize` that is not one of the steps (keksdose's 5) is offered\n                too — a select whose value has no option shows its first one (\"10\"). */}\n            {sizeOptions(pageSize).map((n) => (\n              <option key={n} value={n}>\n                {num.format(n)}\n              </option>\n            ))}\n            <option value=\"all\">{labels.pageSizeAll}</option>\n          </select>\n        )}\n      </div>\n      {pageSize !== Infinity && totalPages > 1 && (\n        <div className=\"flex items-center gap-1\">\n          <button\n            type=\"button\"\n            onClick={() => onPage(Math.max(0, page - 1))}\n            disabled={page === 0}\n            className={cn(\"rounded hover:bg-[var(--bg-hover)] disabled:opacity-40\", compact ? \"p-0.5\" : \"p-1\")}\n            aria-label={labels.prevPage}\n          >\n            {/* \"Previous\" points back along the line — left in LTR, right in RTL. */}\n            <ChevronLeft className={cn(\"rtl:-scale-x-100\", compact ? \"size-3.5\" : \"size-4\")} />\n          </button>\n          {items.map((it, i) =>\n            it === \"ellipsis\" ? (\n              <span key={`e${i}`} className=\"px-1 text-[var(--text-placeholder)]\">\n                …\n              </span>\n            ) : (\n              <button\n                key={it}\n                type=\"button\"\n                onClick={() => onPage(it)}\n                // Which page you are on is carried only by a background colour\n                // otherwise, and the strip is a row of bare numbers with nothing\n                // else to tell them apart.\n                aria-current={it === page ? \"page\" : undefined}\n                className={cn(\n                  \"rounded\",\n                  compact ? \"min-w-6 px-1.5 py-0\" : \"min-w-7 px-2 py-0.5\",\n                  it === page\n                    ? \"bg-[var(--bg-inverse)] text-[var(--text-inverse)]\"\n                    : \"hover:bg-[var(--bg-hover)]\",\n                )}\n              >\n                {num.format(it + 1)}\n              </button>\n            ),\n          )}\n          <button\n            type=\"button\"\n            onClick={() => onPage(Math.min(totalPages - 1, page + 1))}\n            disabled={page >= totalPages - 1}\n            className={cn(\"rounded hover:bg-[var(--bg-hover)] disabled:opacity-40\", compact ? \"p-0.5\" : \"p-1\")}\n            aria-label={labels.nextPage}\n          >\n            <ChevronRight className={cn(\"rtl:-scale-x-100\", compact ? \"size-3.5\" : \"size-4\")} />\n          </button>\n        </div>\n      )}\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../src/components/data-table-pagination.tsx"],"sourcesContent":["import { useMemo } from \"react\";\nimport { ChevronLeft, ChevronRight } from \"lucide-react\";\nimport { cn } from \"../lib/cn\";\nimport { DEFAULT_DATA_TABLE_LABELS, type DataTableLabels } from \"./data-table-labels\";\nimport { useKitLabels, useKitLocale } from \"../i18n/kit-labels\";\nimport { usePhoneLayout } from \"../hooks/use-breakpoint\";\nimport { useLargeText } from \"../hooks/use-large-text\";\n\nexport const PAGE_SIZE_OPTIONS = [10, 25, 50, 100, 200] as const;\n\n/** The page-size steps, with the current size slotted in when it is not one of them. */\nfunction sizeOptions(pageSize: number): number[] {\n  const steps: number[] = [...PAGE_SIZE_OPTIONS];\n  if (!Number.isFinite(pageSize) || steps.includes(pageSize)) return steps;\n  return [...steps, pageSize].sort((a, b) => a - b);\n}\n\ninterface PaginationProps {\n  page: number;\n  totalPages: number;\n  pageSize: number;\n  total: number;\n  onPage: (p: number) => void;\n  /** Omit when the page size is not the user's to change (a server that fixes it):\n   *  the select is then not rendered at all, rather than rendered and inert. */\n  onPageSize?: (n: number) => void;\n  /** Over `dataTable` from `<UiKitProvider labels>`, over the English defaults. */\n  labels?: Partial<DataTableLabels>;\n  /** For the page numbers and page-size options; falls back to the provider's. */\n  locale?: string;\n  /** `\"compact\"` for a pager under a compact {@link DataTable} (lenkbank's in-card\n   *  tables): a slimmer footer and page buttons, so the pager is not the tallest row\n   *  of a table that was made compact on purpose. */\n  density?: \"comfortable\" | \"compact\";\n}\n\n/**\n * How many page numbers flank the current one on the strip: ±2, and ±1 on a phone at\n * Large and Extra large (0.32.1, the 360 px Extra-large sweep; docs/text-size-\n * harmonization.md §4). At 150 % a number button is 42 px, and \"‹ 1 2 3 … 494 ›\" was\n * 312 px on a 360 px phone's 262; one neighbour fewer on each side saves two buttons.\n */\nconst PAGE_WINDOW = 2;\nconst PAGE_WINDOW_LARGE_PHONE = 1;\n\n/**\n * The strip's two parts (0.32.1, same sweep, §4 \"nothing overflows\"). The arrows keep\n * the ends; the numbers between them wrap, centred, when even the narrower window does\n * not fit — a middle page of a long list (\"1 … 249 250 251 … 494\") at Extra large, or at\n * Normal on a narrow phone, where the one-row strip ran past the screen. Where the\n * strip fits it is one row, as before.\n */\nconst PAGE_STRIP = \"flex min-w-0 max-w-full items-center gap-1\";\nconst PAGE_NUMBERS = \"flex min-w-0 flex-wrap items-center justify-center gap-1\";\n\n/** Footer for {@link DataTable}: range summary, page-size select, and a\n *  windowed page-number strip (first/last + ±2 around the current page, ±1 on a phone\n *  at Large — see {@link PAGE_WINDOW}). */\nexport function Pagination({\n  page,\n  totalPages,\n  pageSize,\n  total,\n  onPage,\n  onPageSize,\n  labels: labelsProp,\n  locale: localeProp,\n  density = \"comfortable\",\n}: PaginationProps) {\n  const compact = density === \"compact\";\n  // prop > provider > English, like every other kit component. This defaulted straight\n  // to the English object, so a standalone pager under a translated provider still\n  // said \"Rows per page\" — only the pager INSIDE a DataTable was translated, because\n  // the table resolved the provider's labels and handed them down.\n  const labels = useKitLabels(\"dataTable\", DEFAULT_DATA_TABLE_LABELS, labelsProp);\n  const locale = useKitLocale(localeProp);\n  // The bare numbers on the strip and in the select are text too: `String(n)` is\n  // always ASCII digits, which is wrong for a locale that writes its own. The range\n  // summary is not formatted here — `pageRange` / `rowCount` take NUMBERS so the\n  // translation can format them itself, alongside the words around them.\n  const num = useMemo(() => new Intl.NumberFormat(locale), [locale]);\n  const large = useLargeText();\n  const phone = usePhoneLayout();\n  const radius = large && phone ? PAGE_WINDOW_LARGE_PHONE : PAGE_WINDOW;\n  const visible = useMemo(() => {\n    // Every page when that is no longer than the window would be (first, last, the\n    // current one, its neighbours and two ellipses).\n    if (totalPages <= 2 * radius + 3) return Array.from({ length: totalPages }, (_, i) => i);\n    const set = new Set<number>([0, totalPages - 1, page]);\n    for (let d = 1; d <= radius; d++) {\n      if (page - d >= 0) set.add(page - d);\n      if (page + d <= totalPages - 1) set.add(page + d);\n    }\n    return Array.from(set).sort((a, b) => a - b);\n  }, [page, totalPages, radius]);\n\n  const items: (number | \"ellipsis\")[] = [];\n  visible.forEach((p, idx) => {\n    if (idx > 0 && p - visible[idx - 1] > 1) items.push(\"ellipsis\");\n    items.push(p);\n  });\n\n  return (\n    <div\n      data-density={density}\n      className={cn(\n        \"flex flex-wrap items-center justify-between gap-2 border-t border-[var(--border)] text-xs text-[var(--text-secondary)]\",\n        compact ? \"px-2 py-1\" : \"px-3 py-2\",\n      )}\n    >\n      <div className=\"flex items-center gap-2\">\n        <span>\n          {pageSize === Infinity\n            ? labels.rowCount(total)\n            : labels.pageRange(page * pageSize + 1, Math.min(total, (page + 1) * pageSize), total)}\n        </span>\n        {onPageSize && (\n          <select\n            value={pageSize === Infinity ? \"all\" : pageSize}\n            onChange={(e) =>\n              onPageSize(e.target.value === \"all\" ? Infinity : Number(e.target.value))\n            }\n            className=\"rounded border border-[var(--border)] bg-[var(--bg-surface)] px-1 py-0.5 text-xs\"\n            aria-label={labels.pageSize}\n          >\n            {/* A `defaultPageSize` that is not one of the steps (keksdose's 5) is offered\n                too — a select whose value has no option shows its first one (\"10\"). */}\n            {sizeOptions(pageSize).map((n) => (\n              <option key={n} value={n}>\n                {num.format(n)}\n              </option>\n            ))}\n            <option value=\"all\">{labels.pageSizeAll}</option>\n          </select>\n        )}\n      </div>\n      {pageSize !== Infinity && totalPages > 1 && (\n        <div data-slot=\"page-strip\" className={PAGE_STRIP}>\n          <button\n            type=\"button\"\n            onClick={() => onPage(Math.max(0, page - 1))}\n            disabled={page === 0}\n            className={cn(\"rounded hover:bg-[var(--bg-hover)] disabled:opacity-40\", compact ? \"p-0.5\" : \"p-1\")}\n            aria-label={labels.prevPage}\n          >\n            {/* \"Previous\" points back along the line — left in LTR, right in RTL. */}\n            <ChevronLeft className={cn(\"rtl:-scale-x-100\", compact ? \"size-3.5\" : \"size-4\")} />\n          </button>\n          <div data-slot=\"page-numbers\" className={PAGE_NUMBERS}>\n            {items.map((it, i) =>\n              it === \"ellipsis\" ? (\n                <span key={`e${i}`} className=\"px-1 text-[var(--text-placeholder)]\">\n                  …\n                </span>\n              ) : (\n                <button\n                  key={it}\n                  type=\"button\"\n                  onClick={() => onPage(it)}\n                  // Which page you are on is carried only by a background colour\n                  // otherwise, and the strip is a row of bare numbers with nothing\n                  // else to tell them apart.\n                  aria-current={it === page ? \"page\" : undefined}\n                  className={cn(\n                    \"rounded\",\n                    compact ? \"min-w-6 px-1.5 py-0\" : \"min-w-7 px-2 py-0.5\",\n                    it === page\n                      ? \"bg-[var(--bg-inverse)] text-[var(--text-inverse)]\"\n                      : \"hover:bg-[var(--bg-hover)]\",\n                  )}\n                >\n                  {num.format(it + 1)}\n                </button>\n              ),\n            )}\n          </div>\n          <button\n            type=\"button\"\n            onClick={() => onPage(Math.min(totalPages - 1, page + 1))}\n            disabled={page >= totalPages - 1}\n            className={cn(\"rounded hover:bg-[var(--bg-hover)] disabled:opacity-40\", compact ? \"p-0.5\" : \"p-1\")}\n            aria-label={labels.nextPage}\n          >\n            <ChevronRight className={cn(\"rtl:-scale-x-100\", compact ? \"size-3.5\" : \"size-4\")} />\n          </button>\n        </div>\n      )}\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/components/data-table.d.ts

@@ -1,4 +1,4 @@
 import 'react';
-export { a as DEFAULT_DATA_TABLE_SORT_LABELS, b as DataTable, G as DataTableCellProps, c as DataTableChrome, d as DataTableColumn, e as DataTableDensity, H as DataTableHeadProps, g as DataTableProps, h as DataTableRowAction, i as DataTableSortLabels, F as FilterState, M as MobileSwipeActions, S as ServerPagination } from '../data-table-labels-DUELeXpa.js';
+export { a as DEFAULT_DATA_TABLE_SORT_LABELS, b as DataTable, G as DataTableCellProps, c as DataTableChrome, d as DataTableColumn, e as DataTableDensity, H as DataTableHeadProps, g as DataTableProps, h as DataTableRowAction, i as DataTableSortLabels, F as FilterState, M as MobileSwipeActions, S as ServerPagination } from '../data-table-labels-kpAAVi6g.js';
 export { SortState } from './data-table-sort.js';
 import './swipeable-row.js';

package/dist/components/data-table.js

@@ -1,7 +1,7 @@
 "use client";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { createElement } from "react";
-import { Fragment as Fragment2, useCallback, useEffect, useId, useMemo, useRef, useState } from "react";
+import { Fragment as Fragment2, isValidElement, useCallback, useEffect, useId, useMemo, useRef, useState } from "react";
 import { createPortal } from "react-dom";
 import {
   ArrowDown,
@@ -16,7 +16,9 @@ import {
   Trash2,
   X
 } from "lucide-react";
-import { Card, IconButton, Select, Spinner } from "./ui.js";
+import { Card, FOCUS_RING, IconButton, Select, Spinner } from "./ui.js";
+import { RowActions } from "./row-actions.js";
+import { useLargeText } from "../hooks/use-large-text.js";
 import { cn } from "../lib/cn.js";
 import {
   defaultFilterState,
@@ -33,7 +35,7 @@ import { useBodyScrollLock } from "../hooks/use-body-scroll-lock.js";
 import { useOverlayHistory } from "../hooks/use-overlay-history.js";
 import { FullBleedDialog } from "./full-bleed-dialog.js";
 import { Popover } from "./popover.js";
-import { useMediaQuery } from "../hooks/use-media-query.js";
+import { usePhoneLayout } from "../hooks/use-breakpoint.js";
 import { useAnnounce } from "../hooks/use-announce.js";
 import { DEFAULT_DATA_TABLE_LABELS, resolveDataTableLabels } from "./data-table-labels.js";
 import { useKitLabelOverrides, useKitLocale } from "../i18n/kit-labels.js";
@@ -73,6 +75,16 @@ async function runRowAction(action, row) {
   if (action.confirm && !await action.confirm(row)) return;
   action.onAction(row);
 }
+function toRowAction(a, row) {
+  return {
+    key: a.key,
+    label: a.label,
+    icon: isValidElement(a.icon) ? a.icon : a.icon != null && a.icon !== false ? /* @__PURE__ */ jsx(Fragment, { children: a.icon }) : void 0,
+    tone: a.tone,
+    disabledReason: a.action.disabledReason?.(row),
+    onSelect: () => void runRowAction(a.action, row)
+  };
+}
 function physicalSwipe(actions, dir) {
   const rtl = dir === "rtl";
   return {
@@ -102,6 +114,27 @@ function columnLabel(col, labels) {
   if (col.key === ROW_ACTIONS_KEY && labels) return labels.actions;
   return col.headerText ?? (typeof col.header === "string" ? col.header : col.key);
 }
+const CARD_NO_TRUNCATE = "large:[&_.truncate]:whitespace-normal large:[&_.truncate]:[overflow-wrap:anywhere]";
+function StackedFields({ columns, row, compact }) {
+  return /* @__PURE__ */ jsx(
+    "dl",
+    {
+      "data-card-fields": "stacked",
+      className: cn("relative flex min-w-0 flex-col", compact ? "gap-1.5 text-xs" : "gap-2.5 text-sm", CARD_NO_TRUNCATE),
+      children: columns.map((col) => /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+        /* @__PURE__ */ jsx("dt", { className: "text-xs uppercase tracking-wide text-[var(--text-muted)]", children: col.header }),
+        /* @__PURE__ */ jsx(
+          "dd",
+          {
+            ...dataAttrsOf(col.cellProps?.(row)),
+            className: "mt-0.5 min-w-0 break-words text-[var(--text-secondary)]",
+            children: col.cell(row)
+          }
+        )
+      ] }, col.key))
+    }
+  );
+}
 const DEFAULT_DATA_TABLE_SORT_LABELS = {
   sortBy: DEFAULT_DATA_TABLE_LABELS.sortBy,
   sortDefault: DEFAULT_DATA_TABLE_LABELS.sortDefault,
@@ -129,7 +162,9 @@ function MobileSort({
     {
       "data-table-mobile-sort": "",
       className: cn(
-        "flex items-center gap-2 border-b border-[var(--border)]",
+        // At Large the direction button shows its words (IconButton's label, §4); the
+        // row wraps so the select keeps a usable width on a 240 px card.
+        "flex flex-wrap items-center gap-2 border-b border-[var(--border)]",
         compact ? "px-3 py-1.5" : "px-4 py-2"
       ),
       children: [
@@ -139,7 +174,7 @@ function MobileSort({
           {
             id: selectId,
             size: compact ? "sm" : "md",
-            className: "min-w-0 flex-1",
+            className: "min-w-0 flex-1 large:basis-40",
             value: primary?.key ?? "",
             onChange: (e) => onPick(e.target.value || null),
             children: [
@@ -245,6 +280,8 @@ function DataTable({
   locale: localeProp,
   storageKeyPrefix = DEFAULT_PERSIST_PREFIX,
   mobileExpandAsDialog = false,
+  mobileDetailsInRow = false,
+  rowName,
   mobileDialogBackCloses = true,
   mobileGroupBy,
   mobileGroupLabel,
@@ -295,19 +332,21 @@ function DataTable({
       {
         key: ROW_ACTIONS_KEY,
         header: /* @__PURE__ */ jsx("span", { className: "sr-only", children: labels.actions }),
-        cell: (row) => /* @__PURE__ */ jsx("div", { className: "flex items-center justify-end gap-0.5", children: rowActionsFor(row).map((a) => /* @__PURE__ */ jsx(
-          IconButton,
+        // Through RowActions (0.32, §10.8): the icons inline at Normal, one "⋯"
+        // menu at Large once there are two — every label at once does not fit a
+        // row. Each control stops its own click: the row's handler already skips
+        // its controls, and this is for the caller who wraps the table in a
+        // clickable element of their own.
+        cell: (row) => /* @__PURE__ */ jsx(
+          RowActions,
           {
+            actions: rowActionsFor(row).map((a) => toRowAction(a, row)),
+            name: rowName?.(row),
             size: density === "compact" ? "2xs" : "xs",
-            label: a.label,
-            tone: a.tone === "danger" ? "danger" : void 0,
-            disabledReason: a.action.disabledReason?.(row),
-            stopPropagation: true,
-            onClick: () => void runRowAction(a.action, row),
-            children: a.icon
-          },
-          a.key
-        )) }),
+            labels: { actions: labels.actions },
+            className: "justify-end"
+          }
+        ),
         className: "w-px whitespace-nowrap text-end",
         headClassName: "w-px",
         // On a phone the same actions are the card's swipes.
@@ -315,7 +354,7 @@ function DataTable({
         noRowLink: true
       }
     ] : columnsProp,
-    [columnsProp, rowActions, rowActionsFor, labels.actions, density]
+    [columnsProp, rowActions, rowActionsFor, rowName, labels.actions, density]
   );
   const swipesFromActions = (row) => {
     const swipes = rowActionsFor(row).filter((a) => a.swipe && !a.action.disabledReason?.(row));
@@ -598,12 +637,23 @@ function DataTable({
   const footerValue = (col) => col.footer?.(sorted, slice);
   const footerHeadingId = useId();
   const columnsCountLabel = rowActions ? labels.columnsCount(visibleCount - 1, totalCount - 1) : labels.columnsCount(visibleCount, totalCount);
-  const isMdUp = useMediaQuery("(min-width: 768px)", true);
+  const isMdUp = !usePhoneLayout();
   const desktopScroller = useRef(null);
   const edgeFadeProps = useEdgeFade(desktopScroller, edgeFade && isMdUp);
   const mobileColumns = visibleColumns.filter((c) => !c.mobileHidden);
   const mobilePrimaryCol = mobileColumns.find((c) => c.mobilePrimary) ?? mobileColumns[0] ?? null;
   const mobileSecondaryColumns = mobileColumns.filter((c) => c !== mobilePrimaryCol);
+  const mobileDetailColumns = mobileDetailsInRow ? visibleColumns.filter((c) => c.mobileHidden) : [];
+  const large = useLargeText();
+  const opensRow = !!expandedRow || mobileDetailColumns.length > 0;
+  const openedRowContent = (row) => {
+    const detail = expandedRow?.(row) ?? null;
+    if (mobileDetailColumns.length === 0) return detail;
+    return /* @__PURE__ */ jsxs("div", { "data-row-details": "", className: cn("flex flex-col", compact ? "gap-2" : "gap-3"), children: [
+      /* @__PURE__ */ jsx(StackedFields, { columns: mobileDetailColumns, row, compact }),
+      detail
+    ] });
+  };
   const mobileCardLinkable = mobileColumns.every((c) => !c.noRowLink);
   const [mobileDir, setMobileDir] = useState("ltr");
   const mobileRootRef = (el) => {
@@ -640,24 +690,25 @@ function DataTable({
     return true;
   };
   const mobileDialogRow = mobileExpandAsDialog && !isMdUp ? mobileSlice.find((r) => isExpanded?.(r)) : void 0;
-  const mobileDialogContent = mobileDialogRow ? expandedRow?.(mobileDialogRow) : null;
+  const mobileDialogContent = mobileDialogRow ? openedRowContent(mobileDialogRow) : null;
   const dialogOpen = !!(mobileDialogRow && mobileDialogContent);
   const closeDialog = () => {
     if (mobileDialogRow) onRowClick?.(mobileDialogRow);
   };
   const renderMobileRow = (row) => {
     const expanded = isExpanded?.(row) ?? false;
-    const expansion = expanded ? expandedRow?.(row) : null;
+    const expansion = expanded ? openedRowContent(row) : null;
     const tint = rowClassName?.(row);
     const interactive = !!onRowClick;
-    const opensDetail = interactive && !!expandedRow;
+    const opensDetail = interactive && opensRow;
     const swipeActions = swipeActionsFor?.(row);
     const swipe = swipeActions ? physicalSwipe(swipeActions, mobileDir) : null;
     const swipeEnabled = !!swipe && !expanded;
     const href = mobileCardLinkable ? rowHref?.(row) : void 0;
     const cardClass = cn(
       "w-full text-start flex items-center",
-      compact ? "px-3 py-2 gap-2 text-sm" : "px-4 py-3 gap-3",
+      // §4: more room per row at Large — a taller row is a bigger tap target too.
+      compact ? "px-3 py-2 gap-2 text-sm large:py-3" : "px-4 py-3 gap-3 large:py-4",
       // Live #320's other half: the card acknowledges the touch before the sheet
       // arrives. On a cold route the data can take a beat, and an unacknowledged tap
       // reads as "did that register?" — which is most of what "abrupt" means here.
@@ -672,32 +723,49 @@ function DataTable({
       // 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 && "[-webkit-tap-highlight-color:transparent] focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-[var(--brand)]"
+      interactive && cn("[-webkit-tap-highlight-color:transparent] focus-visible:ring-inset", FOCUS_RING)
     );
     const cardInner = /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx("div", { className: cn("flex min-w-0 flex-1 flex-col", compact ? "gap-1" : "gap-2"), children: mobileCard ? mobileCard(row) : /* @__PURE__ */ jsxs(Fragment, { children: [
-        mobilePrimaryCol && /* @__PURE__ */ jsx("div", { ...dataAttrsOf(mobilePrimaryCol.cellProps?.(row)), className: "font-medium", children: mobilePrimaryCol.cell(row) }),
-        mobileSecondaryColumns.length > 0 && /* @__PURE__ */ jsx(
-          "dl",
-          {
-            className: cn(
-              "grid grid-cols-[auto_1fr] gap-x-3",
-              compact ? "gap-y-0.5 text-xs" : "gap-y-1 text-sm"
-            ),
-            children: mobileSecondaryColumns.map((col) => /* @__PURE__ */ jsxs(Fragment2, { children: [
-              /* @__PURE__ */ jsx("dt", { className: "text-xs uppercase tracking-wide text-[var(--text-muted)] self-center", children: col.header }),
-              /* @__PURE__ */ jsx(
-                "dd",
-                {
-                  ...dataAttrsOf(col.cellProps?.(row)),
-                  className: "min-w-0 text-[var(--text-secondary)] self-center",
-                  children: col.cell(row)
-                }
-              )
-            ] }, col.key))
-          }
-        )
-      ] }) }),
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: cn(
+            "flex min-w-0 flex-1 flex-col",
+            compact ? "gap-1 large:gap-2" : "gap-2 large:gap-3",
+            // §4 "nothing truncates": at Large a cell's own `truncate` wraps instead —
+            // the reader who chose bigger type is the one an ellipsis fails. A caller's
+            // `mobileCard` is its own layout and keeps what it chose.
+            !mobileCard && CARD_NO_TRUNCATE
+          ),
+          children: mobileCard ? mobileCard(row) : /* @__PURE__ */ jsxs(Fragment, { children: [
+            mobilePrimaryCol && /* @__PURE__ */ jsx("div", { ...dataAttrsOf(mobilePrimaryCol.cellProps?.(row)), className: "min-w-0 break-words font-medium", children: mobilePrimaryCol.cell(row) }),
+            mobileSecondaryColumns.length > 0 && large ? (
+              // §4: each label ABOVE its value at Large. Side by side, a label column
+              // sized to the widest label leaves a value a sliver of a 240 px card.
+              /* @__PURE__ */ jsx(StackedFields, { columns: mobileSecondaryColumns, row, compact })
+            ) : mobileSecondaryColumns.length > 0 && /* @__PURE__ */ jsx(
+              "dl",
+              {
+                className: cn(
+                  "grid grid-cols-[auto_1fr] gap-x-3",
+                  compact ? "gap-y-0.5 text-xs" : "gap-y-1 text-sm"
+                ),
+                children: mobileSecondaryColumns.map((col) => /* @__PURE__ */ jsxs(Fragment2, { children: [
+                  /* @__PURE__ */ jsx("dt", { className: "text-xs uppercase tracking-wide text-[var(--text-muted)] self-center", children: col.header }),
+                  /* @__PURE__ */ jsx(
+                    "dd",
+                    {
+                      ...dataAttrsOf(col.cellProps?.(row)),
+                      className: "min-w-0 text-[var(--text-secondary)] self-center",
+                      children: col.cell(row)
+                    }
+                  )
+                ] }, col.key))
+              }
+            )
+          ] })
+        }
+      ),
       opensDetail && // `aria-hidden`: the row already announces itself as a button with
       // `aria-expanded`, so the icon would only add a second, wordless stop.
       (mobileExpandAsDialog ? (
@@ -729,7 +797,7 @@ function DataTable({
         {
           href,
           onActivate: () => onRowClick(row),
-          "aria-expanded": expandedRow ? expanded : void 0,
+          "aria-expanded": opensRow ? expanded : void 0,
           className: cardClass,
           onKeyDown: (e) => {
             if (e.key !== " ") return;
@@ -759,7 +827,7 @@ function DataTable({
               onRowClick(row);
             }
           } : void 0,
-          "aria-expanded": expandedRow ? expanded : void 0,
+          "aria-expanded": opensRow ? expanded : void 0,
           className: cardClass,
           children: cardInner
         }
@@ -1049,14 +1117,14 @@ function DataTable({
                                       children: [
                                         /* @__PURE__ */ jsx("span", { children: col.header }),
                                         sortable && /* @__PURE__ */ jsx(Icon, { className: cn("size-3", active ? "opacity-100" : "opacity-40") }),
-                                        active && sorts.length > 1 && /* @__PURE__ */ jsx("span", { className: "text-[9px] font-semibold leading-none text-brand", children: sortIdx + 1 })
+                                        active && sorts.length > 1 && /* @__PURE__ */ jsx("span", { className: "text-micro font-semibold leading-none text-brand", children: sortIdx + 1 })
                                       ]
                                     }
                                   ) }),
                                   filter && /* @__PURE__ */ jsx(
                                     Popover,
                                     {
-                                      width: filter.type === "date" ? 420 : void 0,
+                                      width: filter.type === "date" ? "26.25rem" : void 0,
                                       labels: { panel: labels.filter },
                                       trigger: ({ toggle, ref }) => /* @__PURE__ */ jsx(
                                         "button",
@@ -1152,7 +1220,10 @@ function DataTable({
                                     className: cn(
                                       "border-t border-[var(--border)]",
                                       rowInteractive && "cursor-pointer hover:bg-[var(--bg-hover)]",
-                                      rowsFocusable && "focus-visible:bg-[var(--bg-hover)] focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-[var(--brand)]",
+                                      // The kit's focus frame width (§5, `--focus-ring-width`), drawn as an
+                                      // OUTLINE rather than FOCUS_RING's box-shadow: a shadow on a `<tr>`
+                                      // is not painted by every engine, an outline is.
+                                      rowsFocusable && "focus-visible:bg-[var(--bg-hover)] focus-visible:outline-[length:var(--focus-ring-width)] focus-visible:-outline-offset-2 focus-visible:outline-[var(--brand)]",
                                       rowClassName?.(row)
                                     ),
                                     onClick: rowInteractive ? (e) => {
@@ -1471,7 +1542,7 @@ function MobileFilters({
         children: [
           /* @__PURE__ */ jsx(Filter, { className: "size-4" }),
           /* @__PURE__ */ jsx("span", { children: labels.filters }),
-          activeCount > 0 && /* @__PURE__ */ jsx("span", { className: "inline-flex min-w-4 items-center justify-center rounded-full bg-[var(--info-bg)] px-1 text-[11px] font-semibold text-[var(--info)]", children: activeCount })
+          activeCount > 0 && /* @__PURE__ */ jsx("span", { className: "inline-flex min-w-4 items-center justify-center rounded-full bg-[var(--info-bg)] px-1 text-caption font-semibold text-[var(--info)]", children: activeCount })
         ]
       }
     ),