@proximus/lavender-light 2.0.0-alpha.100 → 2.0.0-alpha.102

package/dist/lavender-light.es.js

@@ -12,7 +12,7 @@ const linkCss = ':host([variant="icon-link"]){display:inline-flex}a,.link,::slot
 const paragraphCss = "p,::slotted(p){font-family:var(--px-font-family);color:var(--px-color-text-neutral-default);font-size:var(--px-text-size-body-m-mobile);font-weight:var(--px-font-weight-body);line-height:var(--px-line-height-ratio-l);margin:0}::slotted(p){margin-bottom:var(--px-spacing-xs-mobile)}.text-align-left{text-align:left}.text-align-center{text-align:center}.text-align-right{text-align:right}:host([inverted]) p,:host([inverted]) ::slotted(p){color:var(--px-color-text-neutral-inverted)}@media screen and (max-width: 48rem){.text-align-left--mobile{text-align:left}.text-align-center--mobile{text-align:center}.text-align-right--mobile{text-align:right}}@media screen and (min-width: 48rem){p,::slotted(p){font-size:var(--px-text-size-body-m-desktop)}::slotted(p){margin-bottom:var(--px-spacing-xs-tablet)}.text-align-left--tablet{text-align:left}.text-align-center--tablet{text-align:center}.text-align-right--tablet{text-align:right}}@media screen and (min-width: 64.0625rem){p,::slotted(p){font-size:var(--px-text-size-body-m-desktop)}::slotted(p){margin-bottom:var(--px-spacing-xs-laptop)}.text-align-left--laptop{text-align:left}.text-align-center--laptop{text-align:center}.text-align-right--laptop{text-align:right}}@media screen and (min-width: 90.0625rem){::slotted(p){margin-bottom:var(--px-spacing-xs-desktop)}}";
 const spanCss = "span,::slotted(span){font-family:var(--px-font-family);color:var(--px-color-text-neutral-default);font-size:var(--px-text-size-body-m-mobile);line-height:var(--px-line-height-ratio-l)}:host([inverted]) span,:host([inverted]) ::slotted(span){color:var(--px-color-text-neutral-inverted)}:host([strikethrough]) span{text-decoration:line-through}span.link{text-decoration:underline}@media screen and (min-width: 48rem){span,::slotted(span){font-size:var(--px-text-size-body-m-desktop)}}@media screen and (min-width: 64.0625rem){span,::slotted(span){font-size:var(--px-text-size-body-m-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);
@@ -27,7 +27,8 @@ function getSupportedAttributeNames(htmlElementName) {
 }
 const commonStyleSheet = new CSSStyleSheet();
 commonStyleSheet.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;
 }
@@ -270,7 +271,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('", "')}".`
         );
       }
     }
@@ -639,7 +640,9 @@ const flexboxAlignSelfValues = [
   "default",
   "auto",
   "flex-start",
+  "start",
   "flex-end",
+  "end",
   "center",
   "baseline",
   "stretch"
@@ -1432,7 +1435,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('", "')}".`
       );
     }
   }
@@ -1451,7 +1454,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('", "')}".`
       );
     }
   }
@@ -1467,14 +1470,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);
@@ -1494,7 +1497,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);
@@ -1525,7 +1528,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;
     }
@@ -1556,7 +1559,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;
     }
@@ -1586,7 +1589,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);
@@ -2064,7 +2067,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);
@@ -2086,7 +2089,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);
@@ -2101,7 +2104,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") {
@@ -2199,7 +2202,9 @@ const alignItemsValues = [
   "default",
   "stretch",
   "flex-start",
+  "start",
   "flex-end",
+  "end",
   "center",
   "baseline"
 ];
@@ -2207,7 +2212,9 @@ const justifyContentValues = [
   "",
   "default",
   "flex-start",
+  "start",
   "flex-end",
+  "end",
   "center",
   "space-between",
   "space-around",
@@ -2341,7 +2348,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;
     }
@@ -2354,7 +2361,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;
@@ -3224,7 +3231,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);
@@ -3233,7 +3240,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;
     }
@@ -3255,7 +3262,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;
     }
@@ -3465,7 +3472,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);
@@ -3474,7 +3481,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);
@@ -4099,7 +4106,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('", "')}".`
       );
     }
   }
@@ -4108,7 +4115,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('", "')}".`
       );
     }
   }
@@ -4132,7 +4139,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;
     }
@@ -4294,9 +4301,9 @@ if (!customElements.get("px-button-wrapper")) {
 const styles$2 = ':host{display:block}:host,:host *{box-sizing:border-box}.content-wrapper{margin-inline:var(--px-padding-s-mobile);max-width:var(--px-content-wrapper-max-width-desktop)}@media screen and (min-width: 77rem){.content-wrapper{margin-inline:auto}}.overlapped{margin-bottom:calc(var(--px-overlapped-mobile) * -1)}::slotted([slot="overlap"]){margin-top:var(--px-overlapped-mobile)}@media screen and (min-width: 48rem){.overlapped{margin-bottom:calc(var(--px-overlapped-desktop) * -1)}::slotted([slot="overlap"]){margin-top:var(--px-overlapped-desktop)}}@media screen and (min-width: 64.0625rem){.overlapped{margin-bottom:calc(var(--px-overlapped-desktop) * -1)}::slotted([slot="overlap"]){margin-top:var(--px-overlapped-desktop)}}';
 const styleSheet = new CSSStyleSheet();
 styleSheet.replaceSync(styles$2);
-class Section extends HTMLElement {
+class Section extends WithExtraAttributes {
   constructor() {
-    super();
+    super(styleSheet);
     this.template = () => `
     <px-container border-radius="none" padding-inline="none">
       <div class="content-wrapper">
@@ -4312,9 +4319,7 @@ class Section extends HTMLElement {
       <slot name="overlap"></slot>
     </div>
   `;
-    this.attachShadow({ mode: "open" });
     this.shadowRoot.innerHTML = this.template();
-    this.shadowRoot.adoptedStyleSheets = [styleSheet];
   }
   connectedCallback() {
     var _a, _b;
@@ -4334,6 +4339,7 @@ class Section extends HTMLElement {
   }
   static get observedAttributes() {
     return [
+      ...super.observedAttributes,
       "background-color",
       "background-gradient",
       "background-image",
@@ -4439,6 +4445,9 @@ class Section extends HTMLElement {
         case "border-side--laptop":
           this.$container.borderSideLaptop = newValue;
           break;
+        default:
+          super.attributeChangedCallback(name, oldValue, newValue);
+          break;
       }
     }
   }
@@ -4661,7 +4670,7 @@ class Section extends HTMLElement {
 if (!customElements.get("px-section")) {
   customElements.define("px-section", Section);
 }
-const styles$1 = ":host{display:block}:host *{box-sizing:border-box}button,a{display:block;font-family:var(--px-font-family);font-size:var(--px-text-size-label-m-mobile);line-height:var(--px-font-line-height-l);color:var(--px-color-text-neutral-default);text-align:center;cursor:pointer;padding:32px 0;height:100%}button:after,a:after{content:attr(data-label);display:block;height:0;width:auto;visibility:hidden;overflow:hidden;-webkit-user-select:none;user-select:none;pointer-events:none;font-weight:var(--px-font-weight-title)}button:focus-visible,a:focus-visible{outline-offset:var(--px-focus-offset-mobile);outline:var(--px-focus-outline-mobile) solid var(--px-color-border-focus-outline-default)}button:hover,a:hover{font-weight:var(--px-font-weight-title);color:var(--px-color-background-container-primary-default);padding-block:30px}button{margin:0;border:0;border-bottom:2px solid rgba(0,0,0,0);outline:0;background:inherit}button[aria-expanded=true]{font-weight:var(--px-font-weight-title);color:var(--px-color-background-container-primary-default);border-bottom-color:var(--px-color-background-container-primary-default)}a{text-decoration:none}@media screen and (min-width: 48rem){button,a{font-size:var(--px-text-size-label-m-tablet)}button:focus-visible,a:focus-visible{outline-offset:var(--px-focus-offset-tablet);outline-width:var(--px-focus-outline-tablet)}}@media screen and (min-width: 64.0625rem){button,a{font-size:var(--px-text-size-label-m-laptop)}button:focus-visible,a:focus-visible{outline-offset:var(--px-focus-offset-laptop);outline-width:var(--px-focus-outline-laptop)}}@media screen and (min-width: 90.0625rem){button,a{font-size:var(--px-text-size-label-m-desktop)}button:focus-visible,a:focus-visible{outline-offset:var(--px-focus-offset-desktop);outline-width:var(--px-focus-outline-desktop)}}";
+const styles$1 = ":host{display:block}:host *{box-sizing:border-box}button,a{display:block;font-family:var(--px-font-family);font-size:var(--px-text-size-label-m-mobile);line-height:var(--px-font-line-height-l);color:var(--px-color-text-neutral-default);text-align:center;cursor:pointer;padding:32px 0;height:100%}button:after,a:after{content:attr(data-label);display:block;height:0;width:auto;visibility:hidden;overflow:hidden;-webkit-user-select:none;user-select:none;pointer-events:none;font-weight:var(--px-font-weight-title)}button:focus-visible,a:focus-visible{outline-offset:var(--px-focus-offset-mobile);outline:var(--px-focus-outline-mobile) solid var(--px-color-border-focus-outline-default)}:host([current]) button,button:hover,:host([current]) a,a:hover{font-weight:var(--px-font-weight-title);color:var(--px-color-background-container-primary-default);padding-block:30px}button{margin:0;border:0;border-bottom:2px solid rgba(0,0,0,0);outline:0;background:inherit}button[aria-expanded=true]{font-weight:var(--px-font-weight-title);color:var(--px-color-background-container-primary-default);border-bottom-color:var(--px-color-background-container-primary-default)}a{text-decoration:none}@media screen and (min-width: 48rem){button,a{font-size:var(--px-text-size-label-m-tablet)}button:focus-visible,a:focus-visible{outline-offset:var(--px-focus-offset-tablet);outline-width:var(--px-focus-outline-tablet)}}@media screen and (min-width: 64.0625rem){button,a{font-size:var(--px-text-size-label-m-laptop)}button:focus-visible,a:focus-visible{outline-offset:var(--px-focus-offset-laptop);outline-width:var(--px-focus-outline-laptop)}}@media screen and (min-width: 90.0625rem){button,a{font-size:var(--px-text-size-label-m-desktop)}button:focus-visible,a:focus-visible{outline-offset:var(--px-focus-offset-desktop);outline-width:var(--px-focus-outline-desktop)}}";
 const stylesheet$1 = new CSSStyleSheet();
 stylesheet$1.replaceSync(styles$1);
 class HeaderItem extends WithExtraAttributes {
@@ -4680,7 +4689,7 @@ class HeaderItem extends WithExtraAttributes {
     }
   }
   static get observedAttributes() {
-    return ["for", "href"];
+    return ["for", "href", "current"];
   }
   connectedCallback() {
     this.setAttribute("slot", "header-entries");
@@ -4701,9 +4710,9 @@ class HeaderItem extends WithExtraAttributes {
   }
   attributeChangedCallback(name, oldValue, newValue) {
     super.attributeChangedCallback(name, oldValue, newValue);
-    if (name === "href" && this.$a && !!newValue) {
+    if (name === "href" && oldValue !== newValue) {
       this.shadowRoot.innerHTML = this.template();
-    } else if (name === "for" && this.$button && !!newValue) {
+    } else if (name === "for" && oldValue !== newValue && this.$button) {
       this.shadowRoot.innerHTML = this.template();
       this.setupButtonA11y();
     }
@@ -4738,6 +4747,16 @@ class HeaderItem extends WithExtraAttributes {
       this.$button.setAttribute("aria-controls", this.for);
     }
   }
+  get current() {
+    return this.hasAttribute("current");
+  }
+  set current(value) {
+    if (value) {
+      this.setAttribute("current", "");
+    } else {
+      this.removeAttribute("current");
+    }
+  }
   get $button() {
     return this.shadowRoot.querySelector("button");
   }
@@ -4890,7 +4909,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") {
@@ -4900,7 +4919,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;
     }
@@ -4917,7 +4936,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('", "')}".`
       );
     }
   }
@@ -5726,7 +5745,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;
     }
@@ -5752,7 +5771,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);