@plainsheet/core 0.7.8 → 0.7.10

package/dist/plainsheet-core.es.js

@@ -1,8 +1,8 @@
 (function(){"use strict";try{if(typeof document<"u"){var e=document.createElement("style");e.appendChild(document.createTextNode('.pbs-root{position:fixed;left:0;bottom:0;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;width:100%;height:fit-content;max-height:100vh;z-index:2}.pbs-dialog-reset{background-color:transparent;color:inherit;border:none;outline:none;padding:0;margin:0}.pbs-backdrop{position:fixed;top:0;left:0;width:100%;height:100%;background-color:transparent;z-index:1;transition:background-color .2s ease-out}.pbs-backdrop.hidden{visibility:hidden}.pbs-backdrop.open{background-color:#454545b3}.pbs-backdrop.transparent{background-color:transparent}.pbs-container{--pbs-container-background-color: rgb(240, 240, 240);background-color:var(--pbs-container-background-color);position:relative;display:none;flex-direction:column;align-items:center;justify-content:flex-start;width:92%;height:fit-content;max-height:100vh;border-radius:10px 10px 0 0}.pbs-container.open{display:flex}.pbs-container .pbs-gap-filler{position:absolute;bottom:calc(-100vh + .5px);left:0;background-color:var(--pbs-container-background-color);content:"";width:100%;height:100vh}.pbs-handle{position:relative;display:flex;align-items:center;justify-content:center;width:100%;height:30px;cursor:pointer}.pbs-handle.hidden{display:none}.pbs-button-reset{background-color:transparent;-webkit-appearance:none;-moz-appearance:none;appearance:none;outline:none;border:none}button:focus.pbs-button-reset{outline:none}.pbs-handle-bar{background-color:#a8a8a8;position:relative;width:12%;height:7px;border-radius:12px}.pbs-handle-bar.hidden{display:none}.pbs-content-wrapper{position:relative;width:100%;height:fit-content;max-height:100%;overflow-y:scroll}.pbs-content-wrapper::-webkit-scrollbar{display:none}.example{-ms-overflow-style:none;scrollbar-width:none}')),document.head.appendChild(e)}}catch(n){console.error("vite-plugin-css-injected-by-js",n)}})();
-var kt = Object.defineProperty;
-var At = (t, n, e) => n in t ? kt(t, n, { enumerable: !0, configurable: !0, writable: !0, value: e }) : t[n] = e;
+var Lt = Object.defineProperty;
+var At = (t, n, e) => n in t ? Lt(t, n, { enumerable: !0, configurable: !0, writable: !0, value: e }) : t[n] = e;
 var j = (t, n, e) => At(t, typeof n != "symbol" ? n + "" : n, e);
-function O(t) {
+function H(t) {
   return typeof t == "string";
 }
 function Bt(t, n) {
@@ -14,11 +14,11 @@ function $(t, n) {
 function rt(t, n) {
   t.classList.remove(Z(n));
 }
-function W(t, n, e) {
-  O(e) && (O(n) && rt(t, n), $(t, e));
+function U(t, n, e) {
+  H(e) && (H(n) && rt(t, n), $(t, e));
 }
 function Z(t) {
-  return O(t) ? t.trim().replace(/\./g, "") : "";
+  return H(t) ? t.trim().replace(/\./g, "") : "";
 }
 function M(t) {
   return t.map((n) => Z(n)).filter(Boolean).join(" ");
@@ -40,17 +40,17 @@ function et(t, n) {
 function q(t, n) {
   n ? ($(t, lt), rt(t, ut)) : ($(t, ut), rt(t, lt));
 }
-function Tt(t) {
+function yt(t) {
   return t instanceof HTMLElement;
 }
 function Y(t) {
   return typeof t == "number" && !Number.isNaN(t);
 }
 function Yt(t) {
-  Tt(t) && t.focus();
+  yt(t) && t.focus();
 }
 function It(t) {
-  if (!Tt(t) || t.offsetParent === null || "disabled" in t && t.disabled)
+  if (!yt(t) || t.offsetParent === null || "disabled" in t && t.disabled)
     return !1;
   const e = t.getAttribute("tabindex"), r = Y(e) ? parseInt(e, 10) : -1, i = [
     "INPUT",
@@ -63,17 +63,17 @@ function It(t) {
   ].includes(t.tagName), a = t instanceof HTMLAnchorElement && t.href !== "" || t instanceof HTMLAreaElement && t.href !== "";
   return i || a || r > -1;
 }
-var C = /* @__PURE__ */ ((t) => (t.Backdrop = "pbs-backdrop", t.Root = "pbs-root", t.Container = "pbs-container", t.GapFiller = "pbs-gap-filler", t.Handle = "pbs-handle", t.HandleBar = "pbs-handle-bar", t.ContentWrapper = "pbs-content-wrapper", t))(C || {}), ot = /* @__PURE__ */ ((t) => (t.Button = "pbs-button-reset", t.Dialog = "pbs-dialog-reset", t))(ot || {}), K = /* @__PURE__ */ ((t) => (t.Hidden = "hidden", t))(K || {});
+var T = /* @__PURE__ */ ((t) => (t.Backdrop = "pbs-backdrop", t.Root = "pbs-root", t.Container = "pbs-container", t.GapFiller = "pbs-gap-filler", t.Handle = "pbs-handle", t.HandleBar = "pbs-handle-bar", t.ContentWrapper = "pbs-content-wrapper", t))(T || {}), ot = /* @__PURE__ */ ((t) => (t.Button = "pbs-button-reset", t.Dialog = "pbs-dialog-reset", t))(ot || {}), K = /* @__PURE__ */ ((t) => (t.Hidden = "hidden", t))(K || {});
 function x(t, n, e) {
   const r = document.createElement(t);
   return n.split(" ").forEach((i) => {
     $(r, i);
-  }), O(e) && r.setAttribute("data-testid", e), r;
+  }), H(e) && r.setAttribute("data-testid", e), r;
 }
 const sn = {
   CONTENTS_WRAPPER: Dt([
-    C.Root,
-    C.ContentWrapper
+    T.Root,
+    T.ContentWrapper
   ])
 };
 function dt(t, n, e, r) {
@@ -88,7 +88,7 @@ function dt(t, n, e, r) {
       return 0;
   }
 }
-function yt(t, n) {
+function Ct(t, n) {
   const e = n < t, r = n > t;
   return {
     isUp: e,
@@ -96,10 +96,10 @@ function yt(t, n) {
     stayedSame: n === t
   };
 }
-function Ct(t, n) {
+function Tt(t, n) {
   return n < t ? -(t - n) : n - t;
 }
-function V(t, n) {
+function W(t, n) {
   return t > n ? t - n : n - t;
 }
 function xt(t, n) {
@@ -151,7 +151,7 @@ function I(t) {
     e,
     it
   );
-  return Ht(r ?? {
+  return St(r ?? {
     type: it,
     values: []
   });
@@ -165,7 +165,7 @@ function Q(t, { x: n, y: e }) {
     it
   );
   if (i) {
-    const a = Ht(i);
+    const a = St(i);
     t.style.transform = `translate(${n ?? a.x ?? 0}px,${e ?? a.y ?? 0}px)`;
     return;
   }
@@ -175,7 +175,7 @@ function Q(t, { x: n, y: e }) {
   }
   t.style.transform = `translate(${n ?? 0}px,${e ?? 0}px)`;
 }
-function Ht(t) {
+function St(t) {
   if (t.type !== "translate")
     throw new Error(
       `Could not get coordinates from ${t.type}, since is not translate.`
@@ -195,11 +195,11 @@ function ht(t, {
 }) {
   return at(e) && t >= e ? e : at(n) && t <= n ? n : t;
 }
-const Pt = (t, n, e) => {
-  n instanceof HTMLElement && !Bt(n, C.Handle) && e.scrollTop >= 1 || (t.isDragging = !0);
+const Ft = (t, n, e) => {
+  n instanceof HTMLElement && !Bt(n, T.Handle) && e.scrollTop >= 1 || (t.isDragging = !0);
 }, Mt = (t, n, e, r) => (o) => {
   r.startY = t.getCoordinates(o).y, r.containerStartTranslate = I(n), e.onDragStart();
-}, Ft = (t, n, e, r, o) => (i) => {
+}, Pt = (t, n, e, r, o) => (i) => {
   Rt(
     i,
     t,
@@ -213,31 +213,31 @@ const Pt = (t, n, e) => {
 function Rt(t, n, e, r, o, i, a) {
   if (!r.isDragging || !Y(r.startY))
     return;
-  const u = n.getCoordinates(t).y, s = Ct(r.startY, u), b = window.innerHeight, l = i.clientHeight, f = l - (r.containerStartTranslate.y + s);
-  if (f >= b)
+  const u = n.getCoordinates(t).y, s = Tt(r.startY, u), b = window.innerHeight, l = i.clientHeight, d = l - (r.containerStartTranslate.y + s);
+  if (d >= b)
     return;
-  const p = yt(r.startY, u);
-  if (p.isUp && !e.expandable && f >= l || e.preventClosing && f <= l)
+  const y = Ct(r.startY, u);
+  if (y.isUp && !e.expandable && d >= l || e.preventClosing && d <= l)
     return;
   o.start(() => {
     Q(i, {
       y: r.containerStartTranslate.y + s
     });
   }, 0);
-  const w = b - a, c = l - r.containerStartTranslate.y;
-  if (p.isUp) {
-    const T = w - c, H = w - f, L = ht(
-      1 - J(H / T, 2),
+  const E = b - a, c = l - r.containerStartTranslate.y;
+  if (y.isUp) {
+    const C = E - c, w = E - d, k = ht(
+      1 - J(w / C, 2),
       {
         min: 0,
         max: 1
       }
     );
-    e.onDragMove(p, L);
-  } else if (p.isDown) {
-    const T = ht(
+    e.onDragMove(y, k);
+  } else if (y.isDown) {
+    const C = ht(
       J(
-        1 - f / c,
+        1 - d / c,
         2
       ),
       {
@@ -245,57 +245,57 @@ function Rt(t, n, e, r, o, i, a) {
         max: 1
       }
     );
-    e.onDragMove(p, T);
+    e.onDragMove(y, C);
   }
 }
-const _t = (t, n, e, r, o, i, a) => (u) => {
+const Gt = (t, n, e, r, o, i, a) => (u) => {
   if (!r.isDragging || (r.isDragging = !1, !Y(r.startY)))
     return;
   e.onDragEnd();
-  const s = r.startY, b = t.getCoordinates(u).y, l = I(n).y, f = yt(s, b), p = window.innerHeight, w = n.clientHeight;
-  if (f.isUp) {
+  const s = r.startY, b = t.getCoordinates(u).y, l = I(n).y, d = Ct(s, b), y = window.innerHeight, E = n.clientHeight;
+  if (d.isUp) {
     const c = [...e.snapPoints].sort(
-      (L, B) => L - B
-    ), T = w + -l;
-    if (!e.expandable && T >= w)
+      (k, B) => k - B
+    ), C = E + -l;
+    if (!e.expandable && C >= E)
       return;
-    for (const L of c) {
-      const B = L * window.innerHeight;
-      if (T <= B) {
-        const k = V(
-          T,
+    for (const k of c) {
+      const B = k * window.innerHeight;
+      if (C <= B) {
+        const O = W(
+          C,
           B
         );
         a.translateContainer({
           startY: l,
-          endY: l - k,
+          endY: l - O,
           animationFrame: o,
           bottomSheetContainer: n
         });
         return;
       }
     }
-    const H = Et(
-      p,
-      w,
+    const w = Et(
+      y,
+      E,
       e.marginTop
     );
     a.translateContainer({
       startY: l,
-      endY: H,
+      endY: w,
       animationFrame: o,
       bottomSheetContainer: n
     });
-  } else if (f.isDown) {
+  } else if (d.isDown) {
     const c = [...e.snapPoints].sort(
-      (T, H) => H - T
+      (C, w) => w - C
     );
-    for (const T of c) {
-      const H = T * window.innerHeight, L = w + -l;
-      if (L >= H) {
-        const B = V(
-          L,
-          H
+    for (const C of c) {
+      const w = C * window.innerHeight, k = E + -l;
+      if (k >= w) {
+        const B = W(
+          k,
+          w
         );
         a.translateContainer({
           startY: l,
@@ -307,12 +307,12 @@ const _t = (t, n, e, r, o, i, a) => (u) => {
       }
     }
     if (e.preventClosing) {
-      const T = w + -l;
-      if (T >= w) {
-        const H = V(T, w);
+      const C = E + -l;
+      if (C >= E) {
+        const w = W(C, E);
         a.translateContainer({
           startY: l,
-          endY: l + H,
+          endY: l + w,
           animationFrame: o,
           bottomSheetContainer: n
         });
@@ -322,7 +322,7 @@ const _t = (t, n, e, r, o, i, a) => (u) => {
     i();
   }
 };
-var _ = /* @__PURE__ */ ((t) => (t[t.All = -1] = "All", t[t.None = 0] = "None", t[t.Capture = 1] = "Capture", t[t.Target = 2] = "Target", t[t.Bubble = 3] = "Bubble", t))(_ || {});
+var G = /* @__PURE__ */ ((t) => (t[t.All = -1] = "All", t[t.None = 0] = "None", t[t.Capture = 1] = "Capture", t[t.Target = 2] = "Target", t[t.Bubble = 3] = "Bubble", t))(G || {});
 function mt(t) {
   switch (t) {
     case 0:
@@ -337,17 +337,17 @@ function mt(t) {
       return -1;
   }
 }
-const Ut = {
-  eventPhase: _.All
+const _t = {
+  eventPhase: G.All
 };
-class G {
+class V {
   constructor(n) {
     j(this, "currentTarget");
     this.currentTarget = n;
   }
   addEventListeners({
     onStart: n,
-    onStartOptions: e = Ut,
+    onStartOptions: e = _t,
     onMove: r,
     onEnd: o
   }) {
@@ -362,7 +362,7 @@ class G {
     n && this.currentTarget.addEventListener(
       "touchstart",
       (i) => {
-        if (e.eventPhase === _.All) {
+        if (e.eventPhase === G.All) {
           n(i);
           return;
         }
@@ -382,7 +382,7 @@ class G {
     n && this.currentTarget.addEventListener(
       "mousedown",
       (i) => {
-        if (e.eventPhase === _.All) {
+        if (e.eventPhase === G.All) {
           n(i);
           return;
         }
@@ -433,83 +433,88 @@ class G {
     };
   }
 }
-function St(t) {
+function Ht(t) {
   const n = t;
   return `${n} ${n} 0px 0px`;
 }
 function jt(t, n) {
-  const e = Wt(t);
-  Gt(e), e.bottomSheetContainer.style.width = t.width;
+  const e = Ut(t);
+  Vt(e), e.bottomSheetContainer.style.width = t.width;
   const r = document.createElement("div");
   r.innerHTML = t.content ?? "";
   const o = window.innerHeight;
   e.bottomSheetContainer.style.maxHeight = `${o}px`, e.bottomSheetContentWrapper.appendChild(r);
-  const i = Vt({
+  const i = Wt({
     bottomSheetElements: e,
     bottomSheetProps: t,
     options: n
   });
-  return t.rootStyle && Object.assign(e.bottomSheetRoot.style, t.rootStyle), t.backdropStyle && Object.assign(e.bottomSheetBackdrop.style, t.backdropStyle), t.containerStyle && Object.assign(e.bottomSheetContainer.style, t.containerStyle), t.handleStyle && Object.assign(e.bottomSheetHandleBar.style, t.handleStyle), t.contentWrapperStyle && Object.assign(
+  return t.rootStyle && Object.assign(e.bottomSheetRoot.style, t.rootStyle), t.backdropStyle && Object.assign(e.bottomSheetBackdrop.style, t.backdropStyle), t.containerGapFillerStyle && Object.assign(e.bottomSheetContainer.style, t.containerStyle), t.containerStyle && Object.assign(
+    e.bottomSheetContainerGapFiller.style,
+    t.containerGapFillerStyle
+  ), t.handleStyle && Object.assign(e.bottomSheetHandleBar.style, t.handleStyle), t.contentWrapperStyle && Object.assign(
     e.bottomSheetContentWrapper.style,
     t.contentWrapperStyle
   ), { elements: e, eventHandlers: i };
 }
-function Wt(t) {
+function Ut(t) {
   const n = x(
     "dialog",
     M([
-      C.Root,
+      T.Root,
       ot.Dialog,
       t.rootClass
     ]),
-    C.Root
+    T.Root
   );
   n.ariaLabel = t.ariaLabel;
   const e = x(
     "section",
-    M([C.Container, t.containerClass]),
-    C.Container
+    M([T.Container, t.containerClass]),
+    T.Container
   );
-  t.containerBorderRadius && (e.style.borderRadius = St(
+  t.containerBorderRadius && (e.style.borderRadius = Ht(
     t.containerBorderRadius
   ));
   const r = x(
     "div",
-    C.GapFiller,
-    C.GapFiller
-  ), o = x(
+    T.GapFiller,
+    T.GapFiller
+  );
+  t.containerBackgroundColor && (e.style.backgroundColor = t.containerBackgroundColor, r.style.backgroundColor = t.containerBackgroundColor);
+  const o = x(
     "button",
     M([
-      C.Handle,
+      T.Handle,
       ot.Button,
       t.shouldShowHandle ? null : K.Hidden,
       t.handleClass
     ]),
-    C.Handle
+    T.Handle
   );
   o.setAttribute("type", "button"), o.ariaLabel = "bottom sheet close button";
   const i = x(
     "span",
     M([
-      C.HandleBar,
+      T.HandleBar,
       t.shouldShowHandle ? null : K.Hidden
     ]),
-    C.HandleBar
+    T.HandleBar
   ), a = x(
     "article",
     M([
-      C.ContentWrapper,
+      T.ContentWrapper,
       t.contentWrapperClass
     ]),
-    C.ContentWrapper
+    T.ContentWrapper
   ), u = x(
     "div",
     M([
-      C.Backdrop,
+      T.Backdrop,
       t.backdropClass,
       K.Hidden
     ]),
-    C.Backdrop
+    T.Backdrop
   );
   return t.backdropColor && (u.style.backgroundColor = t.backdropColor), t.backDropTransition && (u.style.transition = t.backDropTransition), {
     bottomSheetRoot: n,
@@ -521,7 +526,7 @@ function Wt(t) {
     bottomSheetContainerGapFiller: r
   };
 }
-function Gt({
+function Vt({
   bottomSheetRoot: t,
   bottomSheetContainer: n,
   bottomSheetHandle: e,
@@ -531,7 +536,7 @@ function Gt({
 }) {
   t.appendChild(n), e.appendChild(r), n.appendChild(e), n.appendChild(o), n.appendChild(i);
 }
-function Vt({
+function Wt({
   bottomSheetElements: t,
   bottomSheetProps: n,
   options: e
@@ -543,33 +548,26 @@ function Vt({
     bottomSheetContainerGapFiller: a,
     bottomSheetContentWrapper: u,
     bottomSheetBackdrop: s
-  } = t, { animationFrame: b } = e, l = new G(i), f = new G(
+  } = t, { animationFrame: b } = e, l = new V(i), d = new V(
     u
-  ), p = new G(
+  ), y = new V(
     a
-  ), w = n.dragTriggers.reduce(
-    (E, S) => {
-      const y = r.querySelectorAll(S);
-      if (!y.length)
-        return E;
-      const P = Array.from(y).map((d) => d instanceof HTMLElement ? new G(d) : null).filter((d) => !!d);
-      return [...E, ...P];
-    },
-    []
-  ), c = new G(
+  );
+  let E = [];
+  const c = new V(
     window
-  ), T = Mt(
+  ), C = Mt(
     c,
     o,
     n,
     e.draggingState
-  ), H = Ft(
+  ), w = Pt(
     c,
     o,
     n,
     e.draggingState,
     b
-  ), L = _t(
+  ), k = Gt(
     c,
     o,
     n,
@@ -578,91 +576,102 @@ function Vt({
     e.onClose,
     e.bottomSheetState
   );
-  function B(E) {
-    E.target instanceof Element && !r.contains(E.target) && e.onClose();
+  function B(S) {
+    S.target instanceof Element && !r.contains(S.target) && e.onClose();
   }
-  function k(E) {
-    Pt(
+  function O(S) {
+    Ft(
       e.draggingState,
-      E.target,
+      S.target,
       t.bottomSheetContentWrapper
     );
   }
-  function N(E) {
-    const S = E ?? n;
-    S.draggable && (l.addEventListeners({
-      onStart: k
-    }), w.forEach((y) => {
-      y.addEventListeners({
-        onStart: k,
-        onStartOptions: {
-          eventPhase: _.Target
-        }
-      });
-    })), S.draggable && S.backgroundDraggable && (f.addEventListeners({
-      onStart: k,
+  function N(S) {
+    const L = S ?? n;
+    L.draggable && L.backgroundDraggable && (d.addEventListeners({
+      onStart: O,
       onStartOptions: {
-        eventPhase: _.Target
+        eventPhase: G.Target
       }
-    }), p.addEventListeners({
-      onStart: k
-    })), S.draggable && c.addEventListeners({
-      onStart: T,
-      onMove: H,
-      onEnd: L
-    }), S.draggable && window.document.addEventListener("keyup", (y) => {
-      y.key === "Escape" && e.onClose();
-    }), i.addEventListener("keyup", (y) => {
-      if (y.key === "ArrowUp") {
+    }), y.addEventListeners({
+      onStart: O
+    })), L.draggable && c.addEventListeners({
+      onStart: C,
+      onMove: w,
+      onEnd: k
+    }), L.draggable && window.document.addEventListener("keyup", (p) => {
+      p.key === "Escape" && e.onClose();
+    }), i.addEventListener("keyup", (p) => {
+      if (p.key === "ArrowUp") {
         e.moveUp();
         return;
       }
-      if (y.key === "ArrowDown") {
+      if (p.key === "ArrowDown") {
         e.moveDown();
         return;
       }
-      if (y.shiftKey && y.key === "Tab") {
-        const P = nt(
+      if (p.shiftKey && p.key === "Tab") {
+        const F = nt(
           t.bottomSheetContentWrapper
         );
-        Yt(P);
+        Yt(F);
       }
     });
   }
-  function X() {
-    n.shouldCloseOnOutsideClick ? s.addEventListener("click", B) : s.style.pointerEvents = "none";
+  function X(S) {
+    const L = S ?? n;
+    n.shouldCloseOnOutsideClick && !n.preventClosing ? s.addEventListener("click", B) : s.style.pointerEvents = "none", L.draggable && (l.addEventListeners({
+      onStart: O
+    }), E.forEach((p) => {
+      p.removeEventListeners({
+        onStart: O
+      });
+    }), E = n.dragTriggers.reduce((p, F) => {
+      const g = r.querySelectorAll(F);
+      if (!g.length)
+        return p;
+      const h = Array.from(g).map((f) => f instanceof HTMLElement ? new V(f) : null).filter((f) => !!f);
+      return [...p, ...h];
+    }, []), E.forEach((p) => {
+      p.addEventListeners({
+        onStart: O,
+        onStartOptions: {
+          eventPhase: G.Target
+        }
+      });
+    }));
   }
   function tt() {
     s.removeEventListener("click", B);
   }
-  function nt(E) {
-    let S = [...Array.from(E.childNodes).reverse()];
-    for (; S.length; ) {
-      const y = S.shift();
-      if (It(y))
-        return y;
-      y && (S = [
-        ...S,
-        ...Array.from(y.childNodes).reverse()
+  function nt(S) {
+    let L = [...Array.from(S.childNodes).reverse()];
+    for (; L.length; ) {
+      const p = L.shift();
+      if (It(p))
+        return p;
+      p && (L = [
+        ...L,
+        ...Array.from(p.childNodes).reverse()
       ]);
     }
     return null;
   }
   function z() {
     l.removeEventListeners({
-      onStart: k
-    }), f.removeEventListeners({
-      onStart: k
-    }), p.removeEventListeners({
-      onStart: k
-    }), w.forEach((E) => {
-      E.removeEventListeners({
-        onStart: k
+      onStart: O
+    }), d.removeEventListeners({
+      onStart: O
+    }), y.removeEventListeners({
+      onStart: O
+    }), E.forEach((S) => {
+      S.removeEventListeners({
+        onStart: O
       });
     }), c.removeEventListeners({
-      onStart: T,
-      onMove: H,
-      onEnd: L
+      onStart: C,
+      onMove: w,
+      onEnd: k
     });
   }
   return {
@@ -706,7 +715,7 @@ function Xt(t) {
     onEnd: i,
     animationTimingFunction: a,
     animationDuration: u
-  } = t, s = Ct(n, e);
+  } = t, s = Tt(n, e);
   o.stop();
   let b = !1;
   o.start((l) => {
@@ -741,7 +750,7 @@ function Kt(t, n) {
 function qt(...t) {
   console.error(t);
 }
-const F = {
+const P = {
   EASE: "ease",
   EASE_IN: "ease-in",
   EASE_OUT: "ease-out",
@@ -749,7 +758,7 @@ const F = {
   SPRING: "spring"
 };
 function Jt(t) {
-  for (const n of Object.values(F))
+  for (const n of Object.values(P))
     if (n === t)
       return !0;
   return !1;
@@ -757,20 +766,20 @@ function Jt(t) {
 function Ot(t) {
   return !!(t instanceof Object && "p1x" in t && "p1y" in t && "p2x" in t && "p2y" in t && Y(t.p1x) && Y(t.p1y) && Y(t.p2x) && Y(t.p2y));
 }
-function U(t, n, e, r) {
+function _(t, n, e, r) {
   return function(s) {
     return u(i(s));
   };
   function i(s) {
-    let b = 0, l = 1, f = s, p;
+    let b = 0, l = 1, d = s, y;
     if (s === 0 || s === 1)
       return s;
     for (; b < l; ) {
-      if (p = a(f), Math.abs(p - s) < 1e-3)
-        return f;
-      s > p ? b = f : l = f, f = (l + b) / 2;
+      if (y = a(d), Math.abs(y - s) < 1e-3)
+        return d;
+      s > y ? b = d : l = d, d = (l + b) / 2;
     }
-    return f;
+    return d;
   }
   function a(s) {
     return 3 * t * s * Math.pow(1 - s, 2) + 3 * e * Math.pow(s, 2) * (1 - s) + Math.pow(s, 3);
@@ -779,18 +788,18 @@ function U(t, n, e, r) {
     return 3 * n * s * Math.pow(1 - s, 2) + 3 * r * Math.pow(s, 2) * (1 - s) + Math.pow(s, 3);
   }
 }
-const bt = U(0.25, 0.1, 0.25, 1), Qt = U(0.42, 0, 1, 1), Lt = U(0.42, 0, 0.58, 1), Zt = U(0.4, 0.1, 0.6, 1), tn = U(0.45, 1.5, 0.55, 1);
+const bt = _(0.25, 0.1, 0.25, 1), Qt = _(0.42, 0, 1, 1), kt = _(0.42, 0, 0.58, 1), Zt = _(0.4, 0.1, 0.6, 1), tn = _(0.45, 1.5, 0.55, 1);
 function nn(t) {
   switch (t) {
-    case F.EASE:
+    case P.EASE:
       return bt;
-    case F.EASE_IN:
+    case P.EASE_IN:
       return Qt;
-    case F.EASE_OUT:
-      return Lt;
-    case F.EASE_IN_OUT:
+    case P.EASE_OUT:
+      return kt;
+    case P.EASE_IN_OUT:
       return Zt;
-    case F.SPRING:
+    case P.SPRING:
       return tn;
     default:
       return bt;
@@ -830,6 +839,7 @@ const en = {
   shouldShowHandle: !0,
   backDropTransition: null,
   backdropColor: null,
+  containerBackgroundColor: null,
   containerBorderRadius: null,
   rootClass: null,
   containerClass: null,
@@ -842,7 +852,8 @@ const en = {
   containerStyle: {},
   handleStyle: {},
   contentWrapperStyle: {},
-  backdropStyle: {}
+  backdropStyle: {},
+  containerGapFillerStyle: {}
 };
 function rn(t) {
   const n = {
@@ -862,18 +873,18 @@ function rn(t) {
 function ct(t) {
   if (Ot(t)) {
     const { p1x: n, p1y: e, p2x: r, p2y: o } = t;
-    return U(n, e, r, o);
+    return _(n, e, r, o);
   }
-  return Jt(t) ? nn(t) : Lt;
+  return Jt(t) ? nn(t) : kt;
 }
 function on(t, n, e, r) {
   function o(i, a) {
     switch (i) {
       case "content":
-        O(a) && (t.bottomSheetContentWrapper.innerHTML = a);
+        H(a) && (t.bottomSheetContentWrapper.innerHTML = a);
         break;
       case "width":
-        O(a) && (t.bottomSheetContainer.style.width = a);
+        H(a) && (t.bottomSheetContainer.style.width = a);
         break;
       case "shouldShowHandle":
         pt(a) || q(t.bottomSheetHandle, !1);
@@ -882,54 +893,57 @@ function on(t, n, e, r) {
         pt(a) || q(t.bottomSheetBackdrop, !1);
         break;
       case "containerBorderRadius":
-        O(a) && (t.bottomSheetContainer.style.borderRadius = St(a));
+        H(a) && (t.bottomSheetContainer.style.borderRadius = Ht(a));
+        break;
+      case "containerBackgroundColor":
+        H(a) && (t.bottomSheetContainer.style.backgroundColor = a, t.bottomSheetContainerGapFiller.style.backgroundColor = a);
         break;
       case "backdropColor":
-        O(a) && (t.bottomSheetBackdrop.style.backgroundColor = a);
+        H(a) && (t.bottomSheetBackdrop.style.backgroundColor = a);
         break;
       case "backDropTransition":
-        O(a) && (t.bottomSheetBackdrop.style.transition = a);
+        H(a) && (t.bottomSheetBackdrop.style.transition = a);
         break;
       case "rootClass":
-        if (!O(a))
+        if (!H(a))
           return;
-        W(
+        U(
           t.bottomSheetRoot,
           e.rootClass,
           a
         );
         break;
       case "containerClass":
-        if (!O(a))
+        if (!H(a))
           return;
-        W(
+        U(
           t.bottomSheetContainer,
           e.containerClass,
           a
         );
         break;
       case "handleClass":
-        if (!O(a))
+        if (!H(a))
           return;
-        W(
+        U(
           t.bottomSheetHandle,
           e.handleClass,
           a
         );
         break;
       case "contentWrapperClass":
-        if (!O(a))
+        if (!H(a))
           return;
-        W(
+        U(
           t.bottomSheetContentWrapper,
           e.contentWrapperClass,
           a
         );
         break;
       case "backdropClass":
-        if (!O(a))
+        if (!H(a))
           return;
-        W(
+        U(
           t.bottomSheetBackdrop,
           e.backdropClass,
           a
@@ -944,6 +958,9 @@ function on(t, n, e, r) {
       case "draggable":
         r.clearEventListeners(), r.attachEventListeners(e);
         break;
+      case "dragTriggers":
+        r.clearEventListeners(), r.attachEventListeners(e);
+        break;
       case "draggingAnimationTimings":
         if (Ot(a)) {
           const u = ct(a), s = st(
@@ -982,6 +999,12 @@ function on(t, n, e, r) {
           e.containerStyle
         );
         break;
+      case "containerGapFillerStyle":
+        e.containerGapFillerStyle && Object.assign(
+          t.bottomSheetContainerGapFiller.style,
+          e.containerGapFillerStyle
+        );
+        break;
       case "handleStyle":
         e.handleStyle && Object.assign(
           t.bottomSheetHandleBar.style,
@@ -1025,13 +1048,13 @@ function cn(t) {
     onClose: B,
     bottomSheetState: o,
     draggingState: i,
-    snapTo: P,
-    moveUp: S,
-    moveDown: y
+    snapTo: F,
+    moveUp: L,
+    moveDown: p
   }, { elements: b, eventHandlers: l } = jt(
     n,
     s
-  ), f = Kt(
+  ), d = Kt(
     n,
     on(
       b,
@@ -1039,35 +1062,35 @@ function cn(t) {
       n,
       l
     )
-  ), { bottomSheetBackdrop: p, bottomSheetRoot: w, bottomSheetContainer: c } = b, T = (d) => {
-    const g = d ?? window.document.body;
-    g.appendChild(w), g.appendChild(p);
-    const h = window.innerHeight;
+  ), { bottomSheetBackdrop: y, bottomSheetRoot: E, bottomSheetContainer: c } = b, C = (g) => {
+    const h = g ?? window.document.body;
+    h.appendChild(E), h.appendChild(y);
+    const f = window.innerHeight;
     Q(c, {
-      y: h
+      y: f
     }), l.attachEventListeners(), o.isMounted = !0;
-  }, H = () => {
-    l.clearEventListeners(), Object.values(b).forEach((d) => {
-      d.remove();
+  }, w = () => {
+    l.clearEventListeners(), Object.values(b).forEach((g) => {
+      g.remove();
     }), a(), o.isMounted = !1;
-  }, L = () => {
+  }, k = () => {
     var D;
-    if (k() || qt(
+    if (O() || qt(
       'Bottom Sheet is not mounted yet. call the "mount" method first.'
     ), (D = t.beforeOpen) == null || D.call(t), N())
       return;
-    et(p, !0), f.shouldShowBackdrop || $(p, "transparent"), et([c], !0), Q(c, {
+    et(y, !0), d.shouldShowBackdrop || $(y, "transparent"), et([c], !0), Q(c, {
       y: c.clientHeight
     });
-    const g = window.innerHeight, h = dt(
-      g,
+    const h = window.innerHeight, f = dt(
+      h,
       c.clientHeight,
-      f.marginTop,
-      f.defaultPosition
+      d.marginTop,
+      d.defaultPosition
     ), m = I(c).y;
     o.translateContainer({
       startY: m,
-      endY: h,
+      endY: f,
       animationFrame: u,
       bottomSheetContainer: c,
       onEnd: t.afterOpen
@@ -1078,64 +1101,64 @@ function cn(t) {
     i.originalDocumentOverscrollBehavior = A || "initial", document.body.style.overflow = "hidden", document.body.style.overscrollBehavior = "contain", b.bottomSheetHandle.focus(), l.attacheOnOpenEventListeners();
   };
   function B() {
-    var h;
+    var f;
     if (X())
       return;
-    (h = t.beforeClose) == null || h.call(t);
-    const d = I(c).y, g = c.clientHeight;
+    (f = t.beforeClose) == null || f.call(t);
+    const g = I(c).y, h = c.clientHeight;
     o.translateContainer({
-      startY: d,
-      endY: g,
+      startY: g,
+      endY: h,
       animationFrame: u,
       bottomSheetContainer: c,
       onEnd: () => {
         var m;
-        (m = t.afterClose) == null || m.call(t), et([p, c], !1), l.clearOnOpenEventListeners();
+        (m = t.afterClose) == null || m.call(t), et([y, c], !1), l.clearOnOpenEventListeners();
       }
     }), a();
   }
-  function k() {
+  function O() {
     return o.isMounted;
   }
   function N() {
-    const d = I(c).y, g = window.innerHeight, h = c.clientHeight >= g ? g : c.clientHeight;
-    return d <= h;
+    const g = I(c).y, h = window.innerHeight, f = c.clientHeight >= h ? h : c.clientHeight;
+    return g <= f;
   }
   function X() {
     return !N();
   }
   function tt() {
-    const d = I(c).y, g = c.clientHeight, h = window.innerHeight;
-    if (d <= 5 && d >= -5)
+    const g = I(c).y, h = c.clientHeight, f = window.innerHeight;
+    if (g <= 5 && g >= -5)
       return R.CONTENT_HEIGHT;
-    const m = g - d;
-    if (m === h / 2)
+    const m = h - g;
+    if (m === f / 2)
       return R.MIDDLE;
-    const v = h - f.marginTop, A = 10;
+    const v = f - d.marginTop, A = 10;
     return m <= v + A && m >= v - A ? R.TOP : R.CLOSED;
   }
   function nt() {
     return c.clientHeight;
   }
-  function z(d) {
+  function z(g) {
     if (!N())
       return;
-    const g = I(c).y, m = c.clientHeight - g, v = window.innerHeight - d, A = xt(m, v), D = V(m, v);
+    const h = I(c).y, m = c.clientHeight - h, v = window.innerHeight - g, A = xt(m, v), D = W(m, v);
     o.translateContainer({
-      startY: g,
-      endY: g + (A.isUp ? -D : D),
+      startY: h,
+      endY: h + (A.isUp ? -D : D),
       animationFrame: u,
       bottomSheetContainer: c
     });
   }
-  function E(d, {
-    viewportHeight: g,
-    visibleHeight: h
+  function S(g, {
+    viewportHeight: h,
+    visibleHeight: f
   }) {
     let m = null;
-    for (const v of d) {
-      const A = v * g, D = V(
-        h,
+    for (const v of g) {
+      const A = v * h, D = W(
+        f,
         A
       );
       (m === null || D < m) && (m = D);
@@ -1144,25 +1167,25 @@ function cn(t) {
       minOffset: m
     };
   }
-  function S() {
-    const d = [...f.snapPoints].reverse(), g = I(c).y, h = c.clientHeight, m = h - g;
-    if (!f.expandable && m >= h)
+  function L() {
+    const g = [...d.snapPoints].reverse(), h = I(c).y, f = c.clientHeight, m = f - h;
+    if (!d.expandable && m >= f)
       return;
     const v = window.innerHeight, A = ft(
       "above",
       { visibleHeight: m, viewportHeight: v },
-      d
-    ), { minOffset: D } = E(A, {
+      g
+    ), { minOffset: D } = S(A, {
       visibleHeight: m,
       viewportHeight: v
     });
-    if (D === null && m < v - f.marginTop) {
+    if (D === null && m < v - d.marginTop) {
       o.translateContainer({
-        startY: g,
+        startY: h,
         endY: dt(
           v,
-          h,
-          f.marginTop,
+          f,
+          d.marginTop,
           "top"
         ),
         animationFrame: u,
@@ -1171,52 +1194,52 @@ function cn(t) {
       return;
     }
     Y(D) && o.translateContainer({
-      startY: g,
-      endY: g - D,
+      startY: h,
+      endY: h - D,
       animationFrame: u,
       bottomSheetContainer: c
     });
   }
-  function y() {
-    const d = I(c).y, h = c.clientHeight - d;
-    if (h < 1)
+  function p() {
+    const g = I(c).y, f = c.clientHeight - g;
+    if (f < 1)
       return;
     const m = window.innerHeight, v = ft(
       "below",
-      { visibleHeight: h, viewportHeight: m },
-      f.snapPoints
-    ), { minOffset: A } = E(v, {
-      visibleHeight: h,
+      { visibleHeight: f, viewportHeight: m },
+      d.snapPoints
+    ), { minOffset: A } = S(v, {
+      visibleHeight: f,
       viewportHeight: m
     });
     Y(A) && o.translateContainer({
-      startY: d,
-      endY: d + A,
+      startY: g,
+      endY: g + A,
       animationFrame: u,
       bottomSheetContainer: c
     });
   }
-  function P(d) {
-    const g = window.innerHeight;
-    if (!zt(d))
+  function F(g) {
+    const h = window.innerHeight;
+    if (!zt(g))
       return;
-    const h = J(g * d, 2);
-    z(h);
+    const f = J(h * g, 2);
+    z(f);
   }
   return {
-    props: f,
+    props: d,
     elements: b,
-    mount: T,
-    unmount: H,
-    open: L,
+    mount: C,
+    unmount: w,
+    open: k,
     close: B,
-    getIsMounted: k,
+    getIsMounted: O,
     getIsOpen: N,
     getIsClosed: X,
     getPosition: tt,
     getHeight: nt,
     moveTo: z,
-    snapTo: P
+    snapTo: F
   };
 }
 function ln() {
@@ -1256,9 +1279,9 @@ export {
   en as BOTTOM_SHEET_DEFAULT_PROPS,
   R as BOTTOM_SHEET_POSITION,
   sn as BOTTOM_SHEET_SELECTORS,
-  F as COMMON_ANIMATION_KEYS,
-  C as ClassNames,
-  _ as EventPhase,
+  P as COMMON_ANIMATION_KEYS,
+  T as ClassNames,
+  G as EventPhase,
   ot as ResetClassNames,
   K as UtilClassNames,
   cn as createBottomSheet,