feat(CheckboxGroup/RadioGroup): support icon in items

[IgorShevchik]

Linked issue

Sync with nuxt/ui@v4 — 07f3fe8d (nuxt/ui#6726). Three more commits remain in the queue after this one.

Type of change

• New feature (a non-breaking change that adds functionality)
• Bug fix (a non-breaking change that fixes an issue)

Description

Upstream files 21 changes under one title, doing three separable things. Two are taken, one is declined by maintainer decision.

The feature

An item may carry an icon. On a checkbox it replaces the check mark; when indicator is hidden — which makes the control sr-only — it renders above the label instead. A radio has no icon inside its indicator, so there the icon only ever appears in the hidden case.

Adapting it was larger here than the upstream diff suggests, because this fork's Checkbox had no icon prop at all: the check and minus glyphs came straight from dictionary/icons, fixed. So this adds public API rather than extending it:

• CheckboxProps.icon?: IconComponent, defaulting to icons.check
• CheckboxGroupItem.icon and RadioGroupItem.icon, plus a group-level icon on CheckboxGroupProps — the item's own icon wins (item.icon ?? props.icon)
• RadioGroup's icon slot, which did not exist, and the matching entry in the item's b24ui pick

indeterminateIcon is deliberately not added: the minus glyph stays governed by the icon dictionary, which is this fork's override mechanism for it.

The a11y fix the feature exposes

With indicator: hidden the control carries sr-only, which computes to clip-path: inset(50%) — and the focus ring lived on that same element. Tabbing to the checkbox produced a ring on something clipped out of existence: no visible focus indication at all.

Upstream's focusCard() helper is written in their colour tokens, but the mechanism — :has(:focus-visible) on the wrapper — transfers, and lands as one class list per component reusing the variables the control already used (--b24ui-border-color on Checkbox's root, --b24ui-background on RadioGroup's item, which the colour variant defines on root and inheritance carries down).

Scoped to indicator: hidden. Upstream also moved focus for variant: card generally; there our control is still visible and its own ring still works, so that is a design call rather than a defect.

Declined

Upstream's palette refresh — has-data-[state=checked]:bg-${color}/10, hover:not-has-disabled:… borders, border-${color}/50, the highlight: false branch and the focusControl rewrite. This fork colours these components with style-filled* classes and air tokens, and already has its own checked/hover treatment for card and table; translating them would be a design change wearing a port's clothes. Consequently upstream's two 'with highlight indicator hidden' render cases are not ported, and their icon sizes for the visible indicator are not taken either — ours keeps size-full inside the box, so nothing about the existing checkbox moves.

Docs and playgrounds

Taken: the item-type bullet (icon?: IconComponent, linked to #indicator), the icon entry in RadioGroup's item b24ui list, and the note under Indicator on all three pages — without upstream's :badge{label="Soon"}, which tracks their release train and which aa5f4af0, two commits later in this same queue, deletes. Upstream's editorial rewrites of example copy are unrelated to the feature and not taken.

Per-item icons cannot be demonstrated through ::component-code here — that renderer casts a single named icon via cast:, and this fork's idiom for items carrying components is a .vue example. So both group pages get one (System/Light/Dark, indicator: hidden, variant: table), while checkbox.md keeps the inline form and gains an indicator selector so start/end stay reachable from the same block. MonitorIcon does not exist in @bitrix24/b24icons-vue; ThemeIcon is the outline set's equivalent.

Both playgrounds get an icon row on checkbox-group and radio-group, per the §6 new-component checklist.

Verification

The focus fix is measured, not asserted. Driving the built docs page in Chromium, focusing the sr-only control and reading computed styles off the item:

	outline on the item
new classes removed (the state before this port)	none 0px
as shipped	solid 2px rgb(0, 117, 255)

and the control itself computes clip-path: inset(50%), which is why its own ring was never a substitute. All four generated rules are in the stylesheet with real declarations (outline-width, outline-offset, both colour variants).

Across the three prerendered pages the icon renders inside the wrapper (3 + 3 + 1), the wrapper is the centred column, and container carries h-auto. Snapshot churn on Table is one <!--v-if--> placeholder per selection checkbox, from the new v-if in the wrapper.

30 new tests, 12 new render cases. Gate with CI=true: dev:prepare · lint · typecheck · test (6900 passed, 6 skipped) · build · docs:generate (1261 routes, up from 1259 for the two new examples).

Ledger: cursor → 07f3fe8d, parity snapshot refreshed (one line, zero package differences).

Checklist

• I have linked an issue or discussion.
• I have updated the documentation accordingly.

---

Generated by Claude Code