@surdeddd/bottom-sheet 0.23.2 → 0.23.4

package/dist/element.cjs

@@ -3,8 +3,13 @@
 var __defProp = Object.defineProperty;
 var __getOwnPropNames = Object.getOwnPropertyNames;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __esm = (fn, res) => function __init() {
-  return fn && (res = (0, fn[__getOwnPropNames(fn)[0]])(fn = 0)), res;
+var __esm = (fn, res, err) => function __init() {
+  if (err) throw err[0];
+  try {
+    return fn && (res = (0, fn[__getOwnPropNames(fn)[0]])(fn = 0)), res;
+  } catch (e) {
+    throw err = [e], e;
+  }
 };
 var __export = (target, all) => {
   for (var name in all)
@@ -99,9 +104,10 @@ function buildTransformTemplate(axis) {
       return (offset) => `translate3d(${offset}px, 0, 0)`;
   }
 }
-var layoutAxis;
+var offsetFromMatrix, layoutAxis;
 var init_transform = __esm({
   "src/core/primitives/transform.ts"() {
+    offsetFromMatrix = (axis, m) => axis === "bottom" ? m.m42 : axis === "top" ? -m.m42 : axis === "left" ? -m.m41 : m.m41;
     layoutAxis = (axis) => axis === "left" || axis === "right" ? "width" : "height";
   }
 });
@@ -1288,7 +1294,7 @@ var init_animation = __esm({
         }
         const step = (now) => {
           if (cancelled) return;
-          const elapsed = now - start;
+          const elapsed = Math.max(0, now - start);
           const t = Math.min(elapsed / duration, 1);
           const value = from + (to - from) * easing(t);
           onUpdate(value);
@@ -1346,8 +1352,8 @@ var init_spring = __esm({
         resolveFn = resolve;
         const step = (now) => {
           if (cancelled) return;
-          const dt = Math.min((now - lastTime) / 1e3, MAX_DT);
-          lastTime = now;
+          const dt = Math.min(Math.max(0, now - lastTime) / 1e3, MAX_DT);
+          lastTime = Math.max(lastTime, now);
           const steps = Math.max(1, Math.ceil(dt * 240));
           const subDt = dt / steps;
           let stepsLeft = steps;
@@ -1460,10 +1466,11 @@ function sampleTweenSettle(from, to, durationMs, easing) {
     durationMs
   };
 }
-var SIM_HZ, SAMPLE_STRIDE, MAX_SIM_MS;
+var SETTLE_ANIMATION_ID, SIM_HZ, SAMPLE_STRIDE, MAX_SIM_MS;
 var init_waapi_settle = __esm({
   "src/core/animation/waapi-settle.ts"() {
     init_spring();
+    SETTLE_ANIMATION_ID = "bs-settle";
     SIM_HZ = 240;
     SAMPLE_STRIDE = 4;
     MAX_SIM_MS = 3e3;
@@ -1489,6 +1496,7 @@ var init_animation_runner = __esm({
         __publicField(this, "isDragging");
         __publicField(this, "applyAux");
         __publicField(this, "getTransformFor");
+        __publicField(this, "readShownSize");
         __publicField(this, "settleWaapi");
         __publicField(this, "currentWaapi", null);
         __publicField(this, "animationKind");
@@ -1508,6 +1516,7 @@ var init_animation_runner = __esm({
         this.isDragging = deps.isDragging;
         this.applyAux = deps.applyAux;
         this.getTransformFor = deps.getTransformFor;
+        this.readShownSize = deps.readShownSize;
         this.settleWaapi = opts.settleAnimation === "waapi";
         const preset = resolveAnimationPreset(opts.animation);
         this.animationKind = preset.kind;
@@ -1540,10 +1549,12 @@ var init_animation_runner = __esm({
         const entry = this.currentWaapi;
         this.currentWaapi = null;
         entry.stop();
+        const size = this.readShownSize?.() ?? entry.sizeNow();
         try {
           entry.anim.cancel();
         } catch {
         }
+        this.applySizeFn(size);
       }
       cancel() {
         this.currentTween?.cancel();
@@ -1553,6 +1564,7 @@ var init_animation_runner = __esm({
       async animateTo(target, velocityPxPerMs) {
         if (target === this.getSize()) {
           if (!this.isAnimating && !this.isDragging()) {
+            this.applySizeFn(target);
             this.element.style.willChange = "";
           }
           return;
@@ -1589,6 +1601,7 @@ var init_animation_runner = __esm({
             return;
           }
         }
+        let current = false;
         if (this.animationKind === "spring") {
           const spring = runSpring({
             from: this.getSize(),
@@ -1599,7 +1612,8 @@ var init_animation_runner = __esm({
           });
           this.currentSpring = spring;
           await spring.promise;
-          if (this.currentSpring === spring) this.currentSpring = null;
+          current = this.currentSpring === spring;
+          if (current) this.currentSpring = null;
         } else {
           const tw = tween({
             from: this.getSize(),
@@ -1610,11 +1624,15 @@ var init_animation_runner = __esm({
           });
           this.currentTween = tw;
           await tw.promise;
-          if (this.currentTween === tw) this.currentTween = null;
+          current = this.currentTween === tw;
+          if (current) this.currentTween = null;
         }
         if (!this.isAnimating) {
           this.getRootEl()?.removeAttribute("data-animating");
-          if (!this.isDragging()) this.element.style.willChange = "";
+          if (!this.isDragging()) {
+            if (current) this.applySizeFn(this.getSize());
+            this.element.style.willChange = "";
+          }
         }
       }
       async runWaapiSettle(samples, target) {
@@ -1628,11 +1646,11 @@ var init_animation_runner = __esm({
           easing: "linear",
           fill: "forwards"
         });
+        anim.id = SETTLE_ANIMATION_ID;
         let stopped = false;
         let auxRaf = 0;
         const lastIdx = samples.values.length - 1;
-        const auxTick = () => {
-          if (stopped) return;
+        const sizeNow = () => {
           const at = Math.min(
             (Number(anim.currentTime) || 0) / samples.stepMs,
             lastIdx
@@ -1640,7 +1658,11 @@ var init_animation_runner = __esm({
           const idx = Math.floor(at);
           const from = samples.values[idx];
           const to = samples.values[Math.min(idx + 1, lastIdx)];
-          applyAux(from + (to - from) * (at - idx));
+          return from + (to - from) * (at - idx);
+        };
+        const auxTick = () => {
+          if (stopped) return;
+          applyAux(sizeNow());
           auxRaf = requestAnimationFrame(auxTick);
         };
         auxRaf = requestAnimationFrame(auxTick);
@@ -1649,7 +1671,8 @@ var init_animation_runner = __esm({
           stop: () => {
             stopped = true;
             cancelAnimationFrame(auxRaf);
-          }
+          },
+          sizeNow
         };
         this.currentWaapi = entry;
         try {
@@ -2888,6 +2911,7 @@ var init_BottomSheetCore = __esm({
         __publicField(this, "closeOnBack");
         __publicField(this, "routedTo");
         __publicField(this, "fitContentToSnap");
+        __publicField(this, "settleAnimation");
         __publicField(this, "persistent");
         __publicField(this, "disableCloseFlag");
         __publicField(this, "disableDragFlag");
@@ -2992,6 +3016,11 @@ var init_BottomSheetCore = __esm({
               const cap = this.snaps.getMaxAxisSize();
               const shown = cap > 0 && !this.allowOvershoot ? Math.min(size, cap) : size;
               return this.transformTemplate(cap - shown);
+            },
+            readShownSize: () => {
+              const shown = getComputedStyle(this.element).transform;
+              if (!shown || shown === "none") return void 0;
+              return this.snaps.getMaxAxisSize() - offsetFromMatrix(this.mode, new DOMMatrix(shown));
             }
           },
           resolved.animation
@@ -3006,6 +3035,7 @@ var init_BottomSheetCore = __esm({
         this.closeOnBack = resolved.closeOnBack;
         this.routedTo = opts.routedTo;
         this.fitContentToSnap = opts.fitContentToSnap === true;
+        this.settleAnimation = opts.settleAnimation;
         this.persistent = resolved.persistent;
         this.disableCloseFlag = resolved.disableClose;
         this.disableDragFlag = resolved.disableDrag;
@@ -3108,7 +3138,8 @@ var init_BottomSheetCore = __esm({
             closeOnRouteChange: this.closeOnRouteChange,
             persistKey: this.persistKey,
             autoCollapseAfter,
-            fitContentToSnap: this.fitContentToSnap
+            fitContentToSnap: this.fitContentToSnap,
+            settleAnimation: this.settleAnimation
           },
           isDestroyed: () => this.destroyed,
           isDragging: () => this.isDraggingAny(),
@@ -4000,7 +4031,11 @@ var init_BottomSheetCore = __esm({
         const offset = cap - clamped;
         const style = this.element.style;
         if (!skipTransform) style.transform = this.transformTemplate(offset);
-        if (this.sizeWriteSentinel.shouldWrite(clamped, SIZE_WRITE_EPSILON)) {
+        const sizeChanged = this.sizeWriteSentinel.shouldWrite(
+          clamped,
+          this.animation.isAnimating || this.isDraggingAny() ? SIZE_WRITE_EPSILON : 0
+        );
+        if (sizeChanged) {
           style.setProperty("--bs-size", `${clamped}px`);
           if (this.scrimParent) {
             this.scrimParent.style.setProperty("--bs-size", `${clamped}px`);
@@ -4027,7 +4062,7 @@ var init_BottomSheetCore = __esm({
           }
         }
         this.scrim.applyOpacity(progress, progressChanged);
-        if (progressChanged && this.bus.listenerCount("progress") > 0) {
+        if ((progressChanged || sizeChanged) && this.bus.listenerCount("progress") > 0) {
           this.progressPayload.value = progress;
           this.progressPayload.size = clamped;
           this.emit("progress", this.progressPayload);
@@ -4571,10 +4606,14 @@ function contentFitFeature() {
         return;
       }
       const sheet = ctx.element;
+      const waapi = ctx.options.settleAnimation === "waapi";
       let inset = 0;
       let unpaddedMax = -1;
       let top = 0;
       let resting = false;
+      let liftMax = 0;
+      let followed = null;
+      let follower = null;
       const put = (name, px) => sheet.style.setProperty(name, `${px}px`);
       const hiddenAt = (size) => sheet.dataset.mode === "bottom" ? Math.max(0, ctx.getMaxAxisSize() - size) : 0;
       const follow = (size) => {
@@ -4588,8 +4627,45 @@ function contentFitFeature() {
           top = limit;
         }
       };
+      const unfollow = () => {
+        follower?.cancel();
+        follower = null;
+        followed = null;
+      };
+      const followSettle = () => {
+        if (followed?.playState === "running") return;
+        const settleAnim = sheet.getAnimations?.().find((a) => a.id === SETTLE_ANIMATION_ID);
+        const footer = sheet.querySelector(".bs-footer");
+        if (!settleAnim || !footer) return;
+        const effect = settleAnim.effect;
+        unfollow();
+        const own = footer.animate(
+          effect.getKeyframes().map((k) => ({
+            offset: k.computedOffset,
+            transform: `translateY(${-Math.min(
+              Math.max(0, parseFloat(String(k.transform).split(",")[1]) || 0),
+              liftMax
+            )}px)`
+          })),
+          {
+            duration: effect.getTiming().duration,
+            easing: "linear",
+            fill: "forwards"
+          }
+        );
+        follower = own;
+        followed = settleAnim;
+        const done = () => {
+          if (followed === settleAnim) unfollow();
+        };
+        settleAnim.ready.then(() => {
+          if (follower === own) own.startTime = settleAnim.startTime;
+        }, done);
+        settleAnim.finished.then(done, done);
+      };
       const settle = () => {
         if (ctx.isDestroyed()) return;
+        unfollow();
         const size = ctx.getSize();
         if (!resting) {
           unpaddedMax = -1;
@@ -4597,7 +4673,6 @@ function contentFitFeature() {
         }
         inset = hiddenAt(size);
         put(INSET_VAR, inset);
-        put(SIZE_VAR, size);
         put(CAP_VAR, ctx.getMaxAxisSize());
         if (!resting) {
           resting = true;
@@ -4609,9 +4684,13 @@ function contentFitFeature() {
         if (resting) {
           resting = false;
           sheet.setAttribute(FIT_ATTR, "moving");
-          put(LIFT_VAR, scroller.offsetHeight);
+          liftMax = scroller.offsetHeight;
+          put(LIFT_VAR, liftMax);
         }
         follow(size);
+        if (waapi && ctx.isAnimating() && sheet.dataset.mode === "bottom") {
+          followSettle();
+        }
       };
       const moving = () => ctx.isAnimating() || ctx.isDragging();
       const whenIdle = () => {
@@ -4624,13 +4703,20 @@ function contentFitFeature() {
       );
       const offSnap = ctx.on("snap", settle);
       const offDragStart = ctx.on("dragstart", () => move(ctx.getSize()));
+      const offBeforeSnap = ctx.on("before-snap", () => {
+        queueMicrotask(() => {
+          if (!ctx.isDestroyed() && ctx.isAnimating()) move(ctx.getSize());
+        });
+      });
       const observer = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(whenIdle);
       observer?.observe(document.documentElement);
       window.addEventListener("orientationchange", whenIdle);
       return () => {
+        unfollow();
         offProgress();
         offSnap();
         offDragStart();
+        offBeforeSnap();
         observer?.disconnect();
         window.removeEventListener("orientationchange", whenIdle);
         sheet.removeAttribute(FIT_ATTR);
@@ -4641,11 +4727,11 @@ function contentFitFeature() {
     }
   };
 }
-var INSET_VAR, SIZE_VAR, CAP_VAR, LIFT_VAR, FIT_ATTR;
+var INSET_VAR, CAP_VAR, LIFT_VAR, FIT_ATTR;
 var init_content_fit = __esm({
   "src/core/features/content-fit.ts"() {
+    init_waapi_settle();
     INSET_VAR = "--bs-content-inset";
-    SIZE_VAR = "--bs-size";
     CAP_VAR = "--bs-max-size";
     LIFT_VAR = "--bs-footer-lift-max";
     FIT_ATTR = "data-bs-fit-content";

package/dist/element.d.cts

@@ -1,5 +1,6 @@
-import { B as BottomSheetEngine } from './BottomSheetEngine-CsQWHLNb.cjs';
-import { C as CloseReason, A as AnchorOptions, i as ScrimStagesOptions, d as EngineState } from './BottomSheetCore-CQStdVy2.cjs';
+import { BottomSheetEngine } from './index.cjs';
+import { CloseReason, EngineState } from './core.cjs';
+import { AnchorOptions, ScrimStagesOptions } from './index.cjs';
 import './transform-jVfAikE9.cjs';
 
 declare const BaseHTMLElement: typeof HTMLElement;
@@ -58,4 +59,5 @@ type TypedBottomSheetElement<TId extends string = string> = HTMLElement & {
 };
 declare const defineBottomSheet: (tag?: string) => void;
 
-export { BottomSheetElement, type TypedBottomSheetElement, defineBottomSheet };
+export { BottomSheetElement, defineBottomSheet };
+export type { TypedBottomSheetElement };

package/dist/element.d.ts

@@ -1,5 +1,6 @@
-import { B as BottomSheetEngine } from './BottomSheetEngine-Dn6h-7gF.js';
-import { C as CloseReason, A as AnchorOptions, i as ScrimStagesOptions, d as EngineState } from './BottomSheetCore-9i-Uh6T3.js';
+import { BottomSheetEngine } from './index.js';
+import { CloseReason, EngineState } from './core.js';
+import { AnchorOptions, ScrimStagesOptions } from './index.js';
 import './transform-jVfAikE9.js';
 
 declare const BaseHTMLElement: typeof HTMLElement;
@@ -58,4 +59,5 @@ type TypedBottomSheetElement<TId extends string = string> = HTMLElement & {
 };
 declare const defineBottomSheet: (tag?: string) => void;
 
-export { BottomSheetElement, type TypedBottomSheetElement, defineBottomSheet };
+export { BottomSheetElement, defineBottomSheet };
+export type { TypedBottomSheetElement };