{{-- 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.

     `shape` is M3's "Default shape | Round, square" configuration, and covers every button in the
     group so it need not be written on each one: `square` squares a connected group's two ends to
     the corner its inner edges take (M3's square table, 4/8/8/16/20dp by size) and gives a
     standard group's buttons the square corner scale `<x-button shape="square">` draws. Selection
     still morphs the other way — M3 has a toggle inside a group "swap shape square/round on
     selection" — so a selected button in a square group rounds.

     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,
    'shape' => 'round',
])

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

<div
    role="group"
    @if ($label) aria-label="{{ $label }}" @endif
    data-button-group="{{ $connected ? 'connected' : 'standard' }}"
    data-size="{{ $size }}"
    data-shape="{{ $shape }}"
    {{ $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>