noNameWEB/livewire-material
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Cut duplicated and speculative code across the package

Browse Source 
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>
This commit is contained in:
Andreas Reinhold / reini
2026-09-17 19:29:21 +02:00
co-authored by Claude Opus 5
parent 471d927e64
commit 247c596c3a
233 changed files with 16635 additions and 10579 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/css/components/menu-item.css
+19 -45
View File
@@ -3,20 +3,20 @@
* the trigger and popover of a nested menu beside it.
*
* SegmentedMenuTokens (androidx Compose Material 3, Apache-2.0): 48px row (M3's published "List
* item height" wins over the token's own 44dp `Item`, docs/audits/m3-alignment/actions.md §
* ACT-28), 16px either side (`ItemLeadingSpace`/`ItemTrailingSpace`, § ACT-11), 12px between the
* icon, the label and the trailing content (`ItemBetweenSpace`, off the 8dp grid), 4px corners
* (`ItemShape`) that open to 12px at either end of the list (`ItemFirstChildShape`/
* `ItemLastChildShape` — the library's own list ends, 12px, win over `GroupShape`'s 8dp so a
* cluster's ends and a list's ends match, menu-group.css). A selected row
* (`role="menuitemcheckbox"`, the tick beside the colour and shape § ACT-27) takes
* `ItemSelectedShape`'s 12px corner in tertiary-container; `current` — a menu of places rather
* than choices — takes the same 12px corner in secondary-container, the navigation-indicator
* role. `description` (`ItemSupportingTextFont`) grows the row by 8px top and bottom; `shortcut`
* (`ItemTrailingSupportingTextFont`) sits at the end. Every quiet part of the row — the icon, the
* description, the trailing text — inks together as `--md-menu-item-ink`; corner and colour are
* two springs, not one (§ ACT-19), and `icon-class` paints only the leading icon, over that ink
* but never over disabled. The row renders the foundation's `md-state-layer` and `md-focus-ring`
* item height" wins over the token's own 44dp `Item`), 16px either side
* (`ItemLeadingSpace`/`ItemTrailingSpace`), 12px between the icon, the label and the trailing
* content (`ItemBetweenSpace`, off the 8dp grid), 4px corners (`ItemShape`) that open to 12px at
* either end of the list (`ItemFirstChildShape`/`ItemLastChildShape` — the library's own list
* ends, 12px, win over `GroupShape`'s 8dp so a cluster's ends and a list's ends match,
* menu-group.css). A selected row (`role="menuitemcheckbox"`, the tick beside the colour and
* shape) takes `ItemSelectedShape`'s 12px corner in tertiary-container; `current` — a menu of
* places rather than choices — takes the same 12px corner in secondary-container, the
* navigation-indicator role. `description` (`ItemSupportingTextFont`) grows the row by 8px top
* and bottom; `shortcut` (`ItemTrailingSupportingTextFont`) sits at the end. Every quiet part of
* the row — the icon, the description, the trailing text — inks together as
* `--md-menu-item-ink`; corner and colour are two springs, not one — a colour must never
* overshoot — and `icon-class` paints only the leading icon, over that ink but never over
* disabled. The row renders the foundation's `md-state-layer` and `md-focus-ring`
* (foundation/interaction.css) — no `md-touch-target`, since the row is already 48px tall — and
* keeps only one refinement: the ring reads inward (-3px), because a row sits edge to edge in the
* list and an outward one would run past it. A disabled item stays focusable and keeps its ring,
@@ -36,6 +36,7 @@
@import './icon.css';
@import './badge.css';
@import './menu.css';
@layer material.components {
[data-md-menu-item] {
@@ -145,40 +146,13 @@
}
/* The submenu popover: a menu of its own, sharing the container colour of the list it opens
from. The fallbacks are the standard menu's, for a submenu inside some other list. */
from. Its size, radius, padding, shadow and pop-and-fade entry/exit are menu.css's shared
popover chrome (imported above); only its axis and its position are its own — inline,
beside the item, rather than the standard menu's block axis under its trigger. */
[data-md-submenu] {
inset: auto;
margin: 0;
margin-inline: var(--md-sys-measurement-space50);
min-inline-size: 112px;
max-inline-size: 280px;
max-block-size: min(288px, calc(100dvh - 32px));
overflow-y: auto;
border-width: 0;
border-radius: var(--md-sys-shape-corner-lg);
padding: var(--md-sys-measurement-space50);
background-color: var(--material-menu-surface, var(--md-sys-color-surface-container-low));
color: var(--material-menu-ink, var(--md-sys-color-on-surface));
box-shadow: var(--md-sys-elevation-2);
margin: 0 var(--md-sys-measurement-space50);
transform-origin: top;
position-area: inline-end span-block-end;
position-try-fallbacks: flip-inline;
opacity: 0;
scale: 0.95;
transition-property: opacity, scale;
transition-duration: var(--md-sys-motion-effects-fast-duration), var(--md-sys-motion-spatial-fast-duration);
transition-timing-function: var(--md-sys-motion-effects-fast), var(--md-sys-motion-spatial-fast);
&:popover-open:not([data-md-popover-closing]) {
opacity: 1;
scale: 1;
}
@starting-style {
&:popover-open {
opacity: 0;
scale: 0.95;
}
}
}
}