@webority/theme 0.7.1 → 0.7.3

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

@@ -79,58 +79,10 @@
     flex-direction: column;
     overflow: hidden;
 }
-.wui-modal-wide {
-    max-width: var(--wui-modal-max-width, 1240px);
-}
-
-// Side drawer — the dialog docks to the right edge at 30% of the viewport
-// and slides in, instead of sitting centred. Same chrome, different
-// geometry.
-.modal.wui-modal-shell.is-side {
-    align-items: stretch;
-    justify-content: flex-end;
-    padding: 0;
-}
-.modal.wui-modal-shell.is-side .modal-dialog.wui-rb-dialog {
-    height: 100%;
-    width: auto;
-    max-width: none;
-    align-items: stretch;
-    justify-content: flex-end;
-}
-.wui-modal-side {
-    width: 30vw;
-    min-width: 420px;
-    max-width: none;
-    max-height: 100vh;
-    height: 100vh;
-    border-radius: 0;
-    corner-shape: normal;
-    animation: wui-drawer-in 0.32s cubic-bezier(0.22, 1, 0.36, 1);
-}
-@media (max-width: 991.98px) {
-    .wui-modal-side {
-        width: 70vw;
-    }
-}
-@media (max-width: 575.98px) {
-    .wui-modal-side {
-        width: 100vw;
-    }
-}
-@keyframes wui-drawer-in {
-    from {
-        transform: translateX(100%);
-    }
-    to {
-        transform: translateX(0);
-    }
-}
-@media (prefers-reduced-motion: reduce) {
-    .wui-modal-side {
-        animation: none;
-    }
-}
+// The centred card keeps Bootstrap's own modal transition — a smooth fade + slide-down that
+// Bootstrap already disables under prefers-reduced-motion. Nothing to override here; both
+// react-bootstrap (animation on) and Bootstrap's JS drive it. Width comes from `size`, which
+// both surfaces resolve to `--wui-modal-max-width` on the shell (it inherits to `.wui-modal`).
 .wui-modal-header {
     flex: 0 0 auto;
     display: flex;
@@ -210,6 +162,38 @@
     color: var(--color-text-muted);
     overflow-wrap: anywhere;
 }
+// Eyebrow — a small kicker label above the title (a section / step / category marker).
+.wui-modal-eyebrow {
+    font-size: 11px;
+    font-weight: 700;
+    letter-spacing: 0.06em;
+    text-transform: uppercase;
+    color: var(--color-primary);
+    margin-bottom: 2px;
+}
+// `tone` tints the header icon tile and the eyebrow, so a destructive or a success dialog
+// carries its intent in the header. Default keeps the neutral primary tint above.
+.wui-modal.tone-danger .wui-modal-headicon {
+    background: var(--color-danger-soft);
+    color: var(--color-danger-text);
+}
+.wui-modal.tone-danger .wui-modal-eyebrow {
+    color: var(--color-danger-text);
+}
+.wui-modal.tone-success .wui-modal-headicon {
+    background: var(--color-success-soft);
+    color: var(--color-success-text);
+}
+.wui-modal.tone-success .wui-modal-eyebrow {
+    color: var(--color-success-text);
+}
+.wui-modal.tone-warning .wui-modal-headicon {
+    background: var(--color-warning-soft);
+    color: var(--color-warning-text);
+}
+.wui-modal.tone-warning .wui-modal-eyebrow {
+    color: var(--color-warning-text);
+}
 .wui-form-section {
     margin-top: 24px;
 }

package/scss/wui/_scrollbar.scss

@@ -0,0 +1,32 @@
+// 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.
+.wui-scroll {
+    overflow: auto;
+    scrollbar-width: thin;
+    scrollbar-color: var(--wui-text-3) transparent;
+}
+
+.wui-scroll::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+}
+
+.wui-scroll::-webkit-scrollbar-track {
+    background: transparent;
+}
+
+.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.
+    border: 2px solid transparent;
+    background-clip: padding-box;
+}
+
+.wui-scroll::-webkit-scrollbar-thumb:hover {
+    background-color: var(--wui-text-2);
+}

package/scss/wui/_shell.scss

@@ -25,31 +25,47 @@
     align-items: center;
     gap: 18px;
     text-align: center;
+    // Ease in on mount so the boot screen settles rather than snapping into place.
+    animation: wui-splash-enter 0.5s var(--wui-ease-ui) both;
 }
+// One diameter drives the mark, its initials, the logo cap, and the bar width — the `size`
+// preset or a custom pixel value resolves to `--wui-splash-size` (set inline by App*/<app-*>).
 .splash-logo {
-    max-width: 180px;
+    max-width: calc(var(--wui-splash-size, 56px) * 3.2);
     height: auto;
+    // A slow breath keeps the brand mark feeling alive through the wait.
+    animation: wui-splash-breathe 2.6s ease-in-out infinite;
 }
 .splash-mark {
-    width: 56px;
-    height: 56px;
+    width: var(--wui-splash-size, 56px);
+    height: var(--wui-splash-size, 56px);
     display: inline-grid;
     place-items: center;
     border-radius: var(--radius-lg);
     background: var(--color-primary);
     color: var(--color-on-scrim);
-    font-size: 22px;
+    font-size: calc(var(--wui-splash-size, 56px) * 0.39);
     font-weight: 700;
+    animation: wui-splash-breathe 2.6s ease-in-out infinite;
 }
 .splash-text {
     font-size: 14px;
     color: var(--color-text-muted);
 }
-// A determinate-looking bar with no real progress value would lie about how far
-// along boot is, so this is an indeterminate sweep.
+// A quieter second line — a reassurance under the main status. Uses --color-text-muted (not
+// -subtle): -subtle is ~4.54:1 on the splash bg and flakes the AA contrast check at 12px; the
+// smaller size (vs .splash-text) already sets the hierarchy without dropping below AA.
+.splash-subtext {
+    margin-top: -12px;
+    font-size: 12px;
+    color: var(--color-text-muted);
+}
+
+// ── Boot indicators — one shows, chosen by `variant`. A determinate-looking value would lie
+// about how far along boot is, so every variant is indeterminate. ──
 .splash-bar {
     position: relative;
-    width: 180px;
+    width: calc(var(--wui-splash-size, 56px) * 3.2);
     height: 3px;
     overflow: hidden;
     border-radius: 999px;
@@ -62,9 +78,62 @@
     bottom: 0;
     width: 40%;
     border-radius: 999px;
-    background: var(--color-primary);
+    // Feathered edges read smoother than a hard block sliding across.
+    background: linear-gradient(
+        90deg,
+        transparent,
+        var(--color-primary) 35%,
+        var(--color-primary) 65%,
+        transparent
+    );
     animation: wui-splash-sweep 1.1s var(--wui-ease-ui) infinite;
 }
+// A spinning arc — the circular take on the same "working, no percentage" idea.
+.splash-ring {
+    width: 30px;
+    height: 30px;
+    border-radius: 50%;
+    border: 3px solid var(--color-bg-muted);
+    border-top-color: var(--color-primary);
+    animation: wui-splash-spin 0.8s linear infinite;
+}
+// Three dots taking turns rising — a lighter, friendlier wait.
+.splash-dots {
+    display: inline-flex;
+    gap: 7px;
+}
+.splash-dots i {
+    width: 9px;
+    height: 9px;
+    border-radius: 50%;
+    background: var(--color-primary);
+    animation: wui-splash-dot 1.2s ease-in-out infinite;
+}
+.splash-dots i:nth-child(2) {
+    animation-delay: 0.16s;
+}
+.splash-dots i:nth-child(3) {
+    animation-delay: 0.32s;
+}
+@keyframes wui-splash-enter {
+    from {
+        opacity: 0;
+        transform: translateY(8px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+@keyframes wui-splash-breathe {
+    0%,
+    100% {
+        transform: scale(1);
+    }
+    50% {
+        transform: scale(1.045);
+    }
+}
 @keyframes wui-splash-sweep {
     from {
         transform: translateX(-100%);
@@ -73,9 +142,37 @@
         transform: translateX(350%);
     }
 }
+@keyframes wui-splash-spin {
+    to {
+        transform: rotate(360deg);
+    }
+}
+@keyframes wui-splash-dot {
+    0%,
+    60%,
+    100% {
+        transform: translateY(0);
+        opacity: 0.45;
+    }
+    30% {
+        transform: translateY(-7px);
+        opacity: 1;
+    }
+}
 @media (prefers-reduced-motion: reduce) {
+    // Motion off: settle instantly, drop breathing and the spinning/bouncing indicators.
+    .splash-inner,
+    .splash-logo,
+    .splash-mark,
+    .splash-ring,
+    .splash-dots i {
+        animation: none;
+    }
+    .splash-dots i {
+        opacity: 0.7;
+    }
     .splash-bar::after {
-        // Motion off, but keep a visible bar — an empty track would read as stalled.
+        // Keep a visible bar — an empty track would read as stalled.
         animation: none;
         width: 100%;
         opacity: 0.55;
@@ -237,13 +334,17 @@
     color: var(--color-primary);
 }
 .app-nav-text {
+    // Grows to fill the row so every trailing element — badge, trailing marker,
+    // expand caret — lines up at the end in source order without each needing its
+    // own `margin-left:auto` (which would fight when more than one is present).
+    flex: 1 1 auto;
     min-width: 0;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
 }
 .app-nav-badge {
-    margin-left: auto;
+    flex: none;
     padding: 1px 7px;
     border-radius: 999px;
     background: var(--color-bg-muted);
@@ -272,6 +373,117 @@
     display: none;
 }
 
+// ── Badge tones ──────────────────────────────────────────────────────────────
+// A nav badge can carry a status tone so an alert count reads red, not neutral.
+.app-nav-badge.tone-danger {
+    background: var(--color-danger-soft);
+    color: var(--color-danger);
+}
+.app-nav-badge.tone-success {
+    background: var(--color-success-soft);
+    color: var(--color-success);
+}
+.app-nav-badge.tone-warning {
+    background: var(--color-warning-soft);
+    color: var(--color-warning);
+}
+// The existing `.app-nav-item.active .app-nav-badge` inverts a tinted badge on an
+// active row (higher specificity), so an active row's badge stays legible.
+
+// ── Trailing marker ──────────────────────────────────────────────────────────
+// A right-aligned secondary glyph after the label (a lock, an external arrow, a
+// "new" dot) — distinct from the count badge, and may sit beside one.
+.app-nav-trailing {
+    flex: none;
+    display: inline-grid;
+    place-items: center;
+    color: var(--color-text-subtle);
+}
+.app-nav-item.active .app-nav-trailing {
+    color: var(--color-primary);
+}
+
+// ── Expandable sub-items ─────────────────────────────────────────────────────
+// A parent row that toggles a nested list. It reuses the .app-nav-item chrome but
+// is a <button>; the caret rotates open. The nested list animates its height via
+// grid-template-rows 0fr→1fr, so there is no fixed max-height to guess.
+.app-nav-item.has-children {
+    width: 100%;
+    border: 0;
+    background: transparent;
+    font: inherit;
+    text-align: left;
+    cursor: pointer;
+}
+.app-nav-caret {
+    flex: none;
+    display: inline-grid;
+    place-items: center;
+    color: var(--color-text-subtle);
+    transition: transform 0.2s var(--wui-ease-ui);
+}
+.app-nav-item.has-children[aria-expanded="true"] .app-nav-caret {
+    transform: rotate(90deg);
+}
+.app-nav-sub {
+    display: grid;
+    grid-template-rows: 0fr;
+    transition: grid-template-rows 0.24s var(--wui-ease-ui);
+}
+.app-nav-sub-inner {
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+    padding-top: 2px;
+}
+.app-nav-sub.expanded {
+    grid-template-rows: 1fr;
+}
+// Child link indented under the parent label (icon slot + gap), smaller, no icon.
+.app-nav-subitem {
+    min-height: 38px;
+    padding-left: 46px;
+    font-size: 13px;
+}
+
+// ── Collapsed rail: label tooltip ────────────────────────────────────────────
+// The rail hides labels, so surface each on hover/focus as a chip to the right —
+// otherwise the icons are unlabelled. Sub-lists and carets have no place in a rail.
+.app-shell.collapsed .app-nav-sub,
+.app-shell.collapsed .app-nav-caret {
+    display: none;
+}
+@include media-breakpoint-up(lg) {
+    .app-shell.collapsed .app-nav-item[data-label]::after {
+        content: attr(data-label);
+        position: absolute;
+        left: calc(100% + 12px);
+        top: 50%;
+        z-index: 40;
+        padding: 5px 10px;
+        border-radius: var(--radius-lg);
+        background: var(--color-text);
+        color: var(--color-surface);
+        font-size: 12px;
+        font-weight: 500;
+        white-space: nowrap;
+        box-shadow: var(--shadow-md);
+        opacity: 0;
+        transform: translateY(-50%) scale(0.96);
+        transform-origin: left center;
+        pointer-events: none;
+        transition:
+            opacity 0.12s ease,
+            transform 0.12s ease;
+    }
+    .app-shell.collapsed .app-nav-item[data-label]:hover::after,
+    .app-shell.collapsed .app-nav-item[data-label]:focus-visible::after {
+        opacity: 1;
+        transform: translateY(-50%) scale(1);
+    }
+}
+
 // A circular button centred on the sidebar's right edge. It is fixed to the
 // viewport, not a sidebar child, because the sidebar clips its own overflow and
 // would cut the button in half.