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