@webority/theme 0.36.0 → 0.38.0

package/package.json

@@ -1,22 +1,20 @@
 {
   "name": "@webority/theme",
-  "version": "0.36.0",
+  "version": "0.38.0",
   "description": "Webority shared design system — Bootstrap 5.3 SCSS overrides, --wui-* tokens, and shared component CSS. The single source of brand chrome for React portals and Razor sites.",
   "license": "SEE LICENSE IN LICENSE",
   "publishConfig": {
     "access": "public",
     "registry": "https://registry.npmjs.org/"
   },
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/Webority/webority-ui.git",
-    "directory": "packages/theme"
-  },
   "files": [
     "index.scss",
     "scss",
     "fonts",
-    "dist"
+    "dist",
+    "!dist/**/__tests__",
+    "!dist/**/*.test.*",
+    "!dist/**/*.map"
   ],
   "exports": {
     ".": {

package/scss/_components.scss

@@ -82,7 +82,7 @@
 
 .btn-danger {
     // White-on-red destructive look via the --wui-danger-strong token: white fails AA on the
-    // brighter danger fills (#F8285A → 3.86:1, #E82646 → 4.38:1), so the button uses the
+    // brighter danger fill (#E82646 → 4.38:1), so the button uses the
     // deepened fill (5.80:1) that carries white cleanly. Token-driven so a rebrand tracks it;
     // the brighter --wui-danger stays for badges/dots that never carry white text.
     --bs-btn-color: #fff;

package/scss/_tokens.scss

@@ -41,6 +41,10 @@
     // combobox/phone/date/number wrappers) — a touch lighter than --wui-bg-muted so fields read
     // as their own surface. Change here to restyle every field's background at once.
     --wui-field-bg: #F9FBFC;
+    // Resting and hover border of every input-like control. They clear WCAG 1.4.11's 3:1
+    // against the field fill and the surface, so a field's edge is visible without focus.
+    --wui-field-border: #80899F;
+    --wui-field-border-hover: #687088;
     --wui-border-light: #EBEDF3;
     --wui-border-soft: #F4F6F8;
     // The unfilled part of a progress bar / meter. Darker than every surface it can sit on
@@ -144,16 +148,16 @@
     // Shared by the portal (aliased to --color-*) and marketing alerts/badges.
     --wui-info-text: #1460ba;
     --wui-info-active: #056EE9;
-    --wui-info: #1B84FF;
+    --wui-info: #056EE9;
     --wui-info-50: #8DC2FF;
     --wui-info-30: #BBDBFF;
     --wui-info-20: #D1E6FF;
     --wui-info-10: #E9F3FF;
     --wui-info-5: #F3F9FF;
 
-    // `-text` variants exist because the status colours are FILLS. #F8285A and #04B440
+    // `-text` variants exist because the status colours are FILLS. #E82646 and #04B440
     // are correct on a button or a badge, and both fail AA as text on a light surface
-    // (3.6:1 and 2.6:1) — which is how a validation error message, of all things, came
+    // (4.4:1 and 2.8:1) — which is how a validation error message, of all things, came
     // to be unreadable. Darkening the base tokens would change every red button and
     // green badge in the system, so text gets its own value and the fills keep theirs.
     --wui-success-text: #0e7531;
@@ -163,7 +167,7 @@
     // the other tokens so buttons/badges keep the vibrant fill.
     --wui-success-strong: #0e7531;
     --wui-success-active: #04B440;
-    --wui-success: #17C653;
+    --wui-success: #04B440;
     --wui-success-50: #8BE3A9;
     --wui-success-30: #BAEECC;
     --wui-success-20: #D1F4DD;
@@ -172,7 +176,7 @@
 
     --wui-warning-text: #876100;
     --wui-warning-active: #DFA000;
-    --wui-warning: #F6B100;
+    --wui-warning: #DFA000;
     --wui-warning-50: #FBD880;
     --wui-warning-30: #FDE8B3;
     --wui-warning-20: #FDEFCC;
@@ -192,7 +196,7 @@
     --wui-danger-strong: #C81340;
     --wui-danger-strong-hover: #AB1036;
     --wui-danger-active: #E82646;
-    --wui-danger: #F8285A;
+    --wui-danger: #E82646;
     --wui-danger-50: #FC94AD;
     --wui-danger-30: #FDBFCE;
     --wui-danger-20: #FED4DE;
@@ -253,6 +257,9 @@
     --wui-dark-bg-surface: #181b23;
     --wui-dark-border: #2a2f3a;
     --wui-dark-border-strong:#3a414f;
+    // Field borders on the dark fills: 3:1 or better against the dark field fill and surface.
+    --wui-dark-field-border: #6E7586;
+    --wui-dark-field-border-hover: #8a90a0;
     // Lighter than the dark page, surface and muted fill, so the empty track shows on all three.
     --wui-dark-progress-track: #323845;
     --wui-dark-text: #e6e8ee;
@@ -336,6 +343,11 @@
     --wui-z-popover: 1600; // same rung as --wui-z-menu (above modal)
     --wui-z-tooltip: 1650;
     --wui-z-toast: 1700;
+
+    // The weekday every calendar's week starts on: the date picker, the date range and the event
+    // calendar. 0 = Sunday, 1 = Monday, through 6 = Saturday. A product sets it once here, a page or
+    // a section can set it on an ancestor, and a control's own first-day attribute wins over both.
+    --wui-first-day: 1;
 }
 
 // Bootstrap md / xl (not invented px)

package/scss/_variables.scss

@@ -20,6 +20,8 @@ $primary: #4F46E5 !default;
 // second brand colour should use a custom utility or token — do not repurpose
 // $secondary without a coordinated migration.
 $secondary: #4B5675 !default;
+// The status colours match the base --wui-success/-info/-warning/-danger tokens, so a
+// Bootstrap utility (.bg-success, .btn-info, --bs-danger) paints the same fill as the library.
 $success: #04B440 !default;
 $info: #056EE9 !default;
 $warning: #DFA000 !default;

package/scss/_wui-aliases.scss

@@ -18,12 +18,20 @@
   --color-border: var(--wui-border-light);
   --color-border-light: var(--wui-border-soft);
   --color-border-strong: var(--wui-text-5);
+  // The resting and hover border of an input-like control (3:1 against the field and surface).
+  // Decorative card and table borders stay on --color-border.
+  --color-field-border: var(--wui-field-border);
+  --color-field-border-hover: var(--wui-field-border-hover);
   --color-progress-track: var(--wui-progress-track);
   // Label text inside a progress bar fill.
   --color-progress-label: var(--wui-bg-light);
   // Ink on a solid status fill (success, warning, danger, info): near-black in both modes, since
   // white fails AA on the bright fills.
   --color-on-status-fill: #0F0F0F;
+  // Ink on a DEEP status fill (the -text tokens, used as a fill the way primary is): white in
+  // light mode, where those shades measure 5.5 to 6.2:1; near-black in dark mode, where -text is
+  // the bright fill.
+  --color-on-status-strong: #FFFFFF;
 
   // Text ramp
   --color-text: var(--wui-text-heading);
@@ -32,7 +40,9 @@
   // A dark-ink glyph such as Bootstrap's .btn-close needs no filter on a light surface.
   --color-close-filter: none;
   // The border of a focused / open / active control (input, select, OTP slot, dropzone).
-  --color-focus-border: var(--wui-primary-30);
+  // It is the only focus cue on a field, so it must clear 3:1 against the field and surface
+  // (WCAG 1.4.11): the full primary, not a tint.
+  --color-focus-border: var(--wui-primary);
   --color-text-muted: var(--wui-text-2);
   --color-text-subtle: var(--wui-text-3);
 
@@ -153,6 +163,8 @@
   --color-border: var(--wui-dark-border);
   --color-border-light: color-mix(in srgb, var(--wui-dark-border) 50%, transparent);
   --color-border-strong: var(--wui-dark-border-strong);
+  --color-field-border: var(--wui-dark-field-border);
+  --color-field-border-hover: var(--wui-dark-field-border-hover);
   --color-progress-track: var(--wui-dark-progress-track);
   // Same near-black as --color-primary-text below: 4.97:1 or better on every bright fill.
   --color-progress-label: #0F0F0F;
@@ -199,29 +211,33 @@
   // Dark mode primary text: #fff on #6B83EC measures 3.5:1, below WCAG AA (4.5:1).
   // Map to a near-black for safe contrast (6.9:1 on --wui-dark-primary) when text sits on primary fill.
   --color-primary-text: #0F0F0F;
+  --color-on-status-strong: #0F0F0F;
 
-  // On a dark surface the FILL colours are already the readable ones — the darkened
-  // `-text` values would sink into the background. So dark mode maps text back to the
-  // bright tokens rather than inheriting light mode's.
-  --color-success-text: var(--wui-success);
-  --color-danger-text: var(--wui-danger);
-  --color-warning-text: var(--wui-warning);
-  --color-info-text: var(--wui-info);
+  // On a dark surface the darkened `-text` values would sink into the background, so dark
+  // mode builds text from the fill instead, lifted with 25% white: the info and danger fills
+  // alone reach only 3.1:1 and 3.4:1 on the muted fill, and the lift clears 4.5:1 on every
+  // dark surface for all four tones.
+  --color-success-text: color-mix(in srgb, var(--wui-success) 75%, white);
+  --color-danger-text: color-mix(in srgb, var(--wui-danger) 75%, white);
+  --color-warning-text: color-mix(in srgb, var(--wui-warning) 75%, white);
+  --color-info-text: color-mix(in srgb, var(--wui-info) 75%, white);
 
   // Text ON a soft tint (an alert heading). The bright tone alone falls under WCAG AA on its own
   // 18% tint over the dark page (info and danger reach only ~3.8:1), so it is lifted with 30%
   // white: every tone then clears 4.5:1 on the dark page, surface and muted fill.
-  --color-success-text-on-soft: color-mix(in srgb, var(--wui-success) 70%, white);
-  --color-danger-text-on-soft: color-mix(in srgb, var(--wui-danger) 70%, white);
-  --color-warning-text-on-soft: color-mix(in srgb, var(--wui-warning) 70%, white);
-  --color-info-text-on-soft: color-mix(in srgb, var(--wui-info) 70%, white);
+  --color-success-text-on-soft: color-mix(in srgb, var(--wui-success) 65%, white);
+  --color-danger-text-on-soft: color-mix(in srgb, var(--wui-danger) 65%, white);
+  --color-warning-text-on-soft: color-mix(in srgb, var(--wui-warning) 65%, white);
+  --color-info-text-on-soft: color-mix(in srgb, var(--wui-info) 65%, white);
 
   // Light mode maps -strong to deep AA fills; on dark surfaces those sink into the page.
-  // Remap to the bright fills so timeline dots / strong accents stay visible (same as -text).
-  --color-success-strong: var(--wui-success);
-  --color-danger-strong: var(--wui-danger);
-  --color-info-strong: var(--wui-info);
-  --color-warning-strong: var(--wui-warning);
+  // Dark mode uses the lifted -text tone, since -strong is a fill that carries near-black text
+  // (progress label, bell count): the bare danger and info fills reach only 4.4:1 and 4.0:1
+  // under that ink, the lifted ones 5.7:1 or better.
+  --color-success-strong: var(--color-success-text);
+  --color-danger-strong: var(--color-danger-text);
+  --color-info-strong: var(--color-info-text);
+  --color-warning-strong: var(--color-warning-text);
 
   --color-success-soft: color-mix(in srgb, var(--wui-success) 18%, transparent);
   --color-warning-soft: color-mix(in srgb, var(--wui-warning) 18%, transparent);

package/scss/wui/_choice.scss

@@ -244,7 +244,7 @@
     // Not while open — an open control keeps its active (primary) border, not the grey hover one.
     // Not while invalid — an errored control (aria-invalid mirrored from the host) holds its red
     // border on hover rather than reverting to the grey hover one.
-    border-color: var(--color-border-strong);
+    border-color: var(--color-field-border-hover);
 }
 .search-select-control.open {
     // White fill + the active/focus border, matching a focused text input (which lifts off the
@@ -414,7 +414,7 @@
     margin: 4px;
     padding: 0 12px;
     height: 40px;
-    border: 1px solid var(--color-border);
+    border: 1px solid var(--color-field-border);
     border-radius: var(--radius);
     // AppInput's field model: muted resting fill that lifts to a clean surface on focus.
     background: var(--color-field-bg);
@@ -426,7 +426,7 @@
 // Hover and focus follow AppInput, as the phone country search does: a stronger border on hover,
 // then a clean surface fill + soft primary border on focus.
 .search-select-search:hover:not(:focus-within) {
-    border-color: var(--color-border-strong);
+    border-color: var(--color-field-border-hover);
 }
 .search-select-search:focus-within {
     background: var(--color-surface);
@@ -581,7 +581,7 @@
 wui-datepicker:not([aria-invalid="true"]) .datepicker:not(.open) .datepicker-trigger:focus:not(:focus-visible),
 wui-date-range:not([aria-invalid="true"]) .daterange:not(.open) .daterange-trigger:focus:not(:focus-visible) {
     background-color: var(--color-field-bg);
-    border-color: var(--color-border);
+    border-color: var(--color-field-border);
 }
 // Portalled to <body> and fixed-positioned from JS so a modal's
 // overflow:hidden can't clip it; top/left come from inline styles. z-index
@@ -1003,7 +1003,7 @@ button.datepicker-month:hover {
     align-items: center;
     width: 100%;
     height: var(--wui-control-height);
-    border: 1px solid var(--color-border);
+    border: 1px solid var(--color-field-border);
     // Match AppInput's field-radius ladder exactly (18px md), not the generic --radius (10px).
     border-radius: var(--wui-field-radius);
     // Match AppInput exactly: muted resting fill that lifts to a clean surface on focus.
@@ -1024,7 +1024,7 @@ button.datepicker-month:hover {
     wui-phone:not([aria-invalid="true"])
     .phone-input-wrap:hover:not(:focus-within):not(:has(> .input.error)):not(:has(> .input.is-invalid)):not(:has(> .input[aria-invalid="true"])) {
     background: var(--color-field-bg);
-    border-color: var(--color-border-strong);
+    border-color: var(--color-field-border-hover);
 }
 // Match AppInput's focus: clean surface fill + a soft primary border.
 .app-phone-number-input .phone-input-wrap:focus-within {
@@ -1238,7 +1238,7 @@ wui-timepicker[aria-invalid="true"] .timepicker.open .timepicker-trigger {
     width: 100%;
     height: 40px;
     padding: 0 12px 0 36px;
-    border: 1px solid var(--color-border);
+    border: 1px solid var(--color-field-border);
     border-radius: var(--radius);
     font-size: 14px;
     color: var(--color-text);
@@ -1248,7 +1248,7 @@ wui-timepicker[aria-invalid="true"] .timepicker.open .timepicker-trigger {
 }
 .dropdown-search-input:hover:not(:focus) {
     background: var(--color-field-bg);
-    border-color: var(--color-border-strong);
+    border-color: var(--color-field-border-hover);
 }
 // Border is the focus cue everywhere else in the system — no glow ring here.
 // AppInput's exact focus: clean surface fill + its soft primary border token.

package/scss/wui/_controls.scss

@@ -301,7 +301,7 @@
     height: var(--wui-control-height);
     padding: 12px;
     border-radius: var(--wui-field-radius);
-    border: 1px solid var(--color-border);
+    border: 1px solid var(--color-field-border);
     background: var(--color-field-bg);
     font-size: 14px;
     line-height: 1.5;
@@ -359,7 +359,7 @@ textarea.form-control.autosize {
 .select:hover:not(:focus):not(:disabled):not([aria-invalid="true"]):not(.is-invalid):not(.error),
 .textarea:hover:not(:focus):not(:disabled):not([readonly]):not([aria-invalid="true"]):not(.is-invalid):not(.error) {
     background-color: var(--color-field-bg);
-    border-color: var(--color-border-strong);
+    border-color: var(--color-field-border-hover);
 }
 .form-control:focus,
 .form-select:focus,
@@ -462,7 +462,10 @@ textarea.form-control.autosize {
 .input[readonly],
 .select[readonly],
 .textarea[readonly] {
-    background: var(--color-bg-subtle);
+    // The light decorative border and the muted fill, never the field border, so a read-only
+    // value never looks typeable.
+    background: var(--color-bg-muted);
+    border-color: var(--color-border);
     color: var(--color-text-muted);
     cursor: default;
 }
@@ -810,7 +813,7 @@ $wui-field-error-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/
     display: flex;
     align-items: stretch;
     width: 100%;
-    border: 1px solid var(--color-border);
+    border: 1px solid var(--color-field-border);
     border-radius: var(--wui-field-radius);
     // Soft-filled at rest, white on focus — one shared fill for the whole control so the
     // prefix/suffix and the input body are always the SAME colour combination as the field.
@@ -820,7 +823,7 @@ $wui-field-error-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/
         background-color 0.12s ease;
 }
 .input-affixed:hover:not(:focus-within) {
-    border-color: var(--color-border-strong);
+    border-color: var(--color-field-border-hover);
 }
 .input-affixed:focus-within {
     background: var(--color-surface);
@@ -1098,7 +1101,7 @@ wui-select[compact] {
 .input-with-unit {
     display: flex;
     align-items: stretch;
-    border: 1px solid var(--color-border);
+    border: 1px solid var(--color-field-border);
     border-radius: var(--wui-field-radius);
     // Soft-filled at rest, white on focus — the numeric input and its unit pill share the
     // one wrapper fill, same colour combination as every other field.
@@ -1109,7 +1112,7 @@ wui-select[compact] {
     overflow: hidden;
 }
 .input-with-unit:hover:not(:focus-within) {
-    border-color: var(--color-border-strong);
+    border-color: var(--color-field-border-hover);
 }
 .input-with-unit:focus-within {
     background: var(--color-surface);
@@ -1168,7 +1171,7 @@ wui-select[compact] {
 .num-wrap {
     display: flex;
     align-items: stretch;
-    border: 1px solid var(--color-border);
+    border: 1px solid var(--color-field-border);
     // Field radius ladder (matches AppInput): md 18px; sm/lg step below.
     border-radius: var(--wui-field-radius);
     // Match AppInput exactly: muted resting fill that lifts to a clean surface on focus.
@@ -1182,7 +1185,7 @@ wui-select[compact] {
 // reverting to the grey hover one (matches AppInput, whose hover rule excludes the error state).
 .num-wrap:hover:not(:focus-within):not(:has(.num-input.error)):not(:has(.num-input.is-invalid)):not(:has(.num-input[aria-invalid="true"])) {
     background: var(--color-field-bg);
-    border-color: var(--color-border-strong);
+    border-color: var(--color-field-border-hover);
 }
 .num-wrap:focus-within {
     background: var(--color-surface);
@@ -1547,7 +1550,7 @@ wui-otp {
     height: var(--wui-control-height);
     // Colour model matches AppInput exactly: muted resting fill + soft border, same
     // field radius. State rules below mirror AppInput's hover/focus/invalid/disabled.
-    border: 1px solid var(--color-border);
+    border: 1px solid var(--color-field-border);
     border-radius: var(--wui-field-radius);
     background: var(--color-field-bg);
     font-size: 18px;
@@ -1561,7 +1564,7 @@ wui-otp {
 // Hover — the whole field lifts its border to strong (AppInput hover), but not while a
 // slot is active (focus wins) or the field is disabled.
 .otp:hover:not(:focus-within):not(:has(.otp-field:disabled)) .otp-slot {
-    border-color: var(--color-border-strong);
+    border-color: var(--color-field-border-hover);
 }
 // The caret cannot be seen through a transparent input, so the ACTIVE box carries the
 // affordance instead — derived from selectionStart. Matches AppInput's focus: clean

package/scss/wui/_data.scss

@@ -701,6 +701,45 @@
     border-radius: 999px;
 }
 
+// A table wider than its scroller fades out at each edge it continues past, so a cut-off column
+// reads as "more this way". scrollEdges.js (ui-elements) keeps the two data-wui-overflow-*
+// attributes current on scroll and resize. The fade is a mask on the scroller, because a shadow
+// paints under the opaque cells. A mask also hides what a descendant floats outside the box, so
+// it stands aside while a menu or picker inside the table is open (an expanded row, which has no
+// popup, keeps it). A pinned first column never
+// fades at the start: it is the part that stays put.
+:is(.table-wrap, .table-responsive, [class*="table-responsive-"]) {
+    --wui-overflow-fade-start: 0px;
+    --wui-overflow-fade-end: 0px;
+}
+:is(.table-wrap, .table-responsive, [class*="table-responsive-"])[data-wui-overflow-start] {
+    --wui-overflow-fade-start: 32px;
+}
+:is(.table-wrap, .table-responsive, [class*="table-responsive-"])[data-wui-overflow-end] {
+    --wui-overflow-fade-end: 32px;
+}
+.table-wrap[data-wui-overflow-start]:has(> .wui-table-sticky-first) {
+    --wui-overflow-fade-start: 0px;
+}
+:is(.table-wrap, .table-responsive, [class*="table-responsive-"]):is([data-wui-overflow-start], [data-wui-overflow-end]):not(:has([aria-haspopup][aria-expanded="true"], .dropdown-menu.show)) {
+    mask-image: linear-gradient(
+        90deg,
+        transparent,
+        #000 var(--wui-overflow-fade-start),
+        #000 calc(100% - var(--wui-overflow-fade-end)),
+        transparent
+    );
+}
+:is(.table-wrap, .table-responsive, [class*="table-responsive-"]):dir(rtl):is([data-wui-overflow-start], [data-wui-overflow-end]):not(:has([aria-haspopup][aria-expanded="true"], .dropdown-menu.show)) {
+    mask-image: linear-gradient(
+        270deg,
+        transparent,
+        #000 var(--wui-overflow-fade-start),
+        #000 calc(100% - var(--wui-overflow-fade-end)),
+        transparent
+    );
+}
+
 // The identity/name column — a STABLE hook, because position is not one.
 //
 // The library owns .wui-select-cell, so a ledger's first cell is the 44px checkbox when

package/scss/wui/_flow.scss

@@ -25,6 +25,10 @@
 //                          eyebrow, filled rail). Unset, completed steps follow the accent.
 //   --wui-step-size        compact/vertical badge diameter (default 28px)
 //   --wui-step-badge-size  icons-variant badge diameter (default 56px)
+//   --wui-step-journey-size  journey badge diameter (default 40px)
+//   --wui-step-number-font   the step number in a badge (default 12px; journey 13px, icons 22px)
+//   --wui-step-label-font    the step label (default 13px; journey 16px, icons 15px)
+// The `.wui-step-size-sm` / `.wui-step-size-lg` classes (end of this block) set these together.
 // Every variant defaults to the brand primary — active, done and rail share one accent
 // (no multi-colour). Colour variety is opt-in: a `.wui-step-tone-*` class or a var override.
 // ============================================================================
@@ -76,6 +80,15 @@
 .step.done + .step::before {
     background: var(--wui-step-done-accent, var(--wui-step-accent, var(--color-primary)));
 }
+// The active circle's 4px ring would swallow the 4px gap, so both connectors touching the
+// active step start 4px further out and keep the same gap from the ring's edge.
+.step.active + .step::before {
+    left: calc(-50% + var(--wui-step-size, 28px) / 2 + 8px);
+}
+.step.active + .step::before,
+.step.active::before {
+    right: calc(50% + var(--wui-step-size, 28px) / 2 + 8px);
+}
 .step-circle {
     position: relative;
     z-index: 1;
@@ -87,7 +100,7 @@
     border: 1.5px solid var(--color-border);
     border-radius: 999px;
     background: var(--color-surface);
-    font-size: 12px;
+    font-size: var(--wui-step-number-font, 12px);
     font-weight: 600;
     color: var(--color-text-subtle);
 }
@@ -106,7 +119,7 @@
 }
 .step-label {
     max-width: 130px;
-    font-size: 13px;
+    font-size: var(--wui-step-label-font, 13px);
     font-weight: 500;
     line-height: 1.25;
     color: var(--color-text-subtle);
@@ -210,11 +223,11 @@ button.step.done:focus-visible .step-circle {
     content: none;
 }
 .stepper-journey .step-circle {
-    width: 40px;
-    height: 40px;
+    width: var(--wui-step-journey-size, 40px);
+    height: var(--wui-step-journey-size, 40px);
     border: none;
     background: var(--color-bg-muted);
-    font-size: 13px;
+    font-size: var(--wui-step-number-font, 13px);
     font-weight: 700;
     transition:
         background 0.2s ease,
@@ -265,7 +278,7 @@ button.step.done:focus-visible .step-circle {
 .stepper-journey .step-label {
     max-width: none;
     margin-top: 8px;
-    font-size: 16px;
+    font-size: var(--wui-step-label-font, 16px);
     line-height: 1.3;
     white-space: nowrap;
     overflow: hidden;
@@ -406,7 +419,7 @@ button.step.done:focus-visible .step-circle {
     border: none;
     background: var(--color-bg-muted);
     color: var(--color-text-subtle);
-    font-size: 22px;
+    font-size: var(--wui-step-number-font, 22px);
     transition:
         background 0.2s ease,
         color 0.2s ease,
@@ -457,7 +470,7 @@ button.step.done:focus-visible .step-circle {
 }
 .stepper-icons .step-label {
     max-width: 150px;
-    font-size: 15px;
+    font-size: var(--wui-step-label-font, 15px);
     font-weight: 600;
     color: var(--color-text-subtle);
 }
@@ -534,28 +547,29 @@ button.step.done:focus-visible .step-circle {
     --wui-step-soft: var(--color-primary-soft);
     --wui-step-soft-fg: var(--color-primary);
 }
-// Text on a bright status fill: a near-black ink in both modes, where white fails AA.
+// Like primary, each tone fills with its deep shade (the -text token) under white ink in light mode,
+// and with the bright fill under near-black ink in dark mode; both pairs clear AA.
 .wui-step-tone-success {
-    --wui-step-accent: var(--color-success);
-    --wui-step-accent-fg: var(--color-on-status-fill);
+    --wui-step-accent: var(--color-success-text);
+    --wui-step-accent-fg: var(--color-on-status-strong);
     --wui-step-soft: var(--color-success-soft);
     --wui-step-soft-fg: var(--color-success-text);
 }
 .wui-step-tone-warning {
-    --wui-step-accent: var(--color-warning);
-    --wui-step-accent-fg: var(--color-on-status-fill);
+    --wui-step-accent: var(--color-warning-text);
+    --wui-step-accent-fg: var(--color-on-status-strong);
     --wui-step-soft: var(--color-warning-soft);
     --wui-step-soft-fg: var(--color-warning-text);
 }
 .wui-step-tone-danger {
-    --wui-step-accent: var(--color-danger);
-    --wui-step-accent-fg: var(--color-on-status-fill);
+    --wui-step-accent: var(--color-danger-text);
+    --wui-step-accent-fg: var(--color-on-status-strong);
     --wui-step-soft: var(--color-danger-soft);
     --wui-step-soft-fg: var(--color-danger-text);
 }
 .wui-step-tone-info {
-    --wui-step-accent: var(--color-info);
-    --wui-step-accent-fg: var(--color-on-status-fill);
+    --wui-step-accent: var(--color-info-text);
+    --wui-step-accent-fg: var(--color-on-status-strong);
     --wui-step-soft: var(--color-info-soft);
     --wui-step-soft-fg: var(--color-info-text);
 }
@@ -572,30 +586,70 @@ button.step.done:focus-visible .step-circle {
     --wui-step-done-soft-fg: var(--color-primary);
 }
 .wui-step-done-tone-success {
-    --wui-step-done-accent: var(--color-success);
-    --wui-step-done-accent-fg: var(--color-on-status-fill);
+    --wui-step-done-accent: var(--color-success-text);
+    --wui-step-done-accent-fg: var(--color-on-status-strong);
     --wui-step-done-soft: var(--color-success-soft);
     --wui-step-done-soft-fg: var(--color-success-text);
 }
 .wui-step-done-tone-warning {
-    --wui-step-done-accent: var(--color-warning);
-    --wui-step-done-accent-fg: var(--color-on-status-fill);
+    --wui-step-done-accent: var(--color-warning-text);
+    --wui-step-done-accent-fg: var(--color-on-status-strong);
     --wui-step-done-soft: var(--color-warning-soft);
     --wui-step-done-soft-fg: var(--color-warning-text);
 }
 .wui-step-done-tone-danger {
-    --wui-step-done-accent: var(--color-danger);
-    --wui-step-done-accent-fg: var(--color-on-status-fill);
+    --wui-step-done-accent: var(--color-danger-text);
+    --wui-step-done-accent-fg: var(--color-on-status-strong);
     --wui-step-done-soft: var(--color-danger-soft);
     --wui-step-done-soft-fg: var(--color-danger-text);
 }
 .wui-step-done-tone-info {
-    --wui-step-done-accent: var(--color-info);
-    --wui-step-done-accent-fg: var(--color-on-status-fill);
+    --wui-step-done-accent: var(--color-info-text);
+    --wui-step-done-accent-fg: var(--color-on-status-strong);
     --wui-step-done-soft: var(--color-info-soft);
     --wui-step-done-soft-fg: var(--color-info-text);
 }
 
+// Size presets: scale the badge, its number and the label together, on every variant. Same
+// placement rules as the tone presets: on the stepper or any ancestor (the wizard host). Medium is
+// the unset default above. The number and label fonts are per-variant here, so these rules name
+// each variant; one class sets them all.
+// ----------------------------------------------------------------------------
+.wui-step-size-sm {
+    --wui-step-size: 22px;
+    --wui-step-badge-size: 44px;
+    --wui-step-journey-size: 32px;
+    --wui-step-number-font: 11px;
+    --wui-step-label-font: 12px;
+}
+.wui-step-size-sm .stepper-journey,
+.wui-step-size-sm.stepper-journey {
+    --wui-step-number-font: 12px;
+    --wui-step-label-font: 14px;
+}
+.wui-step-size-sm .stepper-icons,
+.wui-step-size-sm.stepper-icons {
+    --wui-step-number-font: 18px;
+    --wui-step-label-font: 13px;
+}
+.wui-step-size-lg {
+    --wui-step-size: 36px;
+    --wui-step-badge-size: 68px;
+    --wui-step-journey-size: 48px;
+    --wui-step-number-font: 14px;
+    --wui-step-label-font: 15px;
+}
+.wui-step-size-lg .stepper-journey,
+.wui-step-size-lg.stepper-journey {
+    --wui-step-number-font: 15px;
+    --wui-step-label-font: 18px;
+}
+.wui-step-size-lg .stepper-icons,
+.wui-step-size-lg.stepper-icons {
+    --wui-step-number-font: 26px;
+    --wui-step-label-font: 17px;
+}
+
 // ============================================================================
 // Pricing card. A tier's name, price, pitch, feature list and CTA.
 //