@webority/theme 0.68.2 → 0.69.0

package/package.json

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

package/scss/_components.scss

@@ -544,9 +544,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 +555,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 +626,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/_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);

package/scss/wui/_media.scss

@@ -723,6 +723,11 @@
     padding: 0;
     font-size: 12px;
 }
+.file-input.file-input-tall .file-input-text {
+    white-space: normal;
+    text-align: center;
+    overflow-wrap: anywhere;
+}
 
 // Large preview shown once an image exists; hover reveals a "Change image"
 // overlay.

package/scss/wui/_modal-remote.scss

@@ -62,7 +62,7 @@
     padding: 0;
 }
 .modal.wui-remote-drawer .modal-dialog.wui-remote-drawer-dialog {
-    margin: 0;
+    margin: 0 0 0 auto;
     max-width: none;
     width: min(var(--wui-modal-max-width, 480px), 100%);
     height: 100%;
@@ -87,3 +87,39 @@
         transition: none;
     }
 }
+
+// On a phone the drawer rises from the bottom edge as a sheet instead of sliding in from the end.
+@media (max-width: 767.98px) {
+    .modal.wui-remote-drawer .modal-dialog.wui-remote-drawer-dialog {
+        position: absolute;
+        inset: auto 0 0 0;
+        width: 100%;
+        height: auto;
+        max-height: 90dvh;
+        margin: 0;
+        transform: translateY(100%);
+    }
+    .modal.wui-remote-drawer.show .modal-dialog.wui-remote-drawer-dialog {
+        transform: none;
+    }
+    .modal.wui-remote-drawer .wui-remote-drawer-dialog .wui-modal {
+        height: auto;
+        max-height: 90dvh;
+        border-radius: var(--wui-radius-lg) var(--wui-radius-lg) 0 0;
+    }
+    .modal.wui-remote-drawer .wui-remote-drawer-dialog .wui-modal::before {
+        content: "";
+        display: block;
+        width: 36px;
+        height: 4px;
+        margin: 8px auto 0;
+        border-radius: 2px;
+        background: var(--color-border);
+    }
+}
+
+// A side panel dims the page behind it without blurring it, so the list stays readable.
+body:has(> .modal.wui-remote-drawer.show) > .modal-backdrop {
+    backdrop-filter: none;
+    -webkit-backdrop-filter: none;
+}

package/scss/wui/_page-header-bar.scss

@@ -1,6 +1,7 @@
-// ── Bar ── (`size="bar"`): one 40px header row. The breadcrumbs lead as an inline prefix, the
-// title takes the spare width and ends in an ellipsis, and the row never wraps from md up.
-// Below md the row wraps, so the actions drop under the title instead of overlapping it.
+// ── Bar ── (`size="bar"`): one 40px header row. The breadcrumbs lead as an inline prefix. The
+// title keeps its content width and a spacer takes the spare width, so the views follow the title
+// and the tools and actions sit at the far end. Below md the row wraps, so the actions drop under
+// the title instead of overlapping it.
 // Selectors name `.page-header.page-header-bar` because `.page-header-bar` alone is also the
 // inner row of every other size.
 .page-header.page-header-bar {
@@ -10,27 +11,58 @@
     // The bar sits 4px above the first content block.
     margin-bottom: 4px;
 }
+[data-density="compact"] .app-content:has(.page-header.page-header-bar) {
+    --app-content-padding-top: 8px;
+}
 .page-header.page-header-bar .page-title {
-    flex: 1 1 0;
-    min-width: 0;
+    flex: 0 1 auto;
+    min-width: min(12ch, max-content);
     font-size: 20px;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
 }
+.page-header.page-header-bar:has(> .page-header-bar-views) .page-title {
+    max-width: 280px;
+}
 .page-header.page-header-bar .page-status,
-.page-header-bar-views,
-.page-header-bar-meta,
 .page-header-bar-tools,
+.page-header-bar-meta,
 .page-header.page-header-bar .page-actions {
     flex: none;
 }
+.page-header-bar-views {
+    flex: 0 1 auto;
+    min-width: 0;
+}
+.page-header-bar-spacer {
+    flex: 1 1 0;
+    min-width: 0;
+}
 .page-header-bar-crumbs {
     flex: none;
     font-size: 13px;
     color: var(--color-text-muted);
     white-space: nowrap;
 }
+.page-header-bar-crumbs .breadcrumb {
+    --bs-breadcrumb-divider: "/";
+    margin: 0;
+    flex-wrap: nowrap;
+}
+.page-header-bar-crumbs .breadcrumb-item,
+.page-header-bar-crumbs .breadcrumb-item a {
+    color: var(--color-text-muted);
+    text-decoration: none;
+}
+.page-header-bar-crumbs .breadcrumb-item a:hover {
+    text-decoration: underline;
+}
+.page-header-bar-crumbs .breadcrumb-item:last-child::after {
+    content: "/";
+    padding-inline-start: var(--bs-breadcrumb-item-padding-x, 0.5rem);
+    color: var(--color-text-muted);
+}
 .page-header-bar-views,
 .page-header-bar-tools,
 .page-header-bar-bulk {
@@ -51,6 +83,9 @@
     display: none;
 }
 .page-header-bar-meta {
+    display: flex;
+    align-items: center;
+    column-gap: 16px;
     font-size: 13px;
     color: var(--color-text-muted);
     white-space: nowrap;
@@ -63,6 +98,9 @@
 }
 .page-header.wui-page-header-meta-below > .page-header-bar-meta {
     flex: 0 0 100%;
+    flex-wrap: wrap;
+    white-space: normal;
+    column-gap: 16px;
     line-height: 16px;
 }
 
@@ -74,4 +112,22 @@
     .page-header.page-header-bar .page-title {
         flex: 0 1 auto;
     }
+    .page-header-bar-crumbs {
+        display: none;
+    }
+    .page-header-bar-views {
+        order: 5;
+        flex: 1 1 100%;
+        min-width: 0;
+    }
+    .page-header-bar-meta {
+        order: 6;
+        flex: 1 1 100%;
+        flex-wrap: wrap;
+        white-space: normal;
+    }
+    .page-header-bar-tools {
+        flex-wrap: wrap;
+        min-width: 0;
+    }
 }