Andreas Reinhold / reiniandClaude Opus 5
1e580c573e
Package views now write <x-livewire-material::button>, so a configured prefix (which Blade spells <x-m::button>) and an application component of the same name can no longer break or shadow them. The showcase rewrites its examples to the configured prefix. Adds the README, and waits for the adaptive rail to hear a resize before the navigation tests press its menu button. 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-livewire-material::icon :name="$icon" class="size-6 text-on-surface-variant" />
|
|
@endif
|
|
|
|
<span class="min-w-0 flex-1">{{ $heading ?? $title }}</span>
|
|
|
|
<x-livewire-material::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>
|