@eifi1/ui-kit 0.31.1 → 0.32.1

package/src/components/data-table.tsx

@@ -1,4 +1,4 @@
-import { Fragment, useCallback, useEffect, useId, useMemo, useRef, useState } from "react";
+import { Fragment, isValidElement, useCallback, useEffect, useId, useMemo, useRef, useState } from "react";
 import type { CSSProperties, ReactNode, TdHTMLAttributes, ThHTMLAttributes } from "react";
 import { createPortal } from "react-dom";
 import {
@@ -14,7 +14,9 @@ import {
   Trash2,
   X,
 } from "lucide-react";
-import { Card, IconButton, Select, Spinner } from "./ui";
+import { Card, FOCUS_RING, IconButton, Select, Spinner } from "./ui";
+import { RowActions, type RowAction } from "./row-actions";
+import { useLargeText } from "../hooks/use-large-text";
 import { cn } from "../lib/cn";
 import {
   defaultFilterState,
@@ -33,7 +35,7 @@ import { useBodyScrollLock } from "../hooks/use-body-scroll-lock";
 import { useOverlayHistory } from "../hooks/use-overlay-history";
 import { FullBleedDialog } from "./full-bleed-dialog";
 import { Popover } from "./popover";
-import { useMediaQuery } from "../hooks/use-media-query";
+import { usePhoneLayout } from "../hooks/use-breakpoint";
 import { useAnnounce } from "../hooks/use-announce";
 import { DEFAULT_DATA_TABLE_LABELS, resolveDataTableLabels, type DataTableLabels } from "./data-table-labels";
 import { useKitLabelOverrides, useKitLocale } from "../i18n/kit-labels";
@@ -366,6 +368,27 @@ export interface DataTableProps<T> {
    * of unfolding it inline (feedback #204). Desktop always uses inline expansion.
    */
   mobileExpandAsDialog?: boolean;
+  /**
+   * Show the `mobileHidden` columns in the OPENED row on the phone layout — inline
+   * under the card, or in the `mobileExpandAsDialog` dialog — so a column dropped from
+   * the card to keep it short is not lost (0.32, docs/text-size-harmonization.md §4:
+   * "a new `mobileDetailsInRow` puts the `mobileHidden` columns into the opened row, so
+   * nothing is lost"). At Large a card holds fewer facts per screen, and dropping one
+   * from the card must not drop it from the phone.
+   *
+   * Each column is a label above its value, BEFORE what `expandedRow` renders: the
+   * row's own facts first, then the app's detail or editor. A row opens as it always
+   * does (`onRowClick` toggling `isExpanded`); with this set it may open without an
+   * `expandedRow` at all. `rowActions`' column is one of them — the actions, which the
+   * card otherwise offers only as swipes, reachable by a tap. Desktop is unaffected.
+   */
+  mobileDetailsInRow?: boolean;
+  /**
+   * The row's name, as plain text — for the "⋯" menu its `rowActions` collapse into at
+   * Large ("Actions for Ada Example", §10.8). Without it every row's menu button is
+   * named "Actions", which a screen reader cannot tell apart down the list.
+   */
+  rowName?: (row: T) => string | undefined;
   /**
    * The phone row dialog's `backCloses` ({@link FullBleedDialog}): whether it pushes
    * its own history entry so Back dismisses it. On by default — right for a row whose
@@ -526,7 +549,10 @@ export interface DataTableProps<T> {
   /**
    * Per-row actions: an actions column of icon buttons at the row's end on desktop,
    * and the same actions as swipe actions on a phone card (where the column is not
-   * shown). kastlan's `ResourceListPage` appended this column by hand to every CRUD
+   * shown; with `mobileDetailsInRow` also as buttons in the opened row). At Large and
+   * Extra large two or more collapse into one "⋯" menu with each action's words
+   * (0.32, §10.8, `RowActions`) — name the rows with `rowName` so each menu button is
+   * "Actions for …". kastlan's `ResourceListPage` appended this column by hand to every CRUD
    * list — the edit pencil, the delete bin, a `useConfirm` before the delete, and a
    * `stopPropagation` on each so a press did not also open the row.
    *
@@ -637,6 +663,19 @@ async function runRowAction<T>(action: DataTableRowAction<T>, row: T): Promise<v
   action.onAction(row);
 }
 
+/** A resolved row action as {@link RowActions} takes it. Its `icon` is any node; a
+ *  non-element one (a string glyph) is wrapped, since RowAction wants an element. */
+function toRowAction<T>(a: ResolvedRowAction<T>, row: T): RowAction {
+  return {
+    key: a.key,
+    label: a.label,
+    icon: isValidElement(a.icon) ? a.icon : a.icon != null && a.icon !== false ? <>{a.icon}</> : undefined,
+    tone: a.tone,
+    disabledReason: a.action.disabledReason?.(row),
+    onSelect: () => void runRowAction(a.action, row),
+  };
+}
+
 /** See {@link DataTableProps.chrome}. */
 export type DataTableChrome = "full" | "minimal";
 
@@ -734,6 +773,46 @@ function columnLabel<T>(col: DataTableColumn<T>, labels?: DataTableLabels): stri
   return col.headerText ?? (typeof col.header === "string" ? col.header : col.key);
 }
 
+// ---------- Phone card at Large (0.32) ----------
+
+/**
+ * §4 "nothing truncates" in a phone card at Large and Extra large: a cell's own
+ * `truncate` (a kit cell, a chip, the app's span) wraps instead — and breaks inside a
+ * word too long for the card rather than running out of it. A descendant rule, so it
+ * reaches the cells without the table knowing what they render; `large:`, so Normal
+ * keeps every ellipsis it had.
+ */
+const CARD_NO_TRUNCATE =
+  "large:[&_.truncate]:whitespace-normal large:[&_.truncate]:[overflow-wrap:anywhere]";
+
+/**
+ * Columns as label-above-value pairs: the phone card's fields at Large (§4), and the
+ * opened row's `mobileDetailsInRow` at every size. Each pair is a `<div>` in the
+ * `<dl>` — the grouping HTML allows — so a pair keeps together and the gap falls
+ * BETWEEN facts rather than between a label and its own value. `relative` holds a
+ * header's `sr-only` text (an actions column's), as every kit container must.
+ */
+function StackedFields<T>({ columns, row, compact }: { columns: DataTableColumn<T>[]; row: T; compact: boolean }) {
+  return (
+    <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)}
+    >
+      {columns.map((col) => (
+        <div key={col.key} className="min-w-0">
+          <dt className="text-xs uppercase tracking-wide text-[var(--text-muted)]">{col.header}</dt>
+          <dd
+            {...dataAttrsOf(col.cellProps?.(row))}
+            className="mt-0.5 min-w-0 break-words text-[var(--text-secondary)]"
+          >
+            {col.cell(row)}
+          </dd>
+        </div>
+      ))}
+    </dl>
+  );
+}
+
 // ---------- Phone sort control (keksdose K10) ----------
 
 /**
@@ -813,7 +892,9 @@ function MobileSort<T>({
     <div
       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",
       )}
     >
@@ -823,7 +904,7 @@ function MobileSort<T>({
       <Select
         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)}
       >
@@ -1014,6 +1095,8 @@ export function DataTable<T>({
   locale: localeProp,
   storageKeyPrefix = DEFAULT_PERSIST_PREFIX,
   mobileExpandAsDialog = false,
+  mobileDetailsInRow = false,
+  rowName,
   mobileDialogBackCloses = true,
   mobileGroupBy,
   mobileGroupLabel,
@@ -1085,24 +1168,19 @@ export function DataTable<T>({
             {
               key: ROW_ACTIONS_KEY,
               header: <span className="sr-only">{labels.actions}</span>,
+              // 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) => (
-                <div className="flex items-center justify-end gap-0.5">
-                  {rowActionsFor(row).map((a) => (
-                    <IconButton
-                      key={a.key}
-                      size={density === "compact" ? "2xs" : "xs"}
-                      label={a.label}
-                      tone={a.tone === "danger" ? "danger" : undefined}
-                      disabledReason={a.action.disabledReason?.(row)}
-                      // The row's click handler already skips its own controls; this is for
-                      // the caller who wraps the table in a clickable element of their own.
-                      stopPropagation
-                      onClick={() => void runRowAction(a.action, row)}
-                    >
-                      {a.icon}
-                    </IconButton>
-                  ))}
-                </div>
+                <RowActions
+                  actions={rowActionsFor(row).map((a) => toRowAction(a, row))}
+                  name={rowName?.(row)}
+                  size={density === "compact" ? "2xs" : "xs"}
+                  labels={{ actions: labels.actions }}
+                  className="justify-end"
+                />
               ),
               className: "w-px whitespace-nowrap text-end",
               headClassName: "w-px",
@@ -1112,7 +1190,7 @@ export function DataTable<T>({
             },
           ]
         : columnsProp,
-    [columnsProp, rowActions, rowActionsFor, labels.actions, density],
+    [columnsProp, rowActions, rowActionsFor, rowName, labels.actions, density],
   );
   const swipesFromActions = (row: T): MobileSwipeActions | null => {
     const swipes = rowActionsFor(row).filter((a) => a.swipe && !a.action.disabledReason?.(row));
@@ -1575,10 +1653,15 @@ export function DataTable<T>({
   const columnsCountLabel = rowActions
     ? labels.columnsCount(visibleCount - 1, totalCount - 1)
     : labels.columnsCount(visibleCount, totalCount);
-  // Match Tailwind's `md` breakpoint: we render either the table or the card
-  // list — never both — so we don't double up DOM nodes that screen readers and
-  // integration tests would have to disambiguate.
-  const isMdUp = useMediaQuery("(min-width: 768px)", true);
+  // Match the `md:` breakpoint at the text size in force: we render either the table or
+  // the card list — never both — so we don't double up DOM nodes that screen readers and
+  // integration tests would have to disambiguate. `usePhoneLayout()` itself, not its twin
+  // `useBreakpoint("md")`: the same query an app's own phone checks ask (keksdose's
+  // sticky editor footer), so the card list and the full-screen row dialog switch with
+  // them and never a frame apart (§10.4 "usePhoneLayout() is the single answer"; 0.32.1,
+  // keksdose's 0.32 report, where `md` and `max-md` both missed at 767.5 px). Without
+  // `matchMedia` (SSR, jsdom) it is the table, as before.
+  const isMdUp = !usePhoneLayout();
   // `edgeFade` (0.25) on the desktop scroller; the phone list never scrolls sideways.
   const desktopScroller = useRef<HTMLDivElement | null>(null);
   const edgeFadeProps = useEdgeFade(desktopScroller, edgeFade && isMdUp);
@@ -1592,6 +1675,26 @@ export function DataTable<T>({
   const mobilePrimaryCol =
     mobileColumns.find((c) => c.mobilePrimary) ?? mobileColumns[0] ?? null;
   const mobileSecondaryColumns = mobileColumns.filter((c) => c !== mobilePrimaryCol);
+  // The columns the card leaves out, for the opened row (`mobileDetailsInRow`).
+  const mobileDetailColumns = mobileDetailsInRow ? visibleColumns.filter((c) => c.mobileHidden) : [];
+  // Large and Extra large (§4 "DataTable phone card"): the card's labels go ABOVE their
+  // values, nothing in it truncates, and the rows get more room. Most of it is a
+  // `large:` class; the label/value grid needs a different STRUCTURE (each pair in a
+  // box of its own), which a class cannot write.
+  const large = useLargeText();
+  // What an opened phone row shows: the card's left-out columns first (when asked
+  // for), then the app's own `expandedRow`. Desktop keeps `expandedRow` alone.
+  const opensRow = !!expandedRow || mobileDetailColumns.length > 0;
+  const openedRowContent = (row: T): ReactNode => {
+    const detail = expandedRow?.(row) ?? null;
+    if (mobileDetailColumns.length === 0) return detail;
+    return (
+      <div data-row-details="" className={cn("flex flex-col", compact ? "gap-2" : "gap-3")}>
+        <StackedFields columns={mobileDetailColumns} row={row} compact={compact} />
+        {detail}
+      </div>
+    );
+  };
   // The phone card IS the anchor, so unlike the desktop table there is no other
   // cell to move the row link into: if any cell the card renders owns a link, the
   // card itself cannot be one (feedback #451 — same nesting rule as `linkColumn`
@@ -1679,7 +1782,7 @@ export function DataTable<T>({
   // When dialog-mode is on, the expanded row's detail goes into a bottom-sheet
   // modal instead of unfolding inline. Only one row is ever expanded at a time.
   const mobileDialogRow = mobileExpandAsDialog && !isMdUp ? mobileSlice.find((r) => isExpanded?.(r)) : undefined;
-  const mobileDialogContent = mobileDialogRow ? expandedRow?.(mobileDialogRow) : null;
+  const mobileDialogContent = mobileDialogRow ? openedRowContent(mobileDialogRow) : null;
   // The full-screen row dialog. Its panel, header, scroll lock and Back handling all
   // live in {@link FullBleedDialog} now — this was the only copy of that shell until
   // the transactions create card needed the same one (Keksdose live #307's follow-up),
@@ -1694,7 +1797,7 @@ export function DataTable<T>({
   // share identical row markup.
   const renderMobileRow = (row: T) => {
     const expanded = isExpanded?.(row) ?? false;
-    const expansion = expanded ? expandedRow?.(row) : null;
+    const expansion = expanded ? openedRowContent(row) : null;
     const tint = rowClassName?.(row);
     // Use div+role="button" rather than a real <button> so cells that
     // contain their own interactive controls (status toggles, action
@@ -1706,7 +1809,7 @@ export function DataTable<T>({
     // values are not editable". A chevron is the affordance every list on a phone
     // uses for exactly this, and it points the way the row actually opens: right into
     // a sheet, or down into an inline panel that flips it when expanded.
-    const opensDetail = interactive && !!expandedRow;
+    const opensDetail = interactive && opensRow;
     const swipeActions = swipeActionsFor?.(row);
     const swipe = swipeActions ? physicalSwipe(swipeActions, mobileDir) : null;
     // An expanded row never swipes: the editor below it owns the horizontal space,
@@ -1715,7 +1818,8 @@ export function DataTable<T>({
     const href = mobileCardLinkable ? rowHref?.(row) : undefined;
     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.
@@ -1731,8 +1835,7 @@ export function DataTable<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 &&
-        "[-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),
     );
     // The card's content is written once and worn by either tag below. Note that
     // the primary cell is rendered RAW here, never through `linkColumn` — the card
@@ -1743,18 +1846,31 @@ export function DataTable<T>({
       <>
         {/* The card's own content keeps the column it always had; the chevron sits
             beside it rather than inside, so a caller's `mobileCard` is untouched. */}
-        <div className={cn("flex min-w-0 flex-1 flex-col", compact ? "gap-1" : "gap-2")}>
+        <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,
+          )}
+        >
           {mobileCard ? (
             mobileCard(row)
           ) : (
             <>
               {/* Only the `data-*` half of `cellProps` — see its note. */}
               {mobilePrimaryCol && (
-                <div {...dataAttrsOf(mobilePrimaryCol.cellProps?.(row))} className="font-medium">
+                <div {...dataAttrsOf(mobilePrimaryCol.cellProps?.(row))} className="min-w-0 break-words font-medium">
                   {mobilePrimaryCol.cell(row)}
                 </div>
               )}
-              {mobileSecondaryColumns.length > 0 && (
+              {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.
+                <StackedFields columns={mobileSecondaryColumns} row={row} compact={compact} />
+              ) : mobileSecondaryColumns.length > 0 && (
                 <dl
                   className={cn(
                     "grid grid-cols-[auto_1fr] gap-x-3",
@@ -1807,7 +1923,7 @@ export function DataTable<T>({
         <RowLink
           href={href}
           onActivate={() => onRowClick!(row)}
-          aria-expanded={expandedRow ? expanded : undefined}
+          aria-expanded={opensRow ? 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.
@@ -1848,7 +1964,7 @@ export function DataTable<T>({
                 }
               : undefined
           }
-          aria-expanded={expandedRow ? expanded : undefined}
+          aria-expanded={opensRow ? expanded : undefined}
           className={cardClass}
         >
           {cardInner}
@@ -2238,7 +2354,7 @@ export function DataTable<T>({
                           )}
                           {/* Priority badge, only meaningful with 2+ sort keys */}
                           {active && sorts.length > 1 && (
-                            <span className="text-[9px] font-semibold leading-none text-brand">
+                            <span className="text-micro font-semibold leading-none text-brand">
                               {sortIdx + 1}
                             </span>
                           )}
@@ -2246,7 +2362,9 @@ export function DataTable<T>({
                       </Tooltip>
                       {filter && (
                         <Popover
-                          width={filter.type === "date" ? 420 : undefined}
+                          // 420 px at Normal, in rem so the calendar grows with its
+                          // text (§3.2); Popover caps it at the viewport.
+                          width={filter.type === "date" ? "26.25rem" : undefined}
                           // The panel is the column's filter, and says so. Unnamed it
                           // was announced as the kit-wide fallback, "Popover".
                           labels={{ panel: labels.filter }}
@@ -2364,8 +2482,11 @@ export function DataTable<T>({
                     className={cn(
                       "border-t border-[var(--border)]",
                       rowInteractive && "cursor-pointer hover:bg-[var(--bg-hover)]",
+                      // 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-2 focus-visible:-outline-offset-2 focus-visible:outline-[var(--brand)]",
+                        "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={
@@ -2787,7 +2908,7 @@ function MobileFilters<T>({
         <Filter className="size-4" />
         <span>{labels.filters}</span>
         {activeCount > 0 && (
-          <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)]">
+          <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)]">
             {activeCount}
           </span>
         )}

package/src/components/date-picker.tsx

@@ -15,10 +15,11 @@ import {
 } from "../i18n/kit-labels";
 import { splitTriggerAria } from "./trigger-aria";
 import type { TriggerAria } from "./trigger-aria";
-import { Button, FIELD_BASE, FIELD_TRIGGER, FIELD_FLOATING_PAD, FIELD_INVALID, PHONE_QUERY } from "./ui";
+import { Button, FIELD_BASE, FIELD_TRIGGER, FIELD_FLOATING_PAD, FIELD_INVALID } from "./ui";
+import { FOCUS_RING_WIDTH } from "./focus-ring";
 import { FieldBox, FieldLabelLine, useFieldMessages } from "./field-parts";
 import { FullBleedDialog } from "./full-bleed-dialog";
-import { useMediaQuery } from "../hooks/use-media-query";
+import { usePhoneLayout, type RemLength } from "../hooks/use-breakpoint";
 import { DEFAULT_MINI_CALENDAR_LABELS, MiniCalendar, type MiniCalendarProps } from "./mini-calendar";
 import { DEFAULT_MONTH_PICKER_LABELS } from "./month-picker";
 import { Popover } from "./popover";
@@ -205,6 +206,16 @@ function CustomTrigger({
   return render(attrs, valueId);
 }
 
+/**
+ * The trigger's value wraps instead of truncating at Large and Extra large (0.32.1, the
+ * 360 px Extra-large sweep; docs/text-size-harmonization.md §4 "nothing truncates"). A
+ * range ("01/09/2026 – 30/09/2026") is 312 px at 150 %, and on a 360 px phone it read
+ * "01/09/2026 – 30/…" — its end, the half a reader needs, was the half cut off. It breaks
+ * at its spaces; a single date breaks only where it cannot fit at all. A `large:` class,
+ * so Normal keeps its one-line field.
+ */
+const VALUE_WRAP_AT_LARGE = "large:whitespace-normal large:break-words";
+
 /**
  * The field-shaped button that opens the calendar.
  *
@@ -319,7 +330,7 @@ function DateFieldTrigger({
 
   return (
     <button {...attrs}>
-      <span id={valueId} className={cn("truncate", !hasValue && "text-[var(--text-placeholder)]")}>
+      <span id={valueId} className={cn("truncate", VALUE_WRAP_AT_LARGE, !hasValue && "text-[var(--text-placeholder)]")}>
         {/* `|| " "` (a NON-BREAKING space) — triggerText is "" when there is no value and no
             placeholder was passed. An empty span has no line box, so the
             trigger collapses to its padding and sits shorter than every
@@ -395,11 +406,12 @@ function DateField({
   panelLabel: string;
   invalid?: boolean;
   className?: string;
-  /** Popover panel width; omit for the default (a bare calendar). */
-  width?: number;
+  /** Popover panel width; omit for the default (a bare calendar). In rem so it grows
+   *  with the text size, like the Popover's own default (§3.2). */
+  width?: number | RemLength;
   onClear: () => void;
   /** Open as a full-screen sheet instead of the popover — the picker decides when
-   *  (below {@link PHONE_QUERY}). */
+   *  (in the phone layout, `usePhoneLayout()`). */
   sheet?: boolean;
   /** The sheet's `FullBleedDialog backCloses`. */
   sheetBackCloses?: boolean;
@@ -556,6 +568,23 @@ function DateField({
   );
 }
 
+/**
+ * The ‹ date › (today) row on a phone at Large and Extra large (0.32.1, the 360 px
+ * Extra-large sweep; docs/text-size-harmonization.md §4): the field takes the first line
+ * on its own, whole and with all four corners, and the buttons share the line under it
+ * as one joined strip. Three 2.5rem buttons are 180 px at 150 %, and on a 360 px phone
+ * they left the field 84 px — "Book… 0" for "Booking date 07/09/2026" — where a 360 px
+ * row would hold the date only by cutting it. `large:max-sm:`, the scaled phone width,
+ * so a tablet or a desktop at Large keeps the one row, and Normal is unchanged.
+ */
+const STEP_ROW_STACK_AT_LARGE = cn(
+  "large:max-sm:flex-wrap large:max-sm:gap-y-2",
+  "large:max-sm:[&>[data-slot=date-step-field]]:order-first large:max-sm:[&>[data-slot=date-step-field]]:basis-full",
+  "large:max-sm:[&>[data-slot=date-step-field]]:ms-0 large:max-sm:[&_[role=combobox]]:rounded-md",
+  // The buttons (each in its tooltip's wrapper) share the line under the field.
+  "large:max-sm:[&>span]:flex-1 large:max-sm:[&>span>button]:w-full",
+);
+
 /** One ‹ / › day-step button, sized to sit flush beside the field. */
 function StepButton({
   icon: Icon,
@@ -943,7 +972,8 @@ function JumpCalendar({
                       // 44px rows: the touch-target size, and four of them stand as tall
                       // as a month of days, so the panel does not jump as the views swap.
                       "h-11 rounded px-1 text-sm tabular-nums transition-colors",
-                      "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset",
+                      FOCUS_RING_WIDTH,
+                      "focus-visible:outline-none focus-visible:ring-inset",
                       // A --brand ring on a --brand fill exists only in the DOM.
                       end && !disabled ? "focus-visible:ring-[var(--brand-contrast)]" : "focus-visible:ring-[var(--brand)]",
                       disabled
@@ -1102,6 +1132,9 @@ export function DatePicker(props: DatePickerProps) {
       disabled={disabled}
       invalid={messages.isInvalid}
       className={step ? "min-w-0 flex-1" : className}
+      // Named for STEP_ROW_STACK_AT_LARGE; only in the row, so a caller's own
+      // `data-slot` on a bare field is left alone.
+      {...(wrapped ? { "data-slot": "date-step-field" } : {})}
       hasValue={Boolean(value)}
       triggerText={value ? render(value) : (placeholder ?? "")}
       onClear={() => onChange("")}
@@ -1170,6 +1203,7 @@ export function DatePicker(props: DatePickerProps) {
         // the trigger, which raising the trigger alone covered. Hover raises nothing: it
         // changes no border, and would let a hovered › cover a focused field's edge.
         "[&>*:focus-within]:z-20 [&>*:active]:z-20 [&>*:has([aria-invalid=true])]:z-10",
+        STEP_ROW_STACK_AT_LARGE,
         className,
       )}
     >
@@ -1288,7 +1322,7 @@ export interface DateRangePickerProps extends DatePickerBaseProps {
    */
   renderTrigger?: (props: DateRangeTriggerRenderProps) => ReactNode;
   /**
-   * Below {@link PHONE_QUERY} the panel opens as a full-screen sheet (`FullBleedDialog`)
+   * In the phone layout (`usePhoneLayout()`) the panel opens as a full-screen sheet (`FullBleedDialog`)
    * with presets in a grid above the calendar and Apply pinned in the footer, instead
    * of the 440px popover that hung off a 360px screen (keksdose's report range field,
    * which hand-rolled exactly this). This is its `backCloses`: on by default, so Back
@@ -1615,7 +1649,7 @@ export function DateRangePicker(props: DateRangePickerProps) {
       : `${a}${separator}…`
     : (placeholder ?? "");
   const hasPresets = Boolean(presets && presets.length > 0);
-  const sheet = useMediaQuery(PHONE_QUERY, false);
+  const sheet = usePhoneLayout();
   const commitRange = (f: string, t: string, presetId: string | undefined) => {
     setOwnPreset(presetId);
     // Two arguments when no preset is involved — exactly the 0.7 call, so a caller's
@@ -1635,7 +1669,7 @@ export function DateRangePicker(props: DateRangePickerProps) {
       disabled={disabled}
       invalid={messages.isInvalid}
       // Widen so the preset column sits beside the calendar (default otherwise).
-      width={hasPresets ? 440 : undefined}
+      width={hasPresets ? "27.5rem" : undefined}
       hasValue={Boolean(from || to)}
       triggerText={triggerText}
       onClear={() => commitRange("", "", undefined)}

package/src/components/description-list.tsx

@@ -165,7 +165,7 @@ export function DescriptionList({
     ? { gridTemplateColumns: `repeat(auto-fill, minmax(min(100%, ${track}), 1fr))` }
     : undefined;
   const ctx: ListContextValue = { layout, numeric, prose, density, columns: columns ?? 2, placeholder };
-  const text = density === "tight" ? "text-[11px] leading-4" : density === "compact" ? "text-xs" : "text-sm";
+  const text = density === "tight" ? "text-caption leading-4" : density === "compact" ? "text-xs" : "text-sm";
 
   if (stacked) {
     return (
@@ -299,7 +299,7 @@ export function DescriptionItem({
     <dt
       className={cn(
         "flex min-w-0 items-center gap-1 text-[var(--text-muted)]",
-        cards && (density === "tight" ? "text-[10px] uppercase tracking-wide" : "text-xs uppercase tracking-wide"),
+        cards && (density === "tight" ? "text-micro uppercase tracking-wide" : "text-xs uppercase tracking-wide"),
         // Stacked terms are a step smaller than the detail, as kastlan's dialogs set
         // them; in a list that is already small they stay the list's own size.
         stacked && density === "comfortable" && "text-xs",

package/src/components/dialog-frame.tsx

@@ -3,6 +3,7 @@ import type { ReactNode } from "react";
 import { X } from "lucide-react";
 
 import { cn } from "../lib/cn";
+import { FOCUS_RING } from "./focus-ring";
 import { Modal, ModalCloseContext } from "./modal";
 import type { ModalProps } from "./modal";
 import { useKitLabels } from "../i18n/kit-labels";
@@ -211,7 +212,7 @@ function FrameClose({ label, onClose }: { label?: string; onClose: () => void })
       type="button"
       onClick={close}
       aria-label={labels.close}
-      className="-me-1.5 -mt-1 shrink-0 rounded p-1.5 text-[var(--text-muted)] outline-none hover:bg-[var(--bg-hover)] hover:text-[var(--text-secondary)] focus-visible:ring-2 focus-visible:ring-[var(--brand)]"
+      className={cn("-me-1.5 -mt-1 shrink-0 rounded p-1.5 text-[var(--text-muted)] outline-none hover:bg-[var(--bg-hover)] hover:text-[var(--text-secondary)]", FOCUS_RING)}
     >
       <X aria-hidden className="size-5" />
     </button>

package/src/components/disclosure.tsx

@@ -3,6 +3,7 @@ import type { ComponentPropsWithoutRef, ReactNode } from "react";
 import { ChevronDown } from "lucide-react";
 
 import { cn } from "../lib/cn";
+import { FOCUS_RING } from "./focus-ring";
 // Read at the moment of closing, as `useCloseTransition` does: the setting can change
 // under a long-lived page.
 import { prefersReducedMotion } from "../hooks/use-close-transition";
@@ -345,10 +346,10 @@ export function Disclosure({
             // card's hover paint on the stretched area / the row, not the text box.
             cn(
               "min-w-0 flex-1 after:absolute after:inset-0 after:content-['']",
-              "focus-visible:after:ring-2 focus-visible:after:ring-inset focus-visible:after:ring-[var(--brand)]",
+              "focus-visible:after:ring-[length:var(--focus-ring-width)] focus-visible:after:ring-inset focus-visible:after:ring-[var(--brand)]",
               card ? cn("after:rounded-lg", joined && "after:rounded-b-none") : !menu && "after:rounded-sm",
             )
-          : "focus-visible:ring-2 focus-visible:ring-[var(--brand)]",
+          : FOCUS_RING,
         card
           ? cn(
               "items-center justify-between rounded-lg p-4",

package/src/components/dropdown.tsx

@@ -11,6 +11,8 @@ import { useAnchoredPanel } from "../hooks/use-anchored-panel";
 import { useEscapeKey, useOutsideClick } from "../hooks/use-dismiss";
 import { useOverlayHistory } from "../hooks/use-overlay-history";
 import { cn } from "../lib/cn";
+import { FIELD_TOUCH_TEXT } from "./ui";
+import { FOCUS_RING } from "./focus-ring";
 import { useAnchorDir } from "./use-anchor-dir";
 
 /**
@@ -34,7 +36,7 @@ import { useAnchorDir } from "./use-anchor-dir";
  * while it is up, so the rule is the hook's rather than each caller's. `backCloses`
  * is for the ONE case where a second entry would be wrong: a caller whose panel is
  * itself a `PickerSheet`, which already registers one — both comboboxes swap shape at
- * {@link PHONE_QUERY}, and two entries would cost two Back presses to close one sheet.
+ * the phone layout (`usePhoneLayout()`), and two entries would cost two Back presses to close one sheet.
  *
  * ## One outside-click rule for the whole package
  *
@@ -206,7 +208,13 @@ export function DropdownSearchHeader({
         aria-controls={listboxId}
         aria-activedescendant={activeId}
         aria-autocomplete={listboxId ? "list" : undefined}
-        className="w-full rounded-sm bg-transparent text-sm outline-none placeholder:text-[var(--text-placeholder)] text-[var(--text-primary)] focus-visible:ring-2 focus-visible:ring-[var(--brand)]"
+        // FIELD_TOUCH_TEXT: a search box is a field — at least 16 px on touch, or iOS zooms
+        // the page the moment a picker opens and focuses it (§10.1).
+        className={cn(
+          "w-full rounded-sm bg-transparent text-sm outline-none placeholder:text-[var(--text-placeholder)] text-[var(--text-primary)]",
+          FOCUS_RING,
+          FIELD_TOUCH_TEXT,
+        )}
       />
     </div>
   );

package/src/components/facing-pair.ts

@@ -28,7 +28,9 @@ export type FacingSide = "left" | "right";
 export const FACING_SIDES: readonly FacingSide[] = ["left", "right"];
 
 /** The whole band a facing y axis occupies: its ticks, and the strip the rotated title
- *  is drawn in — whether or not this chart is the one that spends it. */
+ *  is drawn in — whether or not this chart is the one that spends it. In px at Normal:
+ *  it is also the right axis' declared `width`, which the chart scales with the text
+ *  (see {@link facingHeadingPad} for a heading's). */
 export function facingBand(tickWidth: number = AXIS_TICK_WIDTH): number {
   return axisBandWidth(tickWidth, true);
 }
@@ -75,12 +77,17 @@ export function facingAxes({
 
 /** What a column heading is padded by to sit over the PLOT rather than the column: the
  *  axis band, on the side that column's axis stands on. Physical padding on purpose —
- *  the chart under it does not flip in RTL, so neither may the heading's offset. */
+ *  the chart under it does not flip in RTL, so neither may the heading's offset.
+ *
+ *  `scale` is the text size's (`useTextSize().scale`): the chart draws its bands that
+ *  many times wider from Large up (docs/text-size-harmonization.md §10.10), so a heading
+ *  passes the same factor to stay over its plot. Both sides by the same factor, as the
+ *  chart does. */
 export function facingHeadingPad(
   side: FacingSide,
   tickWidth: number = AXIS_TICK_WIDTH,
+  scale = 1,
 ): Pick<CSSProperties, "paddingLeft" | "paddingRight"> {
-  return side === "left"
-    ? { paddingLeft: facingBand(tickWidth) }
-    : { paddingRight: facingBand(tickWidth) };
+  const band = axisBandWidth(tickWidth, true, scale);
+  return side === "left" ? { paddingLeft: band } : { paddingRight: band };
 }