From 5e7ff8f3aff626528b2231137b00dc3fd1c820a6 Mon Sep 17 00:00:00 2001
From: Francis Secada <francis.secada@gmail.com>
Date: Wed, 19 Aug 2026 20:39:31 -0400
Subject: [PATCH 1/2] feat(primitives): attrs passthrough on Icon, Badge, Box,
 CheckboxGroup (#70)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Rolls out the attrs-passthrough shape from Button (#72/#73) and Select/
Textarea/FormField (#76/#77) to the remaining interactive-set primitives
from #70: Icon, Badge, Box, and CheckboxGroup, across both engines and
all five themes.

CheckboxGroup departs from the established "control, not wrapper" rule:
it renders N checkbox inputs from `choices` with no single control to
target, so attrs lands on the outer wrapper element instead — a
deliberate design decision, tested and documented.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Ur2c6d3peuerUGgRdJ6Fvs
---
 docs/components.md                            |   3 +
 docs/primitives.md                            |  14 +-
 src/cf_ui/primitives.py                       |   8 +
 .../cotton/_themes/bootstrap/badge.html       |   2 +
 .../cotton/_themes/bootstrap/box.html         |   2 +
 .../_themes/bootstrap/checkbox-group.html     |   6 +-
 .../cotton/_themes/bootstrap/icon.html        |   2 +
 .../templates/cotton/_themes/bulma/badge.html |   2 +
 .../templates/cotton/_themes/bulma/box.html   |   6 +-
 .../cotton/_themes/bulma/checkbox-group.html  |   6 +-
 .../templates/cotton/_themes/bulma/icon.html  |   2 +
 .../templates/cotton/_themes/daisy/badge.html |   2 +
 .../templates/cotton/_themes/daisy/box.html   |   2 +
 .../cotton/_themes/daisy/checkbox-group.html  |   6 +-
 .../templates/cotton/_themes/daisy/icon.html  |   2 +
 .../cotton/_themes/fomantic/badge.html        |   2 +
 .../cotton/_themes/fomantic/box.html          |   2 +
 .../_themes/fomantic/checkbox-group.html      |   6 +-
 .../cotton/_themes/fomantic/icon.html         |   2 +
 .../cotton/_themes/foundation/badge.html      |   2 +
 .../cotton/_themes/foundation/box.html        |   2 +
 .../_themes/foundation/checkbox-group.html    |   6 +-
 .../cotton/_themes/foundation/icon.html       |   2 +
 src/cf_ui/templates/cotton/cf/badge.html      |   7 +-
 src/cf_ui/templates/cotton/cf/box.html        |   6 +-
 .../templates/cotton/cf/checkbox-group.html   |   1 +
 src/cf_ui/templates/cotton/cf/icon.html       |   7 +-
 .../templates/jinja/bootstrap/Badge.jinja     |   4 +-
 src/cf_ui/templates/jinja/bootstrap/Box.jinja |   4 +-
 .../jinja/bootstrap/CheckboxGroup.jinja       |   8 +-
 .../templates/jinja/bootstrap/Icon.jinja      |   4 +-
 src/cf_ui/templates/jinja/bulma/Badge.jinja   |   4 +-
 src/cf_ui/templates/jinja/bulma/Box.jinja     |   8 +-
 .../templates/jinja/bulma/CheckboxGroup.jinja |   8 +-
 src/cf_ui/templates/jinja/bulma/Icon.jinja    |   4 +-
 src/cf_ui/templates/jinja/daisy/Badge.jinja   |   4 +-
 src/cf_ui/templates/jinja/daisy/Box.jinja     |   4 +-
 .../templates/jinja/daisy/CheckboxGroup.jinja |   8 +-
 src/cf_ui/templates/jinja/daisy/Icon.jinja    |   4 +-
 .../templates/jinja/fomantic/Badge.jinja      |   4 +-
 src/cf_ui/templates/jinja/fomantic/Box.jinja  |   4 +-
 .../jinja/fomantic/CheckboxGroup.jinja        |   8 +-
 src/cf_ui/templates/jinja/fomantic/Icon.jinja |   4 +-
 .../templates/jinja/foundation/Badge.jinja    |   4 +-
 .../templates/jinja/foundation/Box.jinja      |   4 +-
 .../jinja/foundation/CheckboxGroup.jinja      |   8 +-
 .../templates/jinja/foundation/Icon.jinja     |   4 +-
 .../test_checkbox_group_attrs_passthrough.py  |  99 ++++++++++++
 .../test_icon_badge_box_attrs_passthrough.py  | 134 +++++++++++++++
 .../test_checkbox_group_attrs_passthrough.py  | 114 +++++++++++++
 .../test_icon_badge_box_attrs_passthrough.py  | 152 ++++++++++++++++++
 51 files changed, 675 insertions(+), 38 deletions(-)
 create mode 100644 tests/unit/cotton/test_checkbox_group_attrs_passthrough.py
 create mode 100644 tests/unit/cotton/test_icon_badge_box_attrs_passthrough.py
 create mode 100644 tests/unit/jinja/test_checkbox_group_attrs_passthrough.py
 create mode 100644 tests/unit/jinja/test_icon_badge_box_attrs_passthrough.py

diff --git a/docs/components.md b/docs/components.md
index e9e3bdf..fd7fab5 100644
--- a/docs/components.md
+++ b/docs/components.md
@@ -46,6 +46,7 @@ an unstyled element.
 | `variant` | `"neutral"` | |
 | `size` | `"normal"` | Inert on Bootstrap and Foundation |
 | `extra_class` | `""` | |
+| `attrs` | `{}` | Extra HTML attributes — see [Attribute passthrough](primitives.md#attribute-passthrough) |
 
 ### `Cf:Heading` / `<c-cf.heading>`
 
@@ -72,6 +73,7 @@ an unstyled element.
 | `size` | `"normal"` | Inert on Foundation |
 | `label` | `""` | Empty ⇒ `aria-hidden`. Non-empty ⇒ `role="img"` + that name |
 | `extra_class` | `""` | |
+| `attrs` | `{}` | Extra HTML attributes — see [Attribute passthrough](primitives.md#attribute-passthrough) |
 
 cf-ui ships no icons — put your own `<i>` or `<svg>` in the slot.
 
@@ -124,6 +126,7 @@ A labelled input with error display.
 | `selected` | `[]` | List of checked values |
 | `error` | `""` | |
 | `extra_class` / `control_class` | `""` | |
+| `attrs` | `{}` | Extra HTML attributes, on the **wrapper** — not a per-choice `<input>`. See [Attribute passthrough](primitives.md#attribute-passthrough) |
 
 ## Feedback
 
diff --git a/docs/primitives.md b/docs/primitives.md
index 96b87a8..a0471cd 100644
--- a/docs/primitives.md
+++ b/docs/primitives.md
@@ -265,9 +265,14 @@ JinjaX's own arg-filtering routes it straight into that prop before
 caller's real prop, if also passed, wins). This is a JinjaX-level gap, not
 a cf-ui one; never pass one of a component's own prop names through
 `attrs`/`_attrs` — pass it as that prop directly. See
-[Escaping](escaping.md). Ships today on `Button`, `Select`, `Textarea` and
-`FormField` (#76, #77) — the same shape is expected to roll out to the rest
-of Tier 1 as separate follow-up work.
+[Escaping](escaping.md). Ships today on `Button`, `Select`, `Textarea`,
+`FormField` (#76, #77), `Icon`, `Badge`, `Box` and `CheckboxGroup` (#70).
+
+`CheckboxGroup` is the one exception to "the control, not the wrapper": it
+renders N `<input type="checkbox">` elements from `choices`, so there is no
+single control to target. `attrs` lands on the outer wrapper element instead
+(the `field`/`mb-3`/`form-control`/`ui form`/`fieldset` container) — see its
+entry in [Components](components.md#cfcheckboxgroup-c-cfcheckbox-group).
 
 ### Disabled links
 
@@ -290,6 +295,7 @@ so it renders a real `<button disabled>`.
 | `variant` | `"neutral"` | |
 | `size` | `"normal"` | Inert on Bootstrap and Foundation |
 | `extra_class` / `class` | `""` | |
+| `attrs` | `{}` | See [Attribute passthrough](#attribute-passthrough) above |
 | slot | — | The badge text |
 
 Renders a `<span>` on every theme, with no `role` and no ARIA. `role="status"`
@@ -370,6 +376,7 @@ print and high-contrast stylesheets, and its announcement is inconsistent.
 | `size` | `"normal"` | Inert on Foundation; mixed scale on Bootstrap |
 | `label` | `""` | Empty ⇒ decorative. Non-empty ⇒ the accessible name |
 | `extra_class` / `class` | `""` | |
+| `attrs` | `{}` | See [Attribute passthrough](#attribute-passthrough) above. `role`, `aria-label` and `aria-hidden` are reserved — pass `label` instead |
 | slot | — | Your `<i>`, `<svg>`, or `<span>` |
 
 The accessibility decision is most of what this component buys you, and it is
@@ -401,6 +408,7 @@ choose its consumers' icon vendor.
 |---|---|---|
 | `variant` | `"neutral"` | Inert on Bulma — see below |
 | `extra_class` / `class` | `""` | |
+| `attrs` | `{}` | See [Attribute passthrough](#attribute-passthrough) above |
 | slot | — | Arbitrary content |
 
 `box` is a plain bordered or elevated container: one element, no imposed
diff --git a/src/cf_ui/primitives.py b/src/cf_ui/primitives.py
index e2bd68e..a026531 100644
--- a/src/cf_ui/primitives.py
+++ b/src/cf_ui/primitives.py
@@ -813,6 +813,14 @@ def validate(component: str, **axes: Any) -> str:
             "aria-describedby",
         }
     ),
+    "icon": frozenset({"class", "role", "aria-label", "aria-hidden"}),
+    "badge": frozenset({"class"}),
+    "box": frozenset({"class"}),
+    # Rendered on the field wrapper, not a per-choice checkbox — see
+    # docs/primitives.md: unlike the other form controls, checkbox-group has
+    # no single control to target (it renders N inputs from `choices`), so
+    # `attrs` lands on the one element the call site actually identifies.
+    "checkbox-group": frozenset({"class"}),
 }
 
 
diff --git a/src/cf_ui/templates/cotton/_themes/bootstrap/badge.html b/src/cf_ui/templates/cotton/_themes/bootstrap/badge.html
index fb433d6..0f759f1 100644
--- a/src/cf_ui/templates/cotton/_themes/bootstrap/badge.html
+++ b/src/cf_ui/templates/cotton/_themes/bootstrap/badge.html
@@ -1,3 +1,5 @@
+{% load cf_ui %}
 <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 %}"
+  {% cf_ui_render_attrs "badge" attrs %}
 >{{ slot }}</span>
diff --git a/src/cf_ui/templates/cotton/_themes/bootstrap/box.html b/src/cf_ui/templates/cotton/_themes/bootstrap/box.html
index 92f8e35..76b4fbd 100644
--- a/src/cf_ui/templates/cotton/_themes/bootstrap/box.html
+++ b/src/cf_ui/templates/cotton/_themes/bootstrap/box.html
@@ -1,7 +1,9 @@
+{% load cf_ui %}
 {% comment %}Bootstrap has no box component. `card` would be wrong — it imposes a
 header/body/footer structure the caller cannot opt out of — so this is the
 utility composition Bootstrap's own docs reach for. `neutral` maps to nothing
 because `.border` already sets the default border colour.{% endcomment %}
 <div
   class="border rounded p-3{% if variant == 'primary' %} border-primary{% elif variant == 'secondary' %} border-secondary{% elif variant == 'success' %} border-success{% elif variant == 'warning' %} border-warning{% elif variant == 'danger' %} border-danger{% elif variant == 'info' %} border-info{% endif %}{% if class %} {{ class }}{% endif %}"
+  {% cf_ui_render_attrs "box" attrs %}
 >{{ slot }}</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 b5b70f8..6ef628f 100644
--- a/src/cf_ui/templates/cotton/_themes/bootstrap/checkbox-group.html
+++ b/src/cf_ui/templates/cotton/_themes/bootstrap/checkbox-group.html
@@ -1,4 +1,8 @@
-<div class="mb-3 {{ class }}">
+{% load cf_ui %}
+<div
+  class="mb-3 {{ class }}"
+  {% cf_ui_render_attrs "checkbox-group" attrs %}
+>
   <label class="form-label">{{ label }}</label>
   <div{% if control_class %} class="{{ control_class }}"{% endif %}>
     {% for choice in choices %}
diff --git a/src/cf_ui/templates/cotton/_themes/bootstrap/icon.html b/src/cf_ui/templates/cotton/_themes/bootstrap/icon.html
index f01e5de..2680ebb 100644
--- a/src/cf_ui/templates/cotton/_themes/bootstrap/icon.html
+++ b/src/cf_ui/templates/cotton/_themes/bootstrap/icon.html
@@ -1,4 +1,6 @@
+{% load cf_ui %}
 <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 %}
+  {% cf_ui_render_attrs "icon" attrs %}
 >{{ slot }}</span>
diff --git a/src/cf_ui/templates/cotton/_themes/bulma/badge.html b/src/cf_ui/templates/cotton/_themes/bulma/badge.html
index 358ff47..6c8449a 100644
--- a/src/cf_ui/templates/cotton/_themes/bulma/badge.html
+++ b/src/cf_ui/templates/cotton/_themes/bulma/badge.html
@@ -1,3 +1,5 @@
+{% load cf_ui %}
 <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 %}"
+  {% cf_ui_render_attrs "badge" attrs %}
 >{{ slot }}</span>
diff --git a/src/cf_ui/templates/cotton/_themes/bulma/box.html b/src/cf_ui/templates/cotton/_themes/bulma/box.html
index 41bad2b..7a09f51 100644
--- a/src/cf_ui/templates/cotton/_themes/bulma/box.html
+++ b/src/cf_ui/templates/cotton/_themes/bulma/box.html
@@ -1,4 +1,8 @@
+{% load cf_ui %}
 {% comment %}Bulma ships no colour modifier for `.box`, so `variant` is inert here.
 `has-background-*` exists but sets a saturated background without touching text
 colour, which would render unreadable rather than themed.{% endcomment %}
-<div class="box{% if class %} {{ class }}{% endif %}">{{ slot }}</div>
+<div
+  class="box{% if class %} {{ class }}{% endif %}"
+  {% cf_ui_render_attrs "box" attrs %}
+>{{ slot }}</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 2fa07ef..9289def 100644
--- a/src/cf_ui/templates/cotton/_themes/bulma/checkbox-group.html
+++ b/src/cf_ui/templates/cotton/_themes/bulma/checkbox-group.html
@@ -1,4 +1,8 @@
-<div class="field {{ class }}">
+{% load cf_ui %}
+<div
+  class="field {{ class }}"
+  {% cf_ui_render_attrs "checkbox-group" attrs %}
+>
   <label class="label">{{ label }}</label>
   <div class="control{% if control_class %} {{ control_class }}{% endif %}">
     {% for choice in choices %}
diff --git a/src/cf_ui/templates/cotton/_themes/bulma/icon.html b/src/cf_ui/templates/cotton/_themes/bulma/icon.html
index d5cc94e..96b744c 100644
--- a/src/cf_ui/templates/cotton/_themes/bulma/icon.html
+++ b/src/cf_ui/templates/cotton/_themes/bulma/icon.html
@@ -1,4 +1,6 @@
+{% load cf_ui %}
 <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 %}
+  {% cf_ui_render_attrs "icon" attrs %}
 >{{ slot }}</span>
diff --git a/src/cf_ui/templates/cotton/_themes/daisy/badge.html b/src/cf_ui/templates/cotton/_themes/daisy/badge.html
index dec6968..d923867 100644
--- a/src/cf_ui/templates/cotton/_themes/daisy/badge.html
+++ b/src/cf_ui/templates/cotton/_themes/daisy/badge.html
@@ -1,3 +1,5 @@
+{% load cf_ui %}
 <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 %}"
+  {% cf_ui_render_attrs "badge" attrs %}
 >{{ slot }}</span>
diff --git a/src/cf_ui/templates/cotton/_themes/daisy/box.html b/src/cf_ui/templates/cotton/_themes/daisy/box.html
index 8ccafff..552e837 100644
--- a/src/cf_ui/templates/cotton/_themes/daisy/box.html
+++ b/src/cf_ui/templates/cotton/_themes/daisy/box.html
@@ -1,3 +1,4 @@
+{% load cf_ui %}
 {% comment %}The border colour lives entirely in the variant, `neutral` included.
 Splitting it — a default colour in the base and an override in the variant —
 puts two border-color utilities of equal specificity on one element, and which
@@ -5,4 +6,5 @@
 map.{% endcomment %}
 <div
   class="rounded-box border bg-base-100 p-4{% if variant == 'primary' %} border-primary{% elif variant == 'secondary' %} border-secondary{% elif variant == 'success' %} border-success{% elif variant == 'warning' %} border-warning{% elif variant == 'danger' %} border-error{% elif variant == 'info' %} border-info{% else %} border-base-300{% endif %}{% if class %} {{ class }}{% endif %}"
+  {% cf_ui_render_attrs "box" attrs %}
 >{{ slot }}</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 e9b7a9b..c77c800 100644
--- a/src/cf_ui/templates/cotton/_themes/daisy/checkbox-group.html
+++ b/src/cf_ui/templates/cotton/_themes/daisy/checkbox-group.html
@@ -1,4 +1,8 @@
-<div class="form-control {{ class }}">
+{% load cf_ui %}
+<div
+  class="form-control {{ class }}"
+  {% cf_ui_render_attrs "checkbox-group" attrs %}
+>
   <label class="label"><span class="label-text">{{ label }}</span></label>
   <div
     class="flex flex-wrap gap-4{% if control_class %} {{ control_class }}{% endif %}"
diff --git a/src/cf_ui/templates/cotton/_themes/daisy/icon.html b/src/cf_ui/templates/cotton/_themes/daisy/icon.html
index e2e7ace..ca56092 100644
--- a/src/cf_ui/templates/cotton/_themes/daisy/icon.html
+++ b/src/cf_ui/templates/cotton/_themes/daisy/icon.html
@@ -1,4 +1,6 @@
+{% load cf_ui %}
 <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 %}
+  {% cf_ui_render_attrs "icon" attrs %}
 >{{ slot }}</span>
diff --git a/src/cf_ui/templates/cotton/_themes/fomantic/badge.html b/src/cf_ui/templates/cotton/_themes/fomantic/badge.html
index c057e49..401ac11 100644
--- a/src/cf_ui/templates/cotton/_themes/fomantic/badge.html
+++ b/src/cf_ui/templates/cotton/_themes/fomantic/badge.html
@@ -1,3 +1,5 @@
+{% load cf_ui %}
 <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 %}"
+  {% cf_ui_render_attrs "badge" attrs %}
 >{{ slot }}</span>
diff --git a/src/cf_ui/templates/cotton/_themes/fomantic/box.html b/src/cf_ui/templates/cotton/_themes/fomantic/box.html
index 6ad9042..bbdcb48 100644
--- a/src/cf_ui/templates/cotton/_themes/fomantic/box.html
+++ b/src/cf_ui/templates/cotton/_themes/fomantic/box.html
@@ -1,3 +1,4 @@
+{% load cf_ui %}
 {% comment %}Real hues, not the literal words `primary` and `secondary`. Those two are
 Fomantic's *emphasis* variation on a segment rather than colours —
 `.ui.primary.segment` renders a subdued treatment, not a brand fill — so
@@ -5,4 +6,5 @@
 theme where the name happens to match.{% endcomment %}
 <div
   class="ui segment{% if variant == 'primary' %} blue{% elif variant == 'secondary' %} grey{% elif variant == 'success' %} green{% elif variant == 'warning' %} yellow{% elif variant == 'danger' %} red{% elif variant == 'info' %} teal{% endif %}{% if class %} {{ class }}{% endif %}"
+  {% cf_ui_render_attrs "box" attrs %}
 >{{ slot }}</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 5df26f2..eaa2f8e 100644
--- a/src/cf_ui/templates/cotton/_themes/fomantic/checkbox-group.html
+++ b/src/cf_ui/templates/cotton/_themes/fomantic/checkbox-group.html
@@ -1,4 +1,8 @@
-<div class="ui form {{ class }}">
+{% load cf_ui %}
+<div
+  class="ui form {{ class }}"
+  {% cf_ui_render_attrs "checkbox-group" attrs %}
+>
   <div
     class="grouped fields{% if control_class %} {{ control_class }}{% endif %}{% if error %} error{% endif %}"
   >
diff --git a/src/cf_ui/templates/cotton/_themes/fomantic/icon.html b/src/cf_ui/templates/cotton/_themes/fomantic/icon.html
index 4484589..5e9c9fe 100644
--- a/src/cf_ui/templates/cotton/_themes/fomantic/icon.html
+++ b/src/cf_ui/templates/cotton/_themes/fomantic/icon.html
@@ -1,4 +1,6 @@
+{% load cf_ui %}
 <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 %}
+  {% cf_ui_render_attrs "icon" attrs %}
 >{{ slot }}</span>
diff --git a/src/cf_ui/templates/cotton/_themes/foundation/badge.html b/src/cf_ui/templates/cotton/_themes/foundation/badge.html
index 7c88c8a..1b48f33 100644
--- a/src/cf_ui/templates/cotton/_themes/foundation/badge.html
+++ b/src/cf_ui/templates/cotton/_themes/foundation/badge.html
@@ -1,3 +1,5 @@
+{% load cf_ui %}
 <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 %}"
+  {% cf_ui_render_attrs "badge" attrs %}
 >{{ slot }}</span>
diff --git a/src/cf_ui/templates/cotton/_themes/foundation/box.html b/src/cf_ui/templates/cotton/_themes/foundation/box.html
index 23f4cb8..2fb683a 100644
--- a/src/cf_ui/templates/cotton/_themes/foundation/box.html
+++ b/src/cf_ui/templates/cotton/_themes/foundation/box.html
@@ -1,6 +1,8 @@
+{% load cf_ui %}
 {% comment %}Foundation spells danger `alert` and ships no `info` hue, so `info`
 folds onto `secondary` — the same two substitutions the badge partial makes for
 this theme.{% endcomment %}
 <div
   class="callout{% 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 %}"
+  {% cf_ui_render_attrs "box" attrs %}
 >{{ slot }}</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 7557148..0e2eae3 100644
--- a/src/cf_ui/templates/cotton/_themes/foundation/checkbox-group.html
+++ b/src/cf_ui/templates/cotton/_themes/foundation/checkbox-group.html
@@ -1,7 +1,11 @@
 {% 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 %}
-<fieldset class="fieldset {{ class }}">
+{% load cf_ui %}
+<fieldset
+  class="fieldset {{ class }}"
+  {% cf_ui_render_attrs "checkbox-group" attrs %}
+>
   <legend>{{ label }}</legend>
   <div class="{{ control_class }}">
     {% for choice in choices %}
diff --git a/src/cf_ui/templates/cotton/_themes/foundation/icon.html b/src/cf_ui/templates/cotton/_themes/foundation/icon.html
index 506c3c7..2e93a87 100644
--- a/src/cf_ui/templates/cotton/_themes/foundation/icon.html
+++ b/src/cf_ui/templates/cotton/_themes/foundation/icon.html
@@ -1,4 +1,6 @@
+{% load cf_ui %}
 <span
   class="{% if class %}{{ class }}{% endif %}"
   {% if label %} role="img" aria-label="{{ label }}"{% else %} aria-hidden="true"{% endif %}
+  {% cf_ui_render_attrs "icon" attrs %}
 >{{ slot }}</span>
diff --git a/src/cf_ui/templates/cotton/cf/badge.html b/src/cf_ui/templates/cotton/cf/badge.html
index abef5db..6d96148 100644
--- a/src/cf_ui/templates/cotton/cf/badge.html
+++ b/src/cf_ui/templates/cotton/cf/badge.html
@@ -1,4 +1,9 @@
-<c-vars variant="neutral" size="normal" class="" />
+<c-vars
+  variant="neutral"
+  size="normal"
+  class=""
+  attrs="{}"
+/>
 {% 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/box.html b/src/cf_ui/templates/cotton/cf/box.html
index fb70f48..29ae2f5 100644
--- a/src/cf_ui/templates/cotton/cf/box.html
+++ b/src/cf_ui/templates/cotton/cf/box.html
@@ -1,4 +1,8 @@
-<c-vars variant="neutral" class="" />
+<c-vars
+  variant="neutral"
+  class=""
+  attrs="{}"
+/>
 {% load cf_ui %}
 {% cf_ui_validate "box" variant=variant %}{% cf_ui_theme_path "box" 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 2b6b033..b7beaeb 100644
--- a/src/cf_ui/templates/cotton/cf/checkbox-group.html
+++ b/src/cf_ui/templates/cotton/cf/checkbox-group.html
@@ -6,6 +6,7 @@
   selected="[]"
   control_class=""
   class=""
+  attrs="{}"
 />
 {% load cf_ui %}
 {% cf_ui_theme_path "checkbox-group" as cf_ui_partial %}
diff --git a/src/cf_ui/templates/cotton/cf/icon.html b/src/cf_ui/templates/cotton/cf/icon.html
index f86a43a..27a437f 100644
--- a/src/cf_ui/templates/cotton/cf/icon.html
+++ b/src/cf_ui/templates/cotton/cf/icon.html
@@ -1,4 +1,9 @@
-<c-vars size="normal" label="" class="" />
+<c-vars
+  size="normal"
+  label=""
+  class=""
+  attrs="{}"
+/>
 {% 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/jinja/bootstrap/Badge.jinja b/src/cf_ui/templates/jinja/bootstrap/Badge.jinja
index 94b995c..4f1de76 100644
--- a/src/cf_ui/templates/jinja/bootstrap/Badge.jinja
+++ b/src/cf_ui/templates/jinja/bootstrap/Badge.jinja
@@ -1,11 +1,13 @@
-{#def content="", variant="neutral", size="normal", extra_class="" #}
+{#def content="", variant="neutral", size="normal", extra_class="", attrs={} #}
 {% 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 "" %}
+  {% set attrs = attrs if attrs 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 %}"
+    {{- cf_ui_render_attrs("badge", attrs) }}
   >{{ content }}</span>
 {% endautoescape %}
diff --git a/src/cf_ui/templates/jinja/bootstrap/Box.jinja b/src/cf_ui/templates/jinja/bootstrap/Box.jinja
index cc21226..f17c50d 100644
--- a/src/cf_ui/templates/jinja/bootstrap/Box.jinja
+++ b/src/cf_ui/templates/jinja/bootstrap/Box.jinja
@@ -1,8 +1,9 @@
-{#def content="", variant="neutral", extra_class="" #}
+{#def content="", variant="neutral", extra_class="", attrs={} #}
 {% autoescape true %}
   {% set content = content if content is defined else "" %}
   {% set variant = variant if variant is defined else "neutral" %}
   {% set extra_class = extra_class if extra_class is defined else "" %}
+  {% set attrs = attrs if attrs is defined else {} %}
   {{ cf_ui_validate("box", variant=variant) }}
   {# Bootstrap has no box component. `card` would be wrong — it imposes a
    header/body/footer structure the caller cannot opt out of — so this is the
@@ -10,5 +11,6 @@
    nothing because `.border` already sets the default border colour. #}
   <div
     class="border rounded p-3{% if variant == 'primary' %} border-primary{% elif variant == 'secondary' %} border-secondary{% elif variant == 'success' %} border-success{% elif variant == 'warning' %} border-warning{% elif variant == 'danger' %} border-danger{% elif variant == 'info' %} border-info{% endif %}{% if extra_class %} {{ extra_class }}{% endif %}"
+    {{- cf_ui_render_attrs("box", attrs) }}
   >{{ content }}</div>
 {% endautoescape %}
diff --git a/src/cf_ui/templates/jinja/bootstrap/CheckboxGroup.jinja b/src/cf_ui/templates/jinja/bootstrap/CheckboxGroup.jinja
index 7bcaa34..50470bd 100644
--- a/src/cf_ui/templates/jinja/bootstrap/CheckboxGroup.jinja
+++ b/src/cf_ui/templates/jinja/bootstrap/CheckboxGroup.jinja
@@ -1,11 +1,15 @@
-{#def name, label, choices=[], selected=[], error="", extra_class="", control_class="" #}
+{#def name, label, choices=[], selected=[], error="", extra_class="", control_class="", attrs={} #}
 {% 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 }}">
+  {% set attrs = attrs if attrs is defined else {} %}
+  <div
+    class="mb-3 {{ extra_class }}"
+    {{- cf_ui_render_attrs("checkbox-group", attrs) }}
+  >
     <label class="form-label">{{ label }}</label>
     <div{% if control_class %} class="{{ control_class }}"{% endif %}>
       {% for choice in choices %}
diff --git a/src/cf_ui/templates/jinja/bootstrap/Icon.jinja b/src/cf_ui/templates/jinja/bootstrap/Icon.jinja
index 0a227ac..fdf4a5d 100644
--- a/src/cf_ui/templates/jinja/bootstrap/Icon.jinja
+++ b/src/cf_ui/templates/jinja/bootstrap/Icon.jinja
@@ -1,12 +1,14 @@
-{#def content="", size="normal", label="", extra_class="" #}
+{#def content="", size="normal", label="", extra_class="", attrs={} #}
 {% 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 "" %}
+  {% set attrs = attrs if attrs 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 %}
+    {{- cf_ui_render_attrs("icon", attrs) }}
   >{{ content }}</span>
 {% endautoescape %}
diff --git a/src/cf_ui/templates/jinja/bulma/Badge.jinja b/src/cf_ui/templates/jinja/bulma/Badge.jinja
index e6f1773..863637b 100644
--- a/src/cf_ui/templates/jinja/bulma/Badge.jinja
+++ b/src/cf_ui/templates/jinja/bulma/Badge.jinja
@@ -1,11 +1,13 @@
-{#def content="", variant="neutral", size="normal", extra_class="" #}
+{#def content="", variant="neutral", size="normal", extra_class="", attrs={} #}
 {% 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 "" %}
+  {% set attrs = attrs if attrs 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 %}"
+    {{- cf_ui_render_attrs("badge", attrs) }}
   >{{ content }}</span>
 {% endautoescape %}
diff --git a/src/cf_ui/templates/jinja/bulma/Box.jinja b/src/cf_ui/templates/jinja/bulma/Box.jinja
index b080a1f..d7c334b 100644
--- a/src/cf_ui/templates/jinja/bulma/Box.jinja
+++ b/src/cf_ui/templates/jinja/bulma/Box.jinja
@@ -1,11 +1,15 @@
-{#def content="", variant="neutral", extra_class="" #}
+{#def content="", variant="neutral", extra_class="", attrs={} #}
 {% autoescape true %}
   {% set content = content if content is defined else "" %}
   {% set variant = variant if variant is defined else "neutral" %}
   {% set extra_class = extra_class if extra_class is defined else "" %}
+  {% set attrs = attrs if attrs is defined else {} %}
   {{ cf_ui_validate("box", variant=variant) }}
   {# Bulma ships no colour modifier for `.box`, so `variant` is inert here.
    `has-background-*` exists but sets a saturated background without touching
    text colour, which would render unreadable rather than themed. #}
-  <div class="box{% if extra_class %} {{ extra_class }}{% endif %}">{{ content }}</div>
+  <div
+    class="box{% if extra_class %} {{ extra_class }}{% endif %}"
+    {{- cf_ui_render_attrs("box", attrs) }}
+  >{{ content }}</div>
 {% endautoescape %}
diff --git a/src/cf_ui/templates/jinja/bulma/CheckboxGroup.jinja b/src/cf_ui/templates/jinja/bulma/CheckboxGroup.jinja
index 7bb25d2..930bf98 100644
--- a/src/cf_ui/templates/jinja/bulma/CheckboxGroup.jinja
+++ b/src/cf_ui/templates/jinja/bulma/CheckboxGroup.jinja
@@ -1,6 +1,10 @@
-{#def name, label, choices=[], selected=[], error="", extra_class="", control_class="" #}
+{#def name, label, choices=[], selected=[], error="", extra_class="", control_class="", attrs={} #}
 {% autoescape true %}
-  <div class="field {{ extra_class }}">
+  {% set attrs = attrs if attrs is defined else {} %}
+  <div
+    class="field {{ extra_class }}"
+    {{- cf_ui_render_attrs("checkbox-group", attrs) }}
+  >
     <label class="label">{{ label }}</label>
     <div class="control{% if control_class %} {{ control_class }}{% endif %}">
       {% for choice in choices %}
diff --git a/src/cf_ui/templates/jinja/bulma/Icon.jinja b/src/cf_ui/templates/jinja/bulma/Icon.jinja
index bf4f165..5fa3306 100644
--- a/src/cf_ui/templates/jinja/bulma/Icon.jinja
+++ b/src/cf_ui/templates/jinja/bulma/Icon.jinja
@@ -1,12 +1,14 @@
-{#def content="", size="normal", label="", extra_class="" #}
+{#def content="", size="normal", label="", extra_class="", attrs={} #}
 {% 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 "" %}
+  {% set attrs = attrs if attrs 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 %}
+    {{- cf_ui_render_attrs("icon", attrs) }}
   >{{ content }}</span>
 {% endautoescape %}
diff --git a/src/cf_ui/templates/jinja/daisy/Badge.jinja b/src/cf_ui/templates/jinja/daisy/Badge.jinja
index 8806cfb..4562cf2 100644
--- a/src/cf_ui/templates/jinja/daisy/Badge.jinja
+++ b/src/cf_ui/templates/jinja/daisy/Badge.jinja
@@ -1,11 +1,13 @@
-{#def content="", variant="neutral", size="normal", extra_class="" #}
+{#def content="", variant="neutral", size="normal", extra_class="", attrs={} #}
 {% 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 "" %}
+  {% set attrs = attrs if attrs 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 %}"
+    {{- cf_ui_render_attrs("badge", attrs) }}
   >{{ content }}</span>
 {% endautoescape %}
diff --git a/src/cf_ui/templates/jinja/daisy/Box.jinja b/src/cf_ui/templates/jinja/daisy/Box.jinja
index f9aa123..265da39 100644
--- a/src/cf_ui/templates/jinja/daisy/Box.jinja
+++ b/src/cf_ui/templates/jinja/daisy/Box.jinja
@@ -1,8 +1,9 @@
-{#def content="", variant="neutral", extra_class="" #}
+{#def content="", variant="neutral", extra_class="", attrs={} #}
 {% autoescape true %}
   {% set content = content if content is defined else "" %}
   {% set variant = variant if variant is defined else "neutral" %}
   {% set extra_class = extra_class if extra_class is defined else "" %}
+  {% set attrs = attrs if attrs is defined else {} %}
   {{ cf_ui_validate("box", variant=variant) }}
   {# The border colour lives entirely in the variant, `neutral` included.
    Splitting it — a default colour in the base and an override in the variant —
@@ -11,5 +12,6 @@
    the class map. #}
   <div
     class="rounded-box border bg-base-100 p-4{% if variant == 'primary' %} border-primary{% elif variant == 'secondary' %} border-secondary{% elif variant == 'success' %} border-success{% elif variant == 'warning' %} border-warning{% elif variant == 'danger' %} border-error{% elif variant == 'info' %} border-info{% else %} border-base-300{% endif %}{% if extra_class %} {{ extra_class }}{% endif %}"
+    {{- cf_ui_render_attrs("box", attrs) }}
   >{{ content }}</div>
 {% endautoescape %}
diff --git a/src/cf_ui/templates/jinja/daisy/CheckboxGroup.jinja b/src/cf_ui/templates/jinja/daisy/CheckboxGroup.jinja
index 856ecee..b1140e1 100644
--- a/src/cf_ui/templates/jinja/daisy/CheckboxGroup.jinja
+++ b/src/cf_ui/templates/jinja/daisy/CheckboxGroup.jinja
@@ -1,11 +1,15 @@
-{#def name, label, choices=[], selected=[], error="", extra_class="", control_class="" #}
+{#def name, label, choices=[], selected=[], error="", extra_class="", control_class="", attrs={} #}
 {% 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 }}">
+  {% set attrs = attrs if attrs is defined else {} %}
+  <div
+    class="form-control {{ extra_class }}"
+    {{- cf_ui_render_attrs("checkbox-group", attrs) }}
+  >
     <label class="label"><span class="label-text">{{ label }}</span></label>
     <div
       class="flex flex-wrap gap-4{% if control_class %} {{ control_class }}{% endif %}"
diff --git a/src/cf_ui/templates/jinja/daisy/Icon.jinja b/src/cf_ui/templates/jinja/daisy/Icon.jinja
index ad05e5f..04928f0 100644
--- a/src/cf_ui/templates/jinja/daisy/Icon.jinja
+++ b/src/cf_ui/templates/jinja/daisy/Icon.jinja
@@ -1,12 +1,14 @@
-{#def content="", size="normal", label="", extra_class="" #}
+{#def content="", size="normal", label="", extra_class="", attrs={} #}
 {% 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 "" %}
+  {% set attrs = attrs if attrs 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 %}
+    {{- cf_ui_render_attrs("icon", attrs) }}
   >{{ content }}</span>
 {% endautoescape %}
diff --git a/src/cf_ui/templates/jinja/fomantic/Badge.jinja b/src/cf_ui/templates/jinja/fomantic/Badge.jinja
index fe8b1b3..10fbf43 100644
--- a/src/cf_ui/templates/jinja/fomantic/Badge.jinja
+++ b/src/cf_ui/templates/jinja/fomantic/Badge.jinja
@@ -1,11 +1,13 @@
-{#def content="", variant="neutral", size="normal", extra_class="" #}
+{#def content="", variant="neutral", size="normal", extra_class="", attrs={} #}
 {% 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 "" %}
+  {% set attrs = attrs if attrs 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 %}"
+    {{- cf_ui_render_attrs("badge", attrs) }}
   >{{ content }}</span>
 {% endautoescape %}
diff --git a/src/cf_ui/templates/jinja/fomantic/Box.jinja b/src/cf_ui/templates/jinja/fomantic/Box.jinja
index 192ae65..9b7a15d 100644
--- a/src/cf_ui/templates/jinja/fomantic/Box.jinja
+++ b/src/cf_ui/templates/jinja/fomantic/Box.jinja
@@ -1,8 +1,9 @@
-{#def content="", variant="neutral", extra_class="" #}
+{#def content="", variant="neutral", extra_class="", attrs={} #}
 {% autoescape true %}
   {% set content = content if content is defined else "" %}
   {% set variant = variant if variant is defined else "neutral" %}
   {% set extra_class = extra_class if extra_class is defined else "" %}
+  {% set attrs = attrs if attrs is defined else {} %}
   {{ cf_ui_validate("box", variant=variant) }}
   {# Real hues, not the literal words `primary` and `secondary`. Those two are
    Fomantic's *emphasis* variation on a segment rather than colours —
@@ -11,5 +12,6 @@
    one theme where the name happens to match. #}
   <div
     class="ui segment{% if variant == 'primary' %} blue{% elif variant == 'secondary' %} grey{% elif variant == 'success' %} green{% elif variant == 'warning' %} yellow{% elif variant == 'danger' %} red{% elif variant == 'info' %} teal{% endif %}{% if extra_class %} {{ extra_class }}{% endif %}"
+    {{- cf_ui_render_attrs("box", attrs) }}
   >{{ content }}</div>
 {% endautoescape %}
diff --git a/src/cf_ui/templates/jinja/fomantic/CheckboxGroup.jinja b/src/cf_ui/templates/jinja/fomantic/CheckboxGroup.jinja
index 7b46f50..3ebf576 100644
--- a/src/cf_ui/templates/jinja/fomantic/CheckboxGroup.jinja
+++ b/src/cf_ui/templates/jinja/fomantic/CheckboxGroup.jinja
@@ -1,11 +1,15 @@
-{#def name, label, choices=[], selected=[], error="", extra_class="", control_class="" #}
+{#def name, label, choices=[], selected=[], error="", extra_class="", control_class="", attrs={} #}
 {% 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 }}">
+  {% set attrs = attrs if attrs is defined else {} %}
+  <div
+    class="ui form {{ extra_class }}"
+    {{- cf_ui_render_attrs("checkbox-group", attrs) }}
+  >
     <div
       class="grouped fields{% if control_class %} {{ control_class }}{% endif %}{% if error %} error{% endif %}"
     >
diff --git a/src/cf_ui/templates/jinja/fomantic/Icon.jinja b/src/cf_ui/templates/jinja/fomantic/Icon.jinja
index 8378df0..f64a52c 100644
--- a/src/cf_ui/templates/jinja/fomantic/Icon.jinja
+++ b/src/cf_ui/templates/jinja/fomantic/Icon.jinja
@@ -1,12 +1,14 @@
-{#def content="", size="normal", label="", extra_class="" #}
+{#def content="", size="normal", label="", extra_class="", attrs={} #}
 {% 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 "" %}
+  {% set attrs = attrs if attrs 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 %}
+    {{- cf_ui_render_attrs("icon", attrs) }}
   >{{ content }}</span>
 {% endautoescape %}
diff --git a/src/cf_ui/templates/jinja/foundation/Badge.jinja b/src/cf_ui/templates/jinja/foundation/Badge.jinja
index fc5515b..f45551f 100644
--- a/src/cf_ui/templates/jinja/foundation/Badge.jinja
+++ b/src/cf_ui/templates/jinja/foundation/Badge.jinja
@@ -1,11 +1,13 @@
-{#def content="", variant="neutral", size="normal", extra_class="" #}
+{#def content="", variant="neutral", size="normal", extra_class="", attrs={} #}
 {% 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 "" %}
+  {% set attrs = attrs if attrs 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 %}"
+    {{- cf_ui_render_attrs("badge", attrs) }}
   >{{ content }}</span>
 {% endautoescape %}
diff --git a/src/cf_ui/templates/jinja/foundation/Box.jinja b/src/cf_ui/templates/jinja/foundation/Box.jinja
index fddff84..2a39c09 100644
--- a/src/cf_ui/templates/jinja/foundation/Box.jinja
+++ b/src/cf_ui/templates/jinja/foundation/Box.jinja
@@ -1,13 +1,15 @@
-{#def content="", variant="neutral", extra_class="" #}
+{#def content="", variant="neutral", extra_class="", attrs={} #}
 {% autoescape true %}
   {% set content = content if content is defined else "" %}
   {% set variant = variant if variant is defined else "neutral" %}
   {% set extra_class = extra_class if extra_class is defined else "" %}
+  {% set attrs = attrs if attrs is defined else {} %}
   {{ cf_ui_validate("box", variant=variant) }}
   {# Foundation spells danger `alert` and ships no `info` hue, so `info` folds
    onto `secondary` — the same two substitutions the badge template makes for
    this theme. #}
   <div
     class="callout{% 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 %}"
+    {{- cf_ui_render_attrs("box", attrs) }}
   >{{ content }}</div>
 {% endautoescape %}
diff --git a/src/cf_ui/templates/jinja/foundation/CheckboxGroup.jinja b/src/cf_ui/templates/jinja/foundation/CheckboxGroup.jinja
index 8fe10fe..1051ed6 100644
--- a/src/cf_ui/templates/jinja/foundation/CheckboxGroup.jinja
+++ b/src/cf_ui/templates/jinja/foundation/CheckboxGroup.jinja
@@ -1,14 +1,18 @@
-{#def name, label, choices=[], selected=[], error="", extra_class="", control_class="" #}
+{#def name, label, choices=[], selected=[], error="", extra_class="", control_class="", attrs={} #}
 {% 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 "" %}
+  {% set attrs = attrs if attrs 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 }}">
+  <fieldset
+    class="fieldset {{ extra_class }}"
+    {{- cf_ui_render_attrs("checkbox-group", attrs) }}
+  >
     <legend>{{ label }}</legend>
     <div class="{{ control_class }}">
       {% for choice in choices %}
diff --git a/src/cf_ui/templates/jinja/foundation/Icon.jinja b/src/cf_ui/templates/jinja/foundation/Icon.jinja
index d2b5a00..b8a7c44 100644
--- a/src/cf_ui/templates/jinja/foundation/Icon.jinja
+++ b/src/cf_ui/templates/jinja/foundation/Icon.jinja
@@ -1,12 +1,14 @@
-{#def content="", size="normal", label="", extra_class="" #}
+{#def content="", size="normal", label="", extra_class="", attrs={} #}
 {% 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 "" %}
+  {% set attrs = attrs if attrs 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 %}
+    {{- cf_ui_render_attrs("icon", attrs) }}
   >{{ content }}</span>
 {% endautoescape %}
diff --git a/tests/unit/cotton/test_checkbox_group_attrs_passthrough.py b/tests/unit/cotton/test_checkbox_group_attrs_passthrough.py
new file mode 100644
index 0000000..84684af
--- /dev/null
+++ b/tests/unit/cotton/test_checkbox_group_attrs_passthrough.py
@@ -0,0 +1,99 @@
+"""``<c-cf.checkbox-group>`` attrs passthrough — rollout of #73's ``Button``
+precedent, scoped by #70.
+
+See ``tests/unit/jinja/test_checkbox_group_attrs_passthrough.py`` for the
+full design writeup — ``attrs`` lands on the outer wrapper, not on any
+per-choice ``<input>``, because ``CheckboxGroup`` renders N checkboxes and
+has no single control to target. These go through ``cotton_render``
+(``render_to_string``), which bypasses the django-cotton compiler per this
+repo's CLAUDE.md — every prop, including ``attrs``, must be passed
+explicitly here; the ``<c-vars attrs="{}" />`` default is only exercised by
+the E2E tier.
+"""
+
+import re
+from collections.abc import Callable
+
+import pytest
+
+from cf_ui.primitives import PrimitiveConfigError
+from cf_ui.themes import THEMES
+
+BASE_PROPS = {
+    "name": "interests",
+    "label": "Interests",
+    "error": "",
+    "choices": [{"value": "a", "label": "Alpha"}, {"value": "b", "label": "Beta"}],
+    "selected": [],
+    "control_class": "",
+    "class": "",
+}
+
+
+@pytest.fixture(params=THEMES)
+def render(
+    request: pytest.FixtureRequest, settings: object, cotton_render: Callable[..., str]
+) -> Callable[..., str]:
+    settings.CF_UI_THEME = request.param
+
+    def _render(**ctx: object) -> str:
+        return cotton_render("cf/checkbox-group.html", **{**BASE_PROPS, "attrs": {}, **ctx})
+
+    return _render
+
+
+def test_cotton_renders_with_empty_attrs(render: Callable[..., str]) -> None:
+    assert render().strip()
+
+
+def test_cotton_renders_passthrough_attrs_on_the_wrapper(render: Callable[..., str]) -> None:
+    """``cotton_render`` bypasses the django-cotton compiler, so the wrapper
+    template's literal ``<c-vars .../>`` stub survives into the output ahead
+    of the real markup — its own closing ``/>`` would be the first ``>`` in
+    the document. Partition on the first per-choice ``<input`` instead, which
+    correctly spans everything up to and including the real wrapper's
+    opening tag."""
+    html = render(attrs={"data-marker": "wrapper-only", "x-data": "{}"})
+    before_first_input, _, _rest = html.partition("<input")
+    assert 'data-marker="wrapper-only"' in before_first_input
+    assert 'x-data="{}"' in before_first_input
+
+
+def test_cotton_passthrough_attrs_do_not_land_on_a_checkbox_input(
+    render: Callable[..., str],
+) -> None:
+    html = render(attrs={"data-marker": "wrapper-only"})
+    for input_tag in re.findall(r"<input\b[^>]*>", html):
+        assert "data-marker" not in input_tag
+
+
+def test_cotton_passthrough_attrs_coexist_with_named_props(render: Callable[..., str]) -> None:
+    html = render(**{"class": "js-field", "attrs": {"x-on:change": "go()"}})
+    assert 'x-on:change="go()"' in html
+    assert "js-field" in html
+
+
+def test_cotton_renders_with_attrs_explicitly_none(render: Callable[..., str]) -> None:
+    assert render(attrs=None).strip()
+
+
+def test_cotton_escapes_a_hostile_attr_value(render: Callable[..., str]) -> None:
+    html = render(attrs={"data-x": '" onmouseover="alert(1)" x="'})
+    assert 'onmouseover="alert(1)"' not in html
+
+
+def test_cotton_rejects_a_quote_based_hostile_attr_name(render: Callable[..., str]) -> None:
+    with pytest.raises(PrimitiveConfigError):
+        render(attrs={'x" onmouseover="alert(1)': "y"})
+
+
+def test_cotton_rejects_a_whitespace_and_equals_hostile_attr_name(
+    render: Callable[..., str],
+) -> None:
+    with pytest.raises(PrimitiveConfigError):
+        render(attrs={"x onmouseover=alert(1)//": "y"})
+
+
+def test_cotton_rejects_attrs_colliding_with_class(render: Callable[..., str]) -> None:
+    with pytest.raises(PrimitiveConfigError):
+        render(attrs={"class": "override"})
diff --git a/tests/unit/cotton/test_icon_badge_box_attrs_passthrough.py b/tests/unit/cotton/test_icon_badge_box_attrs_passthrough.py
new file mode 100644
index 0000000..9afdf4b
--- /dev/null
+++ b/tests/unit/cotton/test_icon_badge_box_attrs_passthrough.py
@@ -0,0 +1,134 @@
+"""``<c-cf.icon>``/``<c-cf.badge>``/``<c-cf.box>`` attrs passthrough —
+rollout of #73's ``Button`` precedent, scoped by #70.
+
+See ``tests/unit/jinja/test_icon_badge_box_attrs_passthrough.py`` for the
+full design writeup (shape/escaping/single-element target). These go through
+``cotton_render`` (``render_to_string``), which bypasses the django-cotton
+compiler per this repo's CLAUDE.md — every prop, including ``attrs``, must
+be passed explicitly here; the ``<c-vars attrs="{}" />`` default is only
+exercised by the E2E tier.
+"""
+
+from collections.abc import Callable
+
+import pytest
+
+from cf_ui.primitives import PrimitiveConfigError
+from cf_ui.themes import THEMES
+
+CASES = [
+    (
+        "icon",
+        "cf/icon.html",
+        {"size": "normal", "label": "", "class": "", "slot": "*"},
+    ),
+    (
+        "badge",
+        "cf/badge.html",
+        {"variant": "neutral", "size": "normal", "class": "", "slot": "New"},
+    ),
+    (
+        "box",
+        "cf/box.html",
+        {"variant": "neutral", "class": "", "slot": "Hello"},
+    ),
+]
+
+
+@pytest.fixture(params=CASES, ids=[c[0] for c in CASES])
+def case(request: pytest.FixtureRequest) -> tuple[str, str, dict[str, object]]:
+    return request.param
+
+
+@pytest.fixture
+def component(case: tuple[str, str, dict[str, object]]) -> str:
+    return case[0]
+
+
+@pytest.fixture(params=THEMES)
+def render(
+    request: pytest.FixtureRequest,
+    settings: object,
+    cotton_render: Callable[..., str],
+    case: tuple[str, str, dict[str, object]],
+) -> Callable[..., str]:
+    settings.CF_UI_THEME = request.param
+    _component, template_name, base_props = case
+
+    def _render(**ctx: object) -> str:
+        return cotton_render(template_name, **{**base_props, "attrs": {}, **ctx})
+
+    return _render
+
+
+def test_cotton_renders_with_empty_attrs(render: Callable[..., str]) -> None:
+    assert render().strip()
+
+
+def test_cotton_renders_passthrough_attrs(render: Callable[..., str]) -> None:
+    html = render(attrs={"data-event": "submit", "hx-get": "/things"})
+    assert 'data-event="submit"' in html
+    assert 'hx-get="/things"' in html
+
+
+def test_cotton_passthrough_attrs_coexist_with_named_props(render: Callable[..., str]) -> None:
+    html = render(**{"class": "js-field", "attrs": {"x-on:change": "go()"}})
+    assert 'x-on:change="go()"' in html
+    assert "js-field" in html
+
+
+def test_cotton_renders_with_attrs_explicitly_none(render: Callable[..., str]) -> None:
+    assert render(attrs=None).strip()
+
+
+def test_cotton_escapes_a_hostile_attr_value(render: Callable[..., str]) -> None:
+    html = render(attrs={"data-x": '" onmouseover="alert(1)" x="'})
+    assert 'onmouseover="alert(1)"' not in html
+
+
+def test_cotton_rejects_a_quote_based_hostile_attr_name(render: Callable[..., str]) -> None:
+    with pytest.raises(PrimitiveConfigError):
+        render(attrs={'x" onmouseover="alert(1)': "y"})
+
+
+def test_cotton_rejects_a_whitespace_and_equals_hostile_attr_name(
+    render: Callable[..., str],
+) -> None:
+    with pytest.raises(PrimitiveConfigError):
+        render(attrs={"x onmouseover=alert(1)//": "y"})
+
+
+def test_cotton_rejects_attrs_colliding_with_class(render: Callable[..., str]) -> None:
+    """``class`` is RESERVED_ATTRS-listed but is its own dedicated ``<c-vars>``
+    prop for these three, not routed through ``attrs`` — the guard fires
+    reliably, no declared-prop-name bypass like Button's ``type``/``href``
+    (#78)."""
+    with pytest.raises(PrimitiveConfigError):
+        render(attrs={"class": "override"})
+
+
+def test_cotton_rejects_attrs_colliding_with_icon_role(
+    render: Callable[..., str], component: str
+) -> None:
+    if component != "icon":
+        pytest.skip("role is only reserved for icon")
+    with pytest.raises(PrimitiveConfigError):
+        render(attrs={"role": "override"})
+
+
+def test_cotton_rejects_attrs_colliding_with_icon_aria_label(
+    render: Callable[..., str], component: str
+) -> None:
+    if component != "icon":
+        pytest.skip("aria-label is only reserved for icon")
+    with pytest.raises(PrimitiveConfigError):
+        render(attrs={"aria-label": "override"})
+
+
+def test_cotton_rejects_attrs_colliding_with_icon_aria_hidden(
+    render: Callable[..., str], component: str
+) -> None:
+    if component != "icon":
+        pytest.skip("aria-hidden is only reserved for icon")
+    with pytest.raises(PrimitiveConfigError):
+        render(attrs={"aria-hidden": "false"})
diff --git a/tests/unit/jinja/test_checkbox_group_attrs_passthrough.py b/tests/unit/jinja/test_checkbox_group_attrs_passthrough.py
new file mode 100644
index 0000000..91b45b7
--- /dev/null
+++ b/tests/unit/jinja/test_checkbox_group_attrs_passthrough.py
@@ -0,0 +1,114 @@
+"""``CheckboxGroup`` attrs passthrough — rollout of #73's ``Button``
+precedent, scoped by #70.
+
+Same shape/escaping decisions as ``Button`` (see ``test_attrs_passthrough.py``
+for the full writeup) — routed through the one
+:func:`cf_ui.primitives.render_attrs` implementation, so no new validation or
+escaping logic exists here.
+
+``CheckboxGroup`` is the one primitive that departs from the
+``Select``/``Textarea``/``FormField`` precedent (#76): those three route
+``attrs`` onto the single control they render. ``CheckboxGroup`` renders N
+``<input type="checkbox">`` elements from ``choices`` — there is no single
+control to target — so ``attrs`` lands on the outer wrapper element instead
+(the ``field``/``mb-3``/``form-control``/``ui form``/``fieldset`` container).
+Every assertion below checks the inverse of #76's: the passthrough attribute
+belongs on the wrapper, and must never leak onto a per-choice checkbox.
+"""
+
+import re
+from collections.abc import Callable
+from pathlib import Path
+
+import pytest
+from jinja2 import Environment
+
+from cf_ui.primitives import PrimitiveConfigError, build_primitive_globals
+from cf_ui.themes import THEMES
+from tests.jinja_env import make_env
+
+JINJA_DIR = Path(__file__).parent.parent.parent.parent / "src" / "cf_ui" / "templates" / "jinja"
+
+BASE_PROPS = {
+    "name": "interests",
+    "label": "Interests",
+    "choices": [{"value": "a", "label": "Alpha"}, {"value": "b", "label": "Beta"}],
+    "selected": [],
+    "error": "",
+    "extra_class": "",
+    "control_class": "",
+}
+
+
+@pytest.fixture(params=THEMES)
+def theme(request: pytest.FixtureRequest) -> str:
+    return request.param
+
+
+@pytest.fixture
+def env(theme: str) -> Environment:
+    e = make_env(JINJA_DIR / theme)
+    e.globals.update(build_primitive_globals())
+    return e
+
+
+@pytest.fixture
+def render(env: Environment) -> Callable[..., str]:
+    def _render(**ctx: object) -> str:
+        return env.get_template("CheckboxGroup.jinja").render(**{**BASE_PROPS, **ctx})
+
+    return _render
+
+
+def test_renders_with_no_attrs_prop_at_all(render: Callable[..., str]) -> None:
+    """Omitting ``attrs`` entirely must not break rendering (StrictUndefined)."""
+    html = render()
+    assert html.strip()
+
+
+def test_renders_passthrough_attrs_on_the_wrapper(render: Callable[..., str]) -> None:
+    html = render(attrs={"data-marker": "wrapper-only", "x-data": "{}"})
+    wrapper_open, _, _rest = html.partition(">")
+    assert 'data-marker="wrapper-only"' in wrapper_open
+    assert 'x-data="{}"' in wrapper_open
+
+
+def test_passthrough_attrs_do_not_land_on_a_checkbox_input(render: Callable[..., str]) -> None:
+    """The inverse of #76's field-wrapper assertion: here the wrapper is the
+    intended target, and a per-choice ``<input>`` must never see it."""
+    html = render(attrs={"data-marker": "wrapper-only"})
+    for input_tag in re.findall(r"<input\b[^>]*>", html):
+        assert "data-marker" not in input_tag
+
+
+def test_passthrough_attrs_coexist_with_named_props(render: Callable[..., str]) -> None:
+    html = render(extra_class="js-field", attrs={"x-on:change": "go()"})
+    assert 'x-on:change="go()"' in html
+    assert "js-field" in html
+
+
+def test_renders_with_attrs_explicitly_none(render: Callable[..., str]) -> None:
+    html = render(attrs=None)
+    assert html.strip()
+
+
+def test_escapes_a_hostile_attr_value(render: Callable[..., str]) -> None:
+    html = render(attrs={"data-x": '" onmouseover="alert(1)" x="'})
+    assert 'onmouseover="alert(1)"' not in html
+
+
+def test_rejects_a_quote_based_hostile_attr_name(render: Callable[..., str]) -> None:
+    with pytest.raises(PrimitiveConfigError):
+        render(attrs={'x" onmouseover="alert(1)': "y"})
+
+
+def test_rejects_a_whitespace_and_equals_hostile_attr_name(render: Callable[..., str]) -> None:
+    with pytest.raises(PrimitiveConfigError):
+        render(attrs={"x onmouseover=alert(1)//": "y"})
+
+
+def test_rejects_attrs_colliding_with_class(render: Callable[..., str]) -> None:
+    """``class`` is RESERVED_ATTRS-listed but never a declared prop
+    (``extra_class`` is), so the guard fires reliably."""
+    with pytest.raises(PrimitiveConfigError):
+        render(attrs={"class": "override"})
diff --git a/tests/unit/jinja/test_icon_badge_box_attrs_passthrough.py b/tests/unit/jinja/test_icon_badge_box_attrs_passthrough.py
new file mode 100644
index 0000000..23edff1
--- /dev/null
+++ b/tests/unit/jinja/test_icon_badge_box_attrs_passthrough.py
@@ -0,0 +1,152 @@
+"""``Icon``/``Badge``/``Box`` attrs passthrough — rollout of #73's ``Button``
+precedent, scoped by #70.
+
+Same shape/escaping decisions as ``Button`` (see ``test_attrs_passthrough.py``
+for the full writeup) — routed through the one
+:func:`cf_ui.primitives.render_attrs` implementation, so no new validation or
+escaping logic exists here.
+
+Unlike ``Select``/``Textarea``/``FormField`` (#76), each of these three
+renders exactly one element — there is no wrapper to get it wrong. ``attrs``
+lands directly on that element.
+"""
+
+from collections.abc import Callable
+from pathlib import Path
+
+import pytest
+from jinja2 import Environment
+
+from cf_ui.primitives import PrimitiveConfigError, build_primitive_globals
+from cf_ui.themes import THEMES
+from tests.jinja_env import make_env
+
+JINJA_DIR = Path(__file__).parent.parent.parent.parent / "src" / "cf_ui" / "templates" / "jinja"
+
+# component key (matches RESERVED_ATTRS), template file, base props every
+# theme needs (bulma's templates carry no `is defined` guards for its other
+# props, unlike the other four themes, so the full set must always be passed
+# explicitly regardless of theme).
+CASES = [
+    (
+        "icon",
+        "Icon.jinja",
+        {"content": "*", "size": "normal", "label": "", "extra_class": ""},
+    ),
+    (
+        "badge",
+        "Badge.jinja",
+        {"content": "New", "variant": "neutral", "size": "normal", "extra_class": ""},
+    ),
+    (
+        "box",
+        "Box.jinja",
+        {"content": "Hello", "variant": "neutral", "extra_class": ""},
+    ),
+]
+
+
+@pytest.fixture(params=THEMES)
+def theme(request: pytest.FixtureRequest) -> str:
+    return request.param
+
+
+@pytest.fixture(params=CASES, ids=[c[0] for c in CASES])
+def case(request: pytest.FixtureRequest) -> tuple[str, str, dict[str, object]]:
+    return request.param
+
+
+@pytest.fixture
+def env(theme: str) -> Environment:
+    e = make_env(JINJA_DIR / theme)
+    e.globals.update(build_primitive_globals())
+    return e
+
+
+@pytest.fixture
+def render(env: Environment, case: tuple[str, str, dict[str, object]]) -> Callable[..., str]:
+    _component, template_name, base_props = case
+
+    def _render(**ctx: object) -> str:
+        return env.get_template(template_name).render(**{**base_props, **ctx})
+
+    return _render
+
+
+@pytest.fixture
+def component(case: tuple[str, str, dict[str, object]]) -> str:
+    return case[0]
+
+
+def test_renders_with_no_attrs_prop_at_all(render: Callable[..., str]) -> None:
+    """Omitting ``attrs`` entirely must not break rendering (StrictUndefined)."""
+    html = render()
+    assert html.strip()
+
+
+def test_renders_passthrough_attrs(render: Callable[..., str]) -> None:
+    html = render(attrs={"data-event": "submit", "hx-get": "/things"})
+    assert 'data-event="submit"' in html
+    assert 'hx-get="/things"' in html
+
+
+def test_passthrough_attrs_coexist_with_named_props(render: Callable[..., str]) -> None:
+    html = render(extra_class="js-field", attrs={"x-on:change": "go()"})
+    assert 'x-on:change="go()"' in html
+    assert "js-field" in html
+
+
+def test_renders_with_attrs_explicitly_none(render: Callable[..., str]) -> None:
+    html = render(attrs=None)
+    assert html.strip()
+
+
+def test_escapes_a_hostile_attr_value(render: Callable[..., str]) -> None:
+    html = render(attrs={"data-x": '" onmouseover="alert(1)" x="'})
+    assert 'onmouseover="alert(1)"' not in html
+
+
+def test_rejects_a_quote_based_hostile_attr_name(render: Callable[..., str]) -> None:
+    with pytest.raises(PrimitiveConfigError):
+        render(attrs={'x" onmouseover="alert(1)': "y"})
+
+
+def test_rejects_a_whitespace_and_equals_hostile_attr_name(render: Callable[..., str]) -> None:
+    with pytest.raises(PrimitiveConfigError):
+        render(attrs={"x onmouseover=alert(1)//": "y"})
+
+
+def test_rejects_attrs_colliding_with_class(render: Callable[..., str]) -> None:
+    """``class`` is RESERVED_ATTRS-listed but never a declared prop on any of
+    these three (``extra_class`` is), so the guard fires reliably — no
+    declared-prop-name bypass like Button's ``type``/``href`` (#78)."""
+    with pytest.raises(PrimitiveConfigError):
+        render(attrs={"class": "override"})
+
+
+def test_rejects_attrs_colliding_with_icon_role(render: Callable[..., str], component: str) -> None:
+    if component != "icon":
+        pytest.skip("role is only reserved for icon")
+    with pytest.raises(PrimitiveConfigError):
+        render(attrs={"role": "override"})
+
+
+def test_rejects_attrs_colliding_with_icon_aria_label(
+    render: Callable[..., str], component: str
+) -> None:
+    if component != "icon":
+        pytest.skip("aria-label is only reserved for icon")
+    with pytest.raises(PrimitiveConfigError):
+        render(attrs={"aria-label": "override"})
+
+
+def test_rejects_attrs_colliding_with_icon_aria_hidden(
+    render: Callable[..., str], component: str
+) -> None:
+    """The reservation is static, not conditioned on ``label`` — only the
+    no-label branch renders ``aria-hidden`` itself, but the guard must reject
+    the collision regardless, since it fires before the template runs."""
+    if component != "icon":
+        pytest.skip("aria-hidden is only reserved for icon")
+    with pytest.raises(PrimitiveConfigError):
+        render(attrs={"aria-hidden": "false"})

From 21cb9e3fc696ba29987e27ce58e529ae313d4942 Mon Sep 17 00:00:00 2001
From: Francis Secada <francis.secada@gmail.com>
Date: Wed, 19 Aug 2026 20:52:08 -0400
Subject: [PATCH 2/2] fix(tests): address /review findings on PR #82
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- De-parametrize the icon-reserved-name collision tests (role/
  aria-label/aria-hidden) off the shared icon/badge/box `case`
  fixture — they only ever asserted for icon, so 2/3 of every
  parametrized run was a silent skip. New `icon_render` fixture
  targets Icon directly, once per theme, with zero skips.
- Add real-Catalog integration coverage for Icon/Badge/Box/
  CheckboxGroup `attrs` passthrough, mirroring the existing Button/
  FormField coverage in this tier — the unit tier's Environment-only
  tests never exercise a real jinjax.Catalog, which is exactly the
  gap that let #78's bug through undetected at the unit tier.
---
 ...ge_box_checkbox_group_attrs_passthrough.py | 79 +++++++++++++++++++
 .../test_icon_badge_box_attrs_passthrough.py  | 45 ++++++-----
 .../test_icon_badge_box_attrs_passthrough.py  | 38 ++++-----
 3 files changed, 125 insertions(+), 37 deletions(-)
 create mode 100644 tests/integration/test_jinja_icon_badge_box_checkbox_group_attrs_passthrough.py

diff --git a/tests/integration/test_jinja_icon_badge_box_checkbox_group_attrs_passthrough.py b/tests/integration/test_jinja_icon_badge_box_checkbox_group_attrs_passthrough.py
new file mode 100644
index 0000000..46d3ff2
--- /dev/null
+++ b/tests/integration/test_jinja_icon_badge_box_checkbox_group_attrs_passthrough.py
@@ -0,0 +1,79 @@
+"""``attrs`` passthrough for Icon/Badge/Box/CheckboxGroup on the JinjaX path,
+against a real catalog (#70).
+
+See ``test_jinja_attrs_passthrough.py`` for the full writeup of why this
+tier exists at all: the unit tier's Jinja2-``Environment``-only tests never
+exercise a real ``jinjax.Catalog``, so a ``{#def}``/``ARGS_ATTRS``-level
+regression like #78's would pass every unit test and only surface here.
+These four primitives got unit coverage when their ``attrs`` passthrough was
+added but no real-``Catalog`` coverage, unlike Button/FormField above — this
+file closes that gap for the same reason #78 exists.
+"""
+
+import pytest
+from jinjax import Catalog
+
+from cf_ui.fastapi import install_cf_ui
+from cf_ui.primitives import PrimitiveConfigError
+
+HOSTILE = '" onmouseover="window.cfPwned=true" x="'
+
+
+@pytest.fixture
+def catalog() -> Catalog:
+    cat = Catalog()
+    install_cf_ui(cat, theme="bulma")
+    return cat
+
+
+def test_icon_attrs_pass_through_via_the_underscore_attrs_kwarg(catalog: Catalog) -> None:
+    html = catalog.render("Cf:Icon", _content="*", _attrs={"data-testid": "star"})
+    assert 'data-testid="star"' in html
+
+
+def test_icon_attrs_collision_with_role_raises(catalog: Catalog) -> None:
+    with pytest.raises(PrimitiveConfigError):
+        catalog.render("Cf:Icon", _content="*", _attrs={"role": "override"})
+
+
+def test_badge_attrs_pass_through_via_the_underscore_attrs_kwarg(catalog: Catalog) -> None:
+    html = catalog.render("Cf:Badge", _content="New", _attrs={"data-testid": "badge"})
+    assert 'data-testid="badge"' in html
+
+
+def test_badge_attrs_collision_with_class_raises(catalog: Catalog) -> None:
+    with pytest.raises(PrimitiveConfigError):
+        catalog.render("Cf:Badge", _content="New", _attrs={"class": "override"})
+
+
+def test_box_attrs_pass_through_via_the_underscore_attrs_kwarg(catalog: Catalog) -> None:
+    html = catalog.render("Cf:Box", _content="Hello", _attrs={"data-testid": "box"})
+    assert 'data-testid="box"' in html
+
+
+def test_checkbox_group_attrs_land_on_the_wrapper_not_a_choice_input(catalog: Catalog) -> None:
+    html = catalog.render(
+        "Cf:CheckboxGroup",
+        name="interests",
+        label="Interests",
+        choices=[{"value": "a", "label": "Alpha"}],
+        _attrs={"data-testid": "group"},
+    )
+    before_first_input, _, _rest = html.partition("<input")
+    assert 'data-testid="group"' in before_first_input
+
+
+def test_checkbox_group_attrs_collision_with_class_raises(catalog: Catalog) -> None:
+    with pytest.raises(PrimitiveConfigError):
+        catalog.render(
+            "Cf:CheckboxGroup",
+            name="interests",
+            label="Interests",
+            choices=[],
+            _attrs={"class": "override"},
+        )
+
+
+def test_hostile_attrs_value_is_still_escaped(catalog: Catalog) -> None:
+    html = catalog.render("Cf:Icon", _content="*", _attrs={"data-x": HOSTILE})
+    assert 'onmouseover="window.cfPwned=true"' not in html
diff --git a/tests/unit/cotton/test_icon_badge_box_attrs_passthrough.py b/tests/unit/cotton/test_icon_badge_box_attrs_passthrough.py
index 9afdf4b..ad076fd 100644
--- a/tests/unit/cotton/test_icon_badge_box_attrs_passthrough.py
+++ b/tests/unit/cotton/test_icon_badge_box_attrs_passthrough.py
@@ -40,11 +40,6 @@ def case(request: pytest.FixtureRequest) -> tuple[str, str, dict[str, object]]:
     return request.param
 
 
-@pytest.fixture
-def component(case: tuple[str, str, dict[str, object]]) -> str:
-    return case[0]
-
-
 @pytest.fixture(params=THEMES)
 def render(
     request: pytest.FixtureRequest,
@@ -107,28 +102,40 @@ def test_cotton_rejects_attrs_colliding_with_class(render: Callable[..., str]) -
         render(attrs={"class": "override"})
 
 
-def test_cotton_rejects_attrs_colliding_with_icon_role(
-    render: Callable[..., str], component: str
-) -> None:
-    if component != "icon":
-        pytest.skip("role is only reserved for icon")
+ICON_CASE = CASES[0]
+
+
+@pytest.fixture(params=THEMES)
+def icon_render(
+    request: pytest.FixtureRequest, settings: object, cotton_render: Callable[..., str]
+) -> Callable[..., str]:
+    """Icon-only render, independent of the ``case`` fixture — the
+    icon-reserved-name collision tests below have nothing to assert for
+    badge/box, so they must not be parametrized over ``CASES`` at all rather
+    than parametrized and then skipped 2/3 of the time."""
+    settings.CF_UI_THEME = request.param
+    _component, template_name, base_props = ICON_CASE
+
+    def _render(**ctx: object) -> str:
+        return cotton_render(template_name, **{**base_props, "attrs": {}, **ctx})
+
+    return _render
+
+
+def test_cotton_rejects_attrs_colliding_with_icon_role(icon_render: Callable[..., str]) -> None:
     with pytest.raises(PrimitiveConfigError):
-        render(attrs={"role": "override"})
+        icon_render(attrs={"role": "override"})
 
 
 def test_cotton_rejects_attrs_colliding_with_icon_aria_label(
-    render: Callable[..., str], component: str
+    icon_render: Callable[..., str],
 ) -> None:
-    if component != "icon":
-        pytest.skip("aria-label is only reserved for icon")
     with pytest.raises(PrimitiveConfigError):
-        render(attrs={"aria-label": "override"})
+        icon_render(attrs={"aria-label": "override"})
 
 
 def test_cotton_rejects_attrs_colliding_with_icon_aria_hidden(
-    render: Callable[..., str], component: str
+    icon_render: Callable[..., str],
 ) -> None:
-    if component != "icon":
-        pytest.skip("aria-hidden is only reserved for icon")
     with pytest.raises(PrimitiveConfigError):
-        render(attrs={"aria-hidden": "false"})
+        icon_render(attrs={"aria-hidden": "false"})
diff --git a/tests/unit/jinja/test_icon_badge_box_attrs_passthrough.py b/tests/unit/jinja/test_icon_badge_box_attrs_passthrough.py
index 23edff1..e16653c 100644
--- a/tests/unit/jinja/test_icon_badge_box_attrs_passthrough.py
+++ b/tests/unit/jinja/test_icon_badge_box_attrs_passthrough.py
@@ -73,9 +73,21 @@ def _render(**ctx: object) -> str:
     return _render
 
 
+ICON_CASE = CASES[0]
+
+
 @pytest.fixture
-def component(case: tuple[str, str, dict[str, object]]) -> str:
-    return case[0]
+def icon_render(env: Environment) -> Callable[..., str]:
+    """Icon-only render, independent of the ``case`` fixture — the
+    icon-reserved-name collision tests below have nothing to assert for
+    badge/box, so they must not be parametrized over ``CASES`` at all rather
+    than parametrized and then skipped 2/3 of the time."""
+    _component, template_name, base_props = ICON_CASE
+
+    def _render(**ctx: object) -> str:
+        return env.get_template(template_name).render(**{**base_props, **ctx})
+
+    return _render
 
 
 def test_renders_with_no_attrs_prop_at_all(render: Callable[..., str]) -> None:
@@ -124,29 +136,19 @@ def test_rejects_attrs_colliding_with_class(render: Callable[..., str]) -> None:
         render(attrs={"class": "override"})
 
 
-def test_rejects_attrs_colliding_with_icon_role(render: Callable[..., str], component: str) -> None:
-    if component != "icon":
-        pytest.skip("role is only reserved for icon")
+def test_rejects_attrs_colliding_with_icon_role(icon_render: Callable[..., str]) -> None:
     with pytest.raises(PrimitiveConfigError):
-        render(attrs={"role": "override"})
+        icon_render(attrs={"role": "override"})
 
 
-def test_rejects_attrs_colliding_with_icon_aria_label(
-    render: Callable[..., str], component: str
-) -> None:
-    if component != "icon":
-        pytest.skip("aria-label is only reserved for icon")
+def test_rejects_attrs_colliding_with_icon_aria_label(icon_render: Callable[..., str]) -> None:
     with pytest.raises(PrimitiveConfigError):
-        render(attrs={"aria-label": "override"})
+        icon_render(attrs={"aria-label": "override"})
 
 
-def test_rejects_attrs_colliding_with_icon_aria_hidden(
-    render: Callable[..., str], component: str
-) -> None:
+def test_rejects_attrs_colliding_with_icon_aria_hidden(icon_render: Callable[..., str]) -> None:
     """The reservation is static, not conditioned on ``label`` — only the
     no-label branch renders ``aria-hidden`` itself, but the guard must reject
     the collision regardless, since it fires before the template runs."""
-    if component != "icon":
-        pytest.skip("aria-hidden is only reserved for icon")
     with pytest.raises(PrimitiveConfigError):
-        render(attrs={"aria-hidden": "false"})
+        icon_render(attrs={"aria-hidden": "false"})