Canon / components

rule.components.state-matrix · canon

Ship full component state matrices

Idle, hover, focus, active, disabled, loading, error are first-class.

Guidance

Document and test each interactive state including empty/error recovery for composites.

Verification contract

component unit tests cover states

Supporting references

• ref.adobe.spectrum — Adobe Spectrum
• ref.atlassian.design-system — Atlassian Design System
• ref.chakra.v3 — Chakra UI v3
• ref.github.primer — Primer Design System
• ref.google.material-3 — Material Design 3
• ref.govuk.error-summary — GOV.UK Error Summary Pattern
• ref.ibm.carbon-data-visualization — Carbon Data Visualization
• ref.ibm.carbon — Carbon Design System
• ref.microsoft.fluent-2 — Fluent 2 Design System
• ref.openui.open-ui — Open UI
• ref.radix.primitives — Radix Primitives
• ref.salesforce.lightning — Lightning Design System
• ref.shadcn.ui — shadcn/ui
• ref.shopify.polaris — Shopify Polaris

Implementations and verification artifacts

• artifact.component.button — Button component · packages/react/src/components/Button.tsx
• artifact.component.dialog — Dialog component · packages/react/src/components/Dialog.tsx
• artifact.component.input — Input component · packages/react/src/components/Input.tsx
• artifact.component.tabs — Tabs component · packages/react/src/components/Tabs.tsx
• artifact.test.component-contracts — Component contract unit and keyboard suites test · packages/react/src/components/Components.test.tsx