{{-- An M3 Expressive button group: related `<x-button>`s in a row.

         <x-button-group size="md" label="Text formatting">
             <x-button icon="format_bold" aria-label="Bold" variant="tonal" :selected="$bold" wire:click="toggleBold" />
             …
         </x-button-group>

     Standard (the default): the buttons stand apart, and pressing a label button widens it while
     its neighbours give way. `connected`: 2px apart with small inner corners, the shape that
     replaced M3's segmented button; a selected (aria-pressed) button rounds fully. Give `size`
     the size of the buttons inside, so the spacing and corners match. For a choice bound to a
     property, `<x-group>` draws a connected group of radios.

     A group never wraps to a second line — M3's rule, and the press expansion only reaches a
     neighbour on the same line anyway. Where a row is too long for its window the answer is a
     smaller `size` or fewer buttons, or two groups stacked.

     Spacing from the M3 Expressive spec (ButtonGroupSmallTokens: 12px at the small size). The
     shapes are resources/css/components/groups.css. --}}

@props([
    'connected' => false,
    'size' => 'sm',
    'label' => null,
])

@php
    $size = in_array($size, ['xs', 'sm', 'md', 'lg', 'xl'], true) ? $size : 'sm';
@endphp

<div
    role="group"
    @if ($label) aria-label="{{ $label }}" @endif
    data-button-group="{{ $connected ? 'connected' : 'standard' }}"
    data-size="{{ $size }}"
    {{ $attributes->class([
        'inline-flex items-center',
        'gap-0.5' => $connected,
        'gap-[18px]' => ! $connected && $size === 'xs',
        'gap-3' => ! $connected && $size === 'sm',
        'gap-2' => ! $connected && in_array($size, ['md', 'lg', 'xl'], true),
    ]) }}
>
    {{ $slot }}
</div>