Merge branch 'worktree-agent-a9c6ef32512bc556d'

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

@@ -60,6 +60,23 @@
                 <x-menu-item label="Delete" icon="delete" />
             </x-menu>
             BLADE,
+        'A bottom sheet on a phone, a menu from medium' => <<<'BLADE'
+            <x-menu label="Photo actions" sheet-at-compact>
+                <x-slot:trigger>
+                    <x-button label="Photo" icon="photo" icon-right="arrow_drop_down" variant="outlined" />
+                </x-slot:trigger>
+
+                <x-menu-item label="Set as wallpaper" icon="wallpaper" description="Home and lock screen" />
+                <x-menu-item label="Add to album" icon="photo_album" submenu>
+                    <x-menu-item label="Holidays" icon="beach_access" />
+                    <x-menu-item label="Family" icon="family_restroom" />
+                    <x-menu-item label="Favourites" icon="favorite" />
+                </x-menu-item>
+                <x-menu-item label="Print" icon="print" shortcut="⌘P" />
+                <x-menu-separator />
+                <x-menu-item label="Delete" icon="delete" />
+            </x-menu>
+            BLADE,
         'Clusters: a gap, or a divider' => <<<'BLADE'
             <x-menu label="Grouped by a gap">
                 <x-slot:trigger>
@@ -128,7 +145,8 @@
     <p class="max-w-3xl type-body-md text-on-surface-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.
+        &mdash; Right to enter it, Left to come back. A <code>sheet-at-compact</code> menu opens the same items in a bottom sheet
+        below 600px, where a submenu opens in place: narrow the window to see it.
     </p>
 
     @foreach ($examples as $title => $code)