@webority/theme 0.40.0 → 0.41.0

package/package.json

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

@@ -135,17 +135,17 @@
 // instead of a solid red fill, for a quieter destructive action (e.g. a "Remove" that
 // shouldn't shout like a solid .btn-danger). Mirrors .btn-secondary exactly — low-alpha
 // tint deepening on hover/press, no border — but keyed off the danger tokens. The label
-// uses --wui-danger-text (the AA-safe error red designed to read on a light red tint),
+// uses --color-danger-text (the AA-safe error red, lifted in dark mode to read on a dark surface),
 // not the brighter --color-danger. Disabled falls through to the shared neutral-grey
 // state below (it is not .btn-danger), like .btn-secondary.
 .btn-secondary-danger {
-    --bs-btn-color: var(--wui-danger-text);
+    --bs-btn-color: var(--color-danger-text);
     --bs-btn-bg: color-mix(in srgb, var(--color-danger) 12%, transparent);
     --bs-btn-border-color: transparent;
-    --bs-btn-hover-color: var(--wui-danger-text);
+    --bs-btn-hover-color: var(--color-danger-text);
     --bs-btn-hover-bg: color-mix(in srgb, var(--color-danger) 18%, transparent);
     --bs-btn-hover-border-color: transparent;
-    --bs-btn-active-color: var(--wui-danger-text);
+    --bs-btn-active-color: var(--color-danger-text);
     --bs-btn-active-bg: color-mix(in srgb, var(--color-danger) 26%, transparent);
     --bs-btn-active-border-color: transparent;
 }
@@ -411,9 +411,9 @@
     --bs-dropdown-padding-y: 0.375rem;
     --bs-dropdown-item-padding-y: 0.5rem;
     --bs-dropdown-item-padding-x: 0.625rem;
-    --bs-dropdown-border-color: var(--wui-border-light);
+    --bs-dropdown-border-color: var(--color-border);
     --bs-dropdown-border-radius: var(--wui-radius-lg);
-    --bs-dropdown-link-color: var(--wui-text-1);
+    --bs-dropdown-link-color: var(--color-text-body);
     --bs-dropdown-link-hover-color: var(--color-primary-hover);
     --bs-dropdown-link-hover-bg: var(--color-primary-soft);
     --bs-dropdown-link-active-color: var(--color-primary-hover);
@@ -460,7 +460,7 @@
     .wui-icon, i, svg {
         flex-shrink: 0;
         font-size: 1rem;
-        color: var(--wui-text-3);
+        color: var(--color-text-subtle);
         transition: color 0.12s ease;
     }
     &:hover .wui-icon, &:hover i, &:hover svg,
@@ -480,8 +480,8 @@
 
     // Destructive row action — red label, red glyph, red-tinted hover.
     &.danger {
-        --bs-dropdown-link-color: var(--wui-danger-text);
-        --bs-dropdown-link-hover-color: var(--wui-danger-text);
+        --bs-dropdown-link-color: var(--color-danger-text);
+        --bs-dropdown-link-hover-color: var(--color-danger-text);
         --bs-dropdown-link-hover-bg: var(--color-danger-soft);
         .wui-icon, i, svg { color: var(--wui-danger); }
         &:hover .wui-icon, &:hover i, &:hover svg,
@@ -625,7 +625,7 @@
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    color: var(--wui-text-3);
+    color: var(--color-text-subtle);
     flex-shrink: 0;
     font-size: 1rem;
     line-height: 1;
@@ -645,7 +645,7 @@ button.wui-input-leading {
 }
 button.wui-input-trailing:hover,
 button.wui-input-leading:hover {
-    color: var(--wui-text-1);
+    color: var(--color-text-body);
 }
 button.wui-input-trailing:focus-visible,
 button.wui-input-leading:focus-visible {

package/scss/_tokens.scss

@@ -339,6 +339,9 @@
     // pick a rung from this list.
     --wui-z-dropdown: 1000;
     --wui-z-sticky: 1020;
+    // Desktop shell sidebar: its overflowing menus (the workspace switcher) paint over sticky page
+    // content, while the fixed corner layers (consent banner, floating buttons) still cover it.
+    --wui-z-shell-sidebar: 1025;
     --wui-z-fixed: 1030;
     --wui-z-shell: 1040; // splash, shell base chrome
     --wui-z-shell-scrim: 1044; // mobile drawer scrim

package/scss/wui/_data.scss

@@ -511,17 +511,37 @@
 }
 // Facets size themselves: a select, multi-select or date range takes about 180 to 240px and the
 // search box a wider 260 to 320px, so they wrap as a compact row instead of stacking at full
-// width. Segments keep their own width.
-.wui-filter-bar > .field {
+// width. Segments keep their own width. A date range is the bare custom element, not a .field,
+// and on its own it fills its line.
+.wui-filter-bar > .field,
+.wui-filter-bar > wui-date-range {
     flex: 1 1 180px;
     min-width: 0;
     max-width: 240px;
 }
+.wui-filter-bar > wui-date-range .daterange {
+    width: 100%;
+}
 .wui-filter-bar > .search-wrap {
     flex: 1 1 260px;
     min-width: 0;
     max-width: 320px;
 }
+// The Razor bar sits in a GET form beside its Apply button. Its own box would take a whole
+// line and push Apply below it, so the form lays the controls, chips, Clear all and Apply out
+// as one row. `!important` beats the bar's d-flex utility, which React shares.
+.wui-filter-form > .wui-filter-bar {
+    display: contents !important;
+}
+// On a phone each facet takes its own line; segments and buttons keep their width.
+@media (max-width: 575.98px) {
+    .wui-filter-bar > .field,
+    .wui-filter-bar > wui-date-range,
+    .wui-filter-bar > .search-wrap {
+        flex-basis: 100%;
+        max-width: none;
+    }
+}
 
 // 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.

package/scss/wui/_shell.scss

@@ -223,9 +223,12 @@
     left: 0;
 }
 
+// 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.
 .app-sidebar {
     position: sticky;
     top: 0;
+    z-index: var(--wui-z-shell-sidebar);
     align-self: start;
     height: 100vh;
     display: flex;
@@ -234,7 +237,12 @@
     // The bottom inset matches the gap between the collapse toggle and the rule above it,
     // so the toggle row sits evenly spaced between the rule and the sidebar's bottom edge.
     padding: 20px 16px var(--app-sidebar-toggle-gap);
-    overflow: hidden;
+    // Clipped top to bottom only. The mobile drawer's transform makes it the box a fixed menu
+    // is placed in, so a horizontal clip would cut a 300px switcher menu at the drawer's 260px edge.
+    overflow: visible clip;
+    // A clip, unlike hidden, leaves the grid row free to grow to the whole nav list; this keeps
+    // a shell set in a fixed-height box at the box's height, with the nav scrolling inside it.
+    min-height: 0;
     background: var(--color-surface);
     transition: padding 0.2s var(--wui-ease-ui);
 }
@@ -318,11 +326,11 @@
 // the 88px rail, so the collapsed state hides it (the mobile drawer restores it).
 // The compact twin (`sidebarStartCompact` / `<app-shell-sidebar-start-compact>`) is
 // the inverse: hidden expanded, shown only on the desktop collapsed rail, sized for
-// a 36px monogram control (AppWorkspaceSwitcher compact).
+// a 36px monogram control (AppWorkspaceSwitcher compact). Neither slot clips: a menu opened
+// from it has to reach past the sidebar's edge.
 .app-sidebar-start {
     flex: none;
     margin-bottom: 8px;
-    overflow: hidden;
 }
 .app-sidebar-start-compact {
     display: none;
@@ -331,11 +339,12 @@
     // Centre the fixed square in the 88px rail so it lines up with the icon column.
     justify-content: center;
     align-items: center;
-    overflow: hidden;
 }
+// The sidebar clips only top to bottom, so a footer wider than the 88px rail is clipped here.
 .app-sidebar-foot {
     flex: none;
     padding-top: 12px;
+    overflow-x: clip;
 }
 
 .app-nav-group {

package/scss/wui/_utilities.scss

@@ -436,14 +436,14 @@
 // passwordRequirements) opens on focus. Rendered identically by React (a JSX <ul>) and Razor
 // (the same <ul> built in webority-ui.js), so both surfaces read the same. `.pw-popover` is the
 // custom class both put on Bootstrap's `.popover` panel.
-// The card surface — header and body alike — is pure white, lifted off the page with the shared
-// overlay shadow (the one ink menus/popovers/modals use; not a hand-rolled per-component shadow).
+// The card surface, header and body alike, is the elevated surface (white in light mode), lifted
+// off the page with the shared overlay shadow (the one ink menus/popovers/modals use; not a hand-rolled per-component shadow).
 // The field help popover (AppInfoTip, `.infotip-popover`) shares the same card, so the two
 // help surfaces a form shows read as one family.
 .pw-popover,
 .infotip-popover {
-    --bs-popover-bg: var(--wui-bg-light);
-    --bs-popover-header-bg: var(--wui-bg-light);
+    --bs-popover-bg: var(--color-surface);
+    --bs-popover-header-bg: var(--color-surface);
     // A 14px heading: one step above the 13px body, so the card reads as help, not a dialog.
     --bs-popover-header-font-size: 14px;
     box-shadow: var(--wui-shadow-overlay);