@dillingerstaffing/strand-vue 0.17.0 → 0.17.1

package/dist/css/strand-ui.css

@@ -3356,11 +3356,16 @@ body.strand-banner-active .strand-instrument-viewport--full-bleed {
   min-height: 100vh;
 }
 
-/* Sidebar: sticky column, full viewport height, hairline right border. */
+/* Sidebar: sticky column. Height fills viewport from sticky-top to
+   bottom so its bottom never falls below the viewport edge. dvh tracks
+   mobile browser-chrome changes; vh fallback for older browsers. */
 .strand-ref-shell__sidebar {
   position: sticky;
   top: var(--strand-ref-sticky-top, 0);
-  height: 100vh;
+  height: calc(100vh - var(--strand-ref-sticky-top, 0px));
+  height: calc(100dvh - var(--strand-ref-sticky-top, 0px));
+  max-height: calc(100vh - var(--strand-ref-sticky-top, 0px));
+  max-height: calc(100dvh - var(--strand-ref-sticky-top, 0px));
   background: var(--strand-surface-elevated);
   border-right: 1px solid var(--strand-gray-200);
   display: flex;
@@ -3704,17 +3709,76 @@ body.strand-banner-active .strand-instrument-viewport--full-bleed {
   max-width: 560px;
 }
 
-/* Responsive: collapse to single column at 1040, further adjust at 560. */
+/* Mobile-trigger FAB: hidden by default; shown only inside the responsive
+   breakpoint. Floats bottom-right and toggles the mobile drawer. The
+   consumer pairs this with toggling `.is-nav-open` on the shell mount
+   point. The button itself uses standard strand-btn primitives plus
+   this class for FAB positioning. */
+.strand-ref-mobile-trigger {
+  display: none;
+}
+
+.strand-ref-shell__nav-scrim {
+  display: none;
+}
+
+/* Responsive: at <=1040px the sidebar becomes a slide-over drawer.
+   Consumer toggles `.is-nav-open` on the shell mount point to open the
+   drawer. The trigger button (.strand-ref-mobile-trigger) sits as a FAB
+   bottom-right, and the scrim (.strand-ref-shell__nav-scrim) closes it
+   on tap. */
 @media (max-width: 1040px) {
   .strand-ref-shell {
     grid-template-columns: 1fr;
   }
 
   .strand-ref-shell__sidebar {
-    position: static;
+    position: fixed;
+    top: var(--strand-ref-sticky-top, 0);
+    left: 0;
+    right: 0;
+    bottom: 0;
     height: auto;
+    max-height: none;
+    width: 100%;
+    z-index: 80;
+    background: var(--strand-surface-elevated);
+    box-shadow: var(--strand-elevation-3, 0 8px 28px rgba(15, 23, 42, 0.18));
+    transform: translateX(-100%);
+    transition: transform var(--strand-duration-normal, 200ms)
+      var(--strand-ease-out-quart, ease-out);
+    visibility: hidden;
     border-right: 0;
-    border-bottom: 1px solid var(--strand-gray-200);
+    border-bottom: 0;
+  }
+
+  .strand-ref-shell.is-nav-open .strand-ref-shell__sidebar {
+    transform: translateX(0);
+    visibility: visible;
+  }
+
+  .strand-ref-shell__nav-scrim {
+    position: fixed;
+    top: var(--strand-ref-sticky-top, 0);
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 75;
+    background: rgba(15, 23, 42, 0.4);
+  }
+
+  .strand-ref-shell.is-nav-open .strand-ref-shell__nav-scrim {
+    display: block;
+  }
+
+  .strand-ref-mobile-trigger {
+    display: inline-flex;
+    position: fixed;
+    bottom: calc(env(safe-area-inset-bottom, 0px) + 16px);
+    right: 16px;
+    z-index: 85;
+    box-shadow: var(--strand-elevation-3, 0 8px 24px rgba(15, 23, 42, 0.2));
+    border-radius: var(--strand-radius-full, 9999px);
   }
 
   .strand-ref-shell__main {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dillingerstaffing/strand-vue",
-  "version": "0.17.0",
+  "version": "0.17.1",
   "description": "Strand UI - Vue 3 component library built on the Strand Design Language",
   "author": "Dillinger Staffing <engineering@dillingerstaffing.com> (https://dillingerstaffing.com)",
   "license": "MIT",
@@ -53,7 +53,7 @@
     "vue": "^3.4.0"
   },
   "dependencies": {
-    "@dillingerstaffing/strand": "^0.17.0"
+    "@dillingerstaffing/strand": "^0.17.1"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.6.0",