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

tests/Feature/Components/IconTest.php

@@ -16,16 +16,48 @@ function symbolGeometry(string $file): string
 
 it('draws a symbol inline, hidden from screen readers, 24px by default', function () {
     $this->blade('<x-icon name="calendar_month" />')
-        ->assertSee('class="shrink-0 size-6"', false)
+        ->assertSee('data-md-icon', false)
+        ->assertDontSee('--md-icon-size', false)
+        ->assertDontSee('class=', false)
         ->assertSee('aria-hidden="true"', false)
         ->assertSee('fill="currentColor"', false)
         ->assertSee('viewBox="0 -960 960 960"', false);
 });
 
-it('leaves the size to a caller who gives one', function () {
+it('draws the size it is given, and still takes a caller\'s class', function () {
+    $this->blade('<x-icon name="calendar_month" size="32" />')
+        ->assertSee('style="--md-icon-size: 32px"', false);
+
     $this->blade('<x-icon name="calendar_month" class="size-4 text-primary" />')
-        ->assertSee('class="shrink-0 size-4 text-primary"', false)
-        ->assertDontSee('size-6', false);
+        ->assertSee('class="size-4 text-primary"', false);
+});
+
+it('ignores a size that is not a whole number of pixels in range', function () {
+    foreach (['large', '4', '300', '20.5'] as $size) {
+        $this->blade('<x-icon name="calendar_month" size="'.$size.'" />')
+            ->assertDontSee('--md-icon-size', false);
+    }
+});
+
+it('takes the 20 cut for a size of 20 or less, unless optical says otherwise', function () {
+    expect((string) $this->blade('<x-icon name="home" size="20" />'))->toContain(symbolGeometry('outlined-20/home'))
+        ->and((string) $this->blade('<x-icon name="home" size="18" />'))->toContain(symbolGeometry('outlined-20/home'))
+        ->and((string) $this->blade('<x-icon name="home" size="24" />'))->toContain(symbolGeometry('outlined/home'))
+        ->and((string) $this->blade('<x-icon name="home" size="20" optical="24" />'))->toContain(symbolGeometry('outlined/home'));
+});
+
+it('mirrors a directional symbol only when asked', function () {
+    $this->blade('<x-icon name="arrow_back" mirror-rtl />')->assertSee('data-md-mirror-rtl', false);
+    $this->blade('<x-icon name="arrow_back" />')->assertDontSee('data-md-mirror-rtl', false);
+});
+
+it('draws its size from a stylesheet in the components layer', function () {
+    $css = (string) file_get_contents(__DIR__.'/../../../resources/css/components/icon.css');
+
+    expect($css)->toContain('@layer material.components')
+        ->toContain('inline-size: var(--md-icon-size, 24px)')
+        ->toContain('[data-md-icon][data-md-mirror-rtl]:dir(rtl)')
+        ->and((string) file_get_contents(__DIR__.'/../../../resources/css/components.css'))->toContain("@import './components/icon.css';");
 });
 
 it('names the icon for a screen reader when it carries the meaning alone', function () {
@@ -48,7 +80,7 @@ it('draws the optical size 20 cut when the caller asks for it', function () {
     $dense = (string) $this->blade('<x-icon name="home" class="size-5" optical="20" />');
 
     expect($dense)->not->toBe($standard)
-        ->and($dense)->toContain('class="shrink-0 size-5"')
+        ->and($dense)->toContain('class="size-5"')
         ->and($dense)->toContain('fill="currentColor"')
         ->and($dense)->toContain(symbolGeometry('outlined-20/home'));
 });

tests/Feature/Components/MenuTest.php

@@ -126,13 +126,13 @@ it('adds icon-class to the leading icon, over its own colour but not over disabl
     $leading = fn (string $html): string => preg_match('/<svg[^>]*class="([^"]*)"/', $html, $icon) ? $icon[1] : '';
 
     expect($leading((string) $this->blade('<x-menu-item label="Running plan" icon="directions_run" icon-class="text-sport-run" icon-right="chevron_right" />')))
-        ->toBe('shrink-0 size-5 [:where(&amp;)]:text-on-surface-variant text-sport-run')
+        ->toBe('size-5 [:where(&amp;)]:text-on-surface-variant text-sport-run')
         ->and($leading((string) $this->blade('<x-menu-item label="Running plan" icon="directions_run" icon-class="text-sport-run" :selected="true" />')))
-        ->toBe('shrink-0 size-5 [:where(&amp;)]:text-on-tertiary-container text-sport-run')
+        ->toBe('size-5 [:where(&amp;)]:text-on-tertiary-container text-sport-run')
         ->and($leading((string) $this->blade('<x-menu-item label="Running plan" icon="directions_run" icon-class="text-sport-run" disabled />')))
-        ->toBe('shrink-0 size-5 text-sport-run text-on-surface/38!')
+        ->toBe('size-5 text-sport-run text-on-surface/38!')
         ->and($leading((string) $this->blade('<x-menu-item label="Running plan" icon="directions_run" />')))
-        ->toBe('shrink-0 size-5 text-on-surface-variant')
+        ->toBe('size-5 text-on-surface-variant')
         ->and((string) $this->blade('<x-menu-item label="Next" icon-right="chevron_right" icon-class="text-sport-run" />'))
         ->not->toContain('text-sport-run');
 });

tests/Feature/Components/ShapeTest.php

@@ -26,7 +26,15 @@ it('draws every shape as one path in the text colour, filling a 100-unit box', f
 
 it('renders a shape hidden from assistive tech', function () {
     $this->blade('<x-shape name="cookie-9" class="size-20 text-secondary-container" />')
-        ->assertSee('<svg aria-hidden="true" focusable="false" class="size-20 text-secondary-container" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"', false);
+        ->assertSee('<svg data-md-shape="data-md-shape" aria-hidden="true" focusable="false" class="size-20 text-secondary-container" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"', false);
+});
+
+it('draws the size it is given', function () {
+    $this->blade('<x-shape name="cookie-9" size="160" />')
+        ->assertSee('style="--md-shape-size: 160px"', false);
+
+    $this->blade('<x-shape name="cookie-9" size="huge" />')
+        ->assertDontSee('--md-shape-size', false);
 });
 
 it('refuses a shape that does not exist', function () {