@dillingerstaffing/strand-ui 0.1.0 → 0.2.0

package/dist/index.d.ts

@@ -0,0 +1,64 @@
+/*! 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";
+export type { InputProps } from "./components/Input/index.js";
+export { Textarea } from "./components/Textarea/index.js";
+export type { TextareaProps } from "./components/Textarea/index.js";
+export { Select } from "./components/Select/index.js";
+export type { SelectProps, SelectOption } from "./components/Select/index.js";
+export { Checkbox } from "./components/Checkbox/index.js";
+export type { CheckboxProps } from "./components/Checkbox/index.js";
+export { Radio } from "./components/Radio/index.js";
+export type { RadioProps } from "./components/Radio/index.js";
+export { Switch } from "./components/Switch/index.js";
+export type { SwitchProps } from "./components/Switch/index.js";
+export { Slider } from "./components/Slider/index.js";
+export type { SliderProps } from "./components/Slider/index.js";
+export { FormField } from "./components/FormField/index.js";
+export type { FormFieldProps } from "./components/FormField/index.js";
+export { Card } from "./components/Card/index.js";
+export type { CardProps } from "./components/Card/index.js";
+export { Badge } from "./components/Badge/index.js";
+export type { BadgeProps } from "./components/Badge/index.js";
+export { Avatar } from "./components/Avatar/index.js";
+export type { AvatarProps } from "./components/Avatar/index.js";
+export { Tag } from "./components/Tag/index.js";
+export type { TagProps } from "./components/Tag/index.js";
+export { Table } from "./components/Table/index.js";
+export type { TableProps, TableColumn } from "./components/Table/index.js";
+export { DataReadout } from "./components/DataReadout/index.js";
+export type { DataReadoutProps } from "./components/DataReadout/index.js";
+export { Stack } from "./components/Stack/index.js";
+export type { StackProps } from "./components/Stack/index.js";
+export { Grid } from "./components/Grid/index.js";
+export type { GridProps } from "./components/Grid/index.js";
+export { Container } from "./components/Container/index.js";
+export type { ContainerProps } from "./components/Container/index.js";
+export { Divider } from "./components/Divider/index.js";
+export type { DividerProps } from "./components/Divider/index.js";
+export { Section } from "./components/Section/index.js";
+export type { SectionProps } from "./components/Section/index.js";
+export { Link } from "./components/Link/index.js";
+export type { LinkProps } from "./components/Link/index.js";
+export { Tabs } from "./components/Tabs/index.js";
+export type { TabsProps, TabItem } from "./components/Tabs/index.js";
+export { Breadcrumb } from "./components/Breadcrumb/index.js";
+export type { BreadcrumbProps, BreadcrumbItem } from "./components/Breadcrumb/index.js";
+export { Nav } from "./components/Nav/index.js";
+export type { NavProps } from "./components/Nav/index.js";
+export { Toast, ToastProvider, useToast } from "./components/Toast/index.js";
+export type { ToastProps } from "./components/Toast/index.js";
+export { Alert } from "./components/Alert/index.js";
+export type { AlertProps } from "./components/Alert/index.js";
+export { Dialog } from "./components/Dialog/index.js";
+export type { DialogProps } from "./components/Dialog/index.js";
+export { Tooltip } from "./components/Tooltip/index.js";
+export type { TooltipProps } from "./components/Tooltip/index.js";
+export { Progress } from "./components/Progress/index.js";
+export type { ProgressProps } from "./components/Progress/index.js";
+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";
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

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

package/dist/test-setup.d.ts

@@ -0,0 +1,2 @@
+import "@testing-library/jest-dom/vitest";
+//# sourceMappingURL=test-setup.d.ts.map

package/dist/test-setup.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"test-setup.d.ts","sourceRoot":"","sources":["../src/test-setup.ts"],"names":[],"mappings":"AAAA,OAAO,kCAAkC,CAAC"}

package/package.json

@@ -1,9 +1,21 @@
 {
   "name": "@dillingerstaffing/strand-ui",
-  "version": "0.1.0",
+  "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",
@@ -22,20 +34,16 @@
       "types": "./dist/index.d.ts",
       "import": "./dist/index.js"
     },
-    "./css/*": "./dist/css/*"
+    "./css/strand-ui.css": "./dist/css/strand-ui.css"
   },
+  "style": "./dist/css/strand-ui.css",
   "files": [
-    "dist/"
+    "dist/",
+    "src/"
   ],
   "sideEffects": [
     "dist/css/*.css"
   ],
-  "scripts": {
-    "build": "vite build",
-    "test": "vitest run",
-    "test:watch": "vitest",
-    "test:coverage": "vitest run --coverage"
-  },
   "peerDependencies": {
     "preact": "^10.0.0"
   },
@@ -45,7 +53,7 @@
     }
   },
   "dependencies": {
-    "@dillingerstaffing/strand": "workspace:*"
+    "@dillingerstaffing/strand": "0.2.0"
   },
   "devDependencies": {
     "@testing-library/preact": "^3.2.0",
@@ -54,5 +62,11 @@
     "preact": "^10.25.0",
     "vite": "^6.0.0",
     "vitest": "^3.0.0"
+  },
+  "scripts": {
+    "build": "vite build && tsc --emitDeclarationOnly",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "test:coverage": "vitest run --coverage"
   }
-}
+}

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

@@ -0,0 +1,200 @@
+import { describe, expect, it } from "vitest";
+import { existsSync, readFileSync } from "node:fs";
+import { resolve } from "node:path";
+
+const distDir = resolve(__dirname, "../../dist");
+
+describe("Build output", () => {
+  it("produces index.js bundle", () => {
+    expect(existsSync(resolve(distDir, "index.js"))).toBe(true);
+  });
+
+  it("produces index.d.ts declarations", () => {
+    expect(existsSync(resolve(distDir, "index.d.ts"))).toBe(true);
+  });
+
+  it("declarations export all component types", () => {
+    const dts = readFileSync(resolve(distDir, "index.d.ts"), "utf-8");
+    const expectedExports = [
+      "Button", "Input", "Textarea", "Select", "Checkbox", "Radio",
+      "Switch", "Slider", "FormField", "Card", "Badge", "Avatar",
+      "Tag", "Table", "DataReadout", "Stack", "Grid", "Container",
+      "Divider", "Section", "Link", "Tabs", "Breadcrumb", "Nav",
+      "Toast", "Alert", "Dialog", "Tooltip", "Progress", "Spinner", "Skeleton",
+    ];
+    for (const name of expectedExports) {
+      expect(dts, `Missing export: ${name}`).toContain(name);
+    }
+  });
+
+  it("produces combined CSS file", () => {
+    expect(existsSync(resolve(distDir, "css/strand-ui.css"))).toBe(true);
+  });
+
+  it("CSS file contains styles for all components", () => {
+    const css = readFileSync(resolve(distDir, "css/strand-ui.css"), "utf-8");
+    const expectedClasses = [
+      ".strand-btn", ".strand-input", ".strand-select",
+      ".strand-checkbox", ".strand-radio", ".strand-switch",
+      ".strand-slider", ".strand-card", ".strand-badge",
+      ".strand-avatar", ".strand-tag", ".strand-table",
+      ".strand-data-readout", ".strand-stack", ".strand-grid",
+      ".strand-container", ".strand-divider", ".strand-section",
+      ".strand-link", ".strand-tabs", ".strand-breadcrumb",
+      ".strand-nav", ".strand-toast", ".strand-alert",
+      ".strand-dialog", ".strand-tooltip", ".strand-progress",
+      ".strand-spinner", ".strand-skeleton",
+    ];
+    for (const cls of expectedClasses) {
+      expect(css, `Missing CSS class: ${cls}`).toContain(cls);
+    }
+  });
+
+  it("CSS file uses only strand tokens (no hardcoded colors)", () => {
+    const css = readFileSync(resolve(distDir, "css/strand-ui.css"), "utf-8");
+    // Remove comments and check for hardcoded hex colors that aren't in rgba()
+    const withoutComments = css.replace(/\/\*[\s\S]*?\*\//g, "");
+    const hexMatches = withoutComments.match(/#[0-9a-fA-F]{6}\b/g) || [];
+    // Filter out known exceptions (danger hover/active states that extend the palette)
+    const knownExceptions = ["#DC2626", "#B91C1C", "#0D7377", "#92400E", "#991B1B"];
+    const unexpected = hexMatches.filter(
+      (h) => !knownExceptions.includes(h.toUpperCase())
+    );
+    expect(unexpected, `Hardcoded hex colors found: ${unexpected.join(", ")}`).toEqual([]);
+  });
+
+  it("JS bundle is under 50KB gzipped budget", () => {
+    const js = readFileSync(resolve(distDir, "index.js"), "utf-8");
+    // Rough check: uncompressed should be well under 200KB (gzip ~4:1 ratio)
+    expect(js.length).toBeLessThan(200_000);
+  });
+
+  it("src/ directory exists for CLI copy-paste", () => {
+    expect(existsSync(resolve(__dirname, "../components/Button/Button.tsx"))).toBe(true);
+    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

@@ -0,0 +1,75 @@
+/*! Strand UI | MIT License | dillingerstaffing.com */
+
+/* ── Base ── */
+.strand-alert {
+  position: relative;
+  display: flex;
+  align-items: flex-start;
+  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);
+}
+
+/* ── Status variants ── */
+.strand-alert--info {
+  background: var(--strand-blue-glow);
+  border-left-color: var(--strand-blue-primary);
+}
+
+.strand-alert--success {
+  background: rgba(34, 197, 94, 0.08);
+  border-left-color: var(--strand-green-positive);
+}
+
+.strand-alert--warning {
+  background: rgba(245, 158, 11, 0.08);
+  border-left-color: var(--strand-amber-caution);
+}
+
+.strand-alert--error {
+  background: rgba(239, 68, 68, 0.08);
+  border-left-color: var(--strand-red-alert);
+}
+
+/* ── Content ── */
+.strand-alert__content {
+  flex: 1;
+  min-width: 0;
+}
+
+/* ── Dismiss button ── */
+.strand-alert__dismiss {
+  flex-shrink: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  margin-left: var(--strand-space-4);
+  padding: 0;
+  border: none;
+  border-radius: var(--strand-radius-md);
+  background: transparent;
+  color: var(--strand-gray-500);
+  font-size: var(--strand-text-base);
+  cursor: pointer;
+  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;
+  }
+}