@u-elements/u-tabs 0.1.0 → 0.1.2

package/dist/u-tabs.cjs

@@ -89,23 +89,10 @@ var ATTR_TABS = "data-utabs";
 var UHTMLTabsElement = class extends UHTMLElement {
   constructor() {
     super();
-    attr(this, ATTR_TABS, "");
     attachStyle(this, UHTMLTabsStyle);
   }
   connectedCallback() {
-    mutationObserver(this, {
-      attributeFilter: ["role"],
-      attributes: true,
-      childList: true,
-      subtree: true
-    });
-  }
-  handleEvent() {
-    var _a2;
-    (_a2 = this.tabList) == null ? void 0 : _a2.handleEvent();
-  }
-  disconnectedCallback() {
-    mutationObserver(this, false);
+    attr(this, ATTR_TABS, "");
   }
   get tabList() {
     return queryWithoutNested("tablist", this)[0] || null;
@@ -182,7 +169,7 @@ var UHTMLTabListElement = class extends UHTMLElement {
     setSelected(this.tabs[index]);
   }
 };
-var SKIP_ATTR_CHANGE = false;
+var SKIP_ATTR_CHANGE_TAB = false;
 var UHTMLTabElement = class extends UHTMLElement {
   // Using ES2015 syntax for backwards compatibility
   static get observedAttributes() {
@@ -197,8 +184,8 @@ var UHTMLTabElement = class extends UHTMLElement {
     attr(this, "tabindex", this.selected ? "0" : "-1");
   }
   attributeChangedCallback() {
-    if (!SKIP_ATTR_CHANGE && this.selected && this.tabList) {
-      SKIP_ATTR_CHANGE = true;
+    if (!SKIP_ATTR_CHANGE_TAB && this.selected && this.tabList) {
+      SKIP_ATTR_CHANGE_TAB = true;
       const tabs = this.tabList ? getTabs(this.tabList) : [];
       const panels = queryWithoutNested("tabpanel", this.tabsElement || this);
       const nextPanel = getPanel(this, panels[[...tabs].indexOf(this)]);
@@ -211,7 +198,7 @@ var UHTMLTabElement = class extends UHTMLElement {
         if (panel == null ? void 0 : panel.id) attr(tab, ARIA_CONTROLS, panel.id);
         if (panel) panel.hidden = panel !== nextPanel;
       }
-      SKIP_ATTR_CHANGE = false;
+      SKIP_ATTR_CHANGE_TAB = false;
     }
   }
   get tabsElement() {
@@ -236,24 +223,30 @@ var UHTMLTabElement = class extends UHTMLElement {
     return getPanel(this);
   }
 };
+var SKIP_ATTR_CHANGE_PANEL = false;
 var UHTMLTabPanelElement = class extends UHTMLElement {
   // Using ES2015 syntax for backwards compatibility
   static get observedAttributes() {
-    return ["hidden"];
+    return ["id", "hidden"];
   }
   constructor() {
     super();
     attachStyle(this, UHTMLTabPanelStyle);
   }
   connectedCallback() {
+    var _a2, _b;
     attr(this, "role", "tabpanel");
-    this.hidden = getSelectedIndex(this.tabs) === -1;
+    (_b = (_a2 = this.tabsElement) == null ? void 0 : _a2.tabList) == null ? void 0 : _b.handleEvent();
     this.attributeChangedCallback();
   }
   attributeChangedCallback() {
-    const hidden = this.hidden;
-    attr(this, "aria-hidden", `${hidden}`);
-    attr(this, "tabindex", hidden || isFocusable(this.firstChild) ? null : "0");
+    if (SKIP_ATTR_CHANGE_PANEL) return;
+    SKIP_ATTR_CHANGE_PANEL = true;
+    const hasFocusable = isFocusable(this.firstChild);
+    this.hidden = getSelectedIndex(this.tabs) === -1;
+    attr(this, "aria-hidden", `${this.hidden}`);
+    attr(this, "tabindex", this.hidden || hasFocusable ? null : "0");
+    SKIP_ATTR_CHANGE_PANEL = false;
   }
   get tabsElement() {
     return getTabsElement(this);

package/dist/u-tabs.d.cts

@@ -26,8 +26,6 @@ declare const UHTMLTabPanelShadowRoot: string;
 declare class UHTMLTabsElement extends UHTMLElement {
     constructor();
     connectedCallback(): void;
-    handleEvent(): void;
-    disconnectedCallback(): void;
     get tabList(): UHTMLTabListElement | null;
     get selectedIndex(): number;
     set selectedIndex(index: number);
@@ -61,10 +59,6 @@ declare class UHTMLTabElement extends UHTMLElement {
     get index(): number;
     get panel(): HTMLElement | null;
 }
-/**
- * The `<u-tabpanel>` HTML element is a container for the resources of layered content associated with a `<u-tab>`.
- * [MDN Reference](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/tabpanel_role)
- */
 declare class UHTMLTabPanelElement extends UHTMLElement {
     static get observedAttributes(): string[];
     constructor();

package/dist/u-tabs.d.ts

@@ -26,8 +26,6 @@ declare const UHTMLTabPanelShadowRoot: string;
 declare class UHTMLTabsElement extends UHTMLElement {
     constructor();
     connectedCallback(): void;
-    handleEvent(): void;
-    disconnectedCallback(): void;
     get tabList(): UHTMLTabListElement | null;
     get selectedIndex(): number;
     set selectedIndex(index: number);
@@ -61,10 +59,6 @@ declare class UHTMLTabElement extends UHTMLElement {
     get index(): number;
     get panel(): HTMLElement | null;
 }
-/**
- * The `<u-tabpanel>` HTML element is a container for the resources of layered content associated with a `<u-tab>`.
- * [MDN Reference](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/tabpanel_role)
- */
 declare class UHTMLTabPanelElement extends UHTMLElement {
     static get observedAttributes(): string[];
     constructor();

package/dist/u-tabs.js

@@ -87,23 +87,10 @@ var ATTR_TABS = "data-utabs";
 var UHTMLTabsElement = class extends UHTMLElement {
   constructor() {
     super();
-    attr(this, ATTR_TABS, "");
     attachStyle(this, UHTMLTabsStyle);
   }
   connectedCallback() {
-    mutationObserver(this, {
-      attributeFilter: ["role"],
-      attributes: true,
-      childList: true,
-      subtree: true
-    });
-  }
-  handleEvent() {
-    var _a2;
-    (_a2 = this.tabList) == null ? void 0 : _a2.handleEvent();
-  }
-  disconnectedCallback() {
-    mutationObserver(this, false);
+    attr(this, ATTR_TABS, "");
   }
   get tabList() {
     return queryWithoutNested("tablist", this)[0] || null;
@@ -180,7 +167,7 @@ var UHTMLTabListElement = class extends UHTMLElement {
     setSelected(this.tabs[index]);
   }
 };
-var SKIP_ATTR_CHANGE = false;
+var SKIP_ATTR_CHANGE_TAB = false;
 var UHTMLTabElement = class extends UHTMLElement {
   // Using ES2015 syntax for backwards compatibility
   static get observedAttributes() {
@@ -195,8 +182,8 @@ var UHTMLTabElement = class extends UHTMLElement {
     attr(this, "tabindex", this.selected ? "0" : "-1");
   }
   attributeChangedCallback() {
-    if (!SKIP_ATTR_CHANGE && this.selected && this.tabList) {
-      SKIP_ATTR_CHANGE = true;
+    if (!SKIP_ATTR_CHANGE_TAB && this.selected && this.tabList) {
+      SKIP_ATTR_CHANGE_TAB = true;
       const tabs = this.tabList ? getTabs(this.tabList) : [];
       const panels = queryWithoutNested("tabpanel", this.tabsElement || this);
       const nextPanel = getPanel(this, panels[[...tabs].indexOf(this)]);
@@ -209,7 +196,7 @@ var UHTMLTabElement = class extends UHTMLElement {
         if (panel == null ? void 0 : panel.id) attr(tab, ARIA_CONTROLS, panel.id);
         if (panel) panel.hidden = panel !== nextPanel;
       }
-      SKIP_ATTR_CHANGE = false;
+      SKIP_ATTR_CHANGE_TAB = false;
     }
   }
   get tabsElement() {
@@ -234,24 +221,30 @@ var UHTMLTabElement = class extends UHTMLElement {
     return getPanel(this);
   }
 };
+var SKIP_ATTR_CHANGE_PANEL = false;
 var UHTMLTabPanelElement = class extends UHTMLElement {
   // Using ES2015 syntax for backwards compatibility
   static get observedAttributes() {
-    return ["hidden"];
+    return ["id", "hidden"];
   }
   constructor() {
     super();
     attachStyle(this, UHTMLTabPanelStyle);
   }
   connectedCallback() {
+    var _a2, _b;
     attr(this, "role", "tabpanel");
-    this.hidden = getSelectedIndex(this.tabs) === -1;
+    (_b = (_a2 = this.tabsElement) == null ? void 0 : _a2.tabList) == null ? void 0 : _b.handleEvent();
     this.attributeChangedCallback();
   }
   attributeChangedCallback() {
-    const hidden = this.hidden;
-    attr(this, "aria-hidden", `${hidden}`);
-    attr(this, "tabindex", hidden || isFocusable(this.firstChild) ? null : "0");
+    if (SKIP_ATTR_CHANGE_PANEL) return;
+    SKIP_ATTR_CHANGE_PANEL = true;
+    const hasFocusable = isFocusable(this.firstChild);
+    this.hidden = getSelectedIndex(this.tabs) === -1;
+    attr(this, "aria-hidden", `${this.hidden}`);
+    attr(this, "tabindex", this.hidden || hasFocusable ? null : "0");
+    SKIP_ATTR_CHANGE_PANEL = false;
   }
   get tabsElement() {
     return getTabsElement(this);

package/dist/u-tabs.manifest.json

@@ -50,10 +50,6 @@
      "description": "The `<u-tabs>` HTML element is used to group a `<u-tablist>` and several `<u-tabpanel>` elements.\nNo MDN reference available.",
      "name": "UHTMLTabsElement",
      "members": [
-      {
-       "kind": "method",
-       "name": "handleEvent"
-      },
       {
        "kind": "field",
        "name": "tabList",
@@ -202,7 +198,7 @@
     },
     {
      "kind": "class",
-     "description": "The `<u-tabpanel>` HTML element is a container for the resources of layered content associated with a `<u-tab>`.\n[MDN Reference](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/tabpanel_role)",
+     "description": "",
      "name": "UHTMLTabPanelElement",
      "members": [
       {
@@ -223,6 +219,9 @@
       }
      ],
      "attributes": [
+      {
+       "name": "id"
+      },
       {
        "name": "hidden"
       }

package/dist/u-tabs.vscode.json

@@ -22,8 +22,11 @@
     },
     {
       "name": "u-tabpanel",
-      "description": "The `<u-tabpanel>` HTML element is a container for the resources of layered content associated with a `<u-tab>`.\n[MDN Reference](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/tabpanel_role)\n---\n",
-      "attributes": [{ "name": "hidden", "values": [] }],
+      "description": "\n---\n",
+      "attributes": [
+        { "name": "id", "values": [] },
+        { "name": "hidden", "values": [] }
+      ],
       "references": []
     }
   ]

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@u-elements/u-tabs",
-	"version": "0.1.0",
+	"version": "0.1.2",
 	"license": "MIT",
 	"description": "HTML tags, just truly accessible",
 	"homepage": "https://u-elements.github.io/u-elements/",