Andreas Reinhold / reiniandClaude Opus 5
247c596c3a
An over-engineering audit of the whole tree, applied in five reviewed batches. Behaviour stays the same except where UPGRADE.md says otherwise. PHP: the showcase and error-page stylesheets are prebuilt into resources/dist by bin/stylesheets.mjs, through Vite's own postcss-import (first occurrence kept, the order an application's build gives), instead of Stylesheets::bundle() inlining imports on every request; only the import walk DesignGuard needs stays. SchemeStylesheet::withProfiles() replaces three copies of the scheme-plus-profiles loop, material:scheme leaves spec and contrast checks to the node script that already made them, and the error page's scheme cache, the hashed view namespace, the translations path with no lang/ folder and DesignGuard's 1.x-name hints are gone. JS: the androidx shape port progress.js and both bin scripts each carried lives once in resources/js/shapes.js (the generated SVGs are unchanged); util.js holds ringIndex(), ms(), reopenGuard() and remember(), which were written out several times; listeners are released through AbortController; tooltip.js's hoverPopover() serves the rich tooltip too. CSS: every rule for an element inside the navigation rail queries `--md-navigation-rail-value` instead of repeating the seven collapsed conditions under five media branches; badge, alert, progress, slider and button read one non-inheriting colour-role table (components/color.css); the dialog chrome, the submenu's popover chrome, the chip's state layer and touch target, and the visually-hidden inputs use the shared rules they copied; foundation/tokens.css is folded into foundation.css. Views: Support\Field and Support\Link replace the error-key, bound-value and link-attribute blocks copied into the fields and link components; the timepicker period group, the menu filter and the showcase head are partials; the datepicker's steppers and entry fields are loops; component docblocks no longer restate SKILL.md. Tests and tooling: one dataset-driven ComponentStylesheetsTest replaces four per-group files, DesignGuardTest and the layout-component tests use datasets, browser tests share one ready() helper, CSS parsing lives in ComponentStylesheet alone. docs/audits and the finding IDs citing it are removed, as are pestphp/pest-plugin-laravel, the unused composer scripts and check:font; the lint job runs in the feature job, which now installs node packages so the prebuilt-stylesheet staleness test runs in CI. Feature suite 1177 passed, Chrome browser suite 299 passed. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
69 lines
3.1 KiB
PHP
69 lines
3.1 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 a height that eases open and shut on the same spring in every engine
|
|
(`data-md-collapse`, resources/css/components/collapse.css, and resources/js/collapse.js,
|
|
which animates the `<details>` itself because only Chrome can animate its content's height
|
|
from 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:
|
|
- `wire:model` (any modifiers; `.live` tells the server at once) entangles it with a Livewire
|
|
boolean property. The server renders `open` from the property, so the first paint matches it
|
|
and `open` is ignored; toggling writes the property, and the property changing opens or
|
|
closes it.
|
|
- `x-model` binds an Alpine property through `x-modelable`; `open` is then only the first
|
|
paint, until Alpine starts and applies the property.
|
|
The state lives in `collapseOpen` on the `<details>`, a name kept clear of `open`, which a
|
|
dialog inside the slot may be reading from a scope around it. Without a binding there is no
|
|
Alpine on it at all.
|
|
|
|
It renders the foundation's `md-state-layer` and `md-focus-ring` (foundation/interaction.css)
|
|
on the summary; nothing here copies their rules. --}}
|
|
|
|
@props([
|
|
'title' => null,
|
|
'icon' => null,
|
|
'open' => false,
|
|
'variant' => 'plain',
|
|
])
|
|
|
|
@php
|
|
$model = $attributes->wire('model')->value() ?: null;
|
|
$bound = $model !== null || count($attributes->whereStartsWith('x-model')->getAttributes()) > 0;
|
|
$expanded = (bool) \NoNameWeb\LivewireMaterial\Support\Field::bound($model, $open);
|
|
$variant = $variant === 'filled' ? 'filled' : 'plain';
|
|
@endphp
|
|
|
|
<details
|
|
wire:ignore.self
|
|
data-md-collapse
|
|
data-md-variant="{{ $variant }}"
|
|
@if ($bound)
|
|
x-data="{ collapseOpen: @if ($model !== null) @entangle($attributes->wire('model')) @else @js($expanded) @endif }"
|
|
@if ($model === null) x-modelable="collapseOpen" @endif
|
|
x-effect="materialCollapse($el, collapseOpen)"
|
|
x-on:toggle="collapseOpen = $el.open"
|
|
@endif
|
|
@if ($expanded) open @endif
|
|
{{ $attributes->whereDoesntStartWith('wire:model') }}
|
|
>
|
|
<summary data-md-collapse-summary class="md-state-layer md-focus-ring">
|
|
@if ($icon)
|
|
<x-livewire-material::icon :name="$icon" data-md-collapse-icon />
|
|
@endif
|
|
|
|
<span data-md-collapse-title>{{ $heading ?? $title }}</span>
|
|
|
|
<x-livewire-material::icon name="expand_more" data-md-collapse-chevron />
|
|
</summary>
|
|
|
|
<div data-md-collapse-body>
|
|
{{ $slot }}
|
|
</div>
|
|
</details>
|