From f02fa1a78d6cda2eeb6249d96295941089dd1c8c Mon Sep 17 00:00:00 2001
From: Andreas Reinhold / reini <reini@kadenpartner.ch>
Date: Mon, 14 Sep 2026 05:53:46 +0200
Subject: [PATCH] Give the bottom sheet's drag handle a 48dp target
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Plan step 12, containment.md C-01. The handle button was 32x4px: the
padding that makes M3's 48dp hit target sat on the wrapper, which is not
the control. `touch-target` on the button and 22px above and below it —
SheetDefaults.kt's DragHandleVerticalPadding — make the pressed area
48x48 while the handle is still drawn 32x4.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9
---
 resources/views/components/bottom-sheet.blade.php | 10 +++++++---
 tests/Feature/Components/OverlayTest.php          |  2 ++
 2 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/resources/views/components/bottom-sheet.blade.php b/resources/views/components/bottom-sheet.blade.php
index c0847572..428e8510 100644
--- a/resources/views/components/bottom-sheet.blade.php
+++ b/resources/views/components/bottom-sheet.blade.php
@@ -9,7 +9,11 @@
      SheetBottomTokens (androidx Compose Material 3, Apache-2.0): surface-container-low, extra-large
      top corners, elevation 1, a 32×4px drag handle in on-surface-variant; 640px wide at most, centred
      on a wide screen; it rises on emphasized decelerate. `title` and `actions` as on a dialog.
-     `height` caps it (default: 90% of the screen); content scrolls inside. --}}
+     `height` caps it (default: 90% of the screen); content scrolls inside.
+
+     The handle is drawn 32×4px and pressed 48×48: `touch-target` on the button and 22px above and
+     below it, which is M3's "drag handle has an accessible 48dp hit target" and SheetDefaults.kt's
+     `DragHandleVerticalPadding = 22.dp` (docs/reference/m3/components-actions-communication-containment.md § Bottom sheets → Specs). --}}
 
 @props([
     'title' => null,
@@ -56,8 +60,8 @@
             $attributes->get('class'),
         ]) }}
     >
-        <div class="flex shrink-0 cursor-grab justify-center py-4 active:cursor-grabbing" data-drag-handle>
-            <button type="button" class="h-1 w-8 rounded-corner-full bg-on-surface-variant/40 outline-offset-4 focus-visible:outline-3 focus-visible:outline-secondary" aria-label="{{ __('Close') }}" x-on:click="close()"></button>
+        <div class="flex shrink-0 cursor-grab justify-center py-5.5 active:cursor-grabbing" data-drag-handle>
+            <button type="button" class="touch-target h-1 w-8 rounded-corner-full bg-on-surface-variant/40 outline-offset-4 focus-visible:outline-3 focus-visible:outline-secondary" aria-label="{{ __('Close') }}" x-on:click="close()"></button>
         </div>
 
         <div x-ref="body" class="min-h-0 flex-1 overflow-y-auto px-6 pb-6">
diff --git a/tests/Feature/Components/OverlayTest.php b/tests/Feature/Components/OverlayTest.php
index 6e20420b..325f477d 100644
--- a/tests/Feature/Components/OverlayTest.php
+++ b/tests/Feature/Components/OverlayTest.php
@@ -86,6 +86,8 @@ it('draws a modal bottom sheet with a drag handle, or a standard one without a s
         ->toContain('rounded-t-corner-xl bg-surface-container-low')
         ->toContain('data-drag-handle')
         ->toContain('aria-modal="true"')
+        ->toContain('py-5.5')
+        ->toContain('touch-target h-1 w-8')
         ->and((string) $this->blade('<x-bottom-sheet standard>Body</x-bottom-sheet>'))
         ->toContain('...materialBottomSheet(true)')
         ->not->toContain('bg-scrim/32')