@dillingerstaffing/strand-ui 0.5.1 → 0.7.0

package/HTML_REFERENCE.md

@@ -6,13 +6,30 @@
 
 > **Before writing any Strand HTML**, read [DESIGN_LANGUAGE.md Part II: Named Principles (L57-L193)](./DESIGN_LANGUAGE.md#L57). These 10 principles are hard constraints, not guidelines. Violating them produces valid HTML that looks wrong.
 
+> **Principle 1 (Cognitive Economy):** Every element must earn its place. Test: remove an element. If the task still works, it was decoration. If you're not adding back 10% of what you delete, you're not deleting enough. See [DL L61-69](./DESIGN_LANGUAGE.md#L61).
+
+> **Principle 2 (Biosynthetic Restraint):** Max 12 distinct visual elements per screen. See [DL L71-79](./DESIGN_LANGUAGE.md#L71).
+
 ## Required CSS
 
+**CDN (no install):**
+
+```html
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@dillingerstaffing/strand@0.5/css/tokens.css">
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@dillingerstaffing/strand@0.5/css/reset.css">
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@dillingerstaffing/strand@0.5/css/base.css">
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@dillingerstaffing/strand-ui@0.5/dist/css/strand-ui.css">
+```
+
+**npm:**
+
 ```html
-<link rel="stylesheet" href="path/to/@dillingerstaffing/strand/css/tokens.css">
-<link rel="stylesheet" href="path/to/@dillingerstaffing/strand-ui/dist/css/strand-ui.css">
+<link rel="stylesheet" href="node_modules/@dillingerstaffing/strand/css/tokens.css">
+<link rel="stylesheet" href="node_modules/@dillingerstaffing/strand-ui/dist/css/strand-ui.css">
 ```
 
+> **Principle 7 (Grain of Precision):** Include reset.css and base.css for the laboratory surface texture (dot grid, LED glow, grain). Without these, the page is a blank canvas, not a lab. See [DL L141-147](./DESIGN_LANGUAGE.md#L141).
+
 > **Token roles:** Don't guess which token to use. See [DESIGN_LANGUAGE.md 3.8: Color Roles (L290-L311)](./DESIGN_LANGUAGE.md#L290) for which color in which context, and [Appendix B: Token Quick Reference (L1372-L1431)](./DESIGN_LANGUAGE.md#L1372) for the full lookup table.
 
 ## Presentation Mode
@@ -64,6 +81,10 @@ All container components (Grid, Stack, Card, Container) enforce boundary integri
 
 ## Input Components
 
+> **Principle 10 (Instrument Principle):** Forms are specimen collection instruments. Labels use monospace uppercase tracking. The form should feel like filling out a specimen record, not a generic web form. See [DL L171-192](./DESIGN_LANGUAGE.md#L171).
+
+> **Microcopy voice:** Use instrument language. "Processing..." not "Loading...". "Format unrecognized" not "Invalid input". See [DL L1034-1049](./DESIGN_LANGUAGE.md#L1034).
+
 > **Interaction states for all inputs** (hover, focus, pressed, disabled, loading): [DESIGN_LANGUAGE.md Part XII: Interaction State System (L1013-L1067)](./DESIGN_LANGUAGE.md#L1013).
 
 ### Button
@@ -440,7 +461,9 @@ All container components (Grid, Stack, Card, Container) enforce boundary integri
 **Gap:** `strand-grid--gap-1` through `strand-grid--gap-8`
 **Note:** For column counts beyond 4, use inline style: `style="grid-template-columns: repeat(6, 1fr); gap: var(--strand-space-4);"`.
 
-> **Composability:** Before nesting grids inside cards inside previews, check content width. See [DESIGN_LANGUAGE.md 10.5: Composability Constraint (L873-L877)](./DESIGN_LANGUAGE.md#L873).
+> **Principle 6 (Compound Silence):** Gap between siblings must exceed padding within components. If card padding is md (24px), card-to-card gap must be at least 32px. See [DL L127-140](./DESIGN_LANGUAGE.md#L127).
+
+> **Composability (DL 10.5):** Before nesting more than 2 padded containers, calculate remaining content width at narrowest viewport. See [DL L873-877](./DESIGN_LANGUAGE.md#L873).
 
 ---
 
@@ -604,10 +627,13 @@ All container components (Grid, Stack, Card, Container) enforce boundary integri
 
 ## Feedback Components
 
+> **Microcopy voice:** Alerts are diagnostic events. Use "Process interrupted" not "Something went wrong". Use "Retry sequence" not "Please try again". See [DL L1034-1049](./DESIGN_LANGUAGE.md#L1034).
+
 ### Toast
 
 ```html
 <div class="strand-toast strand-toast--info" role="status" aria-live="polite">
+  <span class="strand-toast__status">INFO</span>
   <span class="strand-toast__message">Changes saved successfully.</span>
   <button type="button" class="strand-toast__dismiss" aria-label="Dismiss">&times;</button>
 </div>
@@ -622,6 +648,7 @@ All container components (Grid, Stack, Card, Container) enforce boundary integri
 </div>
 ```
 
+**Status prefix:** Include `<span class="strand-toast__status">LABEL</span>` before the message. Labels: `INFO`, `COMPLETE` (success), `WARNING`, `ERROR`.
 **Note:** Container is fixed to bottom-right. Use `aria-live="assertive"` for `warning` and `error`.
 
 ---
@@ -630,11 +657,13 @@ All container components (Grid, Stack, Card, Container) enforce boundary integri
 
 ```html
 <div class="strand-alert strand-alert--info" role="status">
+  <span class="strand-alert__status">INFO</span>
   <div class="strand-alert__content">This is an informational message.</div>
 </div>
 ```
 
 **Statuses:** `strand-alert--info` | `strand-alert--success` | `strand-alert--warning` | `strand-alert--error`
+**Status prefix:** Include `<span class="strand-alert__status">LABEL</span>` before the content div. Labels: `INFO`, `COMPLETE` (success), `WARNING`, `ERROR`.
 **Dismissible:** Add `<button type="button" class="strand-alert__dismiss" aria-label="Dismiss">&times;</button>` after content.
 **Note:** Use `role="alert"` for `warning` and `error`, `role="status"` for `info` and `success`.
 
@@ -758,3 +787,50 @@ All container components (Grid, Stack, Card, Container) enforce boundary integri
 **Note:** Always include `aria-hidden="true"`. Skeletons are placeholder visuals, not interactive.
 
 > **Animation:** Shimmer is 1.8s cycle. All animations respect `prefers-reduced-motion`. See [DESIGN_LANGUAGE.md 6.7: Reduced Motion (L656-L669)](./DESIGN_LANGUAGE.md#L656).
+
+---
+
+## InstrumentViewport
+
+```html
+<div class="strand-instrument-viewport">
+  <!-- Dark data-dense content -->
+</div>
+
+<!-- With grid overlay -->
+<div class="strand-instrument-viewport strand-instrument-viewport--grid">
+  <!-- Dark content with grid lines -->
+</div>
+```
+
+> **Dual-surface principle:** The white lab frame contains dark instrument viewports for data-dense contexts (maps, charts, terminal displays). The viewport is recessed INTO the lab, not floating above it. See [DL L795-814](./DESIGN_LANGUAGE.md#L795).
+
+> **Decision framework:** Use dark viewport for data-dense displays. Use clean white for dashboards. Use lab surface for content pages. See [DL L816-825](./DESIGN_LANGUAGE.md#L816).
+
+---
+
+## ScrollReveal
+
+```html
+<div class="strand-reveal">Fades up on scroll</div>
+
+<div class="strand-reveal-group">
+  <div class="strand-reveal">Staggers 0ms</div>
+  <div class="strand-reveal">Staggers 80ms</div>
+  <div class="strand-reveal">Staggers 160ms</div>
+</div>
+```
+
+> **Scientific reveal:** Scroll-triggered entrance. 24px translate, trigger once. Stagger 80ms between siblings. See [DL L538-563](./DESIGN_LANGUAGE.md#L538).
+
+---
+
+## Accessibility and Motion
+
+> **Accessibility checklist:** Exactly one h1 per page. Heading hierarchy (no skipping levels). All form inputs have visible labels. ARIA labels on non-text controls. ARIA live regions on dynamic content. Landmark regions (nav, main, footer). See [DL L1206-1213](./DESIGN_LANGUAGE.md#L1206).
+
+> **Touch targets:** All interactive elements must be at least 44x44px. See [DL L1215-1217](./DESIGN_LANGUAGE.md#L1215).
+
+> **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).

package/README.md

@@ -1,6 +1,6 @@
 # @dillingerstaffing/strand-ui
 
-Preact/React component library built on the [Strand Design Language](https://github.com/dillingerstaffing/strand/blob/main/DESIGN_LANGUAGE.md). 32 components. Zero-runtime CSS. WCAG 2.2 AA.
+Preact/React component library built on the [Strand Design Language](https://github.com/dillingerstaffing/strand/blob/main/DESIGN_LANGUAGE.md). 34 components. Zero-runtime CSS. WCAG 2.2 AA.
 
 ## Install
 

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

@@ -1 +1 @@
-{"version":3,"file":"Alert.d.ts","sourceRoot":"","sources":["../../../src/components/Alert/Alert.tsx"],"names":[],"mappings":"AAAA,sDAAsD;AAEtD,OAAO,KAAK,EAAE,iBAAiB,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAC;AAGrD,MAAM,WAAW,UACf,SAAQ,IAAI,CAAC,GAAG,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,QAAQ,CAAC;IAC1D,iCAAiC;IACjC,MAAM,CAAC,EAAE,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;IAClD,0BAA0B;IAC1B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,4CAA4C;IAC5C,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,oBAAoB;IACpB,QAAQ,CAAC,EAAE,iBAAiB,CAAC;CAC9B;AAED,eAAO,MAAM,KAAK;;EAuCjB,CAAC"}
+{"version":3,"file":"Alert.d.ts","sourceRoot":"","sources":["../../../src/components/Alert/Alert.tsx"],"names":[],"mappings":"AAAA,sDAAsD;AAEtD,OAAO,KAAK,EAAE,iBAAiB,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAC;AAGrD,MAAM,WAAW,UACf,SAAQ,IAAI,CAAC,GAAG,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,QAAQ,CAAC;IAC1D,iCAAiC;IACjC,MAAM,CAAC,EAAE,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;IAClD,0BAA0B;IAC1B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,4CAA4C;IAC5C,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,oBAAoB;IACpB,QAAQ,CAAC,EAAE,iBAAiB,CAAC;CAC9B;AAED,eAAO,MAAM,KAAK;;EA2CjB,CAAC"}

package/dist/components/InstrumentViewport/InstrumentViewport.d.ts

@@ -0,0 +1,10 @@
+/*! Strand UI | MIT License | dillingerstaffing.com */
+import type { JSX } from "preact";
+export interface InstrumentViewportProps extends JSX.HTMLAttributes<HTMLDivElement> {
+    /** Show subtle grid overlay */
+    grid?: boolean;
+}
+export declare const InstrumentViewport: import("preact").FunctionalComponent<import("preact/compat").PropsWithoutRef<InstrumentViewportProps> & {
+    ref?: import("preact").Ref<HTMLDivElement> | undefined;
+}>;
+//# sourceMappingURL=InstrumentViewport.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"InstrumentViewport.d.ts","sourceRoot":"","sources":["../../../src/components/InstrumentViewport/InstrumentViewport.tsx"],"names":[],"mappings":"AAAA,sDAAsD;AAEtD,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAC;AAGlC,MAAM,WAAW,uBACf,SAAQ,GAAG,CAAC,cAAc,CAAC,cAAc,CAAC;IAC1C,+BAA+B;IAC/B,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB;AAED,eAAO,MAAM,kBAAkB;;EAiB7B,CAAC"}

package/dist/components/InstrumentViewport/index.d.ts

@@ -0,0 +1,3 @@
+export { InstrumentViewport } from "./InstrumentViewport.js";
+export type { InstrumentViewportProps } from "./InstrumentViewport.js";
+//# sourceMappingURL=index.d.ts.map

package/dist/components/InstrumentViewport/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/InstrumentViewport/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,yBAAyB,CAAC;AAC7D,YAAY,EAAE,uBAAuB,EAAE,MAAM,yBAAyB,CAAC"}

package/dist/components/ScrollReveal/ScrollReveal.d.ts

@@ -0,0 +1,12 @@
+/*! Strand UI | MIT License | dillingerstaffing.com */
+import type { JSX } from "preact";
+export interface ScrollRevealProps extends JSX.HTMLAttributes<HTMLDivElement> {
+    /** IntersectionObserver visibility threshold (0-1) */
+    threshold?: number;
+    /** Only trigger reveal once */
+    once?: boolean;
+}
+export declare const ScrollReveal: import("preact").FunctionalComponent<import("preact/compat").PropsWithoutRef<ScrollRevealProps> & {
+    ref?: import("preact").Ref<HTMLDivElement> | undefined;
+}>;
+//# sourceMappingURL=ScrollReveal.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ScrollReveal.d.ts","sourceRoot":"","sources":["../../../src/components/ScrollReveal/ScrollReveal.tsx"],"names":[],"mappings":"AAAA,sDAAsD;AAEtD,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAC;AAIlC,MAAM,WAAW,iBACf,SAAQ,GAAG,CAAC,cAAc,CAAC,cAAc,CAAC;IAC1C,sDAAsD;IACtD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,+BAA+B;IAC/B,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB;AAED,eAAO,MAAM,YAAY;;EA+CxB,CAAC"}

package/dist/components/ScrollReveal/index.d.ts

@@ -0,0 +1,3 @@
+export { ScrollReveal } from "./ScrollReveal.js";
+export type { ScrollRevealProps } from "./ScrollReveal.js";
+//# sourceMappingURL=index.d.ts.map

package/dist/components/ScrollReveal/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/ScrollReveal/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AACjD,YAAY,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"Toast.d.ts","sourceRoot":"","sources":["../../../src/components/Toast/Toast.tsx"],"names":[],"mappings":"AAAA,sDAAsD;AAEtD,OAAO,KAAK,EAAE,iBAAiB,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAC;AAKrD,MAAM,MAAM,WAAW,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;AAEnE,MAAM,WAAW,YAAY;IAC3B,OAAO,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAOD,UAAU,iBAAiB;IACzB,KAAK,EAAE,CAAC,OAAO,EAAE,YAAY,KAAK,IAAI,CAAC;CACxC;AAID,wBAAgB,QAAQ,IAAI,iBAAiB,CAM5C;AAID,MAAM,WAAW,kBAAkB;IACjC,QAAQ,CAAC,EAAE,iBAAiB,CAAC;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,aAAa;8BAAkC,kBAAkB;;CAqC7E,CAAC;AAoDF,MAAM,WAAW,UACf,SAAQ,IAAI,CAAC,GAAG,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,QAAQ,CAAC;IAC1D,oBAAoB;IACpB,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,yBAAyB;IACzB,OAAO,EAAE,MAAM,CAAC;IAChB,4CAA4C;IAC5C,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;CACxB;AAED,eAAO,MAAM,KAAK;;EAkCjB,CAAC"}
+{"version":3,"file":"Toast.d.ts","sourceRoot":"","sources":["../../../src/components/Toast/Toast.tsx"],"names":[],"mappings":"AAAA,sDAAsD;AAEtD,OAAO,KAAK,EAAE,iBAAiB,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAC;AAKrD,MAAM,MAAM,WAAW,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;AAEnE,MAAM,WAAW,YAAY;IAC3B,OAAO,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAOD,UAAU,iBAAiB;IACzB,KAAK,EAAE,CAAC,OAAO,EAAE,YAAY,KAAK,IAAI,CAAC;CACxC;AAID,wBAAgB,QAAQ,IAAI,iBAAiB,CAM5C;AAID,MAAM,WAAW,kBAAkB;IACjC,QAAQ,CAAC,EAAE,iBAAiB,CAAC;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,aAAa;8BAAkC,kBAAkB;;CAqC7E,CAAC;AAwDF,MAAM,WAAW,UACf,SAAQ,IAAI,CAAC,GAAG,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,QAAQ,CAAC;IAC1D,oBAAoB;IACpB,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,yBAAyB;IACzB,OAAO,EAAE,MAAM,CAAC;IAChB,4CAA4C;IAC5C,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;CACxB;AAED,eAAO,MAAM,KAAK;;EAsCjB,CAAC"}

package/dist/css/strand-ui.css

@@ -11,34 +11,45 @@
   justify-content: space-between;
   width: 100%;
   padding: var(--strand-space-6);
-  padding-left: var(--strand-space-5);
   border-radius: var(--strand-radius-md);
-  border-left: 4px solid transparent;
   font-family: var(--strand-font-sans);
   font-size: var(--strand-text-sm);
+  background: var(--strand-surface-recessed);
 }
 
-/* ── Status variants ── */
+/* ── Status variants (neutral background, status color on prefix only) ── */
 .strand-alert--info {
-  background: var(--strand-blue-glow);
-  border-left-color: var(--strand-blue-primary);
+  background: var(--strand-surface-recessed);
 }
 
 .strand-alert--success {
-  background: rgba(34, 197, 94, 0.08);
-  border-left-color: var(--strand-green-positive);
+  background: var(--strand-surface-recessed);
 }
 
 .strand-alert--warning {
-  background: rgba(245, 158, 11, 0.08);
-  border-left-color: var(--strand-amber-caution);
+  background: var(--strand-surface-recessed);
 }
 
 .strand-alert--error {
-  background: rgba(239, 68, 68, 0.08);
-  border-left-color: var(--strand-red-alert);
+  background: var(--strand-surface-recessed);
+}
+
+/* ── Status prefix ── */
+.strand-alert__status {
+  font-family: var(--strand-font-mono);
+  font-size: var(--strand-text-xs);
+  font-weight: var(--strand-weight-semibold);
+  letter-spacing: var(--strand-tracking-wider);
+  text-transform: uppercase;
+  margin-right: var(--strand-space-3);
+  flex-shrink: 0;
 }
 
+.strand-alert--info .strand-alert__status { color: var(--strand-blue-primary); }
+.strand-alert--success .strand-alert__status { color: var(--strand-teal-vital); }
+.strand-alert--warning .strand-alert__status { color: var(--strand-amber-caution); }
+.strand-alert--error .strand-alert__status { color: var(--strand-red-alert); }
+
 /* ── Content ── */
 .strand-alert__content {
   flex: 1;
@@ -51,8 +62,8 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  width: 24px;
-  height: 24px;
+  width: var(--strand-space-6);
+  height: var(--strand-space-6);
   margin-left: var(--strand-space-4);
   padding: 0;
   border: none;
@@ -130,8 +141,8 @@
 }
 
 .strand-avatar--xl {
-  width: 64px;
-  height: 64px;
+  width: var(--strand-space-16);
+  height: var(--strand-space-16);
   font-size: var(--strand-text-lg);
 }
 
@@ -304,13 +315,13 @@
 .strand-btn--sm {
   padding: var(--strand-space-1) var(--strand-space-3);
   font-size: var(--strand-text-sm);
-  min-height: 32px;
+  min-height: var(--strand-touch-target);
 }
 
 .strand-btn--md {
   padding: calc(var(--strand-space-2) + var(--strand-space-1) / 2) var(--strand-space-5);
   font-size: var(--strand-text-sm);
-  min-height: 40px;
+  min-height: var(--strand-touch-target);
 }
 
 .strand-btn--lg {
@@ -322,12 +333,12 @@
 /* ── Icon-only ── */
 .strand-btn--icon-only.strand-btn--sm {
   padding: var(--strand-space-1);
-  min-width: 32px;
+  min-width: var(--strand-touch-target);
 }
 
 .strand-btn--icon-only.strand-btn--md {
   padding: var(--strand-space-2);
-  min-width: 40px;
+  min-width: var(--strand-touch-target);
 }
 
 .strand-btn--icon-only.strand-btn--lg {
@@ -541,6 +552,7 @@
   display: inline-flex;
   align-items: center;
   gap: var(--strand-space-2);
+  min-height: var(--strand-touch-target);
   cursor: pointer;
   user-select: none;
   font-family: var(--strand-font-sans);
@@ -567,8 +579,8 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 18px;
-  height: 18px;
+  width: var(--strand-control-size);
+  height: var(--strand-control-size);
   border: 1px solid var(--strand-gray-200);
   border-radius: var(--strand-radius-sm);
   background: var(--strand-surface-elevated);
@@ -660,7 +672,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);
+  box-shadow: inset 0 1px 3px rgba(15, 23, 42, 0.06); /* strand-blue-abyss at 6% opacity */
   border-radius: var(--strand-radius-lg);
   padding: var(--strand-space-3) var(--strand-space-4);
   overflow-x: auto;
@@ -893,10 +905,12 @@
 
 /* ── Label ── */
 .strand-form-field__label {
-  font-family: var(--strand-font-sans);
-  font-size: var(--strand-text-sm);
+  font-family: var(--strand-font-mono);
+  font-size: var(--strand-text-xs);
   font-weight: var(--strand-weight-medium);
-  color: var(--strand-gray-700);
+  letter-spacing: var(--strand-tracking-widest);
+  text-transform: uppercase;
+  color: var(--strand-gray-500);
   line-height: var(--strand-leading-snug);
 }
 
@@ -1051,6 +1065,45 @@
 }
 
 
+/* InstrumentViewport */
+/*! Strand UI | MIT License | dillingerstaffing.com */
+
+.strand-instrument-viewport {
+  background: var(--strand-blue-abyss);
+  color: var(--strand-gray-100);
+  border-radius: var(--strand-radius-lg);
+  overflow: hidden;
+  position: relative;
+}
+
+.strand-instrument-viewport__label {
+  color: var(--strand-gray-400);
+  font-family: var(--strand-font-mono);
+  font-size: var(--strand-text-xs);
+  font-weight: var(--strand-weight-medium);
+  letter-spacing: var(--strand-tracking-widest);
+  text-transform: uppercase;
+}
+
+.strand-instrument-viewport__value {
+  color: var(--strand-on-blue-primary);
+  font-family: var(--strand-font-mono);
+  font-variant-numeric: tabular-nums;
+}
+
+/* Optional grid overlay */
+.strand-instrument-viewport--grid::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background:
+    linear-gradient(rgba(59, 142, 246, 0.04) 1px, transparent 1px),
+    linear-gradient(90deg, rgba(59, 142, 246, 0.04) 1px, transparent 1px);
+  background-size: var(--strand-viewport-grid-size) var(--strand-viewport-grid-size);
+  pointer-events: none;
+}
+
+
 /* Link */
 /*! Strand UI | MIT License | dillingerstaffing.com */
 
@@ -1091,7 +1144,7 @@
 .strand-nav {
   position: relative;
   width: 100%;
-  height: 64px;
+  height: var(--strand-nav-height);
   background: var(--strand-surface-elevated);
   border-bottom: 1px solid var(--strand-gray-200);
   font-family: var(--strand-font-sans);
@@ -1252,7 +1305,7 @@
 
   .strand-nav {
     height: auto;
-    min-height: 64px;
+    min-height: var(--strand-nav-height);
   }
 }
 
@@ -1370,6 +1423,7 @@
   display: inline-flex;
   align-items: center;
   gap: var(--strand-space-2);
+  min-height: var(--strand-touch-target);
   cursor: pointer;
   user-select: none;
   font-family: var(--strand-font-sans);
@@ -1396,8 +1450,8 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 18px;
-  height: 18px;
+  width: var(--strand-control-size);
+  height: var(--strand-control-size);
   border: 1px solid var(--strand-gray-200);
   border-radius: var(--strand-radius-full);
   background: var(--strand-surface-elevated);
@@ -1463,6 +1517,38 @@
 }
 
 
+/* ScrollReveal */
+/*! Strand UI | MIT License | dillingerstaffing.com */
+
+.strand-reveal {
+  opacity: 0;
+  transform: translateY(24px);
+  transition: opacity var(--strand-duration-glacial) var(--strand-ease-out-expo),
+              transform var(--strand-duration-glacial) var(--strand-ease-out-expo);
+}
+
+.strand-reveal--visible {
+  opacity: 1;
+  transform: translateY(0);
+}
+
+/* Stagger children */
+.strand-reveal-group > .strand-reveal:nth-child(1) { transition-delay: 0ms; }
+.strand-reveal-group > .strand-reveal:nth-child(2) { transition-delay: var(--strand-stagger-delay); }
+.strand-reveal-group > .strand-reveal:nth-child(3) { transition-delay: calc(var(--strand-stagger-delay) * 2); }
+.strand-reveal-group > .strand-reveal:nth-child(4) { transition-delay: calc(var(--strand-stagger-delay) * 3); }
+.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); }
+
+@media (prefers-reduced-motion: reduce) {
+  .strand-reveal {
+    opacity: 1;
+    transform: none;
+    transition: none;
+  }
+}
+
+
 /* Section */
 /*! Strand UI | MIT License | dillingerstaffing.com */
 
@@ -1650,14 +1736,15 @@
   transition: background var(--strand-duration-fast) var(--strand-ease-out-quart);
 }
 
-/* ── Thumb: Webkit ── */
+/* ── Thumb: Webkit (44px touch target, 20px visual) ── */
 .strand-slider__field::-webkit-slider-thumb {
   appearance: none;
   width: 20px;
   height: 20px;
   background: var(--strand-blue-primary);
-  border: 2px solid var(--strand-surface-elevated);
+  border: 12px solid transparent;
   border-radius: var(--strand-radius-full);
+  background-clip: padding-box;
   cursor: pointer;
   box-shadow: var(--strand-elevation-1);
   transition:
@@ -1667,21 +1754,24 @@
 
 .strand-slider__field:hover:not(:disabled)::-webkit-slider-thumb {
   background: var(--strand-blue-vivid);
+  background-clip: padding-box;
   transform: scale(1.15);
 }
 
 .strand-slider__field:active:not(:disabled)::-webkit-slider-thumb {
   background: var(--strand-blue-deep);
+  background-clip: padding-box;
   transform: scale(1.05);
 }
 
-/* ── Thumb: Firefox ── */
+/* ── Thumb: Firefox (44px touch target, 20px visual) ── */
 .strand-slider__field::-moz-range-thumb {
   width: 20px;
   height: 20px;
   background: var(--strand-blue-primary);
-  border: 2px solid var(--strand-surface-elevated);
+  border: 12px solid transparent;
   border-radius: var(--strand-radius-full);
+  background-clip: padding-box;
   cursor: pointer;
   box-shadow: var(--strand-elevation-1);
   transition:
@@ -1691,11 +1781,13 @@
 
 .strand-slider__field:hover:not(:disabled)::-moz-range-thumb {
   background: var(--strand-blue-vivid);
+  background-clip: padding-box;
   transform: scale(1.15);
 }
 
 .strand-slider__field:active:not(:disabled)::-moz-range-thumb {
   background: var(--strand-blue-deep);
+  background-clip: padding-box;
   transform: scale(1.05);
 }
 
@@ -1883,6 +1975,7 @@
   display: inline-flex;
   align-items: center;
   gap: var(--strand-space-2);
+  min-height: var(--strand-touch-target);
   cursor: pointer;
   user-select: none;
   font-family: var(--strand-font-sans);
@@ -2065,7 +2158,7 @@
 .strand-tabs [role="tablist"] {
   display: flex;
   gap: var(--strand-space-1);
-  border-bottom: 1px solid var(--strand-gray-400);
+  border-bottom: 1px solid var(--strand-gray-200);
 }
 
 /* ── Tab button ── */
@@ -2137,7 +2230,7 @@
 }
 
 .strand-tag--solid.strand-tag--teal {
-  background: rgba(20, 184, 166, 0.1);
+  background: var(--strand-surface-recessed);
   color: var(--strand-on-teal-tint);
 }
 
@@ -2147,12 +2240,12 @@
 }
 
 .strand-tag--solid.strand-tag--amber {
-  background: rgba(245, 158, 11, 0.1);
+  background: var(--strand-surface-recessed);
   color: var(--strand-on-amber-tint);
 }
 
 .strand-tag--solid.strand-tag--red {
-  background: rgba(239, 68, 68, 0.1);
+  background: var(--strand-surface-recessed);
   color: var(--strand-on-red-tint);
 }
 
@@ -2321,7 +2414,6 @@
   padding: var(--strand-space-4) var(--strand-space-5);
   background: var(--strand-surface-elevated);
   border-radius: var(--strand-radius-lg);
-  border-left: 4px solid transparent;
   box-shadow: var(--strand-elevation-3);
   font-family: var(--strand-font-sans);
   font-size: var(--strand-text-sm);
@@ -2329,22 +2421,21 @@
   animation: strand-toast-in var(--strand-duration-normal) var(--strand-ease-out-expo);
 }
 
-/* ── Status accents ── */
-.strand-toast--info {
-  border-left-color: var(--strand-blue-primary);
-}
-
-.strand-toast--success {
-  border-left-color: var(--strand-green-positive);
-}
-
-.strand-toast--warning {
-  border-left-color: var(--strand-amber-caution);
+/* ── Status prefix ── */
+.strand-toast__status {
+  font-family: var(--strand-font-mono);
+  font-size: var(--strand-text-xs);
+  font-weight: var(--strand-weight-semibold);
+  letter-spacing: var(--strand-tracking-wider);
+  text-transform: uppercase;
+  margin-right: var(--strand-space-3);
+  flex-shrink: 0;
 }
 
-.strand-toast--error {
-  border-left-color: var(--strand-red-alert);
-}
+.strand-toast--info .strand-toast__status { color: var(--strand-blue-primary); }
+.strand-toast--success .strand-toast__status { color: var(--strand-teal-vital); }
+.strand-toast--warning .strand-toast__status { color: var(--strand-amber-caution); }
+.strand-toast--error .strand-toast__status { color: var(--strand-red-alert); }
 
 /* ── Message ── */
 .strand-toast__message {
@@ -2359,8 +2450,8 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  width: 24px;
-  height: 24px;
+  width: var(--strand-space-6);
+  height: var(--strand-space-6);
   margin-left: var(--strand-space-3);
   padding: 0;
   border: none;

package/dist/index.d.ts

@@ -63,4 +63,8 @@ export { Spinner } from "./components/Spinner/index.js";
 export type { SpinnerProps } from "./components/Spinner/index.js";
 export { Skeleton } from "./components/Skeleton/index.js";
 export type { SkeletonProps } from "./components/Skeleton/index.js";
+export { InstrumentViewport } from "./components/InstrumentViewport/index.js";
+export type { InstrumentViewportProps } from "./components/InstrumentViewport/index.js";
+export { ScrollReveal } from "./components/ScrollReveal/index.js";
+export type { ScrollRevealProps } from "./components/ScrollReveal/index.js";
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}