Pin a dialog's headline and actions, and let it be an alert dialog

Plan step 19, containment.md C-06, C-17 and C-20. The whole box scrolled,
so a long dialog scrolled its headline and its buttons away; the header,
the body and the action row are now separate rows of the flex column,
each carrying the 24dp padding the box used to hold, and only the body
scrolls. `separator` draws the divider under the header and above the
actions, where it now stays put. The full-screen header is M3's 56dp
(was 64) and its action bar 56 (was ~72). New `alert` prop for M3's "on
web, basic dialogs should have the alert dialog role", and a `subtitle`
is always the dialog's `aria-describedby`.

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

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

@@ -78,7 +78,7 @@
         'Dialogs' => <<<'BLADE'
             <div x-data="{ open: false }">
                 <x-button label="Basic dialog" variant="tonal" x-on:click="open = true" />
-                <x-modal title="Delete this share?" subtitle="Recipients lose access at once. This cannot be undone.">
+                <x-modal title="Delete this share?" subtitle="Recipients lose access at once. This cannot be undone." alert>
                     <x-slot:actions>
                         <x-button label="Cancel" x-on:click="close()" />
                         <x-button label="Delete" danger x-on:click="close()" />