{{-- A group of destinations in an `<x-navigation-rail>` under a heading.

         <x-navigation-rail-section label="Labels">
             <x-navigation-rail-item label="Travel" icon="label" link="/labels/travel" />
             <x-navigation-rail-item label="Receipts" icon="label" link="/labels/receipts" />
         </x-navigation-rail-section>

     The heading (title-small, on-surface-variant, in line with the icons) shows only while the
     rail is expanded, as M3 draws section headers; collapsed, a little space sets the group apart.
     It names the group for screen readers either way. --}}

@props([
    'label',
])

@php
    $headingId = 'navigation-section-'.substr(md5((string) $label), 0, 10);
@endphp

<div role="group" aria-labelledby="{{ $headingId }}" data-navigation-rail-section {{ $attributes }}>
    <p id="{{ $headingId }}" data-navigation-rail-heading>{{ $label }}</p>

    {{ $slot }}
</div>