@webority/theme 0.17.3 → 0.17.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webority/theme",
-  "version": "0.17.3",
+  "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

@@ -470,6 +470,14 @@
     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%);
@@ -722,6 +730,166 @@
         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;

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) {