inclusive-elements 0.4.0 → 0.4.1

package/dist/inclusive-elements.js

@@ -1,534 +1,20 @@
-var T = Object.defineProperty;
-var D = (r, a, t) => a in r ? T(r, a, { enumerable: !0, configurable: !0, writable: !0, value: t }) : r[a] = t;
-var s = (r, a, t) => (D(r, typeof a != "symbol" ? a + "" : a, t), t);
-import { move as A, hello as h, goodbye as c, cancel as v } from "hello-goodbye";
-import { isFocusable as H, focusable as k } from "tabbable";
-import { createFocusTrap as K } from "focus-trap";
-import { autoUpdate as M, computePosition as E, shift as L, flip as x, size as O } from "@floating-ui/dom";
-class F extends HTMLElement {
-  constructor() {
-    super(...arguments);
-    s(this, "onToggle", (t) => {
-      const e = t.target;
-      e.open && this.querySelectorAll(
-        ":scope > :is(ui-disclosure, details)"
-      ).forEach((i) => {
-        i.toggleAttribute("open", i === e), this.required && i.toggleAttribute("disabled", i === e);
-      });
-    });
-  }
-  connectedCallback() {
-    this.addEventListener("toggle", this.onToggle, { capture: !0 });
-  }
-  disconnectedCallback() {
-    this.removeEventListener("toggle", this.onToggle, { capture: !0 });
-  }
-  get required() {
-    return this.hasAttribute("required");
-  }
-}
-const w = 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) : A(this.children, () => {
-      this.append(t), h(t);
-    });
-    const n = Number(
-      e.duration !== void 0 ? e.duration : t.dataset.duration || w.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;
-    }
-    A(this.children, () => {
-      c(t).then(() => 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 p = w;
-s(p, "duration", 1e4);
-function C(r) {
-  return r.altKey || r.ctrlKey || r.metaKey || r.shiftKey || r.button !== void 0 && r.button !== 0;
-}
-class $ extends HTMLElement {
-  constructor() {
-    super(...arguments);
-    s(this, "onButtonClick", (t) => {
-      !C(t) && !this.disabled && (this.open = !this.open, t.preventDefault());
-    });
-  }
-  static get observedAttributes() {
-    return ["open"];
-  }
-  connectedCallback() {
-    this.content.hidden = !this.open, this.button.setAttribute("aria-expanded", String(this.open)), this.button.addEventListener("click", this.onButtonClick);
-  }
-  disconnectedCallback() {
-    v(this.content), this.button.removeAttribute("aria-expanded"), this.button.removeEventListener("click", this.onButtonClick);
-  }
-  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() {
-    this.content.hidden && (this.content.hidden = !1, h(this.content)), this.button.setAttribute("aria-expanded", "true"), this.dispatchEvent(new Event("toggle"));
-  }
-  wasClosed() {
-    this.content.hidden || c(this.content).then(() => this.content.hidden = !0), this.button.setAttribute("aria-expanded", "false"), this.dispatchEvent(new Event("toggle"));
-  }
-  get button() {
-    return this.querySelector("button, [role=button]");
-  }
-  get content() {
-    return this.children[1];
-  }
-}
-const g = 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 = "";
-        }, g.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) => H(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 f = g;
-s(f, "searchDelay", 800);
-const l = 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 = l.attention) == null || i.call(l, e.children[1]) : this.close();
-    }), this.focusTrap = K(this, {
-      escapeDeactivates: !1,
-      allowOutsideClick: !0,
-      preventScroll: !0
-    });
-  }
-  static get observedAttributes() {
-    return ["open"];
-  }
-  connectedCallback() {
-    var t, e, i, n, o, 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"), (o = this.content) != null && o.hasAttribute("tabindex") || (y = this.content) == null || y.setAttribute("tabindex", "-1"), this.addEventListener("keydown", (b) => {
-      b.key === "Escape" && this.open && (b.preventDefault(), b.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(), c(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;
-  }
-};
-let m = l;
-s(m, "attention", (t) => t.animate(
-  [
-    { transform: "scale(1)" },
-    { transform: "scale(1.1)" },
-    { transform: "scale(1)" }
-  ],
-  300
-));
-class U extends HTMLElement {
-  constructor() {
-    super();
-    s(this, "cleanup");
-    s(this, "onButtonClick", (t) => {
-      !C(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 = k(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() {
-    v(this.backdrop), v(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.content.style.position = "absolute", this.backdrop.hidden = !1, h(this.content), h(this.backdrop), this.button.setAttribute("aria-expanded", "true"), this.cleanup = M(
-      this.button,
-      this.content,
-      () => {
-        E(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), c(this.backdrop).then(() => this.backdrop.hidden = !0), c(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];
-  }
-}
-let S = 0;
-class R extends HTMLElement {
-  constructor() {
-    super(...arguments);
-    s(this, "idPrefix", "tabs" + ++S);
-    s(this, "onKeyDown", (t) => {
-      const e = t.target, i = this.tabs.indexOf(e), n = this.tablist.getAttribute("aria-orientation") === "vertical";
-      let o = !1;
-      switch (t.key) {
-        case (n ? "ArrowUp" : "ArrowLeft"):
-          this.selectTab(i - 1), o = !0;
-          break;
-        case (n ? "ArrowDown" : "ArrowRight"):
-          this.selectTab(i + 1), o = !0;
-          break;
-        case "Home":
-          this.selectTab(0), o = !0;
-          break;
-        case "End":
-          this.selectTab(this.tabs.length - 1), o = !0;
-      }
-      o && (t.stopPropagation(), t.preventDefault());
-    });
-    s(this, "onClick", (t) => {
-      const i = t.target.closest("[role=tab]");
-      i && this.selectTab(this.tabs.indexOf(i));
-    });
-  }
-  connectedCallback() {
-    this.tablist.addEventListener("keydown", this.onKeyDown), this.tablist.addEventListener("click", this.onClick), this.selectTab(0, !1), this.tabs.forEach((t, e) => {
-      const i = this.tabpanels[e], n = t.getAttribute("id") || this.idPrefix + "_tab_" + e, o = i.getAttribute("id") || this.idPrefix + "_panel_" + e;
-      t.setAttribute("id", n), t.setAttribute("aria-controls", o), i.setAttribute("id", o), i.setAttribute("aria-labelledby", n), i.setAttribute("tabindex", "0");
-    });
-  }
-  disconnectedCallback() {
-    this.tablist.removeEventListener("keydown", this.onKeyDown), this.tablist.removeEventListener("click", this.onClick);
-  }
-  selectTab(t, e = !0) {
-    t < 0 ? t += this.tabs.length : t >= this.tabs.length && (t -= this.tabs.length), this.tabs.forEach((i, n) => {
-      n === t ? (i.setAttribute("aria-selected", "true"), i.removeAttribute("tabindex"), this.tabpanels[n].hidden = !1, e && i.focus()) : (i.setAttribute("aria-selected", "false"), i.setAttribute("tabindex", "-1"), this.tabpanels[n].hidden = !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]"));
-  }
-}
-class j 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 o = 0;
-      t.key === "ArrowLeft" && (o = n - 1), t.key === "ArrowRight" && (o = n + 1), t.key === "End" && (o = i - 1), o < 0 && (o = i - 1), o > i - 1 && (o = 0), this.focusControlAtIndex(o), 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 k(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, "onPointerUp", (t) => {
-      t.pointerType === "mouse" ? this.hide() : this.show();
-    });
-    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("pointerup", this.onPointerUp), 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("pointerup", this.onPointerUp), 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", E(this.parent, t, {
-      placement: this.getAttribute("placement") || u.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, c(this.tooltip).then(() => {
-      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");
+import { default as o } from "./inclusive-elements2.js";
+import { default as r } from "./inclusive-elements3.js";
+import { default as f } from "./inclusive-elements4.js";
+import { default as s } from "./inclusive-elements5.js";
+import { default as u } from "./inclusive-elements6.js";
+import { default as n } from "./inclusive-elements7.js";
+import { default as E } from "./inclusive-elements8.js";
+import { default as i } from "./inclusive-elements9.js";
+import { default as b } from "./inclusive-elements10.js";
 export {
-  F as AccordionElement,
-  p as AlertsElement,
-  $ as DisclosureElement,
-  f as MenuElement,
-  m as ModalElement,
-  U as PopupElement,
-  R as TabsElement,
-  j as ToolbarElement,
-  d as TooltipElement
+  o as AccordionElement,
+  r as AlertsElement,
+  f as DisclosureElement,
+  s as MenuElement,
+  u as ModalElement,
+  n as PopupElement,
+  E as TabsElement,
+  i as ToolbarElement,
+  b as TooltipElement
 };

package/dist/inclusive-elements10.js

@@ -0,0 +1,80 @@
+var d = Object.defineProperty;
+var l = (o, i, t) => i in o ? d(o, i, { enumerable: !0, configurable: !0, writable: !0, value: t }) : o[i] = t;
+var e = (o, i, t) => (l(o, typeof i != "symbol" ? i + "" : i, t), t);
+import { computePosition as p, shift as u, flip as c } from "@floating-ui/dom";
+import { hello as m, goodbye as v } from "hello-goodbye";
+const r = class extends HTMLElement {
+  constructor() {
+    super(...arguments);
+    e(this, "parent");
+    e(this, "tooltip");
+    e(this, "timeout");
+    e(this, "observer");
+    e(this, "showing", !1);
+    e(this, "onMouseEnter", this.afterDelay.bind(this, this.show));
+    e(this, "onFocus", this.show.bind(this));
+    e(this, "onMouseLeave", this.afterDelay.bind(this, this.hide));
+    e(this, "onBlur", this.hide.bind(this));
+    e(this, "onPointerUp", (t) => {
+      t.pointerType === "mouse" ? this.hide() : this.show();
+    });
+    e(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("pointerup", this.onPointerUp), this.observer = new MutationObserver((t) => {
+      t.forEach((s) => {
+        s.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("pointerup", this.onPointerUp), 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, m(t), this.showing = !0), t.innerHTML !== this.innerHTML && (t.innerHTML = this.innerHTML), t.style.position = "absolute", p(this.parent, t, {
+      placement: this.getAttribute("placement") || r.placement,
+      middleware: [u(), c()]
+    }).then(({ x: s, y: h, placement: a }) => {
+      Object.assign(t.style, {
+        left: `${s}px`,
+        top: `${h}px`
+      }), t.dataset.placement = a;
+    });
+  }
+  hide() {
+    clearTimeout(this.timeout), this.showing && (this.showing = !1, v(this.tooltip).then(() => {
+      this.tooltip && (this.tooltip.hidden = !0);
+    }));
+  }
+  afterDelay(t) {
+    clearTimeout(this.timeout);
+    const s = parseInt(this.getAttribute("delay") || "");
+    this.timeout = window.setTimeout(
+      t.bind(this),
+      isNaN(s) ? r.delay : s
+    );
+  }
+  createTooltip() {
+    return this.tooltip || (this.tooltip = document.createElement("div"), this.tooltip.className = this.getAttribute("tooltip-class") || r.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 n = r;
+e(n, "delay", 100), e(n, "placement", "top"), e(n, "tooltipClass", "tooltip");
+export {
+  n as default
+};

package/dist/inclusive-elements11.js

@@ -0,0 +1,6 @@
+function n(t) {
+  return t.altKey || t.ctrlKey || t.metaKey || t.shiftKey || t.button !== void 0 && t.button !== 0;
+}
+export {
+  n as shouldOpenInNewTab
+};

package/dist/inclusive-elements2.js

@@ -0,0 +1,28 @@
+var n = Object.defineProperty;
+var l = (r, e, t) => e in r ? n(r, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : r[e] = t;
+var s = (r, e, t) => (l(r, typeof e != "symbol" ? e + "" : e, t), t);
+class a extends HTMLElement {
+  constructor() {
+    super(...arguments);
+    s(this, "onToggle", (t) => {
+      const o = t.target;
+      o.open && this.querySelectorAll(
+        ":scope > :is(ui-disclosure, details)"
+      ).forEach((i) => {
+        i.toggleAttribute("open", i === o), this.required && i.toggleAttribute("disabled", i === o);
+      });
+    });
+  }
+  connectedCallback() {
+    this.addEventListener("toggle", this.onToggle, { capture: !0 });
+  }
+  disconnectedCallback() {
+    this.removeEventListener("toggle", this.onToggle, { capture: !0 });
+  }
+  get required() {
+    return this.hasAttribute("required");
+  }
+}
+export {
+  a as default
+};

package/dist/inclusive-elements3.js

@@ -0,0 +1,85 @@
+var c = Object.defineProperty;
+var m = (a, s, t) => s in a ? c(a, s, { enumerable: !0, configurable: !0, writable: !0, value: t }) : a[s] = t;
+var o = (a, s, t) => (m(a, typeof s != "symbol" ? s + "" : s, t), t);
+import { move as d, hello as u, goodbye as f } from "hello-goodbye";
+const n = class extends HTMLElement {
+  constructor() {
+    super();
+    o(this, "timeouts", /* @__PURE__ */ new Map());
+    o(this, "index", 0);
+    new MutationObserver((i) => {
+      i.forEach((r) => {
+        r.addedNodes.forEach((e) => {
+          e instanceof HTMLElement && this.show(e);
+        });
+      });
+    }).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, i = {}) {
+    const r = i.key || t.dataset.key || String(this.index++);
+    t.dataset.key = r, this.contains(t) ? u(t) : i.animate === !1 ? this.append(t) : d(this.children, () => {
+      this.append(t), u(t);
+    });
+    const e = Number(
+      i.duration !== void 0 ? i.duration : t.dataset.duration || n.duration
+    );
+    return e > 0 && (this.startTimeout(t, e), t.addEventListener("mouseenter", this.clearTimeout.bind(this, t)), t.addEventListener("focusin", this.clearTimeout.bind(this, t)), t.addEventListener(
+      "mouseleave",
+      this.startTimeout.bind(this, t, e)
+    ), t.addEventListener(
+      "focusout",
+      this.startTimeout.bind(this, t, e)
+    )), r;
+  }
+  dismiss(t) {
+    if (typeof t == "string") {
+      this.querySelectorAll(
+        `[data-key="${t}"]`
+      ).forEach((i) => {
+        this.dismiss(i);
+      });
+      return;
+    }
+    d(this.children, () => {
+      f(t).then(() => this.removeChild(t));
+    }), this.clearTimeout(t);
+  }
+  clear() {
+    Array.from(this.children).forEach((t) => {
+      this.dismiss(t);
+    });
+  }
+  speak(t) {
+    const i = document.createElement("div");
+    Object.assign(i.style, {
+      clip: "rect(0 0 0 0)",
+      clipPath: "inset(50%)",
+      height: "1px",
+      overflow: "hidden",
+      position: "absolute",
+      whiteSpace: "nowrap",
+      width: "1px"
+    }), i.textContent = t, this.show(i);
+  }
+  startTimeout(t, i) {
+    this.clearTimeout(t), this.timeouts.set(
+      t,
+      window.setTimeout(() => {
+        this.dismiss(t);
+      }, i)
+    );
+  }
+  clearTimeout(t) {
+    this.timeouts.has(t) && clearTimeout(this.timeouts.get(t));
+  }
+};
+let h = n;
+o(h, "duration", 1e4);
+export {
+  h as default
+};

package/dist/inclusive-elements4.js

@@ -0,0 +1,49 @@
+var o = Object.defineProperty;
+var r = (n, e, t) => e in n ? o(n, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : n[e] = t;
+var i = (n, e, t) => (r(n, typeof e != "symbol" ? e + "" : e, t), t);
+import { cancel as h, hello as d, goodbye as a } from "hello-goodbye";
+import { shouldOpenInNewTab as l } from "./inclusive-elements11.js";
+class f extends HTMLElement {
+  constructor() {
+    super(...arguments);
+    i(this, "onButtonClick", (t) => {
+      !l(t) && !this.disabled && (this.open = !this.open, t.preventDefault());
+    });
+  }
+  static get observedAttributes() {
+    return ["open"];
+  }
+  connectedCallback() {
+    this.content.hidden = !this.open, this.button.setAttribute("aria-expanded", String(this.open)), this.button.addEventListener("click", this.onButtonClick);
+  }
+  disconnectedCallback() {
+    h(this.content), this.button.removeAttribute("aria-expanded"), this.button.removeEventListener("click", this.onButtonClick);
+  }
+  get open() {
+    return this.hasAttribute("open");
+  }
+  set open(t) {
+    t ? this.setAttribute("open", "") : this.removeAttribute("open");
+  }
+  get disabled() {
+    return this.hasAttribute("disabled");
+  }
+  attributeChangedCallback(t, u, s) {
+    t === "open" && (s !== null ? this.wasOpened() : this.wasClosed());
+  }
+  wasOpened() {
+    this.content.hidden && (this.content.hidden = !1, d(this.content)), this.button.setAttribute("aria-expanded", "true"), this.dispatchEvent(new Event("toggle"));
+  }
+  wasClosed() {
+    this.content.hidden || a(this.content).then(() => this.content.hidden = !0), this.button.setAttribute("aria-expanded", "false"), this.dispatchEvent(new Event("toggle"));
+  }
+  get button() {
+    return this.querySelector("button, [role=button]");
+  }
+  get content() {
+    return this.children[1];
+  }
+}
+export {
+  f as default
+};

package/dist/inclusive-elements5.js

@@ -0,0 +1,53 @@
+var c = Object.defineProperty;
+var u = (r, e, t) => e in r ? c(r, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : r[e] = t;
+var n = (r, e, t) => (u(r, typeof e != "symbol" ? e + "" : e, t), t);
+import { isFocusable as l } from "tabbable";
+const o = class extends HTMLElement {
+  constructor() {
+    super(...arguments);
+    n(this, "search", "");
+    n(this, "searchTimeout");
+    n(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 = "";
+        }, o.searchDelay), this.items.some((s) => {
+          var i;
+          return ((i = s.textContent) == null ? void 0 : i.trim().toLowerCase().indexOf(this.search)) === 0 ? (s.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) => l(t));
+  }
+  navigate(t) {
+    var h;
+    const s = this.items;
+    let i = (document.activeElement instanceof HTMLElement ? s.indexOf(document.activeElement) : -1) + t;
+    i < 0 && (i = s.length - 1), i >= s.length && (i = 0), (h = s[i]) == null || h.focus();
+  }
+};
+let a = o;
+n(a, "searchDelay", 800);
+export {
+  a as default
+};

package/dist/inclusive-elements6.js

@@ -0,0 +1,80 @@
+var p = Object.defineProperty;
+var u = (n, s, t) => s in n ? p(n, s, { enumerable: !0, configurable: !0, writable: !0, value: t }) : n[s] = t;
+var a = (n, s, t) => (u(n, typeof s != "symbol" ? s + "" : s, t), t);
+import { createFocusTrap as f } from "focus-trap";
+import { hello as b, goodbye as v } from "hello-goodbye";
+const o = class 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 e = this.attachShadow({ mode: "open" });
+    e.appendChild(t.content.cloneNode(!0)), this.backdrop.addEventListener("click", () => {
+      var i;
+      this.hasAttribute("static") ? (i = o.attention) == null || i.call(o, e.children[1]) : this.close();
+    }), this.focusTrap = f(this, {
+      escapeDeactivates: !1,
+      allowOutsideClick: !0,
+      preventScroll: !0
+    });
+  }
+  static get observedAttributes() {
+    return ["open"];
+  }
+  connectedCallback() {
+    var t, e, i, h, l, d;
+    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") || (h = this.content) == null || h.setAttribute("aria-modal", "true"), (l = this.content) != null && l.hasAttribute("tabindex") || (d = this.content) == null || d.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, e, i) {
+    t !== "open" || !this.connected || (i !== null ? this.wasOpened() : this.wasClosed());
+  }
+  wasOpened() {
+    var t, e;
+    this.hidden = !1, b(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(), v(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;
+  }
+};
+let c = o;
+a(c, "attention", (t) => t.animate(
+  [
+    { transform: "scale(1)" },
+    { transform: "scale(1.1)" },
+    { transform: "scale(1)" }
+  ],
+  300
+));
+export {
+  c as default
+};

package/dist/inclusive-elements7.js

@@ -0,0 +1,109 @@
+var u = Object.defineProperty;
+var d = (i, n, t) => n in i ? u(i, n, { enumerable: !0, configurable: !0, writable: !0, value: t }) : i[n] = t;
+var o = (i, n, t) => (d(i, typeof n != "symbol" ? n + "" : n, t), t);
+import { autoUpdate as l, computePosition as p, shift as b, flip as f, size as m } from "@floating-ui/dom";
+import { cancel as r, hello as a, goodbye as c } from "hello-goodbye";
+import { focusable as k } from "tabbable";
+import { shouldOpenInNewTab as v } from "./inclusive-elements11.js";
+class C extends HTMLElement {
+  constructor() {
+    super();
+    o(this, "cleanup");
+    o(this, "onButtonClick", (t) => {
+      !v(t) && !this.disabled && (this.open = !this.open, t.preventDefault());
+    });
+    o(this, "onButtonKeyDown", (t) => {
+      var e;
+      t.key === "ArrowDown" && !this.disabled && (t.preventDefault(), this.open = !0, (e = k(this.content)[0]) == null || e.focus());
+    });
+    o(this, "onKeyDown", (t) => {
+      t.key === "Escape" && this.open && (t.preventDefault(), t.stopPropagation(), this.open = !1, this.button.focus());
+    });
+    o(this, "onFocusOut", (t) => {
+      (!(t.relatedTarget instanceof Node) || !this.contains(t.relatedTarget)) && (this.open = !1);
+    });
+    o(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() {
+    r(this.backdrop), r(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, s) {
+    t === "open" && (s !== null ? this.wasOpened() : this.wasClosed());
+  }
+  wasOpened() {
+    if (!this.content.hidden)
+      return;
+    this.content.hidden = !1, this.content.style.position = "absolute", this.backdrop.hidden = !1, a(this.content), a(this.backdrop), this.button.setAttribute("aria-expanded", "true"), this.cleanup = l(
+      this.button,
+      this.content,
+      () => {
+        p(this.button, this.content, {
+          placement: this.getAttribute("placement") || "bottom",
+          middleware: [
+            b(),
+            f(),
+            m({
+              apply: ({ availableWidth: e, availableHeight: s }) => {
+                Object.assign(this.content.style, {
+                  maxWidth: "",
+                  maxHeight: ""
+                });
+                const h = getComputedStyle(this.content);
+                (h.maxWidth === "none" || e < parseInt(h.maxWidth)) && (this.content.style.maxWidth = `${e}px`), (h.maxHeight === "none" || s < parseInt(h.maxHeight)) && (this.content.style.maxHeight = `${s}px`);
+              }
+            })
+          ]
+        }).then(({ x: e, y: s, placement: h }) => {
+          Object.assign(this.content.style, {
+            left: `${e}px`,
+            top: `${s}px`
+          }), this.content.dataset.placement = h;
+        });
+      },
+      { 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), c(this.backdrop).then(() => this.backdrop.hidden = !0), c(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 {
+  C as default
+};

package/dist/inclusive-elements8.js

@@ -0,0 +1,58 @@
+var o = Object.defineProperty;
+var b = (l, i, t) => i in l ? o(l, i, { enumerable: !0, configurable: !0, writable: !0, value: t }) : l[i] = t;
+var n = (l, i, t) => (b(l, typeof i != "symbol" ? i + "" : i, t), t);
+let c = 0;
+class d extends HTMLElement {
+  constructor() {
+    super(...arguments);
+    n(this, "idPrefix", "tabs" + ++c);
+    n(this, "onKeyDown", (t) => {
+      const a = t.target, e = this.tabs.indexOf(a), s = this.tablist.getAttribute("aria-orientation") === "vertical";
+      let r = !1;
+      switch (t.key) {
+        case (s ? "ArrowUp" : "ArrowLeft"):
+          this.selectTab(e - 1), r = !0;
+          break;
+        case (s ? "ArrowDown" : "ArrowRight"):
+          this.selectTab(e + 1), r = !0;
+          break;
+        case "Home":
+          this.selectTab(0), r = !0;
+          break;
+        case "End":
+          this.selectTab(this.tabs.length - 1), r = !0;
+      }
+      r && (t.stopPropagation(), t.preventDefault());
+    });
+    n(this, "onClick", (t) => {
+      const e = t.target.closest("[role=tab]");
+      e && this.selectTab(this.tabs.indexOf(e));
+    });
+  }
+  connectedCallback() {
+    this.tablist.addEventListener("keydown", this.onKeyDown), this.tablist.addEventListener("click", this.onClick), this.selectTab(0, !1), this.tabs.forEach((t, a) => {
+      const e = this.tabpanels[a], s = t.getAttribute("id") || this.idPrefix + "_tab_" + a, r = e.getAttribute("id") || this.idPrefix + "_panel_" + a;
+      t.setAttribute("id", s), t.setAttribute("aria-controls", r), e.setAttribute("id", r), e.setAttribute("aria-labelledby", s), e.setAttribute("tabindex", "0");
+    });
+  }
+  disconnectedCallback() {
+    this.tablist.removeEventListener("keydown", this.onKeyDown), this.tablist.removeEventListener("click", this.onClick);
+  }
+  selectTab(t, a = !0) {
+    t < 0 ? t += this.tabs.length : t >= this.tabs.length && (t -= this.tabs.length), this.tabs.forEach((e, s) => {
+      s === t ? (e.setAttribute("aria-selected", "true"), e.removeAttribute("tabindex"), this.tabpanels[s].hidden = !1, a && e.focus()) : (e.setAttribute("aria-selected", "false"), e.setAttribute("tabindex", "-1"), this.tabpanels[s].hidden = !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 {
+  d as default
+};

package/dist/inclusive-elements9.js

@@ -0,0 +1,38 @@
+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/package.json

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