Andreas Reinhold / reiniandClaude Opus 5
fef20a9178
tests / lint (push) Failing after 2m6s
tests / feature (8.4) (push) Successful in 1m3s
tests / feature (8.5) (push) Successful in 1m7s
tests / browser (safari, webkit) (push) Successful in 3m14s
tests / browser (chrome, chromium) (push) Successful in 2m9s
tests / browser (firefox, firefox) (push) Successful in 2m29s
<x-card> (filled, elevated, outlined), <x-list> and <x-list-item> (plain or M3 Expressive's segmented list), <x-divider>, <x-collapse> on <details>, <x-modal> on the native <dialog>, <x-drawer> as a side sheet or list-detail pane, and <x-bottom-sheet> with drag to dismiss. Dialogs and sheets bind to a Livewire flag or id and write back false or null on close, or use the surrounding Alpine scope. Rows open from anywhere on them through data-list-row and data-list-open. DesignGuard now also reports Blade directives written inside a component tag, where they do not compile. Browser test helpers wait for a complete document with Alpine and Livewire running: in Firefox, networkidle alone could return before a repeated visit had loaded. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01V9NnLxnPp8vaaurb3Z1MFy
43 lines
1.8 KiB
PHP
43 lines
1.8 KiB
PHP
{{-- 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 — 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). --}}
|
|
|
|
@props([
|
|
'title' => null,
|
|
'icon' => null,
|
|
'open' => false,
|
|
'variant' => 'plain',
|
|
])
|
|
|
|
<details
|
|
wire:ignore.self
|
|
@if ($open) open @endif
|
|
{{ $attributes->class([
|
|
'group/collapse [interpolate-size:allow-keywords]',
|
|
'rounded-corner-lg bg-surface-container' => $variant === 'filled',
|
|
]) }}
|
|
>
|
|
<summary @class([
|
|
'state-layer focus-ring flex min-h-12 cursor-pointer list-none items-center gap-3 rounded-[inherit] type-title-md [&::-webkit-details-marker]:hidden',
|
|
'px-4' => $variant === 'filled',
|
|
])>
|
|
@if ($icon)
|
|
<x-icon :name="$icon" class="size-6 text-on-surface-variant" />
|
|
@endif
|
|
|
|
<span class="min-w-0 flex-1">{{ $heading ?? $title }}</span>
|
|
|
|
<x-icon name="expand_more" class="size-6 text-on-surface-variant transition-[rotate] duration-(--md-sys-motion-spatial-fast-duration) ease-spatial-fast group-open/collapse:rotate-180" />
|
|
</summary>
|
|
|
|
<div @class(['pb-4 type-body-md text-on-surface-variant', 'px-4' => $variant === 'filled', 'pt-1'])>
|
|
{{ $slot }}
|
|
</div>
|
|
</details>
|