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

package/dist/Carousel.d.ts

@@ -1,15 +1,13 @@
-import { AttributeBreakpointHandlerDelegate } from '@proximus/lavender-common';
 import '@proximus/lavender-layout';
 import '@proximus/lavender-button-icon';
 import '@proximus/lavender-icon';
 import './AppleSeed.ts';
 import { type AppleSeed } from './AppleSeed.ts';
+export declare const CAROUSEL_ITEM_CONNECTED_EVENT = "px-carousel-item-connected";
 export declare class Carousel extends HTMLElement {
-    visibleItemsAttributeDelegate: AttributeBreakpointHandlerDelegate;
+    #private;
     template: string;
     constructor();
-    static get observedAttributes(): string[];
-    attributeChangedCallback(attrName: string, oldValue: string, newValue: string): void;
     connectedCallback(): void;
     private onScroll;
     private handleNextPrevious;
@@ -26,4 +24,5 @@ export declare class Carousel extends HTMLElement {
 export declare class CarouselItem extends HTMLElement {
     template: string;
     constructor();
+    connectedCallback(): void;
 }

package/dist/index.es.js

@@ -1,19 +1,19 @@
-var q = (r) => {
-  throw TypeError(r);
+var W = (s) => {
+  throw TypeError(s);
 };
-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);
-const ut = [
+var j = (s, t, e) => t.has(s) || W("Cannot " + e);
+var p = (s, t, e) => (j(s, t, "read from private field"), e ? e.call(s) : t.get(s)), x = (s, t, e) => t.has(s) ? W("Cannot add the same private member more than once") : t instanceof WeakSet ? t.add(s) : t.set(s, e), E = (s, t, e, i) => (j(s, t, "write to private field"), i ? i.call(s, e) : t.set(s, e), e), T = (s, t, e) => (j(s, t, "access private method"), e);
+import { WithExtraAttributes as M, AttributeBreakpointHandlerDelegate as ot, gapValues as rt, checkName as nt, log as f, backgroundColorValues as lt, PxElement as ct, accessibilityAttributes as pt, iconSizeValuesKC as dt } from "@proximus/lavender-common";
+const ut = ':host{display:block;--px-carousel-visible-items: 1;--px-carousel-gap-default: var(--px-spacing-default-desktop)}:host *{box-sizing:border-box}:host([visible-items="1"]){--px-carousel-visible-items: 1}:host([visible-items="2"]){--px-carousel-visible-items: 2}:host([visible-items="3"]){--px-carousel-visible-items: 3}:host([visible-items="4"]){--px-carousel-visible-items: 4}:host([visible-items="5"]){--px-carousel-visible-items: 5}:host([visible-items="6"]){--px-carousel-visible-items: 6}:host([visible-items="7"]){--px-carousel-visible-items: 7}:host([visible-items="8"]){--px-carousel-visible-items: 8}:host([visible-items="9"]){--px-carousel-visible-items: 9}:host([visible-items--mobile="1"]){--px-carousel-visible-items--mobile: 1}:host([visible-items--mobile="2"]){--px-carousel-visible-items--mobile: 2}:host([visible-items--mobile="3"]){--px-carousel-visible-items--mobile: 3}:host([visible-items--mobile="4"]){--px-carousel-visible-items--mobile: 4}:host([visible-items--mobile="5"]){--px-carousel-visible-items--mobile: 5}:host([visible-items--mobile="6"]){--px-carousel-visible-items--mobile: 6}:host([visible-items--mobile="7"]){--px-carousel-visible-items--mobile: 7}:host([visible-items--mobile="8"]){--px-carousel-visible-items--mobile: 8}:host([visible-items--mobile="9"]){--px-carousel-visible-items--mobile: 9}:host([visible-items--tablet="1"]){--px-carousel-visible-items--tablet: 1}:host([visible-items--tablet="2"]){--px-carousel-visible-items--tablet: 2}:host([visible-items--tablet="3"]){--px-carousel-visible-items--tablet: 3}:host([visible-items--tablet="4"]){--px-carousel-visible-items--tablet: 4}:host([visible-items--tablet="5"]){--px-carousel-visible-items--tablet: 5}:host([visible-items--tablet="6"]){--px-carousel-visible-items--tablet: 6}:host([visible-items--tablet="7"]){--px-carousel-visible-items--tablet: 7}:host([visible-items--tablet="8"]){--px-carousel-visible-items--tablet: 8}:host([visible-items--tablet="9"]){--px-carousel-visible-items--tablet: 9}:host([visible-items--laptop="1"]){--px-carousel-visible-items--laptop: 1}:host([visible-items--laptop="2"]){--px-carousel-visible-items--laptop: 2}:host([visible-items--laptop="3"]){--px-carousel-visible-items--laptop: 3}:host([visible-items--laptop="4"]){--px-carousel-visible-items--laptop: 4}:host([visible-items--laptop="5"]){--px-carousel-visible-items--laptop: 5}:host([visible-items--laptop="6"]){--px-carousel-visible-items--laptop: 6}:host([visible-items--laptop="7"]){--px-carousel-visible-items--laptop: 7}:host([visible-items--laptop="8"]){--px-carousel-visible-items--laptop: 8}:host([visible-items--laptop="9"]){--px-carousel-visible-items--laptop: 9}:host([visible-items--desktop="1"]){--px-carousel-visible-items--desktop: 1}:host([visible-items--desktop="2"]){--px-carousel-visible-items--desktop: 2}:host([visible-items--desktop="3"]){--px-carousel-visible-items--desktop: 3}:host([visible-items--desktop="4"]){--px-carousel-visible-items--desktop: 4}:host([visible-items--desktop="5"]){--px-carousel-visible-items--desktop: 5}:host([visible-items--desktop="6"]){--px-carousel-visible-items--desktop: 6}:host([visible-items--desktop="7"]){--px-carousel-visible-items--desktop: 7}:host([visible-items--desktop="8"]){--px-carousel-visible-items--desktop: 8}:host([visible-items--desktop="9"]){--px-carousel-visible-items--desktop: 9}:host([gap="default"]){--px-carousel-gap-default: var(--px-spacing-default-desktop)}:host([gap="s"]){--px-carousel-gap-default: var(--px-spacing-s-desktop)}:host([gap="xs"]){--px-carousel-gap-default: var(--px-spacing-xs-desktop)}:host([gap="2xs"]){--px-carousel-gap-default: var(--px-spacing-2xs-desktop)}:host([gap="l"]){--px-carousel-gap-default: var(--px-spacing-l-desktop)}:host([gap="none"]){--px-carousel-gap-default: 0}:host([gap--mobile="default"]){--px-carousel-gap-default--mobile: var(--px-spacing-default-mobile)}:host([gap--mobile="s"]){--px-carousel-gap-default--mobile: var(--px-spacing-s-mobile)}:host([gap--mobile="xs"]){--px-carousel-gap-default--mobile: var(--px-spacing-xs-mobile)}:host([gap--mobile="2xs"]){--px-carousel-gap-default--mobile: var(--px-spacing-2xs-mobile)}:host([gap--mobile="l"]){--px-carousel-gap-default--mobile: var(--px-spacing-l-mobile)}:host([gap--mobile="none"]){--px-carousel-gap-default--mobile: 0}:host([gap--tablet="default"]){--px-carousel-gap-default--tablet: var(--px-spacing-default-tablet)}:host([gap--tablet="s"]){--px-carousel-gap-default--tablet: var(--px-spacing-s-tablet)}:host([gap--tablet="xs"]){--px-carousel-gap-default--tablet: var(--px-spacing-xs-tablet)}:host([gap--tablet="2xs"]){--px-carousel-gap-default--tablet: var(--px-spacing-2xs-tablet)}:host([gap--tablet="l"]){--px-carousel-gap-default--tablet: var(--px-spacing-l-tablet)}:host([gap--tablet="none"]){--px-carousel-gap-default--tablet: 0}:host([gap--laptop="default"]){--px-carousel-gap-default--laptop: var(--px-spacing-default-laptop)}:host([gap--laptop="s"]){--px-carousel-gap-default--laptop: var(--px-spacing-s-laptop)}:host([gap--laptop="xs"]){--px-carousel-gap-default--laptop: var(--px-spacing-xs-laptop)}:host([gap--laptop="2xs"]){--px-carousel-gap-default--laptop: var(--px-spacing-2xs-laptop)}:host([gap--laptop="l"]){--px-carousel-gap-default--laptop: var(--px-spacing-l-laptop)}:host([gap--laptop="none"]){--px-carousel-gap-default--laptop: 0}:host([gap--desktop="default"]){--px-carousel-gap-default--desktop: var(--px-spacing-default-desktop)}:host([gap--desktop="s"]){--px-carousel-gap-default--desktop: var(--px-spacing-s-desktop)}:host([gap--desktop="xs"]){--px-carousel-gap-default--desktop: var(--px-spacing-xs-desktop)}:host([gap--desktop="2xs"]){--px-carousel-gap-default--desktop: var(--px-spacing-2xs-desktop)}:host([gap--desktop="l"]){--px-carousel-gap-default--desktop: var(--px-spacing-l-desktop)}:host([gap--desktop="none"]){--px-carousel-gap-default--desktop: 0}.carousel{overflow:hidden;display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;-webkit-overflow-scrolling:touch;gap:var(--px-carousel-gap-default--desktop, var(--px-carousel-gap-default))}@media screen and (max-width: 48rem){.carousel{gap:var(--px-carousel-gap-default--mobile, var(--px-carousel-gap-default))}}@media screen and (min-width: 48.0625rem) and (max-width: 64rem){.carousel{gap:var(--px-carousel-gap-default--tablet, var(--px-carousel-gap-default))}}@media screen and (min-width: 64.0625rem) and (max-width: 90rem){.carousel{gap:var(--px-carousel-gap-default--laptop, var(--px-carousel-gap-default))}}#appleseed-container{margin-inline:var(--px-spacing-s-mobile)}@media screen and (max-width: 48rem){#button-icons{display:none}}.carousel::-webkit-scrollbar{display:none}', ht = "::slotted(*){border-radius:var(--px-radius-main);height:100%}.carousel-item{height:100%}:host{scroll-snap-align:start;align-items:center;justify-content:center;border-radius:var(--px-radius-main);background:#fff;overflow:hidden;--visible-items: var( --px-carousel-visible-items--desktop, var(--px-carousel-visible-items, 1) );--spacing: var( --px-carousel-gap-default--desktop, var(--px-carousel-gap-default, var(--px-spacing-s-desktop)) );min-width:calc((100% - max(var(--visible-items),2) * var(--spacing)) / var(--visible-items) - 64px / max(var(--visible-items),2))}@media screen and (max-width: 48rem){:host{--visible-items: var( --px-carousel-visible-items--mobile, var(--px-carousel-visible-items, 1) );--spacing: var( --px-carousel-gap-default--mobile, var(--px-carousel-gap-default, var(--px-spacing-s-mobile)) )}}@media screen and (min-width: 48.0625rem) and (max-width: 64rem){:host{--visible-items: var( --px-carousel-visible-items--tablet, var(--px-carousel-visible-items, 1) );--spacing: var( --px-carousel-gap-default--tablet, var(--px-carousel-gap-default, var(--px-spacing-s-desktop)) )}}@media screen and (min-width: 64.0625rem) and (max-width: 90rem){:host{--visible-items: var( --px-carousel-visible-items--laptop, var(--px-carousel-visible-items, 1) );--spacing: var( --px-carousel-gap-default--laptop, var(--px-carousel-gap-default, var(--px-spacing-s-desktop)) )}}@media screen and (max-width: 48rem){: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: 48rem) and (max-width: 64rem){:host{flex:1 0 var( --px-carousel-min-width-tablet, var(--px-carousel-min-width-all-tablet) )!important}}", bt = ':host{display:block}:host ::slotted(px-h1[auto-spacing]),:host ::slotted(px-h2[auto-spacing]),:host ::slotted(px-h3[auto-spacing]),:host ::slotted(px-h4[auto-spacing]),:host ::slotted(px-h5[auto-spacing]),:host ::slotted(px-h6[auto-spacing]){margin-bottom:calc(var(--px-spacing-heading-to-content-mobile) - var(--host-gap--mobile))}: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 screen and (max-width: 47.938rem){.flex-container{overflow-x:var(--overflow-x-all-mobile, var(--overflow-x-all));scrollbar-width:none}.flex-container::-webkit-scrollbar{display:none}}@media screen and (min-width: 48rem){.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 ::slotted(px-h1[auto-spacing]),:host ::slotted(px-h2[auto-spacing]),:host ::slotted(px-h3[auto-spacing]),:host ::slotted(px-h4[auto-spacing]),:host ::slotted(px-h5[auto-spacing]),:host ::slotted(px-h6[auto-spacing]){margin-bottom:calc(var(--px-spacing-heading-to-content-tablet) - var(--host-gap--tablet))}: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 screen and (min-width: 48rem) and (max-width: 64rem){.flex-container{overflow-x:var(--overflow-x-all-tablet, var(--overflow-x-all));scrollbar-width:none}.flex-container::-webkit-scrollbar{display:none}}@media screen and (min-width: 64.0625rem){.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 ::slotted(px-h1[auto-spacing]),:host ::slotted(px-h2[auto-spacing]),:host ::slotted(px-h3[auto-spacing]),:host ::slotted(px-h4[auto-spacing]),:host ::slotted(px-h5[auto-spacing]),:host ::slotted(px-h6[auto-spacing]){margin-bottom:calc(var(--px-spacing-heading-to-content-laptop) - var(--host-gap--laptop))}: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 screen and (min-width: 64.0625rem) and (max-width: 90rem){.flex-container{overflow-x:var(--overflow-x-all-laptop, var(--overflow-x-all))}}@media screen and (min-width: 90.0625rem){.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 ::slotted(px-h1[auto-spacing]),:host ::slotted(px-h2[auto-spacing]),:host ::slotted(px-h3[auto-spacing]),:host ::slotted(px-h4[auto-spacing]),:host ::slotted(px-h5[auto-spacing]),:host ::slotted(px-h6[auto-spacing]){margin-bottom:calc(var(--px-spacing-heading-to-content-desktop) - var(--host-gap--desktop))}: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(bt);
+const gt = [
   "",
   "default",
   "row",
   "row-reverse",
   "column",
   "column-reverse"
-], ht = [
+], vt = [
   "",
   "default",
   "stretch",
@@ -21,7 +21,7 @@ const ut = [
   "flex-end",
   "center",
   "baseline"
-], bt = [
+], xt = [
   "",
   "default",
   "flex-start",
@@ -30,10 +30,10 @@ const ut = [
   "space-between",
   "space-around",
   "space-evenly"
-], gt = ["", "default", "nowrap", "wrap", "wrap-reverse"], vt = ["", "visible", "hidden", "scroll", "auto"];
-class E extends T {
+], mt = ["", "default", "nowrap", "wrap", "wrap-reverse"], ft = ["", "visible", "hidden", "scroll", "auto"];
+class P extends M {
   constructor() {
-    super(B), this.overflowXAttributeDelegate = new F(
+    super(G), this.overflowXAttributeDelegate = new ot(
       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, rt);
         break;
       case "justify-content":
       case "justify-content--mobile":
@@ -98,7 +98,7 @@ class E extends T {
           t,
           e,
           i,
-          bt
+          xt
         );
         break;
       case "align-items":
@@ -106,37 +106,39 @@ class E extends T {
       case "align-items--tablet":
       case "align-items--laptop":
       case "align-items--desktop":
-        this.updateFlexProperties(t, e, i, ht);
+        this.updateFlexProperties(t, e, i, vt);
         break;
       case "wrap":
       case "wrap--mobile":
       case "wrap--tablet":
       case "wrap--laptop":
       case "wrap--desktop":
-        this.updateFlexProperties(t, e, i, gt);
+        this.updateFlexProperties(t, e, i, mt);
         break;
       case "direction":
       case "direction--mobile":
       case "direction--tablet":
       case "direction--laptop":
       case "direction--desktop":
-        this.updateFlexProperties(t, e, i, ut);
+        this.updateFlexProperties(t, e, i, gt);
         break;
       case "overflow-x":
       case "overflow-x--mobile":
       case "overflow-x--tablet":
       case "overflow-x--laptop":
       case "overflow-x--desktop":
-        this.updateOverflowX(t, e, i, vt);
+        this.updateOverflowX(t, e, i, ft);
         break;
       default:
         super.attributeChangedCallback(t, e, i);
         break;
     }
   }
-  updateOverflowX(t, e, i, o) {
-    if (!rt(o, i)) {
-      console.error(`${i} is not an allowed ${t} value`);
+  updateOverflowX(t, e, i, a) {
+    if (!nt(a, i)) {
+      f(
+        `${i} is not an allowed ${t} value for ${this.tagName.toLowerCase()}`
+      );
       return;
     }
     this.overflowXAttributeDelegate.attributeChangedCallback(
@@ -145,23 +147,28 @@ class E extends T {
       i
     );
   }
-  updateFlexProperties(t, e, i, o) {
-    this.checkName(o, i) || console.error(`${i} is not a valid value for ${o}`);
-    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);
+  updateFlexProperties(t, e, i, a) {
+    this.checkName(a, i) || f(
+      `${i} is not an allowed ${t} value for ${this.tagName.toLowerCase()}`
+    );
+    const r = t.indexOf("--") > -1, o = r ? t.split("--")[0] : t, l = [];
+    if (!r)
+      this.getAttribute(o + "--mobile") || l.push("mobile"), this.getAttribute(o + "--tablet") || l.push("tablet"), this.getAttribute(o + "--laptop") || l.push("laptop"), this.getAttribute(o + "--desktop") || l.push("desktop"), l.forEach((c) => {
+        this.updateStyle(o, c, e, a), this.updateStyle(o, c, i, a);
       });
     else {
       const c = t.split("--")[1];
-      this.updateStyle(l, c, e, o), this.updateStyle(l, c, i, o);
+      this.updateStyle(o, c, e, a), this.updateStyle(o, c, i, a);
     }
   }
-  updateStyle(t, e, i, o) {
-    i && (t === "gap" && o && o.includes(i) ? this.$el.style.setProperty(
+  updateStyle(t, e, i, a) {
+    i && (t === "gap" && a && a.includes(i) ? (this.$el.style.setProperty(
       `--flex-${t}--${e}-value`,
       `var(--px-spacing-${i}-${e === "laptop" ? "desktop" : e})`
-    ) : this.$el.style.setProperty(
+    ), this.style.setProperty(
+      `--host-gap--${e}`,
+      `var(--px-spacing-${i}-${e === "laptop" ? "desktop" : e})`
+    )) : this.$el.style.setProperty(
       `--flex-${t}--${e}-value`,
       i
     ));
@@ -350,8 +357,8 @@ class E extends T {
     return this.shadowRoot.querySelector(".flex-container");
   }
 }
-customElements.get("px-stack") || customElements.define("px-stack", E);
-class ft extends E {
+customElements.get("px-stack") || customElements.define("px-stack", P);
+class kt extends P {
   constructor() {
     super();
   }
@@ -359,8 +366,8 @@ class ft extends E {
     super.connectedCallback(), this.direction = "column", this.directionMobile = "column", this.directionTablet = "column", this.directionLaptop = "column", this.directionDesktop = "column";
   }
 }
-customElements.get("px-vstack") || customElements.define("px-vstack", ft);
-class xt extends E {
+customElements.get("px-vstack") || customElements.define("px-vstack", kt);
+class wt extends P {
   constructor() {
     super();
   }
@@ -368,19 +375,25 @@ class xt extends E {
     super.connectedCallback(), this.direction = "row", this.directionMobile = "row", this.directionTablet = "row", this.directionLaptop = "row", this.directionDesktop = "row";
   }
 }
-customElements.get("px-hstack") || customElements.define("px-hstack", xt);
-class mt extends HTMLElement {
+customElements.get("px-hstack") || customElements.define("px-hstack", wt);
+class yt extends HTMLElement {
   constructor() {
-    super();
+    super(), this.isZeroSized = !1, this.growValue = "1", this.isVertical = !1;
   }
   static get observedAttributes() {
-    return ["grow"];
+    return ["grow", "nogap"];
   }
   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.nogap && (this.resizeObserver = new ResizeObserver(() => {
+      this.handleSizeChange();
+    }), this.isVertical = this.parentElement.localName === "px-vstack" || this.parentElement.style.flexDirection === "column", 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 +401,34 @@ 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() {
+    this.isConnected && (this.style.display = "", this.style.flexGrow = this.growValue, this.handleSizeChange());
+  }
+  handleSizeChange() {
+    const t = this.getBoundingClientRect(), e = t.width === 0 && !this.isVertical || t.height === 0 && this.isVertical;
+    this.isZeroSized !== e && (this.isZeroSized = e, this.updateParticipation());
+  }
+  updateParticipation() {
+    this.isZeroSized ? (this.style.display = "none", this.style.flexGrow = "0") : (this.style.display = "", this.style.flexGrow = this.growValue);
+  }
+  get nogap() {
+    return this.hasAttribute("nogap");
+  }
+  set nogap(t) {
+    t ? this.setAttribute("nogap", "") : this.removeAttribute("nogap");
+  }
 }
-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);
-class yt extends T {
+customElements.get("px-spacer") || customElements.define("px-spacer", yt);
+const At = ":host{display:block;box-sizing:border-box}slot[name=body-container]{min-height:100vh}#image-sticky-box{margin-top:-2.5rem}", Z = new CSSStyleSheet();
+Z.replaceSync(At);
+class $t extends M {
   constructor() {
-    super(G), this.template = (t) => `
+    super(Z), this.template = (t) => `
     <px-container border-radius="none" padding="none">
       <px-vstack>
         <px-container id="header-container" border-radius="none">
@@ -571,7 +605,7 @@ class yt extends T {
         case "background-color":
           this.$bodyContainer.setAttribute(
             "background-color",
-            ot.indexOf(i) > 0 ? i : "none"
+            lt.indexOf(i) > 0 ? i : "none"
           );
           break;
         case "padding-vertical":
@@ -591,23 +625,24 @@ class yt extends T {
     this.$headerContainer.paddingLeft = t, this.$headerContainer.paddingRight = t, this.$bodyContainer.paddingLeft = t, this.$bodyContainer.paddingRight = t, this.$contactContainer.paddingLeft = t, this.$contactContainer.paddingRight = t, this.$footerContainer.paddingLeft = t, this.$footerContainer.paddingRight = t, this.$imageContainer.paddingLeft = t, this.$imageContainer.paddingRight = 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 At = ["", "default", "small"], $t = [
+customElements.get("px-page") === void 0 && customElements.define("px-page", $t);
+const St = ".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 screen and (min-width: 48rem){.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 screen and (min-width: 64.0625rem){.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)}}", B = new CSSStyleSheet();
+B.replaceSync(St);
+const Ct = ["", "default", "small"], zt = [
   "",
   "default",
   "secondary",
   "naked"
-], R = class R extends st {
+], $ = class $ extends ct {
   constructor() {
-    super(U), this.template = () => "<slot></slot>";
-    const t = document.createElement(this.nativeName);
+    super(B), this.template = () => "<slot></slot>";
+    const t = document.createElement($.nativeName);
     t.classList.add("btn-icon"), t.innerHTML = this.template(), this.shadowRoot.appendChild(t);
   }
   static get observedAttributes() {
     return [
       ...super.observedAttributes,
+      ...pt,
       "inverted",
       "loading",
       "size",
@@ -616,7 +651,6 @@ const At = ["", "default", "small"], $t = [
     ];
   }
   connectedCallback() {
-    super.connectedCallback();
     const t = this.querySelector("px-icon");
     if (t) {
       const e = t.getAttribute("size"), i = t.getAttribute("color");
@@ -624,7 +658,6 @@ const At = ["", "default", "small"], $t = [
         this.$el.focus();
       }), e || t.setAttribute("size", "s"), this.size === "small" && t.setAttribute("size", "xs"), i || t.setAttribute("color", "inherit");
     }
-    at(this, this.$el, !1);
   }
   attributeChangedCallback(t, e, i) {
     if (e !== i)
@@ -653,10 +686,14 @@ const At = ["", "default", "small"], $t = [
     this.$el.classList.toggle("btn-icon--state-loading");
   }
   updateSize(t, e) {
-    this.checkName(At, e) ? (t !== null && t !== "" && t !== "default" && this.$el.classList.toggle(`btn-icon--size-${t}`), e !== null && e !== "" && e !== "default" && this.$el.classList.toggle(`btn-icon--size-${e}`)) : console.error(`${e} is not a valid size value`);
+    this.checkName(Ct, e) ? (t !== null && t !== "" && t !== "default" && this.$el.classList.toggle(`btn-icon--size-${t}`), e !== null && e !== "" && e !== "default" && this.$el.classList.toggle(`btn-icon--size-${e}`)) : f(
+      `${e} is not a valid size value for ${this.tagName.toLowerCase()}`
+    );
   }
   updateVariant(t, e) {
-    this.checkName($t, e) ? (t !== null && t !== "" && t !== "default" && this.$el.classList.toggle(`btn-icon--variant-${t}`), e !== null && e !== "" && e !== "default" && this.$el.classList.toggle(`btn-icon--variant-${e}`)) : console.error(`${e} is not a valid variant value`);
+    this.checkName(zt, e) ? (t !== null && t !== "" && t !== "default" && this.$el.classList.toggle(`btn-icon--variant-${t}`), e !== null && e !== "" && e !== "default" && this.$el.classList.toggle(`btn-icon--variant-${e}`)) : f(
+      `${e} is not a valid variant value for ${this.tagName.toLowerCase()}`
+    );
   }
   get inverted() {
     return this.getAttribute("inverted");
@@ -689,10 +726,10 @@ const At = ["", "default", "small"], $t = [
     t ? this.setAttribute("aria-expanded", t) : this.removeAttribute("aria-expanded");
   }
 };
-R.nativeName = "button";
-let L = R;
-customElements.get("px-button-icon") || customElements.define("px-button-icon", L);
-class St extends HTMLElement {
+$.nativeName = "button";
+let I = $;
+customElements.get("px-button-icon") || customElements.define("px-button-icon", I);
+class Lt extends HTMLElement {
   constructor() {
     super();
   }
@@ -725,9 +762,10 @@ class St extends HTMLElement {
     t && t.remove();
   }
 }
-customElements.get("px-icon-set") || customElements.define("px-icon-set", St);
-const Ct = [
+customElements.get("px-icon-set") || customElements.define("px-icon-set", Lt);
+const jt = [
   "Brand",
+  "Accent",
   "Neutral",
   "Dimmed",
   "PurposeSuccess",
@@ -738,57 +776,58 @@ const Ct = [
   "StateHover",
   "StateActive",
   "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);
-const Lt = [
-  "name",
-  "size",
-  "color",
-  "aria-label",
-  "inverted",
-  "from",
-  "disabled"
-];
-var h, p, w;
-class Tt extends T {
+], Et = ["Inherit", ...jt].map(
+  (s) => s.replace(/([A-Z])/g, "-$1").toLowerCase().slice(1)
+), Tt = ":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-accent-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-accent-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(Tt);
+var h, d, S;
+class Rt extends M {
   constructor(...e) {
     var i;
-    super(...e, K);
-    m(this, h);
-    m(this, p);
-    m(this, w, () => `<svg aria-hidden="true">
-      <use xlink:href="#icon-${this.name}"></use>
+    super(...e, U);
+    x(this, h);
+    x(this, d);
+    x(this, S, () => `<svg aria-hidden="true">
+      <use></use>
     </svg>`);
-    this.shadowRoot.innerHTML = d(this, w).call(this), C(this, p, (i = this.attachInternals) == null ? void 0 : i.call(this)), d(this, p) && (d(this, p).role = "img");
+    this.shadowRoot.innerHTML = p(this, S).call(this), E(this, d, (i = this.attachInternals) == null ? void 0 : i.call(this)), p(this, d) && (p(this, d).role = "img");
   }
   static get observedAttributes() {
-    return [...super.observedAttributes, ...Lt];
+    return [
+      ...super.observedAttributes,
+      "name",
+      "size",
+      "color",
+      "aria-label",
+      "inverted",
+      "from",
+      "disabled"
+    ];
   }
-  attributeChangedCallback(e, i, o) {
-    if (i !== o)
+  attributeChangedCallback(e, i, a) {
+    if (i !== a)
       switch (e) {
         case "name":
-          this.updateName(i, o);
+          this.updateName(i, a);
           break;
         case "size":
-          this.updateAttribute(e, i, o, nt);
+          this.updateAttribute(e, i, a, dt);
           break;
         case "color":
-          this.updateAttribute(e, i, o, zt);
+          this.updateAttribute(e, i, a, Et);
           break;
         case "disabled":
           this.color = "state-disabled";
           break;
         case "aria-label":
-          if (!d(this, p))
+          if (!p(this, d))
             return;
-          o ? d(this, p).ariaHidden = "false" : d(this, p).ariaHidden = "true";
+          a ? (p(this, d).ariaHidden = "false", this.ariaHidden = "false") : (p(this, d).ariaHidden = "true", this.ariaHidden = "true");
           break;
       }
   }
   connectedCallback() {
+    this.role = "img";
     const e = document.querySelectorAll("px-icon-set");
     e || console.log("<px-icon-set> component not found");
     for (const i of e) {
@@ -796,20 +835,22 @@ class Tt extends T {
         console.error("Icon name or src not found");
         continue;
       }
-      i.getAttribute("name") === this.from && i.getAttribute("type") !== "font" && (C(this, h, i.getAttribute("src")), this.$el.firstElementChild.setAttribute(
-        "xlink:href",
-        `${d(this, h)}#icon-${this.name}`
+      i.getAttribute("name") === this.from && i.getAttribute("type") !== "font" && (E(this, h, i.getAttribute("src")), this.$el.firstElementChild.setAttribute(
+        "href",
+        `${p(this, h)}#icon-${this.name}`
       ));
     }
-    !this.ariaLabel && d(this, p) && (d(this, p).ariaHidden = "true");
+    !this.ariaLabel && p(this, d) && (p(this, d).ariaHidden = "true", this.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, a, r) {
+    i !== null && i !== "" && (e === "size" ? this.$el.classList.toggle(`${e}-${i}`) : this.$el.classList.toggle(i)), a !== null && a !== "" && (e === "size" ? this.$el.classList.toggle(`${e}-${a}`) : this.$el.classList.toggle(a)), this.checkName(r, a) || f(
+      `${a} is not an allowed ${e} value for ${this.tagName.toLowerCase()}`
+    );
   }
   updateName(e, i) {
-    d(this, h) && this.$el.firstElementChild.setAttribute(
-      "xlink:href",
-      `${d(this, h)}#icon-${i}`
+    p(this, h) && this.$el.firstElementChild.setAttribute(
+      "href",
+      `${p(this, h)}#icon-${i}`
     );
   }
   get $el() {
@@ -858,20 +899,20 @@ class Tt extends T {
     this.setAttribute("disabled", e);
   }
 }
-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);
-class It extends HTMLElement {
+h = new WeakMap(), d = new WeakMap(), S = new WeakMap();
+customElements.get("px-icon") || customElements.define("px-icon", Rt);
+const It = ":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 screen and (max-width: 47.938rem){.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(It);
+class Ht 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, a) => `<div id="seed-${a}" ${e === a ? "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"];
@@ -904,135 +945,133 @@ class It extends HTMLElement {
     return parseInt(this.getAttribute("active")) || 0;
   }
 }
-customElements.get("px-appleseed") || customElements.define("px-appleseed", It);
-function k(r) {
-  var t = typeof r;
-  return r != null && (t == "object" || t == "function");
+customElements.get("px-appleseed") || customElements.define("px-appleseed", Ht);
+function y(s) {
+  var t = typeof s;
+  return s != null && (t == "object" || t == "function");
 }
-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() {
+var Mt = typeof global == "object" && global && global.Object === Object && global, Pt = typeof self == "object" && self && self.Object === Object && self, J = Mt || Pt || Function("return this")(), R = function() {
   return J.Date.now();
-}, Pt = /\s/;
-function Dt(r) {
-  for (var t = r.length; t-- && Pt.test(r.charAt(t)); )
+}, Ot = /\s/;
+function Nt(s) {
+  for (var t = s.length; t-- && Ot.test(s.charAt(t)); )
     ;
   return t;
 }
-var Ht = /^\s+/;
-function qt(r) {
-  return r && r.slice(0, Dt(r) + 1).replace(Ht, "");
+var qt = /^\s+/;
+function Dt(s) {
+  return s && s.slice(0, Nt(s) + 1).replace(qt, "");
 }
-var y = J.Symbol, Q = Object.prototype, Wt = Q.hasOwnProperty, Ot = Q.toString, f = y ? y.toStringTag : void 0;
-function Nt(r) {
-  var t = Wt.call(r, f), e = r[f];
+var A = J.Symbol, Q = Object.prototype, Wt = Q.hasOwnProperty, Xt = Q.toString, m = A ? A.toStringTag : void 0;
+function Ft(s) {
+  var t = Wt.call(s, m), e = s[m];
   try {
-    r[f] = void 0;
+    s[m] = void 0;
     var i = !0;
   } catch {
   }
-  var o = Ot.call(r);
-  return i && (t ? r[f] = e : delete r[f]), o;
+  var a = Xt.call(s);
+  return i && (t ? s[m] = e : delete s[m]), a;
 }
-var Xt = Object.prototype, Ft = Xt.toString;
-function _t(r) {
-  return Ft.call(r);
+var _t = Object.prototype, Gt = _t.toString;
+function Zt(s) {
+  return Gt.call(s);
 }
-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 Bt = "[object Null]", Ut = "[object Undefined]", X = A ? A.toStringTag : void 0;
+function Kt(s) {
+  return s == null ? s === void 0 ? Ut : Bt : X && X in Object(s) ? Ft(s) : Zt(s);
 }
-function Kt(r) {
-  return r != null && typeof r == "object";
+function Jt(s) {
+  return s != null && typeof s == "object";
 }
-var Zt = "[object Symbol]";
-function Jt(r) {
-  return typeof r == "symbol" || Kt(r) && Ut(r) == Zt;
+var Qt = "[object Symbol]";
+function Yt(s) {
+  return typeof s == "symbol" || Jt(s) && Kt(s) == Qt;
 }
-var N = NaN, Qt = /^[-+]0x[0-9a-f]+$/i, Yt = /^0b[01]+$/i, Vt = /^0o[0-7]+$/i, te = parseInt;
-function X(r) {
-  if (typeof r == "number")
-    return r;
-  if (Jt(r))
-    return N;
-  if (k(r)) {
-    var t = typeof r.valueOf == "function" ? r.valueOf() : r;
-    r = k(t) ? t + "" : t;
-  }
-  if (typeof r != "string")
-    return r === 0 ? r : +r;
-  r = qt(r);
-  var e = Yt.test(r);
-  return e || Vt.test(r) ? te(r.slice(2), e ? 2 : 8) : Qt.test(r) ? N : +r;
+var F = NaN, Vt = /^[-+]0x[0-9a-f]+$/i, te = /^0b[01]+$/i, ee = /^0o[0-7]+$/i, ie = parseInt;
+function _(s) {
+  if (typeof s == "number")
+    return s;
+  if (Yt(s))
+    return F;
+  if (y(s)) {
+    var t = typeof s.valueOf == "function" ? s.valueOf() : s;
+    s = y(t) ? t + "" : t;
+  }
+  if (typeof s != "string")
+    return s === 0 ? s : +s;
+  s = Dt(s);
+  var e = te.test(s);
+  return e || ee.test(s) ? ie(s.slice(2), e ? 2 : 8) : Vt.test(s) ? F : +s;
 }
-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;
-  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 V(s) {
-    return b = s, a = setTimeout(x, t), M ? $(s) : l;
-  }
-  function tt(s) {
-    var u = s - c, v = s - b, H = t - u;
-    return g ? re(H, n - v) : H;
-  }
-  function P(s) {
-    var u = s - c, v = s - 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));
-  }
-  function D(s) {
-    return a = void 0, A && i ? $(s) : (i = o = void 0, l);
-  }
-  function et() {
-    a !== void 0 && clearTimeout(a), b = 0, i = c = o = a = void 0;
-  }
-  function it() {
-    return a === void 0 ? l : D(z());
-  }
-  function S() {
-    var s = z(), u = P(s);
-    if (i = arguments, o = this, c = s, u) {
-      if (a === void 0)
-        return V(c);
+var se = "Expected a function", ae = Math.max, oe = Math.min;
+function re(s, t, e) {
+  var i, a, r, o, l, c, b = 0, O = !1, g = !1, C = !0;
+  if (typeof s != "function")
+    throw new TypeError(se);
+  t = _(t) || 0, y(e) && (O = !!e.leading, g = "maxWait" in e, r = g ? ae(_(e.maxWait) || 0, t) : r, C = "trailing" in e ? !!e.trailing : C);
+  function z(n) {
+    var u = i, v = a;
+    return i = a = void 0, b = n, o = s.apply(v, u), o;
+  }
+  function et(n) {
+    return b = n, l = setTimeout(w, t), O ? z(n) : o;
+  }
+  function it(n) {
+    var u = n - c, v = n - b, D = t - u;
+    return g ? oe(D, r - v) : D;
+  }
+  function N(n) {
+    var u = n - c, v = n - b;
+    return c === void 0 || u >= t || u < 0 || g && v >= r;
+  }
+  function w() {
+    var n = R();
+    if (N(n))
+      return q(n);
+    l = setTimeout(w, it(n));
+  }
+  function q(n) {
+    return l = void 0, C && i ? z(n) : (i = a = void 0, o);
+  }
+  function st() {
+    l !== void 0 && clearTimeout(l), b = 0, i = c = a = l = void 0;
+  }
+  function at() {
+    return l === void 0 ? o : q(R());
+  }
+  function L() {
+    var n = R(), u = N(n);
+    if (i = arguments, a = this, c = n, u) {
+      if (l === void 0)
+        return et(c);
       if (g)
-        return clearTimeout(a), a = setTimeout(x, t), $(c);
+        return clearTimeout(l), l = setTimeout(w, t), z(c);
     }
-    return a === void 0 && (a = setTimeout(x, t)), l;
+    return l === void 0 && (l = setTimeout(w, t)), o;
   }
-  return S.cancel = et, S.flush = it, S;
+  return L.cancel = st, L.flush = at, L;
 }
-var se = "Expected a function";
-function ae(r, t, e) {
-  var i = !0, o = !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, {
+var ne = "Expected a function";
+function le(s, t, e) {
+  var i = !0, a = !0;
+  if (typeof s != "function")
+    throw new TypeError(ne);
+  return y(e) && (i = "leading" in e ? !!e.leading : i, a = "trailing" in e ? !!e.trailing : a), re(s, t, {
     leading: i,
     maxWait: t,
-    trailing: o
+    trailing: a
   });
 }
-const I = new CSSStyleSheet();
-I.replaceSync(ct);
-const ne = (r, t, e) => `:host([${r}${e ? `--${e}` : ""}='${t}']) .carousel`, le = "px-spacing", j = (r) => (t, e) => `calc(((100%  - ${Math.max(parseInt(t), 2)}  * ( var(--px-spacing-${r}-${e}))) / ${t}) - ( 64px / ${Math.max(parseInt(t), 2)}))`;
+const Y = new CSSStyleSheet();
+Y.replaceSync(ut);
+const V = "px-carousel-item-connected";
+var k, H;
 class ce extends HTMLElement {
   constructor() {
-    super(), this.visibleItemsAttributeDelegate = new F(
-      this,
-      "visible-items",
-      j("s"),
-      "--px-carousel-min-width"
-    ), this.template = `<px-vstack gap="default">
+    super();
+    x(this, k);
+    this.template = `<px-vstack gap="default">
     <div class="carousel">
       <slot></slot>
     </div>
@@ -1052,49 +1091,19 @@ class ce extends HTMLElement {
       </px-hstack>
     </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(
-        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();
-    }, this.attachShadow({ mode: "open" }), this.shadowRoot.innerHTML = this.template, this.shadowRoot.adoptedStyleSheets = [
-      I,
-      lt(
-        "gap",
-        ne,
-        _,
-        le
-      )
-    ];
-  }
-  static get observedAttributes() {
-    return ["visible-items"];
-  }
-  attributeChangedCallback(t, e, i) {
-    if (e !== i)
-      switch (t) {
-        case "gap":
-        case "gap--mobile":
-        case "gap--tablet":
-        case "gap--desktop":
-          this.visibleItemsAttributeDelegate.attributeValue = j(i);
-          break;
-        default:
-          this.visibleItemsAttributeDelegate.attributeChangedCallback(
-            t,
-            e,
-            i
-          );
-      }
+      const e = this.$carousel.scrollLeft, i = this.$carousel.scrollWidth, a = this.$carousel.clientWidth;
+      let r = 0;
+      window.innerWidth < 768 ? r = Math.round(
+        e / (i - a) * (this.itemNumbers - 1)
+      ) : Math.ceil(e + a) + 10 >= i ? r = this.itemNumbers - 1 : r = Math.floor(e / this.$firstItem.offsetWidth + 1) - 1;
+      let o = r;
+      this.itemNumbers > 5 && (r > 2 && r < this.itemNumbers - 2 ? o = 2 : r === this.itemNumbers - 2 ? o = 3 : r === this.itemNumbers - 1 && (o = 4)), this.$appleseed.setAttribute("active", `${o}`), this.handleNextPrevious();
+    }, this.attachShadow({ mode: "open" }), this.shadowRoot.innerHTML = this.template, this.shadowRoot.adoptedStyleSheets = [Y];
   }
   connectedCallback() {
-    this.visibleItemsAttributeDelegate.init("1"), this.visibleItemsAttributeDelegate.attributeValue = j(
-      this.getAttribute("gap") || "s"
-    ), requestAnimationFrame(() => {
-      this.handleAppleSeedDisplay();
-    }), this.$appleseed.setAttribute("amount", `${this.itemNumbers}`), this.$carousel.addEventListener("scroll", ae(this.onScroll, 500)), this.$previous.addEventListener("click", () => {
+    this.addEventListener(V, () => {
+      T(this, k, H).call(this);
+    }), T(this, k, H).call(this), this.$carousel.addEventListener("scroll", le(this.onScroll, 500)), this.$previous.addEventListener("click", () => {
       this.$carousel.scrollLeft -= this.$carousel.clientWidth;
     }), this.$next.addEventListener("click", () => {
       this.$carousel.scrollLeft += this.$carousel.clientWidth;
@@ -1103,8 +1112,8 @@ class ce extends HTMLElement {
     });
   }
   handleNextPrevious() {
-    const t = this.$carousel.scrollLeft, e = this.$carousel.scrollWidth, i = this.$carousel.clientWidth;
-    t === 0 ? this.$previous.setAttribute("disabled", "") : this.$previous.removeAttribute("disabled"), t + i >= e ? this.$next.setAttribute("disabled", "") : this.$next.removeAttribute("disabled");
+    const e = this.$carousel.scrollLeft, i = this.$carousel.scrollWidth, a = this.$carousel.clientWidth;
+    e === 0 ? this.$previous.setAttribute("disabled", "") : this.$previous.removeAttribute("disabled"), e + a >= i ? this.$next.setAttribute("disabled", "") : this.$next.removeAttribute("disabled");
   }
   handleAppleSeedDisplay() {
     this.isScrolling() ? this.$appleseedContainer.style.display = "block" : this.$appleseedContainer.style.display = "none";
@@ -1134,20 +1143,34 @@ class ce extends HTMLElement {
     return this.querySelectorAll("px-carousel-item").length;
   }
 }
+k = new WeakSet(), H = function() {
+  this.$appleseed.setAttribute("amount", `${this.itemNumbers}`), requestAnimationFrame(() => {
+    this.handleAppleSeedDisplay();
+  });
+};
 customElements.get("px-carousel") || customElements.define("px-carousel", ce);
-const Y = new CSSStyleSheet();
-Y.replaceSync(dt);
-class de extends HTMLElement {
+const tt = new CSSStyleSheet();
+tt.replaceSync(ht);
+class pe extends HTMLElement {
   constructor() {
     super(), this.template = `
   <div class="carousel-item">
     <slot></slot>
-  </div>`, this.attachShadow({ mode: "open" }), this.shadowRoot.innerHTML = this.template, this.shadowRoot.adoptedStyleSheets = [I, Y];
+  </div>`, this.attachShadow({ mode: "open" }), this.shadowRoot.innerHTML = this.template, this.shadowRoot.adoptedStyleSheets = [tt];
+  }
+  connectedCallback() {
+    this.dispatchEvent(
+      new CustomEvent(V, {
+        bubbles: !0,
+        composed: !0
+      })
+    );
   }
 }
-customElements.get("px-carousel-item") || customElements.define("px-carousel-item", de);
+customElements.get("px-carousel-item") || customElements.define("px-carousel-item", pe);
 export {
-  It as AppleSeed,
+  Ht as AppleSeed,
+  V as CAROUSEL_ITEM_CONNECTED_EVENT,
   ce as Carousel,
-  de as CarouselItem
+  pe as CarouselItem
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@proximus/lavender-carousel",
-  "version": "2.0.0-alpha.1",
+  "version": "2.0.0-alpha.100",
   "description": "",
   "main": "dist/index.es.js",
   "types": "dist/index.d.ts",
@@ -13,7 +13,7 @@
     "clean": "rm -rf dist",
     "build": "npm run clean && NODE_ENV=development vite build &&  tsc && npm run transform-package-json && npm run wc-manifest",
     "test": "vitest run --coverage",
-    "wc-manifest": "cem analyze --globs \"src/*\" --config ../custom-elements-manifest.config.js  --outdir dist"
+    "wc-manifest": "cem analyze --globs \"src/*\" --config ../../custom-elements-manifest.config.js  --outdir dist"
   },
   "publishConfig": {
     "access": "public"