Give a closing standard side sheet's room back as it leaves

From `expanded` a standard side sheet sits in the layout beside the
content, and the view took it out of the layout the moment it closed:
`data-md-drawer-collapsed` (`display: none` on the root) followed `! open`
at once, so its fade was never seen and the content beside it took the
sheet's width, and the gap, in one jump — in every engine. M3's side
sheets: opening a standard sheet shrinks the body beside it, and closing
gives the room back.

drawer.css: the standard root is a clipping flex box whose `inline-size`
springs between none and the sheet's width, with a negative margin as
wide as its flex parent's gap (`--md-drawer-gap`), on the sheet's own
exit and entry timings; the sheet keeps its width at the root's far edge,
so it is uncovered from its inner edge while it fades. drawer.blade.php:
`settle()`, from `x-effect`, measures the gap on each change and holds
the collapse (`closing`) for the root's and the sheet's closing
durations, read a frame on; reopening lets a pending end go by. The
binding reads `collapsed`, which only `settle()` and the window's width
write: a binding reading `open` ran before `settle()` in the same flush
and, already queued, did not run again once `closing` changed.

ContainmentTest closes the showcase's sheet at 1000px and samples, in the
page, for the root part-way to none while the column beside it has grown
part of the way, then checks the collapse, the column at the row's full
width, and a reopen part-way through the exit ending fully open; it fails
on the previous code in Chrome, Firefox and Safari. OverlayTest pins the
root's declarations and the view's bindings.

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

resources/css/components/drawer.css

@@ -33,9 +33,15 @@
  * for `surface` with an outline-variant rule down its inner edge, in place of the scrim
  * (its anatomy's "Divider (optional)"). Below `expanded` (840px) it is the modal sheet — M3 caps
  * a side sheet at 400dp, and a 600px window has too little room left beside one, so the switch
- * sits at `expanded` rather than `medium`. `data-md-drawer-collapsed` (the view, from the
- * `wide` — window ≥ 840px — Alpine state) takes the standard sheet out of the layout entirely
- * while it is closed there, so the content beside it fills the space.
+ * sits at `expanded` rather than `medium`. Opening it shrinks the body beside it and closing it
+ * gives the room back (M3's side sheets, "Adaptive"): the root's `inline-size` springs from none to
+ * the sheet's width — the sheet itself keeps its width, sits at the root's far edge and is clipped,
+ * so it is uncovered from its inner edge — together with a negative margin as wide as the flex
+ * parent's gap (`--md-drawer-gap`, which the view measures), so the content beside does not jump by
+ * the gap when the root leaves the layout. `data-md-drawer-collapsed` (the view, while the window is
+ * ≥ 840px and the sheet is closed) then takes the root out of the layout entirely, but only once the
+ * exit has run: the view's `closing` holds it, where it once cut the fade and the resize off on
+ * their first frame.
  */
 
 @layer material.reset, material.tokens, material.base, material.layout, material.components, material.text, material.visibility;
@@ -146,9 +152,43 @@
         [data-md-drawer][data-md-standard] {
             position: sticky;
             top: 0;
+            display: flex;
+            justify-content: flex-end;
             height: 100dvh;
             flex-shrink: 0;
             align-self: flex-start;
+            overflow: clip;
+            inline-size: 0;
+            margin-inline-start: calc(-1 * var(--md-drawer-gap, 0px));
+            transition-property: inline-size, margin-inline;
+            transition-duration: var(--md-sys-motion-effects-default-duration);
+            transition-timing-function: var(--md-sys-motion-easing-emphasized-accelerate);
+        }
+
+        /* A start sheet sits at the start edge, with the gap after it. */
+        [data-md-drawer][data-md-standard]:where(:has(> [data-md-drawer-sheet][data-md-side='start'])) {
+            justify-content: flex-start;
+            margin-inline-start: 0;
+            margin-inline-end: calc(-1 * var(--md-drawer-gap, 0px));
+        }
+
+        [data-md-drawer][data-md-standard][data-md-open] {
+            inline-size: min(var(--sheet-width), calc(100vw - 64px));
+            margin-inline: 0;
+            transition-duration: var(--md-sys-motion-spatial-default-duration);
+            transition-timing-function: var(--md-sys-motion-easing-emphasized-decelerate);
+        }
+
+        @starting-style {
+            [data-md-drawer][data-md-standard][data-md-open] {
+                inline-size: 0;
+                margin-inline-start: calc(-1 * var(--md-drawer-gap, 0px));
+            }
+
+            [data-md-drawer][data-md-standard][data-md-open]:where(:has(> [data-md-drawer-sheet][data-md-side='start'])) {
+                margin-inline-start: 0;
+                margin-inline-end: calc(-1 * var(--md-drawer-gap, 0px));
+            }
         }
 
         [data-md-drawer][data-md-standard][data-md-drawer-collapsed] {
@@ -161,6 +201,7 @@
 
         [data-md-drawer][data-md-standard] > [data-md-drawer-sheet] {
             position: relative;
+            flex-shrink: 0;
             top: 0;
             z-index: auto;
             height: 100%;