From 4d1481c832a04dc1036dbcd103f32132c17f45c5 Mon Sep 17 00:00:00 2001
From: Andreas Reinhold / reini <reini@kadenpartner.ch>
Date: Tue, 15 Sep 2026 04:46:00 +0200
Subject: [PATCH] Rewrite the showcase's Menus section without Tailwind

Plan step 38: text moves onto the md-* classes; the "Icons in their
own colour" example's two roles outside the fixed md-ink-* set
(tertiary, secondary) move to a data-md-showcase-icon-color hook in
showcase.css targeting the item's [data-md-icon] child, since
icon-class only reaches roles the fixed set already names. Swimming's
info icon keeps icon-class, now icon-class="md-ink-info".

Every id, aria-label and role selector the Chromium ActionsTest
selectors read against /material/menus (#menus, the More/Sort/Share/
Assign to/Photo triggers, the submenu and sheet-at-compact behaviour)
is unchanged.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9
---
 resources/css/showcase.css                       | 10 ++++++++++
 .../views/showcase/sections/menus.blade.php      | 16 ++++++++--------
 2 files changed, 18 insertions(+), 8 deletions(-)

diff --git a/resources/css/showcase.css b/resources/css/showcase.css
index 7c8fbff9..046bb8a6 100644
--- a/resources/css/showcase.css
+++ b/resources/css/showcase.css
@@ -349,4 +349,14 @@
         justify-content: flex-end;
         height: 288px;
     }
+
+    /* Menus: an item's icon in a colour beyond the fixed md-ink-* set (icon-class covers the
+       roles that set already has, md-ink-info among them). */
+    [data-md-showcase-icon-color='tertiary'] [data-md-icon] {
+        color: var(--md-sys-color-tertiary);
+    }
+
+    [data-md-showcase-icon-color='secondary'] [data-md-icon] {
+        color: var(--md-sys-color-secondary);
+    }
 }
diff --git a/resources/views/showcase/sections/menus.blade.php b/resources/views/showcase/sections/menus.blade.php
index b478db88..88d7285f 100644
--- a/resources/views/showcase/sections/menus.blade.php
+++ b/resources/views/showcase/sections/menus.blade.php
@@ -130,19 +130,19 @@
                     <x-button label="New plan" icon="add" variant="filled" />
                 </x-slot:trigger>
 
-                <x-menu-item label="Running" icon="directions_run" icon-class="text-tertiary" />
-                <x-menu-item label="Cycling" icon="directions_bike" icon-class="text-secondary" />
-                <x-menu-item label="Swimming" icon="pool" icon-class="text-info" />
-                <x-menu-item label="Rowing" icon="rowing" icon-class="text-tertiary" disabled />
+                <x-menu-item label="Running" icon="directions_run" data-md-showcase-icon-color="tertiary" />
+                <x-menu-item label="Cycling" icon="directions_bike" data-md-showcase-icon-color="secondary" />
+                <x-menu-item label="Swimming" icon="pool" icon-class="md-ink-info" />
+                <x-menu-item label="Rowing" icon="rowing" data-md-showcase-icon-color="tertiary" disabled />
             </x-menu>
             BLADE,
     ];
 @endphp
 
-<section id="menus" class="scroll-mt-24 space-y-6">
-    <h2 class="type-headline-md">Menus</h2>
+<x-livewire-material::stack as="section" id="menus" gap="space300">
+    <h2 class="md-type-headline-md">Menus</h2>
 
-    <p class="max-w-3xl type-body-md text-on-surface-variant">
+    <p class="md-type-body-md md-ink-variant">
         <code>&lt;x-menu&gt;</code> with <code>&lt;x-menu-item&gt;</code>, <code>&lt;x-menu-group&gt;</code> and <code>&lt;x-menu-separator&gt;</code>.
         Open one with the keyboard too: arrows, Home, End, a letter, Escape. A <code>submenu</code> item opens a second list beside it
         &mdash; Right to enter it, Left to come back. A <code>sheet-at-compact</code> menu opens the same items in a bottom sheet
@@ -152,4 +152,4 @@
     @foreach ($examples as $title => $code)
         <x-showcase::example :$title :$code />
     @endforeach
-</section>
+</x-livewire-material::stack>