inclusive-elements 0.5.4 → 0.6.0

package/dist/inclusive-elements6.js

@@ -1,83 +0,0 @@
-var u = Object.defineProperty;
-var p = (o, e, t) => e in o ? u(o, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : o[e] = t;
-var a = (o, e, t) => (p(o, typeof e != "symbol" ? e + "" : e, t), t);
-import { createFocusTrap as f } from "focus-trap";
-import { hello as b, goodbye as m } from "hello-goodbye";
-const n = class n extends HTMLElement {
-  constructor() {
-    super();
-    a(this, "focusTrap");
-    a(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 i = this.attachShadow({ mode: "open" });
-    i.appendChild(t.content.cloneNode(!0)), this.backdrop.addEventListener("click", () => {
-      var s;
-      this.hasAttribute("static") ? (s = n.attention) == null || s.call(n, i.children[1]) : this.close();
-    }), this.focusTrap = f(this, {
-      escapeDeactivates: !1,
-      allowOutsideClick: !0,
-      preventScroll: !0,
-      initialFocus: () => this.querySelector("[autofocus]") || void 0
-    });
-  }
-  static get observedAttributes() {
-    return ["open"];
-  }
-  connectedCallback() {
-    var t, i, s, c, h, l;
-    this.connected = !0, (t = this.content) != null && t.hasAttribute("role") || (i = this.content) == null || i.setAttribute("role", "dialog"), (s = this.content) != null && s.hasAttribute("aria-modal") || (c = this.content) == null || c.setAttribute("aria-modal", "true"), (h = this.content) != null && h.hasAttribute("tabindex") || (l = this.content) == null || l.setAttribute("tabindex", "-1"), this.addEventListener("keydown", (r) => {
-      r.key === "Escape" && this.open && (r.preventDefault(), r.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, i, s) {
-    t !== "open" || !this.connected || (s !== null ? this.wasOpened() : this.wasClosed());
-  }
-  async wasOpened() {
-    document.documentElement.style.overflow = "hidden", this.hidden = !1, b(this), requestAnimationFrame(() => {
-      var t;
-      return (t = this.focusTrap) == null ? void 0 : t.activate();
-    }), this.dispatchEvent(new Event("open"));
-  }
-  wasClosed() {
-    var t;
-    document.documentElement.style.overflow = "", (t = this.focusTrap) == null || t.deactivate(), m(this).then(() => 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;
-  }
-};
-a(n, "attention", (t) => t.animate(
-  [
-    { transform: "scale(1)" },
-    { transform: "scale(1.1)" },
-    { transform: "scale(1)" }
-  ],
-  300
-));
-let d = n;
-export {
-  d as default
-};

package/dist/inclusive-elements7.js

@@ -1,127 +0,0 @@
-var l = Object.defineProperty;
-var f = (a, s, t) => s in a ? l(a, s, { enumerable: !0, configurable: !0, writable: !0, value: t }) : a[s] = t;
-var h = (a, s, t) => (f(a, typeof s != "symbol" ? s + "" : s, t), t);
-import { autoUpdate as b, computePosition as m, shift as k, flip as g, size as v } from "@floating-ui/dom";
-import { cancel as u, hello as d, goodbye as p } from "hello-goodbye";
-import { focusable as w } from "tabbable";
-import { shouldOpenInNewTab as y } from "./inclusive-elements11.js";
-class D extends HTMLElement {
-  constructor() {
-    super();
-    h(this, "cleanup");
-    h(this, "onButtonClick", (t) => {
-      !y(t) && !this.disabled && (this.open = !this.open, t.preventDefault());
-    });
-    h(this, "onButtonKeyDown", (t) => {
-      var e;
-      t.key === "ArrowDown" && !this.disabled && (t.preventDefault(), this.open = !0, this.content && ((e = w(this.content)[0]) == null || e.focus()));
-    });
-    h(this, "onKeyDown", (t) => {
-      var e;
-      t.key === "Escape" && this.open && (t.preventDefault(), t.stopPropagation(), this.open = !1, (e = this.button) == null || e.focus());
-    });
-    h(this, "onFocusOut", (t) => {
-      t.relatedTarget instanceof Node && !this.contains(t.relatedTarget) && (this.open = !1);
-    });
-    h(this, "onContentClick", (t) => {
-      var e;
-      t.target instanceof Element && t.target.closest("[role=menuitem], [role=menuitemradio]") && (this.open = !1, (e = this.button) == null || e.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() {
-    var t, e, n, o;
-    this.backdrop.hidden = !this.open, this.content && (this.content.hidden = !this.open), (t = this.button) == null || t.setAttribute(
-      "aria-expanded",
-      this.open ? "true" : "false"
-    ), setTimeout(() => {
-      var i, c;
-      ((i = this.content) == null ? void 0 : i.getAttribute("role")) === "menu" && ((c = this.button) == null || c.setAttribute("aria-haspopup", "true"));
-    }), (e = this.button) == null || e.addEventListener("click", this.onButtonClick), (n = this.button) == null || n.addEventListener("keydown", this.onButtonKeyDown), this.addEventListener("keydown", this.onKeyDown), this.addEventListener("focusout", this.onFocusOut), (o = this.content) == null || o.addEventListener("click", this.onContentClick);
-  }
-  disconnectedCallback() {
-    var t, e, n, o, i;
-    u(this.backdrop), this.content && u(this.content), (t = this.button) == null || t.removeAttribute("aria-expanded"), (e = this.button) == null || e.removeAttribute("aria-haspopup"), (n = this.button) == null || n.removeEventListener("click", this.onButtonClick), (o = this.button) == null || o.removeEventListener("keydown", this.onButtonKeyDown), this.removeEventListener("keydown", this.onKeyDown), this.removeEventListener("focusout", this.onFocusOut), (i = this.content) == null || i.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, n) {
-    t === "open" && (n !== null ? this.wasOpened() : this.wasClosed());
-  }
-  wasOpened() {
-    var e, n;
-    if (!((e = this.content) != null && e.hidden))
-      return;
-    this.content.hidden = !1, this.content.style.position = "fixed", this.backdrop.hidden = !1, d(this.content), d(this.backdrop), (n = this.button) == null || n.setAttribute("aria-expanded", "true"), this.button && (this.cleanup = b(
-      this.button,
-      this.content,
-      () => {
-        !this.button || !this.content || m(this.button, this.content, {
-          strategy: "fixed",
-          placement: this.getAttribute("placement") || "bottom",
-          middleware: [
-            k(),
-            g(),
-            v({
-              apply: ({
-                availableWidth: o,
-                availableHeight: i,
-                placement: c
-              }) => {
-                if (!this.content)
-                  return;
-                this.content.dataset.placement = c, Object.assign(this.content.style, {
-                  maxWidth: "",
-                  maxHeight: ""
-                });
-                const r = getComputedStyle(
-                  this.content
-                );
-                o -= parseInt(r.marginLeft) + parseInt(r.marginRight), (r.maxWidth === "none" || o < parseInt(r.maxWidth)) && (this.content.style.maxWidth = `${o}px`), i -= parseInt(r.marginTop) + parseInt(r.marginBottom), (r.maxHeight === "none" || i < parseInt(r.maxHeight)) && (this.content.style.maxHeight = `${i}px`);
-              }
-            })
-          ]
-        }).then(({ x: o, y: i }) => {
-          this.content && Object.assign(this.content.style, {
-            left: `${o}px`,
-            top: `${i}px`
-          });
-        });
-      },
-      { ancestorScroll: !1 }
-    ));
-    const t = this.content.querySelector("[autofocus]");
-    t ? t.focus() : this.content.focus(), this.dispatchEvent(new Event("open"));
-  }
-  wasClosed() {
-    var t, e, n;
-    (t = this.content) != null && t.hidden || ((e = this.button) == null || e.setAttribute("aria-expanded", "false"), (n = this.cleanup) == null || n.call(this), p(this.backdrop).then(() => this.backdrop.hidden = !0), this.content && p(this.content).then(() => 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.querySelector("button, [role=button]");
-  }
-  get content() {
-    return this.children[1];
-  }
-}
-export {
-  D as default
-};

package/dist/inclusive-elements8.js

@@ -1,77 +0,0 @@
-var h = Object.defineProperty;
-var f = (l, r, t) => r in l ? h(l, r, { enumerable: !0, configurable: !0, writable: !0, value: t }) : l[r] = t;
-var c = (l, r, t) => (f(l, typeof r != "symbol" ? r + "" : r, t), t);
-let g = 0;
-class x extends HTMLElement {
-  constructor() {
-    super(...arguments);
-    c(this, "idPrefix", "tabs" + ++g);
-    c(this, "onKeyDown", (t) => {
-      const e = this.tabs;
-      if (e.length === 0)
-        return;
-      let i = e.indexOf(t.target);
-      i === -1 && (i = e.findIndex(
-        (o) => o.getAttribute("aria-selected") === "true"
-      ), i === -1 && (i = 0));
-      const a = this.tablist.getAttribute("aria-orientation") === "vertical";
-      let s;
-      switch (t.key) {
-        case (a ? "ArrowUp" : "ArrowLeft"):
-          s = (i - 1 + e.length) % e.length;
-          break;
-        case (a ? "ArrowDown" : "ArrowRight"):
-          s = (i + 1) % e.length;
-          break;
-        case "Home":
-          s = 0;
-          break;
-        case "End":
-          s = e.length - 1;
-      }
-      s !== void 0 && (this.selectTab(s, { focus: !0 }), t.stopPropagation(), t.preventDefault());
-    });
-    c(this, "onClick", (t) => {
-      const i = t.target.closest("[role=tab]");
-      i && this.selectTab(this.tabs.indexOf(i), { focus: !0 });
-    });
-  }
-  connectedCallback() {
-    this.tablist.addEventListener("keydown", this.onKeyDown), this.tablist.addEventListener("click", this.onClick), this.selectTab(this.initialTabIndex, { emit: !1 }), this.tabs.forEach((t, e) => {
-      const i = this.tabpanels[e], a = t.getAttribute("id") || this.idPrefix + "_tab_" + e, s = i.getAttribute("id") || this.idPrefix + "_panel_" + e;
-      t.setAttribute("id", a), t.setAttribute("aria-controls", s), i.setAttribute("id", s), i.setAttribute("aria-labelledby", a), i.setAttribute("tabindex", "0");
-    });
-  }
-  disconnectedCallback() {
-    this.tablist.removeEventListener("keydown", this.onKeyDown), this.tablist.removeEventListener("click", this.onClick);
-  }
-  selectTab(t, e = {}) {
-    const { focus: i = !1, emit: a = !0 } = e, s = this.tabs, o = this.tabpanels, u = s.length;
-    if (t < 0 || t >= u)
-      return !1;
-    const d = s.findIndex(
-      (n) => n.getAttribute("aria-selected") === "true"
-    );
-    return s.forEach((n, b) => {
-      b === t ? (n.setAttribute("aria-selected", "true"), n.removeAttribute("tabindex"), o[b].hidden = !1, i && n.focus()) : (n.setAttribute("aria-selected", "false"), n.setAttribute("tabindex", "-1"), o[b].hidden = !0);
-    }), a && d !== t && this.dispatchEvent(new Event("change")), d !== t;
-  }
-  get initialTabIndex() {
-    const t = this.tabs.findIndex(
-      (e) => e.getAttribute("aria-selected") === "true"
-    );
-    return t !== -1 ? t : 0;
-  }
-  get tablist() {
-    return this.querySelector("[role=tablist]");
-  }
-  get tabs() {
-    return Array.from(this.querySelectorAll("[role=tab]"));
-  }
-  get tabpanels() {
-    return Array.from(this.querySelectorAll("[role=tabpanel]"));
-  }
-}
-export {
-  x as default
-};

package/dist/inclusive-elements9.js

@@ -1,38 +0,0 @@
-var c = Object.defineProperty;
-var a = (o, e, t) => e in o ? c(o, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : o[e] = t;
-var l = (o, e, t) => (a(o, typeof e != "symbol" ? e + "" : e, t), t);
-import { focusable as d } from "tabbable";
-class u extends HTMLElement {
-  constructor() {
-    super(...arguments);
-    l(this, "onInitialFocus", () => {
-      this.removeAttribute("tabindex"), this.focusControlAtIndex(0);
-    });
-    l(this, "onKeyDown", (t) => {
-      if (t.key !== "ArrowRight" && t.key !== "ArrowLeft" && t.key !== "Home" && t.key !== "End")
-        return;
-      const i = this.controls, s = this.controls.length, r = i.indexOf(t.target);
-      if (r === -1)
-        return;
-      let n = 0;
-      t.key === "ArrowLeft" && (n = r - 1), t.key === "ArrowRight" && (n = r + 1), t.key === "End" && (n = s - 1), n < 0 && (n = s - 1), n > s - 1 && (n = 0), this.focusControlAtIndex(n), 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((i, s) => {
-      s === t ? (i.setAttribute("tabindex", "0"), i.focus()) : i.setAttribute("tabindex", "-1");
-    });
-  }
-  get controls() {
-    return d(this);
-  }
-}
-export {
-  u as default
-};

package/dist/types/accordion/accordion.d.ts

@@ -1,6 +0,0 @@
-export default class AccordionElement extends HTMLElement {
-    connectedCallback(): void;
-    disconnectedCallback(): void;
-    private onToggle;
-    get required(): boolean;
-}

package/dist/types/disclosure/disclosure.d.ts

@@ -1,14 +0,0 @@
-export default class DisclosureElement extends HTMLElement {
-    static get observedAttributes(): string[];
-    connectedCallback(): void;
-    disconnectedCallback(): void;
-    private onButtonClick;
-    get open(): boolean;
-    set open(val: boolean);
-    get disabled(): boolean;
-    attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
-    private wasOpened;
-    private wasClosed;
-    private get button();
-    private get content();
-}

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

@@ -1,17 +0,0 @@
-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

@@ -1,21 +0,0 @@
-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();
-}