# `lr-control-group` - **Import** `import '@aceshooting/lyra-ui/components/lr-control-group.js';` (stable tag alias; registers the tag) - **Class** `LyraControlGroup`, also available unregistered from `@aceshooting/lyra-ui/components/layout/control-group/control-group.class.js` - **Family** `components/layout/` — see `llms/index.md` for its siblings - **Status** `stable` since `4.0.0` — see the maturity and deprecation policy in `llms/shared.md` - **Release history** [CHANGELOG.md](../../CHANGELOG.md); family-wide breaking-change summaries: [llms-full.txt](../../llms-full.txt) - **Deprecations** none - **Optional peers** none - **Themeable via** 1 part, 1 custom property — see this component's own `@csspart`/`@cssprop` list below - **Library-wide behavior** (events, form association, `locale`/`strings`, tokens, TS types): `llms/shared.md` --- ## `lr-control-group` Semantic grouping for mixed controls and actions. It keeps slotted children in a wrapping inline-flex row and centers children with different intrinsic heights. Use it for dashboard toolbars that combine segmented controls, selects, buttons, and other interactive elements. **Properties:** - `label: string = ''` — accessible-name fallback for the internal `role="group"`; a host `aria-label`, when present, wins including an explicitly empty value. - `responsive: boolean = false` (reflected) — makes the host a CSS size-query container (`container-type: inline-size`) so a future `@container` rule can react to this group's own allocated width. Left unset, the host is `container-type: normal`, since `container-type: inline-size` unconditionally would collapse the group to 0 inline size whenever it sits as an ordinary (`flex-basis: auto`) child of a shrink-to-fit flex row — this component's own primary use case. `[part="base"]` itself now fills the host's inline size unconditionally (not gated by `responsive`): a percentage inline-size against an indefinite/shrink-to-fit containing block resolves as `auto`, so this is a no-op unless the host is given a definite inline size, directly or via an ancestor. **Events:** none. **Slots:** default — controls, buttons, or other action content. **CSS parts:** `base` — the internal `role="group"` wrapper. **Themeable custom properties:** `--lr-control-group-gap` (default `var(--lr-space-xs)`) — gap between grouped controls; shared spacing and layout tokens apply as well. ```html Export ``` **Known gotchas:** - This is a layout and semantics primitive; it does not coordinate child values or emit a group change event. - Children wrap according to the group's own allocated inline size, not the viewport width. - `[part="base"]` fills the host's inline size unconditionally, but the host itself never gets a size from `responsive`/`container-type` alone — give the host a definite inline size directly (a percentage width, a grid track, a block-level parent) for the fill to have any visible effect. - Setting `responsive` while this group also sits as a shrink-to-fit flex child re-introduces the 0-width collapse the unset default is designed to avoid — only opt in when the group's own size comes from somewhere else. ---