Button group

Button group (COMPONENT_SPEC §3): standard (a pressed item grows by ExpandedRatio while its neighbors shrink, on the fast spatial spring) or connected (a segmented row whose items only morph their own corners). React Aria provides the buttons (useButton, or useToggleButtonGroupItem with react-stately useToggleGroupState when selectable); the motion, roving tabindex and overflow measurement come from m3e-elements' ButtonGroupLayout, the same code <m3e-button-group> runs. The overflow menu is a baseline <Menu> (Compose DropdownMenu) listing the hidden items; its button has Compose's built-in plain tooltip.

One button of a <ButtonGroup> (rendered by the group, never on its own).

<m3e-button-group variant="connected" size="m" selection-mode="single" label="View"> (COMPONENT_SPEC §3). Renders the m3e-css .m3e-button-group contract inside itself (the host is display: contents) from its <m3e-button-group-item> children; ButtonGroupLayout adds the press width springs (standard groups), the interruptible shape springs, roving focus and overflow measurement.

• variant: standard (default) | connected. size: xs | s (default) | m | l | xl. shape: round (default) | square. button-variant: filled (default) | tonal | elevated | outlined | text.
• selection-mode: none (default; plain buttons), single (role="radiogroup", radio items with aria-checked), multiple (toggle buttons with aria-pressed). disallow-empty-selection keeps one item selected (selection-required is its deprecated name, since 1.8; removed in 2.0). disabled disables every item. label: the group's accessible name.
• overflow (standard groups): trailing items that do not fit collapse into a menu opened from a "More options" icon button (overflow-label renames it). The menu is <m3e-menu variant="baseline">, loaded on first use. The button carries the plain tooltip Compose builds into ButtonGroupDefaults.OverflowIndicator (owner decision M9 #30): its name, above it (<m3e-tooltip>'s TooltipController, imported from the tooltip-popup.js entry when the button is first rendered). It repeats the button's name, so it is aria-hidden (owner decision M9 #2).
• Keyboard: Tab enters on one item (the last focused, else the checked one, else the first); ArrowLeft/ArrowRight (mirrored in RTL), Home and End move focus; Enter/Space activate.
• Events: selection-change on the group when the selection changes, detail: { value, selected, values } (change carries the same detail and is deprecated since 1.8, removed in 2.0); action on the <m3e-button-group-item> (bubbles) when it is activated, detail: { value }.

<m3e-button-group-item value="bold" icon="format_bold" selected>Bold</m3e-button-group-item> — data for one button of a <m3e-button-group> (it renders nothing itself). The label is the text content; an icon-only item needs label (its accessible name). variant overrides the group's button-variant for this item.

Button group, standard and connected (COMPONENT_SPEC §3). Static layout here; the width redistribution on press, interruptible shape springs and overflow measurement are JavaScript (m3e-elements <m3e-button-group> and m3e-react <ButtonGroup>, both through m3e-elements' ButtonGroupLayout).

Variants: --standard (default) --connected. Sizes: --size-xs --size-s (default) --size-m --size-l --size-xl; give the items the matching .m3e-button--size-*. --overflow makes the group span its container so trailing items can collapse into the menu of the .m3e-button-group__overflow icon button (hidden items carry hidden). The overflow button is followed by its plain tooltip (ButtonGroupDefaults.OverflowIndicator wraps it in a TooltipBox, ButtonGroup.kt L306–311): a popover .m3e-tooltip (tooltip.css) with the button's name, aria-hidden because it repeats that name.