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:
co-authored by
Claude Opus 5
parent
a29a147f1a
commit
52fd65a390
@@ -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] {
|
||||
|
||||
@@ -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] {
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user