Draw a standard side sheet's first state without motion

Giving a closing standard sheet its room back made the root's inline
size a transition, with an `@starting-style` for the entry, so a sheet
that starts open grew in on every page load: its open state arrives
through Alpine, after the first paint of the closed root. Nothing should
move while a page loads.

The view now marks the root `data-md-drawer-settled` two frames after
the first `settle()` — once the state Alpine starts with has been
painted — and drawer.css gives the standard sheet's root and sheet no
transitions until then. The browser test loads a page with slowed motion
tokens and a sheet that starts open, and finds it standing at its full
width, shown, with nothing animating; closing it afterwards still
animates. It fails without the change in Chrome and Firefox and passes
in all three engines.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

resources/views/components/drawer.blade.php

@@ -30,7 +30,9 @@
      waits for that exit (`closing`, `settle()`) instead of cutting it off on its first frame. It
      binds `collapsed`, which only `settle()` and the window's width write: a binding that read
      `open` itself would run before `settle()` in the same flush and, already queued, not run again
-     once `closing` changed.
+     once `closing` changed. Nothing moves while the page loads: `data-md-drawer-settled` comes two
+     frames after the state Alpine starts with, and the standard sheet has no transitions until
+     then, so a sheet that starts open stands open rather than growing in.
 
      For the second pane of a list-detail layout use `<x-list-detail>` instead (step 35's canonical
      layout); the two are not the same thing — a pane shows what the list beside it selected, a
@@ -85,6 +87,7 @@
     x-data="{
         @if ($model !== null) open: @entangle($attributes->wire('model')).live, @endif
         wide: false,
+        settled: false,
         collapsed: false,
         closing: false,
         closings: 0,
@@ -93,9 +96,17 @@
         settle(open) {
             open = Boolean(open);
 
-            if (this.wasOpen === null || open === this.wasOpen) {
+            if (this.wasOpen === null) {
                 this.wasOpen = open;
 
+                // The state Alpine starts with is drawn, not animated: two frames on, once it has
+                // been painted, the sheet may move.
+                requestAnimationFrame(() => requestAnimationFrame(() => this.settled = true));
+
+                return;
+            }
+
+            if (open === this.wasOpen) {
                 return;
             }
 
@@ -141,6 +152,7 @@
     @if ($closeOnEscape) x-on:keydown.window.escape="if (open && ! wide) close()" @endif
     x-bind:data-md-open="open ? '' : null"
     x-bind:data-md-drawer-collapsed="collapsed ? '' : null"
+    x-bind:data-md-drawer-settled="settled ? '' : null"
     x-effect="settle(open)"
     data-md-drawer
     @if ($standard) data-md-standard @endif