@proximus/lavender-carousel 2.0.0-alpha.1 → 2.0.0-alpha.2

package/dist/index.es.js

@@ -1,11 +1,11 @@
 var q = (r) => {
   throw TypeError(r);
 };
-var W = (r, t, e) => t.has(r) || q("Cannot " + e);
-var d = (r, t, e) => (W(r, t, "read from private field"), e ? e.call(r) : t.get(r)), m = (r, t, e) => t.has(r) ? q("Cannot add the same private member more than once") : t instanceof WeakSet ? t.add(r) : t.set(r, e), C = (r, t, e, i) => (W(r, t, "write to private field"), i ? i.call(r, e) : t.set(r, e), e);
-import { WithExtraAttributes as T, AttributeBreakpointHandlerDelegate as F, gapValues as _, checkName as rt, backgroundColorValues as ot, PxElement as st, transferAccessibilityAttributes as at, iconSizeValuesKC as nt, cssTokenBreakpoints as lt } from "@proximus/lavender-common";
-const ct = ":host{display:block}:host *{box-sizing:border-box}.carousel{overflow:hidden;display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;-webkit-overflow-scrolling:touch;gap:var(--px-spacing-default-desktop)}@media only screen and (max-width: 768px){.carousel{gap:var(--px-spacing-default-mobile)}}#appleseed-container{margin-inline:var(--px-spacing-s-mobile)}@media only screen and (max-width: 768px){#button-icons{display:none}}.carousel::-webkit-scrollbar{display:none}", dt = "::slotted(*){border-radius:var(--px-radius-main)}:host{scroll-snap-align:start;align-items:center;justify-content:center;flex:1 0 var( --px-carousel-min-width-desktop, var(--px-carousel-min-width-all-desktop) );border-radius:var(--px-radius-main);background:#fff;overflow:hidden}@media screen and (max-width: 768px){:host{scroll-snap-align:center;flex:1 0 var( --px-carousel-min-width-mobile, var(--px-carousel-min-width-all-mobile) )!important}}@media screen and (min-width: 768px) and (max-width: 1024px){:host{flex:1 0 var( --px-carousel-min-width-tablet, var(--px-carousel-min-width-all-tablet) )!important}}", pt = ':host{display:block}:host([overflow-x="auto"]){margin:calc(calc(var(--px-focus-outline-mobile) + var(--px-focus-offset-mobile)) * -1)}:host([overflow-x="auto"]) .flex-container{padding:calc(var(--px-focus-outline-mobile) + var(--px-focus-offset-mobile))}.flex-container{display:flex;height:100%;width:100%;box-sizing:border-box;flex-direction:var(--flex-direction--mobile-value);gap:var(--flex-gap--mobile-value);flex-wrap:var(--flex-wrap--mobile-value);justify-content:var(--flex-justify-content--mobile-value);align-items:var(--flex-align-items--mobile-value);overflow-x:var(--overflow-x-all)}@media only screen and (max-width: 47.9375em){.flex-container{overflow-x:var(--overflow-x-all-mobile, var(--overflow-x-all));scrollbar-width:none}.flex-container::-webkit-scrollbar{display:none}}@media only screen and (min-width: 48em){.flex-container{flex-direction:var(--flex-direction--tablet-value);gap:var(--flex-gap--tablet-value);flex-wrap:var(--flex-wrap--tablet-value);justify-content:var(--flex-justify-content--tablet-value);align-items:var(--flex-align-items--tablet-value)}:host([overflow-x="auto"]){margin:calc(calc(var(--px-focus-outline-tablet) + var(--px-focus-offset-tablet)) * -1)}:host([overflow-x="auto"]) .flex-container{padding:calc(var(--px-focus-outline-tablet) + var(--px-focus-offset-tablet))}}@media only screen and (min-width: 48em) and (max-width: 64em){.flex-container{overflow-x:var(--overflow-x-all-tablet, var(--overflow-x-all));scrollbar-width:none}.flex-container::-webkit-scrollbar{display:none}}@media only screen and (min-width: 64.0625em){.flex-container{flex-direction:var(--flex-direction--laptop-value);gap:var(--flex-gap--laptop-value);flex-wrap:var(--flex-wrap--laptop-value);justify-content:var(--flex-justify-content--laptop-value);align-items:var(--flex-align-items--laptop-value)}:host([overflow-x="auto"]){margin:calc(calc(var(--px-focus-outline-laptop) + var(--px-focus-offset-laptop)) * -1)}:host([overflow-x="auto"]) .flex-container{padding:calc(var(--px-focus-outline-laptop) + var(--px-focus-offset-laptop))}}@media only screen and (min-width: 64.0625em) and (max-width: 90em){.flex-container{overflow-x:var(--overflow-x-all-laptop, var(--overflow-x-all))}}@media only screen and (min-width: 90.0625em){.flex-container{flex-direction:var(--flex-direction--desktop-value);gap:var(--flex-gap--desktop-value);flex-wrap:var(--flex-wrap--desktop-value);justify-content:var(--flex-justify-content--desktop-value);align-items:var(--flex-align-items--desktop-value);overflow-x:var(--overflow-x-all-desktop, var(--overflow-x-all))}:host([overflow-x="auto"]){margin:calc(calc(var(--px-focus-outline-desktop) + var(--px-focus-offset-desktop)) * -1)}:host([overflow-x="auto"]) .flex-container{padding:calc(var(--px-focus-outline-desktop) + var(--px-focus-offset-desktop))}}', B = new CSSStyleSheet();
-B.replaceSync(pt);
+var O = (r, t, e) => t.has(r) || q("Cannot " + e);
+var d = (r, t, e) => (O(r, t, "read from private field"), e ? e.call(r) : t.get(r)), m = (r, t, e) => t.has(r) ? q("Cannot add the same private member more than once") : t instanceof WeakSet ? t.add(r) : t.set(r, e), C = (r, t, e, i) => (O(r, t, "write to private field"), i ? i.call(r, e) : t.set(r, e), e);
+import { WithExtraAttributes as T, AttributeBreakpointHandlerDelegate as F, gapValues as B, checkName as rt, backgroundColorValues as st, PxElement as ot, transferAccessibilityAttributes as at, iconSizeValuesKC as nt, cssTokenBreakpoints as lt } from "@proximus/lavender-common";
+const ct = ":host{display:block}:host *{box-sizing:border-box}.carousel{overflow:hidden;display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;-webkit-overflow-scrolling:touch;gap:var(--px-spacing-default-desktop)}@media only screen and (max-width: 768px){.carousel{gap:var(--px-spacing-default-mobile)}}#appleseed-container{margin-inline:var(--px-spacing-s-mobile)}@media only screen and (max-width: 768px){#button-icons{display:none}}.carousel::-webkit-scrollbar{display:none}", dt = "::slotted(*){border-radius:var(--px-radius-main);height:100%}.carousel-item{height:100%}:host{scroll-snap-align:start;align-items:center;justify-content:center;flex:1 0 var( --px-carousel-min-width-desktop, var(--px-carousel-min-width-all-desktop) );border-radius:var(--px-radius-main);background:#fff;overflow:hidden}@media screen and (max-width: 768px){:host{scroll-snap-align:center;flex:1 0 var( --px-carousel-min-width-mobile, var(--px-carousel-min-width-all-mobile) )!important}}@media screen and (min-width: 768px) and (max-width: 1024px){:host{flex:1 0 var( --px-carousel-min-width-tablet, var(--px-carousel-min-width-all-tablet) )!important}}", pt = ':host{display:block}:host([overflow-x="auto"]){margin:calc(calc(var(--px-focus-outline-mobile) + var(--px-focus-offset-mobile)) * -1)}:host([overflow-x="auto"]) .flex-container{padding:calc(var(--px-focus-outline-mobile) + var(--px-focus-offset-mobile))}.flex-container{display:flex;height:100%;width:100%;box-sizing:border-box;flex-direction:var(--flex-direction--mobile-value);gap:var(--flex-gap--mobile-value);flex-wrap:var(--flex-wrap--mobile-value);justify-content:var(--flex-justify-content--mobile-value);align-items:var(--flex-align-items--mobile-value);overflow-x:var(--overflow-x-all)}@media only screen and (max-width: 47.9375em){.flex-container{overflow-x:var(--overflow-x-all-mobile, var(--overflow-x-all));scrollbar-width:none}.flex-container::-webkit-scrollbar{display:none}}@media only screen and (min-width: 48em){.flex-container{flex-direction:var(--flex-direction--tablet-value);gap:var(--flex-gap--tablet-value);flex-wrap:var(--flex-wrap--tablet-value);justify-content:var(--flex-justify-content--tablet-value);align-items:var(--flex-align-items--tablet-value)}:host([overflow-x="auto"]){margin:calc(calc(var(--px-focus-outline-tablet) + var(--px-focus-offset-tablet)) * -1)}:host([overflow-x="auto"]) .flex-container{padding:calc(var(--px-focus-outline-tablet) + var(--px-focus-offset-tablet))}}@media only screen and (min-width: 48em) and (max-width: 64em){.flex-container{overflow-x:var(--overflow-x-all-tablet, var(--overflow-x-all));scrollbar-width:none}.flex-container::-webkit-scrollbar{display:none}}@media only screen and (min-width: 64.0625em){.flex-container{flex-direction:var(--flex-direction--laptop-value);gap:var(--flex-gap--laptop-value);flex-wrap:var(--flex-wrap--laptop-value);justify-content:var(--flex-justify-content--laptop-value);align-items:var(--flex-align-items--laptop-value)}:host([overflow-x="auto"]){margin:calc(calc(var(--px-focus-outline-laptop) + var(--px-focus-offset-laptop)) * -1)}:host([overflow-x="auto"]) .flex-container{padding:calc(var(--px-focus-outline-laptop) + var(--px-focus-offset-laptop))}}@media only screen and (min-width: 64.0625em) and (max-width: 90em){.flex-container{overflow-x:var(--overflow-x-all-laptop, var(--overflow-x-all))}}@media only screen and (min-width: 90.0625em){.flex-container{flex-direction:var(--flex-direction--desktop-value);gap:var(--flex-gap--desktop-value);flex-wrap:var(--flex-wrap--desktop-value);justify-content:var(--flex-justify-content--desktop-value);align-items:var(--flex-align-items--desktop-value);overflow-x:var(--overflow-x-all-desktop, var(--overflow-x-all))}:host([overflow-x="auto"]){margin:calc(calc(var(--px-focus-outline-desktop) + var(--px-focus-offset-desktop)) * -1)}:host([overflow-x="auto"]) .flex-container{padding:calc(var(--px-focus-outline-desktop) + var(--px-focus-offset-desktop))}}', G = new CSSStyleSheet();
+G.replaceSync(pt);
 const ut = [
   "",
   "default",
@@ -33,7 +33,7 @@ const ut = [
 ], gt = ["", "default", "nowrap", "wrap", "wrap-reverse"], vt = ["", "visible", "hidden", "scroll", "auto"];
 class E extends T {
   constructor() {
-    super(B), this.overflowXAttributeDelegate = new F(
+    super(G), this.overflowXAttributeDelegate = new F(
       this,
       "overflow-x",
       (t) => t,
@@ -87,7 +87,7 @@ class E extends T {
       case "gap--tablet":
       case "gap--laptop":
       case "gap--desktop":
-        this.updateFlexProperties(t, e, i, _);
+        this.updateFlexProperties(t, e, i, B);
         break;
       case "justify-content":
       case "justify-content--mobile":
@@ -134,8 +134,8 @@ class E extends T {
         break;
     }
   }
-  updateOverflowX(t, e, i, o) {
-    if (!rt(o, i)) {
+  updateOverflowX(t, e, i, s) {
+    if (!rt(s, i)) {
       console.error(`${i} is not an allowed ${t} value`);
       return;
     }
@@ -145,20 +145,20 @@ class E extends T {
       i
     );
   }
-  updateFlexProperties(t, e, i, o) {
-    this.checkName(o, i) || console.error(`${i} is not a valid value for ${o}`);
+  updateFlexProperties(t, e, i, s) {
+    this.checkName(s, i) || console.error(`${i} is not a valid value for ${s}`);
     const n = t.indexOf("--") > -1, l = n ? t.split("--")[0] : t, a = [];
     if (!n)
       this.getAttribute(l + "--mobile") || a.push("mobile"), this.getAttribute(l + "--tablet") || a.push("tablet"), this.getAttribute(l + "--laptop") || a.push("laptop"), this.getAttribute(l + "--desktop") || a.push("desktop"), a.forEach((c) => {
-        this.updateStyle(l, c, e, o), this.updateStyle(l, c, i, o);
+        this.updateStyle(l, c, e, s), this.updateStyle(l, c, i, s);
       });
     else {
       const c = t.split("--")[1];
-      this.updateStyle(l, c, e, o), this.updateStyle(l, c, i, o);
+      this.updateStyle(l, c, e, s), this.updateStyle(l, c, i, s);
     }
   }
-  updateStyle(t, e, i, o) {
-    i && (t === "gap" && o && o.includes(i) ? this.$el.style.setProperty(
+  updateStyle(t, e, i, s) {
+    i && (t === "gap" && s && s.includes(i) ? this.$el.style.setProperty(
       `--flex-${t}--${e}-value`,
       `var(--px-spacing-${i}-${e === "laptop" ? "desktop" : e})`
     ) : this.$el.style.setProperty(
@@ -371,16 +371,26 @@ class xt extends E {
 customElements.get("px-hstack") || customElements.define("px-hstack", xt);
 class mt extends HTMLElement {
   constructor() {
-    super();
+    super(), this.isZeroSized = !1, this.growValue = "1";
   }
   static get observedAttributes() {
     return ["grow"];
   }
   attributeChangedCallback(t, e, i) {
-    t === "grow" && (this.style.flexGrow = i);
+    t === "grow" && (this.growValue = i || "1", this.isZeroSized || (this.style.flexGrow = this.growValue), this.scheduleRecheck());
   }
   connectedCallback() {
-    this.style.flexGrow = this.getAttribute("grow") || "1";
+    this.growValue = this.getAttribute("grow") || "1", this.style.flexGrow = this.growValue, this.resizeObserver = new ResizeObserver((t) => {
+      t.forEach((e) => {
+        this.handleSizeChange(
+          e.contentRect.width === 0 || e.contentRect.height === 0
+        );
+      });
+    }), this.resizeObserver.observe(this), this.scheduleRecheck();
+  }
+  disconnectedCallback() {
+    var t;
+    (t = this.resizeObserver) == null || t.disconnect(), this.recheckHandle && (cancelAnimationFrame(this.recheckHandle), this.recheckHandle = void 0);
   }
   get grow() {
     return this.getAttribute("grow");
@@ -388,13 +398,31 @@ class mt extends HTMLElement {
   set grow(t) {
     this.setAttribute("grow", t);
   }
+  scheduleRecheck() {
+    this.recheckHandle && cancelAnimationFrame(this.recheckHandle), this.recheckHandle = requestAnimationFrame(() => {
+      this.recheckHandle = void 0, this.recalculateVisibility();
+    });
+  }
+  recalculateVisibility() {
+    if (!this.isConnected)
+      return;
+    this.style.display = "", this.style.flexGrow = this.growValue;
+    const t = this.getBoundingClientRect(), e = t.width === 0 || t.height === 0;
+    this.handleSizeChange(e);
+  }
+  handleSizeChange(t) {
+    this.isZeroSized !== t && (this.isZeroSized = t, this.updateParticipation());
+  }
+  updateParticipation() {
+    this.isZeroSized ? (this.style.display = "none", this.style.flexGrow = "0") : (this.style.display = "", this.style.flexGrow = this.growValue);
+  }
 }
 customElements.get("px-spacer") || customElements.define("px-spacer", mt);
-const kt = ":host{display:block;box-sizing:border-box}slot[name=body-container]{min-height:100vh}#image-sticky-box{margin-top:-2.5em}", G = new CSSStyleSheet();
-G.replaceSync(kt);
+const kt = ":host{display:block;box-sizing:border-box}slot[name=body-container]{min-height:100vh}#image-sticky-box{margin-top:-2.5em}", _ = new CSSStyleSheet();
+_.replaceSync(kt);
 class yt extends T {
   constructor() {
-    super(G), this.template = (t) => `
+    super(_), this.template = (t) => `
     <px-container border-radius="none" padding="none">
       <px-vstack>
         <px-container id="header-container" border-radius="none">
@@ -571,7 +599,7 @@ class yt extends T {
         case "background-color":
           this.$bodyContainer.setAttribute(
             "background-color",
-            ot.indexOf(i) > 0 ? i : "none"
+            st.indexOf(i) > 0 ? i : "none"
           );
           break;
         case "padding-vertical":
@@ -592,16 +620,16 @@ class yt extends T {
   }
 }
 customElements.get("px-page") === void 0 && customElements.define("px-page", yt);
-const wt = ".btn-icon{font-size:var(--px-font-size-base);display:inline-flex;width:var(--px-size-l);height:var(--px-size-l);vertical-align:middle;align-items:center;justify-content:center;cursor:pointer;--btn-transition: all .2s ease-in-out 0s;transition:var(--btn-transition);background:var(--px-color-background-container-primary-default);color:var(--px-color-icon-brand-inverted);border-radius:var(--px-radius-pill);padding:var(--px-padding-xs-mobile);border:var(--px-size-border-m) solid transparent}.btn-icon,.btn-icon *{box-sizing:border-box}.btn-icon ::slotted(px-icon){line-height:0}.btn-icon:hover:not([disabled],[aria-disabled=true],.btn-icon--state-loading){background:var(--px-color-background-state-hover-bordered-default);color:var(--px-color-icon-brand-default);border-color:var(--px-color-border-state-hover-default)}.btn-icon:active:not([disabled],[aria-disabled=true],.btn-icon--state-loading){background:var(--px-color-background-state-active-inverted);color:var(--px-color-icon-state-active-default);border-color:var(--px-color-border-state-active-default)}.btn-icon:focus-visible:not([disabled],[aria-disabled=true]){outline-offset:var(--px-focus-offset-mobile);outline:var(--px-focus-outline-mobile) solid var(--px-color-border-focus-outline-default)}.btn-icon[disabled],.btn-icon[aria-disabled=true]{background:var(--px-color-background-state-disabled-default);color:var(--px-color-icon-state-disabled-default);cursor:default;pointer-events:none}.btn-icon.btn-icon--state-loading{background:var(--px-color-background-state-disabled-default);color:var(--px-color-icon-brand-default);cursor:inherit}.btn-icon--size-small{padding:var(--px-padding-2xs-mobile);width:var(--px-size-m);height:var(--px-size-m)}.btn-icon--variant-secondary{background-color:var(--px-color-background-container-secondary-default);color:var(--px-color-icon-brand-default)}.btn-icon--variant-naked{background-color:transparent;color:var(--px-color-icon-brand-default);width:auto;height:auto}:host([inverted]) .btn-icon{background:var(--px-color-background-container-primary-inverted);color:var(--px-color-icon-brand-default)}:host([inverted]) .btn-icon:hover:not([disabled],[aria-disabled=true],.btn-icon--state-loading){background:var(--px-color-background-state-hover-bordered-inverted);color:var(--px-color-icon-brand-inverted);border-color:var(--px-color-border-state-hover-inverted)}:host([inverted]) .btn-icon:active:not([disabled],[aria-disabled=true],.btn-icon--state-loading){background:var(--px-color-background-state-hover-default);color:var(--px-color-icon-state-active-inverted);border-color:var(--px-color-border-state-active-inverted)}:host([inverted]) .btn-icon:focus-visible:not([disabled],[aria-disabled=true]){outline-color:var(--px-color-border-focus-outline-inverted)}:host([inverted]) .btn-icon[disabled],:host([inverted]) .btn-icon[aria-disabled=true]{background:var(--px-color-background-state-disabled-inverted);color:var(--px-color-icon-state-disabled-inverted)}:host([inverted]) .btn-icon.btn-icon--state-loading{background:var(--px-color-background-state-disabled-inverted);color:var(--px-color-icon-brand-inverted);border-color:transparent}:host([inverted]) .btn-icon.btn-icon--variant-naked{background-color:transparent;color:var(--px-color-icon-brand-inverted)}:host([inverted]) .btn-icon--variant-secondary{background-color:var(--px-color-background-container-secondary-inverted);color:var(--px-color-icon-brand-inverted)}@media only screen and (min-width: 768px){.btn-icon{padding:var(--px-padding-xs-desktop)}.btn-icon:focus-visible:not([disabled],[aria-disabled=true]){outline-offset:var(--px-focus-offset-desktop);outline-width:var(--px-focus-outline-desktop)}.btn-icon--size-small{padding:var(--px-padding-2xs-desktop)}}@media only screen and (min-width: 1025px){.btn-icon{padding:var(--px-padding-xs-desktop)}.btn-icon:focus-visible:not([disabled],[aria-disabled=true]){outline-offset:var(--px-focus-offset-desktop);outline-width:var(--px-focus-outline-desktop)}.btn-icon--size-small{padding:var(--px-padding-2xs-desktop)}}", U = new CSSStyleSheet();
-U.replaceSync(wt);
+const wt = ".btn-icon{font-size:var(--px-font-size-base);display:inline-flex;width:var(--px-size-l);height:var(--px-size-l);vertical-align:middle;align-items:center;justify-content:center;cursor:pointer;--btn-transition: all .2s ease-in-out 0s;transition:var(--btn-transition);background:var(--px-color-background-container-primary-default);color:var(--px-color-icon-brand-inverted);border-radius:var(--px-radius-pill);padding:var(--px-padding-xs-mobile);border:var(--px-size-border-m) solid transparent}.btn-icon,.btn-icon *{box-sizing:border-box}.btn-icon ::slotted(px-icon){line-height:0}.btn-icon:hover:not([disabled],[aria-disabled=true],.btn-icon--state-loading){background:var(--px-color-background-state-hover-bordered-default);color:var(--px-color-icon-brand-default);border-color:var(--px-color-border-state-hover-default)}.btn-icon:active:not([disabled],[aria-disabled=true],.btn-icon--state-loading){background:var(--px-color-background-state-active-inverted);color:var(--px-color-icon-state-active-default);border-color:var(--px-color-border-state-active-default)}.btn-icon:focus-visible:not([disabled],[aria-disabled=true]){outline-offset:var(--px-focus-offset-mobile);outline:var(--px-focus-outline-mobile) solid var(--px-color-border-focus-outline-default)}.btn-icon[disabled],.btn-icon[aria-disabled=true]{background:var(--px-color-background-state-disabled-default);color:var(--px-color-icon-state-disabled-default);cursor:default;pointer-events:none}.btn-icon.btn-icon--state-loading{background:var(--px-color-background-state-disabled-default);color:var(--px-color-icon-brand-default);cursor:inherit}.btn-icon--size-small{padding:var(--px-padding-2xs-mobile);width:var(--px-size-m);height:var(--px-size-m)}.btn-icon--variant-secondary{background-color:var(--px-color-background-container-secondary-default);color:var(--px-color-icon-brand-default)}.btn-icon--variant-naked{background-color:transparent;color:var(--px-color-icon-brand-default);width:auto;height:auto}:host([inverted]) .btn-icon{background:var(--px-color-background-container-primary-inverted);color:var(--px-color-icon-brand-default)}:host([inverted]) .btn-icon:hover:not([disabled],[aria-disabled=true],.btn-icon--state-loading){background:var(--px-color-background-state-hover-bordered-inverted);color:var(--px-color-icon-brand-inverted);border-color:var(--px-color-border-state-hover-inverted)}:host([inverted]) .btn-icon:active:not([disabled],[aria-disabled=true],.btn-icon--state-loading){background:var(--px-color-background-state-hover-default);color:var(--px-color-icon-state-active-inverted);border-color:var(--px-color-border-state-active-inverted)}:host([inverted]) .btn-icon:focus-visible:not([disabled],[aria-disabled=true]){outline-color:var(--px-color-border-focus-outline-inverted)}:host([inverted]) .btn-icon[disabled],:host([inverted]) .btn-icon[aria-disabled=true]{background:var(--px-color-background-state-disabled-inverted);color:var(--px-color-icon-state-disabled-inverted)}:host([inverted]) .btn-icon.btn-icon--state-loading{background:var(--px-color-background-state-disabled-inverted);color:var(--px-color-icon-brand-inverted);border-color:transparent}:host([inverted]) .btn-icon.btn-icon--variant-naked{background-color:transparent;color:var(--px-color-icon-brand-inverted)}:host([inverted]) .btn-icon--variant-secondary{background-color:var(--px-color-background-container-secondary-inverted);color:var(--px-color-icon-brand-inverted)}@media only screen and (min-width: 768px){.btn-icon{padding:var(--px-padding-xs-desktop)}.btn-icon:focus-visible:not([disabled],[aria-disabled=true]){outline-offset:var(--px-focus-offset-desktop);outline-width:var(--px-focus-outline-desktop)}.btn-icon--size-small{padding:var(--px-padding-2xs-desktop)}}@media only screen and (min-width: 1025px){.btn-icon{padding:var(--px-padding-xs-desktop)}.btn-icon:focus-visible:not([disabled],[aria-disabled=true]){outline-offset:var(--px-focus-offset-desktop);outline-width:var(--px-focus-outline-desktop)}.btn-icon--size-small{padding:var(--px-padding-2xs-desktop)}}", Z = new CSSStyleSheet();
+Z.replaceSync(wt);
 const At = ["", "default", "small"], $t = [
   "",
   "default",
   "secondary",
   "naked"
-], R = class R extends st {
+], R = class R extends ot {
   constructor() {
-    super(U), this.template = () => "<slot></slot>";
+    super(Z), this.template = () => "<slot></slot>";
     const t = document.createElement(this.nativeName);
     t.classList.add("btn-icon"), t.innerHTML = this.template(), this.shadowRoot.appendChild(t);
   }
@@ -728,6 +756,7 @@ class St extends HTMLElement {
 customElements.get("px-icon-set") || customElements.define("px-icon-set", St);
 const Ct = [
   "Brand",
+  "Accent",
   "Neutral",
   "Dimmed",
   "PurposeSuccess",
@@ -740,8 +769,8 @@ const Ct = [
   "StateDisabled"
 ], zt = ["Inherit", ...Ct].map(
   (r) => r.replace(/([A-Z])/g, "-$1").toLowerCase().slice(1)
-), jt = ":host{display:inline-flex;flex-direction:column;justify-content:center}svg{font-size:var(--px-size-icon-s);line-height:var(--px-font-line-height-xs);width:1em;height:1em;color:var(--px-color-icon-brand-default)}.inherit{color:inherit}.brand{color:var(--px-color-icon-brand-default)}.neutral{color:var(--px-color-icon-neutral-default)}.dimmed{color:var(--px-color-icon-dimmed-default)}.purpose-success{color:var(--px-color-icon-purpose-success-default)}.purpose-warning{color:var(--px-color-icon-purpose-warning-default)}.purpose-error{color:var(--px-color-icon-purpose-error-default)}.purpose-unlimited{color:var(--px-color-icon-purpose-unlimited-default)}.purpose-promo{color:var(--px-color-icon-purpose-promo-default)}.state-hover:hover{color:var(--px-color-icon-state-hover-default)}.state-active:active{color:var(--px-color-icon-state-active-default)}.state-disabled{color:var(--px-color-icon-state-disabled-default)}:host([inverted]) svg{color:var(--px-color-icon-brand-inverted)}:host([inverted]) .inherit{color:inherit}:host([inverted]) .brand{color:var(--px-color-icon-brand-inverted)}:host([inverted]) .neutral{color:var(--px-color-icon-neutral-inverted)}:host([inverted]) .dimmed{color:var(--px-color-icon-dimmed-inverted)}:host([inverted]) .purpose-success{color:var(--px-color-icon-purpose-success-inverted)}:host([inverted]) .purpose-warning{color:var(--px-color-icon-purpose-warning-inverted)}:host([inverted]) .purpose-error{color:var(--px-color-icon-purpose-error-inverted)}:host([inverted]) .purpose-unlimited{color:var(--px-color-icon-purpose-unlimited-inverted)}:host([inverted]) .purpose-promo{color:var(--px-color-icon-purpose-promo-inverted)}:host([inverted]) .state-hover:hover{color:var(--px-color-icon-state-hover-inverted)}:host([inverted]) .state-active:active{color:var(--px-color-icon-state-active-inverted)}:host([inverted]) .state-disabled{color:var(--px-color-icon-state-disabled-inverted)}.size-xs{font-size:var(--px-size-icon-xs)}.size-s{font-size:var(--px-size-icon-s)}.size-m{font-size:var(--px-size-icon-m)}.size-l{font-size:var(--px-size-icon-l)}.size-xl{font-size:var(--px-size-icon-xl)}", K = new CSSStyleSheet();
-K.replaceSync(jt);
+), jt = ":host{display:inline-flex;flex-direction:column;justify-content:center}svg{font-size:var(--px-size-icon-s);line-height:var(--px-font-line-height-xs);width:1em;height:1em;color:var(--px-color-icon-brand-default)}.inherit{color:inherit}.brand{color:var(--px-color-icon-brand-default)}.accent{color:var(--px-color-icon-accent-default)}.neutral{color:var(--px-color-icon-neutral-default)}.dimmed{color:var(--px-color-icon-dimmed-default)}.purpose-success{color:var(--px-color-icon-purpose-success-default)}.purpose-warning{color:var(--px-color-icon-purpose-warning-default)}.purpose-error{color:var(--px-color-icon-purpose-error-default)}.purpose-unlimited{color:var(--px-color-icon-purpose-unlimited-default)}.purpose-promo{color:var(--px-color-icon-purpose-promo-default)}.state-hover:hover{color:var(--px-color-icon-state-hover-default)}.state-active:active{color:var(--px-color-icon-state-active-default)}.state-disabled{color:var(--px-color-icon-state-disabled-default)}:host([inverted]) svg{color:var(--px-color-icon-brand-inverted)}:host([inverted]) .inherit{color:inherit}:host([inverted]) .brand{color:var(--px-color-icon-brand-inverted)}:host([inverted]) .accent{color:var(--px-color-icon-accent-inverted)}:host([inverted]) .neutral{color:var(--px-color-icon-neutral-inverted)}:host([inverted]) .dimmed{color:var(--px-color-icon-dimmed-inverted)}:host([inverted]) .purpose-success{color:var(--px-color-icon-purpose-success-inverted)}:host([inverted]) .purpose-warning{color:var(--px-color-icon-purpose-warning-inverted)}:host([inverted]) .purpose-error{color:var(--px-color-icon-purpose-error-inverted)}:host([inverted]) .purpose-unlimited{color:var(--px-color-icon-purpose-unlimited-inverted)}:host([inverted]) .purpose-promo{color:var(--px-color-icon-purpose-promo-inverted)}:host([inverted]) .state-hover:hover{color:var(--px-color-icon-state-hover-inverted)}:host([inverted]) .state-active:active{color:var(--px-color-icon-state-active-inverted)}:host([inverted]) .state-disabled{color:var(--px-color-icon-state-disabled-inverted)}.size-xs{font-size:var(--px-size-icon-xs)}.size-s{font-size:var(--px-size-icon-s)}.size-m{font-size:var(--px-size-icon-m)}.size-l{font-size:var(--px-size-icon-l)}.size-xl{font-size:var(--px-size-icon-xl)}", U = new CSSStyleSheet();
+U.replaceSync(jt);
 const Lt = [
   "name",
   "size",
@@ -755,7 +784,7 @@ var h, p, w;
 class Tt extends T {
   constructor(...e) {
     var i;
-    super(...e, K);
+    super(...e, U);
     m(this, h);
     m(this, p);
     m(this, w, () => `<svg aria-hidden="true">
@@ -766,17 +795,17 @@ class Tt extends T {
   static get observedAttributes() {
     return [...super.observedAttributes, ...Lt];
   }
-  attributeChangedCallback(e, i, o) {
-    if (i !== o)
+  attributeChangedCallback(e, i, s) {
+    if (i !== s)
       switch (e) {
         case "name":
-          this.updateName(i, o);
+          this.updateName(i, s);
           break;
         case "size":
-          this.updateAttribute(e, i, o, nt);
+          this.updateAttribute(e, i, s, nt);
           break;
         case "color":
-          this.updateAttribute(e, i, o, zt);
+          this.updateAttribute(e, i, s, zt);
           break;
         case "disabled":
           this.color = "state-disabled";
@@ -784,7 +813,7 @@ class Tt extends T {
         case "aria-label":
           if (!d(this, p))
             return;
-          o ? d(this, p).ariaHidden = "false" : d(this, p).ariaHidden = "true";
+          s ? d(this, p).ariaHidden = "false" : d(this, p).ariaHidden = "true";
           break;
       }
   }
@@ -803,8 +832,8 @@ class Tt extends T {
     }
     !this.ariaLabel && d(this, p) && (d(this, p).ariaHidden = "true");
   }
-  updateAttribute(e, i, o, n) {
-    i !== null && i !== "" && (e === "size" ? this.$el.classList.toggle(`${e}-${i}`) : this.$el.classList.toggle(i)), o !== null && o !== "" && (e === "size" ? this.$el.classList.toggle(`${e}-${o}`) : this.$el.classList.toggle(o)), this.checkName(n, o) || console.error(`${o} is not an allowed ${e} value`);
+  updateAttribute(e, i, s, n) {
+    i !== null && i !== "" && (e === "size" ? this.$el.classList.toggle(`${e}-${i}`) : this.$el.classList.toggle(i)), s !== null && s !== "" && (e === "size" ? this.$el.classList.toggle(`${e}-${s}`) : this.$el.classList.toggle(s)), this.checkName(n, s) || console.error(`${s} is not an allowed ${e} value`);
   }
   updateName(e, i) {
     d(this, h) && this.$el.firstElementChild.setAttribute(
@@ -860,18 +889,18 @@ class Tt extends T {
 }
 h = new WeakMap(), p = new WeakMap(), w = new WeakMap();
 customElements.get("px-icon") || customElements.define("px-icon", Tt);
-const Et = ":host{--px-appleseed-size-l: 14px;--px-appleseed-size-m: 10px;--px-appleseed-size-s: 6px;--px-appleseed-size-xs: 4px}.container{display:flex}.container:has(#seed-0.appleseed-6-plus[active]) :nth-child(4)>div,.container:has(#seed-1.appleseed-6-plus[active]) :nth-child(4)>div{width:var(--px-appleseed-size-s);height:var(--px-appleseed-size-s)}.container:has(#seed-0.appleseed-6-plus[active]) :nth-child(5)>div,.container:has(#seed-1.appleseed-6-plus[active]) :nth-child(5)>div{width:var(--px-appleseed-size-xs);height:var(--px-appleseed-size-xs)}.container:has(#seed-2.appleseed-6-plus[active]) :nth-child(2)>div,.container:has(#seed-2.appleseed-6-plus[active]) :nth-child(4)>div{width:var(--px-appleseed-size-s);height:var(--px-appleseed-size-s)}.container:has(#seed-2.appleseed-6-plus[active]) :nth-child(1)>div,.container:has(#seed-2.appleseed-6-plus[active]) :nth-child(5)>div{width:var(--px-appleseed-size-xs);height:var(--px-appleseed-size-xs)}.container:has(#seed-3.appleseed-6-plus[active]) :nth-child(1)>div{width:var(--px-appleseed-size-xs);height:var(--px-appleseed-size-xs)}.container:has(#seed-3.appleseed-6-plus[active]) :nth-child(2)>div{width:var(--px-appleseed-size-s);height:var(--px-appleseed-size-s)}.container:has(#seed-3.appleseed-6-plus[active]) :nth-child(5)>div{width:var(--px-appleseed-size-xs);height:var(--px-appleseed-size-xs)}.container:has(#seed-4.appleseed-6-plus[active]) :nth-child(1)>div{width:var(--px-appleseed-size-xs);height:var(--px-appleseed-size-xs)}.container:has(#seed-4.appleseed-6-plus[active]) :nth-child(2)>div{width:var(--px-appleseed-size-s);height:var(--px-appleseed-size-s)}.appleseed{width:var(--px-size-icon-m);height:var(--px-size-icon-m);display:flex;justify-content:center;align-items:center}@media only screen and (max-width: 47.938em){.appleseed{width:var(--px-size-icon-s);height:var(--px-size-icon-s)}}.appleseed-6-plus>div,.appleseed-6-minus>div{box-shadow:inset 0 0 0 var(--px-size-border-s) var(--px-color-border-brand-default);border-radius:var(--px-radius-main);height:var(--px-appleseed-size-m);width:var(--px-appleseed-size-m)}.appleseed-6-plus[active]>div,.appleseed-6-minus[active]>div{width:var(--px-appleseed-size-l);height:var(--px-appleseed-size-l);background-color:var(--px-color-icon-brand-default)}", Z = new CSSStyleSheet();
-Z.replaceSync(Et);
+const Et = ":host{--px-appleseed-size-l: 14px;--px-appleseed-size-m: 10px;--px-appleseed-size-s: 6px;--px-appleseed-size-xs: 4px}.container{display:flex}.container:has(#seed-0.appleseed-6-plus[active]) :nth-child(4)>div,.container:has(#seed-1.appleseed-6-plus[active]) :nth-child(4)>div{width:var(--px-appleseed-size-s);height:var(--px-appleseed-size-s)}.container:has(#seed-0.appleseed-6-plus[active]) :nth-child(5)>div,.container:has(#seed-1.appleseed-6-plus[active]) :nth-child(5)>div{width:var(--px-appleseed-size-xs);height:var(--px-appleseed-size-xs)}.container:has(#seed-2.appleseed-6-plus[active]) :nth-child(2)>div,.container:has(#seed-2.appleseed-6-plus[active]) :nth-child(4)>div{width:var(--px-appleseed-size-s);height:var(--px-appleseed-size-s)}.container:has(#seed-2.appleseed-6-plus[active]) :nth-child(1)>div,.container:has(#seed-2.appleseed-6-plus[active]) :nth-child(5)>div{width:var(--px-appleseed-size-xs);height:var(--px-appleseed-size-xs)}.container:has(#seed-3.appleseed-6-plus[active]) :nth-child(1)>div{width:var(--px-appleseed-size-xs);height:var(--px-appleseed-size-xs)}.container:has(#seed-3.appleseed-6-plus[active]) :nth-child(2)>div{width:var(--px-appleseed-size-s);height:var(--px-appleseed-size-s)}.container:has(#seed-3.appleseed-6-plus[active]) :nth-child(5)>div{width:var(--px-appleseed-size-xs);height:var(--px-appleseed-size-xs)}.container:has(#seed-4.appleseed-6-plus[active]) :nth-child(1)>div{width:var(--px-appleseed-size-xs);height:var(--px-appleseed-size-xs)}.container:has(#seed-4.appleseed-6-plus[active]) :nth-child(2)>div{width:var(--px-appleseed-size-s);height:var(--px-appleseed-size-s)}.appleseed{width:var(--px-size-icon-m);height:var(--px-size-icon-m);display:flex;justify-content:center;align-items:center}@media only screen and (max-width: 47.938em){.appleseed{width:var(--px-size-icon-s);height:var(--px-size-icon-s)}}.appleseed-6-plus>div,.appleseed-6-minus>div{box-shadow:inset 0 0 0 var(--px-size-border-s) var(--px-color-border-brand-default);border-radius:var(--px-radius-main);height:var(--px-appleseed-size-m);width:var(--px-appleseed-size-m)}.appleseed-6-plus[active]>div,.appleseed-6-minus[active]>div{width:var(--px-appleseed-size-l);height:var(--px-appleseed-size-l);background-color:var(--px-color-icon-brand-default)}", K = new CSSStyleSheet();
+K.replaceSync(Et);
 class It extends HTMLElement {
   constructor() {
     super(), this.template = (t, e) => `<div class="container">
       ${Array.from(
       { length: Math.min(t, 5) },
-      (i, o) => `<div id="seed-${o}" ${e === o ? "active" : ""} class="appleseed ${t > 5 ? "appleseed-6-plus" : "appleseed-6-minus"}">
+      (i, s) => `<div id="seed-${s}" ${e === s ? "active" : ""} class="appleseed ${t > 5 ? "appleseed-6-plus" : "appleseed-6-minus"}">
             <div></div>
           </div>`
     ).join("")}
-    </div>`, this.attachShadow({ mode: "open" }), this.shadowRoot.adoptedStyleSheets = [Z], this.shadowRoot.innerHTML = this.template(this.amount, this.active);
+    </div>`, this.attachShadow({ mode: "open" }), this.shadowRoot.adoptedStyleSheets = [K], this.shadowRoot.innerHTML = this.template(this.amount, this.active);
   }
   static get observedAttributes() {
     return ["amount", "active"];
@@ -911,41 +940,41 @@ function k(r) {
 }
 var Rt = typeof global == "object" && global && global.Object === Object && global, Mt = typeof self == "object" && self && self.Object === Object && self, J = Rt || Mt || Function("return this")(), z = function() {
   return J.Date.now();
-}, Pt = /\s/;
-function Dt(r) {
-  for (var t = r.length; t-- && Pt.test(r.charAt(t)); )
+}, Ht = /\s/;
+function Pt(r) {
+  for (var t = r.length; t-- && Ht.test(r.charAt(t)); )
     ;
   return t;
 }
-var Ht = /^\s+/;
+var Dt = /^\s+/;
 function qt(r) {
-  return r && r.slice(0, Dt(r) + 1).replace(Ht, "");
+  return r && r.slice(0, Pt(r) + 1).replace(Dt, "");
 }
-var y = J.Symbol, Q = Object.prototype, Wt = Q.hasOwnProperty, Ot = Q.toString, f = y ? y.toStringTag : void 0;
+var y = J.Symbol, Q = Object.prototype, Ot = Q.hasOwnProperty, Wt = Q.toString, f = y ? y.toStringTag : void 0;
 function Nt(r) {
-  var t = Wt.call(r, f), e = r[f];
+  var t = Ot.call(r, f), e = r[f];
   try {
     r[f] = void 0;
     var i = !0;
   } catch {
   }
-  var o = Ot.call(r);
-  return i && (t ? r[f] = e : delete r[f]), o;
+  var s = Wt.call(r);
+  return i && (t ? r[f] = e : delete r[f]), s;
 }
 var Xt = Object.prototype, Ft = Xt.toString;
-function _t(r) {
+function Bt(r) {
   return Ft.call(r);
 }
-var Bt = "[object Null]", Gt = "[object Undefined]", O = y ? y.toStringTag : void 0;
-function Ut(r) {
-  return r == null ? r === void 0 ? Gt : Bt : O && O in Object(r) ? Nt(r) : _t(r);
+var Gt = "[object Null]", _t = "[object Undefined]", W = y ? y.toStringTag : void 0;
+function Zt(r) {
+  return r == null ? r === void 0 ? _t : Gt : W && W in Object(r) ? Nt(r) : Bt(r);
 }
-function Kt(r) {
+function Ut(r) {
   return r != null && typeof r == "object";
 }
-var Zt = "[object Symbol]";
+var Kt = "[object Symbol]";
 function Jt(r) {
-  return typeof r == "symbol" || Kt(r) && Ut(r) == Zt;
+  return typeof r == "symbol" || Ut(r) && Zt(r) == Kt;
 }
 var N = NaN, Qt = /^[-+]0x[0-9a-f]+$/i, Yt = /^0b[01]+$/i, Vt = /^0o[0-7]+$/i, te = parseInt;
 function X(r) {
@@ -964,44 +993,44 @@ function X(r) {
   return e || Vt.test(r) ? te(r.slice(2), e ? 2 : 8) : Qt.test(r) ? N : +r;
 }
 var ee = "Expected a function", ie = Math.max, re = Math.min;
-function oe(r, t, e) {
-  var i, o, n, l, a, c, b = 0, M = !1, g = !1, A = !0;
+function se(r, t, e) {
+  var i, s, n, l, a, c, b = 0, M = !1, g = !1, A = !0;
   if (typeof r != "function")
     throw new TypeError(ee);
   t = X(t) || 0, k(e) && (M = !!e.leading, g = "maxWait" in e, n = g ? ie(X(e.maxWait) || 0, t) : n, A = "trailing" in e ? !!e.trailing : A);
-  function $(s) {
-    var u = i, v = o;
-    return i = o = void 0, b = s, l = r.apply(v, u), l;
+  function $(o) {
+    var u = i, v = s;
+    return i = s = void 0, b = o, l = r.apply(v, u), l;
   }
-  function V(s) {
-    return b = s, a = setTimeout(x, t), M ? $(s) : l;
+  function V(o) {
+    return b = o, a = setTimeout(x, t), M ? $(o) : l;
   }
-  function tt(s) {
-    var u = s - c, v = s - b, H = t - u;
-    return g ? re(H, n - v) : H;
+  function tt(o) {
+    var u = o - c, v = o - b, D = t - u;
+    return g ? re(D, n - v) : D;
   }
-  function P(s) {
-    var u = s - c, v = s - b;
+  function H(o) {
+    var u = o - c, v = o - b;
     return c === void 0 || u >= t || u < 0 || g && v >= n;
   }
   function x() {
-    var s = z();
-    if (P(s))
-      return D(s);
-    a = setTimeout(x, tt(s));
+    var o = z();
+    if (H(o))
+      return P(o);
+    a = setTimeout(x, tt(o));
   }
-  function D(s) {
-    return a = void 0, A && i ? $(s) : (i = o = void 0, l);
+  function P(o) {
+    return a = void 0, A && i ? $(o) : (i = s = void 0, l);
   }
   function et() {
-    a !== void 0 && clearTimeout(a), b = 0, i = c = o = a = void 0;
+    a !== void 0 && clearTimeout(a), b = 0, i = c = s = a = void 0;
   }
   function it() {
-    return a === void 0 ? l : D(z());
+    return a === void 0 ? l : P(z());
   }
   function S() {
-    var s = z(), u = P(s);
-    if (i = arguments, o = this, c = s, u) {
+    var o = z(), u = H(o);
+    if (i = arguments, s = this, c = o, u) {
       if (a === void 0)
         return V(c);
       if (g)
@@ -1011,15 +1040,15 @@ function oe(r, t, e) {
   }
   return S.cancel = et, S.flush = it, S;
 }
-var se = "Expected a function";
+var oe = "Expected a function";
 function ae(r, t, e) {
-  var i = !0, o = !0;
+  var i = !0, s = !0;
   if (typeof r != "function")
-    throw new TypeError(se);
-  return k(e) && (i = "leading" in e ? !!e.leading : i, o = "trailing" in e ? !!e.trailing : o), oe(r, t, {
+    throw new TypeError(oe);
+  return k(e) && (i = "leading" in e ? !!e.leading : i, s = "trailing" in e ? !!e.trailing : s), se(r, t, {
     leading: i,
     maxWait: t,
-    trailing: o
+    trailing: s
   });
 }
 const I = new CSSStyleSheet();
@@ -1053,18 +1082,18 @@ class ce extends HTMLElement {
     </px-hstack>
   </px-vstack>`, this.onScroll = () => {
       const t = this.$carousel.scrollLeft, e = this.$carousel.scrollWidth, i = this.$carousel.clientWidth;
-      let o = 0;
-      window.innerWidth < 768 ? o = Math.round(
+      let s = 0;
+      window.innerWidth < 768 ? s = Math.round(
         t / (e - i) * (this.itemNumbers - 1)
-      ) : Math.ceil(t + i) + 10 >= e ? o = this.itemNumbers - 1 : o = Math.floor(t / this.$firstItem.offsetWidth + 1) - 1;
-      let n = o;
-      this.itemNumbers > 5 && (o > 2 && o < this.itemNumbers - 2 ? n = 2 : o === this.itemNumbers - 2 ? n = 3 : o === this.itemNumbers - 1 && (n = 4)), this.$appleseed.setAttribute("active", `${n}`), this.handleNextPrevious();
+      ) : Math.ceil(t + i) + 10 >= e ? s = this.itemNumbers - 1 : s = Math.floor(t / this.$firstItem.offsetWidth + 1) - 1;
+      let n = s;
+      this.itemNumbers > 5 && (s > 2 && s < this.itemNumbers - 2 ? n = 2 : s === this.itemNumbers - 2 ? n = 3 : s === this.itemNumbers - 1 && (n = 4)), this.$appleseed.setAttribute("active", `${n}`), this.handleNextPrevious();
     }, this.attachShadow({ mode: "open" }), this.shadowRoot.innerHTML = this.template, this.shadowRoot.adoptedStyleSheets = [
       I,
       lt(
         "gap",
         ne,
-        _,
+        B,
         le
       )
     ];

package/package.json

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