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>
58 lines
2.6 KiB
PHP
58 lines
2.6 KiB
PHP
{{-- An M3 divider: a thin outline-variant line between groups of content (DividerTokens).
|
|
|
|
Horizontal by default; `vertical` stands it between items in a row (give the row a height).
|
|
`inset` indents it from the start by 16px, as under a list's leading icon; `middle` from both
|
|
ends. It is `role="separator"`; with `decorative` it is hidden from assistive tech.
|
|
|
|
`text` is the divider with a subheader, as M3 draws it to head a group in a list or a menu:
|
|
the label at the start and the rule running on from it. The divider specs table gives the
|
|
geometry — "space between divider & supporting text 4dp", "divider right margin 8dp",
|
|
"divider bottom margin 8dp" — so the rule starts 4px after the words, stops 8px short of the
|
|
end and leaves 8px under the row. The label is M3's subhead: title-small in
|
|
on-surface-variant, the type the rich tooltip's specs give a subhead, since the divider's own
|
|
page names none (docs/reference/m3/components-actions-communication-containment.md
|
|
§ Divider → Specs, § Tooltips → Specs). The words stay readable text that names the group
|
|
after them; only the rule is the separator, and `decorative` hides the rule and leaves the
|
|
words. `text` is for a horizontal divider; a vertical one ignores it.
|
|
|
|
`data-md-divider` is the rule itself, `data-md-orientation="horizontal"|"vertical"` and
|
|
`data-md-inset`/`data-md-middle` the geometry; `data-md-divider-heading` wraps a subheader's
|
|
label and its rule (resources/css/components/divider.css draws all four). --}}
|
|
|
|
@props([
|
|
'vertical' => false,
|
|
'inset' => false,
|
|
'middle' => false,
|
|
'decorative' => false,
|
|
'text' => null,
|
|
])
|
|
|
|
@php
|
|
$orientation = $vertical ? 'vertical' : 'horizontal';
|
|
@endphp
|
|
|
|
@if (filled($text) && ! $vertical)
|
|
<div {{ $attributes->merge([
|
|
'data-md-divider-heading' => true,
|
|
'data-md-inset' => $inset ? true : null,
|
|
'data-md-middle' => $middle ? true : null,
|
|
]) }}>
|
|
<span data-md-divider-text>{{ $text }}</span>
|
|
<div
|
|
data-md-divider
|
|
data-md-orientation="horizontal"
|
|
@if ($decorative) aria-hidden="true" @else role="separator" aria-orientation="horizontal" @endif
|
|
></div>
|
|
</div>
|
|
@else
|
|
<div
|
|
data-md-divider
|
|
data-md-orientation="{{ $orientation }}"
|
|
@if ($decorative) aria-hidden="true" @else role="separator" aria-orientation="{{ $orientation }}" @endif
|
|
{{ $attributes->merge([
|
|
'data-md-inset' => $inset && ! $vertical ? true : null,
|
|
'data-md-middle' => $middle ? true : null,
|
|
]) }}
|
|
></div>
|
|
@endif
|