@webority/theme 0.9.19 → 0.9.20

package/package.json

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