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` / `` @@ -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 `` or `` 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 `` 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 ``, ``, or `` | 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 %} {{ slot }} 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 %}
{{ slot }}
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 @@ -
+{% load cf_ui %} +
{% 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 %} 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 %} {{ slot }} 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 %} -
{{ slot }}
+
{{ slot }}
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 @@ -
+{% load cf_ui %} +
{% 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 %} 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 %} {{ slot }} 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 %}
{{ slot }}
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 @@ -
+{% load cf_ui %} +