@surdeddd/bottom-sheet 0.21.2 → 0.22.0

package/dist/react.cjs

@@ -2614,6 +2614,7 @@ var BottomSheetCore = class {
     __publicField(this, "lifecycle");
     __publicField(this, "closeOnBack");
     __publicField(this, "routedTo");
+    __publicField(this, "fitContentToSnap");
     __publicField(this, "persistent");
     __publicField(this, "disableCloseFlag");
     __publicField(this, "disableDragFlag");
@@ -2727,6 +2728,7 @@ var BottomSheetCore = class {
     );
     this.closeOnBack = resolved.closeOnBack;
     this.routedTo = opts.routedTo;
+    this.fitContentToSnap = opts.fitContentToSnap === true;
     this.persistent = resolved.persistent;
     this.disableCloseFlag = resolved.disableClose;
     this.disableDragFlag = resolved.disableDrag;
@@ -2828,7 +2830,8 @@ var BottomSheetCore = class {
         closeOnBack: this.closeOnBack,
         closeOnRouteChange: this.closeOnRouteChange,
         persistKey: this.persistKey,
-        autoCollapseAfter
+        autoCollapseAfter,
+        fitContentToSnap: this.fitContentToSnap
       },
       isDestroyed: () => this.destroyed,
       isDragging: () => this.isDraggingAny(),
@@ -2880,6 +2883,11 @@ var BottomSheetCore = class {
         "[BottomSheet] closeOnBack/routedTo/closeOnRouteChange need routeFeature() \u2014 option ignored"
       );
     }
+    if (this.fitContentToSnap && !names.has("content-fit")) {
+      devWarn(
+        "[BottomSheet] fitContentToSnap needs contentFitFeature() \u2014 option ignored"
+      );
+    }
     if (this.persistKey && !names.has("persist")) {
       devWarn(
         "[BottomSheet] persistKey needs persistFeature() \u2014 snaps will not be saved"
@@ -4237,6 +4245,68 @@ function visualViewportFeature() {
   };
 }
 
+// src/core/features/content-fit.ts
+var INSET_VAR = "--bs-content-inset";
+var FIT_ATTR = "data-bs-fit-content";
+function contentFitFeature() {
+  return {
+    name: "content-fit",
+    install: (ctx) => {
+      const scroller = ctx.scrollContainer;
+      if (!ctx.options.fitContentToSnap || !scroller || typeof window === "undefined") {
+        return;
+      }
+      const sheet = ctx.element;
+      let inset = 0;
+      let unpaddedMax = -1;
+      let top = 0;
+      const hiddenAt = (size) => sheet.dataset.mode === "bottom" ? Math.max(0, ctx.getMaxAxisSize() - size) : 0;
+      const follow = (size) => {
+        if (unpaddedMax < 0) {
+          unpaddedMax = scroller.scrollHeight - scroller.clientHeight - inset;
+          top = scroller.scrollTop;
+        }
+        const limit = Math.max(0, unpaddedMax + hiddenAt(size));
+        if (top > limit) {
+          if (scroller.scrollTop > limit) scroller.scrollTop = limit;
+          top = limit;
+        }
+      };
+      const settle = () => {
+        if (ctx.isDestroyed()) return;
+        const size = ctx.getSize();
+        unpaddedMax = -1;
+        follow(size);
+        inset = hiddenAt(size);
+        sheet.style.setProperty(INSET_VAR, `${inset}px`);
+        unpaddedMax = -1;
+      };
+      const moving = () => ctx.isAnimating() || ctx.isDragging();
+      const whenIdle = () => {
+        if (!moving()) settle();
+      };
+      sheet.setAttribute(FIT_ATTR, "");
+      settle();
+      const offProgress = ctx.on(
+        "progress",
+        (p) => moving() ? follow(p.size) : settle()
+      );
+      const offSnap = ctx.on("snap", settle);
+      const observer = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(whenIdle);
+      observer?.observe(document.documentElement);
+      window.addEventListener("orientationchange", whenIdle);
+      return () => {
+        offProgress();
+        offSnap();
+        observer?.disconnect();
+        window.removeEventListener("orientationchange", whenIdle);
+        sheet.removeAttribute(FIT_ATTR);
+        sheet.style.removeProperty(INSET_VAR);
+      };
+    }
+  };
+}
+
 // src/core/default-features.ts
 function defaultEngineFeatures() {
   return [
@@ -4244,7 +4314,8 @@ function defaultEngineFeatures() {
     visualViewportFeature(),
     persistFeature(),
     autoCollapseFeature(),
-    routeFeature()
+    routeFeature(),
+    contentFitFeature()
   ];
 }
 

package/dist/react.d.cts

@@ -1,10 +1,10 @@
-import { c as EngineOptions, E as EngineState, A as AnchorOptions, e as ScrimStagesOptions, u as ScrimStageDef, S as SheetEventMap, C as CloseReason, v as ScrimUpdate, r as ScrimOverlayOptions, a as SnapPointDef, b as SheetMode } from './BottomSheetCore-BHv6LPmS.cjs';
-export { d as SnapPoint } from './BottomSheetCore-BHv6LPmS.cjs';
+import { g as EngineOptions, d as EngineState, A as AnchorOptions, i as ScrimStagesOptions, u as ScrimStageDef, S as SheetEventMap, C as CloseReason, v as ScrimUpdate, r as ScrimOverlayOptions, e as SnapPointDef, f as SheetMode } from './BottomSheetCore-CQStdVy2.cjs';
+export { h as SnapPoint } from './BottomSheetCore-CQStdVy2.cjs';
 import { OverlayOptions, OverlayState, Overlay as OverlayEngine } from './overlay.cjs';
 export { OverlayEdge } from './overlay.cjs';
 import * as react from 'react';
 import { CSSProperties, ReactNode } from 'react';
-import { B as BottomSheetEngine } from './BottomSheetEngine-mmFzIK1Z.cjs';
+import { B as BottomSheetEngine } from './BottomSheetEngine-CsQWHLNb.cjs';
 import { T as TeleportTarget } from './teleport-7uYNiEAT.cjs';
 import './transform-jVfAikE9.cjs';
 

package/dist/react.d.ts

@@ -1,10 +1,10 @@
-import { c as EngineOptions, E as EngineState, A as AnchorOptions, e as ScrimStagesOptions, u as ScrimStageDef, S as SheetEventMap, C as CloseReason, v as ScrimUpdate, r as ScrimOverlayOptions, a as SnapPointDef, b as SheetMode } from './BottomSheetCore-CK_mq14p.js';
-export { d as SnapPoint } from './BottomSheetCore-CK_mq14p.js';
+import { g as EngineOptions, d as EngineState, A as AnchorOptions, i as ScrimStagesOptions, u as ScrimStageDef, S as SheetEventMap, C as CloseReason, v as ScrimUpdate, r as ScrimOverlayOptions, e as SnapPointDef, f as SheetMode } from './BottomSheetCore-9i-Uh6T3.js';
+export { h as SnapPoint } from './BottomSheetCore-9i-Uh6T3.js';
 import { OverlayOptions, OverlayState, Overlay as OverlayEngine } from './overlay.js';
 export { OverlayEdge } from './overlay.js';
 import * as react from 'react';
 import { CSSProperties, ReactNode } from 'react';
-import { B as BottomSheetEngine } from './BottomSheetEngine-wLn6Q2kA.js';
+import { B as BottomSheetEngine } from './BottomSheetEngine-Dn6h-7gF.js';
 import { T as TeleportTarget } from './teleport-7uYNiEAT.js';
 import './transform-jVfAikE9.js';
 

package/dist/react.js

@@ -2612,6 +2612,7 @@ var BottomSheetCore = class {
     __publicField(this, "lifecycle");
     __publicField(this, "closeOnBack");
     __publicField(this, "routedTo");
+    __publicField(this, "fitContentToSnap");
     __publicField(this, "persistent");
     __publicField(this, "disableCloseFlag");
     __publicField(this, "disableDragFlag");
@@ -2725,6 +2726,7 @@ var BottomSheetCore = class {
     );
     this.closeOnBack = resolved.closeOnBack;
     this.routedTo = opts.routedTo;
+    this.fitContentToSnap = opts.fitContentToSnap === true;
     this.persistent = resolved.persistent;
     this.disableCloseFlag = resolved.disableClose;
     this.disableDragFlag = resolved.disableDrag;
@@ -2826,7 +2828,8 @@ var BottomSheetCore = class {
         closeOnBack: this.closeOnBack,
         closeOnRouteChange: this.closeOnRouteChange,
         persistKey: this.persistKey,
-        autoCollapseAfter
+        autoCollapseAfter,
+        fitContentToSnap: this.fitContentToSnap
       },
       isDestroyed: () => this.destroyed,
       isDragging: () => this.isDraggingAny(),
@@ -2878,6 +2881,11 @@ var BottomSheetCore = class {
         "[BottomSheet] closeOnBack/routedTo/closeOnRouteChange need routeFeature() \u2014 option ignored"
       );
     }
+    if (this.fitContentToSnap && !names.has("content-fit")) {
+      devWarn(
+        "[BottomSheet] fitContentToSnap needs contentFitFeature() \u2014 option ignored"
+      );
+    }
     if (this.persistKey && !names.has("persist")) {
       devWarn(
         "[BottomSheet] persistKey needs persistFeature() \u2014 snaps will not be saved"
@@ -4235,6 +4243,68 @@ function visualViewportFeature() {
   };
 }
 
+// src/core/features/content-fit.ts
+var INSET_VAR = "--bs-content-inset";
+var FIT_ATTR = "data-bs-fit-content";
+function contentFitFeature() {
+  return {
+    name: "content-fit",
+    install: (ctx) => {
+      const scroller = ctx.scrollContainer;
+      if (!ctx.options.fitContentToSnap || !scroller || typeof window === "undefined") {
+        return;
+      }
+      const sheet = ctx.element;
+      let inset = 0;
+      let unpaddedMax = -1;
+      let top = 0;
+      const hiddenAt = (size) => sheet.dataset.mode === "bottom" ? Math.max(0, ctx.getMaxAxisSize() - size) : 0;
+      const follow = (size) => {
+        if (unpaddedMax < 0) {
+          unpaddedMax = scroller.scrollHeight - scroller.clientHeight - inset;
+          top = scroller.scrollTop;
+        }
+        const limit = Math.max(0, unpaddedMax + hiddenAt(size));
+        if (top > limit) {
+          if (scroller.scrollTop > limit) scroller.scrollTop = limit;
+          top = limit;
+        }
+      };
+      const settle = () => {
+        if (ctx.isDestroyed()) return;
+        const size = ctx.getSize();
+        unpaddedMax = -1;
+        follow(size);
+        inset = hiddenAt(size);
+        sheet.style.setProperty(INSET_VAR, `${inset}px`);
+        unpaddedMax = -1;
+      };
+      const moving = () => ctx.isAnimating() || ctx.isDragging();
+      const whenIdle = () => {
+        if (!moving()) settle();
+      };
+      sheet.setAttribute(FIT_ATTR, "");
+      settle();
+      const offProgress = ctx.on(
+        "progress",
+        (p) => moving() ? follow(p.size) : settle()
+      );
+      const offSnap = ctx.on("snap", settle);
+      const observer = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(whenIdle);
+      observer?.observe(document.documentElement);
+      window.addEventListener("orientationchange", whenIdle);
+      return () => {
+        offProgress();
+        offSnap();
+        observer?.disconnect();
+        window.removeEventListener("orientationchange", whenIdle);
+        sheet.removeAttribute(FIT_ATTR);
+        sheet.style.removeProperty(INSET_VAR);
+      };
+    }
+  };
+}
+
 // src/core/default-features.ts
 function defaultEngineFeatures() {
   return [
@@ -4242,7 +4312,8 @@ function defaultEngineFeatures() {
     visualViewportFeature(),
     persistFeature(),
     autoCollapseFeature(),
-    routeFeature()
+    routeFeature(),
+    contentFitFeature()
   ];
 }
 

package/dist/solid.cjs

@@ -2607,6 +2607,7 @@ var BottomSheetCore = class {
     __publicField(this, "lifecycle");
     __publicField(this, "closeOnBack");
     __publicField(this, "routedTo");
+    __publicField(this, "fitContentToSnap");
     __publicField(this, "persistent");
     __publicField(this, "disableCloseFlag");
     __publicField(this, "disableDragFlag");
@@ -2720,6 +2721,7 @@ var BottomSheetCore = class {
     );
     this.closeOnBack = resolved.closeOnBack;
     this.routedTo = opts.routedTo;
+    this.fitContentToSnap = opts.fitContentToSnap === true;
     this.persistent = resolved.persistent;
     this.disableCloseFlag = resolved.disableClose;
     this.disableDragFlag = resolved.disableDrag;
@@ -2821,7 +2823,8 @@ var BottomSheetCore = class {
         closeOnBack: this.closeOnBack,
         closeOnRouteChange: this.closeOnRouteChange,
         persistKey: this.persistKey,
-        autoCollapseAfter
+        autoCollapseAfter,
+        fitContentToSnap: this.fitContentToSnap
       },
       isDestroyed: () => this.destroyed,
       isDragging: () => this.isDraggingAny(),
@@ -2873,6 +2876,11 @@ var BottomSheetCore = class {
         "[BottomSheet] closeOnBack/routedTo/closeOnRouteChange need routeFeature() \u2014 option ignored"
       );
     }
+    if (this.fitContentToSnap && !names.has("content-fit")) {
+      devWarn(
+        "[BottomSheet] fitContentToSnap needs contentFitFeature() \u2014 option ignored"
+      );
+    }
     if (this.persistKey && !names.has("persist")) {
       devWarn(
         "[BottomSheet] persistKey needs persistFeature() \u2014 snaps will not be saved"
@@ -4230,6 +4238,68 @@ function visualViewportFeature() {
   };
 }
 
+// src/core/features/content-fit.ts
+var INSET_VAR = "--bs-content-inset";
+var FIT_ATTR = "data-bs-fit-content";
+function contentFitFeature() {
+  return {
+    name: "content-fit",
+    install: (ctx) => {
+      const scroller = ctx.scrollContainer;
+      if (!ctx.options.fitContentToSnap || !scroller || typeof window === "undefined") {
+        return;
+      }
+      const sheet = ctx.element;
+      let inset = 0;
+      let unpaddedMax = -1;
+      let top = 0;
+      const hiddenAt = (size) => sheet.dataset.mode === "bottom" ? Math.max(0, ctx.getMaxAxisSize() - size) : 0;
+      const follow = (size) => {
+        if (unpaddedMax < 0) {
+          unpaddedMax = scroller.scrollHeight - scroller.clientHeight - inset;
+          top = scroller.scrollTop;
+        }
+        const limit = Math.max(0, unpaddedMax + hiddenAt(size));
+        if (top > limit) {
+          if (scroller.scrollTop > limit) scroller.scrollTop = limit;
+          top = limit;
+        }
+      };
+      const settle = () => {
+        if (ctx.isDestroyed()) return;
+        const size = ctx.getSize();
+        unpaddedMax = -1;
+        follow(size);
+        inset = hiddenAt(size);
+        sheet.style.setProperty(INSET_VAR, `${inset}px`);
+        unpaddedMax = -1;
+      };
+      const moving = () => ctx.isAnimating() || ctx.isDragging();
+      const whenIdle = () => {
+        if (!moving()) settle();
+      };
+      sheet.setAttribute(FIT_ATTR, "");
+      settle();
+      const offProgress = ctx.on(
+        "progress",
+        (p) => moving() ? follow(p.size) : settle()
+      );
+      const offSnap = ctx.on("snap", settle);
+      const observer = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(whenIdle);
+      observer?.observe(document.documentElement);
+      window.addEventListener("orientationchange", whenIdle);
+      return () => {
+        offProgress();
+        offSnap();
+        observer?.disconnect();
+        window.removeEventListener("orientationchange", whenIdle);
+        sheet.removeAttribute(FIT_ATTR);
+        sheet.style.removeProperty(INSET_VAR);
+      };
+    }
+  };
+}
+
 // src/core/default-features.ts
 function defaultEngineFeatures() {
   return [
@@ -4237,7 +4307,8 @@ function defaultEngineFeatures() {
     visualViewportFeature(),
     persistFeature(),
     autoCollapseFeature(),
-    routeFeature()
+    routeFeature(),
+    contentFitFeature()
   ];
 }
 
@@ -4333,6 +4404,7 @@ var BottomSheet = (props) => {
       disableDrag: props.disableDrag,
       dragFrom: props.dragFrom,
       dragFromContent: props.dragFromContent,
+      fitContentToSnap: props.fitContentToSnap,
       closeOnRouteChange: props.closeOnRouteChange,
       stackEffect: props.stackEffect,
       returnFocusTo: props.returnFocusTo

package/dist/solid.d.cts

@@ -94,6 +94,7 @@ type EngineOptions = {
     dragThreshold?: number;
     dragFrom?: DragFrom;
     dragFromContent?: boolean;
+    fitContentToSnap?: boolean;
     rubberBand?: boolean;
     backdropRange?: [number, number];
     screenRange?: [number, number];
@@ -140,6 +141,7 @@ type EngineFeatureOptions = {
     closeOnRouteChange: boolean;
     persistKey?: string;
     autoCollapseAfter?: number;
+    fitContentToSnap: boolean;
 };
 type EngineFeatureContext = {
     element: HTMLElement;
@@ -262,6 +264,7 @@ declare class BottomSheetCore {
     private lifecycle;
     private closeOnBack;
     private routedTo;
+    private fitContentToSnap;
     private persistent;
     private disableCloseFlag;
     private disableDragFlag;
@@ -432,6 +435,7 @@ type BottomSheetProps<TId extends string = string> = {
     disableDrag?: boolean;
     dragFrom?: EngineOptions["dragFrom"];
     dragFromContent?: boolean;
+    fitContentToSnap?: boolean;
     closeOnRouteChange?: boolean;
     stackEffect?: boolean;
     teleport?: boolean;

package/dist/solid.d.ts

@@ -94,6 +94,7 @@ type EngineOptions = {
     dragThreshold?: number;
     dragFrom?: DragFrom;
     dragFromContent?: boolean;
+    fitContentToSnap?: boolean;
     rubberBand?: boolean;
     backdropRange?: [number, number];
     screenRange?: [number, number];
@@ -140,6 +141,7 @@ type EngineFeatureOptions = {
     closeOnRouteChange: boolean;
     persistKey?: string;
     autoCollapseAfter?: number;
+    fitContentToSnap: boolean;
 };
 type EngineFeatureContext = {
     element: HTMLElement;
@@ -262,6 +264,7 @@ declare class BottomSheetCore {
     private lifecycle;
     private closeOnBack;
     private routedTo;
+    private fitContentToSnap;
     private persistent;
     private disableCloseFlag;
     private disableDragFlag;
@@ -432,6 +435,7 @@ type BottomSheetProps<TId extends string = string> = {
     disableDrag?: boolean;
     dragFrom?: EngineOptions["dragFrom"];
     dragFromContent?: boolean;
+    fitContentToSnap?: boolean;
     closeOnRouteChange?: boolean;
     stackEffect?: boolean;
     teleport?: boolean;

package/dist/solid.js

@@ -2605,6 +2605,7 @@ var BottomSheetCore = class {
     __publicField(this, "lifecycle");
     __publicField(this, "closeOnBack");
     __publicField(this, "routedTo");
+    __publicField(this, "fitContentToSnap");
     __publicField(this, "persistent");
     __publicField(this, "disableCloseFlag");
     __publicField(this, "disableDragFlag");
@@ -2718,6 +2719,7 @@ var BottomSheetCore = class {
     );
     this.closeOnBack = resolved.closeOnBack;
     this.routedTo = opts.routedTo;
+    this.fitContentToSnap = opts.fitContentToSnap === true;
     this.persistent = resolved.persistent;
     this.disableCloseFlag = resolved.disableClose;
     this.disableDragFlag = resolved.disableDrag;
@@ -2819,7 +2821,8 @@ var BottomSheetCore = class {
         closeOnBack: this.closeOnBack,
         closeOnRouteChange: this.closeOnRouteChange,
         persistKey: this.persistKey,
-        autoCollapseAfter
+        autoCollapseAfter,
+        fitContentToSnap: this.fitContentToSnap
       },
       isDestroyed: () => this.destroyed,
       isDragging: () => this.isDraggingAny(),
@@ -2871,6 +2874,11 @@ var BottomSheetCore = class {
         "[BottomSheet] closeOnBack/routedTo/closeOnRouteChange need routeFeature() \u2014 option ignored"
       );
     }
+    if (this.fitContentToSnap && !names.has("content-fit")) {
+      devWarn(
+        "[BottomSheet] fitContentToSnap needs contentFitFeature() \u2014 option ignored"
+      );
+    }
     if (this.persistKey && !names.has("persist")) {
       devWarn(
         "[BottomSheet] persistKey needs persistFeature() \u2014 snaps will not be saved"
@@ -4228,6 +4236,68 @@ function visualViewportFeature() {
   };
 }
 
+// src/core/features/content-fit.ts
+var INSET_VAR = "--bs-content-inset";
+var FIT_ATTR = "data-bs-fit-content";
+function contentFitFeature() {
+  return {
+    name: "content-fit",
+    install: (ctx) => {
+      const scroller = ctx.scrollContainer;
+      if (!ctx.options.fitContentToSnap || !scroller || typeof window === "undefined") {
+        return;
+      }
+      const sheet = ctx.element;
+      let inset = 0;
+      let unpaddedMax = -1;
+      let top = 0;
+      const hiddenAt = (size) => sheet.dataset.mode === "bottom" ? Math.max(0, ctx.getMaxAxisSize() - size) : 0;
+      const follow = (size) => {
+        if (unpaddedMax < 0) {
+          unpaddedMax = scroller.scrollHeight - scroller.clientHeight - inset;
+          top = scroller.scrollTop;
+        }
+        const limit = Math.max(0, unpaddedMax + hiddenAt(size));
+        if (top > limit) {
+          if (scroller.scrollTop > limit) scroller.scrollTop = limit;
+          top = limit;
+        }
+      };
+      const settle = () => {
+        if (ctx.isDestroyed()) return;
+        const size = ctx.getSize();
+        unpaddedMax = -1;
+        follow(size);
+        inset = hiddenAt(size);
+        sheet.style.setProperty(INSET_VAR, `${inset}px`);
+        unpaddedMax = -1;
+      };
+      const moving = () => ctx.isAnimating() || ctx.isDragging();
+      const whenIdle = () => {
+        if (!moving()) settle();
+      };
+      sheet.setAttribute(FIT_ATTR, "");
+      settle();
+      const offProgress = ctx.on(
+        "progress",
+        (p) => moving() ? follow(p.size) : settle()
+      );
+      const offSnap = ctx.on("snap", settle);
+      const observer = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(whenIdle);
+      observer?.observe(document.documentElement);
+      window.addEventListener("orientationchange", whenIdle);
+      return () => {
+        offProgress();
+        offSnap();
+        observer?.disconnect();
+        window.removeEventListener("orientationchange", whenIdle);
+        sheet.removeAttribute(FIT_ATTR);
+        sheet.style.removeProperty(INSET_VAR);
+      };
+    }
+  };
+}
+
 // src/core/default-features.ts
 function defaultEngineFeatures() {
   return [
@@ -4235,7 +4305,8 @@ function defaultEngineFeatures() {
     visualViewportFeature(),
     persistFeature(),
     autoCollapseFeature(),
-    routeFeature()
+    routeFeature(),
+    contentFitFeature()
   ];
 }
 
@@ -4331,6 +4402,7 @@ var BottomSheet = (props) => {
       disableDrag: props.disableDrag,
       dragFrom: props.dragFrom,
       dragFromContent: props.dragFromContent,
+      fitContentToSnap: props.fitContentToSnap,
       closeOnRouteChange: props.closeOnRouteChange,
       stackEffect: props.stackEffect,
       returnFocusTo: props.returnFocusTo

package/dist/solid.source.jsx

@@ -2606,6 +2606,7 @@ var BottomSheetCore = class {
   lifecycle;
   closeOnBack;
   routedTo;
+  fitContentToSnap;
   persistent;
   disableCloseFlag;
   disableDragFlag;
@@ -2720,6 +2721,7 @@ var BottomSheetCore = class {
     );
     this.closeOnBack = resolved.closeOnBack;
     this.routedTo = opts.routedTo;
+    this.fitContentToSnap = opts.fitContentToSnap === true;
     this.persistent = resolved.persistent;
     this.disableCloseFlag = resolved.disableClose;
     this.disableDragFlag = resolved.disableDrag;
@@ -2821,7 +2823,8 @@ var BottomSheetCore = class {
         closeOnBack: this.closeOnBack,
         closeOnRouteChange: this.closeOnRouteChange,
         persistKey: this.persistKey,
-        autoCollapseAfter
+        autoCollapseAfter,
+        fitContentToSnap: this.fitContentToSnap
       },
       isDestroyed: () => this.destroyed,
       isDragging: () => this.isDraggingAny(),
@@ -2873,6 +2876,11 @@ var BottomSheetCore = class {
         "[BottomSheet] closeOnBack/routedTo/closeOnRouteChange need routeFeature() \u2014 option ignored"
       );
     }
+    if (this.fitContentToSnap && !names.has("content-fit")) {
+      devWarn(
+        "[BottomSheet] fitContentToSnap needs contentFitFeature() \u2014 option ignored"
+      );
+    }
     if (this.persistKey && !names.has("persist")) {
       devWarn(
         "[BottomSheet] persistKey needs persistFeature() \u2014 snaps will not be saved"
@@ -4230,6 +4238,68 @@ function visualViewportFeature() {
   };
 }
 
+// src/core/features/content-fit.ts
+var INSET_VAR = "--bs-content-inset";
+var FIT_ATTR = "data-bs-fit-content";
+function contentFitFeature() {
+  return {
+    name: "content-fit",
+    install: (ctx) => {
+      const scroller = ctx.scrollContainer;
+      if (!ctx.options.fitContentToSnap || !scroller || typeof window === "undefined") {
+        return;
+      }
+      const sheet = ctx.element;
+      let inset = 0;
+      let unpaddedMax = -1;
+      let top = 0;
+      const hiddenAt = (size) => sheet.dataset.mode === "bottom" ? Math.max(0, ctx.getMaxAxisSize() - size) : 0;
+      const follow = (size) => {
+        if (unpaddedMax < 0) {
+          unpaddedMax = scroller.scrollHeight - scroller.clientHeight - inset;
+          top = scroller.scrollTop;
+        }
+        const limit = Math.max(0, unpaddedMax + hiddenAt(size));
+        if (top > limit) {
+          if (scroller.scrollTop > limit) scroller.scrollTop = limit;
+          top = limit;
+        }
+      };
+      const settle = () => {
+        if (ctx.isDestroyed()) return;
+        const size = ctx.getSize();
+        unpaddedMax = -1;
+        follow(size);
+        inset = hiddenAt(size);
+        sheet.style.setProperty(INSET_VAR, `${inset}px`);
+        unpaddedMax = -1;
+      };
+      const moving = () => ctx.isAnimating() || ctx.isDragging();
+      const whenIdle = () => {
+        if (!moving()) settle();
+      };
+      sheet.setAttribute(FIT_ATTR, "");
+      settle();
+      const offProgress = ctx.on(
+        "progress",
+        (p) => moving() ? follow(p.size) : settle()
+      );
+      const offSnap = ctx.on("snap", settle);
+      const observer = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(whenIdle);
+      observer?.observe(document.documentElement);
+      window.addEventListener("orientationchange", whenIdle);
+      return () => {
+        offProgress();
+        offSnap();
+        observer?.disconnect();
+        window.removeEventListener("orientationchange", whenIdle);
+        sheet.removeAttribute(FIT_ATTR);
+        sheet.style.removeProperty(INSET_VAR);
+      };
+    }
+  };
+}
+
 // src/core/default-features.ts
 function defaultEngineFeatures() {
   return [
@@ -4237,7 +4307,8 @@ function defaultEngineFeatures() {
     visualViewportFeature(),
     persistFeature(),
     autoCollapseFeature(),
-    routeFeature()
+    routeFeature(),
+    contentFitFeature()
   ];
 }
 
@@ -4327,6 +4398,7 @@ var BottomSheet = (props) => {
       disableDrag: props.disableDrag,
       dragFrom: props.dragFrom,
       dragFromContent: props.dragFromContent,
+      fitContentToSnap: props.fitContentToSnap,
       closeOnRouteChange: props.closeOnRouteChange,
       stackEffect: props.stackEffect,
       returnFocusTo: props.returnFocusTo