Plan step 36. <x-split-button> renders data-md-split-button and data-md-size on the pair and data-md-split on its halves. split-button.css draws SplitButton*Tokens' shape — full outer corners, inner corners that grow under the finger, the trailing half round while its menu is open — the narrower leading padding and 48px trailing half at xs and sm, and the chevron's own size, nudge and turn on the standard scheme. groups.css is empty and leaves tailwind.css. The actions browser test follows data-md-split and data-md-button-group, and gains the owed tests for a connected segment's 48px edge and a button group's single-required and multi selection. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9
28 lines
977 B
CSS
28 lines
977 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 */
|
|
@import './components/loading.css';
|
|
@import './components/tooltip.css';
|
|
@import './components/badge.css';
|
|
@import './components/button.css';
|
|
@import './components/group.css';
|
|
@import './components/button-group.css';
|
|
@import './components/split-button.css';
|
|
|
|
/* Inputs, selection and data */
|
|
|
|
/* Containment */
|
|
|
|
/* Navigation */
|