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

@@ -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);
+    }
 }