@u-elements/u-tabs 0.0.4 → 0.0.5

package/dist/u-tabs.cjs

@@ -115,28 +115,27 @@ var UHTMLTabElement = class extends UHTMLElement {
     );
   }
   connectedCallback() {
-    const selected = this.selected || [...queryWithoutNested("u-tab", this.tabList || this)].every(
-      (tab) => tab.ariaSelected !== "true"
-    );
+    const selected = this.selected || ![...queryWithoutNested("u-tab", this.tabList || this)].some(isSelected);
     this.role = "tab";
     this.tabIndex = selected ? 0 : -1;
     this.ariaSelected = `${selected}`;
+    if (!this.hasAttribute(ARIA_CONTROLS))
+      this.setAttribute(ARIA_CONTROLS, useId(getPanel(this)));
   }
   attributeChangedCallback(name, prev) {
     if (!this.selected) return;
     const nextPanel = getPanel(this);
     const nextPanelId = useId(nextPanel);
-    if (this.tabList)
+    if (name === "aria-selected" && this.tabList)
       queryWithoutNested("u-tab", this.tabList).forEach((tab) => {
-        const isUnselect = tab !== this && tab.ariaSelected === "true";
-        const prevPanel = isUnselect && getPanel(tab);
-        if (prevPanel && prevPanel !== nextPanel) prevPanel.hidden = true;
-        if (isUnselect) {
+        if (tab !== this && isSelected(tab)) {
+          getPanel(tab)?.setAttribute("hidden", "");
           tab.ariaSelected = "false";
           tab.tabIndex = -1;
         }
       });
-    if (name === ARIA_CONTROLS) getPanel(this, prev)?.setAttribute("hidden", "");
+    if (name === ARIA_CONTROLS && prev)
+      getPanel(this, prev)?.setAttribute("hidden", "");
     if (this.getAttribute(ARIA_CONTROLS) !== nextPanelId)
       this.setAttribute(ARIA_CONTROLS, nextPanelId);
     this.tabIndex = 0;
@@ -150,7 +149,7 @@ var UHTMLTabElement = class extends UHTMLElement {
     return this.closest("u-tablist");
   }
   get selected() {
-    return this.ariaSelected === "true";
+    return isSelected(this);
   }
   set selected(value) {
     this.ariaSelected = `${!!value}`;
@@ -171,7 +170,7 @@ var UHTMLTabPanelElement = class extends UHTMLElement {
     attachStyle(this, DISPLAY_BLOCK);
   }
   connectedCallback() {
-    this.hidden = [...this.tabs].every((tab) => tab.ariaSelected !== "true");
+    this.hidden = getSelectedIndex(this.tabs) === -1;
     this.role = "tabpanel";
   }
   get tabsElement() {
@@ -187,7 +186,8 @@ var queryWithoutNested = (tag, self) => {
   const css = `${tag}:not(:scope ${self.nodeName}:not(:scope) ${tag})`;
   return self.querySelectorAll(css);
 };
-var getSelectedIndex = (tabs) => [...tabs].findIndex((tab) => tab.ariaSelected === "true");
+var isSelected = (tab) => tab.ariaSelected === "true";
+var getSelectedIndex = (tabs) => [...tabs].findIndex(isSelected);
 var getPanel = (self, id2) => {
   const css = `u-tabpanel[id="${id2 || self.getAttribute(ARIA_CONTROLS)}"]`;
   const tabsElement = self.closest("u-tabs");

package/dist/u-tabs.js

@@ -113,28 +113,27 @@ var UHTMLTabElement = class extends UHTMLElement {
     );
   }
   connectedCallback() {
-    const selected = this.selected || [...queryWithoutNested("u-tab", this.tabList || this)].every(
-      (tab) => tab.ariaSelected !== "true"
-    );
+    const selected = this.selected || ![...queryWithoutNested("u-tab", this.tabList || this)].some(isSelected);
     this.role = "tab";
     this.tabIndex = selected ? 0 : -1;
     this.ariaSelected = `${selected}`;
+    if (!this.hasAttribute(ARIA_CONTROLS))
+      this.setAttribute(ARIA_CONTROLS, useId(getPanel(this)));
   }
   attributeChangedCallback(name, prev) {
     if (!this.selected) return;
     const nextPanel = getPanel(this);
     const nextPanelId = useId(nextPanel);
-    if (this.tabList)
+    if (name === "aria-selected" && this.tabList)
       queryWithoutNested("u-tab", this.tabList).forEach((tab) => {
-        const isUnselect = tab !== this && tab.ariaSelected === "true";
-        const prevPanel = isUnselect && getPanel(tab);
-        if (prevPanel && prevPanel !== nextPanel) prevPanel.hidden = true;
-        if (isUnselect) {
+        if (tab !== this && isSelected(tab)) {
+          getPanel(tab)?.setAttribute("hidden", "");
           tab.ariaSelected = "false";
           tab.tabIndex = -1;
         }
       });
-    if (name === ARIA_CONTROLS) getPanel(this, prev)?.setAttribute("hidden", "");
+    if (name === ARIA_CONTROLS && prev)
+      getPanel(this, prev)?.setAttribute("hidden", "");
     if (this.getAttribute(ARIA_CONTROLS) !== nextPanelId)
       this.setAttribute(ARIA_CONTROLS, nextPanelId);
     this.tabIndex = 0;
@@ -148,7 +147,7 @@ var UHTMLTabElement = class extends UHTMLElement {
     return this.closest("u-tablist");
   }
   get selected() {
-    return this.ariaSelected === "true";
+    return isSelected(this);
   }
   set selected(value) {
     this.ariaSelected = `${!!value}`;
@@ -169,7 +168,7 @@ var UHTMLTabPanelElement = class extends UHTMLElement {
     attachStyle(this, DISPLAY_BLOCK);
   }
   connectedCallback() {
-    this.hidden = [...this.tabs].every((tab) => tab.ariaSelected !== "true");
+    this.hidden = getSelectedIndex(this.tabs) === -1;
     this.role = "tabpanel";
   }
   get tabsElement() {
@@ -185,7 +184,8 @@ var queryWithoutNested = (tag, self) => {
   const css = `${tag}:not(:scope ${self.nodeName}:not(:scope) ${tag})`;
   return self.querySelectorAll(css);
 };
-var getSelectedIndex = (tabs) => [...tabs].findIndex((tab) => tab.ariaSelected === "true");
+var isSelected = (tab) => tab.ariaSelected === "true";
+var getSelectedIndex = (tabs) => [...tabs].findIndex(isSelected);
 var getPanel = (self, id2) => {
   const css = `u-tabpanel[id="${id2 || self.getAttribute(ARIA_CONTROLS)}"]`;
   const tabsElement = self.closest("u-tabs");

package/package.json

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