@proximus/lavender 2.0.0-alpha.100 → 2.0.0-alpha.101

package/dist/lavender.es.js

@@ -9,7 +9,7 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
 var _host, _interactiveElement, _canSetInteractiveState, _isConnected, _showInteractiveState, _WrappedInteractiveStateController_instances, interactiveStateTargets_get, _src, _internals, _template, _Banner_instances, applyReducedPadding_fn, _Breadcrumb_instances, applyInverted_fn, _wrappedInteractiveStateController, _ButtonWrapper_instances, canSetWrappedInteractiveState_fn, _Card_instances, updateMediaPosition_fn, updateMedia_fn, updateBackgroundColor_fn, _Carousel_instances, syncItems_fn, _Dropdown_instances, resetManualPopoverDisplay_fn, _beforeToggle, _onToggle, handleManualPopoverDisplay_fn, _wrappedInteractiveStateController2, _LinkWrapper_instances, canSetWrappedInteractiveState_fn2, _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, _List_instances, syncChildren_fn, applyInverted_fn2, applyVariant_fn, _mutationObserver, _MegaDropDown_instances, $backButton_get, $title_get, $footer_get, $closeButtons_get, _CardContainer_instances, updateImageSrc_fn, applyAspectRatio_fn, syncBackgroundColor_fn, syncBorder_fn, syncDefaultBackgroundColor_fn, syncDefaultBorder_fn, syncInteractiveState_fn, hasInteractiveState_fn, syncInvertedOnChildren_fn, setOrRemove_fn, _Tabs_instances, handleInverted_fn, handleHideControls_fn, _Timeline_instances, applyInverted_fn3;
 const styles$N = ':host{display:block}:host ::slotted(px-h1[auto-spacing]),:host ::slotted(px-h2[auto-spacing]),:host ::slotted(px-h3[auto-spacing]),:host ::slotted(px-h4[auto-spacing]),:host ::slotted(px-h5[auto-spacing]),:host ::slotted(px-h6[auto-spacing]){margin-bottom:calc(var(--px-spacing-heading-to-content-mobile) - var(--host-gap--mobile))}: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 screen and (max-width: 47.938rem){.flex-container{overflow-x:var(--overflow-x-all-mobile, var(--overflow-x-all));scrollbar-width:none}.flex-container::-webkit-scrollbar{display:none}}@media screen and (min-width: 48rem){.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 ::slotted(px-h1[auto-spacing]),:host ::slotted(px-h2[auto-spacing]),:host ::slotted(px-h3[auto-spacing]),:host ::slotted(px-h4[auto-spacing]),:host ::slotted(px-h5[auto-spacing]),:host ::slotted(px-h6[auto-spacing]){margin-bottom:calc(var(--px-spacing-heading-to-content-tablet) - var(--host-gap--tablet))}: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 screen and (min-width: 48rem) and (max-width: 64rem){.flex-container{overflow-x:var(--overflow-x-all-tablet, var(--overflow-x-all));scrollbar-width:none}.flex-container::-webkit-scrollbar{display:none}}@media screen and (min-width: 64.0625rem){.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 ::slotted(px-h1[auto-spacing]),:host ::slotted(px-h2[auto-spacing]),:host ::slotted(px-h3[auto-spacing]),:host ::slotted(px-h4[auto-spacing]),:host ::slotted(px-h5[auto-spacing]),:host ::slotted(px-h6[auto-spacing]){margin-bottom:calc(var(--px-spacing-heading-to-content-laptop) - var(--host-gap--laptop))}: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 screen and (min-width: 64.0625rem) and (max-width: 90rem){.flex-container{overflow-x:var(--overflow-x-all-laptop, var(--overflow-x-all))}}@media screen and (min-width: 90.0625rem){.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 ::slotted(px-h1[auto-spacing]),:host ::slotted(px-h2[auto-spacing]),:host ::slotted(px-h3[auto-spacing]),:host ::slotted(px-h4[auto-spacing]),:host ::slotted(px-h5[auto-spacing]),:host ::slotted(px-h6[auto-spacing]){margin-bottom:calc(var(--px-spacing-heading-to-content-desktop) - var(--host-gap--desktop))}: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-self-value)}:host([order]),::slotted([order]){order:var(--order-value)}:host([sticky-top]){position:sticky;top:0}:host([sticky-bottom]){position:sticky;bottom:0}: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: 47.938rem){: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: 48rem) and (max-width: 64rem){: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: 64.0625rem){: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: 64.0625rem){: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: 90.0625rem){: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__ = {};
+const __vite_import_meta_env__ = { "DEV": true, "VITE_COMPONENT_DEBUG": "true" };
 function getSupportedPropertyNames(htmlElementName) {
   const $element = document.createElement(htmlElementName);
   const inputPrototype = Object.getPrototypeOf($element);
@@ -24,7 +24,8 @@ 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;
+const VITE_ENV = typeof import.meta !== "undefined" && typeof __vite_import_meta_env__ !== "undefined" ? __vite_import_meta_env__ : void 0;
+const PX_COMPONENT_DEBUG = (VITE_ENV == null ? void 0 : VITE_ENV.VITE_COMPONENT_DEBUG) === "true" || (VITE_ENV == null ? void 0 : VITE_ENV.DEV) === true;
 if (typeof window !== "undefined") {
   window.isComponentDebug = isComponentDebug;
 }
@@ -267,7 +268,7 @@ class WithExtraAttributes extends HTMLElement {
     if (attrValue) {
       if (!this.checkName(attrValue, newValue)) {
         log(
-          `${newValue} is not an allowed ${attrValue} value for ${this.tagName.toLowerCase()}`
+          `"${newValue}" is not an allowed ${name} value for ${this.tagName.toLowerCase()}. Allowed values are: "${attrValue.join('", "')}".`
         );
       }
     }
@@ -645,7 +646,9 @@ const flexboxAlignSelfValues = [
   "default",
   "auto",
   "flex-start",
+  "start",
   "flex-end",
+  "end",
   "center",
   "baseline",
   "stretch"
@@ -1150,7 +1153,9 @@ const alignItemsValues = [
   "default",
   "stretch",
   "flex-start",
+  "start",
   "flex-end",
+  "end",
   "center",
   "baseline"
 ];
@@ -1158,7 +1163,9 @@ const justifyContentValues = [
   "",
   "default",
   "flex-start",
+  "start",
   "flex-end",
+  "end",
   "center",
   "space-between",
   "space-around",
@@ -1292,7 +1299,7 @@ class Stack extends WithExtraAttributes {
   updateOverflowX(name, oldValue, newValue, attrValue) {
     if (!checkName(attrValue, newValue)) {
       log(
-        `${newValue} is not an allowed ${name} value for ${this.tagName.toLowerCase()}`
+        `"${newValue}" is not a valid ${name} value for ${this.tagName.toLowerCase()}. Allowed values are: "${attrValue.join('", "')}".`
       );
       return;
     }
@@ -1305,7 +1312,7 @@ class Stack extends WithExtraAttributes {
   updateFlexProperties(name, oldValue, newValue, attrValue) {
     if (!this.checkName(attrValue, newValue)) {
       log(
-        `${newValue} is not an allowed ${name} value for ${this.tagName.toLowerCase()}`
+        `"${newValue}" is not a valid ${name} value for ${this.tagName.toLowerCase()}. Allowed values are: "${attrValue.join('", "')}".`
       );
     }
     const hasBreakpoint = name.indexOf("--") > -1;
@@ -1962,7 +1969,7 @@ const _Accordion = class _Accordion extends PxElement {
     }
     if (!this.checkName(attrValues, newValue)) {
       log(
-        `${newValue} is not an allowed ${attrName} value for ${this.tagName.toLowerCase()}`
+        `"${newValue}" is not an allowed ${attrName} value for ${this.tagName.toLowerCase()}. Allowed values are: "${attrValues.join('", "')}".`
       );
     }
   }
@@ -1978,7 +1985,7 @@ const _Accordion = class _Accordion extends PxElement {
       );
     } else {
       log(
-        `${newValue} is not an allowed ${attrName} value for ${this.tagName.toLowerCase()}`
+        `"${newValue}" is not an allowed ${attrName} value for ${this.tagName.toLowerCase()}. Allowed values are: "${attrValue.join('", "')}".`
       );
     }
   }
@@ -2313,7 +2320,7 @@ const _Span = class _Span extends PxElement {
     }
     if (!this.checkName(attrValue, newValue)) {
       log(
-        `${newValue} is not an allowed ${attrName} value for ${this.tagName.toLowerCase()}`
+        `"${newValue}" is not a valid ${attrName} value for ${this.tagName.toLowerCase()}. Allowed values are: "${attrValue.join('", "')}".`
       );
     }
   }
@@ -2659,7 +2666,7 @@ const _Container = class _Container extends WithExtraAttributes {
       );
     } else {
       log(
-        `${newValue} is not an allowed ${attrName} value for ${this.tagName.toLowerCase()}`
+        `"${newValue}" is not a valid ${attrName} value for ${this.tagName.toLowerCase()}. Allowed values are: "${gradientValues.join('", "')}".`
       );
     }
   }
@@ -2678,7 +2685,7 @@ const _Container = class _Container extends WithExtraAttributes {
       );
     } else {
       log(
-        `${newValue} is not an allowed ${attrName} value for ${this.tagName.toLowerCase()}`
+        `"${newValue}" is not a valid ${attrName} value for ${this.tagName.toLowerCase()}. Allowed values are: "${backgroundColorValues.join('", "')}".`
       );
     }
   }
@@ -2694,14 +2701,14 @@ const _Container = class _Container extends WithExtraAttributes {
       );
     } else {
       log(
-        `${newValue} is not an allowed ${attrName} value for ${this.tagName.toLowerCase()}`
+        `"${newValue}" is not a valid ${attrName} value for ${this.tagName.toLowerCase()}. Allowed values are: "${borderColorValues.join('", "')}".`
       );
     }
   }
   updateNoBorderRadius(attrName, oldValue, newValue, attrValues) {
     if (!this.checkName(attrValues, newValue)) {
       log(
-        `${newValue} is not an allowed ${attrName} value for ${this.tagName.toLowerCase()}`
+        `"${newValue}" is not a valid ${attrName} value for ${this.tagName.toLowerCase()}. Allowed values are: "${attrValues.join('", "')}".`
       );
     } else {
       const splitResult = this.splitAttrNameFromBreakpoint(attrName);
@@ -2721,7 +2728,7 @@ const _Container = class _Container extends WithExtraAttributes {
   updateAttribute(attrName, oldValue, newValue, attrValues) {
     if (!this.checkName(attrValues, newValue)) {
       log(
-        `${newValue} is not an allowed ${attrName} value for ${this.tagName.toLowerCase()}`
+        `"${newValue}" is not a valid ${attrName} value for ${this.tagName.toLowerCase()}. Allowed values are: "${attrValues.join('", "')}".`
       );
     } else {
       const splitResult = this.splitAttrNameFromBreakpoint(attrName);
@@ -2752,7 +2759,7 @@ const _Container = class _Container extends WithExtraAttributes {
   updateAnchorOffset(oldValue, newValue, attrValue) {
     if (!checkName(attrValue, newValue)) {
       log(
-        `${newValue} is not a valid anchor-offset value for ${this.tagName.toLowerCase()}`
+        `"${newValue}" is not a valid anchor-offset value for ${this.tagName.toLowerCase()}. Allowed values are: "${attrValue.join('", "')}".`
       );
       return;
     }
@@ -2783,7 +2790,7 @@ const _Container = class _Container extends WithExtraAttributes {
   updateAnchorSpacing(oldValue, newValue, attrValue) {
     if (!checkName(attrValue, newValue)) {
       log(
-        `${newValue} is not a valid anchor-spacing value for ${this.tagName.toLowerCase()}`
+        `"${newValue}" is not a valid anchor-spacing value for ${this.tagName.toLowerCase()}. Allowed values are: "${attrValue.join('", "')}".`
       );
       return;
     }
@@ -2813,7 +2820,7 @@ const _Container = class _Container extends WithExtraAttributes {
   updateSubgridRows(attrName, oldValue, newValue, attrValues) {
     if (!checkName(attrValues, newValue)) {
       log(
-        `${newValue} is not an allowed ${attrName} value for ${this.tagName.toLowerCase()}`
+        `"${newValue}" is not a valid ${attrName} value for ${this.tagName.toLowerCase()}. Allowed values are: "${attrValues.join('", "')}".`
       );
     } else {
       this.style.setProperty(`--${attrName}`, newValue);
@@ -3649,7 +3656,7 @@ const _Grid = class _Grid extends PxElement {
   updateGap(oldValue, newValue, attrValue) {
     if (!this.checkName(attrValue, newValue)) {
       log(
-        `${newValue} is not an allowed gap value for ${this.tagName.toLowerCase()}`
+        `"${newValue}" is not a valid gap value for ${this.tagName.toLowerCase()}. Allowed values are: "${attrValue.join('", "')}".`
       );
       return;
     }
@@ -3675,7 +3682,7 @@ const _Grid = class _Grid extends PxElement {
   updateAttribute(attrName, oldValue, newValue, attrValues) {
     if (!this.checkName(attrValues, newValue)) {
       log(
-        `${newValue} is not an allowed ${attrName} value for ${this.tagName.toLowerCase()}`
+        `"${newValue}" is not a valid ${attrName} value for ${this.tagName.toLowerCase()}. Allowed values are: "${attrValues.join('", "')}".`
       );
     } 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);
@@ -4518,7 +4525,7 @@ const _Button = class _Button extends PxElement {
     this._toggleClass(oldValue, newValue);
     if (!this.checkName(variantValues, newValue)) {
       log(
-        `${newValue} is not a valid "variant" value for ${this.tagName.toLowerCase()}`
+        `"${newValue}" is not a valid variant value for ${this.tagName.toLowerCase()}. Allowed values are: "${variantValues.join('", "')}".`
       );
     }
   }
@@ -4527,7 +4534,7 @@ const _Button = class _Button extends PxElement {
     this._toggleClass(oldValue, newValue);
     if (!this.checkName(values, newValue)) {
       log(
-        `${newValue} is not a valid "sate" value for ${this.tagName.toLowerCase()}`
+        `"${newValue}" is not a valid state value for ${this.tagName.toLowerCase()}. Allowed values are: "${values.join('", "')}".`
       );
     }
   }
@@ -4551,7 +4558,7 @@ const _Button = class _Button extends PxElement {
   updateShape(attrName, newValue, attrValue) {
     if (!checkName(attrValue, newValue)) {
       log(
-        `${newValue} is not a valid shape value for ${this.tagName.toLowerCase()}`
+        `"${newValue}" is not a valid shape value for ${this.tagName.toLowerCase()}. Allowed values are: "${attrValue.join('", "')}".`
       );
       return;
     }
@@ -4797,7 +4804,7 @@ const _ButtonIcon = class _ButtonIcon extends PxElement {
   updateSize(oldValue, newValue) {
     if (!this.checkName(buttonIconSizeValues, newValue)) {
       log(
-        `${newValue} is not a valid size value for ${this.tagName.toLowerCase()}`
+        `"${newValue}" is not a valid size value for ${this.tagName.toLowerCase()}. Allowed values are: "${buttonIconSizeValues.join('", "')}".`
       );
     } else {
       if (oldValue !== null && oldValue !== "" && oldValue !== "default") {
@@ -4811,7 +4818,7 @@ const _ButtonIcon = class _ButtonIcon extends PxElement {
   updateVariant(oldValue, newValue) {
     if (!this.checkName(buttonIconVariantValues, newValue)) {
       log(
-        `${newValue} is not a valid variant value for ${this.tagName.toLowerCase()}`
+        `"${newValue}" is not a valid variant value for ${this.tagName.toLowerCase()}. Allowed values are: "${buttonIconVariantValues.join('", "')}".`
       );
     } else {
       if (oldValue !== null && oldValue !== "" && oldValue !== "default") {
@@ -5218,7 +5225,7 @@ updateMedia_fn = function(newValue, screenSize) {
 updateBackgroundColor_fn = function(attrName, oldValue, newValue, attrValue) {
   if (!checkName(attrValue, newValue)) {
     log(
-      `${newValue} is not an allowed ${attrName} value for ${this.tagName.toLowerCase()}`
+      `"${newValue}" is not a valid ${attrName} value for ${this.tagName.toLowerCase()}. Allowed values are: "${attrValue.join('", "')}".`
     );
     return;
   }
@@ -5665,7 +5672,9 @@ function configureCellBackgroundColor(el) {
 }
 function updateVariant(element, oldValue, newValue) {
   if (!checkName(cellVariantValues, newValue)) {
-    log(`${newValue} is not an allowed variant value.`);
+    log(
+      `"${newValue}" is not a valid variant value for a cell. Allowed values are: "${cellVariantValues.join('", "')}".`
+    );
     return;
   }
   if (oldValue !== null && oldValue !== "" && oldValue !== "default") {
@@ -5697,7 +5706,7 @@ function handleCellInverted(cell, children, inverted, extraTargets = []) {
 function updateBackgroundColor(el, attrName, oldValue, newValue, attrValue) {
   if (!checkName(attrValue, newValue)) {
     log(
-      `${newValue} is not an allowed ${attrName} value for ${this.tagName.toLowerCase()}`
+      `"${newValue}" is not a valid ${attrName} value for a cell. Allowed values are: "${attrValue.join('", "')}".`
     );
     return;
   }
@@ -5883,7 +5892,7 @@ const _Cell = class _Cell extends PxElement {
   updateRadius(attrName, oldValue, newValue, attrValues) {
     if (!checkName(attrValues, newValue)) {
       log(
-        `${newValue} is not an allowed ${attrName} value for ${this.tagName.toLowerCase()}`
+        `"${newValue}" is not a valid ${attrName} value for ${this.tagName.toLowerCase()}. Allowed values are: "${attrValues.join('", "')}".`
       );
       return;
     }
@@ -6601,7 +6610,7 @@ const _Checkbox = class _Checkbox extends PxElement {
     var _a, _b;
     if (!this.checkName(attrValue, newValue)) {
       log(
-        `${newValue} is not an allowed ${attrName} value for ${this.tagName.toLowerCase()}`
+        `"${newValue}" is not a valid ${attrName} value for ${this.tagName.toLowerCase()}. Allowed values are: "${attrValue.join('", "')}".`
       );
       return;
     }
@@ -6824,7 +6833,7 @@ class CellCheckbox extends WithExtraAttributes {
           if (this.$checkbox) {
             if (!this.checkName(checkboxStateValues, newValue)) {
               log(
-                `${newValue} is not an allowed ${attrName} value for ${this.tagName.toLowerCase()}`
+                `"${newValue}" is not a valid ${attrName} value for ${this.tagName.toLowerCase()}. Allowed values are: "${checkboxStateValues.join('", "')}".`
               );
               return;
             } else {
@@ -6903,7 +6912,7 @@ class CellCheckbox extends WithExtraAttributes {
   handleCheckboxPositionChange(newValue) {
     if (!this.checkName(cellCheckboxPosition, newValue)) {
       log(
-        `${newValue} is not an allowed position value for ${this.tagName.toLowerCase()}`
+        `"${newValue}" is not a valid position value for ${this.tagName.toLowerCase()}. Allowed values are: "${cellCheckboxPosition.join('", "')}".`
       );
       return;
     }
@@ -7622,7 +7631,7 @@ class Radio extends RadioBase {
     var _a, _b;
     if (!this.checkName(attrValue, newValue)) {
       log(
-        `${newValue} is not an allowed ${attrName} value for ${this.tagName.toLowerCase()}`
+        `"${newValue}" is not a valid ${attrName} value for ${this.tagName.toLowerCase()}. Allowed values are: "${attrValue.join('", "')}".`
       );
       return;
     }
@@ -7875,7 +7884,7 @@ class Radiogroup extends WithExtraAttributes {
   updateVariant(oldValue, newValue, attrValue) {
     if (!this.checkName(attrValue, newValue)) {
       log(
-        `${newValue} is not an allowed variant value for ${this.tagName.toLowerCase()}`
+        `"${newValue}" is not a valid variant value for ${this.tagName.toLowerCase()}. Allowed values are: "${attrValue.join('", "')}".`
       );
       return;
     }
@@ -7892,7 +7901,7 @@ class Radiogroup extends WithExtraAttributes {
   updateGap(oldValue, newValue, attrValue) {
     if (!this.checkName(attrValue, newValue)) {
       log(
-        `${newValue} is not an allowed gap value for ${this.tagName.toLowerCase()}`
+        `"${newValue}" is not a valid gap value for ${this.tagName.toLowerCase()}. Allowed values are: "${attrValue.join('", "')}".`
       );
       return;
     }
@@ -8134,7 +8143,7 @@ class CellRadio extends WithExtraAttributes {
           if (this.$radio) {
             if (!this.checkName(stateValues, newValue)) {
               log(
-                `${newValue} is not an allowed ${attrName} value for ${this.tagName.toLowerCase()}`
+                `"${newValue}" is not a valid ${attrName} value for ${this.tagName.toLowerCase()}. Allowed values are: "${stateValues.join('", "')}".`
               );
               return;
             } else {
@@ -8215,7 +8224,7 @@ class CellRadio extends WithExtraAttributes {
   handleRadioPositionChange(newValue) {
     if (!this.checkName(cellRadioPosition, newValue)) {
       log(
-        `${newValue} is not an allowed position value for ${this.tagName.toLowerCase()}`
+        `"${newValue}" is not a valid position value for ${this.tagName.toLowerCase()}. Allowed values are: "${cellRadioPosition.join('", "')}".`
       );
       return;
     }
@@ -8468,7 +8477,7 @@ const _ColorOption = class _ColorOption extends PxElement {
   updateSize(attrName, oldValue, newValue, attrValues) {
     if (!checkName(attrValues, newValue)) {
       log(
-        `${newValue} is not an allowed ${attrName} value for ${this.tagName.toLowerCase()}`
+        `"${newValue}" is not a valid ${attrName} value for a color option. Allowed values are: "${attrValues.join('", "')}".`
       );
       return;
     }
@@ -9052,7 +9061,7 @@ class AbstractHeading extends PxElement {
   updateAttribute(attrName, oldValue, newValue, attrValue) {
     if (!this.checkName(attrValue, newValue)) {
       log(
-        `${newValue} is not an allowed ${attrName} value for ${this.tagName.toLowerCase()}`
+        `"${newValue}" is not a valid ${attrName} value for ${this.tagName.toLowerCase()}. Allowed values are: "${attrValue.join('", "')}".`
       );
     } else {
       this.toggleClass(oldValue, newValue);
@@ -9061,7 +9070,7 @@ class AbstractHeading extends PxElement {
   updateColor(oldValue, newValue, attrValue) {
     if (!this.checkName(attrValue, newValue)) {
       log(
-        `${newValue} is not an allowed color value for ${this.tagName.toLowerCase()}`
+        `"${newValue}" is not a valid color value for ${this.tagName.toLowerCase()}. Allowed values are: "${attrValue.join('", "')}".`
       );
       return;
     }
@@ -9083,7 +9092,7 @@ class AbstractHeading extends PxElement {
   updateTextAlign(attrName, oldValue, newValue, attrValue) {
     if (!this.checkName(attrValue, newValue)) {
       log(
-        `${newValue} is not an allowed ${attrName} value for ${this.tagName.toLowerCase()}`
+        `"${newValue}" is not a valid ${attrName} value for ${this.tagName.toLowerCase()}. Allowed values are: "${attrValue.join('", "')}".`
       );
       return;
     }
@@ -9620,7 +9629,7 @@ const _Separator = class _Separator extends PxElement {
     };
     if (!this.checkName(attrValue, newValue)) {
       log(
-        `${newValue} is not an allowed ${attrName} value for ${this.tagName.toLowerCase()}`
+        `"${newValue}" is not a valid ${attrName} value for ${this.tagName.toLowerCase()}. Allowed values are: "${attrValue.join('", "')}".`
       );
     } else {
       updateSizeStyle(oldValue);
@@ -9642,7 +9651,7 @@ const _Separator = class _Separator extends PxElement {
     };
     if (!this.checkName(attrValue, newValue)) {
       log(
-        `${newValue} is not an allowed ${attrName} value for ${this.tagName.toLowerCase()}`
+        `"${newValue}" is not a valid ${attrName} value for ${this.tagName.toLowerCase()}. Allowed values are: "${attrValue.join('", "')}".`
       );
     } else {
       updateColorStyle(oldValue);
@@ -9657,7 +9666,7 @@ const _Separator = class _Separator extends PxElement {
     };
     if (!this.checkName(attrValue, newValue)) {
       log(
-        `${newValue} is not an allowed ${attrName} value for ${this.tagName.toLowerCase()}`
+        `"${newValue}" is not a valid ${attrName} value for ${this.tagName.toLowerCase()}. Allowed values are: "${attrValue.join('", "')}".`
       );
     } else {
       if (attrName === "direction") {
@@ -10530,7 +10539,7 @@ const _Link = class _Link extends PxElement {
     }
     if (!this.checkName(linkVariantValues, newValue)) {
       log(
-        `${newValue} is not an allowed variant value for ${this.tagName.toLowerCase()}`
+        `"${newValue}" is not a valid variant value for ${this.tagName.toLowerCase()}. Allowed values are: "${linkVariantValues.join('", "')}".`
       );
     }
     if (newValue === "icon-link") {
@@ -10540,7 +10549,7 @@ const _Link = class _Link extends PxElement {
   updateShape(attrName, newValue, attrValue) {
     if (!checkName(attrValue, newValue)) {
       log(
-        `${newValue} is not an allowed ${attrName} value for ${this.tagName.toLowerCase()}`
+        `"${newValue}" is not a valid ${attrName} value for ${this.tagName.toLowerCase()}. Allowed values are: "${attrValue.join('", "')}".`
       );
       return;
     }
@@ -10557,7 +10566,7 @@ const _Link = class _Link extends PxElement {
     }
     if (!this.checkName(attrValue, newValue)) {
       log(
-        `${newValue} is not an allowed ${attrName} value for ${this.tagName.toLowerCase()}`
+        `"${newValue}" is not a valid ${attrName} value for ${this.tagName.toLowerCase()}. Allowed values are: "${attrValue.join('", "')}".`
       );
     }
   }
@@ -10804,7 +10813,7 @@ const _Paragraph = class _Paragraph extends PxElement {
   updateVariant(attrName, oldValue, newValue, attrValue) {
     if (!this.checkName(attrValue, newValue)) {
       log(
-        `${newValue} is not an allowed ${attrName} value for ${this.tagName.toLowerCase()}`
+        `"${newValue}" is not a valid ${attrName} value for ${this.tagName.toLowerCase()}. Allowed values are: "${attrValue.join('", "')}".`
       );
     } else {
       this.toggleClass(oldValue, newValue);
@@ -10813,7 +10822,7 @@ const _Paragraph = class _Paragraph extends PxElement {
   updateTypography(attrName, oldValue, newValue, attrValue) {
     if (!this.checkName(attrValue, newValue)) {
       log(
-        `${newValue} is not an allowed ${attrName} value for ${this.tagName.toLowerCase()}`
+        `"${newValue}" is not a valid ${attrName} value for ${this.tagName.toLowerCase()}. Allowed values are: "${attrValue.join('", "')}".`
       );
     } else {
       const splitResult = this.splitAttrNameFromBreakpoint(attrName);
@@ -11613,7 +11622,7 @@ const _AbstractImage = class _AbstractImage extends PxElement {
   updateWidth(attrName, oldValue, newValue, attrValues) {
     if (!this.checkName(attrValues, newValue)) {
       log(
-        `${newValue} is not an allowed ${attrName} value for ${this.tagName.toLowerCase()}`
+        `"${newValue}" is not a valid ${attrName} value for ${this.tagName.toLowerCase()}. Allowed values are: "${attrValues.join('", "')}".`
       );
       return;
     }
@@ -11654,7 +11663,7 @@ const _AbstractImage = class _AbstractImage extends PxElement {
   updateAttribute(attrName, oldValue, newValue, attrValues) {
     if (!this.checkName(attrValues, newValue)) {
       log(
-        `${newValue} is not an allowed ${attrName} value for ${this.tagName.toLowerCase()}`
+        `"${newValue}" is not a valid ${attrName} value for ${this.tagName.toLowerCase()}. Allowed values are: "${attrValues.join('", "')}".`
       );
     } else {
       const splitResult = this.splitAttrNameFromBreakpoint(attrName);
@@ -12451,7 +12460,7 @@ const _List = class _List extends PxElement {
         case "variant":
           if (!this.checkName(listVariantValues, newValue)) {
             log(
-              `${newValue} is not an allowed variant value for ${this.tagName.toLowerCase()}`
+              `"${newValue}" is not a valid variant value for ${this.tagName.toLowerCase()}. Allowed values are: "${listVariantValues.join('", "')}".`
             );
           }
           if (this.isConnected) {
@@ -13438,14 +13447,14 @@ class Patch extends HTMLElement {
     this._toggleClass(oldValue, newValue);
     if (!this.checkName(patchVariantValues, newValue)) {
       log(
-        `${newValue} is not an allowed variant value for ${this.tagName.toLowerCase()}`
+        `"${newValue}" is not a valid variant value for ${this.tagName.toLowerCase()}. Allowed values are: "${patchVariantValues.join('", "')}".`
       );
     }
   }
   updateShape(attrName, newValue, attrValue) {
     if (!this.checkName(attrValue, newValue)) {
       log(
-        `${newValue} is not an allowed ${attrName} value for ${this.tagName.toLowerCase()}`
+        `"${newValue}" is not a valid ${attrName} value for ${this.tagName.toLowerCase()}. Allowed values are: "${attrValue.join('", "')}".`
       );
       return;
     }
@@ -13562,7 +13571,7 @@ class Pillar extends WithExtraAttributes {
   updateAlignment(attrName, oldValue, newValue) {
     if (!this.checkName(pillarAlignmentValues, newValue)) {
       log(
-        `${newValue} is not an allowed ${attrName} value for ${this.tagName.toLowerCase()}`
+        `"${newValue}" is not a valid ${attrName} value for ${this.tagName.toLowerCase()}. Allowed values are: "${pillarAlignmentValues.join('", "')}".`
       );
       return;
     }
@@ -13581,7 +13590,7 @@ class Pillar extends WithExtraAttributes {
   updateVariant(attrName, oldValue, newValue) {
     if (!this.checkName(pillarVariantValues, newValue)) {
       log(
-        `${newValue} is not an allowed ${attrName} value for ${this.tagName.toLowerCase()}`
+        `"${newValue}" is not a valid ${attrName} value for ${this.tagName.toLowerCase()}. Allowed values are: "${pillarVariantValues.join('", "')}".`
       );
       return;
     }
@@ -14063,7 +14072,7 @@ const _Price = class _Price extends PxElement {
     this.toggleClass(oldValue, newValue);
     if (!this.checkName(attrValues, newValue)) {
       log(
-        `${newValue} is not an allowed ${attrName} value for ${this.tagName.toLowerCase()}`
+        `"${newValue}" is not a valid ${attrName} value for ${this.tagName.toLowerCase()}. Allowed values are: "${attrValues.join('", "')}".`
       );
     }
   }
@@ -14385,14 +14394,14 @@ class SelectableBoxCheckbox extends WithExtraAttributes {
       if (this.$checkbox) {
         this.$checkbox.setAttribute("checked", "");
       }
-      this.dispatchEvent(
-        new Event("change", {
-          bubbles: true,
-          composed: true
-          // Allow the event to pass through shadow DOM boundaries
-        })
-      );
     }
+    this.dispatchEvent(
+      new Event("change", {
+        bubbles: true,
+        composed: true
+        // Allow the event to pass through shadow DOM boundaries
+      })
+    );
   }
   // Form-associated callbacks
   static get formAssociated() {
@@ -14659,14 +14668,14 @@ class SelectableBoxRadio extends WithExtraAttributes {
       if (this.$radio) {
         this.$radio.setAttribute("checked", "");
       }
-      this.dispatchEvent(
-        new Event("change", {
-          bubbles: true,
-          composed: true
-          // Allow the event to pass through shadow DOM boundaries
-        })
-      );
     }
+    this.dispatchEvent(
+      new Event("change", {
+        bubbles: true,
+        composed: true
+        // Allow the event to pass through shadow DOM boundaries
+      })
+    );
   }
   // Form-associated callbacks
   static get formAssociated() {
@@ -14827,7 +14836,7 @@ const _Skeleton = class _Skeleton extends PxElement {
   updateVariant(variant) {
     if (!this.checkName(skeletonsVariantValues, variant)) {
       log(
-        `${variant} is not an allowed variant value for ${this.tagName.toLowerCase()}`
+        `"${variant}" is not a valid variant value for ${this.tagName.toLowerCase()}. Allowed values are: "${skeletonsVariantValues.join('", "')}".`
       );
       return;
     }
@@ -14917,7 +14926,7 @@ class Spinner extends HTMLElement {
     }
     if (!this.checkName(attrValues, newValue)) {
       log(
-        `${newValue} is not an allowed ${attrName} value for ${this.tagName.toLowerCase()}`
+        `"${newValue}" is not a valid ${attrName} value for ${this.tagName.toLowerCase()}. Allowed values are: "${attrValues.join('", "')}".`
       );
     }
   }
@@ -15029,7 +15038,7 @@ const _Status = class _Status extends PxElement {
   updateState(state) {
     if (!this.checkName(statusStateValues, state)) {
       log(
-        `${state} is not an allowed state value for ${this.tagName.toLowerCase()}`
+        `"${state}" is not a valid state value for ${this.tagName.toLowerCase()}. Allowed values are: "${statusStateValues.join('", "')}".`
       );
       return;
     }
@@ -15224,7 +15233,7 @@ const _StatusCard = class _StatusCard extends PxElement {
   updateState(state) {
     if (!this.checkName(statusCardStateValues, state)) {
       log(
-        `${state} is not an allowed state value for ${this.tagName.toLowerCase()}`
+        `"${state}" is not a valid state value for ${this.tagName.toLowerCase()}. Allowed values are: "${statusCardStateValues.join('", "')}".`
       );
       return;
     }
@@ -16337,7 +16346,7 @@ const _Tile = class _Tile extends VerticallyExtendedElement {
   updateBackgroundColor(oldValue, newValue, attrValue) {
     if (!checkName(attrValue, newValue)) {
       log(
-        `${newValue} is not an allowed background-color value for ${this.tagName.toLowerCase()}`
+        `"${newValue}" is not a valid background-color value for ${this.tagName.toLowerCase()}. Allowed values are: "${attrValue.join('", "')}".`
       );
       return;
     }
@@ -16653,7 +16662,7 @@ class TileCheckbox extends WithExtraAttributes {
           if (this.$checkbox) {
             if (!this.checkName(checkboxStateValues, newValue)) {
               log(
-                `${newValue} is not an allowed ${attrName} value for ${this.tagName.toLowerCase()}`
+                `"${newValue}" is not a valid ${attrName} value for ${this.tagName.toLowerCase()}. Allowed values are: "${checkboxStateValues.join('", "')}".`
               );
               return;
             } else {
@@ -16936,7 +16945,7 @@ class TileRadio extends WithExtraAttributes {
           if (this.$radio) {
             if (!this.checkName(stateValues, newValue)) {
               log(
-                `${newValue} is not an allowed ${attrName} value for ${this.tagName.toLowerCase()}`
+                `"${newValue}" is not a valid ${attrName} value for ${this.tagName.toLowerCase()}. Allowed values are: "${stateValues.join('", "')}".`
               );
               return;
             } else {