@webority/theme 0.9.19 → 0.9.21

package/package.json

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

@@ -309,11 +309,23 @@
     line-height: 0;
     margin-bottom: 22px;
 }
+// A caller-supplied illustration occupies the SAME footprint as the built-in badge, whatever
+// the source file measures — the box is the theme's, the artwork is the caller's. Without
+// this a 1024px export blows the dialog open and a 48px one sits lost in the whitespace, so
+// "use your own image" would in practice mean "first go and resize it to ours". `contain`
+// keeps a non-square source whole rather than cropping it.
+.wui-confirm-icon img {
+    display: block;
+    width: 80px;
+    height: 80px;
+    object-fit: contain;
+}
 // Icon size tracks the copy: a title+message dialog keeps the full 80px badge (set on
 // the element), but a lone title (no message) is one line and gets a smaller badge.
 // `.wui-confirm-msg` is a real element rendered only when a message exists, so `:has()`
 // is reliable here; CSS width/height override the SVG's own width/height attributes.
-.wui-confirm-content:not(:has(.wui-confirm-msg)) .wui-confirm-icon svg {
+.wui-confirm-content:not(:has(.wui-confirm-msg)) .wui-confirm-icon svg,
+.wui-confirm-content:not(:has(.wui-confirm-msg)) .wui-confirm-icon img {
     width: 56px;
     height: 56px;
 }

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 {
@@ -604,16 +599,15 @@
     min-height: 72px;
     padding: 12px 28px;
     background: var(--color-surface);
-    // Transparent rather than absent, so gaining the divider on scroll doesn't
-    // shift the layout by a pixel.
+    // Reserved rather than absent, so a consumer colouring the divider on
+    // `.app-topbar.scrolled` doesn't shift the layout by a pixel. The library
+    // adds that class on scroll but deliberately paints nothing: how heavy the
+    // topbar reads once the page moves is a per-surface art-direction call.
     border-bottom: 1px solid transparent;
     transition:
         border-color 0.2s ease,
         box-shadow 0.2s ease;
 }
-.app-topbar.scrolled {
-    border-bottom-color: var(--color-border);
-}
 // Two groups: the leading one shrinks and ellipsises a long page title, the
 // trailing one is pinned so actions are never pushed off-screen.
 .app-topbar-start {