@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/qwik.js CHANGED
@@ -2648,8 +2648,8 @@ var BottomSheetEngine = class {
2648
2648
  this.updateAriaSlider();
2649
2649
  this.emit("snap", {
2650
2650
  id,
2651
- size: target.size,
2652
- progress: this.computeProgress(target.size)
2651
+ size: this.size,
2652
+ progress: this.computeProgress(this.size)
2653
2653
  });
2654
2654
  if (wasClosed && target.size > 0) {
2655
2655
  this.emit("open", { id });
@@ -2728,12 +2728,12 @@ var BottomSheetEngine = class {
2728
2728
  const value = typeof h === "number" ? `${h}px` : h;
2729
2729
  const axis = layoutAxis(this.mode);
2730
2730
  this.element.style.setProperty(
2731
- axis === "height" ? "maxHeight" : "maxWidth",
2731
+ axis === "height" ? "max-height" : "max-width",
2732
2732
  value
2733
2733
  );
2734
2734
  if (typeof h === "number") {
2735
2735
  this.maxHeightCap = h;
2736
- this.clampToMaxHeight();
2736
+ this.recompute();
2737
2737
  } else if (typeof window !== "undefined") {
2738
2738
  const probe2 = document.createElement("div");
2739
2739
  probe2.style.cssText = `position:absolute;visibility:hidden;pointer-events:none;${axis === "height" ? "height" : "width"}:${value};`;
@@ -2741,7 +2741,7 @@ var BottomSheetEngine = class {
2741
2741
  const measured = axis === "height" ? probe2.offsetHeight : probe2.offsetWidth;
2742
2742
  probe2.remove();
2743
2743
  this.maxHeightCap = measured > 0 ? measured : void 0;
2744
- this.clampToMaxHeight();
2744
+ this.recompute();
2745
2745
  }
2746
2746
  }
2747
2747
  clampToMaxHeight() {
@@ -2749,9 +2749,6 @@ var BottomSheetEngine = class {
2749
2749
  if (this.snaps.getMaxAxisSize() > this.maxHeightCap) {
2750
2750
  this.snaps.setMaxAxisSize(this.maxHeightCap);
2751
2751
  }
2752
- if (this.size > this.maxHeightCap && !this.gesture?.isDragging) {
2753
- this.applySize(this.maxHeightCap);
2754
- }
2755
2752
  }
2756
2753
  setAllowed(ids, snap) {
2757
2754
  if (this.destroyed) return;
@@ -2889,6 +2886,7 @@ var BottomSheetEngine = class {
2889
2886
  recompute() {
2890
2887
  if (this.destroyed) return;
2891
2888
  this.snaps.recompute();
2889
+ this.clampToMaxHeight();
2892
2890
  this.scrim.invalidateOpacityCache();
2893
2891
  if (this.gesture?.isDragging) return;
2894
2892
  const current = this.snaps.findById(this.activeId);
@@ -2946,9 +2944,10 @@ var BottomSheetEngine = class {
2946
2944
  const handleSize = vertical ? this.handle.offsetHeight : this.handle.offsetWidth;
2947
2945
  const content = this.scrollContainer;
2948
2946
  const natural = content ? handleSize + this.measureContentExtent(vertical) : handleSize;
2949
- if (typeof window === "undefined") return natural;
2947
+ const capped = this.maxHeightCap !== void 0 ? Math.min(natural, this.maxHeightCap) : natural;
2948
+ if (typeof window === "undefined") return capped;
2950
2949
  const viewport = vertical ? window.innerHeight : window.innerWidth;
2951
- return viewport > 0 ? Math.min(natural, viewport) : natural;
2950
+ return viewport > 0 ? Math.min(capped, viewport) : capped;
2952
2951
  }
2953
2952
  installFitObserver() {
2954
2953
  if (typeof ResizeObserver === "undefined") return;
@@ -3319,8 +3318,8 @@ var BottomSheetEngine = class {
3319
3318
  this.updateAriaSlider();
3320
3319
  this.emit("snap", {
3321
3320
  id: target.id,
3322
- size: target.size,
3323
- progress: this.computeProgress(target.size)
3321
+ size: this.size,
3322
+ progress: this.computeProgress(this.size)
3324
3323
  });
3325
3324
  this.haptic();
3326
3325
  if (previousSnapSize === 0 && target.size > 0) {
@@ -3345,23 +3344,25 @@ var BottomSheetEngine = class {
3345
3344
  }
3346
3345
  }
3347
3346
  applySize(size) {
3348
- this.size = size;
3349
- const offset = this.snaps.getMaxAxisSize() - size;
3347
+ const cap = this.snaps.getMaxAxisSize();
3348
+ const clamped = cap > 0 && size > cap && !this.gesture?.isDragging ? cap : size;
3349
+ this.size = clamped;
3350
+ const offset = cap - clamped;
3350
3351
  const style = this.element.style;
3351
3352
  style.transform = this.transformTemplate(offset);
3352
- if (this.sizeWriteSentinel.shouldWrite(size, SIZE_WRITE_EPSILON)) {
3353
- style.setProperty("--bs-size", `${size}px`);
3353
+ if (this.sizeWriteSentinel.shouldWrite(clamped, SIZE_WRITE_EPSILON)) {
3354
+ style.setProperty("--bs-size", `${clamped}px`);
3354
3355
  if (this.scrimParent) {
3355
- this.scrimParent.style.setProperty("--bs-size", `${size}px`);
3356
+ this.scrimParent.style.setProperty("--bs-size", `${clamped}px`);
3356
3357
  }
3357
3358
  if (this.anchorHost && this.anchorHost !== this.scrimParent) {
3358
- this.anchorHost.style.setProperty("--bs-size", `${size}px`);
3359
+ this.anchorHost.style.setProperty("--bs-size", `${clamped}px`);
3359
3360
  }
3360
3361
  if (this.rootEl && this.rootEl !== this.scrimParent && this.rootEl !== this.anchorHost) {
3361
- this.rootEl.style.setProperty("--bs-size", `${size}px`);
3362
+ this.rootEl.style.setProperty("--bs-size", `${clamped}px`);
3362
3363
  }
3363
3364
  }
3364
- const progress = this.computeProgress(size);
3365
+ const progress = this.computeProgress(clamped);
3365
3366
  const progressChanged = this.progressWriteSentinel.shouldWrite(
3366
3367
  progress,
3367
3368
  OPACITY_WRITE_EPSILON
@@ -3378,14 +3379,15 @@ var BottomSheetEngine = class {
3378
3379
  this.scrim.applyOpacity(progress, progressChanged);
3379
3380
  if (progressChanged && this.bus.listenerCount("progress") > 0) {
3380
3381
  this.progressPayload.value = progress;
3381
- this.progressPayload.size = size;
3382
+ this.progressPayload.size = clamped;
3382
3383
  this.emit("progress", this.progressPayload);
3383
3384
  }
3384
3385
  }
3385
3386
  computeProgress(size) {
3386
3387
  const { min, max } = this.getAllowedRange();
3387
- if (max <= min) return 0;
3388
- return Math.min(Math.max((size - min) / (max - min), 0), 1);
3388
+ const reachableMax = Math.min(max, this.snaps.getMaxAxisSize());
3389
+ if (reachableMax <= min) return 0;
3390
+ return Math.min(Math.max((size - min) / (reachableMax - min), 0), 1);
3389
3391
  }
3390
3392
  handleOpen() {
3391
3393
  sheetStack.promote(this.id);
@@ -3409,8 +3411,8 @@ var BottomSheetEngine = class {
3409
3411
  this.updateAriaSlider();
3410
3412
  this.emit("snap", {
3411
3413
  id: target.id,
3412
- size: target.size,
3413
- progress: this.computeProgress(target.size)
3414
+ size: this.size,
3415
+ progress: this.computeProgress(this.size)
3414
3416
  });
3415
3417
  if (target.size > 0 && !this.lifecycle.isInstalled) {
3416
3418
  this.emit("open", { id: target.id });
package/dist/react.cjs CHANGED
@@ -2657,8 +2657,8 @@ var BottomSheetEngine = class {
2657
2657
  this.updateAriaSlider();
2658
2658
  this.emit("snap", {
2659
2659
  id,
2660
- size: target.size,
2661
- progress: this.computeProgress(target.size)
2660
+ size: this.size,
2661
+ progress: this.computeProgress(this.size)
2662
2662
  });
2663
2663
  if (wasClosed && target.size > 0) {
2664
2664
  this.emit("open", { id });
@@ -2737,12 +2737,12 @@ var BottomSheetEngine = class {
2737
2737
  const value = typeof h === "number" ? `${h}px` : h;
2738
2738
  const axis = layoutAxis(this.mode);
2739
2739
  this.element.style.setProperty(
2740
- axis === "height" ? "maxHeight" : "maxWidth",
2740
+ axis === "height" ? "max-height" : "max-width",
2741
2741
  value
2742
2742
  );
2743
2743
  if (typeof h === "number") {
2744
2744
  this.maxHeightCap = h;
2745
- this.clampToMaxHeight();
2745
+ this.recompute();
2746
2746
  } else if (typeof window !== "undefined") {
2747
2747
  const probe2 = document.createElement("div");
2748
2748
  probe2.style.cssText = `position:absolute;visibility:hidden;pointer-events:none;${axis === "height" ? "height" : "width"}:${value};`;
@@ -2750,7 +2750,7 @@ var BottomSheetEngine = class {
2750
2750
  const measured = axis === "height" ? probe2.offsetHeight : probe2.offsetWidth;
2751
2751
  probe2.remove();
2752
2752
  this.maxHeightCap = measured > 0 ? measured : void 0;
2753
- this.clampToMaxHeight();
2753
+ this.recompute();
2754
2754
  }
2755
2755
  }
2756
2756
  clampToMaxHeight() {
@@ -2758,9 +2758,6 @@ var BottomSheetEngine = class {
2758
2758
  if (this.snaps.getMaxAxisSize() > this.maxHeightCap) {
2759
2759
  this.snaps.setMaxAxisSize(this.maxHeightCap);
2760
2760
  }
2761
- if (this.size > this.maxHeightCap && !this.gesture?.isDragging) {
2762
- this.applySize(this.maxHeightCap);
2763
- }
2764
2761
  }
2765
2762
  setAllowed(ids, snap) {
2766
2763
  if (this.destroyed) return;
@@ -2898,6 +2895,7 @@ var BottomSheetEngine = class {
2898
2895
  recompute() {
2899
2896
  if (this.destroyed) return;
2900
2897
  this.snaps.recompute();
2898
+ this.clampToMaxHeight();
2901
2899
  this.scrim.invalidateOpacityCache();
2902
2900
  if (this.gesture?.isDragging) return;
2903
2901
  const current = this.snaps.findById(this.activeId);
@@ -2955,9 +2953,10 @@ var BottomSheetEngine = class {
2955
2953
  const handleSize = vertical ? this.handle.offsetHeight : this.handle.offsetWidth;
2956
2954
  const content = this.scrollContainer;
2957
2955
  const natural = content ? handleSize + this.measureContentExtent(vertical) : handleSize;
2958
- if (typeof window === "undefined") return natural;
2956
+ const capped = this.maxHeightCap !== void 0 ? Math.min(natural, this.maxHeightCap) : natural;
2957
+ if (typeof window === "undefined") return capped;
2959
2958
  const viewport = vertical ? window.innerHeight : window.innerWidth;
2960
- return viewport > 0 ? Math.min(natural, viewport) : natural;
2959
+ return viewport > 0 ? Math.min(capped, viewport) : capped;
2961
2960
  }
2962
2961
  installFitObserver() {
2963
2962
  if (typeof ResizeObserver === "undefined") return;
@@ -3328,8 +3327,8 @@ var BottomSheetEngine = class {
3328
3327
  this.updateAriaSlider();
3329
3328
  this.emit("snap", {
3330
3329
  id: target.id,
3331
- size: target.size,
3332
- progress: this.computeProgress(target.size)
3330
+ size: this.size,
3331
+ progress: this.computeProgress(this.size)
3333
3332
  });
3334
3333
  this.haptic();
3335
3334
  if (previousSnapSize === 0 && target.size > 0) {
@@ -3354,23 +3353,25 @@ var BottomSheetEngine = class {
3354
3353
  }
3355
3354
  }
3356
3355
  applySize(size) {
3357
- this.size = size;
3358
- const offset = this.snaps.getMaxAxisSize() - size;
3356
+ const cap = this.snaps.getMaxAxisSize();
3357
+ const clamped = cap > 0 && size > cap && !this.gesture?.isDragging ? cap : size;
3358
+ this.size = clamped;
3359
+ const offset = cap - clamped;
3359
3360
  const style = this.element.style;
3360
3361
  style.transform = this.transformTemplate(offset);
3361
- if (this.sizeWriteSentinel.shouldWrite(size, SIZE_WRITE_EPSILON)) {
3362
- style.setProperty("--bs-size", `${size}px`);
3362
+ if (this.sizeWriteSentinel.shouldWrite(clamped, SIZE_WRITE_EPSILON)) {
3363
+ style.setProperty("--bs-size", `${clamped}px`);
3363
3364
  if (this.scrimParent) {
3364
- this.scrimParent.style.setProperty("--bs-size", `${size}px`);
3365
+ this.scrimParent.style.setProperty("--bs-size", `${clamped}px`);
3365
3366
  }
3366
3367
  if (this.anchorHost && this.anchorHost !== this.scrimParent) {
3367
- this.anchorHost.style.setProperty("--bs-size", `${size}px`);
3368
+ this.anchorHost.style.setProperty("--bs-size", `${clamped}px`);
3368
3369
  }
3369
3370
  if (this.rootEl && this.rootEl !== this.scrimParent && this.rootEl !== this.anchorHost) {
3370
- this.rootEl.style.setProperty("--bs-size", `${size}px`);
3371
+ this.rootEl.style.setProperty("--bs-size", `${clamped}px`);
3371
3372
  }
3372
3373
  }
3373
- const progress = this.computeProgress(size);
3374
+ const progress = this.computeProgress(clamped);
3374
3375
  const progressChanged = this.progressWriteSentinel.shouldWrite(
3375
3376
  progress,
3376
3377
  OPACITY_WRITE_EPSILON
@@ -3387,14 +3388,15 @@ var BottomSheetEngine = class {
3387
3388
  this.scrim.applyOpacity(progress, progressChanged);
3388
3389
  if (progressChanged && this.bus.listenerCount("progress") > 0) {
3389
3390
  this.progressPayload.value = progress;
3390
- this.progressPayload.size = size;
3391
+ this.progressPayload.size = clamped;
3391
3392
  this.emit("progress", this.progressPayload);
3392
3393
  }
3393
3394
  }
3394
3395
  computeProgress(size) {
3395
3396
  const { min, max } = this.getAllowedRange();
3396
- if (max <= min) return 0;
3397
- return Math.min(Math.max((size - min) / (max - min), 0), 1);
3397
+ const reachableMax = Math.min(max, this.snaps.getMaxAxisSize());
3398
+ if (reachableMax <= min) return 0;
3399
+ return Math.min(Math.max((size - min) / (reachableMax - min), 0), 1);
3398
3400
  }
3399
3401
  handleOpen() {
3400
3402
  sheetStack.promote(this.id);
@@ -3418,8 +3420,8 @@ var BottomSheetEngine = class {
3418
3420
  this.updateAriaSlider();
3419
3421
  this.emit("snap", {
3420
3422
  id: target.id,
3421
- size: target.size,
3422
- progress: this.computeProgress(target.size)
3423
+ size: this.size,
3424
+ progress: this.computeProgress(this.size)
3423
3425
  });
3424
3426
  if (target.size > 0 && !this.lifecycle.isInstalled) {
3425
3427
  this.emit("open", { id: target.id });
package/dist/react.js CHANGED
@@ -2655,8 +2655,8 @@ var BottomSheetEngine = class {
2655
2655
  this.updateAriaSlider();
2656
2656
  this.emit("snap", {
2657
2657
  id,
2658
- size: target.size,
2659
- progress: this.computeProgress(target.size)
2658
+ size: this.size,
2659
+ progress: this.computeProgress(this.size)
2660
2660
  });
2661
2661
  if (wasClosed && target.size > 0) {
2662
2662
  this.emit("open", { id });
@@ -2735,12 +2735,12 @@ var BottomSheetEngine = class {
2735
2735
  const value = typeof h === "number" ? `${h}px` : h;
2736
2736
  const axis = layoutAxis(this.mode);
2737
2737
  this.element.style.setProperty(
2738
- axis === "height" ? "maxHeight" : "maxWidth",
2738
+ axis === "height" ? "max-height" : "max-width",
2739
2739
  value
2740
2740
  );
2741
2741
  if (typeof h === "number") {
2742
2742
  this.maxHeightCap = h;
2743
- this.clampToMaxHeight();
2743
+ this.recompute();
2744
2744
  } else if (typeof window !== "undefined") {
2745
2745
  const probe2 = document.createElement("div");
2746
2746
  probe2.style.cssText = `position:absolute;visibility:hidden;pointer-events:none;${axis === "height" ? "height" : "width"}:${value};`;
@@ -2748,7 +2748,7 @@ var BottomSheetEngine = class {
2748
2748
  const measured = axis === "height" ? probe2.offsetHeight : probe2.offsetWidth;
2749
2749
  probe2.remove();
2750
2750
  this.maxHeightCap = measured > 0 ? measured : void 0;
2751
- this.clampToMaxHeight();
2751
+ this.recompute();
2752
2752
  }
2753
2753
  }
2754
2754
  clampToMaxHeight() {
@@ -2756,9 +2756,6 @@ var BottomSheetEngine = class {
2756
2756
  if (this.snaps.getMaxAxisSize() > this.maxHeightCap) {
2757
2757
  this.snaps.setMaxAxisSize(this.maxHeightCap);
2758
2758
  }
2759
- if (this.size > this.maxHeightCap && !this.gesture?.isDragging) {
2760
- this.applySize(this.maxHeightCap);
2761
- }
2762
2759
  }
2763
2760
  setAllowed(ids, snap) {
2764
2761
  if (this.destroyed) return;
@@ -2896,6 +2893,7 @@ var BottomSheetEngine = class {
2896
2893
  recompute() {
2897
2894
  if (this.destroyed) return;
2898
2895
  this.snaps.recompute();
2896
+ this.clampToMaxHeight();
2899
2897
  this.scrim.invalidateOpacityCache();
2900
2898
  if (this.gesture?.isDragging) return;
2901
2899
  const current = this.snaps.findById(this.activeId);
@@ -2953,9 +2951,10 @@ var BottomSheetEngine = class {
2953
2951
  const handleSize = vertical ? this.handle.offsetHeight : this.handle.offsetWidth;
2954
2952
  const content = this.scrollContainer;
2955
2953
  const natural = content ? handleSize + this.measureContentExtent(vertical) : handleSize;
2956
- if (typeof window === "undefined") return natural;
2954
+ const capped = this.maxHeightCap !== void 0 ? Math.min(natural, this.maxHeightCap) : natural;
2955
+ if (typeof window === "undefined") return capped;
2957
2956
  const viewport = vertical ? window.innerHeight : window.innerWidth;
2958
- return viewport > 0 ? Math.min(natural, viewport) : natural;
2957
+ return viewport > 0 ? Math.min(capped, viewport) : capped;
2959
2958
  }
2960
2959
  installFitObserver() {
2961
2960
  if (typeof ResizeObserver === "undefined") return;
@@ -3326,8 +3325,8 @@ var BottomSheetEngine = class {
3326
3325
  this.updateAriaSlider();
3327
3326
  this.emit("snap", {
3328
3327
  id: target.id,
3329
- size: target.size,
3330
- progress: this.computeProgress(target.size)
3328
+ size: this.size,
3329
+ progress: this.computeProgress(this.size)
3331
3330
  });
3332
3331
  this.haptic();
3333
3332
  if (previousSnapSize === 0 && target.size > 0) {
@@ -3352,23 +3351,25 @@ var BottomSheetEngine = class {
3352
3351
  }
3353
3352
  }
3354
3353
  applySize(size) {
3355
- this.size = size;
3356
- const offset = this.snaps.getMaxAxisSize() - size;
3354
+ const cap = this.snaps.getMaxAxisSize();
3355
+ const clamped = cap > 0 && size > cap && !this.gesture?.isDragging ? cap : size;
3356
+ this.size = clamped;
3357
+ const offset = cap - clamped;
3357
3358
  const style = this.element.style;
3358
3359
  style.transform = this.transformTemplate(offset);
3359
- if (this.sizeWriteSentinel.shouldWrite(size, SIZE_WRITE_EPSILON)) {
3360
- style.setProperty("--bs-size", `${size}px`);
3360
+ if (this.sizeWriteSentinel.shouldWrite(clamped, SIZE_WRITE_EPSILON)) {
3361
+ style.setProperty("--bs-size", `${clamped}px`);
3361
3362
  if (this.scrimParent) {
3362
- this.scrimParent.style.setProperty("--bs-size", `${size}px`);
3363
+ this.scrimParent.style.setProperty("--bs-size", `${clamped}px`);
3363
3364
  }
3364
3365
  if (this.anchorHost && this.anchorHost !== this.scrimParent) {
3365
- this.anchorHost.style.setProperty("--bs-size", `${size}px`);
3366
+ this.anchorHost.style.setProperty("--bs-size", `${clamped}px`);
3366
3367
  }
3367
3368
  if (this.rootEl && this.rootEl !== this.scrimParent && this.rootEl !== this.anchorHost) {
3368
- this.rootEl.style.setProperty("--bs-size", `${size}px`);
3369
+ this.rootEl.style.setProperty("--bs-size", `${clamped}px`);
3369
3370
  }
3370
3371
  }
3371
- const progress = this.computeProgress(size);
3372
+ const progress = this.computeProgress(clamped);
3372
3373
  const progressChanged = this.progressWriteSentinel.shouldWrite(
3373
3374
  progress,
3374
3375
  OPACITY_WRITE_EPSILON
@@ -3385,14 +3386,15 @@ var BottomSheetEngine = class {
3385
3386
  this.scrim.applyOpacity(progress, progressChanged);
3386
3387
  if (progressChanged && this.bus.listenerCount("progress") > 0) {
3387
3388
  this.progressPayload.value = progress;
3388
- this.progressPayload.size = size;
3389
+ this.progressPayload.size = clamped;
3389
3390
  this.emit("progress", this.progressPayload);
3390
3391
  }
3391
3392
  }
3392
3393
  computeProgress(size) {
3393
3394
  const { min, max } = this.getAllowedRange();
3394
- if (max <= min) return 0;
3395
- return Math.min(Math.max((size - min) / (max - min), 0), 1);
3395
+ const reachableMax = Math.min(max, this.snaps.getMaxAxisSize());
3396
+ if (reachableMax <= min) return 0;
3397
+ return Math.min(Math.max((size - min) / (reachableMax - min), 0), 1);
3396
3398
  }
3397
3399
  handleOpen() {
3398
3400
  sheetStack.promote(this.id);
@@ -3416,8 +3418,8 @@ var BottomSheetEngine = class {
3416
3418
  this.updateAriaSlider();
3417
3419
  this.emit("snap", {
3418
3420
  id: target.id,
3419
- size: target.size,
3420
- progress: this.computeProgress(target.size)
3421
+ size: this.size,
3422
+ progress: this.computeProgress(this.size)
3421
3423
  });
3422
3424
  if (target.size > 0 && !this.lifecycle.isInstalled) {
3423
3425
  this.emit("open", { id: target.id });
package/dist/solid.cjs CHANGED
@@ -2650,8 +2650,8 @@ var BottomSheetEngine = class {
2650
2650
  this.updateAriaSlider();
2651
2651
  this.emit("snap", {
2652
2652
  id,
2653
- size: target.size,
2654
- progress: this.computeProgress(target.size)
2653
+ size: this.size,
2654
+ progress: this.computeProgress(this.size)
2655
2655
  });
2656
2656
  if (wasClosed && target.size > 0) {
2657
2657
  this.emit("open", { id });
@@ -2730,12 +2730,12 @@ var BottomSheetEngine = class {
2730
2730
  const value = typeof h === "number" ? `${h}px` : h;
2731
2731
  const axis = layoutAxis(this.mode);
2732
2732
  this.element.style.setProperty(
2733
- axis === "height" ? "maxHeight" : "maxWidth",
2733
+ axis === "height" ? "max-height" : "max-width",
2734
2734
  value
2735
2735
  );
2736
2736
  if (typeof h === "number") {
2737
2737
  this.maxHeightCap = h;
2738
- this.clampToMaxHeight();
2738
+ this.recompute();
2739
2739
  } else if (typeof window !== "undefined") {
2740
2740
  const probe2 = document.createElement("div");
2741
2741
  probe2.style.cssText = `position:absolute;visibility:hidden;pointer-events:none;${axis === "height" ? "height" : "width"}:${value};`;
@@ -2743,7 +2743,7 @@ var BottomSheetEngine = class {
2743
2743
  const measured = axis === "height" ? probe2.offsetHeight : probe2.offsetWidth;
2744
2744
  probe2.remove();
2745
2745
  this.maxHeightCap = measured > 0 ? measured : void 0;
2746
- this.clampToMaxHeight();
2746
+ this.recompute();
2747
2747
  }
2748
2748
  }
2749
2749
  clampToMaxHeight() {
@@ -2751,9 +2751,6 @@ var BottomSheetEngine = class {
2751
2751
  if (this.snaps.getMaxAxisSize() > this.maxHeightCap) {
2752
2752
  this.snaps.setMaxAxisSize(this.maxHeightCap);
2753
2753
  }
2754
- if (this.size > this.maxHeightCap && !this.gesture?.isDragging) {
2755
- this.applySize(this.maxHeightCap);
2756
- }
2757
2754
  }
2758
2755
  setAllowed(ids, snap) {
2759
2756
  if (this.destroyed) return;
@@ -2891,6 +2888,7 @@ var BottomSheetEngine = class {
2891
2888
  recompute() {
2892
2889
  if (this.destroyed) return;
2893
2890
  this.snaps.recompute();
2891
+ this.clampToMaxHeight();
2894
2892
  this.scrim.invalidateOpacityCache();
2895
2893
  if (this.gesture?.isDragging) return;
2896
2894
  const current = this.snaps.findById(this.activeId);
@@ -2948,9 +2946,10 @@ var BottomSheetEngine = class {
2948
2946
  const handleSize = vertical ? this.handle.offsetHeight : this.handle.offsetWidth;
2949
2947
  const content = this.scrollContainer;
2950
2948
  const natural = content ? handleSize + this.measureContentExtent(vertical) : handleSize;
2951
- if (typeof window === "undefined") return natural;
2949
+ const capped = this.maxHeightCap !== void 0 ? Math.min(natural, this.maxHeightCap) : natural;
2950
+ if (typeof window === "undefined") return capped;
2952
2951
  const viewport = vertical ? window.innerHeight : window.innerWidth;
2953
- return viewport > 0 ? Math.min(natural, viewport) : natural;
2952
+ return viewport > 0 ? Math.min(capped, viewport) : capped;
2954
2953
  }
2955
2954
  installFitObserver() {
2956
2955
  if (typeof ResizeObserver === "undefined") return;
@@ -3321,8 +3320,8 @@ var BottomSheetEngine = class {
3321
3320
  this.updateAriaSlider();
3322
3321
  this.emit("snap", {
3323
3322
  id: target.id,
3324
- size: target.size,
3325
- progress: this.computeProgress(target.size)
3323
+ size: this.size,
3324
+ progress: this.computeProgress(this.size)
3326
3325
  });
3327
3326
  this.haptic();
3328
3327
  if (previousSnapSize === 0 && target.size > 0) {
@@ -3347,23 +3346,25 @@ var BottomSheetEngine = class {
3347
3346
  }
3348
3347
  }
3349
3348
  applySize(size) {
3350
- this.size = size;
3351
- const offset = this.snaps.getMaxAxisSize() - size;
3349
+ const cap = this.snaps.getMaxAxisSize();
3350
+ const clamped = cap > 0 && size > cap && !this.gesture?.isDragging ? cap : size;
3351
+ this.size = clamped;
3352
+ const offset = cap - clamped;
3352
3353
  const style = this.element.style;
3353
3354
  style.transform = this.transformTemplate(offset);
3354
- if (this.sizeWriteSentinel.shouldWrite(size, SIZE_WRITE_EPSILON)) {
3355
- style.setProperty("--bs-size", `${size}px`);
3355
+ if (this.sizeWriteSentinel.shouldWrite(clamped, SIZE_WRITE_EPSILON)) {
3356
+ style.setProperty("--bs-size", `${clamped}px`);
3356
3357
  if (this.scrimParent) {
3357
- this.scrimParent.style.setProperty("--bs-size", `${size}px`);
3358
+ this.scrimParent.style.setProperty("--bs-size", `${clamped}px`);
3358
3359
  }
3359
3360
  if (this.anchorHost && this.anchorHost !== this.scrimParent) {
3360
- this.anchorHost.style.setProperty("--bs-size", `${size}px`);
3361
+ this.anchorHost.style.setProperty("--bs-size", `${clamped}px`);
3361
3362
  }
3362
3363
  if (this.rootEl && this.rootEl !== this.scrimParent && this.rootEl !== this.anchorHost) {
3363
- this.rootEl.style.setProperty("--bs-size", `${size}px`);
3364
+ this.rootEl.style.setProperty("--bs-size", `${clamped}px`);
3364
3365
  }
3365
3366
  }
3366
- const progress = this.computeProgress(size);
3367
+ const progress = this.computeProgress(clamped);
3367
3368
  const progressChanged = this.progressWriteSentinel.shouldWrite(
3368
3369
  progress,
3369
3370
  OPACITY_WRITE_EPSILON
@@ -3380,14 +3381,15 @@ var BottomSheetEngine = class {
3380
3381
  this.scrim.applyOpacity(progress, progressChanged);
3381
3382
  if (progressChanged && this.bus.listenerCount("progress") > 0) {
3382
3383
  this.progressPayload.value = progress;
3383
- this.progressPayload.size = size;
3384
+ this.progressPayload.size = clamped;
3384
3385
  this.emit("progress", this.progressPayload);
3385
3386
  }
3386
3387
  }
3387
3388
  computeProgress(size) {
3388
3389
  const { min, max } = this.getAllowedRange();
3389
- if (max <= min) return 0;
3390
- return Math.min(Math.max((size - min) / (max - min), 0), 1);
3390
+ const reachableMax = Math.min(max, this.snaps.getMaxAxisSize());
3391
+ if (reachableMax <= min) return 0;
3392
+ return Math.min(Math.max((size - min) / (reachableMax - min), 0), 1);
3391
3393
  }
3392
3394
  handleOpen() {
3393
3395
  sheetStack.promote(this.id);
@@ -3411,8 +3413,8 @@ var BottomSheetEngine = class {
3411
3413
  this.updateAriaSlider();
3412
3414
  this.emit("snap", {
3413
3415
  id: target.id,
3414
- size: target.size,
3415
- progress: this.computeProgress(target.size)
3416
+ size: this.size,
3417
+ progress: this.computeProgress(this.size)
3416
3418
  });
3417
3419
  if (target.size > 0 && !this.lifecycle.isInstalled) {
3418
3420
  this.emit("open", { id: target.id });
@@ -3471,7 +3473,9 @@ var BottomSheet = (props) => {
3471
3473
  closeOnBack: props.closeOnBack,
3472
3474
  lockBodyScroll: props.lockBodyScroll,
3473
3475
  rubberBand: props.rubberBand,
3474
- backdropRange: props.backdropRange
3476
+ backdropRange: props.backdropRange,
3477
+ radius: props.radius,
3478
+ maxHeight: props.maxHeight
3475
3479
  };
3476
3480
  engine = new BottomSheetEngine(engineOpts);
3477
3481
  props.engineRef?.(engine);
package/dist/solid.d.cts CHANGED
@@ -319,6 +319,8 @@ type BottomSheetProps<TId extends string = string> = {
319
319
  lockBodyScroll?: boolean;
320
320
  rubberBand?: boolean;
321
321
  backdropRange?: [number, number];
322
+ radius?: string | number;
323
+ maxHeight?: string | number;
322
324
  backdrop?: boolean;
323
325
  closeOnBackdrop?: boolean;
324
326
  ariaLabel?: string;
package/dist/solid.d.ts CHANGED
@@ -319,6 +319,8 @@ type BottomSheetProps<TId extends string = string> = {
319
319
  lockBodyScroll?: boolean;
320
320
  rubberBand?: boolean;
321
321
  backdropRange?: [number, number];
322
+ radius?: string | number;
323
+ maxHeight?: string | number;
322
324
  backdrop?: boolean;
323
325
  closeOnBackdrop?: boolean;
324
326
  ariaLabel?: string;