@proximus/lavender 1.4.4-beta.1 → 1.4.5-alpha.2

package/dist/lavender.es.js

@@ -3648,7 +3648,6 @@ const _Banner = class _Banner extends VerticallyExtendedElement {
                 <slot name="title"></slot>
                 <slot name="description"></slot>
                 <slot name="content"></slot>
-                
               </div>
             </px-container>
           </px-grid>
@@ -3681,6 +3680,11 @@ const _Banner = class _Banner extends VerticallyExtendedElement {
   connectedCallback() {
     var _a;
     (_a = super.connectedCallback) == null ? void 0 : _a.call(this);
+    if (this.reduced) {
+      this.$container.setAttribute("padding", "m");
+    } else {
+      this.$container.setAttribute("padding", "l");
+    }
     this.createGridTemplateAreas();
     this.createGridding();
   }
@@ -3768,20 +3772,20 @@ const _Banner = class _Banner extends VerticallyExtendedElement {
   }
   createGridding(value) {
     const breakpoints = [
-      { prop: "hasGridding", gridProp: "gridCols", attr: "col-span" },
+      { prop: "hasGridding", gridAttr: "grid-cols", attr: "col-span" },
       {
         prop: "hasGriddingMobile",
-        gridProp: "gridColsMobile",
+        gridAttr: "grid-cols--mobile",
         attr: "col-span--mobile"
       },
       {
         prop: "hasGriddingTablet",
-        gridProp: "gridColsTablet",
+        gridAttr: "grid-cols--tablet",
         attr: "col-span--tablet"
       },
       {
         prop: "hasGriddingLaptop",
-        gridProp: "gridColsLaptop",
+        gridAttr: "grid-cols--laptop",
         attr: "col-span--laptop"
       }
     ];
@@ -3789,16 +3793,16 @@ const _Banner = class _Banner extends VerticallyExtendedElement {
       "px-grid > px-container"
     );
     if (value !== null) {
-      breakpoints.forEach(({ prop, gridProp, attr }) => {
+      breakpoints.forEach(({ prop, gridAttr, attr }) => {
         if (this[prop]) {
-          this.$grid[gridProp] = "3";
-          spanElement.setAttribute(attr, "2");
+          this.$grid.setAttribute(gridAttr, "3");
+          spanElement == null ? void 0 : spanElement.setAttribute(attr, "2");
         }
       });
     } else {
-      breakpoints.forEach(({ gridProp, attr }) => {
-        this.$grid[gridProp] = "1";
-        spanElement.removeAttribute(attr);
+      breakpoints.forEach(({ gridAttr, attr }) => {
+        this.$grid.setAttribute(gridAttr, "1");
+        spanElement == null ? void 0 : spanElement.setAttribute(attr, "1");
       });
     }
   }
@@ -6822,7 +6826,7 @@ class CellSwitch extends WithExtraAttributes {
     return `
     <div class="cell-switch">
       <px-cell hoverable>
-        <px-switch slot="action-indicator" aria-hidden="true" tabindex="-1"></px-switch>
+        <px-switch slot="action-indicator" inert></px-switch>
         <slot name="visual" slot="visual"></slot>
         <slot name="label" slot="label"></slot>
         <slot name="description" slot="description"></slot>
@@ -7716,7 +7720,7 @@ class CellRadio extends WithExtraAttributes {
     return `
     <div class="cell-radio">
       <px-cell hoverable>
-        <px-radio slot="prefix" aria-hidden="true" tabindex="-1"></px-radio>
+        <px-radio slot="prefix" inert></px-radio>
         <slot name="visual" slot="visual"></slot>
         <slot name="label" slot="label"></slot>
         <slot name="description" slot="description"></slot>
@@ -8993,20 +8997,20 @@ const _ContentHeader = class _ContentHeader extends PxElement {
   }
   createGridding(value) {
     const breakpoints = [
-      { prop: "hasGridding", gridProp: "gridCols", attr: "col-span" },
+      { prop: "hasGridding", gridAttr: "grid-cols", attr: "col-span" },
       {
         prop: "hasGriddingMobile",
-        gridProp: "gridColsMobile",
+        gridAttr: "grid-cols--mobile",
         attr: "col-span--mobile"
       },
       {
         prop: "hasGriddingTablet",
-        gridProp: "gridColsTablet",
+        gridAttr: "grid-cols--tablet",
         attr: "col-span--tablet"
       },
       {
         prop: "hasGriddingLaptop",
-        gridProp: "gridColsLaptop",
+        gridAttr: "grid-cols--laptop",
         attr: "col-span--laptop"
       }
     ];
@@ -9014,16 +9018,16 @@ const _ContentHeader = class _ContentHeader extends PxElement {
       "px-grid > px-container"
     );
     if (value !== null) {
-      breakpoints.forEach(({ prop, gridProp, attr }) => {
+      breakpoints.forEach(({ prop, gridAttr, attr }) => {
         if (this[prop]) {
-          this.$grid[gridProp] = "3";
-          spanElement.setAttribute(attr, "2");
+          this.$grid.setAttribute(gridAttr, "3");
+          spanElement == null ? void 0 : spanElement.setAttribute(attr, "2");
         }
       });
     } else {
-      breakpoints.forEach(({ gridProp, attr }) => {
-        this.$grid[gridProp] = "1";
-        spanElement.removeAttribute(attr);
+      breakpoints.forEach(({ gridAttr, attr }) => {
+        this.$grid.setAttribute(gridAttr, "1");
+        spanElement == null ? void 0 : spanElement.setAttribute(attr, "1");
       });
     }
   }
@@ -12501,19 +12505,19 @@ class MddSectionItem extends HTMLElement {
 if (!customElements.get("px-mdd-section-item")) {
   customElements.define("px-mdd-section-item", MddSectionItem);
 }
-const styles$j = "*{box-sizing:border-box}#container{display:flex;flex-wrap:nowrap;font-family:var(--px-font-family);font-size:var(--px-font-size-base);color:var(--px-color-text-neutral-default);width:1080px;border-radius:var(--px-radius-main);background-color:var(--px-color-background-surface-default);overflow:hidden}#container.info{border-left:5px var(--px-color-icon-brand-default) solid}#container.success{border-left:5px var(--px-color-icon-purpose-success-default) solid}#container.warning{border-left:5px var(--px-color-icon-purpose-warning-default) solid}#container.error{border-left:5px var(--px-color-icon-purpose-error-default) solid}#content-container{padding:var(--px-padding-m-mobile);flex-grow:1}#media-container{display:none}::slotted(px-button-icon){position:absolute;top:var(--px-padding-m-desktop);right:var(--px-padding-m-desktop)}dialog{background:transparent;border-radius:0;box-shadow:none;padding:0;border:0;box-sizing:border-box;transform:scale(.95);animation:modalIn .3s ease-out forwards}::backdrop{background:#0000004d;-webkit-backdrop-filter:saturate(180%) blur(15px);backdrop-filter:saturate(180%) blur(15px)}#content{max-height:12.5em;overflow:auto}@media screen and (max-width: 1081px){#container{width:inherit}#content-container{padding:var(--px-padding-m-mobile)}::slotted(px-button-icon){top:var(--px-padding-m-mobile);right:var(--px-padding-m-mobile)}}@media only screen and (min-width: 48em){::slotted(px-button-icon){position:absolute;top:var(--px-padding-m-tablet);right:var(--px-padding-m-tablet)}#content{max-height:25em}}@media only screen and (min-width: 64.0625em){:host([media-src]) #media-container{display:block;background-size:cover;background-position:center center;background-repeat:no-repeat;flex-basis:25em;flex-shrink:0}}@keyframes modalIn{0%{transform:scale(.95);opacity:0}to{transform:scale(1);opacity:1}}";
+const styles$j = '*{box-sizing:border-box}#container{display:flex;flex-wrap:nowrap;font-family:var(--px-font-family);font-size:var(--px-font-size-base);color:var(--px-color-text-neutral-default);width:inherit;border-radius:var(--px-radius-main);background-color:var(--px-color-background-surface-default);overflow:hidden}#container.info{border-left:5px var(--px-color-icon-brand-default) solid}#container.success{border-left:5px var(--px-color-icon-purpose-success-default) solid}#container.warning{border-left:5px var(--px-color-icon-purpose-warning-default) solid}#container.error{border-left:5px var(--px-color-icon-purpose-error-default) solid}#container.has-close-button #icon-container{max-width:calc(100% - (var(--px-size-m) + var(--px-spacing-s-mobile)))}#content-container{padding:var(--px-padding-m-mobile);flex-grow:1}#media-container{display:none}::slotted(px-button-icon[slot="close-button"]){position:absolute;top:var(--px-padding-m-mobile);right:var(--px-padding-m-mobile)}dialog{background:transparent;border-radius:0;box-shadow:none;padding:0;border:0;box-sizing:border-box;transform:scale(.95);animation:modalIn .3s ease-out forwards}::backdrop{background:#0000004d;-webkit-backdrop-filter:saturate(180%) blur(15px);backdrop-filter:saturate(180%) blur(15px)}#content{max-height:12.5em;overflow:auto}@media only screen and (min-width: 48em){#container.has-close-button #icon-container{max-width:calc(100% - (var(--px-size-m) + var(--px-spacing-s-tablet)))}::slotted(px-button-icon[slot="close-button"]){position:absolute;top:var(--px-padding-m-tablet);right:var(--px-padding-m-tablet)}#content{max-height:25em}}@media only screen and (min-width: 64.0625em){#container.has-close-button #icon-container{max-width:calc(100% - (var(--px-size-m) + var(--px-spacing-s-laptop)))}::slotted(px-button-icon[slot="close-button"]){top:var(--px-padding-m-laptop);right:var(--px-padding-m-laptop)}:host([media-src]) #container.has-close-button #icon-container{max-width:100%}:host([media-src]) #media-container{display:block;background-size:cover;background-position:center center;background-repeat:no-repeat;flex-basis:25em;flex-shrink:0}}@media screen and (min-width: 1118px){#container{width:1080px}}@media only screen and (min-width: 90.0625em){:host(:not([media-src])) #container.has-close-button #icon-container{max-width:calc(100% - (var(--px-size-m) + var(--px-spacing-s-desktop)))}::slotted(px-button-icon[slot="close-button"]){position:absolute;top:var(--px-padding-m-desktop);right:var(--px-padding-m-desktop)}}@keyframes modalIn{0%{transform:scale(.95);opacity:0}to{transform:scale(1);opacity:1}}';
 const styleSheet$j = new CSSStyleSheet();
 styleSheet$j.replaceSync(styles$j);
 const CLOSE_EVENT$1 = "px.lavender.modal.close";
 class Modal extends HTMLElement {
   constructor() {
     super();
-    this.template = ` <dialog>
+    this.template = `<dialog>
     <div id="container">
       <div id="content-container">
         <px-vstack gap="default" >
           <px-hstack id="icon-container" gap="s" align-items="flex-start">
-            <px-vstack gap="s">
+            <px-vstack gap="xs">
               <px-h1 variant="title-l">
                 <slot name="title"></slot>
               </px-h1>
@@ -12548,6 +12552,9 @@ class Modal extends HTMLElement {
     this.shadowRoot.adoptedStyleSheets = [styleSheet$j];
   }
   connectedCallback() {
+    var _a, _b;
+    this.toggleDescriptionVisibility = this.toggleDescriptionVisibility.bind(this);
+    this.toggleCloseButtonSafeArea = this.toggleCloseButtonSafeArea.bind(this);
     if (this.hasAttribute("open")) {
       this.show();
     }
@@ -12565,6 +12572,16 @@ class Modal extends HTMLElement {
     if (this.hasAttribute("media-src")) {
       this.updateMediaSrc(this.getAttribute("media-src"));
     }
+    this.toggleDescriptionVisibility();
+    (_a = this.$slotDescription) == null ? void 0 : _a.addEventListener(
+      "slotchange",
+      this.toggleDescriptionVisibility
+    );
+    this.toggleCloseButtonSafeArea();
+    (_b = this.$slotCloseButton) == null ? void 0 : _b.addEventListener(
+      "slotchange",
+      this.toggleCloseButtonSafeArea
+    );
   }
   static get observedAttributes() {
     return ["open", "status", "media-src", "openedby"];
@@ -12585,6 +12602,13 @@ class Modal extends HTMLElement {
         break;
     }
   }
+  disconnectedCallback() {
+    var _a;
+    (_a = this.$slotDescription) == null ? void 0 : _a.removeEventListener(
+      "slotchange",
+      this.toggleDescriptionVisibility
+    );
+  }
   handleOpenChange() {
     if (this.hasAttribute("open")) {
       this.show();
@@ -12653,6 +12677,44 @@ class Modal extends HTMLElement {
       (_c = this.$opener) == null ? void 0 : _c.addEventListener("click", () => this.show());
     }
   }
+  toggleDescriptionVisibility() {
+    if (!this.$slottedDescription) {
+      this.$descriptionContainer.style.display = "none";
+    } else {
+      this.$descriptionContainer.style.display = "block";
+    }
+  }
+  toggleCloseButtonSafeArea() {
+    var _a, _b, _c;
+    if (this.$slottedCloseButton) {
+      (_a = this.$container) == null ? void 0 : _a.classList.add("has-close-button");
+    } else {
+      if ((_b = this.$container) == null ? void 0 : _b.classList.contains("has-close-button")) {
+        (_c = this.$container) == null ? void 0 : _c.classList.remove("has-close-button");
+      }
+    }
+  }
+  get $slottedCloseButton() {
+    return this.querySelector('[slot="close-button"]');
+  }
+  get $slotCloseButton() {
+    return this.shadowRoot.querySelector(
+      'slot[name="close-button"]'
+    );
+  }
+  get $slottedDescription() {
+    return this.querySelector('[slot="description"]');
+  }
+  get $slotDescription() {
+    return this.shadowRoot.querySelector(
+      'slot[name="description"]'
+    );
+  }
+  get $descriptionContainer() {
+    return this.shadowRoot.querySelector(
+      'px-p[font-weight="title"]'
+    );
+  }
   get $opener() {
     return document.querySelector(
       `px-button#${this.getAttribute("openedby")}`
@@ -15483,7 +15545,7 @@ class TileCheckbox extends WithExtraAttributes {
       <div class="tile-checkbox">
         <px-tile hoverable>
           <slot name="prefix" slot="prefix"></slot>
-          <px-checkbox slot="suffix" aria-hidden="true" tabindex="-1"></px-checkbox>
+          <px-checkbox slot="suffix" inert></px-checkbox>
           <slot name="label" slot="label"></slot>
           <slot name="description" slot="description"></slot>
         </px-tile>
@@ -15763,7 +15825,7 @@ class TileRadio extends WithExtraAttributes {
       <div class="tile-radio">
         <px-tile hoverable>
           <slot name="prefix" slot="prefix"></slot>
-          <px-radio slot="suffix" aria-hidden="true" tabindex="-1"></px-radio>
+          <px-radio slot="suffix" inert></px-radio>
           <slot name="label" slot="label"></slot>
           <slot name="description" slot="description"></slot>
         </px-tile>
@@ -16205,7 +16267,7 @@ class TileSwitch extends WithExtraAttributes {
       <div class="tile-switch">
         <px-tile hoverable>
           <slot name="prefix" slot="prefix"></slot>
-          <px-switch slot="suffix" aria-hidden="true" tabindex="-1"></px-switch>
+          <px-switch slot="suffix" inert></px-switch>
           <slot name="label" slot="label"></slot>
           <slot name="description" slot="description"></slot>
         </px-tile>