Add the Material 3 Expressive foundation

Colour, shape, type, elevation and motion as tokens and Tailwind
utilities; `php artisan material:scheme`, which generates an app's colour
roles with Google's material-color-utilities (spec 2025); the theme head
script with light, dark and system and its Alpine store; Google Sans Flex;
every Material Symbol (4,135, outlined and filled) drawn by <x-icon>
without blade-icons; all 35 M3 Expressive shapes, ported from androidx, as
<x-shape>; the x-figure directive; the Toasts concern; DesignGuard for
applications' tests; and a showcase with every token, both themes side by
side and an icon search.

Colour utilities are `@theme inline`, so a section with its own
data-theme repaints; without it they resolve once on :root.

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

tests/Feature/Components/IconTest.php

@@ -0,0 +1,57 @@
+<?php
+
+use Illuminate\View\ViewException;
+use NoNameWeb\LivewireMaterial\Support\SvgFile;
+
+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('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 () {
+    $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);
+});
+
+it('names the icon for a screen reader when it carries the meaning alone', function () {
+    $this->blade('<x-icon name="lock" label="Password protected" />')
+        ->assertSee('aria-label="Password protected"', false)
+        ->assertSee('role="img"', false)
+        ->assertDontSee('aria-hidden', false);
+});
+
+it('draws the filled symbol when asked', function () {
+    $outlined = (string) $this->blade('<x-icon name="favorite" />');
+    $filled = (string) $this->blade('<x-icon name="favorite" filled />');
+
+    expect($filled)->not->toBe($outlined)
+        ->and($filled)->toContain('<path d=');
+});
+
+it('refuses a name that is not a symbol', function () {
+    expect(fn () => $this->blade('<x-icon name="not_a_symbol_at_all" />'))
+        ->toThrow(ViewException::class, 'There is no Material Symbol named [not_a_symbol_at_all].');
+});
+
+it('points a Heroicon name at the symbol catalogue', function () {
+    expect(fn () => $this->blade('<x-icon name="o-calendar-days" />'))
+        ->toThrow(ViewException::class, 'is not a Material Symbol name');
+});
+
+it('ships every symbol outlined and filled, painted in the text colour', function () {
+    $symbols = SvgFile::symbolNames();
+    $filled = array_map(fn (string $file): string => basename($file, '.svg'), glob(__DIR__.'/../../../resources/svg/symbols/filled/*.svg'));
+
+    expect(count($symbols))->toBeGreaterThan(4000)
+        ->and($filled)->toEqual($symbols);
+
+    foreach (['home', 'search', 'cloud_upload', 'content_copy', 'delete'] as $name) {
+        expect(file_get_contents(__DIR__."/../../../resources/svg/symbols/outlined/{$name}.svg"))
+            ->toStartWith('<svg fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path')
+            ->not->toContain('width=');
+    }
+});

tests/Feature/Components/ShapeTest.php

@@ -0,0 +1,35 @@
+<?php
+
+use Illuminate\View\ViewException;
+use NoNameWeb\LivewireMaterial\Support\SvgFile;
+
+it('ships M3 Expressive\'s 35 shapes', function () {
+    expect(SvgFile::shapeNames())->toHaveCount(35)
+        ->toContain('circle', 'cookie-9', 'clover-4', 'soft-burst', 'pixel-triangle', 'heart');
+});
+
+it('draws every shape as one path in the text colour, filling a 100-unit box', function () {
+    foreach (SvgFile::shapeNames() as $shape) {
+        $svg = file_get_contents(__DIR__."/../../../resources/svg/shapes/{$shape}.svg");
+
+        expect($svg)->toMatch('#^<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" fill="currentColor"><path d="[MCZ0-9. -]+"/></svg>\n$#');
+
+        preg_match_all('/-?\d+(?:\.\d+)?/', str($svg)->after(' d="')->before('"')->toString(), $numbers);
+        $xs = array_map('floatval', array_filter($numbers[0], fn ($key) => $key % 2 === 0, ARRAY_FILTER_USE_KEY));
+        $ys = array_map('floatval', array_filter($numbers[0], fn ($key) => $key % 2 === 1, ARRAY_FILTER_USE_KEY));
+
+        expect(min([...$xs, ...$ys]))->toBeGreaterThanOrEqual(0)
+            ->and(max([...$xs, ...$ys]))->toBeLessThanOrEqual(100)
+            ->and(max(max($xs) - min($xs), max($ys) - min($ys)))->toBeGreaterThanOrEqual(96, "{$shape} does not fill its box");
+    }
+});
+
+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);
+});
+
+it('refuses a shape that does not exist', function () {
+    expect(fn () => $this->blade('<x-shape name="blob" />'))
+        ->toThrow(ViewException::class, 'There is no M3 Expressive shape named [blob].');
+});

tests/Feature/Components/ThemeScriptTest.php

@@ -0,0 +1,24 @@
+<?php
+
+it('follows the operating system until the visitor chooses, by default', function () {
+    $this->blade('<x-theme-script />')
+        ->assertSee('({"default":"system","key":"material-theme","legacy":[]})', false);
+});
+
+it('takes the application\'s default, key and legacy keys', function () {
+    config(['livewire-material.theme' => [
+        'default' => 'dark',
+        'storage_key' => 'sealshare-theme',
+        'legacy_keys' => ['mary-theme'],
+    ]]);
+
+    $this->blade('<x-theme-script />')
+        ->assertSee('({"default":"dark","key":"sealshare-theme","legacy":["mary-theme"]})', false);
+});
+
+it('falls back to the operating system for a default it does not know', function () {
+    config(['livewire-material.theme.default' => 'blue']);
+
+    $this->blade('<x-theme-script />')
+        ->assertSee('"default":"system"', false);
+});