@surdeddd/bottom-sheet 0.21.2 → 0.22.1

package/README.md

@@ -12,7 +12,7 @@ A framework-agnostic bottom-sheet primitive. Spring physics, Pointer Events,
 GPU-only motion, full keyboard a11y, hardware-back interception, multi-sheet
 stacking — and the exact same engine behind every adapter.
 
-## 🚀 [Live demo → bottom-sheet-demo.vercel.app](https://bottom-sheet-demo.vercel.app)
+## 🚀 [Live demo → bottom-sheet-demo-ashy.vercel.app](https://bottom-sheet-demo-ashy.vercel.app)
 
 📚 [API reference (typedoc) → surdeddd.github.io/BottomSheet](https://surdeddd.github.io/BottomSheet/)
 
@@ -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

@@ -2604,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");
@@ -2717,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;
@@ -2818,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(),
@@ -2870,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

@@ -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"

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

@@ -2883,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");
@@ -2996,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;
@@ -3097,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(),
@@ -3149,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"
@@ -4545,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 [
@@ -4552,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();
   }
 });
 
@@ -4582,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}}`;
   }
 });
 
@@ -4679,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";
@@ -4699,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";
@@ -4736,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,
@@ -5009,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;

package/dist/element.d.ts

@@ -1,5 +1,5 @@
-import { B as BottomSheetEngine } from './BottomSheetEngine-wLn6Q2kA.js';
-import { C as CloseReason, A as AnchorOptions, e as ScrimStagesOptions, E as EngineState } from './BottomSheetCore-CK_mq14p.js';
+import { B as BottomSheetEngine } from './BottomSheetEngine-Dn6h-7gF.js';
+import { C as CloseReason, A as AnchorOptions, i as ScrimStagesOptions, d as EngineState } from './BottomSheetCore-9i-Uh6T3.js';
 import './transform-jVfAikE9.js';
 
 declare const BaseHTMLElement: typeof HTMLElement;