Rental-operations-platform/docs/phase12/COMPONENT_CATALOG_v1.0.md

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

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.