@proximus/lavender 1.0.0-alpha.7 → 1.0.0-alpha.9

package/dist/lavender.es.js

@@ -6,6 +6,14 @@ function getSupportedAttributeNames(htmlElementName) {
 }
 const commonStyleSheet = new CSSStyleSheet();
 commonStyleSheet.replaceSync(commonStyles);
+function replayAttributes(element, observedAttributes, callback) {
+  observedAttributes.forEach((name) => {
+    const value = element.getAttribute(name);
+    if (value !== null) {
+      callback(name, value);
+    }
+  });
+}
 class WithFlexAttributes extends HTMLElement {
   static get observedAttributes() {
     return [
@@ -185,6 +193,9 @@ class PxElement extends WithFlexAttributes {
     this.nativeName = Object.getPrototypeOf(this).constructor.nativeName;
   }
   connectedCallback() {
+    replayAttributes(this, PxElement.observedAttributes, (name, value) => {
+      this.attributeChangedCallback(name, null, value);
+    });
     for (const name of getSupportedAttributeNames(this.nativeName)) {
       if (name === "constructor") {
         continue;
@@ -262,7 +273,17 @@ const iconSizeValues = [
 ];
 const paddingValues = ["", "none", "2xs", "xs", "s", "m", "l", "xl"];
 const borderValues = ["", "none", "s", "m", "l"];
-const borderRadiusValues = ["", "none", "xs", "s", "m", "l", "xl", "2xl", "pill"];
+const borderRadiusValues = [
+  "",
+  "none",
+  "xs",
+  "s",
+  "m",
+  "l",
+  "xl",
+  "2xl",
+  "pill"
+];
 const bgColorValues = [
   "",
   "none",
@@ -362,17 +383,19 @@ function getViewportFormat() {
 const semanticStylesheet = ":host>*:first-child{--px-color-bg-action-primary-default: #5C2D91;--px-color-bg-action-primary-inverted: #ffffff;--px-color-bg-action-secondary-default: rgba(92, 45, 145, .16);--px-color-bg-action-secondary-inverted: rgba(255, 255, 255, .24);--px-color-bg-action-hover-inverted-default: rgba(255, 255, 255, .4);--px-color-bg-action-hover-inverted-inverted: rgba(0, 0, 0, .8);--px-color-bg-action-hover-default: rgba(0, 0, 0, .12);--px-color-bg-action-hover-inverted: rgba(255, 255, 255, .16);--px-color-bg-action-disabled-default: rgba(0, 0, 0, .04);--px-color-bg-action-disabled-inverted: rgba(255, 255, 255, .08);--px-color-bg-action-active-default: #8D79AD;--px-color-bg-action-active-inverted: rgba(255, 255, 255, .8);--px-color-border-main-default: rgba(0, 0, 0, .12);--px-color-border-main-inverted: rgba(255, 255, 255, .16);--px-color-border-contrasted-default: rgba(0, 0, 0, .56);--px-color-border-contrasted-inverted: rgba(255, 255, 255, .64);--px-color-border-action-hover-default: #5C2D91;--px-color-border-action-hover-inverted: #ffffff;--px-color-border-action-active-default: #8D79AD;--px-color-border-action-active-inverted: rgba(255, 255, 255, .8);--px-color-border-none-default: rgba(255, 255, 255, 0);--px-color-border-none-inverted: rgba(255, 255, 255, 0);--px-color-border-success-default: #008000;--px-color-border-success-inverted: #26BB26;--px-color-border-error-default: #B30000;--px-color-border-error-inverted: #F22613;--px-color-border-warning-default: #AC5915;--px-color-border-warning-inverted: #DB992F;--px-color-border-unlimited-default: #016BC1;--px-color-border-unlimited-inverted: #7295CF;--px-color-bg-container-none-default: rgba(255, 255, 255, 0);--px-color-bg-container-none-inverted: rgba(0, 0, 0, 0);--px-color-bg-container-weak-default: rgba(0, 0, 0, .08);--px-color-bg-container-weak-inverted: rgba(255, 255, 255, .12);--px-color-bg-container-moderate-default: rgba(0, 0, 0, .04);--px-color-bg-container-moderate-inverted: rgba(255, 255, 255, .08);--px-color-bg-container-strong-default: rgba(0, 0, 0, .08);--px-color-bg-container-strong-inverted: rgba(255, 255, 255, .12);--px-color-bg-container-rich-default: #252525;--px-color-bg-container-rich-inverted: #ffffff;--px-color-bg-container-main-default: #ffffff;--px-color-bg-container-main-inverted: #ffffff;--px-color-bg-gradient-purple-bottom-red: 180deg, #5C2D91 66%, #EE2E5D 100%;--px-color-bg-gradient-purple-bottom-magenta: 180deg, #5C2D91 66%, #FF418C 100%;--px-color-bg-gradient-purple-bottom-orange: 180deg, #5C2D91 66%, #F39200 100%;--px-color-bg-gradient-purple-bottom-blue: 180deg, #5C2D91 66%, #00BCEE 100%;--px-color-bg-gradient-purple-bottom-turquoise: 180deg, #5C2D91 66%, #66D2CC 100%;--px-color-bg-gradient-purple-bottom-green: 180deg, #5C2D91 66%, #81C747 100%;--px-color-bg-gradient-purple-right-red: 90deg, #5C2D91 66%, #EE2E5D 100%;--px-color-bg-gradient-purple-right-magenta: 90deg, #5C2D91 66%, #FF418C 100%;--px-color-bg-gradient-purple-right-orange: 90deg, #5C2D91 66%, #F39200 100%;--px-color-bg-gradient-purple-right-blue: 90deg, #5C2D91 66%, #00BCEE 100%;--px-color-bg-gradient-purple-right-turquoise: 90deg, #5C2D91 66%, #66D2CC 100%;--px-color-bg-gradient-purple-right-green: 90deg, #5C2D91 66%, #81C747 100%;--px-color-bg-gradient-purple-top-right-red: 25deg, #5C2D91 66%, #EE2E5D 100%;--px-color-bg-gradient-purple-top-right-magenta: 25deg, #5C2D91 66%, #FF418C 100%;--px-color-bg-gradient-purple-top-right-orange: 25deg, #5C2D91 66%, #F39200 100%;--px-color-bg-gradient-purple-top-right-blue: 25deg, #5C2D91 66%, #00BCEE 100%;--px-color-bg-gradient-purple-top-right-turquoise: 25deg, #5C2D91 66%, #66D2CC 100%;--px-color-bg-gradient-purple-top-right-green: 25deg, #5C2D91 66%, #81C747 100%;--px-color-bg-gradient-purple-bottom-right-red: 155deg, #5C2D91 66%, #EE2E5D 100%;--px-color-bg-gradient-purple-bottom-right-magenta: 155deg, #5C2D91 66%, #FF418C 100%;--px-color-bg-gradient-purple-bottom-right-orange: 155deg, #5C2D91 66%, #F39200 100%;--px-color-bg-gradient-purple-bottom-right-blue: 155deg, #5C2D91 66%, #00BCEE 100%;--px-color-bg-gradient-purple-bottom-right-turquoise: 155deg, #5C2D91 66%, #66D2CC 100%;--px-color-bg-gradient-purple-bottom-right-green: 155deg, #5C2D91 66%, #81C747 100%;--px-color-bg-gradient-color-bottom-red: 180deg, #5C2D91 3%, #EE2E5D 66%;--px-color-bg-gradient-color-bottom-magenta: 180deg, #5C2D91 3%, #FF418C 66%;--px-color-bg-gradient-color-bottom-orange: 180deg, #5C2D91 3%, #F39200 66%;--px-color-bg-gradient-color-bottom-blue: 180deg, #5C2D91 3%, #00BCEE 66%;--px-color-bg-gradient-color-bottom-turquoise: 180deg, #5C2D91 3%, #66D2CC 66%;--px-color-bg-gradient-color-bottom-green: 180deg, #5C2D91 3%, #81C747 66%;--px-color-bg-gradient-color-right-red: 90deg, #5C2D91 3%, #EE2E5D 66%;--px-color-bg-gradient-color-right-magenta: 90deg, #5C2D91 3%, #FF418C 66%;--px-color-bg-gradient-color-right-orange: 90deg, #5C2D91 3%, #F39200 66%;--px-color-bg-gradient-color-right-blue: 90deg, #5C2D91 3%, #00BCEE 66%;--px-color-bg-gradient-color-right-turquoise: 90deg, #5C2D91 3%, #66D2CC 66%;--px-color-bg-gradient-color-right-green: 90deg, #5C2D91 3%, #81C747 66%;--px-color-bg-gradient-color-top-right-red: 25deg, #5C2D91 3%, #EE2E5D 66%;--px-color-bg-gradient-color-top-right-magenta: 25deg, #5C2D91 3%, #FF418C 66%;--px-color-bg-gradient-color-top-right-orange: 25deg, #5C2D91 3%, #F39200 66%;--px-color-bg-gradient-color-top-right-blue: 25deg, #5C2D91 3%, #00BCEE 66%;--px-color-bg-gradient-color-top-right-turquoise: 25deg, #5C2D91 3%, #66D2CC 66%;--px-color-bg-gradient-color-top-right-green: 25deg, #5C2D91 3%, #81C747 66%;--px-color-bg-gradient-color-bottom-right-red: 155deg, #5C2D91 3%, #EE2E5D 66%;--px-color-bg-gradient-color-bottom-right-magenta: 155deg, #5C2D91 3%, #FF418C 66%;--px-color-bg-gradient-color-bottom-right-orange: 155deg, #5C2D91 3%, #F39200 66%;--px-color-bg-gradient-color-bottom-right-blue: 155deg, #5C2D91 3%, #00BCEE 66%;--px-color-bg-gradient-color-bottom-right-turquoise: 155deg, #5C2D91 3%, #66D2CC 66%;--px-color-bg-gradient-color-bottom-right-green: 155deg, #5C2D91 3%, #81C747 66%;--px-color-bg-notification-default: #DE2A56;--px-color-bg-notification-inverted: #DE2A56;--px-color-bg-promo-default: #DE2A56;--px-color-bg-promo-inverted: #E43C65;--px-color-bg-success-default: #008000;--px-color-bg-success-inverted: #26BB26;--px-color-bg-error-default: #B30000;--px-color-bg-error-inverted: #F22613;--px-color-bg-warning-default: #AC5915;--px-color-bg-warning-inverted: #DB992F;--px-color-bg-unlimited-default: #016BC1;--px-color-bg-unlimited-inverted: #7295CF;--px-color-canvas-weak: #f9f9f9;--px-color-canvas-light: #e4e4e4;--px-color-canvas-soft: #c6c6c6;--px-color-canvas-moderate: #a1a1a1;--px-color-canvas-strong: #727272;--px-color-canvas-deep: #464646;--px-color-canvas-rich: #252525;--px-color-datavis-green: #008000;--px-color-datavis-orange: #F39200;--px-color-datavis-red: #B30000;--px-color-datavis-magenta: #FF418C;--px-color-datavis-blue: #016BC1;--px-color-datavis-turquoise: #66D2CC;--px-color-icon-primary-default: #5C2D91;--px-color-icon-primary-inverted: #ffffff;--px-color-icon-body-default: #252525;--px-color-icon-body-inverted: #ffffff;--px-color-icon-details-default: rgba(0, 0, 0, .56);--px-color-icon-details-inverted: rgba(255, 255, 255, .64);--px-color-icon-hover-default: #8D79AD;--px-color-icon-hover-inverted: rgba(255, 255, 255, .8);--px-color-icon-active-default: #8D79AD;--px-color-icon-active-inverted: rgba(255, 255, 255, .8);--px-color-icon-disabled-default: rgba(0, 0, 0, .12);--px-color-icon-disabled-inverted: rgba(255, 255, 255, .16);--px-color-icon-success-default: #008000;--px-color-icon-success-inverted: #26BB26;--px-color-icon-warning-default: #AC5915;--px-color-icon-warning-inverted: #DB992F;--px-color-icon-error-default: #B30000;--px-color-icon-error-inverted: #F22613;--px-color-icon-unlimited-default: #016BC1;--px-color-icon-unlimited-inverted: #7295CF;--px-color-icon-promo-default: #DE2A56;--px-color-icon-promo-inverted: #FF4371;--px-color-illu-purple-bare: #F4F2F6;--px-color-illu-purple-weak: #E8E5ED;--px-color-illu-purple-light: #CEC8DA;--px-color-illu-purple-soft: #B0A5C5;--px-color-illu-purple-moderate: #8D79AD;--px-color-illu-purple-strong: #472370;--px-color-illu-red-weak: #F9E5E7;--px-color-illu-red-soft: #ECA5AE;--px-color-illu-red-core: #DE2A56;--px-color-illu-magenta-weak: #FFE6ED;--px-color-illu-magenta-soft: #FFA9C2;--px-color-illu-magenta-core: #FF418C;--px-color-illu-orange-weak: #FDEDE4;--px-color-illu-orange-soft: #F8C5A1;--px-color-illu-orange-core: #F39200;--px-color-illu-blue-bare: #F2F9FD;--px-color-illu-blue-weak: #E4F3FC;--px-color-illu-blue-soft: #A1D9F5;--px-color-illu-blue-core: #00BCEE;--px-color-illu-turquoise-weak: #E9F7F6;--px-color-illu-turquoise-soft: #B4E5E2;--px-color-illu-turquoise-moderate: #92DCD7;--px-color-illu-turquoise-core: #66D2CC;--px-color-illu-green-weak: #EBF5E6;--px-color-illu-green-soft: #BEDFAA;--px-color-illu-green-core: #81C747;--px-color-illu-yellow-core: #FFCA00;--px-color-txt-primary-default: #5C2D91;--px-color-txt-primary-inverted: #ffffff;--px-color-txt-inverted-primary-default: #ffffff;--px-color-txt-inverted-primary-inverted: #5C2D91;--px-color-txt-inverted-default: #ffffff;--px-color-txt-inverted-inverted: #252525;--px-color-txt-body-default: #252525;--px-color-txt-body-inverted: #ffffff;--px-color-txt-details-default: rgba(0, 0, 0, .56);--px-color-txt-details-inverted: rgba(255, 255, 255, .64);--px-color-txt-hover-default: #8D79AD;--px-color-txt-hover-inverted: rgba(255, 255, 255, .8);--px-color-txt-disabled-default: rgba(0, 0, 0, .12);--px-color-txt-disabled-inverted: rgba(255, 255, 255, .16);--px-color-txt-active-default: #8D79AD;--px-color-txt-active-inverted: rgba(255, 255, 255, .8);--px-color-txt-promo-default: #DE2A56;--px-color-txt-promo-inverted: #FF4371;--px-color-txt-status-success-default: #008000;--px-color-txt-status-success-inverted: #26BB26;--px-color-txt-status-error-default: #B30000;--px-color-txt-status-error-inverted: #F22613;--px-color-txt-status-warning-default: #AC5915;--px-color-txt-status-warning-inverted: #DB992F;--px-color-txt-status-unlimited-default: #016BC1;--px-color-txt-status-unlimited-inverted: #7295CF;--px-breakpoints-mobile-min: 0px;--px-breakpoints-mobile-max: 767px;--px-breakpoints-tablet-min: 768px;--px-breakpoints-tablet-max: 1024px;--px-breakpoints-laptop-min: 1025px;--px-breakpoints-laptop-max: 1440px;--px-breakpoints-desktop-min: 1441px;--px-breakpoints-desktop-max: 99999px;--px-border-none: 0px;--px-border-s: 1px;--px-border-m: 2px;--px-border-l: 3px;--px-radius-none: 0px;--px-radius-xs: 3px;--px-radius-s: 4px;--px-radius-m: 8px;--px-radius-l: 12px;--px-radius-xl: 16px;--px-radius-2xl: 22px;--px-radius-pill: 9999px;--px-shadow-none: 0px 0px 0px 0px #00000080;--px-shadow-s: 0px 1px 2px 0px rgba(0, 0, 0, .12);--px-shadow-m: 0px 4px 6px -1px rgba(0, 0, 0, .08);--px-shadow-l: 0px 10px 15px -3px rgba(0, 0, 0, .08);--px-shadow-xl: 0px 20px 25px -5px rgba(0, 0, 0, .08);--px-spacing-between-icon-horizontal: 8px;--px-spacing-text-to-icon-compact-horizontal: 4px;--px-spacing-text-to-icon-horizontal: 24px;--px-spacing-component-compact-horizontal: 16px;--px-spacing-component-default-horizontal: 20px;--px-spacing-component-expanded-horizontal: 80px;--px-spacing-between-icon-horizontal-mobile: 8px;--px-spacing-text-to-icon-horizontal-mobile: 16px;--px-spacing-component-compact-horizontal-mobile: 8px;--px-spacing-component-default-horizontal-mobile: 16px;--px-spacing-component-expanded-horizontal-mobile: 32px;--px-padding-none: 0px;--px-padding-2xs: 4px;--px-padding-xs: 8px;--px-padding-s: 16px;--px-padding-m: 24px;--px-padding-l: 32px;--px-padding-xl: 40px;--px-padding-none-mobile: 0px;--px-padding-2xs-mobile: 4px;--px-padding-xs-mobile: 8px;--px-padding-s-mobile: 16px;--px-padding-mobile-mobile: 24px;--px-padding-l-mobile: 24px;--px-padding-xl-mobile: 24px;--px-size-action: 44px;--px-size-input-box: 44px;--px-size-default: 44px;--px-size-action-mobile: 40px;--px-size-input-box-mobile: 40px;--px-size-default-mobile: 40px;--px-spacing-between-options-vertical: 0px;--px-spacing-under-text-vertical: 8px;--px-spacing-display-to-subtitle-vertical: 16px;--px-spacing-under-display-vertical: 24px;--px-spacing-component-default-vertical: 24px;--px-spacing-component-expanded-vertical: 40px;--px-spacing-between-section-vertical: 80px;--px-spacing-between-options-vertical-mobile: 0px;--px-spacing-under-text-vertical-mobile: 8px;--px-spacing-display-to-subtitle-vertical-mobile: 8px;--px-spacing-under-display-vertical-mobile: 16px;--px-spacing-component-default-vertical-mobile: 16px;--px-spacing-component-expanded-vertical-mobile: 16px;--px-spacing-between-section-vertical-mobile: 32px;--px-icon-size-2xs-mobile: 12px;--px-icon-size-2xs-tablet: 12px;--px-icon-size-2xs-desktop: 12px;--px-icon-size-xs-mobile: 16px;--px-icon-size-xs-tablet: 16px;--px-icon-size-xs-desktop: 16px;--px-icon-size-s-mobile: 20px;--px-icon-size-s-tablet: 20px;--px-icon-size-s-desktop: 20px;--px-icon-size-m-mobile: 24px;--px-icon-size-m-tablet: 24px;--px-icon-size-m-desktop: 24px;--px-icon-size-l-mobile: 32px;--px-icon-size-l-tablet: 32px;--px-icon-size-l-desktop: 32px;--px-icon-size-xl-mobile: 40px;--px-icon-size-xl-tablet: 40px;--px-icon-size-xl-desktop: 40px;--px-icon-size-2xl-mobile: 48px;--px-icon-size-2xl-tablet: 48px;--px-icon-size-2xl-desktop: 48px;--px-line-height-xs-mobile: 15px;--px-line-height-xs-tablet: 15px;--px-line-height-xs-desktop: 18px;--px-line-height-s-mobile: 18px;--px-line-height-s-tablet: 18px;--px-line-height-s-desktop: 21px;--px-line-height-base-mobile: 21px;--px-line-height-base-tablet: 21px;--px-line-height-base-desktop: 24px;--px-line-height-m-mobile: 24px;--px-line-height-m-tablet: 24px;--px-line-height-m-desktop: 27px;--px-line-height-l-mobile: 27px;--px-line-height-l-tablet: 27px;--px-line-height-l-desktop: 30px;--px-line-height-xl-mobile: 30px;--px-line-height-xl-tablet: 30px;--px-line-height-xl-desktop: 36px;--px-line-height-2xl-mobile: 36px;--px-line-height-2xl-tablet: 36px;--px-line-height-2xl-desktop: 42px;--px-line-height-3xl-mobile: 42px;--px-line-height-3xl-tablet: 42px;--px-line-height-3xl-desktop: 48px;--px-line-height-4xl-mobile: 48px;--px-line-height-4xl-tablet: 48px;--px-line-height-4xl-desktop: 54px;--px-line-height-5xl-mobile: 54px;--px-line-height-5xl-tablet: 54px;--px-line-height-5xl-desktop: 60px;--px-line-height-6xl-mobile: 60px;--px-line-height-6xl-tablet: 60px;--px-line-height-6xl-desktop: 72px;--px-text-size-xs-mobile: 10px;--px-text-size-xs-tablet: 10px;--px-text-size-xs-desktop: 12px;--px-text-size-s-mobile: 12px;--px-text-size-s-tablet: 12px;--px-text-size-s-desktop: 14px;--px-text-size-base-mobile: 14px;--px-text-size-base-tablet: 14px;--px-text-size-base-desktop: 16px;--px-text-size-m-mobile: 16px;--px-text-size-m-tablet: 16px;--px-text-size-m-desktop: 18px;--px-text-size-l-mobile: 18px;--px-text-size-l-tablet: 18px;--px-text-size-l-desktop: 20px;--px-text-size-xl-mobile: 20px;--px-text-size-xl-tablet: 20px;--px-text-size-xl-desktop: 24px;--px-text-size-2xl-mobile: 24px;--px-text-size-2xl-tablet: 24px;--px-text-size-2xl-desktop: 28px;--px-text-size-3xl-mobile: 28px;--px-text-size-3xl-tablet: 28px;--px-text-size-3xl-desktop: 32px;--px-text-size-4xl-mobile: 32px;--px-text-size-4xl-tablet: 32px;--px-text-size-4xl-desktop: 36px;--px-text-size-5xl-mobile: 36px;--px-text-size-5xl-tablet: 36px;--px-text-size-5xl-desktop: 40px;--px-text-size-6xl-mobile: 40px;--px-text-size-6xl-tablet: 40px;--px-text-size-6xl-desktop: 48px;--px-text-size-7xl-mobile: 48px;--px-text-size-7xl-tablet: 48px;--px-text-size-7xl-desktop: 64px}";
 const proximusSemanticStyleSheet = new CSSStyleSheet();
 proximusSemanticStyleSheet.replaceSync(semanticStylesheet);
-const styles$d = ".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)}@media screen and (min-width: 768px){.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)}}@media screen and (min-width: 1025px){.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)}}@media screen and (min-width: 1441px){.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)}}";
-const styleSheet$c = new CSSStyleSheet();
-styleSheet$c.replaceSync(styles$d);
+const styles$e = ".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)}@media screen and (min-width: 768px){.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)}}@media screen and (min-width: 1025px){.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)}}@media screen and (min-width: 1441px){.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)}}";
+const styleSheet$d = new CSSStyleSheet();
+styleSheet$d.replaceSync(styles$e);
 const gapValues = [
   // Vertical
+  "between-section-vertical",
   "between-options-vertical",
   "under-text-vertical",
   "display-to-subtitle-vertical",
   "under-display-vertical",
   "component-default-vertical",
   "component-expanded-vertical",
+  "between-section-vertical-mobile",
   "between-options-vertical-mobile",
   "under-text-vertical-mobile",
   "display-to-subtitle-vertical-mobile",
@@ -394,13 +417,16 @@ const gapValues = [
 ];
 class Stack extends WithFlexAttributes {
   constructor(semanticTokensStylesheet) {
-    super(semanticTokensStylesheet, styleSheet$c);
+    super(semanticTokensStylesheet, styleSheet$d);
     this.template = `<div class="flex-container">
       <slot></slot>
   </div>`;
     this.shadowRoot.innerHTML = this.template;
   }
   connectedCallback() {
+    replayAttributes(this, Stack.observedAttributes, (name, value) => {
+      this.attributeChangedCallback(name, null, value);
+    });
     if (!this.hasAttribute("direction")) {
       this.direction = "row";
     }
@@ -590,7 +616,6 @@ class Stack extends WithFlexAttributes {
     }
   }
   getGapCSSVariable(newValue) {
-    console.log(newValue);
     return gapValues.includes(newValue) ? `var(--px-spacing-${newValue})` : newValue;
   }
   get direction() {
@@ -818,12 +843,12 @@ class Spacer extends HTMLElement {
   }
 }
 customElements.define("px-spacer", Spacer);
-const styles$c = "slot[name=heading]{display:block;margin-top:1rem;margin-bottom:1rem}";
-const styleSheet$b = new CSSStyleSheet();
-styleSheet$b.replaceSync(styles$c);
-class Section extends WithFlexAttributes {
+const styles$d = "slot[name=heading]{display:block;margin-top:1rem;margin-bottom:1rem}";
+const styleSheet$c = new CSSStyleSheet();
+styleSheet$c.replaceSync(styles$d);
+let Section$1 = class Section extends WithFlexAttributes {
   constructor() {
-    super(styleSheet$b);
+    super(styleSheet$c);
     this.template = `
   <section>
     <slot name="heading"></slot>
@@ -852,27 +877,43 @@ class Section extends WithFlexAttributes {
   get $el() {
     return this.shadowRoot.querySelector('px-stack[direction="column"]');
   }
-}
-customElements.define("px-section", Section);
-const styles$b = ":host{display:block;box-sizing:border-box}slot[name=body-container]{min-height:100vh}#image-sticky-box{margin-top:-2.5rem}";
-const styleSheet$a = new CSSStyleSheet();
-styleSheet$a.replaceSync(styles$b);
+};
+customElements.define("px-section-damien", Section$1);
+const styles$c = ":host{display:block;box-sizing:border-box}slot[name=body-container]{min-height:100vh}#image-sticky-box{margin-top:-2.5rem}";
+const styleSheet$b = new CSSStyleSheet();
+styleSheet$b.replaceSync(styles$c);
 class Page extends WithFlexAttributes {
   constructor() {
-    super(proximusSemanticStyleSheet, styleSheet$a);
+    super(proximusSemanticStyleSheet, styleSheet$b);
     this.template = (stickyContainer) => `
-    <px-container borderradius="none" padding="none" >
+    <px-container borderradius="none" padding="none">
       <px-vstack>
-        <px-container id="header-container"  borderradius="none">
+        <px-container id="header-container" borderradius="none">
           <px-hstack>
             <px-spacer></px-spacer>
-            <px-vstack id="header-vstack-container" gap="1rem" grow="${this.grow}" basis="${this.basis}">
+            <px-vstack
+              id="header-vstack-container"
+              gap="1rem"
+              grow="${this.grow}"
+              basis="${this.basis}"
+            >
               <slot name="header-container"></slot>
             </px-vstack>
             <px-spacer></px-spacer>
           </px-hstack>
         </px-container>
-        <px-container id="image-container"  borderradius="none" padding="none" paddingtop="xl" id="image-box" bgimgsize="cover" bgimgposition="top center" paddingbottom="xl" borderradius="none" bgimg="${this.backgroundImage}">
+        <px-container
+          id="image-container"
+          borderradius="none"
+          padding="none"
+          paddingtop="xl"
+          id="image-box"
+          bgimgsize="cover"
+          bgimgposition="top center"
+          paddingbottom="xl"
+          borderradius="none"
+          bgimg="${this.backgroundImage}"
+        >
           <px-hstack>
             <px-spacer></px-spacer>
             <px-vstack grow="${this.grow}" basis="${this.basis}">
@@ -890,25 +931,52 @@ class Page extends WithFlexAttributes {
         </px-container>
         <px-spacer></px-spacer>
       </px-hstack>` : ""}
-        <px-container id="body-container"  id="main" bgcolor="${this.backgroundColor}" padding="none" paddingtop="xl" paddingbottom="xl" >
+        <px-container
+          id="body-container"
+          id="main"
+          bgcolor="${this.backgroundColor}"
+          padding="none"
+          paddingtop="xl"
+          paddingbottom="xl"
+        >
           <px-hstack>
             <px-spacer></px-spacer>
-            <px-vstack id="body-vstack-container" gap="3rem" grow="${this.grow}" basis="${this.basis}">
+            <px-vstack
+              id="body-vstack-container"
+              gap="3rem"
+              grow="${this.grow}"
+              basis="${this.basis}"
+            >
               <slot name="body-container"></slot>
             </px-vstack>
             <px-spacer></px-spacer>
           </px-hstack>
         </px-container>
-        <px-container id="contact-container" borderradius="none" id="main" bgcolor="strong" padding="none"  paddingtop="xl" paddingbottom="xl">
+        <px-container
+          id="contact-container"
+          borderradius="none"
+          id="main"
+          bgcolor="strong"
+          padding="none"
+          paddingtop="xl"
+          paddingbottom="xl"
+        >
           <px-hstack>
             <px-spacer></px-spacer>
-            <px-vstack  gap="3rem" grow="${this.grow}" basis="${this.basis}">
+            <px-vstack gap="3rem" grow="${this.grow}" basis="${this.basis}">
               <slot name="contact-container"></slot>
             </px-vstack>
             <px-spacer></px-spacer>
           </px-hstack>
         </px-container>
-        <px-container id="footer-container"  bgcolor="none" borderradius="none" style="background-color: rgb(108, 66, 156)"   paddingtop="xl" paddingbottom="xl">
+        <px-container
+          id="footer-container"
+          bgcolor="none"
+          borderradius="none"
+          style="background-color: rgb(108, 66, 156)"
+          paddingtop="xl"
+          paddingbottom="xl"
+        >
           <px-hstack>
             <px-spacer></px-spacer>
             <px-vstack gap="3rem" grow="${this.grow}" basis="${this.basis}">
@@ -977,6 +1045,9 @@ class Page extends WithFlexAttributes {
   set paddingHorizontal(value) {
     this.setAttribute("padding-horizontal", value);
   }
+  get gap() {
+    return this.getAttribute("gap");
+  }
   connectedCallback() {
     this.handlePaddingVerticalChange(this.paddingVertical);
     this.handlePaddingHorizontalChange(this.paddingHorizontal);
@@ -1024,114 +1095,42 @@ class Page extends WithFlexAttributes {
 if (customElements.get("px-page") === void 0) {
   customElements.define("px-page", Page);
 }
-const accordionCss = `details{font-family:Proximus,Verdana,Helvetica,sans-serif;display:flex;flex-direction:column;align-items:flex-start}details:not(.single){border-bottom:var(--px-border-m) solid var(--px-color-border-main-default)}details:not(.single) ::slotted([slot="title"]){flex-grow:1}details:not(.single) slot[name=content]{display:block;padding-block:var(--px-spacing-component-default-vertical)}summary{align-items:center;transition:all .2s ease-out 0s,backdrop-filter 0s,-webkit-backdrop-filter 0s}details:not(.single) summary{display:flex;padding:var(--px-padding-s);gap:var(--px-spacing-text-to-icon-horizontal);align-self:stretch}summary:after{content:"";width:24px;height:24px;flex-shrink:0;background-color:var(--px-color-bg-action-secondary-default);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cg id='CHEVRON DOWN'%3E%3Cpath id='Vector' fill-rule='evenodd' clip-rule='evenodd' d='M12.4714 6.19524C12.2111 5.93489 11.7889 5.93489 11.5286 6.19524L8 9.72384L4.4714 6.19524C4.21105 5.93489 3.78894 5.93489 3.52859 6.19524C3.26824 6.45559 3.26824 6.8777 3.52859 7.13805L7.52859 11.1381C7.78894 11.3984 8.21105 11.3984 8.4714 11.1381L12.4714 7.13805C12.7318 6.8777 12.7318 6.45559 12.4714 6.19524Z' fill='%235C2D91'/%3E%3C/g%3E%3C/svg%3E");background-repeat:no-repeat;background-position:center center;border-radius:var(--px-radius-pill);border:var(--px-border-s) solid transparent;transition:all .2s ease-out 0s,backdrop-filter 0s,-webkit-backdrop-filter 0s}summary:hover{cursor:pointer}details:not(.single) summary:hover{background-color:var(--px-color-bg-container-moderate-default)}summary:hover:after{background-color:var(--px-color-bg-action-hover-inverted-default);border:var(--px-border-s) solid var(--px-color-border-action-hover-default);-webkit-backdrop-filter:blur(15px);backdrop-filter:blur(15px)}details.single summary{display:inline-flex;gap:var(--px-spacing-between-icon-horizontal-mobile);justify-content:center;color:var(--px-color-txt-primary-default);font-weight:700;border:var(--px-border-m) solid transparent;border-radius:var(--px-radius-pill)}details.single summary:hover{gap:0;padding:0 var(--px-padding-xs);border-color:var(--px-color-border-action-hover-default)}details.single summary:hover:after{border-color:transparent;margin-right:calc(var(--px-padding-xs) * -1)}details.single slot[name=content]{display:block;padding-top:var(--px-spacing-component-default-vertical)}details[open] summary slot[name=title]{color:var(--px-color-txt-primary-default);font-weight:700}details[open] summary:after{transform:rotate(180deg)}summary::-webkit-details-marker{display:none}:host([inverted]) details{color:var(--px-color-txt-body-inverted)}:host([inverted]) details:not(.single){border-bottom:var(--px-border-m) solid var(--px-color-border-main-inverted)}:host([inverted]) details[open] summary slot[name=title]{color:var(--px-color-txt-primary-inverted)}:host([inverted]) details.single summary{color:var(--px-color-txt-primary-inverted)}:host([inverted]) details.single summary:hover{border-color:var(--px-color-border-action-hover-inverted)}:host([inverted]) details.single summary:hover:after{border-color:transparent}:host([inverted]) summary:after{background-color:var(--px-color-bg-action-secondary-inverted);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12.4714 6.19524C12.2111 5.93489 11.789 5.93489 11.5286 6.19524L8.00002 9.72384L4.47142 6.19524C4.21107 5.93489 3.78897 5.93489 3.52862 6.19524C3.26827 6.45559 3.26827 6.8777 3.52862 7.13805L7.52862 11.1381C7.78897 11.3984 8.21108 11.3984 8.47142 11.1381L12.4714 7.13805C12.7318 6.8777 12.7318 6.45559 12.4714 6.19524Z' fill='white'/%3E%3C/svg%3E")}:host([inverted]) summary:hover{background-color:var(--px-color-bg-container-moderate-inverted)}:host([inverted]) summary:hover:after{background-color:var(--px-color-bg-action-hover-inverted-inverted);border:var(--px-border-s) solid var(--px-color-border-action-hover-inverted)}`;
-const accordionStyles = new CSSStyleSheet();
-accordionStyles.replaceSync(accordionCss);
-const variantValues$3 = ["", "none", "single"];
-const _Accordion = class _Accordion extends PxElement {
+const styles$b = ':host{line-height:1;display:inline-block;vertical-align:middle}i{font-family:PxIcon;color:var(--px-color-icon-primary-default);line-height:1;font-style:unset;font-weight:400;-webkit-user-select:none;user-select:none;font-display:swap}.inherit{color:inherit}.primary{color:var(--px-color-icon-primary-default)}.body{color:var(--px-color-icon-body-default)}.details{color:var(--px-color-icon-details-default)}.hover:hover{color:var(--px-color-icon-hover-default)}.hover:active{color:var(--px-color-icon-active-default)}.disabled{color:var(--px-color-icon-disabled-default)}.success{color:var(--px-color-icon-success-default)}.warning{color:var(--px-color-icon-warning-default)}.error{color:var(--px-color-icon-error-default)}.unlimited{color:var(--px-color-icon-unlimited-default)}.promo{color:var(--px-color-icon-promo-default)}:host([inverted]) i,:host([inverted]) .primary{color:var(--px-color-icon-primary-inverted)}:host([inverted]) .body{color:var(--px-color-icon-body-inverted)}:host([inverted]) .details{color:var(--px-color-icon-details-inverted)}:host([inverted]) .hover:hover{color:var(--px-color-icon-hover-inverted)}:host([inverted]) .hover:active{color:var(--px-color-icon-active-inverted)}:host([inverted]) .disabled{color:var(--px-color-icon-disabled-inverted)}:host([inverted]) .success{color:var(--px-color-icon-success-inverted)}:host([inverted]) .warning{color:var(--px-color-icon-warning-inverted)}:host([inverted]) .error{color:var(--px-color-icon-error-inverted)}:host([inverted]) .unlimited{color:var(--px-color-icon-unlimited-inverted)}:host([inverted]) .promo{color:var(--px-color-icon-promo-inverted)}.size-2xs{font-size:var(--px-icon-size-2xs-mobile)}.size-xs{font-size:var(--px-icon-size-xs-mobile)}.size-s{font-size:var(--px-icon-size-s-mobile)}.size-m{font-size:var(--px-icon-size-m-mobile)}.size-l{font-size:var(--px-icon-size-l-mobile)}.size-xl{font-size:var(--px-icon-size-xl-mobile)}.size-2xl{font-size:var(--px-icon-size-2xl-mobile)}@media only screen and (min-width: 64rem){.size-2xs{font-size:var(--px-icon-size-2xs-tablet)}.size-xs{font-size:var(--px-icon-size-xs-tablet)}.size-s{font-size:var(--px-icon-size-s-tablet)}.size-m{font-size:var(--px-icon-size-m-tablet)}.size-l{font-size:var(--px-icon-size-l-tablet)}.size-xl{font-size:var(--px-icon-size-xl-tablet)}.size-2xl{font-size:var(--px-icon-size-2xl-tablet)}}@media only screen and (min-width: 90rem){.size-2xs{font-size:var(--px-icon-size-2xs-desktop)}.size-xs{font-size:var(--px-icon-size-xs-desktop)}.size-s{font-size:var(--px-icon-size-s-desktop)}.size-m{font-size:var(--px-icon-size-m-desktop)}.size-l{font-size:var(--px-icon-size-l-desktop)}.size-xl{font-size:var(--px-icon-size-xl-desktop)}.size-2xl{font-size:var(--px-icon-size-2xl-desktop)}}i.icon-large:before{vertical-align:-10%;font-size:1.3333333333em}.icon-Accessories:before{content:""}.icon-Account:before{content:""}.icon-Activeren:before{content:""}.icon-Addition:before{content:""}.icon-Administration:before{content:""}.icon-Advantage:before{content:""}.icon-Advantage-pig:before{content:""}.icon-AI:before{content:""}.icon-Airplane:before{content:""}.icon-Alarm:before{content:""}.icon-Answers:before{content:""}.icon-Antenna:before{content:""}.icon-Anywhere:before{content:""}.icon-Applications:before{content:""}.icon-Appointment:before{content:""}.icon-Arrow:before{content:""}.icon-Arrow-circle:before{content:""}.icon-Arrow-direction:before{content:""}.icon-Arrow-direction-horizontal:before{content:""}.icon-Arrow-down:before{content:""}.icon-Arrow-left:before{content:""}.icon-Arrow-navigation:before{content:""}.icon-Arrow-outline:before{content:""}.icon-Arrow-outline-direction:before{content:""}.icon-Arrowbutton:before{content:""}.icon-Arrowbutton-left:before{content:""}.icon-Articles:before{content:""}.icon-Baby:before{content:""}.icon-Back-camera:before{content:""}.icon-Battery:before{content:""}.icon-Belgique-ok:before{content:""}.icon-Best-seller:before{content:""}.icon-Best-seller-14:before{content:""}.icon-Best-seller-2:before{content:""}.icon-Bill:before{content:""}.icon-Bill-member:before{content:""}.icon-Birthday:before{content:""}.icon-Blacklisted:before{content:""}.icon-Blindness:before{content:""}.icon-Bluetooth:before{content:""}.icon-Broken-links:before{content:""}.icon-Bullet:before{content:""}.icon-Caddy:before{content:""}.icon-Calendar:before{content:""}.icon-Calendar-14:before{content:""}.icon-Calendar-7:before{content:""}.icon-Calls:before{content:""}.icon-Callsfromabroad:before{content:""}.icon-Callsfrombelgium:before{content:""}.icon-Calltransfert:before{content:""}.icon-Camera:before{content:""}.icon-Car:before{content:""}.icon-Card:before{content:""}.icon-Care:before{content:""}.icon-Circle:before{content:""}.icon-Circle-Remove:before{content:""}.icon-Close:before{content:""}.icon-Cloud:before{content:""}.icon-Cloud-ICT:before{content:""}.icon-Cloud-IoT:before{content:""}.icon-Cloud-Networks:before{content:""}.icon-Cloud-Security:before{content:""}.icon-Collaboration:before{content:""}.icon-Collapse:before{content:""}.icon-Community:before{content:""}.icon-Community2:before{content:""}.icon-Compare:before{content:""}.icon-Congratulations-box:before{content:""}.icon-Connected-house:before{content:""}.icon-Connection-error:before{content:""}.icon-Connection-manager:before{content:""}.icon-Connectivity:before{content:""}.icon-Contact:before{content:""}.icon-Contactlist:before{content:""}.icon-Contest:before{content:""}.icon-Continuity:before{content:""}.icon-Cookie:before{content:""}.icon-Copy:before{content:""}.icon-Crash:before{content:""}.icon-Customer-Zone:before{content:""}.icon-Dance:before{content:""}.icon-Data:before{content:""}.icon-Deafpeople:before{content:""}.icon-Delivery:before{content:""}.icon-Desktop:before{content:""}.icon-Devices:before{content:""}.icon-Dial:before{content:""}.icon-Digital-media:before{content:""}.icon-Directassist:before{content:""}.icon-Download:before{content:""}.icon-Drag:before{content:""}.icon-E-carte-Facebook:before{content:""}.icon-Easy:before{content:""}.icon-Edit:before{content:""}.icon-Energy:before{content:""}.icon-Entertainment:before{content:""}.icon-Error-box:before{content:""}.icon-Eservices:before{content:""}.icon-Exhibition-screens:before{content:""}.icon-Expand:before{content:""}.icon-Eyedeficiency:before{content:""}.icon-Facebook:before{content:""}.icon-Family:before{content:""}.icon-Favourite:before{content:""}.icon-Favourite-unselected:before{content:""}.icon-Feedback:before{content:""}.icon-Fiber:before{content:""}.icon-Filter:before{content:""}.icon-Fixed-connection:before{content:""}.icon-Fixed-ringing:before{content:""}.icon-Flexibility:before{content:""}.icon-Flexible-delivery:before{content:""}.icon-Football:before{content:""}.icon-Football-11:before{content:""}.icon-Football-11plus:before{content:""}.icon-Forum:before{content:""}.icon-Forward:before{content:""}.icon-Freedelivery:before{content:""}.icon-Freeservices:before{content:""}.icon-Frequently-questions:before{content:""}.icon-Front-camera:before{content:""}.icon-G-Tablet:before{content:""}.icon-Gallery:before{content:""}.icon-Games:before{content:""}.icon-Gift:before{content:""}.icon-Government:before{content:""}.icon-Guitar:before{content:""}.icon-Handicap:before{content:""}.icon-Help:before{content:""}.icon-Home:before{content:""}.icon-Home-added-value:before{content:""}.icon-Hub:before{content:""}.icon-ICT:before{content:""}.icon-Icon-Mood-happy:before{content:""}.icon-Icon-Mood-neutral:before{content:""}.icon-Icon-Mood-unhappy:before{content:""}.icon-Ict-networking:before{content:""}.icon-Idea:before{content:""}.icon-Incomingcalls:before{content:""}.icon-Infinity:before{content:""}.icon-Information:before{content:""}.icon-Information-box:before{content:""}.icon-Infrastructure:before{content:""}.icon-Innovation:before{content:""}.icon-Inscription:before{content:""}.icon-Instagram:before{content:""}.icon-International:before{content:""}.icon-Internet:before{content:""}.icon-Internetlaptop:before{content:""}.icon-Internetmobile:before{content:""}.icon-Internettablet:before{content:""}.icon-Invoice-insight-advanced:before{content:""}.icon-Layer243:before{content:""}.icon-Linkedin:before{content:""}.icon-Links:before{content:""}.icon-Local-data:before{content:""}.icon-Location:before{content:""}.icon-Login1:before{content:""}.icon-Login2:before{content:""}.icon-LoginOpen:before{content:""}.icon-Logout:before{content:""}.icon-Low-stock:before{content:""}.icon-Magnify:before{content:""}.icon-Manual:before{content:""}.icon-Markets:before{content:""}.icon-Meeting:before{content:""}.icon-Mentaldeficiency:before{content:""}.icon-Menu:before{content:""}.icon-Menuburger:before{content:""}.icon-Messaging:before{content:""}.icon-Messenger:before{content:""}.icon-Micro:before{content:""}.icon-MicroSIM-card:before{content:""}.icon-Microsoft-Office:before{content:""}.icon-Minus-fill:before{content:""}.icon-Minutes120:before{content:""}.icon-Minutes15:before{content:""}.icon-Minutes1600:before{content:""}.icon-Minutes240:before{content:""}.icon-Minutes30:before{content:""}.icon-Minutes400:before{content:""}.icon-Minutes60:before{content:""}.icon-Minutes800:before{content:""}.icon-Mobile:before{content:""}.icon-Mobile-Coverage:before{content:""}.icon-Mobility-insurance:before{content:""}.icon-Monitoring:before{content:""}.icon-Mood-joy:before{content:""}.icon-Mood-very-bad:before{content:""}.icon-Move-Sticker:before{content:""}.icon-Move-box:before{content:""}.icon-Moving:before{content:""}.icon-Music:before{content:""}.icon-Myentertainment:before{content:""}.icon-Network:before{content:""}.icon-Newsletter:before{content:""}.icon-Next:before{content:""}.icon-No-playing:before{content:""}.icon-No-stock:before{content:""}.icon-Norton-security:before{content:""}.icon-Not-Available:before{content:""}.icon-Number-1:before{content:""}.icon-Number-10:before{content:""}.icon-Number-2:before{content:""}.icon-Number-3:before{content:""}.icon-Number-4:before{content:""}.icon-Number-5:before{content:""}.icon-Number-6:before{content:""}.icon-Number-7:before{content:""}.icon-Number-8:before{content:""}.icon-Number-9:before{content:""}.icon-OS:before{content:""}.icon-On-app:before{content:""}.icon-On-web:before{content:""}.icon-OneClick:before{content:""}.icon-Online-exclu-en:before{content:""}.icon-Online-exclu-fr:before{content:""}.icon-Online-exclu-nl:before{content:""}.icon-Online-promo-en:before{content:""}.icon-Online-promo-fr:before{content:""}.icon-Online-promo-nl:before{content:""}.icon-Options:before{content:""}.icon-Outcomingcalls:before{content:""}.icon-Overview:before{content:""}.icon-Packs:before{content:""}.icon-Paperclip:before{content:""}.icon-Pedestrian:before{content:""}.icon-Photo:before{content:""}.icon-Picture:before{content:""}.icon-Pin:before{content:""}.icon-Place-map:before{content:""}.icon-Play:before{content:""}.icon-Plus:before{content:""}.icon-Plus-fill:before{content:""}.icon-Points:before{content:""}.icon-Positioning:before{content:""}.icon-Posts:before{content:""}.icon-Presencehome:before{content:""}.icon-Previous:before{content:""}.icon-Prime:before{content:""}.icon-Print:before{content:""}.icon-Processor:before{content:""}.icon-Products:before{content:""}.icon-Promo:before{content:""}.icon-Proximus-TV-app:before{content:""}.icon-Pxs:before{content:""}.icon-Quote:before{content:""}.icon-Raccording-flat:before{content:""}.icon-Ready-to-use:before{content:""}.icon-Recycling:before{content:""}.icon-Reducer:before{content:""}.icon-Refresh:before{content:""}.icon-Relaunch:before{content:""}.icon-Reload:before{content:""}.icon-Remote:before{content:""}.icon-Remove:before{content:""}.icon-Remove-filter:before{content:""}.icon-Restart:before{content:""}.icon-Roaming:before{content:""}.icon-Roaming-Belgium:before{content:""}.icon-Search:before{content:""}.icon-Secure-payment:before{content:""}.icon-Seealso:before{content:""}.icon-Server:before{content:""}.icon-Settings:before{content:""}.icon-Shopmag:before{content:""}.icon-Smarphone-configuration:before{content:""}.icon-Smart-ringing:before{content:""}.icon-Smartphone:before{content:""}.icon-Smartphone-1:before{content:""}.icon-Smartphone-2:before{content:""}.icon-Smartphone-3:before{content:""}.icon-Smartphone-4:before{content:""}.icon-Smartphone-5:before{content:""}.icon-Smartphone-6:before{content:""}.icon-Smartphone4G:before{content:""}.icon-Smiley:before{content:""}.icon-Sms:before{content:""}.icon-Sondage:before{content:""}.icon-Sort-0-9:before{content:""}.icon-Sort-9-0:before{content:""}.icon-Sort-a-z:before{content:""}.icon-Sort-z-a:before{content:""}.icon-Sound-off:before{content:""}.icon-Sound-on:before{content:""}.icon-Speed:before{content:""}.icon-Speedtest-download:before{content:""}.icon-Speedtest-upload:before{content:""}.icon-Status-nok:before{content:""}.icon-Status-ok:before{content:""}.icon-Status-ongoing:before{content:""}.icon-Status-warning:before{content:""}.icon-Stay-informed:before{content:""}.icon-Stayinformed:before{content:""}.icon-Stock:before{content:""}.icon-Stopwatch:before{content:""}.icon-Subscription:before{content:""}.icon-Surfgsm:before{content:""}.icon-Sustainability:before{content:""}.icon-Switchon-switchoff:before{content:""}.icon-TV-replay-36:before{content:""}.icon-TVReplay:before{content:""}.icon-Tablet:before{content:""}.icon-Tailor:before{content:""}.icon-Target-Blank:before{content:""}.icon-Tarifs:before{content:""}.icon-Technical-cast:before{content:""}.icon-Telephony:before{content:""}.icon-Television:before{content:""}.icon-Temp:before{content:""}.icon-Tips1:before{content:""}.icon-Tips2:before{content:""}.icon-Tools:before{content:""}.icon-Top:before{content:""}.icon-Touchscreens:before{content:""}.icon-Tractor:before{content:""}.icon-Train:before{content:""}.icon-Transfer:before{content:""}.icon-Transfer-people:before{content:""}.icon-Trash:before{content:""}.icon-Triangle:before{content:""}.icon-TV-10:before{content:""}.icon-TV-12:before{content:""}.icon-TV-14:before{content:""}.icon-TV-16:before{content:""}.icon-TV-18:before{content:""}.icon-Twitter:before{content:""}.icon-Under-construct:before{content:""}.icon-Upgrade-account:before{content:""}.icon-Upload:before{content:""}.icon-Usage:before{content:""}.icon-Usage2:before{content:""}.icon-Validation-box:before{content:""}.icon-Video:before{content:""}.icon-Video-zap:before{content:""}.icon-Videoscope:before{content:""}.icon-View360:before{content:""}.icon-Waiting:before{content:""}.icon-Warning-box:before{content:""}.icon-Watch:before{content:""}.icon-Watch2:before{content:""}.icon-WhatsApp:before{content:""}.icon-Wireless-hub:before{content:""}.icon-Youtube:before{content:""}.icon-circular-economy:before{content:""}.icon-eco:before{content:""}.icon-happy-weeks:before{content:""}.icon-icon-VOD:before{content:""}.icon-mms:before{content:""}.icon-new-en:before{content:""}.icon-new-fr:before{content:""}.icon-new-nl:before{content:""}.icon-prepaid:before{content:""}.icon-promo:before{content:""}.icon-repair-device:before{content:""}.icon-sales-en:before{content:""}.icon-sales-fr:before{content:""}.icon-sales-nl:before{content:""}.icon-simlocked:before{content:""}.icon-temporary-device:before{content:""}.icon-Test-branding-Account-1:before{content:""}.icon-Test-branding-Car-1:before{content:""}.icon-Test-branding-Sim-1:before{content:""}';
+const styleSheet$a = new CSSStyleSheet();
+styleSheet$a.replaceSync(styles$b);
+const colorValues$1 = ["", "default", "inherit", "primary", "body", "details", "hover", "active", "disabled", "promo", "success", "warning", "error", "unlimited"];
+const _Icon = class _Icon extends PxElement {
   constructor() {
-    super(proximusSemanticStyleSheet, accordionStyles);
-    this.template = () => `<details>
-      <summary role="button"><slot name="icon"></slot><slot name="title"></slot><slot name="info"></slot></summary>
-      <slot name="content"></slot>
-    </details>`;
+    super(proximusSemanticStyleSheet, styleSheet$a);
+    this.template = () => `<i aria-hidden="true"></i>`;
     this.shadowRoot.innerHTML = this.template();
   }
   static get observedAttributes() {
-    return [...super.observedAttributes, "variant", "inverted"];
-  }
-  get variant() {
-    return this.getAttribute("variant");
-  }
-  set variant(value) {
-    this.setAttribute("variant", value);
-  }
-  get inverted() {
-    return this.getAttribute("inverted");
-  }
-  set inverted(value) {
-    this.setAttribute("inverted", value);
-  }
-  attributeChangedCallback(attrName, oldValue, newValue) {
-    if (oldValue !== newValue) {
-      switch (attrName) {
-        case "variant":
-          this.updateAttribute(attrName, oldValue, newValue, variantValues$3);
-          break;
-        default:
-          super.attributeChangedCallback(attrName, oldValue, newValue);
-          break;
-      }
-    }
-  }
-  updateAttribute(attrName, oldValue, newValue, attrValues) {
-    if (oldValue !== null && oldValue !== "") {
-      this.$el.classList.toggle(`${oldValue}`);
-    }
-    if (newValue !== null && newValue !== "") {
-      this.$el.classList.toggle(`${newValue}`);
-    }
-    if (!this.checkName(attrValues, newValue)) {
-      console.error(`${newValue} is not an allowed ${attrName} value for ${this.$el}`);
-    }
-  }
-  checkName(values, value) {
-    return values.includes(value);
-  }
-};
-_Accordion.nativeName = "details";
-let Accordion = _Accordion;
-customElements.define("px-accordion", Accordion);
-const buttonCss = '.btn{display:inline-flex;vertical-align:middle;align-items:center;justify-content:center;font-family:Proximus,Verdana,Helvetica,sans-serif;font-size:var(--px-text-size-base-mobile);line-height:var(--px-line-height-base-mobile);font-weight:700;gap:var(--px-spacing-between-icon-horizontal-mobile);cursor:pointer;text-decoration:none;--btn-transition: all .2s ease-in-out 0s;transition:var(--btn-transition);border:var(--px-border-m) solid transparent;--slotted-icon-size: var(--px-icon-size-xs-mobile)}.btn,.btn *{box-sizing:border-box}.btn:hover:not([disabled],[aria-disabled=true],.loading),.btn:focus:not([disabled],[aria-disabled=true],.loading){border-color:var(--px-color-border-action-hover-default);outline:0}.btn:active{transform:scale(.95)}.btn[disabled],.btn[aria-disabled=true]{cursor:default;pointer-events:none}.btn.loading{cursor:inherit}.btn.loading ::slotted(px-spinner){line-height:var(--px-icon-size-xs-mobile)}.btn:not(.secondary,.tertiary,.patch){color:var(--px-color-txt-inverted-primary-default);background:var(--px-color-bg-action-primary-default);min-height:var(--px-size-action-mobile);padding:0 var(--px-padding-m);border-radius:var(--px-radius-xs) var(--px-radius-xs) var(--px-radius-2xl) var(--px-radius-xs)}.btn:not(.secondary,.tertiary,.patch):hover:not([disabled],[aria-disabled=true],.loading),.btn:not(.secondary,.tertiary,.patch):focus:not([disabled],[aria-disabled=true],.loading){color:var(--px-color-txt-primary-default);background:var(--px-color-bg-action-hover-inverted-default)}.btn:not(.secondary,.tertiary,.patch)[disabled],.btn:not(.secondary,.tertiary,.patch)[aria-disabled=true]{background:var(--px-color-bg-action-disabled-default);color:var(--px-color-txt-disabled-default)}.btn:not(.secondary,.tertiary,.patch).loading{background:var(--px-color-bg-action-disabled-default);color:var(--px-color-txt-primary-default);border-color:transparent}.btn:not(.secondary,.tertiary,.patch).extended{width:100%}.btn:not(.secondary,.tertiary,.patch).alternative{border-radius:var(--px-radius-xs)}.btn.secondary{color:var(--px-color-txt-primary-default);background:var(--px-color-bg-action-secondary-default);min-height:var(--px-size-action-mobile);padding:0 var(--px-padding-m);border-radius:var(--px-radius-xs) var(--px-radius-xs) var(--px-radius-2xl) var(--px-radius-xs)}.btn.secondary:hover:not([disabled],[aria-disabled=true],.loading),.btn.secondary:focus:not([disabled],[aria-disabled=true],.loading){color:var(--px-color-txt-primary-default);background:var(--px-color-bg-action-hover-inverted-default)}.btn.secondary[disabled],.btn.secondary[aria-disabled=true]{background:var(--px-color-bg-action-disabled-default);color:var(--px-color-txt-disabled-default)}.btn.secondary.loading{background:var(--px-color-bg-action-disabled-default);color:var(--px-color-txt-primary-default);border-color:transparent}.btn.secondary.extended{width:100%}.btn.secondary.alternative{border-radius:var(--px-radius-xs)}.btn.tertiary{background:none;color:var(--px-color-txt-primary-default);border-radius:var(--px-radius-pill);padding:0}.btn.tertiary ::slotted(px-icon){display:flex;align-items:center;justify-content:center;width:var(--px-icon-size-m-mobile);height:var(--px-icon-size-m-mobile);font-size:var(--px-icon-size-2xs-mobile);border-radius:50%;background:var(--px-color-bg-action-secondary-default);transition:var(--btn-transition)}.btn.tertiary:hover:not([disabled],[aria-disabled=true],.loading),.btn.tertiary:focus:not([disabled],[aria-disabled=true],.loading){gap:0;padding:0 .5rem}.btn.tertiary:hover:not([disabled],[aria-disabled=true],.loading) ::slotted(*),.btn.tertiary:focus:not([disabled],[aria-disabled=true],.loading) ::slotted(*){background:transparent}.btn.tertiary:hover:not([disabled],[aria-disabled=true],.loading) ::slotted(px-icon),.btn.tertiary:focus:not([disabled],[aria-disabled=true],.loading) ::slotted(px-icon){margin:0 -8px}.btn.tertiary:hover:not([disabled],[aria-disabled=true],.loading) ::slotted([slot="before"]),.btn.tertiary:focus:not([disabled],[aria-disabled=true],.loading) ::slotted([slot="before"]){margin:0 0 0 -.5rem}.btn.tertiary:hover:not([disabled],[aria-disabled=true],.loading) ::slotted([slot="after"]),.btn.tertiary:focus:not([disabled],[aria-disabled=true],.loading) ::slotted([slot="after"]){margin:0 -.5rem 0 0}.btn.tertiary[disabled],.btn.tertiary[aria-disabled=true]{color:var(--px-color-txt-disabled-default)}.btn.tertiary[disabled] ::slotted(px-icon),.btn.tertiary[aria-disabled=true] ::slotted(px-icon){background:var(--px-color-bg-action-disabled-default)}.btn.tertiary.loading{color:var(--px-color-txt-primary-default);border-color:transparent}.btn.tertiary.loading ::slotted(px-spinner){display:flex;align-items:center;justify-content:center;width:var(--px-icon-size-m-mobile);height:var(--px-icon-size-m-mobile);border-radius:50%;background:var(--px-color-bg-action-disabled-default)}.btn.patch{display:inline-flex}.btn.patch:hover:not([disabled],[aria-disabled=true],.loading),.btn.patch:focus:not([disabled],[aria-disabled=true],.loading){color:var(--px-color-txt-primary-default);background:var(--px-color-bg-action-hover-inverted-default)}.btn.patch[disabled],.btn.patch[aria-disabled=true]{background:var(--px-color-bg-action-disabled-default);color:var(--px-color-txt-disabled-default)}button.link{background:none;border:none;text-decoration:underline;padding:0;cursor:pointer}button.link[disabled],button.link[aria-disabled=true]{cursor:default;pointer-events:none;color:var(--px-color-txt-disabled-default)}:host([inverted]) .btn:hover:not([disabled],[aria-disabled=true],.loading),:host([inverted]) .btn:focus:not([disabled],[aria-disabled=true],.loading){border-color:var(--px-color-border-action-hover-inverted)}:host([inverted]) .btn:not(.secondary,.tertiary,.patch){color:var(--px-color-txt-inverted-primary-inverted);background:var(--px-color-bg-action-primary-inverted)}:host([inverted]) .btn:not(.secondary,.tertiary,.patch):hover:not([disabled],[aria-disabled=true],.loading),:host([inverted]) .btn:not(.secondary,.tertiary,.patch):focus:not([disabled],[aria-disabled=true],.loading){color:var(--px-color-txt-primary-inverted);background:var(--px-color-bg-action-hover-inverted-inverted)}:host([inverted]) .btn:not(.secondary,.tertiary,.patch)[disabled],:host([inverted]) .btn:not(.secondary,.tertiary,.patch)[aria-disabled=true]{background:var(--px-color-bg-action-disabled-inverted);color:var(--px-color-txt-disabled-inverted)}:host([inverted]) .btn:not(.secondary,.tertiary,.patch).loading{background:var(--px-color-bg-action-disabled-inverted);color:var(--px-color-txt-primary-inverted);border-color:transparent}:host([inverted]) .btn.secondary{color:var(--px-color-txt-primary-inverted);background:var(--px-color-bg-action-secondary-inverted)}:host([inverted]) .btn.secondary:hover:not([disabled],[aria-disabled=true],.loading),:host([inverted]) .btn.secondary:focus:not([disabled],[aria-disabled=true],.loading){color:var(--px-color-txt-primary-inverted);background:var(--px-color-bg-action-hover-inverted-inverted)}:host([inverted]) .btn.secondary[disabled],:host([inverted]) .btn.secondary[aria-disabled=true]{background:var(--px-color-bg-action-disabled-inverted);color:var(--px-color-txt-disabled-inverted)}:host([inverted]) .btn.secondary.loading{background:var(--px-color-bg-action-disabled-inverted);color:var(--px-color-txt-primary-inverted);border-color:transparent}:host([inverted]) .btn.tertiary{color:var(--px-color-txt-primary-inverted)}:host([inverted]) .btn.tertiary ::slotted(px-icon){background:var(--px-color-bg-action-secondary-inverted)}:host([inverted]) .btn.tertiary[disabled],:host([inverted]) .btn.tertiary[aria-disabled=true]{color:var(--px-color-txt-disabled-inverted)}:host([inverted]) .btn.tertiary[disabled] ::slotted(px-icon),:host([inverted]) .btn.tertiary[aria-disabled=true] ::slotted(px-icon){background:var(--px-color-bg-action-disabled-inverted)}:host([inverted]) .btn.tertiary.loading{color:var(--px-color-txt-primary-inverted)}:host([inverted]) .btn.tertiary.loading ::slotted(px-spinner){background:var(--px-color-bg-action-disabled-inverted)}:host([inverted]) .btn.patch:hover:not([disabled],[aria-disabled=true],.loading),:host([inverted]) .btn.patch:focus:not([disabled],[aria-disabled=true],.loading){color:var(--px-color-txt-primary-inverted);background:var(--px-color-bg-action-hover-inverted-inverted)}:host([inverted]) .btn.patch[disabled],:host([inverted]) .btn.patch[aria-disabled=true]{background:var(--px-color-bg-action-disabled-inverted);color:var(--px-color-txt-disabled-inverted)}:host([inverted]) button.link[disabled],:host([inverted]) button.link[aria-disabled=true]{color:var(--px-color-txt-disabled-inverted)}@media only screen and (min-width: 640px){.btn{font-size:var(--px-text-size-base-tablet);line-height:var(--px-line-height-base-tablet);--slotted-icon-size: var(--px-icon-size-xs-tablet)}.btn.loading ::slotted(px-spinner){line-height:var(--px-icon-size-xs-tablet)}.btn:not(.secondary,.tertiary,.patch){min-height:var(--px-size-action)}.btn.secondary{min-height:var(--px-size-action)}.btn.tertiary ::slotted(px-spinner){width:var(--px-icon-size-m-tablet);height:var(--px-icon-size-m-tablet)}}@media only screen and (min-width: 640px){.btn{font-size:var(--px-text-size-base-desktop);line-height:var(--px-line-height-base-desktop);--slotted-icon-size: var(--px-icon-size-xs-desktop)}.btn.loading ::slotted(px-spinner){line-height:var(--px-icon-size-xs-desktop)}.btn.tertiary ::slotted(px-spinner){width:var(--px-icon-size-m-desktop);height:var(--px-icon-size-m-desktop)}}@keyframes anim-spinner{0%{transform:rotate(0)}to{transform:rotate(360deg)}}';
-const linkCss = 'a,.link,::slotted(a){font-family:Proximus,Verdana,Helvetica,sans-serif;font-size:var(--px-text-size-base-mobile);line-height:var(--px-line-height-base-mobile);font-weight:500;color:var(--px-color-txt-body-default)}a:hover,a:focus,.link:hover,.link:focus{color:var(--px-color-txt-hover-default)}a[aria-disabled=true],.link[aria-disabled=true]{cursor:default;pointer-events:none;color:var(--px-color-txt-disabled-default)}a ::slotted([slot="after"]),.link ::slotted([slot="after"]){margin-left:var(--px-spacing-text-to-icon-compact-horizontal)}a ::slotted(*),.link ::slotted(*){display:inline-block}::slotted(a:hover),::slotted(a:focus){color:var(--px-color-txt-hover-default)}a.no-style{color:inherit;text-decoration:none}a.no-style:hover,a.no-style:focus{color:inherit}a.skip-link{position:absolute;left:-10000px;top:auto;overflow:hidden;background-color:var(--px-color-bg-container-main-default);padding:var(--px-padding-xs)}a.skip-link:focus{left:auto;z-index:999}:host([inverted]) a,:host([inverted]) .link,:host([inverted]) ::slotted(a){color:var(--px-color-txt-body-inverted)}:host([inverted]) a:hover,:host([inverted]) a:focus,:host([inverted]) .link:hover,:host([inverted]) .link:focus{color:var(--px-color-txt-hover-inverted)}:host([inverted]) a[aria-disabled=true],:host([inverted]) .link[aria-disabled=true]{color:var(--px-color-txt-disabled-inverted)}:host([inverted]) ::slotted(a:hover),:host([inverted]) ::slotted(a:focus){color:var(--px-color-txt-hover-inverted)}:host([inverted]) a.skip-link{background-color:var(--px-color-bg-container-main-inverted)}@media only screen and (min-width: 64rem){a,.link,::slotted(a){font-size:var(--px-text-size-base-tablet);line-height:var(--px-line-height-base-tablet)}}@media only screen and (min-width: 90rem){a,.link,::slotted(a){font-size:var(--px-text-size-base-desktop);line-height:var(--px-line-height-base-desktop)}}';
-const styles$a = ".patch{display:inline-block;padding:0 var(--px-padding-s);height:1.625rem;border:var(--px-border-m) solid transparent;border-radius:var(--px-radius-l) var(--px-radius-l) var(--px-radius-l) 0;font-family:Proximus,Verdana,Helvetica,sans-serif;font-weight:700;font-size:var(--px-text-size-base-mobile);line-height:var(--px-line-height-base-mobile);text-align:center;background-color:var(--px-color-bg-promo-default);color:var(--px-color-txt-inverted-primary-default)}.patch,.patch *{box-sizing:border-box}@media only screen and (min-width: 640px){.patch{font-size:var(--px-text-size-base-tablet);line-height:var(--px-line-height-base-tablet)}}@media only screen and (min-width: 1025px){.patch{font-size:var(--px-text-size-base-desktop);line-height:var(--px-line-height-base-desktop)}}:host([inverted]) .patch{background-color:var(--px-color-bg-promo-inverted);color:var(--px-color-txt-inverted-primary-default)}.bottom-right{border-radius:var(--px-radius-l) var(--px-radius-l) 0 var(--px-radius-l)}.bottom-left{border-radius:var(--px-radius-l) var(--px-radius-l) var(--px-radius-l) 0}.info{background-color:var(--px-color-illu-blue-core);color:var(--px-color-txt-body-default)}:host([inverted]) .info{background-color:var(--px-color-illu-blue-core);color:var(--px-color-txt-body-default)}.black-friday{background-color:var(--px-color-bg-container-rich-default);color:var(--px-color-txt-inverted-default)}:host([inverted]) .black-friday{background-color:var(--px-color-bg-container-rich-inverted);color:var(--px-color-txt-inverted-inverted)}.eco{background-color:var(--px-color-bg-success-default);color:var(--px-color-txt-inverted-default)}:host([inverted]) .eco{background-color:var(--px-color-bg-success-inverted);color:var(--px-color-txt-inverted-inverted)}.greyed{background-color:var(--px-color-bg-action-disabled-default);color:var(--px-color-icon-disabled-default)}:host([inverted]) .greyed{background-color:var(--px-color-bg-action-disabled-inverted);color:var(--px-color-icon-disabled-inverted)}";
-const buttonStyles$1 = new CSSStyleSheet();
-const linkStyles$2 = new CSSStyleSheet();
-const patchStyles = new CSSStyleSheet();
-buttonStyles$1.replaceSync(buttonCss);
-linkStyles$2.replaceSync(linkCss);
-patchStyles.replaceSync(styles$a);
-const _Button = class _Button extends PxElement {
-  constructor(semanticTokensStylesheet) {
-    super(semanticTokensStylesheet, buttonStyles$1, linkStyles$2, patchStyles);
-    this.template = () => `<slot name="before"></slot><slot></slot><slot name="after"></slot>`;
-    const $root = document.createElement(this.nativeName);
-    $root.classList.add("btn");
-    $root.innerHTML = this.template();
-    this.shadowRoot.appendChild($root);
-  }
-  static get observedAttributes() {
-    return [...super.observedAttributes, "variant", "state", "extended", "loading", "shape", "inverted"];
-  }
-  get variant() {
-    return this.getAttribute("variant");
-  }
-  set variant(value) {
-    this.setAttribute("variant", value);
+    return [...super.observedAttributes, "name", "size", "color", "aria-label", "inverted"];
   }
-  get state() {
-    return this.getAttribute("state");
+  get name() {
+    return this.getAttribute("name");
   }
-  set state(value) {
-    this.setAttribute("state", value);
+  set name(value) {
+    this.setAttribute("name", value);
   }
-  get extended() {
-    return this.getAttribute("extended");
+  get size() {
+    return this.getAttribute("size");
   }
-  set extended(value) {
-    this.setAttribute("extended", value);
+  set size(value) {
+    this.setAttribute("size", value);
   }
-  get loading() {
-    return this.getAttribute("loading");
+  get color() {
+    return this.getAttribute("color");
   }
-  set loading(value) {
-    this.setAttribute("loading", value);
+  set color(value) {
+    this.setAttribute("color", value);
   }
-  get shape() {
-    return this.getAttribute("shape");
+  get arialabel() {
+    return this.getAttribute("aria-label");
   }
-  set shape(value) {
-    this.setAttribute("shape", value);
+  set arialabel(value) {
+    this.setAttribute("aria-label", value);
   }
   get inverted() {
     return this.getAttribute("inverted");
@@ -1142,94 +1141,55 @@ const _Button = class _Button extends PxElement {
   attributeChangedCallback(attrName, oldValue, newValue) {
     if (oldValue !== newValue) {
       switch (attrName) {
-        case "variant":
-          this.updateVariant(oldValue, newValue);
-          break;
-        case "state":
-          this.updateState(oldValue, newValue);
-          break;
-        case "extended":
-          this.updateExtended();
+        case "name":
+          if (oldValue !== null && oldValue !== "") {
+            this.$el.classList.toggle(`icon-${oldValue}`);
+          }
+          if (newValue !== null && newValue !== "") {
+            this.$el.classList.toggle(`icon-${newValue}`);
+          }
           break;
-        case "loading":
-          this.updateLoading();
+        case "size":
+          this.updateAttribute(attrName, oldValue, newValue, iconSizeValues);
           break;
-        case "shape":
-          this.updateShape(oldValue, newValue);
+        case "color":
+          this.updateAttribute(attrName, oldValue, newValue, colorValues$1);
           break;
-        default:
-          super.attributeChangedCallback(attrName, oldValue, newValue);
+        case "aria-label":
+          if (newValue !== null && newValue !== "") {
+            this.$el.setAttribute("aria-label", newValue);
+            this.$el.removeAttribute("aria-hidden");
+          }
           break;
       }
     }
   }
-  checkName(values, value) {
-    if (values.includes(value)) {
-      return true;
-    }
-    return false;
-  }
-  checkClass(value) {
-    if (value.startsWith("patch-")) {
-      const splittedValue = value.split(/-(.*)/s);
-      for (const classVar of splittedValue) {
-        if (classVar != "") {
-          this.$el.classList.toggle(classVar);
-        }
-      }
-    } else {
-      this.$el.classList.toggle(value);
-    }
-  }
-  _toggleClass(oldValue, newValue) {
+  updateAttribute(attrName, oldValue, newValue, attrValues) {
     if (oldValue !== null && oldValue !== "" && oldValue !== "default") {
-      this.checkClass(oldValue);
-    }
-    if (newValue !== null && newValue !== "" && newValue !== "default") {
-      this.checkClass(newValue);
-    }
-  }
-  updateVariant(oldValue, newValue) {
-    const values = ["", "default", "secondary", "tertiary", "link", "patch", "patch-info", "patch-black-friday", "patch-eco"];
-    if (newValue === "link") {
-      this.$el.classList.remove("btn");
-    } else {
-      this.$el.classList.add("btn");
+      if (attrName === "size") {
+        this.$el.classList.toggle(`${attrName}-${oldValue}`);
+      } else {
+        this.$el.classList.toggle(oldValue);
+      }
     }
-    this._toggleClass(oldValue, newValue);
-    if (!this.checkName(values, newValue)) {
-      console.error(`Bad "variant" value for ${this.$el}`);
+    if (newValue !== null && newValue !== "" && oldValue !== "default") {
+      if (attrName === "size") {
+        this.$el.classList.toggle(`${attrName}-${newValue}`);
+      } else {
+        this.$el.classList.toggle(newValue);
+      }
     }
-  }
-  updateState(oldValue, newValue) {
-    const values = ["", "default", "success", "error"];
-    this._toggleClass(oldValue, newValue);
-    if (!this.checkName(values, newValue)) {
-      console.error(`Bad "sate" value for ${this.$el}`);
+    if (!this.checkName(attrValues, newValue)) {
+      console.error(`${newValue} is not an allowed ${attrName} value for ${this.$el}`);
     }
   }
-  updateExtended() {
-    this.$el.classList.toggle("extended");
-  }
-  updateLoading() {
-    this.$el.classList.toggle("loading");
-  }
-  updateShape(oldValue, newValue) {
-    const values = ["", "default", "bottom-right", "bottom-left", "alternative"];
-    this._toggleClass(oldValue, newValue);
-    if (!this.checkName(values, newValue)) {
-      console.error(`Bad "shape" value for ${this.$el}`);
-    }
+  checkName(values, value) {
+    return values.includes(value);
   }
 };
-_Button.nativeName = "button";
-let Button = _Button;
-class ProximusButton extends Button {
-  constructor() {
-    super(proximusSemanticStyleSheet);
-  }
-}
-customElements.define("px-button", ProximusButton);
+_Icon.nativeName = "i";
+let Icon = _Icon;
+customElements.define("px-icon", Icon);
 const containerCss = '.container{font-family:Proximus,Verdana,Helvetica,sans-serif;background-color:var(--px-color-bg-container-main-default);border-radius:var(--px-radius-m);padding:var(--px-padding-m);box-sizing:border-box}:host([inverted]) .container{background-color:var(--px-color-bg-container-main-inverted);color:var(--px-color-txt-body-inverted)}.padding-2xs{padding:var(--px-padding-2xs)}.padding-xs{padding:var(--px-padding-xs)}.padding-s{padding:var(--px-padding-s)}.padding-m{padding:var(--px-padding-m)}.padding-l{padding:var(--px-padding-l)}.padding-xl{padding:var(--px-padding-xl)}.padding-none{padding:var(--px-padding-none)}.paddingblock-2xs{padding-block:var(--px-padding-2xs)}.paddingblock-xs{padding-block:var(--px-padding-xs)}.paddingblock-s{padding-block:var(--px-padding-s)}.paddingblock-m{padding-block:var(--px-padding-m)}.paddingblock-l{padding-block:var(--px-padding-l)}.paddingblock-xl{padding-block:var(--px-padding-xl)}.paddingblock-none{padding-block:var(--px-padding-none)}.paddinginline-2xs{padding-inline:var(--px-padding-2xs)}.paddinginline-xs{padding-inline:var(--px-padding-xs)}.paddinginline-s{padding-inline:var(--px-padding-s)}.paddinginline-m{padding-inline:var(--px-padding-m)}.paddinginline-l{padding-inline:var(--px-padding-l)}.paddinginline-xl{padding-inline:var(--px-padding-xl)}.paddinginline-none{padding-inline:var(--px-padding-none)}.paddingtop-2xs{padding-top:var(--px-padding-2xs)}.paddingtop-xs{padding-top:var(--px-padding-xs)}.paddingtop-s{padding-top:var(--px-padding-s)}.paddingtop-m{padding-top:var(--px-padding-m)}.paddingtop-l{padding-top:var(--px-padding-l)}.paddingtop-xl{padding-top:var(--px-padding-xl)}.paddingtop-none{padding-top:var(--px-padding-none)}.paddingright-2xs{padding-right:var(--px-padding-2xs)}.paddingright-xs{padding-right:var(--px-padding-xs)}.paddingright-s{padding-right:var(--px-padding-s)}.paddingright-m{padding-right:var(--px-padding-m)}.paddingright-l{padding-right:var(--px-padding-l)}.paddingright-xl{padding-right:var(--px-padding-xl)}.paddingright-none{padding-right:var(--px-padding-none)}.paddingbottom-2xs{padding-bottom:var(--px-padding-2xs)}.paddingbottom-xs{padding-bottom:var(--px-padding-xs)}.paddingbottom-s{padding-bottom:var(--px-padding-s)}.paddingbottom-m{padding-bottom:var(--px-padding-m)}.paddingbottom-l{padding-bottom:var(--px-padding-l)}.paddingbottom-xl{padding-bottom:var(--px-padding-xl)}.paddingbottom-none{padding-bottom:var(--px-padding-none)}.paddingleft-2xs{padding-left:var(--px-padding-2xs)}.paddingleft-xs{padding-left:var(--px-padding-xs)}.paddingleft-s{padding-left:var(--px-padding-s)}.paddingleft-m{padding-left:var(--px-padding-m)}.paddingleft-l{padding-left:var(--px-padding-l)}.paddingleft-xl{padding-left:var(--px-padding-xl)}.paddingleft-none{padding-left:var(--px-padding-none)}.border-none{border:none}.border-s{border:var(--px-border-s) solid var(--px-color-border-main-default)}.border-m{border:var(--px-border-m) solid var(--px-color-border-main-default)}.border-l{border:var(--px-border-l) solid var(--px-color-border-main-default)}:host([inverted]) .border{border:var(--px-border-m) solid var(--px-color-border-main-inverted)}.borderradius-xs{border-radius:var(--px-radius-xs)}.borderradius-s{border-radius:var(--px-radius-s)}.borderradius-m{border-radius:var(--px-radius-m)}.borderradius-l{border-radius:var(--px-radius-l)}.borderradius-2xl{border-radius:var(--px-radius-2xl)}.borderradius-pill{border-radius:var(--px-radius-pill)}.noborderradius-top{border-top-left-radius:var(--px-radius-none);border-top-right-radius:var(--px-radius-none)}.noborderradius-right{border-top-right-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.noborderradius-bottom{border-bottom-left-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.noborderradius-left{border-top-left-radius:var(--px-radius-none);border-bottom-left-radius:var(--px-radius-none)}.noborderradius-all,.borderradius-none{border-radius:var(--px-radius-none)}.bgcolor-none{background-color:var(--px-color-bg-container-none-default)}.bgcolor-weak{background-color:var(--px-color-bg-container-weak-default)}.bgcolor-moderate{background-color:var(--px-color-bg-container-moderate-default)}.bgcolor-strong{background-color:var(--px-color-bg-container-strong-default)}.bgcolor-rich{background-color:var(--px-color-bg-container-rich-default)}.bgcolor-main{background-color:var(--px-color-bg-container-main-default)}.bgcolor-canvas-weak{background-color:var(--px-color-canvas-weak)}.bgcolor-canvas-light{background-color:var(--px-color-canvas-light)}.bgcolor-canvas-soft{background-color:var(--px-color-canvas-soft)}.bgcolor-canvas-moderate{background-color:var(--px-color-canvas-moderate)}.bgcolor-canvas-strong{background-color:var(--px-color-canvas-strong)}.bgcolor-canvas-deep{background-color:var(--px-color-canvas-deep)}.bgcolor-canvas-rich{background-color:var(--px-color-canvas-rich)}.bgcolor-action-primary{background-color:var(--px-color-bg-action-primary-default)}.bgcolor-action-secondary{background-color:var(--px-color-bg-action-secondary-default)}.bgcolor-action-hover{background-color:var(--px-color-bg-action-hover-default)}.bgcolor-action-disabled{background-color:var(--px-color-bg-action-disabled-default)}.bgcolor-action-active{background-color:var(--px-color-bg-action-active-default)}.bgcolor-notification{background-color:var(--px-color-bg-notification-default)}.bgcolor-promo{background-color:var(--px-color-bg-promo-default)}.bgcolor-success{background-color:var(--px-color-bg-success-default)}.bgcolor-error{background-color:var(--px-color-bg-error-default)}.bgcolor-warning{background-color:var(--px-color-bg-warning-default)}.bgcolor-unlimited{background-color:var(--px-color-bg-unlimited-default)}:host([inverted]) .bgcolor-none{background-color:var(--px-color-bg-container-none-inverted)}:host([inverted]) .bgcolor-weak{background-color:var(--px-color-bg-container-weak-inverted)}:host([inverted]) .bgcolor-moderate{background-color:var(--px-color-bg-container-moderate-inverted)}:host([inverted]) .bgcolor-strong{background-color:var(--px-color-bg-container-strong-inverted)}:host([inverted]) .bgcolor-rich{background-color:var(--px-color-bg-container-rich-inverted)}:host([inverted]) .bgcolor-main{background-color:var(--px-color-bg-container-main-inverted)}:host([inverted]) .bgcolor-action-primary{background-color:var(--px-color-bg-action-primary-inverted)}:host([inverted]) .bgcolor-action-secondary{background-color:var(--px-color-bg-action-secondary-inverted)}:host([inverted]) .bgcolor-action-hover{background-color:var(--px-color-bg-action-hover-inverted)}:host([inverted]) .bgcolor-action-disabled{background-color:var(--px-color-bg-action-disabled-inverted)}:host([inverted]) .bgcolor-action-active{background-color:var(--px-color-bg-action-active-inverted)}:host([inverted]) .bgcolor-notification{background-color:var(--px-color-bg-notification-inverted)}:host([inverted]) .bgcolor-promo{background-color:var(--px-color-bg-promo-inverted)}:host([inverted]) .bgcolor-success{background-color:var(--px-color-bg-success-inverted)}:host([inverted]) .bgcolor-error{background-color:var(--px-color-bg-error-inverted)}:host([inverted]) .bgcolor-warning{background-color:var(--px-color-bg-warning-inverted)}:host([inverted]) .bgcolor-unlimited{background-color:var(--px-color-bg-unlimited-inverted)}.bgimg{background-repeat:no-repeat}.bgimgsize-cover{background-size:cover;background-position:center center}.bgimgsize-contain{background-size:contain}.shadow-none{box-shadow:var(--px-shadow-none)}.shadow-s{box-shadow:var(--px-shadow-s)}.shadow-m{box-shadow:var(--px-shadow-m)}.shadow-l{box-shadow:var(--px-shadow-l)}.shadow-xl{box-shadow:var(--px-shadow-xl)}.anchored{position:relative}::slotted([slot="anchor-right"]),::slotted([slot="anchor-left"]),::slotted([slot="anchor-full"]){position:absolute;top:0}::slotted([slot="anchor-right"]),::slotted([slot="anchor-left"]){transform:translateY(-50%);z-index:2}::slotted([slot="anchor-right"]){right:var(--px-padding-m)}::slotted([slot="anchor-left"]){left:var(--px-padding-m)}.padding-none ::slotted([slot="anchor-right"]){right:var(--px-padding-none)}.padding-none ::slotted([slot="anchor-left"]){left:var(--px-padding-none)}.padding-2xs ::slotted([slot="anchor-right"]){right:var(--px-padding-2xs)}.padding-2xs ::slotted([slot="anchor-left"]){left:var(--px-padding-2xs)}.padding-xs ::slotted([slot="anchor-right"]){right:var(--px-padding-xs)}.padding-xs ::slotted([slot="anchor-left"]){left:var(--px-padding-xs)}.padding-s ::slotted([slot="anchor-right"]){right:var(--px-padding-s)}.padding-s ::slotted([slot="anchor-left"]){left:var(--px-padding-s)}.padding-m ::slotted([slot="anchor-right"]){right:var(--px-padding-m)}.padding-m ::slotted([slot="anchor-left"]){left:var(--px-padding-m)}.padding-l ::slotted([slot="anchor-right"]){right:var(--px-padding-l)}.padding-l ::slotted([slot="anchor-left"]){left:var(--px-padding-l)}.padding-xl ::slotted([slot="anchor-right"]){right:var(--px-padding-xl)}.padding-xl ::slotted([slot="anchor-left"]){left:var(--px-padding-xl)}::slotted([slot="anchor-full"]){transform:translateY(-100%);right:0;left:0;text-align:center;z-index:1}@media only screen and (max-width: 640px){.padding-l{padding:var(--px-padding-l-mobile)}.padding-xl{padding:var(--px-padding-xl-mobile)}.paddingtop-l{padding-top:var(--px-padding-l-mobile)}.paddingtop-xl{padding-top:var(--px-padding-xl-mobile)}.paddingright-l{padding-right:var(--px-padding-l-mobile)}.paddingright-xl{padding-right:var(--px-padding-xl-mobile)}.paddingbottom-l{padding-bottom:var(--px-padding-l-mobile)}.paddingbottom-xl{padding-bottom:var(--px-padding-xl-mobile)}.paddingleft-l{padding-left:var(--px-padding-l-mobile)}.paddingleft-xl{padding-left:var(--px-padding-xl-mobile)}}.border-s ::slotted([slot="anchor-full"]){right:calc(var(--px-border-s) * -1);left:calc(var(--px-border-s) * -1)}.border-m ::slotted([slot="anchor-full"]){right:calc(var(--px-border-m) * -1);left:calc(var(--px-border-m) * -1)}.border-l ::slotted([slot="anchor-full"]){right:calc(var(--px-border-l) * -1);left:calc(var(--px-border-l) * -1)}';
 const containerStyles = new CSSStyleSheet();
 containerStyles.replaceSync(containerCss);
@@ -1510,7 +1470,18 @@ const headingStyles$2 = new CSSStyleSheet();
 headingStyles$2.replaceSync(headingCss);
 const typographyStyles$4 = new CSSStyleSheet();
 typographyStyles$4.replaceSync(typographyCss$1);
-const variantValues$2 = ["", "default", "h1", "h2", "h3", "h4", "h5", "h6", "h7", "subtitle"];
+const variantValues$3 = [
+  "",
+  "default",
+  "h1",
+  "h2",
+  "h3",
+  "h4",
+  "h5",
+  "h6",
+  "h7",
+  "subtitle"
+];
 class AbstractHeading extends PxElement {
   template() {
     return `<slot></slot>`;
@@ -1522,7 +1493,14 @@ class AbstractHeading extends PxElement {
     this.shadowRoot.appendChild($root);
   }
   static get observedAttributes() {
-    return [...super.observedAttributes, "variant", "color", "fontsize", "fontweight", "inverted"];
+    return [
+      ...super.observedAttributes,
+      "variant",
+      "color",
+      "fontsize",
+      "fontweight",
+      "inverted"
+    ];
   }
   get variant() {
     return this.getAttribute("variant");
@@ -1558,7 +1536,7 @@ class AbstractHeading extends PxElement {
     if (oldValue !== newValue) {
       switch (attrName) {
         case "variant":
-          this.updateAttribute(attrName, oldValue, newValue, variantValues$2);
+          this.updateAttribute(attrName, oldValue, newValue, variantValues$3);
           break;
         case "color":
           this.updateTypography(attrName, oldValue, newValue, colorValues$2);
@@ -1652,42 +1630,265 @@ const _H6 = class _H6 extends AbstractHeading {
 _H6.nativeName = "h6";
 let H6 = _H6;
 customElements.define("px-h6", H6);
-const styles$9 = ':host{line-height:1;display:inline-block;vertical-align:middle}i{font-family:PxIcon;color:var(--px-color-icon-primary-default);line-height:1;font-style:unset;font-weight:400;-webkit-user-select:none;user-select:none;font-display:swap}.inherit{color:inherit}.primary{color:var(--px-color-icon-primary-default)}.body{color:var(--px-color-icon-body-default)}.details{color:var(--px-color-icon-details-default)}.hover:hover{color:var(--px-color-icon-hover-default)}.hover:active{color:var(--px-color-icon-active-default)}.disabled{color:var(--px-color-icon-disabled-default)}.success{color:var(--px-color-icon-success-default)}.warning{color:var(--px-color-icon-warning-default)}.error{color:var(--px-color-icon-error-default)}.unlimited{color:var(--px-color-icon-unlimited-default)}.promo{color:var(--px-color-icon-promo-default)}:host([inverted]) i,:host([inverted]) .primary{color:var(--px-color-icon-primary-inverted)}:host([inverted]) .body{color:var(--px-color-icon-body-inverted)}:host([inverted]) .details{color:var(--px-color-icon-details-inverted)}:host([inverted]) .hover:hover{color:var(--px-color-icon-hover-inverted)}:host([inverted]) .hover:active{color:var(--px-color-icon-active-inverted)}:host([inverted]) .disabled{color:var(--px-color-icon-disabled-inverted)}:host([inverted]) .success{color:var(--px-color-icon-success-inverted)}:host([inverted]) .warning{color:var(--px-color-icon-warning-inverted)}:host([inverted]) .error{color:var(--px-color-icon-error-inverted)}:host([inverted]) .unlimited{color:var(--px-color-icon-unlimited-inverted)}:host([inverted]) .promo{color:var(--px-color-icon-promo-inverted)}.size-2xs{font-size:var(--px-icon-size-2xs-mobile)}.size-xs{font-size:var(--px-icon-size-xs-mobile)}.size-s{font-size:var(--px-icon-size-s-mobile)}.size-m{font-size:var(--px-icon-size-m-mobile)}.size-l{font-size:var(--px-icon-size-l-mobile)}.size-xl{font-size:var(--px-icon-size-xl-mobile)}.size-2xl{font-size:var(--px-icon-size-2xl-mobile)}@media only screen and (min-width: 64rem){.size-2xs{font-size:var(--px-icon-size-2xs-tablet)}.size-xs{font-size:var(--px-icon-size-xs-tablet)}.size-s{font-size:var(--px-icon-size-s-tablet)}.size-m{font-size:var(--px-icon-size-m-tablet)}.size-l{font-size:var(--px-icon-size-l-tablet)}.size-xl{font-size:var(--px-icon-size-xl-tablet)}.size-2xl{font-size:var(--px-icon-size-2xl-tablet)}}@media only screen and (min-width: 90rem){.size-2xs{font-size:var(--px-icon-size-2xs-desktop)}.size-xs{font-size:var(--px-icon-size-xs-desktop)}.size-s{font-size:var(--px-icon-size-s-desktop)}.size-m{font-size:var(--px-icon-size-m-desktop)}.size-l{font-size:var(--px-icon-size-l-desktop)}.size-xl{font-size:var(--px-icon-size-xl-desktop)}.size-2xl{font-size:var(--px-icon-size-2xl-desktop)}}i.icon-large:before{vertical-align:-10%;font-size:1.3333333333em}.icon-Accessories:before{content:""}.icon-Account:before{content:""}.icon-Activeren:before{content:""}.icon-Addition:before{content:""}.icon-Administration:before{content:""}.icon-Advantage:before{content:""}.icon-Advantage-pig:before{content:""}.icon-AI:before{content:""}.icon-Airplane:before{content:""}.icon-Alarm:before{content:""}.icon-Answers:before{content:""}.icon-Antenna:before{content:""}.icon-Anywhere:before{content:""}.icon-Applications:before{content:""}.icon-Appointment:before{content:""}.icon-Arrow:before{content:""}.icon-Arrow-circle:before{content:""}.icon-Arrow-direction:before{content:""}.icon-Arrow-direction-horizontal:before{content:""}.icon-Arrow-down:before{content:""}.icon-Arrow-left:before{content:""}.icon-Arrow-navigation:before{content:""}.icon-Arrow-outline:before{content:""}.icon-Arrow-outline-direction:before{content:""}.icon-Arrowbutton:before{content:""}.icon-Arrowbutton-left:before{content:""}.icon-Articles:before{content:""}.icon-Baby:before{content:""}.icon-Back-camera:before{content:""}.icon-Battery:before{content:""}.icon-Belgique-ok:before{content:""}.icon-Best-seller:before{content:""}.icon-Best-seller-14:before{content:""}.icon-Best-seller-2:before{content:""}.icon-Bill:before{content:""}.icon-Bill-member:before{content:""}.icon-Birthday:before{content:""}.icon-Blacklisted:before{content:""}.icon-Blindness:before{content:""}.icon-Bluetooth:before{content:""}.icon-Broken-links:before{content:""}.icon-Bullet:before{content:""}.icon-Caddy:before{content:""}.icon-Calendar:before{content:""}.icon-Calendar-14:before{content:""}.icon-Calendar-7:before{content:""}.icon-Calls:before{content:""}.icon-Callsfromabroad:before{content:""}.icon-Callsfrombelgium:before{content:""}.icon-Calltransfert:before{content:""}.icon-Camera:before{content:""}.icon-Car:before{content:""}.icon-Card:before{content:""}.icon-Care:before{content:""}.icon-Circle:before{content:""}.icon-Circle-Remove:before{content:""}.icon-Close:before{content:""}.icon-Cloud:before{content:""}.icon-Cloud-ICT:before{content:""}.icon-Cloud-IoT:before{content:""}.icon-Cloud-Networks:before{content:""}.icon-Cloud-Security:before{content:""}.icon-Collaboration:before{content:""}.icon-Collapse:before{content:""}.icon-Community:before{content:""}.icon-Community2:before{content:""}.icon-Compare:before{content:""}.icon-Congratulations-box:before{content:""}.icon-Connected-house:before{content:""}.icon-Connection-error:before{content:""}.icon-Connection-manager:before{content:""}.icon-Connectivity:before{content:""}.icon-Contact:before{content:""}.icon-Contactlist:before{content:""}.icon-Contest:before{content:""}.icon-Continuity:before{content:""}.icon-Cookie:before{content:""}.icon-Copy:before{content:""}.icon-Crash:before{content:""}.icon-Customer-Zone:before{content:""}.icon-Dance:before{content:""}.icon-Data:before{content:""}.icon-Deafpeople:before{content:""}.icon-Delivery:before{content:""}.icon-Desktop:before{content:""}.icon-Devices:before{content:""}.icon-Dial:before{content:""}.icon-Digital-media:before{content:""}.icon-Directassist:before{content:""}.icon-Download:before{content:""}.icon-Drag:before{content:""}.icon-E-carte-Facebook:before{content:""}.icon-Easy:before{content:""}.icon-Edit:before{content:""}.icon-Energy:before{content:""}.icon-Entertainment:before{content:""}.icon-Error-box:before{content:""}.icon-Eservices:before{content:""}.icon-Exhibition-screens:before{content:""}.icon-Expand:before{content:""}.icon-Eyedeficiency:before{content:""}.icon-Facebook:before{content:""}.icon-Family:before{content:""}.icon-Favourite:before{content:""}.icon-Favourite-unselected:before{content:""}.icon-Feedback:before{content:""}.icon-Fiber:before{content:""}.icon-Filter:before{content:""}.icon-Fixed-connection:before{content:""}.icon-Fixed-ringing:before{content:""}.icon-Flexibility:before{content:""}.icon-Flexible-delivery:before{content:""}.icon-Football:before{content:""}.icon-Football-11:before{content:""}.icon-Football-11plus:before{content:""}.icon-Forum:before{content:""}.icon-Forward:before{content:""}.icon-Freedelivery:before{content:""}.icon-Freeservices:before{content:""}.icon-Frequently-questions:before{content:""}.icon-Front-camera:before{content:""}.icon-G-Tablet:before{content:""}.icon-Gallery:before{content:""}.icon-Games:before{content:""}.icon-Gift:before{content:""}.icon-Government:before{content:""}.icon-Guitar:before{content:""}.icon-Handicap:before{content:""}.icon-Help:before{content:""}.icon-Home:before{content:""}.icon-Home-added-value:before{content:""}.icon-Hub:before{content:""}.icon-ICT:before{content:""}.icon-Icon-Mood-happy:before{content:""}.icon-Icon-Mood-neutral:before{content:""}.icon-Icon-Mood-unhappy:before{content:""}.icon-Ict-networking:before{content:""}.icon-Idea:before{content:""}.icon-Incomingcalls:before{content:""}.icon-Infinity:before{content:""}.icon-Information:before{content:""}.icon-Information-box:before{content:""}.icon-Infrastructure:before{content:""}.icon-Innovation:before{content:""}.icon-Inscription:before{content:""}.icon-Instagram:before{content:""}.icon-International:before{content:""}.icon-Internet:before{content:""}.icon-Internetlaptop:before{content:""}.icon-Internetmobile:before{content:""}.icon-Internettablet:before{content:""}.icon-Invoice-insight-advanced:before{content:""}.icon-Layer243:before{content:""}.icon-Linkedin:before{content:""}.icon-Links:before{content:""}.icon-Local-data:before{content:""}.icon-Location:before{content:""}.icon-Login1:before{content:""}.icon-Login2:before{content:""}.icon-LoginOpen:before{content:""}.icon-Logout:before{content:""}.icon-Low-stock:before{content:""}.icon-Magnify:before{content:""}.icon-Manual:before{content:""}.icon-Markets:before{content:""}.icon-Meeting:before{content:""}.icon-Mentaldeficiency:before{content:""}.icon-Menu:before{content:""}.icon-Menuburger:before{content:""}.icon-Messaging:before{content:""}.icon-Messenger:before{content:""}.icon-Micro:before{content:""}.icon-MicroSIM-card:before{content:""}.icon-Microsoft-Office:before{content:""}.icon-Minus-fill:before{content:""}.icon-Minutes120:before{content:""}.icon-Minutes15:before{content:""}.icon-Minutes1600:before{content:""}.icon-Minutes240:before{content:""}.icon-Minutes30:before{content:""}.icon-Minutes400:before{content:""}.icon-Minutes60:before{content:""}.icon-Minutes800:before{content:""}.icon-Mobile:before{content:""}.icon-Mobile-Coverage:before{content:""}.icon-Mobility-insurance:before{content:""}.icon-Monitoring:before{content:""}.icon-Mood-joy:before{content:""}.icon-Mood-very-bad:before{content:""}.icon-Move-Sticker:before{content:""}.icon-Move-box:before{content:""}.icon-Moving:before{content:""}.icon-Music:before{content:""}.icon-Myentertainment:before{content:""}.icon-Network:before{content:""}.icon-Newsletter:before{content:""}.icon-Next:before{content:""}.icon-No-playing:before{content:""}.icon-No-stock:before{content:""}.icon-Norton-security:before{content:""}.icon-Not-Available:before{content:""}.icon-Number-1:before{content:""}.icon-Number-10:before{content:""}.icon-Number-2:before{content:""}.icon-Number-3:before{content:""}.icon-Number-4:before{content:""}.icon-Number-5:before{content:""}.icon-Number-6:before{content:""}.icon-Number-7:before{content:""}.icon-Number-8:before{content:""}.icon-Number-9:before{content:""}.icon-OS:before{content:""}.icon-On-app:before{content:""}.icon-On-web:before{content:""}.icon-OneClick:before{content:""}.icon-Online-exclu-en:before{content:""}.icon-Online-exclu-fr:before{content:""}.icon-Online-exclu-nl:before{content:""}.icon-Online-promo-en:before{content:""}.icon-Online-promo-fr:before{content:""}.icon-Online-promo-nl:before{content:""}.icon-Options:before{content:""}.icon-Outcomingcalls:before{content:""}.icon-Overview:before{content:""}.icon-Packs:before{content:""}.icon-Paperclip:before{content:""}.icon-Pedestrian:before{content:""}.icon-Photo:before{content:""}.icon-Picture:before{content:""}.icon-Pin:before{content:""}.icon-Place-map:before{content:""}.icon-Play:before{content:""}.icon-Plus:before{content:""}.icon-Plus-fill:before{content:""}.icon-Points:before{content:""}.icon-Positioning:before{content:""}.icon-Posts:before{content:""}.icon-Presencehome:before{content:""}.icon-Previous:before{content:""}.icon-Prime:before{content:""}.icon-Print:before{content:""}.icon-Processor:before{content:""}.icon-Products:before{content:""}.icon-Promo:before{content:""}.icon-Proximus-TV-app:before{content:""}.icon-Pxs:before{content:""}.icon-Quote:before{content:""}.icon-Raccording-flat:before{content:""}.icon-Ready-to-use:before{content:""}.icon-Recycling:before{content:""}.icon-Reducer:before{content:""}.icon-Refresh:before{content:""}.icon-Relaunch:before{content:""}.icon-Reload:before{content:""}.icon-Remote:before{content:""}.icon-Remove:before{content:""}.icon-Remove-filter:before{content:""}.icon-Restart:before{content:""}.icon-Roaming:before{content:""}.icon-Roaming-Belgium:before{content:""}.icon-Search:before{content:""}.icon-Secure-payment:before{content:""}.icon-Seealso:before{content:""}.icon-Server:before{content:""}.icon-Settings:before{content:""}.icon-Shopmag:before{content:""}.icon-Smarphone-configuration:before{content:""}.icon-Smart-ringing:before{content:""}.icon-Smartphone:before{content:""}.icon-Smartphone-1:before{content:""}.icon-Smartphone-2:before{content:""}.icon-Smartphone-3:before{content:""}.icon-Smartphone-4:before{content:""}.icon-Smartphone-5:before{content:""}.icon-Smartphone-6:before{content:""}.icon-Smartphone4G:before{content:""}.icon-Smiley:before{content:""}.icon-Sms:before{content:""}.icon-Sondage:before{content:""}.icon-Sort-0-9:before{content:""}.icon-Sort-9-0:before{content:""}.icon-Sort-a-z:before{content:""}.icon-Sort-z-a:before{content:""}.icon-Sound-off:before{content:""}.icon-Sound-on:before{content:""}.icon-Speed:before{content:""}.icon-Speedtest-download:before{content:""}.icon-Speedtest-upload:before{content:""}.icon-Status-nok:before{content:""}.icon-Status-ok:before{content:""}.icon-Status-ongoing:before{content:""}.icon-Status-warning:before{content:""}.icon-Stay-informed:before{content:""}.icon-Stayinformed:before{content:""}.icon-Stock:before{content:""}.icon-Stopwatch:before{content:""}.icon-Subscription:before{content:""}.icon-Surfgsm:before{content:""}.icon-Sustainability:before{content:""}.icon-Switchon-switchoff:before{content:""}.icon-TV-replay-36:before{content:""}.icon-TVReplay:before{content:""}.icon-Tablet:before{content:""}.icon-Tailor:before{content:""}.icon-Target-Blank:before{content:""}.icon-Tarifs:before{content:""}.icon-Technical-cast:before{content:""}.icon-Telephony:before{content:""}.icon-Television:before{content:""}.icon-Temp:before{content:""}.icon-Tips1:before{content:""}.icon-Tips2:before{content:""}.icon-Tools:before{content:""}.icon-Top:before{content:""}.icon-Touchscreens:before{content:""}.icon-Tractor:before{content:""}.icon-Train:before{content:""}.icon-Transfer:before{content:""}.icon-Transfer-people:before{content:""}.icon-Trash:before{content:""}.icon-Triangle:before{content:""}.icon-TV-10:before{content:""}.icon-TV-12:before{content:""}.icon-TV-14:before{content:""}.icon-TV-16:before{content:""}.icon-TV-18:before{content:""}.icon-Twitter:before{content:""}.icon-Under-construct:before{content:""}.icon-Upgrade-account:before{content:""}.icon-Upload:before{content:""}.icon-Usage:before{content:""}.icon-Usage2:before{content:""}.icon-Validation-box:before{content:""}.icon-Video:before{content:""}.icon-Video-zap:before{content:""}.icon-Videoscope:before{content:""}.icon-View360:before{content:""}.icon-Waiting:before{content:""}.icon-Warning-box:before{content:""}.icon-Watch:before{content:""}.icon-Watch2:before{content:""}.icon-WhatsApp:before{content:""}.icon-Wireless-hub:before{content:""}.icon-Youtube:before{content:""}.icon-circular-economy:before{content:""}.icon-eco:before{content:""}.icon-happy-weeks:before{content:""}.icon-icon-VOD:before{content:""}.icon-mms:before{content:""}.icon-new-en:before{content:""}.icon-new-fr:before{content:""}.icon-new-nl:before{content:""}.icon-prepaid:before{content:""}.icon-promo:before{content:""}.icon-repair-device:before{content:""}.icon-sales-en:before{content:""}.icon-sales-fr:before{content:""}.icon-sales-nl:before{content:""}.icon-simlocked:before{content:""}.icon-temporary-device:before{content:""}.icon-Test-branding-Account-1:before{content:""}.icon-Test-branding-Car-1:before{content:""}.icon-Test-branding-Sim-1:before{content:""}';
+const styles$a = ":host,:host *{box-sizing:border-box}:host .content-wrapper{margin-inline:1rem;max-width:1200px}@media only screen and (min-width: 1232px){:host .content-wrapper{margin-inline:auto}}";
 const styleSheet$9 = new CSSStyleSheet();
-styleSheet$9.replaceSync(styles$9);
-const colorValues$1 = ["", "default", "inherit", "primary", "body", "details", "hover", "active", "disabled", "promo", "success", "warning", "error", "unlimited"];
-const _Icon = class _Icon extends PxElement {
+styleSheet$9.replaceSync(styles$a);
+class Section2 extends HTMLElement {
+  constructor(semanticTokensStylesheet) {
+    super();
+    this.template = () => `
+    <px-container borderradius="none" padding="none" bgcolor="${this.bgColor}">
+      <div class="content-wrapper">
+        <px-vstack gap="under-display-vertical">
+          <slot name="heading"></slot>
+          <px-vstack gap="none">
+            <slot></slot>
+          </px-vstack>
+        </px-vstack>
+      </div>
+    </px-container>
+  `;
+    this.attachShadow({ mode: "open" });
+    this.shadowRoot.innerHTML = this.template();
+    this.shadowRoot.adoptedStyleSheets = [semanticTokensStylesheet, styleSheet$9];
+  }
+  connectedCallback() {
+    replayAttributes(this, Section2.observedAttributes, (name, value) => {
+      this.attributeChangedCallback(name, null, value);
+    });
+    const headingSlot = this.querySelector('[slot="heading"]');
+    if (!headingSlot) {
+      this.shadowRoot.querySelector("px-vstack").setAttribute("gap", "none");
+    }
+  }
+  static get observedAttributes() {
+    return [
+      "bgcolor",
+      "gradient",
+      "bgimg-mobile",
+      "bgimg-tablet",
+      "bgimg-laptop",
+      "bgimgsize",
+      "bgimgposition",
+      "paddingblock",
+      "paddingtop",
+      "paddingbottom"
+    ];
+  }
+  get $container() {
+    return this.shadowRoot.querySelector("px-container");
+  }
+  attributeChangedCallback(name, oldValue, newValue) {
+    if (oldValue !== newValue) {
+      switch (name) {
+        case "bgcolor":
+          this.$container.bgColor = bgColorValues.indexOf(newValue) > 0 ? newValue : "none";
+          break;
+        case "gradient":
+          this.$container.gradient = this.gradient;
+          break;
+        case "bgimg-mobile":
+          this.$container.bgImgMobile = newValue;
+          break;
+        case "bgimg-tablet":
+          this.$container.bgImgTablet = newValue;
+          break;
+        case "bgimg-laptop":
+          this.$container.bgImgLaptop = newValue;
+          break;
+        case "bgimgsize":
+          this.$container.bgImgSize = newValue;
+          break;
+        case "bgimgposition":
+          this.$container.bgImgPosition = newValue;
+          break;
+        case "paddingblock":
+          this.$container.paddingBlock = newValue;
+          break;
+        case "paddingtop":
+          this.$container.paddingTop = newValue;
+          break;
+        case "paddingbottom":
+          this.$container.paddingBottom = newValue;
+          break;
+      }
+    }
+  }
+  get bgColor() {
+    return this.getAttribute("bgcolor") || "none";
+  }
+  set bgColor(value) {
+    this.setAttribute("bgcolor", value);
+  }
+  get gradient() {
+    return this.getAttribute("gradient");
+  }
+  set gradient(value) {
+    this.setAttribute("gradient", value);
+  }
+  get bgImgMobile() {
+    return this.getAttribute("bgimg-mobile");
+  }
+  set bgImgMobile(value) {
+    this.setAttribute("bgimg-mobile", value);
+  }
+  get bgImgTablet() {
+    return this.getAttribute("bgimg-tablet");
+  }
+  set bgImgTablet(value) {
+    this.setAttribute("bgimg-tablet", value);
+  }
+  get bgImgLaptop() {
+    return this.getAttribute("bgimg-laptop");
+  }
+  set bgImgLaptop(value) {
+    this.setAttribute("bgimg-laptop", value);
+  }
+  get bgImgSize() {
+    return this.getAttribute("bgimgsize");
+  }
+  set bgImgSize(value) {
+    this.setAttribute("bgimgsize", value);
+  }
+  get bgImgPosition() {
+    return this.getAttribute("bgimgposition");
+  }
+  set bgImgPosition(value) {
+    this.setAttribute("bgimgposition", value);
+  }
+  get paddingBlock() {
+    return this.getAttribute("paddingblock");
+  }
+  set paddingBlock(value) {
+    this.setAttribute("paddingblock", value);
+  }
+  get paddingTop() {
+    return this.getAttribute("paddingtop");
+  }
+  set paddingTop(value) {
+    this.setAttribute("paddingtop", value);
+  }
+  get paddingBottom() {
+    return this.getAttribute("paddingbottom");
+  }
+  set paddingBottom(value) {
+    this.setAttribute("paddingbottom", value);
+  }
+}
+class ProximusSection extends Section2 {
   constructor() {
-    super(proximusSemanticStyleSheet, styleSheet$9);
-    this.template = () => `<i aria-hidden="true"></i>`;
+    super(proximusSemanticStyleSheet);
+  }
+}
+customElements.define("px-section", ProximusSection);
+const accordionCss = `details{font-family:Proximus,Verdana,Helvetica,sans-serif;display:flex;flex-direction:column;align-items:flex-start}details:not(.single){border-bottom:var(--px-border-m) solid var(--px-color-border-main-default)}details:not(.single) ::slotted([slot="title"]){flex-grow:1}details:not(.single) slot[name=content]{display:block;padding-block:var(--px-spacing-component-default-vertical)}summary{align-items:center;transition:all .2s ease-out 0s,backdrop-filter 0s,-webkit-backdrop-filter 0s}details:not(.single) summary{display:flex;padding:var(--px-padding-s);gap:var(--px-spacing-text-to-icon-horizontal);align-self:stretch}summary:after{content:"";width:24px;height:24px;flex-shrink:0;background-color:var(--px-color-bg-action-secondary-default);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cg id='CHEVRON DOWN'%3E%3Cpath id='Vector' fill-rule='evenodd' clip-rule='evenodd' d='M12.4714 6.19524C12.2111 5.93489 11.7889 5.93489 11.5286 6.19524L8 9.72384L4.4714 6.19524C4.21105 5.93489 3.78894 5.93489 3.52859 6.19524C3.26824 6.45559 3.26824 6.8777 3.52859 7.13805L7.52859 11.1381C7.78894 11.3984 8.21105 11.3984 8.4714 11.1381L12.4714 7.13805C12.7318 6.8777 12.7318 6.45559 12.4714 6.19524Z' fill='%235C2D91'/%3E%3C/g%3E%3C/svg%3E");background-repeat:no-repeat;background-position:center center;border-radius:var(--px-radius-pill);border:var(--px-border-s) solid transparent;transition:all .2s ease-out 0s,backdrop-filter 0s,-webkit-backdrop-filter 0s}summary:hover{cursor:pointer}details:not(.single) summary:hover{background-color:var(--px-color-bg-container-moderate-default)}summary:hover:after{background-color:var(--px-color-bg-action-hover-inverted-default);border:var(--px-border-s) solid var(--px-color-border-action-hover-default);-webkit-backdrop-filter:blur(15px);backdrop-filter:blur(15px)}details.single summary{display:inline-flex;gap:var(--px-spacing-between-icon-horizontal-mobile);justify-content:center;color:var(--px-color-txt-primary-default);font-weight:700;border:var(--px-border-m) solid transparent;border-radius:var(--px-radius-pill)}details.single summary:hover{gap:0;padding:0 var(--px-padding-xs);border-color:var(--px-color-border-action-hover-default)}details.single summary:hover:after{border-color:transparent;margin-right:calc(var(--px-padding-xs) * -1)}details.single slot[name=content]{display:block;padding-top:var(--px-spacing-component-default-vertical)}details[open] summary slot[name=title]{color:var(--px-color-txt-primary-default);font-weight:700}details[open] summary:after{transform:rotate(180deg)}summary::-webkit-details-marker{display:none}:host([inverted]) details{color:var(--px-color-txt-body-inverted)}:host([inverted]) details:not(.single){border-bottom:var(--px-border-m) solid var(--px-color-border-main-inverted)}:host([inverted]) details[open] summary slot[name=title]{color:var(--px-color-txt-primary-inverted)}:host([inverted]) details.single summary{color:var(--px-color-txt-primary-inverted)}:host([inverted]) details.single summary:hover{border-color:var(--px-color-border-action-hover-inverted)}:host([inverted]) details.single summary:hover:after{border-color:transparent}:host([inverted]) summary:after{background-color:var(--px-color-bg-action-secondary-inverted);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12.4714 6.19524C12.2111 5.93489 11.789 5.93489 11.5286 6.19524L8.00002 9.72384L4.47142 6.19524C4.21107 5.93489 3.78897 5.93489 3.52862 6.19524C3.26827 6.45559 3.26827 6.8777 3.52862 7.13805L7.52862 11.1381C7.78897 11.3984 8.21108 11.3984 8.47142 11.1381L12.4714 7.13805C12.7318 6.8777 12.7318 6.45559 12.4714 6.19524Z' fill='white'/%3E%3C/svg%3E")}:host([inverted]) summary:hover{background-color:var(--px-color-bg-container-moderate-inverted)}:host([inverted]) summary:hover:after{background-color:var(--px-color-bg-action-hover-inverted-inverted);border:var(--px-border-s) solid var(--px-color-border-action-hover-inverted)}`;
+const accordionStyles = new CSSStyleSheet();
+accordionStyles.replaceSync(accordionCss);
+const variantValues$2 = ["", "none", "single"];
+const _Accordion = class _Accordion extends PxElement {
+  constructor() {
+    super(proximusSemanticStyleSheet, accordionStyles);
+    this.template = () => `<details>
+      <summary role="button"><slot name="icon"></slot><slot name="title"></slot><slot name="info"></slot></summary>
+      <slot name="content"></slot>
+    </details>`;
     this.shadowRoot.innerHTML = this.template();
   }
   static get observedAttributes() {
-    return [...super.observedAttributes, "name", "size", "color", "aria-label", "inverted"];
+    return [...super.observedAttributes, "variant", "inverted"];
   }
-  get name() {
-    return this.getAttribute("name");
+  get variant() {
+    return this.getAttribute("variant");
   }
-  set name(value) {
-    this.setAttribute("name", value);
+  set variant(value) {
+    this.setAttribute("variant", value);
+  }
+  get inverted() {
+    return this.getAttribute("inverted");
+  }
+  set inverted(value) {
+    this.setAttribute("inverted", value);
+  }
+  attributeChangedCallback(attrName, oldValue, newValue) {
+    if (oldValue !== newValue) {
+      switch (attrName) {
+        case "variant":
+          this.updateAttribute(attrName, oldValue, newValue, variantValues$2);
+          break;
+        default:
+          super.attributeChangedCallback(attrName, oldValue, newValue);
+          break;
+      }
+    }
+  }
+  updateAttribute(attrName, oldValue, newValue, attrValues) {
+    if (oldValue !== null && oldValue !== "") {
+      this.$el.classList.toggle(`${oldValue}`);
+    }
+    if (newValue !== null && newValue !== "") {
+      this.$el.classList.toggle(`${newValue}`);
+    }
+    if (!this.checkName(attrValues, newValue)) {
+      console.error(`${newValue} is not an allowed ${attrName} value for ${this.$el}`);
+    }
+  }
+  checkName(values, value) {
+    return values.includes(value);
+  }
+};
+_Accordion.nativeName = "details";
+let Accordion = _Accordion;
+customElements.define("px-accordion", Accordion);
+const buttonCss = '.btn{display:inline-flex;vertical-align:middle;align-items:center;justify-content:center;font-family:Proximus,Verdana,Helvetica,sans-serif;font-size:var(--px-text-size-base-mobile);line-height:var(--px-line-height-base-mobile);font-weight:700;gap:var(--px-spacing-between-icon-horizontal-mobile);cursor:pointer;text-decoration:none;--btn-transition: all .2s ease-in-out 0s;transition:var(--btn-transition);border:var(--px-border-m) solid transparent;--slotted-icon-size: var(--px-icon-size-xs-mobile)}.btn,.btn *{box-sizing:border-box}.btn:hover:not([disabled],[aria-disabled=true],.loading),.btn:focus:not([disabled],[aria-disabled=true],.loading){border-color:var(--px-color-border-action-hover-default);outline:0}.btn:active{transform:scale(.95)}.btn[disabled],.btn[aria-disabled=true]{cursor:default;pointer-events:none}.btn.loading{cursor:inherit}.btn.loading ::slotted(px-spinner){line-height:var(--px-icon-size-xs-mobile)}.btn:not(.secondary,.tertiary,.patch){color:var(--px-color-txt-inverted-primary-default);background:var(--px-color-bg-action-primary-default);min-height:var(--px-size-action-mobile);padding:0 var(--px-padding-m);border-radius:var(--px-radius-xs) var(--px-radius-xs) var(--px-radius-2xl) var(--px-radius-xs)}.btn:not(.secondary,.tertiary,.patch):hover:not([disabled],[aria-disabled=true],.loading),.btn:not(.secondary,.tertiary,.patch):focus:not([disabled],[aria-disabled=true],.loading){color:var(--px-color-txt-primary-default);background:var(--px-color-bg-action-hover-inverted-default)}.btn:not(.secondary,.tertiary,.patch)[disabled],.btn:not(.secondary,.tertiary,.patch)[aria-disabled=true]{background:var(--px-color-bg-action-disabled-default);color:var(--px-color-txt-disabled-default)}.btn:not(.secondary,.tertiary,.patch).loading{background:var(--px-color-bg-action-disabled-default);color:var(--px-color-txt-primary-default);border-color:transparent}.btn:not(.secondary,.tertiary,.patch).extended{width:100%}.btn:not(.secondary,.tertiary,.patch).alternative{border-radius:var(--px-radius-xs)}.btn.secondary{color:var(--px-color-txt-primary-default);background:var(--px-color-bg-action-secondary-default);min-height:var(--px-size-action-mobile);padding:0 var(--px-padding-m);border-radius:var(--px-radius-xs) var(--px-radius-xs) var(--px-radius-2xl) var(--px-radius-xs)}.btn.secondary:hover:not([disabled],[aria-disabled=true],.loading),.btn.secondary:focus:not([disabled],[aria-disabled=true],.loading){color:var(--px-color-txt-primary-default);background:var(--px-color-bg-action-hover-inverted-default)}.btn.secondary[disabled],.btn.secondary[aria-disabled=true]{background:var(--px-color-bg-action-disabled-default);color:var(--px-color-txt-disabled-default)}.btn.secondary.loading{background:var(--px-color-bg-action-disabled-default);color:var(--px-color-txt-primary-default);border-color:transparent}.btn.secondary.extended{width:100%}.btn.secondary.alternative{border-radius:var(--px-radius-xs)}.btn.tertiary{background:none;color:var(--px-color-txt-primary-default);border-radius:var(--px-radius-pill);padding:0}.btn.tertiary ::slotted(px-icon){display:flex;align-items:center;justify-content:center;width:var(--px-icon-size-m-mobile);height:var(--px-icon-size-m-mobile);font-size:var(--px-icon-size-2xs-mobile);border-radius:50%;background:var(--px-color-bg-action-secondary-default);transition:var(--btn-transition)}.btn.tertiary:hover:not([disabled],[aria-disabled=true],.loading),.btn.tertiary:focus:not([disabled],[aria-disabled=true],.loading){gap:0;padding:0 .5rem}.btn.tertiary:hover:not([disabled],[aria-disabled=true],.loading) ::slotted(*),.btn.tertiary:focus:not([disabled],[aria-disabled=true],.loading) ::slotted(*){background:transparent}.btn.tertiary:hover:not([disabled],[aria-disabled=true],.loading) ::slotted(px-icon),.btn.tertiary:focus:not([disabled],[aria-disabled=true],.loading) ::slotted(px-icon){margin:0 -8px}.btn.tertiary:hover:not([disabled],[aria-disabled=true],.loading) ::slotted([slot="before"]),.btn.tertiary:focus:not([disabled],[aria-disabled=true],.loading) ::slotted([slot="before"]){margin:0 0 0 -.5rem}.btn.tertiary:hover:not([disabled],[aria-disabled=true],.loading) ::slotted([slot="after"]),.btn.tertiary:focus:not([disabled],[aria-disabled=true],.loading) ::slotted([slot="after"]){margin:0 -.5rem 0 0}.btn.tertiary[disabled],.btn.tertiary[aria-disabled=true]{color:var(--px-color-txt-disabled-default)}.btn.tertiary[disabled] ::slotted(px-icon),.btn.tertiary[aria-disabled=true] ::slotted(px-icon){background:var(--px-color-bg-action-disabled-default)}.btn.tertiary.loading{color:var(--px-color-txt-primary-default);border-color:transparent}.btn.tertiary.loading ::slotted(px-spinner){display:flex;align-items:center;justify-content:center;width:var(--px-icon-size-m-mobile);height:var(--px-icon-size-m-mobile);border-radius:50%;background:var(--px-color-bg-action-disabled-default)}.btn.patch{display:inline-flex}.btn.patch:hover:not([disabled],[aria-disabled=true],.loading),.btn.patch:focus:not([disabled],[aria-disabled=true],.loading){color:var(--px-color-txt-primary-default);background:var(--px-color-bg-action-hover-inverted-default)}.btn.patch[disabled],.btn.patch[aria-disabled=true]{background:var(--px-color-bg-action-disabled-default);color:var(--px-color-txt-disabled-default)}button.link{background:none;border:none;text-decoration:underline;padding:0;cursor:pointer}button.link[disabled],button.link[aria-disabled=true]{cursor:default;pointer-events:none;color:var(--px-color-txt-disabled-default)}:host([inverted]) .btn:hover:not([disabled],[aria-disabled=true],.loading),:host([inverted]) .btn:focus:not([disabled],[aria-disabled=true],.loading){border-color:var(--px-color-border-action-hover-inverted)}:host([inverted]) .btn:not(.secondary,.tertiary,.patch){color:var(--px-color-txt-inverted-primary-inverted);background:var(--px-color-bg-action-primary-inverted)}:host([inverted]) .btn:not(.secondary,.tertiary,.patch):hover:not([disabled],[aria-disabled=true],.loading),:host([inverted]) .btn:not(.secondary,.tertiary,.patch):focus:not([disabled],[aria-disabled=true],.loading){color:var(--px-color-txt-primary-inverted);background:var(--px-color-bg-action-hover-inverted-inverted)}:host([inverted]) .btn:not(.secondary,.tertiary,.patch)[disabled],:host([inverted]) .btn:not(.secondary,.tertiary,.patch)[aria-disabled=true]{background:var(--px-color-bg-action-disabled-inverted);color:var(--px-color-txt-disabled-inverted)}:host([inverted]) .btn:not(.secondary,.tertiary,.patch).loading{background:var(--px-color-bg-action-disabled-inverted);color:var(--px-color-txt-primary-inverted);border-color:transparent}:host([inverted]) .btn.secondary{color:var(--px-color-txt-primary-inverted);background:var(--px-color-bg-action-secondary-inverted)}:host([inverted]) .btn.secondary:hover:not([disabled],[aria-disabled=true],.loading),:host([inverted]) .btn.secondary:focus:not([disabled],[aria-disabled=true],.loading){color:var(--px-color-txt-primary-inverted);background:var(--px-color-bg-action-hover-inverted-inverted)}:host([inverted]) .btn.secondary[disabled],:host([inverted]) .btn.secondary[aria-disabled=true]{background:var(--px-color-bg-action-disabled-inverted);color:var(--px-color-txt-disabled-inverted)}:host([inverted]) .btn.secondary.loading{background:var(--px-color-bg-action-disabled-inverted);color:var(--px-color-txt-primary-inverted);border-color:transparent}:host([inverted]) .btn.tertiary{color:var(--px-color-txt-primary-inverted)}:host([inverted]) .btn.tertiary ::slotted(px-icon){background:var(--px-color-bg-action-secondary-inverted)}:host([inverted]) .btn.tertiary[disabled],:host([inverted]) .btn.tertiary[aria-disabled=true]{color:var(--px-color-txt-disabled-inverted)}:host([inverted]) .btn.tertiary[disabled] ::slotted(px-icon),:host([inverted]) .btn.tertiary[aria-disabled=true] ::slotted(px-icon){background:var(--px-color-bg-action-disabled-inverted)}:host([inverted]) .btn.tertiary.loading{color:var(--px-color-txt-primary-inverted)}:host([inverted]) .btn.tertiary.loading ::slotted(px-spinner){background:var(--px-color-bg-action-disabled-inverted)}:host([inverted]) .btn.patch:hover:not([disabled],[aria-disabled=true],.loading),:host([inverted]) .btn.patch:focus:not([disabled],[aria-disabled=true],.loading){color:var(--px-color-txt-primary-inverted);background:var(--px-color-bg-action-hover-inverted-inverted)}:host([inverted]) .btn.patch[disabled],:host([inverted]) .btn.patch[aria-disabled=true]{background:var(--px-color-bg-action-disabled-inverted);color:var(--px-color-txt-disabled-inverted)}:host([inverted]) button.link[disabled],:host([inverted]) button.link[aria-disabled=true]{color:var(--px-color-txt-disabled-inverted)}@media only screen and (min-width: 640px){.btn{font-size:var(--px-text-size-base-tablet);line-height:var(--px-line-height-base-tablet);--slotted-icon-size: var(--px-icon-size-xs-tablet)}.btn.loading ::slotted(px-spinner){line-height:var(--px-icon-size-xs-tablet)}.btn:not(.secondary,.tertiary,.patch){min-height:var(--px-size-action)}.btn.secondary{min-height:var(--px-size-action)}.btn.tertiary ::slotted(px-spinner){width:var(--px-icon-size-m-tablet);height:var(--px-icon-size-m-tablet)}}@media only screen and (min-width: 640px){.btn{font-size:var(--px-text-size-base-desktop);line-height:var(--px-line-height-base-desktop);--slotted-icon-size: var(--px-icon-size-xs-desktop)}.btn.loading ::slotted(px-spinner){line-height:var(--px-icon-size-xs-desktop)}.btn.tertiary ::slotted(px-spinner){width:var(--px-icon-size-m-desktop);height:var(--px-icon-size-m-desktop)}}@keyframes anim-spinner{0%{transform:rotate(0)}to{transform:rotate(360deg)}}';
+const linkCss = 'a,.link,::slotted(a){font-family:Proximus,Verdana,Helvetica,sans-serif;font-size:var(--px-text-size-base-mobile);line-height:var(--px-line-height-base-mobile);font-weight:500;color:var(--px-color-txt-body-default)}a:hover,a:focus,.link:hover,.link:focus{color:var(--px-color-txt-hover-default)}a[aria-disabled=true],.link[aria-disabled=true]{cursor:default;pointer-events:none;color:var(--px-color-txt-disabled-default)}a ::slotted([slot="after"]),.link ::slotted([slot="after"]){margin-left:var(--px-spacing-text-to-icon-compact-horizontal)}a ::slotted(*),.link ::slotted(*){display:inline-block}::slotted(a:hover),::slotted(a:focus){color:var(--px-color-txt-hover-default)}a.no-style{color:inherit;text-decoration:none}a.no-style:hover,a.no-style:focus{color:inherit}a.skip-link{position:absolute;left:-10000px;top:auto;overflow:hidden;background-color:var(--px-color-bg-container-main-default);padding:var(--px-padding-xs)}a.skip-link:focus{left:auto;z-index:999}:host([inverted]) a,:host([inverted]) .link,:host([inverted]) ::slotted(a){color:var(--px-color-txt-body-inverted)}:host([inverted]) a:hover,:host([inverted]) a:focus,:host([inverted]) .link:hover,:host([inverted]) .link:focus{color:var(--px-color-txt-hover-inverted)}:host([inverted]) a[aria-disabled=true],:host([inverted]) .link[aria-disabled=true]{color:var(--px-color-txt-disabled-inverted)}:host([inverted]) ::slotted(a:hover),:host([inverted]) ::slotted(a:focus){color:var(--px-color-txt-hover-inverted)}:host([inverted]) a.skip-link{background-color:var(--px-color-bg-container-main-inverted)}@media only screen and (min-width: 64rem){a,.link,::slotted(a){font-size:var(--px-text-size-base-tablet);line-height:var(--px-line-height-base-tablet)}}@media only screen and (min-width: 90rem){a,.link,::slotted(a){font-size:var(--px-text-size-base-desktop);line-height:var(--px-line-height-base-desktop)}}';
+const styles$9 = ".patch{display:inline-block;padding:0 var(--px-padding-s);height:1.625rem;border:var(--px-border-m) solid transparent;border-radius:var(--px-radius-l) var(--px-radius-l) var(--px-radius-l) 0;font-family:Proximus,Verdana,Helvetica,sans-serif;font-weight:700;font-size:var(--px-text-size-base-mobile);line-height:var(--px-line-height-base-mobile);text-align:center;background-color:var(--px-color-bg-promo-default);color:var(--px-color-txt-inverted-primary-default)}.patch,.patch *{box-sizing:border-box}@media only screen and (min-width: 640px){.patch{font-size:var(--px-text-size-base-tablet);line-height:var(--px-line-height-base-tablet)}}@media only screen and (min-width: 1025px){.patch{font-size:var(--px-text-size-base-desktop);line-height:var(--px-line-height-base-desktop)}}:host([inverted]) .patch{background-color:var(--px-color-bg-promo-inverted);color:var(--px-color-txt-inverted-primary-default)}.bottom-right{border-radius:var(--px-radius-l) var(--px-radius-l) 0 var(--px-radius-l)}.bottom-left{border-radius:var(--px-radius-l) var(--px-radius-l) var(--px-radius-l) 0}.info{background-color:var(--px-color-illu-blue-core);color:var(--px-color-txt-body-default)}:host([inverted]) .info{background-color:var(--px-color-illu-blue-core);color:var(--px-color-txt-body-default)}.black-friday{background-color:var(--px-color-bg-container-rich-default);color:var(--px-color-txt-inverted-default)}:host([inverted]) .black-friday{background-color:var(--px-color-bg-container-rich-inverted);color:var(--px-color-txt-inverted-inverted)}.eco{background-color:var(--px-color-bg-success-default);color:var(--px-color-txt-inverted-default)}:host([inverted]) .eco{background-color:var(--px-color-bg-success-inverted);color:var(--px-color-txt-inverted-inverted)}.greyed{background-color:var(--px-color-bg-action-disabled-default);color:var(--px-color-icon-disabled-default)}:host([inverted]) .greyed{background-color:var(--px-color-bg-action-disabled-inverted);color:var(--px-color-icon-disabled-inverted)}";
+const buttonStyles$1 = new CSSStyleSheet();
+const linkStyles$2 = new CSSStyleSheet();
+const patchStyles = new CSSStyleSheet();
+buttonStyles$1.replaceSync(buttonCss);
+linkStyles$2.replaceSync(linkCss);
+patchStyles.replaceSync(styles$9);
+const _Button = class _Button extends PxElement {
+  constructor(semanticTokensStylesheet) {
+    super(semanticTokensStylesheet, buttonStyles$1, linkStyles$2, patchStyles);
+    this.template = () => `<slot name="before"></slot><slot></slot><slot name="after"></slot>`;
+    const $root = document.createElement(this.nativeName);
+    $root.classList.add("btn");
+    $root.innerHTML = this.template();
+    this.shadowRoot.appendChild($root);
+  }
+  static get observedAttributes() {
+    return [...super.observedAttributes, "variant", "state", "extended", "loading", "shape", "inverted"];
+  }
+  get variant() {
+    return this.getAttribute("variant");
+  }
+  set variant(value) {
+    this.setAttribute("variant", value);
+  }
+  get state() {
+    return this.getAttribute("state");
   }
-  get size() {
-    return this.getAttribute("size");
+  set state(value) {
+    this.setAttribute("state", value);
   }
-  set size(value) {
-    this.setAttribute("size", value);
+  get extended() {
+    return this.getAttribute("extended");
   }
-  get color() {
-    return this.getAttribute("color");
+  set extended(value) {
+    this.setAttribute("extended", value);
   }
-  set color(value) {
-    this.setAttribute("color", value);
+  get loading() {
+    return this.getAttribute("loading");
   }
-  get arialabel() {
-    return this.getAttribute("aria-label");
+  set loading(value) {
+    this.setAttribute("loading", value);
   }
-  set arialabel(value) {
-    this.setAttribute("aria-label", value);
+  get shape() {
+    return this.getAttribute("shape");
+  }
+  set shape(value) {
+    this.setAttribute("shape", value);
   }
   get inverted() {
     return this.getAttribute("inverted");
@@ -1698,55 +1899,94 @@ const _Icon = class _Icon extends PxElement {
   attributeChangedCallback(attrName, oldValue, newValue) {
     if (oldValue !== newValue) {
       switch (attrName) {
-        case "name":
-          if (oldValue !== null && oldValue !== "") {
-            this.$el.classList.toggle(`icon-${oldValue}`);
-          }
-          if (newValue !== null && newValue !== "") {
-            this.$el.classList.toggle(`icon-${newValue}`);
-          }
+        case "variant":
+          this.updateVariant(oldValue, newValue);
           break;
-        case "size":
-          this.updateAttribute(attrName, oldValue, newValue, iconSizeValues);
+        case "state":
+          this.updateState(oldValue, newValue);
           break;
-        case "color":
-          this.updateAttribute(attrName, oldValue, newValue, colorValues$1);
+        case "extended":
+          this.updateExtended();
           break;
-        case "aria-label":
-          if (newValue !== null && newValue !== "") {
-            this.$el.setAttribute("aria-label", newValue);
-            this.$el.removeAttribute("aria-hidden");
-          }
+        case "loading":
+          this.updateLoading();
+          break;
+        case "shape":
+          this.updateShape(oldValue, newValue);
+          break;
+        default:
+          super.attributeChangedCallback(attrName, oldValue, newValue);
           break;
       }
     }
   }
-  updateAttribute(attrName, oldValue, newValue, attrValues) {
-    if (oldValue !== null && oldValue !== "" && oldValue !== "default") {
-      if (attrName === "size") {
-        this.$el.classList.toggle(`${attrName}-${oldValue}`);
-      } else {
-        this.$el.classList.toggle(oldValue);
-      }
+  checkName(values, value) {
+    if (values.includes(value)) {
+      return true;
     }
-    if (newValue !== null && newValue !== "" && oldValue !== "default") {
-      if (attrName === "size") {
-        this.$el.classList.toggle(`${attrName}-${newValue}`);
-      } else {
-        this.$el.classList.toggle(newValue);
+    return false;
+  }
+  checkClass(value) {
+    if (value.startsWith("patch-")) {
+      const splittedValue = value.split(/-(.*)/s);
+      for (const classVar of splittedValue) {
+        if (classVar != "") {
+          this.$el.classList.toggle(classVar);
+        }
       }
+    } else {
+      this.$el.classList.toggle(value);
     }
-    if (!this.checkName(attrValues, newValue)) {
-      console.error(`${newValue} is not an allowed ${attrName} value for ${this.$el}`);
+  }
+  _toggleClass(oldValue, newValue) {
+    if (oldValue !== null && oldValue !== "" && oldValue !== "default") {
+      this.checkClass(oldValue);
+    }
+    if (newValue !== null && newValue !== "" && newValue !== "default") {
+      this.checkClass(newValue);
     }
   }
-  checkName(values, value) {
-    return values.includes(value);
+  updateVariant(oldValue, newValue) {
+    const values = ["", "default", "secondary", "tertiary", "link", "patch", "patch-info", "patch-black-friday", "patch-eco"];
+    if (newValue === "link") {
+      this.$el.classList.remove("btn");
+    } else {
+      this.$el.classList.add("btn");
+    }
+    this._toggleClass(oldValue, newValue);
+    if (!this.checkName(values, newValue)) {
+      console.error(`Bad "variant" value for ${this.$el}`);
+    }
+  }
+  updateState(oldValue, newValue) {
+    const values = ["", "default", "success", "error"];
+    this._toggleClass(oldValue, newValue);
+    if (!this.checkName(values, newValue)) {
+      console.error(`Bad "sate" value for ${this.$el}`);
+    }
+  }
+  updateExtended() {
+    this.$el.classList.toggle("extended");
+  }
+  updateLoading() {
+    this.$el.classList.toggle("loading");
+  }
+  updateShape(oldValue, newValue) {
+    const values = ["", "default", "bottom-right", "bottom-left", "alternative"];
+    this._toggleClass(oldValue, newValue);
+    if (!this.checkName(values, newValue)) {
+      console.error(`Bad "shape" value for ${this.$el}`);
+    }
   }
 };
-_Icon.nativeName = "i";
-let Icon = _Icon;
-customElements.define("px-icon", Icon);
+_Button.nativeName = "button";
+let Button = _Button;
+class ProximusButton extends Button {
+  constructor() {
+    super(proximusSemanticStyleSheet);
+  }
+}
+customElements.define("px-button", ProximusButton);
 const imgCss = "img{display:inline-block;vertical-align:middle;max-width:100%;height:auto;border-style:none}@media only screen and (max-width: 40em){.mo,.m,.l{display:none}}@media only screen and (min-width: 40.0625em) and (max-width: 64em){.l{display:none}}@media only screen and (min-width: 40.0625em){.so{display:none}}@media only screen and (min-width: 64.0625em){.so,.mo{display:none}}";
 const styleSheet$8 = new CSSStyleSheet();
 styleSheet$8.replaceSync(imgCss);
@@ -1941,11 +2181,18 @@ _Picture.nativeName = "picture";
 let Picture = _Picture;
 customElements.define("px-picture", Picture);
 const styleSheet$7 = new CSSStyleSheet();
-styleSheet$7.replaceSync(styles$a);
+styleSheet$7.replaceSync(styles$9);
 class Patch extends HTMLElement {
   constructor(semanticTokensStylesheet) {
     super();
-    this.variantValues = ["", "default", "info", "black-friday", "eco", "greyed"];
+    this.variantValues = [
+      "",
+      "default",
+      "info",
+      "black-friday",
+      "eco",
+      "greyed"
+    ];
     this.shapeValues = ["", "default", "bottom-right", "bottom-left"];
     this.attachShadow({ mode: "open" });
     this.shadowRoot.innerHTML = this.template();
@@ -1961,27 +2208,6 @@ class Patch extends HTMLElement {
   static get observedAttributes() {
     return ["variant", "shape", "inverted"];
   }
-  get $el() {
-    return this.shadowRoot.querySelector(".patch");
-  }
-  get variant() {
-    return this.getAttribute("variant");
-  }
-  set variant(value) {
-    this.setAttribute("variant", value);
-  }
-  get shape() {
-    return this.getAttribute("shape");
-  }
-  set shape(value) {
-    this.setAttribute("shape", value);
-  }
-  get inverted() {
-    return this.getAttribute("inverted");
-  }
-  set inverted(value) {
-    this.setAttribute("inverted", value);
-  }
   attributeChangedCallback(attrName, oldValue, newValue) {
     if (oldValue !== newValue) {
       switch (attrName) {
@@ -1994,6 +2220,11 @@ class Patch extends HTMLElement {
       }
     }
   }
+  connectedCallback() {
+    replayAttributes(this, Patch.observedAttributes, (name, value) => {
+      this.attributeChangedCallback(name, null, value);
+    });
+  }
   _toggleClass(oldValue, newValue) {
     if (oldValue !== null && oldValue !== "" && oldValue !== "default") {
       this.$el.classList.toggle(oldValue);
@@ -2017,6 +2248,27 @@ class Patch extends HTMLElement {
       console.error(`Bad "shape" value for patch`);
     }
   }
+  get $el() {
+    return this.shadowRoot.querySelector(".patch");
+  }
+  get variant() {
+    return this.getAttribute("variant");
+  }
+  set variant(value) {
+    this.setAttribute("variant", value);
+  }
+  get shape() {
+    return this.getAttribute("shape");
+  }
+  set shape(value) {
+    this.setAttribute("shape", value);
+  }
+  get inverted() {
+    return this.getAttribute("inverted");
+  }
+  set inverted(value) {
+    this.setAttribute("inverted", value);
+  }
 }
 class ProximusPatch extends Patch {
   constructor() {
@@ -2331,6 +2583,9 @@ class Tabs extends HTMLElement {
     }
   }
   connectedCallback() {
+    replayAttributes(this, Tabs.observedAttributes, (name, value) => {
+      this.attributeChangedCallback(name, null, value);
+    });
     this.addEventListener("click", (event) => {
       var _a;
       if ((_a = event.target.localName) == null ? void 0 : _a.endsWith("-tab")) {
@@ -2413,6 +2668,9 @@ class Tab extends HTMLElement {
     return ["selected", "for", "name"];
   }
   connectedCallback() {
+    replayAttributes(this, Tab.observedAttributes, (name, value) => {
+      this.attributeChangedCallback(name, null, value);
+    });
     if (!this.name) {
       console.error("Tab needs a name attribute");
     }
@@ -2578,19 +2836,10 @@ class Timeline extends HTMLElement {
   static get observedAttributes() {
     return ["inverted"];
   }
-  get $el() {
-    return this.shadowRoot.querySelector(".timeline");
-  }
-  get $children() {
-    return this.querySelectorAll("px-timeline-item");
-  }
-  get inverted() {
-    return this.getAttribute("inverted");
-  }
-  set inverted(value) {
-    this.setAttribute("inverted", value);
-  }
   connectedCallback() {
+    replayAttributes(this, Timeline.observedAttributes, (name, value) => {
+      this.attributeChangedCallback(name, null, value);
+    });
     this.configureChildren();
   }
   attributeChangedCallback(attrName, oldValue, newValue) {
@@ -2611,6 +2860,18 @@ class Timeline extends HTMLElement {
       this.$children[i].setAttribute("item", `${i + 1}`);
     }
   }
+  get $el() {
+    return this.shadowRoot.querySelector(".timeline");
+  }
+  get $children() {
+    return this.querySelectorAll("px-timeline-item");
+  }
+  get inverted() {
+    return this.getAttribute("inverted");
+  }
+  set inverted(value) {
+    this.setAttribute("inverted", value);
+  }
 }
 class ProximusTimeline extends Timeline {
   constructor() {
@@ -2640,31 +2901,18 @@ class TimelineItem extends HTMLElement {
     super();
     this.attachShadow({ mode: "open" });
     this.shadowRoot.innerHTML = this.template();
-    this.shadowRoot.adoptedStyleSheets = [semanticTokensStylesheet, styleSheet$2];
+    this.shadowRoot.adoptedStyleSheets = [
+      semanticTokensStylesheet,
+      styleSheet$2
+    ];
   }
   static get observedAttributes() {
     return ["inverted", "lastchild", "item"];
   }
-  get $el() {
-    return this.shadowRoot.querySelector(".timeline-item");
-  }
-  get inverted() {
-    return this.getAttribute("inverted");
-  }
-  set inverted(value) {
-    this.setAttribute("inverted", value);
-  }
-  get lastchild() {
-    return this.getAttribute("lastchild");
-  }
-  set lastchild(value) {
-    this.setAttribute("lastchild", value);
-  }
-  get item() {
-    return this.getAttribute("item");
-  }
-  set item(value) {
-    this.setAttribute("item", value);
+  connectedCallback() {
+    replayAttributes(this, TimelineItem.observedAttributes, (name, value) => {
+      this.attributeChangedCallback(name, null, value);
+    });
   }
   attributeChangedCallback(attrName, oldValue, newValue) {
     if (oldValue !== newValue) {
@@ -2688,6 +2936,27 @@ class TimelineItem extends HTMLElement {
     const indicator = this.$el.querySelector(".indicator");
     indicator.innerHTML = item2;
   }
+  get $el() {
+    return this.shadowRoot.querySelector(".timeline-item");
+  }
+  get inverted() {
+    return this.getAttribute("inverted");
+  }
+  set inverted(value) {
+    this.setAttribute("inverted", value);
+  }
+  get lastchild() {
+    return this.getAttribute("lastchild");
+  }
+  set lastchild(value) {
+    this.setAttribute("lastchild", value);
+  }
+  get item() {
+    return this.getAttribute("item");
+  }
+  set item(value) {
+    this.setAttribute("item", value);
+  }
 }
 class ProximusTimelineItem extends TimelineItem {
   constructor() {
@@ -3157,7 +3426,14 @@ class Typography extends HTMLElement {
     this.template = () => `<slot></slot>`;
     this.attachShadow({ mode: "open" });
     this.shadowRoot.innerHTML = this.template();
-    this.shadowRoot.adoptedStyleSheets = [proximusSemanticStyleSheet, typographyStyles, headingStyles, linkStyles, paragraphStyles, spanStyles];
+    this.shadowRoot.adoptedStyleSheets = [
+      proximusSemanticStyleSheet,
+      typographyStyles,
+      headingStyles,
+      linkStyles,
+      paragraphStyles,
+      spanStyles
+    ];
   }
   static get observedAttributes() {
     return ["inverted"];
@@ -3196,6 +3472,7 @@ export {
   ProximusButton,
   ProximusLink,
   ProximusPatch,
+  ProximusSection,
   ProximusTag,
   ProximusTimeline,
   ProximusTimelineItem,
@@ -3205,7 +3482,7 @@ export {
   PxTabPanel,
   PxTabs,
   Ribbon,
-  Section,
+  Section$1 as Section,
   Separator,
   Spacer,
   Span,
@@ -3228,5 +3505,6 @@ export {
   isFalsy,
   paddingValues,
   proximusSemanticStyleSheet,
+  replayAttributes,
   shadowValues
 };