@dillingerstaffing/strand-svelte 0.17.4 → 0.17.6

package/dist/css/strand-ui.css

@@ -9,7 +9,7 @@
 .strand-alert {
   position: relative;
   display: flex;
-  align-items: flex-start;
+  align-items: center;
   justify-content: space-between;
   width: 100%;
   padding: var(--strand-space-6);
@@ -964,7 +964,7 @@ body.strand-banner-active .strand-instrument-viewport--full-bleed {
   font-weight: var(--strand-weight-medium);
   letter-spacing: var(--strand-tracking-widest);
   text-transform: uppercase;
-  color: var(--strand-gray-500);
+  color: var(--strand-gray-600);
   margin-bottom: var(--strand-space-2);
 }
 
@@ -3352,7 +3352,14 @@ body.strand-banner-active .strand-instrument-viewport--full-bleed {
 /* Shell root: two-column grid, sidebar left, main right. */
 .strand-ref-shell {
   display: grid;
-  grid-template-columns: 256px 1fr;
+  /* minmax(0, 1fr) on the main track, not a bare 1fr. A bare 1fr keeps an
+     implicit min-content floor, so a wide child (a long heading, the metrics
+     row) forces the track wider than the viewport. Paired with the shell's
+     overflow-x clip below, that surplus is cut off on the right while the
+     left gutter renders correctly: asymmetric clipping on narrow viewports.
+     minmax(0, ...) lets the track shrink to the available width so content
+     reflows instead. Boundary Integrity: the container owns its width. */
+  grid-template-columns: 256px minmax(0, 1fr);
   min-height: 100vh;
 }
 
@@ -3495,6 +3502,10 @@ body.strand-banner-active .strand-instrument-viewport--full-bleed {
 .strand-ref-shell__main {
   padding: 56px var(--strand-space-16) 96px;
   max-width: 1120px;
+  /* min-width: 0 lets this grid item shrink below its content's min-content
+     width so content reflows within the track rather than overflowing the
+     viewport and being clipped on the right (Boundary Integrity). */
+  min-width: 0;
 }
 
 /* Header: h1 + lead + metrics row, bottom hairline. */
@@ -3729,7 +3740,9 @@ body.strand-banner-active .strand-instrument-viewport--full-bleed {
    on tap. */
 @media (max-width: 1040px) {
   .strand-ref-shell {
-    grid-template-columns: 1fr;
+    /* Single column at mobile, but still minmax(0, ...) so the lone track can
+       shrink below its content's min-content width (see the base rule). */
+    grid-template-columns: minmax(0, 1fr);
   }
 
   .strand-ref-shell__sidebar {
@@ -4607,6 +4620,31 @@ body.strand-banner-active .strand-instrument-viewport--full-bleed {
   }
 }
 
+/* Manual / programmatic reveal. Opts out of the scroll-driven view-timeline so a
+   consumer can drive the reveal by toggling .strand-reveal--visible: replay on
+   click, reveal on mount, reveal on state change. Uses the same transition as the
+   no-JS fallback, so it stays replayable even where animation-timeline is supported.
+   Add .strand-reveal--manual per element, or .strand-reveal-group--manual on the group. */
+.strand-reveal--manual,
+.strand-reveal-group--manual > .strand-reveal {
+  animation: none;
+  animation-timeline: auto;
+  transition: opacity var(--strand-duration-glacial) var(--strand-ease-out-expo),
+              transform var(--strand-duration-glacial) var(--strand-ease-out-expo);
+}
+
+/* A manual reveal toggled visible must win over the @supports view-timeline
+   base rule above, which re-declares opacity:0 / transform on .strand-reveal at
+   equal specificity but later in source order. With the animation removed (above)
+   nothing else drives opacity, so without this compound (higher-specificity)
+   rule the element stays at opacity 0 and toggling --visible has no effect:
+   the reveal never appears and replay does nothing. */
+.strand-reveal--manual.strand-reveal--visible,
+.strand-reveal-group--manual > .strand-reveal--visible {
+  opacity: 1;
+  transform: translateY(0);
+}
+
 @media (prefers-reduced-motion: reduce) {
   .strand-reveal {
     opacity: 1;
@@ -6556,12 +6594,12 @@ body.strand-banner-active .strand-instrument-viewport--full-bleed {
 
 .strand-bar-chart__col {
   flex: 1;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
+  display: grid;
+  grid-template-rows: auto 1fr auto;
+  align-items: end;
+  justify-items: center;
   gap: var(--strand-space-1);
   height: 100%;
-  justify-content: flex-end;
 }
 
 .strand-bar-chart__bar {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dillingerstaffing/strand-svelte",
-  "version": "0.17.4",
+  "version": "0.17.6",
   "description": "Strand UI - Svelte component library built on the Strand Design Language",
   "author": "Dillinger Staffing <engineering@dillingerstaffing.com> (https://dillingerstaffing.com)",
   "license": "MIT",
@@ -56,7 +56,7 @@
     "svelte": "^4.0.0 || ^5.0.0"
   },
   "dependencies": {
-    "@dillingerstaffing/strand": "^0.17.4"
+    "@dillingerstaffing/strand": "^0.17.6"
   },
   "devDependencies": {
     "@sveltejs/vite-plugin-svelte": "^5.0.0",