@webority/theme 0.76.0 → 0.77.0

package/package.json

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

package/scss/_components.scss

@@ -27,12 +27,11 @@
 }
 
 .btn-primary {
-    // Pin hover/active to the pressed-primary token so a rebrand tracks
-    // automatically instead of Bootstrap auto-shading $primary off-spec.
-    --bs-btn-hover-bg: var(--wui-primary-pressed);
-    --bs-btn-hover-border-color: var(--wui-primary-pressed);
-    --bs-btn-active-bg: var(--wui-primary-pressed);
-    --bs-btn-active-border-color: var(--wui-primary-pressed);
+    // Hover and press read --color-primary-hover: the pressed primary in light and the lifted dark primary in dark (_wui-aliases.scss), so a rebrand and dark mode both track it.
+    --bs-btn-hover-bg: var(--color-primary-hover);
+    --bs-btn-hover-border-color: var(--color-primary-hover);
+    --bs-btn-active-bg: var(--color-primary-hover);
+    --bs-btn-active-border-color: var(--color-primary-hover);
     // Bootstrap computes this label colour at SCSS compile time from the library's
     // default $primary, so it can never react to a product overriding --wui-primary as a
     // runtime CSS var. Routing it through the token makes a light-primary brand's
@@ -858,9 +857,10 @@
 .card-header-actions + .card-close {
     margin-left: 0.25rem;
 }
+// Hover tints the button danger, the same as the modal and drawer close buttons.
 .card-close:hover {
-    background: var(--color-bg-muted);
-    color: var(--color-text);
+    background: var(--color-danger-soft);
+    color: var(--color-danger-text);
 }
 .card-close:focus-visible {
     outline: var(--wui-focus-ring-width) solid var(--color-focus-ring);

package/scss/_wui-aliases.scss

@@ -25,9 +25,10 @@
   --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;
+  // Icon ink on a solid status fill (the filled timeline dots): white in both modes, by design
+  // choice. White on the bright success and warning fills sits under the 3:1 icon floor, so the
+  // contrast gate does not measure this pair.
+  --color-on-status-fill: #FFFFFF;
   // 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.

package/scss/_wui-core.scss

@@ -0,0 +1,88 @@
+// ============================================================================
+// _wui-core.scss
+// ----------------------------------------------------------------------------
+// The core widget layer: every partial of _wui-components.scss except the
+// on-demand set, in the same order. A portal imports this globally, and each
+// on-demand partial (wui/<name>) from the lazy route that renders it.
+//
+// scripts/check-theme-split.mjs keeps this file in step with _wui-components.scss.
+// The split guards two things: a widget rule left in core defeats the split,
+// and a core rule that styles an on-demand class silently changes when that
+// layer is absent.
+// ============================================================================
+
+// Shared tone-pill mixin — used by .badge, .status-label, and .chip.
+// Must be imported before components that use it.
+@import "wui/tone-pill";
+
+// The order below is LOAD-BEARING. A later partial may deliberately override an
+// earlier one, so reordering these imports silently changes the cascade — and
+// nothing in the build will complain. `pnpm check:theme` measures the rules that
+// have to win against Bootstrap; the rest is guarded by review.
+@import "wui/controls";
+@import "wui/choice";
+@import "wui/media";
+@import "wui/avatar-picker";
+@import "wui/navigation";
+@import "wui/card";
+@import "wui/data";
+@import "wui/illustration";
+@import "wui/table-server";
+@import "wui/inline-edit";
+@import "wui/mention-input";
+@import "wui/comment-thread";
+@import "wui/overlays";
+@import "wui/drawer";
+@import "wui/modal-remote";
+@import "wui/utilities";
+@import "wui/typography";
+@import "wui/disclosure";
+@import "wui/display";
+@import "wui/flow";
+// After `flow`: the pricing section extends its `.plan-grid` rules.
+@import "wui/sections";
+@import "wui/chart";
+@import "wui/chart-card";
+@import "wui/scrollbar";
+@import "wui/sortable";
+// Before `split-view`, which places the legend sheet inside the list column.
+@import "wui/record-pager";
+@import "wui/shortcuts";
+@import "wui/split-view";
+@import "wui/groups";
+@import "wui/carousel";
+@import "wui/onboarding-checklist";
+@import "wui/rating";
+@import "wui/score-scale";
+@import "wui/relative-time";
+@import "wui/resizable";
+@import "wui/rolling-number";
+@import "wui/show-more";
+@import "wui/truncate";
+@import "wui/page-header-bar";
+@import "wui/filter-popover";
+@import "wui/metric-strip";
+@import "wui/due-date";
+
+// Country flags are NOT part of this layer. 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/shell-parts";
+@import "wui/consent-banner";
+@import "wui/lightbox";
+@import "wui/toolbar";
+@import "wui/theme-toggle";
+@import "wui/floating";
+@import "wui/code-block";
+@import "wui/context-menu";
+@import "wui/menubar";
+@import "wui/navigation-menu";
+@import "wui/hover-card";
+@import "wui/notification-center";
+@import "wui/whats-new";
+// After every component partial: the shared focus ring and pressed wash settle ties with their hover rules.
+@import "wui/interaction";
+// Last: restates the settled state of menus other partials style, so it must win.
+@import "wui/menu-motion";

package/scss/wui/_calendar.scss

@@ -254,3 +254,8 @@ wui-calendar[data-view="week"] .wui-calendar-surface > * {
         transition: none;
     }
 }
+
+// The shared pressed wash of wui/interaction, restated here so it ships with this on-demand layer.
+:is(.wui-calendar-nav-btn, .wui-calendar-today-btn, .wui-calendar-view-btn):active:not(:disabled, [aria-disabled="true"]) {
+    background-image: linear-gradient(var(--color-pressed-overlay), var(--color-pressed-overlay)) !important;
+}

package/scss/wui/_card.scss

@@ -21,14 +21,24 @@
     // 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;
+    // With a unit: the inner radius below subtracts it, and calc() drops a bare 0.
+    --bs-card-border-width: 0px;
+    // Bootstrap compiles the inner radius from $card-border-radius, which is smaller than the
+    // token radius the card actually draws. The header, footer and media round their corners
+    // with it, so their fill poked out over a bordered card's corners and the border looked cut.
+    // Derive it from the live radius and border width instead.
+    --bs-card-inner-border-radius: calc(var(--bs-card-border-radius) - var(--bs-card-border-width));
 }
 
 // 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.
+// The header and footer share the card's own fill (a muted card stays muted to its top edge),
+// and the header carries no rule of its own: Bootstrap's divider followed the card's border
+// width, so only the elevated variant drew one.
 .card-header {
-    --bs-card-cap-bg: var(--color-surface);
+    --bs-card-cap-bg: transparent;
+    border-bottom: 0;
     display: flex;
     align-items: center;
     justify-content: space-between;
@@ -63,8 +73,9 @@
     --bs-card-border-width: 1px;
     border-color: var(--color-border-strong);
 }
+// Through the variable, so the inner radius and the border agree.
 .card-outlined {
-    border-width: 2px;
+    --bs-card-border-width: 2px;
     border-color: var(--color-border-strong);
 }
 .card-muted {
@@ -88,14 +99,16 @@
 .card-accent.tone-info {
     --card-accent: var(--color-info);
 }
+// The stripe is a left-only border on a layer with the card's own corners. CSS corner shaping
+// curves its inner edge with the radius minus each side's width, so the stripe thins smoothly
+// to nothing round both left corners. A straight bar clipped by the corners showed sliced ends.
 .card-accent::before {
     content: "";
     position: absolute;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    width: 4px;
-    background: var(--card-accent);
+    inset: 0;
+    border-left: 4px solid var(--card-accent);
+    border-radius: inherit;
+    pointer-events: none;
 }
 
 // ── Padding scale ── (header + body + footer). `md` is the Bootstrap default.
@@ -114,6 +127,12 @@
 .card-pad-lg > .card-footer {
     padding: 28px 32px;
 }
+// With no rule under the header, its bottom padding alone separates the title from the body;
+// the body's own top padding on top of it left a double gap. After the scale, so every
+// padding step keeps the single gap.
+.card > .card-header + .card-body {
+    padding-top: 0;
+}
 
 // ── Constrained width ── (`maxWidth`): caps + centres a standalone card. Cards
 // are fluid (fill their column) unless this is set.
@@ -124,7 +143,7 @@
 
 // ── Footer ── (React `footer` / Razor <app-card-footer>): mirrors the header row.
 .card-footer {
-    --bs-card-cap-bg: var(--color-surface);
+    --bs-card-cap-bg: transparent;
     display: flex;
     align-items: center;
     gap: 12px;
@@ -164,8 +183,8 @@
 }
 // Media flush at the top follows the card's rounded corners.
 .card > .card-media:first-child {
-    border-top-left-radius: var(--radius-lg);
-    border-top-right-radius: var(--radius-lg);
+    border-top-left-radius: var(--bs-card-inner-border-radius);
+    border-top-right-radius: var(--bs-card-inner-border-radius);
 }
 
 // ── Clickable card ── (`href` / `onClick`): the whole surface is one control.

package/scss/wui/_command-palette.scss

@@ -180,9 +180,13 @@ button.wui-cmd-crumb:focus-visible {
     // Keeps a little of the next row visible when the keyboard scrolls the active one in.
     scroll-margin: 6px;
 }
+// Focus stays in the input, and the hover tint alone marks the keyboard's row at about 1.2:1, so
+// an inset ring makes it plain; inset, because the list scrolls and would clip an outer ring.
 .wui-cmd-item[aria-selected="true"] {
     background: var(--color-primary-soft);
     color: var(--color-primary-ink);
+    outline: var(--wui-focus-ring-width) solid var(--color-focus-ring);
+    outline-offset: var(--wui-focus-ring-inset);
 }
 .wui-cmd-item[aria-disabled="true"] {
     color: var(--color-text-muted);
@@ -296,3 +300,8 @@ button.wui-cmd-crumb:focus-visible {
             color 0.12s ease;
     }
 }
+
+// The shared pressed wash of wui/interaction, restated here so it ships with this on-demand layer.
+:is(.wui-cmd-back, button.wui-cmd-crumb):active:not(:disabled, [aria-disabled="true"]) {
+    background-image: linear-gradient(var(--color-pressed-overlay), var(--color-pressed-overlay)) !important;
+}

package/scss/wui/_controls.scss

@@ -1145,8 +1145,7 @@ $wui-field-error-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/
     gap: 4px;
     min-width: 0;
 }
-// Inside the flex column these two size to their content, so they stretch to the field instead.
-.field > wui-rich-text,
+// Inside the flex column it sizes to its content, so it stretches to the field instead.
 .field > wui-mention-input {
     align-self: stretch;
     width: 100%;

package/scss/wui/_data.scss

@@ -198,6 +198,7 @@
     font-size: 12px;
     font-weight: 500;
     letter-spacing: 0.04em;
+    text-transform: uppercase;
     white-space: nowrap;
     vertical-align: middle;
     transition:
@@ -562,6 +563,10 @@
     white-space: nowrap;
     flex: none;
 }
+// 3px padding and a 1px border on each side, so the strip reaches the small control height beside the other filter controls.
+.wui-filter-bar .segmented-sm {
+    --segmented-option-h: calc(var(--wui-control-height-sm) - 8px);
+}
 // Facets folded behind the Filters button stack in one panel, each at the panel's width. Both surfaces
 // draw it as the same <details>; in the Razor bar it sits inside the form, so the controls still submit.
 .wui-filter-more-panel {
@@ -1082,7 +1087,9 @@
         align-items: flex-end;
     }
     // The leading cell is the card's title line: full width, no label.
+    // Block, not the flex row of the other cells, so a name with a sub-line stacks instead of sitting beside it.
     .table-ledger.wui-table-stack > * > tr > td:not(.wui-select-cell, .wui-expand-cell):is(:first-child, .wui-select-cell + td, .wui-expand-cell + td) {
+        display: block;
         justify-content: flex-start;
         padding: 0 32px 6px 0;
         text-align: left;

package/scss/wui/_display.scss

@@ -175,21 +175,27 @@
 }
 
 // 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.
+// top-right, the value is set large in the product's own font, 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;
+    // Rows pack at the top: a tile stretched to a taller neighbour's height puts the spare
+    // space below the caption, so the label and icon row stays level across tiles.
+    align-content: start;
     column-gap: 16px;
     padding: 22px 24px;
-    --wui-kpi-value-size: 44px;
+    --wui-kpi-value-size: 36px;
 }
 .kpi.kpi-spotlight .kpi-icon {
     grid-column: 2;
     grid-row: 1;
     align-self: start;
     justify-self: end;
+    // A larger chip than the plain tile's 40px, to match the hero-sized value; the glyph keeps its size.
+    width: 48px;
+    height: 48px;
     margin-bottom: 0;
 }
 .kpi.kpi-spotlight .kpi-label,
@@ -206,12 +212,9 @@
 }
 .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.
-    // Size comes from --wui-kpi-value-size (44px default, set on the spotlight root above), so a
+    // No font-family: the value inherits the product's own font like every other tile.
+    // Size comes from --wui-kpi-value-size (36px default, set on the spotlight root above), so a
     // custom `valueSize` (px) can tame a too-large headline.
-    font-family: var(--wui-font-display);
     line-height: 1;
     font-weight: 600;
 }
@@ -357,6 +360,11 @@ a.info-row:hover .info-value {
     border-bottom: 1px solid var(--color-border);
     grid-column: span var(--descs-span, 1);
 }
+@for $n from 1 through 12 {
+    .wui-descs-span-#{$n} {
+        --descs-span: #{$n};
+    }
+}
 .descs-label {
     font-size: 12px;
     font-weight: 600;
@@ -1312,7 +1320,7 @@ a.info-row:hover .info-value {
     position: absolute;
     left: 0;
     right: 0;
-    bottom: -2px;
+    bottom: 1px;
     height: 1px;
     background: currentColor;
     transform: scaleX(0);

package/scss/wui/_dock.scss

@@ -100,3 +100,8 @@ wui-dock {
         transition: none;
     }
 }
+
+// The shared pressed wash of wui/interaction, restated here so it ships with this on-demand layer.
+.dock-item:active:not(:disabled, [aria-disabled="true"]) {
+    background-image: linear-gradient(var(--color-pressed-overlay), var(--color-pressed-overlay)) !important;
+}

package/scss/wui/_file-viewer.scss

@@ -500,3 +500,8 @@ wui-file-viewer:fullscreen {
     min-width: 48px;
 }
 
+// The shared pressed wash of wui/interaction, restated here so it ships with this on-demand layer.
+.wui-file-viewer-zoom:active:not(:disabled, [aria-disabled="true"]) {
+    background-image: linear-gradient(var(--color-pressed-overlay), var(--color-pressed-overlay)) !important;
+}
+

package/scss/wui/_floating.scss

@@ -14,6 +14,10 @@
     flex-direction: column-reverse;
     gap: 12px;
     margin: 1rem;
+    // Clear the home indicator and the notch on a phone.
+    margin-bottom: max(1rem, env(safe-area-inset-bottom));
+    margin-left: max(1rem, env(safe-area-inset-left));
+    margin-right: max(1rem, env(safe-area-inset-right));
     // The container spans only its items, but a gap between them must not swallow clicks on the page.
     pointer-events: none;
 }
@@ -53,9 +57,9 @@
 // Quieter than the primary circle: a light brand tint, the brand icon and a thin brand border.
 .wui-floating-btn--secondary {
     --wui-floating-size: 40px;
-    --bs-btn-border-color: var(--wui-primary-30);
-    --bs-btn-hover-border-color: var(--wui-primary-30);
-    --bs-btn-active-border-color: var(--wui-primary-30);
+    --bs-btn-border-color: color-mix(in srgb, var(--color-primary) 30%, transparent);
+    --bs-btn-hover-border-color: color-mix(in srgb, var(--color-primary) 30%, transparent);
+    --bs-btn-active-border-color: color-mix(in srgb, var(--color-primary) 30%, transparent);
 }
 @media (prefers-reduced-motion: reduce) {
     .wui-floating-btn {

package/scss/wui/_flow.scss

@@ -9,6 +9,7 @@
 //   .stepper           — compact: numbered circle above a label, line behind.
 //   .stepper-journey   — wide: 40px dot beside a label + title, for a page masthead.
 //   .stepper-icons     — large connected icon badges with a "STEP n" eyebrow.
+//   .wui-step-tiles    — a row of tiles: rounded icon square, label and a state line, chevrons between.
 //
 // Fully themable through a small set of `--wui-step-*` custom properties — set them on
 // the stepper (or the wizard host, or any ancestor: they inherit), or flip the whole
@@ -517,11 +518,160 @@ button.step.done:focus-visible .step-circle {
     }
 }
 
+// .wui-step-tiles — each step is a list item holding a rounded icon square with the label and a
+// state line (Done, Current, To do) beside it; chevrons join the tiles. Like every variant it is one
+// brand-primary accent: the current tile is solid accent and done tiles the soft tint, so a tone
+// class recolours the current one and a done-tone class the finished ones.
+// ----------------------------------------------------------------------------
+.wui-step-tiles {
+    padding: 0 16px;
+}
+.wui-step-tiles > ol {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    width: 100%;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+}
+.wui-step-tile {
+    display: flex;
+    align-items: center;
+    min-width: 0;
+}
+// Every tile after the first takes an equal share of the free width and centres its chevron in it.
+.wui-step-tile + .wui-step-tile {
+    flex: 1 1 auto;
+    padding-inline-start: 12px;
+}
+.wui-step-tile + .wui-step-tile > .wui-step-tile-body {
+    margin-inline-start: 12px;
+}
+.wui-step-tile + .wui-step-tile::before {
+    content: "";
+    flex: none;
+    width: 7px;
+    height: 7px;
+    margin-inline: auto;
+    border-top: 2px solid var(--wui-step-connector, var(--color-border-strong));
+    border-right: 2px solid var(--wui-step-connector, var(--color-border-strong));
+    transform: rotate(45deg);
+}
+.wui-step-tile-body {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    min-width: 0;
+    padding: 4px 8px 4px 0;
+    border: 0;
+    border-radius: var(--radius);
+    background: none;
+    font: inherit;
+    text-align: start;
+    color: inherit;
+}
+button.wui-step-tile-body {
+    cursor: pointer;
+}
+button.wui-step-tile-body:focus-visible {
+    outline: var(--wui-focus-ring-width) solid var(--color-focus-ring);
+    outline-offset: var(--wui-focus-ring-offset);
+}
+.wui-step-tiles .step-circle {
+    width: var(--wui-step-tile-size, 34px);
+    height: var(--wui-step-tile-size, 34px);
+    border: 0;
+    border-radius: var(--radius);
+    background: var(--color-bg-muted);
+    color: var(--color-text-subtle);
+    font-size: var(--wui-step-number-font, 13px);
+}
+.wui-step-tile.active .step-circle {
+    background: var(--wui-step-accent, var(--color-primary-ink));
+    color: var(--wui-step-accent-fg, var(--color-on-primary-ink));
+}
+.wui-step-tile.done .step-circle {
+    background: var(--wui-step-done-soft, var(--wui-step-soft, var(--color-primary-soft)));
+    color: var(--wui-step-done-soft-fg, var(--wui-step-soft-fg, var(--color-primary-ink)));
+}
+.wui-step-tile.error .step-circle {
+    background: var(--color-danger-soft);
+    color: var(--color-danger-text);
+}
+.wui-step-tile.skipped .step-circle {
+    border: 1px dashed var(--color-border-strong);
+    color: var(--color-text-muted);
+}
+.wui-step-tiles .step-text {
+    display: flex;
+    flex-direction: column;
+    gap: 1px;
+    min-width: 0;
+}
+.wui-step-tiles .step-label {
+    max-width: none;
+    font-size: var(--wui-step-label-font, 13px);
+    font-weight: 600;
+    line-height: 1.25;
+    color: var(--color-text);
+    white-space: nowrap;
+}
+.wui-step-tile.active .step-label {
+    color: var(--wui-step-accent, var(--color-primary-ink));
+}
+.wui-step-tile.error .step-label {
+    color: var(--color-danger-text);
+}
+button.wui-step-tile-body:hover .step-label {
+    color: var(--wui-step-accent, var(--color-primary-ink));
+}
+.wui-step-tiles .wui-step-tile-state {
+    font-size: 12px;
+    line-height: 1.3;
+    color: var(--color-text-muted);
+    white-space: nowrap;
+}
+// A vertical wizard, or a phone, stacks the tiles into a list; the chevrons only make sense in a row.
+.wui-step-tiles.stepper-vertical > ol {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 12px;
+}
+.wui-step-tiles.stepper-vertical .wui-step-tile + .wui-step-tile {
+    flex: none;
+    padding-inline-start: 0;
+}
+.wui-step-tiles.stepper-vertical .wui-step-tile + .wui-step-tile > .wui-step-tile-body {
+    margin-inline-start: 0;
+}
+.wui-step-tiles.stepper-vertical .wui-step-tile + .wui-step-tile::before {
+    content: none;
+}
+@include media-breakpoint-down(md) {
+    .wui-step-tiles.wui-step-tiles > ol {
+        flex-direction: column;
+        align-items: flex-start;
+        gap: 12px;
+    }
+    .wui-step-tiles.wui-step-tiles .wui-step-tile + .wui-step-tile {
+        flex: none;
+        padding-inline-start: 0;
+    }
+    .wui-step-tiles.wui-step-tiles .wui-step-tile + .wui-step-tile > .wui-step-tile-body {
+        margin-inline-start: 0;
+    }
+    .wui-step-tiles.wui-step-tiles .wui-step-tile + .wui-step-tile::before {
+        content: none;
+    }
+}
+
 // No connectors: the wizard's hide-connectors option drops the line between steps on every
 // variant and orientation. Placed after the variants so it outranks their equal-specificity
 // rails; the journey bar's .step-line siblings are simply not emitted.
 .wui-stepper-no-connectors .step + .step::before,
-.wui-stepper-no-connectors .step:not(:last-child)::after {
+.wui-stepper-no-connectors .step:not(:last-child)::after,
+.wui-stepper-no-connectors .wui-step-tile + .wui-step-tile::before {
     content: none;
 }
 
@@ -999,6 +1149,11 @@ button.step.done:focus-visible .step-circle {
     // width here and lines up with the fields beside it. A .date-w-* class on the field still wins.
     --wui-datepicker-width: 100%;
 }
+@for $n from 1 through 12 {
+    .wui-form-cols-#{$n} {
+        --form-cols: #{$n};
+    }
+}
 // Below md, collapse to 1 column.
 @include media-breakpoint-down(md) {
     .form-row-grid.form-row-grid {
@@ -1056,6 +1211,60 @@ wui-wizard-step[hidden] {
 .wizard-stepper {
     margin-bottom: 24px;
 }
+// The optional bar above the stepper (`top-bar`): the title at the start, then the step count and the
+// close button at the end.
+.wui-wizard-topbar {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    box-sizing: border-box;
+    height: 56px;
+    padding: 0 16px;
+    border-bottom: 1px solid var(--color-border);
+}
+.wui-wizard-topbar + .wizard-stepper {
+    margin-top: 16px;
+}
+.wui-wizard-topbar-title {
+    flex: 1 1 auto;
+    min-width: 0;
+    overflow: hidden;
+    font-size: 16px;
+    font-weight: 600;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    color: var(--color-text);
+}
+.wui-wizard-topbar-count {
+    flex: none;
+    font-size: 13px;
+    color: var(--color-text-subtle);
+    white-space: nowrap;
+}
+.wui-wizard-topbar-close {
+    display: inline-grid;
+    flex: none;
+    place-items: center;
+    width: 32px;
+    height: 32px;
+    padding: 0;
+    border: 0;
+    border-radius: var(--radius);
+    background: transparent;
+    color: var(--color-text-muted);
+    cursor: pointer;
+    transition:
+        background-color 0.12s ease,
+        color 0.12s ease;
+}
+.wui-wizard-topbar-close:hover {
+    background: var(--color-bg-muted);
+    color: var(--color-text);
+}
+.wui-wizard-topbar-close:focus-visible {
+    outline: var(--wui-focus-ring-width) solid var(--color-focus-ring);
+    outline-offset: var(--wui-focus-ring-offset);
+}
 // A skipped step reads as "passed over", not "achieved": a dashed, muted circle so it
 // is visibly distinct from a ticked (done) step.
 .step.skipped .step-circle {

package/scss/wui/_image-crop.scss

@@ -213,3 +213,8 @@ wui-image-crop {
         min-height: 44px;
     }
 }
+
+// The shared pressed wash of wui/interaction, restated here so it ships with this on-demand layer.
+:is(.wui-crop-toolbtn, .wui-crop-zoombtn):active:not(:disabled, [aria-disabled="true"]) {
+    background-image: linear-gradient(var(--color-pressed-overlay), var(--color-pressed-overlay)) !important;
+}