{{-- An M3 Expressive split button: an action, and a menu of its alternatives.

         <x-split-button label="Download all" icon="download" wire:click="downloadZip" menu-label="Download options">
             <x-menu-item label="Download as ZIP" wire:click="downloadZip" />
             <x-menu-item label="Download files one by one" wire:click="downloadEach" />
         </x-split-button>

     Attributes (wire:click, spinner…) go to the leading button; the slot is the menu. `variant` is
     `filled` (the default), `tonal`, `outlined` or `elevated` — a text split button does not exist
     in M3 — with `color` and `size` as on `<x-button>`. The halves sit 2px apart; the trailing
     one rounds fully and turns its chevron over while the menu is open. `menu-label` names the
     trailing button and the menu for screen readers.

     Padding from SplitButton*Tokens (androidx Compose Material 3, Apache-2.0): the leading button
     keeps less room on its inner side at the two smallest sizes, and the trailing button is 48px
     wide there. The corners are resources/css/components/groups.css. --}}

@props([
    'label' => null,
    'icon' => null,
    'variant' => 'filled',
    'color' => 'primary',
    'size' => 'sm',
    'disabled' => false,
    'spinner' => null,
    'menuLabel' => null,
    'position' => 'bottom-end',
])

@php
    $variant = in_array($variant, ['filled', 'tonal', 'outlined', 'elevated'], true) ? $variant : 'filled';
    $size = in_array($size, ['xs', 'sm', 'md', 'lg', 'xl'], true) ? $size : 'sm';
    $menuLabel ??= __('More options');

    $leadingPadding = ['xs' => 'pe-2.5', 'sm' => 'pe-3', 'md' => '', 'lg' => '', 'xl' => ''][$size];
    $trailingWidth = ['xs' => 'w-12', 'sm' => 'w-12', 'md' => '', 'lg' => '', 'xl' => ''][$size];
@endphp

<div data-button-group="split" data-size="{{ $size }}" {{ $attributes->only('class')->class('inline-flex items-center gap-0.5') }}>
    <x-button
        {{ $attributes->except('class') }}
        :label="$label"
        :icon="$icon"
        :variant="$variant"
        :color="$color"
        :size="$size"
        :disabled="$disabled"
        :spinner="$spinner"
        corners=""
        data-split="leading"
        :class="$leadingPadding"
    />

    <x-menu :position="$position" :label="$menuLabel">
        <x-slot:trigger>
            <x-button
                icon="keyboard_arrow_down"
                :aria-label="$menuLabel"
                :variant="$variant"
                :color="$color"
                :size="$size"
                :disabled="$disabled"
                corners=""
                data-split="trailing"
                :class="$trailingWidth"
            />
        </x-slot:trigger>

        {{ $slot }}
    </x-menu>
</div>