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

package/dist/lavender.es.js

@@ -3774,6 +3774,7 @@ const _Banner = class _Banner extends VerticallyExtendedElement {
                 <slot name="title"></slot>
                 <slot name="description"></slot>
                 <slot name="content"></slot>
+                
               </div>
             </px-container>
           </px-grid>
@@ -3909,20 +3910,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"
       }
     ];
@@ -3930,16 +3931,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);
       });
     }
   }
@@ -7001,7 +7002,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>
@@ -7895,7 +7896,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>
@@ -9170,20 +9171,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"
       }
     ];
@@ -9191,16 +9192,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);
       });
     }
   }
@@ -13450,7 +13451,9 @@ const _Price = class _Price extends PxElement {
     });
     this.observer.observe(this, {
       childList: true,
-      subtree: true
+      subtree: true,
+      // By observing characterData, we ensure that any changes to the text content of the price element will trigger a rebuild of the price display, allowing it to update correctly in response to dynamic data changes.
+      characterData: true
     });
   }
   attributeChangedCallback(attrName, oldValue, newValue) {
@@ -15219,7 +15222,6 @@ class Tabs extends HTMLElement {
     var _a;
     super();
     __privateAdd(this, _Tabs_instances);
-    this._label = `tabs-${Math.random().toString(36).substring(2, 15)}`;
     this.template = () => `
     <div id="container">
       <div id="tab-container">
@@ -15251,7 +15253,6 @@ class Tabs extends HTMLElement {
   }
   static get observedAttributes() {
     return [
-      "label",
       "inverted",
       "aria-label-next",
       "aria-label-previous",
@@ -15260,9 +15261,6 @@ class Tabs extends HTMLElement {
   }
   attributeChangedCallback(name, oldValue, newValue) {
     switch (name) {
-      case "label":
-        this.label = newValue;
-        break;
       case "aria-label-next":
         if (!this.hasAttribute("hide-controls")) {
           this.$suffixButton.setAttribute("aria-label", newValue || "Next tab");
@@ -15286,9 +15284,6 @@ class Tabs extends HTMLElement {
   }
   connectedCallback() {
     var _a, _b;
-    if (!this.$tabList.hasAttribute("aria-labelledby")) {
-      this.$tabList.setAttribute("aria-labelledby", this._label);
-    }
     this.role = "tablist";
     if (this.internals) {
       this.internals.role = "tablist";
@@ -15405,12 +15400,6 @@ class Tabs extends HTMLElement {
   get $suffixButton() {
     return this.shadowRoot.querySelector("#next");
   }
-  get label() {
-    return this.$tabList.getAttribute("aria-labelledby");
-  }
-  set label(value) {
-    this.$tabList.setAttribute("aria-labelledby", value);
-  }
   get inverted() {
     return this.hasAttribute("inverted");
   }
@@ -15987,7 +15976,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>
@@ -16267,7 +16256,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>
@@ -16709,7 +16698,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>