{{-- 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 a height that eases open and shut on the same spring in every engine
     (`data-md-collapse`, resources/css/components/collapse.css, and resources/js/collapse.js,
     which animates the `<details>` itself because only Chrome can animate its content's height
     from CSS). `open` starts it open.
     `variant`: `plain` (the default, on the surface around it) or `filled` (a surface-container
     tile with a large corner).

     Its open state can be bound, both ways:
     - `wire:model` (any modifiers; `.live` tells the server at once) entangles it with a Livewire
       boolean property. The server renders `open` from the property, so the first paint matches it
       and `open` is ignored; toggling writes the property, and the property changing opens or
       closes it.
     - `x-model` binds an Alpine property through `x-modelable`; `open` is then only the first
       paint, until Alpine starts and applies the property.
     The state lives in `collapseOpen` on the `<details>`, a name kept clear of `open`, which a
     dialog inside the slot may be reading from a scope around it. Without a binding there is no
     Alpine on it at all.

     It renders the foundation's `md-state-layer` and `md-focus-ring` (foundation/interaction.css)
     on the summary; nothing here copies their rules. --}}

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

@php
    $model = $attributes->wire('model')->value() ?: null;
    $bound = $model !== null || count($attributes->whereStartsWith('x-model')->getAttributes()) > 0;
    $expanded = (bool) $open;
    $variant = $variant === 'filled' ? 'filled' : 'plain';

    if ($model !== null && ($component = \Livewire\Livewire::current()) !== null) {
        $expanded = (bool) data_get($component, $model);
    }
@endphp

<details
    wire:ignore.self
    data-md-collapse
    data-md-variant="{{ $variant }}"
    @if ($bound)
        x-data="{ collapseOpen: @if ($model !== null) @entangle($attributes->wire('model')) @else @js($expanded) @endif }"
        @if ($model === null) x-modelable="collapseOpen" @endif
        x-effect="materialCollapse($el, collapseOpen)"
        x-on:toggle="collapseOpen = $el.open"
    @endif
    @if ($expanded) open @endif
    {{ $attributes->whereDoesntStartWith('wire:model') }}
>
    <summary data-md-collapse-summary class="md-state-layer md-focus-ring">
        @if ($icon)
            <x-livewire-material::icon :name="$icon" data-md-collapse-icon />
        @endif

        <span data-md-collapse-title>{{ $heading ?? $title }}</span>

        <x-livewire-material::icon name="expand_more" data-md-collapse-chevron />
    </summary>

    <div data-md-collapse-body>
        {{ $slot }}
    </div>
</details>