@proximus/lavender-tabs 1.4.1-alpha.13 → 1.4.1-alpha.14
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.
- package/dist/index.es.js +9 -9
- package/package.json +1 -1
package/dist/index.es.js
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import "@proximus/lavender-button-icon";
|
|
2
2
|
import { isFalsy as c } from "@proximus/lavender-common";
|
|
3
|
-
const
|
|
4
|
-
l.replaceSync(
|
|
5
|
-
class
|
|
3
|
+
const u = '*{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))}}', l = new CSSStyleSheet();
|
|
4
|
+
l.replaceSync(u);
|
|
5
|
+
class b extends HTMLElement {
|
|
6
6
|
constructor() {
|
|
7
7
|
var t;
|
|
8
8
|
super(), this._label = `tabs-${Math.random().toString(36).substring(2, 15)}`, this.tabsConnected = 0, this.template = () => `
|
|
@@ -56,7 +56,7 @@ class u extends HTMLElement {
|
|
|
56
56
|
if ((o = s.target.localName) != null && o.endsWith("-tab")) {
|
|
57
57
|
this.$activePanel.selected = !1, this.$activeTab.selected = !1;
|
|
58
58
|
const r = s.target;
|
|
59
|
-
r && (r.selected = !0), this.$activePanel
|
|
59
|
+
r && (r.selected = !0), this.$activePanel && (this.$activePanel.selected = !0);
|
|
60
60
|
}
|
|
61
61
|
}), this.addEventListener("keydown", (s) => {
|
|
62
62
|
var o, r;
|
|
@@ -152,7 +152,7 @@ class p extends HTMLElement {
|
|
|
152
152
|
return ["selected", "for", "name"];
|
|
153
153
|
}
|
|
154
154
|
connectedCallback() {
|
|
155
|
-
this.
|
|
155
|
+
this.slot = "tabs", this.parentElement.inverted && (this.setAttribute("inverted", ""), this.$button.setAttribute("inverted", "")), this.dispatchEvent(
|
|
156
156
|
new CustomEvent("px-tab-connected", { bubbles: !0, composed: !0 })
|
|
157
157
|
);
|
|
158
158
|
}
|
|
@@ -202,14 +202,14 @@ class f extends HTMLElement {
|
|
|
202
202
|
t === "name" && this.$panel.setAttribute("aria-labelledby", e);
|
|
203
203
|
}
|
|
204
204
|
connectedCallback() {
|
|
205
|
-
this.
|
|
205
|
+
this.slot = "tabpanels";
|
|
206
206
|
const t = this.parentElement.querySelector(
|
|
207
207
|
`[for="${this.getAttribute("name")}"]`
|
|
208
208
|
);
|
|
209
|
-
t
|
|
209
|
+
t && this.$panel.setAttribute(
|
|
210
210
|
"aria-labelledby",
|
|
211
211
|
t.getAttribute("name")
|
|
212
|
-
)
|
|
212
|
+
);
|
|
213
213
|
const i = this.parentElement.querySelector(
|
|
214
214
|
`[for="${this.name}"]`
|
|
215
215
|
);
|
|
@@ -228,7 +228,7 @@ class f extends HTMLElement {
|
|
|
228
228
|
return this.shadowRoot.querySelector('[role="tabpanel"]');
|
|
229
229
|
}
|
|
230
230
|
}
|
|
231
|
-
class v extends
|
|
231
|
+
class v extends b {
|
|
232
232
|
constructor() {
|
|
233
233
|
super(), this.querySelectorAll("px-tab").forEach((t) => {
|
|
234
234
|
t.setAttribute("slot", "tabs");
|