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
This commit is contained in:
co-authored by
Claude Opus 5
parent
73937c3726
commit
a237d33426
@@ -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
|
||||
|
||||
Reference in New Issue
Block a user