@props([
    'href' => '#',
    'active' => false,
    'disabled' => false,
])
@php
    // items-center, not baseline: the icon is a block-level svg (Tailwind's
    // preflight makes it one) and must sit BESIDE the label, never above it.
    $base = 'flex items-center gap-3 rounded border-l-2 px-3 py-2 text-sm font-medium min-h-11';

    // The label is a flex row of its own so that an icon handed to the default
    // slot instead of the icon slot still lands next to the text. Passing it in
    // the default slot put a display:block svg into an inline span and pushed
    // the label onto a second line — the sidebar entry then stood twice as tall
    // as every other one. Layout must not depend on which slot was used.
    $label = 'flex min-w-0 items-center gap-3';
    $state = $active
        ? 'bg-accent-subtle text-accent-text border-accent'
        : 'text-muted border-transparent hover:bg-surface-hover hover:text-body';
@endphp
@if ($disabled)
    {{-- Section not built yet: render a non-interactive item, never a dead link. --}}
    <span aria-disabled="true" {{ $attributes->merge(['class' => $base.' border-transparent text-faint cursor-not-allowed']) }}>
        @isset($icon)<span class="shrink-0">{{ $icon }}</span>@endisset
        <span class="{{ $label }}">{{ $slot }}</span>
    </span>
@else
    <a href="{{ $href }}" @if ($active) aria-current="page" @endif {{ $attributes->merge(['class' => $base.' '.$state]) }}>
        @isset($icon)<span class="shrink-0">{{ $icon }}</span>@endisset
        <span class="{{ $label }}">{{ $slot }}</span>
    </a>
@endif