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>
85 lines
3.7 KiB
PHP
85 lines
3.7 KiB
PHP
{{-- One choice from a few, each with room for a line of explanation: M3's radio buttons.
|
|
|
|
A `<fieldset>` whose legend is the question, so a screen reader reads the group's name with each
|
|
option, and native radios sharing a name, so the arrow keys move between them. `options` as
|
|
`['id' => …, 'name' => …, 'hint' => …]` (`'disabled' => true` greys one out), `option-value`,
|
|
`option-label` and `option-hint` to read other keys, `inline` to lay them in a row from `medium`
|
|
(600px, M3's compact/medium boundary — compact always stacks), and
|
|
`value` for the option chosen when the page loads (with `wire:model`, Livewire sets it).
|
|
Errors are read from the bag under the `wire:model` name
|
|
(resources/css/components/radio.css).
|
|
|
|
M3 stacks radio buttons vertically and cautions against a row at any width, so `inline` is for
|
|
a group of two or three short labels that would waste a column, not the shape to reach for.
|
|
It also asks for five options or fewer and for one of them to be chosen when the page loads:
|
|
give the group a `value` (or a bound property that already holds one). --}}
|
|
|
|
@props([
|
|
'label' => null,
|
|
'hint' => null,
|
|
'options' => [],
|
|
'optionValue' => 'id',
|
|
'optionLabel' => 'name',
|
|
'optionHint' => 'hint',
|
|
'inline' => false,
|
|
'value' => null,
|
|
])
|
|
|
|
@php
|
|
$model = $attributes->whereStartsWith('wire:model')->first();
|
|
$name = $attributes->get('name') ?? $model ?? 'radio-'.substr(md5($label.'|'.json_encode($options)), 0, 12);
|
|
$id = 'radio-'.substr(md5($name.'|'.$label), 0, 12);
|
|
$field = \NoNameWeb\LivewireMaterial\Support\Field::class;
|
|
$errorKey = $field::key($model, $attributes->get('name'));
|
|
$messages = $field::messages($errors ?? null, $errorKey);
|
|
@endphp
|
|
|
|
<fieldset
|
|
data-md-radio
|
|
@if ($inline) data-md-inline @endif
|
|
{{ $attributes->only(['class', 'style', 'wire:key']) }}
|
|
@if ($messages !== [] || filled($hint)) aria-describedby="{{ $id }}-support" @endif
|
|
>
|
|
@if (filled($label))
|
|
<legend data-md-radio-legend>{{ $label }}</legend>
|
|
@endif
|
|
|
|
<div data-md-radio-options>
|
|
@foreach ($options as $option)
|
|
@php($optionHintText = data_get($option, $optionHint))
|
|
|
|
<label data-md-selection-row @if ($messages !== []) data-md-invalid @endif>
|
|
<span data-md-radio-button @if (blank(data_get($option, $optionLabel)) && blank($optionHintText)) class="md-touch-target" @endif>
|
|
<input
|
|
{{ $attributes->except(['class', 'style', 'wire:key', 'name', 'id']) }}
|
|
type="radio"
|
|
name="{{ $name }}"
|
|
value="{{ data_get($option, $optionValue) }}"
|
|
@disabled(data_get($option, 'disabled'))
|
|
@checked($value !== null && (string) $value === (string) data_get($option, $optionValue))
|
|
@if ($messages !== []) aria-invalid="true" @endif
|
|
/>
|
|
<span data-md-radio-dot></span>
|
|
</span>
|
|
|
|
<span data-md-selection-text>
|
|
<span data-md-selection-label>{{ data_get($option, $optionLabel) }}</span>
|
|
@if (filled($optionHintText))
|
|
<span data-md-selection-hint>{{ $optionHintText }}</span>
|
|
@endif
|
|
</span>
|
|
</label>
|
|
@endforeach
|
|
</div>
|
|
|
|
@if ($messages !== [])
|
|
<div id="{{ $id }}-support" data-md-selection-support role="alert">
|
|
@foreach ($messages as $message)
|
|
<p>{{ $message }}</p>
|
|
@endforeach
|
|
</div>
|
|
@elseif (filled($hint))
|
|
<p id="{{ $id }}-support" data-md-selection-support>{{ $hint }}</p>
|
|
@endif
|
|
</fieldset>
|