@webority/theme 0.9.6 → 0.9.7

package/package.json

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