@dillingerstaffing/strand-ui 0.6.0 → 0.7.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dillingerstaffing/strand-ui",
-  "version": "0.6.0",
+  "version": "0.7.1",
   "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.6.0"
+    "@dillingerstaffing/strand": "^0.7.1"
   },
   "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/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

@@ -35,32 +35,32 @@
 
 /* ── Sizes ── */
 .strand-btn--sm {
-  padding: var(--strand-space-1) var(--strand-space-3);
+  padding: var(--strand-space-2) var(--strand-space-5);
   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);
+  padding: var(--strand-space-3) var(--strand-space-8);
   font-size: var(--strand-text-sm);
-  min-height: 40px;
+  min-height: var(--strand-touch-target);
 }
 
 .strand-btn--lg {
-  padding: var(--strand-space-3) var(--strand-space-6);
+  padding: var(--strand-space-3) var(--strand-space-10);
   font-size: var(--strand-text-base);
-  min-height: 48px;
+  min-height: var(--strand-touch-target);
 }
 
 /* ── 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 {
@@ -75,18 +75,18 @@
 
 /* ── Primary variant ── */
 .strand-btn--primary {
-  background: var(--strand-blue-primary);
-  color: var(--strand-on-blue-primary);
+  background: var(--strand-blue-deep);
+  color: var(--strand-on-blue-deep);
 }
 
 .strand-btn--primary:hover:not(:disabled) {
-  background: var(--strand-blue-vivid);
+  background: var(--strand-blue-midnight);
   transform: translateY(-1px);
   box-shadow: var(--strand-hover-shadow-primary);
 }
 
 .strand-btn--primary:active:not(:disabled) {
-  background: var(--strand-blue-deep);
+  background: var(--strand-blue-abyss);
 }
 
 /* ── Secondary variant ── */

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/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/index.ts

@@ -100,3 +100,11 @@ export type { SpinnerProps } from "./components/Spinner/index.js";
 
 export { Skeleton } from "./components/Skeleton/index.js";
 export type { SkeletonProps } from "./components/Skeleton/index.js";
+
+// Surfaces
+export { InstrumentViewport } from "./components/InstrumentViewport/index.js";
+export type { InstrumentViewportProps } from "./components/InstrumentViewport/index.js";
+
+// Animation
+export { ScrollReveal } from "./components/ScrollReveal/index.js";
+export type { ScrollRevealProps } from "./components/ScrollReveal/index.js";