@webority/theme 0.68.3 → 0.70.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webority/theme",
-  "version": "0.68.3",
+  "version": "0.70.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": {
@@ -28,9 +28,13 @@
     "./css": "./dist/webority-theme.css",
     "./css/flags": "./dist/webority-flags.css",
     "./css/brand-signal": "./dist/webority-brand-signal.css",
+    "./css/runtime-brand": "./dist/webority-runtime-brand.css",
     "./purge-safelist.json": "./dist/purge-safelist.json",
     "./package.json": "./package.json"
   },
+  "bin": {
+    "webority-theme-export": "./dist/webority-theme-export.mjs"
+  },
   "sass": "index.scss",
   "style": "dist/webority-theme.css",
   "peerDependencies": {
@@ -39,9 +43,10 @@
   "devDependencies": {
     "bootstrap": "5.3.3",
     "country-flag-icons": "^1.6.20",
-    "sass-embedded": "^1.97.0"
+    "sass-embedded": "^1.97.0",
+    "vite": "^8.0.12"
   },
   "scripts": {
-    "build": "sass index.scss dist/webority-theme.css --load-path=node_modules --style=compressed --no-source-map --quiet-deps --silence-deprecation=if-function && sass scss/_flags.scss dist/webority-flags.css --style=compressed --no-source-map --quiet && sass scss/_brand-signal.scss dist/webority-brand-signal.css --style=compressed --no-source-map --quiet && node ../../scripts/gen-purge-safelist.mjs && node ../../scripts/sync-rcl-assets.mjs theme"
+    "build": "sass index.scss dist/webority-theme.css --load-path=node_modules --style=compressed --no-source-map --quiet-deps --silence-deprecation=if-function && sass scss/_flags.scss dist/webority-flags.css --style=compressed --no-source-map --quiet && sass scss/_brand-signal.scss dist/webority-brand-signal.css --style=compressed --no-source-map --quiet && sass scss/_runtime-brand.scss dist/webority-runtime-brand.css --style=compressed --no-source-map --quiet && node ../../scripts/gen-purge-safelist.mjs && node ../../scripts/sync-rcl-assets.mjs theme && vite build --config vite.cli.config.js"
   }
 }

package/scss/_components.scss

@@ -6,15 +6,14 @@
 // ---- Button polish (used by both Razor + React) ---------------------
 // Flat buttons — no drop shadow. Active-press feedback (1px nudge) is
 // retained because it's a tactile signal, not a depth cue.
-// Button heights are fixed to the design reference — large 55px, medium 45px,
-// small 35px — via min-height, with the label flex-centred. (These are button-
-// specific and intentionally a touch taller than the shared --wui-control-height
-// input ladder; sm/lg pin their own height in their size blocks below.)
+// A button is exactly as tall as a field of the same size (the --wui-control-height ladder, 36/44/52px), so a
+// button beside an input lines up in every form row. Heights are min-height with the label flex-centred; sm/lg
+// set theirs in their size blocks below.
 .btn:not(.btn-sm):not(.btn-lg):not(.btn-pill):not(.btn-pill-sm):not(.u-action):not(.btn-icon) {
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    min-height: 45px;
+    min-height: var(--wui-control-height);
 }
 
 // Tactile press feedback — every variant AND every size (sm/md/lg). Kept
@@ -266,7 +265,7 @@
 // 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): 14px / 600, 24px side padding, 18px squircle radius, 45px tall.
+// Medium (default): 14px / 600, 24px side padding, 18px squircle radius, --wui-control-height tall.
 .btn {
     --bs-btn-border-radius: 18px;
     --bs-btn-font-size: 0.875rem;
@@ -276,7 +275,7 @@
     // keep a plain border-radius arc — not a cross-browser design contract.
     corner-shape: squircle;
 }
-// Small: 12px, 18px side padding, 14px squircle radius (proportional to md), 35px tall.
+// Small: 12px, 18px side padding, 14px squircle radius (proportional to md), as tall as a small field.
 .btn-sm:not(.btn-icon),
 .btn-group-sm > .btn:not(.btn-icon) {
     --bs-btn-border-radius: 14px;
@@ -285,9 +284,9 @@
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    min-height: 35px;
+    min-height: var(--wui-control-height-sm);
 }
-// Large: 16px, 32px side padding, 22px squircle radius (proportional to md), 55px tall — a spacious CTA.
+// Large: 16px, 32px side padding, 22px squircle radius (proportional to md), as tall as a large field.
 .btn-lg:not(.btn-icon),
 .btn-group-lg > .btn:not(.btn-icon) {
     --bs-btn-border-radius: 22px;
@@ -296,7 +295,7 @@
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    min-height: 55px;
+    min-height: var(--wui-control-height-lg);
 }
 
 // ---- Hover animation options (opt-in modifiers) ---------------------
@@ -544,9 +543,9 @@
 }
 
 // ---- Ghost button: the tertiary action --------------------------------
-// Brand-coloured, underlined text with no box in any state. It has no visible container,
-// so nothing may draw one: no hover fill, no sheen sweep, no lift or press nudge, and no
-// grey box when disabled or loading. Hover darkens the colour and thickens the underline.
+// Brand-coloured text with no box at rest and no underline. Hover lays a light grey fill behind
+// it, pressing deepens that fill a step, and keyboard focus draws the shared ring. No sheen sweep,
+// no lift or press nudge, and no grey box when disabled or loading.
 // AppButton's `ghost` variant emits this class on both surfaces.
 //
 // No .btn-ghost-sm/-lg rungs: it is an ordinary .btn variant and sizes with Bootstrap's
@@ -555,32 +554,24 @@
     --bs-btn-color: var(--color-primary-ink);
     --bs-btn-bg: transparent;
     --bs-btn-border-color: transparent;
-    --bs-btn-hover-color: color-mix(in srgb, var(--color-primary-ink) 80%, var(--color-text));
-    --bs-btn-hover-bg: transparent;
+    --bs-btn-hover-color: var(--color-primary-ink);
+    --bs-btn-hover-bg: var(--color-bg-muted);
     --bs-btn-hover-border-color: transparent;
-    --bs-btn-active-color: color-mix(in srgb, var(--color-primary-ink) 70%, var(--color-text));
-    --bs-btn-active-bg: transparent;
+    --bs-btn-active-color: var(--color-primary-ink);
+    --bs-btn-active-bg: color-mix(in srgb, var(--color-bg-muted) 92%, var(--color-text));
     --bs-btn-active-border-color: transparent;
     --bs-btn-disabled-color: var(--color-primary-ink);
     --bs-btn-disabled-bg: transparent;
     --bs-btn-disabled-border-color: transparent;
-    text-decoration: underline;
-    text-decoration-thickness: 1px;
-    text-underline-offset: 3px;
 }
-// Bootstrap's `.btn:hover` drops the underline (from $link-hover-decoration), so restate it
-// with more specificity on every interactive state.
+// Bootstrap's link-style buttons can carry an underline; the ghost never does.
+.btn.btn-ghost,
 .btn.btn-ghost:hover,
 .btn.btn-ghost:active,
 .btn.btn-ghost:focus-visible {
-    text-decoration: underline;
-    text-decoration-thickness: 1px;
+    text-decoration: none;
 }
-.btn.btn-ghost:hover:not(:disabled),
-.btn.btn-ghost:active:not(:disabled) {
-    text-decoration-thickness: 2px;
-}
-// No box to light up, so keyboard focus gets the outline ring instead.
+// No fill at rest, so keyboard focus gets the outline ring instead.
 .btn.btn-ghost:focus-visible {
     outline: var(--wui-focus-ring-width) solid var(--color-focus-ring);
     outline-offset: var(--wui-focus-ring-offset);
@@ -634,6 +625,41 @@
     margin-left: auto;
 }
 
+// Close button (React `onClose` / Razor `dismissible`): the last control in the header, pushed
+// to the end, or just after the header actions when there are some.
+.card-header:has(.card-close) {
+    display: flex;
+    align-items: center;
+}
+.card-close {
+    display: inline-grid;
+    flex-shrink: 0;
+    place-items: center;
+    width: 32px;
+    height: 32px;
+    margin: -6px -6px -6px auto;
+    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;
+}
+.card-header-actions + .card-close {
+    margin-left: 0.25rem;
+}
+.card-close:hover {
+    background: var(--color-bg-muted);
+    color: var(--color-text);
+}
+.card-close:focus-visible {
+    outline: var(--wui-focus-ring-width) solid var(--color-focus-ring);
+    outline-offset: var(--wui-focus-ring-offset);
+}
+
 // ---- Inputs ---------------------------------------------------------
 // Field chrome (height, hover, focus, invalid) lives in wui/_controls.scss on
 // `.form-control` / `.form-select` with `.input` as an alias — one skin, not two

package/scss/_runtime-brand.scss

@@ -0,0 +1,83 @@
+// Runtime brand: an opt-in layer that lets a product's exported token file (webority-theme-export,
+// format webority-theme-tokens/1) restyle the precompiled theme without recompiling it.
+//
+// Loaded AFTER webority-theme.css and BEFORE the token file's values. It holds no colour of its own.
+// Bootstrap compiles $primary into a few component rules as literals; this layer re-points each of
+// them at --bs-primary / --bs-primary-rgb, which the token file sets on :root. Every other brand
+// value (--wui-*, links, fonts, the Bootstrap subtle and emphasis colours, dark mode) is already a
+// custom property on :root and arrives with the token file unchanged.
+//
+// Each tint below is the colour-mix equivalent of the Bootstrap function that made the literal
+// (tint-color = mix with white, shade-color = mix with black), so a product's own primary renders
+// the same through this layer as through its compiled build. The compiled values are the same in
+// light and dark, so there is no dark block.
+
+.btn-primary {
+    --bs-btn-bg: var(--bs-primary);
+    --bs-btn-border-color: var(--bs-primary);
+    --bs-btn-disabled-bg: var(--bs-primary);
+    --bs-btn-disabled-border-color: var(--bs-primary);
+    // Bootstrap mixes 15% white into this triplet; a triplet cannot be mixed at runtime.
+    --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);
+}
+
+.btn-outline-primary {
+    --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);
+}
+
+.nav-pills {
+    --bs-nav-pills-link-active-bg: var(--bs-primary);
+}
+
+.pagination {
+    --bs-pagination-active-bg: var(--bs-primary);
+    --bs-pagination-active-border-color: var(--bs-primary);
+}
+
+.list-group {
+    --bs-list-group-active-bg: var(--bs-primary);
+    --bs-list-group-active-border-color: var(--bs-primary);
+}
+
+.progress,
+.progress-stacked {
+    --bs-progress-bar-bg: var(--bs-primary);
+}
+
+// Mouse focus only: the theme paints keyboard focus and checked boxes from --color-primary already,
+// and a plain :focus rule here would win over both by source order.
+.form-check-input:focus:not(:focus-visible):not(:checked):not([type="checkbox"]:indeterminate) {
+    border-color: color-mix(in srgb, var(--bs-primary) 50%, #fff);
+}
+
+.form-range::-webkit-slider-thumb {
+    background-color: var(--bs-primary);
+}
+
+.form-range::-webkit-slider-thumb:active {
+    background-color: color-mix(in srgb, var(--bs-primary) 30%, #fff);
+}
+
+.form-range::-moz-range-thumb {
+    background-color: var(--bs-primary);
+}
+
+.form-range::-moz-range-thumb:active {
+    background-color: color-mix(in srgb, var(--bs-primary) 30%, #fff);
+}
+
+.link-primary:hover,
+.link-primary:focus {
+    color: color-mix(in srgb, color-mix(in srgb, var(--bs-primary) 80%, #000) calc(var(--bs-link-opacity, 1) * 100%), transparent) !important;
+    text-decoration-color: color-mix(in srgb, color-mix(in srgb, var(--bs-primary) 80%, #000) calc(var(--bs-link-underline-opacity, 1) * 100%), transparent) !important;
+}
+
+// Bootstrap's table-variant mixin: the cell colour is black, and each state mixes it into the tint.
+.table-primary {
+    --wui-table-primary-bg: color-mix(in srgb, var(--bs-primary) 20%, #fff);
+    --bs-table-bg: var(--wui-table-primary-bg);
+    --bs-table-border-color: color-mix(in srgb, #000 20%, var(--wui-table-primary-bg));
+    --bs-table-striped-bg: color-mix(in srgb, #000 5%, var(--wui-table-primary-bg));
+    --bs-table-active-bg: color-mix(in srgb, #000 10%, var(--wui-table-primary-bg));
+    --bs-table-hover-bg: color-mix(in srgb, #000 7.5%, var(--wui-table-primary-bg));
+}

package/scss/_tokens.scss

@@ -41,12 +41,11 @@
     // combobox/phone/date/number wrappers) — a touch lighter than --wui-bg-muted so fields read
     // as their own surface. Change here to restyle every field's background at once.
     --wui-field-bg: #F9FBFC;
-    // Resting and hover border of every input-like control. They clear WCAG 1.4.11's 3:1
-    // against the field fill and the surface, so a field's edge is visible without focus.
-    // Both sit just above the floor (3.11:1 and 3.63:1 on the fill) so the edge stays light;
-    // check-contrast fails if either drops under it.
-    --wui-field-border: #888FA4;
-    --wui-field-border-hover: #7C839A;
+    // Resting and hover border of every input-like control: a soft edge a step darker than
+    // --wui-border-light, and the --wui-text-5 hover. They sit under WCAG 1.4.11's 3:1 by
+    // design choice; check-contrast reports them as FAIL without failing the gate.
+    --wui-field-border: #DFE2EA;
+    --wui-field-border-hover: #C4CADA;
     --wui-border-light: #EBEDF3;
     --wui-border-soft: #F4F6F8;
     // The unfilled part of a progress bar / meter. Darker than every surface it can sit on
@@ -266,9 +265,9 @@
     --wui-dark-bg-surface: #181b23;
     --wui-dark-border: #2a2f3a;
     --wui-dark-border-strong:#3a414f;
-    // Field borders on the dark fills: 3:1 or better against the dark field fill and surface.
-    --wui-dark-field-border: #6E7586;
-    --wui-dark-field-border-hover: #8a90a0;
+    // Field borders on the dark fills: the dark border and strong border values.
+    --wui-dark-field-border: #2a2f3a;
+    --wui-dark-field-border-hover: #3a414f;
     // Lighter than the dark page, surface and muted fill, so the empty track shows on all three.
     --wui-dark-progress-track: #323845;
     --wui-dark-text: #e6e8ee;

package/scss/_wui-aliases.scss

@@ -18,7 +18,7 @@
   --color-border: var(--wui-border-light);
   --color-border-light: var(--wui-border-soft);
   --color-border-strong: var(--wui-text-5);
-  // The resting and hover border of an input-like control (3:1 against the field and surface).
+  // The resting and hover border of an input-like control.
   // Decorative card and table borders stay on --color-border.
   --color-field-border: var(--wui-field-border);
   --color-field-border-hover: var(--wui-field-border-hover);
@@ -40,9 +40,8 @@
   // A dark-ink glyph such as Bootstrap's .btn-close needs no filter on a light surface.
   --color-close-filter: none;
   // The border of a focused / open / active control (input, select, OTP slot, dropzone).
-  // It is the only focus cue on a field, so it must clear 3:1 against the field and surface
-  // (WCAG 1.4.11): the full primary, not a tint.
-  --color-focus-border: var(--wui-primary);
+  // The soft primary tint, matching the soft resting border.
+  --color-focus-border: var(--wui-primary-30);
   // The keyboard focus ring every control draws on :focus-visible: an outline of this colour,
   // width and offset. The primary ink clears 4.5:1 on every light surface and the dark primary
   // on every dark one, so the ring keeps 3:1 whatever the brand. A coloured surface (a scrim, a

package/scss/wui/_choice.scss

@@ -253,15 +253,22 @@
     background: var(--color-surface);
     border-color: var(--color-focus-border);
 }
+// Closed again (a value picked, Escape), focus stays on the trigger: it returns to the resting
+// fill and border, as the date picker does. Only the open list shows the focus border; keyboard
+// focus still draws the ring below.
+.search-select-control:focus:not(.open):not([aria-invalid="true"]):not(.error):not(.is-invalid) {
+    background: var(--color-field-bg);
+    border-color: var(--color-field-border);
+}
 // Keyboard focus draws a ring, not just the 1px border change: a control that only recolours its
 // border fails WCAG 2.4.7 / 2.4.11. A single-select button and a multi-select div hold focus
 // themselves; the typing variants (autocomplete, tag input, allow-custom multi-select) keep it on
-// an inner input, so the ring follows `:has(:focus-visible)`. --color-focus-border is the
-// token documented to clear 3:1 in both themes.
+// an inner input, so the ring follows `:has(:focus-visible)`. It uses the shared keyboard ring
+// colour, not the soft field focus border, so it clears 3:1 in both themes.
 .search-select-control:focus-visible,
 .search-select-control:has(> .search-select-input:focus-visible),
 .search-select-control:has(.ms-input:focus-visible) {
-    outline: 2px solid var(--color-focus-border);
+    outline: 2px solid var(--color-focus-ring);
     outline-offset: 2px;
 }
 .search-select-caret {
@@ -508,10 +515,14 @@
         background 0.12s ease,
         color 0.12s ease;
 }
+// The row under the pointer or the keyboard: a light tint and a light 1px edge, softer than the
+// selected row's fill so the two stay apart.
 .search-select-option:hover,
 .search-select-option.is-active {
-    background: var(--color-primary-soft);
+    background: color-mix(in srgb, var(--color-primary-soft) 55%, transparent);
     color: var(--color-primary-ink);
+    outline: 1px solid var(--color-focus-border);
+    outline-offset: -1px;
 }
 .search-select-option.selected {
     background: var(--color-primary-soft);

package/scss/wui/_controls.scss

@@ -470,10 +470,7 @@ textarea.form-control.autosize {
 .input[readonly],
 .select[readonly],
 .textarea[readonly] {
-    // The light decorative border and the muted fill, never the field border, so a read-only
-    // value never looks typeable.
-    background: var(--color-bg-muted);
-    border-color: var(--color-border);
+    background: var(--color-bg-subtle);
     color: var(--color-text-muted);
     cursor: default;
 }
@@ -689,24 +686,57 @@ $wui-field-error-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/
 }
 
 // Leading-icon input — icon turns brand on focus.
+// The leading icon sits centred in a fixed slot, a grey divider closes the slot, and the text
+// starts a gap after it. Slot, glyph and gap scale with the field size, so every icon in a
+// field of one size lands in the same place.
 .input-icon {
+    --wui-input-icon-slot: 40px;
+    --wui-input-icon-size: 16px;
+    --wui-input-icon-gap: 12px;
     position: relative;
     display: flex;
     align-items: center;
     width: 100%;
 }
+.input-icon:has(> .input-sm) {
+    --wui-input-icon-slot: 34px;
+    --wui-input-icon-size: 14px;
+    --wui-input-icon-gap: 10px;
+}
+.input-icon:has(> .input-lg) {
+    --wui-input-icon-slot: 48px;
+    --wui-input-icon-size: 18px;
+    --wui-input-icon-gap: 14px;
+}
 .input-icon > .ic {
     position: absolute;
-    left: 13px;
-    top: 50%;
-    transform: translateY(-50%);
+    left: 0;
+    top: 0;
+    bottom: 0;
+    width: var(--wui-input-icon-slot);
     display: grid;
     place-items: center;
     color: var(--color-text-subtle);
     pointer-events: none;
 }
+.input-icon > .ic > :is(svg, img) {
+    width: var(--wui-input-icon-size);
+    height: var(--wui-input-icon-size);
+}
+// The divider runs the full height between the field's top and bottom border, in the field
+// border colour.
+.input-icon::after {
+    content: "";
+    position: absolute;
+    left: var(--wui-input-icon-slot);
+    top: 1px;
+    bottom: 1px;
+    width: 1px;
+    background: var(--color-field-border);
+    pointer-events: none;
+}
 .input-icon .input {
-    padding-left: 40px;
+    padding-left: calc(var(--wui-input-icon-slot) + var(--wui-input-icon-gap));
 }
 .input-icon:focus-within > .ic {
     color: var(--color-primary-ink);
@@ -943,11 +973,10 @@ $wui-field-error-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/
     top: 0;
     transform: translateY(-50%) scale(0.86);
 }
-.field-float:has(.search-select-control:focus) .float-label,
 .field-float:has(.search-select-control.open) .float-label {
     color: var(--color-primary-ink);
-    // The control turns white while focused/open, so the label mask follows (a filled-but-closed
-    // select keeps the default muted mask, matching its muted resting fill).
+    // The control turns white while open, so the label mask follows (a closed select keeps the
+    // default muted mask, matching its muted resting fill, even while it holds focus).
     background: var(--color-surface);
 }
 
@@ -1014,6 +1043,12 @@ $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,
+.field > wui-mention-input {
+    align-self: stretch;
+    width: 100%;
+}
 .field > .label,
 .field label {
     margin-bottom: 0;

package/scss/wui/_data.scss

@@ -135,6 +135,10 @@
     width: 100%;
     // `.tbl-empty` / `.tbl-empty-plain` inside own the centring and padding.
 }
+// An empty list shows its empty state with no column headers above it.
+.table-wrap:has(> .tbl-empty-block:not([hidden])) > .table-ledger > thead {
+    display: none;
+}
 
 // ── Table (base) ──
 // The shared data-table look, on the plain `.table` class Bootstrap already
@@ -292,9 +296,9 @@
     // block above) — if it ever needs viewport-relative sizing again, do it without turning
     // the scroll container into a query container.
 }
-// Flush: no inset above the column header row, so the header sits at the top of the wrap.
+// Flush: the table sits on the content edge on every side, with no inset.
 .table-wrap.wui-table-flush:has(> .table-ledger) {
-    padding-top: 0;
+    padding: 0;
 }
 .table-ledger {
     border-spacing: 0;
@@ -1002,6 +1006,14 @@
     .table-wrap:has(> .table-ledger.wui-table-stack) .table-ledger thead th {
         position: static;
     }
+    .table-wrap:has(> .table-ledger.wui-table-stack) {
+        overflow-x: clip;
+    }
+    .table-ledger.wui-table-stack > tbody > tr > td {
+        min-width: 0;
+        max-width: 100%;
+        overflow-wrap: anywhere;
+    }
     .table-ledger.wui-table-stack,
     .table-ledger.wui-table-stack > tbody,
     .table-ledger.wui-table-stack > tfoot,

package/scss/wui/_display.scss

@@ -1317,7 +1317,7 @@ a.info-row:hover .info-value {
     background: currentColor;
     transform: scaleX(0);
     transform-origin: left center;
-    transition: transform 0.28s var(--wui-ease-out-quart);
+    transition: transform 0.5s var(--wui-ease-out-quart);
 }
 .wui-link--underline-center .wui-link__label::after {
     transform-origin: center;
@@ -1417,7 +1417,7 @@ a.info-row:hover .info-value {
 }
 .wui-link--static:hover .wui-link__label::after,
 .wui-link--static:focus-visible .wui-link__label::after {
-    animation: wui-link-underline-slide 0.32s var(--wui-ease-out-quart);
+    animation: wui-link-underline-slide 0.5s var(--wui-ease-out-quart);
 }
 @keyframes wui-link-underline-slide {
     from {

package/scss/wui/_filter-popover.scss

@@ -1,7 +1,7 @@
 // The floating filter panel: <wui-filter-popover> with its Filters button, drawn by AppFilterBar
 // `floating` and <app-filter-bar floating>. The element places the panel (anchorOverlay, fixed), so
-// this partial only draws it: a 600 px panel of facets in two columns, and a foot with the Keep open
-// switch and Clear all.
+// this partial only draws it: a 600 px panel with a head (title and the Keep open switch), facets in
+// two columns, and a foot (the note and Clear all).
 
 .wui-filter-popover {
     display: inline-block;
@@ -29,6 +29,29 @@
     display: none;
 }
 
+.wui-filter-popover-head {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 0.75rem;
+}
+
+.wui-filter-popover-title {
+    font-weight: 600;
+}
+
+.wui-filter-popover-field {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+    min-width: 0;
+}
+
+.wui-filter-popover-note {
+    font-size: 13px;
+    color: var(--color-text-muted);
+}
+
 .wui-filter-popover-grid {
     display: grid;
     grid-template-columns: repeat(2, minmax(0, 1fr));
@@ -53,10 +76,6 @@
     border-top: 1px solid var(--color-border);
 }
 
-.wui-filter-popover-count {
-    font-weight: 600;
-}
-
 .wui-filter-popover-more {
     white-space: nowrap;
     cursor: default;

package/scss/wui/_flow.scss

@@ -1027,6 +1027,10 @@ button.step.done:focus-visible .step-circle {
     border-top: 1px solid var(--color-border);
     background: var(--color-surface);
 }
+// Below md the phone tab bar is fixed at the bottom, so sticky form actions sit on top of it.
+@media (max-width: 767.98px) {
+    .app-shell:has(> .wui-tabbar) .form-actions-sticky { bottom: calc(var(--wui-tabbar-h) + env(safe-area-inset-bottom)); z-index: calc(var(--wui-z-fixed) + 1); }
+}
 @media (prefers-reduced-motion: reduce) {
     .form-actions-sticky {
         transition: none;

package/scss/wui/_interaction.scss

@@ -11,7 +11,7 @@
 // ---- Default ring -----------------------------------------------------------
 // Anything focusable that no partial styles gets the shared ring instead of the browser's.
 // Zero specificity, so every component rule (including a panel's deliberate `outline: none`)
-// still wins. Text fields are left out: they get the field edge below.
+// still wins. Text fields are left out: their focus cue is their own soft border.
 :where(
     a[href],
     area[href],
@@ -90,53 +90,23 @@ html:has(.form-actions-sticky) {
     scroll-padding-bottom: 96px;
 }
 
-// ---- Text fields --------------------------------------------------------------
-// A field's focus cue is its edge: the 1px border plus an outline of the rest of
-// --wui-focus-ring-width right outside it, so the edge reads 2px and nothing shifts. Each
-// selector repeats its partial's focus rule at the same specificity, so an invalid field's own
-// border colour still wins and only the outer edge is added. The open state of a picker counts:
-// focus has moved into its pop-up, but the field still reads as the one being edited.
-.form-control:focus,
-.form-select:focus,
-.input:focus,
-.select:focus,
-.textarea:focus,
-.search-select-control:focus-within,
-.search-select-control.open,
-.search-select-search:focus-within,
-.datepicker.open .datepicker-trigger,
-.daterange.open .daterange-trigger,
-.timepicker.open .timepicker-trigger,
-.input-affixed:focus-within,
-.input-with-unit:focus-within,
-.num-wrap:focus-within,
-.app-phone-number-input .phone-input-wrap:focus-within,
-.wui-input-group:focus-within,
-.otp-slot.active,
-.dropdown-search-input:focus,
-.file-input:not(.has-files):focus-within,
-.wui-rich-text-shell:focus-within,
-.wui-rich-text-link-input:focus,
+// ---- Workspace switcher trigger ------------------------------------------------
+// A button styled like a field: its soft focus border alone is under 3:1, so keyboard focus
+// adds the outline right outside it. Form fields keep the soft border without an outline.
 .workspace-switcher-trigger:focus-visible,
 .workspace-switcher-trigger[aria-expanded="true"] {
     outline: calc(var(--wui-focus-ring-width) - 1px) solid var(--color-focus-ring);
     outline-offset: 0;
 }
-// A control inside a wrapper that draws the border leaves the edge to the wrapper, and a bare
-// input has no edge.
-.input-bare:focus,
-:is(.input-affixed, .input-with-unit, .num-wrap, .phone-input-wrap, .wui-input-group) :is(.form-control, .input, .textarea, .num-input):focus {
-    outline: none;
-}
 
 // ---- Active option in a pop-up list --------------------------------------------
-// Search results, the country list, select and autocomplete options, mentions and the command
+// Search results, the country list, mentions and the command
 // palette keep focus in their input and mark the keyboard's row (aria-activedescendant) with
 // the hover tint alone, about 1.2:1. The inset ring makes that row plain; inset, because the
-// list scrolls and would clip an outer ring.
+// list scrolls and would clip an outer ring. Select and autocomplete options draw their own
+// light edge in _choice.scss.
 .wui-topsearch-hit.is-active,
 .country-dropdown-item.is-active,
-.search-select-option.is-active,
 .wui-mention-option.is-active,
 .wui-cmd-item[aria-selected="true"] {
     outline: var(--wui-focus-ring-width) solid var(--color-focus-ring);