{{-- A section that opens to show more: an FAQ answer, advanced settings.

     Not an M3 component; built on the native `<details>` so it opens without script, keeps its
     state through a Livewire morph (`wire:ignore.self` stops the server's HTML from closing it),
     and is announced as a disclosure. Drawn in M3's terms: a title-medium `title` (or a
     `heading` slot), an optional leading `icon`, a chevron that turns over on the spatial spring,
     and — where the browser supports animating `details` content (`interpolate-size`) — a height
     that eases open. `open` starts it open. `variant`: `plain` (the default, on the surface around
     it) or `filled` (a surface-container tile with a large corner). --}}

@props([
    'title' => null,
    'icon' => null,
    'open' => false,
    'variant' => 'plain',
])

<details
    wire:ignore.self
    @if ($open) open @endif
    {{ $attributes->class([
        'group/collapse [interpolate-size:allow-keywords]',
        'rounded-corner-lg bg-surface-container' => $variant === 'filled',
    ]) }}
>
    <summary @class([
        'state-layer focus-ring flex min-h-12 cursor-pointer list-none items-center gap-3 rounded-[inherit] type-title-md [&::-webkit-details-marker]:hidden',
        'px-4' => $variant === 'filled',
    ])>
        @if ($icon)
            <x-livewire-material::icon :name="$icon" class="size-6 text-on-surface-variant" />
        @endif

        <span class="min-w-0 flex-1">{{ $heading ?? $title }}</span>

        <x-livewire-material::icon name="expand_more" class="size-6 text-on-surface-variant transition-[rotate] duration-(--md-sys-motion-spatial-fast-duration) ease-spatial-fast group-open/collapse:rotate-180" />
    </summary>

    <div @class(['pb-4 type-body-md text-on-surface-variant', 'px-4' => $variant === 'filled', 'pt-1'])>
        {{ $slot }}
    </div>
</details>