@webority/theme 0.76.0 → 0.77.1

package/package.json

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

@@ -27,12 +27,11 @@
 }
 
 .btn-primary {
-    // Pin hover/active to the pressed-primary token so a rebrand tracks
-    // automatically instead of Bootstrap auto-shading $primary off-spec.
-    --bs-btn-hover-bg: var(--wui-primary-pressed);
-    --bs-btn-hover-border-color: var(--wui-primary-pressed);
-    --bs-btn-active-bg: var(--wui-primary-pressed);
-    --bs-btn-active-border-color: var(--wui-primary-pressed);
+    // Hover and press read --color-primary-hover: the pressed primary in light and the lifted dark primary in dark (_wui-aliases.scss), so a rebrand and dark mode both track it.
+    --bs-btn-hover-bg: var(--color-primary-hover);
+    --bs-btn-hover-border-color: var(--color-primary-hover);
+    --bs-btn-active-bg: var(--color-primary-hover);
+    --bs-btn-active-border-color: var(--color-primary-hover);
     // Bootstrap computes this label colour at SCSS compile time from the library's
     // default $primary, so it can never react to a product overriding --wui-primary as a
     // runtime CSS var. Routing it through the token makes a light-primary brand's
@@ -858,9 +857,10 @@
 .card-header-actions + .card-close {
     margin-left: 0.25rem;
 }
+// Hover tints the button danger, the same as the modal and drawer close buttons.
 .card-close:hover {
-    background: var(--color-bg-muted);
-    color: var(--color-text);
+    background: var(--color-danger-soft);
+    color: var(--color-danger-text);
 }
 .card-close:focus-visible {
     outline: var(--wui-focus-ring-width) solid var(--color-focus-ring);

package/scss/_wui-aliases.scss

@@ -25,9 +25,10 @@
   --color-progress-track: var(--wui-progress-track);
   // Label text inside a progress bar fill.
   --color-progress-label: var(--wui-bg-light);
-  // Ink on a solid status fill (success, warning, danger, info): near-black in both modes, since
-  // white fails AA on the bright fills.
-  --color-on-status-fill: #0F0F0F;
+  // Icon ink on a solid status fill (the filled timeline dots): white in both modes, by design
+  // choice. White on the bright success and warning fills sits under the 3:1 icon floor, so the
+  // contrast gate does not measure this pair.
+  --color-on-status-fill: #FFFFFF;
   // Ink on a DEEP status fill (the -text tokens, used as a fill the way primary is): white in
   // light mode, where those shades measure 5.5 to 6.2:1; near-black in dark mode, where -text is
   // the bright fill.

package/scss/_wui-core.scss

@@ -0,0 +1,88 @@
+// ============================================================================
+// _wui-core.scss
+// ----------------------------------------------------------------------------
+// The core widget layer: every partial of _wui-components.scss except the
+// on-demand set, in the same order. A portal imports this globally, and each
+// on-demand partial (wui/<name>) from the lazy route that renders it.
+//
+// scripts/check-theme-split.mjs keeps this file in step with _wui-components.scss.
+// The split guards two things: a widget rule left in core defeats the split,
+// and a core rule that styles an on-demand class silently changes when that
+// layer is absent.
+// ============================================================================
+
+// Shared tone-pill mixin — used by .badge, .status-label, and .chip.
+// Must be imported before components that use it.
+@import "wui/tone-pill";
+
+// The order below is LOAD-BEARING. A later partial may deliberately override an
+// earlier one, so reordering these imports silently changes the cascade — and
+// nothing in the build will complain. `pnpm check:theme` measures the rules that
+// have to win against Bootstrap; the rest is guarded by review.
+@import "wui/controls";
+@import "wui/choice";
+@import "wui/media";
+@import "wui/avatar-picker";
+@import "wui/navigation";
+@import "wui/card";
+@import "wui/data";
+@import "wui/illustration";
+@import "wui/table-server";
+@import "wui/inline-edit";
+@import "wui/mention-input";
+@import "wui/comment-thread";
+@import "wui/overlays";
+@import "wui/drawer";
+@import "wui/modal-remote";
+@import "wui/utilities";
+@import "wui/typography";
+@import "wui/disclosure";
+@import "wui/display";
+@import "wui/flow";
+// After `flow`: the pricing section extends its `.plan-grid` rules.
+@import "wui/sections";
+@import "wui/chart";
+@import "wui/chart-card";
+@import "wui/scrollbar";
+@import "wui/sortable";
+// Before `split-view`, which places the legend sheet inside the list column.
+@import "wui/record-pager";
+@import "wui/shortcuts";
+@import "wui/split-view";
+@import "wui/groups";
+@import "wui/carousel";
+@import "wui/onboarding-checklist";
+@import "wui/rating";
+@import "wui/score-scale";
+@import "wui/relative-time";
+@import "wui/resizable";
+@import "wui/rolling-number";
+@import "wui/show-more";
+@import "wui/truncate";
+@import "wui/page-header-bar";
+@import "wui/filter-popover";
+@import "wui/metric-strip";
+@import "wui/due-date";
+
+// Country flags are NOT part of this layer. The 245 `.wui-flag-*` rules are about 187KB raw
+// (38KB Brotli) of inlined SVG, and most sites never render a phone field or country picker.
+// A site that does imports `@webority/theme/scss/flags` once, after this file; without it
+// <wui-phone> and <wui-country-select> show an empty grey box where the flag should be.
+@import "wui/shell";
+@import "wui/shell-parts";
+@import "wui/consent-banner";
+@import "wui/lightbox";
+@import "wui/toolbar";
+@import "wui/theme-toggle";
+@import "wui/floating";
+@import "wui/code-block";
+@import "wui/context-menu";
+@import "wui/menubar";
+@import "wui/navigation-menu";
+@import "wui/hover-card";
+@import "wui/notification-center";
+@import "wui/whats-new";
+// After every component partial: the shared focus ring and pressed wash settle ties with their hover rules.
+@import "wui/interaction";
+// Last: restates the settled state of menus other partials style, so it must win.
+@import "wui/menu-motion";

package/scss/wui/_calendar.scss

@@ -240,6 +240,28 @@ wui-calendar[data-view="week"] .wui-calendar-surface > * {
     --fc-event-text-color: var(--color-info-text-on-soft);
 }
 
+// A month chip keeps the time on its first line and the title under it on up to two lines, so a
+// title reads in a narrow cell; the full text is the chip tooltip and the day's "+N more" list.
+wui-calendar[data-view="month"] .wui-calendar-chip {
+    flex-wrap: wrap;
+    align-items: center;
+    white-space: normal;
+}
+wui-calendar[data-view="month"] .wui-calendar-chip-time {
+    flex: none;
+}
+wui-calendar[data-view="month"] .wui-calendar-chip-title {
+    flex: 1 1 100%;
+    min-width: 0;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+    line-clamp: 2;
+    overflow: hidden;
+    overflow-wrap: anywhere;
+    white-space: normal;
+}
+
 // What a page with no script shows until the element's script replaces it.
 .wui-calendar-fallback {
     margin: 0;
@@ -254,3 +276,8 @@ wui-calendar[data-view="week"] .wui-calendar-surface > * {
         transition: none;
     }
 }
+
+// The shared pressed wash of wui/interaction, restated here so it ships with this on-demand layer.
+:is(.wui-calendar-nav-btn, .wui-calendar-today-btn, .wui-calendar-view-btn):active:not(:disabled, [aria-disabled="true"]) {
+    background-image: linear-gradient(var(--color-pressed-overlay), var(--color-pressed-overlay)) !important;
+}

package/scss/wui/_card.scss

@@ -21,14 +21,24 @@
     // Default card is borderless — a flat surface. The border-STYLE stays solid (Bootstrap's
     // `border: var(--bs-card-border-width) solid …`), so a variant or a consumer class can
     // bring the edge back just by giving it a width (set --bs-card-border-width).
-    --bs-card-border-width: 0;
+    // With a unit: the inner radius below subtracts it, and calc() drops a bare 0.
+    --bs-card-border-width: 0px;
+    // Bootstrap compiles the inner radius from $card-border-radius, which is smaller than the
+    // token radius the card actually draws. The header, footer and media round their corners
+    // with it, so their fill poked out over a bordered card's corners and the border looked cut.
+    // Derive it from the live radius and border width instead.
+    --bs-card-inner-border-radius: calc(var(--bs-card-border-radius) - var(--bs-card-border-width));
 }
 
 // A card header that carries a title on the left and controls on the right — the
 // pattern nearly every panel header uses, so it belongs here rather than being
 // re-flexed with utilities on each one.
+// The header and footer share the card's own fill (a muted card stays muted to its top edge),
+// and the header carries no rule of its own: Bootstrap's divider followed the card's border
+// width, so only the elevated variant drew one.
 .card-header {
-    --bs-card-cap-bg: var(--color-surface);
+    --bs-card-cap-bg: transparent;
+    border-bottom: 0;
     display: flex;
     align-items: center;
     justify-content: space-between;
@@ -63,8 +73,9 @@
     --bs-card-border-width: 1px;
     border-color: var(--color-border-strong);
 }
+// Through the variable, so the inner radius and the border agree.
 .card-outlined {
-    border-width: 2px;
+    --bs-card-border-width: 2px;
     border-color: var(--color-border-strong);
 }
 .card-muted {
@@ -88,14 +99,16 @@
 .card-accent.tone-info {
     --card-accent: var(--color-info);
 }
+// The stripe is a left-only border on a layer with the card's own corners. CSS corner shaping
+// curves its inner edge with the radius minus each side's width, so the stripe thins smoothly
+// to nothing round both left corners. A straight bar clipped by the corners showed sliced ends.
 .card-accent::before {
     content: "";
     position: absolute;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    width: 4px;
-    background: var(--card-accent);
+    inset: 0;
+    border-left: 4px solid var(--card-accent);
+    border-radius: inherit;
+    pointer-events: none;
 }
 
 // ── Padding scale ── (header + body + footer). `md` is the Bootstrap default.
@@ -114,6 +127,12 @@
 .card-pad-lg > .card-footer {
     padding: 28px 32px;
 }
+// With no rule under the header, its bottom padding alone separates the title from the body;
+// the body's own top padding on top of it left a double gap. After the scale, so every
+// padding step keeps the single gap.
+.card > .card-header + .card-body {
+    padding-top: 0;
+}
 
 // ── Constrained width ── (`maxWidth`): caps + centres a standalone card. Cards
 // are fluid (fill their column) unless this is set.
@@ -124,7 +143,7 @@
 
 // ── Footer ── (React `footer` / Razor <app-card-footer>): mirrors the header row.
 .card-footer {
-    --bs-card-cap-bg: var(--color-surface);
+    --bs-card-cap-bg: transparent;
     display: flex;
     align-items: center;
     gap: 12px;
@@ -164,8 +183,8 @@
 }
 // Media flush at the top follows the card's rounded corners.
 .card > .card-media:first-child {
-    border-top-left-radius: var(--radius-lg);
-    border-top-right-radius: var(--radius-lg);
+    border-top-left-radius: var(--bs-card-inner-border-radius);
+    border-top-right-radius: var(--bs-card-inner-border-radius);
 }
 
 // ── Clickable card ── (`href` / `onClick`): the whole surface is one control.

package/scss/wui/_command-palette.scss

@@ -180,9 +180,13 @@ button.wui-cmd-crumb:focus-visible {
     // Keeps a little of the next row visible when the keyboard scrolls the active one in.
     scroll-margin: 6px;
 }
+// Focus stays in the input, and the hover tint alone marks the keyboard's row at about 1.2:1, so
+// an inset ring makes it plain; inset, because the list scrolls and would clip an outer ring.
 .wui-cmd-item[aria-selected="true"] {
     background: var(--color-primary-soft);
     color: var(--color-primary-ink);
+    outline: var(--wui-focus-ring-width) solid var(--color-focus-ring);
+    outline-offset: var(--wui-focus-ring-inset);
 }
 .wui-cmd-item[aria-disabled="true"] {
     color: var(--color-text-muted);
@@ -296,3 +300,8 @@ button.wui-cmd-crumb:focus-visible {
             color 0.12s ease;
     }
 }
+
+// The shared pressed wash of wui/interaction, restated here so it ships with this on-demand layer.
+:is(.wui-cmd-back, button.wui-cmd-crumb):active:not(:disabled, [aria-disabled="true"]) {
+    background-image: linear-gradient(var(--color-pressed-overlay), var(--color-pressed-overlay)) !important;
+}

package/scss/wui/_controls.scss

@@ -1145,8 +1145,7 @@ $wui-field-error-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/
     gap: 4px;
     min-width: 0;
 }
-// Inside the flex column these two size to their content, so they stretch to the field instead.
-.field > wui-rich-text,
+// Inside the flex column it sizes to its content, so it stretches to the field instead.
 .field > wui-mention-input {
     align-self: stretch;
     width: 100%;

package/scss/wui/_data.scss

@@ -198,6 +198,7 @@
     font-size: 12px;
     font-weight: 500;
     letter-spacing: 0.04em;
+    text-transform: uppercase;
     white-space: nowrap;
     vertical-align: middle;
     transition:
@@ -484,6 +485,13 @@
     overflow-x: auto;
     scrollbar-width: none;
 }
+// A non-visible overflow-x makes overflow-y compute to auto, which clips the Filters panel to the bar.
+// The phone sheet is position: fixed and escapes the clip, so the phone keeps overflow-x.
+@media (min-width: 576px) {
+    .wui-table-toolbar-filters {
+        overflow: visible;
+    }
+}
 // The search box is full-width on its own; in a toolbar it is one control among several.
 .wui-table-toolbar .search-wrap {
     width: min(320px, 100%);
@@ -545,6 +553,18 @@
 .wui-filter-form > .wui-filter-bar {
     display: contents !important;
 }
+.wui-table-toolbar-filters > .wui-filter-bar,
+.wui-table-toolbar-filters > .wui-filter-form {
+    flex: 1 1 auto;
+    min-width: 0;
+}
+// An inline facet's control already shows its value, so its chip repeats it. On a phone the inline
+// facets fold into the sheet and the chips are then the only visible values, so the hide is desktop only.
+@media (min-width: 576px) {
+    .wui-filter-bar .wui-filter-chip-inline {
+        display: none;
+    }
+}
 // On a phone each facet takes its own line; segments and buttons keep their width.
 @media (max-width: 575.98px) {
     .wui-filter-bar > .field,
@@ -562,6 +582,10 @@
     white-space: nowrap;
     flex: none;
 }
+// 3px padding and a 1px border on each side, so the strip reaches the small control height beside the other filter controls.
+.wui-filter-bar .segmented-sm {
+    --segmented-option-h: calc(var(--wui-control-height-sm) - 8px);
+}
 // Facets folded behind the Filters button stack in one panel, each at the panel's width. Both surfaces
 // draw it as the same <details>; in the Razor bar it sits inside the form, so the controls still submit.
 .wui-filter-more-panel {
@@ -773,6 +797,24 @@
     font-size: 13px;
     user-select: none;
 }
+// A finger needs a 44px target: the pager's controls grow to the control height on a phone.
+@media (max-width: 575.98px) {
+    .select.tpg-select {
+        height: var(--wui-control-height);
+        min-height: var(--wui-control-height);
+    }
+    .tpg-arrow {
+        width: var(--wui-control-height);
+        height: var(--wui-control-height);
+    }
+    .tpg-page {
+        min-width: var(--wui-control-height);
+        height: var(--wui-control-height);
+    }
+    .tpg-ellipsis {
+        height: var(--wui-control-height);
+    }
+}
 
 // ── Standalone pagination (AppPagination) ──
 // Bootstrap's .pagination is already styled; these rules refine it for the common case
@@ -1082,7 +1124,9 @@
         align-items: flex-end;
     }
     // The leading cell is the card's title line: full width, no label.
+    // Block, not the flex row of the other cells, so a name with a sub-line stacks instead of sitting beside it.
     .table-ledger.wui-table-stack > * > tr > td:not(.wui-select-cell, .wui-expand-cell):is(:first-child, .wui-select-cell + td, .wui-expand-cell + td) {
+        display: block;
         justify-content: flex-start;
         padding: 0 32px 6px 0;
         text-align: left;

package/scss/wui/_display.scss

@@ -175,21 +175,27 @@
 }
 
 // Spotlight — an editorial feature tile: the label sits top-left with the icon chip pinned
-// top-right, the value is set in the display face (a product's serif brand face when it
-// overrides --wui-font-display), and an optional caption reads under the number. For the
-// single showcase stat on a marketing/portal surface where the number is the hero.
+// top-right, the value is set large in the product's own font, and an optional caption reads
+// under the number. For the single showcase stat on a marketing/portal surface where the
+// number is the hero.
 .kpi.kpi-spotlight {
     display: grid;
     grid-template-columns: minmax(0, 1fr) auto;
+    // Rows pack at the top: a tile stretched to a taller neighbour's height puts the spare
+    // space below the caption, so the label and icon row stays level across tiles.
+    align-content: start;
     column-gap: 16px;
     padding: 22px 24px;
-    --wui-kpi-value-size: 44px;
+    --wui-kpi-value-size: 36px;
 }
 .kpi.kpi-spotlight .kpi-icon {
     grid-column: 2;
     grid-row: 1;
     align-self: start;
     justify-self: end;
+    // A larger chip than the plain tile's 40px, to match the hero-sized value; the glyph keeps its size.
+    width: 48px;
+    height: 48px;
     margin-bottom: 0;
 }
 .kpi.kpi-spotlight .kpi-label,
@@ -206,12 +212,9 @@
 }
 .kpi.kpi-spotlight .kpi-value {
     margin-top: 14px;
-    // The editorial serif is this variant's signature (see the reference tile), so the value gets
-    // a serif stack directly — not --wui-font-display, which defaults to the body sans and so would
-    // never read as serif. A product that wants its own face overrides this one selector.
-    // Size comes from --wui-kpi-value-size (44px default, set on the spotlight root above), so a
+    // No font-family: the value inherits the product's own font like every other tile.
+    // Size comes from --wui-kpi-value-size (36px default, set on the spotlight root above), so a
     // custom `valueSize` (px) can tame a too-large headline.
-    font-family: var(--wui-font-display);
     line-height: 1;
     font-weight: 600;
 }
@@ -357,6 +360,11 @@ a.info-row:hover .info-value {
     border-bottom: 1px solid var(--color-border);
     grid-column: span var(--descs-span, 1);
 }
+@for $n from 1 through 12 {
+    .wui-descs-span-#{$n} {
+        --descs-span: #{$n};
+    }
+}
 .descs-label {
     font-size: 12px;
     font-weight: 600;
@@ -1312,7 +1320,7 @@ a.info-row:hover .info-value {
     position: absolute;
     left: 0;
     right: 0;
-    bottom: -2px;
+    bottom: 1px;
     height: 1px;
     background: currentColor;
     transform: scaleX(0);

package/scss/wui/_dock.scss

@@ -100,3 +100,8 @@ wui-dock {
         transition: none;
     }
 }
+
+// The shared pressed wash of wui/interaction, restated here so it ships with this on-demand layer.
+.dock-item:active:not(:disabled, [aria-disabled="true"]) {
+    background-image: linear-gradient(var(--color-pressed-overlay), var(--color-pressed-overlay)) !important;
+}

package/scss/wui/_file-viewer.scss

@@ -500,3 +500,8 @@ wui-file-viewer:fullscreen {
     min-width: 48px;
 }
 
+// The shared pressed wash of wui/interaction, restated here so it ships with this on-demand layer.
+.wui-file-viewer-zoom:active:not(:disabled, [aria-disabled="true"]) {
+    background-image: linear-gradient(var(--color-pressed-overlay), var(--color-pressed-overlay)) !important;
+}
+

package/scss/wui/_floating.scss

@@ -14,6 +14,10 @@
     flex-direction: column-reverse;
     gap: 12px;
     margin: 1rem;
+    // Clear the home indicator and the notch on a phone.
+    margin-bottom: max(1rem, env(safe-area-inset-bottom));
+    margin-left: max(1rem, env(safe-area-inset-left));
+    margin-right: max(1rem, env(safe-area-inset-right));
     // The container spans only its items, but a gap between them must not swallow clicks on the page.
     pointer-events: none;
 }
@@ -53,9 +57,9 @@
 // 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);
+    --bs-btn-border-color: color-mix(in srgb, var(--color-primary) 30%, transparent);
+    --bs-btn-hover-border-color: color-mix(in srgb, var(--color-primary) 30%, transparent);
+    --bs-btn-active-border-color: color-mix(in srgb, var(--color-primary) 30%, transparent);
 }
 @media (prefers-reduced-motion: reduce) {
     .wui-floating-btn {