@proximus/lavender 1.4.4-alpha.8 → 1.4.4-beta.1

package/dist/lavender.es.js

@@ -3283,7 +3283,7 @@ let AgGridTableThContent = _AgGridTableThContent;
 if (!customElements.get("px-ag-grid-table-th-content")) {
   customElements.define("px-ag-grid-table-th-content", AgGridTableThContent);
 }
-const bannerCss = ':host{position:relative}:host,:host>*{display:block;box-sizing:border-box}.banner{position:relative;min-height:8em}.banner[reduced]{min-height:5em}px-container{height:100%}.banner-content{display:grid;grid-template-columns:1fr;grid-template-rows:minmax(0,auto);row-gap:var(--px-spacing-s-mobile);z-index:2;position:relative}[reduced] .banner-content{grid-template-columns:min-content minmax(0,1fr);column-gap:var(--px-spacing-default-mobile)}::slotted([slot="tag"]){grid-area:tag}::slotted([slot="media"]){grid-area:media;align-self:start}::slotted([slot="title"]){grid-area:title}::slotted([slot="description"]){grid-area:description}::slotted([slot="content"]){grid-area:content}:host(:not([reduced])) ::slotted([slot="action"]){grid-area:action;margin-top:calc(var(--px-spacing-default-mobile) - var(--px-spacing-s-mobile))}.contrast-helper{position:absolute;top:0;right:0;bottom:0;left:0;z-index:1;pointer-events:none;display:none;border-radius:var(--px-radius-main)}[contrast-helper-gradient] .contrast-helper{display:block;background-image:linear-gradient(90deg,#fff 23.43%,#fff0 81.69%)}[inverted] :is([contrast-helper-gradient] .contrast-helper){background-image:linear-gradient(90deg,#000 23.43%,#0000 81.69%)}[contrast-helper-overlay] .contrast-helper{display:block;background-color:#ffffffb3}[inverted] :is([contrast-helper-overlay] .contrast-helper){background-color:#0006}@media only screen and (min-width: 48em){.banner-content{row-gap:var(--px-spacing-s-desktop)}[reduced] .banner-content{column-gap:var(--px-spacing-default-desktop)}.banner-content :host(:not([reduced])) ::slotted([slot="action"]){margin-top:calc(var(--px-spacing-default-desktop) - var(--px-spacing-s-desktop))}}@media only screen and (min-width: 64.0625em){.banner-content{row-gap:var(--px-spacing-s-desktop)}[reduced] .banner-content{column-gap:var(--px-spacing-default-desktop)}.banner-content :host(:not([reduced])) ::slotted([slot="action"]){margin-top:calc(var(--px-spacing-default-desktop) - var(--px-spacing-s-desktop))}}';
+const bannerCss = ':host{position:relative}:host,:host>*{display:block;box-sizing:border-box}.banner{position:relative;min-height:8em}.banner[reduced]{min-height:5em}px-container{height:100%}.banner-content{display:grid;grid-template-columns:1fr;grid-template-rows:minmax(0,auto);row-gap:var(--px-spacing-s-mobile);z-index:2;position:relative}[reduced] .banner-content{grid-template-columns:min-content minmax(0,1fr);column-gap:var(--px-spacing-default-mobile)}::slotted([slot="tag"]){grid-area:tag}::slotted([slot="media"]){grid-area:media;align-self:start}::slotted([slot="title"]){grid-area:title}::slotted([slot="description"]){grid-area:description}::slotted([slot="content"]){grid-area:content}::slotted([slot="action"]){grid-area:action;z-index:2}:host(:not([reduced])) ::slotted([slot="action"]){margin-top:calc(var(--px-spacing-default-mobile) - var(--px-spacing-s-mobile))}.contrast-helper{position:absolute;top:0;right:0;bottom:0;left:0;z-index:1;pointer-events:none;display:none;border-radius:var(--px-radius-main)}[contrast-helper-gradient] .contrast-helper{display:block;background-image:linear-gradient(90deg,#fff 23.43%,#fff0 81.69%)}[inverted] :is([contrast-helper-gradient] .contrast-helper){background-image:linear-gradient(90deg,#000 23.43%,#0000 81.69%)}[contrast-helper-overlay] .contrast-helper{display:block;background-color:#ffffffb3}[inverted] :is([contrast-helper-overlay] .contrast-helper){background-color:#0006}@media only screen and (min-width: 48em){.banner-content{row-gap:var(--px-spacing-s-desktop)}[reduced] .banner-content{column-gap:var(--px-spacing-default-desktop)}.banner-content :host(:not([reduced])) ::slotted([slot="action"]){margin-top:calc(var(--px-spacing-default-desktop) - var(--px-spacing-s-desktop))}}@media only screen and (min-width: 64.0625em){.banner-content{row-gap:var(--px-spacing-s-desktop)}[reduced] .banner-content{column-gap:var(--px-spacing-default-desktop)}.banner-content :host(:not([reduced])) ::slotted([slot="action"]){margin-top:calc(var(--px-spacing-default-desktop) - var(--px-spacing-s-desktop))}}';
 const gridCss = ":host{display:block;--grid-cols: initial;--grid-cols--mobile: initial;--grid-cols--tablet: initial;--grid-cols--laptop: initial;--grid-cols--desktop: initial;--justify-content: initial;--justify-items: initial;--align-content: initial;--align-items: initial}.grid{display:grid;grid-template-columns:repeat(var(--grid-cols),minmax(0,1fr));justify-content:var(--justify-content);justify-items:var(--justify-items);align-content:var(--align-content);align-items:var(--align-items)}.justify-content-normal{justify-content:normal}.justify-content-start{justify-content:start}.justify-content-end{justify-content:end}.justify-content-center{justify-content:center}.justify-content-space-between{justify-content:space-between}.justify-content-space-around{justify-content:space-around}.justify-content-space-evenly{justify-content:space-evenly}.justify-content-stretch{justify-content:stretch}.justify-items-start{justify-items:start}.justify-items-end{justify-items:end}.justify-items-center{justify-items:center}.justify-items-stretch{justify-items:stretch}.align-content-normal{align-content:normal}.align-content-start{align-content:start}.align-content-end{align-content:end}.align-content-center{align-content:center}.align-content-space-between{align-content:space-between}.align-content-space-around{align-content:space-around}.align-content-space-evenly{align-content:space-evenly}.align-content-stretch{align-content:stretch}.align-items-start{align-items:start}.align-items-end{align-items:end}.align-items-center{align-items:center}.align-items-stretch{align-items:stretch}@media only screen and (max-width: 767px){.grid{grid-template-columns:repeat(var(--grid-cols--mobile, var(--grid-cols)),minmax(0,1fr))}.justify-content-normal-mobile{justify-content:normal}.justify-content-start-mobile{justify-content:start}.justify-content-end-mobile{justify-content:end}.justify-content-center-mobile{justify-content:center}.justify-content-space-between-mobile{justify-content:space-between}.justify-content-space-around-mobile{justify-content:space-around}.justify-content-space-evenly-mobile{justify-content:space-evenly}.justify-content-stretch-mobile{justify-content:stretch}.justify-items-start-mobile{justify-items:start}.justify-items-end-mobile{justify-items:end}.justify-items-center-mobile{justify-items:center}.justify-items-stretch-mobile{justify-items:stretch}.align-content-normal-mobile{align-content:normal}.align-content-start-mobile{align-content:start}.align-content-end-mobile{align-content:end}.align-content-center-mobile{align-content:center}.align-content-space-between-mobile{align-content:space-between}.align-content-space-around-mobile{align-content:space-around}.align-content-space-evenly-mobile{align-content:space-evenly}.align-content-stretch-mobile{align-content:stretch}.align-items-start-mobile{align-items:start}.align-items-end-mobile{align-items:end}.align-items-center-mobile{align-items:center}.align-items-stretch-mobile{align-items:stretch}}@media only screen and (min-width: 48em) and (max-width: 64em){.grid{grid-template-columns:repeat(var(--grid-cols--tablet, var(--grid-cols)),minmax(0,1fr))}.justify-content-normal-tablet{justify-content:normal}.justify-content-start-tablet{justify-content:start}.justify-content-end-tablet{justify-content:end}.justify-content-center-tablet{justify-content:center}.justify-content-space-between-tablet{justify-content:space-between}.justify-content-space-around-tablet{justify-content:space-around}.justify-content-space-evenly-tablet{justify-content:space-evenly}.justify-content-stretch-tablet{justify-content:stretch}.justify-items-start-tablet{justify-items:start}.justify-items-end-tablet{justify-items:end}.justify-items-center-tablet{justify-items:center}.justify-items-stretch-tablet{justify-items:stretch}.align-content-normal-tablet{align-content:normal}.align-content-start-tablet{align-content:start}.align-content-end-tablet{align-content:end}.align-content-center-tablet{align-content:center}.align-content-space-between-tablet{align-content:space-between}.align-content-space-around-tablet{align-content:space-around}.align-content-space-evenly-tablet{align-content:space-evenly}.align-content-stretch-tablet{align-content:stretch}.align-items-start-tablet{align-items:start}.align-items-end-tablet{align-items:end}.align-items-center-tablet{align-items:center}.align-items-stretch-tablet{align-items:stretch}}@media only screen and (min-width: 64.0625em){.grid{grid-template-columns:repeat(var(--grid-cols--laptop, var(--grid-cols)),minmax(0,1fr))}.justify-content-normal-laptop{justify-content:normal}.justify-content-start-laptop{justify-content:start}.justify-content-end-laptop{justify-content:end}.justify-content-center-laptop{justify-content:center}.justify-content-space-between-laptop{justify-content:space-between}.justify-content-space-around-laptop{justify-content:space-around}.justify-content-space-evenly-laptop{justify-content:space-evenly}.justify-content-stretch-laptop{justify-content:stretch}.justify-items-start-laptop{justify-items:start}.justify-items-end-laptop{justify-items:end}.justify-items-center-laptop{justify-items:center}.justify-items-stretch-laptop{justify-items:stretch}.align-content-normal-laptop{align-content:normal}.align-content-start-laptop{align-content:start}.align-content-end-laptop{align-content:end}.align-content-center-laptop{align-content:center}.align-content-space-between-laptop{align-content:space-between}.align-content-space-around-laptop{align-content:space-around}.align-content-space-evenly-laptop{align-content:space-evenly}.align-content-stretch-laptop{align-content:stretch}.align-items-start-laptop{align-items:start}.align-items-end-laptop{align-items:end}.align-items-center-laptop{align-items:center}.align-items-stretch-laptop{align-items:stretch}}";
 const gridStyles = new CSSStyleSheet();
 gridStyles.replaceSync(gridCss);
@@ -3639,18 +3639,21 @@ const _Banner = class _Banner extends VerticallyExtendedElement {
     this.template = () => `<div class="banner">
       <div class="contrast-helper"></div>
       <px-container class="banner-container" padding--mobile="m" border-radius="main" >
-        <px-grid gap="none">
-          <px-container padding="none" background-color="none">
-            <div class="banner-content">
-              <slot name="tag"></slot>
-              <slot name="media"></slot>
-              <slot name="title"></slot>
-              <slot name="description"></slot>
-              <slot name="content"></slot>
-              <slot name="action"></slot>
-            </div>
-          </px-container>
-        </px-grid>
+        <px-vstack>
+          <px-grid gap="none">
+            <px-container padding="none" background-color="none">
+              <div class="banner-content">
+                <slot name="tag"></slot>
+                <slot name="media"></slot>
+                <slot name="title"></slot>
+                <slot name="description"></slot>
+                <slot name="content"></slot>
+                
+              </div>
+            </px-container>
+          </px-grid>
+          <slot name="action"></slot>
+        </px-vstack>
       </px-container>
     </div>`;
     this.shadowRoot.innerHTML = this.template();
@@ -3678,11 +3681,6 @@ 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();
   }
@@ -3770,20 +3768,20 @@ const _Banner = class _Banner extends VerticallyExtendedElement {
   }
   createGridding(value) {
     const breakpoints = [
-      { prop: "hasGridding", gridAttr: "grid-cols", attr: "col-span" },
+      { prop: "hasGridding", gridProp: "gridCols", attr: "col-span" },
       {
         prop: "hasGriddingMobile",
-        gridAttr: "grid-cols--mobile",
+        gridProp: "gridColsMobile",
         attr: "col-span--mobile"
       },
       {
         prop: "hasGriddingTablet",
-        gridAttr: "grid-cols--tablet",
+        gridProp: "gridColsTablet",
         attr: "col-span--tablet"
       },
       {
         prop: "hasGriddingLaptop",
-        gridAttr: "grid-cols--laptop",
+        gridProp: "gridColsLaptop",
         attr: "col-span--laptop"
       }
     ];
@@ -3791,16 +3789,16 @@ const _Banner = class _Banner extends VerticallyExtendedElement {
       "px-grid > px-container"
     );
     if (value !== null) {
-      breakpoints.forEach(({ prop, gridAttr, attr }) => {
+      breakpoints.forEach(({ prop, gridProp, attr }) => {
         if (this[prop]) {
-          this.$grid.setAttribute(gridAttr, "3");
-          spanElement == null ? void 0 : spanElement.setAttribute(attr, "2");
+          this.$grid[gridProp] = "3";
+          spanElement.setAttribute(attr, "2");
         }
       });
     } else {
-      breakpoints.forEach(({ gridAttr, attr }) => {
-        this.$grid.setAttribute(gridAttr, "1");
-        spanElement == null ? void 0 : spanElement.setAttribute(attr, "1");
+      breakpoints.forEach(({ gridProp, attr }) => {
+        this.$grid[gridProp] = "1";
+        spanElement.removeAttribute(attr);
       });
     }
   }
@@ -6824,7 +6822,7 @@ class CellSwitch extends WithExtraAttributes {
     return `
     <div class="cell-switch">
       <px-cell hoverable>
-        <px-switch slot="action-indicator" inert></px-switch>
+        <px-switch slot="action-indicator" aria-hidden="true" tabindex="-1"></px-switch>
         <slot name="visual" slot="visual"></slot>
         <slot name="label" slot="label"></slot>
         <slot name="description" slot="description"></slot>
@@ -7718,7 +7716,7 @@ class CellRadio extends WithExtraAttributes {
     return `
     <div class="cell-radio">
       <px-cell hoverable>
-        <px-radio slot="prefix" inert></px-radio>
+        <px-radio slot="prefix" aria-hidden="true" tabindex="-1"></px-radio>
         <slot name="visual" slot="visual"></slot>
         <slot name="label" slot="label"></slot>
         <slot name="description" slot="description"></slot>
@@ -8995,20 +8993,20 @@ const _ContentHeader = class _ContentHeader extends PxElement {
   }
   createGridding(value) {
     const breakpoints = [
-      { prop: "hasGridding", gridAttr: "grid-cols", attr: "col-span" },
+      { prop: "hasGridding", gridProp: "gridCols", attr: "col-span" },
       {
         prop: "hasGriddingMobile",
-        gridAttr: "grid-cols--mobile",
+        gridProp: "gridColsMobile",
         attr: "col-span--mobile"
       },
       {
         prop: "hasGriddingTablet",
-        gridAttr: "grid-cols--tablet",
+        gridProp: "gridColsTablet",
         attr: "col-span--tablet"
       },
       {
         prop: "hasGriddingLaptop",
-        gridAttr: "grid-cols--laptop",
+        gridProp: "gridColsLaptop",
         attr: "col-span--laptop"
       }
     ];
@@ -9016,16 +9014,16 @@ const _ContentHeader = class _ContentHeader extends PxElement {
       "px-grid > px-container"
     );
     if (value !== null) {
-      breakpoints.forEach(({ prop, gridAttr, attr }) => {
+      breakpoints.forEach(({ prop, gridProp, attr }) => {
         if (this[prop]) {
-          this.$grid.setAttribute(gridAttr, "3");
-          spanElement == null ? void 0 : spanElement.setAttribute(attr, "2");
+          this.$grid[gridProp] = "3";
+          spanElement.setAttribute(attr, "2");
         }
       });
     } else {
-      breakpoints.forEach(({ gridAttr, attr }) => {
-        this.$grid.setAttribute(gridAttr, "1");
-        spanElement == null ? void 0 : spanElement.setAttribute(attr, "1");
+      breakpoints.forEach(({ gridProp, attr }) => {
+        this.$grid[gridProp] = "1";
+        spanElement.removeAttribute(attr);
       });
     }
   }
@@ -9443,12 +9441,7 @@ class Drawer extends HTMLElement {
       });
     }
     if (this.hasAttribute("openedby")) {
-      const $opener = document.querySelector(
-        `px-button#${this.getAttribute("openedby")}`
-      );
-      $opener == null ? void 0 : $opener.addEventListener("click", () => {
-        this.show();
-      });
+      this.addOpenListener();
     }
     this.$closeButton.addEventListener("click", () => {
       this.hide();
@@ -9460,7 +9453,7 @@ class Drawer extends HTMLElement {
     );
   }
   static get observedAttributes() {
-    return ["open", "aria-label-close-button"];
+    return ["open", "aria-label-close-button", "openedby"];
   }
   attributeChangedCallback(name, oldValue, newValue) {
     var _a, _b, _c;
@@ -9480,6 +9473,8 @@ class Drawer extends HTMLElement {
           newValue || "Close drawer"
         );
       }
+    } else if (name === "openedby") {
+      this.addOpenListener();
     }
   }
   disconnectedCallback() {
@@ -9510,6 +9505,18 @@ class Drawer extends HTMLElement {
       this.$footer.style.display = "block";
     }
   }
+  addOpenListener() {
+    var _a, _b, _c;
+    if (((_a = this.$opener) == null ? void 0 : _a.getAttribute("data-has-opener")) !== "true") {
+      (_b = this.$opener) == null ? void 0 : _b.setAttribute("data-has-opener", "true");
+      (_c = this.$opener) == null ? void 0 : _c.addEventListener("click", () => this.show());
+    }
+  }
+  get $opener() {
+    return document.querySelector(
+      `px-button#${this.getAttribute("openedby")}`
+    );
+  }
   get $closeButton() {
     return this.shadowRoot.querySelector("px-button-icon");
   }
@@ -9543,6 +9550,12 @@ class Drawer extends HTMLElement {
   set ariaLabelCloseButton(value) {
     this.setAttribute("aria-label-close-button", value);
   }
+  get openedby() {
+    return this.getAttribute("openedby");
+  }
+  set openedby(value) {
+    this.setAttribute("openedby", value);
+  }
 }
 if (!customElements.get("px-drawer")) {
   customElements.define("px-drawer", Drawer);
@@ -12547,19 +12560,14 @@ class Modal extends HTMLElement {
       });
     }
     if (this.hasAttribute("openedby")) {
-      const $opener = document.querySelector(
-        `px-button#${this.getAttribute("openedby")}`
-      );
-      $opener == null ? void 0 : $opener.addEventListener("click", () => {
-        this.show();
-      });
+      this.addOpenListener();
     }
     if (this.hasAttribute("media-src")) {
       this.updateMediaSrc(this.getAttribute("media-src"));
     }
   }
   static get observedAttributes() {
-    return ["open", "status", "media-src"];
+    return ["open", "status", "media-src", "openedby"];
   }
   attributeChangedCallback(attrName, oldValue, newValue) {
     switch (attrName) {
@@ -12572,6 +12580,9 @@ class Modal extends HTMLElement {
       case "media-src":
         this.updateMediaSrc(newValue);
         break;
+      case "openedby":
+        this.addOpenListener();
+        break;
     }
   }
   handleOpenChange() {
@@ -12635,12 +12646,30 @@ class Modal extends HTMLElement {
   updateMediaSrc(src) {
     this.$mediaContainer.style.backgroundImage = `url(${src})`;
   }
+  addOpenListener() {
+    var _a, _b, _c;
+    if (((_a = this.$opener) == null ? void 0 : _a.getAttribute("data-has-opener")) !== "true") {
+      (_b = this.$opener) == null ? void 0 : _b.setAttribute("data-has-opener", "true");
+      (_c = this.$opener) == null ? void 0 : _c.addEventListener("click", () => this.show());
+    }
+  }
+  get $opener() {
+    return document.querySelector(
+      `px-button#${this.getAttribute("openedby")}`
+    );
+  }
   get status() {
     return this.getAttribute("status");
   }
   set status(value) {
     this.setAttribute("status", value);
   }
+  get openedby() {
+    return this.getAttribute("openedby");
+  }
+  set openedby(value) {
+    this.setAttribute("openedby", value);
+  }
   get $closeButton() {
     return this.shadowRoot.querySelector("px-button-icon");
   }
@@ -15454,7 +15483,7 @@ class TileCheckbox extends WithExtraAttributes {
       <div class="tile-checkbox">
         <px-tile hoverable>
           <slot name="prefix" slot="prefix"></slot>
-          <px-checkbox slot="suffix" inert></px-checkbox>
+          <px-checkbox slot="suffix" aria-hidden="true" tabindex="-1"></px-checkbox>
           <slot name="label" slot="label"></slot>
           <slot name="description" slot="description"></slot>
         </px-tile>
@@ -15734,7 +15763,7 @@ class TileRadio extends WithExtraAttributes {
       <div class="tile-radio">
         <px-tile hoverable>
           <slot name="prefix" slot="prefix"></slot>
-          <px-radio slot="suffix" inert></px-radio>
+          <px-radio slot="suffix" aria-hidden="true" tabindex="-1"></px-radio>
           <slot name="label" slot="label"></slot>
           <slot name="description" slot="description"></slot>
         </px-tile>
@@ -16176,7 +16205,7 @@ class TileSwitch extends WithExtraAttributes {
       <div class="tile-switch">
         <px-tile hoverable>
           <slot name="prefix" slot="prefix"></slot>
-          <px-switch slot="suffix" inert></px-switch>
+          <px-switch slot="suffix" aria-hidden="true" tabindex="-1"></px-switch>
           <slot name="label" slot="label"></slot>
           <slot name="description" slot="description"></slot>
         </px-tile>