@proximus/lavender-tabs 1.0.0-alpha.21 → 1.0.0-alpha.23

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 (2) hide show
  1. package/dist/index.js +189 -49
  2. package/package.json +5 -3
package/dist/index.js CHANGED
@@ -1,39 +1,168 @@
1
- import { isFalsy as r } from "@proximus/lavender-common";
2
- const l = '*{font-family:var(--px-font-family)}#container{display:flex;flex-direction:column;align-items:flex-start;gap:var(--px-spacing-after-element-default-mobile)}#panels{width:100%}div[role=tablist]{display:flex;align-items:center;scrollbar-width:none;overflow:scroll;width:80%;box-sizing:border-box}div[role=tablist] ::slotted(px-tab){background-color:var(--px-background-color-action-neutral-default)}div[role=tablist] ::slotted(px-tab[selected=""]){background-color:var(--px-background-color-action-active-default);border-radius:var(--px-radius-main)!important}div[role=tablist] ::slotted(px-tab:first-child){border-radius:var(--px-radius-main) var(--px-radius-none) var(--px-radius-none) var(--px-radius-main)}div[role=tablist] ::slotted(px-tab:last-of-type){border-radius:var(--px-radius-none) var(--px-radius-main) var(--px-radius-main) var(--px-radius-none)}div[role=tablist]::-webkit-scrollbar{display:none}button[role=tab]{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:700;text-wrap:nowrap;color:var(--px-text-color-heading-neutral-default);outline:none}button[aria-selected=""]{cursor:auto;padding-block:var(--px-padding-m-mobile);color:var(--px-text-color-heading-neutral-inverted)}:host([inverted]) div[role=tablist] ::slotted(px-tab){background-color:var(--px-background-color-action-neutral-inverted)}:host([inverted]) div[role=tablist] ::slotted(px-tab[selected=""]){background-color:var(--px-background-color-action-active-inverted)}:host([inverted]) button[role=tab]{color:var(--px-text-color-heading-neutral-inverted)}:host([inverted]) button[aria-selected=""]{color:var(--px-text-color-heading-brand-default)}@media only screen and (min-width: 768px){#container{gap:var(--px-spacing-after-element-default-tablet)}button[role=tab]{padding:var(--px-padding-s-tablet);font-size:var(--px-text-size-label-l-tablet)}button[aria-selected=""]{padding-block:var(--px-padding-m-tablet)}}@media only screen and (min-width: 1025px){#container{gap:var(--px-spacing-after-element-default-desktop)}button[role=tab]{padding:var(--px-padding-s-desktop);font-size:var(--px-text-size-label-l-desktop)}button[aria-selected=""]{padding-block:var(--px-padding-m-desktop)}}', i = new CSSStyleSheet();
3
- i.replaceSync(l);
4
- class o extends HTMLElement {
1
+ import { PxElement as h, isFalsy as p } from "@proximus/lavender-common";
2
+ const v = ".btn-icon{display:inline-flex;width:var(--px-action-size-l);height:var(--px-action-size-l);vertical-align:middle;align-items:center;justify-content:center;cursor:pointer;--btn-transition: all .2s ease-in-out 0s;transition:var(--btn-transition);background:var(--px-background-color-action-primary-default);color:var(--px-icon-color-action-brand-inverted);border-radius:var(--px-radius-pill);padding:var(--px-padding-xs-mobile);border:var(--px-border-size-m) solid transparent}.btn-icon,.btn-icon *{box-sizing:border-box}.btn-icon ::slotted(px-icon){line-height:0}.btn-icon:hover:not([disabled],[aria-disabled=true],.btn-icon--state-loading){background:var(--px-background-color-action-hover-bordered-default);color:var(--px-icon-color-action-brand-default);border-color:var(--px-border-color-action-hover-default)}.btn-icon:active:not([disabled],[aria-disabled=true],.btn-icon--state-loading){background:var(--px-background-color-action-active-inverted);color:var(--px-icon-color-action-active-default);border-color:var(--px-border-color-action-active-default)}.btn-icon:focus:not([disabled],[aria-disabled=true]){outline-offset:var(--px-focus-offset-mobile);outline:var(--px-focus-outline-mobile) solid var(--px-border-color-focus-outline-default)}.btn-icon[disabled],.btn-icon[aria-disabled=true]{background:var(--px-background-color-action-disabled-default);color:var(--px-icon-color-action-disabled-default);cursor:default;pointer-events:none}.btn-icon.btn-icon--state-loading{background:var(--px-background-color-action-disabled-default);color:var(--px-icon-color-action-brand-default);cursor:inherit}.btn-icon--size-small{padding:var(--px-padding-2xs-mobile);width:var(--px-action-size-m);height:var(--px-action-size-m)}.btn-icon--variant-secondary{background-color:var(--px-background-color-action-secondary-default);color:var(--px-icon-color-action-brand-default)}:host([inverted]) .btn-icon{background:var(--px-background-color-action-primary-inverted);color:var(--px-icon-color-action-brand-default)}:host([inverted]) .btn-icon:hover:not([disabled],[aria-disabled=true],.btn-icon--state-loading){background:var(--px-background-color-action-hover-bordered-inverted);color:var(--px-icon-color-action-brand-inverted);border-color:var(--px-border-color-action-hover-inverted)}:host([inverted]) .btn-icon:active:not([disabled],[aria-disabled=true],.btn-icon--state-loading){background:var(--px-background-color-action-hover-default);color:var(--px-icon-color-action-active-inverted);border-color:var(--px-border-color-action-active-inverted)}:host([inverted]) .btn-icon:focus:not([disabled],[aria-disabled=true]){outline-color:var(--px-border-color-focus-outline-inverted)}:host([inverted]) .btn-icon[disabled],:host([inverted]) .btn-icon[aria-disabled=true]{background:var(--px-background-color-action-disabled-inverted);color:var(--px-icon-color-action-disabled-inverted)}:host([inverted]) .btn-icon.btn-icon--state-loading{background:var(--px-background-color-action-disabled-inverted);color:var(--px-icon-color-action-brand-inverted);border-color:transparent}:host([inverted]) .btn-icon--variant-secondary{background-color:var(--px-background-color-action-secondary-inverted);color:var(--px-icon-color-action-brand-inverted)}@media only screen and (min-width: 768px){.btn-icon{padding:var(--px-padding-xs-tablet)}.btn-icon:focus:not([disabled],[aria-disabled=true]){outline-offset:var(--px-focus-offset-tablet);outline-width:var(--px-focus-outline-tablet)}.btn-icon--size-small{padding:var(--px-padding-2xs-tablet)}}@media only screen and (min-width: 1025px){.btn-icon{padding:var(--px-padding-xs-desktop)}.btn-icon:focus:not([disabled],[aria-disabled=true]){outline-offset:var(--px-focus-offset-desktop);outline-width:var(--px-focus-outline-desktop)}.btn-icon--size-small{padding:var(--px-padding-2xs-desktop)}}", b = new CSSStyleSheet();
3
+ b.replaceSync(v);
4
+ const f = ["", "default", "small"], g = ["", "default", "secondary"], s = class s extends h {
5
5
  constructor() {
6
- super(), this._label = `tabs-${Math.random().toString(36).substring(2, 15)}`, this.template = () => `
6
+ super(b), this.template = () => "<slot></slot>";
7
+ const t = document.createElement(this.nativeName);
8
+ t.classList.add("btn-icon"), t.innerHTML = this.template(), this.shadowRoot.appendChild(t);
9
+ }
10
+ static get observedAttributes() {
11
+ return [
12
+ ...super.observedAttributes,
13
+ "inverted",
14
+ "loading",
15
+ "size",
16
+ "variant"
17
+ ];
18
+ }
19
+ connectedCallback() {
20
+ super.connectedCallback();
21
+ const t = this.querySelector("px-icon");
22
+ if (t) {
23
+ const e = t.getAttribute("size"), i = t.getAttribute("color");
24
+ t.addEventListener("click", () => {
25
+ this.$el.focus();
26
+ }), e || t.setAttribute("size", "s"), this.size === "small" && t.setAttribute("size", "2xs"), i || t.setAttribute("color", "inherit");
27
+ }
28
+ }
29
+ attributeChangedCallback(t, e, i) {
30
+ if (e !== i)
31
+ switch (t) {
32
+ case "loading":
33
+ this.updateLoading();
34
+ break;
35
+ case "size":
36
+ this.updateSize(e, i, f);
37
+ break;
38
+ case "variant":
39
+ this.updateVariant(e, i, g);
40
+ break;
41
+ default:
42
+ super.attributeChangedCallback(t, e, i);
43
+ break;
44
+ }
45
+ }
46
+ checkName(t, e) {
47
+ return t.includes(e);
48
+ }
49
+ _toggleClass(t, e) {
50
+ t !== null && t !== "" && t !== "default" && this.$el.classList.toggle(t), e !== null && e !== "" && e !== "default" && this.$el.classList.toggle(e);
51
+ }
52
+ updateLoading() {
53
+ this.$el.classList.toggle("btn-icon--state-loading");
54
+ }
55
+ updateSize(t, e, i) {
56
+ this.checkName(i, e) ? (t !== null && t !== "" && t !== "default" && this.$el.classList.toggle(`btn-icon--size-${t}`), e !== null && e !== "" && e !== "default" && this.$el.classList.toggle(`btn-icon--size-${e}`)) : console.error("Bad size value for", this.$el);
57
+ }
58
+ updateVariant(t, e, i) {
59
+ this.checkName(i, e) ? (t !== null && t !== "" && t !== "default" && this.$el.classList.toggle(`btn-icon--variant-${t}`), e !== null && e !== "" && e !== "default" && this.$el.classList.toggle(`btn-icon--variant-${e}`)) : console.error(`Bad "variant" value for ${this.$el}`);
60
+ }
61
+ get inverted() {
62
+ return this.getAttribute("inverted");
63
+ }
64
+ set inverted(t) {
65
+ this.setAttribute("inverted", t);
66
+ }
67
+ get loading() {
68
+ return this.getAttribute("loading");
69
+ }
70
+ set loading(t) {
71
+ this.setAttribute("loading", t);
72
+ }
73
+ get size() {
74
+ return this.getAttribute("size");
75
+ }
76
+ set size(t) {
77
+ this.setAttribute("size", t);
78
+ }
79
+ get variant() {
80
+ return this.getAttribute("variant");
81
+ }
82
+ set variant(t) {
83
+ this.setAttribute("variant", t);
84
+ }
85
+ };
86
+ s.nativeName = "button";
87
+ let n = s;
88
+ customElements.get("px-button-icon") || customElements.define("px-button-icon", n);
89
+ const x = '*{font-family:var(--px-font-family)}#container{display:flex;flex-direction:column;align-items:flex-start;gap:var(--px-spacing-after-element-default-mobile)}#tab-container{position:relative;width:100%}#tab-container>#previous{position:absolute;top:.75rem;left:-1.5rem}#tab-container>#next{position:absolute;top:.75rem;right:-1.5rem}#panels{width:100%}#tablist{display:flex;align-items:center;scrollbar-width:none;overflow:scroll;width:100%;box-sizing:border-box}#tablist::-webkit-scrollbar{display:none}:host([inverted]) #tablist ::slotted(px-tab){background-color:var(--px-background-color-action-neutral-inverted)}:host([inverted]) #tablist ::slotted(px-tab[selected=""]){background-color:var(--px-background-color-action-active-inverted)}:host([inverted]) #tablist ::slotted(px-tab[selected=""])>button{color:var(--px-text-color-heading-brand-default)}:host([inverted]) button[role=tab]{color:var(--px-text-color-heading-neutral-inverted)}:host([inverted]) button[aria-selected=""]{color:var(--px-text-color-heading-brand-default)}@media only screen and (min-width: 768px){#container{gap:var(--px-spacing-after-element-default-tablet)}}@media only screen and (min-width: 1025px){#container{gap:var(--px-spacing-after-element-default-desktop)}}', r = new CSSStyleSheet();
90
+ r.replaceSync(x);
91
+ class m extends HTMLElement {
92
+ constructor() {
93
+ var t;
94
+ super(), this._label = `tabs-${Math.random().toString(36).substring(2, 15)}`, this.tabsConnected = 0, this.template = () => `
7
95
  <div id="container">
8
- <div role="tablist" aria-labelledby="${this._label}">
9
- <slot name="tabs"></slot>
96
+ <div id="tab-container">
97
+ <px-button-icon id="previous" aria-hidden="true">
98
+ <px-icon name="chevron_left" from="lavender"></px-icon>
99
+ </px-button-icon>
100
+ <div id="tablist" aria-labelledby="${this._label}">
101
+ <slot name="tabs"></slot>
102
+ </div>
103
+ <px-button-icon id="next" aria-hidden="true">
104
+ <px-icon name="chevron_right" from="lavender"></px-icon>
105
+ </px-button-icon>
10
106
  </div>
11
107
  <div id="panels">
12
108
  <slot name="tabpanels"></slot>
13
109
  </div>
14
110
  </div>
15
- `, this.attachShadow({ mode: "open" }), this.getAttribute("label") && (this._label = this.getAttribute("label")), this.shadowRoot.innerHTML = this.template(), this.shadowRoot.adoptedStyleSheets = [i];
111
+ `, this.attachShadow({ mode: "open" }), this.getAttribute("label") && (this._label = this.getAttribute("label")), this.shadowRoot.innerHTML = this.template(), this.shadowRoot.adoptedStyleSheets = [r], this.internals = (t = this.attachInternals) == null ? void 0 : t.call(this), this.internals && (this.internals.role = "tablist"), this.addEventListener("px-tab-connected", () => {
112
+ this.tabsConnected++, this.handleNextPreviousDisplay();
113
+ }), window.addEventListener("resize", () => {
114
+ this.handleNextPreviousDisplay();
115
+ }), this.$tabList.addEventListener("scroll", () => {
116
+ this.handleNextPreviousDisplay();
117
+ });
16
118
  }
17
119
  static get observedAttributes() {
18
120
  return ["label", "inverted"];
19
121
  }
20
- attributeChangedCallback(t, a, e) {
21
- t === "label" && (this.label = e);
122
+ attributeChangedCallback(t, e, i) {
123
+ t === "label" && (this.label = i);
22
124
  }
23
125
  connectedCallback() {
24
- this.addEventListener("click", (t) => {
25
- var a;
26
- if ((a = t.target.localName) != null && a.endsWith("-tab")) {
27
- this.$activePanel.selected = !1, this.$activeTab.selected = "false";
28
- const e = t.target;
29
- e && (e.selected = ""), this.$activePanel ? this.$activePanel.selected = !0 : console.error("No panel found for this tab");
30
- }
31
- }), this.addEventListener("keydown", (t) => {
32
- if (t.key === "ArrowRight" || t.key === "ArrowLeft") {
33
- const a = this.$nextTab, e = this.$previousTab;
34
- this.$activePanel.selected = !1, this.$activeTab.selected = "false", t.key === "ArrowRight" ? a.selected = "" : t.key === "ArrowLeft" && (e.selected = ""), this.$activePanel.selected = !0;
126
+ var t, e, i, l;
127
+ this.checkNextPreviousButtonsVisibility(), this.addEventListener("click", (a) => {
128
+ var d;
129
+ if ((d = a.target.localName) != null && d.endsWith("-tab")) {
130
+ this.$activePanel.selected = !1, this.$activeTab.selected = !1;
131
+ const c = a.target;
132
+ c && (c.selected = !0), this.$activePanel ? this.$activePanel.selected = !0 : console.error("No panel found for this tab");
35
133
  }
36
- });
134
+ }), this.addEventListener("keydown", (a) => {
135
+ (a.key === "ArrowRight" || a.key === "ArrowLeft") && this.navigateToTab(a.key === "ArrowRight" ? "right" : "left");
136
+ }), (t = this.$prefixButton) == null || t.addEventListener("click", (a) => {
137
+ a.stopPropagation(), this.$tabList.scrollTo({
138
+ left: this.$tabList.scrollLeft - 100,
139
+ behavior: "smooth"
140
+ });
141
+ }), (e = this.$suffixButton) == null || e.addEventListener("click", (a) => {
142
+ a.stopPropagation(), this.$tabList.scrollTo({
143
+ left: this.$tabList.scrollLeft + 100,
144
+ behavior: "smooth"
145
+ });
146
+ }), this.inverted && ((i = this.$prefixButton) == null || i.setAttribute("inverted", ""), (l = this.$suffixButton) == null || l.setAttribute("inverted", ""));
147
+ }
148
+ checkNextPreviousButtonsVisibility() {
149
+ (this.getAttribute("hide-controls") === "" || this.getAttribute("hide-controls") === "true") && (this.$prefixButton.remove(), this.$suffixButton.remove());
150
+ }
151
+ navigateToTab(t) {
152
+ const e = this.$nextTab, i = this.$previousTab;
153
+ this.$activePanel.selected = !1, this.$activeTab.selected = !1, t === "right" ? e.selected = !0 : t === "left" && (i.selected = !0), this.$activePanel.selected = !0;
154
+ }
155
+ handleNextPreviousDisplay() {
156
+ this.allTabsConnected() && this.$prefixButton && this.$suffixButton && (this.$prefixButton.style.display = this.shouldDisplayScrollLeftButton() ? "" : "none", this.$suffixButton.style.display = this.shouldDisplayScrollRightButton() ? "" : "none");
157
+ }
158
+ allTabsConnected() {
159
+ return this.tabsConnected === this.querySelectorAll('[slot="tabs"]').length;
160
+ }
161
+ shouldDisplayScrollRightButton() {
162
+ return this.allTabsConnected() && this.$tabList.scrollWidth > this.$tabList.clientWidth && this.$tabList.scrollWidth - this.$tabList.scrollLeft !== this.$tabList.clientWidth;
163
+ }
164
+ shouldDisplayScrollLeftButton() {
165
+ return this.$tabList.scrollLeft > 0;
37
166
  }
38
167
  get $activeTab() {
39
168
  return this.querySelector('[selected=""][slot="tabs"]');
@@ -50,7 +179,13 @@ class o extends HTMLElement {
50
179
  return this.querySelector(`[name="${this.$activeTab.for}"]`);
51
180
  }
52
181
  get $tabList() {
53
- return this.shadowRoot.querySelector('[role="tablist"]');
182
+ return this.shadowRoot.querySelector("#tablist");
183
+ }
184
+ get $prefixButton() {
185
+ return this.shadowRoot.querySelector("#previous");
186
+ }
187
+ get $suffixButton() {
188
+ return this.shadowRoot.querySelector("#next");
54
189
  }
55
190
  get label() {
56
191
  return this.$tabList.getAttribute("aria-labelledby");
@@ -62,28 +197,36 @@ class o extends HTMLElement {
62
197
  return this.hasAttribute("inverted");
63
198
  }
64
199
  }
65
- class n extends HTMLElement {
200
+ const y = "*{font-family:var(--px-font-family)}:host{background-color:var(--px-background-color-action-neutral-default)}:host(:first-child){border-radius:var(--px-radius-main) var(--px-radius-none) var(--px-radius-none) var(--px-radius-main)}:host(:last-of-type){border-radius:var(--px-radius-none) var(--px-radius-main) var(--px-radius-main) var(--px-radius-none)}:host([selected]){background-color:var(--px-background-color-action-active-default);border-radius:var(--px-radius-main)!important}:host([selected])>button{cursor:auto;padding-block:var(--px-padding-m-mobile);color:var(--px-text-color-heading-neutral-inverted)}:host([inverted]) button{color:var(--px-text-color-heading-neutral-inverted)}:host([inverted][selected]) button{color:var(--px-text-color-heading-brand-default)}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:700;text-wrap:nowrap;color:var(--px-text-color-heading-neutral-default);outline:none}@media only screen and (min-width: 768px){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 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)}}", u = new CSSStyleSheet();
201
+ u.replaceSync(y);
202
+ class $ extends HTMLElement {
66
203
  constructor() {
204
+ var t;
67
205
  super(), this.template = () => `
68
- <button role="tab" aria-selected="false" type="button" tabindex="-1">
206
+ <button type="button" tabindex="-1" >
69
207
  <span><slot></slot></span>
70
208
  </button>
71
- `, this.attachShadow({ mode: "open" }), this.shadowRoot.innerHTML = this.template(), this.shadowRoot.adoptedStyleSheets = [i];
209
+ `, this.attachShadow({ mode: "open" }), this.shadowRoot.innerHTML = this.template(), this.shadowRoot.adoptedStyleSheets = [u], this.internals = (t = this.attachInternals) == null ? void 0 : t.call(this), this.internals && (this.internals.role = "tab");
72
210
  }
73
211
  static get observedAttributes() {
74
212
  return ["selected", "for", "name"];
75
213
  }
76
214
  connectedCallback() {
77
- this.name || console.error("Tab needs a name attribute"), this.for || console.error("Tab needs a for attribute"), this.slot = "tabs", this.parentElement.inverted && (this.setAttribute("inverted", ""), this.$button.setAttribute("inverted", ""));
215
+ this.name || console.error("Tab needs a name attribute"), this.for || console.error("Tab needs a for attribute"), this.slot = "tabs", this.parentElement.inverted && (this.setAttribute("inverted", ""), this.$button.setAttribute("inverted", "")), this.dispatchEvent(
216
+ new CustomEvent("px-tab-connected", { bubbles: !0, composed: !0 })
217
+ );
78
218
  }
79
- attributeChangedCallback(t, a, e) {
80
- t === "selected" ? this.handleSelected(e) : t === "name" ? this.$button.setAttribute("id", e) : t === "for" && this.$button.setAttribute("aria-controls", e);
219
+ attributeChangedCallback(t, e, i) {
220
+ t === "selected" ? this.handleSelected(i) : t === "name" ? this.$button.setAttribute("id", i) : t === "for" && this.setAttribute("aria-controls", i);
81
221
  }
82
222
  get $button() {
83
223
  return this.shadowRoot.querySelector("button");
84
224
  }
85
225
  get selected() {
86
- return this.$button.getAttribute("aria-selected");
226
+ return !!this.hasAttribute("selected");
227
+ }
228
+ set selected(t) {
229
+ t ? this.setAttribute("selected", "") : this.removeAttribute("selected");
87
230
  }
88
231
  get inverted() {
89
232
  return this.hasAttribute("inverted");
@@ -101,25 +244,22 @@ class n extends HTMLElement {
101
244
  return this.getAttribute("for");
102
245
  }
103
246
  handleSelected(t) {
104
- r(t) ? (this.$button.removeAttribute("aria-selected"), this.$button.tabIndex = -1) : (this.$button.setAttribute("aria-selected", t), this.$button.removeAttribute("tabindex"), this.$button.focus());
105
- }
106
- set selected(t) {
107
- this.setAttribute("selected", t);
247
+ t === null ? (this.tabIndex = -1, this.internals && (this.internals.ariaSelected = "false")) : (this.focus(), this.tabIndex = 0, this.internals && (this.internals.ariaSelected = "true"));
108
248
  }
109
249
  }
110
- class d extends HTMLElement {
250
+ class k extends HTMLElement {
111
251
  constructor() {
112
252
  super(), this.template = () => `
113
253
  <div role="tabpanel" aria-labelledby="${this.name}" tabindex="0">
114
254
  <slot></slot>
115
255
  </div>
116
- `, this.attachShadow({ mode: "open" }), this.shadowRoot.innerHTML = this.template(), this.shadowRoot.adoptedStyleSheets = [i];
256
+ `, this.attachShadow({ mode: "open" }), this.shadowRoot.innerHTML = this.template(), this.shadowRoot.adoptedStyleSheets = [r];
117
257
  }
118
258
  static get observedAttributes() {
119
259
  return ["name"];
120
260
  }
121
- attributeChangedCallback(t, a, e) {
122
- t === "name" && this.$panel.setAttribute("aria-labelledby", e);
261
+ attributeChangedCallback(t, e, i) {
262
+ t === "name" && this.$panel.setAttribute("aria-labelledby", i);
123
263
  }
124
264
  connectedCallback() {
125
265
  this.name || console.error("TabPanel needs a name attribute"), this.slot = "tabpanels";
@@ -130,10 +270,10 @@ class d extends HTMLElement {
130
270
  "aria-labelledby",
131
271
  t.getAttribute("name")
132
272
  ) : console.error("No tab found for this panel");
133
- const a = this.parentElement.querySelector(
273
+ const e = this.parentElement.querySelector(
134
274
  `[for="${this.name}"]`
135
275
  );
136
- r(a.selected) ? this.selected = !1 : this.selected = !0;
276
+ p(e.selected) ? this.selected = !1 : this.selected = !0;
137
277
  }
138
278
  get name() {
139
279
  return this.getAttribute("name");
@@ -148,28 +288,28 @@ class d extends HTMLElement {
148
288
  return this.shadowRoot.querySelector('[role="tabpanel"]');
149
289
  }
150
290
  }
151
- class b extends o {
291
+ class S extends m {
152
292
  constructor() {
153
293
  super(), this.querySelectorAll("px-tab").forEach((t) => {
154
294
  t.setAttribute("slot", "tabs");
155
295
  });
156
296
  }
157
297
  }
158
- customElements.get("px-tabs") || customElements.define("px-tabs", b);
159
- class c extends n {
298
+ customElements.get("px-tabs") || customElements.define("px-tabs", S);
299
+ class A extends $ {
160
300
  constructor() {
161
301
  super();
162
302
  }
163
303
  }
164
- customElements.get("px-tab") || customElements.define("px-tab", c);
165
- class u extends d {
304
+ customElements.get("px-tab") || customElements.define("px-tab", A);
305
+ class L extends k {
166
306
  constructor() {
167
307
  super();
168
308
  }
169
309
  }
170
- customElements.get("px-tab-panel") || customElements.define("px-tab-panel", u);
310
+ customElements.get("px-tab-panel") || customElements.define("px-tab-panel", L);
171
311
  export {
172
- c as PxTab,
173
- u as PxTabPanel,
174
- b as PxTabs
312
+ A as PxTab,
313
+ L as PxTabPanel,
314
+ S as PxTabs
175
315
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@proximus/lavender-tabs",
3
- "version": "1.0.0-alpha.21",
3
+ "version": "1.0.0-alpha.23",
4
4
  "description": "",
5
5
  "main": "dist/index.js",
6
6
  "exports": {
@@ -24,7 +24,7 @@
24
24
  "publishConfig": {
25
25
  "access": "public"
26
26
  },
27
- "gitHead": "671fab7ee21d1c0ec6498b45b0bb2fd47e6e6c84",
27
+ "gitHead": "3c47bcd1b96b2fda1c701173a9a06ae24743c7a0",
28
28
  "lerna": {
29
29
  "command": {
30
30
  "publish": {
@@ -32,7 +32,9 @@
32
32
  "CHANGELOG.md",
33
33
  "package.json",
34
34
  "dist/*.js",
35
- "dist/css/**/*.css"
35
+ "dist/*.cjs",
36
+ "dist/css/**/*.css",
37
+ "dist/js/**/*.js"
36
38
  ]
37
39
  }
38
40
  }