@proximus/lavender-tabs 1.4.7-alpha.9 → 1.4.7-beta.1

package/dist/Tabs.d.ts

@@ -3,7 +3,6 @@ import { type Tab } from './Tab.ts';
 import { type TabPanel } from './TabPanel.ts';
 export declare class Tabs extends HTMLElement {
     #private;
-    private readonly _label;
     internals: ElementInternals;
     template: () => string;
     static get observedAttributes(): string[];
@@ -24,8 +23,6 @@ export declare class Tabs extends HTMLElement {
     get $tabPanels(): NodeListOf<TabPanel>;
     get $prefixButton(): HTMLButtonElement;
     get $suffixButton(): HTMLButtonElement;
-    get label(): string;
-    set label(value: string);
     get inverted(): boolean;
     get ariaLabelNext(): string;
     get ariaLabelPrevious(): string;

package/dist/index.es.js

@@ -3,11 +3,11 @@ var f = (r) => {
 };
 var A = (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) => (A(r, t, "access private method"), e);
+var l = (r, t, e) => (A(r, t, "access private method"), e);
 import "@proximus/lavender-button-icon";
 const k = "*{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)}}", m = new CSSStyleSheet();
 m.replaceSync(k);
-const g = "px.lavender.tab.selected", $ = "px-tab-connected";
+const g = "px.lavender.tab.selected", y = "px-tab-connected";
 class S extends HTMLElement {
   constructor() {
     var t;
@@ -22,7 +22,7 @@ class S extends HTMLElement {
   }
   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 })
+      new CustomEvent(y, { bubbles: !0, composed: !0 })
     ), this.addEventListener("click", () => {
       this.selected = !0;
     });
@@ -69,15 +69,15 @@ class S extends HTMLElement {
     }), 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:.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))}}', b = new CSSStyleSheet();
-b.replaceSync(L);
-var o, d, y;
-class T extends HTMLElement {
+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:.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))}}', u = new CSSStyleSheet();
+u.replaceSync(T);
+var o, d, $;
+class E extends HTMLElement {
   constructor() {
     var e;
     super();
     x(this, o);
-    this._label = `tabs-${Math.random().toString(36).substring(2, 15)}`, this.template = () => `
+    this.template = () => `
     <div id="container">
       <div id="tab-container">
         <px-button-icon id="previous" aria-hidden="true">
@@ -96,11 +96,10 @@ class T extends HTMLElement {
     </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 = [b], this.internals = (e = this.attachInternals) == null ? void 0 : e.call(this);
+    }, 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 [
-      "label",
       "inverted",
       "aria-label-next",
       "aria-label-previous",
@@ -109,9 +108,6 @@ class T extends HTMLElement {
   }
   attributeChangedCallback(e, s, i) {
     switch (e) {
-      case "label":
-        this.label = i;
-        break;
       case "aria-label-next":
         this.hasAttribute("hide-controls") || this.$suffixButton.setAttribute("aria-label", i || "Next tab");
         break;
@@ -122,16 +118,16 @@ class T extends HTMLElement {
         );
         break;
       case "hide-controls":
-        n(this, o, y).call(this, i);
+        l(this, o, $).call(this, i);
         break;
       case "inverted":
-        n(this, o, d).call(this, i);
+        l(this, o, d).call(this, i);
         break;
     }
   }
   connectedCallback() {
     var e, s;
-    this.$tabList.hasAttribute("aria-labelledby") || this.$tabList.setAttribute("aria-labelledby", this._label), this.role = "tablist", this.internals && (this.internals.role = "tablist"), this.addEventListener(
+    this.role = "tablist", this.internals && (this.internals.role = "tablist"), this.addEventListener(
       g,
       (i) => {
         [...this.$tabPanels].forEach((a) => {
@@ -140,11 +136,11 @@ class T extends HTMLElement {
           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");
+    ), this.addEventListener(y, () => {
+      this.handleNextPreviousDisplay(), this.inverted && l(this, o, d).call(this, this.getAttribute("inverted"));
+    }), this.handleNextPreviousDisplay(), l(this, o, d).call(this, this.getAttribute("inverted")), this.addEventListener("keydown", (i) => {
+      var a, n;
+      (i.key === "ArrowRight" || i.key === "ArrowLeft") && ((n = (a = document.activeElement) == null ? void 0 : a.localName) != null && n.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,
@@ -200,12 +196,6 @@ class T extends HTMLElement {
   get $suffixButton() {
     return this.shadowRoot.querySelector("#next");
   }
-  get label() {
-    return this.$tabList.getAttribute("aria-labelledby");
-  }
-  set label(e) {
-    this.$tabList.setAttribute("aria-labelledby", e);
-  }
   get inverted() {
     return this.hasAttribute("inverted");
   }
@@ -217,13 +207,13 @@ class T extends HTMLElement {
   }
 }
 o = new WeakSet(), d = function(e) {
-  var s, i, a, l, u, 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) => {
+  var s, i, a, n, 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", ""), (n = this.$activeTab) == null || n.setAttribute("inverted", ""), [...this.$tabs].forEach((c) => {
     c.setAttribute("inverted", "");
-  })) : ((u = this.$prefixButton) == null || u.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) => {
+  })) : ((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) {
+}, $ = function(e) {
   e === "" ? (this.$prefixButton.remove(), this.$suffixButton.remove()) : (this.$suffixButton.setAttribute(
     "aria-label",
     this.ariaLabelNext || "Next tab"
@@ -232,13 +222,13 @@ o = new WeakSet(), d = function(e) {
     this.ariaLabelPrevious || "Previous tab"
   ));
 };
-class E extends HTMLElement {
+class L 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 = [b];
+  `, this.attachShadow({ mode: "open" }), this.shadowRoot.innerHTML = this.template(), this.shadowRoot.adoptedStyleSheets = [u];
   }
   static get observedAttributes() {
     return ["name", "selected"];
@@ -265,7 +255,7 @@ class E extends HTMLElement {
     return this.shadowRoot.querySelector('[role="tabpanel"]');
   }
 }
-class w extends T {
+class w extends E {
   constructor() {
     super();
   }
@@ -283,7 +273,7 @@ class B extends S {
   }
 }
 customElements.get("px-tab") || customElements.define("px-tab", B);
-class P extends E {
+class P extends L {
   constructor() {
     super();
   }

package/package.json

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