Give a bottom sheet M3's preset heights

Plan step 23, containment.md § Missing ("Bottom sheets: preset heights
and the handle's cycle-through-heights behaviour"). `heights` (or `snap`,
which is 25/50/90dvh) lists the stops a sheet moves between; it then
takes its stop's height and opens at the stop that equals `height`, or at
the first. Fewer than two stops is no stops, since M3 only requires the
non-drag alternative "if multiple preset heights exist".

That alternative is the drag handle, which M3 names a button: activating
it moves to the next stop and announces it in a live region, and from the
last stop it closes the sheet — M3's "selecting the drag handle toggles
preset heights or closes the sheet", and the same thing a handle with no
stops has always done. A drag now runs the sheet's height with the
pointer and settles on the nearest stop, or closes below the smallest one
or on a downward flick.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9

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

@@ -184,6 +184,18 @@
                     </x-list>
                 </x-bottom-sheet>
             </div>
+
+            <div x-data="{ open: false }">
+                <x-button label="Bottom sheet with preset heights" variant="tonal" x-on:click="open = true" />
+                <x-bottom-sheet title="Nearby places" snap>
+                    <p class="type-body-md text-on-surface-variant">Press the drag handle, or focus it and press Enter, to move to the next height; from the last it closes. Dragging it settles on the nearest.</p>
+                    <x-list>
+                        <x-list-item title="Hafen" description="240 m · open until 23:00" icon="location_on" />
+                        <x-list-item title="Stadtbibliothek" description="600 m · closes at 18:00" icon="location_on" />
+                        <x-list-item title="Seepromenade" description="1.1 km · always open" icon="location_on" />
+                    </x-list>
+                </x-bottom-sheet>
+            </div>
             BLADE,
     ];
 @endphp