@webority/theme 0.9.21 → 0.9.22

package/package.json

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

@@ -188,12 +188,14 @@
 // package claiming them would silently restyle every consumer's Bootstrap nav.
 // ============================================================================
 
-// The rail width and the expanded width are variables because three separate
-// things must agree on them: the grid column, the collapse toggle's left offset,
-// and the footer's left inset. Hardcoding them in three places is how they drift.
+// The rail width and the expanded width are variables because two separate
+// things must agree on them: the grid column and the footer's left inset.
+// Hardcoding them in both places is how they drift.
 .app-shell {
     --app-sidebar-w: 260px;
     --app-sidebar-rail-w: 88px;
+    // The equal space above (below the rule) and below the collapse toggle.
+    --app-sidebar-toggle-gap: 12px;
 
     position: relative;
     display: grid;
@@ -225,13 +227,15 @@
     display: flex;
     flex-direction: column;
     gap: 2px;
-    padding: 20px 16px;
+    // The bottom inset matches the gap between the collapse toggle and the rule above it,
+    // so the toggle row sits evenly spaced between the rule and the sidebar's bottom edge.
+    padding: 20px 16px var(--app-sidebar-toggle-gap);
     overflow: hidden;
     background: var(--color-surface);
     transition: padding 0.2s var(--wui-ease-ui);
 }
 .app-shell.collapsed .app-sidebar {
-    padding: 20px 12px;
+    padding: 20px 12px var(--app-sidebar-toggle-gap);
 }
 .app-sidebar-brand {
     display: flex;
@@ -535,42 +539,56 @@
     }
 }
 
-// A circular button centred on the sidebar's right edge. It is fixed to the
-// viewport, not a sidebar child, because the sidebar clips its own overflow and
-// would cut the button in half.
+// The collapse toggle is the sidebar's last row, pinned under the scrolling nav (and under
+// any sidebar footer). It is in-flow, not fixed, so it moves with the sidebar and needs no
+// viewport maths to stay aligned with the rail. It spans the sidebar's full width with the
+// chevron centred, expanded or collapsed.
 .app-sidebar-toggle {
-    position: fixed;
-    // 36px = half the 72px topbar, so the button lines up with the topbar's centre.
-    top: 36px;
-    left: calc(var(--app-sidebar-w) - 12px);
-    z-index: var(--wui-z-fixed);
-    width: 24px;
-    height: 24px;
-    display: inline-grid;
-    place-items: center;
-    transform: translateY(-50%);
+    flex: none;
+    // A full-width row, shaped like a nav item (same height and radius), with the chevron
+    // centred, so the whole row is the hit area in both the expanded and collapsed states.
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    position: relative;
+    min-height: var(--wui-control-height);
+    // 8px above the rule, the 1px rule, then the same gap below it as under the row.
+    margin-top: calc(9px + var(--app-sidebar-toggle-gap));
+    padding: 0;
     border: 0;
-    border-radius: 999px;
-    background: var(--color-surface);
+    border-radius: var(--radius-xl);
+    corner-shape: squircle;
+    background: transparent;
     color: var(--color-text-muted);
     cursor: pointer;
     transition:
-        left 0.2s var(--wui-ease-ui),
-        color 0.12s ease;
+        color 0.12s ease,
+        background-color 0.12s ease;
+}
+.app-sidebar-toggle::before {
+    // A rule marking the toggle off from the nav, matching the rule between nav groups. It is a
+    // pseudo-element, not the button's own border, so the rounded hover tint stays a clean pill
+    // and the rule spans the row's full width without being clipped by the radius.
+    content: "";
+    position: absolute;
+    top: calc(-1px - var(--app-sidebar-toggle-gap));
+    left: 0;
+    right: 0;
+    border-top: 1px solid var(--color-border);
+    pointer-events: none;
 }
 .app-sidebar-toggle:hover {
     color: var(--color-primary);
+    background: var(--color-bg-muted);
 }
 .app-sidebar-toggle:focus-visible {
     outline: 2px solid var(--color-primary);
     outline-offset: 2px;
 }
-.app-shell.collapsed .app-sidebar-toggle {
-    left: calc(var(--app-sidebar-rail-w) - 12px);
-}
 .app-sidebar-toggle > * {
     // `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.
+    // pushes the glyph a hair down in the button, so the grid can centre it exactly.
     display: block;
     transition: transform 0.2s ease;
 }