@webority/theme 0.29.0 → 0.31.0

package/package.json

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

@@ -579,8 +579,7 @@
 // shut, the trigger keeps the focus look only for keyboard focus (:focus-visible); a pick or
 // close by pointer returns it to rest. An errored field (aria-invalid on the host) keeps its red.
 wui-datepicker:not([aria-invalid="true"]) .datepicker:not(.open) .datepicker-trigger:focus:not(:focus-visible),
-wui-date-range:not([aria-invalid="true"]) .daterange:not(.open) .daterange-trigger:focus:not(:focus-visible),
-wui-timepicker:not([aria-invalid="true"]) .timepicker:not(.open) .timepicker-trigger:focus:not(:focus-visible) {
+wui-date-range:not([aria-invalid="true"]) .daterange:not(.open) .daterange-trigger:focus:not(:focus-visible) {
     background-color: var(--color-field-bg);
     border-color: var(--color-border);
 }
@@ -1350,37 +1349,56 @@ wui-timepicker[aria-invalid="true"] .timepicker.open .timepicker-trigger {
     font-size: 14px;
 }
 
-// timepicker — time-of-day field with listbox popover (min/max bounds, step granularity, 12/24 display).
+// timepicker — time-of-day text field (type "7:45 pm") with a clock button that opens hour /
+// minute / AM-PM columns (min/max bounds, step granularity, 12/24 display).
 .timepicker {
     position: relative;
     width: var(--wui-timepicker-width, 12rem);
     max-width: 100%;
 }
+.wui-timepicker-field {
+    position: relative;
+}
+// The input leaves room on the right for the clock button laid over it.
 .timepicker-trigger {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    gap: 8px;
-    text-align: left;
-    cursor: pointer;
+    padding-right: 44px;
 }
-.timepicker-trigger [data-trigger-label] {
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
+.timepicker-trigger.input-sm {
+    padding-right: 36px;
 }
-.timepicker-trigger > .wui-icon {
-    flex-shrink: 0;
+.wui-timepicker-toggle {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    display: grid;
+    place-items: center;
+    width: 44px;
+    padding: 0;
+    border: none;
+    border-radius: 0 var(--wui-field-radius) var(--wui-field-radius) 0;
+    background: transparent;
     color: var(--color-text-subtle);
+    cursor: pointer;
+    transition: color 0.12s ease;
 }
-// The label span carries this while nothing is selected — same dim ink the trigger's
-// :not(.has-value) fallback uses, kept as its own rule so the span reads as placeholder
-// even when the trigger classes are toggled independently.
-.timepicker-placeholder {
-    color: var(--color-text-subtle);
+.timepicker-trigger.input-sm + .wui-timepicker-toggle {
+    width: 36px;
 }
-.timepicker-trigger:not(.has-value) {
-    color: var(--color-text-subtle);
+.wui-timepicker-toggle:hover:not(:disabled),
+.timepicker.open .wui-timepicker-toggle {
+    color: var(--color-primary);
+}
+.wui-timepicker-toggle:focus-visible {
+    outline: 2px solid var(--color-primary);
+    outline-offset: -4px;
+}
+.wui-timepicker-toggle:disabled {
+    cursor: not-allowed;
+}
+// The control's own message for typed text it refuses; the shell's .field-error sits below it.
+.wui-timepicker-error {
+    margin-top: 4px;
 }
 // Width presets.
 .time-w-sm {
@@ -1396,18 +1414,21 @@ wui-timepicker[aria-invalid="true"] .timepicker.open .timepicker-trigger {
     --wui-timepicker-width: 100%;
 }
 .timepicker.open .timepicker-trigger {
-    // Stay white while the time list is open — see the note on .datepicker.open above.
+    // Stay white while the columns are open — see the note on .datepicker.open above.
     background-color: var(--color-surface);
     border-color: var(--color-focus-border);
     box-shadow: none;
 }
+// Refused typed text keeps the soft danger border while the columns are open, as the shell's
+// host-level aria-invalid already does.
+.timepicker.open .timepicker-trigger[aria-invalid="true"] {
+    border-color: color-mix(in srgb, var(--color-danger) 30%, transparent);
+}
 .timepicker-pop {
     position: fixed;
     z-index: var(--wui-z-menu);
-    width: 180px;
+    width: max-content;
     max-width: calc(100vw - 16px);
-    max-height: 360px;
-    overflow-y: auto;
     padding: 8px;
     background: var(--color-surface);
     border: 1px solid var(--color-border);
@@ -1439,14 +1460,37 @@ wui-timepicker[aria-invalid="true"] .timepicker.open .timepicker-trigger {
         transform: translateY(0);
     }
 }
+.wui-timepicker-cols {
+    display: flex;
+    gap: 4px;
+}
+// Each column scrolls on its own; overscroll stays inside so a flick never scrolls the page.
+.wui-timepicker-col {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+    min-width: 56px;
+    max-height: 264px;
+    overflow-y: auto;
+    overscroll-behavior: contain;
+    scrollbar-width: thin;
+}
+.wui-timepicker-col + .wui-timepicker-col {
+    padding-left: 4px;
+    border-left: 1px solid var(--color-border);
+}
 .timepicker-option {
     display: block;
+    flex-shrink: 0;
     width: 100%;
-    padding: 8px 12px;
+    min-height: 36px;
+    padding: 6px 12px;
     border: none;
     background: transparent;
-    text-align: left;
+    text-align: center;
     font-size: 14px;
+    font-variant-numeric: tabular-nums;
     color: var(--color-text);
     cursor: pointer;
     border-radius: var(--radius-sm);
@@ -1454,7 +1498,13 @@ wui-timepicker[aria-invalid="true"] .timepicker.open .timepicker-trigger {
         background 0.1s,
         color 0.1s;
 }
-.timepicker-option:hover,
+// Touch screens get full 44px rows.
+@media (pointer: coarse) {
+    .timepicker-option {
+        min-height: 44px;
+    }
+}
+.timepicker-option:hover:not(:disabled),
 .timepicker-option.is-active {
     background: var(--color-primary-soft, color-mix(in srgb, var(--color-primary) 8%, transparent));
     color: var(--color-primary);
@@ -1464,6 +1514,11 @@ wui-timepicker[aria-invalid="true"] .timepicker.open .timepicker-trigger {
     color: var(--color-primary-text);
     font-weight: 600;
 }
+.timepicker-option:disabled {
+    color: var(--color-text-subtle);
+    opacity: 0.5;
+    cursor: not-allowed;
+}
 .timepicker-option:focus-visible {
     outline: none;
     box-shadow: inset 0 0 0 2px var(--color-primary);

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;
+    }
+}