@webority/theme 0.7.8 → 0.7.9

package/package.json

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

@@ -18,6 +18,10 @@
 // This file is now an INDEX. The rules live in ./wui/*.scss, split by domain
 // because one 5,000-line stylesheet made finding a component a grep.
 //
+// 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
@@ -47,7 +51,7 @@
 // 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

package/scss/wui/_controls.scss

@@ -176,6 +176,24 @@
     // 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");
 }
+
+// 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
+// left/right slide) and the fill flips to primary when on. Placed after the base switch
+// block so the equal-specificity :checked position override wins on source order.
+.form-switch-circle .form-check-input {
+    width: 24px;
+    height: 24px;
+    // The switch is a type="checkbox", which carries `corner-shape: squircle` — on a square
+    // that renders a rounded square, not a circle. Reset to a true round corner.
+    corner-shape: round;
+    border-radius: 999px;
+    background-position: center;
+    background-size: 10px 10px;
+}
+.form-switch-circle .form-check-input:checked {
+    background-position: center;
+}
 @media (prefers-reduced-motion: reduce) {
     .form-check-input,
     .wui-check,
@@ -1050,30 +1068,21 @@ wui-select[compact] {
     border: 1px solid var(--color-border);
 }
 .badge-primary {
-    background: var(--color-primary-soft);
-    color: var(--color-primary);
+    @include wui-tone-pill-colors(primary, var(--color-primary));
     border-color: color-mix(in srgb, var(--color-primary) 25%, transparent);
 }
 .badge-success {
-    background: var(--color-success-soft);
-    color: var(--color-success-text);
-    border-color: transparent;
+    @include wui-tone-pill-colors(success);
 }
 .badge-warning,
 .badge-warn {
-    background: var(--color-warning-soft);
-    color: var(--color-warning-text);
-    border-color: transparent;
+    @include wui-tone-pill-colors(warning);
 }
 .badge-danger {
-    background: var(--color-danger-soft);
-    color: var(--color-danger-text);
-    border-color: transparent;
+    @include wui-tone-pill-colors(danger);
 }
 .badge-info {
-    background: var(--color-info-soft);
-    color: var(--color-info-text);
-    border-color: transparent;
+    @include wui-tone-pill-colors(info);
 }
 .badge-dot::before {
     content: "";
@@ -1109,29 +1118,24 @@ wui-select[compact] {
 .status-label.success,
 .status-label.tone-ok,
 .status-label.tone-green {
-    background: color-mix(in srgb, var(--color-success) 16%, transparent);
-    color: var(--color-success-text);
+    @include wui-tone-pill-colors(success);
 }
 .status-label.warning,
 .status-label.tone-warn,
 .status-label.tone-amber {
-    background: color-mix(in srgb, var(--color-warning) 16%, transparent);
-    color: var(--color-warning-text);
+    @include wui-tone-pill-colors(warning);
 }
 .status-label.danger,
 .status-label.tone-bad,
 .status-label.tone-red {
-    background: color-mix(in srgb, var(--color-danger) 16%, transparent);
-    color: var(--color-danger-text);
+    @include wui-tone-pill-colors(danger);
 }
 .status-label.info,
 .status-label.tone-blue {
-    background: color-mix(in srgb, var(--color-info) 16%, transparent);
-    color: var(--color-info-text);
+    @include wui-tone-pill-colors(info);
 }
 .status-label.primary {
-    background: var(--color-primary-soft);
-    color: var(--color-primary);
+    @include wui-tone-pill-colors(primary, var(--color-primary));
 }
 // Default/neutral — also the bare `.status-label` look, so an unknown or omitted
 // tone still renders as a proper pill instead of transparent text.

package/scss/wui/_flow.scss

@@ -5,9 +5,24 @@
 // partials are a split of one stylesheet, not independent modules, so a rule
 // here may be overridden by a later partial. Never reorder the imports.
 
-// Wizard stepper. Two variants of one component:
+// Wizard stepper. Three variants of one component:
 //   .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.
+//
+// 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
+// accent with a `.wui-step-tone-*` class. Every colour/size below reads a var with the
+// historical value as the fallback, so an UNSET wizard looks exactly as before while a
+// product can recolour or resize it without overriding a single selector:
+//   --wui-step-accent      solid state colour (active fill, done fill/rail, active eyebrow)
+//   --wui-step-accent-fg   text/icon on the accent fill
+//   --wui-step-soft        soft tint (active ring; the journey/icons "done" badge bg)
+//   --wui-step-soft-fg     text/icon on the soft tint (the "done" badge check)
+//   --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.
 // ============================================================================
 .stepper {
     // Full width so the flex:1 steps spread evenly across the container. Without it,
@@ -34,23 +49,23 @@
 .step + .step::before {
     content: "";
     position: absolute;
-    // 13px = half the 28px circle, minus 1 for the 2px line's own height.
-    top: 13px;
-    left: calc(-50% + 18px);
-    right: calc(50% + 18px);
+    // Centred on the badge: half the diameter, minus 1 for the 2px line's own height.
+    top: calc(var(--wui-step-size, 28px) / 2 - 1px);
+    left: calc(-50% + var(--wui-step-size, 28px) / 2 + 4px);
+    right: calc(50% + var(--wui-step-size, 28px) / 2 + 4px);
     height: 2px;
-    background: var(--color-border);
+    background: var(--wui-step-connector, var(--color-border));
     z-index: 0;
 }
 .step.done + .step::before {
-    background: var(--color-primary);
+    background: var(--wui-step-accent, var(--color-primary));
 }
 .step-circle {
     position: relative;
     z-index: 1;
     flex: none;
-    width: 28px;
-    height: 28px;
+    width: var(--wui-step-size, 28px);
+    height: var(--wui-step-size, 28px);
     display: inline-grid;
     place-items: center;
     border: 1.5px solid var(--color-border);
@@ -61,15 +76,15 @@
     color: var(--color-text-subtle);
 }
 .step.active .step-circle {
-    border-color: var(--color-primary);
-    background: var(--color-primary);
-    color: var(--color-on-scrim);
-    box-shadow: 0 0 0 4px var(--color-primary-soft);
+    border-color: var(--wui-step-accent, var(--color-primary));
+    background: var(--wui-step-accent, var(--color-primary));
+    color: var(--wui-step-accent-fg, var(--color-on-scrim));
+    box-shadow: 0 0 0 4px var(--wui-step-soft, var(--color-primary-soft));
 }
 .step.done .step-circle {
-    border-color: var(--color-primary);
-    background: var(--color-primary);
-    color: var(--color-on-scrim);
+    border-color: var(--wui-step-accent, var(--color-primary));
+    background: var(--wui-step-accent, var(--color-primary));
+    color: var(--wui-step-accent-fg, var(--color-on-scrim));
 }
 .step-label {
     max-width: 130px;
@@ -101,12 +116,12 @@ button.step {
 }
 a.step:hover .step-circle,
 button.step:hover .step-circle {
-    box-shadow: 0 0 0 4px var(--color-primary-soft);
+    box-shadow: 0 0 0 4px var(--wui-step-soft, var(--color-primary-soft));
     transform: scale(1.04);
 }
 a.step:hover .step-label,
 button.step:hover .step-label {
-    color: var(--color-primary);
+    color: var(--wui-step-accent, var(--color-primary));
 }
 a.step:focus-visible,
 button.step:focus-visible {
@@ -116,8 +131,8 @@ button.step:focus-visible {
 a.step:focus-visible .step-circle,
 button.step:focus-visible .step-circle {
     box-shadow:
-        0 0 0 4px var(--color-primary-soft),
-        0 0 0 6px var(--color-primary);
+        0 0 0 4px var(--wui-step-soft, var(--color-primary-soft)),
+        0 0 0 6px var(--wui-step-accent, var(--color-primary));
 }
 // A step that failed its stage — a red circle with an alert, so an invalid step
 // reads as wrong at a glance rather than merely "not done".
@@ -173,12 +188,12 @@ button.step:focus-visible .step-circle {
         transform 0.2s ease;
 }
 .stepper-journey .step.done .step-circle {
-    background: var(--color-success-soft);
-    color: var(--color-success-text);
+    background: var(--wui-step-soft, var(--color-success-soft));
+    color: var(--wui-step-soft-fg, var(--color-success-text));
 }
 .stepper-journey .step.active .step-circle {
-    background: var(--color-primary);
-    color: var(--color-on-scrim);
+    background: var(--wui-step-accent, var(--color-primary));
+    color: var(--wui-step-accent-fg, var(--color-on-scrim));
     box-shadow: none;
     transform: scale(1.06);
 }
@@ -199,10 +214,10 @@ button.step:focus-visible .step-circle {
     color: var(--color-text-subtle);
 }
 .stepper-journey .step.done .step-index {
-    color: var(--color-success-text);
+    color: var(--wui-step-soft-fg, var(--color-success-text));
 }
 .stepper-journey .step.active .step-index {
-    color: var(--color-primary);
+    color: var(--wui-step-accent, var(--color-primary));
 }
 .stepper-journey .step.error .step-circle {
     background: var(--color-danger-soft);
@@ -240,7 +255,7 @@ button.step:focus-visible .step-circle {
     background: var(--color-border-strong);
 }
 .stepper-journey .step-line.done {
-    background: var(--color-success);
+    background: var(--wui-step-accent, var(--color-success));
 }
 // 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.
@@ -270,7 +285,7 @@ button.step:focus-visible .step-circle {
 // left, the label and its description stacked on the right.
 .stepper-vertical .step {
     display: grid;
-    grid-template-columns: 28px 1fr;
+    grid-template-columns: var(--wui-step-size, 28px) 1fr;
     column-gap: 12px;
     // No gap between the label and its description — they read as one block; the
     // base .step gap of 10px is for the horizontal circle→label spacing.
@@ -307,18 +322,18 @@ button.step:focus-visible .step-circle {
 .stepper-vertical .step:not(:last-child)::after {
     content: "";
     position: absolute;
-    // 13px = half the 28px circle minus 1 for the 2px line's own width.
-    left: 13px;
-    top: 28px;
+    // Half the badge minus 1 for the 2px line's own width; runs from below the circle.
+    left: calc(var(--wui-step-size, 28px) / 2 - 1px);
+    top: var(--wui-step-size, 28px);
     // Reaches through the 18px inter-step gap to meet the next circle's top; keep
     // this in sync with the .stepper-vertical `gap`.
     bottom: -18px;
     width: 2px;
-    background: var(--color-border);
+    background: var(--wui-step-connector, var(--color-border));
     z-index: 0;
 }
 .stepper-vertical .step.done:not(:last-child)::after {
-    background: var(--color-primary);
+    background: var(--wui-step-accent, var(--color-primary));
 }
 // The journey bar stacked vertically reuses its own narrow-width treatment: a plain
 // column with the horizontal connectors dropped (a real vertical rail here would
@@ -332,15 +347,169 @@ button.step:focus-visible .step-circle {
     display: none;
 }
 
+// .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).
+// ----------------------------------------------------------------------------
+.stepper-icons {
+    align-items: flex-start;
+    padding: 8px 8px 0;
+}
+.stepper-icons .step {
+    gap: 6px;
+}
+.stepper-icons .step-circle {
+    width: var(--wui-step-badge-size, 56px);
+    height: var(--wui-step-badge-size, 56px);
+    border: none;
+    background: var(--color-bg-muted);
+    color: var(--color-text-subtle);
+    font-size: 22px;
+    transition:
+        background 0.2s ease,
+        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.
+.stepper-icons .step.active .step-circle {
+    background: var(--wui-step-accent, var(--color-success));
+    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.
+    box-shadow: none;
+}
+.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));
+}
+.stepper-icons .step.error .step-circle {
+    background: var(--color-danger-soft);
+    color: var(--color-danger-text);
+}
+.stepper-icons .step.skipped .step-circle {
+    background: var(--color-bg-muted);
+    border: 1px dashed var(--color-border-strong);
+    color: var(--color-text-muted);
+}
+// The "STEP n" eyebrow sits between the badge and the title, colour-matched to the state.
+.stepper-icons .step-index {
+    margin-top: 4px;
+    font-size: 12px;
+    font-weight: 600;
+    line-height: 1.2;
+    text-transform: uppercase;
+    letter-spacing: 0.06em;
+    color: var(--color-text-subtle);
+}
+.stepper-icons .step.active .step-index {
+    color: var(--wui-step-accent, var(--color-success));
+}
+.stepper-icons .step.done .step-index {
+    color: var(--wui-step-soft-fg, var(--color-success-text));
+}
+.stepper-icons .step.error .step-index {
+    color: var(--color-danger-text);
+}
+.stepper-icons .step-label {
+    max-width: 150px;
+    font-size: 15px;
+    font-weight: 600;
+    color: var(--color-text-subtle);
+}
+.stepper-icons .step.active .step-label,
+.stepper-icons .step.done .step-label {
+    color: var(--color-text);
+}
+// The rail: thicker and rounded, recentred on the badge (half the diameter − 2 for the
+// 4px line's own height), and filled with the accent once the step to its left is done.
+.stepper-icons .step + .step::before {
+    top: calc(var(--wui-step-badge-size, 56px) / 2 - 2px);
+    left: calc(-50% + var(--wui-step-badge-size, 56px) / 2 + 8px);
+    right: calc(50% + var(--wui-step-badge-size, 56px) / 2 + 8px);
+    height: 4px;
+    border-radius: 999px;
+    background: var(--wui-step-connector, var(--color-border));
+}
+.stepper-icons .step.done + .step::before {
+    background: var(--wui-step-accent, var(--color-success));
+}
+// The compact hover ring is calibrated to the 28px badge; the 56px icon badge just
+// lifts on hover instead.
+.stepper-icons a.step:hover .step-circle,
+.stepper-icons button.step:hover .step-circle {
+    box-shadow: none;
+    transform: scale(1.04);
+}
+// Below md the six badges no longer fit across, so the icons stepper stacks into a
+// vertical list — the shared .stepper-vertical rules take over from here.
+@include media-breakpoint-down(md) {
+    .stepper-icons.stepper-icons {
+        flex-direction: column;
+        align-items: stretch;
+        gap: 20px;
+    }
+    .stepper-icons.stepper-icons .step {
+        flex-direction: row;
+        align-items: center;
+        gap: 14px;
+        text-align: left;
+    }
+    .stepper-icons.stepper-icons .step + .step::before {
+        content: none;
+    }
+}
+
 @media (prefers-reduced-motion: reduce) {
     a.step:hover .step-circle,
     button.step:hover .step-circle,
-    .stepper-journey .step-circle {
+    .stepper-journey .step-circle,
+    .stepper-icons .step-circle {
         transition: none;
         transform: none;
     }
 }
 
+// Tone presets — flip the whole accent (active fill, done rail, ring, journey/icons
+// done tint) to a semantic ramp in one class. Because custom properties inherit, the
+// class can sit on the stepper itself OR on an ancestor (the wizard host), and an inline
+// `style="--wui-step-accent: …"` on a closer element still wins over it. Placing the
+// class recolours every variant consistently; error steps stay red regardless (semantic).
+// ----------------------------------------------------------------------------
+.wui-step-tone-primary {
+    --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);
+}
+.wui-step-tone-success {
+    --wui-step-accent: var(--color-success);
+    --wui-step-accent-fg: var(--color-on-scrim);
+    --wui-step-soft: var(--color-success-soft);
+    --wui-step-soft-fg: var(--color-success-text);
+}
+.wui-step-tone-warning {
+    --wui-step-accent: var(--color-warning);
+    --wui-step-accent-fg: var(--color-on-scrim);
+    --wui-step-soft: var(--color-warning-soft);
+    --wui-step-soft-fg: var(--color-warning-text);
+}
+.wui-step-tone-danger {
+    --wui-step-accent: var(--color-danger);
+    --wui-step-accent-fg: var(--color-on-scrim);
+    --wui-step-soft: var(--color-danger-soft);
+    --wui-step-soft-fg: var(--color-danger-text);
+}
+.wui-step-tone-info {
+    --wui-step-accent: var(--color-info);
+    --wui-step-accent-fg: var(--color-on-scrim);
+    --wui-step-soft: var(--color-info-soft);
+    --wui-step-soft-fg: var(--color-info-text);
+}
+
 // ============================================================================
 // Pricing card. A tier's name, price, pitch, feature list and CTA.
 //
@@ -616,4 +785,51 @@ button.step:focus-visible .step-circle {
     .form-actions-sticky {
         transition: none;
     }
+}
+
+// ============================================================================
+// AppWizard (<wui-wizard>) — stepper header + one visible step panel + a sticky
+// Back/Skip/Next/Finish footer. Composes .stepper and .form-actions above.
+// ============================================================================
+wui-wizard {
+    display: block;
+}
+// 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.
+wui-wizard-step {
+    display: block;
+}
+wui-wizard-step[hidden] {
+    display: none;
+}
+.wizard-stepper {
+    margin-bottom: 24px;
+}
+// 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 {
+    background: var(--color-bg-muted);
+    border: 1px dashed var(--color-border-strong);
+    color: var(--color-text-muted);
+}
+.wizard-panel {
+    // A resting min-height so the footer doesn't jump as steps of different length
+    // swap in; content taller than this simply grows the panel.
+    min-height: 96px;
+}
+.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.
+    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 {
+    display: flex;
+    align-items: center;
+    gap: 12px;
 }

package/scss/wui/_tone-pill.scss

@@ -0,0 +1,23 @@
+// ── Shared tone-pill color mixin ──
+// Consolidates the tone→color mapping used by .badge, .status-label, and .chip:
+//   background: var(--color-{tone}-soft)
+//   color:      var(--color-{tone}-text)   (override via $text — see below)
+//   border-color: transparent
+//
+// $text exists because the status tones and `primary` name their on-tint color
+// differently: --color-{status}-text IS the on-tint hue, but --color-primary-text
+// is the text-on-SOLID-primary color (near-black in dark mode) and fails AA on the
+// soft tint — primary pills pass var(--color-primary) instead.
+//
+// Component-specific overrides (e.g. .badge-primary's colored border) are applied
+// after the mixin call.
+
+@mixin wui-tone-pill-colors($tone, $text: null) {
+    background: var(--color-#{$tone}-soft);
+    @if $text {
+        color: $text;
+    } @else {
+        color: var(--color-#{$tone}-text);
+    }
+    border-color: transparent;
+}

package/scss/wui/_typography.scss

@@ -121,29 +121,19 @@
 
 /* Tones — tinted surface + on-tint text; icon/remove inherit the tone colour. */
 .chip.primary {
-    border-color: transparent;
-    background: var(--color-primary-soft);
-    color: var(--color-primary);
+    @include wui-tone-pill-colors(primary, var(--color-primary));
 }
 .chip.success {
-    border-color: transparent;
-    background: var(--color-success-soft);
-    color: var(--color-success-text);
+    @include wui-tone-pill-colors(success);
 }
 .chip.warning {
-    border-color: transparent;
-    background: var(--color-warning-soft);
-    color: var(--color-warning-text);
+    @include wui-tone-pill-colors(warning);
 }
 .chip.danger {
-    border-color: transparent;
-    background: var(--color-danger-soft);
-    color: var(--color-danger-text);
+    @include wui-tone-pill-colors(danger);
 }
 .chip.info {
-    border-color: transparent;
-    background: var(--color-info-soft);
-    color: var(--color-info-text);
+    @include wui-tone-pill-colors(info);
 }
 .chip.primary .chip-ic,
 .chip.success .chip-ic,
@@ -238,6 +228,25 @@
     min-width: 0;
     align-items: center;
 }
+// Chips scale with the control size — the taller the field, the larger its tokens
+// (the element always emits `.chip.chip-sm`; these override it per size tier). The
+// two-class `.ms-chips .chip` outranks the single `.chip-sm`, so md is the base and
+// the sm/lg tiers layer over it.
+.ms-chips .chip {
+    gap: 5px;
+    padding: 3px 9px;
+    font-size: 0.8125rem;
+}
+.search-select-sm .ms-chips .chip {
+    gap: 4px;
+    padding: 2px 8px;
+    font-size: 0.75rem;
+}
+.search-select-lg .ms-chips .chip {
+    gap: 6px;
+    padding: 5px 12px;
+    font-size: 0.875rem;
+}
 // Collapse mode (collapse-chips): chips stay on one row; the JS folds the overflow into
 // a "+N" counter (see WuiMultiSelect._collapseChips).
 wui-multiselect[collapse-chips] .ms-chips {
@@ -295,6 +304,27 @@ wui-multiselect[collapse-chips] .ms-chips {
 .ms-input:focus {
     outline: none;
 }
+// AppTagInput lays the input on the LEFT with the chips filling and wrapping to its
+// right (its template renders the input before the chips). Multiselect keeps its
+// chips-first layout, so these overrides are scoped to `wui-taginput`.
+wui-taginput .ms-input {
+    // Don't grow to fill — hold a modest resting width on the left; the chips take
+    // everything to the right. (align-items:center on the control centres the input
+    // against the chip row, so it needs no min-height of its own.)
+    flex: 0 1 auto;
+    flex-basis: 120px;
+    min-width: 96px;
+}
+wui-taginput .ms-chips {
+    flex: 1 1 auto;
+}
+// Match AppInput's per-size heights: the shared `.search-select-multi` floors md at
+// 40px, but AppInput's md is the 44px control-height token — raise the floor so the
+// sm/md/lg progression lines up with a text field beside it. (sm 36 / lg 52 already
+// come from the size-specific `.search-select-{sm,lg} .search-select-control` rules.)
+wui-taginput .search-select-multi {
+    min-height: var(--wui-control-height);
+}
 
 /* ── Choice card: image / custom-template variant ── */
 .struct-card-img-card {

package/scss/wui/_utilities.scss

@@ -73,7 +73,6 @@
     background: transparent;
     color: var(--color-text-subtle);
     cursor: help;
-    transform: scaleY(-1);
     transition: color 0.15s;
 }
 .infotip-btn:hover {
@@ -598,6 +597,35 @@
     color: var(--color-primary);
 }
 
+// AppAlert extras — a leading icon and/or a bold heading line. Bootstrap already
+// styles `.alert`/`.alert-{variant}`; these rules only lay out the icon column and
+// give the plain `.alert-heading` div its type treatment (Bootstrap's own rule is
+// just `color: inherit`, meant for an <h4>).
+.alert-has-icon {
+    display: flex;
+    align-items: flex-start;
+    gap: 12px;
+}
+.alert-icon {
+    flex: none;
+    display: inline-flex;
+    // Nudge onto the first line's optical centre.
+    margin-top: 1px;
+}
+.alert-content {
+    flex: 1;
+    min-width: 0;
+}
+.alert .alert-heading {
+    margin-bottom: 2px;
+    font-size: 1rem;
+    font-weight: 700;
+}
+// The body's trailing paragraph shouldn't add space below the alert.
+.alert .alert-content > :last-child {
+    margin-bottom: 0;
+}
+
 // ============================================================================
 // Inline help glyph — a hint attached to a word rather than to a field label.
 // (For a field label use `.infotip`, which is a real popover button.)