@webority/theme 0.9.4 → 0.9.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webority/theme",
-  "version": "0.9.4",
+  "version": "0.9.6",
   "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/_controls.scss

@@ -865,7 +865,11 @@ textarea.form-control.autosize {
 }
 // Character counter — a right-aligned count under the field; turns danger at the limit.
 .field-count {
-    margin-top: 2px;
+    // `.field` is align-items:flex-start, so a shrink-wrapped count would sit on the LEFT —
+    // text-align alone can't move it. align-self pushes it to the control's right edge.
+    align-self: flex-end;
+    // Tighten the space above the count: .field's 4px gap → effective 2px, matching .field-error.
+    margin-top: -2px;
     font-size: 12px;
     line-height: normal;
     text-align: right;
@@ -911,7 +915,6 @@ textarea.form-control.autosize {
     flex-direction: column;
     align-items: flex-start;
     gap: 4px;
-    margin-bottom: 16px;
 }
 .field > .label,
 .field label {

package/scss/wui/_data.scss

@@ -58,19 +58,6 @@
     align-items: center;
     text-align: center;
     padding: 40px 24px;
-    // An empty ledger still renders its header row, whose nowrap cells can push the
-    // table wider than the viewport, so `.table-wrap` scrolls horizontally with no
-    // data to justify it. This state row spans the full scroll width, so without a
-    // pin the message centres over that width and slides off screen on mobile.
-    // Stick it to the scrollport's left edge and size it to the visible wrap width
-    // (`100cqw`, from the container on `.table-wrap`), so the message stays centred
-    // and fully in view no matter how far the header scrolls. `left: 0` is relative
-    // to the scroll container; on a wide screen `100cqw` equals the content width, so
-    // this is a no-op there.
-    position: sticky;
-    left: 0;
-    width: 100cqw;
-    box-sizing: border-box;
 }
 .tbl-empty-icon {
     display: inline-grid;
@@ -115,16 +102,11 @@
     border-bottom: 0;
 }
 // A plain-string empty (no `.tbl-empty` wrapper) — carries the padding the cell
-// used to own, plus the same viewport pin as `.tbl-empty` so it stays on screen
-// when a narrow ledger scrolls horizontally (see the pin note on `.tbl-empty`).
+// used to own.
 .tbl-empty-plain {
     padding: 36px 24px;
     text-align: center;
     color: var(--color-text-muted);
-    position: sticky;
-    left: 0;
-    width: 100cqw;
-    box-sizing: border-box;
 }
 .table tbody tr:hover td.wui-table-empty:has(> .tbl-empty),
 .table-ledger tbody tr:hover td.wui-table-empty:has(> .tbl-empty) {
@@ -279,11 +261,13 @@
     // class (set --wui-table-pad) without overriding this selector. Bottom padding is now
     // included (was 0) so the last row isn't flush against the card edge.
     padding: var(--wui-table-pad, 20px);
-    // Query container for the empty-state pin below. The header row can force the
-    // ledger wider than the viewport, so on a narrow screen `.table-wrap` scrolls
-    // horizontally; `100cqw` here is the *visible* wrap width regardless of that
-    // scroll, which is what keeps the empty message on screen (see `.tbl-empty`).
-    container-type: inline-size;
+    // NOTE: do NOT set `container-type` here. Size containment (from `container-type:
+    // inline-size`) collapses `.table-wrap` to a ~40px sliver whenever it is a flex/grid
+    // ITEM (a very common product layout), forcing the whole table into a tiny horizontal
+    // scroll. It was briefly added for a `100cqw` empty-state pin; the collapse is far worse
+    // than the empty message not being perfectly centred on a narrow scrolling table, so the
+    // pin was removed. If the empty state ever needs viewport-relative sizing again, do it
+    // without turning the scroll container into a query container.
 }
 .table-ledger {
     border-spacing: 0;

package/scss/wui/_overlays.scss

@@ -681,6 +681,15 @@
     margin-top: 1px;
     font-size: 0.65rem;
 }
+// Bootstrap's .btn-close paints a box-shadow ring on :focus (fires on mouse click too).
+// Drop it; keep a keyboard-only outline so dismissal stays reachable without a mouse.
+.wui-toast-close:focus {
+    box-shadow: none;
+}
+.wui-toast-close:focus-visible {
+    outline: 2px solid var(--wui-toast-accent);
+    outline-offset: 2px;
+}
 
 // The auto-dismiss TIMER, deliberately invisible (height 0): the element still runs the
 // countdown animation because its animationend is what dismisses the toast on both surfaces,