@webority/theme 0.6.12 → 0.6.13

package/package.json

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

@@ -882,6 +882,10 @@ button.datepicker-month:hover {
     border-radius: var(--radius);
     corner-shape: squircle;
     background: var(--color-surface);
+    // Clip the inner control to the shell's rounded shape — a full-height child was painting
+    // over the squircle border at the bottom, which read as a cut-off bottom edge. The dial
+    // dropdown is position:fixed, so it is unaffected by this.
+    overflow: hidden;
     transition:
         border-color 0.12s,
         background-color 0.12s;
@@ -890,9 +894,10 @@ button.datepicker-month:hover {
     background: var(--color-bg-muted);
     border-color: var(--color-border-strong);
 }
+// Match AppInput's focus: a soft primary border, not a full-strength one.
 .app-phone-number-input .phone-input-wrap:focus-within {
     background: var(--color-bg-muted);
-    border-color: var(--color-primary);
+    border-color: color-mix(in srgb, var(--color-primary) 30%, transparent);
 }
 .app-phone-number-input .phone-input-wrap:has(> .input:disabled) {
     background: var(--color-bg-muted);
@@ -1033,9 +1038,10 @@ button.datepicker-month:hover {
     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.
 .dropdown-search-input:focus {
     background: var(--color-bg-muted);
-    border-color: var(--color-primary);
+    border-color: color-mix(in srgb, var(--color-primary) 30%, transparent);
 }
 .country-list-scroll {
     max-height: 250px;
@@ -1073,6 +1079,12 @@ button.datepicker-month:hover {
         background 0.12s ease,
         color 0.12s ease;
 }
+// The search hides non-matches with the `hidden` attribute. `display: flex !important` above
+// beats the UA `[hidden] { display: none }`, so filtered-out countries stayed visible — the
+// search looked broken. Restore the hide with matching precedence.
+.country-dropdown-item[hidden] {
+    display: none !important;
+}
 .country-dropdown-item:hover,
 .country-dropdown-item:focus {
     background: var(--color-primary-soft) !important;

package/scss/wui/_display.scss

@@ -338,6 +338,17 @@ a.info-row:hover .info-value {
     font-family: var(--bs-font-monospace);
     text-transform: uppercase;
 }
+// Size steps mirror AppInput's .input-sm / .input-lg (which the hex box also carries).
+// The swatch tracks the control height per size, less the 4px inset the md swatch already
+// keeps against the 44px field, so the chip stays visually inset at every size.
+.color-field-sm .color-field-swatch {
+    width: calc(var(--wui-control-height-sm) - 4px);
+    height: calc(var(--wui-control-height-sm) - 4px);
+}
+.color-field-lg .color-field-swatch {
+    width: calc(var(--wui-control-height-lg) - 4px);
+    height: calc(var(--wui-control-height-lg) - 4px);
+}
 
 // ============================================================================
 // Timeline / activity feed. The rail is drawn on the LIST, not per item, so it