@proximus/lavender-tabs 2.0.0-alpha.116 → 2.0.0-alpha.117
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 +19 -17
- package/package.json +1 -1
package/dist/index.es.js
CHANGED
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
var f = (r) => {
|
|
2
2
|
throw TypeError(r);
|
|
3
3
|
};
|
|
4
|
-
var
|
|
4
|
+
var S = (r, e, t) => e.has(r) || f("Cannot " + t);
|
|
5
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) => (
|
|
6
|
+
var n = (r, e, t) => (S(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) .tab-btn{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) .tab-btn{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])>.tab-btn{cursor:auto;padding-block:var(--px-padding-m-mobile);color:var(--px-color-text-neutral-inverted)}.tab-btn{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])) .tab-btn:hover{background-color:var(--px-color-background-state-hover-default)}:host([inverted]) .tab-btn{color:var(--px-color-text-neutral-inverted)}:host([inverted]:not([selected])) .tab-btn:hover{background-color:var(--px-color-background-state-hover-inverted)}:host([inverted][selected]) .tab-btn{color:var(--px-color-text-brand-default)}:host([inverted]:focus-visible){outline-color:var(--px-color-border-focus-outline-inverted)}@media screen and (min-width: 48rem){.tab-btn{padding:var(--px-padding-s-desktop);font-size:var(--px-text-size-label-l-desktop)}:host[selected]>.tab-btn{padding-block:var(--px-padding-m-desktop)}}@media screen and (min-width: 64.0625rem){.tab-btn{padding:var(--px-padding-s-desktop);font-size:var(--px-text-size-label-l-desktop)}:host[selected]>.tab-btn{padding-block:var(--px-padding-m-desktop)}}", g = new CSSStyleSheet();
|
|
9
9
|
g.replaceSync(k);
|
|
10
10
|
const m = "px.lavender.tab.selected", A = "px-tab-connected";
|
|
11
|
-
class
|
|
11
|
+
class L extends HTMLElement {
|
|
12
12
|
constructor() {
|
|
13
13
|
var e;
|
|
14
14
|
super(), this.template = () => `
|
|
@@ -67,10 +67,10 @@ class S extends HTMLElement {
|
|
|
67
67
|
}), this.focus(), this.tabIndex = 0, this.internals && (this.internals.ariaSelected = "true"), this.ariaSelected = "true");
|
|
68
68
|
}
|
|
69
69
|
}
|
|
70
|
-
const
|
|
71
|
-
b.replaceSync(
|
|
70
|
+
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:12px;left:-24px}#tab-container>#next{position:absolute;top:12px;right:-24px}#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 screen and (min-width: 48rem){#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 screen and (min-width: 64.0625rem){#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();
|
|
71
|
+
b.replaceSync(T);
|
|
72
72
|
var o, d, $;
|
|
73
|
-
class
|
|
73
|
+
class E extends HTMLElement {
|
|
74
74
|
constructor() {
|
|
75
75
|
var t;
|
|
76
76
|
super();
|
|
@@ -234,13 +234,15 @@ o = new WeakSet(), d = function(t) {
|
|
|
234
234
|
this.previousAriaLabel || "Previous tab"
|
|
235
235
|
));
|
|
236
236
|
};
|
|
237
|
-
|
|
237
|
+
const w = ":host [role=tabpanel]{overflow-x:auto}", y = new CSSStyleSheet();
|
|
238
|
+
y.replaceSync(w);
|
|
239
|
+
class B extends HTMLElement {
|
|
238
240
|
constructor() {
|
|
239
241
|
super(), this.template = () => `
|
|
240
242
|
<div role="tabpanel" id="${this.panelId}" tabindex="0">
|
|
241
243
|
<slot></slot>
|
|
242
244
|
</div>
|
|
243
|
-
`, this.attachShadow({ mode: "open" }), this.shadowRoot.innerHTML = this.template(), this.shadowRoot.adoptedStyleSheets = [b];
|
|
245
|
+
`, this.attachShadow({ mode: "open" }), this.shadowRoot.innerHTML = this.template(), this.shadowRoot.adoptedStyleSheets = [b, y];
|
|
244
246
|
}
|
|
245
247
|
static get observedAttributes() {
|
|
246
248
|
return ["id", "selected"];
|
|
@@ -267,7 +269,7 @@ class E extends HTMLElement {
|
|
|
267
269
|
return this.shadowRoot.querySelector('[role="tabpanel"]');
|
|
268
270
|
}
|
|
269
271
|
}
|
|
270
|
-
class
|
|
272
|
+
class C extends E {
|
|
271
273
|
constructor() {
|
|
272
274
|
super();
|
|
273
275
|
}
|
|
@@ -278,21 +280,21 @@ class w extends T {
|
|
|
278
280
|
});
|
|
279
281
|
}
|
|
280
282
|
}
|
|
281
|
-
customElements.get("px-tabs") || customElements.define("px-tabs",
|
|
282
|
-
class
|
|
283
|
+
customElements.get("px-tabs") || customElements.define("px-tabs", C);
|
|
284
|
+
class P extends L {
|
|
283
285
|
constructor() {
|
|
284
286
|
super();
|
|
285
287
|
}
|
|
286
288
|
}
|
|
287
|
-
customElements.get("px-tab") || customElements.define("px-tab",
|
|
288
|
-
class
|
|
289
|
+
customElements.get("px-tab") || customElements.define("px-tab", P);
|
|
290
|
+
class R extends B {
|
|
289
291
|
constructor() {
|
|
290
292
|
super();
|
|
291
293
|
}
|
|
292
294
|
}
|
|
293
|
-
customElements.get("px-tab-panel") || customElements.define("px-tab-panel",
|
|
295
|
+
customElements.get("px-tab-panel") || customElements.define("px-tab-panel", R);
|
|
294
296
|
export {
|
|
295
|
-
|
|
296
|
-
|
|
297
|
-
|
|
297
|
+
P as PxTab,
|
|
298
|
+
R as PxTabPanel,
|
|
299
|
+
C as PxTabs
|
|
298
300
|
};
|