@proximus/lavender 1.0.0-alpha.6 → 1.0.0-alpha.7

package/dist/lavender.es.js

@@ -2400,14 +2400,19 @@ class Tabs extends HTMLElement {
 class Tab extends HTMLElement {
   constructor(semanticStyleSheet) {
     super();
-    this.template = (title, selected) => `
-    <button role="tab" aria-selected="${selected}" type="button" tabindex="-1">
-      <span><slot>${title}</slot></span>
+    this.template = () => `
+    <button role="tab" aria-selected="false" type="button" tabindex="-1">
+      <span><slot></slot></span>
     </button>
   `;
     this.attachShadow({ mode: "open" });
-    this.shadowRoot.innerHTML = this.template(this.getAttribute("title"), this.getAttribute("selected"));
+    this.shadowRoot.innerHTML = this.template();
     this.shadowRoot.adoptedStyleSheets = [semanticStyleSheet, styleSheet$4];
+  }
+  static get observedAttributes() {
+    return ["selected", "for", "name"];
+  }
+  connectedCallback() {
     if (!this.name) {
       console.error("Tab needs a name attribute");
     }
@@ -2415,11 +2420,6 @@ class Tab extends HTMLElement {
       console.error("Tab needs a for attribute");
     }
     this.slot = "tabs";
-  }
-  static get observedAttributes() {
-    return ["selected", "for", "name"];
-  }
-  connectedCallback() {
     if (this.parentElement.inverted) {
       this.setAttribute("inverted", "");
       this.$button.setAttribute("inverted", "");
@@ -2480,10 +2480,6 @@ class TabPanel extends HTMLElement {
     this.attachShadow({ mode: "open" });
     this.shadowRoot.innerHTML = this.template();
     this.shadowRoot.adoptedStyleSheets = [semanticStyleSheet, styleSheet$4];
-    if (!this.name) {
-      console.error("TabPanel needs a name attribute");
-    }
-    this.slot = "tabpanels";
   }
   static get observedAttributes() {
     return ["name"];
@@ -2494,13 +2490,24 @@ class TabPanel extends HTMLElement {
     }
   }
   connectedCallback() {
-    const labelledBy = this.parentElement.querySelector(`[for="${this.getAttribute("name")}"]`);
+    if (!this.name) {
+      console.error("TabPanel needs a name attribute");
+    }
+    this.slot = "tabpanels";
+    const labelledBy = this.parentElement.querySelector(
+      `[for="${this.getAttribute("name")}"]`
+    );
     if (labelledBy) {
-      this.$panel.setAttribute("aria-labelledby", labelledBy.getAttribute("name"));
+      this.$panel.setAttribute(
+        "aria-labelledby",
+        labelledBy.getAttribute("name")
+      );
     } else {
       console.error("No tab found for this panel");
     }
-    const selectedTab = this.parentElement.querySelector(`[for="${this.name}"]`);
+    const selectedTab = this.parentElement.querySelector(
+      `[for="${this.name}"]`
+    );
     if (!isFalsy(selectedTab.selected)) {
       this.selected = true;
     } else {