@webority/theme 0.64.0 → 0.66.0

package/package.json

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

@@ -523,6 +523,21 @@
     margin-top: 0.25rem;
 }
 
+// An item that hides from a width up (AppDropdown item `hiddenFrom`): the wide screen shows the
+// same control in its own place, so the one overflow menu drops the row from that width on.
+@media (min-width: 576px) {
+    .dropdown-item.wui-hidden-from-sm { display: none; }
+}
+@media (min-width: 768px) {
+    .dropdown-item.wui-hidden-from-md { display: none; }
+}
+@media (min-width: 992px) {
+    .dropdown-item.wui-hidden-from-lg { display: none; }
+}
+@media (min-width: 1200px) {
+    .dropdown-item.wui-hidden-from-xl { display: none; }
+}
+
 // ---- Ghost button: the tertiary action --------------------------------
 // Brand-coloured, underlined text with no box in any state. It has no visible container,
 // so nothing may draw one: no hover fill, no sheen sweep, no lift or press nudge, and no

package/scss/_tokens.scss

@@ -43,8 +43,10 @@
     --wui-field-bg: #F9FBFC;
     // Resting and hover border of every input-like control. They clear WCAG 1.4.11's 3:1
     // against the field fill and the surface, so a field's edge is visible without focus.
-    --wui-field-border: #80899F;
-    --wui-field-border-hover: #687088;
+    // Both sit just above the floor (3.11:1 and 3.63:1 on the fill) so the edge stays light;
+    // check-contrast fails if either drops under it.
+    --wui-field-border: #888FA4;
+    --wui-field-border-hover: #7C839A;
     --wui-border-light: #EBEDF3;
     --wui-border-soft: #F4F6F8;
     // The unfilled part of a progress bar / meter. Darker than every surface it can sit on

package/scss/_wui-components.scss

@@ -64,6 +64,7 @@
 @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";
@@ -72,6 +73,10 @@
 // After `navigation`/`overlays`: the switcher restates dropdown-item chrome those partials
 // set, so it has to win on equal specificity.
 @import "wui/workspace";
+@import "wui/page-header-bar";
+@import "wui/filter-popover";
+@import "wui/metric-strip";
+@import "wui/due-date";
 
 // Country flags are NOT part of this aggregate. 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.

package/scss/wui/_chart.scss

@@ -11,6 +11,8 @@
 // engine draws inside .wui-chart-canvas with colours the element reads from --wui-chart-*.
 wui-chart {
     position: relative;
+    // Keeps the engine tooltip in the chart's own stacking layer, under sticky page chrome.
+    isolation: isolate;
     display: block;
     min-width: 0;
     color: var(--color-text-muted);

package/scss/wui/_controls.scss

@@ -1471,6 +1471,21 @@ wui-select[compact] {
     font-size: 12px;
 }
 
+// A count beside an AppSegmented option's label: a small muted figure with tabular digits, the
+// same treatment as a choice chip's count. Plain colour, no opacity, so it keeps its contrast.
+.wui-segmented-option-count {
+    font-size: 11px;
+    font-weight: 500;
+    font-variant-numeric: tabular-nums;
+    color: var(--color-text-muted);
+}
+// Keyboard focus on the selected segment: the ring sits inside the pill, over its selected ring,
+// so the focus cue and the selection read as one shape and not as two rings. The selector outranks
+// the unscoped focus rule in _display.scss, which loads after this partial.
+.segmented .segmented-option:has(.segmented-input:checked:focus-visible) {
+    outline-offset: var(--wui-focus-ring-inset);
+}
+
 // Form section heading — a branded accent bar rather than a full-width hairline,
 // so a long form reads as designed sections instead of raw rules.
 //

package/scss/wui/_data.scss

@@ -194,7 +194,6 @@
     font-size: 12px;
     font-weight: 500;
     letter-spacing: 0.04em;
-    text-transform: uppercase;
     white-space: nowrap;
     vertical-align: middle;
     transition:
@@ -293,6 +292,10 @@
     // block above) — if it ever needs viewport-relative sizing again, do it without turning
     // the scroll container into a query container.
 }
+// Flush: no inset above the column header row, so the header sits at the top of the wrap.
+.table-wrap.wui-table-flush:has(> .table-ledger) {
+    padding-top: 0;
+}
 .table-ledger {
     border-spacing: 0;
 }
@@ -306,7 +309,6 @@
     font-weight: 500;
     line-height: 17px;
     letter-spacing: 0.04em;
-    text-transform: uppercase;
     // --color-text-subtle (#78829D) is ~3.5:1 on the muted band, below WCAG AA's 4.5:1
     // for 12px text. A column header names the data under it — that is not decorative
     // text, so it takes the muted ramp (~7.5:1). Caught by the axe pass, on both surfaces.
@@ -884,6 +886,12 @@
     min-width: 0;
 }
 
+// The identity column takes the width the other columns leave (its header carries wui-col-grow).
+// Its name clamps to one line, and the full text is the tooltip.
+.table-ledger th.wui-col-grow {
+    width: 100%;
+}
+
 // Row-selection checkbox column.
 .table-ledger th.wui-select-cell,
 .table-ledger td.wui-select-cell {
@@ -953,7 +961,6 @@
     font-size: 12px;
     font-weight: 600;
     letter-spacing: 0.04em;
-    text-transform: uppercase;
     color: var(--color-text-subtle);
 }
 .wui-column-menu-item {
@@ -1027,6 +1034,7 @@
         display: flex;
         align-items: center;
         justify-content: space-between;
+        flex-wrap: wrap;
         gap: 12px;
         height: auto;
         min-height: 0;
@@ -1067,6 +1075,29 @@
     .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)::before {
         content: none;
     }
+    // A title wraps in full on a card: a phone reader has no tooltip to read the rest from.
+    .table-ledger.wui-table-stack .u-name {
+        display: block;
+        overflow: visible;
+    }
+    // A group header is a section label between the cards, not a card of its own.
+    .table-ledger.wui-table-stack > tbody > tr.wui-group-row {
+        margin-bottom: 0;
+        padding: 0;
+        border: 0;
+        border-radius: 0;
+        background: none;
+    }
+    .table-ledger.wui-table-stack > tbody > tr.wui-group-row > th.wui-group-cell {
+        display: block;
+        padding: 12px 0 4px;
+        border: 0;
+        background: none;
+    }
+    // A row with no actions leaves no empty band under its card.
+    .table-ledger.wui-table-stack > tbody > tr > td:has(> .u-row-actions:empty) {
+        display: none;
+    }
     // Empty cells (a footer's blank columns) take no line.
     .table-ledger.wui-table-stack > * > tr > td:empty {
         display: none;

package/scss/wui/_display.scss

@@ -413,6 +413,40 @@ a.info-row:hover .info-value {
         --descs-cols: 1;
     }
 }
+// Summary layout (React `layout="summary"`): one row per item, its label left and its value right.
+// Declared after the column variants so the single column wins on equal specificity.
+.wui-descs-summary .descs-list {
+    --descs-cols: 1;
+}
+.wui-descs-summary .descs-item {
+    flex-direction: row;
+    align-items: baseline;
+    justify-content: space-between;
+    gap: 16px;
+    grid-column: 1 / -1;
+    padding: 12px 16px;
+}
+.wui-descs-summary .descs-label,
+.wui-descs-summary .descs-value {
+    padding: 0;
+}
+.wui-descs-summary .descs-value {
+    margin-left: auto;
+    text-align: right;
+    font-variant-numeric: tabular-nums;
+}
+// Emphasis (React item `emphasis`): the total row, bold, with a rule above it. The row before it
+// drops its own bottom rule so the two do not stack into a double line.
+.descs-item.wui-descs-emphasis {
+    border-top: 1px solid var(--color-text-muted);
+}
+.descs-item:has(+ .wui-descs-emphasis) {
+    border-bottom-color: transparent;
+}
+.descs-item.wui-descs-emphasis .descs-label,
+.descs-item.wui-descs-emphasis .descs-value {
+    font-weight: 700;
+}
 
 // ============================================================================
 // Segmented control — 2–4 mutually-exclusive options shown side by side.

package/scss/wui/_due-date.scss

@@ -0,0 +1,26 @@
+// ── Due date ──
+// AppDueDate / <app-due-date> (a <wui-due-date> element): a due date that never wraps. An overdue
+// date reads in danger with its glyph, a date within soon-days reads "N days left" in warning.
+//
+// Part of the wui-components layer, see _wui-components.scss for load order.
+
+.wui-due-date {
+    white-space: nowrap;
+    font-variant-numeric: tabular-nums;
+
+    > .wui-icon {
+        margin-right: 0.25rem;
+    }
+}
+
+.wui-due-date-danger {
+    color: var(--color-danger-text);
+}
+
+.wui-due-date-warning {
+    color: var(--color-warning-text);
+}
+
+.wui-due-date-empty {
+    color: var(--color-text-muted);
+}

package/scss/wui/_filter-popover.scss

@@ -0,0 +1,63 @@
+// The floating filter panel: <wui-filter-popover> with its Filters button, drawn by AppFilterBar
+// `floating` and <app-filter-bar floating>. The element places the panel (anchorOverlay, fixed), so
+// this partial only draws it: a 600 px panel of facets in two columns, and a foot with the Keep open
+// switch and Clear all.
+
+.wui-filter-popover {
+    display: inline-block;
+}
+
+.wui-filter-popover-trigger {
+    white-space: nowrap;
+}
+
+.wui-filter-popover-panel {
+    box-sizing: border-box;
+    width: 600px;
+    max-width: calc(100vw - 1rem);
+    max-height: 80vh;
+    overflow-y: auto;
+    padding: 1rem;
+    background: var(--color-surface);
+    border: 1px solid var(--color-border);
+    border-radius: var(--wui-radius-lg);
+    box-shadow: var(--wui-shadow-overlay);
+    z-index: var(--wui-z-popover);
+}
+
+.wui-filter-popover-panel[hidden] {
+    display: none;
+}
+
+.wui-filter-popover-grid {
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: 0.75rem 1rem;
+    align-items: start;
+}
+
+@media (max-width: 575.98px) {
+    .wui-filter-popover-grid {
+        grid-template-columns: minmax(0, 1fr);
+    }
+}
+
+.wui-filter-popover-foot {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: space-between;
+    gap: 0.5rem 1rem;
+    margin-top: 1rem;
+    padding-top: 0.75rem;
+    border-top: 1px solid var(--color-border);
+}
+
+.wui-filter-popover-count {
+    font-weight: 600;
+}
+
+.wui-filter-popover-more {
+    white-space: nowrap;
+    cursor: default;
+}

package/scss/wui/_kanban.scss

@@ -145,6 +145,14 @@
     display: none;
 }
 
+// head-layout="stacked": the stage name takes a line of its own and the tone dot goes.
+.wui-kanban[data-head-layout="stacked"] .wui-kanban-dot {
+    display: none;
+}
+.wui-kanban[data-head-layout="stacked"] .wui-kanban-title {
+    flex: 1 0 100%;
+}
+
 // The page's own controls at the right of the column head (a "+" that adds a card, say). They sit
 // before the collapse button, which then gives up its auto margin.
 .wui-kanban-actions {
@@ -256,6 +264,11 @@
 .wui-kanban-card:hover {
     border-color: var(--color-border-strong);
 }
+// The card just added (active-card-key), tinted as the active row of a table is.
+.wui-kanban-card[aria-current="true"] {
+    background: var(--color-primary-soft);
+    border-color: var(--color-primary);
+}
 .wui-kanban-card:focus-visible {
     outline: var(--wui-focus-ring-width) solid var(--color-focus-ring);
     outline-offset: var(--wui-focus-ring-offset);
@@ -499,6 +512,11 @@
         overscroll-behavior-y: contain;
         padding-top: 4px;
     }
+    // The body is a flex column with a fixed height here, so a card would squash to fit; it keeps its
+    // own height and the column scrolls instead.
+    .wui-kanban[fill] .wui-kanban-card {
+        flex-shrink: 0;
+    }
 }
 
 // ── Phone column switcher and swipe hint (hidden from md up) ──

package/scss/wui/_metric-strip.scss

@@ -0,0 +1,85 @@
+// ============================================================================
+// Metric strip: a row of linked values, each a label over a value over a note.
+// No card chrome. Markup and classes are the same for <app-metric-strip> and
+// React AppMetricStrip.
+// ============================================================================
+
+.wui-metric-strip {
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: 16px;
+    align-items: end;
+}
+// Two columns below 768px, the column count from the attribute above it.
+@media (min-width: 768px) {
+    .wui-metric-strip.wui-metric-strip-cols-3 {
+        grid-template-columns: repeat(3, minmax(0, 1fr));
+    }
+    .wui-metric-strip.wui-metric-strip-cols-4 {
+        grid-template-columns: repeat(4, minmax(0, 1fr));
+    }
+    .wui-metric-strip.wui-metric-strip-cols-5 {
+        grid-template-columns: repeat(5, minmax(0, 1fr));
+    }
+}
+
+.wui-metric {
+    display: flex;
+    flex-direction: column;
+    min-width: 0;
+    color: inherit;
+    text-decoration: none;
+}
+a.wui-metric:focus-visible {
+    outline: var(--wui-focus-ring-width) solid var(--color-focus-ring);
+    outline-offset: var(--wui-focus-ring-offset);
+}
+
+.wui-metric-label {
+    font-size: 13px;
+    font-weight: 500;
+    color: var(--color-text-muted);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+.wui-metric-value {
+    margin-top: 2px;
+    font-size: 20px;
+    font-weight: 600;
+    line-height: 1.2;
+    font-variant-numeric: tabular-nums;
+    color: var(--color-text);
+    white-space: nowrap;
+}
+a.wui-metric:hover .wui-metric-value {
+    text-decoration: underline;
+    text-underline-offset: 3px;
+}
+.wui-metric-note {
+    margin-top: 2px;
+    font-size: 12px;
+    color: var(--color-text-muted);
+}
+
+.wui-metric-strip-sm .wui-metric-label,
+.wui-metric-strip-sm .wui-metric-note {
+    font-size: 12px;
+}
+.wui-metric-strip-sm .wui-metric-value {
+    font-size: 18px;
+}
+
+// The tone tints the value only; the label and note stay muted.
+.wui-metric-tone-success .wui-metric-value {
+    color: var(--color-success-text);
+}
+.wui-metric-tone-warning .wui-metric-value {
+    color: var(--color-warning-text);
+}
+.wui-metric-tone-danger .wui-metric-value {
+    color: var(--color-danger-text);
+}
+.wui-metric-tone-info .wui-metric-value {
+    color: var(--color-info-text);
+}

package/scss/wui/_modal-remote.scss

@@ -53,3 +53,37 @@
 .wui-modal-submit-error {
     margin-bottom: 16px;
 }
+
+// The remote drawer: the same shell and card, docked to the end edge at full height. Width
+// comes from `--wui-modal-max-width` (sm 360, md 480, lg 640), set on the shell by the script.
+.modal.wui-modal-shell.wui-remote-drawer {
+    justify-content: flex-end;
+    align-items: stretch;
+    padding: 0;
+}
+.modal.wui-remote-drawer .modal-dialog.wui-remote-drawer-dialog {
+    margin: 0;
+    max-width: none;
+    width: min(var(--wui-modal-max-width, 480px), 100%);
+    height: 100%;
+    display: flex;
+    pointer-events: none;
+    transform: translateX(100%);
+    transition: transform 0.25s var(--wui-ease-ui);
+}
+.modal.wui-remote-drawer.show .modal-dialog.wui-remote-drawer-dialog {
+    transform: none;
+}
+.modal.wui-remote-drawer .wui-remote-drawer-dialog .wui-modal {
+    pointer-events: auto;
+    max-width: none;
+    max-height: none;
+    height: 100%;
+    border-radius: 0;
+    box-shadow: var(--shadow-overlay-lg);
+}
+@media (prefers-reduced-motion: reduce) {
+    .modal.wui-remote-drawer .modal-dialog.wui-remote-drawer-dialog {
+        transition: none;
+    }
+}

package/scss/wui/_page-header-bar.scss

@@ -0,0 +1,68 @@
+// ── Bar ── (`size="bar"`): one 40px header row. The breadcrumbs lead as an inline prefix, the
+// title takes the spare width and ends in an ellipsis, and the row never wraps from md up.
+// Below md the row wraps, so the actions drop under the title instead of overlapping it.
+// Selectors name `.page-header.page-header-bar` because `.page-header-bar` alone is also the
+// inner row of every other size.
+.page-header.page-header-bar {
+    flex-wrap: nowrap;
+    gap: 8px;
+    min-height: 40px;
+    // The bar sits 4px above the first content block.
+    margin-bottom: 4px;
+}
+.page-header.page-header-bar .page-title {
+    flex: 1 1 0;
+    min-width: 0;
+    font-size: 20px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+.page-header.page-header-bar .page-status,
+.page-header-bar-views,
+.page-header-bar-meta,
+.page-header-bar-tools,
+.page-header.page-header-bar .page-actions {
+    flex: none;
+}
+.page-header-bar-crumbs {
+    flex: none;
+    font-size: 13px;
+    color: var(--color-text-muted);
+    white-space: nowrap;
+}
+.page-header-bar-views,
+.page-header-bar-tools,
+.page-header-bar-bulk {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+}
+.page-header-bar-bulk[hidden] {
+    display: none;
+}
+.page-header-bar-meta {
+    font-size: 13px;
+    color: var(--color-text-muted);
+    white-space: nowrap;
+}
+// A meta line set below the bar takes a row of its own under the bar, with no row gap, so the
+// detail budget (72px to the first section) holds: 12 + 40 + 16 + 4.
+.page-header.wui-page-header-meta-below {
+    flex-wrap: wrap;
+    row-gap: 0;
+}
+.page-header.wui-page-header-meta-below > .page-header-bar-meta {
+    flex: 0 0 100%;
+    line-height: 16px;
+}
+
+@media (max-width: 767.98px) {
+    .page-header.page-header-bar {
+        flex-wrap: wrap;
+    }
+    // The title keeps its content width here, so a long row wraps the actions under it.
+    .page-header.page-header-bar .page-title {
+        flex: 0 1 auto;
+    }
+}

package/scss/wui/_score-scale.scss

@@ -0,0 +1,61 @@
+// ── Score scale ──
+// AppScoreScale / <app-score-scale>: one value per radio on a row of equal-width items that wraps on narrow screens.
+// Each value is a label around a visually hidden native radio, so the arrow keys and the checked state come from the browser.
+//
+// Part of the wui-components layer, see _wui-components.scss for load order.
+
+.wui-score-scale {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 6px;
+}
+.wui-score-scale__item {
+    position: relative;
+    display: inline-flex;
+    flex: 1 1 2.75rem;
+    align-items: center;
+    justify-content: center;
+    min-height: 44px;
+    margin: 0;
+    padding: 0 6px;
+    border: 1px solid var(--color-border);
+    border-radius: var(--wui-radius-sm);
+    background: var(--color-surface);
+    color: var(--color-text);
+    font-variant-numeric: tabular-nums;
+    cursor: pointer;
+    transition:
+        border-color 0.12s ease,
+        background 0.12s ease,
+        color 0.12s ease;
+}
+.wui-score-scale__item:not(.wui-score-scale__item--selected):hover {
+    border-color: color-mix(in srgb, var(--color-primary) 30%, transparent);
+}
+.wui-score-scale__item--selected {
+    border-color: var(--color-primary);
+    background: var(--color-primary);
+    color: var(--color-on-primary-ink);
+}
+.wui-score-scale__item:has(input:focus-visible) {
+    outline: var(--wui-focus-ring-width) solid var(--color-focus-ring);
+    outline-offset: var(--wui-focus-ring-offset);
+}
+.wui-score-scale__item:has(input:disabled) {
+    opacity: 0.55;
+    cursor: not-allowed;
+}
+.wui-score-scale__ends {
+    display: flex;
+    flex-basis: 100%;
+    justify-content: space-between;
+    gap: 12px;
+    color: var(--color-text-muted);
+    font-size: 13px;
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .wui-score-scale__item {
+        transition: none;
+    }
+}

package/scss/wui/_shell.scss

@@ -734,9 +734,31 @@
 }
 
 .app-content {
+    --app-content-padding-top: 24px;
     flex: 1 1 auto;
     min-width: 0;
-    padding: 24px 28px;
+    padding: var(--app-content-padding-top) 28px 24px;
+}
+[data-density="compact"] .app-content {
+    --app-content-padding-top: 12px;
+}
+// The skip link is the shell's first stop. It stays off screen until it takes focus, and being
+// absolutely placed it takes no cell of the shell's grid.
+.wui-skip-link {
+    position: absolute;
+    top: 8px;
+    left: 8px;
+    z-index: var(--wui-z-fixed);
+    padding: 8px 12px;
+    border-radius: var(--wui-radius);
+    background: var(--color-surface);
+    color: var(--color-text);
+    transform: translateY(-200%);
+}
+.wui-skip-link:focus-visible {
+    transform: none;
+    outline: var(--wui-focus-ring-width) solid var(--color-focus-ring);
+    outline-offset: var(--wui-focus-ring-offset);
 }
 .app-footer {
     position: fixed;
@@ -816,7 +838,11 @@
         padding-inline: 16px;
     }
     .app-shell.app-shell .app-content {
-        padding-block: 16px 32px;
+        --app-content-padding-top: 16px;
+        padding-block: var(--app-content-padding-top) 32px;
+    }
+    .app-shell.app-shell[data-density="compact"] .app-content {
+        --app-content-padding-top: 12px;
     }
 }
 // Phones: the topbar's icon controls meet the 44px touch floor (36px is a pointer size).

package/scss/wui/_split-view.scss

@@ -125,6 +125,10 @@
     overflow-y: auto;
     overscroll-behavior: contain;
 }
+.wui-split-items:focus-visible {
+    outline: var(--wui-focus-ring-width) solid var(--color-focus-ring);
+    outline-offset: var(--wui-focus-ring-inset);
+}
 
 .wui-split-item {
     display: flex;

package/scss/wui/_toolbar.scss

@@ -136,3 +136,11 @@
         transition: none;
     }
 }
+
+// The filters slot of <app-table-toolbar> takes the spare width of its row from md up, so the filter
+// bar and its floating panel sit beside the search and the actions rather than wrapping under them.
+@media (min-width: 768px) {
+    .wui-table-toolbar-filters {
+        flex: 1 1 auto;
+    }
+}