@webority/theme 0.61.2 → 0.62.0

package/package.json

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

@@ -439,6 +439,9 @@
     --bs-dropdown-link-hover-bg: var(--color-primary-soft);
     --bs-dropdown-link-active-color: var(--color-primary-hover);
     --bs-dropdown-link-active-bg: var(--color-primary-soft);
+    --bs-dropdown-header-color: var(--color-text-muted);
+    --bs-dropdown-header-padding-x: 0.625rem;
+    --bs-dropdown-header-padding-y: 0.25rem;
     box-shadow: var(--wui-shadow-overlay);
     // A long menu (account / workspace lists) must never spill past the screen and clip its
     // last rows: cap the panel to the viewport and scroll INSIDE it. The room subtracted
@@ -510,6 +513,16 @@
     }
 }
 
+// Group heading: an AppDropdown item `header` or <app-dropdown-header>.
+.dropdown-menu .dropdown-header {
+    font-size: 12px;
+    font-weight: 600;
+    line-height: 1.4;
+}
+.dropdown-menu .dropdown-header:not(:first-child) {
+    margin-top: 0.25rem;
+}
+
 // ---- 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

package/scss/wui/_consent-banner.scss

@@ -1,8 +1,9 @@
 // ── Cookie consent banner ──
 // AppConsentBanner / <app-consent-banner> / <wui-consent-banner>: a card pinned to a bottom
-// corner asking for cookie consent, with per-category switches behind "Cookie settings". The
-// element authors the markup and owns the states (`open` on the host, `hidden` on the panel,
-// the settings block and the save button); everything visual lives here.
+// corner (a full-width bar along the bottom edge on phones) asking for cookie consent, with
+// per-category switches behind "Cookie settings". The element authors the markup and owns the
+// states (`open` on the host, `hidden` on the panel, the settings block and the save button);
+// everything visual lives here.
 //
 // Part of the wui-components layer: see _wui-components.scss for load order.
 
@@ -115,14 +116,39 @@ wui-consent-banner[tour-open] {
     flex: 1 1 100%;
 }
 
-@media (max-width: 480px) {
+@media (max-width: 575.98px) {
     wui-consent-banner,
     wui-consent-banner[position="bottom-left"],
     wui-consent-banner[position="bottom-right"] {
-        left: 12px;
-        right: 12px;
-        bottom: 12px;
+        left: 0;
+        right: 0;
+        bottom: 0;
         width: auto;
         max-width: none;
     }
+    .wui-consent-banner-panel {
+        padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
+        border-width: 1px 0 0;
+        border-radius: 0;
+    }
+    // Hidden on phones, but it stays the dialog's accessible name.
+    .wui-consent-banner-heading {
+        position: absolute;
+        width: 1px;
+        height: 1px;
+        margin: -1px;
+        padding: 0;
+        overflow: hidden;
+        clip: rect(0, 0, 0, 0);
+        white-space: nowrap;
+        border: 0;
+    }
+    .wui-consent-banner-description {
+        margin: 0 0 8px;
+        font-size: 13px;
+        line-height: 1.4;
+    }
+    .wui-consent-banner-actions {
+        gap: 6px;
+    }
 }