Button Group

<!-- Group-level Disabled -->
<mdc-button-group variant="connected" disabled>
    <mdc-button variant="filled">Group Disabled 1</mdc-button>
    <mdc-button variant="filled">Group Disabled 2</mdc-button>
    <mdc-button variant="filled">Group Disabled 3</mdc-button>
</mdc-button-group>

<!-- Item-level Disabled -->
<mdc-button-group variant="connected">
    <mdc-button variant="filled">Enabled</mdc-button>
    <mdc-button variant="filled" disabled>Disabled Middle</mdc-button>
    <mdc-button variant="filled">Enabled</mdc-button>
</mdc-button-group>

<mdc-button-group variant="connected" expand-on-active>
    <mdc-button variant="filled">Press & Expand 1</mdc-button>
    <mdc-button variant="filled">Press & Expand 2</mdc-button>
    <mdc-button variant="filled">Press & Expand 3</mdc-button>
</mdc-button-group>

<!-- Standard Icon Button Group (M3 Common Layout) -->
<mdc-button-group variant="standard" selection-mode="single">
    <mdc-toggle-icon-button variant="filled-tonal" checked>
        <mdc-icon>bluetooth</mdc-icon>
    </mdc-toggle-icon-button>
    <mdc-toggle-icon-button variant="filled-tonal">
        <mdc-icon>schedule</mdc-icon>
    </mdc-toggle-icon-button>
    <mdc-toggle-icon-button variant="filled-tonal">
        <mdc-icon>link</mdc-icon>
    </mdc-toggle-icon-button>
    <mdc-toggle-icon-button variant="filled-tonal">
        <mdc-icon>wifi</mdc-icon>
    </mdc-toggle-icon-button>
</mdc-button-group>

<!-- Connected Icon Button Group -->
<mdc-button-group variant="connected" selection-mode="single">
    <mdc-toggle-icon-button variant="filled" checked>
        <mdc-icon>bluetooth</mdc-icon>
    </mdc-toggle-icon-button>
    <mdc-toggle-icon-button variant="filled">
        <mdc-icon>schedule</mdc-icon>
    </mdc-toggle-icon-button>
    <mdc-toggle-icon-button variant="filled">
        <mdc-icon>link</mdc-icon>
    </mdc-toggle-icon-button>
    <mdc-toggle-icon-button variant="filled">
        <mdc-icon>wifi</mdc-icon>
    </mdc-toggle-icon-button>
</mdc-button-group>

<!-- Label Buttons with Icons (M3 Spec Layout 1) -->
<mdc-button-group variant="standard">
    <mdc-button variant="filled-tonal">
        <mdc-icon slot="icon">directions_car</mdc-icon>
        Start
    </mdc-button>
    <mdc-button variant="filled-tonal">
        <mdc-icon slot="icon">directions</mdc-icon>
        Directions
    </mdc-button>
    <mdc-button variant="filled-tonal">
        <mdc-icon slot="icon">share</mdc-icon>
        Share
    </mdc-button>
</mdc-button-group>

<!-- Mixed Label and Icon Buttons (M3 Spec Layout 2) -->
<mdc-button-group variant="standard">
    <mdc-icon-button variant="filled">
        <mdc-icon>fast_rewind</mdc-icon>
    </mdc-icon-button>
    <mdc-button variant="filled">
        <mdc-icon slot="icon">play_arrow</mdc-icon>
        Play
    </mdc-button>
    <mdc-icon-button variant="filled">
        <mdc-icon>fast_forward</mdc-icon>
    </mdc-icon-button>
</mdc-button-group>

<!-- Connected Mixed Group -->
<mdc-button-group variant="connected">
    <mdc-button variant="filled">
        <mdc-icon slot="icon">edit</mdc-icon>
        Edit
    </mdc-button>
    <mdc-icon-button variant="filled">
        <mdc-icon>arrow_drop_down</mdc-icon>
    </mdc-icon-button>
</mdc-button-group>

<!-- None (Action Group) -->
<mdc-button-group selection-mode="none">
    <mdc-button variant="filled">Action 1</mdc-button>
    <mdc-button variant="filled">Action 2</mdc-button>
    <mdc-button variant="filled">Action 3</mdc-button>
</mdc-button-group>

<!-- Single (Radio Mutex) -->
<mdc-button-group selection-mode="single">
    <mdc-toggle-button variant="filled-tonal" checked>Single 1</mdc-toggle-button>
    <mdc-toggle-button variant="filled-tonal">Single 2</mdc-toggle-button>
    <mdc-toggle-button variant="filled-tonal">Single 3</mdc-toggle-button>
</mdc-button-group>

<!-- Multiple (Checkbox Semantics) -->
<mdc-button-group selection-mode="multiple">
    <mdc-toggle-button variant="outlined" checked>Multi A</mdc-toggle-button>
    <mdc-toggle-button variant="outlined" checked>Multi B</mdc-toggle-button>
    <mdc-toggle-button variant="outlined">Multi C</mdc-toggle-button>
</mdc-button-group>

<mdc-button-group variant="connected" shape="round">
    <mdc-button variant="filled" shape="round">Round Start</mdc-button>
    <mdc-button variant="filled" shape="round">Round Middle</mdc-button>
    <mdc-button variant="filled" shape="round">Round End</mdc-button>
</mdc-button-group>

<mdc-button-group variant="connected" shape="square">
    <mdc-button variant="filled" shape="square">Square Start</mdc-button>
    <mdc-button variant="filled" shape="square">Square Middle</mdc-button>
    <mdc-button variant="filled" shape="square">Square End</mdc-button>
</mdc-button-group>

<mdc-button-group variant="connected" size="extra-small">
    <mdc-button variant="filled" size="extra-small">Extra Small</mdc-button>
    <mdc-button variant="filled" size="extra-small">Extra Small</mdc-button>
</mdc-button-group>

<mdc-button-group variant="connected" size="small">
    <mdc-button variant="filled" size="small">Small</mdc-button>
    <mdc-button variant="filled" size="small">Small</mdc-button>
</mdc-button-group>

<mdc-button-group variant="connected" size="medium">
    <mdc-button variant="filled" size="medium">Medium</mdc-button>
    <mdc-button variant="filled" size="medium">Medium</mdc-button>
</mdc-button-group>

<mdc-button-group variant="connected" size="large">
    <mdc-button variant="filled" size="large">Large</mdc-button>
    <mdc-button variant="filled" size="large">Large</mdc-button>
</mdc-button-group>

<mdc-button-group variant="connected" size="extra-large">
    <mdc-button variant="filled" size="extra-large">Extra Large</mdc-button>
    <mdc-button variant="filled" size="extra-large">Extra Large</mdc-button>
</mdc-button-group>

<!-- Connected Button Group (Default) -->
<mdc-button-group variant="connected">
    <mdc-button variant="filled">Leading</mdc-button>
    <mdc-button variant="filled">Middle</mdc-button>
    <mdc-button variant="filled">Trailing</mdc-button>
</mdc-button-group>

<!-- Standard Button Group -->
<mdc-button-group variant="standard">
    <mdc-button variant="filled">Leading</mdc-button>
    <mdc-button variant="filled">Middle</mdc-button>
    <mdc-button variant="filled">Trailing</mdc-button>
</mdc-button-group>

<!-- Connected Vertical -->
<mdc-button-group variant="connected" orientation="vertical">
    <mdc-button variant="filled">Top</mdc-button>
    <mdc-button variant="filled">Middle</mdc-button>
    <mdc-button variant="filled">Bottom</mdc-button>
</mdc-button-group>

<!-- Standard Vertical -->
<mdc-button-group variant="standard" orientation="vertical">
    <mdc-button variant="filled-tonal">Top</mdc-button>
    <mdc-button variant="filled-tonal">Middle</mdc-button>
    <mdc-button variant="filled-tonal">Bottom</mdc-button>
</mdc-button-group>