@webority/theme 0.7.2 → 0.7.4

package/scss/wui/_display.scss

@@ -28,6 +28,33 @@
     background: var(--color-primary-soft);
     color: var(--color-primary);
 }
+// Tone modifiers — same semantic vocabulary as .badge/.status-label (success / warning /
+// danger / info / primary / neutral). primary is the default look above, restated here so
+// an explicit icon-tone="primary" matches an omitted one.
+.kpi-icon-primary {
+    background: var(--color-primary-soft);
+    color: var(--color-primary);
+}
+.kpi-icon-success {
+    background: var(--color-success-soft);
+    color: var(--color-success-text);
+}
+.kpi-icon-warning {
+    background: var(--color-warning-soft);
+    color: var(--color-warning-text);
+}
+.kpi-icon-danger {
+    background: var(--color-danger-soft);
+    color: var(--color-danger-text);
+}
+.kpi-icon-info {
+    background: var(--color-info-soft);
+    color: var(--color-info-text);
+}
+.kpi-icon-neutral {
+    background: var(--color-bg-muted);
+    color: var(--color-text-muted);
+}
 .kpi-label {
     font-size: 13px;
     font-weight: 500;
@@ -61,6 +88,20 @@
 .kpi-delta.down {
     color: var(--color-danger-text);
 }
+// Trend chart. currentColor so it inherits kpi-value's colour by default, or a wrapping
+// tone context (e.g. .kpi-delta.up) if placed there — no colour hardcoded here.
+.kpi-sparkline {
+    display: block;
+    width: 48px;
+    height: 16px;
+    margin-top: 8px;
+    color: var(--color-primary);
+}
+.kpi-sparkline polyline {
+    stroke-width: 1.5;
+    stroke-linecap: round;
+    stroke-linejoin: round;
+}
 
 // Icon-left layout: the icon spans the label/value/delta stack instead of sitting above it.
 .kpi.kpi-inline {
@@ -89,6 +130,48 @@
     border-color: transparent;
     background: var(--color-primary-soft);
 }
+// Needs-action state — orthogonal to variant, so it composes with plain/filled/accent
+// rather than replacing the surface.
+.kpi.kpi-attention {
+    border-color: var(--color-warning);
+    background: var(--color-warning-soft);
+}
+
+// Hero size — the single headline stat above a dashboard. Enlarges the value and its
+// chrome; orthogonal to variant/inline/attention, so it composes with all of them.
+.kpi.kpi-lg {
+    padding: 20px;
+}
+.kpi.kpi-lg .kpi-label {
+    font-size: 14px;
+}
+.kpi.kpi-lg .kpi-value {
+    font-size: 40px;
+}
+.kpi.kpi-lg .kpi-icon {
+    width: 44px;
+    height: 44px;
+}
+
+// The whole tile as a link (href). Colour/underline reset so the anchor reads as the
+// card, not as text; the hover lift matches .res-card's tint-and-lift treatment.
+a.kpi {
+    text-decoration: none;
+    color: inherit;
+    transition:
+        border-color 0.15s ease,
+        box-shadow 0.15s ease,
+        transform 0.15s ease;
+}
+a.kpi:hover {
+    border-color: var(--color-primary);
+    box-shadow: var(--shadow-md);
+    transform: translateY(-2px);
+}
+a.kpi:focus-visible {
+    outline: 2px solid var(--color-primary);
+    outline-offset: 2px;
+}
 
 // A row of tiles. Wraps rather than scrolls — a KPI strip that scrolls hides numbers.
 .kpi-row {
@@ -163,6 +246,11 @@
     text-overflow: ellipsis;
     white-space: nowrap;
 }
+// A blank fact reads as a muted "no value", not a broken row.
+.info-value.is-empty {
+    font-weight: 400;
+    color: var(--color-text-subtle);
+}
 a.info-row,
 a.info-row:hover {
     text-decoration: none;

package/scss/wui/_media.scss

@@ -494,6 +494,30 @@
 .file-preview:hover .file-preview-img {
     transform: scale(1.03);
 }
+// Non-image single file: a centered file-type icon + name filling the same shell as the image
+// thumbnail, so a PDF/doc doesn't render as a broken <img>.
+.file-preview-file {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
+    width: 100%;
+    height: 100%;
+    padding: 16px;
+    color: var(--color-text-subtle);
+    background: var(--color-bg-muted);
+}
+.file-preview-file-name {
+    max-width: 100%;
+    overflow: hidden;
+    font-size: 13px;
+    line-height: 1.4;
+    color: var(--color-text);
+    text-align: center;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
 .file-preview-overlay {
     position: absolute;
     inset: 0;

package/scss/wui/_navigation.scss

@@ -108,28 +108,58 @@
 // The tab strip both surfaces render. React drives it as a controlled strip and
 // Razor additionally renders Bootstrap panels beneath it, but the strip markup —
 // and therefore the look — is identical.
+//
+// The active state is an "ink bar" (.app-tab-indicator): one element per strip that
+// SLIDES between tabs with an elastic overshoot (--wui-ease-elastic). It is JS-measured
+// — variable-width tabs cannot be positioned in pure CSS — so until the JS wires the
+// strip (`[data-wui-tabs]`) the active tab keeps a plain static underline as a fallback,
+// and no-JS / first paint never show a bare strip.
+
+// Optional overflow wrapper: the scroll chevrons live HERE, outside the scrolling strip,
+// so they stay pinned while the tabs scroll under them.
+.app-tabs-wrap {
+    position: relative;
+    display: flex;
+    align-items: center;
+    gap: 4px;
+}
+
 .app-tabs {
+    position: relative;
     display: flex;
     align-items: center;
     gap: 2px;
     border-bottom: 1px solid var(--color-border);
     overflow-x: auto;
     scrollbar-width: none;
-    // The React AppTabs renders a react-bootstrap <Nav>, so the element also
-    // carries `.nav`, which declares `flex-wrap: wrap`. Both are (0,1,0), so
-    // today this wins only because the theme is imported after Bootstrap —
-    // see the doubled-selector rule below, which does not depend on that.
     flex-wrap: nowrap;
+    // Auto-scrolling the active tab into view (and the chevrons) glides rather than jumps.
+    scroll-behavior: smooth;
 }
-// Doubled to (0,2,0) so the tab strip keeps scrolling even if a consumer loads
-// Bootstrap after the theme, which would otherwise let `.nav` win on order.
+// Doubled to (0,2,0) so the strip keeps scrolling even if a consumer loads Bootstrap
+// after the theme, which would otherwise let `.nav`'s flex-wrap:wrap win on order.
 .app-tabs.app-tabs {
     flex-wrap: nowrap;
 }
 .app-tabs::-webkit-scrollbar {
     display: none;
 }
+// When the wrapper reports overflow, fade the clipped edge(s) so cut tabs read as
+// "more this way" rather than an abrupt crop. Masked on the strip (the scroller) itself.
+.app-tabs-wrap.is-overflow-start .app-tabs {
+    mask-image: linear-gradient(90deg, transparent, #000 28px);
+}
+.app-tabs-wrap.is-overflow-end .app-tabs {
+    mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent);
+}
+.app-tabs-wrap.is-overflow-start.is-overflow-end .app-tabs {
+    mask-image: linear-gradient(90deg, transparent, #000 28px, #000 calc(100% - 28px), transparent);
+}
+
 .app-tab {
+    position: relative;
+    // Above the pills ink bar, which sits at z-index 0.
+    z-index: 1;
     display: inline-flex;
     align-items: center;
     gap: 8px;
@@ -155,11 +185,17 @@
 }
 .app-tab.active {
     color: var(--color-primary);
+    // Static fallback underline (no-JS / first paint); the ink bar takes over once wired.
     border-bottom-color: var(--color-primary);
     // The active tab carries weight as well as colour — colour alone is a weak
     // signal for anyone who reads the strip at a glance or cannot distinguish it.
     font-weight: 600;
 }
+// Once JS wires the ink bar it owns the underline — drop the per-tab fallback so the
+// two never double up during a slide.
+.app-tabs[data-wui-tabs] .app-tab.active {
+    border-bottom-color: transparent;
+}
 .app-tab:disabled {
     color: var(--color-text-subtle);
     cursor: not-allowed;
@@ -180,10 +216,41 @@
     color: var(--color-danger-text);
     border-bottom-color: var(--color-danger);
 }
+.app-tabs[data-wui-tabs] .app-tab.danger.active {
+    border-bottom-color: transparent;
+}
 .app-tab.danger .app-tab-count {
     background: var(--color-danger-soft);
     color: var(--color-danger-text);
 }
+
+// ── The sliding ink bar ──
+// Positioned from JS-set custom props: --wui-tab-x/-w (horizontal), --wui-tab-y/-h
+// (vertical). Hidden until the strip is wired AND measured, so it never flashes at 0,0.
+.app-tab-indicator {
+    position: absolute;
+    left: 0;
+    bottom: -1px;
+    height: 2px;
+    width: var(--wui-tab-w, 0);
+    background: var(--color-primary);
+    border-radius: 2px;
+    transform: translateX(var(--wui-tab-x, 0));
+    opacity: 0;
+    pointer-events: none;
+    transition:
+        transform 0.42s var(--wui-ease-elastic),
+        width 0.42s var(--wui-ease-elastic),
+        opacity 0.15s ease;
+}
+.app-tabs[data-wui-tabs] .app-tab-indicator {
+    opacity: 1;
+}
+// A destructive active tab tints the bar red too (attribute set by the driver).
+.app-tabs[data-active-danger] .app-tab-indicator {
+    background: var(--color-danger);
+}
+
 // Trailing count pill.
 .app-tab-count {
     display: inline-flex;
@@ -221,13 +288,31 @@
     color: var(--color-info-text);
 }
 
+// ── Sizes ──
+.app-tabs-sm .app-tab {
+    padding: 6px 10px;
+    gap: 6px;
+    font-size: 13px;
+}
+.app-tabs-lg .app-tab {
+    padding: 14px 18px;
+    font-size: 15px;
+}
+
+// ── Fitted: tabs share the width equally (no scroll). ──
+.app-tabs-fitted .app-tab {
+    flex: 1 1 0;
+    justify-content: center;
+}
+
 // Wrapper for a self-contained tabs widget (strip + panels), as <app-tabs>
 // renders server-side. React composes the strip and its panels itself.
 .app-tabs-group > .tab-content {
     padding-top: 16px;
 }
 
-// Pills variant — a segmented control rather than an underline.
+// Pills variant — a segmented control rather than an underline; the ink bar becomes
+// the moving pill behind the active tab.
 .app-tabs-pills {
     gap: 4px;
     border-bottom: 0;
@@ -237,9 +322,104 @@
     margin-bottom: 0;
     border-radius: var(--radius);
 }
+// Fallback fill until the moving pill is wired.
 .app-tabs-pills .app-tab.active {
     background: var(--color-primary-soft);
 }
+.app-tabs-pills[data-wui-tabs] .app-tab.active {
+    background: transparent;
+}
+.app-tabs-pills .app-tab-indicator {
+    top: 0;
+    bottom: 0;
+    height: auto;
+    z-index: 0;
+    background: var(--color-primary-soft);
+    border-radius: var(--radius);
+}
+.app-tabs-pills[data-active-danger] .app-tab-indicator {
+    background: var(--color-danger-soft);
+}
+
+// ── Vertical orientation — a side rail; the ink bar becomes a moving left edge. ──
+.app-tabs-vertical {
+    flex-direction: column;
+    align-items: stretch;
+    border-bottom: 0;
+    border-left: 1px solid var(--color-border);
+    overflow-x: visible;
+    overflow-y: auto;
+}
+.app-tabs-vertical .app-tab {
+    justify-content: flex-start;
+    border-bottom: 0;
+    border-left: 2px solid transparent;
+    margin-bottom: 0;
+    margin-left: -1px;
+}
+.app-tabs-vertical .app-tab.active {
+    border-left-color: var(--color-primary);
+    border-bottom-color: transparent;
+}
+.app-tabs-vertical[data-wui-tabs] .app-tab.active {
+    border-left-color: transparent;
+}
+.app-tabs-vertical .app-tab-indicator {
+    left: -1px;
+    top: 0;
+    bottom: auto;
+    width: 2px;
+    height: var(--wui-tab-h, 0);
+    transform: translateY(var(--wui-tab-y, 0));
+    transition:
+        transform 0.42s var(--wui-ease-elastic),
+        height 0.42s var(--wui-ease-elastic),
+        opacity 0.15s ease;
+}
+// Vertical pills: the moving pill fills the row width.
+.app-tabs-vertical.app-tabs-pills .app-tab-indicator {
+    left: 0;
+    width: 100%;
+}
+
+// ── Scroll chevrons (overflow affordance) — shown by JS only when that side overflows. ──
+.app-tabs-scroll-btn {
+    flex: none;
+    display: none;
+    align-items: center;
+    justify-content: center;
+    width: 28px;
+    height: 28px;
+    padding: 0;
+    border: 1px solid var(--color-border);
+    border-radius: 999px;
+    background: var(--color-surface);
+    color: var(--color-text-muted);
+    cursor: pointer;
+}
+.app-tabs-scroll-btn:hover {
+    color: var(--color-text);
+    background: var(--color-bg-muted);
+}
+.app-tabs-scroll-btn:focus-visible {
+    outline: 2px solid var(--color-primary);
+    outline-offset: 2px;
+}
+.app-tabs-wrap.is-overflow-start .app-tabs-scroll-btn.prev,
+.app-tabs-wrap.is-overflow-end .app-tabs-scroll-btn.next {
+    display: inline-flex;
+}
+
+// ── Motion off — no slide, no overshoot; the bar just fades in place. ──
+@media (prefers-reduced-motion: reduce) {
+    .app-tab-indicator,
+    .app-tabs-vertical .app-tab-indicator {
+        transition: opacity 0.15s ease;
+    }
+    .app-tabs {
+        scroll-behavior: auto;
+    }
+}
 
 // ── Search field ──
 // The search control both surfaces render: a rounded field with a leading

package/scss/wui/_overlays.scss

@@ -16,13 +16,13 @@
 // .modal.
 .modal-backdrop.wui-modal-dim {
     background: rgba(15, 23, 42, 0.45);
-    z-index: 1500;
+    z-index: var(--wui-z-modal-backdrop);
 }
 .modal.wui-modal-shell {
     --bs-modal-bg: transparent;
     align-items: center;
     justify-content: center;
-    z-index: 1505;
+    z-index: var(--wui-z-modal);
     padding: 20px;
 }
 // `display: flex` ONLY while the dialog is actually open.

package/scss/wui/_scrollbar.scss

@@ -1,12 +1,10 @@
-// AppScrollbar — a thin, themed scrollbar drawn with NATIVE CSS scrollbar styling: no JavaScript
-// and no dependency (it replaced a wrapped simplebar-react, whose foreign `.simplebar-*` markup
-// and stylesheet had no place in the library). `scrollbar-width` / `scrollbar-color` style the
-// track on Firefox; the `::-webkit-scrollbar` rules cover Chromium and Safari. The track stays
-// transparent so the thumb reads as a slim overlay rather than filling a grey gutter.
+// AppScrollbar / opt-in internal scrollers — same tokens as the document rail
+// (--wui-scrollbar*). Document chrome lives on html/body only; use this class
+// for panels, drawers, and modal bodies that need a matching thin thumb.
 .wui-scroll {
     overflow: auto;
     scrollbar-width: thin;
-    scrollbar-color: var(--wui-text-3) transparent;
+    scrollbar-color: var(--wui-scrollbar) transparent;
 }
 
 .wui-scroll::-webkit-scrollbar {
@@ -19,14 +17,18 @@
 }
 
 .wui-scroll::-webkit-scrollbar-thumb {
-    background-color: var(--wui-text-3);
-    border-radius: 8px;
-    // A 2px transparent border clipped to padding-box insets the thumb, so it sits as a slim pill
-    // in the middle of the track instead of filling the whole gutter width.
+    background-color: var(--wui-scrollbar);
+    border-radius: 9999px;
     border: 2px solid transparent;
     background-clip: padding-box;
 }
 
 .wui-scroll::-webkit-scrollbar-thumb:hover {
-    background-color: var(--wui-text-2);
+    background-color: var(--wui-scrollbar-hover);
+    background-clip: padding-box;
+}
+
+.wui-scroll::-webkit-scrollbar-thumb:active {
+    background-color: var(--wui-scrollbar-active);
+    background-clip: padding-box;
 }

package/scss/wui/_shell.scss

@@ -13,7 +13,7 @@
     inset: 0;
     // Above the app but below a modal's backdrop, so an error dialog raised during
     // boot is never trapped behind it.
-    z-index: 1040;
+    z-index: var(--wui-z-shell);
     display: grid;
     place-items: center;
     padding: 24px;
@@ -619,7 +619,7 @@
         top: 0;
         bottom: 0;
         left: 0;
-        z-index: 1045;
+        z-index: var(--wui-z-shell-drawer);
         width: var(--app-sidebar-w);
         padding: 20px 16px;
         transform: translateX(-100%);
@@ -665,7 +665,7 @@
     .app-shell.app-shell.mobile-open .app-scrim {
         position: fixed;
         inset: 0;
-        z-index: 1044;
+        z-index: var(--wui-z-shell-scrim);
         display: block;
         border: 0;
         padding: 0;

package/scss/wui/_utilities.scss

@@ -116,7 +116,7 @@
 .infotip-pop.is-portal {
     bottom: auto;
     transform: none;
-    z-index: 1600;
+    z-index: var(--wui-z-menu);
 }
 .infotip-pop.is-portal::after {
     display: none;
@@ -235,6 +235,32 @@
     border: 2px solid var(--color-bg);
 }
 
+// Reset wrapper for a custom AppDropdown trigger (React `trigger` / Razor <app-dropdown-toggle>).
+// Strips the icon-button chrome so the caller's own node styles itself; keeps the button
+// focusable with a visible focus ring for keyboard a11y.
+.wui-dropdown-trigger {
+    display: inline-flex;
+    align-items: center;
+    padding: 0;
+    border: none;
+    background: transparent;
+    color: inherit;
+    font: inherit;
+    cursor: pointer;
+}
+.wui-dropdown-trigger:focus-visible {
+    outline: 2px solid var(--color-primary);
+    outline-offset: 2px;
+    border-radius: var(--radius-sm);
+}
+
+// AppPopover wrapper (React panel styling comes from Bootstrap's .popover; this is only the
+// Razor anchor span carrying the data-bs-* wiring). inline-block so it hugs its trigger and
+// gives Bootstrap a stable anchor box.
+.app-popover {
+    display: inline-block;
+}
+
 // ── Spinner / shimmer ──
 .wui-spinner {
     width: 18px;