@lanrenbang/basecoat-ultra 0.1.7 → 0.2.0

package/dist/js/resizable.min.js

@@ -1,284 +1,282 @@
-var d = typeof window < "u" ? window : null, W = d === null, N = W ? void 0 : d.document, m = "addEventListener", z = "removeEventListener", T = "getBoundingClientRect", L = "_a", h = "_b", y = "_c", k = "horizontal", g = function() {
+var m = typeof window < "u" ? window : null, V = m === null, N = V ? void 0 : m.document, z = "addEventListener", h = "removeEventListener", q = "getBoundingClientRect", C = "_a", g = "_b", y = "_c", k = "horizontal", S = function() {
   return !1;
-}, he = W ? "calc" : ["", "-webkit-", "-moz-", "-o-"].filter(function(l) {
+}, ze = V ? "calc" : ["", "-webkit-", "-moz-", "-o-"].filter(function(a) {
   var i = N.createElement("div");
-  return i.style.cssText = "width:" + l + "calc(9px)", !!i.style.length;
-}).shift() + "calc", ne = function(l) {
-  return typeof l == "string" || l instanceof String;
-}, re = function(l) {
-  if (ne(l)) {
-    var i = N.querySelector(l);
+  return i.style.cssText = "width:" + a + "calc(9px)", !!i.style.length;
+}).shift() + "calc", te = function(a) {
+  return typeof a == "string" || a instanceof String;
+}, ee = function(a) {
+  if (te(a)) {
+    var i = N.querySelector(a);
     if (!i)
-      throw new Error("Selector " + l + " did not match a DOM element");
+      throw new Error("Selector " + a + " did not match a DOM element");
     return i;
   }
-  return l;
-}, f = function(l, i, a) {
-  var s = l[i];
-  return s !== void 0 ? s : a;
-}, G = function(l, i, a, s) {
+  return a;
+}, f = function(a, i, s) {
+  var l = a[i];
+  return l !== void 0 ? l : s;
+}, B = function(a, i, s, l) {
   if (i) {
-    if (s === "end")
+    if (l === "end")
       return 0;
-    if (s === "center")
-      return l / 2;
-  } else if (a) {
-    if (s === "start")
+    if (l === "center")
+      return a / 2;
+  } else if (s) {
+    if (l === "start")
       return 0;
-    if (s === "center")
-      return l / 2;
+    if (l === "center")
+      return a / 2;
   }
-  return l;
-}, ge = function(l, i) {
-  var a = N.createElement("div");
-  return a.className = "gutter gutter-" + i, a;
-}, Se = function(l, i, a) {
-  var s = {};
-  return ne(i) ? s[l] = i : s[l] = he + "(" + i + "% - " + a + "px)", s;
-}, ye = function(l, i) {
-  var a;
-  return a = {}, a[l] = i + "px", a;
-}, pe = function(l, i) {
-  if (i === void 0 && (i = {}), W)
+  return a;
+}, he = function(a, i) {
+  var s = N.createElement("div");
+  return s.className = "gutter gutter-" + i, s;
+}, ge = function(a, i, s) {
+  var l = {};
+  return te(i) ? l[a] = i : l[a] = ze + "(" + i + "% - " + s + "px)", l;
+}, Se = function(a, i) {
+  var s;
+  return s = {}, s[a] = i + "px", s;
+}, ye = function(a, i) {
+  if (i === void 0 && (i = {}), V)
     return {};
-  var a = l, s, p, E, O, S, u;
-  Array.from && (a = Array.from(a));
-  var j = re(a[0]), M = j.parentNode, X = getComputedStyle ? getComputedStyle(M) : null, Y = X ? X.flexDirection : null, B = f(i, "sizes") || a.map(function() {
-    return 100 / a.length;
-  }), R = f(i, "minSize", 100), $ = Array.isArray(R) ? R : a.map(function() {
-    return R;
-  }), q = f(i, "maxSize", 1 / 0), ie = Array.isArray(q) ? q : a.map(function() {
-    return q;
-  }), ae = f(i, "expandToMin", !1), D = f(i, "gutterSize", 10), C = f(i, "gutterAlign", "center"), P = f(i, "snapOffset", 30), se = Array.isArray(P) ? P : a.map(function() {
+  var s = a, l, b, v, p, O, o;
+  Array.from && (s = Array.from(s));
+  var re = ee(s[0]), D = re.parentNode, W = getComputedStyle ? getComputedStyle(D) : null, X = W ? W.flexDirection : null, G = f(i, "sizes") || s.map(function() {
+    return 100 / s.length;
+  }), j = f(i, "minSize", 100), R = Array.isArray(j) ? j : s.map(function() {
+    return j;
+  }), P = f(i, "maxSize", 1 / 0), ne = Array.isArray(P) ? P : s.map(function() {
     return P;
-  }), _ = f(i, "dragInterval", 1), w = f(i, "direction", k), H = f(
+  }), ie = f(i, "expandToMin", !1), M = f(i, "gutterSize", 10), F = f(i, "gutterAlign", "center"), _ = f(i, "snapOffset", 30), ae = Array.isArray(_) ? _ : s.map(function() {
+    return _;
+  }), $ = f(i, "dragInterval", 1), E = f(i, "direction", k), H = f(
     i,
     "cursor",
-    w === k ? "col-resize" : "row-resize"
-  ), le = f(i, "gutter", ge), Z = f(
+    E === k ? "col-resize" : "row-resize"
+  ), se = f(i, "gutter", he), Y = f(
     i,
     "elementStyle",
-    Se
-  ), ue = f(i, "gutterStyle", ye);
-  w === k ? (s = "width", p = "clientX", E = "left", O = "right", S = "clientWidth") : w === "vertical" && (s = "height", p = "clientY", E = "top", O = "bottom", S = "clientHeight");
+    ge
+  ), le = f(i, "gutterStyle", Se);
+  E === k ? (l = "width", b = "clientX", v = "left", p = "right", O = "clientWidth") : E === "vertical" && (l = "height", b = "clientY", v = "top", p = "bottom", O = "clientHeight");
   function A(r, e, t, n) {
-    var c = Z(s, e, t, n);
-    Object.keys(c).forEach(function(o) {
-      r.style[o] = c[o];
+    var c = Y(l, e, t, n);
+    Object.keys(c).forEach(function(u) {
+      r.style[u] = c[u];
     });
   }
-  function oe(r, e, t) {
-    var n = ue(s, e, t);
+  function ue(r, e, t) {
+    var n = le(l, e, t);
     Object.keys(n).forEach(function(c) {
       r.style[c] = n[c];
     });
   }
   function I() {
-    return u.map(function(r) {
+    return o.map(function(r) {
       return r.size;
     });
   }
-  function J(r) {
-    return "touches" in r ? r.touches[0][p] : r[p];
+  function Z(r) {
+    return "touches" in r ? r.touches[0][b] : r[b];
   }
-  function K(r) {
-    var e = u[this.a], t = u[this.b], n = e.size + t.size;
-    e.size = r / this.size * n, t.size = n - r / this.size * n, A(e.element, e.size, this[h], e.i), A(t.element, t.size, this[y], t.i);
+  function J(r) {
+    var e = o[this.a], t = o[this.b], n = e.size + t.size;
+    e.size = r / this.size * n, t.size = n - r / this.size * n, A(e.element, e.size, this[g], e.i), A(t.element, t.size, this[y], t.i);
   }
-  function ce(r) {
-    var e, t = u[this.a], n = u[this.b];
-    this.dragging && (e = J(r) - this.start + (this[h] - this.dragOffset), _ > 1 && (e = Math.round(e / _) * _), e <= t.minSize + t.snapOffset + this[h] ? e = t.minSize + this[h] : e >= this.size - (n.minSize + n.snapOffset + this[y]) && (e = this.size - (n.minSize + this[y])), e >= t.maxSize - t.snapOffset + this[h] ? e = t.maxSize + this[h] : e <= this.size - (n.maxSize - n.snapOffset + this[y]) && (e = this.size - (n.maxSize + this[y])), K.call(this, e), f(i, "onDrag", g)(I()));
+  function oe(r) {
+    var e, t = o[this.a], n = o[this.b];
+    this.dragging && (e = Z(r) - this.start + (this[g] - this.dragOffset), $ > 1 && (e = Math.round(e / $) * $), e <= t.minSize + t.snapOffset + this[g] ? e = t.minSize + this[g] : e >= this.size - (n.minSize + n.snapOffset + this[y]) && (e = this.size - (n.minSize + this[y])), e >= t.maxSize - t.snapOffset + this[g] ? e = t.maxSize + this[g] : e <= this.size - (n.maxSize - n.snapOffset + this[y]) && (e = this.size - (n.maxSize + this[y])), J.call(this, e), f(i, "onDrag", S)(I()));
   }
-  function Q() {
-    var r = u[this.a].element, e = u[this.b].element, t = r[T](), n = e[T]();
-    this.size = t[s] + n[s] + this[h] + this[y], this.start = t[E], this.end = t[O];
+  function K() {
+    var r = o[this.a].element, e = o[this.b].element, t = r[q](), n = e[q]();
+    this.size = t[l] + n[l] + this[g] + this[y], this.start = t[v], this.end = t[p];
   }
-  function fe(r) {
+  function ce(r) {
     if (!getComputedStyle)
       return null;
     var e = getComputedStyle(r);
     if (!e)
       return null;
-    var t = r[S];
-    return t === 0 ? null : (w === k ? t -= parseFloat(e.paddingLeft) + parseFloat(e.paddingRight) : t -= parseFloat(e.paddingTop) + parseFloat(e.paddingBottom), t);
+    var t = r[O];
+    return t === 0 ? null : (E === k ? t -= parseFloat(e.paddingLeft) + parseFloat(e.paddingRight) : t -= parseFloat(e.paddingTop) + parseFloat(e.paddingBottom), t);
   }
-  function ee(r) {
-    var e = fe(M);
-    if (e === null || $.reduce(function(o, v) {
-      return o + v;
+  function Q(r) {
+    var e = ce(D);
+    if (e === null || R.reduce(function(u, d) {
+      return u + d;
     }, 0) > e)
       return r;
-    var t = 0, n = [], c = r.map(function(o, v) {
-      var x = e * o / 100, F = G(
-        D,
-        v === 0,
-        v === r.length - 1,
-        C
-      ), U = $[v] + F;
+    var t = 0, n = [], c = r.map(function(u, d) {
+      var x = e * u / 100, L = B(
+        M,
+        d === 0,
+        d === r.length - 1,
+        F
+      ), U = R[d] + L;
       return x < U ? (t += U - x, n.push(0), U) : (n.push(x - U), x);
     });
-    return t === 0 ? r : c.map(function(o, v) {
-      var x = o;
-      if (t > 0 && n[v] - t > 0) {
-        var F = Math.min(
+    return t === 0 ? r : c.map(function(u, d) {
+      var x = u;
+      if (t > 0 && n[d] - t > 0) {
+        var L = Math.min(
           t,
-          n[v] - t
+          n[d] - t
         );
-        t -= F, x = o - F;
+        t -= L, x = u - L;
       }
       return x / e * 100;
     });
   }
-  function ve() {
-    var r = this, e = u[r.a].element, t = u[r.b].element;
-    r.dragging && f(i, "onDragEnd", g)(I()), r.dragging = !1, d[z]("mouseup", r.stop), d[z]("touchend", r.stop), d[z]("touchcancel", r.stop), d[z]("mousemove", r.move), d[z]("touchmove", r.move), r.stop = null, r.move = null, e[z]("selectstart", g), e[z]("dragstart", g), t[z]("selectstart", g), t[z]("dragstart", g), e.style.userSelect = "", e.style.webkitUserSelect = "", e.style.MozUserSelect = "", e.style.pointerEvents = "", t.style.userSelect = "", t.style.webkitUserSelect = "", t.style.MozUserSelect = "", t.style.pointerEvents = "", r.gutter.style.cursor = "", r.parent.style.cursor = "", N.body.style.cursor = "";
+  function fe() {
+    var r = this, e = o[r.a].element, t = o[r.b].element;
+    r.dragging && f(i, "onDragEnd", S)(I()), r.dragging = !1, m[h]("mouseup", r.stop), m[h]("touchend", r.stop), m[h]("touchcancel", r.stop), m[h]("mousemove", r.move), m[h]("touchmove", r.move), r.stop = null, r.move = null, e[h]("selectstart", S), e[h]("dragstart", S), t[h]("selectstart", S), t[h]("dragstart", S), e.style.userSelect = "", e.style.webkitUserSelect = "", e.style.MozUserSelect = "", e.style.pointerEvents = "", t.style.userSelect = "", t.style.webkitUserSelect = "", t.style.MozUserSelect = "", t.style.pointerEvents = "", r.gutter.style.cursor = "", r.parent.style.cursor = "", N.body.style.cursor = "";
   }
-  function de(r) {
+  function ve(r) {
     if (!("button" in r && r.button !== 0)) {
-      var e = this, t = u[e.a].element, n = u[e.b].element;
-      e.dragging || f(i, "onDragStart", g)(I()), r.preventDefault(), e.dragging = !0, e.move = ce.bind(e), e.stop = ve.bind(e), d[m]("mouseup", e.stop), d[m]("touchend", e.stop), d[m]("touchcancel", e.stop), d[m]("mousemove", e.move), d[m]("touchmove", e.move), t[m]("selectstart", g), t[m]("dragstart", g), n[m]("selectstart", g), n[m]("dragstart", g), t.style.userSelect = "none", t.style.webkitUserSelect = "none", t.style.MozUserSelect = "none", t.style.pointerEvents = "none", n.style.userSelect = "none", n.style.webkitUserSelect = "none", n.style.MozUserSelect = "none", n.style.pointerEvents = "none", e.gutter.style.cursor = H, e.parent.style.cursor = H, N.body.style.cursor = H, Q.call(e), e.dragOffset = J(r) - e.end;
+      var e = this, t = o[e.a].element, n = o[e.b].element;
+      e.dragging || f(i, "onDragStart", S)(I()), r.preventDefault(), e.dragging = !0, e.move = oe.bind(e), e.stop = fe.bind(e), m[z]("mouseup", e.stop), m[z]("touchend", e.stop), m[z]("touchcancel", e.stop), m[z]("mousemove", e.move), m[z]("touchmove", e.move), t[z]("selectstart", S), t[z]("dragstart", S), n[z]("selectstart", S), n[z]("dragstart", S), t.style.userSelect = "none", t.style.webkitUserSelect = "none", t.style.MozUserSelect = "none", t.style.pointerEvents = "none", n.style.userSelect = "none", n.style.webkitUserSelect = "none", n.style.MozUserSelect = "none", n.style.pointerEvents = "none", e.gutter.style.cursor = H, e.parent.style.cursor = H, N.body.style.cursor = H, K.call(e), e.dragOffset = Z(r) - e.end;
     }
   }
-  B = ee(B);
-  var b = [];
-  u = a.map(function(r, e) {
+  G = Q(G);
+  var w = [];
+  o = s.map(function(r, e) {
     var t = {
-      element: re(r),
-      size: B[e],
-      minSize: $[e],
-      maxSize: ie[e],
-      snapOffset: se[e],
+      element: ee(r),
+      size: G[e],
+      minSize: R[e],
+      maxSize: ne[e],
+      snapOffset: ae[e],
       i: e
     }, n;
     if (e > 0 && (n = {
       a: e - 1,
       b: e,
       dragging: !1,
-      direction: w,
-      parent: M
-    }, n[h] = G(
-      D,
+      direction: E,
+      parent: D
+    }, n[g] = B(
+      M,
       e - 1 === 0,
       !1,
-      C
-    ), n[y] = G(
-      D,
+      F
+    ), n[y] = B(
+      M,
       !1,
-      e === a.length - 1,
-      C
-    ), Y === "row-reverse" || Y === "column-reverse")) {
+      e === s.length - 1,
+      F
+    ), X === "row-reverse" || X === "column-reverse")) {
       var c = n.a;
       n.a = n.b, n.b = c;
     }
     if (e > 0) {
-      var o = le(e, w, t.element);
-      oe(o, D, e), n[L] = de.bind(n), o[m](
+      var u = se(e, E, t.element);
+      ue(u, M, e), n[C] = ve.bind(n), u[z](
         "mousedown",
-        n[L]
-      ), o[m](
+        n[C]
+      ), u[z](
         "touchstart",
-        n[L]
-      ), M.insertBefore(o, t.element), n.gutter = o;
+        n[C]
+      ), D.insertBefore(u, t.element), n.gutter = u;
     }
     return A(
       t.element,
       t.size,
-      G(
-        D,
+      B(
+        M,
         e === 0,
-        e === a.length - 1,
-        C
+        e === s.length - 1,
+        F
       ),
       e
-    ), e > 0 && b.push(n), t;
+    ), e > 0 && w.push(n), t;
   });
-  function te(r) {
-    var e = r.i === b.length, t = e ? b[r.i - 1] : b[r.i];
-    Q.call(t);
-    var n = e ? t.size - r.minSize - t[y] : r.minSize + t[h];
-    K.call(t, n);
+  function T(r) {
+    var e = r.i === w.length, t = e ? w[r.i - 1] : w[r.i];
+    K.call(t);
+    var n = e ? t.size - r.minSize - t[y] : r.minSize + t[g];
+    J.call(t, n);
   }
-  u.forEach(function(r) {
-    var e = r.element[T]()[s];
-    e < r.minSize && (ae ? te(r) : r.minSize = e);
+  o.forEach(function(r) {
+    var e = r.element[q]()[l];
+    e < r.minSize && (ie ? T(r) : r.minSize = e);
   });
-  function me(r) {
-    var e = ee(r);
+  function de(r) {
+    var e = Q(r);
     e.forEach(function(t, n) {
       if (n > 0) {
-        var c = b[n - 1], o = u[c.a], v = u[c.b];
-        o.size = e[n - 1], v.size = t, A(o.element, o.size, c[h], o.i), A(v.element, v.size, c[y], v.i);
+        var c = w[n - 1], u = o[c.a], d = o[c.b];
+        u.size = e[n - 1], d.size = t, A(u.element, u.size, c[g], u.i), A(d.element, d.size, c[y], d.i);
       }
     });
   }
-  function ze(r, e) {
-    b.forEach(function(t) {
-      if (e !== !0 ? t.parent.removeChild(t.gutter) : (t.gutter[z](
+  function me(r, e) {
+    w.forEach(function(t) {
+      if (e !== !0 ? t.parent.removeChild(t.gutter) : (t.gutter[h](
         "mousedown",
-        t[L]
-      ), t.gutter[z](
+        t[C]
+      ), t.gutter[h](
         "touchstart",
-        t[L]
+        t[C]
       )), r !== !0) {
-        var n = Z(
-          s,
+        var n = Y(
+          l,
           t.a.size,
-          t[h]
+          t[g]
         );
         Object.keys(n).forEach(function(c) {
-          u[t.a].element.style[c] = "", u[t.b].element.style[c] = "";
+          o[t.a].element.style[c] = "", o[t.b].element.style[c] = "";
         });
       }
     });
   }
   return {
-    setSizes: me,
+    setSizes: de,
     getSizes: I,
     collapse: function(e) {
-      te(u[e]);
+      T(o[e]);
     },
-    destroy: ze,
-    parent: M,
-    pairs: b
+    destroy: me,
+    parent: D,
+    pairs: w
   };
 };
-const V = (l = document) => {
-  l.querySelectorAll(".resizable-group").forEach((a) => {
-    if (a.dataset.splitInitialized) return;
-    const s = a.dataset.direction || "horizontal", p = Array.from(a.children).filter((S) => S.tagName === "DIV" || S.tagName === "SECTION" || S.tagName === "ASIDE");
-    if (p.length < 2) return;
-    let E;
-    a.dataset.sizes && (E = a.dataset.sizes.split(",").map(Number));
-    let O;
-    a.dataset.minSizes && (O = a.dataset.minSizes.split(",").map(Number)), pe(p, {
-      sizes: E || void 0,
-      // Default is equal
-      minSize: O || 100,
-      direction: s,
-      gutterSize: 5,
-      // 5px gutter
-      cursor: s === "horizontal" ? "col-resize" : "row-resize",
-      elementStyle: (S, u, j) => ({
-        "flex-basis": `calc(${u}% - ${j}px)`
+const be = (a) => {
+  const i = a.dataset.direction || "horizontal", s = Array.from(a.children).filter(
+    (v) => (v.tagName === "DIV" || v.tagName === "SECTION" || v.tagName === "ASIDE") && !v.classList.contains("gutter")
+  );
+  if (s.length < 2) return;
+  let l;
+  a.dataset.sizes && (l = a.dataset.sizes.split(",").map(Number));
+  let b;
+  a.dataset.minSizes && (b = a.dataset.minSizes.split(",").map(Number));
+  try {
+    ye(s, {
+      sizes: l || void 0,
+      minSize: b || 100,
+      direction: i,
+      gutterSize: 1,
+      cursor: i === "horizontal" ? "col-resize" : "row-resize",
+      onDragEnd: (v) => {
+        a.dispatchEvent(new CustomEvent("change", {
+          bubbles: !0,
+          detail: { value: v }
+        }));
+      },
+      elementStyle: (v, p, O) => ({
+        "flex-basis": `calc(${p}% - ${O}px)`
       }),
-      gutterStyle: (S, u) => ({
-        "flex-basis": `${u}px`
+      gutterStyle: (v, p) => ({
+        "flex-basis": `${p}px`
       })
-    }), a.dataset.splitInitialized = "true";
-  });
-};
-if (typeof window < "u") {
-  const l = new MutationObserver((i) => {
-    i.forEach((a) => {
-      a.type === "childList" && a.addedNodes.forEach((s) => {
-        s.nodeType === 1 && (s.classList?.contains("resizable-group") ? V(s.parentNode) : s.querySelector?.(".resizable-group") && V(s));
-      });
     });
-  });
-  document.addEventListener("DOMContentLoaded", () => {
-    V(), l.observe(document.body, { childList: !0, subtree: !0 });
-  });
-}
+  } catch (v) {
+    console.error("Basecoat: Resizable initialization failed", v);
+  }
+  a.dataset.resizableInitialized = !0, a.dispatchEvent(new CustomEvent("basecoat:initialized"));
+};
+window.basecoat && window.basecoat.register("resizable", ".resizable-group:not([data-resizable-initialized])", be);
 export {
-  V as initResizable
+  be as initResizable
 };

package/dist/js/sheet.js

@@ -1,18 +1,6 @@
 (() => {
-  const toggleSheet = (trigger) => {
-    const targetId = trigger.getAttribute("aria-controls") || trigger.dataset.target;
-    if (!targetId) return;
-    const sheet = document.getElementById(targetId);
-    if (!sheet) return;
-    const isOpen = sheet.getAttribute("aria-hidden") === "false";
-    sheet.querySelector(".sheet-content, .drawer-content");
-    if (isOpen) {
-      closeSheet(sheet);
-    } else {
-      openSheet(sheet, trigger);
-    }
-  };
   const openSheet = (sheet, trigger) => {
+    document.dispatchEvent(new CustomEvent("basecoat:popover", { detail: { source: sheet } }));
     sheet.setAttribute("aria-hidden", "false");
     sheet.offsetHeight;
     const content = sheet.querySelector(".sheet-content, .drawer-content");
@@ -50,28 +38,30 @@
       trigger?.setAttribute("aria-expanded", "false");
     }
   };
+  const initSheet = (sheet) => {
+    sheet.dataset.sheetInitialized = true;
+    sheet.dispatchEvent(new CustomEvent("basecoat:initialized"));
+  };
   document.addEventListener("click", (e) => {
     const trigger = e.target.closest('[data-toggle="sheet"], [data-toggle="drawer"]');
     if (trigger) {
       e.preventDefault();
+      const targetId = trigger.getAttribute("aria-controls") || trigger.dataset.target;
+      const sheet = document.getElementById(targetId);
+      if (!sheet) return;
       if (!trigger.id) {
         trigger.id = "trigger-" + Math.random().toString(36).substr(2, 9);
       }
-      toggleSheet(trigger);
+      const isOpen = sheet.getAttribute("aria-hidden") === "false";
+      if (isOpen) {
+        closeSheet(sheet);
+      } else {
+        openSheet(sheet, trigger);
+      }
     }
-  });
-  document.addEventListener("click", (e) => {
     if (e.target.matches(".sheet, .drawer")) {
       closeSheet(e.target);
     }
-  });
-  document.addEventListener("keydown", (e) => {
-    if (e.key === "Escape") {
-      const openSheets = document.querySelectorAll('.sheet[aria-hidden="false"], .drawer[aria-hidden="false"]');
-      openSheets.forEach(closeSheet);
-    }
-  });
-  document.addEventListener("click", (e) => {
     const closeBtn = e.target.closest("[data-close]");
     if (closeBtn) {
       const sheet = closeBtn.closest(".sheet, .drawer");
@@ -80,6 +70,18 @@
       }
     }
   });
-  if (!window.basecoat) window.basecoat = {};
-  window.basecoat.sheet = { open: openSheet, close: closeSheet };
+  document.addEventListener("keydown", (e) => {
+    if (e.key === "Escape") {
+      const openSheets = document.querySelectorAll('.sheet[aria-hidden="false"], .drawer[aria-hidden="false"]');
+      openSheets.forEach(closeSheet);
+    }
+  });
+  document.addEventListener("basecoat:popover", () => {
+    const openSheets = document.querySelectorAll('.sheet[aria-hidden="false"], .drawer[aria-hidden="false"]');
+    openSheets.forEach(closeSheet);
+  });
+  if (window.basecoat) {
+    window.basecoat.register("sheet", ".sheet:not([data-sheet-initialized]), .drawer:not([data-sheet-initialized])", initSheet);
+    window.basecoat.sheet = { open: openSheet, close: closeSheet };
+  }
 })();

package/dist/js/sheet.min.js

@@ -1,40 +1,40 @@
 (() => {
-  const d = (t) => {
-    const e = t.getAttribute("aria-controls") || t.dataset.target;
-    if (!e) return;
-    const n = document.getElementById(e);
-    if (!n) return;
-    const a = n.getAttribute("aria-hidden") === "false";
-    n.querySelector(".sheet-content, .drawer-content"), a ? o(n) : r(n, t);
-  }, r = (t, e) => {
-    t.setAttribute("aria-hidden", "false"), t.offsetHeight;
-    const n = t.querySelector(".sheet-content, .drawer-content");
-    n && (n.dataset.state = "open"), e && (e.setAttribute("aria-expanded", "true"), t.dataset.triggerId = e.id || ""), document.body.style.overflow = "hidden";
-  }, o = (t) => {
-    const e = t.querySelector(".sheet-content, .drawer-content");
-    if (e) {
-      e.dataset.state = "closed";
-      const a = parseFloat(window.getComputedStyle(e).transitionDuration) * 1e3 || 300;
+  const s = (e, t) => {
+    document.dispatchEvent(new CustomEvent("basecoat:popover", { detail: { source: e } })), e.setAttribute("aria-hidden", "false"), e.offsetHeight;
+    const a = e.querySelector(".sheet-content, .drawer-content");
+    a && (a.dataset.state = "open"), t && (t.setAttribute("aria-expanded", "true"), e.dataset.triggerId = t.id || ""), document.body.style.overflow = "hidden";
+  }, n = (e) => {
+    const t = e.querySelector(".sheet-content, .drawer-content");
+    if (t) {
+      t.dataset.state = "closed";
+      const o = parseFloat(window.getComputedStyle(t).transitionDuration) * 1e3 || 300;
       setTimeout(() => {
-        e.dataset.state === "closed" && (t.setAttribute("aria-hidden", "true"), document.body.style.overflow = "", t.dataset.triggerId && document.getElementById(t.dataset.triggerId)?.focus());
-      }, a);
+        t.dataset.state === "closed" && (e.setAttribute("aria-hidden", "true"), document.body.style.overflow = "", e.dataset.triggerId && document.getElementById(e.dataset.triggerId)?.focus());
+      }, o);
     } else
-      t.setAttribute("aria-hidden", "true"), document.body.style.overflow = "";
-    const n = t.dataset.triggerId;
-    n && document.getElementById(n)?.setAttribute("aria-expanded", "false");
+      e.setAttribute("aria-hidden", "true"), document.body.style.overflow = "";
+    const a = e.dataset.triggerId;
+    a && document.getElementById(a)?.setAttribute("aria-expanded", "false");
+  }, i = (e) => {
+    e.dataset.sheetInitialized = !0, e.dispatchEvent(new CustomEvent("basecoat:initialized"));
   };
-  document.addEventListener("click", (t) => {
-    const e = t.target.closest('[data-toggle="sheet"], [data-toggle="drawer"]');
-    e && (t.preventDefault(), e.id || (e.id = "trigger-" + Math.random().toString(36).substr(2, 9)), d(e));
-  }), document.addEventListener("click", (t) => {
-    t.target.matches(".sheet, .drawer") && o(t.target);
-  }), document.addEventListener("keydown", (t) => {
-    t.key === "Escape" && document.querySelectorAll('.sheet[aria-hidden="false"], .drawer[aria-hidden="false"]').forEach(o);
-  }), document.addEventListener("click", (t) => {
-    const e = t.target.closest("[data-close]");
-    if (e) {
-      const n = e.closest(".sheet, .drawer");
-      n && o(n);
+  document.addEventListener("click", (e) => {
+    const t = e.target.closest('[data-toggle="sheet"], [data-toggle="drawer"]');
+    if (t) {
+      e.preventDefault();
+      const o = t.getAttribute("aria-controls") || t.dataset.target, r = document.getElementById(o);
+      if (!r) return;
+      t.id || (t.id = "trigger-" + Math.random().toString(36).substr(2, 9)), r.getAttribute("aria-hidden") === "false" ? n(r) : s(r, t);
     }
-  }), window.basecoat || (window.basecoat = {}), window.basecoat.sheet = { open: r, close: o };
+    e.target.matches(".sheet, .drawer") && n(e.target);
+    const a = e.target.closest("[data-close]");
+    if (a) {
+      const o = a.closest(".sheet, .drawer");
+      o && n(o);
+    }
+  }), document.addEventListener("keydown", (e) => {
+    e.key === "Escape" && document.querySelectorAll('.sheet[aria-hidden="false"], .drawer[aria-hidden="false"]').forEach(n);
+  }), document.addEventListener("basecoat:popover", () => {
+    document.querySelectorAll('.sheet[aria-hidden="false"], .drawer[aria-hidden="false"]').forEach(n);
+  }), window.basecoat && (window.basecoat.register("sheet", ".sheet:not([data-sheet-initialized]), .drawer:not([data-sheet-initialized])", i), window.basecoat.sheet = { open: s, close: n });
 })();