Size icons and shapes with a prop instead of a Tailwind class

<x-icon size> writes --md-icon-size (24px by default) and takes the optical-size-20
cut for 20px or less, as M3 asks; mirror-rtl flips a directional symbol. <x-shape
size> writes --md-shape-size. Both draw from plain-CSS stylesheets in
material.components, gathered in components.css until all.css replaces it; a
caller's size class still wins while the other components are rewritten.
Plan steps 35 and 36, the prop every component rewrite depends on.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9

resources/css/components.css

@@ -0,0 +1,11 @@
+/*
+ * 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.
+ */
+
+@layer material.reset, material.tokens, material.base, material.layout, material.components, material.text, material.visibility;
+
+@import './components/icon.css';
+@import './components/shape.css';

resources/css/components/icon.css

@@ -0,0 +1,22 @@
+/*
+ * <x-icon>: a Material Symbol at the size it is drawn.
+ *
+ * 24px unless `size` sets `--md-icon-size` (resources/views/components/icon.blade.php), which is
+ * M3's default icon size (docs/reference/m3/styles.md § Icons). The symbol never shrinks in a flex
+ * row, so a long label beside it cannot squeeze it. `data-md-mirror-rtl` flips a directional
+ * symbol in a right-to-left document (docs/reference/m3/foundations.md § Layout → bidirectionality).
+ */
+
+@layer material.reset, material.tokens, material.base, material.layout, material.components, material.text, material.visibility;
+
+@layer material.components {
+    [data-md-icon] {
+        flex-shrink: 0;
+        inline-size: var(--md-icon-size, 24px);
+        block-size: var(--md-icon-size, 24px);
+    }
+
+    [data-md-icon][data-md-mirror-rtl]:dir(rtl) {
+        transform: scaleX(-1);
+    }
+}

resources/css/components/shape.css

@@ -0,0 +1,13 @@
+/*
+ * <x-shape>: one of M3 Expressive's shapes, at `size` when one is given (`--md-shape-size`);
+ * otherwise the caller's own CSS sizes it.
+ */
+
+@layer material.reset, material.tokens, material.base, material.layout, material.components, material.text, material.visibility;
+
+@layer material.components {
+    [data-md-shape][style*='--md-shape-size'] {
+        inline-size: var(--md-shape-size);
+        block-size: var(--md-shape-size);
+    }
+}

resources/css/material.css

@@ -26,6 +26,7 @@
 @import './tokens/font.css';
 @import './tokens/state.css';
 @import './foundation/hidden.css';
+@import './components.css';
 @import './tailwind.css';
 
 @layer base {