@webority/theme 0.8.6 → 0.8.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webority/theme",
-  "version": "0.8.6",
+  "version": "0.8.7",
   "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": {

package/scss/_components.scss

@@ -151,8 +151,8 @@
 // its own colour. (Primary would otherwise fall back to a washed-out indigo, secondary to a
 // faint brand tint.) .btn-danger keeps its own faded-red disabled (defined above), since the
 // reference doesn't cover it and a greyed destructive button loses its warning read.
-.btn:disabled:not(.btn-danger),
-.btn.disabled:not(.btn-danger) {
+.btn:disabled:not(.btn-danger):not(.is-loading),
+.btn.disabled:not(.btn-danger):not(.is-loading) {
     background-color: var(--color-bg-muted);
     border-color: var(--color-border);
     color: var(--color-text-subtle);
@@ -160,6 +160,38 @@
     cursor: not-allowed;
 }
 
+// Loading is BUSY, not disabled-by-choice: the button keeps its own identity as a LIGHT tint
+// of its variant, never the neutral disabled grey above. It stays non-interactive (still
+// `disabled` for forms/a11y) but reads as "working". Solid variants (primary/danger/warning)
+// tint from their fill and take the fill colour as the label + spinner (spinner is
+// currentColor). Higher specificity than the grey rule, and placed after it, so it wins.
+.btn.is-loading:disabled,
+.btn.is-loading.disabled {
+    background-color: color-mix(in srgb, var(--bs-btn-bg) 15%, var(--color-surface));
+    border-color: color-mix(in srgb, var(--bs-btn-bg) 15%, var(--color-surface));
+    color: var(--bs-btn-bg);
+    opacity: 1;
+    cursor: progress;
+}
+// Transparent-fill variants (secondary/ghost/subtle/outline-*) have no fill to tint from —
+// key the wash and the label off the accent (text) colour so the hue still shows.
+.btn-secondary.is-loading:disabled,
+.btn-secondary.is-loading.disabled,
+.btn-ghost.is-loading:disabled,
+.btn-ghost.is-loading.disabled,
+.btn-subtle.is-loading:disabled,
+.btn-subtle.is-loading.disabled,
+.btn-outline-primary.is-loading:disabled,
+.btn-outline-primary.is-loading.disabled,
+.btn-outline-danger.is-loading:disabled,
+.btn-outline-danger.is-loading.disabled,
+.btn-outline-light.is-loading:disabled,
+.btn-outline-light.is-loading.disabled {
+    background-color: color-mix(in srgb, var(--bs-btn-color) 12%, var(--color-surface));
+    border-color: color-mix(in srgb, var(--bs-btn-color) 12%, var(--color-surface));
+    color: var(--bs-btn-color);
+}
+
 // ---- Component radii from tokens ------------------------------------
 // .btn/.card/.input capture Bootstrap's compiled $*-border-radius (the library
 // ladder) before a product loads, so a product's --wui-radius* override never

package/scss/_tokens.scss

@@ -37,6 +37,10 @@
     --wui-bg-light: #FFFFFF;
     --wui-bg-elevated: #F9FBFC;
     --wui-bg-muted: #F5F6FA;
+    // Resting fill for every input-like control (text field, select, textarea, and the
+    // 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;
     --wui-border-light: #EBEDF3;
     --wui-border-soft: #F4F6F8;
 
@@ -175,7 +179,13 @@
     --wui-warning-10: #FFF8E6;
     --wui-warning-5: #FEFBF2;
 
-    --wui-danger-text: #b61d42;
+    // Error TEXT red. Shares the brand hue (350°) with --wui-danger-active (#E82646) but is
+    // darkened until it clears the 4.5:1 AA floor on every surface it lands on — the tightest
+    // is the .alert-danger tint (--wui-danger-10 #FFEAEF), where this is 4.77:1 and the brand
+    // #E82646 is only 3.81:1. Do NOT swap this back to --wui-danger-active: that has been tried
+    // three times and each time the a11y gate rejected the release. The brand red stays in use
+    // for non-text danger (fills, borders, icons), which carry a 3:1 floor instead.
+    --wui-danger-text: #CF1735;
     // Deepened danger fill for surfaces that carry WHITE text (btn-danger). The brighter
     // --wui-danger/-active below are too light for white (3.86:1 / 4.38:1, under AA); these
     // clear it — #C81340 → 5.80:1, hover → higher. Keep white-on-danger off the other tokens.
@@ -195,13 +205,12 @@
     --wui-radius-lg: 14px;
     --wui-radius-xl: 16px;
 
-    // Field (input/select/datepicker/…) radius — a rounder squircle than the
-    // generic radius ladder, matched to the button radius language. md is 18px;
-    // sm/lg step with the control height (36/44/52px → ~0.41 ratio) so every
-    // field size keeps a proportional corner.
-    --wui-field-radius: 18px;
-    --wui-field-radius-sm: 15px;
-    --wui-field-radius-lg: 21px;
+    // Field (input/select/datepicker/…) radius — a flat 8px corner across every
+    // size, for a crisp plain-rounded field (no squircle). Change here to restyle
+    // every field's corner at once.
+    --wui-field-radius: 8px;
+    --wui-field-radius-sm: 8px;
+    --wui-field-radius-lg: 8px;
 
     // ---- Portal dark palette ----------------------------------------
     // Marketing stays light. Portal flips [data-theme="dark"] and maps

package/scss/_wui-aliases.scss

@@ -11,6 +11,7 @@
   --color-bg: var(--wui-bg-page);
   --color-bg-subtle: var(--wui-bg-elevated);
   --color-bg-muted: var(--wui-bg-muted);
+  --color-field-bg: var(--wui-field-bg);
   --color-surface: var(--wui-bg-light);
 
   // Borders
@@ -128,6 +129,9 @@
   --color-bg: var(--wui-dark-bg-page);
   --color-bg-subtle: var(--wui-dark-bg-elevated);
   --color-bg-muted: var(--wui-dark-bg-muted);
+  // Dark keeps the field on the muted fill (a light #F9FBFC would blow out the dark UI); the
+  // light-mode field-bg override lives on --wui-field-bg.
+  --color-field-bg: var(--wui-dark-bg-muted);
   --color-surface: var(--wui-dark-bg-surface);
 
   --color-border: var(--wui-dark-border);

package/scss/wui/_choice.scss

@@ -345,7 +345,6 @@
     height: 40px;
     border: 1px solid var(--color-border);
     border-radius: var(--radius);
-    corner-shape: squircle;
     background: var(--color-surface);
     color: var(--color-text-subtle);
 }
@@ -353,7 +352,7 @@
     position: relative;
 }
 .search-select-search:focus-within {
-    background: var(--color-bg-muted);
+    background: var(--color-field-bg);
 }
 .search-select-search:focus-within svg {
     color: var(--color-primary);
@@ -485,7 +484,7 @@
     --wui-datepicker-width: 100%;
 }
 .datepicker.open .datepicker-trigger {
-    background-color: var(--color-bg-muted);
+    background-color: var(--color-field-bg);
     border-color: color-mix(in srgb, var(--color-primary) 30%, transparent);
     box-shadow: none;
 }
@@ -806,7 +805,7 @@ button.datepicker-month:hover {
     color: var(--color-text-subtle);
 }
 .daterange.open .daterange-trigger {
-    background-color: var(--color-bg-muted);
+    background-color: var(--color-field-bg);
     border-color: color-mix(in srgb, var(--color-primary) 30%, transparent);
     box-shadow: none;
 }
@@ -895,10 +894,10 @@ button.datepicker-month:hover {
     width: 100%;
     height: var(--wui-control-height);
     border: 1px solid var(--color-border);
-    border-radius: var(--radius);
-    corner-shape: squircle;
+    // 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.
-    background: var(--color-bg-muted);
+    background: var(--color-field-bg);
     // Clip the inner control to the shell's rounded shape — a full-height child was painting
     // over the squircle border at the bottom, which read as a cut-off bottom edge. The dial
     // dropdown is position:fixed, so it is unaffected by this.
@@ -908,7 +907,7 @@ button.datepicker-month:hover {
         background-color 0.12s;
 }
 .app-phone-number-input .phone-input-wrap:hover:not(:focus-within) {
-    background: var(--color-bg-muted);
+    background: var(--color-field-bg);
     border-color: var(--color-border-strong);
 }
 // Match AppInput's focus: clean surface fill + a soft primary border.
@@ -922,7 +921,8 @@ button.datepicker-month:hover {
 }
 .app-phone-number-input .phone-input-wrap:has(.input.error),
 .app-phone-number-input .phone-input-wrap:has(.input.is-invalid) {
-    border-color: color-mix(in srgb, var(--color-danger) 45%, var(--color-surface));
+    // Match AppInput's soft invalid border exactly (danger at 30%, mirroring primary-30 focus).
+    border-color: color-mix(in srgb, var(--color-danger) 30%, transparent);
 }
 // The inner control drops its own chrome — the shell carries it.
 .app-phone-number-input .phone-input-wrap > .input,
@@ -1017,6 +1017,38 @@ button.datepicker-month:hover {
     padding-left: 10px;
 }
 
+// ── Size variants ── mirror AppInput's sm/md/lg ladder (height + radius + font).
+// The size class rides on the .app-phone-number-input container (the App* wrapper
+// owns it, and it survives <wui-phone>'s innerHTML re-renders); it scales the
+// shell height/radius, the tel font, the dial-code text, and the adornment pad so
+// the whole field steps together — md is the base block above.
+.app-phone-number-input.phone-sm .phone-input-wrap {
+    height: var(--wui-control-height-sm);
+    border-radius: var(--wui-field-radius-sm);
+}
+.app-phone-number-input.phone-sm .input {
+    font-size: 13px;
+}
+.app-phone-number-input.phone-sm .phone-dial {
+    font-size: 12px;
+}
+.app-phone-number-input.phone-sm .phone-country-adornment {
+    padding-left: 10px;
+}
+.app-phone-number-input.phone-lg .phone-input-wrap {
+    height: var(--wui-control-height-lg);
+    border-radius: var(--wui-field-radius-lg);
+}
+.app-phone-number-input.phone-lg .input {
+    font-size: 16px;
+}
+.app-phone-number-input.phone-lg .phone-dial {
+    font-size: 14px;
+}
+.app-phone-number-input.phone-lg .phone-country-adornment {
+    padding-left: 14px;
+}
+
 // Menu, search field and rows all share the .search-select language so the
 // country picker reads as the same component family as every other picker.
 // Fixed, with top/left set from the trigger rect by <wui-phone>, so an
@@ -1058,20 +1090,19 @@ button.datepicker-month:hover {
     padding: 0 12px 0 36px;
     border: 1px solid var(--color-border);
     border-radius: var(--radius);
-    corner-shape: squircle;
     font-size: 14px;
     color: var(--color-text);
     background: var(--color-surface);
     outline: none;
 }
 .dropdown-search-input:hover:not(:focus) {
-    background: var(--color-bg-muted);
+    background: var(--color-field-bg);
     border-color: var(--color-border-strong);
 }
 // Border is the focus cue everywhere else in the system — no glow ring here.
 // Soft primary, matching AppInput / the phone field shell rather than a full-strength border.
 .dropdown-search-input:focus {
-    background: var(--color-bg-muted);
+    background: var(--color-field-bg);
     border-color: color-mix(in srgb, var(--color-primary) 30%, transparent);
 }
 .country-list-scroll {
@@ -1209,7 +1240,7 @@ button.datepicker-month:hover {
     --wui-timepicker-width: 100%;
 }
 .timepicker.open .timepicker-trigger {
-    background-color: var(--color-bg-muted);
+    background-color: var(--color-field-bg);
     border-color: color-mix(in srgb, var(--color-primary) 30%, transparent);
     box-shadow: none;
 }

package/scss/wui/_controls.scss

@@ -256,9 +256,8 @@
     height: var(--wui-control-height);
     padding: 12px;
     border-radius: var(--wui-field-radius);
-    corner-shape: squircle;
     border: 1px solid var(--color-border);
-    background: var(--color-bg-muted);
+    background: var(--color-field-bg);
     font-size: 14px;
     line-height: 1.5;
     color: var(--color-text);
@@ -305,7 +304,7 @@ textarea.form-control.autosize {
 .input:hover:not(:focus):not(:disabled):not([readonly]):not([aria-invalid="true"]):not(.is-invalid):not(.error):not(.open),
 .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-bg-muted);
+    background-color: var(--color-field-bg);
     border-color: var(--color-border-strong);
 }
 .form-control:focus,
@@ -349,14 +348,41 @@ textarea.form-control.autosize {
 .input::-ms-clear {
     display: none;
 }
+// Autofill — kill the browser's yellow/blue autofill background so a filled field keeps its
+// own chrome (muted at rest, clean surface on focus), same as a hand-typed value. WebKit
+// won't let `background` win here, so paint over it with a full-cover inset box-shadow; the
+// 9999s background transition defers the UA's own repaint so there's no fill flash. Applies to
+// the plain field AND the phone's inner tel input (both carry `.input`).
+.form-control:-webkit-autofill,
+.form-control:-webkit-autofill:hover,
+.input:-webkit-autofill,
+.input:-webkit-autofill:hover,
+.textarea:-webkit-autofill,
+.textarea:-webkit-autofill:hover {
+    -webkit-box-shadow: 0 0 0 1000px var(--color-field-bg) inset;
+    box-shadow: 0 0 0 1000px var(--color-field-bg) inset;
+    -webkit-text-fill-color: var(--color-text);
+    caret-color: var(--color-text);
+    transition: background-color 9999s ease-out 0s;
+}
+// Focus lifts the autofilled field onto the clean surface, matching the typed-value focus state.
+.form-control:-webkit-autofill:focus,
+.input:-webkit-autofill:focus,
+.textarea:-webkit-autofill:focus {
+    -webkit-box-shadow: 0 0 0 1000px var(--color-surface) inset;
+    box-shadow: 0 0 0 1000px var(--color-surface) inset;
+    -webkit-text-fill-color: var(--color-text);
+    caret-color: var(--color-text);
+    transition: background-color 9999s ease-out 0s;
+}
 .form-control:disabled,
 .form-select:disabled,
 .input:disabled,
 .select:disabled,
 .textarea:disabled {
     // A touch deeper than the resting fill so a disabled field stays distinct now that
-    // the resting state is itself filled (per the reference's disabled field).
-    background: color-mix(in srgb, var(--color-bg-muted) 72%, var(--color-border));
+    // the resting state is itself filled (--color-border = #EBEDF3, per the reference).
+    background: var(--color-border);
     border-color: transparent;
     color: var(--color-text-subtle);
     cursor: not-allowed;
@@ -365,6 +391,14 @@ textarea.form-control.autosize {
 .field:has(.input:disabled) .label {
     color: var(--color-text-subtle);
 }
+// A disabled field's placeholder reads a touch darker than the resting subtle grey
+// (--color-text-muted = #4B5675) so it stays legible against the deeper disabled fill.
+.form-control:disabled::placeholder,
+.form-select:disabled::placeholder,
+.input:disabled::placeholder,
+.textarea:disabled::placeholder {
+    color: var(--color-text-muted);
+}
 
 // Read-only is NOT disabled — still submitted/selectable/copyable, so no
 // not-allowed cursor. Match `[readonly]`, never `:read-only` (that also hits
@@ -684,10 +718,9 @@ textarea.form-control.autosize {
     width: 100%;
     border: 1px solid var(--color-border);
     border-radius: var(--wui-field-radius);
-    corner-shape: squircle;
     // 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.
-    background: var(--color-bg-muted);
+    background: var(--color-field-bg);
     transition:
         border-color 0.12s ease,
         background-color 0.12s ease;
@@ -758,7 +791,7 @@ textarea.form-control.autosize {
     // text. It MUST match the field's own fill, or the mask reads as a separate patch. The
     // resting/filled fill is --color-bg-muted (a white notch on the grey fill was the tell); it
     // only lifts to --color-surface on focus/invalid, matched below.
-    background: var(--color-bg-muted);
+    background: var(--color-field-bg);
     pointer-events: none;
     transition:
         top 0.15s var(--wui-ease-ui),
@@ -840,7 +873,10 @@ textarea.form-control.autosize {
     color: var(--color-text-subtle);
 }
 .required {
-    // AA against the surface — see .field-error; --color-danger-active is 4.38:1.
+    // Same red as .field-error. The mark is aria-hidden so it could carry the brighter brand
+    // hue, but then the asterisk and the message it belongs to sat two lines apart in visibly
+    // different reds — which read as a bug and got "fixed" three times by repainting the
+    // message with the mark's sub-AA red. One token for both ends that.
     color: var(--color-danger-text);
     // The gap is CSS, not a significant space in the markup. RequiredMark used to render
     // `{' '}*` while AppDatePicker and every Razor helper rendered a bare `*`, so the same
@@ -954,10 +990,9 @@ wui-select[compact] {
     align-items: stretch;
     border: 1px solid var(--color-border);
     border-radius: var(--wui-field-radius);
-    corner-shape: squircle;
     // 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.
-    background: var(--color-bg-muted);
+    background: var(--color-field-bg);
     transition:
         border-color 0.12s,
         background-color 0.12s;
@@ -1008,17 +1043,17 @@ wui-select[compact] {
     display: flex;
     align-items: stretch;
     border: 1px solid var(--color-border);
-    border-radius: var(--radius-lg);
-    corner-shape: squircle;
+    // 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.
-    background: var(--color-bg-muted);
+    background: var(--color-field-bg);
     transition:
         border-color 0.12s,
         background-color 0.12s;
     overflow: hidden;
 }
 .num-wrap:hover:not(:focus-within) {
-    background: var(--color-bg-muted);
+    background: var(--color-field-bg);
     border-color: var(--color-border-strong);
 }
 .num-wrap:focus-within {
@@ -1098,12 +1133,18 @@ wui-select[compact] {
 // ── Size variants ── the inner input carries .input-sm / .input-lg (height +
 // font), the wrapper carries .num-wrap-sm / .num-wrap-lg to scale the button
 // cells to match. Default (md) uses the base 44px cell above.
+.num-wrap-sm {
+    border-radius: var(--wui-field-radius-sm);
+}
 .num-wrap-sm .num-btn {
     width: 36px;
 }
 .num-wrap-sm .num-input {
     font-size: 13px;
 }
+.num-wrap-lg {
+    border-radius: var(--wui-field-radius-lg);
+}
 .num-wrap-lg .num-btn {
     width: 52px;
 }
@@ -1113,7 +1154,7 @@ wui-select[compact] {
 
 // Affix (unit) in the num-wrap — a trailing pill after the input.
 .num-wrap .affix {
-    background: var(--color-bg-muted);
+    background: var(--color-field-bg);
     border: none;
     border-left: 1px solid var(--color-border);
     padding: 9px 14px;
@@ -1276,6 +1317,24 @@ wui-select[compact] {
     color: var(--color-primary);
 }
 
+// Size scale (`size`): padding, gap and font step together; md is the base above.
+.choice-chip-sm {
+    gap: 6px;
+    padding: 6px 11px;
+    font-size: 13px;
+}
+.choice-chip-sm .count {
+    font-size: 10px;
+}
+.choice-chip-lg {
+    gap: 10px;
+    padding: 11px 18px;
+    font-size: 15px;
+}
+.choice-chip-lg .count {
+    font-size: 12px;
+}
+
 // Form section heading — a branded accent bar rather than a full-width hairline,
 // so a long form reads as designed sections instead of raw rules.
 //
@@ -1352,9 +1411,11 @@ wui-otp {
     justify-content: center;
     width: 44px;
     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-radius: var(--radius);
-    background: var(--color-surface);
+    border-radius: var(--wui-field-radius);
+    background: var(--color-field-bg);
     font-size: 18px;
     font-weight: 600;
     font-variant-numeric: tabular-nums;
@@ -1363,20 +1424,32 @@ wui-otp {
         border-color 0.12s,
         box-shadow 0.12s;
 }
+// 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);
+}
 // The caret cannot be seen through a transparent input, so the ACTIVE box carries the
-// affordance instead — derived from selectionStart, since only one element is ever focused.
+// affordance instead — derived from selectionStart. Matches AppInput's focus: clean
+// surface fill + soft brand border, no ring.
 .otp-slot.active {
-    border-color: color-mix(in srgb, var(--color-primary) 45%, transparent);
-    box-shadow: 0 0 0 3px var(--color-primary-soft);
+    background: var(--color-surface);
+    border-color: var(--wui-primary-30);
+    box-shadow: none;
 }
 .otp-field:disabled ~ .otp-slots .otp-slot {
-    background: var(--color-bg-muted);
-    border-color: var(--color-border);
+    // Same disabled fill as AppInput: a touch deeper than the resting muted fill.
+    background: color-mix(in srgb, var(--color-bg-muted) 72%, var(--color-border));
+    border-color: transparent;
     color: var(--color-text-subtle);
 }
+// Invalid — soft danger border on a clean surface, mirroring AppInput's .error (danger
+// at 30%, no ring), not a solid alarm box.
 .field-error ~ .otp .otp-slot,
 .otp.error .otp-slot {
-    border-color: var(--color-danger);
+    background: var(--color-surface);
+    border-color: color-mix(in srgb, var(--color-danger) 30%, transparent);
+    box-shadow: none;
 }
 @media (max-width: 575.98px) {
     // Six 44px boxes plus gaps overflow a 360px screen; shrink the box, never the font.

package/scss/wui/_display.scss

@@ -64,8 +64,8 @@
 .kpi-value {
     margin-top: 6px;
     // The value ("main heading") size flows from one var, so a size tier (sm/md/lg,
-    // spotlight) or a custom `valueSize` (px) can drive it. Default (md) is 28px.
-    font-size: var(--wui-kpi-value-size, 28px);
+    // spotlight) or a custom `valueSize` (px) can drive it. Default (md) is 24px.
+    font-size: var(--wui-kpi-value-size, 24px);
     font-weight: 700;
     // Large numerals need negative tracking to stop reading as separate digits;
     // tabular figures stop a live-updating value from shifting width.
@@ -153,7 +153,7 @@
 // chrome; orthogonal to variant/inline/attention, so it composes with all of them.
 .kpi.kpi-lg {
     padding: 20px;
-    --wui-kpi-value-size: 40px;
+    --wui-kpi-value-size: 28px;
 }
 .kpi.kpi-lg .kpi-label {
     font-size: 14px;
@@ -737,7 +737,8 @@ a.info-row:hover .info-value {
 // ----------------------------------------------------------------------------
 .timeline--progress {
     // Halo widths scale with the dot: the coloured ring and the thin blank ring.
-    --wui-timeline-halo: calc(var(--wui-timeline-dot) / 4);
+    // The active/status halo is a quarter of the dot, trimmed 2px for a tighter glow.
+    --wui-timeline-halo: calc(var(--wui-timeline-dot) / 4 - 2px);
     --wui-timeline-halo-thin: calc(var(--wui-timeline-dot) / 12);
     // Room on the left so a status dot's soft halo ring isn't clipped.
     padding-left: calc(var(--wui-timeline-halo) + 1px);
@@ -766,17 +767,14 @@ a.info-row:hover .info-value {
 .timeline--progress .timeline-item.is-done:has(+ .timeline-item.is-done)::before {
     background: var(--color-success);
 }
-// Base / upcoming dot: a hollow ring for a not-yet-reached step. Its 2px grey
-// halo is OPAQUE (mixed toward the surface, not transparent) so it masks the
-// rail behind the dot — the connector only shows in the clear gap, never
-// bleeding through the ring's halo.
+// Base / upcoming dot: a hollow ring for a not-yet-reached step. Just the 2px
+// grey ring outline — no outer halo. The dot's opaque surface fill already masks
+// the connector within its bounds, so the rail stays clean without a halo ring.
 .timeline--progress .timeline-dot,
 .timeline--progress .timeline-item.is-upcoming .timeline-dot {
     color: var(--color-text-subtle);
     background: var(--color-surface);
-    box-shadow:
-        inset 0 0 0 2px var(--color-border),
-        0 0 0 var(--wui-timeline-halo-thin) color-mix(in srgb, var(--color-text-subtle) 12%, var(--color-surface));
+    box-shadow: inset 0 0 0 2px var(--color-border);
 }
 // Solid status discs with a white glyph and a soft concentric halo ring in the
 // dot's own hue. The fill is softened a touch (mixed toward the surface) so the
@@ -834,6 +832,65 @@ a.info-row:hover .info-value {
     font-weight: 500;
 }
 
+// ----------------------------------------------------------------------------
+// Horizontal orientation — dots in a row with the body stacked beneath each,
+// and the rail running left-to-right. Orthogonal to variant: works for both
+// `feed` and `progress`. A per-item connector (like the progress variant's) is
+// used so the rail is independent of the item count.
+// ----------------------------------------------------------------------------
+.timeline--horizontal {
+    display: flex;
+    flex-direction: row;
+    align-items: flex-start;
+    // Room above for a status dot's halo ring; no left inset — the dots are
+    // centred in their equal-width columns, so a halo never reaches the edge.
+    padding: calc(var(--wui-timeline-halo, 6px) + 1px) 0 0;
+    gap: 0;
+}
+// One equal-width column per step; the dot sits on top, the body stacks beneath.
+.timeline--horizontal .timeline-item {
+    flex: 1 1 0;
+    min-width: 0;
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+    gap: 10px;
+    padding: 0 6px;
+}
+// Both variants drop their vertical rail; the connector below draws the horizontal one.
+.timeline--horizontal::before {
+    display: none;
+}
+// The segment from this dot across to the next — a 2px line at the dot's vertical
+// centre, spanning from this dot's centre to the next dot's centre. z-index 0 keeps
+// it behind the dots, whose opaque fill masks it where they overlap. Overrides the
+// progress variant's vertical connector (same specificity, later in source).
+.timeline--horizontal .timeline-item:not(:last-child)::before {
+    content: "";
+    position: absolute;
+    top: calc(var(--wui-timeline-dot) / 2 - 1px);
+    bottom: auto;
+    left: 50%;
+    right: -50%;
+    width: auto;
+    height: 2px;
+    background: var(--color-border);
+    z-index: 0;
+}
+// Centre the body and its rows beneath the dot.
+.timeline--horizontal .timeline-body {
+    width: 100%;
+    text-align: center;
+}
+.timeline--horizontal .timeline-head {
+    flex-direction: column;
+    align-items: center;
+    gap: 2px;
+}
+.timeline--horizontal .timeline-meta {
+    justify-content: center;
+}
+
 // ============================================================================
 // Feature-comparison table — us vs them. The highlighted column is tinted so
 // the reader's eye lands on it without a legend.