@proximus/lavender 1.4.6-beta.1 → 1.4.6-beta.2

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, _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;
+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;
 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-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-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 __vite_import_meta_env__ = {};
 function getSupportedPropertyNames(htmlElementName) {
   const $element = document.createElement(htmlElementName);
@@ -881,43 +881,43 @@ function transferAccessibilityAttributes(sourceElement, targetElement, applyLabe
     sourceElement.setAttribute("aria-labelledby", id);
   }
 }
-function cssTokenBreakpoints(attributeName, selector, attributeValues, cssPropertyPrefix = "", generatedCssPropertyName) {
+function cssTokenBreakpoints(attributeName, selector, attributeValues, cssPropertyPrefix = "", generatedCssPropertyName, selectorAttributeName = attributeName) {
   const stylesheet2 = new CSSStyleSheet();
   const styles2 = attributeValues.reduce(
     (prev, attributeValue) => prev + `
-  ${selector(attributeName, attributeValue)} {
+  ${selector(selectorAttributeName, 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(attributeName, attributeValue)} {
+    ${selector(selectorAttributeName, attributeValue)} {
       ${attributeName}: var(--${cssPropertyPrefix}-${attributeValue}-mobile);
       ${generatedCssPropertyName ? `${generatedCssPropertyName}: var(--${cssPropertyPrefix}-${attributeValue}-mobile)` : ""}
     }
   }
-  ${selector(attributeName, attributeValue, "mobile")} {
+  ${selector(selectorAttributeName, 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(attributeName, attributeValue, "tablet")} {
+  ${selector(selectorAttributeName, 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(attributeName, attributeValue, "laptop")} {
+  ${selector(selectorAttributeName, 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(attributeName, attributeValue, "desktop")} {
+  ${selector(selectorAttributeName, attributeValue, "desktop")} {
   /* Desktop - 1025px*/
   @media only screen and (min-width: 64.0625em) {
       ${attributeName}: var(--${cssPropertyPrefix}-${attributeValue}-desktop) !important;
@@ -2270,7 +2270,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)}@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 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 containerStyles = new CSSStyleSheet();
 containerStyles.replaceSync(containerCss);
 const anchorSpacingValues = [
@@ -2279,6 +2279,20 @@ 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 = [
@@ -2326,9 +2340,17 @@ const containerBreakpoints = [
     paddingValues,
     paddingPrefix$1,
     "--container-padding-left"
+  ),
+  cssTokenBreakpoints(
+    "gap",
+    attributeBreakpointCSSSelector$3,
+    gapValues,
+    "px-spacing",
+    void 0,
+    "subgrid-gap"
   )
 ];
-const _Container = class _Container extends VerticallyExtendedElement {
+const _Container = class _Container extends WithExtraAttributes {
   constructor() {
     super(containerStyles, ...containerBreakpoints);
     this.template = () => `<div class="container">
@@ -2339,6 +2361,7 @@ const _Container = class _Container extends VerticallyExtendedElement {
     </div>`;
     this._bgObserver = null;
     this._isInViewport = false;
+    this.contentObserver = null;
     this.shadowRoot.innerHTML = this.template();
   }
   static get observedAttributes() {
@@ -2372,11 +2395,11 @@ const _Container = class _Container extends VerticallyExtendedElement {
       "box-shadow",
       "anchor-offset",
       "anchor-spacing",
-      "inverted"
+      "inverted",
+      "subgrid-rows"
     ];
   }
   connectedCallback() {
-    super.connectedCallback();
     if (!this.padding) {
       this.padding = "m";
     }
@@ -2412,9 +2435,9 @@ const _Container = class _Container extends VerticallyExtendedElement {
     this._bgObserver.observe(this.$el);
   }
   disconnectedCallback() {
-    var _a;
+    var _a, _b;
     (_a = this._bgObserver) == null ? void 0 : _a.disconnect();
-    this.contentObserver.disconnect();
+    (_b = this.contentObserver) == null ? void 0 : _b.disconnect();
   }
   attributeChangedCallback(attrName, oldValue, newValue) {
     if (oldValue !== newValue) {
@@ -2492,6 +2515,14 @@ const _Container = class _Container extends VerticallyExtendedElement {
         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;
@@ -2673,6 +2704,19 @@ const _Container = class _Container extends VerticallyExtendedElement {
     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"]');
   }
@@ -3013,10 +3057,44 @@ const _Container = class _Container extends VerticallyExtendedElement {
     this.setAttribute("anchor-spacing", value);
   }
   get inverted() {
-    return this.getAttribute("inverted");
+    return this.hasAttribute("inverted");
   }
   set inverted(value) {
-    this.setAttribute("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);
   }
 };
 _Container.nativeName = "div";
@@ -3683,6 +3761,7 @@ 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" >
@@ -3729,6 +3808,7 @@ 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(() => {
@@ -3769,6 +3849,9 @@ 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":
@@ -3999,42 +4082,48 @@ 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 breadcrumbStyles = new CSSStyleSheet();
-breadcrumbStyles.replaceSync(breadcrumbCss);
-class Breadcrumb extends WithExtraAttributes {
-  template() {
-    return `
-      <nav class="breadcrumb">
-        <div role="list">
-          <slot></slot>
-        </div>
-      </nav>
-    `;
-  }
+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(breadcrumbStyles);
-    this.shadowRoot.innerHTML = this.template();
-  }
-  connectedCallback() {
-    if (!this.ariaLabel) {
-      this.ariaLabel = "Breadcrumb";
+    super(breadcrumbItemStyles);
+    this.template = () => `<div class="breadcrumb-item" role="listitem"><slot></slot></div>`;
+    if (this.shadowRoot) {
+      this.shadowRoot.innerHTML = this.template();
     }
   }
   static get observedAttributes() {
-    return [...super.observedAttributes, "inverted", "aria-label"];
+    return [...super.observedAttributes, "inverted"];
+  }
+  connectedCallback() {
+    if (this.$icon) {
+      this.$icon.setAttribute("size", "s");
+    }
+    if (!this.$link) {
+      this.$el.setAttribute("aria-current", "page");
+    }
+    this.dispatchEvent(
+      new CustomEvent(BREADCRUMB_ITEM_CONNECTED_EVENT, {
+        bubbles: true,
+        composed: true
+      })
+    );
   }
   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")) {
@@ -4048,11 +4137,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");
@@ -4064,50 +4156,50 @@ 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");
-    }
-  }
-}
-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 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 {
+const breadcrumbStyles = new CSSStyleSheet();
+breadcrumbStyles.replaceSync(breadcrumbCss);
+class Breadcrumb extends WithExtraAttributes {
   constructor() {
-    super(breadcrumbItemStyles);
-    this.template = () => `<div class="breadcrumb-item" role="listitem"><slot></slot></div>`;
-    if (this.shadowRoot) {
-      this.shadowRoot.innerHTML = this.template();
-    }
+    super(breadcrumbStyles);
+    __privateAdd(this, _Breadcrumb_instances);
+    this.shadowRoot.innerHTML = this.template();
   }
-  static get observedAttributes() {
-    return [...super.observedAttributes, "inverted"];
+  template() {
+    return `
+      <nav class="breadcrumb">
+        <div role="list">
+          <slot></slot>
+        </div>
+      </nav>
+    `;
   }
   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.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":
-          for (let i = 0; i < this.$children.length; i++) {
-            if (!this.$children[i].hasAttribute("inverted")) {
-              this.$children[i].toggleAttribute("inverted");
-            }
+          if (this.isConnected) {
+            __privateMethod(this, _Breadcrumb_instances, applyInverted_fn).call(this);
           }
           break;
         default:
@@ -4116,14 +4208,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");
@@ -4135,11 +4224,26 @@ const _BreadcrumbItem = class _BreadcrumbItem extends PxElement {
       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);
+  }
 };
-_BreadcrumbItem.nativeName = "div";
-let BreadcrumbItem = _BreadcrumbItem;
-if (!customElements.get("px-breadcrumb-item")) {
-  customElements.define("px-breadcrumb-item", BreadcrumbItem);
+if (!customElements.get("px-breadcrumb")) {
+  customElements.define("px-breadcrumb", Breadcrumb);
 }
 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)}}';
@@ -5224,12 +5328,14 @@ 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",
@@ -5323,10 +5429,10 @@ class Carousel extends HTMLElement {
     this.visibleItemsAttributeDelegate.attributeValue = visibleItemCalcFunction(
       this.getAttribute("gap") || "s"
     );
-    requestAnimationFrame(() => {
-      this.handleAppleSeedDisplay();
+    this.addEventListener(CAROUSEL_ITEM_CONNECTED_EVENT, () => {
+      __privateMethod(this, _Carousel_instances, syncItems_fn).call(this);
     });
-    this.$appleseed.setAttribute("amount", `${this.itemNumbers}`);
+    __privateMethod(this, _Carousel_instances, syncItems_fn).call(this);
     this.$carousel.addEventListener("scroll", throttle(this.onScroll, 500));
     this.$previous.addEventListener("click", () => {
       this.$carousel.scrollLeft -= this.$carousel.clientWidth;
@@ -5385,6 +5491,13 @@ 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);
 }
@@ -5401,6 +5514,14 @@ 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);
@@ -7791,7 +7912,7 @@ class CellRadio extends WithExtraAttributes {
   }
   connectedCallback() {
     var _a;
-    this.tabIndex = ((_a = this.parentElement) == null ? void 0 : _a.firstElementChild) === this ? 0 : -1;
+    this.tabIndex = ((_a = this.parentElement) == null ? void 0 : _a.querySelector("px-cell-radio")) === this ? 0 : -1;
     this.role = "radio";
     if (this.internals) {
       this.internals.role = "radio";
@@ -8300,8 +8421,6 @@ 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();
@@ -9488,19 +9607,14 @@ class Drawer extends HTMLElement {
   connectedCallback() {
     var _a;
     this.toggleFooterVisibility = this.toggleFooterVisibility.bind(this);
-    if (!this.hasAttribute("showfrom")) {
-      this.setAttribute("showfrom", "bottom");
+    if (this.$opener) {
+      this.addOpenListener();
     }
-    if (this.hasAttribute("closedby")) {
-      const $closer = document.querySelector(
-        `#${this.getAttribute("closedby")}`
-      );
-      $closer == null ? void 0 : $closer.addEventListener("click", () => {
-        this.hide();
-      });
+    if (this.$closer) {
+      this.addCloseListener();
     }
-    if (this.hasAttribute("openedby")) {
-      this.addOpenListener();
+    if (!this.hasAttribute("showfrom")) {
+      this.setAttribute("showfrom", "bottom");
     }
     this.$closeButton.addEventListener("click", () => {
       this.hide();
@@ -9512,36 +9626,56 @@ class Drawer extends HTMLElement {
     );
   }
   static get observedAttributes() {
-    return ["open", "aria-label-close-button", "openedby"];
+    return ["open", "aria-label-close-button", "openedby", "closedby"];
   }
-  attributeChangedCallback(name, oldValue, newValue) {
+  attributeChangedCallback(attrName, oldValue, newValue) {
     var _a, _b, _c;
-    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();
+    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;
     }
   }
   disconnectedCallback() {
-    var _a;
+    var _a, _b;
     (_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;
@@ -9567,15 +9701,41 @@ class Drawer extends HTMLElement {
     }
   }
   addOpenListener() {
-    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());
+    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
+      });
     }
   }
-  get $opener() {
+  addCloseListener() {
+    var _a;
+    if (this.$closer) {
+      (_a = this.$closer) == null ? void 0 : _a.addEventListener("click", () => {
+        this.hide();
+      });
+    }
+  }
+  get $opener() {
     return document.querySelector(
-      `px-button#${this.getAttribute("openedby")}`
+      `#${this.getAttribute("openedby")}`
+    );
+  }
+  get $closer() {
+    return document.querySelector(
+      `#${this.getAttribute("closedby")}`
     );
   }
   get $closeButton() {
@@ -9605,10 +9765,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() {
@@ -9617,6 +9777,12 @@ 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);
@@ -11951,8 +12117,70 @@ 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$o);
+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);
 const listVariantValues = ["", "ul", "ol"];
 const AttributeBreakpointCSSSelector = (attributeName, attributeValue, device) => `:host([${attributeName}${device ? `--${device}` : ""}='${attributeValue}']) .list`;
 const gapPrefix = "px-spacing";
@@ -11964,6 +12192,11 @@ 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">
@@ -11971,10 +12204,6 @@ const _List = class _List extends PxElement {
       </div>
     `;
   }
-  constructor() {
-    super(styleSheet$l, listCssTokenBreakpoints);
-    this.shadowRoot.innerHTML = this.template();
-  }
   static get observedAttributes() {
     return ["inverted", "variant"];
   }
@@ -11982,17 +12211,18 @@ 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":
-          for (let i = 0; i < this.$children.length; i++) {
-            if (!this.$children[i].hasAttribute("inverted")) {
-              this.$children[i].toggleAttribute("inverted");
-            }
+          if (this.isConnected) {
+            __privateMethod(this, _List_instances, applyInverted_fn2).call(this);
           }
-          this.$el.toggleAttribute("inverted", newValue !== null);
           break;
         case "variant":
           if (!this.checkName(listVariantValues, newValue)) {
@@ -12000,19 +12230,8 @@ const _List = class _List extends PxElement {
               `${newValue} is not an allowed variant value for ${this.tagName.toLowerCase()}`
             );
           }
-          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");
-            }
+          if (this.isConnected) {
+            __privateMethod(this, _List_instances, applyVariant_fn).call(this, newValue);
           }
           super.attributeChangedCallback(attrName, oldValue, newValue);
           break;
@@ -12096,63 +12315,39 @@ const _List = class _List extends PxElement {
     }
   }
 };
-_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>
-    `;
-  }
-  constructor() {
-    super(styleSheet$k);
-    this.shadowRoot.innerHTML = this.template();
-  }
-  static get observedAttributes() {
-    return ["inverted"];
+_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);
   }
-  // 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;
+  (_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");
       }
-    }
-  }
-  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");
+      child.removeAttribute("variant");
+      child.style.removeProperty("--item-index");
     }
   }
 };
-_ListItem.nativeName = "div";
-let ListItem = _ListItem;
-if (!customElements.get("px-list-item")) {
-  customElements.define("px-list-item", ListItem);
+_List.nativeName = "div";
+let List = _List;
+if (!customElements.get("px-list")) {
+  customElements.define("px-list", List);
 }
 class MDDCloser extends HTMLElement {
   constructor() {
@@ -12611,6 +12806,7 @@ 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>
@@ -12661,14 +12857,11 @@ 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("media-src")) {
-      this.updateMediaSrc(this.getAttribute("media-src"));
+    if (this.hasAttribute("closedby")) {
+      this.addCloseListener(this.getAttribute("closedby"));
     }
     this.toggleDescriptionVisibility();
     (_a = this.$slotDescription) == null ? void 0 : _a.addEventListener(
@@ -12687,7 +12880,9 @@ class Modal extends HTMLElement {
   attributeChangedCallback(attrName, oldValue, newValue) {
     switch (attrName) {
       case "open":
-        this.handleOpenChange();
+        if (this.isConnected) {
+          this.handleOpenChange();
+        }
         break;
       case "status":
         this.handleStatusChange(oldValue, newValue);
@@ -12696,10 +12891,14 @@ class Modal extends HTMLElement {
         this.updateMediaSrc(newValue);
         break;
       case "openedby":
-        this.addOpenListener();
+        if (this.isConnected) {
+          this.addOpenListener();
+        }
         break;
       case "closedby":
-        this.addCloseListener(newValue);
+        if (this.isConnected) {
+          this.addCloseListener(newValue);
+        }
         break;
       case "id":
         this.addEventListenersToCommandButtons();
@@ -12815,12 +13014,29 @@ class Modal extends HTMLElement {
   addOpenListener() {
     var _a;
     this.removeOpenListener();
-    this.openerElement = this.$opener;
-    (_a = this.openerElement) == null ? void 0 : _a.addEventListener("click", this.onOpenClick);
+    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
+      });
+    }
   }
   removeOpenListener() {
-    var _a;
-    (_a = this.openerElement) == null ? void 0 : _a.removeEventListener("click", this.onOpenClick);
+    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);
     this.openerElement = null;
   }
   addCloseListener(value) {
@@ -13235,7 +13451,9 @@ const _Price = class _Price extends PxElement {
     });
     this.observer.observe(this, {
       childList: true,
-      subtree: true
+      subtree: true,
+      // By observing characterData, we ensure that any changes to the text content of the price element will trigger a rebuild of the price display, allowing it to update correctly in response to dynamic data changes.
+      characterData: true
     });
   }
   attributeChangedCallback(attrName, oldValue, newValue) {
@@ -13462,14 +13680,10 @@ 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(
@@ -13480,9 +13694,6 @@ 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 [
@@ -13739,15 +13950,11 @@ 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.ariaChecked = `${this.checked}`;
-    this.tabIndex = ((_a = this.parentElement) == null ? void 0 : _a.firstElementChild) === this ? 0 : -1;
+    this.tabIndex = ((_a = this.parentElement) == null ? void 0 : _a.querySelector("px-selectable-box-radio")) === this ? 0 : -1;
     this.toggleFooterVisibility();
     this.$slotFooter.addEventListener(
       "slotchange",
@@ -13757,9 +13964,6 @@ 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 [
@@ -15018,8 +15222,6 @@ 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">
@@ -15039,7 +15241,7 @@ class Tabs extends HTMLElement {
     </div>
   `;
     this.handleNextPreviousDisplay = () => {
-      if (this.allTabsConnected() && this.$prefixButton && this.$suffixButton) {
+      if (this.$prefixButton && this.$suffixButton) {
         this.$prefixButton.style.display = this.shouldDisplayScrollLeftButton() ? "" : "none";
         this.$suffixButton.style.display = this.shouldDisplayScrollRightButton() ? "" : "none";
       }
@@ -15051,7 +15253,6 @@ class Tabs extends HTMLElement {
   }
   static get observedAttributes() {
     return [
-      "label",
       "inverted",
       "aria-label-next",
       "aria-label-previous",
@@ -15060,9 +15261,6 @@ class Tabs extends HTMLElement {
   }
   attributeChangedCallback(name, oldValue, newValue) {
     switch (name) {
-      case "label":
-        this.label = newValue;
-        break;
       case "aria-label-next":
         if (!this.hasAttribute("hide-controls")) {
           this.$suffixButton.setAttribute("aria-label", newValue || "Next tab");
@@ -15086,10 +15284,6 @@ 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";
@@ -15115,15 +15309,13 @@ class Tabs extends HTMLElement {
       }
     );
     this.addEventListener(TAB_CONNECTED_EVENT, () => {
-      this.tabsConnected++;
       this.handleNextPreviousDisplay();
-      if (this.allTabsConnected() && this.inverted) {
+      if (this.inverted) {
         __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.handleNextPreviousDisplay();
+    __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"))) {
@@ -15164,11 +15356,8 @@ 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.allTabsConnected() && this.$tabList.scrollWidth > this.$tabList.clientWidth && this.$tabList.scrollWidth - this.$tabList.scrollLeft !== this.$tabList.clientWidth;
+    return this.$tabList.scrollWidth > this.$tabList.clientWidth && this.$tabList.scrollWidth - this.$tabList.scrollLeft !== this.$tabList.clientWidth;
   }
   shouldDisplayScrollLeftButton() {
     return this.$tabList.scrollLeft > 0;
@@ -15211,12 +15400,6 @@ class Tabs extends HTMLElement {
   get $suffixButton() {
     return this.shadowRoot.querySelector("#next");
   }
-  get label() {
-    return this.$tabList.getAttribute("aria-labelledby");
-  }
-  set label(value) {
-    this.$tabList.setAttribute("aria-labelledby", value);
-  }
   get inverted() {
     return this.hasAttribute("inverted");
   }
@@ -16094,7 +16277,7 @@ class TileRadio extends WithExtraAttributes {
       this.internals.ariaChecked = `${this.checked}`;
     }
     this.ariaChecked = `${this.checked}`;
-    this.tabIndex = ((_a = this.parentElement) == null ? void 0 : _a.firstElementChild) === this ? 0 : -1;
+    this.tabIndex = ((_a = this.parentElement) == null ? void 0 : _a.querySelector("px-tile-radio")) === this ? 0 : -1;
     if (this.$slotPrefix) {
       const prefixImg = this.querySelector('px-img[slot="prefix"]');
       if (prefixImg) {
@@ -16769,67 +16952,10 @@ if (!customElements.get("px-tile-switch")) {
   customElements.define("px-tile-switch", TileSwitch);
 }
 const styles$1 = ".timeline{list-style:none;margin:0;padding:0}";
-const styleSheet$1 = new CSSStyleSheet();
-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);
+const styleSheet$1 = new CSSStyleSheet();
+styleSheet$1.replaceSync(styles);
+const TIMELINE_ITEM_CONNECTED_EVENT = "px-timeline-item-connected";
 let item = "1";
 class TimelineItem extends HTMLElement {
   template() {
@@ -16849,7 +16975,15 @@ class TimelineItem extends HTMLElement {
     super();
     this.attachShadow({ mode: "open" });
     this.shadowRoot.innerHTML = this.template();
-    this.shadowRoot.adoptedStyleSheets = [styleSheet];
+    this.shadowRoot.adoptedStyleSheets = [styleSheet$1];
+  }
+  connectedCallback() {
+    this.dispatchEvent(
+      new CustomEvent(TIMELINE_ITEM_CONNECTED_EVENT, {
+        bubbles: true,
+        composed: true
+      })
+    );
   }
   static get observedAttributes() {
     return ["inverted", "lastchild", "item"];
@@ -16901,6 +17035,77 @@ 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();
@@ -16954,11 +17159,13 @@ export {
   AgGridTableThContent,
   AppleSeed,
   AttributeBreakpointHandlerDelegate,
+  BREADCRUMB_ITEM_CONNECTED_EVENT,
   Banner,
   Breadcrumb,
   BreadcrumbItem,
   Button,
   ButtonIcon,
+  CAROUSEL_ITEM_CONNECTED_EVENT,
   Card,
   Carousel,
   CarouselItem,
@@ -16995,6 +17202,7 @@ export {
   Image,
   Input,
   InputState,
+  LIST_ITEM_CONNECTED_EVENT,
   Link,
   List,
   ListItem,
@@ -17030,6 +17238,7 @@ export {
   Status,
   StatusCard,
   Switch,
+  TIMELINE_ITEM_CONNECTED_EVENT,
   Table,
   Tag,
   Tbody,
@@ -17133,6 +17342,7 @@ export {
   statusStateValues,
   statusValues,
   styleSheet$A as styleSheet,
+  subgridRowsValues,
   suffixButtonIconVariantValues,
   textalignValues,
   tileBackgroundColorValues,