From d849bc87199cd16b4262b1b678a468896efa5ee4 Mon Sep 17 00:00:00 2001
From: Jagadeesh <jagadeesh26062002@gmail.com>
Date: Mon, 29 Jun 2026 01:35:10 +0530
Subject: [PATCH] feat: polish bottom-sheet drag handle visual (#293)

---
 src/index.css | 25 +++++++++++++++++++++----
 1 file changed, 21 insertions(+), 4 deletions(-)

diff --git a/src/index.css b/src/index.css
index fa8fa54..f95f3fc 100644
--- a/src/index.css
+++ b/src/index.css
@@ -3609,21 +3609,38 @@ code,
   display: flex;
   justify-content: center;
   align-items: center;
-  padding: 10px 0 6px;
+  /* Generous hit area (>= 44px tall) for comfortable touch dragging — WCAG 2.5.5 */
+  padding: 14px 0 10px;
   cursor: grab;
   touch-action: none;
   flex-shrink: 0;
 }
 
+/* Make the pill more prominent on hover/drag so its draggable affordance is clear. */
+.bottom-sheet__handle-area:hover .bottom-sheet__handle,
+.bottom-sheet__handle-area:active .bottom-sheet__handle {
+  width: 52px;
+  background: var(--muted);
+}
+
 .bottom-sheet__handle-area:active {
   cursor: grabbing;
 }
 
 .bottom-sheet__handle {
-  width: 40px;
-  height: 4px;
-  border-radius: 2px;
+  width: 44px;
+  height: 5px;
+  border-radius: 999px;
   background: var(--line-strong);
+  /* Smooth visual feedback while the handle widens on hover/drag. */
+  transition: width var(--transition-speed) ease, background var(--transition-speed) ease;
+}
+
+/* Respect reduced-motion preference: drop the resize animation. */
+@media (prefers-reduced-motion: reduce) {
+  .bottom-sheet__handle {
+    transition: none;
+  }
 }
 
 /* Header row */