@proximus/lavender-tabs 2.0.0-alpha.116 → 2.0.0-alpha.118

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.es.js +19 -17
  2. 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 y = (r, e, t) => e.has(r) || f("Cannot " + t);
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) => (y(r, e, "access private method"), 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 S extends HTMLElement {
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 L = '*{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(L);
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 T extends HTMLElement {
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
- class E extends HTMLElement {
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 w extends T {
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", w);
282
- class B extends S {
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", B);
288
- class C extends E {
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", C);
295
+ customElements.get("px-tab-panel") || customElements.define("px-tab-panel", R);
294
296
  export {
295
- B as PxTab,
296
- C as PxTabPanel,
297
- w as PxTabs
297
+ P as PxTab,
298
+ R as PxTabPanel,
299
+ C as PxTabs
298
300
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@proximus/lavender-tabs",
3
- "version": "2.0.0-alpha.116",
3
+ "version": "2.0.0-alpha.118",
4
4
  "description": "",
5
5
  "main": "dist/index.es.js",
6
6
  "types": "dist/index.d.ts",