@dillingerstaffing/strand-ui 0.7.1 → 0.9.0

package/HTML_REFERENCE.md

@@ -834,3 +834,45 @@ All container components (Grid, Stack, Card, Container) enforce boundary integri
 > **Keyboard navigation:** Tab/Shift+Tab reaches all interactive elements. Arrow keys navigate within Tabs and menus (requires JavaScript). Escape closes overlays. Enter/Space activates buttons. Dialog must trap focus. See [DL L1197-1204](./DESIGN_LANGUAGE.md#L1197).
 
 > **Motion anti-patterns (never do):** Never re-animate on viewport exit/re-enter. Never hijack scroll. Never animate width/height/margin/padding (use transform). Never use bounce/elastic easing. Never animate more than 3-4 elements simultaneously. Never use parallax on text. See [DL L671-680](./DESIGN_LANGUAGE.md#L671).
+
+---
+
+## Utility Classes
+
+### Overline
+
+```html
+<span class="strand-overline">Specimen Label</span>
+```
+
+The monospace uppercase tracked label pattern. Used for section labels, category headers, and data annotations.
+
+> **DL foundation:** This is the laboratory specimen label pattern from [DL Part IV.5 (L386-L396)](./DESIGN_LANGUAGE.md#L386).
+
+### Headline
+
+```html
+<div class="strand-headline strand-headline--xl">STRAND</div>
+<h2 class="strand-headline strand-headline--lg">Section Title</h2>
+```
+
+**Sizes:** `--xl` (hero, fluid 2.5rem-5rem) | `--lg` (section, fluid 1.5rem-2.5rem)
+
+### Lead
+
+```html
+<p class="strand-lead">Design tokens + UI components. Zero-runtime CSS. Ship faster.</p>
+```
+
+Intro paragraph. Max 50 characters per line. Used after headlines.
+
+### Secondary Text
+
+```html
+<p class="strand-text-secondary">Supporting description for a card, feature, or section.</p>
+<span class="strand-text-secondary strand-text-secondary--xs">Fine print or metadata.</span>
+```
+
+Caption/description text. text-sm, gray-500, relaxed leading. The `--xs` modifier reduces to text-xs for metadata and fine print.
+
+> **DL foundation:** [DESIGN_LANGUAGE.md Part III.8 Color Roles](./DESIGN_LANGUAGE.md#L290) defines gray-500 as the secondary text role. [Part IV.7 Named Text Patterns](./DESIGN_LANGUAGE.md#L408) specifies the Secondary pattern.

package/dist/css/strand-ui.css

@@ -488,6 +488,7 @@
 
 /* ── Variants ── */
 .strand-card--elevated {
+  border: 1px solid var(--strand-border-subtle);
   box-shadow: var(--strand-elevation-1);
 }
 
@@ -497,6 +498,7 @@
 }
 
 .strand-card--interactive {
+  border: 1px solid var(--strand-border-subtle);
   box-shadow: var(--strand-elevation-1);
   cursor: pointer;
   transition:
@@ -672,7 +674,7 @@
   line-height: var(--strand-leading-relaxed);
   color: var(--strand-blue-midnight);
   background: var(--strand-surface-recessed);
-  box-shadow: inset 0 1px 3px rgba(15, 23, 42, 0.06); /* strand-blue-abyss at 6% opacity */
+  box-shadow: var(--strand-shadow-inset);
   border-radius: var(--strand-radius-lg);
   padding: var(--strand-space-3) var(--strand-space-4);
   overflow-x: auto;
@@ -960,11 +962,16 @@
   min-width: 0;
 }
 
-/* ── Column utilities ── */
+/* ── Fixed column utilities ── */
 .strand-grid--cols-2 { grid-template-columns: repeat(2, 1fr); }
 .strand-grid--cols-3 { grid-template-columns: repeat(3, 1fr); }
 .strand-grid--cols-4 { grid-template-columns: repeat(4, 1fr); }
 
+/* ── Responsive auto-fit (columns adjust to available width) ── */
+.strand-grid--auto-sm { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
+.strand-grid--auto-md { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
+.strand-grid--auto-lg { grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); }
+
 /* ── Gap utilities ── */
 .strand-grid--gap-1 { gap: var(--strand-space-1); }
 .strand-grid--gap-2 { gap: var(--strand-space-2); }
@@ -2603,9 +2610,59 @@
 
 .strand-viewport {
   background: var(--strand-surface-recessed);
-  box-shadow: inset 0 1px 3px rgba(15, 23, 42, 0.06);
+  box-shadow: var(--strand-shadow-inset);
   border-radius: var(--strand-radius-lg);
   padding: var(--strand-space-6);
 }
 
+/* ── Overline (specimen label pattern, DL Part IV.5) ── */
+.strand-overline {
+  font-family: var(--strand-font-mono);
+  font-size: var(--strand-text-xs);
+  font-weight: var(--strand-weight-medium);
+  letter-spacing: var(--strand-tracking-ultra);
+  text-transform: uppercase;
+  color: var(--strand-gray-500);
+  line-height: var(--strand-leading-normal);
+}
+
+/* ── Headline (display heading, DL Part IV.5) ── */
+.strand-headline {
+  font-family: var(--strand-font-mono);
+  font-weight: var(--strand-weight-light);
+  letter-spacing: var(--strand-tracking-widest);
+  text-transform: uppercase;
+  color: var(--strand-blue-midnight);
+  line-height: var(--strand-leading-tight);
+}
+
+.strand-headline--xl {
+  font-size: clamp(2.5rem, 5vw + 1rem, 5rem);
+  letter-spacing: 0.35em;
+}
+
+.strand-headline--lg {
+  font-size: clamp(1.5rem, 3vw + 0.5rem, 2.5rem);
+  letter-spacing: var(--strand-tracking-tighter);
+}
+
+/* ── Lead (intro paragraph, DL Part IV.6) ── */
+.strand-lead {
+  font-size: var(--strand-text-lg);
+  color: var(--strand-gray-500);
+  max-width: 50ch;
+  line-height: var(--strand-leading-relaxed);
+}
+
+/* ── Secondary text (caption/description, DL Part III.8 Color Roles) ── */
+.strand-text-secondary {
+  font-size: var(--strand-text-sm);
+  color: var(--strand-gray-500);
+  line-height: var(--strand-leading-relaxed);
+}
+
+.strand-text-secondary--xs {
+  font-size: var(--strand-text-xs);
+}
+
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dillingerstaffing/strand-ui",
-  "version": "0.7.1",
+  "version": "0.9.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.7.1"
+    "@dillingerstaffing/strand": "^0.9.0"
   },
   "devDependencies": {
     "@testing-library/preact": "^3.2.0",

package/src/components/Card/Card.css

@@ -12,6 +12,7 @@
 
 /* ── Variants ── */
 .strand-card--elevated {
+  border: 1px solid var(--strand-border-subtle);
   box-shadow: var(--strand-elevation-1);
 }
 
@@ -21,6 +22,7 @@
 }
 
 .strand-card--interactive {
+  border: 1px solid var(--strand-border-subtle);
   box-shadow: var(--strand-elevation-1);
   cursor: pointer;
   transition:

package/src/components/CodeBlock/CodeBlock.css

@@ -24,7 +24,7 @@
   line-height: var(--strand-leading-relaxed);
   color: var(--strand-blue-midnight);
   background: var(--strand-surface-recessed);
-  box-shadow: inset 0 1px 3px rgba(15, 23, 42, 0.06); /* strand-blue-abyss at 6% opacity */
+  box-shadow: var(--strand-shadow-inset);
   border-radius: var(--strand-radius-lg);
   padding: var(--strand-space-3) var(--strand-space-4);
   overflow-x: auto;

package/src/components/Grid/Grid.css

@@ -12,11 +12,16 @@
   min-width: 0;
 }
 
-/* ── Column utilities ── */
+/* ── Fixed column utilities ── */
 .strand-grid--cols-2 { grid-template-columns: repeat(2, 1fr); }
 .strand-grid--cols-3 { grid-template-columns: repeat(3, 1fr); }
 .strand-grid--cols-4 { grid-template-columns: repeat(4, 1fr); }
 
+/* ── Responsive auto-fit (columns adjust to available width) ── */
+.strand-grid--auto-sm { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
+.strand-grid--auto-md { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
+.strand-grid--auto-lg { grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); }
+
 /* ── Gap utilities ── */
 .strand-grid--gap-1 { gap: var(--strand-space-1); }
 .strand-grid--gap-2 { gap: var(--strand-space-2); }

package/src/static.css

@@ -41,7 +41,57 @@
 
 .strand-viewport {
   background: var(--strand-surface-recessed);
-  box-shadow: inset 0 1px 3px rgba(15, 23, 42, 0.06);
+  box-shadow: var(--strand-shadow-inset);
   border-radius: var(--strand-radius-lg);
   padding: var(--strand-space-6);
 }
+
+/* ── Overline (specimen label pattern, DL Part IV.5) ── */
+.strand-overline {
+  font-family: var(--strand-font-mono);
+  font-size: var(--strand-text-xs);
+  font-weight: var(--strand-weight-medium);
+  letter-spacing: var(--strand-tracking-ultra);
+  text-transform: uppercase;
+  color: var(--strand-gray-500);
+  line-height: var(--strand-leading-normal);
+}
+
+/* ── Headline (display heading, DL Part IV.5) ── */
+.strand-headline {
+  font-family: var(--strand-font-mono);
+  font-weight: var(--strand-weight-light);
+  letter-spacing: var(--strand-tracking-widest);
+  text-transform: uppercase;
+  color: var(--strand-blue-midnight);
+  line-height: var(--strand-leading-tight);
+}
+
+.strand-headline--xl {
+  font-size: clamp(2.5rem, 5vw + 1rem, 5rem);
+  letter-spacing: 0.35em;
+}
+
+.strand-headline--lg {
+  font-size: clamp(1.5rem, 3vw + 0.5rem, 2.5rem);
+  letter-spacing: var(--strand-tracking-tighter);
+}
+
+/* ── Lead (intro paragraph, DL Part IV.6) ── */
+.strand-lead {
+  font-size: var(--strand-text-lg);
+  color: var(--strand-gray-500);
+  max-width: 50ch;
+  line-height: var(--strand-leading-relaxed);
+}
+
+/* ── Secondary text (caption/description, DL Part III.8 Color Roles) ── */
+.strand-text-secondary {
+  font-size: var(--strand-text-sm);
+  color: var(--strand-gray-500);
+  line-height: var(--strand-leading-relaxed);
+}
+
+.strand-text-secondary--xs {
+  font-size: var(--strand-text-xs);
+}