@webority/theme 0.17.2 → 0.17.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webority/theme",
-  "version": "0.17.2",
+  "version": "0.17.3",
   "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,111 @@
     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;
+}
+// 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 +697,94 @@
     --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)));
 }
-.table-ledger tbody tr[data-status="success"] > td:first-child {
-    box-shadow: inset 3px 0 0 0 var(--color-success);
+
+// 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 tbody tr[data-status="warning"] > td:first-child {
-    box-shadow: inset 3px 0 0 0 var(--color-warning);
+.table-ledger tfoot td:first-child {
+    padding-left: 20px;
 }
-.table-ledger tbody tr[data-status="danger"] > td:first-child {
-    box-shadow: inset 3px 0 0 0 var(--color-danger);
+.table-ledger tfoot td:last-child {
+    padding-right: 20px;
 }
-.table-ledger tbody tr[data-status="info"] > td:first-child {
-    box-shadow: inset 3px 0 0 0 var(--color-info);
+
+// 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-wrap.wui-table-scroll .table-ledger thead th {
+    position: sticky;
+    top: 0;
+    z-index: 2;
+}
+// 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 +808,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 +961,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;
 }