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

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