@surdeddd/bottom-sheet 0.22.0 → 0.23.0

package/dist/element.js

@@ -1628,13 +1628,17 @@ var init_animation_runner = __esm({
         });
         let stopped = false;
         let auxRaf = 0;
-        const start = performance.now();
         const lastIdx = samples.values.length - 1;
         const auxTick = () => {
           if (stopped) return;
-          const elapsed = performance.now() - start;
-          const idx = Math.min(Math.floor(elapsed / samples.stepMs), lastIdx);
-          applyAux(samples.values[idx]);
+          const at = Math.min(
+            (Number(anim.currentTime) || 0) / samples.stepMs,
+            lastIdx
+          );
+          const idx = Math.floor(at);
+          const from = samples.values[idx];
+          const to = samples.values[Math.min(idx + 1, lastIdx)];
+          applyAux(from + (to - from) * (at - idx));
           auxRaf = requestAnimationFrame(auxTick);
         };
         auxRaf = requestAnimationFrame(auxTick);
@@ -2982,7 +2986,11 @@ var init_BottomSheetCore = __esm({
             getSize: () => this.size,
             isDragging: () => this.isDraggingAny(),
             applyAux: (size) => this.applySize(size, true),
-            getTransformFor: (size) => this.transformTemplate(this.snaps.getMaxAxisSize() - size)
+            getTransformFor: (size) => {
+              const cap = this.snaps.getMaxAxisSize();
+              const shown = cap > 0 && !this.allowOvershoot ? Math.min(size, cap) : size;
+              return this.transformTemplate(cap - shown);
+            }
           },
           resolved.animation
         );
@@ -4564,6 +4572,7 @@ function contentFitFeature() {
       let inset = 0;
       let unpaddedMax = -1;
       let top = 0;
+      const put = (name, px) => sheet.style.setProperty(name, `${px}px`);
       const hiddenAt = (size) => sheet.dataset.mode === "bottom" ? Math.max(0, ctx.getMaxAxisSize() - size) : 0;
       const follow = (size) => {
         if (unpaddedMax < 0) {
@@ -4582,7 +4591,10 @@ function contentFitFeature() {
         unpaddedMax = -1;
         follow(size);
         inset = hiddenAt(size);
-        sheet.style.setProperty(INSET_VAR, `${inset}px`);
+        put(LIFT_VAR, scroller.offsetHeight);
+        put(INSET_VAR, inset);
+        put(SIZE_VAR, size);
+        put(CAP_VAR, ctx.getMaxAxisSize());
         unpaddedMax = -1;
       };
       const moving = () => ctx.isAnimating() || ctx.isDragging();
@@ -4605,15 +4617,20 @@ function contentFitFeature() {
         observer?.disconnect();
         window.removeEventListener("orientationchange", whenIdle);
         sheet.removeAttribute(FIT_ATTR);
-        sheet.style.removeProperty(INSET_VAR);
+        for (const name of [INSET_VAR, CAP_VAR, LIFT_VAR]) {
+          sheet.style.removeProperty(name);
+        }
       };
     }
   };
 }
-var INSET_VAR, FIT_ATTR;
+var INSET_VAR, SIZE_VAR, CAP_VAR, LIFT_VAR, FIT_ATTR;
 var init_content_fit = __esm({
   "src/core/features/content-fit.ts"() {
     INSET_VAR = "--bs-content-inset";
+    SIZE_VAR = "--bs-size";
+    CAP_VAR = "--bs-max-size";
+    LIFT_VAR = "--bs-footer-lift-max";
     FIT_ATTR = "data-bs-fit-content";
   }
 });
@@ -4657,7 +4674,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-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}}`;
+    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-bs-fit-content][data-mode="bottom"]:not([data-bs-webgl="on"]) .bs-footer{transform:translateY( clamp( calc(-1 * var(--bs-footer-lift-max,0px)),calc(var(--bs-size,0px) - var(--bs-max-size,0px)),0px ) )}.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}}`;
   }
 });
 

package/dist/features.cjs

@@ -470,6 +470,9 @@ function visualViewportFeature() {
 
 // src/core/features/content-fit.ts
 var INSET_VAR = "--bs-content-inset";
+var SIZE_VAR = "--bs-size";
+var CAP_VAR = "--bs-max-size";
+var LIFT_VAR = "--bs-footer-lift-max";
 var FIT_ATTR = "data-bs-fit-content";
 function contentFitFeature() {
   return {
@@ -483,6 +486,7 @@ function contentFitFeature() {
       let inset = 0;
       let unpaddedMax = -1;
       let top = 0;
+      const put = (name, px) => sheet.style.setProperty(name, `${px}px`);
       const hiddenAt = (size) => sheet.dataset.mode === "bottom" ? Math.max(0, ctx.getMaxAxisSize() - size) : 0;
       const follow = (size) => {
         if (unpaddedMax < 0) {
@@ -501,7 +505,10 @@ function contentFitFeature() {
         unpaddedMax = -1;
         follow(size);
         inset = hiddenAt(size);
-        sheet.style.setProperty(INSET_VAR, `${inset}px`);
+        put(LIFT_VAR, scroller.offsetHeight);
+        put(INSET_VAR, inset);
+        put(SIZE_VAR, size);
+        put(CAP_VAR, ctx.getMaxAxisSize());
         unpaddedMax = -1;
       };
       const moving = () => ctx.isAnimating() || ctx.isDragging();
@@ -524,7 +531,9 @@ function contentFitFeature() {
         observer?.disconnect();
         window.removeEventListener("orientationchange", whenIdle);
         sheet.removeAttribute(FIT_ATTR);
-        sheet.style.removeProperty(INSET_VAR);
+        for (const name of [INSET_VAR, CAP_VAR, LIFT_VAR]) {
+          sheet.style.removeProperty(name);
+        }
       };
     }
   };

package/dist/features.js

@@ -468,6 +468,9 @@ function visualViewportFeature() {
 
 // src/core/features/content-fit.ts
 var INSET_VAR = "--bs-content-inset";
+var SIZE_VAR = "--bs-size";
+var CAP_VAR = "--bs-max-size";
+var LIFT_VAR = "--bs-footer-lift-max";
 var FIT_ATTR = "data-bs-fit-content";
 function contentFitFeature() {
   return {
@@ -481,6 +484,7 @@ function contentFitFeature() {
       let inset = 0;
       let unpaddedMax = -1;
       let top = 0;
+      const put = (name, px) => sheet.style.setProperty(name, `${px}px`);
       const hiddenAt = (size) => sheet.dataset.mode === "bottom" ? Math.max(0, ctx.getMaxAxisSize() - size) : 0;
       const follow = (size) => {
         if (unpaddedMax < 0) {
@@ -499,7 +503,10 @@ function contentFitFeature() {
         unpaddedMax = -1;
         follow(size);
         inset = hiddenAt(size);
-        sheet.style.setProperty(INSET_VAR, `${inset}px`);
+        put(LIFT_VAR, scroller.offsetHeight);
+        put(INSET_VAR, inset);
+        put(SIZE_VAR, size);
+        put(CAP_VAR, ctx.getMaxAxisSize());
         unpaddedMax = -1;
       };
       const moving = () => ctx.isAnimating() || ctx.isDragging();
@@ -522,7 +529,9 @@ function contentFitFeature() {
         observer?.disconnect();
         window.removeEventListener("orientationchange", whenIdle);
         sheet.removeAttribute(FIT_ATTR);
-        sheet.style.removeProperty(INSET_VAR);
+        for (const name of [INSET_VAR, CAP_VAR, LIFT_VAR]) {
+          sheet.style.removeProperty(name);
+        }
       };
     }
   };

package/dist/index.cjs

@@ -1487,13 +1487,17 @@ var AnimationRunner = class {
     });
     let stopped = false;
     let auxRaf = 0;
-    const start = performance.now();
     const lastIdx = samples.values.length - 1;
     const auxTick = () => {
       if (stopped) return;
-      const elapsed = performance.now() - start;
-      const idx = Math.min(Math.floor(elapsed / samples.stepMs), lastIdx);
-      applyAux(samples.values[idx]);
+      const at = Math.min(
+        (Number(anim.currentTime) || 0) / samples.stepMs,
+        lastIdx
+      );
+      const idx = Math.floor(at);
+      const from = samples.values[idx];
+      const to = samples.values[Math.min(idx + 1, lastIdx)];
+      applyAux(from + (to - from) * (at - idx));
       auxRaf = requestAnimationFrame(auxTick);
     };
     auxRaf = requestAnimationFrame(auxTick);
@@ -2705,7 +2709,11 @@ var BottomSheetCore = class {
         getSize: () => this.size,
         isDragging: () => this.isDraggingAny(),
         applyAux: (size) => this.applySize(size, true),
-        getTransformFor: (size) => this.transformTemplate(this.snaps.getMaxAxisSize() - size)
+        getTransformFor: (size) => {
+          const cap = this.snaps.getMaxAxisSize();
+          const shown = cap > 0 && !this.allowOvershoot ? Math.min(size, cap) : size;
+          return this.transformTemplate(cap - shown);
+        }
       },
       resolved.animation
     );
@@ -4237,6 +4245,9 @@ function visualViewportFeature() {
 
 // src/core/features/content-fit.ts
 var INSET_VAR = "--bs-content-inset";
+var SIZE_VAR = "--bs-size";
+var CAP_VAR = "--bs-max-size";
+var LIFT_VAR = "--bs-footer-lift-max";
 var FIT_ATTR = "data-bs-fit-content";
 function contentFitFeature() {
   return {
@@ -4250,6 +4261,7 @@ function contentFitFeature() {
       let inset = 0;
       let unpaddedMax = -1;
       let top = 0;
+      const put = (name, px) => sheet.style.setProperty(name, `${px}px`);
       const hiddenAt = (size) => sheet.dataset.mode === "bottom" ? Math.max(0, ctx.getMaxAxisSize() - size) : 0;
       const follow = (size) => {
         if (unpaddedMax < 0) {
@@ -4268,7 +4280,10 @@ function contentFitFeature() {
         unpaddedMax = -1;
         follow(size);
         inset = hiddenAt(size);
-        sheet.style.setProperty(INSET_VAR, `${inset}px`);
+        put(LIFT_VAR, scroller.offsetHeight);
+        put(INSET_VAR, inset);
+        put(SIZE_VAR, size);
+        put(CAP_VAR, ctx.getMaxAxisSize());
         unpaddedMax = -1;
       };
       const moving = () => ctx.isAnimating() || ctx.isDragging();
@@ -4291,7 +4306,9 @@ function contentFitFeature() {
         observer?.disconnect();
         window.removeEventListener("orientationchange", whenIdle);
         sheet.removeAttribute(FIT_ATTR);
-        sheet.style.removeProperty(INSET_VAR);
+        for (const name of [INSET_VAR, CAP_VAR, LIFT_VAR]) {
+          sheet.style.removeProperty(name);
+        }
       };
     }
   };

package/dist/index.js

@@ -1485,13 +1485,17 @@ var AnimationRunner = class {
     });
     let stopped = false;
     let auxRaf = 0;
-    const start = performance.now();
     const lastIdx = samples.values.length - 1;
     const auxTick = () => {
       if (stopped) return;
-      const elapsed = performance.now() - start;
-      const idx = Math.min(Math.floor(elapsed / samples.stepMs), lastIdx);
-      applyAux(samples.values[idx]);
+      const at = Math.min(
+        (Number(anim.currentTime) || 0) / samples.stepMs,
+        lastIdx
+      );
+      const idx = Math.floor(at);
+      const from = samples.values[idx];
+      const to = samples.values[Math.min(idx + 1, lastIdx)];
+      applyAux(from + (to - from) * (at - idx));
       auxRaf = requestAnimationFrame(auxTick);
     };
     auxRaf = requestAnimationFrame(auxTick);
@@ -2703,7 +2707,11 @@ var BottomSheetCore = class {
         getSize: () => this.size,
         isDragging: () => this.isDraggingAny(),
         applyAux: (size) => this.applySize(size, true),
-        getTransformFor: (size) => this.transformTemplate(this.snaps.getMaxAxisSize() - size)
+        getTransformFor: (size) => {
+          const cap = this.snaps.getMaxAxisSize();
+          const shown = cap > 0 && !this.allowOvershoot ? Math.min(size, cap) : size;
+          return this.transformTemplate(cap - shown);
+        }
       },
       resolved.animation
     );
@@ -4235,6 +4243,9 @@ function visualViewportFeature() {
 
 // src/core/features/content-fit.ts
 var INSET_VAR = "--bs-content-inset";
+var SIZE_VAR = "--bs-size";
+var CAP_VAR = "--bs-max-size";
+var LIFT_VAR = "--bs-footer-lift-max";
 var FIT_ATTR = "data-bs-fit-content";
 function contentFitFeature() {
   return {
@@ -4248,6 +4259,7 @@ function contentFitFeature() {
       let inset = 0;
       let unpaddedMax = -1;
       let top = 0;
+      const put = (name, px) => sheet.style.setProperty(name, `${px}px`);
       const hiddenAt = (size) => sheet.dataset.mode === "bottom" ? Math.max(0, ctx.getMaxAxisSize() - size) : 0;
       const follow = (size) => {
         if (unpaddedMax < 0) {
@@ -4266,7 +4278,10 @@ function contentFitFeature() {
         unpaddedMax = -1;
         follow(size);
         inset = hiddenAt(size);
-        sheet.style.setProperty(INSET_VAR, `${inset}px`);
+        put(LIFT_VAR, scroller.offsetHeight);
+        put(INSET_VAR, inset);
+        put(SIZE_VAR, size);
+        put(CAP_VAR, ctx.getMaxAxisSize());
         unpaddedMax = -1;
       };
       const moving = () => ctx.isAnimating() || ctx.isDragging();
@@ -4289,7 +4304,9 @@ function contentFitFeature() {
         observer?.disconnect();
         window.removeEventListener("orientationchange", whenIdle);
         sheet.removeAttribute(FIT_ATTR);
-        sheet.style.removeProperty(INSET_VAR);
+        for (const name of [INSET_VAR, CAP_VAR, LIFT_VAR]) {
+          sheet.style.removeProperty(name);
+        }
       };
     }
   };

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

@@ -1504,13 +1504,14 @@ class AnimationRunner {
     });
     let stopped = false;
     let auxRaf = 0;
-    const start = performance.now();
     const lastIdx = samples.values.length - 1;
     const auxTick = () => {
       if (stopped) return;
-      const elapsed = performance.now() - start;
-      const idx = Math.min(Math.floor(elapsed / samples.stepMs), lastIdx);
-      applyAux(samples.values[idx]);
+      const at = Math.min((Number(anim.currentTime) || 0) / samples.stepMs, lastIdx);
+      const idx = Math.floor(at);
+      const from = samples.values[idx];
+      const to = samples.values[Math.min(idx + 1, lastIdx)];
+      applyAux(from + (to - from) * (at - idx));
       auxRaf = requestAnimationFrame(auxTick);
     };
     auxRaf = requestAnimationFrame(auxTick);
@@ -2749,7 +2750,11 @@ class BottomSheetCore {
       getSize: () => this.size,
       isDragging: () => this.isDraggingAny(),
       applyAux: (size) => this.applySize(size, true),
-      getTransformFor: (size) => this.transformTemplate(this.snaps.getMaxAxisSize() - size)
+      getTransformFor: (size) => {
+        const cap = this.snaps.getMaxAxisSize();
+        const shown = cap > 0 && !this.allowOvershoot ? Math.min(size, cap) : size;
+        return this.transformTemplate(cap - shown);
+      }
     }, resolved.animation);
     this.lifecycle = new LifecycleController({
       element: this.element,
@@ -4228,6 +4233,9 @@ function visualViewportFeature() {
   };
 }
 const INSET_VAR = "--bs-content-inset";
+const SIZE_VAR = "--bs-size";
+const CAP_VAR = "--bs-max-size";
+const LIFT_VAR = "--bs-footer-lift-max";
 const FIT_ATTR = "data-bs-fit-content";
 function contentFitFeature() {
   return {
@@ -4241,6 +4249,7 @@ function contentFitFeature() {
       let inset = 0;
       let unpaddedMax = -1;
       let top = 0;
+      const put = (name, px) => sheet.style.setProperty(name, `${px}px`);
       const hiddenAt = (size) => sheet.dataset.mode === "bottom" ? Math.max(0, ctx.getMaxAxisSize() - size) : 0;
       const follow = (size) => {
         if (unpaddedMax < 0) {
@@ -4259,7 +4268,10 @@ function contentFitFeature() {
         unpaddedMax = -1;
         follow(size);
         inset = hiddenAt(size);
-        sheet.style.setProperty(INSET_VAR, `${inset}px`);
+        put(LIFT_VAR, scroller.offsetHeight);
+        put(INSET_VAR, inset);
+        put(SIZE_VAR, size);
+        put(CAP_VAR, ctx.getMaxAxisSize());
         unpaddedMax = -1;
       };
       const moving = () => ctx.isAnimating() || ctx.isDragging();
@@ -4279,7 +4291,13 @@ function contentFitFeature() {
         observer?.disconnect();
         window.removeEventListener("orientationchange", whenIdle);
         sheet.removeAttribute(FIT_ATTR);
-        sheet.style.removeProperty(INSET_VAR);
+        for (const name of [
+          INSET_VAR,
+          CAP_VAR,
+          LIFT_VAR
+        ]) {
+          sheet.style.removeProperty(name);
+        }
       };
     }
   };

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

@@ -1502,13 +1502,14 @@ class AnimationRunner {
     });
     let stopped = false;
     let auxRaf = 0;
-    const start = performance.now();
     const lastIdx = samples.values.length - 1;
     const auxTick = () => {
       if (stopped) return;
-      const elapsed = performance.now() - start;
-      const idx = Math.min(Math.floor(elapsed / samples.stepMs), lastIdx);
-      applyAux(samples.values[idx]);
+      const at = Math.min((Number(anim.currentTime) || 0) / samples.stepMs, lastIdx);
+      const idx = Math.floor(at);
+      const from = samples.values[idx];
+      const to = samples.values[Math.min(idx + 1, lastIdx)];
+      applyAux(from + (to - from) * (at - idx));
       auxRaf = requestAnimationFrame(auxTick);
     };
     auxRaf = requestAnimationFrame(auxTick);
@@ -2747,7 +2748,11 @@ class BottomSheetCore {
       getSize: () => this.size,
       isDragging: () => this.isDraggingAny(),
       applyAux: (size) => this.applySize(size, true),
-      getTransformFor: (size) => this.transformTemplate(this.snaps.getMaxAxisSize() - size)
+      getTransformFor: (size) => {
+        const cap = this.snaps.getMaxAxisSize();
+        const shown = cap > 0 && !this.allowOvershoot ? Math.min(size, cap) : size;
+        return this.transformTemplate(cap - shown);
+      }
     }, resolved.animation);
     this.lifecycle = new LifecycleController({
       element: this.element,
@@ -4226,6 +4231,9 @@ function visualViewportFeature() {
   };
 }
 const INSET_VAR = "--bs-content-inset";
+const SIZE_VAR = "--bs-size";
+const CAP_VAR = "--bs-max-size";
+const LIFT_VAR = "--bs-footer-lift-max";
 const FIT_ATTR = "data-bs-fit-content";
 function contentFitFeature() {
   return {
@@ -4239,6 +4247,7 @@ function contentFitFeature() {
       let inset = 0;
       let unpaddedMax = -1;
       let top = 0;
+      const put = (name, px) => sheet.style.setProperty(name, `${px}px`);
       const hiddenAt = (size) => sheet.dataset.mode === "bottom" ? Math.max(0, ctx.getMaxAxisSize() - size) : 0;
       const follow = (size) => {
         if (unpaddedMax < 0) {
@@ -4257,7 +4266,10 @@ function contentFitFeature() {
         unpaddedMax = -1;
         follow(size);
         inset = hiddenAt(size);
-        sheet.style.setProperty(INSET_VAR, `${inset}px`);
+        put(LIFT_VAR, scroller.offsetHeight);
+        put(INSET_VAR, inset);
+        put(SIZE_VAR, size);
+        put(CAP_VAR, ctx.getMaxAxisSize());
         unpaddedMax = -1;
       };
       const moving = () => ctx.isAnimating() || ctx.isDragging();
@@ -4277,7 +4289,13 @@ function contentFitFeature() {
         observer?.disconnect();
         window.removeEventListener("orientationchange", whenIdle);
         sheet.removeAttribute(FIT_ATTR);
-        sheet.style.removeProperty(INSET_VAR);
+        for (const name of [
+          INSET_VAR,
+          CAP_VAR,
+          LIFT_VAR
+        ]) {
+          sheet.style.removeProperty(name);
+        }
       };
     }
   };

package/dist/qwik.cjs

@@ -1490,13 +1490,17 @@ var AnimationRunner = class {
     });
     let stopped = false;
     let auxRaf = 0;
-    const start = performance.now();
     const lastIdx = samples.values.length - 1;
     const auxTick = () => {
       if (stopped) return;
-      const elapsed = performance.now() - start;
-      const idx = Math.min(Math.floor(elapsed / samples.stepMs), lastIdx);
-      applyAux(samples.values[idx]);
+      const at = Math.min(
+        (Number(anim.currentTime) || 0) / samples.stepMs,
+        lastIdx
+      );
+      const idx = Math.floor(at);
+      const from = samples.values[idx];
+      const to = samples.values[Math.min(idx + 1, lastIdx)];
+      applyAux(from + (to - from) * (at - idx));
       auxRaf = requestAnimationFrame(auxTick);
     };
     auxRaf = requestAnimationFrame(auxTick);
@@ -2708,7 +2712,11 @@ var BottomSheetCore = class {
         getSize: () => this.size,
         isDragging: () => this.isDraggingAny(),
         applyAux: (size) => this.applySize(size, true),
-        getTransformFor: (size) => this.transformTemplate(this.snaps.getMaxAxisSize() - size)
+        getTransformFor: (size) => {
+          const cap = this.snaps.getMaxAxisSize();
+          const shown = cap > 0 && !this.allowOvershoot ? Math.min(size, cap) : size;
+          return this.transformTemplate(cap - shown);
+        }
       },
       resolved.animation
     );
@@ -4240,6 +4248,9 @@ function visualViewportFeature() {
 
 // src/core/features/content-fit.ts
 var INSET_VAR = "--bs-content-inset";
+var SIZE_VAR = "--bs-size";
+var CAP_VAR = "--bs-max-size";
+var LIFT_VAR = "--bs-footer-lift-max";
 var FIT_ATTR = "data-bs-fit-content";
 function contentFitFeature() {
   return {
@@ -4253,6 +4264,7 @@ function contentFitFeature() {
       let inset = 0;
       let unpaddedMax = -1;
       let top = 0;
+      const put = (name, px) => sheet.style.setProperty(name, `${px}px`);
       const hiddenAt = (size) => sheet.dataset.mode === "bottom" ? Math.max(0, ctx.getMaxAxisSize() - size) : 0;
       const follow = (size) => {
         if (unpaddedMax < 0) {
@@ -4271,7 +4283,10 @@ function contentFitFeature() {
         unpaddedMax = -1;
         follow(size);
         inset = hiddenAt(size);
-        sheet.style.setProperty(INSET_VAR, `${inset}px`);
+        put(LIFT_VAR, scroller.offsetHeight);
+        put(INSET_VAR, inset);
+        put(SIZE_VAR, size);
+        put(CAP_VAR, ctx.getMaxAxisSize());
         unpaddedMax = -1;
       };
       const moving = () => ctx.isAnimating() || ctx.isDragging();
@@ -4294,7 +4309,9 @@ function contentFitFeature() {
         observer?.disconnect();
         window.removeEventListener("orientationchange", whenIdle);
         sheet.removeAttribute(FIT_ATTR);
-        sheet.style.removeProperty(INSET_VAR);
+        for (const name of [INSET_VAR, CAP_VAR, LIFT_VAR]) {
+          sheet.style.removeProperty(name);
+        }
       };
     }
   };

package/dist/qwik.js

@@ -1488,13 +1488,17 @@ var AnimationRunner = class {
     });
     let stopped = false;
     let auxRaf = 0;
-    const start = performance.now();
     const lastIdx = samples.values.length - 1;
     const auxTick = () => {
       if (stopped) return;
-      const elapsed = performance.now() - start;
-      const idx = Math.min(Math.floor(elapsed / samples.stepMs), lastIdx);
-      applyAux(samples.values[idx]);
+      const at = Math.min(
+        (Number(anim.currentTime) || 0) / samples.stepMs,
+        lastIdx
+      );
+      const idx = Math.floor(at);
+      const from = samples.values[idx];
+      const to = samples.values[Math.min(idx + 1, lastIdx)];
+      applyAux(from + (to - from) * (at - idx));
       auxRaf = requestAnimationFrame(auxTick);
     };
     auxRaf = requestAnimationFrame(auxTick);
@@ -2706,7 +2710,11 @@ var BottomSheetCore = class {
         getSize: () => this.size,
         isDragging: () => this.isDraggingAny(),
         applyAux: (size) => this.applySize(size, true),
-        getTransformFor: (size) => this.transformTemplate(this.snaps.getMaxAxisSize() - size)
+        getTransformFor: (size) => {
+          const cap = this.snaps.getMaxAxisSize();
+          const shown = cap > 0 && !this.allowOvershoot ? Math.min(size, cap) : size;
+          return this.transformTemplate(cap - shown);
+        }
       },
       resolved.animation
     );
@@ -4238,6 +4246,9 @@ function visualViewportFeature() {
 
 // src/core/features/content-fit.ts
 var INSET_VAR = "--bs-content-inset";
+var SIZE_VAR = "--bs-size";
+var CAP_VAR = "--bs-max-size";
+var LIFT_VAR = "--bs-footer-lift-max";
 var FIT_ATTR = "data-bs-fit-content";
 function contentFitFeature() {
   return {
@@ -4251,6 +4262,7 @@ function contentFitFeature() {
       let inset = 0;
       let unpaddedMax = -1;
       let top = 0;
+      const put = (name, px) => sheet.style.setProperty(name, `${px}px`);
       const hiddenAt = (size) => sheet.dataset.mode === "bottom" ? Math.max(0, ctx.getMaxAxisSize() - size) : 0;
       const follow = (size) => {
         if (unpaddedMax < 0) {
@@ -4269,7 +4281,10 @@ function contentFitFeature() {
         unpaddedMax = -1;
         follow(size);
         inset = hiddenAt(size);
-        sheet.style.setProperty(INSET_VAR, `${inset}px`);
+        put(LIFT_VAR, scroller.offsetHeight);
+        put(INSET_VAR, inset);
+        put(SIZE_VAR, size);
+        put(CAP_VAR, ctx.getMaxAxisSize());
         unpaddedMax = -1;
       };
       const moving = () => ctx.isAnimating() || ctx.isDragging();
@@ -4292,7 +4307,9 @@ function contentFitFeature() {
         observer?.disconnect();
         window.removeEventListener("orientationchange", whenIdle);
         sheet.removeAttribute(FIT_ATTR);
-        sheet.style.removeProperty(INSET_VAR);
+        for (const name of [INSET_VAR, CAP_VAR, LIFT_VAR]) {
+          sheet.style.removeProperty(name);
+        }
       };
     }
   };