From 406f3a0e81b14bb3ee040738d8ec42a7c2ebff55 Mon Sep 17 00:00:00 2001
From: Cory LaViska <cory@abeautifulsite.net>
Date: Tue, 19 Aug 2025 17:10:15 -0400
Subject: [PATCH] Allow the slider's thumb to receive focus when tapping or
 dragging (#1337)

* fix paths and imports; closes #1303

* allow slider thumb to receive focus on tap; fixes #1312
---
 packages/webawesome/custom-elements-manifest.js      | 4 ++++
 packages/webawesome/docs/docs/resources/changelog.md | 2 ++
 packages/webawesome/src/components/slider/slider.css | 2 ++
 packages/webawesome/src/internal/drag.ts             | 5 ++---
 4 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/packages/webawesome/custom-elements-manifest.js b/packages/webawesome/custom-elements-manifest.js
index 6588d92f6..c58530abd 100644
--- a/packages/webawesome/custom-elements-manifest.js
+++ b/packages/webawesome/custom-elements-manifest.js
@@ -182,6 +182,10 @@ export default {
     jsxTypesPlugin({
       fileName: 'custom-elements-jsx.d.ts',
       outdir,
+      defaultExport: true,
+      componentTypePath: (_name, _tag, modulePath) => {
+        return `./${modulePath}`;
+      },
     }),
 
     //
diff --git a/packages/webawesome/docs/docs/resources/changelog.md b/packages/webawesome/docs/docs/resources/changelog.md
index 7344630ff..3dd1b6e9d 100644
--- a/packages/webawesome/docs/docs/resources/changelog.md
+++ b/packages/webawesome/docs/docs/resources/changelog.md
@@ -22,6 +22,8 @@ Components with the <wa-badge variant="warning">Experimental</wa-badge> badge sh
 - Fixed a bug in `<wa-dropdown>` that prevented keyboard selection of items when nested in shadow roots [issue:1270]
 - Fixed a bug in `<wa-dropdown>` that prevented items passed in from slots from being detected [issue:1271]
 - Fixed a bug in JSX typings that prevented the types file from being exported [pr:1295]
+- Fixed a bug in JSX typings that generated the incorrect component imports [issue:1303]
+- Fixed a bug in `<wa-slider>` that prevented the thumb from receiving focus when clicking/tapping [issue:1312]
 
 ## 3.0.0-beta.4
 
diff --git a/packages/webawesome/src/components/slider/slider.css b/packages/webawesome/src/components/slider/slider.css
index f0ee323ac..efb206130 100644
--- a/packages/webawesome/src/components/slider/slider.css
+++ b/packages/webawesome/src/components/slider/slider.css
@@ -33,6 +33,8 @@
 }
 
 #slider {
+  touch-action: none;
+
   &:focus {
     outline: none;
   }
diff --git a/packages/webawesome/src/internal/drag.ts b/packages/webawesome/src/internal/drag.ts
index 0b7ae61e9..a1fe23e4b 100644
--- a/packages/webawesome/src/internal/drag.ts
+++ b/packages/webawesome/src/internal/drag.ts
@@ -55,6 +55,8 @@ const supportsTouch = typeof window !== 'undefined' && 'ontouchstart' in window;
  * Drag functionality will be enabled as soon as the constructor is called. A `start()` and `stop()` method can be used
  * to start and stop it, if needed.
  *
+ * Use `touch-action: none` on touch devices if scrolling occurs while dragging. Avoid preventing the touchstart event!
+ *
  * @usage
  *
  * const draggable = new DraggableElement(element, {
@@ -85,9 +87,6 @@ export class DraggableElement {
     const clientX = supportsTouch && 'touches' in event ? event.touches[0].clientX : (event as PointerEvent).clientX;
     const clientY = supportsTouch && 'touches' in event ? event.touches[0].clientY : (event as PointerEvent).clientY;
 
-    // Prevent scrolling while dragging
-    event.preventDefault();
-
     if (
       this.isDragging ||
       // Prevent right-clicks from triggering drags