@webority/theme 0.12.4 → 0.13.0

package/package.json

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

@@ -353,14 +353,21 @@
     height: 40px;
     border: 1px solid var(--color-border);
     border-radius: var(--radius);
-    background: var(--color-surface);
+    // AppInput's field model: muted resting fill that lifts to a clean surface on focus.
+    background: var(--color-field-bg);
     color: var(--color-text-subtle);
 }
 .search-select-search {
     position: relative;
 }
+// Hover and focus follow AppInput, as the phone country search does: a stronger border on hover,
+// then a clean surface fill + soft primary border on focus.
+.search-select-search:hover:not(:focus-within) {
+    border-color: var(--color-border-strong);
+}
 .search-select-search:focus-within {
-    background: var(--color-field-bg);
+    background: var(--color-surface);
+    border-color: var(--wui-primary-30);
 }
 .search-select-search:focus-within svg {
     color: var(--color-primary);
@@ -395,6 +402,10 @@
     color: var(--color-text);
     background: transparent;
 }
+// AppInput's placeholder colour, not the browser default grey.
+.search-select-input::placeholder {
+    color: var(--color-text-subtle);
+}
 .search-select-options {
     max-height: 300px;
     overflow-y: auto;
@@ -927,9 +938,13 @@ button.datepicker-month:hover {
         border-color 0.12s,
         background-color 0.12s;
 }
-// Not while invalid — an errored control holds its red border/fill on hover (the host carries
-// aria-invalid, so scope the hover treatment to a non-invalid host).
-.app-phone-number-input wui-phone:not([aria-invalid="true"]) .phone-input-wrap:hover:not(:focus-within) {
+// Not while invalid — an errored control holds its white fill and red border on hover. Two
+// sources mark it invalid: the `error` prop sets aria-invalid on the host, and the element's own
+// live validation marks only the inner input. Exclude both, or hovering a live-validation error
+// turns the field grey.
+.app-phone-number-input
+    wui-phone:not([aria-invalid="true"])
+    .phone-input-wrap:hover:not(:focus-within):not(:has(> .input.error)):not(:has(> .input.is-invalid)):not(:has(> .input[aria-invalid="true"])) {
     background: var(--color-field-bg);
     border-color: var(--color-border-strong);
 }
@@ -944,11 +959,20 @@ button.datepicker-month:hover {
 }
 .app-phone-number-input .phone-input-wrap:has(.input.error),
 .app-phone-number-input .phone-input-wrap:has(.input.is-invalid),
+.app-phone-number-input .phone-input-wrap:has(.input[aria-invalid="true"]),
 // An explicit `error` prop sets aria-invalid on the host <wui-phone> (React + Razor); redden the
 // shell for it too, not just the internal live-validation state above.
 .app-phone-number-input wui-phone[aria-invalid="true"] .phone-input-wrap {
-    // Match AppInput's soft invalid border exactly (danger at 30%, mirroring primary-30 focus).
+    // Match AppInput's invalid state exactly: clean surface fill + soft danger border (danger at
+    // 30%, mirroring primary-30 focus).
+    background: var(--color-surface);
     border-color: color-mix(in srgb, var(--color-danger) 30%, transparent);
+    // AppInput's trailing error glyph, drawn on the shell (the inner input stays transparent).
+    padding-right: 41px;
+    background-image: $wui-field-error-glyph;
+    background-repeat: no-repeat;
+    background-position: right 14px center;
+    background-size: 18px;
 }
 // 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
@@ -969,6 +993,7 @@ wui-date-range[aria-invalid="true"] .daterange-trigger,
 wui-date-range[aria-invalid="true"] .daterange.open .daterange-trigger,
 wui-timepicker[aria-invalid="true"] .timepicker-trigger,
 wui-timepicker[aria-invalid="true"] .timepicker.open .timepicker-trigger {
+    background: var(--color-surface);
     border-color: color-mix(in srgb, var(--color-danger) 30%, transparent);
 }
 // The inner control drops its own chrome — the shell carries it.
@@ -1139,7 +1164,8 @@ wui-timepicker[aria-invalid="true"] .timepicker.open .timepicker-trigger {
     border-radius: var(--radius);
     font-size: 14px;
     color: var(--color-text);
-    background: var(--color-surface);
+    // AppInput's field model: muted resting fill that lifts to a clean surface on focus.
+    background: var(--color-field-bg);
     outline: none;
 }
 .dropdown-search-input:hover:not(:focus) {
@@ -1147,10 +1173,14 @@ wui-timepicker[aria-invalid="true"] .timepicker.open .timepicker-trigger {
     border-color: var(--color-border-strong);
 }
 // Border is the focus cue everywhere else in the system — no glow ring here.
-// Soft primary, matching AppInput / the phone field shell rather than a full-strength border.
+// AppInput's exact focus: clean surface fill + its soft primary border token.
 .dropdown-search-input:focus {
-    background: var(--color-field-bg);
-    border-color: color-mix(in srgb, var(--color-primary) 30%, transparent);
+    background: var(--color-surface);
+    border-color: var(--wui-primary-30);
+}
+// AppInput's placeholder colour, not the browser default grey.
+.dropdown-search-input::placeholder {
+    color: var(--color-text-subtle);
 }
 .country-list-scroll {
     max-height: 250px;

package/scss/wui/_controls.scss

@@ -325,9 +325,14 @@ textarea.form-control.autosize {
 // OPEN (datepicker/date-range/time-picker triggers set aria-expanded on the trigger, but carry
 // their `.open` class on the WRAPPER, not the trigger) must keep its open white fill — without
 // this the resting-hover grey repaints over it the moment the cursor sits on the open trigger.
+// `:not(.phone-input-wrap > .input)`: the phone shell owns the fill and border, so its inner input
+// must stay transparent. This rule's specificity beats that shell's transparent rule, so without
+// the exclusion the number half of an errored phone field turned grey on hover.
 .form-control:hover:not(:focus):not(:disabled):not([readonly]):not([aria-invalid="true"]):not(.is-invalid):not(.error),
 .form-select:hover:not(:focus):not(:disabled):not([aria-invalid="true"]):not(.is-invalid):not(.error),
-.input:hover:not(:focus):not(:disabled):not([readonly]):not([aria-invalid="true"]):not(.is-invalid):not(.error):not(.open):not([aria-expanded="true"]),
+.input:hover:not(:focus):not(:disabled):not([readonly]):not([aria-invalid="true"]):not(.is-invalid):not(.error):not(.open):not([aria-expanded="true"]):not(
+        .phone-input-wrap > .input
+    ),
 .select:hover:not(:focus):not(:disabled):not([aria-invalid="true"]):not(.is-invalid):not(.error),
 .textarea:hover:not(:focus):not(:disabled):not([readonly]):not([aria-invalid="true"]):not(.is-invalid):not(.error) {
     background-color: var(--color-field-bg);
@@ -590,6 +595,9 @@ textarea.form-control.autosize {
     pointer-events: none;
 }
 
+// The trailing error glyph, shared by every field that shows one (the phone shell draws it too).
+$wui-field-error-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F8285A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cline x1='12' y1='8' x2='12' y2='12'/%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'/%3E%3C/svg%3E");
+
 // Trailing error glyph on a PLAIN field only (child combinator). Shell-wrapped
 // inputs sit one level deeper and keep their own right edge.
 // Note: background-image here re-applies after the shared invalid rule zeroed BS's SVG.
@@ -600,7 +608,7 @@ textarea.form-control.autosize {
 .field > .input.is-invalid,
 .field > .input[aria-invalid="true"] {
     padding-right: 41px;
-    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F8285A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cline x1='12' y1='8' x2='12' y2='12'/%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'/%3E%3C/svg%3E");
+    background-image: $wui-field-error-glyph;
     background-repeat: no-repeat;
     background-position: right 14px center;
     background-size: 18px;
@@ -1141,7 +1149,9 @@ wui-select[compact] {
 .num-wrap:has(.num-input[aria-invalid="true"]) {
     // Soft invalid border — match AppInput / AppPhoneNumberInput exactly (danger at 30%,
     // mirroring the primary-30 focus border), not the solid full-strength danger this used to
-    // carry, so every field's error border reads the same light red.
+    // carry, so every field's error border reads the same light red. Clean surface fill, as
+    // AppInput's invalid state.
+    background: var(--color-surface);
     border-color: color-mix(in srgb, var(--color-danger) 30%, transparent);
 }