Add InputStylesheetsTest, the inputs twin of the actions stylesheet test

Plan step 36, step 0 of the inputs stream: mirrors ActionStylesheetsTest's
five checks over the seventeen inputs components already rewritten, plus
pagination (its four views live under resources/views/pagination/**, not
components/, so it gets its own small versions of the two view-reading
checks). The "no class list" check also recognises the wrapper fields'
`:class="$attributes->get('class')"` (Blade's own prop-forwarding syntax,
the only way a component with no root element of its own hands the caller's
class to its field) and a `'class' => '…'` attribute-bag entry, and exempts
field.css's week-long autofill transition from the motion-token check.

The new test caught three already-rewritten components writing a bare
`md-visually-hidden` class, which a package view no longer does (only the
three interaction classes, or the caller's own class, reach a view): field's
character-count live region, search's result-count live region, and chip's
native checkbox under a bound filter chip. Fixed by giving each its own
data-md-* hook with the same visually-hidden declarations in its stylesheet,
and chip.css was also missing its `tooltip.css` import for the tooltip
chip.blade.php renders.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9
This commit is contained in:
Andreas Reinhold / reini
2026-09-14 19:00:48 +02:00
co-authored by Claude Opus 5
parent a29a147f1a
commit 52fd65a390
10 changed files with 319 additions and 7 deletions
+17 -1
View File
@@ -47,7 +47,7 @@
@layer material.reset, material.tokens, material.base, material.layout, material.components, material.text, material.visibility;
@import './icon.css';
/* TODO(step 36): @import './tooltip.css' once <x-tooltip> leaves Tailwind (actions stream). */
@import './tooltip.css';
@layer material.components {
[data-md-chip] {
@@ -195,6 +195,22 @@
pointer-events: none;
}
/* A filter chip bound with `x-model` keeps a real, focusable `<input type="checkbox">` under the
label for its native semantics and `:has(:checked)`, visually hidden the way `md-visually-hidden`
hides text — a hook, not a class, because a package view writes no class but the interaction
classes (plan step 36). */
[data-md-chip-native] {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
border-width: 0;
}
/* ---- Contents ------------------------------------------------------------------------------ */
[data-md-chip-label] {
+15
View File
@@ -407,6 +407,21 @@
color: var(--md-sys-color-error);
}
/* The counter's spoken form: the same visually-hidden clip the text classes give
`md-visually-hidden`, kept as a hook because a package view writes no class but the
interaction classes (plan step 36). */
[data-md-field-live] {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
border-width: 0;
}
/* ---- The filled text field ---------------------------------------------------------------- */
[data-md-field][data-md-variant='filled'] [data-md-field-box] {
+15
View File
@@ -304,4 +304,19 @@
letter-spacing: var(--md-sys-typescale-body-md-tracking);
font-variation-settings: normal;
}
/* The result count's spoken form: the same visually-hidden clip the text classes give
`md-visually-hidden`, kept as a hook because a package view writes no class but the
interaction classes (plan step 36). */
[data-md-search-status] {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
border-width: 0;
}
}