@webority/theme 0.9.20 → 0.9.21

package/package.json

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

@@ -599,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 {