@proximus/lavender-tabs 1.4.14-beta.3 → 1.4.14

package/dist/Tab.d.ts

@@ -1,9 +1,5 @@
 export declare const TAB_SELECTED_EVENT = "px.lavender.tab.selected";
 export declare const TAB_CONNECTED_EVENT = "px-tab-connected";
-export type TabSelectedDetail = {
-    tabName: string | null;
-    forName: string | null;
-};
 export declare class Tab extends HTMLElement {
     internals: ElementInternals;
     template: () => string;
@@ -15,9 +11,9 @@ export declare class Tab extends HTMLElement {
     get selected(): boolean;
     set selected(value: boolean);
     get inverted(): boolean;
-    set name(value: string | null);
-    get name(): string | null;
-    set for(value: string | null);
-    get for(): string | null;
+    set name(value: string);
+    get name(): string;
+    set for(value: string);
+    get for(): string;
     handleSelected(value: string): void;
 }

package/dist/TabPanel.d.ts

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

package/dist/Tabs.d.ts

@@ -1,12 +1,9 @@
 import '@proximus/lavender-button-icon';
 import { type Tab } from './Tab.ts';
 import { type TabPanel } from './TabPanel.ts';
-import type { TabsEventMap } from './events.ts';
 export declare class Tabs extends HTMLElement {
     #private;
     internals: ElementInternals;
-    /** Narrows listener types for the Tabs specific custom events. */
-    addEventListener: <K extends keyof TabsEventMap>(type: K, listener: (ev: TabsEventMap[K]) => unknown, options?: boolean | AddEventListenerOptions) => void;
     template: () => string;
     static get observedAttributes(): string[];
     constructor();
@@ -27,6 +24,6 @@ export declare class Tabs extends HTMLElement {
     get $prefixButton(): HTMLButtonElement;
     get $suffixButton(): HTMLButtonElement;
     get inverted(): boolean;
-    get ariaLabelNext(): string | null;
-    get ariaLabelPrevious(): string | null;
+    get ariaLabelNext(): string;
+    get ariaLabelPrevious(): string;
 }

package/dist/index.es.js

@@ -1,234 +1,288 @@
-import "@proximus/lavender-button-icon";
-import { booleanPropertyToAttributeSetter as e, propertyToAttributeSetter as t } from "@proximus/lavender-common";
-//#region src/tab.css?inline
-var n = "*{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{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);background:0 0;border:none;outline:none;margin:0}: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]){background-color:var(--px-color-background-container-default-inverted)}: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]){background-color:var(--px-color-background-state-active-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 screen and (width>=48rem){button{padding:var(--px-padding-s-tablet);font-size:var(--px-text-size-label-l-tablet)}:host[selected]>button{padding-block:var(--px-padding-m-tablet)}}@media screen and (width>=64.0625rem){button{padding:var(--px-padding-s-laptop);font-size:var(--px-text-size-label-l-laptop);padding:var(--px-padding-s-laptop);font-size:var(--px-text-size-label-l-laptop)}:host[selected]>button{padding-block:var(--px-padding-m-laptop)}}", r = new CSSStyleSheet();
-r.replaceSync(n);
-var i = "px.lavender.tab.selected", a = "px-tab-connected", o = class extends HTMLElement {
-	static get observedAttributes() {
-		return [
-			"selected",
-			"for",
-			"name",
-			"inverted"
-		];
-	}
-	constructor() {
-		super(), this.template = () => "\n    <button type=\"button\"  tabindex=\"-1\" >\n      <span><slot></slot></span>\n    </button>\n  ", this.attachShadow({ mode: "open" }), this.shadowRoot.innerHTML = this.template(), this.shadowRoot.adoptedStyleSheets = [r], this.internals = this.attachInternals?.();
-	}
-	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, n) {
-		e === "selected" ? this.handleSelected(n) : e === "name" ? this.$button.setAttribute("id", n) : e === "for" ? this.setAttribute("aria-controls", n) : e === "inverted" && (n === "" ? this.$button.setAttribute("inverted", "") : this.$button.removeAttribute("inverted"));
-	}
-	get $button() {
-		return this.shadowRoot.querySelector("button");
-	}
-	get selected() {
-		return this.hasAttribute("selected");
-	}
-	set selected(t) {
-		e(this, "selected", t);
-	}
-	get inverted() {
-		return this.hasAttribute("inverted");
-	}
-	set name(e) {
-		t(this, "name", e);
-	}
-	get name() {
-		return this.getAttribute("name");
-	}
-	set for(e) {
-		t(this, "for", e);
-	}
-	get for() {
-		return this.getAttribute("for");
-	}
-	handleSelected(e) {
-		e === "" ? (setTimeout(() => {
-			this.dispatchEvent(new CustomEvent(i, {
-				bubbles: !0,
-				composed: !0,
-				detail: {
-					tabName: this.name,
-					forName: this.for
-				}
-			}));
-		}), this.focus(), this.tabIndex = 0, this.internals && (this.internals.ariaSelected = "true"), this.ariaSelected = "true") : (this.tabIndex = -1, this.internals && (this.internals.ariaSelected = "false"), this.ariaSelected = "false");
-	}
-}, s = "*{font-family:var(--px-font-family)}#container{align-items:flex-start;gap:var(--px-spacing-default-mobile);flex-direction:column;display:flex}#tab-container{width:100%;position:relative}#tab-container>#previous{position:absolute;top:12px;left:-24px}#tab-container>#next{position:absolute;top:12px;right:-24px}#panels{width:100%}#tablist{scrollbar-width:none;box-sizing:border-box;width:100%;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));align-items:center;display:flex;overflow:scroll}#tablist::-webkit-scrollbar{display:none}: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 (width>=48rem){#container{gap:var(--px-spacing-default-tablet)}#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 (width>=64.0625rem){#container{gap:var(--px-spacing-default-laptop)}#tablist{margin:calc(calc(var(--px-focus-outline-laptop) + var(--px-focus-offset-laptop)) * -1);padding:calc(var(--px-focus-outline-laptop) + var(--px-focus-offset-laptop))}}", c = new CSSStyleSheet();
-c.replaceSync(s);
-//#endregion
-//#region src/Tabs.ts
-var l = class extends HTMLElement {
-	static get observedAttributes() {
-		return [
-			"inverted",
-			"aria-label-next",
-			"aria-label-previous",
-			"hide-controls"
-		];
-	}
-	constructor() {
-		super(), this.template = () => "\n    <div id=\"container\">\n      <div id=\"tab-container\">\n        <px-button-icon id=\"previous\" aria-hidden=\"true\" hidden--mobile hidden--tablet>\n          <px-icon name=\"chevron_left\" from=\"lavender\"></px-icon>\n        </px-button-icon>\n        <div id=\"tablist\">\n          <slot name=\"tabs\"></slot>\n        </div>\n        <px-button-icon id=\"next\" aria-hidden=\"true\" hidden--mobile hidden--tablet>\n          <px-icon name=\"chevron_right\" from=\"lavender\"></px-icon>\n        </px-button-icon>\n      </div>\n      <div id=\"panels\">\n        <slot name=\"tabpanels\"></slot>\n      </div>\n    </div>\n  ", 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 = [c], this.internals = this.attachInternals?.();
-	}
-	attributeChangedCallback(e, t, n) {
-		switch (e) {
-			case "aria-label-next":
-				this.hasAttribute("hide-controls") || this.$suffixButton.setAttribute("aria-label", n || "Next tab");
-				break;
-			case "aria-label-previous":
-				this.hasAttribute("hide-controls") || this.$prefixButton.setAttribute("aria-label", n || "Previous tab");
-				break;
-			case "hide-controls":
-				this.#t(n);
-				break;
-			case "inverted": this.#e(n);
-		}
-	}
-	connectedCallback() {
-		this.role = "tablist", this.internals && (this.internals.role = "tablist"), this.addEventListener(i, (e) => {
-			[...this.$tabPanels].forEach((t) => {
-				t.getAttribute("name") !== e.detail.forName && t.hasAttribute("selected") && (t.removeAttribute("selected"), t.removeAttribute("aria-labelledby")), t.getAttribute("name") === e.detail.forName && (t.setAttribute("selected", ""), e.detail.tabName && t.setAttribute("aria-labelledby", e.detail.tabName));
-			}), [...this.$tabs].forEach((t) => {
-				t.getAttribute("name") !== e.detail.tabName && t.hasAttribute("selected") && t.removeAttribute("selected");
-			});
-		}), this.addEventListener(a, () => {
-			this.handleNextPreviousDisplay(), this.inverted && this.#e(this.getAttribute("inverted"));
-		}), this.handleNextPreviousDisplay(), this.#e(this.getAttribute("inverted")), this.addEventListener("keydown", (e) => {
-			(e.key === "ArrowRight" || e.key === "ArrowLeft") && document.activeElement?.localName?.endsWith("-tab") && this.navigateToTab(e.key === "ArrowRight" ? "right" : "left");
-		}), this.$prefixButton?.addEventListener("click", (e) => {
-			e.stopPropagation(), this.$tabList.scrollTo({
-				left: this.$tabList.scrollLeft - 100,
-				behavior: "smooth"
-			});
-		}), this.$suffixButton?.addEventListener("click", (e) => {
-			e.stopPropagation(), this.$tabList.scrollTo({
-				left: this.$tabList.scrollLeft + 100,
-				behavior: "smooth"
-			});
-		}), window.addEventListener("resize", this.handleNextPreviousDisplay), this.$tabList.addEventListener("scroll", this.handleNextPreviousDisplay);
-	}
-	disconnectedCallback() {
-		window.addEventListener("resize", this.handleNextPreviousDisplay);
-	}
-	#e(e) {
-		e === "" ? (this.$prefixButton?.setAttribute("inverted", ""), this.$suffixButton?.setAttribute("inverted", ""), this.$activePanel?.setAttribute("inverted", ""), this.$activeTab?.setAttribute("inverted", ""), [...this.$tabs].forEach((e) => {
-			e.setAttribute("inverted", "");
-		})) : (this.$prefixButton?.removeAttribute("inverted"), this.$suffixButton?.removeAttribute("inverted"), this.$activePanel?.removeAttribute("inverted"), this.$activeTab?.removeAttribute("inverted"), [...this.$tabs].forEach((e) => {
-			e.removeAttribute("inverted");
-		}));
-	}
-	#t(e) {
-		e === "" ? (this.$prefixButton.remove(), this.$suffixButton.remove()) : (this.$suffixButton.setAttribute("aria-label", this.ariaLabelNext || "Next tab"), this.$prefixButton.setAttribute("aria-label", this.ariaLabelPrevious || "Previous tab"));
-	}
-	navigateToTab(e) {
-		let t = this.$nextTab, n = this.$previousTab;
-		this.$activePanel.selected = !1, this.$activeTab.selected = !1, e === "right" ? (t.selected = !0, t.focus()) : e === "left" && (n.selected = !0, n.focus()), this.$activePanel.selected = !0;
-	}
-	shouldDisplayScrollRightButton() {
-		return this.$tabList.scrollWidth > this.$tabList.clientWidth && this.$tabList.scrollWidth - this.$tabList.scrollLeft !== this.$tabList.clientWidth;
-	}
-	shouldDisplayScrollLeftButton() {
-		return this.$tabList.scrollLeft > 0;
-	}
-	get $activeTab() {
-		return this.querySelector("[selected=\"\"][slot=\"tabs\"]");
-	}
-	get $nextTab() {
-		let e = this.$activeTab.nextElementSibling;
-		return e?.slot === "tabs" ? e : this.querySelector("[slot=\"tabs\"]");
-	}
-	get $previousTab() {
-		return this.$activeTab.previousElementSibling || Array.from(this.querySelectorAll("[slot=\"tabs\"]")).pop();
-	}
-	get $activePanel() {
-		return this.querySelector(`[name="${this.$activeTab?.for}"]`);
-	}
-	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 inverted() {
-		return this.hasAttribute("inverted");
-	}
-	get ariaLabelNext() {
-		return this.getAttribute("aria-label-next");
-	}
-	get ariaLabelPrevious() {
-		return this.getAttribute("aria-label-previous");
-	}
-}, u = ":host [role=tabpanel]{overflow-x:auto}", d = new CSSStyleSheet();
-d.replaceSync(u);
-var f = class extends HTMLElement {
-	static get observedAttributes() {
-		return ["name", "selected"];
-	}
-	constructor() {
-		super(), this.template = () => "\n    <div role=\"tabpanel\" tabindex=\"0\">\n      <slot></slot>\n    </div>\n  ", this.attachShadow({ mode: "open" }), this.shadowRoot.innerHTML = this.template(), this.shadowRoot.adoptedStyleSheets = [c, d];
-	}
-	attributeChangedCallback(e, t, n) {
-		e === "name" ? this.$panel.setAttribute("aria-labelledby", n) : e === "selected" && (n === "" ? this.$panel.style.display = "block" : this.$panel.style.display = "none");
-	}
-	connectedCallback() {
-		this.slot = "tabpanels", this.$panel.style.display = "none";
-	}
-	get name() {
-		return this.getAttribute("name");
-	}
-	set name(e) {
-		t(this, "name", e);
-	}
-	set selected(t) {
-		e(this, "selected", t);
-	}
-	get selected() {
-		return this.hasAttribute("selected");
-	}
-	get $panel() {
-		return this.shadowRoot.querySelector("[role=\"tabpanel\"]");
-	}
-}, p = class extends l {
-	constructor() {
-		super();
-	}
-	connectedCallback() {
-		super.connectedCallback?.(), this.querySelectorAll("px-tab").forEach((e) => {
-			e.setAttribute("slot", "tabs");
-		});
-	}
+var f = (r) => {
+  throw TypeError(r);
 };
-customElements.get("px-tabs") || customElements.define("px-tabs", p);
-var m = class extends o {
-	constructor() {
-		super();
-	}
+var S = (r, t, e) => t.has(r) || f("Cannot " + e);
+var x = (r, t, e) => t.has(r) ? f("Cannot add the same private member more than once") : t instanceof WeakSet ? t.add(r) : t.set(r, e);
+var n = (r, t, e) => (S(r, t, "access private method"), e);
+import "@proximus/lavender-button-icon";
+const T = "*{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 screen and (min-width: 48rem){button{padding:var(--px-padding-s-tablet);font-size:var(--px-text-size-label-l-tablet)}:host[selected]>button{padding-block:var(--px-padding-m-tablet)}}@media screen and (min-width: 64.0625rem){button{padding:var(--px-padding-s-laptop);font-size:var(--px-text-size-label-l-laptop)}:host[selected]>button{padding-block:var(--px-padding-m-laptop)}}", m = new CSSStyleSheet();
+m.replaceSync(T);
+const g = "px.lavender.tab.selected", $ = "px-tab-connected";
+class E 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 = [m], this.internals = (t = this.attachInternals) == null ? void 0 : t.call(this);
+  }
+  static get observedAttributes() {
+    return ["selected", "for", "name", "inverted"];
+  }
+  connectedCallback() {
+    this.role = "tab", this.internals && (this.internals.role = "tab"), this.ariaSelected = `${this.selected}`, this.slot = "tabs", this.dispatchEvent(
+      new CustomEvent($, { bubbles: !0, composed: !0 })
+    ), this.addEventListener("click", () => {
+      this.selected = !0;
+    });
+  }
+  attributeChangedCallback(t, e, s) {
+    t === "selected" ? this.handleSelected(s) : t === "name" ? this.$button.setAttribute("id", s) : t === "for" ? this.setAttribute("aria-controls", s) : t === "inverted" && (s === "" ? this.$button.setAttribute("inverted", "") : this.$button.removeAttribute("inverted"));
+  }
+  get $button() {
+    return this.shadowRoot.querySelector("button");
+  }
+  get selected() {
+    return this.hasAttribute("selected");
+  }
+  set selected(t) {
+    t ? this.setAttribute("selected", "") : this.removeAttribute("selected");
+  }
+  get inverted() {
+    return this.hasAttribute("inverted");
+  }
+  set name(t) {
+    this.setAttribute("name", t);
+  }
+  get name() {
+    return this.getAttribute("name");
+  }
+  set for(t) {
+    this.setAttribute("for", t);
+  }
+  get for() {
+    return this.getAttribute("for");
+  }
+  handleSelected(t) {
+    t !== "" ? (this.tabIndex = -1, this.internals && (this.internals.ariaSelected = "false"), this.ariaSelected = "false") : (setTimeout(() => {
+      this.dispatchEvent(
+        new CustomEvent(g, {
+          bubbles: !0,
+          composed: !0,
+          detail: {
+            tabName: this.name,
+            forName: this.for
+          }
+        })
+      );
+    }), this.focus(), this.tabIndex = 0, this.internals && (this.internals.ariaSelected = "true"), this.ariaSelected = "true");
+  }
+}
+const L = '*{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-tablet)}#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-laptop)}#tablist{margin:calc(calc(var(--px-focus-outline-laptop) + var(--px-focus-offset-laptop)) * -1);padding:calc(var(--px-focus-outline-laptop) + var(--px-focus-offset-laptop))}}', u = new CSSStyleSheet();
+u.replaceSync(L);
+var o, d, y;
+class k extends HTMLElement {
+  constructor() {
+    var e;
+    super();
+    x(this, o);
+    this.template = () => `
+    <div id="container">
+      <div id="tab-container">
+        <px-button-icon id="previous" aria-hidden="true" hidden--mobile hidden--tablet>
+          <px-icon name="chevron_left" from="lavender"></px-icon>
+        </px-button-icon>
+        <div id="tablist">
+          <slot name="tabs"></slot>
+        </div>
+        <px-button-icon id="next" aria-hidden="true" hidden--mobile hidden--tablet>
+          <px-icon name="chevron_right" from="lavender"></px-icon>
+        </px-button-icon>
+      </div>
+      <div id="panels">
+        <slot name="tabpanels"></slot>
+      </div>
+    </div>
+  `, 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 = [u], this.internals = (e = this.attachInternals) == null ? void 0 : e.call(this);
+  }
+  static get observedAttributes() {
+    return [
+      "inverted",
+      "aria-label-next",
+      "aria-label-previous",
+      "hide-controls"
+    ];
+  }
+  attributeChangedCallback(e, s, i) {
+    switch (e) {
+      case "aria-label-next":
+        this.hasAttribute("hide-controls") || this.$suffixButton.setAttribute("aria-label", i || "Next tab");
+        break;
+      case "aria-label-previous":
+        this.hasAttribute("hide-controls") || this.$prefixButton.setAttribute(
+          "aria-label",
+          i || "Previous tab"
+        );
+        break;
+      case "hide-controls":
+        n(this, o, y).call(this, i);
+        break;
+      case "inverted":
+        n(this, o, d).call(this, i);
+        break;
+    }
+  }
+  connectedCallback() {
+    var e, s;
+    this.role = "tablist", this.internals && (this.internals.role = "tablist"), this.addEventListener(
+      g,
+      (i) => {
+        [...this.$tabPanels].forEach((a) => {
+          a.getAttribute("name") !== i.detail.forName && a.hasAttribute("selected") && (a.removeAttribute("selected"), a.removeAttribute("aria-labelledby")), a.getAttribute("name") === i.detail.forName && (a.setAttribute("selected", ""), a.setAttribute("aria-labelledby", i.detail.tabName));
+        }), [...this.$tabs].forEach((a) => {
+          a.getAttribute("name") !== i.detail.tabName && a.hasAttribute("selected") && a.removeAttribute("selected");
+        });
+      }
+    ), this.addEventListener($, () => {
+      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");
+    }), (e = this.$prefixButton) == null || e.addEventListener("click", (i) => {
+      i.stopPropagation(), this.$tabList.scrollTo({
+        left: this.$tabList.scrollLeft - 100,
+        behavior: "smooth"
+      });
+    }), (s = this.$suffixButton) == null || s.addEventListener("click", (i) => {
+      i.stopPropagation(), this.$tabList.scrollTo({
+        left: this.$tabList.scrollLeft + 100,
+        behavior: "smooth"
+      });
+    }), window.addEventListener("resize", this.handleNextPreviousDisplay), this.$tabList.addEventListener("scroll", this.handleNextPreviousDisplay);
+  }
+  disconnectedCallback() {
+    window.addEventListener("resize", this.handleNextPreviousDisplay);
+  }
+  navigateToTab(e) {
+    const s = this.$nextTab, i = this.$previousTab;
+    this.$activePanel.selected = !1, this.$activeTab.selected = !1, e === "right" ? (s.selected = !0, s.focus()) : e === "left" && (i.selected = !0, i.focus()), this.$activePanel.selected = !0;
+  }
+  shouldDisplayScrollRightButton() {
+    return this.$tabList.scrollWidth > this.$tabList.clientWidth && this.$tabList.scrollWidth - this.$tabList.scrollLeft !== this.$tabList.clientWidth;
+  }
+  shouldDisplayScrollLeftButton() {
+    return this.$tabList.scrollLeft > 0;
+  }
+  get $activeTab() {
+    return this.querySelector('[selected=""][slot="tabs"]');
+  }
+  get $nextTab() {
+    const e = this.$activeTab.nextElementSibling;
+    return e.slot !== "tabs" ? this.querySelector('[slot="tabs"]') : e;
+  }
+  get $previousTab() {
+    const e = this.$activeTab.previousElementSibling;
+    return e || Array.from(this.querySelectorAll('[slot="tabs"]')).pop();
+  }
+  get $activePanel() {
+    var e;
+    return this.querySelector(`[name="${(e = this.$activeTab) == null ? void 0 : e.for}"]`);
+  }
+  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 inverted() {
+    return this.hasAttribute("inverted");
+  }
+  get ariaLabelNext() {
+    return this.getAttribute("aria-label-next");
+  }
+  get ariaLabelPrevious() {
+    return this.getAttribute("aria-label-previous");
+  }
+}
+o = new WeakSet(), d = function(e) {
+  var s, i, a, l, b, h, p, v;
+  e === "" ? ((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", "");
+  })) : ((b = this.$prefixButton) == null || b.removeAttribute("inverted"), (h = this.$suffixButton) == null || h.removeAttribute("inverted"), (p = this.$activePanel) == null || p.removeAttribute("inverted"), (v = this.$activeTab) == null || v.removeAttribute("inverted"), [...this.$tabs].forEach((c) => {
+    c.removeAttribute("inverted");
+  }));
+}, y = function(e) {
+  e === "" ? (this.$prefixButton.remove(), this.$suffixButton.remove()) : (this.$suffixButton.setAttribute(
+    "aria-label",
+    this.ariaLabelNext || "Next tab"
+  ), this.$prefixButton.setAttribute(
+    "aria-label",
+    this.ariaLabelPrevious || "Previous tab"
+  ));
 };
-customElements.get("px-tab") || customElements.define("px-tab", m);
-var h = class extends f {
-	constructor() {
-		super();
-	}
+const w = ":host [role=tabpanel]{overflow-x:auto}", A = new CSSStyleSheet();
+A.replaceSync(w);
+class P extends HTMLElement {
+  constructor() {
+    super(), this.template = () => `
+    <div role="tabpanel" tabindex="0">
+      <slot></slot>
+    </div>
+  `, this.attachShadow({ mode: "open" }), this.shadowRoot.innerHTML = this.template(), this.shadowRoot.adoptedStyleSheets = [u, A];
+  }
+  static get observedAttributes() {
+    return ["name", "selected"];
+  }
+  attributeChangedCallback(t, e, s) {
+    t === "name" ? this.$panel.setAttribute("aria-labelledby", s) : t === "selected" && (s === "" ? this.$panel.style.display = "block" : this.$panel.style.display = "none");
+  }
+  connectedCallback() {
+    this.slot = "tabpanels", this.$panel.style.display = "none";
+  }
+  get name() {
+    return this.getAttribute("name");
+  }
+  set name(t) {
+    this.setAttribute("name", t);
+  }
+  set selected(t) {
+    t ? this.setAttribute("selected", "") : this.removeAttribute("selected");
+  }
+  get selected() {
+    return this.hasAttribute("selected");
+  }
+  get $panel() {
+    return this.shadowRoot.querySelector('[role="tabpanel"]');
+  }
+}
+class B extends k {
+  constructor() {
+    super();
+  }
+  connectedCallback() {
+    var t;
+    (t = super.connectedCallback) == null || t.call(this), this.querySelectorAll("px-tab").forEach((e) => {
+      e.setAttribute("slot", "tabs");
+    });
+  }
+}
+customElements.get("px-tabs") || customElements.define("px-tabs", B);
+class C extends E {
+  constructor() {
+    super();
+  }
+}
+customElements.get("px-tab") || customElements.define("px-tab", C);
+class N extends P {
+  constructor() {
+    super();
+  }
+}
+customElements.get("px-tab-panel") || customElements.define("px-tab-panel", N);
+export {
+  C as PxTab,
+  N as PxTabPanel,
+  B as PxTabs
 };
-customElements.get("px-tab-panel") || customElements.define("px-tab-panel", h);
-//#endregion
-export { m as PxTab, h as PxTabPanel, p as PxTabs };

package/package.json

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

package/dist/events.d.ts

@@ -1,11 +0,0 @@
-import { TAB_CONNECTED_EVENT, TAB_SELECTED_EVENT, type TabSelectedDetail } from './Tab.ts';
-export type { TabSelectedDetail };
-/**
- * Custom events handled by the Tabs, on top of the standard DOM events.
- * Declared locally (instead of augmenting the global `HTMLElementEventMap`)
- * so these event names are only typed on the elements that actually use them.
- */
-export interface TabsEventMap extends HTMLElementEventMap {
-    [TAB_SELECTED_EVENT]: CustomEvent<TabSelectedDetail>;
-    [TAB_CONNECTED_EVENT]: CustomEvent;
-}