@dillingerstaffing/strand-ui 0.10.0 → 0.12.0

package/HTML_REFERENCE.md

@@ -407,7 +407,7 @@ All container components (Grid, Stack, Card, Container) enforce boundary integri
 </div>
 ```
 
-**Sizes:** `--sm` (text-xl, 25px) | default (text-3xl, 39px) | `--lg` (text-4xl, 49px). Label stays xs across all sizes.
+**Sizes:** `--sm` (text-xl, 25px) | default (text-3xl, 39px) | `--lg` (text-4xl, 49px) | `--xl` (fluid 72-112px, primary instrument readout). Label stays xs across all sizes.
 
 > **The DataReadout pattern** is uniquely Strand: monospace overline + large light-weight value + tabular numerals. See [DESIGN_LANGUAGE.md 11.2: Data Display (L918-L955)](./DESIGN_LANGUAGE.md#L918).
 
@@ -900,15 +900,19 @@ Named CSS classes for common compositions. Each implements one or more productio
 Production: `section-boundary`.
 
 ```html
-<div class="strand-card strand-card--elevated strand-card--pad-md">
-  <div class="strand-card-section">
-    <span class="strand-overline">Section Label</span>
-  </div>
-  <!-- section content -->
+<!-- Single label -->
+<div class="strand-card-section">
+  <span class="strand-overline">Section Label</span>
+</div>
+
+<!-- Distributed header (label + secondary) -->
+<div class="strand-card-section">
+  <span class="strand-overline">7-Day Forecast</span>
+  <span class="strand-overline" style="color: var(--strand-gray-400)">Ethiopian Yirgacheffe</span>
 </div>
 ```
 
-Multiple sections stack. Last section omits trailing border via `:last-child`.
+Children distribute on the inline axis (space-between). Single child sits at the start. Multiple sections stack; last omits trailing border via `:last-child`.
 
 ### Key-Value Row
 

package/dist/components/DataReadout/DataReadout.d.ts

@@ -5,8 +5,8 @@ export interface DataReadoutProps extends Omit<JSX.HTMLAttributes<HTMLDivElement
     label: string;
     /** The large displayed value */
     value: string | number;
-    /** Size variant: sm (compact), md (default), lg (hero) */
-    size?: "sm" | "md" | "lg";
+    /** Size variant: sm (compact), md (default), lg (hero), xl (primary instrument) */
+    size?: "sm" | "md" | "lg" | "xl";
 }
 export declare const DataReadout: import("preact").FunctionalComponent<import("preact/compat").PropsWithoutRef<DataReadoutProps> & {
     ref?: import("preact").Ref<HTMLDivElement> | undefined;

package/dist/components/DataReadout/DataReadout.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DataReadout.d.ts","sourceRoot":"","sources":["../../../src/components/DataReadout/DataReadout.tsx"],"names":[],"mappings":"AAAA,sDAAsD;AAEtD,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAC;AAGlC,MAAM,WAAW,gBACf,SAAQ,IAAI,CAAC,GAAG,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC;IACzD,0BAA0B;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,gCAAgC;IAChC,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,0DAA0D;IAC1D,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;CAC3B;AAED,eAAO,MAAM,WAAW;;EAiBvB,CAAC"}
+{"version":3,"file":"DataReadout.d.ts","sourceRoot":"","sources":["../../../src/components/DataReadout/DataReadout.tsx"],"names":[],"mappings":"AAAA,sDAAsD;AAEtD,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAC;AAGlC,MAAM,WAAW,gBACf,SAAQ,IAAI,CAAC,GAAG,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC;IACzD,0BAA0B;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,gCAAgC;IAChC,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,mFAAmF;IACnF,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;CAClC;AAED,eAAO,MAAM,WAAW;;EAiBvB,CAAC"}

package/dist/css/strand-ui.css

@@ -763,6 +763,10 @@
   font-size: var(--strand-text-4xl);
 }
 
+.strand-data-readout--xl .strand-data-readout__value {
+  font-size: clamp(4.5rem, 10vw, 7rem);
+}
+
 
 /* Dialog */
 /*! Strand UI | MIT License | dillingerstaffing.com */
@@ -1136,6 +1140,32 @@
   outline-offset: 2px;
 }
 
+/* ── CTA link variant ── */
+.strand-link--cta {
+  display: inline-flex;
+  align-items: center;
+  min-height: var(--strand-touch-target);
+  padding-block: var(--strand-space-2);
+  font-size: var(--strand-text-sm);
+}
+
+.strand-link--cta:hover {
+  color: var(--strand-blue-vivid);
+}
+
+/* ── Monospace link variant (footer, overline-style) ── */
+.strand-link--mono {
+  font-family: var(--strand-font-mono);
+  font-size: var(--strand-text-xs);
+  letter-spacing: var(--strand-tracking-wider);
+  color: var(--strand-gray-400);
+  background-image: none;
+}
+
+.strand-link--mono:hover {
+  color: var(--strand-blue-primary);
+}
+
 /* ── Reduced motion ── */
 @media (prefers-reduced-motion: reduce) {
   .strand-link {
@@ -1547,11 +1577,35 @@
 .strand-reveal-group > .strand-reveal:nth-child(5) { transition-delay: calc(var(--strand-stagger-delay) * 4); }
 .strand-reveal-group > .strand-reveal:nth-child(6) { transition-delay: var(--strand-duration-slow); }
 
+/* ── CSS-only scroll-driven animation (no JS required) ── */
+@supports (animation-timeline: view()) {
+  .strand-reveal {
+    opacity: 0;
+    transform: translateY(24px);
+    transition: none;
+    animation: strand-reveal-up linear both;
+    animation-timeline: view();
+    animation-range: entry 0% entry 100%;
+  }
+
+  .strand-reveal-group > .strand-reveal {
+    animation: strand-reveal-up linear both;
+    animation-timeline: view();
+    animation-range: entry 0% entry 100%;
+  }
+
+  @keyframes strand-reveal-up {
+    from { opacity: 0; transform: translateY(24px); }
+    to { opacity: 1; transform: translateY(0); }
+  }
+}
+
 @media (prefers-reduced-motion: reduce) {
   .strand-reveal {
     opacity: 1;
     transform: none;
     transition: none;
+    animation: none;
   }
 }
 
@@ -1586,6 +1640,11 @@
   background-color: var(--strand-surface-recessed);
 }
 
+/* ── Border variant ── */
+.strand-section--border-top {
+  border-top: 1px solid var(--strand-gray-200);
+}
+
 
 /* Select */
 /*! Strand UI | MIT License | dillingerstaffing.com */
@@ -2687,6 +2746,9 @@
    Derivation: section-boundary production (DL 11.10).
    OVERLINE + border-bottom + margin-bottom + padding-bottom */
 .strand-card-section {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
   margin-bottom: var(--strand-space-3);
   padding-bottom: var(--strand-space-2);
   border-bottom: 1px solid var(--strand-gray-200);
@@ -2822,4 +2884,44 @@
   color: var(--strand-gray-400);
 }
 
+/* ══════════════════════════════════════════════════
+   UTILITIES
+   ══════════════════════════════════════════════════ */
+
+/* ── Screen reader only ── */
+.strand-sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+/* ── Section header ──
+   Derivation: section-boundary production (DL 11.10).
+   Centered heading group with bottom margin. */
+.strand-section-header {
+  margin-bottom: clamp(2rem, 4vw, 4rem);
+}
+
+/* ── Step indicator ──
+   Numbered position indicator for sequential steps. */
+.strand-step-indicator {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--strand-space-8);
+  height: var(--strand-space-8);
+  border-radius: var(--strand-radius-full);
+  background: var(--strand-blue-glow);
+  color: var(--strand-blue-primary);
+  font-family: var(--strand-font-mono);
+  font-size: var(--strand-text-sm);
+  font-weight: var(--strand-weight-semibold);
+}
+
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dillingerstaffing/strand-ui",
-  "version": "0.10.0",
+  "version": "0.12.0",
   "description": "Strand UI - Preact/React component library built on the Strand Design Language",
   "author": "Dillinger Staffing <engineering@dillingerstaffing.com> (https://dillingerstaffing.com)",
   "license": "MIT",
@@ -60,7 +60,7 @@
     }
   },
   "dependencies": {
-    "@dillingerstaffing/strand": "^0.10.0"
+    "@dillingerstaffing/strand": "^0.12.0"
   },
   "devDependencies": {
     "@testing-library/preact": "^3.2.0",

package/src/components/DataReadout/DataReadout.css

@@ -37,3 +37,7 @@
 .strand-data-readout--lg .strand-data-readout__value {
   font-size: var(--strand-text-4xl);
 }
+
+.strand-data-readout--xl .strand-data-readout__value {
+  font-size: clamp(4.5rem, 10vw, 7rem);
+}

package/src/components/DataReadout/DataReadout.test.tsx

@@ -111,6 +111,14 @@ describe("DataReadout", () => {
     expect(readout?.className).toContain("strand-data-readout--lg");
   });
 
+  it("applies xl size modifier class", () => {
+    const { container } = render(
+      <DataReadout label="Remaining" value="284g" size="xl" />,
+    );
+    const readout = container.querySelector(".strand-data-readout");
+    expect(readout?.className).toContain("strand-data-readout--xl");
+  });
+
   it("does not apply size modifier for md (default)", () => {
     const { container } = render(
       <DataReadout label="Metric" value="100" size="md" />,

package/src/components/DataReadout/DataReadout.tsx

@@ -9,8 +9,8 @@ export interface DataReadoutProps
   label: string;
   /** The large displayed value */
   value: string | number;
-  /** Size variant: sm (compact), md (default), lg (hero) */
-  size?: "sm" | "md" | "lg";
+  /** Size variant: sm (compact), md (default), lg (hero), xl (primary instrument) */
+  size?: "sm" | "md" | "lg" | "xl";
 }
 
 export const DataReadout = forwardRef<HTMLDivElement, DataReadoutProps>(

package/src/components/Link/Link.css

@@ -22,6 +22,32 @@
   outline-offset: 2px;
 }
 
+/* ── CTA link variant ── */
+.strand-link--cta {
+  display: inline-flex;
+  align-items: center;
+  min-height: var(--strand-touch-target);
+  padding-block: var(--strand-space-2);
+  font-size: var(--strand-text-sm);
+}
+
+.strand-link--cta:hover {
+  color: var(--strand-blue-vivid);
+}
+
+/* ── Monospace link variant (footer, overline-style) ── */
+.strand-link--mono {
+  font-family: var(--strand-font-mono);
+  font-size: var(--strand-text-xs);
+  letter-spacing: var(--strand-tracking-wider);
+  color: var(--strand-gray-400);
+  background-image: none;
+}
+
+.strand-link--mono:hover {
+  color: var(--strand-blue-primary);
+}
+
 /* ── Reduced motion ── */
 @media (prefers-reduced-motion: reduce) {
   .strand-link {

package/src/components/ScrollReveal/ScrollReveal.css

@@ -20,10 +20,34 @@
 .strand-reveal-group > .strand-reveal:nth-child(5) { transition-delay: calc(var(--strand-stagger-delay) * 4); }
 .strand-reveal-group > .strand-reveal:nth-child(6) { transition-delay: var(--strand-duration-slow); }
 
+/* ── CSS-only scroll-driven animation (no JS required) ── */
+@supports (animation-timeline: view()) {
+  .strand-reveal {
+    opacity: 0;
+    transform: translateY(24px);
+    transition: none;
+    animation: strand-reveal-up linear both;
+    animation-timeline: view();
+    animation-range: entry 0% entry 100%;
+  }
+
+  .strand-reveal-group > .strand-reveal {
+    animation: strand-reveal-up linear both;
+    animation-timeline: view();
+    animation-range: entry 0% entry 100%;
+  }
+
+  @keyframes strand-reveal-up {
+    from { opacity: 0; transform: translateY(24px); }
+    to { opacity: 1; transform: translateY(0); }
+  }
+}
+
 @media (prefers-reduced-motion: reduce) {
   .strand-reveal {
     opacity: 1;
     transform: none;
     transition: none;
+    animation: none;
   }
 }

package/src/components/Section/Section.css

@@ -26,3 +26,8 @@
 .strand-section--bg-recessed {
   background-color: var(--strand-surface-recessed);
 }
+
+/* ── Border variant ── */
+.strand-section--border-top {
+  border-top: 1px solid var(--strand-gray-200);
+}

package/src/static.css

@@ -118,6 +118,9 @@
    Derivation: section-boundary production (DL 11.10).
    OVERLINE + border-bottom + margin-bottom + padding-bottom */
 .strand-card-section {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
   margin-bottom: var(--strand-space-3);
   padding-bottom: var(--strand-space-2);
   border-bottom: 1px solid var(--strand-gray-200);
@@ -252,3 +255,43 @@
   text-transform: uppercase;
   color: var(--strand-gray-400);
 }
+
+/* ══════════════════════════════════════════════════
+   UTILITIES
+   ══════════════════════════════════════════════════ */
+
+/* ── Screen reader only ── */
+.strand-sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+/* ── Section header ──
+   Derivation: section-boundary production (DL 11.10).
+   Centered heading group with bottom margin. */
+.strand-section-header {
+  margin-bottom: clamp(2rem, 4vw, 4rem);
+}
+
+/* ── Step indicator ──
+   Numbered position indicator for sequential steps. */
+.strand-step-indicator {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--strand-space-8);
+  height: var(--strand-space-8);
+  border-radius: var(--strand-radius-full);
+  background: var(--strand-blue-glow);
+  color: var(--strand-blue-primary);
+  font-family: var(--strand-font-mono);
+  font-size: var(--strand-text-sm);
+  font-weight: var(--strand-weight-semibold);
+}