@surdeddd/bottom-sheet 0.6.1 → 0.7.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/svelte.cjs CHANGED
@@ -2671,8 +2671,8 @@ var BottomSheetEngine = class {
2671
2671
  this.updateAriaSlider();
2672
2672
  this.emit("snap", {
2673
2673
  id,
2674
- size: target.size,
2675
- progress: this.computeProgress(target.size)
2674
+ size: this.size,
2675
+ progress: this.computeProgress(this.size)
2676
2676
  });
2677
2677
  if (wasClosed && target.size > 0) {
2678
2678
  this.emit("open", { id });
@@ -2751,12 +2751,12 @@ var BottomSheetEngine = class {
2751
2751
  const value = typeof h === "number" ? `${h}px` : h;
2752
2752
  const axis = layoutAxis(this.mode);
2753
2753
  this.element.style.setProperty(
2754
- axis === "height" ? "maxHeight" : "maxWidth",
2754
+ axis === "height" ? "max-height" : "max-width",
2755
2755
  value
2756
2756
  );
2757
2757
  if (typeof h === "number") {
2758
2758
  this.maxHeightCap = h;
2759
- this.clampToMaxHeight();
2759
+ this.recompute();
2760
2760
  } else if (typeof window !== "undefined") {
2761
2761
  const probe2 = document.createElement("div");
2762
2762
  probe2.style.cssText = `position:absolute;visibility:hidden;pointer-events:none;${axis === "height" ? "height" : "width"}:${value};`;
@@ -2764,7 +2764,7 @@ var BottomSheetEngine = class {
2764
2764
  const measured = axis === "height" ? probe2.offsetHeight : probe2.offsetWidth;
2765
2765
  probe2.remove();
2766
2766
  this.maxHeightCap = measured > 0 ? measured : void 0;
2767
- this.clampToMaxHeight();
2767
+ this.recompute();
2768
2768
  }
2769
2769
  }
2770
2770
  clampToMaxHeight() {
@@ -2772,9 +2772,6 @@ var BottomSheetEngine = class {
2772
2772
  if (this.snaps.getMaxAxisSize() > this.maxHeightCap) {
2773
2773
  this.snaps.setMaxAxisSize(this.maxHeightCap);
2774
2774
  }
2775
- if (this.size > this.maxHeightCap && !this.gesture?.isDragging) {
2776
- this.applySize(this.maxHeightCap);
2777
- }
2778
2775
  }
2779
2776
  setAllowed(ids, snap) {
2780
2777
  if (this.destroyed) return;
@@ -2912,6 +2909,7 @@ var BottomSheetEngine = class {
2912
2909
  recompute() {
2913
2910
  if (this.destroyed) return;
2914
2911
  this.snaps.recompute();
2912
+ this.clampToMaxHeight();
2915
2913
  this.scrim.invalidateOpacityCache();
2916
2914
  if (this.gesture?.isDragging) return;
2917
2915
  const current = this.snaps.findById(this.activeId);
@@ -2969,9 +2967,10 @@ var BottomSheetEngine = class {
2969
2967
  const handleSize = vertical ? this.handle.offsetHeight : this.handle.offsetWidth;
2970
2968
  const content = this.scrollContainer;
2971
2969
  const natural = content ? handleSize + this.measureContentExtent(vertical) : handleSize;
2972
- if (typeof window === "undefined") return natural;
2970
+ const capped = this.maxHeightCap !== void 0 ? Math.min(natural, this.maxHeightCap) : natural;
2971
+ if (typeof window === "undefined") return capped;
2973
2972
  const viewport = vertical ? window.innerHeight : window.innerWidth;
2974
- return viewport > 0 ? Math.min(natural, viewport) : natural;
2973
+ return viewport > 0 ? Math.min(capped, viewport) : capped;
2975
2974
  }
2976
2975
  installFitObserver() {
2977
2976
  if (typeof ResizeObserver === "undefined") return;
@@ -3342,8 +3341,8 @@ var BottomSheetEngine = class {
3342
3341
  this.updateAriaSlider();
3343
3342
  this.emit("snap", {
3344
3343
  id: target.id,
3345
- size: target.size,
3346
- progress: this.computeProgress(target.size)
3344
+ size: this.size,
3345
+ progress: this.computeProgress(this.size)
3347
3346
  });
3348
3347
  this.haptic();
3349
3348
  if (previousSnapSize === 0 && target.size > 0) {
@@ -3368,23 +3367,25 @@ var BottomSheetEngine = class {
3368
3367
  }
3369
3368
  }
3370
3369
  applySize(size) {
3371
- this.size = size;
3372
- const offset = this.snaps.getMaxAxisSize() - size;
3370
+ const cap = this.snaps.getMaxAxisSize();
3371
+ const clamped = cap > 0 && size > cap && !this.gesture?.isDragging ? cap : size;
3372
+ this.size = clamped;
3373
+ const offset = cap - clamped;
3373
3374
  const style = this.element.style;
3374
3375
  style.transform = this.transformTemplate(offset);
3375
- if (this.sizeWriteSentinel.shouldWrite(size, SIZE_WRITE_EPSILON)) {
3376
- style.setProperty("--bs-size", `${size}px`);
3376
+ if (this.sizeWriteSentinel.shouldWrite(clamped, SIZE_WRITE_EPSILON)) {
3377
+ style.setProperty("--bs-size", `${clamped}px`);
3377
3378
  if (this.scrimParent) {
3378
- this.scrimParent.style.setProperty("--bs-size", `${size}px`);
3379
+ this.scrimParent.style.setProperty("--bs-size", `${clamped}px`);
3379
3380
  }
3380
3381
  if (this.anchorHost && this.anchorHost !== this.scrimParent) {
3381
- this.anchorHost.style.setProperty("--bs-size", `${size}px`);
3382
+ this.anchorHost.style.setProperty("--bs-size", `${clamped}px`);
3382
3383
  }
3383
3384
  if (this.rootEl && this.rootEl !== this.scrimParent && this.rootEl !== this.anchorHost) {
3384
- this.rootEl.style.setProperty("--bs-size", `${size}px`);
3385
+ this.rootEl.style.setProperty("--bs-size", `${clamped}px`);
3385
3386
  }
3386
3387
  }
3387
- const progress = this.computeProgress(size);
3388
+ const progress = this.computeProgress(clamped);
3388
3389
  const progressChanged = this.progressWriteSentinel.shouldWrite(
3389
3390
  progress,
3390
3391
  OPACITY_WRITE_EPSILON
@@ -3401,14 +3402,15 @@ var BottomSheetEngine = class {
3401
3402
  this.scrim.applyOpacity(progress, progressChanged);
3402
3403
  if (progressChanged && this.bus.listenerCount("progress") > 0) {
3403
3404
  this.progressPayload.value = progress;
3404
- this.progressPayload.size = size;
3405
+ this.progressPayload.size = clamped;
3405
3406
  this.emit("progress", this.progressPayload);
3406
3407
  }
3407
3408
  }
3408
3409
  computeProgress(size) {
3409
3410
  const { min, max } = this.getAllowedRange();
3410
- if (max <= min) return 0;
3411
- return Math.min(Math.max((size - min) / (max - min), 0), 1);
3411
+ const reachableMax = Math.min(max, this.snaps.getMaxAxisSize());
3412
+ if (reachableMax <= min) return 0;
3413
+ return Math.min(Math.max((size - min) / (reachableMax - min), 0), 1);
3412
3414
  }
3413
3415
  handleOpen() {
3414
3416
  sheetStack.promote(this.id);
@@ -3432,8 +3434,8 @@ var BottomSheetEngine = class {
3432
3434
  this.updateAriaSlider();
3433
3435
  this.emit("snap", {
3434
3436
  id: target.id,
3435
- size: target.size,
3436
- progress: this.computeProgress(target.size)
3437
+ size: this.size,
3438
+ progress: this.computeProgress(this.size)
3437
3439
  });
3438
3440
  if (target.size > 0 && !this.lifecycle.isInstalled) {
3439
3441
  this.emit("open", { id: target.id });
package/dist/svelte.js CHANGED
@@ -2649,8 +2649,8 @@ var BottomSheetEngine = class {
2649
2649
  this.updateAriaSlider();
2650
2650
  this.emit("snap", {
2651
2651
  id,
2652
- size: target.size,
2653
- progress: this.computeProgress(target.size)
2652
+ size: this.size,
2653
+ progress: this.computeProgress(this.size)
2654
2654
  });
2655
2655
  if (wasClosed && target.size > 0) {
2656
2656
  this.emit("open", { id });
@@ -2729,12 +2729,12 @@ var BottomSheetEngine = class {
2729
2729
  const value = typeof h === "number" ? `${h}px` : h;
2730
2730
  const axis = layoutAxis(this.mode);
2731
2731
  this.element.style.setProperty(
2732
- axis === "height" ? "maxHeight" : "maxWidth",
2732
+ axis === "height" ? "max-height" : "max-width",
2733
2733
  value
2734
2734
  );
2735
2735
  if (typeof h === "number") {
2736
2736
  this.maxHeightCap = h;
2737
- this.clampToMaxHeight();
2737
+ this.recompute();
2738
2738
  } else if (typeof window !== "undefined") {
2739
2739
  const probe2 = document.createElement("div");
2740
2740
  probe2.style.cssText = `position:absolute;visibility:hidden;pointer-events:none;${axis === "height" ? "height" : "width"}:${value};`;
@@ -2742,7 +2742,7 @@ var BottomSheetEngine = class {
2742
2742
  const measured = axis === "height" ? probe2.offsetHeight : probe2.offsetWidth;
2743
2743
  probe2.remove();
2744
2744
  this.maxHeightCap = measured > 0 ? measured : void 0;
2745
- this.clampToMaxHeight();
2745
+ this.recompute();
2746
2746
  }
2747
2747
  }
2748
2748
  clampToMaxHeight() {
@@ -2750,9 +2750,6 @@ var BottomSheetEngine = class {
2750
2750
  if (this.snaps.getMaxAxisSize() > this.maxHeightCap) {
2751
2751
  this.snaps.setMaxAxisSize(this.maxHeightCap);
2752
2752
  }
2753
- if (this.size > this.maxHeightCap && !this.gesture?.isDragging) {
2754
- this.applySize(this.maxHeightCap);
2755
- }
2756
2753
  }
2757
2754
  setAllowed(ids, snap) {
2758
2755
  if (this.destroyed) return;
@@ -2890,6 +2887,7 @@ var BottomSheetEngine = class {
2890
2887
  recompute() {
2891
2888
  if (this.destroyed) return;
2892
2889
  this.snaps.recompute();
2890
+ this.clampToMaxHeight();
2893
2891
  this.scrim.invalidateOpacityCache();
2894
2892
  if (this.gesture?.isDragging) return;
2895
2893
  const current = this.snaps.findById(this.activeId);
@@ -2947,9 +2945,10 @@ var BottomSheetEngine = class {
2947
2945
  const handleSize = vertical ? this.handle.offsetHeight : this.handle.offsetWidth;
2948
2946
  const content = this.scrollContainer;
2949
2947
  const natural = content ? handleSize + this.measureContentExtent(vertical) : handleSize;
2950
- if (typeof window === "undefined") return natural;
2948
+ const capped = this.maxHeightCap !== void 0 ? Math.min(natural, this.maxHeightCap) : natural;
2949
+ if (typeof window === "undefined") return capped;
2951
2950
  const viewport = vertical ? window.innerHeight : window.innerWidth;
2952
- return viewport > 0 ? Math.min(natural, viewport) : natural;
2951
+ return viewport > 0 ? Math.min(capped, viewport) : capped;
2953
2952
  }
2954
2953
  installFitObserver() {
2955
2954
  if (typeof ResizeObserver === "undefined") return;
@@ -3320,8 +3319,8 @@ var BottomSheetEngine = class {
3320
3319
  this.updateAriaSlider();
3321
3320
  this.emit("snap", {
3322
3321
  id: target.id,
3323
- size: target.size,
3324
- progress: this.computeProgress(target.size)
3322
+ size: this.size,
3323
+ progress: this.computeProgress(this.size)
3325
3324
  });
3326
3325
  this.haptic();
3327
3326
  if (previousSnapSize === 0 && target.size > 0) {
@@ -3346,23 +3345,25 @@ var BottomSheetEngine = class {
3346
3345
  }
3347
3346
  }
3348
3347
  applySize(size) {
3349
- this.size = size;
3350
- const offset = this.snaps.getMaxAxisSize() - size;
3348
+ const cap = this.snaps.getMaxAxisSize();
3349
+ const clamped = cap > 0 && size > cap && !this.gesture?.isDragging ? cap : size;
3350
+ this.size = clamped;
3351
+ const offset = cap - clamped;
3351
3352
  const style = this.element.style;
3352
3353
  style.transform = this.transformTemplate(offset);
3353
- if (this.sizeWriteSentinel.shouldWrite(size, SIZE_WRITE_EPSILON)) {
3354
- style.setProperty("--bs-size", `${size}px`);
3354
+ if (this.sizeWriteSentinel.shouldWrite(clamped, SIZE_WRITE_EPSILON)) {
3355
+ style.setProperty("--bs-size", `${clamped}px`);
3355
3356
  if (this.scrimParent) {
3356
- this.scrimParent.style.setProperty("--bs-size", `${size}px`);
3357
+ this.scrimParent.style.setProperty("--bs-size", `${clamped}px`);
3357
3358
  }
3358
3359
  if (this.anchorHost && this.anchorHost !== this.scrimParent) {
3359
- this.anchorHost.style.setProperty("--bs-size", `${size}px`);
3360
+ this.anchorHost.style.setProperty("--bs-size", `${clamped}px`);
3360
3361
  }
3361
3362
  if (this.rootEl && this.rootEl !== this.scrimParent && this.rootEl !== this.anchorHost) {
3362
- this.rootEl.style.setProperty("--bs-size", `${size}px`);
3363
+ this.rootEl.style.setProperty("--bs-size", `${clamped}px`);
3363
3364
  }
3364
3365
  }
3365
- const progress = this.computeProgress(size);
3366
+ const progress = this.computeProgress(clamped);
3366
3367
  const progressChanged = this.progressWriteSentinel.shouldWrite(
3367
3368
  progress,
3368
3369
  OPACITY_WRITE_EPSILON
@@ -3379,14 +3380,15 @@ var BottomSheetEngine = class {
3379
3380
  this.scrim.applyOpacity(progress, progressChanged);
3380
3381
  if (progressChanged && this.bus.listenerCount("progress") > 0) {
3381
3382
  this.progressPayload.value = progress;
3382
- this.progressPayload.size = size;
3383
+ this.progressPayload.size = clamped;
3383
3384
  this.emit("progress", this.progressPayload);
3384
3385
  }
3385
3386
  }
3386
3387
  computeProgress(size) {
3387
3388
  const { min, max } = this.getAllowedRange();
3388
- if (max <= min) return 0;
3389
- return Math.min(Math.max((size - min) / (max - min), 0), 1);
3389
+ const reachableMax = Math.min(max, this.snaps.getMaxAxisSize());
3390
+ if (reachableMax <= min) return 0;
3391
+ return Math.min(Math.max((size - min) / (reachableMax - min), 0), 1);
3390
3392
  }
3391
3393
  handleOpen() {
3392
3394
  sheetStack.promote(this.id);
@@ -3410,8 +3412,8 @@ var BottomSheetEngine = class {
3410
3412
  this.updateAriaSlider();
3411
3413
  this.emit("snap", {
3412
3414
  id: target.id,
3413
- size: target.size,
3414
- progress: this.computeProgress(target.size)
3415
+ size: this.size,
3416
+ progress: this.computeProgress(this.size)
3415
3417
  });
3416
3418
  if (target.size > 0 && !this.lifecycle.isInstalled) {
3417
3419
  this.emit("open", { id: target.id });
package/dist/vue.cjs CHANGED
@@ -2649,8 +2649,8 @@ var BottomSheetEngine = class {
2649
2649
  this.updateAriaSlider();
2650
2650
  this.emit("snap", {
2651
2651
  id,
2652
- size: target.size,
2653
- progress: this.computeProgress(target.size)
2652
+ size: this.size,
2653
+ progress: this.computeProgress(this.size)
2654
2654
  });
2655
2655
  if (wasClosed && target.size > 0) {
2656
2656
  this.emit("open", { id });
@@ -2729,12 +2729,12 @@ var BottomSheetEngine = class {
2729
2729
  const value = typeof h === "number" ? `${h}px` : h;
2730
2730
  const axis = layoutAxis(this.mode);
2731
2731
  this.element.style.setProperty(
2732
- axis === "height" ? "maxHeight" : "maxWidth",
2732
+ axis === "height" ? "max-height" : "max-width",
2733
2733
  value
2734
2734
  );
2735
2735
  if (typeof h === "number") {
2736
2736
  this.maxHeightCap = h;
2737
- this.clampToMaxHeight();
2737
+ this.recompute();
2738
2738
  } else if (typeof window !== "undefined") {
2739
2739
  const probe2 = document.createElement("div");
2740
2740
  probe2.style.cssText = `position:absolute;visibility:hidden;pointer-events:none;${axis === "height" ? "height" : "width"}:${value};`;
@@ -2742,7 +2742,7 @@ var BottomSheetEngine = class {
2742
2742
  const measured = axis === "height" ? probe2.offsetHeight : probe2.offsetWidth;
2743
2743
  probe2.remove();
2744
2744
  this.maxHeightCap = measured > 0 ? measured : void 0;
2745
- this.clampToMaxHeight();
2745
+ this.recompute();
2746
2746
  }
2747
2747
  }
2748
2748
  clampToMaxHeight() {
@@ -2750,9 +2750,6 @@ var BottomSheetEngine = class {
2750
2750
  if (this.snaps.getMaxAxisSize() > this.maxHeightCap) {
2751
2751
  this.snaps.setMaxAxisSize(this.maxHeightCap);
2752
2752
  }
2753
- if (this.size > this.maxHeightCap && !this.gesture?.isDragging) {
2754
- this.applySize(this.maxHeightCap);
2755
- }
2756
2753
  }
2757
2754
  setAllowed(ids, snap) {
2758
2755
  if (this.destroyed) return;
@@ -2890,6 +2887,7 @@ var BottomSheetEngine = class {
2890
2887
  recompute() {
2891
2888
  if (this.destroyed) return;
2892
2889
  this.snaps.recompute();
2890
+ this.clampToMaxHeight();
2893
2891
  this.scrim.invalidateOpacityCache();
2894
2892
  if (this.gesture?.isDragging) return;
2895
2893
  const current = this.snaps.findById(this.activeId);
@@ -2947,9 +2945,10 @@ var BottomSheetEngine = class {
2947
2945
  const handleSize = vertical ? this.handle.offsetHeight : this.handle.offsetWidth;
2948
2946
  const content = this.scrollContainer;
2949
2947
  const natural = content ? handleSize + this.measureContentExtent(vertical) : handleSize;
2950
- if (typeof window === "undefined") return natural;
2948
+ const capped = this.maxHeightCap !== void 0 ? Math.min(natural, this.maxHeightCap) : natural;
2949
+ if (typeof window === "undefined") return capped;
2951
2950
  const viewport = vertical ? window.innerHeight : window.innerWidth;
2952
- return viewport > 0 ? Math.min(natural, viewport) : natural;
2951
+ return viewport > 0 ? Math.min(capped, viewport) : capped;
2953
2952
  }
2954
2953
  installFitObserver() {
2955
2954
  if (typeof ResizeObserver === "undefined") return;
@@ -3320,8 +3319,8 @@ var BottomSheetEngine = class {
3320
3319
  this.updateAriaSlider();
3321
3320
  this.emit("snap", {
3322
3321
  id: target.id,
3323
- size: target.size,
3324
- progress: this.computeProgress(target.size)
3322
+ size: this.size,
3323
+ progress: this.computeProgress(this.size)
3325
3324
  });
3326
3325
  this.haptic();
3327
3326
  if (previousSnapSize === 0 && target.size > 0) {
@@ -3346,23 +3345,25 @@ var BottomSheetEngine = class {
3346
3345
  }
3347
3346
  }
3348
3347
  applySize(size) {
3349
- this.size = size;
3350
- const offset = this.snaps.getMaxAxisSize() - size;
3348
+ const cap = this.snaps.getMaxAxisSize();
3349
+ const clamped = cap > 0 && size > cap && !this.gesture?.isDragging ? cap : size;
3350
+ this.size = clamped;
3351
+ const offset = cap - clamped;
3351
3352
  const style = this.element.style;
3352
3353
  style.transform = this.transformTemplate(offset);
3353
- if (this.sizeWriteSentinel.shouldWrite(size, SIZE_WRITE_EPSILON)) {
3354
- style.setProperty("--bs-size", `${size}px`);
3354
+ if (this.sizeWriteSentinel.shouldWrite(clamped, SIZE_WRITE_EPSILON)) {
3355
+ style.setProperty("--bs-size", `${clamped}px`);
3355
3356
  if (this.scrimParent) {
3356
- this.scrimParent.style.setProperty("--bs-size", `${size}px`);
3357
+ this.scrimParent.style.setProperty("--bs-size", `${clamped}px`);
3357
3358
  }
3358
3359
  if (this.anchorHost && this.anchorHost !== this.scrimParent) {
3359
- this.anchorHost.style.setProperty("--bs-size", `${size}px`);
3360
+ this.anchorHost.style.setProperty("--bs-size", `${clamped}px`);
3360
3361
  }
3361
3362
  if (this.rootEl && this.rootEl !== this.scrimParent && this.rootEl !== this.anchorHost) {
3362
- this.rootEl.style.setProperty("--bs-size", `${size}px`);
3363
+ this.rootEl.style.setProperty("--bs-size", `${clamped}px`);
3363
3364
  }
3364
3365
  }
3365
- const progress = this.computeProgress(size);
3366
+ const progress = this.computeProgress(clamped);
3366
3367
  const progressChanged = this.progressWriteSentinel.shouldWrite(
3367
3368
  progress,
3368
3369
  OPACITY_WRITE_EPSILON
@@ -3379,14 +3380,15 @@ var BottomSheetEngine = class {
3379
3380
  this.scrim.applyOpacity(progress, progressChanged);
3380
3381
  if (progressChanged && this.bus.listenerCount("progress") > 0) {
3381
3382
  this.progressPayload.value = progress;
3382
- this.progressPayload.size = size;
3383
+ this.progressPayload.size = clamped;
3383
3384
  this.emit("progress", this.progressPayload);
3384
3385
  }
3385
3386
  }
3386
3387
  computeProgress(size) {
3387
3388
  const { min, max } = this.getAllowedRange();
3388
- if (max <= min) return 0;
3389
- return Math.min(Math.max((size - min) / (max - min), 0), 1);
3389
+ const reachableMax = Math.min(max, this.snaps.getMaxAxisSize());
3390
+ if (reachableMax <= min) return 0;
3391
+ return Math.min(Math.max((size - min) / (reachableMax - min), 0), 1);
3390
3392
  }
3391
3393
  handleOpen() {
3392
3394
  sheetStack.promote(this.id);
@@ -3410,8 +3412,8 @@ var BottomSheetEngine = class {
3410
3412
  this.updateAriaSlider();
3411
3413
  this.emit("snap", {
3412
3414
  id: target.id,
3413
- size: target.size,
3414
- progress: this.computeProgress(target.size)
3415
+ size: this.size,
3416
+ progress: this.computeProgress(this.size)
3415
3417
  });
3416
3418
  if (target.size > 0 && !this.lifecycle.isInstalled) {
3417
3419
  this.emit("open", { id: target.id });
package/dist/vue.js CHANGED
@@ -2647,8 +2647,8 @@ var BottomSheetEngine = class {
2647
2647
  this.updateAriaSlider();
2648
2648
  this.emit("snap", {
2649
2649
  id,
2650
- size: target.size,
2651
- progress: this.computeProgress(target.size)
2650
+ size: this.size,
2651
+ progress: this.computeProgress(this.size)
2652
2652
  });
2653
2653
  if (wasClosed && target.size > 0) {
2654
2654
  this.emit("open", { id });
@@ -2727,12 +2727,12 @@ var BottomSheetEngine = class {
2727
2727
  const value = typeof h === "number" ? `${h}px` : h;
2728
2728
  const axis = layoutAxis(this.mode);
2729
2729
  this.element.style.setProperty(
2730
- axis === "height" ? "maxHeight" : "maxWidth",
2730
+ axis === "height" ? "max-height" : "max-width",
2731
2731
  value
2732
2732
  );
2733
2733
  if (typeof h === "number") {
2734
2734
  this.maxHeightCap = h;
2735
- this.clampToMaxHeight();
2735
+ this.recompute();
2736
2736
  } else if (typeof window !== "undefined") {
2737
2737
  const probe2 = document.createElement("div");
2738
2738
  probe2.style.cssText = `position:absolute;visibility:hidden;pointer-events:none;${axis === "height" ? "height" : "width"}:${value};`;
@@ -2740,7 +2740,7 @@ var BottomSheetEngine = class {
2740
2740
  const measured = axis === "height" ? probe2.offsetHeight : probe2.offsetWidth;
2741
2741
  probe2.remove();
2742
2742
  this.maxHeightCap = measured > 0 ? measured : void 0;
2743
- this.clampToMaxHeight();
2743
+ this.recompute();
2744
2744
  }
2745
2745
  }
2746
2746
  clampToMaxHeight() {
@@ -2748,9 +2748,6 @@ var BottomSheetEngine = class {
2748
2748
  if (this.snaps.getMaxAxisSize() > this.maxHeightCap) {
2749
2749
  this.snaps.setMaxAxisSize(this.maxHeightCap);
2750
2750
  }
2751
- if (this.size > this.maxHeightCap && !this.gesture?.isDragging) {
2752
- this.applySize(this.maxHeightCap);
2753
- }
2754
2751
  }
2755
2752
  setAllowed(ids, snap) {
2756
2753
  if (this.destroyed) return;
@@ -2888,6 +2885,7 @@ var BottomSheetEngine = class {
2888
2885
  recompute() {
2889
2886
  if (this.destroyed) return;
2890
2887
  this.snaps.recompute();
2888
+ this.clampToMaxHeight();
2891
2889
  this.scrim.invalidateOpacityCache();
2892
2890
  if (this.gesture?.isDragging) return;
2893
2891
  const current = this.snaps.findById(this.activeId);
@@ -2945,9 +2943,10 @@ var BottomSheetEngine = class {
2945
2943
  const handleSize = vertical ? this.handle.offsetHeight : this.handle.offsetWidth;
2946
2944
  const content = this.scrollContainer;
2947
2945
  const natural = content ? handleSize + this.measureContentExtent(vertical) : handleSize;
2948
- if (typeof window === "undefined") return natural;
2946
+ const capped = this.maxHeightCap !== void 0 ? Math.min(natural, this.maxHeightCap) : natural;
2947
+ if (typeof window === "undefined") return capped;
2949
2948
  const viewport = vertical ? window.innerHeight : window.innerWidth;
2950
- return viewport > 0 ? Math.min(natural, viewport) : natural;
2949
+ return viewport > 0 ? Math.min(capped, viewport) : capped;
2951
2950
  }
2952
2951
  installFitObserver() {
2953
2952
  if (typeof ResizeObserver === "undefined") return;
@@ -3318,8 +3317,8 @@ var BottomSheetEngine = class {
3318
3317
  this.updateAriaSlider();
3319
3318
  this.emit("snap", {
3320
3319
  id: target.id,
3321
- size: target.size,
3322
- progress: this.computeProgress(target.size)
3320
+ size: this.size,
3321
+ progress: this.computeProgress(this.size)
3323
3322
  });
3324
3323
  this.haptic();
3325
3324
  if (previousSnapSize === 0 && target.size > 0) {
@@ -3344,23 +3343,25 @@ var BottomSheetEngine = class {
3344
3343
  }
3345
3344
  }
3346
3345
  applySize(size) {
3347
- this.size = size;
3348
- const offset = this.snaps.getMaxAxisSize() - size;
3346
+ const cap = this.snaps.getMaxAxisSize();
3347
+ const clamped = cap > 0 && size > cap && !this.gesture?.isDragging ? cap : size;
3348
+ this.size = clamped;
3349
+ const offset = cap - clamped;
3349
3350
  const style = this.element.style;
3350
3351
  style.transform = this.transformTemplate(offset);
3351
- if (this.sizeWriteSentinel.shouldWrite(size, SIZE_WRITE_EPSILON)) {
3352
- style.setProperty("--bs-size", `${size}px`);
3352
+ if (this.sizeWriteSentinel.shouldWrite(clamped, SIZE_WRITE_EPSILON)) {
3353
+ style.setProperty("--bs-size", `${clamped}px`);
3353
3354
  if (this.scrimParent) {
3354
- this.scrimParent.style.setProperty("--bs-size", `${size}px`);
3355
+ this.scrimParent.style.setProperty("--bs-size", `${clamped}px`);
3355
3356
  }
3356
3357
  if (this.anchorHost && this.anchorHost !== this.scrimParent) {
3357
- this.anchorHost.style.setProperty("--bs-size", `${size}px`);
3358
+ this.anchorHost.style.setProperty("--bs-size", `${clamped}px`);
3358
3359
  }
3359
3360
  if (this.rootEl && this.rootEl !== this.scrimParent && this.rootEl !== this.anchorHost) {
3360
- this.rootEl.style.setProperty("--bs-size", `${size}px`);
3361
+ this.rootEl.style.setProperty("--bs-size", `${clamped}px`);
3361
3362
  }
3362
3363
  }
3363
- const progress = this.computeProgress(size);
3364
+ const progress = this.computeProgress(clamped);
3364
3365
  const progressChanged = this.progressWriteSentinel.shouldWrite(
3365
3366
  progress,
3366
3367
  OPACITY_WRITE_EPSILON
@@ -3377,14 +3378,15 @@ var BottomSheetEngine = class {
3377
3378
  this.scrim.applyOpacity(progress, progressChanged);
3378
3379
  if (progressChanged && this.bus.listenerCount("progress") > 0) {
3379
3380
  this.progressPayload.value = progress;
3380
- this.progressPayload.size = size;
3381
+ this.progressPayload.size = clamped;
3381
3382
  this.emit("progress", this.progressPayload);
3382
3383
  }
3383
3384
  }
3384
3385
  computeProgress(size) {
3385
3386
  const { min, max } = this.getAllowedRange();
3386
- if (max <= min) return 0;
3387
- return Math.min(Math.max((size - min) / (max - min), 0), 1);
3387
+ const reachableMax = Math.min(max, this.snaps.getMaxAxisSize());
3388
+ if (reachableMax <= min) return 0;
3389
+ return Math.min(Math.max((size - min) / (reachableMax - min), 0), 1);
3388
3390
  }
3389
3391
  handleOpen() {
3390
3392
  sheetStack.promote(this.id);
@@ -3408,8 +3410,8 @@ var BottomSheetEngine = class {
3408
3410
  this.updateAriaSlider();
3409
3411
  this.emit("snap", {
3410
3412
  id: target.id,
3411
- size: target.size,
3412
- progress: this.computeProgress(target.size)
3413
+ size: this.size,
3414
+ progress: this.computeProgress(this.size)
3413
3415
  });
3414
3416
  if (target.size > 0 && !this.lifecycle.isInstalled) {
3415
3417
  this.emit("open", { id: target.id });
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@surdeddd/bottom-sheet",
3
- "version": "0.6.1",
3
+ "version": "0.7.0",
4
4
  "description": "Universal, headless bottom sheet — framework-agnostic core with React, Vue 3, Svelte, Solid, Qwik, Preact, Lit and Custom Element adapters. Pointer Events, snap points, momentum, a11y, SSR-safe.",
5
5
  "type": "module",
6
6
  "license": "MIT",