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))) }}

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 () {

workbench/resources/css/app.css

@@ -3,6 +3,7 @@
    `material` layers are declared first and sit below Tailwind's; tailwind.css brings the
    components still written for Tailwind, without declaring the tokens a second time. */
 @import '../../../resources/css/foundation.css';
+@import '../../../resources/css/components.css';
 @import 'tailwindcss' source(none);
 @import '../../../resources/css/tailwind.css';
 @import './material-scheme.css';