@vrembem/drawer - npm Package Compare versions

Comparing version 4.0.0-next.3 to 4.0.0-next.4

./dist/index.js

@@ -1,57 +0,57 @@
-var S = (t, e, s) => {
-  if (!e.has(t))
-    throw TypeError("Cannot " + s);
+var I = (t, s, e) => {
+  if (!s.has(t))
+    throw TypeError("Cannot " + e);
 };
-var p = (t, e, s) => (S(t, e, "read from private field"), s ? s.call(t) : e.get(t)), E = (t, e, s) => {
-  if (e.has(t))
+var b = (t, s, e) => (I(t, s, "read from private field"), e ? e.call(t) : s.get(t)), $ = (t, s, e) => {
+  if (s.has(t))
     throw TypeError("Cannot add the same private member more than once");
-  e instanceof WeakSet ? e.add(t) : e.set(t, s);
-}, $ = (t, e, s, i) => (S(t, e, "write to private field"), i ? i.call(t, s) : e.set(t, s), s);
-var I = (t, e, s) => {
-  if (!e.has(t))
-    throw TypeError("Cannot " + s);
-}, l = (t, e, s) => (I(t, e, "read from private field"), s ? s.call(t) : e.get(t)), w = (t, e, s) => {
-  if (e.has(t))
+  s instanceof WeakSet ? s.add(t) : s.set(t, e);
+}, S = (t, s, e, i) => (I(t, s, "write to private field"), i ? i.call(t, e) : s.set(t, e), e);
+var O = (t, s, e) => {
+  if (!s.has(t))
+    throw TypeError("Cannot " + e);
+}, l = (t, s, e) => (O(t, s, "read from private field"), e ? e.call(t) : s.get(t)), w = (t, s, e) => {
+  if (s.has(t))
     throw TypeError("Cannot add the same private member more than once");
-  e instanceof WeakSet ? e.add(t) : e.set(t, s);
-}, h = (t, e, s, i) => (I(t, e, "write to private field"), i ? i.call(t, s) : e.set(t, s), s), c;
-class M {
-  constructor(e, s) {
-    w(this, c, void 0), this.value = e, h(this, c, s), this.mql = null;
+  s instanceof WeakSet ? s.add(t) : s.set(t, e);
+}, u = (t, s, e, i) => (O(t, s, "write to private field"), i ? i.call(t, e) : s.set(t, e), e), d;
+class P {
+  constructor(s, e) {
+    w(this, d, void 0), this.value = s, u(this, d, e), this.mql = null;
   }
   get handler() {
-    return l(this, c);
+    return l(this, d);
   }
   // Unmount existing handler before setting a new one.
-  set handler(e) {
-    this.mql && (typeof this.mql.removeEventListener == "function" ? this.mql.removeEventListener("change", l(this, c)) : this.mql.removeListener(l(this, c))), h(this, c, e);
+  set handler(s) {
+    this.mql && this.mql.removeEventListener("change", l(this, d)), u(this, d, s);
   }
-  mount(e, s) {
-    return e && (this.value = e), s && h(this, c, s), this.value ? (this.mql = window.matchMedia(`(min-width: ${this.value})`), typeof this.mql.addEventListener == "function" ? this.mql.addEventListener("change", l(this, c)) : this.mql.addListener(l(this, c)), l(this, c).call(this, this.mql), this) : this;
+  mount(s, e) {
+    return s && (this.value = s), e && u(this, d, e), this.value ? (this.mql = window.matchMedia(`(min-width: ${this.value})`), this.mql.addEventListener("change", l(this, d)), l(this, d).call(this, this.mql), this) : this;
   }
   unmount() {
-    return this.mql ? (typeof this.mql.removeEventListener == "function" ? this.mql.removeEventListener("change", l(this, c)) : this.mql.removeListener(l(this, c)), this.value = null, h(this, c, null), this.mql = null, this) : this;
+    return this.mql ? (this.mql.removeEventListener("change", l(this, d)), this.value = null, u(this, d, null), this.mql = null, this) : this;
   }
 }
-c = /* @__PURE__ */ new WeakMap();
-class P {
+d = /* @__PURE__ */ new WeakMap();
+class A {
   constructor() {
     this.collection = [];
   }
-  async register(e) {
-    return await this.deregister(e), this.collection.push(e), this.collection;
+  async register(s) {
+    return await this.deregister(s), this.collection.push(s), this.collection;
   }
-  async deregister(e) {
-    const s = this.collection.findIndex((i) => i === e);
-    if (s >= 0) {
-      const i = this.collection[s];
+  async deregister(s) {
+    const e = this.collection.findIndex((i) => i === s);
+    if (e >= 0) {
+      const i = this.collection[e];
       Object.getOwnPropertyNames(i).forEach((n) => {
         delete i[n];
-      }), this.collection.splice(s, 1);
+      }), this.collection.splice(e, 1);
     }
     return this.collection;
   }
-  async registerCollection(e) {
-    return await Promise.all(Array.from(e, (s) => {
-      this.register(s);
+  async registerCollection(s) {
+    return await Promise.all(Array.from(s, (e) => {
+      this.register(e);
     })), this.collection;
@@ -64,32 +64,32 @@ }
   }
-  get(e, s = "id") {
-    return this.collection.find((i) => i[s] === e);
+  get(s, e = "id") {
+    return this.collection.find((i) => i[e] === s);
   }
 }
-const r = {
+const o = {
   inert: ":not([inert]):not([inert] *)",
   negTabIndex: ':not([tabindex^="-"])',
   disabled: ":not(:disabled)"
-}, F = [
-  `a[href]${r.inert}${r.negTabIndex}`,
-  `area[href]${r.inert}${r.negTabIndex}`,
-  `input:not([type="hidden"]):not([type="radio"])${r.inert}${r.negTabIndex}${r.disabled}`,
-  `input[type="radio"]${r.inert}${r.negTabIndex}${r.disabled}`,
-  `select${r.inert}${r.negTabIndex}${r.disabled}`,
-  `textarea${r.inert}${r.negTabIndex}${r.disabled}`,
-  `button${r.inert}${r.negTabIndex}${r.disabled}`,
-  `details${r.inert} > summary:first-of-type${r.negTabIndex}`,
+}, B = [
+  `a[href]${o.inert}${o.negTabIndex}`,
+  `area[href]${o.inert}${o.negTabIndex}`,
+  `input:not([type="hidden"]):not([type="radio"])${o.inert}${o.negTabIndex}${o.disabled}`,
+  `input[type="radio"]${o.inert}${o.negTabIndex}${o.disabled}`,
+  `select${o.inert}${o.negTabIndex}${o.disabled}`,
+  `textarea${o.inert}${o.negTabIndex}${o.disabled}`,
+  `button${o.inert}${o.negTabIndex}${o.disabled}`,
+  `details${o.inert} > summary:first-of-type${o.negTabIndex}`,
   // Discard until Firefox supports `:has()`
   // See: https://github.com/KittyGiraudel/focusable-selectors/issues/12
   // `details:not(:has(> summary))${not.inert}${not.negTabIndex}`,
-  `iframe${r.inert}${r.negTabIndex}`,
-  `audio[controls]${r.inert}${r.negTabIndex}`,
-  `video[controls]${r.inert}${r.negTabIndex}`,
-  `[contenteditable]${r.inert}${r.negTabIndex}`,
-  `[tabindex]${r.inert}${r.negTabIndex}`
+  `iframe${o.inert}${o.negTabIndex}`,
+  `audio[controls]${o.inert}${o.negTabIndex}`,
+  `video[controls]${o.inert}${o.negTabIndex}`,
+  `[contenteditable]${o.inert}${o.negTabIndex}`,
+  `[tabindex]${o.inert}${o.negTabIndex}`
 ];
-var v, u, g;
-class B {
-  constructor(e = null, s = "[data-focus]") {
-    w(this, v, void 0), w(this, u, void 0), w(this, g, void 0), this.el = e, this.selectorFocus = s, h(this, u, _.bind(this)), h(this, g, N.bind(this));
+var v, g, f;
+class j {
+  constructor(s = null, e = "[data-focus]") {
+    w(this, v, void 0), w(this, g, void 0), w(this, f, void 0), this.el = s, this.selectorFocus = e, u(this, g, q.bind(this)), u(this, f, K.bind(this));
   }
@@ -99,4 +99,4 @@ get focusable() {
   }
-  set focusable(e) {
-    h(this, v, e), l(this, v).length ? (document.removeEventListener("keydown", l(this, g)), document.addEventListener("keydown", l(this, u))) : (document.removeEventListener("keydown", l(this, u)), document.addEventListener("keydown", l(this, g)));
+  set focusable(s) {
+    u(this, v, s), l(this, v).length ? (document.removeEventListener("keydown", l(this, f)), document.addEventListener("keydown", l(this, g))) : (document.removeEventListener("keydown", l(this, g)), document.addEventListener("keydown", l(this, f)));
   }
@@ -109,34 +109,44 @@ get focusableFirst() {
   }
-  mount(e, s) {
-    e && (this.el = e), s && (this.selectorFocus = s), this.focusable = this.getFocusable(), this.focus();
+  mount(s, e) {
+    s && (this.el = s), e && (this.selectorFocus = e), this.focusable = this.getFocusable(), this.focus();
   }
   unmount() {
-    this.el = null, this.focusable = [], document.removeEventListener("keydown", l(this, u)), document.removeEventListener("keydown", l(this, g));
+    this.el = null, this.focusable = [], document.removeEventListener("keydown", l(this, g)), document.removeEventListener("keydown", l(this, f));
   }
-  focus(e = this.el, s = this.selectorFocus) {
-    (e.querySelector(s) || e).focus();
+  focus(s = this.el, e = this.selectorFocus) {
+    (s.querySelector(e) || s).focus();
   }
-  getFocusable(e = this.el) {
-    const s = [], i = document.activeElement, n = e.scrollTop;
-    return e.querySelectorAll(F.join(",")).forEach((a) => {
-      a.focus(), document.activeElement === a && s.push(a);
-    }), e.scrollTop = n, i.focus(), s;
+  getFocusable(s = this.el) {
+    const e = [], i = document.activeElement, n = s.scrollTop;
+    return s.querySelectorAll(B.join(",")).forEach((c) => {
+      c.focus(), document.activeElement === c && e.push(c);
+    }), s.scrollTop = n, i.focus(), e;
   }
 }
-v = /* @__PURE__ */ new WeakMap(), u = /* @__PURE__ */ new WeakMap(), g = /* @__PURE__ */ new WeakMap();
-function _(t) {
+v = /* @__PURE__ */ new WeakMap(), g = /* @__PURE__ */ new WeakMap(), f = /* @__PURE__ */ new WeakMap();
+function q(t) {
   (t.key === "Tab" || t.keyCode === 9) && (t.shiftKey ? (document.activeElement === this.focusableFirst || document.activeElement === this.el) && (t.preventDefault(), this.focusableLast.focus()) : (document.activeElement === this.focusableLast || document.activeElement === this.el) && (t.preventDefault(), this.focusableFirst.focus()));
 }
-function N(t) {
+function K(t) {
   (t.key === "Tab" || t.keyCode === 9) && t.preventDefault();
 }
-function K(t, e) {
-  const s = (t.getAttribute(`data-${e}`) || "").replace(/'/g, '"');
-  return s ? JSON.parse(s) : {};
+function y() {
+  return getComputedStyle(document.body).getPropertyValue("--vrembem-prefix").trim();
 }
-function W() {
-  return getComputedStyle(document.body).getPropertyValue("--vrembem-variable-prefix").trim();
+function N(t, s = document.body, e = !0) {
+  if (e) {
+    const n = y();
+    n && !t.includes(`--${n}`) && (t = t.replace("--", `--${n}`));
+  }
+  const i = getComputedStyle(s).getPropertyValue(t).trim();
+  if (i)
+    return i;
+  throw new Error(`CSS variable "${t}" was not found!`);
 }
-function V(t, e = !0) {
-  const s = localStorage.getItem(t), i = s ? JSON.parse(s) : {};
+function V(t, s) {
+  const e = (t.getAttribute(`data-${s}`) || "").replace(/'/g, '"');
+  return e ? JSON.parse(e) : {};
+}
+function W(t, s = !0) {
+  const e = localStorage.getItem(t), i = e ? JSON.parse(e) : {};
   return {
@@ -146,30 +156,32 @@ get(n) {
     },
-    set(n, a) {
-      return a ? i[n] = a : delete i[n], e && localStorage.setItem(t, JSON.stringify(i)), i;
+    set(n, c) {
+      return c ? i[n] = c : delete i[n], s && localStorage.setItem(t, JSON.stringify(i)), i;
     }
   };
 }
-const J = (t, e) => new Promise((s) => {
-  e.transition ? (t.classList.remove(e.stateClosed), t.classList.add(e.stateOpening), t.addEventListener("transitionend", function i(n) {
-    n.target == t && (t.classList.add(e.stateOpened), t.classList.remove(e.stateOpening), s(t), this.removeEventListener("transitionend", i));
-  })) : (t.classList.add(e.stateOpened), t.classList.remove(e.stateClosed), s(t));
-}), z = (t, e) => new Promise((s) => {
-  e.transition ? (t.classList.add(e.stateClosing), t.classList.remove(e.stateOpened), t.addEventListener("transitionend", function i(n) {
-    n.target == t && (t.classList.remove(e.stateClosing), t.classList.add(e.stateClosed), s(t), this.removeEventListener("transitionend", i));
-  })) : (t.classList.add(e.stateClosed), t.classList.remove(e.stateOpened), s(t));
-});
-function G(t, e) {
-  e && document.querySelectorAll(e).forEach((s) => {
-    t ? s.style.overflow = "hidden" : s.style.removeProperty("overflow");
+function M(t, s, e, i = "--transition-duration") {
+  return new Promise((n) => {
+    if (typeof i == "string") {
+      const c = N(i, t), r = !!c.includes("ms");
+      i = parseFloat(c) * (r ? 1 : 1e3);
+    }
+    t.classList.remove(s.finish), t.classList.add(e.start), setTimeout(() => {
+      t.classList.add(e.finish), t.classList.remove(e.start), n(t);
+    }, i);
   });
 }
-function H(t, e) {
-  e && document.querySelectorAll(e).forEach((s) => {
-    t ? (s.inert = !0, s.setAttribute("aria-hidden", !0)) : (s.inert = null, s.removeAttribute("aria-hidden"));
+function _(t, s) {
+  s && document.querySelectorAll(s).forEach((e) => {
+    t ? e.style.overflow = "hidden" : e.style.removeProperty("overflow");
   });
 }
-function k(t, e) {
-  H(!!t, e.selectorInert), G(!!t, e.selectorOverflow);
+function J(t, s) {
+  s && document.querySelectorAll(s).forEach((e) => {
+    t ? (e.inert = !0, e.setAttribute("aria-hidden", !0)) : (e.inert = null, e.removeAttribute("aria-hidden"));
+  });
 }
-const Q = {
+function k(t, s) {
+  J(!!t, s.selectorInert), _(!!t, s.selectorOverflow);
+}
+const z = {
   autoInit: !1,
@@ -185,2 +197,3 @@ // Data attributes
   selectorDialog: ".drawer__dialog",
+  selectorScreen: ".drawer",
   selectorFocus: "[data-focus]",
@@ -203,6 +216,7 @@ selectorInert: null,
   setTabindex: !0,
-  transition: !0
+  transition: !0,
+  transitionDuration: "--vb-drawer-transition-duration"
 };
-function R(t) {
-  const e = t.target.closest(`
+async function G(t) {
+  const s = t.target.closest(`
     [data-${this.settings.dataOpen}],
@@ -212,16 +226,17 @@ [data-${this.settings.dataToggle}],
   `);
-  if (e) {
-    t.preventDefault(), e.matches(`[data-${this.settings.dataToggle}]`) && e.getAttribute(`data-${this.settings.dataToggle}`).trim().split(" ").forEach((i) => {
+  if (s) {
+    t.preventDefault(), s.matches(`[data-${this.settings.dataToggle}]`) && s.getAttribute(`data-${this.settings.dataToggle}`).trim().split(" ").forEach((i) => {
       const n = this.get(i);
-      n.trigger = e, n.toggle();
-    }), e.matches(`[data-${this.settings.dataOpen}]`) && e.getAttribute(`data-${this.settings.dataOpen}`).trim().split(" ").forEach((i) => {
+      return n.trigger = s, n.toggle();
+    }), s.matches(`[data-${this.settings.dataOpen}]`) && s.getAttribute(`data-${this.settings.dataOpen}`).trim().split(" ").forEach((i) => {
       const n = this.get(i);
-      n.trigger = e, n.open();
-    }), e.matches(`[data-${this.settings.dataClose}]`) && e.getAttribute(`data-${this.settings.dataClose}`).trim().split(" ").forEach((i) => {
+      return n.trigger = s, n.open();
+    }), s.matches(`[data-${this.settings.dataClose}]`) && s.getAttribute(`data-${this.settings.dataClose}`).trim().split(" ").forEach((i) => {
       if (i) {
         const n = this.get(i);
-        n.trigger = e, n.close();
+        return n.trigger = s, n.close();
       } else {
         const n = t.target.closest(this.settings.selectorDrawer);
-        n && this.close(n);
+        if (n)
+          return this.close(n);
       }
@@ -231,59 +246,60 @@ });
   }
-  t.target.matches(this.settings.selectorDrawer) && this.close(t.target.id);
+  if (this.activeModal && t.target.matches(this.settings.selectorScreen))
+    return this.close(this.activeModal.id);
 }
-function U(t) {
-  if (t.key === "Escape") {
-    const e = this.activeModal;
-    e && this.close(e);
-  }
+function H(t) {
+  if (t.key === "Escape" && this.activeModal)
+    return this.close(this.activeModal);
 }
-async function L(t, e = !0) {
-  if (!t)
-    return this.collection;
-  const s = this.collection.findIndex((i) => i.id === t.id);
-  if (s >= 0) {
-    const i = this.collection[s];
-    e && i.state === "opened" && await i.close(!1), this.store.set(i.id), i.unmountBreakpoint(), Object.getOwnPropertyNames(i).forEach((n) => {
+async function L(t, s = !0) {
+  const e = this.collection.findIndex((i) => i.id === t.id);
+  if (e >= 0) {
+    const i = this.collection[e];
+    s && i.state === "opened" && await i.close(!1), this.store.set(i.id), i.unmountBreakpoint(), Object.getOwnPropertyNames(i).forEach((n) => {
       delete i[n];
-    }), this.collection.splice(s, 1);
+    }), this.collection.splice(e, 1);
   }
   return this.collection;
 }
-function X(t) {
-  const e = W(), s = t.getAttribute(`data-${this.settings.dataBreakpoint}`);
-  return this.settings.breakpoints && this.settings.breakpoints[s] ? this.settings.breakpoints[s] : getComputedStyle(document.body).getPropertyValue(`--${e}breakpoint-${s}`).trim() ? getComputedStyle(document.body).getPropertyValue(`--${e}breakpoint-${s}`).trim() : s;
+function Q(t) {
+  t.store === "opened" ? t.open(!1, !1) : t.store === "closed" ? t.close(!1, !1) : t.store === "indeterminate" ? t.state = "indeterminate" : t.el.classList.contains(t.getSetting("stateOpened")) ? t.open(!1, !1) : t.el.classList.contains(t.getSetting("stateClosed")) ? t.close(!1, !1) : t.state = "indeterminate";
 }
-function y(t) {
-  const e = typeof t == "string" ? this.get(t) : this.get(t.id);
-  if (e)
-    return e;
-  throw new Error(`Drawer not found in collection with id of "${t.id || t}".`);
+async function R(t) {
+  t.store === "opened" ? await t.open(!1, !1) : t.store === "closed" ? await t.close(!1, !1) : t.store === "indeterminate" ? t.state != "indeterminate" && (t.state = "indeterminate") : (t.state != t.inlineState && (t.state = t.inlineState), t.inlineState === "opened" ? await t.open(!1, !1) : t.inlineState === "closed" && await t.close(!1, !1));
 }
-function O(t) {
-  return typeof t == "string" ? t : typeof t.hasAttribute == "function" ? t.hasAttribute(`data-${this.settings.dataOpen}`) ? t.getAttribute(`data-${this.settings.dataOpen}`) : t.hasAttribute(`data-${this.settings.dataClose}`) ? t.getAttribute(`data-${this.settings.dataClose}`) || !1 : t.hasAttribute(`data-${this.settings.dataToggle}`) ? t.getAttribute(`data-${this.settings.dataToggle}`) : t.closest(this.settings.selectorDrawer) ? (t = t.closest(this.settings.selectorDrawer), t.id || !1) : !1 : t.id ? t.id : !1;
+function U(t) {
+  const s = y(), e = t.getAttribute(`data-${this.settings.dataBreakpoint}`);
+  return this.settings.breakpoints && this.settings.breakpoints[e] ? this.settings.breakpoints[e] : getComputedStyle(document.body).getPropertyValue(`--${s}breakpoint-${e}`).trim() ? getComputedStyle(document.body).getPropertyValue(`--${s}breakpoint-${e}`).trim() : e;
 }
-function Y(t) {
-  const e = O.call(this, t);
-  if (e) {
-    const s = document.querySelector(`#${e}`), i = s ? s.querySelector(this.settings.selectorDialog) : null;
-    return !s && !i ? { error: new Error(`No drawer elements found using the ID: "${e}".`) } : i ? { drawer: s, dialog: i } : { error: new Error("Drawer is missing dialog element.") };
-  } else
-    return { error: new Error("Could not resolve the drawer ID.") };
+function C(t) {
+  const s = typeof t == "string" ? this.get(t) : this.get(t.id);
+  if (s)
+    return s;
+  throw new Error(`Drawer not found in collection with id of "${t.id || t}".`);
 }
-async function A(t) {
-  this.store.get(t.id) ? this.store.get(t.id) === "opened" ? await t.open(!1, !1) : await t.close(!1, !1) : t.el.classList.contains(this.settings.stateOpened) ? t.state = "opened" : (t.el.classList.remove(this.settings.stateOpening), t.el.classList.remove(this.settings.stateClosing), t.el.classList.add(this.settings.stateClosed));
-}
 function D(t) {
   t.state === "opened" ? t.mode === "modal" ? this.focusTrap.mount(t.dialog, this.settings.selectorFocus) : this.focusTrap.focus(t.dialog, this.settings.selectorFocus) : (t.trigger && (t.trigger.focus(), t.trigger = null), this.focusTrap.unmount());
 }
-async function C(t, e, s = !0) {
-  const i = y.call(this, t), n = { ...this.settings, ...i.settings };
-  return e !== void 0 && (n.transition = e), i.state === "closed" && (i.state = "opening", await J(i.el, n), i.mode === "modal" && k(!0, n), i.state = "opened"), s && D.call(this, i), i.el.dispatchEvent(new CustomEvent(n.customEventPrefix + "opened", {
+async function x(t, s, e = !0) {
+  const i = C.call(this, t), n = { ...this.settings, ...i.settings };
+  return s !== void 0 && (n.transition = s), (i.state === "closed" || i.state === "indeterminate") && (i.state = "opening", n.transition ? await M(i.el, {
+    start: n.stateClosing,
+    finish: n.stateClosed
+  }, {
+    start: n.stateOpening,
+    finish: n.stateOpened
+  }, n.transitionDuration) : (i.el.classList.add(n.stateOpened), i.el.classList.remove(n.stateClosed)), i.state = "opened", i.mode === "modal" && k(!0, n), e && D.call(this, i), i.el.dispatchEvent(new CustomEvent(n.customEventPrefix + "opened", {
     detail: this,
     bubbles: !0
-  })), i;
+  }))), i;
 }
-async function b(t, e, s = !0) {
-  const i = y.call(this, t), n = { ...this.settings, ...i.settings };
-  return e !== void 0 && (n.transition = e), i.state === "opened" && (i.state = "closing", document.activeElement.blur(), await z(i.el, n), i.mode === "modal" && k(!1, n), s && D.call(this, i), i.state = "closed", i.el.dispatchEvent(new CustomEvent(n.customEventPrefix + "closed", {
+async function E(t, s, e = !0) {
+  const i = C.call(this, t), n = { ...this.settings, ...i.settings };
+  return s !== void 0 && (n.transition = s), (i.state === "opened" || i.state === "indeterminate") && (i.state = "closing", document.activeElement.blur(), n.transition ? await M(i.el, {
+    start: n.stateOpening,
+    finish: n.stateOpened
+  }, {
+    start: n.stateClosing,
+    finish: n.stateClosed
+  }, n.transitionDuration) : (i.el.classList.add(n.stateClosed), i.el.classList.remove(n.stateOpened)), i.state = "closed", i.mode === "modal" && k(!1, n), e && D.call(this, i), i.el.dispatchEvent(new CustomEvent(n.customEventPrefix + "closed", {
     detail: this,
@@ -293,12 +309,12 @@ bubbles: !0
 }
-async function q(t, e, s) {
-  const i = y.call(this, t);
-  return i.state === "closed" ? C.call(this, i, e, s) : b.call(this, i, e, s);
+async function F(t, s, e) {
+  const i = C.call(this, t);
+  return i.state === "closed" ? x.call(this, i, s, e) : E.call(this, i, s, e);
 }
-function Z(t) {
+function X(t) {
   switch (t.mode) {
     case "inline":
-      return j.call(this, t);
+      return Y.call(this, t);
     case "modal":
-      return tt.call(this, t);
+      return Z.call(this, t);
     default:
@@ -308,4 +324,4 @@ throw new Error(`"${t.mode}" is not a valid drawer mode.`);
 }
-async function j(t) {
-  return t.el.classList.remove(t.getSetting("classModal")), t.dialog.removeAttribute("aria-modal"), k(!1, { ...this.settings, ...t.settings }), this.focusTrap.unmount(), await A.call(this, t), t.el.dispatchEvent(new CustomEvent(t.getSetting("customEventPrefix") + "switchMode", {
+async function Y(t) {
+  return t.el.classList.remove(t.getSetting("classModal")), t.dialog.removeAttribute("aria-modal"), k(!1, { ...this.settings, ...t.settings }), this.focusTrap.unmount(), await R(t), t.el.dispatchEvent(new CustomEvent(t.getSetting("customEventPrefix") + "switchMode", {
     detail: this,
@@ -315,4 +331,4 @@ bubbles: !0
 }
-async function tt(t) {
-  return t.el.classList.add(t.getSetting("classModal")), t.dialog.setAttribute("aria-modal", "true"), !this.store.get(t.id) && t.el.classList.contains(t.getSetting("stateOpened")) && this.store.set(t.id, "opened"), await b.call(this, t, !1, !1), t.el.dispatchEvent(new CustomEvent(t.getSetting("customEventPrefix") + "switchMode", {
+async function Z(t) {
+  return t.el.classList.add(t.getSetting("classModal")), t.dialog.setAttribute("aria-modal", "true"), await E.call(this, t, !1, !1), t.el.dispatchEvent(new CustomEvent(t.getSetting("customEventPrefix") + "switchMode", {
     detail: this,
@@ -322,20 +338,46 @@ bubbles: !0
 }
-async function et(t, e) {
+async function tt(t, s = {}) {
   await L.call(this, t, !1);
-  const s = this, i = new M(), n = {
-    open(o, d) {
-      return C.call(s, this, o, d);
+  const e = this, i = new P();
+  let n, c = "indeterminate";
+  const r = {
+    id: t.id,
+    el: t,
+    dialog: null,
+    trigger: null,
+    settings: { ...V(t, this.settings.dataConfig), ...s },
+    inlineState: "indeterminate",
+    get breakpoint() {
+      return U.call(e, t);
     },
-    close(o, d) {
-      return b.call(s, this, o, d);
+    get store() {
+      return e.store.get(this.id);
     },
-    toggle(o, d) {
-      return q.call(s, this, o, d);
+    get mode() {
+      return n;
     },
+    set mode(a) {
+      n = a, X.call(e, this);
+    },
+    get state() {
+      return c;
+    },
+    set state(a) {
+      c = a, this.mode === "inline" && a != "opening" && a != "closing" && (this.inlineState = a, this.getSetting("store") && e.store.set(this.id, a)), a === "indeterminate" && (this.el.classList.remove(this.getSetting("stateOpened")), this.el.classList.remove(this.getSetting("stateOpening")), this.el.classList.remove(this.getSetting("stateClosed")), this.el.classList.remove(this.getSetting("stateClosing")));
+    },
+    open(a, h) {
+      return x.call(e, this, a, h);
+    },
+    close(a, h) {
+      return E.call(e, this, a, h);
+    },
+    toggle(a, h) {
+      return F.call(e, this, a, h);
+    },
     deregister() {
-      return L.call(s, this);
+      return L.call(e, this);
     },
     mountBreakpoint() {
-      const o = this.breakpoint, d = this.handleBreakpoint.bind(this);
-      return i.mount(o, d), this;
+      const a = this.breakpoint, h = this.handleBreakpoint.bind(this);
+      return i.mount(a, h), this;
     },
@@ -345,47 +387,27 @@ unmountBreakpoint() {
     },
-    handleBreakpoint(o) {
-      return this.mode = o.matches ? "inline" : "modal", this;
+    handleBreakpoint(a) {
+      const h = a.matches ? "inline" : "modal";
+      return this.mode != h && (this.mode = h), this;
     },
-    getSetting(o) {
-      return o in this.settings ? this.settings[o] : s.settings[o];
+    getSetting(a) {
+      return a in this.settings ? this.settings[a] : e.settings[a];
     }
-  }, a = {
-    id: t.id,
-    el: t,
-    dialog: e,
-    trigger: null,
-    settings: K(t, this.settings.dataConfig),
-    get breakpoint() {
-      return X.call(s, t);
-    },
-    get state() {
-      return T;
-    },
-    set state(o) {
-      T = o, (o === "opened" || o === "closed") && this.mode === "inline" && s.store.set(this.id, this.state);
-    },
-    get mode() {
-      return x;
-    },
-    set mode(o) {
-      x = o, Z.call(s, this);
-    },
-    ...n
   };
-  let T = t.classList.contains(a.getSetting("stateOpened")) ? "opened" : "closed", x = t.classList.contains(a.getSetting("classModal")) ? "modal" : "inline";
-  return a.mode === "modal" ? a.dialog.setAttribute("aria-modal", "true") : a.dialog.removeAttribute("aria-modal"), a.getSetting("setTabindex") && a.dialog.setAttribute("tabindex", "-1"), this.collection.push(a), a.breakpoint ? a.mountBreakpoint() : await A.call(this, a), a;
+  this.collection.push(r);
+  const T = t.querySelector(r.getSetting("selectorDialog"));
+  return r.dialog = T || t, r.getSetting("setTabindex") && r.dialog.setAttribute("tabindex", "-1"), await Q(r), r.inlineState = r.state, r.mode = t.classList.contains(r.getSetting("classModal")) ? "modal" : "inline", r.breakpoint && r.mountBreakpoint(), r;
 }
-var f, m;
-class it extends P {
-  constructor(s) {
+var m, p;
+class st extends A {
+  constructor(e) {
     super();
-    E(this, f, void 0);
-    E(this, m, void 0);
-    this.defaults = Q, this.settings = { ...this.defaults, ...s }, this.focusTrap = new B(), this.store = V(this.settings.storeKey, this.settings.store), $(this, f, R.bind(this)), $(this, m, U.bind(this)), this.settings.autoInit && this.init();
+    $(this, m, void 0);
+    $(this, p, void 0);
+    this.defaults = z, this.settings = { ...this.defaults, ...e }, this.focusTrap = new j(), this.store = W(this.settings.storeKey, this.settings.store), S(this, m, G.bind(this)), S(this, p, H.bind(this)), this.settings.autoInit && this.init();
   }
   get activeModal() {
-    return this.collection.find((s) => s.state === "opened" && s.mode === "modal");
+    return this.collection.find((e) => e.state === "opened" && e.mode === "modal");
   }
-  async init(s = null) {
-    s && (this.settings = { ...this.settings, ...s });
+  async init(e = null) {
+    e && (this.settings = { ...this.settings, ...e });
     const i = document.querySelectorAll(this.settings.selectorDrawer);
@@ -398,29 +420,29 @@ return await this.registerCollection(i), this.settings.eventListeners && this.initEventListeners(), this;
   initEventListeners() {
-    document.addEventListener("click", p(this, f), !1), document.addEventListener("keydown", p(this, m), !1);
+    document.addEventListener("click", b(this, m), !1), document.addEventListener("keydown", b(this, p), !1);
   }
   destroyEventListeners() {
-    document.removeEventListener("click", p(this, f), !1), document.removeEventListener("keydown", p(this, m), !1);
+    document.removeEventListener("click", b(this, m), !1), document.removeEventListener("keydown", b(this, p), !1);
   }
-  register(s) {
-    const i = Y.call(this, s);
-    return i.error ? Promise.reject(i.error) : et.call(this, i.drawer, i.dialog);
+  register(e, i = {}) {
+    let n = typeof e == "string" ? document.getElementById(e) : e;
+    return n ? tt.call(this, n, i) : Promise.reject(new Error(`Failed to register; drawer not found with ID of: "${e.id || e}".`));
   }
-  deregister(s) {
-    const i = this.get(O.call(this, s));
-    return L.call(this, i);
+  deregister(e) {
+    let i = this.get(e.id || e);
+    return i ? L.call(this, i) : Promise.reject(new Error(`Failed to deregister; drawer does not exist in collection with ID of: "${e.id || e}".`));
   }
-  open(s, i, n) {
-    return C.call(this, s, i, n);
+  open(e, i, n) {
+    return x.call(this, e, i, n);
   }
-  close(s, i, n) {
-    return b.call(this, s, i, n);
+  close(e, i, n) {
+    return E.call(this, e, i, n);
   }
-  toggle(s, i, n) {
-    return q.call(this, s, i, n);
+  toggle(e, i, n) {
+    return F.call(this, e, i, n);
   }
 }
-f = new WeakMap(), m = new WeakMap();
+m = new WeakMap(), p = new WeakMap();
 export {
-  it as default
+  st as default
 };
 //# sourceMappingURL=index.js.map

dev/index.js

@@ -24,29 +24,29 @@ var __accessCheck = (obj, member, msg) => {
 };
-var o = (t, e, n) => (b(t, e, "read from private field"), n ? n.call(t) : e.get(t)), h = (t, e, n) => {
+var r = (t, e, n) => (b(t, e, "read from private field"), n ? n.call(t) : e.get(t)), m = (t, e, n) => {
   if (e.has(t))
     throw TypeError("Cannot add the same private member more than once");
   e instanceof WeakSet ? e.add(t) : e.set(t, n);
-}, a = (t, e, n, i) => (b(t, e, "write to private field"), i ? i.call(t, n) : e.set(t, n), n);
+}, a = (t, e, n, s) => (b(t, e, "write to private field"), s ? s.call(t, n) : e.set(t, n), n);
 var l;
-class $ {
+class I {
   constructor(e, n) {
-    h(this, l, void 0);
+    m(this, l, void 0);
     this.value = e, a(this, l, n), this.mql = null;
   }
   get handler() {
-    return o(this, l);
+    return r(this, l);
   }
   // Unmount existing handler before setting a new one.
   set handler(e) {
-    this.mql && (typeof this.mql.removeEventListener == "function" ? this.mql.removeEventListener("change", o(this, l)) : this.mql.removeListener(o(this, l))), a(this, l, e);
+    this.mql && this.mql.removeEventListener("change", r(this, l)), a(this, l, e);
   }
   mount(e, n) {
-    return e && (this.value = e), n && a(this, l, n), this.value ? (this.mql = window.matchMedia(`(min-width: ${this.value})`), typeof this.mql.addEventListener == "function" ? this.mql.addEventListener("change", o(this, l)) : this.mql.addListener(o(this, l)), o(this, l).call(this, this.mql), this) : this;
+    return e && (this.value = e), n && a(this, l, n), this.value ? (this.mql = window.matchMedia(`(min-width: ${this.value})`), this.mql.addEventListener("change", r(this, l)), r(this, l).call(this, this.mql), this) : this;
   }
   unmount() {
-    return this.mql ? (typeof this.mql.removeEventListener == "function" ? this.mql.removeEventListener("change", o(this, l)) : this.mql.removeListener(o(this, l)), this.value = null, a(this, l, null), this.mql = null, this) : this;
+    return this.mql ? (this.mql.removeEventListener("change", r(this, l)), this.value = null, a(this, l, null), this.mql = null, this) : this;
   }
 }
 l = /* @__PURE__ */ new WeakMap();
-class T {
+class L {
   constructor() {
@@ -59,7 +59,7 @@ this.collection = [];
   async deregister(e) {
-    const n = this.collection.findIndex((i) => i === e);
+    const n = this.collection.findIndex((s) => s === e);
     if (n >= 0) {
-      const i = this.collection[n];
-      Object.getOwnPropertyNames(i).forEach((r) => {
-        delete i[r];
+      const s = this.collection[n];
+      Object.getOwnPropertyNames(s).forEach((o) => {
+        delete s[o];
       }), this.collection.splice(n, 1);
@@ -80,40 +80,40 @@ }
   get(e, n = "id") {
-    return this.collection.find((i) => i[n] === e);
+    return this.collection.find((s) => s[n] === e);
   }
 }
-const s = {
+const i = {
   inert: ":not([inert]):not([inert] *)",
   negTabIndex: ':not([tabindex^="-"])',
   disabled: ":not(:disabled)"
-}, v = [
-  `a[href]${s.inert}${s.negTabIndex}`,
-  `area[href]${s.inert}${s.negTabIndex}`,
-  `input:not([type="hidden"]):not([type="radio"])${s.inert}${s.negTabIndex}${s.disabled}`,
-  `input[type="radio"]${s.inert}${s.negTabIndex}${s.disabled}`,
-  `select${s.inert}${s.negTabIndex}${s.disabled}`,
-  `textarea${s.inert}${s.negTabIndex}${s.disabled}`,
-  `button${s.inert}${s.negTabIndex}${s.disabled}`,
-  `details${s.inert} > summary:first-of-type${s.negTabIndex}`,
+}, g = [
+  `a[href]${i.inert}${i.negTabIndex}`,
+  `area[href]${i.inert}${i.negTabIndex}`,
+  `input:not([type="hidden"]):not([type="radio"])${i.inert}${i.negTabIndex}${i.disabled}`,
+  `input[type="radio"]${i.inert}${i.negTabIndex}${i.disabled}`,
+  `select${i.inert}${i.negTabIndex}${i.disabled}`,
+  `textarea${i.inert}${i.negTabIndex}${i.disabled}`,
+  `button${i.inert}${i.negTabIndex}${i.disabled}`,
+  `details${i.inert} > summary:first-of-type${i.negTabIndex}`,
   // Discard until Firefox supports `:has()`
   // See: https://github.com/KittyGiraudel/focusable-selectors/issues/12
   // `details:not(:has(> summary))${not.inert}${not.negTabIndex}`,
-  `iframe${s.inert}${s.negTabIndex}`,
-  `audio[controls]${s.inert}${s.negTabIndex}`,
-  `video[controls]${s.inert}${s.negTabIndex}`,
-  `[contenteditable]${s.inert}${s.negTabIndex}`,
-  `[tabindex]${s.inert}${s.negTabIndex}`
+  `iframe${i.inert}${i.negTabIndex}`,
+  `audio[controls]${i.inert}${i.negTabIndex}`,
+  `video[controls]${i.inert}${i.negTabIndex}`,
+  `[contenteditable]${i.inert}${i.negTabIndex}`,
+  `[tabindex]${i.inert}${i.negTabIndex}`
 ];
-var f, d, u;
-class x {
+var f, u, d;
+class S {
   constructor(e = null, n = "[data-focus]") {
-    h(this, f, void 0);
-    h(this, d, void 0);
-    h(this, u, void 0);
-    this.el = e, this.selectorFocus = n, a(this, d, g.bind(this)), a(this, u, p.bind(this));
+    m(this, f, void 0);
+    m(this, u, void 0);
+    m(this, d, void 0);
+    this.el = e, this.selectorFocus = n, a(this, u, $.bind(this)), a(this, d, y.bind(this));
   }
   get focusable() {
-    return o(this, f);
+    return r(this, f);
   }
   set focusable(e) {
-    a(this, f, e), o(this, f).length ? (document.removeEventListener("keydown", o(this, u)), document.addEventListener("keydown", o(this, d))) : (document.removeEventListener("keydown", o(this, d)), document.addEventListener("keydown", o(this, u)));
+    a(this, f, e), r(this, f).length ? (document.removeEventListener("keydown", r(this, d)), document.addEventListener("keydown", r(this, u))) : (document.removeEventListener("keydown", r(this, u)), document.addEventListener("keydown", r(this, d)));
   }
@@ -130,3 +130,3 @@ get focusableFirst() {
   unmount() {
-    this.el = null, this.focusable = [], document.removeEventListener("keydown", o(this, d)), document.removeEventListener("keydown", o(this, u));
+    this.el = null, this.focusable = [], document.removeEventListener("keydown", r(this, u)), document.removeEventListener("keydown", r(this, d));
   }
@@ -137,55 +137,67 @@ focus(e = this.el, n = this.selectorFocus) {
   getFocusable(e = this.el) {
-    const n = [], i = document.activeElement, r = e.scrollTop;
-    return e.querySelectorAll(v.join(",")).forEach((m) => {
-      m.focus(), document.activeElement === m && n.push(m);
-    }), e.scrollTop = r, i.focus(), n;
+    const n = [], s = document.activeElement, o = e.scrollTop;
+    return e.querySelectorAll(g.join(",")).forEach((h) => {
+      h.focus(), document.activeElement === h && n.push(h);
+    }), e.scrollTop = o, s.focus(), n;
   }
 }
-f = /* @__PURE__ */ new WeakMap(), d = /* @__PURE__ */ new WeakMap(), u = /* @__PURE__ */ new WeakMap();
-function g(t) {
+f = /* @__PURE__ */ new WeakMap(), u = /* @__PURE__ */ new WeakMap(), d = /* @__PURE__ */ new WeakMap();
+function $(t) {
   (t.key === "Tab" || t.keyCode === 9) && (t.shiftKey ? (document.activeElement === this.focusableFirst || document.activeElement === this.el) && (t.preventDefault(), this.focusableLast.focus()) : (document.activeElement === this.focusableLast || document.activeElement === this.el) && (t.preventDefault(), this.focusableFirst.focus()));
 }
-function p(t) {
+function y(t) {
   (t.key === "Tab" || t.keyCode === 9) && t.preventDefault();
 }
+function v() {
+  return getComputedStyle(document.body).getPropertyValue("--vrembem-prefix").trim();
+}
+function T(t, e = document.body, n = true) {
+  if (n) {
+    const o = v();
+    o && !t.includes(`--${o}`) && (t = t.replace("--", `--${o}`));
+  }
+  const s = getComputedStyle(e).getPropertyValue(t).trim();
+  if (s)
+    return s;
+  throw new Error(`CSS variable "${t}" was not found!`);
+}
 function q(t, e) {
-  const i = (t.getAttribute(`data-${e}`) || "").replace(/'/g, '"');
-  return i ? JSON.parse(i) : {};
+  const s = (t.getAttribute(`data-${e}`) || "").replace(/'/g, '"');
+  return s ? JSON.parse(s) : {};
 }
-function I() {
-  return getComputedStyle(document.body).getPropertyValue("--vrembem-variable-prefix").trim();
-}
-function C(t, e = true) {
-  const n = localStorage.getItem(t), i = n ? JSON.parse(n) : {};
+function F(t, e = true) {
+  const n = localStorage.getItem(t), s = n ? JSON.parse(n) : {};
   return {
-    get(r) {
-      return r ? i[r] : i;
+    get(o) {
+      return o ? s[o] : s;
     },
-    set(r, c) {
-      return c ? i[r] = c : delete i[r], e && localStorage.setItem(t, JSON.stringify(i)), i;
+    set(o, c) {
+      return c ? s[o] = c : delete s[o], e && localStorage.setItem(t, JSON.stringify(s)), s;
     }
   };
 }
-const S = (t, e) => new Promise((n) => {
-  e.transition ? (t.classList.remove(e.stateClosed), t.classList.add(e.stateOpening), t.addEventListener("transitionend", function i(r) {
-    r.target == t && (t.classList.add(e.stateOpened), t.classList.remove(e.stateOpening), n(t), this.removeEventListener("transitionend", i));
-  })) : (t.classList.add(e.stateOpened), t.classList.remove(e.stateClosed), n(t));
-}), F = (t, e) => new Promise((n) => {
-  e.transition ? (t.classList.add(e.stateClosing), t.classList.remove(e.stateOpened), t.addEventListener("transitionend", function i(r) {
-    r.target == t && (t.classList.remove(e.stateClosing), t.classList.add(e.stateClosed), n(t), this.removeEventListener("transitionend", i));
-  })) : (t.classList.add(e.stateClosed), t.classList.remove(e.stateOpened), n(t));
-});
-function y(t, e) {
-  e && document.querySelectorAll(e).forEach((i) => {
-    t ? i.style.overflow = "hidden" : i.style.removeProperty("overflow");
+function w(t, e, n, s = "--transition-duration") {
+  return new Promise((o) => {
+    if (typeof s == "string") {
+      const c = T(s, t), h = !!c.includes("ms");
+      s = parseFloat(c) * (h ? 1 : 1e3);
+    }
+    t.classList.remove(e.finish), t.classList.add(n.start), setTimeout(() => {
+      t.classList.add(n.finish), t.classList.remove(n.start), o(t);
+    }, s);
   });
 }
-function L(t, e) {
-  e && document.querySelectorAll(e).forEach((i) => {
-    t ? (i.inert = true, i.setAttribute("aria-hidden", true)) : (i.inert = null, i.removeAttribute("aria-hidden"));
+function p(t, e) {
+  e && document.querySelectorAll(e).forEach((s) => {
+    t ? s.style.overflow = "hidden" : s.style.removeProperty("overflow");
   });
 }
-function k(t, e) {
-  L(!!t, e.selectorInert), y(!!t, e.selectorOverflow);
+function E(t, e) {
+  e && document.querySelectorAll(e).forEach((s) => {
+    t ? (s.inert = true, s.setAttribute("aria-hidden", true)) : (s.inert = null, s.removeAttribute("aria-hidden"));
+  });
 }
+function C(t, e) {
+  E(!!t, e.selectorInert), p(!!t, e.selectorOverflow);
+}
 const defaults = {
@@ -202,2 +214,3 @@ autoInit: false,
   selectorDialog: ".drawer__dialog",
+  selectorScreen: ".drawer",
   selectorFocus: "[data-focus]",
@@ -220,5 +233,6 @@ selectorInert: null,
   setTabindex: true,
-  transition: true
+  transition: true,
+  transitionDuration: "--vb-drawer-transition-duration"
 };
-function handleClick(event) {
+async function handleClick(event) {
   const trigger = event.target.closest(`
@@ -236,3 +250,3 @@ [data-${this.settings.dataOpen}],
         entry.trigger = trigger;
-        entry.toggle();
+        return entry.toggle();
       });
@@ -245,3 +259,3 @@ }
         entry.trigger = trigger;
-        entry.open();
+        return entry.open();
       });
@@ -255,7 +269,7 @@ }
           entry.trigger = trigger;
-          entry.close();
+          return entry.close();
         } else {
           const parent = event.target.closest(this.settings.selectorDrawer);
           if (parent)
-            this.close(parent);
+            return this.close(parent);
         }
@@ -266,4 +280,4 @@ });
   }
-  if (event.target.matches(this.settings.selectorDrawer)) {
-    this.close(event.target.id);
+  if (this.activeModal && event.target.matches(this.settings.selectorScreen)) {
+    return this.close(this.activeModal.id);
   }
@@ -273,10 +287,7 @@ }
   if (event.key === "Escape") {
-    const modal = this.activeModal;
-    if (modal)
-      this.close(modal);
+    if (this.activeModal)
+      return this.close(this.activeModal);
   }
 }
 async function deregister(obj, close2 = true) {
-  if (!obj)
-    return this.collection;
   const index = this.collection.findIndex((entry) => {
@@ -299,4 +310,41 @@ return entry.id === obj.id;
 }
+function applyInitialState(entry) {
+  if (entry.store === "opened") {
+    entry.open(false, false);
+  } else if (entry.store === "closed") {
+    entry.close(false, false);
+  } else if (entry.store === "indeterminate") {
+    entry.state = "indeterminate";
+  } else {
+    if (entry.el.classList.contains(entry.getSetting("stateOpened"))) {
+      entry.open(false, false);
+    } else if (entry.el.classList.contains(entry.getSetting("stateClosed"))) {
+      entry.close(false, false);
+    } else {
+      entry.state = "indeterminate";
+    }
+  }
+}
+async function applyInlineState(entry) {
+  if (entry.store === "opened") {
+    await entry.open(false, false);
+  } else if (entry.store === "closed") {
+    await entry.close(false, false);
+  } else if (entry.store === "indeterminate") {
+    if (entry.state != "indeterminate") {
+      entry.state = "indeterminate";
+    }
+  } else {
+    if (entry.state != entry.inlineState) {
+      entry.state = entry.inlineState;
+    }
+    if (entry.inlineState === "opened") {
+      await entry.open(false, false);
+    } else if (entry.inlineState === "closed") {
+      await entry.close(false, false);
+    }
+  }
+}
 function getBreakpoint(drawer) {
-  const prefix = I();
+  const prefix = v();
   const bp = drawer.getAttribute(`data-${this.settings.dataBreakpoint}`);
@@ -319,53 +367,2 @@ if (this.settings.breakpoints && this.settings.breakpoints[bp]) {
 }
-function getDrawerID(obj) {
-  if (typeof obj === "string") {
-    return obj;
-  } else if (typeof obj.hasAttribute === "function") {
-    if (obj.hasAttribute(`data-${this.settings.dataOpen}`)) {
-      return obj.getAttribute(`data-${this.settings.dataOpen}`);
-    } else if (obj.hasAttribute(`data-${this.settings.dataClose}`)) {
-      return obj.getAttribute(`data-${this.settings.dataClose}`) || false;
-    } else if (obj.hasAttribute(`data-${this.settings.dataToggle}`)) {
-      return obj.getAttribute(`data-${this.settings.dataToggle}`);
-    } else if (obj.closest(this.settings.selectorDrawer)) {
-      obj = obj.closest(this.settings.selectorDrawer);
-      return obj.id || false;
-    } else
-      return false;
-  } else if (obj.id) {
-    return obj.id;
-  } else
-    return false;
-}
-function getDrawerElements(query) {
-  const id = getDrawerID.call(this, query);
-  if (id) {
-    const drawer = document.querySelector(`#${id}`);
-    const dialog = drawer ? drawer.querySelector(this.settings.selectorDialog) : null;
-    if (!drawer && !dialog) {
-      return { error: new Error(`No drawer elements found using the ID: "${id}".`) };
-    } else if (!dialog) {
-      return { error: new Error("Drawer is missing dialog element.") };
-    } else {
-      return { drawer, dialog };
-    }
-  } else {
-    return { error: new Error("Could not resolve the drawer ID.") };
-  }
-}
-async function initialState(entry) {
-  if (this.store.get(entry.id)) {
-    if (this.store.get(entry.id) === "opened") {
-      await entry.open(false, false);
-    } else {
-      await entry.close(false, false);
-    }
-  } else if (entry.el.classList.contains(this.settings.stateOpened)) {
-    entry.state = "opened";
-  } else {
-    entry.el.classList.remove(this.settings.stateOpening);
-    entry.el.classList.remove(this.settings.stateClosing);
-    entry.el.classList.add(this.settings.stateClosed);
-  }
-}
 function updateFocusState(entry) {
@@ -386,39 +383,61 @@ if (entry.state === "opened") {
 }
-async function open(query, transition, focus = true) {
-  const drawer = getDrawer.call(this, query);
-  const config = { ...this.settings, ...drawer.settings };
-  if (transition !== void 0)
-    config.transition = transition;
-  if (drawer.state === "closed") {
-    drawer.state = "opening";
-    await S(drawer.el, config);
-    if (drawer.mode === "modal")
-      k(true, config);
-    drawer.state = "opened";
+async function open(query, enableTransition, focus = true) {
+  const entry = getDrawer.call(this, query);
+  const config = { ...this.settings, ...entry.settings };
+  if (enableTransition !== void 0)
+    config.transition = enableTransition;
+  if (entry.state === "closed" || entry.state === "indeterminate") {
+    entry.state = "opening";
+    if (config.transition) {
+      await w(entry.el, {
+        start: config.stateClosing,
+        finish: config.stateClosed
+      }, {
+        start: config.stateOpening,
+        finish: config.stateOpened
+      }, config.transitionDuration);
+    } else {
+      entry.el.classList.add(config.stateOpened);
+      entry.el.classList.remove(config.stateClosed);
+    }
+    entry.state = "opened";
+    if (entry.mode === "modal")
+      C(true, config);
+    if (focus) {
+      updateFocusState.call(this, entry);
+    }
+    entry.el.dispatchEvent(new CustomEvent(config.customEventPrefix + "opened", {
+      detail: this,
+      bubbles: true
+    }));
   }
-  if (focus) {
-    updateFocusState.call(this, drawer);
-  }
-  drawer.el.dispatchEvent(new CustomEvent(config.customEventPrefix + "opened", {
-    detail: this,
-    bubbles: true
-  }));
-  return drawer;
+  return entry;
 }
-async function close(query, transition, focus = true) {
-  const drawer = getDrawer.call(this, query);
-  const config = { ...this.settings, ...drawer.settings };
-  if (transition !== void 0)
-    config.transition = transition;
-  if (drawer.state === "opened") {
-    drawer.state = "closing";
+async function close(query, enableTransition, focus = true) {
+  const entry = getDrawer.call(this, query);
+  const config = { ...this.settings, ...entry.settings };
+  if (enableTransition !== void 0)
+    config.transition = enableTransition;
+  if (entry.state === "opened" || entry.state === "indeterminate") {
+    entry.state = "closing";
     document.activeElement.blur();
-    await F(drawer.el, config);
-    if (drawer.mode === "modal")
-      k(false, config);
+    if (config.transition) {
+      await w(entry.el, {
+        start: config.stateOpening,
+        finish: config.stateOpened
+      }, {
+        start: config.stateClosing,
+        finish: config.stateClosed
+      }, config.transitionDuration);
+    } else {
+      entry.el.classList.add(config.stateClosed);
+      entry.el.classList.remove(config.stateOpened);
+    }
+    entry.state = "closed";
+    if (entry.mode === "modal")
+      C(false, config);
     if (focus) {
-      updateFocusState.call(this, drawer);
+      updateFocusState.call(this, entry);
     }
-    drawer.state = "closed";
-    drawer.el.dispatchEvent(new CustomEvent(config.customEventPrefix + "closed", {
+    entry.el.dispatchEvent(new CustomEvent(config.customEventPrefix + "closed", {
       detail: this,
@@ -428,10 +447,10 @@ bubbles: true
   }
-  return drawer;
+  return entry;
 }
 async function toggle(query, transition, focus) {
-  const drawer = getDrawer.call(this, query);
-  if (drawer.state === "closed") {
-    return open.call(this, drawer, transition, focus);
+  const entry = getDrawer.call(this, query);
+  if (entry.state === "closed") {
+    return open.call(this, entry, transition, focus);
   } else {
-    return close.call(this, drawer, transition, focus);
+    return close.call(this, entry, transition, focus);
   }
@@ -452,5 +471,5 @@ }
   entry.dialog.removeAttribute("aria-modal");
-  k(false, { ...this.settings, ...entry.settings });
+  C(false, { ...this.settings, ...entry.settings });
   this.focusTrap.unmount();
-  await initialState.call(this, entry);
+  await applyInlineState(entry);
   entry.el.dispatchEvent(new CustomEvent(entry.getSetting("customEventPrefix") + "switchMode", {
@@ -465,5 +484,2 @@ detail: this,
   entry.dialog.setAttribute("aria-modal", "true");
-  if (!this.store.get(entry.id) && entry.el.classList.contains(entry.getSetting("stateOpened"))) {
-    this.store.set(entry.id, "opened");
-  }
   await close.call(this, entry, false, false);
@@ -476,7 +492,45 @@ entry.el.dispatchEvent(new CustomEvent(entry.getSetting("customEventPrefix") + "switchMode", {
 }
-async function register(el, dialog) {
+async function register(el, config = {}) {
   await deregister.call(this, el, false);
   const root = this;
-  const breakpoint = new $();
-  const methods = {
+  const breakpoint = new I();
+  let _mode, _state = "indeterminate";
+  const entry = {
+    id: el.id,
+    el,
+    dialog: null,
+    trigger: null,
+    settings: { ...q(el, this.settings.dataConfig), ...config },
+    inlineState: "indeterminate",
+    get breakpoint() {
+      return getBreakpoint.call(root, el);
+    },
+    get store() {
+      return root.store.get(this.id);
+    },
+    get mode() {
+      return _mode;
+    },
+    set mode(value) {
+      _mode = value;
+      switchMode.call(root, this);
+    },
+    get state() {
+      return _state;
+    },
+    set state(value) {
+      _state = value;
+      if (this.mode === "inline" && value != "opening" && value != "closing") {
+        this.inlineState = value;
+        if (this.getSetting("store")) {
+          root.store.set(this.id, value);
+        }
+      }
+      if (value === "indeterminate") {
+        this.el.classList.remove(this.getSetting("stateOpened"));
+        this.el.classList.remove(this.getSetting("stateOpening"));
+        this.el.classList.remove(this.getSetting("stateClosed"));
+        this.el.classList.remove(this.getSetting("stateClosing"));
+      }
+    },
     open(transition, focus) {
@@ -505,3 +559,6 @@ return open.call(root, this, transition, focus);
     handleBreakpoint(event) {
-      this.mode = event.matches ? "inline" : "modal";
+      const bpMode = event.matches ? "inline" : "modal";
+      if (this.mode != bpMode) {
+        this.mode = bpMode;
+      }
       return this;
@@ -513,49 +570,17 @@ },
   };
-  const entry = {
-    id: el.id,
-    el,
-    dialog,
-    trigger: null,
-    settings: q(el, this.settings.dataConfig),
-    get breakpoint() {
-      return getBreakpoint.call(root, el);
-    },
-    get state() {
-      return __state;
-    },
-    set state(value) {
-      __state = value;
-      if (value === "opened" || value === "closed") {
-        if (this.mode === "inline")
-          root.store.set(this.id, this.state);
-      }
-    },
-    get mode() {
-      return __mode;
-    },
-    set mode(value) {
-      __mode = value;
-      switchMode.call(root, this);
-    },
-    ...methods
-  };
-  let __state = el.classList.contains(entry.getSetting("stateOpened")) ? "opened" : "closed";
-  let __mode = el.classList.contains(entry.getSetting("classModal")) ? "modal" : "inline";
-  if (entry.mode === "modal") {
-    entry.dialog.setAttribute("aria-modal", "true");
-  } else {
-    entry.dialog.removeAttribute("aria-modal");
-  }
+  this.collection.push(entry);
+  const dialog = el.querySelector(entry.getSetting("selectorDialog"));
+  entry.dialog = dialog ? dialog : el;
   if (entry.getSetting("setTabindex")) {
     entry.dialog.setAttribute("tabindex", "-1");
   }
-  this.collection.push(entry);
+  await applyInitialState(entry);
+  entry.inlineState = entry.state;
+  entry.mode = el.classList.contains(entry.getSetting("classModal")) ? "modal" : "inline";
   if (entry.breakpoint) {
     entry.mountBreakpoint();
-  } else {
-    await initialState.call(this, entry);
   }
   return entry;
 }
-class Drawer extends T {
+class Drawer extends L {
   constructor(options) {
@@ -567,4 +592,4 @@ super();
     this.settings = { ...this.defaults, ...options };
-    this.focusTrap = new x();
-    this.store = C(this.settings.storeKey, this.settings.store);
+    this.focusTrap = new S();
+    this.store = F(this.settings.storeKey, this.settings.store);
     __privateSet(this, _handleClick, handleClick.bind(this));
@@ -605,11 +630,9 @@ __privateSet(this, _handleKeydown, handleKeydown.bind(this));
   }
-  register(query) {
-    const els = getDrawerElements.call(this, query);
-    if (els.error)
-      return Promise.reject(els.error);
-    return register.call(this, els.drawer, els.dialog);
+  register(query, config = {}) {
+    let el = typeof query == "string" ? document.getElementById(query) : query;
+    return el ? register.call(this, el, config) : Promise.reject(new Error(`Failed to register; drawer not found with ID of: "${query.id || query}".`));
   }
   deregister(query) {
-    const entry = this.get(getDrawerID.call(this, query));
-    return deregister.call(this, entry);
+    let obj = this.get(query.id || query);
+    return obj ? deregister.call(this, obj) : Promise.reject(new Error(`Failed to deregister; drawer does not exist in collection with ID of: "${query.id || query}".`));
   }
@@ -616,0 +639,0 @@ open(id, transition, focus) {

dist/index.js

@@ -1,57 +0,57 @@
-var S = (t, e, s) => {
-  if (!e.has(t))
-    throw TypeError("Cannot " + s);
+var I = (t, s, e) => {
+  if (!s.has(t))
+    throw TypeError("Cannot " + e);
 };
-var p = (t, e, s) => (S(t, e, "read from private field"), s ? s.call(t) : e.get(t)), E = (t, e, s) => {
-  if (e.has(t))
+var b = (t, s, e) => (I(t, s, "read from private field"), e ? e.call(t) : s.get(t)), $ = (t, s, e) => {
+  if (s.has(t))
     throw TypeError("Cannot add the same private member more than once");
-  e instanceof WeakSet ? e.add(t) : e.set(t, s);
-}, $ = (t, e, s, i) => (S(t, e, "write to private field"), i ? i.call(t, s) : e.set(t, s), s);
-var I = (t, e, s) => {
-  if (!e.has(t))
-    throw TypeError("Cannot " + s);
-}, l = (t, e, s) => (I(t, e, "read from private field"), s ? s.call(t) : e.get(t)), w = (t, e, s) => {
-  if (e.has(t))
+  s instanceof WeakSet ? s.add(t) : s.set(t, e);
+}, S = (t, s, e, i) => (I(t, s, "write to private field"), i ? i.call(t, e) : s.set(t, e), e);
+var O = (t, s, e) => {
+  if (!s.has(t))
+    throw TypeError("Cannot " + e);
+}, l = (t, s, e) => (O(t, s, "read from private field"), e ? e.call(t) : s.get(t)), w = (t, s, e) => {
+  if (s.has(t))
     throw TypeError("Cannot add the same private member more than once");
-  e instanceof WeakSet ? e.add(t) : e.set(t, s);
-}, h = (t, e, s, i) => (I(t, e, "write to private field"), i ? i.call(t, s) : e.set(t, s), s), c;
-class M {
-  constructor(e, s) {
-    w(this, c, void 0), this.value = e, h(this, c, s), this.mql = null;
+  s instanceof WeakSet ? s.add(t) : s.set(t, e);
+}, u = (t, s, e, i) => (O(t, s, "write to private field"), i ? i.call(t, e) : s.set(t, e), e), d;
+class P {
+  constructor(s, e) {
+    w(this, d, void 0), this.value = s, u(this, d, e), this.mql = null;
   }
   get handler() {
-    return l(this, c);
+    return l(this, d);
   }
   // Unmount existing handler before setting a new one.
-  set handler(e) {
-    this.mql && (typeof this.mql.removeEventListener == "function" ? this.mql.removeEventListener("change", l(this, c)) : this.mql.removeListener(l(this, c))), h(this, c, e);
+  set handler(s) {
+    this.mql && this.mql.removeEventListener("change", l(this, d)), u(this, d, s);
   }
-  mount(e, s) {
-    return e && (this.value = e), s && h(this, c, s), this.value ? (this.mql = window.matchMedia(`(min-width: ${this.value})`), typeof this.mql.addEventListener == "function" ? this.mql.addEventListener("change", l(this, c)) : this.mql.addListener(l(this, c)), l(this, c).call(this, this.mql), this) : this;
+  mount(s, e) {
+    return s && (this.value = s), e && u(this, d, e), this.value ? (this.mql = window.matchMedia(`(min-width: ${this.value})`), this.mql.addEventListener("change", l(this, d)), l(this, d).call(this, this.mql), this) : this;
   }
   unmount() {
-    return this.mql ? (typeof this.mql.removeEventListener == "function" ? this.mql.removeEventListener("change", l(this, c)) : this.mql.removeListener(l(this, c)), this.value = null, h(this, c, null), this.mql = null, this) : this;
+    return this.mql ? (this.mql.removeEventListener("change", l(this, d)), this.value = null, u(this, d, null), this.mql = null, this) : this;
   }
 }
-c = /* @__PURE__ */ new WeakMap();
-class P {
+d = /* @__PURE__ */ new WeakMap();
+class A {
   constructor() {
     this.collection = [];
   }
-  async register(e) {
-    return await this.deregister(e), this.collection.push(e), this.collection;
+  async register(s) {
+    return await this.deregister(s), this.collection.push(s), this.collection;
   }
-  async deregister(e) {
-    const s = this.collection.findIndex((i) => i === e);
-    if (s >= 0) {
-      const i = this.collection[s];
+  async deregister(s) {
+    const e = this.collection.findIndex((i) => i === s);
+    if (e >= 0) {
+      const i = this.collection[e];
       Object.getOwnPropertyNames(i).forEach((n) => {
         delete i[n];
-      }), this.collection.splice(s, 1);
+      }), this.collection.splice(e, 1);
     }
     return this.collection;
   }
-  async registerCollection(e) {
-    return await Promise.all(Array.from(e, (s) => {
-      this.register(s);
+  async registerCollection(s) {
+    return await Promise.all(Array.from(s, (e) => {
+      this.register(e);
     })), this.collection;
@@ -64,32 +64,32 @@ }
   }
-  get(e, s = "id") {
-    return this.collection.find((i) => i[s] === e);
+  get(s, e = "id") {
+    return this.collection.find((i) => i[e] === s);
   }
 }
-const r = {
+const o = {
   inert: ":not([inert]):not([inert] *)",
   negTabIndex: ':not([tabindex^="-"])',
   disabled: ":not(:disabled)"
-}, F = [
-  `a[href]${r.inert}${r.negTabIndex}`,
-  `area[href]${r.inert}${r.negTabIndex}`,
-  `input:not([type="hidden"]):not([type="radio"])${r.inert}${r.negTabIndex}${r.disabled}`,
-  `input[type="radio"]${r.inert}${r.negTabIndex}${r.disabled}`,
-  `select${r.inert}${r.negTabIndex}${r.disabled}`,
-  `textarea${r.inert}${r.negTabIndex}${r.disabled}`,
-  `button${r.inert}${r.negTabIndex}${r.disabled}`,
-  `details${r.inert} > summary:first-of-type${r.negTabIndex}`,
+}, B = [
+  `a[href]${o.inert}${o.negTabIndex}`,
+  `area[href]${o.inert}${o.negTabIndex}`,
+  `input:not([type="hidden"]):not([type="radio"])${o.inert}${o.negTabIndex}${o.disabled}`,
+  `input[type="radio"]${o.inert}${o.negTabIndex}${o.disabled}`,
+  `select${o.inert}${o.negTabIndex}${o.disabled}`,
+  `textarea${o.inert}${o.negTabIndex}${o.disabled}`,
+  `button${o.inert}${o.negTabIndex}${o.disabled}`,
+  `details${o.inert} > summary:first-of-type${o.negTabIndex}`,
   // Discard until Firefox supports `:has()`
   // See: https://github.com/KittyGiraudel/focusable-selectors/issues/12
   // `details:not(:has(> summary))${not.inert}${not.negTabIndex}`,
-  `iframe${r.inert}${r.negTabIndex}`,
-  `audio[controls]${r.inert}${r.negTabIndex}`,
-  `video[controls]${r.inert}${r.negTabIndex}`,
-  `[contenteditable]${r.inert}${r.negTabIndex}`,
-  `[tabindex]${r.inert}${r.negTabIndex}`
+  `iframe${o.inert}${o.negTabIndex}`,
+  `audio[controls]${o.inert}${o.negTabIndex}`,
+  `video[controls]${o.inert}${o.negTabIndex}`,
+  `[contenteditable]${o.inert}${o.negTabIndex}`,
+  `[tabindex]${o.inert}${o.negTabIndex}`
 ];
-var v, u, g;
-class B {
-  constructor(e = null, s = "[data-focus]") {
-    w(this, v, void 0), w(this, u, void 0), w(this, g, void 0), this.el = e, this.selectorFocus = s, h(this, u, _.bind(this)), h(this, g, N.bind(this));
+var v, g, f;
+class j {
+  constructor(s = null, e = "[data-focus]") {
+    w(this, v, void 0), w(this, g, void 0), w(this, f, void 0), this.el = s, this.selectorFocus = e, u(this, g, q.bind(this)), u(this, f, K.bind(this));
   }
@@ -99,4 +99,4 @@ get focusable() {
   }
-  set focusable(e) {
-    h(this, v, e), l(this, v).length ? (document.removeEventListener("keydown", l(this, g)), document.addEventListener("keydown", l(this, u))) : (document.removeEventListener("keydown", l(this, u)), document.addEventListener("keydown", l(this, g)));
+  set focusable(s) {
+    u(this, v, s), l(this, v).length ? (document.removeEventListener("keydown", l(this, f)), document.addEventListener("keydown", l(this, g))) : (document.removeEventListener("keydown", l(this, g)), document.addEventListener("keydown", l(this, f)));
   }
@@ -109,34 +109,44 @@ get focusableFirst() {
   }
-  mount(e, s) {
-    e && (this.el = e), s && (this.selectorFocus = s), this.focusable = this.getFocusable(), this.focus();
+  mount(s, e) {
+    s && (this.el = s), e && (this.selectorFocus = e), this.focusable = this.getFocusable(), this.focus();
   }
   unmount() {
-    this.el = null, this.focusable = [], document.removeEventListener("keydown", l(this, u)), document.removeEventListener("keydown", l(this, g));
+    this.el = null, this.focusable = [], document.removeEventListener("keydown", l(this, g)), document.removeEventListener("keydown", l(this, f));
   }
-  focus(e = this.el, s = this.selectorFocus) {
-    (e.querySelector(s) || e).focus();
+  focus(s = this.el, e = this.selectorFocus) {
+    (s.querySelector(e) || s).focus();
   }
-  getFocusable(e = this.el) {
-    const s = [], i = document.activeElement, n = e.scrollTop;
-    return e.querySelectorAll(F.join(",")).forEach((a) => {
-      a.focus(), document.activeElement === a && s.push(a);
-    }), e.scrollTop = n, i.focus(), s;
+  getFocusable(s = this.el) {
+    const e = [], i = document.activeElement, n = s.scrollTop;
+    return s.querySelectorAll(B.join(",")).forEach((c) => {
+      c.focus(), document.activeElement === c && e.push(c);
+    }), s.scrollTop = n, i.focus(), e;
   }
 }
-v = /* @__PURE__ */ new WeakMap(), u = /* @__PURE__ */ new WeakMap(), g = /* @__PURE__ */ new WeakMap();
-function _(t) {
+v = /* @__PURE__ */ new WeakMap(), g = /* @__PURE__ */ new WeakMap(), f = /* @__PURE__ */ new WeakMap();
+function q(t) {
   (t.key === "Tab" || t.keyCode === 9) && (t.shiftKey ? (document.activeElement === this.focusableFirst || document.activeElement === this.el) && (t.preventDefault(), this.focusableLast.focus()) : (document.activeElement === this.focusableLast || document.activeElement === this.el) && (t.preventDefault(), this.focusableFirst.focus()));
 }
-function N(t) {
+function K(t) {
   (t.key === "Tab" || t.keyCode === 9) && t.preventDefault();
 }
-function K(t, e) {
-  const s = (t.getAttribute(`data-${e}`) || "").replace(/'/g, '"');
-  return s ? JSON.parse(s) : {};
+function y() {
+  return getComputedStyle(document.body).getPropertyValue("--vrembem-prefix").trim();
 }
-function W() {
-  return getComputedStyle(document.body).getPropertyValue("--vrembem-variable-prefix").trim();
+function N(t, s = document.body, e = !0) {
+  if (e) {
+    const n = y();
+    n && !t.includes(`--${n}`) && (t = t.replace("--", `--${n}`));
+  }
+  const i = getComputedStyle(s).getPropertyValue(t).trim();
+  if (i)
+    return i;
+  throw new Error(`CSS variable "${t}" was not found!`);
 }
-function V(t, e = !0) {
-  const s = localStorage.getItem(t), i = s ? JSON.parse(s) : {};
+function V(t, s) {
+  const e = (t.getAttribute(`data-${s}`) || "").replace(/'/g, '"');
+  return e ? JSON.parse(e) : {};
+}
+function W(t, s = !0) {
+  const e = localStorage.getItem(t), i = e ? JSON.parse(e) : {};
   return {
@@ -146,30 +156,32 @@ get(n) {
     },
-    set(n, a) {
-      return a ? i[n] = a : delete i[n], e && localStorage.setItem(t, JSON.stringify(i)), i;
+    set(n, c) {
+      return c ? i[n] = c : delete i[n], s && localStorage.setItem(t, JSON.stringify(i)), i;
     }
   };
 }
-const J = (t, e) => new Promise((s) => {
-  e.transition ? (t.classList.remove(e.stateClosed), t.classList.add(e.stateOpening), t.addEventListener("transitionend", function i(n) {
-    n.target == t && (t.classList.add(e.stateOpened), t.classList.remove(e.stateOpening), s(t), this.removeEventListener("transitionend", i));
-  })) : (t.classList.add(e.stateOpened), t.classList.remove(e.stateClosed), s(t));
-}), z = (t, e) => new Promise((s) => {
-  e.transition ? (t.classList.add(e.stateClosing), t.classList.remove(e.stateOpened), t.addEventListener("transitionend", function i(n) {
-    n.target == t && (t.classList.remove(e.stateClosing), t.classList.add(e.stateClosed), s(t), this.removeEventListener("transitionend", i));
-  })) : (t.classList.add(e.stateClosed), t.classList.remove(e.stateOpened), s(t));
-});
-function G(t, e) {
-  e && document.querySelectorAll(e).forEach((s) => {
-    t ? s.style.overflow = "hidden" : s.style.removeProperty("overflow");
+function M(t, s, e, i = "--transition-duration") {
+  return new Promise((n) => {
+    if (typeof i == "string") {
+      const c = N(i, t), r = !!c.includes("ms");
+      i = parseFloat(c) * (r ? 1 : 1e3);
+    }
+    t.classList.remove(s.finish), t.classList.add(e.start), setTimeout(() => {
+      t.classList.add(e.finish), t.classList.remove(e.start), n(t);
+    }, i);
   });
 }
-function H(t, e) {
-  e && document.querySelectorAll(e).forEach((s) => {
-    t ? (s.inert = !0, s.setAttribute("aria-hidden", !0)) : (s.inert = null, s.removeAttribute("aria-hidden"));
+function _(t, s) {
+  s && document.querySelectorAll(s).forEach((e) => {
+    t ? e.style.overflow = "hidden" : e.style.removeProperty("overflow");
   });
 }
-function k(t, e) {
-  H(!!t, e.selectorInert), G(!!t, e.selectorOverflow);
+function J(t, s) {
+  s && document.querySelectorAll(s).forEach((e) => {
+    t ? (e.inert = !0, e.setAttribute("aria-hidden", !0)) : (e.inert = null, e.removeAttribute("aria-hidden"));
+  });
 }
-const Q = {
+function k(t, s) {
+  J(!!t, s.selectorInert), _(!!t, s.selectorOverflow);
+}
+const z = {
   autoInit: !1,
@@ -185,2 +197,3 @@ // Data attributes
   selectorDialog: ".drawer__dialog",
+  selectorScreen: ".drawer",
   selectorFocus: "[data-focus]",
@@ -203,6 +216,7 @@ selectorInert: null,
   setTabindex: !0,
-  transition: !0
+  transition: !0,
+  transitionDuration: "--vb-drawer-transition-duration"
 };
-function R(t) {
-  const e = t.target.closest(`
+async function G(t) {
+  const s = t.target.closest(`
     [data-${this.settings.dataOpen}],
@@ -212,16 +226,17 @@ [data-${this.settings.dataToggle}],
   `);
-  if (e) {
-    t.preventDefault(), e.matches(`[data-${this.settings.dataToggle}]`) && e.getAttribute(`data-${this.settings.dataToggle}`).trim().split(" ").forEach((i) => {
+  if (s) {
+    t.preventDefault(), s.matches(`[data-${this.settings.dataToggle}]`) && s.getAttribute(`data-${this.settings.dataToggle}`).trim().split(" ").forEach((i) => {
       const n = this.get(i);
-      n.trigger = e, n.toggle();
-    }), e.matches(`[data-${this.settings.dataOpen}]`) && e.getAttribute(`data-${this.settings.dataOpen}`).trim().split(" ").forEach((i) => {
+      return n.trigger = s, n.toggle();
+    }), s.matches(`[data-${this.settings.dataOpen}]`) && s.getAttribute(`data-${this.settings.dataOpen}`).trim().split(" ").forEach((i) => {
       const n = this.get(i);
-      n.trigger = e, n.open();
-    }), e.matches(`[data-${this.settings.dataClose}]`) && e.getAttribute(`data-${this.settings.dataClose}`).trim().split(" ").forEach((i) => {
+      return n.trigger = s, n.open();
+    }), s.matches(`[data-${this.settings.dataClose}]`) && s.getAttribute(`data-${this.settings.dataClose}`).trim().split(" ").forEach((i) => {
       if (i) {
         const n = this.get(i);
-        n.trigger = e, n.close();
+        return n.trigger = s, n.close();
       } else {
         const n = t.target.closest(this.settings.selectorDrawer);
-        n && this.close(n);
+        if (n)
+          return this.close(n);
       }
@@ -231,59 +246,60 @@ });
   }
-  t.target.matches(this.settings.selectorDrawer) && this.close(t.target.id);
+  if (this.activeModal && t.target.matches(this.settings.selectorScreen))
+    return this.close(this.activeModal.id);
 }
-function U(t) {
-  if (t.key === "Escape") {
-    const e = this.activeModal;
-    e && this.close(e);
-  }
+function H(t) {
+  if (t.key === "Escape" && this.activeModal)
+    return this.close(this.activeModal);
 }
-async function L(t, e = !0) {
-  if (!t)
-    return this.collection;
-  const s = this.collection.findIndex((i) => i.id === t.id);
-  if (s >= 0) {
-    const i = this.collection[s];
-    e && i.state === "opened" && await i.close(!1), this.store.set(i.id), i.unmountBreakpoint(), Object.getOwnPropertyNames(i).forEach((n) => {
+async function L(t, s = !0) {
+  const e = this.collection.findIndex((i) => i.id === t.id);
+  if (e >= 0) {
+    const i = this.collection[e];
+    s && i.state === "opened" && await i.close(!1), this.store.set(i.id), i.unmountBreakpoint(), Object.getOwnPropertyNames(i).forEach((n) => {
       delete i[n];
-    }), this.collection.splice(s, 1);
+    }), this.collection.splice(e, 1);
   }
   return this.collection;
 }
-function X(t) {
-  const e = W(), s = t.getAttribute(`data-${this.settings.dataBreakpoint}`);
-  return this.settings.breakpoints && this.settings.breakpoints[s] ? this.settings.breakpoints[s] : getComputedStyle(document.body).getPropertyValue(`--${e}breakpoint-${s}`).trim() ? getComputedStyle(document.body).getPropertyValue(`--${e}breakpoint-${s}`).trim() : s;
+function Q(t) {
+  t.store === "opened" ? t.open(!1, !1) : t.store === "closed" ? t.close(!1, !1) : t.store === "indeterminate" ? t.state = "indeterminate" : t.el.classList.contains(t.getSetting("stateOpened")) ? t.open(!1, !1) : t.el.classList.contains(t.getSetting("stateClosed")) ? t.close(!1, !1) : t.state = "indeterminate";
 }
-function y(t) {
-  const e = typeof t == "string" ? this.get(t) : this.get(t.id);
-  if (e)
-    return e;
-  throw new Error(`Drawer not found in collection with id of "${t.id || t}".`);
+async function R(t) {
+  t.store === "opened" ? await t.open(!1, !1) : t.store === "closed" ? await t.close(!1, !1) : t.store === "indeterminate" ? t.state != "indeterminate" && (t.state = "indeterminate") : (t.state != t.inlineState && (t.state = t.inlineState), t.inlineState === "opened" ? await t.open(!1, !1) : t.inlineState === "closed" && await t.close(!1, !1));
 }
-function O(t) {
-  return typeof t == "string" ? t : typeof t.hasAttribute == "function" ? t.hasAttribute(`data-${this.settings.dataOpen}`) ? t.getAttribute(`data-${this.settings.dataOpen}`) : t.hasAttribute(`data-${this.settings.dataClose}`) ? t.getAttribute(`data-${this.settings.dataClose}`) || !1 : t.hasAttribute(`data-${this.settings.dataToggle}`) ? t.getAttribute(`data-${this.settings.dataToggle}`) : t.closest(this.settings.selectorDrawer) ? (t = t.closest(this.settings.selectorDrawer), t.id || !1) : !1 : t.id ? t.id : !1;
+function U(t) {
+  const s = y(), e = t.getAttribute(`data-${this.settings.dataBreakpoint}`);
+  return this.settings.breakpoints && this.settings.breakpoints[e] ? this.settings.breakpoints[e] : getComputedStyle(document.body).getPropertyValue(`--${s}breakpoint-${e}`).trim() ? getComputedStyle(document.body).getPropertyValue(`--${s}breakpoint-${e}`).trim() : e;
 }
-function Y(t) {
-  const e = O.call(this, t);
-  if (e) {
-    const s = document.querySelector(`#${e}`), i = s ? s.querySelector(this.settings.selectorDialog) : null;
-    return !s && !i ? { error: new Error(`No drawer elements found using the ID: "${e}".`) } : i ? { drawer: s, dialog: i } : { error: new Error("Drawer is missing dialog element.") };
-  } else
-    return { error: new Error("Could not resolve the drawer ID.") };
+function C(t) {
+  const s = typeof t == "string" ? this.get(t) : this.get(t.id);
+  if (s)
+    return s;
+  throw new Error(`Drawer not found in collection with id of "${t.id || t}".`);
 }
-async function A(t) {
-  this.store.get(t.id) ? this.store.get(t.id) === "opened" ? await t.open(!1, !1) : await t.close(!1, !1) : t.el.classList.contains(this.settings.stateOpened) ? t.state = "opened" : (t.el.classList.remove(this.settings.stateOpening), t.el.classList.remove(this.settings.stateClosing), t.el.classList.add(this.settings.stateClosed));
-}
 function D(t) {
   t.state === "opened" ? t.mode === "modal" ? this.focusTrap.mount(t.dialog, this.settings.selectorFocus) : this.focusTrap.focus(t.dialog, this.settings.selectorFocus) : (t.trigger && (t.trigger.focus(), t.trigger = null), this.focusTrap.unmount());
 }
-async function C(t, e, s = !0) {
-  const i = y.call(this, t), n = { ...this.settings, ...i.settings };
-  return e !== void 0 && (n.transition = e), i.state === "closed" && (i.state = "opening", await J(i.el, n), i.mode === "modal" && k(!0, n), i.state = "opened"), s && D.call(this, i), i.el.dispatchEvent(new CustomEvent(n.customEventPrefix + "opened", {
+async function x(t, s, e = !0) {
+  const i = C.call(this, t), n = { ...this.settings, ...i.settings };
+  return s !== void 0 && (n.transition = s), (i.state === "closed" || i.state === "indeterminate") && (i.state = "opening", n.transition ? await M(i.el, {
+    start: n.stateClosing,
+    finish: n.stateClosed
+  }, {
+    start: n.stateOpening,
+    finish: n.stateOpened
+  }, n.transitionDuration) : (i.el.classList.add(n.stateOpened), i.el.classList.remove(n.stateClosed)), i.state = "opened", i.mode === "modal" && k(!0, n), e && D.call(this, i), i.el.dispatchEvent(new CustomEvent(n.customEventPrefix + "opened", {
     detail: this,
     bubbles: !0
-  })), i;
+  }))), i;
 }
-async function b(t, e, s = !0) {
-  const i = y.call(this, t), n = { ...this.settings, ...i.settings };
-  return e !== void 0 && (n.transition = e), i.state === "opened" && (i.state = "closing", document.activeElement.blur(), await z(i.el, n), i.mode === "modal" && k(!1, n), s && D.call(this, i), i.state = "closed", i.el.dispatchEvent(new CustomEvent(n.customEventPrefix + "closed", {
+async function E(t, s, e = !0) {
+  const i = C.call(this, t), n = { ...this.settings, ...i.settings };
+  return s !== void 0 && (n.transition = s), (i.state === "opened" || i.state === "indeterminate") && (i.state = "closing", document.activeElement.blur(), n.transition ? await M(i.el, {
+    start: n.stateOpening,
+    finish: n.stateOpened
+  }, {
+    start: n.stateClosing,
+    finish: n.stateClosed
+  }, n.transitionDuration) : (i.el.classList.add(n.stateClosed), i.el.classList.remove(n.stateOpened)), i.state = "closed", i.mode === "modal" && k(!1, n), e && D.call(this, i), i.el.dispatchEvent(new CustomEvent(n.customEventPrefix + "closed", {
     detail: this,
@@ -293,12 +309,12 @@ bubbles: !0
 }
-async function q(t, e, s) {
-  const i = y.call(this, t);
-  return i.state === "closed" ? C.call(this, i, e, s) : b.call(this, i, e, s);
+async function F(t, s, e) {
+  const i = C.call(this, t);
+  return i.state === "closed" ? x.call(this, i, s, e) : E.call(this, i, s, e);
 }
-function Z(t) {
+function X(t) {
   switch (t.mode) {
     case "inline":
-      return j.call(this, t);
+      return Y.call(this, t);
     case "modal":
-      return tt.call(this, t);
+      return Z.call(this, t);
     default:
@@ -308,4 +324,4 @@ throw new Error(`"${t.mode}" is not a valid drawer mode.`);
 }
-async function j(t) {
-  return t.el.classList.remove(t.getSetting("classModal")), t.dialog.removeAttribute("aria-modal"), k(!1, { ...this.settings, ...t.settings }), this.focusTrap.unmount(), await A.call(this, t), t.el.dispatchEvent(new CustomEvent(t.getSetting("customEventPrefix") + "switchMode", {
+async function Y(t) {
+  return t.el.classList.remove(t.getSetting("classModal")), t.dialog.removeAttribute("aria-modal"), k(!1, { ...this.settings, ...t.settings }), this.focusTrap.unmount(), await R(t), t.el.dispatchEvent(new CustomEvent(t.getSetting("customEventPrefix") + "switchMode", {
     detail: this,
@@ -315,4 +331,4 @@ bubbles: !0
 }
-async function tt(t) {
-  return t.el.classList.add(t.getSetting("classModal")), t.dialog.setAttribute("aria-modal", "true"), !this.store.get(t.id) && t.el.classList.contains(t.getSetting("stateOpened")) && this.store.set(t.id, "opened"), await b.call(this, t, !1, !1), t.el.dispatchEvent(new CustomEvent(t.getSetting("customEventPrefix") + "switchMode", {
+async function Z(t) {
+  return t.el.classList.add(t.getSetting("classModal")), t.dialog.setAttribute("aria-modal", "true"), await E.call(this, t, !1, !1), t.el.dispatchEvent(new CustomEvent(t.getSetting("customEventPrefix") + "switchMode", {
     detail: this,
@@ -322,20 +338,46 @@ bubbles: !0
 }
-async function et(t, e) {
+async function tt(t, s = {}) {
   await L.call(this, t, !1);
-  const s = this, i = new M(), n = {
-    open(o, d) {
-      return C.call(s, this, o, d);
+  const e = this, i = new P();
+  let n, c = "indeterminate";
+  const r = {
+    id: t.id,
+    el: t,
+    dialog: null,
+    trigger: null,
+    settings: { ...V(t, this.settings.dataConfig), ...s },
+    inlineState: "indeterminate",
+    get breakpoint() {
+      return U.call(e, t);
     },
-    close(o, d) {
-      return b.call(s, this, o, d);
+    get store() {
+      return e.store.get(this.id);
     },
-    toggle(o, d) {
-      return q.call(s, this, o, d);
+    get mode() {
+      return n;
     },
+    set mode(a) {
+      n = a, X.call(e, this);
+    },
+    get state() {
+      return c;
+    },
+    set state(a) {
+      c = a, this.mode === "inline" && a != "opening" && a != "closing" && (this.inlineState = a, this.getSetting("store") && e.store.set(this.id, a)), a === "indeterminate" && (this.el.classList.remove(this.getSetting("stateOpened")), this.el.classList.remove(this.getSetting("stateOpening")), this.el.classList.remove(this.getSetting("stateClosed")), this.el.classList.remove(this.getSetting("stateClosing")));
+    },
+    open(a, h) {
+      return x.call(e, this, a, h);
+    },
+    close(a, h) {
+      return E.call(e, this, a, h);
+    },
+    toggle(a, h) {
+      return F.call(e, this, a, h);
+    },
     deregister() {
-      return L.call(s, this);
+      return L.call(e, this);
     },
     mountBreakpoint() {
-      const o = this.breakpoint, d = this.handleBreakpoint.bind(this);
-      return i.mount(o, d), this;
+      const a = this.breakpoint, h = this.handleBreakpoint.bind(this);
+      return i.mount(a, h), this;
     },
@@ -345,47 +387,27 @@ unmountBreakpoint() {
     },
-    handleBreakpoint(o) {
-      return this.mode = o.matches ? "inline" : "modal", this;
+    handleBreakpoint(a) {
+      const h = a.matches ? "inline" : "modal";
+      return this.mode != h && (this.mode = h), this;
     },
-    getSetting(o) {
-      return o in this.settings ? this.settings[o] : s.settings[o];
+    getSetting(a) {
+      return a in this.settings ? this.settings[a] : e.settings[a];
     }
-  }, a = {
-    id: t.id,
-    el: t,
-    dialog: e,
-    trigger: null,
-    settings: K(t, this.settings.dataConfig),
-    get breakpoint() {
-      return X.call(s, t);
-    },
-    get state() {
-      return T;
-    },
-    set state(o) {
-      T = o, (o === "opened" || o === "closed") && this.mode === "inline" && s.store.set(this.id, this.state);
-    },
-    get mode() {
-      return x;
-    },
-    set mode(o) {
-      x = o, Z.call(s, this);
-    },
-    ...n
   };
-  let T = t.classList.contains(a.getSetting("stateOpened")) ? "opened" : "closed", x = t.classList.contains(a.getSetting("classModal")) ? "modal" : "inline";
-  return a.mode === "modal" ? a.dialog.setAttribute("aria-modal", "true") : a.dialog.removeAttribute("aria-modal"), a.getSetting("setTabindex") && a.dialog.setAttribute("tabindex", "-1"), this.collection.push(a), a.breakpoint ? a.mountBreakpoint() : await A.call(this, a), a;
+  this.collection.push(r);
+  const T = t.querySelector(r.getSetting("selectorDialog"));
+  return r.dialog = T || t, r.getSetting("setTabindex") && r.dialog.setAttribute("tabindex", "-1"), await Q(r), r.inlineState = r.state, r.mode = t.classList.contains(r.getSetting("classModal")) ? "modal" : "inline", r.breakpoint && r.mountBreakpoint(), r;
 }
-var f, m;
-class it extends P {
-  constructor(s) {
+var m, p;
+class st extends A {
+  constructor(e) {
     super();
-    E(this, f, void 0);
-    E(this, m, void 0);
-    this.defaults = Q, this.settings = { ...this.defaults, ...s }, this.focusTrap = new B(), this.store = V(this.settings.storeKey, this.settings.store), $(this, f, R.bind(this)), $(this, m, U.bind(this)), this.settings.autoInit && this.init();
+    $(this, m, void 0);
+    $(this, p, void 0);
+    this.defaults = z, this.settings = { ...this.defaults, ...e }, this.focusTrap = new j(), this.store = W(this.settings.storeKey, this.settings.store), S(this, m, G.bind(this)), S(this, p, H.bind(this)), this.settings.autoInit && this.init();
   }
   get activeModal() {
-    return this.collection.find((s) => s.state === "opened" && s.mode === "modal");
+    return this.collection.find((e) => e.state === "opened" && e.mode === "modal");
   }
-  async init(s = null) {
-    s && (this.settings = { ...this.settings, ...s });
+  async init(e = null) {
+    e && (this.settings = { ...this.settings, ...e });
     const i = document.querySelectorAll(this.settings.selectorDrawer);
@@ -398,29 +420,29 @@ return await this.registerCollection(i), this.settings.eventListeners && this.initEventListeners(), this;
   initEventListeners() {
-    document.addEventListener("click", p(this, f), !1), document.addEventListener("keydown", p(this, m), !1);
+    document.addEventListener("click", b(this, m), !1), document.addEventListener("keydown", b(this, p), !1);
   }
   destroyEventListeners() {
-    document.removeEventListener("click", p(this, f), !1), document.removeEventListener("keydown", p(this, m), !1);
+    document.removeEventListener("click", b(this, m), !1), document.removeEventListener("keydown", b(this, p), !1);
   }
-  register(s) {
-    const i = Y.call(this, s);
-    return i.error ? Promise.reject(i.error) : et.call(this, i.drawer, i.dialog);
+  register(e, i = {}) {
+    let n = typeof e == "string" ? document.getElementById(e) : e;
+    return n ? tt.call(this, n, i) : Promise.reject(new Error(`Failed to register; drawer not found with ID of: "${e.id || e}".`));
   }
-  deregister(s) {
-    const i = this.get(O.call(this, s));
-    return L.call(this, i);
+  deregister(e) {
+    let i = this.get(e.id || e);
+    return i ? L.call(this, i) : Promise.reject(new Error(`Failed to deregister; drawer does not exist in collection with ID of: "${e.id || e}".`));
   }
-  open(s, i, n) {
-    return C.call(this, s, i, n);
+  open(e, i, n) {
+    return x.call(this, e, i, n);
   }
-  close(s, i, n) {
-    return b.call(this, s, i, n);
+  close(e, i, n) {
+    return E.call(this, e, i, n);
   }
-  toggle(s, i, n) {
-    return q.call(this, s, i, n);
+  toggle(e, i, n) {
+    return F.call(this, e, i, n);
   }
 }
-f = new WeakMap(), m = new WeakMap();
+m = new WeakMap(), p = new WeakMap();
 export {
-  it as default
+  st as default
 };
 //# sourceMappingURL=index.js.map

package.json

 {
   "name": "@vrembem/drawer",
   "description": "A container component that slides in from the left or right. Typically containing menus, search or other content.",
-  "version": "4.0.0-next.3",
+  "version": "4.0.0-next.4",
   "license": "MIT",
@@ -56,3 +56,3 @@ "type": "module",
   "dependencies": {
-    "@vrembem/core": "^4.0.0-next.3"
+    "@vrembem/core": "^4.0.0-next.4"
   },
@@ -62,3 +62,3 @@ "publishConfig": {
   },
-  "gitHead": "dc9d0d29f6cfa3745d2fcbd76e39152f0c146a62"
+  "gitHead": "d5e779c8d3e9bcc8686cb1e6f90eef73e959e15f"
 }

src/js/close.js

@@ -1,18 +0,18 @@
-import { closeTransition, updateGlobalState } from '@vrembem/core';
+import { transition, updateGlobalState } from '@vrembem/core';
 import { updateFocusState, getDrawer } from './helpers';
 
-export async function close(query, transition, focus = true) {
+export async function close(query, enableTransition, focus = true) {
   // Get the drawer from collection.
-  const drawer = getDrawer.call(this, query);
+  const entry = getDrawer.call(this, query);
 
   // Get the modal configuration.
-  const config = { ...this.settings, ...drawer.settings };
+  const config = { ...this.settings, ...entry.settings };
 
   // Add transition parameter to configuration.
-  if (transition !== undefined) config.transition = transition;
+  if (enableTransition !== undefined) config.transition = enableTransition;
 
-  // If drawer is opened.
-  if (drawer.state === 'opened') {
+  // If drawer is opened or indeterminate.
+  if (entry.state === 'opened' || entry.state === 'indeterminate') {
     // Update drawer state.
-    drawer.state = 'closing';
+    entry.state = 'closing';
 
@@ -23,17 +23,28 @@ // Remove focus from active element.
     // Run the close transition.
-    await closeTransition(drawer.el, config);
+    if (config.transition) {
+      await transition(entry.el, {
+        start: config.stateOpening,
+        finish: config.stateOpened
+      }, {
+        start: config.stateClosing,
+        finish: config.stateClosed
+      }, config.transitionDuration);
+    } else {
+      entry.el.classList.add(config.stateClosed);
+      entry.el.classList.remove(config.stateOpened);
+    }
 
+    // Update drawer state.
+    entry.state = 'closed';
+
     // Update the global state if mode is modal.
-    if (drawer.mode === 'modal') updateGlobalState(false, config);
+    if (entry.mode === 'modal') updateGlobalState(false, config);
 
     // Set focus to the trigger element if the focus param is true.
     if (focus) {
-      updateFocusState.call(this, drawer);
+      updateFocusState.call(this, entry);
     }
 
-    // Update drawer state.
-    drawer.state = 'closed';
-
     // Dispatch custom closed event.
-    drawer.el.dispatchEvent(new CustomEvent(config.customEventPrefix + 'closed', {
+    entry.el.dispatchEvent(new CustomEvent(config.customEventPrefix + 'closed', {
       detail: this,
@@ -45,3 +56,3 @@ bubbles: true
   // Return the drawer.
-  return drawer;
+  return entry;
 }

src/js/defaults.js

@@ -14,2 +14,3 @@ export default {
   selectorDialog: '.drawer__dialog',
+  selectorScreen: '.drawer',
   selectorFocus: '[data-focus]',
@@ -35,3 +36,4 @@ selectorInert: null,
   setTabindex: true,
-  transition: true
+  transition: true,
+  transitionDuration: '--vb-drawer-transition-duration'
 };

src/js/deregister.js

 export async function deregister(obj, close = true) {
-  // Return collection if nothing was passed.
-  if (!obj) return this.collection;
-
   // Check if entry has been registered in the collection.
@@ -6,0 +3,0 @@ const index = this.collection.findIndex((entry) => {

src/js/handlers.js

@@ -1,2 +0,2 @@
-export function handleClick(event) {
+export async function handleClick(event) {
   // If an open, close or toggle button was clicked, handle the click event.
@@ -22,3 +22,3 @@ const trigger = event.target.closest(`
         // Toggle the drawer
-        entry.toggle();
+        return entry.toggle();
       });
@@ -36,3 +36,3 @@ }
         // Open the drawer.
-        entry.open();
+        return entry.open();
       });
@@ -51,3 +51,3 @@ }
           // Close the drawer.
-          entry.close();
+          return entry.close();
         } else {
@@ -57,3 +57,3 @@ // If no value is set on close trigger, get the parent drawer.
           // If a parent drawer was found, close it.
-          if (parent) this.close(parent);
+          if (parent) return this.close(parent);
         }
@@ -66,6 +66,6 @@ });
 
-  // If the modal drawer screen was clicked...
-  if (event.target.matches(this.settings.selectorDrawer)) {
+  // If there is an active modal drawer and the screen was clicked...
+  if (this.activeModal && event.target.matches(this.settings.selectorScreen)) {
     // Close the modal drawer.
-    this.close(event.target.id);
+    return this.close(this.activeModal.id);
   }
@@ -75,6 +75,7 @@ }
 export function handleKeydown(event) {
+  // If escape key was pressed.
   if (event.key === 'Escape') {
-    const modal = this.activeModal;
-    if (modal) this.close(modal);
+    // If a modal is opened, close the modal.
+    if (this.activeModal) return this.close(this.activeModal);
   }
 }

src/js/helpers/index.js

@@ -0,6 +1,5 @@
+export * from './applyInitialState';
+export * from './applyInlineState';
 export * from './getBreakpoint';
 export * from './getDrawer';
-export * from './getDrawerElements';
-export * from './getDrawerID';
-export * from './initialState';
 export * from './updateFocusState';

src/js/index.js

@@ -10,3 +10,2 @@ import { Collection, FocusTrap, localStore } from '@vrembem/core';
 import { toggle } from './toggle';
-import { getDrawerID, getDrawerElements } from './helpers';
 
@@ -77,11 +76,15 @@ export default class Drawer extends Collection {
 
-  register(query) {
-    const els = getDrawerElements.call(this, query);
-    if (els.error) return Promise.reject(els.error);
-    return register.call(this, els.drawer, els.dialog);
+  register(query, config = {}) {
+    let el = (typeof query == 'string') ?
+      document.getElementById(query) : query;
+    return (el) ?
+      register.call(this, el, config) :
+      Promise.reject(new Error(`Failed to register; drawer not found with ID of: "${query.id || query}".`));
   }
 
   deregister(query) {
-    const entry = this.get(getDrawerID.call(this, query));
-    return deregister.call(this, entry);
+    let obj = this.get((query.id || query));
+    return (obj) ?
+      deregister.call(this, obj) :
+      Promise.reject(new Error(`Failed to deregister; drawer does not exist in collection with ID of: "${query.id || query}".`));
   }
@@ -88,0 +91,0 @@

src/js/open.js

@@ -1,42 +0,53 @@
-import { openTransition, updateGlobalState } from '@vrembem/core';
+import { transition, updateGlobalState } from '@vrembem/core';
 import { updateFocusState, getDrawer } from './helpers';
 
-export async function open(query, transition, focus = true) {
+export async function open(query, enableTransition, focus = true) {
   // Get the drawer from collection.
-  const drawer = getDrawer.call(this, query);
+  const entry = getDrawer.call(this, query);
 
   // Get the modal configuration.
-  const config = { ...this.settings, ...drawer.settings };
+  const config = { ...this.settings, ...entry.settings };
 
   // Add transition parameter to configuration.
-  if (transition !== undefined) config.transition = transition;
+  if (enableTransition !== undefined) config.transition = enableTransition;
 
-  // If drawer is closed.
-  if (drawer.state === 'closed') {
+  // If drawer is closed or indeterminate.
+  if (entry.state === 'closed' || entry.state === 'indeterminate') {
     // Update drawer state.
-    drawer.state = 'opening';
+    entry.state = 'opening';
 
     // Run the open transition.
-    await openTransition(drawer.el, config);
+    if (config.transition) {
+      await transition(entry.el, {
+        start: config.stateClosing,
+        finish: config.stateClosed
+      }, {
+        start: config.stateOpening,
+        finish: config.stateOpened
+      }, config.transitionDuration);
+    } else {
+      entry.el.classList.add(config.stateOpened);
+      entry.el.classList.remove(config.stateClosed);
+    }
 
+    // Update drawer state.
+    entry.state = 'opened';
+
     // Update the global state if mode is modal.
-    if (drawer.mode === 'modal') updateGlobalState(true, config);
+    if (entry.mode === 'modal') updateGlobalState(true, config);
 
-    // Update drawer state.
-    drawer.state = 'opened';
-  }
+    // Set focus to the drawer element if the focus param is true.
+    if (focus) {
+      updateFocusState.call(this, entry);
+    }
 
-  // Set focus to the drawer element if the focus param is true.
-  if (focus) {
-    updateFocusState.call(this, drawer);
+    // Dispatch custom opened event.
+    entry.el.dispatchEvent(new CustomEvent(config.customEventPrefix + 'opened', {
+      detail: this,
+      bubbles: true
+    }));
   }
 
-  // Dispatch custom opened event.
-  drawer.el.dispatchEvent(new CustomEvent(config.customEventPrefix + 'opened', {
-    detail: this,
-    bubbles: true
-  }));
-
   // Return the drawer.
-  return drawer;
+  return entry;
 }

src/js/register.js

@@ -8,6 +8,6 @@ import { Breakpoint, getConfig } from '@vrembem/core';
 import { switchMode } from './switchMode';
-import { initialState } from './helpers/initialState';
+import { applyInitialState } from './helpers';
 import { getBreakpoint } from './helpers';
 
-export async function register(el, dialog) {
+export async function register(el, config = {}) {
   // Deregister entry incase it has already been registered.
@@ -22,4 +22,51 @@ await deregister.call(this, el, false);
 
-  // Setup methods API.
-  const methods = {
+  // Setup private variables and their default values if any.
+  let _mode, _state = 'indeterminate';
+
+  // Setup the drawer object.
+  const entry = {
+    id: el.id,
+    el: el,
+    dialog: null,
+    trigger: null,
+    settings: { ...getConfig(el, this.settings.dataConfig), ...config },
+    inlineState: 'indeterminate',
+    get breakpoint() {
+      return getBreakpoint.call(root, el);
+    },
+    get store() {
+      return root.store.get(this.id);
+    },
+    get mode() {
+      return _mode;
+    },
+    set mode(value) {
+      _mode = value;
+      switchMode.call(root, this);
+    },
+    get state() {
+      return _state;
+    },
+    set state(value) {
+      _state = value;
+
+      // If mode is inline and not in a transitioning state...
+      if (this.mode === 'inline' && value != 'opening' && value != 'closing') {
+        // Save the inline state.
+        this.inlineState = value;
+
+        // Save the store state if enabled.
+        if (this.getSetting('store')) {
+          root.store.set(this.id, value);
+        }
+      }
+
+      // If state is indeterminate, remove the state classes.
+      if (value === 'indeterminate') {
+        this.el.classList.remove(this.getSetting('stateOpened'));
+        this.el.classList.remove(this.getSetting('stateOpening'));
+        this.el.classList.remove(this.getSetting('stateClosed'));
+        this.el.classList.remove(this.getSetting('stateClosing'));
+      }
+    },
     open(transition, focus) {
@@ -48,3 +95,6 @@ return open.call(root, this, transition, focus);
     handleBreakpoint(event) {
-      this.mode = (event.matches) ? 'inline' : 'modal';
+      const bpMode = (event.matches) ? 'inline' : 'modal';
+      if (this.mode != bpMode) {
+        this.mode = bpMode;
+      }
       return this;
@@ -57,47 +107,9 @@ },
 
-  // Setup the drawer object.
-  const entry = {
-    id: el.id,
-    el: el,
-    dialog: dialog,
-    trigger: null,
-    settings: getConfig(el, this.settings.dataConfig),
-    get breakpoint() {
-      return getBreakpoint.call(root, el);
-    },
-    get state() {
-      return __state;
-    },
-    set state(value) {
-      __state = value;
-      // Save 'opened' and 'closed' states to store if mode is inline.
-      if (value === 'opened' || value === 'closed') {
-        if (this.mode === 'inline') root.store.set(this.id, this.state);
-      }
-    },
-    get mode() {
-      return __mode;
-    },
-    set mode(value) {
-      __mode = value;
-      switchMode.call(root, this);
-    },
-    ...methods
-  };
+  // Add entry to collection.
+  this.collection.push(entry);
 
-  // Create the state var with the initial state.
-  let __state = (el.classList.contains(entry.getSetting('stateOpened'))) ? 'opened' : 'closed';
+  // Set the dialog element. If none is found, use the root element.
+  const dialog = el.querySelector(entry.getSetting('selectorDialog'));
+  entry.dialog = (dialog) ? dialog : el;
 
-  // Create the mode var with the initial mode.
-  let __mode = (el.classList.contains(entry.getSetting('classModal'))) ? 'modal' : 'inline';
-
-  // Setup mode specific attributes.
-  if (entry.mode === 'modal') {
-    // Set aria-modal attribute to true.
-    entry.dialog.setAttribute('aria-modal', 'true');
-  } else {
-    // Remove the aria-modal attribute.
-    entry.dialog.removeAttribute('aria-modal');
-  }
-
   // Set tabindex="-1" so dialog is focusable via JS or click.
@@ -108,12 +120,14 @@ if (entry.getSetting('setTabindex')) {
 
-  // Add entry to collection.
-  this.collection.push(entry);
+  // Set both the initial state and inline state.
+  await applyInitialState(entry);
 
-  // If the entry has a breakpoint...
+  // Set the inline state.
+  entry.inlineState = entry.state;
+
+  // Set the initial mode.
+  entry.mode = (el.classList.contains(entry.getSetting('classModal'))) ? 'modal' : 'inline';
+
+  // If the entry has a breakpoint, get it mounted.
   if (entry.breakpoint) {
-    // Mount media query breakpoint functionality.
     entry.mountBreakpoint();
-  } else {
-    // Else, Setup initial state.
-    await initialState.call(this, entry);
   }
@@ -120,0 +134,0 @@

src/js/switchMode.js

 import { updateGlobalState } from '@vrembem/core';
 import { close } from './close';
-import { initialState } from './helpers/initialState';
+import { applyInlineState } from './helpers';
 
@@ -29,4 +29,4 @@ export function switchMode(entry) {
 
-  // Setup initial state.
-  await initialState.call(this, entry);
+  // Apply the inline state.
+  await applyInlineState(entry);
 
@@ -44,4 +44,2 @@ // Dispatch custom switch event.
 async function toModal(entry) {
-  // Get the drawer configuration.
-
   // Add the modal class.
@@ -53,8 +51,2 @@ entry.el.classList.add(entry.getSetting('classModal'));
 
-  // If there isn't a stored state but also has the opened state class...
-  if (!this.store.get(entry.id) && entry.el.classList.contains(entry.getSetting('stateOpened'))) {
-    // Save the opened state in local store.
-    this.store.set(entry.id, 'opened');
-  }
-
   // Modal drawer defaults to closed state.
@@ -61,0 +53,0 @@ await close.call(this, entry, false, false);

src/js/toggle.js

@@ -7,10 +7,10 @@ import { open } from './open';
   // Get the drawer from collection.
-  const drawer = getDrawer.call(this, query);
+  const entry = getDrawer.call(this, query);
 
   // Open or close the drawer based on its current state.
-  if (drawer.state === 'closed') {
-    return open.call(this, drawer, transition, focus);
+  if (entry.state === 'closed') {
+    return open.call(this, entry, transition, focus);
   } else {
-    return close.call(this, drawer, transition, focus);
+    return close.call(this, entry, transition, focus);
   }
 }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

307696

increased by0.57%

Lines of code

2989

increased by4.95%

Dependency changes

• Updated@vrembem/core@^4.0.0-next.4