@proximus/lavender 1.4.1 → 1.4.2

package/dist/lavender.es.js

@@ -443,13 +443,8 @@ class WithExtraAttributes extends HTMLElement {
     this.setAttribute("order--desktop", value);
   }
 }
-class PxElement extends WithExtraAttributes {
-  constructor(...adoptedStylesheets) {
-    super(...adoptedStylesheets);
-    this.accessorExclusions = [];
-    this.nativeName = Object.getPrototypeOf(this).constructor.nativeName;
-    this.accessorExclusions = Object.getPrototypeOf(this).constructor.accessorExclusions || [];
-  }
+const _PxElement = class _PxElement extends WithExtraAttributes {
+  // nativeName: string;
   static get observedAttributes() {
     return [
       ...super.observedAttributes,
@@ -464,9 +459,22 @@ class PxElement extends WithExtraAttributes {
       this.$el.setAttribute(name, newValue);
     }
   }
-  connectedCallback() {
-    for (const name of getSupportedPropertyNames(this.nativeName)) {
-      if (name === "constructor" || this.accessorExclusions.includes(name)) {
+  get ctor() {
+    return Object.getPrototypeOf(this).constructor;
+  }
+  constructor(...adoptedStylesheets) {
+    super(...adoptedStylesheets);
+    if (!this.ctor.supportedPropertyNames) {
+      this.ctor.supportedPropertyNames = getSupportedPropertyNames(
+        this.ctor.nativeName
+      );
+    }
+    this.enhanceWithNativeProperties();
+  }
+  enhanceWithNativeProperties() {
+    var _a;
+    for (const name of this.ctor.supportedPropertyNames) {
+      if (name === "constructor" || (((_a = this.ctor) == null ? void 0 : _a.accessorExclusions) ?? []).includes(name)) {
         continue;
       }
       try {
@@ -484,13 +492,9 @@ class PxElement extends WithExtraAttributes {
         console.warn(`Could not create property ${name} for`, this.$el, e);
       }
     }
-    if (this.isInsideGridOrStack) {
-      this.$el.style.display = "block";
-      this.$el.style.height = "100%";
-    }
   }
   get $el() {
-    return this.shadowRoot.querySelector(this.nativeName);
+    return this.shadowRoot.querySelector(this.ctor.nativeName);
   }
   _updateAttribute(name, value) {
     if (value) {
@@ -506,6 +510,16 @@ class PxElement extends WithExtraAttributes {
       this.removeAttribute(name);
     }
   }
+};
+_PxElement.accessorExclusions = [];
+let PxElement = _PxElement;
+class VerticallyExtendedElement extends PxElement {
+  connectedCallback() {
+    if (this.isInsideGridOrStack) {
+      this.$el.style.display = "block";
+      this.$el.style.height = "100%";
+    }
+  }
 }
 const gridGapValues = ["", "default", "none", "l"];
 const flexboxAlignSelfValues = [
@@ -1439,7 +1453,7 @@ class Spacer extends HTMLElement {
     this.isVertical = false;
   }
   static get observedAttributes() {
-    return ["grow"];
+    return ["grow", "nogap"];
   }
   attributeChangedCallback(name, oldValue, newValue) {
     if (name === "grow") {
@@ -1453,12 +1467,14 @@ class Spacer extends HTMLElement {
   connectedCallback() {
     this.growValue = this.getAttribute("grow") || `${1}`;
     this.style.flexGrow = this.growValue;
-    this.resizeObserver = new ResizeObserver(() => {
-      this.handleSizeChange();
-    });
-    this.isVertical = this.parentElement.localName === "px-vstack" || this.parentElement.style.flexDirection === "column";
-    this.resizeObserver.observe(this);
-    this.scheduleRecheck();
+    if (this.nogap) {
+      this.resizeObserver = new ResizeObserver(() => {
+        this.handleSizeChange();
+      });
+      this.isVertical = this.parentElement.localName === "px-vstack" || this.parentElement.style.flexDirection === "column";
+      this.resizeObserver.observe(this);
+      this.scheduleRecheck();
+    }
   }
   disconnectedCallback() {
     var _a;
@@ -1509,6 +1525,16 @@ class Spacer extends HTMLElement {
       this.style.flexGrow = this.growValue;
     }
   }
+  get nogap() {
+    return this.hasAttribute("nogap");
+  }
+  set nogap(value) {
+    if (value) {
+      this.setAttribute("nogap", "");
+    } else {
+      this.removeAttribute("nogap");
+    }
+  }
 }
 if (!customElements.get("px-spacer")) {
   customElements.define("px-spacer", Spacer);
@@ -2199,56 +2225,56 @@ const containerStyles = new CSSStyleSheet();
 containerStyles.replaceSync(containerCss);
 const attributeBreakpointCSSSelector$3 = (attributeName, attributeValue, device) => `:host([${attributeName}${device ? `--${device}` : ""}='${attributeValue}']) .container`;
 const paddingPrefix$1 = "px-padding";
-const _Container = class _Container extends PxElement {
+const containerBreakpoints = [
+  cssTokenBreakpoints(
+    "padding",
+    attributeBreakpointCSSSelector$3,
+    paddingValues,
+    paddingPrefix$1,
+    "--container-padding"
+  ),
+  cssTokenBreakpoints(
+    "padding-inline",
+    attributeBreakpointCSSSelector$3,
+    paddingValues,
+    paddingPrefix$1
+  ),
+  cssTokenBreakpoints(
+    "padding-block",
+    attributeBreakpointCSSSelector$3,
+    paddingValues,
+    paddingPrefix$1
+  ),
+  cssTokenBreakpoints(
+    "padding-top",
+    attributeBreakpointCSSSelector$3,
+    paddingValues,
+    paddingPrefix$1
+  ),
+  cssTokenBreakpoints(
+    "padding-right",
+    attributeBreakpointCSSSelector$3,
+    paddingValues,
+    paddingPrefix$1,
+    "--container-padding-right"
+  ),
+  cssTokenBreakpoints(
+    "padding-bottom",
+    attributeBreakpointCSSSelector$3,
+    paddingValues,
+    paddingPrefix$1
+  ),
+  cssTokenBreakpoints(
+    "padding-left",
+    attributeBreakpointCSSSelector$3,
+    paddingValues,
+    paddingPrefix$1,
+    "--container-padding-left"
+  )
+];
+const _Container = class _Container extends VerticallyExtendedElement {
   constructor() {
-    super(
-      containerStyles,
-      cssTokenBreakpoints(
-        "padding",
-        attributeBreakpointCSSSelector$3,
-        paddingValues,
-        paddingPrefix$1,
-        "--container-padding"
-      ),
-      cssTokenBreakpoints(
-        "padding-inline",
-        attributeBreakpointCSSSelector$3,
-        paddingValues,
-        paddingPrefix$1
-      ),
-      cssTokenBreakpoints(
-        "padding-block",
-        attributeBreakpointCSSSelector$3,
-        paddingValues,
-        paddingPrefix$1
-      ),
-      cssTokenBreakpoints(
-        "padding-top",
-        attributeBreakpointCSSSelector$3,
-        paddingValues,
-        paddingPrefix$1
-      ),
-      cssTokenBreakpoints(
-        "padding-right",
-        attributeBreakpointCSSSelector$3,
-        paddingValues,
-        paddingPrefix$1,
-        "--container-padding-right"
-      ),
-      cssTokenBreakpoints(
-        "padding-bottom",
-        attributeBreakpointCSSSelector$3,
-        paddingValues,
-        paddingPrefix$1
-      ),
-      cssTokenBreakpoints(
-        "padding-left",
-        attributeBreakpointCSSSelector$3,
-        paddingValues,
-        paddingPrefix$1,
-        "--container-padding-left"
-      )
-    );
+    super(containerStyles, ...containerBreakpoints);
     this.template = () => `<div class="container">
       <slot></slot>
       <slot name="anchor-left"></slot>
@@ -2931,7 +2957,6 @@ const _ActionLink = class _ActionLink extends PxElement {
   }
   connectedCallback() {
     var _a;
-    super.connectedCallback();
     if (((_a = this.parentElement) == null ? void 0 : _a.localName) === "px-header") {
       this.setAttribute("slot", "header-actions");
     }
@@ -3043,7 +3068,6 @@ const _AgGridTableThButton = class _AgGridTableThButton extends PxElement {
   }
   connectedCallback() {
     var _a, _b, _c;
-    super.connectedCallback();
     if (!this.sorting) {
       this.sorting = "none";
       (_a = this.$columnHeader) == null ? void 0 : _a.setAttribute("aria-sort", "none");
@@ -3203,100 +3227,130 @@ if (!customElements.get("px-ag-grid-table-th-content")) {
   customElements.define("px-ag-grid-table-th-content", AgGridTableThContent);
 }
 const bannerCss = ':host{position:relative}:host,:host>*{display:block;box-sizing:border-box}.banner{position:relative;min-height:8em}.banner[reduced]{min-height:5em}px-container{height:100%}.banner-content{display:grid;grid-template-columns:1fr;grid-template-rows:minmax(0,auto);row-gap:var(--px-spacing-s-mobile);z-index:2;position:relative}[reduced] .banner-content{grid-template-columns:min-content minmax(0,1fr);column-gap:var(--px-spacing-default-mobile)}::slotted([slot="tag"]){grid-area:tag}::slotted([slot="media"]){grid-area:media;align-self:start}::slotted([slot="title"]){grid-area:title}::slotted([slot="description"]){grid-area:description}::slotted([slot="content"]){grid-area:content}:host(:not([reduced])) ::slotted([slot="action"]){grid-area:action;margin-top:calc(var(--px-spacing-default-mobile) - var(--px-spacing-s-mobile))}.contrast-helper{position:absolute;top:0;right:0;bottom:0;left:0;z-index:1;pointer-events:none;display:none;border-radius:var(--px-radius-main)}[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){.banner-content{row-gap:var(--px-spacing-s-desktop)}[reduced] .banner-content{column-gap:var(--px-spacing-default-desktop)}.banner-content :host(:not([reduced])) ::slotted([slot="action"]){margin-top:calc(var(--px-spacing-default-desktop) - var(--px-spacing-s-desktop))}}@media only screen and (min-width: 64.0625em){.banner-content{row-gap:var(--px-spacing-s-desktop)}[reduced] .banner-content{column-gap:var(--px-spacing-default-desktop)}.banner-content :host(:not([reduced])) ::slotted([slot="action"]){margin-top:calc(var(--px-spacing-default-desktop) - var(--px-spacing-s-desktop))}}';
-const bannerStyles = new CSSStyleSheet();
-bannerStyles.replaceSync(bannerCss);
-const _Banner = class _Banner extends PxElement {
+const gridCss = ":host{display:block;--grid-cols: initial;--grid-cols--mobile: initial;--grid-cols--tablet: initial;--grid-cols--laptop: initial;--grid-cols--desktop: initial;--justify-content: initial;--justify-items: initial;--align-content: initial;--align-items: initial}.grid{display:grid;grid-template-columns:repeat(var(--grid-cols),minmax(0,1fr));justify-content:var(--justify-content);justify-items:var(--justify-items);align-content:var(--align-content);align-items:var(--align-items)}.justify-content-normal{justify-content:normal}.justify-content-start{justify-content:start}.justify-content-end{justify-content:end}.justify-content-center{justify-content:center}.justify-content-space-between{justify-content:space-between}.justify-content-space-around{justify-content:space-around}.justify-content-space-evenly{justify-content:space-evenly}.justify-content-stretch{justify-content:stretch}.justify-items-start{justify-items:start}.justify-items-end{justify-items:end}.justify-items-center{justify-items:center}.justify-items-stretch{justify-items:stretch}.align-content-normal{align-content:normal}.align-content-start{align-content:start}.align-content-end{align-content:end}.align-content-center{align-content:center}.align-content-space-between{align-content:space-between}.align-content-space-around{align-content:space-around}.align-content-space-evenly{align-content:space-evenly}.align-content-stretch{align-content:stretch}.align-items-start{align-items:start}.align-items-end{align-items:end}.align-items-center{align-items:center}.align-items-stretch{align-items:stretch}@media only screen and (max-width: 767px){.grid{grid-template-columns:repeat(var(--grid-cols--mobile, var(--grid-cols)),minmax(0,1fr))}.justify-content-normal-mobile{justify-content:normal}.justify-content-start-mobile{justify-content:start}.justify-content-end-mobile{justify-content:end}.justify-content-center-mobile{justify-content:center}.justify-content-space-between-mobile{justify-content:space-between}.justify-content-space-around-mobile{justify-content:space-around}.justify-content-space-evenly-mobile{justify-content:space-evenly}.justify-content-stretch-mobile{justify-content:stretch}.justify-items-start-mobile{justify-items:start}.justify-items-end-mobile{justify-items:end}.justify-items-center-mobile{justify-items:center}.justify-items-stretch-mobile{justify-items:stretch}.align-content-normal-mobile{align-content:normal}.align-content-start-mobile{align-content:start}.align-content-end-mobile{align-content:end}.align-content-center-mobile{align-content:center}.align-content-space-between-mobile{align-content:space-between}.align-content-space-around-mobile{align-content:space-around}.align-content-space-evenly-mobile{align-content:space-evenly}.align-content-stretch-mobile{align-content:stretch}.align-items-start-mobile{align-items:start}.align-items-end-mobile{align-items:end}.align-items-center-mobile{align-items:center}.align-items-stretch-mobile{align-items:stretch}}@media only screen and (min-width: 48em) and (max-width: 64em){.grid{grid-template-columns:repeat(var(--grid-cols--tablet, var(--grid-cols)),minmax(0,1fr))}.justify-content-normal-tablet{justify-content:normal}.justify-content-start-tablet{justify-content:start}.justify-content-end-tablet{justify-content:end}.justify-content-center-tablet{justify-content:center}.justify-content-space-between-tablet{justify-content:space-between}.justify-content-space-around-tablet{justify-content:space-around}.justify-content-space-evenly-tablet{justify-content:space-evenly}.justify-content-stretch-tablet{justify-content:stretch}.justify-items-start-tablet{justify-items:start}.justify-items-end-tablet{justify-items:end}.justify-items-center-tablet{justify-items:center}.justify-items-stretch-tablet{justify-items:stretch}.align-content-normal-tablet{align-content:normal}.align-content-start-tablet{align-content:start}.align-content-end-tablet{align-content:end}.align-content-center-tablet{align-content:center}.align-content-space-between-tablet{align-content:space-between}.align-content-space-around-tablet{align-content:space-around}.align-content-space-evenly-tablet{align-content:space-evenly}.align-content-stretch-tablet{align-content:stretch}.align-items-start-tablet{align-items:start}.align-items-end-tablet{align-items:end}.align-items-center-tablet{align-items:center}.align-items-stretch-tablet{align-items:stretch}}@media only screen and (min-width: 64.0625em){.grid{grid-template-columns:repeat(var(--grid-cols--laptop, var(--grid-cols)),minmax(0,1fr))}.justify-content-normal-laptop{justify-content:normal}.justify-content-start-laptop{justify-content:start}.justify-content-end-laptop{justify-content:end}.justify-content-center-laptop{justify-content:center}.justify-content-space-between-laptop{justify-content:space-between}.justify-content-space-around-laptop{justify-content:space-around}.justify-content-space-evenly-laptop{justify-content:space-evenly}.justify-content-stretch-laptop{justify-content:stretch}.justify-items-start-laptop{justify-items:start}.justify-items-end-laptop{justify-items:end}.justify-items-center-laptop{justify-items:center}.justify-items-stretch-laptop{justify-items:stretch}.align-content-normal-laptop{align-content:normal}.align-content-start-laptop{align-content:start}.align-content-end-laptop{align-content:end}.align-content-center-laptop{align-content:center}.align-content-space-between-laptop{align-content:space-between}.align-content-space-around-laptop{align-content:space-around}.align-content-space-evenly-laptop{align-content:space-evenly}.align-content-stretch-laptop{align-content:stretch}.align-items-start-laptop{align-items:start}.align-items-end-laptop{align-items:end}.align-items-center-laptop{align-items:center}.align-items-stretch-laptop{align-items:stretch}}";
+const gridStyles = new CSSStyleSheet();
+gridStyles.replaceSync(gridCss);
+const gridColsValues = [
+  "1",
+  "2",
+  "3",
+  "4",
+  "5",
+  "6",
+  "7",
+  "8",
+  "9",
+  "10",
+  "11",
+  "12"
+];
+const contentAlignmentValues = [
+  "",
+  "start",
+  "end",
+  "center",
+  "space-between",
+  "space-around",
+  "space-evenly",
+  "stretch"
+];
+const itemsAlignmentValues = ["", "start", "end", "center", "stretch"];
+const attributeBreakpointCSSSelector$2 = (attributeName, attributeValue, device) => `:host([${attributeName}${device ? `--${device}` : ""}='${attributeValue}']) .grid`;
+const gapPrefix$1 = "px-spacing";
+const gapCssTokenBreakpoints = cssTokenBreakpoints(
+  "gap",
+  attributeBreakpointCSSSelector$2,
+  gapValues,
+  gapPrefix$1,
+  "--grid-gap"
+);
+const _Grid = class _Grid extends PxElement {
   constructor() {
-    super(bannerStyles);
-    this.template = () => `<div class="banner">
-      <div class="contrast-helper"></div>
-      <px-container class="banner-container" padding="${this.reduced ? "m" : "l"}" padding--mobile="m" border-radius="main" >
-        <px-grid gap="none">
-          <px-container padding="none" background-color="none">
-            <div class="banner-content">
-              <slot name="tag"></slot>
-              <slot name="media"></slot>
-              <slot name="title"></slot>
-              <slot name="description"></slot>
-              <slot name="content"></slot>
-              <slot name="action"></slot>
-            </div>
-          </px-container>
-        </px-grid>
-      </px-container>
+    super(gridStyles, gapCssTokenBreakpoints);
+    this.template = () => `<div class="grid">
+    <slot></slot>
     </div>`;
     this.shadowRoot.innerHTML = this.template();
   }
   static get observedAttributes() {
     return [
-      "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",
-      "has-gridding",
-      "has-gridding--mobile",
-      "has-gridding--tablet",
-      "has-gridding--laptop",
-      "reduced",
-      "inverted"
+      ...super.observedAttributes,
+      "grid-cols",
+      "grid-cols--mobile",
+      "grid-cols--tablet",
+      "grid-cols--laptop",
+      "justify-content",
+      "justify-items",
+      "align-content",
+      "align-items",
+      "justify-content--mobile",
+      "justify-items--mobile",
+      "align-content--mobile",
+      "align-items--mobile",
+      "justify-content--tablet",
+      "justify-items--tablet",
+      "align-content--tablet",
+      "align-items--tablet",
+      "justify-content--laptop",
+      "justify-items--laptop",
+      "align-content--laptop",
+      "align-items--laptop",
+      "justify-content--desktop",
+      "justify-items--desktop",
+      "align-content--desktop",
+      "align-items--desktop"
     ];
   }
   connectedCallback() {
-    var _a;
-    (_a = super.connectedCallback) == null ? void 0 : _a.call(this);
-    this.createGridTemplateAreas();
-    this.createGridding();
+    if (!this.gap) {
+      this.gap = "default";
+    }
+    if (!this.alignItems) {
+      this.alignItems = "stretch";
+    }
   }
   attributeChangedCallback(attrName, oldValue, newValue) {
     if (oldValue !== newValue) {
       switch (attrName) {
-        case "background-color":
-          this.$container.backgroundColor = backgroundColorValues.indexOf(newValue) > 0 ? newValue : "none";
-          break;
-        case "background-gradient":
-          this.$container.gradient = gradientValues.indexOf(newValue) > 0 ? newValue : "none";
-          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 = backgroundSizeValues.indexOf(newValue) > 0 ? newValue : "";
-          break;
-        case "background-position":
-          this.$container.backgroundPosition = newValue;
-          break;
-        case "reduced":
-          this.$el.toggleAttribute("reduced", newValue !== null);
-          this.createGridTemplateAreas();
+        case "grid-cols":
+        case "grid-cols--mobile":
+        case "grid-cols--tablet":
+        case "grid-cols--laptop":
+          this.updateAttribute(attrName, oldValue, newValue, gridColsValues);
           break;
-        case "has-gridding":
-        case "has-gridding--mobile":
-        case "has-gridding--tablet":
-        case "has-gridding--laptop":
-          this.createGridding();
+        case "justify-content":
+        case "align-content":
+        case "justify-content--mobile":
+        case "align-content--mobile":
+        case "justify-content--tablet":
+        case "align-content--tablet":
+        case "justify-content--laptop":
+        case "align-content--laptop":
+        case "justify-content--desktop":
+        case "align-content--desktop":
+          this.updateAttribute(
+            attrName,
+            oldValue,
+            newValue,
+            contentAlignmentValues
+          );
           break;
-        case "inverted":
-          for (let i = 0; i < this.$children.length; i++) {
-            if (!this.$children[i].hasAttribute("inverted")) {
-              this.$children[i].toggleAttribute("inverted");
-            }
-          }
-          this.$el.toggleAttribute("inverted", newValue !== null);
+        case "justify-items":
+        case "align-items":
+        case "justify-items--mobile":
+        case "align-items--mobile":
+        case "justify-items--tablet":
+        case "align-items--tablet":
+        case "justify-items--laptop":
+        case "align-items--laptop":
+        case "justify-items--desktop":
+        case "align-items--desktop":
+          this.updateAttribute(
+            attrName,
+            oldValue,
+            newValue,
+            itemsAlignmentValues
+          );
           break;
         default:
           super.attributeChangedCallback(attrName, oldValue, newValue);
@@ -3304,310 +3358,312 @@ const _Banner = class _Banner extends PxElement {
       }
     }
   }
-  createGridTemplateAreas() {
-    const grid = this.shadowRoot.querySelector(
-      ".banner-content"
-    );
-    const slots = ["tag", "media", "title", "description", "content", "action"];
-    let areas = "";
-    if (this.reduced) {
-      slots.forEach((name) => {
-        const slot = this.shadowRoot.querySelector(
-          `slot[name="${name}"]`
-        );
-        if (slot && slot.assignedElements().length > 0) {
-          if (name === "media") return;
-          areas += `'media ${name}'
-`;
-        }
-      });
-    } else {
-      slots.forEach((name) => {
-        const slot = this.shadowRoot.querySelector(
-          `slot[name="${name}"]`
-        );
-        if (slot && slot.assignedElements().length > 0) {
-          areas += `'${name}'
-`;
-        }
-      });
+  updateGap(oldValue, newValue, attrValue) {
+    if (!this.checkName(attrValue, newValue)) {
+      console.error(`${newValue} is not a valid gap value`);
+      return;
     }
-    if (!areas) areas = "'content'";
-    grid.style.gridTemplateAreas = areas;
+    const updateGapStyle = (value) => {
+      if (value !== null && value !== "" && value !== "default") {
+        this.$el.style.setProperty(
+          `--grid-gap--mobile`,
+          `var(--px-spacing-${value}-mobile)`
+        );
+        this.$el.style.setProperty(
+          `--grid-gap--tablet`,
+          `var(--px-spacing-${value}-tablet)`
+        );
+        this.$el.style.setProperty(
+          `--grid-gap--laptop`,
+          `var(--px-spacing-${value}-laptop)`
+        );
+      }
+    };
+    updateGapStyle(oldValue);
+    updateGapStyle(newValue);
   }
-  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"
+  updateAttribute(attrName, oldValue, newValue, attrValues) {
+    if (!this.checkName(attrValues, newValue)) {
+      console.error(`${newValue} is not an allowed ${attrName} value`);
+    } else if (attrName === "grid-cols" || attrName === "grid-cols--mobile" || attrName === "grid-cols--tablet" || attrName === "grid-cols--laptop" || attrName === "grid-cols--desktop") {
+      this.$el.style.setProperty(`--${attrName}`, newValue);
+    } else {
+      if (oldValue !== null && oldValue !== "" && oldValue !== "default") {
+        this.$el.classList.toggle(`${attrName}-${oldValue}`);
       }
-    ];
-    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");
+      if (newValue !== null && newValue !== "" && newValue !== "default") {
+        this.$el.classList.toggle(`${attrName}-${newValue}`);
       }
-    });
+    }
   }
-  get $grid() {
-    return this.shadowRoot.querySelector("px-grid");
+  get gap() {
+    return this.getAttribute("gap");
   }
-  get $container() {
-    return this.shadowRoot.querySelector(".banner-container");
+  set gap(value) {
+    this.setAttribute("gap", value);
   }
-  get $children() {
-    return this.querySelectorAll("px-banner > *");
+  get gapMobile() {
+    return this.getAttribute("gap--mobile");
   }
-  get backgroundColor() {
-    return this.getAttribute("background-color");
+  set gapMobile(value) {
+    this.setAttribute("gap--mobile", value);
   }
-  set backgroundColor(value) {
-    this.setAttribute("background-color", value);
+  get gapTablet() {
+    return this.getAttribute("gap--tablet");
   }
-  get gradient() {
-    return this.getAttribute("background-gradient");
+  set gapTablet(value) {
+    this.setAttribute("gap--tablet", value);
   }
-  set gradient(value) {
-    this.setAttribute("background-gradient", value);
+  get gapLaptop() {
+    return this.getAttribute("gap--laptop");
   }
-  get backgroundImage() {
-    return this.getAttribute("background-image");
+  set gapLaptop(value) {
+    this.setAttribute("gap--laptop", value);
   }
-  set backgroundImage(value) {
-    this.setAttribute("background-image", value);
+  get gridCols() {
+    return this.getAttribute("grid-cols");
   }
-  get backgroundImageMobile() {
-    return this.getAttribute("background-image--mobile");
+  set gridCols(value) {
+    this.setAttribute("grid-cols", value);
   }
-  set backgroundImageMobile(value) {
-    this.setAttribute("background-image--mobile", value);
+  get gridColsMobile() {
+    return this.getAttribute("grid-cols--mobile");
   }
-  get backgroundImageTablet() {
-    return this.getAttribute("background-image--tablet");
+  set gridColsMobile(value) {
+    this.setAttribute("grid-cols--mobile", value);
   }
-  set backgroundImageTablet(value) {
-    this.setAttribute("background-image--tablet", value);
+  get gridColsTablet() {
+    return this.getAttribute("grid-cols--tablet");
   }
-  get backgroundImageLaptop() {
-    return this.getAttribute("background-image--laptop");
+  set gridColsTablet(value) {
+    this.setAttribute("grid-cols--tablet", value);
   }
-  set backgroundImageLaptop(value) {
-    this.setAttribute("background-image--laptop", value);
+  get gridColsLaptop() {
+    return this.getAttribute("grid-cols--laptop");
   }
-  get backgroundSize() {
-    return this.getAttribute("background-size");
+  set gridColsLaptop(value) {
+    this.setAttribute("grid-cols--laptop", value);
   }
-  set backgroundSize(value) {
-    this.setAttribute("background-size", value);
+  get justifyContent() {
+    return this.getAttribute("justify-content");
   }
-  get backgroundPosition() {
-    return this.getAttribute("background-position");
+  set justifyContent(value) {
+    this.setAttribute("justify-content", value);
   }
-  set backgroundPosition(value) {
-    this.setAttribute("background-position", value);
+  get justifyItems() {
+    return this.getAttribute("justify-items");
   }
-  get gradientContrastHelper() {
-    return this.hasAttribute("contrast-helper-gradient");
+  set justifyItems(value) {
+    this.setAttribute("justify-items", value);
   }
-  set gradientContrastHelper(value) {
-    if (value) {
-      this.setAttribute("contrast-helper-gradient", "");
-    } else {
-      this.removeAttribute("contrast-helper-gradient");
-    }
+  get alignContent() {
+    return this.getAttribute("align-content");
   }
-  get overlayContrastHelper() {
-    return this.hasAttribute("contrast-helper-overlay");
+  set alignContent(value) {
+    this.setAttribute("align-content", value);
   }
-  set overlayContrastHelper(value) {
-    if (value) {
-      this.setAttribute("contrast-helper-overlay", "");
-    } else {
-      this.removeAttribute("contrast-helper-overlay");
-    }
+  get alignItems() {
+    return this.getAttribute("align-items");
   }
-  get inverted() {
-    return this.hasAttribute("inverted");
+  set alignItems(value) {
+    this.setAttribute("align-items", value);
   }
-  set inverted(value) {
-    if (value) {
-      this.setAttribute("inverted", "");
-    } else {
-      this.removeAttribute("inverted");
-    }
+  get justifyContentMobile() {
+    return this.getAttribute("justify-content--mobile");
   }
-  get reduced() {
-    return this.hasAttribute("reduced");
+  set justifyContentMobile(value) {
+    this.setAttribute("justify-content--mobile", value);
   }
-  set reduced(value) {
-    if (value) {
-      this.setAttribute("reduced", "");
-    } else {
-      this.removeAttribute("reduced");
-    }
+  get justifyItemsMobile() {
+    return this.getAttribute("justify-items--mobile");
   }
-  get hasGridding() {
-    return this.hasAttribute("has-gridding");
+  set justifyItemsMobile(value) {
+    this.setAttribute("justify-items--mobile", value);
   }
-  set hasGridding(value) {
-    if (value) {
-      this.setAttribute("has-gridding", "");
-    } else {
-      this.removeAttribute("has-gridding");
-    }
+  get alignContentMobile() {
+    return this.getAttribute("align-content--mobile");
   }
-  get hasGriddingMobile() {
-    return this.hasAttribute("has-gridding--mobile");
+  set alignContentMobile(value) {
+    this.setAttribute("align-content--mobile", value);
   }
-  set hasGriddingMobile(value) {
-    if (value) {
-      this.setAttribute("has-gridding--mobile", "");
-    } else {
-      this.removeAttribute("has-gridding--mobile");
-    }
+  get alignItemsMobile() {
+    return this.getAttribute("align-items--mobile");
   }
-  get hasGriddingTablet() {
-    return this.hasAttribute("has-gridding--tablet");
+  set alignItemsMobile(value) {
+    this.setAttribute("align-items--mobile", value);
   }
-  set hasGriddingTablet(value) {
-    if (value) {
-      this.setAttribute("has-gridding--tablet", "");
-    } else {
-      this.removeAttribute("has-gridding--tablet");
-    }
+  get justifyContentTablet() {
+    return this.getAttribute("justify-content--tablet");
   }
-  get hasGriddingLaptop() {
-    return this.hasAttribute("has-gridding--laptop");
+  set justifyContentTablet(value) {
+    this.setAttribute("justify-content--tablet", value);
   }
-  set hasGriddingLaptop(value) {
-    if (value) {
-      this.setAttribute("has-gridding--laptop", "");
-    } else {
-      this.removeAttribute("has-gridding--laptop");
-    }
+  get justifyItemsTablet() {
+    return this.getAttribute("justify-items--tablet");
   }
-};
-_Banner.nativeName = "div";
-let Banner = _Banner;
-if (!customElements.get("px-banner")) {
-  customElements.define("px-banner", Banner);
-}
-const breadcrumbCss = `:host{display:block}:host *{box-sizing:border-box}.breadcrumb{font-family:var(--px-font-family);color:var(--px-color-text-neutral-default);margin:calc(var(--px-spacing-s-mobile) * -1) 0 0 0;padding:0}.breadcrumb div[role=list]{display:flex;flex-wrap:wrap;align-items:center}.breadcrumb ::slotted(px-breadcrumb-item){margin-top:var(--px-spacing-s-mobile)}.breadcrumb ::slotted(px-breadcrumb-item:not(:last-child)){display:flex;align-items:center;margin-right:var(--px-spacing-xs-mobile)}.breadcrumb ::slotted(px-breadcrumb-item:not(:last-child)):after{display:inline-block;content:"";width:16px;height:16px;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:cover;mask-size:cover;-webkit-mask-position:50% 50%;mask-position:50% 50%;-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M5.90255 3.61987C5.6515 3.8749 5.6515 4.2884 5.90255 4.54343L9.30512 8.00002L5.90255 11.4566C5.6515 11.7116 5.6515 12.1251 5.90255 12.3802C6.1536 12.6352 6.56063 12.6352 6.81169 12.3802L10.6688 8.4618C10.9199 8.20677 10.9199 7.79327 10.6688 7.53823L6.81169 3.61987C6.56063 3.36483 6.1536 3.36483 5.90255 3.61987Z' fill='%23252525'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M5.90255 3.61987C5.6515 3.8749 5.6515 4.2884 5.90255 4.54343L9.30512 8.00002L5.90255 11.4566C5.6515 11.7116 5.6515 12.1251 5.90255 12.3802C6.1536 12.6352 6.56063 12.6352 6.81169 12.3802L10.6688 8.4618C10.9199 8.20677 10.9199 7.79327 10.6688 7.53823L6.81169 3.61987C6.56063 3.36483 6.1536 3.36483 5.90255 3.61987Z' fill='%23252525'/%3E%3C/svg%3E");background-color:currentColor;color:var(--px-color-icon-neutral-default);margin-left:var(--px-spacing-xs-mobile)}@media only screen and (min-width: 48em){.breadcrumb{margin:calc(var(--px-spacing-s-tablet) * -1) 0 0 0}.breadcrumb ::slotted(px-breadcrumb-item){margin-top:var(--px-spacing-s-tablet)}.breadcrumb ::slotted(px-breadcrumb-item:not(:last-child)){margin-right:var(--px-spacing-xs-tablet)}.breadcrumb ::slotted(px-breadcrumb-item:not(:last-child)):after{margin-left:var(--px-spacing-xs-tablet)}}@media only screen and (min-width: 64.0625em){.breadcrumb{margin:calc(var(--px-spacing-s-laptop) * -1) 0 0 0}.breadcrumb ::slotted(px-breadcrumb-item){margin-top:var(--px-spacing-s-laptop)}.breadcrumb ::slotted(px-breadcrumb-item:not(:last-child)){margin-right:var(--px-spacing-xs-laptop)}.breadcrumb ::slotted(px-breadcrumb-item:not(:last-child)):after{margin-left:var(--px-spacing-xs-laptop)}}@media only screen and (min-width: 90.0625em){.breadcrumb{margin:calc(var(--px-spacing-s-desktop) * -1) 0 0 0}.breadcrumb ::slotted(px-breadcrumb-item){margin-top:var(--px-spacing-s-desktop)}.breadcrumb ::slotted(px-breadcrumb-item:not(:last-child)){margin-right:var(--px-spacing-xs-desktop)}.breadcrumb ::slotted(px-breadcrumb-item:not(:last-child)):after{margin-left:var(--px-spacing-xs-desktop)}}:host([inverted]) .breadcrumb{color:var(--px-color-text-neutral-inverted)}:host([inverted]) .breadcrumb ::slotted(px-breadcrumb-item:not(:last-child)):after{color:var(--px-color-icon-neutral-inverted)}`;
-const breadcrumbStyles = new CSSStyleSheet();
-breadcrumbStyles.replaceSync(breadcrumbCss);
-class Breadcrumb extends WithExtraAttributes {
-  template() {
-    return `
-      <nav class="breadcrumb" aria-label="${this.ariaLabel || "Breadcrumb"}">
-        <div role="list">
-          <slot></slot>
-        </div>
-      </nav>
-    `;
+  set justifyItemsTablet(value) {
+    this.setAttribute("justify-items--tablet", value);
   }
-  constructor() {
-    super(breadcrumbStyles);
-    this.shadowRoot.innerHTML = this.template();
+  get alignContentTablet() {
+    return this.getAttribute("align-content--tablet");
   }
-  static get observedAttributes() {
-    return [...super.observedAttributes, "inverted", "aria-label"];
+  set alignContentTablet(value) {
+    this.setAttribute("align-content--tablet", value);
   }
-  attributeChangedCallback(attrName, oldValue, newValue) {
-    if (oldValue !== newValue) {
-      switch (attrName) {
-        case "aria-label":
-          this.$el.setAttribute("aria-label", this.ariaLabel);
-          break;
-        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 alignItemsTablet() {
+    return this.getAttribute("align-items--tablet");
   }
-  get $el() {
-    return this.shadowRoot.querySelector(".breadcrumb");
+  set alignItemsTablet(value) {
+    this.setAttribute("align-items--tablet", value);
   }
-  get $children() {
-    return this.querySelectorAll("px-breadcrumb > *");
+  get justifyContentLaptop() {
+    return this.getAttribute("justify-content--laptop");
   }
-  get inverted() {
-    return this.hasAttribute("inverted");
+  set justifyContentLaptop(value) {
+    this.setAttribute("justify-content--laptop", value);
   }
-  set inverted(value) {
-    if (value) {
-      this.setAttribute("inverted", "");
-    } else {
-      this.removeAttribute("inverted");
-    }
+  get justifyItemsLaptop() {
+    return this.getAttribute("justify-items--laptop");
   }
-  get ariaLabel() {
-    return this.getAttribute("aria-label");
+  set justifyItemsLaptop(value) {
+    this.setAttribute("justify-items--laptop", value);
   }
-  set ariaLabel(value) {
-    if (value) {
-      this.setAttribute("aria-label", value);
-    } else {
-      this.removeAttribute("aria-label");
-    }
+  get alignContentLaptop() {
+    return this.getAttribute("align-content--laptop");
   }
+  set alignContentLaptop(value) {
+    this.setAttribute("align-content--laptop", value);
+  }
+  get alignItemsLaptop() {
+    return this.getAttribute("align-items--laptop");
+  }
+  set alignItemsLaptop(value) {
+    this.setAttribute("align-items--laptop", value);
+  }
+  get justifyContentDesktop() {
+    return this.getAttribute("justify-content--desktop");
+  }
+  set justifyContentDesktop(value) {
+    this.setAttribute("justify-content--desktop", value);
+  }
+  get justifyItemsDesktop() {
+    return this.getAttribute("justify-items--desktop");
+  }
+  set justifyItemsDesktop(value) {
+    this.setAttribute("justify-items--desktop", value);
+  }
+  get alignContentDesktop() {
+    return this.getAttribute("align-content--desktop");
+  }
+  set alignContentDesktop(value) {
+    this.setAttribute("align-content--desktop", value);
+  }
+  get alignItemsDesktop() {
+    return this.getAttribute("align-items--desktop");
+  }
+  set alignItemsDesktop(value) {
+    this.setAttribute("align-items--desktop", value);
+  }
+};
+_Grid.nativeName = "div";
+let Grid = _Grid;
+if (!customElements.get("px-grid")) {
+  customElements.define("px-grid", Grid);
 }
-if (!customElements.get("px-breadcrumb")) {
-  customElements.define("px-breadcrumb", Breadcrumb);
-}
-const breadcrumbItemCss = ":host{display:block}:host *{box-sizing:border-box}.breadcrumb-item{display:flex}:host:has(px-a[variant=icon-link][color=inherit]) .breadcrumb-item{color:var(--px-color-icon-accent-default)}:host:has(px-a[variant=icon-link][color=inherit]) .breadcrumb-item:hover{color:var(--px-color-text-state-hover-default)}:host:not(:has(px-a[variant=icon-link][color=inherit])) .breadcrumb-item{line-height:var(--px-font-line-height-s);font-size:var(--px-text-size-link-s-mobile)}@media only screen and (min-width: 48em){:host:not(:has(px-a[variant=icon-link][color=inherit])) .breadcrumb-item{font-size:var(--px-text-size-link-s-tablet)}}@media only screen and (min-width: 64.0625em){:host:not(:has(px-a[variant=icon-link][color=inherit])) .breadcrumb-item{font-size:var(--px-text-size-link-s-laptop)}}@media only screen and (min-width: 90.0625em){:host:not(:has(px-a[variant=icon-link][color=inherit])) .breadcrumb-item{font-size:var(--px-text-size-link-s-desktop)}}:host([inverted]):has(px-a[variant=icon-link][color=inherit]) .breadcrumb-item{color:var(--px-color-icon-accent-inverted)}:host([inverted]):has(px-a[variant=icon-link][color=inherit]) .breadcrumb-item:hover{color:var(--px-color-text-state-hover-inverted)}";
-const breadcrumbItemStyles = new CSSStyleSheet();
-breadcrumbItemStyles.replaceSync(breadcrumbItemCss);
-const _BreadcrumbItem = class _BreadcrumbItem extends PxElement {
+const bannerStyles = new CSSStyleSheet();
+bannerStyles.replaceSync(bannerCss);
+const _Banner = class _Banner extends VerticallyExtendedElement {
   constructor() {
-    super(breadcrumbItemStyles);
-    this.template = () => `<div class="breadcrumb-item" role="listitem"><slot></slot></div>`;
-    if (this.shadowRoot) {
-      this.shadowRoot.innerHTML = this.template();
-    }
+    super(bannerStyles);
+    this.template = () => `<div class="banner">
+      <div class="contrast-helper"></div>
+      <px-container class="banner-container" padding="${this.reduced ? "m" : "l"}" padding--mobile="m" border-radius="main" >
+        <px-grid gap="none">
+          <px-container padding="none" background-color="none">
+            <div class="banner-content">
+              <slot name="tag"></slot>
+              <slot name="media"></slot>
+              <slot name="title"></slot>
+              <slot name="description"></slot>
+              <slot name="content"></slot>
+              <slot name="action"></slot>
+            </div>
+          </px-container>
+        </px-grid>
+      </px-container>
+    </div>`;
+    this.shadowRoot.innerHTML = this.template();
   }
   static get observedAttributes() {
-    return [...super.observedAttributes, "inverted"];
+    return [
+      "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",
+      "has-gridding",
+      "has-gridding--mobile",
+      "has-gridding--tablet",
+      "has-gridding--laptop",
+      "reduced",
+      "inverted"
+    ];
   }
   connectedCallback() {
-    super.connectedCallback();
-    if (this.$icon) {
-      this.$icon.setAttribute("size", "s");
-    }
-    if (!this.$link) {
-      this.$el.setAttribute("aria-current", "page");
-    }
+    var _a;
+    (_a = super.connectedCallback) == null ? void 0 : _a.call(this);
+    this.createGridTemplateAreas();
+    this.createGridding();
   }
   attributeChangedCallback(attrName, oldValue, newValue) {
     if (oldValue !== newValue) {
       switch (attrName) {
+        case "background-color":
+          this.$container.backgroundColor = backgroundColorValues.indexOf(newValue) > 0 ? newValue : "none";
+          break;
+        case "background-gradient":
+          this.$container.gradient = gradientValues.indexOf(newValue) > 0 ? newValue : "none";
+          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 = backgroundSizeValues.indexOf(newValue) > 0 ? newValue : "";
+          break;
+        case "background-position":
+          this.$container.backgroundPosition = newValue;
+          break;
+        case "reduced":
+          this.$el.toggleAttribute("reduced", newValue !== null);
+          this.createGridTemplateAreas();
+          break;
+        case "has-gridding":
+        case "has-gridding--mobile":
+        case "has-gridding--tablet":
+        case "has-gridding--laptop":
+          this.createGridding(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.$el.toggleAttribute("inverted", newValue !== null);
           break;
         default:
           super.attributeChangedCallback(attrName, oldValue, newValue);
@@ -3615,19 +3671,336 @@ const _BreadcrumbItem = class _BreadcrumbItem extends PxElement {
       }
     }
   }
-  get $link() {
-    return this.querySelector("px-a");
+  createGridTemplateAreas() {
+    const grid = this.shadowRoot.querySelector(
+      ".banner-content"
+    );
+    const slots = ["tag", "media", "title", "description", "content", "action"];
+    let areas = "";
+    if (this.reduced) {
+      slots.forEach((name) => {
+        const slot = this.shadowRoot.querySelector(
+          `slot[name="${name}"]`
+        );
+        if (slot && slot.assignedElements().length > 0) {
+          if (name === "media") return;
+          areas += `'media ${name}'
+`;
+        }
+      });
+    } else {
+      slots.forEach((name) => {
+        const slot = this.shadowRoot.querySelector(
+          `slot[name="${name}"]`
+        );
+        if (slot && slot.assignedElements().length > 0) {
+          areas += `'${name}'
+`;
+        }
+      });
+    }
+    if (!areas) areas = "'content'";
+    grid.style.gridTemplateAreas = areas;
   }
-  get $icon() {
-    return this.querySelector("px-icon");
+  createGridding(value) {
+    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"
+    );
+    if (value !== null) {
+      breakpoints.forEach(({ prop, gridProp, attr }) => {
+        if (this[prop]) {
+          this.$grid[gridProp] = "3";
+          spanElement.setAttribute(attr, "2");
+        }
+      });
+    } else {
+      breakpoints.forEach(({ gridProp, attr }) => {
+        this.$grid[gridProp] = "1";
+        spanElement.removeAttribute(attr);
+      });
+    }
+  }
+  get $grid() {
+    return this.shadowRoot.querySelector("px-grid");
+  }
+  get $container() {
+    return this.shadowRoot.querySelector(".banner-container");
   }
   get $children() {
-    return this.querySelectorAll("px-breadcrumb-item > *");
+    return this.querySelectorAll("px-banner > *");
   }
-  get inverted() {
-    return this.hasAttribute("inverted");
+  get backgroundColor() {
+    return this.getAttribute("background-color");
   }
-  set inverted(value) {
+  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 inverted() {
+    return this.hasAttribute("inverted");
+  }
+  set inverted(value) {
+    if (value) {
+      this.setAttribute("inverted", "");
+    } else {
+      this.removeAttribute("inverted");
+    }
+  }
+  get reduced() {
+    return this.hasAttribute("reduced");
+  }
+  set reduced(value) {
+    if (value) {
+      this.setAttribute("reduced", "");
+    } else {
+      this.removeAttribute("reduced");
+    }
+  }
+  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");
+    }
+  }
+};
+_Banner.nativeName = "div";
+let Banner = _Banner;
+if (!customElements.get("px-banner")) {
+  customElements.define("px-banner", Banner);
+}
+const breadcrumbCss = `:host{display:block}:host *{box-sizing:border-box}.breadcrumb{font-family:var(--px-font-family);color:var(--px-color-text-neutral-default);margin:calc(var(--px-spacing-s-mobile) * -1) 0 0 0;padding:0}.breadcrumb div[role=list]{display:flex;flex-wrap:wrap;align-items:center}.breadcrumb ::slotted(px-breadcrumb-item){margin-top:var(--px-spacing-s-mobile)}.breadcrumb ::slotted(px-breadcrumb-item:not(:last-child)){display:flex;align-items:center;margin-right:var(--px-spacing-xs-mobile)}.breadcrumb ::slotted(px-breadcrumb-item:not(:last-child)):after{display:inline-block;content:"";width:16px;height:16px;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:cover;mask-size:cover;-webkit-mask-position:50% 50%;mask-position:50% 50%;-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M5.90255 3.61987C5.6515 3.8749 5.6515 4.2884 5.90255 4.54343L9.30512 8.00002L5.90255 11.4566C5.6515 11.7116 5.6515 12.1251 5.90255 12.3802C6.1536 12.6352 6.56063 12.6352 6.81169 12.3802L10.6688 8.4618C10.9199 8.20677 10.9199 7.79327 10.6688 7.53823L6.81169 3.61987C6.56063 3.36483 6.1536 3.36483 5.90255 3.61987Z' fill='%23252525'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M5.90255 3.61987C5.6515 3.8749 5.6515 4.2884 5.90255 4.54343L9.30512 8.00002L5.90255 11.4566C5.6515 11.7116 5.6515 12.1251 5.90255 12.3802C6.1536 12.6352 6.56063 12.6352 6.81169 12.3802L10.6688 8.4618C10.9199 8.20677 10.9199 7.79327 10.6688 7.53823L6.81169 3.61987C6.56063 3.36483 6.1536 3.36483 5.90255 3.61987Z' fill='%23252525'/%3E%3C/svg%3E");background-color:currentColor;color:var(--px-color-icon-neutral-default);margin-left:var(--px-spacing-xs-mobile)}@media only screen and (min-width: 48em){.breadcrumb{margin:calc(var(--px-spacing-s-tablet) * -1) 0 0 0}.breadcrumb ::slotted(px-breadcrumb-item){margin-top:var(--px-spacing-s-tablet)}.breadcrumb ::slotted(px-breadcrumb-item:not(:last-child)){margin-right:var(--px-spacing-xs-tablet)}.breadcrumb ::slotted(px-breadcrumb-item:not(:last-child)):after{margin-left:var(--px-spacing-xs-tablet)}}@media only screen and (min-width: 64.0625em){.breadcrumb{margin:calc(var(--px-spacing-s-laptop) * -1) 0 0 0}.breadcrumb ::slotted(px-breadcrumb-item){margin-top:var(--px-spacing-s-laptop)}.breadcrumb ::slotted(px-breadcrumb-item:not(:last-child)){margin-right:var(--px-spacing-xs-laptop)}.breadcrumb ::slotted(px-breadcrumb-item:not(:last-child)):after{margin-left:var(--px-spacing-xs-laptop)}}@media only screen and (min-width: 90.0625em){.breadcrumb{margin:calc(var(--px-spacing-s-desktop) * -1) 0 0 0}.breadcrumb ::slotted(px-breadcrumb-item){margin-top:var(--px-spacing-s-desktop)}.breadcrumb ::slotted(px-breadcrumb-item:not(:last-child)){margin-right:var(--px-spacing-xs-desktop)}.breadcrumb ::slotted(px-breadcrumb-item:not(:last-child)):after{margin-left:var(--px-spacing-xs-desktop)}}:host([inverted]) .breadcrumb{color:var(--px-color-text-neutral-inverted)}:host([inverted]) .breadcrumb ::slotted(px-breadcrumb-item:not(:last-child)):after{color:var(--px-color-icon-neutral-inverted)}`;
+const breadcrumbStyles = new CSSStyleSheet();
+breadcrumbStyles.replaceSync(breadcrumbCss);
+class Breadcrumb extends WithExtraAttributes {
+  template() {
+    return `
+      <nav class="breadcrumb" aria-label="${this.ariaLabel || "Breadcrumb"}">
+        <div role="list">
+          <slot></slot>
+        </div>
+      </nav>
+    `;
+  }
+  constructor() {
+    super(breadcrumbStyles);
+    this.shadowRoot.innerHTML = this.template();
+  }
+  static get observedAttributes() {
+    return [...super.observedAttributes, "inverted", "aria-label"];
+  }
+  attributeChangedCallback(attrName, oldValue, newValue) {
+    if (oldValue !== newValue) {
+      switch (attrName) {
+        case "aria-label":
+          this.$el.setAttribute("aria-label", this.ariaLabel);
+          break;
+        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 $el() {
+    return this.shadowRoot.querySelector(".breadcrumb");
+  }
+  get $children() {
+    return this.querySelectorAll("px-breadcrumb > *");
+  }
+  get inverted() {
+    return this.hasAttribute("inverted");
+  }
+  set inverted(value) {
+    if (value) {
+      this.setAttribute("inverted", "");
+    } else {
+      this.removeAttribute("inverted");
+    }
+  }
+  get ariaLabel() {
+    return this.getAttribute("aria-label");
+  }
+  set ariaLabel(value) {
+    if (value) {
+      this.setAttribute("aria-label", value);
+    } else {
+      this.removeAttribute("aria-label");
+    }
+  }
+}
+if (!customElements.get("px-breadcrumb")) {
+  customElements.define("px-breadcrumb", Breadcrumb);
+}
+const breadcrumbItemCss = ":host{display:block}:host *{box-sizing:border-box}.breadcrumb-item{display:flex}:host:has(px-a[variant=icon-link][color=inherit]) .breadcrumb-item{color:var(--px-color-icon-accent-default)}:host:has(px-a[variant=icon-link][color=inherit]) .breadcrumb-item:hover{color:var(--px-color-text-state-hover-default)}:host:not(:has(px-a[variant=icon-link][color=inherit])) .breadcrumb-item{line-height:var(--px-font-line-height-s);font-size:var(--px-text-size-link-s-mobile)}@media only screen and (min-width: 48em){:host:not(:has(px-a[variant=icon-link][color=inherit])) .breadcrumb-item{font-size:var(--px-text-size-link-s-tablet)}}@media only screen and (min-width: 64.0625em){:host:not(:has(px-a[variant=icon-link][color=inherit])) .breadcrumb-item{font-size:var(--px-text-size-link-s-laptop)}}@media only screen and (min-width: 90.0625em){:host:not(:has(px-a[variant=icon-link][color=inherit])) .breadcrumb-item{font-size:var(--px-text-size-link-s-desktop)}}:host([inverted]):has(px-a[variant=icon-link][color=inherit]) .breadcrumb-item{color:var(--px-color-icon-accent-inverted)}:host([inverted]):has(px-a[variant=icon-link][color=inherit]) .breadcrumb-item:hover{color:var(--px-color-text-state-hover-inverted)}";
+const breadcrumbItemStyles = new CSSStyleSheet();
+breadcrumbItemStyles.replaceSync(breadcrumbItemCss);
+const _BreadcrumbItem = class _BreadcrumbItem extends PxElement {
+  constructor() {
+    super(breadcrumbItemStyles);
+    this.template = () => `<div class="breadcrumb-item" role="listitem"><slot></slot></div>`;
+    if (this.shadowRoot) {
+      this.shadowRoot.innerHTML = this.template();
+    }
+  }
+  static get observedAttributes() {
+    return [...super.observedAttributes, "inverted"];
+  }
+  connectedCallback() {
+    if (this.$icon) {
+      this.$icon.setAttribute("size", "s");
+    }
+    if (!this.$link) {
+      this.$el.setAttribute("aria-current", "page");
+    }
+  }
+  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 $link() {
+    return this.querySelector("px-a");
+  }
+  get $icon() {
+    return this.querySelector("px-icon");
+  }
+  get $children() {
+    return this.querySelectorAll("px-breadcrumb-item > *");
+  }
+  get inverted() {
+    return this.hasAttribute("inverted");
+  }
+  set inverted(value) {
     if (value) {
       this.setAttribute("inverted", "");
     } else {
@@ -3701,7 +4074,6 @@ const _Button = class _Button extends PxElement {
     ];
   }
   connectedCallback() {
-    super.connectedCallback();
     const icons = this.querySelectorAll("px-icon");
     if (icons) {
       icons.forEach((icon) => {
@@ -3954,7 +4326,7 @@ const _ButtonIcon = class _ButtonIcon extends PxElement {
   constructor() {
     super(buttonIconStyles);
     this.template = () => `<slot></slot>`;
-    const $root = document.createElement(this.nativeName);
+    const $root = document.createElement(_ButtonIcon.nativeName);
     $root.classList.add("btn-icon");
     $root.innerHTML = this.template();
     this.shadowRoot.appendChild($root);
@@ -3970,7 +4342,6 @@ const _ButtonIcon = class _ButtonIcon extends PxElement {
     ];
   }
   connectedCallback() {
-    super.connectedCallback();
     const icon = this.querySelector("px-icon");
     if (icon) {
       const iconSize = icon.getAttribute("size");
@@ -4089,7 +4460,7 @@ let ButtonIcon = _ButtonIcon;
 if (!customElements.get("px-button-icon")) {
   customElements.define("px-button-icon", ButtonIcon);
 }
-const styles$E = ':host{--card-background-color-default: var(--px-color-background-container-light-default);--card-media-left-size-s: 120px;--card-media-left-size-m: 250px;--card-media-left-size: var(--card-media-left-size-s);display:block}:host *{box-sizing:border-box}:host picture{display:none}:host([media-position="background"]) picture{display:none!important}:host(:not([media-position="background"])) picture:has(img[src]){display:block}.card{display:block;height:100%;position:relative;text-decoration:none;color:var(--px-color-text-neutral-default);--btn-transition: all .2s ease-in-out 0s;transition:var(--btn-transition);border-radius:var(--px-radius-main);outline-color:var(--px-color-border-focus-outline-default);outline-width:var(--px-focus-outline-mobile);overflow:hidden;border:var(--px-size-border-m) solid transparent}.card .contrast-helper{display:none;position:absolute;top:0;right:0;bottom:0;left:0;z-index:1;pointer-events:none}:host([contrast-helper-gradient]) :is(.card .contrast-helper){display:block;background-image:linear-gradient(90deg,#fff 23.43%,#fff0 81.69%)}:host([contrast-helper-overlay]) :is(.card .contrast-helper){display:block;background-color:#ffffffb3}.card .card__content{position:relative;flex-grow:1;z-index:2}.card px-container{background-color:var(--card-background-color-default)}.card:focus-visible{outline-offset:var(--px-focus-offset-mobile);outline-style:solid}.card:hover{border-color:var(--px-color-border-state-hover-default)}.card:hover px-container{background-color:var(--px-color-background-state-hover-bordered-default)}px-container{height:100%}::slotted([slot="title"]){font-family:var(--px-font-family);line-height:var(--px-line-height-ratio-l);font-size:var(--px-text-size-heading-xl-mobile);font-weight:var(--px-font-weight-title);color:var(--px-color-text-brand-default)}::slotted([slot="content"]){font-family:var(--px-font-family);line-height:var(--px-font-line-height-m);font-size:var(--px-text-size-body-m-mobile);font-weight:var(--px-font-weight-body);color:var(--px-color-text-neutral-default)}:host([media-left-size="s"]) img{--card-media-left-size: var(--card-media-left-size-s)}:host([media-left-size="m"]) img{--card-media-left-size: var(--card-media-left-size-m)}@media only screen and (max-width: 48em){.hidden--mobile,.shown--tablet,.shown--laptop{display:none}.hidden--tablet,.hidden--laptop,.shown--mobile{display:block}:host([media-left-size--mobile="m"]) img{--card-media-left-size: var(--card-media-left-size-m)}:host([media-left-size--mobile="s"]) img{--card-media-left-size: var(--card-media-left-size-s)}:host([media-position--mobile="background"]) picture{display:none!important}:host(:not([media-position--mobile="background"],[media-position="background"])) picture:has(source:nth-child(1)[srcset]){display:block}:host([media-position="top"]) img,:host([media-position--mobile="top"]) img{display:block;height:100%;width:100%;aspect-ratio:initial;object-fit:initial}:host([media-position="left"]:not([media-position--mobile="top"])) img,:host([media-position--mobile="left"]) img{height:100%;aspect-ratio:1 / 1;width:var(--card-media-left-size);object-fit:cover}.media-position-background:not(.media-position-top--mobile,.media-position-left--mobile,.media-position-none--mobile) px-container,.media-position-background--mobile px-container{background-color:transparent}.media-position-background:not(.media-position-top--mobile,.media-position-left--mobile,.media-position-none--mobile):hover px-container,.media-position-background--mobile:hover px-container{background-color:transparent}}@media only screen and (min-width: 48em) and (max-width: 64em){.hidden--tablet,.shown--mobile,.shown--laptop{display:none}.hidden--mobile,.hidden--laptop,.shown--tablet{display:block}:host([media-left-size--tablet="m"]) img{--card-media-left-size: var(--card-media-left-size-m)}:host([media-left-size--tablet="s"]) img{--card-media-left-size: var(--card-media-left-size-s)}:host([media-position--tablet="background"]) picture{display:none!important}:host(:not([media-position--mobile="background"],[media-position="background"])) picture:has(source:nth-child(2)[srcset]){display:block}:host([media-position="left"]:not([media-position--tablet="top"])) img,:host([media-position--tablet="left"]) img{height:100%;aspect-ratio:1 / 1;width:var(--card-media-left-size);object-fit:cover}:host([media-position="top"]) img,:host([media-position--tablet="top"]) img{display:block;height:100%;width:100%;aspect-ratio:initial;object-fit:initial}.media-position-background:not(.media-position-top--tablet,.media-position-left--tablet,.media-position-none--tablet) px-container,.media-position-background--tablet px-container{background-color:transparent}.media-position-background:not(.media-position-top--tablet,.media-position-left--tablet,.media-position-none--tablet):hover px-container,.media-position-background--tablet:hover px-container{background-color:transparent}}@media only screen and (min-width: 48em){.card{outline-width:var(--px-focus-outline-tablet)}.card:focus-visible{outline-offset:var(--px-focus-offset-tablet)}::slotted([slot="title"]){font-size:var(--px-text-size-heading-xl-tablet)}::slotted([slot="content"]){font-size:var(--px-text-size-body-m-tablet)}}@media only screen and (min-width: 64.0625em){.hidden--laptop,.shown--mobile,.shown--tablet{display:none}.hidden--mobile,.hidden--tablet,.shown--laptop{display:block}:host([media-left-size--laptop="m"]) img{--card-media-left-size: var(--card-media-left-size-m)}:host([media-left-size--laptop="s"]) img{--card-media-left-size: var(--card-media-left-size-s)}:host([media-position--laptop="background"]) picture{display:none!important}:host(:not([media-position--mobile="background"],[media-position="background"])) picture:has(source:nth-child(3)[srcset]){display:block}:host([media-position="left"]:not([media-position--laptop="top"])) img,:host([media-position--laptop="left"]) img{height:100%;aspect-ratio:1 / 1;width:var(--card-media-left-size);object-fit:cover}:host([media-position="top"]) img,:host([media-position--laptop="top"]) img{display:block;height:100%;width:100%;aspect-ratio:initial;object-fit:initial}.card{outline-width:var(--px-focus-outline-laptop)}.card:focus-visible{outline-offset:var(--px-focus-offset-laptop)}::slotted([slot="title"]){font-size:var(--px-text-size-heading-xl-laptop)}::slotted([slot="content"]){font-size:var(--px-text-size-body-m-laptop)}img[src=null]{display:none}.media-position-background:not(.media-position-top--laptop,.media-position-left--laptop,.media-position-none--laptop) px-container,.media-position-background--laptop px-container{background-color:transparent}.media-position-background:not(.media-position-top--laptop,.media-position-left--laptop,.media-position-none--laptop):hover px-container,.media-position-background--laptop:hover px-container{background-color:transparent}}:host([inverted]){--card-background-color-inverted: var(--px-color-background-container-light-inverted)}:host([inverted]) .card{color:var(--px-color-text-neutral-inverted);outline-color:var(--px-color-border-focus-outline-inverted)}:host([contrast-helper-gradient]) :is(:host([inverted]) .card .contrast-helper){background-image:linear-gradient(90deg,#000 23.43%,#0000 81.69%)}:host([contrast-helper-overlay]) :is(:host([inverted]) .card .contrast-helper){background-color:#0006}:host([inverted]) .card px-container{background-color:var(--card-background-color-inverted)}:host([inverted]) .card:hover{border-color:var(--px-color-border-state-hover-inverted)}:host([inverted]) .card:hover px-container{background-color:var( --px-color-background-state-hover-bordered-inverted )}:host([inverted]) ::slotted([slot="title"]){color:var(--px-color-text-brand-inverted)}:host([inverted]) ::slotted([slot="content"]){color:var(--px-color-text-neutral-inverted)}@media only screen and (max-width: 47.938em){:host([inverted]) .media-position-background:not(.media-position-top--mobile,.media-position-left--mobile,.media-position-none--mobile) px-container,:host([inverted]) .media-position-background--mobile px-container{background-color:transparent}:host([inverted]) .media-position-background:not(.media-position-top--mobile,.media-position-left--mobile,.media-position-none--mobile):hover px-container,:host([inverted]) .media-position-background--mobile:hover px-container{background-color:transparent}}@media only screen and (min-width: 48em) and (max-width: 64em){:host([inverted]) .media-position-background:not(.media-position-top--tablet,.media-position-left--tablet,.media-position-none--tablet) px-container,:host([inverted]) .media-position-background--tablet px-container{background-color:transparent}:host([inverted]) .media-position-background:not(.media-position-top--tablet,.media-position-left--tablet,.media-position-none--tablet):hover px-container,:host([inverted]) .media-position-background--tablet:hover px-container{background-color:transparent}}@media only screen and (min-width: 64.0625em){:host([inverted]) .media-position-background:not(.media-position-top--laptop,.media-position-left--laptop,.media-position-none--laptop) px-container,:host([inverted]) .media-position-background--laptop px-container{background-color:transparent}:host([inverted]) .media-position-background:not(.media-position-top--laptop,.media-position-left--laptop,.media-position-none--laptop):hover px-container,:host([inverted]) .media-position-background--laptop:hover px-container{background-color:transparent}}';
+const styles$E = ':host{--card-background-color-default: var(--px-color-background-container-light-default);--card-media-left-size-s: 120px;--card-media-left-size-m: 250px;--card-media-left-size: var(--card-media-left-size-s);display:block}:host *{box-sizing:border-box}:host picture{display:none}:host([media-position="background"]) picture{display:none!important}:host(:not([media-position="background"])) picture:has(img[src]){display:block}.card{display:block;height:100%;position:relative;text-decoration:none;color:var(--px-color-text-neutral-default);--btn-transition: all .2s ease-in-out 0s;transition:var(--btn-transition);border-radius:var(--px-radius-main);outline-color:var(--px-color-border-focus-outline-default);outline-width:var(--px-focus-outline-mobile);overflow:hidden;border:var(--px-size-border-m) solid transparent}.card .contrast-helper{display:none;position:absolute;top:0;right:0;bottom:0;left:0;z-index:1;pointer-events:none}:host([contrast-helper-gradient]) :is(.card .contrast-helper){display:block;background-image:linear-gradient(90deg,#fff 23.43%,#fff0 81.69%)}:host([contrast-helper-overlay]) :is(.card .contrast-helper){display:block;background-color:#ffffffb3}.card .card__content{position:relative;flex-grow:1;z-index:2}.card .card__content>px-vstack{height:100%}.card px-container{background-color:var(--card-background-color-default)}.card:focus-visible{outline-offset:var(--px-focus-offset-mobile);outline-style:solid}.card:hover{border-color:var(--px-color-border-state-hover-default)}.card:hover px-container{background-color:var(--px-color-background-state-hover-bordered-default)}px-container{height:100%}::slotted([slot="title"]){font-family:var(--px-font-family);line-height:var(--px-line-height-ratio-l);font-size:var(--px-text-size-heading-xl-mobile);font-weight:var(--px-font-weight-title);color:var(--px-color-text-brand-default);flex-grow:1}::slotted([slot="content"]){font-family:var(--px-font-family);line-height:var(--px-font-line-height-m);font-size:var(--px-text-size-body-m-mobile);font-weight:var(--px-font-weight-body);color:var(--px-color-text-neutral-default)}:host([media-left-size="s"]) img{--card-media-left-size: var(--card-media-left-size-s)}:host([media-left-size="m"]) img{--card-media-left-size: var(--card-media-left-size-m)}@media only screen and (max-width: 48em){.hidden--mobile,.shown--tablet,.shown--laptop{display:none}.hidden--tablet,.hidden--laptop,.shown--mobile{display:block}:host([media-left-size--mobile="m"]) img{--card-media-left-size: var(--card-media-left-size-m)}:host([media-left-size--mobile="s"]) img{--card-media-left-size: var(--card-media-left-size-s)}:host([media-position--mobile="background"]) picture{display:none!important}:host(:not([media-position--mobile="background"],[media-position="background"])) picture:has(source:nth-child(1)[srcset]){display:block}:host([media-position="top"]) img,:host([media-position--mobile="top"]) img{display:block;height:100%;width:100%;aspect-ratio:initial;object-fit:initial}:host([media-position="left"]:not([media-position--mobile="top"])) img,:host([media-position--mobile="left"]) img{height:100%;aspect-ratio:1 / 1;width:var(--card-media-left-size);object-fit:cover}.media-position-background:not(.media-position-top--mobile,.media-position-left--mobile,.media-position-none--mobile) px-container,.media-position-background--mobile px-container{background-color:transparent}.media-position-background:not(.media-position-top--mobile,.media-position-left--mobile,.media-position-none--mobile):hover px-container,.media-position-background--mobile:hover px-container{background-color:transparent}}@media only screen and (min-width: 48em) and (max-width: 64em){.hidden--tablet,.shown--mobile,.shown--laptop{display:none}.hidden--mobile,.hidden--laptop,.shown--tablet{display:block}:host([media-left-size--tablet="m"]) img{--card-media-left-size: var(--card-media-left-size-m)}:host([media-left-size--tablet="s"]) img{--card-media-left-size: var(--card-media-left-size-s)}:host([media-position--tablet="background"]) picture{display:none!important}:host(:not([media-position--mobile="background"],[media-position="background"])) picture:has(source:nth-child(2)[srcset]){display:block}:host([media-position="left"]:not([media-position--tablet="top"])) img,:host([media-position--tablet="left"]) img{height:100%;aspect-ratio:1 / 1;width:var(--card-media-left-size);object-fit:cover}:host([media-position="top"]) img,:host([media-position--tablet="top"]) img{display:block;height:100%;width:100%;aspect-ratio:initial;object-fit:initial}.media-position-background:not(.media-position-top--tablet,.media-position-left--tablet,.media-position-none--tablet) px-container,.media-position-background--tablet px-container{background-color:transparent}.media-position-background:not(.media-position-top--tablet,.media-position-left--tablet,.media-position-none--tablet):hover px-container,.media-position-background--tablet:hover px-container{background-color:transparent}}@media only screen and (min-width: 48em){.card{outline-width:var(--px-focus-outline-tablet)}.card:focus-visible{outline-offset:var(--px-focus-offset-tablet)}::slotted([slot="title"]){font-size:var(--px-text-size-heading-xl-tablet)}::slotted([slot="content"]){font-size:var(--px-text-size-body-m-tablet)}}@media only screen and (min-width: 64.0625em){.hidden--laptop,.shown--mobile,.shown--tablet{display:none}.hidden--mobile,.hidden--tablet,.shown--laptop{display:block}:host([media-left-size--laptop="m"]) img{--card-media-left-size: var(--card-media-left-size-m)}:host([media-left-size--laptop="s"]) img{--card-media-left-size: var(--card-media-left-size-s)}:host([media-position--laptop="background"]) picture{display:none!important}:host(:not([media-position--mobile="background"],[media-position="background"])) picture:has(source:nth-child(3)[srcset]){display:block}:host([media-position="left"]:not([media-position--laptop="top"])) img,:host([media-position--laptop="left"]) img{height:100%;aspect-ratio:1 / 1;width:var(--card-media-left-size);object-fit:cover}:host([media-position="top"]) img,:host([media-position--laptop="top"]) img{display:block;height:100%;width:100%;aspect-ratio:initial;object-fit:initial}.card{outline-width:var(--px-focus-outline-laptop)}.card:focus-visible{outline-offset:var(--px-focus-offset-laptop)}::slotted([slot="title"]){font-size:var(--px-text-size-heading-xl-laptop)}::slotted([slot="content"]){font-size:var(--px-text-size-body-m-laptop)}img[src=null]{display:none}.media-position-background:not(.media-position-top--laptop,.media-position-left--laptop,.media-position-none--laptop) px-container,.media-position-background--laptop px-container{background-color:transparent}.media-position-background:not(.media-position-top--laptop,.media-position-left--laptop,.media-position-none--laptop):hover px-container,.media-position-background--laptop:hover px-container{background-color:transparent}}:host([inverted]){--card-background-color-inverted: var(--px-color-background-container-light-inverted)}:host([inverted]) .card{color:var(--px-color-text-neutral-inverted);outline-color:var(--px-color-border-focus-outline-inverted)}:host([contrast-helper-gradient]) :is(:host([inverted]) .card .contrast-helper){background-image:linear-gradient(90deg,#000 23.43%,#0000 81.69%)}:host([contrast-helper-overlay]) :is(:host([inverted]) .card .contrast-helper){background-color:#0006}:host([inverted]) .card px-container{background-color:var(--card-background-color-inverted)}:host([inverted]) .card:hover{border-color:var(--px-color-border-state-hover-inverted)}:host([inverted]) .card:hover px-container{background-color:var( --px-color-background-state-hover-bordered-inverted )}:host([inverted]) ::slotted([slot="title"]){color:var(--px-color-text-brand-inverted)}:host([inverted]) ::slotted([slot="content"]){color:var(--px-color-text-neutral-inverted)}@media only screen and (max-width: 47.938em){:host([inverted]) .media-position-background:not(.media-position-top--mobile,.media-position-left--mobile,.media-position-none--mobile) px-container,:host([inverted]) .media-position-background--mobile px-container{background-color:transparent}:host([inverted]) .media-position-background:not(.media-position-top--mobile,.media-position-left--mobile,.media-position-none--mobile):hover px-container,:host([inverted]) .media-position-background--mobile:hover px-container{background-color:transparent}}@media only screen and (min-width: 48em) and (max-width: 64em){:host([inverted]) .media-position-background:not(.media-position-top--tablet,.media-position-left--tablet,.media-position-none--tablet) px-container,:host([inverted]) .media-position-background--tablet px-container{background-color:transparent}:host([inverted]) .media-position-background:not(.media-position-top--tablet,.media-position-left--tablet,.media-position-none--tablet):hover px-container,:host([inverted]) .media-position-background--tablet:hover px-container{background-color:transparent}}@media only screen and (min-width: 64.0625em){:host([inverted]) .media-position-background:not(.media-position-top--laptop,.media-position-left--laptop,.media-position-none--laptop) px-container,:host([inverted]) .media-position-background--laptop px-container{background-color:transparent}:host([inverted]) .media-position-background:not(.media-position-top--laptop,.media-position-left--laptop,.media-position-none--laptop):hover px-container,:host([inverted]) .media-position-background--laptop:hover px-container{background-color:transparent}}';
 const styleSheet$y = new CSSStyleSheet();
 styleSheet$y.replaceSync(styles$E);
 const cardBackgroundColorValues = [
@@ -4100,15 +4471,15 @@ const cardBackgroundColorValues = [
 const cardPaddingValues = ["", "s", "m", "l"];
 const cardMediaLeftSizeValues = ["", "s", "m"];
 const cardMediaPositionValues = ["", "top", "left", "background"];
-const attributeBreakpointCSSSelector$2 = (attributeName, attributeValue, device) => `:host([${attributeName}${device ? `--${device}` : ""}='${attributeValue}']) .card__content`;
+const attributeBreakpointCSSSelector$1 = (attributeName, attributeValue, device) => `:host([${attributeName}${device ? `--${device}` : ""}='${attributeValue}']) .card__content`;
 const paddingPrefix = "px-padding";
-const _Card = class _Card extends PxElement {
+const _Card = class _Card extends VerticallyExtendedElement {
   constructor() {
     super(
       styleSheet$y,
       cssTokenBreakpoints(
         "padding",
-        attributeBreakpointCSSSelector$2,
+        attributeBreakpointCSSSelector$1,
         cardPaddingValues,
         paddingPrefix,
         "--card__content-padding"
@@ -4131,7 +4502,7 @@ const _Card = class _Card extends PxElement {
             </picture>
             <div class="card__content">
               <px-vstack gap="default">
-                <px-vstack gap="s">
+                <px-vstack gap="s" grow="1">
                   <slot name="title"></slot>
                   <slot name="content"></slot>
                 </px-vstack>
@@ -4718,7 +5089,7 @@ function throttle(func, wait, options) {
 }
 const styleSheet$w = new CSSStyleSheet();
 styleSheet$w.replaceSync(styles$D);
-const attributeBreakpointCSSSelector$1 = (attributeName, attributeValue, device) => `:host([${attributeName}${device ? `--${device}` : ""}='${attributeValue}']) .carousel`;
+const attributeBreakpointCSSSelector = (attributeName, attributeValue, device) => `:host([${attributeName}${device ? `--${device}` : ""}='${attributeValue}']) .carousel`;
 const prefix = "px-spacing";
 const visibleItemCalcFunction = (spacingToken) => (numberOfItems, device) => `calc(((100%  - ${Math.max(parseInt(numberOfItems), 2)}  * ( var(--px-spacing-${spacingToken}-${device}))) / ${numberOfItems}) - ( 64px / ${Math.max(parseInt(numberOfItems), 2)}))`;
 class Carousel extends HTMLElement {
@@ -4785,7 +5156,7 @@ class Carousel extends HTMLElement {
       styleSheet$w,
       cssTokenBreakpoints(
         "gap",
-        attributeBreakpointCSSSelector$1,
+        attributeBreakpointCSSSelector,
         gapValues,
         prefix
       )
@@ -5029,13 +5400,12 @@ const _Cell = class _Cell extends PxElement {
   }
   constructor() {
     super(styleSheet$v, commonStyleSheet$b);
-    const $root = document.createElement(this.nativeName);
+    const $root = document.createElement("div");
     $root.classList.add("cell");
     $root.innerHTML = this.template();
     this.shadowRoot.appendChild($root);
   }
   connectedCallback() {
-    super.connectedCallback();
     if (this.$slotVisual) {
       const slotVisualImg = this.querySelector('px-img[slot="visual"]');
       if (slotVisualImg) {
@@ -5335,13 +5705,12 @@ const _CellLink = class _CellLink extends PxElement {
   }
   constructor() {
     super(styleSheet$u, commonStyleSheet$a);
-    const $root = document.createElement(this.nativeName);
+    const $root = document.createElement(_CellLink.nativeName);
     $root.classList.add("cell-link");
     $root.innerHTML = this.template();
     this.shadowRoot.appendChild($root);
   }
   connectedCallback() {
-    super.connectedCallback();
     if (this.$slotVisual) {
       const slotVisualImg = this.querySelector('px-img[slot="visual"]');
       if (slotVisualImg) {
@@ -5574,13 +5943,12 @@ const _CellButton = class _CellButton extends PxElement {
   }
   constructor() {
     super(styleSheet$t, commonStyleSheet$9);
-    const $root = document.createElement(this.nativeName);
+    const $root = document.createElement(_CellButton.nativeName);
     $root.classList.add("cell-button");
     $root.innerHTML = this.template();
     this.shadowRoot.appendChild($root);
   }
   connectedCallback() {
-    super.connectedCallback();
     if (this.$slotVisual) {
       const slotVisualImg = this.querySelector('px-img[slot="visual"]');
       if (slotVisualImg) {
@@ -5762,6 +6130,7 @@ const _CellButton = class _CellButton extends PxElement {
   }
 };
 _CellButton.nativeName = "button";
+_CellButton.accessorExclusions = ["disabled"];
 let CellButton = _CellButton;
 if (!customElements.get("px-cell-button")) {
   customElements.define("px-cell-button", CellButton);
@@ -6828,7 +7197,6 @@ class Radio extends RadioBase {
     return [...super.observedAttributes, "state", "variant", "inverted"];
   }
   connectedCallback() {
-    super.connectedCallback();
     this.addEventListener("keypress", (e) => {
       e.stopPropagation();
       e.preventDefault();
@@ -7713,14 +8081,11 @@ const _ColorOption = class _ColorOption extends PxElement {
   }
   constructor() {
     super(styleSheet$s);
-    const $root = document.createElement(this.nativeName);
+    const $root = document.createElement("div");
     $root.classList.add("color-option");
     $root.innerHTML = this.template();
     this.shadowRoot.appendChild($root);
   }
-  connectedCallback() {
-    super.connectedCallback();
-  }
   static get observedAttributes() {
     return [...super.observedAttributes, "size", "device-color", "unavailable"];
   }
@@ -7810,13 +8175,12 @@ const _ColorOptionLink = class _ColorOptionLink extends PxElement {
   }
   constructor() {
     super(styleSheet$r);
-    const $root = document.createElement(this.nativeName);
+    const $root = document.createElement(_ColorOptionLink.nativeName);
     $root.classList.add("color-option-link");
     $root.innerHTML = this.template();
     this.shadowRoot.appendChild($root);
   }
   connectedCallback() {
-    super.connectedCallback();
     this.addEventListener("click", (e) => {
       e.preventDefault();
       this.clickColorOptionLink();
@@ -8200,6 +8564,224 @@ class Section extends HTMLElement {
 if (!customElements.get("px-section")) {
   customElements.define("px-section", Section);
 }
+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)}::slotted(h1),::slotted(h2),::slotted(h3),::slotted(h4),::slotted(h5),::slotted(h6){margin-bottom:var(--px-spacing-heading-to-content-mobile)}: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){::slotted(h1),::slotted(h2),::slotted(h3),::slotted(h4),::slotted(h5),::slotted(h6){margin-bottom:var(--px-spacing-heading-to-content-tablet)}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){::slotted(h1),::slotted(h2),::slotted(h3),::slotted(h4),::slotted(h5),::slotted(h6){margin-bottom:var(--px-spacing-heading-to-content-laptop)}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){::slotted(h1),::slotted(h2),::slotted(h3),::slotted(h4),::slotted(h5),::slotted(h6){margin-bottom:var(--px-spacing-heading-to-content-desktop)}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);
+  }
+  updateTextAlign(attrName, oldValue, newValue, attrValue) {
+    if (!this.checkName(attrValue, newValue)) {
+      console.error(`${newValue} is not a valid value for ${attrName}`);
+      return;
+    }
+    const updateStyle = (breakpoint, value) => {
+      if (value !== null && value !== "" && value !== "default") {
+        this.$el.style.setProperty(
+          `--heading-text-align--${breakpoint}`,
+          value
+        );
+      }
+    };
+    if (attrName === "text-align") {
+      ["mobile", "tablet", "laptop", "desktop"].forEach((breakpoint) => {
+        updateStyle(breakpoint, oldValue);
+        updateStyle(breakpoint, newValue);
+      });
+    } else {
+      const breakpoint = attrName.split("--")[1];
+      updateStyle(breakpoint, oldValue);
+      updateStyle(breakpoint, newValue);
+    }
+  }
+  get variant() {
+    return this.getAttribute("variant");
+  }
+  set variant(value) {
+    this.setAttribute("variant", value);
+  }
+  get color() {
+    return this.getAttribute("color");
+  }
+  set color(value) {
+    this.setAttribute("color", value);
+  }
+  get textAlign() {
+    return this.getAttribute("text-align");
+  }
+  set textAlign(value) {
+    this.setAttribute("text-align", value);
+  }
+  get textAlignMobile() {
+    return this.getAttribute("text-align--mobile");
+  }
+  set textAlignMobile(value) {
+    this.setAttribute("text-align--mobile", value);
+  }
+  get textAlignTablet() {
+    return this.getAttribute("text-align--tablet");
+  }
+  set textAlignTablet(value) {
+    this.setAttribute("text-align--tablet", value);
+  }
+  get textAlignLaptop() {
+    return this.getAttribute("text-align--laptop");
+  }
+  set textAlignLaptop(value) {
+    this.setAttribute("text-align--laptop", value);
+  }
+  get textAlignDesktop() {
+    return this.getAttribute("text-align--desktop");
+  }
+  set textAlignDesktop(value) {
+    this.setAttribute("text-align--desktop", value);
+  }
+  get inverted() {
+    return this.getAttribute("inverted");
+  }
+  set inverted(value) {
+    this.setAttribute("inverted", value);
+  }
+}
+const _H1 = class _H1 extends AbstractHeading {
+  constructor() {
+    super("h1");
+  }
+};
+_H1.nativeName = "h1";
+let H1 = _H1;
+if (!customElements.get("px-h1")) {
+  customElements.define("px-h1", H1);
+}
+const _H2 = class _H2 extends AbstractHeading {
+  constructor() {
+    super("h2");
+  }
+};
+_H2.nativeName = "h2";
+let H2 = _H2;
+if (!customElements.get("px-h2")) {
+  customElements.define("px-h2", H2);
+}
+const _H3 = class _H3 extends AbstractHeading {
+  constructor() {
+    super("h3");
+  }
+};
+_H3.nativeName = "h3";
+let H3 = _H3;
+if (!customElements.get("px-h3")) {
+  customElements.define("px-h3", H3);
+}
+const _H4 = class _H4 extends AbstractHeading {
+  constructor() {
+    super("h4");
+  }
+};
+_H4.nativeName = "h4";
+let H4 = _H4;
+if (!customElements.get("px-h4")) {
+  customElements.define("px-h4", H4);
+}
+const _H5 = class _H5 extends AbstractHeading {
+  constructor() {
+    super("h5");
+  }
+};
+_H5.nativeName = "h5";
+let H5 = _H5;
+if (!customElements.get("px-h5")) {
+  customElements.define("px-h5", H5);
+}
+const _H6 = class _H6 extends AbstractHeading {
+  constructor() {
+    super("h6");
+  }
+};
+_H6.nativeName = "h6";
+let H6 = _H6;
+if (!customElements.get("px-h6")) {
+  customElements.define("px-h6", H6);
+}
 const contentHeaderStyles = new CSSStyleSheet();
 contentHeaderStyles.replaceSync(contentHeaderCss);
 const _ContentHeader = class _ContentHeader extends PxElement {
@@ -8248,8 +8830,6 @@ const _ContentHeader = class _ContentHeader extends PxElement {
     ];
   }
   connectedCallback() {
-    var _a;
-    (_a = super.connectedCallback) == null ? void 0 : _a.call(this);
     if (this.$subtitleSlot) {
       this.$subtitleSlot.setAttribute("variant", "subtitle");
     }
@@ -8299,7 +8879,7 @@ const _ContentHeader = class _ContentHeader extends PxElement {
         case "has-gridding--mobile":
         case "has-gridding--tablet":
         case "has-gridding--laptop":
-          this.createGridding();
+          this.createGridding(newValue);
           break;
         case "inverted":
           for (let i = 0; i < this.$children.length; i++) {
@@ -8316,7 +8896,7 @@ const _ContentHeader = class _ContentHeader extends PxElement {
       }
     }
   }
-  createGridding() {
+  createGridding(value) {
     const breakpoints = [
       { prop: "hasGridding", gridProp: "gridCols", attr: "col-span" },
       {
@@ -8338,12 +8918,19 @@ const _ContentHeader = class _ContentHeader extends PxElement {
     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");
-      }
-    });
+    if (value !== null) {
+      breakpoints.forEach(({ prop, gridProp, attr }) => {
+        if (this[prop]) {
+          this.$grid[gridProp] = "3";
+          spanElement.setAttribute(attr, "2");
+        }
+      });
+    } else {
+      breakpoints.forEach(({ gridProp, attr }) => {
+        this.$grid[gridProp] = "1";
+        spanElement.removeAttribute(attr);
+      });
+    }
   }
   get $grid() {
     return this.shadowRoot.querySelector("px-grid");
@@ -8527,7 +9114,7 @@ const _Separator = class _Separator extends PxElement {
   constructor() {
     var _a;
     super(styleSheet$p);
-    const $root = document.createElement(this.nativeName);
+    const $root = document.createElement(_Separator.nativeName);
     $root.classList.add("separator");
     this.internals = (_a = this.attachInternals) == null ? void 0 : _a.call(this);
     this.shadowRoot.appendChild($root);
@@ -8696,225 +9283,7 @@ 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)}::slotted(h1),::slotted(h2),::slotted(h3),::slotted(h4),::slotted(h5),::slotted(h6){margin-bottom:var(--px-spacing-heading-to-content-mobile)}: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){::slotted(h1),::slotted(h2),::slotted(h3),::slotted(h4),::slotted(h5),::slotted(h6){margin-bottom:var(--px-spacing-heading-to-content-tablet)}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){::slotted(h1),::slotted(h2),::slotted(h3),::slotted(h4),::slotted(h5),::slotted(h6){margin-bottom:var(--px-spacing-heading-to-content-laptop)}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){::slotted(h1),::slotted(h2),::slotted(h3),::slotted(h4),::slotted(h5),::slotted(h6){margin-bottom:var(--px-spacing-heading-to-content-desktop)}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);
-  }
-  updateTextAlign(attrName, oldValue, newValue, attrValue) {
-    if (!this.checkName(attrValue, newValue)) {
-      console.error(`${newValue} is not a valid value for ${attrName}`);
-      return;
-    }
-    const updateStyle = (breakpoint, value) => {
-      if (value !== null && value !== "" && value !== "default") {
-        this.$el.style.setProperty(
-          `--heading-text-align--${breakpoint}`,
-          value
-        );
-      }
-    };
-    if (attrName === "text-align") {
-      ["mobile", "tablet", "laptop", "desktop"].forEach((breakpoint) => {
-        updateStyle(breakpoint, oldValue);
-        updateStyle(breakpoint, newValue);
-      });
-    } else {
-      const breakpoint = attrName.split("--")[1];
-      updateStyle(breakpoint, oldValue);
-      updateStyle(breakpoint, newValue);
-    }
-  }
-  get variant() {
-    return this.getAttribute("variant");
-  }
-  set variant(value) {
-    this.setAttribute("variant", value);
-  }
-  get color() {
-    return this.getAttribute("color");
-  }
-  set color(value) {
-    this.setAttribute("color", value);
-  }
-  get textAlign() {
-    return this.getAttribute("text-align");
-  }
-  set textAlign(value) {
-    this.setAttribute("text-align", value);
-  }
-  get textAlignMobile() {
-    return this.getAttribute("text-align--mobile");
-  }
-  set textAlignMobile(value) {
-    this.setAttribute("text-align--mobile", value);
-  }
-  get textAlignTablet() {
-    return this.getAttribute("text-align--tablet");
-  }
-  set textAlignTablet(value) {
-    this.setAttribute("text-align--tablet", value);
-  }
-  get textAlignLaptop() {
-    return this.getAttribute("text-align--laptop");
-  }
-  set textAlignLaptop(value) {
-    this.setAttribute("text-align--laptop", value);
-  }
-  get textAlignDesktop() {
-    return this.getAttribute("text-align--desktop");
-  }
-  set textAlignDesktop(value) {
-    this.setAttribute("text-align--desktop", value);
-  }
-  get inverted() {
-    return this.getAttribute("inverted");
-  }
-  set inverted(value) {
-    this.setAttribute("inverted", value);
-  }
-}
-const _H1 = class _H1 extends AbstractHeading {
-  constructor() {
-    super("h1");
-  }
-};
-_H1.nativeName = "h1";
-let H1 = _H1;
-if (!customElements.get("px-h1")) {
-  customElements.define("px-h1", H1);
-}
-const _H2 = class _H2 extends AbstractHeading {
-  constructor() {
-    super("h2");
-  }
-};
-_H2.nativeName = "h2";
-let H2 = _H2;
-if (!customElements.get("px-h2")) {
-  customElements.define("px-h2", H2);
-}
-const _H3 = class _H3 extends AbstractHeading {
-  constructor() {
-    super("h3");
-  }
-};
-_H3.nativeName = "h3";
-let H3 = _H3;
-if (!customElements.get("px-h3")) {
-  customElements.define("px-h3", H3);
-}
-const _H4 = class _H4 extends AbstractHeading {
-  constructor() {
-    super("h4");
-  }
-};
-_H4.nativeName = "h4";
-let H4 = _H4;
-if (!customElements.get("px-h4")) {
-  customElements.define("px-h4", H4);
-}
-const _H5 = class _H5 extends AbstractHeading {
-  constructor() {
-    super("h5");
-  }
-};
-_H5.nativeName = "h5";
-let H5 = _H5;
-if (!customElements.get("px-h5")) {
-  customElements.define("px-h5", H5);
-}
-const _H6 = class _H6 extends AbstractHeading {
-  constructor() {
-    super("h6");
-  }
-};
-_H6.nativeName = "h6";
-let H6 = _H6;
-if (!customElements.get("px-h6")) {
-  customElements.define("px-h6", H6);
-}
-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 styles$u = ':host *{box-sizing:border-box}::backdrop{background:#0000004d;-webkit-backdrop-filter:saturate(180%) blur(15px);backdrop-filter:saturate(180%) blur(15px)}dialog{box-shadow:none;padding:0;margin:auto 0 0;border:0;width:100%;animation:dialog-fade-in-bottom .3s;border-radius:var(--px-radius-main) var(--px-radius-main) 0 0;background-color:var(--px-color-background-surface-default)}#container{display:grid;grid-template:"header close" auto "content content" 1fr "footer footer" auto / 1fr auto;column-gap:var(--px-spacing-l-mobile);padding:var(--px-padding-l-mobile);max-height:90dvh}#header{grid-area:header;margin-bottom:var(--px-spacing-l-mobile)}#close{grid-area:close}#content{grid-area:content;overflow:hidden;overflow-y:auto}#footer{grid-area:footer;margin-top:var(--px-spacing-l-mobile)}@media only screen and (min-width: 48em){#container{column-gap:var(--px-spacing-l-tablet);padding:var(--px-padding-l-tablet)}#header{margin-bottom:var(--px-spacing-l-tablet)}#footer{margin-top:var(--px-spacing-l-tablet)}}@media only screen and (min-width: 64.0625em){#container{column-gap:var(--px-spacing-l-laptop);padding:var(--px-padding-l-laptop);max-width:var(--px-content-wrapper-max-width-laptop);margin:0 auto}#header{margin-bottom:var(--px-spacing-l-laptop)}#footer{margin-top:var(--px-spacing-l-laptop)}:host([showfrom="right"]) dialog{width:75%;height:100%;margin:0 0 0 auto;animation:dialog-fade-in-right .3s;border-radius:var(--px-radius-main) 0 0 var(--px-radius-main)}:host([showfrom="right"]) #container{max-height:100%;height:100%;margin:0 auto 0 0}:host([showfrom="left"]) dialog{width:75%;height:100%;margin:0 auto 0 0;animation:dialog-fade-in-left .3s;border-radius:0 var(--px-radius-main) var(--px-radius-main) 0}:host([showfrom="left"]) #container{margin:0 0 0 auto}}@media only screen and (min-width: 90.0625em){#container{column-gap:var(--px-spacing-l-desktop);padding:var(--px-padding-l-desktop)}#header{margin-bottom:var(--px-spacing-l-desktop)}#footer{margin-top:var(--px-spacing-l-desktop)}}@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";
@@ -8923,18 +9292,18 @@ class Drawer extends HTMLElement {
     super();
     this.template = `<dialog popover role="dialog" aria-modal="true" >
     <div id="container">
-      <px-vstack gap="l" >
-        <px-vstack gap="heading-to-subtitle">
-          <px-h1 variant="title-2xl">
-            <slot name="title"></slot>
-          </px-h1>
-          <px-h2 variant="subtitle" color="neutral">
-            <slot name="subtitle"></slot>
-          </px-h2>
-        </px-vstack>
-        <div id="content">
-          <slot></slot>
-        </div>
+      <px-vstack gap="heading-to-subtitle" id="header">
+        <px-h1 variant="title-2xl">
+          <slot name="title"></slot>
+        </px-h1>
+        <px-h2 variant="subtitle" color="neutral">
+          <slot name="subtitle"></slot>
+        </px-h2>
+      </px-vstack>
+      <div id="content">
+        <slot></slot>
+      </div>
+      <px-vstack gap="l" id="footer">
         <px-separator size="m"></px-separator>
         <px-stack
           gap="s"
@@ -8947,7 +9316,7 @@ class Drawer extends HTMLElement {
           <slot name="footer"></slot>
         </px-stack>
       </px-vstack>
-      <px-button-icon variant="secondary" size="small">
+      <px-button-icon variant="secondary" size="small" id="close">
         <px-icon name="cross" from="lavender"></px-icon>
       </px-button-icon>
     </div>
@@ -8955,11 +9324,13 @@ class Drawer extends HTMLElement {
     this.attachShadow({ mode: "open" });
     this.shadowRoot.innerHTML = this.template;
     this.shadowRoot.adoptedStyleSheets = [styleSheet$o];
+    this.toggleFooterVisibility = this.toggleFooterVisibility.bind(this);
     if (!this.hasAttribute("showfrom")) {
       this.setAttribute("showfrom", "bottom");
     }
   }
   connectedCallback() {
+    var _a;
     if (this.hasAttribute("closedby")) {
       const $closer = document.querySelector(
         `#${this.getAttribute("closedby")}`
@@ -8979,9 +9350,11 @@ class Drawer extends HTMLElement {
     this.$closeButton.addEventListener("click", () => {
       this.hide();
     });
-    if (this.$buttons.length === 0) {
-      this.$separator.remove();
-    }
+    this.toggleFooterVisibility();
+    (_a = this.$slotFooter) == null ? void 0 : _a.addEventListener(
+      "slotchange",
+      this.toggleFooterVisibility
+    );
   }
   static get observedAttributes() {
     return ["open", "aria-label-close-button"];
@@ -9006,6 +9379,13 @@ class Drawer extends HTMLElement {
       }
     }
   }
+  disconnectedCallback() {
+    var _a;
+    (_a = this.$slotFooter) == null ? void 0 : _a.removeEventListener(
+      "slotchange",
+      this.toggleFooterVisibility
+    );
+  }
   show() {
     var _a, _b;
     (_b = (_a = this.$dialog).showPopover) == null ? void 0 : _b.call(_a);
@@ -9020,6 +9400,13 @@ class Drawer extends HTMLElement {
       })
     );
   }
+  toggleFooterVisibility() {
+    if (!this.$slottedFooter) {
+      this.$footer.style.display = "none";
+    } else {
+      this.$footer.style.display = "block";
+    }
+  }
   get $closeButton() {
     return this.shadowRoot.querySelector("px-button-icon");
   }
@@ -9029,11 +9416,16 @@ class Drawer extends HTMLElement {
   get open() {
     return this.hasAttribute("open");
   }
-  get $buttons() {
-    return this.querySelectorAll('[slot="footer"]');
+  get $slotFooter() {
+    return this.shadowRoot.querySelector(
+      'slot[name="footer"]'
+    );
+  }
+  get $slottedFooter() {
+    return this.querySelector('[slot="footer"]');
   }
-  get $separator() {
-    return this.shadowRoot.querySelector("px-separator");
+  get $footer() {
+    return this.shadowRoot.querySelector("#footer");
   }
   set open(value) {
     if (value) {
@@ -9246,556 +9638,204 @@ class Dropdown extends WithExtraAttributes {
   }
   set anchorAlignment(value) {
     if (anchorAlignmentValues.includes(value)) {
-      this.setAttribute("anchoralignment", value);
-    } else {
-      console.warn(
-        `Invalid anchor alignment value: ${value}. Using default ${defaultAnchorAlignment}.`
-      );
-      this.setAttribute("anchoralignment", defaultAnchorAlignment);
-    }
-  }
-  get usePolyfill() {
-    return this.hasAttribute("use-polyfill");
-  }
-  set usePolyfill(value) {
-    if (value) {
-      this.setAttribute("use-polyfill", "");
-    } else {
-      this.removeAttribute("use-polyfill");
-    }
-  }
-}
-_Dropdown_instances = new WeakSet();
-resetManualPopoverDisplay_fn = function() {
-  this.isAboutToClose = false;
-  this.$trigger.removeEventListener("click", __privateGet(this, _onTriggerClick));
-  this.$popoverElement.removeEventListener(
-    "beforetoggle",
-    __privateGet(this, _beforeToggle)
-  );
-  this.$popoverElement.removeEventListener("toggle", __privateGet(this, _onToggle));
-};
-_onTriggerClick = new WeakMap();
-_beforeToggle = new WeakMap();
-_onToggle = new WeakMap();
-/**
- * Handles the manual display of the popover when the trigger is clicked.
- * This is necessary for cases where the trigger is not a button or input element.
- * This method adds event listeners to the trigger element to toggle the popover.
- * It also manages the state of whether the popover is about to close or not to avoid
- * race conditions when the popover is toggled and the trigger click event is fired.
- */
-handleManualPopoverDisplay_fn = function() {
-  if (this.$trigger && !["button", "input"].includes(this.$trigger.localName)) {
-    this.$trigger.addEventListener("click", __privateGet(this, _onTriggerClick));
-    this.$popoverElement.addEventListener("beforetoggle", __privateGet(this, _beforeToggle));
-    this.$popoverElement.addEventListener("toggle", __privateGet(this, _onToggle));
-  }
-};
-if (!customElements.get("px-dropdown")) {
-  customElements.define("px-dropdown", Dropdown);
-}
-const fieldsetCss = ':host{display:block}:host *{box-sizing:border-box}fieldset{display:flex;flex-direction:column;margin:0;padding:0;border:0;font-family:var(--px-font-family)}fieldset legend{padding:0}fieldset ::slotted([slot="legend"]:not([shown--sr])){display:block;margin-bottom:var(--px-spacing-xs-mobile)}fieldset ::slotted([slot="error-text"]){display:none;font-size:var(--px-text-size-body-m-mobile);line-height:var(--px-line-height-ratio-l);color:var(--px-color-text-purpose-error-default);margin-bottom:var(--px-spacing-xs-mobile)}:host([state="error"]) ::slotted([slot="error-text"]){display:block}@media only screen and (min-width: 48em){fieldset ::slotted([slot="legend"]:not([shown--sr])){margin-bottom:var(--px-spacing-xs-tablet)}fieldset ::slotted([slot="error-text"]){font-size:var(--px-text-size-body-m-tablet)}}@media only screen and (min-width: 64.0625em){fieldset ::slotted([slot="legend"]:not([shown--sr])){margin-bottom:var(--px-spacing-xs-laptop)}fieldset ::slotted([slot="error-text"]){font-size:var(--px-text-size-body-m-laptop)}}@media only screen and (min-width: 90.0625em){fieldset ::slotted([slot="legend"]:not([shown--sr])){margin-bottom:var(--px-spacing-xs-desktop)}fieldset ::slotted([slot="error-text"]){font-size:var(--px-text-size-body-m-desktop)}}:host([inverted]) fieldset ::slotted([slot="error-text"]){color:var(--px-color-text-purpose-error-inverted)}';
-const fieldsetStyles = new CSSStyleSheet();
-fieldsetStyles.replaceSync(fieldsetCss);
-const _Fieldset = class _Fieldset extends PxElement {
-  constructor() {
-    super(fieldsetStyles);
-    this.template = () => `<fieldset >
-      <legend><slot name="legend"></slot></legend>
-      <slot name="error-text"></slot>
-      <slot></slot>
-    </fieldset>`;
-    this.shadowRoot.innerHTML = this.template();
-  }
-  static get observedAttributes() {
-    return [
-      ...super.observedAttributes,
-      "inverted",
-      "role",
-      "aria-required",
-      "aria-disabled",
-      "state"
-    ];
-  }
-  connectedCallback() {
-    var _a;
-    const hasLegend = ((_a = this.$slotLegend) == null ? void 0 : _a.assignedNodes().length) > 0;
-    if (!hasLegend) {
-      console.error(
-        '<px-fieldset> requires a slot="legend" containing the description of the fieldset.'
-      );
-    }
-    this.setupErrorState();
-    transferAccessibilityAttributes(this, this.$el, false);
-  }
-  attributeChangedCallback(attrName, oldValue, newValue) {
-    if (oldValue !== newValue) {
-      switch (attrName) {
-        case "disabled": {
-          const children = this.querySelectorAll(
-            "px-radio-group, px-radio, px-checkbox, px-fileupload, px-input, px-textarea, px-select, px-switch"
-          );
-          children.forEach((child) => {
-            child.setAttribute(attrName, "true");
-          });
-          break;
-        }
-        case "role":
-        case "aria-required":
-        case "aria-disabled":
-          if (newValue !== null) {
-            this.$el.setAttribute(attrName, this.getAttribute(attrName));
-            this.removeAttribute(attrName);
-          }
-          break;
-        case "state":
-          this.setupErrorState();
-          break;
-        default:
-          super.attributeChangedCallback(attrName, oldValue, newValue);
-          break;
-      }
-    }
-  }
-  setupErrorState() {
-    var _a;
-    const hasErrorText = ((_a = this.$slotError) == null ? void 0 : _a.assignedNodes().length) > 0;
-    if (this.state === "error" && !hasErrorText) {
-      console.error(
-        '<px-fieldset> with state="error" requires a slot="error-text" containing the error description.'
-      );
-    }
-    if (this.state === "error" && hasErrorText) {
-      const id = Math.random().toString(36).substr(2, 9);
-      this.$el.setAttribute("id", id);
-      this.$el.setAttribute("aria-describedby", `${id}-error-text`);
-      this.$el.setAttribute("aria-invalid", "true");
-      this.$slotError.setAttribute("id", `${id}-error-text`);
-    } else {
-      this.$el.removeAttribute("id");
-      this.$el.removeAttribute("aria-describedby");
-      this.$el.removeAttribute("aria-invalid");
-      this.$slotError.removeAttribute("id");
-    }
-  }
-  get $slotLegend() {
-    return this.shadowRoot.querySelector(
-      'slot[name="legend"]'
-    );
-  }
-  get $slotError() {
-    return this.shadowRoot.querySelector(
-      'slot[name="error-text"]'
-    );
-  }
-  get inverted() {
-    return this.hasAttribute("inverted");
-  }
-  set inverted(value) {
-    if (value) {
-      this.setAttribute("inverted", "");
-    } else {
-      this.removeAttribute("inverted");
-    }
-  }
-  get role() {
-    return this.getAttribute("role");
-  }
-  set role(value) {
-    if (value) {
-      this.setAttribute("role", value);
-    } else {
-      this.removeAttribute("role");
-    }
-  }
-  get ariaRequired() {
-    return this.getAttribute("aria-required");
-  }
-  set ariaRequired(value) {
-    if (value) {
-      this.setAttribute("aria-required", value);
-    } else {
-      this.removeAttribute("aria-required");
-    }
-  }
-  get ariaDisabled() {
-    return this.getAttribute("aria-disabled");
-  }
-  set ariaDisabled(value) {
-    if (value) {
-      this.setAttribute("aria-disabled", value);
-    } else {
-      this.removeAttribute("aria-disabled");
-    }
-  }
-  get state() {
-    return this.getAttribute("state");
-  }
-  set state(value) {
-    if (value) {
-      this.setAttribute("state", value);
-    } else {
-      this.removeAttribute("state");
-    }
-  }
-};
-_Fieldset.nativeName = "fieldset";
-let Fieldset = _Fieldset;
-if (!customElements.get("px-fieldset")) {
-  customElements.define("px-fieldset", Fieldset);
-}
-const gridCss = ":host{display:block;--grid-cols: initial;--grid-cols--mobile: initial;--grid-cols--tablet: initial;--grid-cols--laptop: initial;--grid-cols--desktop: initial;--justify-content: initial;--justify-items: initial;--align-content: initial;--align-items: initial}.grid{display:grid;grid-template-columns:repeat(var(--grid-cols),minmax(0,1fr));justify-content:var(--justify-content);justify-items:var(--justify-items);align-content:var(--align-content);align-items:var(--align-items)}.justify-content-normal{justify-content:normal}.justify-content-start{justify-content:start}.justify-content-end{justify-content:end}.justify-content-center{justify-content:center}.justify-content-space-between{justify-content:space-between}.justify-content-space-around{justify-content:space-around}.justify-content-space-evenly{justify-content:space-evenly}.justify-content-stretch{justify-content:stretch}.justify-items-start{justify-items:start}.justify-items-end{justify-items:end}.justify-items-center{justify-items:center}.justify-items-stretch{justify-items:stretch}.align-content-normal{align-content:normal}.align-content-start{align-content:start}.align-content-end{align-content:end}.align-content-center{align-content:center}.align-content-space-between{align-content:space-between}.align-content-space-around{align-content:space-around}.align-content-space-evenly{align-content:space-evenly}.align-content-stretch{align-content:stretch}.align-items-start{align-items:start}.align-items-end{align-items:end}.align-items-center{align-items:center}.align-items-stretch{align-items:stretch}@media only screen and (max-width: 767px){.grid{grid-template-columns:repeat(var(--grid-cols--mobile, var(--grid-cols)),minmax(0,1fr))}.justify-content-normal-mobile{justify-content:normal}.justify-content-start-mobile{justify-content:start}.justify-content-end-mobile{justify-content:end}.justify-content-center-mobile{justify-content:center}.justify-content-space-between-mobile{justify-content:space-between}.justify-content-space-around-mobile{justify-content:space-around}.justify-content-space-evenly-mobile{justify-content:space-evenly}.justify-content-stretch-mobile{justify-content:stretch}.justify-items-start-mobile{justify-items:start}.justify-items-end-mobile{justify-items:end}.justify-items-center-mobile{justify-items:center}.justify-items-stretch-mobile{justify-items:stretch}.align-content-normal-mobile{align-content:normal}.align-content-start-mobile{align-content:start}.align-content-end-mobile{align-content:end}.align-content-center-mobile{align-content:center}.align-content-space-between-mobile{align-content:space-between}.align-content-space-around-mobile{align-content:space-around}.align-content-space-evenly-mobile{align-content:space-evenly}.align-content-stretch-mobile{align-content:stretch}.align-items-start-mobile{align-items:start}.align-items-end-mobile{align-items:end}.align-items-center-mobile{align-items:center}.align-items-stretch-mobile{align-items:stretch}}@media only screen and (min-width: 48em) and (max-width: 64em){.grid{grid-template-columns:repeat(var(--grid-cols--tablet, var(--grid-cols)),minmax(0,1fr))}.justify-content-normal-tablet{justify-content:normal}.justify-content-start-tablet{justify-content:start}.justify-content-end-tablet{justify-content:end}.justify-content-center-tablet{justify-content:center}.justify-content-space-between-tablet{justify-content:space-between}.justify-content-space-around-tablet{justify-content:space-around}.justify-content-space-evenly-tablet{justify-content:space-evenly}.justify-content-stretch-tablet{justify-content:stretch}.justify-items-start-tablet{justify-items:start}.justify-items-end-tablet{justify-items:end}.justify-items-center-tablet{justify-items:center}.justify-items-stretch-tablet{justify-items:stretch}.align-content-normal-tablet{align-content:normal}.align-content-start-tablet{align-content:start}.align-content-end-tablet{align-content:end}.align-content-center-tablet{align-content:center}.align-content-space-between-tablet{align-content:space-between}.align-content-space-around-tablet{align-content:space-around}.align-content-space-evenly-tablet{align-content:space-evenly}.align-content-stretch-tablet{align-content:stretch}.align-items-start-tablet{align-items:start}.align-items-end-tablet{align-items:end}.align-items-center-tablet{align-items:center}.align-items-stretch-tablet{align-items:stretch}}@media only screen and (min-width: 64.0625em){.grid{grid-template-columns:repeat(var(--grid-cols--laptop, var(--grid-cols)),minmax(0,1fr))}.justify-content-normal-laptop{justify-content:normal}.justify-content-start-laptop{justify-content:start}.justify-content-end-laptop{justify-content:end}.justify-content-center-laptop{justify-content:center}.justify-content-space-between-laptop{justify-content:space-between}.justify-content-space-around-laptop{justify-content:space-around}.justify-content-space-evenly-laptop{justify-content:space-evenly}.justify-content-stretch-laptop{justify-content:stretch}.justify-items-start-laptop{justify-items:start}.justify-items-end-laptop{justify-items:end}.justify-items-center-laptop{justify-items:center}.justify-items-stretch-laptop{justify-items:stretch}.align-content-normal-laptop{align-content:normal}.align-content-start-laptop{align-content:start}.align-content-end-laptop{align-content:end}.align-content-center-laptop{align-content:center}.align-content-space-between-laptop{align-content:space-between}.align-content-space-around-laptop{align-content:space-around}.align-content-space-evenly-laptop{align-content:space-evenly}.align-content-stretch-laptop{align-content:stretch}.align-items-start-laptop{align-items:start}.align-items-end-laptop{align-items:end}.align-items-center-laptop{align-items:center}.align-items-stretch-laptop{align-items:stretch}}";
-const gridStyles = new CSSStyleSheet();
-gridStyles.replaceSync(gridCss);
-const gridColsValues = [
-  "1",
-  "2",
-  "3",
-  "4",
-  "5",
-  "6",
-  "7",
-  "8",
-  "9",
-  "10",
-  "11",
-  "12"
-];
-const contentAlignmentValues = [
-  "",
-  "start",
-  "end",
-  "center",
-  "space-between",
-  "space-around",
-  "space-evenly",
-  "stretch"
-];
-const itemsAlignmentValues = ["", "start", "end", "center", "stretch"];
-const attributeBreakpointCSSSelector = (attributeName, attributeValue, device) => `:host([${attributeName}${device ? `--${device}` : ""}='${attributeValue}']) .grid`;
-const gapPrefix$1 = "px-spacing";
-const _Grid = class _Grid extends PxElement {
-  constructor() {
-    super(
-      gridStyles,
-      cssTokenBreakpoints(
-        "gap",
-        attributeBreakpointCSSSelector,
-        gapValues,
-        gapPrefix$1,
-        "--grid-gap"
-      )
-    );
-    this.template = () => `<div class="grid">
-    <slot></slot>
-    </div>`;
-    this.gapAttributeDelegate = new AttributeBreakpointHandlerDelegate(
-      this,
-      "gap",
-      (newValue) => newValue,
-      "--gap"
-    );
-    this.shadowRoot.innerHTML = this.template();
-  }
-  static get observedAttributes() {
-    return [
-      ...super.observedAttributes,
-      "grid-cols",
-      "grid-cols--mobile",
-      "grid-cols--tablet",
-      "grid-cols--laptop",
-      "justify-content",
-      "justify-items",
-      "align-content",
-      "align-items",
-      "justify-content--mobile",
-      "justify-items--mobile",
-      "align-content--mobile",
-      "align-items--mobile",
-      "justify-content--tablet",
-      "justify-items--tablet",
-      "align-content--tablet",
-      "align-items--tablet",
-      "justify-content--laptop",
-      "justify-items--laptop",
-      "align-content--laptop",
-      "align-items--laptop",
-      "justify-content--desktop",
-      "justify-items--desktop",
-      "align-content--desktop",
-      "align-items--desktop"
-    ];
-  }
-  connectedCallback() {
-    super.connectedCallback();
-    if (!this.gap) {
-      this.gap = "default";
-    }
-    if (!this.alignItems) {
-      this.alignItems = "stretch";
-    }
-  }
-  attributeChangedCallback(attrName, oldValue, newValue) {
-    if (oldValue !== newValue) {
-      switch (attrName) {
-        case "grid-cols":
-        case "grid-cols--mobile":
-        case "grid-cols--tablet":
-        case "grid-cols--laptop":
-          this.updateAttribute(attrName, oldValue, newValue, gridColsValues);
-          break;
-        case "justify-content":
-        case "align-content":
-        case "justify-content--mobile":
-        case "align-content--mobile":
-        case "justify-content--tablet":
-        case "align-content--tablet":
-        case "justify-content--laptop":
-        case "align-content--laptop":
-        case "justify-content--desktop":
-        case "align-content--desktop":
-          this.updateAttribute(
-            attrName,
-            oldValue,
-            newValue,
-            contentAlignmentValues
-          );
-          break;
-        case "justify-items":
-        case "align-items":
-        case "justify-items--mobile":
-        case "align-items--mobile":
-        case "justify-items--tablet":
-        case "align-items--tablet":
-        case "justify-items--laptop":
-        case "align-items--laptop":
-        case "justify-items--desktop":
-        case "align-items--desktop":
-          this.updateAttribute(
-            attrName,
-            oldValue,
-            newValue,
-            itemsAlignmentValues
-          );
-          break;
-        default:
-          super.attributeChangedCallback(attrName, oldValue, newValue);
-          break;
-      }
-    }
-  }
-  updateGap(oldValue, newValue, attrValue) {
-    if (!this.checkName(attrValue, newValue)) {
-      console.error(`${newValue} is not a valid gap value`);
-      return;
-    }
-    const updateGapStyle = (value) => {
-      if (value !== null && value !== "" && value !== "default") {
-        this.$el.style.setProperty(
-          `--grid-gap--mobile`,
-          `var(--px-spacing-${value}-mobile)`
-        );
-        this.$el.style.setProperty(
-          `--grid-gap--tablet`,
-          `var(--px-spacing-${value}-tablet)`
-        );
-        this.$el.style.setProperty(
-          `--grid-gap--laptop`,
-          `var(--px-spacing-${value}-laptop)`
-        );
-      }
-    };
-    updateGapStyle(oldValue);
-    updateGapStyle(newValue);
-  }
-  updateAttribute(attrName, oldValue, newValue, attrValues) {
-    if (!this.checkName(attrValues, newValue)) {
-      console.error(`${newValue} is not an allowed ${attrName} value`);
-    } else if (attrName === "grid-cols" || attrName === "grid-cols--mobile" || attrName === "grid-cols--tablet" || attrName === "grid-cols--laptop" || attrName === "grid-cols--desktop") {
-      this.$el.style.setProperty(`--${attrName}`, newValue);
-    } else {
-      if (oldValue !== null && oldValue !== "" && oldValue !== "default") {
-        this.$el.classList.toggle(`${attrName}-${oldValue}`);
-      }
-      if (newValue !== null && newValue !== "" && newValue !== "default") {
-        this.$el.classList.toggle(`${attrName}-${newValue}`);
-      }
-    }
-  }
-  get gap() {
-    return this.getAttribute("gap");
-  }
-  set gap(value) {
-    this.setAttribute("gap", value);
-  }
-  get gapMobile() {
-    return this.getAttribute("gap--mobile");
-  }
-  set gapMobile(value) {
-    this.setAttribute("gap--mobile", value);
-  }
-  get gapTablet() {
-    return this.getAttribute("gap--tablet");
-  }
-  set gapTablet(value) {
-    this.setAttribute("gap--tablet", value);
-  }
-  get gapLaptop() {
-    return this.getAttribute("gap--laptop");
-  }
-  set gapLaptop(value) {
-    this.setAttribute("gap--laptop", value);
-  }
-  get gridCols() {
-    return this.getAttribute("grid-cols");
-  }
-  set gridCols(value) {
-    this.setAttribute("grid-cols", value);
-  }
-  get gridColsMobile() {
-    return this.getAttribute("grid-cols--mobile");
-  }
-  set gridColsMobile(value) {
-    this.setAttribute("grid-cols--mobile", value);
-  }
-  get gridColsTablet() {
-    return this.getAttribute("grid-cols--tablet");
-  }
-  set gridColsTablet(value) {
-    this.setAttribute("grid-cols--tablet", value);
-  }
-  get gridColsLaptop() {
-    return this.getAttribute("grid-cols--laptop");
-  }
-  set gridColsLaptop(value) {
-    this.setAttribute("grid-cols--laptop", value);
-  }
-  get justifyContent() {
-    return this.getAttribute("justify-content");
-  }
-  set justifyContent(value) {
-    this.setAttribute("justify-content", value);
-  }
-  get justifyItems() {
-    return this.getAttribute("justify-items");
-  }
-  set justifyItems(value) {
-    this.setAttribute("justify-items", value);
-  }
-  get alignContent() {
-    return this.getAttribute("align-content");
-  }
-  set alignContent(value) {
-    this.setAttribute("align-content", value);
-  }
-  get alignItems() {
-    return this.getAttribute("align-items");
-  }
-  set alignItems(value) {
-    this.setAttribute("align-items", value);
-  }
-  get justifyContentMobile() {
-    return this.getAttribute("justify-content--mobile");
-  }
-  set justifyContentMobile(value) {
-    this.setAttribute("justify-content--mobile", value);
-  }
-  get justifyItemsMobile() {
-    return this.getAttribute("justify-items--mobile");
-  }
-  set justifyItemsMobile(value) {
-    this.setAttribute("justify-items--mobile", value);
-  }
-  get alignContentMobile() {
-    return this.getAttribute("align-content--mobile");
-  }
-  set alignContentMobile(value) {
-    this.setAttribute("align-content--mobile", value);
-  }
-  get alignItemsMobile() {
-    return this.getAttribute("align-items--mobile");
-  }
-  set alignItemsMobile(value) {
-    this.setAttribute("align-items--mobile", value);
-  }
-  get justifyContentTablet() {
-    return this.getAttribute("justify-content--tablet");
-  }
-  set justifyContentTablet(value) {
-    this.setAttribute("justify-content--tablet", value);
-  }
-  get justifyItemsTablet() {
-    return this.getAttribute("justify-items--tablet");
-  }
-  set justifyItemsTablet(value) {
-    this.setAttribute("justify-items--tablet", value);
+      this.setAttribute("anchoralignment", value);
+    } else {
+      console.warn(
+        `Invalid anchor alignment value: ${value}. Using default ${defaultAnchorAlignment}.`
+      );
+      this.setAttribute("anchoralignment", defaultAnchorAlignment);
+    }
   }
-  get alignContentTablet() {
-    return this.getAttribute("align-content--tablet");
+  get usePolyfill() {
+    return this.hasAttribute("use-polyfill");
   }
-  set alignContentTablet(value) {
-    this.setAttribute("align-content--tablet", value);
+  set usePolyfill(value) {
+    if (value) {
+      this.setAttribute("use-polyfill", "");
+    } else {
+      this.removeAttribute("use-polyfill");
+    }
   }
-  get alignItemsTablet() {
-    return this.getAttribute("align-items--tablet");
+}
+_Dropdown_instances = new WeakSet();
+resetManualPopoverDisplay_fn = function() {
+  this.isAboutToClose = false;
+  this.$trigger.removeEventListener("click", __privateGet(this, _onTriggerClick));
+  this.$popoverElement.removeEventListener(
+    "beforetoggle",
+    __privateGet(this, _beforeToggle)
+  );
+  this.$popoverElement.removeEventListener("toggle", __privateGet(this, _onToggle));
+};
+_onTriggerClick = new WeakMap();
+_beforeToggle = new WeakMap();
+_onToggle = new WeakMap();
+/**
+ * Handles the manual display of the popover when the trigger is clicked.
+ * This is necessary for cases where the trigger is not a button or input element.
+ * This method adds event listeners to the trigger element to toggle the popover.
+ * It also manages the state of whether the popover is about to close or not to avoid
+ * race conditions when the popover is toggled and the trigger click event is fired.
+ */
+handleManualPopoverDisplay_fn = function() {
+  if (this.$trigger && !["button", "input"].includes(this.$trigger.localName)) {
+    this.$trigger.addEventListener("click", __privateGet(this, _onTriggerClick));
+    this.$popoverElement.addEventListener("beforetoggle", __privateGet(this, _beforeToggle));
+    this.$popoverElement.addEventListener("toggle", __privateGet(this, _onToggle));
   }
-  set alignItemsTablet(value) {
-    this.setAttribute("align-items--tablet", value);
+};
+if (!customElements.get("px-dropdown")) {
+  customElements.define("px-dropdown", Dropdown);
+}
+const fieldsetCss = ':host{display:block}:host *{box-sizing:border-box}fieldset{display:flex;flex-direction:column;margin:0;padding:0;border:0;font-family:var(--px-font-family)}fieldset legend{padding:0}fieldset ::slotted([slot="legend"]:not([shown--sr])){display:block;margin-bottom:var(--px-spacing-xs-mobile)}fieldset ::slotted([slot="error-text"]){display:none;font-size:var(--px-text-size-body-m-mobile);line-height:var(--px-line-height-ratio-l);color:var(--px-color-text-purpose-error-default);margin-bottom:var(--px-spacing-xs-mobile)}:host([state="error"]) ::slotted([slot="error-text"]){display:block}@media only screen and (min-width: 48em){fieldset ::slotted([slot="legend"]:not([shown--sr])){margin-bottom:var(--px-spacing-xs-tablet)}fieldset ::slotted([slot="error-text"]){font-size:var(--px-text-size-body-m-tablet)}}@media only screen and (min-width: 64.0625em){fieldset ::slotted([slot="legend"]:not([shown--sr])){margin-bottom:var(--px-spacing-xs-laptop)}fieldset ::slotted([slot="error-text"]){font-size:var(--px-text-size-body-m-laptop)}}@media only screen and (min-width: 90.0625em){fieldset ::slotted([slot="legend"]:not([shown--sr])){margin-bottom:var(--px-spacing-xs-desktop)}fieldset ::slotted([slot="error-text"]){font-size:var(--px-text-size-body-m-desktop)}}:host([inverted]) fieldset ::slotted([slot="error-text"]){color:var(--px-color-text-purpose-error-inverted)}';
+const fieldsetStyles = new CSSStyleSheet();
+fieldsetStyles.replaceSync(fieldsetCss);
+const _Fieldset = class _Fieldset extends PxElement {
+  constructor() {
+    super(fieldsetStyles);
+    this.template = () => `<fieldset >
+      <legend><slot name="legend"></slot></legend>
+      <slot name="error-text"></slot>
+      <slot></slot>
+    </fieldset>`;
+    this.shadowRoot.innerHTML = this.template();
   }
-  get justifyContentLaptop() {
-    return this.getAttribute("justify-content--laptop");
+  static get observedAttributes() {
+    return [
+      ...super.observedAttributes,
+      "inverted",
+      "role",
+      "aria-required",
+      "aria-disabled",
+      "state"
+    ];
   }
-  set justifyContentLaptop(value) {
-    this.setAttribute("justify-content--laptop", value);
+  connectedCallback() {
+    var _a;
+    const hasLegend = ((_a = this.$slotLegend) == null ? void 0 : _a.assignedNodes().length) > 0;
+    if (!hasLegend) {
+      console.error(
+        '<px-fieldset> requires a slot="legend" containing the description of the fieldset.'
+      );
+    }
+    this.setupErrorState();
+    transferAccessibilityAttributes(this, this.$el, false);
   }
-  get justifyItemsLaptop() {
-    return this.getAttribute("justify-items--laptop");
+  attributeChangedCallback(attrName, oldValue, newValue) {
+    if (oldValue !== newValue) {
+      switch (attrName) {
+        case "disabled": {
+          const children = this.querySelectorAll(
+            "px-radio-group, px-radio, px-checkbox, px-fileupload, px-input, px-textarea, px-select, px-switch"
+          );
+          children.forEach((child) => {
+            child.setAttribute(attrName, "true");
+          });
+          break;
+        }
+        case "role":
+        case "aria-required":
+        case "aria-disabled":
+          if (newValue !== null) {
+            this.$el.setAttribute(attrName, this.getAttribute(attrName));
+            this.removeAttribute(attrName);
+          }
+          break;
+        case "state":
+          this.setupErrorState();
+          break;
+        default:
+          super.attributeChangedCallback(attrName, oldValue, newValue);
+          break;
+      }
+    }
   }
-  set justifyItemsLaptop(value) {
-    this.setAttribute("justify-items--laptop", value);
+  setupErrorState() {
+    var _a;
+    const hasErrorText = ((_a = this.$slotError) == null ? void 0 : _a.assignedNodes().length) > 0;
+    if (this.state === "error" && !hasErrorText) {
+      console.error(
+        '<px-fieldset> with state="error" requires a slot="error-text" containing the error description.'
+      );
+    }
+    if (this.state === "error" && hasErrorText) {
+      const id = Math.random().toString(36).substr(2, 9);
+      this.$el.setAttribute("id", id);
+      this.$el.setAttribute("aria-describedby", `${id}-error-text`);
+      this.$el.setAttribute("aria-invalid", "true");
+      this.$slotError.setAttribute("id", `${id}-error-text`);
+    } else {
+      this.$el.removeAttribute("id");
+      this.$el.removeAttribute("aria-describedby");
+      this.$el.removeAttribute("aria-invalid");
+      this.$slotError.removeAttribute("id");
+    }
   }
-  get alignContentLaptop() {
-    return this.getAttribute("align-content--laptop");
+  get $slotLegend() {
+    return this.shadowRoot.querySelector(
+      'slot[name="legend"]'
+    );
   }
-  set alignContentLaptop(value) {
-    this.setAttribute("align-content--laptop", value);
+  get $slotError() {
+    return this.shadowRoot.querySelector(
+      'slot[name="error-text"]'
+    );
   }
-  get alignItemsLaptop() {
-    return this.getAttribute("align-items--laptop");
+  get inverted() {
+    return this.hasAttribute("inverted");
   }
-  set alignItemsLaptop(value) {
-    this.setAttribute("align-items--laptop", value);
+  set inverted(value) {
+    if (value) {
+      this.setAttribute("inverted", "");
+    } else {
+      this.removeAttribute("inverted");
+    }
   }
-  get justifyContentDesktop() {
-    return this.getAttribute("justify-content--desktop");
+  get role() {
+    return this.getAttribute("role");
   }
-  set justifyContentDesktop(value) {
-    this.setAttribute("justify-content--desktop", value);
+  set role(value) {
+    if (value) {
+      this.setAttribute("role", value);
+    } else {
+      this.removeAttribute("role");
+    }
   }
-  get justifyItemsDesktop() {
-    return this.getAttribute("justify-items--desktop");
+  get ariaRequired() {
+    return this.getAttribute("aria-required");
   }
-  set justifyItemsDesktop(value) {
-    this.setAttribute("justify-items--desktop", value);
+  set ariaRequired(value) {
+    if (value) {
+      this.setAttribute("aria-required", value);
+    } else {
+      this.removeAttribute("aria-required");
+    }
   }
-  get alignContentDesktop() {
-    return this.getAttribute("align-content--desktop");
+  get ariaDisabled() {
+    return this.getAttribute("aria-disabled");
   }
-  set alignContentDesktop(value) {
-    this.setAttribute("align-content--desktop", value);
+  set ariaDisabled(value) {
+    if (value) {
+      this.setAttribute("aria-disabled", value);
+    } else {
+      this.removeAttribute("aria-disabled");
+    }
   }
-  get alignItemsDesktop() {
-    return this.getAttribute("align-items--desktop");
+  get state() {
+    return this.getAttribute("state");
   }
-  set alignItemsDesktop(value) {
-    this.setAttribute("align-items--desktop", value);
+  set state(value) {
+    if (value) {
+      this.setAttribute("state", value);
+    } else {
+      this.removeAttribute("state");
+    }
   }
 };
-_Grid.nativeName = "div";
-let Grid = _Grid;
-if (!customElements.get("px-grid")) {
-  customElements.define("px-grid", Grid);
+_Fieldset.nativeName = "fieldset";
+let Fieldset = _Fieldset;
+if (!customElements.get("px-fieldset")) {
+  customElements.define("px-fieldset", Fieldset);
 }
 const linkStyles$1 = new CSSStyleSheet();
 const buttonStyles = new CSSStyleSheet();
@@ -9818,7 +9858,7 @@ const _Link = class _Link extends PxElement {
   constructor() {
     super(linkStyles$1, buttonStyles, typographyStyles$3);
     this.template = () => `<slot name="before"></slot><slot></slot><slot name="after"></slot>`;
-    const $root = document.createElement(this.nativeName);
+    const $root = document.createElement(_Link.nativeName);
     $root.innerHTML = this.template();
     this.shadowRoot.appendChild($root);
   }
@@ -9845,7 +9885,6 @@ const _Link = class _Link extends PxElement {
     ];
   }
   connectedCallback() {
-    super.connectedCallback();
     if (this.$before && this.$before.localName === "px-icon") {
       this.configureBeforeAfterIcon(this.$before);
     }
@@ -10103,8 +10142,8 @@ 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();
+    this.template = `<p><slot></slot></p>`;
+    this.shadowRoot.innerHTML = this.template;
   }
   static get observedAttributes() {
     return [
@@ -10338,7 +10377,6 @@ const _FooterSitemapItem = class _FooterSitemapItem extends PxElement {
     return [...super.observedAttributes, "inverted"];
   }
   connectedCallback() {
-    super.connectedCallback();
     this.loadTemplate();
     window.addEventListener("resize", this.throttledLoadTemplate);
     if (!this.$ul) {
@@ -10900,24 +10938,16 @@ const imageWidthValues = ["", "xs", "s", "m", "l", "xl"];
 const imageHeightValues = ["", "xs", "s", "m", "l", "xl"];
 const heightAttributeBreakpointCSSSelector = (attributeName, attributeValue, device) => `:host([${attributeName}${device ? `--${device}` : ""}='${attributeValue}']) img`;
 const heightPrefix = "px-image";
+const imageCssTokenBreakpoints = cssTokenBreakpoints(
+  "height",
+  heightAttributeBreakpointCSSSelector,
+  imageHeightValues,
+  heightPrefix,
+  "--img-height"
+);
 const _AbstractImage = class _AbstractImage extends PxElement {
   constructor() {
-    super(
-      styleSheet$m,
-      cssTokenBreakpoints(
-        "height",
-        heightAttributeBreakpointCSSSelector,
-        imageHeightValues,
-        heightPrefix,
-        "--img-height"
-      )
-    );
-    this.heightAttributeDelegate = new AttributeBreakpointHandlerDelegate(
-      this,
-      "height",
-      (newValue) => newValue,
-      "--img-height"
-    );
+    super(styleSheet$m, imageCssTokenBreakpoints);
   }
   static get observedAttributes() {
     return [
@@ -11179,7 +11209,7 @@ let AbstractImage = _AbstractImage;
 const _Image = class _Image extends AbstractImage {
   constructor() {
     super();
-    const $root = document.createElement(this.nativeName);
+    const $root = document.createElement(_Image.nativeName);
     this.shadowRoot.appendChild($root);
   }
 };
@@ -11209,7 +11239,7 @@ const _Picture = class _Picture extends AbstractImage {
       "tif",
       "tiff"
     ];
-    const $root = document.createElement(this.nativeName);
+    const $root = document.createElement(_Picture.nativeName);
     this.shadowRoot.appendChild($root);
   }
   static get observedAttributes() {
@@ -11424,7 +11454,6 @@ class AbstractInputElement extends PxElement {
     }
   }
   connectedCallback() {
-    super.connectedCallback();
     ["change"].forEach((event) => {
       this.$el.addEventListener(event, () => {
         var _a;
@@ -11696,29 +11725,16 @@ if (!customElements.get("px-fileupload")) {
 const styles$o = ".list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}";
 const styleSheet$l = new CSSStyleSheet();
 styleSheet$l.replaceSync(styles$o);
-const breakpointsValues = ["", "mobile", "tablet", "laptop"];
 const AttributeBreakpointCSSSelector = (attributeName, attributeValue, device) => `:host([${attributeName}${device ? `--${device}` : ""}='${attributeValue}']) .list`;
 const gapPrefix = "px-spacing";
+const listCssTokenBreakpoints = cssTokenBreakpoints(
+  "gap",
+  AttributeBreakpointCSSSelector,
+  gapValues,
+  gapPrefix,
+  "--list-gap"
+);
 const _List = class _List extends PxElement {
-  constructor() {
-    super(
-      styleSheet$l,
-      cssTokenBreakpoints(
-        "gap",
-        AttributeBreakpointCSSSelector,
-        gapValues,
-        gapPrefix,
-        "--list-gap"
-      )
-    );
-    this.AttributeDelegate = new AttributeBreakpointHandlerDelegate(
-      this,
-      "gap",
-      (newValue) => newValue,
-      "--list-gap"
-    );
-    this.shadowRoot.innerHTML = this.template();
-  }
   template() {
     return `
       <div class="list" role="list">
@@ -11726,11 +11742,14 @@ const _List = class _List extends PxElement {
       </div>
     `;
   }
+  constructor() {
+    super(styleSheet$l, listCssTokenBreakpoints);
+    this.shadowRoot.innerHTML = this.template();
+  }
   static get observedAttributes() {
     return ["inverted"];
   }
   connectedCallback() {
-    super.connectedCallback();
     if (!this.gap) {
       this.gap = "xs";
     }
@@ -11837,6 +11856,7 @@ const _ListItem = class _ListItem extends PxElement {
   static get observedAttributes() {
     return ["inverted"];
   }
+  // TODO: factorize code
   attributeChangedCallback(attrName, oldValue, newValue) {
     if (oldValue !== newValue) {
       switch (attrName) {
@@ -13905,7 +13925,6 @@ const _StatusCard = class _StatusCard extends PxElement {
     return ["state", "inverted", "status-icon-aria-label"];
   }
   connectedCallback() {
-    super.connectedCallback();
     this.$closeButtonSlot.addEventListener("click", () => {
       this.close();
     });
@@ -14235,6 +14254,7 @@ const _Switch = class _Switch extends PxElement {
   }
 };
 _Switch.nativeName = "input";
+_Switch.accessorExclusions = ["checked", "disabled"];
 let Switch = _Switch;
 if (!customElements.get("px-switch")) {
   customElements.define("px-switch", Switch);
@@ -14813,7 +14833,6 @@ const _Tag = class _Tag extends PxElement {
     this.shadowRoot.adoptedStyleSheets = [styleSheet$5];
   }
   connectedCallback() {
-    super.connectedCallback();
     if (this.$iconSlot) {
       this.$iconSlot.setAttribute("size", "xs");
       this.$iconSlot.setAttribute("color", "inherit");
@@ -14936,7 +14955,7 @@ const tileBackgroundColorValues = [
   "container-light",
   "container-default"
 ];
-const _Tile = class _Tile extends PxElement {
+const _Tile = class _Tile extends VerticallyExtendedElement {
   template() {
     return `
       <px-hstack gap="s" align-items="center" class="tile__header">
@@ -14951,7 +14970,7 @@ const _Tile = class _Tile extends PxElement {
   }
   constructor() {
     super(commonStyleSheet$5, styleSheet$4);
-    const $root = document.createElement(this.nativeName);
+    const $root = document.createElement(_Tile.nativeName);
     $root.classList.add("tile");
     $root.innerHTML = this.template();
     this.shadowRoot.appendChild($root);
@@ -15121,13 +15140,12 @@ const _TileButton = class _TileButton extends PxElement {
   }
   constructor() {
     super(commonStyleSheet$4, styleSheet$3);
-    const $root = document.createElement(this.nativeName);
+    const $root = document.createElement(_TileButton.nativeName);
     $root.classList.add("tile-button");
     $root.innerHTML = this.template();
     this.shadowRoot.appendChild($root);
   }
   connectedCallback() {
-    super.connectedCallback();
     if (this.$slotPrefix) {
       const prefixImg = this.querySelector('px-img[slot="prefix"]');
       if (prefixImg) {
@@ -15231,6 +15249,7 @@ const _TileButton = class _TileButton extends PxElement {
   }
 };
 _TileButton.nativeName = "button";
+_TileButton.accessorExclusions = ["disabled"];
 let TileButton = _TileButton;
 if (!customElements.get("px-tile-button")) {
   customElements.define("px-tile-button", TileButton);
@@ -15824,13 +15843,12 @@ const _TileLink = class _TileLink extends PxElement {
   }
   constructor() {
     super(commonStyleSheet$1, styleSheet$2);
-    const $root = document.createElement(this.nativeName);
+    const $root = document.createElement(_TileLink.nativeName);
     $root.classList.add("tile-link");
     $root.innerHTML = this.template();
     this.shadowRoot.appendChild($root);
   }
   connectedCallback() {
-    super.connectedCallback();
     if (this.$slotPrefix) {
       const prefixImg = this.querySelector('px-img[slot="prefix"]');
       if (prefixImg) {
@@ -16496,6 +16514,7 @@ export {
   Typography,
   Upload,
   VStack,
+  VerticallyExtendedElement,
   WithExtraAttributes,
   accordionBackgroundColorValues,
   accordionVariantValues,
@@ -16509,7 +16528,6 @@ export {
   borderSideValues,
   borderValues,
   boxShadowValues,
-  breakpointsValues,
   buttonIconSizeValues,
   buttonIconVariantValues,
   cardBackgroundColorValues,