@webority/theme 0.30.0 → 0.31.0

package/package.json

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

package/scss/wui/_table-server.scss

@@ -8,11 +8,12 @@
 // (`.tbl-empty-block`) reuse the client-side table rules in _data.scss unchanged.
 
 // While a page is in flight the current rows stay in place, dimmed, so the table does not jump;
-// they are not interactive until the new page lands.
+// they are not interactive until the new page lands. A table with no rows shows placeholder rows
+// instead, at full strength.
 .wui-table-server > .table-wrap[aria-busy="true"] {
     cursor: progress;
 }
-.wui-table-server > .table-wrap[aria-busy="true"] > .table > tbody {
+.wui-table-server > .table-wrap[aria-busy="true"] > .table > tbody:not(:has(> tr[data-wui-skeleton])) {
     opacity: 0.55;
     pointer-events: none;
     transition: opacity 0.15s ease;
@@ -34,7 +35,7 @@
 }
 
 @media (prefers-reduced-motion: reduce) {
-    .wui-table-server > .table-wrap[aria-busy="true"] > .table > tbody {
+    .wui-table-server > .table-wrap[aria-busy="true"] > .table > tbody:not(:has(> tr[data-wui-skeleton])) {
         transition: none;
     }
 }

package/scss/wui/_tour.scss

@@ -0,0 +1,97 @@
+// ── Product tour ──
+// AppTour / <app-tour> / <wui-tour>: a dimmed page with one highlighted element and a card
+// holding the step text and Back / Next / Skip. The element appends .wui-tour-layer to <body>
+// and positions .wui-tour-spot (over the target) and .wui-tour-card (against the spot, through
+// anchorOverlay, which sets position, top and left inline). Everything visual is here, every
+// colour a theme token.
+//
+// Part of the wui-components layer, see _wui-components.scss for load order.
+
+// The step data of a server-rendered tour is plain markup the element reads and the page never shows.
+wui-tour,
+wui-tour-step {
+    display: none;
+}
+
+.wui-tour-layer {
+    position: fixed;
+    inset: 0;
+    z-index: var(--wui-z-tour);
+}
+
+// The dim is the spot's own shadow, so the hole around the target needs no clip-path.
+.wui-tour-spot {
+    position: fixed;
+    border-radius: var(--wui-radius-sm);
+    box-shadow:
+        0 0 0 2px var(--color-primary),
+        0 0 0 100vmax var(--color-scrim-strong);
+    pointer-events: none;
+}
+@media (prefers-reduced-motion: no-preference) {
+    .wui-tour-spot {
+        transition:
+            top 160ms ease,
+            left 160ms ease,
+            width 160ms ease,
+            height 160ms ease;
+    }
+}
+
+.wui-tour-card {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    width: min(360px, calc(100vw - 16px));
+    padding: 16px;
+    overflow-y: auto;
+    background: var(--color-surface);
+    color: var(--color-text);
+    border: 1px solid var(--color-border);
+    border-radius: var(--wui-radius-lg);
+    corner-shape: squircle;
+    box-shadow: var(--wui-shadow-overlay);
+    &:focus {
+        outline: none;
+    }
+    &:focus-visible {
+        outline: 2px solid var(--color-primary);
+        outline-offset: 2px;
+    }
+}
+
+.wui-tour-position {
+    margin: 0;
+    font-size: 12px;
+    color: var(--color-text-muted);
+}
+.wui-tour-title {
+    margin: 0;
+    font-size: 16px;
+    font-weight: 600;
+}
+.wui-tour-text {
+    margin: 0;
+    font-size: 14px;
+    color: var(--color-text-muted);
+}
+.wui-tour-actions {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 8px;
+    margin-top: 4px;
+}
+.wui-tour-nav {
+    display: flex;
+    gap: 8px;
+}
+// The buttons keep Bootstrap's look; the width stops the label change between Next and Done from
+// moving the row, and Skip reads as the quiet action.
+.wui-tour-skip {
+    color: var(--color-text-muted);
+}
+.wui-tour-back,
+.wui-tour-next {
+    min-width: 64px;
+}