@webority/theme 0.13.4 → 0.14.0

package/index.scss

@@ -4,9 +4,9 @@
 //
 // Load order is LOAD-BEARING — never reorder:
 //   variables (before bootstrap) -> bootstrap -> tokens -> aliases -> components -> wui-components
-// Flags are NOT imported here: _wui-components already imports them (the phone control needs
-// them), and legacy @import does not dedupe, so a second import emitted all ~245 flag classes
-// twice (≈490 selectors) and bloated the bundle.
+// Country flags are NOT imported here, and neither does _wui-components: they are an opt-in
+// layer (scss/_flags.scss, compiled on its own to dist/webority-flags.css) for sites that render
+// the phone input or country picker.
 @import "scss/variables";
 @import "bootstrap/scss/bootstrap";
 @import "scss/tokens";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webority/theme",
-  "version": "0.13.4",
+  "version": "0.14.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": {
@@ -26,6 +26,8 @@
     "./scss/wui/*": "./scss/wui/_*.scss",
     "./scss/*": "./scss/_*.scss",
     "./css": "./dist/webority-theme.css",
+    "./css/flags": "./dist/webority-flags.css",
+    "./purge-safelist.json": "./dist/purge-safelist.json",
     "./package.json": "./package.json"
   },
   "sass": "index.scss",
@@ -39,6 +41,6 @@
     "sass-embedded": "^1.97.0"
   },
   "scripts": {
-    "build": "sass index.scss dist/webority-theme.css --load-path=node_modules --style=compressed --no-source-map --quiet-deps --silence-deprecation=if-function && node ../../scripts/sync-rcl-assets.mjs theme"
+    "build": "sass index.scss dist/webority-theme.css --load-path=node_modules --style=compressed --no-source-map --quiet-deps --silence-deprecation=if-function && sass scss/_flags.scss dist/webority-flags.css --style=compressed --no-source-map --quiet && node ../../scripts/gen-purge-safelist.mjs && node ../../scripts/sync-rcl-assets.mjs theme"
   }
 }

package/scss/_components.scss

@@ -245,32 +245,32 @@
 // sizes step font-size, horizontal padding and radius together (vertical size
 // comes from --wui-control-height, so a button lines up with an input). Weight
 // is 600 on every rung — buttons read as a deliberate action, not body text.
-// Medium (default): 15px / 600, 24px side padding, 18px squircle radius, 45px tall.
+// Medium (default): 14px / 600, 24px side padding, 18px squircle radius, 45px tall.
 .btn {
     --bs-btn-border-radius: 18px;
-    --bs-btn-font-size: 0.9375rem;
+    --bs-btn-font-size: 0.875rem;
     --bs-btn-font-weight: 600;
     --bs-btn-padding-x: 1.5rem;
     // Progressive enhancement only (Chrome/Safari recent). Unsupported engines
     // keep a plain border-radius arc — not a cross-browser design contract.
     corner-shape: squircle;
 }
-// Small: 14px, 18px side padding, 14px squircle radius (proportional to md), 35px tall.
+// Small: 12px, 18px side padding, 14px squircle radius (proportional to md), 35px tall.
 .btn-sm:not(.btn-icon),
 .btn-group-sm > .btn:not(.btn-icon) {
     --bs-btn-border-radius: 14px;
-    --bs-btn-font-size: 0.875rem;
+    --bs-btn-font-size: 0.75rem;
     --bs-btn-padding-x: 1.125rem;
     display: inline-flex;
     align-items: center;
     justify-content: center;
     min-height: 35px;
 }
-// Large: 17px, 32px side padding, 22px squircle radius (proportional to md), 55px tall — a spacious CTA.
+// Large: 16px, 32px side padding, 22px squircle radius (proportional to md), 55px tall — a spacious CTA.
 .btn-lg:not(.btn-icon),
 .btn-group-lg > .btn:not(.btn-icon) {
     --bs-btn-border-radius: 22px;
-    --bs-btn-font-size: 1.0625rem;
+    --bs-btn-font-size: 1rem;
     --bs-btn-padding-x: 2rem;
     display: inline-flex;
     align-items: center;

package/scss/_tokens.scss

@@ -43,6 +43,10 @@
     --wui-field-bg: #F9FBFC;
     --wui-border-light: #EBEDF3;
     --wui-border-soft: #F4F6F8;
+    // The unfilled part of a progress bar / meter. Darker than every surface it can sit on
+    // (card, page, muted fill) so the empty track reads as a track, yet light enough that the
+    // mid-yellow warning fill still separates from it.
+    --wui-progress-track: #E1E5EE;
 
     // Gradients (hero, CTA)
     --wui-hero-gradient:
@@ -217,6 +221,8 @@
     --wui-dark-bg-surface: #181b23;
     --wui-dark-border: #2a2f3a;
     --wui-dark-border-strong:#3a414f;
+    // 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;
     --wui-dark-text-muted: #b4b9c6;
     --wui-dark-text-subtle: #8a90a0;

package/scss/_wui-aliases.scss

@@ -18,9 +18,18 @@
   --color-border: var(--wui-border-light);
   --color-border-light: var(--wui-border-soft);
   --color-border-strong: var(--wui-text-5);
+  --color-progress-track: var(--wui-progress-track);
+  // Label text inside a progress bar fill.
+  --color-progress-label: var(--wui-bg-light);
 
   // Text ramp
   --color-text: var(--wui-text-heading);
+  // Body copy on a tinted surface (alert bodies): a step softer than the heading ink.
+  --color-text-body: var(--wui-text-1);
+  // 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);
   --color-text-muted: var(--wui-text-2);
   --color-text-subtle: var(--wui-text-3);
 
@@ -54,6 +63,7 @@
   --color-info-soft: var(--color-info-10);
   // Use this — never --color-info — when the colour IS the text.
   --color-info-text: var(--wui-info-text);
+  --color-info-text-on-soft: var(--wui-info-text);
 
   --color-success-active: var(--wui-success-active);
   --color-success: var(--wui-success);
@@ -66,6 +76,7 @@
   --color-success-soft: var(--color-success-10);
   // Use this — never --color-success — when the colour IS the text.
   --color-success-text: var(--wui-success-text);
+  --color-success-text-on-soft: var(--wui-success-text);
 
   --color-warning-active: var(--wui-warning-active);
   --color-warning: var(--wui-warning);
@@ -79,6 +90,7 @@
   --color-warning-soft: var(--color-warning-10);
   // Use this — never --color-warning — when the colour IS the text.
   --color-warning-text: var(--wui-warning-text);
+  --color-warning-text-on-soft: var(--wui-warning-text);
 
   --color-danger-active: var(--wui-danger-active);
   --color-danger: var(--wui-danger);
@@ -91,6 +103,7 @@
   --color-danger-soft: var(--color-danger-10);
   // Use this — never --color-danger — when the colour IS the text.
   --color-danger-text: var(--wui-danger-text);
+  --color-danger-text-on-soft: var(--wui-danger-text);
 
   // Accent → warning ramp
   --color-accent: var(--color-warning);
@@ -137,10 +150,19 @@
   --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-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;
 
   --color-text: var(--wui-dark-text);
   --color-text-muted: var(--wui-dark-text-muted);
   --color-text-subtle: var(--wui-dark-text-subtle);
+  --color-text-body: var(--wui-dark-text);
+  // Bootstrap's .btn-close glyph is ink-dark; on a dark surface it needs the white filter.
+  --color-close-filter: invert(1) grayscale(100%) brightness(200%);
+  // The light pastel focus border glows against a dark field; dark mode uses the dark theme's
+  // own primary (the button fill), which still clears 3:1 against every dark surface.
+  --color-focus-border: var(--wui-dark-primary);
 
   // Re-bridge the Bootstrap colour vars onto the (now dark) app tokens so the
   // named-var text/body/border utilities — .text-body-secondary, .text-muted,
@@ -183,6 +205,14 @@
   --color-warning-text: var(--wui-warning);
   --color-info-text: var(--wui-info);
 
+  // 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);
+
   // 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);
@@ -194,6 +224,12 @@
   --color-warning-soft: color-mix(in srgb, var(--wui-warning) 18%, transparent);
   --color-danger-soft: color-mix(in srgb, var(--wui-danger) 18%, transparent);
   --color-info-soft: color-mix(in srgb, var(--wui-info) 18%, transparent);
+  // The -50 border tone: the light hex would glow on a dark page, so it becomes a translucent
+  // mix of the vivid tone that reads as a border on the dark tint.
+  --color-success-50: color-mix(in srgb, var(--wui-success) 45%, transparent);
+  --color-warning-50: color-mix(in srgb, var(--wui-warning) 45%, transparent);
+  --color-danger-50: color-mix(in srgb, var(--wui-danger) 45%, transparent);
+  --color-info-50: color-mix(in srgb, var(--wui-info) 45%, transparent);
   --color-accent-soft: var(--color-warning-soft);
 
   --color-scrim: color-mix(in srgb, black 45%, transparent);

package/scss/_wui-components.scss

@@ -43,20 +43,10 @@
 // set, so it has to win on equal specificity.
 @import "wui/workspace";
 
-// Flags belong here because <wui-phone> cannot render without them.
-//
-// The 245 `.wui-flag-*` rules live in _flags.scss, and this entry did not pull it in — so a
-// product following the documented chain (variables -> bootstrap -> tokens -> components ->
-// wui-components) got AppPhoneNumberInput with an empty grey box where every flag should be,
-// and nothing failing anywhere to point at the cause. The component shipped; its styling did
-// not. That is the same escape as th.sortable and .u-name, and the fix is the same principle:
-// a component and the CSS it requires travel together.
-
-// It is not free — roughly 183KB raw, 45KB gzipped, mostly inlined SVG. A product that never
-// renders a phone field can skip it by importing the `wui/*` partials above individually
-// instead of this aggregate; that is the deliberate opt-out, and it is a choice rather than
-// an accident.
-@import "flags";
+// Country flags are NOT part of this aggregate. The 245 `.wui-flag-*` rules are about 187KB raw
+// (38KB Brotli) of inlined SVG, and most sites never render a phone field or country picker.
+// A site that does imports `@webority/theme/scss/flags` once, after this file; without it
+// <wui-phone> and <wui-country-select> show an empty grey box where the flag should be.
 @import "wui/shell";
 @import "wui/dock";
 @import "wui/consent-banner";

package/scss/wui/_choice.scss

@@ -58,18 +58,14 @@
     background: var(--color-surface);
     color: var(--color-primary);
 }
-// Icon illustrations are coloured PNGs: greyscale them until the card is
-// selected, then show the full-colour (blue) art.
-.struct-card-ic img {
-    filter: grayscale(1);
-    opacity: 0.6;
-    transition:
-        filter 0.12s,
-        opacity 0.12s;
-}
-.struct-card.checked .struct-card-ic img {
-    filter: none;
-    opacity: 1;
+// An image in the round icon disc (React iconNode={<img …/>}) keeps its own colours whether or not
+// the card is selected, fills the whole disc and is cropped to its circle, whatever the image's own
+// size or aspect. The tile variant drops the disc and sizes its illustration itself, so it is left out.
+.struct-card:not(.struct-card-tile) .struct-card-ic img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    border-radius: inherit;
 }
 .struct-card-body {
     display: flex;
@@ -113,6 +109,77 @@
 .struct-card-check svg path {
     stroke-width: 2.25;
 }
+// No tick (hideCheck / hide-check): the plain card no longer needs the top/bottom room the
+// corner tick sat in, so it tightens. The tile and image cards keep their own padding.
+.wui-struct-card-no-check:not(.struct-card-tile):not(.struct-card-img-card) {
+    padding-top: 14px;
+    padding-bottom: 14px;
+}
+
+// Sizes (size="sm" | "lg"; md is the base card above). Padding, gap, icon disc, type and the tick
+// offset step together so a card reads as one unit at every size. The tile variant owns its layout
+// and type (its later rules win), and the image card steps only its body padding and type.
+.wui-struct-card-sm {
+    gap: 9px;
+}
+.wui-struct-card-sm:not(.struct-card-tile):not(.struct-card-img-card) {
+    padding: 14px;
+}
+.wui-struct-card-sm.wui-struct-card-no-check:not(.struct-card-tile):not(.struct-card-img-card) {
+    padding-top: 10px;
+    padding-bottom: 10px;
+}
+.wui-struct-card-sm .struct-card-ic {
+    width: 36px;
+    height: 36px;
+}
+.wui-struct-card-sm .struct-card-title {
+    font-size: 14px;
+}
+.wui-struct-card-sm .struct-card-desc {
+    font-size: 13px;
+}
+.wui-struct-card-sm .struct-card-check {
+    top: 7px;
+    right: 7px;
+}
+.wui-struct-card-sm.struct-card-img-card .struct-card-body {
+    padding: 9px 11px;
+}
+.wui-struct-card-lg {
+    gap: 14px;
+}
+.wui-struct-card-lg:not(.struct-card-tile):not(.struct-card-img-card) {
+    padding: 26px;
+}
+.wui-struct-card-lg.wui-struct-card-no-check:not(.struct-card-tile):not(.struct-card-img-card) {
+    padding-top: 18px;
+    padding-bottom: 18px;
+}
+.wui-struct-card-lg .struct-card-ic {
+    width: 56px;
+    height: 56px;
+}
+.wui-struct-card-lg .struct-card-title {
+    font-size: 18px;
+}
+.wui-struct-card-lg .struct-card-desc {
+    font-size: 15px;
+}
+.wui-struct-card-lg .struct-card-check {
+    top: 13px;
+    right: 13px;
+}
+.wui-struct-card-lg.struct-card-img-card .struct-card-body {
+    padding: 15px 18px;
+}
+
+// Stacked layout (layout="stacked"): the icon disc sits on its own line and the title and
+// description start on the line below, left-aligned. The gap between them follows the size step.
+.wui-struct-card-stacked {
+    flex-direction: column;
+    align-items: flex-start;
+}
 
 // Tile variant: big centered illustration + label. Opt in with
 // className="struct-card-tile".
@@ -131,13 +198,9 @@
     border-radius: 0;
     background: transparent;
 }
-// Full-colour at all times (override the greyscale-until-selected treatment).
-.struct-card-tile .struct-card-ic img,
-.struct-card-tile.checked .struct-card-ic img {
+.struct-card-tile .struct-card-ic img {
     width: 100px;
     height: 100px;
-    filter: none;
-    opacity: 1;
 }
 .struct-card-tile .struct-card-body {
     align-items: center;
@@ -185,10 +248,10 @@
 }
 .search-select-control.open {
     // White fill + the active/focus border, matching a focused text input (which lifts off the
-    // muted resting fill onto white with a --wui-primary-30 border). Keeps the control seamless
+    // muted resting fill onto white with a --color-focus-border border). Keeps the control seamless
     // with the open menu and the floated label's white mask.
     background: var(--color-surface);
-    border-color: var(--wui-primary-30);
+    border-color: var(--color-focus-border);
 }
 .search-select-caret {
     flex-shrink: 0;
@@ -367,7 +430,7 @@
 }
 .search-select-search:focus-within {
     background: var(--color-surface);
-    border-color: var(--wui-primary-30);
+    border-color: var(--color-focus-border);
 }
 .search-select-search:focus-within svg {
     color: var(--color-primary);
@@ -506,12 +569,21 @@
     // While the calendar is open the trigger reads as a focused field — clean white surface, not
     // the muted resting fill. Opening moves focus INTO the popup, so :focus drops off the trigger;
     // this .open rule keeps it white (matching .search-select-control.open) instead of snapping
-    // back to grey the moment the dropdown appears. It stays white on close too (_close refocuses
-    // the trigger → :focus), greying only on an outside click that blurs it.
+    // back to grey the moment the dropdown appears.
     background-color: var(--color-surface);
-    border-color: color-mix(in srgb, var(--color-primary) 30%, transparent);
+    border-color: var(--color-focus-border);
     box-shadow: none;
 }
+// Closing hands focus back to the trigger (so the keyboard user lands where they started), which
+// would leave a mouse user with an "active" field after the calendar is gone. Once the popup is
+// shut, the trigger keeps the focus look only for keyboard focus (:focus-visible); a pick or
+// close by pointer returns it to rest. An errored field (aria-invalid on the host) keeps its red.
+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),
+wui-timepicker:not([aria-invalid="true"]) .timepicker:not(.open) .timepicker-trigger:focus:not(:focus-visible) {
+    background-color: var(--color-field-bg);
+    border-color: var(--color-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
 // sits above the modal layer.
@@ -677,6 +749,13 @@ button.datepicker-month:hover {
     color: var(--color-border-strong);
     cursor: not-allowed;
 }
+// Today outside the allowed range keeps its ring, so the user can still find it, but in the
+// disabled ink: a primary ring would read as a date they can pick.
+.datepicker-day.is-today:disabled,
+.datepicker-cell.is-today:disabled {
+    box-shadow: inset 0 0 0 1.5px var(--color-border-strong);
+    color: var(--color-border-strong);
+}
 .datepicker-foot {
     display: flex;
     align-items: center;
@@ -835,7 +914,7 @@ button.datepicker-month:hover {
 .daterange.open .daterange-trigger {
     // Stay white while the two-month popover is open — see the note on .datepicker.open above.
     background-color: var(--color-surface);
-    border-color: color-mix(in srgb, var(--color-primary) 30%, transparent);
+    border-color: var(--color-focus-border);
     box-shadow: none;
 }
 .daterange-pop {
@@ -951,7 +1030,7 @@ button.datepicker-month:hover {
 // Match AppInput's focus: clean surface fill + a soft primary border.
 .app-phone-number-input .phone-input-wrap:focus-within {
     background: var(--color-surface);
-    border-color: var(--wui-primary-30);
+    border-color: var(--color-focus-border);
 }
 .app-phone-number-input .phone-input-wrap:has(> .input:disabled) {
     background: var(--color-bg-muted);
@@ -1176,7 +1255,7 @@ wui-timepicker[aria-invalid="true"] .timepicker.open .timepicker-trigger {
 // AppInput's exact focus: clean surface fill + its soft primary border token.
 .dropdown-search-input:focus {
     background: var(--color-surface);
-    border-color: var(--wui-primary-30);
+    border-color: var(--color-focus-border);
 }
 // AppInput's placeholder colour, not the browser default grey.
 .dropdown-search-input::placeholder {
@@ -1319,7 +1398,7 @@ wui-timepicker[aria-invalid="true"] .timepicker.open .timepicker-trigger {
 .timepicker.open .timepicker-trigger {
     // Stay white while the time list is open — see the note on .datepicker.open above.
     background-color: var(--color-surface);
-    border-color: color-mix(in srgb, var(--color-primary) 30%, transparent);
+    border-color: var(--color-focus-border);
     box-shadow: none;
 }
 .timepicker-pop {

package/scss/wui/_controls.scss

@@ -348,7 +348,7 @@ textarea.form-control.autosize {
     background-color: var(--color-surface);
     color: var(--color-text);
     // Soft brand border is the focus cue (per the reference) — no ring/shadow.
-    border-color: var(--wui-primary-30);
+    border-color: var(--color-focus-border);
     box-shadow: none;
 }
 .form-control::placeholder,
@@ -625,6 +625,14 @@ $wui-field-error-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/
     color: var(--color-text);
     -webkit-text-fill-color: var(--color-text);
 }
+// ...but -webkit-text-fill-color is inherited by ::placeholder and beats its `color`, so the rule
+// above painted the placeholder as bright as a typed value. Hand the placeholder its own subtle
+// ink back (the same --color-text-subtle every other placeholder uses).
+:root[data-theme="dark"] .form-control.error::placeholder,
+:root[data-theme="dark"] .input.error::placeholder {
+    color: var(--color-text-subtle);
+    -webkit-text-fill-color: var(--color-text-subtle);
+}
 
 // Field-relative wrap for trailing affixes (error icon, password toggle).
 .input-wrap {
@@ -793,9 +801,10 @@ $wui-field-error-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/
 }
 .input-affixed:focus-within {
     background: var(--color-surface);
-    border-color: var(--wui-primary-30);
+    border-color: var(--color-focus-border);
 }
-.input-affixed:has(.input.error) {
+.input-affixed:has(.input.error),
+.input-affixed:has(.input[aria-invalid="true"]) {
     background: var(--color-surface);
     border-color: color-mix(in srgb, var(--color-danger) 30%, transparent);
 }
@@ -806,9 +815,18 @@ $wui-field-error-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/
     border-radius: 0;
     background: transparent;
 }
+// A select in the affixed shell (AppSelect prefix/suffix): the custom element is the flex
+// item, and its inner .input control already loses its own border through the rule above.
+.input-affixed > wui-select {
+    flex: 1;
+    min-width: 0;
+}
 .input-affixed .affix {
     display: flex;
     align-items: center;
+    // A one-character affix (₹, $, #) still reads as a box, centred in it, not a sliver.
+    justify-content: center;
+    min-width: 44px;
     padding: 0 12px;
     // Transparent so the affix inherits the wrapper fill — the addon and the input read as
     // one continuous surface (only the separator border divides them).
@@ -993,6 +1011,7 @@ $wui-field-error-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/
 // into a plain div, a grid cell, a table cell — it would still collapse. Being a flex
 // item blockifies it; nothing else does.
 wui-select,
+wui-country-select,
 wui-autocomplete,
 wui-multiselect,
 wui-taginput,
@@ -1010,6 +1029,7 @@ wui-select[compact] {
     width: auto;
 }
 .field > wui-select,
+.field > wui-country-select,
 .field > wui-autocomplete,
 .field > wui-multiselect,
 .field > wui-taginput,
@@ -1069,7 +1089,7 @@ wui-select[compact] {
 }
 .input-with-unit:focus-within {
     background: var(--color-surface);
-    border-color: var(--wui-primary-30);
+    border-color: var(--color-focus-border);
 }
 .input-with-unit:has(.num-input.error) {
     background: var(--color-surface);
@@ -1142,7 +1162,7 @@ wui-select[compact] {
 }
 .num-wrap:focus-within {
     background: var(--color-surface);
-    border-color: var(--wui-primary-30);
+    border-color: var(--color-focus-border);
 }
 .num-wrap:has(.num-input.error),
 .num-wrap:has(.num-input.is-invalid),
@@ -1512,7 +1532,7 @@ wui-otp {
 // surface fill + soft brand border, no ring.
 .otp-slot.active {
     background: var(--color-surface);
-    border-color: var(--wui-primary-30);
+    border-color: var(--color-focus-border);
     box-shadow: none;
 }
 .otp-field:disabled ~ .otp-slots .otp-slot {

package/scss/wui/_display.scss

@@ -407,15 +407,20 @@ a.info-row:hover .info-value {
 // ============================================================================
 // Segmented control — 2–4 mutually-exclusive options shown side by side.
 // The theme toggle (light/dark/system) is the canonical use.
+//
+// The selected segment is an OUTLINED pill: a primary ring over a faint primary tint, with the
+// label in primary. The tint is 8% so the label clears AA on it in both themes (light 5.6:1,
+// dark 4.5:1); a stronger tint drops the dark label under 4.5:1.
 // ============================================================================
 .segmented {
+    --segmented-selected-bg: color-mix(in srgb, var(--color-primary) 8%, var(--color-surface));
     position: relative;
     display: inline-flex;
     gap: 2px;
     padding: 3px;
     border: 1px solid var(--color-border);
     border-radius: 999px;
-    background: var(--color-bg-muted);
+    background: var(--color-surface);
 }
 .segmented-option {
     position: relative;
@@ -432,7 +437,7 @@ a.info-row:hover .info-value {
     font-weight: 600;
     line-height: 1;
     white-space: nowrap;
-    color: var(--color-text-muted);
+    color: var(--color-text);
     cursor: pointer;
     transition:
         background 0.14s ease,
@@ -457,7 +462,7 @@ a.info-row:hover .info-value {
     white-space: nowrap;
 }
 .segmented-option:hover {
-    color: var(--color-text);
+    color: var(--color-primary);
 }
 // A per-option sub-label under the main text — optional, so a segment without one keeps the
 // plain single-line layout above untouched.
@@ -475,18 +480,18 @@ a.info-row:hover .info-value {
 .segmented-option-note {
     font-size: 10px;
     font-weight: 400;
-    // Inherits the option's current text colour (muted, hover, or white-on-checked) rather
+    // Inherits the option's current text colour (plain, hover, or primary-on-checked) rather
     // than a fixed token, so it always matches without a separate state per variant. No opacity
     // muting — that dropped the sub-label below AA on an unchecked option; the 10px size already
     // distinguishes it from the label.
     color: currentColor;
 }
+// Without JS this per-option pill stands in for the sliding thumb below, so it carries the
+// same ring and tint.
 .segmented-option:has(.segmented-input:checked) {
-    background: var(--color-primary);
-    // Token, not fixed white: the pill is always the brand fill, so its label must
-    // contrast with THAT fill, not the page — a light-primary brand overrides
-    // --wui-primary-text to a dark value and this follows automatically.
-    color: var(--color-primary-text);
+    background: var(--segmented-selected-bg);
+    box-shadow: inset 0 0 0 2px var(--color-primary);
+    color: var(--color-primary);
 }
 // The ring is drawn on the label because the input it belongs to has no box.
 .segmented-option:has(.segmented-input:focus-visible) {
@@ -504,21 +509,25 @@ a.info-row:hover .info-value {
     width: 0;
     z-index: 0;
     border-radius: 999px;
-    background: var(--color-primary);
-    box-shadow: 0 2px 8px color-mix(in srgb, var(--color-primary) 32%, transparent);
+    background: var(--segmented-selected-bg);
+    // An inset ring, not a border: a border would add to the width JS measures and sets.
+    box-shadow: inset 0 0 0 2px var(--color-primary);
     opacity: 0;
     pointer-events: none;
 }
 .segmented.is-animated .segmented-thumb {
     opacity: 1;
-    // A spring easing that overshoots a touch and settles — livelier than a flat slide.
+    // A fast ease-out that never overshoots. A spring easing slid the thumb past its target, so
+    // at the first or last segment the ring crossed the track's edge mid-slide. Clipping the
+    // track instead is not an option: it would also clip the options' focus outline.
     transition:
-        transform 0.36s cubic-bezier(0.34, 1.42, 0.5, 1),
-        width 0.36s cubic-bezier(0.34, 1.42, 0.5, 1);
+        transform 0.32s cubic-bezier(0.22, 1, 0.36, 1),
+        width 0.32s cubic-bezier(0.22, 1, 0.36, 1);
 }
-// While the thumb draws the fill, the checked option drops its own background (keeps white text).
+// While the thumb draws the pill, the checked option drops its own (keeps the primary label).
 .segmented.is-animated .segmented-option:has(.segmented-input:checked) {
     background: transparent;
+    box-shadow: none;
 }
 // Icon pop — the selected segment's glyph springs up a touch as it becomes active.
 .segmented-option:has(.segmented-input:checked) .wui-icon {

package/scss/wui/_flow.scss

@@ -260,11 +260,18 @@ button.step:focus-visible .step-circle {
     overflow: hidden;
     text-overflow: ellipsis;
 }
+// Where connectors are drawn, a step takes only its content's width (and still shrinks to
+// ellipsize its text) and the connector takes the rest, so the rail joins each step to the
+// next. A journey bar without connectors keeps its evenly spread steps.
+.stepper-journey:has(> .step-line) > .step {
+    flex: 0 1 auto;
+}
 .stepper-journey .step-line {
-    flex: none;
-    width: 32px;
+    flex: 1 1 32px;
+    min-width: 24px;
     height: 2px;
-    margin: 0 6px;
+    margin: 0 16px;
+    border-radius: 999px;
     background: var(--color-border-strong);
 }
 .stepper-journey .step-line.done {