@dillingerstaffing/strand-ui 0.5.1 → 0.7.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dillingerstaffing/strand-ui",
-  "version": "0.5.1",
+  "version": "0.7.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.5.1"
+    "@dillingerstaffing/strand": "^0.7.0"
   },
   "devDependencies": {
     "@testing-library/preact": "^3.2.0",

package/src/__tests__/build-output.test.ts

@@ -44,6 +44,7 @@ describe("Build output", () => {
       ".strand-nav", ".strand-toast", ".strand-alert",
       ".strand-dialog", ".strand-tooltip", ".strand-progress",
       ".strand-spinner", ".strand-skeleton",
+      ".strand-instrument-viewport", ".strand-reveal",
     ];
     for (const cls of expectedClasses) {
       expect(css, `Missing CSS class: ${cls}`).toContain(cls);

package/src/components/Alert/Alert.css

@@ -8,34 +8,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;
@@ -48,8 +59,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;

package/src/components/Alert/Alert.test.tsx

@@ -79,6 +79,36 @@ describe("Alert", () => {
     expect(queryByLabelText("Dismiss")).toBeNull();
   });
 
+  // ── Status prefix ──
+
+  it("renders status prefix for info", () => {
+    const { container } = render(<Alert status="info">Info</Alert>);
+    const status = container.querySelector(".strand-alert__status");
+    expect(status).toBeTruthy();
+    expect(status!.textContent).toBe("INFO");
+  });
+
+  it("renders status prefix for success as COMPLETE", () => {
+    const { container } = render(<Alert status="success">OK</Alert>);
+    const status = container.querySelector(".strand-alert__status");
+    expect(status).toBeTruthy();
+    expect(status!.textContent).toBe("COMPLETE");
+  });
+
+  it("renders status prefix for warning", () => {
+    const { container } = render(<Alert status="warning">Warn</Alert>);
+    const status = container.querySelector(".strand-alert__status");
+    expect(status).toBeTruthy();
+    expect(status!.textContent).toBe("WARNING");
+  });
+
+  it("renders status prefix for error", () => {
+    const { container } = render(<Alert status="error">Fail</Alert>);
+    const status = container.querySelector(".strand-alert__status");
+    expect(status).toBeTruthy();
+    expect(status!.textContent).toBe("ERROR");
+  });
+
   // ── Custom className ──
 
   it("merges custom className", () => {

package/src/components/Alert/Alert.tsx

@@ -38,8 +38,12 @@ export const Alert = forwardRef<HTMLDivElement, AlertProps>(
       .filter(Boolean)
       .join(" ");
 
+    const statusLabel =
+      status === "success" ? "COMPLETE" : status.toUpperCase();
+
     return (
       <div ref={ref} className={classes} role={role} {...rest}>
+        <span className="strand-alert__status">{statusLabel}</span>
         <div className="strand-alert__content">{children}</div>
         {dismissible && (
           <button

package/src/components/Avatar/Avatar.css

@@ -49,7 +49,7 @@
 }
 
 .strand-avatar--xl {
-  width: 64px;
-  height: 64px;
+  width: var(--strand-space-16);
+  height: var(--strand-space-16);
   font-size: var(--strand-text-lg);
 }

package/src/components/Button/Button.css

@@ -37,13 +37,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 {
@@ -55,12 +55,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 {

package/src/components/Checkbox/Checkbox.css

@@ -5,6 +5,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);
@@ -31,8 +32,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);

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);
+  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;

package/src/components/FormField/FormField.css

@@ -9,10 +9,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);
 }
 

package/src/components/InstrumentViewport/InstrumentViewport.css

@@ -0,0 +1,36 @@
+/*! 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;
+}

package/src/components/InstrumentViewport/InstrumentViewport.test.tsx

@@ -0,0 +1,70 @@
+import { describe, expect, it } from "vitest";
+import { render } from "@testing-library/preact";
+import { InstrumentViewport } from "./InstrumentViewport.js";
+
+describe("InstrumentViewport", () => {
+  // ── Rendering ──
+
+  it("renders a div element", () => {
+    const { container } = render(
+      <InstrumentViewport>Content</InstrumentViewport>,
+    );
+    const el = container.firstElementChild;
+    expect(el?.tagName).toBe("DIV");
+  });
+
+  it("applies base class", () => {
+    const { container } = render(
+      <InstrumentViewport>Content</InstrumentViewport>,
+    );
+    const el = container.firstElementChild;
+    expect(el?.className).toContain("strand-instrument-viewport");
+  });
+
+  it("renders children", () => {
+    const { getByText } = render(
+      <InstrumentViewport>Hello viewport</InstrumentViewport>,
+    );
+    expect(getByText("Hello viewport")).toBeTruthy();
+  });
+
+  // ── Grid modifier ──
+
+  it("does not apply grid class by default", () => {
+    const { container } = render(
+      <InstrumentViewport>Content</InstrumentViewport>,
+    );
+    const el = container.firstElementChild;
+    expect(el?.className).not.toContain("strand-instrument-viewport--grid");
+  });
+
+  it("applies grid modifier class when grid prop is true", () => {
+    const { container } = render(
+      <InstrumentViewport grid>Content</InstrumentViewport>,
+    );
+    const el = container.firstElementChild;
+    expect(el?.className).toContain("strand-instrument-viewport--grid");
+  });
+
+  // ── Custom className ──
+
+  it("merges custom className with component classes", () => {
+    const { container } = render(
+      <InstrumentViewport className="custom">Content</InstrumentViewport>,
+    );
+    const el = container.firstElementChild;
+    expect(el?.className).toContain("strand-instrument-viewport");
+    expect(el?.className).toContain("custom");
+  });
+
+  // ── Props forwarding ──
+
+  it("forwards additional props", () => {
+    const { container } = render(
+      <InstrumentViewport id="vp-1" data-testid="viewport">
+        Content
+      </InstrumentViewport>,
+    );
+    expect(container.firstElementChild?.getAttribute("id")).toBe("vp-1");
+  });
+});

package/src/components/InstrumentViewport/InstrumentViewport.tsx

@@ -0,0 +1,31 @@
+/*! Strand UI | MIT License | dillingerstaffing.com */
+
+import type { JSX } from "preact";
+import { forwardRef } from "preact/compat";
+
+export interface InstrumentViewportProps
+  extends JSX.HTMLAttributes<HTMLDivElement> {
+  /** Show subtle grid overlay */
+  grid?: boolean;
+}
+
+export const InstrumentViewport = forwardRef<
+  HTMLDivElement,
+  InstrumentViewportProps
+>(({ grid = false, className = "", children, ...rest }, ref) => {
+  const classes = [
+    "strand-instrument-viewport",
+    grid ? "strand-instrument-viewport--grid" : "",
+    className,
+  ]
+    .filter(Boolean)
+    .join(" ");
+
+  return (
+    <div ref={ref} className={classes} {...rest}>
+      {children}
+    </div>
+  );
+});
+
+InstrumentViewport.displayName = "InstrumentViewport";

package/src/components/InstrumentViewport/index.ts

@@ -0,0 +1,2 @@
+export { InstrumentViewport } from "./InstrumentViewport.js";
+export type { InstrumentViewportProps } from "./InstrumentViewport.js";

package/src/components/Nav/Nav.css

@@ -4,7 +4,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);
@@ -165,7 +165,7 @@
 
   .strand-nav {
     height: auto;
-    min-height: 64px;
+    min-height: var(--strand-nav-height);
   }
 }
 

package/src/components/Radio/Radio.css

@@ -5,6 +5,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);
@@ -31,8 +32,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);

package/src/components/ScrollReveal/ScrollReveal.css

@@ -0,0 +1,29 @@
+/*! 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;
+  }
+}

package/src/components/ScrollReveal/ScrollReveal.test.tsx

@@ -0,0 +1,68 @@
+import { describe, expect, it } from "vitest";
+import { render } from "@testing-library/preact";
+import { ScrollReveal } from "./ScrollReveal.js";
+
+describe("ScrollReveal", () => {
+  // ── Rendering ──
+
+  it("renders a div element", () => {
+    const { container } = render(<ScrollReveal>Content</ScrollReveal>);
+    const el = container.firstElementChild;
+    expect(el?.tagName).toBe("DIV");
+  });
+
+  it("applies strand-reveal class", () => {
+    const { container } = render(<ScrollReveal>Content</ScrollReveal>);
+    const el = container.firstElementChild;
+    expect(el?.className).toContain("strand-reveal");
+  });
+
+  it("renders children", () => {
+    const { getByText } = render(<ScrollReveal>Hello reveal</ScrollReveal>);
+    expect(getByText("Hello reveal")).toBeTruthy();
+  });
+
+  it("does not apply visible class initially", () => {
+    const { container } = render(<ScrollReveal>Content</ScrollReveal>);
+    const el = container.firstElementChild;
+    expect(el?.className).not.toContain("strand-reveal--visible");
+  });
+
+  // ── Custom className ──
+
+  it("merges custom className with component classes", () => {
+    const { container } = render(
+      <ScrollReveal className="custom">Content</ScrollReveal>,
+    );
+    const el = container.firstElementChild;
+    expect(el?.className).toContain("strand-reveal");
+    expect(el?.className).toContain("custom");
+  });
+
+  // ── Props forwarding ──
+
+  it("forwards additional props", () => {
+    const { container } = render(
+      <ScrollReveal id="reveal-1" data-testid="reveal">
+        Content
+      </ScrollReveal>,
+    );
+    expect(container.firstElementChild?.getAttribute("id")).toBe("reveal-1");
+  });
+
+  // ── Props acceptance ──
+
+  it("accepts threshold prop without error", () => {
+    const { container } = render(
+      <ScrollReveal threshold={0.5}>Content</ScrollReveal>,
+    );
+    expect(container.firstElementChild).toBeTruthy();
+  });
+
+  it("accepts once prop without error", () => {
+    const { container } = render(
+      <ScrollReveal once={false}>Content</ScrollReveal>,
+    );
+    expect(container.firstElementChild).toBeTruthy();
+  });
+});

package/src/components/ScrollReveal/ScrollReveal.tsx

@@ -0,0 +1,64 @@
+/*! Strand UI | MIT License | dillingerstaffing.com */
+
+import type { JSX } from "preact";
+import { useEffect, useRef } from "preact/hooks";
+import { forwardRef } from "preact/compat";
+
+export interface ScrollRevealProps
+  extends JSX.HTMLAttributes<HTMLDivElement> {
+  /** IntersectionObserver visibility threshold (0-1) */
+  threshold?: number;
+  /** Only trigger reveal once */
+  once?: boolean;
+}
+
+export const ScrollReveal = forwardRef<HTMLDivElement, ScrollRevealProps>(
+  ({ threshold = 0.1, once = true, className = "", children, ...rest }, ref) => {
+    const innerRef = useRef<HTMLDivElement>(null);
+
+    const classes = ["strand-reveal", className].filter(Boolean).join(" ");
+
+    useEffect(() => {
+      const el = innerRef.current;
+      if (!el || typeof IntersectionObserver === "undefined") return;
+
+      const observer = new IntersectionObserver(
+        (entries) => {
+          for (const entry of entries) {
+            if (entry.isIntersecting) {
+              entry.target.classList.add("strand-reveal--visible");
+              if (once) {
+                observer.unobserve(entry.target);
+              }
+            } else if (!once) {
+              entry.target.classList.remove("strand-reveal--visible");
+            }
+          }
+        },
+        { threshold },
+      );
+
+      observer.observe(el);
+
+      return () => {
+        observer.disconnect();
+      };
+    }, [threshold, once]);
+
+    return (
+      <div
+        ref={(node) => {
+          (innerRef as { current: HTMLDivElement | null }).current = node;
+          if (typeof ref === "function") ref(node);
+          else if (ref) (ref as { current: HTMLDivElement | null }).current = node;
+        }}
+        className={classes}
+        {...rest}
+      >
+        {children}
+      </div>
+    );
+  },
+);
+
+ScrollReveal.displayName = "ScrollReveal";

package/src/components/ScrollReveal/index.ts

@@ -0,0 +1,2 @@
+export { ScrollReveal } from "./ScrollReveal.js";
+export type { ScrollRevealProps } from "./ScrollReveal.js";

package/src/components/Slider/Slider.css

@@ -20,14 +20,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:
@@ -37,21 +38,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:
@@ -61,11 +65,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);
 }
 

package/src/components/Switch/Switch.css

@@ -5,6 +5,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);

package/src/components/Tabs/Tabs.css

@@ -4,7 +4,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 ── */