@proximus/lavender 1.4.6-beta.2 → 1.4.6

package/dist/lavender.es.js

@@ -6,9 +6,9 @@ var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read fr
 var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
 var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "write to private field"), setter ? setter.call(obj, value) : member.set(obj, value), value);
 var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "access private method"), method);
-var _src, _internals, _template, _Banner_instances, applyReducedPadding_fn, _Breadcrumb_instances, applyInverted_fn, _Card_instances, updateMediaPosition_fn, updateMedia_fn, updateBackgroundColor_fn, _Carousel_instances, syncItems_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, _List_instances, syncChildren_fn, applyInverted_fn2, applyVariant_fn, _mutationObserver, _MegaDropDown_instances, $backButton_get, $title_get, $footer_get, $closeButtons_get, _Tabs_instances, handleInverted_fn, handleHideControls_fn, _Timeline_instances, applyInverted_fn3;
+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, _Tabs_instances, handleInverted_fn, handleHideControls_fn;
 const styles$K = ':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 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 ::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 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 ::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 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 ::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([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 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);
@@ -24,7 +24,7 @@ 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 PX_COMPONENT_DEBUG = typeof import.meta !== "undefined" && typeof __vite_import_meta_env__ !== "undefined" && false;
 if (typeof window !== "undefined") {
   window.isComponentDebug = isComponentDebug;
 }
@@ -32,9 +32,6 @@ function isComponentDebug() {
   return PX_COMPONENT_DEBUG;
 }
 function log(message) {
-  if (isComponentDebug()) {
-    console.error(message);
-  }
 }
 if (typeof window !== "undefined") {
   window.isComponentDebug = isComponentDebug;
@@ -881,43 +878,43 @@ function transferAccessibilityAttributes(sourceElement, targetElement, applyLabe
     sourceElement.setAttribute("aria-labelledby", id);
   }
 }
-function cssTokenBreakpoints(attributeName, selector, attributeValues, cssPropertyPrefix = "", generatedCssPropertyName, selectorAttributeName = attributeName) {
+function cssTokenBreakpoints(attributeName, selector, attributeValues, cssPropertyPrefix = "", generatedCssPropertyName) {
   const stylesheet2 = new CSSStyleSheet();
   const styles2 = attributeValues.reduce(
     (prev, attributeValue) => prev + `
-  ${selector(selectorAttributeName, attributeValue)} {
+  ${selector(attributeName, attributeValue)} {
     ${attributeName}: var(--${cssPropertyPrefix}-${attributeValue}-desktop);
     ${generatedCssPropertyName ? `${generatedCssPropertyName}:var(--${cssPropertyPrefix}-${attributeValue}-desktop)` : ""}
   }
   /* Mobile only - max 767px */
   @media only screen and (max-width: 47.938em) {
-    ${selector(selectorAttributeName, attributeValue)} {
+    ${selector(attributeName, attributeValue)} {
       ${attributeName}: var(--${cssPropertyPrefix}-${attributeValue}-mobile);
       ${generatedCssPropertyName ? `${generatedCssPropertyName}: var(--${cssPropertyPrefix}-${attributeValue}-mobile)` : ""}
     }
   }
-  ${selector(selectorAttributeName, attributeValue, "mobile")} {
+  ${selector(attributeName, attributeValue, "mobile")} {
  /* Mobile only - max 767px */
   @media only screen and (max-width: 47.938em) {
       ${attributeName}: var(--${cssPropertyPrefix}-${attributeValue}-mobile) !important;
       ${generatedCssPropertyName ? `${generatedCssPropertyName}: var(--${cssPropertyPrefix}-${attributeValue}-mobile)` : ""}
     }
   }
-  ${selector(selectorAttributeName, attributeValue, "tablet")} {
+  ${selector(attributeName, attributeValue, "tablet")} {
   /* Tablet - min 768px max 1024px */
   @media only screen and (min-width: 48em) and (max-width: 64em) {
       ${attributeName}: var(--${cssPropertyPrefix}-${attributeValue}-desktop) !important;
       ${generatedCssPropertyName ? `${generatedCssPropertyName}: var(--${cssPropertyPrefix}-${attributeValue}-desktop)` : ""}
     }
   }
-  ${selector(selectorAttributeName, attributeValue, "laptop")} {
+  ${selector(attributeName, attributeValue, "laptop")} {
   /* Laptop - 1025px*/
   @media only screen and (min-width: 64.0625em) {
       ${attributeName}: var(--${cssPropertyPrefix}-${attributeValue}-desktop) !important;
       ${generatedCssPropertyName ? `${generatedCssPropertyName}: var(--${cssPropertyPrefix}-${attributeValue}-desktop)` : ""}
     }
   }
-  ${selector(selectorAttributeName, attributeValue, "desktop")} {
+  ${selector(attributeName, attributeValue, "desktop")} {
   /* Desktop - 1025px*/
   @media only screen and (min-width: 64.0625em) {
       ${attributeName}: var(--${cssPropertyPrefix}-${attributeValue}-desktop) !important;
@@ -2270,7 +2267,7 @@ let Span = _Span;
 if (!customElements.get("px-span")) {
   customElements.define("px-span", Span);
 }
-const containerCss = ':host{display:block}.container{font-family:var(--px-font-family);background-color:var(--background-color);border-radius:var(--px-radius-main);box-sizing:border-box;height:100%}:host([background-image]) .container{background-image:var(--background-image)}:host([background-gradient]) .container{background-image:var(--background-gradient)}:host([inverted]) .container{background-color:var(--background-color-inverted);color:var(--px-color-text-neutral-inverted)}.border-none{border:none}.border-s{border:var(--px-size-border-s) solid var(--border-color)}.border-m{border:var(--px-size-border-m) solid var(--border-color)}.border-l{border:var(--px-size-border-l) solid var(--border-color)}.border-side-top{border-bottom-style:none;border-right-style:none;border-left-style:none}.border-side-right{border-top-style:none;border-bottom-style:none;border-left-style:none}.border-side-bottom{border-top-style:none;border-right-style:none;border-left-style:none}.border-side-left{border-top-style:none;border-right-style:none;border-bottom-style:none}.border-side-block{border-inline-style:none}.border-side-inline{border-block-style:none}:host([inverted]) .border-s,:host([inverted]) .border-m,:host([inverted]) .border-l{border-color:var(--border-color-inverted)}.border-radius-main{border-radius:var(--px-radius-main)}.border-radius-pill{border-radius:var(--px-radius-pill)}.no-border-radius-top{border-top-left-radius:var(--px-radius-none);border-top-right-radius:var(--px-radius-none)}.no-border-radius-right{border-top-right-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-bottom{border-bottom-left-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-left{border-top-left-radius:var(--px-radius-none);border-bottom-left-radius:var(--px-radius-none)}.no-border-radius-all,.border-radius-none{border-radius:var(--px-radius-none)}.bgimg{background-repeat:no-repeat}.background-size-cover{background-size:cover;background-position:center center}.background-size-contain{background-size:contain}.box-shadow-none{box-shadow:none}.box-shadow-s{box-shadow:0 1px 2px #2525251f}.box-shadow-m{box-shadow:0 4px 6px -1px #25252514}.box-shadow-l{box-shadow:0 10px 15px -3px #25252514}.box-shadow-xl{box-shadow:0 20px 25px -5px #25252514}.anchored{position:relative}::slotted([slot="anchor-right"]),::slotted([slot="anchor-left"]),::slotted([slot="anchor-full"]){position:absolute;top:0}::slotted([slot="anchor-right"]),::slotted([slot="anchor-left"]){transform:translateY(-50%);z-index:3}::slotted([slot="anchor-right"]){right:var( --container-anchor-offset--mobile, var( --container-padding-right, var(--container-padding-inline, var(--container-padding)) ) )}::slotted([slot="anchor-left"]){left:var( --container-anchor-offset--mobile, var( --container-padding-left, var(--container-padding-inline, var(--container-padding)) ) )}::slotted([slot="anchor-full"]){transform:translateY(-100%);right:0;left:0;text-align:center;z-index:2}::slotted(px-vstack:only-of-type),::slotted(px-hstack:only-of-type),::slotted(px-stack:only-of-type),::slotted(px-grid:only-of-type){height:100%}:host([anchor-spacing]){margin-top:var(--container-anchor-spacing--mobile)}.border-s ::slotted([slot="anchor-full"]){right:calc(var(--px-size-border-s) * -1);left:calc(var(--px-size-border-s) * -1)}.border-m ::slotted([slot="anchor-full"]){right:calc(var(--px-size-border-m) * -1);left:calc(var(--px-size-border-m) * -1)}.border-l ::slotted([slot="anchor-full"]){right:calc(var(--px-size-border-l) * -1);left:calc(var(--px-size-border-l) * -1)}:host([subgrid-rows]){display:contents}:host([subgrid-rows]) .container{display:grid;grid-template-rows:subgrid;grid-row:span var(--subgrid-rows)}:host([subgrid-rows]):host([grow]) .container{flex-grow:var(--grow-value)}:host([subgrid-rows]):host([shrink]) .container{flex-shrink:var(--shrink-value)}:host([subgrid-rows]):host([basis]) .container{flex-basis:var(--basis-value)}:host([subgrid-rows]):host([align-self]) .container{align-self:var(--align-self-value)}:host([subgrid-rows]):host([col-span]) .container{grid-column:span var(--col-span-value) / span var(--col-span-value)}:host([subgrid-rows]):host([justify-self]) .container{justify-self:var(--justify-self-value)}:host([subgrid-rows]):host([order]) .container{order:var(--order-value)}@media only screen and (max-width: 47.938em){.container{background-color:var(--background-color--mobile, var(--background-color))}:host([background-image--mobile]) .container{background-image:var(--background-image--mobile, var(--background-image))}:host([background-gradient--mobile]) .container{background-image:var( --background-gradient--mobile, var(--background-gradient) )}:host([inverted]) .container{background-color:var( --background-color-inverted--mobile, var(--background-color-inverted) )}.border-side-top--mobile{border-top-style:solid;border-right-style:none;border-bottom-style:none;border-left-style:none}.border-side-right--mobile{border-top-style:none;border-right-style:solid;border-bottom-style:none;border-left-style:none}.border-side-bottom--mobile{border-top-style:none;border-right-style:none;border-bottom-style:solid;border-left-style:none}.border-side-left--mobile{border-top-style:none;border-right-style:none;border-bottom-style:none;border-left-style:solid}.border-side-block--mobile{border-inline-style:none;border-block-style:solid}.border-side-inline--mobile{border-block-style:none;border-inline-style:solid}.no-border-radius-top--mobile{border-top-left-radius:var(--px-radius-none);border-top-right-radius:var(--px-radius-none)}.no-border-radius-right--mobile{border-top-right-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-bottom--mobile{border-bottom-left-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-left--mobile{border-top-left-radius:var(--px-radius-none);border-bottom-left-radius:var(--px-radius-none)}.no-border-radius-all--mobile{border-radius:var(--px-radius-none)}:host([subgrid-rows]):host([grow--mobile]) .container{flex-grow:var(--grow--mobile-value)}:host([subgrid-rows]):host([shrink--mobile]) .container{flex-shrink:var(--shrink--mobile-value)}:host([subgrid-rows]):host([basis--mobile]) .container{flex-basis:var(--basis--mobile-value)}:host([subgrid-rows]):host([align-self--mobile]) .container{align-self:var(--align-self--mobile-value)}:host([subgrid-rows]):host([col-span--mobile]) .container{grid-column:span var(--col-span--mobile-value) / span var(--col-span--mobile-value)}:host([subgrid-rows]):host([justify-self--mobile]) .container{justify-self:var(--justify-self--mobile-value)}:host([subgrid-rows]):host([order--mobile]) .container{order:var(--order--mobile-value)}}@media only screen and (min-width: 48em) and (max-width: 64em){.container{background-color:var(--background-color--tablet, var(--background-color))}:host([background-image--tablet]) .container{background-image:var(--background-image--tablet, var(--background-image))}:host([background-gradient--tablet]) .container{background-image:var( --background-gradient--tablet, var(--background-gradient) )}:host([inverted]) .container{background-color:var( --background-color-inverted--tablet, var(--background-color-inverted) )}.no-border-radius-top--tablet{border-top-left-radius:var(--px-radius-none);border-top-right-radius:var(--px-radius-none)}.no-border-radius-right--tablet{border-top-right-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-bottom--tablet{border-bottom-left-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-left--tablet{border-top-left-radius:var(--px-radius-none);border-bottom-left-radius:var(--px-radius-none)}.no-border-radius-all--tablet{border-radius:var(--px-radius-none)}.border-side-top--tablet{border-top-style:solid;border-right-style:none;border-bottom-style:none;border-left-style:none}.border-side-right--tablet{border-top-style:none;border-right-style:solid;border-bottom-style:none;border-left-style:none}.border-side-bottom--tablet{border-top-style:none;border-right-style:none;border-bottom-style:solid;border-left-style:none}.border-side-left--tablet{border-top-style:none;border-right-style:none;border-bottom-style:none;border-left-style:solid}.border-side-block--tablet{border-inline-style:none;border-block-style:solid}.border-side-inline--tablet{border-block-style:none;border-inline-style:solid}::slotted([slot="anchor-right"]){right:var( --container-anchor-offset--tablet, var( --container-padding-right, var(--container-padding-inline, var(--container-padding)) ) )}::slotted([slot="anchor-left"]){left:var( --container-anchor-offset--tablet, var( --container-padding-left, var(--container-padding-inline, var(--container-padding)) ) )}:host([anchor-spacing]){margin-top:var(--container-anchor-spacing--tablet)}:host([subgrid-rows]):host([col-span--tablet]) .container{grid-column:span var(--col-span--tablet-value) / span var(--col-span--tablet-value)}:host([subgrid-rows]):host([grow--tablet]) .container{flex-grow:var(--grow--tablet-value)}:host([subgrid-rows]):host([shrink--tablet]) .container{flex-shrink:var(--shrink--tablet-value)}:host([subgrid-rows]):host([basis--tablet]) .container{flex-basis:var(--basis--tablet-value)}:host([subgrid-rows]):host([align-self--tablet]) .container{align-self:var(--align-self--tablet-value)}:host([subgrid-rows]):host([justify-self--tablet]) .container{justify-self:var(--justify-self--tablet-value)}:host([subgrid-rows]):host([order--tablet]) .container{order:var(--order--tablet-value)}}@media only screen and (min-width: 1025px) and (max-width: 1440px){:host([subgrid-rows]):host([col-span--laptop]) .container{grid-column:span var(--col-span--laptop-value) / span var(--col-span--laptop-value)}:host([subgrid-rows]):host([grow--laptop]) .container{flex-grow:var(--grow--laptop-value)}:host([subgrid-rows]):host([shrink--laptop]) .container{flex-shrink:var(--shrink--laptop-value)}:host([subgrid-rows]):host([basis--laptop]) .container{flex-basis:var(--basis--laptop-value)}:host([subgrid-rows]):host([align-self--laptop]) .container{align-self:var(--align-self--laptop-value)}:host([subgrid-rows]):host([justify-self--laptop]) .container{justify-self:var(--justify-self--laptop-value)}:host([subgrid-rows]):host([order--laptop]) .container{order:var(--order--laptop-value)}}@media only screen and (min-width: 64.0625em){.container{background-color:var(--background-color--laptop, var(--background-color))}:host([background-image--laptop]) .container{background-image:var(--background-image--laptop, var(--background-image))}:host([background-gradient--laptop]) .container{background-image:var( --background-gradient--laptop, var(--background-gradient) )}:host([inverted]) .container{background-color:var( --background-color-inverted--laptop, var(--background-color-inverted) )}.no-border-radius-top--laptop{border-top-left-radius:var(--px-radius-none);border-top-right-radius:var(--px-radius-none)}.no-border-radius-right--laptop{border-top-right-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-bottom--laptop{border-bottom-left-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-left--laptop{border-top-left-radius:var(--px-radius-none);border-bottom-left-radius:var(--px-radius-none)}.no-border-radius-all--laptop{border-radius:var(--px-radius-none)}::slotted([slot="anchor-right"]){right:var( --container-anchor-offset--laptop, var( --container-padding-right, var(--container-padding-inline, var(--container-padding)) ) )}::slotted([slot="anchor-left"]){left:var( --container-anchor-offset--laptop, var( --container-padding-left, var(--container-padding-inline, var(--container-padding)) ) )}:host([anchor-spacing]){margin-top:var(--container-anchor-spacing--laptop)}.border-side-top--laptop{border-top-style:solid;border-right-style:none;border-bottom-style:none;border-left-style:none}.border-side-right--laptop{border-top-style:none;border-right-style:solid;border-bottom-style:none;border-left-style:none}.border-side-bottom--laptop{border-top-style:none;border-right-style:none;border-bottom-style:solid;border-left-style:none}.border-side-left--laptop{border-top-style:none;border-right-style:none;border-bottom-style:none;border-left-style:solid}.border-side-block--laptop{border-inline-style:none;border-block-style:solid}.border-side-inline--laptop{border-block-style:none;border-inline-style:solid}}@media screen and (min-width: 1441px){:host([subgrid-rows]):host([col-span--desktop]) .container{grid-column:span var(--col-span--desktop-value) / span var(--col-span--desktop-value)}:host([subgrid-rows]):host([grow--desktop]) .container{flex-grow:var(--grow--desktop-value)}:host([subgrid-rows]):host([shrink--desktop]) .container{flex-shrink:var(--shrink--desktop-value)}:host([subgrid-rows]):host([basis--desktop]) .container{flex-basis:var(--basis--desktop-value)}:host([subgrid-rows]):host([align-self--desktop]) .container{align-self:var(--align-self--desktop-value)}:host([subgrid-rows]):host([justify-self--desktop]) .container{justify-self:var(--justify-self--desktop-value)}:host([subgrid-rows]):host([order--desktop]) .container{order:var(--order--desktop-value)}}';
+const containerCss = ':host{display:block}.container{font-family:var(--px-font-family);background-color:var(--background-color);border-radius:var(--px-radius-main);box-sizing:border-box;height:100%}:host([background-image]) .container{background-image:var(--background-image)}:host([background-gradient]) .container{background-image:var(--background-gradient)}:host([inverted]) .container{background-color:var(--background-color-inverted);color:var(--px-color-text-neutral-inverted)}.border-none{border:none}.border-s{border:var(--px-size-border-s) solid var(--border-color)}.border-m{border:var(--px-size-border-m) solid var(--border-color)}.border-l{border:var(--px-size-border-l) solid var(--border-color)}.border-side-top{border-bottom-style:none;border-right-style:none;border-left-style:none}.border-side-right{border-top-style:none;border-bottom-style:none;border-left-style:none}.border-side-bottom{border-top-style:none;border-right-style:none;border-left-style:none}.border-side-left{border-top-style:none;border-right-style:none;border-bottom-style:none}.border-side-block{border-inline-style:none}.border-side-inline{border-block-style:none}:host([inverted]) .border-s,:host([inverted]) .border-m,:host([inverted]) .border-l{border-color:var(--border-color-inverted)}.border-radius-main{border-radius:var(--px-radius-main)}.border-radius-pill{border-radius:var(--px-radius-pill)}.no-border-radius-top{border-top-left-radius:var(--px-radius-none);border-top-right-radius:var(--px-radius-none)}.no-border-radius-right{border-top-right-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-bottom{border-bottom-left-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-left{border-top-left-radius:var(--px-radius-none);border-bottom-left-radius:var(--px-radius-none)}.no-border-radius-all,.border-radius-none{border-radius:var(--px-radius-none)}.bgimg{background-repeat:no-repeat}.background-size-cover{background-size:cover;background-position:center center}.background-size-contain{background-size:contain}.box-shadow-none{box-shadow:none}.box-shadow-s{box-shadow:0 1px 2px #2525251f}.box-shadow-m{box-shadow:0 4px 6px -1px #25252514}.box-shadow-l{box-shadow:0 10px 15px -3px #25252514}.box-shadow-xl{box-shadow:0 20px 25px -5px #25252514}.anchored{position:relative}::slotted([slot="anchor-right"]),::slotted([slot="anchor-left"]),::slotted([slot="anchor-full"]){position:absolute;top:0}::slotted([slot="anchor-right"]),::slotted([slot="anchor-left"]){transform:translateY(-50%);z-index:3}::slotted([slot="anchor-right"]){right:var( --container-anchor-offset--mobile, var( --container-padding-right, var(--container-padding-inline, var(--container-padding)) ) )}::slotted([slot="anchor-left"]){left:var( --container-anchor-offset--mobile, var( --container-padding-left, var(--container-padding-inline, var(--container-padding)) ) )}::slotted([slot="anchor-full"]){transform:translateY(-100%);right:0;left:0;text-align:center;z-index:2}::slotted(px-vstack:only-of-type),::slotted(px-hstack:only-of-type),::slotted(px-stack:only-of-type),::slotted(px-grid:only-of-type){height:100%}:host([anchor-spacing]){margin-top:var(--container-anchor-spacing--mobile)}.border-s ::slotted([slot="anchor-full"]){right:calc(var(--px-size-border-s) * -1);left:calc(var(--px-size-border-s) * -1)}.border-m ::slotted([slot="anchor-full"]){right:calc(var(--px-size-border-m) * -1);left:calc(var(--px-size-border-m) * -1)}.border-l ::slotted([slot="anchor-full"]){right:calc(var(--px-size-border-l) * -1);left:calc(var(--px-size-border-l) * -1)}@media only screen and (max-width: 47.938em){.container{background-color:var(--background-color--mobile, var(--background-color))}:host([background-image--mobile]) .container{background-image:var(--background-image--mobile, var(--background-image))}:host([background-gradient--mobile]) .container{background-image:var( --background-gradient--mobile, var(--background-gradient) )}:host([inverted]) .container{background-color:var( --background-color-inverted--mobile, var(--background-color-inverted) )}.border-side-top--mobile{border-top-style:solid;border-right-style:none;border-bottom-style:none;border-left-style:none}.border-side-right--mobile{border-top-style:none;border-right-style:solid;border-bottom-style:none;border-left-style:none}.border-side-bottom--mobile{border-top-style:none;border-right-style:none;border-bottom-style:solid;border-left-style:none}.border-side-left--mobile{border-top-style:none;border-right-style:none;border-bottom-style:none;border-left-style:solid}.border-side-block--mobile{border-inline-style:none;border-block-style:solid}.border-side-inline--mobile{border-block-style:none;border-inline-style:solid}.no-border-radius-top--mobile{border-top-left-radius:var(--px-radius-none);border-top-right-radius:var(--px-radius-none)}.no-border-radius-right--mobile{border-top-right-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-bottom--mobile{border-bottom-left-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-left--mobile{border-top-left-radius:var(--px-radius-none);border-bottom-left-radius:var(--px-radius-none)}.no-border-radius-all--mobile{border-radius:var(--px-radius-none)}}@media only screen and (min-width: 48em) and (max-width: 64em){.container{background-color:var(--background-color--tablet, var(--background-color))}:host([background-image--tablet]) .container{background-image:var(--background-image--tablet, var(--background-image))}:host([background-gradient--tablet]) .container{background-image:var( --background-gradient--tablet, var(--background-gradient) )}:host([inverted]) .container{background-color:var( --background-color-inverted--tablet, var(--background-color-inverted) )}.no-border-radius-top--tablet{border-top-left-radius:var(--px-radius-none);border-top-right-radius:var(--px-radius-none)}.no-border-radius-right--tablet{border-top-right-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-bottom--tablet{border-bottom-left-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-left--tablet{border-top-left-radius:var(--px-radius-none);border-bottom-left-radius:var(--px-radius-none)}.no-border-radius-all--tablet{border-radius:var(--px-radius-none)}.border-side-top--tablet{border-top-style:solid;border-right-style:none;border-bottom-style:none;border-left-style:none}.border-side-right--tablet{border-top-style:none;border-right-style:solid;border-bottom-style:none;border-left-style:none}.border-side-bottom--tablet{border-top-style:none;border-right-style:none;border-bottom-style:solid;border-left-style:none}.border-side-left--tablet{border-top-style:none;border-right-style:none;border-bottom-style:none;border-left-style:solid}.border-side-block--tablet{border-inline-style:none;border-block-style:solid}.border-side-inline--tablet{border-block-style:none;border-inline-style:solid}::slotted([slot="anchor-right"]){right:var( --container-anchor-offset--tablet, var( --container-padding-right, var(--container-padding-inline, var(--container-padding)) ) )}::slotted([slot="anchor-left"]){left:var( --container-anchor-offset--tablet, var( --container-padding-left, var(--container-padding-inline, var(--container-padding)) ) )}:host([anchor-spacing]){margin-top:var(--container-anchor-spacing--tablet)}}@media only screen and (min-width: 64.0625em){.container{background-color:var(--background-color--laptop, var(--background-color))}:host([background-image--laptop]) .container{background-image:var(--background-image--laptop, var(--background-image))}:host([background-gradient--laptop]) .container{background-image:var( --background-gradient--laptop, var(--background-gradient) )}:host([inverted]) .container{background-color:var( --background-color-inverted--laptop, var(--background-color-inverted) )}.no-border-radius-top--laptop{border-top-left-radius:var(--px-radius-none);border-top-right-radius:var(--px-radius-none)}.no-border-radius-right--laptop{border-top-right-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-bottom--laptop{border-bottom-left-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-left--laptop{border-top-left-radius:var(--px-radius-none);border-bottom-left-radius:var(--px-radius-none)}.no-border-radius-all--laptop{border-radius:var(--px-radius-none)}::slotted([slot="anchor-right"]){right:var( --container-anchor-offset--laptop, var( --container-padding-right, var(--container-padding-inline, var(--container-padding)) ) )}::slotted([slot="anchor-left"]){left:var( --container-anchor-offset--laptop, var( --container-padding-left, var(--container-padding-inline, var(--container-padding)) ) )}:host([anchor-spacing]){margin-top:var(--container-anchor-spacing--laptop)}.border-side-top--laptop{border-top-style:solid;border-right-style:none;border-bottom-style:none;border-left-style:none}.border-side-right--laptop{border-top-style:none;border-right-style:solid;border-bottom-style:none;border-left-style:none}.border-side-bottom--laptop{border-top-style:none;border-right-style:none;border-bottom-style:solid;border-left-style:none}.border-side-left--laptop{border-top-style:none;border-right-style:none;border-bottom-style:none;border-left-style:solid}.border-side-block--laptop{border-inline-style:none;border-block-style:solid}.border-side-inline--laptop{border-block-style:none;border-inline-style:solid}}';
 const containerStyles = new CSSStyleSheet();
 containerStyles.replaceSync(containerCss);
 const anchorSpacingValues = [
@@ -2279,20 +2276,6 @@ const anchorSpacingValues = [
   "has-ribbon",
   "neighbor-has-ribbon"
 ];
-const subgridRowsValues = [
-  "1",
-  "2",
-  "3",
-  "4",
-  "5",
-  "6",
-  "7",
-  "8",
-  "9",
-  "10",
-  "11",
-  "12"
-];
 const attributeBreakpointCSSSelector$3 = (attributeName, attributeValue, device) => `:host([${attributeName}${device ? `--${device}` : ""}='${attributeValue}']) .container`;
 const paddingPrefix$1 = "px-padding";
 const containerBreakpoints = [
@@ -2340,17 +2323,9 @@ const containerBreakpoints = [
     paddingValues,
     paddingPrefix$1,
     "--container-padding-left"
-  ),
-  cssTokenBreakpoints(
-    "gap",
-    attributeBreakpointCSSSelector$3,
-    gapValues,
-    "px-spacing",
-    void 0,
-    "subgrid-gap"
   )
 ];
-const _Container = class _Container extends WithExtraAttributes {
+const _Container = class _Container extends VerticallyExtendedElement {
   constructor() {
     super(containerStyles, ...containerBreakpoints);
     this.template = () => `<div class="container">
@@ -2361,7 +2336,6 @@ const _Container = class _Container extends WithExtraAttributes {
     </div>`;
     this._bgObserver = null;
     this._isInViewport = false;
-    this.contentObserver = null;
     this.shadowRoot.innerHTML = this.template();
   }
   static get observedAttributes() {
@@ -2395,11 +2369,11 @@ const _Container = class _Container extends WithExtraAttributes {
       "box-shadow",
       "anchor-offset",
       "anchor-spacing",
-      "inverted",
-      "subgrid-rows"
+      "inverted"
     ];
   }
   connectedCallback() {
+    super.connectedCallback();
     if (!this.padding) {
       this.padding = "m";
     }
@@ -2435,9 +2409,9 @@ const _Container = class _Container extends WithExtraAttributes {
     this._bgObserver.observe(this.$el);
   }
   disconnectedCallback() {
-    var _a, _b;
+    var _a;
     (_a = this._bgObserver) == null ? void 0 : _a.disconnect();
-    (_b = this.contentObserver) == null ? void 0 : _b.disconnect();
+    this.contentObserver.disconnect();
   }
   attributeChangedCallback(attrName, oldValue, newValue) {
     if (oldValue !== newValue) {
@@ -2515,14 +2489,6 @@ const _Container = class _Container extends WithExtraAttributes {
         case "anchor-spacing":
           this.updateAnchorSpacing(oldValue, newValue, anchorSpacingValues);
           break;
-        case "subgrid-rows":
-          this.updateSubgridRows(
-            attrName,
-            oldValue,
-            newValue,
-            subgridRowsValues
-          );
-          break;
         default:
           super.attributeChangedCallback(attrName, oldValue, newValue);
           break;
@@ -2704,19 +2670,6 @@ const _Container = class _Container extends WithExtraAttributes {
     updateAnchorSpacingStyle(oldValue);
     updateAnchorSpacingStyle(newValue);
   }
-  updateSubgridRows(attrName, oldValue, newValue, attrValues) {
-    if (!checkName(attrValues, newValue)) {
-      log(
-        `${newValue} is not an allowed ${attrName} value for ${this.tagName.toLowerCase()}`
-      );
-    } else {
-      this.style.setProperty(`--${attrName}`, newValue);
-    }
-  }
-  get $el() {
-    var _a;
-    return (_a = this == null ? void 0 : this.shadowRoot) == null ? void 0 : _a.querySelector(".container");
-  }
   get $slotAnchor() {
     return this.querySelector('[slot^="anchor"]');
   }
@@ -3057,44 +3010,10 @@ const _Container = class _Container extends WithExtraAttributes {
     this.setAttribute("anchor-spacing", value);
   }
   get inverted() {
-    return this.hasAttribute("inverted");
+    return this.getAttribute("inverted");
   }
   set inverted(value) {
-    if (value) {
-      this.setAttribute("inverted", "");
-    } else {
-      this.removeAttribute("inverted");
-    }
-  }
-  get subgridRows() {
-    return this.getAttribute("subgrid-rows");
-  }
-  set subgridRows(value) {
-    this.setAttribute("subgrid-rows", value);
-  }
-  get subgridGap() {
-    return this.getAttribute("subgrid-gap");
-  }
-  set subgridGap(value) {
-    this.setAttribute("subgrid-gap", value);
-  }
-  get subgridGapMobile() {
-    return this.getAttribute("subgrid-gap--mobile");
-  }
-  set subgridGapMobile(value) {
-    this.setAttribute("subgrid-gap--mobile", value);
-  }
-  get subgridGapTablet() {
-    return this.getAttribute("subgrid-gap--tablet");
-  }
-  set subgridGapTablet(value) {
-    this.setAttribute("subgrid-gap--tablet", value);
-  }
-  get subgridGapLaptop() {
-    return this.getAttribute("subgrid-gap--laptop");
-  }
-  set subgridGapLaptop(value) {
-    this.setAttribute("subgrid-gap--laptop", value);
+    this.setAttribute("inverted", value);
   }
 };
 _Container.nativeName = "div";
@@ -3126,7 +3045,6 @@ const _ActionLink = class _ActionLink extends PxElement {
   }
   attributeChangedCallback(name, oldValue, newValue) {
     if ((name === "icon-name" || name === "icon-from" || name === "label") && !newValue) {
-      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") {
@@ -3297,7 +3215,6 @@ const _AgGridTableThButton = class _AgGridTableThButton extends PxElement {
   updateSorting(oldValue, newValue, attrValue) {
     var _a, _b;
     if (!checkName(attrValue, newValue)) {
-      log(`${newValue} is not an allowed sorting value.`);
       return;
     }
     if (oldValue !== null && oldValue !== "") {
@@ -3761,7 +3678,6 @@ bannerStyles.replaceSync(bannerCss);
 const _Banner = class _Banner extends VerticallyExtendedElement {
   constructor() {
     super(bannerStyles);
-    __privateAdd(this, _Banner_instances);
     this.template = () => `<div class="banner">
       <div class="contrast-helper"></div>
       <px-container class="banner-container" padding--mobile="m" border-radius="main" >
@@ -3808,7 +3724,6 @@ const _Banner = class _Banner extends VerticallyExtendedElement {
   connectedCallback() {
     var _a;
     (_a = super.connectedCallback) == null ? void 0 : _a.call(this);
-    __privateMethod(this, _Banner_instances, applyReducedPadding_fn).call(this);
     this.createGridTemplateAreas();
     this.createGridding();
     this.observer = new MutationObserver(() => {
@@ -3849,9 +3764,6 @@ const _Banner = class _Banner extends VerticallyExtendedElement {
           break;
         case "reduced":
           this.$el.toggleAttribute("reduced", newValue !== null);
-          if (this.isConnected) {
-            __privateMethod(this, _Banner_instances, applyReducedPadding_fn).call(this);
-          }
           this.createGridTemplateAreas();
           break;
         case "has-gridding":
@@ -4082,48 +3994,42 @@ const _Banner = class _Banner extends VerticallyExtendedElement {
     }
   }
 };
-_Banner_instances = new WeakSet();
-applyReducedPadding_fn = function() {
-  this.$container.setAttribute("padding", this.reduced ? "m" : "l");
-};
 _Banner.nativeName = "div";
 let Banner = _Banner;
 if (!customElements.get("px-banner")) {
   customElements.define("px-banner", Banner);
 }
 const breadcrumbCss = `:host{display:block}:host *{box-sizing:border-box}.breadcrumb{font-family:var(--px-font-family);color:var(--px-color-text-neutral-default);margin:calc(var(--px-spacing-s-mobile) * -1) 0 0 0;padding:0}.breadcrumb div[role=list]{display:flex;flex-wrap:wrap;align-items:center}.breadcrumb ::slotted(px-breadcrumb-item){margin-top:var(--px-spacing-s-mobile)}.breadcrumb ::slotted(px-breadcrumb-item:not(:last-child)){display:flex;align-items:center;margin-right:var(--px-spacing-xs-mobile)}.breadcrumb ::slotted(px-breadcrumb-item:not(:last-child)):after{display:inline-block;content:"";width:16px;height:16px;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:cover;mask-size:cover;-webkit-mask-position:50% 50%;mask-position:50% 50%;-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M5.90255 3.61987C5.6515 3.8749 5.6515 4.2884 5.90255 4.54343L9.30512 8.00002L5.90255 11.4566C5.6515 11.7116 5.6515 12.1251 5.90255 12.3802C6.1536 12.6352 6.56063 12.6352 6.81169 12.3802L10.6688 8.4618C10.9199 8.20677 10.9199 7.79327 10.6688 7.53823L6.81169 3.61987C6.56063 3.36483 6.1536 3.36483 5.90255 3.61987Z' fill='%23252525'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M5.90255 3.61987C5.6515 3.8749 5.6515 4.2884 5.90255 4.54343L9.30512 8.00002L5.90255 11.4566C5.6515 11.7116 5.6515 12.1251 5.90255 12.3802C6.1536 12.6352 6.56063 12.6352 6.81169 12.3802L10.6688 8.4618C10.9199 8.20677 10.9199 7.79327 10.6688 7.53823L6.81169 3.61987C6.56063 3.36483 6.1536 3.36483 5.90255 3.61987Z' fill='%23252525'/%3E%3C/svg%3E");background-color:currentColor;color:var(--px-color-icon-neutral-default);margin-left:var(--px-spacing-xs-mobile)}@media only screen and (min-width: 48em){.breadcrumb{margin:calc(var(--px-spacing-s-tablet) * -1) 0 0 0}.breadcrumb ::slotted(px-breadcrumb-item){margin-top:var(--px-spacing-s-tablet)}.breadcrumb ::slotted(px-breadcrumb-item:not(:last-child)){margin-right:var(--px-spacing-xs-tablet)}.breadcrumb ::slotted(px-breadcrumb-item:not(:last-child)):after{margin-left:var(--px-spacing-xs-tablet)}}@media only screen and (min-width: 64.0625em){.breadcrumb{margin:calc(var(--px-spacing-s-laptop) * -1) 0 0 0}.breadcrumb ::slotted(px-breadcrumb-item){margin-top:var(--px-spacing-s-laptop)}.breadcrumb ::slotted(px-breadcrumb-item:not(:last-child)){margin-right:var(--px-spacing-xs-laptop)}.breadcrumb ::slotted(px-breadcrumb-item:not(:last-child)):after{margin-left:var(--px-spacing-xs-laptop)}}@media only screen and (min-width: 90.0625em){.breadcrumb{margin:calc(var(--px-spacing-s-desktop) * -1) 0 0 0}.breadcrumb ::slotted(px-breadcrumb-item){margin-top:var(--px-spacing-s-desktop)}.breadcrumb ::slotted(px-breadcrumb-item:not(:last-child)){margin-right:var(--px-spacing-xs-desktop)}.breadcrumb ::slotted(px-breadcrumb-item:not(:last-child)):after{margin-left:var(--px-spacing-xs-desktop)}}:host([inverted]) .breadcrumb{color:var(--px-color-text-neutral-inverted)}:host([inverted]) .breadcrumb ::slotted(px-breadcrumb-item:not(:last-child)):after{color:var(--px-color-icon-neutral-inverted)}`;
-const breadcrumbItemCss = ":host{display:block}:host *{box-sizing:border-box}.breadcrumb-item{display:flex}:host:has(px-a[variant=icon-link][color=inherit]) .breadcrumb-item{color:var(--px-color-icon-accent-default)}:host:has(px-a[variant=icon-link][color=inherit]) .breadcrumb-item:hover{color:var(--px-color-text-state-hover-default)}:host:not(:has(px-a[variant=icon-link][color=inherit])) .breadcrumb-item{line-height:var(--px-font-line-height-s);font-size:var(--px-text-size-link-s-mobile)}@media only screen and (min-width: 48em){:host:not(:has(px-a[variant=icon-link][color=inherit])) .breadcrumb-item{font-size:var(--px-text-size-link-s-tablet)}}@media only screen and (min-width: 64.0625em){:host:not(:has(px-a[variant=icon-link][color=inherit])) .breadcrumb-item{font-size:var(--px-text-size-link-s-laptop)}}@media only screen and (min-width: 90.0625em){:host:not(:has(px-a[variant=icon-link][color=inherit])) .breadcrumb-item{font-size:var(--px-text-size-link-s-desktop)}}:host([inverted]):has(px-a[variant=icon-link][color=inherit]) .breadcrumb-item{color:var(--px-color-icon-accent-inverted)}:host([inverted]):has(px-a[variant=icon-link][color=inherit]) .breadcrumb-item:hover{color:var(--px-color-text-state-hover-inverted)}";
-const breadcrumbItemStyles = new CSSStyleSheet();
-breadcrumbItemStyles.replaceSync(breadcrumbItemCss);
-const BREADCRUMB_ITEM_CONNECTED_EVENT = "px-breadcrumb-item-connected";
-const _BreadcrumbItem = class _BreadcrumbItem extends PxElement {
-  constructor() {
-    super(breadcrumbItemStyles);
-    this.template = () => `<div class="breadcrumb-item" role="listitem"><slot></slot></div>`;
-    if (this.shadowRoot) {
-      this.shadowRoot.innerHTML = this.template();
-    }
+const breadcrumbStyles = new CSSStyleSheet();
+breadcrumbStyles.replaceSync(breadcrumbCss);
+class Breadcrumb extends WithExtraAttributes {
+  template() {
+    return `
+      <nav class="breadcrumb">
+        <div role="list">
+          <slot></slot>
+        </div>
+      </nav>
+    `;
   }
-  static get observedAttributes() {
-    return [...super.observedAttributes, "inverted"];
+  constructor() {
+    super(breadcrumbStyles);
+    this.shadowRoot.innerHTML = this.template();
   }
   connectedCallback() {
-    if (this.$icon) {
-      this.$icon.setAttribute("size", "s");
-    }
-    if (!this.$link) {
-      this.$el.setAttribute("aria-current", "page");
+    if (!this.ariaLabel) {
+      this.ariaLabel = "Breadcrumb";
     }
-    this.dispatchEvent(
-      new CustomEvent(BREADCRUMB_ITEM_CONNECTED_EVENT, {
-        bubbles: true,
-        composed: true
-      })
-    );
+  }
+  static get observedAttributes() {
+    return [...super.observedAttributes, "inverted", "aria-label"];
   }
   attributeChangedCallback(attrName, oldValue, newValue) {
     if (oldValue !== newValue) {
       switch (attrName) {
+        case "aria-label":
+          this.$el.setAttribute("aria-label", this.ariaLabel);
+          break;
         case "inverted":
           for (let i = 0; i < this.$children.length; i++) {
             if (!this.$children[i].hasAttribute("inverted")) {
@@ -4137,14 +4043,11 @@ const _BreadcrumbItem = class _BreadcrumbItem extends PxElement {
       }
     }
   }
-  get $link() {
-    return this.querySelector("px-a");
-  }
-  get $icon() {
-    return this.querySelector("px-icon");
+  get $el() {
+    return this.shadowRoot.querySelector(".breadcrumb");
   }
   get $children() {
-    return this.querySelectorAll("px-breadcrumb-item > *");
+    return this.querySelectorAll("px-breadcrumb > *");
   }
   get inverted() {
     return this.hasAttribute("inverted");
@@ -4156,50 +4059,50 @@ const _BreadcrumbItem = class _BreadcrumbItem extends PxElement {
       this.removeAttribute("inverted");
     }
   }
-};
-_BreadcrumbItem.nativeName = "div";
-let BreadcrumbItem = _BreadcrumbItem;
-if (!customElements.get("px-breadcrumb-item")) {
-  customElements.define("px-breadcrumb-item", BreadcrumbItem);
+  get ariaLabel() {
+    return this.getAttribute("aria-label");
+  }
+  set ariaLabel(value) {
+    if (value) {
+      this.setAttribute("aria-label", value);
+    } else {
+      this.removeAttribute("aria-label");
+    }
+  }
 }
-const breadcrumbStyles = new CSSStyleSheet();
-breadcrumbStyles.replaceSync(breadcrumbCss);
-class Breadcrumb extends WithExtraAttributes {
+if (!customElements.get("px-breadcrumb")) {
+  customElements.define("px-breadcrumb", Breadcrumb);
+}
+const breadcrumbItemCss = ":host{display:block}:host *{box-sizing:border-box}.breadcrumb-item{display:flex}:host:has(px-a[variant=icon-link][color=inherit]) .breadcrumb-item{color:var(--px-color-icon-accent-default)}:host:has(px-a[variant=icon-link][color=inherit]) .breadcrumb-item:hover{color:var(--px-color-text-state-hover-default)}:host:not(:has(px-a[variant=icon-link][color=inherit])) .breadcrumb-item{line-height:var(--px-font-line-height-s);font-size:var(--px-text-size-link-s-mobile)}@media only screen and (min-width: 48em){:host:not(:has(px-a[variant=icon-link][color=inherit])) .breadcrumb-item{font-size:var(--px-text-size-link-s-tablet)}}@media only screen and (min-width: 64.0625em){:host:not(:has(px-a[variant=icon-link][color=inherit])) .breadcrumb-item{font-size:var(--px-text-size-link-s-laptop)}}@media only screen and (min-width: 90.0625em){:host:not(:has(px-a[variant=icon-link][color=inherit])) .breadcrumb-item{font-size:var(--px-text-size-link-s-desktop)}}:host([inverted]):has(px-a[variant=icon-link][color=inherit]) .breadcrumb-item{color:var(--px-color-icon-accent-inverted)}:host([inverted]):has(px-a[variant=icon-link][color=inherit]) .breadcrumb-item:hover{color:var(--px-color-text-state-hover-inverted)}";
+const breadcrumbItemStyles = new CSSStyleSheet();
+breadcrumbItemStyles.replaceSync(breadcrumbItemCss);
+const _BreadcrumbItem = class _BreadcrumbItem extends PxElement {
   constructor() {
-    super(breadcrumbStyles);
-    __privateAdd(this, _Breadcrumb_instances);
-    this.shadowRoot.innerHTML = this.template();
+    super(breadcrumbItemStyles);
+    this.template = () => `<div class="breadcrumb-item" role="listitem"><slot></slot></div>`;
+    if (this.shadowRoot) {
+      this.shadowRoot.innerHTML = this.template();
+    }
   }
-  template() {
-    return `
-      <nav class="breadcrumb">
-        <div role="list">
-          <slot></slot>
-        </div>
-      </nav>
-    `;
+  static get observedAttributes() {
+    return [...super.observedAttributes, "inverted"];
   }
   connectedCallback() {
-    if (!this.ariaLabel) {
-      this.ariaLabel = "Breadcrumb";
+    if (this.$icon) {
+      this.$icon.setAttribute("size", "s");
+    }
+    if (!this.$link) {
+      this.$el.setAttribute("aria-current", "page");
     }
-    this.addEventListener(BREADCRUMB_ITEM_CONNECTED_EVENT, () => {
-      __privateMethod(this, _Breadcrumb_instances, applyInverted_fn).call(this);
-    });
-    __privateMethod(this, _Breadcrumb_instances, applyInverted_fn).call(this);
-  }
-  static get observedAttributes() {
-    return [...super.observedAttributes, "inverted", "aria-label"];
   }
   attributeChangedCallback(attrName, oldValue, newValue) {
     if (oldValue !== newValue) {
       switch (attrName) {
-        case "aria-label":
-          this.$el.setAttribute("aria-label", this.ariaLabel);
-          break;
         case "inverted":
-          if (this.isConnected) {
-            __privateMethod(this, _Breadcrumb_instances, applyInverted_fn).call(this);
+          for (let i = 0; i < this.$children.length; i++) {
+            if (!this.$children[i].hasAttribute("inverted")) {
+              this.$children[i].toggleAttribute("inverted");
+            }
           }
           break;
         default:
@@ -4208,11 +4111,14 @@ class Breadcrumb extends WithExtraAttributes {
       }
     }
   }
-  get $el() {
-    return this.shadowRoot.querySelector(".breadcrumb");
+  get $link() {
+    return this.querySelector("px-a");
+  }
+  get $icon() {
+    return this.querySelector("px-icon");
   }
   get $children() {
-    return this.querySelectorAll("px-breadcrumb > *");
+    return this.querySelectorAll("px-breadcrumb-item > *");
   }
   get inverted() {
     return this.hasAttribute("inverted");
@@ -4224,26 +4130,11 @@ class Breadcrumb extends WithExtraAttributes {
       this.removeAttribute("inverted");
     }
   }
-  get ariaLabel() {
-    return this.getAttribute("aria-label");
-  }
-  set ariaLabel(value) {
-    if (value) {
-      this.setAttribute("aria-label", value);
-    } else {
-      this.removeAttribute("aria-label");
-    }
-  }
-}
-_Breadcrumb_instances = new WeakSet();
-applyInverted_fn = function() {
-  const on = this.hasAttribute("inverted");
-  for (let i = 0; i < this.$children.length; i++) {
-    this.$children[i].toggleAttribute("inverted", on);
-  }
 };
-if (!customElements.get("px-breadcrumb")) {
-  customElements.define("px-breadcrumb", Breadcrumb);
+_BreadcrumbItem.nativeName = "div";
+let BreadcrumbItem = _BreadcrumbItem;
+if (!customElements.get("px-breadcrumb-item")) {
+  customElements.define("px-breadcrumb-item", BreadcrumbItem);
 }
 const buttonCss = `.btn{width:var(--button-extended--mobile, var(--button-extended, auto));display:inline-flex;vertical-align:middle;align-items:center;justify-content:center;font-family:var(--px-font-family);font-size:var(--px-text-size-label-m-mobile);line-height:var(--px-line-height-ratio-l);font-weight:var(--px-font-weight-title);text-align:center;gap:var(--px-spacing-2xs-mobile);cursor:pointer;text-decoration:none;--btn-transition: all .2s ease-in-out 0s;transition:var(--btn-transition);border:var(--px-size-border-m) solid transparent}.btn,.btn *{box-sizing:border-box}.btn ::slotted(px-icon){line-height:0}.btn:hover:not([disabled],[aria-disabled=true],.loading){border-color:var(--px-color-border-state-hover-default)}.btn:focus-visible:not([disabled],[aria-disabled=true]){outline-offset:var(--px-focus-offset-mobile);outline:var(--px-focus-outline-mobile) solid var(--px-color-border-focus-outline-default)}.btn:active:not([disabled],[aria-disabled=true],.loading){transform:scale(.95);border-color:var(--px-color-border-state-active-default);color:var(--px-color-text-brand-default);background:var(--px-color-background-state-hover-bordered-default)}.btn[disabled],.btn[aria-disabled=true]{cursor:default;pointer-events:none}.btn.loading{cursor:inherit}.btn.loading ::slotted(px-spinner){line-height:0}.btn:not(.secondary,.tertiary,.patch,.actionable-tag,.header-dropdown){color:var(--px-color-text-brand-inverted);background:var(--px-color-background-container-primary-default);min-height:var(--px-spacing-l-mobile);padding:var(--px-padding-xs-mobile) var(--px-padding-m-mobile);border-radius:var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-big) var(--px-radius-button-small)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag,.header-dropdown) ::slotted([slot="after"]){margin-right:calc(var(--px-padding-xs-mobile) * -1)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag,.header-dropdown) ::slotted([slot="before"]){margin-left:calc(var(--px-padding-xs-mobile) * -1)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag,.header-dropdown):hover:not([disabled],[aria-disabled=true],.loading){color:var(--px-color-text-brand-default);background:var(--px-color-background-state-hover-bordered-default)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag,.header-dropdown)[disabled],.btn:not(.secondary,.tertiary,.patch,.actionable-tag,.header-dropdown)[aria-disabled=true]{background:var(--px-color-background-state-disabled-default);color:var(--px-color-text-state-disabled-default)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag,.header-dropdown).loading{background:var(--px-color-background-state-disabled-default);color:var(--px-color-text-brand-default);border-color:transparent}.btn.secondary{color:var(--px-color-text-brand-default);background:var(--px-color-background-container-secondary-default);min-height:var(--px-spacing-l-mobile);padding:var(--px-padding-xs-mobile) var(--px-padding-m-mobile);border-radius:var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-big) var(--px-radius-button-small)}.btn.secondary:hover:not([disabled],[aria-disabled=true],.loading){color:var(--px-color-text-brand-default);background:var(--px-color-background-state-hover-bordered-default)}.btn.secondary[disabled],.btn.secondary[aria-disabled=true]{background:var(--px-color-background-state-disabled-default);color:var(--px-color-text-state-disabled-default)}.btn.secondary.loading{background:var(--px-color-background-state-disabled-default);color:var(--px-color-text-brand-default);border-color:transparent}.btn:not(.tertiary,.patch,.actionable-tag,.header-dropdown)[shape=alternative]{border-radius:var(--px-radius-button-small)}.btn:not(.tertiary,.patch,.actionable-tag,.header-dropdown)[shape=bottom-left]{border-radius:var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-big)}.btn:not(.tertiary,.patch,.actionable-tag,.header-dropdown)[shape=bottom-right],.btn:not(.tertiary,.patch,.actionable-tag,.header-dropdown)[shape=default]{border-radius:var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-big) var(--px-radius-button-small)}.btn.tertiary{background:none;color:var(--px-color-text-brand-default);border-radius:var(--px-radius-pill);border:var(--px-size-border-m) solid transparent;padding:var(--px-padding-2xs-mobile) 0;gap:var(--px-spacing-xs-mobile)}.btn.tertiary ::slotted(px-icon){display:flex;align-items:center;justify-content:center;width:var(--px-size-icon-xs);height:var(--px-size-icon-xs);padding:4px;border-radius:var(--px-radius-pill);background:var(--px-color-background-container-secondary-default);transition:var(--btn-transition)}.btn.tertiary:hover:not([disabled],[aria-disabled=true],.loading),.btn.tertiary:active:not([disabled],[aria-disabled=true],.loading){padding:var(--px-padding-2xs-mobile) var(--px-padding-s-mobile)}.btn.tertiary:hover:not([disabled],[aria-disabled=true],.loading) ::slotted(px-icon),.btn.tertiary:active:not([disabled],[aria-disabled=true],.loading) ::slotted(px-icon){background:transparent;margin:0 -8px;width:inherit;height:inherit}.btn.tertiary[disabled],.btn.tertiary[aria-disabled=true]{color:var(--px-color-text-state-disabled-default)}.btn.tertiary[disabled] ::slotted(px-icon),.btn.tertiary[aria-disabled=true] ::slotted(px-icon){background:var(--px-color-background-state-disabled-default)}.btn.tertiary.loading{color:var(--px-color-text-brand-default);border-color:transparent}.btn.tertiary.loading ::slotted(px-spinner){display:flex;align-items:center;justify-content:center;width:var(--px-size-icon-xs);height:var(--px-size-icon-xs);padding:4px;border-radius:var(--px-radius-pill);background:var(--px-color-background-state-disabled-default)}.btn.patch{display:inline-flex}.btn.patch:hover:not([disabled],[aria-disabled=true],.loading){color:var(--px-color-text-brand-default);background:var(--px-color-background-state-hover-bordered-default)}.btn.patch[disabled],.btn.patch[aria-disabled=true]{background:var(--px-color-background-state-disabled-default);color:var(--px-color-text-state-disabled-default)}.btn.actionable-tag{background:var(--px-color-background-container-default-inverted);color:var(--px-color-text-neutral-default);padding:var(--px-padding-2xs-mobile) var(--px-padding-xs-mobile);gap:var(--px-spacing-xs-mobile);border-radius:var(--px-radius-pill);border:var(--px-size-border-m) solid var(--px-color-border-neutral-default)}.btn.actionable-tag:hover:not([disabled],[aria-disabled=true],.loading){color:var(--px-color-text-brand-default);background:var(--px-color-background-state-hover-bordered-default)}.btn.actionable-tag:active:not([disabled],[aria-disabled=true],.loading){background:var(--px-color-background-state-active-default);color:var(--px-color-text-state-active-inverted);border-color:var(--px-color-border-none-default)}.btn.actionable-tag[disabled],.btn.actionable-tag[aria-disabled=true]{background:var(--px-color-background-state-disabled-default);color:var(--px-color-text-state-disabled-default);border-color:var(--px-color-border-none-default)}.btn.header-dropdown{display:flex;justify-content:space-between;gap:var(--px-spacing-s-mobile);width:100%;color:var(--px-color-text-neutral-default);font-weight:var(--px-font-weight-body);font-size:var(--px-text-size-label-l-mobile);border:var(--px-size-border-m) solid var(--px-color-border-neutral-default);padding:var(--px-padding-xs-mobile) var(--px-padding-s-mobile);border-radius:var(--px-radius-main);background-color:var(--px-color-background-container-default-default);touch-action:manipulation}.btn.header-dropdown:after{display:inline-block;content:"";width:var(--px-size-icon-xs);height:var(--px-size-icon-xs);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:cover;mask-size:cover;-webkit-mask-position:50% 50%;mask-position:50% 50%;-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12.38 5.90237C12.125 5.65131 11.7115 5.65131 11.4564 5.90237L7.99986 9.30494L4.54328 5.90237C4.28824 5.65131 3.87474 5.65131 3.61971 5.90237C3.36467 6.15342 3.36467 6.56045 3.61971 6.8115L7.53808 10.6686C7.79311 10.9197 8.20661 10.9197 8.46164 10.6686L12.38 6.8115C12.635 6.56045 12.635 6.15342 12.38 5.90237Z' fill='%235C2D91'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12.38 5.90237C12.125 5.65131 11.7115 5.65131 11.4564 5.90237L7.99986 9.30494L4.54328 5.90237C4.28824 5.65131 3.87474 5.65131 3.61971 5.90237C3.36467 6.15342 3.36467 6.56045 3.61971 6.8115L7.53808 10.6686C7.79311 10.9197 8.20661 10.9197 8.46164 10.6686L12.38 6.8115C12.635 6.56045 12.635 6.15342 12.38 5.90237Z' fill='%235C2D91'/%3E%3C/svg%3E");background-color:currentColor;color:var(--px-color-icon-brand-default);--btn-transition: all .2s ease-in-out 0s;transition:var(--btn-transition)}.btn.header-dropdown[aria-expanded=true]:after{transform:rotate(180deg)}button.link{background:none;border:none;text-decoration:underline;padding:0;cursor:pointer}button.link[disabled],button.link[aria-disabled=true]{cursor:default;pointer-events:none;color:var(--px-color-text-state-disabled-default)}:host([inverted]) .btn:hover:not([disabled],[aria-disabled=true],.loading){border-color:var(--px-color-border-state-hover-inverted)}:host([inverted]) .btn:focus-visible:not([disabled],[aria-disabled=true]){outline-color:var(--px-color-border-focus-outline-inverted)}:host([inverted]) .btn:active:not([disabled],[aria-disabled=true],.loading){border-color:var(--px-color-border-state-active-inverted);color:var(--px-color-text-brand-inverted);background:var(--px-color-background-state-hover-bordered-inverted)}:host([inverted]) .btn:not(.secondary,.tertiary,.patch,.actionable-tag){color:var(--px-color-text-brand-default);background:var(--px-color-background-container-primary-inverted)}:host([inverted]) .btn:not(.secondary,.tertiary,.patch,.actionable-tag):hover:not([disabled],[aria-disabled=true],.loading){color:var(--px-color-text-brand-inverted);background:var(--px-color-background-state-hover-bordered-inverted)}:host([inverted]) .btn:not(.secondary,.tertiary,.patch,.actionable-tag)[disabled],:host([inverted]) .btn:not(.secondary,.tertiary,.patch,.actionable-tag)[aria-disabled=true]{background:var(--px-color-background-state-disabled-inverted);color:var(--px-color-text-state-disabled-inverted)}:host([inverted]) .btn:not(.secondary,.tertiary,.patch,.actionable-tag).loading{background:var(--px-color-background-state-disabled-inverted);color:var(--px-color-text-brand-inverted);border-color:transparent}:host([inverted]) .btn.secondary{color:var(--px-color-text-brand-inverted);background:var(--px-color-background-container-secondary-inverted)}:host([inverted]) .btn.secondary:hover:not([disabled],[aria-disabled=true],.loading){color:var(--px-color-text-brand-inverted);background:var(--px-color-background-container-default-inverted)}:host([inverted]) .btn.secondary[disabled],:host([inverted]) .btn.secondary[aria-disabled=true]{background:var(--px-color-background-state-disabled-inverted);color:var(--px-color-text-state-disabled-inverted)}:host([inverted]) .btn.secondary.loading{background:var(--px-color-background-state-disabled-inverted);color:var(--px-color-text-brand-inverted);border-color:transparent}:host([inverted]) .btn.tertiary{color:var(--px-color-text-brand-inverted)}:host([inverted]) .btn.tertiary ::slotted(px-icon){background:var(--px-color-background-container-secondary-inverted)}:host([inverted]) .btn.tertiary:hover:not([disabled],[aria-disabled=true],.loading) ::slotted(px-icon),:host([inverted]) .btn.tertiary:active:not([disabled],[aria-disabled=true],.loading) ::slotted(px-icon){background:transparent}:host([inverted]) .btn.tertiary[disabled],:host([inverted]) .btn.tertiary[aria-disabled=true]{color:var(--px-color-text-state-disabled-inverted)}:host([inverted]) .btn.tertiary[disabled] ::slotted(px-icon),:host([inverted]) .btn.tertiary[aria-disabled=true] ::slotted(px-icon){background:var(--px-color-background-state-disabled-inverted)}:host([inverted]) .btn.tertiary.loading{color:var(--px-color-text-brand-inverted)}:host([inverted]) .btn.tertiary.loading ::slotted(px-spinner){background:var(--px-color-background-state-disabled-inverted)}:host([inverted]) .btn.patch:hover:not([disabled],[aria-disabled=true],.loading){color:var(--px-color-text-brand-inverted);background:var(--px-color-background-state-hover-bordered-inverted)}:host([inverted]) .btn.patch[disabled],:host([inverted]) .btn.patch[aria-disabled=true]{background:var(--px-color-background-state-disabled-inverted);color:var(--px-color-text-state-disabled-inverted)}:host([inverted]) .btn.actionable-tag{background:var(--px-color-background-container-default-default);color:var(--px-color-text-brand-inverted);border-color:var(--px-color-border-neutral-inverted)}:host([inverted]) .btn.actionable-tag:hover:not([disabled],[aria-disabled=true],.loading){color:var(--px-color-text-brand-inverted);background:var(--px-color-background-state-hover-bordered-inverted);border-color:var(--px-color-border-state-hover-inverted)}:host([inverted]) .btn.actionable-tag:active:not([disabled],[aria-disabled=true],.loading){background:var(--px-color-background-state-active-inverted);color:var(--px-color-text-state-active-default);border-color:var(--px-color-border-none-inverted)}:host([inverted]) .btn.actionable-tag[disabled],:host([inverted]) .btn.actionable-tag[aria-disabled=true]{background:var(--px-color-background-state-disabled-inverted);color:var(--px-color-text-state-disabled-inverted);border-color:var(--px-color-border-none-default)}:host([inverted]) button.link[disabled],:host([inverted]) button.link[aria-disabled=true]{color:var(--px-color-text-state-disabled-inverted)}@media only screen and (max-width: 47.938em){.btn:not(.tertiary,.patch,.actionable-tag,.header-dropdown)[shape--mobile=alternative]{border-radius:var(--px-radius-button-small)}.btn:not(.tertiary,.patch,.actionable-tag,.header-dropdown)[shape--mobile=bottom-left]{border-radius:var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-big)}.btn:not(.tertiary,.patch,.actionable-tag,.header-dropdown)[shape--mobile=bottom-right],.btn:not(.tertiary,.patch,.actionable-tag,.header-dropdown)[shape--mobile=default]{border-radius:var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-big) var(--px-radius-button-small)}}@media only screen and (min-width: 48em) and (max-width: 64em){.btn:not(.tertiary,.patch,.actionable-tag,.header-dropdown)[shape--tablet=alternative]{border-radius:var(--px-radius-button-small)}.btn:not(.tertiary,.patch,.actionable-tag,.header-dropdown)[shape--tablet=bottom-left]{border-radius:var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-big)}.btn:not(.tertiary,.patch,.actionable-tag,.header-dropdown)[shape--tablet=bottom-right],.btn:not(.tertiary,.patch,.actionable-tag,.header-dropdown)[shape--tablet=default]{border-radius:var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-big) var(--px-radius-button-small)}}@media only screen and (min-width: 48em){.btn{width:var(--button-extended--tablet, var(--button-extended, auto));font-size:var(--px-text-size-label-m-desktop);gap:var(--px-spacing-2xs-desktop)}.btn:focus-visible:not([disabled],[aria-disabled=true]){outline-offset:var(--px-focus-offset-desktop);outline-width:var(--px-focus-outline-desktop)}.btn.actionable-tag{padding:var(--px-padding-2xs-desktop) var(--px-padding-xs-desktop);gap:var(--px-spacing-xs-desktop)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag,.header-dropdown){padding:var(--px-padding-xs-desktop) var(--px-padding-m-desktop)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag,.header-dropdown) ::slotted([slot="after"]){margin-right:calc(var(--px-padding-xs-desktop) * -1)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag,.header-dropdown) ::slotted([slot="before"]){margin-left:calc(var(--px-padding-xs-desktop) * -1)}.btn.secondary{padding:var(--px-padding-xs-desktop) var(--px-padding-m-desktop)}.btn.tertiary{padding:var(--px-padding-2xs-desktop) 0;gap:var(--px-spacing-xs-desktop)}.btn.tertiary ::slotted(px-icon){width:var(--px-size-icon-xs);height:var(--px-size-icon-xs)}.btn.tertiary:hover:not([disabled],[aria-disabled=true],.loading){padding:var(--px-padding-2xs-desktop) var(--px-padding-s-desktop)}.btn.tertiary.loading ::slotted(px-spinner){width:var(--px-size-icon-xs);height:var(--px-size-icon-xs)}.btn.header-dropdown{justify-content:flex-start;align-items:center;gap:var(--px-spacing-xs-tablet);width:inherit;color:var(--px-color-text-brand-default);font-weight:var(--px-font-weight-title);font-size:var(--px-text-size-label-m-tablet);border:none;padding:0;border-radius:0;background:none}}@media only screen and (min-width: 64.0625em) and (max-width: 90em){.btn:not(.tertiary,.patch,.actionable-tag,.header-dropdown)[shape--laptop=alternative]{border-radius:var(--px-radius-button-small)}.btn:not(.tertiary,.patch,.actionable-tag,.header-dropdown)[shape--laptop=bottom-left]{border-radius:var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-big)}.btn:not(.tertiary,.patch,.actionable-tag,.header-dropdown)[shape--laptop=bottom-right],.btn:not(.tertiary,.patch,.actionable-tag,.header-dropdown)[shape--laptop=default]{border-radius:var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-big) var(--px-radius-button-small)}}@media only screen and (min-width: 64.0625em){.btn{width:var(--button-extended--laptop, var(--button-extended, auto));font-size:var(--px-text-size-label-m-laptop);gap:var(--px-spacing-2xs-laptop)}.btn:focus-visble:not([disabled],[aria-disabled=true]){outline-offset:var(--px-focus-offset-laptop);outline-width:var(--px-focus-outline-laptop)}.btn.actionable-tag{padding:var(--px-padding-2xs-laptop) var(--px-padding-xs-laptop);gap:var(--px-spacing-xs-laptop)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag,.header-dropdown){padding:var(--px-padding-xs-laptop) var(--px-padding-m-laptop)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag,.header-dropdown) ::slotted([slot="after"]){margin-right:calc(var(--px-padding-xs-laptop) * -1)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag,.header-dropdown) ::slotted([slot="before"]){margin-left:calc(var(--px-padding-xs-laptop) * -1)}.btn.secondary{padding:var(--px-padding-xs-laptop) var(--px-padding-m-laptop)}.btn.tertiary{padding:var(--px-padding-2xs-laptop) 0;gap:var(--px-spacing-xs-laptop)}.btn.tertiary ::slotted(px-icon){width:var(--px-size-icon-xs);height:var(--px-size-icon-xs)}.btn.tertiary:hover:not([disabled],[aria-disabled=true],.loading){padding:var(--px-padding-2xs-laptop) var(--px-padding-s-laptop)}.btn.tertiary.loading ::slotted(px-spinner){width:var(--px-size-icon-xs);height:var(--px-size-icon-xs)}.btn.header-dropdown{gap:var(--px-spacing-xs-laptop);font-size:var(--px-text-size-label-m-laptop);padding:0}}@media only screen and (min-width: 90.0625em){.btn{width:var(--button-extended--desktop, var(--button-extended, auto));font-size:var(--px-text-size-label-m-desktop);gap:var(--px-spacing-2xs-desktop)}.btn:focus-visible:not([disabled],[aria-disabled=true]){outline-offset:var(--px-focus-offset-desktop);outline-width:var(--px-focus-outline-desktop)}.btn.actionable-tag{padding:var(--px-padding-2xs-desktop) var(--px-padding-xs-desktop);gap:var(--px-spacing-xs-desktop)}.btn:not(.tertiary,.patch,.actionable-tag,.header-dropdown)[shape--desktop=alternative]{border-radius:var(--px-radius-button-small)}.btn:not(.tertiary,.patch,.actionable-tag,.header-dropdown)[shape--desktop=bottom-left]{border-radius:var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-big)}.btn:not(.tertiary,.patch,.actionable-tag,.header-dropdown)[shape--desktop=bottom-right],.btn:not(.tertiary,.patch,.actionable-tag,.header-dropdown)[shape--desktop=default]{border-radius:var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-big) var(--px-radius-button-small)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag,.header-dropdown){padding:var(--px-padding-xs-desktop) var(--px-padding-m-desktop)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag,.header-dropdown) ::slotted([slot="after"]){margin-right:calc(var(--px-padding-xs-desktop) * -1)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag,.header-dropdown) ::slotted([slot="before"]){margin-left:calc(var(--px-padding-xs-desktop) * -1)}.btn.secondary{padding:var(--px-padding-xs-desktop) var(--px-padding-m-desktop)}.btn.tertiary{padding:var(--px-padding-2xs-desktop) 0;gap:var(--px-spacing-xs-desktop)}.btn.tertiary ::slotted(px-icon){width:var(--px-size-icon-xs);height:var(--px-size-icon-xs)}.btn.tertiary:hover:not([disabled],[aria-disabled=true],.loading){padding:var(--px-padding-2xs-desktop) var(--px-padding-s-desktop)}.btn.tertiary.loading ::slotted(px-spinner){width:var(--px-size-icon-xs);height:var(--px-size-icon-xs)}.btn.header-dropdown{gap:var(--px-spacing-xs-desktop);font-size:var(--px-text-size-label-m-desktop);padding:0}}@keyframes anim-spinner{0%{transform:rotate(0)}to{transform:rotate(360deg)}}`;
 const linkCss = ':host([variant="icon-link"]){display:inline-flex}a,.link,::slotted(a){display:inline;align-items:center;font-family:var(--px-font-family);font-size:var(--px-text-size-link-m-mobile);line-height:var(--px-line-height-ratio-l);font-weight:var(--px-font-weight-body);color:var(--px-color-text-neutral-default)}a:hover,.link:hover{color:var(--px-color-text-state-hover-default)}a:focus-visible,.link:focus-visible{outline-offset:var(--px-focus-offset-mobile);outline:var(--px-focus-outline-mobile) solid var(--px-color-border-focus-outline-default)}a[aria-disabled=true],.link[aria-disabled=true]{cursor:default;pointer-events:none;color:var(--px-color-text-state-disabled-default)}a ::slotted([slot="after"]),.link ::slotted([slot="after"]){margin-left:var(--px-spacing-2xs-mobile)}a ::slotted(span[slot="after"]),a ::slotted(span[slot="before"]),.link ::slotted(span[slot="after"]),.link ::slotted(span[slot="before"]){display:inline-block}::slotted(a:hover){color:var(--px-color-text-state-hover-default)}a.no-style{text-decoration:none}a.no-style:hover,a.no-style:focus-visible{color:inherit}a.skip-link{position:absolute;left:-10000px;top:auto;overflow:hidden;background-color:var(--px-color-background-container-default-default);padding:var(--px-padding-xs-mobile)}a.skip-link:focus-visible{left:auto;z-index:999}:host([target="_blank"]) ::slotted(px-icon){vertical-align:middle}.icon-link{color:var(--px-color-icon-brand-default);line-height:1;display:inline-flex}:host([inverted]) a,:host([inverted]) .link,:host([inverted]) ::slotted(a){color:var(--px-color-text-neutral-inverted)}:host([inverted]) a:hover,:host([inverted]) .link:hover{color:var(--px-color-text-state-hover-inverted)}:host([inverted]) a:focus-visible,:host([inverted]) .link:focus-visible{outline-color:var(--px-color-border-focus-outline-inverted)}:host([inverted]) a[aria-disabled=true],:host([inverted]) .link[aria-disabled=true]{color:var(--px-color-text-state-disabled-inverted)}:host([inverted]) ::slotted(a:hover){color:var(--px-color-text-state-hover-inverted)}:host([inverted]) a.skip-link{background-color:var(--px-color-background-container-default-inverted)}:host([inverted]) .icon-link{color:var(--px-color-icon-brand-inverted)}@media only screen and (min-width: 768px){a,.link,::slotted(a){font-size:var(--px-text-size-link-m-tablet)}a:focus-visible,.link:focus-visible{outline-offset:var(--px-focus-offset-tablet);outline-width:var(--px-focus-outline-tablet)}a ::slotted([slot="after"]),.link ::slotted([slot="after"]){margin-left:var(--px-spacing-2xs-tablet)}a.skip-link{padding:var(--px-padding-xs-tablet)}}@media only screen and (min-width: 1025px){a,.link,::slotted(a){font-size:var(--px-text-size-link-m-laptop)}a:focus-visible,.link:focus-visible{outline-offset:var(--px-focus-offset-laptop);outline-width:var(--px-focus-outline-laptop)}a ::slotted([slot="after"]),.link ::slotted([slot="after"]){margin-left:var(--px-spacing-2xs-laptop)}a.skip-link{padding:var(--px-padding-xs-laptop)}}@media only screen and (min-width: 90.0625em){a,.link,::slotted(a){font-size:var(--px-text-size-link-m-desktop)}a:focus-visible,.link:focus-visible{outline-offset:var(--px-focus-offset-desktop);outline-width:var(--px-focus-outline-desktop)}a ::slotted([slot="after"]),.link ::slotted([slot="after"]){margin-left:var(--px-spacing-2xs-desktop)}a.skip-link{padding:var(--px-padding-xs-desktop)}}';
@@ -5328,14 +5219,12 @@ function throttle(func, wait, options) {
 }
 const styleSheet$w = new CSSStyleSheet();
 styleSheet$w.replaceSync(styles$D);
-const CAROUSEL_ITEM_CONNECTED_EVENT = "px-carousel-item-connected";
 const attributeBreakpointCSSSelector = (attributeName, attributeValue, device) => `:host([${attributeName}${device ? `--${device}` : ""}='${attributeValue}']) .carousel`;
 const prefix = "px-spacing";
 const visibleItemCalcFunction = (spacingToken) => (numberOfItems, device) => `calc(((100%  - ${Math.max(parseInt(numberOfItems), 2)}  * ( var(--px-spacing-${spacingToken}-${device}))) / ${numberOfItems}) - ( 64px / ${Math.max(parseInt(numberOfItems), 2)}))`;
 class Carousel extends HTMLElement {
   constructor() {
     super();
-    __privateAdd(this, _Carousel_instances);
     this.visibleItemsAttributeDelegate = new AttributeBreakpointHandlerDelegate(
       this,
       "visible-items",
@@ -5429,10 +5318,10 @@ class Carousel extends HTMLElement {
     this.visibleItemsAttributeDelegate.attributeValue = visibleItemCalcFunction(
       this.getAttribute("gap") || "s"
     );
-    this.addEventListener(CAROUSEL_ITEM_CONNECTED_EVENT, () => {
-      __privateMethod(this, _Carousel_instances, syncItems_fn).call(this);
+    requestAnimationFrame(() => {
+      this.handleAppleSeedDisplay();
     });
-    __privateMethod(this, _Carousel_instances, syncItems_fn).call(this);
+    this.$appleseed.setAttribute("amount", `${this.itemNumbers}`);
     this.$carousel.addEventListener("scroll", throttle(this.onScroll, 500));
     this.$previous.addEventListener("click", () => {
       this.$carousel.scrollLeft -= this.$carousel.clientWidth;
@@ -5491,13 +5380,6 @@ class Carousel extends HTMLElement {
     return this.querySelectorAll("px-carousel-item").length;
   }
 }
-_Carousel_instances = new WeakSet();
-syncItems_fn = function() {
-  this.$appleseed.setAttribute("amount", `${this.itemNumbers}`);
-  requestAnimationFrame(() => {
-    this.handleAppleSeedDisplay();
-  });
-};
 if (!customElements.get("px-carousel")) {
   customElements.define("px-carousel", Carousel);
 }
@@ -5514,14 +5396,6 @@ class CarouselItem extends HTMLElement {
     this.shadowRoot.innerHTML = this.template;
     this.shadowRoot.adoptedStyleSheets = [styleSheet$w, itemStyleSheet];
   }
-  connectedCallback() {
-    this.dispatchEvent(
-      new CustomEvent(CAROUSEL_ITEM_CONNECTED_EVENT, {
-        bubbles: true,
-        composed: true
-      })
-    );
-  }
 }
 if (!customElements.get("px-carousel-item")) {
   customElements.define("px-carousel-item", CarouselItem);
@@ -5545,7 +5419,6 @@ function configureCellBackgroundColor(el) {
 }
 function updateVariant(element, oldValue, newValue) {
   if (!checkName(cellVariantValues, newValue)) {
-    log(`${newValue} is not an allowed variant value.`);
     return;
   }
   if (oldValue !== null && oldValue !== "" && oldValue !== "default") {
@@ -7802,11 +7675,7 @@ class Radiogroup extends WithExtraAttributes {
   setupErrorState() {
     var _a;
     const hasErrorText = ((_a = this.$slotError) == null ? void 0 : _a.assignedNodes().length) > 0;
-    if (this.state === "error" && !hasErrorText) {
-      log(
-        '<px-radiogroup> with state="error" requires a slot="error-text" containing the error description.'
-      );
-    }
+    if (this.state === "error" && !hasErrorText) ;
     if (this.state === "error" && hasErrorText) {
       this.$el.setAttribute("state", "error");
       this.$radioList.forEach((child) => {
@@ -7912,7 +7781,7 @@ class CellRadio extends WithExtraAttributes {
   }
   connectedCallback() {
     var _a;
-    this.tabIndex = ((_a = this.parentElement) == null ? void 0 : _a.querySelector("px-cell-radio")) === this ? 0 : -1;
+    this.tabIndex = ((_a = this.parentElement) == null ? void 0 : _a.firstElementChild) === this ? 0 : -1;
     this.role = "radio";
     if (this.internals) {
       this.internals.role = "radio";
@@ -8421,6 +8290,8 @@ const _ColorOptionLink = class _ColorOptionLink extends PxElement {
     this.shadowRoot.appendChild($root);
   }
   connectedCallback() {
+    if (this.deviceColor)
+      this.$colorOption.setAttribute("device-color", this.deviceColor);
     this.addEventListener("click", (e) => {
       e.preventDefault();
       this.clickColorOptionLink();
@@ -9607,15 +9478,20 @@ class Drawer extends HTMLElement {
   connectedCallback() {
     var _a;
     this.toggleFooterVisibility = this.toggleFooterVisibility.bind(this);
-    if (this.$opener) {
-      this.addOpenListener();
-    }
-    if (this.$closer) {
-      this.addCloseListener();
-    }
     if (!this.hasAttribute("showfrom")) {
       this.setAttribute("showfrom", "bottom");
     }
+    if (this.hasAttribute("closedby")) {
+      const $closer = document.querySelector(
+        `#${this.getAttribute("closedby")}`
+      );
+      $closer == null ? void 0 : $closer.addEventListener("click", () => {
+        this.hide();
+      });
+    }
+    if (this.hasAttribute("openedby")) {
+      this.addOpenListener();
+    }
     this.$closeButton.addEventListener("click", () => {
       this.hide();
     });
@@ -9626,56 +9502,36 @@ class Drawer extends HTMLElement {
     );
   }
   static get observedAttributes() {
-    return ["open", "aria-label-close-button", "openedby", "closedby"];
+    return ["open", "aria-label-close-button", "openedby"];
   }
-  attributeChangedCallback(attrName, oldValue, newValue) {
+  attributeChangedCallback(name, oldValue, newValue) {
     var _a, _b, _c;
-    switch (attrName) {
-      case "open":
-        if (newValue !== null) {
-          this.show();
-        } else {
-          this.hide();
-        }
-        break;
-      case "aria-label-close-button":
-        if (!newValue) {
-          (_a = this.$closeButton) == null ? void 0 : _a.removeAttribute("aria-label");
-        } else {
-          (_c = (_b = this.$closeButton) == null ? void 0 : _b.setAttribute) == null ? void 0 : _c.call(
-            _b,
-            "aria-label",
-            newValue || "Close drawer"
-          );
-        }
-        break;
-      case "openedby":
-        if (newValue !== oldValue) {
-          if (oldValue) {
-            const oldOpener = document.querySelector(`#${oldValue}`);
-            oldOpener == null ? void 0 : oldOpener.removeEventListener("click", () => this.show());
-          }
-          this.addOpenListener();
-        }
-        break;
-      case "closedby":
-        this.addCloseListener();
-        break;
+    if (name === "open") {
+      if (newValue !== null) {
+        this.show();
+      } else {
+        this.hide();
+      }
+    } else if (name === "aria-label-close-button") {
+      if (!newValue) {
+        (_a = this.$closeButton) == null ? void 0 : _a.removeAttribute("aria-label");
+      } else {
+        (_c = (_b = this.$closeButton) == null ? void 0 : _b.setAttribute) == null ? void 0 : _c.call(
+          _b,
+          "aria-label",
+          newValue || "Close drawer"
+        );
+      }
+    } else if (name === "openedby") {
+      this.addOpenListener();
     }
   }
   disconnectedCallback() {
-    var _a, _b;
+    var _a;
     (_a = this.$slotFooter) == null ? void 0 : _a.removeEventListener(
       "slotchange",
       this.toggleFooterVisibility
     );
-    (_b = this.observer) == null ? void 0 : _b.disconnect();
-    if (this.$opener) {
-      this.$opener.removeEventListener("click", () => this.show());
-    }
-    if (this.$closer) {
-      this.$closer.removeEventListener("click", () => this.hide());
-    }
   }
   show() {
     var _a, _b;
@@ -9701,41 +9557,15 @@ class Drawer extends HTMLElement {
     }
   }
   addOpenListener() {
-    if (this.$opener) {
-      if (this.$opener.getAttribute("data-has-opener") !== "true") {
-        this.$opener.setAttribute("data-has-opener", "true");
-        this.$opener.addEventListener("click", () => this.show());
-      }
-    } else {
-      this.observer = new MutationObserver(() => {
-        if (this.$opener) {
-          this.observer.disconnect();
-          this.observer = null;
-          this.addOpenListener();
-        }
-      });
-      this.observer.observe(document.body, {
-        childList: true,
-        subtree: true
-      });
-    }
-  }
-  addCloseListener() {
-    var _a;
-    if (this.$closer) {
-      (_a = this.$closer) == null ? void 0 : _a.addEventListener("click", () => {
-        this.hide();
-      });
+    var _a, _b, _c;
+    if (((_a = this.$opener) == null ? void 0 : _a.getAttribute("data-has-opener")) !== "true") {
+      (_b = this.$opener) == null ? void 0 : _b.setAttribute("data-has-opener", "true");
+      (_c = this.$opener) == null ? void 0 : _c.addEventListener("click", () => this.show());
     }
   }
   get $opener() {
     return document.querySelector(
-      `#${this.getAttribute("openedby")}`
-    );
-  }
-  get $closer() {
-    return document.querySelector(
-      `#${this.getAttribute("closedby")}`
+      `px-button#${this.getAttribute("openedby")}`
     );
   }
   get $closeButton() {
@@ -9765,10 +9595,10 @@ class Drawer extends HTMLElement {
       this.removeAttribute("open");
     }
   }
-  get AriaLabelCloseButton() {
+  get ariaLabelCloseButton() {
     return this.getAttribute("aria-label-close-button");
   }
-  set AriaLabelCloseButton(value) {
+  set ariaLabelCloseButton(value) {
     this.setAttribute("aria-label-close-button", value);
   }
   get openedby() {
@@ -9777,12 +9607,6 @@ class Drawer extends HTMLElement {
   set openedby(value) {
     this.setAttribute("openedby", value);
   }
-  get closedby() {
-    return this.getAttribute("closedby");
-  }
-  set closedby(value) {
-    this.setAttribute("closedby", value);
-  }
 }
 if (!customElements.get("px-drawer")) {
   customElements.define("px-drawer", Drawer);
@@ -9983,9 +9807,6 @@ class Dropdown extends WithExtraAttributes {
     if (anchorAlignmentValues.includes(value)) {
       this.setAttribute("anchoralignment", value);
     } else {
-      log(
-        `Invalid anchor alignment value: ${value}. Using default ${defaultAnchorAlignment}.`
-      );
       this.setAttribute("anchoralignment", defaultAnchorAlignment);
     }
   }
@@ -10089,11 +9910,7 @@ const _Fieldset = class _Fieldset extends PxElement {
   setupErrorState() {
     var _a;
     const hasErrorText = ((_a = this.$slotError) == null ? void 0 : _a.assignedNodes().length) > 0;
-    if (this.state === "error" && !hasErrorText) {
-      log(
-        '<px-fieldset> with state="error" requires a slot="error-text" containing the error description.'
-      );
-    }
+    if (this.state === "error" && !hasErrorText) ;
     if (this.state === "error" && hasErrorText) {
       const id = Math.random().toString(36).substr(2, 9);
       this.$el.setAttribute("id", id);
@@ -12117,70 +11934,8 @@ if (!customElements.get("px-fileupload")) {
   customElements.define("px-fileupload", Upload);
 }
 const styles$o = ".list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}";
-const styles$n = '.list-item{display:flex;gap:var(--px-spacing-xs-mobile);align-items:flex-start;font-family:var(--px-font-family);line-height:var(--px-line-height-ratio-l);color:var(--px-color-text-neutral-default)}.list-item[inverted]{color:var(--px-color-text-neutral-inverted)}:host([variant="ul"]) .list-item,:host([variant="ol"]) .list-item{display:list-item;margin-left:var(--px-spacing-default-mobile)}:host([variant="ul"]) .list-item{list-style-type:disc}:host([variant="ol"]) .list-item{counter-set:list-item var(--item-index, 0);list-style-type:decimal}@media only screen and (min-width: 48em){.list-item{gap:var(--px-spacing-xs-tablet)}}@media only screen and (min-width: 64.0625em){.list-item{gap:var(--px-spacing-xs-laptop)}}@media only screen and (min-width: 90.0625em){.list-item{gap:var(--px-spacing-xs-desktop)}}';
 const styleSheet$l = new CSSStyleSheet();
-styleSheet$l.replaceSync(styles$n);
-const LIST_ITEM_CONNECTED_EVENT = "px-list-item-connected";
-const _ListItem = class _ListItem extends PxElement {
-  template() {
-    return `
-      <div class="list-item" role="listitem">
-        <slot name="icon"></slot>
-        <slot name="label"></slot>
-      </div>
-    `;
-  }
-  constructor() {
-    super(styleSheet$l);
-    this.shadowRoot.innerHTML = this.template();
-  }
-  connectedCallback() {
-    this.dispatchEvent(
-      new CustomEvent(LIST_ITEM_CONNECTED_EVENT, {
-        bubbles: true,
-        composed: true
-      })
-    );
-  }
-  static get observedAttributes() {
-    return ["inverted"];
-  }
-  // TODO: factorize code
-  attributeChangedCallback(attrName, oldValue, newValue) {
-    if (oldValue !== newValue) {
-      switch (attrName) {
-        case "inverted":
-          for (let i = 0; i < this.$children.length; i++) {
-            if (!this.$children[i].hasAttribute("inverted")) {
-              this.$children[i].toggleAttribute("inverted");
-            }
-          }
-          this.$el.toggleAttribute("inverted", newValue !== null);
-          break;
-      }
-    }
-  }
-  get $children() {
-    return this.querySelectorAll("px-list-item > *");
-  }
-  get inverted() {
-    return this.hasAttribute("inverted");
-  }
-  set inverted(value) {
-    if (value) {
-      this.setAttribute("inverted", "");
-    } else {
-      this.removeAttribute("inverted");
-    }
-  }
-};
-_ListItem.nativeName = "div";
-let ListItem = _ListItem;
-if (!customElements.get("px-list-item")) {
-  customElements.define("px-list-item", ListItem);
-}
-const styleSheet$k = new CSSStyleSheet();
-styleSheet$k.replaceSync(styles$o);
+styleSheet$l.replaceSync(styles$o);
 const listVariantValues = ["", "ul", "ol"];
 const AttributeBreakpointCSSSelector = (attributeName, attributeValue, device) => `:host([${attributeName}${device ? `--${device}` : ""}='${attributeValue}']) .list`;
 const gapPrefix = "px-spacing";
@@ -12192,11 +11947,6 @@ const listCssTokenBreakpoints = cssTokenBreakpoints(
   "--list-gap"
 );
 const _List = class _List extends PxElement {
-  constructor() {
-    super(styleSheet$k, listCssTokenBreakpoints);
-    __privateAdd(this, _List_instances);
-    this.shadowRoot.innerHTML = this.template();
-  }
   template() {
     return `
       <div class="list" role="list">
@@ -12204,6 +11954,10 @@ const _List = class _List extends PxElement {
       </div>
     `;
   }
+  constructor() {
+    super(styleSheet$l, listCssTokenBreakpoints);
+    this.shadowRoot.innerHTML = this.template();
+  }
   static get observedAttributes() {
     return ["inverted", "variant"];
   }
@@ -12211,18 +11965,17 @@ const _List = class _List extends PxElement {
     if (!this.gap) {
       this.gap = "xs";
     }
-    this.addEventListener(LIST_ITEM_CONNECTED_EVENT, () => {
-      __privateMethod(this, _List_instances, syncChildren_fn).call(this);
-    });
-    __privateMethod(this, _List_instances, syncChildren_fn).call(this);
   }
   attributeChangedCallback(attrName, oldValue, newValue) {
     if (oldValue !== newValue) {
       switch (attrName) {
         case "inverted":
-          if (this.isConnected) {
-            __privateMethod(this, _List_instances, applyInverted_fn2).call(this);
+          for (let i = 0; i < this.$children.length; i++) {
+            if (!this.$children[i].hasAttribute("inverted")) {
+              this.$children[i].toggleAttribute("inverted");
+            }
           }
+          this.$el.toggleAttribute("inverted", newValue !== null);
           break;
         case "variant":
           if (!this.checkName(listVariantValues, newValue)) {
@@ -12230,8 +11983,19 @@ const _List = class _List extends PxElement {
               `${newValue} is not an allowed variant value for ${this.tagName.toLowerCase()}`
             );
           }
-          if (this.isConnected) {
-            __privateMethod(this, _List_instances, applyVariant_fn).call(this, newValue);
+          for (let i = 0; i < this.$children.length; i++) {
+            const child = this.$children[i];
+            if (newValue !== null) {
+              child.setAttribute("variant", newValue);
+              if (newValue === "ol") {
+                child.style.setProperty("--item-index", String(i + 1));
+              } else {
+                child.style.removeProperty("--item-index");
+              }
+            } else {
+              child.removeAttribute("variant");
+              child.style.removeProperty("--item-index");
+            }
           }
           super.attributeChangedCallback(attrName, oldValue, newValue);
           break;
@@ -12315,39 +12079,63 @@ const _List = class _List extends PxElement {
     }
   }
 };
-_List_instances = new WeakSet();
-syncChildren_fn = function() {
-  __privateMethod(this, _List_instances, applyInverted_fn2).call(this);
-  __privateMethod(this, _List_instances, applyVariant_fn).call(this, this.getAttribute("variant"));
-};
-applyInverted_fn2 = function() {
-  var _a;
-  const on = this.hasAttribute("inverted");
-  for (let i = 0; i < this.$children.length; i++) {
-    this.$children[i].toggleAttribute("inverted", on);
+_List.nativeName = "div";
+let List = _List;
+if (!customElements.get("px-list")) {
+  customElements.define("px-list", List);
+}
+const styles$n = '.list-item{display:flex;gap:var(--px-spacing-xs-mobile);align-items:flex-start;font-family:var(--px-font-family);line-height:var(--px-line-height-ratio-l);color:var(--px-color-text-neutral-default)}.list-item[inverted]{color:var(--px-color-text-neutral-inverted)}:host([variant="ul"]) .list-item,:host([variant="ol"]) .list-item{display:list-item;margin-left:var(--px-spacing-default-mobile)}:host([variant="ul"]) .list-item{list-style-type:disc}:host([variant="ol"]) .list-item{counter-set:list-item var(--item-index, 0);list-style-type:decimal}@media only screen and (min-width: 48em){.list-item{gap:var(--px-spacing-xs-tablet)}}@media only screen and (min-width: 64.0625em){.list-item{gap:var(--px-spacing-xs-laptop)}}@media only screen and (min-width: 90.0625em){.list-item{gap:var(--px-spacing-xs-desktop)}}';
+const styleSheet$k = new CSSStyleSheet();
+styleSheet$k.replaceSync(styles$n);
+const _ListItem = class _ListItem extends PxElement {
+  template() {
+    return `
+      <div class="list-item" role="listitem">
+        <slot name="icon"></slot>
+        <slot name="label"></slot>
+      </div>
+    `;
   }
-  (_a = this.$el) == null ? void 0 : _a.toggleAttribute("inverted", on);
-};
-applyVariant_fn = function(newValue) {
-  for (let i = 0; i < this.$children.length; i++) {
-    const child = this.$children[i];
-    if (newValue !== null) {
-      child.setAttribute("variant", newValue);
-      if (newValue === "ol") {
-        child.style.setProperty("--item-index", String(i + 1));
-      } else {
-        child.style.removeProperty("--item-index");
+  constructor() {
+    super(styleSheet$k);
+    this.shadowRoot.innerHTML = this.template();
+  }
+  static get observedAttributes() {
+    return ["inverted"];
+  }
+  // TODO: factorize code
+  attributeChangedCallback(attrName, oldValue, newValue) {
+    if (oldValue !== newValue) {
+      switch (attrName) {
+        case "inverted":
+          for (let i = 0; i < this.$children.length; i++) {
+            if (!this.$children[i].hasAttribute("inverted")) {
+              this.$children[i].toggleAttribute("inverted");
+            }
+          }
+          this.$el.toggleAttribute("inverted", newValue !== null);
+          break;
       }
+    }
+  }
+  get $children() {
+    return this.querySelectorAll("px-list-item > *");
+  }
+  get inverted() {
+    return this.hasAttribute("inverted");
+  }
+  set inverted(value) {
+    if (value) {
+      this.setAttribute("inverted", "");
     } else {
-      child.removeAttribute("variant");
-      child.style.removeProperty("--item-index");
+      this.removeAttribute("inverted");
     }
   }
 };
-_List.nativeName = "div";
-let List = _List;
-if (!customElements.get("px-list")) {
-  customElements.define("px-list", List);
+_ListItem.nativeName = "div";
+let ListItem = _ListItem;
+if (!customElements.get("px-list-item")) {
+  customElements.define("px-list-item", ListItem);
 }
 class MDDCloser extends HTMLElement {
   constructor() {
@@ -12806,7 +12594,6 @@ class Modal extends HTMLElement {
     this.onOpenClick = () => this.show();
     this.onCloseClick = () => this.close();
     this.commandButtonCleanups = [];
-    this.opener = null;
     this.openerElement = null;
     this.closerElement = null;
     this.template = `<dialog>
@@ -12857,11 +12644,14 @@ class Modal extends HTMLElement {
     if (this.hasAttribute("open")) {
       this.show();
     }
+    if (this.hasAttribute("closedby")) {
+      this.addCloseListener(this.getAttribute("closedby"));
+    }
     if (this.hasAttribute("openedby")) {
       this.addOpenListener();
     }
-    if (this.hasAttribute("closedby")) {
-      this.addCloseListener(this.getAttribute("closedby"));
+    if (this.hasAttribute("media-src")) {
+      this.updateMediaSrc(this.getAttribute("media-src"));
     }
     this.toggleDescriptionVisibility();
     (_a = this.$slotDescription) == null ? void 0 : _a.addEventListener(
@@ -12880,9 +12670,7 @@ class Modal extends HTMLElement {
   attributeChangedCallback(attrName, oldValue, newValue) {
     switch (attrName) {
       case "open":
-        if (this.isConnected) {
-          this.handleOpenChange();
-        }
+        this.handleOpenChange();
         break;
       case "status":
         this.handleStatusChange(oldValue, newValue);
@@ -12891,14 +12679,10 @@ class Modal extends HTMLElement {
         this.updateMediaSrc(newValue);
         break;
       case "openedby":
-        if (this.isConnected) {
-          this.addOpenListener();
-        }
+        this.addOpenListener();
         break;
       case "closedby":
-        if (this.isConnected) {
-          this.addCloseListener(newValue);
-        }
+        this.addCloseListener(newValue);
         break;
       case "id":
         this.addEventListenersToCommandButtons();
@@ -13014,29 +12798,12 @@ class Modal extends HTMLElement {
   addOpenListener() {
     var _a;
     this.removeOpenListener();
-    if (this.$opener) {
-      this.openerElement = this.$opener;
-      this.openerElement.addEventListener("click", this.onOpenClick);
-    } else {
-      (_a = this.opener) == null ? void 0 : _a.disconnect();
-      this.opener = new MutationObserver(() => {
-        if (this.$opener) {
-          this.opener.disconnect();
-          this.opener = null;
-          this.addOpenListener();
-        }
-      });
-      this.opener.observe(document.body, {
-        childList: true,
-        subtree: true
-      });
-    }
+    this.openerElement = this.$opener;
+    (_a = this.openerElement) == null ? void 0 : _a.addEventListener("click", this.onOpenClick);
   }
   removeOpenListener() {
-    var _a, _b;
-    (_a = this.opener) == null ? void 0 : _a.disconnect();
-    this.opener = null;
-    (_b = this.openerElement) == null ? void 0 : _b.removeEventListener("click", this.onOpenClick);
+    var _a;
+    (_a = this.openerElement) == null ? void 0 : _a.removeEventListener("click", this.onOpenClick);
     this.openerElement = null;
   }
   addCloseListener(value) {
@@ -13451,9 +13218,7 @@ const _Price = class _Price extends PxElement {
     });
     this.observer.observe(this, {
       childList: true,
-      subtree: true,
-      // By observing characterData, we ensure that any changes to the text content of the price element will trigger a rebuild of the price display, allowing it to update correctly in response to dynamic data changes.
-      characterData: true
+      subtree: true
     });
   }
   attributeChangedCallback(attrName, oldValue, newValue) {
@@ -13680,10 +13445,14 @@ class SelectableBoxCheckbox extends WithExtraAttributes {
   }
   connectedCallback() {
     this.toggleFooterVisibility = this.toggleFooterVisibility.bind(this);
+    if (this.name) this.$checkbox.setAttribute("name", this.name);
+    if (this.value) this.$checkbox.setAttribute("value", this.value);
     this.role = "checkbox";
     if (this.internals) {
       this.internals.role = "checkbox";
+      this.internals.ariaChecked = `${this.checked}`;
     }
+    this.ariaChecked = `${this.checked}`;
     this.tabIndex = 0;
     this.toggleFooterVisibility();
     this.$slotFooter.addEventListener(
@@ -13694,6 +13463,9 @@ class SelectableBoxCheckbox extends WithExtraAttributes {
     this.addEventListener("mouseout", this.removeHoverAttribute);
     this.addEventListener("keypress", this.setKeypressEvent);
     this.addEventListener("click", this.setClickEvent);
+    if (this.hasAttribute("checked")) {
+      this.checked = true;
+    }
   }
   static get observedAttributes() {
     return [
@@ -13950,11 +13722,15 @@ class SelectableBoxRadio extends WithExtraAttributes {
   connectedCallback() {
     var _a;
     this.toggleFooterVisibility = this.toggleFooterVisibility.bind(this);
+    if (this.name) this.$radio.setAttribute("name", this.name);
+    if (this.value) this.$radio.setAttribute("value", this.value);
     this.role = "radio";
     if (this.internals) {
       this.internals.role = "radio";
+      this.internals.ariaChecked = `${this.checked}`;
     }
-    this.tabIndex = ((_a = this.parentElement) == null ? void 0 : _a.querySelector("px-selectable-box-radio")) === this ? 0 : -1;
+    this.ariaChecked = `${this.checked}`;
+    this.tabIndex = ((_a = this.parentElement) == null ? void 0 : _a.firstElementChild) === this ? 0 : -1;
     this.toggleFooterVisibility();
     this.$slotFooter.addEventListener(
       "slotchange",
@@ -13964,6 +13740,9 @@ class SelectableBoxRadio extends WithExtraAttributes {
     this.addEventListener("mouseout", this.removeHoverAttribute);
     this.addEventListener("keypress", this.setKeypressEvent);
     this.addEventListener("click", this.setClickEvent);
+    if (this.hasAttribute("checked")) {
+      this.checked = true;
+    }
   }
   static get observedAttributes() {
     return [
@@ -15222,6 +15001,8 @@ class Tabs extends HTMLElement {
     var _a;
     super();
     __privateAdd(this, _Tabs_instances);
+    this._label = `tabs-${Math.random().toString(36).substring(2, 15)}`;
+    this.tabsConnected = 0;
     this.template = () => `
     <div id="container">
       <div id="tab-container">
@@ -15241,7 +15022,7 @@ class Tabs extends HTMLElement {
     </div>
   `;
     this.handleNextPreviousDisplay = () => {
-      if (this.$prefixButton && this.$suffixButton) {
+      if (this.allTabsConnected() && this.$prefixButton && this.$suffixButton) {
         this.$prefixButton.style.display = this.shouldDisplayScrollLeftButton() ? "" : "none";
         this.$suffixButton.style.display = this.shouldDisplayScrollRightButton() ? "" : "none";
       }
@@ -15253,6 +15034,7 @@ class Tabs extends HTMLElement {
   }
   static get observedAttributes() {
     return [
+      "label",
       "inverted",
       "aria-label-next",
       "aria-label-previous",
@@ -15261,6 +15043,9 @@ class Tabs extends HTMLElement {
   }
   attributeChangedCallback(name, oldValue, newValue) {
     switch (name) {
+      case "label":
+        this.label = newValue;
+        break;
       case "aria-label-next":
         if (!this.hasAttribute("hide-controls")) {
           this.$suffixButton.setAttribute("aria-label", newValue || "Next tab");
@@ -15284,6 +15069,10 @@ class Tabs extends HTMLElement {
   }
   connectedCallback() {
     var _a, _b;
+    this.shadowRoot.querySelector("#tablist").setAttribute("aria-labelledby", this._label);
+    if (this.getAttribute("label")) {
+      this.label = this.getAttribute("label");
+    }
     this.role = "tablist";
     if (this.internals) {
       this.internals.role = "tablist";
@@ -15309,13 +15098,15 @@ class Tabs extends HTMLElement {
       }
     );
     this.addEventListener(TAB_CONNECTED_EVENT, () => {
+      this.tabsConnected++;
       this.handleNextPreviousDisplay();
-      if (this.inverted) {
+      if (this.allTabsConnected() && this.inverted) {
         __privateMethod(this, _Tabs_instances, handleInverted_fn).call(this, this.getAttribute("inverted"));
       }
     });
-    this.handleNextPreviousDisplay();
-    __privateMethod(this, _Tabs_instances, handleInverted_fn).call(this, this.getAttribute("inverted"));
+    if (this.allTabsConnected()) {
+      __privateMethod(this, _Tabs_instances, handleInverted_fn).call(this, this.getAttribute("inverted"));
+    }
     this.addEventListener("keydown", (event) => {
       var _a2, _b2;
       if ((event.key === "ArrowRight" || event.key === "ArrowLeft") && ((_b2 = (_a2 = document.activeElement) == null ? void 0 : _a2.localName) == null ? void 0 : _b2.endsWith("-tab"))) {
@@ -15356,8 +15147,11 @@ class Tabs extends HTMLElement {
     }
     this.$activePanel.selected = true;
   }
+  allTabsConnected() {
+    return this.tabsConnected === this.querySelectorAll('[slot="tabs"]').length || [...this.$tabs].every((tab) => tab.isConnected);
+  }
   shouldDisplayScrollRightButton() {
-    return this.$tabList.scrollWidth > this.$tabList.clientWidth && this.$tabList.scrollWidth - this.$tabList.scrollLeft !== this.$tabList.clientWidth;
+    return this.allTabsConnected() && this.$tabList.scrollWidth > this.$tabList.clientWidth && this.$tabList.scrollWidth - this.$tabList.scrollLeft !== this.$tabList.clientWidth;
   }
   shouldDisplayScrollLeftButton() {
     return this.$tabList.scrollLeft > 0;
@@ -15400,6 +15194,12 @@ class Tabs extends HTMLElement {
   get $suffixButton() {
     return this.shadowRoot.querySelector("#next");
   }
+  get label() {
+    return this.$tabList.getAttribute("aria-labelledby");
+  }
+  set label(value) {
+    this.$tabList.setAttribute("aria-labelledby", value);
+  }
   get inverted() {
     return this.hasAttribute("inverted");
   }
@@ -16277,7 +16077,7 @@ class TileRadio extends WithExtraAttributes {
       this.internals.ariaChecked = `${this.checked}`;
     }
     this.ariaChecked = `${this.checked}`;
-    this.tabIndex = ((_a = this.parentElement) == null ? void 0 : _a.querySelector("px-tile-radio")) === this ? 0 : -1;
+    this.tabIndex = ((_a = this.parentElement) == null ? void 0 : _a.firstElementChild) === this ? 0 : -1;
     if (this.$slotPrefix) {
       const prefixImg = this.querySelector('px-img[slot="prefix"]');
       if (prefixImg) {
@@ -16952,10 +16752,67 @@ if (!customElements.get("px-tile-switch")) {
   customElements.define("px-tile-switch", TileSwitch);
 }
 const styles$1 = ".timeline{list-style:none;margin:0;padding:0}";
-const styles = '.timeline-item{display:flex;gap:var(--px-spacing-default-mobile);font-family:var(--px-font-family);line-height:var(--px-line-height-ratio-l)}.indicator-area{position:relative}.indicator-area:before{display:block;content:"";position:absolute;top:26px;left:12px;width:var(--px-size-border-m);height:calc(100% - 26px);background:var(--px-color-border-main-default)}.indicator-area .indicator{display:flex;align-items:center;justify-content:center;text-align:center;width:26px;height:26px;font-weight:var(--px-font-weight-title);font-size:var(--px-text-size-label-m-mobile);color:var(--px-color-text-neutral-default);border-radius:var(--px-radius-pill);background:var(--px-color-background-container-default-default)}.content-area{display:flex;flex-direction:column;margin-bottom:var(--px-padding-m-mobile);gap:var(--px-spacing-xs-mobile)}.content-area ::slotted([slot="title"]){font-weight:var(--px-font-weight-title);font-size:var(--px-text-size-label-l-mobile);color:var(--px-color-text-neutral-default)}.content-area ::slotted([slot="content"]){font-weight:var(--px-font-weight-body);font-size:var(--px-text-size-body-m-mobile);color:var(--px-color-text-dimmed-default)}:host([lastchild]) .indicator-area:before{display:none}:host([lastchild]) .content-area{margin-bottom:0}:host([inverted]) .indicator-area:before{background:var(--px-color-border-main-inverted)}:host([inverted]) .indicator{color:var(--px-color-text-neutral-inverted);background:var(--px-color-background-container-default-inverted)}:host([inverted]) .content-area ::slotted([slot="title"]){color:var(--px-color-text-neutral-inverted)}:host([inverted]) .content-area ::slotted([slot="content"]){color:var(--px-color-text-dimmed-inverted)}@media only screen and (min-width: 768px){.timeline-item{gap:var(--px-spacing-default-tablet)}.indicator-area .indicator{font-size:var(--px-text-size-label-m-tablet)}.content-area{margin-bottom:var(--px-padding-m-tablet);gap:var(--px-spacing-xs-tablet)}.content-area ::slotted([slot="title"]){font-size:var(--px-text-size-label-l-tablet)}.content-area ::slotted([slot="content"]){font-size:var(--px-text-size-body-m-tablet)}}@media only screen and (min-width: 1025px){.timeline-item{gap:var(--px-spacing-default-laptop)}.indicator-area .indicator{font-size:var(--px-text-size-label-m-laptop)}.content-area{margin-bottom:var(--px-padding-m-laptop)}.content-area ::slotted([slot="title"]){font-size:var(--px-text-size-label-l-laptop)}.content-area ::slotted([slot="content"]){font-size:var(--px-text-size-body-m-laptop)}}@media only screen and (min-width: 90.0625em){.timeline-item{gap:var(--px-spacing-default-desktop)}.indicator-area .indicator{font-size:var(--px-text-size-label-m-desktop)}.content-area{margin-bottom:var(--px-padding-m-desktop)}.content-area ::slotted([slot="title"]){font-size:var(--px-text-size-label-l-desktop)}.content-area ::slotted([slot="content"]){font-size:var(--px-text-size-body-m-desktop)}}';
 const styleSheet$1 = new CSSStyleSheet();
-styleSheet$1.replaceSync(styles);
-const TIMELINE_ITEM_CONNECTED_EVENT = "px-timeline-item-connected";
+styleSheet$1.replaceSync(styles$1);
+class Timeline extends HTMLElement {
+  template() {
+    return `
+      <ol class="timeline" role="list">
+        <slot></slot>
+      </ol>
+    `;
+  }
+  constructor() {
+    super();
+    this.attachShadow({ mode: "open" });
+    this.shadowRoot.innerHTML = this.template();
+    this.shadowRoot.adoptedStyleSheets = [styleSheet$1];
+  }
+  static get observedAttributes() {
+    return ["inverted"];
+  }
+  connectedCallback() {
+    this.configureChildren();
+  }
+  attributeChangedCallback(attrName, oldValue, newValue) {
+    if (oldValue !== newValue) {
+      switch (attrName) {
+        case "inverted":
+          for (let i = 0; i < this.$children.length; i++) {
+            this.$children[i].toggleAttribute("inverted");
+          }
+          break;
+      }
+    }
+  }
+  configureChildren() {
+    const lastChild = this.$children[this.$children.length - 1];
+    if (lastChild && !lastChild.hasAttribute("lastchild")) {
+      lastChild.setAttribute("lastchild", "");
+    }
+    for (let i = 0; i < this.$children.length; i++) {
+      this.$children[i].setAttribute("item", `${i + 1}`);
+    }
+  }
+  get $el() {
+    return this.shadowRoot.querySelector(".timeline");
+  }
+  get $children() {
+    return this.querySelectorAll("px-timeline-item");
+  }
+  get inverted() {
+    return this.getAttribute("inverted");
+  }
+  set inverted(value) {
+    this.setAttribute("inverted", value);
+  }
+}
+if (!customElements.get("px-timeline")) {
+  customElements.define("px-timeline", Timeline);
+}
+const styles = '.timeline-item{display:flex;gap:var(--px-spacing-default-mobile);font-family:var(--px-font-family);line-height:var(--px-line-height-ratio-l)}.indicator-area{position:relative}.indicator-area:before{display:block;content:"";position:absolute;top:26px;left:12px;width:var(--px-size-border-m);height:calc(100% - 26px);background:var(--px-color-border-main-default)}.indicator-area .indicator{display:flex;align-items:center;justify-content:center;text-align:center;width:26px;height:26px;font-weight:var(--px-font-weight-title);font-size:var(--px-text-size-label-m-mobile);color:var(--px-color-text-neutral-default);border-radius:var(--px-radius-pill);background:var(--px-color-background-container-default-default)}.content-area{display:flex;flex-direction:column;margin-bottom:var(--px-padding-m-mobile);gap:var(--px-spacing-xs-mobile)}.content-area ::slotted([slot="title"]){font-weight:var(--px-font-weight-title);font-size:var(--px-text-size-label-l-mobile);color:var(--px-color-text-neutral-default)}.content-area ::slotted([slot="content"]){font-weight:var(--px-font-weight-body);font-size:var(--px-text-size-body-m-mobile);color:var(--px-color-text-dimmed-default)}:host([lastchild]) .indicator-area:before{display:none}:host([lastchild]) .content-area{margin-bottom:0}:host([inverted]) .indicator-area:before{background:var(--px-color-border-main-inverted)}:host([inverted]) .indicator{color:var(--px-color-text-neutral-inverted);background:var(--px-color-background-container-default-inverted)}:host([inverted]) .content-area ::slotted([slot="title"]){color:var(--px-color-text-neutral-inverted)}:host([inverted]) .content-area ::slotted([slot="content"]){color:var(--px-color-text-dimmed-inverted)}@media only screen and (min-width: 768px){.timeline-item{gap:var(--px-spacing-default-tablet)}.indicator-area .indicator{font-size:var(--px-text-size-label-m-tablet)}.content-area{margin-bottom:var(--px-padding-m-tablet);gap:var(--px-spacing-xs-tablet)}.content-area ::slotted([slot="title"]){font-size:var(--px-text-size-label-l-tablet)}.content-area ::slotted([slot="content"]){font-size:var(--px-text-size-body-m-tablet)}}@media only screen and (min-width: 1025px){.timeline-item{gap:var(--px-spacing-default-laptop)}.indicator-area .indicator{font-size:var(--px-text-size-label-m-laptop)}.content-area{margin-bottom:var(--px-padding-m-laptop)}.content-area ::slotted([slot="title"]){font-size:var(--px-text-size-label-l-laptop)}.content-area ::slotted([slot="content"]){font-size:var(--px-text-size-body-m-laptop)}}@media only screen and (min-width: 90.0625em){.timeline-item{gap:var(--px-spacing-default-desktop)}.indicator-area .indicator{font-size:var(--px-text-size-label-m-desktop)}.content-area{margin-bottom:var(--px-padding-m-desktop)}.content-area ::slotted([slot="title"]){font-size:var(--px-text-size-label-l-desktop)}.content-area ::slotted([slot="content"]){font-size:var(--px-text-size-body-m-desktop)}}';
+const styleSheet = new CSSStyleSheet();
+styleSheet.replaceSync(styles);
 let item = "1";
 class TimelineItem extends HTMLElement {
   template() {
@@ -16975,15 +16832,7 @@ class TimelineItem extends HTMLElement {
     super();
     this.attachShadow({ mode: "open" });
     this.shadowRoot.innerHTML = this.template();
-    this.shadowRoot.adoptedStyleSheets = [styleSheet$1];
-  }
-  connectedCallback() {
-    this.dispatchEvent(
-      new CustomEvent(TIMELINE_ITEM_CONNECTED_EVENT, {
-        bubbles: true,
-        composed: true
-      })
-    );
+    this.shadowRoot.adoptedStyleSheets = [styleSheet];
   }
   static get observedAttributes() {
     return ["inverted", "lastchild", "item"];
@@ -17035,77 +16884,6 @@ class TimelineItem extends HTMLElement {
 if (!customElements.get("px-timeline-item")) {
   customElements.define("px-timeline-item", TimelineItem);
 }
-const styleSheet = new CSSStyleSheet();
-styleSheet.replaceSync(styles$1);
-class Timeline extends HTMLElement {
-  constructor() {
-    super();
-    __privateAdd(this, _Timeline_instances);
-    this.attachShadow({ mode: "open" });
-    this.shadowRoot.innerHTML = this.template();
-    this.shadowRoot.adoptedStyleSheets = [styleSheet];
-  }
-  template() {
-    return `
-      <ol class="timeline" role="list">
-        <slot></slot>
-      </ol>
-    `;
-  }
-  static get observedAttributes() {
-    return ["inverted"];
-  }
-  connectedCallback() {
-    this.addEventListener(TIMELINE_ITEM_CONNECTED_EVENT, () => {
-      this.configureChildren();
-      __privateMethod(this, _Timeline_instances, applyInverted_fn3).call(this);
-    });
-    this.configureChildren();
-    __privateMethod(this, _Timeline_instances, applyInverted_fn3).call(this);
-  }
-  attributeChangedCallback(attrName, oldValue, newValue) {
-    if (oldValue !== newValue) {
-      switch (attrName) {
-        case "inverted":
-          if (this.isConnected) {
-            __privateMethod(this, _Timeline_instances, applyInverted_fn3).call(this);
-          }
-          break;
-      }
-    }
-  }
-  configureChildren() {
-    const lastChild = this.$children[this.$children.length - 1];
-    if (lastChild && !lastChild.hasAttribute("lastchild")) {
-      lastChild.setAttribute("lastchild", "");
-    }
-    for (let i = 0; i < this.$children.length; i++) {
-      this.$children[i].setAttribute("item", `${i + 1}`);
-    }
-  }
-  get $el() {
-    return this.shadowRoot.querySelector(".timeline");
-  }
-  get $children() {
-    return this.querySelectorAll("px-timeline-item");
-  }
-  get inverted() {
-    return this.getAttribute("inverted");
-  }
-  set inverted(value) {
-    this.setAttribute("inverted", value);
-  }
-}
-_Timeline_instances = new WeakSet();
-applyInverted_fn3 = function() {
-  const on = this.hasAttribute("inverted");
-  for (let i = 0; i < this.$children.length; i++) {
-    this.$children[i].toggleAttribute("inverted", on);
-  }
-};
-if (!customElements.get("px-timeline")) {
-  customElements.define("px-timeline", Timeline);
-}
 const typographyCss = ":host{font-family:var(--px-font-family);font-weight:var(--px-font-weight-body);color:var(--px-color-text-neutral-default)}::slotted(ul),::slotted(ol){padding:0;margin:0 0 var(--px-spacing-xs-mobile) var(--px-spacing-default-mobile)}::slotted(blockquote){margin-bottom:var(--px-spacing-xs-mobile)}::slotted(b),::slotted(strong){font-weight:var(--px-font-weight-title)}::slotted(address){font-style:normal;font-weight:var(--px-font-weight-body)}::slotted(img){max-width:100%;height:auto}@media only screen and (min-width: 48em){::slotted(ul),::slotted(ol){margin:0 0 var(--px-spacing-xs-tablet) var(--px-spacing-default-tablet)}::slotted(blockquote){margin-bottom:var(--px-spacing-xs-tablet)}}@media only screen and (min-width: 64.0625em){::slotted(ul),::slotted(ol){margin:0 0 var(--px-spacing-xs-laptop) var(--px-spacing-default-laptop)}::slotted(blockquote){margin-bottom:var(--px-spacing-xs-laptop)}}@media only screen and (min-width: 90.0625em){::slotted(ul),::slotted(ol){margin:0 0 var(--px-spacing-xs-desktop) var(--px-spacing-default-desktop)}::slotted(blockquote){margin-bottom:var(--px-spacing-xs-desktop)}}:host([inverted]){color:var(--px-color-text-neutral-inverted)}";
 const lightStyles = ".li{margin-bottom:var(--px-padding-xs-mobile)}@media only screen and (min-width: 48em){.li{margin-bottom:var(--px-padding-xs-tablet)}}@media only screen and (min-width: 64.0625em){.li{margin-bottom:var(--px-padding-xs-laptop)}}@media only screen and (min-width: 90.0625em){.li{margin-bottom:var(--px-padding-xs-desktop)}}";
 const typographyStyles = new CSSStyleSheet();
@@ -17159,13 +16937,11 @@ export {
   AgGridTableThContent,
   AppleSeed,
   AttributeBreakpointHandlerDelegate,
-  BREADCRUMB_ITEM_CONNECTED_EVENT,
   Banner,
   Breadcrumb,
   BreadcrumbItem,
   Button,
   ButtonIcon,
-  CAROUSEL_ITEM_CONNECTED_EVENT,
   Card,
   Carousel,
   CarouselItem,
@@ -17202,7 +16978,6 @@ export {
   Image,
   Input,
   InputState,
-  LIST_ITEM_CONNECTED_EVENT,
   Link,
   List,
   ListItem,
@@ -17238,7 +17013,6 @@ export {
   Status,
   StatusCard,
   Switch,
-  TIMELINE_ITEM_CONNECTED_EVENT,
   Table,
   Tag,
   Tbody,
@@ -17342,7 +17116,6 @@ export {
   statusStateValues,
   statusValues,
   styleSheet$A as styleSheet,
-  subgridRowsValues,
   suffixButtonIconVariantValues,
   textalignValues,
   tileBackgroundColorValues,