Add hint-class to the group and icon-class to menu items

<x-group hint-class> adds classes to the hint, as the text fields'
hint-class does, and a validation message still replaces the hint.
<x-menu-item icon-class> adds classes to the leading icon, for an icon
whose colour means something of its own, such as a sport's glyph.

A colour class there has to win over the component's own colour, and
which of two colour utilities wins depends on the order Tailwind emits
them (text-error comes before text-on-surface-variant). So when either
prop is given, the component's own colour is written with a :where()
variant that carries no specificity, as the fields' hint colour sits
in the components layer. A disabled item's icon stays disabled. Without
the props the markup is unchanged. The skill now also lists the fields'
hint-class, which it had left out.

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

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

@@ -84,7 +84,7 @@
                     ['id' => 'system', 'name' => 'System', 'icon' => 'computer'],
                 ]" />
 
-                <x-group label="Days" name="showcase-days" x-model="days" multiple variant="outlined" hint="Choose any" :options="[
+                <x-group label="Days" name="showcase-days" x-model="days" multiple variant="outlined" hint="Thursday is fully booked" hint-class="text-warning" :options="[
                     ['id' => 'mon', 'name' => 'Mon'],
                     ['id' => 'tue', 'name' => 'Tue'],
                     ['id' => 'wed', 'name' => 'Wed'],

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

@@ -36,6 +36,18 @@
                 <x-menu-item label="Upload a folder" icon="drive_folder_upload" />
             </x-menu>
             BLADE,
+        'Icons in their own colour' => <<<'BLADE'
+            <x-menu label="New plan">
+                <x-slot:trigger>
+                    <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>
+            BLADE,
     ];
 @endphp