@eifi1/ui-kit 0.32.2 → 0.33.1

package/src/theme/contrast-tokens.ts

@@ -49,8 +49,9 @@ function toLab(hex: string): Lab | null {
 
 /** `color-mix(in oklab, a p, b)` as a hex — the same formula tokens.css's derived roles
  *  use, so a stepped value sits where the stylesheet would have put it. A colour that is
- *  not hex (a consumer's own token set) comes back unmixed. */
-function mix(a: string, b: string, p: number): string {
+ *  not hex (a consumer's own token set) comes back unmixed. The deriver mixes with it
+ *  too (`--bg-hover`, `--brand-muted`, `--brand-bg`, `--brand-bg-hover`). */
+export function mix(a: string, b: string, p: number): string {
   const A = toLab(a);
   const B = toLab(b);
   if (!A || !B) return a;
@@ -62,6 +63,56 @@ function mix(a: string, b: string, p: number): string {
   return toHex(oklchToRgb({ l, c, h }));
 }
 
+/**
+ * `--bg-hover` in tokens.css: this share of `--text-primary` mixed into `--bg-surface`.
+ *
+ * 5.5 %, down from 7 % in 0.33 (docs/colour-roles-harmonization.md §12.10): a hovered row
+ * on a card is the darkest fill (in dark, the lightest) that text sits on, and at 7 % the
+ * light status colours, the money colours and Ink/Moss/Plum's muted text fell to
+ * 4.25–4.49:1 on it. The status literals are fixed, the same in every preset, so the
+ * hover moved instead: text wins over the hover's step. At 5.5 % the step from the card
+ * is still 1.09–1.13:1, above the 1.08:1 the kit's hover rule asks (§12.2). The deriver
+ * solves the money colours against this fill, and tokens-css-audit.test.ts measures
+ * every text role on it in every shipped preset, so the two cannot part.
+ */
+export const HOVER_INK = 0.055;
+
+/** The card's hover fill (`--bg-hover`) for `t`, as tokens.css mixes it. */
+export function hoverFill(t: Pick<TokenSet, "textPrimary" | "bgSurface">): string {
+  return mix(t.textPrimary, t.bgSurface, HOVER_INK);
+}
+
+/**
+ * `--brand-muted` in tokens.css: this share of `--brand` mixed into `--text-primary`.
+ *
+ * 62 %, down from 70 % in 0.33 (docs/colour-roles-harmonization.md §12.11): the brand as
+ * text sits on its soft chip HOVERED too (`--brand-bg-hover` — ButtonGroupLink's current
+ * page, a selected day), and at 70 % it read 4.08–4.42:1 there in Default and Moss light
+ * and in Ink, Moss, Plum and Contrast dark. The brand could not move instead: the dark
+ * brands would have flipped their white label to the dark ink. Nor could the chip's hover
+ * lighten: by the time the text cleared 4.5:1 the hover sat 1.00:1 from the chip it
+ * hovers. So the text moves toward the ink, as `--bg-hover` moved for its text.
+ */
+export const BRAND_MUTED_SHARE = 0.62;
+/** `--brand-bg` and `--brand-bg-hover` in tokens.css: these shares of `--brand` mixed
+ *  into `--bg-surface`. */
+export const BRAND_BG_SHARE = 0.14;
+export const BRAND_BG_HOVER_SHARE = 0.24;
+
+/** `--brand-muted`, `--brand-bg` and `--brand-bg-hover` for `t`, as tokens.css mixes them.
+ *  tokens-css-audit.test.ts holds the three shares equal to the stylesheet's. */
+export function brandSoft(t: Pick<TokenSet, "brand" | "textPrimary" | "bgSurface">): {
+  brandMuted: string;
+  brandBg: string;
+  brandBgHover: string;
+} {
+  return {
+    brandMuted: mix(t.brand, t.textPrimary, BRAND_MUTED_SHARE),
+    brandBg: mix(t.brand, t.bgSurface, BRAND_BG_SHARE),
+    brandBgHover: mix(t.brand, t.bgSurface, BRAND_BG_HOVER_SHARE),
+  };
+}
+
 /** WCAG 1.4.11 for a component's boundary. */
 const BORDER_TARGET = 3;
 /** `--border-strong` in tokens.css: 55 % border, 45 % text. */

package/src/theme/palette-derive.ts

@@ -13,6 +13,7 @@ import {
   solveLightness,
 } from "./color";
 import type { CvdType, Oklch } from "./color";
+import { brandSoft, hoverFill } from "./contrast-tokens";
 
 /**
  * Build a whole palette from one brand colour, plus any number of colours pinned by
@@ -161,7 +162,14 @@ function placeHue(home: number, slack: number, taken: number[]): number {
 const SURFACE_L = {
   // Light: the PAGE is slightly darker than the cards on it, so a card reads as raised
   // without needing a shadow to say so. Matches the shipped presets' relationship.
-  light: { page: 0.912, surface: 0.945, surface2: 0.929 },
+  //
+  // The light WELL is the page itself (0.33, docs/colour-roles-harmonization.md §5.3,
+  // k26). Between the card and the page it sat 1.02–1.05:1 from the card it is inset
+  // in, which is no well at all; at the page's lightness it stands out from the card
+  // exactly as far as the card does from the page, and nothing re-solves, because the
+  // page is already the surface every text role is solved against. Dark keeps its
+  // well a step lighter than the card (1.11–1.13:1).
+  light: { page: 0.912, surface: 0.945, surface2: 0.912 },
   dark: { page: 0.158, surface: 0.206, surface2: 0.249 },
 } as const;
 
@@ -272,6 +280,19 @@ export function derivePalette({
   const textSecondary = solveAgainst(brand.h, textChroma, targets.secondary, worstSurface, mode);
   const textMuted = solveAgainst(brand.h, textChroma, targets.muted, worstSurface, mode);
 
+  // The darkest fill text sits on (the lightest, in dark): the worst surface, or a
+  // hovered row on the card (`--bg-hover`), which in light is a shade darker than the
+  // page. The colours that are solved exactly to 4.5:1 — money, the semantic text — are
+  // solved against this, so they hold on a hovered row too (0.33, §12.10). The text
+  // roles above keep their margin (4.6:1 and up) and need no second solve.
+  const hover = hoverFill({ textPrimary, bgSurface: surfaces.bgSurface });
+  const worstText = [worstSurface, hover].reduce((a, b) =>
+    contrast(a, mode === "light" ? "#000000" : "#ffffff") <
+    contrast(b, mode === "light" ? "#000000" : "#ffffff")
+      ? a
+      : b,
+  );
+
   // ── Brand. Keep the hue the caller asked for; move only the lightness, and only as
   // far as 3:1 against the worst surface — WCAG 1.4.11, since a brand-filled control is
   // a graphical object whose boundary has to be perceivable.
@@ -280,7 +301,7 @@ export function derivePalette({
   // NORMALISED, never the caller's raw string. `parseHex` accepts "4f46e5" and "#abc",
   // and passing either through unchanged put a value in the TokenSet that is not a CSS
   // colour — it then fails silently at paint time, three layers from here.
-  const brandHex =
+  let brandHex =
     brandRatio >= 3
       ? toHex(parseHex(anchors.brand)!)
       : solveAgainst(brand.h, brandChroma, 3, worstSurface, mode);
@@ -291,13 +312,39 @@ export function derivePalette({
         `${brandHex}; hue and chroma are unchanged.`,
     );
   }
+  // `--brand-muted` is the brand AS TEXT — a soft brand chip's label, an outline chip, a
+  // current link — and tokens.css derives it: 62 % brand into the ink. A brand solved
+  // to 3:1 left it at 4.43–4.51:1 in three dark presets (0.33, §5.5), so it gets the
+  // text floor here: the brand moves away from the surfaces, a step at a time, until its
+  // muted form clears 4.5:1 on the worst fill and on its own soft chip, at rest
+  // (`--brand-bg`) and hovered (`--brand-bg-hover`, the harder of the two: §12.11).
+  const brandMutedWorst = (hex: string) => {
+    const soft = brandSoft({ brand: hex, textPrimary, bgSurface: surfaces.bgSurface });
+    return Math.min(
+      contrast(soft.brandMuted, worstText),
+      contrast(soft.brandMuted, soft.brandBg),
+      contrast(soft.brandMuted, soft.brandBgHover),
+    );
+  };
+  for (let i = 0; i < 40 && brandMutedWorst(brandHex) < 4.5; i++) {
+    const lch = hexToOklch(brandHex)!;
+    brandHex = oklchToHex({ ...lch, l: mode === "light" ? lch.l - 0.005 : lch.l + 0.005 });
+  }
+  if (brandMutedWorst(brandHex) < 4.5) {
+    warnings.push(
+      `the brand as text (--brand-muted) reaches only ${brandMutedWorst(brandHex).toFixed(2)}:1 ` +
+        `against the ${mode} surfaces (needs 4.5:1).`,
+    );
+  }
   const brandLch = hexToOklch(brandHex)!;
+  const brandContrast = contrastOn(brandHex);
   const brandHover = oklchToHex({
     ...brandLch,
-    // Hover moves AWAY from the page in both themes: darker on light, lighter on dark.
-    l: mode === "light" ? brandLch.l - 0.06 : brandLch.l + 0.06,
+    // Hover moves AWAY from the colour of the text on it (0.33, §5.5): darker under
+    // white, lighter under a dark ink. It used to move away from the page, which in dark
+    // lightened a fill that carries WHITE text, toward its own label: 4.07:1.
+    l: brandContrast === "#ffffff" ? brandLch.l - 0.06 : brandLch.l + 0.06,
   });
-  const brandContrast = contrastOn(brandHex);
   const onBrand = contrast(brandHex, brandContrast);
   if (onBrand < 4.5) {
     warnings.push(
@@ -352,7 +399,7 @@ export function derivePalette({
     const bg = tintOn(hue, chroma, surfaces.bgSurface, mode);
     const onSurface = solveLightness(
       4.5,
-      parseHex(worstSurface)!,
+      parseHex(worstText)!,
       hue,
       chroma,
       mode === "light" ? "darker" : "lighter",
@@ -425,11 +472,19 @@ export function derivePalette({
   // red/green pair — which is why the shipped presets use teal/amber/violet. Derived
   // here at fixed hues rather than from the brand, for the same reason `--danger` is:
   // a consumer who rebrands does not thereby change what "money out" looks like.
-  const money = (hue: number, target: number) => solveAgainst(hue, 0.12, target, worstSurface, mode);
+  const money = (hue: number, target: number) => solveAgainst(hue, 0.12, target, worstText, mode);
   const moneyIncome = money(175, 4.5);
   const moneyExpense = money(70, 4.5);
   const moneyNet = money(300, 4.5);
-  const moneyNeutral = oklchToHex({ l: mode === "light" ? 0.52 : 0.72, c: 0.012, h: brand.h });
+  // "No money has moved": a quiet grey at a fixed lightness, but printed as TEXT (the
+  // numpad's sign, a future row's figure), so it gets the text floor too (0.33). The
+  // fixed lightness left it at 4.24:1 on four light pages.
+  const neutralFloor = solveLightness(4.5, parseHex(worstText)!, brand.h, 0.012, mode === "light" ? "darker" : "lighter");
+  const moneyNeutral = oklchToHex({
+    l: mode === "light" ? Math.min(0.52, neutralFloor) : Math.max(0.72, neutralFloor),
+    c: 0.012,
+    h: brand.h,
+  });
 
   const tokens: TokenSet = {
     ...surfaces,
@@ -498,6 +553,13 @@ export function auditPalette(t: TokenSet, semantic?: SemanticTokens): ContrastRe
     ["bgSurface", t.bgSurface],
     ["bgSurface2", t.bgSurface2],
   ];
+  // A hovered row on the card (`--bg-hover`) carries the same text as the card, and in
+  // light it is the darkest fill that text sits on (0.33, §12.10). Text is measured on
+  // it; the brand fill and the hairline, which are not text, are not.
+  const hover = hoverFill(t);
+  const textGrounds: Array<[string, string]> = [...surfaces, ["bgHover", hover]];
+  // `--brand-muted`, `--brand-bg` and `--brand-bg-hover`, mixed as tokens.css mixes them.
+  const { brandMuted, brandBg, brandBgHover } = brandSoft(t);
 
   const add = (pair: string, fg: string, bg: string, required: number, rule: string) => {
     const ratio = contrast(fg, bg);
@@ -505,21 +567,35 @@ export function auditPalette(t: TokenSet, semantic?: SemanticTokens): ContrastRe
   };
 
   for (const [name, bg] of surfaces) {
+    add(`brand on ${name}`, t.brand, bg, 3, "WCAG 1.4.11 graphical object");
+    add(`border on ${name}`, t.border, bg, 1.1, "house rule: a hairline must be findable");
+  }
+  for (const [name, bg] of textGrounds) {
     add(`textPrimary on ${name}`, t.textPrimary, bg, 7, "WCAG 1.4.6 AAA body text");
     add(`textSecondary on ${name}`, t.textSecondary, bg, 4.5, "WCAG 1.4.3 AA body text");
     add(`textMuted on ${name}`, t.textMuted, bg, 4.5, "WCAG 1.4.3 AA body text");
-    add(`brand on ${name}`, t.brand, bg, 3, "WCAG 1.4.11 graphical object");
-    add(`border on ${name}`, t.border, bg, 1.1, "house rule: a hairline must be findable");
+    add(`brandMuted on ${name}`, brandMuted, bg, 4.5, "WCAG 1.4.3 — the brand as text");
     for (const [key, hex] of [
       ["moneyIncome", t.moneyIncome],
       ["moneyExpense", t.moneyExpense],
       ["moneyNet", t.moneyNet],
+      // Not a figure's colour but still printed as one (the numpad's sign, a future
+      // row's amount) — measured since 0.33, when it was found at 4.24:1.
+      ["moneyNeutral", t.moneyNeutral],
     ] as const) {
       add(`${key} on ${name}`, hex, bg, 4.5, "WCAG 1.4.3 — these are rendered as TEXT");
     }
   }
 
   add("brandContrast on brand", t.brandContrast, t.brand, 4.5, "WCAG 1.4.3 AA body text");
+  // A hovered brand button carries the same label (0.33): the derived dark presets
+  // lightened the hover toward their white label and left it at 4.07:1.
+  add("brandContrast on brandHover", t.brandContrast, t.brandHover, 4.5, "WCAG 1.4.3 AA body text");
+  add("brandMuted on brandBg", brandMuted, brandBg, 4.5, "WCAG 1.4.3 — a soft brand chip's label");
+  // The same label on the chip hovered (§12.11): a current link, a selected day. At 70 %
+  // brand the muted text read 4.08–4.42:1 here (Default and Moss light; Ink, Moss, Plum
+  // and Contrast dark).
+  add("brandMuted on brandBgHover", brandMuted, brandBgHover, 4.5, "WCAG 1.4.3 — a hovered soft brand chip's label");
 
   if (semantic) {
     for (const [name, fg] of [
@@ -529,6 +605,7 @@ export function auditPalette(t: TokenSet, semantic?: SemanticTokens): ContrastRe
       ["success", semantic.success],
     ] as const) {
       add(`${name} on bgSurface`, fg, t.bgSurface, 4.5, "WCAG 1.4.3 — rendered as text");
+      add(`${name} on bgHover`, fg, hover, 4.5, "WCAG 1.4.3 — rendered as text, on a hovered row");
     }
     add("danger on dangerBg", semantic.danger, semantic.dangerBg, 4.5, "WCAG 1.4.3 — badge text");
     add("warning on warningBg", semantic.warning, semantic.warningBg, 4.5, "WCAG 1.4.3 — badge text");

package/src/theme/palette-presets.ts

@@ -70,7 +70,9 @@ export const DEFAULT_PRESET: PalettePreset = {
     // Solar Dusk (light) surfaces, with the brand unified to indigo (see above).
     bgPage: "#ede3cf",
     bgSurface: "#f6ecd9",
-    bgSurface2: "#f3ead6",
+    // The well is the page in light (0.33, k26): #f3ead6 stood 1.02:1 from the card it
+    // is inset in. Every light preset does the same; see SURFACE_L in palette-derive.ts.
+    bgSurface2: "#ede3cf",
     border: "#e2d6bd",
     textPrimary: "#463f33",
     textSecondary: "#50493c",
@@ -134,7 +136,7 @@ export const ALTERNATIVE_PRESETS: PalettePreset[] = [
     light: {
       bgPage: "#ece5d6",
       bgSurface: "#f5efe3",
-      bgSurface2: "#efe9dc",
+      bgSurface2: "#ece5d6",
       border: "#e2dcce",
       textPrimary: "#2b2622",
       textSecondary: "#4f4a44",
@@ -189,7 +191,7 @@ export const ALTERNATIVE_PRESETS: PalettePreset[] = [
     light: {
       bgPage: "#e2e7ef",
       bgSurface: "#f0f3f8",
-      bgSurface2: "#e1e6ee",
+      bgSurface2: "#e2e7ef",
       border: "#d3dae6",
       textPrimary: "#2e3440",
       textSecondary: "#454b56",
@@ -244,7 +246,7 @@ export const ALTERNATIVE_PRESETS: PalettePreset[] = [
     light: {
       bgPage: "#e8eaf2",
       bgSurface: "#f6f7fb",
-      bgSurface2: "#eef1f8",
+      bgSurface2: "#e8eaf2",
       border: "#dadfeb",
       textPrimary: "#1b1f2e",
       textSecondary: "#494d5a",
@@ -300,7 +302,7 @@ export const ALTERNATIVE_PRESETS: PalettePreset[] = [
     light: {
       bgPage: "#ede3cf",
       bgSurface: "#f6ecd9",
-      bgSurface2: "#f3ead6",
+      bgSurface2: "#ede3cf",
       border: "#e2d6bd",
       textPrimary: "#463f33",
       textSecondary: "#50493c",
@@ -355,7 +357,7 @@ export const ALTERNATIVE_PRESETS: PalettePreset[] = [
     light: {
       bgPage: "#ececec",
       bgSurface: "#f7f7f7",
-      bgSurface2: "#f4f4f5",
+      bgSurface2: "#ececec",
       border: "#e4e4e7",
       textPrimary: "#18181b",
       textSecondary: "#4e4e50",
@@ -508,7 +510,7 @@ export const DERIVED_PRESETS: PalettePreset[] = [
     light: {
       bgPage: "#dce2ef",
       bgSurface: "#e6edfa",
-      bgSurface2: "#e1e8f5",
+      bgSurface2: "#dce2ef",
       border: "#b0bace",
       textPrimary: "#2e3139",
       textSecondary: "#454950",
@@ -516,14 +518,14 @@ export const DERIVED_PRESETS: PalettePreset[] = [
       brand: "#2f5fd0",
       brandHover: "#1f4cbc",
       brandContrast: "#ffffff",
-      moneyIncome: "#00735f",
+      moneyIncome: "#00725e",
       moneyExpense: "#8e5900",
       moneyNet: "#7356a2",
-      moneyNeutral: "#656970",
+      moneyNeutral: "#61656c",
       chart: PAUL_TOL.light,
       heat: {
-        neutral: "#e1e8f5",
-        under: "#00735f",
+        neutral: "#dce2ef",
+        under: "#00725e",
         over: "#8e5900",
         seqLow: "#fee3c5",
         seqHigh: "#8e5900",
@@ -538,8 +540,8 @@ export const DERIVED_PRESETS: PalettePreset[] = [
       textPrimary: "#c7ccd5",
       textSecondary: "#a7abb4",
       textMuted: "#858992",
-      brand: "#3364d5",
-      brandHover: "#4477ea",
+      brand: "#3466d7",
+      brandHover: "#2353c3",
       brandContrast: "#ffffff",
       moneyIncome: "#00997f",
       moneyExpense: "#b77b29",
@@ -563,7 +565,7 @@ export const DERIVED_PRESETS: PalettePreset[] = [
     light: {
       bgPage: "#d8e6dd",
       bgSurface: "#e3f1e8",
-      bgSurface2: "#deece3",
+      bgSurface2: "#d8e6dd",
       border: "#abbfb2",
       textPrimary: "#2c342e",
       textSecondary: "#434b45",
@@ -572,16 +574,16 @@ export const DERIVED_PRESETS: PalettePreset[] = [
       brandHover: "#196842",
       brandContrast: "#ffffff",
       moneyIncome: "#00735f",
-      moneyExpense: "#8f5a00",
-      moneyNet: "#7457a3",
-      moneyNeutral: "#646b66",
+      moneyExpense: "#8e5900",
+      moneyNet: "#7356a2",
+      moneyNeutral: "#5f6762",
       chart: PAUL_TOL.light,
       heat: {
-        neutral: "#deece3",
+        neutral: "#d8e6dd",
         under: "#00735f",
-        over: "#8f5a00",
-        seqLow: "#fee3c4",
-        seqHigh: "#8f5a00",
+        over: "#8e5900",
+        seqLow: "#fee3c5",
+        seqHigh: "#8e5900",
         empty: "rgba(120,110,95,0.14)",
       },
     },
@@ -593,8 +595,8 @@ export const DERIVED_PRESETS: PalettePreset[] = [
       textPrimary: "#c5cfc9",
       textSecondary: "#a4aea8",
       textMuted: "#838c86",
-      brand: "#2f7a52",
-      brandHover: "#428c63",
+      brand: "#317b53",
+      brandHover: "#1c6943",
       brandContrast: "#ffffff",
       moneyIncome: "#009a80",
       moneyExpense: "#b87b2a",
@@ -618,7 +620,7 @@ export const DERIVED_PRESETS: PalettePreset[] = [
     light: {
       bgPage: "#e7dfea",
       bgSurface: "#f2e9f5",
-      bgSurface2: "#ece4ef",
+      bgSurface2: "#e7dfea",
       border: "#c2b6c6",
       textPrimary: "#342f36",
       textSecondary: "#4c474e",
@@ -627,16 +629,16 @@ export const DERIVED_PRESETS: PalettePreset[] = [
       brandHover: "#692d7d",
       brandContrast: "#ffffff",
       moneyIncome: "#00725e",
-      moneyExpense: "#8e5900",
-      moneyNet: "#7356a2",
-      moneyNeutral: "#6c676e",
+      moneyExpense: "#8d5900",
+      moneyNet: "#7355a2",
+      moneyNeutral: "#676369",
       chart: PAUL_TOL.light,
       heat: {
-        neutral: "#ece4ef",
+        neutral: "#e7dfea",
         under: "#00725e",
-        over: "#8e5900",
-        seqLow: "#fee3c5",
-        seqHigh: "#8e5900",
+        over: "#8d5900",
+        seqLow: "#fee3c4",
+        seqHigh: "#8d5900",
         empty: "rgba(120,110,95,0.14)",
       },
     },
@@ -648,8 +650,8 @@ export const DERIVED_PRESETS: PalettePreset[] = [
       textPrimary: "#d0cad3",
       textSecondary: "#afa9b1",
       textMuted: "#8d878f",
-      brand: "#8f52a4",
-      brandHover: "#a264b7",
+      brand: "#9153a6",
+      brandHover: "#7f4193",
       brandContrast: "#ffffff",
       moneyIncome: "#00997f",
       moneyExpense: "#b77b29",
@@ -673,7 +675,7 @@ export const DERIVED_PRESETS: PalettePreset[] = [
     light: {
       bgPage: "#e0e2e5",
       bgSurface: "#ebedef",
-      bgSurface2: "#e6e8ea",
+      bgSurface2: "#e0e2e5",
       border: "#b7babe",
       textPrimary: "#191d24",
       textSecondary: "#373c44",
@@ -681,17 +683,17 @@ export const DERIVED_PRESETS: PalettePreset[] = [
       brand: "#1f2937",
       brandHover: "#111b28",
       brandContrast: "#ffffff",
-      moneyIncome: "#00735f",
-      moneyExpense: "#8e5900",
-      moneyNet: "#7456a2",
-      moneyNeutral: "#656970",
+      moneyIncome: "#00715d",
+      moneyExpense: "#8d5800",
+      moneyNet: "#7255a1",
+      moneyNeutral: "#5f646b",
       chart: PAUL_TOL.light,
       heat: {
-        neutral: "#e6e8ea",
-        under: "#00735f",
-        over: "#8e5900",
+        neutral: "#e0e2e5",
+        under: "#00715d",
+        over: "#8d5800",
         seqLow: "#fee3c5",
-        seqHigh: "#8e5900",
+        seqHigh: "#8d5800",
         empty: "rgba(120,110,95,0.14)",
       },
     },
@@ -704,7 +706,7 @@ export const DERIVED_PRESETS: PalettePreset[] = [
       textSecondary: "#b7bdc5",
       textMuted: "#9197a0",
       brand: "#546c8d",
-      brandHover: "#657e9f",
+      brandHover: "#445b7b",
       brandContrast: "#ffffff",
       moneyIncome: "#00997f",
       moneyExpense: "#b77b29",

package/src/wizard/stepper-nav.tsx

@@ -10,6 +10,7 @@ import { WizardContextProvider } from "./wizard-context";
 import { DEFAULT_WIZARD_LABELS } from "./types";
 import { useKitLabels } from "../i18n/kit-labels";
 import type { UseWizardReturn, WizardLabels } from "./types";
+import type { CommitScope } from "../components/write-lock";
 
 /**
  * The chrome around a wizard: the step indicator, the step content, and the
@@ -74,7 +75,7 @@ export function StepperNav<TData extends Record<string, unknown>>({
    * with five buttons would not say which one saves — and would read like `useWizard`'s
    * `commits`, which is a step's policy, not a lock.
    */
-  finishCommit?: boolean;
+  finishCommit?: CommitScope;
   /**
    * Why Finish is not available — {@link Button}'s `disabledReason` on the Finish button:
    * `aria-disabled` and focusable, the reason in the kit Tooltip and on the button's