@surdeddd/bottom-sheet 0.11.0 → 0.12.0

package/README.md

@@ -317,6 +317,14 @@ engine.depth(); // open sheets above this one
 engine.destroy(); // remove listeners + cancel animation
 ```
 
+`initial` starts the sheet **born open** at any snap whose size resolves `> 0`
+(no `open` / `opened` event fires — there is no transition to announce). Calling
+`open()` / `snapTo()` **synchronously in the mount tick is safe** — no
+`requestAnimationFrame` / `nextTick` delay is needed, including `fit` / `content`
+and teleported sheets. A sheet mounted hidden (`display:none` ancestor) heals
+and emits its open sequence once on reveal. See
+[Architecture → Opening at construction](docs/ARCHITECTURE.md).
+
 ### Scrim runtime API
 
 The scrim is the dim layer behind/around the sheet (`screenComponent`). All
@@ -408,6 +416,14 @@ element — drive any CSS animation from drag without touching JS:
 }
 ```
 
+> **z-index is engine-owned.** The stack controller rewrites inline `z-index` on
+> `.bs-sheet`, `.bs-backdrop` and anchor wrappers on every stack change (base
+> `100`, step `10` per depth), so a value you set is overwritten and races the
+> stack. To position the sheet layer against app UI, move the container
+> (teleport target / `.bs-root` parent) or change the open order — don't style
+> `z-index` on bs-managed elements. See
+> [Architecture → z-index & the sheet stack](docs/ARCHITECTURE.md).
+
 ### Scrim, blur & high contrast
 
 | Token                    | Default     | Region                                               |

package/dist/{BottomSheetEngine-DzsIwD28.d.cts → BottomSheetEngine-D6oiEfZ4.d.cts}

@@ -304,6 +304,7 @@ declare class BottomSheetEngine {
     };
     setSnapPoints(points: EngineOptions["snapPoints"], allowed?: string[]): void;
     recompute(): void;
+    private healActiveSnap;
     destroy(): void;
     private emit;
     private newCycle;

package/dist/{BottomSheetEngine-DRjCU73e.d.ts → BottomSheetEngine-Dhy0X_e9.d.ts}

@@ -304,6 +304,7 @@ declare class BottomSheetEngine {
     };
     setSnapPoints(points: EngineOptions["snapPoints"], allowed?: string[]): void;
     recompute(): void;
+    private healActiveSnap;
     destroy(): void;
     private emit;
     private newCycle;

package/dist/element.cjs

@@ -553,7 +553,7 @@ function restore(entry) {
   entry.live = true;
   runInternal(() => {
     try {
-      history.pushState(entry.surface.markerState(), "", entry.surface.url);
+      history.pushState(brandMarker(entry.surface), "", entry.surface.url);
     } catch {
       entry.live = false;
     }
@@ -571,7 +571,7 @@ function pushBackMarker(surface) {
   entry.priorUrl = surface.url !== void 0 ? location.href : void 0;
   runInternal(() => {
     try {
-      history.pushState(surface.markerState(), "", surface.url);
+      history.pushState(brandMarker(surface), "", surface.url);
       entry.live = true;
     } catch {
       entry.live = false;
@@ -597,7 +597,7 @@ function popBackMarker(handle) {
     pendingRebrand = () => {
       runInternal(() => {
         history.replaceState(
-          rebrandSurface.markerState(),
+          brandMarker(rebrandSurface),
           "",
           rebrandUrl !== void 0 ? rebrandUrl : location.href
         );
@@ -628,7 +628,7 @@ function subscribeRouteChange(fn) {
     maybeTeardownListener();
   };
 }
-var entries, subscribers, suppress, internalDepth, pendingRebrand, listenerInstalled, patchInstalled, origPushState, origReplaceState, patchedPushState, patchedReplaceState, hasWindow, hasHistory, runInternal, notifyRouteChange, ensureListener, maybeTeardownListener, installPatch, removePatch;
+var entries, subscribers, suppress, internalDepth, pendingRebrand, listenerInstalled, patchInstalled, origPushState, origReplaceState, patchedPushState, patchedReplaceState, hasWindow, hasHistory, brandMarker, runInternal, notifyRouteChange, ensureListener, maybeTeardownListener, installPatch, removePatch;
 var init_history_coordinator = __esm({
   "src/core/features/history-coordinator.ts"() {
     entries = [];
@@ -644,6 +644,10 @@ var init_history_coordinator = __esm({
     patchedReplaceState = null;
     hasWindow = () => typeof window !== "undefined";
     hasHistory = () => typeof history !== "undefined";
+    brandMarker = (surface) => ({
+      ...surface.markerState(),
+      __bs: true
+    });
     runInternal = (fn) => {
       internalDepth += 1;
       try {
@@ -1046,11 +1050,15 @@ var init_fit_measurement = __esm({
   "src/core/features/fit-measurement.ts"() {
     init_transform();
     measureSheetNatural = (element, content, vertical) => {
-      if (!content) {
-        return vertical ? element.offsetHeight : element.offsetWidth;
-      }
       const axis = vertical ? "height" : "width";
       const sheetStyle = element.style;
+      if (!content) {
+        const prev = sheetStyle[axis];
+        sheetStyle[axis] = "auto";
+        const poked2 = vertical ? element.offsetHeight : element.offsetWidth;
+        sheetStyle[axis] = prev;
+        return poked2;
+      }
       const cs = content.style;
       const prevSheet = sheetStyle[axis];
       const prevFlex = cs.flex;
@@ -3147,12 +3155,7 @@ var init_BottomSheetEngine = __esm({
               if (!entry.isIntersecting) continue;
               if (this.destroyed) return;
               this.snaps.recompute();
-              const current = this.snaps.findById(this.activeId);
-              if (current) {
-                this.size = current.size;
-                this.applySize(this.size);
-                this.updateAriaSlider();
-              }
+              this.healActiveSnap();
               io.disconnect();
               return;
             }
@@ -3316,6 +3319,8 @@ var init_BottomSheetEngine = __esm({
           const vt = document.startViewTransition(() => {
             this.applySize(target.size);
           });
+          vt.ready?.catch(() => {
+          });
           this.currentViewTransition = vt;
           try {
             await vt.finished;
@@ -3567,11 +3572,16 @@ var init_BottomSheetEngine = __esm({
         this.maxHeight.clampTo();
         this.scrim.invalidateOpacityCache();
         if (this.gesture?.isDragging) return;
+        this.healActiveSnap();
+      }
+      healActiveSnap() {
         const current = this.snaps.findById(this.activeId);
-        if (current) {
-          this.size = current.size;
-          this.applySize(this.size);
-          this.updateAriaSlider();
+        if (!current) return;
+        this.size = current.size;
+        this.applySize(this.size);
+        this.updateAriaSlider();
+        if (this.size > 0 && !this.lifecycle.isInstalled && !this.opening && !this.animation.isAnimating) {
+          this.emitOpenSequence(this.activeId);
         }
       }
       destroy() {

package/dist/element.d.cts

@@ -1,4 +1,4 @@
-import { B as BottomSheetEngine, C as CloseReason, A as AnchorOptions, S as ScrimStagesOptions, E as EngineState } from './BottomSheetEngine-DzsIwD28.cjs';
+import { B as BottomSheetEngine, C as CloseReason, A as AnchorOptions, S as ScrimStagesOptions, E as EngineState } from './BottomSheetEngine-D6oiEfZ4.cjs';
 import './transform-jVfAikE9.cjs';
 
 declare const BaseHTMLElement: typeof HTMLElement;

package/dist/element.d.ts

@@ -1,4 +1,4 @@
-import { B as BottomSheetEngine, C as CloseReason, A as AnchorOptions, S as ScrimStagesOptions, E as EngineState } from './BottomSheetEngine-DRjCU73e.js';
+import { B as BottomSheetEngine, C as CloseReason, A as AnchorOptions, S as ScrimStagesOptions, E as EngineState } from './BottomSheetEngine-Dhy0X_e9.js';
 import './transform-jVfAikE9.js';
 
 declare const BaseHTMLElement: typeof HTMLElement;