@proximus/lavender-common 2.0.0-alpha.16 → 2.0.0-alpha.160

package/dist/breakpoints.d.ts

@@ -1,4 +1,4 @@
-export declare function cssTokenBreakpoints(attributeName: string, selector: (attributeName: string, attribute: string, device?: 'mobile' | 'tablet' | 'laptop' | 'desktop') => string, attributeValues: string[], cssPropertyPrefix?: string, generatedCssPropertyName?: string): CSSStyleSheet;
+export declare function cssTokenBreakpoints(attributeName: string, selector: (attributeName: string, attribute: string, device?: 'mobile' | 'tablet' | 'laptop' | 'desktop') => string, attributeValues: string[], cssPropertyPrefix?: string, generatedCssPropertyName?: string, selectorAttributeName?: string): CSSStyleSheet;
 export declare class AttributeBreakpointHandlerDelegate {
     private readonly component;
     private readonly attributeName;

package/dist/common.d.ts

@@ -11,6 +11,14 @@ export declare function isComponentDebug(): boolean;
  * Usage: log('message')
  */
 export declare function log(message: string): void;
+export declare class WrappedInteractiveStateController {
+    #private;
+    constructor(host: HTMLElement, interactiveElement: HTMLElement, canSetInteractiveState: () => boolean);
+    clearInteractiveState: () => void;
+    connect(): void;
+    disconnect(): void;
+    setInteractiveState(state: 'hover' | null): void;
+}
 export declare class WithExtraAttributes extends HTMLElement {
     static get observedAttributes(): string[];
     constructor(...adoptedStylesheets: CSSStyleSheet[]);
@@ -117,7 +125,7 @@ export declare class VerticallyExtendedElement<HTML_TYPE extends Element> extend
     connectedCallback(): void;
 }
 export declare const gridGapValues: string[];
-export declare const flexboxAlignSelfValues: readonly ["", "default", "auto", "flex-start", "flex-end", "center", "baseline", "stretch"];
+export declare const flexboxAlignSelfValues: readonly ["", "default", "auto", "flex-start", "start", "flex-end", "end", "center", "baseline", "stretch"];
 export declare const cssGridAlignSelfValues: readonly ["", "default", "start", "end", "center", "stretch"];
 export declare const cssGridJustifySelfValues: readonly ["", "default", "start", "end", "center", "stretch"];
 export declare const cssGridColSpanValues: string[];
@@ -147,4 +155,5 @@ export declare function addGlobalStylesheet(inlineStyles: string): void;
 export declare function isFalsy(value: string | boolean): boolean;
 export declare function getViewportFormat(): "mobile" | "tablet" | "laptop";
 export declare function checkName(values: string[], value: string): boolean;
+export declare const accessibilityAttributes: string[];
 export declare function transferAccessibilityAttributes(sourceElement: HTMLElement, targetElement: HTMLElement, applyLabelledBy?: boolean): void;

package/dist/index.es.js

@@ -1,26 +1,101 @@
-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 = {};
-function f(i) {
+var S = (i) => {
+  throw TypeError(i);
+};
+var $ = (i, t, s) => t.has(i) || S("Cannot " + s);
+var a = (i, t, s) => ($(i, t, "read from private field"), s ? s.call(i) : t.get(i)), d = (i, t, s) => t.has(i) ? S("Cannot add the same private member more than once") : t instanceof WeakSet ? t.add(i) : t.set(i, s), p = (i, t, s, e) => ($(i, t, "write to private field"), e ? e.call(i, s) : t.set(i, s), s);
+const M = ":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-self-value)}:host([order]),::slotted([order]){order:var(--order-value)}:host([sticky-top]),:host([sticky-bottom]){z-index:5}:host([sticky-top]){position:sticky;top:0}:host([sticky-bottom]){position:sticky;bottom:0}: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}:host([word-break-all]){word-break:break-all}@media screen and (max-width: 47.938rem){: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}}:host([word-break-all--mobile]){word-break:break-all!important}@media screen and (min-width: 48rem) and (max-width: 64rem){: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}}:host([word-break-all--tablet]){word-break:break-all!important}@media screen and (min-width: 64.0625rem){: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: 64.0625rem){: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}}:host([word-break-all--laptop]){word-break:break-all!important}@media screen and (min-width: 90.0625rem){: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}:host([word-break-all--desktop]){word-break:break-all!important}}", x = { DEV: !0, VITE_COMPONENT_DEBUG: "true" };
+function N(i) {
   const t = document.createElement(i), s = Object.getPrototypeOf(t);
   return Object.getOwnPropertyNames(s);
 }
-function m(i) {
+function D(i) {
   const t = document.createElement(i), s = Object.getPrototypeOf(t);
   return Object.getOwnPropertyNames(s).map(
     (e) => e.toLowerCase()
   );
 }
-const d = new CSSStyleSheet();
-d.replaceSync(c);
-const k = typeof import.meta < "u" && typeof g < "u" && !0;
-typeof window < "u" && (window.isComponentDebug = h);
-function h() {
-  return k;
+const j = new CSSStyleSheet();
+j.replaceSync(M);
+const c = typeof import.meta < "u" && typeof x < "u" ? x : void 0, T = (c == null ? void 0 : c.VITE_COMPONENT_DEBUG) === "true" || (c == null ? void 0 : c.DEV) === !0;
+typeof window < "u" && (window.isComponentDebug = w);
+function w() {
+  return T;
+}
+function E(i) {
+  w() && console.error(i);
 }
-function v(i) {
-  h() && console.error(i);
+var g, n, f, h, u, k, C;
+class U {
+  constructor(t, s, e) {
+    d(this, k);
+    d(this, g);
+    d(this, n);
+    d(this, f);
+    d(this, h);
+    d(this, u);
+    p(this, h, !1), p(this, u, () => {
+      this.setInteractiveState("hover");
+    }), this.clearInteractiveState = () => {
+      this.setInteractiveState(null);
+    }, p(this, g, t), p(this, n, s), p(this, f, e);
+  }
+  connect() {
+    a(this, h) || (a(this, n).addEventListener(
+      "pointerenter",
+      a(this, u)
+    ), a(this, n).addEventListener(
+      "pointerleave",
+      this.clearInteractiveState
+    ), a(this, n).addEventListener(
+      "focusin",
+      a(this, u)
+    ), a(this, n).addEventListener(
+      "focusout",
+      this.clearInteractiveState
+    ), p(this, h, !0));
+  }
+  disconnect() {
+    a(this, h) && (a(this, n).removeEventListener(
+      "pointerenter",
+      a(this, u)
+    ), a(this, n).removeEventListener(
+      "pointerleave",
+      this.clearInteractiveState
+    ), a(this, n).removeEventListener(
+      "focusin",
+      a(this, u)
+    ), a(this, n).removeEventListener(
+      "focusout",
+      this.clearInteractiveState
+    ), p(this, h, !1));
+  }
+  setInteractiveState(t) {
+    const s = a(this, k, C);
+    if (!a(this, f).call(this)) {
+      s.forEach((e) => e.removeAttribute("interactive-state"));
+      return;
+    }
+    s.forEach((e) => {
+      t ? e.setAttribute("interactive-state", t) : e.removeAttribute("interactive-state");
+    });
+  }
 }
-typeof window < "u" && (window.isComponentDebug = h);
-class u extends HTMLElement {
+g = new WeakMap(), n = new WeakMap(), f = new WeakMap(), h = new WeakMap(), u = new WeakMap(), k = new WeakSet(), C = function() {
+  return Array.from(a(this, g).querySelectorAll("*")).filter(
+    O
+  );
+};
+function O(i) {
+  var s;
+  if (i.hasAttribute("interactive-state"))
+    return !0;
+  const t = customElements.get(
+    i.localName
+  );
+  return ((s = t == null ? void 0 : t.observedAttributes) == null ? void 0 : s.includes("interactive-state")) ?? !1;
+}
+typeof window < "u" && (window.isComponentDebug = w);
+class y extends HTMLElement {
   static get observedAttributes() {
     return [
       "grow",
@@ -67,18 +142,25 @@ class u extends HTMLElement {
       "order--mobile",
       "order--tablet",
       "order--laptop",
-      "order--desktop"
+      "order--desktop",
+      "sticky-top",
+      "sticky-bottom",
+      "word-break-all",
+      "word-break-all--mobile",
+      "word-break-all--tablet",
+      "word-break-all--laptop",
+      "word-break-all--desktop"
     ];
   }
   constructor(...t) {
     super(), this.shadowRoot || this.attachShadow({ mode: "open" }), this.shadowRoot.adoptedStyleSheets = [
-      d,
+      j,
       ...t
     ];
   }
   attributeChangedCallback(t, s, e) {
     var o;
-    if (u.observedAttributes.indexOf(t) !== -1)
+    if (y.observedAttributes.indexOf(t) !== -1)
       switch (t) {
         case "grow":
         case "grow--mobile":
@@ -106,7 +188,7 @@ class u extends HTMLElement {
             t,
             s,
             e,
-            ((o = this.parentElement) == null ? void 0 : o.localName) === "px-grid" ? y : w
+            ((o = this.parentElement) == null ? void 0 : o.localName) === "px-grid" ? I : _
           );
           break;
         case "justify-self":
@@ -118,7 +200,7 @@ class u extends HTMLElement {
             t,
             s,
             e,
-            A
+            P
           );
           break;
         case "col-span":
@@ -126,40 +208,37 @@ class u extends HTMLElement {
         case "col-span--tablet":
         case "col-span--laptop":
         case "col-span--desktop":
-          this.updateProperties(t, s, e, S);
+          this.updateProperties(t, s, e, G);
           break;
         case "order":
         case "order--mobile":
         case "order--tablet":
         case "order--laptop":
         case "order--desktop":
-          this.updateProperties(t, s, e, $);
+          this.updateProperties(t, s, e, q);
           break;
       }
   }
   updateProperties(t, s, e, o) {
-    if (o && !this.checkName(o, e)) {
-      v(
-        `${e} is not an allowed ${o} value for ${this.tagName.toLowerCase()}`
-      );
-      return;
-    }
-    const a = t.indexOf("--") > -1, l = a ? t.split("--")[0] : t;
-    if (!a)
+    o && (this.checkName(o, e) || E(
+      `"${e}" is not an allowed ${t} value for ${this.tagName.toLowerCase()}. Allowed values are: "${o.join('", "')}".`
+    ));
+    const l = t.indexOf("--") > -1, b = l ? t.split("--")[0] : t;
+    if (!l)
       this.style.setProperty(
-        `--${l}-value`,
+        `--${b}-value`,
         s
       ), this.style.setProperty(
-        `--${l}-value`,
+        `--${b}-value`,
         e
       );
     else {
-      const n = t.split("--")[1];
+      const m = t.split("--")[1];
       this.style.setProperty(
-        `--${l}--${n}-value`,
+        `--${b}--${m}-value`,
         s
       ), this.style.setProperty(
-        `--${l}--${n}-value`,
+        `--${b}--${m}-value`,
         e
       );
     }
@@ -428,12 +507,12 @@ class u extends HTMLElement {
     this.setAttribute("order--desktop", t);
   }
 }
-const b = class b extends u {
+const A = class A extends y {
   // nativeName: string;
   static get observedAttributes() {
     return [
       ...super.observedAttributes,
-      ...m(this.nativeName)
+      ...D(this.nativeName)
     ];
   }
   attributeChangedCallback(t, s, e) {
@@ -443,7 +522,7 @@ const b = class b extends u {
     return Object.getPrototypeOf(this).constructor;
   }
   constructor(...t) {
-    super(...t), this.ctor.supportedPropertyNames || (this.ctor.supportedPropertyNames = f(
+    super(...t), this.ctor.supportedPropertyNames || (this.ctor.supportedPropertyNames = N(
       this.ctor.nativeName
     )), this.enhanceWithNativeProperties();
   }
@@ -474,37 +553,39 @@ const b = class b extends u {
     s ? this.setAttribute(t, "") : this.removeAttribute(t);
   }
 };
-b.accessorExclusions = [];
-let p = b;
-class j extends p {
+A.accessorExclusions = [];
+let v = A;
+class V extends v {
   connectedCallback() {
     this.isInsideGridOrStack && (this.$el.style.display = "block", this.$el.style.height = "100%");
   }
 }
-const C = ["", "default", "none", "l"], w = [
+const W = ["", "default", "none", "l"], _ = [
   "",
   "default",
   "auto",
   "flex-start",
+  "start",
   "flex-end",
+  "end",
   "center",
   "baseline",
   "stretch"
-], y = [
+], I = [
   "",
   "default",
   "start",
   "end",
   "center",
   "stretch"
-], A = [
+], P = [
   "",
   "default",
   "start",
   "end",
   "center",
   "stretch"
-], S = [
+], G = [
   "",
   "1",
   "2",
@@ -518,7 +599,7 @@ const C = ["", "default", "none", "l"], w = [
   "10",
   "11",
   "12"
-], $ = [
+], q = [
   "",
   "-1",
   "0",
@@ -534,7 +615,7 @@ const C = ["", "default", "none", "l"], w = [
   "10",
   "11",
   "12"
-], L = [
+], H = [
   "",
   "default",
   "auto",
@@ -542,7 +623,7 @@ const C = ["", "default", "none", "l"], w = [
   "end",
   "center",
   "stretch"
-], M = [
+], X = [
   "",
   "default",
   "inherit",
@@ -558,7 +639,7 @@ const C = ["", "default", "none", "l"], w = [
   "heading-l",
   "heading-m",
   "heading-s"
-], N = [
+], F = [
   "",
   "default",
   "inherit",
@@ -573,7 +654,7 @@ const C = ["", "default", "none", "l"], w = [
   "state-hover",
   "state-active",
   "state-disabled"
-], D = [
+], J = [
   "",
   "default",
   "inherit",
@@ -581,11 +662,11 @@ const C = ["", "default", "none", "l"], w = [
   "title",
   "title-large",
   "subtitle"
-], x = ["Xs", "S", "M", "L", "Xl"], T = [
+], B = ["Xs", "S", "M", "L", "Xl"], K = [
   "",
   "default",
-  ...x.map((i) => i.toLowerCase())
-], O = ["", "default", "left", "center", "right"], _ = [
+  ...B.map((i) => i.toLowerCase())
+], Q = ["", "default", "left", "center", "right"], Y = [
   "",
   "none",
   "3xs",
@@ -595,7 +676,7 @@ const C = ["", "default", "none", "l"], w = [
   "m",
   "l",
   "xl"
-], P = ["", "none", "s", "m", "l"], q = ["", "none", "main", "pill"], G = [
+], Z = ["", "none", "s", "m", "l"], tt = ["", "none", "main", "pill"], et = [
   "none",
   "main",
   "brand",
@@ -606,7 +687,7 @@ const C = ["", "default", "none", "l"], w = [
   "purpose-warning",
   "purpose-error",
   "purpose-unlimited"
-], E = [
+], st = [
   "",
   "all",
   "top",
@@ -615,7 +696,7 @@ const C = ["", "default", "none", "l"], w = [
   "left",
   "block",
   "inline"
-], B = [
+], it = [
   "",
   "none",
   "surface-light",
@@ -642,8 +723,8 @@ const C = ["", "default", "none", "l"], w = [
   "purpose-info",
   "purpose-eco",
   "purpose-notification",
-  "footer"
-], V = ["", "cover", "contain", "default"], R = ["", "none", "s", "m", "l", "xl"], z = [
+  "footer-sitemap"
+], ot = ["", "cover", "contain", "default"], rt = ["", "none", "s", "m", "l", "xl"], at = [
   "",
   "default",
   "title-4xl",
@@ -654,7 +735,7 @@ const C = ["", "default", "none", "l"], w = [
   "title-m",
   "title-s",
   "subtitle"
-], H = [
+], lt = [
   "",
   "purple-top-red",
   "purple-top-magenta",
@@ -704,7 +785,7 @@ const C = ["", "default", "none", "l"], w = [
   "color-bottom-right-blue",
   "color-bottom-right-turquoise",
   "color-bottom-right-green"
-], I = [
+], nt = [
   "none",
   "2xs",
   "xs",
@@ -714,14 +795,14 @@ const C = ["", "default", "none", "l"], w = [
   "heading-to-subtitle",
   "heading-to-content",
   "page-layout-between-sections"
-], W = [
+], pt = [
   "",
   "all",
   "top",
   "right",
   "bottom",
   "left"
-], X = [
+], ht = [
   "",
   "default",
   "xs",
@@ -730,117 +811,118 @@ const C = ["", "default", "none", "l"], w = [
   "l",
   "xl"
 ];
-function F(i) {
+function ut(i) {
   const t = document.createElement("style");
   t.innerHTML = i, document.head.appendChild(t);
 }
-function U(i) {
+function bt(i) {
   return typeof i == "string" && (i === "false" || i === "0" || i === "null") || typeof i == "boolean" && !i;
 }
-function J() {
+function dt() {
   return window.matchMedia("only screen and (min-width: 768px)").matches ? "tablet" : window.matchMedia("only screen and (min-width: 1025px)").matches ? "laptop" : "mobile";
 }
-function K(i, t) {
+function ct(i, t) {
   return i.includes(t);
 }
-function Q(i, t, s = !0) {
+const z = [
+  "aria-label",
+  "aria-labelledby",
+  "aria-describedby",
+  "aria-controls",
+  "aria-expanded",
+  "aria-haspopup",
+  "aria-pressed",
+  "aria-selected",
+  "aria-required",
+  "aria-disabled",
+  "aria-live",
+  "aria-atomic",
+  "aria-relevant",
+  "aria-orientation",
+  "aria-valuenow",
+  "aria-valuetext",
+  "aria-valuemin",
+  "aria-valuemax",
+  "aria-details",
+  "aria-modal",
+  "aria-autocomplete",
+  "aria-activedescendant",
+  "aria-colcount",
+  "aria-colindex",
+  "aria-colspan",
+  "aria-rowcount",
+  "aria-rowindex",
+  "aria-rowspan",
+  "aria-keyshortcuts",
+  "aria-placeholder",
+  "aria-invalid",
+  "aria-busy",
+  "aria-owns"
+];
+function gt(i, t, s = !1) {
   var e;
-  if ([
-    "aria-label",
-    "aria-labelledby",
-    "aria-describedby",
-    "aria-controls",
-    "aria-expanded",
-    "aria-haspopup",
-    "aria-pressed",
-    "aria-selected",
-    "aria-required",
-    "aria-disabled",
-    "aria-live",
-    "aria-atomic",
-    "aria-relevant",
-    "aria-orientation",
-    "aria-valuenow",
-    "aria-valuetext",
-    "aria-valuemin",
-    "aria-valuemax",
-    "aria-details",
-    "aria-modal",
-    "aria-autocomplete",
-    "aria-activedescendant",
-    "aria-colcount",
-    "aria-colindex",
-    "aria-colspan",
-    "aria-rowcount",
-    "aria-rowindex",
-    "aria-rowspan",
-    "aria-keyshortcuts",
-    "aria-placeholder",
-    "aria-invalid",
-    "aria-busy",
-    "aria-owns"
-  ].forEach((o) => {
+  if (z.forEach((o) => {
     i.getAttribute(o) && (t.setAttribute(o, i.getAttribute(o)), i.removeAttribute(o));
-  }), s) {
+  }), s && !i.getAttribute("aria-labelledby")) {
     const o = `px-${((e = t.localName) == null ? void 0 : e.toLowerCase()) ?? "component"}-${Math.random().toString(36).substring(2, 15)}`;
     t.setAttribute("id", o), i.setAttribute("aria-labelledby", o);
   }
 }
-function Y(i, t, s, e = "", o) {
-  const a = new CSSStyleSheet(), l = s.reduce(
-    (n, r) => n + `
-  ${t(i, r)} {
+function ft(i, t, s, e = "", o, l = i) {
+  const b = new CSSStyleSheet(), m = s.reduce(
+    (L, r) => L + `
+  ${t(l, r)} {
     ${i}: var(--${e}-${r}-desktop);
     ${o ? `${o}:var(--${e}-${r}-desktop)` : ""}
   }
   /* Mobile only - max 767px */
-  @media only screen and (max-width: 47.938em) {
-    ${t(i, r)} {
+  @media only screen and (max-width: 47.938rem) {
+    ${t(l, r)} {
       ${i}: var(--${e}-${r}-mobile);
       ${o ? `${o}: var(--${e}-${r}-mobile)` : ""}
     }
   }
-  ${t(i, r, "mobile")} {
+  ${t(l, r, "mobile")} {
  /* Mobile only - max 767px */
-  @media only screen and (max-width: 47.938em) {
+  @media only screen and (max-width: 47.938rem) {
       ${i}: var(--${e}-${r}-mobile) !important;
       ${o ? `${o}: var(--${e}-${r}-mobile)` : ""}
     }
   }
-  ${t(i, r, "tablet")} {
+  ${t(l, r, "tablet")} {
   /* Tablet - min 768px max 1024px */
-  @media only screen and (min-width: 48em) and (max-width: 64em) {
+  @media only screen and (min-width: 48rem) and (max-width: 64rem) {
       ${i}: var(--${e}-${r}-desktop) !important;
       ${o ? `${o}: var(--${e}-${r}-desktop)` : ""}
     }
   }
-  ${t(i, r, "laptop")} {
+  ${t(l, r, "laptop")} {
   /* Laptop - 1025px*/
-  @media only screen and (min-width: 64.0625em) {
+  @media only screen and (min-width: 64.0625rem) {
       ${i}: var(--${e}-${r}-desktop) !important;
       ${o ? `${o}: var(--${e}-${r}-desktop)` : ""}
     }
   }
-  ${t(i, r, "desktop")} {
+  ${t(l, r, "desktop")} {
   /* Desktop - 1025px*/
-  @media only screen and (min-width: 64.0625em) {
+  @media only screen and (min-width: 64.0625rem) {
       ${i}: var(--${e}-${r}-desktop) !important;
       ${o ? `${o}: var(--${e}-${r}-desktop)` : ""}
     }
   }`,
     ""
   );
-  return a.replaceSync(l), a;
+  return b.replaceSync(m), b;
 }
-class Z {
+class mt {
   constructor(t, s, e, o) {
     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(
       this.component,
       this.toCamelCase(this.attributeName),
       {
         get: () => this.component.getAttribute(this.attributeName),
-        set: (a) => {
-          this.component.setAttribute(this.attributeName, a);
+        set: (l) => {
+          this.component.setAttribute(this.attributeName, l);
         }
       }
     );
@@ -899,12 +981,12 @@ class Z {
       o,
       !1
     );
-    const a = this.component.getAttribute(
+    const l = this.component.getAttribute(
       this.attributeNameDesktop
     );
-    a && this.setCSSProperty(
+    l && this.setCSSProperty(
       this.attributeNameDesktop,
-      a,
+      l,
       !1
     );
   }
@@ -913,44 +995,46 @@ class Z {
   }
 }
 export {
-  Z as AttributeBreakpointHandlerDelegate,
-  p as PxElement,
-  j as VerticallyExtendedElement,
-  u as WithExtraAttributes,
-  F as addGlobalStylesheet,
-  X as assetContainerImgWidthValues,
-  B as backgroundColorValues,
-  V as backgroundSizeValues,
-  G as borderColorValues,
-  q as borderRadiusValues,
-  E as borderSideValues,
-  P as borderValues,
-  R as boxShadowValues,
-  K as checkName,
-  N as colorValues,
-  y as cssGridAlignSelfValues,
-  S as cssGridColSpanValues,
-  A as cssGridJustifySelfValues,
-  $ as cssGridOrderValues,
-  L as cssGridPlaceSelfValues,
-  Y as cssTokenBreakpoints,
-  w as flexboxAlignSelfValues,
-  M as fontsizeValues,
-  D as fontweightValues,
-  I as gapValues,
-  m as getSupportedAttributeNames,
-  f as getSupportedPropertyNames,
-  J as getViewportFormat,
-  H as gradientValues,
-  C as gridGapValues,
-  z as headingValues,
-  x as iconSizeValues,
-  T as iconSizeValuesKC,
-  h as isComponentDebug,
-  U as isFalsy,
-  v as log,
-  W as noBorderRadiusValues,
-  _ as paddingValues,
-  O as textalignValues,
-  Q as transferAccessibilityAttributes
+  mt as AttributeBreakpointHandlerDelegate,
+  v as PxElement,
+  V as VerticallyExtendedElement,
+  y as WithExtraAttributes,
+  U as WrappedInteractiveStateController,
+  z as accessibilityAttributes,
+  ut as addGlobalStylesheet,
+  ht as assetContainerImgWidthValues,
+  it as backgroundColorValues,
+  ot as backgroundSizeValues,
+  et as borderColorValues,
+  tt as borderRadiusValues,
+  st as borderSideValues,
+  Z as borderValues,
+  rt as boxShadowValues,
+  ct as checkName,
+  F as colorValues,
+  I as cssGridAlignSelfValues,
+  G as cssGridColSpanValues,
+  P as cssGridJustifySelfValues,
+  q as cssGridOrderValues,
+  H as cssGridPlaceSelfValues,
+  ft as cssTokenBreakpoints,
+  _ as flexboxAlignSelfValues,
+  X as fontsizeValues,
+  J as fontweightValues,
+  nt as gapValues,
+  D as getSupportedAttributeNames,
+  N as getSupportedPropertyNames,
+  dt as getViewportFormat,
+  lt as gradientValues,
+  W as gridGapValues,
+  at as headingValues,
+  B as iconSizeValues,
+  K as iconSizeValuesKC,
+  w as isComponentDebug,
+  bt as isFalsy,
+  E as log,
+  pt as noBorderRadiusValues,
+  Y as paddingValues,
+  Q as textalignValues,
+  gt as transferAccessibilityAttributes
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@proximus/lavender-common",
-  "version": "2.0.0-alpha.16",
+  "version": "2.0.0-alpha.160",
   "description": "",
   "main": "dist/index.es.js",
   "types": "dist/index.d.ts",