@leavepulse/ui 0.93.2 → 0.94.0

package/README.md

@@ -9,7 +9,7 @@ JSON token sets), and a composable block-layout canvas.
 - [Install](#install) and [Usage](#usage)
 - [Configuration](#configuration): theme, labels and languages, icons, Nuxt, overlays and Back, prop check, WebKitGTK glass, scrollbars
 - [Components](#components): every component by group, with what it is for
-- [Guides](#guides): linked views, workspaces, forms, tables, clipboard, video, command palette
+- [Guides](#guides): linked views, workspaces, forms, tables, clipboard, video, gestures and sideways rows, command palette
 - [Develop](#develop) and [Releasing](#releasing)
 
 ## Install
@@ -289,7 +289,7 @@ from the comment that opens the component.
 
 <!-- catalogue:start -->
 
-142 components. The preview (`bun run dev`) shows each one live, with its props, events and slots.
+143 components. The preview (`bun run dev`) shows each one live, with its props, events and slots.
 
 <details>
 <summary><b>Basics</b> (24)</summary>
@@ -389,7 +389,7 @@ from the comment that opens the component.
 </details>
 
 <details>
-<summary><b>Navigation</b> (15)</summary>
+<summary><b>Navigation</b> (16)</summary>
 
 - `LpActionBar`: A bar that rises from the bottom of the window to ask for one decision, then leaves.
 - `LpBreadcrumbs`: Where the page sits in the app, as a trail of links.
@@ -402,6 +402,7 @@ from the comment that opens the component.
 - `LpPalettePreview`: The body of LpCommandPalette's `#preview` slot.
 - `LpPaletteStats`: A few figures in a palette preview, as tiles: mods and worlds in an instance, downloads and follows of a project, members online.
 - `LpPaletteSwatches`: A theme's colours as a strip of swatches on its own surface, for a palette preview of a theme picker: the row says the name, this shows what picking it would look like.
+- `LpScrollStrip`: A row that scrolls sideways and can be reached with any input: tabs, chips, branch pills, a filmstrip.
 - `LpSidebar`: App-shell side navigation.
 - `LpStepper`: The steps of a flow, with where the person is and which are done.
 - `LpTableOfContents`: On-this-page table of contents with scroll-spy.
@@ -621,6 +622,55 @@ if (await canTranscodeVideo()) {
 Re-encoding never raises the bitrate above the source's, and the sound is kept
 (AAC, or Opus where the browser has no AAC encoder).
 
+### Gestures and sideways rows
+
+Every drag, swipe, pinch and long press in the kit runs on one engine, so they
+draw the line in the same place: a press becomes a drag past the slop (8 px for
+a finger, 4 for a mouse), nothing is captured or prevented before that (a click
+on what is under it still lands), a drag swallows the click it ends with,
+velocity is read over the last 100 ms, and a pointer the browser takes back, a
+second finger or Escape ends it as `cancelled`.
+
+```ts
+import { useGesture, shouldDismiss } from "@leavepulse/ui"
+
+const card = ref<HTMLElement | null>(null)
+const x = ref(0)
+useGesture(card, {
+  axis: "x", // a press that starts vertical is let go, so the page scrolls
+  onDrag: ({ movement }) => (x.value = movement.x),
+  onDragEnd: ({ movement, velocity, cancelled }) => {
+    const away = !cancelled && shouldDismiss({ offset: movement.x, velocity: velocity.x, size: 320 })
+    x.value = away ? 400 : 0
+  },
+})
+```
+
+- `createGesture(options)` returns the handlers to bind yourself, for an element
+  that composes them with others. `onPinch`, `longPress`, `onTap` and `onSwipe`
+  sit beside the drag callbacks.
+- `pageAfterSwipe` and `rubberClamp` make "swipe between items", `glide` coasts
+  after a fling, and `createDragSession` makes the same decisions from touch
+  events where pointer events cannot be used (a pull from the screen edge must
+  stop the page scrolling mid-gesture).
+- An element dragged by finger needs `touch-action` that leaves it the gesture
+  (`touch-pan-y` for a sideways one inside a page that scrolls), or the browser
+  takes the touch and the drag ends cancelled.
+- Side drawers use it both ways: a pull from within `edgeSize` (72 px) of the
+  edge opens one, with the panel's edge under the finger; a swipe on the panel or
+  on the scrim closes it. Both complete past a share of the panel or on a flick
+  and spring back otherwise.
+
+`LpScrollStrip` is the row that scrolls sideways (tabs, chips, branch pills, a
+filmstrip) with its scrollbar hidden and still reachable with a mouse: a
+vertical wheel scrolls it while it can move that way and hands back to the page
+at either end, a mouse or pen drags it, the clipped edges fade, a hover shows
+previous and next buttons, and the focused item is scrolled into view within
+the row only. Touch keeps native scrolling and scroll snap. `useScrollStrip(el)`
+gives an existing scroller the same behaviour. LpTabs uses it for a row wider
+than its box; a mouse there picks a tab on click rather than on press, so a
+drag across the row does not pick the tab it started on.
+
 ### Contextual command palette
 
 Wrap the application (or a page and its palette) in `LpCommandScope`. Nested

package/dist/assets/LpTabs-D7EyG21l.css

@@ -0,0 +1,18 @@
+
+.lp-tab-badge-enter-active[data-v-43a45129],
+.lp-tab-badge-leave-active[data-v-43a45129] {
+  transition:
+    opacity var(--duration-fast) var(--ease-emphasized),
+    transform var(--duration-fast) var(--ease-emphasized);
+}
+.lp-tab-badge-enter-from[data-v-43a45129],
+.lp-tab-badge-leave-to[data-v-43a45129] {
+  opacity: 0;
+  transform: scale(0.6);
+}
+@media (prefers-reduced-motion: reduce) {
+.lp-tab-badge-enter-active[data-v-43a45129],
+  .lp-tab-badge-leave-active[data-v-43a45129] {
+    transition: none;
+}
+}

package/dist/assets/LpVideoTrim-D8JDg9Qn.css

@@ -0,0 +1,8 @@
+
+.lp-trim-still-in[data-v-5ee84a84] >  canvas:not([data-lp-stand-in]) {
+  animation: lp-trim-still-5ee84a84 var(--duration-medium) var(--ease-emphasized);
+}
+@keyframes lp-trim-still-5ee84a84 {
+from { opacity: 0;
+}
+}

package/dist/chunks/AppShellContextNav-BoH4ffnC.js

@@ -0,0 +1,54 @@
+import { defineComponent, openBlock, createBlock, withCtx, createElementBlock, Fragment, renderList, resolveDynamicComponent, mergeProps, createTextVNode, toDisplayString } from "vue";
+import { useLinkComponent } from "../composables/useLpConfig.js";
+import { resolveLink } from "../components/link.js";
+import { _ as _sfc_main$1 } from "./LpScrollStrip-D4tsOfAQ.js";
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "AppShellContextNav",
+  props: {
+    items: {},
+    isActive: { type: Function },
+    label: {}
+  },
+  emits: ["select"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const linkComponent = useLinkComponent();
+    function rowOf(item) {
+      const link = item.disabled ? null : resolveLink(linkComponent.value, { to: item.to, href: item.href });
+      return link ?? { is: "button", props: { type: "button", disabled: item.disabled || void 0 } };
+    }
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(_sfc_main$1, {
+        as: "nav",
+        "aria-label": props.label,
+        class: "shrink-0 border-b border-line bg-surface",
+        "content-class": "gap-1 px-4 py-1.5"
+      }, {
+        default: withCtx(() => [
+          (openBlock(true), createElementBlock(Fragment, null, renderList(__props.items, (item) => {
+            return openBlock(), createBlock(resolveDynamicComponent(rowOf(item).is), mergeProps({
+              key: item.id
+            }, { ref_for: true }, rowOf(item).props, {
+              "aria-current": __props.isActive(item) ? "page" : void 0,
+              class: [
+                "shrink-0 rounded-control px-2.5 py-1 text-sm font-medium outline-none transition-colors duration-[var(--duration-fast)] focus-visible:ring-2 focus-visible:ring-ring",
+                item.disabled ? "cursor-not-allowed opacity-45" : __props.isActive(item) ? "bg-surface-soft text-ink" : "text-muted hover:text-ink"
+              ],
+              onClick: ($event) => emit("select", item)
+            }), {
+              default: withCtx(() => [
+                createTextVNode(toDisplayString(item.label), 1)
+              ]),
+              _: 2
+            }, 1040, ["aria-current", "class", "onClick"]);
+          }), 128))
+        ]),
+        _: 1
+      }, 8, ["aria-label"]);
+    };
+  }
+});
+export {
+  _sfc_main as _
+};

package/dist/chunks/{LpAppShell-BWaVRsDB.js → LpAppShell-xEBmGV78.js}

@@ -1,10 +1,11 @@
-import { defineComponent, computed, useModel, ref, useId, onMounted, watch, nextTick, onBeforeUnmount, useSlots, openBlock, createElementBlock, mergeProps, unref, createElementVNode, withModifiers, toDisplayString, normalizeClass, createVNode, createSlots, withCtx, renderSlot, normalizeProps, guardReactiveProps, normalizeStyle, createCommentVNode, withDirectives, vShow, createBlock, Teleport, mergeModels } from "vue";
+import { defineComponent, ref, computed, useModel, useId, onMounted, watch, nextTick, onBeforeUnmount, useSlots, openBlock, createElementBlock, mergeProps, unref, createElementVNode, withModifiers, toDisplayString, normalizeClass, createVNode, createSlots, withCtx, renderSlot, normalizeProps, guardReactiveProps, normalizeStyle, createCommentVNode, withDirectives, vShow, createBlock, Teleport, mergeModels } from "vue";
 import { prefersReducedMotion, easingToken, durationToken } from "../composables/easing.js";
 import { useLabels } from "../composables/useLpConfig.js";
 import { useResizeObserver } from "../composables/useResizeObserver.js";
 import { useScrollMemory } from "../composables/scrollMemory.js";
+import { useScrollStrip } from "../composables/useScrollStrip.js";
 import { useView, viewWindow } from "../composables/useView.js";
-import { _ as _sfc_main$6 } from "./AppShellContextNav-C6Ho2mof.js";
+import { _ as _sfc_main$6 } from "./AppShellContextNav-BoH4ffnC.js";
 import { DENSITY_CLASS, resolveNavMode, NAV_BREAKPOINT_PX, contextNavItems, headerCollapsedAfter } from "../components/appShell.js";
 import { _ as _sfc_main$9 } from "./LpBottomNav-9AqvZlRW.js";
 import { _ as _sfc_main$2 } from "./LpContextSwitcher-COw6GHPW.js";
@@ -13,7 +14,7 @@ import { _ as _sfc_main$4 } from "./LpIcon-CxHFPwKt.js";
 import { _ as _sfc_main$8 } from "./LpPageScrollbar-C9sTeU-2.js";
 import { _ as _sfc_main$7 } from "./LpScrollArea-CqvwfZs2.js";
 import { _ as _sfc_main$5 } from "./LpShift-DAgS_d2x.js";
-import { _ as _sfc_main$1 } from "./LpSidebar-DQtCYlT4.js";
+import { _ as _sfc_main$1 } from "./LpSidebar-BIhusppV.js";
 import { mergeClass, useMergedAttrs } from "../composables/useMergedClass.js";
 import { nodeWindow, isHTMLElement } from "../composables/realm.js";
 const _hoisted_1 = ["href"];
@@ -69,6 +70,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
   emits: /* @__PURE__ */ mergeModels(["update:modelValue", "update:collapsed", "select", "update:compact", "update:pinned", "update:context", "nav-mode"], ["update:open"]),
   setup(__props, { expose: __expose, emit: __emit }) {
     const BACK_TO_TOP_AFTER_PX = 600;
+    const headerActions = ref(null);
+    const actionStrip = useScrollStrip(() => headerActions.value?.$el);
     const props = __props;
     const emit = __emit;
     const switching = computed(() => (props.contexts?.length ?? 0) > 1);
@@ -478,16 +481,20 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
               _: 3
             }),
             createVNode(_sfc_main$5, {
+              ref_key: "headerActions",
+              ref: headerActions,
               axis: "width",
               anchor: "end",
               presence: "",
-              class: "ml-auto flex max-w-[66%] shrink items-center gap-2 overflow-x-auto lp-scrollbar-none md:max-w-none md:shrink-0 md:overflow-visible"
+              class: "lp-strip-fade ml-auto flex max-w-[66%] shrink items-center gap-2 overflow-x-auto lp-scrollbar-none md:max-w-none md:shrink-0 md:overflow-visible",
+              "data-lp-more-start": unref(actionStrip).overflowing.value && !unref(actionStrip).atStart.value ? "" : void 0,
+              "data-lp-more-end": unref(actionStrip).overflowing.value && !unref(actionStrip).atEnd.value ? "" : void 0
             }, {
               default: withCtx(() => [
                 renderSlot(_ctx.$slots, "header-actions")
               ]),
               _: 3
-            })
+            }, 8, ["data-lp-more-start", "data-lp-more-end"])
           ], 38),
           contextVisible.value ? renderSlot(_ctx.$slots, "context-nav", {
             key: 0,

package/dist/chunks/{LpDateRangePicker-CAn2yGbn.js → LpDateRangePicker-DRBB8z6t.js}

@@ -6,7 +6,7 @@ import { useLabels } from "../composables/useLpConfig.js";
 import { useMediaQuery } from "../composables/useMediaQuery.js";
 import { normalizeRange, formatRange, defaultRangePresets, sameRange, allowedRange } from "../components/dateRange.js";
 import { _ as _sfc_main$2 } from "./PickerField-DzF3UVnX.js";
-import { _ as _sfc_main$3 } from "./LpRangeCalendar-C9gkNMYw.js";
+import { _ as _sfc_main$3 } from "./LpRangeCalendar-9BvaLZji.js";
 const __default__ = { inheritAttrs: false };
 const _sfc_main = /* @__PURE__ */ defineComponent({
   ...__default__,

package/dist/chunks/{LpDrawer-iRHwJOGn.js → LpDrawer-BkWjFdV0.js}

@@ -11,6 +11,8 @@ import { _ as _sfc_main$1 } from "./LpIcon-CxHFPwKt.js";
 import { _ as _sfc_main$2 } from "./LpScrollArea-CqvwfZs2.js";
 import { useModalLayer, anyModalOpen } from "../components/modalDepth.js";
 import { startPointerDrag } from "../composables/pointerDrag.js";
+import { createDragSession, TOUCH_SLOP, shouldDismiss, rubberBand } from "../composables/gesture.js";
+import { createGesture } from "../composables/useGesture.js";
 import { useView, viewDocument, usePortalTarget, useOutsideGuard, viewWindow } from "../composables/useView.js";
 import { clamp } from "../composables/clamp.js";
 import { nodeWindow, isElement } from "../composables/realm.js";
@@ -43,7 +45,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     noDragContent: { type: Boolean },
     edgeOpen: { type: Boolean },
     edgeBreakpoint: {},
-    edgeSize: { default: 44 },
+    edgeSize: { default: 72 },
     edgeOpenThreshold: { default: 0.3 },
     resizable: { type: Boolean },
     minSize: { default: "22rem" },
@@ -168,10 +170,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       mounted: tagNoDrag,
       updated: tagNoDrag
     };
-    const EDGE_SLOP = 10;
-    const FLICK_SPEED = 0.45;
     const BREAKPOINT_PX = { sm: 640, md: 768, lg: 1024, xl: 1280 };
-    const EDGE_IGNORE = "input, textarea, select, [contenteditable=''], [contenteditable='true'], [data-vaul-no-drag], [data-lp-no-edge-pull]";
+    const EDGE_IGNORE = "input, textarea, select, [contenteditable=''], [contenteditable='true'], div[data-vaul-no-drag], [data-lp-no-edge-pull]";
     const peek = ref(0);
     const peeking = ref(false);
     const handingOff = ref(false);
@@ -179,7 +179,10 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     watch(
       () => props.open,
       (open) => {
-        if (open) return;
+        if (open) {
+          shut.value = 0;
+          return;
+        }
         skipOpenSlide.value = false;
         endResize?.();
       }
@@ -200,16 +203,16 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     }
     let track = null;
     const owner = /* @__PURE__ */ Symbol("edge-pull");
-    function scrollsWithPull(target) {
+    function scrollsWithPull(target, towardOpen) {
       let el = isElement(target) ? target : null;
-      const pullsRight = dir.value === "left";
+      const right = dir.value === "left" === towardOpen;
       const body = el?.ownerDocument.body;
       while (el && el !== body) {
         if (el.closest(EDGE_IGNORE) === el) return true;
         if (el.scrollWidth > el.clientWidth) {
           const overflow = nodeWindow(el).getComputedStyle(el).overflowX;
           if (overflow === "auto" || overflow === "scroll") {
-            if (pullsRight ? el.scrollLeft > 0 : el.scrollLeft + el.clientWidth < el.scrollWidth) return true;
+            if (right ? el.scrollLeft > 0 : el.scrollLeft + el.clientWidth < el.scrollWidth) return true;
           }
         }
         el = el.parentElement;
@@ -219,26 +222,25 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     function inward(x) {
       return dir.value === "right" ? edgeWindow().innerWidth - x : x;
     }
+    const opening = (x) => dir.value === "right" ? -x : x;
     function onTouchStart(e) {
       if (track) dropTrack();
       if (e.touches.length !== 1 || !edgeEnabled() || anyModalOpen() || edgeOwner.value) return;
       const t = e.touches[0];
-      if (inward(t.clientX) > props.edgeSize || scrollsWithPull(e.target)) return;
-      track = { id: t.identifier, x: t.clientX, y: t.clientY, t: e.timeStamp, lastX: t.clientX, lastT: e.timeStamp, speed: 0 };
+      if (inward(t.clientX) > props.edgeSize || scrollsWithPull(e.target, true)) return;
+      track = { id: t.identifier, session: createDragSession({ x: t.clientX, y: t.clientY }, e.timeStamp, { slop: TOUCH_SLOP, axis: "x" }) };
     }
     function onTouchMove(e) {
       if (!track) return;
       const t = Array.from(e.changedTouches).find((x) => x.identifier === track.id);
       if (!t) return;
-      const sign = dir.value === "right" ? -1 : 1;
-      const dx = (t.clientX - track.x) * sign;
-      const dy = t.clientY - track.y;
-      if (!peeking.value) {
-        if (Math.abs(dy) > EDGE_SLOP && Math.abs(dy) > Math.abs(dx)) {
-          track = null;
-          return;
-        }
-        if (dx < EDGE_SLOP || Math.abs(dx) < Math.abs(dy)) return;
+      const frame = track.session.move({ x: t.clientX, y: t.clientY }, e.timeStamp);
+      if (frame.phase === "rejected" || frame.first && opening(frame.movement.x) <= 0) {
+        dropTrack();
+        return;
+      }
+      if (frame.phase !== "drag") return;
+      if (frame.first) {
         if (edgeOwner.value && edgeOwner.value !== owner) {
           track = null;
           return;
@@ -247,10 +249,6 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         peeking.value = true;
       }
       if (e.cancelable) e.preventDefault();
-      const dt = e.timeStamp - track.lastT;
-      if (dt > 0) track.speed = (t.clientX - track.lastX) * sign / dt * 0.6 + track.speed * 0.4;
-      track.lastX = t.clientX;
-      track.lastT = e.timeStamp;
       peek.value = clamp(inward(t.clientX) / panelPx(), 0, 1);
     }
     function dropTrack() {
@@ -263,12 +261,15 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       peeking.value = false;
       peek.value = 0;
     }
-    function settle() {
-      const flick = track !== null && track.speed > FLICK_SPEED && peek.value > 0.05;
+    function settle(e) {
+      const t = track && Array.from(e.changedTouches).find((x) => x.identifier === track.id);
+      const end = track && t ? track.session.end({ x: t.clientX, y: t.clientY }, e.timeStamp) : null;
       dropTrack();
       if (!peeking.value) return;
       peeking.value = false;
-      if (peek.value >= props.edgeOpenThreshold || flick) {
+      const size = panelPx();
+      const opens = !!end && shouldDismiss({ offset: peek.value * size, velocity: opening(end.velocity.x), size, ratio: props.edgeOpenThreshold });
+      if (opens) {
         peek.value = 1;
         handingOff.value = true;
         skipOpenSlide.value = true;
@@ -287,6 +288,44 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         peek.value = 0;
       }
     }
+    const shut = ref(0);
+    const shutting = ref(false);
+    const closeSwipe = {
+      pointerTypes: ["touch", "pen"],
+      axis: "x",
+      ignore: EDGE_IGNORE,
+      enabled: () => !!props.open && isHorizontal.value && props.dismissible && !guarded.value && !handingOff.value,
+      onPress: (e) => !scrollsWithPull(e.target, false),
+      onDragStart: () => shutting.value = true,
+      onDrag: ({ movement }) => {
+        const toward = -opening(movement.x);
+        shut.value = toward >= 0 ? toward : rubberBand(toward, panelPx(), 0.2);
+      },
+      onDragEnd: ({ velocity, cancelled }) => {
+        shutting.value = false;
+        const size = panelPx();
+        if (!cancelled && shouldDismiss({ offset: shut.value, velocity: -opening(velocity.x), size, ratio: props.closeThreshold ?? 0.25 })) {
+          emit("update:open", false);
+          return;
+        }
+        shut.value = 0;
+      }
+    };
+    const panelSwipe = createGesture(closeSwipe);
+    const scrimSwipe = createGesture(closeSwipe);
+    onBeforeUnmount(() => {
+      panelSwipe.dispose();
+      scrimSwipe.dispose();
+    });
+    const shutStyle = computed(() => {
+      if (!shut.value && !shutting.value) return void 0;
+      const px = dir.value === "right" ? shut.value : -shut.value;
+      return { transform: `translate3d(${px}px, 0, 0)`, transition: shutting.value ? "none" : void 0 };
+    });
+    const scrimStyle = computed(() => {
+      if (!shut.value && !shutting.value) return void 0;
+      return { opacity: clamp(1 - shut.value / Math.max(1, panelPx()), 0, 1), transition: shutting.value ? "none" : "opacity 0.5s cubic-bezier(0.32, 0.72, 0, 1)" };
+    });
     const timers = [];
     onBeforeUnmount(() => {
       for (const id of timers) window.clearTimeout(id);
@@ -294,7 +333,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     });
     function onTouchEnd(e) {
       if (track && !Array.from(e.changedTouches).some((x) => x.identifier === track.id)) return;
-      settle();
+      settle(e);
     }
     if (typeof document !== "undefined") {
       watch(
@@ -302,16 +341,16 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         (on, _, onCleanup) => {
           if (!on) return;
           const doc = viewDocument(view.value);
-          const passive = { passive: true };
+          const passive = { passive: true, capture: true };
           doc.addEventListener("touchstart", onTouchStart, passive);
-          doc.addEventListener("touchmove", onTouchMove, { passive: false });
+          doc.addEventListener("touchmove", onTouchMove, { passive: false, capture: true });
           doc.addEventListener("touchend", onTouchEnd, passive);
           doc.addEventListener("touchcancel", cancelPull, passive);
           onCleanup(() => {
-            doc.removeEventListener("touchstart", onTouchStart);
-            doc.removeEventListener("touchmove", onTouchMove);
-            doc.removeEventListener("touchend", onTouchEnd);
-            doc.removeEventListener("touchcancel", cancelPull);
+            doc.removeEventListener("touchstart", onTouchStart, true);
+            doc.removeEventListener("touchmove", onTouchMove, true);
+            doc.removeEventListener("touchend", onTouchEnd, true);
+            doc.removeEventListener("touchcancel", cancelPull, true);
             cancelPull();
           });
         },
@@ -365,7 +404,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           direction: dir.value,
           dismissible: __props.dismissible && !guarded.value,
           "snap-points": __props.snapPoints,
-          "handle-only": __props.handleOnly,
+          "handle-only": __props.handleOnly || isHorizontal.value,
           "should-scale-background": __props.scaleBackground,
           "close-threshold": __props.closeThreshold,
           "onUpdate:open": _cache[1] || (_cache[1] = (v) => emit("update:open", v))
@@ -373,19 +412,19 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           default: withCtx(() => [
             createVNode(unref(DrawerPortal), { to: unref(portalTo) }, {
               default: withCtx(() => [
-                createVNode(unref(DrawerOverlay), {
-                  style: normalizeStyle({ zIndex: unref(layer).scrim }),
+                createVNode(unref(DrawerOverlay), mergeProps(unref(scrimSwipe).handlers, {
+                  style: [{ zIndex: unref(layer).scrim }, scrimStyle.value],
                   onClick: _cache[0] || (_cache[0] = ($event) => guarded.value && requestClose()),
-                  class: normalizeClass(["lp-scrim fixed inset-0 z-(--z-overlay) data-[state=open]:animate-[fade-in_150ms_ease] data-[state=closed]:animate-[fade-out_130ms_ease]", { "lp-scrim--light": unref(frosted), "lp-scrim--nested": unref(layer).nested, "lp-scrim--covered": unref(layer).covered }])
-                }, null, 8, ["style", "class"]),
+                  class: ["lp-scrim fixed inset-0 z-(--z-overlay) touch-none data-[state=open]:animate-[fade-in_150ms_ease] data-[state=closed]:animate-[fade-out_130ms_ease]", { "lp-scrim--light": unref(frosted), "lp-scrim--nested": unref(layer).nested, "lp-scrim--covered": unref(layer).covered }]
+                }), null, 16, ["style", "class"]),
                 createVNode(unref(DrawerContent), mergeProps({
                   onInteractOutside: unref(guardOutside),
                   onEscapeKeyDown: unref(guardOutside),
                   ref_key: "contentRef",
                   ref: contentRef
-                }, __props.description ? {} : { "aria-describedby": void 0 }, {
+                }, { ...__props.description ? {} : { "aria-describedby": void 0 }, ...unref(panelSwipe).handlers }, {
                   class: contentClass.value,
-                  style: [sizeStyle.value, { zIndex: unref(layer).panel }],
+                  style: [sizeStyle.value, { zIndex: unref(layer).panel }, shutStyle.value],
                   "data-vaul-animate": handingOff.value || skipOpenSlide.value ? "false" : void 0,
                   onKeydown: withKeys(guardEscape, ["escape"])
                 }), {
@@ -452,7 +491,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                       }, 8, ["aria-label"])
                     ], 2)) : createCommentVNode("", true),
                     withDirectives((openBlock(), createElementBlock("div", {
-                      class: "flex min-h-0 min-w-0 flex-1 flex-col [-webkit-user-select:text]! [user-select:text]!",
+                      class: normalizeClass(["flex min-h-0 min-w-0 flex-1 flex-col [-webkit-user-select:text]! [user-select:text]!", isHorizontal.value ? "[&_[data-reka-scroll-area-viewport]]:touch-pan-y" : void 0]),
                       "data-vaul-no-drag": __props.noDragContent ? "" : void 0
                     }, [
                       createVNode(_sfc_main$2, {
@@ -464,7 +503,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                         ]),
                         _: 3
                       }, 8, ["content-class"])
-                    ], 8, _hoisted_3)), [
+                    ], 10, _hoisted_3)), [
                       [vNoDragControls, __props.noDragControls]
                     ]),
                     _ctx.$slots.footer ? (openBlock(), createElementBlock("footer", _hoisted_4, [