@dillingerstaffing/strand-ui 0.1.1 → 0.2.1

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/dist/index.js

@@ -499,7 +499,7 @@ const V = p(
   }
 );
 V.displayName = "Avatar";
-const z = p(
+const O = p(
   ({
     variant: a = "solid",
     status: t = "default",
@@ -548,8 +548,8 @@ const z = p(
     ] });
   }
 );
-z.displayName = "Tag";
-const O = p(
+O.displayName = "Tag";
+const z = p(
   ({ columns: a, data: t, onSort: e, className: n = "", ...i }, o) => {
     const [r, l] = B(null), [c, u] = B("asc"), d = b(
       (m) => {
@@ -591,11 +591,15 @@ const O = p(
     ] }) });
   }
 );
-O.displayName = "Table";
+z.displayName = "Table";
 const W = p(
-  ({ label: a, value: t, className: e = "", ...n }, i) => {
-    const o = ["strand-data-readout", e].filter(Boolean).join(" ");
-    return /* @__PURE__ */ _("div", { ref: i, className: o, ...n, children: [
+  ({ label: a, value: t, size: e, className: n = "", ...i }, o) => {
+    const r = [
+      "strand-data-readout",
+      e && e !== "md" ? `strand-data-readout--${e}` : "",
+      n
+    ].filter(Boolean).join(" ");
+    return /* @__PURE__ */ _("div", { ref: o, className: r, ...i, children: [
       /* @__PURE__ */ s("span", { className: "strand-data-readout__label", children: a }),
       /* @__PURE__ */ s("span", { className: "strand-data-readout__value", children: t })
     ] });
@@ -1353,9 +1357,9 @@ export {
   pa as Spinner,
   Z as Stack,
   F as Switch,
-  O as Table,
+  z as Table,
   ea as Tabs,
-  z as Tag,
+  O as Tag,
   A as Textarea,
   ia as Toast,
   ra as ToastProvider,

package/package.json

@@ -1,9 +1,10 @@
 {
   "name": "@dillingerstaffing/strand-ui",
-  "version": "0.1.1",
+  "version": "0.2.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",
+  "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,13 +25,21 @@
     },
     "./css/strand-ui.css": "./dist/css/strand-ui.css"
   },
+  "style": "./dist/css/strand-ui.css",
   "files": [
     "dist/",
-    "src/"
+    "src/",
+    "HTML_REFERENCE.md"
   ],
   "sideEffects": [
     "dist/css/*.css"
   ],
+  "scripts": {
+    "build": "vite build && tsc --emitDeclarationOnly && cp ../../HTML_REFERENCE.md ./HTML_REFERENCE.md",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "test:coverage": "vitest run --coverage"
+  },
   "peerDependencies": {
     "preact": "^10.0.0"
   },
@@ -40,7 +49,7 @@
     }
   },
   "dependencies": {
-    "@dillingerstaffing/strand": "0.1.1"
+    "@dillingerstaffing/strand": "workspace:*"
   },
   "devDependencies": {
     "@testing-library/preact": "^3.2.0",
@@ -49,11 +58,5 @@
     "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

@@ -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/DataReadout/DataReadout.css

@@ -28,3 +28,12 @@
   line-height: var(--strand-leading-tight);
   font-variant-numeric: tabular-nums;
 }
+
+/* ── Size variants ── */
+.strand-data-readout--sm .strand-data-readout__value {
+  font-size: var(--strand-text-xl);
+}
+
+.strand-data-readout--lg .strand-data-readout__value {
+  font-size: var(--strand-text-4xl);
+}