@forumone/throughline-reference-ds 0.0.2 → 0.3.0

package/CHANGELOG.md

@@ -0,0 +1,15 @@
+# @forumone/throughline-reference-ds
+
+## 0.3.0
+
+### Minor Changes
+
+- e994176: Add layout tokens and a Storybook "Foundations" section.
+
+  New `layout` tokens (container max-widths, gutter, page margin, breakpoints) emit as `--layout-*` CSS custom properties, filling the previous gap where the DS had no container/breakpoint scale. New Foundations stories — Colors, Typography, Spacing, Radii, Elevation, and **Layout & Containers** — document the tokens visually in Storybook.
+
+## 0.2.0
+
+### Minor Changes
+
+- [#11](https://github.com/forumone/throughline/pull/11) [`b46635d`](https://github.com/forumone/throughline/commit/b46635d311d7172c0f6d439b9146f809f2ce2339) Thanks [@briangraves](https://github.com/briangraves)! - Initial release. Twelve components (Hero, SectionIntro, Prose, MediaBlock, Card, CardGrid, CTASection, Stats, FAQ, Quote, Divider, Spacer) with full `ComponentContract` metadata, Storybook stories, unit tests, and a generated manifest. Serves as the reference implementation for contract compliance, a test fixture for core packages, and a starting template for client projects without their own design system.

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Forum One Communications Corporation
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,45 +1,119 @@
 # @forumone/throughline-reference-ds
 
-## ⚠️ IMPORTANT NOTICE ⚠️
+A competent, brand-neutral reference design system that demonstrates contract compliance for Throughline. Twelve components, a CSS-variable token layer, a generated AI-ready manifest, and Storybook.
 
-**This package is created solely for the purpose of setting up OIDC (OpenID Connect) trusted publishing with npm.**
+## What this package provides
 
-This is **NOT** a functional package and contains **NO** code or functionality beyond the OIDC setup configuration.
+Twelve components covering the common editorial surface:
 
-## Purpose
+| Component | Purpose |
+| --- | --- |
+| `Hero` | Page opener with headline, body, CTAs, optional media — three variants |
+| `SectionIntro` | h2-level section opener with optional eyebrow and body |
+| `Prose` | Typographic container for long-form rich-text content |
+| `MediaBlock` | Single image or video with optional caption and aspect ratios |
+| `Card` | Linked or static content card with image, title, description, link |
+| `CardGrid` | 2/3/4-column responsive layout for Cards |
+| `CTASection` | Page-bottom call to action with one or two buttons |
+| `Stats` | 2–4 headline metrics as a semantic `<dl>` |
+| `FAQ` | Disclosure-style Q&A using native `<details>`/`<summary>` |
+| `Quote` | Pullquote or testimonial with optional attribution |
+| `Divider` | Decorative or semantic horizontal rule |
+| `Spacer` | Explicit token-sized vertical spacing |
 
-This package exists to:
-1. Configure OIDC trusted publishing for the package name `@forumone/throughline-reference-ds`
-2. Enable secure, token-less publishing from CI/CD workflows
-3. Establish provenance for packages published under this name
+Every component ships a `ComponentContract` that conforms to `@forumone/throughline-design-contract@^0.2.0`. The package exposes the aggregated manifest at the `./manifest` subpath so any MCP server or client app can read it directly.
 
-## What is OIDC Trusted Publishing?
+## Three ways to use this package
 
-OIDC trusted publishing allows package maintainers to publish packages directly from their CI/CD workflows without needing to manage npm access tokens. Instead, it uses OpenID Connect to establish trust between the CI/CD provider (like GitHub Actions) and npm.
+**As a starting point.** Copy components into your own design system. Customize freely; keep what works.
 
-## Setup Instructions
+**As a test fixture.** Core framework packages (Component Server, Publishing Server) consume this DS to verify their behaviour against a realistic, contract-compliant design system.
 
-To properly configure OIDC trusted publishing for this package:
+**As a demo.** Stand up a Throughline site in minutes using only these twelve components — useful for prototypes, internal tools, and pitches.
 
-1. Go to [npmjs.com](https://www.npmjs.com/) and navigate to your package settings
-2. Configure the trusted publisher (e.g., GitHub Actions)
-3. Specify the repository and workflow that should be allowed to publish
-4. Use the configured workflow to publish your actual package
+## Installation
 
-## DO NOT USE THIS PACKAGE
+```bash
+pnpm add @forumone/throughline-reference-ds
+```
 
-This package is a placeholder for OIDC configuration only. It:
-- Contains no executable code
-- Provides no functionality
-- Should not be installed as a dependency
-- Exists only for administrative purposes
+Peers: `react` + `react-dom` 18 or 19.
 
-## More Information
+## Using components
 
-For more details about npm's trusted publishing feature, see:
-- [npm Trusted Publishing Documentation](https://docs.npmjs.com/generating-provenance-statements)
-- [GitHub Actions OIDC Documentation](https://docs.github.com/en/actions/deployment/security-hardening-your-deployments/about-security-hardening-with-openid-connect)
+```tsx
+import '@forumone/throughline-reference-ds/styles.css'
+import { Hero, CardGrid, Card } from '@forumone/throughline-reference-ds'
 
----
+export function HomePage() {
+  return (
+    <>
+      <Hero
+        eyebrow="New program"
+        headline="Fellowship for climate researchers"
+        body="A one-year fellowship supporting researchers at the intersection of climate and community resilience."
+        cta={{ label: 'Apply now', url: '/apply' }}
+      />
+      <CardGrid columns={3}>
+        <Card title="Research" description="…" link={{ label: 'Read', url: '#' }} />
+        <Card title="Partnerships" description="…" link={{ label: 'Read', url: '#' }} />
+        <Card title="Funding" description="…" link={{ label: 'Read', url: '#' }} />
+      </CardGrid>
+    </>
+  )
+}
+```
 
-**Maintained for OIDC setup purposes only**
+## Reading the manifest
+
+The aggregated manifest ships at the `./manifest` subpath. Component servers, lint tooling, and documentation sites consume it:
+
+```ts
+import manifest from '@forumone/throughline-reference-ds/manifest'
+import { loadManifest } from '@forumone/throughline-design-contract'
+
+const loaded = loadManifest(manifest)
+console.log(loaded.listComponents())
+// ['Card', 'CardGrid', 'CTASection', 'Divider', 'FAQ', 'Hero', 'MediaBlock', 'Prose', 'Quote', 'SectionIntro', 'Spacer', 'Stats']
+```
+
+## Theming via CSS variables
+
+Every token is exposed as a CSS variable on `:root`. Override them to rebrand without touching component code:
+
+```css
+:root {
+  --color-brand-primary: #7E33FF;
+  --color-brand-primary-hover: #6420CC;
+  --font-family-sans: 'DM Sans', system-ui, sans-serif;
+}
+```
+
+The package also ships a `prefers-color-scheme: dark` override that swaps background, text, and border tokens. Clients with more elaborate dark-mode requirements should override the entire token layer.
+
+Full token list: `src/styles/tokens.css` (generated from `src/tokens/*.ts` via `pnpm build:tokens-css`).
+
+## Storybook
+
+```bash
+pnpm --filter @forumone/throughline-reference-ds storybook      # dev server on :6006
+pnpm --filter @forumone/throughline-reference-ds build-storybook # produces storybook-static/
+```
+
+The static build is used by `pnpm validate` to verify that every `storyId` declared on a contract resolves to a real Storybook story.
+
+## CI validation
+
+```bash
+pnpm --filter @forumone/throughline-reference-ds build
+pnpm --filter @forumone/throughline-reference-ds build-storybook
+pnpm --filter @forumone/throughline-reference-ds validate
+```
+
+`validate` runs `lintManifest` from `@forumone/throughline-design-contract/lint` against the generated manifest. Errors fail the build; warnings print but pass.
+
+## Authoring your own design system
+
+Use this package as a reference. Each component has a `.contract.ts` file; every contract satisfies `ComponentContractSchema`. Copy the structure, replace the content, and your design system becomes a valid input to Throughline.
+
+The authoring guide lives at `docs/building-plugins.md` (for MCP plugins) and the contract authoring expectations live in `@forumone/throughline-design-contract`'s README.

package/dist/components/CTASection/CTASection.contract.d.ts

@@ -0,0 +1,3 @@
+import type { ComponentContract } from '@forumone/throughline-design-contract';
+export declare const contract: ComponentContract;
+//# sourceMappingURL=CTASection.contract.d.ts.map

package/dist/components/CTASection/CTASection.contract.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CTASection.contract.d.ts","sourceRoot":"","sources":["../../../src/components/CTASection/CTASection.contract.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,uCAAuC,CAAA;AAE9E,eAAO,MAAM,QAAQ,EAAE,iBA6HtB,CAAA"}

package/dist/components/CTASection/CTASection.contract.js

@@ -0,0 +1,117 @@
+export const contract = {
+    name: 'CTASection',
+    category: 'cta',
+    description: 'A page-bottom call to action with a headline, optional supporting copy, and one or two buttons.',
+    intent: 'Close a page with a clear next step. Use at the end of program pages, campaigns, and marketing pages where the reader has enough context to act. Do not use at the top of a page (that is Hero\'s job) or as a section opener (that is SectionIntro\'s).',
+    composition: {
+        placement: ['page', 'section'],
+        maxPerPage: 2,
+        requiredSiblings: [],
+        forbiddenAdjacent: ['CTASection'],
+    },
+    content: {
+        fields: [
+            {
+                name: 'headline',
+                type: 'text',
+                required: true,
+                maxLength: 100,
+                constraints: 'Direct, imperative; reads like an invitation',
+            },
+            {
+                name: 'body',
+                type: 'text',
+                required: false,
+                maxLength: 200,
+                constraints: 'One sentence that reduces friction to clicking',
+            },
+            {
+                name: 'cta',
+                type: 'group',
+                required: true,
+                of: [
+                    { name: 'label', type: 'text', required: true, maxLength: 30 },
+                    { name: 'url', type: 'link', required: true },
+                ],
+            },
+            {
+                name: 'secondaryCta',
+                type: 'group',
+                required: false,
+                of: [
+                    { name: 'label', type: 'text', required: true, maxLength: 30 },
+                    { name: 'url', type: 'link', required: true },
+                ],
+            },
+        ],
+        variants: [
+            { name: 'primary', description: 'Standard background', whenToUse: 'Default' },
+            { name: 'secondary', description: 'Subtle grey background', whenToUse: 'Most page closes — less visual weight than Hero' },
+            { name: 'inverse', description: 'Dark background', whenToUse: 'Campaign pages or high-stakes calls to action' },
+        ],
+    },
+    tokens: {
+        consumes: [
+            'color.bg.primary',
+            'color.bg.secondary',
+            'color.bg.inverse',
+            'color.text.primary',
+            'color.text.secondary',
+            'color.text.inverse',
+            'color.brand.primary',
+            'color.brand.primaryHover',
+            'color.border.strong',
+            'spacing.section',
+            'spacing.container',
+            'spacing.8',
+            'spacing.6',
+            'spacing.4',
+            'spacing.3',
+            'font.size.4xl',
+            'font.size.lg',
+            'font.weight.bold',
+            'font.weight.semibold',
+            'line.height.tight',
+            'line.height.relaxed',
+            'radius.md',
+        ],
+        configurable: [
+            {
+                prop: 'background',
+                tokenGroup: 'color.bg',
+                allowedValues: ['primary', 'secondary', 'inverse'],
+            },
+        ],
+    },
+    accessibility: {
+        keyboardSupport: ['Tab to primary CTA', 'Tab to secondary CTA'],
+        screenReaderBehavior: 'The headline is announced as an h2. CTAs are standard links; their label text is announced as the link name.',
+        contentWarnings: [
+            'Avoid verb-only labels ("Click", "Go") — include the destination ("Start building", "Read the docs")',
+        ],
+    },
+    examples: [
+        { label: 'Default', intent: 'Two-button page close', storyId: 'cta-section--default' },
+        { label: 'Primary only', intent: 'Single-action CTA', storyId: 'cta-section--primary-only' },
+        { label: 'Inverse', intent: 'High-contrast campaign CTA', storyId: 'cta-section--inverse' },
+    ],
+    antiExamples: [
+        {
+            label: 'Three or more CTAs',
+            why: 'Too many options reduces conversion; pick the top one, put the rest on a detail page',
+            useInstead: 'One primary + optional secondary',
+        },
+        {
+            label: 'Using CTASection as a page opener',
+            why: 'Readers cannot convert without context; CTA belongs at the end',
+            useInstead: 'Hero',
+        },
+    ],
+    behavior: {
+        fetchesData: false,
+        hasClientState: false,
+        animates: false,
+        requiresAnalytics: true,
+    },
+};
+//# sourceMappingURL=CTASection.contract.js.map

package/dist/components/CTASection/CTASection.contract.js.map

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

package/dist/components/CTASection/CTASection.d.ts

@@ -0,0 +1,17 @@
+export type CTASectionBackground = 'primary' | 'secondary' | 'inverse';
+export interface CTASectionProps {
+    headline: string;
+    body?: string;
+    cta: {
+        label: string;
+        url: string;
+    };
+    secondaryCta?: {
+        label: string;
+        url: string;
+    };
+    background?: CTASectionBackground;
+    className?: string;
+}
+export declare function CTASection({ headline, body, cta, secondaryCta, background, className, }: CTASectionProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=CTASection.d.ts.map

package/dist/components/CTASection/CTASection.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CTASection.d.ts","sourceRoot":"","sources":["../../../src/components/CTASection/CTASection.tsx"],"names":[],"mappings":"AAGA,MAAM,MAAM,oBAAoB,GAAG,SAAS,GAAG,WAAW,GAAG,SAAS,CAAA;AAEtE,MAAM,WAAW,eAAe;IAC9B,QAAQ,EAAE,MAAM,CAAA;IAChB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,GAAG,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,GAAG,EAAE,MAAM,CAAA;KAAE,CAAA;IACnC,YAAY,CAAC,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,GAAG,EAAE,MAAM,CAAA;KAAE,CAAA;IAC7C,UAAU,CAAC,EAAE,oBAAoB,CAAA;IACjC,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED,wBAAgB,UAAU,CAAC,EACzB,QAAQ,EACR,IAAI,EACJ,GAAG,EACH,YAAY,EACZ,UAAwB,EACxB,SAAS,GACV,EAAE,eAAe,2CAmBjB"}

package/dist/components/CTASection/CTASection.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { clsx } from 'clsx';
+import styles from './CTASection.module.css';
+export function CTASection({ headline, body, cta, secondaryCta, background = 'secondary', className, }) {
+    return (_jsx("section", { className: clsx(styles.cta, styles[`bg-${background}`], className), children: _jsxs("div", { className: styles.container, children: [_jsx("h2", { className: styles.headline, children: headline }), body ? _jsx("p", { className: styles.body, children: body }) : null, _jsxs("div", { className: styles.actions, children: [_jsx("a", { href: cta.url, className: styles.primary, children: cta.label }), secondaryCta ? (_jsx("a", { href: secondaryCta.url, className: styles.secondary, children: secondaryCta.label })) : null] })] }) }));
+}
+//# sourceMappingURL=CTASection.js.map

package/dist/components/CTASection/CTASection.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CTASection.js","sourceRoot":"","sources":["../../../src/components/CTASection/CTASection.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,MAAM,CAAA;AAC3B,OAAO,MAAM,MAAM,yBAAyB,CAAA;AAa5C,MAAM,UAAU,UAAU,CAAC,EACzB,QAAQ,EACR,IAAI,EACJ,GAAG,EACH,YAAY,EACZ,UAAU,GAAG,WAAW,EACxB,SAAS,GACO;IAChB,OAAO,CACL,kBAAS,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,GAAG,EAAE,MAAM,CAAC,MAAM,UAAU,EAAE,CAAC,EAAE,SAAS,CAAC,YACzE,eAAK,SAAS,EAAE,MAAM,CAAC,SAAS,aAC9B,aAAI,SAAS,EAAE,MAAM,CAAC,QAAQ,YAAG,QAAQ,GAAM,EAC9C,IAAI,CAAC,CAAC,CAAC,YAAG,SAAS,EAAE,MAAM,CAAC,IAAI,YAAG,IAAI,GAAK,CAAC,CAAC,CAAC,IAAI,EACpD,eAAK,SAAS,EAAE,MAAM,CAAC,OAAO,aAC5B,YAAG,IAAI,EAAE,GAAG,CAAC,GAAG,EAAE,SAAS,EAAE,MAAM,CAAC,OAAO,YACxC,GAAG,CAAC,KAAK,GACR,EACH,YAAY,CAAC,CAAC,CAAC,CACd,YAAG,IAAI,EAAE,YAAY,CAAC,GAAG,EAAE,SAAS,EAAE,MAAM,CAAC,SAAS,YACnD,YAAY,CAAC,KAAK,GACjB,CACL,CAAC,CAAC,CAAC,IAAI,IACJ,IACF,GACE,CACX,CAAA;AACH,CAAC"}

package/dist/components/CTASection/index.d.ts

@@ -0,0 +1,3 @@
+export { CTASection, type CTASectionProps, type CTASectionBackground } from './CTASection.js';
+export { contract as ctaSectionContract } from './CTASection.contract.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/CTASection/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/CTASection/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,KAAK,eAAe,EAAE,KAAK,oBAAoB,EAAE,MAAM,iBAAiB,CAAA;AAC7F,OAAO,EAAE,QAAQ,IAAI,kBAAkB,EAAE,MAAM,0BAA0B,CAAA"}

package/dist/components/CTASection/index.js

@@ -0,0 +1,3 @@
+export { CTASection } from './CTASection.js';
+export { contract as ctaSectionContract } from './CTASection.contract.js';
+//# sourceMappingURL=index.js.map

package/dist/components/CTASection/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/CTASection/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAmD,MAAM,iBAAiB,CAAA;AAC7F,OAAO,EAAE,QAAQ,IAAI,kBAAkB,EAAE,MAAM,0BAA0B,CAAA"}

package/dist/components/Card/Card.contract.d.ts

@@ -0,0 +1,3 @@
+import type { ComponentContract } from '@forumone/throughline-design-contract';
+export declare const contract: ComponentContract;
+//# sourceMappingURL=Card.contract.d.ts.map

package/dist/components/Card/Card.contract.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Card.contract.d.ts","sourceRoot":"","sources":["../../../src/components/Card/Card.contract.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,uCAAuC,CAAA;AAE9E,eAAO,MAAM,QAAQ,EAAE,iBAuHtB,CAAA"}

package/dist/components/Card/Card.contract.js

@@ -0,0 +1,111 @@
+export const contract = {
+    name: 'Card',
+    category: 'card',
+    description: 'A single content card with optional image, eyebrow, title, description, and link. Renders as a link when a link target is provided.',
+    intent: 'Surface a single piece of content in a scannable, consistent shape — a program page, a blog post, a case study, a staff bio. Cards are typically laid out in a CardGrid, but a single Card can appear alone inside a section when the content warrants singular emphasis.',
+    composition: {
+        placement: ['section', 'inline'],
+        maxPerPage: null,
+        requiredSiblings: [],
+        forbiddenAdjacent: [],
+    },
+    content: {
+        fields: [
+            {
+                name: 'eyebrow',
+                type: 'text',
+                required: false,
+                maxLength: 30,
+                constraints: 'Short label such as the content type ("Case study", "Program update")',
+            },
+            {
+                name: 'image',
+                type: 'image',
+                required: false,
+                constraints: 'Landscape orientation; framing works best for images that read at small sizes',
+            },
+            {
+                name: 'title',
+                type: 'text',
+                required: true,
+                maxLength: 100,
+                constraints: 'Sentence case; reads like a headline',
+            },
+            {
+                name: 'description',
+                type: 'text',
+                required: false,
+                maxLength: 200,
+                constraints: 'One to two sentences that give the reader a reason to click',
+            },
+            {
+                name: 'link',
+                type: 'group',
+                required: false,
+                of: [
+                    { name: 'label', type: 'text', required: true, maxLength: 30 },
+                    { name: 'url', type: 'link', required: true },
+                ],
+            },
+        ],
+        variants: [
+            { name: 'linked', description: 'Entire card is clickable', whenToUse: 'Teaser for a single piece of content' },
+            { name: 'static', description: 'No link; presentational only', whenToUse: 'Inline informational cards (team bios, program descriptions) that do not link elsewhere' },
+        ],
+    },
+    tokens: {
+        consumes: [
+            'color.bg.primary',
+            'color.bg.tertiary',
+            'color.text.primary',
+            'color.text.secondary',
+            'color.border.default',
+            'color.border.strong',
+            'color.brand.primary',
+            'spacing.6',
+            'spacing.2',
+            'font.size.xl',
+            'font.size.base',
+            'font.size.sm',
+            'font.size.xs',
+            'font.weight.semibold',
+            'line.height.snug',
+            'line.height.normal',
+            'letter.spacing.wide',
+            'radius.lg',
+        ],
+    },
+    accessibility: {
+        keyboardSupport: ['When linked, the whole card is a single tab stop'],
+        screenReaderBehavior: 'Linked cards render as a single <a> element announcing the title + description + link label as one unit. Static cards render as <article> with an h3 title.',
+        contentWarnings: [
+            'Avoid nested interactive elements inside a linked card (buttons, additional links)',
+            'Always author alt text for card images or omit the image entirely',
+        ],
+    },
+    examples: [
+        { label: 'Default', intent: 'Content teaser with image and link', storyId: 'card--default' },
+        { label: 'With eyebrow', intent: 'Labeled teaser highlighting content type', storyId: 'card--with-eyebrow' },
+        { label: 'No image', intent: 'Text-only teaser for resources or downloads', storyId: 'card--no-image' },
+        { label: 'Static', intent: 'Presentational card without a link target', storyId: 'card--static' },
+    ],
+    antiExamples: [
+        {
+            label: 'Nesting interactive controls inside a linked card',
+            why: 'A linked card is a single tab stop; adding buttons or additional links creates nested interactive regions that confuse assistive technology',
+            useInstead: 'Use a static card with explicit nested controls, or move secondary actions to a detail page',
+        },
+        {
+            label: 'Using Card as a navigation menu item',
+            why: 'Cards are for content teasers; site navigation belongs in a Menu or Nav component',
+            useInstead: 'A dedicated navigation component',
+        },
+    ],
+    behavior: {
+        fetchesData: false,
+        hasClientState: false,
+        animates: false,
+        requiresAnalytics: false,
+    },
+};
+//# sourceMappingURL=Card.contract.js.map

package/dist/components/Card/Card.contract.js.map

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

package/dist/components/Card/Card.d.ts

@@ -0,0 +1,16 @@
+export interface CardProps {
+    title: string;
+    description?: string;
+    image?: {
+        url: string;
+        alt: string;
+    };
+    link?: {
+        label: string;
+        url: string;
+    };
+    eyebrow?: string;
+    className?: string;
+}
+export declare function Card({ title, description, image, link, eyebrow, className }: CardProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Card.d.ts.map

package/dist/components/Card/Card.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Card.d.ts","sourceRoot":"","sources":["../../../src/components/Card/Card.tsx"],"names":[],"mappings":"AAGA,MAAM,WAAW,SAAS;IACxB,KAAK,EAAE,MAAM,CAAA;IACb,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,KAAK,CAAC,EAAE;QAAE,GAAG,EAAE,MAAM,CAAC;QAAC,GAAG,EAAE,MAAM,CAAA;KAAE,CAAA;IACpC,IAAI,CAAC,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,GAAG,EAAE,MAAM,CAAA;KAAE,CAAA;IACrC,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED,wBAAgB,IAAI,CAAC,EAAE,KAAK,EAAE,WAAW,EAAE,KAAK,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,EAAE,SAAS,2CA0BtF"}

package/dist/components/Card/Card.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { clsx } from 'clsx';
+import styles from './Card.module.css';
+export function Card({ title, description, image, link, eyebrow, className }) {
+    const body = (_jsxs(_Fragment, { children: [image ? (_jsx("div", { className: styles.imageFrame, children: _jsx("img", { src: image.url, alt: image.alt, className: styles.image }) })) : null, _jsxs("div", { className: styles.content, children: [eyebrow ? _jsx("p", { className: styles.eyebrow, children: eyebrow }) : null, _jsx("h3", { className: styles.title, children: title }), description ? _jsx("p", { className: styles.description, children: description }) : null, link ? _jsx("span", { className: styles.linkLabel, children: link.label }) : null] })] }));
+    if (link) {
+        return (_jsx("a", { href: link.url, className: clsx(styles.card, styles.linked, className), children: body }));
+    }
+    return _jsx("article", { className: clsx(styles.card, className), children: body });
+}
+//# sourceMappingURL=Card.js.map

package/dist/components/Card/Card.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Card.js","sourceRoot":"","sources":["../../../src/components/Card/Card.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,MAAM,CAAA;AAC3B,OAAO,MAAM,MAAM,mBAAmB,CAAA;AAWtC,MAAM,UAAU,IAAI,CAAC,EAAE,KAAK,EAAE,WAAW,EAAE,KAAK,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAa;IACrF,MAAM,IAAI,GAAG,CACX,8BACG,KAAK,CAAC,CAAC,CAAC,CACP,cAAK,SAAS,EAAE,MAAM,CAAC,UAAU,YAC/B,cAAK,GAAG,EAAE,KAAK,CAAC,GAAG,EAAE,GAAG,EAAE,KAAK,CAAC,GAAG,EAAE,SAAS,EAAE,MAAM,CAAC,KAAK,GAAI,GAC5D,CACP,CAAC,CAAC,CAAC,IAAI,EACR,eAAK,SAAS,EAAE,MAAM,CAAC,OAAO,aAC3B,OAAO,CAAC,CAAC,CAAC,YAAG,SAAS,EAAE,MAAM,CAAC,OAAO,YAAG,OAAO,GAAK,CAAC,CAAC,CAAC,IAAI,EAC7D,aAAI,SAAS,EAAE,MAAM,CAAC,KAAK,YAAG,KAAK,GAAM,EACxC,WAAW,CAAC,CAAC,CAAC,YAAG,SAAS,EAAE,MAAM,CAAC,WAAW,YAAG,WAAW,GAAK,CAAC,CAAC,CAAC,IAAI,EACxE,IAAI,CAAC,CAAC,CAAC,eAAM,SAAS,EAAE,MAAM,CAAC,SAAS,YAAG,IAAI,CAAC,KAAK,GAAQ,CAAC,CAAC,CAAC,IAAI,IACjE,IACL,CACJ,CAAA;IAED,IAAI,IAAI,EAAE,CAAC;QACT,OAAO,CACL,YAAG,IAAI,EAAE,IAAI,CAAC,GAAG,EAAE,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,YACtE,IAAI,GACH,CACL,CAAA;IACH,CAAC;IAED,OAAO,kBAAS,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,SAAS,CAAC,YAAG,IAAI,GAAW,CAAA;AAC3E,CAAC"}

package/dist/components/Card/index.d.ts

@@ -0,0 +1,3 @@
+export { Card, type CardProps } from './Card.js';
+export { contract as cardContract } from './Card.contract.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/Card/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Card/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,SAAS,EAAE,MAAM,WAAW,CAAA;AAChD,OAAO,EAAE,QAAQ,IAAI,YAAY,EAAE,MAAM,oBAAoB,CAAA"}

package/dist/components/Card/index.js

@@ -0,0 +1,3 @@
+export { Card } from './Card.js';
+export { contract as cardContract } from './Card.contract.js';
+//# sourceMappingURL=index.js.map

package/dist/components/Card/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Card/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAkB,MAAM,WAAW,CAAA;AAChD,OAAO,EAAE,QAAQ,IAAI,YAAY,EAAE,MAAM,oBAAoB,CAAA"}

package/dist/components/CardGrid/CardGrid.contract.d.ts

@@ -0,0 +1,3 @@
+import type { ComponentContract } from '@forumone/throughline-design-contract';
+export declare const contract: ComponentContract;
+//# sourceMappingURL=CardGrid.contract.d.ts.map

package/dist/components/CardGrid/CardGrid.contract.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CardGrid.contract.d.ts","sourceRoot":"","sources":["../../../src/components/CardGrid/CardGrid.contract.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,uCAAuC,CAAA;AAE9E,eAAO,MAAM,QAAQ,EAAE,iBA2EtB,CAAA"}

package/dist/components/CardGrid/CardGrid.contract.js

@@ -0,0 +1,67 @@
+export const contract = {
+    name: 'CardGrid',
+    category: 'section',
+    description: 'A responsive layout container for two, three, or four Cards per row. Reflows to fewer columns on narrow viewports.',
+    intent: 'Lay out multiple Card components inside a section. Use for program lists, blog indexes, staff directories, and any collection of similarly-shaped content. CardGrid is purely layout; it does not fetch data or filter — authors list the Cards they want.',
+    composition: {
+        placement: ['section'],
+        maxPerPage: null,
+        requiredSiblings: ['Card'],
+        forbiddenAdjacent: [],
+        allowedSlots: { children: ['Card'] },
+    },
+    content: {
+        fields: [
+            {
+                name: 'children',
+                type: 'array',
+                required: true,
+                constraints: 'An array of Card components',
+                of: [{ name: 'card', type: 'group', required: true }],
+            },
+        ],
+        variants: [
+            { name: '2', description: 'Two columns', whenToUse: 'Lists of 2-4 prominent items' },
+            { name: '3', description: 'Three columns', whenToUse: 'Default — works for most collections' },
+            { name: '4', description: 'Four columns', whenToUse: 'Denser lists of 8 or more short cards' },
+        ],
+    },
+    tokens: {
+        consumes: ['spacing.container', 'spacing.6'],
+        configurable: [
+            { prop: 'columns', tokenGroup: 'layout', allowedValues: ['2', '3', '4'] },
+        ],
+    },
+    accessibility: {
+        keyboardSupport: [],
+        screenReaderBehavior: 'Purely visual layout. Screen readers traverse children in source order; CardGrid itself adds no ARIA.',
+        contentWarnings: [
+            'Children must be Cards; mixing other components breaks the visual rhythm',
+            'Keep all cards roughly the same content length — dramatically unequal cards look broken',
+        ],
+    },
+    examples: [
+        { label: 'Two columns', intent: 'Featured program pair', storyId: 'card-grid--two-column' },
+        { label: 'Three columns', intent: 'Standard content index', storyId: 'card-grid--three-column' },
+        { label: 'Four columns', intent: 'Dense staff directory', storyId: 'card-grid--four-column' },
+    ],
+    antiExamples: [
+        {
+            label: 'Mixing Cards and non-Card children',
+            why: 'The grid assumes uniform children; mixing Stats or MediaBlocks produces broken columns',
+            useInstead: 'Group by type — one CardGrid, then the other components below',
+        },
+        {
+            label: 'Using CardGrid with a single Card',
+            why: 'A CardGrid wrapping one Card is overhead without benefit',
+            useInstead: 'Render the Card directly',
+        },
+    ],
+    behavior: {
+        fetchesData: false,
+        hasClientState: false,
+        animates: false,
+        requiresAnalytics: false,
+    },
+};
+//# sourceMappingURL=CardGrid.contract.js.map