@webority/theme 0.13.5 → 0.15.0

package/index.scss

@@ -4,9 +4,9 @@
 //
 // Load order is LOAD-BEARING — never reorder:
 //   variables (before bootstrap) -> bootstrap -> tokens -> aliases -> components -> wui-components
-// Flags are NOT imported here: _wui-components already imports them (the phone control needs
-// them), and legacy @import does not dedupe, so a second import emitted all ~245 flag classes
-// twice (≈490 selectors) and bloated the bundle.
+// Country flags are NOT imported here, and neither does _wui-components: they are an opt-in
+// layer (scss/_flags.scss, compiled on its own to dist/webority-flags.css) for sites that render
+// the phone input or country picker.
 @import "scss/variables";
 @import "bootstrap/scss/bootstrap";
 @import "scss/tokens";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webority/theme",
-  "version": "0.13.5",
+  "version": "0.15.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": {
@@ -26,6 +26,8 @@
     "./scss/wui/*": "./scss/wui/_*.scss",
     "./scss/*": "./scss/_*.scss",
     "./css": "./dist/webority-theme.css",
+    "./css/flags": "./dist/webority-flags.css",
+    "./purge-safelist.json": "./dist/purge-safelist.json",
     "./package.json": "./package.json"
   },
   "sass": "index.scss",
@@ -39,6 +41,6 @@
     "sass-embedded": "^1.97.0"
   },
   "scripts": {
-    "build": "sass index.scss dist/webority-theme.css --load-path=node_modules --style=compressed --no-source-map --quiet-deps --silence-deprecation=if-function && 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 && node ../../scripts/gen-purge-safelist.mjs && node ../../scripts/sync-rcl-assets.mjs theme"
   }
 }

package/scss/_components.scss

@@ -245,32 +245,32 @@
 // 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, 18px squircle radius, 45px tall.
+// Medium (default): 14px / 600, 24px side padding, 18px squircle radius, 45px tall.
 .btn {
     --bs-btn-border-radius: 18px;
-    --bs-btn-font-size: 0.9375rem;
+    --bs-btn-font-size: 0.875rem;
     --bs-btn-font-weight: 600;
     --bs-btn-padding-x: 1.5rem;
     // Progressive enhancement only (Chrome/Safari recent). Unsupported engines
     // keep a plain border-radius arc — not a cross-browser design contract.
     corner-shape: squircle;
 }
-// Small: 14px, 18px side padding, 14px squircle radius (proportional to md), 35px tall.
+// Small: 12px, 18px side padding, 14px squircle radius (proportional to md), 35px tall.
 .btn-sm:not(.btn-icon),
 .btn-group-sm > .btn:not(.btn-icon) {
     --bs-btn-border-radius: 14px;
-    --bs-btn-font-size: 0.875rem;
+    --bs-btn-font-size: 0.75rem;
     --bs-btn-padding-x: 1.125rem;
     display: inline-flex;
     align-items: center;
     justify-content: center;
     min-height: 35px;
 }
-// Large: 17px, 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), 55px tall — a spacious CTA.
 .btn-lg:not(.btn-icon),
 .btn-group-lg > .btn:not(.btn-icon) {
     --bs-btn-border-radius: 22px;
-    --bs-btn-font-size: 1.0625rem;
+    --bs-btn-font-size: 1rem;
     --bs-btn-padding-x: 2rem;
     display: inline-flex;
     align-items: center;

package/scss/_tokens.scss

@@ -43,6 +43,10 @@
     --wui-field-bg: #F9FBFC;
     --wui-border-light: #EBEDF3;
     --wui-border-soft: #F4F6F8;
+    // The unfilled part of a progress bar / meter. Darker than every surface it can sit on
+    // (card, page, muted fill) so the empty track reads as a track, yet light enough that the
+    // mid-yellow warning fill still separates from it.
+    --wui-progress-track: #E1E5EE;
 
     // Gradients (hero, CTA)
     --wui-hero-gradient:
@@ -217,6 +221,8 @@
     --wui-dark-bg-surface: #181b23;
     --wui-dark-border: #2a2f3a;
     --wui-dark-border-strong:#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;
     --wui-dark-text-muted: #b4b9c6;
     --wui-dark-text-subtle: #8a90a0;

package/scss/_wui-aliases.scss

@@ -18,9 +18,18 @@
   --color-border: var(--wui-border-light);
   --color-border-light: var(--wui-border-soft);
   --color-border-strong: var(--wui-text-5);
+  --color-progress-track: var(--wui-progress-track);
+  // Label text inside a progress bar fill.
+  --color-progress-label: var(--wui-bg-light);
 
   // Text ramp
   --color-text: var(--wui-text-heading);
+  // Body copy on a tinted surface (alert bodies): a step softer than the heading ink.
+  --color-text-body: var(--wui-text-1);
+  // 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).
+  --color-focus-border: var(--wui-primary-30);
   --color-text-muted: var(--wui-text-2);
   --color-text-subtle: var(--wui-text-3);
 
@@ -54,6 +63,7 @@
   --color-info-soft: var(--color-info-10);
   // Use this — never --color-info — when the colour IS the text.
   --color-info-text: var(--wui-info-text);
+  --color-info-text-on-soft: var(--wui-info-text);
 
   --color-success-active: var(--wui-success-active);
   --color-success: var(--wui-success);
@@ -66,6 +76,7 @@
   --color-success-soft: var(--color-success-10);
   // Use this — never --color-success — when the colour IS the text.
   --color-success-text: var(--wui-success-text);
+  --color-success-text-on-soft: var(--wui-success-text);
 
   --color-warning-active: var(--wui-warning-active);
   --color-warning: var(--wui-warning);
@@ -79,6 +90,7 @@
   --color-warning-soft: var(--color-warning-10);
   // Use this — never --color-warning — when the colour IS the text.
   --color-warning-text: var(--wui-warning-text);
+  --color-warning-text-on-soft: var(--wui-warning-text);
 
   --color-danger-active: var(--wui-danger-active);
   --color-danger: var(--wui-danger);
@@ -91,6 +103,7 @@
   --color-danger-soft: var(--color-danger-10);
   // Use this — never --color-danger — when the colour IS the text.
   --color-danger-text: var(--wui-danger-text);
+  --color-danger-text-on-soft: var(--wui-danger-text);
 
   // Accent → warning ramp
   --color-accent: var(--color-warning);
@@ -137,10 +150,19 @@
   --color-border: var(--wui-dark-border);
   --color-border-light: color-mix(in srgb, var(--wui-dark-border) 50%, transparent);
   --color-border-strong: var(--wui-dark-border-strong);
+  --color-progress-track: var(--wui-dark-progress-track);
+  // Same near-black as --color-primary-text below: 4.97:1 or better on every bright fill.
+  --color-progress-label: #0F0F0F;
 
   --color-text: var(--wui-dark-text);
   --color-text-muted: var(--wui-dark-text-muted);
   --color-text-subtle: var(--wui-dark-text-subtle);
+  --color-text-body: var(--wui-dark-text);
+  // Bootstrap's .btn-close glyph is ink-dark; on a dark surface it needs the white filter.
+  --color-close-filter: invert(1) grayscale(100%) brightness(200%);
+  // The light pastel focus border glows against a dark field; dark mode uses the dark theme's
+  // own primary (the button fill), which still clears 3:1 against every dark surface.
+  --color-focus-border: var(--wui-dark-primary);
 
   // Re-bridge the Bootstrap colour vars onto the (now dark) app tokens so the
   // named-var text/body/border utilities — .text-body-secondary, .text-muted,
@@ -183,6 +205,14 @@
   --color-warning-text: var(--wui-warning);
   --color-info-text: var(--wui-info);
 
+  // Text ON a soft tint (an alert heading). The bright tone alone falls under WCAG AA on its own
+  // 18% tint over the dark page (info and danger reach only ~3.8:1), so it is lifted with 30%
+  // white: every tone then clears 4.5:1 on the dark page, surface and muted fill.
+  --color-success-text-on-soft: color-mix(in srgb, var(--wui-success) 70%, white);
+  --color-danger-text-on-soft: color-mix(in srgb, var(--wui-danger) 70%, white);
+  --color-warning-text-on-soft: color-mix(in srgb, var(--wui-warning) 70%, white);
+  --color-info-text-on-soft: color-mix(in srgb, var(--wui-info) 70%, white);
+
   // Light mode maps -strong to deep AA fills; on dark surfaces those sink into the page.
   // Remap to the bright fills so timeline dots / strong accents stay visible (same as -text).
   --color-success-strong: var(--wui-success);
@@ -194,6 +224,12 @@
   --color-warning-soft: color-mix(in srgb, var(--wui-warning) 18%, transparent);
   --color-danger-soft: color-mix(in srgb, var(--wui-danger) 18%, transparent);
   --color-info-soft: color-mix(in srgb, var(--wui-info) 18%, transparent);
+  // The -50 border tone: the light hex would glow on a dark page, so it becomes a translucent
+  // mix of the vivid tone that reads as a border on the dark tint.
+  --color-success-50: color-mix(in srgb, var(--wui-success) 45%, transparent);
+  --color-warning-50: color-mix(in srgb, var(--wui-warning) 45%, transparent);
+  --color-danger-50: color-mix(in srgb, var(--wui-danger) 45%, transparent);
+  --color-info-50: color-mix(in srgb, var(--wui-info) 45%, transparent);
   --color-accent-soft: var(--color-warning-soft);
 
   --color-scrim: color-mix(in srgb, black 45%, transparent);

package/scss/_wui-components.scss

@@ -43,23 +43,15 @@
 // set, so it has to win on equal specificity.
 @import "wui/workspace";
 
-// Flags belong here because <wui-phone> cannot render without them.
-//
-// The 245 `.wui-flag-*` rules live in _flags.scss, and this entry did not pull it in — so a
-// product following the documented chain (variables -> bootstrap -> tokens -> components ->
-// wui-components) got AppPhoneNumberInput with an empty grey box where every flag should be,
-// 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
-// an accident.
-@import "flags";
+// Country flags are NOT part of this aggregate. 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/dock";
 @import "wui/consent-banner";
 @import "wui/toolbar";
+// After `overlays`: anchors the shared modal shell to the top when it holds the palette card.
+@import "wui/command-palette";
 // Last: restates the settled state of menus other partials style, so it must win.
 @import "wui/menu-motion";

package/scss/wui/_choice.scss

@@ -58,18 +58,14 @@
     background: var(--color-surface);
     color: var(--color-primary);
 }
-// Icon illustrations are coloured PNGs: greyscale them until the card is
-// selected, then show the full-colour (blue) art.
-.struct-card-ic img {
-    filter: grayscale(1);
-    opacity: 0.6;
-    transition:
-        filter 0.12s,
-        opacity 0.12s;
-}
-.struct-card.checked .struct-card-ic img {
-    filter: none;
-    opacity: 1;
+// An image in the round icon disc (React iconNode={<img …/>}) keeps its own colours whether or not
+// the card is selected, fills the whole disc and is cropped to its circle, whatever the image's own
+// size or aspect. The tile variant drops the disc and sizes its illustration itself, so it is left out.
+.struct-card:not(.struct-card-tile) .struct-card-ic img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    border-radius: inherit;
 }
 .struct-card-body {
     display: flex;
@@ -113,6 +109,77 @@
 .struct-card-check svg path {
     stroke-width: 2.25;
 }
+// No tick (hideCheck / hide-check): the plain card no longer needs the top/bottom room the
+// corner tick sat in, so it tightens. The tile and image cards keep their own padding.
+.wui-struct-card-no-check:not(.struct-card-tile):not(.struct-card-img-card) {
+    padding-top: 14px;
+    padding-bottom: 14px;
+}
+
+// Sizes (size="sm" | "lg"; md is the base card above). Padding, gap, icon disc, type and the tick
+// offset step together so a card reads as one unit at every size. The tile variant owns its layout
+// and type (its later rules win), and the image card steps only its body padding and type.
+.wui-struct-card-sm {
+    gap: 9px;
+}
+.wui-struct-card-sm:not(.struct-card-tile):not(.struct-card-img-card) {
+    padding: 14px;
+}
+.wui-struct-card-sm.wui-struct-card-no-check:not(.struct-card-tile):not(.struct-card-img-card) {
+    padding-top: 10px;
+    padding-bottom: 10px;
+}
+.wui-struct-card-sm .struct-card-ic {
+    width: 36px;
+    height: 36px;
+}
+.wui-struct-card-sm .struct-card-title {
+    font-size: 14px;
+}
+.wui-struct-card-sm .struct-card-desc {
+    font-size: 13px;
+}
+.wui-struct-card-sm .struct-card-check {
+    top: 7px;
+    right: 7px;
+}
+.wui-struct-card-sm.struct-card-img-card .struct-card-body {
+    padding: 9px 11px;
+}
+.wui-struct-card-lg {
+    gap: 14px;
+}
+.wui-struct-card-lg:not(.struct-card-tile):not(.struct-card-img-card) {
+    padding: 26px;
+}
+.wui-struct-card-lg.wui-struct-card-no-check:not(.struct-card-tile):not(.struct-card-img-card) {
+    padding-top: 18px;
+    padding-bottom: 18px;
+}
+.wui-struct-card-lg .struct-card-ic {
+    width: 56px;
+    height: 56px;
+}
+.wui-struct-card-lg .struct-card-title {
+    font-size: 18px;
+}
+.wui-struct-card-lg .struct-card-desc {
+    font-size: 15px;
+}
+.wui-struct-card-lg .struct-card-check {
+    top: 13px;
+    right: 13px;
+}
+.wui-struct-card-lg.struct-card-img-card .struct-card-body {
+    padding: 15px 18px;
+}
+
+// Stacked layout (layout="stacked"): the icon disc sits on its own line and the title and
+// description start on the line below, left-aligned. The gap between them follows the size step.
+.wui-struct-card-stacked {
+    flex-direction: column;
+    align-items: flex-start;
+}
 
 // Tile variant: big centered illustration + label. Opt in with
 // className="struct-card-tile".
@@ -131,13 +198,9 @@
     border-radius: 0;
     background: transparent;
 }
-// Full-colour at all times (override the greyscale-until-selected treatment).
-.struct-card-tile .struct-card-ic img,
-.struct-card-tile.checked .struct-card-ic img {
+.struct-card-tile .struct-card-ic img {
     width: 100px;
     height: 100px;
-    filter: none;
-    opacity: 1;
 }
 .struct-card-tile .struct-card-body {
     align-items: center;
@@ -185,10 +248,10 @@
 }
 .search-select-control.open {
     // White fill + the active/focus border, matching a focused text input (which lifts off the
-    // muted resting fill onto white with a --wui-primary-30 border). Keeps the control seamless
+    // muted resting fill onto white with a --color-focus-border border). Keeps the control seamless
     // with the open menu and the floated label's white mask.
     background: var(--color-surface);
-    border-color: var(--wui-primary-30);
+    border-color: var(--color-focus-border);
 }
 .search-select-caret {
     flex-shrink: 0;
@@ -367,7 +430,7 @@
 }
 .search-select-search:focus-within {
     background: var(--color-surface);
-    border-color: var(--wui-primary-30);
+    border-color: var(--color-focus-border);
 }
 .search-select-search:focus-within svg {
     color: var(--color-primary);
@@ -506,12 +569,21 @@
     // While the calendar is open the trigger reads as a focused field — clean white surface, not
     // the muted resting fill. Opening moves focus INTO the popup, so :focus drops off the trigger;
     // this .open rule keeps it white (matching .search-select-control.open) instead of snapping
-    // back to grey the moment the dropdown appears. It stays white on close too (_close refocuses
-    // the trigger → :focus), greying only on an outside click that blurs it.
+    // back to grey the moment the dropdown appears.
     background-color: var(--color-surface);
-    border-color: color-mix(in srgb, var(--color-primary) 30%, transparent);
+    border-color: var(--color-focus-border);
     box-shadow: none;
 }
+// Closing hands focus back to the trigger (so the keyboard user lands where they started), which
+// would leave a mouse user with an "active" field after the calendar is gone. Once the popup is
+// shut, the trigger keeps the focus look only for keyboard focus (:focus-visible); a pick or
+// close by pointer returns it to rest. An errored field (aria-invalid on the host) keeps its red.
+wui-datepicker:not([aria-invalid="true"]) .datepicker:not(.open) .datepicker-trigger:focus:not(:focus-visible),
+wui-date-range:not([aria-invalid="true"]) .daterange:not(.open) .daterange-trigger:focus:not(:focus-visible),
+wui-timepicker:not([aria-invalid="true"]) .timepicker:not(.open) .timepicker-trigger:focus:not(:focus-visible) {
+    background-color: var(--color-field-bg);
+    border-color: var(--color-border);
+}
 // Portalled to <body> and fixed-positioned from JS so a modal's
 // overflow:hidden can't clip it; top/left come from inline styles. z-index
 // sits above the modal layer.
@@ -677,6 +749,13 @@ button.datepicker-month:hover {
     color: var(--color-border-strong);
     cursor: not-allowed;
 }
+// Today outside the allowed range keeps its ring, so the user can still find it, but in the
+// disabled ink: a primary ring would read as a date they can pick.
+.datepicker-day.is-today:disabled,
+.datepicker-cell.is-today:disabled {
+    box-shadow: inset 0 0 0 1.5px var(--color-border-strong);
+    color: var(--color-border-strong);
+}
 .datepicker-foot {
     display: flex;
     align-items: center;
@@ -835,7 +914,7 @@ button.datepicker-month:hover {
 .daterange.open .daterange-trigger {
     // Stay white while the two-month popover is open — see the note on .datepicker.open above.
     background-color: var(--color-surface);
-    border-color: color-mix(in srgb, var(--color-primary) 30%, transparent);
+    border-color: var(--color-focus-border);
     box-shadow: none;
 }
 .daterange-pop {
@@ -951,7 +1030,7 @@ button.datepicker-month:hover {
 // Match AppInput's focus: clean surface fill + a soft primary border.
 .app-phone-number-input .phone-input-wrap:focus-within {
     background: var(--color-surface);
-    border-color: var(--wui-primary-30);
+    border-color: var(--color-focus-border);
 }
 .app-phone-number-input .phone-input-wrap:has(> .input:disabled) {
     background: var(--color-bg-muted);
@@ -1176,7 +1255,7 @@ wui-timepicker[aria-invalid="true"] .timepicker.open .timepicker-trigger {
 // AppInput's exact focus: clean surface fill + its soft primary border token.
 .dropdown-search-input:focus {
     background: var(--color-surface);
-    border-color: var(--wui-primary-30);
+    border-color: var(--color-focus-border);
 }
 // AppInput's placeholder colour, not the browser default grey.
 .dropdown-search-input::placeholder {
@@ -1319,7 +1398,7 @@ wui-timepicker[aria-invalid="true"] .timepicker.open .timepicker-trigger {
 .timepicker.open .timepicker-trigger {
     // Stay white while the time list is open — see the note on .datepicker.open above.
     background-color: var(--color-surface);
-    border-color: color-mix(in srgb, var(--color-primary) 30%, transparent);
+    border-color: var(--color-focus-border);
     box-shadow: none;
 }
 .timepicker-pop {

package/scss/wui/_command-palette.scss

@@ -0,0 +1,195 @@
+// ── Command palette ──
+// AppCommandPalette / <app-command-palette> / <wui-command-palette>: app-wide "search and jump".
+// The overlay is the shared modal (.wui-modal-shell, .wui-modal), with .wui-cmd-card on the
+// card; this partial styles only what sits inside it, plus the top anchoring. The element marks
+// the active result with aria-selected="true", which is the one state hook below. Every colour
+// is a theme token, so dark mode follows the token flip with no rules of its own.
+//
+// Part of the wui-components layer, see _wui-components.scss for load order.
+
+// Anchored near the top rather than centred, so the input stays put while results grow and
+// shrink underneath it.
+.modal.wui-modal-shell:has(.wui-cmd-card) {
+    align-items: flex-start;
+    padding-top: max(20px, min(12vh, 120px));
+}
+.wui-modal.wui-cmd-card {
+    max-height: min(560px, calc(100vh - 2 * max(20px, min(12vh, 120px))));
+}
+// The list scrolls, not the body: the input and the footer stay pinned.
+.wui-cmd-card > .wui-modal-body {
+    display: flex;
+    flex-direction: column;
+    padding: 0;
+    overflow: hidden;
+}
+
+wui-command-palette {
+    display: flex;
+    flex: 1 1 auto;
+    flex-direction: column;
+    min-height: 0;
+}
+
+.wui-cmd-search {
+    display: flex;
+    flex: 0 0 auto;
+    align-items: center;
+    gap: 10px;
+    padding: 0 16px;
+    border-bottom: 1px solid var(--color-border);
+}
+.wui-cmd-search-icon {
+    display: inline-flex;
+    flex: 0 0 auto;
+    color: var(--color-text-muted);
+}
+.wui-cmd-input {
+    flex: 1 1 auto;
+    min-width: 0;
+    height: 52px;
+    padding: 0;
+    border: none;
+    outline: none;
+    background: transparent;
+    color: var(--color-text);
+    font-size: 16px;
+}
+.wui-cmd-input::placeholder {
+    color: var(--color-text-subtle);
+}
+.wui-cmd-spinner {
+    flex: 0 0 auto;
+    color: var(--color-primary);
+}
+
+.wui-cmd-list {
+    flex: 1 1 auto;
+    min-height: 0;
+    padding: 6px;
+    overflow-y: auto;
+    overscroll-behavior: contain;
+    scrollbar-width: thin;
+    scrollbar-color: var(--color-border-strong) transparent;
+}
+.wui-cmd-list[hidden],
+.wui-cmd-group[hidden],
+.wui-cmd-item[hidden] {
+    display: none;
+}
+.wui-cmd-group + .wui-cmd-group {
+    margin-top: 4px;
+}
+.wui-cmd-group-label {
+    padding: 8px 10px 4px;
+    color: var(--color-text-muted);
+    font-size: 11px;
+    font-weight: 600;
+    letter-spacing: 0.04em;
+    text-transform: uppercase;
+}
+
+.wui-cmd-item {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    padding: 8px 10px;
+    border-radius: var(--radius);
+    corner-shape: squircle;
+    color: var(--color-text);
+    cursor: pointer;
+    // Keeps a little of the next row visible when the keyboard scrolls the active one in.
+    scroll-margin: 6px;
+}
+.wui-cmd-item[aria-selected="true"] {
+    background: var(--color-primary-soft);
+    color: var(--color-primary);
+}
+.wui-cmd-item-icon {
+    display: inline-grid;
+    flex: 0 0 auto;
+    place-items: center;
+    width: 32px;
+    height: 32px;
+    border-radius: var(--radius);
+    corner-shape: squircle;
+    background: var(--color-bg-muted);
+    color: var(--color-text-muted);
+}
+.wui-cmd-item[aria-selected="true"] .wui-cmd-item-icon {
+    background: var(--color-surface);
+    color: var(--color-primary);
+}
+.wui-cmd-item-text {
+    display: flex;
+    flex: 1 1 auto;
+    flex-direction: column;
+    min-width: 0;
+}
+.wui-cmd-item-label,
+.wui-cmd-item-desc {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    line-height: 1.4;
+}
+.wui-cmd-item-label {
+    font-size: 14px;
+}
+.wui-cmd-item-desc {
+    color: var(--color-text-muted);
+    font-size: 12px;
+}
+.wui-cmd-item-meta {
+    flex: 0 0 auto;
+    color: var(--color-text-muted);
+    font-size: 12px;
+}
+// The query inside a label: bolder, never a highlighter block.
+.wui-cmd-mark {
+    padding: 0;
+    background: transparent;
+    color: inherit;
+    font-weight: 700;
+}
+
+.wui-cmd-empty {
+    padding: 20px 16px;
+    color: var(--color-text-muted);
+    font-size: 13px;
+    text-align: center;
+}
+// The status region is always in the page, so a screen reader hears the empty text arrive;
+// with nothing to say it takes no room.
+.wui-cmd-empty:empty {
+    display: none;
+}
+
+.wui-cmd-footer {
+    display: flex;
+    flex: 0 0 auto;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 6px 16px;
+    padding: 8px 16px;
+    border-top: 1px solid var(--color-border);
+    color: var(--color-text-muted);
+    font-size: 12px;
+}
+.wui-cmd-footer kbd {
+    padding: 1px 6px;
+    border: 1px solid var(--color-border);
+    border-radius: var(--wui-radius-sm);
+    background: var(--color-bg-muted);
+    color: var(--color-text);
+    font-family: inherit;
+    font-size: 11px;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+    .wui-cmd-item {
+        transition:
+            background-color 0.12s ease,
+            color 0.12s ease;
+    }
+}