@webority/theme 0.9.5 → 0.9.7

package/package.json

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

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;