@webority/theme 0.101.5 → 0.102.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webority/theme",
-  "version": "0.101.5",
+  "version": "0.102.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": {
@@ -51,7 +51,7 @@
     "country-flag-icons": "^1.6.20",
     "sass-embedded": "^1.97.0",
     "vite": "^8.0.12",
-    "@webority/tokens": "0.101.5"
+    "@webority/tokens": "0.102.0"
   },
   "scripts": {
     "tokens": "node ../tokens/dist/webority.js brand --library --out ../tokens/dist --web scss/_tokens.generated.scss",

package/scss/_bootstrap.generated.scss

@@ -1,4 +1,4 @@
-// Generated by @webority/tokens 0.101.5 from its token source. Do not edit; run webority brand --library.
+// Generated by @webority/tokens 0.102.0 from its token source. Do not edit; run webority brand --library.
 $body-color: #252f4a !default;
 $body-secondary-color: #4b5675 !default;
 $body-tertiary-color: #626a82 !default;

package/scss/_tokens.generated.scss

@@ -1,4 +1,4 @@
-// Generated by @webority/tokens 0.101.5 from its token source. Do not edit; run webority brand --library.
+// Generated by @webority/tokens 0.102.0 from its token source. Do not edit; run webority brand --library.
 
 :root {
     --wui-primary: #4F46E5;

package/scss/wui/_context-menu.scss

@@ -18,7 +18,7 @@ wui-context-menu {
     // Above a modal, like every other portalled menu (see --wui-z-* in _tokens.scss).
     z-index: var(--wui-z-menu);
     // Never taller than the screen; anchorOverlay clamps it further when the pointer is low.
-    max-height: calc(100vh - 8px);
+    max-height: calc(100vh - var(--wui-space-sm));
     // Focus lands on the panel itself after a pointer open; the rows carry the visible focus.
     outline: none;
     transform-origin: top left;
@@ -44,10 +44,86 @@ wui-context-menu {
         cursor: default;
         background: transparent;
     }
+    // Dropdown rows are flex, which would show a row a search hid unless the hidden state wins here.
+    [hidden] {
+        display: none;
+    }
+}
+
+// A submenu's panel is a descendant of the root panel, so it takes the rows and disabled rules
+// above; it is placed beside its row by anchorOverlay and opens toward the side it chose.
+.dropdown-menu.wui-context-menu-subpanel {
+    position: fixed;
+    z-index: var(--wui-z-menu);
+    max-height: calc(100vh - var(--wui-space-sm));
+    outline: none;
+    transform-origin: top left;
+
+    &[data-open] {
+        display: block;
+        animation: var(--wui-menu-anim) var(--wui-menu-anim-duration) var(--wui-menu-anim-ease);
+    }
+    &[data-side="start"] {
+        transform-origin: top right;
+    }
+}
+
+// The filter of a searchable submenu, above its rows.
+.wui-context-menu-search {
+    display: block;
+    width: 100%;
+    margin-block-end: var(--wui-space-xxs);
+    padding: var(--wui-space-xs) var(--wui-space-sm);
+    font: inherit;
+    font-size: var(--wui-fs-sm);
+    color: var(--color-text);
+    background: var(--color-surface);
+    border: 1px solid var(--color-border);
+    border-radius: var(--wui-radius-md);
+    corner-shape: squircle;
+    &:focus-visible {
+        outline: var(--wui-focus-ring-width) solid var(--color-focus-ring);
+        outline-offset: var(--wui-focus-ring-inset);
+    }
+}
+
+// The marker of a row that opens a submenu, at its trailing edge.
+.wui-context-menu-sub > .dropdown-item > .wui-context-menu-chevron {
+    flex: none;
+    margin-inline-start: auto;
+}
+
+// The muted text a row carries at its trailing edge (its data-hint, such as a shortcut).
+.wui-context-menu-hint {
+    margin-inline-start: auto;
+    padding-inline-start: var(--wui-space-md);
+    color: var(--color-text-subtle);
+    font-size: var(--wui-fs-xs);
+    font-weight: var(--wui-fw-normal);
+    white-space: nowrap;
+}
+
+// The tick of a row that is checked. Every aria-checked row reserves the space, so the labels of
+// a checked and an unchecked row line up.
+.dropdown-menu.wui-context-menu-panel .dropdown-item[aria-checked] {
+    position: relative;
+    padding-inline-start: var(--wui-space-xl);
+}
+// Glyph geometry: a checkmark drawn with borders, sized to sit beside the row's text.
+.wui-context-menu-tick {
+    position: absolute;
+    inset-inline-start: var(--wui-space-sm);
+    top: 50%;
+    width: var(--wui-space-xs);
+    height: var(--wui-space-sm);
+    border: solid currentColor;
+    border-width: 0 var(--wui-space-xxs) var(--wui-space-xxs) 0;
+    transform: translateY(-65%) rotate(45deg);
 }
 
 @media (prefers-reduced-motion: reduce) {
-    .dropdown-menu.wui-context-menu-panel[data-open] {
+    .dropdown-menu.wui-context-menu-panel[data-open],
+    .dropdown-menu.wui-context-menu-subpanel[data-open] {
         animation: none;
     }
 }

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

@@ -22,6 +22,19 @@
     text-overflow: ellipsis;
     white-space: nowrap;
 }
+// The slot holds interactive content such as a menu, which must not be clipped.
+.page-header.page-header-bar .page-title.wui-page-title-slot {
+    overflow: visible;
+    text-overflow: clip;
+}
+// A menu in the slot takes its own text styles, not the heading's nowrap and size.
+.wui-page-title-slot .dropdown-menu {
+    white-space: normal;
+    font-size: var(--wui-fs-sm);
+    font-weight: var(--wui-fw-normal);
+    letter-spacing: normal;
+    line-height: normal;
+}
 .page-header.page-header-bar:has(> .page-header-bar-views) .page-title {
     max-width: 280px;
 }