@webority/theme 0.127.0 → 0.129.0

package/scss/wui/_field-sizes.scss

@@ -0,0 +1,55 @@
+// Size steps for fields that had none: textarea, checkbox, switch, OTP. Part of the wui-components layer, see _wui-components.scss for load order.
+
+// .textarea sets its own padding and height after .input-sm/.input-lg, so the shared step classes
+// need restating with the textarea's specificity.
+// A typed-in field stays at 16px or more on a phone, or iOS zooms on focus; --wui-fs-lg is the smallest text step that does.
+.textarea.input-sm {
+    padding: var(--wui-space-sm) var(--wui-space-md) var(--wui-space-sm);
+    font-size: var(--wui-fs-lg);
+    border-radius: var(--wui-field-sm-radius);
+}
+.textarea.input-lg {
+    padding: var(--wui-space-md) var(--wui-space-lg) var(--wui-space-lg);
+    font-size: var(--wui-fs-lg);
+    border-radius: var(--wui-field-lg-radius);
+}
+
+.form-check.form-check-sm .form-check-input {
+    width: 16px;
+    height: 16px;
+    background-size: 12px 12px;
+}
+.form-check.form-check-lg .form-check-input {
+    width: 24px;
+    height: 24px;
+    background-size: 18px 18px;
+}
+.form-check.form-check-sm .form-check-label {
+    font-size: var(--wui-fs-xs);
+}
+.form-check.form-check-lg .form-check-label {
+    font-size: var(--wui-fs-base);
+}
+
+// Written after the checkbox rules: equal specificity, so the switch sizes win on a switch.
+.form-switch.form-check-sm .form-check-input {
+    width: 32px;
+    height: 18px;
+    background-size: 14px 14px;
+}
+.form-switch.form-check-lg .form-check-input {
+    width: 48px;
+    height: 26px;
+    background-size: 22px 22px;
+}
+
+wui-otp[size="sm"] .otp-slot {
+    width: 36px;
+    height: var(--wui-control-sm);
+    font-size: var(--wui-fs-sm);
+}
+wui-otp[size="lg"] .otp-slot {
+    width: 52px;
+    height: 52px;
+    font-size: var(--wui-fs-lg);
+}

package/scss/wui/_floating.scss

@@ -1,5 +1,5 @@
 // ── Floating stack ──
-// The one fixed corner container the compact floating buttons (the chat launcher, the report-an-issue
+// The one fixed corner container the compact floating buttons (AppFloatingButton: the chat launcher, the report-an-issue
 // button) portal into, so they stack with a gap and never overlap or need a hand-set offset. React's
 // useFloatingStack creates it; the items inside are not fixed themselves.
 //
@@ -42,7 +42,7 @@
 }
 
 // ── Compact floating button ──
-// An icon-only circle. The label lives in the tooltip and the aria-label, never on the button.
+// An icon-only circle in three sizes. The label lives in the tooltip and the aria-label, never on the button.
 .wui-floating-btn {
     --wui-floating-size: 48px;
 
@@ -55,6 +55,13 @@
     border-radius: 50%;
     box-shadow: var(--wui-shadow-popover);
 }
+// Sizes of the circle. The base class is the 48px medium size.
+.wui-floating-btn--sm {
+    --wui-floating-size: 40px;
+}
+.wui-floating-btn--lg {
+    --wui-floating-size: 56px;
+}
 // Quieter than the primary circle: a light brand tint, the brand icon and a thin brand border.
 .wui-floating-btn--secondary {
     --wui-floating-size: 40px;

package/scss/wui/_inline-edit.scss

@@ -64,6 +64,12 @@
 .wui-inline-edit-value[data-wui-empty] {
     color: var(--color-text-subtle);
 }
+// wrap={false}: one line, as a table cell or a tight header expects.
+.wui-inline-edit--nowrap,
+.wui-inline-edit--nowrap .wui-inline-edit-value {
+    white-space: nowrap;
+    overflow-wrap: normal;
+}
 
 .wui-inline-edit-icon {
     display: inline-flex;

package/scss/wui/_interaction.scss

@@ -268,9 +268,17 @@ html:has(.form-actions-sticky) {
     .app-tabs-scroll-btn {
         min-width: 44px;
     }
-    wui-select[compact] .search-select-control {
+    wui-select .search-select-control {
         min-height: 44px;
     }
+    .app-tabs-sm .app-tab {
+        min-height: 44px;
+    }
+    // An inline link grows its hit area, not its line: the negative margin pays the padding back.
+    .wui-link {
+        padding-block: var(--wui-space-md);
+        margin-block: calc(-1 * var(--wui-space-md));
+    }
 }
 
 // Touch pointers at any width: the same 44px floor for controls the phone block does not reach.

package/scss/wui/_overlays.scss

@@ -93,7 +93,15 @@
     max-height: calc(100vh - 40px);
     display: flex;
     flex-direction: column;
-    overflow: hidden;
+    // clip, not hidden: hidden makes the card a scroll container, so a focused control near its foot scrolled the card, not .wui-modal-body.
+    overflow: clip;
+}
+// The document gutter is reserved (html, body in _components.scss) and AppModal locks the page itself
+// (ui-react lib/pageScrollLock.js), so the modal manager's scrollbar padding on body only bares a strip of
+// page beside the backdrop. Bootstrap and react-bootstrap write it inline, which only !important outranks.
+body.modal-open,
+body[data-rr-ui-modal-open] {
+    padding-right: 0 !important;
 }
 // The centred card opens with the shared dialog motion (wui/_dialog-motion.scss: soft zoom by
 // default). Width comes from `size`, which both surfaces resolve to `--wui-modal-max-width` on
@@ -687,6 +695,15 @@
     flex-direction: column;
     gap: 8px;
     max-width: min(92vw, 400px);
+    --wui-toast-offset: var(--wui-toast-edge-offset);
+}
+
+// Bootstrap's p-3 pads every side; the pinned edge takes the offset instead, and the side inset stays.
+.wui-toast-container.top-0 {
+    padding-top: var(--wui-toast-offset) !important;
+}
+.wui-toast-container.bottom-0 {
+    padding-bottom: var(--wui-toast-offset) !important;
 }
 
 // An end-side stack moves clear of an open side drawer, so a toast never covers the panel's

package/scss/wui/_pagination.scss

@@ -2,8 +2,8 @@
 //
 // Part of the wui-components layer; imported right after _data.scss. Order within the layer is load-bearing (see _wui-components.scss).
 
-// Pagination footer: a "10 per page" menu beside the page buttons, flush under a table. No row
-// range and no total; the page buttons say where you are.
+// Pagination footer: a "10 per page" menu beside the page buttons, flush under a table. A range
+// summary ("Showing x to y of z") shows only with summary, otherwise the page buttons say where you are.
 .table-pagination {
     display: flex;
     align-items: center;
@@ -20,6 +20,11 @@
     align-items: center;
     white-space: nowrap;
 }
+.wui-pager-summary {
+    margin-inline-end: auto;
+    white-space: nowrap;
+    font-variant-numeric: tabular-nums;
+}
 .select.tpg-select {
     width: auto;
     min-width: 64px;
@@ -119,6 +124,16 @@
 }
 // A finger needs a 44px target: the pager's controls grow to the control height on a phone.
 @media (max-width: 575.98px) {
+    // On a phone the parts spread across the row and the page buttons take their own centred line.
+    .table-pagination {
+        justify-content: space-between;
+        gap: var(--wui-space-sm) var(--wui-space-md);
+        padding: var(--wui-space-md);
+    }
+    .tpg-nav {
+        flex-basis: 100%;
+        justify-content: center;
+    }
     .select.tpg-select {
         height: var(--wui-control-md);
         min-height: var(--wui-control-md);
@@ -142,6 +157,9 @@
     padding: 0;
     border-top: none;
 }
+.wui-table-pagination-standalone > .wui-pager-summary {
+    margin-inline-end: 0;
+}
 
 // The compact pager: 28px page and arrow buttons and 12px text. A phone keeps the 44px target.
 .wui-table-pagination-sm {

package/scss/wui/_rich-text.scss

@@ -310,3 +310,8 @@ wui-rich-text[readonly] .wui-rich-text-prose {
 ):active:not(:disabled, [aria-disabled="true"]) {
     background-image: linear-gradient(var(--wui-pressed-overlay), var(--wui-pressed-overlay)) !important;
 }
+
+// The busy dim of wui/field-busy, kept here because the shell class belongs to this on-demand layer.
+.wui-rich-text-shell.wui-field-busy {
+    opacity: var(--wui-disabled-opacity);
+}

package/scss/wui/_shell-parts.scss

@@ -246,6 +246,23 @@
     color: var(--color-text-body);
     font-weight: var(--wui-fw-medium);
 }
+.wui-usermenu-extra {
+    margin-top: var(--wui-space-xxs);
+    font-size: var(--wui-fs-xs);
+    line-height: var(--wui-lh-body);
+    color: var(--color-text-muted);
+}
+// 6px is the menu's row gap: no token sits between xs and sm, so it is the two below it.
+.wui-usermenu-section {
+    margin-bottom: calc(var(--wui-space-xs) + var(--wui-space-xxs));
+    padding-bottom: calc(var(--wui-space-xs) + var(--wui-space-xxs));
+    border-bottom: 1px solid var(--color-border);
+}
+.wui-usermenu-foot {
+    margin-top: calc(var(--wui-space-xs) + var(--wui-space-xxs));
+    padding-top: var(--wui-space-sm);
+    border-top: 1px solid var(--color-border);
+}
 .wui-usermenu-logout {
     margin: 0;
 }

package/scss/wui/_shell.scss

@@ -222,6 +222,15 @@
 .app-shell.no-sidebar .app-footer {
     left: 0;
 }
+// Below lg the drawer and the phone tab bar carry the navigation, so the topbar menu waits for lg.
+.app-shell.wui-shell-top .wui-shell-top-nav {
+    display: none;
+}
+.wui-shell-top-brand {
+    display: flex;
+    align-items: center;
+    flex: none;
+}
 
 // Sticky always makes a stacking context, so without a z-index here the page content after the
 // sidebar paints over anything the sidebar lets out, such as an open workspace switcher menu.
@@ -264,6 +273,30 @@
     flex: none;
     overflow: hidden;
 }
+.app-sidebar-brand .wui-brand-logo,
+.app-sidebar-brand .wui-brand-mark {
+    display: block;
+    flex: none;
+    height: var(--wui-brand-logo-height, 32px);
+    width: auto;
+    max-width: 100%;
+}
+.app-sidebar-brand .wui-brand-mark {
+    display: none;
+    width: var(--wui-brand-logo-height, 32px);
+}
+.app-sidebar-brand.wui-brand-mark-only .wui-brand-mark {
+    display: block;
+}
+.app-sidebar-brand .wui-brand-dark {
+    display: none;
+}
+:root[data-theme="dark"] .app-sidebar-brand.wui-brand-themed .wui-brand-light {
+    display: none;
+}
+:root[data-theme="dark"] .app-sidebar-brand .wui-brand-dark {
+    display: block;
+}
 // The nav list scrolls independently while the brand row stays put. `min-height: 0`
 // is load-bearing — without it this flex child refuses to shrink below its content
 // and the overflow never engages, so the lower nav items become unreachable.
@@ -536,6 +569,23 @@
     gap: 0;
     padding: 0;
 }
+.app-shell.collapsed .app-sidebar-brand.wui-brand-has-mark .wui-brand-logo {
+    display: none;
+}
+.app-shell.collapsed .app-sidebar-brand.wui-brand-has-mark .wui-brand-mark {
+    display: block;
+}
+.app-shell.collapsed .app-sidebar-brand:not(.wui-brand-has-mark) .wui-brand-logo {
+    width: var(--wui-brand-logo-height, 32px);
+    object-fit: cover;
+    object-position: left center;
+}
+:root[data-theme="dark"] .app-shell.collapsed .app-sidebar-brand.wui-brand-themed .wui-brand-mark.wui-brand-light {
+    display: none;
+}
+:root[data-theme="dark"] .app-shell.collapsed .app-sidebar-brand .wui-brand-mark.wui-brand-dark {
+    display: block;
+}
 // The label leaves the VISUAL flow but must stay in the accessibility tree — an
 // icon-only rail link with display:none text has no accessible name (axe
 // link-name, serious). Clip-rect keeps the name; no phantom gap since it takes
@@ -715,6 +765,21 @@
     display: none;
 }
 @include media-breakpoint-up(lg) {
+    .app-shell.wui-shell-top {
+        grid-template-columns: 1fr;
+    }
+    .app-shell.wui-shell-top .app-sidebar,
+    .app-shell.wui-shell-top .app-sidebar-toggle {
+        display: none;
+    }
+    .app-shell.wui-shell-top .app-footer {
+        left: 0;
+    }
+    .app-shell.wui-shell-top .wui-shell-top-nav {
+        display: flex;
+        align-items: center;
+        min-width: 0;
+    }
     .app-shell.collapsed .app-nav-item[data-label]::after {
         content: attr(data-label);
         position: absolute;

package/scss/wui/_typography.scss

@@ -6,6 +6,12 @@
 // 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.
 
+// Bootstrap reads its text face from --bs-font-sans-serif (through --bs-body-font-family). Pointing it at the
+// theme token means a product that sets --wui-font-ui restyles Bootstrap-only controls too, with no sheet of its own.
+:root {
+    --bs-font-sans-serif: var(--wui-font-ui);
+}
+
 // ── Text-scale utilities (wui-text-*) ──
 .wui-text-xs {
     font-size: 12px;
@@ -15,6 +21,11 @@
     font-size: 13.5px;
     line-height: 1.5;
 }
+// Text a person typed: keep their line breaks and break a long unbroken run (a URL) instead of overflowing.
+.wui-prewrap {
+    white-space: pre-wrap;
+    overflow-wrap: anywhere;
+}
 .wui-text-base {
     font-size: 15px;
     line-height: 1.5;
@@ -351,7 +362,8 @@
 .search-select-multi {
     align-items: center;
     gap: 6px;
-    min-height: 40px;
+    // The md field height is the floor, so a one-row multi-select lines up with the inputs and buttons beside it.
+    min-height: var(--wui-control-md);
     height: auto;
     padding-top: 5px;
     padding-bottom: 5px;
@@ -490,12 +502,6 @@ wui-multiselect[collapse-chips] .ms-chips {
 }
 // AppTagInput renders its input inside the chip row, after the chips, so the shared
 // `.ms-chips > .ms-input` rule above lets it wrap with them and fill the rest of the line.
-// Match AppInput's per-size heights: the shared `.search-select-multi` floor is lower than the md
-// control height, so raise it; sm and lg come from the size-specific `.search-select-{sm,lg}
-// .search-select-control` rules.
-wui-taginput .search-select-multi {
-    min-height: var(--wui-control-md);
-}
 
 /* ── Choice card: image / custom-template variant ── */
 .struct-card-img-card {
@@ -525,3 +531,15 @@ wui-taginput .search-select-multi {
     top: 8px;
     right: 8px;
 }
+
+// Line breaks in the text are kept and long lines still wrap. Used by multiline on app-value, app-description and AppDescriptions items.
+.wui-pre-line {
+    white-space: pre-line;
+}
+
+// Monospace text for codes and references. The control selectors give a field the same family as plain text.
+.wui-mono,
+.form-control.wui-mono,
+.input.wui-mono {
+    font-family: var(--bs-font-monospace);
+}

package/scss/wui/_utilities.scss

@@ -725,6 +725,10 @@
 // They read the --color-*-strong aliases, not --wui-*-strong, because dark mode remaps the
 // aliases to the lifted fills: the deep fills sink into the dark track (about 2:1). The label
 // flips to a dark ink there (--color-progress-label), which clears AA on all five dark fills.
+// The product's own primary, for a bar that tracks a brand action.
+.wui-progress-primary {
+    background-color: var(--color-primary);
+}
 .wui-progress-info {
     background-color: var(--color-info-strong);
 }
@@ -865,6 +869,7 @@
 // data-theme attribute and the auto media query alike, with no per-component dark rules.
 .alert-info {
     --bs-alert-bg: var(--color-info-soft);
+    --alert-tone: var(--color-info);
     --bs-alert-border-color: var(--color-info-border);
     --bs-alert-color: var(--color-text-body);
     --alert-accent: var(--wui-info-active);
@@ -873,6 +878,7 @@
 }
 .alert-success {
     --bs-alert-bg: var(--color-success-soft);
+    --alert-tone: var(--color-success);
     --bs-alert-border-color: var(--color-success-border);
     --bs-alert-color: var(--color-text-body);
     --alert-accent: var(--wui-success-active);
@@ -881,6 +887,7 @@
 }
 .alert-warning {
     --bs-alert-bg: var(--color-warning-soft);
+    --alert-tone: var(--color-warning);
     --bs-alert-border-color: var(--color-warning-border);
     --bs-alert-color: var(--color-text-body);
     --alert-accent: var(--wui-warning-active);
@@ -889,6 +896,7 @@
 }
 .alert-danger {
     --bs-alert-bg: var(--color-danger-soft);
+    --alert-tone: var(--color-danger);
     --bs-alert-border-color: var(--color-danger-border);
     --bs-alert-color: var(--color-text-body);
     --alert-accent: var(--wui-danger-active);
@@ -996,6 +1004,33 @@
     align-items: center;
     gap: 8px;
 }
+// A tinted, outline, ghost or text button in the action slot takes the alert's tone instead of
+// the brand colour, so it reads as part of the alert. The label is the alert's AA-safe text
+// colour. Solid buttons (primary, danger, warning) keep their own fill, which carries meaning.
+.alert-action :is(.btn-secondary, .btn-outline-primary, .btn-ghost, .btn-text) {
+    --bs-btn-color: var(--alert-text);
+    --bs-btn-hover-color: var(--alert-text);
+    --bs-btn-active-color: var(--alert-text);
+    --bs-btn-disabled-color: var(--alert-text);
+    --bs-btn-focus-box-shadow: 0 0 0 0.25rem color-mix(in srgb, var(--alert-tone) 40%, transparent);
+}
+.alert-action .btn-secondary {
+    --bs-btn-bg: color-mix(in srgb, var(--alert-tone) 16%, transparent);
+    --bs-btn-hover-bg: color-mix(in srgb, var(--alert-tone) 24%, transparent);
+    --bs-btn-active-bg: color-mix(in srgb, var(--alert-tone) 32%, transparent);
+}
+.alert-action .btn-outline-primary {
+    --bs-btn-border-color: var(--alert-tone);
+    --bs-btn-hover-bg: color-mix(in srgb, var(--alert-tone) 16%, transparent);
+    --bs-btn-hover-border-color: var(--alert-tone);
+    --bs-btn-active-bg: color-mix(in srgb, var(--alert-tone) 24%, transparent);
+    --bs-btn-active-border-color: var(--alert-tone);
+    --bs-btn-disabled-border-color: var(--alert-tone);
+}
+.alert-action .btn-ghost {
+    --bs-btn-hover-bg: color-mix(in srgb, var(--alert-tone) 16%, transparent);
+    --bs-btn-active-bg: color-mix(in srgb, var(--alert-tone) 24%, transparent);
+}
 @include media-breakpoint-up(md) {
     .alert-has-action {
         flex-wrap: nowrap;

package/scss/wui/_workspace.scss

@@ -121,6 +121,18 @@
     height: 32px;
     padding: 0;
 }
+// A finger needs a 44px target: the small and compact switchers grow on a phone or a touch screen.
+@media (max-width: 575.98px), (pointer: coarse) {
+    .workspace-switcher-sm .workspace-switcher-trigger {
+        min-height: 44px;
+    }
+    .workspace-switcher-trigger.is-compact,
+    .workspace-switcher-sm .workspace-switcher-trigger.is-compact {
+        width: 44px;
+        height: 44px;
+        min-height: 44px;
+    }
+}
 .workspace-switcher-sm .workspace-switcher-mark {
     width: 24px;
     height: 24px;

package/token-meanings.json

@@ -39,6 +39,7 @@
     "--color-field-border-focus": "Border of a focused, open or active control such as an input or select.",
     "--color-field-border-hover": "Hover border of an input-like control.",
     "--color-focus-ring": "Colour of the keyboard focus ring drawn on focus-visible controls.",
+    "--color-focus-ring-soft": "Translucent step of the focus ring colour, for a soft halo around a focused field.",
     "--color-info": "Vivid info fill for badges and dots.",
     "--color-info-border": "Tinted info border of alerts and badges.",
     "--color-info-pressed": "Info fill while a control is pressed.",
@@ -64,6 +65,10 @@
     "--color-success-text": "Success colour as text on light surfaces.",
     "--color-success-text-on-soft": "Success text on a soft success tint, such as an alert heading.",
     "--color-surface": "Card and panel surface.",
+    "--color-surface-inverse-wash-12": "Medium translucent wash over an inverse band, for a selected or pressed tile or row.",
+    "--color-surface-inverse-wash-24": "Strong translucent wash over an inverse band, for a divider or a filled chip.",
+    "--color-surface-inverse-wash-4": "Faintest translucent wash over an inverse band, for a resting tile or row.",
+    "--color-surface-inverse-wash-8": "Light translucent wash over an inverse band, for a hovered tile or row.",
     "--color-text": "Main heading and body ink.",
     "--color-text-body": "Body copy on a tinted surface such as an alert body.",
     "--color-text-muted": "Secondary text for descriptions and muted copy.",
@@ -84,8 +89,11 @@
     "--wui-border-light": "Default hairline border of cards, tables and dividers.",
     "--wui-border-soft": "Softest border, for inner dividers.",
     "--wui-border-strong": "Strong border for emphasised separators, chart axes and unselected control outlines.",
+    "--wui-card-pad": "Padding inside a card and its header; a card class can set it to retune one card.",
     "--wui-card-shadow-lifted": "Shadow of a lifted card, none in this theme.",
     "--wui-card-shadow-lifted-hover": "Shadow of a lifted card while it is hovered, none in this theme.",
+    "--wui-card-title-fs": "Font size of a card title.",
+    "--wui-card-title-lh": "Line height of a card title.",
     "--wui-chart-1": "Colour of chart series 1, the brand primary.",
     "--wui-chart-2": "Colour of chart series 2 of the eight categorical series.",
     "--wui-chart-3": "Colour of chart series 3 of the eight categorical series.",
@@ -155,6 +163,7 @@
     "--wui-dark-text-muted": "Secondary text colour in dark mode.",
     "--wui-dark-text-subtle": "Tertiary text colour in dark mode, for hints and captions.",
     "--wui-disabled-opacity": "Opacity of a control that dims as a whole when disabled.",
+    "--wui-drawer-max": "Height of a bottom sheet drawer as a count of viewport height percent.",
     "--wui-ease-elastic": "Overshooting easing for the tab ink bar's spring into place.",
     "--wui-ease-out": "Easing curve matching the locked design's motion exports.",
     "--wui-ease-ui": "Easing curve for interface transitions.",
@@ -171,6 +180,7 @@
     "--wui-first-day": "Weekday calendars start their week on, from 0 for Sunday to 6 for Saturday.",
     "--wui-focus-ring-inset": "Offset that draws the focus ring inside a scrolling container.",
     "--wui-focus-ring-offset": "Gap between a control and its keyboard focus ring.",
+    "--wui-focus-ring-soft-shadow": "Soft halo drawn around a focused text field, in the translucent focus ring colour.",
     "--wui-focus-ring-width": "Width of the keyboard focus ring.",
     "--wui-font-display": "Display typeface for headings marked as display text.",
     "--wui-font-mono": "Monospace typeface for code, identifiers and figures that must line up.",
@@ -201,9 +211,12 @@
     "--wui-info-active": "Info ink for icons and active states on light surfaces.",
     "--wui-info-text": "Info colour as text on light surfaces.",
     "--wui-ink": "Pure black ink, the highest-contrast text colour.",
+    "--wui-kpi-value-size": "Font size of the main figure in a KPI tile.",
     "--wui-lh-body": "Line height of running text and of any text that is not a heading or display text.",
     "--wui-lh-display": "Line height of display-size text such as hero titles.",
     "--wui-lh-heading": "Line height of headings.",
+    "--wui-modal-max-width": "Maximum width of a modal dialog; each dialog sets it from its size.",
+    "--wui-nav-menu-current-bg": "Background of the current item in a navigation menu.",
     "--wui-neutral-bg-dark": "Muted background of table emphasis rows and mega-menu hover.",
     "--wui-neutral-bg-light": "Faint background for table emphasis and mega-menu hover.",
     "--wui-neutral-border-dark": "Border tone of table emphasis rows and dividers.",
@@ -232,6 +245,7 @@
     "--wui-scrollbar-active": "Scrollbar thumb colour while it is dragged.",
     "--wui-scrollbar-hover": "Scrollbar thumb colour while it is hovered.",
     "--wui-shadow-card": "Shadow under in-page cards, none in this theme so cards stay flat.",
+    "--wui-shadow-elevated": "Shadow of a surface lifted slightly above the page, such as a toast, a sticky bar or a floating action button.",
     "--wui-shadow-modal": "Larger overlay shadow, for the largest floating surfaces.",
     "--wui-shadow-popover": "Shadow of floating overlays such as menus and popovers.",
     "--wui-space-2xl": "Double extra-large step of the spacing scale.",
@@ -244,6 +258,7 @@
     "--wui-space-xl": "Extra-large step of the spacing scale.",
     "--wui-space-xs": "Extra-small step of the spacing scale.",
     "--wui-space-xxs": "Hairline step of the spacing scale.",
+    "--wui-step-tile-size": "Width and height of the numbered circle in a step tile.",
     "--wui-success": "Vivid success fill for badges, dots and success buttons.",
     "--wui-success-10": "Success tint 10, the soft background of success alerts and badges.",
     "--wui-success-20": "Success tint 20 for soft fills behind success alerts and badges.",