inclusive-elements 0.5.0 → 0.5.2

package/dist/inclusive-elements7.js

@@ -25,7 +25,7 @@ class D extends HTMLElement {
     });
     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(), t.stopPropagation());
+      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 = `

package/dist/inclusive-elements8.js

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

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

@@ -5,6 +5,7 @@ export default class TabsElement extends HTMLElement {
     private selectTab;
     private onKeyDown;
     private onClick;
+    private get initialTabIndex();
     private get tablist();
     private get tabs();
     private get tabpanels();

package/package.json

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