Bind the collapse's open state through wire:model and x-model

An application keeps a disclosure's state in a Livewire property
(`<x-collapse wire:model="fineTuning">`) or an Alpine one. Either binding
now works both ways: toggling the details writes the property, and the
property changing, in an action or in Alpine, opens or closes it.

`wire:model` is entangled as the dialog and sheets entangle theirs, and
taken off the element. The server renders `open` from the property, so
the first paint matches it. `x-model` binds through `x-modelable`, with
`open` as the first paint until Alpine starts. The state is named
`collapseOpen` so it never hides an `open` that a dialog in the slot reads
from a scope around it.

Without a binding the element has no Alpine and renders as before.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01RHoXZSHc8gGpZjFmA5fPc2

resources/views/components/collapse.blade.php

@@ -6,7 +6,18 @@
      `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). --}}
+     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. --}}
 
 @props([
     'title' => null,
@@ -15,10 +26,26 @@
     'variant' => 'plain',
 ])
 
+@php
+    $model = $attributes->wire('model')->value() ?: null;
+    $bound = $model !== null || count($attributes->whereStartsWith('x-model')->getAttributes()) > 0;
+    $expanded = (bool) $open;
+
+    if ($model !== null && ($component = \Livewire\Livewire::current()) !== null) {
+        $expanded = (bool) data_get($component, $model);
+    }
+@endphp
+
 <details
     wire:ignore.self
-    @if ($open) open @endif
-    {{ $attributes->class([
+    @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="$el.open = collapseOpen"
+        x-on:toggle="collapseOpen = $el.open"
+    @endif
+    @if ($expanded) open @endif
+    {{ $attributes->whereDoesntStartWith('wire:model')->class([
         'group/collapse [interpolate-size:allow-keywords]',
         'rounded-corner-lg bg-surface-container' => $variant === 'filled',
     ]) }}