@webority/theme 0.68.0 → 0.68.2

package/package.json

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

@@ -1221,7 +1221,10 @@ wui-select[compact] {
     border: none;
     border-radius: 0;
     background: transparent;
-    min-width: 0;
+    // Room for four digits however narrow the field: with a unit beside it, a min-width of 0 let the value
+    // shrink to about 20px and vanish. The stepper buttons give way first (flex-shrink below).
+    min-width: calc(4ch + 8px);
+    padding-inline: 4px;
     text-align: center;
     font-weight: 600;
     color: var(--color-text);
@@ -1237,7 +1240,10 @@ wui-select[compact] {
 .num-btn {
     display: grid;
     place-items: center;
-    width: 44px;
+    // A 44px cell that shrinks before the value does in a narrow field.
+    flex: 0 1 44px;
+    min-width: 0;
+    overflow: hidden;
     // Fill the field height and centre the glyph. `height: 100%` resolved to auto
     // against the wrap's content-based height and left the button icon-tall, pinned
     // to the top; align-self:stretch fills the full field so place-items centres it.
@@ -1250,7 +1256,6 @@ wui-select[compact] {
     transition:
         color 0.12s ease,
         background 0.12s ease;
-    flex: none;
 }
 .num-btn:hover:not(:disabled) {
     color: var(--color-primary-ink);
@@ -1286,7 +1291,7 @@ wui-select[compact] {
     border-radius: var(--wui-field-radius-sm);
 }
 .num-wrap-sm .num-btn {
-    width: 36px;
+    flex-basis: 36px;
 }
 .num-wrap-sm .num-input {
     font-size: 13px;
@@ -1295,7 +1300,7 @@ wui-select[compact] {
     border-radius: var(--wui-field-radius-lg);
 }
 .num-wrap-lg .num-btn {
-    width: 52px;
+    flex-basis: 52px;
 }
 .num-wrap-lg .num-input {
     font-size: 16px;