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/showcase/sections/containment.blade.php

@@ -55,6 +55,18 @@
                 <div class="flex h-10 items-center gap-4"><span>Left</span><x-divider vertical /><span>Right</span></div>
             </div>
             BLADE,
+        'Collapse bound to a property' => <<<'BLADE'
+            <div x-data="{ advanced: false }" class="w-full space-y-4">
+                <div class="flex flex-wrap items-center gap-4">
+                    <x-button label="Open" variant="tonal" x-on:click="advanced = true" />
+                    <x-button label="Close" variant="tonal" x-on:click="advanced = false" />
+                    <span class="type-body-md text-on-surface-variant">advanced: <span x-text="advanced"></span></span>
+                </div>
+                <x-collapse title="Advanced settings" icon="tune" variant="filled" x-model="advanced">
+                    Bound with x-model here. In a Livewire view, wire:model="advanced" binds a boolean property the same way, and the page arrives with it open or closed as the property is.
+                </x-collapse>
+            </div>
+            BLADE,
         'Dialogs' => <<<'BLADE'
             <div x-data="{ open: false }">
                 <x-button label="Basic dialog" variant="tonal" x-on:click="open = true" />