@eifi1/ui-kit 0.31.1 → 0.32.1

package/src/components/choice-card.tsx

@@ -93,8 +93,10 @@ const CARD =
   // The focus mark is the CARD's, not the 16px box's: the card is what was clicked and
   // what the eye is on. An OUTLINE rather than a ring, because the checked state already
   // spends the ring — two `ring-*` widths on one element are decided by stylesheet
-  // order, and the loser would be the focus mark. Offset, so the two never merge.
-  "has-[:focus-visible]:outline-2 has-[:focus-visible]:outline-offset-2 has-[:focus-visible]:outline-[var(--brand)] " +
+  // order, and the loser would be the focus mark. Offset, so the two never merge. Its
+  // width is the kit's focus frame (0.32, §5: `--focus-ring-width`, 3 px under More
+  // contrast) — `FOCUS_RING` itself is a ring, which this mark cannot be.
+  "has-[:focus-visible]:outline-[length:var(--focus-ring-width)] has-[:focus-visible]:outline-offset-2 has-[:focus-visible]:outline-[var(--brand)] " +
   // Read from the input too, so a card disabled by its `<fieldset>` fades as well.
   "has-[:disabled]:cursor-not-allowed has-[:disabled]:opacity-60";
 
@@ -107,10 +109,12 @@ const CARD_INVALID =
 const BOX =
   "peer size-4 shrink-0 appearance-none border border-[var(--border-strong)] bg-[var(--bg-surface)] transition-colors " +
   "checked:border-[var(--brand)] focus:outline-none disabled:cursor-not-allowed";
-const CHECKBOX = "rounded-[4px] checked:bg-[var(--brand)]";
-// A radio's dot is its BORDER: a 5px brand border round a surface-coloured 4px
-// centre. No glyph to lay over it, and it scales with the box.
-const RADIO = "rounded-full checked:border-[5px]";
+const CHECKBOX = "rounded checked:bg-[var(--brand)]";
+// A radio's dot is its BORDER: a 0.3125rem brand border (5px at Normal) round a
+// surface-coloured 0.375rem centre. No glyph to lay over it, and in rem since 0.32
+// (§3.2) it scales with the box — a 5px border on a 24px box at 150 % was a ring, not a
+// dot.
+const RADIO = "rounded-full checked:border-[0.3125rem]";
 
 export const ChoiceCard = forwardRef<HTMLInputElement, ChoiceCardProps>(function ChoiceCard(
   {
@@ -219,7 +223,7 @@ export const ChoiceCard = forwardRef<HTMLInputElement, ChoiceCardProps>(function
           </span>
         )}
         {showError && (
-          <span id={errorId} className="mt-1 block text-[11px] leading-tight text-[var(--danger)]">
+          <span id={errorId} className="mt-1 block text-caption leading-tight text-[var(--danger)]">
             {error}
           </span>
         )}
@@ -341,8 +345,9 @@ export const ActionCard = forwardRef<HTMLButtonElement, ActionCardProps>(functio
   const look = cn(
     "flex w-full items-start gap-3 rounded-lg border border-[var(--border)] bg-[var(--bg-surface)] p-3 text-start shadow-sm transition-colors",
     "hover:border-[var(--brand)] hover:bg-[var(--bg-hover)]",
-    // The outline, as on ChoiceCard: the card is what the eye is on.
-    "focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--brand)]",
+    // The outline, as on ChoiceCard: the card is what the eye is on — the focus frame's
+    // width (§5).
+    "focus:outline-none focus-visible:outline-[length:var(--focus-ring-width)] focus-visible:outline-offset-2 focus-visible:outline-[var(--brand)]",
     "disabled:cursor-not-allowed disabled:opacity-60 disabled:hover:border-[var(--border)] disabled:hover:bg-[var(--bg-surface)]",
     className,
   );
@@ -523,7 +528,7 @@ export function ChoiceCardGroup<T extends string>(props: ChoiceCardGroupProps<T>
             {required && <RequiredMark />}
           </legend>
         )}
-        <div className={cn("grid gap-2 sm:grid-cols-2", className)}>
+        <div className={cn("grid grid-cols-1 gap-2 sm:grid-cols-2", className)}>
           {options.map((o) => (
             <ChoiceCard
               key={o.value}
@@ -543,7 +548,7 @@ export function ChoiceCardGroup<T extends string>(props: ChoiceCardGroupProps<T>
           ))}
         </div>
         {showError && (
-          <p id={errorId} className="mt-1 text-[11px] leading-tight text-[var(--danger)]">
+          <p id={errorId} className="mt-1 text-caption leading-tight text-[var(--danger)]">
             {error}
           </p>
         )}

package/src/components/column-mapper.tsx

@@ -367,7 +367,7 @@ export function ColumnRoleTable<
                   scope="col"
                   className="min-w-36 py-2 align-top"
                 >
-                  <span className="block max-w-56 truncate pb-1 text-[11px] font-normal text-[var(--text-muted)]">
+                  <span className="block max-w-56 truncate pb-1 text-caption font-normal text-[var(--text-muted)]">
                     {name}
                   </span>
                   <Select

package/src/components/combobox-core.tsx

@@ -13,8 +13,8 @@ import { cn } from "../lib/cn";
 import { CLIPS_ATTRIBUTE } from "../lib/clipping";
 import { DropdownSearchHeader } from "./dropdown";
 import { PickerSheet, SHEET_ROW_CLASS } from "./picker-sheet";
-import { useMediaQuery } from "../hooks/use-media-query";
-import { FLOATING_LABEL_STATIC, PHONE_QUERY, Spinner } from "./ui";
+import { usePhoneLayout } from "../hooks/use-breakpoint";
+import { FLOATING_LABEL_STATIC, Spinner } from "./ui";
 import { useAnchorDir } from "./use-anchor-dir";
 import { type AnchorRect } from "../hooks/use-anchored-rect";
 import { useAnchoredPanel, type AnchoredPanel } from "../hooks/use-anchored-panel";
@@ -364,7 +364,7 @@ export function useComboboxCore<V extends string | number>({
   // old value, and tapping the search box or the X was equally fatal. `PickerSheet`
   // stops `mousedown` for exactly this reason, but that guard was written for
   // `useDropdown`'s listener and never covered this hook.
-  const isPhone = useMediaQuery(PHONE_QUERY, false);
+  const isPhone = usePhoneLayout();
   useOutsideClick([triggerRef, panelRef], close, open && !isPhone);
   useEscapeKey(closeToTrigger, open);
 
@@ -437,7 +437,7 @@ export function useComboboxCore<V extends string | number>({
 
 /** The error line under a field — the same type as `ui.tsx`'s (module-private) one,
  *  so a combobox's message is indistinguishable from an Input's. */
-const FIELD_ERROR_CLASS = "mt-1 text-[11px] leading-tight text-[var(--danger)]";
+const FIELD_ERROR_CLASS = "mt-1 text-caption leading-tight text-[var(--danger)]";
 
 /**
  * {@link Input}'s `error` for the combobox family: the message under the field, its
@@ -589,7 +589,7 @@ export function ComboboxPanel<V extends string | number>({
   // The phone gets a full-screen sheet instead of an anchored panel (live #200).
   // Same core, same results, same handlers — only the container differs, so the
   // two presentations cannot drift in what they offer.
-  const isPhone = useMediaQuery(PHONE_QUERY, false);
+  const isPhone = usePhoneLayout();
   // Every row the keyboard can land on, the create row included — passed over, like a
   // disabled option, while a write lock holds it.
   const rows: readonly { disabled?: boolean }[] = showCreate
@@ -732,7 +732,7 @@ export function ComboboxPanel<V extends string | number>({
                 role="presentation"
                 className={cn(
                   "font-semibold uppercase tracking-wide text-[var(--text-muted)]",
-                  isPhone ? "px-4 pb-1 pt-3 text-xs" : "px-3 pb-0.5 pt-2 text-[11px] first:pt-1",
+                  isPhone ? "px-4 pb-1 pt-3 text-xs" : "px-3 pb-0.5 pt-2 text-caption first:pt-1",
                 )}
               >
                 {o.group}
@@ -906,7 +906,8 @@ export function ComboboxPanel<V extends string | number>({
         top: placement.top,
         ...inline,
         width: rect.width,
-        minWidth: 220,
+        // 220 px at Normal, in rem so the panel's text keeps its room at Large (§3.2).
+        minWidth: "13.75rem",
         maxHeight: placement.maxHeight,
       }}
       className={cn(

package/src/components/combobox.tsx

@@ -2,12 +2,12 @@ import { Fragment, useId, useMemo, useRef, useState } from "react";
 import type { ComponentPropsWithoutRef, ReactNode, Ref, RefObject } from "react";
 import { createPortal } from "react-dom";
 import { ChevronDown, Plus, X } from "lucide-react";
-import { FIELD_BASE, FIELD_FLOATING_PAD, FIELD_INVALID, PHONE_QUERY } from "./ui";
+import { FIELD_BASE, FIELD_FLOATING_PAD, FIELD_INVALID } from "./ui";
 import { cn } from "../lib/cn";
 import { useDropdown } from "./dropdown";
 import { useAnchoredPanel } from "../hooks/use-anchored-panel";
 import { useAnchorDir } from "./use-anchor-dir";
-import { useMediaQuery } from "../hooks/use-media-query";
+import { usePhoneLayout } from "../hooks/use-breakpoint";
 import { PickerSheet, SHEET_ROW_CLASS } from "./picker-sheet";
 import {
   ComboboxFieldLabel,
@@ -339,7 +339,7 @@ export function Combobox(props: ComboboxProps) {
   // `backCloses` is the desktop half of live #309: the phone's list IS a
   // {@link PickerSheet}, which registers its own history entry, so registering a
   // second one here would cost two Back presses to dismiss one sheet.
-  const isPhone = useMediaQuery(PHONE_QUERY, false);
+  const isPhone = usePhoneLayout();
   const { open, setOpen, wrapperRef, panelRef } = useDropdown({ backCloses: !isPhone });
   const primaryOnly = usePrimaryPressOnly();
   const [active, setActive] = useState(-1);
@@ -673,7 +673,7 @@ export function Combobox(props: ComboboxProps) {
                   {group !== undefined && (
                     <li
                       role="presentation"
-                      className="px-4 pb-0.5 pt-3 text-[11px] font-semibold uppercase tracking-wide text-[var(--text-muted)]"
+                      className="px-4 pb-0.5 pt-3 text-caption font-semibold uppercase tracking-wide text-[var(--text-muted)]"
                     >
                       {group}
                     </li>
@@ -730,7 +730,7 @@ export function Combobox(props: ComboboxProps) {
                 {group !== undefined && (
                   <li
                     role="presentation"
-                    className="px-3 pb-0.5 pt-2 text-[11px] font-semibold uppercase tracking-wide text-[var(--text-muted)] first:pt-1"
+                    className="px-3 pb-0.5 pt-2 text-caption font-semibold uppercase tracking-wide text-[var(--text-muted)] first:pt-1"
                   >
                     {group}
                   </li>
@@ -978,7 +978,7 @@ export function InlineEntityCombobox<V extends string | number, C extends ComboC
   // See the twin above on why these hang off the generated id.
   const listboxId = `${generated}-listbox`;
   const optionId = (index: number) => `${generated}-option-${index}`;
-  const isPhone = useMediaQuery(PHONE_QUERY, false);
+  const isPhone = usePhoneLayout();
   // See the twin above: the phone sheet owns its own Back entry (live #309).
   const { open, setOpen, wrapperRef, panelRef } = useDropdown({ backCloses: !isPhone });
   const primaryOnly = usePrimaryPressOnly();
@@ -1357,7 +1357,7 @@ export function InlineEntityCombobox<V extends string | number, C extends ComboC
                 {o.group && o.group !== matches[i - 1]?.group && (
                   <li
                     role="presentation"
-                    className="px-4 pb-0.5 pt-3 text-[11px] font-semibold uppercase tracking-wide text-[var(--text-muted)]"
+                    className="px-4 pb-0.5 pt-3 text-caption font-semibold uppercase tracking-wide text-[var(--text-muted)]"
                   >
                     {o.group}
                   </li>
@@ -1420,7 +1420,7 @@ export function InlineEntityCombobox<V extends string | number, C extends ComboC
               {o.group && o.group !== matches[i - 1]?.group && (
                 <li
                   role="presentation"
-                  className="px-3 pb-0.5 pt-2 text-[11px] font-semibold uppercase tracking-wide text-[var(--text-muted)] first:pt-1"
+                  className="px-3 pb-0.5 pt-2 text-caption font-semibold uppercase tracking-wide text-[var(--text-muted)] first:pt-1"
                 >
                   {o.group}
                 </li>

package/src/components/country-select.tsx

@@ -532,7 +532,7 @@ export function CountrySelect<Clearable extends boolean = false>({
     <div {...rest} className={className}>
       {box}
       {textHint && (
-        <p id={hintId} className="mt-1 text-[11px] leading-tight text-[var(--text-muted)]">
+        <p id={hintId} className="mt-1 text-caption leading-tight text-[var(--text-muted)]">
           {hint}
         </p>
       )}

package/src/components/currency-select.tsx

@@ -63,7 +63,7 @@ export function CurrencyFlag({ country, className, ...rest }: CurrencyFlagProps)
       // code printed next to it, and a reader that met both would hear the currency
       // twice.
       aria-hidden
-      className={cn("fi inline-block w-5 h-[15px] rounded-sm shadow-[0_0_0_1px_rgba(0,0,0,0.08)] shrink-0", `fi-${country}`, className)}
+      className={cn("fi inline-block w-5 h-[0.9375rem] rounded-sm shadow-[0_0_0_1px_rgba(0,0,0,0.08)] shrink-0", `fi-${country}`, className)}
     />
   );
 }
@@ -341,7 +341,7 @@ export function CurrencySelect({
           is `absolute` with no `top`, so it opens at its place in the flow — under the
           caption, had the caption come first. */}
       {textHint && (
-        <p id={hintId} className="mt-1 text-[11px] leading-tight text-[var(--text-muted)]">
+        <p id={hintId} className="mt-1 text-caption leading-tight text-[var(--text-muted)]">
           {hint}
         </p>
       )}
@@ -356,4 +356,4 @@ export function CurrencySelect({
 
 // The error line under a field — the type of `ui.tsx`'s (module-private) one, so a
 // CurrencySelect's message is indistinguishable from an Input's.
-const FIELD_ERROR_CLASS = "mt-1 text-[11px] leading-tight text-[var(--danger)]";
+const FIELD_ERROR_CLASS = "mt-1 text-caption leading-tight text-[var(--danger)]";

package/src/components/data-table-filter-popover.tsx

@@ -1,6 +1,8 @@
 import { useCallback } from "react";
 import { X } from "lucide-react";
 import { cn } from "../lib/cn";
+import { FIELD_TOUCH_TEXT } from "./ui";
+import { FOCUS_RING } from "./focus-ring";
 import { MiniCalendar } from "./mini-calendar";
 import { dateRangePresets } from "../lib/dates";
 import { resolveFilter } from "./data-table-filters";
@@ -71,7 +73,11 @@ export function FilterPopover<T>({
   // border going from --border to --border-strong is not a location. The ring is, and it
   // is the package's brand focus colour, as on every field in ui.tsx.
   const inputBase =
-    "block w-full rounded border border-[var(--border)] bg-[var(--bg-surface)] px-2 py-1.5 text-sm text-[var(--text-secondary)] placeholder:text-[var(--text-placeholder)] focus:border-[var(--border-strong)] focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--brand)]";
+    "block w-full rounded border border-[var(--border)] bg-[var(--bg-surface)] px-2 py-1.5 text-sm text-[var(--text-secondary)] placeholder:text-[var(--text-placeholder)] focus:border-[var(--border-strong)] focus:outline-none " +
+    FOCUS_RING +
+    " " +
+    // §10.1: a filter field is a field — 16 px on touch, or iOS zooms on focus.
+    FIELD_TOUCH_TEXT;
   const buttonBase =
     "rounded border border-[var(--border)] bg-[var(--bg-surface)] px-2 py-1 text-xs text-[var(--text-secondary)] hover:bg-[var(--bg-hover)]";
 

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

@@ -3,6 +3,8 @@ import { ChevronLeft, ChevronRight } from "lucide-react";
 import { cn } from "../lib/cn";
 import { DEFAULT_DATA_TABLE_LABELS, type DataTableLabels } from "./data-table-labels";
 import { useKitLabels, useKitLocale } from "../i18n/kit-labels";
+import { usePhoneLayout } from "../hooks/use-breakpoint";
+import { useLargeText } from "../hooks/use-large-text";
 
 export const PAGE_SIZE_OPTIONS = [10, 25, 50, 100, 200] as const;
 
@@ -32,8 +34,28 @@ interface PaginationProps {
   density?: "comfortable" | "compact";
 }
 
+/**
+ * How many page numbers flank the current one on the strip: ±2, and ±1 on a phone at
+ * Large and Extra large (0.32.1, the 360 px Extra-large sweep; docs/text-size-
+ * harmonization.md §4). At 150 % a number button is 42 px, and "‹ 1 2 3 … 494 ›" was
+ * 312 px on a 360 px phone's 262; one neighbour fewer on each side saves two buttons.
+ */
+const PAGE_WINDOW = 2;
+const PAGE_WINDOW_LARGE_PHONE = 1;
+
+/**
+ * The strip's two parts (0.32.1, same sweep, §4 "nothing overflows"). The arrows keep
+ * the ends; the numbers between them wrap, centred, when even the narrower window does
+ * not fit — a middle page of a long list ("1 … 249 250 251 … 494") at Extra large, or at
+ * Normal on a narrow phone, where the one-row strip ran past the screen. Where the
+ * strip fits it is one row, as before.
+ */
+const PAGE_STRIP = "flex min-w-0 max-w-full items-center gap-1";
+const PAGE_NUMBERS = "flex min-w-0 flex-wrap items-center justify-center gap-1";
+
 /** Footer for {@link DataTable}: range summary, page-size select, and a
- *  windowed page-number strip (first/last + ±2 around the current page). */
+ *  windowed page-number strip (first/last + ±2 around the current page, ±1 on a phone
+ *  at Large — see {@link PAGE_WINDOW}). */
 export function Pagination({
   page,
   totalPages,
@@ -57,15 +79,20 @@ export function Pagination({
   // summary is not formatted here — `pageRange` / `rowCount` take NUMBERS so the
   // translation can format them itself, alongside the words around them.
   const num = useMemo(() => new Intl.NumberFormat(locale), [locale]);
+  const large = useLargeText();
+  const phone = usePhoneLayout();
+  const radius = large && phone ? PAGE_WINDOW_LARGE_PHONE : PAGE_WINDOW;
   const visible = useMemo(() => {
-    if (totalPages <= 7) return Array.from({ length: totalPages }, (_, i) => i);
+    // Every page when that is no longer than the window would be (first, last, the
+    // current one, its neighbours and two ellipses).
+    if (totalPages <= 2 * radius + 3) return Array.from({ length: totalPages }, (_, i) => i);
     const set = new Set<number>([0, totalPages - 1, page]);
-    for (let d = 1; d <= 2; d++) {
+    for (let d = 1; d <= radius; d++) {
       if (page - d >= 0) set.add(page - d);
       if (page + d <= totalPages - 1) set.add(page + d);
     }
     return Array.from(set).sort((a, b) => a - b);
-  }, [page, totalPages]);
+  }, [page, totalPages, radius]);
 
   const items: (number | "ellipsis")[] = [];
   visible.forEach((p, idx) => {
@@ -108,7 +135,7 @@ export function Pagination({
         )}
       </div>
       {pageSize !== Infinity && totalPages > 1 && (
-        <div className="flex items-center gap-1">
+        <div data-slot="page-strip" className={PAGE_STRIP}>
           <button
             type="button"
             onClick={() => onPage(Math.max(0, page - 1))}
@@ -119,32 +146,34 @@ export function Pagination({
             {/* "Previous" points back along the line — left in LTR, right in RTL. */}
             <ChevronLeft className={cn("rtl:-scale-x-100", compact ? "size-3.5" : "size-4")} />
           </button>
-          {items.map((it, i) =>
-            it === "ellipsis" ? (
-              <span key={`e${i}`} className="px-1 text-[var(--text-placeholder)]">
-                …
-              </span>
-            ) : (
-              <button
-                key={it}
-                type="button"
-                onClick={() => onPage(it)}
-                // Which page you are on is carried only by a background colour
-                // otherwise, and the strip is a row of bare numbers with nothing
-                // else to tell them apart.
-                aria-current={it === page ? "page" : undefined}
-                className={cn(
-                  "rounded",
-                  compact ? "min-w-6 px-1.5 py-0" : "min-w-7 px-2 py-0.5",
-                  it === page
-                    ? "bg-[var(--bg-inverse)] text-[var(--text-inverse)]"
-                    : "hover:bg-[var(--bg-hover)]",
-                )}
-              >
-                {num.format(it + 1)}
-              </button>
-            ),
-          )}
+          <div data-slot="page-numbers" className={PAGE_NUMBERS}>
+            {items.map((it, i) =>
+              it === "ellipsis" ? (
+                <span key={`e${i}`} className="px-1 text-[var(--text-placeholder)]">
+                  …
+                </span>
+              ) : (
+                <button
+                  key={it}
+                  type="button"
+                  onClick={() => onPage(it)}
+                  // Which page you are on is carried only by a background colour
+                  // otherwise, and the strip is a row of bare numbers with nothing
+                  // else to tell them apart.
+                  aria-current={it === page ? "page" : undefined}
+                  className={cn(
+                    "rounded",
+                    compact ? "min-w-6 px-1.5 py-0" : "min-w-7 px-2 py-0.5",
+                    it === page
+                      ? "bg-[var(--bg-inverse)] text-[var(--text-inverse)]"
+                      : "hover:bg-[var(--bg-hover)]",
+                  )}
+                >
+                  {num.format(it + 1)}
+                </button>
+              ),
+            )}
+          </div>
           <button
             type="button"
             onClick={() => onPage(Math.min(totalPages - 1, page + 1))}