@proximus/lavender 2.0.0-alpha.13 → 2.0.0-alpha.15

package/dist/lavender.es.js

@@ -3577,7 +3577,7 @@ const _Banner = class _Banner extends VerticallyExtendedElement {
     super(bannerStyles);
     this.template = () => `<div class="banner">
       <div class="contrast-helper"></div>
-      <px-container class="banner-container" padding="${this.reduced ? "m" : "l"}" padding--mobile="m" border-radius="main" >
+      <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">
@@ -3617,6 +3617,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();
   }
@@ -3704,20 +3709,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"
       }
     ];
@@ -3725,16 +3730,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");
       });
     }
   }
@@ -6354,7 +6359,7 @@ class CellCheckbox extends WithExtraAttributes {
     return `
     <div class="cell-checkbox">
       <px-cell hoverable>
-        <px-checkbox slot="prefix" aria-hidden="true" tabindex="-1" ${this.name ? 'name="${this.name"' : ""} ${this.value ? 'value="${this.value"' : ""}></px-checkbox>
+        <px-checkbox slot="prefix" inert ${this.name ? 'name="${this.name"' : ""} ${this.value ? 'value="${this.value"' : ""}></px-checkbox>
         <slot name="visual" slot="visual"></slot>
         <slot name="label" slot="label"></slot>
         <slot name="description" slot="description"></slot>
@@ -6763,7 +6768,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>
@@ -7662,7 +7667,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>
@@ -8898,20 +8903,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"
       }
     ];
@@ -8919,16 +8924,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");
       });
     }
   }
@@ -12964,7 +12969,7 @@ class SelectableBoxCheckbox extends WithExtraAttributes {
         <px-selectable-box>
           <slot name="media" slot="media"></slot>
           <px-checkbox 
-            slot="action" aria-hidden="true" tabindex="-1" 
+            slot="action" inert 
             name="${this.name}"
             value="${this.value}"
           ></px-checkbox>
@@ -13237,7 +13242,7 @@ class SelectableBoxRadio extends WithExtraAttributes {
         <px-selectable-box>
           <slot name="media" slot="media"></slot>
           <px-radio 
-            slot="action" aria-hidden="true" tabindex="-1" 
+            slot="action" inert 
             name="${this.name}"
             value="${this.value}"
           ></px-radio>
@@ -15262,7 +15267,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>
@@ -15540,7 +15545,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>
@@ -15980,7 +15985,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>