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 {

resources/views/components/icon.blade.php

@@ -16,28 +16,44 @@
      beside words that already say what it means. Pass `label` when the icon alone carries
      the meaning.
 
-     24px unless the caller sizes it. The default is added only when no size class is passed,
-     rather than merged under one: `size-6 size-4` compiles to whichever Tailwind emits last,
-     not to the one the caller wrote. --}}
+     `size` is the drawn size in px (`16`, `18`, `20`, `24`, `32`, `40`, `48` …, any whole number
+     from 8 to 256; 24 when left out), written as `--md-icon-size` and drawn by
+     resources/css/components/icon.css. An icon given a size of 20 or less takes the 20 cut
+     unless `optical` says otherwise, which is M3's rule. A size class from the caller still
+     works while the components that pass one are rewritten (plan step 36): a utility outranks
+     the package's layer.
+
+     `mirror-rtl` flips a directional symbol (an arrow, a chevron) in a right-to-left document,
+     as M3's bidirectionality rules ask; symbols that mean the same in both directions do not
+     take it. --}}
 
 @props([
     'name',
     'filled' => false,
     'label' => null,
-    'optical' => 24,
+    'optical' => null,
+    'size' => null,
+    'mirrorRtl' => false,
 ])
 
 @php
-    $sized = preg_match('/(^|\s)(size|w|h)-/', (string) $attributes->get('class')) === 1;
+    $size = filter_var($size, FILTER_VALIDATE_INT, ['options' => ['min_range' => 8, 'max_range' => 256]]) ?: null;
+    $optical = match (true) {
+        in_array((string) $optical, ['20', '24'], true) => (int) $optical,
+        $size !== null && $size <= 20 => 20,
+        default => 24,
+    };
 
     $attributes = $attributes
-        ->class(['shrink-0', 'size-6' => ! $sized])
         ->merge(array_filter([
+            'data-md-icon' => true,
+            'data-md-mirror-rtl' => $mirrorRtl ? true : null,
+            'style' => $size !== null ? "--md-icon-size: {$size}px" : null,
             'aria-hidden' => $label === null ? 'true' : null,
             'aria-label' => $label,
             'role' => $label === null ? null : 'img',
             'focusable' => 'false',
-        ]));
+        ], fn ($value): bool => $value !== null));
 @endphp
 
-{{ \NoNameWeb\LivewireMaterial\Support\SvgFile::symbol($name, (bool) $filled, $attributes, (int) $optical) }}
+{{ \NoNameWeb\LivewireMaterial\Support\SvgFile::symbol($name, (bool) $filled, $attributes, $optical) }}

resources/views/components/shape.blade.php

@@ -4,8 +4,19 @@
      icon. `name` is the shape's kebab-case name (`cookie-9`, `soft-burst`, `pill`). Every
      shape fills a 100-unit box to within 2 units, so one sits behind another at the same size.
 
-     Hidden from assistive tech, and sized by its caller. --}}
+     Hidden from assistive tech. `size` is its size in px (any whole number from 8 to 1024),
+     written as `--md-shape-size` and drawn by resources/css/components/shape.css; without it the
+     caller sizes the shape. --}}
 
-@props(['name'])
+@props(['name', 'size' => null])
 
-{{ \NoNameWeb\LivewireMaterial\Support\SvgFile::shape($name, $attributes->merge(['aria-hidden' => 'true', 'focusable' => 'false'])) }}
+@php
+    $size = filter_var($size, FILTER_VALIDATE_INT, ['options' => ['min_range' => 8, 'max_range' => 1024]]) ?: null;
+@endphp
+
+{{ \NoNameWeb\LivewireMaterial\Support\SvgFile::shape($name, $attributes->merge(array_filter([
+    'data-md-shape' => true,
+    'style' => $size !== null ? "--md-shape-size: {$size}px" : null,
+    'aria-hidden' => 'true',
+    'focusable' => 'false',
+], fn ($value): bool => $value !== null))) }}