@surdeddd/bottom-sheet 0.21.2 → 0.22.1

package/dist/index.js

@@ -2602,6 +2602,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");
@@ -2715,6 +2716,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;
@@ -2816,7 +2818,8 @@ var BottomSheetCore = class {
         closeOnBack: this.closeOnBack,
         closeOnRouteChange: this.closeOnRouteChange,
         persistKey: this.persistKey,
-        autoCollapseAfter
+        autoCollapseAfter,
+        fitContentToSnap: this.fitContentToSnap
       },
       isDestroyed: () => this.destroyed,
       isDragging: () => this.isDraggingAny(),
@@ -2868,6 +2871,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"
@@ -4225,6 +4233,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 [
@@ -4232,7 +4302,8 @@ function defaultEngineFeatures() {
     visualViewportFeature(),
     persistFeature(),
     autoCollapseFeature(),
-    routeFeature()
+    routeFeature(),
+    contentFitFeature()
   ];
 }
 

package/dist/integrations/formik.d.cts

@@ -1,4 +1,4 @@
-import { S as SheetEventMap } from '../BottomSheetCore-BHv6LPmS.cjs';
+import { S as SheetEventMap } from '../BottomSheetCore-CQStdVy2.cjs';
 import '../transform-jVfAikE9.cjs';
 
 type FormikStateLike = {

package/dist/integrations/formik.d.ts

@@ -1,4 +1,4 @@
-import { S as SheetEventMap } from '../BottomSheetCore-CK_mq14p.js';
+import { S as SheetEventMap } from '../BottomSheetCore-9i-Uh6T3.js';
 import '../transform-jVfAikE9.js';
 
 type FormikStateLike = {

package/dist/integrations/react-hook-form.d.cts

@@ -1,4 +1,4 @@
-import { S as SheetEventMap } from '../BottomSheetCore-BHv6LPmS.cjs';
+import { S as SheetEventMap } from '../BottomSheetCore-CQStdVy2.cjs';
 import '../transform-jVfAikE9.cjs';
 
 type RhfFormStateLike = {

package/dist/integrations/react-hook-form.d.ts

@@ -1,4 +1,4 @@
-import { S as SheetEventMap } from '../BottomSheetCore-CK_mq14p.js';
+import { S as SheetEventMap } from '../BottomSheetCore-9i-Uh6T3.js';
 import '../transform-jVfAikE9.js';
 
 type RhfFormStateLike = {

package/dist/preact.d.cts

@@ -1,7 +1,7 @@
 export { BottomSheet, BottomSheetFromConfig, BottomSheetFromConfigProps, BottomSheetHandle, BottomSheetProps, HeaderProp, Overlay, OverlayHandle, OverlayProps, SheetConfig, UseBottomSheetRefs, UseBottomSheetReturn, UseOverlayReturn, useBottomSheet, useOverlay } from './react.cjs';
-export { E as EngineState, b as SheetMode, d as SnapPoint, a as SnapPointDef } from './BottomSheetCore-BHv6LPmS.cjs';
+export { d as EngineState, f as SheetMode, h as SnapPoint, e as SnapPointDef } from './BottomSheetCore-CQStdVy2.cjs';
 export { OverlayEdge, OverlayOptions, OverlayState } from './overlay.cjs';
 import 'react';
-import './BottomSheetEngine-mmFzIK1Z.cjs';
+import './BottomSheetEngine-CsQWHLNb.cjs';
 import './teleport-7uYNiEAT.cjs';
 import './transform-jVfAikE9.cjs';

package/dist/preact.d.ts

@@ -1,7 +1,7 @@
 export { BottomSheet, BottomSheetFromConfig, BottomSheetFromConfigProps, BottomSheetHandle, BottomSheetProps, HeaderProp, Overlay, OverlayHandle, OverlayProps, SheetConfig, UseBottomSheetRefs, UseBottomSheetReturn, UseOverlayReturn, useBottomSheet, useOverlay } from './react.js';
-export { E as EngineState, b as SheetMode, d as SnapPoint, a as SnapPointDef } from './BottomSheetCore-CK_mq14p.js';
+export { d as EngineState, f as SheetMode, h as SnapPoint, e as SnapPointDef } from './BottomSheetCore-9i-Uh6T3.js';
 export { OverlayEdge, OverlayOptions, OverlayState } from './overlay.js';
 import 'react';
-import './BottomSheetEngine-wLn6Q2kA.js';
+import './BottomSheetEngine-Dn6h-7gF.js';
 import './teleport-7uYNiEAT.js';
 import './transform-jVfAikE9.js';

package/dist/qwik-lib/index.qwik.cjs

@@ -2651,6 +2651,7 @@ class BottomSheetCore {
     __publicField(this, "lifecycle");
     __publicField(this, "closeOnBack");
     __publicField(this, "routedTo");
+    __publicField(this, "fitContentToSnap");
     __publicField(this, "persistent");
     __publicField(this, "disableCloseFlag");
     __publicField(this, "disableDragFlag");
@@ -2756,6 +2757,7 @@ class BottomSheetCore {
     }, resolved.lifecycle);
     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;
@@ -2847,7 +2849,8 @@ class BottomSheetCore {
         closeOnBack: this.closeOnBack,
         closeOnRouteChange: this.closeOnRouteChange,
         persistKey: this.persistKey,
-        autoCollapseAfter
+        autoCollapseAfter,
+        fitContentToSnap: this.fitContentToSnap
       },
       isDestroyed: () => this.destroyed,
       isDragging: () => this.isDraggingAny(),
@@ -2897,6 +2900,9 @@ class BottomSheetCore {
     if ((this.closeOnBack || this.routedTo !== void 0 || this.closeOnRouteChange) && !names.has("route")) {
       devWarn("[BottomSheet] closeOnBack/routedTo/closeOnRouteChange need routeFeature() — option ignored");
     }
+    if (this.fitContentToSnap && !names.has("content-fit")) {
+      devWarn("[BottomSheet] fitContentToSnap needs contentFitFeature() — option ignored");
+    }
     if (this.persistKey && !names.has("persist")) {
       devWarn("[BottomSheet] persistKey needs persistFeature() — snaps will not be saved");
     }
@@ -4221,13 +4227,71 @@ function visualViewportFeature() {
     }
   };
 }
+const INSET_VAR = "--bs-content-inset";
+const 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);
+      };
+    }
+  };
+}
 function defaultEngineFeatures() {
   return [
     contentSwipeFeature(),
     visualViewportFeature(),
     persistFeature(),
     autoCollapseFeature(),
-    routeFeature()
+    routeFeature(),
+    contentFitFeature()
   ];
 }
 class BottomSheetEngine extends BottomSheetCore {
@@ -4324,6 +4388,7 @@ const BottomSheet = qwik.component$((props) => {
       disableDrag: props.disableDrag,
       dragFrom: props.dragFrom,
       dragFromContent: props.dragFromContent,
+      fitContentToSnap: props.fitContentToSnap,
       closeOnRouteChange: props.closeOnRouteChange,
       stackEffect: props.stackEffect,
       returnFocusTo: props.returnFocusTo,

package/dist/qwik-lib/index.qwik.mjs

@@ -2649,6 +2649,7 @@ class BottomSheetCore {
     __publicField(this, "lifecycle");
     __publicField(this, "closeOnBack");
     __publicField(this, "routedTo");
+    __publicField(this, "fitContentToSnap");
     __publicField(this, "persistent");
     __publicField(this, "disableCloseFlag");
     __publicField(this, "disableDragFlag");
@@ -2754,6 +2755,7 @@ class BottomSheetCore {
     }, resolved.lifecycle);
     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;
@@ -2845,7 +2847,8 @@ class BottomSheetCore {
         closeOnBack: this.closeOnBack,
         closeOnRouteChange: this.closeOnRouteChange,
         persistKey: this.persistKey,
-        autoCollapseAfter
+        autoCollapseAfter,
+        fitContentToSnap: this.fitContentToSnap
       },
       isDestroyed: () => this.destroyed,
       isDragging: () => this.isDraggingAny(),
@@ -2895,6 +2898,9 @@ class BottomSheetCore {
     if ((this.closeOnBack || this.routedTo !== void 0 || this.closeOnRouteChange) && !names.has("route")) {
       devWarn("[BottomSheet] closeOnBack/routedTo/closeOnRouteChange need routeFeature() — option ignored");
     }
+    if (this.fitContentToSnap && !names.has("content-fit")) {
+      devWarn("[BottomSheet] fitContentToSnap needs contentFitFeature() — option ignored");
+    }
     if (this.persistKey && !names.has("persist")) {
       devWarn("[BottomSheet] persistKey needs persistFeature() — snaps will not be saved");
     }
@@ -4219,13 +4225,71 @@ function visualViewportFeature() {
     }
   };
 }
+const INSET_VAR = "--bs-content-inset";
+const 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);
+      };
+    }
+  };
+}
 function defaultEngineFeatures() {
   return [
     contentSwipeFeature(),
     visualViewportFeature(),
     persistFeature(),
     autoCollapseFeature(),
-    routeFeature()
+    routeFeature(),
+    contentFitFeature()
   ];
 }
 class BottomSheetEngine extends BottomSheetCore {
@@ -4322,6 +4386,7 @@ const BottomSheet = component$((props) => {
       disableDrag: props.disableDrag,
       dragFrom: props.dragFrom,
       dragFromContent: props.dragFromContent,
+      fitContentToSnap: props.fitContentToSnap,
       closeOnRouteChange: props.closeOnRouteChange,
       stackEffect: props.stackEffect,
       returnFocusTo: props.returnFocusTo,

package/dist/qwik.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()
   ];
 }
 
@@ -4331,6 +4402,7 @@ var BottomSheet = qwik.component$((props) => {
       disableDrag: props.disableDrag,
       dragFrom: props.dragFrom,
       dragFromContent: props.dragFromContent,
+      fitContentToSnap: props.fitContentToSnap,
       closeOnRouteChange: props.closeOnRouteChange,
       stackEffect: props.stackEffect,
       returnFocusTo: props.returnFocusTo,

package/dist/qwik.d.cts

@@ -1,8 +1,8 @@
 import * as _builder_io_qwik from '@builder.io/qwik';
 import { QRL } from '@builder.io/qwik';
 import { T as TeleportTarget } from './teleport-7uYNiEAT.cjs';
-import { a as SnapPointDef, b as SheetMode, c as EngineOptions, S as SheetEventMap, E as EngineState } from './BottomSheetCore-BHv6LPmS.cjs';
-export { d as SnapPoint } from './BottomSheetCore-BHv6LPmS.cjs';
+import { e as SnapPointDef, f as SheetMode, g as EngineOptions, S as SheetEventMap, d as EngineState } from './BottomSheetCore-CQStdVy2.cjs';
+export { h as SnapPoint } from './BottomSheetCore-CQStdVy2.cjs';
 import './transform-jVfAikE9.cjs';
 
 type BottomSheetProps<TId extends string = string> = {
@@ -29,6 +29,7 @@ type BottomSheetProps<TId extends string = string> = {
     disableDrag?: boolean;
     dragFrom?: EngineOptions["dragFrom"];
     dragFromContent?: boolean;
+    fitContentToSnap?: boolean;
     closeOnRouteChange?: boolean;
     stackEffect?: boolean;
     teleport?: boolean;

package/dist/qwik.d.ts

@@ -1,8 +1,8 @@
 import * as _builder_io_qwik from '@builder.io/qwik';
 import { QRL } from '@builder.io/qwik';
 import { T as TeleportTarget } from './teleport-7uYNiEAT.js';
-import { a as SnapPointDef, b as SheetMode, c as EngineOptions, S as SheetEventMap, E as EngineState } from './BottomSheetCore-CK_mq14p.js';
-export { d as SnapPoint } from './BottomSheetCore-CK_mq14p.js';
+import { e as SnapPointDef, f as SheetMode, g as EngineOptions, S as SheetEventMap, d as EngineState } from './BottomSheetCore-9i-Uh6T3.js';
+export { h as SnapPoint } from './BottomSheetCore-9i-Uh6T3.js';
 import './transform-jVfAikE9.js';
 
 type BottomSheetProps<TId extends string = string> = {
@@ -29,6 +29,7 @@ type BottomSheetProps<TId extends string = string> = {
     disableDrag?: boolean;
     dragFrom?: EngineOptions["dragFrom"];
     dragFromContent?: boolean;
+    fitContentToSnap?: boolean;
     closeOnRouteChange?: boolean;
     stackEffect?: boolean;
     teleport?: boolean;

package/dist/qwik.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()
   ];
 }
 
@@ -4329,6 +4400,7 @@ var BottomSheet = component$((props) => {
       disableDrag: props.disableDrag,
       dragFrom: props.dragFrom,
       dragFromContent: props.dragFromContent,
+      fitContentToSnap: props.fitContentToSnap,
       closeOnRouteChange: props.closeOnRouteChange,
       stackEffect: props.stackEffect,
       returnFocusTo: props.returnFocusTo,