inclusive-elements 0.1.2 → 0.2.1

package/README.md

@@ -2,16 +2,16 @@
 
 **Accessible, lightweight, unstyled implementations of common UI controls.**
 
-[**Demo**](https://tobyzerner.github.io/inclusive-elements/demo/index.html)
+[**Demo**](https://tobyzerner.github.io/inclusive-elements/index.html)
 
 Basic interactive UI patterns like popup menus, tooltips, and modals are surprisingly hard to get right on the web. Component libraries tend to be weighty, opinionated, and come tightly coupled with styles you don't want. On the other hand, rolling your own components feels like you're reinventing the wheel and puts accessibility at risk.
 
 `inclusive-elements` provides those basic behaviors in the form of Custom Elements, without any of the cruft. They are:
 
-- **🦮 Accessible.** Designed following the [WAI-ARIA Authoring Practices](https://w3c.github.io/aria-practices) so everyone can use them.
-- **🌳 Lightweight.** 3kB gzipped with minimal dependencies. Less if you tree-shake only the elements you need.
-- **🎨 Unstyled.** Easily integrate with your design bottom-up without having to fight defaults.
-- **🚀 Easy to use.** Simple API, works with any framework that supports Custom Elements.
+-   **🦮 Accessible.** Designed following the [WAI-ARIA Authoring Practices](https://w3c.github.io/aria-practices) so everyone can use them.
+-   **🌳 Lightweight.** 3kB gzipped with minimal dependencies. Less if you tree-shake only the elements you need.
+-   **🎨 Unstyled.** Easily integrate with your design bottom-up without having to fight defaults.
+-   **🚀 Easy to use.** Simple API, works with any framework that supports Custom Elements.
 
 ## Installation
 
@@ -23,12 +23,12 @@ npm install inclusive-elements --save
 
 Detailed descriptions and usage instructions are contained within each element:
 
-- [Alerts](src/alerts)
-- [Menu](src/menu)
-- [Modal](src/modal)
-- [Popup](src/popup)
-- [Toolbar](src/toolbar)
-- [Tooltip](src/tooltip)
+-   [Alerts](src/alerts)
+-   [Menu](src/menu)
+-   [Modal](src/modal)
+-   [Popup](src/popup)
+-   [Toolbar](src/toolbar)
+-   [Tooltip](src/tooltip)
 
 ## Contributing
 

package/dist/inclusive-elements.js

@@ -0,0 +1,400 @@
+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";
+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";
+const v = class extends HTMLElement {
+  constructor() {
+    super(...arguments);
+    s(this, "timeouts", /* @__PURE__ */ new Map());
+    s(this, "index", 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");
+  }
+  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 n = typeof e.duration < "u" ? Number(e.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)
+    ), t.addEventListener(
+      "focusout",
+      this.startTimeout.bind(this, t, n)
+    )), i;
+  }
+  dismiss(t) {
+    if (typeof t == "string") {
+      this.querySelectorAll(
+        `[data-key="${t}"]`
+      ).forEach((e) => {
+        this.dismiss(e);
+      });
+      return;
+    }
+    E(this.children, () => {
+      u(t, {
+        finish: () => this.removeChild(t)
+      });
+    }), this.clearTimeout(t);
+  }
+  clear() {
+    Array.from(this.children).forEach((t) => {
+      this.dismiss(t);
+    });
+  }
+  speak(t) {
+    const e = document.createElement("div");
+    Object.assign(e.style, {
+      clip: "rect(0 0 0 0)",
+      clipPath: "inset(50%)",
+      height: "1px",
+      overflow: "hidden",
+      position: "absolute",
+      whiteSpace: "nowrap",
+      width: "1px"
+    }), e.textContent = t, this.show(e);
+  }
+  startTimeout(t, e) {
+    this.clearTimeout(t), this.timeouts.set(
+      t,
+      window.setTimeout(() => {
+        this.dismiss(t);
+      }, e)
+    );
+  }
+  clearTimeout(t) {
+    this.timeouts.has(t) && clearTimeout(this.timeouts.get(t));
+  }
+};
+let f = v;
+s(f, "duration", 1e4);
+const w = class extends HTMLElement {
+  constructor() {
+    super(...arguments);
+    s(this, "search", "");
+    s(this, "searchTimeout");
+    s(this, "onKeyDown", (t) => {
+      if (!this.hidden) {
+        if (t.key === "ArrowUp") {
+          this.navigate(-1), t.preventDefault();
+          return;
+        }
+        if (t.key === "ArrowDown") {
+          this.navigate(1), t.preventDefault();
+          return;
+        }
+        t.key.length > 1 || t.ctrlKey || t.metaKey || t.altKey || (this.search += t.key.toLowerCase(), t.preventDefault(), clearTimeout(this.searchTimeout), this.searchTimeout = window.setTimeout(() => {
+          this.search = "";
+        }, w.searchDelay), this.items.some((e) => {
+          var i;
+          return ((i = e.textContent) == null ? void 0 : i.trim().toLowerCase().indexOf(this.search)) === 0 ? (e.focus(), !0) : !1;
+        }));
+      }
+    });
+  }
+  connectedCallback() {
+    this.hasAttribute("role") || this.setAttribute("role", "menu"), this.hasAttribute("tabindex") || this.setAttribute("tabindex", "-1"), this.items.forEach((t) => {
+      t.hasAttribute("tabindex") || t.setAttribute("tabindex", "-1");
+    }), this.addEventListener("keydown", this.onKeyDown);
+  }
+  disconnectedCallback() {
+    this.removeEventListener("keydown", this.onKeyDown);
+  }
+  get items() {
+    return Array.from(
+      this.querySelectorAll("[role^=menuitem]")
+    ).filter((t) => D(t));
+  }
+  navigate(t) {
+    var n;
+    const e = this.items;
+    let i = (document.activeElement instanceof HTMLElement ? e.indexOf(document.activeElement) : -1) + t;
+    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 {
+  constructor() {
+    super();
+    s(this, "focusTrap");
+    s(this, "connected", !1);
+    const t = document.createElement("template");
+    t.innerHTML = `
+            <div part="backdrop" style="position: fixed; top: 0; left: 0; right: 0; bottom: 0"></div>
+            <div part="content" style="z-index: 1"><slot></slot></div>
+        `;
+    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.focusTrap = H(this, {
+      escapeDeactivates: !1,
+      allowOutsideClick: !0
+    });
+  }
+  static get observedAttributes() {
+    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) => {
+      p.key === "Escape" && this.open && (p.preventDefault(), p.stopPropagation(), this.close());
+    }), this.open && this.wasOpened();
+  }
+  disconnectedCallback() {
+    this.connected = !1;
+  }
+  get open() {
+    return this.hasAttribute("open");
+  }
+  set open(t) {
+    t ? this.setAttribute("open", "") : this.removeAttribute("open");
+  }
+  close() {
+    if (!this.open)
+      return;
+    const t = new Event("beforeclose", { cancelable: !0 });
+    this.dispatchEvent(t) && (this.open = !1);
+  }
+  attributeChangedCallback(t, e, i) {
+    t !== "open" || !this.connected || (i !== null ? this.wasOpened() : this.wasClosed());
+  }
+  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"));
+  }
+  wasClosed() {
+    var t;
+    (t = this.focusTrap) == null || t.deactivate(), u(this, {
+      finish: () => this.hidden = !0
+    }), this.dispatchEvent(new Event("close"));
+  }
+  get backdrop() {
+    var t;
+    return (t = this.shadowRoot) == null ? void 0 : t.firstElementChild;
+  }
+  get content() {
+    return this.firstElementChild;
+  }
+};
+let b = d;
+s(b, "attention", (t) => t.animate(
+  [
+    { transform: "scale(1)" },
+    { transform: "scale(1.1)" },
+    { transform: "scale(1)" }
+  ],
+  300
+));
+class F extends HTMLElement {
+  constructor() {
+    super();
+    s(this, "cleanup");
+    const t = document.createElement("template");
+    t.innerHTML = `
+            <div part="backdrop" hidden style="position: fixed; top: 0; left: 0; right: 0; bottom: 0"></div>
+            <slot></slot>
+        `, this.attachShadow({ mode: "open" }).appendChild(t.content.cloneNode(!0)), this.backdrop.onclick = () => this.open = !1;
+  }
+  static get observedAttributes() {
+    return ["open"];
+  }
+  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());
+    });
+  }
+  disconnectedCallback() {
+    k(this.backdrop), k(this.content);
+  }
+  get open() {
+    return this.hasAttribute("open");
+  }
+  set open(t) {
+    t ? this.setAttribute("open", "") : this.removeAttribute("open");
+  }
+  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.button,
+      this.content,
+      () => {
+        A(this.button, this.content, {
+          placement: this.getAttribute("placement") || "bottom",
+          middleware: [
+            L(),
+            x(),
+            O({
+              apply: ({ availableWidth: e, availableHeight: i }) => {
+                Object.assign(this.content.style, {
+                  maxWidth: "",
+                  maxHeight: ""
+                });
+                const n = getComputedStyle(this.content);
+                (n.maxWidth === "none" || e < parseInt(n.maxWidth)) && (this.content.style.maxWidth = `${e}px`), (n.maxHeight === "none" || i < parseInt(n.maxHeight)) && (this.content.style.maxHeight = `${i}px`);
+              }
+            })
+          ]
+        }).then(({ x: e, y: i, placement: n }) => {
+          Object.assign(this.content.style, {
+            left: `${e}px`,
+            top: `${i}px`
+          }), this.content.dataset.placement = n;
+        });
+      },
+      { ancestorScroll: !1 }
+    );
+    const t = this.content.querySelector("[autofocus]");
+    t ? t.focus() : this.content.focus(), this.dispatchEvent(new Event("open"));
+  }
+  wasClosed() {
+    var t;
+    this.content.hidden || (this.button.setAttribute("aria-expanded", "false"), (t = this.cleanup) == null || t.call(this), u(this.backdrop, {
+      finish: () => this.backdrop.hidden = !0
+    }), u(this.content, {
+      finish: () => this.content.hidden = !0
+    }), this.dispatchEvent(new Event("close")));
+  }
+  get backdrop() {
+    var t;
+    return (t = this.shadowRoot) == null ? void 0 : t.firstElementChild;
+  }
+  get button() {
+    return this.children[0];
+  }
+  get content() {
+    return this.children[1];
+  }
+}
+class $ extends HTMLElement {
+  constructor() {
+    super(...arguments);
+    s(this, "onInitialFocus", () => {
+      this.removeAttribute("tabindex"), this.focusControlAtIndex(0);
+    });
+    s(this, "onKeyDown", (t) => {
+      if (t.key !== "ArrowRight" && t.key !== "ArrowLeft" && t.key !== "Home" && t.key !== "End")
+        return;
+      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();
+    });
+  }
+  connectedCallback() {
+    this.hasAttribute("role") || this.setAttribute("role", "toolbar"), this.setAttribute("tabindex", "0"), this.addEventListener("focus", this.onInitialFocus, { once: !0 }), this.addEventListener("keydown", this.onKeyDown);
+  }
+  disconnectedCallback() {
+    this.removeEventListener("keydown", this.onKeyDown);
+  }
+  focusControlAtIndex(t) {
+    this.controls.forEach((e, i) => {
+      i === t ? (e.setAttribute("tabindex", "0"), e.focus()) : e.setAttribute("tabindex", "-1");
+    });
+  }
+  get controls() {
+    return g(this);
+  }
+}
+const c = class extends HTMLElement {
+  constructor() {
+    super(...arguments);
+    s(this, "parent");
+    s(this, "tooltip");
+    s(this, "timeout");
+    s(this, "observer");
+    s(this, "showing", !1);
+    s(this, "onMouseEnter", this.afterDelay.bind(this, this.show));
+    s(this, "onFocus", this.show.bind(this));
+    s(this, "onMouseLeave", this.afterDelay.bind(this, this.hide));
+    s(this, "onBlur", this.hide.bind(this));
+    s(this, "onKeyDown", (t) => {
+      t.key === "Escape" && this.hide();
+    });
+  }
+  connectedCallback() {
+    this.parent = this.parentNode, this.parent && (this.parent.addEventListener("mouseenter", this.onMouseEnter), this.parent.addEventListener("focus", this.onFocus), this.parent.addEventListener("mouseleave", this.onMouseLeave), this.parent.addEventListener("blur", this.onBlur), this.parent.addEventListener("click", this.onBlur), this.observer = new MutationObserver((t) => {
+      t.forEach((e) => {
+        e.attributeName === "disabled" && this.hide();
+      });
+    }), this.observer.observe(this.parent, { attributes: !0 })), document.addEventListener("keydown", this.onKeyDown), document.addEventListener("scroll", this.onBlur);
+  }
+  disconnectedCallback() {
+    var t;
+    this.tooltip && (this.tooltip.remove(), this.tooltip = void 0), this.parent && (this.parent.removeEventListener("mouseenter", this.onMouseEnter), this.parent.removeEventListener("focus", this.onFocus), this.parent.removeEventListener("mouseleave", this.onMouseLeave), this.parent.removeEventListener("blur", this.onBlur), this.parent.removeEventListener("click", this.onBlur), this.parent = void 0), document.removeEventListener("keydown", this.onKeyDown), document.removeEventListener("scroll", this.onBlur), (t = this.observer) == null || t.disconnect(), clearTimeout(this.timeout);
+  }
+  get disabled() {
+    return this.hasAttribute("disabled");
+  }
+  set disabled(t) {
+    t ? this.setAttribute("disabled", "") : this.removeAttribute("disabled");
+  }
+  show() {
+    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()]
+    }).then(({ x: e, y: i, placement: n }) => {
+      Object.assign(t.style, {
+        left: `${e}px`,
+        top: `${i}px`
+      }), t.dataset.placement = n;
+    });
+  }
+  hide() {
+    clearTimeout(this.timeout), this.showing && (this.showing = !1, u(this.tooltip, {
+      finish: () => {
+        this.tooltip && (this.tooltip.hidden = !0);
+      }
+    }));
+  }
+  afterDelay(t) {
+    clearTimeout(this.timeout);
+    const e = parseInt(this.getAttribute("delay") || "");
+    this.timeout = window.setTimeout(
+      t.bind(this),
+      isNaN(e) ? c.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(
+      "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");
+export {
+  f as AlertsElement,
+  m as MenuElement,
+  b as ModalElement,
+  F as PopupElement,
+  $ as ToolbarElement,
+  h as TooltipElement
+};

package/dist/{modal → types/modal}/modal.d.ts

@@ -1,17 +1,17 @@
 export default class ModalElement extends HTMLElement {
     static attention: (el: Element) => void;
     static get observedAttributes(): string[];
-    private trigger?;
     private focusTrap?;
+    private connected;
     constructor();
     connectedCallback(): void;
+    disconnectedCallback(): void;
     get open(): boolean;
     set open(val: boolean);
     close(): void;
     attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
     private wasOpened;
     private wasClosed;
-    private focusContent;
     private get backdrop();
     private get content();
 }

package/dist/{popup → types/popup}/popup.d.ts

@@ -1,4 +1,5 @@
 export default class PopupElement extends HTMLElement {
+    cleanup?: () => void;
     static get observedAttributes(): string[];
     constructor();
     connectedCallback(): void;

package/package.json

@@ -1,54 +1,51 @@
 {
-  "name": "inclusive-elements",
-  "version": "0.1.2",
-  "description": "Accessible, lightweight, unstyled implementations of common UI controls.",
-  "main": "dist/index.js",
-  "module": "dist/index.js",
-  "type": "module",
-  "types": "dist/index.d.ts",
-  "license": "MIT",
-  "repository": "tobyzerner/inclusive-elements",
-  "files": [
-    "dist",
-    "README.md"
-  ],
-  "sideEffects": false,
-  "scripts": {
-    "build": "tsc && rollup -c",
-    "build:watch": "rollup -cw",
-    "build:demo": "rollup -c demo/rollup.config.js",
-    "release": "release-it --npm.tag=latest"
-  },
-  "dependencies": {
-    "@floating-ui/dom": "^0.2.0",
-    "focus-trap": "^6.7.2",
-    "hello-goodbye": "^0.1.0-beta.5",
-    "tabbable": "^5.2.1"
-  },
-  "devDependencies": {
-    "@release-it/keep-a-changelog": "^2.3.0",
-    "@rollup/plugin-node-resolve": "^11.2.1",
-    "@rollup/plugin-typescript": "^8.3.0",
-    "release-it": "^14.12.4",
-    "rollup": "^2.66.1",
-    "rollup-plugin-filesize": "^9.1.2",
-    "rollup-plugin-terser": "^7.0.2",
-    "tslib": "^2.3.1",
-    "typescript": "^4.5.5"
-  },
-  "release-it": {
-    "github": {
-      "release": true
+    "name": "inclusive-elements",
+    "version": "0.2.1",
+    "description": "Accessible, lightweight, unstyled implementations of common UI controls.",
+    "module": "dist/inclusive-elements.js",
+    "type": "module",
+    "types": "dist/types/index.d.ts",
+    "license": "MIT",
+    "repository": "tobyzerner/inclusive-elements",
+    "files": [
+        "dist"
+    ],
+    "sideEffects": false,
+    "scripts": {
+        "dev": "vite",
+        "build": "tsc --noEmit && vite build && tsc --emitDeclarationOnly",
+        "preview": "vite preview",
+        "release": "release-it --npm.tag=latest"
     },
-    "plugins": {
-      "@release-it/keep-a-changelog": {
-        "filename": "CHANGELOG.md",
-        "addUnreleased": true,
-        "addVersionUrl": true
-      }
+    "dependencies": {
+        "@floating-ui/dom": "^1.0.0",
+        "focus-trap": "^6.7.2",
+        "hello-goodbye": "^0.1.0-beta.5",
+        "tabbable": "^5.2.1"
     },
-    "hooks": {
-      "after:bump": "npm run build"
+    "devDependencies": {
+        "@release-it/keep-a-changelog": "^2.3.0",
+        "prettier": "^2.6.2",
+        "release-it": "^14.12.4",
+        "typescript": "^4.5.5",
+        "vite": "^3.0.4"
+    },
+    "release-it": {
+        "github": {
+            "release": true
+        },
+        "plugins": {
+            "@release-it/keep-a-changelog": {
+                "filename": "CHANGELOG.md",
+                "addUnreleased": true,
+                "addVersionUrl": true
+            }
+        },
+        "hooks": {
+            "after:bump": "npm run build"
+        }
+    },
+    "prettier": {
+        "singleQuote": true
     }
-  }
 }

package/dist/index.js

@@ -1 +0,0 @@
-import{move as t,hello as e,goodbye as i,cancel as s}from"hello-goodbye";import{isFocusable as n,focusable as o}from"tabbable";import{createFocusTrap as r}from"focus-trap";import{computePosition as a,shift as h,flip as d,size as c}from"@floating-ui/dom";class l extends HTMLElement{static duration=1e4;timeouts=new Map;index=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")}show(i,s={}){const n=s.key||String(this.index++);this.dismiss(n),i.dataset.key=n,t(this.children,(()=>{this.append(i),e(i)}));const o=void 0!==s.duration?Number(s.duration):l.duration;return o>0&&(this.startTimeout(i,o),i.addEventListener("mouseenter",this.clearTimeout.bind(this,i)),i.addEventListener("focusin",this.clearTimeout.bind(this,i)),i.addEventListener("mouseleave",this.startTimeout.bind(this,i,o)),i.addEventListener("focusout",this.startTimeout.bind(this,i,o))),n}dismiss(e){if("string"!=typeof e)t(this.children,(()=>{i(e,{finish:()=>this.removeChild(e)})})),this.clearTimeout(e);else{const t=this.querySelector(`[data-key="${e}"]`);t&&this.dismiss(t)}}clear(){for(const t of this.children)this.dismiss(t)}speak(t){const e=document.createElement("div");Object.assign(e.style,{clip:"rect(0 0 0 0)",clipPath:"inset(50%)",height:"1px",overflow:"hidden",position:"absolute",whiteSpace:"nowrap",width:"1px"}),e.textContent=t,this.show(e)}startTimeout(t,e){this.clearTimeout(t),this.timeouts.set(t,window.setTimeout((()=>{this.dismiss(t)}),e))}clearTimeout(t){this.timeouts.has(t)&&clearTimeout(this.timeouts.get(t))}}class u extends HTMLElement{static searchDelay=800;search="";searchTimeout;connectedCallback(){this.hasAttribute("role")||this.setAttribute("role","menu"),this.hasAttribute("tabindex")||this.setAttribute("tabindex","-1"),this.items.forEach((t=>{t.hasAttribute("tabindex")||t.setAttribute("tabindex","-1")})),this.addEventListener("keydown",this.onKeyDown)}disconnectedCallback(){this.removeEventListener("keydown",this.onKeyDown)}get items(){return Array.from(this.querySelectorAll("[role^=menuitem]")).filter((t=>n(t)))}onKeyDown=t=>{if(!this.hidden)return"ArrowUp"===t.key?(this.navigate(-1),void t.preventDefault()):"ArrowDown"===t.key?(this.navigate(1),void t.preventDefault()):void(t.key.length>1||t.ctrlKey||t.metaKey||t.altKey||(this.search+=t.key.toLowerCase(),t.preventDefault(),clearTimeout(this.searchTimeout),this.searchTimeout=window.setTimeout((()=>{this.search=""}),u.searchDelay),this.items.some((t=>{if(0===t.textContent?.trim().toLowerCase().indexOf(this.search))return t.focus(),!0}))))};navigate(t){const e=this.items;let i=(document.activeElement instanceof HTMLElement?e.indexOf(document.activeElement):-1)+t;i<0&&(i=e.length-1),i>=e.length&&(i=0),e[i]?.focus()}}class p extends HTMLElement{static attention=t=>t.animate([{transform:"scale(1)"},{transform:"scale(1.1)"},{transform:"scale(1)"}],300);static get observedAttributes(){return["open"]}trigger;focusTrap;constructor(){super();const t=document.createElement("template");t.innerHTML='\n            <div part="backdrop" style="position: fixed; top: 0; left: 0; right: 0; bottom: 0"></div>\n            <div part="content" style="z-index: 1"><slot></slot></div>\n        ';const e=this.attachShadow({mode:"open"});e.appendChild(t.content.cloneNode(!0)),this.backdrop.addEventListener("click",(()=>{this.hasAttribute("static")?p.attention?.(e.children[1]):this.close()})),this.focusTrap=r(this,{escapeDeactivates:!1,allowOutsideClick:!0})}connectedCallback(){this.content?.hasAttribute("role")||this.content?.setAttribute("role","dialog"),this.content?.hasAttribute("aria-modal")||this.content?.setAttribute("aria-modal","true"),this.content?.hasAttribute("tabindex")||this.content?.setAttribute("tabindex","-1"),this.addEventListener("keydown",(t=>{"Escape"===t.key&&this.open&&(t.preventDefault(),t.stopPropagation(),this.close())})),this.open&&this.focusContent()}get open(){return this.hasAttribute("open")}set open(t){t?this.setAttribute("open",""):this.removeAttribute("open")}close(){if(!this.open)return;const t=new Event("beforeclose",{cancelable:!0});this.dispatchEvent(t)&&(this.open=!1)}attributeChangedCallback(t,e,i){"open"===t&&(null!==i?this.wasOpened():this.wasClosed())}wasOpened(){this.trigger=document.activeElement,this.hidden=!1,e(this),this.focusTrap.activate(),this.focusContent(),this.dispatchEvent(new Event("open"))}wasClosed(){this.focusTrap.deactivate(),this.trigger?.focus(),i(this,{finish:()=>this.hidden=!0}),this.dispatchEvent(new Event("close"))}focusContent(){const t=this.querySelector("[autofocus]");t?t.focus():this.content?.focus()}get backdrop(){return this.shadowRoot?.firstElementChild}get content(){return this.firstElementChild}}class m extends HTMLElement{static get observedAttributes(){return["open"]}constructor(){super();const t=document.createElement("template");t.innerHTML='\n            <div part="backdrop" hidden style="position: fixed; top: 0; left: 0; right: 0; bottom: 0"></div>\n            <slot></slot>\n        ';this.attachShadow({mode:"open"}).appendChild(t.content.cloneNode(!0)),this.backdrop.onclick=()=>this.open=!1}connectedCallback(){this.backdrop.hidden=!0,this.content.hidden=!0,this.open=!1,this.button.setAttribute("aria-expanded","false"),setTimeout((()=>{"menu"===this.content.getAttribute("role")&&this.button.setAttribute("aria-haspopup","true")})),this.button.addEventListener("click",(()=>{this.open=!this.open})),this.button.addEventListener("keydown",(t=>{"ArrowDown"===t.key&&(t.preventDefault(),this.open=!0,o(this.content)[0]?.focus())})),this.addEventListener("keydown",(t=>{"Escape"===t.key&&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())}))}disconnectedCallback(){s(this.backdrop),s(this.content)}get open(){return this.hasAttribute("open")}set open(t){t?this.setAttribute("open",""):this.removeAttribute("open")}attributeChangedCallback(t,e,i){"open"===t&&(null!==i?this.wasOpened():this.wasClosed())}wasOpened(){if(!this.content.hidden)return;this.content.hidden=!1,this.backdrop.hidden=!1,e(this.content),e(this.backdrop),this.button.setAttribute("aria-expanded","true"),this.content.style.position="absolute",a(this.button,this.content,{placement:this.getAttribute("placement")||"bottom",middleware:[h(),d(),c({apply:({width:t,height:e})=>{Object.assign(this.content.style,{maxWidth:"",maxHeight:""});const i=getComputedStyle(this.content);(!i.maxWidth||t<parseInt(i.maxWidth))&&(this.content.style.maxWidth=`${t}px`),(!i.maxHeight||e<parseInt(i.maxHeight))&&(this.content.style.maxHeight=`${e}px`)}})]}).then((({x:t,y:e,placement:i})=>{Object.assign(this.content.style,{left:`${t}px`,top:`${e}px`}),this.content.dataset.placement=i}));const t=this.content.querySelector("[autofocus]");t?t.focus():this.content.focus(),this.dispatchEvent(new Event("open"))}wasClosed(){this.content.hidden||(this.button.setAttribute("aria-expanded","false"),i(this.backdrop,{finish:()=>this.backdrop.hidden=!0}),i(this.content,{finish:()=>this.content.hidden=!0}),this.dispatchEvent(new Event("close")))}get backdrop(){return this.shadowRoot?.firstElementChild}get button(){return this.children[0]}get content(){return this.children[1]}}class b extends HTMLElement{connectedCallback(){this.hasAttribute("role")||this.setAttribute("role","toolbar"),this.setAttribute("tabindex","0"),this.addEventListener("focus",this.onInitialFocus,{once:!0}),this.addEventListener("keydown",this.onKeyDown)}disconnectedCallback(){this.removeEventListener("keydown",this.onKeyDown)}onInitialFocus=t=>{this.removeAttribute("tabindex"),this.focusControlAtIndex(0)};onKeyDown=t=>{if("ArrowRight"!==t.key&&"ArrowLeft"!==t.key&&"Home"!==t.key&&"End"!==t.key)return;const e=this.controls,i=this.controls.length,s=e.indexOf(t.target);if(-1===s)return;let n=0;"ArrowLeft"===t.key&&(n=s-1),"ArrowRight"===t.key&&(n=s+1),"End"===t.key&&(n=i-1),n<0&&(n=i-1),n>i-1&&(n=0),this.focusControlAtIndex(n),t.preventDefault()};focusControlAtIndex(t){this.controls.forEach(((e,i)=>{i===t?(e.setAttribute("tabindex","0"),e.focus()):e.setAttribute("tabindex","-1")}))}get controls(){return o(this)}}class v extends HTMLElement{static delay=100;static placement="top";static tooltipClass="tooltip";parent;tooltip;timeout;observer;showing=!1;onMouseEnter=this.afterDelay.bind(this,this.show);onFocus=this.show.bind(this);onMouseLeave=this.afterDelay.bind(this,this.hide);onBlur=this.hide.bind(this);connectedCallback(){this.parent=this.parentNode,this.parent&&(this.parent.addEventListener("mouseenter",this.onMouseEnter),this.parent.addEventListener("focus",this.onFocus),this.parent.addEventListener("mouseleave",this.onMouseLeave),this.parent.addEventListener("blur",this.onBlur),this.parent.addEventListener("click",this.onBlur),this.observer=new MutationObserver((t=>{t.forEach((t=>{"disabled"===t.attributeName&&this.hide()}))})),this.observer.observe(this.parent,{attributes:!0})),document.addEventListener("keydown",this.onKeyDown),document.addEventListener("scroll",this.onBlur)}disconnectedCallback(){this.tooltip&&(this.tooltip.remove(),this.tooltip=void 0),this.parent&&(this.parent.removeEventListener("mouseenter",this.onMouseEnter),this.parent.removeEventListener("focus",this.onFocus),this.parent.removeEventListener("mouseleave",this.onMouseLeave),this.parent.removeEventListener("blur",this.onBlur),this.parent.removeEventListener("click",this.onBlur),this.parent=void 0),document.removeEventListener("keydown",this.onKeyDown),document.removeEventListener("scroll",this.onBlur),this.observer.disconnect()}get disabled(){return this.hasAttribute("disabled")}set disabled(t){t?this.setAttribute("disabled",""):this.removeAttribute("disabled")}onKeyDown=t=>{"Escape"===t.key&&this.hide()};show(){if(this.disabled)return;const t=this.createTooltip();clearTimeout(this.timeout),this.showing||(t.hidden=!1,e(t),this.showing=!0),t.innerHTML!==this.innerHTML&&(t.innerHTML=this.innerHTML),t.style.position="absolute",a(this.parent,t,{placement:this.getAttribute("placement")||v.placement,middleware:[h(),d()]}).then((({x:e,y:i,placement:s})=>{Object.assign(t.style,{left:`${e}px`,top:`${i}px`}),t.dataset.placement=s}))}hide(){clearTimeout(this.timeout),this.showing&&(this.showing=!1,i(this.tooltip,{finish:()=>{this.tooltip&&(this.tooltip.hidden=!0)}}))}afterDelay(t){clearTimeout(this.timeout);const e=parseInt(this.getAttribute("delay")||"");this.timeout=window.setTimeout(t.bind(this),isNaN(e)?v.delay:e)}createTooltip(){return this.tooltip||(this.tooltip=document.createElement("div"),this.tooltip.className=this.getAttribute("tooltip-class")||v.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}}export{l as AlertsElement,u as MenuElement,p as ModalElement,m as PopupElement,b as ToolbarElement,v as TooltipElement};