Rewrite the drawer (side sheet) without Tailwind, remove pane

Plan step 36 (containment group): <x-drawer>'s class lists move into
resources/css/components/drawer.css, keyed on data-md-drawer (with
data-md-open, data-md-standard) and data-md-drawer-scrim/-sheet
(data-md-side)/-head/-head-row/-heading/-title/-subtitle/-close/-body/
-actions. The modal sheet slides in on the emphasized-decelerate
easing and out on emphasized-accelerate (an asymmetric CSS transition
expressed by giving the open-state selector its own
transition-duration/-timing-function, which the "after-change style"
rule picks up); the sheet stays x-show-driven, with @starting-style +
transition-behavior: allow-discrete taking the place of x-transition's
enter/leave classes, matching resources/css/components/search.css's
already-rewritten scrim/view. A standard sheet drops the scrim and
trap from 840px and only fades in place (an in-flow box does not
travel); data-md-drawer-collapsed (from the view's `wide` Alpine
state) takes it out of the layout while closed there.

<x-drawer pane> is removed: step 35's <x-list-detail> is M3's form of
that job (the plan's decision, docs/plans/material-3-alignment.md
"Decisions"). Removed the prop, its CSS classes and its tests
(OverlayTest's two pane-only tests deleted, the others' pane cases
dropped); pointed each mention at <x-list-detail> in the material-3
guideline, the material-3-design and livewire-material-development
skills, and added a line to UPGRADE.md's 2.0.0 notes. No other living
file named `<x-drawer pane>` (grepped views, tests, README, boost,
workbench excluding build output); docs/plans and docs/audits keep
their history unchanged.

Imported from the Containment block of components.css, importing
button.css and divider.css for what the view renders.

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

tests/Feature/Components/OverlayTest.php

@@ -174,41 +174,27 @@ it('gives a full-screen dialog M3\'s 56px header and action bar', function () {
         ->toContain('min-height: var(--md-sys-measurement-space700);');
 });
 
-it('leaves a pane open on Escape unless it is asked to close then too', function () {
-    expect((string) $this->blade('<x-drawer pane>Body</x-drawer>'))
-        ->toContain('x-on:keydown.window.escape="if (open &amp;&amp; ! wide) close()"')
-        ->and((string) $this->blade('<x-drawer pane pane-close-on-escape>Body</x-drawer>'))
-        ->toContain('x-on:keydown.window.escape="if (open) close()"')
-        ->and((string) $this->blade('<x-drawer pane pane-close-on-escape :close-on-escape="false">Body</x-drawer>'))
-        ->not->toContain('keydown.window.escape');
-});
-
 it('always offers a way out of a side sheet, as M3 requires', function () {
     expect((string) $this->blade('<x-drawer title="Details">Body</x-drawer>'))->toContain('aria-label="Close"')
         ->and((string) $this->blade('<x-drawer title="Details" :with-close-button="false">Body</x-drawer>'))->not->toContain('aria-label="Close"')
         ->and((string) $this->blade('<x-drawer title="Details" :with-close-button="false" :close-on-escape="false">Body</x-drawer>'))->toContain('aria-label="Close"')
         ->and((string) $this->blade('<x-drawer title="Details" :with-close-button="false" without-backdrop-close>Body</x-drawer>'))->toContain('aria-label="Close"')
-        ->and((string) $this->blade('<x-drawer pane :with-close-button="false">Body</x-drawer>'))->toContain('aria-label="Close"')
-        ->and((string) $this->blade('<x-drawer pane pane-close-on-escape :with-close-button="false">Body</x-drawer>'))->not->toContain('aria-label="Close"');
+        ->and((string) $this->blade('<x-drawer standard :with-close-button="false">Body</x-drawer>'))->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');
+        ->toMatch('/<div\s+data-md-drawer-actions\s*>/');
 });
 
-it('slides a side sheet in from either edge, and is a pane from expanded when asked', function () {
+it('slides a side sheet in from either edge', function () {
     expect((string) $this->blade('<x-drawer title="Details" with-close-button>Body</x-drawer>'))
         ->toContain('x-trap.inert.noscroll="open && ! wide"')
-        ->toContain('end-0 medium:rounded-s-corner-lg')
-        ->toContain('bg-surface-container-low')
+        ->toContain('data-md-side="end"')
+        ->toContain('data-md-drawer-sheet')
         ->toContain('role="dialog"')
         ->toContain('aria-label="Close"')
-        ->and((string) $this->blade('<x-drawer side="start">Body</x-drawer>'))->toContain('start-0 medium:rounded-e-corner-lg')
-        ->and((string) $this->blade('<x-drawer pane pane-width="28rem">Body</x-drawer>'))
-        ->toContain('data-pane')
-        ->toContain('--pane-width: 28rem')
-        ->toContain("matchMedia('(width >= 52.5rem)')");
+        ->and((string) $this->blade('<x-drawer side="start">Body</x-drawer>'))->toContain('data-md-side="start"');
 });
 
 it('draws a modal bottom sheet with a drag handle, or a standard one without a scrim', function () {
@@ -234,24 +220,37 @@ it('is M3\'s standard side sheet from expanded, and the modal one below', functi
     $html = (string) $this->blade('<x-drawer standard title="Filters">Body</x-drawer>');
 
     expect($html)
-        ->toContain('data-standard')
-        ->toContain('expanded:sticky expanded:top-0 expanded:h-dvh expanded:shrink-0 expanded:self-start')
-        ->toContain('expanded:relative expanded:top-0 expanded:z-auto expanded:h-full expanded:rounded-corner-none expanded:bg-surface expanded:shadow-none')
-        ->toContain('expanded:border-s expanded:border-outline-variant')
+        ->toContain('data-md-standard')
         ->toContain('--sheet-width: min(25rem, 25rem)')
         ->toContain("matchMedia('(width >= 52.5rem)')")
         ->toContain('x-trap.inert.noscroll="open && ! wide"')
-        ->toContain('bg-scrim/32 expanded:hidden')
         ->toContain('aria-label="Close"')
         ->and((string) $this->blade('<x-drawer standard side="start" width="30rem">Body</x-drawer>'))
-        ->toContain('expanded:border-e expanded:border-outline-variant')
+        ->toContain('data-md-side="start"')
         ->toContain('--sheet-width: min(30rem, 25rem)')
-        ->and((string) $this->blade('<x-drawer standard pane>Body</x-drawer>'))
-        ->toContain('data-pane')
-        ->not->toContain('data-standard')
         ->and((string) $this->blade('<x-drawer title="Filters">Body</x-drawer>'))
-        ->not->toContain('data-standard')
-        ->not->toContain('expanded:hidden');
+        ->not->toContain('data-md-standard');
+
+    expect(File::get(__DIR__.'/../../../resources/css/components/drawer.css'))
+        ->toContain('[data-md-drawer][data-md-standard]')
+        ->toContain('[data-md-drawer][data-md-standard][data-md-drawer-collapsed]')
+        ->toContain('[data-md-drawer][data-md-standard] [data-md-drawer-sheet][data-md-side=\'end\']')
+        ->toContain('[data-md-drawer][data-md-standard] [data-md-drawer-sheet][data-md-side=\'start\']')
+        ->toContain('box-shadow: none;');
+});
+
+it('draws the drawer from a stylesheet imported from the containment block, with the pane prop gone', function () {
+    $view = File::get(__DIR__.'/../../../resources/views/components/drawer.blade.php');
+
+    expect($view)
+        ->not->toContain("'pane'")
+        ->not->toContain('paneWidth')
+        ->not->toContain('paneCloseOnEscape')
+        ->not->toContain('pane-width')
+        ->not->toContain('pane-close-on-escape')
+        ->not->toContain('data-pane')
+        ->and(File::get(__DIR__.'/../../../resources/css/components.css'))
+        ->toContain("@import './components/drawer.css';");
 });
 
 it('gives a bottom sheet M3\'s preset heights, cycled from the drag handle', function () {