@webority/theme 0.7.6 → 0.7.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webority/theme",
-  "version": "0.7.6",
+  "version": "0.7.7",
   "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/_variables.scss

@@ -222,6 +222,23 @@ $link-hover-decoration: underline;
 $focus-ring-width: 3px; // BS 0.25rem (4px)
 
 
+// ---- Z-index ----------------------------------------------------------
+// Mirrors the --wui-z-* ladder in _tokens.scss (full rationale there). Our modal is
+// elevated to 1505 via a CSS custom property set directly in wui/_overlays.scss —
+// Bootstrap's own $zindex-modal SCSS var is unused by it — but Bootstrap's stock
+// popover/tooltip/toast (1070/1080/1090) are still miles below that, so any of
+// those fired from inside an <AppModal> painted UNDER the dialog. Bring them onto
+// the ladder's -menu/-tooltip/-toast rungs. Dropdown/sticky/fixed/offcanvas already
+// sit at or near their matching -dropdown/-sticky/-fixed/-shell-scrim/-shell-drawer
+// rungs, so those are left at Bootstrap's defaults.
+//
+// SCSS variables are compile-time and can't reference the runtime custom
+// properties above — keep these numbers in sync with _tokens.scss by hand.
+$zindex-popover: 1600;
+$zindex-tooltip: 1650;
+$zindex-toast: 1700;
+
+
 // ---- Table ----------------------------------------------------------
 // Set HERE, not in the component layer, and the reason is specificity.
 // Bootstrap emits `.table > :not(caption) > * > * { padding: … }` at (0,1,1).

package/scss/wui/_media.scss

@@ -312,6 +312,14 @@
     border-color: var(--color-primary);
     background: var(--color-primary-soft);
 }
+// The hidden input is a sibling of the label (not a descendant), so :focus-within on
+// .attach-drop never fires — reach the label through the general sibling combinator instead.
+.attach-drop:has(+ input:focus-visible) {
+    border-color: var(--color-primary);
+    background: var(--color-primary-soft);
+    outline: 2px solid var(--color-primary);
+    outline-offset: 2px;
+}
 .attach-drop-icon {
     flex: 0 0 auto;
     width: 36px;

package/scss/wui/_navigation.scss

@@ -42,7 +42,9 @@
     height: 100vh;
     background: var(--color-surface);
     border-left: 1px solid var(--color-border);
-    z-index: 200;
+    // Same rung as the mobile sidebar drawer — the highest shell-chrome rung below
+    // the modal ladder, so this panel is never trapped under sticky/fixed shell chrome.
+    z-index: var(--wui-z-shell-drawer);
     transform: translateX(100%);
     transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
     display: flex;
@@ -58,7 +60,7 @@
     opacity: 0;
     pointer-events: none;
     transition: opacity 0.2s;
-    z-index: 150;
+    z-index: var(--wui-z-shell-scrim);
 }
 .drawer-backdrop.open {
     opacity: 1;

package/scss/wui/_shell.scss

@@ -262,6 +262,14 @@
     width: 0;
     height: 0;
 }
+// Between the brand row and the nav — a workspace/tenant switcher, an environment
+// badge. It must not shrink when the nav overflows, and it has no place on the
+// 88px rail, so the collapsed state removes it (the mobile drawer restores it).
+.app-sidebar-start {
+    flex: none;
+    margin-bottom: 8px;
+    overflow: hidden;
+}
 .app-sidebar-foot {
     flex: none;
     padding-top: 12px;
@@ -369,7 +377,8 @@
 .app-shell.collapsed .app-nav-text,
 .app-shell.collapsed .app-nav-badge,
 .app-shell.collapsed .app-nav-group-label,
-.app-shell.collapsed .app-sidebar-brand-text {
+.app-shell.collapsed .app-sidebar-brand-text,
+.app-shell.collapsed .app-sidebar-start {
     display: none;
 }
 
@@ -492,7 +501,7 @@
     // 36px = half the 72px topbar, so the button lines up with the topbar's centre.
     top: 36px;
     left: calc(var(--app-sidebar-w) - 12px);
-    z-index: 30;
+    z-index: var(--wui-z-fixed);
     width: 24px;
     height: 24px;
     display: inline-grid;
@@ -597,7 +606,7 @@
     right: 0;
     bottom: 0;
     left: var(--app-sidebar-w);
-    z-index: 30;
+    z-index: var(--wui-z-fixed);
     background: color-mix(in srgb, var(--color-surface) 90%, transparent);
     backdrop-filter: blur(50px);
     -webkit-backdrop-filter: blur(50px);
@@ -638,7 +647,8 @@
     }
     .app-shell.app-shell.collapsed .app-nav-text,
     .app-shell.app-shell.collapsed .app-nav-badge,
-    .app-shell.app-shell.collapsed .app-nav-group-label {
+    .app-shell.app-shell.collapsed .app-nav-group-label,
+    .app-shell.app-shell.collapsed .app-sidebar-start {
         display: revert;
     }
     .app-shell.app-shell .app-sidebar-toggle {

package/scss/wui/_utilities.scss

@@ -89,7 +89,9 @@
     bottom: calc(100% + 8px);
     left: 50%;
     transform: translateX(-50%);
-    z-index: 220;
+    // Same rung as the .is-portal variant below — an anchored infotip inside a
+    // modal must clear the same modal it was previously trapped under at 220.
+    z-index: var(--wui-z-menu);
     display: flex;
     flex-direction: column;
     gap: 4px;