Ease a collapse open, which its own comment already promised

Plan step 19, containment.md C-24. `interpolate-size: allow-keywords`
was set and nothing transitioned, so the content snapped open. A new
resources/css/components/collapse.css transitions `block-size` on
`::details-content` over the fast spatial spring, with
`content-visibility` `allow-discrete` beside it so the section stays
rendered while it closes. The `<details>` carries `data-collapse` for
the rule to find.

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

resources/css/components/collapse.css

@@ -0,0 +1,30 @@
+/*
+ * `<x-collapse>`'s height, eased open.
+ *
+ * The native `<details>` opens and closes by itself; what it cannot do on its own is animate, so
+ * the component sets `interpolate-size: allow-keywords` (which makes `0` → `auto` an animatable
+ * pair) and this transitions `block-size` on `::details-content`, the pseudo-element that holds
+ * everything after the `<summary>`. `content-visibility` goes with it, `allow-discrete`, so the
+ * content stays rendered while it closes rather than vanishing on the first frame.
+ *
+ * The fast spatial spring, as the chevron beside it: M3's spatial track is for anything that
+ * changes size or position. Under reduced motion the duration token is zero
+ * (resources/css/tokens/motion.css), so the section snaps open with nothing else to do.
+ *
+ * Not an M3 component — M3 has expandable list items and menu expansion, no standalone disclosure
+ * — so the geometry is the library's and only the motion tokens are M3's.
+ */
+
+@layer components {
+    [data-collapse]::details-content {
+        block-size: 0;
+        overflow: hidden;
+        transition:
+            block-size var(--md-sys-motion-spatial-fast-duration) var(--md-sys-motion-spatial-fast),
+            content-visibility var(--md-sys-motion-spatial-fast-duration) allow-discrete;
+    }
+
+    [data-collapse][open]::details-content {
+        block-size: auto;
+    }
+}

resources/css/material.css

@@ -22,6 +22,7 @@
 @import './tokens/state.css';
 @import './components/groups.css';
 @import './components/list.css';
+@import './components/collapse.css';
 @import './components/field.css';
 @import './components/menu.css';
 @import './components/selection.css';

resources/views/components/collapse.blade.php

@@ -5,7 +5,8 @@
      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
+     that eases open on the same spring (`data-collapse`, resources/css/components/collapse.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:
@@ -38,6 +39,7 @@
 
 <details
     wire:ignore.self
+    data-collapse
     @if ($bound)
         x-data="{ collapseOpen: @if ($model !== null) @entangle($attributes->wire('model')) @else @js($expanded) @endif }"
         @if ($model === null) x-modelable="collapseOpen" @endif

tests/Feature/Components/CollapseTest.php

@@ -11,6 +11,8 @@ it('discloses on the native details element, kept open through a morph', functio
         ->toContain('wire:ignore.self')
         ->toContain(' open ')
         ->toContain('rounded-corner-lg bg-surface-container')
+        ->toContain('data-collapse')
+        ->toContain('[interpolate-size:allow-keywords]')
         ->toContain('How long do links last?')
         ->toContain('Until the expiry.')
         ->toContain('group-open/collapse:rotate-180');
@@ -20,12 +22,12 @@ it('has no Alpine on it without a binding', function () {
     $html = (string) $this->blade('<x-collapse title="Advanced" open>Body</x-collapse>');
 
     expect($html)
-        ->toMatch('/<details\s+wire:ignore.self\s+open\s+class="group\/collapse/')
+        ->toMatch('/<details\s+wire:ignore.self\s+data-collapse\s+open\s+class="group\/collapse/')
         ->not->toContain('x-data')
         ->not->toContain('x-modelable')
         ->not->toContain('x-on:toggle')
         ->and((string) $this->blade('<x-collapse title="Advanced">Body</x-collapse>'))
-        ->toMatch('/<details\s+wire:ignore.self\s+class="group\/collapse/');
+        ->toMatch('/<details\s+wire:ignore.self\s+data-collapse\s+class="group\/collapse/');
 });
 
 it('binds its open state through x-model, drawing the open prop until Alpine starts', function () {