inclusive-elements 0.5.3 → 0.5.4

package/dist/inclusive-elements8.js

@@ -1,54 +1,64 @@
-var d = Object.defineProperty;
-var h = (l, r, t) => r in l ? d(l, r, { enumerable: !0, configurable: !0, writable: !0, value: t }) : l[r] = t;
-var o = (l, r, t) => (h(l, typeof r != "symbol" ? r + "" : r, t), t);
-let u = 0;
-class A extends HTMLElement {
+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);
-    o(this, "idPrefix", "tabs" + ++u);
-    o(this, "onKeyDown", (t) => {
-      const a = t.target, e = this.tabs.indexOf(a), s = this.tablist.getAttribute("aria-orientation") === "vertical";
-      let i = !1;
+    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 (s ? "ArrowUp" : "ArrowLeft"):
-          this.selectTab(e - 1), i = !0;
+        case (a ? "ArrowUp" : "ArrowLeft"):
+          s = (i - 1 + e.length) % e.length;
           break;
-        case (s ? "ArrowDown" : "ArrowRight"):
-          this.selectTab(e + 1), i = !0;
+        case (a ? "ArrowDown" : "ArrowRight"):
+          s = (i + 1) % e.length;
           break;
         case "Home":
-          this.selectTab(0), i = !0;
+          s = 0;
           break;
         case "End":
-          this.selectTab(this.tabs.length - 1), i = !0;
+          s = e.length - 1;
       }
-      i && (t.stopPropagation(), t.preventDefault());
+      s !== void 0 && (this.selectTab(s, { focus: !0 }), t.stopPropagation(), t.preventDefault());
     });
-    o(this, "onClick", (t) => {
-      const e = t.target.closest("[role=tab]");
-      e && this.selectTab(this.tabs.indexOf(e));
+    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, !1, !1), this.tabs.forEach((t, a) => {
-      const e = this.tabpanels[a], s = t.getAttribute("id") || this.idPrefix + "_tab_" + a, i = e.getAttribute("id") || this.idPrefix + "_panel_" + a;
-      t.setAttribute("id", s), t.setAttribute("aria-controls", i), e.setAttribute("id", i), e.setAttribute("aria-labelledby", s), e.setAttribute("tabindex", "0");
+    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, a = !0, e = !0) {
-    const s = this.tabs, i = this.tabpanels, b = s.findIndex(
+  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"
     );
-    t < 0 ? t += s.length : t >= s.length && (t -= s.length), s.forEach((n, c) => {
-      c === t ? (n.setAttribute("aria-selected", "true"), n.removeAttribute("tabindex"), i[c].hidden = !1, a && n.focus()) : (n.setAttribute("aria-selected", "false"), n.setAttribute("tabindex", "-1"), i[c].hidden = !0);
-    }), e && b !== t && this.dispatchEvent(new Event("change"));
+    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(
-      (a) => a.getAttribute("aria-selected") === "true"
+      (e) => e.getAttribute("aria-selected") === "true"
     );
     return t !== -1 ? t : 0;
   }
@@ -63,5 +73,5 @@ class A extends HTMLElement {
   }
 }
 export {
-  A as default
+  x as default
 };

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

@@ -1,8 +1,12 @@
+type SelectTabOptions = {
+    focus?: boolean;
+    emit?: boolean;
+};
 export default class TabsElement extends HTMLElement {
     private idPrefix;
     connectedCallback(): void;
     disconnectedCallback(): void;
-    private selectTab;
+    selectTab(index: number, options?: SelectTabOptions): boolean;
     private onKeyDown;
     private onClick;
     private get initialTabIndex();
@@ -10,3 +14,4 @@ export default class TabsElement extends HTMLElement {
     private get tabs();
     private get tabpanels();
 }
+export {};

package/package.json

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