@proximus/lavender-tabs 1.4.6-beta.2 → 1.4.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/dist/Tabs.d.ts +5 -0
  2. package/dist/index.es.js +80 -67
  3. package/package.json +1 -1
package/dist/Tabs.d.ts CHANGED
@@ -3,7 +3,9 @@ import { type Tab } from './Tab.ts';
3
3
  import { type TabPanel } from './TabPanel.ts';
4
4
  export declare class Tabs extends HTMLElement {
5
5
  #private;
6
+ private readonly _label;
6
7
  internals: ElementInternals;
8
+ tabsConnected: number;
7
9
  template: () => string;
8
10
  static get observedAttributes(): string[];
9
11
  constructor();
@@ -12,6 +14,7 @@ export declare class Tabs extends HTMLElement {
12
14
  disconnectedCallback(): void;
13
15
  navigateToTab(direction: 'left' | 'right'): void;
14
16
  handleNextPreviousDisplay: () => void;
17
+ allTabsConnected(): boolean;
15
18
  shouldDisplayScrollRightButton(): boolean;
16
19
  shouldDisplayScrollLeftButton(): boolean;
17
20
  get $activeTab(): Tab;
@@ -23,6 +26,8 @@ export declare class Tabs extends HTMLElement {
23
26
  get $tabPanels(): NodeListOf<TabPanel>;
24
27
  get $prefixButton(): HTMLButtonElement;
25
28
  get $suffixButton(): HTMLButtonElement;
29
+ get label(): string;
30
+ set label(value: string);
26
31
  get inverted(): boolean;
27
32
  get ariaLabelNext(): string;
28
33
  get ariaLabelPrevious(): string;
package/dist/index.es.js CHANGED
@@ -1,21 +1,21 @@
1
1
  var f = (r) => {
2
2
  throw TypeError(r);
3
3
  };
4
- var A = (r, t, e) => t.has(r) || f("Cannot " + e);
5
- 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);
6
- var l = (r, t, e) => (A(r, t, "access private method"), e);
4
+ var $ = (r, e, t) => e.has(r) || f("Cannot " + t);
5
+ 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);
6
+ var n = (r, e, t) => ($(r, e, "access private method"), t);
7
7
  import "@proximus/lavender-button-icon";
8
8
  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();
9
9
  m.replaceSync(k);
10
10
  const g = "px.lavender.tab.selected", y = "px-tab-connected";
11
11
  class S extends HTMLElement {
12
12
  constructor() {
13
- var t;
13
+ var e;
14
14
  super(), this.template = () => `
15
15
  <button type="button" tabindex="-1" >
16
16
  <span><slot></slot></span>
17
17
  </button>
18
- `, this.attachShadow({ mode: "open" }), this.shadowRoot.innerHTML = this.template(), this.shadowRoot.adoptedStyleSheets = [m], this.internals = (t = this.attachInternals) == null ? void 0 : t.call(this);
18
+ `, this.attachShadow({ mode: "open" }), this.shadowRoot.innerHTML = this.template(), this.shadowRoot.adoptedStyleSheets = [m], this.internals = (e = this.attachInternals) == null ? void 0 : e.call(this);
19
19
  }
20
20
  static get observedAttributes() {
21
21
  return ["selected", "for", "name", "inverted"];
@@ -27,8 +27,8 @@ class S extends HTMLElement {
27
27
  this.selected = !0;
28
28
  });
29
29
  }
30
- attributeChangedCallback(t, e, s) {
31
- 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"));
30
+ attributeChangedCallback(e, t, s) {
31
+ e === "selected" ? this.handleSelected(s) : e === "name" ? this.$button.setAttribute("id", s) : e === "for" ? this.setAttribute("aria-controls", s) : e === "inverted" && (s === "" ? this.$button.setAttribute("inverted", "") : this.$button.removeAttribute("inverted"));
32
32
  }
33
33
  get $button() {
34
34
  return this.shadowRoot.querySelector("button");
@@ -36,26 +36,26 @@ class S extends HTMLElement {
36
36
  get selected() {
37
37
  return this.hasAttribute("selected");
38
38
  }
39
- set selected(t) {
40
- t ? this.setAttribute("selected", "") : this.removeAttribute("selected");
39
+ set selected(e) {
40
+ e ? this.setAttribute("selected", "") : this.removeAttribute("selected");
41
41
  }
42
42
  get inverted() {
43
43
  return this.hasAttribute("inverted");
44
44
  }
45
- set name(t) {
46
- this.setAttribute("name", t);
45
+ set name(e) {
46
+ this.setAttribute("name", e);
47
47
  }
48
48
  get name() {
49
49
  return this.getAttribute("name");
50
50
  }
51
- set for(t) {
52
- this.setAttribute("for", t);
51
+ set for(e) {
52
+ this.setAttribute("for", e);
53
53
  }
54
54
  get for() {
55
55
  return this.getAttribute("for");
56
56
  }
57
- handleSelected(t) {
58
- t !== "" ? (this.tabIndex = -1, this.internals && (this.internals.ariaSelected = "false"), this.ariaSelected = "false") : (setTimeout(() => {
57
+ handleSelected(e) {
58
+ e !== "" ? (this.tabIndex = -1, this.internals && (this.internals.ariaSelected = "false"), this.ariaSelected = "false") : (setTimeout(() => {
59
59
  this.dispatchEvent(
60
60
  new CustomEvent(g, {
61
61
  bubbles: !0,
@@ -69,15 +69,15 @@ class S extends HTMLElement {
69
69
  }), this.focus(), this.tabIndex = 0, this.internals && (this.internals.ariaSelected = "true"), this.ariaSelected = "true");
70
70
  }
71
71
  }
72
- 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();
73
- u.replaceSync(T);
74
- var o, d, $;
75
- class E extends HTMLElement {
72
+ 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))}}', b = new CSSStyleSheet();
73
+ b.replaceSync(T);
74
+ var o, d, A;
75
+ class L extends HTMLElement {
76
76
  constructor() {
77
- var e;
77
+ var t;
78
78
  super();
79
79
  x(this, o);
80
- this.template = () => `
80
+ this._label = `tabs-${Math.random().toString(36).substring(2, 15)}`, this.tabsConnected = 0, this.template = () => `
81
81
  <div id="container">
82
82
  <div id="tab-container">
83
83
  <px-button-icon id="previous" aria-hidden="true">
@@ -95,19 +95,23 @@ class E extends HTMLElement {
95
95
  </div>
96
96
  </div>
97
97
  `, this.handleNextPreviousDisplay = () => {
98
- this.$prefixButton && this.$suffixButton && (this.$prefixButton.style.display = this.shouldDisplayScrollLeftButton() ? "" : "none", this.$suffixButton.style.display = this.shouldDisplayScrollRightButton() ? "" : "none");
99
- }, this.attachShadow({ mode: "open" }), this.shadowRoot.innerHTML = this.template(), this.shadowRoot.adoptedStyleSheets = [u], this.internals = (e = this.attachInternals) == null ? void 0 : e.call(this);
98
+ this.allTabsConnected() && this.$prefixButton && this.$suffixButton && (this.$prefixButton.style.display = this.shouldDisplayScrollLeftButton() ? "" : "none", this.$suffixButton.style.display = this.shouldDisplayScrollRightButton() ? "" : "none");
99
+ }, this.attachShadow({ mode: "open" }), this.shadowRoot.innerHTML = this.template(), this.shadowRoot.adoptedStyleSheets = [b], this.internals = (t = this.attachInternals) == null ? void 0 : t.call(this);
100
100
  }
101
101
  static get observedAttributes() {
102
102
  return [
103
+ "label",
103
104
  "inverted",
104
105
  "aria-label-next",
105
106
  "aria-label-previous",
106
107
  "hide-controls"
107
108
  ];
108
109
  }
109
- attributeChangedCallback(e, s, i) {
110
- switch (e) {
110
+ attributeChangedCallback(t, s, i) {
111
+ switch (t) {
112
+ case "label":
113
+ this.label = i;
114
+ break;
111
115
  case "aria-label-next":
112
116
  this.hasAttribute("hide-controls") || this.$suffixButton.setAttribute("aria-label", i || "Next tab");
113
117
  break;
@@ -118,16 +122,16 @@ class E extends HTMLElement {
118
122
  );
119
123
  break;
120
124
  case "hide-controls":
121
- l(this, o, $).call(this, i);
125
+ n(this, o, A).call(this, i);
122
126
  break;
123
127
  case "inverted":
124
- l(this, o, d).call(this, i);
128
+ n(this, o, d).call(this, i);
125
129
  break;
126
130
  }
127
131
  }
128
132
  connectedCallback() {
129
- var e, s;
130
- this.role = "tablist", this.internals && (this.internals.role = "tablist"), this.addEventListener(
133
+ var t, s;
134
+ 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.addEventListener(
131
135
  g,
132
136
  (i) => {
133
137
  [...this.$tabPanels].forEach((a) => {
@@ -137,11 +141,11 @@ class E extends HTMLElement {
137
141
  });
138
142
  }
139
143
  ), this.addEventListener(y, () => {
140
- this.handleNextPreviousDisplay(), this.inverted && l(this, o, d).call(this, this.getAttribute("inverted"));
141
- }), this.handleNextPreviousDisplay(), l(this, o, d).call(this, this.getAttribute("inverted")), this.addEventListener("keydown", (i) => {
142
- var a, n;
143
- (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");
144
- }), (e = this.$prefixButton) == null || e.addEventListener("click", (i) => {
144
+ this.tabsConnected++, this.handleNextPreviousDisplay(), this.allTabsConnected() && this.inverted && n(this, o, d).call(this, this.getAttribute("inverted"));
145
+ }), this.allTabsConnected() && n(this, o, d).call(this, this.getAttribute("inverted")), this.addEventListener("keydown", (i) => {
146
+ var a, l;
147
+ (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");
148
+ }), (t = this.$prefixButton) == null || t.addEventListener("click", (i) => {
145
149
  i.stopPropagation(), this.$tabList.scrollTo({
146
150
  left: this.$tabList.scrollLeft - 100,
147
151
  behavior: "smooth"
@@ -156,12 +160,15 @@ class E extends HTMLElement {
156
160
  disconnectedCallback() {
157
161
  window.addEventListener("resize", this.handleNextPreviousDisplay);
158
162
  }
159
- navigateToTab(e) {
163
+ navigateToTab(t) {
160
164
  const s = this.$nextTab, i = this.$previousTab;
161
- 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;
165
+ 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;
166
+ }
167
+ allTabsConnected() {
168
+ return this.tabsConnected === this.querySelectorAll('[slot="tabs"]').length || [...this.$tabs].every((t) => t.isConnected);
162
169
  }
163
170
  shouldDisplayScrollRightButton() {
164
- return this.$tabList.scrollWidth > this.$tabList.clientWidth && this.$tabList.scrollWidth - this.$tabList.scrollLeft !== this.$tabList.clientWidth;
171
+ return this.allTabsConnected() && this.$tabList.scrollWidth > this.$tabList.clientWidth && this.$tabList.scrollWidth - this.$tabList.scrollLeft !== this.$tabList.clientWidth;
165
172
  }
166
173
  shouldDisplayScrollLeftButton() {
167
174
  return this.$tabList.scrollLeft > 0;
@@ -170,16 +177,16 @@ class E extends HTMLElement {
170
177
  return this.querySelector('[selected=""][slot="tabs"]');
171
178
  }
172
179
  get $nextTab() {
173
- const e = this.$activeTab.nextElementSibling;
174
- return e.slot !== "tabs" ? this.querySelector('[slot="tabs"]') : e;
180
+ const t = this.$activeTab.nextElementSibling;
181
+ return t.slot !== "tabs" ? this.querySelector('[slot="tabs"]') : t;
175
182
  }
176
183
  get $previousTab() {
177
- const e = this.$activeTab.previousElementSibling;
178
- return e || Array.from(this.querySelectorAll('[slot="tabs"]')).pop();
184
+ const t = this.$activeTab.previousElementSibling;
185
+ return t || Array.from(this.querySelectorAll('[slot="tabs"]')).pop();
179
186
  }
180
187
  get $activePanel() {
181
- var e;
182
- return this.querySelector(`[name="${(e = this.$activeTab) == null ? void 0 : e.for}"]`);
188
+ var t;
189
+ return this.querySelector(`[name="${(t = this.$activeTab) == null ? void 0 : t.for}"]`);
183
190
  }
184
191
  get $tabList() {
185
192
  return this.shadowRoot.querySelector("#tablist");
@@ -196,6 +203,12 @@ class E extends HTMLElement {
196
203
  get $suffixButton() {
197
204
  return this.shadowRoot.querySelector("#next");
198
205
  }
206
+ get label() {
207
+ return this.$tabList.getAttribute("aria-labelledby");
208
+ }
209
+ set label(t) {
210
+ this.$tabList.setAttribute("aria-labelledby", t);
211
+ }
199
212
  get inverted() {
200
213
  return this.hasAttribute("inverted");
201
214
  }
@@ -206,15 +219,15 @@ class E extends HTMLElement {
206
219
  return this.getAttribute("aria-label-previous");
207
220
  }
208
221
  }
209
- o = new WeakSet(), d = function(e) {
210
- var s, i, a, n, b, h, p, v;
211
- 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) => {
222
+ o = new WeakSet(), d = function(t) {
223
+ var s, i, a, l, u, h, p, v;
224
+ 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) => {
212
225
  c.setAttribute("inverted", "");
213
- })) : ((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) => {
226
+ })) : ((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) => {
214
227
  c.removeAttribute("inverted");
215
228
  }));
216
- }, $ = function(e) {
217
- e === "" ? (this.$prefixButton.remove(), this.$suffixButton.remove()) : (this.$suffixButton.setAttribute(
229
+ }, A = function(t) {
230
+ t === "" ? (this.$prefixButton.remove(), this.$suffixButton.remove()) : (this.$suffixButton.setAttribute(
218
231
  "aria-label",
219
232
  this.ariaLabelNext || "Next tab"
220
233
  ), this.$prefixButton.setAttribute(
@@ -222,19 +235,19 @@ o = new WeakSet(), d = function(e) {
222
235
  this.ariaLabelPrevious || "Previous tab"
223
236
  ));
224
237
  };
225
- class L extends HTMLElement {
238
+ class E extends HTMLElement {
226
239
  constructor() {
227
240
  super(), this.template = () => `
228
241
  <div role="tabpanel" tabindex="0">
229
242
  <slot></slot>
230
243
  </div>
231
- `, this.attachShadow({ mode: "open" }), this.shadowRoot.innerHTML = this.template(), this.shadowRoot.adoptedStyleSheets = [u];
244
+ `, this.attachShadow({ mode: "open" }), this.shadowRoot.innerHTML = this.template(), this.shadowRoot.adoptedStyleSheets = [b];
232
245
  }
233
246
  static get observedAttributes() {
234
247
  return ["name", "selected"];
235
248
  }
236
- attributeChangedCallback(t, e, s) {
237
- t === "name" ? this.$panel.setAttribute("aria-labelledby", s) : t === "selected" && (s === "" ? this.$panel.style.display = "block" : this.$panel.style.display = "none");
249
+ attributeChangedCallback(e, t, s) {
250
+ e === "name" ? this.$panel.setAttribute("aria-labelledby", s) : e === "selected" && (s === "" ? this.$panel.style.display = "block" : this.$panel.style.display = "none");
238
251
  }
239
252
  connectedCallback() {
240
253
  this.slot = "tabpanels", this.$panel.style.display = "none";
@@ -242,11 +255,11 @@ class L extends HTMLElement {
242
255
  get name() {
243
256
  return this.getAttribute("name");
244
257
  }
245
- set name(t) {
246
- this.setAttribute("name", t);
258
+ set name(e) {
259
+ this.setAttribute("name", e);
247
260
  }
248
- set selected(t) {
249
- t ? this.setAttribute("selected", "") : this.removeAttribute("selected");
261
+ set selected(e) {
262
+ e ? this.setAttribute("selected", "") : this.removeAttribute("selected");
250
263
  }
251
264
  get selected() {
252
265
  return this.hasAttribute("selected");
@@ -255,32 +268,32 @@ class L extends HTMLElement {
255
268
  return this.shadowRoot.querySelector('[role="tabpanel"]');
256
269
  }
257
270
  }
258
- class w extends E {
271
+ class w extends L {
259
272
  constructor() {
260
273
  super();
261
274
  }
262
275
  connectedCallback() {
263
- var t;
264
- (t = super.connectedCallback) == null || t.call(this), this.querySelectorAll("px-tab").forEach((e) => {
265
- e.setAttribute("slot", "tabs");
276
+ var e;
277
+ (e = super.connectedCallback) == null || e.call(this), this.querySelectorAll("px-tab").forEach((t) => {
278
+ t.setAttribute("slot", "tabs");
266
279
  });
267
280
  }
268
281
  }
269
282
  customElements.get("px-tabs") || customElements.define("px-tabs", w);
270
- class B extends S {
283
+ class C extends S {
271
284
  constructor() {
272
285
  super();
273
286
  }
274
287
  }
275
- customElements.get("px-tab") || customElements.define("px-tab", B);
276
- class P extends L {
288
+ customElements.get("px-tab") || customElements.define("px-tab", C);
289
+ class B extends E {
277
290
  constructor() {
278
291
  super();
279
292
  }
280
293
  }
281
- customElements.get("px-tab-panel") || customElements.define("px-tab-panel", P);
294
+ customElements.get("px-tab-panel") || customElements.define("px-tab-panel", B);
282
295
  export {
283
- B as PxTab,
284
- P as PxTabPanel,
296
+ C as PxTab,
297
+ B as PxTabPanel,
285
298
  w as PxTabs
286
299
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@proximus/lavender-tabs",
3
- "version": "1.4.6-beta.2",
3
+ "version": "1.4.6",
4
4
  "description": "",
5
5
  "main": "dist/index.es.js",
6
6
  "types": "dist/index.d.ts",