Add an illustration slot to the empty state

An application with its own artwork for an empty collection puts it in
the `illustration` slot, which is drawn in place of the shape and icon.
The slot's attributes go on the element around it, so its class sets the
colour an SVG's currentColor takes. A slot holding only whitespace or
comments counts as empty (hasActualContent), and without the slot the
empty state renders as before.

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

resources/boost/skills/livewire-material-development/SKILL.md

@@ -392,6 +392,15 @@ Shows on hover and keyboard focus; `persistent` opens it on press and keeps it u
 
 "Nothing here yet": `icon` on an Expressive `shape` (`cookie-9` by default), `title`, `description` or slot, and an `actions` slot. Use it for an empty collection, not for a filter that matched nothing.
 
+The `illustration` slot draws the application's own artwork in place of the shape and icon (`icon` and `shape` are then unused). Size the artwork yourself; the slot's attributes go on the element around it, so its `class` sets the colour `currentColor` takes. Mark decorative SVG `aria-hidden="true"`. A slot holding only whitespace or comments leaves the shape and icon.
+
+```blade
+<x-empty-state title="No routes yet" description="Draw one on the map.">
+    <x-slot:illustration class="text-primary"><svg class="size-32" viewBox="0 0 120 120" aria-hidden="true">…</svg></x-slot:illustration>
+    <x-slot:actions><x-button label="Draw a route" variant="filled" /></x-slot:actions>
+</x-empty-state>
+```
+
 ### `<x-card>`
 
 `variant`: `filled` (default, surface-container-highest), `elevated`, `outlined`; medium corner. Props `title`, `subtitle`, `separator`; slots `figure` (full-bleed media), `menu` (top-end), `actions` (end-aligned). Do not pass `bg-*`; use `variant`.

resources/views/components/empty-state.blade.php

@@ -8,7 +8,17 @@
      Not an M3 component; built from M3 Expressive's parts — `shape` (any `<x-shape>` name,
      `cookie-9` by default) in secondary-container behind the `icon` in on-secondary-container,
      a title-large `title`, body-medium `description` or slot. For "your filter matched nothing"
-     use a plain line of text instead: a picture there is consolation for a typo. --}}
+     use a plain line of text instead: a picture there is consolation for a typo.
+
+     An application with its own artwork puts it in the `illustration` slot, which is drawn in place
+     of the shape and icon (both props are then unused). The slot sizes itself; its attributes go on
+     the element around it, so `class` can set the colour an SVG's `currentColor` takes:
+
+         <x-empty-state title="No routes yet">
+             <x-slot:illustration class="text-primary"><svg class="size-32" aria-hidden="true">…</svg></x-slot:illustration>
+         </x-empty-state>
+
+     A slot holding only whitespace or comments counts as empty, and the shape and icon stay. --}}
 
 @props([
     'icon' => 'inbox',
@@ -18,10 +28,14 @@
 ])
 
 <div {{ $attributes->class('flex flex-col items-center gap-4 px-4 py-10 text-center') }}>
-    <div class="relative grid size-28 place-items-center">
+    @if (isset($illustration) && $illustration->hasActualContent())
-        <x-livewire-material::shape :name="$shape" class="absolute inset-0 size-full text-secondary-container" />
+        <div {{ $illustration->attributes }}>{{ $illustration }}</div>
-        <x-livewire-material::icon :name="$icon" class="relative size-12 text-on-secondary-container" />
+    @else
-    </div>
+        <div class="relative grid size-28 place-items-center">
+            <x-livewire-material::shape :name="$shape" class="absolute inset-0 size-full text-secondary-container" />
+            <x-livewire-material::icon :name="$icon" class="relative size-12 text-on-secondary-container" />
+        </div>
+    @endif
 
     @if ($title)
         <h3 class="type-title-lg">{{ $title }}</h3>

resources/views/showcase/sections/communication.blade.php

@@ -66,6 +66,22 @@
                 </x-slot:actions>
             </x-empty-state>
             BLADE,
+        'Empty state with an illustration' => <<<'BLADE'
+            <x-empty-state title="No routes yet" description="Draw a route on the map, or import one from a GPX file." class="w-full">
+                <x-slot:illustration class="text-primary">
+                    <svg class="size-32" viewBox="0 0 120 120" fill="none" aria-hidden="true">
+                        <circle cx="60" cy="60" r="56" class="fill-primary-container" />
+                        <path d="M28 86C40 62 56 92 68 64S86 42 90 46" stroke="currentColor" stroke-width="5" stroke-linecap="round" stroke-dasharray="1 10" />
+                        <circle cx="28" cy="86" r="7" fill="currentColor" />
+                        <path d="M90 18a12 12 0 0 1 12 12c0 10-12 22-12 22S78 40 78 30a12 12 0 0 1 12-12Z" class="fill-tertiary" />
+                        <circle cx="90" cy="30" r="4" class="fill-on-tertiary" />
+                    </svg>
+                </x-slot:illustration>
+                <x-slot:actions>
+                    <x-button label="Draw a route" icon="route" variant="filled" />
+                </x-slot:actions>
+            </x-empty-state>
+            BLADE,
     ];
 @endphp
 

tests/Feature/Components/EmptyStateTest.php

@@ -15,3 +15,34 @@ it('sets an icon on an Expressive shape above its words and action', function ()
         ->toContain('Upload files')
         ->and(substr_count($html, '<svg'))->toBe(2);
 });
+
+it('draws an illustration in place of the shape and icon', function () {
+    $html = (string) $this->blade(<<<'BLADE'
+        <x-empty-state icon="upload_file" title="No routes yet">
+            <x-slot:illustration class="text-primary"><svg class="size-32" viewBox="0 0 10 10" aria-hidden="true"><circle cx="5" cy="5" r="4" /></svg></x-slot:illustration>
+        </x-empty-state>
+        BLADE);
+
+    expect($html)
+        ->toContain('<div class="text-primary"><svg class="size-32" viewBox="0 0 10 10" aria-hidden="true"><circle cx="5" cy="5" r="4" /></svg></div>')
+        ->not->toContain('text-secondary-container')
+        ->not->toContain('text-on-secondary-container')
+        ->toContain('No routes yet')
+        ->and(substr_count($html, '<svg'))->toBe(1);
+});
+
+it('keeps the shape and icon while the illustration slot holds nothing but comments', function () {
+    $html = (string) $this->blade(<<<'BLADE'
+        <x-empty-state title="No shares yet">
+            <x-slot:illustration>
+                <!-- artwork to come -->
+            </x-slot:illustration>
+        </x-empty-state>
+        BLADE);
+
+    expect($html)
+        ->toContain('text-secondary-container')
+        ->toContain('text-on-secondary-container')
+        ->not->toContain('artwork to come')
+        ->and(substr_count($html, '<svg'))->toBe(2);
+});