@webority/theme 0.9.6 → 0.9.8

package/package.json

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

@@ -58,6 +58,28 @@
     --bs-btn-active-border-color: transparent;
 }
 
+// A soft-tinted affirmative — the success counterpart of .btn-secondary. Dark success text on a
+// faint success fill, so it reads as "resolved / confirmed" without the weight of a solid green.
+.btn-success {
+    --bs-btn-color: var(--color-success-text);
+    --bs-btn-bg: color-mix(in srgb, var(--color-success) 14%, transparent);
+    --bs-btn-border-color: transparent;
+    --bs-btn-hover-color: var(--color-success-text);
+    --bs-btn-hover-bg: color-mix(in srgb, var(--color-success) 20%, transparent);
+    --bs-btn-hover-border-color: transparent;
+    --bs-btn-active-color: var(--color-success-text);
+    --bs-btn-active-bg: color-mix(in srgb, var(--color-success) 28%, transparent);
+    --bs-btn-active-border-color: transparent;
+}
+
+// A button-shaped label that does nothing: keeps the .btn chrome but takes no pointer, so it
+// neither clicks nor lifts on hover. Used for a resolved confirmation (AppButton `static`) that
+// must sit exactly where its action button was.
+.btn-static {
+    cursor: default;
+    pointer-events: none;
+}
+
 .btn-danger {
     // White-on-red destructive look via the --wui-danger-strong token: white fails AA on the
     // brighter danger fills (#F8285A → 3.86:1, #E82646 → 4.38:1), so the button uses the

package/scss/wui/_choice.scss

@@ -943,6 +943,14 @@ button.datepicker-month:hover {
     // Match AppInput's soft invalid border exactly (danger at 30%, mirroring primary-30 focus).
     border-color: color-mix(in srgb, var(--color-danger) 30%, transparent);
 }
+// The live-validation error renders INSIDE <wui-phone> (after .phone-input-wrap), not as a
+// direct child of .field — so .field's 4px column gap can't separate it from the control, and
+// .field-error's -2px pull then makes it touch the input. <wui-phone> is display:block with no
+// gap of its own, so restore the same effective 2px control→error gap the plain field gives,
+// matching AppInput.
+.app-phone-number-input wui-phone > .field-error {
+    margin-top: 2px;
+}
 // Popover-field controls (date / date-range / time) carry aria-invalid on the HOST element —
 // React/Razor set it from the `error` prop — while the visible border lives on the inner trigger
 // button. Redden that trigger, and keep it red while the popover is open (mirroring AppInput,

package/scss/wui/_controls.scss

@@ -657,6 +657,26 @@ textarea.form-control.autosize {
     color: var(--color-primary);
 }
 
+// Trailing action beside the field — a control (a labelled button, or a confirmation once the
+// value resolves) that sits OUTSIDE the input border. The field flexes to fill the row; the
+// action keeps its natural width and centres against the control.
+.input-action-row {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+}
+.input-action-row > .input-wrap,
+.input-action-row > .input-icon {
+    flex: 1 1 auto;
+    min-width: 0;
+}
+.input-action {
+    flex: 0 0 auto;
+    display: flex;
+    align-items: center;
+    white-space: nowrap;
+}
+
 // Password reveal toggle (place inside .input-wrap).
 .input.pw {
     padding-right: 44px;

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 {