{{-- 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, `class` and `style` to the pair;
     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. resources/css/components/split-button.css carries the rest of the spec, which is
     all geometry: the inner corners (4/4/4/8/12px, growing under the finger, not shrinking as a
     connected group's do), the trailing icon's own size (22/22/26/38/50px, which the icon-button
     table has no entry for), the 1/1/2/3/6px nudge that sits the chevron towards the leading half,
     and the standard motion scheme M3 asks for while it turns over. --}}

@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');
@endphp

<div data-md-split-button data-md-size="{{ $size }}" {{ $attributes->only(['class', 'style']) }}>
    <x-livewire-material::button
        {{ $attributes->except(['class', 'style']) }}
        :label="$label"
        :icon="$icon"
        :variant="$variant"
        :color="$color"
        :size="$size"
        :disabled="$disabled"
        :spinner="$spinner"
        data-md-split="leading"
    />

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

        {{ $slot }}
    </x-livewire-material::menu>
</div>