{{-- A group of items in an `<x-menu>`, labelled ("Sort by", "Share with"), set apart by a gap, or
     both.

     M3 Expressive gives a menu two ways to break its items into clusters, and they are not
     interchangeable:

       - `<x-menu-separator />`, a line. M3: "dividers are more subtle and are the right choice for
         scrollable menus or text-field dropdowns", and "on web, use dividers to separate items".
         The default answer, and the only one for a menu long enough to scroll.
       - `<x-menu-group gap>`, the Expressive "Grouped" layout: no line, a gap. M3: "gaps are the
         more expressive way to separate item clusters" — but "limit to one or two gaps per menu",
         "don't vary gap size", and "never use gaps in a scrollable menu" (unsupported).

     A gapped cluster sets its items 2px apart (SegmentedMenuTokens.SegmentedGap = 2dp) and holds
     them in a box of their own, so the two ends of the cluster round the way the ends of a whole
     list round and each cluster reads as one block. Clusters stand 8px apart, the same 8px a
     separator keeps above and below its line, so a menu is the same height whichever it uses.
     SegmentedMenuTokens' own GroupShape is 8dp where the library's list ends are 12dp; the
     library's shape wins, so a cluster's ends and a list's ends match. --}}

@props([
    'label' => null,
    'gap' => false,
])

@php
    $attributes = $attributes
        ->class([
            'py-1 first:pt-0 last:pb-0' => ! $gap,
            'not-first:mt-2' => $gap,
        ])
        ->merge(array_filter([
            'role' => 'group',
            'aria-label' => $label,
        ], fn ($value): bool => filled($value)));
@endphp

<div {{ $attributes }}>
    @if (filled($label))
        <div aria-hidden="true" class="px-4 pt-2 pb-1 type-label-lg text-on-surface-variant">{{ $label }}</div>
    @endif

    @if ($gap)
        <div class="space-y-0.5">{{ $slot }}</div>
    @else
        {{ $slot }}
    @endif
</div>