Andreas Reinhold / reiniandClaude Opus 5
72d9dbfc89
Plan step 36 (inputs group): <x-datepicker> renders data-md-datepicker with every part data-md-datepicker-* (data-md-presentation replaces data-presentation; data-md-range, data-md-docked, data-md-concealed and data-md-value replace their unprefixed hooks), and datepicker.css moves into material.components on the same px, spacing and colour tokens, importing field.css, icon.css and button.css for what the view renders. The month's live-announced text drops its `sr-only` class for a data-md-datepicker-month-live hook with the same visually-hidden clip (a package view writes no class but the interaction classes), matching field's and search's counter/status live regions. The day, year, menu button and list option keep their own hand-rolled state layer and focus ring rather than the foundation's classes, as data-md-field-button already does: each is a bigger interactive box than the round indicator drawn inside it, which the foundation's fixed-geometry classes can't draw, and `:focus-visible` only ever matches the actually-focused element. Cancel, OK and the icon buttons are <x-button>, which already draws from the classes. datepicker.js follows the renamed hooks and dataset properties. Shift+M/Y (reaching the month/year dropdowns) and the full-screen range picker at compact were already implemented; this commit adds the browser tests the plan owed for them plus the month list's keyboard-driven growth in both directions and Save/close from the full-screen app bar (docs/plans/material-3-browser-tests.md), written but not run — the inputs group's Chromium run follows this stream. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9
33 lines
1.2 KiB
CSS
33 lines
1.2 KiB
CSS
/*
|
|
* Livewire Material's Tailwind half: the theme that turns the tokens into utilities, the token
|
|
* utilities, and the component stylesheets still written for Tailwind (`@utility`, `@variant`,
|
|
* `@layer components`). It goes when the last component leaves Tailwind.
|
|
*
|
|
* It carries no tokens, so it can sit behind the foundation without declaring them twice — the
|
|
* Workbench imports it that way, after Tailwind:
|
|
*
|
|
* @import '../../../resources/css/foundation.css';
|
|
* @import 'tailwindcss' source(none);
|
|
* @import '../../../resources/css/tailwind.css';
|
|
*
|
|
* An application on 1.x-style imports keeps importing material.css, which brings the tokens and
|
|
* this file together.
|
|
*/
|
|
|
|
@import './tokens/theme.css';
|
|
@import './tokens/utilities.css';
|
|
|
|
/* Inputs, selection and data — leaving in step 36 */
|
|
@import './components/timepicker.css';
|
|
|
|
/* Containment — leaving in step 36 */
|
|
@import './components/list.css';
|
|
@import './components/collapse.css';
|
|
@import './components/dialog.css';
|
|
|
|
/* Navigation — leaving in step 36 */
|
|
@import './components/tabs.css';
|
|
@import './components/app-bar.css';
|
|
@import './components/navigation.css';
|
|
@import './components/toolbar.css';
|