@webority/theme 0.16.0 → 0.17.1

package/package.json

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

@@ -188,7 +188,9 @@
     background-size: 12px 12px;
 }
 
-// Switch — pill track + sliding knob (Bootstrap .form-switch only).
+// Switch: pill track + sliding knob (Bootstrap .form-switch only). The default track has
+// truly circular ends: the switch is a type="checkbox", which carries the checkbox's
+// `corner-shape: squircle`, so it is reset to `round` here.
 .form-switch {
     padding-left: 0;
 }
@@ -196,6 +198,7 @@
     width: 40px;
     height: 22px;
     border-radius: 999px;
+    corner-shape: round;
     border-color: transparent;
     background-color: var(--color-border-strong);
     background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='7' fill='white'/%3E%3C/svg%3E");
@@ -227,10 +230,6 @@
 .form-switch-circle .form-check-input {
     width: 24px;
     height: 24px;
-    // The switch is a type="checkbox", which carries `corner-shape: squircle` — on a square
-    // that renders a rounded square, not a circle. Reset to a true round corner.
-    corner-shape: round;
-    border-radius: 999px;
     background-position: center;
     background-size: 10px 10px;
 }
@@ -238,13 +237,11 @@
     background-position: center;
 }
 
-// Rounded-pill variant (shape="round") — the same sliding pill, but with truly circular
-// ends. The switch is a type=checkbox, so it inherits the checkbox's default
-// `corner-shape: squircle`, which superellipses the pill's ends; reset it to `round` for
-// the fully semicircular track in the reference. Only the corner shape changes — size,
-// knob and slide are the base pill's.
-.form-switch-round .form-check-input {
-    corner-shape: round;
+// Squircle-pill variant (shape="pill"): the same sliding pill with superellipse ends, the
+// checkbox's own corner shape. Only the corner shape changes; size, knob and slide are the
+// base switch's.
+.form-switch-pill .form-check-input {
+    corner-shape: squircle;
 }
 @media (prefers-reduced-motion: reduce) {
     .form-check-input,

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;