@proximus/lavender 1.4.13-beta.1 → 1.4.13-beta.2

package/dist/lavender.es.js

@@ -13918,7 +13918,7 @@ class MddSection extends HTMLElement {
 if (!customElements.get("px-mdd-section")) {
   customElements.define("px-mdd-section", MddSection);
 }
-const styles$o = '.mdd-section-item-action-container{display:inline-flex;align-items:center}a{text-decoration:none;color:inherit}a ::slotted([slot="after"]){margin-left:var(--px-spacing-2xs-mobile)}a:hover{text-decoration:underline;color:var(--px-color-text-state-hover-default)}button{background:none;border:none;padding:0;margin:0;cursor:pointer;font:inherit;color:inherit;width:100%;text-align:left;font-weight:var(--px-font-weight-title)}a,button{display:block;font-size:var(--px-text-size-label-m-mobile);line-height:var(--px-line-height-ratio-l)}a:focus-visible,button:focus-visible{outline-offset:var(--px-focus-offset-mobile);outline:var(--px-focus-outline-mobile) solid var(--px-color-border-focus-outline-default)}@media screen and (max-width: 47.9375rem){a,button{padding:var(--px-spacing-xs-mobile) 0}}@media screen and (min-width: 48rem) and (max-width: 64rem){a,button{padding:var(--px-spacing-xs-tablet) 0}}@media screen and (min-width: 48rem){a,button{font-size:var(--px-text-size-label-m-tablet)}a:focus-visible,button:focus-visible{outline-offset:var(--px-focus-offset-tablet);outline-width:var(--px-focus-outline-tablet)}}@media screen and (min-width: 64.0625rem){a{display:inline-block}a ::slotted([slot="after"]){margin-left:var(--px-spacing-2xs-laptop)}a,button{font-size:var(--px-text-size-label-m-laptop)}a:focus-visible,button:focus-visible{outline-offset:var(--px-focus-offset-laptop);outline-width:var(--px-focus-outline-laptop)}}@media screen and (min-width: 90.0625rem){a ::slotted([slot="after"]){margin-left:var(--px-spacing-2xs-desktop)}a,button{font-size:var(--px-text-size-label-m-desktop)}a:focus-visible,button:focus-visible{outline-offset:var(--px-focus-offset-desktop);outline-width:var(--px-focus-outline-desktop)}}';
+const styles$o = '.mdd-section-item-action-container{display:inline-flex;align-items:center}a{text-decoration:none;color:inherit}a ::slotted([slot="after"]){margin-left:var(--px-spacing-2xs-mobile)}a:hover{text-decoration:underline;color:var(--px-color-text-state-hover-default)}button{background:none;border:none;padding:0;margin:0;cursor:pointer;font:inherit;color:inherit;width:100%;text-align:left;font-weight:var(--px-font-weight-title)}a,button{display:block;font-size:var(--px-text-size-label-m-mobile);line-height:var(--px-line-height-ratio-l);color:var(--px-color-text-neutral-default)}a:focus-visible,button:focus-visible{outline-offset:var(--px-focus-offset-mobile);outline:var(--px-focus-outline-mobile) solid var(--px-color-border-focus-outline-default)}@media screen and (max-width: 47.9375rem){a,button{padding:var(--px-spacing-xs-mobile) 0}}@media screen and (min-width: 48rem) and (max-width: 64rem){a,button{padding:var(--px-spacing-xs-tablet) 0}}@media screen and (min-width: 48rem){a,button{font-size:var(--px-text-size-label-m-tablet)}a:focus-visible,button:focus-visible{outline-offset:var(--px-focus-offset-tablet);outline-width:var(--px-focus-outline-tablet)}}@media screen and (min-width: 64.0625rem){a{display:inline-block}a ::slotted([slot="after"]){margin-left:var(--px-spacing-2xs-laptop)}a,button{font-size:var(--px-text-size-label-m-laptop)}a:focus-visible,button:focus-visible{outline-offset:var(--px-focus-offset-laptop);outline-width:var(--px-focus-outline-laptop)}}@media screen and (min-width: 90.0625rem){a ::slotted([slot="after"]){margin-left:var(--px-spacing-2xs-desktop)}a,button{font-size:var(--px-text-size-label-m-desktop)}a:focus-visible,button:focus-visible{outline-offset:var(--px-focus-offset-desktop);outline-width:var(--px-focus-outline-desktop)}}';
 const stylesheet$1 = new CSSStyleSheet();
 stylesheet$1.replaceSync(styles$o);
 class MddSectionItem extends HTMLElement {
@@ -15520,12 +15520,17 @@ const statusCardStateValues = [
   "error",
   "ongoing"
 ];
+const statusCardBackgroundColorValues = [
+  "",
+  "container-light",
+  "container-default"
+];
 const CLOSE_EVENT = "px.lavender.modal.close";
 const _StatusCard = class _StatusCard extends PxElement {
   constructor() {
     super(statusCardStyles);
     this.template = () => `<div class="status-card">
-  <px-container background-color="container-default" padding="s">
+  <px-container padding="s" background-color="container-default">
     <px-hstack gap="s" align-items="flex-start">
       <px-icon name="information_fill" from="lavender" size="l" color="brand"></px-icon>
       <px-vstack gap="s" grow="1">
@@ -15546,7 +15551,8 @@ const _StatusCard = class _StatusCard extends PxElement {
       ...super.observedAttributes,
       "state",
       "inverted",
-      "status-icon-aria-label"
+      "status-icon-aria-label",
+      "background-color"
     ];
   }
   connectedCallback() {
@@ -15581,12 +15587,34 @@ const _StatusCard = class _StatusCard extends PxElement {
             this.$statusIcon.removeAttribute("aria-label");
           }
           break;
+        case "background-color":
+          if (this.backgroundColor) {
+            this.updateBackgroundColor(
+              newValue,
+              statusCardBackgroundColorValues
+            );
+          }
+          break;
         default:
           super.attributeChangedCallback(attrName, oldValue, newValue);
           break;
       }
     }
   }
+  updateBackgroundColor(newValue, allowedValues) {
+    if (!this.checkName(allowedValues, newValue)) {
+      log(
+        `"${newValue}" is not a valid background-color value for ${this.tagName.toLowerCase()}. 
+        Allowed values are: "${allowedValues.join('", "')}".`
+      );
+      return;
+    }
+    if (newValue === null || newValue === "") {
+      this.$container.setAttribute("background-color", "container-default");
+    } else {
+      this.$container.setAttribute("background-color", newValue);
+    }
+  }
   updateState(state) {
     if (!this.checkName(statusCardStateValues, state)) {
       log(
@@ -15654,6 +15682,16 @@ const _StatusCard = class _StatusCard extends PxElement {
       this.removeAttribute("status-icon-aria-label");
     }
   }
+  get backgroundColor() {
+    return this.getAttribute("background-color");
+  }
+  set backgroundColor(value) {
+    if (value) {
+      this.setAttribute("background-color", value);
+    } else {
+      this.removeAttribute("background-color");
+    }
+  }
 };
 _StatusCard.nativeName = "div";
 let StatusCard = _StatusCard;
@@ -18753,6 +18791,7 @@ export {
   skeletonsVariantValues,
   sortingValues,
   stateValues,
+  statusCardBackgroundColorValues,
   statusCardStateValues,
   statusStateValues,
   statusValues,