@eifi1/ui-kit 0.32.2 → 0.33.0

package/src/components/chip.tsx

@@ -10,7 +10,7 @@ import { DisabledReasonLine, useDisabledReasonLine, type DisabledReasonDisplay }
 import { DEFAULT_COMMON_LABELS, useKitLabels, useKitLink, useKitLocale } from "../i18n/kit-labels";
 import { pickLinkRenderer } from "./text-link";
 import { Tooltip } from "./tooltip";
-import { useCommitReason } from "./write-lock";
+import { useCommitReason, type CommitScope } from "./write-lock";
 
 /**
  * A chip: a compact pill carrying one value.
@@ -137,7 +137,9 @@ const TONE: Record<ChipTone, { idle: string; selected: string }> = {
 // outline toggle that stays an outline when on has no visible state.
 const OUTLINE: Record<ChipTone, string> = {
   neutral: "border-[var(--border-strong)] bg-transparent text-[var(--text-secondary)]",
-  brand: "border-[var(--brand)] bg-transparent text-[var(--brand)]",
+  // The brand AS TEXT is `--brand-muted` (0.33): `--brand` itself is solved to 3:1, a
+  // fill's boundary, and as text it fell to 3.0:1 in the derived dark presets.
+  brand: "border-[var(--brand)] bg-transparent text-brand-muted",
   danger: "border-[var(--danger-border)] bg-transparent text-[var(--danger)]",
   warning: "border-[var(--warning-border)] bg-transparent text-[var(--warning)]",
   success: "border-[var(--success-border)] bg-transparent text-[var(--success)]",
@@ -151,25 +153,27 @@ const OUTLINE: Record<ChipTone, string> = {
   orange: "border-[var(--hue-orange-border)] bg-transparent text-[var(--hue-orange)]",
 };
 
-// `solid`: the fill under its contrast pair. Only brand and danger have a declared
-// `-contrast` token; the other hues are 700s in the light theme and 300s in the dark
-// one, so `--text-inverse` (the surface colour) is the side of the pair that contrasts
-// with them in both — which is what the inverse token is for. The border goes
-// transparent rather than away, so a solid chip is exactly as tall as a soft one.
+// `solid`: the fill under its own foreground, `<fill>-contrast` (0.33, colour-roles
+// §5.1): white in light, the tone's 950 (the page, for money) on the dark theme's
+// pastels. Until 0.33 only brand and danger had one and the rest borrowed
+// `--text-inverse`, the surface colour — which left light warning at 4.24:1 and orange
+// at 4.38:1. Neutral keeps the inverse pair: a count pill, louder than the neutral
+// fill. The border goes transparent rather than away, so a solid chip is exactly as
+// tall as a soft one.
 const SOLID: Record<ChipTone, string> = {
-  neutral: "border-transparent bg-[var(--bg-inverse)] text-[var(--text-inverse)]",
-  brand: "border-transparent bg-[var(--brand)] text-[var(--brand-contrast)]",
-  danger: "border-transparent bg-[var(--danger)] text-[var(--danger-contrast)]",
-  warning: "border-transparent bg-[var(--warning)] text-[var(--text-inverse)]",
-  success: "border-transparent bg-[var(--success)] text-[var(--text-inverse)]",
-  info: "border-transparent bg-[var(--info)] text-[var(--text-inverse)]",
-  income: "border-transparent bg-[var(--money-income)] text-[var(--text-inverse)]",
-  expense: "border-transparent bg-[var(--money-expense)] text-[var(--text-inverse)]",
-  blue: "border-transparent bg-[var(--hue-blue)] text-[var(--text-inverse)]",
-  indigo: "border-transparent bg-[var(--hue-indigo)] text-[var(--text-inverse)]",
-  purple: "border-transparent bg-[var(--hue-purple)] text-[var(--text-inverse)]",
-  teal: "border-transparent bg-[var(--hue-teal)] text-[var(--text-inverse)]",
-  orange: "border-transparent bg-[var(--hue-orange)] text-[var(--text-inverse)]",
+  neutral: "border-transparent bg-inverse text-inverse",
+  brand: "border-transparent bg-brand text-brand-contrast",
+  danger: "border-transparent bg-danger text-danger-contrast",
+  warning: "border-transparent bg-warning text-warning-contrast",
+  success: "border-transparent bg-success text-success-contrast",
+  info: "border-transparent bg-info text-info-contrast",
+  income: "border-transparent bg-money-pos text-money-income-contrast",
+  expense: "border-transparent bg-money-neg text-money-expense-contrast",
+  blue: "border-transparent bg-hue-blue text-hue-blue-contrast",
+  indigo: "border-transparent bg-hue-indigo text-hue-indigo-contrast",
+  purple: "border-transparent bg-hue-purple text-hue-purple-contrast",
+  teal: "border-transparent bg-hue-teal text-hue-teal-contrast",
+  orange: "border-transparent bg-hue-orange text-hue-orange-contrast",
 };
 
 /** `dot`: the fill of the dot itself — the tone's strongest colour, which is the one
@@ -380,7 +384,8 @@ export function refreshChipEdges(): void {
   for (let pass = 0; pass <= n && pending.length; pass++) {
     const reads = pending.map((el) => {
       const r = el.getBoundingClientRect();
-      const label = el.querySelector<HTMLElement>(".truncate");
+      // The text label (CHIP_LABEL_TRUNCATE; `.truncate` before 0.33).
+      const label = el.querySelector<HTMLElement>(".truncate-until-large");
       // Not laid out (a hidden ancestor, jsdom), or truncated at its container's edge,
       // 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
@@ -511,16 +516,16 @@ const CHIP_BASE = `${CHIP_PILL} ${CHIP_RING}`;
  * "…". 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.
+ * centred on them, as in a pill. A `large:` rule, 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.
+ * 0.33 (§10.17): the kit's one `truncate-until-large` (tokens.css) in place of this
+ * file's own `truncate` + `large:whitespace-normal large:break-words`, as StatusDot's
+ * label took it. The utility breaks with `overflow-wrap: anywhere`, which lowers the
+ * label's min-content width to one letter: a status chip in an auto-sized table column
+ * wants the column given a width at Large, or it is squeezed to a letter per line
+ * (StatusDot's label was, in the showcase's tone table at 360 px, Extra large).
  */
-const CHIP_LABEL_WRAP_AT_LARGE = "large:whitespace-normal large:break-words";
+const CHIP_LABEL_TRUNCATE = "truncate-until-large";
 
 /**
  * An interactive chip's touch target at Large and Extra large (docs/text-size-harmonization.md
@@ -720,7 +725,7 @@ export type ChipProps = ChipBaseProps &
         /** This chip COMMITS — pressing it saves. Under a locked
          *  {@link WriteLockProvider} it takes the `disabledReason` path with the lock's
          *  reason, as {@link Button}'s `commit` does. */
-        commit?: boolean;
+        commit?: CommitScope;
       }
   );
 
@@ -841,7 +846,7 @@ export const Chip = forwardRef<HTMLElement, ChipProps>(function Chip(
         ) : (
           <Icon className={cn(s.icon, "shrink-0")} aria-hidden />
         ))}
-      {/* Text truncates at Normal and wraps at Large (CHIP_LABEL_WRAP_AT_LARGE). Mixed
+      {/* Text truncates at Normal and wraps at Large (CHIP_LABEL_TRUNCATE). 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). */}
@@ -849,7 +854,7 @@ export const Chip = forwardRef<HTMLElement, ChipProps>(function Chip(
         className={cn(
           "min-w-0",
           typeof children === "string" || typeof children === "number"
-            ? cn("truncate", CHIP_LABEL_WRAP_AT_LARGE)
+            ? CHIP_LABEL_TRUNCATE
             : "inline-flex items-center gap-1 [&>svg]:size-[1em] [&>svg]:shrink-0",
         )}
       >

package/src/components/choice-card.tsx

@@ -247,13 +247,15 @@ const META_TONE: Record<ActionCardMetaTone, string> = {
 };
 
 /** The colour of {@link ActionCardProps.icon}. `default` is the secondary text colour
- *  the icon has always had; `brand` tints it (keksdose's privacy enrolment). */
+ *  the icon has always had; `brand` tints it (keksdose's privacy enrolment) with the
+ *  brand as text, `--brand-muted` (0.33, docs/colour-roles-harmonization.md §5.5):
+ *  `--brand` read 3.03:1 on the card's hover in the derived dark presets. */
 export type ActionCardIconTone = "default" | "muted" | "brand" | "warning" | "danger" | "info" | "success";
 
 const ICON_TONE: Record<ActionCardIconTone, string> = {
   default: "text-[var(--text-secondary)]",
   ...META_TONE,
-  brand: "text-[var(--brand)]",
+  brand: "text-brand-muted",
 };
 
 /** What {@link ActionCardProps.renderLink} (and the provider's `linkComponent`) is

package/src/components/combobox.tsx

@@ -34,7 +34,7 @@ import {
   useLockReason,
 } from "./field-parts";
 import { hasMessage, mergeDescribedBy } from "./choice-parts";
-import { useCommitReason } from "./write-lock";
+import { useCommitReason, type CommitScope } from "./write-lock";
 
 // One look for both combobox flavors below — the suggestion list and its rows
 // must stay pixel-identical between the free-text and the id-keyed variant (and
@@ -207,7 +207,7 @@ export interface ComboboxProps
   /** This field COMMITS. Under a locked {@link WriteLockProvider} it is locked the
    *  `disabledReason` way with the lock's reason; inside a form with its own Save, leave
    *  it off and put `commit` on the Save. No provider, or an unlocked one: no effect. */
-  commit?: boolean;
+  commit?: CommitScope;
   /** Heading an option belongs under. Supplying it makes this list read exactly
    *  like {@link InlineEntityCombobox}'s — one heading per group with its rows
    *  indented beneath — instead of a flat list (feedback #136 rework: the payee
@@ -849,7 +849,7 @@ export interface InlineEntityComboboxProps<V extends string | number, C extends
    * A picker inside a form with its own Save stays editable under the lock — leave this
    * off there and put `commit` on the Save. No provider, or an unlocked one: no effect.
    */
-  commit?: boolean;
+  commit?: CommitScope;
   /**
    * A last row that makes a new record from what was typed — keksdose G9, whose "Create
    * cash account" had to become a separate button because this picker had no such row.
@@ -894,7 +894,7 @@ export interface InlineEntityComboboxProps<V extends string | number, C extends
    * one explanation a phone cannot show), and `onCreate` is not called. Not needed with
    * `commit`: a locked field opens no list at all.
    */
-  createCommit?: boolean;
+  createCommit?: CommitScope;
   /**
    * The `<input>` — the focusable control, the one a reader types in — as a React 19
    * ref prop (0.24, kastlan). Its account picker is this component inside an

package/src/components/confirm-dialog.tsx

@@ -6,7 +6,7 @@ import { TypedConfirmField, typedMatches } from "./danger-confirm";
 import type { TypedMatch } from "./danger-confirm";
 import { DialogFrame } from "./dialog-frame";
 import { Button } from "./ui";
-import { useWriteLock } from "./write-lock";
+import { useWriteLock, writeLockFor, type CommitScope } from "./write-lock";
 
 /**
  * The `confirmDialog` namespace of `<UiKitProvider labels>`: the two buttons' fallback
@@ -83,8 +83,12 @@ export interface ConfirmOptions {
    * host sits — it is `aria-disabled` with the lock's reason, so a read-only page (a
    * demo, a viewer's budget) can't confirm a delete through a dialog. One prop for the
    * many confirm sites an app has (kastlan's 0.31 adoption counted ~23).
+   *
+   * 0.33: a {@link CommitScope} — `confirm({ commit: COMMIT_EXCEPT_BILLING })` for a
+   * confirm a lapsed plan still allows (removing access, the account's own settings;
+   * docs/billing-harmonization.md §12.36).
    */
-  commit?: boolean;
+  commit?: CommitScope;
 }
 
 export type ConfirmFn = (options: ConfirmOptions) => Promise<boolean>;
@@ -107,12 +111,15 @@ export function useConfirm(): ConfirmFn {
     throw new Error("useConfirm() must be called below a <ConfirmProvider>.");
   }
   // The lock of the CALLER's place: the dialog host usually sits above the app's
-  // `WriteLockProvider`, so it could not read the lock itself.
+  // `WriteLockProvider`, so it could not read the lock itself. Each call's own `commit`
+  // scope is applied to it when the call runs (`writeLockFor`, §12.36).
   const lock = useWriteLock();
   return useCallback(
-    (options: ConfirmOptions) =>
-      confirm(options.commit && lock.locked ? ({ ...options, lockReason: lock.reason } as ConfirmOptions) : options),
-    [confirm, lock.locked, lock.reason],
+    (options: ConfirmOptions) => {
+      const scoped = writeLockFor(lock, options.commit);
+      return confirm(scoped.locked ? ({ ...options, lockReason: scoped.reason } as ConfirmOptions) : options);
+    },
+    [confirm, lock],
   );
 }
 

package/src/components/country-select.tsx

@@ -13,7 +13,7 @@ import {
   type ComboOption,
 } from "./combobox-core";
 import { assignRef, hasMessage, mergeDescribedBy } from "./choice-parts";
-import { useCommitReason } from "./write-lock";
+import { useCommitReason, type CommitScope } from "./write-lock";
 import {
   DEFAULT_COMBOBOX_LABELS,
   DEFAULT_COMMON_LABELS,
@@ -147,7 +147,7 @@ export interface CountrySelectProps<Clearable extends boolean = false>
    * reason. A country field inside a form that has its own Save stays editable under
    * the lock — leave this off there, and put `commit` on the Save.
    */
-  commit?: boolean;
+  commit?: CommitScope;
   /** The language the names are in. Default: the `<UiKitProvider locale>`, else
    *  English (see {@link countryName}). */
   locale?: string;

package/src/components/danger-confirm.tsx

@@ -6,7 +6,7 @@ import { Button, Input, Label, Spinner } from "./ui";
 import type { ButtonVariant, InputProps } from "./ui";
 import { Checkbox } from "./checkbox";
 import { Tooltip } from "./tooltip";
-import { useCommitReason } from "./write-lock";
+import { useCommitReason, type CommitScope } from "./write-lock";
 
 /**
  * How typed text is compared with the text it has to repeat — shared by
@@ -567,7 +567,7 @@ export interface DangerConfirmProps extends Omit<ComponentPropsWithoutRef<"div">
    * provider no longer threads `lockedReason={lock.locked ? lock.reason : undefined}`
    * into every tile. No provider, or an unlocked one: no effect.
    */
-  commit?: boolean;
+  commit?: CommitScope;
   /** Controlled armed state. The parent can then collapse the tile from a mutation's
    *  own `onSuccess` without returning a promise. */
   armed?: boolean;

package/src/components/data-table.tsx

@@ -246,6 +246,23 @@ export interface DataTableProps<T> {
   rowHref?: (row: T) => string | undefined;
   expandedRow?: (row: T) => ReactNode | null;
   isExpanded?: (row: T) => boolean;
+  /**
+   * Extra classes for a row — the `<tr>` on desktop, the card on mobile. Merged last,
+   * so a `hover:` fill here replaces the row's own `hover:bg-[var(--bg-hover)]`.
+   *
+   * **A row you paint has to pick its own hover** (0.33, docs/colour-roles-harmonization.md
+   * §12.2): the kit cannot see your rest colour, and `--bg-hover` is mixed against the
+   * card. The rule: a hover differs from its rest by 1.08:1 or more, and every text role
+   * on it keeps 4.5:1.
+   * - A row that rests on the well (`bg-surface-2`) hovers to the CARD,
+   *   `hover:bg-surface`: in light the well is the page, and `--bg-hover` sits 1.04:1
+   *   from it.
+   * - A row whose well MARKS A STATE (selected) keeps its fill and draws a 1 px inside
+   *   line instead, since the card would read as "not selected":
+   *   `bg-surface-2 hover:bg-surface-2 hover:outline hover:-outline-offset-1 hover:outline-strong`.
+   *   An outline, not a shadow: a shadow on a `<tr>` is not painted by every engine.
+   * - Not `--bg-active` for a selected row: its muted and money text fall to 3.8–4.7:1.
+   */
   rowClassName?: (row: T) => string | undefined;
   /**
    * Extra DOM attributes for a row's container — the `<tr>` on desktop, the
@@ -1199,15 +1216,9 @@ export function DataTable<T>({
       label: a.label,
       icon: a.icon,
       onCommit: () => void runRowAction(a.action, row),
-      // Each fill's own text colour — the fills are pastels in dark mode (0.26).
-      className:
-        a.tone === "danger"
-          ? "bg-[var(--danger)] text-[var(--danger-contrast)]"
-          : "bg-[var(--brand)] text-[var(--brand-contrast)]",
-      armedClassName:
-        a.tone === "danger"
-          ? "bg-[var(--danger-hover)] text-[var(--danger-contrast)]"
-          : "bg-[var(--brand-hover)] text-[var(--brand-contrast)]",
+      // The row action's tone, painted by SwipeableRow: its soft wash idle, its fill
+      // and that fill's foreground armed (0.33).
+      tone: a.tone === "danger" ? "danger" : "brand",
     });
     return {
       start: swipes.filter((a) => a.swipe === "start").map(toSwipe),

package/src/components/date-picker.tsx

@@ -17,7 +17,7 @@ import { splitTriggerAria } from "./trigger-aria";
 import type { TriggerAria } from "./trigger-aria";
 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 { FieldBox, FieldLabelLine, LABEL_ABOVE_BOX, useFieldMessages } from "./field-parts";
 import { FullBleedDialog } from "./full-bleed-dialog";
 import { usePhoneLayout, type RemLength } from "../hooks/use-breakpoint";
 import { DEFAULT_MINI_CALENDAR_LABELS, MiniCalendar, type MiniCalendarProps } from "./mini-calendar";
@@ -210,11 +210,12 @@ function CustomTrigger({
  * 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.
+ * "01/09/2026 – 30/…" — its end, the half a reader needs, was the half cut off. A
+ * `large:` class, so Normal keeps its one-line field: since 0.33 (§10.17) the kit's one
+ * `truncate-until-large` (tokens.css) in place of this file's own `truncate` +
+ * `large:whitespace-normal large:break-words`.
  */
-const VALUE_WRAP_AT_LARGE = "large:whitespace-normal large:break-words";
+const VALUE_TRUNCATE = "truncate-until-large";
 
 /**
  * The field-shaped button that opens the calendar.
@@ -330,7 +331,7 @@ function DateFieldTrigger({
 
   return (
     <button {...attrs}>
-      <span id={valueId} className={cn("truncate", VALUE_WRAP_AT_LARGE, !hasValue && "text-[var(--text-placeholder)]")}>
+      <span id={valueId} className={cn(VALUE_TRUNCATE, !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
@@ -515,7 +516,9 @@ function DateField({
   return (
     // The caller's attributes land here, on the field's own box — the trigger inside is
     // named by `aria-labelledby` and must keep the id pair it is given.
-    <div {...wrapperRest} ref={rootRef} className={cn("relative", className)}>
+    // At Large a labelled box is a grid: the label above, the calendar glyph and the
+    // clear × measured against the trigger's row (LABEL_ABOVE_BOX, 0.33 §10.17).
+    <div {...wrapperRest} ref={rootRef} className={cn("relative", label !== undefined && LABEL_ABOVE_BOX, className)}>
       {label !== undefined && <FieldLabelLine label={label} hint={labelHint} />}
       {/* The visible FieldLabel is a plain span, not a `<label htmlFor>`, so it names
           nothing on its own — this hidden twin is what the trigger is named by.

package/src/components/entity-combobox.tsx

@@ -23,7 +23,7 @@ import {
   useLockReason,
 } from "./field-parts";
 import { assignRef, mergeDescribedBy } from "./choice-parts";
-import { useCommitReason } from "./write-lock";
+import { useCommitReason, type CommitScope } from "./write-lock";
 
 export type { ComboClearValue, ComboOption } from "./combobox-core";
 
@@ -89,7 +89,7 @@ export interface EntityComboboxProps<V extends string | number, C extends ComboC
    * A picker inside a form with its own Save stays editable under the lock: leave this
    * off there and put `commit` on the Save. No provider, or an unlocked one: no effect.
    */
-  commit?: boolean;
+  commit?: CommitScope;
   /** When set, a "create" row appears for a non-empty query with no exact match. */
   onCreate?: (query: string) => void;
   createLabel?: (query: string) => string;
@@ -106,7 +106,7 @@ export interface EntityComboboxProps<V extends string | number, C extends ComboC
    * taken, with the lock's reason as its second line — the picker itself stays live.
    * keksdose dev#496: on the read-only demo choosing is draft state, minting is not.
    */
-  createCommit?: boolean;
+  createCommit?: CommitScope;
   /** Required and unanswered — {@link FIELD_INVALID}. See {@link Input}'s `invalid`. */
   invalid?: boolean;
   /** What is wrong with the value, as {@link Input}'s `error`: rendered under the

package/src/components/field-parts.tsx

@@ -5,7 +5,7 @@ import { cn } from "../lib/cn";
 import { useInlineFacts } from "../hooks/use-large-text";
 import { FOCUS_RING } from "./focus-ring";
 import { Tooltip, type TooltipSide } from "./tooltip";
-import { useCommitReason } from "./write-lock";
+import { useCommitReason, type CommitScope } from "./write-lock";
 import { hasMessage, mergeDescribedBy } from "./choice-parts";
 
 /**
@@ -34,12 +34,45 @@ import { hasMessage, mergeDescribedBy } from "./choice-parts";
 export const STATIC_LABEL_TYPE =
   "text-caption leading-tight text-[var(--text-muted)] peer-disabled:opacity-50";
 
+/**
+ * A field's label at Large and Extra large (0.33, docs/text-size-harmonization.md
+ * §10.17): a static label ABOVE the field — the phone card's "label above value" (§4) —
+ * not a label squeezed into the field's top strip, where a long one ended in "…". It
+ * stops being absolute, so it wraps like any text (`truncate-until-large` beside it); it
+ * takes the pointer, since nothing of the field lies under it any more; and the field
+ * no longer reserves the strip for it (`FIELD_FLOATING_PAD`). In the first row of a box
+ * that is a grid at Large ({@link LABEL_ABOVE_BOX}), wherever it sits in the DOM — a
+ * floating label FOLLOWS its input, for `peer-*`. `large:` classes, so it costs no
+ * render and is right on the first paint; Normal keeps the floating label.
+ *
+ * The placement only: a label element adds `large:block` (a `<span>` or `<label>` in
+ * flow), a label ROW keeps its `flex`.
+ */
+export const LABEL_ABOVE_AT_LARGE =
+  "large:static large:row-start-1 large:mb-1 large:max-w-none large:pointer-events-auto";
+
+/**
+ * The box a field's label is positioned in — {@link FloatingField}'s `relative` wrapper,
+ * a date or month picker's root — at Large, while it holds a label above
+ * ({@link LABEL_ABOVE_AT_LARGE}): one column, the label's row over the field's. The
+ * field's own absolute parts in the box (a chevron, a clear ×, a reveal toggle, a
+ * calculator) are placed in the second row, so their `top-1/2` and `inset-y-*` still
+ * measure the FIELD and not label and field together; the label's own elements carry
+ * `data-field-label` and stay in the first. Only on a box with a visible label: without
+ * one the second row would be empty.
+ */
+export const LABEL_ABOVE_BOX =
+  "large:grid large:grid-cols-[minmax(0,1fr)] large:[&>.absolute:not([data-field-label])]:row-start-2";
+
 // A field that always has a value (select / dropdown trigger) keeps the label
-// permanently in the floated position — small, in the top strip, value below.
+// permanently in the floated position — small, in the top strip, value below. At Large,
+// a label above the field (LABEL_ABOVE_AT_LARGE).
 export const FLOATING_LABEL_STATIC = cn(
   "pointer-events-none absolute start-3 top-1",
   STATIC_LABEL_TYPE,
-  "max-w-[calc(100%-1.5rem)] truncate",
+  "max-w-[calc(100%-1.5rem)] truncate-until-large",
+  LABEL_ABOVE_AT_LARGE,
+  "large:block",
 );
 
 /**
@@ -53,7 +86,9 @@ export interface FieldLabelProps extends ComponentPropsWithoutRef<"span"> {
 
 export function FieldLabel({ children, className, ...rest }: FieldLabelProps) {
   return (
-    <span {...rest} className={cn(FLOATING_LABEL_STATIC, "z-10", className)}>
+    // `data-field-label`: a label of the box it stands in, kept in the first row at Large
+    // (LABEL_ABOVE_BOX).
+    <span data-field-label="" {...rest} className={cn(FLOATING_LABEL_STATIC, "z-10", className)}>
       {children}
     </span>
   );
@@ -207,9 +242,10 @@ export function FieldCaption({ parts, className }: { parts: FieldHintParts; clas
  * Classes that take a static floating label (`FLOATING_LABEL_STATIC`: `FieldLabel`,
  * `ComboboxFieldLabel`) out of its own absolute slot and into a {@link StaticLabelRow}.
  * `static` wins over `absolute` through `cn`'s merge; `min-w-0` lets it truncate in
- * the row.
+ * the row. At Large the ROW stands above the field, so the label inside it drops the
+ * margin a label above takes alone (`large:mb-0`), and stays level with its "?".
  */
-export const LABEL_IN_ROW = "static min-w-0";
+export const LABEL_IN_ROW = "static min-w-0 large:mb-0";
 
 /**
  * A static label and its "?" on one line, in the top strip of a field that lays out its
@@ -222,7 +258,10 @@ export const LABEL_IN_ROW = "static min-w-0";
  */
 export function StaticLabelRow({ hint, children }: { hint: ReactNode; children: ReactNode }) {
   return (
-    <div className="pointer-events-none absolute start-3 end-9 top-1 z-10 flex items-center gap-1">
+    <div
+      data-field-label=""
+      className={cn("pointer-events-none absolute start-3 end-9 top-1 z-10 flex items-center gap-1", LABEL_ABOVE_AT_LARGE)}
+    >
       {children}
       <span className="pointer-events-auto flex shrink-0 items-center">{hint}</span>
     </div>
@@ -270,7 +309,7 @@ export interface LockReason {
  * switch, a checkbox or a select that saves on change, a list row whose click writes.
  * The lock's reason wins over the control's own (`useCommitReason`).
  */
-export function useLockReason(commit: boolean | undefined, disabledReason: ReactNode): LockReason {
+export function useLockReason(commit: CommitScope | undefined, disabledReason: ReactNode): LockReason {
   const reason = useCommitReason(commit, disabledReason);
   const reasonId = useId();
   return { reason, locked: hasMessage(reason), reasonId };
@@ -510,9 +549,12 @@ export function FieldLabelLine({ label, hint }: { label: ReactNode; hint?: React
   if (!hasContent(hint)) return <FieldLabel>{label}</FieldLabel>;
   return (
     // `z-10` as FieldLabel has it: the trigger after it is `relative` and would paint
-    // over the row (and take the "?"'s hover) otherwise.
-    <div className="pointer-events-none absolute start-3 end-9 top-1 z-10 flex items-center gap-1">
-      <FieldLabel className="static min-w-0 max-w-full">{label}</FieldLabel>
+    // over the row (and take the "?"'s hover) otherwise. Above the field at Large.
+    <div
+      data-field-label=""
+      className={cn("pointer-events-none absolute start-3 end-9 top-1 z-10 flex items-center gap-1", LABEL_ABOVE_AT_LARGE)}
+    >
+      <FieldLabel className={cn(LABEL_IN_ROW, "max-w-full")}>{label}</FieldLabel>
       <span className="pointer-events-auto flex shrink-0 items-center">{hint}</span>
     </div>
   );
@@ -570,12 +612,17 @@ export function LabelStrip({
   children: ReactNode;
 }) {
   return (
-    <div {...rest} className={cn("relative min-w-0", LABEL_STRIP_PAD[pad], className)}>
-      <div className="pointer-events-none absolute inset-x-3 top-1 flex items-center gap-1">
+    // At Large the row is a label above the group, in flow (0.33, §10.17), and the
+    // strip's padding goes: nothing lies under it any more.
+    <div {...rest} className={cn("relative min-w-0", LABEL_STRIP_PAD[pad], "large:pt-0", className)}>
+      <div
+        data-field-label=""
+        className={cn("pointer-events-none absolute inset-x-3 top-1 flex items-center gap-1", LABEL_ABOVE_AT_LARGE)}
+      >
         {/* `static`: FieldLabel positions itself absolutely; here the ROW is
             positioned, so the label and its "?" are centred on one line by the flex
             layout (dev#468). */}
-        <FieldLabel id={labelId} className={cn("static min-w-0 max-w-full", disabled && "opacity-50")}>
+        <FieldLabel id={labelId} className={cn(LABEL_IN_ROW, "max-w-full", disabled && "opacity-50")}>
           {label}
         </FieldLabel>
         {hasContent(hint) && <span className="pointer-events-auto flex shrink-0 items-center">{hint}</span>}

package/src/components/file-button.tsx

@@ -5,7 +5,7 @@ import { useAnnounce } from "../hooks/use-announce";
 import { useKitFileLabels, useKitLabels } from "../i18n/kit-labels";
 import { Button, Spinner } from "./ui";
 import { Tooltip } from "./tooltip";
-import { useCommitReason } from "./write-lock";
+import { useCommitReason, type CommitScope } from "./write-lock";
 
 /**
  * A button that opens the file picker — the shape all three apps kept writing by hand
@@ -444,7 +444,7 @@ export interface FileButtonProps
    * one: no effect. A picker that only fills a form the user saves later is not a
    * commit, and is left live — the form's Save carries the lock.
    */
-  commit?: boolean;
+  commit?: CommitScope;
 }
 
 /** A reason that is really there — `null`, `false` and `""` are no reason. */
@@ -612,7 +612,8 @@ export const FileButton = forwardRef<HTMLButtonElement, FileButtonProps>(functio
   }
   return (
     // One inline row, so the name sits beside the button wherever the button sits; the
-    // name truncates rather than pushing the row wider, and the full list is in the
+    // name truncates rather than pushing the row wider (at Normal: from Large up it wraps,
+    // `truncate-until-large`, text size §10.17), and the full list is in the
     // kit's own Tooltip — not a native `title` (0.16.0 shipped one: the one-tooltip rule
     // since keksdose dev#523, and a title never opens on touch). Lazy, so the closed
     // bubble adds nothing to the read-out's text.
@@ -628,7 +629,7 @@ export const FileButton = forwardRef<HTMLButtonElement, FileButtonProps>(functio
         className="flex min-w-0 text-sm text-[var(--text-secondary)]"
       >
         <Tooltip label={picked.map((f) => f.name).join(", ")} lazy className="min-w-0">
-          <span className="block truncate">{pickedText}</span>
+          <span className="block truncate-until-large">{pickedText}</span>
         </Tooltip>
       </span>
       {picker.element}

package/src/components/file-dropzone.tsx

@@ -15,7 +15,7 @@ import {
 import type { FilePickHandler, FilePickerLabels, FileRejection } from "./file-button";
 import { useDragTarget } from "../hooks/use-file-drop";
 import { toast } from "./toast";
-import { useCommitReason } from "./write-lock";
+import { useCommitReason, type CommitScope } from "./write-lock";
 
 /**
  * Where a refused file's message goes.
@@ -160,7 +160,7 @@ export interface FileDropzoneProps extends Omit<ComponentPropsWithoutRef<"div">,
    * reason (which wins over one of its own). No provider, or an unlocked one: no
    * effect. A zone that only stages a file for a form saved later is not a commit.
    */
-  commit?: boolean;
+  commit?: CommitScope;
   /**
    * Replace the zone's body — the icon, the text and the chosen-file list — with your
    * own, given the zone's state: keksdose's spinner-plus-"uploading", its multi-shot

package/src/components/floating-panel.tsx

@@ -243,7 +243,7 @@ export function FloatingActionButton({
               pressed === false &&
                 "bg-[var(--bg-surface)] text-[var(--text-secondary)] hover:bg-[var(--bg-hover)] hover:text-[var(--text-primary)]",
               pressed === true &&
-                "border-[var(--brand)] bg-[var(--brand-bg)] text-[var(--brand)] hover:bg-[var(--brand-bg-hover)]",
+                "border-[var(--brand)] bg-[var(--brand-bg)] text-[var(--brand)] hover:bg-[var(--brand-bg-hover)] hover:text-brand-muted",
               "outline-none focus-visible:ring-offset-2",
               FOCUS_RING,
               className,
@@ -650,10 +650,12 @@ export interface FloatingActionProps extends Omit<ButtonHTMLAttributes<HTMLButto
   ref?: Ref<HTMLButtonElement>;
 }
 
+// Each fill under its own foreground (0.33): warning borrowed `--text-inverse`, the
+// surface colour, which was 4.24:1 on the light warning fill.
 const BADGE_TONE: Record<NonNullable<FloatingActionProps["badgeTone"]>, string> = {
-  warning: "bg-[var(--warning)] text-[var(--text-inverse)]",
-  danger: "bg-[var(--danger)] text-[var(--danger-contrast)]",
-  brand: "bg-[var(--brand)] text-[var(--brand-contrast)]",
+  warning: "bg-warning text-warning-contrast",
+  danger: "bg-danger text-danger-contrast",
+  brand: "bg-brand text-brand-contrast",
 };
 
 /**
@@ -695,7 +697,7 @@ export function FloatingAction({
     variant === "primary"
       ? "bg-[var(--brand)] text-[var(--brand-contrast)] hover:bg-[var(--brand-hover)]"
       : pressed && !isLink && pressedStyle === "tint"
-        ? "bg-[var(--brand-bg)] text-[var(--brand)] hover:bg-[var(--brand-bg-hover)]"
+        ? "bg-[var(--brand-bg)] text-[var(--brand)] hover:bg-[var(--brand-bg-hover)] hover:text-brand-muted"
         : "text-[var(--text-secondary)] hover:bg-[var(--bg-hover)] hover:text-[var(--text-primary)]",
     className,
   );