@proximus/lavender-tabs 2.0.0-alpha.12 → 2.0.0-alpha.121

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/Tab.d.ts

@@ -1,3 +1,5 @@
+export declare const TAB_SELECTED_EVENT = "px.lavender.tab.selected";
+export declare const TAB_CONNECTED_EVENT = "px-tab-connected";
 export declare class Tab extends HTMLElement {
     internals: ElementInternals;
     template: () => string;
@@ -5,13 +7,13 @@ export declare class Tab extends HTMLElement {
     constructor();
     connectedCallback(): void;
     attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
-    get $button(): HTMLButtonElement;
+    get $tabBtn(): HTMLSpanElement;
     get selected(): boolean;
     set selected(value: boolean);
     get inverted(): boolean;
-    set name(value: string);
-    get name(): string;
-    set for(value: string);
-    get for(): string;
+    set id(value: string);
+    get id(): string;
+    set target(value: string);
+    get target(): string;
     handleSelected(value: string): void;
 }

package/dist/TabPanel.d.ts

@@ -4,8 +4,9 @@ export declare class TabPanel extends HTMLElement {
     constructor();
     attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
     connectedCallback(): void;
-    get name(): string;
-    set name(value: string);
+    get panelId(): string;
+    set panelId(value: string);
     set selected(value: boolean);
+    get selected(): boolean;
     get $panel(): HTMLElement;
 }

package/dist/Tabs.d.ts

@@ -1,19 +1,17 @@
 import '@proximus/lavender-button-icon';
-import { Tab } from './Tab.ts';
-import { TabPanel } from './TabPanel.ts';
+import { type Tab } from './Tab.ts';
+import { type TabPanel } from './TabPanel.ts';
 export declare class Tabs extends HTMLElement {
-    private readonly _label;
+    #private;
     internals: ElementInternals;
-    tabsConnected: number;
     template: () => string;
     static get observedAttributes(): string[];
     constructor();
     attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
     connectedCallback(): void;
-    checkNextPreviousButtonsVisibility(): void;
+    disconnectedCallback(): void;
     navigateToTab(direction: 'left' | 'right'): void;
-    handleNextPreviousDisplay(): void;
-    allTabsConnected(): boolean;
+    handleNextPreviousDisplay: () => void;
     shouldDisplayScrollRightButton(): boolean;
     shouldDisplayScrollLeftButton(): boolean;
     get $activeTab(): Tab;
@@ -21,11 +19,16 @@ export declare class Tabs extends HTMLElement {
     get $previousTab(): Tab;
     get $activePanel(): TabPanel;
     get $tabList(): HTMLElement;
+    get $tabs(): NodeListOf<Tab>;
+    get $tabPanels(): NodeListOf<TabPanel>;
     get $prefixButton(): HTMLButtonElement;
     get $suffixButton(): HTMLButtonElement;
-    get label(): string;
-    set label(value: string);
+    get hideControls(): boolean;
+    set hideControls(value: boolean);
     get inverted(): boolean;
-    get ariaLabelNext(): string;
-    get ariaLabelPrevious(): string;
+    set inverted(value: boolean);
+    get nextAriaLabel(): string;
+    set nextAriaLabel(value: string);
+    get previousAriaLabel(): string;
+    set previousAriaLabel(value: string);
 }

package/dist/index.es.js

@@ -1,20 +1,90 @@
+var f = (r) => {
+  throw TypeError(r);
+};
+var S = (r, e, t) => e.has(r) || f("Cannot " + t);
+var x = (r, e, t) => e.has(r) ? f("Cannot add the same private member more than once") : e instanceof WeakSet ? e.add(r) : e.set(r, t);
+var n = (r, e, t) => (S(r, e, "access private method"), t);
 import "@proximus/lavender-button-icon";
-import { isFalsy as c } from "@proximus/lavender-common";
-const b = '*{font-family:var(--px-font-family)}#container{display:flex;flex-direction:column;align-items:flex-start;gap:var(--px-spacing-default-mobile)}#tab-container{position:relative;width:100%}#tab-container>#previous{position:absolute;top:.75em;left:-1.5em}#tab-container>#next{position:absolute;top:.75em;right:-1.5em}#panels{width:100%}#tablist{display:flex;align-items:center;scrollbar-width:none;overflow:scroll;width:100%;box-sizing:border-box;margin:calc(calc(var(--px-focus-outline-mobile) + var(--px-focus-offset-mobile)) * -1);padding:calc(var(--px-focus-outline-mobile) + var(--px-focus-offset-mobile))}#tablist::-webkit-scrollbar{display:none}:host([inverted]) #tablist ::slotted(px-tab){background-color:var(--px-color-background-container-default-inverted)}:host([inverted]) #tablist ::slotted(px-tab[selected=""]){background-color:var(--px-color-background-state-active-inverted)}:host([inverted]) #tablist ::slotted(px-tab[selected=""])>button{color:var(--px-color-text-brand-default)}:host([inverted]) button[role=tab]{color:var(--px-color-text-neutral-inverted)}:host([inverted]) button[aria-selected=""]{color:var(--px-color-text-brand-default)}@media only screen and (min-width: 768px){#container{gap:var(--px-spacing-default-desktop)}#tablist{margin:calc(calc(var(--px-focus-outline-tablet) + var(--px-focus-offset-tablet)) * -1);padding:calc(var(--px-focus-outline-tablet) + var(--px-focus-offset-tablet))}}@media only screen and (min-width: 1025px){#container{gap:var(--px-spacing-default-desktop)}#tablist{margin:calc(calc(var(--px-focus-outline-desktop) + var(--px-focus-offset-desktop)) * -1);padding:calc(var(--px-focus-outline-desktop) + var(--px-focus-offset-desktop))}}', l = new CSSStyleSheet();
-l.replaceSync(b);
-class u extends HTMLElement {
+const k = "*{font-family:var(--px-font-family)}:host{background-color:var(--px-color-background-container-default-default)}:host(:first-child),:host(:first-child) .tab-btn{border-radius:var(--px-radius-main) var(--px-radius-none) var(--px-radius-none) var(--px-radius-main)}:host(:last-of-type),:host(:last-of-type) .tab-btn{border-radius:var(--px-radius-none) var(--px-radius-main) var(--px-radius-main) var(--px-radius-none)}:host([selected]){background-color:var(--px-color-background-state-active-default);border-radius:var(--px-radius-main)!important}:host([selected])>.tab-btn{cursor:auto;padding-block:var(--px-padding-m-mobile);color:var(--px-color-text-neutral-inverted)}.tab-btn{background:none;border:none;margin:0;padding:var(--px-padding-s-mobile);cursor:pointer;height:inherit;width:inherit;font-size:var(--px-text-size-label-l-mobile);font-weight:var(--px-font-weight-title);text-wrap:nowrap;color:var(--px-color-text-neutral-default);outline:none}:host(:focus-visible){outline-offset:var(--px-focus-offset-mobile);outline:var(--px-focus-outline-mobile) solid var(--px-color-border-focus-outline-default)}:host(:not([selected])) .tab-btn:hover{background-color:var(--px-color-background-state-hover-default)}:host([inverted]) .tab-btn{color:var(--px-color-text-neutral-inverted)}:host([inverted]:not([selected])) .tab-btn:hover{background-color:var(--px-color-background-state-hover-inverted)}:host([inverted][selected]) .tab-btn{color:var(--px-color-text-brand-default)}:host([inverted]:focus-visible){outline-color:var(--px-color-border-focus-outline-inverted)}@media screen and (min-width: 48rem){.tab-btn{padding:var(--px-padding-s-desktop);font-size:var(--px-text-size-label-l-desktop)}:host[selected]>.tab-btn{padding-block:var(--px-padding-m-desktop)}}@media screen and (min-width: 64.0625rem){.tab-btn{padding:var(--px-padding-s-desktop);font-size:var(--px-text-size-label-l-desktop)}:host[selected]>.tab-btn{padding-block:var(--px-padding-m-desktop)}}", g = new CSSStyleSheet();
+g.replaceSync(k);
+const m = "px.lavender.tab.selected", A = "px-tab-connected";
+class L extends HTMLElement {
+  constructor() {
+    var e;
+    super(), this.template = () => `
+      <div class="tab-btn"><slot></slot></div>
+  `, this.attachShadow({ mode: "open" }), this.shadowRoot.innerHTML = this.template(), this.shadowRoot.adoptedStyleSheets = [g], this.internals = (e = this.attachInternals) == null ? void 0 : e.call(this);
+  }
+  static get observedAttributes() {
+    return ["selected", "target", "id", "inverted"];
+  }
+  connectedCallback() {
+    this.role = "tab", this.internals && (this.internals.role = "tab"), this.ariaSelected = `${this.selected}`, this.slot = "tabs", this.dispatchEvent(
+      new CustomEvent(A, { bubbles: !0, composed: !0 })
+    ), this.addEventListener("click", () => {
+      this.selected = !0;
+    });
+  }
+  attributeChangedCallback(e, t, s) {
+    e === "selected" ? this.handleSelected(s) : e === "id" ? this.$tabBtn.setAttribute("id", s) : e === "target" ? this.setAttribute("aria-controls", s) : e === "inverted" && (s === "" ? this.$tabBtn.setAttribute("inverted", "") : this.$tabBtn.removeAttribute("inverted"));
+  }
+  get $tabBtn() {
+    return this.shadowRoot.querySelector(".tab-btn");
+  }
+  get selected() {
+    return this.hasAttribute("selected");
+  }
+  set selected(e) {
+    e ? this.setAttribute("selected", "") : this.removeAttribute("selected");
+  }
+  get inverted() {
+    return this.hasAttribute("inverted");
+  }
+  set id(e) {
+    this.setAttribute("id", e);
+  }
+  get id() {
+    return this.getAttribute("id");
+  }
+  set target(e) {
+    this.setAttribute("target", e);
+  }
+  get target() {
+    return this.getAttribute("target");
+  }
+  handleSelected(e) {
+    e !== "" ? (this.tabIndex = -1, this.internals && (this.internals.ariaSelected = "false"), this.ariaSelected = "false") : (setTimeout(() => {
+      this.dispatchEvent(
+        new CustomEvent(m, {
+          bubbles: !0,
+          composed: !0,
+          detail: {
+            tabId: this.id,
+            targetId: this.target
+          }
+        })
+      );
+    }), this.focus(), this.tabIndex = 0, this.internals && (this.internals.ariaSelected = "true"), this.ariaSelected = "true");
+  }
+}
+const T = '*{font-family:var(--px-font-family)}#container{display:flex;flex-direction:column;align-items:flex-start;gap:var(--px-spacing-default-mobile)}#tab-container{position:relative;width:100%}#tab-container>#previous{position:absolute;top:12px;left:-24px}#tab-container>#next{position:absolute;top:12px;right:-24px}#panels{width:100%}#tablist{display:flex;align-items:center;scrollbar-width:none;overflow:scroll;width:100%;box-sizing:border-box;margin:calc(calc(var(--px-focus-outline-mobile) + var(--px-focus-offset-mobile)) * -1);padding:calc(var(--px-focus-outline-mobile) + var(--px-focus-offset-mobile))}#tablist::-webkit-scrollbar{display:none}:host([inverted]) #tablist ::slotted(px-tab){background-color:var(--px-color-background-container-default-inverted)}:host([inverted]) #tablist ::slotted(px-tab[selected=""]){background-color:var(--px-color-background-state-active-inverted)}:host([inverted]) #tablist ::slotted(px-tab[selected=""])>button{color:var(--px-color-text-brand-default)}:host([inverted]) button[role=tab]{color:var(--px-color-text-neutral-inverted)}:host([inverted]) button[aria-selected=""]{color:var(--px-color-text-brand-default)}@media screen and (min-width: 48rem){#container{gap:var(--px-spacing-default-desktop)}#tablist{margin:calc(calc(var(--px-focus-outline-tablet) + var(--px-focus-offset-tablet)) * -1);padding:calc(var(--px-focus-outline-tablet) + var(--px-focus-offset-tablet))}}@media screen and (min-width: 64.0625rem){#container{gap:var(--px-spacing-default-desktop)}#tablist{margin:calc(calc(var(--px-focus-outline-desktop) + var(--px-focus-offset-desktop)) * -1);padding:calc(var(--px-focus-outline-desktop) + var(--px-focus-offset-desktop))}}', b = new CSSStyleSheet();
+b.replaceSync(T);
+var o, d, $;
+class E extends HTMLElement {
   constructor() {
     var t;
-    super(), this._label = `tabs-${Math.random().toString(36).substring(2, 15)}`, this.tabsConnected = 0, this.template = () => `
+    super();
+    x(this, o);
+    this.template = () => `
     <div id="container">
       <div id="tab-container">
-        <px-button-icon id="previous" aria-hidden="true">
+        <px-button-icon id="previous">
           <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">
+        <px-button-icon id="next" >
           <px-icon name="chevron_right" from="lavender"></px-icon>
         </px-button-icon>
       </div>
@@ -22,78 +92,71 @@ class u 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.tabsConnected++, this.handleNextPreviousDisplay();
-    }), window.addEventListener("resize", () => {
-      this.handleNextPreviousDisplay();
-    }), this.$tabList.addEventListener("scroll", () => {
-      this.handleNextPreviousDisplay();
-    });
+  `, this.handleNextPreviousDisplay = () => {
+      this.$prefixButton && this.$suffixButton && (this.$prefixButton.style.display = this.shouldDisplayScrollLeftButton() ? "" : "none", this.$suffixButton.style.display = this.shouldDisplayScrollRightButton() ? "" : "none");
+    }, this.attachShadow({ mode: "open" }), this.shadowRoot.innerHTML = this.template(), this.shadowRoot.adoptedStyleSheets = [b], this.internals = (t = this.attachInternals) == null ? void 0 : t.call(this);
   }
   static get observedAttributes() {
-    return ["label", "inverted", "aria-label-next", "aria-label-previous"];
-  }
-  attributeChangedCallback(t, i, e) {
+    return [
+      "inverted",
+      "next-aria-label",
+      "previous-aria-label",
+      "hide-controls"
+    ];
+  }
+  attributeChangedCallback(t, s, i) {
     switch (t) {
-      case "label":
-        this.label = e;
+      case "next-aria-label":
+        this.hasAttribute("hide-controls") || this.$suffixButton.setAttribute("aria-label", i);
         break;
-      case "aria-label-next":
-        this.hasAttribute("hide-controls") || this.$suffixButton.setAttribute("aria-label", e || "Next tab");
+      case "previous-aria-label":
+        this.hasAttribute("hide-controls") || this.$prefixButton.setAttribute("aria-label", i);
         break;
-      case "aria-label-previous":
-        this.hasAttribute("hide-controls") || this.$prefixButton.setAttribute(
-          "aria-label",
-          e || "Previous tab"
-        );
+      case "hide-controls":
+        n(this, o, $).call(this, i);
+        break;
+      case "inverted":
+        n(this, o, d).call(this, i);
         break;
     }
   }
   connectedCallback() {
-    var t, i, e, n;
-    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;
-        const r = s.target;
-        r && (r.selected = !0), this.$activePanel ? this.$activePanel.selected = !0 : console.error("No panel found for this tab");
+    var t, s;
+    this.$tabList.role = "tablist", this.addEventListener(
+      m,
+      (i) => {
+        [...this.$tabPanels].forEach((a) => {
+          a.getAttribute("panel-id") !== i.detail.targetId && a.hasAttribute("selected") && (a.removeAttribute("selected"), a.removeAttribute("aria-labelledby")), a.getAttribute("panel-id") === i.detail.targetId && (a.setAttribute("selected", ""), a.setAttribute("aria-labelledby", i.detail.tabId));
+        }), [...this.$tabs].forEach((a) => {
+          a.getAttribute("id") !== i.detail.tabId && a.hasAttribute("selected") && a.removeAttribute("selected");
+        });
       }
-    }), this.addEventListener("keydown", (s) => {
-      var o, r;
-      (s.key === "ArrowRight" || s.key === "ArrowLeft") && ((r = (o = document.activeElement) == null ? void 0 : o.localName) != null && r.endsWith("-tab")) && this.navigateToTab(s.key === "ArrowRight" ? "right" : "left");
-    }), (t = this.$prefixButton) == null || t.addEventListener("click", (s) => {
-      s.stopPropagation(), this.$tabList.scrollTo({
+    ), this.addEventListener(A, () => {
+      this.handleNextPreviousDisplay(), this.inverted && n(this, o, d).call(this, this.getAttribute("inverted"));
+    }), this.handleNextPreviousDisplay(), n(this, o, d).call(this, this.getAttribute("inverted")), this.addEventListener("keydown", (i) => {
+      var a, l;
+      (i.key === "ArrowRight" || i.key === "ArrowLeft") && ((l = (a = document.activeElement) == null ? void 0 : a.localName) != null && l.endsWith("-tab")) && this.navigateToTab(i.key === "ArrowRight" ? "right" : "left");
+    }), (t = this.$prefixButton) == null || t.addEventListener("click", (i) => {
+      i.stopPropagation(), this.$tabList.scrollTo({
         left: this.$tabList.scrollLeft - 100,
         behavior: "smooth"
       });
-    }), (i = this.$suffixButton) == null || i.addEventListener("click", (s) => {
-      s.stopPropagation(), this.$tabList.scrollTo({
+    }), (s = this.$suffixButton) == null || s.addEventListener("click", (i) => {
+      i.stopPropagation(), this.$tabList.scrollTo({
         left: this.$tabList.scrollLeft + 100,
         behavior: "smooth"
       });
-    }), this.inverted && ((e = this.$prefixButton) == null || e.setAttribute("inverted", ""), (n = this.$suffixButton) == null || n.setAttribute("inverted", "")), this.hasAttribute("hide-controls") || (this.$suffixButton.setAttribute(
-      "aria-label",
-      this.ariaLabelNext || "Next tab"
-    ), this.$prefixButton.setAttribute(
-      "aria-label",
-      this.ariaLabelPrevious || "Previous tab"
-    ));
+    }), window.addEventListener("resize", this.handleNextPreviousDisplay), this.$tabList.addEventListener("scroll", this.handleNextPreviousDisplay);
   }
-  checkNextPreviousButtonsVisibility() {
-    (this.getAttribute("hide-controls") === "" || this.getAttribute("hide-controls") === "true") && (this.$prefixButton.remove(), this.$suffixButton.remove());
+  disconnectedCallback() {
+    window.addEventListener("resize", this.handleNextPreviousDisplay);
   }
   navigateToTab(t) {
-    const i = this.$nextTab, e = this.$previousTab;
-    this.$activePanel.selected = !1, this.$activeTab.selected = !1, t === "right" ? (i.selected = !0, i.focus()) : t === "left" && (e.selected = !0, e.focus()), this.$activePanel.selected = !0;
-  }
-  handleNextPreviousDisplay() {
-    this.allTabsConnected() && this.$prefixButton && this.$suffixButton && (this.$prefixButton.style.display = this.shouldDisplayScrollLeftButton() ? "" : "none", this.$suffixButton.style.display = this.shouldDisplayScrollRightButton() ? "" : "none");
-  }
-  allTabsConnected() {
-    return this.tabsConnected === this.querySelectorAll('[slot="tabs"]').length;
+    const s = this.$nextTab, i = this.$previousTab;
+    this.$activePanel.selected = !1, this.$activeTab.selected = !1, t === "right" ? (s.selected = !0, s.focus()) : t === "left" && (i.selected = !0, i.focus()), this.$activePanel.selected = !0;
   }
   shouldDisplayScrollRightButton() {
-    return this.allTabsConnected() && this.$tabList.scrollWidth > this.$tabList.clientWidth && this.$tabList.scrollWidth - this.$tabList.scrollLeft !== this.$tabList.clientWidth;
+    return this.$tabList.scrollWidth > this.$tabList.clientWidth && this.$tabList.scrollWidth - this.$tabList.scrollLeft !== this.$tabList.clientWidth;
   }
   shouldDisplayScrollLeftButton() {
     return this.$tabList.scrollLeft > 0;
@@ -110,146 +173,128 @@ class u extends HTMLElement {
     return t || Array.from(this.querySelectorAll('[slot="tabs"]')).pop();
   }
   get $activePanel() {
-    return this.querySelector(`[name="${this.$activeTab.for}"]`);
+    var t;
+    return this.querySelector(
+      `[panel-id="${(t = this.$activeTab) == null ? void 0 : t.target}"]`
+    );
   }
   get $tabList() {
     return this.shadowRoot.querySelector("#tablist");
   }
+  get $tabs() {
+    return this.querySelectorAll('[slot="tabs"]');
+  }
+  get $tabPanels() {
+    return this.querySelectorAll('[slot="tabpanels"]');
+  }
   get $prefixButton() {
     return this.shadowRoot.querySelector("#previous");
   }
   get $suffixButton() {
     return this.shadowRoot.querySelector("#next");
   }
-  get label() {
-    return this.$tabList.getAttribute("aria-labelledby");
-  }
-  set label(t) {
-    this.$tabList.setAttribute("aria-labelledby", t);
-  }
-  get inverted() {
-    return this.hasAttribute("inverted");
-  }
-  get ariaLabelNext() {
-    return this.getAttribute("aria-label-next");
-  }
-  get ariaLabelPrevious() {
-    return this.getAttribute("aria-label-previous");
-  }
-}
-const h = "*{font-family:var(--px-font-family)}:host{background-color:var(--px-color-background-container-default-default)}:host(:first-child),:host(:first-child) button{border-radius:var(--px-radius-main) var(--px-radius-none) var(--px-radius-none) var(--px-radius-main)}:host(:last-of-type),:host(:last-of-type) button{border-radius:var(--px-radius-none) var(--px-radius-main) var(--px-radius-main) var(--px-radius-none)}:host([selected]){background-color:var(--px-color-background-state-active-default);border-radius:var(--px-radius-main)!important}:host([selected])>button{cursor:auto;padding-block:var(--px-padding-m-mobile);color:var(--px-color-text-neutral-inverted)}button{background:none;border:none;margin:0;padding:var(--px-padding-s-mobile);cursor:pointer;height:inherit;width:inherit;font-size:var(--px-text-size-label-l-mobile);font-weight:var(--px-font-weight-title);text-wrap:nowrap;color:var(--px-color-text-neutral-default);outline:none}:host(:focus-visible){outline-offset:var(--px-focus-offset-mobile);outline:var(--px-focus-outline-mobile) solid var(--px-color-border-focus-outline-default)}:host(:not([selected])) button:hover{background-color:var(--px-color-background-state-hover-default)}:host([inverted]) button{color:var(--px-color-text-neutral-inverted)}:host([inverted]:not([selected])) button:hover{background-color:var(--px-color-background-state-hover-inverted)}:host([inverted][selected]) button{color:var(--px-color-text-brand-default)}:host([inverted]:focus-visible){outline-color:var(--px-color-border-focus-outline-inverted)}@media only screen and (min-width: 768px){button{padding:var(--px-padding-s-desktop);font-size:var(--px-text-size-label-l-desktop)}:host[selected]>button{padding-block:var(--px-padding-m-desktop)}}@media only screen and (min-width: 1025px){button{padding:var(--px-padding-s-desktop);font-size:var(--px-text-size-label-l-desktop)}:host[selected]>button{padding-block:var(--px-padding-m-desktop)}}", d = new CSSStyleSheet();
-d.replaceSync(h);
-class p extends HTMLElement {
-  constructor() {
-    var t;
-    super(), this.template = () => `
-    <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}`;
-  }
-  static get observedAttributes() {
-    return ["selected", "for", "name"];
-  }
-  connectedCallback() {
-    this.name || console.error("Tab needs a name attribute"), this.for || console.error("Tab needs a for attribute"), this.slot = "tabs", this.parentElement.inverted && (this.setAttribute("inverted", ""), this.$button.setAttribute("inverted", "")), this.dispatchEvent(
-      new CustomEvent("px-tab-connected", { bubbles: !0, composed: !0 })
-    );
-  }
-  attributeChangedCallback(t, i, e) {
-    t === "selected" ? this.handleSelected(e) : t === "name" ? this.$button.setAttribute("id", e) : t === "for" && this.setAttribute("aria-controls", e);
+  get hideControls() {
+    return this.hasAttribute("hide-controls");
   }
-  get $button() {
-    return this.shadowRoot.querySelector("button");
-  }
-  get selected() {
-    return !!this.hasAttribute("selected");
-  }
-  set selected(t) {
-    t ? this.setAttribute("selected", "") : this.removeAttribute("selected");
+  set hideControls(t) {
+    t ? this.setAttribute("hide-controls", "") : this.removeAttribute("hide-controls");
   }
   get inverted() {
     return this.hasAttribute("inverted");
   }
-  set name(t) {
-    this.setAttribute("name", t);
+  set inverted(t) {
+    t ? this.setAttribute("inverted", "") : this.removeAttribute("inverted");
   }
-  get name() {
-    return this.getAttribute("name");
+  get nextAriaLabel() {
+    return this.getAttribute("next-aria-label");
   }
-  set for(t) {
-    this.setAttribute("for", t);
+  set nextAriaLabel(t) {
+    this.setAttribute("next-aria-label", t);
   }
-  get for() {
-    return this.getAttribute("for");
+  get previousAriaLabel() {
+    return this.getAttribute("previous-aria-label");
   }
-  handleSelected(t) {
-    t === null ? (this.tabIndex = -1, this.internals && (this.internals.ariaSelected = "false"), this.ariaSelected = "false") : (this.focus(), this.tabIndex = 0, this.internals && (this.internals.ariaSelected = "true"), this.ariaSelected = "true");
+  set previousAriaLabel(t) {
+    this.setAttribute("previous-aria-label", t);
   }
 }
-class f extends HTMLElement {
+o = new WeakSet(), d = function(t) {
+  var s, i, a, l, h, u, p, v;
+  t === "" ? ((s = this.$prefixButton) == null || s.setAttribute("inverted", ""), (i = this.$suffixButton) == null || i.setAttribute("inverted", ""), (a = this.$activePanel) == null || a.setAttribute("inverted", ""), (l = this.$activeTab) == null || l.setAttribute("inverted", ""), [...this.$tabs].forEach((c) => {
+    c.setAttribute("inverted", "");
+  })) : ((h = this.$prefixButton) == null || h.removeAttribute("inverted"), (u = this.$suffixButton) == null || u.removeAttribute("inverted"), (p = this.$activePanel) == null || p.removeAttribute("inverted"), (v = this.$activeTab) == null || v.removeAttribute("inverted"), [...this.$tabs].forEach((c) => {
+    c.removeAttribute("inverted");
+  }));
+}, $ = function(t) {
+  t === "" ? (this.$prefixButton.remove(), this.$suffixButton.remove()) : (this.$suffixButton.setAttribute(
+    "aria-label",
+    this.nextAriaLabel || "Next tab"
+  ), this.$prefixButton.setAttribute(
+    "aria-label",
+    this.previousAriaLabel || "Previous tab"
+  ));
+};
+const w = ":host [role=tabpanel]{overflow-x:auto}", y = new CSSStyleSheet();
+y.replaceSync(w);
+class B extends HTMLElement {
   constructor() {
     super(), this.template = () => `
-    <div role="tabpanel" aria-labelledby="${this.name}" tabindex="0">
+    <div role="tabpanel" id="${this.panelId}" tabindex="0">
       <slot></slot>
     </div>
-  `, this.attachShadow({ mode: "open" }), this.shadowRoot.innerHTML = this.template(), this.shadowRoot.adoptedStyleSheets = [l];
+  `, this.attachShadow({ mode: "open" }), this.shadowRoot.innerHTML = this.template(), this.shadowRoot.adoptedStyleSheets = [b, y];
   }
   static get observedAttributes() {
-    return ["name"];
+    return ["id", "selected"];
   }
-  attributeChangedCallback(t, i, e) {
-    t === "name" && this.$panel.setAttribute("aria-labelledby", e);
+  attributeChangedCallback(e, t, s) {
+    e === "panel-id" ? this.$panel.setAttribute("id", s) : e === "selected" && (s === "" ? this.$panel.style.display = "block" : this.$panel.style.display = "none");
   }
   connectedCallback() {
-    this.name || console.error("TabPanel needs a name attribute"), this.slot = "tabpanels";
-    const t = this.parentElement.querySelector(
-      `[for="${this.getAttribute("name")}"]`
-    );
-    t ? this.$panel.setAttribute(
-      "aria-labelledby",
-      t.getAttribute("name")
-    ) : console.error("No tab found for this panel");
-    const i = this.parentElement.querySelector(
-      `[for="${this.name}"]`
-    );
-    c(i.selected) ? this.selected = !1 : this.selected = !0;
+    this.slot = "tabpanels", this.$panel.style.display = "none";
   }
-  get name() {
-    return this.getAttribute("name");
+  get panelId() {
+    return this.getAttribute("panel-id");
   }
-  set name(t) {
-    this.setAttribute("name", t);
+  set panelId(e) {
+    this.setAttribute("panel-id", e);
   }
-  set selected(t) {
-    t ? this.$panel.style.display = "block" : this.$panel.style.display = "none";
+  set selected(e) {
+    e ? this.setAttribute("selected", "") : this.removeAttribute("selected");
+  }
+  get selected() {
+    return this.hasAttribute("selected");
   }
   get $panel() {
     return this.shadowRoot.querySelector('[role="tabpanel"]');
   }
 }
-class v extends u {
+class C extends E {
   constructor() {
-    super(), this.querySelectorAll("px-tab").forEach((t) => {
+    super();
+  }
+  connectedCallback() {
+    var e;
+    (e = super.connectedCallback) == null || e.call(this), this.querySelectorAll("px-tab").forEach((t) => {
       t.setAttribute("slot", "tabs");
     });
   }
 }
-customElements.get("px-tabs") || customElements.define("px-tabs", v);
-class x extends p {
+customElements.get("px-tabs") || customElements.define("px-tabs", C);
+class P extends L {
   constructor() {
     super();
   }
 }
-customElements.get("px-tab") || customElements.define("px-tab", x);
-class m extends f {
+customElements.get("px-tab") || customElements.define("px-tab", P);
+class R extends B {
   constructor() {
     super();
   }
 }
-customElements.get("px-tab-panel") || customElements.define("px-tab-panel", m);
+customElements.get("px-tab-panel") || customElements.define("px-tab-panel", R);
 export {
-  x as PxTab,
-  m as PxTabPanel,
-  v as PxTabs
+  P as PxTab,
+  R as PxTabPanel,
+  C as PxTabs
 };

package/package.json

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