inclusive-elements 0.2.0 → 0.2.2

package/dist/inclusive-elements.js

@@ -0,0 +1,422 @@
+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 K, computePosition as L, shift as g, flip as x, size as M } from "@floating-ui/dom";
+const v = class extends HTMLElement {
+  constructor() {
+    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 || 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 = 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)
+    ), 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;
+    }
+    k(this.children, () => {
+      l(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 b = w;
+s(b, "searchDelay", 800);
+const c = 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 = c.attention) == null || i.call(c, e.children[1]) : this.close();
+    }), this.focusTrap = H(this, {
+      escapeDeactivates: !1,
+      allowOutsideClick: !0
+    });
+  }
+  static get observedAttributes() {
+    return ["open"];
+  }
+  connectedCallback() {
+    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();
+  }
+  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, 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(), l(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 m = c;
+s(m, "attention", (t) => t.animate(
+  [
+    { transform: "scale(1)" },
+    { transform: "scale(1.1)" },
+    { transform: "scale(1)" }
+  ],
+  300
+));
+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>
+            <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.onButtonClick), this.button.addEventListener("keydown", this.onButtonKeyDown), this.addEventListener("keydown", this.onKeyDown), this.addEventListener("focusout", this.onFocusOut), this.content.addEventListener("click", this.onContentClick);
+  }
+  disconnectedCallback() {
+    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");
+  }
+  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, h(this.content), h(this.backdrop), this.button.setAttribute("aria-expanded", "true"), this.content.style.position = "absolute", this.cleanup = K(
+      this.button,
+      this.content,
+      () => {
+        L(this.button, this.content, {
+          placement: this.getAttribute("placement") || "bottom",
+          middleware: [
+            g(),
+            x(),
+            M({
+              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), l(this.backdrop, {
+      finish: () => this.backdrop.hidden = !0
+    }), l(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 P 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 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() {
+    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 A(this);
+  }
+}
+const u = 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, 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`,
+        top: `${i}px`
+      }), t.dataset.placement = n;
+    });
+  }
+  hide() {
+    clearTimeout(this.timeout), this.showing && (this.showing = !1, l(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) ? u.delay : e
+    );
+  }
+  createTooltip() {
+    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 d = u;
+s(d, "delay", 100), s(d, "placement", "top"), s(d, "tooltipClass", "tooltip");
+export {
+  f as AlertsElement,
+  b as MenuElement,
+  m as ModalElement,
+  $ as PopupElement,
+  P as ToolbarElement,
+  d as TooltipElement
+};

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

@@ -0,0 +1,19 @@
+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;
+    dismiss(key: string): void;
+    clear(): void;
+    speak(message: string): void;
+    private startTimeout;
+    private clearTimeout;
+}

package/dist/types/index.d.ts

@@ -0,0 +1,6 @@
+export { default as AlertsElement } from './alerts/alerts';
+export { default as MenuElement } from './menu/menu';
+export { default as ModalElement } from './modal/modal';
+export { default as PopupElement } from './popup/popup';
+export { default as ToolbarElement } from './toolbar/toolbar';
+export { default as TooltipElement } from './tooltip/tooltip';

package/dist/types/menu/menu.d.ts

@@ -0,0 +1,10 @@
+export default class MenuElement extends HTMLElement {
+    static searchDelay: number;
+    private search;
+    private searchTimeout?;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private get items();
+    private onKeyDown;
+    private navigate;
+}

package/dist/types/modal/modal.d.ts

@@ -0,0 +1,17 @@
+export default class ModalElement extends HTMLElement {
+    static attention: (el: Element) => void;
+    static get observedAttributes(): string[];
+    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 get backdrop();
+    private get content();
+}

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

@@ -0,0 +1,21 @@
+export default class PopupElement extends HTMLElement {
+    cleanup?: () => void;
+    static get observedAttributes(): string[];
+    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;
+    private get backdrop();
+    private get button();
+    private get content();
+}

package/dist/types/toolbar/toolbar.d.ts

@@ -0,0 +1,8 @@
+export default class ToolbarElement extends HTMLElement {
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private onInitialFocus;
+    private onKeyDown;
+    private focusControlAtIndex;
+    private get controls();
+}

package/dist/types/tooltip/tooltip.d.ts

@@ -0,0 +1,23 @@
+export default class TooltipElement extends HTMLElement {
+    static delay: number;
+    static placement: string;
+    static tooltipClass: string;
+    private parent?;
+    private tooltip?;
+    private timeout?;
+    private observer?;
+    private showing;
+    private onMouseEnter;
+    private onFocus;
+    private onMouseLeave;
+    private onBlur;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    get disabled(): boolean;
+    set disabled(val: boolean);
+    private onKeyDown;
+    private show;
+    private hide;
+    private afterDelay;
+    private createTooltip;
+}

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,15 +1,14 @@
 {
     "name": "inclusive-elements",
-    "version": "0.2.0",
+    "version": "0.2.2",
     "description": "Accessible, lightweight, unstyled implementations of common UI controls.",
-    "module": "./dist/inclusive-elements.js",
+    "module": "dist/inclusive-elements.js",
     "type": "module",
-    "types": "./dist/types/index.d.ts",
+    "types": "dist/types/index.d.ts",
     "license": "MIT",
     "repository": "tobyzerner/inclusive-elements",
     "files": [
-        "./dist",
-        "./README.md"
+        "dist"
     ],
     "sideEffects": false,
     "scripts": {