# Components

The component classes are CSS-only families in `@layer components`. Each is a
bare noun (`.card`, `.callout`, `.pill`, `.tab`, `.terminal`), its parts carry
the family prefix (`.card-head`, `.pill-dot`, `.tab-list`), and its variants are
`is-` modifiers (`is-primary`, `is-active`, `is-error`). See the
naming rule (`elements man style`).

## CSS-only scope

Everything here is **styling applied to markup you write**. There is no
JavaScript in this package. No behavior is attached to any class. A `.tab`
doesn't switch panels; a copy button doesn't copy. The classes give you the
finished look and the state hooks (`is-active`, `is-copied`, `is-loading`); you
supply the behavior that toggles them.

Interactive widgets that are fundamentally about JavaScript (dialogs, dropdowns,
toasts, menus, command palettes, comboboxes, calendars, data tables, sheets, and
the like) are **not part of `@elements/style`**. They belong to a separate
`@elements/ui` package that is not shipped in v1. Don't look for a `.dialog` or
`.dropdown` here; they aren't in this package.

## Bare elements come first

Before the component classes, remember that bare `<button>`, `<input>`,
`<textarea>`, `<select>`, checkbox and radio style themselves at zero
specificity (via `:where()` and the layer order), so any class you add wins with
no `!important`. To render a non-button element as a button, use the `.button`
coercion class:

```html
<button>Default chrome</button>
<a class="button is-primary" href="/install">Install</a>
```

See [base](../base) for the bare-element principle in full.

## The families

- [button](button): `<button>` / `.button`, intents, sizes, states,
  button groups, icon-only.
- [form](form): bare inputs, textarea, select, checkbox, radio, the `.field`
  wrapper, and the grid form.
- [card](card): `.card` with head/body/foot.
- [callout](callout): `.callout` with status and accent intents.
- [pill](pill): `.pill` with intents and an optional status dot.
- [tabs](tabs): `.tabs` / `.tab-list` / `.tab` / `.tab-panel` (you supply the
  toggle).
- [native](native): styled `progress`, `meter`, and `details > summary`.
- [terminal](terminal): the dark CLI bar, token rows, and inline CLI references
  (you supply the copy behavior).