@proximus/lavender 1.3.0-beta.6 → 1.4.1-alpha.1

package/dist/lavender.es.js

@@ -84,6 +84,7 @@ class WithExtraAttributes extends HTMLElement {
     ];
   }
   attributeChangedCallback(name, oldValue, newValue) {
+    var _a;
     if (WithExtraAttributes.observedAttributes.indexOf(name) === -1) {
       return;
     }
@@ -114,7 +115,7 @@ class WithExtraAttributes extends HTMLElement {
           name,
           oldValue,
           newValue,
-          this.isGrid ? cssGridAlignSelfValues : flexboxAlignSelfValues
+          ((_a = this.parentElement) == null ? void 0 : _a.localName) === "px-grid" ? cssGridAlignSelfValues : flexboxAlignSelfValues
         );
         break;
       case "justify-self":
@@ -193,11 +194,19 @@ class WithExtraAttributes extends HTMLElement {
     var _a;
     return (_a = this.parentElement) == null ? void 0 : _a.tagName.toLowerCase();
   }
-  get isGrid() {
-    return this.$parentElementName === "px-grid";
-  }
-  get isStack() {
-    return this.$parentElementName === "px-stack";
+  get isInsideGridOrStack() {
+    let parent = this.parentElement;
+    while (parent) {
+      if (parent.localName === "px-grid" || parent.localName === "px-stack" && (parent == null ? void 0 : parent.getAttribute("direction")) === "row") {
+        return true;
+      }
+      if (window.getComputedStyle(parent).display === "contents") {
+        parent = parent.parentElement;
+        continue;
+      }
+      break;
+    }
+    return false;
   }
   get grow() {
     return this.getAttribute("grow");
@@ -456,7 +465,6 @@ class PxElement extends WithExtraAttributes {
     }
   }
   connectedCallback() {
-    var _a;
     for (const name of getSupportedPropertyNames(this.nativeName)) {
       if (name === "constructor" || this.accessorExclusions.includes(name)) {
         continue;
@@ -476,12 +484,9 @@ class PxElement extends WithExtraAttributes {
         console.warn(`Could not create property ${name} for`, this.$el, e);
       }
     }
-    if (this.isGrid || this.isStack) {
-      const parentDirection = (_a = this.parentElement) == null ? void 0 : _a.getAttribute("direction");
+    if (this.isInsideGridOrStack) {
       this.$el.style.display = "block";
-      if (this.isGrid || this.isStack && parentDirection === "row") {
-        this.$el.style.height = "100%";
-      }
+      this.$el.style.height = "100%";
     }
   }
   get $el() {
@@ -1950,6 +1955,7 @@ class Icon extends WithExtraAttributes {
       <use xlink:href="#icon-${this.name}"></use>
     </svg>`);
     this.shadowRoot.innerHTML = __privateGet(this, _template).call(this);
+    this.role = "img";
     __privateSet(this, _internals, (_a = this.attachInternals) == null ? void 0 : _a.call(this));
     if (__privateGet(this, _internals)) {
       __privateGet(this, _internals).role = "img";
@@ -2188,7 +2194,6 @@ if (!customElements.get("px-span")) {
 const containerCss = ':host{display:block}.container{font-family:var(--px-font-family);background-color:var(--background-color);border-radius:var(--px-radius-main);box-sizing:border-box;height:100%}:host([background-image]) .container{background-image:var(--background-image)}:host([background-gradient]) .container{background-image:var(--background-gradient)}:host([inverted]) .container{background-color:var(--background-color-inverted);color:var(--px-color-text-neutral-inverted)}.border-none{border:none}.border-s{border:var(--px-size-border-s) solid var(--border-color)}.border-m{border:var(--px-size-border-m) solid var(--border-color)}.border-l{border:var(--px-size-border-l) solid var(--border-color)}.border-side-top{border-bottom-style:none;border-right-style:none;border-left-style:none}.border-side-right{border-top-style:none;border-bottom-style:none;border-left-style:none}.border-side-bottom{border-top-style:none;border-right-style:none;border-left-style:none}.border-side-left{border-top-style:none;border-right-style:none;border-bottom-style:none}.border-side-block{border-inline-style:none}.border-side-inline{border-block-style:none}:host([inverted]) .border-s,:host([inverted]) .border-m,:host([inverted]) .border-l{border-color:var(--border-color-inverted)}.border-radius-main{border-radius:var(--px-radius-main)}.border-radius-pill{border-radius:var(--px-radius-pill)}.no-border-radius-top{border-top-left-radius:var(--px-radius-none);border-top-right-radius:var(--px-radius-none)}.no-border-radius-right{border-top-right-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-bottom{border-bottom-left-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-left{border-top-left-radius:var(--px-radius-none);border-bottom-left-radius:var(--px-radius-none)}.no-border-radius-all,.border-radius-none{border-radius:var(--px-radius-none)}.bgimg{background-repeat:no-repeat}.background-size-cover{background-size:cover;background-position:center center}.background-size-contain{background-size:contain}.box-shadow-none{box-shadow:none}.box-shadow-s{box-shadow:0 1px 2px #2525251f}.box-shadow-m{box-shadow:0 4px 6px -1px #25252514}.box-shadow-l{box-shadow:0 10px 15px -3px #25252514}.box-shadow-xl{box-shadow:0 20px 25px -5px #25252514}.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:3}::slotted([slot="anchor-right"]){right:var( --container-anchor-offset--mobile, var( --container-padding-right, var(--container-padding-inline, var(--container-padding)) ) )}::slotted([slot="anchor-left"]){left:var( --container-anchor-offset--mobile, var( --container-padding-left, var(--container-padding-inline, var(--container-padding)) ) )}::slotted([slot="anchor-full"]){transform:translateY(-100%);right:0;left:0;text-align:center;z-index:2}::slotted(px-vstack:only-of-type),::slotted(px-hstack:only-of-type),::slotted(px-stack:only-of-type),::slotted(px-grid:only-of-type){height:100%}.border-s ::slotted([slot="anchor-full"]){right:calc(var(--px-size-border-s) * -1);left:calc(var(--px-size-border-s) * -1)}.border-m ::slotted([slot="anchor-full"]){right:calc(var(--px-size-border-m) * -1);left:calc(var(--px-size-border-m) * -1)}.border-l ::slotted([slot="anchor-full"]){right:calc(var(--px-size-border-l) * -1);left:calc(var(--px-size-border-l) * -1)}@media only screen and (max-width: 47.938em){.container{background-color:var(--background-color--mobile, var(--background-color))}:host([background-image--mobile]) .container{background-image:var(--background-image--mobile, var(--background-image))}:host([background-gradient--mobile]) .container{background-image:var( --background-gradient--mobile, var(--background-gradient) )}:host([inverted]) .container{background-color:var( --background-color-inverted--mobile, var(--background-color-inverted) )}.border-side-top--mobile{border-top-style:solid;border-right-style:none;border-bottom-style:none;border-left-style:none}.border-side-right--mobile{border-top-style:none;border-right-style:solid;border-bottom-style:none;border-left-style:none}.border-side-bottom--mobile{border-top-style:none;border-right-style:none;border-bottom-style:solid;border-left-style:none}.border-side-left--mobile{border-top-style:none;border-right-style:none;border-bottom-style:none;border-left-style:solid}.border-side-block--mobile{border-inline-style:none;border-block-style:solid}.border-side-inline--mobile{border-block-style:none;border-inline-style:solid}.no-border-radius-top--mobile{border-top-left-radius:var(--px-radius-none);border-top-right-radius:var(--px-radius-none)}.no-border-radius-right--mobile{border-top-right-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-bottom--mobile{border-bottom-left-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-left--mobile{border-top-left-radius:var(--px-radius-none);border-bottom-left-radius:var(--px-radius-none)}.no-border-radius-all--mobile{border-radius:var(--px-radius-none)}}@media only screen and (min-width: 48em) and (max-width: 64em){.container{background-color:var(--background-color--tablet, var(--background-color))}:host([background-image--tablet]) .container{background-image:var(--background-image--tablet, var(--background-image))}:host([background-gradient--tablet]) .container{background-image:var( --background-gradient--tablet, var(--background-gradient) )}:host([inverted]) .container{background-color:var( --background-color-inverted--tablet, var(--background-color-inverted) )}.no-border-radius-top--tablet{border-top-left-radius:var(--px-radius-none);border-top-right-radius:var(--px-radius-none)}.no-border-radius-right--tablet{border-top-right-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-bottom--tablet{border-bottom-left-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-left--tablet{border-top-left-radius:var(--px-radius-none);border-bottom-left-radius:var(--px-radius-none)}.no-border-radius-all--tablet{border-radius:var(--px-radius-none)}.border-side-top--tablet{border-top-style:solid;border-right-style:none;border-bottom-style:none;border-left-style:none}.border-side-right--tablet{border-top-style:none;border-right-style:solid;border-bottom-style:none;border-left-style:none}.border-side-bottom--tablet{border-top-style:none;border-right-style:none;border-bottom-style:solid;border-left-style:none}.border-side-left--tablet{border-top-style:none;border-right-style:none;border-bottom-style:none;border-left-style:solid}.border-side-block--tablet{border-inline-style:none;border-block-style:solid}.border-side-inline--tablet{border-block-style:none;border-inline-style:solid}::slotted([slot="anchor-right"]){right:var( --container-anchor-offset--tablet, var( --container-padding-right, var(--container-padding-inline, var(--container-padding)) ) )}::slotted([slot="anchor-left"]){left:var( --container-anchor-offset--tablet, var( --container-padding-left, var(--container-padding-inline, var(--container-padding)) ) )}}@media only screen and (min-width: 64.0625em){.container{background-color:var(--background-color--laptop, var(--background-color))}:host([background-image--laptop]) .container{background-image:var(--background-image--laptop, var(--background-image))}:host([background-gradient--laptop]) .container{background-image:var( --background-gradient--laptop, var(--background-gradient) )}:host([inverted]) .container{background-color:var( --background-color-inverted--laptop, var(--background-color-inverted) )}.no-border-radius-top--laptop{border-top-left-radius:var(--px-radius-none);border-top-right-radius:var(--px-radius-none)}.no-border-radius-right--laptop{border-top-right-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-bottom--laptop{border-bottom-left-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-left--laptop{border-top-left-radius:var(--px-radius-none);border-bottom-left-radius:var(--px-radius-none)}.no-border-radius-all--laptop{border-radius:var(--px-radius-none)}::slotted([slot="anchor-right"]){right:var( --container-anchor-offset--laptop, var( --container-padding-right, var(--container-padding-inline, var(--container-padding)) ) )}::slotted([slot="anchor-left"]){left:var( --container-anchor-offset--laptop, var( --container-padding-left, var(--container-padding-inline, var(--container-padding)) ) )}.border-side-top--laptop{border-top-style:solid;border-right-style:none;border-bottom-style:none;border-left-style:none}.border-side-right--laptop{border-top-style:none;border-right-style:solid;border-bottom-style:none;border-left-style:none}.border-side-bottom--laptop{border-top-style:none;border-right-style:none;border-bottom-style:solid;border-left-style:none}.border-side-left--laptop{border-top-style:none;border-right-style:none;border-bottom-style:none;border-left-style:solid}.border-side-block--laptop{border-inline-style:none;border-block-style:solid}.border-side-inline--laptop{border-block-style:none;border-inline-style:solid}}';
 const containerStyles = new CSSStyleSheet();
 containerStyles.replaceSync(containerCss);
-const anchorValues = ["anchor-right", "anchor-left", "anchor-full"];
 const attributeBreakpointCSSSelector$3 = (attributeName, attributeValue, device) => `:host([${attributeName}${device ? `--${device}` : ""}='${attributeValue}']) .container`;
 const paddingPrefix$1 = "px-padding";
 const _Container = class _Container extends PxElement {
@@ -2295,12 +2300,19 @@ const _Container = class _Container extends PxElement {
     if (!this.borderColor) {
       this.borderColor = "main";
     }
-    const anchorSlot = this.querySelector("[slot]");
-    if (anchorSlot) {
-      if (anchorValues.includes(anchorSlot.getAttribute("slot"))) {
-        this.shadowRoot.querySelector(".container").classList.toggle("anchored");
-      }
+    if (this.$slotAnchor) {
+      this.addAnchorClass();
     }
+    this.contentObserver = new MutationObserver(() => {
+      if (this.$slotAnchor) {
+        this.addAnchorClass();
+      }
+    });
+    this.contentObserver.observe(this, {
+      childList: true,
+      subtree: true,
+      characterData: true
+    });
     this._bgObserver = new IntersectionObserver((entries) => {
       entries.forEach((entry) => {
         var _a;
@@ -2316,6 +2328,7 @@ const _Container = class _Container extends PxElement {
   disconnectedCallback() {
     var _a;
     (_a = this._bgObserver) == null ? void 0 : _a.disconnect();
+    this.contentObserver.disconnect();
   }
   attributeChangedCallback(attrName, oldValue, newValue) {
     if (oldValue !== newValue) {
@@ -2528,6 +2541,14 @@ const _Container = class _Container extends PxElement {
     updateAnchorOffsetStyle(oldValue);
     updateAnchorOffsetStyle(newValue);
   }
+  addAnchorClass() {
+    if (!this.$el.classList.contains("anchored")) {
+      this.$el.classList.add("anchored");
+    }
+  }
+  get $slotAnchor() {
+    return this.querySelector('[slot^="anchor"]');
+  }
   get padding() {
     return this.getAttribute("padding");
   }
@@ -2995,7 +3016,20 @@ const agGridTableThButtonCss = `:host{display:inline-flex;overflow:hidden;word-b
 const agGridTableThButtonStyles = new CSSStyleSheet();
 agGridTableThButtonStyles.replaceSync(agGridTableThButtonCss);
 const sortingValues = ["none", "ascending", "descending"];
+const CLICK_EVENT$1 = "px.lavender.ag-grid-table-th-button.click";
 const _AgGridTableThButton = class _AgGridTableThButton extends PxElement {
+  constructor() {
+    super(agGridTableThButtonStyles);
+    this.clickHandler = (event) => {
+      this.handleSortingCycle(event);
+    };
+    this.keypressHandler = (event) => {
+      if (event.code === "Enter") {
+        this.handleSortingCycle();
+      }
+    };
+    this.shadowRoot.innerHTML = this.template();
+  }
   template() {
     return `
       <button class="ag-grid-table-th-button">
@@ -3004,15 +3038,6 @@ const _AgGridTableThButton = class _AgGridTableThButton extends PxElement {
       </button>
     `;
   }
-  constructor() {
-    var _a;
-    super(agGridTableThButtonStyles);
-    this.shadowRoot.innerHTML = this.template();
-    this.internals = (_a = this.attachInternals) == null ? void 0 : _a.call(this);
-    if (this.internals) {
-      this.internals.ariaHidden = "true";
-    }
-  }
   connectedCallback() {
     var _a, _b, _c;
     super.connectedCallback();
@@ -3024,14 +3049,8 @@ const _AgGridTableThButton = class _AgGridTableThButton extends PxElement {
       "aria-label",
       "Sortable column header, press ctrl + enter to sort"
     );
-    this.addEventListener(
-      "click",
-      (event) => this.cycleToNextSortingValue(event)
-    );
-    (_c = this.$columnHeader) == null ? void 0 : _c.addEventListener(
-      "keypress",
-      (event) => this.setKeypressEvent(event)
-    );
+    this.addEventListener("click", this.clickHandler);
+    (_c = this.$columnHeader) == null ? void 0 : _c.addEventListener("keypress", this.keypressHandler);
   }
   static get observedAttributes() {
     return [
@@ -3063,8 +3082,8 @@ const _AgGridTableThButton = class _AgGridTableThButton extends PxElement {
   }
   disconnectedCallback() {
     var _a;
-    this.removeEventListener("click", this.cycleToNextSortingValue);
-    (_a = this.$columnHeader) == null ? void 0 : _a.removeEventListener("keypress", this.setKeypressEvent);
+    this.removeEventListener("click", this.clickHandler);
+    (_a = this.$columnHeader) == null ? void 0 : _a.removeEventListener("keypress", this.keypressHandler);
   }
   updateSorting(oldValue, newValue, attrValue) {
     var _a, _b;
@@ -3090,21 +3109,25 @@ const _AgGridTableThButton = class _AgGridTableThButton extends PxElement {
       (_b = this.$columnHeader) == null ? void 0 : _b.setAttribute("aria-label", newValue);
     }
   }
-  setKeypressEvent(event) {
-    event.stopPropagation();
-    event.preventDefault();
-    switch (event.code) {
-      case "Enter":
-        this.cycleToNextSortingValue();
-        break;
-    }
+  clickAgGridTableThButton(value) {
+    this.dispatchEvent(
+      new CustomEvent(CLICK_EVENT$1, {
+        bubbles: true,
+        composed: true,
+        detail: { value }
+      })
+    );
   }
   cycleToNextSortingValue(event) {
+    event == null ? void 0 : event.stopPropagation();
+    event == null ? void 0 : event.preventDefault();
     const currentSorting = sortingValues.indexOf(this.sorting);
     const nextSorting = (currentSorting + 1) % sortingValues.length;
     this.sorting = sortingValues[nextSorting];
-    event == null ? void 0 : event.stopPropagation();
-    event == null ? void 0 : event.preventDefault();
+  }
+  handleSortingCycle(event) {
+    this.cycleToNextSortingValue(event);
+    this.clickAgGridTableThButton(this.sorting);
   }
   get $slottedThContent() {
     return this.querySelector("px-ag-grid-table-th-content");
@@ -7848,32 +7871,39 @@ if (!customElements.get("px-color-option-link")) {
   customElements.define("px-color-option-link", ColorOptionLink);
 }
 const contentHeaderCss = ":host{--min-height--mobile: 15.625em;--min-height--tablet: 17.5em;--min-height--laptop: 17.5em;--min-height--desktop: 17.5em}:host,:host>*{display:block;box-sizing:border-box}.content-header{position:relative;z-index:0}[min-height] .content-header-content{min-height:calc(var(--min-height--mobile) - (var(--px-spacing-l-mobile) * 2))}.content-header-content{display:flex;flex-direction:column;gap:var(--px-spacing-l-mobile);z-index:2;position:relative;box-sizing:border-box}.contrast-helper{position:absolute;top:0;right:0;bottom:0;left:0;z-index:1;pointer-events:none;display:none}[contrast-helper-gradient] .contrast-helper{display:block;background-image:linear-gradient(90deg,#fff 23.43%,#fff0 81.69%)}[inverted] :is([contrast-helper-gradient] .contrast-helper){background-image:linear-gradient(90deg,#000 23.43%,#0000 81.69%)}[contrast-helper-overlay] .contrast-helper{display:block;background-color:#ffffffb3}[inverted] :is([contrast-helper-overlay] .contrast-helper){background-color:#0006}@media only screen and (min-width: 48em){.content-header-content{gap:var(--px-spacing-l-desktop)}[min-height] .content-header-content{min-height:calc(var(--min-height--tablet) - (var(--px-spacing-l-tablet) * 2))}}@media only screen and (min-width: 64.0625em){.content-header-content{gap:var(--px-spacing-l-laptop)}[min-height] .content-header-content{min-height:calc(var(--min-height--laptop) - (var(--px-spacing-l-laptop) * 2))}}";
-const contentHeaderStyles = new CSSStyleSheet();
-contentHeaderStyles.replaceSync(contentHeaderCss);
-const _ContentHeader = class _ContentHeader extends PxElement {
+const styles$w = ':host{display:block}:host,:host *{box-sizing:border-box}.content-wrapper{margin-inline:var(--px-padding-s-mobile);max-width:var(--px-content-wrapper-max-width-desktop)}@media only screen and (min-width: 77em){.content-wrapper{margin-inline:auto}}.overlapped{margin-bottom:calc(var(--px-overlapped-mobile) * -1)}::slotted([slot="overlap"]){margin-top:var(--px-overlapped-mobile)}@media only screen and (min-width: 48em){.overlapped{margin-bottom:calc(var(--px-overlapped-desktop) * -1)}::slotted([slot="overlap"]){margin-top:var(--px-overlapped-desktop)}}@media only screen and (min-width: 64.0625em){.overlapped{margin-bottom:calc(var(--px-overlapped-desktop) * -1)}::slotted([slot="overlap"]){margin-top:var(--px-overlapped-desktop)}}';
+const styleSheet$q = new CSSStyleSheet();
+styleSheet$q.replaceSync(styles$w);
+class Section extends HTMLElement {
   constructor() {
-    super(contentHeaderStyles);
-    this.template = () => `<div class="content-header">
-      <div class="contrast-helper"></div>
-      <px-section padding-block="l">
-      <px-grid gap="none">
-        <px-container padding="none" border-radius="none" background-color="none"  >
-          <div class="content-header-content">
-            <px-vstack gap="heading-to-subtitle">
-              <px-h1 variant="title-3xl"><slot></slot></px-h1>
-              <slot name="subtitle"></slot>
-            </px-vstack>
-            ${this.$patchDescriptionSlot ? `<px-stack gap="s" direction="row" direction--mobile="column">
-              <slot name="patch" shrink></slot>
-              <slot name="patch-description"></slot>
-            </px-stack>` : ""}
-          </div>
-        </px-container>
-      </px-grid>
-        ${this.$overlapSlot ? `<slot name="overlap" slot="overlap"></slot>` : ""}
-      </px-section>
-    </div>`;
+    super();
+    this.template = () => `
+    <px-container border-radius="none" padding-inline="none" background-color="${this.backgroundColor}">
+      <div class="content-wrapper ${this.$slotOverlap ? "overlapped" : ""}">
+        <px-vstack gap="heading-to-content">
+          <slot name="heading"></slot>
+          <px-vstack gap="none">
+            <slot></slot>
+          </px-vstack>
+        </px-vstack>
+      </div>
+    </px-container>
+    <div class="content-wrapper">
+      <slot name="overlap"></slot>
+    </div>
+  `;
+    this.attachShadow({ mode: "open" });
     this.shadowRoot.innerHTML = this.template();
+    this.shadowRoot.adoptedStyleSheets = [styleSheet$q];
+  }
+  connectedCallback() {
+    const headingSlot = this.querySelector('[slot="heading"]');
+    if (!this.paddingBlock && !this.paddingTop && !this.paddingBottom && !this.paddingBlockMobile && !this.paddingTopMobile && !this.paddingBottomMobile && !this.paddingBlockTablet && !this.paddingTopTablet && !this.paddingBottomTablet && !this.paddingBlockLaptop && !this.paddingTopLaptop && !this.paddingBottomLaptop) {
+      this.$container.paddingBlock = "none";
+    }
+    if (!headingSlot) {
+      this.shadowRoot.querySelector("px-vstack").setAttribute("gap", "none");
+    }
   }
   static get observedAttributes() {
     return [
@@ -7885,137 +7915,114 @@ const _ContentHeader = class _ContentHeader extends PxElement {
       "background-image--laptop",
       "background-size",
       "background-position",
-      "contrast-helper-gradient",
-      "contrast-helper-overlay",
-      "min-height",
-      "has-gridding",
-      "has-gridding--mobile",
-      "has-gridding--tablet",
-      "has-gridding--laptop",
-      "inverted"
+      "padding-block",
+      "padding-top",
+      "padding-bottom",
+      "padding-block--mobile",
+      "padding-top--mobile",
+      "padding-bottom--mobile",
+      "padding-block--tablet",
+      "padding-top--tablet",
+      "padding-bottom--tablet",
+      "padding-block--laptop",
+      "padding-top--laptop",
+      "padding-bottom--laptop",
+      "border",
+      "border-side",
+      "border-side--mobile",
+      "border-side--tablet",
+      "border-side--laptop"
     ];
   }
-  connectedCallback() {
-    var _a;
-    (_a = super.connectedCallback) == null ? void 0 : _a.call(this);
-    if (this.$subtitleSlot) {
-      this.$subtitleSlot.setAttribute("variant", "subtitle");
-    }
-    if (this.$patchDescriptionSlot) {
-      if (this.$patchDescriptionSlot.localName === "px-p") {
-        this.$patchDescriptionSlot.setAttribute("variant", "default");
-      }
-      if (this.$patchDescriptionSlot.localName === "px-p" || this.$patchDescriptionSlot.localName === "px-span") {
-        this.$patchDescriptionSlot.setAttribute("font-size", "body-l");
-        this.$patchDescriptionSlot.removeAttribute("font-weight");
-        this.$patchDescriptionSlot.removeAttribute("color");
-      }
-      if (this.$patchDescriptionSlot.localName === "px-price") {
-        this.$patchDescriptionSlot.setAttribute("size", "m");
-      }
-    }
-    this.createGridding();
+  get $container() {
+    return this.shadowRoot.querySelector("px-container");
   }
-  attributeChangedCallback(attrName, oldValue, newValue) {
+  attributeChangedCallback(name, oldValue, newValue) {
     if (oldValue !== newValue) {
-      switch (attrName) {
+      switch (name) {
         case "background-color":
-          this.$section.backgroundColor = backgroundColorValues.indexOf(newValue) > 0 ? newValue : "none";
+          this.$container.backgroundColor = backgroundColorValues.indexOf(newValue) > 0 ? newValue : "none";
           break;
         case "background-gradient":
-          this.$section.gradient = gradientValues.indexOf(newValue) > 0 ? newValue : "none";
+          this.$container.gradient = this.gradient;
           break;
         case "background-image":
-          this.$section.backgroundImage = newValue;
+          this.$container.backgroundImage = newValue;
           break;
         case "background-image--mobile":
-          this.$section.backgroundImageMobile = newValue;
+          this.$container.backgroundImageMobile = newValue;
           break;
         case "background-image--tablet":
-          this.$section.backgroundImageTablet = newValue;
+          this.$container.backgroundImageTablet = newValue;
           break;
         case "background-image--laptop":
-          this.$section.backgroundImageLaptop = newValue;
+          this.$container.backgroundImageLaptop = newValue;
           break;
         case "background-size":
-          this.$section.backgroundSize = backgroundSizeValues.indexOf(newValue) > 0 ? newValue : "";
+          this.$container.backgroundSize = newValue;
           break;
         case "background-position":
-          this.$section.backgroundPosition = newValue;
+          this.$container.backgroundPosition = newValue;
           break;
-        case "has-gridding":
-        case "has-gridding--mobile":
-        case "has-gridding--tablet":
-        case "has-gridding--laptop":
-          this.createGridding();
+        case "padding-block":
+          this.$container.paddingBlock = newValue;
           break;
-        case "inverted":
-          for (let i = 0; i < this.$children.length; i++) {
-            if (!this.$children[i].hasAttribute("inverted")) {
-              this.$children[i].toggleAttribute("inverted");
-            }
-          }
-          this.$h1.toggleAttribute("inverted", newValue !== null);
-          this.$el.toggleAttribute("inverted", newValue !== null);
+        case "padding-top":
+          this.$container.paddingTop = newValue;
           break;
-        default:
-          super.attributeChangedCallback(attrName, oldValue, newValue);
+        case "padding-bottom":
+          this.$container.paddingBottom = newValue;
+          break;
+        case "padding-block--mobile":
+          this.$container.paddingBlockMobile = newValue;
+          break;
+        case "padding-top--mobile":
+          this.$container.paddingTopMobile = newValue;
+          break;
+        case "padding-bottom--mobile":
+          this.$container.paddingBottomMobile = newValue;
+          break;
+        case "padding-block--tablet":
+          this.$container.paddingBlockTablet = newValue;
+          break;
+        case "padding-top--tablet":
+          this.$container.paddingTopTablet = newValue;
+          break;
+        case "padding-bottom--tablet":
+          this.$container.paddingBottomTablet = newValue;
+          break;
+        case "padding-block--laptop":
+          this.$container.paddingBlockLaptop = newValue;
+          break;
+        case "padding-top--laptop":
+          this.$container.paddingTopLaptop = newValue;
+          break;
+        case "padding-bottom--laptop":
+          this.$container.paddingBottomLaptop = newValue;
+          break;
+        case "border":
+          this.$container.border = newValue;
+          break;
+        case "border-side":
+          this.$container.borderSide = newValue;
+          break;
+        case "border-side--mobile":
+          this.$container.borderSideMobile = newValue;
+          break;
+        case "border-side--tablet":
+          this.$container.borderSideTablet = newValue;
+          break;
+        case "border-side--laptop":
+          this.$container.borderSideLaptop = newValue;
           break;
       }
     }
   }
-  createGridding() {
-    const breakpoints = [
-      { prop: "hasGridding", gridProp: "gridCols", attr: "col-span" },
-      {
-        prop: "hasGriddingMobile",
-        gridProp: "gridColsMobile",
-        attr: "col-span--mobile"
-      },
-      {
-        prop: "hasGriddingTablet",
-        gridProp: "gridColsTablet",
-        attr: "col-span--tablet"
-      },
-      {
-        prop: "hasGriddingLaptop",
-        gridProp: "gridColsLaptop",
-        attr: "col-span--laptop"
-      }
-    ];
-    const spanElement = this.shadowRoot.querySelector(
-      "px-grid > px-container"
-    );
-    breakpoints.forEach(({ prop, gridProp, attr }) => {
-      if (this[prop]) {
-        this.$grid[gridProp] = "3";
-        spanElement.setAttribute(attr, "2");
-      }
-    });
-  }
-  get $grid() {
-    return this.shadowRoot.querySelector("px-grid");
-  }
-  get $section() {
-    return this.shadowRoot.querySelector("px-section");
-  }
-  get $h1() {
-    return this.shadowRoot.querySelector("px-h1");
-  }
-  get $subtitleSlot() {
-    return this.querySelector('[slot="subtitle"]');
-  }
-  get $patchDescriptionSlot() {
-    return this.querySelector('[slot="patch-description"]');
-  }
-  get $overlapSlot() {
+  get $slotOverlap() {
     return this.querySelector('[slot="overlap"]');
   }
-  get $children() {
-    return this.querySelectorAll("px-content-header > *");
-  }
   get backgroundColor() {
-    return this.getAttribute("background-color");
+    return this.getAttribute("background-color") || "none";
   }
   set backgroundColor(value) {
     this.setAttribute("background-color", value);
@@ -8062,331 +8069,221 @@ const _ContentHeader = class _ContentHeader extends PxElement {
   set backgroundPosition(value) {
     this.setAttribute("background-position", value);
   }
-  get gradientContrastHelper() {
-    return this.hasAttribute("contrast-helper-gradient");
+  get paddingBlock() {
+    return this.getAttribute("padding-block");
   }
-  set gradientContrastHelper(value) {
-    if (value) {
-      this.setAttribute("contrast-helper-gradient", "");
-    } else {
-      this.removeAttribute("contrast-helper-gradient");
-    }
+  set paddingBlock(value) {
+    this.setAttribute("padding-block", value);
   }
-  get overlayContrastHelper() {
-    return this.hasAttribute("contrast-helper-overlay");
+  get paddingTop() {
+    return this.getAttribute("padding-top");
   }
-  set overlayContrastHelper(value) {
-    if (value) {
-      this.setAttribute("contrast-helper-overlay", "");
-    } else {
-      this.removeAttribute("contrast-helper-overlay");
-    }
+  set paddingTop(value) {
+    this.setAttribute("padding-top", value);
   }
-  get hasGridding() {
-    return this.hasAttribute("has-gridding");
+  get paddingBottom() {
+    return this.getAttribute("padding-bottom");
   }
-  set hasGridding(value) {
-    if (value) {
-      this.setAttribute("has-gridding", "");
-    } else {
-      this.removeAttribute("has-gridding");
-    }
+  set paddingBottom(value) {
+    this.setAttribute("padding-bottom", value);
   }
-  get hasGriddingMobile() {
-    return this.hasAttribute("has-gridding--mobile");
+  get paddingBlockMobile() {
+    return this.getAttribute("padding-block--mobile");
   }
-  set hasGriddingMobile(value) {
-    if (value) {
-      this.setAttribute("has-gridding--mobile", "");
-    } else {
-      this.removeAttribute("has-gridding--mobile");
-    }
+  set paddingBlockMobile(value) {
+    this.setAttribute("padding-block--mobile", value);
   }
-  get hasGriddingTablet() {
-    return this.hasAttribute("has-gridding--tablet");
+  get paddingTopMobile() {
+    return this.getAttribute("padding-top--mobile");
   }
-  set hasGriddingTablet(value) {
-    if (value) {
-      this.setAttribute("has-gridding--tablet", "");
-    } else {
-      this.removeAttribute("has-gridding--tablet");
-    }
+  set paddingTopMobile(value) {
+    this.setAttribute("padding-top--mobile", value);
   }
-  get hasGriddingLaptop() {
-    return this.hasAttribute("has-gridding--laptop");
+  get paddingBottomMobile() {
+    return this.getAttribute("padding-bottom--mobile");
   }
-  set hasGriddingLaptop(value) {
-    if (value) {
-      this.setAttribute("has-gridding--laptop", "");
-    } else {
-      this.removeAttribute("has-gridding--laptop");
-    }
+  set paddingBottomMobile(value) {
+    this.setAttribute("padding-bottom--mobile", value);
   }
-  get inverted() {
-    return this.hasAttribute("inverted");
+  get paddingBlockTablet() {
+    return this.getAttribute("padding-block--tablet");
   }
-  set inverted(value) {
-    if (value) {
-      this.setAttribute("inverted", "");
-    } else {
-      this.removeAttribute("inverted");
-    }
+  set paddingBlockTablet(value) {
+    this.setAttribute("padding-block--tablet", value);
   }
-  get minHeight() {
-    return this.hasAttribute("min-height");
+  get paddingTopTablet() {
+    return this.getAttribute("padding-top--tablet");
   }
-  set minHeight(value) {
-    if (value) {
-      this.setAttribute("min-height", "");
-    } else {
-      this.removeAttribute("min-height");
-    }
+  set paddingTopTablet(value) {
+    this.setAttribute("padding-top--tablet", value);
   }
-};
-_ContentHeader.nativeName = "div";
-let ContentHeader = _ContentHeader;
-if (!customElements.get("px-content-header")) {
-  customElements.define("px-content-header", ContentHeader);
-}
-const styles$w = ".separator{--separator-size: var(--px-size-border-m);--separator-direction--mobile-border-width: var(--separator-size) 0 0;--separator-direction--mobile-width: initial;--separator-direction--mobile-height: initial;clear:both;margin:0;border-style:solid;border-color:var( --separator-color-default, var(--px-color-border-main-default) );border-width:var(--separator-size) 0 0;width:initial;height:initial}.separator-direction-horizontal--mobile{border-width:var(--separator-size) 0 0;width:initial;height:initial}.separator-direction-vertical--mobile{width:var(--separator-size);height:100%;border-width:0 var(--separator-size) 0 0}:host([inverted]) .separator{border-color:var( --separator-color-inverted, var(--px-color-border-main-inverted) )}@media only screen and (min-width: 768px){.separator-direction-horizontal--tablet{border-width:var(--separator-size) 0 0;width:initial;height:initial}.separator-direction-vertical--tablet{width:var(--separator-size);height:100%;border-width:0 var(--separator-size) 0 0}}@media only screen and (min-width: 1025px){.separator-direction-horizontal--laptop{border-width:var(--separator-size) 0 0;width:initial;height:initial}.separator-direction-vertical--laptop{width:var(--separator-size);height:100%;border-width:0 var(--separator-size) 0 0}}@media only screen and (min-width: 1441px){.separator-direction-horizontal--desktop{border-width:var(--separator-size) 0 0;width:initial;height:initial}.separator-direction-vertical--desktop{width:var(--separator-size);height:100%;border-width:0 var(--separator-size) 0 0}}";
-const styleSheet$q = new CSSStyleSheet();
-styleSheet$q.replaceSync(styles$w);
-const separatorDirectionValues = [
-  "",
-  "default",
-  "horizontal",
-  "vertical"
-];
-const separatorSizeValues = ["", "default", "none", "s", "m", "l"];
-const separatorColorValues = [
-  "",
-  "main",
-  "brand",
-  "none",
-  "neutral",
-  "purpose-success",
-  "purpose-warning",
-  "purpose-error",
-  "purpose-unlimited",
-  "state-hover",
-  "state-active"
-];
-const _Separator = class _Separator extends PxElement {
-  constructor() {
-    var _a;
-    super(styleSheet$q);
-    const $root = document.createElement(this.nativeName);
-    $root.classList.add("separator");
-    this.internals = (_a = this.attachInternals) == null ? void 0 : _a.call(this);
-    this.shadowRoot.appendChild($root);
+  get paddingBottomTablet() {
+    return this.getAttribute("padding-bottom--tablet");
   }
-  static get observedAttributes() {
-    return [
-      ...super.observedAttributes,
-      "direction",
-      "direction--mobile",
-      "direction--tablet",
-      "direction--laptop",
-      "direction--desktop",
-      "size",
-      "color",
-      "inverted"
-    ];
+  set paddingBottomTablet(value) {
+    this.setAttribute("padding-bottom--tablet", value);
   }
-  attributeChangedCallback(attrName, oldValue, newValue) {
-    if (oldValue !== newValue) {
-      switch (attrName) {
-        case "direction":
-        case "direction--mobile":
-        case "direction--tablet":
-        case "direction--laptop":
-        case "direction--desktop":
-          this.updateDirection(
-            attrName,
-            oldValue,
-            newValue,
-            separatorDirectionValues
-          );
-          break;
-        case "size":
-          this.updateSize(attrName, oldValue, newValue, separatorSizeValues);
-          break;
-        case "color":
-          this.updateColor(attrName, oldValue, newValue, separatorColorValues);
-          break;
-        default:
-          super.attributeChangedCallback(attrName, oldValue, newValue);
-          break;
-      }
-    }
+  get paddingBlockLaptop() {
+    return this.getAttribute("padding-block--laptop");
   }
-  updateSize(attrName, oldValue, newValue, attrValue) {
-    const updateSizeStyle = (value) => {
-      if (value !== null && value !== "" && value !== "default") {
-        this.$el.style.setProperty(
-          "--separator-size",
-          `var(--px-size-border-${value})`
-        );
-      }
-    };
-    if (!this.checkName(attrValue, newValue)) {
-      console.error(`${newValue} is not a valid value for ${attrName}`);
-    } else {
-      updateSizeStyle(oldValue);
-      updateSizeStyle(newValue);
-    }
+  set paddingBlockLaptop(value) {
+    this.setAttribute("padding-block--laptop", value);
   }
-  updateColor(attrName, oldValue, newValue, attrValue) {
-    const updateColorStyle = (value) => {
-      if (value !== null && value !== "" && value !== "default") {
-        this.$el.style.setProperty(
-          `--separator-color-default`,
-          `var(--px-color-border-${value}-default)`
-        );
-        this.$el.style.setProperty(
-          `--separator-color-inverted`,
-          `var(--px-color-border-${value}-inverted)`
-        );
-      }
-    };
-    if (!this.checkName(attrValue, newValue)) {
-      console.error(`${newValue} is not a valid value for ${attrName}`);
-    } else {
-      updateColorStyle(oldValue);
-      updateColorStyle(newValue);
-    }
+  get paddingTopLaptop() {
+    return this.getAttribute("padding-top--laptop");
   }
-  updateDirection(attrName, oldValue, newValue, attrValue) {
-    const updateDirectionClass = (breakpoint, value) => {
-      if (value !== null && value !== "" && value !== "default") {
-        this.$el.classList.add(`separator-direction-${value}--${breakpoint}`);
-      }
-    };
-    if (!this.checkName(attrValue, newValue)) {
-      console.error(`${newValue} is not a valid value for ${attrName}`);
-    } else {
-      if (attrName === "direction") {
-        ["mobile", "tablet", "laptop", "desktop"].forEach((breakpoint) => {
-          const existingClass = Array.from(this.$el.classList).find(
-            (className) => className.startsWith(`separator-direction-`) && className.endsWith(`--${breakpoint}`)
-          );
-          if (!existingClass) {
-            updateDirectionClass(breakpoint, newValue);
-          }
-        });
-      } else {
-        const breakpoint = attrName.split("--")[1];
-        const existingClass = Array.from(this.$el.classList).find(
-          (className) => className.startsWith(`separator-direction-`) && className.endsWith(`--${breakpoint}`)
-        );
-        if (existingClass) {
-          this.$el.classList.replace(
-            existingClass,
-            `separator-direction-${newValue}--${breakpoint}`
-          );
-        } else {
-          updateDirectionClass(breakpoint, newValue);
-        }
-      }
-    }
-  }
-  get direction() {
-    return this.getAttribute("direction");
-  }
-  set direction(value) {
-    this.setAttribute("direction", value);
-  }
-  get directionMobile() {
-    return this.getAttribute("direction--mobile");
-  }
-  set directionMobile(value) {
-    this.setAttribute("direction--mobile", value);
+  set paddingTopLaptop(value) {
+    this.setAttribute("padding-top--laptop", value);
   }
-  get directionTablet() {
-    return this.getAttribute("direction--tablet");
+  get paddingBottomLaptop() {
+    return this.getAttribute("padding-bottom--laptop");
   }
-  set directionTablet(value) {
-    this.setAttribute("direction--tablet", value);
+  set paddingBottomLaptop(value) {
+    this.setAttribute("padding-bottom--laptop", value);
   }
-  get directionLaptop() {
-    return this.getAttribute("direction--laptop");
+  get border() {
+    return this.getAttribute("border");
   }
-  set directionLaptop(value) {
-    this.setAttribute("direction--laptop", value);
+  set border(value) {
+    this.setAttribute("border", value);
   }
-  get directionDesktop() {
-    return this.getAttribute("direction--desktop");
+  get borderSide() {
+    return this.getAttribute("border-side");
   }
-  set directionDesktop(value) {
-    this.setAttribute("direction--desktop", value);
+  set borderSide(value) {
+    this.setAttribute("border-side", value);
   }
-  get size() {
-    return this.getAttribute("size");
+  get borderSideMobile() {
+    return this.getAttribute("border-side--mobile");
   }
-  set size(value) {
-    this.setAttribute("size", value);
+  set borderSideMobile(value) {
+    this.setAttribute("border-side--mobile", value);
   }
-  get color() {
-    return this.getAttribute("color");
+  get borderSideTablet() {
+    return this.getAttribute("border-side--tablet");
   }
-  set color(value) {
-    this.setAttribute("color", value);
+  set borderSideTablet(value) {
+    this.setAttribute("border-side--tablet", value);
   }
-  get inverted() {
-    return this.getAttribute("inverted");
+  get borderSideLaptop() {
+    return this.getAttribute("border-side--laptop");
   }
-  set inverted(value) {
-    this.setAttribute("inverted", value);
+  set borderSideLaptop(value) {
+    this.setAttribute("border-side--laptop", value);
   }
-};
-_Separator.nativeName = "hr";
-let Separator = _Separator;
-if (!customElements.get("px-separator")) {
-  customElements.define("px-separator", Separator);
 }
-const headingCss = "h1,.style-title-4xl,::slotted(h1),h2,.style-title-3xl,::slotted(h2),h3,.style-title-2xl,::slotted(h3),h4,.style-title-xl,::slotted(h4),h5,.style-title-l,::slotted(h5),h6,.style-title-m,::slotted(h6),.style-title-s,.style-subtitle{margin:0;font-family:var(--px-font-family);color:var(--heading-color-default, var(--px-color-text-brand-default));text-align:var(--heading-text-align--mobile, left);font-size:var(--px-text-size-heading-s-mobile);line-height:var(--px-line-height-ratio-l);font-weight:var(--px-font-weight-title)}:host([inverted]) h1,:host([inverted]) .style-title-4xl,:host([inverted]) ::slotted(h1),:host([inverted]) h2,:host([inverted]) .style-title-3xl,:host([inverted]) ::slotted(h2),:host([inverted]) h3,:host([inverted]) .style-title-2xl,:host([inverted]) ::slotted(h3),:host([inverted]) h4,:host([inverted]) .style-title-xl,:host([inverted]) ::slotted(h4),:host([inverted]) h5,:host([inverted]) .style-title-l,:host([inverted]) ::slotted(h5),:host([inverted]) h6,:host([inverted]) .style-title-m,:host([inverted]) ::slotted(h6),:host([inverted]) .style-title-s,:host([inverted]) .style-subtitle{color:var(--heading-color-inverted, var(--px-color-text-brand-inverted))}h1,.style-title-4xl,::slotted(h1){font-size:var(--px-text-size-heading-3xl-mobile);line-height:var(--px-line-height-ratio-s);font-weight:var(--px-font-weight-title-large)}h2,.style-title-3xl,::slotted(h2){font-size:var(--px-text-size-heading-2xl-mobile);line-height:var(--px-line-height-ratio-s);font-weight:var(--px-font-weight-title-large)}h3,.style-title-2xl,::slotted(h3){font-size:var(--px-text-size-heading-xl-mobile);line-height:var(--px-line-height-ratio-s)}h4,.style-title-xl,::slotted(h4){font-size:var(--px-text-size-heading-l-mobile)}h5,.style-title-l,::slotted(h5){font-size:var(--px-text-size-heading-m-mobile)}h6,.style-title-m,::slotted(h6){font-size:var(--px-text-size-heading-base-mobile)}.style-subtitle{font-size:var(--px-text-size-heading-l-mobile);font-weight:var(--px-font-weight-subtitle)}.style-title-s{font-size:var(--px-text-size-heading-s-mobile)}@media only screen and (min-width: 768px){h1,.style-title-4xl,::slotted(h1),h2,.style-title-3xl,::slotted(h2),h3,.style-title-2xl,::slotted(h3),h4,.style-title-xl,::slotted(h4),h5,.style-title-l,::slotted(h5),h6,.style-title-m,::slotted(h6),.style-title-s,.style-subtitle{text-align:var(--heading-text-align--tablet, left)}h1,.style-title-4xl,::slotted(h1){font-size:var(--px-text-size-heading-5xl-desktop)}h2,.style-title-3xl,::slotted(h2){font-size:var(--px-text-size-heading-4xl-desktop)}h3,.style-title-2xl,::slotted(h3){font-size:var(--px-text-size-heading-2xl-desktop)}h4,.style-title-xl,::slotted(h4){font-size:var(--px-text-size-heading-xl-desktop)}h5,.style-title-l,::slotted(h5){font-size:var(--px-text-size-heading-l-desktop)}h6,.style-title-m,::slotted(h6){font-size:var(--px-text-size-heading-m-desktop)}.style-title-s{font-size:var(--px-text-size-heading-base-desktop)}.style-subtitle{font-size:var(--px-text-size-heading-xl-desktop)}}@media only screen and (min-width: 1025px){h1,.style-title-4xl,::slotted(h1),h2,.style-title-3xl,::slotted(h2),h3,.style-title-2xl,::slotted(h3),h4,.style-title-xl,::slotted(h4),h5,.style-title-l,::slotted(h5),h6,.style-title-m,::slotted(h6),.style-title-s,.style-subtitle{text-align:var(--heading-text-align--laptop, left)}h1,.style-title-4xl,::slotted(h1){font-size:var(--px-text-size-heading-5xl-desktop)}h2,.style-title-3xl,::slotted(h2){font-size:var(--px-text-size-heading-4xl-desktop)}h3,.style-title-2xl,::slotted(h3){font-size:var(--px-text-size-heading-2xl-desktop)}h4,.style-title-xl,::slotted(h4){font-size:var(--px-text-size-heading-xl-desktop)}h5,.style-title-l,::slotted(h5){font-size:var(--px-text-size-heading-l-desktop)}h6,.style-title-m,::slotted(h6){font-size:var(--px-text-size-heading-m-desktop)}.style-title-s{font-size:var(--px-text-size-heading-base-desktop)}.style-subtitle{font-size:var(--px-text-size-heading-xl-desktop)}}@media screen and (min-width: 1441px){h1,.style-title-4xl,::slotted(h1),h2,.style-title-3xl,::slotted(h2),h3,.style-title-2xl,::slotted(h3),h4,.style-title-xl,::slotted(h4),h5,.style-title-l,::slotted(h5),h6,.style-title-m,::slotted(h6),.style-title-s,.style-subtitle{text-align:var(--heading-text-align--desktop, left)}}";
-const headingStyles$2 = new CSSStyleSheet();
-headingStyles$2.replaceSync(headingCss);
-const typographyStyles$4 = new CSSStyleSheet();
-typographyStyles$4.replaceSync(typographyCss$1);
-class AbstractHeading extends PxElement {
-  template() {
-    return `<slot></slot>`;
-  }
-  constructor(tagName) {
-    super(headingStyles$2, typographyStyles$4);
-    const $root = document.createElement(tagName);
-    $root.innerHTML = this.template();
-    this.shadowRoot.appendChild($root);
+if (!customElements.get("px-section")) {
+  customElements.define("px-section", Section);
+}
+const contentHeaderStyles = new CSSStyleSheet();
+contentHeaderStyles.replaceSync(contentHeaderCss);
+const _ContentHeader = class _ContentHeader extends PxElement {
+  constructor() {
+    super(contentHeaderStyles);
+    this.template = () => `<div class="content-header">
+      <div class="contrast-helper"></div>
+      <px-section padding-block="l">
+      <px-grid gap="none">
+        <px-container padding="none" border-radius="none" background-color="none"  >
+          <div class="content-header-content">
+            <px-vstack gap="heading-to-subtitle">
+              <px-h1 variant="title-3xl"><slot></slot></px-h1>
+              <slot name="subtitle"></slot>
+            </px-vstack>
+            ${this.$patchDescriptionSlot ? `<px-stack gap="s" direction="row" direction--mobile="column">
+              <slot name="patch" shrink></slot>
+              <slot name="patch-description"></slot>
+            </px-stack>` : ""}
+          </div>
+        </px-container>
+      </px-grid>
+        ${this.$overlapSlot ? `<slot name="overlap" slot="overlap"></slot>` : ""}
+      </px-section>
+    </div>`;
+    this.shadowRoot.innerHTML = this.template();
   }
   static get observedAttributes() {
     return [
-      ...super.observedAttributes,
-      "variant",
-      "color",
-      "text-align",
-      "text-align--mobile",
-      "text-align--tablet",
-      "text-align--laptop",
-      "text-align--desktop",
+      "background-color",
+      "background-gradient",
+      "background-image",
+      "background-image--mobile",
+      "background-image--tablet",
+      "background-image--laptop",
+      "background-size",
+      "background-position",
+      "contrast-helper-gradient",
+      "contrast-helper-overlay",
+      "min-height",
+      "has-gridding",
+      "has-gridding--mobile",
+      "has-gridding--tablet",
+      "has-gridding--laptop",
       "inverted"
     ];
   }
+  connectedCallback() {
+    var _a;
+    (_a = super.connectedCallback) == null ? void 0 : _a.call(this);
+    if (this.$subtitleSlot) {
+      this.$subtitleSlot.setAttribute("variant", "subtitle");
+    }
+    if (this.$patchDescriptionSlot) {
+      if (this.$patchDescriptionSlot.localName === "px-p") {
+        this.$patchDescriptionSlot.setAttribute("variant", "default");
+      }
+      if (this.$patchDescriptionSlot.localName === "px-p" || this.$patchDescriptionSlot.localName === "px-span") {
+        this.$patchDescriptionSlot.setAttribute("font-size", "body-l");
+        this.$patchDescriptionSlot.removeAttribute("font-weight");
+        this.$patchDescriptionSlot.removeAttribute("color");
+      }
+      if (this.$patchDescriptionSlot.localName === "px-price") {
+        this.$patchDescriptionSlot.setAttribute("size", "m");
+      }
+    }
+    this.createGridding();
+  }
   attributeChangedCallback(attrName, oldValue, newValue) {
     if (oldValue !== newValue) {
       switch (attrName) {
-        case "variant":
-          this.updateAttribute(attrName, oldValue, newValue, headingValues);
+        case "background-color":
+          this.$section.backgroundColor = backgroundColorValues.indexOf(newValue) > 0 ? newValue : "none";
           break;
-        case "color":
-          this.updateColor(oldValue, newValue, colorValues);
+        case "background-gradient":
+          this.$section.gradient = gradientValues.indexOf(newValue) > 0 ? newValue : "none";
           break;
-        case "text-align":
-        case "text-align--mobile":
-        case "text-align--tablet":
-        case "text-align--laptop":
-        case "text-align--desktop":
-          this.updateTextAlign(attrName, oldValue, newValue, textalignValues);
+        case "background-image":
+          this.$section.backgroundImage = newValue;
+          break;
+        case "background-image--mobile":
+          this.$section.backgroundImageMobile = newValue;
+          break;
+        case "background-image--tablet":
+          this.$section.backgroundImageTablet = newValue;
+          break;
+        case "background-image--laptop":
+          this.$section.backgroundImageLaptop = newValue;
+          break;
+        case "background-size":
+          this.$section.backgroundSize = backgroundSizeValues.indexOf(newValue) > 0 ? newValue : "";
+          break;
+        case "background-position":
+          this.$section.backgroundPosition = newValue;
+          break;
+        case "has-gridding":
+        case "has-gridding--mobile":
+        case "has-gridding--tablet":
+        case "has-gridding--laptop":
+          this.createGridding();
+          break;
+        case "inverted":
+          for (let i = 0; i < this.$children.length; i++) {
+            if (!this.$children[i].hasAttribute("inverted")) {
+              this.$children[i].toggleAttribute("inverted");
+            }
+          }
+          this.$h1.toggleAttribute("inverted", newValue !== null);
+          this.$el.toggleAttribute("inverted", newValue !== null);
           break;
         default:
           super.attributeChangedCallback(attrName, oldValue, newValue);
@@ -8394,38 +8291,468 @@ class AbstractHeading extends PxElement {
       }
     }
   }
-  toggleClass(oldValue, newValue) {
-    if (oldValue !== null && oldValue !== "" && oldValue !== "default") {
-      this.$el.classList.toggle(`style-${oldValue}`);
-    }
-    if (newValue !== null && newValue !== "" && newValue !== "default") {
-      this.$el.classList.toggle(`style-${newValue}`);
-    }
-  }
-  updateAttribute(attrName, oldValue, newValue, attrValue) {
-    if (!this.checkName(attrValue, newValue)) {
-      console.error(`${newValue} is not an allowed "${attrName}" value`);
-    } else {
-      this.toggleClass(oldValue, newValue);
-    }
-  }
-  updateColor(oldValue, newValue, attrValue) {
-    if (!this.checkName(attrValue, newValue)) {
-      console.error(`${newValue} is not a valid color value`);
-      return;
-    }
-    const updateColorStyle = (value) => {
-      if (value !== null && value !== "" && value !== "default") {
-        this.$el.style.setProperty(
-          `--heading-color-default`,
-          `var(--px-color-text-${value}-default)`
-        );
-        this.$el.style.setProperty(
-          `--heading-color-inverted`,
-          `var(--px-color-text-${value}-inverted)`
-        );
-      }
-    };
+  createGridding() {
+    const breakpoints = [
+      { prop: "hasGridding", gridProp: "gridCols", attr: "col-span" },
+      {
+        prop: "hasGriddingMobile",
+        gridProp: "gridColsMobile",
+        attr: "col-span--mobile"
+      },
+      {
+        prop: "hasGriddingTablet",
+        gridProp: "gridColsTablet",
+        attr: "col-span--tablet"
+      },
+      {
+        prop: "hasGriddingLaptop",
+        gridProp: "gridColsLaptop",
+        attr: "col-span--laptop"
+      }
+    ];
+    const spanElement = this.shadowRoot.querySelector(
+      "px-grid > px-container"
+    );
+    breakpoints.forEach(({ prop, gridProp, attr }) => {
+      if (this[prop]) {
+        this.$grid[gridProp] = "3";
+        spanElement.setAttribute(attr, "2");
+      }
+    });
+  }
+  get $grid() {
+    return this.shadowRoot.querySelector("px-grid");
+  }
+  get $section() {
+    return this.shadowRoot.querySelector("px-section");
+  }
+  get $h1() {
+    return this.shadowRoot.querySelector("px-h1");
+  }
+  get $subtitleSlot() {
+    return this.querySelector('[slot="subtitle"]');
+  }
+  get $patchDescriptionSlot() {
+    return this.querySelector('[slot="patch-description"]');
+  }
+  get $overlapSlot() {
+    return this.querySelector('[slot="overlap"]');
+  }
+  get $children() {
+    return this.querySelectorAll("px-content-header > *");
+  }
+  get backgroundColor() {
+    return this.getAttribute("background-color");
+  }
+  set backgroundColor(value) {
+    this.setAttribute("background-color", value);
+  }
+  get gradient() {
+    return this.getAttribute("background-gradient");
+  }
+  set gradient(value) {
+    this.setAttribute("background-gradient", value);
+  }
+  get backgroundImage() {
+    return this.getAttribute("background-image");
+  }
+  set backgroundImage(value) {
+    this.setAttribute("background-image", value);
+  }
+  get backgroundImageMobile() {
+    return this.getAttribute("background-image--mobile");
+  }
+  set backgroundImageMobile(value) {
+    this.setAttribute("background-image--mobile", value);
+  }
+  get backgroundImageTablet() {
+    return this.getAttribute("background-image--tablet");
+  }
+  set backgroundImageTablet(value) {
+    this.setAttribute("background-image--tablet", value);
+  }
+  get backgroundImageLaptop() {
+    return this.getAttribute("background-image--laptop");
+  }
+  set backgroundImageLaptop(value) {
+    this.setAttribute("background-image--laptop", value);
+  }
+  get backgroundSize() {
+    return this.getAttribute("background-size");
+  }
+  set backgroundSize(value) {
+    this.setAttribute("background-size", value);
+  }
+  get backgroundPosition() {
+    return this.getAttribute("background-position");
+  }
+  set backgroundPosition(value) {
+    this.setAttribute("background-position", value);
+  }
+  get gradientContrastHelper() {
+    return this.hasAttribute("contrast-helper-gradient");
+  }
+  set gradientContrastHelper(value) {
+    if (value) {
+      this.setAttribute("contrast-helper-gradient", "");
+    } else {
+      this.removeAttribute("contrast-helper-gradient");
+    }
+  }
+  get overlayContrastHelper() {
+    return this.hasAttribute("contrast-helper-overlay");
+  }
+  set overlayContrastHelper(value) {
+    if (value) {
+      this.setAttribute("contrast-helper-overlay", "");
+    } else {
+      this.removeAttribute("contrast-helper-overlay");
+    }
+  }
+  get hasGridding() {
+    return this.hasAttribute("has-gridding");
+  }
+  set hasGridding(value) {
+    if (value) {
+      this.setAttribute("has-gridding", "");
+    } else {
+      this.removeAttribute("has-gridding");
+    }
+  }
+  get hasGriddingMobile() {
+    return this.hasAttribute("has-gridding--mobile");
+  }
+  set hasGriddingMobile(value) {
+    if (value) {
+      this.setAttribute("has-gridding--mobile", "");
+    } else {
+      this.removeAttribute("has-gridding--mobile");
+    }
+  }
+  get hasGriddingTablet() {
+    return this.hasAttribute("has-gridding--tablet");
+  }
+  set hasGriddingTablet(value) {
+    if (value) {
+      this.setAttribute("has-gridding--tablet", "");
+    } else {
+      this.removeAttribute("has-gridding--tablet");
+    }
+  }
+  get hasGriddingLaptop() {
+    return this.hasAttribute("has-gridding--laptop");
+  }
+  set hasGriddingLaptop(value) {
+    if (value) {
+      this.setAttribute("has-gridding--laptop", "");
+    } else {
+      this.removeAttribute("has-gridding--laptop");
+    }
+  }
+  get inverted() {
+    return this.hasAttribute("inverted");
+  }
+  set inverted(value) {
+    if (value) {
+      this.setAttribute("inverted", "");
+    } else {
+      this.removeAttribute("inverted");
+    }
+  }
+  get minHeight() {
+    return this.hasAttribute("min-height");
+  }
+  set minHeight(value) {
+    if (value) {
+      this.setAttribute("min-height", "");
+    } else {
+      this.removeAttribute("min-height");
+    }
+  }
+};
+_ContentHeader.nativeName = "div";
+let ContentHeader = _ContentHeader;
+if (!customElements.get("px-content-header")) {
+  customElements.define("px-content-header", ContentHeader);
+}
+const styles$v = ".separator{--separator-size: var(--px-size-border-m);--separator-direction--mobile-border-width: var(--separator-size) 0 0;--separator-direction--mobile-width: initial;--separator-direction--mobile-height: initial;clear:both;margin:0;border-style:solid;border-color:var( --separator-color-default, var(--px-color-border-main-default) );border-width:var(--separator-size) 0 0;width:initial;height:initial}.separator-direction-horizontal--mobile{border-width:var(--separator-size) 0 0;width:initial;height:initial}.separator-direction-vertical--mobile{width:var(--separator-size);height:100%;border-width:0 var(--separator-size) 0 0}:host([inverted]) .separator{border-color:var( --separator-color-inverted, var(--px-color-border-main-inverted) )}@media only screen and (min-width: 768px){.separator-direction-horizontal--tablet{border-width:var(--separator-size) 0 0;width:initial;height:initial}.separator-direction-vertical--tablet{width:var(--separator-size);height:100%;border-width:0 var(--separator-size) 0 0}}@media only screen and (min-width: 1025px){.separator-direction-horizontal--laptop{border-width:var(--separator-size) 0 0;width:initial;height:initial}.separator-direction-vertical--laptop{width:var(--separator-size);height:100%;border-width:0 var(--separator-size) 0 0}}@media only screen and (min-width: 1441px){.separator-direction-horizontal--desktop{border-width:var(--separator-size) 0 0;width:initial;height:initial}.separator-direction-vertical--desktop{width:var(--separator-size);height:100%;border-width:0 var(--separator-size) 0 0}}";
+const styleSheet$p = new CSSStyleSheet();
+styleSheet$p.replaceSync(styles$v);
+const separatorDirectionValues = [
+  "",
+  "default",
+  "horizontal",
+  "vertical"
+];
+const separatorSizeValues = ["", "default", "none", "s", "m", "l"];
+const separatorColorValues = [
+  "",
+  "main",
+  "brand",
+  "none",
+  "neutral",
+  "purpose-success",
+  "purpose-warning",
+  "purpose-error",
+  "purpose-unlimited",
+  "state-hover",
+  "state-active"
+];
+const _Separator = class _Separator extends PxElement {
+  constructor() {
+    var _a;
+    super(styleSheet$p);
+    const $root = document.createElement(this.nativeName);
+    $root.classList.add("separator");
+    this.internals = (_a = this.attachInternals) == null ? void 0 : _a.call(this);
+    this.shadowRoot.appendChild($root);
+  }
+  static get observedAttributes() {
+    return [
+      ...super.observedAttributes,
+      "direction",
+      "direction--mobile",
+      "direction--tablet",
+      "direction--laptop",
+      "direction--desktop",
+      "size",
+      "color",
+      "inverted"
+    ];
+  }
+  attributeChangedCallback(attrName, oldValue, newValue) {
+    if (oldValue !== newValue) {
+      switch (attrName) {
+        case "direction":
+        case "direction--mobile":
+        case "direction--tablet":
+        case "direction--laptop":
+        case "direction--desktop":
+          this.updateDirection(
+            attrName,
+            oldValue,
+            newValue,
+            separatorDirectionValues
+          );
+          break;
+        case "size":
+          this.updateSize(attrName, oldValue, newValue, separatorSizeValues);
+          break;
+        case "color":
+          this.updateColor(attrName, oldValue, newValue, separatorColorValues);
+          break;
+        default:
+          super.attributeChangedCallback(attrName, oldValue, newValue);
+          break;
+      }
+    }
+  }
+  updateSize(attrName, oldValue, newValue, attrValue) {
+    const updateSizeStyle = (value) => {
+      if (value !== null && value !== "" && value !== "default") {
+        this.$el.style.setProperty(
+          "--separator-size",
+          `var(--px-size-border-${value})`
+        );
+      }
+    };
+    if (!this.checkName(attrValue, newValue)) {
+      console.error(`${newValue} is not a valid value for ${attrName}`);
+    } else {
+      updateSizeStyle(oldValue);
+      updateSizeStyle(newValue);
+    }
+  }
+  updateColor(attrName, oldValue, newValue, attrValue) {
+    const updateColorStyle = (value) => {
+      if (value !== null && value !== "" && value !== "default") {
+        this.$el.style.setProperty(
+          `--separator-color-default`,
+          `var(--px-color-border-${value}-default)`
+        );
+        this.$el.style.setProperty(
+          `--separator-color-inverted`,
+          `var(--px-color-border-${value}-inverted)`
+        );
+      }
+    };
+    if (!this.checkName(attrValue, newValue)) {
+      console.error(`${newValue} is not a valid value for ${attrName}`);
+    } else {
+      updateColorStyle(oldValue);
+      updateColorStyle(newValue);
+    }
+  }
+  updateDirection(attrName, oldValue, newValue, attrValue) {
+    const updateDirectionClass = (breakpoint, value) => {
+      if (value !== null && value !== "" && value !== "default") {
+        this.$el.classList.add(`separator-direction-${value}--${breakpoint}`);
+      }
+    };
+    if (!this.checkName(attrValue, newValue)) {
+      console.error(`${newValue} is not a valid value for ${attrName}`);
+    } else {
+      if (attrName === "direction") {
+        ["mobile", "tablet", "laptop", "desktop"].forEach((breakpoint) => {
+          const existingClass = Array.from(this.$el.classList).find(
+            (className) => className.startsWith(`separator-direction-`) && className.endsWith(`--${breakpoint}`)
+          );
+          if (!existingClass) {
+            updateDirectionClass(breakpoint, newValue);
+          }
+        });
+      } else {
+        const breakpoint = attrName.split("--")[1];
+        const existingClass = Array.from(this.$el.classList).find(
+          (className) => className.startsWith(`separator-direction-`) && className.endsWith(`--${breakpoint}`)
+        );
+        if (existingClass) {
+          this.$el.classList.replace(
+            existingClass,
+            `separator-direction-${newValue}--${breakpoint}`
+          );
+        } else {
+          updateDirectionClass(breakpoint, newValue);
+        }
+      }
+    }
+  }
+  get direction() {
+    return this.getAttribute("direction");
+  }
+  set direction(value) {
+    this.setAttribute("direction", value);
+  }
+  get directionMobile() {
+    return this.getAttribute("direction--mobile");
+  }
+  set directionMobile(value) {
+    this.setAttribute("direction--mobile", value);
+  }
+  get directionTablet() {
+    return this.getAttribute("direction--tablet");
+  }
+  set directionTablet(value) {
+    this.setAttribute("direction--tablet", value);
+  }
+  get directionLaptop() {
+    return this.getAttribute("direction--laptop");
+  }
+  set directionLaptop(value) {
+    this.setAttribute("direction--laptop", value);
+  }
+  get directionDesktop() {
+    return this.getAttribute("direction--desktop");
+  }
+  set directionDesktop(value) {
+    this.setAttribute("direction--desktop", value);
+  }
+  get size() {
+    return this.getAttribute("size");
+  }
+  set size(value) {
+    this.setAttribute("size", value);
+  }
+  get color() {
+    return this.getAttribute("color");
+  }
+  set color(value) {
+    this.setAttribute("color", value);
+  }
+  get inverted() {
+    return this.getAttribute("inverted");
+  }
+  set inverted(value) {
+    this.setAttribute("inverted", value);
+  }
+};
+_Separator.nativeName = "hr";
+let Separator = _Separator;
+if (!customElements.get("px-separator")) {
+  customElements.define("px-separator", Separator);
+}
+const headingCss = "h1,.style-title-4xl,::slotted(h1),h2,.style-title-3xl,::slotted(h2),h3,.style-title-2xl,::slotted(h3),h4,.style-title-xl,::slotted(h4),h5,.style-title-l,::slotted(h5),h6,.style-title-m,::slotted(h6),.style-title-s,.style-subtitle{margin:0;font-family:var(--px-font-family);color:var(--heading-color-default, var(--px-color-text-brand-default));text-align:var(--heading-text-align--mobile, left);font-size:var(--px-text-size-heading-s-mobile);line-height:var(--px-line-height-ratio-l);font-weight:var(--px-font-weight-title)}:host([inverted]) h1,:host([inverted]) .style-title-4xl,:host([inverted]) ::slotted(h1),:host([inverted]) h2,:host([inverted]) .style-title-3xl,:host([inverted]) ::slotted(h2),:host([inverted]) h3,:host([inverted]) .style-title-2xl,:host([inverted]) ::slotted(h3),:host([inverted]) h4,:host([inverted]) .style-title-xl,:host([inverted]) ::slotted(h4),:host([inverted]) h5,:host([inverted]) .style-title-l,:host([inverted]) ::slotted(h5),:host([inverted]) h6,:host([inverted]) .style-title-m,:host([inverted]) ::slotted(h6),:host([inverted]) .style-title-s,:host([inverted]) .style-subtitle{color:var(--heading-color-inverted, var(--px-color-text-brand-inverted))}h1,.style-title-4xl,::slotted(h1){font-size:var(--px-text-size-heading-3xl-mobile);line-height:var(--px-line-height-ratio-s);font-weight:var(--px-font-weight-title-large)}h2,.style-title-3xl,::slotted(h2){font-size:var(--px-text-size-heading-2xl-mobile);line-height:var(--px-line-height-ratio-s);font-weight:var(--px-font-weight-title-large)}h3,.style-title-2xl,::slotted(h3){font-size:var(--px-text-size-heading-xl-mobile);line-height:var(--px-line-height-ratio-s)}h4,.style-title-xl,::slotted(h4){font-size:var(--px-text-size-heading-l-mobile)}h5,.style-title-l,::slotted(h5){font-size:var(--px-text-size-heading-m-mobile)}h6,.style-title-m,::slotted(h6){font-size:var(--px-text-size-heading-base-mobile)}.style-subtitle{font-size:var(--px-text-size-heading-l-mobile);font-weight:var(--px-font-weight-subtitle)}.style-title-s{font-size:var(--px-text-size-heading-s-mobile)}@media only screen and (min-width: 768px){h1,.style-title-4xl,::slotted(h1),h2,.style-title-3xl,::slotted(h2),h3,.style-title-2xl,::slotted(h3),h4,.style-title-xl,::slotted(h4),h5,.style-title-l,::slotted(h5),h6,.style-title-m,::slotted(h6),.style-title-s,.style-subtitle{text-align:var(--heading-text-align--tablet, left)}h1,.style-title-4xl,::slotted(h1){font-size:var(--px-text-size-heading-5xl-desktop)}h2,.style-title-3xl,::slotted(h2){font-size:var(--px-text-size-heading-4xl-desktop)}h3,.style-title-2xl,::slotted(h3){font-size:var(--px-text-size-heading-2xl-desktop)}h4,.style-title-xl,::slotted(h4){font-size:var(--px-text-size-heading-xl-desktop)}h5,.style-title-l,::slotted(h5){font-size:var(--px-text-size-heading-l-desktop)}h6,.style-title-m,::slotted(h6){font-size:var(--px-text-size-heading-m-desktop)}.style-title-s{font-size:var(--px-text-size-heading-base-desktop)}.style-subtitle{font-size:var(--px-text-size-heading-xl-desktop)}}@media only screen and (min-width: 1025px){h1,.style-title-4xl,::slotted(h1),h2,.style-title-3xl,::slotted(h2),h3,.style-title-2xl,::slotted(h3),h4,.style-title-xl,::slotted(h4),h5,.style-title-l,::slotted(h5),h6,.style-title-m,::slotted(h6),.style-title-s,.style-subtitle{text-align:var(--heading-text-align--laptop, left)}h1,.style-title-4xl,::slotted(h1){font-size:var(--px-text-size-heading-5xl-desktop)}h2,.style-title-3xl,::slotted(h2){font-size:var(--px-text-size-heading-4xl-desktop)}h3,.style-title-2xl,::slotted(h3){font-size:var(--px-text-size-heading-2xl-desktop)}h4,.style-title-xl,::slotted(h4){font-size:var(--px-text-size-heading-xl-desktop)}h5,.style-title-l,::slotted(h5){font-size:var(--px-text-size-heading-l-desktop)}h6,.style-title-m,::slotted(h6){font-size:var(--px-text-size-heading-m-desktop)}.style-title-s{font-size:var(--px-text-size-heading-base-desktop)}.style-subtitle{font-size:var(--px-text-size-heading-xl-desktop)}}@media screen and (min-width: 1441px){h1,.style-title-4xl,::slotted(h1),h2,.style-title-3xl,::slotted(h2),h3,.style-title-2xl,::slotted(h3),h4,.style-title-xl,::slotted(h4),h5,.style-title-l,::slotted(h5),h6,.style-title-m,::slotted(h6),.style-title-s,.style-subtitle{text-align:var(--heading-text-align--desktop, left)}}";
+const headingStyles$2 = new CSSStyleSheet();
+headingStyles$2.replaceSync(headingCss);
+const typographyStyles$4 = new CSSStyleSheet();
+typographyStyles$4.replaceSync(typographyCss$1);
+class AbstractHeading extends PxElement {
+  template() {
+    return `<slot></slot>`;
+  }
+  constructor(tagName) {
+    super(headingStyles$2, typographyStyles$4);
+    const $root = document.createElement(tagName);
+    $root.innerHTML = this.template();
+    this.shadowRoot.appendChild($root);
+  }
+  static get observedAttributes() {
+    return [
+      ...super.observedAttributes,
+      "variant",
+      "color",
+      "text-align",
+      "text-align--mobile",
+      "text-align--tablet",
+      "text-align--laptop",
+      "text-align--desktop",
+      "inverted"
+    ];
+  }
+  attributeChangedCallback(attrName, oldValue, newValue) {
+    if (oldValue !== newValue) {
+      switch (attrName) {
+        case "variant":
+          this.updateAttribute(attrName, oldValue, newValue, headingValues);
+          break;
+        case "color":
+          this.updateColor(oldValue, newValue, colorValues);
+          break;
+        case "text-align":
+        case "text-align--mobile":
+        case "text-align--tablet":
+        case "text-align--laptop":
+        case "text-align--desktop":
+          this.updateTextAlign(attrName, oldValue, newValue, textalignValues);
+          break;
+        default:
+          super.attributeChangedCallback(attrName, oldValue, newValue);
+          break;
+      }
+    }
+  }
+  toggleClass(oldValue, newValue) {
+    if (oldValue !== null && oldValue !== "" && oldValue !== "default") {
+      this.$el.classList.toggle(`style-${oldValue}`);
+    }
+    if (newValue !== null && newValue !== "" && newValue !== "default") {
+      this.$el.classList.toggle(`style-${newValue}`);
+    }
+  }
+  updateAttribute(attrName, oldValue, newValue, attrValue) {
+    if (!this.checkName(attrValue, newValue)) {
+      console.error(`${newValue} is not an allowed "${attrName}" value`);
+    } else {
+      this.toggleClass(oldValue, newValue);
+    }
+  }
+  updateColor(oldValue, newValue, attrValue) {
+    if (!this.checkName(attrValue, newValue)) {
+      console.error(`${newValue} is not a valid color value`);
+      return;
+    }
+    const updateColorStyle = (value) => {
+      if (value !== null && value !== "" && value !== "default") {
+        this.$el.style.setProperty(
+          `--heading-color-default`,
+          `var(--px-color-text-${value}-default)`
+        );
+        this.$el.style.setProperty(
+          `--heading-color-inverted`,
+          `var(--px-color-text-${value}-inverted)`
+        );
+      }
+    };
     updateColorStyle(oldValue);
     updateColorStyle(newValue);
   }
@@ -8562,9 +8889,9 @@ let H6 = _H6;
 if (!customElements.get("px-h6")) {
   customElements.define("px-h6", H6);
 }
-const styles$v = '#container{border:0;border-radius:var(--px-radius-main);background-color:var(--px-color-background-surface-default);box-sizing:border-box}:host([showfrom="bottom"]) #container{height:auto;margin-bottom:0;width:100%}px-button-icon{position:absolute;top:var(--px-padding-l-desktop);right:var(--px-padding-l-desktop)}dialog{background:transparent;border-radius:0;box-shadow:none;padding:0;border:0;box-sizing:border-box;width:75%}::backdrop{background:#0000004d;-webkit-backdrop-filter:saturate(180%) blur(15px);backdrop-filter:saturate(180%) blur(15px)}#content{overflow:auto}@media screen and (min-width: 1080px){#container{height:100%;padding:var(--px-padding-l-desktop)}:host([showfrom="right"]) px-button-icon{right:10.625em}:host([showfrom="right"]) #container{padding-right:10.625em;border-radius:var(--px-radius-main) 0 0 var(--px-radius-main)}:host([showfrom="left"]) px-button-icon{right:var(--px-padding-l-desktop)}:host([showfrom="left"]) #container{padding-left:10.625em;border-radius:0 var(--px-radius-main) var(--px-radius-main) 0}:host([showfrom="bottom"]) #container{box-sizing:border-box}:host([showfrom="left"])>dialog{margin-left:0;animation:dialog-fade-in-left .3s;height:100%}:host([showfrom="bottom"])>dialog{margin-bottom:0;margin-inline:0;width:100%;animation:dialog-fade-in-bottom .3s}:host([showfrom="right"])>dialog{margin-right:0;animation:dialog-fade-in-right .3s;height:100%}#content{max-height:calc(100dvh - 22.625em)}}@media only screen and (max-width: 67.563em){dialog{width:100%}:host([showfrom="left"])>dialog,:host([showfrom="right"])>dialog,:host([showfrom="bottom"])>dialog{margin-bottom:0;margin-inline:0;height:revert;animation:dialog-fade-in-bottom .3s}#container{width:100%;box-sizing:border-box;padding:var(--px-padding-m-mobile);border-radius:var(--px-radius-main) var(--px-radius-main) 0 0}px-button-icon{top:var(--px-padding-m-mobile);right:var(--px-padding-m-mobile)}#content{min-height:2.813em;max-height:50dvh}}@keyframes dialog-fade-in-right{0%{margin-right:-67.5em}to{margin-right:0}}@keyframes dialog-fade-in-left{0%{margin-left:-67.5em}to{margin-left:0}}@keyframes dialog-fade-in-bottom{0%{margin-bottom:-12.5em}to{margin-bottom:0}}';
-const styleSheet$p = new CSSStyleSheet();
-styleSheet$p.replaceSync(styles$v);
+const styles$u = '#container{border:0;border-radius:var(--px-radius-main);background-color:var(--px-color-background-surface-default);box-sizing:border-box}:host([showfrom="bottom"]) #container{height:auto;margin-bottom:0;width:100%}px-button-icon{position:absolute;top:var(--px-padding-l-desktop);right:var(--px-padding-l-desktop)}dialog{background:transparent;border-radius:0;box-shadow:none;padding:0;border:0;box-sizing:border-box;width:75%}::backdrop{background:#0000004d;-webkit-backdrop-filter:saturate(180%) blur(15px);backdrop-filter:saturate(180%) blur(15px)}#content{overflow:auto}@media screen and (min-width: 1080px){#container{height:100%;padding:var(--px-padding-l-desktop)}:host([showfrom="right"]) px-button-icon{right:10.625em}:host([showfrom="right"]) #container{padding-right:10.625em;border-radius:var(--px-radius-main) 0 0 var(--px-radius-main)}:host([showfrom="left"]) px-button-icon{right:var(--px-padding-l-desktop)}:host([showfrom="left"]) #container{padding-left:10.625em;border-radius:0 var(--px-radius-main) var(--px-radius-main) 0}:host([showfrom="bottom"]) #container{box-sizing:border-box}:host([showfrom="left"])>dialog{margin-left:0;animation:dialog-fade-in-left .3s;height:100%}:host([showfrom="bottom"])>dialog{margin-bottom:0;margin-inline:0;width:100%;animation:dialog-fade-in-bottom .3s}:host([showfrom="right"])>dialog{margin-right:0;animation:dialog-fade-in-right .3s;height:100%}#content{max-height:calc(100dvh - 22.625em)}}@media only screen and (max-width: 67.563em){dialog{width:100%}:host([showfrom="left"])>dialog,:host([showfrom="right"])>dialog,:host([showfrom="bottom"])>dialog{margin-bottom:0;margin-inline:0;height:revert;animation:dialog-fade-in-bottom .3s}#container{width:100%;box-sizing:border-box;padding:var(--px-padding-m-mobile);border-radius:var(--px-radius-main) var(--px-radius-main) 0 0}px-button-icon{top:var(--px-padding-m-mobile);right:var(--px-padding-m-mobile)}#content{min-height:2.813em;max-height:50dvh}}@keyframes dialog-fade-in-right{0%{margin-right:-67.5em}to{margin-right:0}}@keyframes dialog-fade-in-left{0%{margin-left:-67.5em}to{margin-left:0}}@keyframes dialog-fade-in-bottom{0%{margin-bottom:-12.5em}to{margin-bottom:0}}';
+const styleSheet$o = new CSSStyleSheet();
+styleSheet$o.replaceSync(styles$u);
 const HIDE_EVENT = "px.lavender.drawer.hide";
 class Drawer extends HTMLElement {
   constructor() {
@@ -8602,7 +8929,7 @@ class Drawer extends HTMLElement {
   </dialog>`;
     this.attachShadow({ mode: "open" });
     this.shadowRoot.innerHTML = this.template;
-    this.shadowRoot.adoptedStyleSheets = [styleSheet$p];
+    this.shadowRoot.adoptedStyleSheets = [styleSheet$o];
     if (!this.hasAttribute("showfrom")) {
       this.setAttribute("showfrom", "bottom");
     }
@@ -8700,7 +9027,7 @@ class Drawer extends HTMLElement {
 if (!customElements.get("px-drawer")) {
   customElements.define("px-drawer", Drawer);
 }
-const styles$u = ':host{position:relative}::slotted([slot="popover"]){position:absolute;border-radius:var(--px-radius-main, 8px);background:var(--px-color-background-container-light-default, #fff);box-shadow:0 20px 25px -5px #25252514;margin:0;padding:var(--px-padding-xs-mobile) 0;border:0;right:0;width:auto}:host([grow]) ::slotted([slot="trigger"]):after{right:0;padding-right:var(--px-padding-xs-mobile)}:host([anchoralignment="top-left"]) ::slotted([slot="popover"]){top:auto}:host([anchoralignment="top-right"]) ::slotted([slot="popover"]){top:auto}:host([anchoralignment="bottom-right"]) ::slotted([slot="popover"]){left:auto}@media screen and (max-width: 767px){::slotted([slot="trigger"]){display:block;width:100%}:host([anchoralignment="top-left"]) ::slotted([slot="popover"]){left:var(--px-padding-s-mobile)}:host([anchoralignment="top-right"]) ::slotted([slot="popover"]){left:var(--px-padding-s-mobile)}}@media screen and (min-width: 768px){::slotted([slot="popover"]){padding-block:var(--px-padding-s-desktop);right:auto;width:auto}}';
+const styles$t = ':host{position:relative}::slotted([slot="popover"]){position:absolute;border-radius:var(--px-radius-main, 8px);background:var(--px-color-background-container-light-default, #fff);box-shadow:0 20px 25px -5px #25252514;margin:0;padding:var(--px-padding-xs-mobile) 0;border:0;right:0;width:auto}:host([grow]) ::slotted([slot="trigger"]):after{right:0;padding-right:var(--px-padding-xs-mobile)}:host([anchoralignment="top-left"]) ::slotted([slot="popover"]){top:auto}:host([anchoralignment="top-right"]) ::slotted([slot="popover"]){top:auto}:host([anchoralignment="bottom-right"]) ::slotted([slot="popover"]){left:auto}@media screen and (max-width: 767px){::slotted([slot="trigger"]){display:block;width:100%}:host([anchoralignment="top-left"]) ::slotted([slot="popover"]){left:var(--px-padding-s-mobile)}:host([anchoralignment="top-right"]) ::slotted([slot="popover"]){left:var(--px-padding-s-mobile)}}@media screen and (min-width: 768px){::slotted([slot="popover"]){padding-block:var(--px-padding-s-desktop);right:auto;width:auto}}';
 const anchorAlignmentValues = [
   "top-left",
   "top-right",
@@ -8742,7 +9069,7 @@ function anchorPolyfill($trigger, $popoverElement, anchorAlignment = "bottom-lef
   });
 }
 const stylesheet$8 = new CSSStyleSheet();
-stylesheet$8.replaceSync(styles$u);
+stylesheet$8.replaceSync(styles$t);
 const defaultAnchorAlignment = "bottom-left";
 class Dropdown extends WithExtraAttributes {
   constructor() {
@@ -9597,251 +9924,43 @@ const _Link = class _Link extends PxElement {
       return;
     }
     if (newValue !== null && newValue !== "") {
-      this.$el.setAttribute(attrName, newValue);
-    }
-  }
-  updateTypography(attrName, oldValue, newValue, attrValue) {
-    if (oldValue !== null && oldValue !== "" && oldValue !== "default") {
-      this.$el.classList.toggle(`${attrName}-${oldValue}`);
-    }
-    if (newValue !== null && newValue !== "" && newValue !== "default") {
-      this.$el.classList.toggle(`${attrName}-${newValue}`);
-    }
-    if (!this.checkName(attrValue, newValue)) {
-      console.error(`Bad ${attrName} value: ${newValue}`);
-    }
-  }
-  updateExtended(attributeName, newValue) {
-    if (newValue === null) {
-      this.$el.style.setProperty(`--button-${attributeName}`, "");
-    } else {
-      this.$el.style.setProperty(`--button-${attributeName}`, "100%");
-    }
-  }
-  get $before() {
-    return this.querySelector('[slot="before"]');
-  }
-  get $after() {
-    return this.querySelector('[slot="after"]');
-  }
-  get $iconNotBeforeAfter() {
-    return this.querySelector(
-      'px-icon:not([slot="before"], [slot="after"])'
-    );
-  }
-  get disabled() {
-    return this.getAttribute("disabled");
-  }
-  set disabled(value) {
-    this.setAttribute("disabled", value);
-  }
-  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 shapeMobile() {
-    return this.getAttribute("shape--mobile");
-  }
-  set shapeMobile(value) {
-    this.setAttribute("shape--mobile", value);
-  }
-  get shapeTablet() {
-    return this.getAttribute("shape--tablet");
-  }
-  set shapeTablet(value) {
-    this.setAttribute("shape--tablet", value);
-  }
-  get shapeLaptop() {
-    return this.getAttribute("shape--laptop");
-  }
-  set shapeLaptop(value) {
-    this.setAttribute("shape--laptop", value);
-  }
-  get shapeDesktop() {
-    return this.getAttribute("shape--desktop");
-  }
-  set shapeDesktop(value) {
-    this.setAttribute("shape--desktop", value);
-  }
-  get extended() {
-    return this.getAttribute("extended");
-  }
-  set extended(value) {
-    this.setAttribute("extended", value);
-  }
-  get extendedMobile() {
-    return this.getAttribute("extended--mobile");
-  }
-  set extendedMobile(value) {
-    this.setAttribute("extended--mobile", value);
-  }
-  get extendedTablet() {
-    return this.getAttribute("extended--tablet");
-  }
-  set extendedTablet(value) {
-    this.setAttribute("extended--tablet", value);
-  }
-  get extendedLaptop() {
-    return this.getAttribute("extended--laptop");
-  }
-  set extendedLaptop(value) {
-    this.setAttribute("extended--laptop", value);
-  }
-  get extendedDesktop() {
-    return this.getAttribute("extended--desktop");
-  }
-  set extendedDesktop(value) {
-    this.setAttribute("extended--desktop", value);
-  }
-  get inverted() {
-    return this.getAttribute("inverted");
-  }
-  set inverted(value) {
-    this.setAttribute("inverted", value);
-  }
-  get fontsize() {
-    return this.getAttribute("font-size");
-  }
-  set fontsize(value) {
-    this.setAttribute("font-size", value);
-  }
-  get color() {
-    return this.getAttribute("color");
-  }
-  set color(value) {
-    this.setAttribute("color", value);
-  }
-  get fontweight() {
-    return this.getAttribute("font-weight");
-  }
-  set fontweight(value) {
-    this.setAttribute("font-weight", value);
-  }
-  get title() {
-    return this.getAttribute("title");
-  }
-  set title(value) {
-    if (value) {
-      this.setAttribute("title", value);
-    } else {
-      this.removeAttribute("title");
-    }
-  }
-};
-_Link.nativeName = "a";
-let Link = _Link;
-if (!customElements.get("px-a")) {
-  customElements.define("px-a", Link);
-}
-const paragraphCss = "p,::slotted(p){font-family:var(--px-font-family);color:var(--px-color-text-neutral-default);font-size:var(--px-text-size-body-m-mobile);font-weight:var(--px-font-weight-body);line-height:var(--px-line-height-ratio-l);margin:0}.text-align-left{text-align:left}.text-align-center{text-align:center}.text-align-right{text-align:right}:host([inverted]) p,:host([inverted]) ::slotted(p){color:var(--px-color-text-neutral-inverted)}@media only screen and (max-width: 768px){.text-align-left--mobile{text-align:left}.text-align-center--mobile{text-align:center}.text-align-right--mobile{text-align:right}}@media only screen and (min-width: 768px){p,::slotted(p){font-size:var(--px-text-size-body-m-desktop)}.text-align-left--tablet{text-align:left}.text-align-center--tablet{text-align:center}.text-align-right--tablet{text-align:right}}@media only screen and (min-width: 1025px){p,::slotted(p){font-size:var(--px-text-size-body-m-desktop)}.text-align-left--laptop{text-align:left}.text-align-center--laptop{text-align:center}.text-align-right--laptop{text-align:right}}";
-const paragraphStyles$1 = new CSSStyleSheet();
-const typographyStyles$2 = new CSSStyleSheet();
-const headingStyles$1 = new CSSStyleSheet();
-paragraphStyles$1.replaceSync(paragraphCss);
-typographyStyles$2.replaceSync(typographyCss$1);
-headingStyles$1.replaceSync(headingCss);
-const _Paragraph = class _Paragraph extends PxElement {
-  constructor() {
-    super(typographyStyles$2, headingStyles$1, paragraphStyles$1);
-    this.template = () => `<p><slot></slot></p>`;
-    this.shadowRoot.innerHTML = this.template();
-  }
-  static get observedAttributes() {
-    return [
-      ...super.observedAttributes,
-      "variant",
-      "color",
-      "font-size",
-      "font-weight",
-      "text-align",
-      "text-align--mobile",
-      "text-align--tablet",
-      "text-align--laptop",
-      "inverted",
-      "disabled"
-    ];
-  }
-  attributeChangedCallback(attrName, oldValue, newValue) {
-    if (oldValue !== newValue) {
-      switch (attrName) {
-        case "variant":
-          this.updateVariant(attrName, oldValue, newValue, headingValues);
-          break;
-        case "color":
-          this.updateTypography(attrName, oldValue, newValue, colorValues);
-          break;
-        case "font-size":
-          this.updateTypography(attrName, oldValue, newValue, fontsizeValues);
-          break;
-        case "font-weight":
-          this.updateTypography(attrName, oldValue, newValue, fontweightValues);
-          break;
-        case "text-align":
-        case "text-align--mobile":
-        case "text-align--tablet":
-        case "text-align--laptop":
-          this.updateTypography(attrName, oldValue, newValue, textalignValues);
-          break;
-        case "disabled":
-          this.color = "state-disabled";
-          break;
-        default:
-          super.attributeChangedCallback(attrName, oldValue, newValue);
-          break;
-      }
-    }
-  }
-  toggleClass(oldValue, newValue) {
-    if (oldValue !== null && oldValue !== "" && oldValue !== "default") {
-      this.$el.classList.toggle(`style-${oldValue}`);
-    }
-    if (newValue !== null && newValue !== "" && newValue !== "default") {
-      this.$el.classList.toggle(`style-${newValue}`);
-    }
-  }
-  updateVariant(attrName, oldValue, newValue, attrValue) {
-    if (!this.checkName(attrValue, newValue)) {
-      console.error(`${newValue} is not a valid value for ${attrName}`);
-    } else {
-      this.toggleClass(oldValue, newValue);
-    }
-  }
-  updateTypography(attrName, oldValue, newValue, attrValue) {
-    if (!this.checkName(attrValue, newValue)) {
-      console.error(`${newValue} is not an allowed ${attrName} value`);
-    } else {
-      const splitResult = this.splitAttrNameFromBreakpoint(attrName);
-      const breakpoint = splitResult.breakpoint;
-      if (oldValue !== null && oldValue !== "") {
-        this.$el.classList.toggle(
-          `${splitResult.attrName}-${oldValue}${breakpoint}`
-        );
-      }
-      if (newValue !== null && newValue !== "") {
-        this.$el.classList.toggle(
-          `${splitResult.attrName}-${newValue}${breakpoint}`
-        );
-      }
+      this.$el.setAttribute(attrName, newValue);
     }
   }
-  splitAttrNameFromBreakpoint(attrName) {
-    let breakpoint = "";
-    if (["--mobile", "--tablet", "--laptop"].some(
-      (suffix) => attrName.includes(suffix)
-    )) {
-      const attrNameSplit = attrName.split("--");
-      attrName = attrNameSplit[0];
-      breakpoint = `--${attrNameSplit[1]}`;
+  updateTypography(attrName, oldValue, newValue, attrValue) {
+    if (oldValue !== null && oldValue !== "" && oldValue !== "default") {
+      this.$el.classList.toggle(`${attrName}-${oldValue}`);
     }
-    return { attrName, breakpoint };
+    if (newValue !== null && newValue !== "" && newValue !== "default") {
+      this.$el.classList.toggle(`${attrName}-${newValue}`);
+    }
+    if (!this.checkName(attrValue, newValue)) {
+      console.error(`Bad ${attrName} value: ${newValue}`);
+    }
+  }
+  updateExtended(attributeName, newValue) {
+    if (newValue === null) {
+      this.$el.style.setProperty(`--button-${attributeName}`, "");
+    } else {
+      this.$el.style.setProperty(`--button-${attributeName}`, "100%");
+    }
+  }
+  get $before() {
+    return this.querySelector('[slot="before"]');
+  }
+  get $after() {
+    return this.querySelector('[slot="after"]');
+  }
+  get $iconNotBeforeAfter() {
+    return this.querySelector(
+      'px-icon:not([slot="before"], [slot="after"])'
+    );
+  }
+  get disabled() {
+    return this.getAttribute("disabled");
+  }
+  set disabled(value) {
+    this.setAttribute("disabled", value);
   }
   get variant() {
     return this.getAttribute("variant");
@@ -9849,515 +9968,419 @@ const _Paragraph = class _Paragraph extends PxElement {
   set variant(value) {
     this.setAttribute("variant", value);
   }
-  get color() {
-    return this.getAttribute("color");
-  }
-  set color(value) {
-    this.setAttribute("color", value);
-  }
-  get fontSize() {
-    return this.getAttribute("font-size");
+  get shape() {
+    return this.getAttribute("shape");
   }
-  set fontSize(value) {
-    this.setAttribute("font-size", value);
+  set shape(value) {
+    this.setAttribute("shape", value);
   }
-  get fontWeight() {
-    return this.getAttribute("font-weight");
+  get shapeMobile() {
+    return this.getAttribute("shape--mobile");
   }
-  set fontWeight(value) {
-    this.setAttribute("font-weight", value);
+  set shapeMobile(value) {
+    this.setAttribute("shape--mobile", value);
   }
-  get textAlign() {
-    return this.getAttribute("text-align");
+  get shapeTablet() {
+    return this.getAttribute("shape--tablet");
   }
-  set textAlign(value) {
-    this.setAttribute("text-align", value);
+  set shapeTablet(value) {
+    this.setAttribute("shape--tablet", value);
   }
-  get textAlignMobile() {
-    return this.getAttribute("text-align--mobile");
+  get shapeLaptop() {
+    return this.getAttribute("shape--laptop");
   }
-  set textAlignMobile(value) {
-    this.setAttribute("text-align--mobile", value);
+  set shapeLaptop(value) {
+    this.setAttribute("shape--laptop", value);
   }
-  get textAlignTablet() {
-    return this.getAttribute("text-align--tablet");
+  get shapeDesktop() {
+    return this.getAttribute("shape--desktop");
   }
-  set textAlignTablet(value) {
-    this.setAttribute("text-align--tablet", value);
+  set shapeDesktop(value) {
+    this.setAttribute("shape--desktop", value);
   }
-  get textAlignLaptop() {
-    return this.getAttribute("text-align--laptop");
+  get extended() {
+    return this.getAttribute("extended");
   }
-  set textAlignLaptop(value) {
-    this.setAttribute("text-align--laptop", value);
+  set extended(value) {
+    this.setAttribute("extended", value);
   }
-  get inverted() {
-    return this.getAttribute("inverted");
+  get extendedMobile() {
+    return this.getAttribute("extended--mobile");
   }
-  set inverted(value) {
-    this.setAttribute("inverted", value);
+  set extendedMobile(value) {
+    this.setAttribute("extended--mobile", value);
   }
-  get disabled() {
-    return this.getAttribute("disabled");
+  get extendedTablet() {
+    return this.getAttribute("extended--tablet");
   }
-  set disabled(value) {
-    this.setAttribute("disabled", value);
+  set extendedTablet(value) {
+    this.setAttribute("extended--tablet", value);
   }
-};
-_Paragraph.nativeName = "p";
-let Paragraph = _Paragraph;
-if (!customElements.get("px-p")) {
-  customElements.define("px-p", Paragraph);
-}
-const _FooterSitemap = class _FooterSitemap extends PxElement {
-  constructor() {
-    super();
-    this.template = () => `<div class="footer-sitemap">
-      <px-grid grid-cols="4" grid-cols--mobile="1" role="list" gap--mobile="none">
-          <slot></slot>
-      </px-grid>
-    </div>`;
-    this.shadowRoot.innerHTML = this.template();
+  get extendedLaptop() {
+    return this.getAttribute("extended--laptop");
   }
-  static get observedAttributes() {
-    return [...super.observedAttributes, "inverted"];
+  set extendedLaptop(value) {
+    this.setAttribute("extended--laptop", value);
   }
-  attributeChangedCallback(attrName, oldValue, newValue) {
-    if (oldValue !== newValue) {
-      switch (attrName) {
-        case "inverted":
-          for (let i = 0; i < this.$children.length; i++) {
-            if (!this.$children[i].hasAttribute("inverted")) {
-              this.$children[i].toggleAttribute("inverted");
-            }
-          }
-          break;
-        default:
-          super.attributeChangedCallback(attrName, oldValue, newValue);
-          break;
-      }
-    }
+  get extendedDesktop() {
+    return this.getAttribute("extended--desktop");
   }
-  get $children() {
-    return this.querySelectorAll("px-footer-sitemap > *");
+  set extendedDesktop(value) {
+    this.setAttribute("extended--desktop", value);
   }
   get inverted() {
-    return this.hasAttribute("inverted");
+    return this.getAttribute("inverted");
   }
   set inverted(value) {
-    if (value) {
-      this.setAttribute("inverted", "");
-    } else {
-      this.removeAttribute("inverted");
-    }
-  }
-};
-_FooterSitemap.nativeName = "div";
-let FooterSitemap = _FooterSitemap;
-if (!customElements.get("px-footer-sitemap")) {
-  customElements.define("px-footer-sitemap", FooterSitemap);
-}
-const styles$t = ":host,:host>*{display:block;box-sizing:border-box}::slotted(ul){margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:10px}::slotted(ul.link-list-img){display:flex;flex-wrap:wrap;flex-direction:row;gap:20px}";
-const styleSheet$o = new CSSStyleSheet();
-styleSheet$o.replaceSync(styles$t);
-const _FooterSitemapItem = class _FooterSitemapItem extends PxElement {
-  constructor() {
-    super(styleSheet$o);
-    this.templateMobile = () => `<div role="listitem">
-  <px-accordion ${this.inverted ? "inverted" : ""}>
-    <span slot="title"><slot name="links-list-title"></slot></span>
-    <span slot="content">
-      <slot name="links-list"></slot>
-    </span>
-  </px-accordion>
-  </div>`;
-    this.templateDesktop = () => `<div role="listitem">
-  <px-vstack gap="default">
-    <px-p variant="title-l" ${this.inverted ? "inverted" : ""}>
-      <slot name="links-list-title"></slot>
-    </px-p>
-    <slot name="links-list"></slot>
-  </px-vstack>
-  </div>`;
-    this.throttledLoadTemplate = throttle(this.loadTemplate.bind(this), 50);
-    this.loadTemplate();
-  }
-  static get observedAttributes() {
-    return [...super.observedAttributes, "inverted"];
+    this.setAttribute("inverted", value);
   }
-  connectedCallback() {
-    super.connectedCallback();
-    this.loadTemplate();
-    window.addEventListener("resize", this.throttledLoadTemplate);
-    if (!this.$ul) {
-      console.error(
-        "The footer sitemap item must contain a <ul> element with links."
-      );
-    } else {
-      if (this.$ul.querySelector("px-img")) {
-        this.$ul.classList.add("link-list-img");
-      }
-    }
+  get fontsize() {
+    return this.getAttribute("font-size");
   }
-  disconnectedCallback() {
-    window.removeEventListener("resize", this.throttledLoadTemplate);
+  set fontsize(value) {
+    this.setAttribute("font-size", value);
   }
-  loadTemplate() {
-    const previousSize = this.lastSize;
-    const currentSize = window.innerWidth < 768 ? "mobile" : "desktop";
-    if (previousSize !== currentSize) {
-      if (currentSize === "mobile") {
-        this.shadowRoot.innerHTML = this.templateMobile();
-      } else {
-        this.shadowRoot.innerHTML = this.templateDesktop();
-      }
-      this.lastSize = currentSize;
-    }
+  get color() {
+    return this.getAttribute("color");
   }
-  attributeChangedCallback(attrName, oldValue, newValue) {
-    if (oldValue !== newValue) {
-      switch (attrName) {
-        case "inverted":
-          for (let i = 0; i < this.$children.length; i++) {
-            if (!this.$children[i].hasAttribute("inverted")) {
-              this.$children[i].toggleAttribute("inverted");
-            }
-          }
-          this.$ul.querySelectorAll("px-a").forEach((link) => {
-            link.toggleAttribute("inverted");
-          });
-          break;
-        default:
-          super.attributeChangedCallback(attrName, oldValue, newValue);
-          break;
-      }
-    }
+  set color(value) {
+    this.setAttribute("color", value);
   }
-  get $ul() {
-    return this.querySelector("ul");
+  get fontweight() {
+    return this.getAttribute("font-weight");
   }
-  get $children() {
-    return this.querySelectorAll("px-footer-sitemap-item > *");
+  set fontweight(value) {
+    this.setAttribute("font-weight", value);
   }
-  get inverted() {
-    return this.hasAttribute("inverted");
+  get title() {
+    return this.getAttribute("title");
   }
-  set inverted(value) {
+  set title(value) {
     if (value) {
-      this.setAttribute("inverted", "");
+      this.setAttribute("title", value);
     } else {
-      this.removeAttribute("inverted");
+      this.removeAttribute("title");
     }
   }
 };
-_FooterSitemapItem.nativeName = "div";
-let FooterSitemapItem = _FooterSitemapItem;
-if (!customElements.get("px-footer-sitemap-item")) {
-  customElements.define("px-footer-sitemap-item", FooterSitemapItem);
+_Link.nativeName = "a";
+let Link = _Link;
+if (!customElements.get("px-a")) {
+  customElements.define("px-a", Link);
 }
-const styles$s = ':host{display:block}:host,:host *{box-sizing:border-box}.content-wrapper{margin-inline:var(--px-padding-s-mobile);max-width:var(--px-content-wrapper-max-width-desktop)}@media only screen and (min-width: 77em){.content-wrapper{margin-inline:auto}}.overlapped{margin-bottom:calc(var(--px-overlapped-mobile) * -1)}::slotted([slot="overlap"]){margin-top:var(--px-overlapped-mobile)}@media only screen and (min-width: 48em){.overlapped{margin-bottom:calc(var(--px-overlapped-desktop) * -1)}::slotted([slot="overlap"]){margin-top:var(--px-overlapped-desktop)}}@media only screen and (min-width: 64.0625em){.overlapped{margin-bottom:calc(var(--px-overlapped-desktop) * -1)}::slotted([slot="overlap"]){margin-top:var(--px-overlapped-desktop)}}';
-const styleSheet$n = new CSSStyleSheet();
-styleSheet$n.replaceSync(styles$s);
-class Section extends HTMLElement {
+const paragraphCss = "p,::slotted(p){font-family:var(--px-font-family);color:var(--px-color-text-neutral-default);font-size:var(--px-text-size-body-m-mobile);font-weight:var(--px-font-weight-body);line-height:var(--px-line-height-ratio-l);margin:0}.text-align-left{text-align:left}.text-align-center{text-align:center}.text-align-right{text-align:right}:host([inverted]) p,:host([inverted]) ::slotted(p){color:var(--px-color-text-neutral-inverted)}@media only screen and (max-width: 768px){.text-align-left--mobile{text-align:left}.text-align-center--mobile{text-align:center}.text-align-right--mobile{text-align:right}}@media only screen and (min-width: 768px){p,::slotted(p){font-size:var(--px-text-size-body-m-desktop)}.text-align-left--tablet{text-align:left}.text-align-center--tablet{text-align:center}.text-align-right--tablet{text-align:right}}@media only screen and (min-width: 1025px){p,::slotted(p){font-size:var(--px-text-size-body-m-desktop)}.text-align-left--laptop{text-align:left}.text-align-center--laptop{text-align:center}.text-align-right--laptop{text-align:right}}";
+const paragraphStyles$1 = new CSSStyleSheet();
+const typographyStyles$2 = new CSSStyleSheet();
+const headingStyles$1 = new CSSStyleSheet();
+paragraphStyles$1.replaceSync(paragraphCss);
+typographyStyles$2.replaceSync(typographyCss$1);
+headingStyles$1.replaceSync(headingCss);
+const _Paragraph = class _Paragraph extends PxElement {
   constructor() {
-    super();
-    this.template = () => `
-    <px-container border-radius="none" padding-inline="none" background-color="${this.backgroundColor}">
-      <div class="content-wrapper ${this.$slotOverlap ? "overlapped" : ""}">
-        <px-vstack gap="heading-to-content">
-          <slot name="heading"></slot>
-          <px-vstack gap="none">
-            <slot></slot>
-          </px-vstack>
-        </px-vstack>
-      </div>
-    </px-container>
-    <div class="content-wrapper">
-      <slot name="overlap"></slot>
-    </div>
-  `;
-    this.attachShadow({ mode: "open" });
+    super(typographyStyles$2, headingStyles$1, paragraphStyles$1);
+    this.template = () => `<p><slot></slot></p>`;
     this.shadowRoot.innerHTML = this.template();
-    this.shadowRoot.adoptedStyleSheets = [styleSheet$n];
-  }
-  connectedCallback() {
-    const headingSlot = this.querySelector('[slot="heading"]');
-    if (!this.paddingBlock && !this.paddingTop && !this.paddingBottom && !this.paddingBlockMobile && !this.paddingTopMobile && !this.paddingBottomMobile && !this.paddingBlockTablet && !this.paddingTopTablet && !this.paddingBottomTablet && !this.paddingBlockLaptop && !this.paddingTopLaptop && !this.paddingBottomLaptop) {
-      this.$container.paddingBlock = "none";
-    }
-    if (!headingSlot) {
-      this.shadowRoot.querySelector("px-vstack").setAttribute("gap", "none");
-    }
   }
   static get observedAttributes() {
     return [
-      "background-color",
-      "background-gradient",
-      "background-image",
-      "background-image--mobile",
-      "background-image--tablet",
-      "background-image--laptop",
-      "background-size",
-      "background-position",
-      "padding-block",
-      "padding-top",
-      "padding-bottom",
-      "padding-block--mobile",
-      "padding-top--mobile",
-      "padding-bottom--mobile",
-      "padding-block--tablet",
-      "padding-top--tablet",
-      "padding-bottom--tablet",
-      "padding-block--laptop",
-      "padding-top--laptop",
-      "padding-bottom--laptop",
-      "border",
-      "border-side",
-      "border-side--mobile",
-      "border-side--tablet",
-      "border-side--laptop"
+      ...super.observedAttributes,
+      "variant",
+      "color",
+      "font-size",
+      "font-weight",
+      "text-align",
+      "text-align--mobile",
+      "text-align--tablet",
+      "text-align--laptop",
+      "inverted",
+      "disabled"
     ];
   }
-  get $container() {
-    return this.shadowRoot.querySelector("px-container");
-  }
-  attributeChangedCallback(name, oldValue, newValue) {
+  attributeChangedCallback(attrName, oldValue, newValue) {
     if (oldValue !== newValue) {
-      switch (name) {
-        case "background-color":
-          this.$container.backgroundColor = backgroundColorValues.indexOf(newValue) > 0 ? newValue : "none";
-          break;
-        case "background-gradient":
-          this.$container.gradient = this.gradient;
-          break;
-        case "background-image":
-          this.$container.backgroundImage = newValue;
-          break;
-        case "background-image--mobile":
-          this.$container.backgroundImageMobile = newValue;
-          break;
-        case "background-image--tablet":
-          this.$container.backgroundImageTablet = newValue;
-          break;
-        case "background-image--laptop":
-          this.$container.backgroundImageLaptop = newValue;
-          break;
-        case "background-size":
-          this.$container.backgroundSize = newValue;
-          break;
-        case "background-position":
-          this.$container.backgroundPosition = newValue;
-          break;
-        case "padding-block":
-          this.$container.paddingBlock = newValue;
-          break;
-        case "padding-top":
-          this.$container.paddingTop = newValue;
-          break;
-        case "padding-bottom":
-          this.$container.paddingBottom = newValue;
-          break;
-        case "padding-block--mobile":
-          this.$container.paddingBlockMobile = newValue;
-          break;
-        case "padding-top--mobile":
-          this.$container.paddingTopMobile = newValue;
-          break;
-        case "padding-bottom--mobile":
-          this.$container.paddingBottomMobile = newValue;
-          break;
-        case "padding-block--tablet":
-          this.$container.paddingBlockTablet = newValue;
-          break;
-        case "padding-top--tablet":
-          this.$container.paddingTopTablet = newValue;
-          break;
-        case "padding-bottom--tablet":
-          this.$container.paddingBottomTablet = newValue;
-          break;
-        case "padding-block--laptop":
-          this.$container.paddingBlockLaptop = newValue;
-          break;
-        case "padding-top--laptop":
-          this.$container.paddingTopLaptop = newValue;
+      switch (attrName) {
+        case "variant":
+          this.updateVariant(attrName, oldValue, newValue, headingValues);
           break;
-        case "padding-bottom--laptop":
-          this.$container.paddingBottomLaptop = newValue;
+        case "color":
+          this.updateTypography(attrName, oldValue, newValue, colorValues);
           break;
-        case "border":
-          this.$container.border = newValue;
+        case "font-size":
+          this.updateTypography(attrName, oldValue, newValue, fontsizeValues);
           break;
-        case "border-side":
-          this.$container.borderSide = newValue;
+        case "font-weight":
+          this.updateTypography(attrName, oldValue, newValue, fontweightValues);
           break;
-        case "border-side--mobile":
-          this.$container.borderSideMobile = newValue;
+        case "text-align":
+        case "text-align--mobile":
+        case "text-align--tablet":
+        case "text-align--laptop":
+          this.updateTypography(attrName, oldValue, newValue, textalignValues);
           break;
-        case "border-side--tablet":
-          this.$container.borderSideTablet = newValue;
+        case "disabled":
+          this.color = "state-disabled";
           break;
-        case "border-side--laptop":
-          this.$container.borderSideLaptop = newValue;
+        default:
+          super.attributeChangedCallback(attrName, oldValue, newValue);
           break;
       }
     }
   }
-  get $slotOverlap() {
-    return this.querySelector('[slot="overlap"]');
-  }
-  get backgroundColor() {
-    return this.getAttribute("background-color") || "none";
-  }
-  set backgroundColor(value) {
-    this.setAttribute("background-color", value);
-  }
-  get gradient() {
-    return this.getAttribute("background-gradient");
-  }
-  set gradient(value) {
-    this.setAttribute("background-gradient", value);
-  }
-  get backgroundImage() {
-    return this.getAttribute("background-image");
-  }
-  set backgroundImage(value) {
-    this.setAttribute("background-image", value);
-  }
-  get backgroundImageMobile() {
-    return this.getAttribute("background-image--mobile");
-  }
-  set backgroundImageMobile(value) {
-    this.setAttribute("background-image--mobile", value);
-  }
-  get backgroundImageTablet() {
-    return this.getAttribute("background-image--tablet");
-  }
-  set backgroundImageTablet(value) {
-    this.setAttribute("background-image--tablet", value);
-  }
-  get backgroundImageLaptop() {
-    return this.getAttribute("background-image--laptop");
+  toggleClass(oldValue, newValue) {
+    if (oldValue !== null && oldValue !== "" && oldValue !== "default") {
+      this.$el.classList.toggle(`style-${oldValue}`);
+    }
+    if (newValue !== null && newValue !== "" && newValue !== "default") {
+      this.$el.classList.toggle(`style-${newValue}`);
+    }
   }
-  set backgroundImageLaptop(value) {
-    this.setAttribute("background-image--laptop", value);
+  updateVariant(attrName, oldValue, newValue, attrValue) {
+    if (!this.checkName(attrValue, newValue)) {
+      console.error(`${newValue} is not a valid value for ${attrName}`);
+    } else {
+      this.toggleClass(oldValue, newValue);
+    }
   }
-  get backgroundSize() {
-    return this.getAttribute("background-size");
+  updateTypography(attrName, oldValue, newValue, attrValue) {
+    if (!this.checkName(attrValue, newValue)) {
+      console.error(`${newValue} is not an allowed ${attrName} value`);
+    } else {
+      const splitResult = this.splitAttrNameFromBreakpoint(attrName);
+      const breakpoint = splitResult.breakpoint;
+      if (oldValue !== null && oldValue !== "") {
+        this.$el.classList.toggle(
+          `${splitResult.attrName}-${oldValue}${breakpoint}`
+        );
+      }
+      if (newValue !== null && newValue !== "") {
+        this.$el.classList.toggle(
+          `${splitResult.attrName}-${newValue}${breakpoint}`
+        );
+      }
+    }
   }
-  set backgroundSize(value) {
-    this.setAttribute("background-size", value);
+  splitAttrNameFromBreakpoint(attrName) {
+    let breakpoint = "";
+    if (["--mobile", "--tablet", "--laptop"].some(
+      (suffix) => attrName.includes(suffix)
+    )) {
+      const attrNameSplit = attrName.split("--");
+      attrName = attrNameSplit[0];
+      breakpoint = `--${attrNameSplit[1]}`;
+    }
+    return { attrName, breakpoint };
   }
-  get backgroundPosition() {
-    return this.getAttribute("background-position");
+  get variant() {
+    return this.getAttribute("variant");
   }
-  set backgroundPosition(value) {
-    this.setAttribute("background-position", value);
+  set variant(value) {
+    this.setAttribute("variant", value);
   }
-  get paddingBlock() {
-    return this.getAttribute("padding-block");
+  get color() {
+    return this.getAttribute("color");
   }
-  set paddingBlock(value) {
-    this.setAttribute("padding-block", value);
+  set color(value) {
+    this.setAttribute("color", value);
   }
-  get paddingTop() {
-    return this.getAttribute("padding-top");
+  get fontSize() {
+    return this.getAttribute("font-size");
   }
-  set paddingTop(value) {
-    this.setAttribute("padding-top", value);
+  set fontSize(value) {
+    this.setAttribute("font-size", value);
   }
-  get paddingBottom() {
-    return this.getAttribute("padding-bottom");
+  get fontWeight() {
+    return this.getAttribute("font-weight");
   }
-  set paddingBottom(value) {
-    this.setAttribute("padding-bottom", value);
+  set fontWeight(value) {
+    this.setAttribute("font-weight", value);
   }
-  get paddingBlockMobile() {
-    return this.getAttribute("padding-block--mobile");
+  get textAlign() {
+    return this.getAttribute("text-align");
   }
-  set paddingBlockMobile(value) {
-    this.setAttribute("padding-block--mobile", value);
+  set textAlign(value) {
+    this.setAttribute("text-align", value);
   }
-  get paddingTopMobile() {
-    return this.getAttribute("padding-top--mobile");
+  get textAlignMobile() {
+    return this.getAttribute("text-align--mobile");
   }
-  set paddingTopMobile(value) {
-    this.setAttribute("padding-top--mobile", value);
+  set textAlignMobile(value) {
+    this.setAttribute("text-align--mobile", value);
   }
-  get paddingBottomMobile() {
-    return this.getAttribute("padding-bottom--mobile");
+  get textAlignTablet() {
+    return this.getAttribute("text-align--tablet");
   }
-  set paddingBottomMobile(value) {
-    this.setAttribute("padding-bottom--mobile", value);
+  set textAlignTablet(value) {
+    this.setAttribute("text-align--tablet", value);
   }
-  get paddingBlockTablet() {
-    return this.getAttribute("padding-block--tablet");
+  get textAlignLaptop() {
+    return this.getAttribute("text-align--laptop");
   }
-  set paddingBlockTablet(value) {
-    this.setAttribute("padding-block--tablet", value);
+  set textAlignLaptop(value) {
+    this.setAttribute("text-align--laptop", value);
   }
-  get paddingTopTablet() {
-    return this.getAttribute("padding-top--tablet");
+  get inverted() {
+    return this.getAttribute("inverted");
   }
-  set paddingTopTablet(value) {
-    this.setAttribute("padding-top--tablet", value);
+  set inverted(value) {
+    this.setAttribute("inverted", value);
   }
-  get paddingBottomTablet() {
-    return this.getAttribute("padding-bottom--tablet");
+  get disabled() {
+    return this.getAttribute("disabled");
   }
-  set paddingBottomTablet(value) {
-    this.setAttribute("padding-bottom--tablet", value);
+  set disabled(value) {
+    this.setAttribute("disabled", value);
   }
-  get paddingBlockLaptop() {
-    return this.getAttribute("padding-block--laptop");
+};
+_Paragraph.nativeName = "p";
+let Paragraph = _Paragraph;
+if (!customElements.get("px-p")) {
+  customElements.define("px-p", Paragraph);
+}
+const _FooterSitemap = class _FooterSitemap extends PxElement {
+  constructor() {
+    super();
+    this.template = () => `<div class="footer-sitemap">
+      <px-grid grid-cols="4" grid-cols--mobile="1" role="list" gap--mobile="none">
+          <slot></slot>
+      </px-grid>
+    </div>`;
+    this.shadowRoot.innerHTML = this.template();
   }
-  set paddingBlockLaptop(value) {
-    this.setAttribute("padding-block--laptop", value);
+  static get observedAttributes() {
+    return [...super.observedAttributes, "inverted"];
   }
-  get paddingTopLaptop() {
-    return this.getAttribute("padding-top--laptop");
+  attributeChangedCallback(attrName, oldValue, newValue) {
+    if (oldValue !== newValue) {
+      switch (attrName) {
+        case "inverted":
+          for (let i = 0; i < this.$children.length; i++) {
+            if (!this.$children[i].hasAttribute("inverted")) {
+              this.$children[i].toggleAttribute("inverted");
+            }
+          }
+          break;
+        default:
+          super.attributeChangedCallback(attrName, oldValue, newValue);
+          break;
+      }
+    }
   }
-  set paddingTopLaptop(value) {
-    this.setAttribute("padding-top--laptop", value);
+  get $children() {
+    return this.querySelectorAll("px-footer-sitemap > *");
   }
-  get paddingBottomLaptop() {
-    return this.getAttribute("padding-bottom--laptop");
+  get inverted() {
+    return this.hasAttribute("inverted");
   }
-  set paddingBottomLaptop(value) {
-    this.setAttribute("padding-bottom--laptop", value);
+  set inverted(value) {
+    if (value) {
+      this.setAttribute("inverted", "");
+    } else {
+      this.removeAttribute("inverted");
+    }
   }
-  get border() {
-    return this.getAttribute("border");
+};
+_FooterSitemap.nativeName = "div";
+let FooterSitemap = _FooterSitemap;
+if (!customElements.get("px-footer-sitemap")) {
+  customElements.define("px-footer-sitemap", FooterSitemap);
+}
+const styles$s = ":host,:host>*{display:block;box-sizing:border-box}::slotted(ul){margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:10px}::slotted(ul.link-list-img){display:flex;flex-wrap:wrap;flex-direction:row;gap:20px}";
+const styleSheet$n = new CSSStyleSheet();
+styleSheet$n.replaceSync(styles$s);
+const _FooterSitemapItem = class _FooterSitemapItem extends PxElement {
+  constructor() {
+    super(styleSheet$n);
+    this.templateMobile = () => `<div role="listitem">
+  <px-accordion ${this.inverted ? "inverted" : ""}>
+    <span slot="title"><slot name="links-list-title"></slot></span>
+    <span slot="content">
+      <slot name="links-list"></slot>
+    </span>
+  </px-accordion>
+  </div>`;
+    this.templateDesktop = () => `<div role="listitem">
+  <px-vstack gap="default">
+    <px-p variant="title-l" ${this.inverted ? "inverted" : ""}>
+      <slot name="links-list-title"></slot>
+    </px-p>
+    <slot name="links-list"></slot>
+  </px-vstack>
+  </div>`;
+    this.throttledLoadTemplate = throttle(this.loadTemplate.bind(this), 50);
+    this.loadTemplate();
   }
-  set border(value) {
-    this.setAttribute("border", value);
+  static get observedAttributes() {
+    return [...super.observedAttributes, "inverted"];
   }
-  get borderSide() {
-    return this.getAttribute("border-side");
+  connectedCallback() {
+    super.connectedCallback();
+    this.loadTemplate();
+    window.addEventListener("resize", this.throttledLoadTemplate);
+    if (!this.$ul) {
+      console.error(
+        "The footer sitemap item must contain a <ul> element with links."
+      );
+    } else {
+      if (this.$ul.querySelector("px-img")) {
+        this.$ul.classList.add("link-list-img");
+      }
+    }
   }
-  set borderSide(value) {
-    this.setAttribute("border-side", value);
+  disconnectedCallback() {
+    window.removeEventListener("resize", this.throttledLoadTemplate);
   }
-  get borderSideMobile() {
-    return this.getAttribute("border-side--mobile");
+  loadTemplate() {
+    const previousSize = this.lastSize;
+    const currentSize = window.innerWidth < 768 ? "mobile" : "desktop";
+    if (previousSize !== currentSize) {
+      if (currentSize === "mobile") {
+        this.shadowRoot.innerHTML = this.templateMobile();
+      } else {
+        this.shadowRoot.innerHTML = this.templateDesktop();
+      }
+      this.lastSize = currentSize;
+    }
   }
-  set borderSideMobile(value) {
-    this.setAttribute("border-side--mobile", value);
+  attributeChangedCallback(attrName, oldValue, newValue) {
+    if (oldValue !== newValue) {
+      switch (attrName) {
+        case "inverted":
+          for (let i = 0; i < this.$children.length; i++) {
+            if (!this.$children[i].hasAttribute("inverted")) {
+              this.$children[i].toggleAttribute("inverted");
+            }
+          }
+          this.$ul.querySelectorAll("px-a").forEach((link) => {
+            link.toggleAttribute("inverted");
+          });
+          break;
+        default:
+          super.attributeChangedCallback(attrName, oldValue, newValue);
+          break;
+      }
+    }
   }
-  get borderSideTablet() {
-    return this.getAttribute("border-side--tablet");
+  get $ul() {
+    return this.querySelector("ul");
   }
-  set borderSideTablet(value) {
-    this.setAttribute("border-side--tablet", value);
+  get $children() {
+    return this.querySelectorAll("px-footer-sitemap-item > *");
   }
-  get borderSideLaptop() {
-    return this.getAttribute("border-side--laptop");
+  get inverted() {
+    return this.hasAttribute("inverted");
   }
-  set borderSideLaptop(value) {
-    this.setAttribute("border-side--laptop", value);
+  set inverted(value) {
+    if (value) {
+      this.setAttribute("inverted", "");
+    } else {
+      this.removeAttribute("inverted");
+    }
   }
-}
-if (!customElements.get("px-section")) {
-  customElements.define("px-section", Section);
+};
+_FooterSitemapItem.nativeName = "div";
+let FooterSitemapItem = _FooterSitemapItem;
+if (!customElements.get("px-footer-sitemap-item")) {
+  customElements.define("px-footer-sitemap-item", FooterSitemapItem);
 }
 const styles$r = ":host{display:block}:host *{box-sizing:border-box}button,a{display:block;font-family:var(--px-font-family);font-size:var(--px-text-size-label-m-mobile);line-height:var(--px-font-line-height-l);color:var(--px-color-text-neutral-default);text-align:center;cursor:pointer;padding:2em 0;height:100%}button:after,a:after{content:attr(data-label);display:block;height:0;width:auto;visibility:hidden;overflow:hidden;-webkit-user-select:none;user-select:none;pointer-events:none;font-weight:var(--px-font-weight-title)}button:focus-visible,a:focus-visible{outline-offset:var(--px-focus-offset-mobile);outline:var(--px-focus-outline-mobile) solid var(--px-color-border-focus-outline-default)}button:hover,a:hover{font-weight:var(--px-font-weight-title);color:var(--px-color-background-container-primary-default);padding-block:calc(2em - 2px)}button{margin:0;border:0;border-bottom:2px solid rgba(0,0,0,0);outline:0;background:inherit}button[aria-expanded=true]{font-weight:var(--px-font-weight-title);color:var(--px-color-background-container-primary-default);border-bottom-color:var(--px-color-background-container-primary-default)}a{text-decoration:none}@media only screen and (min-width: 48em){button,a{font-size:var(--px-text-size-label-m-tablet)}button:focus-visible,a:focus-visible{outline-offset:var(--px-focus-offset-tablet);outline-width:var(--px-focus-outline-tablet)}}@media only screen and (min-width: 64.0625em){button,a{font-size:var(--px-text-size-label-m-laptop)}button:focus-visible,a:focus-visible{outline-offset:var(--px-focus-offset-laptop);outline-width:var(--px-focus-outline-laptop)}}@media only screen and (min-width: 90.0625em){button,a{font-size:var(--px-text-size-label-m-desktop)}button:focus-visible,a:focus-visible{outline-offset:var(--px-focus-offset-desktop);outline-width:var(--px-focus-outline-desktop)}}";
 const stylesheet$7 = new CSSStyleSheet();