Pin the two-line snackbar, and reach it with Alt+G

Plan step 22, actions.md § Missing (two-line snackbar height, snackbar
keyboard shortcut): the container grew organically from `min-h-12` rather
than sitting at SnackbarTokens.TwoLinesContainerHeight, and there was no
way for a keyboard to reach an actioned snackbar at all.

A `description` is M3's second line, so the snackbar is pinned to 68px
whenever one is there, and below `medium` a two-line snackbar with an
action wraps the action under the text — M3's "two lines with longer
action" configuration. Alt+G, the shortcut M3 suggests for the web, moves
the focus to a snackbar that carries an action from wherever the page had
it; `event.code`, because Alt rewrites `event.key` on some layouts.

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

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

@@ -24,6 +24,19 @@
                 <x-button label="Sticky, with an event" variant="tonal" x-on:click="materialToast('A new version is ready', { type: 'info', sticky: true, action: { label: 'Reload', event: 'showcase:reload' } })" x-on:showcase:reload.window="materialToast('Reloading…')" />
             </div>
             BLADE,
+        'Two lines, and the keyboard shortcut that reaches them' => <<<'BLADE'
+            <div x-data class="w-full space-y-4">
+                <div class="flex flex-wrap items-center gap-4">
+                    <x-button label="Two lines" variant="tonal" x-on:click="materialToast('Upload paused', { description: 'The connection dropped at 64%. It carries on when you are back.' })" />
+                    <x-button label="Two lines, with an action" variant="tonal" x-on:click="materialToast('Upload paused', { description: 'The connection dropped at 64%. It carries on when you are back.', action: { label: 'Retry now', handler: () => materialToast('Retrying…') } })" />
+                </div>
+
+                <p class="type-body-md text-on-surface-variant">
+                    A description makes the snackbar 68px, M3's two-line height; below <code>medium</code> the action wraps under the text.
+                    Press <kbd class="rounded-corner-xs bg-surface-container-highest px-1 type-label-md">Alt</kbd>&nbsp;+&nbsp;<kbd class="rounded-corner-xs bg-surface-container-highest px-1 type-label-md">G</kbd> to move the focus to a snackbar that has an action.
+                </p>
+            </div>
+            BLADE,
         'Plain tooltips' => <<<'BLADE'
             <x-button icon="content_copy" tooltip="Copy link" />
             <x-button icon="qr_code_2" tooltip-bottom="Show QR code" />