@dillingerstaffing/strand-ui 0.1.1 → 0.2.0

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-/*! Strand UI v0.1.0 | MIT License | dillingerstaffing.com */
+/*! Strand UI v0.2.0 | MIT License | dillingerstaffing.com */
 export { Button } from "./components/Button/index.js";
 export type { ButtonProps } from "./components/Button/index.js";
 export { Input } from "./components/Input/index.js";

package/package.json

@@ -1,9 +1,21 @@
 {
   "name": "@dillingerstaffing/strand-ui",
-  "version": "0.1.1",
+  "version": "0.2.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",
+  "keywords": [
+    "design-system",
+    "ui-components",
+    "preact",
+    "react",
+    "css-custom-properties",
+    "design-tokens",
+    "accessibility",
+    "wcag",
+    "aria",
+    "component-library"
+  ],
   "homepage": "https://dillingerstaffing.com/labs/strand",
   "repository": {
     "type": "git",
@@ -24,6 +36,7 @@
     },
     "./css/strand-ui.css": "./dist/css/strand-ui.css"
   },
+  "style": "./dist/css/strand-ui.css",
   "files": [
     "dist/",
     "src/"
@@ -40,7 +53,7 @@
     }
   },
   "dependencies": {
-    "@dillingerstaffing/strand": "0.1.1"
+    "@dillingerstaffing/strand": "0.2.0"
   },
   "devDependencies": {
     "@testing-library/preact": "^3.2.0",

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

@@ -74,4 +74,127 @@ describe("Build output", () => {
     expect(existsSync(resolve(__dirname, "../components/Button/Button.css"))).toBe(true);
     expect(existsSync(resolve(__dirname, "../components/Dialog/Dialog.tsx"))).toBe(true);
   });
+
+  it("CSS has no hardcoded duration values", () => {
+    const css = readFileSync(resolve(distDir, "css/strand-ui.css"), "utf-8");
+    const withoutComments = css.replace(/\/\*[\s\S]*?\*\//g, "");
+    // Strip @keyframes blocks entirely (durations inside keyframes are acceptable)
+    const withoutKeyframes = withoutComments.replace(/@keyframes\s+[\w-]+\s*\{[^}]*(?:\{[^}]*\}[^}]*)*\}/g, "");
+    // Strip animation shorthand lines (duration is part of the shorthand spec, not standalone)
+    const withoutAnimations = withoutKeyframes.replace(/animation:.*$/gm, "");
+    // Strip var() references (tokenized durations are fine)
+    const withoutVars = withoutAnimations.replace(/var\([^)]+\)/g, "VAR_REF");
+
+    const durationPattern = /(?<!\w)(150ms|250ms|400ms|700ms|1\.8s|1\.5s|1\.2s|0\.8s)\b/g;
+    const matches: string[] = [];
+    let match: RegExpExecArray | null;
+    while ((match = durationPattern.exec(withoutVars)) !== null) {
+      matches.push(match[0]);
+    }
+
+    // Exception: 75ms in transition-duration for active/pressed states (Part XII spec)
+    const nonExemptPattern = /(?<!\w)75ms\b/g;
+    const lines = withoutVars.split("\n");
+    for (const line of lines) {
+      if (nonExemptPattern.test(line) && !line.includes("transition-duration")) {
+        matches.push("75ms (outside transition-duration)");
+      }
+      nonExemptPattern.lastIndex = 0;
+    }
+
+    expect(matches, `Hardcoded duration values found: ${matches.join(", ")}`).toEqual([]);
+  });
+
+  it("CSS has no hardcoded easing values", () => {
+    const css = readFileSync(resolve(distDir, "css/strand-ui.css"), "utf-8");
+    const withoutComments = css.replace(/\/\*[\s\S]*?\*\//g, "");
+    // Strip var() references
+    const withoutVars = withoutComments.replace(/var\([^)]+\)/g, "VAR_REF");
+
+    const violations: string[] = [];
+
+    // Check for raw cubic-bezier()
+    const cubicBezierPattern = /cubic-bezier\([^)]+\)/g;
+    let match: RegExpExecArray | null;
+    while ((match = cubicBezierPattern.exec(withoutVars)) !== null) {
+      violations.push(match[0]);
+    }
+
+    // Check for bare easing keywords (not inside var() and not "linear")
+    // linear is acceptable for spinners/continuous rotation
+    const easingKeywordPattern = /\b(ease-in-out|ease-in|ease-out)\b/g;
+    while ((match = easingKeywordPattern.exec(withoutVars)) !== null) {
+      violations.push(match[0]);
+    }
+
+    expect(violations, `Hardcoded easing values found: ${violations.join(", ")}`).toEqual([]);
+  });
+
+  it("CSS has no hardcoded border-radius pixel values", () => {
+    const css = readFileSync(resolve(distDir, "css/strand-ui.css"), "utf-8");
+    const withoutComments = css.replace(/\/\*[\s\S]*?\*\//g, "");
+    // Strip var() references
+    const withoutVars = withoutComments.replace(/var\([^)]+\)/g, "VAR_REF");
+
+    // Match border-radius with raw pixel values
+    const borderRadiusPattern = /border-radius:\s*\d+px/g;
+    const matches: string[] = [];
+    let match: RegExpExecArray | null;
+    while ((match = borderRadiusPattern.exec(withoutVars)) !== null) {
+      matches.push(match[0]);
+    }
+
+    expect(matches, `Hardcoded border-radius values found: ${matches.join(", ")}`).toEqual([]);
+  });
+
+  it("All interactive component CSS files include :focus-visible", () => {
+    const interactiveComponents = [
+      "Button", "Link", "Card", "Checkbox", "Input", "Radio",
+      "Select", "Slider", "Switch", "Tabs", "Breadcrumb", "Nav", "Table",
+    ];
+
+    for (const name of interactiveComponents) {
+      const cssPath = resolve(__dirname, `../components/${name}/${name}.css`);
+      const css = readFileSync(cssPath, "utf-8");
+      // Compound inputs (Input, Select, Textarea) use :focus-within on the wrapper,
+      // which is equivalent for components with a visually hidden native input
+      const hasFocusHandling = css.includes(":focus-visible") || css.includes(":focus-within");
+      expect(hasFocusHandling, `${name}.css missing :focus-visible or :focus-within`).toBe(true);
+    }
+  });
+
+  it("All animated component CSS files include prefers-reduced-motion", () => {
+    const allComponents = [
+      "Alert", "Avatar", "Badge", "Breadcrumb", "Button", "Card",
+      "Checkbox", "Container", "DataReadout", "Dialog", "Divider",
+      "FormField", "Grid", "Input", "Link", "Nav", "Progress", "Radio",
+      "Section", "Select", "Skeleton", "Slider", "Spinner", "Stack",
+      "Switch", "Table", "Tabs", "Tag", "Textarea", "Toast", "Tooltip",
+    ];
+
+    for (const name of allComponents) {
+      const cssPath = resolve(__dirname, `../components/${name}/${name}.css`);
+      const css = readFileSync(cssPath, "utf-8");
+      const usesAnimation = /\banimation\b/.test(css) || /\btransition\b/.test(css);
+      if (usesAnimation) {
+        expect(css, `${name}.css uses animation/transition but missing prefers-reduced-motion`).toContain("prefers-reduced-motion");
+      }
+    }
+  });
+
+  it("All component CSS files start with MIT license banner", () => {
+    const allComponents = [
+      "Alert", "Avatar", "Badge", "Breadcrumb", "Button", "Card",
+      "Checkbox", "Container", "DataReadout", "Dialog", "Divider",
+      "FormField", "Grid", "Input", "Link", "Nav", "Progress", "Radio",
+      "Section", "Select", "Skeleton", "Slider", "Spinner", "Stack",
+      "Switch", "Table", "Tabs", "Tag", "Textarea", "Toast", "Tooltip",
+    ];
+
+    for (const name of allComponents) {
+      const cssPath = resolve(__dirname, `../components/${name}/${name}.css`);
+      const css = readFileSync(cssPath, "utf-8");
+      expect(css, `${name}.css missing MIT license banner`).toMatch(/^\/\*! Strand/);
+    }
+  });
 });

package/src/__tests__/design-language.test.ts

@@ -0,0 +1,137 @@
+import { describe, expect, it } from "vitest";
+import { readFileSync } from "node:fs";
+import { resolve } from "node:path";
+
+const componentDir = resolve(__dirname, "../components");
+
+const allComponents: { name: string; cssPath: string }[] = [
+  { name: "Alert", cssPath: resolve(componentDir, "Alert/Alert.css") },
+  { name: "Avatar", cssPath: resolve(componentDir, "Avatar/Avatar.css") },
+  { name: "Badge", cssPath: resolve(componentDir, "Badge/Badge.css") },
+  { name: "Breadcrumb", cssPath: resolve(componentDir, "Breadcrumb/Breadcrumb.css") },
+  { name: "Button", cssPath: resolve(componentDir, "Button/Button.css") },
+  { name: "Card", cssPath: resolve(componentDir, "Card/Card.css") },
+  { name: "Checkbox", cssPath: resolve(componentDir, "Checkbox/Checkbox.css") },
+  { name: "Container", cssPath: resolve(componentDir, "Container/Container.css") },
+  { name: "DataReadout", cssPath: resolve(componentDir, "DataReadout/DataReadout.css") },
+  { name: "Dialog", cssPath: resolve(componentDir, "Dialog/Dialog.css") },
+  { name: "Divider", cssPath: resolve(componentDir, "Divider/Divider.css") },
+  { name: "FormField", cssPath: resolve(componentDir, "FormField/FormField.css") },
+  { name: "Grid", cssPath: resolve(componentDir, "Grid/Grid.css") },
+  { name: "Input", cssPath: resolve(componentDir, "Input/Input.css") },
+  { name: "Link", cssPath: resolve(componentDir, "Link/Link.css") },
+  { name: "Nav", cssPath: resolve(componentDir, "Nav/Nav.css") },
+  { name: "Progress", cssPath: resolve(componentDir, "Progress/Progress.css") },
+  { name: "Radio", cssPath: resolve(componentDir, "Radio/Radio.css") },
+  { name: "Section", cssPath: resolve(componentDir, "Section/Section.css") },
+  { name: "Select", cssPath: resolve(componentDir, "Select/Select.css") },
+  { name: "Skeleton", cssPath: resolve(componentDir, "Skeleton/Skeleton.css") },
+  { name: "Slider", cssPath: resolve(componentDir, "Slider/Slider.css") },
+  { name: "Spinner", cssPath: resolve(componentDir, "Spinner/Spinner.css") },
+  { name: "Stack", cssPath: resolve(componentDir, "Stack/Stack.css") },
+  { name: "Switch", cssPath: resolve(componentDir, "Switch/Switch.css") },
+  { name: "Table", cssPath: resolve(componentDir, "Table/Table.css") },
+  { name: "Tabs", cssPath: resolve(componentDir, "Tabs/Tabs.css") },
+  { name: "Tag", cssPath: resolve(componentDir, "Tag/Tag.css") },
+  { name: "Textarea", cssPath: resolve(componentDir, "Textarea/Textarea.css") },
+  { name: "Toast", cssPath: resolve(componentDir, "Toast/Toast.css") },
+  { name: "Tooltip", cssPath: resolve(componentDir, "Tooltip/Tooltip.css") },
+];
+
+describe("CSS design language compliance", () => {
+  it("No component CSS uses raw hex colors except known exceptions", () => {
+    // Known exceptions: rgba() for Tag tint backgrounds and Alert status backgrounds
+    // (opacity variants without tokens yet)
+    const rgbaExemptComponents = ["Tag", "Alert"];
+    const violations: string[] = [];
+
+    for (const { name, cssPath } of allComponents) {
+      const css = readFileSync(cssPath, "utf-8");
+      const withoutComments = css.replace(/\/\*[\s\S]*?\*\//g, "");
+      // Strip var() references
+      const withoutVars = withoutComments.replace(/var\([^)]+\)/g, "VAR_REF");
+
+      // For exempted components, also strip rgba() calls
+      let searchable = withoutVars;
+      if (rgbaExemptComponents.includes(name)) {
+        searchable = searchable.replace(/rgba\([^)]+\)/g, "RGBA_REF");
+      }
+
+      const hexPattern = /#[0-9a-fA-F]{3,8}\b/g;
+      let match: RegExpExecArray | null;
+      while ((match = hexPattern.exec(searchable)) !== null) {
+        violations.push(`${name}: ${match[0]}`);
+      }
+    }
+
+    expect(violations, `Raw hex colors found:\n${violations.join("\n")}`).toEqual([]);
+  });
+
+  it("All component CSS uses only --strand- prefixed custom properties", () => {
+    const violations: string[] = [];
+
+    for (const { name, cssPath } of allComponents) {
+      const css = readFileSync(cssPath, "utf-8");
+      const withoutComments = css.replace(/\/\*[\s\S]*?\*\//g, "");
+
+      // Find all var() references
+      const varPattern = /var\(--([^)]+)\)/g;
+      let match: RegExpExecArray | null;
+      while ((match = varPattern.exec(withoutComments)) !== null) {
+        const propName = match[1];
+        if (!propName.startsWith("strand-")) {
+          violations.push(`${name}: var(--${propName})`);
+        }
+      }
+    }
+
+    expect(
+      violations,
+      `Non --strand- prefixed custom properties found:\n${violations.join("\n")}`,
+    ).toEqual([]);
+  });
+
+  it("Interactive components have correct hover transform", () => {
+    // Button and Card (interactive) should have translateY(-1px) or translateY(-2px)
+    const interactiveSpecs: { name: string; cssPath: string }[] = [
+      { name: "Button", cssPath: resolve(componentDir, "Button/Button.css") },
+      { name: "Card", cssPath: resolve(componentDir, "Card/Card.css") },
+    ];
+
+    for (const { name, cssPath } of interactiveSpecs) {
+      const css = readFileSync(cssPath, "utf-8");
+      const hasHoverTransform =
+        css.includes("translateY(-1px)") || css.includes("translateY(-2px)");
+      expect(
+        hasHoverTransform,
+        `${name} missing hover translateY(-1px) or translateY(-2px)`,
+      ).toBe(true);
+    }
+  });
+
+  it("Disabled states use opacity 0.4", () => {
+    // Components with :disabled or --disabled class
+    const componentsWithDisabled: { name: string; cssPath: string }[] = [
+      { name: "Button", cssPath: resolve(componentDir, "Button/Button.css") },
+      { name: "Checkbox", cssPath: resolve(componentDir, "Checkbox/Checkbox.css") },
+      { name: "Input", cssPath: resolve(componentDir, "Input/Input.css") },
+      { name: "Radio", cssPath: resolve(componentDir, "Radio/Radio.css") },
+      { name: "Select", cssPath: resolve(componentDir, "Select/Select.css") },
+      { name: "Slider", cssPath: resolve(componentDir, "Slider/Slider.css") },
+      { name: "Switch", cssPath: resolve(componentDir, "Switch/Switch.css") },
+      { name: "Textarea", cssPath: resolve(componentDir, "Textarea/Textarea.css") },
+    ];
+
+    for (const { name, cssPath } of componentsWithDisabled) {
+      const css = readFileSync(cssPath, "utf-8");
+      const hasDisabled = css.includes(":disabled") || css.includes("--disabled");
+      expect(hasDisabled, `${name} expected to have disabled styles`).toBe(true);
+
+      // Verify opacity: 0.4 is present
+      expect(
+        css,
+        `${name} disabled state should use opacity: 0.4`,
+      ).toContain("opacity: 0.4");
+    }
+  });
+});

package/src/__tests__/static.test.tsx

@@ -0,0 +1,60 @@
+import { describe, it, expect } from "vitest";
+import { render } from "@testing-library/preact";
+import { Button } from "../components/Button/index.js";
+
+describe("strand-static presentation mode", () => {
+  it("CSS file exists and is included in build output", async () => {
+    const fs = await import("node:fs");
+    const path = await import("node:path");
+    const staticPath = path.resolve(__dirname, "../../dist/css/strand-ui.css");
+    const content = fs.readFileSync(staticPath, "utf-8");
+    expect(content).toContain(".strand-static");
+    expect(content).toContain("pointer-events: none");
+  });
+
+  it("disabled button inside .strand-static has opacity override class", async () => {
+    const fs = await import("node:fs");
+    const path = await import("node:path");
+    const staticPath = path.resolve(__dirname, "../../dist/css/strand-ui.css");
+    const content = fs.readFileSync(staticPath, "utf-8");
+    expect(content).toContain(".strand-static [disabled]");
+    expect(content).toContain("opacity: 1");
+  });
+
+  it("strand-static overrides toast position", async () => {
+    const fs = await import("node:fs");
+    const path = await import("node:path");
+    const staticPath = path.resolve(__dirname, "../../dist/css/strand-ui.css");
+    const content = fs.readFileSync(staticPath, "utf-8");
+    expect(content).toContain(".strand-static .strand-toast");
+    expect(content).toContain("position: static");
+  });
+});
+
+describe("layout utility classes", () => {
+  it("Stack gap utilities exist in build output", async () => {
+    const fs = await import("node:fs");
+    const path = await import("node:path");
+    const cssPath = path.resolve(__dirname, "../../dist/css/strand-ui.css");
+    const content = fs.readFileSync(cssPath, "utf-8");
+    expect(content).toContain(".strand-stack--gap-4");
+    expect(content).toContain("var(--strand-space-4)");
+  });
+
+  it("Grid column utilities exist in build output", async () => {
+    const fs = await import("node:fs");
+    const path = await import("node:path");
+    const cssPath = path.resolve(__dirname, "../../dist/css/strand-ui.css");
+    const content = fs.readFileSync(cssPath, "utf-8");
+    expect(content).toContain(".strand-grid--cols-3");
+    expect(content).toContain("repeat(3, 1fr)");
+  });
+
+  it("Grid gap utilities exist in build output", async () => {
+    const fs = await import("node:fs");
+    const path = await import("node:path");
+    const cssPath = path.resolve(__dirname, "../../dist/css/strand-ui.css");
+    const content = fs.readFileSync(cssPath, "utf-8");
+    expect(content).toContain(".strand-grid--gap-4");
+  });
+});

package/src/components/Alert/Alert.css

@@ -7,7 +7,8 @@
   align-items: flex-start;
   justify-content: space-between;
   width: 100%;
-  padding: var(--strand-space-4);
+  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);
@@ -57,11 +58,18 @@
   color: var(--strand-gray-500);
   font-size: var(--strand-text-base);
   cursor: pointer;
-  transition: background var(--strand-duration-fast) ease,
-    color var(--strand-duration-fast) ease;
+  transition: background var(--strand-duration-fast) var(--strand-ease-out-quart),
+    color var(--strand-duration-fast) var(--strand-ease-out-quart);
 }
 
 .strand-alert__dismiss:hover {
   background: var(--strand-gray-100);
   color: var(--strand-gray-600);
 }
+
+/* ── Reduced motion ── */
+@media (prefers-reduced-motion: reduce) {
+  .strand-alert__dismiss {
+    transition: none;
+  }
+}

package/src/components/Badge/Badge.css

@@ -18,7 +18,7 @@
   justify-content: center;
   font-family: var(--strand-font-sans);
   font-weight: var(--strand-weight-semibold);
-  color: #fff;
+  color: var(--strand-on-blue-primary);
 }
 
 /* Position at top-right when wrapping children */

package/src/components/Breadcrumb/Breadcrumb.css

@@ -25,13 +25,18 @@
 .strand-breadcrumb__link {
   color: var(--strand-gray-500);
   text-decoration: none;
-  transition: color var(--strand-duration-fast) ease;
+  transition: color var(--strand-duration-fast) var(--strand-ease-out-quart);
 }
 
 .strand-breadcrumb__link:hover {
   color: var(--strand-gray-600);
 }
 
+.strand-breadcrumb__link:focus-visible {
+  outline: 2px solid var(--strand-blue-primary);
+  outline-offset: 2px;
+}
+
 .strand-breadcrumb__current {
   color: var(--strand-gray-600);
   font-weight: var(--strand-weight-medium);

package/src/components/Button/Button.css

@@ -16,11 +16,11 @@
   cursor: pointer;
   user-select: none;
   transition:
-    background var(--strand-duration-fast) ease,
-    border-color var(--strand-duration-fast) ease,
-    color var(--strand-duration-fast) ease,
+    background var(--strand-duration-fast) var(--strand-ease-out-quart),
+    border-color var(--strand-duration-fast) var(--strand-ease-out-quart),
+    color var(--strand-duration-fast) var(--strand-ease-out-quart),
     transform var(--strand-duration-fast) var(--strand-ease-out-expo),
-    box-shadow var(--strand-duration-fast) ease;
+    box-shadow var(--strand-duration-fast) var(--strand-ease-out-quart);
 }
 
 .strand-btn:active:not(:disabled) {
@@ -82,7 +82,7 @@
 .strand-btn--primary:hover:not(:disabled) {
   background: var(--strand-blue-vivid);
   transform: translateY(-1px);
-  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.2);
+  box-shadow: var(--strand-hover-shadow-primary);
 }
 
 .strand-btn--primary:active:not(:disabled) {
@@ -115,6 +115,7 @@
 
 .strand-btn--ghost:hover:not(:disabled) {
   background: var(--strand-blue-glow);
+  transform: translateY(-1px);
 }
 
 .strand-btn--ghost:active:not(:disabled) {
@@ -128,13 +129,13 @@
 }
 
 .strand-btn--danger:hover:not(:disabled) {
-  background: #DC2626;
+  background: var(--strand-red-alert-vivid);
   transform: translateY(-1px);
-  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.2);
+  box-shadow: var(--strand-hover-shadow-danger);
 }
 
 .strand-btn--danger:active:not(:disabled) {
-  background: #B91C1C;
+  background: var(--strand-red-alert-deep);
 }
 
 /* ── Loading state ── */
@@ -171,6 +172,12 @@
   gap: var(--strand-space-2);
 }
 
+/* ── Focus ring (Part XII: Accessibility Ring) ── */
+.strand-btn:focus-visible {
+  outline: 2px solid var(--strand-blue-primary);
+  outline-offset: 2px;
+}
+
 /* ── Reduced motion ── */
 @media (prefers-reduced-motion: reduce) {
   .strand-btn {

package/src/components/Card/Card.css

@@ -5,6 +5,9 @@
   border-radius: var(--strand-radius-lg);
   background: var(--strand-surface-elevated);
   font-family: var(--strand-font-sans);
+  overflow: hidden;
+  box-sizing: border-box;
+  max-width: 100%;
 }
 
 /* ── Variants ── */
@@ -36,15 +39,21 @@
 }
 
 .strand-card--pad-sm {
-  padding: var(--strand-space-3);
+  padding: var(--strand-space-4);
 }
 
 .strand-card--pad-md {
-  padding: var(--strand-space-5);
+  padding: var(--strand-space-6);
 }
 
 .strand-card--pad-lg {
-  padding: var(--strand-space-8);
+  padding: var(--strand-space-10);
+}
+
+/* ── Focus ring (interactive cards) ── */
+.strand-card--interactive:focus-visible {
+  outline: 2px solid var(--strand-blue-primary);
+  outline-offset: 2px;
 }
 
 /* ── Reduced motion ── */

package/src/components/Checkbox/Checkbox.css

@@ -39,9 +39,9 @@
   color: var(--strand-on-blue-primary);
   flex-shrink: 0;
   transition:
-    background var(--strand-duration-fast) ease,
-    border-color var(--strand-duration-fast) ease,
-    box-shadow var(--strand-duration-fast) ease;
+    background var(--strand-duration-fast) var(--strand-ease-out-quart),
+    border-color var(--strand-duration-fast) var(--strand-ease-out-quart),
+    box-shadow var(--strand-duration-fast) var(--strand-ease-out-quart);
 }
 
 .strand-checkbox__icon {
@@ -52,7 +52,7 @@
 /* ── Focus ring ── */
 .strand-checkbox__native:focus-visible ~ .strand-checkbox__control {
   border-color: var(--strand-blue-primary);
-  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
+  box-shadow: var(--strand-focus-ring);
 }
 
 /* ── Checked ── */

package/src/components/Dialog/Dialog.css

@@ -8,7 +8,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  background: rgba(15, 23, 42, 0.5);
+  background: var(--strand-backdrop);
 }
 
 /* ── Panel ── */
@@ -17,7 +17,7 @@
   width: 100%;
   max-width: 560px;
   margin: var(--strand-space-4);
-  padding: var(--strand-space-6);
+  padding: var(--strand-space-8);
   background: var(--strand-surface-elevated);
   border-radius: var(--strand-radius-xl);
   box-shadow: var(--strand-elevation-4);
@@ -43,8 +43,8 @@
 /* ── Close button ── */
 .strand-dialog__close {
   position: absolute;
-  top: var(--strand-space-4);
-  right: var(--strand-space-4);
+  top: var(--strand-space-6);
+  right: var(--strand-space-6);
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -57,8 +57,8 @@
   color: var(--strand-gray-500);
   font-size: var(--strand-text-lg);
   cursor: pointer;
-  transition: background var(--strand-duration-fast) ease,
-    color var(--strand-duration-fast) ease;
+  transition: background var(--strand-duration-fast) var(--strand-ease-out-quart),
+    color var(--strand-duration-fast) var(--strand-ease-out-quart);
 }
 
 .strand-dialog__close:hover {
@@ -68,6 +68,7 @@
 
 /* ── Body ── */
 .strand-dialog__body {
+  padding-top: var(--strand-space-6);
   color: var(--strand-gray-600);
   font-size: var(--strand-text-sm);
 }

package/src/components/FormField/FormField.css

@@ -4,7 +4,7 @@
 .strand-form-field {
   display: flex;
   flex-direction: column;
-  gap: var(--strand-space-1);
+  gap: var(--strand-space-2);
 }
 
 /* ── Label ── */

package/src/components/Grid/Grid.css

@@ -3,4 +3,25 @@
 /* ── Base ── */
 .strand-grid {
   display: grid;
+  overflow: hidden;
+  max-width: 100%;
+  box-sizing: border-box;
 }
+
+.strand-grid > * {
+  min-width: 0;
+}
+
+/* ── 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); }
+
+/* ── Gap utilities ── */
+.strand-grid--gap-1 { gap: var(--strand-space-1); }
+.strand-grid--gap-2 { gap: var(--strand-space-2); }
+.strand-grid--gap-3 { gap: var(--strand-space-3); }
+.strand-grid--gap-4 { gap: var(--strand-space-4); }
+.strand-grid--gap-5 { gap: var(--strand-space-5); }
+.strand-grid--gap-6 { gap: var(--strand-space-6); }
+.strand-grid--gap-8 { gap: var(--strand-space-8); }