Align a side sheet's actions left, in M3's 72dp row

Plan step 19, containment.md C-10. The action row was right-aligned with
24px above it; the side-sheet specs table puts bottom actions on the
left in a 72dp row with 16dp above and 24dp below. A dialog's actions
stay trailing-aligned — M3 specifies the two differently.

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

resources/boost/skills/livewire-material-development/SKILL.md

@@ -481,7 +481,7 @@ Props: `title`, `subtitle`, `icon` (centred hero icon), `separator` (a divider u
 
 ### `<x-drawer>`
 
-An M3 side sheet, bound like `<x-modal>`; `close()` in scope. Props: `title`, `subtitle`, `separator`, `side` (`end` default, `start`), `width` (`25rem`), `with-close-button` (**default true** — M3 requires a close affordance; `:with-close-button="false"` is ignored when Escape or the scrim is off, and on a pane), `close-on-escape` (default true), `without-backdrop-close`, `actions` slot. `pane` (with `pane-width`, `22.5rem` — M3's 360dp fixed pane) turns it into a second pane from `expanded`, where M3 shows two panes: render it after the list inside `<div class="expanded:flex expanded:items-start expanded:gap-6">`. Escape leaves a pane open unless `pane-close-on-escape`. Its body is a size container — lay out inside with `@md:` (a *container* query), never a window class.
+An M3 side sheet, bound like `<x-modal>`; `close()` in scope. Props: `title`, `subtitle`, `separator`, `side` (`end` default, `start`), `width` (`25rem`), `with-close-button` (**default true** — M3 requires a close affordance; `:with-close-button="false"` is ignored when Escape or the scrim is off, and on a pane), `close-on-escape` (default true), `without-backdrop-close`, `actions` slot (**left**-aligned in a 72dp row, which is what the side-sheet spec says; a dialog's are trailing-aligned). `pane` (with `pane-width`, `22.5rem` — M3's 360dp fixed pane) turns it into a second pane from `expanded`, where M3 shows two panes: render it after the list inside `<div class="expanded:flex expanded:items-start expanded:gap-6">`. Escape leaves a pane open unless `pane-close-on-escape`. Its body is a size container — lay out inside with `@md:` (a *container* query), never a window class.
 
 ### `<x-bottom-sheet>`
 

resources/views/components/drawer.blade.php

@@ -147,7 +147,10 @@
         </div>
 
         @isset($actions)
-            <div class="flex shrink-0 flex-wrap items-center justify-end gap-2 pt-6">
+            {{-- The side-sheet specs table: bottom actions 72dp tall, 16dp above them, 24dp below
+                 (the sheet's own padding), aligned **left** — a dialog's are trailing-aligned, and
+                 M3 specifies the two differently. --}}
+            <div class="flex min-h-18 shrink-0 flex-wrap items-center justify-start gap-2 pt-4">
                 {{ $actions }}
             </div>
         @endisset

tests/Feature/Components/OverlayTest.php

@@ -106,6 +106,11 @@ it('always offers a way out of a side sheet, as M3 requires', function () {
         ->and((string) $this->blade('<x-drawer pane pane-close-on-escape :with-close-button="false">Body</x-drawer>'))->not->toContain('aria-label="Close"');
 });
 
+it('puts a side sheet\'s actions on the left, in M3\'s 72dp row', function () {
+    expect((string) $this->blade('<x-drawer title="Details">Body<x-slot:actions><button>Delete</button></x-slot:actions></x-drawer>'))
+        ->toContain('flex min-h-18 shrink-0 flex-wrap items-center justify-start gap-2 pt-4');
+});
+
 it('slides a side sheet in from either edge, and is a pane from expanded when asked', function () {
     expect((string) $this->blade('<x-drawer title="Details" with-close-button>Body</x-drawer>'))
         ->toContain('x-trap.inert.noscroll="open && ! wide"')