@webority/theme 0.16.0 → 0.17.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webority/theme",
-  "version": "0.16.0",
+  "version": "0.17.0",
   "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/_display.scss

@@ -550,8 +550,8 @@ a.info-row:hover .info-value {
 }
 // Borderless (bordered={false} / bordered="false") — the selected pill keeps its tint and primary
 // label but drops the ring, on both the sliding thumb and the no-JS per-option pill.
-.segmented-borderless .segmented-thumb,
-.segmented-borderless .segmented-option:has(.segmented-input:checked) {
+.wui-segmented-borderless .segmented-thumb,
+.wui-segmented-borderless .segmented-option:has(.segmented-input:checked) {
     box-shadow: none;
 }
 // Icon pop — the selected segment's glyph springs up a touch as it becomes active.
@@ -561,7 +561,7 @@ a.info-row:hover .info-value {
 }
 .segmented-sm .segmented-thumb,
 .segmented-lg .segmented-thumb,
-.segmented-xl .segmented-thumb {
+.wui-segmented-xl .segmented-thumb {
     top: 3px;
     bottom: 3px;
 }
@@ -574,7 +574,7 @@ a.info-row:hover .info-value {
     --segmented-icon: 15px;
     --segmented-note: 11px;
 }
-.segmented-xl {
+.wui-segmented-xl {
     --segmented-option-h: 36px;
     --segmented-icon: 17px;
     --segmented-note: 12px;
@@ -588,7 +588,7 @@ a.info-row:hover .info-value {
     padding: 4px 16px;
     font-size: 13px;
 }
-.segmented-xl .segmented-option {
+.wui-segmented-xl .segmented-option {
     gap: 7px;
     padding: 4px 20px;
     font-size: 15px;

package/scss/wui/_navigation.scss

@@ -9,17 +9,26 @@
 // AppSidebarMenu — react-bootstrap Offcanvas mapped onto the app tokens plus
 // a flex column layout for the header / scrolling body / sticky footer.
 .app-sidebar-menu.offcanvas {
-    --bs-offcanvas-width: var(--asm-width, 420px);
+    // Phone first: a side panel fills the screen, because a 420px panel on a 430px phone leaves a
+    // sliver of page that reads as a rendering fault. From sm up it takes its own width (below).
+    --bs-offcanvas-width: 100vw;
     --bs-offcanvas-bg: var(--color-surface);
     --bs-offcanvas-color: var(--color-text);
     --bs-offcanvas-border-color: var(--color-border);
     --bs-offcanvas-border-width: 1px;
     --bs-offcanvas-padding-x: 0;
     --bs-offcanvas-padding-y: 0;
-    max-width: var(--asm-max-width, 92vw);
+    // A caller's own maxWidth still caps the panel on a phone.
+    max-width: var(--asm-max-width, 100vw);
     display: flex;
     flex-direction: column;
 }
+@include media-breakpoint-up(sm) {
+    .app-sidebar-menu.offcanvas {
+        --bs-offcanvas-width: var(--asm-width, 420px);
+        max-width: var(--asm-max-width, 92vw);
+    }
+}
 .app-sidebar-menu .offcanvas-body {
     // Inset the content to the same 20px gutter as the header/footer so plain body
     // content doesn't stick to the panel edge. Full-bleed content (edge-to-edge nav

package/scss/wui/_overlays.scss

@@ -249,7 +249,11 @@
 // hover, so dismissing reads as the destructive-ish gesture it is. The corner is
 // fixed across states: only the tint animates, so the button never morphs into a
 // circle. Slower on the way in than the way out.
-.wui-modal-close {
+//
+// The drawer (AppSidebarMenu) header close shares the rule, so the two overlays dismiss with
+// the same control.
+.wui-modal-close,
+.wui-drawer-close {
     margin-left: auto;
     display: grid;
     place-items: center;
@@ -268,20 +272,24 @@
         background 180ms cubic-bezier(0.4, 0, 0.2, 1),
         color 180ms cubic-bezier(0.4, 0, 0.2, 1);
 }
-.wui-modal-close:hover {
+.wui-modal-close:hover,
+.wui-drawer-close:hover {
     background: var(--color-danger-soft);
     color: var(--color-danger-text);
     transition:
         background 280ms cubic-bezier(0.16, 1, 0.3, 1),
         color 280ms cubic-bezier(0.16, 1, 0.3, 1);
 }
-.wui-modal-close:focus-visible {
+.wui-modal-close:focus-visible,
+.wui-drawer-close:focus-visible {
     outline: 2px solid var(--color-primary);
     outline-offset: 2px;
 }
 @media (prefers-reduced-motion: reduce) {
     .wui-modal-close,
-    .wui-modal-close:hover {
+    .wui-modal-close:hover,
+    .wui-drawer-close,
+    .wui-drawer-close:hover {
         transition:
             background 1ms linear,
             color 1ms linear;