@proximus/lavender-common 1.4.1 → 1.4.3-alpha.1

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/common.d.ts +18 -3
  2. package/dist/index.es.js +120 -93
  3. package/package.json +1 -1
package/dist/common.d.ts CHANGED
@@ -1,5 +1,16 @@
1
1
  export declare function getSupportedPropertyNames(htmlElementName: string): string[];
2
2
  export declare function getSupportedAttributeNames(htmlElementName: string): string[];
3
+ declare global {
4
+ interface Window {
5
+ isComponentDebug?: () => boolean;
6
+ }
7
+ }
8
+ export declare function isComponentDebug(): boolean;
9
+ /**
10
+ * Logs an error message to the console if the global debug flag is set.
11
+ * Usage: log('message')
12
+ */
13
+ export declare function log(message: string): void;
3
14
  export declare class WithExtraAttributes extends HTMLElement {
4
15
  static get observedAttributes(): string[];
5
16
  constructor(...adoptedStylesheets: CSSStyleSheet[]);
@@ -91,16 +102,20 @@ export declare class WithExtraAttributes extends HTMLElement {
91
102
  }
92
103
  export declare abstract class PxElement<HTML_TYPE extends Element> extends WithExtraAttributes {
93
104
  static nativeName: string;
94
- nativeName: string;
95
- accessorExclusions: string[];
105
+ static supportedPropertyNames: string[];
106
+ static accessorExclusions: string[];
96
107
  static get observedAttributes(): string[];
97
108
  attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
109
+ protected get ctor(): any;
98
110
  protected constructor(...adoptedStylesheets: CSSStyleSheet[]);
99
- connectedCallback(): void;
111
+ enhanceWithNativeProperties(): void;
100
112
  get $el(): HTML_TYPE;
101
113
  protected _updateAttribute(name: string, value: string): void;
102
114
  protected _updateBooleanAttribute(name: string, value: boolean): void;
103
115
  }
116
+ export declare class VerticallyExtendedElement<HTML_TYPE extends Element> extends PxElement<HTML_TYPE> {
117
+ connectedCallback(): void;
118
+ }
104
119
  export declare const gridGapValues: string[];
105
120
  export declare const flexboxAlignSelfValues: readonly ["", "default", "auto", "flex-start", "flex-end", "center", "baseline", "stretch"];
106
121
  export declare const cssGridAlignSelfValues: readonly ["", "default", "start", "end", "center", "stretch"];
package/dist/index.es.js CHANGED
@@ -1,17 +1,26 @@
1
- const u = ":host([grow]){flex-grow:var(--grow-value)}:host([shrink]){flex-shrink:var(--shrink-value)}:host([basis]){flex-basis:var(--basis-value)}:host([align-self]){align-self:var(--align-self-value)}:host([col-span]){grid-column:span var(--col-span-value) / span var(--col-span-value)}:host([justify-self]){justify-self:var(--justify-value)}:host([order]),::slotted([order]){order:var(--order-value)}:host([hidden]),::slotted([hidden]){display:none}:host([shown--sr]),::slotted(*[shown--sr]){clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}@media screen and (max-width: 767px){:host([hidden--mobile]),::slotted([hidden--mobile]){display:none}:host([grow--mobile]){flex-grow:var(--grow--mobile-value)!important}:host([shrink--mobile]){flex-shrink:var(--shrink--mobile-value)!important}:host([basis--mobile]){flex-basis:var(--basis--mobile-value)!important}:host([align-self--mobile]){align-self:var(--align-self--mobile-value)!important}:host([col-span--mobile]){grid-column:span var(--col-span--mobile-value) / span var(--col-span--mobile-value)!important}:host([justify-self--mobile]){justify-self:var(--justify-self--mobile-value)!important}:host([order--mobile]),::slotted([order--mobile]){order:var(--order--mobile-value)!important}:host([shown--sr--mobile]),::slotted(*[shown--sr--mobile]){clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}}@media screen and (min-width: 768px) and (max-width: 1024px){:host([hidden--tablet]),::slotted([hidden--tablet]){display:none}:host([grow--tablet]){flex-grow:var(--grow--tablet-value)!important}:host([shrink--tablet]){flex-shrink:var(--shrink--tablet-value)!important}:host([basis--tablet]){flex-basis:var(--basis--tablet-value)!important}:host([align-self--tablet]){align-self:var(--align-self--tablet-value)!important}:host([col-span--tablet]){grid-column:span var(--col-span--tablet-value) / span var(--col-span--tablet-value)!important}:host([justify-self--tablet]){justify-self:var(--justify-self--tablet-value)!important}:host([order--tablet]),::slotted([order--tablet]){order:var(--order--tablet-value)!important}:host([shown--sr--tablet]),::slotted(*[shown--sr--tablet]){clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}}@media screen and (min-width: 1025px){:host([shown--sr--laptop]),::slotted(*[shown--sr--laptop]){clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}}@media screen and (min-width: 1025px){:host([hidden--laptop]),::slotted([hidden--laptop]){display:none!important}:host([grow--laptop]){flex-grow:var(--grow--laptop-value)!important}:host([shrink--laptop]){flex-shrink:var(--shrink--laptop-value)!important}:host([basis--laptop]){flex-basis:var(--basis--laptop-value)!important}:host([align-self--laptop]){align-self:var(--align-self--laptop-value)!important}:host([col-span--laptop]){grid-column:span var(--col-span--laptop-value) / span var(--col-span--laptop-value)!important}:host([justify-self--laptop]){justify-self:var(--justify-self--laptop-value)!important}:host([order--laptop]),::slotted([order--laptop]){order:var(--order--laptop-value)!important}}@media screen and (min-width: 1441px){:host([col-span--desktop]){grid-column:span var(--col-span--desktop-value) / span var(--col-span--desktop-value)!important}:host([justify-self--desktop]){justify-self:var(--justify-self--desktop-value)!important}:host([order--desktop]),::slotted([order--desktop]){order:var(--order--desktop-value)!important}:host([hidden--desktop]),::slotted([hidden--desktop]){display:none!important}:host([grow--desktop]){flex-grow:var(--grow--desktop-value)!important}:host([shrink--desktop]){flex-shrink:var(--shrink--desktop-value)!important}:host([basis--desktop]){flex-basis:var(--basis--desktop-value)!important}:host([align-self--desktop]){align-self:var(--align-self--desktop-value)!important}}";
2
- function b(i) {
1
+ const c = ":host([grow]){flex-grow:var(--grow-value)}:host([shrink]){flex-shrink:var(--shrink-value)}:host([basis]){flex-basis:var(--basis-value)}:host([align-self]){align-self:var(--align-self-value)}:host([col-span]){grid-column:span var(--col-span-value) / span var(--col-span-value)}:host([justify-self]){justify-self:var(--justify-value)}:host([order]),::slotted([order]){order:var(--order-value)}:host([hidden]),::slotted([hidden]){display:none}:host([shown--sr]),::slotted(*[shown--sr]){clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}@media screen and (max-width: 767px){:host([hidden--mobile]),::slotted([hidden--mobile]){display:none}:host([grow--mobile]){flex-grow:var(--grow--mobile-value)!important}:host([shrink--mobile]){flex-shrink:var(--shrink--mobile-value)!important}:host([basis--mobile]){flex-basis:var(--basis--mobile-value)!important}:host([align-self--mobile]){align-self:var(--align-self--mobile-value)!important}:host([col-span--mobile]){grid-column:span var(--col-span--mobile-value) / span var(--col-span--mobile-value)!important}:host([justify-self--mobile]){justify-self:var(--justify-self--mobile-value)!important}:host([order--mobile]),::slotted([order--mobile]){order:var(--order--mobile-value)!important}:host([shown--sr--mobile]),::slotted(*[shown--sr--mobile]){clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}}@media screen and (min-width: 768px) and (max-width: 1024px){:host([hidden--tablet]),::slotted([hidden--tablet]){display:none}:host([grow--tablet]){flex-grow:var(--grow--tablet-value)!important}:host([shrink--tablet]){flex-shrink:var(--shrink--tablet-value)!important}:host([basis--tablet]){flex-basis:var(--basis--tablet-value)!important}:host([align-self--tablet]){align-self:var(--align-self--tablet-value)!important}:host([col-span--tablet]){grid-column:span var(--col-span--tablet-value) / span var(--col-span--tablet-value)!important}:host([justify-self--tablet]){justify-self:var(--justify-self--tablet-value)!important}:host([order--tablet]),::slotted([order--tablet]){order:var(--order--tablet-value)!important}:host([shown--sr--tablet]),::slotted(*[shown--sr--tablet]){clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}}@media screen and (min-width: 1025px){:host([shown--sr--laptop]),::slotted(*[shown--sr--laptop]){clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}}@media screen and (min-width: 1025px){:host([hidden--laptop]),::slotted([hidden--laptop]){display:none!important}:host([grow--laptop]){flex-grow:var(--grow--laptop-value)!important}:host([shrink--laptop]){flex-shrink:var(--shrink--laptop-value)!important}:host([basis--laptop]){flex-basis:var(--basis--laptop-value)!important}:host([align-self--laptop]){align-self:var(--align-self--laptop-value)!important}:host([col-span--laptop]){grid-column:span var(--col-span--laptop-value) / span var(--col-span--laptop-value)!important}:host([justify-self--laptop]){justify-self:var(--justify-self--laptop-value)!important}:host([order--laptop]),::slotted([order--laptop]){order:var(--order--laptop-value)!important}}@media screen and (min-width: 1441px){:host([col-span--desktop]){grid-column:span var(--col-span--desktop-value) / span var(--col-span--desktop-value)!important}:host([justify-self--desktop]){justify-self:var(--justify-self--desktop-value)!important}:host([order--desktop]),::slotted([order--desktop]){order:var(--order--desktop-value)!important}:host([hidden--desktop]),::slotted([hidden--desktop]){display:none!important}:host([grow--desktop]){flex-grow:var(--grow--desktop-value)!important}:host([shrink--desktop]){flex-shrink:var(--shrink--desktop-value)!important}:host([basis--desktop]){flex-basis:var(--basis--desktop-value)!important}:host([align-self--desktop]){align-self:var(--align-self--desktop-value)!important}}", g = {};
2
+ function f(i) {
3
3
  const t = document.createElement(i), s = Object.getPrototypeOf(t);
4
4
  return Object.getOwnPropertyNames(s);
5
5
  }
6
- function d(i) {
6
+ function m(i) {
7
7
  const t = document.createElement(i), s = Object.getPrototypeOf(t);
8
8
  return Object.getOwnPropertyNames(s).map(
9
9
  (e) => e.toLowerCase()
10
10
  );
11
11
  }
12
- const h = new CSSStyleSheet();
13
- h.replaceSync(u);
14
- class p extends HTMLElement {
12
+ const d = new CSSStyleSheet();
13
+ d.replaceSync(c);
14
+ const k = typeof import.meta < "u" && typeof g < "u" && !0;
15
+ typeof window < "u" && (window.isComponentDebug = h);
16
+ function h() {
17
+ return k;
18
+ }
19
+ function v(i) {
20
+ h() && console.error(i);
21
+ }
22
+ typeof window < "u" && (window.isComponentDebug = h);
23
+ class u extends HTMLElement {
15
24
  static get observedAttributes() {
16
25
  return [
17
26
  "grow",
@@ -63,13 +72,13 @@ class p extends HTMLElement {
63
72
  }
64
73
  constructor(...t) {
65
74
  super(), this.shadowRoot || this.attachShadow({ mode: "open" }), this.shadowRoot.adoptedStyleSheets = [
66
- h,
75
+ d,
67
76
  ...t
68
77
  ];
69
78
  }
70
79
  attributeChangedCallback(t, s, e) {
71
80
  var o;
72
- if (p.observedAttributes.indexOf(t) !== -1)
81
+ if (u.observedAttributes.indexOf(t) !== -1)
73
82
  switch (t) {
74
83
  case "grow":
75
84
  case "grow--mobile":
@@ -97,7 +106,7 @@ class p extends HTMLElement {
97
106
  t,
98
107
  s,
99
108
  e,
100
- ((o = this.parentElement) == null ? void 0 : o.localName) === "px-grid" ? g : c
109
+ ((o = this.parentElement) == null ? void 0 : o.localName) === "px-grid" ? y : w
101
110
  );
102
111
  break;
103
112
  case "justify-self":
@@ -109,7 +118,7 @@ class p extends HTMLElement {
109
118
  t,
110
119
  s,
111
120
  e,
112
- f
121
+ A
113
122
  );
114
123
  break;
115
124
  case "col-span":
@@ -117,20 +126,22 @@ class p extends HTMLElement {
117
126
  case "col-span--tablet":
118
127
  case "col-span--laptop":
119
128
  case "col-span--desktop":
120
- this.updateProperties(t, s, e, m);
129
+ this.updateProperties(t, s, e, S);
121
130
  break;
122
131
  case "order":
123
132
  case "order--mobile":
124
133
  case "order--tablet":
125
134
  case "order--laptop":
126
135
  case "order--desktop":
127
- this.updateProperties(t, s, e, k);
136
+ this.updateProperties(t, s, e, $);
128
137
  break;
129
138
  }
130
139
  }
131
140
  updateProperties(t, s, e, o) {
132
141
  if (o && !this.checkName(o, e)) {
133
- console.error(`${e} is not a valid value for ${o}`);
142
+ v(
143
+ `${e} is not an allowed ${o} value for ${this.tagName.toLowerCase()}`
144
+ );
134
145
  return;
135
146
  }
136
147
  const a = t.indexOf("--") > -1, l = a ? t.split("--")[0] : t;
@@ -417,38 +428,44 @@ class p extends HTMLElement {
417
428
  this.setAttribute("order--desktop", t);
418
429
  }
419
430
  }
420
- class y extends p {
421
- constructor(...t) {
422
- super(...t), this.accessorExclusions = [], this.nativeName = Object.getPrototypeOf(this).constructor.nativeName, this.accessorExclusions = Object.getPrototypeOf(this).constructor.accessorExclusions || [];
423
- }
431
+ const b = class b extends u {
432
+ // nativeName: string;
424
433
  static get observedAttributes() {
425
434
  return [
426
435
  ...super.observedAttributes,
427
- ...d(this.nativeName)
436
+ ...m(this.nativeName)
428
437
  ];
429
438
  }
430
439
  attributeChangedCallback(t, s, e) {
431
440
  super.attributeChangedCallback(t, s, e), e === null ? this.$el.toggleAttribute(t) : this.$el.setAttribute(t, e);
432
441
  }
433
- connectedCallback() {
434
- for (const t of b(this.nativeName))
435
- if (!(t === "constructor" || this.accessorExclusions.includes(t)))
442
+ get ctor() {
443
+ return Object.getPrototypeOf(this).constructor;
444
+ }
445
+ constructor(...t) {
446
+ super(...t), this.ctor.supportedPropertyNames || (this.ctor.supportedPropertyNames = f(
447
+ this.ctor.nativeName
448
+ )), this.enhanceWithNativeProperties();
449
+ }
450
+ enhanceWithNativeProperties() {
451
+ var t;
452
+ for (const s of this.ctor.supportedPropertyNames)
453
+ if (!(s === "constructor" || (((t = this.ctor) == null ? void 0 : t.accessorExclusions) ?? []).includes(s)))
436
454
  try {
437
- Object.defineProperty(this, t, {
455
+ Object.defineProperty(this, s, {
438
456
  get() {
439
- return this.$el[t];
457
+ return this.$el[s];
440
458
  },
441
- set(s) {
442
- this.$el[t] !== s && (this.$el[t] = s);
459
+ set(e) {
460
+ this.$el[s] !== e && (this.$el[s] = e);
443
461
  }
444
462
  });
445
- } catch (s) {
446
- console.warn(`Could not create property ${t} for`, this.$el, s);
463
+ } catch (e) {
464
+ console.warn(`Could not create property ${s} for`, this.$el, e);
447
465
  }
448
- this.isInsideGridOrStack && (this.$el.style.display = "block", this.$el.style.height = "100%");
449
466
  }
450
467
  get $el() {
451
- return this.shadowRoot.querySelector(this.nativeName);
468
+ return this.shadowRoot.querySelector(this.ctor.nativeName);
452
469
  }
453
470
  _updateAttribute(t, s) {
454
471
  s ? this.setAttribute(t, s) : this.removeAttribute(t);
@@ -456,8 +473,15 @@ class y extends p {
456
473
  _updateBooleanAttribute(t, s) {
457
474
  s ? this.setAttribute(t, "") : this.removeAttribute(t);
458
475
  }
476
+ };
477
+ b.accessorExclusions = [];
478
+ let p = b;
479
+ class j extends p {
480
+ connectedCallback() {
481
+ this.isInsideGridOrStack && (this.$el.style.display = "block", this.$el.style.height = "100%");
482
+ }
459
483
  }
460
- const w = ["", "default", "none", "l"], c = [
484
+ const C = ["", "default", "none", "l"], w = [
461
485
  "",
462
486
  "default",
463
487
  "auto",
@@ -466,21 +490,21 @@ const w = ["", "default", "none", "l"], c = [
466
490
  "center",
467
491
  "baseline",
468
492
  "stretch"
469
- ], g = [
493
+ ], y = [
470
494
  "",
471
495
  "default",
472
496
  "start",
473
497
  "end",
474
498
  "center",
475
499
  "stretch"
476
- ], f = [
500
+ ], A = [
477
501
  "",
478
502
  "default",
479
503
  "start",
480
504
  "end",
481
505
  "center",
482
506
  "stretch"
483
- ], m = [
507
+ ], S = [
484
508
  "",
485
509
  "1",
486
510
  "2",
@@ -494,7 +518,7 @@ const w = ["", "default", "none", "l"], c = [
494
518
  "10",
495
519
  "11",
496
520
  "12"
497
- ], k = [
521
+ ], $ = [
498
522
  "",
499
523
  "-1",
500
524
  "0",
@@ -510,7 +534,7 @@ const w = ["", "default", "none", "l"], c = [
510
534
  "10",
511
535
  "11",
512
536
  "12"
513
- ], A = [
537
+ ], L = [
514
538
  "",
515
539
  "default",
516
540
  "auto",
@@ -518,7 +542,7 @@ const w = ["", "default", "none", "l"], c = [
518
542
  "end",
519
543
  "center",
520
544
  "stretch"
521
- ], S = [
545
+ ], M = [
522
546
  "",
523
547
  "default",
524
548
  "inherit",
@@ -534,7 +558,7 @@ const w = ["", "default", "none", "l"], c = [
534
558
  "heading-l",
535
559
  "heading-m",
536
560
  "heading-s"
537
- ], $ = [
561
+ ], N = [
538
562
  "",
539
563
  "default",
540
564
  "inherit",
@@ -549,7 +573,7 @@ const w = ["", "default", "none", "l"], c = [
549
573
  "state-hover",
550
574
  "state-active",
551
575
  "state-disabled"
552
- ], x = [
576
+ ], D = [
553
577
  "",
554
578
  "default",
555
579
  "inherit",
@@ -557,11 +581,11 @@ const w = ["", "default", "none", "l"], c = [
557
581
  "title",
558
582
  "title-large",
559
583
  "subtitle"
560
- ], v = ["Xs", "S", "M", "L", "Xl"], j = [
584
+ ], x = ["Xs", "S", "M", "L", "Xl"], T = [
561
585
  "",
562
586
  "default",
563
- ...v.map((i) => i.toLowerCase())
564
- ], C = ["", "default", "left", "center", "right"], L = [
587
+ ...x.map((i) => i.toLowerCase())
588
+ ], O = ["", "default", "left", "center", "right"], _ = [
565
589
  "",
566
590
  "none",
567
591
  "3xs",
@@ -571,7 +595,7 @@ const w = ["", "default", "none", "l"], c = [
571
595
  "m",
572
596
  "l",
573
597
  "xl"
574
- ], M = ["", "none", "s", "m", "l"], T = ["", "none", "main", "pill"], N = [
598
+ ], P = ["", "none", "s", "m", "l"], q = ["", "none", "main", "pill"], G = [
575
599
  "none",
576
600
  "main",
577
601
  "brand",
@@ -582,7 +606,7 @@ const w = ["", "default", "none", "l"], c = [
582
606
  "purpose-warning",
583
607
  "purpose-error",
584
608
  "purpose-unlimited"
585
- ], D = [
609
+ ], E = [
586
610
  "",
587
611
  "all",
588
612
  "top",
@@ -591,7 +615,7 @@ const w = ["", "default", "none", "l"], c = [
591
615
  "left",
592
616
  "block",
593
617
  "inline"
594
- ], O = [
618
+ ], B = [
595
619
  "",
596
620
  "none",
597
621
  "surface-light",
@@ -619,7 +643,7 @@ const w = ["", "default", "none", "l"], c = [
619
643
  "purpose-eco",
620
644
  "purpose-notification",
621
645
  "footer"
622
- ], q = ["", "cover", "contain", "default"], E = ["", "none", "s", "m", "l", "xl"], G = [
646
+ ], V = ["", "cover", "contain", "default"], R = ["", "none", "s", "m", "l", "xl"], z = [
623
647
  "",
624
648
  "default",
625
649
  "title-4xl",
@@ -630,7 +654,7 @@ const w = ["", "default", "none", "l"], c = [
630
654
  "title-m",
631
655
  "title-s",
632
656
  "subtitle"
633
- ], P = [
657
+ ], H = [
634
658
  "",
635
659
  "purple-top-red",
636
660
  "purple-top-magenta",
@@ -680,7 +704,7 @@ const w = ["", "default", "none", "l"], c = [
680
704
  "color-bottom-right-blue",
681
705
  "color-bottom-right-turquoise",
682
706
  "color-bottom-right-green"
683
- ], _ = [
707
+ ], I = [
684
708
  "none",
685
709
  "2xs",
686
710
  "xs",
@@ -690,14 +714,14 @@ const w = ["", "default", "none", "l"], c = [
690
714
  "heading-to-subtitle",
691
715
  "heading-to-content",
692
716
  "page-layout-between-sections"
693
- ], B = [
717
+ ], W = [
694
718
  "",
695
719
  "all",
696
720
  "top",
697
721
  "right",
698
722
  "bottom",
699
723
  "left"
700
- ], R = [
724
+ ], X = [
701
725
  "",
702
726
  "default",
703
727
  "xs",
@@ -706,20 +730,20 @@ const w = ["", "default", "none", "l"], c = [
706
730
  "l",
707
731
  "xl"
708
732
  ];
709
- function V(i) {
733
+ function F(i) {
710
734
  const t = document.createElement("style");
711
735
  t.innerHTML = i, document.head.appendChild(t);
712
736
  }
713
- function z(i) {
737
+ function U(i) {
714
738
  return typeof i == "string" && (i === "false" || i === "0" || i === "null") || typeof i == "boolean" && !i;
715
739
  }
716
- function H() {
740
+ function J() {
717
741
  return window.matchMedia("only screen and (min-width: 768px)").matches ? "tablet" : window.matchMedia("only screen and (min-width: 1025px)").matches ? "laptop" : "mobile";
718
742
  }
719
- function I(i, t) {
743
+ function K(i, t) {
720
744
  return i.includes(t);
721
745
  }
722
- function F(i, t, s = !0) {
746
+ function Q(i, t, s = !0) {
723
747
  var e;
724
748
  if ([
725
749
  "aria-label",
@@ -762,7 +786,7 @@ function F(i, t, s = !0) {
762
786
  t.setAttribute("id", o), i.setAttribute("aria-labelledby", o);
763
787
  }
764
788
  }
765
- function X(i, t, s, e = "", o) {
789
+ function Y(i, t, s, e = "", o) {
766
790
  const a = new CSSStyleSheet(), l = s.reduce(
767
791
  (n, r) => n + `
768
792
  ${t(i, r)} {
@@ -808,7 +832,7 @@ function X(i, t, s, e = "", o) {
808
832
  );
809
833
  return a.replaceSync(l), a;
810
834
  }
811
- class J {
835
+ class Z {
812
836
  constructor(t, s, e, o) {
813
837
  this.component = t, this.attributeName = s, this.cssVariable = o, this.attributeNameMobile = `${this.attributeName}--mobile`, this.attributeNameTablet = `${this.attributeName}--tablet`, this.attributeNameLaptop = `${this.attributeName}--laptop`, this.attributeNameDesktop = `${this.attributeName}--desktop`, this._attributeValue = e, Object.defineProperty(
814
838
  this.component,
@@ -889,41 +913,44 @@ class J {
889
913
  }
890
914
  }
891
915
  export {
892
- J as AttributeBreakpointHandlerDelegate,
893
- y as PxElement,
894
- p as WithExtraAttributes,
895
- V as addGlobalStylesheet,
896
- R as assetContainerImgWidthValues,
897
- O as backgroundColorValues,
898
- q as backgroundSizeValues,
899
- N as borderColorValues,
900
- T as borderRadiusValues,
901
- D as borderSideValues,
902
- M as borderValues,
903
- E as boxShadowValues,
904
- I as checkName,
905
- $ as colorValues,
906
- g as cssGridAlignSelfValues,
907
- m as cssGridColSpanValues,
908
- f as cssGridJustifySelfValues,
909
- k as cssGridOrderValues,
910
- A as cssGridPlaceSelfValues,
911
- X as cssTokenBreakpoints,
912
- c as flexboxAlignSelfValues,
913
- S as fontsizeValues,
914
- x as fontweightValues,
915
- _ as gapValues,
916
- d as getSupportedAttributeNames,
917
- b as getSupportedPropertyNames,
918
- H as getViewportFormat,
919
- P as gradientValues,
920
- w as gridGapValues,
921
- G as headingValues,
922
- v as iconSizeValues,
923
- j as iconSizeValuesKC,
924
- z as isFalsy,
925
- B as noBorderRadiusValues,
926
- L as paddingValues,
927
- C as textalignValues,
928
- F as transferAccessibilityAttributes
916
+ Z as AttributeBreakpointHandlerDelegate,
917
+ p as PxElement,
918
+ j as VerticallyExtendedElement,
919
+ u as WithExtraAttributes,
920
+ F as addGlobalStylesheet,
921
+ X as assetContainerImgWidthValues,
922
+ B as backgroundColorValues,
923
+ V as backgroundSizeValues,
924
+ G as borderColorValues,
925
+ q as borderRadiusValues,
926
+ E as borderSideValues,
927
+ P as borderValues,
928
+ R as boxShadowValues,
929
+ K as checkName,
930
+ N as colorValues,
931
+ y as cssGridAlignSelfValues,
932
+ S as cssGridColSpanValues,
933
+ A as cssGridJustifySelfValues,
934
+ $ as cssGridOrderValues,
935
+ L as cssGridPlaceSelfValues,
936
+ Y as cssTokenBreakpoints,
937
+ w as flexboxAlignSelfValues,
938
+ M as fontsizeValues,
939
+ D as fontweightValues,
940
+ I as gapValues,
941
+ m as getSupportedAttributeNames,
942
+ f as getSupportedPropertyNames,
943
+ J as getViewportFormat,
944
+ H as gradientValues,
945
+ C as gridGapValues,
946
+ z as headingValues,
947
+ x as iconSizeValues,
948
+ T as iconSizeValuesKC,
949
+ h as isComponentDebug,
950
+ U as isFalsy,
951
+ v as log,
952
+ W as noBorderRadiusValues,
953
+ _ as paddingValues,
954
+ O as textalignValues,
955
+ Q as transferAccessibilityAttributes
929
956
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@proximus/lavender-common",
3
- "version": "1.4.1",
3
+ "version": "1.4.3-alpha.1",
4
4
  "description": "",
5
5
  "main": "dist/index.es.js",
6
6
  "types": "dist/index.d.ts",