@eifi1/ui-kit 0.32.0 → 0.32.2

package/dist/wizard/wizard-summary.js

@@ -15,7 +15,7 @@ function WizardSummary({
   return /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
     /* @__PURE__ */ jsx("h2", { className: "text-lg font-semibold text-[var(--text-primary)]", children: l.reviewTitle }),
     sections.map((section, sIdx) => /* @__PURE__ */ jsxs(Card, { children: [
-      /* @__PURE__ */ jsxs(CardHeader, { className: "pb-2", children: [
+      /* @__PURE__ */ jsxs(CardHeader, { className: "pb-2", stackAction: false, children: [
         /* @__PURE__ */ jsx(CardTitle, { className: "text-base", children: section.label }),
         section.stepIndex !== void 0 && onEditStep && /* @__PURE__ */ jsx(CardAction, { children: /* @__PURE__ */ jsx(Tooltip, { label: l.edit, children: /* @__PURE__ */ jsx(
           IconButton,

package/dist/wizard/wizard-summary.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/wizard/wizard-summary.tsx"],"sourcesContent":["import { Pencil } from \"lucide-react\";\nimport { Card, CardAction, CardContent, CardHeader, CardTitle, IconButton } from \"../components/ui\";\nimport { Tooltip } from \"../components/tooltip\";\nimport type { SummarySection, WizardLabels } from \"./types\";\nimport { DEFAULT_WIZARD_LABELS } from \"./types\";\nimport { useKitLabels } from \"../i18n/kit-labels\";\n\n/**\n * The review step: one card per section, each row a label/value pair, each card\n * carrying an edit button back to the step it came from.\n *\n * Sections are data, not children, because \"jump back to step N\" is the whole\n * point of the component and a caller assembling its own cards invariably drops\n * it. Labels and values are `ReactNode`, so a value can be a badge or a link.\n *\n * A section with no `stepIndex` (file-level counts, a total) is a card without an\n * edit button. `disabled` greys every edit button at once — while the commit runs,\n * when jumping back would show a step whose edits can no longer reach the request.\n */\nexport function WizardSummary({\n  sections,\n  onEditStep,\n  disabled = false,\n  labels,\n}: {\n  sections: SummarySection[];\n  /** Called with the section's `stepIndex`. Optional only for a summary whose\n   *  sections name no step at all. */\n  onEditStep?: (stepIndex: number) => void;\n  /** Disable every edit button (e.g. `wizard.isSubmitting`). */\n  disabled?: boolean;\n  labels?: Partial<WizardLabels>;\n}) {\n  const l = useKitLabels(\"wizard\", DEFAULT_WIZARD_LABELS, labels);\n\n  return (\n    <div className=\"space-y-4\">\n      <h2 className=\"text-lg font-semibold text-[var(--text-primary)]\">{l.reviewTitle}</h2>\n      {sections.map((section, sIdx) => (\n        <Card key={sIdx}>\n          {/* CardHeader is a grid, and CardAction is the top-right column it\n              reserves — the edit button has to go through it or it stacks under\n              the title instead of sitting beside it. */}\n          <CardHeader className=\"pb-2\">\n            <CardTitle className=\"text-base\">{section.label}</CardTitle>\n            {section.stepIndex !== undefined && onEditStep && (\n              <CardAction>\n                {/* The kit Tooltip, not a native `title`: it shows on keyboard focus too,\n                    and an app with a one-tooltip rule (keksdose dev#523) sees one. */}\n                <Tooltip label={l.edit}>\n                  <IconButton\n                    size=\"sm\"\n                    variant=\"ghost\"\n                    aria-label={l.edit}\n                    disabled={disabled}\n                    onClick={() => onEditStep(section.stepIndex as number)}\n                  >\n                    <Pencil />\n                  </IconButton>\n                </Tooltip>\n              </CardAction>\n            )}\n          </CardHeader>\n          <CardContent>\n            <dl className=\"grid gap-2 text-sm\">\n              {section.items.map((item, iIdx) => (\n                <div key={iIdx}>\n                  {iIdx > 0 && (\n                    <div className=\"mb-2 border-t border-[var(--border)]\" role=\"presentation\" />\n                  )}\n                  <div className=\"flex items-start justify-between gap-4\">\n                    <dt className=\"text-[var(--text-muted)]\">{item.label}</dt>\n                    <dd className=\"text-end font-medium text-[var(--text-primary)]\">\n                      {item.value}\n                    </dd>\n                  </div>\n                </div>\n              ))}\n            </dl>\n          </CardContent>\n        </Card>\n      ))}\n    </div>\n  );\n}\n"],"mappings":";AAqCM,cAMI,YANJ;AArCN,SAAS,cAAc;AACvB,SAAS,MAAM,YAAY,aAAa,YAAY,WAAW,kBAAkB;AACjF,SAAS,eAAe;AAExB,SAAS,6BAA6B;AACtC,SAAS,oBAAoB;AActB,SAAS,cAAc;AAAA,EAC5B;AAAA,EACA;AAAA,EACA,WAAW;AAAA,EACX;AACF,GAQG;AACD,QAAM,IAAI,aAAa,UAAU,uBAAuB,MAAM;AAE9D,SACE,qBAAC,SAAI,WAAU,aACb;AAAA,wBAAC,QAAG,WAAU,oDAAoD,YAAE,aAAY;AAAA,IAC/E,SAAS,IAAI,CAAC,SAAS,SACtB,qBAAC,QAIC;AAAA,2BAAC,cAAW,WAAU,QACpB;AAAA,4BAAC,aAAU,WAAU,aAAa,kBAAQ,OAAM;AAAA,QAC/C,QAAQ,cAAc,UAAa,cAClC,oBAAC,cAGC,8BAAC,WAAQ,OAAO,EAAE,MAChB;AAAA,UAAC;AAAA;AAAA,YACC,MAAK;AAAA,YACL,SAAQ;AAAA,YACR,cAAY,EAAE;AAAA,YACd;AAAA,YACA,SAAS,MAAM,WAAW,QAAQ,SAAmB;AAAA,YAErD,8BAAC,UAAO;AAAA;AAAA,QACV,GACF,GACF;AAAA,SAEJ;AAAA,MACA,oBAAC,eACC,8BAAC,QAAG,WAAU,sBACX,kBAAQ,MAAM,IAAI,CAAC,MAAM,SACxB,qBAAC,SACE;AAAA,eAAO,KACN,oBAAC,SAAI,WAAU,wCAAuC,MAAK,gBAAe;AAAA,QAE5E,qBAAC,SAAI,WAAU,0CACb;AAAA,8BAAC,QAAG,WAAU,4BAA4B,eAAK,OAAM;AAAA,UACrD,oBAAC,QAAG,WAAU,mDACX,eAAK,OACR;AAAA,WACF;AAAA,WATQ,IAUV,CACD,GACH,GACF;AAAA,SAxCS,IAyCX,CACD;AAAA,KACH;AAEJ;","names":[]}
+{"version":3,"sources":["../../src/wizard/wizard-summary.tsx"],"sourcesContent":["import { Pencil } from \"lucide-react\";\nimport { Card, CardAction, CardContent, CardHeader, CardTitle, IconButton } from \"../components/ui\";\nimport { Tooltip } from \"../components/tooltip\";\nimport type { SummarySection, WizardLabels } from \"./types\";\nimport { DEFAULT_WIZARD_LABELS } from \"./types\";\nimport { useKitLabels } from \"../i18n/kit-labels\";\n\n/**\n * The review step: one card per section, each row a label/value pair, each card\n * carrying an edit button back to the step it came from.\n *\n * Sections are data, not children, because \"jump back to step N\" is the whole\n * point of the component and a caller assembling its own cards invariably drops\n * it. Labels and values are `ReactNode`, so a value can be a badge or a link.\n *\n * A section with no `stepIndex` (file-level counts, a total) is a card without an\n * edit button. `disabled` greys every edit button at once — while the commit runs,\n * when jumping back would show a step whose edits can no longer reach the request.\n */\nexport function WizardSummary({\n  sections,\n  onEditStep,\n  disabled = false,\n  labels,\n}: {\n  sections: SummarySection[];\n  /** Called with the section's `stepIndex`. Optional only for a summary whose\n   *  sections name no step at all. */\n  onEditStep?: (stepIndex: number) => void;\n  /** Disable every edit button (e.g. `wizard.isSubmitting`). */\n  disabled?: boolean;\n  labels?: Partial<WizardLabels>;\n}) {\n  const l = useKitLabels(\"wizard\", DEFAULT_WIZARD_LABELS, labels);\n\n  return (\n    <div className=\"space-y-4\">\n      <h2 className=\"text-lg font-semibold text-[var(--text-primary)]\">{l.reviewTitle}</h2>\n      {sections.map((section, sIdx) => (\n        <Card key={sIdx}>\n          {/* CardHeader is a grid, and CardAction is the top-right column it\n              reserves — the edit button has to go through it or it stacks under\n              the title instead of sitting beside it. `stackAction={false}`: the pencil\n              is named by `aria-label` and stays an icon at Large, so it keeps its\n              place beside the title there too (0.32.1). */}\n          <CardHeader className=\"pb-2\" stackAction={false}>\n            <CardTitle className=\"text-base\">{section.label}</CardTitle>\n            {section.stepIndex !== undefined && onEditStep && (\n              <CardAction>\n                {/* The kit Tooltip, not a native `title`: it shows on keyboard focus too,\n                    and an app with a one-tooltip rule (keksdose dev#523) sees one. */}\n                <Tooltip label={l.edit}>\n                  <IconButton\n                    size=\"sm\"\n                    variant=\"ghost\"\n                    aria-label={l.edit}\n                    disabled={disabled}\n                    onClick={() => onEditStep(section.stepIndex as number)}\n                  >\n                    <Pencil />\n                  </IconButton>\n                </Tooltip>\n              </CardAction>\n            )}\n          </CardHeader>\n          <CardContent>\n            <dl className=\"grid gap-2 text-sm\">\n              {section.items.map((item, iIdx) => (\n                <div key={iIdx}>\n                  {iIdx > 0 && (\n                    <div className=\"mb-2 border-t border-[var(--border)]\" role=\"presentation\" />\n                  )}\n                  <div className=\"flex items-start justify-between gap-4\">\n                    <dt className=\"text-[var(--text-muted)]\">{item.label}</dt>\n                    <dd className=\"text-end font-medium text-[var(--text-primary)]\">\n                      {item.value}\n                    </dd>\n                  </div>\n                </div>\n              ))}\n            </dl>\n          </CardContent>\n        </Card>\n      ))}\n    </div>\n  );\n}\n"],"mappings":";AAqCM,cAQI,YARJ;AArCN,SAAS,cAAc;AACvB,SAAS,MAAM,YAAY,aAAa,YAAY,WAAW,kBAAkB;AACjF,SAAS,eAAe;AAExB,SAAS,6BAA6B;AACtC,SAAS,oBAAoB;AActB,SAAS,cAAc;AAAA,EAC5B;AAAA,EACA;AAAA,EACA,WAAW;AAAA,EACX;AACF,GAQG;AACD,QAAM,IAAI,aAAa,UAAU,uBAAuB,MAAM;AAE9D,SACE,qBAAC,SAAI,WAAU,aACb;AAAA,wBAAC,QAAG,WAAU,oDAAoD,YAAE,aAAY;AAAA,IAC/E,SAAS,IAAI,CAAC,SAAS,SACtB,qBAAC,QAMC;AAAA,2BAAC,cAAW,WAAU,QAAO,aAAa,OACxC;AAAA,4BAAC,aAAU,WAAU,aAAa,kBAAQ,OAAM;AAAA,QAC/C,QAAQ,cAAc,UAAa,cAClC,oBAAC,cAGC,8BAAC,WAAQ,OAAO,EAAE,MAChB;AAAA,UAAC;AAAA;AAAA,YACC,MAAK;AAAA,YACL,SAAQ;AAAA,YACR,cAAY,EAAE;AAAA,YACd;AAAA,YACA,SAAS,MAAM,WAAW,QAAQ,SAAmB;AAAA,YAErD,8BAAC,UAAO;AAAA;AAAA,QACV,GACF,GACF;AAAA,SAEJ;AAAA,MACA,oBAAC,eACC,8BAAC,QAAG,WAAU,sBACX,kBAAQ,MAAM,IAAI,CAAC,MAAM,SACxB,qBAAC,SACE;AAAA,eAAO,KACN,oBAAC,SAAI,WAAU,wCAAuC,MAAK,gBAAe;AAAA,QAE5E,qBAAC,SAAI,WAAU,0CACb;AAAA,8BAAC,QAAG,WAAU,4BAA4B,eAAK,OAAM;AAAA,UACrD,oBAAC,QAAG,WAAU,mDACX,eAAK,OACR;AAAA,WACF;AAAA,WATQ,IAUV,CACD,GACH,GACF;AAAA,SA1CS,IA2CX,CACD;AAAA,KACH;AAEJ;","names":[]}

package/dist/wizard.d.ts

@@ -6,7 +6,7 @@ export { WizardStep, WizardStepProps } from './wizard/wizard-step.js';
 export { WizardSummary } from './wizard/wizard-summary.js';
 export { StepperNav } from './wizard/stepper-nav.js';
 import 'react';
-import './delete-account-setting-BvdQdbv3.js';
+import './delete-account-setting-Dy4kJgUm.js';
 import './components/tooltip.js';
 import './hooks/use-anchored-rect.js';
 import './lib/clipping.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eifi1/ui-kit",
-  "version": "0.32.0",
+  "version": "0.32.2",
   "type": "module",
   "description": "App-agnostic shared design system: domain-free React components, theme and tokens.",
   "_sideEffects": "The barrel (src/index.ts) re-exports EVERY component, including components/chart, which statically imports recharts. Without this field a bundler must assume each of those modules has side effects, so it cannot drop the unused ones: importing a Button from '@eifi1/ui-kit' dragged all 433KB of recharts into the consumer's ENTRY chunk, and Keksdose was preloading it on every page load, login included. Nothing in src/ imports for side effects (no bare imports, no CSS imports from JS, no module-level global writes) — the token stylesheet is its own './tokens.css' export — so this is safe. CSS is still listed so any future stylesheet survives. Re-checked when `flag-icons` left `dependencies` and tsup started emitting a `\"use client\"` banner: neither touches this. The flag stylesheet was never imported from JS in the first place (that was the finding), and a directive prologue is a string literal every bundler lifts out before it decides whether a module is inert.",

package/src/admin/admin-action-log.tsx

@@ -47,7 +47,10 @@ export type AdminActionKind =
   | "transfer"
   | "deletion_request"
   | "deletion_cancel"
-  | "erase";
+  | "erase"
+  // 0.32.1 (keksdose's 0.32 report): server-kit 0.6's `AdminAction.PLAN`, an operator's
+  // plan change or grant (docs/billing-harmonization.md §6).
+  | "plan";
 
 /** Every {@link AdminActionKind}, in the contract's order. */
 export const ADMIN_ACTION_KINDS: readonly AdminActionKind[] = [
@@ -67,6 +70,7 @@ export const ADMIN_ACTION_KINDS: readonly AdminActionKind[] = [
   "deletion_request",
   "deletion_cancel",
   "erase",
+  "plan",
 ];
 
 /** One logged action — the app's `admin_actions` row with the people joined in. */
@@ -142,6 +146,7 @@ export const DEFAULT_ADMIN_ACTION_LOG_LABELS: AdminActionLogLabels = {
     deletion_request: "Deletion requested",
     deletion_cancel: "Deletion cancelled",
     erase: "Account erased",
+    plan: "Plan changed",
   },
 };
 

package/src/billing/billing-labels.ts

@@ -146,6 +146,19 @@ export interface BillingLabels {
   waitingChanges: (count: number) => string;
   /** The sign-out guard's way out for someone who will not pay. */
   discardWaiting: string;
+
+  /* ── Refusals with no part of their own (0.32.1, kastlan's 0.32 report) ── */
+  /**
+   * `billing_not_configured`: billing is on but the provider's settings are missing — the
+   * operator's mistake, so the words ask the payer to wait, not to act. For the toast or
+   * alert after "Choose a plan" or "Payment and invoices" (`isBillingError(err,
+   * "billing_not_configured")`). `billing_read_only` and `plan_limit` need none: the
+   * write lock, the banner and `PlanLimitNotice` say them.
+   */
+  notConfigured: string;
+  /** `billing_disabled`: billing is switched off on this server (§2.9), for a page or a
+   *  link that reached it anyway. */
+  disabled: string;
 }
 
 /** "today", "tomorrow", "in 5 days". */
@@ -215,6 +228,9 @@ export const DEFAULT_BILLING_LABELS: BillingLabels = {
   waitingChanges: (count) =>
     count === 1 ? "1 change waiting for a plan" : `${count} changes waiting for a plan`,
   discardWaiting: "Discard waiting changes",
+
+  notConfigured: "Payments aren't set up yet. Please try again later.",
+  disabled: "Subscriptions aren't available here.",
 };
 
 /** The `billing` namespace, resolved: English, then the provider, then `labels` — which

package/src/billing/plan-card.tsx

@@ -420,7 +420,7 @@ export function PlanPicker({
             {legend}
           </legend>
         )}
-        <div className={cn("grid gap-2 sm:grid-cols-2 lg:grid-cols-3", gridClassName)}>
+        <div className={cn("grid grid-cols-1 gap-2 sm:grid-cols-2 lg:grid-cols-3", gridClassName)}>
           {plans.map((plan) => (
             <PlanCard
               key={plan.code}

package/src/chart.ts

@@ -16,6 +16,8 @@ export * from "./components/treemap";
 // lenkbank's zoomable series chart, its synced x-zoom, the toggle legend and the
 // mirrored-pair axis geometry — moved here so the apps derive them from the package.
 export * from "./components/series-chart";
+// 0.32.1 (keksdose's 0.32 report): the height every chart takes, for an app's wrappers.
+export type { ChartHeight } from "./components/chart-height";
 export * from "./components/chart-zoom";
 export * from "./components/toggle-legend";
 export * from "./components/facing-pair";

package/src/components/alert-banner.tsx

@@ -336,11 +336,15 @@ export function AlertBanner({
   ) : null;
 
   // `relative z-10` so it stays clickable over a whole-row banner's stretched target.
+  // `max-w-full flex-wrap`: on a line of its own, two actions side by side ran 57 px
+  // past a 360 px phone at Extra large (the demo strip's "Request access" and "Sign in",
+  // 0.32.1); held to the line, they wrap there instead. Where they fit in one row,
+  // nothing changes.
   const trailing =
     action !== undefined && action !== null ? (
       <div
         className={cn(
-          "relative z-10 flex shrink-0 items-center gap-2",
+          "relative z-10 flex max-w-full shrink-0 flex-wrap items-center gap-2",
           !strip && !inlineRow && "self-center",
           strip && "ms-auto",
           // Last, on a line of its own, lined up with the message (past the glyph).

package/src/components/appearance-labels.ts

@@ -22,6 +22,12 @@ export interface AppearanceLabels {
   contrastHelp: string;
   /** The three choices, in {@link CONTRAST_MODES} order. */
   contrastModes: Record<ContrastMode, string>;
+  /**
+   * The account could not keep the pick (`useAccountAppearance`'s `pickTextSize` /
+   * `pickContrast` rejected): this device keeps it, the account doesn't. For the app's
+   * toast or the line under the setting (0.32.1, keksdose's 0.32 report).
+   */
+  saveFailed: string;
 }
 
 export const DEFAULT_APPEARANCE_LABELS: AppearanceLabels = {
@@ -31,6 +37,7 @@ export const DEFAULT_APPEARANCE_LABELS: AppearanceLabels = {
   contrast: "Contrast",
   contrastHelp: "More contrast darkens quiet text and lines, and thickens focus frames. System follows this device.",
   contrastModes: { system: "System", standard: "Standard", more: "More" },
+  saveFailed: "Couldn't save this to your account. It still applies on this device.",
 };
 
 /** The `appearance` namespace, resolved — English, then the provider, then `labels`. For

package/src/components/button-group.tsx

@@ -26,6 +26,26 @@ const JOINED_COMMON = cn(
   "[&>*]:relative [&>*:focus-within]:z-10",
 );
 
+/**
+ * A joined row at Large and Extra large wraps rather than run past its container (0.32.1,
+ * the 360 px Extra-large sweep; docs/text-size-harmonization.md §4 "nothing
+ * overflows"): "Buttons | Chips | Feedback" was 329 px at 150 %, 67 px past a 360 px
+ * phone's card. A wrapped row cannot keep one frame with dividers between members — the
+ * second line's first member would carry a divider against the frame and no line would
+ * part the rows — so at Large the frame is drawn by the members: each its own 1px
+ * border, overlapping its neighbours by a pixel on both axes (the container's `ps-px
+ * pt-px` takes the overlap back at the edges). On one row that draws the same frame and
+ * dividers as Normal; wrapped, every line and every member is parted by one hairline,
+ * and the members share out each line (`grow`), so the lines make one block. A group
+ * that fits is only as wide as its members, so nothing grows there. A `large:` class,
+ * so Normal keeps the frame it has, and it costs no render.
+ */
+const JOINED_WRAP_AT_LARGE = cn(
+  "large:max-w-full large:flex-wrap large:border-0 large:ps-px large:pt-px",
+  "large:[&>*]:border large:[&>*]:-ms-px large:[&>*]:-mt-px",
+  "large:[&>*]:grow large:[&>*>button]:grow large:[&>*>a]:grow",
+);
+
 const JOINED: Record<"horizontal" | "vertical", string> = {
   // Logical edges and corners throughout (`border-s`, `rounded-s-*`), so in RTL the
   // first member sits on the right with the right-hand corners rounded — the physical
@@ -37,6 +57,7 @@ const JOINED: Record<"horizontal" | "vertical", string> = {
     "[&>:first-child]:rounded-s-md [&>:last-child]:rounded-e-md",
     "[&>:first-child>button]:rounded-s-md [&>:last-child>button]:rounded-e-md",
     "[&>:first-child>a]:rounded-s-md [&>:last-child>a]:rounded-e-md",
+    JOINED_WRAP_AT_LARGE,
   ),
   // The block axis is top-to-bottom in both reading directions, so top/bottom are
   // already the logical edges here.

package/src/components/chip.tsx

@@ -382,8 +382,10 @@ export function refreshChipEdges(): void {
       const r = el.getBoundingClientRect();
       const label = el.querySelector<HTMLElement>(".truncate");
       // Not laid out (a hidden ancestor, jsdom), or truncated at its container's edge,
-      // where a wider chip would overflow: leave it alone.
-      if (!r.width || (label && label.scrollWidth > label.clientWidth)) return null;
+      // where a wider chip would overflow: leave it alone. So too a label wrapped onto
+      // a second line at Large (0.32.1): the chip is already as wide as its row lets it
+      // be, and a min-width past that would push it over the edge just the same.
+      if (!r.width || (label && (label.scrollWidth > label.clientWidth || labelWraps(label)))) return null;
       const width = Math.round(r.width * 64) / 64;
       const target = snappedChipEdgeWidth(width, r.left + window.scrollX, dpr);
       return target === width ? null : target;
@@ -406,6 +408,13 @@ export function refreshChipEdges(): void {
   }
 }
 
+/** Whether a chip's label runs to more than one line — taller than one and a half of
+ *  its line height. A line height of `normal` (no number to compare) counts as one line. */
+function labelWraps(label: HTMLElement): boolean {
+  const line = Number.parseFloat(getComputedStyle(label).lineHeight);
+  return line > 0 && label.clientHeight > 1.5 * line;
+}
+
 function scheduleChipEdges() {
   if (snapFrame || typeof requestAnimationFrame === "undefined") return;
   snapFrame = requestAnimationFrame(() => {
@@ -489,12 +498,30 @@ function assignRef<T>(target: Ref<T> | undefined, value: T | null) {
 }
 
 const CHIP_PILL = "inline-flex max-w-full items-center rounded-full border transition-colors";
+
 // `focus-visible`, not `focus`: a chip commonly receives focus programmatically (the
 // ChipInput moves focus onto one after a removal) and a ring that appears on a
 // pointer click reads as a stuck selection.
 const CHIP_RING = `${FOCUS_RING} focus-visible:ring-offset-1 focus-visible:ring-offset-[var(--bg-surface)]`;
 const CHIP_BASE = `${CHIP_PILL} ${CHIP_RING}`;
 
+/**
+ * A text chip's label at Large and Extra large (0.32.1, keksdose's 0.32 report;
+ * docs/text-size-harmonization.md §4 "nothing truncates"): it wraps instead of ending in
+ * "…". keksdose's "Zur Prüfung zurücklegen" read "Zur Prüfung zu…" on a phone at Extra
+ * large, which is a different instruction. No size has a fixed height (padding and
+ * `min-h-*` only), so the pill grows with its lines; the mark before the text stays
+ * centred on them, as in a pill. A `large:` class, so Normal keeps its one-line chip.
+ *
+ * `break-words`, not `[overflow-wrap:anywhere]`: a status chip often sits in a table
+ * cell, and `anywhere` lowers the label's min-content width to one letter, so an
+ * auto-sized column can squeeze it to a letter per line (StatusDot's label did, in the
+ * showcase's tone table at 360 px, Extra large). `break-word` keeps each word whole
+ * wherever the width is the content's to choose, and still breaks one that cannot fit
+ * the row at all.
+ */
+const CHIP_LABEL_WRAP_AT_LARGE = "large:whitespace-normal large:break-words";
+
 /**
  * An interactive chip's touch target at Large and Extra large (docs/text-size-harmonization.md
  * §4: "touch targets at least 48 px … for buttons, inputs, chips"): a link or toggle chip
@@ -814,14 +841,15 @@ export const Chip = forwardRef<HTMLElement, ChipProps>(function Chip(
         ) : (
           <Icon className={cn(s.icon, "shrink-0")} aria-hidden />
         ))}
-      {/* Text truncates. Mixed children (an icon and a word) sit in a row instead: as a
-          plain span, the svg — a block under Tailwind's preflight — stacked above the
-          text (keksdose live #358). */}
+      {/* Text truncates at Normal and wraps at Large (CHIP_LABEL_WRAP_AT_LARGE). Mixed
+          children (an icon and a word) sit in a row instead: as a plain span, the svg —
+          a block under Tailwind's preflight — stacked above the text (keksdose live
+          #358). */}
       <span
         className={cn(
           "min-w-0",
           typeof children === "string" || typeof children === "number"
-            ? "truncate"
+            ? cn("truncate", CHIP_LABEL_WRAP_AT_LARGE)
             : "inline-flex items-center gap-1 [&>svg]:size-[1em] [&>svg]:shrink-0",
         )}
       >

package/src/components/choice-card.tsx

@@ -528,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}

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))}

package/src/components/data-table.tsx

@@ -35,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 { useBreakpoint } from "../hooks/use-breakpoint";
+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";
@@ -1655,9 +1655,13 @@ export function DataTable<T>({
     : labels.columnsCount(visibleCount, totalCount);
   // 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. The same answer as `usePhoneLayout()`
-  // (inverted), which an app's own phone checks use (§10.4).
-  const isMdUp = useBreakpoint("md", true);
+  // 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);

package/src/components/date-picker.tsx

@@ -206,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.
  *
@@ -320,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
@@ -558,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,
@@ -1105,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("")}
@@ -1173,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,
       )}
     >

package/src/components/inline-edit-field.tsx

@@ -155,6 +155,23 @@ function RenderEditor<T>({ render, ...props }: InlineEditorProps<T> & { render:
   return render(props);
 }
 
+/**
+ * The value at Large and Extra large (0.32.1, keksdose's 0.32 report;
+ * docs/text-size-harmonization.md §4 "nothing truncates"): the display button, the
+ * locked one and the read-only text wrap instead of ending in "…", and break a word too
+ * long for the cell, so an IBAN or an e-mail address shows to its last character. The
+ * value IS the button's accessible name and the thing being edited: a reader who needs
+ * big type cannot recover a cut-off end by squinting. A `large:` class, so a table of
+ * these keeps its one-line cells at Normal.
+ *
+ * `break-words`, not `[overflow-wrap:anywhere]`: these live in table cells (keksdose's
+ * budget and invoice lines), and `anywhere` lowers the value's min-content width to one
+ * letter, so an auto-sized column could squeeze an amount to a digit per line. With
+ * `break-word` a column keeps each word whole; the button is `w-full`, so a word wider
+ * than a sized cell still breaks.
+ */
+const VALUE_WRAP_AT_LARGE = "large:whitespace-normal large:break-words";
+
 /** `onCommit`'s result, if it is a promise. */
 function asPromise(result: unknown): Promise<unknown> | null {
   return result && typeof (result as Promise<unknown>).then === "function" ? (result as Promise<unknown>) : null;
@@ -415,7 +432,7 @@ export function InlineEditField<T = string>(props: InlineEditFieldProps<T>) {
   let body: ReactNode;
   if (readOnly) {
     body = (
-      <span {...private_} className={cn("block min-w-0 truncate", alignClass)}>
+      <span {...private_} className={cn("block min-w-0 truncate", VALUE_WRAP_AT_LARGE, alignClass)}>
         {content}
       </span>
     );
@@ -492,6 +509,7 @@ export function InlineEditField<T = string>(props: InlineEditFieldProps<T>) {
             onClick={(e) => e.preventDefault()}
             className={cn(
               "block w-full min-w-0 cursor-not-allowed truncate rounded-sm focus:outline-none",
+              VALUE_WRAP_AT_LARGE,
               FOCUS_RING,
               alignClass,
             )}
@@ -516,6 +534,7 @@ export function InlineEditField<T = string>(props: InlineEditFieldProps<T>) {
           onClick={() => setOpen(true)}
           className={cn(
             "block w-full min-w-0 truncate rounded-sm underline-offset-2 hover:underline focus:outline-none",
+            VALUE_WRAP_AT_LARGE,
             FOCUS_RING,
             alignClass,
           )}

package/src/components/month-picker.tsx

@@ -962,7 +962,12 @@ export function MonthPicker(props: MonthPickerProps) {
       </Popover>
     );
     return (
-      <div {...wrapperRest} ref={rootRef} className={cn("flex min-w-0 items-center gap-2", className)}>
+      // `flex-wrap`: where the heading and the buttons do not fit one row, the buttons
+      // take the next line, at the end (0.32.1, the 360 px Extra-large sweep;
+      // docs/text-size-harmonization.md §4). In one row at 150 % "Today ‹ ›" left the
+      // heading 30 px on a 360 px phone, and "October 2026" was drawn under "Today".
+      // Where they fit, nothing changes.
+      <div {...wrapperRest} ref={rootRef} className={cn("flex min-w-0 flex-wrap items-center gap-2", className)}>
         {Heading ? <Heading className="m-0 min-w-0 text-lg font-semibold">{trigger}</Heading> : trigger}
         <div className="ms-auto flex shrink-0 items-center gap-1">
           {showToday && (

package/src/components/page-header.tsx

@@ -30,6 +30,16 @@ const TITLE: Record<PageHeaderSize, string> = {
  */
 export type PageHeaderMobileLayout = "stacked" | "inline";
 
+/**
+ * `stacked` at Large and Extra large on a phone (0.32.2, kastlan's 0.32.1 report;
+ * docs/text-size-harmonization.md §4, as FormActions does): the actions take the full
+ * width, one under the other. Side by side in 240 px of layout, two buttons each wrapped
+ * their label onto three lines. `large:max-sm:`, the scaled phone width, so Normal and
+ * every wider screen keep their row; `inline` is for actions known to fit, and stays.
+ */
+const STACK_ACTIONS_AT_LARGE =
+  "large:max-sm:flex-col large:max-sm:items-stretch large:max-sm:[&>*]:w-full";
+
 const ROW: Record<PageHeaderMobileLayout, string> = {
   stacked: "flex-col gap-3 sm:flex-row sm:items-start sm:justify-between sm:gap-4",
   inline: "flex-row items-center justify-between gap-2 sm:gap-4",
@@ -232,7 +242,11 @@ export function PageHeader({
         {actions != null && (
           <div
             ref={actionsRef}
-            className={cn("flex shrink-0 flex-wrap items-center gap-2", hasSecondary && "sm:order-2")}
+            className={cn(
+              "flex shrink-0 flex-wrap items-center gap-2",
+              hasSecondary && "sm:order-2",
+              mobileLayout === "stacked" && STACK_ACTIONS_AT_LARGE,
+            )}
           >
             {actions}
           </div>