# 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**. The classes give
you the finished look and the state hooks (`is-active`, `is-copied`,
`is-loading`), and the event handlers in your template toggle them. The
package carries no JavaScript so that behavior stays in the template, next to
the state it reads. A tab bar is `.tab` buttons whose `onclick` sets the
active tab, with `e:if` on each panel. A copy button is an `onclick` that writes
to the clipboard and adds `is-copied`.

## 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 Example
<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).