@webority/theme 0.8.0 → 0.8.2

package/package.json

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

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

package/scss/wui/_choice.scss

@@ -894,7 +894,8 @@ button.datepicker-month:hover {
     border: 1px solid var(--color-border);
     border-radius: var(--radius);
     corner-shape: squircle;
-    background: var(--color-surface);
+    // Match AppInput exactly: muted resting fill that lifts to a clean surface on focus.
+    background: var(--color-bg-muted);
     // 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.
@@ -907,10 +908,10 @@ button.datepicker-month:hover {
     background: var(--color-bg-muted);
     border-color: var(--color-border-strong);
 }
-// Match AppInput's focus: a soft primary border, not a full-strength one.
+// Match AppInput's focus: clean surface fill + a soft primary border.
 .app-phone-number-input .phone-input-wrap:focus-within {
-    background: var(--color-bg-muted);
-    border-color: color-mix(in srgb, var(--color-primary) 30%, transparent);
+    background: var(--color-surface);
+    border-color: var(--wui-primary-30);
 }
 .app-phone-number-input .phone-input-wrap:has(> .input:disabled) {
     background: var(--color-bg-muted);
@@ -998,6 +999,20 @@ button.datepicker-month:hover {
     font-weight: 500;
     color: var(--color-text);
 }
+// Country-adornment toggles (AppPhoneNumberInput showFlag / showDialCode). Driven
+// by a host attribute so it survives <wui-phone>'s innerHTML re-renders; the flex
+// gap collapses on its own, leaving no gap where a hidden glyph sat.
+.app-phone-number-input wui-phone[hide-flag] [data-flag] {
+    display: none;
+}
+.app-phone-number-input wui-phone[hide-dial] [data-dial] {
+    display: none;
+}
+// Both hidden → the country toggle is just the chevron; drop its leading pad so
+// the number sits flush like a plain input's.
+.app-phone-number-input wui-phone[hide-flag][hide-dial] .phone-country-adornment {
+    padding-left: 10px;
+}
 
 // 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.

package/scss/wui/_controls.scss

@@ -999,7 +999,8 @@ wui-select[compact] {
     border: 1px solid var(--color-border);
     border-radius: var(--radius-lg);
     corner-shape: squircle;
-    background: var(--color-surface);
+    // Match AppInput exactly: muted resting fill that lifts to a clean surface on focus.
+    background: var(--color-bg-muted);
     transition:
         border-color 0.12s,
         background-color 0.12s;
@@ -1010,8 +1011,8 @@ wui-select[compact] {
     border-color: var(--color-border-strong);
 }
 .num-wrap:focus-within {
-    background: var(--color-bg-muted);
-    border-color: color-mix(in srgb, var(--color-primary) 30%, transparent);
+    background: var(--color-surface);
+    border-color: var(--wui-primary-30);
 }
 .num-wrap:has(.num-input.error) {
     border-color: var(--color-danger);
@@ -1019,25 +1020,34 @@ wui-select[compact] {
 
 // Numeric input inside the stepper — plain text field, no native spinner.
 // Flows seamlessly between the stepper buttons; the wrapper carries the border.
+// The value reads as the segmented centre cell — centred + semibold like the
+// reference: minus | value | plus, three even cells divided by the button borders.
 .num-wrap .num-input {
     flex: 1;
     border: none;
     border-radius: 0;
     background: transparent;
     min-width: 0;
+    text-align: center;
+    font-weight: 600;
+    color: var(--color-text);
 }
 .num-wrap .num-input:focus {
     box-shadow: none;
 }
 
 // Stepper buttons — decrease/increase the value by step.
-// Positioned left and right of the input, disabled at min/max or when the
-// control is disabled.
+// Positioned left (minus, :first-child) and right (plus, :last-child) of the
+// input; disabled at min/max or when the control is disabled. Each carries the
+// divider on its input-facing edge so the value sits in its own segment.
 .num-btn {
     display: grid;
     place-items: center;
-    width: 40px;
-    height: 100%;
+    width: 44px;
+    // Fill the field height and centre the glyph. `height: 100%` resolved to auto
+    // against the wrap's content-based height and left the button icon-tall, pinned
+    // to the top; align-self:stretch fills the full field so place-items centres it.
+    align-self: stretch;
     border: none;
     background: transparent;
     padding: 0;
@@ -1064,10 +1074,32 @@ wui-select[compact] {
     cursor: not-allowed;
     opacity: 0.5;
 }
-.num-btn:not(:first-child) {
+// Segment dividers: minus divides on its right, plus on its left — so the value
+// cell is bounded on both sides. (DOM order is minus, input, [unit], plus on both
+// surfaces, so :first-child / :last-child land on the two buttons.)
+.num-btn:first-child {
+    border-right: 1px solid var(--color-border);
+}
+.num-btn:last-child {
     border-left: 1px solid var(--color-border);
 }
 
+// ── 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 .num-btn {
+    width: 36px;
+}
+.num-wrap-sm .num-input {
+    font-size: 13px;
+}
+.num-wrap-lg .num-btn {
+    width: 52px;
+}
+.num-wrap-lg .num-input {
+    font-size: 16px;
+}
+
 // Affix (unit) in the num-wrap — a trailing pill after the input.
 .num-wrap .affix {
     background: var(--color-bg-muted);

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);
@@ -64,7 +63,9 @@
 }
 .kpi-value {
     margin-top: 6px;
-    font-size: 28px;
+    // 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);
     font-weight: 700;
     // Large numerals need negative tracking to stop reading as separate digits;
     // tabular figures stop a live-updating value from shifting width.
@@ -119,52 +120,109 @@
     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);
 }
 
+// Compact size — dense dashboards and tight cards. Shrinks the value + chrome.
+.kpi.kpi-sm {
+    padding: 12px 14px;
+    --wui-kpi-value-size: 22px;
+}
+.kpi.kpi-sm .kpi-label {
+    font-size: 12px;
+}
+.kpi.kpi-sm .kpi-icon {
+    width: 32px;
+    height: 32px;
+    margin-bottom: 8px;
+}
+
 // Hero size — the single headline stat above a dashboard. Enlarges the value and its
 // chrome; orthogonal to variant/inline/attention, so it composes with all of them.
 .kpi.kpi-lg {
     padding: 20px;
+    --wui-kpi-value-size: 40px;
 }
 .kpi.kpi-lg .kpi-label {
     font-size: 14px;
 }
-.kpi.kpi-lg .kpi-value {
-    font-size: 40px;
-}
 .kpi.kpi-lg .kpi-icon {
     width: 44px;
     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;
+    --wui-kpi-value-size: 44px;
+}
+.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.
+    // Size comes from --wui-kpi-value-size (44px default, set on the spotlight root above), so a
+    // custom `valueSize` (px) can tame a too-large headline.
+    font-family: Georgia, 'Times New Roman', 'Noto Serif', serif;
+    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 +624,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 +636,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 +655,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 +720,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/_flow.scss

@@ -830,16 +830,24 @@ wui-wizard-step[hidden] {
     // 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;
+    // A rounded squircle card around the step content. The surface (border + fill +
+    // padding) is what makes the radius visible — a radius on a border/background-less
+    // box shows nothing.
+    padding: 20px 24px;
+    border: 1px solid var(--color-border);
+    border-radius: 22px;
+    corner-shape: squircle;
+    background: var(--color-surface);
 }
 .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. Runs flush on
-    // the flow (no divider or fill) — the buttons alone read as the footer.
-    position: sticky;
-    bottom: 0;
+    // The Back/Skip/Next/Finish bar sits at the END of the wizard content — NOT
+    // viewport-pinned. A transparent sticky bar (the old behaviour) pinned to the
+    // viewport bottom collided with a page/app footer below the wizard, burying the
+    // buttons behind it. Inline keeps them in the flow, always clear of a page footer.
+    // (For a wizard inside its OWN fixed-height scroll panel, a product can opt back
+    // into sticky on its container.)
     margin-top: 24px;
     padding: 16px 0;
-    z-index: 1;
 }
 .wizard-footer-actions {
     display: flex;

package/scss/wui/_media.scss

@@ -527,16 +527,23 @@
     border-radius: var(--radius-lg);
     corner-shape: squircle;
     border: 1px solid var(--color-border);
-    background: var(--color-surface);
+    // Match AppInput: muted resting fill, lifts to a clean surface on focus.
+    background: var(--color-bg-muted);
     overflow: hidden;
     cursor: pointer;
     transition:
         border-color 0.12s,
         box-shadow 0.12s;
 }
-.file-input:hover {
+.file-input:hover:not(:focus-within) {
+    background: var(--color-bg-muted);
     border-color: var(--color-border-strong);
 }
+.file-input:focus-within {
+    background: var(--color-surface);
+    border-color: var(--wui-primary-30);
+    box-shadow: none;
+}
 .file-input-btn {
     display: inline-flex;
     align-items: center;
@@ -579,21 +586,25 @@
     width: 100%;
     padding: 20px;
     text-align: center;
-    background: var(--color-bg-subtle);
-    border: 1px dashed var(--color-border-strong);
+    // Match AppInput: muted resting fill + resting border (dashed kept as the dropzone
+    // affordance), border-strong on hover, primary border + surface lift on focus/drag.
+    background: var(--color-bg-muted);
+    border: 1px dashed var(--color-border);
     transition:
         border-color 0.15s ease,
         background-color 0.15s ease;
 }
-// Hover, focus and drag-over all take the same soft primary-30% border AppInput shows on
-// focus — a clear hue shift from the resting grey dashed border, without the loud full
-// --color-primary the dropzone used before.
-.file-input.file-input-tall:hover,
+// Hover mirrors AppInput hover — border-strong, fill unchanged.
+.file-input.file-input-tall:hover:not(:focus-within):not(.dragging) {
+    border-color: var(--color-border-strong);
+    background: var(--color-bg-muted);
+}
+// Focus and drag-over mirror AppInput focus — soft primary border, lift onto a clean surface.
 .file-input.file-input-tall:focus-within,
 .file-input.file-input-tall:active,
 .file-input.file-input-tall.dragging {
-    border-color: color-mix(in srgb, var(--color-primary) 30%, transparent);
-    background: var(--color-bg-muted);
+    border-color: var(--wui-primary-30);
+    background: var(--color-surface);
     box-shadow: none;
 }
 // A rejected file (wrong type / too large) turns the dropzone border danger to match the
@@ -639,11 +650,11 @@
 .file-input.file-input-tall.has-files:hover,
 .file-input.file-input-tall.has-files:focus-within {
     border-color: var(--color-border-strong);
-    background: var(--color-bg-subtle);
+    background: var(--color-bg-muted);
 }
 .file-input.file-input-tall.has-files.dragging {
-    border-color: color-mix(in srgb, var(--color-primary) 30%, transparent);
-    background: var(--color-bg-muted);
+    border-color: var(--wui-primary-30);
+    background: var(--color-surface);
 }
 // Width presets — put a .file-w-* class on the field (React className / Razor class) to cap the
 // dropzone to a fixed width instead of the full column. Mirror of the datepicker .date-w-* set.

package/scss/wui/_overlays.scss

@@ -15,8 +15,15 @@
 // Do NOT put layout on backdropClassName — that targets a sibling, not
 // .modal.
 .modal-backdrop.wui-modal-dim {
-    background: var(--color-scrim);
+    // Frost the page behind the dialog — the blur is the star, so the dim is kept
+    // SOFT (a heavy scrim would flatten the blur into a muddy grey). A lighter dim
+    // over a strong blur reads as clean frosted glass; the modal is still clearly
+    // the one live surface. The dialog sits in `.modal` (a higher z-index sibling),
+    // so it is never blurred.
+    background: color-mix(in srgb, var(--color-scrim) 55%, transparent);
     z-index: var(--wui-z-modal-backdrop);
+    backdrop-filter: blur(12px);
+    -webkit-backdrop-filter: blur(12px);
 }
 .modal.wui-modal-shell {
     --bs-modal-bg: transparent;

package/scss/wui/_typography.scss

@@ -68,8 +68,17 @@
 }
 .chip-ic {
     display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    line-height: 0;
     color: var(--color-text-subtle);
 }
+// Bootstrap Icons carry a -.125em baseline nudge meant for inline-with-text use;
+// inside the chip's flex row it just drops the glyph below the label's centre.
+// Reset it so a library-icon leading glyph lines up with the label.
+.chip-ic .bi::before {
+    vertical-align: middle;
+}
 .chip-avatar {
     display: inline-flex;
     width: 18px;