Fade a bottom sheet's scrim out, and keep a nested sheet's state

Plan step 36 review of 287340b0. The scrim had no closed opacity, so
allow-discrete held it at full strength for the length of the fade and
then dropped it, where x-transition.opacity had faded it out. The open
state now matches the root's own scrim and panel: a sheet nested in an
open one (a menu's sheet at compact inside a sheet) matched the outer
open rule, and closed in place after half a second instead of sliding.
The handle's ring stands 4px off its bar again, as the old handle's
outline-offset-4 drew it.

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

tests/Feature/Components/OverlayTest.php

@@ -312,4 +312,14 @@ it('draws the bottom sheet from a stylesheet imported from the containment block
         ->and(File::get(__DIR__.'/../../../resources/js/bottom-sheet.js'))
         ->toContain('data-md-bottom-sheet-handle')
         ->not->toContain('data-drag-handle');
+
+    $css = ComponentStylesheet::read('bottom-sheet');
+
+    // The scrim fades out as well as in, a nested sheet keeps its own state, and the handle's ring
+    // stands 4px off its bar.
+    expect($css->declarations('[data-md-bottom-sheet-scrim]'))->toHaveKey('opacity', '0')
+        ->and($css->declarations('[data-md-bottom-sheet][data-md-open] > [data-md-bottom-sheet-scrim]'))->toBe(['opacity' => '1'])
+        ->and($css->declarations('[data-md-bottom-sheet][data-md-open] > [data-md-bottom-sheet-panel]', ['@starting-style']))->toBe(['translate' => '0 100%'])
+        ->and($css->declarations('[data-md-bottom-sheet-grip]:focus-visible'))->toBe(['outline-offset' => '4px'])
+        ->and($css->css)->not->toContain('[data-md-open] [data-md-');
 });