@surdeddd/bottom-sheet 0.4.0 → 0.4.1

package/dist/svelte.js

@@ -3273,6 +3273,9 @@ var BottomSheetEngine = class {
       if (this.anchorHost && this.anchorHost !== this.scrimParent) {
         this.anchorHost.style.setProperty("--bs-size", `${size}px`);
       }
+      if (this.rootEl && this.rootEl !== this.scrimParent && this.rootEl !== this.anchorHost) {
+        this.rootEl.style.setProperty("--bs-size", `${size}px`);
+      }
     }
     const progress = this.computeProgress(size);
     const progressChanged = this.progressWriteSentinel.shouldWrite(
@@ -3284,6 +3287,9 @@ var BottomSheetEngine = class {
       if (this.anchorHost) {
         this.anchorHost.style.setProperty("--bs-progress", String(progress));
       }
+      if (this.rootEl && this.rootEl !== this.anchorHost) {
+        this.rootEl.style.setProperty("--bs-progress", String(progress));
+      }
     }
     this.scrim.applyOpacity(progress, progressChanged);
     if (progressChanged && this.bus.listenerCount("progress") > 0) {
@@ -3410,9 +3416,9 @@ function createBottomSheet(opts) {
   };
 }
 var root_1 = $2.from_html(`<div class="bs-backdrop" aria-hidden="true"></div>`);
-var root_3 = $2.from_html(`<div class="bs-button-slot" data-side="left"><!></div>`);
-var root_4 = $2.from_html(`<div class="bs-button-slot" data-side="right"><!></div>`);
-var root = $2.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_5 = $2.from_html(`<div class="bs-button-slot" data-side="left"><!></div>`);
+var root_6 = $2.from_html(`<div class="bs-button-slot" data-side="right"><!></div>`);
+var root = $2.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>`);
 function BottomSheet($$anchor, $$props) {
   $2.push($$props, true);
   let mode = $2.prop($$props, "mode", 3, "bottom"), animation = $2.prop($$props, "animation", 3, "spring"), focusTrap = $2.prop($$props, "focusTrap", 3, false), closeOnEscape = $2.prop($$props, "closeOnEscape", 3, true), closeOnBack = $2.prop($$props, "closeOnBack", 3, false), lockBodyScroll2 = $2.prop($$props, "lockBodyScroll", 3, true), rubberBand2 = $2.prop($$props, "rubberBand", 3, true), backdrop = $2.prop($$props, "backdrop", 3, true), closeOnBackdrop = $2.prop($$props, "closeOnBackdrop", 3, true), persistent = $2.prop($$props, "persistent", 3, false), disableClose = $2.prop($$props, "disableClose", 3, false), disableDrag = $2.prop($$props, "disableDrag", 3, false), closeOnRouteChange = $2.prop($$props, "closeOnRouteChange", 3, false), openProp = $2.prop($$props, "open", 15), snap = $2.prop($$props, "snap", 15), ariaLabel = $2.prop($$props, "ariaLabel", 3, "Bottom sheet");
@@ -3591,68 +3597,70 @@ function BottomSheet($$anchor, $$props) {
   $2.reset(div_2);
   $2.bind_this(div_2, ($$value) => $2.set(screenEl, $$value), () => $2.get(screenEl));
   var section = $2.sibling(div_2, 2);
-  var node_3 = $2.child(section);
+  var div_3 = $2.child(section);
+  $2.set_attribute(div_3, "aria-valuemin", 0);
+  var node_3 = $2.child(div_3);
   {
     var consequent_2 = ($$anchor2) => {
-      var div_3 = root_3();
-      var node_4 = $2.child(div_3);
-      $2.snippet(node_4, () => $$props.leftButton);
-      $2.reset(div_3);
-      $2.append($$anchor2, div_3);
+      var fragment_1 = $2.comment();
+      var node_4 = $2.first_child(fragment_1);
+      $2.snippet(node_4, () => $$props.header, () => $2.get(viewState));
+      $2.append($$anchor2, fragment_1);
     };
     $2.if(node_3, ($$render) => {
-      if ($$props.leftButton) $$render(consequent_2);
+      if ($$props.header) $$render(consequent_2);
     });
   }
-  var node_5 = $2.sibling(node_3, 2);
+  $2.reset(div_3);
+  $2.bind_this(div_3, ($$value) => $2.set(handleEl, $$value), () => $2.get(handleEl));
+  var div_4 = $2.sibling(div_3, 2);
+  var node_5 = $2.child(div_4);
   {
     var consequent_3 = ($$anchor2) => {
-      var div_4 = root_4();
-      var node_6 = $2.child(div_4);
-      $2.snippet(node_6, () => $$props.rightButton);
-      $2.reset(div_4);
-      $2.append($$anchor2, div_4);
+      var fragment_2 = $2.comment();
+      var node_6 = $2.first_child(fragment_2);
+      $2.snippet(node_6, () => $$props.children);
+      $2.append($$anchor2, fragment_2);
     };
     $2.if(node_5, ($$render) => {
-      if ($$props.rightButton) $$render(consequent_3);
+      if ($$props.children) $$render(consequent_3);
     });
   }
-  var div_5 = $2.sibling(node_5, 2);
-  $2.set_attribute(div_5, "aria-valuemin", 0);
-  var node_7 = $2.child(div_5);
+  $2.reset(div_4);
+  $2.bind_this(div_4, ($$value) => $2.set(contentEl, $$value), () => $2.get(contentEl));
+  var span = $2.sibling(div_4, 2);
+  var text = $2.child(span, true);
+  $2.reset(span);
+  $2.reset(section);
+  $2.bind_this(section, ($$value) => $2.set(sheetEl, $$value), () => $2.get(sheetEl));
+  var node_7 = $2.sibling(section, 2);
   {
     var consequent_4 = ($$anchor2) => {
-      var fragment_1 = $2.comment();
-      var node_8 = $2.first_child(fragment_1);
-      $2.snippet(node_8, () => $$props.header, () => $2.get(viewState));
-      $2.append($$anchor2, fragment_1);
+      var div_5 = root_5();
+      var node_8 = $2.child(div_5);
+      $2.snippet(node_8, () => $$props.leftButton);
+      $2.reset(div_5);
+      $2.template_effect(() => $2.set_attribute(div_5, "data-mode", mode()));
+      $2.append($$anchor2, div_5);
     };
     $2.if(node_7, ($$render) => {
-      if ($$props.header) $$render(consequent_4);
+      if ($$props.leftButton) $$render(consequent_4);
     });
   }
-  $2.reset(div_5);
-  $2.bind_this(div_5, ($$value) => $2.set(handleEl, $$value), () => $2.get(handleEl));
-  var div_6 = $2.sibling(div_5, 2);
-  var node_9 = $2.child(div_6);
+  var node_9 = $2.sibling(node_7, 2);
   {
     var consequent_5 = ($$anchor2) => {
-      var fragment_2 = $2.comment();
-      var node_10 = $2.first_child(fragment_2);
-      $2.snippet(node_10, () => $$props.children);
-      $2.append($$anchor2, fragment_2);
+      var div_6 = root_6();
+      var node_10 = $2.child(div_6);
+      $2.snippet(node_10, () => $$props.rightButton);
+      $2.reset(div_6);
+      $2.template_effect(() => $2.set_attribute(div_6, "data-mode", mode()));
+      $2.append($$anchor2, div_6);
     };
     $2.if(node_9, ($$render) => {
-      if ($$props.children) $$render(consequent_5);
+      if ($$props.rightButton) $$render(consequent_5);
     });
   }
-  $2.reset(div_6);
-  $2.bind_this(div_6, ($$value) => $2.set(contentEl, $$value), () => $2.get(contentEl));
-  var span = $2.sibling(div_6, 2);
-  var text = $2.child(span, true);
-  $2.reset(span);
-  $2.reset(section);
-  $2.bind_this(section, ($$value) => $2.set(sheetEl, $$value), () => $2.get(sheetEl));
   $2.reset(div);
   $2.template_effect(
     ($0, $1) => {
@@ -3660,10 +3668,10 @@ function BottomSheet($$anchor, $$props) {
       $2.set_attribute(section, "data-active", $2.get(viewState).activeId);
       $2.set_attribute(section, "aria-modal", focusTrap() ? "true" : void 0);
       $2.set_attribute(section, "aria-label", ariaLabel());
-      $2.set_attribute(div_5, "aria-orientation", $2.get(isVerticalAxis) ? "vertical" : "horizontal");
-      $2.set_attribute(div_5, "aria-valuemax", $0);
-      $2.set_attribute(div_5, "aria-valuenow", $1);
-      $2.set_attribute(div_5, "aria-valuetext", $2.get(viewState).activeId);
+      $2.set_attribute(div_3, "aria-orientation", $2.get(isVerticalAxis) ? "vertical" : "horizontal");
+      $2.set_attribute(div_3, "aria-valuemax", $0);
+      $2.set_attribute(div_3, "aria-valuenow", $1);
+      $2.set_attribute(div_3, "aria-valuetext", $2.get(viewState).activeId);
       $2.set_text(text, $2.get(viewState).activeId);
     },
     [

package/dist/vue.cjs

@@ -3273,6 +3273,9 @@ var BottomSheetEngine = class {
       if (this.anchorHost && this.anchorHost !== this.scrimParent) {
         this.anchorHost.style.setProperty("--bs-size", `${size}px`);
       }
+      if (this.rootEl && this.rootEl !== this.scrimParent && this.rootEl !== this.anchorHost) {
+        this.rootEl.style.setProperty("--bs-size", `${size}px`);
+      }
     }
     const progress = this.computeProgress(size);
     const progressChanged = this.progressWriteSentinel.shouldWrite(
@@ -3284,6 +3287,9 @@ var BottomSheetEngine = class {
       if (this.anchorHost) {
         this.anchorHost.style.setProperty("--bs-progress", String(progress));
       }
+      if (this.rootEl && this.rootEl !== this.anchorHost) {
+        this.rootEl.style.setProperty("--bs-progress", String(progress));
+      }
     }
     this.scrim.applyOpacity(progress, progressChanged);
     if (progressChanged && this.bus.listenerCount("progress") > 0) {
@@ -3887,38 +3893,30 @@ var _hoisted_3 = [
   "aria-modal",
   "aria-label"
 ];
-var _hoisted_4 = {
-  key: 0,
-  class: "bs-button-slot",
-  "data-side": "left"
-};
-var _hoisted_5 = {
-  key: 1,
-  class: "bs-button-slot",
-  "data-side": "right"
-};
-var _hoisted_6 = [
+var _hoisted_4 = [
   "aria-orientation",
   "aria-valuemax",
   "aria-valuenow",
   "aria-valuetext"
 ];
-var _hoisted_7 = {
+var _hoisted_5 = {
   ref: "contentRef",
   class: "bs-content",
   tabindex: "0",
   role: "region",
   "aria-label": "Sheet content"
 };
-var _hoisted_8 = {
-  key: 2,
+var _hoisted_6 = {
+  key: 0,
   class: "bs-footer"
 };
-var _hoisted_9 = {
+var _hoisted_7 = {
   class: "bs-sr-only",
   role: "status",
   "aria-live": "polite"
 };
+var _hoisted_8 = ["data-mode"];
+var _hoisted_9 = ["data-mode"];
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
   return vue.openBlock(), vue.createBlock(vue.Teleport, {
     to: $props.teleportTo,
@@ -3953,8 +3951,6 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
       "aria-modal": $setup.ariaModal ? "true" : void 0,
       "aria-label": $props.ariaLabel
     }, [
-      _ctx.$slots["button-left"] ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_4, [vue.renderSlot(_ctx.$slots, "button-left")])) : vue.createCommentVNode("v-if", true),
-      _ctx.$slots["button-right"] ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_5, [vue.renderSlot(_ctx.$slots, "button-right")])) : vue.createCommentVNode("v-if", true),
       vue.createElementVNode("div", {
         ref: "handleRef",
         class: "bs-handle",
@@ -3966,23 +3962,35 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
         "aria-valuenow": $setup.activeIdx,
         "aria-valuetext": $setup.state.activeId,
         "aria-label": "Resize sheet"
-      }, [vue.renderSlot(_ctx.$slots, "header", { state: $setup.state })], 8, _hoisted_6),
+      }, [vue.renderSlot(_ctx.$slots, "header", { state: $setup.state })], 8, _hoisted_4),
       vue.createElementVNode(
         "div",
-        _hoisted_7,
+        _hoisted_5,
         [vue.renderSlot(_ctx.$slots, "default")],
         512
         /* NEED_PATCH */
       ),
-      _ctx.$slots.footer ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_8, [vue.renderSlot(_ctx.$slots, "footer", { state: $setup.state })])) : vue.createCommentVNode("v-if", true),
+      _ctx.$slots.footer ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_6, [vue.renderSlot(_ctx.$slots, "footer", { state: $setup.state })])) : vue.createCommentVNode("v-if", true),
       vue.createElementVNode(
         "span",
-        _hoisted_9,
+        _hoisted_7,
         vue.toDisplayString($setup.state.activeId),
         1
         /* TEXT */
       )
-    ], 8, _hoisted_3)
+    ], 8, _hoisted_3),
+    _ctx.$slots["button-left"] ? (vue.openBlock(), vue.createElementBlock("div", {
+      key: 1,
+      class: "bs-button-slot",
+      "data-side": "left",
+      "data-mode": $setup.props.mode ?? "bottom"
+    }, [vue.renderSlot(_ctx.$slots, "button-left")], 8, _hoisted_8)) : vue.createCommentVNode("v-if", true),
+    _ctx.$slots["button-right"] ? (vue.openBlock(), vue.createElementBlock("div", {
+      key: 2,
+      class: "bs-button-slot",
+      "data-side": "right",
+      "data-mode": $setup.props.mode ?? "bottom"
+    }, [vue.renderSlot(_ctx.$slots, "button-right")], 8, _hoisted_9)) : vue.createCommentVNode("v-if", true)
   ]), (vue.openBlock(true), vue.createElementBlock(
     vue.Fragment,
     null,

package/dist/vue.js

@@ -3271,6 +3271,9 @@ var BottomSheetEngine = class {
       if (this.anchorHost && this.anchorHost !== this.scrimParent) {
         this.anchorHost.style.setProperty("--bs-size", `${size}px`);
       }
+      if (this.rootEl && this.rootEl !== this.scrimParent && this.rootEl !== this.anchorHost) {
+        this.rootEl.style.setProperty("--bs-size", `${size}px`);
+      }
     }
     const progress = this.computeProgress(size);
     const progressChanged = this.progressWriteSentinel.shouldWrite(
@@ -3282,6 +3285,9 @@ var BottomSheetEngine = class {
       if (this.anchorHost) {
         this.anchorHost.style.setProperty("--bs-progress", String(progress));
       }
+      if (this.rootEl && this.rootEl !== this.anchorHost) {
+        this.rootEl.style.setProperty("--bs-progress", String(progress));
+      }
     }
     this.scrim.applyOpacity(progress, progressChanged);
     if (progressChanged && this.bus.listenerCount("progress") > 0) {
@@ -3885,38 +3891,30 @@ var _hoisted_3 = [
   "aria-modal",
   "aria-label"
 ];
-var _hoisted_4 = {
-  key: 0,
-  class: "bs-button-slot",
-  "data-side": "left"
-};
-var _hoisted_5 = {
-  key: 1,
-  class: "bs-button-slot",
-  "data-side": "right"
-};
-var _hoisted_6 = [
+var _hoisted_4 = [
   "aria-orientation",
   "aria-valuemax",
   "aria-valuenow",
   "aria-valuetext"
 ];
-var _hoisted_7 = {
+var _hoisted_5 = {
   ref: "contentRef",
   class: "bs-content",
   tabindex: "0",
   role: "region",
   "aria-label": "Sheet content"
 };
-var _hoisted_8 = {
-  key: 2,
+var _hoisted_6 = {
+  key: 0,
   class: "bs-footer"
 };
-var _hoisted_9 = {
+var _hoisted_7 = {
   class: "bs-sr-only",
   role: "status",
   "aria-live": "polite"
 };
+var _hoisted_8 = ["data-mode"];
+var _hoisted_9 = ["data-mode"];
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createBlock(Teleport, {
     to: $props.teleportTo,
@@ -3951,8 +3949,6 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
       "aria-modal": $setup.ariaModal ? "true" : void 0,
       "aria-label": $props.ariaLabel
     }, [
-      _ctx.$slots["button-left"] ? (openBlock(), createElementBlock("div", _hoisted_4, [renderSlot(_ctx.$slots, "button-left")])) : createCommentVNode("v-if", true),
-      _ctx.$slots["button-right"] ? (openBlock(), createElementBlock("div", _hoisted_5, [renderSlot(_ctx.$slots, "button-right")])) : createCommentVNode("v-if", true),
       createElementVNode("div", {
         ref: "handleRef",
         class: "bs-handle",
@@ -3964,23 +3960,35 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
         "aria-valuenow": $setup.activeIdx,
         "aria-valuetext": $setup.state.activeId,
         "aria-label": "Resize sheet"
-      }, [renderSlot(_ctx.$slots, "header", { state: $setup.state })], 8, _hoisted_6),
+      }, [renderSlot(_ctx.$slots, "header", { state: $setup.state })], 8, _hoisted_4),
       createElementVNode(
         "div",
-        _hoisted_7,
+        _hoisted_5,
         [renderSlot(_ctx.$slots, "default")],
         512
         /* NEED_PATCH */
       ),
-      _ctx.$slots.footer ? (openBlock(), createElementBlock("div", _hoisted_8, [renderSlot(_ctx.$slots, "footer", { state: $setup.state })])) : createCommentVNode("v-if", true),
+      _ctx.$slots.footer ? (openBlock(), createElementBlock("div", _hoisted_6, [renderSlot(_ctx.$slots, "footer", { state: $setup.state })])) : createCommentVNode("v-if", true),
       createElementVNode(
         "span",
-        _hoisted_9,
+        _hoisted_7,
         toDisplayString($setup.state.activeId),
         1
         /* TEXT */
       )
-    ], 8, _hoisted_3)
+    ], 8, _hoisted_3),
+    _ctx.$slots["button-left"] ? (openBlock(), createElementBlock("div", {
+      key: 1,
+      class: "bs-button-slot",
+      "data-side": "left",
+      "data-mode": $setup.props.mode ?? "bottom"
+    }, [renderSlot(_ctx.$slots, "button-left")], 8, _hoisted_8)) : createCommentVNode("v-if", true),
+    _ctx.$slots["button-right"] ? (openBlock(), createElementBlock("div", {
+      key: 2,
+      class: "bs-button-slot",
+      "data-side": "right",
+      "data-mode": $setup.props.mode ?? "bottom"
+    }, [renderSlot(_ctx.$slots, "button-right")], 8, _hoisted_9)) : createCommentVNode("v-if", true)
   ]), (openBlock(true), createElementBlock(
     Fragment,
     null,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@surdeddd/bottom-sheet",
-  "version": "0.4.0",
+  "version": "0.4.1",
   "description": "Universal, headless bottom sheet — framework-agnostic core with React, Vue 3, Svelte, Solid, Qwik, Preact, Lit and Custom Element adapters. Pointer Events, snap points, momentum, a11y, SSR-safe.",
   "type": "module",
   "license": "MIT",
@@ -187,7 +187,7 @@
     {
       "name": "vue adapter",
       "path": "dist/vue.js",
-      "limit": "20 KB",
+      "limit": "21 KB",
       "gzip": true
     },
     {
@@ -205,7 +205,7 @@
     {
       "name": "qwik adapter",
       "path": "dist/qwik.js",
-      "limit": "18 KB",
+      "limit": "19 KB",
       "gzip": true
     },
     {