@webority/theme 0.7.5 → 0.7.7

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/_typography.scss

@@ -279,6 +279,22 @@ wui-multiselect[collapse-chips] .ms-chips {
     align-items: center;
     gap: 8px;
 }
+.ms-input {
+    flex: 1;
+    min-width: 60px;
+    border: none;
+    background: transparent;
+    font: inherit;
+    color: inherit;
+    padding: 0;
+    margin: 0;
+}
+.ms-input::placeholder {
+    color: var(--color-text-subtle);
+}
+.ms-input:focus {
+    outline: none;
+}
 
 /* ── Choice card: image / custom-template variant ── */
 .struct-card-img-card {

package/scss/wui/_utilities.scss

@@ -76,17 +76,22 @@
     transform: scaleY(-1);
     transition: color 0.15s;
 }
-.infotip-btn:hover,
+.infotip-btn:hover {
+    color: var(--color-primary);
+}
 .infotip-btn:focus-visible {
     color: var(--color-primary);
-    outline: none;
+    outline: 2px solid var(--color-primary);
+    outline-offset: 2px;
 }
 .infotip-pop {
     position: absolute;
     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;
@@ -141,9 +146,91 @@
 }
 
 // ── Page header ──
+// `.page-header` stacks an optional breadcrumbs row above `.page-header-bar` — the
+// flex row that holds the title block on the left and the page actions on the right.
 .page-header {
     margin-bottom: 24px;
 }
+.page-header-bar {
+    display: flex;
+    align-items: flex-end;
+    justify-content: space-between;
+    gap: 16px;
+}
+// Left block: an optional leading icon tile + the title stack, kept together.
+.page-header-lead {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    min-width: 0;
+}
+// A breadcrumbs row above the masthead row.
+.page-breadcrumbs {
+    margin-bottom: 10px;
+}
+// Leading icon tile — tinted by `tone` (default primary), matching the modal head icon.
+.page-header-icon {
+    flex: none;
+    display: inline-grid;
+    place-items: center;
+    width: 40px;
+    height: 40px;
+    border-radius: var(--radius);
+    corner-shape: squircle;
+    background: var(--color-primary-soft);
+    color: var(--color-primary);
+}
+.page-header.tone-success .page-header-icon {
+    background: var(--color-success-soft);
+    color: var(--color-success-text);
+}
+.page-header.tone-warning .page-header-icon {
+    background: var(--color-warning-soft);
+    color: var(--color-warning-text);
+}
+.page-header.tone-danger .page-header-icon {
+    background: var(--color-danger-soft);
+    color: var(--color-danger-text);
+}
+.page-header.tone-info .page-header-icon {
+    background: var(--color-info-soft);
+    color: var(--color-info-text);
+}
+.page-header-titles {
+    min-width: 0;
+}
+// Eyebrow — a small kicker label above the title (a section / category marker).
+.page-eyebrow {
+    font-size: 12px;
+    font-weight: 700;
+    letter-spacing: 0.06em;
+    text-transform: uppercase;
+    color: var(--color-primary);
+    margin-bottom: 3px;
+}
+.page-header.tone-success .page-eyebrow {
+    color: var(--color-success-text);
+}
+.page-header.tone-warning .page-eyebrow {
+    color: var(--color-warning-text);
+}
+.page-header.tone-danger .page-eyebrow {
+    color: var(--color-danger-text);
+}
+.page-header.tone-info .page-eyebrow {
+    color: var(--color-info-text);
+}
+// Title + an optional inline status pill, on one baseline.
+.page-titlebar {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    flex-wrap: wrap;
+}
+.page-status {
+    display: inline-flex;
+    align-items: center;
+}
 .page-title {
     font-size: 24px;
     font-weight: 600;
@@ -162,17 +249,67 @@
     align-items: center;
 }
 
+// ── Size scale ── (`size`): the title and the block's rhythm scale together.
+.page-header-sm {
+    margin-bottom: 16px;
+}
+.page-header-sm .page-title {
+    font-size: 20px;
+}
+.page-header-sm .page-header-icon {
+    width: 34px;
+    height: 34px;
+}
+.page-header-lg {
+    margin-bottom: 32px;
+}
+.page-header-lg .page-title {
+    font-size: 30px;
+}
+.page-header-lg .page-header-icon {
+    width: 48px;
+    height: 48px;
+}
+
+// ── Centre alignment ── (`align="center"`): for empty-state and wizard mastheads.
+.page-header-center .page-header-bar {
+    justify-content: center;
+    text-align: center;
+}
+.page-header-center .page-header-lead {
+    flex-direction: column;
+    align-items: center;
+}
+.page-header-center .page-titlebar {
+    justify-content: center;
+}
+
+// ── Divider ── (`divider`): a hairline rule under the masthead.
+.page-header-divider {
+    border-bottom: 1px solid var(--color-border);
+    padding-bottom: 16px;
+}
+
+// ── Sticky ── (`sticky`): pins the masthead to the top of its scroll container.
+.page-header-sticky {
+    position: sticky;
+    top: 0;
+    z-index: 20;
+    background: var(--color-surface);
+    padding-top: 12px;
+}
+
 // Tablet and below: the masthead stops being a single row — the title block and
 // its actions stack, and the actions stretch to the full width rather than
 // crowding the title. Bootstrap's lg tier (991.98px), not an invented breakpoint.
 //
-// Selectors are DOUBLED (`.page-header.page-header`) on purpose. A media query
-// adds no specificity, so a consumer's own single-class rule — written later in
-// the cascade, as a consuming app's stylesheet always is — silently beats the
+// Selectors are DOUBLED (`.page-header-bar.page-header-bar`) on purpose. A media
+// query adds no specificity, so a consumer's own single-class rule — written later
+// in the cascade, as a consuming app's stylesheet always is — silently beats the
 // responsive rule and the layout never collapses. Doubling puts these at (0,2,0)
 // so they hold, while still leaving a consumer free to override deliberately.
 @media (max-width: 991.98px) {
-    .page-header.page-header {
+    .page-header-bar.page-header-bar {
         flex-direction: column;
         align-items: stretch;
         gap: 12px;