@webority/theme 0.17.2 → 0.17.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webority/theme",
-  "version": "0.17.2",
+  "version": "0.17.4",
   "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/wui/_data.scss

@@ -407,31 +407,119 @@
     gap: 6px;
 }
 
-// Pagination footer — rows-per-page + range + prev/next, sits flush under a
-// table.
+// Density (AppDataTable / <app-data-table> `density`). Comfortable is the rules above. An avatar
+// with no size of its own follows the density through --avatar-size; one given a size keeps it.
+.table-ledger {
+    --avatar-size: 32px;
+}
+.table-ledger.wui-table-cozy {
+    --avatar-size: 28px;
+}
+.table-ledger.wui-table-cozy tbody td {
+    height: 48px;
+    padding-top: 8px;
+    padding-bottom: 8px;
+}
+// Compact is one line per row: the identity subline is hidden and text steps down to 13px.
+.table-ledger.wui-table-compact {
+    --avatar-size: 24px;
+}
+.table-ledger.wui-table-compact thead th {
+    height: 36px;
+}
+.table-ledger.wui-table-compact tbody td {
+    height: 40px;
+    padding-top: 6px;
+    padding-bottom: 6px;
+    font-size: 13px;
+}
+.table-ledger.wui-table-compact .u-meta > .u-email,
+.table-ledger.wui-table-compact .u-meta > .wui-text-xs {
+    display: none;
+}
+.table-ledger.wui-table-compact .u-cell {
+    gap: 10px;
+}
+// Striped (`striped`): alternate-row shading in place of divider lines, on any density.
+.table-ledger.wui-table-striped tbody td {
+    border-bottom: 0;
+}
+.table-ledger.wui-table-striped tbody tr:nth-child(even) {
+    --bs-table-bg-state: var(--color-bg-subtle);
+}
+.table-ledger.wui-table-striped tbody tr:hover {
+    --bs-table-bg-state: var(--color-bg-muted);
+}
+
+// Table toolbar (AppTableToolbar / <app-table-toolbar>): filters left, search and actions right;
+// while rows are selected the bulk bar takes the same strip. Both rows are always in the markup,
+// one `hidden`, so the swap never moves the table.
+.wui-table-toolbar {
+    padding: 12px var(--wui-table-pad, 20px) 0;
+}
+.wui-table-toolbar-main,
+.wui-table-toolbar-filters,
+.wui-table-toolbar-actions,
+.wui-table-toolbar-bulk {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 12px;
+}
+.wui-table-toolbar-actions {
+    margin-left: auto;
+    gap: 8px;
+}
+// A filter control wider than a phone (a four-option segmented strip) scrolls inside the toolbar
+// instead of widening the page.
+.wui-table-toolbar-filters {
+    min-width: 0;
+    max-width: 100%;
+    overflow-x: auto;
+    scrollbar-width: none;
+}
+// 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%);
+}
+.wui-table-toolbar-bulk {
+    gap: 8px;
+    min-height: 40px;
+    padding: 4px 8px 4px 16px;
+    border-radius: var(--radius);
+    background: var(--color-primary-soft);
+}
+.wui-table-toolbar-count {
+    margin-right: 8px;
+    font-size: 13px;
+    font-weight: 600;
+    color: var(--color-text);
+}
+.wui-table-toolbar-clear {
+    margin-left: auto;
+}
+.wui-table-toolbar-main[hidden],
+.wui-table-toolbar-bulk[hidden] {
+    display: none;
+}
+
+// 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.
 .table-pagination {
     display: flex;
     align-items: center;
     justify-content: flex-end;
-    gap: 22px;
+    gap: 16px;
     padding: 12px 16px;
     border-top: 1px solid var(--color-border);
     font-size: 13px;
     color: var(--color-text-muted);
     flex-wrap: wrap;
 }
-// Rows-per-page sits at the leading edge; range + nav stay grouped on the
-// right.
 .tpg-rows {
     display: inline-flex;
     align-items: center;
-    gap: 8px;
     white-space: nowrap;
-    margin-right: auto;
-    font-size: 12px;
-    font-weight: 500;
-    text-transform: uppercase;
-    color: var(--color-text-subtle);
 }
 .select.tpg-select {
     width: auto;
@@ -617,22 +705,254 @@
     --bs-table-bg-state: color-mix(in srgb, var(--color-primary) 14%, transparent);
 }
 
-// Row status affordance — a colour bar on the leading edge, so a row's state is
-// legible without relying on a tint alone.
+// 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
+// rather than replacing it; replacing it dropped the tint from the first cell of a status row.
+.table-ledger tbody tr[data-status] {
+    --wui-row-status: var(--color-border-strong);
+}
+.table-ledger tbody tr[data-status="success"] {
+    --wui-row-status: var(--color-success);
+}
+.table-ledger tbody tr[data-status="warning"] {
+    --wui-row-status: var(--color-warning);
+}
+.table-ledger tbody tr[data-status="danger"] {
+    --wui-row-status: var(--color-danger);
+}
+.table-ledger tbody tr[data-status="info"] {
+    --wui-row-status: var(--color-info);
+}
 .table-ledger tbody tr[data-status] > td:first-child {
-    box-shadow: inset 3px 0 0 0 var(--color-border-strong);
+    box-shadow:
+        inset 3px 0 0 0 var(--wui-row-status),
+        inset 0 0 0 9999px var(--bs-table-bg-state, var(--bs-table-bg-type, var(--bs-table-accent-bg)));
+}
+
+// Columns menu (AppColumnMenu / <app-column-menu>) and the column it hides on Razor.
+.table-ledger .wui-col-hidden {
+    display: none;
+}
+.wui-column-menu {
+    min-width: 200px;
+    padding: 8px 0;
+}
+.wui-column-menu-title {
+    padding: 4px 14px 8px;
+    font-size: 12px;
+    font-weight: 600;
+    letter-spacing: 0.04em;
+    text-transform: uppercase;
+    color: var(--color-text-subtle);
+}
+.wui-column-menu-item {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    padding: 6px 14px;
+    font-size: 14px;
+    color: var(--color-text);
+    cursor: pointer;
+}
+.wui-column-menu-item:hover {
+    background: var(--color-bg-subtle);
+}
+
+// A row that opens its record (AppDataTable rowHref / onRowClick, Razor data-href).
+.table-ledger tbody tr.wui-row-link {
+    cursor: pointer;
+}
+.table-ledger tbody tr.wui-row-link:focus-visible {
+    outline: 2px solid var(--color-primary);
+    outline-offset: -2px;
+}
+
+// Stacked on phones (AppDataTable `stackOnMobile`, Razor `stack-on-mobile`): below sm each row is a
+// card. The first column (after the library's select/expand cells) leads the card at full width,
+// every other cell is a "label: value" line from its data-label, the select checkbox sits in the
+// card's top corner and the row actions close the card. The header row is visually hidden, not
+// removed, so the column names stay available to assistive technology.
+@include media-breakpoint-down(sm) {
+    // Cards flow with the page: no sideways scroll, and no maxHeight scroll box (an inline
+    // max-height from `maxHeight` has to be overridden, hence !important).
+    .table-wrap:has(> .table-ledger.wui-table-stack) {
+        overflow: visible;
+        max-height: none !important;
+    }
+    .table-wrap:has(> .table-ledger.wui-table-stack) .table-ledger thead th {
+        position: static;
+    }
+    .table-ledger.wui-table-stack,
+    .table-ledger.wui-table-stack > tbody,
+    .table-ledger.wui-table-stack > tfoot,
+    .table-ledger.wui-table-stack > tbody > tr,
+    .table-ledger.wui-table-stack > tfoot > tr {
+        display: block;
+        width: 100%;
+    }
+    .table-ledger.wui-table-stack > thead {
+        // Block, so overflow:hidden applies; a table-header-group ignores it and its row still
+        // widened the page.
+        display: block;
+        position: absolute;
+        width: 1px;
+        height: 1px;
+        overflow: hidden;
+        clip-path: inset(50%);
+        white-space: nowrap;
+    }
+    .table-ledger.wui-table-stack > tbody > tr,
+    .table-ledger.wui-table-stack > tfoot > tr {
+        position: relative;
+        margin-bottom: 12px;
+        padding: 12px 16px;
+        border: 1px solid var(--color-border);
+        border-radius: var(--radius-lg, 12px);
+    }
+    .table-ledger.wui-table-stack > tbody > tr > td,
+    .table-ledger.wui-table-stack > tfoot > tr > td {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        gap: 12px;
+        height: auto;
+        min-height: 0;
+        padding: 6px 0;
+        border: 0;
+        text-align: right;
+        // A pinned column has nothing to pin to in a card. The pinned-column selectors outrank this
+        // one by design (they must beat every table rule), so the card layout overrides them here.
+        position: static !important;
+    }
+    .table-ledger.wui-table-stack > tbody > tr > td::before,
+    .table-ledger.wui-table-stack > tfoot > tr > td::before {
+        content: attr(data-label);
+        flex: none;
+        font-size: 12px;
+        font-weight: 500;
+        color: var(--color-text-subtle);
+        text-align: left;
+    }
+    // A value takes the space beside its label and wraps inside the card rather than running past
+    // its edge (a long email under an avatar did).
+    .table-ledger.wui-table-stack > * > tr > td > * {
+        min-width: 0;
+        overflow-wrap: anywhere;
+    }
+    .table-ledger.wui-table-stack > tbody > tr > td .u-meta {
+        align-items: flex-end;
+    }
+    // The leading cell is the card's title line: full width, no label.
+    .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) {
+        justify-content: flex-start;
+        padding: 0 32px 6px 0;
+        text-align: left;
+    }
+    .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) .u-meta {
+        align-items: flex-start;
+    }
+    .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;
+    }
+    // Empty cells (a footer's blank columns) take no line.
+    .table-ledger.wui-table-stack > * > tr > td:empty {
+        display: none;
+    }
+    .table-ledger.wui-table-stack > tbody > tr > td.wui-select-cell,
+    .table-ledger.wui-table-stack > tbody > tr > td.wui-expand-cell {
+        // !important for the same reason as the static rule above: a pinned-column `left` with this
+        // `right` would stretch the cell across the card.
+        position: absolute !important;
+        top: 12px;
+        left: auto !important;
+        right: 12px;
+        width: auto;
+        min-width: 0;
+        max-width: none;
+        padding: 0;
+    }
+    .table-ledger.wui-table-stack > tbody > tr > td:has(> .u-row-actions) {
+        justify-content: flex-end;
+        margin-top: 6px;
+        padding-top: 10px;
+        border-top: 1px solid var(--color-border);
+    }
+    .table-ledger.wui-table-stack > tbody > tr > td:has(> .u-row-actions)::before {
+        content: none;
+    }
+    // The status bar becomes the card's left edge.
+    .table-ledger.wui-table-stack > tbody > tr[data-status] {
+        border-left: 3px solid var(--wui-row-status);
+    }
+    .table-ledger.wui-table-stack > tbody > tr[data-status] > td:first-child {
+        box-shadow: none;
+    }
+}
+
+// Totals row (AppDataTable column `footer`, or an author <tfoot> on Razor).
+.table-ledger tfoot td {
+    height: 48px;
+    padding: 12px;
+    border-top: 1px solid var(--color-border);
+    font-size: 13px;
+    font-weight: 600;
+    color: var(--color-text);
+    font-variant-numeric: tabular-nums;
+}
+.table-ledger tfoot td:first-child {
+    padding-left: 20px;
 }
-.table-ledger tbody tr[data-status="success"] > td:first-child {
-    box-shadow: inset 3px 0 0 0 var(--color-success);
+.table-ledger tfoot td:last-child {
+    padding-right: 20px;
 }
-.table-ledger tbody tr[data-status="warning"] > td:first-child {
-    box-shadow: inset 3px 0 0 0 var(--color-warning);
+
+// Pinned header (`maxHeight`): the wrap becomes the scroll box and the header sticks to its top.
+.table-wrap.wui-table-scroll {
+    overflow-y: auto;
+    overscroll-behavior-y: contain;
 }
-.table-ledger tbody tr[data-status="danger"] > td:first-child {
-    box-shadow: inset 3px 0 0 0 var(--color-danger);
+.table-wrap.wui-table-scroll .table-ledger thead th {
+    position: sticky;
+    top: 0;
+    z-index: 2;
 }
-.table-ledger tbody tr[data-status="info"] > td:first-child {
-    box-shadow: inset 3px 0 0 0 var(--color-info);
+// The wrap's own top padding would otherwise show rows scrolling behind it, above the header.
+.table-wrap.wui-table-scroll:has(> .table-ledger) {
+    padding-top: 0;
+}
+
+// Pinned first column (`stickyFirstColumn`): the identity column, and the select/expand columns the
+// library puts before it, hold their place while a wide table scrolls sideways. The identity column
+// is found by position, because Razor authors write plain cells: it is the first cell after the
+// library-owned select (44px) and expand (40px) cells. Pinned cells take the surface colour so
+// scrolled cells do not show through; hover and selection still tint them through the inset shadow.
+.table-ledger.wui-table-sticky-first > * > tr:not(.wui-row-expanded) > .wui-expand-cell,
+.table-ledger.wui-table-sticky-first > * > tr:not(.wui-row-expanded) > .wui-select-cell,
+.table-ledger.wui-table-sticky-first > * > tr:not(.wui-row-expanded) > :not(.wui-expand-cell, .wui-select-cell):is(:first-child, .wui-expand-cell + *, .wui-select-cell + *) {
+    position: sticky;
+    // The offset is a custom property so the per-layout rules below can set it without having to
+    // out-rank this selector's specificity.
+    left: var(--wui-sticky-left, 0);
+    z-index: 1;
+}
+.table-ledger.wui-table-sticky-first > :is(tbody, tfoot) > tr:not(.wui-row-expanded) > :is(.wui-expand-cell, .wui-select-cell),
+.table-ledger.wui-table-sticky-first > :is(tbody, tfoot) > tr:not(.wui-row-expanded) > :not(.wui-expand-cell, .wui-select-cell):is(:first-child, .wui-expand-cell + *, .wui-select-cell + *) {
+    background-color: var(--color-surface);
+}
+.table-ledger.wui-table-sticky-first > * > tr > .wui-expand-cell + .wui-select-cell,
+.table-ledger.wui-table-sticky-first > * > tr > .wui-expand-cell + :not(.wui-select-cell) {
+    --wui-sticky-left: 40px;
+}
+.table-ledger.wui-table-sticky-first > * > tr > .wui-select-cell + * {
+    --wui-sticky-left: 44px;
+}
+.table-ledger.wui-table-sticky-first > * > tr > .wui-expand-cell + .wui-select-cell + * {
+    --wui-sticky-left: 84px;
+}
+// A pinned header cell over a pinned column sits above both.
+.table-wrap.wui-table-scroll .table-ledger.wui-table-sticky-first > thead > tr > :is(.wui-expand-cell, .wui-select-cell, :first-child, .wui-expand-cell + *, .wui-select-cell + *) {
+    z-index: 3;
 }
 
 // Row actions — icon-only buttons replacing a kebab dropdown.
@@ -656,7 +976,8 @@
     height: var(--wui-action-size);
     padding: 0;
     border: none;
-    background: var(--color-bg-subtle);
+    // No disc at rest: a row of actions reads as quiet icons, and the tint below appears on hover.
+    background: transparent;
     border-radius: 999px;
     color: var(--color-text-subtle);
     cursor: pointer;
@@ -808,6 +1129,12 @@
     opacity: 0;
     transition: opacity 0.12s ease;
 }
+// On a right-aligned (numeric) header the arrow leads the label, so the label ends flush with
+// the values under it.
+.table th.sortable .wui-sort-lead {
+    margin-left: 0;
+    margin-right: 6px;
+}
 .table th.sortable:hover .sort-icon {
     opacity: 0.6;
 }

package/scss/wui/_flow.scss

@@ -805,6 +805,9 @@ button.step:focus-visible .step-circle {
     grid-template-columns: repeat(var(--form-cols, 2), minmax(0, 1fr));
     gap: 16px;
     align-items: start;
+    // In a form row every field fills its column, so a date picker drops its compact standalone
+    // width here and lines up with the fields beside it. A .date-w-* class on the field still wins.
+    --wui-datepicker-width: 100%;
 }
 // Below md, collapse to 1 column.
 @include media-breakpoint-down(md) {