@webority/theme 0.7.9 → 0.8.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webority/theme",
-  "version": "0.7.9",
+  "version": "0.8.1",
   "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/_wui-components.scss

@@ -58,3 +58,7 @@
 // an accident.
 @import "flags";
 @import "wui/shell";
+@import "wui/dock";
+@import "wui/toolbar";
+// Last: restates the settled state of menus other partials style, so it must win.
+@import "wui/menu-motion";

package/scss/wui/_card.scss

@@ -7,6 +7,23 @@
 // Part of the wui-components layer — see _wui-components.scss for the load
 // order. Order within the layer is LOAD-BEARING; never reorder the imports.
 
+// Default (md) card inset — a uniform 20px on the header, body and footer, driven by one
+// friendly token. A consumer class can retune the padding by setting --wui-card-pad (e.g.
+// `.tight-card { --wui-card-pad: 12px }` with `className`/`class` on the card) without
+// overriding a selector. The padding-scale classes (.card-compact, .card-pad-*) still win —
+// they set `padding` directly on the header/body/footer.
+.card {
+    --wui-card-pad: 20px;
+    --bs-card-spacer-y: var(--wui-card-pad);
+    --bs-card-spacer-x: var(--wui-card-pad);
+    --bs-card-cap-padding-y: var(--wui-card-pad);
+    --bs-card-cap-padding-x: var(--wui-card-pad);
+    // Default card is borderless — a flat surface. The border-STYLE stays solid (Bootstrap's
+    // `border: var(--bs-card-border-width) solid …`), so a variant or a consumer class can
+    // bring the edge back just by giving it a width (set --bs-card-border-width).
+    --bs-card-border-width: 0;
+}
+
 // A card header that carries a title on the left and controls on the right — the
 // pattern nearly every panel header uses, so it belongs here rather than being
 // re-flexed with utilities on each one.
@@ -40,8 +57,10 @@
 // ── Variants ──────────────────────────────────────────────────────────────────
 // `default` is the flat surface above. The rest are opt-in visual treatments,
 // chosen by the `variant` prop (React) / attribute (Razor).
-// Flat elevation: no in-page drop shadow — stronger border is the edge cue.
+// Flat elevation: no in-page drop shadow — stronger border is the edge cue. The default card
+// is borderless, so re-assert a width here (this variant's whole cue is that border).
 .card-elevated {
+    --bs-card-border-width: 1px;
     border-color: var(--color-border-strong);
 }
 .card-outlined {

package/scss/wui/_controls.scss

@@ -95,14 +95,29 @@
 .wui-check:hover:not(:disabled):not(:checked),
 .wui-radio:hover:not(:disabled):not(:checked) {
     border-color: var(--color-primary);
-    box-shadow: 0 0 0 4px var(--color-primary-soft);
+    box-shadow: 0 0 0 2px var(--color-primary-soft);
 }
+// Keyboard focus keeps a restrained brand ring — a keyboard user MUST see where focus is
+// (a11y). :focus-visible matches keyboard/AT focus only, never a plain mouse click.
 .form-check-input:focus-visible,
 .wui-check:focus-visible,
 .wui-radio:focus-visible {
     outline: none;
     border-color: var(--color-primary);
-    box-shadow: 0 0 0 3px var(--color-primary-soft);
+    box-shadow: 0 0 0 2px var(--color-primary-soft);
+}
+// A plain MOUSE click must leave NO lingering focus/active glow, ring, border tint or
+// darkening — Bootstrap paints all of them on :focus/:active. Neutralise them for pointer
+// focus + active while the keyboard ring above stays, so a mouse click just toggles cleanly.
+.form-check-input:focus:not(:focus-visible),
+.wui-check:focus:not(:focus-visible),
+.wui-radio:focus:not(:focus-visible),
+.form-check-input:active,
+.wui-check:active,
+.wui-radio:active {
+    outline: none;
+    box-shadow: none;
+    filter: none;
 }
 .form-check-input:checked,
 .wui-check:checked,
@@ -167,7 +182,7 @@
 }
 .form-switch .form-check-input:hover:not(:disabled):not(:checked) {
     border-color: transparent;
-    box-shadow: 0 0 0 4px var(--color-primary-soft);
+    box-shadow: 0 0 0 2px var(--color-primary-soft);
 }
 .form-switch .form-check-input:checked {
     border-color: transparent;
@@ -176,6 +191,12 @@
     // Re-assert the knob — the checkbox :checked tick has equal specificity.
     background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='7' fill='white'/%3E%3C/svg%3E");
 }
+// On a mouse click the switch's track border reverts to its resting transparent — Bootstrap's
+// :focus otherwise tints it brand-blue, leaving a coloured outline after the click. The shared
+// :focus:not(:focus-visible) rule already dropped the glow; this drops the border tint too.
+.form-switch .form-check-input:focus:not(:focus-visible) {
+    border-color: transparent;
+}
 
 // Circular variant (shape="circle") — a compact round on/off button instead of a sliding
 // pill. The track is a square-sized circle; the knob dot stays CENTRED in both states (no
@@ -194,6 +215,15 @@
 .form-switch-circle .form-check-input:checked {
     background-position: center;
 }
+
+// Rounded-pill variant (shape="round") — the same sliding pill, but with truly circular
+// ends. The switch is a type=checkbox, so it inherits the checkbox's default
+// `corner-shape: squircle`, which superellipses the pill's ends; reset it to `round` for
+// the fully semicircular track in the reference. Only the corner shape changes — size,
+// knob and slide are the base pill's.
+.form-switch-round .form-check-input {
+    corner-shape: round;
+}
 @media (prefers-reduced-motion: reduce) {
     .form-check-input,
     .wui-check,

package/scss/wui/_data.scss

@@ -249,7 +249,10 @@
 // floating 42px header band, airy rows on a hairline rule, and an inset from
 // the card edge. Column geometry is NOT set here.
 .table-wrap:has(> .table-ledger) {
-    padding: 20px 20px 0;
+    // One token drives the whole inset so a consumer can retune the table's padding with a
+    // class (set --wui-table-pad) without overriding this selector. Bottom padding is now
+    // included (was 0) so the last row isn't flush against the card edge.
+    padding: var(--wui-table-pad, 20px);
 }
 .table-ledger {
     border-spacing: 0;

package/scss/wui/_display.scss

@@ -12,7 +12,6 @@
     display: flex;
     flex-direction: column;
     padding: 18px 20px;
-    border: 1px solid var(--color-border);
     border-radius: var(--radius-lg);
     corner-shape: squircle;
     background: var(--color-surface);
@@ -119,21 +118,18 @@
     margin-top: 2px;
 }
 
-// Surface variants — plain (above) is the bordered card; these swap the fill and drop the
-// border so a dashboard can mix a KPI strip with the surrounding card without every tile
-// drawing its own outline.
+// Surface variants — plain (above) is borderless on the surface fill; these just swap the
+// fill so a dashboard can mix a KPI strip with the surrounding card.
 .kpi.kpi-filled {
-    border-color: transparent;
     background: var(--color-bg-subtle);
 }
 .kpi.kpi-accent {
-    border-color: transparent;
     background: var(--color-primary-soft);
 }
 // Needs-action state — orthogonal to variant, so it composes with plain/filled/accent
-// rather than replacing the surface.
+// rather than replacing the surface. Draws its own outline since the base tile no longer does.
 .kpi.kpi-attention {
-    border-color: var(--color-warning);
+    border: 1px solid var(--color-warning);
     background: var(--color-warning-soft);
 }
 
@@ -153,18 +149,64 @@
     height: 44px;
 }
 
+// Spotlight — an editorial feature tile: the label sits top-left with the icon chip pinned
+// top-right, the value is set in the display face (a product's serif brand face when it
+// overrides --wui-font-display), and an optional caption reads under the number. For the
+// single showcase stat on a marketing/portal surface where the number is the hero.
+.kpi.kpi-spotlight {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) auto;
+    column-gap: 16px;
+    padding: 22px 24px;
+}
+.kpi.kpi-spotlight .kpi-icon {
+    grid-column: 2;
+    grid-row: 1;
+    align-self: start;
+    justify-self: end;
+    margin-bottom: 0;
+}
+.kpi.kpi-spotlight .kpi-label,
+.kpi.kpi-spotlight .kpi-value,
+.kpi.kpi-spotlight .kpi-caption,
+.kpi.kpi-spotlight .kpi-delta {
+    grid-column: 1;
+}
+.kpi.kpi-spotlight .kpi-label {
+    align-self: center;
+    text-transform: uppercase;
+    letter-spacing: 0.08em;
+    font-weight: 600;
+}
+.kpi.kpi-spotlight .kpi-value {
+    margin-top: 14px;
+    // The editorial serif is this variant's signature (see the reference tile), so the value gets
+    // a serif stack directly — not --wui-font-display, which defaults to the body sans and so would
+    // never read as serif. A product that wants its own face overrides this one selector.
+    font-family: Georgia, 'Times New Roman', 'Noto Serif', serif;
+    font-size: 44px;
+    line-height: 1;
+    font-weight: 600;
+}
+// Caption — the sub-line under the value ("Total sent"). Spotlight-only today, but the class
+// is variant-agnostic so a plain tile can carry one too.
+.kpi-caption {
+    margin-top: 8px;
+    font-size: 14px;
+    font-weight: 400;
+    color: var(--color-text-muted);
+}
+
 // The whole tile as a link (href). Colour/underline reset so the anchor reads as the
 // card, not as text; the hover lift matches .res-card's tint-and-lift treatment.
 a.kpi {
     text-decoration: none;
     color: inherit;
     transition:
-        border-color 0.15s ease,
         box-shadow 0.15s ease,
         transform 0.15s ease;
 }
 a.kpi:hover {
-    border-color: var(--color-primary);
     box-shadow: var(--shadow-md);
     transform: translateY(-2px);
 }
@@ -566,6 +608,9 @@ a.info-row:hover .info-value {
 // cannot break into segments when an entry wraps to two lines.
 // ============================================================================
 .timeline {
+    // One knob for the whole component: the dot diameter. The rail, halo and
+    // glyph all derive from it, so `size` (px) scales everything in proportion.
+    --wui-timeline-dot: 24px;
     position: relative;
     margin: 0;
     padding: 0 0 0 6px;
@@ -575,9 +620,9 @@ a.info-row:hover .info-value {
     content: "";
     position: absolute;
     // Inset top and bottom so the rail starts and ends inside the first/last dot.
-    top: 10px;
-    bottom: 10px;
-    left: 17px;
+    top: calc(var(--wui-timeline-dot) / 2 - 2px);
+    bottom: calc(var(--wui-timeline-dot) / 2 - 2px);
+    left: calc(6px + var(--wui-timeline-dot) / 2 - 1px);
     width: 2px;
     background: var(--color-border);
 }
@@ -594,8 +639,8 @@ a.info-row:hover .info-value {
     position: relative;
     z-index: 1;
     flex: none;
-    width: 24px;
-    height: 24px;
+    width: var(--wui-timeline-dot);
+    height: var(--wui-timeline-dot);
     display: inline-grid;
     place-items: center;
     border-radius: 999px;
@@ -659,6 +704,119 @@ a.info-row:hover .info-value {
     white-space: pre-wrap;
     overflow-wrap: anywhere;
 }
+// Plain inline subtext under the title — a muted line (distinct from the boxed
+// .timeline-note). Works in both variants; used heavily by the progress variant.
+.timeline-desc {
+    margin-top: 2px;
+    font-size: 13px;
+    line-height: 1.45;
+    color: var(--color-text-muted);
+    overflow-wrap: anywhere;
+}
+
+// ----------------------------------------------------------------------------
+// Progress variant — a status tracker (Initiated → Submitted → … → Disbursed).
+// Solid status dots (done/current/rejected) or a hollow ring (upcoming); the
+// rail is drawn PER SEGMENT so a completed step's outgoing line reads filled.
+// ----------------------------------------------------------------------------
+.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);
+    --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);
+}
+// No single list rail — each item owns the segment down to the next dot so it
+// can be tinted independently.
+.timeline--progress::before {
+    display: none;
+}
+.timeline--progress .timeline-item {
+    padding-bottom: 22px;
+}
+// The connector from this dot down into the next one — anchored to the dot's
+// bottom edge and centre, so it stays aligned at any dot size.
+.timeline--progress .timeline-item:not(:last-child)::before {
+    content: "";
+    position: absolute;
+    top: var(--wui-timeline-dot);
+    bottom: -2px;
+    left: calc(var(--wui-timeline-dot) / 2 - 1px);
+    width: 2px;
+    background: var(--color-border);
+}
+// The rail fills green only BETWEEN two completed steps, so a lone/last done
+// step doesn't leave a green stub dangling into an incomplete step below it.
+.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.
+.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));
+}
+// 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
+// states read gentler than the raw brand tones.
+.timeline--progress .timeline-item.is-done .timeline-dot {
+    color: var(--color-on-scrim);
+    background: color-mix(in srgb, var(--color-success) 82%, var(--color-surface));
+    box-shadow: 0 0 0 var(--wui-timeline-halo) var(--color-success-soft);
+}
+.timeline--progress .timeline-item.is-current .timeline-dot {
+    color: var(--color-on-scrim);
+    background: color-mix(in srgb, var(--color-warning) 82%, var(--color-surface));
+    box-shadow: 0 0 0 var(--wui-timeline-halo) var(--color-warning-soft);
+}
+.timeline--progress .timeline-item.is-rejected .timeline-dot {
+    color: var(--color-on-scrim);
+    background: color-mix(in srgb, var(--color-danger) 82%, var(--color-surface));
+    box-shadow: 0 0 0 var(--wui-timeline-halo) var(--color-danger-soft);
+}
+// Blocked / waiting on an external action — informational blue.
+.timeline--progress .timeline-item.is-on-hold .timeline-dot {
+    color: var(--color-on-scrim);
+    background: color-mix(in srgb, var(--color-info) 82%, var(--color-surface));
+    box-shadow: 0 0 0 var(--wui-timeline-halo) var(--color-info-soft);
+}
+// Cancelled / skipped — resolved-but-inactive outcomes read as muted slate,
+// with a soft neutral halo, so they sit visually below the live states.
+.timeline--progress .timeline-item.is-cancelled .timeline-dot,
+.timeline--progress .timeline-item.is-skipped .timeline-dot {
+    color: var(--color-on-scrim);
+    background: color-mix(in srgb, var(--color-text-subtle) 82%, var(--color-surface));
+    box-shadow: 0 0 0 var(--wui-timeline-halo) color-mix(in srgb, var(--color-text-subtle) 16%, transparent);
+}
+// A cancelled step's title is struck through — the plan changed.
+.timeline--progress .timeline-item.is-cancelled .timeline-title {
+    text-decoration: line-through;
+    color: var(--color-text-muted);
+}
+// Title row: title on the left, the timestamp pinned to the right.
+.timeline--progress .timeline-head {
+    display: flex;
+    align-items: baseline;
+    justify-content: space-between;
+    gap: 12px;
+}
+.timeline--progress .timeline-head .timeline-at {
+    flex: none;
+    font-size: 12.5px;
+    color: var(--color-text-subtle);
+    white-space: nowrap;
+}
+// An upcoming step greys down — it hasn't happened yet.
+.timeline--progress .timeline-item.is-upcoming .timeline-title {
+    color: var(--color-text-muted);
+    font-weight: 500;
+}
 
 // ============================================================================
 // Feature-comparison table — us vs them. The highlighted column is tinted so

package/scss/wui/_dock.scss

@@ -0,0 +1,102 @@
+// ── Floating dock ──
+// AppFloatingDock / <app-floating-dock> / <wui-dock> — a macOS-style pill of icon
+// links. The element writes --wui-dock-mag (1 → max-scale) per item on pointermove;
+// everything visual lives here. With no JS (or coarse pointer / reduced motion /
+// `static`) the var stays 1 and the dock is a plain icon row.
+//
+// Part of the wui-components layer — see _wui-components.scss for load order.
+
+wui-dock {
+    --dock-size: 44px;
+
+    display: inline-flex;
+    align-items: flex-end;
+    gap: 10px;
+    padding: 10px 14px;
+    background: var(--color-surface);
+    border: 1px solid var(--color-border);
+    border-radius: var(--wui-radius-xl);
+    corner-shape: squircle;
+    box-shadow: var(--wui-shadow-overlay);
+    // Item boxes grow on hover; anchoring the row height to the rest size keeps the
+    // pill from pushing surrounding layout while items magnify upward out of it.
+    height: calc(var(--dock-size) + 20px);
+}
+
+.dock-item {
+    position: relative;
+    display: grid;
+    place-items: center;
+    width: calc(var(--dock-size) * var(--wui-dock-mag, 1));
+    height: calc(var(--dock-size) * var(--wui-dock-mag, 1));
+    border: none;
+    border-radius: 50%;
+    background: var(--color-bg-muted);
+    color: var(--color-text-muted);
+    text-decoration: none;
+    cursor: pointer;
+    // Smooths the snap-back when the pointer leaves; during tracking the element
+    // updates per frame, so the short transition just softens the steps.
+    transition:
+        width 120ms var(--wui-ease-ui),
+        height 120ms var(--wui-ease-ui),
+        background-color 160ms var(--wui-ease-ui),
+        color 160ms var(--wui-ease-ui);
+}
+.dock-item:hover,
+.dock-item:focus-visible {
+    background: var(--color-primary-soft);
+    color: var(--color-primary);
+}
+.dock-item:focus-visible {
+    outline: 2px solid var(--color-primary);
+    outline-offset: 2px;
+    // Keyboard users get no pointer tracking — grow the focused item itself.
+    --wui-dock-mag: 1.25;
+}
+
+.dock-item-icon {
+    display: grid;
+    place-items: center;
+    font-size: calc(18px * var(--wui-dock-mag, 1));
+    line-height: 1;
+}
+// Node icons (SVGs) don't inherit font-size — scale the box instead.
+.dock-item-icon > svg {
+    transform: scale(var(--wui-dock-mag, 1));
+}
+
+.dock-item-tip {
+    position: absolute;
+    bottom: calc(100% + 10px);
+    left: 50%;
+    translate: -50% 4px;
+    padding: 4px 10px;
+    background: var(--color-surface);
+    border: 1px solid var(--color-border);
+    border-radius: var(--wui-radius-sm);
+    box-shadow: var(--wui-shadow-thumb);
+    color: var(--color-text);
+    font-size: 12px;
+    font-weight: 500;
+    line-height: 1.35;
+    white-space: nowrap;
+    pointer-events: none;
+    opacity: 0;
+    transition:
+        opacity 140ms var(--wui-ease-ui),
+        translate 140ms var(--wui-ease-ui);
+    z-index: var(--wui-z-tooltip);
+}
+.dock-item:hover .dock-item-tip,
+.dock-item:focus-visible .dock-item-tip {
+    opacity: 1;
+    translate: -50% 0;
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .dock-item,
+    .dock-item-tip {
+        transition: none;
+    }
+}

package/scss/wui/_flow.scss

@@ -22,7 +22,8 @@
 //   --wui-step-connector   the incomplete-rail colour
 //   --wui-step-size        compact/vertical badge diameter (default 28px)
 //   --wui-step-badge-size  icons-variant badge diameter (default 56px)
-// The icons variant defaults its accent to success (green); the others to primary.
+// 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.
 // ============================================================================
 .stepper {
     // Full width so the flex:1 steps spread evenly across the container. Without it,
@@ -34,6 +35,18 @@
     gap: 0;
     padding: 0 8px;
 }
+// A STANDALONE AppStepper gets the brand (primary) accent as a DECLARED default, so a tone
+// class placed on the stepper element itself overrides it. The wizard is excluded because
+// its tone class rides on the wizard HOST (an ancestor of the generated header): declaring
+// the vars on the header would block that inherited override, so the wizard leans on the
+// var fallbacks instead — which now also default to primary. :where() keeps this at ZERO
+// specificity, so a .wui-step-tone-* class or an inline --wui-step-* override still wins.
+:where(.stepper:not(.wizard-stepper)) {
+    --wui-step-accent: var(--color-primary);
+    --wui-step-accent-fg: var(--color-on-scrim);
+    --wui-step-soft: var(--color-primary-soft);
+    --wui-step-soft-fg: var(--color-primary);
+}
 .step {
     position: relative;
     flex: 1;
@@ -188,8 +201,8 @@ button.step:focus-visible .step-circle {
         transform 0.2s ease;
 }
 .stepper-journey .step.done .step-circle {
-    background: var(--wui-step-soft, var(--color-success-soft));
-    color: var(--wui-step-soft-fg, var(--color-success-text));
+    background: var(--wui-step-soft, var(--color-primary-soft));
+    color: var(--wui-step-soft-fg, var(--color-primary));
 }
 .stepper-journey .step.active .step-circle {
     background: var(--wui-step-accent, var(--color-primary));
@@ -214,7 +227,7 @@ button.step:focus-visible .step-circle {
     color: var(--color-text-subtle);
 }
 .stepper-journey .step.done .step-index {
-    color: var(--wui-step-soft-fg, var(--color-success-text));
+    color: var(--wui-step-soft-fg, var(--color-primary));
 }
 .stepper-journey .step.active .step-index {
     color: var(--wui-step-accent, var(--color-primary));
@@ -255,7 +268,7 @@ button.step:focus-visible .step-circle {
     background: var(--color-border-strong);
 }
 .stepper-journey .step-line.done {
-    background: var(--wui-step-accent, var(--color-success));
+    background: var(--wui-step-accent, var(--color-primary));
 }
 // Below xl the four label+title pairs no longer fit side by side, so the bar
 // becomes a vertical list and the connectors go away.
@@ -348,9 +361,9 @@ button.step:focus-visible .step-circle {
 }
 
 // .stepper-icons — large icon badges joined by a rail, with a "STEP n" eyebrow above
-// each title. Done tints green with a filled connector; active is a solid primary
-// badge; pending is a muted badge. Built for icon-per-step flows — each step sets `icon`
-// (a step with no icon falls back to its number).
+// each title. Done gets a soft-accent tint + filled connector; active is a solid-accent
+// badge; pending is a muted badge — all one accent (brand primary by default). Built for
+// icon-per-step flows — each step sets `icon` (a step with no icon falls back to its number).
 // ----------------------------------------------------------------------------
 .stepper-icons {
     align-items: flex-start;
@@ -371,11 +384,11 @@ button.step:focus-visible .step-circle {
         color 0.2s ease,
         transform 0.2s ease;
 }
-// The icons variant defaults its accent to success (green), so an untoned icons wizard
-// reads green — solid-green active badge, soft-green done badge, green rail. Every colour
-// still routes through the shared --wui-step-* vars, so a tone class or an override recolours it.
+// Like every variant, the icons stepper defaults to the brand primary — a solid-primary
+// active badge, a soft-primary done badge, a primary rail. Every colour routes through the
+// shared --wui-step-* vars, so a `.wui-step-tone-*` class or an override recolours it.
 .stepper-icons .step.active .step-circle {
-    background: var(--wui-step-accent, var(--color-success));
+    background: var(--wui-step-accent, var(--color-primary));
     color: var(--wui-step-accent-fg, var(--color-on-scrim));
     // The compact variant rings the active circle; here the solid fill carries it, so
     // drop the ring to match the flat badge look.
@@ -383,8 +396,8 @@ button.step:focus-visible .step-circle {
 }
 .stepper-icons .step.done .step-circle {
     border: none;
-    background: var(--wui-step-soft, var(--color-success-soft));
-    color: var(--wui-step-soft-fg, var(--color-success-text));
+    background: var(--wui-step-soft, var(--color-primary-soft));
+    color: var(--wui-step-soft-fg, var(--color-primary));
 }
 .stepper-icons .step.error .step-circle {
     background: var(--color-danger-soft);
@@ -406,10 +419,10 @@ button.step:focus-visible .step-circle {
     color: var(--color-text-subtle);
 }
 .stepper-icons .step.active .step-index {
-    color: var(--wui-step-accent, var(--color-success));
+    color: var(--wui-step-accent, var(--color-primary));
 }
 .stepper-icons .step.done .step-index {
-    color: var(--wui-step-soft-fg, var(--color-success-text));
+    color: var(--wui-step-soft-fg, var(--color-primary));
 }
 .stepper-icons .step.error .step-index {
     color: var(--color-danger-text);
@@ -435,7 +448,7 @@ button.step:focus-visible .step-circle {
     background: var(--wui-step-connector, var(--color-border));
 }
 .stepper-icons .step.done + .step::before {
-    background: var(--wui-step-accent, var(--color-success));
+    background: var(--wui-step-accent, var(--color-primary));
 }
 // The compact hover ring is calibrated to the 28px badge; the 56px icon badge just
 // lifts on hover instead.
@@ -793,6 +806,7 @@ button.step:focus-visible .step-circle {
 // ============================================================================
 wui-wizard {
     display: block;
+    width: 100%;
 }
 // Custom elements don't inherit the UA `[hidden] { display: none }` once we give the
 // tag its own `display`, so the inactive panels need it stated explicitly.
@@ -819,13 +833,12 @@ wui-wizard-step[hidden] {
 }
 .wizard-footer {
     // The sticky Back/Skip/Next/Finish bar — pinned to the bottom of a scrolling flow
-    // so the actions (and the Skip on an optional step) are always in reach.
+    // so the actions (and the Skip on an optional step) are always in reach. Runs flush on
+    // the flow (no divider or fill) — the buttons alone read as the footer.
     position: sticky;
     bottom: 0;
     margin-top: 24px;
     padding: 16px 0;
-    border-top: 1px solid var(--color-border);
-    background: var(--color-surface);
     z-index: 1;
 }
 .wizard-footer-actions {