@proximus/lavender 1.4.7-alpha.7 → 1.4.7-alpha.8

package/dist/lavender.es.js

@@ -6,7 +6,7 @@ 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-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__ = {};
@@ -3761,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" >
@@ -3806,11 +3807,7 @@ const _Banner = class _Banner extends VerticallyExtendedElement {
   connectedCallback() {
     var _a;
     (_a = super.connectedCallback) == null ? void 0 : _a.call(this);
-    if (this.reduced) {
-      this.$container.setAttribute("padding", "m");
-    } else {
-      this.$container.setAttribute("padding", "l");
-    }
+    __privateMethod(this, _Banner_instances, applyReducedPadding_fn).call(this);
     this.createGridTemplateAreas();
     this.createGridding();
     this.observer = new MutationObserver(() => {
@@ -3851,6 +3848,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":
@@ -4081,42 +4081,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")) {
@@ -4130,11 +4136,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");
@@ -4146,50 +4155,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:
@@ -4198,14 +4207,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");
@@ -4217,11 +4223,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)}}';
@@ -5306,12 +5327,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",
@@ -5405,10 +5428,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;
@@ -5467,6 +5490,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);
 }
@@ -5483,6 +5513,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);
@@ -8382,8 +8420,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();
@@ -12080,8 +12116,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";
@@ -12093,6 +12191,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">
@@ -12100,10 +12203,6 @@ const _List = class _List extends PxElement {
       </div>
     `;
   }
-  constructor() {
-    super(styleSheet$l, listCssTokenBreakpoints);
-    this.shadowRoot.innerHTML = this.template();
-  }
   static get observedAttributes() {
     return ["inverted", "variant"];
   }
@@ -12111,17 +12210,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)) {
@@ -12129,19 +12229,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;
@@ -12225,63 +12314,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() {
@@ -12791,14 +12856,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(
@@ -12817,7 +12879,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);
@@ -12826,10 +12890,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();
@@ -13609,14 +13677,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(
@@ -13627,9 +13691,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 [
@@ -13886,14 +13947,10 @@ 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.querySelector("px-selectable-box-radio")) === this ? 0 : -1;
     this.toggleFooterVisibility();
     this.$slotFooter.addEventListener(
@@ -13904,9 +13961,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 [
@@ -15166,7 +15220,6 @@ class Tabs extends HTMLElement {
     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">
@@ -15186,7 +15239,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";
       }
@@ -15233,9 +15286,8 @@ 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");
+    if (!this.$tabList.hasAttribute("aria-labelledby")) {
+      this.$tabList.setAttribute("aria-labelledby", this._label);
     }
     this.role = "tablist";
     if (this.internals) {
@@ -15262,15 +15314,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"))) {
@@ -15311,11 +15361,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;
@@ -16916,67 +16963,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() {
@@ -16996,7 +16986,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"];
@@ -17048,6 +17046,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();
@@ -17101,11 +17170,13 @@ export {
   AgGridTableThContent,
   AppleSeed,
   AttributeBreakpointHandlerDelegate,
+  BREADCRUMB_ITEM_CONNECTED_EVENT,
   Banner,
   Breadcrumb,
   BreadcrumbItem,
   Button,
   ButtonIcon,
+  CAROUSEL_ITEM_CONNECTED_EVENT,
   Card,
   Carousel,
   CarouselItem,
@@ -17142,6 +17213,7 @@ export {
   Image,
   Input,
   InputState,
+  LIST_ITEM_CONNECTED_EVENT,
   Link,
   List,
   ListItem,
@@ -17177,6 +17249,7 @@ export {
   Status,
   StatusCard,
   Switch,
+  TIMELINE_ITEM_CONNECTED_EVENT,
   Table,
   Tag,
   Tbody,