inclusive-elements 0.3.4 → 0.4.0

package/README.md

@@ -29,6 +29,7 @@ Detailed descriptions and usage instructions are contained within each element:
 -   [Menu](src/menu)
 -   [Modal](src/modal)
 -   [Popup](src/popup)
+-   [Tabs](src/tabs)
 -   [Toolbar](src/toolbar)
 -   [Tooltip](src/tooltip)
 

package/dist/inclusive-elements.js

@@ -1,26 +1,27 @@
 var T = Object.defineProperty;
-var D = (o, r, t) => r in o ? T(o, r, { enumerable: !0, configurable: !0, writable: !0, value: t }) : o[r] = t;
-var s = (o, r, t) => (D(o, typeof r != "symbol" ? r + "" : r, t), t);
-import { move as k, hello as h, goodbye as d, cancel as v } from "hello-goodbye";
-import { isFocusable as H, focusable as A } from "tabbable";
-import { createFocusTrap as O } from "focus-trap";
-import { autoUpdate as M, computePosition as g, shift as L, flip as x, size as K } from "@floating-ui/dom";
-class I extends HTMLElement {
+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, "onOpen", (t) => {
-      this.querySelectorAll(
-        ":scope > ui-disclosure"
-      ).forEach((e) => {
-        e.open = e === t.target, this.required && e.toggleAttribute("disabled", e === t.target);
+    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("open", this.onOpen, { capture: !0 });
+    this.addEventListener("toggle", this.onToggle, { capture: !0 });
   }
   disconnectedCallback() {
-    this.removeEventListener("open", this.onOpen, { capture: !0 });
+    this.removeEventListener("toggle", this.onToggle, { capture: !0 });
   }
   get required() {
     return this.hasAttribute("required");
@@ -46,7 +47,7 @@ const w = class extends HTMLElement {
   }
   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, () => {
+    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(
@@ -69,8 +70,8 @@ const w = class extends HTMLElement {
       });
       return;
     }
-    k(this.children, () => {
-      d(t).then(() => this.removeChild(t));
+    A(this.children, () => {
+      c(t).then(() => this.removeChild(t));
     }), this.clearTimeout(t);
   }
   clear() {
@@ -102,12 +103,12 @@ const w = class extends HTMLElement {
     this.timeouts.has(t) && clearTimeout(this.timeouts.get(t));
   }
 };
-let b = w;
-s(b, "duration", 1e4);
-function C(o) {
-  return o.altKey || o.ctrlKey || o.metaKey || o.shiftKey || o.button !== void 0 && o.button !== 0;
+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 P extends HTMLElement {
+class $ extends HTMLElement {
   constructor() {
     super(...arguments);
     s(this, "onButtonClick", (t) => {
@@ -136,10 +137,10 @@ class P extends HTMLElement {
     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("open")));
+    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 || (this.button.setAttribute("aria-expanded", "false"), d(this.content).then(() => this.content.hidden = !0), this.dispatchEvent(new Event("close")));
+    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]");
@@ -148,7 +149,7 @@ class P extends HTMLElement {
     return this.children[1];
   }
 }
-const y = class extends HTMLElement {
+const g = class extends HTMLElement {
   constructor() {
     super(...arguments);
     s(this, "search", "");
@@ -165,7 +166,7 @@ const y = class extends HTMLElement {
         }
         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 = "";
-        }, y.searchDelay), this.items.some((e) => {
+        }, 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;
         }));
@@ -192,9 +193,9 @@ const y = class extends HTMLElement {
     i < 0 && (i = e.length - 1), i >= e.length && (i = 0), (n = e[i]) == null || n.focus();
   }
 };
-let f = y;
+let f = g;
 s(f, "searchDelay", 800);
-const u = class extends HTMLElement {
+const l = class extends HTMLElement {
   constructor() {
     super();
     s(this, "focusTrap");
@@ -207,8 +208,8 @@ const u = class extends HTMLElement {
     const e = this.attachShadow({ mode: "open" });
     e.appendChild(t.content.cloneNode(!0)), this.backdrop.addEventListener("click", () => {
       var i;
-      this.hasAttribute("static") ? (i = u.attention) == null || i.call(u, e.children[1]) : this.close();
-    }), this.focusTrap = O(this, {
+      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
@@ -218,9 +219,9 @@ const u = class extends HTMLElement {
     return ["open"];
   }
   connectedCallback() {
-    var t, e, i, n, a, E;
-    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") || (E = this.content) == null || E.setAttribute("tabindex", "-1"), this.addEventListener("keydown", (p) => {
-      p.key === "Escape" && this.open && (p.preventDefault(), p.stopPropagation(), this.close());
+    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() {
@@ -247,7 +248,7 @@ const u = class extends HTMLElement {
   }
   wasClosed() {
     var t;
-    (t = this.focusTrap) == null || t.deactivate(), d(this).then(() => this.hidden = !0), this.dispatchEvent(new Event("close"));
+    (t = this.focusTrap) == null || t.deactivate(), c(this).then(() => this.hidden = !0), this.dispatchEvent(new Event("close"));
   }
   get backdrop() {
     var t;
@@ -257,7 +258,7 @@ const u = class extends HTMLElement {
     return this.firstElementChild;
   }
 };
-let m = u;
+let m = l;
 s(m, "attention", (t) => t.animate(
   [
     { transform: "scale(1)" },
@@ -266,7 +267,7 @@ s(m, "attention", (t) => t.animate(
   ],
   300
 ));
-class $ extends HTMLElement {
+class U extends HTMLElement {
   constructor() {
     super();
     s(this, "cleanup");
@@ -275,7 +276,7 @@ class $ extends HTMLElement {
     });
     s(this, "onButtonKeyDown", (t) => {
       var e;
-      t.key === "ArrowDown" && !this.disabled && (t.preventDefault(), this.open = !0, (e = A(this.content)[0]) == null || e.focus());
+      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());
@@ -322,12 +323,12 @@ class $ extends HTMLElement {
       this.button,
       this.content,
       () => {
-        g(this.button, this.content, {
+        E(this.button, this.content, {
           placement: this.getAttribute("placement") || "bottom",
           middleware: [
             L(),
             x(),
-            K({
+            O({
               apply: ({ availableWidth: e, availableHeight: i }) => {
                 Object.assign(this.content.style, {
                   maxWidth: "",
@@ -352,7 +353,7 @@ class $ extends HTMLElement {
   }
   wasClosed() {
     var t;
-    this.content.hidden || (this.button.setAttribute("aria-expanded", "false"), (t = this.cleanup) == null || t.call(this), d(this.backdrop).then(() => this.backdrop.hidden = !0), d(this.content).then(() => this.content.hidden = !0), this.dispatchEvent(new Event("close")));
+    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;
@@ -365,7 +366,59 @@ class $ extends HTMLElement {
     return this.children[1];
   }
 }
-class U extends HTMLElement {
+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", () => {
@@ -377,8 +430,8 @@ class U extends HTMLElement {
       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();
+      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() {
@@ -393,10 +446,10 @@ class U extends HTMLElement {
     });
   }
   get controls() {
-    return A(this);
+    return k(this);
   }
 }
-const l = class extends HTMLElement {
+const u = class extends HTMLElement {
   constructor() {
     super(...arguments);
     s(this, "parent");
@@ -436,8 +489,8 @@ const l = class extends HTMLElement {
     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", g(this.parent, t, {
-      placement: this.getAttribute("placement") || l.placement,
+    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, {
@@ -447,7 +500,7 @@ const l = class extends HTMLElement {
     });
   }
   hide() {
-    clearTimeout(this.timeout), this.showing && (this.showing = !1, d(this.tooltip).then(() => {
+    clearTimeout(this.timeout), this.showing && (this.showing = !1, c(this.tooltip).then(() => {
       this.tooltip && (this.tooltip.hidden = !0);
     }));
   }
@@ -456,25 +509,26 @@ const l = class extends HTMLElement {
     const e = parseInt(this.getAttribute("delay") || "");
     this.timeout = window.setTimeout(
       t.bind(this),
-      isNaN(e) ? l.delay : e
+      isNaN(e) ? u.delay : e
     );
   }
   createTooltip() {
-    return this.tooltip || (this.tooltip = document.createElement("div"), this.tooltip.className = this.getAttribute("tooltip-class") || l.tooltipClass, this.tooltip.hidden = !0, this.tooltip.addEventListener("mouseenter", this.show.bind(this)), this.tooltip.addEventListener(
+    return this.tooltip || (this.tooltip = document.createElement("div"), this.tooltip.className = this.getAttribute("tooltip-class") || u.tooltipClass, this.tooltip.hidden = !0, this.tooltip.addEventListener("mouseenter", this.show.bind(this)), this.tooltip.addEventListener(
       "mouseleave",
       this.afterDelay.bind(this, this.hide)
     ), document.body.appendChild(this.tooltip)), this.tooltip;
   }
 };
-let c = l;
-s(c, "delay", 100), s(c, "placement", "top"), s(c, "tooltipClass", "tooltip");
+let d = u;
+s(d, "delay", 100), s(d, "placement", "top"), s(d, "tooltipClass", "tooltip");
 export {
-  I as AccordionElement,
-  b as AlertsElement,
-  P as DisclosureElement,
+  F as AccordionElement,
+  p as AlertsElement,
+  $ as DisclosureElement,
   f as MenuElement,
   m as ModalElement,
-  $ as PopupElement,
-  U as ToolbarElement,
-  c as TooltipElement
+  U as PopupElement,
+  R as TabsElement,
+  j as ToolbarElement,
+  d as TooltipElement
 };

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

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

package/dist/types/index.d.ts

@@ -4,5 +4,6 @@ export { default as DisclosureElement } from './disclosure/disclosure';
 export { default as MenuElement } from './menu/menu';
 export { default as ModalElement } from './modal/modal';
 export { default as PopupElement } from './popup/popup';
+export { default as TabsElement } from './tabs/tabs';
 export { default as ToolbarElement } from './toolbar/toolbar';
 export { default as TooltipElement } from './tooltip/tooltip';

package/dist/types/tabs/tabs.d.ts

@@ -0,0 +1,11 @@
+export default class TabsElement extends HTMLElement {
+    private idPrefix;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private selectTab;
+    private onKeyDown;
+    private onClick;
+    private get tablist();
+    private get tabs();
+    private get tabpanels();
+}

package/package.json

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