@surdeddd/bottom-sheet 0.21.1 → 0.22.0

package/README.md

@@ -250,6 +250,7 @@ type SnapPoint =
 | `disableDrag`        | `false`       | Suppress the drag gesture (imperative snaps still work)                                                                    |
 | `dragFrom`           | `"handle"`    | Which regions start a drag: `"handle"`, `"sheet"` (whole sheet), or `"zones"` (only `[data-bs-drag]` subtrees). Defaults to `"sheet"` when no handle is given. `[data-bs-no-drag]` opts a subtree out in every mode. Also `setDragFrom()` / `getDragFrom()` — switching remounts the gesture, no component remount |
 | `dragFromContent`    | `true`        | Whether a touch gesture on the scroll container drags the sheet; override per snap point with `{ id, size, dragFromContent: false }`. Also `setDragFromContent()` |
+| `fitContentToSnap`   | `false`       | Keeps the whole scroll container reachable at every snap point, not only the largest. Off by default; see [Content reachable at every snap](#content-reachable-at-every-snap) |
 | `radius`             | token default | Corner radius (`string` CSS length or `number` px); also `setRadius()`                                                     |
 | `maxHeight`          | none          | Cap the sheet height. `number` (px) or a string (`"92dvh"`, `"50%"`) re-resolved on viewport / orientation changes         |
 | `returnFocusTo`      | opener        | Focus target on dismiss — an `HTMLElement`, a selector `string`, or a `() => HTMLElement` factory                          |
@@ -508,6 +509,37 @@ the order sheets started opening in — a sheet opened while another is still
 animating stays on top. If you want a single dim level, pass `backdrop={false}`
 (`:backdrop="false"` in Vue) to the sheets you open on top.
 
+### Content reachable at every snap
+
+The sheet is always as tall as its largest snap point and is moved with a
+transform; that is what keeps a drag on the compositor. The cost is that below
+the largest snap the bottom of the scroll container sits under the screen edge,
+by exactly `largest snap − current size`. At a half snap you can scroll, but the
+last rows never come into view until the sheet is pulled up.
+
+`fitContentToSnap` closes that gap:
+
+```tsx
+<BottomSheet snapPoints={points} fitContentToSnap>
+  <LongList />
+</BottomSheet>
+```
+
+When the sheet settles, the engine writes the hidden amount to
+`--bs-content-inset` and the stylesheet turns it into a spacer at the end of
+`.bs-content`, plus a matching `scroll-padding-bottom` so a focused field
+scrolls into the visible band rather than under the edge. That is one layout per
+settle and none per frame, so the motion stays transform-only. While the sheet
+moves, a list that was scrolled to its very end is held in place on screen
+instead of riding up with the sheet and dropping back at the end.
+
+It applies to `bottom` sheets. For a scroll container that is not `.bs-content`,
+or one laid out as a flex row, consume the variable yourself:
+`padding-bottom: var(--bs-content-inset, 0px)`. On the slim core add
+`contentFitFeature()` from `@surdeddd/bottom-sheet/features`. This is unrelated
+to `dragFromContent`, which only decides whether a swipe on the content drags
+the sheet or scrolls the list.
+
 ### Scrim, blur & high contrast
 
 | Token                    | Default     | Region                                               |

package/dist/{BottomSheetCore-CK_mq14p.d.ts → BottomSheetCore-9i-Uh6T3.d.ts}

@@ -104,6 +104,7 @@ type EngineOptions = {
     dragThreshold?: number;
     dragFrom?: DragFrom;
     dragFromContent?: boolean;
+    fitContentToSnap?: boolean;
     rubberBand?: boolean;
     backdropRange?: [number, number];
     screenRange?: [number, number];
@@ -150,6 +151,7 @@ type EngineFeatureOptions = {
     closeOnRouteChange: boolean;
     persistKey?: string;
     autoCollapseAfter?: number;
+    fitContentToSnap: boolean;
 };
 type EngineFeatureContext = {
     element: HTMLElement;
@@ -282,6 +284,7 @@ declare class BottomSheetCore {
     private lifecycle;
     private closeOnBack;
     private routedTo;
+    private fitContentToSnap;
     private persistent;
     private disableCloseFlag;
     private disableDragFlag;
@@ -420,4 +423,4 @@ declare class BottomSheetCore {
     private handleClose;
 }
 
-export { type AnchorOptions as A, BottomSheetCore as B, type CloseReason as C, type EngineState as E, type LogicalSheetMode as L, type PhysicalSheetMode as P, type SheetEventMap as S, type TeardownScope as T, type SnapPointDef as a, type SheetMode as b, type EngineOptions as c, type SnapPoint as d, type ScrimStagesOptions as e, type EngineFeature as f, type ScrimOverlayPosition as g, type AnchorAnimationPreset as h, type AnchorAnimationSpec as i, type AnchorHandle as j, type AnchorPosition as k, type AnchorState as l, type EngineFeatureContext as m, type EngineFeatureOptions as n, type EngineFeatureStage as o, type Plugin as p, SCRIM_PRESETS as q, type ScrimOverlayOptions as r, type ScrimPreset as s, type ScrimPresetConfig as t, type ScrimStageDef as u, type ScrimUpdate as v, type SnapId as w, runAnchorTransition as x };
+export { type AnchorOptions as A, BottomSheetCore as B, type CloseReason as C, type EngineFeature as E, type LogicalSheetMode as L, type PhysicalSheetMode as P, type SheetEventMap as S, type TeardownScope as T, type EngineFeatureContext as a, type EngineFeatureOptions as b, type EngineFeatureStage as c, type EngineState as d, type SnapPointDef as e, type SheetMode as f, type EngineOptions as g, type SnapPoint as h, type ScrimStagesOptions as i, type ScrimOverlayPosition as j, type AnchorAnimationPreset as k, type AnchorAnimationSpec as l, type AnchorHandle as m, type AnchorPosition as n, type AnchorState as o, type Plugin as p, SCRIM_PRESETS as q, type ScrimOverlayOptions as r, type ScrimPreset as s, type ScrimPresetConfig as t, type ScrimStageDef as u, type ScrimUpdate as v, type SnapId as w, runAnchorTransition as x };

package/dist/{BottomSheetCore-BHv6LPmS.d.cts → BottomSheetCore-CQStdVy2.d.cts}

@@ -104,6 +104,7 @@ type EngineOptions = {
     dragThreshold?: number;
     dragFrom?: DragFrom;
     dragFromContent?: boolean;
+    fitContentToSnap?: boolean;
     rubberBand?: boolean;
     backdropRange?: [number, number];
     screenRange?: [number, number];
@@ -150,6 +151,7 @@ type EngineFeatureOptions = {
     closeOnRouteChange: boolean;
     persistKey?: string;
     autoCollapseAfter?: number;
+    fitContentToSnap: boolean;
 };
 type EngineFeatureContext = {
     element: HTMLElement;
@@ -282,6 +284,7 @@ declare class BottomSheetCore {
     private lifecycle;
     private closeOnBack;
     private routedTo;
+    private fitContentToSnap;
     private persistent;
     private disableCloseFlag;
     private disableDragFlag;
@@ -420,4 +423,4 @@ declare class BottomSheetCore {
     private handleClose;
 }
 
-export { type AnchorOptions as A, BottomSheetCore as B, type CloseReason as C, type EngineState as E, type LogicalSheetMode as L, type PhysicalSheetMode as P, type SheetEventMap as S, type TeardownScope as T, type SnapPointDef as a, type SheetMode as b, type EngineOptions as c, type SnapPoint as d, type ScrimStagesOptions as e, type EngineFeature as f, type ScrimOverlayPosition as g, type AnchorAnimationPreset as h, type AnchorAnimationSpec as i, type AnchorHandle as j, type AnchorPosition as k, type AnchorState as l, type EngineFeatureContext as m, type EngineFeatureOptions as n, type EngineFeatureStage as o, type Plugin as p, SCRIM_PRESETS as q, type ScrimOverlayOptions as r, type ScrimPreset as s, type ScrimPresetConfig as t, type ScrimStageDef as u, type ScrimUpdate as v, type SnapId as w, runAnchorTransition as x };
+export { type AnchorOptions as A, BottomSheetCore as B, type CloseReason as C, type EngineFeature as E, type LogicalSheetMode as L, type PhysicalSheetMode as P, type SheetEventMap as S, type TeardownScope as T, type EngineFeatureContext as a, type EngineFeatureOptions as b, type EngineFeatureStage as c, type EngineState as d, type SnapPointDef as e, type SheetMode as f, type EngineOptions as g, type SnapPoint as h, type ScrimStagesOptions as i, type ScrimOverlayPosition as j, type AnchorAnimationPreset as k, type AnchorAnimationSpec as l, type AnchorHandle as m, type AnchorPosition as n, type AnchorState as o, type Plugin as p, SCRIM_PRESETS as q, type ScrimOverlayOptions as r, type ScrimPreset as s, type ScrimPresetConfig as t, type ScrimStageDef as u, type ScrimUpdate as v, type SnapId as w, runAnchorTransition as x };

package/dist/{BottomSheetEngine-mmFzIK1Z.d.cts → BottomSheetEngine-CsQWHLNb.d.cts}

@@ -1,4 +1,4 @@
-import { B as BottomSheetCore, c as EngineOptions } from './BottomSheetCore-BHv6LPmS.cjs';
+import { B as BottomSheetCore, g as EngineOptions } from './BottomSheetCore-CQStdVy2.cjs';
 
 declare class BottomSheetEngine extends BottomSheetCore {
     constructor(opts: EngineOptions);

package/dist/{BottomSheetEngine-wLn6Q2kA.d.ts → BottomSheetEngine-Dn6h-7gF.d.ts}

@@ -1,4 +1,4 @@
-import { B as BottomSheetCore, c as EngineOptions } from './BottomSheetCore-CK_mq14p.js';
+import { B as BottomSheetCore, g as EngineOptions } from './BottomSheetCore-9i-Uh6T3.js';
 
 declare class BottomSheetEngine extends BottomSheetCore {
     constructor(opts: EngineOptions);

package/dist/core.cjs

@@ -375,14 +375,26 @@ function notifyLinkedSheets(sheets, self) {
   }
 }
 
+// src/core/primitives/hot-path-thresholds.ts
+var SIZE_WRITE_EPSILON = 0.5;
+var OPACITY_WRITE_EPSILON = 5e-3;
+var POINTER_EVENTS_OPACITY_THRESHOLD = 0.05;
+var RANGE_DIVISION_EPSILON = 1e-4;
+
 // src/core/features/resize-observer.ts
 function installResizeObserver(deps) {
   if (typeof window === "undefined") {
     return () => {
     };
   }
+  const seatFor = () => {
+    const snap = deps.resolveActiveSnap();
+    const max = deps.getMaxAxisSize();
+    return { target: snap ? Math.min(snap.size, max) : null, max };
+  };
   const onResize = () => {
     if (deps.isDestroyed()) return;
+    const before = seatFor();
     deps.recomputeSnaps();
     const mode = deps.getMode();
     const isVerticalAxis = mode === "bottom" || mode === "top";
@@ -391,6 +403,10 @@ function installResizeObserver(deps) {
     if (viewportSize2 > 0 && viewportSize2 < max) {
       deps.setMaxAxisSize(viewportSize2);
     }
+    const after = seatFor();
+    if (before.target !== null && after.target !== null && Math.abs(after.target - before.target) < SIZE_WRITE_EPSILON && Math.abs(after.max - before.max) < SIZE_WRITE_EPSILON) {
+      return;
+    }
     const wasAnimating = deps.isAnimating?.() ?? false;
     deps.cancelInFlight();
     deps.newCycle();
@@ -659,12 +675,6 @@ var SCRIM_PRESETS = Object.freeze({
   }
 });
 
-// src/core/primitives/hot-path-thresholds.ts
-var SIZE_WRITE_EPSILON = 0.5;
-var OPACITY_WRITE_EPSILON = 5e-3;
-var POINTER_EVENTS_OPACITY_THRESHOLD = 0.05;
-var RANGE_DIVISION_EPSILON = 1e-4;
-
 // src/core/primitives/opacity-dedup.ts
 var WriteSentinel = class {
   constructor() {
@@ -2594,6 +2604,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");
@@ -2707,6 +2718,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;
@@ -2808,7 +2820,8 @@ var BottomSheetCore = class {
         closeOnBack: this.closeOnBack,
         closeOnRouteChange: this.closeOnRouteChange,
         persistKey: this.persistKey,
-        autoCollapseAfter
+        autoCollapseAfter,
+        fitContentToSnap: this.fitContentToSnap
       },
       isDestroyed: () => this.destroyed,
       isDragging: () => this.isDraggingAny(),
@@ -2860,6 +2873,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"

package/dist/core.d.cts

@@ -1,3 +1,3 @@
-export { B as BottomSheetCore, C as CloseReason, f as EngineFeature, m as EngineFeatureContext, n as EngineFeatureOptions, o as EngineFeatureStage, c as EngineOptions, E as EngineState, S as SheetEventMap, b as SheetMode, w as SnapId, d as SnapPoint, a as SnapPointDef } from './BottomSheetCore-BHv6LPmS.cjs';
-export { R as ResolvedSnap } from './index-juAyT76E.cjs';
+export { B as BottomSheetCore, C as CloseReason, E as EngineFeature, a as EngineFeatureContext, b as EngineFeatureOptions, c as EngineFeatureStage, g as EngineOptions, d as EngineState, S as SheetEventMap, f as SheetMode, w as SnapId, h as SnapPoint, e as SnapPointDef } from './BottomSheetCore-CQStdVy2.cjs';
+export { R as ResolvedSnap } from './index-CVGC5B5D.cjs';
 import './transform-jVfAikE9.cjs';

package/dist/core.d.ts

@@ -1,3 +1,3 @@
-export { B as BottomSheetCore, C as CloseReason, f as EngineFeature, m as EngineFeatureContext, n as EngineFeatureOptions, o as EngineFeatureStage, c as EngineOptions, E as EngineState, S as SheetEventMap, b as SheetMode, w as SnapId, d as SnapPoint, a as SnapPointDef } from './BottomSheetCore-CK_mq14p.js';
-export { R as ResolvedSnap } from './index-CWKv1Xy4.js';
+export { B as BottomSheetCore, C as CloseReason, E as EngineFeature, a as EngineFeatureContext, b as EngineFeatureOptions, c as EngineFeatureStage, g as EngineOptions, d as EngineState, S as SheetEventMap, f as SheetMode, w as SnapId, h as SnapPoint, e as SnapPointDef } from './BottomSheetCore-9i-Uh6T3.js';
+export { R as ResolvedSnap } from './index-CnsJQZp2.js';
 import './transform-jVfAikE9.js';

package/dist/core.js

@@ -373,14 +373,26 @@ function notifyLinkedSheets(sheets, self) {
   }
 }
 
+// src/core/primitives/hot-path-thresholds.ts
+var SIZE_WRITE_EPSILON = 0.5;
+var OPACITY_WRITE_EPSILON = 5e-3;
+var POINTER_EVENTS_OPACITY_THRESHOLD = 0.05;
+var RANGE_DIVISION_EPSILON = 1e-4;
+
 // src/core/features/resize-observer.ts
 function installResizeObserver(deps) {
   if (typeof window === "undefined") {
     return () => {
     };
   }
+  const seatFor = () => {
+    const snap = deps.resolveActiveSnap();
+    const max = deps.getMaxAxisSize();
+    return { target: snap ? Math.min(snap.size, max) : null, max };
+  };
   const onResize = () => {
     if (deps.isDestroyed()) return;
+    const before = seatFor();
     deps.recomputeSnaps();
     const mode = deps.getMode();
     const isVerticalAxis = mode === "bottom" || mode === "top";
@@ -389,6 +401,10 @@ function installResizeObserver(deps) {
     if (viewportSize2 > 0 && viewportSize2 < max) {
       deps.setMaxAxisSize(viewportSize2);
     }
+    const after = seatFor();
+    if (before.target !== null && after.target !== null && Math.abs(after.target - before.target) < SIZE_WRITE_EPSILON && Math.abs(after.max - before.max) < SIZE_WRITE_EPSILON) {
+      return;
+    }
     const wasAnimating = deps.isAnimating?.() ?? false;
     deps.cancelInFlight();
     deps.newCycle();
@@ -657,12 +673,6 @@ var SCRIM_PRESETS = Object.freeze({
   }
 });
 
-// src/core/primitives/hot-path-thresholds.ts
-var SIZE_WRITE_EPSILON = 0.5;
-var OPACITY_WRITE_EPSILON = 5e-3;
-var POINTER_EVENTS_OPACITY_THRESHOLD = 0.05;
-var RANGE_DIVISION_EPSILON = 1e-4;
-
 // src/core/primitives/opacity-dedup.ts
 var WriteSentinel = class {
   constructor() {
@@ -2592,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");
@@ -2705,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;
@@ -2806,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(),
@@ -2858,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"

package/dist/debug.d.cts

@@ -1,4 +1,4 @@
-import { E as EngineState, S as SheetEventMap } from './BottomSheetCore-BHv6LPmS.cjs';
+import { d as EngineState, S as SheetEventMap } from './BottomSheetCore-CQStdVy2.cjs';
 import './transform-jVfAikE9.cjs';
 
 type DebugOverlayPosition = "top-left" | "top-right" | "bottom-left" | "bottom-right";

package/dist/debug.d.ts

@@ -1,4 +1,4 @@
-import { E as EngineState, S as SheetEventMap } from './BottomSheetCore-CK_mq14p.js';
+import { d as EngineState, S as SheetEventMap } from './BottomSheetCore-9i-Uh6T3.js';
 import './transform-jVfAikE9.js';
 
 type DebugOverlayPosition = "top-left" | "top-right" | "bottom-left" | "bottom-right";

package/dist/default-features-C3cilcW9.d.ts

@@ -0,0 +1,11 @@
+import { E as EngineFeature } from './BottomSheetCore-9i-Uh6T3.js';
+
+declare function routeFeature(): EngineFeature;
+declare function persistFeature(): EngineFeature;
+declare function autoCollapseFeature(): EngineFeature;
+declare function contentSwipeFeature(): EngineFeature;
+declare function visualViewportFeature(): EngineFeature;
+
+declare function defaultEngineFeatures(): EngineFeature[];
+
+export { autoCollapseFeature as a, contentSwipeFeature as c, defaultEngineFeatures as d, persistFeature as p, routeFeature as r, visualViewportFeature as v };

package/dist/default-features-DkG9aho0.d.cts

@@ -0,0 +1,11 @@
+import { E as EngineFeature } from './BottomSheetCore-CQStdVy2.cjs';
+
+declare function routeFeature(): EngineFeature;
+declare function persistFeature(): EngineFeature;
+declare function autoCollapseFeature(): EngineFeature;
+declare function contentSwipeFeature(): EngineFeature;
+declare function visualViewportFeature(): EngineFeature;
+
+declare function defaultEngineFeatures(): EngineFeature[];
+
+export { autoCollapseFeature as a, contentSwipeFeature as c, defaultEngineFeatures as d, persistFeature as p, routeFeature as r, visualViewportFeature as v };

package/dist/element.cjs

@@ -433,14 +433,31 @@ var init_linked_sheets = __esm({
   }
 });
 
+// src/core/primitives/hot-path-thresholds.ts
+var SIZE_WRITE_EPSILON, OPACITY_WRITE_EPSILON, POINTER_EVENTS_OPACITY_THRESHOLD, RANGE_DIVISION_EPSILON;
+var init_hot_path_thresholds = __esm({
+  "src/core/primitives/hot-path-thresholds.ts"() {
+    SIZE_WRITE_EPSILON = 0.5;
+    OPACITY_WRITE_EPSILON = 5e-3;
+    POINTER_EVENTS_OPACITY_THRESHOLD = 0.05;
+    RANGE_DIVISION_EPSILON = 1e-4;
+  }
+});
+
 // src/core/features/resize-observer.ts
 function installResizeObserver(deps) {
   if (typeof window === "undefined") {
     return () => {
     };
   }
+  const seatFor = () => {
+    const snap = deps.resolveActiveSnap();
+    const max = deps.getMaxAxisSize();
+    return { target: snap ? Math.min(snap.size, max) : null, max };
+  };
   const onResize = () => {
     if (deps.isDestroyed()) return;
+    const before = seatFor();
     deps.recomputeSnaps();
     const mode = deps.getMode();
     const isVerticalAxis = mode === "bottom" || mode === "top";
@@ -449,6 +466,10 @@ function installResizeObserver(deps) {
     if (viewportSize2 > 0 && viewportSize2 < max) {
       deps.setMaxAxisSize(viewportSize2);
     }
+    const after = seatFor();
+    if (before.target !== null && after.target !== null && Math.abs(after.target - before.target) < SIZE_WRITE_EPSILON && Math.abs(after.max - before.max) < SIZE_WRITE_EPSILON) {
+      return;
+    }
     const wasAnimating = deps.isAnimating?.() ?? false;
     deps.cancelInFlight();
     deps.newCycle();
@@ -483,6 +504,7 @@ function installResizeObserver(deps) {
 }
 var init_resize_observer = __esm({
   "src/core/features/resize-observer.ts"() {
+    init_hot_path_thresholds();
   }
 });
 
@@ -747,17 +769,6 @@ var init_types = __esm({
   }
 });
 
-// src/core/primitives/hot-path-thresholds.ts
-var SIZE_WRITE_EPSILON, OPACITY_WRITE_EPSILON, POINTER_EVENTS_OPACITY_THRESHOLD, RANGE_DIVISION_EPSILON;
-var init_hot_path_thresholds = __esm({
-  "src/core/primitives/hot-path-thresholds.ts"() {
-    SIZE_WRITE_EPSILON = 0.5;
-    OPACITY_WRITE_EPSILON = 5e-3;
-    POINTER_EVENTS_OPACITY_THRESHOLD = 0.05;
-    RANGE_DIVISION_EPSILON = 1e-4;
-  }
-});
-
 // src/core/primitives/opacity-dedup.ts
 var WriteSentinel;
 var init_opacity_dedup = __esm({
@@ -2872,6 +2883,7 @@ var init_BottomSheetCore = __esm({
         __publicField(this, "lifecycle");
         __publicField(this, "closeOnBack");
         __publicField(this, "routedTo");
+        __publicField(this, "fitContentToSnap");
         __publicField(this, "persistent");
         __publicField(this, "disableCloseFlag");
         __publicField(this, "disableDragFlag");
@@ -2985,6 +2997,7 @@ var init_BottomSheetCore = __esm({
         );
         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;
@@ -3086,7 +3099,8 @@ var init_BottomSheetCore = __esm({
             closeOnBack: this.closeOnBack,
             closeOnRouteChange: this.closeOnRouteChange,
             persistKey: this.persistKey,
-            autoCollapseAfter
+            autoCollapseAfter,
+            fitContentToSnap: this.fitContentToSnap
           },
           isDestroyed: () => this.destroyed,
           isDragging: () => this.isDraggingAny(),
@@ -3138,6 +3152,11 @@ var init_BottomSheetCore = __esm({
             "[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"
@@ -4534,6 +4553,73 @@ var init_engine_features = __esm({
   }
 });
 
+// src/core/features/content-fit.ts
+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);
+      };
+    }
+  };
+}
+var INSET_VAR, FIT_ATTR;
+var init_content_fit = __esm({
+  "src/core/features/content-fit.ts"() {
+    INSET_VAR = "--bs-content-inset";
+    FIT_ATTR = "data-bs-fit-content";
+  }
+});
+
 // src/core/default-features.ts
 function defaultEngineFeatures() {
   return [
@@ -4541,12 +4627,14 @@ function defaultEngineFeatures() {
     visualViewportFeature(),
     persistFeature(),
     autoCollapseFeature(),
-    routeFeature()
+    routeFeature(),
+    contentFitFeature()
   ];
 }
 var init_default_features = __esm({
   "src/core/default-features.ts"() {
     init_engine_features();
+    init_content_fit();
   }
 });
 
@@ -4571,7 +4659,7 @@ var init_BottomSheetEngine = __esm({
 var baseStyles;
 var init_baseStyles = __esm({
   "src/web-component/baseStyles.ts"() {
-    baseStyles = `:where(.bs-root){--bs-surface-d:#ffffff;--bs-surface-border-d:rgba(225,227,237,1);--bs-radius-d:20px;--bs-handle-color-d:rgba(26,22,20,0.3);--bs-handle-width:40px;--bs-handle-height:5px;--bs-z-backdrop:90;--bs-z-sheet:100;--bs-backdrop-color-d:rgba(0,0,0,0.5);--bs-scrim-color-d:transparent;--bs-scrim-blur:0px;--bs-z-scrim:calc(var(--bs-z-sheet) - 1);--bs-size:0px;--bs-progress:0}.bs-backdrop{position:fixed;inset:0;background:var(--bs-backdrop-color,var(--bs-backdrop-color-d));opacity:0;pointer-events:none;z-index:var(--bs-z-backdrop);transition:opacity 0.24s cubic-bezier(0.22,1,0.36,1);will-change:opacity}.bs-root[data-dragging="true"] .bs-backdrop,.bs-root[data-animating="true"] .bs-backdrop{transition:none}.bs-sheet{position:fixed;background:var(--bs-surface,var(--bs-surface-d));box-shadow:var(--bs-shadow,var(--bs-shadow-auto,none));--bs-shadow-fade:clamp(0,calc(var(--bs-progress,0) * 8),1);z-index:var(--bs-z-sheet);pointer-events:auto;overflow:hidden;display:flex;flex-direction:column;-webkit-tap-highlight-color:transparent;user-select:none;overscroll-behavior:contain}.bs-sheet[data-mode="bottom"]{left:0;right:0;bottom:0;width:100%;border-top-left-radius:var(--bs-radius,var(--bs-radius-d));border-top-right-radius:var(--bs-radius,var(--bs-radius-d));border-top:1px solid var(--bs-surface-border,var(--bs-surface-border-d));padding-bottom:env(safe-area-inset-bottom);--bs-shadow-auto:0 calc(var(--bs-progress,0) * -2px - 3px) calc(var(--bs-progress,0) * 18px + 12px) rgba( 0,0,0,calc(var(--bs-shadow-fade) * (var(--bs-progress,0) * 0.15 + 0.12)) )}.bs-sheet[data-mode="top"]{left:0;right:0;top:0;width:100%;border-bottom-left-radius:var(--bs-radius,var(--bs-radius-d));border-bottom-right-radius:var(--bs-radius,var(--bs-radius-d));border-bottom:1px solid var(--bs-surface-border,var(--bs-surface-border-d));flex-direction:column-reverse;--bs-shadow-auto:0 3px 12px rgba(0,0,0,calc(var(--bs-shadow-fade) * 0.12));padding-top:env(safe-area-inset-top)}.bs-sheet[data-mode="left"]{top:0;bottom:0;left:0;height:100%;border-top-right-radius:var(--bs-radius,var(--bs-radius-d));border-bottom-right-radius:var(--bs-radius,var(--bs-radius-d));border-right:1px solid var(--bs-surface-border,var(--bs-surface-border-d));--bs-shadow-auto:3px 0 12px rgba(0,0,0,calc(var(--bs-shadow-fade) * 0.12))}.bs-sheet[data-mode="right"]{top:0;bottom:0;right:0;height:100%;border-top-left-radius:var(--bs-radius,var(--bs-radius-d));border-bottom-left-radius:var(--bs-radius,var(--bs-radius-d));border-left:1px solid var(--bs-surface-border,var(--bs-surface-border-d));--bs-shadow-auto:-3px 0 12px rgba(0,0,0,calc(var(--bs-shadow-fade) * 0.12))}.bs-sheet[data-bs-rest="closed"]{box-shadow:none;visibility:hidden}.bs-sheet[data-bs-webgl="on"],.bs-sheet[data-bs-webgl="on"] .bs-handle,.bs-sheet[data-bs-webgl="on"] .bs-header,.bs-sheet[data-bs-webgl="on"] .bs-footer{background:transparent;box-shadow:none}.bs-sheet[data-mode="left"] .bs-content{padding-right:36px}.bs-sheet[data-mode="right"] .bs-content{padding-left:36px}.bs-handle{flex-shrink:0;min-height:44px;display:flex;flex-direction:column;justify-content:center;padding:var(--bs-handle-padding,8px 16px 4px);cursor:grab;touch-action:none;user-select:none;background:var(--bs-surface,var(--bs-surface-d));-webkit-tap-highlight-color:transparent;outline:none;position:relative}.bs-handle:active{cursor:grabbing}.bs-handle:focus-visible{outline:2px solid currentColor;outline-offset:-2px;border-radius:var(--bs-radius,var(--bs-radius-d))}.bs-handle::before{content:"";display:block;width:var(--bs-handle-width);height:var(--bs-handle-height);background:var(--bs-handle-color,var(--bs-handle-color-d));border-radius:calc(var(--bs-handle-height) / 2);margin:0 auto 8px;transition:width 0.15s ease,background 0.15s ease,transform 0.15s ease;pointer-events:none}.bs-sheet[data-mode="left"] .bs-handle,.bs-sheet[data-mode="right"] .bs-handle{position:absolute;top:0;bottom:0;width:28px;min-width:0;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0;background:var(--bs-surface,var(--bs-surface-d));z-index:1;overflow:hidden}.bs-sheet[data-mode="left"] .bs-handle>*,.bs-sheet[data-mode="right"] .bs-handle>*{display:none}.bs-sheet[data-mode="left"] .bs-handle{right:0;border-left:1px solid var(--bs-surface-border,var(--bs-surface-border-d))}.bs-sheet[data-mode="right"] .bs-handle{left:0;border-right:1px solid var(--bs-surface-border,var(--bs-surface-border-d))}.bs-sheet[data-mode="left"] .bs-handle::before,.bs-sheet[data-mode="right"] .bs-handle::before{width:var(--bs-handle-height);height:var(--bs-handle-width);margin:0}.bs-sheet:hover .bs-handle::before{background:color-mix(in oklab,var(--bs-handle-color,var(--bs-handle-color-d)),#000 15%)}.bs-handle:active::before{background:color-mix(in oklab,var(--bs-handle-color,var(--bs-handle-color-d)),#000 35%);transform:scaleX(1.15)}.bs-handle.bs-handle--ticks::after{content:"";display:block;position:absolute;left:50%;bottom:6px;transform:translateX(-50%);width:calc(var(--bs-handle-width) * 2);height:3px;background-image:radial-gradient( circle,var(--bs-handle-color,var(--bs-handle-color-d)) 0 1.5px,transparent 1.6px );background-size:8px 3px;background-repeat:repeat-x;background-position:center;opacity:0;transition:opacity 0.18s ease-out;pointer-events:none}.bs-root[data-dragging="true"] .bs-handle.bs-handle--ticks::after{opacity:0.4}.bs-sheet[data-mode="top"] .bs-handle.bs-handle--ticks::after{bottom:auto;top:6px}.bs-sheet[data-mode="left"] .bs-handle.bs-handle--ticks::after,.bs-sheet[data-mode="right"] .bs-handle.bs-handle--ticks::after{left:50%;top:50%;bottom:auto;transform:translate(-50%,-50%);width:3px;height:calc(var(--bs-handle-width) * 2);background-size:3px 8px;background-repeat:repeat-y;margin-left:calc(var(--bs-handle-height) + 6px)}.bs-sheet[data-mode="right"] .bs-handle.bs-handle--ticks::after{margin-left:calc(-1 * (var(--bs-handle-height) + 6px))}.bs-header{flex:0 0 auto;min-height:var(--bs-header-min-height,0px);padding:var(--bs-header-padding,0 16px 8px);background:var(--bs-surface,var(--bs-surface-d))}.bs-content{flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;user-select:text;padding:var(--bs-content-padding,0 16px 16px)}.bs-footer{flex:0 0 auto;padding:var(--bs-footer-padding,12px 16px calc(12px + env(safe-area-inset-bottom)));border-top:1px solid var(--bs-surface-border,var(--bs-surface-border-d));background:var(--bs-surface,var(--bs-surface-d))}.bs-sheet[data-mode="bottom"]:has(.bs-footer:not([hidden]):has(*)){padding-bottom:0}.bs-header:not(:has(*)),.bs-footer:not(:has(*)),.bs-header[hidden],.bs-footer[hidden]{display:none}.bs-screen{position:absolute;inset:0;pointer-events:none;z-index:var(--bs-z-scrim);background:var(--bs-scrim-color,var(--bs-scrim-color-d));backdrop-filter:blur(var(--bs-scrim-blur,0px));-webkit-backdrop-filter:blur(var(--bs-scrim-blur,0px));transition:opacity 0.24s cubic-bezier(0.22,1,0.36,1);will-change:opacity}.bs-root[data-dragging="true"] .bs-screen,.bs-root[data-animating="true"] .bs-screen{transition:none}.bs-scrim-overlay{z-index:calc(var(--bs-z-sheet) + 1);pointer-events:none}.bs-button-slot{position:fixed;z-index:calc(var(--bs-z-sheet) + 1);pointer-events:auto}.bs-button-slot[data-side="left"]{left:16px;bottom:calc(var(--bs-size,0px) + 12px)}.bs-button-slot[data-side="right"]{right:16px;bottom:calc(var(--bs-size,0px) + 12px)}.bs-button-slot[data-mode="top"]{bottom:auto;top:calc(var(--bs-size,0px) + 12px)}.bs-button-slot[data-mode="left"]{left:calc(var(--bs-size,0px) + 12px);right:auto;bottom:auto;top:16px}.bs-button-slot[data-mode="right"]{right:calc(var(--bs-size,0px) + 12px);left:auto;bottom:auto;top:16px}@media (prefers-reduced-motion:reduce){.bs-backdrop,.bs-handle::before,.bs-button-slot[data-side="left"],.bs-button-slot[data-side="right"]{transition:none !important}}@media (prefers-color-scheme:dark){:where(.bs-root){--bs-surface-d:#1a1a1d;--bs-surface-border-d:rgba(255,255,255,0.08);--bs-handle-color-d:rgba(255,255,255,0.45);--bs-shadow-auto:0 -3px 16px rgba(0,0,0,0.5)}}@media (forced-colors:active){.bs-sheet{border:1px solid CanvasText}.bs-handle::before{background:CanvasText;forced-color-adjust:none}.bs-backdrop,.bs-screen{forced-color-adjust:none}}.bs-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}:where(.ovl-root){--ovl-surface:var(--bs-surface,var(--bs-surface-d,#ffffff));--ovl-surface-border:var(--bs-surface-border,var(--bs-surface-border-d,rgba(0,0,0,0.08)));--ovl-shadow:0 -8px 40px rgba(0,0,0,0.35);--ovl-radius:var(--bs-radius,var(--bs-radius-d,20px));--ovl-backdrop-color:rgba(0,0,0,0.5);--ovl-z-backdrop:200;--ovl-z-panel:201}.ovl-backdrop{position:fixed;inset:0;background:var(--ovl-backdrop-color);opacity:0;pointer-events:none;z-index:var(--ovl-z-backdrop)}.ovl-panel{position:fixed;background:var(--ovl-surface);box-shadow:var(--ovl-shadow);z-index:var(--ovl-z-panel);-webkit-tap-highlight-color:transparent;outline:none;transition:transform 0.32s cubic-bezier(0.29,1.24,0.84,0.99),opacity 0.32s ease-out}.ovl-panel[data-state="open"]{transform:translate3d(0,0,0);opacity:1}@starting-style{.ovl-panel[data-edge="bottom"][data-state="open"]{transform:translate3d(0,100%,0);opacity:0}.ovl-panel[data-edge="top"][data-state="open"]{transform:translate3d(0,-100%,0);opacity:0}.ovl-panel[data-edge="left"][data-state="open"]{transform:translate3d(-100%,0,0);opacity:0}.ovl-panel[data-edge="right"][data-state="open"]{transform:translate3d(100%,0,0);opacity:0}}.ovl-panel[data-edge="bottom"]{left:0;right:0;bottom:0;width:100%;border-top-left-radius:var(--ovl-radius);border-top-right-radius:var(--ovl-radius);border-top:1px solid var(--ovl-surface-border);padding-bottom:env(safe-area-inset-bottom)}.ovl-panel[data-edge="top"]{left:0;right:0;top:0;width:100%;border-bottom-left-radius:var(--ovl-radius);border-bottom-right-radius:var(--ovl-radius);border-bottom:1px solid var(--ovl-surface-border);padding-top:env(safe-area-inset-top)}.ovl-panel[data-edge="left"]{top:0;bottom:0;left:0;height:100%;border-top-right-radius:var(--ovl-radius);border-bottom-right-radius:var(--ovl-radius);border-right:1px solid var(--ovl-surface-border)}.ovl-panel[data-edge="right"]{top:0;bottom:0;right:0;height:100%;border-top-left-radius:var(--ovl-radius);border-bottom-left-radius:var(--ovl-radius);border-left:1px solid var(--ovl-surface-border)}@media (prefers-reduced-motion:reduce){.ovl-panel,.ovl-backdrop{transition:none !important}}`;
+    baseStyles = `:where(.bs-root){--bs-surface-d:#ffffff;--bs-surface-border-d:rgba(225,227,237,1);--bs-radius-d:20px;--bs-handle-color-d:rgba(26,22,20,0.3);--bs-handle-width:40px;--bs-handle-height:5px;--bs-z-backdrop:90;--bs-z-sheet:100;--bs-backdrop-color-d:rgba(0,0,0,0.5);--bs-scrim-color-d:transparent;--bs-scrim-blur:0px;--bs-z-scrim:calc(var(--bs-z-sheet) - 1);--bs-size:0px;--bs-progress:0}.bs-backdrop{position:fixed;inset:0;background:var(--bs-backdrop-color,var(--bs-backdrop-color-d));opacity:0;pointer-events:none;z-index:var(--bs-z-backdrop);transition:opacity 0.24s cubic-bezier(0.22,1,0.36,1);will-change:opacity}.bs-root[data-dragging="true"] .bs-backdrop,.bs-root[data-animating="true"] .bs-backdrop{transition:none}.bs-sheet{position:fixed;background:var(--bs-surface,var(--bs-surface-d));box-shadow:var(--bs-shadow,var(--bs-shadow-auto,none));--bs-shadow-fade:clamp(0,calc(var(--bs-progress,0) * 8),1);z-index:var(--bs-z-sheet);pointer-events:auto;overflow:hidden;display:flex;flex-direction:column;-webkit-tap-highlight-color:transparent;user-select:none;overscroll-behavior:contain}.bs-sheet[data-mode="bottom"]{left:0;right:0;bottom:0;width:100%;border-top-left-radius:var(--bs-radius,var(--bs-radius-d));border-top-right-radius:var(--bs-radius,var(--bs-radius-d));border-top:1px solid var(--bs-surface-border,var(--bs-surface-border-d));padding-bottom:env(safe-area-inset-bottom);--bs-shadow-auto:0 calc(var(--bs-progress,0) * -2px - 3px) calc(var(--bs-progress,0) * 18px + 12px) rgba( 0,0,0,calc(var(--bs-shadow-fade) * (var(--bs-progress,0) * 0.15 + 0.12)) )}.bs-sheet[data-mode="top"]{left:0;right:0;top:0;width:100%;border-bottom-left-radius:var(--bs-radius,var(--bs-radius-d));border-bottom-right-radius:var(--bs-radius,var(--bs-radius-d));border-bottom:1px solid var(--bs-surface-border,var(--bs-surface-border-d));flex-direction:column-reverse;--bs-shadow-auto:0 3px 12px rgba(0,0,0,calc(var(--bs-shadow-fade) * 0.12));padding-top:env(safe-area-inset-top)}.bs-sheet[data-mode="left"]{top:0;bottom:0;left:0;height:100%;border-top-right-radius:var(--bs-radius,var(--bs-radius-d));border-bottom-right-radius:var(--bs-radius,var(--bs-radius-d));border-right:1px solid var(--bs-surface-border,var(--bs-surface-border-d));--bs-shadow-auto:3px 0 12px rgba(0,0,0,calc(var(--bs-shadow-fade) * 0.12))}.bs-sheet[data-mode="right"]{top:0;bottom:0;right:0;height:100%;border-top-left-radius:var(--bs-radius,var(--bs-radius-d));border-bottom-left-radius:var(--bs-radius,var(--bs-radius-d));border-left:1px solid var(--bs-surface-border,var(--bs-surface-border-d));--bs-shadow-auto:-3px 0 12px rgba(0,0,0,calc(var(--bs-shadow-fade) * 0.12))}.bs-sheet[data-bs-rest="closed"]{box-shadow:none;visibility:hidden}.bs-sheet[data-bs-webgl="on"],.bs-sheet[data-bs-webgl="on"] .bs-handle,.bs-sheet[data-bs-webgl="on"] .bs-header,.bs-sheet[data-bs-webgl="on"] .bs-footer{background:transparent;box-shadow:none}.bs-sheet[data-mode="left"] .bs-content{padding-right:36px}.bs-sheet[data-mode="right"] .bs-content{padding-left:36px}.bs-handle{flex-shrink:0;min-height:44px;display:flex;flex-direction:column;justify-content:center;padding:var(--bs-handle-padding,8px 16px 4px);cursor:grab;touch-action:none;user-select:none;background:var(--bs-surface,var(--bs-surface-d));-webkit-tap-highlight-color:transparent;outline:none;position:relative}.bs-handle:active{cursor:grabbing}.bs-handle:focus-visible{outline:2px solid currentColor;outline-offset:-2px;border-radius:var(--bs-radius,var(--bs-radius-d))}.bs-handle::before{content:"";display:block;width:var(--bs-handle-width);height:var(--bs-handle-height);background:var(--bs-handle-color,var(--bs-handle-color-d));border-radius:calc(var(--bs-handle-height) / 2);margin:0 auto 8px;transition:width 0.15s ease,background 0.15s ease,transform 0.15s ease;pointer-events:none}.bs-sheet[data-mode="left"] .bs-handle,.bs-sheet[data-mode="right"] .bs-handle{position:absolute;top:0;bottom:0;width:28px;min-width:0;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0;background:var(--bs-surface,var(--bs-surface-d));z-index:1;overflow:hidden}.bs-sheet[data-mode="left"] .bs-handle>*,.bs-sheet[data-mode="right"] .bs-handle>*{display:none}.bs-sheet[data-mode="left"] .bs-handle{right:0;border-left:1px solid var(--bs-surface-border,var(--bs-surface-border-d))}.bs-sheet[data-mode="right"] .bs-handle{left:0;border-right:1px solid var(--bs-surface-border,var(--bs-surface-border-d))}.bs-sheet[data-mode="left"] .bs-handle::before,.bs-sheet[data-mode="right"] .bs-handle::before{width:var(--bs-handle-height);height:var(--bs-handle-width);margin:0}.bs-sheet:hover .bs-handle::before{background:color-mix(in oklab,var(--bs-handle-color,var(--bs-handle-color-d)),#000 15%)}.bs-handle:active::before{background:color-mix(in oklab,var(--bs-handle-color,var(--bs-handle-color-d)),#000 35%);transform:scaleX(1.15)}.bs-handle.bs-handle--ticks::after{content:"";display:block;position:absolute;left:50%;bottom:6px;transform:translateX(-50%);width:calc(var(--bs-handle-width) * 2);height:3px;background-image:radial-gradient( circle,var(--bs-handle-color,var(--bs-handle-color-d)) 0 1.5px,transparent 1.6px );background-size:8px 3px;background-repeat:repeat-x;background-position:center;opacity:0;transition:opacity 0.18s ease-out;pointer-events:none}.bs-root[data-dragging="true"] .bs-handle.bs-handle--ticks::after{opacity:0.4}.bs-sheet[data-mode="top"] .bs-handle.bs-handle--ticks::after{bottom:auto;top:6px}.bs-sheet[data-mode="left"] .bs-handle.bs-handle--ticks::after,.bs-sheet[data-mode="right"] .bs-handle.bs-handle--ticks::after{left:50%;top:50%;bottom:auto;transform:translate(-50%,-50%);width:3px;height:calc(var(--bs-handle-width) * 2);background-size:3px 8px;background-repeat:repeat-y;margin-left:calc(var(--bs-handle-height) + 6px)}.bs-sheet[data-mode="right"] .bs-handle.bs-handle--ticks::after{margin-left:calc(-1 * (var(--bs-handle-height) + 6px))}.bs-header{flex:0 0 auto;min-height:var(--bs-header-min-height,0px);padding:var(--bs-header-padding,0 16px 8px);background:var(--bs-surface,var(--bs-surface-d))}.bs-content{flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;user-select:text;padding:var(--bs-content-padding,0 16px 16px)}.bs-sheet[data-bs-fit-content] .bs-content{scroll-padding-bottom:var(--bs-content-inset,0px)}.bs-sheet[data-bs-fit-content] .bs-content::after{content:"";display:block;flex:none;height:var(--bs-content-inset,0px)}.bs-footer{flex:0 0 auto;padding:var(--bs-footer-padding,12px 16px calc(12px + env(safe-area-inset-bottom)));border-top:1px solid var(--bs-surface-border,var(--bs-surface-border-d));background:var(--bs-surface,var(--bs-surface-d))}.bs-sheet[data-mode="bottom"]:has(.bs-footer:not([hidden]):has(*)){padding-bottom:0}.bs-header:not(:has(*)),.bs-footer:not(:has(*)),.bs-header[hidden],.bs-footer[hidden]{display:none}.bs-screen{position:absolute;inset:0;pointer-events:none;z-index:var(--bs-z-scrim);background:var(--bs-scrim-color,var(--bs-scrim-color-d));backdrop-filter:blur(var(--bs-scrim-blur,0px));-webkit-backdrop-filter:blur(var(--bs-scrim-blur,0px));transition:opacity 0.24s cubic-bezier(0.22,1,0.36,1);will-change:opacity}.bs-root[data-dragging="true"] .bs-screen,.bs-root[data-animating="true"] .bs-screen{transition:none}.bs-scrim-overlay{z-index:calc(var(--bs-z-sheet) + 1);pointer-events:none}.bs-button-slot{position:fixed;z-index:calc(var(--bs-z-sheet) + 1);pointer-events:auto}.bs-button-slot[data-side="left"]{left:16px;bottom:calc(var(--bs-size,0px) + 12px)}.bs-button-slot[data-side="right"]{right:16px;bottom:calc(var(--bs-size,0px) + 12px)}.bs-button-slot[data-mode="top"]{bottom:auto;top:calc(var(--bs-size,0px) + 12px)}.bs-button-slot[data-mode="left"]{left:calc(var(--bs-size,0px) + 12px);right:auto;bottom:auto;top:16px}.bs-button-slot[data-mode="right"]{right:calc(var(--bs-size,0px) + 12px);left:auto;bottom:auto;top:16px}@media (prefers-reduced-motion:reduce){.bs-backdrop,.bs-handle::before,.bs-button-slot[data-side="left"],.bs-button-slot[data-side="right"]{transition:none !important}}@media (prefers-color-scheme:dark){:where(.bs-root){--bs-surface-d:#1a1a1d;--bs-surface-border-d:rgba(255,255,255,0.08);--bs-handle-color-d:rgba(255,255,255,0.45);--bs-shadow-auto:0 -3px 16px rgba(0,0,0,0.5)}}@media (forced-colors:active){.bs-sheet{border:1px solid CanvasText}.bs-handle::before{background:CanvasText;forced-color-adjust:none}.bs-backdrop,.bs-screen{forced-color-adjust:none}}.bs-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}:where(.ovl-root){--ovl-surface:var(--bs-surface,var(--bs-surface-d,#ffffff));--ovl-surface-border:var(--bs-surface-border,var(--bs-surface-border-d,rgba(0,0,0,0.08)));--ovl-shadow:0 -8px 40px rgba(0,0,0,0.35);--ovl-radius:var(--bs-radius,var(--bs-radius-d,20px));--ovl-backdrop-color:rgba(0,0,0,0.5);--ovl-z-backdrop:200;--ovl-z-panel:201}.ovl-backdrop{position:fixed;inset:0;background:var(--ovl-backdrop-color);opacity:0;pointer-events:none;z-index:var(--ovl-z-backdrop)}.ovl-panel{position:fixed;background:var(--ovl-surface);box-shadow:var(--ovl-shadow);z-index:var(--ovl-z-panel);-webkit-tap-highlight-color:transparent;outline:none;transition:transform 0.32s cubic-bezier(0.29,1.24,0.84,0.99),opacity 0.32s ease-out}.ovl-panel[data-state="open"]{transform:translate3d(0,0,0);opacity:1}@starting-style{.ovl-panel[data-edge="bottom"][data-state="open"]{transform:translate3d(0,100%,0);opacity:0}.ovl-panel[data-edge="top"][data-state="open"]{transform:translate3d(0,-100%,0);opacity:0}.ovl-panel[data-edge="left"][data-state="open"]{transform:translate3d(-100%,0,0);opacity:0}.ovl-panel[data-edge="right"][data-state="open"]{transform:translate3d(100%,0,0);opacity:0}}.ovl-panel[data-edge="bottom"]{left:0;right:0;bottom:0;width:100%;border-top-left-radius:var(--ovl-radius);border-top-right-radius:var(--ovl-radius);border-top:1px solid var(--ovl-surface-border);padding-bottom:env(safe-area-inset-bottom)}.ovl-panel[data-edge="top"]{left:0;right:0;top:0;width:100%;border-bottom-left-radius:var(--ovl-radius);border-bottom-right-radius:var(--ovl-radius);border-bottom:1px solid var(--ovl-surface-border);padding-top:env(safe-area-inset-top)}.ovl-panel[data-edge="left"]{top:0;bottom:0;left:0;height:100%;border-top-right-radius:var(--ovl-radius);border-bottom-right-radius:var(--ovl-radius);border-right:1px solid var(--ovl-surface-border)}.ovl-panel[data-edge="right"]{top:0;bottom:0;right:0;height:100%;border-top-left-radius:var(--ovl-radius);border-bottom-left-radius:var(--ovl-radius);border-left:1px solid var(--ovl-surface-border)}@media (prefers-reduced-motion:reduce){.ovl-panel,.ovl-backdrop{transition:none !important}}`;
   }
 });
 
@@ -4668,7 +4756,7 @@ var init_shadow_tree = __esm({
 });
 
 // src/web-component/attributes.ts
-var ATTR_SNAP_POINTS, ATTR_ALLOWED, ATTR_INITIAL, ATTR_MODE, ATTR_BACKDROP, ATTR_STYLESHEET, ATTR_ANIMATION, ATTR_FOCUS_TRAP, ATTR_CLOSE_ON_ESCAPE, ATTR_LOCK_BODY_SCROLL, ATTR_SHEET_LABEL, ATTR_STACK_EFFECT, ATTR_PERSISTENT, ATTR_DISABLE_CLOSE, ATTR_DISABLE_DRAG, ATTR_DRAG_FROM, ATTR_DRAG_FROM_CONTENT, ATTR_CLOSE_ON_ROUTE_CHANGE, ATTR_RADIUS, ATTR_MAX_HEIGHT, ATTR_RETURN_FOCUS_TO, ATTR_BACKDROP_COLOR, ATTR_SCRIM_COLOR, ATTR_SNAP, LIVE_ATTRS, OBSERVED_ATTRS, isValidSnapPoint, DEFAULT_SNAP_POINTS, parseSnapPoints, VALID_MODES, VALID_ANIMATIONS, parseMode, parseAnimation, VALID_DRAG_FROM, parseDragFrom, parseList, parseDimension, ANCHOR_POSITIONS, ANCHOR_ANIMATIONS, parseAnchorOptions;
+var ATTR_SNAP_POINTS, ATTR_ALLOWED, ATTR_INITIAL, ATTR_MODE, ATTR_BACKDROP, ATTR_STYLESHEET, ATTR_ANIMATION, ATTR_FOCUS_TRAP, ATTR_CLOSE_ON_ESCAPE, ATTR_LOCK_BODY_SCROLL, ATTR_SHEET_LABEL, ATTR_STACK_EFFECT, ATTR_PERSISTENT, ATTR_DISABLE_CLOSE, ATTR_DISABLE_DRAG, ATTR_DRAG_FROM, ATTR_DRAG_FROM_CONTENT, ATTR_FIT_CONTENT_TO_SNAP, ATTR_CLOSE_ON_ROUTE_CHANGE, ATTR_RADIUS, ATTR_MAX_HEIGHT, ATTR_RETURN_FOCUS_TO, ATTR_BACKDROP_COLOR, ATTR_SCRIM_COLOR, ATTR_SNAP, LIVE_ATTRS, OBSERVED_ATTRS, isValidSnapPoint, DEFAULT_SNAP_POINTS, parseSnapPoints, VALID_MODES, VALID_ANIMATIONS, parseMode, parseAnimation, VALID_DRAG_FROM, parseDragFrom, parseList, parseDimension, ANCHOR_POSITIONS, ANCHOR_ANIMATIONS, parseAnchorOptions;
 var init_attributes = __esm({
   "src/web-component/attributes.ts"() {
     ATTR_SNAP_POINTS = "snap-points";
@@ -4688,6 +4776,7 @@ var init_attributes = __esm({
     ATTR_DISABLE_DRAG = "disable-drag";
     ATTR_DRAG_FROM = "drag-from";
     ATTR_DRAG_FROM_CONTENT = "drag-from-content";
+    ATTR_FIT_CONTENT_TO_SNAP = "fit-content-to-snap";
     ATTR_CLOSE_ON_ROUTE_CHANGE = "close-on-route-change";
     ATTR_RADIUS = "radius";
     ATTR_MAX_HEIGHT = "max-height";
@@ -4725,6 +4814,7 @@ var init_attributes = __esm({
       ATTR_DISABLE_DRAG,
       ATTR_DRAG_FROM,
       ATTR_DRAG_FROM_CONTENT,
+      ATTR_FIT_CONTENT_TO_SNAP,
       ATTR_CLOSE_ON_ROUTE_CHANGE,
       ATTR_RADIUS,
       ATTR_MAX_HEIGHT,
@@ -4998,6 +5088,7 @@ var init_BottomSheetElement = __esm({
           disableDrag: this.getAttribute(ATTR_DISABLE_DRAG) === "true",
           dragFrom: parseDragFrom(this.getAttribute(ATTR_DRAG_FROM)),
           dragFromContent: this.getAttribute(ATTR_DRAG_FROM_CONTENT) === null ? void 0 : this.getAttribute(ATTR_DRAG_FROM_CONTENT) !== "false",
+          fitContentToSnap: this.hasAttribute(ATTR_FIT_CONTENT_TO_SNAP) && this.getAttribute(ATTR_FIT_CONTENT_TO_SNAP) !== "false",
           closeOnRouteChange: this.getAttribute(ATTR_CLOSE_ON_ROUTE_CHANGE) === "true",
           radius: parseDimension(this.getAttribute(ATTR_RADIUS)),
           maxHeight: parseDimension(this.getAttribute(ATTR_MAX_HEIGHT)),

package/dist/element.d.cts

@@ -1,5 +1,5 @@
-import { B as BottomSheetEngine } from './BottomSheetEngine-mmFzIK1Z.cjs';
-import { C as CloseReason, A as AnchorOptions, e as ScrimStagesOptions, E as EngineState } from './BottomSheetCore-BHv6LPmS.cjs';
+import { B as BottomSheetEngine } from './BottomSheetEngine-CsQWHLNb.cjs';
+import { C as CloseReason, A as AnchorOptions, i as ScrimStagesOptions, d as EngineState } from './BottomSheetCore-CQStdVy2.cjs';
 import './transform-jVfAikE9.cjs';
 
 declare const BaseHTMLElement: typeof HTMLElement;