@webority/theme 0.128.0 → 0.130.0

package/scss/wui/_account-switcher.scss

@@ -0,0 +1,70 @@
+// Account switcher: shared by React <AppAccountSwitcher> and Razor <app-account-switcher>.
+// Rows are Bootstrap dropdown items inside the shell's user menu (.wui-usermenu-menu, see
+// _shell-parts.scss), so they inherit that menu's padding and hover. Every rule here is scoped
+// under .wui-account-switcher so it wins over Bootstrap's .dropdown-item specificity.
+
+.wui-account-switcher {
+    padding-block: var(--wui-space-xxs);
+}
+
+.wui-account-switcher-label {
+    padding: var(--wui-space-sm);
+    font-size: var(--wui-fs-sm);
+    color: var(--color-text-muted);
+}
+
+.wui-account-switcher-list {
+    display: flex;
+    flex-direction: column;
+    max-height: 40vh;
+    overflow-y: auto;
+}
+
+.wui-account-switcher .wui-account-switcher-option {
+    display: flex;
+    align-items: center;
+    gap: var(--wui-space-sm);
+}
+
+.wui-account-switcher-option-text {
+    flex: 1 1 auto;
+    min-width: 0;
+}
+
+.wui-account-switcher-option-name {
+    display: block;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.wui-account-switcher-option-note {
+    display: block;
+    overflow: hidden;
+    font-size: var(--wui-fs-xs);
+    color: var(--color-text-muted);
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.wui-account-switcher-badge {
+    flex: none;
+    padding: var(--wui-space-xxs) var(--wui-space-sm);
+    border-radius: var(--wui-radius-pill);
+    background: var(--color-bg-subtle);
+    color: var(--color-text-muted);
+    font-size: var(--wui-fs-xs);
+    font-weight: var(--wui-fw-semibold);
+}
+
+// The current account keeps its tint through hover, so the tick is never the only cue.
+.wui-account-switcher .wui-account-switcher-option.is-active,
+.wui-account-switcher .wui-account-switcher-option.is-active:hover {
+    background: var(--color-primary-soft);
+    color: var(--color-primary-text);
+}
+
+.wui-account-switcher-tick {
+    flex: none;
+    color: var(--color-primary-text);
+}

package/scss/wui/_auth-layout.scss

@@ -0,0 +1,77 @@
+// ── Auth layout ──
+// AppAuthLayout / <app-auth-layout>: a sign-in page, centred by default. The form panel sits in
+// the middle of the page; `.wui-auth-split` (variant="split") adds an aside on the right from the
+// lg tier up, and below lg the aside is hidden so the form is alone and centred.
+//   <div class="wui-auth wui-auth-centred|wui-auth-split">
+//     <div class="wui-auth-main"><div class="wui-auth-panel">logo, body, footer</div></div>
+//     <aside class="wui-auth-aside">…</aside>
+// The aside follows the form in the DOM and sits on the right; nothing reorders it.
+//
+// Part of the wui-components layer, see _wui-components.scss for load order.
+
+.wui-auth {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr);
+    min-height: var(--wui-auth-min-height, 100dvh);
+    background: var(--color-bg);
+    color: var(--color-text);
+}
+
+.wui-auth-main {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 0;
+    padding: var(--wui-space-xl) var(--wui-space-lg);
+}
+
+.wui-auth-panel {
+    display: flex;
+    flex-direction: column;
+    gap: var(--wui-space-xl);
+    width: 100%;
+    max-width: var(--wui-auth-width, 420px);
+}
+
+.wui-auth-logo {
+    display: flex;
+    justify-content: center;
+}
+.wui-auth-logo img,
+.wui-auth-logo svg {
+    max-width: 100%;
+    max-height: 48px;
+    height: auto;
+}
+
+.wui-auth-body {
+    padding: var(--wui-space-xl);
+    border: 1px solid var(--color-border);
+    border-radius: var(--wui-radius-lg);
+    background: var(--color-surface);
+}
+
+.wui-auth-footer {
+    color: var(--color-text-muted);
+    font-size: var(--wui-fs-sm);
+    text-align: center;
+}
+
+.wui-auth-aside {
+    display: none;
+}
+
+@include media-breakpoint-up(lg) {
+    .wui-auth-split {
+        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+    }
+    .wui-auth-split .wui-auth-aside {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        min-width: 0;
+        padding: var(--wui-space-3xl);
+        background: var(--color-primary-soft);
+        color: var(--color-text);
+    }
+}

package/scss/wui/_card-options.scss

@@ -0,0 +1,45 @@
+// Card options: `flush` (content runs to the card's rounded corners) and `divided`
+// (a rule under the header).
+//
+// Part of the wui-components layer, see _wui-components.scss for the load
+// order. This partial loads directly after `wui/card`, because its padding
+// rules must win over the header rule in _card.scss.
+
+// A consumer class can set --wui-card-divider-color to retune the rule.
+.card {
+    --wui-card-divider-color: var(--color-border);
+}
+
+// The card's own border-radius clips the content, so a table or image keeps the corners.
+.card-flush {
+    overflow: hidden;
+}
+
+// A 1px hairline stays raw: it is a rule, not a spacing or type value.
+.card-divided > .card-header {
+    border-bottom: 1px solid var(--wui-card-divider-color);
+}
+// _card.scss removes the body's top padding under any header. A divided card keeps the
+// body's padding step, so each padding class restores its own value here.
+.card-divided > .card-header + .card-body {
+    padding-top: var(--bs-card-spacer-y);
+}
+.card-pad-sm.card-divided > .card-header + .card-body {
+    padding-top: var(--wui-space-md);
+}
+.card-pad-lg.card-divided > .card-header + .card-body {
+    padding-top: var(--wui-space-xl);
+}
+.card-pad-none.card-divided > .card-header + .card-body {
+    padding-top: 0;
+}
+.card-compact.card-divided > .card-header + .card-body {
+    padding-top: var(--wui-space-lg);
+}
+
+// Last, so it wins every tie: flush clears the body only, as `.card-pad-none` does.
+// The header and footer keep their padding.
+.card.card-flush > .card-body,
+.card.card-flush > .card-header + .card-body {
+    padding: 0;
+}

package/scss/wui/_card.scss

@@ -47,7 +47,8 @@
 // Bootstrap has its own `.card-title` (a bare margin-bottom) — these override it,
 // so they must stay in the layer that loads after Bootstrap.
 // A product sets its title type with --wui-card-title-font-family, -fs, -fw and -lh.
-.card-title {
+.card-title,
+.result-title {
     margin: 0;
     font-family: var(--wui-card-title-font-family, inherit);
     font-size: var(--wui-card-title-fs, 16px);

package/scss/wui/_cell.scss

@@ -0,0 +1,56 @@
+// ── Cell ──
+// AppCell / <app-cell>: one table or list cell with a primary line and an optional secondary line.
+// Markup contract, shared by both surfaces and the rules below:
+//
+// Component:  React AppCell        Razor <app-cell>
+// Props:      primary    string|node   Razor: attribute `primary`, or the tag child content when `primary` is absent
+//             secondary  string|node   Razor: attribute `secondary`; absent or empty draws no second line
+//             href       string        when set the primary is an <a>, else a <span>
+//             mono       bool, false   monospace on the primary line only
+//             numeric    bool, false   right-aligned, tabular digits, both lines
+//             className  string        React; Razor uses plain `class`
+// Markup (identical on both surfaces, class order fixed):
+//   <div class="wui-cell [wui-cell-numeric] [wui-cell-mono] [extra]" data-wui="AppCell">
+//     <a|span class="wui-cell-primary" [href="..."]>PRIMARY</a|span>
+//     <span class="wui-cell-secondary">SECONDARY</span>      (omitted when no secondary)
+//   </div>
+// Empty primary (null, undefined, "" and no child content) draws the placeholder "-" (React EMPTY_PLACEHOLDER from ../lib/emptyValue, Razor EmptyValue.Placeholder).
+// 0 is real data and draws as "0".
+// Classes (all new, all wui-*): wui-cell, wui-cell-primary, wui-cell-secondary, wui-cell-numeric, wui-cell-mono
+//
+// Part of the wui-components layer, see _wui-components.scss for load order.
+
+.wui-cell {
+    display: block;
+    min-width: 0;
+    line-height: var(--wui-lh-heading);
+}
+
+.wui-cell-primary {
+    display: block;
+    font-weight: var(--wui-fw-medium);
+    color: var(--color-text);
+}
+
+a.wui-cell-primary {
+    text-decoration: none;
+
+    &:hover {
+        text-decoration: underline;
+    }
+}
+
+.wui-cell-secondary {
+    display: block;
+    font-size: var(--wui-fs-sm);
+    color: var(--color-text-muted);
+}
+
+.wui-cell-numeric {
+    text-align: right;
+    font-variant-numeric: tabular-nums;
+}
+
+.wui-cell-mono > .wui-cell-primary {
+    font-family: var(--wui-font-mono);
+}

package/scss/wui/_choice.scss

@@ -336,13 +336,6 @@
     font-size: 16px;
     border-radius: var(--wui-field-lg-radius);
 }
-// xl: the 52px select, the same height as an AppInput at size="xl". A literal height, as on the input.
-.wui-search-select-xl .search-select-control {
-    height: 52px;
-    min-height: 52px;
-    font-size: 16px;
-    border-radius: var(--wui-field-lg-radius);
-}
 // Multi-select grows with its chips, so a size sets the FLOOR (min-height from the rule
 // above) but never a fixed height — reset height:auto so a second row of chips can appear.
 .search-select-sm .search-select-multi,

package/scss/wui/_controls.scss

@@ -479,15 +479,6 @@
     font-size: 16px;
     border-radius: var(--wui-field-lg-radius);
 }
-// xl (size="xl"): the 52px control for large forms. A literal height, because the control-height
-// ladder stops at 44px and its tokens live in the theme's token file. A floating label needs no
-// rule of its own: it centres on the field's box, so it stays inside at 52px.
-.wui-input-xl {
-    height: 52px;
-    padding: 9px 16px;
-    font-size: 16px;
-    border-radius: var(--wui-field-lg-radius);
-}
 .textarea,
 textarea.form-control {
     height: auto;
@@ -917,8 +908,7 @@ $wui-field-error-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/
     --wui-input-icon-size: 14px;
     --wui-input-icon-gap: 10px;
 }
-.input-icon:has(> .input-lg),
-.input-icon:has(> .wui-input-xl) {
+.input-icon:has(> .input-lg) {
     --wui-input-icon-slot: 48px;
     --wui-input-icon-size: 18px;
     --wui-input-icon-gap: 14px;
@@ -1477,9 +1467,6 @@ wui-select[compact] {
 .input-with-unit .num-input.input-lg {
     height: calc(var(--wui-control-lg) - 2px);
 }
-.input-with-unit .num-input.wui-input-xl {
-    height: calc(52px - 2px);
-}
 .input-with-unit .num-input:focus {
     box-shadow: none;
 }

package/scss/wui/_data.scss

@@ -97,10 +97,11 @@
 }
 
 // ── Table ──
-// DataTable cell helpers
+// DataTable cell helpers. End-aligned cells use tabular digits so the figures in a column line up.
 .table-ledger .wui-cell-end,
 .table-ledger thead th.wui-cell-end {
     text-align: right;
+    font-variant-numeric: tabular-nums;
 }
 
 // Row expansion (renderExpanded) — a narrow leading toggle column, a chevron that rotates when

package/scss/wui/_display.scss

@@ -1496,6 +1496,15 @@ button.wui-link {
     z-index: 0;
     white-space: var(--wui-link-label-white-space, nowrap);
 }
+// maxLines: the label wraps and stops at that many lines, the clamp drawing the ellipsis. The
+// underline sits 1px inside the label's bottom edge, so overflow: hidden does not clip it.
+.wui-link--clamp .wui-link__label {
+    white-space: normal;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: var(--wui-link-max-lines, none);
+    overflow: hidden;
+}
 // A link in a table cell may wrap: a nowrap label runs under the pinned actions column.
 .table-ledger td .wui-link__label {
     --wui-link-label-white-space: normal;

package/scss/wui/_field-busy.scss

@@ -0,0 +1,50 @@
+// The busy state of a form field (React loading, Razor loading, <wui-*> loading). Part of the wui-components layer, see _wui-components.scss for load order.
+
+@property --wui-busy-angle {
+    syntax: "<angle>";
+    inherits: false;
+    initial-value: 0deg;
+}
+@keyframes wui-field-busy-spin {
+    to {
+        --wui-busy-angle: 360deg;
+    }
+}
+
+.wui-field-busy {
+    cursor: progress;
+    pointer-events: none;
+}
+
+.input.wui-field-busy,
+.textarea.wui-field-busy,
+.form-control.wui-field-busy,
+.select.wui-field-busy {
+    padding-inline-end: var(--wui-space-2xl);
+    background-repeat: no-repeat;
+    background-position: right 12px center;
+    background-size: 18px 18px;
+    background-image:
+        radial-gradient(circle, var(--color-surface) 0 5px, transparent 5.5px),
+        conic-gradient(from var(--wui-busy-angle), transparent 0 30%, var(--color-primary) 30% 100%);
+    animation: wui-field-busy-spin 0.7s linear infinite;
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .input.wui-field-busy,
+    .textarea.wui-field-busy,
+    .form-control.wui-field-busy,
+    .select.wui-field-busy {
+        animation: none;
+    }
+}
+
+.form-check-input.wui-field-busy,
+.segmented.wui-field-busy,
+.struct-card.wui-field-busy,
+.choice-chip.wui-field-busy,
+.wui-rating.wui-field-busy,
+.slider.wui-field-busy,
+.otp.wui-field-busy {
+    opacity: var(--wui-disabled-opacity);
+}

package/scss/wui/_field-floor.scss

@@ -39,10 +39,6 @@
         font-size: max(16px, #{$form-select-font-size-lg});
     }
 
-    .wui-input-xl {
-        font-size: max(16px, 16px);
-    }
-
     input,
     textarea,
     select {

package/scss/wui/_field-sizes.scss

@@ -0,0 +1,55 @@
+// Size steps for fields that had none: textarea, checkbox, switch, OTP. Part of the wui-components layer, see _wui-components.scss for load order.
+
+// .textarea sets its own padding and height after .input-sm/.input-lg, so the shared step classes
+// need restating with the textarea's specificity.
+// A typed-in field stays at 16px or more on a phone, or iOS zooms on focus; --wui-fs-lg is the smallest text step that does.
+.textarea.input-sm {
+    padding: var(--wui-space-sm) var(--wui-space-md) var(--wui-space-sm);
+    font-size: var(--wui-fs-lg);
+    border-radius: var(--wui-field-sm-radius);
+}
+.textarea.input-lg {
+    padding: var(--wui-space-md) var(--wui-space-lg) var(--wui-space-lg);
+    font-size: var(--wui-fs-lg);
+    border-radius: var(--wui-field-lg-radius);
+}
+
+.form-check.form-check-sm .form-check-input {
+    width: 16px;
+    height: 16px;
+    background-size: 12px 12px;
+}
+.form-check.form-check-lg .form-check-input {
+    width: 24px;
+    height: 24px;
+    background-size: 18px 18px;
+}
+.form-check.form-check-sm .form-check-label {
+    font-size: var(--wui-fs-xs);
+}
+.form-check.form-check-lg .form-check-label {
+    font-size: var(--wui-fs-base);
+}
+
+// Written after the checkbox rules: equal specificity, so the switch sizes win on a switch.
+.form-switch.form-check-sm .form-check-input {
+    width: 32px;
+    height: 18px;
+    background-size: 14px 14px;
+}
+.form-switch.form-check-lg .form-check-input {
+    width: 48px;
+    height: 26px;
+    background-size: 22px 22px;
+}
+
+wui-otp[size="sm"] .otp-slot {
+    width: 36px;
+    height: var(--wui-control-sm);
+    font-size: var(--wui-fs-sm);
+}
+wui-otp[size="lg"] .otp-slot {
+    width: 52px;
+    height: 52px;
+    font-size: var(--wui-fs-lg);
+}

package/scss/wui/_floating.scss

@@ -1,5 +1,5 @@
 // ── Floating stack ──
-// The one fixed corner container the compact floating buttons (the chat launcher, the report-an-issue
+// The one fixed corner container the compact floating buttons (AppFloatingButton: 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.
 //
@@ -42,7 +42,7 @@
 }
 
 // ── Compact floating button ──
-// An icon-only circle. The label lives in the tooltip and the aria-label, never on the button.
+// An icon-only circle in three sizes. The label lives in the tooltip and the aria-label, never on the button.
 .wui-floating-btn {
     --wui-floating-size: 48px;
 
@@ -55,6 +55,13 @@
     border-radius: 50%;
     box-shadow: var(--wui-shadow-popover);
 }
+// Sizes of the circle. The base class is the 48px medium size.
+.wui-floating-btn--sm {
+    --wui-floating-size: 40px;
+}
+.wui-floating-btn--lg {
+    --wui-floating-size: 56px;
+}
 // 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;

package/scss/wui/_groups.scss

@@ -46,7 +46,7 @@
 .wui-split-button .btn:focus-visible {
     z-index: 2;
 }
-.wui-split-button > .btn.btn-text:first-child {
+.wui-split-button > .btn.btn-link-primary:first-child {
     padding-inline-end: 0.5rem;
 }
 

package/scss/wui/_inline-edit.scss

@@ -64,6 +64,12 @@
 .wui-inline-edit-value[data-wui-empty] {
     color: var(--color-text-subtle);
 }
+// wrap={false}: one line, as a table cell or a tight header expects.
+.wui-inline-edit--nowrap,
+.wui-inline-edit--nowrap .wui-inline-edit-value {
+    white-space: nowrap;
+    overflow-wrap: normal;
+}
 
 .wui-inline-edit-icon {
     display: inline-flex;

package/scss/wui/_overlays.scss

@@ -658,7 +658,7 @@ body[data-rr-ui-modal-open] {
 
 // Tone presets — swap the three colour vars; the arrow follows --bs-tooltip-bg automatically.
 // Fills that carry white text use the AA-cleared -strong tokens; warning stays dark-on-yellow.
-.tooltip.wui-tooltip.tone-dark {
+.tooltip.wui-tooltip.wui-tooltip-inverse {
     --wui-tooltip-bg: var(--color-text);
     --wui-tooltip-color: var(--color-bg);
     --wui-tooltip-border: transparent;
@@ -695,6 +695,15 @@ body[data-rr-ui-modal-open] {
     flex-direction: column;
     gap: 8px;
     max-width: min(92vw, 400px);
+    --wui-toast-offset: var(--wui-toast-edge-offset);
+}
+
+// Bootstrap's p-3 pads every side; the pinned edge takes the offset instead, and the side inset stays.
+.wui-toast-container.top-0 {
+    padding-top: var(--wui-toast-offset) !important;
+}
+.wui-toast-container.bottom-0 {
+    padding-bottom: var(--wui-toast-offset) !important;
 }
 
 // An end-side stack moves clear of an open side drawer, so a toast never covers the panel's

package/scss/wui/_pagination.scss

@@ -2,8 +2,8 @@
 //
 // Part of the wui-components layer; imported right after _data.scss. Order within the layer is load-bearing (see _wui-components.scss).
 
-// Pagination footer: a "10 per page" menu beside the page buttons, flush under a table. No row
-// range and no total; the page buttons say where you are.
+// Pagination footer: a "10 per page" menu beside the page buttons, flush under a table. A range
+// summary ("Showing x to y of z") shows only with summary, otherwise the page buttons say where you are.
 .table-pagination {
     display: flex;
     align-items: center;
@@ -20,6 +20,11 @@
     align-items: center;
     white-space: nowrap;
 }
+.wui-pager-summary {
+    margin-inline-end: auto;
+    white-space: nowrap;
+    font-variant-numeric: tabular-nums;
+}
 .select.tpg-select {
     width: auto;
     min-width: 64px;
@@ -152,6 +157,9 @@
     padding: 0;
     border-top: none;
 }
+.wui-table-pagination-standalone > .wui-pager-summary {
+    margin-inline-end: 0;
+}
 
 // The compact pager: 28px page and arrow buttons and 12px text. A phone keeps the 44px target.
 .wui-table-pagination-sm {

package/scss/wui/_rich-text.scss

@@ -310,3 +310,8 @@ wui-rich-text[readonly] .wui-rich-text-prose {
 ):active:not(:disabled, [aria-disabled="true"]) {
     background-image: linear-gradient(var(--wui-pressed-overlay), var(--wui-pressed-overlay)) !important;
 }
+
+// The busy dim of wui/field-busy, kept here because the shell class belongs to this on-demand layer.
+.wui-rich-text-shell.wui-field-busy {
+    opacity: var(--wui-disabled-opacity);
+}

package/scss/wui/_shell.scss

@@ -273,6 +273,30 @@
     flex: none;
     overflow: hidden;
 }
+.app-sidebar-brand .wui-brand-logo,
+.app-sidebar-brand .wui-brand-mark {
+    display: block;
+    flex: none;
+    height: var(--wui-brand-logo-height, 32px);
+    width: auto;
+    max-width: 100%;
+}
+.app-sidebar-brand .wui-brand-mark {
+    display: none;
+    width: var(--wui-brand-logo-height, 32px);
+}
+.app-sidebar-brand.wui-brand-mark-only .wui-brand-mark {
+    display: block;
+}
+.app-sidebar-brand .wui-brand-dark {
+    display: none;
+}
+:root[data-theme="dark"] .app-sidebar-brand.wui-brand-themed .wui-brand-light {
+    display: none;
+}
+:root[data-theme="dark"] .app-sidebar-brand .wui-brand-dark {
+    display: block;
+}
 // The nav list scrolls independently while the brand row stays put. `min-height: 0`
 // is load-bearing — without it this flex child refuses to shrink below its content
 // and the overflow never engages, so the lower nav items become unreachable.
@@ -545,6 +569,23 @@
     gap: 0;
     padding: 0;
 }
+.app-shell.collapsed .app-sidebar-brand.wui-brand-has-mark .wui-brand-logo {
+    display: none;
+}
+.app-shell.collapsed .app-sidebar-brand.wui-brand-has-mark .wui-brand-mark {
+    display: block;
+}
+.app-shell.collapsed .app-sidebar-brand:not(.wui-brand-has-mark) .wui-brand-logo {
+    width: var(--wui-brand-logo-height, 32px);
+    object-fit: cover;
+    object-position: left center;
+}
+:root[data-theme="dark"] .app-shell.collapsed .app-sidebar-brand.wui-brand-themed .wui-brand-mark.wui-brand-light {
+    display: none;
+}
+:root[data-theme="dark"] .app-shell.collapsed .app-sidebar-brand .wui-brand-mark.wui-brand-dark {
+    display: block;
+}
 // The label leaves the VISUAL flow but must stay in the accessibility tree — an
 // icon-only rail link with display:none text has no accessible name (axe
 // link-name, serious). Clip-rect keeps the name; no phantom gap since it takes

package/scss/wui/_shortcuts.scss

@@ -33,7 +33,7 @@
     color: inherit;
 }
 // The default tooltip sits on the plain surface colour, so its chip takes the plain chip look.
-.tooltip.wui-tooltip:not(.tone-dark):not(.tone-primary):not(.tone-success):not(.tone-danger):not(.tone-warning) .wui-kbd {
+.tooltip.wui-tooltip:not(.wui-tooltip-inverse):not(.tone-primary):not(.tone-success):not(.tone-danger):not(.tone-warning) .wui-kbd {
     border-color: var(--color-border);
     background: var(--color-bg-muted);
     color: var(--color-text);