@proximus/lavender 1.0.0-alpha.19 → 1.0.0-alpha.21

package/dist/lavender.es.js

@@ -437,7 +437,7 @@ function getViewportFormat() {
     return "mobile";
   }
 }
-const styles$d = ".flex-container{display:flex;height:100%;width:100%;box-sizing:border-box;flex-direction:var(--flex-direction--mobile-value);gap:var(--flex-gap-mobile-value);flex-wrap:var(--flex-wrap-mobile-value);justify-content:var(--flex-justify-content--mobile-value);align-items:var(--flex-align-items--mobile-value)}@media screen and (min-width: 768px){.flex-container{flex-direction:var(--flex-direction--tablet-value);gap:var(--flex-gap-tablet-value);flex-wrap:var(--flex-wrap-tablet-value);justify-content:var(--flex-justify-content--tablet-value);align-items:var(--flex-align-items--tablet-value)}}@media screen and (min-width: 1025px){.flex-container{flex-direction:var(--flex-direction--laptop-value);gap:var(--flex-gap-laptop-value);flex-wrap:var(--flex-wrap-laptop-value);justify-content:var(--flex-justify-content--laptop-value);align-items:var(--flex-align-items--laptop-value)}}@media screen and (min-width: 1441px){.flex-container{flex-direction:var(--flex-direction--desktop-value);gap:var(--flex-gap-desktop-value);flex-wrap:var(--flex-wrap-desktop-value);justify-content:var(--flex-justify-content--desktop-value);align-items:var(--flex-align-items--desktop-value)}}";
+const styles$d = ".flex-container{display:flex;height:100%;width:100%;box-sizing:border-box;flex-direction:var(--flex-direction--mobile-value);gap:var(--flex-gap--mobile-value);flex-wrap:var(--flex-wrap--mobile-value);justify-content:var(--flex-justify-content--mobile-value);align-items:var(--flex-align-items--mobile-value)}@media screen and (min-width: 768px){.flex-container{flex-direction:var(--flex-direction--tablet-value);gap:var(--flex-gap--tablet-value);flex-wrap:var(--flex-wrap--tablet-value);justify-content:var(--flex-justify-content--tablet-value);align-items:var(--flex-align-items--tablet-value)}}@media screen and (min-width: 1025px){.flex-container{flex-direction:var(--flex-direction--laptop-value);gap:var(--flex-gap--laptop-value);flex-wrap:var(--flex-wrap--laptop-value);justify-content:var(--flex-justify-content--laptop-value);align-items:var(--flex-align-items--laptop-value)}}@media screen and (min-width: 1441px){.flex-container{flex-direction:var(--flex-direction--desktop-value);gap:var(--flex-gap--desktop-value);flex-wrap:var(--flex-wrap--desktop-value);justify-content:var(--flex-justify-content--desktop-value);align-items:var(--flex-align-items--desktop-value)}}";
 const styleSheet$d = new CSSStyleSheet();
 styleSheet$d.replaceSync(styles$d);
 const gapValues = [
@@ -456,6 +456,34 @@ const gapValues = [
   "inside-section-l",
   "between-sections"
 ];
+const directionValues = [
+  "",
+  "default",
+  "row",
+  "row-reverse",
+  "column",
+  "column-reverse"
+];
+const alignItemsValues = [
+  "",
+  "default",
+  "stretch",
+  "flex-start",
+  "flex-end",
+  "center",
+  "baseline"
+];
+const justifyContentValues = [
+  "",
+  "default",
+  "flex-start",
+  "flex-end",
+  "center",
+  "space-between",
+  "space-around",
+  "space-evenly"
+];
+const wrapValues = ["", "default", "nowrap", "wrap", "wrap-reverse"];
 class Stack extends WithFlexAttributes {
   constructor() {
     super(styleSheet$d);
@@ -468,6 +496,18 @@ class Stack extends WithFlexAttributes {
     if (!this.hasAttribute("direction")) {
       this.direction = "row";
     }
+    if (!this.hasAttribute("gap")) {
+      this.gap = "inside-section-none";
+    }
+    if (!this.hasAttribute("align-items")) {
+      this.alignItems = "stretch";
+    }
+    if (!this.hasAttribute("justify-content")) {
+      this.justifyContent = "flex-start";
+    }
+    if (!this.hasAttribute("wrap")) {
+      this.wrap = "nowrap";
+    }
   }
   static get observedAttributes() {
     return [
@@ -478,6 +518,10 @@ class Stack extends WithFlexAttributes {
       "direction--laptop",
       "direction--desktop",
       "gap",
+      "gap--mobile",
+      "gap--tablet",
+      "gap--laptop",
+      "gap--desktop",
       "justify-content",
       "justify-content--mobile",
       "justify-content--tablet",
@@ -489,10 +533,10 @@ class Stack extends WithFlexAttributes {
       "align-items--laptop",
       "align-items--desktop",
       "wrap",
-      "wrap-mobile",
-      "wrap-tablet",
-      "wrap-laptop",
-      "wrap-desktop"
+      "wrap--mobile",
+      "wrap--tablet",
+      "wrap--laptop",
+      "wrap--desktop"
     ];
   }
   attributeChangedCallback(name, oldValue, newValue) {
@@ -501,148 +545,97 @@ class Stack extends WithFlexAttributes {
     }
     switch (name) {
       case "gap":
-        this.$el.style.setProperty(
-          `--flex-gap-mobile-value`,
-          this.getGapCSSVariable(newValue, "mobile")
-        );
-        this.$el.style.setProperty(
-          `--flex-gap-tablet-value`,
-          this.getGapCSSVariable(newValue, "tablet")
-        );
-        this.$el.style.setProperty(
-          `--flex-gap-laptop-value`,
-          this.getGapCSSVariable(newValue, "desktop")
-        );
-        this.$el.style.setProperty(
-          `--flex-gap-desktop-value`,
-          this.getGapCSSVariable(newValue, "desktop")
-        );
-        break;
-      case "direction":
-        if (!this.$el.style.getPropertyValue("--flex-direction--mobile-value")) {
-          this.$el.style.setProperty(
-            `--flex-direction--mobile-value`,
-            newValue
-          );
-        }
-        if (!this.$el.style.getPropertyValue("--flex-direction--tablet-value")) {
-          this.$el.style.setProperty(
-            `--flex-direction--tablet-value`,
-            newValue
-          );
-        }
-        if (!this.$el.style.getPropertyValue("--flex-direction--laptop-value")) {
-          this.$el.style.setProperty(
-            `--flex-direction--laptop-value`,
-            newValue
-          );
-        }
-        if (!this.$el.style.getPropertyValue("--flex-direction--desktop-value")) {
-          this.$el.style.setProperty(
-            `--flex-direction--desktop-value`,
-            newValue
-          );
-        }
+      case "gap--mobile":
+      case "gap--tablet":
+      case "gap--laptop":
+      case "gap--desktop":
+        this.updateFlexProperties(name, oldValue, newValue, gapValues);
         break;
       case "justify-content":
-        if (!this.$el.style.getPropertyValue(
-          "--flex-justify-content--mobile-value"
-        )) {
-          this.$el.style.setProperty(
-            `--flex-justify-content--mobile-value`,
-            newValue
-          );
-        }
-        if (!this.$el.style.getPropertyValue(
-          "--flex-justify-content--tablet-value"
-        )) {
-          this.$el.style.setProperty(
-            `--flex-justify-content--tablet-value`,
-            newValue
-          );
-        }
-        if (!this.$el.style.getPropertyValue(
-          "--flex-justify-content--laptop-value"
-        )) {
-          this.$el.style.setProperty(
-            `--flex-justify-content--laptop-value`,
-            newValue
-          );
-        }
-        if (!this.$el.style.getPropertyValue(
-          "--flex-justify-content--desktop-value"
-        )) {
-          this.$el.style.setProperty(
-            `--flex-justify-content--desktop-value`,
-            newValue
-          );
-        }
+      case "justify-content--mobile":
+      case "justify-content--tablet":
+      case "justify-content--laptop":
+      case "justify-content--desktop":
+        this.updateFlexProperties(
+          name,
+          oldValue,
+          newValue,
+          justifyContentValues
+        );
         break;
       case "align-items":
-        if (!this.$el.style.getPropertyValue("--flex-align-items--mobile-value")) {
-          this.$el.style.setProperty(
-            `--flex-align-items--mobile-value`,
-            newValue
-          );
-        }
-        if (!this.$el.style.getPropertyValue("--flex-align-items--tablet-value")) {
-          this.$el.style.setProperty(
-            `--flex-align-items--tablet-value`,
-            newValue
-          );
-        }
-        if (!this.$el.style.getPropertyValue("--flex-align-items--laptop-value")) {
-          this.$el.style.setProperty(
-            `--flex-align-items--laptop-value`,
-            newValue
-          );
-        }
-        if (!this.$el.style.getPropertyValue("--flex-align-items--desktop-value")) {
-          this.$el.style.setProperty(
-            `--flex-align-items--desktop-value`,
-            newValue
-          );
-        }
+      case "align-items--mobile":
+      case "align-items--tablet":
+      case "align-items--laptop":
+      case "align-items--desktop":
+        this.updateFlexProperties(name, oldValue, newValue, alignItemsValues);
         break;
       case "wrap":
-        if (!this.$el.style.getPropertyValue(`--flex-wrap-mobile-value`)) {
-          this.$el.style.setProperty(`--flex-wrap-mobile-value`, newValue);
-        }
-        if (!this.$el.style.getPropertyValue(`--flex-wrap-tablet-value`)) {
-          this.$el.style.setProperty(`--flex-wrap-tablet-value`, newValue);
-        }
-        if (!this.$el.style.getPropertyValue(`--flex-wrap-laptop-value`)) {
-          this.$el.style.setProperty(`--flex-wrap-laptop-value`, newValue);
-        }
-        if (!this.$el.style.getPropertyValue(`--flex-wrap-desktop-value`)) {
-          this.$el.style.setProperty(`--flex-wrap-desktop-value`, newValue);
-        }
+      case "wrap--mobile":
+      case "wrap--tablet":
+      case "wrap--laptop":
+      case "wrap--desktop":
+        this.updateFlexProperties(name, oldValue, newValue, wrapValues);
         break;
+      case "direction":
       case "direction--mobile":
       case "direction--tablet":
       case "direction--laptop":
       case "direction--desktop":
-      case "justify-content--mobile":
-      case "justify-content--tablet":
-      case "justify-content--laptop":
-      case "justify-content--desktop":
-      case "align-items--mobile":
-      case "align-items--tablet":
-      case "align-items--laptop":
-      case "align-items--desktop":
-      case "wrap-mobile":
-      case "wrap-tablet":
-      case "wrap-laptop":
-      case "wrap-desktop":
-        this.$el.style.setProperty(`--flex-${name}-value`, newValue);
+        this.updateFlexProperties(name, oldValue, newValue, directionValues);
         break;
       default:
         super.attributeChangedCallback(name, oldValue, newValue);
         break;
     }
   }
-  getGapCSSVariable(newValue, breakpoint = "mobile") {
-    return gapValues.includes(newValue) ? `var(--px-spacing-${newValue}-${breakpoint})` : newValue;
+  updateFlexProperties(name, oldValue, newValue, attrValue) {
+    if (!this.checkName(attrValue, newValue)) {
+      console.error(`Bad ${name} value for`, this.$el);
+    }
+    const hasBreakpoint = name.indexOf("--") > -1;
+    const cssPropertyName = hasBreakpoint ? name.split("--")[0] : name;
+    const breakpoints = [];
+    if (!hasBreakpoint) {
+      if (!this.getAttribute(cssPropertyName + "--mobile")) {
+        breakpoints.push("mobile");
+      }
+      if (!this.getAttribute(cssPropertyName + "--tablet")) {
+        breakpoints.push("tablet");
+      }
+      if (!this.getAttribute(cssPropertyName + "--laptop")) {
+        breakpoints.push("laptop");
+      }
+      if (!this.getAttribute(cssPropertyName + "--desktop")) {
+        breakpoints.push("desktop");
+      }
+      breakpoints.forEach((breakpoint) => {
+        this.updateStyle(cssPropertyName, breakpoint, oldValue, attrValue);
+        this.updateStyle(cssPropertyName, breakpoint, newValue, attrValue);
+      });
+    } else {
+      const breakpoint = name.split("--")[1];
+      this.updateStyle(cssPropertyName, breakpoint, oldValue, attrValue);
+      this.updateStyle(cssPropertyName, breakpoint, newValue, attrValue);
+    }
+  }
+  updateStyle(cssName, breakpoint, value, attrValue) {
+    if (value !== null && value !== "" && value !== "default") {
+      if (cssName === "gap" && attrValue.includes(value)) {
+        this.$el.style.setProperty(
+          `--flex-${cssName}--${breakpoint}-value`,
+          `var(--px-spacing-${value}-${breakpoint === "laptop" ? "desktop" : breakpoint})`
+        );
+      } else {
+        this.$el.style.setProperty(
+          `--flex-${cssName}--${breakpoint}-value`,
+          value
+        );
+      }
+    }
+  }
+  checkName(values, value) {
+    return values.includes(value);
   }
   get direction() {
     return this.getAttribute("direction");
@@ -765,28 +758,28 @@ class Stack extends WithFlexAttributes {
     this.setAttribute("wrap", value);
   }
   get wrapMobile() {
-    return this.getAttribute("wrap-mobile");
+    return this.getAttribute("wrap--mobile");
   }
   set wrapMobile(value) {
-    this.setAttribute("wrap-mobile", value);
+    this.setAttribute("wrap--mobile", value);
   }
   get wrapTablet() {
-    return this.getAttribute("wrap-tablet");
+    return this.getAttribute("wrap--tablet");
   }
   set wrapTablet(value) {
-    this.setAttribute("wrap-tablet", value);
+    this.setAttribute("wrap--tablet", value);
   }
   get wrapLaptop() {
-    return this.getAttribute("wrap-laptop");
+    return this.getAttribute("wrap--laptop");
   }
   set wrapLaptop(value) {
-    this.setAttribute("wrap-laptop", value);
+    this.setAttribute("wrap--laptop", value);
   }
   get wrapDesktop() {
-    return this.getAttribute("wrap-desktop");
+    return this.getAttribute("wrap--desktop");
   }
   set wrapDesktop(value) {
-    this.setAttribute("wrap-desktop", value);
+    this.setAttribute("wrap--desktop", value);
   }
   get $el() {
     return this.shadowRoot.querySelector(".flex-container");
@@ -1069,6 +1062,532 @@ class Page extends WithFlexAttributes {
 if (customElements.get("px-page") === void 0) {
   customElements.define("px-page", Page);
 }
+const gridCss = ":host{--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;gap:var(--grid-gap--mobile, var(--px-spacing-inside-section-default-mobile));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)}@media screen and (min-width: 768px){.grid{gap:var( --grid-gap--tablet, var(--px-spacing-inside-section-default-tablet) )}}@media screen and (min-width: 1025px){.grid{gap:var( --grid-gap--laptop, var(--px-spacing-inside-section-default-desktop) )}}.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: 768px) and (max-width: 1024px){.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: 1025px){.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 gridItemCss = '::slotted([col-span="1"]){grid-column:span 1 / span 1}::slotted([col-span="2"]){grid-column:span 2 / span 2}::slotted([col-span="3"]){grid-column:span 3 / span 3}::slotted([col-span="4"]){grid-column:span 4 / span 4}::slotted([col-span="5"]){grid-column:span 5 / span 5}::slotted([col-span="6"]){grid-column:span 6 / span 6}::slotted([col-span="7"]){grid-column:span 7 / span 7}::slotted([col-span="8"]){grid-column:span 8 / span 8}::slotted([col-span="9"]){grid-column:span 9 / span 9}::slotted([col-span="10"]){grid-column:span 10 / span 10}::slotted([col-span="11"]){grid-column:span 11 / span 11}::slotted([col-span="12"]){grid-column:span 12 / span 12}::slotted([col-span="full"]){grid-column:1 / -1}::slotted([order="1"]){order:1}::slotted([order="2"]){order:2}::slotted([order="3"]){order:3}::slotted([order="4"]){order:4}::slotted([order="5"]){order:5}::slotted([order="6"]){order:6}::slotted([order="first"]){order:-9999}::slotted([order="last"]){order:9999}::slotted([order="none"]){order:0}::slotted([justify-self="auto"]){justify-self:auto}::slotted([justify-self="start"]){justify-self:start}::slotted([justify-self="end"]){justify-self:end}::slotted([justify-self="center"]){justify-self:center}::slotted([justify-self="stretch"]){justify-self:stretch}::slotted([align-self="auto"]){align-self:auto}::slotted([align-self="start"]){align-self:start}::slotted([align-self="end"]){align-self:end}::slotted([align-self="center"]){align-self:center}::slotted([align-self="stretch"]){align-self:stretch}::slotted([place-self="auto"]){place-self:auto}::slotted([place-self="start"]){place-self:start}::slotted([place-self="end"]){place-self:end}::slotted([place-self="center"]){place-self:center}::slotted([place-self="stretch"]){place-self:stretch}@media only screen and (max-width: 767px){::slotted([col--mobile="auto"]){grid-column:auto}::slotted([col-span--mobile="1"]){grid-column:span 1 / span 1}::slotted([col-span--mobile="2"]){grid-column:span 2 / span 2}::slotted([col-span--mobile="3"]){grid-column:span 3 / span 3}::slotted([col-span--mobile="4"]){grid-column:span 4 / span 4}::slotted([col-span--mobile="5"]){grid-column:span 5 / span 5}::slotted([col-span--mobile="6"]){grid-column:span 6 / span 6}::slotted([col-span--mobile="7"]){grid-column:span 7 / span 7}::slotted([col-span--mobile="8"]){grid-column:span 8 / span 8}::slotted([col-span--mobile="9"]){grid-column:span 9 / span 9}::slotted([col-span--mobile="10"]){grid-column:span 10 / span 10}::slotted([col-span--mobile="11"]){grid-column:span 11 / span 11}::slotted([col-span--mobile="12"]){grid-column:span 12 / span 12}::slotted([col-span--mobile="full"]){grid-column:1 / -1}::slotted([order--mobile="1"]){order:1}::slotted([order--mobile="2"]){order:2}::slotted([order--mobile="3"]){order:3}::slotted([order--mobile="4"]){order:4}::slotted([order--mobile="5"]){order:5}::slotted([order--mobile="6"]){order:6}::slotted([order--mobile="first"]){order:-9999}::slotted([order--mobile="last"]){order:9999}::slotted([order--mobile="none"]){order:0}::slotted([justify-self--mobile="auto"]){justify-self:auto}::slotted([justify-self--mobile="start"]){justify-self:start}::slotted([justify-self--mobile="end"]){justify-self:end}::slotted([justify-self--mobile="center"]){justify-self:center}::slotted([justify-self--mobile="stretch"]){justify-self:stretch}::slotted([align-self--mobile="auto"]){align-self:auto}::slotted([align-self--mobile="start"]){align-self:start}::slotted([align-self--mobile="end"]){align-self:end}::slotted([align-self--mobile="center"]){align-self:center}::slotted([align-self--mobile="stretch"]){align-self:stretch}::slotted([place-self--mobile="auto"]){place-self:auto}::slotted([place-self--mobile="start"]){place-self:start}::slotted([place-self--mobile="end"]){place-self:end}::slotted([place-self--mobile="center"]){place-self:center}::slotted([place-self--mobile="stretch"]){place-self:stretch}}@media only screen and (min-width: 768px) and (max-width: 1024px){::slotted([col--tablet="auto"]){grid-column:auto}::slotted([col-span--tablet="1"]){grid-column:span 1 / span 1}::slotted([col-span--tablet="2"]){grid-column:span 2 / span 2}::slotted([col-span--tablet="3"]){grid-column:span 3 / span 3}::slotted([col-span--tablet="4"]){grid-column:span 4 / span 4}::slotted([col-span--tablet="5"]){grid-column:span 5 / span 5}::slotted([col-span--tablet="6"]){grid-column:span 6 / span 6}::slotted([col-span--tablet="7"]){grid-column:span 7 / span 7}::slotted([col-span--tablet="8"]){grid-column:span 8 / span 8}::slotted([col-span--tablet="9"]){grid-column:span 9 / span 9}::slotted([col-span--tablet="10"]){grid-column:span 10 / span 10}::slotted([col-span--tablet="11"]){grid-column:span 11 / span 11}::slotted([col-span--tablet="12"]){grid-column:span 12 / span 12}::slotted([col-span--tablet="full"]){grid-column:1 / -1}::slotted([order--tablet="1"]){order:1}::slotted([order--tablet="2"]){order:2}::slotted([order--tablet="3"]){order:3}::slotted([order--tablet="4"]){order:4}::slotted([order--tablet="5"]){order:5}::slotted([order--tablet="6"]){order:6}::slotted([order--tablet="first"]){order:-9999}::slotted([order--tablet="last"]){order:9999}::slotted([order--tablet="none"]){order:0}::slotted([justify-self--tablet="auto"]){justify-self:auto}::slotted([justify-self--tablet="start"]){justify-self:start}::slotted([justify-self--tablet="end"]){justify-self:end}::slotted([justify-self--tablet="center"]){justify-self:center}::slotted([justify-self--tablet="stretch"]){justify-self:stretch}::slotted([align-self--tablet="auto"]){align-self:auto}::slotted([align-self--tablet="start"]){align-self:start}::slotted([align-self--tablet="end"]){align-self:end}::slotted([align-self--tablet="center"]){align-self:center}::slotted([align-self--tablet="stretch"]){align-self:stretch}::slotted([place-self--tablet="auto"]){place-self:auto}::slotted([place-self--tablet="start"]){place-self:start}::slotted([place-self--tablet="end"]){place-self:end}::slotted([place-self--tablet="center"]){place-self:center}::slotted([place-self--tablet="stretch"]){place-self:stretch}}@media only screen and (min-width: 1025px){::slotted([col--laptop="auto"]){grid-column:auto}::slotted([col-span--laptop="1"]){grid-column:span 1 / span 1}::slotted([col-span--laptop="2"]){grid-column:span 2 / span 2}::slotted([col-span--laptop="3"]){grid-column:span 3 / span 3}::slotted([col-span--laptop="4"]){grid-column:span 4 / span 4}::slotted([col-span--laptop="5"]){grid-column:span 5 / span 5}::slotted([col-span--laptop="6"]){grid-column:span 6 / span 6}::slotted([col-span--laptop="7"]){grid-column:span 7 / span 7}::slotted([col-span--laptop="8"]){grid-column:span 8 / span 8}::slotted([col-span--laptop="9"]){grid-column:span 9 / span 9}::slotted([col-span--laptop="10"]){grid-column:span 10 / span 10}::slotted([col-span--laptop="11"]){grid-column:span 11 / span 11}::slotted([col-span--laptop="12"]){grid-column:span 12 / span 12}::slotted([col-span--laptop="full"]){grid-column:1 / -1}::slotted([justify-self--laptop="auto"]){justify-self:auto}::slotted([justify-self--laptop="start"]){justify-self:start}::slotted([justify-self--laptop="end"]){justify-self:end}::slotted([justify-self--laptop="center"]){justify-self:center}::slotted([justify-self--laptop="stretch"]){justify-self:stretch}::slotted([align-self--laptop="auto"]){align-self:auto}::slotted([align-self--laptop="start"]){align-self:start}::slotted([align-self--laptop="end"]){align-self:end}::slotted([align-self--laptop="center"]){align-self:center}::slotted([align-self--laptop="stretch"]){align-self:stretch}::slotted([place-self--laptop="auto"]){place-self:auto}::slotted([place-self--laptop="start"]){place-self:start}::slotted([place-self--laptop="end"]){place-self:end}::slotted([place-self--laptop="center"]){place-self:center}::slotted([place-self--laptop="stretch"]){place-self:stretch}}';
+const gridStyles = new CSSStyleSheet();
+gridStyles.replaceSync(gridCss);
+const gridItemStyles = new CSSStyleSheet();
+gridItemStyles.replaceSync(gridItemCss);
+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 _Grid = class _Grid extends PxElement {
+  constructor() {
+    super(gridStyles, gridItemStyles);
+    this.template = () => `<div class="grid">
+    <slot></slot>
+    </div>`;
+    this.shadowRoot.innerHTML = this.template();
+  }
+  static get observedAttributes() {
+    return [
+      ...super.observedAttributes,
+      "gap",
+      "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 = "inside-section-default";
+    }
+    if (!this.alignItems) {
+      this.alignItems = "stretch";
+    }
+  }
+  attributeChangedCallback(attrName, oldValue, newValue) {
+    if (oldValue !== newValue) {
+      switch (attrName) {
+        case "gap":
+          this.updateGap(oldValue, newValue, gridGapValues);
+          break;
+        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(`Bad gap value for`, this.$el);
+      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}-desktop)`
+        );
+      }
+    };
+    updateGapStyle(oldValue);
+    updateGapStyle(newValue);
+  }
+  updateAttribute(attrName, oldValue, newValue, attrValues) {
+    if (!this.checkName(attrValues, newValue)) {
+      console.error(
+        `${newValue} is not an allowed ${attrName} value for ${this.$el}`
+      );
+    } else if (attrName === "grid-cols" || attrName === "grid-cols--mobile" || attrName === "grid-cols--tablet" || attrName === "grid-cols--laptop") {
+      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}`);
+      }
+    }
+  }
+  checkName(values, value) {
+    return values.includes(value);
+  }
+  get gap() {
+    return this.getAttribute("gap");
+  }
+  set gap(value) {
+    this.setAttribute("gap", 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);
+  }
+  get alignContentTablet() {
+    return this.getAttribute("align-content--tablet");
+  }
+  set alignContentTablet(value) {
+    this.setAttribute("align-content--tablet", value);
+  }
+  get alignItemsTablet() {
+    return this.getAttribute("align-items--tablet");
+  }
+  set alignItemsTablet(value) {
+    this.setAttribute("align-items--tablet", value);
+  }
+  get justifyContentLaptop() {
+    return this.getAttribute("justify-content--laptop");
+  }
+  set justifyContentLaptop(value) {
+    this.setAttribute("justify-content--laptop", value);
+  }
+  get justifyItemsLaptop() {
+    return this.getAttribute("justify-items--laptop");
+  }
+  set justifyItemsLaptop(value) {
+    this.setAttribute("justify-items--laptop", value);
+  }
+  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;
+customElements.define("px-grid", Grid);
+const _GridItem = class _GridItem extends Grid {
+  constructor() {
+    super();
+    this.template = () => `<div class="grid-item">
+      <slot></slot>
+    </div>`;
+    this.shadowRoot.innerHTML = this.template();
+  }
+  static get observedAttributes() {
+    return [
+      ...super.observedAttributes,
+      "col-span",
+      "col-span--mobile",
+      "col-span--tablet",
+      "col-span--laptop",
+      "col-span--desktop",
+      "justify-self",
+      "align-self",
+      "place-self",
+      "justify-self--mobile",
+      "align-self--mobile",
+      "place-self--mobile",
+      "justify-self--tablet",
+      "align-self--tablet",
+      "place-self--tablet",
+      "justify-self--laptop",
+      "align-self--laptop",
+      "place-self--laptop",
+      "justify-self--desktop",
+      "align-self--desktop",
+      "place-self--desktop",
+      "order",
+      "order--mobile",
+      "order--tablet",
+      "order--laptop",
+      "order--desktop"
+    ];
+  }
+  connectedCallback() {
+    var _a;
+    super.connectedCallback();
+    if (((_a = this.parentElement) == null ? void 0 : _a.getAttribute("align-items")) === "stretch") {
+      this.$el.style.height = "100%";
+    }
+  }
+  get colSpan() {
+    return this.getAttribute("col-span");
+  }
+  set colSpan(value) {
+    this.setAttribute("col-span", value);
+  }
+  get colSpanMobile() {
+    return this.getAttribute("col-span--mobile");
+  }
+  set colSpanMobile(value) {
+    this.setAttribute("col-span--mobile", value);
+  }
+  get colSpanTablet() {
+    return this.getAttribute("col-span--tablet");
+  }
+  set colSpanTablet(value) {
+    this.setAttribute("col-span--tablet", value);
+  }
+  get colSpanLaptop() {
+    return this.getAttribute("col-span--laptop");
+  }
+  set colSpanLaptop(value) {
+    this.setAttribute("col-span--laptop", value);
+  }
+  get colSpanDesktop() {
+    return this.getAttribute("col-span--desktop");
+  }
+  set colSpanDesktop(value) {
+    this.setAttribute("col-span--desktop", value);
+  }
+  get justifySelf() {
+    return this.getAttribute("justify-self");
+  }
+  set justifySelf(value) {
+    this.setAttribute("justify-self", value);
+  }
+  get alignSelf() {
+    return this.getAttribute("align-self");
+  }
+  set alignSelf(value) {
+    this.setAttribute("align-self", value);
+  }
+  get placeSelf() {
+    return this.getAttribute("place-self");
+  }
+  set placeSelf(value) {
+    this.setAttribute("place-self", value);
+  }
+  get justifySelfMobile() {
+    return this.getAttribute("justify-self--mobile");
+  }
+  set justifySelfMobile(value) {
+    this.setAttribute("justify-self--mobile", value);
+  }
+  get alignSelfMobile() {
+    return this.getAttribute("align-self--mobile");
+  }
+  set alignSelfMobile(value) {
+    this.setAttribute("align-self--mobile", value);
+  }
+  get placeSelfMobile() {
+    return this.getAttribute("place-self--mobile");
+  }
+  set placeSelfMobile(value) {
+    this.setAttribute("place-self--mobile", value);
+  }
+  get justifySelfTablet() {
+    return this.getAttribute("justify-self--tablet");
+  }
+  set justifySelfTablet(value) {
+    this.setAttribute("justify-self--tablet", value);
+  }
+  get alignSelfTablet() {
+    return this.getAttribute("align-self--tablet");
+  }
+  set alignSelfTablet(value) {
+    this.setAttribute("align-self--tablet", value);
+  }
+  get placeSelfTablet() {
+    return this.getAttribute("place-self--tablet");
+  }
+  set placeSelfTablet(value) {
+    this.setAttribute("place-self--tablet", value);
+  }
+  get justifySelfLaptop() {
+    return this.getAttribute("justify-self--laptop");
+  }
+  set justifySelfLaptop(value) {
+    this.setAttribute("justify-self--laptop", value);
+  }
+  get alignSelfLaptop() {
+    return this.getAttribute("align-self--laptop");
+  }
+  set alignSelfLaptop(value) {
+    this.setAttribute("align-self--laptop", value);
+  }
+  get placeSelfLaptop() {
+    return this.getAttribute("place-self--laptop");
+  }
+  set placeSelfLaptop(value) {
+    this.setAttribute("place-self--laptop", value);
+  }
+  get justifySelfDesktop() {
+    return this.getAttribute("justify-self--desktop");
+  }
+  set justifySelfDesktop(value) {
+    this.setAttribute("justify-self--desktop", value);
+  }
+  get alignSelfDesktop() {
+    return this.getAttribute("align-self--desktop");
+  }
+  set alignSelfDesktop(value) {
+    this.setAttribute("align-self--desktop", value);
+  }
+  get placeSelfDesktop() {
+    return this.getAttribute("place-self--desktop");
+  }
+  set placeSelfDesktop(value) {
+    this.setAttribute("place-self--desktop", value);
+  }
+  get order() {
+    return this.getAttribute("order");
+  }
+  set order(value) {
+    this.setAttribute("order", value);
+  }
+  get orderMobile() {
+    return this.getAttribute("order--mobile");
+  }
+  set orderMobile(value) {
+    this.setAttribute("order--mobile", value);
+  }
+  get orderTablet() {
+    return this.getAttribute("order--tablet");
+  }
+  set orderTablet(value) {
+    this.setAttribute("order--tablet", value);
+  }
+  get orderLaptop() {
+    return this.getAttribute("order--laptop");
+  }
+  set orderLaptop(value) {
+    this.setAttribute("order--laptop", value);
+  }
+  get orderDesktop() {
+    return this.getAttribute("order--desktop");
+  }
+  set orderDesktop(value) {
+    this.setAttribute("order--desktop", value);
+  }
+};
+_GridItem.nativeName = "div";
+let GridItem = _GridItem;
+customElements.define("px-grid-item", GridItem);
 const buttonCss = '.btn{display:inline-flex;vertical-align:middle;align-items:center;justify-content:center;font-family:var(--px-font-family);font-size:var(--px-text-size-label-m-mobile);line-height:var(--px-line-height-m);font-weight:700;gap:var(--px-spacing-after-element-2xs-mobile);cursor:pointer;text-decoration:none;--btn-transition: all .2s ease-in-out 0s;transition:var(--btn-transition);border:var(--px-border-size-m) solid transparent}.btn,.btn *{box-sizing:border-box}.btn ::slotted(px-icon){line-height:0}.btn:hover:not([disabled],[aria-disabled=true],.loading){border-color:var(--px-border-color-action-hover-default)}.btn:focus:not([disabled],[aria-disabled=true]){outline-offset:var(--px-focus-offset-mobile);outline:var(--px-focus-outline-mobile) solid var(--px-border-color-focus-outline-default)}.btn:active{transform:scale(.95)}.btn[disabled],.btn[aria-disabled=true]{cursor:default;pointer-events:none}.btn.loading{cursor:inherit}.btn.loading ::slotted(px-spinner){line-height:0}.btn:not(.secondary,.tertiary,.patch){color:var(--px-text-color-heading-brand-inverted);background:var(--px-background-color-action-primary-default);min-height:var(--px-action-size-l);padding:var(--px-padding-xs-mobile) var(--px-padding-m-mobile);border-radius:var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-big) var(--px-radius-button-small)}.btn:not(.secondary,.tertiary,.patch) ::slotted([slot="after"]){margin-right:calc(var(--px-padding-xs-mobile) * -1)}.btn:not(.secondary,.tertiary,.patch) ::slotted([slot="before"]){margin-left:calc(var(--px-padding-xs-mobile) * -1)}.btn:not(.secondary,.tertiary,.patch):hover:not([disabled],[aria-disabled=true],.loading){color:var(--px-text-color-heading-brand-default);background:var(--px-background-color-action-hover-bordered-default)}.btn:not(.secondary,.tertiary,.patch)[disabled],.btn:not(.secondary,.tertiary,.patch)[aria-disabled=true]{background:var(--px-background-color-action-disabled-default);color:var(--px-text-color-action-disabled-default)}.btn:not(.secondary,.tertiary,.patch).loading{background:var(--px-background-color-action-disabled-default);color:var(--px-text-color-heading-brand-default);border-color:transparent}.btn:not(.secondary,.tertiary,.patch).extended{width:100%}.btn:not(.secondary,.tertiary,.patch).alternative{border-radius:var(--px-radius-button-small)}.btn.secondary{color:var(--px-text-color-heading-brand-default);background:var(--px-background-color-action-secondary-default);min-height:var(--px-action-size-l);padding:var(--px-padding-xs-mobile) var(--px-padding-m-mobile);border-radius:var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-big) var(--px-radius-button-small)}.btn.secondary:hover:not([disabled],[aria-disabled=true],.loading){color:var(--px-text-color-heading-brand-default);background:var(--px-background-color-action-hover-bordered-default)}.btn.secondary[disabled],.btn.secondary[aria-disabled=true]{background:var(--px-background-color-action-disabled-default);color:var(--px-text-color-action-disabled-default)}.btn.secondary.loading{background:var(--px-background-color-action-disabled-default);color:var(--px-text-color-heading-brand-default);border-color:transparent}.btn.secondary.extended{width:100%}.btn.secondary.alternative{border-radius:var(--px-radius-button-small)}.btn.tertiary{background:none;color:var(--px-text-color-heading-brand-default);border-radius:var(--px-radius-pill);border:var(--px-border-size-m) solid transparent;padding:var(--px-padding-2xs-mobile) 0;gap:var(--px-spacing-after-element-xs-mobile)}.btn.tertiary ::slotted(px-icon){display:flex;align-items:center;justify-content:center;width:var(--px-icon-size-m-mobile);height:var(--px-icon-size-m-mobile);border-radius:var(--px-radius-pill);background:var(--px-background-color-action-secondary-default);transition:var(--btn-transition)}.btn.tertiary:hover:not([disabled],[aria-disabled=true],.loading){padding:var(--px-padding-2xs-mobile) var(--px-padding-s-mobile)}.btn.tertiary:hover:not([disabled],[aria-disabled=true],.loading) ::slotted(px-icon){background:transparent;width:inherit;height:inherit}.btn.tertiary[disabled],.btn.tertiary[aria-disabled=true]{color:var(--px-text-color-action-disabled-default)}.btn.tertiary[disabled] ::slotted(px-icon),.btn.tertiary[aria-disabled=true] ::slotted(px-icon){background:var(--px-background-color-action-disabled-default)}.btn.tertiary.loading{color:var(--px-text-color-heading-brand-default);border-color:transparent}.btn.tertiary.loading ::slotted(px-spinner){display:flex;align-items:center;justify-content:center;width:var(--px-icon-size-m-mobile);height:var(--px-icon-size-m-mobile);border-radius:var(--px-radius-pill);background:var(--px-background-color-action-disabled-default)}.btn.patch{display:inline-flex}.btn.patch:hover:not([disabled],[aria-disabled=true],.loading){color:var(--px-text-color-heading-brand-default);background:var(--px-background-color-action-hover-bordered-default)}.btn.patch[disabled],.btn.patch[aria-disabled=true]{background:var(--px-background-color-action-disabled-default);color:var(--px-text-color-action-disabled-default)}button.link{background:none;border:none;text-decoration:underline;padding:0;cursor:pointer}button.link[disabled],button.link[aria-disabled=true]{cursor:default;pointer-events:none;color:var(--px-text-color-action-disabled-default)}:host([inverted]) .btn:hover:not([disabled],[aria-disabled=true],.loading){border-color:var(--px-border-color-action-hover-inverted)}:host([inverted]) .btn:focus:not([disabled],[aria-disabled=true]){outline-color:var(--px-border-color-focus-outline-inverted)}:host([inverted]) .btn:not(.secondary,.tertiary,.patch){color:var(--px-text-color-heading-brand-default);background:var(--px-background-color-action-primary-inverted)}:host([inverted]) .btn:not(.secondary,.tertiary,.patch):hover:not([disabled],[aria-disabled=true],.loading){color:var(--px-text-color-heading-brand-inverted);background:var(--px-background-color-action-hover-bordered-inverted)}:host([inverted]) .btn:not(.secondary,.tertiary,.patch)[disabled],:host([inverted]) .btn:not(.secondary,.tertiary,.patch)[aria-disabled=true]{background:var(--px-background-color-action-disabled-inverted);color:var(--px-text-color-action-disabled-inverted)}:host([inverted]) .btn:not(.secondary,.tertiary,.patch).loading{background:var(--px-background-color-action-disabled-inverted);color:var(--px-text-color-heading-brand-inverted);border-color:transparent}:host([inverted]) .btn.secondary{color:var(--px-text-color-heading-brand-inverted);background:var(--px-background-color-action-secondary-inverted)}:host([inverted]) .btn.secondary:hover:not([disabled],[aria-disabled=true],.loading){color:var(--px-text-color-heading-brand-inverted);background:var(--px-background-color-action-hover-bordered-inverted)}:host([inverted]) .btn.secondary[disabled],:host([inverted]) .btn.secondary[aria-disabled=true]{background:var(--px-background-color-action-disabled-inverted);color:var(--px-text-color-action-disabled-inverted)}:host([inverted]) .btn.secondary.loading{background:var(--px-background-color-action-disabled-inverted);color:var(--px-text-color-heading-brand-inverted);border-color:transparent}:host([inverted]) .btn.tertiary{color:var(--px-text-color-heading-brand-inverted)}:host([inverted]) .btn.tertiary ::slotted(px-icon){background:var(--px-background-color-action-secondary-inverted)}:host([inverted]) .btn.tertiary:hover:not([disabled],[aria-disabled=true],.loading) ::slotted(px-icon){background:transparent}:host([inverted]) .btn.tertiary[disabled],:host([inverted]) .btn.tertiary[aria-disabled=true]{color:var(--px-text-color-action-disabled-inverted)}:host([inverted]) .btn.tertiary[disabled] ::slotted(px-icon),:host([inverted]) .btn.tertiary[aria-disabled=true] ::slotted(px-icon){background:var(--px-background-color-action-disabled-inverted)}:host([inverted]) .btn.tertiary.loading{color:var(--px-text-color-heading-brand-inverted)}:host([inverted]) .btn.tertiary.loading ::slotted(px-spinner){background:var(--px-background-color-action-disabled-inverted)}:host([inverted]) .btn.patch:hover:not([disabled],[aria-disabled=true],.loading){color:var(--px-text-color-heading-brand-inverted);background:var( --px-background-color-action-hover-bordered-default-inverted )}:host([inverted]) .btn.patch[disabled],:host([inverted]) .btn.patch[aria-disabled=true]{background:var(--px-background-color-action-disabled-inverted);color:var(--px-text-color-action-disabled-inverted)}:host([inverted]) button.link[disabled],:host([inverted]) button.link[aria-disabled=true]{color:var(--px-text-color-action-disabled-inverted)}@media only screen and (min-width: 768px){.btn{font-size:var(--px-text-size-label-m-tablet);gap:var(--px-spacing-after-element-2xs-tablet)}.btn:focus:not([disabled],[aria-disabled=true]){outline-offset:var(--px-focus-offset-tablet);outline-width:var(--px-focus-outline-tablet)}.btn:not(.secondary,.tertiary,.patch){padding:var(--px-padding-xs-tablet) var(--px-padding-m-tablet)}.btn:not(.secondary,.tertiary,.patch) ::slotted([slot="after"]){margin-right:calc(var(--px-padding-xs-tablet) * -1)}.btn:not(.secondary,.tertiary,.patch) ::slotted([slot="before"]){margin-left:calc(var(--px-padding-xs-tablet) * -1)}.btn.secondary{padding:var(--px-padding-xs-tablet) var(--px-padding-m-tablet)}.btn.tertiary{padding:var(--px-padding-2xs-tablet) 0;gap:var(--px-spacing-after-element-xs-tablet)}.btn.tertiary ::slotted(px-icon){width:var(--px-icon-size-m-tablet);height:var(--px-icon-size-m-tablet)}.btn.tertiary:hover:not([disabled],[aria-disabled=true],.loading){padding:var(--px-padding-2xs-tablet) var(--px-padding-s-tablet)}.btn.tertiary.loading ::slotted(px-spinner){width:var(--px-icon-size-m-tablet);height:var(--px-icon-size-m-tablet)}}@media only screen and (min-width: 1025px){.btn{font-size:var(--px-text-size-label-m-desktop);gap:var(--px-spacing-after-element-2xs-desktop)}.btn:focus:not([disabled],[aria-disabled=true]){outline-offset:var(--px-focus-offset-desktop);outline-width:var(--px-focus-outline-desktop)}.btn:not(.secondary,.tertiary,.patch){padding:var(--px-padding-xs-desktop) var(--px-padding-m-desktop)}.btn:not(.secondary,.tertiary,.patch) ::slotted([slot="after"]){margin-right:calc(var(--px-padding-xs-desktop) * -1)}.btn:not(.secondary,.tertiary,.patch) ::slotted([slot="before"]){margin-left:calc(var(--px-padding-xs-desktop) * -1)}.btn.secondary{padding:var(--px-padding-xs-desktop) var(--px-padding-m-desktop)}.btn.tertiary{padding:var(--px-padding-2xs-desktop) 0;gap:var(--px-spacing-after-element-xs-desktop)}.btn.tertiary ::slotted(px-icon){width:var(--px-icon-size-m-desktop);height:var(--px-icon-size-m-desktop)}.btn.tertiary:hover:not([disabled],[aria-disabled=true],.loading){padding:var(--px-padding-2xs-desktop) var(--px-padding-s-desktop)}.btn.tertiary.loading ::slotted(px-spinner){width:var(--px-icon-size-m-desktop);height:var(--px-icon-size-m-desktop)}}@keyframes anim-spinner{0%{transform:rotate(0)}to{transform:rotate(360deg)}}';
 const linkCss = 'a,.link,::slotted(a){display:inline-flex;align-items:center;font-family:var(--px-font-family);font-size:var(--px-text-size-link-m-mobile);line-height:var(--px-line-height-m);font-weight:400;color:var(--px-text-color-heading-neutral-default)}a:hover,.link:hover{color:var(--px-text-color-action-hover-default)}a:focus,.link:focus{outline-offset:var(--px-focus-offset-mobile);outline:var(--px-focus-outline-mobile) solid var(--px-border-color-focus-outline-default)}a[aria-disabled=true],.link[aria-disabled=true]{cursor:default;pointer-events:none;color:var(--px-text-color-action-disabled-default)}a ::slotted([slot="after"]),.link ::slotted([slot="after"]){margin-left:var(--px-spacing-after-element-2xs-mobile)}a ::slotted(span[slot="after"]),a ::slotted(span[slot="before"]),.link ::slotted(span[slot="after"]),.link ::slotted(span[slot="before"]){display:inline-block}::slotted(a:hover){color:var(--px-text-color-action-hover-default)}a.no-style{color:inherit;text-decoration:none}a.no-style:hover,a.no-style:focus{color:inherit}a.skip-link{position:absolute;left:-10000px;top:auto;overflow:hidden;background-color:var(--px-background-color-container-weak);padding:var(--px-padding-xs-mobile)}a.skip-link:focus{left:auto;z-index:999}:host([inverted]) a,:host([inverted]) .link,:host([inverted]) ::slotted(a){color:var(--px-text-color-heading-neutral-inverted)}:host([inverted]) a:hover,:host([inverted]) .link:hover{color:var(--px-text-color-action-hover-inverted)}:host([inverted]) a:focus,:host([inverted]) .link:focus{outline-color:var(--px-border-color-focus-outline-inverted)}:host([inverted]) a[aria-disabled=true],:host([inverted]) .link[aria-disabled=true]{color:var(--px-text-color-action-disabled-inverted)}:host([inverted]) ::slotted(a:hover){color:var(--px-text-color-action-hover-inverted)}:host([inverted]) a.skip-link{background-color:var(--px-background-color-container-weak-inverted)}@media only screen and (min-width: 768px){a,.link,::slotted(a){font-size:var(--px-text-size-link-m-tablet)}a:focus,.link:focus{outline-offset:var(--px-focus-offset-tablet);outline-width:var(--px-focus-outline-tablet)}a ::slotted([slot="after"]),.link ::slotted([slot="after"]){margin-left:var(--px-spacing-after-element-2xs-tablet)}a.skip-link{padding:var(--px-padding-xs-tablet)}}@media only screen and (min-width: 1025px){a,.link,::slotted(a){font-size:var(--px-text-size-link-m-desktop)}a:focus,.link:focus{outline-offset:var(--px-focus-offset-desktop);outline-width:var(--px-focus-outline-desktop)}a ::slotted([slot="after"]),.link ::slotted([slot="after"]){margin-left:var(--px-spacing-after-element-2xs-desktop)}a.skip-link{padding:var(--px-padding-xs-desktop)}}';
 const styles$b = ".patch{display:inline-flex;align-items:center;padding:0 var(--px-padding-s-mobile);height:1.625rem;border:var(--px-border-size-m) solid transparent;border-radius:var(--px-radius-patch-big) var(--px-radius-patch-big) var(--px-radius-patch-big) var(--px-radius-patch-small);font-family:var(--px-font-family);font-weight:700;font-size:var(--px-text-size-label-m-mobile);line-height:var(--px-line-height-m);text-align:center;background-color:var(--px-background-color-purpose-promo-default);color:var(--px-text-color-action-neutral-inverted)}.patch,.patch *{box-sizing:border-box}.bottom-right{border-radius:var(--px-radius-patch-big) var(--px-radius-patch-big) var(--px-radius-patch-small) var(--px-radius-patch-big)}.bottom-left{border-radius:var(--px-radius-patch-big) var(--px-radius-patch-big) var(--px-radius-patch-big) var(--px-radius-patch-small)}.info{background-color:var(--px-background-color-purpose-info-default);color:var(--px-text-color-action-neutral-default)}.black-friday{background-color:var(--px-background-color-container-neutral-rich-default);color:var(--px-text-color-action-neutral-inverted)}.eco{background-color:var(--px-background-color-purpose-success-default);color:var(--px-text-color-action-neutral-inverted)}.greyed{background-color:var(--px-background-color-action-disabled-default);color:var(--px-text-color-action-disabled-default)}:host([inverted]) .patch{background-color:var(--px-background-color-purpose-promo-inverted);color:var(--px-text-color-action-neutral-inverted)}:host([inverted]) .info{background-color:var(--px-background-color-purpose-info-inverted);color:var(--px-text-color-action-neutral-default)}:host([inverted]) .black-friday{background-color:var(--px-background-color-container-neutral-bare-default);color:var(--px-text-color-action-neutral-default)}:host([inverted]) .eco{background-color:var(--px-background-color-purpose-success-inverted);color:var(--px-text-color-action-neutral-default)}:host([inverted]) .greyed{background-color:var(--px-background-color-action-disabled-inverted);color:var(--px-text-color-action-disabled-inverted)}@media only screen and (min-width: 768px){.patch{padding:0 var(--px-padding-s-tablet);font-size:var(--px-text-size-label-m-tablet)}}@media only screen and (min-width: 1025px){.patch{padding:0 var(--px-padding-s-desktop);font-size:var(--px-text-size-label-m-desktop)}}@media only screen and (min-width: 1441px){.patch{padding:0 var(--px-padding-s-desktop);font-size:var(--px-text-size-label-m-desktop)}}";
@@ -1501,7 +2020,7 @@ class FontIcon extends Icon {
   }
 }
 customElements.define("px-icon-f", FontIcon);
-const containerCss = '.container{font-family:var(--px-font-family);background-color:var(--background-color);background-image:var(--background-image);background:var(--background-gradient);border-radius:var(--px-radius-main);padding:var(--container-padding-top--mobile) var(--container-padding-right--mobile) var(--container-padding-bottom--mobile) var(--container-padding-left--mobile);box-sizing:border-box}:host([inverted]) .container{background-color:var(--background-color-inverted)}.border-none{border:none}.border-s{border:var(--px-border-size-s) solid var(--border-color)}.border-m{border:var(--px-border-size-m) solid var(--border-color)}.border-l{border:var(--px-border-size-l) solid var(--border-color)}.border-side-top{border-bottom-style:none;border-right-style:none;border-left-style:none}.border-side-right{border-top-style:none;border-bottom-style:none;border-left-style:none}.border-side-bottom{border-top-style:none;border-right-style:none;border-left-style:none}.border-side-left{border-top-style:none;border-right-style:none;border-bottom-style:none}.border-side-block{border-inline-style:none}.border-side-inline{border-block-style:none}:host([inverted]) .border-s,:host([inverted]) .border-m,:host([inverted]) .border-l{border-color:var(--border-color-inverted)}.border-radius-main{border-radius:var(--px-radius-main)}.border-radius-pill{border-radius:var(--px-radius-pill)}.no-border-radius-top{border-top-left-radius:var(--px-radius-none);border-top-right-radius:var(--px-radius-none)}.no-border-radius-right{border-top-right-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-bottom{border-bottom-left-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-left{border-top-left-radius:var(--px-radius-none);border-bottom-left-radius:var(--px-radius-none)}.no-border-radius-all,.border-radius-none{border-radius:var(--px-radius-none)}.bgimg{background-repeat:no-repeat}.background-size-cover{background-size:cover;background-position:center center}.background-size-contain{background-size:contain}.box-shadow-none{box-shadow:none}.box-shadow-s{box-shadow:0 1px 2px #2525251f}.box-shadow-m{box-shadow:0 4px 6px -1px #25252514}.box-shadow-l{box-shadow:0 10px 15px -3px #25252514}.box-shadow-xl{box-shadow:0 20px 25px -5px #25252514}.anchored{position:relative}::slotted([slot="anchor-right"]),::slotted([slot="anchor-left"]),::slotted([slot="anchor-full"]){position:absolute;top:0}::slotted([slot="anchor-right"]),::slotted([slot="anchor-left"]){transform:translateY(-50%);z-index:2}::slotted([slot="anchor-right"]){right:var(--container-padding-right--mobile)}::slotted([slot="anchor-left"]){left:var(--container-padding-left--mobile)}::slotted([slot="anchor-full"]){transform:translateY(-100%);right:0;left:0;text-align:center;z-index:1}@media only screen and (max-width: 640px){.container{background-color:var(--background-color--mobile, var(--background-color));background-image:var( --background-image--mobile, var( --background-image, var(--background-gradient--mobile, var(--background-gradient)) ) )}:host([inverted]) .container{background-color:var( --background-color-inverted--mobile, var(--background-color-inverted) )}.border-side-top--mobile{border-top-style:solid;border-right-style:none;border-bottom-style:none;border-left-style:none}.border-side-right--mobile{border-top-style:none;border-right-style:solid;border-bottom-style:none;border-left-style:none}.border-side-bottom--mobile{border-top-style:none;border-right-style:none;border-bottom-style:solid;border-left-style:none}.border-side-left--mobile{border-top-style:none;border-right-style:none;border-bottom-style:none;border-left-style:solid}.border-side-block--mobile{border-inline-style:none;border-block-style:solid}.border-side-inline--mobile{border-block-style:none;border-inline-style:solid}.no-border-radius-top--mobile{border-top-left-radius:var(--px-radius-none);border-top-right-radius:var(--px-radius-none)}.no-border-radius-right--mobile{border-top-right-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-bottom--mobile{border-bottom-left-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-left--mobile{border-top-left-radius:var(--px-radius-none);border-bottom-left-radius:var(--px-radius-none)}.no-border-radius-all--mobile{border-radius:var(--px-radius-none)}}.border-s ::slotted([slot="anchor-full"]){right:calc(var(--px-border-size-s) * -1);left:calc(var(--px-border-size-s) * -1)}.border-m ::slotted([slot="anchor-full"]){right:calc(var(--px-border-size-m) * -1);left:calc(var(--px-border-size-m) * -1)}.border-l ::slotted([slot="anchor-full"]){right:calc(var(--px-border-l) * -1);left:calc(var(--px-border-l) * -1)}@media only screen and (min-width: 768px) and (max-width: 1024px){.container{padding:var(--container-padding-top--tablet) var(--container-padding-right--tablet) var(--container-padding-bottom--tablet) var(--container-padding-left--tablet);background-color:var(--background-color--tablet, var(--background-color));background-image:var( --background-image--tablet, var( --background-image, var(--background-gradient--tablet, var(--background-gradient)) ) )}:host([inverted]) .container{background-color:var( --background-color-inverted--tablet, var(--background-color-inverted) )}.no-border-radius-top--tablet{border-top-left-radius:var(--px-radius-none);border-top-right-radius:var(--px-radius-none)}.no-border-radius-right--tablet{border-top-right-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-bottom--tablet{border-bottom-left-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-left--tablet{border-top-left-radius:var(--px-radius-none);border-bottom-left-radius:var(--px-radius-none)}.no-border-radius-all--tablet{border-radius:var(--px-radius-none)}.border-side-top--tablet{border-top-style:solid;border-right-style:none;border-bottom-style:none;border-left-style:none}.border-side-right--tablet{border-top-style:none;border-right-style:solid;border-bottom-style:none;border-left-style:none}.border-side-bottom--tablet{border-top-style:none;border-right-style:none;border-bottom-style:solid;border-left-style:none}.border-side-left--tablet{border-top-style:none;border-right-style:none;border-bottom-style:none;border-left-style:solid}.border-side-block--tablet{border-inline-style:none;border-block-style:solid}.border-side-inline--tablet{border-block-style:none;border-inline-style:solid}::slotted([slot="anchor-right"]){right:var(--container-padding-right--tablet)}::slotted([slot="anchor-left"]){left:var(--container-padding-left--tablet)}}@media only screen and (min-width: 1025px){.container{padding:var(--container-padding-top--laptop) var(--container-padding-right--laptop) var(--container-padding-bottom--laptop) var(--container-padding-left--laptop);background-color:var(--background-color--laptop, var(--background-color));background-image:var( --background-image--laptop, var( --background-image, var(--background-gradient--laptop, var(--background-gradient)) ) )}:host([inverted]) .container{background-color:var( --background-color-inverted--laptop, var(--background-color-inverted) )}.no-border-radius-top--laptop{border-top-left-radius:var(--px-radius-none);border-top-right-radius:var(--px-radius-none)}.no-border-radius-right--laptop{border-top-right-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-bottom--laptop{border-bottom-left-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-left--laptop{border-top-left-radius:var(--px-radius-none);border-bottom-left-radius:var(--px-radius-none)}.no-border-radius-all--laptop{border-radius:var(--px-radius-none)}::slotted([slot="anchor-right"]){right:var(--container-padding-right--laptop)}::slotted([slot="anchor-left"]){left:var(--container-padding-left--laptop)}.border-side-top--laptop{border-top-style:solid;border-right-style:none;border-bottom-style:none;border-left-style:none}.border-side-right--laptop{border-top-style:none;border-right-style:solid;border-bottom-style:none;border-left-style:none}.border-side-bottom--laptop{border-top-style:none;border-right-style:none;border-bottom-style:solid;border-left-style:none}.border-side-left--laptop{border-top-style:none;border-right-style:none;border-bottom-style:none;border-left-style:solid}.border-side-block--laptop{border-inline-style:none;border-block-style:solid}.border-side-inline--laptop{border-block-style:none;border-inline-style:solid}}';
+const containerCss = ':host{display:block}.container{font-family:var(--px-font-family);background-color:var(--background-color);background-image:var(--background-image);background:var(--background-gradient);border-radius:var(--px-radius-main);padding:var(--container-padding-top--mobile) var(--container-padding-right--mobile) var(--container-padding-bottom--mobile) var(--container-padding-left--mobile);box-sizing:border-box}:host([inverted]) .container{background-color:var(--background-color-inverted)}.border-none{border:none}.border-s{border:var(--px-border-size-s) solid var(--border-color)}.border-m{border:var(--px-border-size-m) solid var(--border-color)}.border-l{border:var(--px-border-size-l) solid var(--border-color)}.border-side-top{border-bottom-style:none;border-right-style:none;border-left-style:none}.border-side-right{border-top-style:none;border-bottom-style:none;border-left-style:none}.border-side-bottom{border-top-style:none;border-right-style:none;border-left-style:none}.border-side-left{border-top-style:none;border-right-style:none;border-bottom-style:none}.border-side-block{border-inline-style:none}.border-side-inline{border-block-style:none}:host([inverted]) .border-s,:host([inverted]) .border-m,:host([inverted]) .border-l{border-color:var(--border-color-inverted)}.border-radius-main{border-radius:var(--px-radius-main)}.border-radius-pill{border-radius:var(--px-radius-pill)}.no-border-radius-top{border-top-left-radius:var(--px-radius-none);border-top-right-radius:var(--px-radius-none)}.no-border-radius-right{border-top-right-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-bottom{border-bottom-left-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-left{border-top-left-radius:var(--px-radius-none);border-bottom-left-radius:var(--px-radius-none)}.no-border-radius-all,.border-radius-none{border-radius:var(--px-radius-none)}.bgimg{background-repeat:no-repeat}.background-size-cover{background-size:cover;background-position:center center}.background-size-contain{background-size:contain}.box-shadow-none{box-shadow:none}.box-shadow-s{box-shadow:0 1px 2px #2525251f}.box-shadow-m{box-shadow:0 4px 6px -1px #25252514}.box-shadow-l{box-shadow:0 10px 15px -3px #25252514}.box-shadow-xl{box-shadow:0 20px 25px -5px #25252514}.anchored{position:relative}::slotted([slot="anchor-right"]),::slotted([slot="anchor-left"]),::slotted([slot="anchor-full"]){position:absolute;top:0}::slotted([slot="anchor-right"]),::slotted([slot="anchor-left"]){transform:translateY(-50%);z-index:2}::slotted([slot="anchor-right"]){right:var(--container-padding-right--mobile)}::slotted([slot="anchor-left"]){left:var(--container-padding-left--mobile)}::slotted([slot="anchor-full"]){transform:translateY(-100%);right:0;left:0;text-align:center;z-index:1}@media only screen and (max-width: 640px){.container{background-color:var(--background-color--mobile, var(--background-color));background-image:var( --background-image--mobile, var( --background-image, var(--background-gradient--mobile, var(--background-gradient)) ) )}:host([inverted]) .container{background-color:var( --background-color-inverted--mobile, var(--background-color-inverted) )}.border-side-top--mobile{border-top-style:solid;border-right-style:none;border-bottom-style:none;border-left-style:none}.border-side-right--mobile{border-top-style:none;border-right-style:solid;border-bottom-style:none;border-left-style:none}.border-side-bottom--mobile{border-top-style:none;border-right-style:none;border-bottom-style:solid;border-left-style:none}.border-side-left--mobile{border-top-style:none;border-right-style:none;border-bottom-style:none;border-left-style:solid}.border-side-block--mobile{border-inline-style:none;border-block-style:solid}.border-side-inline--mobile{border-block-style:none;border-inline-style:solid}.no-border-radius-top--mobile{border-top-left-radius:var(--px-radius-none);border-top-right-radius:var(--px-radius-none)}.no-border-radius-right--mobile{border-top-right-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-bottom--mobile{border-bottom-left-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-left--mobile{border-top-left-radius:var(--px-radius-none);border-bottom-left-radius:var(--px-radius-none)}.no-border-radius-all--mobile{border-radius:var(--px-radius-none)}}.border-s ::slotted([slot="anchor-full"]){right:calc(var(--px-border-size-s) * -1);left:calc(var(--px-border-size-s) * -1)}.border-m ::slotted([slot="anchor-full"]){right:calc(var(--px-border-size-m) * -1);left:calc(var(--px-border-size-m) * -1)}.border-l ::slotted([slot="anchor-full"]){right:calc(var(--px-border-l) * -1);left:calc(var(--px-border-l) * -1)}@media only screen and (min-width: 768px) and (max-width: 1024px){.container{padding:var(--container-padding-top--tablet) var(--container-padding-right--tablet) var(--container-padding-bottom--tablet) var(--container-padding-left--tablet);background-color:var(--background-color--tablet, var(--background-color));background-image:var( --background-image--tablet, var( --background-image, var(--background-gradient--tablet, var(--background-gradient)) ) )}:host([inverted]) .container{background-color:var( --background-color-inverted--tablet, var(--background-color-inverted) )}.no-border-radius-top--tablet{border-top-left-radius:var(--px-radius-none);border-top-right-radius:var(--px-radius-none)}.no-border-radius-right--tablet{border-top-right-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-bottom--tablet{border-bottom-left-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-left--tablet{border-top-left-radius:var(--px-radius-none);border-bottom-left-radius:var(--px-radius-none)}.no-border-radius-all--tablet{border-radius:var(--px-radius-none)}.border-side-top--tablet{border-top-style:solid;border-right-style:none;border-bottom-style:none;border-left-style:none}.border-side-right--tablet{border-top-style:none;border-right-style:solid;border-bottom-style:none;border-left-style:none}.border-side-bottom--tablet{border-top-style:none;border-right-style:none;border-bottom-style:solid;border-left-style:none}.border-side-left--tablet{border-top-style:none;border-right-style:none;border-bottom-style:none;border-left-style:solid}.border-side-block--tablet{border-inline-style:none;border-block-style:solid}.border-side-inline--tablet{border-block-style:none;border-inline-style:solid}::slotted([slot="anchor-right"]){right:var(--container-padding-right--tablet)}::slotted([slot="anchor-left"]){left:var(--container-padding-left--tablet)}}@media only screen and (min-width: 1025px){.container{padding:var(--container-padding-top--laptop) var(--container-padding-right--laptop) var(--container-padding-bottom--laptop) var(--container-padding-left--laptop);background-color:var(--background-color--laptop, var(--background-color));background-image:var( --background-image--laptop, var( --background-image, var(--background-gradient--laptop, var(--background-gradient)) ) )}:host([inverted]) .container{background-color:var( --background-color-inverted--laptop, var(--background-color-inverted) )}.no-border-radius-top--laptop{border-top-left-radius:var(--px-radius-none);border-top-right-radius:var(--px-radius-none)}.no-border-radius-right--laptop{border-top-right-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-bottom--laptop{border-bottom-left-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-left--laptop{border-top-left-radius:var(--px-radius-none);border-bottom-left-radius:var(--px-radius-none)}.no-border-radius-all--laptop{border-radius:var(--px-radius-none)}::slotted([slot="anchor-right"]){right:var(--container-padding-right--laptop)}::slotted([slot="anchor-left"]){left:var(--container-padding-left--laptop)}.border-side-top--laptop{border-top-style:solid;border-right-style:none;border-bottom-style:none;border-left-style:none}.border-side-right--laptop{border-top-style:none;border-right-style:solid;border-bottom-style:none;border-left-style:none}.border-side-bottom--laptop{border-top-style:none;border-right-style:none;border-bottom-style:solid;border-left-style:none}.border-side-left--laptop{border-top-style:none;border-right-style:none;border-bottom-style:none;border-left-style:solid}.border-side-block--laptop{border-inline-style:none;border-block-style:solid}.border-side-inline--laptop{border-block-style:none;border-inline-style:solid}}';
 const containerStyles = new CSSStyleSheet();
 containerStyles.replaceSync(containerCss);
 const anchorValues = ["anchor-right", "anchor-left", "anchor-full"];
@@ -1603,7 +2122,7 @@ const _Container = class _Container extends PxElement {
       }
     }
     if (((_c = this.parentElement) == null ? void 0 : _c.localName) === "px-grid-item" || ((_d = this.parentElement) == null ? void 0 : _d.localName) === "px-a") {
-      this.$el.style.height = "100%";
+      this.style.height = "100%";
     }
   }
   attributeChangedCallback(attrName, oldValue, newValue) {
@@ -2781,10 +3300,11 @@ const _Accordion = class _Accordion extends PxElement {
 _Accordion.nativeName = "details";
 let Accordion = _Accordion;
 customElements.define("px-accordion", Accordion);
-const imgCss = 'img{display:inline-block;vertical-align:middle;max-width:100%;height:auto;border-style:none}.border-radius-main,.border-radius-main img{border-radius:var(--px-radius-main)}.border-radius-pill,.border-radius-pill img{border-radius:var(--px-radius-pill)}.no-border-radius-top,.no-border-radius-top img{border-top-left-radius:var(--px-radius-none);border-top-right-radius:var(--px-radius-none)}.no-border-radius-right,.no-border-radius-right img{border-top-right-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-bottom,.no-border-radius-bottom img{border-bottom-left-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-left,.no-border-radius-left img{border-top-left-radius:var(--px-radius-none);border-bottom-left-radius:var(--px-radius-none)}.no-border-radius-all,.no-border-radius-all img{border-radius:var(--px-radius-none)}@media only screen and (max-width: 767px){:host([hide-for="mobile"]),:host([show-for="tablet"]),:host([show-for="laptop"]),.hide-for-mobile,.show-for-tablet,.show-for-laptop{display:none}.no-border-radius-top--mobile,.no-border-radius-top--mobile img{border-top-left-radius:var(--px-radius-none);border-top-right-radius:var(--px-radius-none)}.no-border-radius-right--mobile,.no-border-radius-right--mobile img{border-top-right-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-bottom--mobile,.no-border-radius-bottom--mobile img{border-bottom-left-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-left--mobile,.no-border-radius-left--mobile img{border-top-left-radius:var(--px-radius-none);border-bottom-left-radius:var(--px-radius-none)}.no-border-radius-all--mobile,.no-border-radius-all--mobile img{border-radius:var(--px-radius-none)}}@media only screen and (min-width: 768px) and (max-width: 1024px){:host([hide-for="tablet"]),:host([show-for="mobile"]),:host([show-for="laptop"]),.hide-for-tablet,.show-for-mobile,.show-for-laptop{display:none}.no-border-radius-top--tablet,.no-border-radius-top--tablet img{border-top-left-radius:var(--px-radius-none);border-top-right-radius:var(--px-radius-none)}.no-border-radius-right--tablet,.no-border-radius-right--tablet img{border-top-right-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-bottom--tablet,.no-border-radius-bottom--tablet img{border-bottom-left-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-left--tablet,.no-border-radius-left--tablet img{border-top-left-radius:var(--px-radius-none);border-bottom-left-radius:var(--px-radius-none)}.no-border-radius-all--tablet,.no-border-radius-all--tablet img{border-radius:var(--px-radius-none)}}@media only screen and (min-width: 1025px){:host([hide-for="laptop"]),:host([show-for="mobile"]),:host([show-for="tablet"]),.hide-for-laptop,.show-for-mobile,.show-for-tablet{display:none}.no-border-radius-top--laptop,.no-border-radius-top--laptop img{border-top-left-radius:var(--px-radius-none);border-top-right-radius:var(--px-radius-none)}.no-border-radius-right--laptop,.no-border-radius-right--laptop img{border-top-right-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-bottom--laptop,.no-border-radius-bottom--laptop img{border-bottom-left-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-left--laptop,.no-border-radius-left--laptop img{border-top-left-radius:var(--px-radius-none);border-bottom-left-radius:var(--px-radius-none)}.no-border-radius-all--laptop,.no-border-radius-all--laptop img{border-radius:var(--px-radius-none)}}';
+const imgCss = ':host{display:inline-block;line-height:0}picture{display:inline-block}img{display:inline-block;border-style:none;width:var(--img-width--mobile, auto);max-width:100%}.border-radius-main,.border-radius-main img{border-radius:var(--px-radius-main)}.border-radius-pill,.border-radius-pill img{border-radius:var(--px-radius-pill)}.no-border-radius-top,.no-border-radius-top img{border-top-left-radius:var(--px-radius-none);border-top-right-radius:var(--px-radius-none)}.no-border-radius-right,.no-border-radius-right img{border-top-right-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-bottom,.no-border-radius-bottom img{border-bottom-left-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-left,.no-border-radius-left img{border-top-left-radius:var(--px-radius-none);border-bottom-left-radius:var(--px-radius-none)}.no-border-radius-all,.no-border-radius-all img{border-radius:var(--px-radius-none)}@media only screen and (max-width: 767px){:host([hide-for="mobile"]),:host([show-for="tablet"]),:host([show-for="laptop"]),.hide-for-mobile,.show-for-tablet,.show-for-laptop{display:none}.no-border-radius-top--mobile,.no-border-radius-top--mobile img{border-top-left-radius:var(--px-radius-none);border-top-right-radius:var(--px-radius-none)}.no-border-radius-right--mobile,.no-border-radius-right--mobile img{border-top-right-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-bottom--mobile,.no-border-radius-bottom--mobile img{border-bottom-left-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-left--mobile,.no-border-radius-left--mobile img{border-top-left-radius:var(--px-radius-none);border-bottom-left-radius:var(--px-radius-none)}.no-border-radius-all--mobile,.no-border-radius-all--mobile img{border-radius:var(--px-radius-none)}}@media only screen and (min-width: 768px) and (max-width: 1024px){img{width:var(--img-width--tablet, auto)}:host([hide-for="tablet"]),:host([show-for="mobile"]),:host([show-for="laptop"]),.hide-for-tablet,.show-for-mobile,.show-for-laptop{display:none}.no-border-radius-top--tablet,.no-border-radius-top--tablet img{border-top-left-radius:var(--px-radius-none);border-top-right-radius:var(--px-radius-none)}.no-border-radius-right--tablet,.no-border-radius-right--tablet img{border-top-right-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-bottom--tablet,.no-border-radius-bottom--tablet img{border-bottom-left-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-left--tablet,.no-border-radius-left--tablet img{border-top-left-radius:var(--px-radius-none);border-bottom-left-radius:var(--px-radius-none)}.no-border-radius-all--tablet,.no-border-radius-all--tablet img{border-radius:var(--px-radius-none)}}@media only screen and (min-width: 1025px){img{width:var(--img-width--laptop, auto)}:host([hide-for="laptop"]),:host([show-for="mobile"]),:host([show-for="tablet"]),.hide-for-laptop,.show-for-mobile,.show-for-tablet{display:none}.no-border-radius-top--laptop,.no-border-radius-top--laptop img{border-top-left-radius:var(--px-radius-none);border-top-right-radius:var(--px-radius-none)}.no-border-radius-right--laptop,.no-border-radius-right--laptop img{border-top-right-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-bottom--laptop,.no-border-radius-bottom--laptop img{border-bottom-left-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-left--laptop,.no-border-radius-left--laptop img{border-top-left-radius:var(--px-radius-none);border-bottom-left-radius:var(--px-radius-none)}.no-border-radius-all--laptop,.no-border-radius-all--laptop img{border-radius:var(--px-radius-none)}}@media only screen and (min-width: 1441px){img{width:var(--img-width--desktop, auto)}}';
 const styleSheet$8 = new CSSStyleSheet();
 styleSheet$8.replaceSync(imgCss);
 const breakpointsValues = ["", "mobile", "tablet", "laptop"];
+const imageWidthValues = ["", "default", "s", "m", "l"];
 class AbstractImage extends PxElement {
   constructor() {
     super(styleSheet$8);
@@ -2798,7 +3318,12 @@ class AbstractImage extends PxElement {
       "no-border-radius",
       "no-border-radius--mobile",
       "no-border-radius--tablet",
-      "no-border-radius--laptop"
+      "no-border-radius--laptop",
+      "width",
+      "width--mobile",
+      "width--tablet",
+      "width--laptop",
+      "width--desktop"
     ];
   }
   attributeChangedCallback(attrName, oldValue, newValue) {
@@ -2827,12 +3352,60 @@ class AbstractImage extends PxElement {
             noBorderRadiusValues
           );
           break;
+        case "width":
+        case "width--mobile":
+        case "width--tablet":
+        case "width--laptop":
+        case "width--desktop":
+          this.updateWidth(attrName, oldValue, newValue, imageWidthValues);
+          break;
         default:
           super.attributeChangedCallback(attrName, oldValue, newValue);
           break;
       }
     }
   }
+  updateWidth(attrName, oldValue, newValue, attrValues) {
+    if (!this.checkName(attrValues, newValue)) {
+      console.error(
+        `${newValue} is not an allowed ${attrName} value for ${this.$el}`
+      );
+      return;
+    }
+    const hasBreakpoint = attrName.indexOf("--") > -1;
+    const cssPropertyName = hasBreakpoint ? attrName.split("--")[0] : attrName;
+    const breakpoints = [];
+    if (!hasBreakpoint) {
+      if (!this.getAttribute(cssPropertyName + "--mobile")) {
+        breakpoints.push("mobile");
+      }
+      if (!this.getAttribute(cssPropertyName + "--tablet")) {
+        breakpoints.push("tablet");
+      }
+      if (!this.getAttribute(cssPropertyName + "--laptop")) {
+        breakpoints.push("laptop");
+      }
+      if (!this.getAttribute(cssPropertyName + "--desktop")) {
+        breakpoints.push("desktop");
+      }
+      breakpoints.forEach((breakpoint) => {
+        this.updateStyle(cssPropertyName, breakpoint, oldValue);
+        this.updateStyle(cssPropertyName, breakpoint, newValue);
+      });
+    } else {
+      const breakpoint = attrName.split("--")[1];
+      this.updateStyle(cssPropertyName, breakpoint, oldValue);
+      this.updateStyle(cssPropertyName, breakpoint, newValue);
+    }
+  }
+  updateStyle(cssName, breakpoint, value) {
+    if (value !== null && value !== "" && value !== "default") {
+      this.$el.style.setProperty(
+        `--img-${cssName}--${breakpoint}`,
+        `var(--px-image-${value}-${breakpoint === "laptop" ? "desktop" : breakpoint})`
+      );
+    }
+  }
   updateAttribute(attrName, oldValue, newValue, attrValues) {
     if (!this.checkName(attrValues, newValue)) {
       console.error(
@@ -2910,6 +3483,36 @@ class AbstractImage extends PxElement {
   set noBorderRadiusLaptop(value) {
     this.setAttribute("no-border-radius--laptop", value);
   }
+  get width() {
+    return this.getAttribute("width");
+  }
+  set width(value) {
+    this.setAttribute("width", value);
+  }
+  get widthMobile() {
+    return this.getAttribute("width--mobile");
+  }
+  set widthMobile(value) {
+    this.setAttribute("width--mobile", value);
+  }
+  get widthTablet() {
+    return this.getAttribute("width--tablet");
+  }
+  set widthTablet(value) {
+    this.setAttribute("width--tablet", value);
+  }
+  get widthLaptop() {
+    return this.getAttribute("width--laptop");
+  }
+  set widthLaptop(value) {
+    this.setAttribute("width--laptop", value);
+  }
+  get widthDesktop() {
+    return this.getAttribute("width--desktop");
+  }
+  set widthDesktop(value) {
+    this.setAttribute("width--desktop", value);
+  }
 }
 const _Image = class _Image extends AbstractImage {
   constructor() {
@@ -3736,7 +4339,6 @@ class Tab extends HTMLElement {
     if (!isFalsy(value)) {
       this.$button.setAttribute("aria-selected", value);
       this.$button.removeAttribute("tabindex");
-      this.$button.focus();
     } else {
       this.$button.removeAttribute("aria-selected");
       this.$button.tabIndex = -1;
@@ -4445,7 +5047,7 @@ const _Paragraph = class _Paragraph extends PxElement {
 _Paragraph.nativeName = "p";
 let Paragraph = _Paragraph;
 customElements.define("px-p", Paragraph);
-const typographyCss = "*{font-family:var(--px-font-family)}::slotted(ul),::slotted(ol){margin:0 0 0 var(--px-spacing-inside-section-default-desktop);padding:0}::slotted(b),::slotted(strong){font-weight:700}:host([inverted]) slot{color:var(--px-color-txt-body-inverted)}";
+const typographyCss = "*{font-family:var(--px-font-family)}::slotted(ul),::slotted(ol){margin:0 0 0 var(--px-spacing-inside-section-default-desktop);padding:0}::slotted(b),::slotted(strong){font-weight:700}:host([inverted]) slot{color:var(--px-text-color-body-neutral-strong-inverted)}";
 const lightStyles = ".li{padding-bottom:var(--px-padding-xs)}";
 const typographyStyles$1 = new CSSStyleSheet();
 const headingStyles = new CSSStyleSheet();
@@ -4846,6 +5448,8 @@ export {
   Container,
   Entrypoint,
   FontIcon,
+  Grid,
+  GridItem,
   H1,
   H2,
   H3,
@@ -4881,6 +5485,7 @@ export {
   VStack,
   WithFlexAttributes,
   addGlobalStylesheet,
+  alignItemsValues,
   backgroundColorValues,
   backgroundSizeValues,
   backgroundValues,
@@ -4892,16 +5497,21 @@ export {
   buttonIconSizeValues,
   buttonIconVariantValues,
   colorValues,
+  contentAlignmentValues,
+  directionValues,
   fontsizeValues,
   fontweightValues,
   gapValues,
   getSupportedAttributeNames,
   getViewportFormat,
   gradientValues,
+  gridColsValues,
   gridGapValues,
   headingValues,
   iconSizeValues$1 as iconSizeValues,
   isFalsy,
+  itemsAlignmentValues,
+  justifyContentValues,
   linkShapeValues,
   linkVariantValues,
   noBorderRadiusValues,
@@ -4916,5 +5526,6 @@ export {
   tagShapeValues,
   tagVariantValues,
   textalignValues,
-  variantValues$1 as variantValues
+  variantValues$1 as variantValues,
+  wrapValues
 };