@webority/theme 0.53.1 → 0.55.0

package/scss/wui/_data.scss

@@ -262,8 +262,8 @@
     color: var(--color-text);
 }
 .wui-expand-toggle:focus-visible {
-    outline: 2px solid var(--color-primary);
-    outline-offset: 2px;
+    outline: var(--wui-focus-ring-width) solid var(--color-focus-ring);
+    outline-offset: var(--wui-focus-ring-offset);
 }
 .wui-expand-toggle .wui-icon {
     transition: transform 0.18s var(--wui-ease-out-quart, ease);
@@ -498,6 +498,10 @@
 .wui-table-toolbar-clear {
     margin-left: auto;
 }
+// "Select all 1,28,400 matching" stays one line when the bulk bar wraps.
+.wui-table-toolbar-all {
+    white-space: nowrap;
+}
 .wui-table-toolbar-main[hidden],
 .wui-table-toolbar-bulk[hidden] {
     display: none;
@@ -511,9 +515,11 @@
 }
 // Facets size themselves: a select, multi-select or date range takes about 180 to 240px and the
 // search box a wider 260 to 320px, so they wrap as a compact row instead of stacking at full
-// width. Segments keep their own width. A date range is the bare custom element, not a .field,
-// and on its own it fills its line.
+// width. Segments keep their own width. A date range, and a select or multi-select without a
+// label, are the bare custom element, not a .field, and on its own it fills its line.
 .wui-filter-bar > .field,
+.wui-filter-bar > wui-select,
+.wui-filter-bar > wui-multiselect,
 .wui-filter-bar > wui-date-range {
     flex: 1 1 180px;
     min-width: 0;
@@ -536,12 +542,109 @@
 // On a phone each facet takes its own line; segments and buttons keep their width.
 @media (max-width: 575.98px) {
     .wui-filter-bar > .field,
+    .wui-filter-bar > wui-select,
+    .wui-filter-bar > wui-multiselect,
     .wui-filter-bar > wui-date-range,
     .wui-filter-bar > .search-wrap {
         flex-basis: 100%;
         max-width: none;
     }
 }
+// The Filters button and Clear all keep their label on one line, however full the row is.
+.wui-filter-bar > .btn,
+.wui-filter-more > summary {
+    white-space: nowrap;
+    flex: none;
+}
+// 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 {
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+    gap: 12px;
+    min-width: 240px;
+}
+.wui-filter-more-panel > .field,
+.wui-filter-more-panel > wui-select,
+.wui-filter-more-panel > wui-multiselect,
+.wui-filter-more-panel > wui-date-range,
+.wui-filter-more-panel > .search-wrap {
+    flex: none;
+    min-width: 0;
+    max-width: none;
+}
+.wui-filter-more-panel > wui-date-range .daterange {
+    width: 100%;
+}
+.wui-filter-more-head {
+    display: none;
+}
+.wui-filter-more {
+    position: relative;
+}
+.wui-filter-more > .wui-filter-more-trigger {
+    list-style: none;
+    cursor: pointer;
+    user-select: none;
+}
+.wui-filter-more > .wui-filter-more-trigger::-webkit-details-marker {
+    display: none;
+}
+.wui-filter-more > .wui-filter-more-panel {
+    position: absolute;
+    top: calc(100% + 4px);
+    left: 0;
+    z-index: var(--wui-z-popover);
+    width: 320px;
+    max-width: calc(100vw - 16px);
+    padding: 12px;
+    background: var(--color-surface);
+    border: 1px solid var(--color-border);
+    border-radius: var(--radius-xl);
+    box-shadow: var(--shadow-overlay);
+}
+.wui-filter-more:not([open]) > .wui-filter-more-panel {
+    display: none;
+}
+.wui-filter-count-phone {
+    display: none;
+}
+// `wui-filter-bar--folded` is set on a phone (by webority-ui.js in Razor, by AppFilterBar in React) once every facet
+// is in the panel; the count then covers all of them and the panel gets its heading.
+.wui-filter-bar--folded .wui-filter-count-desktop {
+    display: none;
+}
+.wui-filter-bar--folded .wui-filter-count-phone {
+    display: inline;
+}
+.wui-filter-bar--folded .wui-filter-more-head {
+    display: block;
+    font-weight: 600;
+    color: var(--color-text);
+}
+@media (max-width: 575.98px) {
+    // The panel becomes a sheet from the bottom edge; tapping the scrim (part of the summary) closes it.
+    .wui-filter-more > .wui-filter-more-panel {
+        position: fixed;
+        inset: auto 0 0 0;
+        z-index: var(--wui-z-shell-drawer);
+        width: auto;
+        max-width: none;
+        max-height: 85vh;
+        overflow-y: auto;
+        padding: 16px 20px 24px;
+        border-width: 1px 0 0;
+        border-radius: var(--radius-xl) var(--radius-xl) 0 0;
+    }
+    .wui-filter-more[open] > summary::before {
+        content: "";
+        position: fixed;
+        inset: 0;
+        z-index: var(--wui-z-shell-scrim);
+        background: var(--color-scrim);
+    }
+}
 
 // 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.
@@ -606,8 +709,8 @@
     color: var(--color-primary-ink);
 }
 .tpg-arrow:focus-visible {
-    outline: 2px solid var(--color-primary);
-    outline-offset: 2px;
+    outline: var(--wui-focus-ring-width) solid var(--color-focus-ring);
+    outline-offset: var(--wui-focus-ring-offset);
 }
 // Text-5 already reads as "unavailable" — no opacity dimming on top of it.
 .tpg-arrow:disabled {
@@ -641,8 +744,8 @@
     color: var(--color-primary-ink);
 }
 .tpg-page:focus-visible {
-    outline: 2px solid var(--color-primary);
-    outline-offset: 2px;
+    outline: var(--wui-focus-ring-width) solid var(--color-focus-ring);
+    outline-offset: var(--wui-focus-ring-offset);
 }
 .tpg-page.is-active {
     background: var(--color-primary);
@@ -804,6 +907,14 @@
     --bs-table-bg-state: color-mix(in srgb, var(--color-primary) 14%, transparent);
 }
 
+// The open row (AppDataTable `activeRowKey`, or a Razor <tr> marked by `active-row-key`): the subtle
+// primary background, no edge bar, so it reads apart from `data-status`'s bar and from a ticked row.
+// Declared after is-selected so a row that is both shows the open-row tint; hover keeps it steady.
+.table-ledger tbody tr.wui-row-active,
+.table-ledger tbody tr.wui-row-active:hover {
+    --bs-table-bg-state: var(--bs-primary-bg-subtle);
+}
+
 // Row status affordance (AppDataTable `rowStatus`, or `data-status` on a Razor <tr>): a colour bar
 // on the leading edge, so a row's state is legible without relying on a tint alone. Bootstrap paints
 // a cell's hover/selected tint with its own inset box-shadow, so the bar is LAYERED over that shadow
@@ -863,8 +974,8 @@
     cursor: pointer;
 }
 .table-ledger tbody tr.wui-row-link:focus-visible {
-    outline: 2px solid var(--color-primary);
-    outline-offset: -2px;
+    outline: var(--wui-focus-ring-width) solid var(--color-focus-ring);
+    outline-offset: var(--wui-focus-ring-inset);
 }
 
 // Stacked on phones (AppDataTable `stackOnMobile`, Razor `stack-on-mobile`): below md (768px) each
@@ -1127,8 +1238,8 @@
     color: var(--color-primary-ink);
 }
 .u-action:focus-visible {
-    outline: 2px solid var(--color-primary);
-    outline-offset: 2px;
+    outline: var(--wui-focus-ring-width) solid var(--color-focus-ring);
+    outline-offset: var(--wui-focus-ring-offset);
 }
 .u-action:disabled {
     opacity: 0.4;
@@ -1233,8 +1344,8 @@
     user-select: none;
 }
 .table th.sortable:focus-visible {
-    outline: 2px solid var(--color-primary);
-    outline-offset: -2px;
+    outline: var(--wui-focus-ring-width) solid var(--color-focus-ring);
+    outline-offset: var(--wui-focus-ring-inset);
 }
 .table th.sortable .sort-icon {
     // Reserved space so the header does not jump width when the arrow appears.
@@ -1277,3 +1388,285 @@
 }
 
 // ============================================================================
+
+// Resizable, pinned, grouped and virtual tables (AppDataTable `resizableColumns`, column `pin`,
+// `groupBy`, `virtual`; Razor `resizable-columns`, `th[data-pin]`, `group-by`, `virtual`).
+// <wui-data-table> is the table's scroller in place of the plain div, so it must be a block box.
+wui-data-table {
+    display: block;
+    min-width: 0;
+}
+
+// The resize handle sits on the header cell's end edge. A pinned or sticky header cell is already a
+// containing block, so the relative position has no specificity of its own and never undoes theirs.
+:where(.table-ledger thead th.wui-col-resizable) {
+    position: relative;
+}
+.wui-col-resize {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    inset-inline-end: 0;
+    z-index: 1;
+    width: 8px;
+    cursor: col-resize;
+    touch-action: none;
+    user-select: none;
+}
+.wui-col-resize::after {
+    content: "";
+    position: absolute;
+    top: 25%;
+    bottom: 25%;
+    inset-inline-end: 0;
+    width: 2px;
+    border-radius: 1px;
+    background: var(--color-border-strong);
+    opacity: 0;
+    transition: opacity 0.12s ease;
+}
+.table-ledger thead th:hover > .wui-col-resize::after,
+.wui-col-resize:focus-visible::after,
+.wui-col-resize.is-dragging::after {
+    opacity: 1;
+}
+.wui-col-resize:focus-visible::after,
+.wui-col-resize.is-dragging::after {
+    background: var(--color-primary);
+}
+.wui-col-resize:focus-visible {
+    outline: var(--wui-focus-ring-width) solid var(--color-focus-ring);
+    outline-offset: var(--wui-focus-ring-inset);
+    border-radius: 2px;
+}
+// A fixed-layout table cuts a cell's overflow at the width the person chose. Not the last column (row
+// actions, whose tooltips and touch targets reach outside), the pinned edge cells (their shadow sits
+// outside) or the select and expand cells.
+.table-ledger[data-wui-fixed] > :is(tbody, tfoot) > tr > td:not(:last-child, .wui-pin-start-edge, .wui-pin-end-edge, .wui-select-cell, .wui-expand-cell) {
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+// A menu or picker inside a cell still has to float out of it.
+.table-ledger[data-wui-fixed] > tbody > tr > td:has([aria-expanded="true"], .dropdown-menu.show) {
+    overflow: visible;
+}
+
+// Pinned columns: each pinned cell reads its offset from --wui-pin-at, which points at the offset the
+// table holds (--wui-pin-start-<n> / --wui-pin-end-<n>, measured by <wui-data-table>). Surface colour
+// so scrolled cells do not show through; hover and selection still tint through Bootstrap's inset shadow.
+.table-ledger > * > tr:not(.wui-row-expanded, .wui-group-row) > .wui-pin-start {
+    position: sticky;
+    inset-inline-start: var(--wui-pin-at, 0px);
+    z-index: 1;
+}
+.table-ledger > * > tr:not(.wui-row-expanded, .wui-group-row) > .wui-pin-end {
+    position: sticky;
+    inset-inline-end: var(--wui-pin-at, 0px);
+    z-index: 1;
+}
+.table-ledger > :is(tbody, tfoot) > tr:not(.wui-row-expanded, .wui-group-row) > :is(.wui-pin-start, .wui-pin-end) {
+    background-color: var(--color-surface);
+}
+.table-wrap.wui-table-scroll .table-ledger > thead > tr > :is(.wui-pin-start, .wui-pin-end) {
+    z-index: 3;
+}
+// The shadow that shows a pinned column has content scrolled under it: drawn beside the edge column,
+// on a pseudo-element, because the cell's own box-shadow carries the hover, selected and status paint.
+.table-ledger :is(.wui-pin-start-edge, .wui-pin-end-edge)::after {
+    content: "";
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    width: 8px;
+    pointer-events: none;
+    opacity: 0;
+    transition: opacity 0.15s ease;
+}
+.table-ledger .wui-pin-start-edge::after {
+    inset-inline-start: 100%;
+    background: linear-gradient(to right, color-mix(in srgb, var(--color-text) 10%, transparent), transparent);
+}
+.table-ledger .wui-pin-end-edge::after {
+    inset-inline-end: 100%;
+    background: linear-gradient(to left, color-mix(in srgb, var(--color-text) 10%, transparent), transparent);
+}
+.table-ledger:dir(rtl) .wui-pin-start-edge::after {
+    background: linear-gradient(to left, color-mix(in srgb, var(--color-text) 10%, transparent), transparent);
+}
+.table-ledger:dir(rtl) .wui-pin-end-edge::after {
+    background: linear-gradient(to right, color-mix(in srgb, var(--color-text) 10%, transparent), transparent);
+}
+.table-wrap[data-wui-overflow-start] > .table-ledger .wui-pin-start-edge::after,
+.table-wrap[data-wui-overflow-end] > .table-ledger .wui-pin-end-edge::after {
+    opacity: 1;
+}
+// A pinned side stays put, so it never fades.
+.table-wrap[data-wui-overflow-start]:has(> .table-ledger .wui-pin-start) {
+    --wui-overflow-fade-start: 0px;
+}
+.table-wrap[data-wui-overflow-end]:has(> .table-ledger .wui-pin-end) {
+    --wui-overflow-fade-end: 0px;
+}
+
+// Stacked cards (below md) have no columns to pin.
+@include media-breakpoint-down(md) {
+    .table-ledger.wui-table-stack > * > tr > :is(.wui-pin-start, .wui-pin-end) {
+        position: static;
+    }
+    .table-ledger.wui-table-stack :is(.wui-pin-start-edge, .wui-pin-end-edge)::after {
+        content: none;
+    }
+}
+
+// Group header rows: a full-width band with a collapse toggle, the group's value and its row count.
+.table-ledger > tbody > tr.wui-group-row > th.wui-group-cell {
+    padding: 8px 12px 8px 20px;
+    border-bottom: 1px solid var(--color-border);
+    background-color: var(--color-bg-muted);
+    --bs-table-bg: var(--color-bg-muted);
+    font-size: 13px;
+    font-weight: 600;
+    color: var(--color-text);
+    text-align: start;
+}
+.table-ledger > tbody > tr.wui-group-row:hover {
+    --bs-table-bg-state: transparent;
+}
+.wui-group-toggle {
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    max-width: 100%;
+    padding: 4px 8px 4px 4px;
+    border: none;
+    border-radius: var(--radius-sm, 6px);
+    background: transparent;
+    color: inherit;
+    font: inherit;
+    cursor: pointer;
+}
+.wui-group-toggle:hover {
+    background: color-mix(in srgb, var(--color-primary) 8%, transparent);
+}
+.wui-group-toggle:focus-visible {
+    outline: var(--wui-focus-ring-width) solid var(--color-focus-ring);
+    outline-offset: var(--wui-focus-ring-offset);
+}
+.wui-group-toggle .wui-icon {
+    flex: none;
+    color: var(--color-text-subtle);
+    transition: transform 0.15s ease;
+}
+.wui-group-toggle[aria-expanded="false"] .wui-icon {
+    transform: rotate(-90deg);
+}
+.wui-group-toggle:dir(rtl)[aria-expanded="false"] .wui-icon {
+    transform: rotate(90deg);
+}
+.wui-group-label {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+.wui-group-count {
+    flex: none;
+    min-width: 22px;
+    padding: 1px 8px;
+    border-radius: 999px;
+    background: var(--color-surface);
+    border: 1px solid var(--color-border);
+    color: var(--color-text-muted);
+    font-size: 12px;
+    font-weight: 500;
+    font-variant-numeric: tabular-nums;
+    text-align: center;
+}
+
+// Virtual rows: the spacers stand in for the rows outside the window, and on Razor those rows are
+// left out of layout.
+.table-ledger > tbody > tr.wui-virtual-spacer > td {
+    padding: 0;
+    border: 0;
+    --bs-table-bg-state: transparent;
+}
+.table-ledger > tbody > tr.wui-virtual-off {
+    display: none;
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .wui-col-resize::after,
+    .table-ledger :is(.wui-pin-start-edge, .wui-pin-end-edge)::after,
+    .wui-group-toggle .wui-icon {
+        transition: none;
+    }
+}
+
+// A pinned header (`maxHeight`) casts a shadow once rows have scrolled under it, so the cut-off row
+// reads as "more above". scrollEdges.js keeps data-wui-overflow-top on the scroller while it is
+// scrolled down, with or without <wui-data-table>. The shadow is layered over the cell's own inset
+// paint (hover, sort), like the status bar, and takes no room, so nothing shifts.
+.table-wrap.wui-table-scroll > .table-ledger > thead > tr > th {
+    transition:
+        background-color 0.12s ease,
+        color 0.12s ease,
+        box-shadow 0.15s ease;
+}
+.table-wrap.wui-table-scroll[data-wui-overflow-top] > .table-ledger > thead > tr > th {
+    box-shadow:
+        inset 0 0 0 9999px var(--bs-table-bg-state, var(--bs-table-bg-type, var(--bs-table-accent-bg))),
+        0 6px 8px -6px color-mix(in srgb, var(--color-text) 18%, transparent);
+}
+
+// Saving rows (AppDataTable `rowSaving` / `rowSaveError`, or `data-wui-save-state` on a Razor <tr>). A
+// row whose add or change is on its way shows at once with a soft tint and a pulsing primary bar on its
+// leading edge; a failed save keeps a danger bar and tint, with the reason on a line under the identity
+// cell. Both bars are layered over the cell's inset paint, like the status bar, and replace it while shown.
+.table-ledger > tbody > tr[data-wui-save-state] {
+    --bs-table-bg-state: var(--wui-row-save-tint);
+    --wui-row-save-x: 3px;
+}
+.table-ledger:dir(rtl) > tbody > tr[data-wui-save-state] {
+    --wui-row-save-x: -3px;
+}
+.table-ledger > tbody > tr[data-wui-save-state="saving"] {
+    --wui-row-save-bar: var(--color-primary);
+    --wui-row-save-tint: var(--color-bg-subtle);
+    cursor: progress;
+}
+.table-ledger > tbody > tr[data-wui-save-state="error"] {
+    --wui-row-save-bar: var(--color-danger);
+    --wui-row-save-tint: color-mix(in srgb, var(--color-danger) 6%, transparent);
+}
+.table-ledger > tbody > tr[data-wui-save-state] > td:first-child {
+    box-shadow:
+        inset var(--wui-row-save-x) 0 0 0 var(--wui-row-save-bar),
+        inset 0 0 0 9999px var(--bs-table-bg-state, var(--bs-table-bg-type, var(--bs-table-accent-bg)));
+}
+.table-ledger > tbody > tr[data-wui-save-state="saving"] > td:first-child {
+    animation: wui-row-saving 1.2s ease-in-out infinite;
+}
+@keyframes wui-row-saving {
+    50% {
+        box-shadow:
+            inset var(--wui-row-save-x) 0 0 0 color-mix(in srgb, var(--color-primary) 30%, transparent),
+            inset 0 0 0 9999px var(--bs-table-bg-state, var(--bs-table-bg-type, var(--bs-table-accent-bg)));
+    }
+}
+.wui-row-save-error {
+    display: block;
+    margin-top: 2px;
+    color: var(--color-danger-text);
+    font-size: 12px;
+    font-weight: 500;
+    line-height: 1.35;
+    white-space: normal;
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .table-wrap.wui-table-scroll > .table-ledger > thead > tr > th {
+        transition: none;
+    }
+    .table-ledger > tbody > tr[data-wui-save-state="saving"] > td:first-child {
+        animation: none;
+    }
+}

package/scss/wui/_disclosure.scss

@@ -57,8 +57,8 @@
     color: var(--color-primary-ink);
 }
 .faq-q:focus-visible {
-    outline: 2px solid var(--color-primary);
-    outline-offset: -2px;
+    outline: var(--wui-focus-ring-width) solid var(--color-focus-ring);
+    outline-offset: var(--wui-focus-ring-inset);
 }
 .faq-item.open .faq-q {
     color: var(--color-primary-ink);

package/scss/wui/_display.scss

@@ -238,8 +238,8 @@ a.kpi:hover {
     transform: translateY(-2px);
 }
 a.kpi:focus-visible {
-    outline: 2px solid var(--color-primary);
-    outline-offset: 2px;
+    outline: var(--wui-focus-ring-width) solid var(--color-focus-ring);
+    outline-offset: var(--wui-focus-ring-offset);
 }
 
 // A row of tiles. Wraps rather than scrolls — a KPI strip that scrolls hides numbers.
@@ -514,8 +514,8 @@ a.info-row:hover .info-value {
 }
 // The ring is drawn on the label because the input it belongs to has no box.
 .segmented-option:has(.segmented-input:focus-visible) {
-    outline: 2px solid var(--color-primary);
-    outline-offset: 2px;
+    outline: var(--wui-focus-ring-width) solid var(--color-focus-ring);
+    outline-offset: var(--wui-focus-ring-offset);
 }
 // Sliding thumb — one pill that glides to the selected segment. Positioned by JS (React in a
 // layout effect, Razor in webority-ui.js), which adds .is-animated once it has measured the
@@ -628,6 +628,10 @@ a.info-row:hover .info-value {
     .segmented-option:has(.segmented-input:checked) .wui-icon {
         transition: none;
     }
+    // The pressed wash (_interaction.scss) stands in for the press-in.
+    .segmented-option:active {
+        transform: none;
+    }
 }
 
 // ============================================================================
@@ -662,8 +666,8 @@ a.info-row:hover .info-value {
     border-radius: calc(var(--radius) - 3px);
 }
 .color-field-swatch:focus-visible {
-    outline: 2px solid var(--color-primary);
-    outline-offset: 2px;
+    outline: var(--wui-focus-ring-width) solid var(--color-focus-ring);
+    outline-offset: var(--wui-focus-ring-offset);
 }
 .color-field-hex {
     flex: 1;
@@ -1063,8 +1067,8 @@ a.info-row:hover .info-value {
     background: var(--color-primary-soft);
 }
 .res-card:focus-visible {
-    outline: 2px solid var(--color-primary);
-    outline-offset: 2px;
+    outline: var(--wui-focus-ring-width) solid var(--color-focus-ring);
+    outline-offset: var(--wui-focus-ring-offset);
 }
 .res-card-icon {
     flex: none;
@@ -1224,7 +1228,7 @@ a.info-row:hover .info-value {
     color: var(--color-primary-ink);
 }
 .wui-link:focus-visible {
-    outline: 2px solid var(--color-primary);
+    outline: var(--wui-focus-ring-width) solid var(--color-focus-ring);
     outline-offset: 3px;
 }
 .wui-link.is-disabled {

package/scss/wui/_dock.scss

@@ -49,8 +49,8 @@ wui-dock {
     color: var(--color-primary-ink);
 }
 .dock-item:focus-visible {
-    outline: 2px solid var(--color-primary);
-    outline-offset: 2px;
+    outline: var(--wui-focus-ring-width) solid var(--color-focus-ring);
+    outline-offset: var(--wui-focus-ring-offset);
     // Keyboard users get no pointer tracking — grow the focused item itself.
     --wui-dock-mag: 1.25;
 }