inclusive-elements 0.2.1 → 0.2.2

package/dist/inclusive-elements.js

@@ -1,25 +1,36 @@
-var T = Object.defineProperty;
-var C = (a, o, t) => o in a ? T(a, o, { enumerable: !0, configurable: !0, writable: !0, value: t }) : a[o] = t;
-var s = (a, o, t) => (C(a, typeof o != "symbol" ? o + "" : o, t), t);
-import { move as E, hello as l, goodbye as u, cancel as k } from "hello-goodbye";
-import { isFocusable as D, focusable as g } from "tabbable";
+var C = Object.defineProperty;
+var T = (o, r, t) => r in o ? C(o, r, { enumerable: !0, configurable: !0, writable: !0, value: t }) : o[r] = t;
+var s = (o, r, t) => (T(o, typeof r != "symbol" ? r + "" : r, t), t);
+import { move as k, hello as h, goodbye as l, cancel as E } from "hello-goodbye";
+import { isFocusable as D, focusable as A } from "tabbable";
 import { createFocusTrap as H } from "focus-trap";
-import { autoUpdate as M, computePosition as A, shift as L, flip as x, size as O } from "@floating-ui/dom";
+import { autoUpdate as K, computePosition as L, shift as g, flip as x, size as M } from "@floating-ui/dom";
 const v = class extends HTMLElement {
   constructor() {
-    super(...arguments);
+    super();
     s(this, "timeouts", /* @__PURE__ */ new Map());
     s(this, "index", 0);
+    new MutationObserver((e) => {
+      e.forEach((i) => {
+        i.addedNodes.forEach((n) => {
+          n instanceof HTMLElement && this.show(n);
+        });
+      });
+    }).observe(this, { childList: !0 });
   }
   connectedCallback() {
     this.hasAttribute("role") || this.setAttribute("role", "status"), this.hasAttribute("aria-live") || this.setAttribute("aria-live", "polite"), this.hasAttribute("aria-relevant") || this.setAttribute("aria-relevant", "additions");
+    for (const t of this.children)
+      this.show(t, { animate: !1 });
   }
   show(t, e = {}) {
-    const i = e.key || String(this.index++);
-    this.dismiss(i), t.dataset.key = i, E(this.children, () => {
-      this.append(t), l(t);
+    const i = e.key || t.dataset.key || String(this.index++);
+    t.dataset.key = i, this.contains(t) ? h(t) : e.animate === !1 ? this.append(t) : k(this.children, () => {
+      this.append(t), h(t);
     });
-    const n = typeof e.duration < "u" ? Number(e.duration) : v.duration;
+    const n = Number(
+      e.duration !== void 0 ? e.duration : t.dataset.duration || v.duration
+    );
     return n > 0 && (this.startTimeout(t, n), t.addEventListener("mouseenter", this.clearTimeout.bind(this, t)), t.addEventListener("focusin", this.clearTimeout.bind(this, t)), t.addEventListener(
       "mouseleave",
       this.startTimeout.bind(this, t, n)
@@ -37,8 +48,8 @@ const v = class extends HTMLElement {
       });
       return;
     }
-    E(this.children, () => {
-      u(t, {
+    k(this.children, () => {
+      l(t, {
         finish: () => this.removeChild(t)
       });
     }), this.clearTimeout(t);
@@ -118,9 +129,9 @@ const w = class extends HTMLElement {
     i < 0 && (i = e.length - 1), i >= e.length && (i = 0), (n = e[i]) == null || n.focus();
   }
 };
-let m = w;
-s(m, "searchDelay", 800);
-const d = class extends HTMLElement {
+let b = w;
+s(b, "searchDelay", 800);
+const c = class extends HTMLElement {
   constructor() {
     super();
     s(this, "focusTrap");
@@ -133,7 +144,7 @@ const d = class extends HTMLElement {
     const e = this.attachShadow({ mode: "open" });
     e.appendChild(t.content.cloneNode(!0)), this.backdrop.addEventListener("click", () => {
       var i;
-      this.hasAttribute("static") ? (i = d.attention) == null || i.call(d, e.children[1]) : this.close();
+      this.hasAttribute("static") ? (i = c.attention) == null || i.call(c, e.children[1]) : this.close();
     }), this.focusTrap = H(this, {
       escapeDeactivates: !1,
       allowOutsideClick: !0
@@ -143,8 +154,8 @@ const d = class extends HTMLElement {
     return ["open"];
   }
   connectedCallback() {
-    var t, e, i, n, r, y;
-    this.connected = !0, (t = this.content) != null && t.hasAttribute("role") || (e = this.content) == null || e.setAttribute("role", "dialog"), (i = this.content) != null && i.hasAttribute("aria-modal") || (n = this.content) == null || n.setAttribute("aria-modal", "true"), (r = this.content) != null && r.hasAttribute("tabindex") || (y = this.content) == null || y.setAttribute("tabindex", "-1"), this.addEventListener("keydown", (p) => {
+    var t, e, i, n, a, y;
+    this.connected = !0, (t = this.content) != null && t.hasAttribute("role") || (e = this.content) == null || e.setAttribute("role", "dialog"), (i = this.content) != null && i.hasAttribute("aria-modal") || (n = this.content) == null || n.setAttribute("aria-modal", "true"), (a = this.content) != null && a.hasAttribute("tabindex") || (y = this.content) == null || y.setAttribute("tabindex", "-1"), this.addEventListener("keydown", (p) => {
       p.key === "Escape" && this.open && (p.preventDefault(), p.stopPropagation(), this.close());
     }), this.open && this.wasOpened();
   }
@@ -168,11 +179,11 @@ const d = class extends HTMLElement {
   }
   wasOpened() {
     var t, e;
-    this.hidden = !1, l(this), (t = this.focusTrap) == null || t.activate(), (e = this.querySelector("[autofocus]")) == null || e.focus(), this.dispatchEvent(new Event("open"));
+    this.hidden = !1, h(this), (t = this.focusTrap) == null || t.activate(), (e = this.querySelector("[autofocus]")) == null || e.focus(), this.dispatchEvent(new Event("open"));
   }
   wasClosed() {
     var t;
-    (t = this.focusTrap) == null || t.deactivate(), u(this, {
+    (t = this.focusTrap) == null || t.deactivate(), l(this, {
       finish: () => this.hidden = !0
     }), this.dispatchEvent(new Event("close"));
   }
@@ -184,8 +195,8 @@ const d = class extends HTMLElement {
     return this.firstElementChild;
   }
 };
-let b = d;
-s(b, "attention", (t) => t.animate(
+let m = c;
+s(m, "attention", (t) => t.animate(
   [
     { transform: "scale(1)" },
     { transform: "scale(1.1)" },
@@ -193,10 +204,29 @@ s(b, "attention", (t) => t.animate(
   ],
   300
 ));
-class F extends HTMLElement {
+function O(o) {
+  return o.altKey || o.ctrlKey || o.metaKey || o.shiftKey || o.button !== void 0 && o.button !== 0;
+}
+class $ extends HTMLElement {
   constructor() {
     super();
     s(this, "cleanup");
+    s(this, "onButtonClick", (t) => {
+      !O(t) && !this.disabled && (this.open = !this.open, t.preventDefault());
+    });
+    s(this, "onButtonKeyDown", (t) => {
+      var e;
+      t.key === "ArrowDown" && !this.disabled && (t.preventDefault(), this.open = !0, (e = A(this.content)[0]) == null || e.focus());
+    });
+    s(this, "onKeyDown", (t) => {
+      t.key === "Escape" && this.open && (t.preventDefault(), t.stopPropagation(), this.open = !1, this.button.focus());
+    });
+    s(this, "onFocusOut", (t) => {
+      (!(t.relatedTarget instanceof Node) || !this.contains(t.relatedTarget)) && (this.open = !1);
+    });
+    s(this, "onContentClick", (t) => {
+      t.target instanceof Element && t.target.closest("[role=menuitem], [role=menuitemradio]") && (this.open = !1, this.button.focus());
+    });
     const t = document.createElement("template");
     t.innerHTML = `
             <div part="backdrop" hidden style="position: fixed; top: 0; left: 0; right: 0; bottom: 0"></div>
@@ -209,21 +239,10 @@ class F extends HTMLElement {
   connectedCallback() {
     this.backdrop.hidden = !0, this.content.hidden = !0, this.open = !1, this.button.setAttribute("aria-expanded", "false"), setTimeout(() => {
       this.content.getAttribute("role") === "menu" && this.button.setAttribute("aria-haspopup", "true");
-    }), this.button.addEventListener("click", () => {
-      this.open = !this.open;
-    }), this.button.addEventListener("keydown", (t) => {
-      var e;
-      t.key === "ArrowDown" && (t.preventDefault(), this.open = !0, (e = g(this.content)[0]) == null || e.focus());
-    }), this.addEventListener("keydown", (t) => {
-      t.key === "Escape" && this.open && (t.preventDefault(), t.stopPropagation(), this.open = !1, this.button.focus());
-    }), this.addEventListener("focusout", (t) => {
-      (!(t.relatedTarget instanceof Node) || !this.contains(t.relatedTarget)) && (this.open = !1);
-    }), this.content.addEventListener("click", (t) => {
-      t.target instanceof Element && t.target.closest("[role=menuitem], [role=menuitemradio]") && (this.open = !1, this.button.focus());
-    });
+    }), this.button.addEventListener("click", this.onButtonClick), this.button.addEventListener("keydown", this.onButtonKeyDown), this.addEventListener("keydown", this.onKeyDown), this.addEventListener("focusout", this.onFocusOut), this.content.addEventListener("click", this.onContentClick);
   }
   disconnectedCallback() {
-    k(this.backdrop), k(this.content);
+    E(this.backdrop), E(this.content), this.button.removeAttribute("aria-expanded"), this.button.removeAttribute("aria-haspopup"), this.button.removeEventListener("click", this.onButtonClick), this.button.removeEventListener("keydown", this.onButtonKeyDown), this.removeEventListener("keydown", this.onKeyDown), this.removeEventListener("focusout", this.onFocusOut), this.content.removeEventListener("click", this.onContentClick);
   }
   get open() {
     return this.hasAttribute("open");
@@ -231,22 +250,25 @@ class F extends HTMLElement {
   set open(t) {
     t ? this.setAttribute("open", "") : this.removeAttribute("open");
   }
+  get disabled() {
+    return this.hasAttribute("disabled");
+  }
   attributeChangedCallback(t, e, i) {
     t === "open" && (i !== null ? this.wasOpened() : this.wasClosed());
   }
   wasOpened() {
     if (!this.content.hidden)
       return;
-    this.content.hidden = !1, this.backdrop.hidden = !1, l(this.content), l(this.backdrop), this.button.setAttribute("aria-expanded", "true"), this.content.style.position = "absolute", this.cleanup = M(
+    this.content.hidden = !1, this.backdrop.hidden = !1, h(this.content), h(this.backdrop), this.button.setAttribute("aria-expanded", "true"), this.content.style.position = "absolute", this.cleanup = K(
       this.button,
       this.content,
       () => {
-        A(this.button, this.content, {
+        L(this.button, this.content, {
           placement: this.getAttribute("placement") || "bottom",
           middleware: [
-            L(),
+            g(),
             x(),
-            O({
+            M({
               apply: ({ availableWidth: e, availableHeight: i }) => {
                 Object.assign(this.content.style, {
                   maxWidth: "",
@@ -271,9 +293,9 @@ class F extends HTMLElement {
   }
   wasClosed() {
     var t;
-    this.content.hidden || (this.button.setAttribute("aria-expanded", "false"), (t = this.cleanup) == null || t.call(this), u(this.backdrop, {
+    this.content.hidden || (this.button.setAttribute("aria-expanded", "false"), (t = this.cleanup) == null || t.call(this), l(this.backdrop, {
       finish: () => this.backdrop.hidden = !0
-    }), u(this.content, {
+    }), l(this.content, {
       finish: () => this.content.hidden = !0
     }), this.dispatchEvent(new Event("close")));
   }
@@ -288,7 +310,7 @@ class F extends HTMLElement {
     return this.children[1];
   }
 }
-class $ extends HTMLElement {
+class P extends HTMLElement {
   constructor() {
     super(...arguments);
     s(this, "onInitialFocus", () => {
@@ -300,8 +322,8 @@ class $ extends HTMLElement {
       const e = this.controls, i = this.controls.length, n = e.indexOf(t.target);
       if (n === -1)
         return;
-      let r = 0;
-      t.key === "ArrowLeft" && (r = n - 1), t.key === "ArrowRight" && (r = n + 1), t.key === "End" && (r = i - 1), r < 0 && (r = i - 1), r > i - 1 && (r = 0), this.focusControlAtIndex(r), t.preventDefault();
+      let a = 0;
+      t.key === "ArrowLeft" && (a = n - 1), t.key === "ArrowRight" && (a = n + 1), t.key === "End" && (a = i - 1), a < 0 && (a = i - 1), a > i - 1 && (a = 0), this.focusControlAtIndex(a), t.preventDefault();
     });
   }
   connectedCallback() {
@@ -316,10 +338,10 @@ class $ extends HTMLElement {
     });
   }
   get controls() {
-    return g(this);
+    return A(this);
   }
 }
-const c = class extends HTMLElement {
+const u = class extends HTMLElement {
   constructor() {
     super(...arguments);
     s(this, "parent");
@@ -356,9 +378,9 @@ const c = class extends HTMLElement {
     if (this.disabled)
       return;
     const t = this.createTooltip();
-    clearTimeout(this.timeout), this.showing || (t.hidden = !1, l(t), this.showing = !0), t.innerHTML !== this.innerHTML && (t.innerHTML = this.innerHTML), t.style.position = "absolute", A(this.parent, t, {
-      placement: this.getAttribute("placement") || c.placement,
-      middleware: [L(), x()]
+    clearTimeout(this.timeout), this.showing || (t.hidden = !1, h(t), this.showing = !0), t.innerHTML !== this.innerHTML && (t.innerHTML = this.innerHTML), t.style.position = "absolute", L(this.parent, t, {
+      placement: this.getAttribute("placement") || u.placement,
+      middleware: [g(), x()]
     }).then(({ x: e, y: i, placement: n }) => {
       Object.assign(t.style, {
         left: `${e}px`,
@@ -367,7 +389,7 @@ const c = class extends HTMLElement {
     });
   }
   hide() {
-    clearTimeout(this.timeout), this.showing && (this.showing = !1, u(this.tooltip, {
+    clearTimeout(this.timeout), this.showing && (this.showing = !1, l(this.tooltip, {
       finish: () => {
         this.tooltip && (this.tooltip.hidden = !0);
       }
@@ -378,23 +400,23 @@ const c = class extends HTMLElement {
     const e = parseInt(this.getAttribute("delay") || "");
     this.timeout = window.setTimeout(
       t.bind(this),
-      isNaN(e) ? c.delay : e
+      isNaN(e) ? u.delay : e
     );
   }
   createTooltip() {
-    return this.tooltip || (this.tooltip = document.createElement("div"), this.tooltip.className = this.getAttribute("tooltip-class") || c.tooltipClass, this.tooltip.hidden = !0, this.tooltip.addEventListener("mouseenter", this.show.bind(this)), this.tooltip.addEventListener(
+    return this.tooltip || (this.tooltip = document.createElement("div"), this.tooltip.className = this.getAttribute("tooltip-class") || u.tooltipClass, this.tooltip.hidden = !0, this.tooltip.addEventListener("mouseenter", this.show.bind(this)), this.tooltip.addEventListener(
       "mouseleave",
       this.afterDelay.bind(this, this.hide)
     ), document.body.appendChild(this.tooltip)), this.tooltip;
   }
 };
-let h = c;
-s(h, "delay", 100), s(h, "placement", "top"), s(h, "tooltipClass", "tooltip");
+let d = u;
+s(d, "delay", 100), s(d, "placement", "top"), s(d, "tooltipClass", "tooltip");
 export {
   f as AlertsElement,
-  m as MenuElement,
-  b as ModalElement,
-  F as PopupElement,
-  $ as ToolbarElement,
-  h as TooltipElement
+  b as MenuElement,
+  m as ModalElement,
+  $ as PopupElement,
+  P as ToolbarElement,
+  d as TooltipElement
 };

package/dist/types/alerts/alerts.d.ts

@@ -1,11 +1,13 @@
 export declare type AlertOptions = {
     key?: string;
     duration?: number;
+    animate?: boolean;
 };
 export default class AlertsElement extends HTMLElement {
     static duration: number;
     private timeouts;
     private index;
+    constructor();
     connectedCallback(): void;
     show(el: HTMLElement, options?: AlertOptions): string;
     dismiss(el: HTMLElement): void;

package/dist/types/popup/popup.d.ts

@@ -4,8 +4,14 @@ export default class PopupElement extends HTMLElement {
     constructor();
     connectedCallback(): void;
     disconnectedCallback(): void;
+    private onButtonClick;
+    private onButtonKeyDown;
+    private onKeyDown;
+    private onFocusOut;
+    private onContentClick;
     get open(): boolean;
     set open(val: boolean);
+    get disabled(): boolean;
     attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
     private wasOpened;
     private wasClosed;

package/dist/types/utils.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Determine whether the user is trying to open a link in a new tab.
+ */
+export declare function shouldOpenInNewTab(e: MouseEvent): boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "inclusive-elements",
-    "version": "0.2.1",
+    "version": "0.2.2",
     "description": "Accessible, lightweight, unstyled implementations of common UI controls.",
     "module": "dist/inclusive-elements.js",
     "type": "module",