@surdeddd/bottom-sheet 0.14.0 → 0.20.0

package/README.md

@@ -552,6 +552,19 @@ The editorial demo showcases the adapters, every gesture, every mode
 (`bottom · top · left · right · overlay`), and live engine readouts (active
 snap, progress, velocity, FPS). EN/RU and light/dark toggles in the corner.
 
+## Right-to-left
+
+`left` and `right` are physical edges and stay physical. For interfaces that
+flip with the writing direction, use the logical modes — `start` and `end`
+resolve against the direction that applies to the sheet, so `start` is the left
+edge in English and the right edge in Arabic:
+
+```ts
+new BottomSheetEngine({ element, handle, mode: 'start', snapPoints });
+```
+
+[Full RTL docs →](docs/rtl.md)
+
 ## Browser support
 
 Baseline: Chrome/Edge 80, Safari 13.1 (iOS 13.4), Firefox 72 — set by the

package/dist/{BottomSheetCore-DJYwWOqt.d.ts → BottomSheetCore-Cgn8b_6A.d.ts}

@@ -2,6 +2,8 @@ import { T as TransformAxis } from './transform-jVfAikE9.js';
 
 type DragFrom$1 = "handle" | "sheet" | "zones";
 
+type LogicalAxis = "start" | "end";
+
 type SnapPoint = number | `${number}%` | "fit" | "content" | "full" | (string & {});
 type SnapPointDef<Id extends string = string> = {
     id: Id;
@@ -13,7 +15,9 @@ type SnapId<T extends readonly SnapPointDef<string>[] | {
 }> = T extends {
     snapPoints: readonly SnapPointDef<infer U>[];
 } ? U : T extends readonly SnapPointDef<infer U>[] ? U : never;
-type SheetMode = TransformAxis;
+type PhysicalSheetMode = TransformAxis;
+type LogicalSheetMode = LogicalAxis;
+type SheetMode = PhysicalSheetMode | LogicalSheetMode;
 type DragFrom = DragFrom$1;
 type DragSurfaceKind = "content";
 type ScrimPreset = "subtle" | "standard" | "monitoring" | "cinematic";
@@ -283,6 +287,7 @@ declare class BottomSheetCore {
     private disableDragFlag;
     private closeOnRouteChange;
     private maxHeight;
+    private maxHeightDeps;
     private snapPointsRaw;
     private snaps;
     private activeId;
@@ -290,6 +295,7 @@ declare class BottomSheetCore {
     private gesture;
     private contentGesture;
     private detachSheetGesture;
+    private detachSliderKeyboard;
     private rootEl;
     private destroyed;
     private restClosed;
@@ -351,6 +357,8 @@ declare class BottomSheetCore {
     setDragFromContent(value: boolean): void;
     setDragFrom(mode: DragFrom$1): void;
     getDragFrom(): DragFrom$1;
+    setMode(mode: SheetMode): void;
+    getMode(): PhysicalSheetMode;
     isTop(): boolean;
     depth(): number;
     expand(): Promise<void>;
@@ -399,6 +407,7 @@ declare class BottomSheetCore {
     private mountSheetGesture;
     private attach;
     private attachFeatures;
+    private mountSliderKeyboard;
     private settleAfterDrag;
     private isDraggingAny;
     private clearWillChangeIfIdle;
@@ -410,4 +419,4 @@ declare class BottomSheetCore {
     private handleClose;
 }
 
-export { type AnchorOptions as A, BottomSheetCore as B, type CloseReason as C, type EngineState as E, type Plugin as P, type ScrimStagesOptions as S, type TeardownScope as T, type EngineOptions as a, type SnapPointDef as b, type SheetMode as c, type SheetEventMap as d, type SnapPoint as e, type EngineFeature as f, type ScrimOverlayPosition as g, type AnchorAnimationPreset as h, type AnchorAnimationSpec as i, type AnchorHandle as j, type AnchorPosition as k, type AnchorState as l, type EngineFeatureContext as m, type EngineFeatureOptions as n, type EngineFeatureStage as o, SCRIM_PRESETS as p, type ScrimOverlayOptions as q, type ScrimPreset as r, type ScrimPresetConfig as s, type ScrimStageDef as t, type ScrimUpdate as u, type SnapId as v, runAnchorTransition as w };
+export { type AnchorOptions as A, BottomSheetCore as B, type CloseReason as C, type EngineState as E, type LogicalSheetMode as L, type PhysicalSheetMode as P, type SheetEventMap as S, type TeardownScope as T, type SnapPointDef as a, type SheetMode as b, type EngineOptions as c, type SnapPoint as d, type ScrimStagesOptions as e, type EngineFeature as f, type ScrimOverlayPosition as g, type AnchorAnimationPreset as h, type AnchorAnimationSpec as i, type AnchorHandle as j, type AnchorPosition as k, type AnchorState as l, type EngineFeatureContext as m, type EngineFeatureOptions as n, type EngineFeatureStage as o, type Plugin as p, SCRIM_PRESETS as q, type ScrimOverlayOptions as r, type ScrimPreset as s, type ScrimPresetConfig as t, type ScrimStageDef as u, type ScrimUpdate as v, type SnapId as w, runAnchorTransition as x };

package/dist/{BottomSheetCore-Cp7dWy91.d.cts → BottomSheetCore-VPJZcKcg.d.cts}

@@ -2,6 +2,8 @@ import { T as TransformAxis } from './transform-jVfAikE9.cjs';
 
 type DragFrom$1 = "handle" | "sheet" | "zones";
 
+type LogicalAxis = "start" | "end";
+
 type SnapPoint = number | `${number}%` | "fit" | "content" | "full" | (string & {});
 type SnapPointDef<Id extends string = string> = {
     id: Id;
@@ -13,7 +15,9 @@ type SnapId<T extends readonly SnapPointDef<string>[] | {
 }> = T extends {
     snapPoints: readonly SnapPointDef<infer U>[];
 } ? U : T extends readonly SnapPointDef<infer U>[] ? U : never;
-type SheetMode = TransformAxis;
+type PhysicalSheetMode = TransformAxis;
+type LogicalSheetMode = LogicalAxis;
+type SheetMode = PhysicalSheetMode | LogicalSheetMode;
 type DragFrom = DragFrom$1;
 type DragSurfaceKind = "content";
 type ScrimPreset = "subtle" | "standard" | "monitoring" | "cinematic";
@@ -283,6 +287,7 @@ declare class BottomSheetCore {
     private disableDragFlag;
     private closeOnRouteChange;
     private maxHeight;
+    private maxHeightDeps;
     private snapPointsRaw;
     private snaps;
     private activeId;
@@ -290,6 +295,7 @@ declare class BottomSheetCore {
     private gesture;
     private contentGesture;
     private detachSheetGesture;
+    private detachSliderKeyboard;
     private rootEl;
     private destroyed;
     private restClosed;
@@ -351,6 +357,8 @@ declare class BottomSheetCore {
     setDragFromContent(value: boolean): void;
     setDragFrom(mode: DragFrom$1): void;
     getDragFrom(): DragFrom$1;
+    setMode(mode: SheetMode): void;
+    getMode(): PhysicalSheetMode;
     isTop(): boolean;
     depth(): number;
     expand(): Promise<void>;
@@ -399,6 +407,7 @@ declare class BottomSheetCore {
     private mountSheetGesture;
     private attach;
     private attachFeatures;
+    private mountSliderKeyboard;
     private settleAfterDrag;
     private isDraggingAny;
     private clearWillChangeIfIdle;
@@ -410,4 +419,4 @@ declare class BottomSheetCore {
     private handleClose;
 }
 
-export { type AnchorOptions as A, BottomSheetCore as B, type CloseReason as C, type EngineState as E, type Plugin as P, type ScrimStagesOptions as S, type TeardownScope as T, type EngineOptions as a, type SnapPointDef as b, type SheetMode as c, type SheetEventMap as d, type SnapPoint as e, type EngineFeature as f, type ScrimOverlayPosition as g, type AnchorAnimationPreset as h, type AnchorAnimationSpec as i, type AnchorHandle as j, type AnchorPosition as k, type AnchorState as l, type EngineFeatureContext as m, type EngineFeatureOptions as n, type EngineFeatureStage as o, SCRIM_PRESETS as p, type ScrimOverlayOptions as q, type ScrimPreset as r, type ScrimPresetConfig as s, type ScrimStageDef as t, type ScrimUpdate as u, type SnapId as v, runAnchorTransition as w };
+export { type AnchorOptions as A, BottomSheetCore as B, type CloseReason as C, type EngineState as E, type LogicalSheetMode as L, type PhysicalSheetMode as P, type SheetEventMap as S, type TeardownScope as T, type SnapPointDef as a, type SheetMode as b, type EngineOptions as c, type SnapPoint as d, type ScrimStagesOptions as e, type EngineFeature as f, type ScrimOverlayPosition as g, type AnchorAnimationPreset as h, type AnchorAnimationSpec as i, type AnchorHandle as j, type AnchorPosition as k, type AnchorState as l, type EngineFeatureContext as m, type EngineFeatureOptions as n, type EngineFeatureStage as o, type Plugin as p, SCRIM_PRESETS as q, type ScrimOverlayOptions as r, type ScrimPreset as s, type ScrimPresetConfig as t, type ScrimStageDef as u, type ScrimUpdate as v, type SnapId as w, runAnchorTransition as x };

package/dist/{BottomSheetEngine-Lm7HIVHv.d.cts → BottomSheetEngine-B8C2CwF9.d.cts}

@@ -1,4 +1,4 @@
-import { B as BottomSheetCore, a as EngineOptions } from './BottomSheetCore-Cp7dWy91.cjs';
+import { B as BottomSheetCore, c as EngineOptions } from './BottomSheetCore-VPJZcKcg.cjs';
 
 declare class BottomSheetEngine extends BottomSheetCore {
     constructor(opts: EngineOptions);

package/dist/{BottomSheetEngine-O5PbeKfe.d.ts → BottomSheetEngine-DwYR_ygJ.d.ts}

@@ -1,4 +1,4 @@
-import { B as BottomSheetCore, a as EngineOptions } from './BottomSheetCore-DJYwWOqt.js';
+import { B as BottomSheetCore, c as EngineOptions } from './BottomSheetCore-Cgn8b_6A.js';
 
 declare class BottomSheetEngine extends BottomSheetCore {
     constructor(opts: EngineOptions);

package/dist/core.cjs

@@ -315,6 +315,11 @@ var SnapResolver = class {
     this.raw = raw;
     this.recompute();
   }
+  setMode(mode) {
+    if (mode === this.mode) return;
+    this.mode = mode;
+    this.recompute();
+  }
   setAllowedIds(ids) {
     this.allowedIds = ids;
     this.rangeCache = null;
@@ -898,6 +903,11 @@ var ScrimController = class {
     if (this.isDestroyed()) return;
     this.applyScrimStyles({ interactive });
   }
+  setSheetMode(mode) {
+    if (this.isDestroyed() || mode === this.mode) return;
+    this.mode = mode;
+    this.invalidateOpacityCache();
+  }
   setScrimMode(mode, applySize) {
     if (this.isDestroyed()) return;
     if (mode === this.scrimMode) return;
@@ -1820,6 +1830,7 @@ var installGestures = (handle, mode, callbacks, options = {}) => {
   let activePointerId = null;
   let activePointerType = "touch";
   let startCoord = 0;
+  let startCross = 0;
   let lastCoord = 0;
   let pendingStart = false;
   const VELOCITY_WINDOW_MS = (kind) => kind === "mouse" ? 160 : 120;
@@ -1828,6 +1839,7 @@ var installGestures = (handle, mode, callbacks, options = {}) => {
   const axis = isAxisVertical(mode) ? "Y" : "X";
   const sign = mode === "bottom" || mode === "right" ? -1 : 1;
   const coordOf = (e) => axis === "Y" ? e.clientY : e.clientX;
+  const crossOf = (e) => axis === "Y" ? e.clientX : e.clientY;
   const capture = (pointerId) => {
     try {
       handle.setPointerCapture(pointerId);
@@ -1846,6 +1858,7 @@ var installGestures = (handle, mode, callbacks, options = {}) => {
     activePointerId = e.pointerId;
     activePointerType = e.pointerType || "touch";
     startCoord = coordOf(e);
+    startCross = crossOf(e);
     lastCoord = startCoord;
     samples.reset();
     samples.push(e.timeStamp, startCoord);
@@ -1862,7 +1875,7 @@ var installGestures = (handle, mode, callbacks, options = {}) => {
     const rawDelta = coord - startCoord;
     const delta = rawDelta * sign;
     if (pendingStart) {
-      const verdict = options.deferStart(e, delta);
+      const verdict = options.deferStart(e, delta, crossOf(e) - startCross);
       if (verdict === false) {
         releaseTracking();
         return;
@@ -2080,12 +2093,45 @@ function isDragAllowedFrom(target, mode) {
 var CONTENT_DRAG_SLOP = 6;
 function decideContentGesture(input) {
   const slop = input.slop ?? CONTENT_DRAG_SLOP;
+  const cross = input.crossDelta ?? 0;
+  const sharesScrollAxis = input.sharesScrollAxis ?? true;
+  if (!sharesScrollAxis) {
+    if (Math.abs(input.delta) < slop && Math.abs(cross) < slop) return "pending";
+    if (Math.abs(input.delta) <= Math.abs(cross)) return "scroll";
+    return "drag";
+  }
   if (Math.abs(input.delta) < slop) return "pending";
   if (input.scrollTop > 0) return "scroll";
   if (input.delta > 0 && input.atMaxSnap) return "scroll";
   return "drag";
 }
 
+// src/core/primitives/logical-mode.ts
+var isLogicalMode = (mode) => mode === "start" || mode === "end";
+var readDirection = (el) => {
+  if (!el) return "ltr";
+  if (typeof getComputedStyle === "function") {
+    try {
+      if (getComputedStyle(el).direction === "rtl") return "rtl";
+    } catch {
+    }
+  }
+  try {
+    const marked = el.closest?.("[dir]");
+    if (marked) {
+      return marked.getAttribute("dir")?.toLowerCase() === "rtl" ? "rtl" : "ltr";
+    }
+  } catch {
+  }
+  return "ltr";
+};
+var resolveMode = (mode, el) => {
+  if (!isLogicalMode(mode)) return mode;
+  const rtl = readDirection(el) === "rtl";
+  if (mode === "start") return rtl ? "right" : "left";
+  return rtl ? "left" : "right";
+};
+
 // src/core/primitives/touch-scroll-guard.ts
 function installTouchScrollGuard(surface, isDragging) {
   const onTouchMove = (e) => {
@@ -2448,7 +2494,7 @@ function resolveEngineOptions(opts, extras) {
     }
   }
   return {
-    mode: opts.mode ?? "bottom",
+    mode: resolveMode(opts.mode ?? "bottom", opts.element),
     flickVelocity: opts.flickVelocity ?? DEFAULT_FLICK_VELOCITY,
     dragThreshold: opts.dragThreshold ?? DEFAULT_DRAG_THRESHOLD,
     dragFrom: opts.dragFrom ?? (opts.handle ? "handle" : "sheet"),
@@ -2552,6 +2598,7 @@ var BottomSheetCore = class {
     __publicField(this, "disableDragFlag");
     __publicField(this, "closeOnRouteChange");
     __publicField(this, "maxHeight");
+    __publicField(this, "maxHeightDeps");
     __publicField(this, "snapPointsRaw");
     __publicField(this, "snaps");
     __publicField(this, "activeId");
@@ -2559,6 +2606,7 @@ var BottomSheetCore = class {
     __publicField(this, "gesture");
     __publicField(this, "contentGesture");
     __publicField(this, "detachSheetGesture", null);
+    __publicField(this, "detachSliderKeyboard", null);
     __publicField(this, "rootEl", null);
     __publicField(this, "destroyed", false);
     __publicField(this, "restClosed", false);
@@ -2610,6 +2658,7 @@ var BottomSheetCore = class {
     this.screenComponent = opts.scrim ?? opts.screenComponent;
     this.scrimParent = this.screenComponent?.parentElement ?? null;
     this.mode = resolved.mode;
+    this.element.dataset.mode = this.mode;
     this.transformTemplate = buildTransformTemplate(this.mode);
     this.aria = new AriaSliderWriter(this.handle, this.mode);
     this.flickVelocity = resolved.flickVelocity;
@@ -2676,7 +2725,7 @@ var BottomSheetCore = class {
     auditVhUsage(this.snapPointsRaw);
     this.auditDuplicateSnapIds(this.snapPointsRaw);
     this.rootEl = this.element.closest(".bs-root");
-    this.maxHeight = createMaxHeightController({
+    this.maxHeightDeps = {
       element: this.element,
       mode: this.mode,
       getMaxAxisSize: () => this.snaps.getMaxAxisSize(),
@@ -2684,7 +2733,8 @@ var BottomSheetCore = class {
         this.snaps.setMaxAxisSize(size);
       },
       recompute: () => this.recompute()
-    });
+    };
+    this.maxHeight = createMaxHeightController(this.maxHeightDeps);
     this.fitDeps = {
       element: this.element,
       scrollContainer: this.scrollContainer,
@@ -3018,6 +3068,37 @@ var BottomSheetCore = class {
   getDragFrom() {
     return this.dragFromMode;
   }
+  setMode(mode) {
+    if (this.destroyed) return;
+    const next = resolveMode(mode, this.element);
+    if (next === this.mode) return;
+    const wasVertical = this.mode === "bottom" || this.mode === "top";
+    const nowVertical = next === "bottom" || next === "top";
+    this.gesture?.forceClearDragState();
+    this.detachSheetGesture?.();
+    this.animation.cancel();
+    this.element.style.removeProperty(layoutAxis(this.mode));
+    this.mode = next;
+    this.element.dataset.mode = next;
+    this.transformTemplate = buildTransformTemplate(next);
+    this.maxHeightDeps.mode = next;
+    this.fitDeps.mode = next;
+    this.snaps.setMode(next);
+    this.scrim.setSheetMode(next);
+    if (wasVertical !== nowVertical) {
+      this.aria = new AriaSliderWriter(this.handle, next);
+    }
+    this.detachSliderKeyboard?.();
+    this.mountSliderKeyboard();
+    this.mountSheetGesture();
+    this.recompute();
+    const active = this.snaps.findById(this.activeId);
+    if (active) this.applySize(active.size);
+    this.updateAriaSlider();
+  }
+  getMode() {
+    return this.mode;
+  }
   isTop() {
     return this.isTopSheet;
   }
@@ -3366,7 +3447,7 @@ var BottomSheetCore = class {
     const point = this.snapPointsRaw.find((p) => p.id === this.activeId);
     return point?.dragFromContent ?? this.dragFromContentDefault;
   }
-  decideContentDrag(surface, e, delta) {
+  decideContentDrag(surface, e, delta, crossDelta) {
     if (this.destroyed) return false;
     if (e.pointerType === "mouse") return false;
     if (this.gesture?.isDragging) return false;
@@ -3374,6 +3455,8 @@ var BottomSheetCore = class {
     if (!isDragAllowedFrom(e.target, "sheet")) return false;
     const decision = decideContentGesture({
       delta,
+      crossDelta,
+      sharesScrollAxis: this.mode === "bottom" || this.mode === "top",
       scrollTop: surface.scrollTop,
       atMaxSnap: this.size >= this.getAllowedRange().max - 0.5
     });
@@ -3386,7 +3469,7 @@ var BottomSheetCore = class {
     const controller = new GestureController(
       this.buildGestureDeps(surface, {
         manageTouchAction: false,
-        deferStart: (e, delta) => this.decideContentDrag(surface, e, delta)
+        deferStart: (e, delta, crossDelta) => this.decideContentDrag(surface, e, delta, crossDelta)
       })
     );
     this.contentGesture = controller;
@@ -3512,7 +3595,11 @@ var BottomSheetCore = class {
         );
       }
     }
-    this.teardowns.add(installSliderKeyboard({
+    this.mountSliderKeyboard();
+    this.scrim.attach();
+  }
+  mountSliderKeyboard() {
+    const detach = installSliderKeyboard({
       handle: this.handle,
       mode: this.mode,
       isDestroyed: () => this.destroyed,
@@ -3521,8 +3608,12 @@ var BottomSheetCore = class {
       snapTo: (id) => {
         void this.snapTo(id);
       }
-    }));
-    this.scrim.attach();
+    });
+    this.detachSliderKeyboard = detach;
+    this.teardowns.add(() => {
+      this.detachSliderKeyboard?.();
+      this.detachSliderKeyboard = null;
+    });
   }
   settleAfterDrag(delta, velocity, kind = "touch") {
     const signal = this.newCycle();

package/dist/core.d.cts

@@ -1,3 +1,3 @@
-export { B as BottomSheetCore, C as CloseReason, f as EngineFeature, m as EngineFeatureContext, n as EngineFeatureOptions, o as EngineFeatureStage, a as EngineOptions, E as EngineState, d as SheetEventMap, c as SheetMode, v as SnapId, e as SnapPoint, b as SnapPointDef } from './BottomSheetCore-Cp7dWy91.cjs';
-export { R as ResolvedSnap } from './index-Bb5TRmyg.cjs';
+export { B as BottomSheetCore, C as CloseReason, f as EngineFeature, m as EngineFeatureContext, n as EngineFeatureOptions, o as EngineFeatureStage, c as EngineOptions, E as EngineState, S as SheetEventMap, b as SheetMode, w as SnapId, d as SnapPoint, a as SnapPointDef } from './BottomSheetCore-VPJZcKcg.cjs';
+export { R as ResolvedSnap } from './index-CnfbOKx0.cjs';
 import './transform-jVfAikE9.cjs';

package/dist/core.d.ts

@@ -1,3 +1,3 @@
-export { B as BottomSheetCore, C as CloseReason, f as EngineFeature, m as EngineFeatureContext, n as EngineFeatureOptions, o as EngineFeatureStage, a as EngineOptions, E as EngineState, d as SheetEventMap, c as SheetMode, v as SnapId, e as SnapPoint, b as SnapPointDef } from './BottomSheetCore-DJYwWOqt.js';
-export { R as ResolvedSnap } from './index-Cl9ebCP2.js';
+export { B as BottomSheetCore, C as CloseReason, f as EngineFeature, m as EngineFeatureContext, n as EngineFeatureOptions, o as EngineFeatureStage, c as EngineOptions, E as EngineState, S as SheetEventMap, b as SheetMode, w as SnapId, d as SnapPoint, a as SnapPointDef } from './BottomSheetCore-Cgn8b_6A.js';
+export { R as ResolvedSnap } from './index-DcMkhXAy.js';
 import './transform-jVfAikE9.js';

package/dist/core.js

@@ -313,6 +313,11 @@ var SnapResolver = class {
     this.raw = raw;
     this.recompute();
   }
+  setMode(mode) {
+    if (mode === this.mode) return;
+    this.mode = mode;
+    this.recompute();
+  }
   setAllowedIds(ids) {
     this.allowedIds = ids;
     this.rangeCache = null;
@@ -896,6 +901,11 @@ var ScrimController = class {
     if (this.isDestroyed()) return;
     this.applyScrimStyles({ interactive });
   }
+  setSheetMode(mode) {
+    if (this.isDestroyed() || mode === this.mode) return;
+    this.mode = mode;
+    this.invalidateOpacityCache();
+  }
   setScrimMode(mode, applySize) {
     if (this.isDestroyed()) return;
     if (mode === this.scrimMode) return;
@@ -1818,6 +1828,7 @@ var installGestures = (handle, mode, callbacks, options = {}) => {
   let activePointerId = null;
   let activePointerType = "touch";
   let startCoord = 0;
+  let startCross = 0;
   let lastCoord = 0;
   let pendingStart = false;
   const VELOCITY_WINDOW_MS = (kind) => kind === "mouse" ? 160 : 120;
@@ -1826,6 +1837,7 @@ var installGestures = (handle, mode, callbacks, options = {}) => {
   const axis = isAxisVertical(mode) ? "Y" : "X";
   const sign = mode === "bottom" || mode === "right" ? -1 : 1;
   const coordOf = (e) => axis === "Y" ? e.clientY : e.clientX;
+  const crossOf = (e) => axis === "Y" ? e.clientX : e.clientY;
   const capture = (pointerId) => {
     try {
       handle.setPointerCapture(pointerId);
@@ -1844,6 +1856,7 @@ var installGestures = (handle, mode, callbacks, options = {}) => {
     activePointerId = e.pointerId;
     activePointerType = e.pointerType || "touch";
     startCoord = coordOf(e);
+    startCross = crossOf(e);
     lastCoord = startCoord;
     samples.reset();
     samples.push(e.timeStamp, startCoord);
@@ -1860,7 +1873,7 @@ var installGestures = (handle, mode, callbacks, options = {}) => {
     const rawDelta = coord - startCoord;
     const delta = rawDelta * sign;
     if (pendingStart) {
-      const verdict = options.deferStart(e, delta);
+      const verdict = options.deferStart(e, delta, crossOf(e) - startCross);
       if (verdict === false) {
         releaseTracking();
         return;
@@ -2078,12 +2091,45 @@ function isDragAllowedFrom(target, mode) {
 var CONTENT_DRAG_SLOP = 6;
 function decideContentGesture(input) {
   const slop = input.slop ?? CONTENT_DRAG_SLOP;
+  const cross = input.crossDelta ?? 0;
+  const sharesScrollAxis = input.sharesScrollAxis ?? true;
+  if (!sharesScrollAxis) {
+    if (Math.abs(input.delta) < slop && Math.abs(cross) < slop) return "pending";
+    if (Math.abs(input.delta) <= Math.abs(cross)) return "scroll";
+    return "drag";
+  }
   if (Math.abs(input.delta) < slop) return "pending";
   if (input.scrollTop > 0) return "scroll";
   if (input.delta > 0 && input.atMaxSnap) return "scroll";
   return "drag";
 }
 
+// src/core/primitives/logical-mode.ts
+var isLogicalMode = (mode) => mode === "start" || mode === "end";
+var readDirection = (el) => {
+  if (!el) return "ltr";
+  if (typeof getComputedStyle === "function") {
+    try {
+      if (getComputedStyle(el).direction === "rtl") return "rtl";
+    } catch {
+    }
+  }
+  try {
+    const marked = el.closest?.("[dir]");
+    if (marked) {
+      return marked.getAttribute("dir")?.toLowerCase() === "rtl" ? "rtl" : "ltr";
+    }
+  } catch {
+  }
+  return "ltr";
+};
+var resolveMode = (mode, el) => {
+  if (!isLogicalMode(mode)) return mode;
+  const rtl = readDirection(el) === "rtl";
+  if (mode === "start") return rtl ? "right" : "left";
+  return rtl ? "left" : "right";
+};
+
 // src/core/primitives/touch-scroll-guard.ts
 function installTouchScrollGuard(surface, isDragging) {
   const onTouchMove = (e) => {
@@ -2446,7 +2492,7 @@ function resolveEngineOptions(opts, extras) {
     }
   }
   return {
-    mode: opts.mode ?? "bottom",
+    mode: resolveMode(opts.mode ?? "bottom", opts.element),
     flickVelocity: opts.flickVelocity ?? DEFAULT_FLICK_VELOCITY,
     dragThreshold: opts.dragThreshold ?? DEFAULT_DRAG_THRESHOLD,
     dragFrom: opts.dragFrom ?? (opts.handle ? "handle" : "sheet"),
@@ -2550,6 +2596,7 @@ var BottomSheetCore = class {
     __publicField(this, "disableDragFlag");
     __publicField(this, "closeOnRouteChange");
     __publicField(this, "maxHeight");
+    __publicField(this, "maxHeightDeps");
     __publicField(this, "snapPointsRaw");
     __publicField(this, "snaps");
     __publicField(this, "activeId");
@@ -2557,6 +2604,7 @@ var BottomSheetCore = class {
     __publicField(this, "gesture");
     __publicField(this, "contentGesture");
     __publicField(this, "detachSheetGesture", null);
+    __publicField(this, "detachSliderKeyboard", null);
     __publicField(this, "rootEl", null);
     __publicField(this, "destroyed", false);
     __publicField(this, "restClosed", false);
@@ -2608,6 +2656,7 @@ var BottomSheetCore = class {
     this.screenComponent = opts.scrim ?? opts.screenComponent;
     this.scrimParent = this.screenComponent?.parentElement ?? null;
     this.mode = resolved.mode;
+    this.element.dataset.mode = this.mode;
     this.transformTemplate = buildTransformTemplate(this.mode);
     this.aria = new AriaSliderWriter(this.handle, this.mode);
     this.flickVelocity = resolved.flickVelocity;
@@ -2674,7 +2723,7 @@ var BottomSheetCore = class {
     auditVhUsage(this.snapPointsRaw);
     this.auditDuplicateSnapIds(this.snapPointsRaw);
     this.rootEl = this.element.closest(".bs-root");
-    this.maxHeight = createMaxHeightController({
+    this.maxHeightDeps = {
       element: this.element,
       mode: this.mode,
       getMaxAxisSize: () => this.snaps.getMaxAxisSize(),
@@ -2682,7 +2731,8 @@ var BottomSheetCore = class {
         this.snaps.setMaxAxisSize(size);
       },
       recompute: () => this.recompute()
-    });
+    };
+    this.maxHeight = createMaxHeightController(this.maxHeightDeps);
     this.fitDeps = {
       element: this.element,
       scrollContainer: this.scrollContainer,
@@ -3016,6 +3066,37 @@ var BottomSheetCore = class {
   getDragFrom() {
     return this.dragFromMode;
   }
+  setMode(mode) {
+    if (this.destroyed) return;
+    const next = resolveMode(mode, this.element);
+    if (next === this.mode) return;
+    const wasVertical = this.mode === "bottom" || this.mode === "top";
+    const nowVertical = next === "bottom" || next === "top";
+    this.gesture?.forceClearDragState();
+    this.detachSheetGesture?.();
+    this.animation.cancel();
+    this.element.style.removeProperty(layoutAxis(this.mode));
+    this.mode = next;
+    this.element.dataset.mode = next;
+    this.transformTemplate = buildTransformTemplate(next);
+    this.maxHeightDeps.mode = next;
+    this.fitDeps.mode = next;
+    this.snaps.setMode(next);
+    this.scrim.setSheetMode(next);
+    if (wasVertical !== nowVertical) {
+      this.aria = new AriaSliderWriter(this.handle, next);
+    }
+    this.detachSliderKeyboard?.();
+    this.mountSliderKeyboard();
+    this.mountSheetGesture();
+    this.recompute();
+    const active = this.snaps.findById(this.activeId);
+    if (active) this.applySize(active.size);
+    this.updateAriaSlider();
+  }
+  getMode() {
+    return this.mode;
+  }
   isTop() {
     return this.isTopSheet;
   }
@@ -3364,7 +3445,7 @@ var BottomSheetCore = class {
     const point = this.snapPointsRaw.find((p) => p.id === this.activeId);
     return point?.dragFromContent ?? this.dragFromContentDefault;
   }
-  decideContentDrag(surface, e, delta) {
+  decideContentDrag(surface, e, delta, crossDelta) {
     if (this.destroyed) return false;
     if (e.pointerType === "mouse") return false;
     if (this.gesture?.isDragging) return false;
@@ -3372,6 +3453,8 @@ var BottomSheetCore = class {
     if (!isDragAllowedFrom(e.target, "sheet")) return false;
     const decision = decideContentGesture({
       delta,
+      crossDelta,
+      sharesScrollAxis: this.mode === "bottom" || this.mode === "top",
       scrollTop: surface.scrollTop,
       atMaxSnap: this.size >= this.getAllowedRange().max - 0.5
     });
@@ -3384,7 +3467,7 @@ var BottomSheetCore = class {
     const controller = new GestureController(
       this.buildGestureDeps(surface, {
         manageTouchAction: false,
-        deferStart: (e, delta) => this.decideContentDrag(surface, e, delta)
+        deferStart: (e, delta, crossDelta) => this.decideContentDrag(surface, e, delta, crossDelta)
       })
     );
     this.contentGesture = controller;
@@ -3510,7 +3593,11 @@ var BottomSheetCore = class {
         );
       }
     }
-    this.teardowns.add(installSliderKeyboard({
+    this.mountSliderKeyboard();
+    this.scrim.attach();
+  }
+  mountSliderKeyboard() {
+    const detach = installSliderKeyboard({
       handle: this.handle,
       mode: this.mode,
       isDestroyed: () => this.destroyed,
@@ -3519,8 +3606,12 @@ var BottomSheetCore = class {
       snapTo: (id) => {
         void this.snapTo(id);
       }
-    }));
-    this.scrim.attach();
+    });
+    this.detachSliderKeyboard = detach;
+    this.teardowns.add(() => {
+      this.detachSliderKeyboard?.();
+      this.detachSliderKeyboard = null;
+    });
   }
   settleAfterDrag(delta, velocity, kind = "touch") {
     const signal = this.newCycle();

package/dist/debug.d.cts

@@ -1,4 +1,4 @@
-import { E as EngineState, d as SheetEventMap } from './BottomSheetCore-Cp7dWy91.cjs';
+import { E as EngineState, S as SheetEventMap } from './BottomSheetCore-VPJZcKcg.cjs';
 import './transform-jVfAikE9.cjs';
 
 type DebugOverlayPosition = "top-left" | "top-right" | "bottom-left" | "bottom-right";

package/dist/debug.d.ts

@@ -1,4 +1,4 @@
-import { E as EngineState, d as SheetEventMap } from './BottomSheetCore-DJYwWOqt.js';
+import { E as EngineState, S as SheetEventMap } from './BottomSheetCore-Cgn8b_6A.js';
 import './transform-jVfAikE9.js';
 
 type DebugOverlayPosition = "top-left" | "top-right" | "bottom-left" | "bottom-right";