@webority/theme 0.9.7 → 0.9.8

package/package.json

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

@@ -112,6 +112,40 @@
 .table-ledger tbody tr:hover td.wui-table-empty:has(> .tbl-empty) {
     background: transparent;
 }
+// Keep the empty state on screen. An empty table has no data to scroll to, yet its
+// header row can still be wider than the viewport (many columns, or wide header
+// labels), so `.table-wrap` would scroll horizontally and the centred empty message —
+// spanning that full width in a colSpan cell — would slide off screen on a narrow
+// screen. Keyed off the empty body itself (`.tbl-empty` for a rich AppTableEmptyState,
+// `.tbl-empty-plain` for a plain string — both surfaces render one), lay the empty
+// table out at the visible wrap width and drop the scroll, so the message stays centred
+// and fully in view. This is the "do it without turning the scroll container into a
+// query container" path the pin note on `.table-wrap:has(> .table-ledger)` calls for —
+// it replaces the earlier `container-type` + `100cqw` pin, which collapsed the wrap as a
+// flex/grid item. Scoped to the empty body, so a table WITH rows is untouched and still
+// scrolls its columns.
+// Keyed on the empty CELL (`td.wui-table-empty`, the one element unique to the empty
+// state on both surfaces) with CHILD combinators, NOT a loose descendant `:has(.tbl-empty)`.
+// The child chain matches only a table's OWN empty body — so an expandable row whose
+// nested table happens to be empty can never force the outer, data-bearing table into
+// this layout. A data table (no empty cell of its own) is untouched and still scrolls.
+.table-wrap:has(> table > tbody > tr > td.wui-table-empty) {
+    overflow-x: hidden;
+}
+.table:has(> tbody > tr > td.wui-table-empty) {
+    width: 100%;
+    min-width: 0;
+    table-layout: fixed;
+}
+// Under the fixed layout above the columns are narrow, so a long header label would
+// spill out of its cell and back into horizontal overflow — the very thing we just
+// removed. Clip each header to its column (ellipsis) in the empty state; short labels
+// are unaffected, and the data table keeps its natural header sizing.
+.table:has(> tbody > tr > td.wui-table-empty) > thead th {
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+}
 
 // ── Table (base) ──
 // The shared data-table look, on the plain `.table` class Bootstrap already

package/scss/wui/_overlays.scss

@@ -547,6 +547,19 @@
     animation: wui-toast-in 0.24s ease;
 }
 
+// A single-line toast — bare message, no title / action / progress stack — centers its icon,
+// text and close as one row. The flex-start default above exists for the multi-line variants
+// (title+message, an action button, a progress track), where the icon must sit on the first
+// line rather than float to the middle of a tall card.
+.wui-toast:not(:has(.wui-toast-title)):not(:has(.wui-toast-action)):not(:has(.wui-toast-task)) {
+    align-items: center;
+}
+// The 1px top nudges align the icon/close with the first text line under flex-start; once the
+// row is centered they would push those items a touch low, so zero them here.
+.wui-toast:not(:has(.wui-toast-title)):not(:has(.wui-toast-action)):not(:has(.wui-toast-task)) :is(.wui-toast-icon, .wui-toast-close) {
+    margin-top: 0;
+}
+
 // While a swipe is in progress the toast follows the pointer with no transition.
 .wui-toast--dragging {
     transition: none;

package/scss/wui/_utilities.scss

@@ -164,6 +164,13 @@
     align-items: center;
     justify-content: space-between;
     gap: 16px;
+    // Content-driven wrap: while the title block and actions both fit, space-between keeps the
+    // actions pinned right; once a long title needs the full width they can no longer share the
+    // row, so the actions drop onto their own line — left-aligned, since space-between places a
+    // lone wrapped item at flex-start — instead of being crushed against the title. The gap above
+    // doubles as the row-gap to that dropped line. (Below lg they stack unconditionally, further
+    // down; this is the any-width, content-driven case.)
+    flex-wrap: wrap;
 }
 // Left block: an optional leading icon tile + the title stack, kept together.
 .page-header-lead {