# Phase 12 Component Catalog

All public components use semantic tokens, logical CSS, one locale-independent DOM tree, and typed semantic variants. The component-lab route is development-only and guarded by `COMPONENT_FIXTURES_ENABLED=true`.

## Public component reference

| Component           | Import path                                 | Purpose                                               | Variants                                                                               | Accessibility / RTL / responsive behavior                                                                                                                        | Do not use when                                                                       |
| ------------------- | ------------------------------------------- | ----------------------------------------------------- | -------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------- |
| `VisuallyHidden`    | `@/components/foundation/VisuallyHidden`    | Reusable foundational utilities primitive or pattern. | default                                                                                | Semantic HTML; keyboard support when interactive; visible focus; logical CSS; localized content props; content-driven reflow at compact, medium, and wide gates. | A simpler native element or layout primitive already provides the required semantics. |
| `BidiText`          | `@/components/foundation/BidiText`          | Reusable foundational utilities primitive or pattern. | default                                                                                | Semantic HTML; keyboard support when interactive; visible focus; logical CSS; localized content props; content-driven reflow at compact, medium, and wide gates. | A simpler native element or layout primitive already provides the required semantics. |
| `LiveRegion`        | `@/components/foundation/LiveRegion`        | Reusable foundational utilities primitive or pattern. | polite, assertive                                                                      | Semantic HTML; keyboard support when interactive; visible focus; logical CSS; localized content props; content-driven reflow at compact, medium, and wide gates. | A simpler native element or layout primitive already provides the required semantics. |
| `Icon`              | `@/components/foundation/Icon`              | Reusable icon system primitive or pattern.            | sm, md, lg, fixed, mirror                                                              | Semantic HTML; keyboard support when interactive; visible focus; logical CSS; localized content props; content-driven reflow at compact, medium, and wide gates. | A simpler native element or layout primitive already provides the required semantics. |
| `Button`            | `@/components/actions/Button`               | Reusable actions primitive or pattern.                | primary, conversion, secondary, tertiary, ghost, destructive, link, icon-only, loading | Semantic HTML; keyboard support when interactive; visible focus; logical CSS; localized content props; content-driven reflow at compact, medium, and wide gates. | A simpler native element or layout primitive already provides the required semantics. |
| `ActionLink`        | `@/components/actions/ActionLink`           | Reusable actions primitive or pattern.                | inline, navigation, standalone, button-primary, button-conversion, muted, disabled     | Semantic HTML; keyboard support when interactive; visible focus; logical CSS; localized content props; content-driven reflow at compact, medium, and wide gates. | A simpler native element or layout primitive already provides the required semantics. |
| `FormField`         | `@/components/forms/FormField`              | Reusable forms primitive or pattern.                  | required, optional, supporting, error                                                  | Semantic HTML; keyboard support when interactive; visible focus; logical CSS; localized content props; content-driven reflow at compact, medium, and wide gates. | A simpler native element or layout primitive already provides the required semantics. |
| `TextInput`         | `@/components/forms/TextInput`              | Reusable forms primitive or pattern.                  | text, email, telephone, url, search, invalid, disabled                                 | Semantic HTML; keyboard support when interactive; visible focus; logical CSS; localized content props; content-driven reflow at compact, medium, and wide gates. | A simpler native element or layout primitive already provides the required semantics. |
| `TextArea`          | `@/components/forms/TextInput`              | Reusable forms primitive or pattern.                  | default, character-count, invalid, disabled                                            | Semantic HTML; keyboard support when interactive; visible focus; logical CSS; localized content props; content-driven reflow at compact, medium, and wide gates. | A simpler native element or layout primitive already provides the required semantics. |
| `Select`            | `@/components/forms/TextInput`              | Reusable forms primitive or pattern.                  | default, invalid, disabled                                                             | Semantic HTML; keyboard support when interactive; visible focus; logical CSS; localized content props; content-driven reflow at compact, medium, and wide gates. | A simpler native element or layout primitive already provides the required semantics. |
| `Checkbox`          | `@/components/forms/ChoiceControls`         | Reusable forms primitive or pattern.                  | default, checked, invalid, disabled                                                    | Semantic HTML; keyboard support when interactive; visible focus; logical CSS; localized content props; content-driven reflow at compact, medium, and wide gates. | A simpler native element or layout primitive already provides the required semantics. |
| `Radio`             | `@/components/forms/ChoiceControls`         | Reusable forms primitive or pattern.                  | default, checked, invalid, disabled                                                    | Semantic HTML; keyboard support when interactive; visible focus; logical CSS; localized content props; content-driven reflow at compact, medium, and wide gates. | A simpler native element or layout primitive already provides the required semantics. |
| `Switch`            | `@/components/forms/ChoiceControls`         | Reusable forms primitive or pattern.                  | on, off, disabled                                                                      | Semantic HTML; keyboard support when interactive; visible focus; logical CSS; localized content props; content-driven reflow at compact, medium, and wide gates. | A simpler native element or layout primitive already provides the required semantics. |
| `Fieldset`          | `@/components/forms/FormField`              | Reusable forms primitive or pattern.                  | default                                                                                | Semantic HTML; keyboard support when interactive; visible focus; logical CSS; localized content props; content-driven reflow at compact, medium, and wide gates. | A simpler native element or layout primitive already provides the required semantics. |
| `ErrorSummary`      | `@/components/forms/ErrorSummary`           | Reusable forms primitive or pattern.                  | error-list                                                                             | Semantic HTML; keyboard support when interactive; visible focus; logical CSS; localized content props; content-driven reflow at compact, medium, and wide gates. | A simpler native element or layout primitive already provides the required semantics. |
| `Tabs`              | `@/components/controls/Tabs`                | Reusable selection controls primitive or pattern.     | automatic, manual, disabled-tab                                                        | Semantic HTML; keyboard support when interactive; visible focus; logical CSS; localized content props; content-driven reflow at compact, medium, and wide gates. | A simpler native element or layout primitive already provides the required semantics. |
| `SegmentedControl`  | `@/components/controls/SegmentedControl`    | Reusable selection controls primitive or pattern.     | selected, disabled                                                                     | Semantic HTML; keyboard support when interactive; visible focus; logical CSS; localized content props; content-driven reflow at compact, medium, and wide gates. | A simpler native element or layout primitive already provides the required semantics. |
| `Accordion`         | `@/components/controls/Accordion`           | Reusable selection controls primitive or pattern.     | open, closed                                                                           | Semantic HTML; keyboard support when interactive; visible focus; logical CSS; localized content props; content-driven reflow at compact, medium, and wide gates. | A simpler native element or layout primitive already provides the required semantics. |
| `Pagination`        | `@/components/controls/Pagination`          | Reusable selection controls primitive or pattern.     | current, previous, next                                                                | Semantic HTML; keyboard support when interactive; visible focus; logical CSS; localized content props; content-driven reflow at compact, medium, and wide gates. | A simpler native element or layout primitive already provides the required semantics. |
| `Dialog`            | `@/components/overlays/Dialog`              | Reusable overlays primitive or pattern.               | modal, drawer, dismissible, non-dismissible                                            | Semantic HTML; keyboard support when interactive; visible focus; logical CSS; localized content props; content-driven reflow at compact, medium, and wide gates. | A simpler native element or layout primitive already provides the required semantics. |
| `DropdownMenu`      | `@/components/overlays/DropdownMenu`        | Reusable overlays primitive or pattern.               | open, closed, disabled-item, destructive-item                                          | Semantic HTML; keyboard support when interactive; visible focus; logical CSS; localized content props; content-driven reflow at compact, medium, and wide gates. | A simpler native element or layout primitive already provides the required semantics. |
| `Tooltip`           | `@/components/overlays/Tooltip`             | Reusable overlays primitive or pattern.               | hover, focus                                                                           | Semantic HTML; keyboard support when interactive; visible focus; logical CSS; localized content props; content-driven reflow at compact, medium, and wide gates. | A simpler native element or layout primitive already provides the required semantics. |
| `Alert`             | `@/components/feedback/Alert`               | Reusable feedback primitive or pattern.               | info, success, warning, error, inline                                                  | Semantic HTML; keyboard support when interactive; visible focus; logical CSS; localized content props; content-driven reflow at compact, medium, and wide gates. | A simpler native element or layout primitive already provides the required semantics. |
| `Progress`          | `@/components/feedback/Progress`            | Reusable feedback primitive or pattern.               | determinate, indeterminate                                                             | Semantic HTML; keyboard support when interactive; visible focus; logical CSS; localized content props; content-driven reflow at compact, medium, and wide gates. | A simpler native element or layout primitive already provides the required semantics. |
| `Spinner`           | `@/components/feedback/Loading`             | Reusable feedback primitive or pattern.               | loading                                                                                | Semantic HTML; keyboard support when interactive; visible focus; logical CSS; localized content props; content-driven reflow at compact, medium, and wide gates. | A simpler native element or layout primitive already provides the required semantics. |
| `Skeleton`          | `@/components/feedback/Loading`             | Reusable feedback primitive or pattern.               | single-line, multi-line, reduced-motion                                                | Semantic HTML; keyboard support when interactive; visible focus; logical CSS; localized content props; content-driven reflow at compact, medium, and wide gates. | A simpler native element or layout primitive already provides the required semantics. |
| `StateMessage`      | `@/components/feedback/StateMessage`        | Reusable feedback primitive or pattern.               | empty, error, success, information                                                     | Semantic HTML; keyboard support when interactive; visible focus; logical CSS; localized content props; content-driven reflow at compact, medium, and wide gates. | A simpler native element or layout primitive already provides the required semantics. |
| `StatusBadge`       | `@/components/foundation/StatusBadge`       | Reusable feedback primitive or pattern.               | neutral, info, success, warning, error                                                 | Semantic HTML; keyboard support when interactive; visible focus; logical CSS; localized content props; content-driven reflow at compact, medium, and wide gates. | A simpler native element or layout primitive already provides the required semantics. |
| `Card`              | `@/components/surfaces/Card`                | Reusable surfaces primitive or pattern.               | default, muted, elevated, strong, interactive                                          | Semantic HTML; keyboard support when interactive; visible focus; logical CSS; localized content props; content-driven reflow at compact, medium, and wide gates. | A simpler native element or layout primitive already provides the required semantics. |
| `Panel`             | `@/components/surfaces/Card`                | Reusable surfaces primitive or pattern.               | default, muted, elevated, strong                                                       | Semantic HTML; keyboard support when interactive; visible focus; logical CSS; localized content props; content-driven reflow at compact, medium, and wide gates. | A simpler native element or layout primitive already provides the required semantics. |
| `Callout`           | `@/components/surfaces/Callout`             | Reusable surfaces primitive or pattern.               | information                                                                            | Semantic HTML; keyboard support when interactive; visible focus; logical CSS; localized content props; content-driven reflow at compact, medium, and wide gates. | A simpler native element or layout primitive already provides the required semantics. |
| `Heading`           | `@/components/typography/Typography`        | Reusable typography primitive or pattern.             | display, section, subheading, levels-1-6                                               | Semantic HTML; keyboard support when interactive; visible focus; logical CSS; localized content props; content-driven reflow at compact, medium, and wide gates. | A simpler native element or layout primitive already provides the required semantics. |
| `Eyebrow`           | `@/components/typography/Typography`        | Reusable typography primitive or pattern.             | default                                                                                | Semantic HTML; keyboard support when interactive; visible focus; logical CSS; localized content props; content-driven reflow at compact, medium, and wide gates. | A simpler native element or layout primitive already provides the required semantics. |
| `Text`              | `@/components/typography/Typography`        | Reusable typography primitive or pattern.             | lead, body, supporting, caption, label                                                 | Semantic HTML; keyboard support when interactive; visible focus; logical CSS; localized content props; content-driven reflow at compact, medium, and wide gates. | A simpler native element or layout primitive already provides the required semantics. |
| `Quote`             | `@/components/typography/Typography`        | Reusable typography primitive or pattern.             | with-citation, without-citation                                                        | Semantic HTML; keyboard support when interactive; visible focus; logical CSS; localized content props; content-driven reflow at compact, medium, and wide gates. | A simpler native element or layout primitive already provides the required semantics. |
| `Breadcrumbs`       | `@/components/navigation/Breadcrumbs`       | Reusable navigation primitive or pattern.             | current-page                                                                           | Semantic HTML; keyboard support when interactive; visible focus; logical CSS; localized content props; content-driven reflow at compact, medium, and wide gates. | A simpler native element or layout primitive already provides the required semantics. |
| `SectionNavigation` | `@/components/navigation/SectionNavigation` | Reusable navigation primitive or pattern.             | current-location, overflow                                                             | Semantic HTML; keyboard support when interactive; visible focus; logical CSS; localized content props; content-driven reflow at compact, medium, and wide gates. | A simpler native element or layout primitive already provides the required semantics. |
| `FooterLinkGroup`   | `@/components/navigation/FooterLinkGroup`   | Reusable navigation primitive or pattern.             | resolved, disabled                                                                     | Semantic HTML; keyboard support when interactive; visible focus; logical CSS; localized content props; content-driven reflow at compact, medium, and wide gates. | A simpler native element or layout primitive already provides the required semantics. |
| `MediaFrame`        | `@/components/media/MediaFrame`             | Reusable media primitive or pattern.                  | square, landscape, wide, portrait, auto, captioned, decorative                         | Semantic HTML; keyboard support when interactive; visible focus; logical CSS; localized content props; content-driven reflow at compact, medium, and wide gates. | A simpler native element or layout primitive already provides the required semantics. |
| `ResponsiveImage`   | `@/components/media/MediaFrame`             | Reusable media primitive or pattern.                  | meaningful, decorative, captioned                                                      | Semantic HTML; keyboard support when interactive; visible focus; logical CSS; localized content props; content-driven reflow at compact, medium, and wide gates. | A simpler native element or layout primitive already provides the required semantics. |
| `SectionHeader`     | `@/components/marketing/SectionHeader`      | Reusable section patterns primitive or pattern.       | start, center                                                                          | Semantic HTML; keyboard support when interactive; visible focus; logical CSS; localized content props; content-driven reflow at compact, medium, and wide gates. | A simpler native element or layout primitive already provides the required semantics. |
| `FeatureCard`       | `@/components/marketing/FeatureCard`        | Reusable marketing surfaces primitive or pattern.     | default, primary, muted                                                                | Semantic HTML; keyboard support when interactive; visible focus; logical CSS; localized content props; content-driven reflow at compact, medium, and wide gates. | A simpler native element or layout primitive already provides the required semantics. |
| `FeatureGrid`       | `@/components/marketing/SectionPatterns`    | Reusable section patterns primitive or pattern.       | responsive-grid                                                                        | Semantic HTML; keyboard support when interactive; visible focus; logical CSS; localized content props; content-driven reflow at compact, medium, and wide gates. | A simpler native element or layout primitive already provides the required semantics. |
| `SplitContent`      | `@/components/marketing/SectionPatterns`    | Reusable section patterns primitive or pattern.       | default, reverse                                                                       | Semantic HTML; keyboard support when interactive; visible focus; logical CSS; localized content props; content-driven reflow at compact, medium, and wide gates. | A simpler native element or layout primitive already provides the required semantics. |
| `MetricStrip`       | `@/components/marketing/SectionPatterns`    | Reusable section patterns primitive or pattern.       | responsive-strip                                                                       | Semantic HTML; keyboard support when interactive; visible focus; logical CSS; localized content props; content-driven reflow at compact, medium, and wide gates. | A simpler native element or layout primitive already provides the required semantics. |
| `LogoStripShell`    | `@/components/marketing/SectionPatterns`    | Reusable section patterns primitive or pattern.       | empty-shell, content                                                                   | Semantic HTML; keyboard support when interactive; visible focus; logical CSS; localized content props; content-driven reflow at compact, medium, and wide gates. | A simpler native element or layout primitive already provides the required semantics. |
| `Workflow`          | `@/components/marketing/Workflow`           | Reusable workflow primitive or pattern.               | numbered, icon, stacked, horizontal                                                    | Semantic HTML; keyboard support when interactive; visible focus; logical CSS; localized content props; content-driven reflow at compact, medium, and wide gates. | A simpler native element or layout primitive already provides the required semantics. |
| `Comparison`        | `@/components/marketing/Comparison`         | Reusable comparison primitive or pattern.             | problem-solution, stacked, two-column                                                  | Semantic HTML; keyboard support when interactive; visible focus; logical CSS; localized content props; content-driven reflow at compact, medium, and wide gates. | A simpler native element or layout primitive already provides the required semantics. |
| `Metric`            | `@/components/marketing/Evidence`           | Reusable evidence primitive or pattern.               | approved, pending-review, research-only, prohibited                                    | Semantic HTML; keyboard support when interactive; visible focus; logical CSS; localized content props; content-driven reflow at compact, medium, and wide gates. | A blocked product decision or unsupported claim would be required.                    |
| `EvidenceShell`     | `@/components/marketing/Evidence`           | Reusable evidence primitive or pattern.               | approved, pending-review, research-only, prohibited                                    | Semantic HTML; keyboard support when interactive; visible focus; logical CSS; localized content props; content-driven reflow at compact, medium, and wide gates. | A blocked product decision or unsupported claim would be required.                    |
| `CTA`               | `@/components/marketing/CTA`                | Reusable calls to action primitive or pattern.        | inline, card, section, primary-only, dual-action, disabled-destination                 | Semantic HTML; keyboard support when interactive; visible focus; logical CSS; localized content props; content-driven reflow at compact, medium, and wide gates. | A blocked product decision or unsupported claim would be required.                    |
| `ProductPreview`    | `@/components/marketing/ProductPreview`     | Reusable product previews primitive or pattern.       | illustrative, empty, responsive-table                                                  | Semantic HTML; keyboard support when interactive; visible focus; logical CSS; localized content props; content-driven reflow at compact, medium, and wide gates. | A blocked product decision or unsupported claim would be required.                    |

## Representative usage

```tsx
import { Button } from '@/components/actions/Button';
import { FeatureCard } from '@/components/marketing/FeatureCard';

<Button intent="conversion" size="large">{messages.demoLabel}</Button>
<FeatureCard title={content.title} description={content.description} icon="car" />
```

## Prohibited usage

- Do not pass raw colors, arbitrary spacing, untranslated fragments, unresolved URLs, or research-only evidence into production rendering.
- Do not use `Card` to turn every layout problem into a rectangle. Humanity has already done enough of that.
- Do not use `InteractiveCard` semantics for containers with multiple independent controls. This system intentionally does not provide that invalid abstraction.
- Do not enable the component-lab route in a public production deployment.