@webority/theme 0.30.0 → 0.32.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webority/theme",
-  "version": "0.30.0",
+  "version": "0.32.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": {

package/scss/_tokens.scss

@@ -331,6 +331,7 @@
     --wui-z-shell-drawer: 1045; // mobile sidebar drawer
     --wui-z-modal-backdrop: 1500;
     --wui-z-modal: 1505;
+    --wui-z-tour: 1550; // product tour: above a modal, below menus and popovers
     --wui-z-menu: 1600; // portalled select/date/phone menus + infotip
     --wui-z-popover: 1600; // same rung as --wui-z-menu (above modal)
     --wui-z-tooltip: 1650;

package/scss/_variables.scss

@@ -236,6 +236,7 @@ $focus-ring-width: 3px; // BS 0.25rem (4px)
 //
 // 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-tour: 1550;
 $zindex-popover: 1600;
 $zindex-tooltip: 1650;
 $zindex-toast: 1700;

package/scss/_wui-components.scss

@@ -64,8 +64,11 @@
 @import "wui/toolbar";
 @import "wui/theme-toggle";
 @import "wui/tree";
+@import "wui/floating";
+@import "wui/chat";
 // After `overlays`: anchors the shared modal shell to the top when it holds the palette card.
 @import "wui/command-palette";
 @import "wui/context-menu";
+@import "wui/tour";
 // Last: restates the settled state of menus other partials style, so it must win.
 @import "wui/menu-motion";

package/scss/wui/_chart.scss

@@ -1,315 +1,14 @@
-// Charts: AppLineChart and AppBarChart, and the <wui-chart> element behind AppChart.
+// Charts: the <wui-chart> element behind AppChart.
 //
-// Part of the wui-components layer; see _wui-components.scss for the load order. The line and
-// bar charts use one accent (--color-primary), muted grid and labels, and direct labels instead of
-// a legend; the element draws series in the --wui-chart-* colours. Every colour is a token the
-// dark remap in _wui-aliases.scss flips with the rest of the portal.
-
-.wui-chart {
-    margin: 0;
-    min-width: 0;
-    color: var(--color-text-muted);
-    font-size: 12px;
-    font-variant-numeric: tabular-nums;
-}
-.wui-chart-title {
-    margin-bottom: 12px;
-    font-size: 14px;
-    font-weight: 600;
-    color: var(--color-text);
-}
-
-// ============================================================================
-// Line chart
-// ============================================================================
-// The top tick label sits above the top gridline, so the plot leaves room for it.
-.wui-chart-plot {
-    position: relative;
-    margin-top: 8px;
-}
-// Strokes overhang the plot by half their width at the top and bottom gridlines.
-.wui-chart-svg {
-    display: block;
-    overflow: visible;
-}
-.wui-chart-grid {
-    stroke: var(--color-border);
-    stroke-width: 1;
-}
-.wui-chart-reference {
-    stroke: var(--color-border-strong);
-    stroke-width: 1;
-    stroke-dasharray: 4 4;
-}
-.wui-chart-line {
-    stroke: var(--color-primary);
-    stroke-width: 2;
-    stroke-linecap: round;
-}
-// Bands are a quiet wash behind the series; the tone tints, it does not shout.
-.wui-chart-band {
-    fill: var(--color-bg-muted);
-    opacity: 0.6;
-}
-.wui-chart-band-info {
-    fill: var(--color-info-soft);
-}
-.wui-chart-band-success {
-    fill: var(--color-success-soft);
-}
-.wui-chart-band-warning {
-    fill: var(--color-warning-soft);
-}
-.wui-chart-band-danger {
-    fill: var(--color-danger-soft);
-}
-
-// Y tick values sit just above their gridline at the left edge, inside the plot, so the chart
-// spends no width on a label gutter at 320px.
-.wui-chart-tick,
-.wui-chart-band-label,
-.wui-chart-reference-label {
-    position: absolute;
-    font-size: 11px;
-    line-height: 1;
-    white-space: nowrap;
-    color: var(--color-text-muted);
-    pointer-events: none;
-}
-.wui-chart-tick {
-    left: 0;
-    padding-bottom: 3px;
-    transform: translateY(-100%);
-}
-.wui-chart-band-label {
-    right: 0;
-    padding-top: 3px;
-}
-.wui-chart-reference-label {
-    right: 0;
-    padding-bottom: 3px;
-    transform: translateY(-100%);
-}
-
-// A 24px hit area per point (WCAG 2.2 target size), drawn as an 8px ring.
-.wui-chart-point {
-    position: absolute;
-    width: 24px;
-    height: 24px;
-    margin: -12px 0 0 -12px;
-    padding: 0;
-    display: grid;
-    place-items: center;
-    border: 0;
-    border-radius: 50%;
-    background: transparent;
-    cursor: default;
-}
-.wui-chart-point:focus-visible {
-    outline: 2px solid var(--color-primary);
-    outline-offset: 0;
-}
-.wui-chart-dot {
-    width: 8px;
-    height: 8px;
-    border-radius: 50%;
-    border: 2px solid var(--color-primary);
-    background: var(--color-surface);
-    transition: transform 120ms var(--wui-ease-out-quart);
-}
-.wui-chart-point:hover .wui-chart-dot,
-.wui-chart-point:focus-visible .wui-chart-dot {
-    transform: scale(1.35);
-    background: var(--color-primary);
-}
-
-// CSS-only tooltip above the point; the first and last points anchor it to their own edge so
-// it never runs off a narrow chart.
-.wui-chart-tip {
-    position: absolute;
-    bottom: calc(100% + 4px);
-    left: 50%;
-    z-index: 1;
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-    gap: 2px;
-    padding: 6px 10px;
-    border: 1px solid var(--color-border-light);
-    border-radius: var(--radius);
-    background: var(--color-surface);
-    box-shadow: var(--wui-shadow-overlay);
-    white-space: nowrap;
-    text-align: left;
-    pointer-events: none;
-    visibility: hidden;
-    opacity: 0;
-    transform: translateX(-50%);
-    transition:
-        opacity 120ms var(--wui-ease-out-quart),
-        visibility 120ms;
-}
-.wui-chart-point-start .wui-chart-tip {
-    left: 0;
-    transform: none;
-}
-.wui-chart-point-end .wui-chart-tip {
-    left: auto;
-    right: 0;
-    transform: none;
-}
-.wui-chart-point:hover .wui-chart-tip,
-.wui-chart-point:focus-visible .wui-chart-tip {
-    visibility: visible;
-    opacity: 1;
-}
-.wui-chart-tip-label {
-    font-size: 11px;
-    color: var(--color-text-muted);
-}
-.wui-chart-tip-value {
-    font-size: 13px;
-    font-weight: 600;
-    color: var(--color-text);
-}
-
-.wui-chart-xaxis {
-    position: relative;
-    height: 16px;
-    margin-top: 6px;
-}
-.wui-chart-xlabel {
-    position: absolute;
-    top: 0;
-    font-size: 11px;
-    line-height: 16px;
-    white-space: nowrap;
-    transform: translateX(-50%);
-}
-// Below md only every Nth label shows (the component marks the rest minor); a 12-month axis
-// would otherwise overlap on a phone.
-.wui-chart-xlabel-minor {
-    display: none;
-}
-@media (min-width: 768px) {
-    .wui-chart-xlabel-minor {
-        display: block;
-    }
-}
-
-// ============================================================================
-// Bar chart
-// ============================================================================
-.wui-bar-chart-list {
-    margin: 0;
-    padding: 0;
-    list-style: none;
-}
-.wui-bar-chart-label {
-    min-width: 0;
-    color: var(--color-text-body);
-    overflow-wrap: anywhere;
-}
-.wui-bar-chart-value {
-    font-weight: 600;
-    white-space: nowrap;
-    color: var(--color-text);
-}
-.wui-bar-chart-track {
-    position: relative;
-    overflow: hidden;
-    border-radius: 999px;
-    background: var(--color-progress-track);
-}
-.wui-bar-chart-fill {
-    border-radius: inherit;
-    background: var(--color-primary);
-}
-// Each track is a focus stop; the ring sits outside the track's own clipped content.
-.wui-bar-chart-track:focus-visible {
-    outline: 2px solid var(--color-primary);
-    outline-offset: 2px;
-}
-
-// Horizontal: a label/value line over each bar, so a long label wraps instead of squeezing
-// the bar at 320px.
-.wui-bar-chart-horizontal .wui-bar-chart-list {
-    display: flex;
-    flex-direction: column;
-    gap: 14px;
-}
-.wui-bar-chart-horizontal .wui-bar-chart-item {
-    display: grid;
-    grid-template-columns: minmax(0, 1fr) auto;
-    grid-template-areas:
-        "label value"
-        "track track";
-    column-gap: 12px;
-    row-gap: 6px;
-    align-items: baseline;
-}
-.wui-bar-chart-horizontal .wui-bar-chart-label {
-    grid-area: label;
-}
-.wui-bar-chart-horizontal .wui-bar-chart-value {
-    grid-area: value;
-}
-.wui-bar-chart-horizontal .wui-bar-chart-track {
-    grid-area: track;
-    height: 8px;
-}
-.wui-bar-chart-horizontal .wui-bar-chart-fill {
-    height: 100%;
-    transition: width 300ms var(--wui-ease-out-quart);
-}
-
-// Vertical: bars side by side, value above and label below each. The plot height is one var a
-// caller can set from its own class.
-.wui-bar-chart-vertical .wui-bar-chart-list {
-    display: flex;
-    gap: 8px;
-}
-.wui-bar-chart-vertical .wui-bar-chart-item {
-    flex: 1 1 0;
-    min-width: 0;
-    display: grid;
-    grid-template-areas:
-        "value"
-        "track"
-        "label";
-    justify-items: center;
-    row-gap: 6px;
-    text-align: center;
-}
-// Seven bars on a 320px phone leave about 40px a column, so "18 of 25" may wrap here.
-.wui-bar-chart-vertical .wui-bar-chart-value {
-    grid-area: value;
-    white-space: normal;
-}
-.wui-bar-chart-vertical .wui-bar-chart-track {
-    grid-area: track;
-    display: flex;
-    align-items: flex-end;
-    width: 100%;
-    max-width: 32px;
-    height: var(--wui-bar-chart-height, 180px);
-    border-radius: var(--radius-sm);
-}
-.wui-bar-chart-vertical .wui-bar-chart-fill {
-    width: 100%;
-    transition: height 300ms var(--wui-ease-out-quart);
-}
-.wui-bar-chart-vertical .wui-bar-chart-label {
-    grid-area: label;
-    font-size: 11px;
-}
+// Part of the wui-components layer; see _wui-components.scss for the load order. The element draws
+// series in the --wui-chart-* colours. Every colour is a token the dark remap in _wui-aliases.scss
+// flips with the rest of the portal.
 
 // ============================================================================
 // Chart element: <wui-chart> (AppChart, <app-chart>)
 // ============================================================================
 // The element builds the legend, the drawing surface, the state box and the data table; the
-// engine draws inside .wui-chart-canvas with colours the element reads from --wui-chart-*. The
-// names here stay clear of the line and bar chart classes above.
+// engine draws inside .wui-chart-canvas with colours the element reads from --wui-chart-*.
 wui-chart {
     position: relative;
     display: block;
@@ -513,9 +212,6 @@ wui-chart[aria-busy="true"] .wui-chart-surface {
 }
 
 @media (prefers-reduced-motion: reduce) {
-    .wui-chart-dot,
-    .wui-chart-tip,
-    .wui-bar-chart-fill,
     .wui-chart-legend-item,
     .wui-chart-legend-swatch,
     .wui-chart-surface {

package/scss/wui/_chat.scss

@@ -0,0 +1,82 @@
+// ── Assistant chat ──
+// <wui-chat> / <app-chat>: a launcher pinned to a bottom corner and a side panel holding the
+// conversation and the question box. The header, buttons, form field and alerts inside are the
+// theme's own (.drawer-header, .btn, .form-control, .alert); only the placement and the two chat
+// shapes live here. A compact launcher is the shared .wui-floating-btn circle (_floating.scss).
+//
+// Part of the wui-components layer — see _wui-components.scss for load order.
+
+// The element is a plain host: its two parts are fixed to the viewport.
+wui-chat {
+    display: contents;
+}
+
+.wui-chat-launcher {
+    position: fixed;
+    bottom: 0;
+    inset-inline-end: 0;
+    z-index: var(--wui-z-fixed);
+    margin: 1rem;
+}
+wui-chat[position="start"] .wui-chat-launcher {
+    inset-inline-end: auto;
+    inset-inline-start: 0;
+}
+
+// Above the shell chrome and below modals, like the drawer it stands in for.
+.wui-chat-panel {
+    position: fixed;
+    top: 0;
+    bottom: 0;
+    inset-inline-end: 0;
+    z-index: var(--wui-z-shell-drawer);
+    display: flex;
+    flex-direction: column;
+    width: min(440px, 100%);
+    background: var(--color-surface);
+    border-inline-start: 1px solid var(--color-border);
+    box-shadow: var(--wui-shadow-overlay-lg);
+}
+wui-chat[position="start"] .wui-chat-panel {
+    inset-inline-end: auto;
+    inset-inline-start: 0;
+    border-inline-start: 0;
+    border-inline-end: 1px solid var(--color-border);
+}
+// `hidden` is how the element closes the panel; display: flex above would otherwise win over it.
+.wui-chat-panel[hidden] {
+    display: none;
+}
+
+.wui-chat-body {
+    flex: 1 1 auto;
+    min-height: 0;
+    padding: 20px;
+    overflow-y: auto;
+}
+.wui-chat-empty {
+    padding-block: 2rem;
+}
+.wui-chat-foot {
+    flex: none;
+    padding: 16px 20px;
+    border-top: 1px solid var(--color-border);
+}
+
+// The person's question, on the right; the answer is plain text on the panel.
+.wui-chat-question {
+    max-width: 85%;
+}
+.wui-chat-bubble {
+    padding: 10px 14px;
+    background: var(--color-bg-muted);
+    border-radius: var(--wui-radius-lg);
+    white-space: pre-wrap;
+    overflow-wrap: anywhere;
+}
+
+// The question box grows with its text, up to a few lines.
+.wui-chat-foot .form-control {
+    max-height: 9rem;
+    resize: none;
+}

package/scss/wui/_floating.scss

@@ -0,0 +1,64 @@
+// ── Floating stack ──
+// The one fixed corner container the compact floating buttons (the chat launcher, the report-an-issue
+// button) portal into, so they stack with a gap and never overlap or need a hand-set offset. React's
+// useFloatingStack creates it; the items inside are not fixed themselves.
+//
+// Part of the wui-components layer — see _wui-components.scss for load order.
+
+.wui-floating-stack {
+    position: fixed;
+    bottom: 0;
+    z-index: var(--wui-z-fixed);
+    display: flex;
+    // The primary item sits in the corner and the secondary one stacks above it.
+    flex-direction: column-reverse;
+    gap: 12px;
+    margin: 1rem;
+    // The container spans only its items, but a gap between them must not swallow clicks on the page.
+    pointer-events: none;
+}
+.wui-floating-stack[data-position="end"] {
+    inset-inline-end: 0;
+    align-items: flex-end;
+}
+.wui-floating-stack[data-position="start"] {
+    inset-inline-start: 0;
+    align-items: flex-start;
+}
+.wui-floating-stack-item {
+    display: inline-flex;
+    pointer-events: auto;
+}
+.wui-floating-stack-item--primary {
+    order: 0;
+}
+.wui-floating-stack-item--secondary {
+    order: 1;
+}
+
+// ── Compact floating button ──
+// An icon-only circle. The label lives in the tooltip and the aria-label, never on the button.
+.wui-floating-btn {
+    --wui-floating-size: 48px;
+
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: var(--wui-floating-size);
+    height: var(--wui-floating-size);
+    padding: 0;
+    border-radius: 50%;
+    box-shadow: var(--wui-shadow-overlay);
+}
+// Quieter than the primary circle: a light brand tint, the brand icon and a thin brand border.
+.wui-floating-btn--secondary {
+    --wui-floating-size: 40px;
+    --bs-btn-border-color: var(--wui-primary-30);
+    --bs-btn-hover-border-color: var(--wui-primary-30);
+    --bs-btn-active-border-color: var(--wui-primary-30);
+}
+@media (prefers-reduced-motion: reduce) {
+    .wui-floating-btn {
+        transition: none;
+    }
+}

package/scss/wui/_kanban.scss

@@ -5,7 +5,8 @@
 // classes, so a React re-render never wipes it.
 //
 // Below md the board is one column per screen: a scroll-snapped strip with a column switcher
-// above it. The board scrolls inside itself, so the page never scrolls sideways.
+// above it that stays at the top of the viewport while the page scrolls. The board scrolls inside
+// itself, so the page never scrolls sideways.
 //
 // Sizing variables, set on .wui-kanban (or any ancestor) to override:
 //   --wui-kanban-column-width       basis width of an open column (288px)
@@ -13,6 +14,8 @@
 //   --wui-kanban-gap                space between columns (16px)
 //   --wui-kanban-column-min-height  least height of a column, so short columns still read as
 //                                   lanes (560px; not applied in the phone one-column mode)
+//   --wui-kanban-sticky-top         where the phone switcher sticks (0, or under the app shell's
+//                                   topbar inside .app-shell)
 //
 // Part of the wui-components layer, see _wui-components.scss for load order.
 
@@ -21,11 +24,18 @@
     --wui-kanban-collapsed-width: 56px;
     --wui-kanban-gap: 16px;
     --wui-kanban-column-min-height: 560px;
+    --wui-kanban-sticky-top: 0px;
     display: block;
     position: relative;
     min-width: 0;
     max-width: 100%;
 }
+// The shell's topbar is sticky too, so the switcher stops below it. 72px is .app-topbar's
+// min-height in _shell.scss; change both together. :where() keeps this at .wui-kanban's own
+// weight, so a page's `.wui-kanban { --wui-kanban-sticky-top: … }` still wins inside the shell.
+:where(.app-shell) .wui-kanban {
+    --wui-kanban-sticky-top: 72px;
+}
 
 .wui-kanban-board {
     display: flex;
@@ -210,9 +220,42 @@
     outline: 2px solid var(--color-primary);
     outline-offset: 2px;
 }
-.wui-kanban-card[hidden] {
+.wui-kanban-card[hidden],
+.wui-kanban-card[data-wui-overflow] {
+    display: none;
+}
+
+// "Show N more" under a capped column's cards; "Show fewer" once it is open.
+.wui-kanban-more {
+    display: block;
+    width: calc(100% - 16px);
+    min-height: 36px;
+    margin: 0 8px 8px;
+    padding: 6px 10px;
+    border: 0;
+    border-radius: var(--wui-radius);
+    background: transparent;
+    color: var(--color-text-muted);
+    font-size: 0.8125rem;
+    font-weight: 600;
+    cursor: pointer;
+}
+.wui-kanban-more[hidden] {
     display: none;
 }
+.wui-kanban-more:hover {
+    background: var(--color-surface);
+    color: var(--color-text);
+}
+.wui-kanban-more:focus-visible {
+    outline: 2px solid var(--color-primary);
+    outline-offset: 2px;
+}
+@media (pointer: coarse) {
+    .wui-kanban-more {
+        min-height: 44px;
+    }
+}
 .wui-kanban[readonly] .wui-kanban-card,
 .wui-kanban-card[data-wui-locked] {
     cursor: default;
@@ -354,6 +397,7 @@
     }
     .wui-kanban-summary,
     .wui-kanban-body,
+    .wui-kanban-more,
     .wui-kanban-empty {
         display: none;
     }
@@ -365,18 +409,34 @@
     }
 }
 
-// ── Phone column switcher (hidden from md up) ──
-.wui-kanban-switcher {
+// ── Phone column switcher and swipe hint (hidden from md up) ──
+.wui-kanban-switcher,
+.wui-kanban-hint {
     display: none;
 }
 
 @media (max-width: 767.98px) {
+    // Sticky over the page's own background, under the shell topbar (z-index 10).
     .wui-kanban-switcher {
+        position: sticky;
+        top: var(--wui-kanban-sticky-top);
+        z-index: 5;
         display: flex;
         gap: 6px;
         margin-bottom: 12px;
+        padding-block: 6px;
         overflow-x: auto;
         scrollbar-width: none;
+        background: var(--color-bg);
+    }
+    .wui-kanban-hint {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        gap: 6px;
+        margin: -6px 0 12px;
+        color: var(--color-text-muted);
+        font-size: 0.75rem;
     }
     .wui-kanban-switch {
         display: inline-flex;
@@ -443,6 +503,9 @@
         .wui-kanban-body {
             display: flex;
         }
+        .wui-kanban-more:not([hidden]) {
+            display: block;
+        }
         .wui-kanban-empty:not([hidden]) {
             display: block;
         }

package/scss/wui/_media.scss

@@ -867,6 +867,18 @@
 .file-preview[aria-busy="true"] {
     cursor: progress;
 }
+// A disabled drop zone (AppDropZone `disabled`): dimmed, no pointer affordance, and no hover lift.
+.file-input[aria-disabled="true"] {
+    opacity: 0.6;
+    cursor: not-allowed;
+}
+.file-input[aria-disabled="true"] > .file-input-zone-label {
+    cursor: not-allowed;
+}
+.file-input.file-input-tall[aria-disabled="true"]:hover:not(:focus-within):not(.dragging) {
+    background: var(--color-bg-muted);
+    border-color: var(--color-border);
+}
 .wui-file-busy {
     position: absolute;
     inset: 0;

package/scss/wui/_shell.scss

@@ -351,6 +351,12 @@
     padding-top: 12px;
     border-top: 1px solid var(--color-border);
 }
+// A node the author places right after a group's links (`groups[].after` /
+// `<app-nav-group-after>`). Like sidebarStart it has no place on the 88px rail.
+.wui-nav-group-after {
+    flex: none;
+    margin-top: 4px;
+}
 .app-nav-group-label {
     padding: 6px 14px;
     font-size: 12px;
@@ -439,6 +445,7 @@
 }
 .app-shell.collapsed .app-nav-badge,
 .app-shell.collapsed .app-nav-group-label,
+.app-shell.collapsed .wui-nav-group-after,
 .app-shell.collapsed .app-sidebar-brand-text,
 .app-shell.collapsed .app-sidebar-start {
     display: none;
@@ -756,6 +763,7 @@
     .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 .wui-nav-group-after,
     .app-shell.app-shell.collapsed .app-sidebar-start {
         display: revert;
     }