@dillingerstaffing/strand-ui 0.10.0 → 0.11.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 */
@@ -2687,6 +2691,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);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dillingerstaffing/strand-ui",
-  "version": "0.10.0",
+  "version": "0.11.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.11.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/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);