Remove material.css, the 1.x single-import shortcut

Plan step 37: an application on 1.x-style imports now imports
foundation.css before @import 'tailwindcss' and tailwind.css after it,
the way foundation.css's own header has described since Phase F
started — material.css only ever saved writing those two lines.
Updates every place that named it: tailwind.css's and
foundation/hidden.css's and tokens/utilities.css's header comments,
the development skill's install snippet and Tokens section, README.md's
install snippet, and a new line in UPGRADE.md's migration notes.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9

README.md

@@ -29,8 +29,9 @@ The application's build imports from `vendor/`, so Composer packages must be ins
 
 ```css
 /* resources/css/app.css */
+@import '../../vendor/nonameweb/livewire-material/resources/css/foundation.css';
 @import 'tailwindcss';
-@import '../../vendor/nonameweb/livewire-material/resources/css/material.css';
+@import '../../vendor/nonameweb/livewire-material/resources/css/tailwind.css';
 @import './material-scheme.css';
 
 @source '../../vendor/nonameweb/livewire-material/resources/views';

UPGRADE.md

@@ -124,7 +124,14 @@ over a colour, use the role directly.
   `heights` or `snap` is set; without stops it behaves as before.
 - A chip set with `scroll` shows a scroll button over each overflowing edge on fine pointers.
 
-### 6. New in 2.0.0
+### 6. `material.css` is gone
+
+The 1.x single-import shortcut no longer exists. An application still building Tailwind imports
+`foundation.css`, then `tailwindcss`, then `tailwind.css` in its place (see Installation in
+`README.md`); one that has already left Tailwind imports `foundation.css` plus the stylesheet of
+each component its views render, or `resources/css/all.css` for everything at once.
+
+### 7. New in 2.0.0
 
 Nothing to migrate, but worth knowing: submenus (`<x-menu-item submenu>`), a filtering menu
 (`<x-menu filter>`), a menu that opens as a bottom sheet on compact windows
@@ -141,14 +148,14 @@ side sheet (`<x-drawer standard>`), bottom sheet preset heights, the multi-aspec
 compact windows, search's icon entry point and suggestions (`trigger="icon"`, `suggestions` slot),
 the contrast toggle (`<x-theme-toggle mode="contrast">`) and the Standard motion scheme.
 
-### 7. Tests and guards
+### 8. Tests and guards
 
 Add `DesignGuard`'s new checks to the application's design test (`forbidOpacityInk()` and
 `forbidAbsolutes()` are opt-in). Browser tests that assert widths switch at 640/1024/1280 now
 switch at 600/840/1200; tests that read `role="alert"` on an alert, `aria-pressed` on the time
 picker's period buttons or `data-theme-option` need the new hooks above.
 
-### 8. For AI agents
+### 9. For AI agents
 
 `php artisan boost:update --discover` picks up the new `material-3` guideline and the
 `material-3-design` skill, which state M3's rules and tables beside the library's utilities.

resources/boost/skills/livewire-material-development/SKILL.md

@@ -15,8 +15,9 @@ Composer packages must be installed before the Vite build (in Dockerfiles and CI
 
 ```css
 /* resources/css/app.css */
+@import '../../vendor/nonameweb/livewire-material/resources/css/foundation.css';
 @import 'tailwindcss';
-@import '../../vendor/nonameweb/livewire-material/resources/css/material.css';
+@import '../../vendor/nonameweb/livewire-material/resources/css/tailwind.css';
 @import './material-scheme.css';
 @source '../../vendor/nonameweb/livewire-material/resources/views';
 @source '../../vendor/nonameweb/livewire-material/src';
@@ -88,7 +89,7 @@ Scheme::resolveProfileUsing(fn (): ?string => Setting::get('color_profile'));
 
 ## Tokens
 
-2.0.0's vocabulary is plain CSS, without Tailwind. `resources/css/foundation.css` is the one required import, first in the entry (while an application still builds Tailwind: before `@import 'tailwindcss'`, with `resources/css/tailwind.css` after it in place of `material.css`). It declares the layer order `material.reset, material.tokens, material.base, material.layout, material.components, material.text, material.visibility`, so an application's unlayered CSS beats every package rule, and `hidden` or `x-cloak` hides any element. It brings the reset, every `--md-sys-*` token (spacing included: `--md-sys-measurement-space25` … `space900`, 2–72px), and `md-state-layer`, `md-focus-ring`, `md-touch-target`, `md-link`. Text on plain elements takes the fixed text classes of `resources/css/text.css` and nothing else: `md-type-{display|headline|title|body|label}-{lg|md|sm}` and `md-type-emphasized-…`; `md-ink` (on-surface), `md-ink-variant`, `md-ink-quiet`, `md-ink-primary`, `md-ink-error`, `md-ink-success`, `md-ink-warning`, `md-ink-info`, `md-ink-inverse`; `md-text-start|center|end`, `md-truncate`, `md-line-clamp-2|3`, `md-nowrap`, `md-tabular`, `md-visually-hidden`. The Tailwind names below stay for the components not yet rewritten.
+2.0.0's vocabulary is plain CSS, without Tailwind. `resources/css/foundation.css` is the one required import, first in the entry (while an application still builds Tailwind: before `@import 'tailwindcss'`, with `resources/css/tailwind.css` after it — 1.x's `material.css` shortcut is gone). It declares the layer order `material.reset, material.tokens, material.base, material.layout, material.components, material.text, material.visibility`, so an application's unlayered CSS beats every package rule, and `hidden` or `x-cloak` hides any element. It brings the reset, every `--md-sys-*` token (spacing included: `--md-sys-measurement-space25` … `space900`, 2–72px), and `md-state-layer`, `md-focus-ring`, `md-touch-target`, `md-link`. Text on plain elements takes the fixed text classes of `resources/css/text.css` and nothing else: `md-type-{display|headline|title|body|label}-{lg|md|sm}` and `md-type-emphasized-…`; `md-ink` (on-surface), `md-ink-variant`, `md-ink-quiet`, `md-ink-primary`, `md-ink-error`, `md-ink-success`, `md-ink-warning`, `md-ink-info`, `md-ink-inverse`; `md-text-start|center|end`, `md-truncate`, `md-line-clamp-2|3`, `md-nowrap`, `md-tabular`, `md-visually-hidden`. Every component is plain CSS now; the Tailwind names below stay for the showcase and an application's own views, until Tailwind itself leaves the package.
 
 Tailwind's default palette is cleared: every colour class names an M3 role. `text-red-600`, `bg-base-200` or `text-gray-500` compile to nothing. The rules behind the names below — which role, surface container, corner, type style, elevation level, motion spring, state and window size class to use, and M3's don'ts — are the `material-3` guideline (always on) and the `material-3-design` skill (the tables and Google's source pages); activate that skill before designing a screen.
 
@@ -772,7 +773,7 @@ The docked view overlaps what is under it; never place a search inside an elemen
 
 ### Layout
 
-M3's layout vocabulary as components (M3 foundations § Layout: scaffold, bars, rails, panes, margins, spacers, and the canonical layouts). `<x-scaffold>` holds the bars, the rail and the FAB around the page; all content lives in panes, `<x-pane>`; two panes side by side are the canonical layouts `<x-list-detail>` and `<x-supporting-pane>`, and `<x-feed>` is the third; `<x-surface>` is a tonal region; inside a pane, `<x-stack>`, `<x-row>` and `<x-grid>` arrange. There is no "page" component in M3 — a page is a pane. Their stylesheets are `resources/css/layout/*.css`, all imported by `resources/css/layout.css`; the list-detail's focus handling is `resources/js/layout.js`, in `material.js`.
+M3's layout vocabulary as components (M3 foundations § Layout: scaffold, bars, rails, panes, margins, spacers, and the canonical layouts). `<x-scaffold>` holds the bars, the rail and the FAB around the page; all content lives in panes, `<x-pane>`; two panes side by side are the canonical layouts `<x-list-detail>` and `<x-supporting-pane>`, and `<x-feed>` is the third; `<x-surface>` is a tonal region; inside a pane, `<x-stack>`, `<x-row>` and `<x-grid>` arrange. There is no "page" component in M3 — a page is a pane. Their stylesheets are `resources/css/layout/*.css`, each imported directly by `resources/css/all.css` (or by whichever component stylesheets draw with them, `foundation.css`'s way); the list-detail's focus handling is `resources/js/layout.js`, in `material.js`.
 
 Breakpoints are M3's five, in px: compact below 600, `medium` 600, `expanded` 840, `large` 1200, `extra-large` 1600. Every layout component takes:
 

resources/css/foundation/hidden.css

@@ -7,9 +7,10 @@
  * `hidden="until-found"` is left to the browser, which keeps such content searchable.
  * `[x-cloak]` hides what Alpine has not started yet; Alpine removes the attribute when it has.
  *
- * Only a layered `!important` could outrank these, and the package writes none. The file is
+ * Only a layered `!important` could outrank these, and the package writes none. The file is apart
- * apart from reset.css because material.css, which stays for applications importing it after
+ * from reset.css because these two rules are unlayered while reset.css's are in `material.reset`;
- * Tailwind, needs `[x-cloak]` without the reset.
+ * foundation.css is the only file that imports it, so every entry — `all.css` and an application's
+ * own — reaches it once, through the foundation.
  */
 
 @layer material.reset, material.tokens, material.base, material.layout, material.components, material.text, material.visibility;

resources/css/material.css

@@ -1,38 +0,0 @@
-/*
- * Livewire Material on 1.x-style imports — the one stylesheet an application imports, after
- * Tailwind, followed by the scheme `php artisan material:scheme` wrote for it:
- *
- *   @import 'tailwindcss';
- *   @import '../../vendor/nonameweb/livewire-material/resources/css/material.css';
- *   @import './material-scheme.css';
- *   @source '../../vendor/nonameweb/livewire-material/resources/views';
- *   @source '../../vendor/nonameweb/livewire-material/src';
- *
- * tokens/scheme.css is the package's own default (M3's baseline purple), so an application
- * renders before it has a scheme; the application's file declares the same roles, unlayered, and
- * wins over the default in `material.tokens`.
- *
- * It brings the tokens, the two hiding rules and tailwind.css, but not foundation.css: imported
- * after Tailwind, the foundation's reset would land in a layer above Tailwind's utilities and
- * undo them. An application moving to 2.0.0's vocabulary imports foundation.css before
- * `@import 'tailwindcss'` and tailwind.css after it, instead of this file.
- */
-
-@import './tokens/scheme.css';
-@import './tokens/shape.css';
-@import './tokens/elevation.css';
-@import './tokens/motion.css';
-@import './tokens/type.css';
-@import './tokens/font.css';
-@import './tokens/state.css';
-@import './foundation/hidden.css';
-@import './layout.css';
-@import './components.css';
-@import './tailwind.css';
-
-@layer base {
-    html {
-        background-color: var(--md-sys-color-surface);
-        color: var(--md-sys-color-on-surface);
-    }
-}

resources/css/tailwind.css

@@ -1,7 +1,9 @@
 /*
- * Livewire Material's Tailwind half: the theme that turns the tokens into utilities, the token
+ * Livewire Material's Tailwind half: the theme that turns the tokens into utilities and the token
- * utilities, and the component stylesheets still written for Tailwind (`@utility`, `@variant`,
+ * utilities themselves (`state-layer`, `focus-ring`, `touch-target`, `link`, `type-*`), for a view
- * `@layer components`). It goes when the last component leaves Tailwind.
+ * that still writes Tailwind classes — the showcase until step 38, and an application's own views
+ * until it drops Tailwind. Every component stylesheet is plain CSS (plan step 36) and needs
+ * nothing from here. This file goes when the last Tailwind class leaves (step 39).
  *
  * It carries no tokens, so it can sit behind the foundation without declaring them twice — the
  * Workbench imports it that way, after Tailwind:
@@ -10,8 +12,8 @@
  *   @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
+ * An application still building Tailwind imports the same way, `foundation.css` then `tailwindcss`
- * this file together.
+ * then this file, in place of the 1.x `material.css` shortcut, which is gone.
  */
 
 @import './tokens/theme.css';

resources/css/tokens/utilities.css

@@ -2,7 +2,7 @@
  * The token utilities, for the components still written in Tailwind.
  *
  * Tailwind's side of tokens/state.css and tokens/type.css, kept apart so that the token files the
- * foundation imports carry no Tailwind directive. material.css imports this file after Tailwind;
+ * foundation imports carry no Tailwind directive. tailwind.css imports this file after Tailwind;
  * it goes when the last component leaves Tailwind. New markup uses the plain-CSS classes instead,
  * which carry the same declarations: `md-state-layer`, `md-focus-ring`, `md-touch-target` and
  * `md-link` (foundation/interaction.css), and `md-type-*` (text.css).