@webority/theme 0.9.18 → 0.9.20

package/package.json

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

@@ -509,6 +509,10 @@
     z-index: var(--wui-z-menu);
     width: 312px;
     max-width: calc(100vw - 16px);
+    // JS (anchorOverlay's clampHeight) sets an inline max-height when the viewport can't fit the
+    // whole grid above or below the trigger: overflow-y is the scroll fallback that makes the
+    // clamped remainder reachable instead of silently clipped.
+    overflow-y: auto;
     padding: 18px;
     background: var(--color-surface);
     border: 1px solid var(--color-border);
@@ -828,6 +832,9 @@ button.datepicker-month:hover {
     z-index: var(--wui-z-menu);
     width: 620px;
     max-width: calc(100vw - 16px);
+    // See the matching note on .datepicker-pop: the scroll fallback for clampHeight's inline
+    // max-height.
+    overflow-y: auto;
     padding: 18px;
     background: var(--color-surface);
     border: 1px solid var(--color-border);

package/scss/wui/_controls.scss

@@ -1075,6 +1075,18 @@ wui-select[compact] {
     border: none;
     border-radius: 0;
     background: transparent;
+    // The wrapper owns the 1px border, so the input must shed those 2px. The input
+    // is a border-box control-height box (44px at md); nesting it in a 1px-bordered
+    // wrapper stacks the wrapper's 2px on top, so a 44px field renders at 46px with a
+    // unit. Subtracting the border here keeps input + wrapper border == the control
+    // height at every size.
+    height: calc(var(--wui-control-height) - 2px);
+}
+.input-with-unit .num-input.input-sm {
+    height: calc(var(--wui-control-height-sm) - 2px);
+}
+.input-with-unit .num-input.input-lg {
+    height: calc(var(--wui-control-height-lg) - 2px);
 }
 .input-with-unit .num-input:focus {
     box-shadow: none;
@@ -1086,6 +1098,10 @@ wui-select[compact] {
     border-left: 1px solid var(--color-border);
     padding: 9px 14px;
     font-size: 14px;
+    // Tight line box so the pill's intrinsic height never exceeds the (now shortened)
+    // input and drives the wrapper taller at the small size; it is vertically centred
+    // by align-items, so this only removes slack, it does not shift the glyph.
+    line-height: 1;
     font-weight: 500;
     color: var(--color-text-muted);
     font-family: var(--font-sans);

package/scss/wui/_disclosure.scss

@@ -24,11 +24,10 @@
 }
 .faq-item {
     border: 1px solid var(--color-border);
-    border-radius: var(--radius-lg);
-    corner-shape: squircle;
     background: var(--color-surface);
     overflow: hidden;
     transition: border-color 0.15s ease;
+    border-radius: var(--wui-field-radius);
 }
 .faq-item:hover:not(.open) {
     border-color: var(--color-border-strong);

package/scss/wui/_flow.scss

@@ -706,6 +706,13 @@ button.step:focus-visible .step-circle {
     line-height: 1.4;
     color: var(--color-text-muted);
 }
+// When the row's fields carry their own labels, those labels supply the vertical separation
+// from the remove control. A removable row whose fields have NO labels has only the thin empty
+// band, so the inputs read as crowding the remove disc. Grow the band to the disc's height when
+// no field label is present, restoring the clearance a label would have given.
+.repeater-row:not(:has(.repeater-body :is(.label, label))) .repeater-row-label {
+    min-height: 36px;
+}
 .repeater-index {
     flex: none;
     width: 22px;

package/scss/wui/_shell.scss

@@ -549,21 +549,17 @@
     display: inline-grid;
     place-items: center;
     transform: translateY(-50%);
-    border: 1px solid var(--color-border);
+    border: 0;
     border-radius: 999px;
     background: var(--color-surface);
     color: var(--color-text-muted);
     cursor: pointer;
     transition:
         left 0.2s var(--wui-ease-ui),
-        background 0.12s ease,
-        color 0.12s ease,
-        box-shadow 0.12s ease;
+        color 0.12s ease;
 }
 .app-sidebar-toggle:hover {
-    background: var(--color-bg-muted);
-    color: var(--color-text);
-    box-shadow: var(--shadow-sm);
+    color: var(--color-primary);
 }
 .app-sidebar-toggle:focus-visible {
     outline: 2px solid var(--color-primary);
@@ -576,14 +572,13 @@
     // `block` kills the inline-block baseline gap (.wui-icon is inline-block), which otherwise
     // pushes the glyph a hair down in the round button — so the grid can centre it exactly.
     display: block;
-    // Optical centring nudge for the chevron in the round button.
-    // (translateX is in the icon's own frame, so after the collapsed 180° rotation the same value
-    // mirrors on screen — keeping the flipped chevron optically centred too.)
-    transform: translateX(-2px);
     transition: transform 0.2s ease;
 }
+// The double-chevron glyph is a left/right MIRROR pair, not a point-symmetric shape, so a
+// 180deg rotate (used for the old single-chevron glyph) would flip it upside down too;
+// scaleX(-1) mirrors only the axis that differs between the collapse and expand glyphs.
 .app-shell.collapsed .app-sidebar-toggle > * {
-    transform: rotate(180deg) translateX(2px);
+    transform: scaleX(-1);
 }
 
 .app-main {