diff --git a/.pre-commit-config.yaml b/.pre-commit-config.yaml
index d572d9d..28033c5 100644
--- a/.pre-commit-config.yaml
+++ b/.pre-commit-config.yaml
@@ -18,3 +18,31 @@ repos:
       - id: ruff
         args: [--fix]
       - id: ruff-format
+
+  # Two invocations because `profile` is a single global setting and the two
+  # template sets are different languages: `templates/cotton/**` is Django
+  # template language, `templates/jinja/**` is Jinja2. Running one profile
+  # over both misreads the other's syntax.
+  #
+  # `--reformat` rather than `--check`: this is a formatter, and a hook that
+  # only complains leaves the author to reproduce the fix by hand. Everything
+  # it does is layout inside an opening tag — see the rationale on
+  # `[tool.djlint]` in pyproject.toml, including the render-equivalence check
+  # behind the claim that this is safe.
+  - repo: https://github.com/djlint/djLint
+    rev: v1.43.1
+    hooks:
+      - id: djlint-reformat-django
+        name: djlint-reformat (cotton)
+        files: ^src/cf_ui/templates/cotton/.*\.html$
+      - id: djlint-django
+        name: djlint (cotton)
+        files: ^src/cf_ui/templates/cotton/.*\.html$
+      - id: djlint-reformat-jinja
+        name: djlint-reformat (jinja)
+        files: ^src/cf_ui/templates/jinja/.*\.jinja$
+        args: [--extension=jinja]
+      - id: djlint-jinja
+        name: djlint (jinja)
+        files: ^src/cf_ui/templates/jinja/.*\.jinja$
+        args: [--extension=jinja]
diff --git a/CHANGELOG.md b/CHANGELOG.md
index ceb5d94..cf39163 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,6 +2,115 @@
 
 ## [Unreleased]
 
+### Added — a primitives layer: button, badge, heading, label, icon (#52)
+
+- **Five new components, on all five themes, in both template sets.**
+  `<Cf:Button>` / `<c-cf.button>`, and the same for `Badge`, `Heading`,
+  `Label`, `Icon`. cf-ui shipped 14 *structural* components and no primitives,
+  which is why adoption stalled: measured against a real consumer, `button`
+  was the single most-used CSS-framework class in the codebase (204 uses) and
+  cf-ui had nothing for it, while `modal`, `tabs`, `panel` and `breadcrumb`
+  had zero uses between them.
+
+- **`src/cf_ui/primitives.py` is the closed vocabulary and the class map.**
+  `variant`, `size`, `state`, `level`, `emphasis` and `type` are fixed sets; a
+  value outside one raises `PrimitiveConfigError` naming the values that would
+  have worked. Which primitive accepts which axis is declared, so
+  `<Cf:Badge state="loading">` raises rather than rendering a badge with no
+  loading state.
+
+- **Every axis declares what its value *becomes*: a class, a tag, or an
+  attribute.** `AXIS_KINDS` is that declaration, and it is what makes the
+  empty-value rule derivable rather than case-by-case. Django resolves a
+  missing context variable to `""` and the cotton wrappers forward props
+  unconditionally, so an absent class-valued axis has to be benign — it yields
+  an unstyled element, which is exactly what a missing `variant` should do. An
+  absent *tag*- or *attribute*-valued one does not: an empty `level` has no
+  `<h?>` to render, so it raises and the message says which kind of thing was
+  missing and what to pass. `CLASS_VALUED` is derived from `AXIS_KINDS`, no
+  theme may map a non-class axis, and both are enforced by tests — which is
+  also how `type` (`button` / `submit` / `reset`, the HTML default being
+  `submit` inside a form) got a vocabulary and a guard instead of passing
+  through unchecked.
+
+- **`ALIASES` names the props whose HTML spelling cf-ui cannot use.**
+  `<c-cf.label for="email">` used to render valid HTML with no `for` attribute
+  at all: `for` is a Python reserved word so the prop is `for_id`, and
+  django-cotton silently discards attributes a component does not declare. The
+  wrapper now forwards the HTML spelling into the guard purely so it can be
+  rejected, and the error names `for_id`. This catches the *declared*
+  confusions, not arbitrary typos — `docs/primitives.md` says so plainly.
+
+- **The classes are spelled out longhand in the templates, on purpose.**
+  daisyUI compiles through Tailwind, whose scanner reads source *text* — a
+  class assembled at render time (`btn-{{ variant }}`, or one returned from
+  Python) is tree-shaken out of the build with no error and an unstyled
+  element as the only symptom. So `primitives.py` and the templates hold the
+  same knowledge twice, and a bidirectional parity test in
+  `tests/unit/test_primitives.py` fails the build the moment they disagree —
+  in either direction. `classes_for()` exists for tests, docs and
+  outside-the-templates consumers; nothing in the shipped templates calls it.
+
+- **`static/cf_ui/cf_ui_primitives.json`** is generated from the module by
+  `just primitives`, the way `cf_ui_axes.json` is generated from `axes.py`,
+  and a drift test fails if the committed copy is stale.
+
+- **Escaping and accessibility are decided once, in the component.** A
+  disabled `<a>` renders `aria-disabled="true"` and *no* `href` — an anchor
+  without one is not focusable or activatable, so this is the only spelling
+  where "disabled" is more than cosmetic. An icon is either decorative
+  (`aria-hidden="true"`) or named (`role="img"` plus `aria-label`), never
+  both, and `role="img"` makes it a leaf so the caller's glyph markup is not
+  descended into. Primitives take slot content rather than markup props, so
+  `docs/escaping.md` needs no new rule.
+
+- **`docs/primitives.md`** documents the shared contract, composition, the
+  per-theme places an axis is legitimately inert, and why the classes are
+  longhand. Tier 2 (`box`/`surface`, `prose`) and Tier 3 (`grid`) are tracked
+  separately so this could ship on its own.
+
+### Added — djLint formats both template trees, one attribute per line
+
+- **`prek` now reformats and lints `templates/cotton/**.html` and
+  `templates/jinja/**.jinja`.** Four hooks pinned at djLint v1.43.1, two per
+  tree, because `profile` is one global setting and the two trees are
+  different languages. Settings live in `[tool.djlint]`; `just
+  format-templates` and `just lint-templates` run the same thing by hand, and
+  `just check` now includes the lint pass.
+
+- **`single_attribute_per_line = true` is the point of the exercise.** A
+  cf-ui template's entire contract lives in its opening tag — `<c-vars>`
+  declares every prop, and a theme partial's element carries a literal
+  `{% if %}` chain per axis. Authored on one line, because Django has no
+  whitespace-control syntax and the safe default was "emit no whitespace", a
+  wrapper's prop list was a 100-character run read character by character.
+  107 cotton and 95 jinja templates were reformatted.
+
+- **Checked rather than assumed.** Whitespace *between* attributes is
+  insignificant in HTML; whitespace *inside* a `class` value is not — it
+  changes the rendered bytes and defeats every substring assertion in the
+  suite — so djLint is not allowed near the class chains. All 190 primitive
+  renders (5 themes × 19 components × 2 engines) came out byte-identical with
+  whitespace stripped, and the parsed DOM matched except for djLint adding a
+  space after `;` in inline `style` attributes. One assertion did depend on
+  layout — `"required>" in html`, which relied on the attribute being last
+  before the bracket — and is now anchored to the `<input>` tag itself, which
+  is what it always meant.
+
+### Fixed — multi-line `{# #}` comments rendered into the page
+
+- **Six shipped cotton partials leaked their own source comments as page
+  text.** Django's comment regex is `\{#.*?#\}` without `DOTALL`: `{# #}` is
+  single-line only, so a comment opened on one line and closed on another
+  never forms a comment token and every line in between is emitted verbatim.
+  Five bootstrap partials and one daisy partial were affected —
+  `checkbox-group`, `modal`, `navbar`, `panel`, `progress` and
+  `daisy/navbar` — each shipping a paragraph of rationale prose about z-index
+  stacking or Tailwind layer ordering straight into the consumer's HTML. All
+  six now use `{% comment %}`, and
+  `tests/unit/cotton/test_comment_syntax.py` fails the build on a recurrence.
+  Found while writing a primitives wrapper that made the same mistake.
+
 ### Changed — dependencies resolve from PyPI, not from git (#50)
 
 - **Dropped the `[tool.uv.sources]` git pin for `component-framework`.** It
diff --git a/CLAUDE.md b/CLAUDE.md
index cda90b9..2851c8e 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -23,7 +23,9 @@ just test-all                     # full suite
 just lint                         # ruff check
 just lint-fix                     # ruff check --fix
 just format                       # ruff format
-just check                        # lint + unit tests
+just format-templates             # djlint --reformat, both template trees
+just lint-templates               # djlint check, both template trees
+just check                        # lint + lint-templates + unit tests
 just build                        # hatch build wheel
 
 pytest tests/unit/ -v                          # unit tests
@@ -73,11 +75,23 @@ Templates live **inside** the Python package so hatchling includes them automati
 - Use `<c-vars>` for variable declarations, NOT `<c-props>` — the rename landed in django-cotton **0.9.6**, not 2.x as this file long claimed. That is why the `[django]` extra floors at `>=2.0` (the tested series) and why `>=0.9` was a bug: it resolved 0.9.0–0.9.5, where the wrappers install and silently drop every prop (#47)
 - `COTTON_DIR` (singular, string) sets the component root directory, not `COTTON_DIRS`
 - Unit tests using `render_to_string` bypass the django-cotton compiler — only E2E tests exercise real Cotton compilation
+- **The Django template language has no whitespace-control syntax.** Jinja's `{%- ... -%}` is a `TemplateSyntaxError` there (`Invalid block tag: '-'`), so a cotton partial that needs no stray whitespace has to keep the whole tag on one physical line
+- **Django has no multi-line `{# #}` comment.** `{#` … `#}` is single-line only; open it on one line and close it on another and every line in between renders as literal text into the page. Use `{% comment %}…{% endcomment %}` for anything longer than one line
+- `{% cf_ui_validate %}` (#52) is how a primitive wrapper rejects a bad prop. It returns `""`, so it must sit somewhere its output is *rendered* — inside `{% if %}` that never runs, or assigned via `as`, and the guard silently never fires
 - Consumer Django projects must add `"libraries": {"cf_ui": "cf_ui.templatetags.cf_ui"}` to `TEMPLATES[0]["OPTIONS"]` — the `cf_ui.django` app name prevents templatetag autodiscovery
 
 **Django AppConfig:**
 - Register as `"cf_ui.django.CfUiConfig"` (full class path), NOT `"cf_ui.django"` — `default_app_config` is removed in Django 4.2+
 
+**Primitives (`primitives.py`):**
+- `AXIS_KINDS` says what an axis's value *becomes* — `"class"`, `"tag"` or `"attribute"` — and that one fact decides both whether the axis needs a per-theme class map and whether an empty value is benign. Django resolves a missing variable to `""` and the wrappers forward props unconditionally, so an empty class-valued axis **must** pass (unstyled is the correct outcome); an empty tag/attribute one raises, because it renders malformed markup. `CLASS_VALUED` is derived from it — never hand-maintain the two
+- `ALIASES` holds props whose HTML spelling cf-ui cannot use (`for` → `for_id`). The wrapper forwards the HTML spelling into the guard *purely to reject it*, because django-cotton silently discards attributes a component does not declare. It catches declared confusions only — a plain typo is still dropped without a word
+- A `test_*_calls_the_guard` test that only asserts the string `cf_ui_validate` appears is vacuous. Assert every declared axis is *passed* in the call — two guards silently lost an axis before that check existed
+
+**djLint:**
+- `prek` reformats both template trees with `single_attribute_per_line`. It is layout inside the opening tag only — never let it near a `class="…"` value, where added whitespace changes the rendered bytes and breaks substring assertions
+- Because of it, no test may assume attribute ordering or adjacency. `"required>" in html` was such an assertion; anchor to the element (`<input\b[^>]*\brequired\b`) instead
+
 **Theme axes / Tailwind plugin:**
 - `axes.py` is the single source of truth; `cf_ui_axes.css` **and** `cf_ui_axes.json`
   are build products of it. Edit `axes.py`, run `just axes`, commit both — drift
diff --git a/docs/components.md b/docs/components.md
index 47d69c0..29fbf49 100644
--- a/docs/components.md
+++ b/docs/components.md
@@ -1,6 +1,6 @@
 # Components
 
-Fourteen components, identical prop names across every theme. Names are
+Identical prop names across every theme. Names are
 theme-agnostic — the same tag renders Bulma, Bootstrap, Foundation, Fomantic,
 or DaisyUI depending on `CF_UI_THEME` / `theme=`.
 
@@ -18,6 +18,63 @@ Every component accepts `extra_class` for consumer CSS overrides. Form
 components additionally accept `input_class` (and `CheckboxGroup`,
 `control_class`) so you can style the control without restyling the wrapper.
 
+## Primitives
+
+Small, high-frequency elements whose `variant`/`size`/`state` values come from
+closed vocabularies. See [Primitives](primitives.md) for the shared contract,
+how they compose, and the disabled-link rule.
+
+### `Cf:Button` / `<c-cf.button>`
+
+| Prop | Default | Notes |
+|---|---|---|
+| `variant` | `"neutral"` | `primary` `secondary` `success` `warning` `danger` `info` `neutral` |
+| `size` | `"normal"` | `small` `normal` `large` |
+| `state` | `"normal"` | `normal` `loading` `disabled` |
+| `href` | `""` | Non-empty renders an `<a>` instead of a `<button>` |
+| `type` | `"button"` | `button` `submit` `reset`. `<button>` form only |
+| `full_width` | `false` | |
+| `extra_class` | `""` | |
+
+An out-of-vocabulary value raises `PrimitiveConfigError` rather than rendering
+an unstyled element.
+
+### `Cf:Badge` / `<c-cf.badge>`
+
+| Prop | Default | Notes |
+|---|---|---|
+| `variant` | `"neutral"` | |
+| `size` | `"normal"` | Inert on Bootstrap and Foundation |
+| `extra_class` | `""` | |
+
+### `Cf:Heading` / `<c-cf.heading>`
+
+| Prop | Default | Notes |
+|---|---|---|
+| `level` | `"2"` | `1`–`6`. Picks the tag; semantics only. Cannot be empty |
+| `size` | `"normal"` | Visual size, independent of `level` |
+| `emphasis` | `"normal"` | `normal` `subtle` |
+| `extra_class` | `""` | |
+
+### `Cf:Label` / `<c-cf.label>`
+
+| Prop | Default | Notes |
+|---|---|---|
+| `size` | `"normal"` | No `small` step on Foundation |
+| `for_id` | `""` | Becomes `for`. Spelling it `for` raises — `for` is a Python keyword |
+| `required` | `false` | Renders an indicator announced as "required" |
+| `extra_class` | `""` | |
+
+### `Cf:Icon` / `<c-cf.icon>`
+
+| Prop | Default | Notes |
+|---|---|---|
+| `size` | `"normal"` | Inert on Foundation |
+| `label` | `""` | Empty ⇒ `aria-hidden`. Non-empty ⇒ `role="img"` + that name |
+| `extra_class` | `""` | |
+
+cf-ui ships no icons — put your own `<i>` or `<svg>` in the slot.
+
 ## Forms
 
 ### `Cf:FormField` / `<c-cf.form-field>`
diff --git a/docs/primitives.md b/docs/primitives.md
new file mode 100644
index 0000000..9cb32b3
--- /dev/null
+++ b/docs/primitives.md
@@ -0,0 +1,421 @@
+# Primitives
+
+The 14 components cf-ui shipped through 0.2.0 are all **structural** — card,
+modal, navbar, table. Primitives are the layer underneath: the small,
+high-frequency elements that structural components are built out of and that
+consuming apps otherwise hand-write everywhere.
+
+They differ from structural components in one way that shapes everything
+below: a primitive is used hundreds of times per app, so its prop contract has
+to be settled once, for the whole set, before any of it is implemented. A
+button that spells its colours `variant` while a badge spells them `type` is a
+worse API than either choice on its own.
+
+## The shared vocabularies
+
+Six axes, each a **closed set**, declared in
+[`cf_ui/primitives.py`](https://github.com/fsecada01/component-framework-ui/blob/master/src/cf_ui/primitives.py).
+An unknown value raises `PrimitiveConfigError` naming the values that would
+have worked — it does not fall through to an unstyled element.
+
+| Axis | Values | Becomes |
+|---|---|---|
+| `variant` | `primary` `secondary` `success` `warning` `danger` `info` `neutral` | a class |
+| `size` | `small` `normal` `large` | a class |
+| `state` | `normal` `loading` `disabled` | a class |
+| `emphasis` | `normal` `subtle` | a class |
+| `level` | `1`–`6` | the **tag** |
+| `type` | `button` `submit` `reset` | an **attribute** |
+
+Seven variants, not "whatever the framework ships". All five frameworks can
+express all seven, though two collapse a pair onto one class — Foundation has
+no informational button colour, so `info` renders as `secondary` rather than
+cf-ui inventing a class Foundation's own CSS does not define. A vocabulary cut
+down to the poorest framework would make the richer ones useless; one built for
+the richest would make `info` mean nothing in Foundation.
+
+`normal` is the **middle step**, not "whatever the framework does with no
+class". Usually those coincide and it maps to no class at all — a real entry in
+the map, not a gap, since the completeness test treats a *missing* key as the
+failure.
+
+Two things follow from that, and both are visible to consumers:
+
+**Sometimes `normal` needs a class.** Bulma's `.tag` defaults to its smallest
+step, so a normal badge maps to `is-medium` in order to line up with a normal
+button. The shared vocabulary is the whole point — `size="normal"` has to mean
+one thing across primitives, or sharing it buys nothing.
+
+**Sometimes `size` does nothing.** Bootstrap and Foundation ship no badge size
+classes, so all three values map to no class and a Bootstrap badge renders
+identically at every size. cf-ui does not fake this with font-size utilities:
+Bootstrap's `fs-*` scale bottoms out *larger* than a default badge, so it
+cannot express "small" and would be a wrong-direction lie. Switching
+`CF_UI_THEME` can therefore change whether `size` has any effect on a given
+primitive.
+
+## What an axis value becomes, and why it matters
+
+The third column of that table is not decoration. It is the one fact that
+decides two separate things.
+
+**Whether the axis has a per-theme class map.** Class-valued axes do. `level`
+and `type` do not, because there is nothing to map — the value *is* the tag
+name, or the attribute value.
+
+**Whether an empty value is allowed.** For a class-valued axis it is: the class
+is simply not emitted, and you get a valid element that is merely unstyled.
+That tolerance is load-bearing rather than lax — Django resolves a missing
+context variable to `""`, and every cotton wrapper forwards its props
+unconditionally, so a guard that rejected empty values would reject ordinary
+renders.
+
+For `level` and `type` an empty value is *not* benign, so it raises:
+
+```
+<c-cf.heading :level="section.depth">   # depth is None
+
+PrimitiveConfigError: heading needs a level — it becomes the element's tag,
+so an empty one renders malformed markup rather than unstyled markup.
+Pass one of: 1, 2, 3, 4, 5, 6
+```
+
+Without that check the render succeeds and emits `<h class="title">Section</h>`.
+`<h>` is not an element. Browsers parse it as an unknown inline, and it still
+picks up the `title` class — so it *looks* like a heading while being absent
+from the document outline and unreachable by screen-reader heading navigation.
+It is the exact silent failure the guard exists to convert into an exception,
+in the one axis where an empty value degrades to malformed rather than
+unstyled.
+
+`type` is the same shape with a sharper edge. HTML's missing-value default for
+an **invalid** `<button type>` is `submit` — so `type="sumbit"` does not render
+an inert button, it renders one that submits the enclosing form. cf-ui defaults
+to `button` precisely to avoid that, and an open set would have let a typo undo
+it silently.
+
+## Colour is not a channel on its own
+
+A `danger` badge and a `success` badge differ only by hue. If the badge's own
+text does not carry the meaning, that is a
+[WCAG 1.4.1](https://www.w3.org/WAI/WCAG22/Understanding/use-of-color.html)
+failure, and it is not one cf-ui can fix from inside the component:
+
+```html
+<!-- Fails: "4" means nothing without the colour -->
+<c-cf.badge variant="danger">4</c-cf.badge>
+
+<!-- Passes: the text carries it -->
+<c-cf.badge variant="danger">4 failed</c-cf.badge>
+```
+
+The variant sets the colour. Making the meaning legible without it is the
+caller's obligation.
+
+## Which primitive takes which axis
+
+| Primitive | `variant` | `size` | `state` | `emphasis` | `level` | `type` |
+|---|:-:|:-:|:-:|:-:|:-:|:-:|
+| `button` | ● | ● | ● | | | ● |
+| `badge` | ● | ● | | | | |
+| `heading` | | ● | | ● | ● | |
+| `label` | | ● | | | | |
+| `icon` | | ● | | | | |
+
+`label` and `icon` take no `variant` on purpose. A label's colour belongs to
+the field it labels and an icon's to whatever contains it; giving either its
+own would create two sources of truth for one colour.
+
+`heading` separates `level` from `size` because they answer different
+questions — `level` is the document outline (`<h1>`…`<h6>`, which screen
+readers navigate by) and `size` is how big it looks. Coupling them forces a
+choice between a correct outline and a correct visual hierarchy.
+
+`emphasis` started life as a `subtitle=True` boolean and was promoted, because
+in Bulma `title` and `subtitle` are *alternatives* rather than additive. As a
+boolean outside the class map it made `classes_for()` report `"title is-4"`
+for a call that actually rendered `subtitle is-4` — and, worse, its daisyUI
+class (`opacity-60`) was invisible to `cf_ui_primitives.json`, so a Tailwind
+build would have tree-shaken it away. A prop that decides which classes are
+emitted belongs in the map, where the parity test can see it.
+
+## The axes are not all equally useful on every theme
+
+This is the honest cost of one vocabulary across five frameworks, and it is
+worth knowing before you reach for an axis:
+
+| Primitive | Where an axis does less than you'd expect |
+|---|---|
+| `badge` | `size` is **inert** on Bootstrap and Foundation — neither ships badge size modifiers |
+| `icon` | `size` is **inert** on Foundation, which has no icon wrapper and no font-size scale. On Bootstrap the scale is mixed: `small` is em-relative and composes inside a `btn-sm`, `large` is absolute and does not |
+| `label` | `size` has no `small` step on Foundation |
+| `button` | `info` renders as `secondary` on Foundation, which ships five button colours and no informational one |
+
+cf-ui does not paper over these with utilities that reach the wrong values.
+Bootstrap's `fs-*` scale, for instance, bottoms out *larger* than a default
+badge, so using it for `size="small"` would be a wrong-direction lie rather
+than a fallback.
+
+## How they compose
+
+Primitives nest through the **slot**, never through props:
+
+=== "JinjaX"
+
+    ```jinja
+    <Cf:Button variant="primary" size="small">
+      <i class="fas fa-plus"></i>
+      Add item
+    </Cf:Button>
+    ```
+
+=== "django-cotton"
+
+    ```html
+    <c-cf.button variant="primary" size="small">
+      <i class="fas fa-plus"></i>
+      Add item
+    </c-cf.button>
+    ```
+
+There is deliberately no `icon="fa-plus"` prop on `Cf:Button`. An icon prop
+would have to accept either a class name or raw markup: the first ties cf-ui to
+one icon vendor, and the second is an unescaped-markup prop on the single most
+frequently used component in the package. The slot has neither problem.
+
+Once the `icon` primitive lands it occupies that same slot position, adding
+sizing and alignment around the glyph — it does not change how the two nest.
+That is the whole reason the contract is settled for the set before any of it
+is built.
+
+## `Cf:Button` / `<c-cf.button>`
+
+| Prop | Default | Notes |
+|---|---|---|
+| `variant` | `"neutral"` | See the vocabulary above |
+| `size` | `"normal"` | |
+| `state` | `"normal"` | `loading` renders the framework's spinner; `disabled` is described below |
+| `href` | `""` | Non-empty renders an `<a>`; empty renders a `<button>` |
+| `type` | `"button"` | `button` `submit` `reset`. Only applies to the `<button>` form |
+| `full_width` | `false` | |
+| `extra_class` / `class` | `""` | `extra_class` in JinjaX, `class` in cotton — `class` is a Python reserved word |
+| slot | — | The label |
+
+### Disabled links
+
+`state="disabled"` with an `href` renders an `<a>` **without an `href`
+attribute**, carrying `role="link"` and `aria-disabled="true"`.
+
+An `<a>` cannot be disabled. Leaving the `href` on and styling it grey
+produces a control that is still focusable, still activatable by Enter, and
+still followed on middle-click — disabled to sighted mouse users only.
+Dropping the attribute is what actually removes it from the tab order, and
+`aria-disabled` is what tells assistive technology why.
+
+If you need a disabled control that is genuinely inert, prefer omitting `href`
+so it renders a real `<button disabled>`.
+
+## `Cf:Badge` / `<c-cf.badge>`
+
+| Prop | Default | Notes |
+|---|---|---|
+| `variant` | `"neutral"` | |
+| `size` | `"normal"` | Inert on Bootstrap and Foundation |
+| `extra_class` / `class` | `""` | |
+| slot | — | The badge text |
+
+Renders a `<span>` on every theme, with no `role` and no ARIA. `role="status"`
+would make it a live region announced on every re-render, which is wrong for
+a static badge — its slot text is its accessible name.
+
+There is no `pill` prop. It is idiomatic in Bootstrap and Bulma and absent
+from daisyUI, Foundation and Fomantic, so it would be inert on three of five;
+reach for `class="rounded-pill"` instead.
+
+## `Cf:Heading` / `<c-cf.heading>`
+
+| Prop | Default | Notes |
+|---|---|---|
+| `level` | `"2"` | `1`–`6`. Renders `<h1>`…`<h6>`. Semantics only; cannot be empty |
+| `size` | `"normal"` | Visual size, independent of `level` |
+| `emphasis` | `"normal"` | `subtle` for a de-emphasised heading |
+| `extra_class` / `class` | `""` | |
+| slot | — | The heading text |
+
+```html
+<!-- An h2 in the outline that looks small -->
+<c-cf.heading level="3" size="small">Section</c-cf.heading>
+```
+
+## `Cf:Label` / `<c-cf.label>`
+
+| Prop | Default | Notes |
+|---|---|---|
+| `size` | `"normal"` | No `small` step on Foundation |
+| `for_id` | `""` | Becomes the `for` attribute. **Not** `for` — see below |
+| `required` | `false` | Renders an indicator announced as "required" |
+| `extra_class` / `class` | `""` | |
+| slot | — | The label text |
+
+!!! warning "The attribute is `for_id`, not `for`"
+
+    `for` is a Python reserved word, so JinjaX cannot express it. django-cotton
+    *can*, which is the hazard: `<c-cf.label for="email">` would render valid
+    HTML with no `for` attribute at all and a silently broken label/control
+    association.
+
+    `for` is therefore a **declared alias** — `primitives.ALIASES` maps it to
+    `for_id`, the wrapper forwards it into the guard, and it raises naming the
+    prop that works:
+
+    ```
+    PrimitiveConfigError: label takes no 'for' — use 'for_id'.
+    ```
+
+### What the alias table does and does not catch
+
+`ALIASES` covers props whose natural **HTML spelling** differs from cf-ui's —
+the name a caller will reach for first. Today that is one entry, and adding a
+theme or a primitive does not change it.
+
+It does **not** catch arbitrary misspellings. `<c-cf.icon labl="Delete item">`
+still renders a decorative icon with the accessible name silently dropped,
+because django-cotton discards any attribute a component does not declare —
+for every cotton component in every project, not just cf-ui's. That is a
+property of the template engine, not something a wrapper can close from the
+inside. Treat cf-ui's prop names as exact.
+
+The JinjaX side behaves the same way for a different reason: an undeclared
+attribute lands in `attrs`, which cf-ui's templates do not render.
+
+The required indicator is a single `<span role="img" aria-label="required">*</span>`
+rather than a hidden-glyph-plus-visually-hidden-text pair, because Fomantic
+2.9.3 ships no visually-hidden utility — that approach would have given four
+themes one accessibility mechanism and the fifth another. Fomantic's own
+`.required::after` is deliberately not used: generated content disappears under
+print and high-contrast stylesheets, and its announcement is inconsistent.
+
+## `Cf:Icon` / `<c-cf.icon>`
+
+| Prop | Default | Notes |
+|---|---|---|
+| `size` | `"normal"` | Inert on Foundation; mixed scale on Bootstrap |
+| `label` | `""` | Empty ⇒ decorative. Non-empty ⇒ the accessible name |
+| `extra_class` / `class` | `""` | |
+| slot | — | Your `<i>`, `<svg>`, or `<span>` |
+
+The accessibility decision is most of what this component buys you, and it is
+the part hand-written icon markup usually gets wrong:
+
+```html
+<!-- Decorative: skipped by screen readers entirely -->
+<c-cf.icon><i class="fas fa-star"></i></c-cf.icon>
+<span aria-hidden="true">…</span>
+
+<!-- Meaningful: announced as "Delete item", and not descended into -->
+<c-cf.icon label="Delete item"><i class="fas fa-trash"></i></c-cf.icon>
+<span role="img" aria-label="Delete item">…</span>
+```
+
+The two are mutually exclusive by construction, so a labelled icon can never
+also be `aria-hidden`. `role="img"` matters as much as the label: it makes the
+wrapper a leaf for assistive technology, so the caller's meaningless glyph
+markup is not descended into.
+
+cf-ui ships no icons and depends on no icon set. Bootstrap assumes Bootstrap
+Icons, Bulma assumes Font Awesome, daisyUI assumes nothing — there is no
+class-level abstraction spanning all five, and adopting one would make a UI kit
+choose its consumers' icon vendor.
+
+## Escaping
+
+The contract in [Escaping](escaping.md) applies unchanged: every cf-ui Jinja
+template wraps its body in `{% autoescape true %}`, so a hostile prop is
+escaped whatever the surrounding environment does, and a prop carrying real
+markup must be `markupsafe.Markup`.
+
+Primitives take **no markup props at all**. Everything that can carry markup
+arrives through the slot, where it is the caller's own template output and
+governed by the caller's own escaping policy:
+
+| Surface | Escaped by cf-ui | Notes |
+|---|---|---|
+| `variant`, `size`, `state`, `level` | n/a | Validated against a closed set before they reach the template |
+| `href`, `type`, `extra_class` | Yes | Ordinary attribute values |
+| slot content | Caller's policy | Where an icon's `<svg>` or `<i>` goes |
+
+`icon` is the one primitive whose slot is *expected* to hold markup, and it is
+still the slot rather than a prop — so passing a `Markup` value is a visible,
+per-call decision at the call site rather than a package default.
+
+When Tier 2 lands, `prose`/`content` will be the one component that exists to
+wrap caller-supplied HTML. It will need its own explicit statement here; the
+rule above is not sufficient for it.
+
+## Why the classes are written out longhand
+
+Open a theme partial and you will find every class spelled literally:
+
+```jinja
+class="btn{% if variant == 'primary' %} btn-primary{% elif variant == 'danger' %} btn-error{% endif %}"
+```
+
+rather than the obvious `btn-{{ variant }}`. This is required, not stylistic.
+daisyUI compiles through Tailwind, whose scanner reads source **text** — a
+class name assembled at render time is never seen, so it is removed from the
+build. No error, no warning, an unstyled page as the only symptom. Emitting the
+class from Python has exactly the same effect, which is why
+`cf_ui.primitives.classes_for()` exists for tests and consumers but is not used
+by the shipped templates.
+
+The cost is that the vocabulary lives in two places: `primitives.py` and ten
+template files. `tests/unit/test_primitives.py` binds them in both directions —
+every class in the map must appear literally in the templates, and every class
+in the templates must be in the map or in a short, explicit list of layout
+utilities. Neither copy can move alone.
+
+That duplication is also why every primitive template calls the guard once:
+
+```jinja
+{{ cf_ui_validate("button", variant=variant, size=size, state=state) }}
+```
+
+A literal `{% if %}` chain has no `else`. Handed `variant="purple"` it matches
+nothing and renders a correct-looking element with no colour. The guard turns
+that silence into an exception at the call site.
+
+!!! note "The guard needs the installer"
+
+    `cf_ui_validate` is bound by `install_cf_ui` (FastAPI and Litestar) and by
+    the `cf_ui` template library (Django), alongside the axis globals. A
+    primitive rendered on a bare `Catalog()` with no installer raises
+    `'cf_ui_validate' is undefined` — the same requirement
+    `cf_ui_root_attrs()` already has.
+
+## Regenerating
+
+`primitives.py` is the single source of truth;
+`static/cf_ui/cf_ui_primitives.json` is a build product of it — the
+machine-readable export of the vocabularies and class maps, mirroring
+`cf_ui_axes.json`. Edit the module, then:
+
+```bash
+just primitives
+```
+
+and commit both. A drift test fails the build otherwise.
+
+## Not yet implemented
+
+`badge`, `heading`, `label`, and `icon` have settled contracts above but no
+templates yet — they are registered in `PRIMITIVES` and deliberately **not** in
+`themes.COMPONENTS`, so referring to one raises a clear `ThemeError` rather
+than a `TemplateDoesNotExist` at first render.
+
+Tier 2 (`box`/`surface`, `prose`/`content`) and Tier 3 (`grid`) are tracked
+separately. `grid` in particular is not a settled question: Bootstrap, Bulma,
+Foundation, and Fomantic all ship 12-column systems with different
+vocabularies, while daisyUI ships none and defers to Tailwind utilities — so a
+daisy `grid` would emit raw utility classes while the other four emit framework
+classes. That is a genuine asymmetry rather than a thin adapter, and it is
+being decided on its own rather than inside this layer.
diff --git a/justfile b/justfile
index 84883b7..0095021 100644
--- a/justfile
+++ b/justfile
@@ -15,6 +15,17 @@ lint:
 lint-fix:
     ruff check --fix src tests
 
+# Templates. Two invocations because `profile` is one global setting and the
+# cotton tree is Django template language while the jinja tree is Jinja2.
+# Settings live in `[tool.djlint]`; `prek` runs the same thing on commit.
+format-templates:
+    djlint src/cf_ui/templates/cotton --profile=django --reformat
+    djlint src/cf_ui/templates/jinja --profile=jinja --extension=jinja --reformat
+
+lint-templates:
+    djlint src/cf_ui/templates/cotton --profile=django
+    djlint src/cf_ui/templates/jinja --profile=jinja --extension=jinja
+
 test:
     pytest tests/unit -q --tb=short
 
@@ -35,6 +46,9 @@ test-tailwind:
 axes:
     python -m cf_ui.axes
 
+primitives:
+    python -m cf_ui.primitives
+
 test-integration:
     pytest tests/integration -q --tb=short
 
@@ -44,7 +58,7 @@ test-e2e:
 test-all:
     pytest tests/ -q --tb=short
 
-check: lint test
+check: lint lint-templates test
 
 # Serve the docs site with live reload at http://127.0.0.1:8000
 docs:
diff --git a/mkdocs.yml b/mkdocs.yml
index eb45274..718e34c 100644
--- a/mkdocs.yml
+++ b/mkdocs.yml
@@ -51,6 +51,7 @@ nav:
       - DaisyUI: daisyui.md
   - Reference:
       - Components: components.md
+      - Primitives: primitives.md
       - Escaping: escaping.md
 
 markdown_extensions:
diff --git a/pyproject.toml b/pyproject.toml
index 322309c..33ac4be 100644
--- a/pyproject.toml
+++ b/pyproject.toml
@@ -77,6 +77,9 @@ dev = [
     "ruff>=0.1",
     "ty>=0.0.18",
     "pre-commit>=3.5",
+    # Keep in step with the `djlint` pinned in .pre-commit-config.yaml, for
+    # the same reason the `ruff` pin is documented there.
+    "djlint>=1.43",
 ]
 
 [project.urls]
@@ -121,3 +124,47 @@ known-first-party = ["cf_ui"]
 [tool.ruff.format]
 quote-style = "double"
 indent-style = "space"
+
+# ---------------------------------------------------------------------------
+# djLint — template formatting and linting
+#
+# The problem it solves: a cf-ui template's whole contract lives in its opening
+# tag. `<c-vars>` declares every prop, and a theme partial's element carries a
+# literal `{% if %}` chain per axis. Written on one line — which is how they
+# were authored, because Django has no whitespace-control syntax and the safe
+# default was "don't introduce whitespace" — a wrapper's prop list is a 100-
+# character run that has to be read character by character.
+#
+# `--single-attribute-per-line` fixes exactly that and nothing else: one
+# attribute per line inside the opening tag. It is safe because whitespace
+# *between* attributes is insignificant in HTML, and djLint keeps the closing
+# `>` inside the tag rather than letting it leak into the element's content.
+# Verified rather than assumed: all 190 primitive renders (5 themes x 19
+# components x 2 engines) are byte-identical with whitespace removed, and the
+# parsed DOM matches except for djLint adding a space after `;` in inline
+# `style` attributes.
+#
+# It does *not* touch the class chains themselves, and must not. Breaking a
+# line inside `class="..."` emits real whitespace into the attribute value —
+# harmless to browsers, but it changes the rendered bytes and defeats every
+# substring assertion in the suite.
+# ---------------------------------------------------------------------------
+[tool.djlint]
+profile = "django"
+indent = 2
+single_attribute_per_line = true
+# Both extensions are formatted. The Jinja tree is passed `--profile=jinja`
+# on its own hook invocation; this file-level setting cannot vary per path.
+extension = "html"
+# H021 inline styles — the Bootstrap backdrop needs `z-index:-1` and the panel
+#      chevron animates through Alpine's `:style`. Both are documented in the
+#      templates and neither has a class-based equivalent in that framework.
+# H023 entity references — `&times;` and `&#9776;` are the close and hamburger
+#      glyphs. Spelling them literally would put raw UTF-8 in the templates
+#      for no gain.
+# H026 empty id/class — fires on `<c-vars ... class="" />`, which is a *prop
+#      declaration*, not an HTML class attribute. Removing it would delete the
+#      prop's default and break the component.
+# T028 spaceless tags in attributes — the Jinja templates use `{%- -%}`
+#      deliberately, which is what this rule asks for; it fires anyway.
+ignore = "H021,H023,H026,T028"
diff --git a/src/cf_ui/fastapi.py b/src/cf_ui/fastapi.py
index e364f87..401d456 100644
--- a/src/cf_ui/fastapi.py
+++ b/src/cf_ui/fastapi.py
@@ -3,6 +3,7 @@
 
 from cf_ui import JINJA_TEMPLATES_DIR
 from cf_ui.axes import build_axis_globals
+from cf_ui.primitives import build_primitive_globals
 
 
 def install_cf_ui(
@@ -40,3 +41,4 @@ def install_cf_ui(
     template_dir = JINJA_TEMPLATES_DIR / theme
     catalog.add_folder(template_dir, prefix="Cf")
     catalog.jinja_env.globals.update(build_axis_globals(composition, value_sets, value_sets_mode))
+    catalog.jinja_env.globals.update(build_primitive_globals())
diff --git a/src/cf_ui/litestar.py b/src/cf_ui/litestar.py
index 86cb4fe..b506525 100644
--- a/src/cf_ui/litestar.py
+++ b/src/cf_ui/litestar.py
@@ -3,6 +3,7 @@
 
 from cf_ui import JINJA_TEMPLATES_DIR
 from cf_ui.axes import build_axis_globals
+from cf_ui.primitives import build_primitive_globals
 
 try:  # pragma: no cover - exercised by test_litestar_args_prefix_matches_jinjax
     from jinjax.utils import ARGS_PREFIX
@@ -110,6 +111,7 @@ def _register(engine: Any) -> None:
         # JinjaTemplateEngine exposes the Jinja2 Environment as .engine
         environment = getattr(engine, "engine", engine)
         environment.globals.update(axis_globals)
+        environment.globals.update(build_primitive_globals())
         _install_catalog(environment, template_dir)
 
     config.engine_callback = _register
diff --git a/src/cf_ui/primitives.py b/src/cf_ui/primitives.py
new file mode 100644
index 0000000..4f6ddeb
--- /dev/null
+++ b/src/cf_ui/primitives.py
@@ -0,0 +1,721 @@
+"""Primitive vocabularies — the closed sets behind ``variant``/``size``/``state``.
+
+:mod:`cf_ui.axes` answers *what does this app look like*. This module answers
+the narrower question the primitives ask: *which of a fixed set of roles does
+this button play*. Same discipline, same reason — an open-ended ``variant``
+string produces a different button in every consumer, and the closed set is
+what makes "primary" mean one thing across five CSS frameworks.
+
+Why the classes live here **and** in the templates
+--------------------------------------------------
+
+They are duplicated on purpose, and the duplication is guarded.
+
+daisyUI compiles through Tailwind, whose scanner reads source *text*. A
+template that writes ``btn-{{ variant }}`` hands Tailwind nothing to find, so
+every variant class is removed from the build — silently, with an unstyled
+page as the only symptom (``docs/daisyui.md``). Emitting the class from Python
+has exactly the same effect. So the templates must spell every class out
+literally, in full, one ``{% if %}`` branch per value.
+
+That would normally mean the real vocabulary lives in ten template files and
+nothing states it. Hence this module: it is the reviewable source of truth,
+the input to ``cf_ui_primitives.json`` that the Tailwind plugin safelists from,
+and the thing ``tests/unit/test_primitives.py`` holds the templates against in
+both directions. Neither copy is allowed to move alone.
+
+Why :func:`validate` exists
+---------------------------
+
+A literal ``{% if %}`` chain has no ``else``. Handed ``variant="purple"`` it
+emits nothing at all and renders an unstyled element — not an error, not a
+warning, just a button that looks wrong. Every primitive template therefore
+calls :func:`validate` once, in a position that renders its (empty) result, so
+a bad prop raises where it was passed instead of surfacing as a visual bug
+three screens away.
+
+Regenerate the JSON with::
+
+    python -m cf_ui.primitives
+"""
+
+from __future__ import annotations
+
+import json
+from copy import deepcopy
+from pathlib import Path
+from typing import Any
+
+from cf_ui.themes import THEMES
+
+__all__ = [
+    "ALIASES",
+    "AXIS_KINDS",
+    "CLASSES",
+    "CLASS_VALUED",
+    "EMPHASIS",
+    "LEVELS",
+    "PRIMITIVES",
+    "PRIMITIVE_DEFINITION_PATH",
+    "SIZES",
+    "STATES",
+    "TYPES",
+    "VARIANTS",
+    "VOCABULARIES",
+    "PrimitiveConfigError",
+    "classes_for",
+    "primitive_definition",
+    "validate",
+]
+
+
+class PrimitiveConfigError(ValueError):
+    """Raised for an unknown primitive, axis, or axis value."""
+
+
+# ---------------------------------------------------------------------------
+# Vocabularies
+#
+# Seven variants, not "whatever the framework ships". Every one of the five
+# frameworks can express all seven, though two of them collapse a pair onto
+# the same class — see the notes in CLASSES. A vocabulary sized to the poorest
+# framework would make the richer ones useless; one sized to the richest would
+# make "info" mean nothing in Foundation.
+# ---------------------------------------------------------------------------
+
+VARIANTS: tuple[str, ...] = (
+    "primary",
+    "secondary",
+    "success",
+    "warning",
+    "danger",
+    "info",
+    "neutral",
+)
+
+#: Three sizes. Frameworks ship between three and six; three is the
+#: intersection that maps cleanly everywhere.
+#:
+#: ``normal`` is the middle step, *not* "whatever the framework does with no
+#: class". Usually those coincide and it maps to an empty string — but Bulma's
+#: ``.tag`` defaults to its smallest step, so a normal badge needs
+#: ``is-medium`` to line up with a normal button. The shared vocabulary is the
+#: point: ``size="normal"`` has to mean one thing across primitives, or
+#: sharing it buys nothing.
+#:
+#: The reverse also happens: Bootstrap and Foundation ship no badge size
+#: classes at all, so all three values map to an empty string and ``size`` is
+#: inert there. Documented in ``docs/primitives.md`` rather than faked with
+#: font-size utilities that cannot reach the right steps.
+SIZES: tuple[str, ...] = ("small", "normal", "large")
+
+STATES: tuple[str, ...] = ("normal", "loading", "disabled")
+
+#: Heading levels, as strings — they land in a tag name, and ``{{ level }}``
+#: renders ``1`` for both ``1`` and ``"1"``. Kept as strings so the vocabulary
+#: and the rendered value are the same type.
+LEVELS: tuple[str, ...] = ("1", "2", "3", "4", "5", "6")
+
+#: The three values HTML defines for ``<button type>``.
+#:
+#: Closed for the same reason every other axis is, but the failure it prevents
+#: is worse than an unstyled element: HTML's missing-value default for an
+#: *invalid* ``type`` is ``submit``, so ``type="sumbit"`` does not render an
+#: inert button — it renders one that submits the enclosing form. cf-ui
+#: defaults to ``button`` precisely to avoid that, and an unvalidated typo
+#: undoes it silently.
+TYPES: tuple[str, ...] = ("button", "submit", "reset")
+
+#: De-emphasis, as an axis rather than a boolean prop.
+#:
+#: It started as ``subtitle=True`` and had to be promoted: in Bulma ``title``
+#: and ``subtitle`` are *alternatives*, not additive, so a boolean outside the
+#: map made :func:`classes_for` report ``"title is-4"`` for a call that
+#: actually rendered ``subtitle is-4``. A prop that changes which classes are
+#: emitted belongs in the map, where the parity test can see it — otherwise it
+#: lives on an exception list and the mechanism quietly lies.
+#:
+#: Bulma is also why ``base`` may be empty: with nothing in ``base``, this
+#: axis carries the base class itself, which is how an alternatives-style
+#: framework fits a format built for additive ones.
+EMPHASIS: tuple[str, ...] = ("normal", "subtle")
+
+VOCABULARIES: dict[str, tuple[str, ...]] = {
+    "variant": VARIANTS,
+    "size": SIZES,
+    "state": STATES,
+    "level": LEVELS,
+    "emphasis": EMPHASIS,
+    "type": TYPES,
+}
+
+#: What an axis's value *becomes* in the rendered element.
+#:
+#: This is not bookkeeping. It answers the two questions the vocabularies on
+#: their own cannot, and it answers both from one fact:
+#:
+#: ``class``
+#:     The value is one class among several on an element. It needs a
+#:     per-theme entry in :data:`CLASSES`, and an **empty value is benign** —
+#:     the class is simply not emitted and the element stays valid, just
+#:     unstyled. That matters because Django resolves a missing context
+#:     variable to ``""``, so :func:`validate` has to tolerate it.
+#:
+#: ``tag`` / ``attribute``
+#:     The value is the element's name, or an attribute's. There is no class
+#:     to map, so :data:`CLASSES` carries no entry — and an **empty value is
+#:     not benign**. ``<h{{ level }}>`` with nothing in ``level`` renders
+#:     ``<h>``: an element that does not exist, which browsers parse as an
+#:     unknown inline. It still picks up the ``title`` class, so it looks
+#:     right while being absent from the document outline and unreachable by
+#:     screen-reader heading navigation. Silent, and exactly the failure this
+#:     module exists to prevent, so :func:`validate` raises instead.
+#:
+#: ``level`` used to carry a class map of thirty empty strings and a comment
+#: warning that a second tag-valued axis would need a real answer. ``type``
+#: is that second axis. This is the answer.
+AXIS_KINDS: dict[str, str] = {
+    "variant": "class",
+    "size": "class",
+    "state": "class",
+    "emphasis": "class",
+    "level": "tag",
+    "type": "attribute",
+}
+
+#: Axes whose value lands in a class — the ones :data:`CLASSES` must map.
+CLASS_VALUED: frozenset[str] = frozenset(
+    axis for axis, kind in AXIS_KINDS.items() if kind == "class"
+)
+
+#: Props whose natural HTML spelling is *not* the name cf-ui uses, mapped to
+#: the name that works.
+#:
+#: These are not typos — they are the spelling a caller will reach for first,
+#: and django-cotton accepts an undeclared attribute happily and drops it. The
+#: result is valid HTML missing the attribute that mattered:
+#: ``<c-cf.label for="email">`` renders a ``<label>`` with no ``for``, so the
+#: label is associated with nothing and no error says so.
+#:
+#: ``for`` is renamed because it is a Python reserved word and JinjaX cannot
+#: express it as a prop. Each wrapper forwards the HTML spelling into
+#: :func:`validate`, which raises here rather than letting it vanish.
+#:
+#: This traps *declared* aliases only. An arbitrary misspelling
+#: (``<c-cf.icon labl="…">``) is still dropped silently, by django-cotton, for
+#: every cotton component in every project — not something cf-ui can close
+#: from inside a wrapper. See ``docs/primitives.md``.
+ALIASES: dict[str, dict[str, str]] = {
+    "label": {"for": "for_id"},
+}
+
+#: Which axes each primitive accepts. This is the prop contract for all of
+#: Tier 1, settled as a set (#52) — ``docs/primitives.md`` is the prose
+#: version. Only components listed in :data:`cf_ui.themes.COMPONENTS` have
+#: templates; the rest are contract-only until their phase lands.
+#:
+#: ``label`` and ``icon`` deliberately take no ``variant``: a label's colour
+#: belongs to the field it labels, and an icon's belongs to whatever contains
+#: it. Giving them one invites two sources of truth for the same colour.
+PRIMITIVES: dict[str, tuple[str, ...]] = {
+    "button": ("variant", "size", "state", "type"),
+    "badge": ("variant", "size"),
+    "heading": ("level", "size", "emphasis"),
+    "label": ("size",),
+    "icon": ("size",),
+}
+
+
+# ---------------------------------------------------------------------------
+# Per-theme classes
+#
+# An empty string means "the framework's default needs no class" — it is a
+# real, deliberate entry, not a gap. The completeness test treats a *missing*
+# key as the failure, so the distinction is enforced rather than assumed.
+# ---------------------------------------------------------------------------
+
+_BUTTON_CLASSES: dict[str, dict[str, Any]] = {
+    "bulma": {
+        "base": "button",
+        "variant": {
+            "primary": "is-primary",
+            "secondary": "is-link",
+            "success": "is-success",
+            "warning": "is-warning",
+            "danger": "is-danger",
+            "info": "is-info",
+            "neutral": "",
+        },
+        "size": {"small": "is-small", "normal": "", "large": "is-large"},
+        # Bulma styles disabled off the attribute, not a class.
+        "state": {"normal": "", "loading": "is-loading", "disabled": ""},
+    },
+    "bootstrap": {
+        "base": "btn",
+        "variant": {
+            "primary": "btn-primary",
+            "secondary": "btn-secondary",
+            "success": "btn-success",
+            "warning": "btn-warning",
+            "danger": "btn-danger",
+            "info": "btn-info",
+            "neutral": "btn-light",
+        },
+        "size": {"small": "btn-sm", "normal": "", "large": "btn-lg"},
+        # Bootstrap has no loading class — the spinner is an element.
+        # `.disabled` is what makes a disabled <a> look disabled.
+        "state": {"normal": "", "loading": "", "disabled": "disabled"},
+    },
+    "foundation": {
+        "base": "button",
+        "variant": {
+            "primary": "primary",
+            "secondary": "secondary",
+            "success": "success",
+            "warning": "warning",
+            "danger": "alert",
+            # Foundation ships five button colours and no informational one.
+            # `info` collapses onto secondary rather than inventing a class
+            # the framework's own CSS does not define.
+            "info": "secondary",
+            "neutral": "",
+        },
+        "size": {"small": "small", "normal": "", "large": "large"},
+        "state": {"normal": "", "loading": "", "disabled": "disabled"},
+    },
+    "fomantic": {
+        "base": "ui button",
+        "variant": {
+            "primary": "primary",
+            "secondary": "secondary",
+            "success": "positive",
+            "warning": "yellow",
+            "danger": "negative",
+            "info": "teal",
+            "neutral": "",
+        },
+        "size": {"small": "small", "normal": "", "large": "large"},
+        "state": {"normal": "", "loading": "loading", "disabled": "disabled"},
+    },
+    "daisy": {
+        "base": "btn",
+        "variant": {
+            "primary": "btn-primary",
+            "secondary": "btn-secondary",
+            "success": "btn-success",
+            "warning": "btn-warning",
+            "danger": "btn-error",
+            "info": "btn-info",
+            "neutral": "btn-neutral",
+        },
+        "size": {"small": "btn-sm", "normal": "", "large": "btn-lg"},
+        # daisyUI's loading indicator is an element (`<span class="loading">`),
+        # so `loading` carries no button class of its own.
+        "state": {"normal": "", "loading": "", "disabled": "btn-disabled"},
+    },
+}
+
+_BADGE_CLASSES: dict[str, dict[str, Any]] = {
+    "bulma": {
+        "base": "tag",
+        "variant": {
+            "primary": "is-primary",
+            "secondary": "is-link",
+            "success": "is-success",
+            "warning": "is-warning",
+            "danger": "is-danger",
+            "info": "is-info",
+            "neutral": "",
+        },
+        # The one place `normal` is not an empty class. Bulma's `.tag` defaults
+        # to its *smallest* step (0.75rem — a button's `is-small`), so reaching
+        # the middle step needs `is-medium`. See the note on SIZES.
+        "size": {"small": "", "normal": "is-medium", "large": "is-large"},
+    },
+    "bootstrap": {
+        "base": "badge",
+        "variant": {
+            "primary": "text-bg-primary",
+            "secondary": "text-bg-secondary",
+            "success": "text-bg-success",
+            "warning": "text-bg-warning",
+            "danger": "text-bg-danger",
+            # Not "": a `.badge` with no colour class is #fff on a transparent
+            # background — invisible. `neutral` cannot be the default here.
+            "neutral": "text-bg-light",
+            "info": "text-bg-info",
+        },
+        # Bootstrap 5.3 ships no badge size modifiers; badges scale from the
+        # parent via `$badge-font-size: .75em`. Not faked with `fs-*`, whose
+        # scale bottoms out *larger* than a default badge and so cannot express
+        # "small" at all.
+        "size": {"small": "", "normal": "", "large": ""},
+    },
+    "foundation": {
+        "base": "label",
+        "variant": {
+            "primary": "primary",
+            "secondary": "secondary",
+            "success": "success",
+            "warning": "warning",
+            "danger": "alert",
+            # Foundation labels ship five colours and no informational one.
+            "info": "secondary",
+            "neutral": "",
+        },
+        # Foundation ships no label size classes at all — one font-size, no
+        # modifiers. `size` is inert on this theme.
+        "size": {"small": "", "normal": "", "large": ""},
+    },
+    "fomantic": {
+        "base": "ui label",
+        "variant": {
+            "primary": "primary",
+            "secondary": "secondary",
+            # `green`/`red`, not the button map's `positive`/`negative`:
+            # `.ui.positive.label` and `.ui.negative.label` do not exist in
+            # Fomantic 2.9.3 — those are button and message variations.
+            "success": "green",
+            "warning": "yellow",
+            "danger": "red",
+            "info": "teal",
+            "neutral": "",
+        },
+        "size": {"small": "small", "normal": "", "large": "large"},
+    },
+    "daisy": {
+        "base": "badge",
+        "variant": {
+            "primary": "badge-primary",
+            "secondary": "badge-secondary",
+            "success": "badge-success",
+            "warning": "badge-warning",
+            "danger": "badge-error",
+            "info": "badge-info",
+            "neutral": "badge-neutral",
+        },
+        "size": {"small": "badge-sm", "normal": "", "large": "badge-lg"},
+    },
+}
+
+_HEADING_CLASSES: dict[str, dict[str, Any]] = {
+    "bulma": {
+        # Empty, because `title` and `subtitle` are alternatives rather than
+        # additive — the emphasis axis carries the base class instead. This is
+        # the case that forced `emphasis` to become an axis at all.
+        "base": "",
+        "size": {"small": "is-6", "normal": "is-4", "large": "is-2"},
+        "emphasis": {"normal": "title", "subtle": "subtitle"},
+    },
+    "bootstrap": {
+        "base": "",
+        # `.h1`–`.h6` are real utilities that outrank the tag selector, which
+        # is what lets level and size be set independently.
+        "size": {"small": "h6", "normal": "h4", "large": "h1"},
+        "emphasis": {"normal": "", "subtle": "text-body-secondary"},
+    },
+    "foundation": {
+        "base": "",
+        "size": {"small": "h6", "normal": "h4", "large": "h2"},
+        "emphasis": {"normal": "", "subtle": "subheader"},
+    },
+    "fomantic": {
+        "base": "ui header",
+        # Fomantic's ladder is mini/tiny/small/(nothing)/large/big/huge/massive
+        # — there is no `.ui.medium.header`. `normal` therefore emits the
+        # literal token `large`. It reads oddly, and it is the only way to keep
+        # three distinct steps while always emitting a size class; omitting one
+        # for `normal` would re-couple size to the tag.
+        "size": {"small": "small", "normal": "large", "large": "massive"},
+        # `grey`, not the idiomatic `.ui.sub.header`: `sub` sets a font-size
+        # *after* every size variation at equal specificity, so it silently
+        # destroys the size axis. Colour-only is the compatible choice.
+        "emphasis": {"normal": "", "subtle": "grey"},
+    },
+    "daisy": {
+        # Tailwind Preflight strips font-size and font-weight from h1–h6, so
+        # without this a daisy heading renders as body text.
+        "base": "font-bold",
+        "size": {"small": "text-base", "normal": "text-2xl", "large": "text-4xl"},
+        "emphasis": {"normal": "", "subtle": "opacity-60"},
+    },
+}
+
+_LABEL_CLASSES: dict[str, dict[str, Any]] = {
+    "bulma": {
+        "base": "label",
+        "size": {"small": "is-small", "normal": "", "large": "is-large"},
+    },
+    "bootstrap": {
+        "base": "form-label",
+        # No `form-label-sm`/`-lg` exists. `.small` (.875em) and `.fs-5`
+        # (1.25rem) are the exact sizes Bootstrap's own `.col-form-label-sm`
+        # and `-lg` use, so the scale is Bootstrap's rather than invented.
+        "size": {"small": "small", "normal": "", "large": "fs-5"},
+    },
+    "foundation": {
+        # Empty deliberately. Foundation styles `<label>` by element, and its
+        # `.label` class is the *badge* component — applying it would turn
+        # every field label into a blue pill.
+        "base": "",
+        # Foundation ships no font-size scale outside the button scale, so
+        # `small` has nothing to map to. `large` collapses onto `.lead`
+        # (125%, the size `.button.large` uses).
+        "size": {"small": "", "normal": "", "large": "lead"},
+    },
+    "fomantic": {
+        # Empty: the only rule is `.ui.form .field > label`, so the label is
+        # styled by ancestry. `.ui.label` is again the badge element.
+        "base": "",
+        # These land on the `.ui.form` ancestor, not the label — see the note
+        # on classes_for() about multi-element primitives.
+        "size": {"small": "small", "normal": "", "large": "large"},
+    },
+    "daisy": {
+        "base": "label",
+        # These land on the inner `.label-text` span: `.label-text` sets its
+        # own font-size, so a utility on the outer label is overridden rather
+        # than inherited.
+        "size": {"small": "text-xs", "normal": "", "large": "text-lg"},
+    },
+}
+
+_ICON_CLASSES: dict[str, dict[str, Any]] = {
+    "bulma": {
+        # The one theme with a real icon element: `.icon` does the flex
+        # centring and fixed 1.5rem box that hand-written markup misses.
+        "base": "icon",
+        "size": {"small": "is-small", "normal": "", "large": "is-large"},
+    },
+    "bootstrap": {
+        # Bootstrap ships no icon wrapper class.
+        "base": "",
+        # A mixed scale, honestly: `.small` is em-relative (.875em) and
+        # composes inside a `btn-sm`, but Bootstrap has no em-relative large,
+        # so `.fs-4` is absolute and does not. The alternatives (`.h4`,
+        # `.lead`, `.display-6`) all carry margin or weight and are worse.
+        "size": {"small": "small", "normal": "", "large": "fs-4"},
+    },
+    "foundation": {
+        # Foundation has no icon wrapper and no font-size utility scale. Its
+        # `.small-*` classes are grid breakpoint columns and would be actively
+        # harmful here, so `size` is entirely inert on this theme — the
+        # component earns its place through the aria decision alone.
+        "base": "",
+        "size": {"small": "", "normal": "", "large": ""},
+    },
+    "fomantic": {
+        # `.ui.icon` standalone does not exist — Fomantic's icon rules are
+        # element-qualified (`i.icon`), so a <span> wrapper gets nothing from
+        # them. `span.ui.text` is qualified to exactly this element and its
+        # small/large steps are the *same* font sizes as `i.small.icon` and
+        # `i.large.icon`, so this reproduces the native icon scale.
+        "base": "ui text",
+        "size": {"small": "small", "normal": "", "large": "large"},
+    },
+    "daisy": {
+        "base": "inline-flex items-center justify-center",
+        # Arbitrary em values rather than `text-sm`/`text-2xl`: Tailwind's
+        # `text-*` scale is rem-absolute, so a `text-2xl` icon inside a
+        # `btn-sm` would not scale with its container. No fixed box either — it
+        # would fight the large font-size.
+        "size": {"small": "text-[0.75em]", "normal": "", "large": "text-[1.5em]"},
+    },
+}
+
+#: Per-component maps, each keyed by theme. Adding a primitive is one entry
+#: here plus its templates — the assembly below and every test derive from it.
+_COMPONENT_CLASSES: dict[str, dict[str, dict[str, Any]]] = {
+    "button": _BUTTON_CLASSES,
+    "badge": _BADGE_CLASSES,
+    "heading": _HEADING_CLASSES,
+    "label": _LABEL_CLASSES,
+    "icon": _ICON_CLASSES,
+}
+
+
+def _assemble() -> dict[str, dict[str, dict[str, Any]]]:
+    """Invert ``{component: {theme: ...}}`` into ``{theme: {component: ...}}``.
+
+    Authored per component because that is the unit of work; consumed per
+    theme because that is the unit of rendering. A component missing a theme
+    is caught here rather than at render time.
+    """
+    assembled: dict[str, dict[str, dict[str, Any]]] = {theme: {} for theme in THEMES}
+    for component, by_theme in _COMPONENT_CLASSES.items():
+        missing = set(THEMES) - set(by_theme)
+        if missing:
+            raise PrimitiveConfigError(
+                f"{component} has no class map for {sorted(missing)} — every primitive "
+                "must cover every theme in cf_ui.themes.THEMES"
+            )
+        for theme in THEMES:
+            assembled[theme][component] = deepcopy(by_theme[theme])
+    return assembled
+
+
+#: ``{theme: {component: {axis: {value: classes}}}}``.
+CLASSES: dict[str, dict[str, dict[str, Any]]] = _assemble()
+
+
+# ---------------------------------------------------------------------------
+# The guard
+# ---------------------------------------------------------------------------
+
+
+def validate(component: str, **axes: Any) -> str:
+    """Reject an unknown primitive, axis, or axis value.
+
+    Called from every primitive template — as a Jinja global and as the
+    ``{% cf_ui_validate %}`` Django tag — in a position that renders the
+    result, hence the empty-string return.
+
+    Only the axes actually passed are checked. Templates forward whatever
+    they were given, and an omitted prop is filled by the component's default
+    further down, so absence is not an error.
+
+    An **empty** value is where this gets subtle, and :data:`AXIS_KINDS` is
+    what decides it. Django resolves a missing context variable to ``""``, so
+    an empty class-valued axis has to pass — it drops a class and leaves a
+    valid element. An empty tag- or attribute-valued axis does not: it renders
+    ``<h>`` or ``type=""``, which is malformed rather than merely unstyled, so
+    it raises.
+
+    Args:
+        component: A key of :data:`PRIMITIVES`.
+        **axes: Axis values to check, e.g. ``variant="primary"``. May also
+            carry a declared alias from :data:`ALIASES` — a wrapper forwards
+            the HTML spelling so it can be rejected rather than dropped.
+
+    Returns:
+        The empty string, always.
+
+    Raises:
+        PrimitiveConfigError: On an unknown component, an axis the component
+            does not accept, a value outside that axis's vocabulary, an empty
+            value for an axis that cannot take one, or a declared alias.
+    """
+    accepted = PRIMITIVES.get(component)
+    if accepted is None:
+        known = ", ".join(sorted(PRIMITIVES))
+        raise PrimitiveConfigError(f"unknown primitive {component!r} — known primitives: {known}")
+
+    aliases = ALIASES.get(component, {})
+
+    for axis, value in axes.items():
+        if value is None or value == "":
+            # Benign for a class — the class is not emitted and the element
+            # stays valid. Not benign for a tag or an attribute.
+            kind = AXIS_KINDS.get(axis)
+            if axis in accepted and kind is not None and kind != "class":
+                raise PrimitiveConfigError(
+                    f"{component} needs a {axis} — it becomes the element's "
+                    f"{kind}, so an empty one renders malformed markup rather "
+                    f"than unstyled markup. Pass one of: "
+                    f"{', '.join(VOCABULARIES[axis])}"
+                )
+            continue
+        if axis in aliases:
+            raise PrimitiveConfigError(
+                f"{component} takes no {axis!r} — use {aliases[axis]!r}. "
+                f"({axis!r} is a Python reserved word, so the prop is spelled "
+                f"differently; passing the HTML name would silently drop it.)"
+            )
+        if axis not in accepted:
+            raise PrimitiveConfigError(
+                f"{component} takes no {axis!r} — it accepts: {', '.join(accepted)}"
+            )
+        allowed = VOCABULARIES[axis]
+        if str(value) not in allowed:
+            raise PrimitiveConfigError(
+                f"invalid {axis} {value!r} for {component} — {axis} must be one of: "
+                f"{', '.join(allowed)}"
+            )
+    return ""
+
+
+def build_primitive_globals() -> dict[str, Any]:
+    """Jinja globals the primitive templates call.
+
+    Bound by both installers, alongside the axis globals. A primitive rendered
+    without them raises ``'cf_ui_validate' is undefined`` — loud, and naming
+    the missing piece, which is the same trade ``cf_ui_root_attrs()`` already
+    makes.
+    """
+    return {"cf_ui_validate": validate}
+
+
+def classes_for(theme: str, component: str, **axes: Any) -> str:
+    """The class string a primitive resolves to, validated.
+
+    **Not used by the templates**, and deliberately so — a class computed at
+    render time is invisible to Tailwind's scanner and gets tree-shaken out of
+    a daisyUI build. It exists for tests, documentation, and consumers
+    rendering outside the shipped templates entirely.
+
+    **Lossy for multi-element primitives.** The return value is a flat string,
+    which assumes every class in the map belongs on one element. Two shipped
+    primitives break that assumption: Fomantic styles a label through
+    ``.ui.form .field > label`` ancestry, and daisyUI puts a label's size on an
+    inner ``.label-text`` span. So ``classes_for("daisy", "label",
+    size="large")`` returns ``"label text-lg"`` — a union of two elements'
+    classes, not a string to paste on either one. The templates are the
+    authority on placement; this function is the authority on membership, and
+    the parity test in ``tests/unit/test_primitives.py`` compares the two as
+    token *sets* for exactly that reason.
+    """
+    validate(component, **axes)
+    try:
+        mapping = CLASSES[theme][component]
+    except KeyError as exc:
+        raise PrimitiveConfigError(
+            f"no class map for {theme}/{component} — implemented primitives per theme: "
+            f"{', '.join(sorted(CLASSES.get(theme, {})))}"
+        ) from exc
+
+    parts = [mapping["base"]]
+    for axis in PRIMITIVES[component]:
+        if axis not in CLASS_VALUED:
+            continue  # tag- and attribute-valued axes carry no class
+        value = axes.get(axis)
+        if value:
+            parts.append(mapping[axis][str(value)])
+    return " ".join(part for part in parts if part)
+
+
+# ---------------------------------------------------------------------------
+# JSON export
+# ---------------------------------------------------------------------------
+
+PRIMITIVE_DEFINITION_PATH = Path(__file__).parent / "static" / "cf_ui" / "cf_ui_primitives.json"
+
+
+def primitive_definition() -> dict[str, Any]:
+    """Export the vocabularies and class maps as JSON-serializable data.
+
+    Read by ``cf_ui_tailwind_plugin.mjs`` so a daisyUI build can safelist every
+    primitive class without a second copy of the value sets in JavaScript —
+    the same arrangement :func:`cf_ui.axes.axis_definition` has.
+
+    Returns:
+        A deep copy — callers may mutate the result freely.
+    """
+    return {
+        "vocabularies": {axis: list(values) for axis, values in VOCABULARIES.items()},
+        "axis_kinds": dict(AXIS_KINDS),
+        "primitives": {name: list(axes) for name, axes in PRIMITIVES.items()},
+        "classes": deepcopy(CLASSES),
+    }
+
+
+def _regenerate() -> list[Path]:
+    PRIMITIVE_DEFINITION_PATH.parent.mkdir(parents=True, exist_ok=True)
+    PRIMITIVE_DEFINITION_PATH.write_text(
+        json.dumps(primitive_definition(), indent=2) + "\n", encoding="utf-8", newline="\n"
+    )
+    return [PRIMITIVE_DEFINITION_PATH]
+
+
+if __name__ == "__main__":  # pragma: no cover
+    for path in _regenerate():
+        print(f"wrote {path}")
diff --git a/src/cf_ui/static/cf_ui/cf_ui_primitives.json b/src/cf_ui/static/cf_ui/cf_ui_primitives.json
new file mode 100644
index 0000000..3505368
--- /dev/null
+++ b/src/cf_ui/static/cf_ui/cf_ui_primitives.json
@@ -0,0 +1,418 @@
+{
+  "vocabularies": {
+    "variant": [
+      "primary",
+      "secondary",
+      "success",
+      "warning",
+      "danger",
+      "info",
+      "neutral"
+    ],
+    "size": [
+      "small",
+      "normal",
+      "large"
+    ],
+    "state": [
+      "normal",
+      "loading",
+      "disabled"
+    ],
+    "level": [
+      "1",
+      "2",
+      "3",
+      "4",
+      "5",
+      "6"
+    ],
+    "emphasis": [
+      "normal",
+      "subtle"
+    ],
+    "type": [
+      "button",
+      "submit",
+      "reset"
+    ]
+  },
+  "axis_kinds": {
+    "variant": "class",
+    "size": "class",
+    "state": "class",
+    "emphasis": "class",
+    "level": "tag",
+    "type": "attribute"
+  },
+  "primitives": {
+    "button": [
+      "variant",
+      "size",
+      "state",
+      "type"
+    ],
+    "badge": [
+      "variant",
+      "size"
+    ],
+    "heading": [
+      "level",
+      "size",
+      "emphasis"
+    ],
+    "label": [
+      "size"
+    ],
+    "icon": [
+      "size"
+    ]
+  },
+  "classes": {
+    "bulma": {
+      "button": {
+        "base": "button",
+        "variant": {
+          "primary": "is-primary",
+          "secondary": "is-link",
+          "success": "is-success",
+          "warning": "is-warning",
+          "danger": "is-danger",
+          "info": "is-info",
+          "neutral": ""
+        },
+        "size": {
+          "small": "is-small",
+          "normal": "",
+          "large": "is-large"
+        },
+        "state": {
+          "normal": "",
+          "loading": "is-loading",
+          "disabled": ""
+        }
+      },
+      "badge": {
+        "base": "tag",
+        "variant": {
+          "primary": "is-primary",
+          "secondary": "is-link",
+          "success": "is-success",
+          "warning": "is-warning",
+          "danger": "is-danger",
+          "info": "is-info",
+          "neutral": ""
+        },
+        "size": {
+          "small": "",
+          "normal": "is-medium",
+          "large": "is-large"
+        }
+      },
+      "heading": {
+        "base": "",
+        "size": {
+          "small": "is-6",
+          "normal": "is-4",
+          "large": "is-2"
+        },
+        "emphasis": {
+          "normal": "title",
+          "subtle": "subtitle"
+        }
+      },
+      "label": {
+        "base": "label",
+        "size": {
+          "small": "is-small",
+          "normal": "",
+          "large": "is-large"
+        }
+      },
+      "icon": {
+        "base": "icon",
+        "size": {
+          "small": "is-small",
+          "normal": "",
+          "large": "is-large"
+        }
+      }
+    },
+    "daisy": {
+      "button": {
+        "base": "btn",
+        "variant": {
+          "primary": "btn-primary",
+          "secondary": "btn-secondary",
+          "success": "btn-success",
+          "warning": "btn-warning",
+          "danger": "btn-error",
+          "info": "btn-info",
+          "neutral": "btn-neutral"
+        },
+        "size": {
+          "small": "btn-sm",
+          "normal": "",
+          "large": "btn-lg"
+        },
+        "state": {
+          "normal": "",
+          "loading": "",
+          "disabled": "btn-disabled"
+        }
+      },
+      "badge": {
+        "base": "badge",
+        "variant": {
+          "primary": "badge-primary",
+          "secondary": "badge-secondary",
+          "success": "badge-success",
+          "warning": "badge-warning",
+          "danger": "badge-error",
+          "info": "badge-info",
+          "neutral": "badge-neutral"
+        },
+        "size": {
+          "small": "badge-sm",
+          "normal": "",
+          "large": "badge-lg"
+        }
+      },
+      "heading": {
+        "base": "font-bold",
+        "size": {
+          "small": "text-base",
+          "normal": "text-2xl",
+          "large": "text-4xl"
+        },
+        "emphasis": {
+          "normal": "",
+          "subtle": "opacity-60"
+        }
+      },
+      "label": {
+        "base": "label",
+        "size": {
+          "small": "text-xs",
+          "normal": "",
+          "large": "text-lg"
+        }
+      },
+      "icon": {
+        "base": "inline-flex items-center justify-center",
+        "size": {
+          "small": "text-[0.75em]",
+          "normal": "",
+          "large": "text-[1.5em]"
+        }
+      }
+    },
+    "bootstrap": {
+      "button": {
+        "base": "btn",
+        "variant": {
+          "primary": "btn-primary",
+          "secondary": "btn-secondary",
+          "success": "btn-success",
+          "warning": "btn-warning",
+          "danger": "btn-danger",
+          "info": "btn-info",
+          "neutral": "btn-light"
+        },
+        "size": {
+          "small": "btn-sm",
+          "normal": "",
+          "large": "btn-lg"
+        },
+        "state": {
+          "normal": "",
+          "loading": "",
+          "disabled": "disabled"
+        }
+      },
+      "badge": {
+        "base": "badge",
+        "variant": {
+          "primary": "text-bg-primary",
+          "secondary": "text-bg-secondary",
+          "success": "text-bg-success",
+          "warning": "text-bg-warning",
+          "danger": "text-bg-danger",
+          "neutral": "text-bg-light",
+          "info": "text-bg-info"
+        },
+        "size": {
+          "small": "",
+          "normal": "",
+          "large": ""
+        }
+      },
+      "heading": {
+        "base": "",
+        "size": {
+          "small": "h6",
+          "normal": "h4",
+          "large": "h1"
+        },
+        "emphasis": {
+          "normal": "",
+          "subtle": "text-body-secondary"
+        }
+      },
+      "label": {
+        "base": "form-label",
+        "size": {
+          "small": "small",
+          "normal": "",
+          "large": "fs-5"
+        }
+      },
+      "icon": {
+        "base": "",
+        "size": {
+          "small": "small",
+          "normal": "",
+          "large": "fs-4"
+        }
+      }
+    },
+    "foundation": {
+      "button": {
+        "base": "button",
+        "variant": {
+          "primary": "primary",
+          "secondary": "secondary",
+          "success": "success",
+          "warning": "warning",
+          "danger": "alert",
+          "info": "secondary",
+          "neutral": ""
+        },
+        "size": {
+          "small": "small",
+          "normal": "",
+          "large": "large"
+        },
+        "state": {
+          "normal": "",
+          "loading": "",
+          "disabled": "disabled"
+        }
+      },
+      "badge": {
+        "base": "label",
+        "variant": {
+          "primary": "primary",
+          "secondary": "secondary",
+          "success": "success",
+          "warning": "warning",
+          "danger": "alert",
+          "info": "secondary",
+          "neutral": ""
+        },
+        "size": {
+          "small": "",
+          "normal": "",
+          "large": ""
+        }
+      },
+      "heading": {
+        "base": "",
+        "size": {
+          "small": "h6",
+          "normal": "h4",
+          "large": "h2"
+        },
+        "emphasis": {
+          "normal": "",
+          "subtle": "subheader"
+        }
+      },
+      "label": {
+        "base": "",
+        "size": {
+          "small": "",
+          "normal": "",
+          "large": "lead"
+        }
+      },
+      "icon": {
+        "base": "",
+        "size": {
+          "small": "",
+          "normal": "",
+          "large": ""
+        }
+      }
+    },
+    "fomantic": {
+      "button": {
+        "base": "ui button",
+        "variant": {
+          "primary": "primary",
+          "secondary": "secondary",
+          "success": "positive",
+          "warning": "yellow",
+          "danger": "negative",
+          "info": "teal",
+          "neutral": ""
+        },
+        "size": {
+          "small": "small",
+          "normal": "",
+          "large": "large"
+        },
+        "state": {
+          "normal": "",
+          "loading": "loading",
+          "disabled": "disabled"
+        }
+      },
+      "badge": {
+        "base": "ui label",
+        "variant": {
+          "primary": "primary",
+          "secondary": "secondary",
+          "success": "green",
+          "warning": "yellow",
+          "danger": "red",
+          "info": "teal",
+          "neutral": ""
+        },
+        "size": {
+          "small": "small",
+          "normal": "",
+          "large": "large"
+        }
+      },
+      "heading": {
+        "base": "ui header",
+        "size": {
+          "small": "small",
+          "normal": "large",
+          "large": "massive"
+        },
+        "emphasis": {
+          "normal": "",
+          "subtle": "grey"
+        }
+      },
+      "label": {
+        "base": "",
+        "size": {
+          "small": "small",
+          "normal": "",
+          "large": "large"
+        }
+      },
+      "icon": {
+        "base": "ui text",
+        "size": {
+          "small": "small",
+          "normal": "",
+          "large": "large"
+        }
+      }
+    }
+  }
+}
diff --git a/src/cf_ui/templates/cotton/_themes/bootstrap/badge.html b/src/cf_ui/templates/cotton/_themes/bootstrap/badge.html
new file mode 100644
index 0000000..fb433d6
--- /dev/null
+++ b/src/cf_ui/templates/cotton/_themes/bootstrap/badge.html
@@ -0,0 +1,3 @@
+<span
+  class="badge{% if variant == 'primary' %} text-bg-primary{% elif variant == 'secondary' %} text-bg-secondary{% elif variant == 'success' %} text-bg-success{% elif variant == 'warning' %} text-bg-warning{% elif variant == 'danger' %} text-bg-danger{% elif variant == 'info' %} text-bg-info{% elif variant == 'neutral' %} text-bg-light{% endif %}{% if class %} {{ class }}{% endif %}"
+>{{ slot }}</span>
diff --git a/src/cf_ui/templates/cotton/_themes/bootstrap/breadcrumb.html b/src/cf_ui/templates/cotton/_themes/bootstrap/breadcrumb.html
index 5ce7ff4..d5d0d03 100644
--- a/src/cf_ui/templates/cotton/_themes/bootstrap/breadcrumb.html
+++ b/src/cf_ui/templates/cotton/_themes/bootstrap/breadcrumb.html
@@ -1,13 +1,13 @@
 <nav class="{{ class }}" aria-label="breadcrumbs">
   <ol class="breadcrumb">
     {% for item in items %}
-    <li class="breadcrumb-item{% if forloop.last %} active{% endif %}">
-      {% if forloop.last %}
-      <a href="{{ item.url }}" aria-current="page">{{ item.label }}</a>
-      {% else %}
-      <a href="{{ item.url }}">{{ item.label }}</a>
-      {% endif %}
-    </li>
+      <li class="breadcrumb-item{% if forloop.last %} active{% endif %}">
+        {% if forloop.last %}
+          <a href="{{ item.url }}" aria-current="page">{{ item.label }}</a>
+        {% else %}
+          <a href="{{ item.url }}">{{ item.label }}</a>
+        {% endif %}
+      </li>
     {% endfor %}
   </ol>
 </nav>
diff --git a/src/cf_ui/templates/cotton/_themes/bootstrap/button.html b/src/cf_ui/templates/cotton/_themes/bootstrap/button.html
new file mode 100644
index 0000000..33b003a
--- /dev/null
+++ b/src/cf_ui/templates/cotton/_themes/bootstrap/button.html
@@ -0,0 +1 @@
+{% with cf_tag=href|yesno:"a,button" %}<{{ cf_tag }} class="btn{% if variant == 'primary' %} btn-primary{% elif variant == 'secondary' %} btn-secondary{% elif variant == 'success' %} btn-success{% elif variant == 'warning' %} btn-warning{% elif variant == 'danger' %} btn-danger{% elif variant == 'info' %} btn-info{% elif variant == 'neutral' %} btn-light{% endif %}{% if size == 'small' %} btn-sm{% elif size == 'large' %} btn-lg{% endif %}{% if state == 'disabled' %} disabled{% endif %}{% if full_width %} w-100{% endif %}{% if class %} {{ class }}{% endif %}"{% if href %}{% if state == 'disabled' %} role="link" aria-disabled="true"{% else %} href="{{ href }}"{% endif %}{% else %} type="{{ type }}"{% if state == 'disabled' %} disabled{% endif %}{% endif %}>{% if state == 'loading' %}<span class="spinner-border spinner-border-sm" aria-hidden="true"></span> {% endif %}{{ slot }}</{{ cf_tag }}>{% endwith %}
diff --git a/src/cf_ui/templates/cotton/_themes/bootstrap/card.html b/src/cf_ui/templates/cotton/_themes/bootstrap/card.html
index 5698098..8c18ef2 100644
--- a/src/cf_ui/templates/cotton/_themes/bootstrap/card.html
+++ b/src/cf_ui/templates/cotton/_themes/bootstrap/card.html
@@ -1,11 +1,11 @@
 <div class="card {{ class }}">
   {% if header %}
-  <div class="card-header">
-    <h5 class="card-title mb-0">{{ header }}</h5>
-  </div>
+    <div class="card-header">
+      <h5 class="card-title mb-0">{{ header }}</h5>
+    </div>
   {% endif %}
   <div class="card-body">{{ slot }}</div>
   {% if footer %}
-  <div class="card-footer">{{ footer }}</div>
+    <div class="card-footer">{{ footer }}</div>
   {% endif %}
 </div>
diff --git a/src/cf_ui/templates/cotton/_themes/bootstrap/checkbox-group.html b/src/cf_ui/templates/cotton/_themes/bootstrap/checkbox-group.html
index fcd7a06..b5b70f8 100644
--- a/src/cf_ui/templates/cotton/_themes/bootstrap/checkbox-group.html
+++ b/src/cf_ui/templates/cotton/_themes/bootstrap/checkbox-group.html
@@ -2,19 +2,23 @@
   <label class="form-label">{{ label }}</label>
   <div{% if control_class %} class="{{ control_class }}"{% endif %}>
     {% for choice in choices %}
-    <div class="form-check form-check-inline">
-      <input class="form-check-input"
-             type="checkbox"
-             id="{{ name }}-{{ choice.value }}"
-             name="{{ name }}"
-             value="{{ choice.value }}"
-             {% if choice.value in selected %}checked{% endif %}>
-      <label class="form-check-label" for="{{ name }}-{{ choice.value }}">{{ choice.label }}</label>
-    </div>
+      <div class="form-check form-check-inline">
+        <input
+          class="form-check-input"
+          type="checkbox"
+          id="{{ name }}-{{ choice.value }}"
+          name="{{ name }}"
+          value="{{ choice.value }}"
+          {% if choice.value in selected %}checked{% endif %}
+        >
+        <label class="form-check-label" for="{{ name }}-{{ choice.value }}">{{ choice.label }}</label>
+      </div>
     {% endfor %}
   </div>
-  {# `.invalid-feedback` is display:none until an `.is-invalid` sibling precedes
-     it, and a checkbox group has none — `d-block` keeps the message from
-     rendering invisibly. #}
+  {% comment %}
+  `.invalid-feedback` is display:none until an `.is-invalid` sibling precedes
+  it, and a checkbox group has none — `d-block` keeps the message from
+  rendering invisibly.
+  {% endcomment %}
   {% if error %}<div class="invalid-feedback d-block">{{ error }}</div>{% endif %}
 </div>
diff --git a/src/cf_ui/templates/cotton/_themes/bootstrap/form-field.html b/src/cf_ui/templates/cotton/_themes/bootstrap/form-field.html
index e1defc6..9ec312f 100644
--- a/src/cf_ui/templates/cotton/_themes/bootstrap/form-field.html
+++ b/src/cf_ui/templates/cotton/_themes/bootstrap/form-field.html
@@ -1,10 +1,12 @@
 <div class="mb-3 {{ class }}">
   <label class="form-label" for="{{ name }}">{{ label }}</label>
-  <input class="form-control{% if error %} is-invalid{% endif %}{% if input_class %} {{ input_class }}{% endif %}"
-         id="{{ name }}"
-         type="{{ type }}"
-         name="{{ name }}"
-         value="{{ value }}"
-         {% if required == "true" %}required{% endif %}>
+  <input
+    class="form-control{% if error %} is-invalid{% endif %}{% if input_class %} {{ input_class }}{% endif %}"
+    id="{{ name }}"
+    type="{{ type }}"
+    name="{{ name }}"
+    value="{{ value }}"
+    {% if required == "true" %}required{% endif %}
+  >
   {% if error %}<div class="invalid-feedback d-block">{{ error }}</div>{% endif %}
 </div>
diff --git a/src/cf_ui/templates/cotton/_themes/bootstrap/heading.html b/src/cf_ui/templates/cotton/_themes/bootstrap/heading.html
new file mode 100644
index 0000000..d22a31f
--- /dev/null
+++ b/src/cf_ui/templates/cotton/_themes/bootstrap/heading.html
@@ -0,0 +1 @@
+<h{{ level }} class="{% if size == 'small' %}h6{% elif size == 'normal' %}h4{% elif size == 'large' %}h1{% endif %}{% if emphasis == 'subtle' %} text-body-secondary{% endif %}{% if class %} {{ class }}{% endif %}">{{ slot }}</h{{ level }}>
diff --git a/src/cf_ui/templates/cotton/_themes/bootstrap/icon.html b/src/cf_ui/templates/cotton/_themes/bootstrap/icon.html
new file mode 100644
index 0000000..f01e5de
--- /dev/null
+++ b/src/cf_ui/templates/cotton/_themes/bootstrap/icon.html
@@ -0,0 +1,4 @@
+<span
+  class="{% if size == 'small' %}small{% elif size == 'large' %}fs-4{% endif %}{% if class %} {{ class }}{% endif %}"
+  {% if label %} role="img" aria-label="{{ label }}"{% else %} aria-hidden="true"{% endif %}
+>{{ slot }}</span>
diff --git a/src/cf_ui/templates/cotton/_themes/bootstrap/label.html b/src/cf_ui/templates/cotton/_themes/bootstrap/label.html
new file mode 100644
index 0000000..a5a9a50
--- /dev/null
+++ b/src/cf_ui/templates/cotton/_themes/bootstrap/label.html
@@ -0,0 +1,4 @@
+<label
+  class="form-label{% if size == 'small' %} small{% elif size == 'large' %} fs-5{% endif %}{% if class %} {{ class }}{% endif %}"
+  {% if for_id %} for="{{ for_id }}"{% endif %}
+>{{ slot }}{% if required %} <span class="text-danger" role="img" aria-label="required">*</span>{% endif %}</label>
diff --git a/src/cf_ui/templates/cotton/_themes/bootstrap/modal.html b/src/cf_ui/templates/cotton/_themes/bootstrap/modal.html
index 144f999..6992e73 100644
--- a/src/cf_ui/templates/cotton/_themes/bootstrap/modal.html
+++ b/src/cf_ui/templates/cotton/_themes/bootstrap/modal.html
@@ -1,15 +1,19 @@
-{# `.modal` is display:none and `.show` only sets opacity — Bootstrap's own JS
-   is what writes `style.display = "block"`. cf-ui loads none, so the reveal
-   rides on `d-block`, a real Bootstrap utility Alpine can toggle. #}
-<div id="{{ id }}"
-     class="modal {{ class }}"
-     tabindex="-1"
-     role="dialog"
-     aria-modal="true"
-     {% if header %}aria-labelledby="{{ id }}-title"{% else %}aria-label="{{ label|default:'Dialog' }}"{% endif %}
-     x-data="cfModal"
-     x-init="initModal()"
-     :class="{ 'show': open, 'd-block': open }">
+{% comment %}
+`.modal` is display:none and `.show` only sets opacity — Bootstrap's own JS
+is what writes `style.display = "block"`. cf-ui loads none, so the reveal
+rides on `d-block`, a real Bootstrap utility Alpine can toggle.
+{% endcomment %}
+<div
+  id="{{ id }}"
+  class="modal {{ class }}"
+  tabindex="-1"
+  role="dialog"
+  aria-modal="true"
+  {% if header %}aria-labelledby="{{ id }}-title"{% else %}aria-label="{{ label|default:'Dialog' }}"{% endif %}
+  x-data="cfModal"
+  x-init="initModal()"
+  :class="{ 'show': open, 'd-block': open }"
+>
   <div class="modal-dialog">
     <div class="modal-content">
       <div class="modal-header">
@@ -18,13 +22,15 @@ <h5 class="modal-title" id="{{ id }}-title">{{ header }}</h5>
       </div>
       <div class="modal-body">{{ slot }}</div>
       {% if footer %}
-      <div class="modal-footer">{{ footer }}</div>
+        <div class="modal-footer">{{ footer }}</div>
       {% endif %}
     </div>
   </div>
-  {# Bootstrap puts the backdrop on <body> at z-index 1050, under the modal's
-     1055. Without its JS the backdrop has to live inside the modal, where 1050
-     would paint it *over* the dialog — `.modal` opens a stacking context. A
-     negative z-index puts it back underneath without inventing a class. #}
+  {% comment %}
+  Bootstrap puts the backdrop on <body> at z-index 1050, under the modal's
+  1055. Without its JS the backdrop has to live inside the modal, where 1050
+  would paint it *over* the dialog — `.modal` opens a stacking context. A
+  negative z-index puts it back underneath without inventing a class.
+  {% endcomment %}
   <div class="modal-backdrop show" style="z-index:-1" @click="close()"></div>
 </div>
diff --git a/src/cf_ui/templates/cotton/_themes/bootstrap/navbar.html b/src/cf_ui/templates/cotton/_themes/bootstrap/navbar.html
index 1a11fe7..add1c86 100644
--- a/src/cf_ui/templates/cotton/_themes/bootstrap/navbar.html
+++ b/src/cf_ui/templates/cotton/_themes/bootstrap/navbar.html
@@ -1,16 +1,24 @@
-{# `.collapse:not(.show) { display: none }` and
-   `.navbar-expand-lg .navbar-collapse { display: flex !important }` are both
-   plain CSS, so the menu collapses on mobile and stays open on desktop with
-   Alpine off. Only the toggle needs JS. #}
-<nav class="navbar navbar-expand-lg {{ class }}" role="navigation" aria-label="main navigation"
-     x-data="cfNavbar">
+{% comment %}
+`.collapse:not(.show) { display: none }` and
+`.navbar-expand-lg .navbar-collapse { display: flex !important }` are both
+plain CSS, so the menu collapses on mobile and stays open on desktop with
+Alpine off. Only the toggle needs JS.
+{% endcomment %}
+<nav
+  class="navbar navbar-expand-lg {{ class }}"
+  role="navigation"
+  aria-label="main navigation"
+  x-data="cfNavbar"
+>
   <div class="container-fluid">
     <span class="navbar-brand">{{ brand }}</span>
-    <button type="button"
-            class="navbar-toggler"
-            aria-label="menu"
-            :aria-expanded="menuOpen"
-            @click="toggle()">
+    <button
+      type="button"
+      class="navbar-toggler"
+      aria-label="menu"
+      :aria-expanded="menuOpen"
+      @click="toggle()"
+    >
       <span class="navbar-toggler-icon"></span>
     </button>
     <div class="collapse navbar-collapse" :class="{ 'show': menuOpen }">
diff --git a/src/cf_ui/templates/cotton/_themes/bootstrap/notification.html b/src/cf_ui/templates/cotton/_themes/bootstrap/notification.html
index d3bc1c3..dc367dd 100644
--- a/src/cf_ui/templates/cotton/_themes/bootstrap/notification.html
+++ b/src/cf_ui/templates/cotton/_themes/bootstrap/notification.html
@@ -1,12 +1,16 @@
-<div role="alert"
-     class="alert {% if type == 'danger' or type == 'error' %}alert-danger{% elif type == 'success' %}alert-success{% elif type == 'warning' %}alert-warning{% elif type == 'primary' %}alert-primary{% elif type == 'secondary' %}alert-secondary{% else %}alert-info{% endif %}{% if dismissible == "true" %} alert-dismissible{% endif %} {{ class }}"
-     x-data="{ visible: true }"
-     x-show="visible">
+<div
+  role="alert"
+  class="alert {% if type == 'danger' or type == 'error' %}alert-danger{% elif type == 'success' %}alert-success{% elif type == 'warning' %}alert-warning{% elif type == 'primary' %}alert-primary{% elif type == 'secondary' %}alert-secondary{% else %}alert-info{% endif %}{% if dismissible == "true" %} alert-dismissible{% endif %} {{ class }}"
+  x-data="{ visible: true }"
+  x-show="visible"
+>
   <span>{{ message }}</span>
   {% if dismissible == "true" %}
-  <button type="button"
-          class="btn-close"
-          aria-label="dismiss"
-          @click="visible = false"></button>
+    <button
+      type="button"
+      class="btn-close"
+      aria-label="dismiss"
+      @click="visible = false"
+    ></button>
   {% endif %}
 </div>
diff --git a/src/cf_ui/templates/cotton/_themes/bootstrap/pagination.html b/src/cf_ui/templates/cotton/_themes/bootstrap/pagination.html
index c4f390b..57d35ed 100644
--- a/src/cf_ui/templates/cotton/_themes/bootstrap/pagination.html
+++ b/src/cf_ui/templates/cotton/_themes/bootstrap/pagination.html
@@ -2,37 +2,40 @@
 <nav class="{{ class }}" role="navigation" aria-label="pagination">
   <ul class="pagination">
     {% if page|add:"0" > 1 %}
-    <li class="page-item">
-      <a class="page-link"
-         hx-get="{{ hx_url }}?page={{ page|add:"-1" }}"
-         hx-target="{{ hx_target }}">Previous</a>
-    </li>
+      <li class="page-item">
+        <a
+          class="page-link"
+          hx-get="{{ hx_url }}?page={{ page|add:"-1" }}"
+          hx-target="{{ hx_target }}"
+        >Previous</a>
+      </li>
     {% else %}
-    <li class="page-item disabled">
-      <a class="page-link" aria-disabled="true">Previous</a>
-    </li>
+      <li class="page-item disabled">
+        <a class="page-link" aria-disabled="true">Previous</a>
+      </li>
     {% endif %}
     {% for p in total_pages|make_list_1_to_n %}
-    <li class="page-item{% if p == page|add:'0' %} active{% endif %}">
-      <a class="page-link"
-         {% if p != page|add:"0" %}
-         hx-get="{{ hx_url }}?page={{ p }}"
-         hx-target="{{ hx_target }}"
-         {% endif %}
-         aria-label="Page {{ p }}"
-         {% if p == page|add:'0' %}aria-current="page"{% endif %}>{{ p }}</a>
-    </li>
+      <li class="page-item{% if p == page|add:'0' %} active{% endif %}">
+        <a
+          class="page-link"
+          {% if p != page|add:"0" %} hx-get="{{ hx_url }}?page={{ p }}" hx-target="{{ hx_target }}" {% endif %}
+          aria-label="Page {{ p }}"
+          {% if p == page|add:'0' %}aria-current="page"{% endif %}
+        >{{ p }}</a>
+      </li>
     {% endfor %}
     {% if page|add:"0" < total_pages|add:"0" %}
-    <li class="page-item">
-      <a class="page-link"
-         hx-get="{{ hx_url }}?page={{ page|add:"1" }}"
-         hx-target="{{ hx_target }}">Next</a>
-    </li>
+      <li class="page-item">
+        <a
+          class="page-link"
+          hx-get="{{ hx_url }}?page={{ page|add:"1" }}"
+          hx-target="{{ hx_target }}"
+        >Next</a>
+      </li>
     {% else %}
-    <li class="page-item disabled">
-      <a class="page-link" aria-disabled="true">Next</a>
-    </li>
+      <li class="page-item disabled">
+        <a class="page-link" aria-disabled="true">Next</a>
+      </li>
     {% endif %}
   </ul>
 </nav>
diff --git a/src/cf_ui/templates/cotton/_themes/bootstrap/panel.html b/src/cf_ui/templates/cotton/_themes/bootstrap/panel.html
index 15d679f..5c26d27 100644
--- a/src/cf_ui/templates/cotton/_themes/bootstrap/panel.html
+++ b/src/cf_ui/templates/cotton/_themes/bootstrap/panel.html
@@ -1,24 +1,32 @@
-{# The body deliberately carries no `.collapse`: that class is display:none
-   without `.show`, which would hide a server-open panel permanently once
-   Alpine is off. `x-show` owns display here, seeded from `data-cf-open`. #}
-<div class="accordion {{ class }}"
-     x-data="cfPanel"
-     x-init="initPanel()"
-     data-cf-open="{% if open and open != 'false' %}true{% else %}false{% endif %}">
+{% comment %}
+The body deliberately carries no `.collapse`: that class is display:none
+without `.show`, which would hide a server-open panel permanently once
+Alpine is off. `x-show` owns display here, seeded from `data-cf-open`.
+{% endcomment %}
+<div
+  class="accordion {{ class }}"
+  x-data="cfPanel"
+  x-init="initPanel()"
+  data-cf-open="{% if open and open != 'false' %}true{% else %}false{% endif %}"
+>
   <div class="accordion-item">
     <h2 class="accordion-header">
-      <button type="button"
-              class="accordion-button{% if not open or open == 'false' %} collapsed{% endif %}"
-              aria-controls="{{ id }}-body"
-              aria-expanded="{% if open and open != 'false' %}true{% else %}false{% endif %}"
-              :aria-expanded="open"
-              :class="{ 'collapsed': !open }"
-              @click="toggle()">{{ title }}</button>
+      <button
+        type="button"
+        class="accordion-button{% if not open or open == 'false' %} collapsed{% endif %}"
+        aria-controls="{{ id }}-body"
+        aria-expanded="{% if open and open != 'false' %}true{% else %}false{% endif %}"
+        :aria-expanded="open"
+        :class="{ 'collapsed': !open }"
+        @click="toggle()"
+      >{{ title }}</button>
     </h2>
-    <div id="{{ id }}-body"
-         class="accordion-collapse"
-         x-show="open"
-         {% if not open or open == 'false' %}x-cloak{% endif %}>
+    <div
+      id="{{ id }}-body"
+      class="accordion-collapse"
+      x-show="open"
+      {% if not open or open == 'false' %}x-cloak{% endif %}
+    >
       <div class="accordion-body">{{ slot }}</div>
     </div>
   </div>
diff --git a/src/cf_ui/templates/cotton/_themes/bootstrap/progress.html b/src/cf_ui/templates/cotton/_themes/bootstrap/progress.html
index 8a580fe..95f3167 100644
--- a/src/cf_ui/templates/cotton/_themes/bootstrap/progress.html
+++ b/src/cf_ui/templates/cotton/_themes/bootstrap/progress.html
@@ -1,15 +1,21 @@
-{# Bootstrap's bar is a div sized in percent, not a native <progress>, so the
-   width has to be computed from value/max rather than emitted verbatim.
-   `widthratio` returns "0" on a zero max rather than raising. #}
+{% comment %}
+Bootstrap's bar is a div sized in percent, not a native <progress>, so the
+width has to be computed from value/max rather than emitted verbatim.
+`widthratio` returns "0" on a zero max rather than raising.
+{% endcomment %}
 <div class="{{ class }}">
   {% if label %}<p class="text-center mb-1">{{ label }}</p>{% endif %}
-  <div class="progress"
-       role="progressbar"
-       aria-label="{% if label %}{{ label }}{% else %}progress{% endif %}"
-       aria-valuenow="{{ value }}"
-       aria-valuemin="0"
-       aria-valuemax="{{ max }}">
-    <div class="progress-bar {% if type == 'danger' or type == 'error' %}bg-danger{% elif type == 'success' %}bg-success{% elif type == 'warning' %}bg-warning{% elif type == 'info' %}bg-info{% else %}bg-primary{% endif %}"
-         style="width: {% widthratio value max 100 %}%"></div>
+  <div
+    class="progress"
+    role="progressbar"
+    aria-label="{% if label %}{{ label }}{% else %}progress{% endif %}"
+    aria-valuenow="{{ value }}"
+    aria-valuemin="0"
+    aria-valuemax="{{ max }}"
+  >
+    <div
+      class="progress-bar {% if type == 'danger' or type == 'error' %}bg-danger{% elif type == 'success' %}bg-success{% elif type == 'warning' %}bg-warning{% elif type == 'info' %}bg-info{% else %}bg-primary{% endif %}"
+      style="width: {% widthratio value max 100 %}%"
+    ></div>
   </div>
 </div>
diff --git a/src/cf_ui/templates/cotton/_themes/bootstrap/select.html b/src/cf_ui/templates/cotton/_themes/bootstrap/select.html
index 881d8e8..c9c4a26 100644
--- a/src/cf_ui/templates/cotton/_themes/bootstrap/select.html
+++ b/src/cf_ui/templates/cotton/_themes/bootstrap/select.html
@@ -1,12 +1,15 @@
 <div class="mb-3 {{ class }}">
   <label class="form-label" for="{{ name }}">{{ label }}</label>
-  <select class="form-select{% if error %} is-invalid{% endif %}{% if input_class %} {{ input_class }}{% endif %}"
-          id="{{ name }}"
-          name="{{ name }}">
+  <select
+    class="form-select{% if error %} is-invalid{% endif %}{% if input_class %} {{ input_class }}{% endif %}"
+    id="{{ name }}"
+    name="{{ name }}"
+  >
     {% for opt in options %}
-    <option value="{{ opt.value }}"{% if opt.value|stringformat:"s" == value|stringformat:"s" %} selected{% endif %}>
-      {{ opt.label }}
-    </option>
+      <option
+        value="{{ opt.value }}"
+        {% if opt.value|stringformat:"s" == value|stringformat:"s" %} selected{% endif %}
+      >{{ opt.label }}</option>
     {% endfor %}
   </select>
   {% if error %}<div class="invalid-feedback d-block">{{ error }}</div>{% endif %}
diff --git a/src/cf_ui/templates/cotton/_themes/bootstrap/table.html b/src/cf_ui/templates/cotton/_themes/bootstrap/table.html
index 26c15a1..5cbd743 100644
--- a/src/cf_ui/templates/cotton/_themes/bootstrap/table.html
+++ b/src/cf_ui/templates/cotton/_themes/bootstrap/table.html
@@ -4,17 +4,17 @@
     <thead>
       <tr>
         {% for col in columns %}
-        <th scope="col">{{ col.label }}</th>
+          <th scope="col">{{ col.label }}</th>
         {% endfor %}
       </tr>
     </thead>
     <tbody>
       {% for row in rows %}
-      <tr>
-        {% for col in columns %}
-        <td>{{ row|get_item:col.key }}</td>
-        {% endfor %}
-      </tr>
+        <tr>
+          {% for col in columns %}
+            <td>{{ row|get_item:col.key }}</td>
+          {% endfor %}
+        </tr>
       {% endfor %}
     </tbody>
   </table>
diff --git a/src/cf_ui/templates/cotton/_themes/bootstrap/tabs.html b/src/cf_ui/templates/cotton/_themes/bootstrap/tabs.html
index 51dfad7..e216229 100644
--- a/src/cf_ui/templates/cotton/_themes/bootstrap/tabs.html
+++ b/src/cf_ui/templates/cotton/_themes/bootstrap/tabs.html
@@ -1,23 +1,27 @@
-<div class="{{ class }}"
-     x-data="cfTabs"
-     x-init="initTabs()"
-     data-cf-active="{{ active }}">
+<div
+  class="{{ class }}"
+  x-data="cfTabs"
+  x-init="initTabs()"
+  data-cf-active="{{ active }}"
+>
   <ul class="nav nav-tabs" role="tablist" @keydown="onKeydown($event)">
     {% for tab in tabs %}
-    <li class="nav-item" role="presentation">
-      <a role="tab"
-         data-cf-tab="{{ tab.id }}"
-         class="nav-link{% if tab.id == active %} active{% endif %}"
-         aria-controls="{{ hx_target }}"
-         aria-selected="{% if tab.id == active %}true{% else %}false{% endif %}"
-         tabindex="{% if tab.id == active or not active and forloop.first %}0{% else %}-1{% endif %}"
-         :class="{ 'active': active === $el.dataset.cfTab }"
-         :aria-selected="active === $el.dataset.cfTab"
-         :tabindex="tabIndexFor($el.dataset.cfTab)"
-         @click.prevent="setActive($el.dataset.cfTab)"
-         hx-get="{{ tab.url }}"
-         hx-target="#{{ hx_target }}">{{ tab.id }}</a>
-    </li>
+      <li class="nav-item" role="presentation">
+        <a
+          role="tab"
+          data-cf-tab="{{ tab.id }}"
+          class="nav-link{% if tab.id == active %} active{% endif %}"
+          aria-controls="{{ hx_target }}"
+          aria-selected="{% if tab.id == active %}true{% else %}false{% endif %}"
+          tabindex="{% if tab.id == active or not active and forloop.first %}0{% else %}-1{% endif %}"
+          :class="{ 'active': active === $el.dataset.cfTab }"
+          :aria-selected="active === $el.dataset.cfTab"
+          :tabindex="tabIndexFor($el.dataset.cfTab)"
+          @click.prevent="setActive($el.dataset.cfTab)"
+          hx-get="{{ tab.url }}"
+          hx-target="#{{ hx_target }}"
+        >{{ tab.id }}</a>
+      </li>
     {% endfor %}
   </ul>
   <div id="{{ hx_target }}" role="tabpanel">{{ slot }}</div>
diff --git a/src/cf_ui/templates/cotton/_themes/bootstrap/textarea.html b/src/cf_ui/templates/cotton/_themes/bootstrap/textarea.html
index 29cedbb..bb50b05 100644
--- a/src/cf_ui/templates/cotton/_themes/bootstrap/textarea.html
+++ b/src/cf_ui/templates/cotton/_themes/bootstrap/textarea.html
@@ -1,8 +1,10 @@
 <div class="mb-3 {{ class }}">
   <label class="form-label" for="{{ name }}">{{ label }}</label>
-  <textarea class="form-control{% if error %} is-invalid{% endif %}{% if input_class %} {{ input_class }}{% endif %}"
-            id="{{ name }}"
-            name="{{ name }}"
-            rows="{{ rows }}">{{ value }}</textarea>
+  <textarea
+    class="form-control{% if error %} is-invalid{% endif %}{% if input_class %} {{ input_class }}{% endif %}"
+    id="{{ name }}"
+    name="{{ name }}"
+    rows="{{ rows }}"
+  >{{ value }}</textarea>
   {% if error %}<div class="invalid-feedback d-block">{{ error }}</div>{% endif %}
 </div>
diff --git a/src/cf_ui/templates/cotton/_themes/bulma/badge.html b/src/cf_ui/templates/cotton/_themes/bulma/badge.html
new file mode 100644
index 0000000..358ff47
--- /dev/null
+++ b/src/cf_ui/templates/cotton/_themes/bulma/badge.html
@@ -0,0 +1,3 @@
+<span
+  class="tag{% if variant == 'primary' %} is-primary{% elif variant == 'secondary' %} is-link{% elif variant == 'success' %} is-success{% elif variant == 'warning' %} is-warning{% elif variant == 'danger' %} is-danger{% elif variant == 'info' %} is-info{% endif %}{% if size == 'normal' %} is-medium{% elif size == 'large' %} is-large{% endif %}{% if class %} {{ class }}{% endif %}"
+>{{ slot }}</span>
diff --git a/src/cf_ui/templates/cotton/_themes/bulma/breadcrumb.html b/src/cf_ui/templates/cotton/_themes/bulma/breadcrumb.html
index c78083d..7a6aa45 100644
--- a/src/cf_ui/templates/cotton/_themes/bulma/breadcrumb.html
+++ b/src/cf_ui/templates/cotton/_themes/bulma/breadcrumb.html
@@ -1,13 +1,13 @@
 <nav class="breadcrumb {{ class }}" aria-label="breadcrumbs">
   <ul>
     {% for item in items %}
-    <li{% if forloop.last %} class="is-active"{% endif %}>
-      {% if forloop.last %}
-      <a href="{{ item.url }}" aria-current="page">{{ item.label }}</a>
-      {% else %}
-      <a href="{{ item.url }}">{{ item.label }}</a>
-      {% endif %}
-    </li>
+      <li{% if forloop.last %} class="is-active"{% endif %}>
+        {% if forloop.last %}
+          <a href="{{ item.url }}" aria-current="page">{{ item.label }}</a>
+        {% else %}
+          <a href="{{ item.url }}">{{ item.label }}</a>
+        {% endif %}
+      </li>
     {% endfor %}
   </ul>
 </nav>
diff --git a/src/cf_ui/templates/cotton/_themes/bulma/button.html b/src/cf_ui/templates/cotton/_themes/bulma/button.html
new file mode 100644
index 0000000..27026bf
--- /dev/null
+++ b/src/cf_ui/templates/cotton/_themes/bulma/button.html
@@ -0,0 +1 @@
+{% with cf_tag=href|yesno:"a,button" %}<{{ cf_tag }} class="button{% if variant == 'primary' %} is-primary{% elif variant == 'secondary' %} is-link{% elif variant == 'success' %} is-success{% elif variant == 'warning' %} is-warning{% elif variant == 'danger' %} is-danger{% elif variant == 'info' %} is-info{% endif %}{% if size == 'small' %} is-small{% elif size == 'large' %} is-large{% endif %}{% if state == 'loading' %} is-loading{% endif %}{% if full_width %} is-fullwidth{% endif %}{% if class %} {{ class }}{% endif %}"{% if href %}{% if state == 'disabled' %} role="link" aria-disabled="true"{% else %} href="{{ href }}"{% endif %}{% else %} type="{{ type }}"{% if state == 'disabled' %} disabled{% endif %}{% endif %}>{{ slot }}</{{ cf_tag }}>{% endwith %}
diff --git a/src/cf_ui/templates/cotton/_themes/bulma/card.html b/src/cf_ui/templates/cotton/_themes/bulma/card.html
index 9f2e1b2..5098d92 100644
--- a/src/cf_ui/templates/cotton/_themes/bulma/card.html
+++ b/src/cf_ui/templates/cotton/_themes/bulma/card.html
@@ -1,15 +1,15 @@
 <div class="card {{ class }}">
   {% if header %}
-  <header class="card-header">
-    <p class="card-header-title">{{ header }}</p>
-  </header>
+    <header class="card-header">
+      <p class="card-header-title">{{ header }}</p>
+    </header>
   {% endif %}
   <div class="card-content">
     <div class="content">{{ slot }}</div>
   </div>
   {% if footer %}
-  <footer class="card-footer">
-    <div class="card-footer-item">{{ footer }}</div>
-  </footer>
+    <footer class="card-footer">
+      <div class="card-footer-item">{{ footer }}</div>
+    </footer>
   {% endif %}
 </div>
diff --git a/src/cf_ui/templates/cotton/_themes/bulma/checkbox-group.html b/src/cf_ui/templates/cotton/_themes/bulma/checkbox-group.html
index 190977a..2fa07ef 100644
--- a/src/cf_ui/templates/cotton/_themes/bulma/checkbox-group.html
+++ b/src/cf_ui/templates/cotton/_themes/bulma/checkbox-group.html
@@ -2,13 +2,15 @@
   <label class="label">{{ label }}</label>
   <div class="control{% if control_class %} {{ control_class }}{% endif %}">
     {% for choice in choices %}
-    <label class="checkbox mr-3">
-      <input type="checkbox"
-             name="{{ name }}"
-             value="{{ choice.value }}"
-             {% if choice.value in selected %}checked{% endif %}>
-      {{ choice.label }}
-    </label>
+      <label class="checkbox mr-3">
+        <input
+          type="checkbox"
+          name="{{ name }}"
+          value="{{ choice.value }}"
+          {% if choice.value in selected %}checked{% endif %}
+        >
+        {{ choice.label }}
+      </label>
     {% endfor %}
   </div>
   {% if error %}<p class="help is-danger">{{ error }}</p>{% endif %}
diff --git a/src/cf_ui/templates/cotton/_themes/bulma/form-field.html b/src/cf_ui/templates/cotton/_themes/bulma/form-field.html
index d8d2c31..8bea0ad 100644
--- a/src/cf_ui/templates/cotton/_themes/bulma/form-field.html
+++ b/src/cf_ui/templates/cotton/_themes/bulma/form-field.html
@@ -1,12 +1,14 @@
 <div class="field {{ class }}">
   <label class="label" for="{{ name }}">{{ label }}</label>
   <div class="control">
-    <input class="input{% if error %} is-danger{% endif %}{% if input_class %} {{ input_class }}{% endif %}"
-           id="{{ name }}"
-           type="{{ type }}"
-           name="{{ name }}"
-           value="{{ value }}"
-           {% if required == "true" %}required{% endif %}>
+    <input
+      class="input{% if error %} is-danger{% endif %}{% if input_class %} {{ input_class }}{% endif %}"
+      id="{{ name }}"
+      type="{{ type }}"
+      name="{{ name }}"
+      value="{{ value }}"
+      {% if required == "true" %}required{% endif %}
+    >
   </div>
   {% if error %}<p class="help is-danger">{{ error }}</p>{% endif %}
 </div>
diff --git a/src/cf_ui/templates/cotton/_themes/bulma/heading.html b/src/cf_ui/templates/cotton/_themes/bulma/heading.html
new file mode 100644
index 0000000..b223df5
--- /dev/null
+++ b/src/cf_ui/templates/cotton/_themes/bulma/heading.html
@@ -0,0 +1,8 @@
+{% comment %} `title` and `subtitle` are Bulma alternatives, not additive — `.subtitle` is
+   defined after `.title` at equal specificity, so an element carrying both renders as a
+   subtitle with the title rules dead underneath. The emphasis axis therefore carries the
+   base class, and this branch is an `else` rather than an `elif` so exactly one of the two
+   is always emitted: an `emphasis` that reached here empty would otherwise produce a
+   heading with no Bulma class at all, which is a broken render rather than a missing
+modifier. {% endcomment %}
+<h{{ level }} class="{% if emphasis == 'subtle' %}subtitle{% else %}title{% endif %}{% if size == 'small' %} is-6{% elif size == 'normal' %} is-4{% elif size == 'large' %} is-2{% endif %}{% if class %} {{ class }}{% endif %}">{{ slot }}</h{{ level }}>
diff --git a/src/cf_ui/templates/cotton/_themes/bulma/icon.html b/src/cf_ui/templates/cotton/_themes/bulma/icon.html
new file mode 100644
index 0000000..d5cc94e
--- /dev/null
+++ b/src/cf_ui/templates/cotton/_themes/bulma/icon.html
@@ -0,0 +1,4 @@
+<span
+  class="icon{% if size == 'small' %} is-small{% elif size == 'large' %} is-large{% endif %}{% if class %} {{ class }}{% endif %}"
+  {% if label %} role="img" aria-label="{{ label }}"{% else %} aria-hidden="true"{% endif %}
+>{{ slot }}</span>
diff --git a/src/cf_ui/templates/cotton/_themes/bulma/label.html b/src/cf_ui/templates/cotton/_themes/bulma/label.html
new file mode 100644
index 0000000..6fb9972
--- /dev/null
+++ b/src/cf_ui/templates/cotton/_themes/bulma/label.html
@@ -0,0 +1,4 @@
+<label
+  class="label{% if size == 'small' %} is-small{% elif size == 'large' %} is-large{% endif %}{% if class %} {{ class }}{% endif %}"
+  {% if for_id %} for="{{ for_id }}"{% endif %}
+>{{ slot }}{% if required %} <span class="has-text-danger" role="img" aria-label="required">*</span>{% endif %}</label>
diff --git a/src/cf_ui/templates/cotton/_themes/bulma/modal.html b/src/cf_ui/templates/cotton/_themes/bulma/modal.html
index ae69c51..e5c2fbf 100644
--- a/src/cf_ui/templates/cotton/_themes/bulma/modal.html
+++ b/src/cf_ui/templates/cotton/_themes/bulma/modal.html
@@ -1,11 +1,13 @@
-<div id="{{ id }}"
-     class="modal {{ class }}"
-     role="dialog"
-     aria-modal="true"
-     {% if header %}aria-labelledby="{{ id }}-title"{% else %}aria-label="{{ label|default:'Dialog' }}"{% endif %}
-     x-data="cfModal"
-     x-init="initModal()"
-     :class="{ 'is-active': open }">
+<div
+  id="{{ id }}"
+  class="modal {{ class }}"
+  role="dialog"
+  aria-modal="true"
+  {% if header %}aria-labelledby="{{ id }}-title"{% else %}aria-label="{{ label|default:'Dialog' }}"{% endif %}
+  x-data="cfModal"
+  x-init="initModal()"
+  :class="{ 'is-active': open }"
+>
   <div class="modal-background" @click="close()"></div>
   <div class="modal-card">
     <header class="modal-card-head">
diff --git a/src/cf_ui/templates/cotton/_themes/bulma/navbar.html b/src/cf_ui/templates/cotton/_themes/bulma/navbar.html
index 5d80467..0393eb7 100644
--- a/src/cf_ui/templates/cotton/_themes/bulma/navbar.html
+++ b/src/cf_ui/templates/cotton/_themes/bulma/navbar.html
@@ -1,13 +1,19 @@
-<nav class="navbar {{ class }}" role="navigation" aria-label="main navigation"
-     x-data="cfNavbar">
+<nav
+  class="navbar {{ class }}"
+  role="navigation"
+  aria-label="main navigation"
+  x-data="cfNavbar"
+>
   <div class="navbar-brand">
     {{ brand }}
-    <a role="button"
-       class="navbar-burger"
-       aria-label="menu"
-       :aria-expanded="menuOpen"
-       @click="toggle()"
-       :class="{ 'is-active': menuOpen }">
+    <a
+      role="button"
+      class="navbar-burger"
+      aria-label="menu"
+      :aria-expanded="menuOpen"
+      @click="toggle()"
+      :class="{ 'is-active': menuOpen }"
+    >
       <span aria-hidden="true"></span>
       <span aria-hidden="true"></span>
       <span aria-hidden="true"></span>
diff --git a/src/cf_ui/templates/cotton/_themes/bulma/notification.html b/src/cf_ui/templates/cotton/_themes/bulma/notification.html
index 4666c34..ce8c542 100644
--- a/src/cf_ui/templates/cotton/_themes/bulma/notification.html
+++ b/src/cf_ui/templates/cotton/_themes/bulma/notification.html
@@ -1,8 +1,10 @@
-<div class="notification is-{{ type }} {{ class }}"
-     x-data="{ visible: true }"
-     x-show="visible">
+<div
+  class="notification is-{{ type }} {{ class }}"
+  x-data="{ visible: true }"
+  x-show="visible"
+>
   {% if dismissible == "true" %}
-  <button class="delete" @click="visible = false"></button>
+    <button class="delete" @click="visible = false"></button>
   {% endif %}
   {{ message }}
 </div>
diff --git a/src/cf_ui/templates/cotton/_themes/bulma/pagination.html b/src/cf_ui/templates/cotton/_themes/bulma/pagination.html
index f2f42b6..4ca374c 100644
--- a/src/cf_ui/templates/cotton/_themes/bulma/pagination.html
+++ b/src/cf_ui/templates/cotton/_themes/bulma/pagination.html
@@ -1,30 +1,37 @@
 {% load cf_ui %}
-<nav class="pagination is-centered {{ class }}" role="navigation" aria-label="pagination">
+<nav
+  class="pagination is-centered {{ class }}"
+  role="navigation"
+  aria-label="pagination"
+>
   {% if page|add:"0" > 1 %}
-  <a class="pagination-previous"
-     hx-get="{{ hx_url }}?page={{ page|add:"-1" }}"
-     hx-target="{{ hx_target }}">Previous</a>
+    <a
+      class="pagination-previous"
+      hx-get="{{ hx_url }}?page={{ page|add:"-1" }}"
+      hx-target="{{ hx_target }}"
+    >Previous</a>
   {% else %}
-  <a class="pagination-previous" disabled>Previous</a>
+    <a class="pagination-previous" disabled>Previous</a>
   {% endif %}
   {% if page|add:"0" < total_pages|add:"0" %}
-  <a class="pagination-next"
-     hx-get="{{ hx_url }}?page={{ page|add:"1" }}"
-     hx-target="{{ hx_target }}">Next</a>
+    <a
+      class="pagination-next"
+      hx-get="{{ hx_url }}?page={{ page|add:"1" }}"
+      hx-target="{{ hx_target }}"
+    >Next</a>
   {% else %}
-  <a class="pagination-next" disabled>Next</a>
+    <a class="pagination-next" disabled>Next</a>
   {% endif %}
   <ul class="pagination-list">
     {% for p in total_pages|make_list_1_to_n %}
-    <li>
-      <a class="pagination-link{% if p == page|add:'0' %} is-current{% endif %}"
-         {% if p != page|add:"0" %}
-         hx-get="{{ hx_url }}?page={{ p }}"
-         hx-target="{{ hx_target }}"
-         {% endif %}
-         aria-label="Page {{ p }}"
-         {% if p == page|add:"0" %}aria-current="page"{% endif %}>{{ p }}</a>
-    </li>
+      <li>
+        <a
+          class="pagination-link{% if p == page|add:'0' %} is-current{% endif %}"
+          {% if p != page|add:"0" %} hx-get="{{ hx_url }}?page={{ p }}" hx-target="{{ hx_target }}" {% endif %}
+          aria-label="Page {{ p }}"
+          {% if p == page|add:"0" %}aria-current="page"{% endif %}
+        >{{ p }}</a>
+      </li>
     {% endfor %}
   </ul>
 </nav>
diff --git a/src/cf_ui/templates/cotton/_themes/bulma/panel.html b/src/cf_ui/templates/cotton/_themes/bulma/panel.html
index 31048eb..2e7aeec 100644
--- a/src/cf_ui/templates/cotton/_themes/bulma/panel.html
+++ b/src/cf_ui/templates/cotton/_themes/bulma/panel.html
@@ -1,25 +1,32 @@
-<div class="card {{ class }}"
-     x-data="cfPanel"
-     x-init="initPanel()"
-     data-cf-open="{% if open and open != 'false' %}true{% else %}false{% endif %}">
+<div
+  class="card {{ class }}"
+  x-data="cfPanel"
+  x-init="initPanel()"
+  data-cf-open="{% if open and open != 'false' %}true{% else %}false{% endif %}"
+>
   <header class="card-header" style="cursor:pointer" @click="toggle()">
     <p class="card-header-title">{{ title }}</p>
-    <button type="button"
-            class="card-header-icon"
-            aria-label="toggle panel"
-            aria-controls="{{ id }}-body"
-            aria-expanded="{% if open and open != 'false' %}true{% else %}false{% endif %}"
-            :aria-expanded="open">
+    <button
+      type="button"
+      class="card-header-icon"
+      aria-label="toggle panel"
+      aria-controls="{{ id }}-body"
+      aria-expanded="{% if open and open != 'false' %}true{% else %}false{% endif %}"
+      :aria-expanded="open"
+    >
       <span class="icon">
-        <span :style="open ? 'transform:rotate(90deg)' : ''"
-              style="display:inline-block;transition:transform 200ms">▶</span>
+        <span
+          :style="open ? 'transform:rotate(90deg)' : ''"
+          style="display:inline-block;
+                 transition:transform 200ms"
+        >▶</span>
       </span>
     </button>
   </header>
-  <div id="{{ id }}-body"
-       class="card-content"
-       x-show="open"
-       {% if not open or open == 'false' %}x-cloak{% endif %}>
-    {{ slot }}
-  </div>
+  <div
+    id="{{ id }}-body"
+    class="card-content"
+    x-show="open"
+    {% if not open or open == 'false' %}x-cloak{% endif %}
+  >{{ slot }}</div>
 </div>
diff --git a/src/cf_ui/templates/cotton/_themes/bulma/progress.html b/src/cf_ui/templates/cotton/_themes/bulma/progress.html
index 4e0945c..5465b02 100644
--- a/src/cf_ui/templates/cotton/_themes/bulma/progress.html
+++ b/src/cf_ui/templates/cotton/_themes/bulma/progress.html
@@ -1,6 +1,4 @@
 <div class="{{ class }}">
   {% if label %}<p class="has-text-centered mb-1">{{ label }}</p>{% endif %}
-  <progress class="progress is-{{ type }}"
-            value="{{ value }}"
-            max="{{ max }}">{{ value }}%</progress>
+  <progress class="progress is-{{ type }}" value="{{ value }}" max="{{ max }}">{{ value }}%</progress>
 </div>
diff --git a/src/cf_ui/templates/cotton/_themes/bulma/select.html b/src/cf_ui/templates/cotton/_themes/bulma/select.html
index e64e598..b1d683f 100644
--- a/src/cf_ui/templates/cotton/_themes/bulma/select.html
+++ b/src/cf_ui/templates/cotton/_themes/bulma/select.html
@@ -2,11 +2,16 @@
   <label class="label" for="{{ name }}">{{ label }}</label>
   <div class="control">
     <div class="select{% if error %} is-danger{% endif %} is-fullwidth">
-      <select id="{{ name }}" name="{{ name }}"{% if input_class %} class="{{ input_class }}"{% endif %}>
+      <select
+        id="{{ name }}"
+        name="{{ name }}"
+        {% if input_class %} class="{{ input_class }}"{% endif %}
+      >
         {% for opt in options %}
-        <option value="{{ opt.value }}"{% if opt.value|stringformat:"s" == value|stringformat:"s" %} selected{% endif %}>
-          {{ opt.label }}
-        </option>
+          <option
+            value="{{ opt.value }}"
+            {% if opt.value|stringformat:"s" == value|stringformat:"s" %} selected{% endif %}
+          >{{ opt.label }}</option>
         {% endfor %}
       </select>
     </div>
diff --git a/src/cf_ui/templates/cotton/_themes/bulma/table.html b/src/cf_ui/templates/cotton/_themes/bulma/table.html
index 0bb6ed3..bcbd05a 100644
--- a/src/cf_ui/templates/cotton/_themes/bulma/table.html
+++ b/src/cf_ui/templates/cotton/_themes/bulma/table.html
@@ -4,17 +4,17 @@
     <thead>
       <tr>
         {% for col in columns %}
-        <th>{{ col.label }}</th>
+          <th>{{ col.label }}</th>
         {% endfor %}
       </tr>
     </thead>
     <tbody>
       {% for row in rows %}
-      <tr>
-        {% for col in columns %}
-        <td>{{ row|get_item:col.key }}</td>
-        {% endfor %}
-      </tr>
+        <tr>
+          {% for col in columns %}
+            <td>{{ row|get_item:col.key }}</td>
+          {% endfor %}
+        </tr>
       {% endfor %}
     </tbody>
   </table>
diff --git a/src/cf_ui/templates/cotton/_themes/bulma/tabs.html b/src/cf_ui/templates/cotton/_themes/bulma/tabs.html
index 4e5461b..bb8cd8d 100644
--- a/src/cf_ui/templates/cotton/_themes/bulma/tabs.html
+++ b/src/cf_ui/templates/cotton/_themes/bulma/tabs.html
@@ -1,25 +1,31 @@
-<div class="{{ class }}"
-     x-data="cfTabs"
-     x-init="initTabs()"
-     data-cf-active="{{ active }}">
+<div
+  class="{{ class }}"
+  x-data="cfTabs"
+  x-init="initTabs()"
+  data-cf-active="{{ active }}"
+>
   <div class="tabs">
     <ul role="tablist" @keydown="onKeydown($event)">
       {% for tab in tabs %}
-      <li role="presentation"
+        <li
+          role="presentation"
           class="{% if tab.id == active %}is-active{% endif %}"
           data-cf-tab="{{ tab.id }}"
-          :class="{ 'is-active': active === $el.dataset.cfTab }">
-        <a role="tab"
-           data-cf-tab="{{ tab.id }}"
-           aria-controls="{{ hx_target }}"
-           aria-selected="{% if tab.id == active %}true{% else %}false{% endif %}"
-           tabindex="{% if tab.id == active or not active and forloop.first %}0{% else %}-1{% endif %}"
-           :aria-selected="active === $el.dataset.cfTab"
-           :tabindex="tabIndexFor($el.dataset.cfTab)"
-           @click.prevent="setActive($el.dataset.cfTab)"
-           hx-get="{{ tab.url }}"
-           hx-target="#{{ hx_target }}">{{ tab.id }}</a>
-      </li>
+          :class="{ 'is-active': active === $el.dataset.cfTab }"
+        >
+          <a
+            role="tab"
+            data-cf-tab="{{ tab.id }}"
+            aria-controls="{{ hx_target }}"
+            aria-selected="{% if tab.id == active %}true{% else %}false{% endif %}"
+            tabindex="{% if tab.id == active or not active and forloop.first %}0{% else %}-1{% endif %}"
+            :aria-selected="active === $el.dataset.cfTab"
+            :tabindex="tabIndexFor($el.dataset.cfTab)"
+            @click.prevent="setActive($el.dataset.cfTab)"
+            hx-get="{{ tab.url }}"
+            hx-target="#{{ hx_target }}"
+          >{{ tab.id }}</a>
+        </li>
       {% endfor %}
     </ul>
   </div>
diff --git a/src/cf_ui/templates/cotton/_themes/bulma/textarea.html b/src/cf_ui/templates/cotton/_themes/bulma/textarea.html
index 6402f56..5a5a8f1 100644
--- a/src/cf_ui/templates/cotton/_themes/bulma/textarea.html
+++ b/src/cf_ui/templates/cotton/_themes/bulma/textarea.html
@@ -1,10 +1,12 @@
 <div class="field {{ class }}">
   <label class="label" for="{{ name }}">{{ label }}</label>
   <div class="control">
-    <textarea class="textarea{% if error %} is-danger{% endif %}{% if input_class %} {{ input_class }}{% endif %}"
-              id="{{ name }}"
-              name="{{ name }}"
-              rows="{{ rows }}">{{ value }}</textarea>
+    <textarea
+      class="textarea{% if error %} is-danger{% endif %}{% if input_class %} {{ input_class }}{% endif %}"
+      id="{{ name }}"
+      name="{{ name }}"
+      rows="{{ rows }}"
+    >{{ value }}</textarea>
   </div>
   {% if error %}<p class="help is-danger">{{ error }}</p>{% endif %}
 </div>
diff --git a/src/cf_ui/templates/cotton/_themes/daisy/badge.html b/src/cf_ui/templates/cotton/_themes/daisy/badge.html
new file mode 100644
index 0000000..dec6968
--- /dev/null
+++ b/src/cf_ui/templates/cotton/_themes/daisy/badge.html
@@ -0,0 +1,3 @@
+<span
+  class="badge{% if variant == 'primary' %} badge-primary{% elif variant == 'secondary' %} badge-secondary{% elif variant == 'success' %} badge-success{% elif variant == 'warning' %} badge-warning{% elif variant == 'danger' %} badge-error{% elif variant == 'info' %} badge-info{% elif variant == 'neutral' %} badge-neutral{% endif %}{% if size == 'small' %} badge-sm{% elif size == 'large' %} badge-lg{% endif %}{% if class %} {{ class }}{% endif %}"
+>{{ slot }}</span>
diff --git a/src/cf_ui/templates/cotton/_themes/daisy/breadcrumb.html b/src/cf_ui/templates/cotton/_themes/daisy/breadcrumb.html
index 4616bb8..ea452bd 100644
--- a/src/cf_ui/templates/cotton/_themes/daisy/breadcrumb.html
+++ b/src/cf_ui/templates/cotton/_themes/daisy/breadcrumb.html
@@ -1,13 +1,13 @@
 <nav class="breadcrumbs text-sm {{ class }}" aria-label="breadcrumbs">
   <ul>
     {% for item in items %}
-    <li>
-      {% if forloop.last %}
-      <a href="{{ item.url }}" aria-current="page">{{ item.label }}</a>
-      {% else %}
-      <a href="{{ item.url }}">{{ item.label }}</a>
-      {% endif %}
-    </li>
+      <li>
+        {% if forloop.last %}
+          <a href="{{ item.url }}" aria-current="page">{{ item.label }}</a>
+        {% else %}
+          <a href="{{ item.url }}">{{ item.label }}</a>
+        {% endif %}
+      </li>
     {% endfor %}
   </ul>
 </nav>
diff --git a/src/cf_ui/templates/cotton/_themes/daisy/button.html b/src/cf_ui/templates/cotton/_themes/daisy/button.html
new file mode 100644
index 0000000..f804323
--- /dev/null
+++ b/src/cf_ui/templates/cotton/_themes/daisy/button.html
@@ -0,0 +1 @@
+{% with cf_tag=href|yesno:"a,button" %}<{{ cf_tag }} class="btn{% if variant == 'primary' %} btn-primary{% elif variant == 'secondary' %} btn-secondary{% elif variant == 'success' %} btn-success{% elif variant == 'warning' %} btn-warning{% elif variant == 'danger' %} btn-error{% elif variant == 'info' %} btn-info{% elif variant == 'neutral' %} btn-neutral{% endif %}{% if size == 'small' %} btn-sm{% elif size == 'large' %} btn-lg{% endif %}{% if state == 'disabled' %} btn-disabled{% endif %}{% if full_width %} btn-block{% endif %}{% if class %} {{ class }}{% endif %}"{% if href %}{% if state == 'disabled' %} role="link" aria-disabled="true"{% else %} href="{{ href }}"{% endif %}{% else %} type="{{ type }}"{% if state == 'disabled' %} disabled{% endif %}{% endif %}>{% if state == 'loading' %}<span class="loading loading-spinner"></span> {% endif %}{{ slot }}</{{ cf_tag }}>{% endwith %}
diff --git a/src/cf_ui/templates/cotton/_themes/daisy/card.html b/src/cf_ui/templates/cotton/_themes/daisy/card.html
index 67dd42d..a962065 100644
--- a/src/cf_ui/templates/cotton/_themes/daisy/card.html
+++ b/src/cf_ui/templates/cotton/_themes/daisy/card.html
@@ -3,7 +3,7 @@
     {% if header %}<h2 class="card-title">{{ header }}</h2>{% endif %}
     <div>{{ slot }}</div>
     {% if footer %}
-    <div class="card-actions justify-end">{{ footer }}</div>
+      <div class="card-actions justify-end">{{ footer }}</div>
     {% endif %}
   </div>
 </div>
diff --git a/src/cf_ui/templates/cotton/_themes/daisy/checkbox-group.html b/src/cf_ui/templates/cotton/_themes/daisy/checkbox-group.html
index 78d5062..e9b7a9b 100644
--- a/src/cf_ui/templates/cotton/_themes/daisy/checkbox-group.html
+++ b/src/cf_ui/templates/cotton/_themes/daisy/checkbox-group.html
@@ -1,15 +1,19 @@
 <div class="form-control {{ class }}">
   <label class="label"><span class="label-text">{{ label }}</span></label>
-  <div class="flex flex-wrap gap-4{% if control_class %} {{ control_class }}{% endif %}">
+  <div
+    class="flex flex-wrap gap-4{% if control_class %} {{ control_class }}{% endif %}"
+  >
     {% for choice in choices %}
-    <label class="label cursor-pointer gap-2">
-      <input type="checkbox"
-             class="checkbox"
-             name="{{ name }}"
-             value="{{ choice.value }}"
-             {% if choice.value in selected %}checked{% endif %}>
-      <span class="label-text">{{ choice.label }}</span>
-    </label>
+      <label class="label cursor-pointer gap-2">
+        <input
+          type="checkbox"
+          class="checkbox"
+          name="{{ name }}"
+          value="{{ choice.value }}"
+          {% if choice.value in selected %}checked{% endif %}
+        >
+        <span class="label-text">{{ choice.label }}</span>
+      </label>
     {% endfor %}
   </div>
   {% if error %}<span class="label-text-alt text-error">{{ error }}</span>{% endif %}
diff --git a/src/cf_ui/templates/cotton/_themes/daisy/form-field.html b/src/cf_ui/templates/cotton/_themes/daisy/form-field.html
index cd0850e..b335f84 100644
--- a/src/cf_ui/templates/cotton/_themes/daisy/form-field.html
+++ b/src/cf_ui/templates/cotton/_themes/daisy/form-field.html
@@ -1,10 +1,12 @@
 <div class="form-control {{ class }}">
   <label class="label" for="{{ name }}"><span class="label-text">{{ label }}</span></label>
-  <input class="input input-bordered w-full{% if error %} input-error{% endif %}{% if input_class %} {{ input_class }}{% endif %}"
-         id="{{ name }}"
-         type="{{ type }}"
-         name="{{ name }}"
-         value="{{ value }}"
-         {% if required == "true" %}required{% endif %}>
+  <input
+    class="input input-bordered w-full{% if error %} input-error{% endif %}{% if input_class %} {{ input_class }}{% endif %}"
+    id="{{ name }}"
+    type="{{ type }}"
+    name="{{ name }}"
+    value="{{ value }}"
+    {% if required == "true" %}required{% endif %}
+  >
   {% if error %}<span class="label-text-alt text-error">{{ error }}</span>{% endif %}
 </div>
diff --git a/src/cf_ui/templates/cotton/_themes/daisy/heading.html b/src/cf_ui/templates/cotton/_themes/daisy/heading.html
new file mode 100644
index 0000000..d17d51c
--- /dev/null
+++ b/src/cf_ui/templates/cotton/_themes/daisy/heading.html
@@ -0,0 +1,6 @@
+{% comment %} `font-bold` is the base rather than a flourish: Tailwind's Preflight resets
+   `font-size` and `font-weight` on h1–h6, so an unclassed heading here renders as body
+   text. daisyUI ships no heading component, so the type scale is Tailwind's own — these
+   utilities are absent from the daisyUI CDN bundle and only exist in a real Tailwind
+build. {% endcomment %}
+<h{{ level }} class="font-bold{% if size == 'small' %} text-base{% elif size == 'normal' %} text-2xl{% elif size == 'large' %} text-4xl{% endif %}{% if emphasis == 'subtle' %} opacity-60{% endif %}{% if class %} {{ class }}{% endif %}">{{ slot }}</h{{ level }}>
diff --git a/src/cf_ui/templates/cotton/_themes/daisy/icon.html b/src/cf_ui/templates/cotton/_themes/daisy/icon.html
new file mode 100644
index 0000000..e2e7ace
--- /dev/null
+++ b/src/cf_ui/templates/cotton/_themes/daisy/icon.html
@@ -0,0 +1,4 @@
+<span
+  class="inline-flex items-center justify-center{% if size == 'small' %} text-[0.75em]{% elif size == 'large' %} text-[1.5em]{% endif %}{% if class %} {{ class }}{% endif %}"
+  {% if label %} role="img" aria-label="{{ label }}"{% else %} aria-hidden="true"{% endif %}
+>{{ slot }}</span>
diff --git a/src/cf_ui/templates/cotton/_themes/daisy/label.html b/src/cf_ui/templates/cotton/_themes/daisy/label.html
new file mode 100644
index 0000000..a1b5ef9
--- /dev/null
+++ b/src/cf_ui/templates/cotton/_themes/daisy/label.html
@@ -0,0 +1,12 @@
+{% comment %}Size goes on `.label-text`, which sets `font-size` itself — a
+utility on the outer `
+<label>
+` would be overridden. The required glyph goes
+inside it too: `.label` is `justify-content: space-between`, so a second flex
+child would be flung to the far edge of the row.{% endcomment %}
+<label
+  class="label{% if class %} {{ class }}{% endif %}"
+  {% if for_id %} for="{{ for_id }}"{% endif %}
+><span
+  class="label-text{% if size == 'small' %} text-xs{% elif size == 'large' %} text-lg{% endif %}"
+>{{ slot }}{% if required %} <span class="text-error" role="img" aria-label="required">*</span>{% endif %}</span></label>
diff --git a/src/cf_ui/templates/cotton/_themes/daisy/modal.html b/src/cf_ui/templates/cotton/_themes/daisy/modal.html
index 1635884..77af911 100644
--- a/src/cf_ui/templates/cotton/_themes/daisy/modal.html
+++ b/src/cf_ui/templates/cotton/_themes/daisy/modal.html
@@ -1,20 +1,24 @@
-<div id="{{ id }}"
-     class="modal {{ class }}"
-     role="dialog"
-     aria-modal="true"
-     {% if header %}aria-labelledby="{{ id }}-title"{% else %}aria-label="{{ label|default:'Dialog' }}"{% endif %}
-     x-data="cfModal"
-     x-init="initModal()"
-     :class="{ 'modal-open': open }">
+<div
+  id="{{ id }}"
+  class="modal {{ class }}"
+  role="dialog"
+  aria-modal="true"
+  {% if header %}aria-labelledby="{{ id }}-title"{% else %}aria-label="{{ label|default:'Dialog' }}"{% endif %}
+  x-data="cfModal"
+  x-init="initModal()"
+  :class="{ 'modal-open': open }"
+>
   <div class="modal-box">
-    <button type="button"
-            class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2"
-            aria-label="close"
-            @click="close()">&times;</button>
+    <button
+      type="button"
+      class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2"
+      aria-label="close"
+      @click="close()"
+    >&times;</button>
     {% if header %}<h3 class="text-lg font-bold" id="{{ id }}-title">{{ header }}</h3>{% endif %}
     <div class="py-4">{{ slot }}</div>
     {% if footer %}
-    <div class="modal-action">{{ footer }}</div>
+      <div class="modal-action">{{ footer }}</div>
     {% endif %}
   </div>
   <div class="modal-backdrop" @click="close()"></div>
diff --git a/src/cf_ui/templates/cotton/_themes/daisy/navbar.html b/src/cf_ui/templates/cotton/_themes/daisy/navbar.html
index 25f4455..bc866e7 100644
--- a/src/cf_ui/templates/cotton/_themes/daisy/navbar.html
+++ b/src/cf_ui/templates/cotton/_themes/daisy/navbar.html
@@ -1,18 +1,26 @@
-<nav class="navbar bg-base-100 {{ class }}" role="navigation" aria-label="main navigation"
-     x-data="cfNavbar">
+<nav
+  class="navbar bg-base-100 {{ class }}"
+  role="navigation"
+  aria-label="main navigation"
+  x-data="cfNavbar"
+>
   <div class="navbar-start">
     {{ brand }}
-    <button type="button"
-            class="btn btn-square btn-ghost lg:hidden"
-            aria-label="menu"
-            :aria-expanded="menuOpen"
-            @click="toggle()">&#9776;</button>
+    <button
+      type="button"
+      class="btn btn-square btn-ghost lg:hidden"
+      aria-label="menu"
+      :aria-expanded="menuOpen"
+      @click="toggle()"
+    >&#9776;</button>
   </div>
-  {# Toggle `hidden` rather than adding `flex`: both are display utilities in
-     the same layer, and Tailwind emits `hidden` last, so adding `flex` to an
-     element that keeps `hidden` would never show it. Removing `hidden` leaves
-     the div at its default display on mobile, and `lg:flex` (a media query,
-     emitted after the base utilities) governs desktop either way. #}
+  {% comment %}
+  Toggle `hidden` rather than adding `flex`: both are display utilities in
+  the same layer, and Tailwind emits `hidden` last, so adding `flex` to an
+  element that keeps `hidden` would never show it. Removing `hidden` leaves
+  the div at its default display on mobile, and `lg:flex` (a media query,
+  emitted after the base utilities) governs desktop either way.
+  {% endcomment %}
   <div class="navbar-center lg:flex" :class="{ 'hidden': !menuOpen }">{{ start }}</div>
   <div class="navbar-end lg:flex" :class="{ 'hidden': !menuOpen }">{{ end }}</div>
 </nav>
diff --git a/src/cf_ui/templates/cotton/_themes/daisy/notification.html b/src/cf_ui/templates/cotton/_themes/daisy/notification.html
index 8d6bb11..6646223 100644
--- a/src/cf_ui/templates/cotton/_themes/daisy/notification.html
+++ b/src/cf_ui/templates/cotton/_themes/daisy/notification.html
@@ -1,12 +1,16 @@
-<div role="alert"
-     class="alert {% if type == 'danger' or type == 'error' %}alert-error{% elif type == 'success' %}alert-success{% elif type == 'warning' %}alert-warning{% else %}alert-info{% endif %} {{ class }}"
-     x-data="{ visible: true }"
-     x-show="visible">
+<div
+  role="alert"
+  class="alert {% if type == 'danger' or type == 'error' %}alert-error{% elif type == 'success' %}alert-success{% elif type == 'warning' %}alert-warning{% else %}alert-info{% endif %} {{ class }}"
+  x-data="{ visible: true }"
+  x-show="visible"
+>
   <span>{{ message }}</span>
   {% if dismissible == "true" %}
-  <button type="button"
-          class="btn btn-sm btn-circle btn-ghost"
-          aria-label="dismiss"
-          @click="visible = false">&times;</button>
+    <button
+      type="button"
+      class="btn btn-sm btn-circle btn-ghost"
+      aria-label="dismiss"
+      @click="visible = false"
+    >&times;</button>
   {% endif %}
 </div>
diff --git a/src/cf_ui/templates/cotton/_themes/daisy/pagination.html b/src/cf_ui/templates/cotton/_themes/daisy/pagination.html
index 6d23054..db299ad 100644
--- a/src/cf_ui/templates/cotton/_themes/daisy/pagination.html
+++ b/src/cf_ui/templates/cotton/_themes/daisy/pagination.html
@@ -1,26 +1,29 @@
 {% load cf_ui %}
 <nav class="join {{ class }}" role="navigation" aria-label="pagination">
   {% if page|add:"0" > 1 %}
-  <a class="join-item btn"
-     hx-get="{{ hx_url }}?page={{ page|add:"-1" }}"
-     hx-target="{{ hx_target }}">Previous</a>
+    <a
+      class="join-item btn"
+      hx-get="{{ hx_url }}?page={{ page|add:"-1" }}"
+      hx-target="{{ hx_target }}"
+    >Previous</a>
   {% else %}
-  <a class="join-item btn btn-disabled" aria-disabled="true">Previous</a>
+    <a class="join-item btn btn-disabled" aria-disabled="true">Previous</a>
   {% endif %}
   {% for p in total_pages|make_list_1_to_n %}
-  <a class="join-item btn{% if p == page|add:'0' %} btn-active{% endif %}"
-     {% if p != page|add:"0" %}
-     hx-get="{{ hx_url }}?page={{ p }}"
-     hx-target="{{ hx_target }}"
-     {% endif %}
-     aria-label="Page {{ p }}"
-     {% if p == page|add:'0' %}aria-current="page"{% endif %}>{{ p }}</a>
+    <a
+      class="join-item btn{% if p == page|add:'0' %} btn-active{% endif %}"
+      {% if p != page|add:"0" %} hx-get="{{ hx_url }}?page={{ p }}" hx-target="{{ hx_target }}" {% endif %}
+      aria-label="Page {{ p }}"
+      {% if p == page|add:'0' %}aria-current="page"{% endif %}
+    >{{ p }}</a>
   {% endfor %}
   {% if page|add:"0" < total_pages|add:"0" %}
-  <a class="join-item btn"
-     hx-get="{{ hx_url }}?page={{ page|add:"1" }}"
-     hx-target="{{ hx_target }}">Next</a>
+    <a
+      class="join-item btn"
+      hx-get="{{ hx_url }}?page={{ page|add:"1" }}"
+      hx-target="{{ hx_target }}"
+    >Next</a>
   {% else %}
-  <a class="join-item btn btn-disabled" aria-disabled="true">Next</a>
+    <a class="join-item btn btn-disabled" aria-disabled="true">Next</a>
   {% endif %}
 </nav>
diff --git a/src/cf_ui/templates/cotton/_themes/daisy/panel.html b/src/cf_ui/templates/cotton/_themes/daisy/panel.html
index f66302c..6f472f8 100644
--- a/src/cf_ui/templates/cotton/_themes/daisy/panel.html
+++ b/src/cf_ui/templates/cotton/_themes/daisy/panel.html
@@ -1,21 +1,28 @@
-<div class="card bg-base-100 shadow-xl {{ class }}"
-     x-data="cfPanel"
-     x-init="initPanel()"
-     data-cf-open="{% if open and open != 'false' %}true{% else %}false{% endif %}">
-  <button type="button"
-          class="btn btn-ghost justify-between w-full"
-          aria-controls="{{ id }}-body"
-          aria-expanded="{% if open and open != 'false' %}true{% else %}false{% endif %}"
-          :aria-expanded="open"
-          @click="toggle()">
+<div
+  class="card bg-base-100 shadow-xl {{ class }}"
+  x-data="cfPanel"
+  x-init="initPanel()"
+  data-cf-open="{% if open and open != 'false' %}true{% else %}false{% endif %}"
+>
+  <button
+    type="button"
+    class="btn btn-ghost justify-between w-full"
+    aria-controls="{{ id }}-body"
+    aria-expanded="{% if open and open != 'false' %}true{% else %}false{% endif %}"
+    :aria-expanded="open"
+    @click="toggle()"
+  >
     <span class="card-title text-base">{{ title }}</span>
-    <span :style="open ? 'transform:rotate(90deg)' : ''"
-          style="display:inline-block;transition:transform 200ms">&#9654;</span>
+    <span
+      :style="open ? 'transform:rotate(90deg)' : ''"
+      style="display:inline-block;
+             transition:transform 200ms"
+    >&#9654;</span>
   </button>
-  <div id="{{ id }}-body"
-       class="card-body pt-0"
-       x-show="open"
-       {% if not open or open == 'false' %}x-cloak{% endif %}>
-    {{ slot }}
-  </div>
+  <div
+    id="{{ id }}-body"
+    class="card-body pt-0"
+    x-show="open"
+    {% if not open or open == 'false' %}x-cloak{% endif %}
+  >{{ slot }}</div>
 </div>
diff --git a/src/cf_ui/templates/cotton/_themes/daisy/progress.html b/src/cf_ui/templates/cotton/_themes/daisy/progress.html
index ab2e428..8a00c36 100644
--- a/src/cf_ui/templates/cotton/_themes/daisy/progress.html
+++ b/src/cf_ui/templates/cotton/_themes/daisy/progress.html
@@ -1,6 +1,8 @@
 <div class="{{ class }}">
   {% if label %}<p class="text-center mb-1">{{ label }}</p>{% endif %}
-  <progress class="progress {% if type == 'danger' or type == 'error' %}progress-error{% elif type == 'success' %}progress-success{% elif type == 'warning' %}progress-warning{% elif type == 'info' %}progress-info{% else %}progress-primary{% endif %} w-full"
-            value="{{ value }}"
-            max="{{ max }}">{{ value }}%</progress>
+  <progress
+    class="progress {% if type == 'danger' or type == 'error' %}progress-error{% elif type == 'success' %}progress-success{% elif type == 'warning' %}progress-warning{% elif type == 'info' %}progress-info{% else %}progress-primary{% endif %} w-full"
+    value="{{ value }}"
+    max="{{ max }}"
+  >{{ value }}%</progress>
 </div>
diff --git a/src/cf_ui/templates/cotton/_themes/daisy/select.html b/src/cf_ui/templates/cotton/_themes/daisy/select.html
index 424afd3..97e1d25 100644
--- a/src/cf_ui/templates/cotton/_themes/daisy/select.html
+++ b/src/cf_ui/templates/cotton/_themes/daisy/select.html
@@ -1,12 +1,15 @@
 <div class="form-control {{ class }}">
   <label class="label" for="{{ name }}"><span class="label-text">{{ label }}</span></label>
-  <select class="select select-bordered w-full{% if error %} select-error{% endif %}{% if input_class %} {{ input_class }}{% endif %}"
-          id="{{ name }}"
-          name="{{ name }}">
+  <select
+    class="select select-bordered w-full{% if error %} select-error{% endif %}{% if input_class %} {{ input_class }}{% endif %}"
+    id="{{ name }}"
+    name="{{ name }}"
+  >
     {% for opt in options %}
-    <option value="{{ opt.value }}"{% if opt.value|stringformat:"s" == value|stringformat:"s" %} selected{% endif %}>
-      {{ opt.label }}
-    </option>
+      <option
+        value="{{ opt.value }}"
+        {% if opt.value|stringformat:"s" == value|stringformat:"s" %} selected{% endif %}
+      >{{ opt.label }}</option>
     {% endfor %}
   </select>
   {% if error %}<span class="label-text-alt text-error">{{ error }}</span>{% endif %}
diff --git a/src/cf_ui/templates/cotton/_themes/daisy/table.html b/src/cf_ui/templates/cotton/_themes/daisy/table.html
index abe1c5e..7ea8f9b 100644
--- a/src/cf_ui/templates/cotton/_themes/daisy/table.html
+++ b/src/cf_ui/templates/cotton/_themes/daisy/table.html
@@ -4,17 +4,17 @@
     <thead>
       <tr>
         {% for col in columns %}
-        <th>{{ col.label }}</th>
+          <th>{{ col.label }}</th>
         {% endfor %}
       </tr>
     </thead>
     <tbody>
       {% for row in rows %}
-      <tr>
-        {% for col in columns %}
-        <td>{{ row|get_item:col.key }}</td>
-        {% endfor %}
-      </tr>
+        <tr>
+          {% for col in columns %}
+            <td>{{ row|get_item:col.key }}</td>
+          {% endfor %}
+        </tr>
       {% endfor %}
     </tbody>
   </table>
diff --git a/src/cf_ui/templates/cotton/_themes/daisy/tabs.html b/src/cf_ui/templates/cotton/_themes/daisy/tabs.html
index acda8b5..a9456e2 100644
--- a/src/cf_ui/templates/cotton/_themes/daisy/tabs.html
+++ b/src/cf_ui/templates/cotton/_themes/daisy/tabs.html
@@ -1,21 +1,29 @@
-<div class="{{ class }}"
-     x-data="cfTabs"
-     x-init="initTabs()"
-     data-cf-active="{{ active }}">
-  <div role="tablist" class="tabs tabs-bordered" @keydown="onKeydown($event)">
+<div
+  class="{{ class }}"
+  x-data="cfTabs"
+  x-init="initTabs()"
+  data-cf-active="{{ active }}"
+>
+  <div
+    role="tablist"
+    class="tabs tabs-bordered"
+    @keydown="onKeydown($event)"
+  >
     {% for tab in tabs %}
-    <a role="tab"
-       data-cf-tab="{{ tab.id }}"
-       class="tab {% if tab.id == active %}tab-active{% endif %}"
-       aria-controls="{{ hx_target }}"
-       aria-selected="{% if tab.id == active %}true{% else %}false{% endif %}"
-       tabindex="{% if tab.id == active or not active and forloop.first %}0{% else %}-1{% endif %}"
-       :class="{ 'tab-active': active === $el.dataset.cfTab }"
-       :aria-selected="active === $el.dataset.cfTab"
-       :tabindex="tabIndexFor($el.dataset.cfTab)"
-       @click.prevent="setActive($el.dataset.cfTab)"
-       hx-get="{{ tab.url }}"
-       hx-target="#{{ hx_target }}">{{ tab.id }}</a>
+      <a
+        role="tab"
+        data-cf-tab="{{ tab.id }}"
+        class="tab {% if tab.id == active %}tab-active{% endif %}"
+        aria-controls="{{ hx_target }}"
+        aria-selected="{% if tab.id == active %}true{% else %}false{% endif %}"
+        tabindex="{% if tab.id == active or not active and forloop.first %}0{% else %}-1{% endif %}"
+        :class="{ 'tab-active': active === $el.dataset.cfTab }"
+        :aria-selected="active === $el.dataset.cfTab"
+        :tabindex="tabIndexFor($el.dataset.cfTab)"
+        @click.prevent="setActive($el.dataset.cfTab)"
+        hx-get="{{ tab.url }}"
+        hx-target="#{{ hx_target }}"
+      >{{ tab.id }}</a>
     {% endfor %}
   </div>
   <div id="{{ hx_target }}" role="tabpanel">{{ slot }}</div>
diff --git a/src/cf_ui/templates/cotton/_themes/daisy/textarea.html b/src/cf_ui/templates/cotton/_themes/daisy/textarea.html
index 9244472..9003876 100644
--- a/src/cf_ui/templates/cotton/_themes/daisy/textarea.html
+++ b/src/cf_ui/templates/cotton/_themes/daisy/textarea.html
@@ -1,8 +1,10 @@
 <div class="form-control {{ class }}">
   <label class="label" for="{{ name }}"><span class="label-text">{{ label }}</span></label>
-  <textarea class="textarea textarea-bordered w-full{% if error %} textarea-error{% endif %}{% if input_class %} {{ input_class }}{% endif %}"
-            id="{{ name }}"
-            name="{{ name }}"
-            rows="{{ rows }}">{{ value }}</textarea>
+  <textarea
+    class="textarea textarea-bordered w-full{% if error %} textarea-error{% endif %}{% if input_class %} {{ input_class }}{% endif %}"
+    id="{{ name }}"
+    name="{{ name }}"
+    rows="{{ rows }}"
+  >{{ value }}</textarea>
   {% if error %}<span class="label-text-alt text-error">{{ error }}</span>{% endif %}
 </div>
diff --git a/src/cf_ui/templates/cotton/_themes/fomantic/badge.html b/src/cf_ui/templates/cotton/_themes/fomantic/badge.html
new file mode 100644
index 0000000..c057e49
--- /dev/null
+++ b/src/cf_ui/templates/cotton/_themes/fomantic/badge.html
@@ -0,0 +1,3 @@
+<span
+  class="ui label{% if variant == 'primary' %} primary{% elif variant == 'secondary' %} secondary{% elif variant == 'success' %} green{% elif variant == 'warning' %} yellow{% elif variant == 'danger' %} red{% elif variant == 'info' %} teal{% endif %}{% if size == 'small' %} small{% elif size == 'large' %} large{% endif %}{% if class %} {{ class }}{% endif %}"
+>{{ slot }}</span>
diff --git a/src/cf_ui/templates/cotton/_themes/fomantic/breadcrumb.html b/src/cf_ui/templates/cotton/_themes/fomantic/breadcrumb.html
index 4969746..c357cbe 100644
--- a/src/cf_ui/templates/cotton/_themes/fomantic/breadcrumb.html
+++ b/src/cf_ui/templates/cotton/_themes/fomantic/breadcrumb.html
@@ -1,10 +1,10 @@
 <nav class="ui breadcrumb {{ class }}" aria-label="breadcrumbs">
   {% for item in items %}
-  {% if not forloop.first %}<span class="divider">/</span>{% endif %}
-  {% if forloop.last %}
-  <a class="active section" href="{{ item.url }}" aria-current="page">{{ item.label }}</a>
-  {% else %}
-  <a class="section" href="{{ item.url }}">{{ item.label }}</a>
-  {% endif %}
+    {% if not forloop.first %}<span class="divider">/</span>{% endif %}
+    {% if forloop.last %}
+      <a class="active section" href="{{ item.url }}" aria-current="page">{{ item.label }}</a>
+    {% else %}
+      <a class="section" href="{{ item.url }}">{{ item.label }}</a>
+    {% endif %}
   {% endfor %}
 </nav>
diff --git a/src/cf_ui/templates/cotton/_themes/fomantic/button.html b/src/cf_ui/templates/cotton/_themes/fomantic/button.html
new file mode 100644
index 0000000..6191bec
--- /dev/null
+++ b/src/cf_ui/templates/cotton/_themes/fomantic/button.html
@@ -0,0 +1 @@
+{% with cf_tag=href|yesno:"a,button" %}<{{ cf_tag }} class="ui button{% if variant == 'primary' %} primary{% elif variant == 'secondary' %} secondary{% elif variant == 'success' %} positive{% elif variant == 'warning' %} yellow{% elif variant == 'danger' %} negative{% elif variant == 'info' %} teal{% endif %}{% if size == 'small' %} small{% elif size == 'large' %} large{% endif %}{% if state == 'loading' %} loading{% elif state == 'disabled' %} disabled{% endif %}{% if full_width %} fluid{% endif %}{% if class %} {{ class }}{% endif %}"{% if href %}{% if state == 'disabled' %} role="link" aria-disabled="true"{% else %} href="{{ href }}"{% endif %}{% else %} type="{{ type }}"{% if state == 'disabled' %} disabled{% endif %}{% endif %}>{{ slot }}</{{ cf_tag }}>{% endwith %}
diff --git a/src/cf_ui/templates/cotton/_themes/fomantic/card.html b/src/cf_ui/templates/cotton/_themes/fomantic/card.html
index efa1da4..475f286 100644
--- a/src/cf_ui/templates/cotton/_themes/fomantic/card.html
+++ b/src/cf_ui/templates/cotton/_themes/fomantic/card.html
@@ -4,6 +4,6 @@
     <div class="description">{{ slot }}</div>
   </div>
   {% if footer %}
-  <div class="extra content">{{ footer }}</div>
+    <div class="extra content">{{ footer }}</div>
   {% endif %}
 </div>
diff --git a/src/cf_ui/templates/cotton/_themes/fomantic/checkbox-group.html b/src/cf_ui/templates/cotton/_themes/fomantic/checkbox-group.html
index 55c6719..5df26f2 100644
--- a/src/cf_ui/templates/cotton/_themes/fomantic/checkbox-group.html
+++ b/src/cf_ui/templates/cotton/_themes/fomantic/checkbox-group.html
@@ -1,21 +1,25 @@
 <div class="ui form {{ class }}">
-  <div class="grouped fields{% if control_class %} {{ control_class }}{% endif %}{% if error %} error{% endif %}">
+  <div
+    class="grouped fields{% if control_class %} {{ control_class }}{% endif %}{% if error %} error{% endif %}"
+  >
     <label>{{ label }}</label>
     {% for choice in choices %}
-    <div class="field">
-      {% comment %} Fomantic's CSS-only checkbox works because the real input is stretched
+      <div class="field">
+        {% comment %} Fomantic's CSS-only checkbox works because the real input is stretched
          invisibly over the box, so a click anywhere hits it. That is a mouse
          affordance, not an accessible name — the label is wired up with
-         for/id so a screen reader announces it too. {% endcomment %}
-      <div class="ui checkbox">
-        <input type="checkbox"
-               id="{{ name }}-{{ forloop.counter }}"
-               name="{{ name }}"
-               value="{{ choice.value }}"
-               {% if choice.value in selected %}checked{% endif %}>
-        <label for="{{ name }}-{{ forloop.counter }}">{{ choice.label }}</label>
+        for/id so a screen reader announces it too. {% endcomment %}
+        <div class="ui checkbox">
+          <input
+            type="checkbox"
+            id="{{ name }}-{{ forloop.counter }}"
+            name="{{ name }}"
+            value="{{ choice.value }}"
+            {% if choice.value in selected %}checked{% endif %}
+          >
+          <label for="{{ name }}-{{ forloop.counter }}">{{ choice.label }}</label>
+        </div>
       </div>
-    </div>
     {% endfor %}
     {% if error %}<div class="ui basic red pointing prompt label">{{ error }}</div>{% endif %}
   </div>
diff --git a/src/cf_ui/templates/cotton/_themes/fomantic/form-field.html b/src/cf_ui/templates/cotton/_themes/fomantic/form-field.html
index ebb05df..707e08a 100644
--- a/src/cf_ui/templates/cotton/_themes/fomantic/form-field.html
+++ b/src/cf_ui/templates/cotton/_themes/fomantic/form-field.html
@@ -1,21 +1,27 @@
 {% comment %} Every Fomantic form rule is scoped `.ui.form .field`, so a standalone field
    with no `.ui.form` ancestor is unstyled. The component carries its own, which
-   nests harmlessly inside a consumer's `<form class="ui form">`. `input_class`
+   nests harmlessly inside a consumer's `
+<form class="ui form">
+`. `input_class`
    lands on the `.ui.input` wrapper because that is where Fomantic's size and
-   state modifiers live (`ui mini input`, `ui icon input`). {% endcomment %}
+state modifiers live (`ui mini input`, `ui icon input`). {% endcomment %}
 <div class="ui form {{ class }}">
   <div class="field{% if error %} error{% endif %}">
     <label for="{{ name }}">{{ label }}</label>
-    <div class="ui fluid input{% if input_class %} {{ input_class }}{% endif %}">
-      <input id="{{ name }}"
-             type="{{ type }}"
-             name="{{ name }}"
-             value="{{ value }}"
-             {% if required == "true" %}required{% endif %}>
+    <div
+      class="ui fluid input{% if input_class %} {{ input_class }}{% endif %}"
+    >
+      <input
+        id="{{ name }}"
+        type="{{ type }}"
+        name="{{ name }}"
+        value="{{ value }}"
+        {% if required == "true" %}required{% endif %}
+      >
     </div>
     {% comment %} Not `<div class="ui error message">`: `.ui.form .error.message` is
        display:none until the *form* itself carries `.error`. The prompt label
-       is what Fomantic actually shows for a single field. {% endcomment %}
+    is what Fomantic actually shows for a single field. {% endcomment %}
     {% if error %}<div class="ui basic red pointing prompt label">{{ error }}</div>{% endif %}
   </div>
 </div>
diff --git a/src/cf_ui/templates/cotton/_themes/fomantic/heading.html b/src/cf_ui/templates/cotton/_themes/fomantic/heading.html
new file mode 100644
index 0000000..7774da5
--- /dev/null
+++ b/src/cf_ui/templates/cotton/_themes/fomantic/heading.html
@@ -0,0 +1,13 @@
+{% comment %} `emphasis="subtle"` is `grey`, not Fomantic's own `sub` header, and that is
+   deliberate. `.ui.sub.header` sets `font-size: .85714286em` and is defined *after* every
+   size variation (`.ui.small.header` … `.ui.massive.header`) at identical specificity
+   (0,3,0), so source order hands it the cascade and the `size` axis silently stops doing
+   anything — an h2 carrying `ui header massive sub` renders at .857em, the same as a tiny
+   one. `.ui.grey.header` only sets `color`, so emphasis and size stay independent, which
+   is the whole point of this component.
+
+   `size` also has no `medium` step to map `normal` onto: Fomantic ships mini, tiny, small,
+   large, big, huge and massive, with nothing between small and large. Emitting no size
+   class would fall back to the *tag's* size and re-couple size to level, so `normal` takes
+`large` (1.71em) — the token reads oddly, the rendered size does not. {% endcomment %}
+<h{{ level }} class="ui header{% if size == 'small' %} small{% elif size == 'normal' %} large{% elif size == 'large' %} massive{% endif %}{% if emphasis == 'subtle' %} grey{% endif %}{% if class %} {{ class }}{% endif %}">{{ slot }}</h{{ level }}>
diff --git a/src/cf_ui/templates/cotton/_themes/fomantic/icon.html b/src/cf_ui/templates/cotton/_themes/fomantic/icon.html
new file mode 100644
index 0000000..4484589
--- /dev/null
+++ b/src/cf_ui/templates/cotton/_themes/fomantic/icon.html
@@ -0,0 +1,4 @@
+<span
+  class="ui text{% if size == 'small' %} small{% elif size == 'large' %} large{% endif %}{% if class %} {{ class }}{% endif %}"
+  {% if label %} role="img" aria-label="{{ label }}"{% else %} aria-hidden="true"{% endif %}
+>{{ slot }}</span>
diff --git a/src/cf_ui/templates/cotton/_themes/fomantic/label.html b/src/cf_ui/templates/cotton/_themes/fomantic/label.html
new file mode 100644
index 0000000..04f63a1
--- /dev/null
+++ b/src/cf_ui/templates/cotton/_themes/fomantic/label.html
@@ -0,0 +1,8 @@
+{% comment %}Fomantic's only label rule is `.ui.form .field > label`, so the
+styling comes from the ancestry rather than a class — hence the two wrappers,
+exactly as `form-field.html` carries them. Size lands on the form
+(`.ui.small.form` / `.ui.large.form`) because `.field > label` is sized in
+`em`.{% endcomment %}
+<div
+  class="ui{% if size == 'small' %} small{% elif size == 'large' %} large{% endif %} form"
+><div class="field"><label class="{{ class }}"{% if for_id %} for="{{ for_id }}"{% endif %}>{{ slot }}{% if required %} <span class="ui red text" role="img" aria-label="required">*</span>{% endif %}</label></div></div>
diff --git a/src/cf_ui/templates/cotton/_themes/fomantic/modal.html b/src/cf_ui/templates/cotton/_themes/fomantic/modal.html
index dc5cb8f..912aa8c 100644
--- a/src/cf_ui/templates/cotton/_themes/fomantic/modal.html
+++ b/src/cf_ui/templates/cotton/_themes/fomantic/modal.html
@@ -2,22 +2,24 @@
    `$('.ui.modal').modal('show')`, which also injects the `.ui.dimmer` wrapper.
    cf-ui loads no Fomantic JS, so the dimmer is part of the markup and both
    `.ui.dimmer` and `.ui.modal` — each `display:none` until `.active` — get the
-   class from the same Alpine `open`. {% endcomment %}
-<div id="{{ id }}"
-     class="ui page dimmer {{ class }}"
-     role="dialog"
-     aria-modal="true"
-     {% if header %}aria-labelledby="{{ id }}-title"{% else %}aria-label="{{ label|default:'Dialog' }}"{% endif %}
-     x-data="cfModal"
-     x-init="initModal()"
-     :class="{ 'active': open }"
-     @click.self="close()">
+class from the same Alpine `open`. {% endcomment %}
+<div
+  id="{{ id }}"
+  class="ui page dimmer {{ class }}"
+  role="dialog"
+  aria-modal="true"
+  {% if header %}aria-labelledby="{{ id }}-title"{% else %}aria-label="{{ label|default:'Dialog' }}"{% endif %}
+  x-data="cfModal"
+  x-init="initModal()"
+  :class="{ 'active': open }"
+  @click.self="close()"
+>
   <div class="ui modal" :class="{ 'active': open }">
     <button type="button" class="close" aria-label="close" @click="close()">&times;</button>
     {% if header %}<div class="header" id="{{ id }}-title">{{ header }}</div>{% endif %}
     <div class="content">{{ slot }}</div>
     {% if footer %}
-    <div class="actions">{{ footer }}</div>
+      <div class="actions">{{ footer }}</div>
     {% endif %}
   </div>
 </div>
diff --git a/src/cf_ui/templates/cotton/_themes/fomantic/navbar.html b/src/cf_ui/templates/cotton/_themes/fomantic/navbar.html
index ef0b056..14f6490 100644
--- a/src/cf_ui/templates/cotton/_themes/fomantic/navbar.html
+++ b/src/cf_ui/templates/cotton/_themes/fomantic/navbar.html
@@ -4,18 +4,22 @@
    burger would have to reveal. The toggle is kept because `cfNavbar` is the
    cross-theme contract — it reports its state through `aria-expanded` and
    Fomantic's `active` item class rather than through a display utility that
-   this framework does not ship. {% endcomment %}
-<nav class="ui stackable menu {{ class }}"
-     role="navigation"
-     aria-label="main navigation"
-     x-data="cfNavbar">
+this framework does not ship. {% endcomment %}
+<nav
+  class="ui stackable menu {{ class }}"
+  role="navigation"
+  aria-label="main navigation"
+  x-data="cfNavbar"
+>
   <div class="header item">{{ brand }}</div>
-  <button type="button"
-          class="item"
-          aria-label="menu"
-          :aria-expanded="menuOpen"
-          :class="{ 'active': menuOpen }"
-          @click="toggle()">&#9776;</button>
+  <button
+    type="button"
+    class="item"
+    aria-label="menu"
+    :aria-expanded="menuOpen"
+    :class="{ 'active': menuOpen }"
+    @click="toggle()"
+  >&#9776;</button>
   <div class="item">{{ start }}</div>
   <div class="right menu">
     <div class="item">{{ end }}</div>
diff --git a/src/cf_ui/templates/cotton/_themes/fomantic/notification.html b/src/cf_ui/templates/cotton/_themes/fomantic/notification.html
index 36a2736..a89afc4 100644
--- a/src/cf_ui/templates/cotton/_themes/fomantic/notification.html
+++ b/src/cf_ui/templates/cotton/_themes/fomantic/notification.html
@@ -1,12 +1,21 @@
-<div role="alert"
-     class="ui {% if type == 'danger' or type == 'error' %}negative{% elif type == 'success' %}positive{% elif type == 'warning' %}warning{% else %}info{% endif %} message {{ class }}"
-     x-data="{ visible: true }"
-     x-show="visible">
+<div
+  role="alert"
+  class="ui {% if type == 'danger' or type == 'error' %}negative{% elif type == 'success' %}positive{% elif type == 'warning' %}warning{% else %}info{% endif %} message {{ class }}"
+  x-data="{ visible: true }"
+  x-show="visible"
+>
   {% if dismissible == "true" %}
-  {% comment %} `.ui.message > .close.icon` positions this; the glyph rules are scoped to
-     `i.icon`, so a `<button>` keeps the placement and renders its own text —
-     which is what makes it a real, focusable control rather than an `<i>`. {% endcomment %}
-  <button type="button" class="close icon" aria-label="dismiss" @click="visible = false">&times;</button>
+    {% comment %} `.ui.message > .close.icon` positions this; the glyph rules are scoped to
+     `i.icon`, so a `
+<button>
+` keeps the placement and renders its own text —
+    which is what makes it a real, focusable control rather than an `<i>`. {% endcomment %}
+    <button
+      type="button"
+      class="close icon"
+      aria-label="dismiss"
+      @click="visible = false"
+    >&times;</button>
   {% endif %}
   <div class="content">{{ message }}</div>
 </div>
diff --git a/src/cf_ui/templates/cotton/_themes/fomantic/pagination.html b/src/cf_ui/templates/cotton/_themes/fomantic/pagination.html
index e5c6e2b..87c7a67 100644
--- a/src/cf_ui/templates/cotton/_themes/fomantic/pagination.html
+++ b/src/cf_ui/templates/cotton/_themes/fomantic/pagination.html
@@ -1,26 +1,33 @@
 {% load cf_ui %}
-<nav class="ui pagination menu {{ class }}" role="navigation" aria-label="pagination">
+<nav
+  class="ui pagination menu {{ class }}"
+  role="navigation"
+  aria-label="pagination"
+>
   {% if page|add:"0" > 1 %}
-  <a class="item"
-     hx-get="{{ hx_url }}?page={{ page|add:"-1" }}"
-     hx-target="{{ hx_target }}">Previous</a>
+    <a
+      class="item"
+      hx-get="{{ hx_url }}?page={{ page|add:"-1" }}"
+      hx-target="{{ hx_target }}"
+    >Previous</a>
   {% else %}
-  <a class="disabled item" aria-disabled="true">Previous</a>
+    <a class="disabled item" aria-disabled="true">Previous</a>
   {% endif %}
   {% for p in total_pages|make_list_1_to_n %}
-  <a class="{% if p == page|add:'0' %}active {% endif %}item"
-     {% if p != page|add:"0" %}
-     hx-get="{{ hx_url }}?page={{ p }}"
-     hx-target="{{ hx_target }}"
-     {% endif %}
-     aria-label="Page {{ p }}"
-     {% if p == page|add:'0' %}aria-current="page"{% endif %}>{{ p }}</a>
+    <a
+      class="{% if p == page|add:'0' %}active {% endif %}item"
+      {% if p != page|add:"0" %} hx-get="{{ hx_url }}?page={{ p }}" hx-target="{{ hx_target }}" {% endif %}
+      aria-label="Page {{ p }}"
+      {% if p == page|add:'0' %}aria-current="page"{% endif %}
+    >{{ p }}</a>
   {% endfor %}
   {% if page|add:"0" < total_pages|add:"0" %}
-  <a class="item"
-     hx-get="{{ hx_url }}?page={{ page|add:"1" }}"
-     hx-target="{{ hx_target }}">Next</a>
+    <a
+      class="item"
+      hx-get="{{ hx_url }}?page={{ page|add:"1" }}"
+      hx-target="{{ hx_target }}"
+    >Next</a>
   {% else %}
-  <a class="disabled item" aria-disabled="true">Next</a>
+    <a class="disabled item" aria-disabled="true">Next</a>
   {% endif %}
 </nav>
diff --git a/src/cf_ui/templates/cotton/_themes/fomantic/panel.html b/src/cf_ui/templates/cotton/_themes/fomantic/panel.html
index 8911aee..7c3047f 100644
--- a/src/cf_ui/templates/cotton/_themes/fomantic/panel.html
+++ b/src/cf_ui/templates/cotton/_themes/fomantic/panel.html
@@ -1,25 +1,29 @@
 {% comment %} `.ui.accordion .title ~ .content:not(.active)` is `display:none`, so the open
    state has to be a *class*, not only `x-show`: Alpine dropping its inline
    `display:none` would leave the stylesheet's rule in force. Both are bound so
-   the panel is right with Alpine off (class, server-rendered) and with it on. {% endcomment %}
-<div class="ui styled fluid accordion {{ class }}"
-     x-data="cfPanel"
-     x-init="initPanel()"
-     data-cf-open="{% if open and open != 'false' %}true{% else %}false{% endif %}">
-  <button type="button"
-          class="title{% if open and open != 'false' %} active{% endif %}"
-          :class="{ 'active': open }"
-          aria-controls="{{ id }}-body"
-          aria-expanded="{% if open and open != 'false' %}true{% else %}false{% endif %}"
-          :aria-expanded="open"
-          @click="toggle()">
+the panel is right with Alpine off (class, server-rendered) and with it on. {% endcomment %}
+<div
+  class="ui styled fluid accordion {{ class }}"
+  x-data="cfPanel"
+  x-init="initPanel()"
+  data-cf-open="{% if open and open != 'false' %}true{% else %}false{% endif %}"
+>
+  <button
+    type="button"
+    class="title{% if open and open != 'false' %} active{% endif %}"
+    :class="{ 'active': open }"
+    aria-controls="{{ id }}-body"
+    aria-expanded="{% if open and open != 'false' %}true{% else %}false{% endif %}"
+    :aria-expanded="open"
+    @click="toggle()"
+  >
     <span class="dropdown icon" aria-hidden="true">&#9654;</span>{{ title }}
   </button>
-  <div id="{{ id }}-body"
-       class="content{% if open and open != 'false' %} active{% endif %}"
-       :class="{ 'active': open }"
-       x-show="open"
-       {% if not open or open == 'false' %}x-cloak{% endif %}>
-    {{ slot }}
-  </div>
+  <div
+    id="{{ id }}-body"
+    class="content{% if open and open != 'false' %} active{% endif %}"
+    :class="{ 'active': open }"
+    x-show="open"
+    {% if not open or open == 'false' %}x-cloak{% endif %}
+  >{{ slot }}</div>
 </div>
diff --git a/src/cf_ui/templates/cotton/_themes/fomantic/progress.html b/src/cf_ui/templates/cotton/_themes/fomantic/progress.html
index 62cabb9..51d07b2 100644
--- a/src/cf_ui/templates/cotton/_themes/fomantic/progress.html
+++ b/src/cf_ui/templates/cotton/_themes/fomantic/progress.html
@@ -9,17 +9,25 @@
    report `aria-valuenow="150"` against a max of 100. Django has no min/max
    filter, so the clamp is three `widthratio` branches: `1 1 100` is 100 and
    `0 1 100` is 0. The ARIA is stated in percent so it agrees with the visible
-   "40%" text. {% endcomment %}
+"40%" text. {% endcomment %}
 {% widthratio value max 100 as cf_raw %}
-{% if cf_raw|add:"0" > 100 %}{% widthratio 1 1 100 as cf_pct %}{% elif cf_raw|add:"0" < 0 %}{% widthratio 0 1 100 as cf_pct %}{% else %}{% widthratio value max 100 as cf_pct %}{% endif %}
+{% if cf_raw|add:"0" > 100 %}
+  {% widthratio 1 1 100 as cf_pct %}
+{% elif cf_raw|add:"0" < 0 %}
+  {% widthratio 0 1 100 as cf_pct %}
+{% else %}
+  {% widthratio value max 100 as cf_pct %}
+{% endif %}
 <div class="{{ class }}">
-  <div class="ui {% if type == 'danger' or type == 'error' %}error{% elif type == 'success' %}success{% elif type == 'warning' %}warning{% elif type == 'info' %}teal{% else %}blue{% endif %} progress"
-       data-percent="{{ cf_pct }}"
-       role="progressbar"
-       aria-valuenow="{{ cf_pct }}"
-       aria-valuemin="0"
-       aria-valuemax="100"
-       {% if label %}aria-label="{{ label }}"{% endif %}>
+  <div
+    class="ui {% if type == 'danger' or type == 'error' %}error{% elif type == 'success' %}success{% elif type == 'warning' %}warning{% elif type == 'info' %}teal{% else %}blue{% endif %} progress"
+    data-percent="{{ cf_pct }}"
+    role="progressbar"
+    aria-valuenow="{{ cf_pct }}"
+    aria-valuemin="0"
+    aria-valuemax="100"
+    {% if label %}aria-label="{{ label }}"{% endif %}
+  >
     <div class="bar" style="width: {{ cf_pct }}%">
       <div class="progress">{{ cf_pct }}%</div>
     </div>
diff --git a/src/cf_ui/templates/cotton/_themes/fomantic/select.html b/src/cf_ui/templates/cotton/_themes/fomantic/select.html
index 9c26b12..0bb3dc8 100644
--- a/src/cf_ui/templates/cotton/_themes/fomantic/select.html
+++ b/src/cf_ui/templates/cotton/_themes/fomantic/select.html
@@ -2,17 +2,20 @@
    at runtime by a jQuery module cf-ui does not load, over a hidden select;
    reproducing its DOM by hand would be a combobox nobody can drive. The
    component's contract is a form control, and `select.ui.dropdown` /
-   `.ui.selection.dropdown` style a native select acceptably with no JS. {% endcomment %}
+`.ui.selection.dropdown` style a native select acceptably with no JS. {% endcomment %}
 <div class="ui form {{ class }}">
   <div class="field{% if error %} error{% endif %}">
     <label for="{{ name }}">{{ label }}</label>
-    <select class="ui fluid selection dropdown{% if input_class %} {{ input_class }}{% endif %}"
-            id="{{ name }}"
-            name="{{ name }}">
+    <select
+      class="ui fluid selection dropdown{% if input_class %} {{ input_class }}{% endif %}"
+      id="{{ name }}"
+      name="{{ name }}"
+    >
       {% for opt in options %}
-      <option value="{{ opt.value }}"{% if opt.value|stringformat:"s" == value|stringformat:"s" %} selected{% endif %}>
-        {{ opt.label }}
-      </option>
+        <option
+          value="{{ opt.value }}"
+          {% if opt.value|stringformat:"s" == value|stringformat:"s" %} selected{% endif %}
+        >{{ opt.label }}</option>
       {% endfor %}
     </select>
     {% if error %}<div class="ui basic red pointing prompt label">{{ error }}</div>{% endif %}
diff --git a/src/cf_ui/templates/cotton/_themes/fomantic/table.html b/src/cf_ui/templates/cotton/_themes/fomantic/table.html
index 6ed59e8..40d8f82 100644
--- a/src/cf_ui/templates/cotton/_themes/fomantic/table.html
+++ b/src/cf_ui/templates/cotton/_themes/fomantic/table.html
@@ -4,17 +4,17 @@
     <thead>
       <tr>
         {% for col in columns %}
-        <th>{{ col.label }}</th>
+          <th>{{ col.label }}</th>
         {% endfor %}
       </tr>
     </thead>
     <tbody>
       {% for row in rows %}
-      <tr>
-        {% for col in columns %}
-        <td>{{ row|get_item:col.key }}</td>
-        {% endfor %}
-      </tr>
+        <tr>
+          {% for col in columns %}
+            <td>{{ row|get_item:col.key }}</td>
+          {% endfor %}
+        </tr>
       {% endfor %}
     </tbody>
   </table>
diff --git a/src/cf_ui/templates/cotton/_themes/fomantic/tabs.html b/src/cf_ui/templates/cotton/_themes/fomantic/tabs.html
index b588eaa..a2a28bb 100644
--- a/src/cf_ui/templates/cotton/_themes/fomantic/tabs.html
+++ b/src/cf_ui/templates/cotton/_themes/fomantic/tabs.html
@@ -1,25 +1,37 @@
 {% comment %} The panel is a plain attached segment, not `.ui.tab`: `.ui.tab` is
    `display:none` until Fomantic's Tab module adds `.active`, and this one panel
-   is always the visible one — HTMX swaps its contents. {% endcomment %}
-<div class="{{ class }}"
-     x-data="cfTabs"
-     x-init="initTabs()"
-     data-cf-active="{{ active }}">
-  <div role="tablist" class="ui top attached tabular menu" @keydown="onKeydown($event)">
+is always the visible one — HTMX swaps its contents. {% endcomment %}
+<div
+  class="{{ class }}"
+  x-data="cfTabs"
+  x-init="initTabs()"
+  data-cf-active="{{ active }}"
+>
+  <div
+    role="tablist"
+    class="ui top attached tabular menu"
+    @keydown="onKeydown($event)"
+  >
     {% for tab in tabs %}
-    <a role="tab"
-       data-cf-tab="{{ tab.id }}"
-       class="{% if tab.id == active %}active {% endif %}item"
-       aria-controls="{{ hx_target }}"
-       aria-selected="{% if tab.id == active %}true{% else %}false{% endif %}"
-       tabindex="{% if tab.id == active or not active and forloop.first %}0{% else %}-1{% endif %}"
-       :class="{ 'active': active === $el.dataset.cfTab }"
-       :aria-selected="active === $el.dataset.cfTab"
-       :tabindex="tabIndexFor($el.dataset.cfTab)"
-       @click.prevent="setActive($el.dataset.cfTab)"
-       hx-get="{{ tab.url }}"
-       hx-target="#{{ hx_target }}">{{ tab.id }}</a>
+      <a
+        role="tab"
+        data-cf-tab="{{ tab.id }}"
+        class="{% if tab.id == active %}active {% endif %}item"
+        aria-controls="{{ hx_target }}"
+        aria-selected="{% if tab.id == active %}true{% else %}false{% endif %}"
+        tabindex="{% if tab.id == active or not active and forloop.first %}0{% else %}-1{% endif %}"
+        :class="{ 'active': active === $el.dataset.cfTab }"
+        :aria-selected="active === $el.dataset.cfTab"
+        :tabindex="tabIndexFor($el.dataset.cfTab)"
+        @click.prevent="setActive($el.dataset.cfTab)"
+        hx-get="{{ tab.url }}"
+        hx-target="#{{ hx_target }}"
+      >{{ tab.id }}</a>
     {% endfor %}
   </div>
-  <div id="{{ hx_target }}" role="tabpanel" class="ui bottom attached segment">{{ slot }}</div>
+  <div
+    id="{{ hx_target }}"
+    role="tabpanel"
+    class="ui bottom attached segment"
+  >{{ slot }}</div>
 </div>
diff --git a/src/cf_ui/templates/cotton/_themes/fomantic/textarea.html b/src/cf_ui/templates/cotton/_themes/fomantic/textarea.html
index b5d4bf1..b35a215 100644
--- a/src/cf_ui/templates/cotton/_themes/fomantic/textarea.html
+++ b/src/cf_ui/templates/cotton/_themes/fomantic/textarea.html
@@ -1,9 +1,12 @@
 <div class="ui form {{ class }}">
   <div class="field{% if error %} error{% endif %}">
     <label for="{{ name }}">{{ label }}</label>
-    <textarea id="{{ name }}"
-              name="{{ name }}"
-              rows="{{ rows }}"{% if input_class %} class="{{ input_class }}"{% endif %}>{{ value }}</textarea>
+    <textarea
+      id="{{ name }}"
+      name="{{ name }}"
+      rows="{{ rows }}"
+      {% if input_class %} class="{{ input_class }}"{% endif %}
+    >{{ value }}</textarea>
     {% if error %}<div class="ui basic red pointing prompt label">{{ error }}</div>{% endif %}
   </div>
 </div>
diff --git a/src/cf_ui/templates/cotton/_themes/foundation/badge.html b/src/cf_ui/templates/cotton/_themes/foundation/badge.html
new file mode 100644
index 0000000..7c88c8a
--- /dev/null
+++ b/src/cf_ui/templates/cotton/_themes/foundation/badge.html
@@ -0,0 +1,3 @@
+<span
+  class="label{% if variant == 'primary' %} primary{% elif variant == 'secondary' %} secondary{% elif variant == 'success' %} success{% elif variant == 'warning' %} warning{% elif variant == 'danger' %} alert{% elif variant == 'info' %} secondary{% endif %}{% if class %} {{ class }}{% endif %}"
+>{{ slot }}</span>
diff --git a/src/cf_ui/templates/cotton/_themes/foundation/breadcrumb.html b/src/cf_ui/templates/cotton/_themes/foundation/breadcrumb.html
index 693ebf0..cdfba10 100644
--- a/src/cf_ui/templates/cotton/_themes/foundation/breadcrumb.html
+++ b/src/cf_ui/templates/cotton/_themes/foundation/breadcrumb.html
@@ -1,15 +1,15 @@
 {% comment %} Foundation draws the "/" separator with `.breadcrumbs li:not(:last-child)::after`,
-   so the markup must not carry one of its own. {% endcomment %}
+so the markup must not carry one of its own. {% endcomment %}
 <nav aria-label="breadcrumbs">
   <ul class="breadcrumbs {{ class }}">
     {% for item in items %}
-    <li>
-      {% if forloop.last %}
-      <a href="{{ item.url }}" aria-current="page">{{ item.label }}</a>
-      {% else %}
-      <a href="{{ item.url }}">{{ item.label }}</a>
-      {% endif %}
-    </li>
+      <li>
+        {% if forloop.last %}
+          <a href="{{ item.url }}" aria-current="page">{{ item.label }}</a>
+        {% else %}
+          <a href="{{ item.url }}">{{ item.label }}</a>
+        {% endif %}
+      </li>
     {% endfor %}
   </ul>
 </nav>
diff --git a/src/cf_ui/templates/cotton/_themes/foundation/button.html b/src/cf_ui/templates/cotton/_themes/foundation/button.html
new file mode 100644
index 0000000..656dba9
--- /dev/null
+++ b/src/cf_ui/templates/cotton/_themes/foundation/button.html
@@ -0,0 +1 @@
+{% with cf_tag=href|yesno:"a,button" %}<{{ cf_tag }} class="button{% if variant == 'primary' %} primary{% elif variant == 'secondary' %} secondary{% elif variant == 'success' %} success{% elif variant == 'warning' %} warning{% elif variant == 'danger' %} alert{% elif variant == 'info' %} secondary{% endif %}{% if size == 'small' %} small{% elif size == 'large' %} large{% endif %}{% if state == 'disabled' %} disabled{% endif %}{% if full_width %} expanded{% endif %}{% if class %} {{ class }}{% endif %}"{% if href %}{% if state == 'disabled' %} role="link" aria-disabled="true"{% else %} href="{{ href }}"{% endif %}{% else %} type="{{ type }}"{% if state == 'disabled' %} disabled{% endif %}{% endif %}>{{ slot }}</{{ cf_tag }}>{% endwith %}
diff --git a/src/cf_ui/templates/cotton/_themes/foundation/card.html b/src/cf_ui/templates/cotton/_themes/foundation/card.html
index 9b08588..18a7be7 100644
--- a/src/cf_ui/templates/cotton/_themes/foundation/card.html
+++ b/src/cf_ui/templates/cotton/_themes/foundation/card.html
@@ -1,13 +1,13 @@
 {% comment %} Foundation has no `.card-footer`; a trailing `.card-divider` is the
-   documented footer convention. {% endcomment %}
+documented footer convention. {% endcomment %}
 <div class="card {{ class }}">
   {% if header %}
-  <div class="card-divider">
-    <h3>{{ header }}</h3>
-  </div>
+    <div class="card-divider">
+      <h3>{{ header }}</h3>
+    </div>
   {% endif %}
   <div class="card-section">{{ slot }}</div>
   {% if footer %}
-  <div class="card-divider">{{ footer }}</div>
+    <div class="card-divider">{{ footer }}</div>
   {% endif %}
 </div>
diff --git a/src/cf_ui/templates/cotton/_themes/foundation/checkbox-group.html b/src/cf_ui/templates/cotton/_themes/foundation/checkbox-group.html
index 3cf4467..7557148 100644
--- a/src/cf_ui/templates/cotton/_themes/foundation/checkbox-group.html
+++ b/src/cf_ui/templates/cotton/_themes/foundation/checkbox-group.html
@@ -1,16 +1,18 @@
 {% comment %} Foundation groups checkboxes in a fieldset/legend and pairs a *sibling*
    `label[for]` with each input rather than wrapping it, so every box needs an
-   id of its own — a shared one would point every label at the first input. {% endcomment %}
+id of its own — a shared one would point every label at the first input. {% endcomment %}
 <fieldset class="fieldset {{ class }}">
   <legend>{{ label }}</legend>
   <div class="{{ control_class }}">
     {% for choice in choices %}
-    <input type="checkbox"
-           id="{{ name }}-{{ forloop.counter }}"
-           name="{{ name }}"
-           value="{{ choice.value }}"
-           {% if choice.value in selected %}checked{% endif %}>
-    <label for="{{ name }}-{{ forloop.counter }}">{{ choice.label }}</label>
+      <input
+        type="checkbox"
+        id="{{ name }}-{{ forloop.counter }}"
+        name="{{ name }}"
+        value="{{ choice.value }}"
+        {% if choice.value in selected %}checked{% endif %}
+      >
+      <label for="{{ name }}-{{ forloop.counter }}">{{ choice.label }}</label>
     {% endfor %}
   </div>
   {% if error %}<span class="form-error is-visible">{{ error }}</span>{% endif %}
diff --git a/src/cf_ui/templates/cotton/_themes/foundation/form-field.html b/src/cf_ui/templates/cotton/_themes/foundation/form-field.html
index 86b492d..c5e817c 100644
--- a/src/cf_ui/templates/cotton/_themes/foundation/form-field.html
+++ b/src/cf_ui/templates/cotton/_themes/foundation/form-field.html
@@ -1,17 +1,19 @@
 {% comment %} `.form-error` is `display: none` until `.is-visible` joins it — emitting the
    text without it renders an error nobody can see. These three classes are the
    whole of what Foundation's Abide plugin does at runtime, so rendering them
-   server-side is a complete substitute for loading it. {% endcomment %}
+server-side is a complete substitute for loading it. {% endcomment %}
 <div class="{{ class }}">
   <label for="{{ name }}"{% if error %} class="is-invalid-label"{% endif %}>{{ label }}</label>
-  <input class="{% if error %}is-invalid-input{% endif %}{% if input_class %} {{ input_class }}{% endif %}"
-         id="{{ name }}"
-         type="{{ type }}"
-         name="{{ name }}"
-         value="{{ value }}"
-         {% if error %}aria-invalid="true" aria-describedby="{{ name }}-error"{% endif %}
-         {% if required == "true" %}required{% endif %}>
+  <input
+    class="{% if error %}is-invalid-input{% endif %}{% if input_class %} {{ input_class }}{% endif %}"
+    id="{{ name }}"
+    type="{{ type }}"
+    name="{{ name }}"
+    value="{{ value }}"
+    {% if error %}aria-invalid="true" aria-describedby="{{ name }}-error"{% endif %}
+    {% if required == "true" %}required{% endif %}
+  >
   {% if error %}
-  <span class="form-error is-visible" id="{{ name }}-error">{{ error }}</span>
+    <span class="form-error is-visible" id="{{ name }}-error">{{ error }}</span>
   {% endif %}
 </div>
diff --git a/src/cf_ui/templates/cotton/_themes/foundation/heading.html b/src/cf_ui/templates/cotton/_themes/foundation/heading.html
new file mode 100644
index 0000000..3e73392
--- /dev/null
+++ b/src/cf_ui/templates/cotton/_themes/foundation/heading.html
@@ -0,0 +1 @@
+<h{{ level }} class="{% if size == 'small' %}h6{% elif size == 'normal' %}h4{% elif size == 'large' %}h2{% endif %}{% if emphasis == 'subtle' %} subheader{% endif %}{% if class %} {{ class }}{% endif %}">{{ slot }}</h{{ level }}>
diff --git a/src/cf_ui/templates/cotton/_themes/foundation/icon.html b/src/cf_ui/templates/cotton/_themes/foundation/icon.html
new file mode 100644
index 0000000..506c3c7
--- /dev/null
+++ b/src/cf_ui/templates/cotton/_themes/foundation/icon.html
@@ -0,0 +1,4 @@
+<span
+  class="{% if class %}{{ class }}{% endif %}"
+  {% if label %} role="img" aria-label="{{ label }}"{% else %} aria-hidden="true"{% endif %}
+>{{ slot }}</span>
diff --git a/src/cf_ui/templates/cotton/_themes/foundation/label.html b/src/cf_ui/templates/cotton/_themes/foundation/label.html
new file mode 100644
index 0000000..c77ee97
--- /dev/null
+++ b/src/cf_ui/templates/cotton/_themes/foundation/label.html
@@ -0,0 +1,8 @@
+{% comment %}No base class: Foundation styles form labels off the element, and
+its `.label` class is the badge component. `lead` (125%) is the only real
+font-size class outside the button scale; there is no smaller counterpart, so
+`small` maps to nothing.{% endcomment %}
+<label
+  class="{% if size == 'large' %}lead {% endif %}{{ class }}"
+  {% if for_id %} for="{{ for_id }}"{% endif %}
+>{{ slot }}{% if required %} <span role="img" aria-label="required">*</span>{% endif %}</label>
diff --git a/src/cf_ui/templates/cotton/_themes/foundation/modal.html b/src/cf_ui/templates/cotton/_themes/foundation/modal.html
index 5c53501..108db38 100644
--- a/src/cf_ui/templates/cotton/_themes/foundation/modal.html
+++ b/src/cf_ui/templates/cotton/_themes/foundation/modal.html
@@ -9,24 +9,31 @@
    The overlay is the root because `.reveal` is `position: relative; top: 100px`
    — it is only centred and scrollable because the fixed, full-screen overlay
    is its container. The plugin injects that wrapper at runtime; here it is
-   just markup. {% endcomment %}
-<div id="{{ id }}"
-     class="reveal-overlay {{ class }}"
-     role="dialog"
-     aria-modal="true"
-     {% if header %}aria-labelledby="{{ id }}-title"{% else %}aria-label="{{ label|default:'Dialog' }}"{% endif %}
-     x-data="cfModal"
-     x-init="initModal()"
-     :style="open ? 'display: block' : 'display: none'"
-     @click.self="close()">
+just markup. {% endcomment %}
+<div
+  id="{{ id }}"
+  class="reveal-overlay {{ class }}"
+  role="dialog"
+  aria-modal="true"
+  {% if header %}aria-labelledby="{{ id }}-title"{% else %}aria-label="{{ label|default:'Dialog' }}"{% endif %}
+  x-data="cfModal"
+  x-init="initModal()"
+  :style="open ? 'display: block' : 'display: none'"
+  @click.self="close()"
+>
   <div class="reveal" style="display: block">
-    <button type="button" class="close-button" aria-label="close" @click="close()">
+    <button
+      type="button"
+      class="close-button"
+      aria-label="close"
+      @click="close()"
+    >
       <span aria-hidden="true">&times;</span>
     </button>
     {% if header %}<h2 id="{{ id }}-title">{{ header }}</h2>{% endif %}
     <div>{{ slot }}</div>
     {% if footer %}
-    <div class="text-right">{{ footer }}</div>
+      <div class="text-right">{{ footer }}</div>
     {% endif %}
   </div>
 </div>
diff --git a/src/cf_ui/templates/cotton/_themes/foundation/navbar.html b/src/cf_ui/templates/cotton/_themes/foundation/navbar.html
index fafe372..600d828 100644
--- a/src/cf_ui/templates/cotton/_themes/foundation/navbar.html
+++ b/src/cf_ui/templates/cotton/_themes/foundation/navbar.html
@@ -5,23 +5,33 @@
    simply visible — which is the right no-JS answer.
 
    Foundation's `data-responsive-toggle` / `data-toggle` are inert without
-   `foundation.responsiveToggle.js`, so the burger is wired to cfNavbar. {% endcomment %}
-<nav class="top-bar {{ class }}" role="navigation" aria-label="main navigation"
-     x-data="cfNavbar">
+`foundation.responsiveToggle.js`, so the burger is wired to cfNavbar. {% endcomment %}
+<nav
+  class="top-bar {{ class }}"
+  role="navigation"
+  aria-label="main navigation"
+  x-data="cfNavbar"
+>
   <div class="top-bar-left">
     {% if brand %}
-    <ul class="menu">
-      <li class="menu-text">{{ brand }}</li>
-    </ul>
+      <ul class="menu">
+        <li class="menu-text">{{ brand }}</li>
+      </ul>
     {% endif %}
-    <button type="button"
-            class="menu-icon dark hide-for-medium"
-            aria-label="menu"
-            :aria-expanded="menuOpen"
-            @click="toggle()"></button>
-    <ul class="menu" :class="{ 'hide-for-small-only': !menuOpen }">{{ start }}</ul>
+    <button
+      type="button"
+      class="menu-icon dark hide-for-medium"
+      aria-label="menu"
+      :aria-expanded="menuOpen"
+      @click="toggle()"
+    ></button>
+    <ul class="menu" :class="{ 'hide-for-small-only': !menuOpen }">
+      {{ start }}
+    </ul>
   </div>
   <div class="top-bar-right" :class="{ 'hide-for-small-only': !menuOpen }">
-    <ul class="menu">{{ end }}</ul>
+    <ul class="menu">
+      {{ end }}
+    </ul>
   </div>
 </nav>
diff --git a/src/cf_ui/templates/cotton/_themes/foundation/notification.html b/src/cf_ui/templates/cotton/_themes/foundation/notification.html
index 86b0921..37cc95a 100644
--- a/src/cf_ui/templates/cotton/_themes/foundation/notification.html
+++ b/src/cf_ui/templates/cotton/_themes/foundation/notification.html
@@ -3,15 +3,22 @@
 
    `.close-button` is CSS-only styling; `data-closable` needs the Toggler
    plugin, so the dismiss is Alpine's. `.callout` is `position: relative`
-   precisely so the absolutely-positioned close button anchors to it. {% endcomment %}
-<div role="alert"
-     class="callout {% if type == 'danger' or type == 'error' %}alert{% elif type == 'success' %}success{% elif type == 'warning' %}warning{% elif type == 'secondary' %}secondary{% else %}primary{% endif %} {{ class }}"
-     x-data="{ visible: true }"
-     x-show="visible">
+precisely so the absolutely-positioned close button anchors to it. {% endcomment %}
+<div
+  role="alert"
+  class="callout {% if type == 'danger' or type == 'error' %}alert{% elif type == 'success' %}success{% elif type == 'warning' %}warning{% elif type == 'secondary' %}secondary{% else %}primary{% endif %} {{ class }}"
+  x-data="{ visible: true }"
+  x-show="visible"
+>
   <p>{{ message }}</p>
   {% if dismissible == "true" %}
-  <button type="button" class="close-button" aria-label="dismiss" @click="visible = false">
-    <span aria-hidden="true">&times;</span>
-  </button>
+    <button
+      type="button"
+      class="close-button"
+      aria-label="dismiss"
+      @click="visible = false"
+    >
+      <span aria-hidden="true">&times;</span>
+    </button>
   {% endif %}
 </div>
diff --git a/src/cf_ui/templates/cotton/_themes/foundation/pagination.html b/src/cf_ui/templates/cotton/_themes/foundation/pagination.html
index 66fb5d1..482ea3b 100644
--- a/src/cf_ui/templates/cotton/_themes/foundation/pagination.html
+++ b/src/cf_ui/templates/cotton/_themes/foundation/pagination.html
@@ -1,39 +1,43 @@
 {% load cf_ui %}
 {% comment %} Foundation generates the « / » arrows from `.pagination-previous a::before`
    and `.pagination-next a::after`, and disabled edges are bare text rather
-   than links (`.pagination-previous.disabled::before` covers that case). {% endcomment %}
+than links (`.pagination-previous.disabled::before` covers that case). {% endcomment %}
 <nav role="navigation" aria-label="pagination">
   <ul class="pagination {{ class }}">
     {% if page|add:"0" > 1 %}
-    <li class="pagination-previous">
-      <a hx-get="{{ hx_url }}?page={{ page|add:'-1' }}"
-         hx-target="{{ hx_target }}">Previous <span class="show-for-sr">page</span></a>
-    </li>
+      <li class="pagination-previous">
+        <a
+          hx-get="{{ hx_url }}?page={{ page|add:'-1' }}"
+          hx-target="{{ hx_target }}"
+        >Previous <span class="show-for-sr">page</span></a>
+      </li>
     {% else %}
-    <li class="pagination-previous disabled">Previous <span class="show-for-sr">page</span></li>
+      <li class="pagination-previous disabled">Previous <span class="show-for-sr">page</span></li>
     {% endif %}
-
     {% for p in total_pages|make_list_1_to_n %}
-    {% if p == page|add:'0' %}
-    <li class="current" aria-current="page">
-      <span class="show-for-sr">You're on page</span> {{ p }}
-    </li>
-    {% else %}
-    <li>
-      <a hx-get="{{ hx_url }}?page={{ p }}"
-         hx-target="{{ hx_target }}"
-         aria-label="Page {{ p }}">{{ p }}</a>
-    </li>
-    {% endif %}
+      {% if p == page|add:'0' %}
+        <li class="current" aria-current="page">
+          <span class="show-for-sr">You're on page</span> {{ p }}
+        </li>
+      {% else %}
+        <li>
+          <a
+            hx-get="{{ hx_url }}?page={{ p }}"
+            hx-target="{{ hx_target }}"
+            aria-label="Page {{ p }}"
+          >{{ p }}</a>
+        </li>
+      {% endif %}
     {% endfor %}
-
     {% if page|add:"0" < total_pages|add:"0" %}
-    <li class="pagination-next">
-      <a hx-get="{{ hx_url }}?page={{ page|add:'1' }}"
-         hx-target="{{ hx_target }}">Next <span class="show-for-sr">page</span></a>
-    </li>
+      <li class="pagination-next">
+        <a
+          hx-get="{{ hx_url }}?page={{ page|add:'1' }}"
+          hx-target="{{ hx_target }}"
+        >Next <span class="show-for-sr">page</span></a>
+      </li>
     {% else %}
-    <li class="pagination-next disabled">Next <span class="show-for-sr">page</span></li>
+      <li class="pagination-next disabled">Next <span class="show-for-sr">page</span></li>
     {% endif %}
   </ul>
 </nav>
diff --git a/src/cf_ui/templates/cotton/_themes/foundation/panel.html b/src/cf_ui/templates/cotton/_themes/foundation/panel.html
index c1a90e9..7faadfc 100644
--- a/src/cf_ui/templates/cotton/_themes/foundation/panel.html
+++ b/src/cf_ui/templates/cotton/_themes/foundation/panel.html
@@ -4,27 +4,36 @@
    `slideDown()`. A server-open accordion panel would therefore be invisible
    with Alpine off, which is exactly what the accessibility contract forbids.
    `.card-section` has no such rule, so `x-show` + `x-cloak` behave here the
-   way they do in every other theme. {% endcomment %}
-<div class="card {{ class }}"
-     x-data="cfPanel"
-     x-init="initPanel()"
-     data-cf-open="{% if open and open != 'false' %}true{% else %}false{% endif %}">
-  <button type="button"
-          class="card-divider"
-          style="width:100%;text-align:left;cursor:pointer"
-          aria-controls="{{ id }}-body"
-          aria-expanded="{% if open and open != 'false' %}true{% else %}false{% endif %}"
-          :aria-expanded="open"
-          @click="toggle()">
+way they do in every other theme. {% endcomment %}
+<div
+  class="card {{ class }}"
+  x-data="cfPanel"
+  x-init="initPanel()"
+  data-cf-open="{% if open and open != 'false' %}true{% else %}false{% endif %}"
+>
+  <button
+    type="button"
+    class="card-divider"
+    style="width:100%;
+           text-align:left;
+           cursor:pointer"
+    aria-controls="{{ id }}-body"
+    aria-expanded="{% if open and open != 'false' %}true{% else %}false{% endif %}"
+    :aria-expanded="open"
+    @click="toggle()"
+  >
     <span>{{ title }}</span>
-    <span style="display:inline-block;transition:transform 200ms"
-          :style="open ? 'display:inline-block;transform:rotate(90deg)' : 'display:inline-block'"
-          aria-hidden="true">&#9654;</span>
+    <span
+      style="display:inline-block;
+             transition:transform 200ms"
+      :style="open ? 'display:inline-block;transform:rotate(90deg)' : 'display:inline-block'"
+      aria-hidden="true"
+    >&#9654;</span>
   </button>
-  <div id="{{ id }}-body"
-       class="card-section"
-       x-show="open"
-       {% if not open or open == 'false' %}x-cloak{% endif %}>
-    {{ slot }}
-  </div>
+  <div
+    id="{{ id }}-body"
+    class="card-section"
+    x-show="open"
+    {% if not open or open == 'false' %}x-cloak{% endif %}
+  >{{ slot }}</div>
 </div>
diff --git a/src/cf_ui/templates/cotton/_themes/foundation/progress.html b/src/cf_ui/templates/cotton/_themes/foundation/progress.html
index 618553c..331b0cc 100644
--- a/src/cf_ui/templates/cotton/_themes/foundation/progress.html
+++ b/src/cf_ui/templates/cotton/_themes/foundation/progress.html
@@ -5,15 +5,17 @@
    written out by hand, and the meter width is an inline style because
    Foundation ships no width utility for it. `widthratio` returns "0" on a
    zero max rather than raising. `tabindex` is deliberately omitted — a
-   progress bar is not an interactive stop. {% endcomment %}
+progress bar is not an interactive stop. {% endcomment %}
 <div class="{{ class }}">
   {% if label %}<p class="text-center">{{ label }}</p>{% endif %}
-  <div class="progress {% if type == 'danger' or type == 'error' %}alert{% elif type == 'success' %}success{% elif type == 'warning' %}warning{% elif type == 'secondary' %}secondary{% else %}primary{% endif %}"
-       role="progressbar"
-       aria-valuenow="{{ value }}"
-       aria-valuemin="0"
-       aria-valuemax="{{ max }}"
-       {% if label %}aria-label="{{ label }}"{% endif %}>
+  <div
+    class="progress {% if type == 'danger' or type == 'error' %}alert{% elif type == 'success' %}success{% elif type == 'warning' %}warning{% elif type == 'secondary' %}secondary{% else %}primary{% endif %}"
+    role="progressbar"
+    aria-valuenow="{{ value }}"
+    aria-valuemin="0"
+    aria-valuemax="{{ max }}"
+    {% if label %}aria-label="{{ label }}"{% endif %}
+  >
     <span class="progress-meter" style="width: {% widthratio value max 100 %}%">
       <span class="progress-meter-text">{% widthratio value max 100 %}%</span>
     </span>
diff --git a/src/cf_ui/templates/cotton/_themes/foundation/select.html b/src/cf_ui/templates/cotton/_themes/foundation/select.html
index e7a90ae..b3e393a 100644
--- a/src/cf_ui/templates/cotton/_themes/foundation/select.html
+++ b/src/cf_ui/templates/cotton/_themes/foundation/select.html
@@ -1,16 +1,19 @@
 <div class="{{ class }}">
   <label for="{{ name }}"{% if error %} class="is-invalid-label"{% endif %}>{{ label }}</label>
-  <select class="{% if error %}is-invalid-input{% endif %}{% if input_class %} {{ input_class }}{% endif %}"
-          id="{{ name }}"
-          name="{{ name }}"
-          {% if error %}aria-invalid="true" aria-describedby="{{ name }}-error"{% endif %}>
+  <select
+    class="{% if error %}is-invalid-input{% endif %}{% if input_class %} {{ input_class }}{% endif %}"
+    id="{{ name }}"
+    name="{{ name }}"
+    {% if error %}aria-invalid="true" aria-describedby="{{ name }}-error"{% endif %}
+  >
     {% for opt in options %}
-    <option value="{{ opt.value }}"{% if opt.value|stringformat:"s" == value|stringformat:"s" %} selected{% endif %}>
-      {{ opt.label }}
-    </option>
+      <option
+        value="{{ opt.value }}"
+        {% if opt.value|stringformat:"s" == value|stringformat:"s" %} selected{% endif %}
+      >{{ opt.label }}</option>
     {% endfor %}
   </select>
   {% if error %}
-  <span class="form-error is-visible" id="{{ name }}-error">{{ error }}</span>
+    <span class="form-error is-visible" id="{{ name }}-error">{{ error }}</span>
   {% endif %}
 </div>
diff --git a/src/cf_ui/templates/cotton/_themes/foundation/table.html b/src/cf_ui/templates/cotton/_themes/foundation/table.html
index 6c482c0..b00fe16 100644
--- a/src/cf_ui/templates/cotton/_themes/foundation/table.html
+++ b/src/cf_ui/templates/cotton/_themes/foundation/table.html
@@ -1,22 +1,22 @@
 {% load cf_ui %}
 {% comment %} Foundation styles the `<table>` element itself — there is no `.table` class.
-   `.table-scroll` is the 6.2+ wrapper; `table.scroll` is the legacy form. {% endcomment %}
+`.table-scroll` is the 6.2+ wrapper; `table.scroll` is the legacy form. {% endcomment %}
 <div class="table-scroll {{ class }}">
   <table class="hover">
     <thead>
       <tr>
         {% for col in columns %}
-        <th>{{ col.label }}</th>
+          <th>{{ col.label }}</th>
         {% endfor %}
       </tr>
     </thead>
     <tbody>
       {% for row in rows %}
-      <tr>
-        {% for col in columns %}
-        <td>{{ row|get_item:col.key }}</td>
-        {% endfor %}
-      </tr>
+        <tr>
+          {% for col in columns %}
+            <td>{{ row|get_item:col.key }}</td>
+          {% endfor %}
+        </tr>
       {% endfor %}
     </tbody>
   </table>
diff --git a/src/cf_ui/templates/cotton/_themes/foundation/tabs.html b/src/cf_ui/templates/cotton/_themes/foundation/tabs.html
index 5df31d9..e803843 100644
--- a/src/cf_ui/templates/cotton/_themes/foundation/tabs.html
+++ b/src/cf_ui/templates/cotton/_themes/foundation/tabs.html
@@ -1,31 +1,39 @@
 {% comment %} `.tabs-title > a[aria-selected=true]` is what actually restyles the selected
-   tab — `.is-active` on the `<li>` alone changes nothing visually — so the
+   tab — `.is-active` on the `
+<li>
+` alone changes nothing visually — so the
    aria attribute is load-bearing for appearance here, not only for the reader.
    Both are rendered server-side and both keep their Alpine binding.
 
    The panel is `.tabs-content` rather than `.tabs-panel`: this widget has one
    panel that is always shown and HTMX-swapped, whereas `.tabs-panel` is
-   `display: none` until `.is-active` picks one of several siblings. {% endcomment %}
-<div class="{{ class }}"
-     x-data="cfTabs"
-     x-init="initTabs()"
-     data-cf-active="{{ active }}">
+`display: none` until `.is-active` picks one of several siblings. {% endcomment %}
+<div
+  class="{{ class }}"
+  x-data="cfTabs"
+  x-init="initTabs()"
+  data-cf-active="{{ active }}"
+>
   <ul class="tabs" role="tablist" @keydown="onKeydown($event)">
     {% for tab in tabs %}
-    <li class="tabs-title{% if tab.id == active %} is-active{% endif %}"
+      <li
+        class="tabs-title{% if tab.id == active %} is-active{% endif %}"
         data-cf-tab="{{ tab.id }}"
-        :class="{ 'is-active': active === $el.dataset.cfTab }">
-      <a role="tab"
-         data-cf-tab="{{ tab.id }}"
-         aria-controls="{{ hx_target }}"
-         aria-selected="{% if tab.id == active %}true{% else %}false{% endif %}"
-         tabindex="{% if tab.id == active or not active and forloop.first %}0{% else %}-1{% endif %}"
-         :aria-selected="active === $el.dataset.cfTab"
-         :tabindex="tabIndexFor($el.dataset.cfTab)"
-         @click.prevent="setActive($el.dataset.cfTab)"
-         hx-get="{{ tab.url }}"
-         hx-target="#{{ hx_target }}">{{ tab.id }}</a>
-    </li>
+        :class="{ 'is-active': active === $el.dataset.cfTab }"
+      >
+        <a
+          role="tab"
+          data-cf-tab="{{ tab.id }}"
+          aria-controls="{{ hx_target }}"
+          aria-selected="{% if tab.id == active %}true{% else %}false{% endif %}"
+          tabindex="{% if tab.id == active or not active and forloop.first %}0{% else %}-1{% endif %}"
+          :aria-selected="active === $el.dataset.cfTab"
+          :tabindex="tabIndexFor($el.dataset.cfTab)"
+          @click.prevent="setActive($el.dataset.cfTab)"
+          hx-get="{{ tab.url }}"
+          hx-target="#{{ hx_target }}"
+        >{{ tab.id }}</a>
+      </li>
     {% endfor %}
   </ul>
   <div id="{{ hx_target }}" class="tabs-content" role="tabpanel">{{ slot }}</div>
diff --git a/src/cf_ui/templates/cotton/_themes/foundation/textarea.html b/src/cf_ui/templates/cotton/_themes/foundation/textarea.html
index 1004efd..1fb961a 100644
--- a/src/cf_ui/templates/cotton/_themes/foundation/textarea.html
+++ b/src/cf_ui/templates/cotton/_themes/foundation/textarea.html
@@ -1,11 +1,13 @@
 <div class="{{ class }}">
   <label for="{{ name }}"{% if error %} class="is-invalid-label"{% endif %}>{{ label }}</label>
-  <textarea class="{% if error %}is-invalid-input{% endif %}{% if input_class %} {{ input_class }}{% endif %}"
-            id="{{ name }}"
-            name="{{ name }}"
-            rows="{{ rows }}"
-            {% if error %}aria-invalid="true" aria-describedby="{{ name }}-error"{% endif %}>{{ value }}</textarea>
+  <textarea
+    class="{% if error %}is-invalid-input{% endif %}{% if input_class %} {{ input_class }}{% endif %}"
+    id="{{ name }}"
+    name="{{ name }}"
+    rows="{{ rows }}"
+    {% if error %}aria-invalid="true" aria-describedby="{{ name }}-error"{% endif %}
+  >{{ value }}</textarea>
   {% if error %}
-  <span class="form-error is-visible" id="{{ name }}-error">{{ error }}</span>
+    <span class="form-error is-visible" id="{{ name }}-error">{{ error }}</span>
   {% endif %}
 </div>
diff --git a/src/cf_ui/templates/cotton/cf/badge.html b/src/cf_ui/templates/cotton/cf/badge.html
new file mode 100644
index 0000000..abef5db
--- /dev/null
+++ b/src/cf_ui/templates/cotton/cf/badge.html
@@ -0,0 +1,4 @@
+<c-vars variant="neutral" size="normal" class="" />
+{% load cf_ui %}
+{% cf_ui_validate "badge" variant=variant size=size %}{% cf_ui_theme_path "badge" as cf_ui_partial %}
+{% include cf_ui_partial %}
diff --git a/src/cf_ui/templates/cotton/cf/breadcrumb.html b/src/cf_ui/templates/cotton/cf/breadcrumb.html
index 2fac730..7a76055 100644
--- a/src/cf_ui/templates/cotton/cf/breadcrumb.html
+++ b/src/cf_ui/templates/cotton/cf/breadcrumb.html
@@ -1,2 +1,4 @@
 <c-vars items="[]" class="" />
-{% load cf_ui %}{% cf_ui_theme_path "breadcrumb" as cf_ui_partial %}{% include cf_ui_partial %}
+{% load cf_ui %}
+{% cf_ui_theme_path "breadcrumb" as cf_ui_partial %}
+{% include cf_ui_partial %}
diff --git a/src/cf_ui/templates/cotton/cf/button.html b/src/cf_ui/templates/cotton/cf/button.html
new file mode 100644
index 0000000..1c19590
--- /dev/null
+++ b/src/cf_ui/templates/cotton/cf/button.html
@@ -0,0 +1,12 @@
+<c-vars
+  variant="neutral"
+  size="normal"
+  state="normal"
+  href=""
+  type="button"
+  full_width=""
+  class=""
+/>
+{% load cf_ui %}
+{% cf_ui_validate "button" variant=variant size=size state=state type=type %}{% cf_ui_theme_path "button" as cf_ui_partial %}
+{% include cf_ui_partial %}
diff --git a/src/cf_ui/templates/cotton/cf/card.html b/src/cf_ui/templates/cotton/cf/card.html
index 99db637..6231cbc 100644
--- a/src/cf_ui/templates/cotton/cf/card.html
+++ b/src/cf_ui/templates/cotton/cf/card.html
@@ -1,2 +1,4 @@
 <c-vars header="" footer="" class="" />
-{% load cf_ui %}{% cf_ui_theme_path "card" as cf_ui_partial %}{% include cf_ui_partial %}
+{% load cf_ui %}
+{% cf_ui_theme_path "card" as cf_ui_partial %}
+{% include cf_ui_partial %}
diff --git a/src/cf_ui/templates/cotton/cf/checkbox-group.html b/src/cf_ui/templates/cotton/cf/checkbox-group.html
index 9798a1d..2b6b033 100644
--- a/src/cf_ui/templates/cotton/cf/checkbox-group.html
+++ b/src/cf_ui/templates/cotton/cf/checkbox-group.html
@@ -1,2 +1,12 @@
-<c-vars name label error="" choices="[]" selected="[]" control_class="" class="" />
-{% load cf_ui %}{% cf_ui_theme_path "checkbox-group" as cf_ui_partial %}{% include cf_ui_partial %}
+<c-vars
+  name
+  label
+  error=""
+  choices="[]"
+  selected="[]"
+  control_class=""
+  class=""
+/>
+{% load cf_ui %}
+{% cf_ui_theme_path "checkbox-group" as cf_ui_partial %}
+{% include cf_ui_partial %}
diff --git a/src/cf_ui/templates/cotton/cf/form-field.html b/src/cf_ui/templates/cotton/cf/form-field.html
index 16ccf1c..8a0b66d 100644
--- a/src/cf_ui/templates/cotton/cf/form-field.html
+++ b/src/cf_ui/templates/cotton/cf/form-field.html
@@ -1,2 +1,13 @@
-<c-vars name label value="" error="" type="text" required="false" input_class="" class="" />
-{% load cf_ui %}{% cf_ui_theme_path "form-field" as cf_ui_partial %}{% include cf_ui_partial %}
+<c-vars
+  name
+  label
+  value=""
+  error=""
+  type="text"
+  required="false"
+  input_class=""
+  class=""
+/>
+{% load cf_ui %}
+{% cf_ui_theme_path "form-field" as cf_ui_partial %}
+{% include cf_ui_partial %}
diff --git a/src/cf_ui/templates/cotton/cf/heading.html b/src/cf_ui/templates/cotton/cf/heading.html
new file mode 100644
index 0000000..63ba4ae
--- /dev/null
+++ b/src/cf_ui/templates/cotton/cf/heading.html
@@ -0,0 +1,4 @@
+<c-vars level="2" size="normal" emphasis="normal" class="" />
+{% load cf_ui %}
+{% cf_ui_validate "heading" level=level size=size emphasis=emphasis %}{% cf_ui_theme_path "heading" as cf_ui_partial %}
+{% include cf_ui_partial %}
diff --git a/src/cf_ui/templates/cotton/cf/icon.html b/src/cf_ui/templates/cotton/cf/icon.html
new file mode 100644
index 0000000..f86a43a
--- /dev/null
+++ b/src/cf_ui/templates/cotton/cf/icon.html
@@ -0,0 +1,4 @@
+<c-vars size="normal" label="" class="" />
+{% load cf_ui %}
+{% cf_ui_validate "icon" size=size %}{% cf_ui_theme_path "icon" as cf_ui_partial %}
+{% include cf_ui_partial %}
diff --git a/src/cf_ui/templates/cotton/cf/label.html b/src/cf_ui/templates/cotton/cf/label.html
new file mode 100644
index 0000000..be08030
--- /dev/null
+++ b/src/cf_ui/templates/cotton/cf/label.html
@@ -0,0 +1,16 @@
+<c-vars size="normal" for_id="" required="" class="" />
+{% comment %}
+`for=for` forwards the HTML spelling into the guard so it can be rejected
+rather than dropped. It is not a prop: the attribute is `for_id`, because
+`for` is a Python reserved word and JinjaX cannot express it. django-cotton
+accepts `for` happily and discards it, so <c-cf.label for="email"> would
+render valid HTML with no `for` attribute and a silently broken label/control
+association. `primitives.ALIASES` declares the mapping and validate() raises
+naming `for_id`; an absent one resolves to "" and is skipped.
+
+`{% comment %}`, not `{# #}`: Django's `{# #}` is single-line only, and a
+multi-line one renders every line in between as literal text into the page.
+{% endcomment %}
+{% load cf_ui %}
+{% cf_ui_validate "label" size=size for=for %}{% cf_ui_theme_path "label" as cf_ui_partial %}
+{% include cf_ui_partial %}
diff --git a/src/cf_ui/templates/cotton/cf/modal.html b/src/cf_ui/templates/cotton/cf/modal.html
index 4624a6b..517e91b 100644
--- a/src/cf_ui/templates/cotton/cf/modal.html
+++ b/src/cf_ui/templates/cotton/cf/modal.html
@@ -1,2 +1,4 @@
 <c-vars id="modal" header="" footer="" label="Dialog" class="" />
-{% load cf_ui %}{% cf_ui_theme_path "modal" as cf_ui_partial %}{% include cf_ui_partial %}
+{% load cf_ui %}
+{% cf_ui_theme_path "modal" as cf_ui_partial %}
+{% include cf_ui_partial %}
diff --git a/src/cf_ui/templates/cotton/cf/navbar.html b/src/cf_ui/templates/cotton/cf/navbar.html
index 9133b5c..2255464 100644
--- a/src/cf_ui/templates/cotton/cf/navbar.html
+++ b/src/cf_ui/templates/cotton/cf/navbar.html
@@ -1,2 +1,4 @@
 <c-vars brand="" start="" end="" class="" />
-{% load cf_ui %}{% cf_ui_theme_path "navbar" as cf_ui_partial %}{% include cf_ui_partial %}
+{% load cf_ui %}
+{% cf_ui_theme_path "navbar" as cf_ui_partial %}
+{% include cf_ui_partial %}
diff --git a/src/cf_ui/templates/cotton/cf/notification.html b/src/cf_ui/templates/cotton/cf/notification.html
index 0d1a641..0f0c166 100644
--- a/src/cf_ui/templates/cotton/cf/notification.html
+++ b/src/cf_ui/templates/cotton/cf/notification.html
@@ -1,2 +1,4 @@
 <c-vars message type="info" dismissible="true" class="" />
-{% load cf_ui %}{% cf_ui_theme_path "notification" as cf_ui_partial %}{% include cf_ui_partial %}
+{% load cf_ui %}
+{% cf_ui_theme_path "notification" as cf_ui_partial %}
+{% include cf_ui_partial %}
diff --git a/src/cf_ui/templates/cotton/cf/pagination.html b/src/cf_ui/templates/cotton/cf/pagination.html
index 8e3e9ac..a39ee28 100644
--- a/src/cf_ui/templates/cotton/cf/pagination.html
+++ b/src/cf_ui/templates/cotton/cf/pagination.html
@@ -1,2 +1,4 @@
 <c-vars page="1" total_pages="1" hx_target="" hx_url="" class="" />
-{% load cf_ui %}{% cf_ui_theme_path "pagination" as cf_ui_partial %}{% include cf_ui_partial %}
+{% load cf_ui %}
+{% cf_ui_theme_path "pagination" as cf_ui_partial %}
+{% include cf_ui_partial %}
diff --git a/src/cf_ui/templates/cotton/cf/panel.html b/src/cf_ui/templates/cotton/cf/panel.html
index 8acff58..e3f11d5 100644
--- a/src/cf_ui/templates/cotton/cf/panel.html
+++ b/src/cf_ui/templates/cotton/cf/panel.html
@@ -1,2 +1,4 @@
 <c-vars title id="panel" open="" class="" />
-{% load cf_ui %}{% cf_ui_theme_path "panel" as cf_ui_partial %}{% include cf_ui_partial %}
+{% load cf_ui %}
+{% cf_ui_theme_path "panel" as cf_ui_partial %}
+{% include cf_ui_partial %}
diff --git a/src/cf_ui/templates/cotton/cf/progress.html b/src/cf_ui/templates/cotton/cf/progress.html
index b8dce55..76aed10 100644
--- a/src/cf_ui/templates/cotton/cf/progress.html
+++ b/src/cf_ui/templates/cotton/cf/progress.html
@@ -1,2 +1,4 @@
 <c-vars value="0" max="100" type="primary" label="" class="" />
-{% load cf_ui %}{% cf_ui_theme_path "progress" as cf_ui_partial %}{% include cf_ui_partial %}
+{% load cf_ui %}
+{% cf_ui_theme_path "progress" as cf_ui_partial %}
+{% include cf_ui_partial %}
diff --git a/src/cf_ui/templates/cotton/cf/select.html b/src/cf_ui/templates/cotton/cf/select.html
index 5025de5..11492d4 100644
--- a/src/cf_ui/templates/cotton/cf/select.html
+++ b/src/cf_ui/templates/cotton/cf/select.html
@@ -1,2 +1,4 @@
 <c-vars name label value="" error="" options="[]" input_class="" class="" />
-{% load cf_ui %}{% cf_ui_theme_path "select" as cf_ui_partial %}{% include cf_ui_partial %}
+{% load cf_ui %}
+{% cf_ui_theme_path "select" as cf_ui_partial %}
+{% include cf_ui_partial %}
diff --git a/src/cf_ui/templates/cotton/cf/table.html b/src/cf_ui/templates/cotton/cf/table.html
index d27a427..7b2f18f 100644
--- a/src/cf_ui/templates/cotton/cf/table.html
+++ b/src/cf_ui/templates/cotton/cf/table.html
@@ -1,2 +1,4 @@
 <c-vars columns="[]" rows="[]" hx_target="" hx_url="" class="" />
-{% load cf_ui %}{% cf_ui_theme_path "table" as cf_ui_partial %}{% include cf_ui_partial %}
+{% load cf_ui %}
+{% cf_ui_theme_path "table" as cf_ui_partial %}
+{% include cf_ui_partial %}
diff --git a/src/cf_ui/templates/cotton/cf/tabs.html b/src/cf_ui/templates/cotton/cf/tabs.html
index f6ed9fc..99941f9 100644
--- a/src/cf_ui/templates/cotton/cf/tabs.html
+++ b/src/cf_ui/templates/cotton/cf/tabs.html
@@ -1,2 +1,4 @@
 <c-vars hx_target="tab-content" tabs="[]" active="" class="" />
-{% load cf_ui %}{% cf_ui_theme_path "tabs" as cf_ui_partial %}{% include cf_ui_partial %}
+{% load cf_ui %}
+{% cf_ui_theme_path "tabs" as cf_ui_partial %}
+{% include cf_ui_partial %}
diff --git a/src/cf_ui/templates/cotton/cf/textarea.html b/src/cf_ui/templates/cotton/cf/textarea.html
index 13da7a8..1099a36 100644
--- a/src/cf_ui/templates/cotton/cf/textarea.html
+++ b/src/cf_ui/templates/cotton/cf/textarea.html
@@ -1,2 +1,4 @@
 <c-vars name label value="" error="" rows="4" input_class="" class="" />
-{% load cf_ui %}{% cf_ui_theme_path "textarea" as cf_ui_partial %}{% include cf_ui_partial %}
+{% load cf_ui %}
+{% cf_ui_theme_path "textarea" as cf_ui_partial %}
+{% include cf_ui_partial %}
diff --git a/src/cf_ui/templates/jinja/bootstrap/Badge.jinja b/src/cf_ui/templates/jinja/bootstrap/Badge.jinja
new file mode 100644
index 0000000..94b995c
--- /dev/null
+++ b/src/cf_ui/templates/jinja/bootstrap/Badge.jinja
@@ -0,0 +1,11 @@
+{#def content="", variant="neutral", size="normal", extra_class="" #}
+{% autoescape true %}
+  {% set content = content if content is defined else "" %}
+  {% set variant = variant if variant is defined else "neutral" %}
+  {% set size = size if size is defined else "normal" %}
+  {% set extra_class = extra_class if extra_class is defined else "" %}
+  {{- cf_ui_validate("badge", variant=variant, size=size) -}}
+  <span
+    class="badge{% if variant == 'primary' %} text-bg-primary{% elif variant == 'secondary' %} text-bg-secondary{% elif variant == 'success' %} text-bg-success{% elif variant == 'warning' %} text-bg-warning{% elif variant == 'danger' %} text-bg-danger{% elif variant == 'info' %} text-bg-info{% elif variant == 'neutral' %} text-bg-light{% endif %}{% if extra_class %} {{ extra_class }}{% endif %}"
+  >{{ content }}</span>
+{% endautoescape %}
diff --git a/src/cf_ui/templates/jinja/bootstrap/Breadcrumb.jinja b/src/cf_ui/templates/jinja/bootstrap/Breadcrumb.jinja
index a04e8c7..40bc32d 100644
--- a/src/cf_ui/templates/jinja/bootstrap/Breadcrumb.jinja
+++ b/src/cf_ui/templates/jinja/bootstrap/Breadcrumb.jinja
@@ -1,18 +1,18 @@
 {#def items=[], extra_class="" #}
 {% autoescape true %}
-{% set items = items if items is defined else [] %}
-{% set extra_class = extra_class if extra_class is defined else "" %}
-<nav class="{{ extra_class }}" aria-label="breadcrumbs">
-  <ol class="breadcrumb">
-    {% for item in items %}
-    <li class="breadcrumb-item{% if loop.last %} active{% endif %}">
-      {% if loop.last %}
-      <a href="{{ item.url }}" aria-current="page">{{ item.label }}</a>
-      {% else %}
-      <a href="{{ item.url }}">{{ item.label }}</a>
-      {% endif %}
-    </li>
-    {% endfor %}
-  </ol>
-</nav>
+  {% set items = items if items is defined else [] %}
+  {% set extra_class = extra_class if extra_class is defined else "" %}
+  <nav class="{{ extra_class }}" aria-label="breadcrumbs">
+    <ol class="breadcrumb">
+      {% for item in items %}
+        <li class="breadcrumb-item{% if loop.last %} active{% endif %}">
+          {% if loop.last %}
+            <a href="{{ item.url }}" aria-current="page">{{ item.label }}</a>
+          {% else %}
+            <a href="{{ item.url }}">{{ item.label }}</a>
+          {% endif %}
+        </li>
+      {% endfor %}
+    </ol>
+  </nav>
 {% endautoescape %}
diff --git a/src/cf_ui/templates/jinja/bootstrap/Button.jinja b/src/cf_ui/templates/jinja/bootstrap/Button.jinja
new file mode 100644
index 0000000..7dbf0fc
--- /dev/null
+++ b/src/cf_ui/templates/jinja/bootstrap/Button.jinja
@@ -0,0 +1,16 @@
+{#def content="", variant="neutral", size="normal", state="normal", href="", type="button", full_width=false, extra_class="" #}
+{% autoescape true %}
+  {% set content = content if content is defined else "" %}
+  {% set variant = variant if variant is defined else "neutral" %}
+  {% set size = size if size is defined else "normal" %}
+  {% set state = state if state is defined else "normal" %}
+  {% set href = href if href is defined else "" %}
+  {% set type = type if type is defined else "button" %}
+  {% set full_width = full_width if full_width is defined else false %}
+  {% set extra_class = extra_class if extra_class is defined else "" %}
+  {{ cf_ui_validate("button", variant=variant, size=size, state=state, type=type) }}
+  {%- set cf_tag = "a" if href else "button" -%}
+  <{{ cf_tag }} class="btn{% if variant == 'primary' %} btn-primary{% elif variant == 'secondary' %} btn-secondary{% elif variant == 'success' %} btn-success{% elif variant == 'warning' %} btn-warning{% elif variant == 'danger' %} btn-danger{% elif variant == 'info' %} btn-info{% elif variant == 'neutral' %} btn-light{% endif %}{% if size == 'small' %} btn-sm{% elif size == 'large' %} btn-lg{% endif %}{% if state == 'disabled' %} disabled{% endif %}{% if full_width %} w-100{% endif %}{% if extra_class %} {{ extra_class }}{% endif %}"
+  {%- if href %}{% if state == 'disabled' %} role="link" aria-disabled="true"{% else %} href="{{ href }}"{% endif %}
+{%- else %} type="{{ type }}"{% if state == 'disabled' %} disabled{% endif %}{% endif %}>{% if state == 'loading' %}<span class="spinner-border spinner-border-sm" aria-hidden="true"></span> {% endif %}{{ content }}</{{ cf_tag }}>
+{% endautoescape %}
diff --git a/src/cf_ui/templates/jinja/bootstrap/Card.jinja b/src/cf_ui/templates/jinja/bootstrap/Card.jinja
index f4868ab..ef1fe64 100644
--- a/src/cf_ui/templates/jinja/bootstrap/Card.jinja
+++ b/src/cf_ui/templates/jinja/bootstrap/Card.jinja
@@ -1,18 +1,18 @@
 {#def content="", header="", footer="", extra_class="" #}
 {% autoescape true %}
-{% set header = header if header is defined else "" %}
-{% set content = content if content is defined else "" %}
-{% set footer = footer if footer is defined else "" %}
-{% set extra_class = extra_class if extra_class is defined else "" %}
-<div class="card {{ extra_class }}">
-  {% if header %}
-  <div class="card-header">
-    <h5 class="card-title mb-0">{{ header }}</h5>
+  {% set header = header if header is defined else "" %}
+  {% set content = content if content is defined else "" %}
+  {% set footer = footer if footer is defined else "" %}
+  {% set extra_class = extra_class if extra_class is defined else "" %}
+  <div class="card {{ extra_class }}">
+    {% if header %}
+      <div class="card-header">
+        <h5 class="card-title mb-0">{{ header }}</h5>
+      </div>
+    {% endif %}
+    <div class="card-body">{{ content }}</div>
+    {% if footer %}
+      <div class="card-footer">{{ footer }}</div>
+    {% endif %}
   </div>
-  {% endif %}
-  <div class="card-body">{{ content }}</div>
-  {% if footer %}
-  <div class="card-footer">{{ footer }}</div>
-  {% endif %}
-</div>
 {% endautoescape %}
diff --git a/src/cf_ui/templates/jinja/bootstrap/CheckboxGroup.jinja b/src/cf_ui/templates/jinja/bootstrap/CheckboxGroup.jinja
index 75c81ef..7bcaa34 100644
--- a/src/cf_ui/templates/jinja/bootstrap/CheckboxGroup.jinja
+++ b/src/cf_ui/templates/jinja/bootstrap/CheckboxGroup.jinja
@@ -1,28 +1,30 @@
 {#def name, label, choices=[], selected=[], error="", extra_class="", control_class="" #}
 {% autoescape true %}
-{% set choices = choices if choices is defined else [] %}
-{% set selected = selected if selected is defined else [] %}
-{% set error = error if error is defined else "" %}
-{% set extra_class = extra_class if extra_class is defined else "" %}
-{% set control_class = control_class if control_class is defined else "" %}
-<div class="mb-3 {{ extra_class }}">
-  <label class="form-label">{{ label }}</label>
-  <div{% if control_class %} class="{{ control_class }}"{% endif %}>
-    {% for choice in choices %}
-    <div class="form-check form-check-inline">
-      <input class="form-check-input"
-             type="checkbox"
-             id="{{ name }}-{{ choice.value }}"
-             name="{{ name }}"
-             value="{{ choice.value }}"
-             {% if choice.value in selected %}checked{% endif %}>
-      <label class="form-check-label" for="{{ name }}-{{ choice.value }}">{{ choice.label }}</label>
+  {% set choices = choices if choices is defined else [] %}
+  {% set selected = selected if selected is defined else [] %}
+  {% set error = error if error is defined else "" %}
+  {% set extra_class = extra_class if extra_class is defined else "" %}
+  {% set control_class = control_class if control_class is defined else "" %}
+  <div class="mb-3 {{ extra_class }}">
+    <label class="form-label">{{ label }}</label>
+    <div{% if control_class %} class="{{ control_class }}"{% endif %}>
+      {% for choice in choices %}
+        <div class="form-check form-check-inline">
+          <input
+            class="form-check-input"
+            type="checkbox"
+            id="{{ name }}-{{ choice.value }}"
+            name="{{ name }}"
+            value="{{ choice.value }}"
+            {% if choice.value in selected %}checked{% endif %}
+          >
+          <label class="form-check-label" for="{{ name }}-{{ choice.value }}">{{ choice.label }}</label>
+        </div>
+      {% endfor %}
     </div>
-    {% endfor %}
-  </div>
-  {# `.invalid-feedback` is display:none until an `.is-invalid` sibling precedes
+    {# `.invalid-feedback` is display:none until an `.is-invalid` sibling precedes
      it, and a checkbox group has none — `d-block` keeps the message from
      rendering invisibly. #}
-  {% if error %}<div class="invalid-feedback d-block">{{ error }}</div>{% endif %}
-</div>
+    {% if error %}<div class="invalid-feedback d-block">{{ error }}</div>{% endif %}
+  </div>
 {% endautoescape %}
diff --git a/src/cf_ui/templates/jinja/bootstrap/FormField.jinja b/src/cf_ui/templates/jinja/bootstrap/FormField.jinja
index a4cd11b..12ee3e1 100644
--- a/src/cf_ui/templates/jinja/bootstrap/FormField.jinja
+++ b/src/cf_ui/templates/jinja/bootstrap/FormField.jinja
@@ -1,18 +1,21 @@
 {#def name, label, value="", error="", type="text", required=false, extra_class="", input_class="" #}
 {% autoescape true %}
-{% set value = value if value is defined else "" %}
-{% set error = error if error is defined else "" %}
-{% set type = type if type is defined else "text" %}
-{% set required = required if required is defined else false %}
-{% set extra_class = extra_class if extra_class is defined else "" %}
-{% set input_class = input_class if input_class is defined else "" %}
-<div class="mb-3 {{ extra_class }}">
-  <label class="form-label" for="{{ name }}">{{ label }}</label>
-  <input class="form-control{% if error %} is-invalid{% endif %}{% if input_class %} {{ input_class }}{% endif %}"
-         id="{{ name }}"
-         type="{{ type }}"
-         name="{{ name }}"
-         value="{{ value }}"{% if required %} required{% endif %}>
-  {% if error %}<div class="invalid-feedback d-block">{{ error }}</div>{% endif %}
-</div>
+  {% set value = value if value is defined else "" %}
+  {% set error = error if error is defined else "" %}
+  {% set type = type if type is defined else "text" %}
+  {% set required = required if required is defined else false %}
+  {% set extra_class = extra_class if extra_class is defined else "" %}
+  {% set input_class = input_class if input_class is defined else "" %}
+  <div class="mb-3 {{ extra_class }}">
+    <label class="form-label" for="{{ name }}">{{ label }}</label>
+    <input
+      class="form-control{% if error %} is-invalid{% endif %}{% if input_class %} {{ input_class }}{% endif %}"
+      id="{{ name }}"
+      type="{{ type }}"
+      name="{{ name }}"
+      value="{{ value }}"
+      {% if required %} required{% endif %}
+    >
+    {% if error %}<div class="invalid-feedback d-block">{{ error }}</div>{% endif %}
+  </div>
 {% endautoescape %}
diff --git a/src/cf_ui/templates/jinja/bootstrap/Heading.jinja b/src/cf_ui/templates/jinja/bootstrap/Heading.jinja
new file mode 100644
index 0000000..bbf2e74
--- /dev/null
+++ b/src/cf_ui/templates/jinja/bootstrap/Heading.jinja
@@ -0,0 +1,10 @@
+{#def content="", level="2", size="normal", emphasis="normal", extra_class="" #}
+{% autoescape true %}
+  {% set content = content if content is defined else "" %}
+  {% set level = level if level is defined else "2" %}
+  {% set size = size if size is defined else "normal" %}
+  {% set emphasis = emphasis if emphasis is defined else "normal" %}
+  {% set extra_class = extra_class if extra_class is defined else "" %}
+  {{ cf_ui_validate("heading", level=level, size=size, emphasis=emphasis) }}
+  <h{{ level }} class="{% if size == 'small' %}h6{% elif size == 'normal' %}h4{% elif size == 'large' %}h1{% endif %}{% if emphasis == 'subtle' %} text-body-secondary{% endif %}{% if extra_class %} {{ extra_class }}{% endif %}">{{ content }}</h{{ level }}>
+{% endautoescape %}
diff --git a/src/cf_ui/templates/jinja/bootstrap/Icon.jinja b/src/cf_ui/templates/jinja/bootstrap/Icon.jinja
new file mode 100644
index 0000000..0a227ac
--- /dev/null
+++ b/src/cf_ui/templates/jinja/bootstrap/Icon.jinja
@@ -0,0 +1,12 @@
+{#def content="", size="normal", label="", extra_class="" #}
+{% autoescape true %}
+  {% set content = content if content is defined else "" %}
+  {% set size = size if size is defined else "normal" %}
+  {% set label = label if label is defined else "" %}
+  {% set extra_class = extra_class if extra_class is defined else "" %}
+  {{ cf_ui_validate("icon", size=size) }}
+  <span
+    class="{% if size == 'small' %}small{% elif size == 'large' %}fs-4{% endif %}{% if extra_class %} {{ extra_class }}{% endif %}"
+    {%- if label %} role="img" aria-label="{{ label }}"{% else %} aria-hidden="true"{% endif %}
+  >{{ content }}</span>
+{% endautoescape %}
diff --git a/src/cf_ui/templates/jinja/bootstrap/Label.jinja b/src/cf_ui/templates/jinja/bootstrap/Label.jinja
new file mode 100644
index 0000000..88cef2d
--- /dev/null
+++ b/src/cf_ui/templates/jinja/bootstrap/Label.jinja
@@ -0,0 +1,13 @@
+{#def content="", size="normal", for_id="", required=false, extra_class="" #}
+{% autoescape true %}
+  {% set content = content if content is defined else "" %}
+  {% set size = size if size is defined else "normal" %}
+  {% set for_id = for_id if for_id is defined else "" %}
+  {% set required = required if required is defined else false %}
+  {% set extra_class = extra_class if extra_class is defined else "" %}
+  {{ cf_ui_validate("label", size=size) }}
+  <label
+    class="form-label{% if size == 'small' %} small{% elif size == 'large' %} fs-5{% endif %}{% if extra_class %} {{ extra_class }}{% endif %}"
+    {% if for_id %} for="{{ for_id }}"{% endif %}
+  >{{ content }}{% if required %} <span class="text-danger" role="img" aria-label="required">*</span>{% endif %}</label>
+{% endautoescape %}
diff --git a/src/cf_ui/templates/jinja/bootstrap/Modal.jinja b/src/cf_ui/templates/jinja/bootstrap/Modal.jinja
index e13a041..7b0da49 100644
--- a/src/cf_ui/templates/jinja/bootstrap/Modal.jinja
+++ b/src/cf_ui/templates/jinja/bootstrap/Modal.jinja
@@ -1,39 +1,41 @@
 {#def id="modal", header="", content="", footer="", label="Dialog", extra_class="" #}
 {% autoescape true %}
-{% set id = id if id is defined else "modal" %}
-{% set header = header if header is defined else "" %}
-{% set content = content if content is defined else "" %}
-{% set footer = footer if footer is defined else "" %}
-{% set label = label if label is defined and label else "Dialog" %}
-{% set extra_class = extra_class if extra_class is defined else "" %}
-{# `.modal` is display:none and `.show` only sets opacity — Bootstrap's own JS
+  {% set id = id if id is defined else "modal" %}
+  {% set header = header if header is defined else "" %}
+  {% set content = content if content is defined else "" %}
+  {% set footer = footer if footer is defined else "" %}
+  {% set label = label if label is defined and label else "Dialog" %}
+  {% set extra_class = extra_class if extra_class is defined else "" %}
+  {# `.modal` is display:none and `.show` only sets opacity — Bootstrap's own JS
    is what writes `style.display = "block"`. cf-ui loads none, so the reveal
    rides on `d-block`, a real Bootstrap utility Alpine can toggle. #}
-<div id="{{ id }}"
-     class="modal {{ extra_class }}"
-     tabindex="-1"
-     role="dialog"
-     aria-modal="true"
-     {% if header %}aria-labelledby="{{ id }}-title"{% else %}aria-label="{{ label }}"{% endif %}
-     x-data="cfModal"
-     x-init="initModal()"
-     :class="{ 'show': open, 'd-block': open }">
-  <div class="modal-dialog">
-    <div class="modal-content">
-      <div class="modal-header">
-        <h5 class="modal-title" id="{{ id }}-title">{{ header }}</h5>
-        <button type="button" class="btn-close" aria-label="close" @click="close()"></button>
+  <div
+    id="{{ id }}"
+    class="modal {{ extra_class }}"
+    tabindex="-1"
+    role="dialog"
+    aria-modal="true"
+    {% if header %}aria-labelledby="{{ id }}-title"{% else %}aria-label="{{ label }}"{% endif %}
+    x-data="cfModal"
+    x-init="initModal()"
+    :class="{ 'show': open, 'd-block': open }"
+  >
+    <div class="modal-dialog">
+      <div class="modal-content">
+        <div class="modal-header">
+          <h5 class="modal-title" id="{{ id }}-title">{{ header }}</h5>
+          <button type="button" class="btn-close" aria-label="close" @click="close()"></button>
+        </div>
+        <div class="modal-body">{{ content }}</div>
+        {% if footer %}
+          <div class="modal-footer">{{ footer }}</div>
+        {% endif %}
       </div>
-      <div class="modal-body">{{ content }}</div>
-      {% if footer %}
-      <div class="modal-footer">{{ footer }}</div>
-      {% endif %}
     </div>
-  </div>
-  {# Bootstrap puts the backdrop on <body> at z-index 1050, under the modal's
+    {# Bootstrap puts the backdrop on <body> at z-index 1050, under the modal's
      1055. Without its JS the backdrop has to live inside the modal, where 1050
      would paint it *over* the dialog — `.modal` opens a stacking context. A
      negative z-index puts it back underneath without inventing a class. #}
-  <div class="modal-backdrop show" style="z-index:-1" @click="close()"></div>
-</div>
+    <div class="modal-backdrop show" style="z-index:-1" @click="close()"></div>
+  </div>
 {% endautoescape %}
diff --git a/src/cf_ui/templates/jinja/bootstrap/Navbar.jinja b/src/cf_ui/templates/jinja/bootstrap/Navbar.jinja
index c0e12e5..f82236f 100644
--- a/src/cf_ui/templates/jinja/bootstrap/Navbar.jinja
+++ b/src/cf_ui/templates/jinja/bootstrap/Navbar.jinja
@@ -1,28 +1,34 @@
 {#def brand="", start="", end="", extra_class="" #}
 {% autoescape true %}
-{% set brand = brand if brand is defined else "" %}
-{% set start = start if start is defined else "" %}
-{% set end = end if end is defined else "" %}
-{% set extra_class = extra_class if extra_class is defined else "" %}
-{# `.collapse:not(.show) { display: none }` and
+  {% set brand = brand if brand is defined else "" %}
+  {% set start = start if start is defined else "" %}
+  {% set end = end if end is defined else "" %}
+  {% set extra_class = extra_class if extra_class is defined else "" %}
+  {# `.collapse:not(.show) { display: none }` and
    `.navbar-expand-lg .navbar-collapse { display: flex !important }` are both
    plain CSS, so the menu collapses on mobile and stays open on desktop with
    Alpine off. Only the toggle needs JS. #}
-<nav class="navbar navbar-expand-lg {{ extra_class }}" role="navigation" aria-label="main navigation"
-     x-data="cfNavbar">
-  <div class="container-fluid">
-    <span class="navbar-brand">{{ brand }}</span>
-    <button type="button"
-            class="navbar-toggler"
-            aria-label="menu"
-            :aria-expanded="menuOpen"
-            @click="toggle()">
-      <span class="navbar-toggler-icon"></span>
-    </button>
-    <div class="collapse navbar-collapse" :class="{ 'show': menuOpen }">
-      <div class="navbar-nav me-auto">{{ start }}</div>
-      <div class="navbar-nav">{{ end }}</div>
+  <nav
+    class="navbar navbar-expand-lg {{ extra_class }}"
+    role="navigation"
+    aria-label="main navigation"
+    x-data="cfNavbar"
+  >
+    <div class="container-fluid">
+      <span class="navbar-brand">{{ brand }}</span>
+      <button
+        type="button"
+        class="navbar-toggler"
+        aria-label="menu"
+        :aria-expanded="menuOpen"
+        @click="toggle()"
+      >
+        <span class="navbar-toggler-icon"></span>
+      </button>
+      <div class="collapse navbar-collapse" :class="{ 'show': menuOpen }">
+        <div class="navbar-nav me-auto">{{ start }}</div>
+        <div class="navbar-nav">{{ end }}</div>
+      </div>
     </div>
-  </div>
-</nav>
+  </nav>
 {% endautoescape %}
diff --git a/src/cf_ui/templates/jinja/bootstrap/Notification.jinja b/src/cf_ui/templates/jinja/bootstrap/Notification.jinja
index 1f7cda1..b2f7cfd 100644
--- a/src/cf_ui/templates/jinja/bootstrap/Notification.jinja
+++ b/src/cf_ui/templates/jinja/bootstrap/Notification.jinja
@@ -1,18 +1,22 @@
 {#def message, type="info", dismissible=true, extra_class="" #}
 {% autoescape true %}
-{% set type = type if type is defined else "info" %}
-{% set dismissible = dismissible if dismissible is defined else true %}
-{% set extra_class = extra_class if extra_class is defined else "" %}
-<div role="alert"
-     class="alert {% if type == 'danger' or type == 'error' %}alert-danger{% elif type == 'success' %}alert-success{% elif type == 'warning' %}alert-warning{% elif type == 'primary' %}alert-primary{% elif type == 'secondary' %}alert-secondary{% else %}alert-info{% endif %}{% if dismissible %} alert-dismissible{% endif %} {{ extra_class }}"
-     x-data="{ visible: true }"
-     x-show="visible">
-  <span>{{ message }}</span>
-  {% if dismissible %}
-  <button type="button"
-          class="btn-close"
-          aria-label="dismiss"
-          @click="visible = false"></button>
-  {% endif %}
-</div>
+  {% set type = type if type is defined else "info" %}
+  {% set dismissible = dismissible if dismissible is defined else true %}
+  {% set extra_class = extra_class if extra_class is defined else "" %}
+  <div
+    role="alert"
+    class="alert {% if type == 'danger' or type == 'error' %}alert-danger{% elif type == 'success' %}alert-success{% elif type == 'warning' %}alert-warning{% elif type == 'primary' %}alert-primary{% elif type == 'secondary' %}alert-secondary{% else %}alert-info{% endif %}{% if dismissible %} alert-dismissible{% endif %} {{ extra_class }}"
+    x-data="{ visible: true }"
+    x-show="visible"
+  >
+    <span>{{ message }}</span>
+    {% if dismissible %}
+      <button
+        type="button"
+        class="btn-close"
+        aria-label="dismiss"
+        @click="visible = false"
+      ></button>
+    {% endif %}
+  </div>
 {% endautoescape %}
diff --git a/src/cf_ui/templates/jinja/bootstrap/Pagination.jinja b/src/cf_ui/templates/jinja/bootstrap/Pagination.jinja
index c41ea4c..97db4a6 100644
--- a/src/cf_ui/templates/jinja/bootstrap/Pagination.jinja
+++ b/src/cf_ui/templates/jinja/bootstrap/Pagination.jinja
@@ -1,47 +1,48 @@
 {#def page=1, total_pages=1, hx_target="", hx_url="", extra_class="" #}
 {% autoescape true %}
-{% set page = page if page is defined else 1 %}
-{% set total_pages = total_pages if total_pages is defined else 1 %}
-{% set hx_target = hx_target if hx_target is defined else "" %}
-{% set hx_url = hx_url if hx_url is defined else "" %}
-{% set extra_class = extra_class if extra_class is defined else "" %}
-<nav class="{{ extra_class }}" role="navigation" aria-label="pagination">
-  <ul class="pagination">
-    {% if page > 1 %}
-    <li class="page-item">
-      <a class="page-link"
-         hx-get="{{ hx_url }}?page={{ page - 1 }}"
-         hx-target="{{ hx_target }}">Previous</a>
-    </li>
-    {% else %}
-    <li class="page-item disabled">
-      <a class="page-link" aria-disabled="true">Previous</a>
-    </li>
-    {% endif %}
-
-    {% for p in range(1, total_pages + 1) %}
-    <li class="page-item{% if p == page %} active{% endif %}">
-      <a class="page-link"
-         {% if p != page %}
-         hx-get="{{ hx_url }}?page={{ p }}"
-         hx-target="{{ hx_target }}"
-         {% endif %}
-         aria-label="Page {{ p }}"
-         {% if p == page %}aria-current="page"{% endif %}>{{ p }}</a>
-    </li>
-    {% endfor %}
-
-    {% if page < total_pages %}
-    <li class="page-item">
-      <a class="page-link"
-         hx-get="{{ hx_url }}?page={{ page + 1 }}"
-         hx-target="{{ hx_target }}">Next</a>
-    </li>
-    {% else %}
-    <li class="page-item disabled">
-      <a class="page-link" aria-disabled="true">Next</a>
-    </li>
-    {% endif %}
-  </ul>
-</nav>
+  {% set page = page if page is defined else 1 %}
+  {% set total_pages = total_pages if total_pages is defined else 1 %}
+  {% set hx_target = hx_target if hx_target is defined else "" %}
+  {% set hx_url = hx_url if hx_url is defined else "" %}
+  {% set extra_class = extra_class if extra_class is defined else "" %}
+  <nav class="{{ extra_class }}" role="navigation" aria-label="pagination">
+    <ul class="pagination">
+      {% if page > 1 %}
+        <li class="page-item">
+          <a
+            class="page-link"
+            hx-get="{{ hx_url }}?page={{ page - 1 }}"
+            hx-target="{{ hx_target }}"
+          >Previous</a>
+        </li>
+      {% else %}
+        <li class="page-item disabled">
+          <a class="page-link" aria-disabled="true">Previous</a>
+        </li>
+      {% endif %}
+      {% for p in range(1, total_pages + 1) %}
+        <li class="page-item{% if p == page %} active{% endif %}">
+          <a
+            class="page-link"
+            {% if p != page %} hx-get="{{ hx_url }}?page={{ p }}" hx-target="{{ hx_target }}" {% endif %}
+            aria-label="Page {{ p }}"
+            {% if p == page %}aria-current="page"{% endif %}
+          >{{ p }}</a>
+        </li>
+      {% endfor %}
+      {% if page < total_pages %}
+        <li class="page-item">
+          <a
+            class="page-link"
+            hx-get="{{ hx_url }}?page={{ page + 1 }}"
+            hx-target="{{ hx_target }}"
+          >Next</a>
+        </li>
+      {% else %}
+        <li class="page-item disabled">
+          <a class="page-link" aria-disabled="true">Next</a>
+        </li>
+      {% endif %}
+    </ul>
+  </nav>
 {% endautoescape %}
diff --git a/src/cf_ui/templates/jinja/bootstrap/Panel.jinja b/src/cf_ui/templates/jinja/bootstrap/Panel.jinja
index 80ba90d..bd4a121 100644
--- a/src/cf_ui/templates/jinja/bootstrap/Panel.jinja
+++ b/src/cf_ui/templates/jinja/bootstrap/Panel.jinja
@@ -1,32 +1,38 @@
 {#def title, id="panel", content="", open=false, extra_class="" #}
 {% autoescape true %}
-{% set content = content if content is defined else "" %}
-{% set id = id if id is defined else "panel" %}
-{% set open = open if open is defined else false %}
-{% set extra_class = extra_class if extra_class is defined else "" %}
-{# The body deliberately carries no `.collapse`: that class is display:none
+  {% set content = content if content is defined else "" %}
+  {% set id = id if id is defined else "panel" %}
+  {% set open = open if open is defined else false %}
+  {% set extra_class = extra_class if extra_class is defined else "" %}
+  {# The body deliberately carries no `.collapse`: that class is display:none
    without `.show`, which would hide a server-open panel permanently once
    Alpine is off. `x-show` owns display here, seeded from `data-cf-open`. #}
-<div class="accordion {{ extra_class }}"
-     x-data="cfPanel"
-     x-init="initPanel()"
-     data-cf-open="{% if open %}true{% else %}false{% endif %}">
-  <div class="accordion-item">
-    <h2 class="accordion-header">
-      <button type="button"
-              class="accordion-button{% if not open %} collapsed{% endif %}"
-              aria-controls="{{ id }}-body"
-              aria-expanded="{% if open %}true{% else %}false{% endif %}"
-              :aria-expanded="open"
-              :class="{ 'collapsed': !open }"
-              @click="toggle()">{{ title }}</button>
-    </h2>
-    <div id="{{ id }}-body"
-         class="accordion-collapse"
-         x-show="open"
-         {% if not open %}x-cloak{% endif %}>
-      <div class="accordion-body">{{ content }}</div>
+  <div
+    class="accordion {{ extra_class }}"
+    x-data="cfPanel"
+    x-init="initPanel()"
+    data-cf-open="{% if open %}true{% else %}false{% endif %}"
+  >
+    <div class="accordion-item">
+      <h2 class="accordion-header">
+        <button
+          type="button"
+          class="accordion-button{% if not open %} collapsed{% endif %}"
+          aria-controls="{{ id }}-body"
+          aria-expanded="{% if open %}true{% else %}false{% endif %}"
+          :aria-expanded="open"
+          :class="{ 'collapsed': !open }"
+          @click="toggle()"
+        >{{ title }}</button>
+      </h2>
+      <div
+        id="{{ id }}-body"
+        class="accordion-collapse"
+        x-show="open"
+        {% if not open %}x-cloak{% endif %}
+      >
+        <div class="accordion-body">{{ content }}</div>
+      </div>
     </div>
   </div>
-</div>
 {% endautoescape %}
diff --git a/src/cf_ui/templates/jinja/bootstrap/Progress.jinja b/src/cf_ui/templates/jinja/bootstrap/Progress.jinja
index 7c03ce3..e45fc8b 100644
--- a/src/cf_ui/templates/jinja/bootstrap/Progress.jinja
+++ b/src/cf_ui/templates/jinja/bootstrap/Progress.jinja
@@ -1,24 +1,28 @@
 {#def value=0, max=100, type="primary", label="", extra_class="" #}
 {% autoescape true %}
-{% set value = value if value is defined else 0 %}
-{% set max = max if max is defined else 100 %}
-{% set type = type if type is defined else "primary" %}
-{% set label = label if label is defined else "" %}
-{% set extra_class = extra_class if extra_class is defined else "" %}
-{# Bootstrap's bar is a div sized in percent, not a native <progress>, so the
+  {% set value = value if value is defined else 0 %}
+  {% set max = max if max is defined else 100 %}
+  {% set type = type if type is defined else "primary" %}
+  {% set label = label if label is defined else "" %}
+  {% set extra_class = extra_class if extra_class is defined else "" %}
+  {# Bootstrap's bar is a div sized in percent, not a native <progress>, so the
    width has to be computed from value/max rather than emitted verbatim. #}
-{% set cf_max = max | float %}
-{% set cf_pct = (((value | float) / cf_max * 100) | round | int) if cf_max else 0 %}
-<div class="{{ extra_class }}">
-  {% if label %}<p class="text-center mb-1">{{ label }}</p>{% endif %}
-  <div class="progress"
-       role="progressbar"
-       aria-label="{% if label %}{{ label }}{% else %}progress{% endif %}"
-       aria-valuenow="{{ value }}"
-       aria-valuemin="0"
-       aria-valuemax="{{ max }}">
-    <div class="progress-bar {% if type == 'danger' or type == 'error' %}bg-danger{% elif type == 'success' %}bg-success{% elif type == 'warning' %}bg-warning{% elif type == 'info' %}bg-info{% else %}bg-primary{% endif %}"
-         style="width: {{ cf_pct }}%"></div>
+  {% set cf_max = max | float %}
+  {% set cf_pct = (((value | float) / cf_max * 100) | round | int) if cf_max else 0 %}
+  <div class="{{ extra_class }}">
+    {% if label %}<p class="text-center mb-1">{{ label }}</p>{% endif %}
+    <div
+      class="progress"
+      role="progressbar"
+      aria-label="{% if label %}{{ label }}{% else %}progress{% endif %}"
+      aria-valuenow="{{ value }}"
+      aria-valuemin="0"
+      aria-valuemax="{{ max }}"
+    >
+      <div
+        class="progress-bar {% if type == 'danger' or type == 'error' %}bg-danger{% elif type == 'success' %}bg-success{% elif type == 'warning' %}bg-warning{% elif type == 'info' %}bg-info{% else %}bg-primary{% endif %}"
+        style="width: {{ cf_pct }}%"
+      ></div>
+    </div>
   </div>
-</div>
 {% endautoescape %}
diff --git a/src/cf_ui/templates/jinja/bootstrap/Select.jinja b/src/cf_ui/templates/jinja/bootstrap/Select.jinja
index 40e855d..05bf4e9 100644
--- a/src/cf_ui/templates/jinja/bootstrap/Select.jinja
+++ b/src/cf_ui/templates/jinja/bootstrap/Select.jinja
@@ -1,21 +1,24 @@
 {#def name, label, value="", error="", options=[], extra_class="", input_class="" #}
 {% autoescape true %}
-{% set value = value if value is defined else "" %}
-{% set error = error if error is defined else "" %}
-{% set options = options if options is defined else [] %}
-{% set extra_class = extra_class if extra_class is defined else "" %}
-{% set input_class = input_class if input_class is defined else "" %}
-<div class="mb-3 {{ extra_class }}">
-  <label class="form-label" for="{{ name }}">{{ label }}</label>
-  <select class="form-select{% if error %} is-invalid{% endif %}{% if input_class %} {{ input_class }}{% endif %}"
-          id="{{ name }}"
-          name="{{ name }}">
-    {% for opt in options %}
-    <option value="{{ opt.value }}"{% if opt.value|string == value|string %} selected{% endif %}>
-      {{ opt.label }}
-    </option>
-    {% endfor %}
-  </select>
-  {% if error %}<div class="invalid-feedback d-block">{{ error }}</div>{% endif %}
-</div>
+  {% set value = value if value is defined else "" %}
+  {% set error = error if error is defined else "" %}
+  {% set options = options if options is defined else [] %}
+  {% set extra_class = extra_class if extra_class is defined else "" %}
+  {% set input_class = input_class if input_class is defined else "" %}
+  <div class="mb-3 {{ extra_class }}">
+    <label class="form-label" for="{{ name }}">{{ label }}</label>
+    <select
+      class="form-select{% if error %} is-invalid{% endif %}{% if input_class %} {{ input_class }}{% endif %}"
+      id="{{ name }}"
+      name="{{ name }}"
+    >
+      {% for opt in options %}
+        <option
+          value="{{ opt.value }}"
+          {% if opt.value|string == value|string %} selected{% endif %}
+        >{{ opt.label }}</option>
+      {% endfor %}
+    </select>
+    {% if error %}<div class="invalid-feedback d-block">{{ error }}</div>{% endif %}
+  </div>
 {% endautoescape %}
diff --git a/src/cf_ui/templates/jinja/bootstrap/Table.jinja b/src/cf_ui/templates/jinja/bootstrap/Table.jinja
index d4f5782..6291ff4 100644
--- a/src/cf_ui/templates/jinja/bootstrap/Table.jinja
+++ b/src/cf_ui/templates/jinja/bootstrap/Table.jinja
@@ -1,26 +1,26 @@
 {#def columns=[], rows=[], hx_target="", hx_url="", extra_class="" #}
 {% autoescape true %}
-{% set columns = columns if columns is defined else [] %}
-{% set rows = rows if rows is defined else [] %}
-{% set extra_class = extra_class if extra_class is defined else "" %}
-<div class="table-responsive {{ extra_class }}">
-  <table class="table table-striped table-hover">
-    <thead>
-      <tr>
-        {% for col in columns %}
-        <th scope="col">{{ col.label }}</th>
+  {% set columns = columns if columns is defined else [] %}
+  {% set rows = rows if rows is defined else [] %}
+  {% set extra_class = extra_class if extra_class is defined else "" %}
+  <div class="table-responsive {{ extra_class }}">
+    <table class="table table-striped table-hover">
+      <thead>
+        <tr>
+          {% for col in columns %}
+            <th scope="col">{{ col.label }}</th>
+          {% endfor %}
+        </tr>
+      </thead>
+      <tbody>
+        {% for row in rows %}
+          <tr>
+            {% for col in columns %}
+              <td>{{ row[col.key] }}</td>
+            {% endfor %}
+          </tr>
         {% endfor %}
-      </tr>
-    </thead>
-    <tbody>
-      {% for row in rows %}
-      <tr>
-        {% for col in columns %}
-        <td>{{ row[col.key] }}</td>
-        {% endfor %}
-      </tr>
-      {% endfor %}
-    </tbody>
-  </table>
-</div>
+      </tbody>
+    </table>
+  </div>
 {% endautoescape %}
diff --git a/src/cf_ui/templates/jinja/bootstrap/Tabs.jinja b/src/cf_ui/templates/jinja/bootstrap/Tabs.jinja
index 53549e6..bbaf173 100644
--- a/src/cf_ui/templates/jinja/bootstrap/Tabs.jinja
+++ b/src/cf_ui/templates/jinja/bootstrap/Tabs.jinja
@@ -1,32 +1,36 @@
 {#def tabs=[], hx_target="tab-content", active="", content="", extra_class="" #}
 {% autoescape true %}
-{% set tabs = tabs if tabs is defined else [] %}
-{% set content = content if content is defined else "" %}
-{% set active = active if active is defined else "" %}
-{% set hx_target = hx_target if hx_target is defined else "tab-content" %}
-{% set extra_class = extra_class if extra_class is defined else "" %}
-<div class="{{ extra_class }}"
-     x-data="cfTabs"
-     x-init="initTabs()"
-     data-cf-active="{{ active }}">
-  <ul class="nav nav-tabs" role="tablist" @keydown="onKeydown($event)">
-    {% for tab in tabs %}
-    <li class="nav-item" role="presentation">
-      <a role="tab"
-         data-cf-tab="{{ tab.id }}"
-         class="nav-link{% if tab.id == active %} active{% endif %}"
-         aria-controls="{{ hx_target }}"
-         aria-selected="{% if tab.id == active %}true{% else %}false{% endif %}"
-         tabindex="{% if tab.id == active or (not active and loop.first) %}0{% else %}-1{% endif %}"
-         :class="{ 'active': active === $el.dataset.cfTab }"
-         :aria-selected="active === $el.dataset.cfTab"
-         :tabindex="tabIndexFor($el.dataset.cfTab)"
-         @click.prevent="setActive($el.dataset.cfTab)"
-         hx-get="{{ tab.url }}"
-         hx-target="#{{ hx_target }}">{{ tab.id }}</a>
-    </li>
-    {% endfor %}
-  </ul>
-  <div id="{{ hx_target }}" role="tabpanel">{{ content }}</div>
-</div>
+  {% set tabs = tabs if tabs is defined else [] %}
+  {% set content = content if content is defined else "" %}
+  {% set active = active if active is defined else "" %}
+  {% set hx_target = hx_target if hx_target is defined else "tab-content" %}
+  {% set extra_class = extra_class if extra_class is defined else "" %}
+  <div
+    class="{{ extra_class }}"
+    x-data="cfTabs"
+    x-init="initTabs()"
+    data-cf-active="{{ active }}"
+  >
+    <ul class="nav nav-tabs" role="tablist" @keydown="onKeydown($event)">
+      {% for tab in tabs %}
+        <li class="nav-item" role="presentation">
+          <a
+            role="tab"
+            data-cf-tab="{{ tab.id }}"
+            class="nav-link{% if tab.id == active %} active{% endif %}"
+            aria-controls="{{ hx_target }}"
+            aria-selected="{% if tab.id == active %}true{% else %}false{% endif %}"
+            tabindex="{% if tab.id == active or (not active and loop.first) %}0{% else %}-1{% endif %}"
+            :class="{ 'active': active === $el.dataset.cfTab }"
+            :aria-selected="active === $el.dataset.cfTab"
+            :tabindex="tabIndexFor($el.dataset.cfTab)"
+            @click.prevent="setActive($el.dataset.cfTab)"
+            hx-get="{{ tab.url }}"
+            hx-target="#{{ hx_target }}"
+          >{{ tab.id }}</a>
+        </li>
+      {% endfor %}
+    </ul>
+    <div id="{{ hx_target }}" role="tabpanel">{{ content }}</div>
+  </div>
 {% endautoescape %}
diff --git a/src/cf_ui/templates/jinja/bootstrap/Textarea.jinja b/src/cf_ui/templates/jinja/bootstrap/Textarea.jinja
index a776b1f..094ff0f 100644
--- a/src/cf_ui/templates/jinja/bootstrap/Textarea.jinja
+++ b/src/cf_ui/templates/jinja/bootstrap/Textarea.jinja
@@ -1,16 +1,18 @@
 {#def name, label, value="", error="", rows=4, extra_class="", input_class="" #}
 {% autoescape true %}
-{% set value = value if value is defined else "" %}
-{% set error = error if error is defined else "" %}
-{% set rows = rows if rows is defined else 4 %}
-{% set extra_class = extra_class if extra_class is defined else "" %}
-{% set input_class = input_class if input_class is defined else "" %}
-<div class="mb-3 {{ extra_class }}">
-  <label class="form-label" for="{{ name }}">{{ label }}</label>
-  <textarea class="form-control{% if error %} is-invalid{% endif %}{% if input_class %} {{ input_class }}{% endif %}"
-            id="{{ name }}"
-            name="{{ name }}"
-            rows="{{ rows }}">{{ value }}</textarea>
-  {% if error %}<div class="invalid-feedback d-block">{{ error }}</div>{% endif %}
-</div>
+  {% set value = value if value is defined else "" %}
+  {% set error = error if error is defined else "" %}
+  {% set rows = rows if rows is defined else 4 %}
+  {% set extra_class = extra_class if extra_class is defined else "" %}
+  {% set input_class = input_class if input_class is defined else "" %}
+  <div class="mb-3 {{ extra_class }}">
+    <label class="form-label" for="{{ name }}">{{ label }}</label>
+    <textarea
+      class="form-control{% if error %} is-invalid{% endif %}{% if input_class %} {{ input_class }}{% endif %}"
+      id="{{ name }}"
+      name="{{ name }}"
+      rows="{{ rows }}"
+    >{{ value }}</textarea>
+    {% if error %}<div class="invalid-feedback d-block">{{ error }}</div>{% endif %}
+  </div>
 {% endautoescape %}
diff --git a/src/cf_ui/templates/jinja/bulma/Badge.jinja b/src/cf_ui/templates/jinja/bulma/Badge.jinja
new file mode 100644
index 0000000..e6f1773
--- /dev/null
+++ b/src/cf_ui/templates/jinja/bulma/Badge.jinja
@@ -0,0 +1,11 @@
+{#def content="", variant="neutral", size="normal", extra_class="" #}
+{% autoescape true %}
+  {% set content = content if content is defined else "" %}
+  {% set variant = variant if variant is defined else "neutral" %}
+  {% set size = size if size is defined else "normal" %}
+  {% set extra_class = extra_class if extra_class is defined else "" %}
+  {{- cf_ui_validate("badge", variant=variant, size=size) -}}
+  <span
+    class="tag{% if variant == 'primary' %} is-primary{% elif variant == 'secondary' %} is-link{% elif variant == 'success' %} is-success{% elif variant == 'warning' %} is-warning{% elif variant == 'danger' %} is-danger{% elif variant == 'info' %} is-info{% endif %}{% if size == 'normal' %} is-medium{% elif size == 'large' %} is-large{% endif %}{% if extra_class %} {{ extra_class }}{% endif %}"
+  >{{ content }}</span>
+{% endautoescape %}
diff --git a/src/cf_ui/templates/jinja/bulma/Breadcrumb.jinja b/src/cf_ui/templates/jinja/bulma/Breadcrumb.jinja
index 30ba0c4..481c712 100644
--- a/src/cf_ui/templates/jinja/bulma/Breadcrumb.jinja
+++ b/src/cf_ui/templates/jinja/bulma/Breadcrumb.jinja
@@ -1,17 +1,17 @@
 {#def items=[], extra_class="" #}
 {% autoescape true %}
-{% set items = items if items is defined else [] %}
-<nav class="breadcrumb {{ extra_class }}" aria-label="breadcrumbs">
-  <ul>
-    {% for item in items %}
-    <li{% if loop.last %} class="is-active"{% endif %}>
-      {% if loop.last %}
-      <a href="{{ item.url }}" aria-current="page">{{ item.label }}</a>
-      {% else %}
-      <a href="{{ item.url }}">{{ item.label }}</a>
-      {% endif %}
-    </li>
-    {% endfor %}
-  </ul>
-</nav>
+  {% set items = items if items is defined else [] %}
+  <nav class="breadcrumb {{ extra_class }}" aria-label="breadcrumbs">
+    <ul>
+      {% for item in items %}
+        <li{% if loop.last %} class="is-active"{% endif %}>
+          {% if loop.last %}
+            <a href="{{ item.url }}" aria-current="page">{{ item.label }}</a>
+          {% else %}
+            <a href="{{ item.url }}">{{ item.label }}</a>
+          {% endif %}
+        </li>
+      {% endfor %}
+    </ul>
+  </nav>
 {% endautoescape %}
diff --git a/src/cf_ui/templates/jinja/bulma/Button.jinja b/src/cf_ui/templates/jinja/bulma/Button.jinja
new file mode 100644
index 0000000..830245c
--- /dev/null
+++ b/src/cf_ui/templates/jinja/bulma/Button.jinja
@@ -0,0 +1,16 @@
+{#def content="", variant="neutral", size="normal", state="normal", href="", type="button", full_width=false, extra_class="" #}
+{% autoescape true %}
+  {% set content = content if content is defined else "" %}
+  {% set variant = variant if variant is defined else "neutral" %}
+  {% set size = size if size is defined else "normal" %}
+  {% set state = state if state is defined else "normal" %}
+  {% set href = href if href is defined else "" %}
+  {% set type = type if type is defined else "button" %}
+  {% set full_width = full_width if full_width is defined else false %}
+  {% set extra_class = extra_class if extra_class is defined else "" %}
+  {{ cf_ui_validate("button", variant=variant, size=size, state=state, type=type) }}
+  {%- set cf_tag = "a" if href else "button" -%}
+  <{{ cf_tag }} class="button{% if variant == 'primary' %} is-primary{% elif variant == 'secondary' %} is-link{% elif variant == 'success' %} is-success{% elif variant == 'warning' %} is-warning{% elif variant == 'danger' %} is-danger{% elif variant == 'info' %} is-info{% endif %}{% if size == 'small' %} is-small{% elif size == 'large' %} is-large{% endif %}{% if state == 'loading' %} is-loading{% endif %}{% if full_width %} is-fullwidth{% endif %}{% if extra_class %} {{ extra_class }}{% endif %}"
+  {%- if href %}{% if state == 'disabled' %} role="link" aria-disabled="true"{% else %} href="{{ href }}"{% endif %}
+{%- else %} type="{{ type }}"{% if state == 'disabled' %} disabled{% endif %}{% endif %}>{{ content }}</{{ cf_tag }}>
+{% endautoescape %}
diff --git a/src/cf_ui/templates/jinja/bulma/Card.jinja b/src/cf_ui/templates/jinja/bulma/Card.jinja
index 0facad1..8dc9596 100644
--- a/src/cf_ui/templates/jinja/bulma/Card.jinja
+++ b/src/cf_ui/templates/jinja/bulma/Card.jinja
@@ -1,21 +1,21 @@
 {#def content="", header="", footer="", extra_class="" #}
 {% autoescape true %}
-{% set header = header if header is defined else "" %}
-{% set content = content if content is defined else "" %}
-{% set footer = footer if footer is defined else "" %}
-<div class="card {{ extra_class }}">
-  {% if header %}
-  <header class="card-header">
-    <p class="card-header-title">{{ header }}</p>
-  </header>
-  {% endif %}
-  <div class="card-content">
-    <div class="content">{{ content }}</div>
+  {% set header = header if header is defined else "" %}
+  {% set content = content if content is defined else "" %}
+  {% set footer = footer if footer is defined else "" %}
+  <div class="card {{ extra_class }}">
+    {% if header %}
+      <header class="card-header">
+        <p class="card-header-title">{{ header }}</p>
+      </header>
+    {% endif %}
+    <div class="card-content">
+      <div class="content">{{ content }}</div>
+    </div>
+    {% if footer %}
+      <footer class="card-footer">
+        <div class="card-footer-item">{{ footer }}</div>
+      </footer>
+    {% endif %}
   </div>
-  {% if footer %}
-  <footer class="card-footer">
-    <div class="card-footer-item">{{ footer }}</div>
-  </footer>
-  {% endif %}
-</div>
 {% endautoescape %}
diff --git a/src/cf_ui/templates/jinja/bulma/CheckboxGroup.jinja b/src/cf_ui/templates/jinja/bulma/CheckboxGroup.jinja
index 2f71ea2..7bb25d2 100644
--- a/src/cf_ui/templates/jinja/bulma/CheckboxGroup.jinja
+++ b/src/cf_ui/templates/jinja/bulma/CheckboxGroup.jinja
@@ -1,18 +1,20 @@
 {#def name, label, choices=[], selected=[], error="", extra_class="", control_class="" #}
 {% autoescape true %}
-<div class="field {{ extra_class }}">
-  <label class="label">{{ label }}</label>
-  <div class="control{% if control_class %} {{ control_class }}{% endif %}">
-    {% for choice in choices %}
-    <label class="checkbox mr-3">
-      <input type="checkbox"
-             name="{{ name }}"
-             value="{{ choice.value }}"
-             {% if choice.value in selected %}checked{% endif %}>
-      {{ choice.label }}
-    </label>
-    {% endfor %}
+  <div class="field {{ extra_class }}">
+    <label class="label">{{ label }}</label>
+    <div class="control{% if control_class %} {{ control_class }}{% endif %}">
+      {% for choice in choices %}
+        <label class="checkbox mr-3">
+          <input
+            type="checkbox"
+            name="{{ name }}"
+            value="{{ choice.value }}"
+            {% if choice.value in selected %}checked{% endif %}
+          >
+          {{ choice.label }}
+        </label>
+      {% endfor %}
+    </div>
+    {% if error %}<p class="help is-danger">{{ error }}</p>{% endif %}
   </div>
-  {% if error %}<p class="help is-danger">{{ error }}</p>{% endif %}
-</div>
 {% endautoescape %}
diff --git a/src/cf_ui/templates/jinja/bulma/FormField.jinja b/src/cf_ui/templates/jinja/bulma/FormField.jinja
index b9c3802..82f166f 100644
--- a/src/cf_ui/templates/jinja/bulma/FormField.jinja
+++ b/src/cf_ui/templates/jinja/bulma/FormField.jinja
@@ -1,14 +1,17 @@
 {#def name, label, value="", error="", type="text", required=false, extra_class="", input_class="" #}
 {% autoescape true %}
-<div class="field {{ extra_class }}">
-  <label class="label" for="{{ name }}">{{ label }}</label>
-  <div class="control">
-    <input class="input{% if error %} is-danger{% endif %}{% if input_class %} {{ input_class }}{% endif %}"
-           id="{{ name }}"
-           type="{{ type }}"
-           name="{{ name }}"
-           value="{{ value }}"{% if required %} required{% endif %}>
+  <div class="field {{ extra_class }}">
+    <label class="label" for="{{ name }}">{{ label }}</label>
+    <div class="control">
+      <input
+        class="input{% if error %} is-danger{% endif %}{% if input_class %} {{ input_class }}{% endif %}"
+        id="{{ name }}"
+        type="{{ type }}"
+        name="{{ name }}"
+        value="{{ value }}"
+        {% if required %} required{% endif %}
+      >
+    </div>
+    {% if error %}<p class="help is-danger">{{ error }}</p>{% endif %}
   </div>
-  {% if error %}<p class="help is-danger">{{ error }}</p>{% endif %}
-</div>
 {% endautoescape %}
diff --git a/src/cf_ui/templates/jinja/bulma/Heading.jinja b/src/cf_ui/templates/jinja/bulma/Heading.jinja
new file mode 100644
index 0000000..b0d4f5b
--- /dev/null
+++ b/src/cf_ui/templates/jinja/bulma/Heading.jinja
@@ -0,0 +1,17 @@
+{#def content="", level="2", size="normal", emphasis="normal", extra_class="" #}
+{% autoescape true %}
+  {% set content = content if content is defined else "" %}
+  {% set level = level if level is defined else "2" %}
+  {% set size = size if size is defined else "normal" %}
+  {% set emphasis = emphasis if emphasis is defined else "normal" %}
+  {% set extra_class = extra_class if extra_class is defined else "" %}
+  {{ cf_ui_validate("heading", level=level, size=size, emphasis=emphasis) }}
+  {# `title` and `subtitle` are Bulma alternatives, not additive — `.subtitle` is
+   defined after `.title` at equal specificity, so an element carrying both
+   renders as a subtitle with the title rules dead underneath. The emphasis
+   axis therefore carries the base class, and this branch is an `else` rather
+   than an `elif` so exactly one of the two is always emitted: an `emphasis`
+   that reached here empty would otherwise produce a heading with no Bulma
+   class at all, which is a broken render rather than a missing modifier. #}
+  <h{{ level }} class="{% if emphasis == 'subtle' %}subtitle{% else %}title{% endif %}{% if size == 'small' %} is-6{% elif size == 'normal' %} is-4{% elif size == 'large' %} is-2{% endif %}{% if extra_class %} {{ extra_class }}{% endif %}">{{ content }}</h{{ level }}>
+{% endautoescape %}
diff --git a/src/cf_ui/templates/jinja/bulma/Icon.jinja b/src/cf_ui/templates/jinja/bulma/Icon.jinja
new file mode 100644
index 0000000..bf4f165
--- /dev/null
+++ b/src/cf_ui/templates/jinja/bulma/Icon.jinja
@@ -0,0 +1,12 @@
+{#def content="", size="normal", label="", extra_class="" #}
+{% autoescape true %}
+  {% set content = content if content is defined else "" %}
+  {% set size = size if size is defined else "normal" %}
+  {% set label = label if label is defined else "" %}
+  {% set extra_class = extra_class if extra_class is defined else "" %}
+  {{ cf_ui_validate("icon", size=size) }}
+  <span
+    class="icon{% if size == 'small' %} is-small{% elif size == 'large' %} is-large{% endif %}{% if extra_class %} {{ extra_class }}{% endif %}"
+    {%- if label %} role="img" aria-label="{{ label }}"{% else %} aria-hidden="true"{% endif %}
+  >{{ content }}</span>
+{% endautoescape %}
diff --git a/src/cf_ui/templates/jinja/bulma/Label.jinja b/src/cf_ui/templates/jinja/bulma/Label.jinja
new file mode 100644
index 0000000..91fbed6
--- /dev/null
+++ b/src/cf_ui/templates/jinja/bulma/Label.jinja
@@ -0,0 +1,13 @@
+{#def content="", size="normal", for_id="", required=false, extra_class="" #}
+{% autoescape true %}
+  {% set content = content if content is defined else "" %}
+  {% set size = size if size is defined else "normal" %}
+  {% set for_id = for_id if for_id is defined else "" %}
+  {% set required = required if required is defined else false %}
+  {% set extra_class = extra_class if extra_class is defined else "" %}
+  {{ cf_ui_validate("label", size=size) }}
+  <label
+    class="label{% if size == 'small' %} is-small{% elif size == 'large' %} is-large{% endif %}{% if extra_class %} {{ extra_class }}{% endif %}"
+    {% if for_id %} for="{{ for_id }}"{% endif %}
+  >{{ content }}{% if required %} <span class="has-text-danger" role="img" aria-label="required">*</span>{% endif %}</label>
+{% endautoescape %}
diff --git a/src/cf_ui/templates/jinja/bulma/Modal.jinja b/src/cf_ui/templates/jinja/bulma/Modal.jinja
index 067931f..546c623 100644
--- a/src/cf_ui/templates/jinja/bulma/Modal.jinja
+++ b/src/cf_ui/templates/jinja/bulma/Modal.jinja
@@ -1,29 +1,31 @@
 {#def id="modal", header="", content="", footer="", label="Dialog", extra_class="" #}
 {% autoescape true %}
-{% set header = header if header is defined else "" %}
-{% set content = content if content is defined else "" %}
-{% set footer = footer if footer is defined else "" %}
-{% set label = label if label is defined and label else "Dialog" %}
-<div id="{{ id }}"
-     class="modal {{ extra_class }}"
-     role="dialog"
-     aria-modal="true"
-     {% if header %}aria-labelledby="{{ id }}-title"{% else %}aria-label="{{ label }}"{% endif %}
-     x-data="cfModal"
-     x-init="initModal()"
-     :class="{ 'is-active': open }">
-  <div class="modal-background" @click="close()"></div>
-  <div class="modal-card">
-    <header class="modal-card-head">
-      <p class="modal-card-title" id="{{ id }}-title">{{ header }}</p>
-      <button type="button" class="delete" aria-label="close" @click="close()"></button>
-    </header>
-    <section class="modal-card-body">
-      {{ content }}
-    </section>
-    <footer class="modal-card-foot">
-      {{ footer }}
-    </footer>
+  {% set header = header if header is defined else "" %}
+  {% set content = content if content is defined else "" %}
+  {% set footer = footer if footer is defined else "" %}
+  {% set label = label if label is defined and label else "Dialog" %}
+  <div
+    id="{{ id }}"
+    class="modal {{ extra_class }}"
+    role="dialog"
+    aria-modal="true"
+    {% if header %}aria-labelledby="{{ id }}-title"{% else %}aria-label="{{ label }}"{% endif %}
+    x-data="cfModal"
+    x-init="initModal()"
+    :class="{ 'is-active': open }"
+  >
+    <div class="modal-background" @click="close()"></div>
+    <div class="modal-card">
+      <header class="modal-card-head">
+        <p class="modal-card-title" id="{{ id }}-title">{{ header }}</p>
+        <button type="button" class="delete" aria-label="close" @click="close()"></button>
+      </header>
+      <section class="modal-card-body">
+        {{ content }}
+      </section>
+      <footer class="modal-card-foot">
+        {{ footer }}
+      </footer>
+    </div>
   </div>
-</div>
 {% endautoescape %}
diff --git a/src/cf_ui/templates/jinja/bulma/Navbar.jinja b/src/cf_ui/templates/jinja/bulma/Navbar.jinja
index 60c8092..49f6dc1 100644
--- a/src/cf_ui/templates/jinja/bulma/Navbar.jinja
+++ b/src/cf_ui/templates/jinja/bulma/Navbar.jinja
@@ -1,26 +1,32 @@
 {#def brand="", start="", end="", extra_class="" #}
 {% autoescape true %}
-{% set brand = brand if brand is defined else "" %}
-{% set start = start if start is defined else "" %}
-{% set end = end if end is defined else "" %}
-<nav class="navbar {{ extra_class }}" role="navigation" aria-label="main navigation"
-     x-data="cfNavbar">
-  <div class="navbar-brand">
-    {{ brand }}
-    <a role="button"
-       class="navbar-burger"
-       aria-label="menu"
-       :aria-expanded="menuOpen"
-       @click="toggle()"
-       :class="{ 'is-active': menuOpen }">
-      <span aria-hidden="true"></span>
-      <span aria-hidden="true"></span>
-      <span aria-hidden="true"></span>
-    </a>
-  </div>
-  <div class="navbar-menu" :class="{ 'is-active': menuOpen }">
-    <div class="navbar-start">{{ start }}</div>
-    <div class="navbar-end">{{ end }}</div>
-  </div>
-</nav>
+  {% set brand = brand if brand is defined else "" %}
+  {% set start = start if start is defined else "" %}
+  {% set end = end if end is defined else "" %}
+  <nav
+    class="navbar {{ extra_class }}"
+    role="navigation"
+    aria-label="main navigation"
+    x-data="cfNavbar"
+  >
+    <div class="navbar-brand">
+      {{ brand }}
+      <a
+        role="button"
+        class="navbar-burger"
+        aria-label="menu"
+        :aria-expanded="menuOpen"
+        @click="toggle()"
+        :class="{ 'is-active': menuOpen }"
+      >
+        <span aria-hidden="true"></span>
+        <span aria-hidden="true"></span>
+        <span aria-hidden="true"></span>
+      </a>
+    </div>
+    <div class="navbar-menu" :class="{ 'is-active': menuOpen }">
+      <div class="navbar-start">{{ start }}</div>
+      <div class="navbar-end">{{ end }}</div>
+    </div>
+  </nav>
 {% endautoescape %}
diff --git a/src/cf_ui/templates/jinja/bulma/Notification.jinja b/src/cf_ui/templates/jinja/bulma/Notification.jinja
index 822489e..6fa4b7a 100644
--- a/src/cf_ui/templates/jinja/bulma/Notification.jinja
+++ b/src/cf_ui/templates/jinja/bulma/Notification.jinja
@@ -1,11 +1,13 @@
 {#def message, type="info", dismissible=true, extra_class="" #}
 {% autoescape true %}
-<div class="notification is-{{ type }} {{ extra_class }}"
-     x-data="{ visible: true }"
-     x-show="visible">
-  {% if dismissible %}
-  <button class="delete" @click="visible = false"></button>
-  {% endif %}
-  {{ message }}
-</div>
+  <div
+    class="notification is-{{ type }} {{ extra_class }}"
+    x-data="{ visible: true }"
+    x-show="visible"
+  >
+    {% if dismissible %}
+      <button class="delete" @click="visible = false"></button>
+    {% endif %}
+    {{ message }}
+  </div>
 {% endautoescape %}
diff --git a/src/cf_ui/templates/jinja/bulma/Pagination.jinja b/src/cf_ui/templates/jinja/bulma/Pagination.jinja
index ad69bcc..4c593b2 100644
--- a/src/cf_ui/templates/jinja/bulma/Pagination.jinja
+++ b/src/cf_ui/templates/jinja/bulma/Pagination.jinja
@@ -1,36 +1,41 @@
 {#def page=1, total_pages=1, hx_target="", hx_url="", extra_class="" #}
 {% autoescape true %}
-{% set page = page if page is defined else 1 %}
-{% set total_pages = total_pages if total_pages is defined else 1 %}
-<nav class="pagination is-centered {{ extra_class }}" role="navigation" aria-label="pagination">
-  {% if page > 1 %}
-  <a class="pagination-previous"
-     hx-get="{{ hx_url }}?page={{ page - 1 }}"
-     hx-target="{{ hx_target }}">Previous</a>
-  {% else %}
-  <a class="pagination-previous" disabled>Previous</a>
-  {% endif %}
-
-  {% if page < total_pages %}
-  <a class="pagination-next"
-     hx-get="{{ hx_url }}?page={{ page + 1 }}"
-     hx-target="{{ hx_target }}">Next</a>
-  {% else %}
-  <a class="pagination-next" disabled>Next</a>
-  {% endif %}
-
-  <ul class="pagination-list">
-    {% for p in range(1, total_pages + 1) %}
-    <li>
-      <a class="pagination-link{% if p == page %} is-current{% endif %}"
-         {% if p != page %}
-         hx-get="{{ hx_url }}?page={{ p }}"
-         hx-target="{{ hx_target }}"
-         {% endif %}
-         aria-label="Page {{ p }}"
-         {% if p == page %}aria-current="page"{% endif %}>{{ p }}</a>
-    </li>
-    {% endfor %}
-  </ul>
-</nav>
+  {% set page = page if page is defined else 1 %}
+  {% set total_pages = total_pages if total_pages is defined else 1 %}
+  <nav
+    class="pagination is-centered {{ extra_class }}"
+    role="navigation"
+    aria-label="pagination"
+  >
+    {% if page > 1 %}
+      <a
+        class="pagination-previous"
+        hx-get="{{ hx_url }}?page={{ page - 1 }}"
+        hx-target="{{ hx_target }}"
+      >Previous</a>
+    {% else %}
+      <a class="pagination-previous" disabled>Previous</a>
+    {% endif %}
+    {% if page < total_pages %}
+      <a
+        class="pagination-next"
+        hx-get="{{ hx_url }}?page={{ page + 1 }}"
+        hx-target="{{ hx_target }}"
+      >Next</a>
+    {% else %}
+      <a class="pagination-next" disabled>Next</a>
+    {% endif %}
+    <ul class="pagination-list">
+      {% for p in range(1, total_pages + 1) %}
+        <li>
+          <a
+            class="pagination-link{% if p == page %} is-current{% endif %}"
+            {% if p != page %} hx-get="{{ hx_url }}?page={{ p }}" hx-target="{{ hx_target }}" {% endif %}
+            aria-label="Page {{ p }}"
+            {% if p == page %}aria-current="page"{% endif %}
+          >{{ p }}</a>
+        </li>
+      {% endfor %}
+    </ul>
+  </nav>
 {% endautoescape %}
diff --git a/src/cf_ui/templates/jinja/bulma/Panel.jinja b/src/cf_ui/templates/jinja/bulma/Panel.jinja
index 49ce389..ec78f66 100644
--- a/src/cf_ui/templates/jinja/bulma/Panel.jinja
+++ b/src/cf_ui/templates/jinja/bulma/Panel.jinja
@@ -1,31 +1,38 @@
 {#def title, id="panel", content="", open=false, extra_class="" #}
 {% autoescape true %}
-{% set content = content if content is defined else "" %}
-{% set id = id if id is defined else "panel" %}
-{% set open = open if open is defined else false %}
-<div class="card {{ extra_class }}"
-     x-data="cfPanel"
-     x-init="initPanel()"
-     data-cf-open="{% if open %}true{% else %}false{% endif %}">
-  <header class="card-header" style="cursor:pointer" @click="toggle()">
-    <p class="card-header-title">{{ title }}</p>
-    <button type="button"
-            class="card-header-icon"
-            aria-label="toggle panel"
-            aria-controls="{{ id }}-body"
-            aria-expanded="{% if open %}true{% else %}false{% endif %}"
-            :aria-expanded="open">
-      <span class="icon">
-        <span :style="open ? 'transform:rotate(90deg)' : 'transform:rotate(0deg)'"
-              style="display:inline-block;transition:transform 200ms">▶</span>
-      </span>
-    </button>
-  </header>
-  <div id="{{ id }}-body"
-       class="card-content"
-       x-show="open"
-       {% if not open %}x-cloak{% endif %}>
-    {{ content }}
+  {% set content = content if content is defined else "" %}
+  {% set id = id if id is defined else "panel" %}
+  {% set open = open if open is defined else false %}
+  <div
+    class="card {{ extra_class }}"
+    x-data="cfPanel"
+    x-init="initPanel()"
+    data-cf-open="{% if open %}true{% else %}false{% endif %}"
+  >
+    <header class="card-header" style="cursor:pointer" @click="toggle()">
+      <p class="card-header-title">{{ title }}</p>
+      <button
+        type="button"
+        class="card-header-icon"
+        aria-label="toggle panel"
+        aria-controls="{{ id }}-body"
+        aria-expanded="{% if open %}true{% else %}false{% endif %}"
+        :aria-expanded="open"
+      >
+        <span class="icon">
+          <span
+            :style="open ? 'transform:rotate(90deg)' : 'transform:rotate(0deg)'"
+            style="display:inline-block;
+                   transition:transform 200ms"
+          >▶</span>
+        </span>
+      </button>
+    </header>
+    <div
+      id="{{ id }}-body"
+      class="card-content"
+      x-show="open"
+      {% if not open %}x-cloak{% endif %}
+    >{{ content }}</div>
   </div>
-</div>
 {% endautoescape %}
diff --git a/src/cf_ui/templates/jinja/bulma/Progress.jinja b/src/cf_ui/templates/jinja/bulma/Progress.jinja
index 5878f0b..e1cd516 100644
--- a/src/cf_ui/templates/jinja/bulma/Progress.jinja
+++ b/src/cf_ui/templates/jinja/bulma/Progress.jinja
@@ -1,9 +1,7 @@
 {#def value=0, max=100, type="primary", label="", extra_class="" #}
 {% autoescape true %}
-<div class="{{ extra_class }}">
-  {% if label %}<p class="has-text-centered mb-1">{{ label }}</p>{% endif %}
-  <progress class="progress is-{{ type }}"
-            value="{{ value }}"
-            max="{{ max }}">{{ value }}%</progress>
-</div>
+  <div class="{{ extra_class }}">
+    {% if label %}<p class="has-text-centered mb-1">{{ label }}</p>{% endif %}
+    <progress class="progress is-{{ type }}" value="{{ value }}" max="{{ max }}">{{ value }}%</progress>
+  </div>
 {% endautoescape %}
diff --git a/src/cf_ui/templates/jinja/bulma/Select.jinja b/src/cf_ui/templates/jinja/bulma/Select.jinja
index 7bc183b..ed79d8f 100644
--- a/src/cf_ui/templates/jinja/bulma/Select.jinja
+++ b/src/cf_ui/templates/jinja/bulma/Select.jinja
@@ -1,18 +1,23 @@
 {#def name, label, value="", error="", options=[], extra_class="", input_class="" #}
 {% autoescape true %}
-<div class="field {{ extra_class }}">
-  <label class="label" for="{{ name }}">{{ label }}</label>
-  <div class="control">
-    <div class="select{% if error %} is-danger{% endif %} is-fullwidth">
-      <select id="{{ name }}" name="{{ name }}"{% if input_class %} class="{{ input_class }}"{% endif %}>
-        {% for opt in options %}
-        <option value="{{ opt.value }}"{% if opt.value|string == value|string %} selected{% endif %}>
-          {{ opt.label }}
-        </option>
-        {% endfor %}
-      </select>
+  <div class="field {{ extra_class }}">
+    <label class="label" for="{{ name }}">{{ label }}</label>
+    <div class="control">
+      <div class="select{% if error %} is-danger{% endif %} is-fullwidth">
+        <select
+          id="{{ name }}"
+          name="{{ name }}"
+          {% if input_class %} class="{{ input_class }}"{% endif %}
+        >
+          {% for opt in options %}
+            <option
+              value="{{ opt.value }}"
+              {% if opt.value|string == value|string %} selected{% endif %}
+            >{{ opt.label }}</option>
+          {% endfor %}
+        </select>
+      </div>
     </div>
+    {% if error %}<p class="help is-danger">{{ error }}</p>{% endif %}
   </div>
-  {% if error %}<p class="help is-danger">{{ error }}</p>{% endif %}
-</div>
 {% endautoescape %}
diff --git a/src/cf_ui/templates/jinja/bulma/Table.jinja b/src/cf_ui/templates/jinja/bulma/Table.jinja
index 6908201..07845cd 100644
--- a/src/cf_ui/templates/jinja/bulma/Table.jinja
+++ b/src/cf_ui/templates/jinja/bulma/Table.jinja
@@ -1,25 +1,25 @@
 {#def columns=[], rows=[], hx_target="", hx_url="", extra_class="" #}
 {% autoescape true %}
-{% set columns = columns if columns is defined else [] %}
-{% set rows = rows if rows is defined else [] %}
-<div class="{{ extra_class }}">
-  <table class="table is-striped is-hoverable is-fullwidth">
-    <thead>
-      <tr>
-        {% for col in columns %}
-        <th>{{ col.label }}</th>
+  {% set columns = columns if columns is defined else [] %}
+  {% set rows = rows if rows is defined else [] %}
+  <div class="{{ extra_class }}">
+    <table class="table is-striped is-hoverable is-fullwidth">
+      <thead>
+        <tr>
+          {% for col in columns %}
+            <th>{{ col.label }}</th>
+          {% endfor %}
+        </tr>
+      </thead>
+      <tbody>
+        {% for row in rows %}
+          <tr>
+            {% for col in columns %}
+              <td>{{ row[col.key] }}</td>
+            {% endfor %}
+          </tr>
         {% endfor %}
-      </tr>
-    </thead>
-    <tbody>
-      {% for row in rows %}
-      <tr>
-        {% for col in columns %}
-        <td>{{ row[col.key] }}</td>
-        {% endfor %}
-      </tr>
-      {% endfor %}
-    </tbody>
-  </table>
-</div>
+      </tbody>
+    </table>
+  </div>
 {% endautoescape %}
diff --git a/src/cf_ui/templates/jinja/bulma/Tabs.jinja b/src/cf_ui/templates/jinja/bulma/Tabs.jinja
index a8c5451..99f9051 100644
--- a/src/cf_ui/templates/jinja/bulma/Tabs.jinja
+++ b/src/cf_ui/templates/jinja/bulma/Tabs.jinja
@@ -1,34 +1,40 @@
 {#def tabs=[], hx_target="tab-content", active="", content="", extra_class="" #}
 {% autoescape true %}
-{% set tabs = tabs if tabs is defined else [] %}
-{% set content = content if content is defined else "" %}
-{% set active = active if active is defined else "" %}
-{% set hx_target = hx_target if hx_target is defined else "tab-content" %}
-<div class="{{ extra_class }}"
-     x-data="cfTabs"
-     x-init="initTabs()"
-     data-cf-active="{{ active }}">
-  <div class="tabs">
-    <ul role="tablist" @keydown="onKeydown($event)">
-      {% for tab in tabs %}
-      <li role="presentation"
-          class="{% if tab.id == active %}is-active{% endif %}"
-          data-cf-tab="{{ tab.id }}"
-          :class="{ 'is-active': active === $el.dataset.cfTab }">
-        <a role="tab"
-           data-cf-tab="{{ tab.id }}"
-           aria-controls="{{ hx_target }}"
-           aria-selected="{% if tab.id == active %}true{% else %}false{% endif %}"
-           tabindex="{% if tab.id == active or (not active and loop.first) %}0{% else %}-1{% endif %}"
-           :aria-selected="active === $el.dataset.cfTab"
-           :tabindex="tabIndexFor($el.dataset.cfTab)"
-           @click.prevent="setActive($el.dataset.cfTab)"
-           hx-get="{{ tab.url }}"
-           hx-target="#{{ hx_target }}">{{ tab.id }}</a>
-      </li>
-      {% endfor %}
-    </ul>
+  {% set tabs = tabs if tabs is defined else [] %}
+  {% set content = content if content is defined else "" %}
+  {% set active = active if active is defined else "" %}
+  {% set hx_target = hx_target if hx_target is defined else "tab-content" %}
+  <div
+    class="{{ extra_class }}"
+    x-data="cfTabs"
+    x-init="initTabs()"
+    data-cf-active="{{ active }}"
+  >
+    <div class="tabs">
+      <ul role="tablist" @keydown="onKeydown($event)">
+        {% for tab in tabs %}
+          <li
+            role="presentation"
+            class="{% if tab.id == active %}is-active{% endif %}"
+            data-cf-tab="{{ tab.id }}"
+            :class="{ 'is-active': active === $el.dataset.cfTab }"
+          >
+            <a
+              role="tab"
+              data-cf-tab="{{ tab.id }}"
+              aria-controls="{{ hx_target }}"
+              aria-selected="{% if tab.id == active %}true{% else %}false{% endif %}"
+              tabindex="{% if tab.id == active or (not active and loop.first) %}0{% else %}-1{% endif %}"
+              :aria-selected="active === $el.dataset.cfTab"
+              :tabindex="tabIndexFor($el.dataset.cfTab)"
+              @click.prevent="setActive($el.dataset.cfTab)"
+              hx-get="{{ tab.url }}"
+              hx-target="#{{ hx_target }}"
+            >{{ tab.id }}</a>
+          </li>
+        {% endfor %}
+      </ul>
+    </div>
+    <div id="{{ hx_target }}" role="tabpanel">{{ content }}</div>
   </div>
-  <div id="{{ hx_target }}" role="tabpanel">{{ content }}</div>
-</div>
 {% endautoescape %}
diff --git a/src/cf_ui/templates/jinja/bulma/Textarea.jinja b/src/cf_ui/templates/jinja/bulma/Textarea.jinja
index 56c8413..3a5973d 100644
--- a/src/cf_ui/templates/jinja/bulma/Textarea.jinja
+++ b/src/cf_ui/templates/jinja/bulma/Textarea.jinja
@@ -1,13 +1,15 @@
 {#def name, label, value="", error="", rows=4, extra_class="", input_class="" #}
 {% autoescape true %}
-<div class="field {{ extra_class }}">
-  <label class="label" for="{{ name }}">{{ label }}</label>
-  <div class="control">
-    <textarea class="textarea{% if error %} is-danger{% endif %}{% if input_class %} {{ input_class }}{% endif %}"
-              id="{{ name }}"
-              name="{{ name }}"
-              rows="{{ rows }}">{{ value }}</textarea>
+  <div class="field {{ extra_class }}">
+    <label class="label" for="{{ name }}">{{ label }}</label>
+    <div class="control">
+      <textarea
+        class="textarea{% if error %} is-danger{% endif %}{% if input_class %} {{ input_class }}{% endif %}"
+        id="{{ name }}"
+        name="{{ name }}"
+        rows="{{ rows }}"
+      >{{ value }}</textarea>
+    </div>
+    {% if error %}<p class="help is-danger">{{ error }}</p>{% endif %}
   </div>
-  {% if error %}<p class="help is-danger">{{ error }}</p>{% endif %}
-</div>
 {% endautoescape %}
diff --git a/src/cf_ui/templates/jinja/daisy/Badge.jinja b/src/cf_ui/templates/jinja/daisy/Badge.jinja
new file mode 100644
index 0000000..8806cfb
--- /dev/null
+++ b/src/cf_ui/templates/jinja/daisy/Badge.jinja
@@ -0,0 +1,11 @@
+{#def content="", variant="neutral", size="normal", extra_class="" #}
+{% autoescape true %}
+  {% set content = content if content is defined else "" %}
+  {% set variant = variant if variant is defined else "neutral" %}
+  {% set size = size if size is defined else "normal" %}
+  {% set extra_class = extra_class if extra_class is defined else "" %}
+  {{- cf_ui_validate("badge", variant=variant, size=size) -}}
+  <span
+    class="badge{% if variant == 'primary' %} badge-primary{% elif variant == 'secondary' %} badge-secondary{% elif variant == 'success' %} badge-success{% elif variant == 'warning' %} badge-warning{% elif variant == 'danger' %} badge-error{% elif variant == 'info' %} badge-info{% elif variant == 'neutral' %} badge-neutral{% endif %}{% if size == 'small' %} badge-sm{% elif size == 'large' %} badge-lg{% endif %}{% if extra_class %} {{ extra_class }}{% endif %}"
+  >{{ content }}</span>
+{% endautoescape %}
diff --git a/src/cf_ui/templates/jinja/daisy/Breadcrumb.jinja b/src/cf_ui/templates/jinja/daisy/Breadcrumb.jinja
index c4d1e3f..990334e 100644
--- a/src/cf_ui/templates/jinja/daisy/Breadcrumb.jinja
+++ b/src/cf_ui/templates/jinja/daisy/Breadcrumb.jinja
@@ -1,18 +1,21 @@
 {#def items=[], extra_class="" #}
 {% autoescape true %}
-{% set items = items if items is defined else [] %}
-{% set extra_class = extra_class if extra_class is defined else "" %}
-<nav class="breadcrumbs text-sm {{ extra_class }}" aria-label="breadcrumbs">
-  <ul>
-    {% for item in items %}
-    <li>
-      {% if loop.last %}
-      <a href="{{ item.url }}" aria-current="page">{{ item.label }}</a>
-      {% else %}
-      <a href="{{ item.url }}">{{ item.label }}</a>
-      {% endif %}
-    </li>
-    {% endfor %}
-  </ul>
-</nav>
+  {% set items = items if items is defined else [] %}
+  {% set extra_class = extra_class if extra_class is defined else "" %}
+  <nav
+    class="breadcrumbs text-sm {{ extra_class }}"
+    aria-label="breadcrumbs"
+  >
+    <ul>
+      {% for item in items %}
+        <li>
+          {% if loop.last %}
+            <a href="{{ item.url }}" aria-current="page">{{ item.label }}</a>
+          {% else %}
+            <a href="{{ item.url }}">{{ item.label }}</a>
+          {% endif %}
+        </li>
+      {% endfor %}
+    </ul>
+  </nav>
 {% endautoescape %}
diff --git a/src/cf_ui/templates/jinja/daisy/Button.jinja b/src/cf_ui/templates/jinja/daisy/Button.jinja
new file mode 100644
index 0000000..d0550b6
--- /dev/null
+++ b/src/cf_ui/templates/jinja/daisy/Button.jinja
@@ -0,0 +1,16 @@
+{#def content="", variant="neutral", size="normal", state="normal", href="", type="button", full_width=false, extra_class="" #}
+{% autoescape true %}
+  {% set content = content if content is defined else "" %}
+  {% set variant = variant if variant is defined else "neutral" %}
+  {% set size = size if size is defined else "normal" %}
+  {% set state = state if state is defined else "normal" %}
+  {% set href = href if href is defined else "" %}
+  {% set type = type if type is defined else "button" %}
+  {% set full_width = full_width if full_width is defined else false %}
+  {% set extra_class = extra_class if extra_class is defined else "" %}
+  {{ cf_ui_validate("button", variant=variant, size=size, state=state, type=type) }}
+  {%- set cf_tag = "a" if href else "button" -%}
+  <{{ cf_tag }} class="btn{% if variant == 'primary' %} btn-primary{% elif variant == 'secondary' %} btn-secondary{% elif variant == 'success' %} btn-success{% elif variant == 'warning' %} btn-warning{% elif variant == 'danger' %} btn-error{% elif variant == 'info' %} btn-info{% elif variant == 'neutral' %} btn-neutral{% endif %}{% if size == 'small' %} btn-sm{% elif size == 'large' %} btn-lg{% endif %}{% if state == 'disabled' %} btn-disabled{% endif %}{% if full_width %} btn-block{% endif %}{% if extra_class %} {{ extra_class }}{% endif %}"
+  {%- if href %}{% if state == 'disabled' %} role="link" aria-disabled="true"{% else %} href="{{ href }}"{% endif %}
+{%- else %} type="{{ type }}"{% if state == 'disabled' %} disabled{% endif %}{% endif %}>{% if state == 'loading' %}<span class="loading loading-spinner"></span> {% endif %}{{ content }}</{{ cf_tag }}>
+{% endautoescape %}
diff --git a/src/cf_ui/templates/jinja/daisy/Card.jinja b/src/cf_ui/templates/jinja/daisy/Card.jinja
index 5be1ef8..126bcf6 100644
--- a/src/cf_ui/templates/jinja/daisy/Card.jinja
+++ b/src/cf_ui/templates/jinja/daisy/Card.jinja
@@ -1,16 +1,16 @@
 {#def content="", header="", footer="", extra_class="" #}
 {% autoescape true %}
-{% set header = header if header is defined else "" %}
-{% set content = content if content is defined else "" %}
-{% set footer = footer if footer is defined else "" %}
-{% set extra_class = extra_class if extra_class is defined else "" %}
-<div class="card bg-base-100 shadow-xl {{ extra_class }}">
-  <div class="card-body">
-    {% if header %}<h2 class="card-title">{{ header }}</h2>{% endif %}
-    <div>{{ content }}</div>
-    {% if footer %}
-    <div class="card-actions justify-end">{{ footer }}</div>
-    {% endif %}
+  {% set header = header if header is defined else "" %}
+  {% set content = content if content is defined else "" %}
+  {% set footer = footer if footer is defined else "" %}
+  {% set extra_class = extra_class if extra_class is defined else "" %}
+  <div class="card bg-base-100 shadow-xl {{ extra_class }}">
+    <div class="card-body">
+      {% if header %}<h2 class="card-title">{{ header }}</h2>{% endif %}
+      <div>{{ content }}</div>
+      {% if footer %}
+        <div class="card-actions justify-end">{{ footer }}</div>
+      {% endif %}
+    </div>
   </div>
-</div>
 {% endautoescape %}
diff --git a/src/cf_ui/templates/jinja/daisy/CheckboxGroup.jinja b/src/cf_ui/templates/jinja/daisy/CheckboxGroup.jinja
index b959a93..856ecee 100644
--- a/src/cf_ui/templates/jinja/daisy/CheckboxGroup.jinja
+++ b/src/cf_ui/templates/jinja/daisy/CheckboxGroup.jinja
@@ -1,24 +1,28 @@
 {#def name, label, choices=[], selected=[], error="", extra_class="", control_class="" #}
 {% autoescape true %}
-{% set choices = choices if choices is defined else [] %}
-{% set selected = selected if selected is defined else [] %}
-{% set error = error if error is defined else "" %}
-{% set extra_class = extra_class if extra_class is defined else "" %}
-{% set control_class = control_class if control_class is defined else "" %}
-<div class="form-control {{ extra_class }}">
-  <label class="label"><span class="label-text">{{ label }}</span></label>
-  <div class="flex flex-wrap gap-4{% if control_class %} {{ control_class }}{% endif %}">
-    {% for choice in choices %}
-    <label class="label cursor-pointer gap-2">
-      <input type="checkbox"
-             class="checkbox"
-             name="{{ name }}"
-             value="{{ choice.value }}"
-             {% if choice.value in selected %}checked{% endif %}>
-      <span class="label-text">{{ choice.label }}</span>
-    </label>
-    {% endfor %}
+  {% set choices = choices if choices is defined else [] %}
+  {% set selected = selected if selected is defined else [] %}
+  {% set error = error if error is defined else "" %}
+  {% set extra_class = extra_class if extra_class is defined else "" %}
+  {% set control_class = control_class if control_class is defined else "" %}
+  <div class="form-control {{ extra_class }}">
+    <label class="label"><span class="label-text">{{ label }}</span></label>
+    <div
+      class="flex flex-wrap gap-4{% if control_class %} {{ control_class }}{% endif %}"
+    >
+      {% for choice in choices %}
+        <label class="label cursor-pointer gap-2">
+          <input
+            type="checkbox"
+            class="checkbox"
+            name="{{ name }}"
+            value="{{ choice.value }}"
+            {% if choice.value in selected %}checked{% endif %}
+          >
+          <span class="label-text">{{ choice.label }}</span>
+        </label>
+      {% endfor %}
+    </div>
+    {% if error %}<span class="label-text-alt text-error">{{ error }}</span>{% endif %}
   </div>
-  {% if error %}<span class="label-text-alt text-error">{{ error }}</span>{% endif %}
-</div>
 {% endautoescape %}
diff --git a/src/cf_ui/templates/jinja/daisy/FormField.jinja b/src/cf_ui/templates/jinja/daisy/FormField.jinja
index c782681..b6f23d9 100644
--- a/src/cf_ui/templates/jinja/daisy/FormField.jinja
+++ b/src/cf_ui/templates/jinja/daisy/FormField.jinja
@@ -1,18 +1,21 @@
 {#def name, label, value="", error="", type="text", required=false, extra_class="", input_class="" #}
 {% autoescape true %}
-{% set value = value if value is defined else "" %}
-{% set error = error if error is defined else "" %}
-{% set type = type if type is defined else "text" %}
-{% set required = required if required is defined else false %}
-{% set extra_class = extra_class if extra_class is defined else "" %}
-{% set input_class = input_class if input_class is defined else "" %}
-<div class="form-control {{ extra_class }}">
-  <label class="label" for="{{ name }}"><span class="label-text">{{ label }}</span></label>
-  <input class="input input-bordered w-full{% if error %} input-error{% endif %}{% if input_class %} {{ input_class }}{% endif %}"
-         id="{{ name }}"
-         type="{{ type }}"
-         name="{{ name }}"
-         value="{{ value }}"{% if required %} required{% endif %}>
-  {% if error %}<span class="label-text-alt text-error">{{ error }}</span>{% endif %}
-</div>
+  {% set value = value if value is defined else "" %}
+  {% set error = error if error is defined else "" %}
+  {% set type = type if type is defined else "text" %}
+  {% set required = required if required is defined else false %}
+  {% set extra_class = extra_class if extra_class is defined else "" %}
+  {% set input_class = input_class if input_class is defined else "" %}
+  <div class="form-control {{ extra_class }}">
+    <label class="label" for="{{ name }}"><span class="label-text">{{ label }}</span></label>
+    <input
+      class="input input-bordered w-full{% if error %} input-error{% endif %}{% if input_class %} {{ input_class }}{% endif %}"
+      id="{{ name }}"
+      type="{{ type }}"
+      name="{{ name }}"
+      value="{{ value }}"
+      {% if required %} required{% endif %}
+    >
+    {% if error %}<span class="label-text-alt text-error">{{ error }}</span>{% endif %}
+  </div>
 {% endautoescape %}
diff --git a/src/cf_ui/templates/jinja/daisy/Heading.jinja b/src/cf_ui/templates/jinja/daisy/Heading.jinja
new file mode 100644
index 0000000..b3f5f92
--- /dev/null
+++ b/src/cf_ui/templates/jinja/daisy/Heading.jinja
@@ -0,0 +1,15 @@
+{#def content="", level="2", size="normal", emphasis="normal", extra_class="" #}
+{% autoescape true %}
+  {% set content = content if content is defined else "" %}
+  {% set level = level if level is defined else "2" %}
+  {% set size = size if size is defined else "normal" %}
+  {% set emphasis = emphasis if emphasis is defined else "normal" %}
+  {% set extra_class = extra_class if extra_class is defined else "" %}
+  {{ cf_ui_validate("heading", level=level, size=size, emphasis=emphasis) }}
+  {# `font-bold` is the base rather than a flourish: Tailwind's Preflight resets
+   `font-size` and `font-weight` on h1–h6, so an unclassed heading here renders
+   as body text. daisyUI ships no heading component, so the type scale is
+   Tailwind's own — these utilities are absent from the daisyUI CDN bundle and
+   only exist in a real Tailwind build. #}
+  <h{{ level }} class="font-bold{% if size == 'small' %} text-base{% elif size == 'normal' %} text-2xl{% elif size == 'large' %} text-4xl{% endif %}{% if emphasis == 'subtle' %} opacity-60{% endif %}{% if extra_class %} {{ extra_class }}{% endif %}">{{ content }}</h{{ level }}>
+{% endautoescape %}
diff --git a/src/cf_ui/templates/jinja/daisy/Icon.jinja b/src/cf_ui/templates/jinja/daisy/Icon.jinja
new file mode 100644
index 0000000..ad05e5f
--- /dev/null
+++ b/src/cf_ui/templates/jinja/daisy/Icon.jinja
@@ -0,0 +1,12 @@
+{#def content="", size="normal", label="", extra_class="" #}
+{% autoescape true %}
+  {% set content = content if content is defined else "" %}
+  {% set size = size if size is defined else "normal" %}
+  {% set label = label if label is defined else "" %}
+  {% set extra_class = extra_class if extra_class is defined else "" %}
+  {{ cf_ui_validate("icon", size=size) }}
+  <span
+    class="inline-flex items-center justify-center{% if size == 'small' %} text-[0.75em]{% elif size == 'large' %} text-[1.5em]{% endif %}{% if extra_class %} {{ extra_class }}{% endif %}"
+    {%- if label %} role="img" aria-label="{{ label }}"{% else %} aria-hidden="true"{% endif %}
+  >{{ content }}</span>
+{% endautoescape %}
diff --git a/src/cf_ui/templates/jinja/daisy/Label.jinja b/src/cf_ui/templates/jinja/daisy/Label.jinja
new file mode 100644
index 0000000..15b18d8
--- /dev/null
+++ b/src/cf_ui/templates/jinja/daisy/Label.jinja
@@ -0,0 +1,23 @@
+{#def content="", size="normal", for_id="", required=false, extra_class="" #}
+{% autoescape true %}
+  {% set content = content if content is defined else "" %}
+  {% set size = size if size is defined else "normal" %}
+  {% set for_id = for_id if for_id is defined else "" %}
+  {% set required = required if required is defined else false %}
+  {% set extra_class = extra_class if extra_class is defined else "" %}
+  {{ cf_ui_validate("label", size=size) }}
+  {# `.label` is the flex row; `.label-text` is what actually carries the font
+   size and colour — the same pair `FormField.jinja` renders. Size has to go on
+   the inner span because `.label-text` sets `font-size` itself, so a utility
+   on the outer `<label>` would be overridden rather than inherited.
+
+   The required glyph also lives inside `.label-text`: `.label` is
+   `justify-content: space-between`, so a second flex child would be flung to
+   the far edge of the row. #}
+  <label
+    class="label{% if extra_class %} {{ extra_class }}{% endif %}"
+    {% if for_id %} for="{{ for_id }}"{% endif %}
+  ><span
+  class="label-text{% if size == 'small' %} text-xs{% elif size == 'large' %} text-lg{% endif %}"
+>{{ content }}{% if required %} <span class="text-error" role="img" aria-label="required">*</span>{% endif %}</span></label>
+{% endautoescape %}
diff --git a/src/cf_ui/templates/jinja/daisy/Modal.jinja b/src/cf_ui/templates/jinja/daisy/Modal.jinja
index 60e02fd..bee39d9 100644
--- a/src/cf_ui/templates/jinja/daisy/Modal.jinja
+++ b/src/cf_ui/templates/jinja/daisy/Modal.jinja
@@ -1,30 +1,34 @@
 {#def id="modal", header="", content="", footer="", label="Dialog", extra_class="" #}
 {% autoescape true %}
-{% set id = id if id is defined else "modal" %}
-{% set header = header if header is defined else "" %}
-{% set content = content if content is defined else "" %}
-{% set footer = footer if footer is defined else "" %}
-{% set label = label if label is defined and label else "Dialog" %}
-{% set extra_class = extra_class if extra_class is defined else "" %}
-<div id="{{ id }}"
-     class="modal {{ extra_class }}"
-     role="dialog"
-     aria-modal="true"
-     {% if header %}aria-labelledby="{{ id }}-title"{% else %}aria-label="{{ label }}"{% endif %}
-     x-data="cfModal"
-     x-init="initModal()"
-     :class="{ 'modal-open': open }">
-  <div class="modal-box">
-    <button type="button"
-            class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2"
-            aria-label="close"
-            @click="close()">&times;</button>
-    {% if header %}<h3 class="text-lg font-bold" id="{{ id }}-title">{{ header }}</h3>{% endif %}
-    <div class="py-4">{{ content }}</div>
-    {% if footer %}
-    <div class="modal-action">{{ footer }}</div>
-    {% endif %}
+  {% set id = id if id is defined else "modal" %}
+  {% set header = header if header is defined else "" %}
+  {% set content = content if content is defined else "" %}
+  {% set footer = footer if footer is defined else "" %}
+  {% set label = label if label is defined and label else "Dialog" %}
+  {% set extra_class = extra_class if extra_class is defined else "" %}
+  <div
+    id="{{ id }}"
+    class="modal {{ extra_class }}"
+    role="dialog"
+    aria-modal="true"
+    {% if header %}aria-labelledby="{{ id }}-title"{% else %}aria-label="{{ label }}"{% endif %}
+    x-data="cfModal"
+    x-init="initModal()"
+    :class="{ 'modal-open': open }"
+  >
+    <div class="modal-box">
+      <button
+        type="button"
+        class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2"
+        aria-label="close"
+        @click="close()"
+      >&times;</button>
+      {% if header %}<h3 class="text-lg font-bold" id="{{ id }}-title">{{ header }}</h3>{% endif %}
+      <div class="py-4">{{ content }}</div>
+      {% if footer %}
+        <div class="modal-action">{{ footer }}</div>
+      {% endif %}
+    </div>
+    <div class="modal-backdrop" @click="close()"></div>
   </div>
-  <div class="modal-backdrop" @click="close()"></div>
-</div>
 {% endautoescape %}
diff --git a/src/cf_ui/templates/jinja/daisy/Navbar.jinja b/src/cf_ui/templates/jinja/daisy/Navbar.jinja
index fd4aef8..e4656fa 100644
--- a/src/cf_ui/templates/jinja/daisy/Navbar.jinja
+++ b/src/cf_ui/templates/jinja/daisy/Navbar.jinja
@@ -1,25 +1,31 @@
 {#def brand="", start="", end="", extra_class="" #}
 {% autoescape true %}
-{% set brand = brand if brand is defined else "" %}
-{% set start = start if start is defined else "" %}
-{% set end = end if end is defined else "" %}
-{% set extra_class = extra_class if extra_class is defined else "" %}
-<nav class="navbar bg-base-100 {{ extra_class }}" role="navigation" aria-label="main navigation"
-     x-data="cfNavbar">
-  <div class="navbar-start">
-    {{ brand }}
-    <button type="button"
-            class="btn btn-square btn-ghost lg:hidden"
-            aria-label="menu"
-            :aria-expanded="menuOpen"
-            @click="toggle()">&#9776;</button>
-  </div>
-  {# Toggle `hidden` rather than adding `flex`: both are display utilities in
+  {% set brand = brand if brand is defined else "" %}
+  {% set start = start if start is defined else "" %}
+  {% set end = end if end is defined else "" %}
+  {% set extra_class = extra_class if extra_class is defined else "" %}
+  <nav
+    class="navbar bg-base-100 {{ extra_class }}"
+    role="navigation"
+    aria-label="main navigation"
+    x-data="cfNavbar"
+  >
+    <div class="navbar-start">
+      {{ brand }}
+      <button
+        type="button"
+        class="btn btn-square btn-ghost lg:hidden"
+        aria-label="menu"
+        :aria-expanded="menuOpen"
+        @click="toggle()"
+      >&#9776;</button>
+    </div>
+    {# Toggle `hidden` rather than adding `flex`: both are display utilities in
      the same layer, and Tailwind emits `hidden` last, so adding `flex` to an
      element that keeps `hidden` would never show it. Removing `hidden` leaves
      the div at its default display on mobile, and `lg:flex` (a media query,
      emitted after the base utilities) governs desktop either way. #}
-  <div class="navbar-center lg:flex" :class="{ 'hidden': !menuOpen }">{{ start }}</div>
-  <div class="navbar-end lg:flex" :class="{ 'hidden': !menuOpen }">{{ end }}</div>
-</nav>
+    <div class="navbar-center lg:flex" :class="{ 'hidden': !menuOpen }">{{ start }}</div>
+    <div class="navbar-end lg:flex" :class="{ 'hidden': !menuOpen }">{{ end }}</div>
+  </nav>
 {% endautoescape %}
diff --git a/src/cf_ui/templates/jinja/daisy/Notification.jinja b/src/cf_ui/templates/jinja/daisy/Notification.jinja
index 09ab0bc..925e135 100644
--- a/src/cf_ui/templates/jinja/daisy/Notification.jinja
+++ b/src/cf_ui/templates/jinja/daisy/Notification.jinja
@@ -1,18 +1,22 @@
 {#def message, type="info", dismissible=true, extra_class="" #}
 {% autoescape true %}
-{% set type = type if type is defined else "info" %}
-{% set dismissible = dismissible if dismissible is defined else true %}
-{% set extra_class = extra_class if extra_class is defined else "" %}
-<div role="alert"
-     class="alert {% if type == 'danger' or type == 'error' %}alert-error{% elif type == 'success' %}alert-success{% elif type == 'warning' %}alert-warning{% else %}alert-info{% endif %} {{ extra_class }}"
-     x-data="{ visible: true }"
-     x-show="visible">
-  <span>{{ message }}</span>
-  {% if dismissible %}
-  <button type="button"
-          class="btn btn-sm btn-circle btn-ghost"
-          aria-label="dismiss"
-          @click="visible = false">&times;</button>
-  {% endif %}
-</div>
+  {% set type = type if type is defined else "info" %}
+  {% set dismissible = dismissible if dismissible is defined else true %}
+  {% set extra_class = extra_class if extra_class is defined else "" %}
+  <div
+    role="alert"
+    class="alert {% if type == 'danger' or type == 'error' %}alert-error{% elif type == 'success' %}alert-success{% elif type == 'warning' %}alert-warning{% else %}alert-info{% endif %} {{ extra_class }}"
+    x-data="{ visible: true }"
+    x-show="visible"
+  >
+    <span>{{ message }}</span>
+    {% if dismissible %}
+      <button
+        type="button"
+        class="btn btn-sm btn-circle btn-ghost"
+        aria-label="dismiss"
+        @click="visible = false"
+      >&times;</button>
+    {% endif %}
+  </div>
 {% endautoescape %}
diff --git a/src/cf_ui/templates/jinja/daisy/Pagination.jinja b/src/cf_ui/templates/jinja/daisy/Pagination.jinja
index 11d5198..ea1bdc2 100644
--- a/src/cf_ui/templates/jinja/daisy/Pagination.jinja
+++ b/src/cf_ui/templates/jinja/daisy/Pagination.jinja
@@ -1,35 +1,40 @@
 {#def page=1, total_pages=1, hx_target="", hx_url="", extra_class="" #}
 {% autoescape true %}
-{% set page = page if page is defined else 1 %}
-{% set total_pages = total_pages if total_pages is defined else 1 %}
-{% set hx_target = hx_target if hx_target is defined else "" %}
-{% set hx_url = hx_url if hx_url is defined else "" %}
-{% set extra_class = extra_class if extra_class is defined else "" %}
-<nav class="join {{ extra_class }}" role="navigation" aria-label="pagination">
-  {% if page > 1 %}
-  <a class="join-item btn"
-     hx-get="{{ hx_url }}?page={{ page - 1 }}"
-     hx-target="{{ hx_target }}">Previous</a>
-  {% else %}
-  <a class="join-item btn btn-disabled" aria-disabled="true">Previous</a>
-  {% endif %}
-
-  {% for p in range(1, total_pages + 1) %}
-  <a class="join-item btn{% if p == page %} btn-active{% endif %}"
-     {% if p != page %}
-     hx-get="{{ hx_url }}?page={{ p }}"
-     hx-target="{{ hx_target }}"
-     {% endif %}
-     aria-label="Page {{ p }}"
-     {% if p == page %}aria-current="page"{% endif %}>{{ p }}</a>
-  {% endfor %}
-
-  {% if page < total_pages %}
-  <a class="join-item btn"
-     hx-get="{{ hx_url }}?page={{ page + 1 }}"
-     hx-target="{{ hx_target }}">Next</a>
-  {% else %}
-  <a class="join-item btn btn-disabled" aria-disabled="true">Next</a>
-  {% endif %}
-</nav>
+  {% set page = page if page is defined else 1 %}
+  {% set total_pages = total_pages if total_pages is defined else 1 %}
+  {% set hx_target = hx_target if hx_target is defined else "" %}
+  {% set hx_url = hx_url if hx_url is defined else "" %}
+  {% set extra_class = extra_class if extra_class is defined else "" %}
+  <nav
+    class="join {{ extra_class }}"
+    role="navigation"
+    aria-label="pagination"
+  >
+    {% if page > 1 %}
+      <a
+        class="join-item btn"
+        hx-get="{{ hx_url }}?page={{ page - 1 }}"
+        hx-target="{{ hx_target }}"
+      >Previous</a>
+    {% else %}
+      <a class="join-item btn btn-disabled" aria-disabled="true">Previous</a>
+    {% endif %}
+    {% for p in range(1, total_pages + 1) %}
+      <a
+        class="join-item btn{% if p == page %} btn-active{% endif %}"
+        {% if p != page %} hx-get="{{ hx_url }}?page={{ p }}" hx-target="{{ hx_target }}" {% endif %}
+        aria-label="Page {{ p }}"
+        {% if p == page %}aria-current="page"{% endif %}
+      >{{ p }}</a>
+    {% endfor %}
+    {% if page < total_pages %}
+      <a
+        class="join-item btn"
+        hx-get="{{ hx_url }}?page={{ page + 1 }}"
+        hx-target="{{ hx_target }}"
+      >Next</a>
+    {% else %}
+      <a class="join-item btn btn-disabled" aria-disabled="true">Next</a>
+    {% endif %}
+  </nav>
 {% endautoescape %}
diff --git a/src/cf_ui/templates/jinja/daisy/Panel.jinja b/src/cf_ui/templates/jinja/daisy/Panel.jinja
index 7eed5f4..2eb49fc 100644
--- a/src/cf_ui/templates/jinja/daisy/Panel.jinja
+++ b/src/cf_ui/templates/jinja/daisy/Panel.jinja
@@ -1,28 +1,35 @@
 {#def title, id="panel", content="", open=false, extra_class="" #}
 {% autoescape true %}
-{% set content = content if content is defined else "" %}
-{% set id = id if id is defined else "panel" %}
-{% set open = open if open is defined else false %}
-{% set extra_class = extra_class if extra_class is defined else "" %}
-<div class="card bg-base-100 shadow-xl {{ extra_class }}"
-     x-data="cfPanel"
-     x-init="initPanel()"
-     data-cf-open="{% if open %}true{% else %}false{% endif %}">
-  <button type="button"
-          class="btn btn-ghost justify-between w-full"
-          aria-controls="{{ id }}-body"
-          aria-expanded="{% if open %}true{% else %}false{% endif %}"
-          :aria-expanded="open"
-          @click="toggle()">
-    <span class="card-title text-base">{{ title }}</span>
-    <span :style="open ? 'transform:rotate(90deg)' : 'transform:rotate(0deg)'"
-          style="display:inline-block;transition:transform 200ms">&#9654;</span>
-  </button>
-  <div id="{{ id }}-body"
-       class="card-body pt-0"
-       x-show="open"
-       {% if not open %}x-cloak{% endif %}>
-    {{ content }}
+  {% set content = content if content is defined else "" %}
+  {% set id = id if id is defined else "panel" %}
+  {% set open = open if open is defined else false %}
+  {% set extra_class = extra_class if extra_class is defined else "" %}
+  <div
+    class="card bg-base-100 shadow-xl {{ extra_class }}"
+    x-data="cfPanel"
+    x-init="initPanel()"
+    data-cf-open="{% if open %}true{% else %}false{% endif %}"
+  >
+    <button
+      type="button"
+      class="btn btn-ghost justify-between w-full"
+      aria-controls="{{ id }}-body"
+      aria-expanded="{% if open %}true{% else %}false{% endif %}"
+      :aria-expanded="open"
+      @click="toggle()"
+    >
+      <span class="card-title text-base">{{ title }}</span>
+      <span
+        :style="open ? 'transform:rotate(90deg)' : 'transform:rotate(0deg)'"
+        style="display:inline-block;
+               transition:transform 200ms"
+      >&#9654;</span>
+    </button>
+    <div
+      id="{{ id }}-body"
+      class="card-body pt-0"
+      x-show="open"
+      {% if not open %}x-cloak{% endif %}
+    >{{ content }}</div>
   </div>
-</div>
 {% endautoescape %}
diff --git a/src/cf_ui/templates/jinja/daisy/Progress.jinja b/src/cf_ui/templates/jinja/daisy/Progress.jinja
index 746f94d..1cce8a9 100644
--- a/src/cf_ui/templates/jinja/daisy/Progress.jinja
+++ b/src/cf_ui/templates/jinja/daisy/Progress.jinja
@@ -1,14 +1,16 @@
 {#def value=0, max=100, type="primary", label="", extra_class="" #}
 {% autoescape true %}
-{% set value = value if value is defined else 0 %}
-{% set max = max if max is defined else 100 %}
-{% set type = type if type is defined else "primary" %}
-{% set label = label if label is defined else "" %}
-{% set extra_class = extra_class if extra_class is defined else "" %}
-<div class="{{ extra_class }}">
-  {% if label %}<p class="text-center mb-1">{{ label }}</p>{% endif %}
-  <progress class="progress {% if type == 'danger' or type == 'error' %}progress-error{% elif type == 'success' %}progress-success{% elif type == 'warning' %}progress-warning{% elif type == 'info' %}progress-info{% else %}progress-primary{% endif %} w-full"
-            value="{{ value }}"
-            max="{{ max }}">{{ value }}%</progress>
-</div>
+  {% set value = value if value is defined else 0 %}
+  {% set max = max if max is defined else 100 %}
+  {% set type = type if type is defined else "primary" %}
+  {% set label = label if label is defined else "" %}
+  {% set extra_class = extra_class if extra_class is defined else "" %}
+  <div class="{{ extra_class }}">
+    {% if label %}<p class="text-center mb-1">{{ label }}</p>{% endif %}
+    <progress
+      class="progress {% if type == 'danger' or type == 'error' %}progress-error{% elif type == 'success' %}progress-success{% elif type == 'warning' %}progress-warning{% elif type == 'info' %}progress-info{% else %}progress-primary{% endif %} w-full"
+      value="{{ value }}"
+      max="{{ max }}"
+    >{{ value }}%</progress>
+  </div>
 {% endautoescape %}
diff --git a/src/cf_ui/templates/jinja/daisy/Select.jinja b/src/cf_ui/templates/jinja/daisy/Select.jinja
index a6774be..c2bb88f 100644
--- a/src/cf_ui/templates/jinja/daisy/Select.jinja
+++ b/src/cf_ui/templates/jinja/daisy/Select.jinja
@@ -1,21 +1,24 @@
 {#def name, label, value="", error="", options=[], extra_class="", input_class="" #}
 {% autoescape true %}
-{% set value = value if value is defined else "" %}
-{% set error = error if error is defined else "" %}
-{% set options = options if options is defined else [] %}
-{% set extra_class = extra_class if extra_class is defined else "" %}
-{% set input_class = input_class if input_class is defined else "" %}
-<div class="form-control {{ extra_class }}">
-  <label class="label" for="{{ name }}"><span class="label-text">{{ label }}</span></label>
-  <select class="select select-bordered w-full{% if error %} select-error{% endif %}{% if input_class %} {{ input_class }}{% endif %}"
-          id="{{ name }}"
-          name="{{ name }}">
-    {% for opt in options %}
-    <option value="{{ opt.value }}"{% if opt.value|string == value|string %} selected{% endif %}>
-      {{ opt.label }}
-    </option>
-    {% endfor %}
-  </select>
-  {% if error %}<span class="label-text-alt text-error">{{ error }}</span>{% endif %}
-</div>
+  {% set value = value if value is defined else "" %}
+  {% set error = error if error is defined else "" %}
+  {% set options = options if options is defined else [] %}
+  {% set extra_class = extra_class if extra_class is defined else "" %}
+  {% set input_class = input_class if input_class is defined else "" %}
+  <div class="form-control {{ extra_class }}">
+    <label class="label" for="{{ name }}"><span class="label-text">{{ label }}</span></label>
+    <select
+      class="select select-bordered w-full{% if error %} select-error{% endif %}{% if input_class %} {{ input_class }}{% endif %}"
+      id="{{ name }}"
+      name="{{ name }}"
+    >
+      {% for opt in options %}
+        <option
+          value="{{ opt.value }}"
+          {% if opt.value|string == value|string %} selected{% endif %}
+        >{{ opt.label }}</option>
+      {% endfor %}
+    </select>
+    {% if error %}<span class="label-text-alt text-error">{{ error }}</span>{% endif %}
+  </div>
 {% endautoescape %}
diff --git a/src/cf_ui/templates/jinja/daisy/Table.jinja b/src/cf_ui/templates/jinja/daisy/Table.jinja
index 080039f..b9de0a2 100644
--- a/src/cf_ui/templates/jinja/daisy/Table.jinja
+++ b/src/cf_ui/templates/jinja/daisy/Table.jinja
@@ -1,26 +1,26 @@
 {#def columns=[], rows=[], hx_target="", hx_url="", extra_class="" #}
 {% autoescape true %}
-{% set columns = columns if columns is defined else [] %}
-{% set rows = rows if rows is defined else [] %}
-{% set extra_class = extra_class if extra_class is defined else "" %}
-<div class="overflow-x-auto {{ extra_class }}">
-  <table class="table table-zebra w-full">
-    <thead>
-      <tr>
-        {% for col in columns %}
-        <th>{{ col.label }}</th>
+  {% set columns = columns if columns is defined else [] %}
+  {% set rows = rows if rows is defined else [] %}
+  {% set extra_class = extra_class if extra_class is defined else "" %}
+  <div class="overflow-x-auto {{ extra_class }}">
+    <table class="table table-zebra w-full">
+      <thead>
+        <tr>
+          {% for col in columns %}
+            <th>{{ col.label }}</th>
+          {% endfor %}
+        </tr>
+      </thead>
+      <tbody>
+        {% for row in rows %}
+          <tr>
+            {% for col in columns %}
+              <td>{{ row[col.key] }}</td>
+            {% endfor %}
+          </tr>
         {% endfor %}
-      </tr>
-    </thead>
-    <tbody>
-      {% for row in rows %}
-      <tr>
-        {% for col in columns %}
-        <td>{{ row[col.key] }}</td>
-        {% endfor %}
-      </tr>
-      {% endfor %}
-    </tbody>
-  </table>
-</div>
+      </tbody>
+    </table>
+  </div>
 {% endautoescape %}
diff --git a/src/cf_ui/templates/jinja/daisy/Tabs.jinja b/src/cf_ui/templates/jinja/daisy/Tabs.jinja
index 6fc15f0..65ff688 100644
--- a/src/cf_ui/templates/jinja/daisy/Tabs.jinja
+++ b/src/cf_ui/templates/jinja/daisy/Tabs.jinja
@@ -1,30 +1,38 @@
 {#def tabs=[], hx_target="tab-content", active="", content="", extra_class="" #}
 {% autoescape true %}
-{% set tabs = tabs if tabs is defined else [] %}
-{% set content = content if content is defined else "" %}
-{% set active = active if active is defined else "" %}
-{% set hx_target = hx_target if hx_target is defined else "tab-content" %}
-{% set extra_class = extra_class if extra_class is defined else "" %}
-<div class="{{ extra_class }}"
-     x-data="cfTabs"
-     x-init="initTabs()"
-     data-cf-active="{{ active }}">
-  <div role="tablist" class="tabs tabs-bordered" @keydown="onKeydown($event)">
-    {% for tab in tabs %}
-    <a role="tab"
-       data-cf-tab="{{ tab.id }}"
-       class="tab {% if tab.id == active %}tab-active{% endif %}"
-       aria-controls="{{ hx_target }}"
-       aria-selected="{% if tab.id == active %}true{% else %}false{% endif %}"
-       tabindex="{% if tab.id == active or (not active and loop.first) %}0{% else %}-1{% endif %}"
-       :class="{ 'tab-active': active === $el.dataset.cfTab }"
-       :aria-selected="active === $el.dataset.cfTab"
-       :tabindex="tabIndexFor($el.dataset.cfTab)"
-       @click.prevent="setActive($el.dataset.cfTab)"
-       hx-get="{{ tab.url }}"
-       hx-target="#{{ hx_target }}">{{ tab.id }}</a>
-    {% endfor %}
+  {% set tabs = tabs if tabs is defined else [] %}
+  {% set content = content if content is defined else "" %}
+  {% set active = active if active is defined else "" %}
+  {% set hx_target = hx_target if hx_target is defined else "tab-content" %}
+  {% set extra_class = extra_class if extra_class is defined else "" %}
+  <div
+    class="{{ extra_class }}"
+    x-data="cfTabs"
+    x-init="initTabs()"
+    data-cf-active="{{ active }}"
+  >
+    <div
+      role="tablist"
+      class="tabs tabs-bordered"
+      @keydown="onKeydown($event)"
+    >
+      {% for tab in tabs %}
+        <a
+          role="tab"
+          data-cf-tab="{{ tab.id }}"
+          class="tab {% if tab.id == active %}tab-active{% endif %}"
+          aria-controls="{{ hx_target }}"
+          aria-selected="{% if tab.id == active %}true{% else %}false{% endif %}"
+          tabindex="{% if tab.id == active or (not active and loop.first) %}0{% else %}-1{% endif %}"
+          :class="{ 'tab-active': active === $el.dataset.cfTab }"
+          :aria-selected="active === $el.dataset.cfTab"
+          :tabindex="tabIndexFor($el.dataset.cfTab)"
+          @click.prevent="setActive($el.dataset.cfTab)"
+          hx-get="{{ tab.url }}"
+          hx-target="#{{ hx_target }}"
+        >{{ tab.id }}</a>
+      {% endfor %}
+    </div>
+    <div id="{{ hx_target }}" role="tabpanel">{{ content }}</div>
   </div>
-  <div id="{{ hx_target }}" role="tabpanel">{{ content }}</div>
-</div>
 {% endautoescape %}
diff --git a/src/cf_ui/templates/jinja/daisy/Textarea.jinja b/src/cf_ui/templates/jinja/daisy/Textarea.jinja
index 615cce9..5ca6fbe 100644
--- a/src/cf_ui/templates/jinja/daisy/Textarea.jinja
+++ b/src/cf_ui/templates/jinja/daisy/Textarea.jinja
@@ -1,16 +1,18 @@
 {#def name, label, value="", error="", rows=4, extra_class="", input_class="" #}
 {% autoescape true %}
-{% set value = value if value is defined else "" %}
-{% set error = error if error is defined else "" %}
-{% set rows = rows if rows is defined else 4 %}
-{% set extra_class = extra_class if extra_class is defined else "" %}
-{% set input_class = input_class if input_class is defined else "" %}
-<div class="form-control {{ extra_class }}">
-  <label class="label" for="{{ name }}"><span class="label-text">{{ label }}</span></label>
-  <textarea class="textarea textarea-bordered w-full{% if error %} textarea-error{% endif %}{% if input_class %} {{ input_class }}{% endif %}"
-            id="{{ name }}"
-            name="{{ name }}"
-            rows="{{ rows }}">{{ value }}</textarea>
-  {% if error %}<span class="label-text-alt text-error">{{ error }}</span>{% endif %}
-</div>
+  {% set value = value if value is defined else "" %}
+  {% set error = error if error is defined else "" %}
+  {% set rows = rows if rows is defined else 4 %}
+  {% set extra_class = extra_class if extra_class is defined else "" %}
+  {% set input_class = input_class if input_class is defined else "" %}
+  <div class="form-control {{ extra_class }}">
+    <label class="label" for="{{ name }}"><span class="label-text">{{ label }}</span></label>
+    <textarea
+      class="textarea textarea-bordered w-full{% if error %} textarea-error{% endif %}{% if input_class %} {{ input_class }}{% endif %}"
+      id="{{ name }}"
+      name="{{ name }}"
+      rows="{{ rows }}"
+    >{{ value }}</textarea>
+    {% if error %}<span class="label-text-alt text-error">{{ error }}</span>{% endif %}
+  </div>
 {% endautoescape %}
diff --git a/src/cf_ui/templates/jinja/fomantic/Badge.jinja b/src/cf_ui/templates/jinja/fomantic/Badge.jinja
new file mode 100644
index 0000000..fe8b1b3
--- /dev/null
+++ b/src/cf_ui/templates/jinja/fomantic/Badge.jinja
@@ -0,0 +1,11 @@
+{#def content="", variant="neutral", size="normal", extra_class="" #}
+{% autoescape true %}
+  {% set content = content if content is defined else "" %}
+  {% set variant = variant if variant is defined else "neutral" %}
+  {% set size = size if size is defined else "normal" %}
+  {% set extra_class = extra_class if extra_class is defined else "" %}
+  {{- cf_ui_validate("badge", variant=variant, size=size) -}}
+  <span
+    class="ui label{% if variant == 'primary' %} primary{% elif variant == 'secondary' %} secondary{% elif variant == 'success' %} green{% elif variant == 'warning' %} yellow{% elif variant == 'danger' %} red{% elif variant == 'info' %} teal{% endif %}{% if size == 'small' %} small{% elif size == 'large' %} large{% endif %}{% if extra_class %} {{ extra_class }}{% endif %}"
+  >{{ content }}</span>
+{% endautoescape %}
diff --git a/src/cf_ui/templates/jinja/fomantic/Breadcrumb.jinja b/src/cf_ui/templates/jinja/fomantic/Breadcrumb.jinja
index 8aba902..fdf6856 100644
--- a/src/cf_ui/templates/jinja/fomantic/Breadcrumb.jinja
+++ b/src/cf_ui/templates/jinja/fomantic/Breadcrumb.jinja
@@ -1,15 +1,15 @@
 {#def items=[], extra_class="" #}
 {% autoescape true %}
-{% set items = items if items is defined else [] %}
-{% set extra_class = extra_class if extra_class is defined else "" %}
-<nav class="ui breadcrumb {{ extra_class }}" aria-label="breadcrumbs">
-  {% for item in items %}
-  {% if not loop.first %}<span class="divider">/</span>{% endif %}
-  {% if loop.last %}
-  <a class="active section" href="{{ item.url }}" aria-current="page">{{ item.label }}</a>
-  {% else %}
-  <a class="section" href="{{ item.url }}">{{ item.label }}</a>
-  {% endif %}
-  {% endfor %}
-</nav>
+  {% set items = items if items is defined else [] %}
+  {% set extra_class = extra_class if extra_class is defined else "" %}
+  <nav class="ui breadcrumb {{ extra_class }}" aria-label="breadcrumbs">
+    {% for item in items %}
+      {% if not loop.first %}<span class="divider">/</span>{% endif %}
+      {% if loop.last %}
+        <a class="active section" href="{{ item.url }}" aria-current="page">{{ item.label }}</a>
+      {% else %}
+        <a class="section" href="{{ item.url }}">{{ item.label }}</a>
+      {% endif %}
+    {% endfor %}
+  </nav>
 {% endautoescape %}
diff --git a/src/cf_ui/templates/jinja/fomantic/Button.jinja b/src/cf_ui/templates/jinja/fomantic/Button.jinja
new file mode 100644
index 0000000..072d0fb
--- /dev/null
+++ b/src/cf_ui/templates/jinja/fomantic/Button.jinja
@@ -0,0 +1,16 @@
+{#def content="", variant="neutral", size="normal", state="normal", href="", type="button", full_width=false, extra_class="" #}
+{% autoescape true %}
+  {% set content = content if content is defined else "" %}
+  {% set variant = variant if variant is defined else "neutral" %}
+  {% set size = size if size is defined else "normal" %}
+  {% set state = state if state is defined else "normal" %}
+  {% set href = href if href is defined else "" %}
+  {% set type = type if type is defined else "button" %}
+  {% set full_width = full_width if full_width is defined else false %}
+  {% set extra_class = extra_class if extra_class is defined else "" %}
+  {{ cf_ui_validate("button", variant=variant, size=size, state=state, type=type) }}
+  {%- set cf_tag = "a" if href else "button" -%}
+  <{{ cf_tag }} class="ui button{% if variant == 'primary' %} primary{% elif variant == 'secondary' %} secondary{% elif variant == 'success' %} positive{% elif variant == 'warning' %} yellow{% elif variant == 'danger' %} negative{% elif variant == 'info' %} teal{% endif %}{% if size == 'small' %} small{% elif size == 'large' %} large{% endif %}{% if state == 'loading' %} loading{% elif state == 'disabled' %} disabled{% endif %}{% if full_width %} fluid{% endif %}{% if extra_class %} {{ extra_class }}{% endif %}"
+  {%- if href %}{% if state == 'disabled' %} role="link" aria-disabled="true"{% else %} href="{{ href }}"{% endif %}
+{%- else %} type="{{ type }}"{% if state == 'disabled' %} disabled{% endif %}{% endif %}>{{ content }}</{{ cf_tag }}>
+{% endautoescape %}
diff --git a/src/cf_ui/templates/jinja/fomantic/Card.jinja b/src/cf_ui/templates/jinja/fomantic/Card.jinja
index ac5a414..7d9e63b 100644
--- a/src/cf_ui/templates/jinja/fomantic/Card.jinja
+++ b/src/cf_ui/templates/jinja/fomantic/Card.jinja
@@ -1,16 +1,16 @@
 {#def content="", header="", footer="", extra_class="" #}
 {% autoescape true %}
-{% set header = header if header is defined else "" %}
-{% set content = content if content is defined else "" %}
-{% set footer = footer if footer is defined else "" %}
-{% set extra_class = extra_class if extra_class is defined else "" %}
-<div class="ui card {{ extra_class }}">
-  <div class="content">
-    {% if header %}<div class="header">{{ header }}</div>{% endif %}
-    <div class="description">{{ content }}</div>
+  {% set header = header if header is defined else "" %}
+  {% set content = content if content is defined else "" %}
+  {% set footer = footer if footer is defined else "" %}
+  {% set extra_class = extra_class if extra_class is defined else "" %}
+  <div class="ui card {{ extra_class }}">
+    <div class="content">
+      {% if header %}<div class="header">{{ header }}</div>{% endif %}
+      <div class="description">{{ content }}</div>
+    </div>
+    {% if footer %}
+      <div class="extra content">{{ footer }}</div>
+    {% endif %}
   </div>
-  {% if footer %}
-  <div class="extra content">{{ footer }}</div>
-  {% endif %}
-</div>
 {% endautoescape %}
diff --git a/src/cf_ui/templates/jinja/fomantic/CheckboxGroup.jinja b/src/cf_ui/templates/jinja/fomantic/CheckboxGroup.jinja
index 4ff673d..7b46f50 100644
--- a/src/cf_ui/templates/jinja/fomantic/CheckboxGroup.jinja
+++ b/src/cf_ui/templates/jinja/fomantic/CheckboxGroup.jinja
@@ -1,30 +1,34 @@
 {#def name, label, choices=[], selected=[], error="", extra_class="", control_class="" #}
 {% autoescape true %}
-{% set choices = choices if choices is defined else [] %}
-{% set selected = selected if selected is defined else [] %}
-{% set error = error if error is defined else "" %}
-{% set extra_class = extra_class if extra_class is defined else "" %}
-{% set control_class = control_class if control_class is defined else "" %}
-<div class="ui form {{ extra_class }}">
-  <div class="grouped fields{% if control_class %} {{ control_class }}{% endif %}{% if error %} error{% endif %}">
-    <label>{{ label }}</label>
-    {% for choice in choices %}
-    <div class="field">
-      {# Fomantic's CSS-only checkbox works because the real input is stretched
+  {% set choices = choices if choices is defined else [] %}
+  {% set selected = selected if selected is defined else [] %}
+  {% set error = error if error is defined else "" %}
+  {% set extra_class = extra_class if extra_class is defined else "" %}
+  {% set control_class = control_class if control_class is defined else "" %}
+  <div class="ui form {{ extra_class }}">
+    <div
+      class="grouped fields{% if control_class %} {{ control_class }}{% endif %}{% if error %} error{% endif %}"
+    >
+      <label>{{ label }}</label>
+      {% for choice in choices %}
+        <div class="field">
+          {# Fomantic's CSS-only checkbox works because the real input is stretched
          invisibly over the box, so a click anywhere hits it. That is a mouse
          affordance, not an accessible name — the label is wired up with
          for/id so a screen reader announces it too. #}
-      <div class="ui checkbox">
-        <input type="checkbox"
-               id="{{ name }}-{{ loop.index }}"
-               name="{{ name }}"
-               value="{{ choice.value }}"
-               {% if choice.value in selected %}checked{% endif %}>
-        <label for="{{ name }}-{{ loop.index }}">{{ choice.label }}</label>
-      </div>
+          <div class="ui checkbox">
+            <input
+              type="checkbox"
+              id="{{ name }}-{{ loop.index }}"
+              name="{{ name }}"
+              value="{{ choice.value }}"
+              {% if choice.value in selected %}checked{% endif %}
+            >
+            <label for="{{ name }}-{{ loop.index }}">{{ choice.label }}</label>
+          </div>
+        </div>
+      {% endfor %}
+      {% if error %}<div class="ui basic red pointing prompt label">{{ error }}</div>{% endif %}
     </div>
-    {% endfor %}
-    {% if error %}<div class="ui basic red pointing prompt label">{{ error }}</div>{% endif %}
   </div>
-</div>
 {% endautoescape %}
diff --git a/src/cf_ui/templates/jinja/fomantic/FormField.jinja b/src/cf_ui/templates/jinja/fomantic/FormField.jinja
index ac233aa..750a89d 100644
--- a/src/cf_ui/templates/jinja/fomantic/FormField.jinja
+++ b/src/cf_ui/templates/jinja/fomantic/FormField.jinja
@@ -1,29 +1,34 @@
 {#def name, label, value="", error="", type="text", required=false, extra_class="", input_class="" #}
 {% autoescape true %}
-{% set value = value if value is defined else "" %}
-{% set error = error if error is defined else "" %}
-{% set type = type if type is defined else "text" %}
-{% set required = required if required is defined else false %}
-{% set extra_class = extra_class if extra_class is defined else "" %}
-{% set input_class = input_class if input_class is defined else "" %}
-{# Every Fomantic form rule is scoped `.ui.form .field`, so a standalone field
+  {% set value = value if value is defined else "" %}
+  {% set error = error if error is defined else "" %}
+  {% set type = type if type is defined else "text" %}
+  {% set required = required if required is defined else false %}
+  {% set extra_class = extra_class if extra_class is defined else "" %}
+  {% set input_class = input_class if input_class is defined else "" %}
+  {# Every Fomantic form rule is scoped `.ui.form .field`, so a standalone field
    with no `.ui.form` ancestor is unstyled. The component carries its own,
    which nests harmlessly inside a consumer's `<form class="ui form">`.
    `input_class` lands on the `.ui.input` wrapper because that is where
    Fomantic's size and state modifiers live (`ui mini input`, `ui icon input`). #}
-<div class="ui form {{ extra_class }}">
-  <div class="field{% if error %} error{% endif %}">
-    <label for="{{ name }}">{{ label }}</label>
-    <div class="ui fluid input{% if input_class %} {{ input_class }}{% endif %}">
-      <input id="{{ name }}"
-             type="{{ type }}"
-             name="{{ name }}"
-             value="{{ value }}"{% if required %} required{% endif %}>
-    </div>
-    {# Not `<div class="ui error message">`: `.ui.form .error.message` is
+  <div class="ui form {{ extra_class }}">
+    <div class="field{% if error %} error{% endif %}">
+      <label for="{{ name }}">{{ label }}</label>
+      <div
+        class="ui fluid input{% if input_class %} {{ input_class }}{% endif %}"
+      >
+        <input
+          id="{{ name }}"
+          type="{{ type }}"
+          name="{{ name }}"
+          value="{{ value }}"
+          {% if required %} required{% endif %}
+        >
+      </div>
+      {# Not `<div class="ui error message">`: `.ui.form .error.message` is
        display:none until the *form* itself carries `.error`. The prompt label
        is what Fomantic actually shows for a single field. #}
-    {% if error %}<div class="ui basic red pointing prompt label">{{ error }}</div>{% endif %}
+      {% if error %}<div class="ui basic red pointing prompt label">{{ error }}</div>{% endif %}
+    </div>
   </div>
-</div>
 {% endautoescape %}
diff --git a/src/cf_ui/templates/jinja/fomantic/Heading.jinja b/src/cf_ui/templates/jinja/fomantic/Heading.jinja
new file mode 100644
index 0000000..6932838
--- /dev/null
+++ b/src/cf_ui/templates/jinja/fomantic/Heading.jinja
@@ -0,0 +1,24 @@
+{#def content="", level="2", size="normal", emphasis="normal", extra_class="" #}
+{% autoescape true %}
+  {% set content = content if content is defined else "" %}
+  {% set level = level if level is defined else "2" %}
+  {% set size = size if size is defined else "normal" %}
+  {% set emphasis = emphasis if emphasis is defined else "normal" %}
+  {% set extra_class = extra_class if extra_class is defined else "" %}
+  {{ cf_ui_validate("heading", level=level, size=size, emphasis=emphasis) }}
+  {# `emphasis="subtle"` is `grey`, not Fomantic's own `sub` header, and that is
+   deliberate. `.ui.sub.header` sets `font-size: .85714286em` and is defined
+   *after* every size variation (`.ui.small.header` … `.ui.massive.header`) at
+   identical specificity (0,3,0), so source order hands it the cascade and the
+   `size` axis silently stops doing anything — an h2 carrying `ui header
+   massive sub` renders at .857em, the same as a tiny one. `.ui.grey.header`
+   only sets `color`, so emphasis and size stay independent, which is the whole
+   point of this component.
+
+   `size` also has no `medium` step to map `normal` onto: Fomantic ships mini,
+   tiny, small, large, big, huge and massive, with nothing between small and
+   large. Emitting no size class would fall back to the *tag's* size and
+   re-couple size to level, so `normal` takes `large` (1.71em) — the token
+   reads oddly, the rendered size does not. #}
+  <h{{ level }} class="ui header{% if size == 'small' %} small{% elif size == 'normal' %} large{% elif size == 'large' %} massive{% endif %}{% if emphasis == 'subtle' %} grey{% endif %}{% if extra_class %} {{ extra_class }}{% endif %}">{{ content }}</h{{ level }}>
+{% endautoescape %}
diff --git a/src/cf_ui/templates/jinja/fomantic/Icon.jinja b/src/cf_ui/templates/jinja/fomantic/Icon.jinja
new file mode 100644
index 0000000..8378df0
--- /dev/null
+++ b/src/cf_ui/templates/jinja/fomantic/Icon.jinja
@@ -0,0 +1,12 @@
+{#def content="", size="normal", label="", extra_class="" #}
+{% autoescape true %}
+  {% set content = content if content is defined else "" %}
+  {% set size = size if size is defined else "normal" %}
+  {% set label = label if label is defined else "" %}
+  {% set extra_class = extra_class if extra_class is defined else "" %}
+  {{ cf_ui_validate("icon", size=size) }}
+  <span
+    class="ui text{% if size == 'small' %} small{% elif size == 'large' %} large{% endif %}{% if extra_class %} {{ extra_class }}{% endif %}"
+    {%- if label %} role="img" aria-label="{{ label }}"{% else %} aria-hidden="true"{% endif %}
+  >{{ content }}</span>
+{% endautoescape %}
diff --git a/src/cf_ui/templates/jinja/fomantic/Label.jinja b/src/cf_ui/templates/jinja/fomantic/Label.jinja
new file mode 100644
index 0000000..dabdb41
--- /dev/null
+++ b/src/cf_ui/templates/jinja/fomantic/Label.jinja
@@ -0,0 +1,26 @@
+{#def content="", size="normal", for_id="", required=false, extra_class="" #}
+{% autoescape true %}
+  {% set content = content if content is defined else "" %}
+  {% set size = size if size is defined else "normal" %}
+  {% set for_id = for_id if for_id is defined else "" %}
+  {% set required = required if required is defined else false %}
+  {% set extra_class = extra_class if extra_class is defined else "" %}
+  {{ cf_ui_validate("label", size=size) }}
+  {# The label itself carries no base class: Fomantic's only rule for it is
+   `.ui.form .field > label`, so the styling comes from the ancestry, not from
+   a class. `.ui.label` is the *badge* element and would render a grey pill.
+
+   Hence the two wrappers, exactly as `FormField.jinja` carries them — a bare
+   `<label>` outside `.ui.form .field` is completely unstyled, and the pair
+   nests harmlessly inside a consumer's own `<form class="ui form">`.
+
+   Size therefore lands on the form, not the label: `.ui.small.form` and
+   `.ui.large.form` set the root font-size and `.field > label` is sized in
+   `em`, so it scales with them. #}
+  <div
+    class="ui{% if size == 'small' %} small{% elif size == 'large' %} large{% endif %} form"
+  ><div class="field"><label
+  class="{{ extra_class }}"
+  {% if for_id %} for="{{ for_id }}"{% endif %}
+>{{ content }}{% if required %} <span class="ui red text" role="img" aria-label="required">*</span>{% endif %}</label></div></div>
+{% endautoescape %}
diff --git a/src/cf_ui/templates/jinja/fomantic/Modal.jinja b/src/cf_ui/templates/jinja/fomantic/Modal.jinja
index 17cec3d..016c323 100644
--- a/src/cf_ui/templates/jinja/fomantic/Modal.jinja
+++ b/src/cf_ui/templates/jinja/fomantic/Modal.jinja
@@ -1,32 +1,34 @@
 {#def id="modal", header="", content="", footer="", label="Dialog", extra_class="" #}
 {% autoescape true %}
-{% set id = id if id is defined else "modal" %}
-{% set header = header if header is defined else "" %}
-{% set content = content if content is defined else "" %}
-{% set footer = footer if footer is defined else "" %}
-{% set label = label if label is defined and label else "Dialog" %}
-{% set extra_class = extra_class if extra_class is defined else "" %}
-{# Fomantic's modal is normally positioned and revealed by
+  {% set id = id if id is defined else "modal" %}
+  {% set header = header if header is defined else "" %}
+  {% set content = content if content is defined else "" %}
+  {% set footer = footer if footer is defined else "" %}
+  {% set label = label if label is defined and label else "Dialog" %}
+  {% set extra_class = extra_class if extra_class is defined else "" %}
+  {# Fomantic's modal is normally positioned and revealed by
    `$('.ui.modal').modal('show')`, which also injects the `.ui.dimmer` wrapper.
    cf-ui loads no Fomantic JS, so the dimmer is part of the markup and both
    `.ui.dimmer` and `.ui.modal` — each `display:none` until `.active` — get the
    class from the same Alpine `open`. #}
-<div id="{{ id }}"
-     class="ui page dimmer {{ extra_class }}"
-     role="dialog"
-     aria-modal="true"
-     {% if header %}aria-labelledby="{{ id }}-title"{% else %}aria-label="{{ label }}"{% endif %}
-     x-data="cfModal"
-     x-init="initModal()"
-     :class="{ 'active': open }"
-     @click.self="close()">
-  <div class="ui modal" :class="{ 'active': open }">
-    <button type="button" class="close" aria-label="close" @click="close()">&times;</button>
-    {% if header %}<div class="header" id="{{ id }}-title">{{ header }}</div>{% endif %}
-    <div class="content">{{ content }}</div>
-    {% if footer %}
-    <div class="actions">{{ footer }}</div>
-    {% endif %}
+  <div
+    id="{{ id }}"
+    class="ui page dimmer {{ extra_class }}"
+    role="dialog"
+    aria-modal="true"
+    {% if header %}aria-labelledby="{{ id }}-title"{% else %}aria-label="{{ label }}"{% endif %}
+    x-data="cfModal"
+    x-init="initModal()"
+    :class="{ 'active': open }"
+    @click.self="close()"
+  >
+    <div class="ui modal" :class="{ 'active': open }">
+      <button type="button" class="close" aria-label="close" @click="close()">&times;</button>
+      {% if header %}<div class="header" id="{{ id }}-title">{{ header }}</div>{% endif %}
+      <div class="content">{{ content }}</div>
+      {% if footer %}
+        <div class="actions">{{ footer }}</div>
+      {% endif %}
+    </div>
   </div>
-</div>
 {% endautoescape %}
diff --git a/src/cf_ui/templates/jinja/fomantic/Navbar.jinja b/src/cf_ui/templates/jinja/fomantic/Navbar.jinja
index ae16fd7..177b0e0 100644
--- a/src/cf_ui/templates/jinja/fomantic/Navbar.jinja
+++ b/src/cf_ui/templates/jinja/fomantic/Navbar.jinja
@@ -1,30 +1,34 @@
 {#def brand="", start="", end="", extra_class="" #}
 {% autoescape true %}
-{% set brand = brand if brand is defined else "" %}
-{% set start = start if start is defined else "" %}
-{% set end = end if end is defined else "" %}
-{% set extra_class = extra_class if extra_class is defined else "" %}
-{# Fomantic's responsive nav collapse is its Sidebar/Dropdown *JS* module, which
+  {% set brand = brand if brand is defined else "" %}
+  {% set start = start if start is defined else "" %}
+  {% set end = end if end is defined else "" %}
+  {% set extra_class = extra_class if extra_class is defined else "" %}
+  {# Fomantic's responsive nav collapse is its Sidebar/Dropdown *JS* module, which
    cf-ui does not load. `ui stackable menu` is Fomantic's CSS-only equivalent:
    below 768px the menu becomes a full-width column, so nothing is hidden that a
    burger would have to reveal. The toggle is kept because `cfNavbar` is the
    cross-theme contract — it reports its state through `aria-expanded` and
    Fomantic's `active` item class rather than through a display utility that
    this framework does not ship. #}
-<nav class="ui stackable menu {{ extra_class }}"
-     role="navigation"
-     aria-label="main navigation"
-     x-data="cfNavbar">
-  <div class="header item">{{ brand }}</div>
-  <button type="button"
-          class="item"
-          aria-label="menu"
-          :aria-expanded="menuOpen"
-          :class="{ 'active': menuOpen }"
-          @click="toggle()">&#9776;</button>
-  <div class="item">{{ start }}</div>
-  <div class="right menu">
-    <div class="item">{{ end }}</div>
-  </div>
-</nav>
+  <nav
+    class="ui stackable menu {{ extra_class }}"
+    role="navigation"
+    aria-label="main navigation"
+    x-data="cfNavbar"
+  >
+    <div class="header item">{{ brand }}</div>
+    <button
+      type="button"
+      class="item"
+      aria-label="menu"
+      :aria-expanded="menuOpen"
+      :class="{ 'active': menuOpen }"
+      @click="toggle()"
+    >&#9776;</button>
+    <div class="item">{{ start }}</div>
+    <div class="right menu">
+      <div class="item">{{ end }}</div>
+    </div>
+  </nav>
 {% endautoescape %}
diff --git a/src/cf_ui/templates/jinja/fomantic/Notification.jinja b/src/cf_ui/templates/jinja/fomantic/Notification.jinja
index fd2e5be..ceebb59 100644
--- a/src/cf_ui/templates/jinja/fomantic/Notification.jinja
+++ b/src/cf_ui/templates/jinja/fomantic/Notification.jinja
@@ -1,18 +1,25 @@
 {#def message, type="info", dismissible=true, extra_class="" #}
 {% autoescape true %}
-{% set type = type if type is defined else "info" %}
-{% set dismissible = dismissible if dismissible is defined else true %}
-{% set extra_class = extra_class if extra_class is defined else "" %}
-<div role="alert"
-     class="ui {% if type == 'danger' or type == 'error' %}negative{% elif type == 'success' %}positive{% elif type == 'warning' %}warning{% else %}info{% endif %} message {{ extra_class }}"
-     x-data="{ visible: true }"
-     x-show="visible">
-  {% if dismissible %}
-  {# `.ui.message > .close.icon` positions this; the glyph rules are scoped to
+  {% set type = type if type is defined else "info" %}
+  {% set dismissible = dismissible if dismissible is defined else true %}
+  {% set extra_class = extra_class if extra_class is defined else "" %}
+  <div
+    role="alert"
+    class="ui {% if type == 'danger' or type == 'error' %}negative{% elif type == 'success' %}positive{% elif type == 'warning' %}warning{% else %}info{% endif %} message {{ extra_class }}"
+    x-data="{ visible: true }"
+    x-show="visible"
+  >
+    {% if dismissible %}
+      {# `.ui.message > .close.icon` positions this; the glyph rules are scoped to
      `i.icon`, so a `<button>` keeps the placement and renders its own text —
      which is what makes it a real, focusable control rather than an `<i>`. #}
-  <button type="button" class="close icon" aria-label="dismiss" @click="visible = false">&times;</button>
-  {% endif %}
-  <div class="content">{{ message }}</div>
-</div>
+      <button
+        type="button"
+        class="close icon"
+        aria-label="dismiss"
+        @click="visible = false"
+      >&times;</button>
+    {% endif %}
+    <div class="content">{{ message }}</div>
+  </div>
 {% endautoescape %}
diff --git a/src/cf_ui/templates/jinja/fomantic/Pagination.jinja b/src/cf_ui/templates/jinja/fomantic/Pagination.jinja
index 8da6f4d..43dee68 100644
--- a/src/cf_ui/templates/jinja/fomantic/Pagination.jinja
+++ b/src/cf_ui/templates/jinja/fomantic/Pagination.jinja
@@ -1,35 +1,40 @@
 {#def page=1, total_pages=1, hx_target="", hx_url="", extra_class="" #}
 {% autoescape true %}
-{% set page = page if page is defined else 1 %}
-{% set total_pages = total_pages if total_pages is defined else 1 %}
-{% set hx_target = hx_target if hx_target is defined else "" %}
-{% set hx_url = hx_url if hx_url is defined else "" %}
-{% set extra_class = extra_class if extra_class is defined else "" %}
-<nav class="ui pagination menu {{ extra_class }}" role="navigation" aria-label="pagination">
-  {% if page > 1 %}
-  <a class="item"
-     hx-get="{{ hx_url }}?page={{ page - 1 }}"
-     hx-target="{{ hx_target }}">Previous</a>
-  {% else %}
-  <a class="disabled item" aria-disabled="true">Previous</a>
-  {% endif %}
-
-  {% for p in range(1, total_pages + 1) %}
-  <a class="{% if p == page %}active {% endif %}item"
-     {% if p != page %}
-     hx-get="{{ hx_url }}?page={{ p }}"
-     hx-target="{{ hx_target }}"
-     {% endif %}
-     aria-label="Page {{ p }}"
-     {% if p == page %}aria-current="page"{% endif %}>{{ p }}</a>
-  {% endfor %}
-
-  {% if page < total_pages %}
-  <a class="item"
-     hx-get="{{ hx_url }}?page={{ page + 1 }}"
-     hx-target="{{ hx_target }}">Next</a>
-  {% else %}
-  <a class="disabled item" aria-disabled="true">Next</a>
-  {% endif %}
-</nav>
+  {% set page = page if page is defined else 1 %}
+  {% set total_pages = total_pages if total_pages is defined else 1 %}
+  {% set hx_target = hx_target if hx_target is defined else "" %}
+  {% set hx_url = hx_url if hx_url is defined else "" %}
+  {% set extra_class = extra_class if extra_class is defined else "" %}
+  <nav
+    class="ui pagination menu {{ extra_class }}"
+    role="navigation"
+    aria-label="pagination"
+  >
+    {% if page > 1 %}
+      <a
+        class="item"
+        hx-get="{{ hx_url }}?page={{ page - 1 }}"
+        hx-target="{{ hx_target }}"
+      >Previous</a>
+    {% else %}
+      <a class="disabled item" aria-disabled="true">Previous</a>
+    {% endif %}
+    {% for p in range(1, total_pages + 1) %}
+      <a
+        class="{% if p == page %}active {% endif %}item"
+        {% if p != page %} hx-get="{{ hx_url }}?page={{ p }}" hx-target="{{ hx_target }}" {% endif %}
+        aria-label="Page {{ p }}"
+        {% if p == page %}aria-current="page"{% endif %}
+      >{{ p }}</a>
+    {% endfor %}
+    {% if page < total_pages %}
+      <a
+        class="item"
+        hx-get="{{ hx_url }}?page={{ page + 1 }}"
+        hx-target="{{ hx_target }}"
+      >Next</a>
+    {% else %}
+      <a class="disabled item" aria-disabled="true">Next</a>
+    {% endif %}
+  </nav>
 {% endautoescape %}
diff --git a/src/cf_ui/templates/jinja/fomantic/Panel.jinja b/src/cf_ui/templates/jinja/fomantic/Panel.jinja
index 8ad4404..bbf234e 100644
--- a/src/cf_ui/templates/jinja/fomantic/Panel.jinja
+++ b/src/cf_ui/templates/jinja/fomantic/Panel.jinja
@@ -1,32 +1,36 @@
 {#def title, id="panel", content="", open=false, extra_class="" #}
 {% autoescape true %}
-{% set content = content if content is defined else "" %}
-{% set id = id if id is defined else "panel" %}
-{% set open = open if open is defined else false %}
-{% set extra_class = extra_class if extra_class is defined else "" %}
-{# `.ui.accordion .title ~ .content:not(.active)` is `display:none`, so the open
+  {% set content = content if content is defined else "" %}
+  {% set id = id if id is defined else "panel" %}
+  {% set open = open if open is defined else false %}
+  {% set extra_class = extra_class if extra_class is defined else "" %}
+  {# `.ui.accordion .title ~ .content:not(.active)` is `display:none`, so the open
    state has to be a *class*, not only `x-show`: Alpine dropping its inline
    `display:none` would leave the stylesheet's rule in force. Both are bound so
    the panel is right with Alpine off (class, server-rendered) and with it on. #}
-<div class="ui styled fluid accordion {{ extra_class }}"
-     x-data="cfPanel"
-     x-init="initPanel()"
-     data-cf-open="{% if open %}true{% else %}false{% endif %}">
-  <button type="button"
-          class="title{% if open %} active{% endif %}"
-          :class="{ 'active': open }"
-          aria-controls="{{ id }}-body"
-          aria-expanded="{% if open %}true{% else %}false{% endif %}"
-          :aria-expanded="open"
-          @click="toggle()">
-    <span class="dropdown icon" aria-hidden="true">&#9654;</span>{{ title }}
-  </button>
-  <div id="{{ id }}-body"
-       class="content{% if open %} active{% endif %}"
-       :class="{ 'active': open }"
-       x-show="open"
-       {% if not open %}x-cloak{% endif %}>
-    {{ content }}
+  <div
+    class="ui styled fluid accordion {{ extra_class }}"
+    x-data="cfPanel"
+    x-init="initPanel()"
+    data-cf-open="{% if open %}true{% else %}false{% endif %}"
+  >
+    <button
+      type="button"
+      class="title{% if open %} active{% endif %}"
+      :class="{ 'active': open }"
+      aria-controls="{{ id }}-body"
+      aria-expanded="{% if open %}true{% else %}false{% endif %}"
+      :aria-expanded="open"
+      @click="toggle()"
+    >
+      <span class="dropdown icon" aria-hidden="true">&#9654;</span>{{ title }}
+    </button>
+    <div
+      id="{{ id }}-body"
+      class="content{% if open %} active{% endif %}"
+      :class="{ 'active': open }"
+      x-show="open"
+      {% if not open %}x-cloak{% endif %}
+    >{{ content }}</div>
   </div>
-</div>
 {% endautoescape %}
diff --git a/src/cf_ui/templates/jinja/fomantic/Progress.jinja b/src/cf_ui/templates/jinja/fomantic/Progress.jinja
index 6452328..b73e0e6 100644
--- a/src/cf_ui/templates/jinja/fomantic/Progress.jinja
+++ b/src/cf_ui/templates/jinja/fomantic/Progress.jinja
@@ -1,14 +1,14 @@
 {#def value=0, max=100, type="primary", label="", extra_class="" #}
 {% autoescape true %}
-{% set value = value if value is defined else 0 %}
-{% set max = max if max is defined else 100 %}
-{% set type = type if type is defined else "primary" %}
-{% set label = label if label is defined else "" %}
-{% set extra_class = extra_class if extra_class is defined else "" %}
-{% set cf_max = max|float %}
-{% set cf_raw = ((value|float / cf_max) * 100)|round|int if cf_max > 0 else 0 %}
-{% set cf_pct = [[cf_raw, 0]|max, 100]|min %}
-{# Fomantic's progress is a div whose `.bar` is sized by its Progress module.
+  {% set value = value if value is defined else 0 %}
+  {% set max = max if max is defined else 100 %}
+  {% set type = type if type is defined else "primary" %}
+  {% set label = label if label is defined else "" %}
+  {% set extra_class = extra_class if extra_class is defined else "" %}
+  {% set cf_max = max|float %}
+  {% set cf_raw = ((value|float / cf_max) * 100)|round|int if cf_max > 0 else 0 %}
+  {% set cf_pct = [[cf_raw, 0]|max, 100]|min %}
+  {# Fomantic's progress is a div whose `.bar` is sized by its Progress module.
    With no JS the width is written server-side, and `data-percent` has to be
    present — `.ui.progress:not([data-percent]) .bar` is given a transparent
    background. A div is also not a `<progress>`, so the ARIA is explicit.
@@ -18,18 +18,20 @@
    both painting and the accessibility tree; a plain div would happily take
    `width: 150%` and report `aria-valuenow="150"` against a max of 100. The
    ARIA is stated in percent so it agrees with the visible "40%" text. #}
-<div class="{{ extra_class }}">
-  <div class="ui {% if type == 'danger' or type == 'error' %}error{% elif type == 'success' %}success{% elif type == 'warning' %}warning{% elif type == 'info' %}teal{% else %}blue{% endif %} progress"
-       data-percent="{{ cf_pct }}"
-       role="progressbar"
-       aria-valuenow="{{ cf_pct }}"
-       aria-valuemin="0"
-       aria-valuemax="100"
-       {% if label %}aria-label="{{ label }}"{% endif %}>
-    <div class="bar" style="width: {{ cf_pct }}%">
-      <div class="progress">{{ cf_pct }}%</div>
+  <div class="{{ extra_class }}">
+    <div
+      class="ui {% if type == 'danger' or type == 'error' %}error{% elif type == 'success' %}success{% elif type == 'warning' %}warning{% elif type == 'info' %}teal{% else %}blue{% endif %} progress"
+      data-percent="{{ cf_pct }}"
+      role="progressbar"
+      aria-valuenow="{{ cf_pct }}"
+      aria-valuemin="0"
+      aria-valuemax="100"
+      {% if label %}aria-label="{{ label }}"{% endif %}
+    >
+      <div class="bar" style="width: {{ cf_pct }}%">
+        <div class="progress">{{ cf_pct }}%</div>
+      </div>
+      {% if label %}<div class="label">{{ label }}</div>{% endif %}
     </div>
-    {% if label %}<div class="label">{{ label }}</div>{% endif %}
   </div>
-</div>
 {% endautoescape %}
diff --git a/src/cf_ui/templates/jinja/fomantic/Select.jinja b/src/cf_ui/templates/jinja/fomantic/Select.jinja
index 0bfeb4b..0c1cac1 100644
--- a/src/cf_ui/templates/jinja/fomantic/Select.jinja
+++ b/src/cf_ui/templates/jinja/fomantic/Select.jinja
@@ -1,28 +1,31 @@
 {#def name, label, value="", error="", options=[], extra_class="", input_class="" #}
 {% autoescape true %}
-{% set value = value if value is defined else "" %}
-{% set error = error if error is defined else "" %}
-{% set options = options if options is defined else [] %}
-{% set extra_class = extra_class if extra_class is defined else "" %}
-{% set input_class = input_class if input_class is defined else "" %}
-{# A real `<select>`, not Fomantic's `ui dropdown` widget. That widget is built
+  {% set value = value if value is defined else "" %}
+  {% set error = error if error is defined else "" %}
+  {% set options = options if options is defined else [] %}
+  {% set extra_class = extra_class if extra_class is defined else "" %}
+  {% set input_class = input_class if input_class is defined else "" %}
+  {# A real `<select>`, not Fomantic's `ui dropdown` widget. That widget is built
    at runtime by a jQuery module cf-ui does not load, over a hidden select;
    reproducing its DOM by hand would be a combobox nobody can drive. The
    component's contract is a form control, and `select.ui.dropdown` /
    `.ui.selection.dropdown` style a native select acceptably with no JS. #}
-<div class="ui form {{ extra_class }}">
-  <div class="field{% if error %} error{% endif %}">
-    <label for="{{ name }}">{{ label }}</label>
-    <select class="ui fluid selection dropdown{% if input_class %} {{ input_class }}{% endif %}"
-            id="{{ name }}"
-            name="{{ name }}">
-      {% for opt in options %}
-      <option value="{{ opt.value }}"{% if opt.value|string == value|string %} selected{% endif %}>
-        {{ opt.label }}
-      </option>
-      {% endfor %}
-    </select>
-    {% if error %}<div class="ui basic red pointing prompt label">{{ error }}</div>{% endif %}
+  <div class="ui form {{ extra_class }}">
+    <div class="field{% if error %} error{% endif %}">
+      <label for="{{ name }}">{{ label }}</label>
+      <select
+        class="ui fluid selection dropdown{% if input_class %} {{ input_class }}{% endif %}"
+        id="{{ name }}"
+        name="{{ name }}"
+      >
+        {% for opt in options %}
+          <option
+            value="{{ opt.value }}"
+            {% if opt.value|string == value|string %} selected{% endif %}
+          >{{ opt.label }}</option>
+        {% endfor %}
+      </select>
+      {% if error %}<div class="ui basic red pointing prompt label">{{ error }}</div>{% endif %}
+    </div>
   </div>
-</div>
 {% endautoescape %}
diff --git a/src/cf_ui/templates/jinja/fomantic/Table.jinja b/src/cf_ui/templates/jinja/fomantic/Table.jinja
index 596a362..4186d9b 100644
--- a/src/cf_ui/templates/jinja/fomantic/Table.jinja
+++ b/src/cf_ui/templates/jinja/fomantic/Table.jinja
@@ -1,26 +1,26 @@
 {#def columns=[], rows=[], hx_target="", hx_url="", extra_class="" #}
 {% autoescape true %}
-{% set columns = columns if columns is defined else [] %}
-{% set rows = rows if rows is defined else [] %}
-{% set extra_class = extra_class if extra_class is defined else "" %}
-<div class="{{ extra_class }}">
-  <table class="ui celled striped table">
-    <thead>
-      <tr>
-        {% for col in columns %}
-        <th>{{ col.label }}</th>
+  {% set columns = columns if columns is defined else [] %}
+  {% set rows = rows if rows is defined else [] %}
+  {% set extra_class = extra_class if extra_class is defined else "" %}
+  <div class="{{ extra_class }}">
+    <table class="ui celled striped table">
+      <thead>
+        <tr>
+          {% for col in columns %}
+            <th>{{ col.label }}</th>
+          {% endfor %}
+        </tr>
+      </thead>
+      <tbody>
+        {% for row in rows %}
+          <tr>
+            {% for col in columns %}
+              <td>{{ row[col.key] }}</td>
+            {% endfor %}
+          </tr>
         {% endfor %}
-      </tr>
-    </thead>
-    <tbody>
-      {% for row in rows %}
-      <tr>
-        {% for col in columns %}
-        <td>{{ row[col.key] }}</td>
-        {% endfor %}
-      </tr>
-      {% endfor %}
-    </tbody>
-  </table>
-</div>
+      </tbody>
+    </table>
+  </div>
 {% endautoescape %}
diff --git a/src/cf_ui/templates/jinja/fomantic/Tabs.jinja b/src/cf_ui/templates/jinja/fomantic/Tabs.jinja
index 10318f9..a497aa7 100644
--- a/src/cf_ui/templates/jinja/fomantic/Tabs.jinja
+++ b/src/cf_ui/templates/jinja/fomantic/Tabs.jinja
@@ -1,33 +1,45 @@
 {#def tabs=[], hx_target="tab-content", active="", content="", extra_class="" #}
 {% autoescape true %}
-{% set tabs = tabs if tabs is defined else [] %}
-{% set content = content if content is defined else "" %}
-{% set active = active if active is defined else "" %}
-{% set hx_target = hx_target if hx_target is defined else "tab-content" %}
-{% set extra_class = extra_class if extra_class is defined else "" %}
-{# The panel is a plain attached segment, not `.ui.tab`: `.ui.tab` is
+  {% set tabs = tabs if tabs is defined else [] %}
+  {% set content = content if content is defined else "" %}
+  {% set active = active if active is defined else "" %}
+  {% set hx_target = hx_target if hx_target is defined else "tab-content" %}
+  {% set extra_class = extra_class if extra_class is defined else "" %}
+  {# The panel is a plain attached segment, not `.ui.tab`: `.ui.tab` is
    `display:none` until Fomantic's Tab module adds `.active`, and this one
    panel is always the visible one — HTMX swaps its contents. #}
-<div class="{{ extra_class }}"
-     x-data="cfTabs"
-     x-init="initTabs()"
-     data-cf-active="{{ active }}">
-  <div role="tablist" class="ui top attached tabular menu" @keydown="onKeydown($event)">
-    {% for tab in tabs %}
-    <a role="tab"
-       data-cf-tab="{{ tab.id }}"
-       class="{% if tab.id == active %}active {% endif %}item"
-       aria-controls="{{ hx_target }}"
-       aria-selected="{% if tab.id == active %}true{% else %}false{% endif %}"
-       tabindex="{% if tab.id == active or (not active and loop.first) %}0{% else %}-1{% endif %}"
-       :class="{ 'active': active === $el.dataset.cfTab }"
-       :aria-selected="active === $el.dataset.cfTab"
-       :tabindex="tabIndexFor($el.dataset.cfTab)"
-       @click.prevent="setActive($el.dataset.cfTab)"
-       hx-get="{{ tab.url }}"
-       hx-target="#{{ hx_target }}">{{ tab.id }}</a>
-    {% endfor %}
+  <div
+    class="{{ extra_class }}"
+    x-data="cfTabs"
+    x-init="initTabs()"
+    data-cf-active="{{ active }}"
+  >
+    <div
+      role="tablist"
+      class="ui top attached tabular menu"
+      @keydown="onKeydown($event)"
+    >
+      {% for tab in tabs %}
+        <a
+          role="tab"
+          data-cf-tab="{{ tab.id }}"
+          class="{% if tab.id == active %}active {% endif %}item"
+          aria-controls="{{ hx_target }}"
+          aria-selected="{% if tab.id == active %}true{% else %}false{% endif %}"
+          tabindex="{% if tab.id == active or (not active and loop.first) %}0{% else %}-1{% endif %}"
+          :class="{ 'active': active === $el.dataset.cfTab }"
+          :aria-selected="active === $el.dataset.cfTab"
+          :tabindex="tabIndexFor($el.dataset.cfTab)"
+          @click.prevent="setActive($el.dataset.cfTab)"
+          hx-get="{{ tab.url }}"
+          hx-target="#{{ hx_target }}"
+        >{{ tab.id }}</a>
+      {% endfor %}
+    </div>
+    <div
+      id="{{ hx_target }}"
+      role="tabpanel"
+      class="ui bottom attached segment"
+    >{{ content }}</div>
   </div>
-  <div id="{{ hx_target }}" role="tabpanel" class="ui bottom attached segment">{{ content }}</div>
-</div>
 {% endautoescape %}
diff --git a/src/cf_ui/templates/jinja/fomantic/Textarea.jinja b/src/cf_ui/templates/jinja/fomantic/Textarea.jinja
index f1516bd..df4d57f 100644
--- a/src/cf_ui/templates/jinja/fomantic/Textarea.jinja
+++ b/src/cf_ui/templates/jinja/fomantic/Textarea.jinja
@@ -1,17 +1,20 @@
 {#def name, label, value="", error="", rows=4, extra_class="", input_class="" #}
 {% autoescape true %}
-{% set value = value if value is defined else "" %}
-{% set error = error if error is defined else "" %}
-{% set rows = rows if rows is defined else 4 %}
-{% set extra_class = extra_class if extra_class is defined else "" %}
-{% set input_class = input_class if input_class is defined else "" %}
-<div class="ui form {{ extra_class }}">
-  <div class="field{% if error %} error{% endif %}">
-    <label for="{{ name }}">{{ label }}</label>
-    <textarea id="{{ name }}"
-              name="{{ name }}"
-              rows="{{ rows }}"{% if input_class %} class="{{ input_class }}"{% endif %}>{{ value }}</textarea>
-    {% if error %}<div class="ui basic red pointing prompt label">{{ error }}</div>{% endif %}
+  {% set value = value if value is defined else "" %}
+  {% set error = error if error is defined else "" %}
+  {% set rows = rows if rows is defined else 4 %}
+  {% set extra_class = extra_class if extra_class is defined else "" %}
+  {% set input_class = input_class if input_class is defined else "" %}
+  <div class="ui form {{ extra_class }}">
+    <div class="field{% if error %} error{% endif %}">
+      <label for="{{ name }}">{{ label }}</label>
+      <textarea
+        id="{{ name }}"
+        name="{{ name }}"
+        rows="{{ rows }}"
+        {% if input_class %} class="{{ input_class }}"{% endif %}
+      >{{ value }}</textarea>
+      {% if error %}<div class="ui basic red pointing prompt label">{{ error }}</div>{% endif %}
+    </div>
   </div>
-</div>
 {% endautoescape %}
diff --git a/src/cf_ui/templates/jinja/foundation/Badge.jinja b/src/cf_ui/templates/jinja/foundation/Badge.jinja
new file mode 100644
index 0000000..fc5515b
--- /dev/null
+++ b/src/cf_ui/templates/jinja/foundation/Badge.jinja
@@ -0,0 +1,11 @@
+{#def content="", variant="neutral", size="normal", extra_class="" #}
+{% autoescape true %}
+  {% set content = content if content is defined else "" %}
+  {% set variant = variant if variant is defined else "neutral" %}
+  {% set size = size if size is defined else "normal" %}
+  {% set extra_class = extra_class if extra_class is defined else "" %}
+  {{- cf_ui_validate("badge", variant=variant, size=size) -}}
+  <span
+    class="label{% if variant == 'primary' %} primary{% elif variant == 'secondary' %} secondary{% elif variant == 'success' %} success{% elif variant == 'warning' %} warning{% elif variant == 'danger' %} alert{% elif variant == 'info' %} secondary{% endif %}{% if extra_class %} {{ extra_class }}{% endif %}"
+  >{{ content }}</span>
+{% endautoescape %}
diff --git a/src/cf_ui/templates/jinja/foundation/Breadcrumb.jinja b/src/cf_ui/templates/jinja/foundation/Breadcrumb.jinja
index b5fc187..3627203 100644
--- a/src/cf_ui/templates/jinja/foundation/Breadcrumb.jinja
+++ b/src/cf_ui/templates/jinja/foundation/Breadcrumb.jinja
@@ -1,20 +1,20 @@
 {#def items=[], extra_class="" #}
 {% autoescape true %}
-{% set items = items if items is defined else [] %}
-{% set extra_class = extra_class if extra_class is defined else "" %}
-{# Foundation draws the "/" separator with `.breadcrumbs li:not(:last-child)::after`,
+  {% set items = items if items is defined else [] %}
+  {% set extra_class = extra_class if extra_class is defined else "" %}
+  {# Foundation draws the "/" separator with `.breadcrumbs li:not(:last-child)::after`,
    so the markup must not carry one of its own. #}
-<nav aria-label="breadcrumbs">
-  <ul class="breadcrumbs {{ extra_class }}">
-    {% for item in items %}
-    <li>
-      {% if loop.last %}
-      <a href="{{ item.url }}" aria-current="page">{{ item.label }}</a>
-      {% else %}
-      <a href="{{ item.url }}">{{ item.label }}</a>
-      {% endif %}
-    </li>
-    {% endfor %}
-  </ul>
-</nav>
+  <nav aria-label="breadcrumbs">
+    <ul class="breadcrumbs {{ extra_class }}">
+      {% for item in items %}
+        <li>
+          {% if loop.last %}
+            <a href="{{ item.url }}" aria-current="page">{{ item.label }}</a>
+          {% else %}
+            <a href="{{ item.url }}">{{ item.label }}</a>
+          {% endif %}
+        </li>
+      {% endfor %}
+    </ul>
+  </nav>
 {% endautoescape %}
diff --git a/src/cf_ui/templates/jinja/foundation/Button.jinja b/src/cf_ui/templates/jinja/foundation/Button.jinja
new file mode 100644
index 0000000..935d14a
--- /dev/null
+++ b/src/cf_ui/templates/jinja/foundation/Button.jinja
@@ -0,0 +1,16 @@
+{#def content="", variant="neutral", size="normal", state="normal", href="", type="button", full_width=false, extra_class="" #}
+{% autoescape true %}
+  {% set content = content if content is defined else "" %}
+  {% set variant = variant if variant is defined else "neutral" %}
+  {% set size = size if size is defined else "normal" %}
+  {% set state = state if state is defined else "normal" %}
+  {% set href = href if href is defined else "" %}
+  {% set type = type if type is defined else "button" %}
+  {% set full_width = full_width if full_width is defined else false %}
+  {% set extra_class = extra_class if extra_class is defined else "" %}
+  {{ cf_ui_validate("button", variant=variant, size=size, state=state, type=type) }}
+  {%- set cf_tag = "a" if href else "button" -%}
+  <{{ cf_tag }} class="button{% if variant == 'primary' %} primary{% elif variant == 'secondary' %} secondary{% elif variant == 'success' %} success{% elif variant == 'warning' %} warning{% elif variant == 'danger' %} alert{% elif variant == 'info' %} secondary{% endif %}{% if size == 'small' %} small{% elif size == 'large' %} large{% endif %}{% if state == 'disabled' %} disabled{% endif %}{% if full_width %} expanded{% endif %}{% if extra_class %} {{ extra_class }}{% endif %}"
+  {%- if href %}{% if state == 'disabled' %} role="link" aria-disabled="true"{% else %} href="{{ href }}"{% endif %}
+{%- else %} type="{{ type }}"{% if state == 'disabled' %} disabled{% endif %}{% endif %}>{{ content }}</{{ cf_tag }}>
+{% endautoescape %}
diff --git a/src/cf_ui/templates/jinja/foundation/Card.jinja b/src/cf_ui/templates/jinja/foundation/Card.jinja
index a6ef7a0..2d35693 100644
--- a/src/cf_ui/templates/jinja/foundation/Card.jinja
+++ b/src/cf_ui/templates/jinja/foundation/Card.jinja
@@ -1,20 +1,20 @@
 {#def content="", header="", footer="", extra_class="" #}
 {% autoescape true %}
-{% set header = header if header is defined else "" %}
-{% set content = content if content is defined else "" %}
-{% set footer = footer if footer is defined else "" %}
-{% set extra_class = extra_class if extra_class is defined else "" %}
-{# Foundation has no `.card-footer`; a trailing `.card-divider` is the
+  {% set header = header if header is defined else "" %}
+  {% set content = content if content is defined else "" %}
+  {% set footer = footer if footer is defined else "" %}
+  {% set extra_class = extra_class if extra_class is defined else "" %}
+  {# Foundation has no `.card-footer`; a trailing `.card-divider` is the
    documented footer convention. #}
-<div class="card {{ extra_class }}">
-  {% if header %}
-  <div class="card-divider">
-    <h3>{{ header }}</h3>
+  <div class="card {{ extra_class }}">
+    {% if header %}
+      <div class="card-divider">
+        <h3>{{ header }}</h3>
+      </div>
+    {% endif %}
+    <div class="card-section">{{ content }}</div>
+    {% if footer %}
+      <div class="card-divider">{{ footer }}</div>
+    {% endif %}
   </div>
-  {% endif %}
-  <div class="card-section">{{ content }}</div>
-  {% if footer %}
-  <div class="card-divider">{{ footer }}</div>
-  {% endif %}
-</div>
 {% endautoescape %}
diff --git a/src/cf_ui/templates/jinja/foundation/CheckboxGroup.jinja b/src/cf_ui/templates/jinja/foundation/CheckboxGroup.jinja
index f7bbf8e..8fe10fe 100644
--- a/src/cf_ui/templates/jinja/foundation/CheckboxGroup.jinja
+++ b/src/cf_ui/templates/jinja/foundation/CheckboxGroup.jinja
@@ -1,25 +1,27 @@
 {#def name, label, choices=[], selected=[], error="", extra_class="", control_class="" #}
 {% autoescape true %}
-{% set choices = choices if choices is defined else [] %}
-{% set selected = selected if selected is defined else [] %}
-{% set error = error if error is defined else "" %}
-{% set extra_class = extra_class if extra_class is defined else "" %}
-{% set control_class = control_class if control_class is defined else "" %}
-{# Foundation groups checkboxes in a fieldset/legend and pairs a *sibling*
+  {% set choices = choices if choices is defined else [] %}
+  {% set selected = selected if selected is defined else [] %}
+  {% set error = error if error is defined else "" %}
+  {% set extra_class = extra_class if extra_class is defined else "" %}
+  {% set control_class = control_class if control_class is defined else "" %}
+  {# Foundation groups checkboxes in a fieldset/legend and pairs a *sibling*
    `label[for]` with each input rather than wrapping it, so every box needs an
    id of its own — a shared one would point every label at the first input. #}
-<fieldset class="fieldset {{ extra_class }}">
-  <legend>{{ label }}</legend>
-  <div class="{{ control_class }}">
-    {% for choice in choices %}
-    <input type="checkbox"
-           id="{{ name }}-{{ loop.index }}"
-           name="{{ name }}"
-           value="{{ choice.value }}"
-           {% if choice.value in selected %}checked{% endif %}>
-    <label for="{{ name }}-{{ loop.index }}">{{ choice.label }}</label>
-    {% endfor %}
-  </div>
-  {% if error %}<span class="form-error is-visible">{{ error }}</span>{% endif %}
-</fieldset>
+  <fieldset class="fieldset {{ extra_class }}">
+    <legend>{{ label }}</legend>
+    <div class="{{ control_class }}">
+      {% for choice in choices %}
+        <input
+          type="checkbox"
+          id="{{ name }}-{{ loop.index }}"
+          name="{{ name }}"
+          value="{{ choice.value }}"
+          {% if choice.value in selected %}checked{% endif %}
+        >
+        <label for="{{ name }}-{{ loop.index }}">{{ choice.label }}</label>
+      {% endfor %}
+    </div>
+    {% if error %}<span class="form-error is-visible">{{ error }}</span>{% endif %}
+  </fieldset>
 {% endautoescape %}
diff --git a/src/cf_ui/templates/jinja/foundation/FormField.jinja b/src/cf_ui/templates/jinja/foundation/FormField.jinja
index 167aaac..d843834 100644
--- a/src/cf_ui/templates/jinja/foundation/FormField.jinja
+++ b/src/cf_ui/templates/jinja/foundation/FormField.jinja
@@ -1,26 +1,28 @@
 {#def name, label, value="", error="", type="text", required=false, extra_class="", input_class="" #}
 {% autoescape true %}
-{% set value = value if value is defined else "" %}
-{% set error = error if error is defined else "" %}
-{% set type = type if type is defined else "text" %}
-{% set required = required if required is defined else false %}
-{% set extra_class = extra_class if extra_class is defined else "" %}
-{% set input_class = input_class if input_class is defined else "" %}
-{# `.form-error` is `display: none` until `.is-visible` joins it — emitting the
+  {% set value = value if value is defined else "" %}
+  {% set error = error if error is defined else "" %}
+  {% set type = type if type is defined else "text" %}
+  {% set required = required if required is defined else false %}
+  {% set extra_class = extra_class if extra_class is defined else "" %}
+  {% set input_class = input_class if input_class is defined else "" %}
+  {# `.form-error` is `display: none` until `.is-visible` joins it — emitting the
    text without it renders an error nobody can see. These three classes are the
    whole of what Foundation's Abide plugin does at runtime, so rendering them
    server-side is a complete substitute for loading it. #}
-<div class="{{ extra_class }}">
-  <label for="{{ name }}"{% if error %} class="is-invalid-label"{% endif %}>{{ label }}</label>
-  <input class="{% if error %}is-invalid-input{% endif %}{% if input_class %} {{ input_class }}{% endif %}"
-         id="{{ name }}"
-         type="{{ type }}"
-         name="{{ name }}"
-         value="{{ value }}"
-         {% if error %}aria-invalid="true" aria-describedby="{{ name }}-error"{% endif %}
-         {% if required %}required{% endif %}>
-  {% if error %}
-  <span class="form-error is-visible" id="{{ name }}-error">{{ error }}</span>
-  {% endif %}
-</div>
+  <div class="{{ extra_class }}">
+    <label for="{{ name }}"{% if error %} class="is-invalid-label"{% endif %}>{{ label }}</label>
+    <input
+      class="{% if error %}is-invalid-input{% endif %}{% if input_class %} {{ input_class }}{% endif %}"
+      id="{{ name }}"
+      type="{{ type }}"
+      name="{{ name }}"
+      value="{{ value }}"
+      {% if error %}aria-invalid="true" aria-describedby="{{ name }}-error"{% endif %}
+      {% if required %}required{% endif %}
+    >
+    {% if error %}
+      <span class="form-error is-visible" id="{{ name }}-error">{{ error }}</span>
+    {% endif %}
+  </div>
 {% endautoescape %}
diff --git a/src/cf_ui/templates/jinja/foundation/Heading.jinja b/src/cf_ui/templates/jinja/foundation/Heading.jinja
new file mode 100644
index 0000000..9ba70fb
--- /dev/null
+++ b/src/cf_ui/templates/jinja/foundation/Heading.jinja
@@ -0,0 +1,10 @@
+{#def content="", level="2", size="normal", emphasis="normal", extra_class="" #}
+{% autoescape true %}
+  {% set content = content if content is defined else "" %}
+  {% set level = level if level is defined else "2" %}
+  {% set size = size if size is defined else "normal" %}
+  {% set emphasis = emphasis if emphasis is defined else "normal" %}
+  {% set extra_class = extra_class if extra_class is defined else "" %}
+  {{ cf_ui_validate("heading", level=level, size=size, emphasis=emphasis) }}
+  <h{{ level }} class="{% if size == 'small' %}h6{% elif size == 'normal' %}h4{% elif size == 'large' %}h2{% endif %}{% if emphasis == 'subtle' %} subheader{% endif %}{% if extra_class %} {{ extra_class }}{% endif %}">{{ content }}</h{{ level }}>
+{% endautoescape %}
diff --git a/src/cf_ui/templates/jinja/foundation/Icon.jinja b/src/cf_ui/templates/jinja/foundation/Icon.jinja
new file mode 100644
index 0000000..d2b5a00
--- /dev/null
+++ b/src/cf_ui/templates/jinja/foundation/Icon.jinja
@@ -0,0 +1,12 @@
+{#def content="", size="normal", label="", extra_class="" #}
+{% autoescape true %}
+  {% set content = content if content is defined else "" %}
+  {% set size = size if size is defined else "normal" %}
+  {% set label = label if label is defined else "" %}
+  {% set extra_class = extra_class if extra_class is defined else "" %}
+  {{ cf_ui_validate("icon", size=size) }}
+  <span
+    class="{% if extra_class %}{{ extra_class }}{% endif %}"
+    {%- if label %} role="img" aria-label="{{ label }}"{% else %} aria-hidden="true"{% endif %}
+  >{{ content }}</span>
+{% endautoescape %}
diff --git a/src/cf_ui/templates/jinja/foundation/Label.jinja b/src/cf_ui/templates/jinja/foundation/Label.jinja
new file mode 100644
index 0000000..3f5cc37
--- /dev/null
+++ b/src/cf_ui/templates/jinja/foundation/Label.jinja
@@ -0,0 +1,21 @@
+{#def content="", size="normal", for_id="", required=false, extra_class="" #}
+{% autoescape true %}
+  {% set content = content if content is defined else "" %}
+  {% set size = size if size is defined else "normal" %}
+  {% set for_id = for_id if for_id is defined else "" %}
+  {% set required = required if required is defined else false %}
+  {% set extra_class = extra_class if extra_class is defined else "" %}
+  {{ cf_ui_validate("label", size=size) }}
+  {# No base class on purpose. Foundation styles form labels off the element
+   (`label { font-size: .875rem; font-weight: 400 }`), and its `.label` class is
+   the *badge* component — a blue pill with padding and a white foreground.
+   Applying it here would turn every field label into a tag.
+
+   `lead` is the only real font-size class Foundation ships outside the button
+   scale, and at 125% it lands on 1.25rem — the same size `.button.large` uses.
+   There is no counterpart below the default, so `small` maps to nothing. #}
+  <label
+    class="{% if size == 'large' %}lead {% endif %}{{ extra_class }}"
+    {% if for_id %} for="{{ for_id }}"{% endif %}
+  >{{ content }}{% if required %} <span role="img" aria-label="required">*</span>{% endif %}</label>
+{% endautoescape %}
diff --git a/src/cf_ui/templates/jinja/foundation/Modal.jinja b/src/cf_ui/templates/jinja/foundation/Modal.jinja
index f0f53ef..44b360a 100644
--- a/src/cf_ui/templates/jinja/foundation/Modal.jinja
+++ b/src/cf_ui/templates/jinja/foundation/Modal.jinja
@@ -1,12 +1,12 @@
 {#def id="modal", header="", content="", footer="", label="Dialog", extra_class="" #}
 {% autoescape true %}
-{% set id = id if id is defined else "modal" %}
-{% set header = header if header is defined else "" %}
-{% set content = content if content is defined else "" %}
-{% set footer = footer if footer is defined else "" %}
-{% set label = label if label is defined and label else "Dialog" %}
-{% set extra_class = extra_class if extra_class is defined else "" %}
-{# Foundation ships no open-state class for Reveal. Both `.reveal` and
+  {% set id = id if id is defined else "modal" %}
+  {% set header = header if header is defined else "" %}
+  {% set content = content if content is defined else "" %}
+  {% set footer = footer if footer is defined else "" %}
+  {% set label = label if label is defined and label else "Dialog" %}
+  {% set extra_class = extra_class if extra_class is defined else "" %}
+  {# Foundation ships no open-state class for Reveal. Both `.reveal` and
    `.reveal-overlay` are `display: none` in the stylesheet, and the jQuery
    plugin opens them by writing an inline `display` — there is no `.is-active`
    to bind. `x-show` cannot stand in either: it *removes* the inline property
@@ -18,24 +18,31 @@
    — it is only centred and scrollable because the fixed, full-screen overlay
    is its container. The plugin injects that wrapper at runtime; here it is
    just markup. #}
-<div id="{{ id }}"
-     class="reveal-overlay {{ extra_class }}"
-     role="dialog"
-     aria-modal="true"
-     {% if header %}aria-labelledby="{{ id }}-title"{% else %}aria-label="{{ label }}"{% endif %}
-     x-data="cfModal"
-     x-init="initModal()"
-     :style="open ? 'display: block' : 'display: none'"
-     @click.self="close()">
-  <div class="reveal" style="display: block">
-    <button type="button" class="close-button" aria-label="close" @click="close()">
-      <span aria-hidden="true">&times;</span>
-    </button>
-    {% if header %}<h2 id="{{ id }}-title">{{ header }}</h2>{% endif %}
-    <div>{{ content }}</div>
-    {% if footer %}
-    <div class="text-right">{{ footer }}</div>
-    {% endif %}
+  <div
+    id="{{ id }}"
+    class="reveal-overlay {{ extra_class }}"
+    role="dialog"
+    aria-modal="true"
+    {% if header %}aria-labelledby="{{ id }}-title"{% else %}aria-label="{{ label }}"{% endif %}
+    x-data="cfModal"
+    x-init="initModal()"
+    :style="open ? 'display: block' : 'display: none'"
+    @click.self="close()"
+  >
+    <div class="reveal" style="display: block">
+      <button
+        type="button"
+        class="close-button"
+        aria-label="close"
+        @click="close()"
+      >
+        <span aria-hidden="true">&times;</span>
+      </button>
+      {% if header %}<h2 id="{{ id }}-title">{{ header }}</h2>{% endif %}
+      <div>{{ content }}</div>
+      {% if footer %}
+        <div class="text-right">{{ footer }}</div>
+      {% endif %}
+    </div>
   </div>
-</div>
 {% endautoescape %}
diff --git a/src/cf_ui/templates/jinja/foundation/Navbar.jinja b/src/cf_ui/templates/jinja/foundation/Navbar.jinja
index 1e7e947..eeff4c9 100644
--- a/src/cf_ui/templates/jinja/foundation/Navbar.jinja
+++ b/src/cf_ui/templates/jinja/foundation/Navbar.jinja
@@ -1,10 +1,10 @@
 {#def brand="", start="", end="", extra_class="" #}
 {% autoescape true %}
-{% set brand = brand if brand is defined else "" %}
-{% set start = start if start is defined else "" %}
-{% set end = end if end is defined else "" %}
-{% set extra_class = extra_class if extra_class is defined else "" %}
-{# `hide-for-small-only`, not `hide`. `.hide` is `display: none !important` at
+  {% set brand = brand if brand is defined else "" %}
+  {% set start = start if start is defined else "" %}
+  {% set end = end if end is defined else "" %}
+  {% set extra_class = extra_class if extra_class is defined else "" %}
+  {# `hide-for-small-only`, not `hide`. `.hide` is `display: none !important` at
    every width, so binding it to `!menuOpen` would collapse the desktop menu
    too; the breakpoint-scoped class reproduces what Foundation's own responsive
    toggle does. With Alpine off no class is emitted at all, so the menu is
@@ -12,23 +12,33 @@
 
    Foundation's `data-responsive-toggle` / `data-toggle` are inert without
    `foundation.responsiveToggle.js`, so the burger is wired to cfNavbar. #}
-<nav class="top-bar {{ extra_class }}" role="navigation" aria-label="main navigation"
-     x-data="cfNavbar">
-  <div class="top-bar-left">
-    {% if brand %}
-    <ul class="menu">
-      <li class="menu-text">{{ brand }}</li>
-    </ul>
-    {% endif %}
-    <button type="button"
-            class="menu-icon dark hide-for-medium"
-            aria-label="menu"
-            :aria-expanded="menuOpen"
-            @click="toggle()"></button>
-    <ul class="menu" :class="{ 'hide-for-small-only': !menuOpen }">{{ start }}</ul>
-  </div>
-  <div class="top-bar-right" :class="{ 'hide-for-small-only': !menuOpen }">
-    <ul class="menu">{{ end }}</ul>
-  </div>
-</nav>
+  <nav
+    class="top-bar {{ extra_class }}"
+    role="navigation"
+    aria-label="main navigation"
+    x-data="cfNavbar"
+  >
+    <div class="top-bar-left">
+      {% if brand %}
+        <ul class="menu">
+          <li class="menu-text">{{ brand }}</li>
+        </ul>
+      {% endif %}
+      <button
+        type="button"
+        class="menu-icon dark hide-for-medium"
+        aria-label="menu"
+        :aria-expanded="menuOpen"
+        @click="toggle()"
+      ></button>
+      <ul class="menu" :class="{ 'hide-for-small-only': !menuOpen }">
+        {{ start }}
+      </ul>
+    </div>
+    <div class="top-bar-right" :class="{ 'hide-for-small-only': !menuOpen }">
+      <ul class="menu">
+        {{ end }}
+      </ul>
+    </div>
+  </nav>
 {% endautoescape %}
diff --git a/src/cf_ui/templates/jinja/foundation/Notification.jinja b/src/cf_ui/templates/jinja/foundation/Notification.jinja
index 450b5ca..935101b 100644
--- a/src/cf_ui/templates/jinja/foundation/Notification.jinja
+++ b/src/cf_ui/templates/jinja/foundation/Notification.jinja
@@ -1,23 +1,30 @@
 {#def message, type="info", dismissible=true, extra_class="" #}
 {% autoescape true %}
-{% set type = type if type is defined else "info" %}
-{% set dismissible = dismissible if dismissible is defined else true %}
-{% set extra_class = extra_class if extra_class is defined else "" %}
-{# Foundation's callout variants carry no `is-` prefix, and there is no `info`
+  {% set type = type if type is defined else "info" %}
+  {% set dismissible = dismissible if dismissible is defined else true %}
+  {% set extra_class = extra_class if extra_class is defined else "" %}
+  {# Foundation's callout variants carry no `is-` prefix, and there is no `info`
    — `primary` is the stand-in. The public prop vocabulary does not change.
 
    `.close-button` is CSS-only styling; `data-closable` needs the Toggler
    plugin, so the dismiss is Alpine's. `.callout` is `position: relative`
    precisely so the absolutely-positioned close button anchors to it. #}
-<div role="alert"
-     class="callout {% if type == 'danger' or type == 'error' %}alert{% elif type == 'success' %}success{% elif type == 'warning' %}warning{% elif type == 'secondary' %}secondary{% else %}primary{% endif %} {{ extra_class }}"
-     x-data="{ visible: true }"
-     x-show="visible">
-  <p>{{ message }}</p>
-  {% if dismissible %}
-  <button type="button" class="close-button" aria-label="dismiss" @click="visible = false">
-    <span aria-hidden="true">&times;</span>
-  </button>
-  {% endif %}
-</div>
+  <div
+    role="alert"
+    class="callout {% if type == 'danger' or type == 'error' %}alert{% elif type == 'success' %}success{% elif type == 'warning' %}warning{% elif type == 'secondary' %}secondary{% else %}primary{% endif %} {{ extra_class }}"
+    x-data="{ visible: true }"
+    x-show="visible"
+  >
+    <p>{{ message }}</p>
+    {% if dismissible %}
+      <button
+        type="button"
+        class="close-button"
+        aria-label="dismiss"
+        @click="visible = false"
+      >
+        <span aria-hidden="true">&times;</span>
+      </button>
+    {% endif %}
+  </div>
 {% endautoescape %}
diff --git a/src/cf_ui/templates/jinja/foundation/Pagination.jinja b/src/cf_ui/templates/jinja/foundation/Pagination.jinja
index 1825a64..de403e7 100644
--- a/src/cf_ui/templates/jinja/foundation/Pagination.jinja
+++ b/src/cf_ui/templates/jinja/foundation/Pagination.jinja
@@ -1,46 +1,44 @@
 {#def page=1, total_pages=1, hx_target="", hx_url="", extra_class="" #}
 {% autoescape true %}
-{% set page = page if page is defined else 1 %}
-{% set total_pages = total_pages if total_pages is defined else 1 %}
-{% set hx_target = hx_target if hx_target is defined else "" %}
-{% set hx_url = hx_url if hx_url is defined else "" %}
-{% set extra_class = extra_class if extra_class is defined else "" %}
-{# Foundation generates the « / » arrows from `.pagination-previous a::before`
+  {% set page = page if page is defined else 1 %}
+  {% set total_pages = total_pages if total_pages is defined else 1 %}
+  {% set hx_target = hx_target if hx_target is defined else "" %}
+  {% set hx_url = hx_url if hx_url is defined else "" %}
+  {% set extra_class = extra_class if extra_class is defined else "" %}
+  {# Foundation generates the « / » arrows from `.pagination-previous a::before`
    and `.pagination-next a::after`, and disabled edges are bare text rather
    than links (`.pagination-previous.disabled::before` covers that case). #}
-<nav role="navigation" aria-label="pagination">
-  <ul class="pagination {{ extra_class }}">
-    {% if page > 1 %}
-    <li class="pagination-previous">
-      <a hx-get="{{ hx_url }}?page={{ page - 1 }}"
-         hx-target="{{ hx_target }}">Previous <span class="show-for-sr">page</span></a>
-    </li>
-    {% else %}
-    <li class="pagination-previous disabled">Previous <span class="show-for-sr">page</span></li>
-    {% endif %}
-
-    {% for p in range(1, total_pages + 1) %}
-    {% if p == page %}
-    <li class="current" aria-current="page">
-      <span class="show-for-sr">You're on page</span> {{ p }}
-    </li>
-    {% else %}
-    <li>
-      <a hx-get="{{ hx_url }}?page={{ p }}"
-         hx-target="{{ hx_target }}"
-         aria-label="Page {{ p }}">{{ p }}</a>
-    </li>
-    {% endif %}
-    {% endfor %}
-
-    {% if page < total_pages %}
-    <li class="pagination-next">
-      <a hx-get="{{ hx_url }}?page={{ page + 1 }}"
-         hx-target="{{ hx_target }}">Next <span class="show-for-sr">page</span></a>
-    </li>
-    {% else %}
-    <li class="pagination-next disabled">Next <span class="show-for-sr">page</span></li>
-    {% endif %}
-  </ul>
-</nav>
+  <nav role="navigation" aria-label="pagination">
+    <ul class="pagination {{ extra_class }}">
+      {% if page > 1 %}
+        <li class="pagination-previous">
+          <a hx-get="{{ hx_url }}?page={{ page - 1 }}" hx-target="{{ hx_target }}">Previous <span class="show-for-sr">page</span></a>
+        </li>
+      {% else %}
+        <li class="pagination-previous disabled">Previous <span class="show-for-sr">page</span></li>
+      {% endif %}
+      {% for p in range(1, total_pages + 1) %}
+        {% if p == page %}
+          <li class="current" aria-current="page">
+            <span class="show-for-sr">You're on page</span> {{ p }}
+          </li>
+        {% else %}
+          <li>
+            <a
+              hx-get="{{ hx_url }}?page={{ p }}"
+              hx-target="{{ hx_target }}"
+              aria-label="Page {{ p }}"
+            >{{ p }}</a>
+          </li>
+        {% endif %}
+      {% endfor %}
+      {% if page < total_pages %}
+        <li class="pagination-next">
+          <a hx-get="{{ hx_url }}?page={{ page + 1 }}" hx-target="{{ hx_target }}">Next <span class="show-for-sr">page</span></a>
+        </li>
+      {% else %}
+        <li class="pagination-next disabled">Next <span class="show-for-sr">page</span></li>
+      {% endif %}
+    </ul>
+  </nav>
 {% endautoescape %}
diff --git a/src/cf_ui/templates/jinja/foundation/Panel.jinja b/src/cf_ui/templates/jinja/foundation/Panel.jinja
index c2f15f5..eb6c0b8 100644
--- a/src/cf_ui/templates/jinja/foundation/Panel.jinja
+++ b/src/cf_ui/templates/jinja/foundation/Panel.jinja
@@ -1,37 +1,46 @@
 {#def title, id="panel", content="", open=false, extra_class="" #}
 {% autoescape true %}
-{% set content = content if content is defined else "" %}
-{% set id = id if id is defined else "panel" %}
-{% set open = open if open is defined else false %}
-{% set extra_class = extra_class if extra_class is defined else "" %}
-{# Deliberately not Foundation's accordion. `.accordion-content` is
+  {% set content = content if content is defined else "" %}
+  {% set id = id if id is defined else "panel" %}
+  {% set open = open if open is defined else false %}
+  {% set extra_class = extra_class if extra_class is defined else "" %}
+  {# Deliberately not Foundation's accordion. `.accordion-content` is
    `display: none` and — unlike `.tabs-panel` — the stylesheet carries *no*
    rule that ever un-hides it; the plugin opens it with an inline
    `slideDown()`. A server-open accordion panel would therefore be invisible
    with Alpine off, which is exactly what the accessibility contract forbids.
    `.card-section` has no such rule, so `x-show` + `x-cloak` behave here the
    way they do in every other theme. #}
-<div class="card {{ extra_class }}"
-     x-data="cfPanel"
-     x-init="initPanel()"
-     data-cf-open="{% if open %}true{% else %}false{% endif %}">
-  <button type="button"
-          class="card-divider"
-          style="width:100%;text-align:left;cursor:pointer"
-          aria-controls="{{ id }}-body"
-          aria-expanded="{% if open %}true{% else %}false{% endif %}"
-          :aria-expanded="open"
-          @click="toggle()">
-    <span>{{ title }}</span>
-    <span style="display:inline-block;transition:transform 200ms"
-          :style="open ? 'display:inline-block;transform:rotate(90deg)' : 'display:inline-block'"
-          aria-hidden="true">&#9654;</span>
-  </button>
-  <div id="{{ id }}-body"
-       class="card-section"
-       x-show="open"
-       {% if not open %}x-cloak{% endif %}>
-    {{ content }}
+  <div
+    class="card {{ extra_class }}"
+    x-data="cfPanel"
+    x-init="initPanel()"
+    data-cf-open="{% if open %}true{% else %}false{% endif %}"
+  >
+    <button
+      type="button"
+      class="card-divider"
+      style="width:100%;
+             text-align:left;
+             cursor:pointer"
+      aria-controls="{{ id }}-body"
+      aria-expanded="{% if open %}true{% else %}false{% endif %}"
+      :aria-expanded="open"
+      @click="toggle()"
+    >
+      <span>{{ title }}</span>
+      <span
+        style="display:inline-block;
+               transition:transform 200ms"
+        :style="open ? 'display:inline-block;transform:rotate(90deg)' : 'display:inline-block'"
+        aria-hidden="true"
+      >&#9654;</span>
+    </button>
+    <div
+      id="{{ id }}-body"
+      class="card-section"
+      x-show="open"
+      {% if not open %}x-cloak{% endif %}
+    >{{ content }}</div>
   </div>
-</div>
 {% endautoescape %}
diff --git a/src/cf_ui/templates/jinja/foundation/Progress.jinja b/src/cf_ui/templates/jinja/foundation/Progress.jinja
index 384ec69..b3822fb 100644
--- a/src/cf_ui/templates/jinja/foundation/Progress.jinja
+++ b/src/cf_ui/templates/jinja/foundation/Progress.jinja
@@ -1,29 +1,31 @@
 {#def value=0, max=100, type="primary", label="", extra_class="" #}
 {% autoescape true %}
-{% set value = value if value is defined else 0 %}
-{% set max = max if max is defined else 100 %}
-{% set type = type if type is defined else "primary" %}
-{% set label = label if label is defined else "" %}
-{% set extra_class = extra_class if extra_class is defined else "" %}
-{% set pct = ((value | float) * 100 / (max | float)) | round | int if (max | float) else 0 %}
-{# Not a native `<progress>`. Foundation 6.7.5's compiled CSS gives the bare
+  {% set value = value if value is defined else 0 %}
+  {% set max = max if max is defined else 100 %}
+  {% set type = type if type is defined else "primary" %}
+  {% set label = label if label is defined else "" %}
+  {% set extra_class = extra_class if extra_class is defined else "" %}
+  {% set pct = ((value | float) * 100 / (max | float)) | round | int if (max | float) else 0 %}
+  {# Not a native `<progress>`. Foundation 6.7.5's compiled CSS gives the bare
    element only `vertical-align: baseline`; every colour rule is
    `.progress.<variant> .progress-meter`, which needs a child the native
    control cannot have. So the ARIA the native element would have supplied is
    written out by hand, and the meter width is an inline style because
    Foundation ships no width utility for it. `tabindex` is deliberately
    omitted — a progress bar is not an interactive stop. #}
-<div class="{{ extra_class }}">
-  {% if label %}<p class="text-center">{{ label }}</p>{% endif %}
-  <div class="progress {% if type == 'danger' or type == 'error' %}alert{% elif type == 'success' %}success{% elif type == 'warning' %}warning{% elif type == 'secondary' %}secondary{% else %}primary{% endif %}"
-       role="progressbar"
-       aria-valuenow="{{ value }}"
-       aria-valuemin="0"
-       aria-valuemax="{{ max }}"
-       {% if label %}aria-label="{{ label }}"{% endif %}>
-    <span class="progress-meter" style="width: {{ pct }}%">
-      <span class="progress-meter-text">{{ pct }}%</span>
-    </span>
+  <div class="{{ extra_class }}">
+    {% if label %}<p class="text-center">{{ label }}</p>{% endif %}
+    <div
+      class="progress {% if type == 'danger' or type == 'error' %}alert{% elif type == 'success' %}success{% elif type == 'warning' %}warning{% elif type == 'secondary' %}secondary{% else %}primary{% endif %}"
+      role="progressbar"
+      aria-valuenow="{{ value }}"
+      aria-valuemin="0"
+      aria-valuemax="{{ max }}"
+      {% if label %}aria-label="{{ label }}"{% endif %}
+    >
+      <span class="progress-meter" style="width: {{ pct }}%">
+        <span class="progress-meter-text">{{ pct }}%</span>
+      </span>
+    </div>
   </div>
-</div>
 {% endautoescape %}
diff --git a/src/cf_ui/templates/jinja/foundation/Select.jinja b/src/cf_ui/templates/jinja/foundation/Select.jinja
index 62c2906..e679683 100644
--- a/src/cf_ui/templates/jinja/foundation/Select.jinja
+++ b/src/cf_ui/templates/jinja/foundation/Select.jinja
@@ -1,24 +1,27 @@
 {#def name, label, value="", error="", options=[], extra_class="", input_class="" #}
 {% autoescape true %}
-{% set value = value if value is defined else "" %}
-{% set error = error if error is defined else "" %}
-{% set options = options if options is defined else [] %}
-{% set extra_class = extra_class if extra_class is defined else "" %}
-{% set input_class = input_class if input_class is defined else "" %}
-<div class="{{ extra_class }}">
-  <label for="{{ name }}"{% if error %} class="is-invalid-label"{% endif %}>{{ label }}</label>
-  <select class="{% if error %}is-invalid-input{% endif %}{% if input_class %} {{ input_class }}{% endif %}"
-          id="{{ name }}"
-          name="{{ name }}"
-          {% if error %}aria-invalid="true" aria-describedby="{{ name }}-error"{% endif %}>
-    {% for opt in options %}
-    <option value="{{ opt.value }}"{% if opt.value|string == value|string %} selected{% endif %}>
-      {{ opt.label }}
-    </option>
-    {% endfor %}
-  </select>
-  {% if error %}
-  <span class="form-error is-visible" id="{{ name }}-error">{{ error }}</span>
-  {% endif %}
-</div>
+  {% set value = value if value is defined else "" %}
+  {% set error = error if error is defined else "" %}
+  {% set options = options if options is defined else [] %}
+  {% set extra_class = extra_class if extra_class is defined else "" %}
+  {% set input_class = input_class if input_class is defined else "" %}
+  <div class="{{ extra_class }}">
+    <label for="{{ name }}"{% if error %} class="is-invalid-label"{% endif %}>{{ label }}</label>
+    <select
+      class="{% if error %}is-invalid-input{% endif %}{% if input_class %} {{ input_class }}{% endif %}"
+      id="{{ name }}"
+      name="{{ name }}"
+      {% if error %}aria-invalid="true" aria-describedby="{{ name }}-error"{% endif %}
+    >
+      {% for opt in options %}
+        <option
+          value="{{ opt.value }}"
+          {% if opt.value|string == value|string %} selected{% endif %}
+        >{{ opt.label }}</option>
+      {% endfor %}
+    </select>
+    {% if error %}
+      <span class="form-error is-visible" id="{{ name }}-error">{{ error }}</span>
+    {% endif %}
+  </div>
 {% endautoescape %}
diff --git a/src/cf_ui/templates/jinja/foundation/Table.jinja b/src/cf_ui/templates/jinja/foundation/Table.jinja
index fa82354..03a034e 100644
--- a/src/cf_ui/templates/jinja/foundation/Table.jinja
+++ b/src/cf_ui/templates/jinja/foundation/Table.jinja
@@ -1,28 +1,28 @@
 {#def columns=[], rows=[], hx_target="", hx_url="", extra_class="" #}
 {% autoescape true %}
-{% set columns = columns if columns is defined else [] %}
-{% set rows = rows if rows is defined else [] %}
-{% set extra_class = extra_class if extra_class is defined else "" %}
-{# Foundation styles the `<table>` element itself — there is no `.table` class.
+  {% set columns = columns if columns is defined else [] %}
+  {% set rows = rows if rows is defined else [] %}
+  {% set extra_class = extra_class if extra_class is defined else "" %}
+  {# Foundation styles the `<table>` element itself — there is no `.table` class.
    `.table-scroll` is the 6.2+ wrapper; `table.scroll` is the legacy form. #}
-<div class="table-scroll {{ extra_class }}">
-  <table class="hover">
-    <thead>
-      <tr>
-        {% for col in columns %}
-        <th>{{ col.label }}</th>
+  <div class="table-scroll {{ extra_class }}">
+    <table class="hover">
+      <thead>
+        <tr>
+          {% for col in columns %}
+            <th>{{ col.label }}</th>
+          {% endfor %}
+        </tr>
+      </thead>
+      <tbody>
+        {% for row in rows %}
+          <tr>
+            {% for col in columns %}
+              <td>{{ row[col.key] }}</td>
+            {% endfor %}
+          </tr>
         {% endfor %}
-      </tr>
-    </thead>
-    <tbody>
-      {% for row in rows %}
-      <tr>
-        {% for col in columns %}
-        <td>{{ row[col.key] }}</td>
-        {% endfor %}
-      </tr>
-      {% endfor %}
-    </tbody>
-  </table>
-</div>
+      </tbody>
+    </table>
+  </div>
 {% endautoescape %}
diff --git a/src/cf_ui/templates/jinja/foundation/Tabs.jinja b/src/cf_ui/templates/jinja/foundation/Tabs.jinja
index fd2c99d..57fc6a4 100644
--- a/src/cf_ui/templates/jinja/foundation/Tabs.jinja
+++ b/src/cf_ui/templates/jinja/foundation/Tabs.jinja
@@ -1,11 +1,11 @@
 {#def tabs=[], hx_target="tab-content", active="", content="", extra_class="" #}
 {% autoescape true %}
-{% set tabs = tabs if tabs is defined else [] %}
-{% set content = content if content is defined else "" %}
-{% set active = active if active is defined else "" %}
-{% set hx_target = hx_target if hx_target is defined else "tab-content" %}
-{% set extra_class = extra_class if extra_class is defined else "" %}
-{# `.tabs-title > a[aria-selected=true]` is what actually restyles the selected
+  {% set tabs = tabs if tabs is defined else [] %}
+  {% set content = content if content is defined else "" %}
+  {% set active = active if active is defined else "" %}
+  {% set hx_target = hx_target if hx_target is defined else "tab-content" %}
+  {% set extra_class = extra_class if extra_class is defined else "" %}
+  {# `.tabs-title > a[aria-selected=true]` is what actually restyles the selected
    tab — `.is-active` on the `<li>` alone changes nothing visually — so the
    aria attribute is load-bearing for appearance here, not only for the reader.
    Both are rendered server-side and both keep their Alpine binding.
@@ -13,28 +13,34 @@
    The panel is `.tabs-content` rather than `.tabs-panel`: this widget has one
    panel that is always shown and HTMX-swapped, whereas `.tabs-panel` is
    `display: none` until `.is-active` picks one of several siblings. #}
-<div class="{{ extra_class }}"
-     x-data="cfTabs"
-     x-init="initTabs()"
-     data-cf-active="{{ active }}">
-  <ul class="tabs" role="tablist" @keydown="onKeydown($event)">
-    {% for tab in tabs %}
-    <li class="tabs-title{% if tab.id == active %} is-active{% endif %}"
-        data-cf-tab="{{ tab.id }}"
-        :class="{ 'is-active': active === $el.dataset.cfTab }">
-      <a role="tab"
-         data-cf-tab="{{ tab.id }}"
-         aria-controls="{{ hx_target }}"
-         aria-selected="{% if tab.id == active %}true{% else %}false{% endif %}"
-         tabindex="{% if tab.id == active or (not active and loop.first) %}0{% else %}-1{% endif %}"
-         :aria-selected="active === $el.dataset.cfTab"
-         :tabindex="tabIndexFor($el.dataset.cfTab)"
-         @click.prevent="setActive($el.dataset.cfTab)"
-         hx-get="{{ tab.url }}"
-         hx-target="#{{ hx_target }}">{{ tab.id }}</a>
-    </li>
-    {% endfor %}
-  </ul>
-  <div id="{{ hx_target }}" class="tabs-content" role="tabpanel">{{ content }}</div>
-</div>
+  <div
+    class="{{ extra_class }}"
+    x-data="cfTabs"
+    x-init="initTabs()"
+    data-cf-active="{{ active }}"
+  >
+    <ul class="tabs" role="tablist" @keydown="onKeydown($event)">
+      {% for tab in tabs %}
+        <li
+          class="tabs-title{% if tab.id == active %} is-active{% endif %}"
+          data-cf-tab="{{ tab.id }}"
+          :class="{ 'is-active': active === $el.dataset.cfTab }"
+        >
+          <a
+            role="tab"
+            data-cf-tab="{{ tab.id }}"
+            aria-controls="{{ hx_target }}"
+            aria-selected="{% if tab.id == active %}true{% else %}false{% endif %}"
+            tabindex="{% if tab.id == active or (not active and loop.first) %}0{% else %}-1{% endif %}"
+            :aria-selected="active === $el.dataset.cfTab"
+            :tabindex="tabIndexFor($el.dataset.cfTab)"
+            @click.prevent="setActive($el.dataset.cfTab)"
+            hx-get="{{ tab.url }}"
+            hx-target="#{{ hx_target }}"
+          >{{ tab.id }}</a>
+        </li>
+      {% endfor %}
+    </ul>
+    <div id="{{ hx_target }}" class="tabs-content" role="tabpanel">{{ content }}</div>
+  </div>
 {% endautoescape %}
diff --git a/src/cf_ui/templates/jinja/foundation/Textarea.jinja b/src/cf_ui/templates/jinja/foundation/Textarea.jinja
index 4b8dafc..0e0a358 100644
--- a/src/cf_ui/templates/jinja/foundation/Textarea.jinja
+++ b/src/cf_ui/templates/jinja/foundation/Textarea.jinja
@@ -1,19 +1,21 @@
 {#def name, label, value="", error="", rows=4, extra_class="", input_class="" #}
 {% autoescape true %}
-{% set value = value if value is defined else "" %}
-{% set error = error if error is defined else "" %}
-{% set rows = rows if rows is defined else 4 %}
-{% set extra_class = extra_class if extra_class is defined else "" %}
-{% set input_class = input_class if input_class is defined else "" %}
-<div class="{{ extra_class }}">
-  <label for="{{ name }}"{% if error %} class="is-invalid-label"{% endif %}>{{ label }}</label>
-  <textarea class="{% if error %}is-invalid-input{% endif %}{% if input_class %} {{ input_class }}{% endif %}"
-            id="{{ name }}"
-            name="{{ name }}"
-            rows="{{ rows }}"
-            {% if error %}aria-invalid="true" aria-describedby="{{ name }}-error"{% endif %}>{{ value }}</textarea>
-  {% if error %}
-  <span class="form-error is-visible" id="{{ name }}-error">{{ error }}</span>
-  {% endif %}
-</div>
+  {% set value = value if value is defined else "" %}
+  {% set error = error if error is defined else "" %}
+  {% set rows = rows if rows is defined else 4 %}
+  {% set extra_class = extra_class if extra_class is defined else "" %}
+  {% set input_class = input_class if input_class is defined else "" %}
+  <div class="{{ extra_class }}">
+    <label for="{{ name }}"{% if error %} class="is-invalid-label"{% endif %}>{{ label }}</label>
+    <textarea
+      class="{% if error %}is-invalid-input{% endif %}{% if input_class %} {{ input_class }}{% endif %}"
+      id="{{ name }}"
+      name="{{ name }}"
+      rows="{{ rows }}"
+      {% if error %}aria-invalid="true" aria-describedby="{{ name }}-error"{% endif %}
+    >{{ value }}</textarea>
+    {% if error %}
+      <span class="form-error is-visible" id="{{ name }}-error">{{ error }}</span>
+    {% endif %}
+  </div>
 {% endautoescape %}
diff --git a/src/cf_ui/templatetags/cf_ui.py b/src/cf_ui/templatetags/cf_ui.py
index 2868dde..1931b7f 100644
--- a/src/cf_ui/templatetags/cf_ui.py
+++ b/src/cf_ui/templatetags/cf_ui.py
@@ -5,6 +5,7 @@
 
 from cf_ui.axes import root_attrs, style_element
 from cf_ui.django import axis_value_sets
+from cf_ui.primitives import validate as validate_primitive
 from cf_ui.themes import cotton_partial
 
 register = template.Library()
@@ -95,6 +96,25 @@ def cf_ui_theme_path(component: str) -> str:
     return cotton_partial(component, getattr(settings, "CF_UI_THEME", None))
 
 
+@register.simple_tag
+def cf_ui_validate(component: str, **axes) -> str:
+    """Reject an out-of-vocabulary primitive prop, loudly.
+
+    Used by the primitive wrappers at ``cotton/cf/<name>.html``::
+
+        {% cf_ui_validate "button" variant=variant size=size state=state %}
+
+    The theme partials spell every class literally — they have to, or
+    Tailwind's scanner never sees them — which means an unrecognised value
+    matches no branch and renders an unstyled element. This turns that silence
+    into a ``PrimitiveConfigError`` naming the value and the ones that would
+    have worked.
+
+    Returns the empty string; it is called for its exception.
+    """
+    return validate_primitive(component, **axes)
+
+
 @register.simple_tag
 def cf_ui_body(alpine: bool = True) -> str:
     if not alpine:
diff --git a/src/cf_ui/themes.py b/src/cf_ui/themes.py
index d50de07..22ebec9 100644
--- a/src/cf_ui/themes.py
+++ b/src/cf_ui/themes.py
@@ -31,11 +31,22 @@
 DEFAULT_THEME = "bulma"
 
 #: django-cotton file stems, as used by ``<c-cf.form-field>``.
+#:
+#: A name here must have a partial under every theme in :data:`THEMES` —
+#: ``cotton_partial`` validates the name, not the file, so an unbacked entry
+#: trades a clear ``ThemeError`` for a ``TemplateDoesNotExist`` at first
+#: render. ``tests/unit/test_primitives.py`` holds this tuple against the
+#: primitives that actually ship.
 COMPONENTS = (
+    "badge",
     "breadcrumb",
+    "button",
     "card",
     "checkbox-group",
     "form-field",
+    "heading",
+    "icon",
+    "label",
     "modal",
     "navbar",
     "notification",
diff --git a/tests/unit/cotton/test_bootstrap.py b/tests/unit/cotton/test_bootstrap.py
index e17b3b3..c750e0f 100644
--- a/tests/unit/cotton/test_bootstrap.py
+++ b/tests/unit/cotton/test_bootstrap.py
@@ -8,6 +8,7 @@
 fully exercised here.
 """
 
+import re
 from pathlib import Path
 
 import pytest
@@ -80,18 +81,27 @@ def test_form_field_error_uses_bootstrap_validation_classes(bootstrap_render):
     assert "Required" in html
 
 
+#: The bare ``required`` attribute, *on the input*.
+#:
+#: A plain ``"required" in html`` would pass on the uncompiled ``<c-vars>``
+#: line, which ``render_to_string`` emits verbatim and which carries
+#: ``required="false"``. This used to be spelled ``"required>" in html``,
+#: relying on the attribute being the last thing before the closing bracket —
+#: which stopped being true the moment djLint put one attribute per line.
+#: Anchoring to the ``<input>`` tag says what was always meant and does not
+#: depend on attribute layout.
+REQUIRED_ON_INPUT = re.compile(r"<input\b[^>]*\brequired\b[^>]*>", re.S)
+
+
 def test_form_field_required_flag(bootstrap_render):
-    """`required>` rather than `required` — the uncompiled <c-vars> line the
-    wrapper emits under ``render_to_string`` contains ``required="false"``,
-    so a bare substring check passes either way."""
     html = bootstrap_render("cf/form-field.html", name="email", label="Email", required="true")
-    assert "required>" in html
+    assert REQUIRED_ON_INPUT.search(html)
 
 
 def test_form_field_not_required_by_default(bootstrap_render):
     """<c-vars required="false"> arrives as the *string* "false"."""
     html = bootstrap_render("cf/form-field.html", name="email", label="Email", required="false")
-    assert "required>" not in html
+    assert not REQUIRED_ON_INPUT.search(html)
 
 
 def test_form_field_input_class_still_applied(bootstrap_render):
diff --git a/tests/unit/cotton/test_comment_syntax.py b/tests/unit/cotton/test_comment_syntax.py
new file mode 100644
index 0000000..4c9cc9f
--- /dev/null
+++ b/tests/unit/cotton/test_comment_syntax.py
@@ -0,0 +1,78 @@
+"""A multi-line ``{# #}`` renders into the page, so no cotton template has one.
+
+Django's comment regex is ``\\{#.*?#\\}`` **without** ``DOTALL``: ``{# #}`` is a
+single-line construct. Open one on one line and close it on another and the
+lexer never forms a comment token — every line in between is emitted as
+literal text, straight into the consumer's rendered HTML. There is no error,
+no warning, and no test failure unless something looks for it, which is what
+this file does.
+
+Six shipped bootstrap and daisy partials carried the defect before #52 and
+leaked their rationale comments — several paragraphs of prose about z-index
+stacking and Tailwind layer ordering — into every page that rendered them.
+``{% comment %}…{% endcomment %}`` is the multi-line form and is what every
+cotton template uses now.
+
+This is a *cotton-only* rule. The Jinja templates in ``templates/jinja/`` run
+under Jinja2, whose ``{# #}`` spans lines perfectly well.
+"""
+
+import re
+from pathlib import Path
+
+import pytest
+
+COTTON_DIR = Path(__file__).parent.parent.parent.parent / "src" / "cf_ui" / "templates" / "cotton"
+
+#: Django's own comment pattern, minus ``DOTALL`` — deliberately mirroring the
+#: engine rather than approximating it. A match that spans a newline is
+#: therefore impossible; what this finds is a ``{#`` whose ``#}`` never arrives
+#: on the same line, which is precisely the broken shape.
+SINGLE_LINE_COMMENT = re.compile(r"\{#.*?#\}")
+
+COTTON_TEMPLATES = sorted(COTTON_DIR.rglob("*.html"))
+
+
+def _unclosed_comment_lines(source: str) -> list[tuple[int, str]]:
+    """Lines opening a ``{#`` that no ``#}`` closes before the newline."""
+    offenders = []
+    for number, line in enumerate(source.splitlines(), start=1):
+        stripped = SINGLE_LINE_COMMENT.sub("", line)
+        if "{#" in stripped:
+            offenders.append((number, line.strip()))
+    return offenders
+
+
+def test_the_template_tree_is_not_empty():
+    """Stops the parametrised guard below from passing on an empty collection."""
+    assert len(COTTON_TEMPLATES) > 50
+
+
+@pytest.mark.parametrize("template", COTTON_TEMPLATES, ids=lambda p: f"{p.parent.name}/{p.name}")
+def test_no_cotton_template_opens_a_multi_line_comment(template: Path):
+    offenders = _unclosed_comment_lines(template.read_text(encoding="utf-8"))
+    assert not offenders, (
+        f"{template.name} opens a `{{#` that does not close on the same line — "
+        f"Django will render the following lines as literal page text. Use "
+        f"`{{% comment %}}`…`{{% endcomment %}}`. Lines: {offenders}"
+    )
+
+
+# ── The guard's own behaviour, pinned ─────────────────────────────────────
+
+
+@pytest.mark.parametrize(
+    ("source", "expected_count"),
+    [
+        ("{# fine #}\n<div></div>", 0),
+        ("<div>{# also fine #}</div>", 0),
+        ("{# broken\n   across lines #}", 1),
+        ("  {# indented\n     and broken #}", 1),
+        ("{# ok #} {# broken\n#}", 1),
+        ("{% comment %}\nmany\nlines\n{% endcomment %}", 0),
+        ("<div>no comments at all</div>", 0),
+    ],
+    ids=lambda v: str(v)[:32],
+)
+def test_the_reader_flags_what_it_claims_to(source: str, expected_count: int):
+    assert len(_unclosed_comment_lines(source)) == expected_count
diff --git a/tests/unit/jinja/test_fomantic.py b/tests/unit/jinja/test_fomantic.py
index 6e701aa..348ca45 100644
--- a/tests/unit/jinja/test_fomantic.py
+++ b/tests/unit/jinja/test_fomantic.py
@@ -140,7 +140,13 @@ def test_no_fomantic_template_reaches_for_jquery_or_fomantic_js(path):
 def test_the_fomantic_template_set_is_complete():
     """Without this, the scan above could silently degrade to zero cases."""
     found = [*FOMANTIC_DIR.glob("*.jinja"), *COTTON_FOMANTIC_DIR.glob("*.html")]
-    assert len(found) == 28, f"expected 14 jinja + 14 cotton, got {sorted(p.name for p in found)}"
+    from cf_ui.themes import COMPONENTS
+
+    assert COMPONENTS, "the component registry is empty"
+    assert len(found) == 2 * len(COMPONENTS), (
+        f"expected {len(COMPONENTS)} jinja + {len(COMPONENTS)} cotton, "
+        f"got {sorted(p.name for p in found)}"
+    )
 
 
 # --- Forms -----------------------------------------------------------------
diff --git a/tests/unit/test_autoescape.py b/tests/unit/test_autoescape.py
index 0670c3b..4ab82f7 100644
--- a/tests/unit/test_autoescape.py
+++ b/tests/unit/test_autoescape.py
@@ -92,8 +92,18 @@ def test_every_component_template_carries_its_own_autoescape_block(template: Pat
 
 
 def test_the_template_count_is_what_the_guard_thinks_it_is():
-    """14 components × registered themes. A guard over an empty glob passes."""
-    assert len(_all_component_templates()) == 14 * len(THEMES)
+    """Every registered component × every registered theme.
+
+    Derived from ``themes.COMPONENTS`` rather than a literal, so adding a
+    primitive does not mean editing a number in four files (#52) — but a
+    guard over an empty glob passes, so the registry is asserted non-empty
+    first. ``test_theme_dispatch`` pins ``COMPONENTS`` itself against an
+    independent literal list, which is what keeps this from circling.
+    """
+    from cf_ui.themes import COMPONENTS
+
+    assert COMPONENTS, "the component registry is empty — this guard would pass over nothing"
+    assert len(_all_component_templates()) == len(COMPONENTS) * len(THEMES)
 
 
 # The guard's own behaviour, pinned — a lint that stops matching reports clean
diff --git a/tests/unit/test_extras_docs.py b/tests/unit/test_extras_docs.py
index b15d5c1..520df88 100644
--- a/tests/unit/test_extras_docs.py
+++ b/tests/unit/test_extras_docs.py
@@ -191,7 +191,12 @@ def test_every_cotton_wrapper_uses_the_syntax_the_floor_guarantees():
     arguing about nothing, and this test says so rather than passing quietly.
     """
     wrappers = sorted((REPO_ROOT / "src" / "cf_ui" / "templates" / "cotton" / "cf").glob("*.html"))
-    assert len(wrappers) == 14, f"expected 14 cotton wrappers, found {len(wrappers)}"
+    from cf_ui.themes import COMPONENTS
+
+    assert COMPONENTS, "the component registry is empty"
+    assert len(wrappers) == len(COMPONENTS), (
+        f"expected {len(COMPONENTS)} cotton wrappers, found {len(wrappers)}"
+    )
 
     without = [w.name for w in wrappers if "<c-vars" not in w.read_text(encoding="utf-8")]
     assert not without, f"wrappers with no <c-vars> declaration: {without}"
diff --git a/tests/unit/test_primitives.py b/tests/unit/test_primitives.py
new file mode 100644
index 0000000..f00c164
--- /dev/null
+++ b/tests/unit/test_primitives.py
@@ -0,0 +1,601 @@
+"""The primitives vocabulary is a closed set, and the templates agree with it (#52).
+
+Three things are guarded here, and the third is the one that matters.
+
+**Closed sets.** ``variant``/``size``/``state``/``level`` are fixed vocabularies,
+validated the way :mod:`cf_ui.axes` validates axis value names — an unknown
+value raises rather than being passed through.
+
+**Loudness.** A literal ``{% if variant == 'primary' %}`` chain emits *nothing*
+for a value it does not recognise. Unstyled markup is not an error anyone
+notices, so every primitive template calls the guard once and a bad prop
+raises there.
+
+**Parity.** The classes cannot be emitted from Python: daisyUI compiles through
+Tailwind, whose scanner reads source *text*, so a computed class name is
+tree-shaken out silently (see ``docs/daisyui.md``). The templates must
+therefore spell every class literally — which means two copies of the same
+knowledge, one in ``primitives.py`` and one in 10 template files. The parity
+test below is what stops them diverging; without it this module would be
+decoration.
+"""
+
+import re
+from pathlib import Path
+
+import pytest
+
+from cf_ui.primitives import (
+    ALIASES,
+    AXIS_KINDS,
+    CLASS_VALUED,
+    CLASSES,
+    EMPHASIS,
+    LEVELS,
+    PRIMITIVES,
+    SIZES,
+    STATES,
+    TYPES,
+    VARIANTS,
+    VOCABULARIES,
+    PrimitiveConfigError,
+    primitive_definition,
+    validate,
+)
+from cf_ui.themes import COMPONENTS, THEMES
+
+REPO_ROOT = Path(__file__).parent.parent.parent
+JINJA_DIR = REPO_ROOT / "src" / "cf_ui" / "templates" / "jinja"
+COTTON_THEME_DIR = REPO_ROOT / "src" / "cf_ui" / "templates" / "cotton" / "_themes"
+
+#: Components whose per-theme class maps ship in this phase. The prop contract
+#: is settled for all of Tier 1 (see ``docs/primitives.md``); the class maps
+#: land with each component's templates.
+IMPLEMENTED = ("badge", "button", "heading", "icon", "label")
+
+
+# ── The vocabularies are closed ───────────────────────────────────────────
+
+
+def test_the_vocabularies_are_registered_under_their_axis_names():
+    assert VOCABULARIES == {
+        "variant": VARIANTS,
+        "size": SIZES,
+        "state": STATES,
+        "level": LEVELS,
+        "emphasis": EMPHASIS,
+        "type": TYPES,
+    }
+
+
+def test_every_axis_declares_what_its_value_becomes():
+    """``AXIS_KINDS`` decides both the class map and the empty-value rule.
+
+    An axis missing from it would be treated as class-valued by omission —
+    which is the permissive branch on both counts, so the omission would not
+    show up as a failure anywhere else.
+    """
+    assert set(AXIS_KINDS) == set(VOCABULARIES)
+    assert set(AXIS_KINDS.values()) <= {"class", "tag", "attribute"}
+
+
+def test_class_valued_is_derived_from_the_kinds():
+    assert CLASS_VALUED == {axis for axis, kind in AXIS_KINDS.items() if kind == "class"}
+    assert CLASS_VALUED, "no class-valued axes — the parity tests would pass vacuously"
+
+
+@pytest.mark.parametrize("axis", sorted(VOCABULARIES))
+def test_no_vocabulary_is_empty(axis: str):
+    """A vocabulary that silently emptied would make every value invalid."""
+    assert VOCABULARIES[axis], f"{axis} has no values — validate() would reject everything"
+
+
+@pytest.mark.parametrize("component", sorted(PRIMITIVES))
+def test_every_primitive_declares_axes_that_exist(component: str):
+    unknown = set(PRIMITIVES[component]) - set(VOCABULARIES)
+    assert not unknown, f"{component} declares axes with no vocabulary: {sorted(unknown)}"
+
+
+@pytest.mark.parametrize("component", IMPLEMENTED)
+def test_every_implemented_primitive_is_a_registered_cotton_component(component: str):
+    """``cotton_partial`` rejects anything not in ``themes.COMPONENTS``.
+
+    Registering the name there is what makes ``<c-cf.button>`` resolvable at
+    all, so a primitive missing from that tuple is inert. Only *implemented*
+    primitives belong there — registering a name whose partial does not exist
+    turns a clear ``ThemeError`` into a ``TemplateDoesNotExist`` at first
+    render, which is strictly worse.
+    """
+    assert component in COMPONENTS
+
+
+@pytest.mark.parametrize("component", sorted(set(PRIMITIVES) - set(IMPLEMENTED)))
+def test_a_contract_only_primitive_is_not_registered_yet(component: str):
+    """The other half: nothing is registered before its templates exist."""
+    assert component not in COMPONENTS, (
+        f"{component} is registered in themes.COMPONENTS but has no partials — "
+        "add it to IMPLEMENTED once its templates land"
+    )
+
+
+# ── A bad value raises, rather than rendering unstyled ────────────────────
+
+
+def test_validate_accepts_every_declared_value():
+    for component, axes in PRIMITIVES.items():
+        for axis in axes:
+            for value in VOCABULARIES[axis]:
+                assert validate(component, **{axis: value}) == ""
+
+
+def test_validate_returns_empty_string_so_a_template_can_call_it():
+    """It is invoked for its exception, in a position that renders its result."""
+    assert validate("button", variant="primary") == ""
+
+
+@pytest.mark.parametrize(
+    ("component", "axes", "expected_fragment"),
+    [
+        ("button", {"variant": "purple"}, "purple"),
+        ("button", {"size": "enormous"}, "enormous"),
+        ("button", {"state": "hovering"}, "hovering"),
+        ("heading", {"level": "7"}, "7"),
+        ("heading", {"level": 7}, "7"),
+    ],
+    ids=lambda v: str(v)[:40],
+)
+def test_an_unknown_value_raises(component: str, axes: dict, expected_fragment: str):
+    with pytest.raises(PrimitiveConfigError) as excinfo:
+        validate(component, **axes)
+    assert expected_fragment in str(excinfo.value)
+
+
+def test_the_error_names_the_values_that_would_have_worked():
+    """A rejection that does not say what to use instead just moves the guess."""
+    with pytest.raises(PrimitiveConfigError) as excinfo:
+        validate("button", variant="purple")
+    message = str(excinfo.value)
+    for value in VARIANTS:
+        assert value in message
+
+
+def test_an_unknown_component_raises():
+    with pytest.raises(PrimitiveConfigError, match="widget"):
+        validate("widget", variant="primary")
+
+
+def test_an_axis_the_component_does_not_take_raises():
+    """``label`` has no variant. Accepting one silently would render nothing."""
+    assert "variant" not in PRIMITIVES["label"]
+    with pytest.raises(PrimitiveConfigError, match="variant"):
+        validate("label", variant="primary")
+
+
+def test_an_omitted_axis_is_not_validated():
+    """Templates pass only what they were given; a default fills in downstream."""
+    assert validate("button") == ""
+
+
+# ── An empty value: benign for a class, malformed for a tag or attribute ──
+
+
+@pytest.mark.parametrize("axis", sorted(CLASS_VALUED))
+@pytest.mark.parametrize("empty", ["", None])
+def test_an_empty_class_valued_axis_passes(axis: str, empty):
+    """Django resolves a missing context variable to ``""``.
+
+    Every cotton wrapper forwards its props unconditionally, so this branch is
+    taken on every render where the caller omitted a prop and the compiler was
+    bypassed. Dropping a class leaves a valid, unstyled element — raising here
+    would make the guard unusable.
+    """
+    component = next(c for c, axes in PRIMITIVES.items() if axis in axes)
+    assert validate(component, **{axis: empty}) == ""
+
+
+@pytest.mark.parametrize(
+    ("component", "axis"),
+    [("heading", "level"), ("button", "type")],
+)
+@pytest.mark.parametrize("empty", ["", None])
+def test_an_empty_tag_or_attribute_axis_raises(component: str, axis: str, empty):
+    """``<h{{ level }}>`` with nothing in it renders ``<h>``.
+
+    Not an element. Browsers parse it as an unknown inline, so it keeps the
+    ``title`` class and looks right while being absent from the document
+    outline and unreachable by screen-reader heading navigation — the silent
+    failure this whole module exists to convert into an exception.
+
+    ``type=""`` is the same shape: HTML's missing-value default for an invalid
+    ``<button type>`` is ``submit``, so an empty one submits the form.
+    """
+    with pytest.raises(PrimitiveConfigError, match=axis):
+        validate(component, **{axis: empty})
+
+
+def test_the_empty_value_error_says_why_and_what_to_pass():
+    with pytest.raises(PrimitiveConfigError) as excinfo:
+        validate("heading", level="")
+    message = str(excinfo.value)
+    assert "tag" in message
+    for level in LEVELS:
+        assert level in message
+
+
+def test_an_empty_value_for_an_axis_the_component_does_not_take_still_passes():
+    """The ``for`` trip-wire depends on this.
+
+    ``label`` declares no ``level``, so an empty one is not the component's
+    problem — and the wrapper forwards ``for=for`` on every render, which
+    resolves to ``""`` whenever the caller spelled it correctly.
+    """
+    assert validate("label", level="") == ""
+    assert validate("label", **{"for": ""}) == ""
+
+
+def test_an_invalid_button_type_raises():
+    """HTML's fallback for an invalid ``type`` is ``submit``, not ``button``.
+
+    So a typo does not render an inert button — it renders one that submits
+    the enclosing form. cf-ui defaults to ``button`` to avoid exactly that.
+    """
+    with pytest.raises(PrimitiveConfigError, match="sumbit"):
+        validate("button", type="sumbit")
+
+
+@pytest.mark.parametrize("value", TYPES)
+def test_every_html_button_type_is_accepted(value: str):
+    assert validate("button", type=value) == ""
+
+
+# ── Declared aliases: the HTML spelling raises instead of vanishing ───────
+
+
+def test_every_alias_targets_a_real_prop_on_a_real_primitive():
+    for component, aliases in ALIASES.items():
+        assert component in PRIMITIVES, f"alias table names unknown primitive {component!r}"
+        for html_name, cf_name in aliases.items():
+            assert html_name != cf_name
+            assert html_name not in PRIMITIVES[component], (
+                f"{html_name!r} is a real axis of {component} — it cannot also be an alias"
+            )
+
+
+@pytest.mark.parametrize(
+    ("component", "html_name", "cf_name"),
+    [(c, h, f) for c, m in ALIASES.items() for h, f in m.items()],
+)
+def test_a_declared_alias_raises_and_names_the_prop_that_works(
+    component: str, html_name: str, cf_name: str
+):
+    """django-cotton accepts an undeclared attribute and drops it.
+
+    ``<c-cf.label for="email">`` would render a ``<label>`` with no ``for``:
+    valid HTML, broken label/control association, no error. The wrapper
+    forwards the HTML spelling into the guard so it raises here instead.
+    """
+    with pytest.raises(PrimitiveConfigError) as excinfo:
+        validate(component, **{html_name: "anything"})
+    assert cf_name in str(excinfo.value)
+
+
+def test_the_correctly_spelled_prop_is_not_an_axis_and_is_not_validated():
+    """``for_id`` is a plain string prop — it has no vocabulary to check.
+
+    Passing it must not raise, or the alias fix would have closed the wrong
+    door.
+    """
+    assert validate("label", size="large") == ""
+
+
+# ── Every theme covers every value ────────────────────────────────────────
+
+
+@pytest.mark.parametrize("theme", THEMES)
+@pytest.mark.parametrize("component", IMPLEMENTED)
+def test_every_theme_maps_every_value_of_every_axis(theme: str, component: str):
+    """A missing key is an unstyled variant, which review does not catch.
+
+    Class-valued axes only: a tag- or attribute-valued axis has no class to
+    map, and ``level`` previously carried thirty empty strings to satisfy this
+    check rather than because they meant anything.
+    """
+    mapping = CLASSES[theme][component]
+    for axis in PRIMITIVES[component]:
+        if axis not in CLASS_VALUED:
+            continue
+        missing = set(VOCABULARIES[axis]) - set(mapping.get(axis, {}))
+        assert not missing, f"{theme}/{component} has no {axis} class for {sorted(missing)}"
+
+
+@pytest.mark.parametrize("theme", THEMES)
+@pytest.mark.parametrize("component", IMPLEMENTED)
+def test_no_theme_maps_a_non_class_axis(theme: str, component: str):
+    """The other direction: a class map for ``level`` or ``type`` is dead data.
+
+    Without this, dropping the axis from :data:`CLASS_VALUED` would leave the
+    stale map in place and nothing would say so.
+    """
+    stale = set(CLASSES[theme][component]) - CLASS_VALUED - {"base"}
+    assert not stale, f"{theme}/{component} maps non-class axes {sorted(stale)}"
+
+
+@pytest.mark.parametrize("theme", THEMES)
+@pytest.mark.parametrize("component", IMPLEMENTED)
+def test_no_theme_maps_a_value_outside_the_vocabulary(theme: str, component: str):
+    mapping = CLASSES[theme][component]
+    for axis, values in mapping.items():
+        if axis == "base":  # a bare class string, not an axis
+            continue
+        assert axis in VOCABULARIES, f"{theme}/{component} maps a non-axis key {axis!r}"
+        extra = set(values) - set(VOCABULARIES[axis])
+        assert not extra, f"{theme}/{component} maps unknown {axis} values {sorted(extra)}"
+
+
+@pytest.mark.parametrize("theme", THEMES)
+def test_every_theme_has_a_base_class_entry(theme: str):
+    for component in IMPLEMENTED:
+        assert "base" in CLASSES[theme][component]
+
+
+# ── Templates and the map agree ───────────────────────────────────────────
+
+
+def _literal_classes(text: str) -> set[str]:
+    """Every class token spelled literally in a ``class="..."`` attribute.
+
+    Deliberately naive: it reads source text, which is exactly what Tailwind's
+    scanner does. Jinja/Django expressions inside the attribute are dropped, so
+    what is left is what survives tree-shaking.
+    """
+    tokens: set[str] = set()
+    for attr in re.findall(r'class="([^"]*)"', text):
+        attr = re.sub(r"\{\{.*?\}\}|\{%.*?%\}", " ", attr, flags=re.S)
+        tokens.update(t for t in attr.split() if t)
+    return tokens
+
+
+def _mapped_classes(theme: str, component: str) -> set[str]:
+    tokens: set[str] = set()
+    for axis, values in CLASSES[theme][component].items():
+        entries = [values] if axis == "base" else list(values.values())
+        for entry in entries:
+            tokens.update(str(entry).split())
+    return tokens
+
+
+@pytest.mark.parametrize("theme", THEMES)
+@pytest.mark.parametrize("component", IMPLEMENTED)
+def test_the_jinja_template_spells_every_mapped_class_literally(theme: str, component: str):
+    """The Tailwind constraint, enforced.
+
+    ``docs/daisyui.md``: a computed class name is removed from the build with
+    no error and an unstyled page as the only symptom. So every class in the
+    map has to appear as source text.
+    """
+    path = JINJA_DIR / theme / f"{component.title()}.jinja"
+    missing = _mapped_classes(theme, component) - _literal_classes(path.read_text(encoding="utf-8"))
+    assert not missing, (
+        f"{path.relative_to(REPO_ROOT)} never spells {sorted(missing)} literally — "
+        "Tailwind's scanner reads source text, so these would be tree-shaken away"
+    )
+
+
+@pytest.mark.parametrize("theme", THEMES)
+@pytest.mark.parametrize("component", IMPLEMENTED)
+def test_the_cotton_partial_spells_every_mapped_class_literally(theme: str, component: str):
+    path = COTTON_THEME_DIR / theme / f"{component}.html"
+    missing = _mapped_classes(theme, component) - _literal_classes(path.read_text(encoding="utf-8"))
+    assert not missing, f"{path.relative_to(REPO_ROOT)} never spells {sorted(missing)} literally"
+
+
+@pytest.mark.parametrize("theme", THEMES)
+@pytest.mark.parametrize("component", IMPLEMENTED)
+def test_the_templates_introduce_no_class_the_map_does_not_know(theme: str, component: str):
+    """The other direction — otherwise the map documents a subset of reality.
+
+    Layout and utility classes that carry no axis meaning are allowed through
+    by name, so the exemption is itself reviewable.
+    """
+    allowed = _mapped_classes(theme, component) | ALLOWED_UTILITY_CLASSES[component]
+    for path in (
+        JINJA_DIR / theme / f"{component.title()}.jinja",
+        COTTON_THEME_DIR / theme / f"{component}.html",
+    ):
+        extra = _literal_classes(path.read_text(encoding="utf-8")) - allowed
+        assert not extra, (
+            f"{path.relative_to(REPO_ROOT)} uses {sorted(extra)}, which primitives.py "
+            "does not declare — add it to the map, or to ALLOWED_UTILITY_CLASSES "
+            "if it genuinely carries no axis meaning"
+        )
+
+
+#: Classes that appear in a primitive template without belonging to an axis.
+#:
+#: Keyed **per component** rather than shared. ``label`` needs to wave through
+#: tokens as generic as ``ui``, ``text``, ``form`` and ``field`` — Fomantic
+#: styles labels by ancestry, so the partial renders the required
+#: ``.ui.form > .field`` wrappers. Allowing those package-wide would gut the
+#: check for every other primitive, which is the one thing this list must not
+#: do. Small and explicit on purpose: an open-ended allowance turns the test
+#: above into a no-op.
+ALLOWED_UTILITY_CLASSES: dict[str, set[str]] = {
+    "button": {
+        "is-fullwidth",  # bulma
+        "w-100",  # bootstrap
+        "expanded",  # foundation
+        "fluid",  # fomantic
+        "btn-block",  # daisy
+        "loading",  # daisy spinner element
+        "loading-spinner",
+        "spinner-border",  # bootstrap spinner element
+        "spinner-border-sm",
+    },
+    "badge": set(),
+    "heading": set(),
+    "icon": set(),
+    "label": {
+        # The required indicator's colour, per theme. Not an axis: `label`
+        # takes no variant, and this is the only coloured thing it renders.
+        "has-text-danger",  # bulma
+        "text-danger",  # bootstrap
+        "text-error",  # daisy
+        "red",  # fomantic, as span.ui.red.text
+        # Structural wrappers Fomantic requires: its only label rule is
+        # `.ui.form .field > label`, so the ancestry has to be rendered.
+        "ui",
+        "text",
+        "form",
+        "field",
+        # daisy puts the size class on this inner span, not the outer label.
+        "label-text",
+    },
+}
+
+
+def _guard_call(source: str, component: str) -> str:
+    """The text of the ``cf_ui_validate`` call for ``component``.
+
+    Both spellings are one call on one line — Jinja's
+    ``{{ cf_ui_validate("button", variant=variant, ...) }}`` and Django's
+    ``{% cf_ui_validate "button" variant=variant ... %}`` — so the enclosing
+    delimiter is enough to bound it. Jinja's whitespace-control dashes are
+    optional and some templates carry them.
+    """
+    match = re.search(r"\{[{%]-?\s*cf_ui_validate\b.*?-?[}%]\}", source, flags=re.S)
+    assert match, f"no cf_ui_validate call found for {component}"
+    return match.group(0)
+
+
+def _assert_guard_covers_every_axis(source: str, component: str, where: str) -> None:
+    """Calling the guard is not enough — it has to be *passed* every axis.
+
+    A guard invoked as ``cf_ui_validate("heading", level=level, size=size)``
+    passes cleanly on ``emphasis="loud"``, which then matches no branch of the
+    literal chain and renders unstyled. Presence of the call name is what the
+    earlier version of this check tested, and dropping ``emphasis=emphasis``
+    survived it.
+    """
+    call = _guard_call(source, component)
+    for axis in PRIMITIVES[component]:
+        assert f"{axis}=" in call, f"{where} calls the guard without passing {axis!r}: {call}"
+
+
+@pytest.mark.parametrize("theme", THEMES)
+@pytest.mark.parametrize("component", IMPLEMENTED)
+def test_every_jinja_primitive_calls_the_guard(theme: str, component: str):
+    """Without the call, an unknown value renders unstyled instead of raising.
+
+    Per theme on the Jinja side, because JinjaX resolves the component
+    directly to the theme's file — there is no shared wrapper to hold it.
+    """
+    jinja = (JINJA_DIR / theme / f"{component.title()}.jinja").read_text(encoding="utf-8")
+    assert "cf_ui_validate" in jinja, f"jinja/{theme}/{component} does not call the guard"
+    _assert_guard_covers_every_axis(jinja, component, f"jinja/{theme}/{component}")
+
+
+@pytest.mark.parametrize("component", IMPLEMENTED)
+def test_the_cotton_wrapper_calls_the_guard(component: str):
+    """Once, on the wrapper — cotton's partials are reached through it.
+
+    ``cotton/cf/<name>.html`` is the only file a consumer's ``<c-cf.button>``
+    touches directly, and it is theme-independent, so the check belongs there
+    rather than being copied into five partials that could each drop it.
+    """
+    wrapper = REPO_ROOT / "src" / "cf_ui" / "templates" / "cotton" / "cf" / f"{component}.html"
+    source = wrapper.read_text(encoding="utf-8")
+    assert "cf_ui_validate" in source
+    _assert_guard_covers_every_axis(source, component, f"cotton/cf/{component}")
+
+
+# ── `for` is not a prop, and saying it is must not fail silently ──────────
+
+
+def test_a_stray_for_attribute_on_the_cotton_label_raises():
+    """``<c-cf.label for="email">`` is the mistake this trip-wire exists for.
+
+    The attribute is ``for_id``, because ``for`` is a Python reserved word and
+    JinjaX cannot express it. django-cotton *can*, so the wrong spelling is
+    accepted by the compiler and produces a ``<label>`` with no ``for``
+    attribute at all — valid HTML, broken label/control association, no error.
+    The wrapper routes the value through the guard, which declares no ``for``
+    axis, so a non-empty one raises.
+    """
+    from django.template.loader import render_to_string
+
+    with pytest.raises(PrimitiveConfigError, match="takes no 'for'"):
+        render_to_string("cotton/cf/label.html", {"for": "email", "slot": "Email"})
+
+
+def test_the_correct_spelling_renders_the_for_attribute():
+    """The other half of the trip-wire: ``for_id`` must still work.
+
+    Without this, the test above would also pass on a wrapper that rejected
+    every label.
+    """
+    from django.template.loader import render_to_string
+
+    html = render_to_string("cotton/cf/label.html", {"for_id": "email", "slot": "Email"})
+    assert 'for="email"' in html
+
+
+def test_an_absent_for_does_not_trip_the_wire():
+    """Django resolves a missing context variable to ``""``, and ``validate``
+    skips empty values — which is the only reason the trip-wire can sit in the
+    call unconditionally."""
+    from django.template.loader import render_to_string
+
+    assert "<label" in render_to_string("cotton/cf/label.html", {"slot": "Email"})
+
+
+# ── The JSON export the Tailwind plugin reads ─────────────────────────────
+
+
+def test_the_definition_carries_the_vocabularies_and_classes():
+    definition = primitive_definition()
+    assert definition["vocabularies"] == {k: list(v) for k, v in VOCABULARIES.items()}
+    assert definition["primitives"] == {k: list(v) for k, v in PRIMITIVES.items()}
+    assert set(definition["classes"]) == set(THEMES)
+
+
+def test_the_definition_is_a_copy():
+    """Callers mutate freely — ``axis_definition`` makes the same promise."""
+    definition = primitive_definition()
+    definition["classes"].clear()
+    assert set(primitive_definition()["classes"]) == set(THEMES)
+
+
+def test_the_generated_json_matches_the_module():
+    """``just primitives`` output is committed; drift fails here, not in review."""
+    import json
+
+    from cf_ui.primitives import PRIMITIVE_DEFINITION_PATH
+
+    on_disk = json.loads(PRIMITIVE_DEFINITION_PATH.read_text(encoding="utf-8"))
+    assert on_disk == primitive_definition(), (
+        "cf_ui_primitives.json is stale — run `just primitives` and commit the result"
+    )
+
+
+# ── The guard's own behaviour, pinned ─────────────────────────────────────
+
+
+@pytest.mark.parametrize(
+    ("source", "expected"),
+    [
+        ('<a class="button is-primary">', {"button", "is-primary"}),
+        ('<a class="btn {{ extra_class }}">', {"btn"}),
+        ('<a class="btn {% if x %}btn-sm{% endif %}">', {"btn", "btn-sm"}),
+        ('<a class="{{ v }}">', set()),
+        ("<a>", set()),
+    ],
+    ids=lambda v: str(v)[:40],
+)
+def test_the_literal_class_reader_flags_what_it_claims_to(source: str, expected: set):
+    """Pinned because the parity tests are only as good as this parser.
+
+    The third case is the important one: a class inside an ``{% if %}`` *is*
+    source text and does survive tree-shaking, so it must be read, while the
+    surrounding tag syntax must not.
+    """
+    assert _literal_classes(source) == expected
diff --git a/tests/unit/test_tailwind_content.py b/tests/unit/test_tailwind_content.py
index 7d333b6..5e908b2 100644
--- a/tests/unit/test_tailwind_content.py
+++ b/tests/unit/test_tailwind_content.py
@@ -113,7 +113,12 @@ def test_documentation_publishes_the_same_glob():
 
 def test_the_daisy_template_set_is_complete():
     """Without this, the parametrized scan below silently degrades to a skip."""
-    assert len(DAISY_TEMPLATES) == 28, f"expected 14 jinja + 14 cotton, got {DAISY_TEMPLATES}"
+    from cf_ui.themes import COMPONENTS
+
+    assert COMPONENTS, "the component registry is empty"
+    assert len(DAISY_TEMPLATES) == 2 * len(COMPONENTS), (
+        f"expected {len(COMPONENTS)} jinja + {len(COMPONENTS)} cotton, got {DAISY_TEMPLATES}"
+    )
 
 
 @pytest.mark.parametrize("template", DAISY_TEMPLATES, ids=lambda p: p.name)
diff --git a/tests/unit/test_theme_dispatch.py b/tests/unit/test_theme_dispatch.py
index 34cc448..10523a6 100644
--- a/tests/unit/test_theme_dispatch.py
+++ b/tests/unit/test_theme_dispatch.py
@@ -21,10 +21,15 @@
 
 # Cotton file stems (hyphenated), as used by <c-cf.form-field>.
 COMPONENT_STEMS = [
+    "badge",
     "breadcrumb",
+    "button",
     "card",
     "checkbox-group",
     "form-field",
+    "heading",
+    "icon",
+    "label",
     "modal",
     "navbar",
     "notification",
@@ -237,6 +242,23 @@ def test_switching_the_setting_switches_the_rendered_markup(settings, stem):
         # DaisyUI both spell a plain info alert `alert alert-info`, and the
         # themes only diverge once the dismiss control is rendered.
         "dismissible": "true",
+        # Same reason, for the primitives (#52). Their whole point is that a
+        # bare element is theme-neutral and the *axes* carry the framework's
+        # vocabulary — so with no props several themes coincide legitimately:
+        # Bulma and Foundation both call a button's base class `button`,
+        # daisyUI mirrors Bootstrap's `btn`, and an icon's base is empty in
+        # both Bootstrap and Foundation. They diverge once an axis is set,
+        # which is what this dict now does.
+        "state": "loading",
+        "variant": "danger",
+        "size": "large",
+        "emphasis": "subtle",
+        # These two are not merely restated defaults: `level` becomes the tag
+        # name and `type` an attribute value, so an empty one is malformed
+        # rather than unstyled and the guard rejects it (#52 review, F1/F2).
+        # Without the compiler to apply <c-vars>, they have to come from here.
+        "level": "3",
+        "type": "submit",
     }
 
     rendered = {}