Component name

Template

Detail-page template for one component. Copy this file to component-<name>.html, register the component in components.json, and fill in the sections below (ComponentCSSDesign.md Rule 5). npm run test:components checks that the required markers are present.

Overview

One or two sentences: what the component is for and when to use it. Keep it consistent with the catalog summary.

States & variants

Render every variant and visual state. Replace each preview with the real component markup.

default

active

disabled

Interactive

If the component has behavior (toggle, dismiss, expand), demonstrate it here. Vanilla via data-ihm-toggle:

Usage

<link rel="stylesheet" href="/cdn/design-system/v1/components/<name>.css" />

<button class="ihm-<name> ihm-<name>--primary">Label</button>

CSS API — classes & modifiers

Class	Purpose
`.ihm-<name>`	Base block.
`.ihm-<name>--primary`	Primary variant modifier.
`.ihm-<name>.is-disabled`	Disabled state.

Accessibility

Document required ARIA roles/attributes, keyboard interaction, and focus behavior the framework wrapper must provide.