@proximus/lavender-tabs 1.4.3-alpha.2 → 1.4.3-alpha.3

package/dist/PxTabs.d.ts

@@ -3,6 +3,7 @@ import { Tab } from './Tab.ts';
 import { TabPanel } from './TabPanel.ts';
 export declare class PxTabs extends Tabs {
     constructor();
+    connectedCallback(): void;
 }
 export declare class PxTab extends Tab {
     constructor();

package/dist/index.es.js

@@ -11,7 +11,7 @@ class b extends HTMLElement {
         <px-button-icon id="previous" aria-hidden="true">
           <px-icon name="chevron_left" from="lavender"></px-icon>
         </px-button-icon>
-        <div id="tablist" aria-labelledby="${this._label}">
+        <div id="tablist">
           <slot name="tabs"></slot>
         </div>
         <px-button-icon id="next"  aria-hidden="true">
@@ -22,7 +22,7 @@ class b extends HTMLElement {
         <slot name="tabpanels"></slot>
       </div>
     </div>
-  `, this.attachShadow({ mode: "open" }), this.getAttribute("label") && (this._label = this.getAttribute("label")), this.shadowRoot.innerHTML = this.template(), this.shadowRoot.adoptedStyleSheets = [l], this.internals = (t = this.attachInternals) == null ? void 0 : t.call(this), this.role = "tablist", this.internals && (this.internals.role = "tablist"), this.addEventListener("px-tab-connected", () => {
+  `, this.attachShadow({ mode: "open" }), this.shadowRoot.innerHTML = this.template(), this.shadowRoot.adoptedStyleSheets = [l], this.internals = (t = this.attachInternals) == null ? void 0 : t.call(this), this.addEventListener("px-tab-connected", () => {
       this.tabsConnected++, this.handleNextPreviousDisplay();
     }), window.addEventListener("resize", () => {
       this.handleNextPreviousDisplay();
@@ -51,7 +51,7 @@ class b extends HTMLElement {
   }
   connectedCallback() {
     var t, i, e, n;
-    this.checkNextPreviousButtonsVisibility(), this.addEventListener("click", (s) => {
+    this.shadowRoot.querySelector("#tablist").setAttribute("aria-labelledby", this._label), this.getAttribute("label") && (this.label = this.getAttribute("label")), this.role = "tablist", this.internals && (this.internals.role = "tablist"), this.checkNextPreviousButtonsVisibility(), this.addEventListener("click", (s) => {
       var o;
       if ((o = s.target.localName) != null && o.endsWith("-tab")) {
         this.$activePanel.selected = !1, this.$activeTab.selected = !1;
@@ -146,13 +146,13 @@ class p extends HTMLElement {
     <button type="button"  tabindex="-1" >
       <span><slot></slot></span>
     </button>
-  `, this.attachShadow({ mode: "open" }), this.shadowRoot.innerHTML = this.template(), this.shadowRoot.adoptedStyleSheets = [d], this.internals = (t = this.attachInternals) == null ? void 0 : t.call(this), this.role = "tab", this.internals && (this.internals.role = "tab"), this.ariaSelected = `${this.selected}`;
+  `, this.attachShadow({ mode: "open" }), this.shadowRoot.innerHTML = this.template(), this.shadowRoot.adoptedStyleSheets = [d], this.internals = (t = this.attachInternals) == null ? void 0 : t.call(this);
   }
   static get observedAttributes() {
     return ["selected", "for", "name"];
   }
   connectedCallback() {
-    this.slot = "tabs", this.parentElement.inverted && (this.setAttribute("inverted", ""), this.$button.setAttribute("inverted", "")), this.dispatchEvent(
+    this.role = "tab", this.internals && (this.internals.role = "tab"), this.ariaSelected = `${this.selected}`, this.slot = "tabs", this.parentElement.inverted && (this.setAttribute("inverted", ""), this.$button.setAttribute("inverted", "")), this.dispatchEvent(
       new CustomEvent("px-tab-connected", { bubbles: !0, composed: !0 })
     );
   }
@@ -190,7 +190,7 @@ class p extends HTMLElement {
 class f extends HTMLElement {
   constructor() {
     super(), this.template = () => `
-    <div role="tabpanel" aria-labelledby="${this.name}" tabindex="0">
+    <div role="tabpanel" tabindex="0">
       <slot></slot>
     </div>
   `, this.attachShadow({ mode: "open" }), this.shadowRoot.innerHTML = this.template(), this.shadowRoot.adoptedStyleSheets = [l];
@@ -202,7 +202,7 @@ class f extends HTMLElement {
     t === "name" && this.$panel.setAttribute("aria-labelledby", e);
   }
   connectedCallback() {
-    this.slot = "tabpanels";
+    this.name && this.$panel.setAttribute("aria-labelledby", this.name), this.slot = "tabpanels";
     const t = this.parentElement.querySelector(
       `[for="${this.getAttribute("name")}"]`
     );
@@ -230,8 +230,12 @@ class f extends HTMLElement {
 }
 class v extends b {
   constructor() {
-    super(), this.querySelectorAll("px-tab").forEach((t) => {
-      t.setAttribute("slot", "tabs");
+    super();
+  }
+  connectedCallback() {
+    var t;
+    (t = super.connectedCallback) == null || t.call(this), this.querySelectorAll("px-tab").forEach((i) => {
+      i.setAttribute("slot", "tabs");
     });
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@proximus/lavender-tabs",
-  "version": "1.4.3-alpha.2",
+  "version": "1.4.3-alpha.3",
   "description": "",
   "main": "dist/index.es.js",
   "types": "dist/index.d.ts",