Andreas Reinhold / reiniandClaude Opus 5
0341f9d4ca
<x-field> renders data-md-field with its props and parts as data-md-* attributes (box, control, label, outline, support, counter, trailing buttons), and field.css moves into material.components on tokens: px geometry, spacing and state tokens, the 600px breakpoint (plan step 36). Its icons take a size prop, 24/20/16 by the field's size. Every control the field wraps now marks itself data-md-field-control, so the inputs, the pickers, choices, field.js, menu.css's select and listbox rules and timepicker.css follow the renamed hooks. Browser tests cover the error icon, the disabled field's hover, the counter and the width bound from 600px. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9
23 lines
787 B
CSS
23 lines
787 B
CSS
/*
|
|
* The component stylesheets already written without Tailwind (plan step 36), while the rest are
|
|
* still in tailwind.css. Each lives in `material.components`, so it can be imported anywhere in
|
|
* the entry: the layer statement, not the import order, decides where its rules rank. Step 37
|
|
* replaces this file with all.css. One block per stream, so parallel rewrites merge cleanly.
|
|
*/
|
|
|
|
@layer material.reset, material.tokens, material.base, material.layout, material.components, material.text, material.visibility;
|
|
|
|
/* Foundation components */
|
|
@import './components/icon.css';
|
|
@import './components/shape.css';
|
|
|
|
/* Actions and communication */
|
|
|
|
/* Inputs, selection and data */
|
|
@import './components/form.css';
|
|
@import './components/field.css';
|
|
|
|
/* Containment */
|
|
|
|
/* Navigation */
|