@proximus/lavender 1.0.0-alpha.20 → 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");
@@ -2027,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"];
@@ -2129,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) {
@@ -3307,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);
@@ -3324,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) {
@@ -3353,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(
@@ -3436,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() {
@@ -4262,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;
@@ -4971,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();
@@ -5409,6 +5485,7 @@ export {
   VStack,
   WithFlexAttributes,
   addGlobalStylesheet,
+  alignItemsValues,
   backgroundColorValues,
   backgroundSizeValues,
   backgroundValues,
@@ -5421,6 +5498,7 @@ export {
   buttonIconVariantValues,
   colorValues,
   contentAlignmentValues,
+  directionValues,
   fontsizeValues,
   fontweightValues,
   gapValues,
@@ -5433,6 +5511,7 @@ export {
   iconSizeValues$1 as iconSizeValues,
   isFalsy,
   itemsAlignmentValues,
+  justifyContentValues,
   linkShapeValues,
   linkVariantValues,
   noBorderRadiusValues,
@@ -5447,5 +5526,6 @@ export {
   tagShapeValues,
   tagVariantValues,
   textalignValues,
-  variantValues$1 as variantValues
+  variantValues$1 as variantValues,
+  wrapValues
 };