@surdeddd/bottom-sheet 0.7.0 → 0.8.1

package/dist/svelte-core.cjs

@@ -2359,6 +2359,7 @@ var BottomSheetEngine = class {
     __publicField(this, "progressWriteSentinel", new WriteSentinel());
     __publicField(this, "isTopSheet", true);
     __publicField(this, "opening", false);
+    __publicField(this, "allowOvershoot", false);
     __publicField(this, "progressPayload", {
       value: 0,
       size: 0
@@ -2911,45 +2912,52 @@ var BottomSheetEngine = class {
     }
     return out;
   }
-  measureContentExtent(vertical) {
+  measureSheetNatural(vertical) {
+    const el = this.element;
     const content = this.scrollContainer;
-    if (!content) return 0;
-    const targets = this.contentTargets();
-    if (targets.length === 0) {
-      return vertical ? content.scrollHeight : content.scrollWidth;
-    }
-    let min = Infinity;
-    let max = -Infinity;
-    for (const el of targets) {
-      const r = el.getBoundingClientRect();
-      if (vertical) {
-        if (r.top < min) min = r.top;
-        if (r.bottom > max) max = r.bottom;
-      } else {
-        if (r.left < min) min = r.left;
-        if (r.right > max) max = r.right;
-      }
-    }
-    if (!isFinite(min) || !isFinite(max) || max <= min) {
-      return vertical ? content.scrollHeight : content.scrollWidth;
-    }
-    let pad = 0;
-    if (typeof getComputedStyle !== "undefined") {
-      const cs = getComputedStyle(content);
-      pad = vertical ? (parseFloat(cs.paddingTop) || 0) + (parseFloat(cs.paddingBottom) || 0) : (parseFloat(cs.paddingLeft) || 0) + (parseFloat(cs.paddingRight) || 0);
-    }
-    return max - min + pad;
+    if (!content) {
+      return vertical ? el.offsetHeight : el.offsetWidth;
+    }
+    const axis = vertical ? "height" : "width";
+    const sheetStyle = el.style;
+    const cs = content.style;
+    const prevSheet = sheetStyle[axis];
+    const prevFlex = cs.flex;
+    const prevContent = vertical ? cs.height : cs.width;
+    sheetStyle[axis] = "auto";
+    cs.flex = "none";
+    if (vertical) cs.height = "auto";
+    else cs.width = "auto";
+    const poked = vertical ? el.offsetHeight : el.offsetWidth;
+    const contentBox = vertical ? content.clientHeight : content.clientWidth;
+    const contentScroll = vertical ? content.scrollHeight : content.scrollWidth;
+    const natural = Math.max(poked, poked - contentBox + contentScroll);
+    sheetStyle[axis] = prevSheet;
+    cs.flex = prevFlex;
+    if (vertical) cs.height = prevContent;
+    else cs.width = prevContent;
+    return natural;
   }
   measureFitSize() {
     const vertical = layoutAxis(this.mode) === "height";
-    const handleSize = vertical ? this.handle.offsetHeight : this.handle.offsetWidth;
-    const content = this.scrollContainer;
-    const natural = content ? handleSize + this.measureContentExtent(vertical) : handleSize;
+    const natural = this.measureSheetNatural(vertical);
     const capped = this.maxHeightCap !== void 0 ? Math.min(natural, this.maxHeightCap) : natural;
     if (typeof window === "undefined") return capped;
-    const viewport = vertical ? window.innerHeight : window.innerWidth;
+    const viewport = this.containingExtent(vertical);
     return viewport > 0 ? Math.min(capped, viewport) : capped;
   }
+  // The fit cap is the sheet's containing block, not always the window: a
+  // position:fixed sheet nested under a transform/filter/will-change ancestor
+  // is clipped to that ancestor, so capping by window.innerHeight oversizes the
+  // sheet and the content/footer get clipped. offsetParent resolves to that
+  // ancestor when present, and is null (→ viewport) for a plain fixed sheet.
+  containingExtent(vertical) {
+    const op = this.element.offsetParent;
+    if (op && op !== document.body && op !== document.documentElement) {
+      return vertical ? op.clientHeight : op.clientWidth;
+    }
+    return vertical ? window.innerHeight : window.innerWidth;
+  }
   installFitObserver() {
     if (typeof ResizeObserver === "undefined") return;
     if (!this.snapPointsRaw.some((p) => p.size === "fit" || p.size === "content"))
@@ -3030,6 +3038,10 @@ var BottomSheetEngine = class {
       this.backdrop.style.opacity = "";
       this.backdrop.style.pointerEvents = "";
     }
+    if (this.anchorHost) {
+      this.anchorHost.style.removeProperty("--bs-size");
+      this.anchorHost.style.removeProperty("--bs-progress");
+    }
     if (this.screenComponent) {
       this.screenComponent.style.opacity = "";
       this.screenComponent.style.display = "";
@@ -3041,6 +3053,7 @@ var BottomSheetEngine = class {
     this.bus.emit(event, payload);
   }
   newCycle() {
+    this.allowOvershoot = false;
     this.currentAbort.abort();
     this.currentAbort = new AbortController();
     return this.currentAbort.signal;
@@ -3106,6 +3119,7 @@ var BottomSheetEngine = class {
       seen.add(p.id);
     }
     this.snaps.setRaw(this.snapPointsRaw);
+    this.clampToMaxHeight();
     this.scrim.invalidateOpacityCache();
   }
   getAllowedRange() {
@@ -3312,9 +3326,13 @@ var BottomSheetEngine = class {
       this.opening = true;
       sheetStack.promote(this.id);
     }
-    void this.animation.animateTo(target.size, velocity).then(() => {
-      this.opening = false;
+    const settleCap = this.snaps.getMaxAxisSize();
+    const settleSize = settleCap > 0 ? Math.min(target.size, settleCap) : target.size;
+    this.allowOvershoot = true;
+    void this.animation.animateTo(settleSize, velocity).then(() => {
       if (signal.aborted) return;
+      this.allowOvershoot = false;
+      this.opening = false;
       this.scrollCache.restore(target.id, previousSize, target.size);
       this.updateAriaSlider();
       this.emit("snap", {
@@ -3346,7 +3364,7 @@ var BottomSheetEngine = class {
   }
   applySize(size) {
     const cap = this.snaps.getMaxAxisSize();
-    const clamped = cap > 0 && size > cap && !this.gesture?.isDragging ? cap : size;
+    const clamped = cap > 0 && size > cap && !this.gesture?.isDragging && !this.allowOvershoot ? cap : size;
     this.size = clamped;
     const offset = cap - clamped;
     const style = this.element.style;

package/dist/svelte-core.js

@@ -2357,6 +2357,7 @@ var BottomSheetEngine = class {
     __publicField(this, "progressWriteSentinel", new WriteSentinel());
     __publicField(this, "isTopSheet", true);
     __publicField(this, "opening", false);
+    __publicField(this, "allowOvershoot", false);
     __publicField(this, "progressPayload", {
       value: 0,
       size: 0
@@ -2909,45 +2910,52 @@ var BottomSheetEngine = class {
     }
     return out;
   }
-  measureContentExtent(vertical) {
+  measureSheetNatural(vertical) {
+    const el = this.element;
     const content = this.scrollContainer;
-    if (!content) return 0;
-    const targets = this.contentTargets();
-    if (targets.length === 0) {
-      return vertical ? content.scrollHeight : content.scrollWidth;
-    }
-    let min = Infinity;
-    let max = -Infinity;
-    for (const el of targets) {
-      const r = el.getBoundingClientRect();
-      if (vertical) {
-        if (r.top < min) min = r.top;
-        if (r.bottom > max) max = r.bottom;
-      } else {
-        if (r.left < min) min = r.left;
-        if (r.right > max) max = r.right;
-      }
-    }
-    if (!isFinite(min) || !isFinite(max) || max <= min) {
-      return vertical ? content.scrollHeight : content.scrollWidth;
-    }
-    let pad = 0;
-    if (typeof getComputedStyle !== "undefined") {
-      const cs = getComputedStyle(content);
-      pad = vertical ? (parseFloat(cs.paddingTop) || 0) + (parseFloat(cs.paddingBottom) || 0) : (parseFloat(cs.paddingLeft) || 0) + (parseFloat(cs.paddingRight) || 0);
-    }
-    return max - min + pad;
+    if (!content) {
+      return vertical ? el.offsetHeight : el.offsetWidth;
+    }
+    const axis = vertical ? "height" : "width";
+    const sheetStyle = el.style;
+    const cs = content.style;
+    const prevSheet = sheetStyle[axis];
+    const prevFlex = cs.flex;
+    const prevContent = vertical ? cs.height : cs.width;
+    sheetStyle[axis] = "auto";
+    cs.flex = "none";
+    if (vertical) cs.height = "auto";
+    else cs.width = "auto";
+    const poked = vertical ? el.offsetHeight : el.offsetWidth;
+    const contentBox = vertical ? content.clientHeight : content.clientWidth;
+    const contentScroll = vertical ? content.scrollHeight : content.scrollWidth;
+    const natural = Math.max(poked, poked - contentBox + contentScroll);
+    sheetStyle[axis] = prevSheet;
+    cs.flex = prevFlex;
+    if (vertical) cs.height = prevContent;
+    else cs.width = prevContent;
+    return natural;
   }
   measureFitSize() {
     const vertical = layoutAxis(this.mode) === "height";
-    const handleSize = vertical ? this.handle.offsetHeight : this.handle.offsetWidth;
-    const content = this.scrollContainer;
-    const natural = content ? handleSize + this.measureContentExtent(vertical) : handleSize;
+    const natural = this.measureSheetNatural(vertical);
     const capped = this.maxHeightCap !== void 0 ? Math.min(natural, this.maxHeightCap) : natural;
     if (typeof window === "undefined") return capped;
-    const viewport = vertical ? window.innerHeight : window.innerWidth;
+    const viewport = this.containingExtent(vertical);
     return viewport > 0 ? Math.min(capped, viewport) : capped;
   }
+  // The fit cap is the sheet's containing block, not always the window: a
+  // position:fixed sheet nested under a transform/filter/will-change ancestor
+  // is clipped to that ancestor, so capping by window.innerHeight oversizes the
+  // sheet and the content/footer get clipped. offsetParent resolves to that
+  // ancestor when present, and is null (→ viewport) for a plain fixed sheet.
+  containingExtent(vertical) {
+    const op = this.element.offsetParent;
+    if (op && op !== document.body && op !== document.documentElement) {
+      return vertical ? op.clientHeight : op.clientWidth;
+    }
+    return vertical ? window.innerHeight : window.innerWidth;
+  }
   installFitObserver() {
     if (typeof ResizeObserver === "undefined") return;
     if (!this.snapPointsRaw.some((p) => p.size === "fit" || p.size === "content"))
@@ -3028,6 +3036,10 @@ var BottomSheetEngine = class {
       this.backdrop.style.opacity = "";
       this.backdrop.style.pointerEvents = "";
     }
+    if (this.anchorHost) {
+      this.anchorHost.style.removeProperty("--bs-size");
+      this.anchorHost.style.removeProperty("--bs-progress");
+    }
     if (this.screenComponent) {
       this.screenComponent.style.opacity = "";
       this.screenComponent.style.display = "";
@@ -3039,6 +3051,7 @@ var BottomSheetEngine = class {
     this.bus.emit(event, payload);
   }
   newCycle() {
+    this.allowOvershoot = false;
     this.currentAbort.abort();
     this.currentAbort = new AbortController();
     return this.currentAbort.signal;
@@ -3104,6 +3117,7 @@ var BottomSheetEngine = class {
       seen.add(p.id);
     }
     this.snaps.setRaw(this.snapPointsRaw);
+    this.clampToMaxHeight();
     this.scrim.invalidateOpacityCache();
   }
   getAllowedRange() {
@@ -3310,9 +3324,13 @@ var BottomSheetEngine = class {
       this.opening = true;
       sheetStack.promote(this.id);
     }
-    void this.animation.animateTo(target.size, velocity).then(() => {
-      this.opening = false;
+    const settleCap = this.snaps.getMaxAxisSize();
+    const settleSize = settleCap > 0 ? Math.min(target.size, settleCap) : target.size;
+    this.allowOvershoot = true;
+    void this.animation.animateTo(settleSize, velocity).then(() => {
       if (signal.aborted) return;
+      this.allowOvershoot = false;
+      this.opening = false;
       this.scrollCache.restore(target.id, previousSize, target.size);
       this.updateAriaSlider();
       this.emit("snap", {
@@ -3344,7 +3362,7 @@ var BottomSheetEngine = class {
   }
   applySize(size) {
     const cap = this.snaps.getMaxAxisSize();
-    const clamped = cap > 0 && size > cap && !this.gesture?.isDragging ? cap : size;
+    const clamped = cap > 0 && size > cap && !this.gesture?.isDragging && !this.allowOvershoot ? cap : size;
     this.size = clamped;
     const offset = cap - clamped;
     const style = this.element.style;

package/dist/svelte-src/BottomSheet.svelte

@@ -238,12 +238,6 @@
     else if (!next && isOpen) void engine.close();
   });
 
-  let allowedIds = $derived(
-    allowed && allowed.length > 0
-      ? allowed
-      : snapPoints.map(s => s.id),
-  );
-  let activeIdx = $derived(allowedIds.indexOf(viewState.activeId));
   let isVerticalAxis = $derived(mode === "bottom" || mode === "top");
 </script>
 
@@ -282,10 +276,9 @@
       tabindex="0"
       aria-label="Resize sheet"
       aria-orientation={isVerticalAxis ? "vertical" : "horizontal"}
-      aria-valuemin={0}
-      aria-valuemax={Math.max(0, allowedIds.length - 1)}
-      aria-valuenow={Math.max(0, activeIdx)}
-      aria-valuetext={viewState.activeId}
+      aria-valuemin="0"
+      aria-valuemax="0"
+      aria-valuenow="0"
     ></div>
     {#if header}<div class="bs-header">{@render header(viewState)}</div>{/if}
     <!-- svelte-ignore a11y_no_noninteractive_tabindex -->

package/dist/svelte.cjs

@@ -2381,6 +2381,7 @@ var BottomSheetEngine = class {
     __publicField(this, "progressWriteSentinel", new WriteSentinel());
     __publicField(this, "isTopSheet", true);
     __publicField(this, "opening", false);
+    __publicField(this, "allowOvershoot", false);
     __publicField(this, "progressPayload", {
       value: 0,
       size: 0
@@ -2933,45 +2934,52 @@ var BottomSheetEngine = class {
     }
     return out;
   }
-  measureContentExtent(vertical) {
+  measureSheetNatural(vertical) {
+    const el = this.element;
     const content = this.scrollContainer;
-    if (!content) return 0;
-    const targets = this.contentTargets();
-    if (targets.length === 0) {
-      return vertical ? content.scrollHeight : content.scrollWidth;
-    }
-    let min = Infinity;
-    let max = -Infinity;
-    for (const el of targets) {
-      const r = el.getBoundingClientRect();
-      if (vertical) {
-        if (r.top < min) min = r.top;
-        if (r.bottom > max) max = r.bottom;
-      } else {
-        if (r.left < min) min = r.left;
-        if (r.right > max) max = r.right;
-      }
-    }
-    if (!isFinite(min) || !isFinite(max) || max <= min) {
-      return vertical ? content.scrollHeight : content.scrollWidth;
-    }
-    let pad = 0;
-    if (typeof getComputedStyle !== "undefined") {
-      const cs = getComputedStyle(content);
-      pad = vertical ? (parseFloat(cs.paddingTop) || 0) + (parseFloat(cs.paddingBottom) || 0) : (parseFloat(cs.paddingLeft) || 0) + (parseFloat(cs.paddingRight) || 0);
-    }
-    return max - min + pad;
+    if (!content) {
+      return vertical ? el.offsetHeight : el.offsetWidth;
+    }
+    const axis = vertical ? "height" : "width";
+    const sheetStyle = el.style;
+    const cs = content.style;
+    const prevSheet = sheetStyle[axis];
+    const prevFlex = cs.flex;
+    const prevContent = vertical ? cs.height : cs.width;
+    sheetStyle[axis] = "auto";
+    cs.flex = "none";
+    if (vertical) cs.height = "auto";
+    else cs.width = "auto";
+    const poked = vertical ? el.offsetHeight : el.offsetWidth;
+    const contentBox = vertical ? content.clientHeight : content.clientWidth;
+    const contentScroll = vertical ? content.scrollHeight : content.scrollWidth;
+    const natural = Math.max(poked, poked - contentBox + contentScroll);
+    sheetStyle[axis] = prevSheet;
+    cs.flex = prevFlex;
+    if (vertical) cs.height = prevContent;
+    else cs.width = prevContent;
+    return natural;
   }
   measureFitSize() {
     const vertical = layoutAxis(this.mode) === "height";
-    const handleSize = vertical ? this.handle.offsetHeight : this.handle.offsetWidth;
-    const content = this.scrollContainer;
-    const natural = content ? handleSize + this.measureContentExtent(vertical) : handleSize;
+    const natural = this.measureSheetNatural(vertical);
     const capped = this.maxHeightCap !== void 0 ? Math.min(natural, this.maxHeightCap) : natural;
     if (typeof window === "undefined") return capped;
-    const viewport = vertical ? window.innerHeight : window.innerWidth;
+    const viewport = this.containingExtent(vertical);
     return viewport > 0 ? Math.min(capped, viewport) : capped;
   }
+  // The fit cap is the sheet's containing block, not always the window: a
+  // position:fixed sheet nested under a transform/filter/will-change ancestor
+  // is clipped to that ancestor, so capping by window.innerHeight oversizes the
+  // sheet and the content/footer get clipped. offsetParent resolves to that
+  // ancestor when present, and is null (→ viewport) for a plain fixed sheet.
+  containingExtent(vertical) {
+    const op = this.element.offsetParent;
+    if (op && op !== document.body && op !== document.documentElement) {
+      return vertical ? op.clientHeight : op.clientWidth;
+    }
+    return vertical ? window.innerHeight : window.innerWidth;
+  }
   installFitObserver() {
     if (typeof ResizeObserver === "undefined") return;
     if (!this.snapPointsRaw.some((p) => p.size === "fit" || p.size === "content"))
@@ -3052,6 +3060,10 @@ var BottomSheetEngine = class {
       this.backdrop.style.opacity = "";
       this.backdrop.style.pointerEvents = "";
     }
+    if (this.anchorHost) {
+      this.anchorHost.style.removeProperty("--bs-size");
+      this.anchorHost.style.removeProperty("--bs-progress");
+    }
     if (this.screenComponent) {
       this.screenComponent.style.opacity = "";
       this.screenComponent.style.display = "";
@@ -3063,6 +3075,7 @@ var BottomSheetEngine = class {
     this.bus.emit(event, payload);
   }
   newCycle() {
+    this.allowOvershoot = false;
     this.currentAbort.abort();
     this.currentAbort = new AbortController();
     return this.currentAbort.signal;
@@ -3128,6 +3141,7 @@ var BottomSheetEngine = class {
       seen.add(p.id);
     }
     this.snaps.setRaw(this.snapPointsRaw);
+    this.clampToMaxHeight();
     this.scrim.invalidateOpacityCache();
   }
   getAllowedRange() {
@@ -3334,9 +3348,13 @@ var BottomSheetEngine = class {
       this.opening = true;
       sheetStack.promote(this.id);
     }
-    void this.animation.animateTo(target.size, velocity).then(() => {
-      this.opening = false;
+    const settleCap = this.snaps.getMaxAxisSize();
+    const settleSize = settleCap > 0 ? Math.min(target.size, settleCap) : target.size;
+    this.allowOvershoot = true;
+    void this.animation.animateTo(settleSize, velocity).then(() => {
       if (signal.aborted) return;
+      this.allowOvershoot = false;
+      this.opening = false;
       this.scrollCache.restore(target.id, previousSize, target.size);
       this.updateAriaSlider();
       this.emit("snap", {
@@ -3368,7 +3386,7 @@ var BottomSheetEngine = class {
   }
   applySize(size) {
     const cap = this.snaps.getMaxAxisSize();
-    const clamped = cap > 0 && size > cap && !this.gesture?.isDragging ? cap : size;
+    const clamped = cap > 0 && size > cap && !this.gesture?.isDragging && !this.allowOvershoot ? cap : size;
     this.size = clamped;
     const offset = cap - clamped;
     const style = this.element.style;
@@ -3574,7 +3592,7 @@ var root_3 = $2__namespace.from_html(`<div class="bs-header"><!></div>`);
 var root_5 = $2__namespace.from_html(`<div class="bs-footer"><!></div>`);
 var root_6 = $2__namespace.from_html(`<div class="bs-button-slot" data-side="left"><!></div>`);
 var root_7 = $2__namespace.from_html(`<div class="bs-button-slot" data-side="right"><!></div>`);
-var root = $2__namespace.from_html(`<div class="bs-root"><!> <div class="bs-screen"><!></div> <section class="bs-sheet" role="dialog"><div class="bs-handle" role="slider" tabindex="0" aria-label="Resize sheet"></div> <!> <div class="bs-content" tabindex="0" role="region" aria-label="Sheet content"><!></div> <!> <span class="bs-sr-only" role="status" aria-live="polite"> </span></section> <!> <!></div>`);
+var root = $2__namespace.from_html(`<div class="bs-root"><!> <div class="bs-screen"><!></div> <section class="bs-sheet" role="dialog"><div class="bs-handle" role="slider" tabindex="0" aria-label="Resize sheet" aria-valuemin="0" aria-valuemax="0" aria-valuenow="0"></div> <!> <div class="bs-content" tabindex="0" role="region" aria-label="Sheet content"><!></div> <!> <span class="bs-sr-only" role="status" aria-live="polite"> </span></section> <!> <!></div>`);
 function BottomSheet($$anchor, $$props) {
   $2__namespace.push($$props, true);
   let mode = $2__namespace.prop($$props, "mode", 3, "bottom"), animation = $2__namespace.prop($$props, "animation", 3, "spring"), focusTrap = $2__namespace.prop($$props, "focusTrap", 3, false), closeOnEscape = $2__namespace.prop($$props, "closeOnEscape", 3, true), closeOnBack = $2__namespace.prop($$props, "closeOnBack", 3, false), lockBodyScroll2 = $2__namespace.prop($$props, "lockBodyScroll", 3, true), rubberBand2 = $2__namespace.prop($$props, "rubberBand", 3, true), backdrop = $2__namespace.prop($$props, "backdrop", 3, true), closeOnBackdrop = $2__namespace.prop($$props, "closeOnBackdrop", 3, true), persistent = $2__namespace.prop($$props, "persistent", 3, false), disableClose = $2__namespace.prop($$props, "disableClose", 3, false), disableDrag = $2__namespace.prop($$props, "disableDrag", 3, false), closeOnRouteChange = $2__namespace.prop($$props, "closeOnRouteChange", 3, false), openProp = $2__namespace.prop($$props, "open", 15), snap = $2__namespace.prop($$props, "snap", 15), ariaLabel = $2__namespace.prop($$props, "ariaLabel", 3, "Bottom sheet");
@@ -3699,8 +3717,6 @@ function BottomSheet($$anchor, $$props) {
     if (next && !isOpen) void engine.open();
     else if (!next && isOpen) void engine.close();
   });
-  let allowedIds = $2__namespace.derived(() => $$props.allowed && $$props.allowed.length > 0 ? $$props.allowed : $$props.snapPoints.map((s) => s.id));
-  let activeIdx = $2__namespace.derived(() => $2__namespace.get(allowedIds).indexOf($2__namespace.get(viewState).activeId));
   let isVerticalAxis = $2__namespace.derived(() => mode() === "bottom" || mode() === "top");
   var $$exports = {
     snapTo,
@@ -3754,7 +3770,6 @@ function BottomSheet($$anchor, $$props) {
   $2__namespace.bind_this(div_2, ($$value) => $2__namespace.set(screenEl, $$value), () => $2__namespace.get(screenEl));
   var section = $2__namespace.sibling(div_2, 2);
   var div_3 = $2__namespace.child(section);
-  $2__namespace.set_attribute(div_3, "aria-valuemin", 0);
   $2__namespace.bind_this(div_3, ($$value) => $2__namespace.set(handleEl, $$value), () => $2__namespace.get(handleEl));
   var node_3 = $2__namespace.sibling(div_3, 2);
   {
@@ -3831,23 +3846,14 @@ function BottomSheet($$anchor, $$props) {
     });
   }
   $2__namespace.reset(div);
-  $2__namespace.template_effect(
-    ($0, $1) => {
-      $2__namespace.set_attribute(section, "data-mode", mode());
-      $2__namespace.set_attribute(section, "data-active", $2__namespace.get(viewState).activeId);
-      $2__namespace.set_attribute(section, "aria-modal", focusTrap() ? "true" : void 0);
-      $2__namespace.set_attribute(section, "aria-label", ariaLabel());
-      $2__namespace.set_attribute(div_3, "aria-orientation", $2__namespace.get(isVerticalAxis) ? "vertical" : "horizontal");
-      $2__namespace.set_attribute(div_3, "aria-valuemax", $0);
-      $2__namespace.set_attribute(div_3, "aria-valuenow", $1);
-      $2__namespace.set_attribute(div_3, "aria-valuetext", $2__namespace.get(viewState).activeId);
-      $2__namespace.set_text(text, $2__namespace.get(viewState).activeId);
-    },
-    [
-      () => Math.max(0, $2__namespace.get(allowedIds).length - 1),
-      () => Math.max(0, $2__namespace.get(activeIdx))
-    ]
-  );
+  $2__namespace.template_effect(() => {
+    $2__namespace.set_attribute(section, "data-mode", mode());
+    $2__namespace.set_attribute(section, "data-active", $2__namespace.get(viewState).activeId);
+    $2__namespace.set_attribute(section, "aria-modal", focusTrap() ? "true" : void 0);
+    $2__namespace.set_attribute(section, "aria-label", ariaLabel());
+    $2__namespace.set_attribute(div_3, "aria-orientation", $2__namespace.get(isVerticalAxis) ? "vertical" : "horizontal");
+    $2__namespace.set_text(text, $2__namespace.get(viewState).activeId);
+  });
   $2__namespace.append($$anchor, div);
   return $2__namespace.pop($$exports);
 }