@proximus/lavender 1.4.2-beta.1 → 1.4.3-alpha.2

package/dist/lavender.es.js

@@ -9,6 +9,7 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
 var _src, _internals, _template, _Card_instances, updateMediaPosition_fn, updateMedia_fn, updateBackgroundColor_fn, _Dropdown_instances, resetManualPopoverDisplay_fn, _onTriggerClick, _beforeToggle, _onToggle, handleManualPopoverDisplay_fn, _onResize, _Header_instances, setMDDDialogOffset_fn, togglePanel_fn, showMobileMenu_fn, hideMobileMenu_fn, hidePanel_fn, $mobileMenu_get, $navigationItems_get, $headerWrapper_get, $megaDropdowns_get, _template2, _HeaderMobileMenu_instances, createMobileMenuPanelDropDowns_fn, _Select_instances, updateOptions_fn, _mutationObserver, _MegaDropDown_instances, $backButton_get, $title_get, $footer_get, $closeButtons_get;
 const styles$K = ':host{display:block}:host([overflow-x="auto"]){margin:calc(calc(var(--px-focus-outline-mobile) + var(--px-focus-offset-mobile)) * -1)}:host([overflow-x="auto"]) .flex-container{padding:calc(var(--px-focus-outline-mobile) + var(--px-focus-offset-mobile))}.flex-container{display:flex;height:100%;width:100%;box-sizing:border-box;flex-direction:var(--flex-direction--mobile-value);gap:var(--flex-gap--mobile-value);flex-wrap:var(--flex-wrap--mobile-value);justify-content:var(--flex-justify-content--mobile-value);align-items:var(--flex-align-items--mobile-value);overflow-x:var(--overflow-x-all)}@media only screen and (max-width: 47.9375em){.flex-container{overflow-x:var(--overflow-x-all-mobile, var(--overflow-x-all));scrollbar-width:none}.flex-container::-webkit-scrollbar{display:none}}@media only screen and (min-width: 48em){.flex-container{flex-direction:var(--flex-direction--tablet-value);gap:var(--flex-gap--tablet-value);flex-wrap:var(--flex-wrap--tablet-value);justify-content:var(--flex-justify-content--tablet-value);align-items:var(--flex-align-items--tablet-value)}:host([overflow-x="auto"]){margin:calc(calc(var(--px-focus-outline-tablet) + var(--px-focus-offset-tablet)) * -1)}:host([overflow-x="auto"]) .flex-container{padding:calc(var(--px-focus-outline-tablet) + var(--px-focus-offset-tablet))}}@media only screen and (min-width: 48em) and (max-width: 64em){.flex-container{overflow-x:var(--overflow-x-all-tablet, var(--overflow-x-all));scrollbar-width:none}.flex-container::-webkit-scrollbar{display:none}}@media only screen and (min-width: 64.0625em){.flex-container{flex-direction:var(--flex-direction--laptop-value);gap:var(--flex-gap--laptop-value);flex-wrap:var(--flex-wrap--laptop-value);justify-content:var(--flex-justify-content--laptop-value);align-items:var(--flex-align-items--laptop-value)}:host([overflow-x="auto"]){margin:calc(calc(var(--px-focus-outline-laptop) + var(--px-focus-offset-laptop)) * -1)}:host([overflow-x="auto"]) .flex-container{padding:calc(var(--px-focus-outline-laptop) + var(--px-focus-offset-laptop))}}@media only screen and (min-width: 64.0625em) and (max-width: 90em){.flex-container{overflow-x:var(--overflow-x-all-laptop, var(--overflow-x-all))}}@media only screen and (min-width: 90.0625em){.flex-container{flex-direction:var(--flex-direction--desktop-value);gap:var(--flex-gap--desktop-value);flex-wrap:var(--flex-wrap--desktop-value);justify-content:var(--flex-justify-content--desktop-value);align-items:var(--flex-align-items--desktop-value);overflow-x:var(--overflow-x-all-desktop, var(--overflow-x-all))}:host([overflow-x="auto"]){margin:calc(calc(var(--px-focus-outline-desktop) + var(--px-focus-offset-desktop)) * -1)}:host([overflow-x="auto"]) .flex-container{padding:calc(var(--px-focus-outline-desktop) + var(--px-focus-offset-desktop))}}';
 const commonStyles = ":host([grow]){flex-grow:var(--grow-value)}:host([shrink]){flex-shrink:var(--shrink-value)}:host([basis]){flex-basis:var(--basis-value)}:host([align-self]){align-self:var(--align-self-value)}:host([col-span]){grid-column:span var(--col-span-value) / span var(--col-span-value)}:host([justify-self]){justify-self:var(--justify-value)}:host([order]),::slotted([order]){order:var(--order-value)}:host([hidden]),::slotted([hidden]){display:none}:host([shown--sr]),::slotted(*[shown--sr]){clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}@media screen and (max-width: 767px){:host([hidden--mobile]),::slotted([hidden--mobile]){display:none}:host([grow--mobile]){flex-grow:var(--grow--mobile-value)!important}:host([shrink--mobile]){flex-shrink:var(--shrink--mobile-value)!important}:host([basis--mobile]){flex-basis:var(--basis--mobile-value)!important}:host([align-self--mobile]){align-self:var(--align-self--mobile-value)!important}:host([col-span--mobile]){grid-column:span var(--col-span--mobile-value) / span var(--col-span--mobile-value)!important}:host([justify-self--mobile]){justify-self:var(--justify-self--mobile-value)!important}:host([order--mobile]),::slotted([order--mobile]){order:var(--order--mobile-value)!important}:host([shown--sr--mobile]),::slotted(*[shown--sr--mobile]){clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}}@media screen and (min-width: 768px) and (max-width: 1024px){:host([hidden--tablet]),::slotted([hidden--tablet]){display:none}:host([grow--tablet]){flex-grow:var(--grow--tablet-value)!important}:host([shrink--tablet]){flex-shrink:var(--shrink--tablet-value)!important}:host([basis--tablet]){flex-basis:var(--basis--tablet-value)!important}:host([align-self--tablet]){align-self:var(--align-self--tablet-value)!important}:host([col-span--tablet]){grid-column:span var(--col-span--tablet-value) / span var(--col-span--tablet-value)!important}:host([justify-self--tablet]){justify-self:var(--justify-self--tablet-value)!important}:host([order--tablet]),::slotted([order--tablet]){order:var(--order--tablet-value)!important}:host([shown--sr--tablet]),::slotted(*[shown--sr--tablet]){clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}}@media screen and (min-width: 1025px){:host([shown--sr--laptop]),::slotted(*[shown--sr--laptop]){clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}}@media screen and (min-width: 1025px){:host([hidden--laptop]),::slotted([hidden--laptop]){display:none!important}:host([grow--laptop]){flex-grow:var(--grow--laptop-value)!important}:host([shrink--laptop]){flex-shrink:var(--shrink--laptop-value)!important}:host([basis--laptop]){flex-basis:var(--basis--laptop-value)!important}:host([align-self--laptop]){align-self:var(--align-self--laptop-value)!important}:host([col-span--laptop]){grid-column:span var(--col-span--laptop-value) / span var(--col-span--laptop-value)!important}:host([justify-self--laptop]){justify-self:var(--justify-self--laptop-value)!important}:host([order--laptop]),::slotted([order--laptop]){order:var(--order--laptop-value)!important}}@media screen and (min-width: 1441px){:host([col-span--desktop]){grid-column:span var(--col-span--desktop-value) / span var(--col-span--desktop-value)!important}:host([justify-self--desktop]){justify-self:var(--justify-self--desktop-value)!important}:host([order--desktop]),::slotted([order--desktop]){order:var(--order--desktop-value)!important}:host([hidden--desktop]),::slotted([hidden--desktop]){display:none!important}:host([grow--desktop]){flex-grow:var(--grow--desktop-value)!important}:host([shrink--desktop]){flex-shrink:var(--shrink--desktop-value)!important}:host([basis--desktop]){flex-basis:var(--basis--desktop-value)!important}:host([align-self--desktop]){align-self:var(--align-self--desktop-value)!important}}";
+const __vite_import_meta_env__ = {};
 function getSupportedPropertyNames(htmlElementName) {
   const $element = document.createElement(htmlElementName);
   const inputPrototype = Object.getPrototypeOf($element);
@@ -23,6 +24,21 @@ function getSupportedAttributeNames(htmlElementName) {
 }
 const commonStyleSheet$c = new CSSStyleSheet();
 commonStyleSheet$c.replaceSync(commonStyles);
+const PX_COMPONENT_DEBUG = typeof import.meta !== "undefined" && typeof __vite_import_meta_env__ !== "undefined" && true;
+if (typeof window !== "undefined") {
+  window.isComponentDebug = isComponentDebug;
+}
+function isComponentDebug() {
+  return PX_COMPONENT_DEBUG;
+}
+function log(message) {
+  if (isComponentDebug()) {
+    console.error(message);
+  }
+}
+if (typeof window !== "undefined") {
+  window.isComponentDebug = isComponentDebug;
+}
 class WithExtraAttributes extends HTMLElement {
   static get observedAttributes() {
     return [
@@ -149,7 +165,9 @@ class WithExtraAttributes extends HTMLElement {
   updateProperties(name, oldValue, newValue, attrValue) {
     if (attrValue) {
       if (!this.checkName(attrValue, newValue)) {
-        console.error(`${newValue} is not a valid value for ${attrValue}`);
+        log(
+          `${newValue} is not an allowed ${attrValue} value for ${this.tagName.toLowerCase()}`
+        );
         return;
       }
     }
@@ -1172,7 +1190,9 @@ class Stack extends WithExtraAttributes {
   }
   updateOverflowX(name, oldValue, newValue, attrValue) {
     if (!checkName(attrValue, newValue)) {
-      console.error(`${newValue} is not an allowed ${name} value`);
+      log(
+        `${newValue} is not an allowed ${name} value for ${this.tagName.toLowerCase()}`
+      );
       return;
     }
     this.overflowXAttributeDelegate.attributeChangedCallback(
@@ -1183,7 +1203,9 @@ class Stack extends WithExtraAttributes {
   }
   updateFlexProperties(name, oldValue, newValue, attrValue) {
     if (!this.checkName(attrValue, newValue)) {
-      console.error(`${newValue} is not a valid value for ${attrValue}`);
+      log(
+        `${newValue} is not an allowed ${name} value for ${this.tagName.toLowerCase()}`
+      );
     }
     const hasBreakpoint = name.indexOf("--") > -1;
     const cssPropertyName = hasBreakpoint ? name.split("--")[0] : name;
@@ -1829,7 +1851,9 @@ const _Accordion = class _Accordion extends PxElement {
       this.$el.classList.toggle(`${newValue}`);
     }
     if (!this.checkName(attrValues, newValue)) {
-      console.error(`${newValue} is not an allowed ${attrName} value`);
+      log(
+        `${newValue} is not an allowed ${attrName} value for ${this.tagName.toLowerCase()}`
+      );
     }
   }
   updateBackgroundColor(attrName, newValue, attrValue) {
@@ -1843,7 +1867,9 @@ const _Accordion = class _Accordion extends PxElement {
         `var(--px-color-background-${newValue}-inverted)`
       );
     } else {
-      console.error(`${newValue} is not an allowed ${attrName} value`);
+      log(
+        `${newValue} is not an allowed ${attrName} value for ${this.tagName.toLowerCase()}`
+      );
     }
   }
   updateAriaExpanded() {
@@ -2059,7 +2085,9 @@ class Icon extends WithExtraAttributes {
       }
     }
     if (!this.checkName(attrValues, newValue)) {
-      console.error(`${newValue} is not an allowed ${attrName} value`);
+      log(
+        `${newValue} is not an allowed ${attrName} value for ${this.tagName.toLowerCase()}`
+      );
     }
   }
   updateName(oldValue, newValue) {
@@ -2177,7 +2205,9 @@ const _Span = class _Span extends PxElement {
       this.$el.classList.toggle(`${attrName}-${newValue}`);
     }
     if (!this.checkName(attrValue, newValue)) {
-      console.error(`${newValue} is not an allowed ${attrName} value`);
+      log(
+        `${newValue} is not an allowed ${attrName} value for ${this.tagName.toLowerCase()}`
+      );
     }
   }
   get color() {
@@ -2465,7 +2495,9 @@ const _Container = class _Container extends VerticallyExtendedElement {
         `linear-gradient(var(--px-color-background-gradient-${newValue}))`
       );
     } else {
-      console.error(`${newValue} is not an allowed background-gradient value`);
+      log(
+        `${newValue} is not an allowed ${attrName} value for ${this.tagName.toLowerCase()}`
+      );
     }
   }
   updateBackgroundColor(attrName, newValue) {
@@ -2482,7 +2514,9 @@ const _Container = class _Container extends VerticallyExtendedElement {
         `var(--px-color-background-${newValue}${isSurfaceColor ? "" : "-inverted"})`
       );
     } else {
-      console.error(`${newValue} is not an allowed ${attrName} value`);
+      log(
+        `${newValue} is not an allowed ${attrName} value for ${this.tagName.toLowerCase()}`
+      );
     }
   }
   updateBorderColor(attrName, newValue) {
@@ -2496,12 +2530,16 @@ const _Container = class _Container extends VerticallyExtendedElement {
         `var(--px-color-border-${newValue}-inverted)`
       );
     } else {
-      console.error(`${newValue} is not an allowed ${attrName} value`);
+      log(
+        `${newValue} is not an allowed ${attrName} value for ${this.tagName.toLowerCase()}`
+      );
     }
   }
   updateNoBorderRadius(attrName, oldValue, newValue, attrValues) {
     if (!this.checkName(attrValues, newValue)) {
-      console.error(`${newValue} is not an allowed ${attrName} value`);
+      log(
+        `${newValue} is not an allowed ${attrName} value for ${this.tagName.toLowerCase()}`
+      );
     } else {
       const splitResult = this.splitAttrNameFromBreakpoint(attrName);
       const breakpoint = splitResult.breakpoint;
@@ -2519,7 +2557,9 @@ const _Container = class _Container extends VerticallyExtendedElement {
   }
   updateAttribute(attrName, oldValue, newValue, attrValues) {
     if (!this.checkName(attrValues, newValue)) {
-      console.error(`${newValue} is not an allowed ${attrName} value`);
+      log(
+        `${newValue} is not an allowed ${attrName} value for ${this.tagName.toLowerCase()}`
+      );
     } else {
       const splitResult = this.splitAttrNameFromBreakpoint(attrName);
       const breakpoint = splitResult.breakpoint;
@@ -2548,7 +2588,9 @@ const _Container = class _Container extends VerticallyExtendedElement {
   }
   updateAnchorOffset(oldValue, newValue, attrValue) {
     if (!checkName(attrValue, newValue)) {
-      console.error(`${newValue} is not a valid anchor-offset value`);
+      log(
+        `${newValue} is not a valid anchor-offset value for ${this.tagName.toLowerCase()}`
+      );
       return;
     }
     const updateAnchorOffsetStyle = (value) => {
@@ -2944,7 +2986,7 @@ const _ActionLink = class _ActionLink extends PxElement {
   }
   attributeChangedCallback(name, oldValue, newValue) {
     if ((name === "icon-name" || name === "icon-from" || name === "label") && !newValue) {
-      console.error("Action link needs a value from the attribute", name);
+      log(`Action link needs a value from the attribute ${name}`);
       throw new Error(`Action link needs a value from the attribute ${name}`);
     }
     if (name === "icon-name") {
@@ -3115,7 +3157,7 @@ const _AgGridTableThButton = class _AgGridTableThButton extends PxElement {
   updateSorting(oldValue, newValue, attrValue) {
     var _a, _b;
     if (!checkName(attrValue, newValue)) {
-      console.error(`${newValue} is not an allowed sorting value.`);
+      log(`${newValue} is not an allowed sorting value.`);
       return;
     }
     if (oldValue !== null && oldValue !== "") {
@@ -3360,7 +3402,9 @@ const _Grid = class _Grid extends PxElement {
   }
   updateGap(oldValue, newValue, attrValue) {
     if (!this.checkName(attrValue, newValue)) {
-      console.error(`${newValue} is not a valid gap value`);
+      log(
+        `${newValue} is not an allowed gap value for ${this.tagName.toLowerCase()}`
+      );
       return;
     }
     const updateGapStyle = (value) => {
@@ -3384,7 +3428,9 @@ const _Grid = class _Grid extends PxElement {
   }
   updateAttribute(attrName, oldValue, newValue, attrValues) {
     if (!this.checkName(attrValues, newValue)) {
-      console.error(`${newValue} is not an allowed ${attrName} value`);
+      log(
+        `${newValue} is not an allowed ${attrName} value for ${this.tagName.toLowerCase()}`
+      );
     } else if (attrName === "grid-cols" || attrName === "grid-cols--mobile" || attrName === "grid-cols--tablet" || attrName === "grid-cols--laptop" || attrName === "grid-cols--desktop") {
       this.$el.style.setProperty(`--${attrName}`, newValue);
     } else {
@@ -3577,7 +3623,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 +3663,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 +3755,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 +3776,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");
       });
     }
   }
@@ -4174,8 +4225,8 @@ const _Button = class _Button extends PxElement {
     }
     this._toggleClass(oldValue, newValue);
     if (!this.checkName(variantValues, newValue)) {
-      console.error(
-        `${newValue} is not a valid "variant" value for ${newValue}`
+      log(
+        `${newValue} is not a valid "variant" value for ${this.tagName.toLowerCase()}`
       );
     }
   }
@@ -4183,7 +4234,9 @@ const _Button = class _Button extends PxElement {
     const values = ["", "default", "success", "error"];
     this._toggleClass(oldValue, newValue);
     if (!this.checkName(values, newValue)) {
-      console.error(`${newValue} is not a valid "sate" value`);
+      log(
+        `${newValue} is not a valid "sate" value for ${this.tagName.toLowerCase()}`
+      );
     }
   }
   updateExtended(attributeName, newValue) {
@@ -4205,7 +4258,9 @@ const _Button = class _Button extends PxElement {
   }
   updateShape(attrName, newValue, attrValue) {
     if (!checkName(attrValue, newValue)) {
-      console.error(`${newValue} is not a valid shape value`);
+      log(
+        `${newValue} is not a valid shape value for ${this.tagName.toLowerCase()}`
+      );
       return;
     }
     if (newValue !== null && newValue !== "") {
@@ -4398,7 +4453,9 @@ const _ButtonIcon = class _ButtonIcon extends PxElement {
   }
   updateSize(oldValue, newValue) {
     if (!this.checkName(buttonIconSizeValues, newValue)) {
-      console.error(`${newValue} is not a valid size value`);
+      log(
+        `${newValue} is not a valid size value for ${this.tagName.toLowerCase()}`
+      );
     } else {
       if (oldValue !== null && oldValue !== "" && oldValue !== "default") {
         this.$el.classList.toggle(`btn-icon--size-${oldValue}`);
@@ -4410,7 +4467,9 @@ const _ButtonIcon = class _ButtonIcon extends PxElement {
   }
   updateVariant(oldValue, newValue) {
     if (!this.checkName(buttonIconVariantValues, newValue)) {
-      console.error(`${newValue} is not a valid variant value`);
+      log(
+        `${newValue} is not a valid variant value for ${this.tagName.toLowerCase()}`
+      );
     } else {
       if (oldValue !== null && oldValue !== "" && oldValue !== "default") {
         this.$el.classList.toggle(`btn-icon--variant-${oldValue}`);
@@ -4815,9 +4874,8 @@ updateMedia_fn = function(newValue, screenSize) {
 };
 updateBackgroundColor_fn = function(attrName, oldValue, newValue, attrValue) {
   if (!checkName(attrValue, newValue)) {
-    console.error(
-      `${newValue} is not an allowed ${attrName} value`,
-      this.$el
+    log(
+      `${newValue} is not an allowed ${attrName} value for ${this.tagName.toLowerCase()}`
     );
     return;
   }
@@ -5289,7 +5347,7 @@ function configureCellBackgroundColor(el) {
 }
 function updateVariant(element, oldValue, newValue) {
   if (!checkName(cellVariantValues, newValue)) {
-    console.error(`${newValue} is not an allowed variant value.`);
+    log(`${newValue} is not an allowed variant value.`);
     return;
   }
   if (oldValue !== null && oldValue !== "" && oldValue !== "default") {
@@ -5320,7 +5378,9 @@ function handleCellInverted(cell, children, inverted, extraTargets = []) {
 }
 function updateBackgroundColor(el, attrName, oldValue, newValue, attrValue) {
   if (!checkName(attrValue, newValue)) {
-    console.error(`${newValue} is not an allowed ${attrName} value`);
+    log(
+      `${newValue} is not an allowed ${attrName} value for ${this.tagName.toLowerCase()}`
+    );
     return;
   }
   const updateColorStyle = (value) => {
@@ -5498,18 +5558,15 @@ const _Cell = class _Cell extends PxElement {
         element.getAttribute("variant")
       );
       if (!suffixButtonIconHasCorrectVariant) {
-        console.error(
-          `Wrong button-icon variant value for suffix. Allowed values are: ${suffixButtonIconVariantValues.join(
-            ", "
-          )}.`
-        );
         element.setAttribute("variant", "secondary");
       }
     }
   }
   updateRadius(attrName, oldValue, newValue, attrValues) {
     if (!checkName(attrValues, newValue)) {
-      console.error(`${newValue} is not a valid ${attrName} value`);
+      log(
+        `${newValue} is not an allowed ${attrName} value for ${this.tagName.toLowerCase()}`
+      );
       return;
     }
     const hasBreakpoint = attrName.includes("--");
@@ -6165,11 +6222,6 @@ const _Checkbox = class _Checkbox extends PxElement {
     ];
   }
   connectedCallback() {
-    if (!this.hasAttribute("name")) {
-      console.error(
-        '<px-checkbox> requires a "name" attribute to function properly.'
-      );
-    }
     this.$el.addEventListener("change", () => {
       var _a;
       const customEvent = new Event("change", {
@@ -6238,7 +6290,9 @@ const _Checkbox = class _Checkbox extends PxElement {
   updateAttribute(oldValue, newValue, attrValue, attrName) {
     var _a, _b;
     if (!this.checkName(attrValue, newValue)) {
-      console.error(`${newValue} is not a valid ${attrName} value`);
+      log(
+        `${newValue} is not an allowed ${attrName} value for ${this.tagName.toLowerCase()}`
+      );
       return;
     }
     if (oldValue !== null) {
@@ -6354,7 +6408,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>
@@ -6468,7 +6522,9 @@ class CellCheckbox extends WithExtraAttributes {
         case "state":
           if (this.$checkbox) {
             if (!this.checkName(checkboxStateValues, newValue)) {
-              console.error(`${newValue} is not a valid state value`);
+              log(
+                `${newValue} is not an allowed ${attrName} value for ${this.tagName.toLowerCase()}`
+              );
               return;
             } else {
               this.$checkbox.setAttribute("state", newValue);
@@ -6545,7 +6601,9 @@ class CellCheckbox extends WithExtraAttributes {
   }
   handleCheckboxPositionChange(newValue) {
     if (!this.checkName(cellCheckboxPosition, newValue)) {
-      console.error(`${newValue} is not a valid position value`);
+      log(
+        `${newValue} is not an allowed position value for ${this.tagName.toLowerCase()}`
+      );
       return;
     }
     if (this.$checkbox) {
@@ -6763,7 +6821,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>
@@ -7261,7 +7319,9 @@ class Radio extends RadioBase {
   updateAttribute(oldValue, newValue, attrValue, attrName) {
     var _a, _b;
     if (!this.checkName(attrValue, newValue)) {
-      console.error(`${newValue} is not a valid ${attrName} value`);
+      log(
+        `${newValue} is not an allowed ${attrName} value for ${this.tagName.toLowerCase()}`
+      );
       return;
     }
     if (oldValue !== null) {
@@ -7434,18 +7494,6 @@ class Radiogroup extends WithExtraAttributes {
     ];
   }
   connectedCallback() {
-    var _a;
-    if (!this.hasAttribute("name") || this.getAttribute("name") === "") {
-      console.error(
-        '<px-radio-group> requires a "name" attribute to function properly.'
-      );
-    }
-    const hasLegend = ((_a = this.$slotLegend) == null ? void 0 : _a.assignedNodes().length) > 0;
-    if (!hasLegend) {
-      console.error(
-        '<px-radiogroup> requires a slot="legend" containing the description of the fieldset radiogroup.'
-      );
-    }
     this.setupErrorState();
     this.addEventListener("change", this.handleRadioChange);
     this.addEventListener("keydown", (e) => {
@@ -7524,7 +7572,9 @@ class Radiogroup extends WithExtraAttributes {
   }
   updateVariant(oldValue, newValue, attrValue) {
     if (!this.checkName(attrValue, newValue)) {
-      console.error(`${newValue} is not a valid variant value`);
+      log(
+        `${newValue} is not an allowed variant value for ${this.tagName.toLowerCase()}`
+      );
       return;
     }
     if (oldValue !== null && oldValue !== "") {
@@ -7539,7 +7589,9 @@ class Radiogroup extends WithExtraAttributes {
   }
   updateGap(oldValue, newValue, attrValue) {
     if (!this.checkName(attrValue, newValue)) {
-      console.error(`${newValue} is not a valid gap value`);
+      log(
+        `${newValue} is not an allowed gap value for ${this.tagName.toLowerCase()}`
+      );
       return;
     }
     this.updateGapStyle(oldValue);
@@ -7569,7 +7621,7 @@ class Radiogroup extends WithExtraAttributes {
     var _a;
     const hasErrorText = ((_a = this.$slotError) == null ? void 0 : _a.assignedNodes().length) > 0;
     if (this.state === "error" && !hasErrorText) {
-      console.error(
+      log(
         '<px-radiogroup> with state="error" requires a slot="error-text" containing the error description.'
       );
     }
@@ -7662,7 +7714,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>
@@ -7779,7 +7831,9 @@ class CellRadio extends WithExtraAttributes {
         case "state":
           if (this.$radio) {
             if (!this.checkName(stateValues, newValue)) {
-              console.error(`${newValue} is not a valid state value`);
+              log(
+                `${newValue} is not an allowed ${attrName} value for ${this.tagName.toLowerCase()}`
+              );
               return;
             } else {
               this.$radio.setAttribute("state", newValue);
@@ -7858,7 +7912,9 @@ class CellRadio extends WithExtraAttributes {
   }
   handleRadioPositionChange(newValue) {
     if (!this.checkName(cellRadioPosition, newValue)) {
-      console.error(`${newValue} is not a valid position value`);
+      log(
+        `${newValue} is not an allowed position value for ${this.tagName.toLowerCase()}`
+      );
       return;
     }
     if (this.$radio) {
@@ -8109,7 +8165,9 @@ const _ColorOption = class _ColorOption extends PxElement {
   }
   updateSize(attrName, oldValue, newValue, attrValues) {
     if (!checkName(attrValues, newValue)) {
-      console.error(`${newValue} is not an allowed ${attrName} value.`);
+      log(
+        `${newValue} is not an allowed ${attrName} value for ${this.tagName.toLowerCase()}`
+      );
       return;
     }
     if (oldValue !== null && oldValue !== "" && oldValue !== "default") {
@@ -8624,14 +8682,18 @@ class AbstractHeading extends PxElement {
   }
   updateAttribute(attrName, oldValue, newValue, attrValue) {
     if (!this.checkName(attrValue, newValue)) {
-      console.error(`${newValue} is not an allowed "${attrName}" value`);
+      log(
+        `${newValue} is not an allowed ${attrName} value for ${this.tagName.toLowerCase()}`
+      );
     } else {
       this.toggleClass(oldValue, newValue);
     }
   }
   updateColor(oldValue, newValue, attrValue) {
     if (!this.checkName(attrValue, newValue)) {
-      console.error(`${newValue} is not a valid color value`);
+      log(
+        `${newValue} is not an allowed color value for ${this.tagName.toLowerCase()}`
+      );
       return;
     }
     const updateColorStyle = (value) => {
@@ -8651,7 +8713,9 @@ class AbstractHeading extends PxElement {
   }
   updateTextAlign(attrName, oldValue, newValue, attrValue) {
     if (!this.checkName(attrValue, newValue)) {
-      console.error(`${newValue} is not a valid value for ${attrName}`);
+      log(
+        `${newValue} is not an allowed ${attrName} value for ${this.tagName.toLowerCase()}`
+      );
       return;
     }
     const updateStyle = (breakpoint, value) => {
@@ -8898,20 +8962,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 +8983,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");
       });
     }
   }
@@ -9169,7 +9233,9 @@ const _Separator = class _Separator extends PxElement {
       }
     };
     if (!this.checkName(attrValue, newValue)) {
-      console.error(`${newValue} is not a valid value for ${attrName}`);
+      log(
+        `${newValue} is not an allowed ${attrName} value for ${this.tagName.toLowerCase()}`
+      );
     } else {
       updateSizeStyle(oldValue);
       updateSizeStyle(newValue);
@@ -9189,7 +9255,9 @@ const _Separator = class _Separator extends PxElement {
       }
     };
     if (!this.checkName(attrValue, newValue)) {
-      console.error(`${newValue} is not a valid value for ${attrName}`);
+      log(
+        `${newValue} is not an allowed ${attrName} value for ${this.tagName.toLowerCase()}`
+      );
     } else {
       updateColorStyle(oldValue);
       updateColorStyle(newValue);
@@ -9202,7 +9270,9 @@ const _Separator = class _Separator extends PxElement {
       }
     };
     if (!this.checkName(attrValue, newValue)) {
-      console.error(`${newValue} is not a valid value for ${attrName}`);
+      log(
+        `${newValue} is not an allowed ${attrName} value for ${this.tagName.toLowerCase()}`
+      );
     } else {
       if (attrName === "direction") {
         ["mobile", "tablet", "laptop", "desktop"].forEach((breakpoint) => {
@@ -9640,7 +9710,7 @@ class Dropdown extends WithExtraAttributes {
     if (anchorAlignmentValues.includes(value)) {
       this.setAttribute("anchoralignment", value);
     } else {
-      console.warn(
+      log(
         `Invalid anchor alignment value: ${value}. Using default ${defaultAnchorAlignment}.`
       );
       this.setAttribute("anchoralignment", defaultAnchorAlignment);
@@ -9711,13 +9781,6 @@ const _Fieldset = class _Fieldset extends PxElement {
     ];
   }
   connectedCallback() {
-    var _a;
-    const hasLegend = ((_a = this.$slotLegend) == null ? void 0 : _a.assignedNodes().length) > 0;
-    if (!hasLegend) {
-      console.error(
-        '<px-fieldset> requires a slot="legend" containing the description of the fieldset.'
-      );
-    }
     this.setupErrorState();
     transferAccessibilityAttributes(this, this.$el, false);
   }
@@ -9754,7 +9817,7 @@ const _Fieldset = class _Fieldset extends PxElement {
     var _a;
     const hasErrorText = ((_a = this.$slotError) == null ? void 0 : _a.assignedNodes().length) > 0;
     if (this.state === "error" && !hasErrorText) {
-      console.error(
+      log(
         '<px-fieldset> with state="error" requires a slot="error-text" containing the error description.'
       );
     }
@@ -9976,7 +10039,9 @@ const _Link = class _Link extends PxElement {
       this._toggleClassList(newValue);
     }
     if (!this.checkName(linkVariantValues, newValue)) {
-      console.error(`Bad "variant" value for ${newValue}`);
+      log(
+        `${newValue} is not an allowed variant value for ${this.tagName.toLowerCase()}`
+      );
     }
     if (newValue === "icon-link") {
       this.$iconNotBeforeAfter.setAttribute("color", "inherit");
@@ -9984,7 +10049,9 @@ const _Link = class _Link extends PxElement {
   }
   updateShape(attrName, newValue, attrValue) {
     if (!checkName(attrValue, newValue)) {
-      console.error(`${newValue} is not a valid shape value`);
+      log(
+        `${newValue} is not an allowed ${attrName} value for ${this.tagName.toLowerCase()}`
+      );
       return;
     }
     if (newValue !== null && newValue !== "") {
@@ -9999,7 +10066,9 @@ const _Link = class _Link extends PxElement {
       this.$el.classList.toggle(`${attrName}-${newValue}`);
     }
     if (!this.checkName(attrValue, newValue)) {
-      console.error(`Bad ${attrName} value: ${newValue}`);
+      log(
+        `${newValue} is not an allowed ${attrName} value for ${this.tagName.toLowerCase()}`
+      );
     }
   }
   updateExtended(attributeName, newValue) {
@@ -10200,14 +10269,18 @@ const _Paragraph = class _Paragraph extends PxElement {
   }
   updateVariant(attrName, oldValue, newValue, attrValue) {
     if (!this.checkName(attrValue, newValue)) {
-      console.error(`${newValue} is not a valid value for ${attrName}`);
+      log(
+        `${newValue} is not an allowed ${attrName} value for ${this.tagName.toLowerCase()}`
+      );
     } else {
       this.toggleClass(oldValue, newValue);
     }
   }
   updateTypography(attrName, oldValue, newValue, attrValue) {
     if (!this.checkName(attrValue, newValue)) {
-      console.error(`${newValue} is not an allowed ${attrName} value`);
+      log(
+        `${newValue} is not an allowed ${attrName} value for ${this.tagName.toLowerCase()}`
+      );
     } else {
       const splitResult = this.splitAttrNameFromBreakpoint(attrName);
       const breakpoint = splitResult.breakpoint;
@@ -10379,14 +10452,8 @@ const _FooterSitemapItem = class _FooterSitemapItem extends PxElement {
   connectedCallback() {
     this.loadTemplate();
     window.addEventListener("resize", this.throttledLoadTemplate);
-    if (!this.$ul) {
-      console.error(
-        "The footer sitemap item must contain a <ul> element with links."
-      );
-    } else {
-      if (this.$ul.querySelector("px-img")) {
-        this.$ul.classList.add("link-list-img");
-      }
+    if (this.$ul.querySelector("px-img")) {
+      this.$ul.classList.add("link-list-img");
     }
   }
   disconnectedCallback() {
@@ -11010,7 +11077,9 @@ const _AbstractImage = class _AbstractImage extends PxElement {
   }
   updateWidth(attrName, oldValue, newValue, attrValues) {
     if (!this.checkName(attrValues, newValue)) {
-      console.error(`${newValue} is not an allowed ${attrName} value`);
+      log(
+        `${newValue} is not an allowed ${attrName} value for ${this.tagName.toLowerCase()}`
+      );
       return;
     }
     const hasBreakpoint = attrName.indexOf("--") > -1;
@@ -11049,7 +11118,9 @@ const _AbstractImage = class _AbstractImage extends PxElement {
   }
   updateAttribute(attrName, oldValue, newValue, attrValues) {
     if (!this.checkName(attrValues, newValue)) {
-      console.error(`${newValue} is not an allowed ${attrName} value`);
+      log(
+        `${newValue} is not an allowed ${attrName} value for ${this.tagName.toLowerCase()}`
+      );
     } else {
       const splitResult = this.splitAttrNameFromBreakpoint(attrName);
       const breakpoint = splitResult.breakpoint;
@@ -12545,12 +12616,16 @@ class Patch extends HTMLElement {
   updateVariant(oldValue, newValue) {
     this._toggleClass(oldValue, newValue);
     if (!this.checkName(patchVariantValues, newValue)) {
-      console.error(`Bad "variant" value for patch`);
+      log(
+        `${newValue} is not an allowed variant value for ${this.tagName.toLowerCase()}`
+      );
     }
   }
   updateShape(attrName, newValue, attrValue) {
     if (!this.checkName(attrValue, newValue)) {
-      console.error(`${newValue} is not a valid shape value`);
+      log(
+        `${newValue} is not an allowed ${attrName} value for ${this.tagName.toLowerCase()}`
+      );
       return;
     }
     if (newValue !== null && newValue !== "") {
@@ -12615,11 +12690,6 @@ class Pillar extends WithExtraAttributes {
   }
   connectedCallback() {
     this.configureContainer();
-    if (!this.$title) {
-      console.error(
-        'Pillar component requires a title slot. Please add a slot with name="title" inside the pillar.'
-      );
-    }
   }
   attributeChangedCallback(attrName, oldValue, newValue) {
     if (oldValue !== newValue) {
@@ -12670,7 +12740,9 @@ class Pillar extends WithExtraAttributes {
   }
   updateAlignment(attrName, oldValue, newValue) {
     if (!this.checkName(pillarAlignmentValues, newValue)) {
-      console.error(`${newValue} is not an allowed ${attrName} value`);
+      log(
+        `${newValue} is not an allowed ${attrName} value for ${this.tagName.toLowerCase()}`
+      );
       return;
     }
     if (oldValue !== null && oldValue !== "" && oldValue !== "default") {
@@ -12687,7 +12759,9 @@ class Pillar extends WithExtraAttributes {
   }
   updateVariant(attrName, oldValue, newValue) {
     if (!this.checkName(pillarVariantValues, newValue)) {
-      console.error(`${newValue} is not an allowed ${attrName} value`);
+      log(
+        `${newValue} is not an allowed ${attrName} value for ${this.tagName.toLowerCase()}`
+      );
       return;
     }
     if (oldValue !== null && oldValue !== "" && oldValue !== "default") {
@@ -12829,7 +12903,9 @@ const _Price = class _Price extends PxElement {
   updateAttribute(attrName, oldValue, newValue, attrValues) {
     this.toggleClass(oldValue, newValue);
     if (!this.checkName(attrValues, newValue)) {
-      console.error(`${newValue} is not an allowed ${attrName} value`);
+      log(
+        `${newValue} is not an allowed ${attrName} value for ${this.tagName.toLowerCase()}`
+      );
     }
   }
   buildPrice() {
@@ -12964,7 +13040,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 +13313,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>
@@ -13536,14 +13612,6 @@ const _Skeleton = class _Skeleton extends PxElement {
     if (!this.hasAttribute("variant")) {
       this.setAttribute("variant", "body");
     }
-    const slot = this.shadowRoot.querySelector(
-      'slot[name="skeleton-text"]'
-    );
-    if (slot && slot.assignedNodes().length === 0) {
-      console.error(
-        'The "skeleton-text" slot cannot be empty for accessibility. This text will only be visible to screen readers by adding `shown--sr` property to the slot.'
-      );
-    }
   }
   attributeChangedCallback(attrName, oldValue, newValue) {
     if (oldValue !== newValue) {
@@ -13573,7 +13641,9 @@ const _Skeleton = class _Skeleton extends PxElement {
   }
   updateVariant(variant) {
     if (!this.checkName(skeletonsVariantValues, variant)) {
-      console.error(`${variant} is not a valid variant value`);
+      log(
+        `${variant} is not an allowed variant value for ${this.tagName.toLowerCase()}`
+      );
       return;
     }
   }
@@ -13661,7 +13731,9 @@ class Spinner extends HTMLElement {
       this.$el.classList.toggle(`${attrName}-${newValue}`);
     }
     if (!this.checkName(attrValues, newValue)) {
-      console.error(`${newValue} is not an allowed ${attrName} value`);
+      log(
+        `${newValue} is not an allowed ${attrName} value for ${this.tagName.toLowerCase()}`
+      );
     }
   }
   checkName(values, value) {
@@ -13692,7 +13764,7 @@ class Spinner extends HTMLElement {
 if (!customElements.get("px-spinner")) {
   customElements.define("px-spinner", Spinner);
 }
-const statusCss = ":host,:host>*{display:block;box-sizing:border-box}.status{font-family:var(--px-font-family);font-size:var(--px-text-size-label-m-mobile);font-weight:var(--px-font-weight-body);line-height:var(--px-line-height-ratio-l);color:var(--px-color-text-brand-default)}.status.success{color:var(--px-color-text-purpose-success-default)}.status.warning,.status.ongoing{color:var(--px-color-text-purpose-warning-default)}.status.error{color:var(--px-color-text-purpose-error-default)}.status.unlimited{color:var(--px-color-text-purpose-unlimited-default)}.status[disabled]{color:var(--px-color-text-state-disabled-default)}:host([inverted]) .status{color:var(--px-color-text-brand-inverted)}:host([inverted]) .status.success{color:var(--px-color-text-purpose-success-inverted)}:host([inverted]) .status.warning,:host([inverted]) .status.ongoing{color:var(--px-color-text-purpose-warning-inverted)}:host([inverted]) .status.error{color:var(--px-color-text-purpose-error-inverted)}:host([inverted]) .status.unlimited{color:var(--px-color-text-purpose-unlimited-inverted)}:host([inverted]) .status[disabled]{color:var(--px-color-text-state-disabled-inverted)}@media only screen and (min-width: 768px){.status{font-size:var(--px-text-size-label-m-desktop)}}@media only screen and (min-width: 1025px){.status{font-size:var(--px-text-size-label-m-desktop)}}";
+const statusCss = ':host,:host>*{display:block;box-sizing:border-box}.status{color:var(--px-color-text-brand-default)}.status ::slotted([slot="label"]){font-family:var(--px-font-family);font-size:var(--px-text-size-label-m-mobile);font-weight:var(--px-font-weight-body);line-height:var(--px-line-height-ratio-l)}.status.success{color:var(--px-color-text-purpose-success-default)}.status.warning,.status.ongoing{color:var(--px-color-text-purpose-warning-default)}.status.error{color:var(--px-color-text-purpose-error-default)}.status.unlimited{color:var(--px-color-text-purpose-unlimited-default)}.status[disabled]{color:var(--px-color-text-state-disabled-default)}:host([inverted]) .status{color:var(--px-color-text-brand-inverted)}:host([inverted]) .status.success{color:var(--px-color-text-purpose-success-inverted)}:host([inverted]) .status.warning,:host([inverted]) .status.ongoing{color:var(--px-color-text-purpose-warning-inverted)}:host([inverted]) .status.error{color:var(--px-color-text-purpose-error-inverted)}:host([inverted]) .status.unlimited{color:var(--px-color-text-purpose-unlimited-inverted)}:host([inverted]) .status[disabled]{color:var(--px-color-text-state-disabled-inverted)}@media only screen and (min-width: 768px){.status ::slotted([slot="label"]){font-size:var(--px-text-size-label-m-desktop)}}@media only screen and (min-width: 1025px){.status ::slotted([slot="label"]){font-size:var(--px-text-size-label-m-desktop)}}';
 const statusStyles = new CSSStyleSheet();
 statusStyles.replaceSync(statusCss);
 const statusStateValues = [
@@ -13710,16 +13782,11 @@ const _Status = class _Status extends PxElement {
     this.template = () => `
 <div class="status">
   <px-hstack gap="2xs" align-items="flex-start">
-    <px-icon name="information_fill" from="lavender" size="m" color="brand"></px-icon>
+    <px-icon name="information_fill" from="lavender" size="s" color="brand"></px-icon>
     <slot name="label"></slot>
   </px-hstack>
 </div>`;
     this.shadowRoot.innerHTML = this.template();
-    if (!this.$label || !this.iconAriaLabel) {
-      console.warn(
-        'Label slot and icon aria-label slot are mandatory even with icon-only case. For accessibility the label slot will only be red by screen readers if the component is set to "icon-only".'
-      );
-    }
   }
   static get observedAttributes() {
     return [
@@ -13776,7 +13843,9 @@ const _Status = class _Status extends PxElement {
   }
   updateState(state) {
     if (!this.checkName(statusStateValues, state)) {
-      console.error(`${state} is not a valid state value`);
+      log(
+        `${state} is not an allowed state value for ${this.tagName.toLowerCase()}`
+      );
       return;
     }
     const iconMap = {
@@ -13964,7 +14033,9 @@ const _StatusCard = class _StatusCard extends PxElement {
   }
   updateState(state) {
     if (!this.checkName(statusCardStateValues, state)) {
-      console.error(`${state} is not a valid state value`);
+      log(
+        `${state} is not an allowed state value for ${this.tagName.toLowerCase()}`
+      );
       return;
     }
     const iconMap = {
@@ -14509,8 +14580,6 @@ class Tabs extends HTMLElement {
         }
         if (this.$activePanel) {
           this.$activePanel.selected = true;
-        } else {
-          console.error("No panel found for this tab");
         }
       }
     });
@@ -14657,12 +14726,6 @@ class Tab extends HTMLElement {
     return ["selected", "for", "name"];
   }
   connectedCallback() {
-    if (!this.name) {
-      console.error("Tab needs a name attribute");
-    }
-    if (!this.for) {
-      console.error("Tab needs a for attribute");
-    }
     this.slot = "tabs";
     if (this.parentElement.inverted) {
       this.setAttribute("inverted", "");
@@ -14747,9 +14810,6 @@ class TabPanel extends HTMLElement {
     }
   }
   connectedCallback() {
-    if (!this.name) {
-      console.error("TabPanel needs a name attribute");
-    }
     this.slot = "tabpanels";
     const labelledBy = this.parentElement.querySelector(
       `[for="${this.getAttribute("name")}"]`
@@ -14759,8 +14819,6 @@ class TabPanel extends HTMLElement {
         "aria-labelledby",
         labelledBy.getAttribute("name")
       );
-    } else {
-      console.error("No tab found for this panel");
     }
     const selectedTab = this.parentElement.querySelector(
       `[for="${this.name}"]`
@@ -15033,7 +15091,9 @@ const _Tile = class _Tile extends VerticallyExtendedElement {
   }
   updateBackgroundColor(oldValue, newValue, attrValue) {
     if (!checkName(attrValue, newValue)) {
-      console.error(`${newValue} is not a valid value for ${attrValue}`);
+      log(
+        `${newValue} is not an allowed background-color value for ${this.tagName.toLowerCase()}`
+      );
       return;
     }
     const updateBackgroundColorStyle = (value) => {
@@ -15262,7 +15322,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>
@@ -15347,7 +15407,9 @@ class TileCheckbox extends WithExtraAttributes {
         case "state":
           if (this.$checkbox) {
             if (!this.checkName(checkboxStateValues, newValue)) {
-              console.error(`${newValue} is not a valid state value`);
+              log(
+                `${newValue} is not an allowed ${attrName} value for ${this.tagName.toLowerCase()}`
+              );
               return;
             } else {
               this.$checkbox.setAttribute("state", newValue);
@@ -15540,7 +15602,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>
@@ -15628,7 +15690,9 @@ class TileRadio extends WithExtraAttributes {
         case "state":
           if (this.$radio) {
             if (!this.checkName(stateValues, newValue)) {
-              console.error(`${newValue} is not a valid state value`);
+              log(
+                `${newValue} is not an allowed ${attrName} value for ${this.tagName.toLowerCase()}`
+              );
               return;
             } else {
               this.$radio.setAttribute("state", newValue);
@@ -15980,7 +16044,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>
@@ -16564,12 +16628,14 @@ export {
   iconColorValuesKC,
   iconSizeValues,
   iconSizeValuesKC,
+  isComponentDebug,
   isFalsy,
   itemsAlignmentValues,
   justifyContentValues,
   linkShapeValues,
   linkVariantValues,
   linktextsizesValues,
+  log,
   noBorderRadiusValues,
   observedAttributes,
   overflowValues,