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>
71 lines
3.0 KiB
PHP
71 lines
3.0 KiB
PHP
{{-- A notice in the page: a state that needs saying — storage is full, the link has expired.
|
|
|
|
Not an M3 component (M3's banner is gone); drawn in M3's terms: the state's container colour
|
|
(tinted, never filled), a medium corner, the state's icon, a title-small `title`, body-medium
|
|
text from `description` or the slot, and an `actions` slot for one or two text buttons.
|
|
`color` (alias `tone`): `info` (the default), `success`, `warning`, `error`, `primary`,
|
|
`secondary`, `tertiary`, or `neutral` for surface-container-high. `icon` replaces the state's
|
|
icon; `:icon="false"` drops it. `dismissible` adds a close button that hides it in the browser,
|
|
40px drawn with the 48px target M3 asks for.
|
|
|
|
It is a `role="status"`, whatever its colour: an alert is usually part of the page as it
|
|
renders, and `role="alert"` is an assertive live region that some screen readers announce over
|
|
the page title on load — and that a Livewire morph re-announces. `assertive` opts into
|
|
`role="alert"` for the case the prop is named after: a notice put on screen in answer to
|
|
something the person just did. M3 publishes no banner; the nearest thing it does
|
|
publish, the snackbar, says polite and never assertive.
|
|
|
|
Drawn by resources/css/components/alert.css from `data-md-alert` and `data-md-color`; the
|
|
dismiss button carries only the foundation's interaction classes. --}}
|
|
|
|
@props([
|
|
'title' => null,
|
|
'description' => null,
|
|
'color' => null,
|
|
'tone' => null,
|
|
'icon' => null,
|
|
'dismissible' => false,
|
|
'assertive' => false,
|
|
])
|
|
|
|
@php
|
|
$color = in_array($color ?? $tone, ['info', 'success', 'warning', 'error', 'primary', 'secondary', 'tertiary', 'neutral'], true) ? ($color ?? $tone) : 'info';
|
|
|
|
$icon = $icon === false ? null : ($icon ?? [
|
|
'info' => 'info', 'success' => 'check_circle', 'warning' => 'warning', 'error' => 'error',
|
|
'primary' => 'info', 'secondary' => 'info', 'tertiary' => 'info', 'neutral' => 'info',
|
|
][$color]);
|
|
@endphp
|
|
|
|
<div
|
|
role="{{ $assertive ? 'alert' : 'status' }}"
|
|
@if ($dismissible) x-data="{ shown: true }" x-show="shown" x-transition.opacity @endif
|
|
data-md-alert
|
|
data-md-color="{{ $color }}"
|
|
{{ $attributes }}
|
|
>
|
|
@if ($icon)
|
|
<x-livewire-material::icon :name="$icon" filled />
|
|
@endif
|
|
|
|
<div data-md-alert-content>
|
|
@if ($title)
|
|
<p data-md-alert-title>{{ $title }}</p>
|
|
@endif
|
|
|
|
@if ($description || $slot->isNotEmpty())
|
|
<div data-md-alert-description>{{ $description ?? $slot }}</div>
|
|
@endif
|
|
|
|
@isset($actions)
|
|
<div data-md-alert-actions>{{ $actions }}</div>
|
|
@endisset
|
|
</div>
|
|
|
|
@if ($dismissible)
|
|
<button type="button" class="md-state-layer md-focus-ring md-touch-target" data-md-alert-dismiss aria-label="{{ __('Dismiss') }}" x-on:click="shown = false">
|
|
<x-livewire-material::icon name="close" size="20" />
|
|
</button>
|
|
@endif
|
|
</div>
|