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

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;
+var _src, _internals, _template, _Card_instances, updateMediaPosition_fn, updateMedia_fn, updateBackgroundColor_fn, _Dropdown_instances, resetManualPopoverDisplay_fn, _onTriggerClick, _beforeToggle, _onToggle, handleManualPopoverDisplay_fn, _onResize, _Header_instances, setMDDDialogOffset_fn, togglePanel_fn, showMobileMenu_fn, hideMobileMenu_fn, hidePanel_fn, $mobileMenu_get, $navigationItems_get, $headerWrapper_get, $megaDropdowns_get, _template2, _HeaderMobileMenu_instances, createMobileMenuPanelDropDowns_fn, _Select_instances, updateOptions_fn, _mutationObserver, _MegaDropDown_instances, $backButton_get, $title_get, $footer_get, $closeButtons_get, _Tabs_instances, handleInverted_fn, handleHideControls_fn;
 const styles$K = ':host{display:block}:host ::slotted(px-h1[auto-spacing]),:host ::slotted(px-h2[auto-spacing]),:host ::slotted(px-h3[auto-spacing]),:host ::slotted(px-h4[auto-spacing]),:host ::slotted(px-h5[auto-spacing]),:host ::slotted(px-h6[auto-spacing]){margin-bottom:calc(var(--px-spacing-heading-to-content-mobile) - var(--host-gap--mobile))}:host([overflow-x="auto"]){margin:calc(calc(var(--px-focus-outline-mobile) + var(--px-focus-offset-mobile)) * -1)}:host([overflow-x="auto"]) .flex-container{padding:calc(var(--px-focus-outline-mobile) + var(--px-focus-offset-mobile))}.flex-container{display:flex;height:100%;width:100%;box-sizing:border-box;flex-direction:var(--flex-direction--mobile-value);gap:var(--flex-gap--mobile-value);flex-wrap:var(--flex-wrap--mobile-value);justify-content:var(--flex-justify-content--mobile-value);align-items:var(--flex-align-items--mobile-value);overflow-x:var(--overflow-x-all)}@media only screen and (max-width: 47.9375em){.flex-container{overflow-x:var(--overflow-x-all-mobile, var(--overflow-x-all));scrollbar-width:none}.flex-container::-webkit-scrollbar{display:none}}@media only screen and (min-width: 48em){.flex-container{flex-direction:var(--flex-direction--tablet-value);gap:var(--flex-gap--tablet-value);flex-wrap:var(--flex-wrap--tablet-value);justify-content:var(--flex-justify-content--tablet-value);align-items:var(--flex-align-items--tablet-value)}:host ::slotted(px-h1[auto-spacing]),:host ::slotted(px-h2[auto-spacing]),:host ::slotted(px-h3[auto-spacing]),:host ::slotted(px-h4[auto-spacing]),:host ::slotted(px-h5[auto-spacing]),:host ::slotted(px-h6[auto-spacing]){margin-bottom:calc(var(--px-spacing-heading-to-content-tablet) - var(--host-gap--tablet))}:host([overflow-x="auto"]){margin:calc(calc(var(--px-focus-outline-tablet) + var(--px-focus-offset-tablet)) * -1)}:host([overflow-x="auto"]) .flex-container{padding:calc(var(--px-focus-outline-tablet) + var(--px-focus-offset-tablet))}}@media only screen and (min-width: 48em) and (max-width: 64em){.flex-container{overflow-x:var(--overflow-x-all-tablet, var(--overflow-x-all));scrollbar-width:none}.flex-container::-webkit-scrollbar{display:none}}@media only screen and (min-width: 64.0625em){.flex-container{flex-direction:var(--flex-direction--laptop-value);gap:var(--flex-gap--laptop-value);flex-wrap:var(--flex-wrap--laptop-value);justify-content:var(--flex-justify-content--laptop-value);align-items:var(--flex-align-items--laptop-value)}:host ::slotted(px-h1[auto-spacing]),:host ::slotted(px-h2[auto-spacing]),:host ::slotted(px-h3[auto-spacing]),:host ::slotted(px-h4[auto-spacing]),:host ::slotted(px-h5[auto-spacing]),:host ::slotted(px-h6[auto-spacing]){margin-bottom:calc(var(--px-spacing-heading-to-content-laptop) - var(--host-gap--laptop))}:host([overflow-x="auto"]){margin:calc(calc(var(--px-focus-outline-laptop) + var(--px-focus-offset-laptop)) * -1)}:host([overflow-x="auto"]) .flex-container{padding:calc(var(--px-focus-outline-laptop) + var(--px-focus-offset-laptop))}}@media only screen and (min-width: 64.0625em) and (max-width: 90em){.flex-container{overflow-x:var(--overflow-x-all-laptop, var(--overflow-x-all))}}@media only screen and (min-width: 90.0625em){.flex-container{flex-direction:var(--flex-direction--desktop-value);gap:var(--flex-gap--desktop-value);flex-wrap:var(--flex-wrap--desktop-value);justify-content:var(--flex-justify-content--desktop-value);align-items:var(--flex-align-items--desktop-value);overflow-x:var(--overflow-x-all-desktop, var(--overflow-x-all))}:host ::slotted(px-h1[auto-spacing]),:host ::slotted(px-h2[auto-spacing]),:host ::slotted(px-h3[auto-spacing]),:host ::slotted(px-h4[auto-spacing]),:host ::slotted(px-h5[auto-spacing]),:host ::slotted(px-h6[auto-spacing]){margin-bottom:calc(var(--px-spacing-heading-to-content-desktop) - var(--host-gap--desktop))}:host([overflow-x="auto"]){margin:calc(calc(var(--px-focus-outline-desktop) + var(--px-focus-offset-desktop)) * -1)}:host([overflow-x="auto"]) .flex-container{padding:calc(var(--px-focus-outline-desktop) + var(--px-focus-offset-desktop))}}';
 const commonStyles = ":host([grow]){flex-grow:var(--grow-value)}:host([shrink]){flex-shrink:var(--shrink-value)}:host([basis]){flex-basis:var(--basis-value)}:host([align-self]){align-self:var(--align-self-value)}:host([col-span]){grid-column:span var(--col-span-value) / span var(--col-span-value)}:host([justify-self]){justify-self:var(--justify-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__ = {};
@@ -168,7 +168,6 @@ class WithExtraAttributes extends HTMLElement {
         log(
           `${newValue} is not an allowed ${attrValue} value for ${this.tagName.toLowerCase()}`
         );
-        return;
       }
     }
     const hasBreakpoint = name.indexOf("--") > -1;
@@ -718,7 +717,7 @@ const backgroundColorValues = [
   "purpose-info",
   "purpose-eco",
   "purpose-notification",
-  "footer"
+  "footer-sitemap"
 ];
 const backgroundSizeValues = ["", "cover", "contain", "default"];
 const boxShadowValues = ["", "none", "s", "m", "l", "xl"];
@@ -833,43 +832,44 @@ function getViewportFormat() {
 function checkName(values, value) {
   return values.includes(value);
 }
+const accessibilityAttributes = [
+  "aria-label",
+  "aria-labelledby",
+  "aria-describedby",
+  "aria-controls",
+  "aria-expanded",
+  "aria-haspopup",
+  "aria-pressed",
+  "aria-selected",
+  "aria-required",
+  "aria-disabled",
+  "aria-live",
+  "aria-atomic",
+  "aria-relevant",
+  "aria-orientation",
+  "aria-valuenow",
+  "aria-valuetext",
+  "aria-valuemin",
+  "aria-valuemax",
+  "aria-details",
+  "aria-modal",
+  "aria-autocomplete",
+  "aria-activedescendant",
+  "aria-colcount",
+  "aria-colindex",
+  "aria-colspan",
+  "aria-rowcount",
+  "aria-rowindex",
+  "aria-rowspan",
+  "aria-keyshortcuts",
+  "aria-placeholder",
+  "aria-invalid",
+  "aria-busy",
+  "aria-owns"
+];
 function transferAccessibilityAttributes(sourceElement, targetElement, applyLabelledBy = true) {
   var _a;
-  [
-    "aria-label",
-    "aria-labelledby",
-    "aria-describedby",
-    "aria-controls",
-    "aria-expanded",
-    "aria-haspopup",
-    "aria-pressed",
-    "aria-selected",
-    "aria-required",
-    "aria-disabled",
-    "aria-live",
-    "aria-atomic",
-    "aria-relevant",
-    "aria-orientation",
-    "aria-valuenow",
-    "aria-valuetext",
-    "aria-valuemin",
-    "aria-valuemax",
-    "aria-details",
-    "aria-modal",
-    "aria-autocomplete",
-    "aria-activedescendant",
-    "aria-colcount",
-    "aria-colindex",
-    "aria-colspan",
-    "aria-rowcount",
-    "aria-rowindex",
-    "aria-rowspan",
-    "aria-keyshortcuts",
-    "aria-placeholder",
-    "aria-invalid",
-    "aria-busy",
-    "aria-owns"
-  ].forEach((attr) => {
+  accessibilityAttributes.forEach((attr) => {
     if (sourceElement.getAttribute(attr)) {
       targetElement.setAttribute(attr, sourceElement.getAttribute(attr));
       sourceElement.removeAttribute(attr);
@@ -1997,15 +1997,6 @@ const iconColorValuesKC = ["Inherit", ...iconColorValues].map(
 const styles$I = ":host{display:inline-flex;flex-direction:column;justify-content:center}svg{font-size:var(--px-size-icon-s);line-height:var(--px-font-line-height-xs);width:1em;height:1em;color:var(--px-color-icon-accent-default)}.inherit{color:inherit}.brand{color:var(--px-color-icon-brand-default)}.accent{color:var(--px-color-icon-accent-default)}.neutral{color:var(--px-color-icon-neutral-default)}.dimmed{color:var(--px-color-icon-dimmed-default)}.purpose-success{color:var(--px-color-icon-purpose-success-default)}.purpose-warning{color:var(--px-color-icon-purpose-warning-default)}.purpose-error{color:var(--px-color-icon-purpose-error-default)}.purpose-unlimited{color:var(--px-color-icon-purpose-unlimited-default)}.purpose-promo{color:var(--px-color-icon-purpose-promo-default)}.state-hover:hover{color:var(--px-color-icon-state-hover-default)}.state-active:active{color:var(--px-color-icon-state-active-default)}.state-disabled{color:var(--px-color-icon-state-disabled-default)}:host([inverted]) svg{color:var(--px-color-icon-accent-inverted)}:host([inverted]) .inherit{color:inherit}:host([inverted]) .brand{color:var(--px-color-icon-brand-inverted)}:host([inverted]) .accent{color:var(--px-color-icon-accent-inverted)}:host([inverted]) .neutral{color:var(--px-color-icon-neutral-inverted)}:host([inverted]) .dimmed{color:var(--px-color-icon-dimmed-inverted)}:host([inverted]) .purpose-success{color:var(--px-color-icon-purpose-success-inverted)}:host([inverted]) .purpose-warning{color:var(--px-color-icon-purpose-warning-inverted)}:host([inverted]) .purpose-error{color:var(--px-color-icon-purpose-error-inverted)}:host([inverted]) .purpose-unlimited{color:var(--px-color-icon-purpose-unlimited-inverted)}:host([inverted]) .purpose-promo{color:var(--px-color-icon-purpose-promo-inverted)}:host([inverted]) .state-hover:hover{color:var(--px-color-icon-state-hover-inverted)}:host([inverted]) .state-active:active{color:var(--px-color-icon-state-active-inverted)}:host([inverted]) .state-disabled{color:var(--px-color-icon-state-disabled-inverted)}.size-xs{font-size:var(--px-size-icon-xs)}.size-s{font-size:var(--px-size-icon-s)}.size-m{font-size:var(--px-size-icon-m)}.size-l{font-size:var(--px-size-icon-l)}.size-xl{font-size:var(--px-size-icon-xl)}";
 const styleSheet$A = new CSSStyleSheet();
 styleSheet$A.replaceSync(styles$I);
-const observedAttributes = [
-  "name",
-  "size",
-  "color",
-  "aria-label",
-  "inverted",
-  "from",
-  "disabled"
-];
 class Icon extends WithExtraAttributes {
   constructor(...styleSheets) {
     var _a;
@@ -2013,7 +2004,7 @@ class Icon extends WithExtraAttributes {
     __privateAdd(this, _src);
     __privateAdd(this, _internals);
     __privateAdd(this, _template, () => `<svg aria-hidden="true">
-      <use xlink:href=""></use>
+      <use></use>
     </svg>`);
     this.shadowRoot.innerHTML = __privateGet(this, _template).call(this);
     __privateSet(this, _internals, (_a = this.attachInternals) == null ? void 0 : _a.call(this));
@@ -2022,7 +2013,16 @@ class Icon extends WithExtraAttributes {
     }
   }
   static get observedAttributes() {
-    return [...super.observedAttributes, ...observedAttributes];
+    return [
+      ...super.observedAttributes,
+      "name",
+      "size",
+      "color",
+      "aria-label",
+      "inverted",
+      "from",
+      "disabled"
+    ];
   }
   attributeChangedCallback(attrName, oldValue, newValue) {
     if (oldValue !== newValue) {
@@ -2056,12 +2056,6 @@ class Icon extends WithExtraAttributes {
   }
   connectedCallback() {
     this.role = "img";
-    if (this.name) {
-      this.$el.firstElementChild.setAttribute(
-        "xlink:href",
-        `#icon-${this.name}`
-      );
-    }
     const iconSet = document.querySelectorAll("px-icon-set");
     if (!iconSet) {
       console.log("<px-icon-set> component not found");
@@ -2074,7 +2068,7 @@ class Icon extends WithExtraAttributes {
       if (icon.getAttribute("name") === this.from && icon.getAttribute("type") !== "font") {
         __privateSet(this, _src, icon.getAttribute("src"));
         this.$el.firstElementChild.setAttribute(
-          "xlink:href",
+          "href",
           `${__privateGet(this, _src)}#icon-${this.name}`
         );
       }
@@ -2108,7 +2102,7 @@ class Icon extends WithExtraAttributes {
   updateName(oldValue, newValue) {
     if (__privateGet(this, _src)) {
       this.$el.firstElementChild.setAttribute(
-        "xlink:href",
+        "href",
         `${__privateGet(this, _src)}#icon-${newValue}`
       );
     }
@@ -2276,9 +2270,15 @@ 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%}.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)) ) )}}@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)) ) )}.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)}@media only screen and (max-width: 47.938em){.container{background-color:var(--background-color--mobile, var(--background-color))}:host([background-image--mobile]) .container{background-image:var(--background-image--mobile, var(--background-image))}:host([background-gradient--mobile]) .container{background-image:var( --background-gradient--mobile, var(--background-gradient) )}:host([inverted]) .container{background-color:var( --background-color-inverted--mobile, var(--background-color-inverted) )}.border-side-top--mobile{border-top-style:solid;border-right-style:none;border-bottom-style:none;border-left-style:none}.border-side-right--mobile{border-top-style:none;border-right-style:solid;border-bottom-style:none;border-left-style:none}.border-side-bottom--mobile{border-top-style:none;border-right-style:none;border-bottom-style:solid;border-left-style:none}.border-side-left--mobile{border-top-style:none;border-right-style:none;border-bottom-style:none;border-left-style:solid}.border-side-block--mobile{border-inline-style:none;border-block-style:solid}.border-side-inline--mobile{border-block-style:none;border-inline-style:solid}.no-border-radius-top--mobile{border-top-left-radius:var(--px-radius-none);border-top-right-radius:var(--px-radius-none)}.no-border-radius-right--mobile{border-top-right-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-bottom--mobile{border-bottom-left-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-left--mobile{border-top-left-radius:var(--px-radius-none);border-bottom-left-radius:var(--px-radius-none)}.no-border-radius-all--mobile{border-radius:var(--px-radius-none)}}@media only screen and (min-width: 48em) and (max-width: 64em){.container{background-color:var(--background-color--tablet, var(--background-color))}:host([background-image--tablet]) .container{background-image:var(--background-image--tablet, var(--background-image))}:host([background-gradient--tablet]) .container{background-image:var( --background-gradient--tablet, var(--background-gradient) )}:host([inverted]) .container{background-color:var( --background-color-inverted--tablet, var(--background-color-inverted) )}.no-border-radius-top--tablet{border-top-left-radius:var(--px-radius-none);border-top-right-radius:var(--px-radius-none)}.no-border-radius-right--tablet{border-top-right-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-bottom--tablet{border-bottom-left-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-left--tablet{border-top-left-radius:var(--px-radius-none);border-bottom-left-radius:var(--px-radius-none)}.no-border-radius-all--tablet{border-radius:var(--px-radius-none)}.border-side-top--tablet{border-top-style:solid;border-right-style:none;border-bottom-style:none;border-left-style:none}.border-side-right--tablet{border-top-style:none;border-right-style:solid;border-bottom-style:none;border-left-style:none}.border-side-bottom--tablet{border-top-style:none;border-right-style:none;border-bottom-style:solid;border-left-style:none}.border-side-left--tablet{border-top-style:none;border-right-style:none;border-bottom-style:none;border-left-style:solid}.border-side-block--tablet{border-inline-style:none;border-block-style:solid}.border-side-inline--tablet{border-block-style:none;border-inline-style:solid}::slotted([slot="anchor-right"]){right:var( --container-anchor-offset--tablet, var( --container-padding-right, var(--container-padding-inline, var(--container-padding)) ) )}::slotted([slot="anchor-left"]){left:var( --container-anchor-offset--tablet, var( --container-padding-left, var(--container-padding-inline, var(--container-padding)) ) )}:host([anchor-spacing]){margin-top:var(--container-anchor-spacing--tablet)}}@media only screen and (min-width: 64.0625em){.container{background-color:var(--background-color--laptop, var(--background-color))}:host([background-image--laptop]) .container{background-image:var(--background-image--laptop, var(--background-image))}:host([background-gradient--laptop]) .container{background-image:var( --background-gradient--laptop, var(--background-gradient) )}:host([inverted]) .container{background-color:var( --background-color-inverted--laptop, var(--background-color-inverted) )}.no-border-radius-top--laptop{border-top-left-radius:var(--px-radius-none);border-top-right-radius:var(--px-radius-none)}.no-border-radius-right--laptop{border-top-right-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-bottom--laptop{border-bottom-left-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-left--laptop{border-top-left-radius:var(--px-radius-none);border-bottom-left-radius:var(--px-radius-none)}.no-border-radius-all--laptop{border-radius:var(--px-radius-none)}::slotted([slot="anchor-right"]){right:var( --container-anchor-offset--laptop, var( --container-padding-right, var(--container-padding-inline, var(--container-padding)) ) )}::slotted([slot="anchor-left"]){left:var( --container-anchor-offset--laptop, var( --container-padding-left, var(--container-padding-inline, var(--container-padding)) ) )}:host([anchor-spacing]){margin-top:var(--container-anchor-spacing--laptop)}.border-side-top--laptop{border-top-style:solid;border-right-style:none;border-bottom-style:none;border-left-style:none}.border-side-right--laptop{border-top-style:none;border-right-style:solid;border-bottom-style:none;border-left-style:none}.border-side-bottom--laptop{border-top-style:none;border-right-style:none;border-bottom-style:solid;border-left-style:none}.border-side-left--laptop{border-top-style:none;border-right-style:none;border-bottom-style:none;border-left-style:solid}.border-side-block--laptop{border-inline-style:none;border-block-style:solid}.border-side-inline--laptop{border-block-style:none;border-inline-style:solid}}';
 const containerStyles = new CSSStyleSheet();
 containerStyles.replaceSync(containerCss);
+const anchorSpacingValues = [
+  "has-patch",
+  "neighbor-has-patch",
+  "has-ribbon",
+  "neighbor-has-ribbon"
+];
 const attributeBreakpointCSSSelector$3 = (attributeName, attributeValue, device) => `:host([${attributeName}${device ? `--${device}` : ""}='${attributeValue}']) .container`;
 const paddingPrefix$1 = "px-padding";
 const containerBreakpoints = [
@@ -2371,6 +2371,7 @@ const _Container = class _Container extends VerticallyExtendedElement {
       "background-position",
       "box-shadow",
       "anchor-offset",
+      "anchor-spacing",
       "inverted"
     ];
   }
@@ -2488,6 +2489,9 @@ const _Container = class _Container extends VerticallyExtendedElement {
         case "anchor-offset":
           this.updateAnchorOffset(oldValue, newValue, paddingValues);
           break;
+        case "anchor-spacing":
+          this.updateAnchorSpacing(oldValue, newValue, anchorSpacingValues);
+          break;
         default:
           super.attributeChangedCallback(attrName, oldValue, newValue);
           break;
@@ -2643,6 +2647,32 @@ const _Container = class _Container extends VerticallyExtendedElement {
       this.$el.classList.add("anchored");
     }
   }
+  updateAnchorSpacing(oldValue, newValue, attrValue) {
+    if (!checkName(attrValue, newValue)) {
+      log(
+        `${newValue} is not a valid anchor-spacing value for ${this.tagName.toLowerCase()}`
+      );
+      return;
+    }
+    const updateAnchorSpacingStyle = (value) => {
+      if (value !== null && value !== "" && value !== "default") {
+        this.style.setProperty(
+          `--container-anchor-spacing--mobile`,
+          `var(--px-spacing-${value}-mobile)`
+        );
+        this.style.setProperty(
+          `--container-anchor-spacing--tablet`,
+          `var(--px-spacing-${value}-tablet)`
+        );
+        this.style.setProperty(
+          `--container-anchor-spacing--laptop`,
+          `var(--px-spacing-${value}-laptop)`
+        );
+      }
+    };
+    updateAnchorSpacingStyle(oldValue);
+    updateAnchorSpacingStyle(newValue);
+  }
   get $slotAnchor() {
     return this.querySelector('[slot^="anchor"]');
   }
@@ -2976,6 +3006,12 @@ const _Container = class _Container extends VerticallyExtendedElement {
   set anchorOffset(value) {
     this.setAttribute("anchor-offset", value);
   }
+  get anchorSpacing() {
+    return this.getAttribute("anchor-spacing");
+  }
+  set anchorSpacing(value) {
+    this.setAttribute("anchor-spacing", value);
+  }
   get inverted() {
     return this.getAttribute("inverted");
   }
@@ -3695,6 +3731,14 @@ const _Banner = class _Banner extends VerticallyExtendedElement {
     (_a = super.connectedCallback) == null ? void 0 : _a.call(this);
     this.createGridTemplateAreas();
     this.createGridding();
+    this.observer = new MutationObserver(() => {
+      this.createGridTemplateAreas();
+      this.createGridding();
+    });
+    this.observer.observe(this, {
+      childList: true,
+      subtree: true
+    });
   }
   attributeChangedCallback(attrName, oldValue, newValue) {
     if (oldValue !== newValue) {
@@ -3747,6 +3791,9 @@ const _Banner = class _Banner extends VerticallyExtendedElement {
       }
     }
   }
+  disconnectedCallback() {
+    this.observer.disconnect();
+  }
   createGridTemplateAreas() {
     const grid = this.shadowRoot.querySelector(
       ".banner-content"
@@ -4419,6 +4466,7 @@ const _ButtonIcon = class _ButtonIcon extends PxElement {
   static get observedAttributes() {
     return [
       ...super.observedAttributes,
+      ...accessibilityAttributes,
       "inverted",
       "loading",
       "size",
@@ -4444,7 +4492,6 @@ const _ButtonIcon = class _ButtonIcon extends PxElement {
         icon.setAttribute("color", "inherit");
       }
     }
-    transferAccessibilityAttributes(this, this.$el, false);
   }
   attributeChangedCallback(attrName, oldValue, newValue) {
     if (oldValue !== newValue) {
@@ -8642,7 +8689,7 @@ class Section extends HTMLElement {
 if (!customElements.get("px-section")) {
   customElements.define("px-section", Section);
 }
-const headingCss = "h1,.style-title-4xl,::slotted(h1),h2,.style-title-3xl,::slotted(h2),h3,.style-title-2xl,::slotted(h3),h4,.style-title-xl,::slotted(h4),h5,.style-title-l,::slotted(h5),h6,.style-title-m,::slotted(h6),.style-title-s,.style-subtitle{margin:0;font-family:var(--px-font-family);color:var(--heading-color-default, var(--px-color-text-brand-default));text-align:var(--heading-text-align--mobile, left);font-size:var(--px-text-size-heading-s-mobile);line-height:var(--px-line-height-ratio-l);font-weight:var(--px-font-weight-title)}::slotted(h1),::slotted(h2),::slotted(h3),::slotted(h4),::slotted(h5),::slotted(h6){margin-bottom:var(--px-spacing-heading-to-content-mobile)}:host([inverted]) h1,:host([inverted]) .style-title-4xl,:host([inverted]) ::slotted(h1),:host([inverted]) h2,:host([inverted]) .style-title-3xl,:host([inverted]) ::slotted(h2),:host([inverted]) h3,:host([inverted]) .style-title-2xl,:host([inverted]) ::slotted(h3),:host([inverted]) h4,:host([inverted]) .style-title-xl,:host([inverted]) ::slotted(h4),:host([inverted]) h5,:host([inverted]) .style-title-l,:host([inverted]) ::slotted(h5),:host([inverted]) h6,:host([inverted]) .style-title-m,:host([inverted]) ::slotted(h6),:host([inverted]) .style-title-s,:host([inverted]) .style-subtitle{color:var(--heading-color-inverted, var(--px-color-text-brand-inverted))}h1,.style-title-4xl,::slotted(h1){font-size:var(--px-text-size-heading-3xl-mobile);line-height:var(--px-line-height-ratio-s);font-weight:var(--px-font-weight-title-large)}h2,.style-title-3xl,::slotted(h2){font-size:var(--px-text-size-heading-2xl-mobile);line-height:var(--px-line-height-ratio-s);font-weight:var(--px-font-weight-title-large)}h3,.style-title-2xl,::slotted(h3){font-size:var(--px-text-size-heading-xl-mobile);line-height:var(--px-line-height-ratio-s)}h4,.style-title-xl,::slotted(h4){font-size:var(--px-text-size-heading-l-mobile)}h5,.style-title-l,::slotted(h5){font-size:var(--px-text-size-heading-m-mobile)}h6,.style-title-m,::slotted(h6){font-size:var(--px-text-size-heading-base-mobile)}.style-subtitle{font-size:var(--px-text-size-heading-l-mobile);font-weight:var(--px-font-weight-subtitle)}.style-title-s{font-size:var(--px-text-size-heading-s-mobile)}@media only screen and (min-width: 768px){::slotted(h1),::slotted(h2),::slotted(h3),::slotted(h4),::slotted(h5),::slotted(h6){margin-bottom:var(--px-spacing-heading-to-content-tablet)}h1,.style-title-4xl,::slotted(h1),h2,.style-title-3xl,::slotted(h2),h3,.style-title-2xl,::slotted(h3),h4,.style-title-xl,::slotted(h4),h5,.style-title-l,::slotted(h5),h6,.style-title-m,::slotted(h6),.style-title-s,.style-subtitle{text-align:var(--heading-text-align--tablet, left)}h1,.style-title-4xl,::slotted(h1){font-size:var(--px-text-size-heading-5xl-desktop)}h2,.style-title-3xl,::slotted(h2){font-size:var(--px-text-size-heading-4xl-desktop)}h3,.style-title-2xl,::slotted(h3){font-size:var(--px-text-size-heading-2xl-desktop)}h4,.style-title-xl,::slotted(h4){font-size:var(--px-text-size-heading-xl-desktop)}h5,.style-title-l,::slotted(h5){font-size:var(--px-text-size-heading-l-desktop)}h6,.style-title-m,::slotted(h6){font-size:var(--px-text-size-heading-m-desktop)}.style-title-s{font-size:var(--px-text-size-heading-base-desktop)}.style-subtitle{font-size:var(--px-text-size-heading-xl-desktop)}}@media only screen and (min-width: 1025px){::slotted(h1),::slotted(h2),::slotted(h3),::slotted(h4),::slotted(h5),::slotted(h6){margin-bottom:var(--px-spacing-heading-to-content-laptop)}h1,.style-title-4xl,::slotted(h1),h2,.style-title-3xl,::slotted(h2),h3,.style-title-2xl,::slotted(h3),h4,.style-title-xl,::slotted(h4),h5,.style-title-l,::slotted(h5),h6,.style-title-m,::slotted(h6),.style-title-s,.style-subtitle{text-align:var(--heading-text-align--laptop, left)}h1,.style-title-4xl,::slotted(h1){font-size:var(--px-text-size-heading-5xl-desktop)}h2,.style-title-3xl,::slotted(h2){font-size:var(--px-text-size-heading-4xl-desktop)}h3,.style-title-2xl,::slotted(h3){font-size:var(--px-text-size-heading-2xl-desktop)}h4,.style-title-xl,::slotted(h4){font-size:var(--px-text-size-heading-xl-desktop)}h5,.style-title-l,::slotted(h5){font-size:var(--px-text-size-heading-l-desktop)}h6,.style-title-m,::slotted(h6){font-size:var(--px-text-size-heading-m-desktop)}.style-title-s{font-size:var(--px-text-size-heading-base-desktop)}.style-subtitle{font-size:var(--px-text-size-heading-xl-desktop)}}@media screen and (min-width: 1441px){::slotted(h1),::slotted(h2),::slotted(h3),::slotted(h4),::slotted(h5),::slotted(h6){margin-bottom:var(--px-spacing-heading-to-content-desktop)}h1,.style-title-4xl,::slotted(h1),h2,.style-title-3xl,::slotted(h2),h3,.style-title-2xl,::slotted(h3),h4,.style-title-xl,::slotted(h4),h5,.style-title-l,::slotted(h5),h6,.style-title-m,::slotted(h6),.style-title-s,.style-subtitle{text-align:var(--heading-text-align--desktop, left)}}";
+const headingCss = "h1,.style-title-4xl,::slotted(h1),h2,.style-title-3xl,::slotted(h2),h3,.style-title-2xl,::slotted(h3),h4,.style-title-xl,::slotted(h4),h5,.style-title-l,::slotted(h5),h6,.style-title-m,::slotted(h6),.style-title-s,.style-subtitle{margin:0;font-family:var(--px-font-family);color:var(--heading-color-default, var(--px-color-text-brand-default));text-align:var(--heading-text-align--mobile, left);font-size:var(--px-text-size-heading-s-mobile);line-height:var(--px-line-height-ratio-l);font-weight:var(--px-font-weight-title)}::slotted(h1),::slotted(h2),::slotted(h3),::slotted(h4),::slotted(h5),::slotted(h6){margin-bottom:var(--px-spacing-heading-to-content-mobile)}:host([inverted]) h1,:host([inverted]) .style-title-4xl,:host([inverted]) ::slotted(h1),:host([inverted]) h2,:host([inverted]) .style-title-3xl,:host([inverted]) ::slotted(h2),:host([inverted]) h3,:host([inverted]) .style-title-2xl,:host([inverted]) ::slotted(h3),:host([inverted]) h4,:host([inverted]) .style-title-xl,:host([inverted]) ::slotted(h4),:host([inverted]) h5,:host([inverted]) .style-title-l,:host([inverted]) ::slotted(h5),:host([inverted]) h6,:host([inverted]) .style-title-m,:host([inverted]) ::slotted(h6),:host([inverted]) .style-title-s,:host([inverted]) .style-subtitle{color:var(--heading-color-inverted, var(--px-color-text-brand-inverted))}h1,.style-title-4xl,::slotted(h1){font-size:var(--px-text-size-heading-4xl-mobile);line-height:var(--px-line-height-ratio-s);font-weight:var(--px-font-weight-title-large)}h2,.style-title-3xl,::slotted(h2){font-size:var(--px-text-size-heading-3xl-mobile);line-height:var(--px-line-height-ratio-s);font-weight:var(--px-font-weight-title-large)}h3,.style-title-2xl,::slotted(h3){font-size:var(--px-text-size-heading-2xl-mobile);line-height:var(--px-line-height-ratio-s)}h4,.style-title-xl,::slotted(h4){font-size:var(--px-text-size-heading-xl-mobile)}h5,.style-title-l,::slotted(h5){font-size:var(--px-text-size-heading-l-mobile)}h6,.style-title-m,::slotted(h6){font-size:var(--px-text-size-heading-m-mobile)}.style-subtitle{font-size:var(--px-text-size-heading-xl-mobile);font-weight:var(--px-font-weight-subtitle)}.style-title-s{font-size:var(--px-text-size-heading-s-mobile)}@media only screen and (min-width: 48em){::slotted(h1),::slotted(h2),::slotted(h3),::slotted(h4),::slotted(h5),::slotted(h6){margin-bottom:var(--px-spacing-heading-to-content-tablet)}h1,.style-title-4xl,::slotted(h1),h2,.style-title-3xl,::slotted(h2),h3,.style-title-2xl,::slotted(h3),h4,.style-title-xl,::slotted(h4),h5,.style-title-l,::slotted(h5),h6,.style-title-m,::slotted(h6),.style-title-s,.style-subtitle{text-align:var(--heading-text-align--tablet, left)}h1,.style-title-4xl,::slotted(h1){font-size:var(--px-text-size-heading-4xl-tablet)}h2,.style-title-3xl,::slotted(h2){font-size:var(--px-text-size-heading-3xl-tablet)}h3,.style-title-2xl,::slotted(h3){font-size:var(--px-text-size-heading-2xl-tablet)}h4,.style-title-xl,::slotted(h4){font-size:var(--px-text-size-heading-xl-tablet)}h5,.style-title-l,::slotted(h5){font-size:var(--px-text-size-heading-l-tablet)}h6,.style-title-m,::slotted(h6){font-size:var(--px-text-size-heading-m-tablet)}.style-title-s{font-size:var(--px-text-size-heading-s-tablet)}.style-subtitle{font-size:var(--px-text-size-heading-xl-tablet)}}@media only screen and (min-width: 64.0625em){::slotted(h1),::slotted(h2),::slotted(h3),::slotted(h4),::slotted(h5),::slotted(h6){margin-bottom:var(--px-spacing-heading-to-content-laptop)}h1,.style-title-4xl,::slotted(h1),h2,.style-title-3xl,::slotted(h2),h3,.style-title-2xl,::slotted(h3),h4,.style-title-xl,::slotted(h4),h5,.style-title-l,::slotted(h5),h6,.style-title-m,::slotted(h6),.style-title-s,.style-subtitle{text-align:var(--heading-text-align--laptop, left)}h1,.style-title-4xl,::slotted(h1){font-size:var(--px-text-size-heading-4xl-laptop)}h2,.style-title-3xl,::slotted(h2){font-size:var(--px-text-size-heading-3xl-laptop)}h3,.style-title-2xl,::slotted(h3){font-size:var(--px-text-size-heading-2xl-laptop)}h4,.style-title-xl,::slotted(h4){font-size:var(--px-text-size-heading-xl-laptop)}h5,.style-title-l,::slotted(h5){font-size:var(--px-text-size-heading-l-laptop)}h6,.style-title-m,::slotted(h6){font-size:var(--px-text-size-heading-m-laptop)}.style-title-s{font-size:var(--px-text-size-heading-s-laptop)}.style-subtitle{font-size:var(--px-text-size-heading-xl-laptop)}}@media only screen and (min-width: 90.0625em){::slotted(h1),::slotted(h2),::slotted(h3),::slotted(h4),::slotted(h5),::slotted(h6){margin-bottom:var(--px-spacing-heading-to-content-desktop)}h1,.style-title-4xl,::slotted(h1),h2,.style-title-3xl,::slotted(h2),h3,.style-title-2xl,::slotted(h3),h4,.style-title-xl,::slotted(h4),h5,.style-title-l,::slotted(h5),h6,.style-title-m,::slotted(h6),.style-title-s,.style-subtitle{text-align:var(--heading-text-align--desktop, left)}h1,.style-title-4xl,::slotted(h1){font-size:var(--px-text-size-heading-4xl-desktop)}h2,.style-title-3xl,::slotted(h2){font-size:var(--px-text-size-heading-3xl-desktop)}h3,.style-title-2xl,::slotted(h3){font-size:var(--px-text-size-heading-2xl-desktop)}h4,.style-title-xl,::slotted(h4){font-size:var(--px-text-size-heading-xl-desktop)}h5,.style-title-l,::slotted(h5){font-size:var(--px-text-size-heading-l-desktop)}h6,.style-title-m,::slotted(h6){font-size:var(--px-text-size-heading-m-desktop)}.style-title-s{font-size:var(--px-text-size-heading-s-desktop)}.style-subtitle{font-size:var(--px-text-size-heading-xl-desktop)}}";
 const headingStyles$2 = new CSSStyleSheet();
 headingStyles$2.replaceSync(headingCss);
 const typographyStyles$4 = new CSSStyleSheet();
@@ -8885,16 +8932,16 @@ const _ContentHeader = class _ContentHeader extends PxElement {
     this.template = () => `<div class="content-header">
       <div class="contrast-helper"></div>
       <px-section padding-block="l">
-      <px-grid gap="none">
-        <px-container padding="none" border-radius="none" background-color="none"  >
-          <div class="content-header-content">
-            <px-vstack gap="heading-to-subtitle">
-              <px-h1 variant="title-3xl"><slot></slot></px-h1>
-              <slot name="subtitle"></slot>
-            </px-vstack>
-          </div>
-        </px-container>
-      </px-grid>
+        <px-grid gap="none">
+          <px-container padding="none" border-radius="none" background-color="none"  >
+            <div class="content-header-content">
+              <px-vstack gap="heading-to-subtitle">
+                <px-h1><slot></slot></px-h1>
+                <slot name="subtitle"></slot>
+              </px-vstack>
+            </div>
+          </px-container>
+        </px-grid>
       </px-section>
     </div>`;
     this.shadowRoot.innerHTML = this.template();
@@ -11712,24 +11759,53 @@ const _Input = class _Input extends AbstractInputElement {
   }
   connectedCallback() {
     super.connectedCallback();
+  }
+  static get observedAttributes() {
+    return [...super.observedAttributes, "type"];
+  }
+  attributeChangedCallback(attrName, oldValue, newValue) {
+    if (oldValue !== newValue) {
+      super.attributeChangedCallback(attrName, oldValue, newValue);
+      switch (attrName) {
+        case "type":
+          this.updateSearchBehavior();
+          this.$el.setAttribute("type", this.type ?? "text");
+          break;
+      }
+    }
+  }
+  updateSearchBehavior() {
     if (this.$el.type === "search") {
-      this.$el.setAttribute("list", "suggestions");
-      this.syncDataList();
+      this.enableSearchMode();
+      return;
+    }
+    this.disableSearchMode();
+  }
+  enableSearchMode() {
+    this.$el.setAttribute("list", "suggestions");
+    this.syncDataList();
+    if (!this.observer) {
       this.observer = new MutationObserver(() => {
         this.syncDataList();
       });
-      this.observer.observe(this, {
-        childList: true,
-        subtree: true
-      });
     }
-    if (this.type === "search") {
-      if (navigator.userAgent.includes("Chrome")) {
-        this.$el.style.setProperty("--search-icon-focus-width", "2.5rem");
-        this.$el.style.setProperty("--search-icon-datalist-width", "1rem");
-      }
+    this.observer.observe(this, {
+      childList: true,
+      subtree: true
+    });
+    if (navigator.userAgent.includes("Chrome")) {
+      this.$el.style.setProperty("--search-icon-focus-width", "2.5rem");
+      this.$el.style.setProperty("--search-icon-datalist-width", "1rem");
     }
   }
+  disableSearchMode() {
+    var _a, _b;
+    (_a = this.observer) == null ? void 0 : _a.disconnect();
+    this.$el.removeAttribute("list");
+    (_b = this.$shadowSuggestions) == null ? void 0 : _b.remove();
+    this.$el.style.removeProperty("--search-icon-focus-width");
+    this.$el.style.removeProperty("--search-icon-datalist-width");
+  }
   syncDataList() {
     var _a, _b;
     const newSuggestions = (_a = this.$lightSuggestions) == null ? void 0 : _a.cloneNode(
@@ -11757,13 +11833,26 @@ const _Input = class _Input extends AbstractInputElement {
     return this.querySelector("datalist");
   }
   get $shadowSuggestions() {
-    return this.shadowRoot.querySelector("datalist");
+    var _a;
+    return ((_a = this.shadowRoot) == null ? void 0 : _a.querySelector("datalist")) ?? null;
   }
   get $container() {
-    return this.shadowRoot.querySelector("div");
+    var _a;
+    return ((_a = this.shadowRoot) == null ? void 0 : _a.querySelector("div")) ?? null;
+  }
+  get type() {
+    return this.getAttribute("type");
+  }
+  set type(value) {
+    if (value) {
+      this.setAttribute("type", value);
+    } else {
+      this.removeAttribute("type");
+    }
   }
 };
 _Input.nativeName = "input";
+_Input.accessorExclusions = ["type"];
 let Input = _Input;
 if (!customElements.get("px-input")) {
   customElements.define("px-input", Input);
@@ -13133,7 +13222,7 @@ const priceSizeValues = ["", "s", "m", "l"];
 const _Price = class _Price extends PxElement {
   constructor() {
     super(styles$i);
-    this.template = () => `<span class="price"><slot></slot></span>`;
+    this.template = () => `<span class="price"></span>`;
     this.shadowRoot.innerHTML = this.template();
   }
   static get observedAttributes() {
@@ -13329,6 +13418,20 @@ class SelectableBox extends WithExtraAttributes {
 if (!customElements.get("px-selectable-box")) {
   customElements.define("px-selectable-box", SelectableBox);
 }
+const DEFAULT_IGNORED_TAGS = ["px-a", "px-button"];
+function shouldIgnoreSelectableBoxClick(event, host, ignoredTags = DEFAULT_IGNORED_TAGS) {
+  const ignored = new Set(ignoredTags);
+  const eventPath = event.composedPath();
+  for (const pathPart of eventPath) {
+    if (pathPart === host) {
+      break;
+    }
+    if (pathPart instanceof Element && ignored.has(pathPart.tagName.toLowerCase())) {
+      return true;
+    }
+  }
+  return false;
+}
 const styles$f = ':host{display:block;outline:none}:host *{box-sizing:border-box}.selectable-box-checkbox,.selectable-box-radio{box-sizing:border-box;height:100%;cursor:pointer;border-radius:var(--px-radius-main);overflow:hidden;--btn-transition: all .2s ease-in-out 0s;transition:var(--btn-transition);border:var(--px-size-border-m) solid var(--px-color-border-main-default);outline-color:var(--px-color-border-focus-outline-default);outline-width:var(--px-focus-outline-mobile)}.selectable-box-checkbox px-selectable-box,.selectable-box-radio px-selectable-box{height:100%;background-color:var(--px-color-background-container-light-default)}:host([parent-has-anchor-full]) .selectable-box-checkbox,:host([parent-has-anchor-full]) .selectable-box-radio{border-radius:0 0 var(--px-radius-main) var(--px-radius-main)}:host(:not([disabled])):host(:hover) .selectable-box-checkbox,:host(:not([disabled])):host(:hover) .selectable-box-radio{border-color:var(--px-color-border-state-hover-default)}:host(:not([disabled])):host(:hover) .selectable-box-checkbox px-selectable-box,:host(:not([disabled])):host(:hover) .selectable-box-radio px-selectable-box{background-color:var( --px-color-background-state-hover-bordered-default )}:host(:not([disabled])):host(:focus-visible) .selectable-box-checkbox,:host(:not([disabled])):host(:focus-visible) .selectable-box-radio{outline-offset:var(--px-focus-offset-mobile);outline-style:solid}:host([checked]) .selectable-box-checkbox,:host([checked]) .selectable-box-radio{border-color:var(--px-color-border-state-active-default)}:host([disabled]) .selectable-box-checkbox,:host([disabled]) .selectable-box-radio{cursor:default;pointer-events:none;border-color:transparent}:host([disabled]) .selectable-box-checkbox px-selectable-box,:host([disabled]) .selectable-box-radio px-selectable-box{background-color:var(--px-color-background-state-disabled-default)}:host([disabled]) ::slotted([slot="title"]),:host([disabled]) ::slotted([slot="description"]),:host([disabled]) ::slotted([slot="content"]){color:var(--px-color-text-state-disabled-default)}@media only screen and (min-width: 48em){.selectable-box-checkbox,.selectable-box-radio{outline-width:var(--px-focus-outline-tablet)}}@media only screen and (min-width: 64.0625em){.selectable-box-checkbox,.selectable-box-radio{outline-width:var(--px-focus-outline-laptop)}}@media only screen and (min-width: 90.0625em){.selectable-box-checkbox,.selectable-box-radio{outline-width:var(--px-focus-outline-desktop)}}:host([inverted]) .selectable-box-checkbox,:host([inverted]) .selectable-box-radio{border-color:var(--px-color-border-main-inverted);outline-color:var(--px-color-border-focus-outline-inverted)}:host([inverted]) .selectable-box-checkbox px-selectable-box,:host([inverted]) .selectable-box-radio px-selectable-box{background-color:var(--px-color-background-container-light-inverted)}:host([inverted]):host(:not([disabled])):host(:hover) .selectable-box-checkbox,:host([inverted]):host(:not([disabled])):host(:hover) .selectable-box-radio{border-color:var(--px-color-border-state-hover-inverted)}:host([inverted]):host(:not([disabled])):host(:hover) .selectable-box-checkbox px-selectable-box,:host([inverted]):host(:not([disabled])):host(:hover) .selectable-box-radio px-selectable-box{background-color:var( --px-color-background-state-hover-bordered-inverted )}:host([inverted]):host([checked]) .selectable-box-checkbox,:host([inverted]):host([checked]) .selectable-box-radio{border-color:var(--px-color-border-state-active-inverted)}:host([inverted]):host([disabled]) .selectable-box-checkbox,:host([inverted]):host([disabled]) .selectable-box-radio{border-color:transparent}:host([inverted]):host([disabled]) .selectable-box-checkbox px-selectable-box,:host([inverted]):host([disabled]) .selectable-box-radio px-selectable-box{background-color:var(--px-color-background-state-disabled-inverted)}:host([inverted]):host([disabled]) ::slotted([slot="title"]),:host([inverted]):host([disabled]) ::slotted([slot="description"]),:host([inverted]):host([disabled]) ::slotted([slot="content"]){color:var(--px-color-text-state-disabled-inverted)}';
 const styleSheet$g = new CSSStyleSheet();
 styleSheet$g.replaceSync(styles$f);
@@ -13447,6 +13550,9 @@ class SelectableBoxCheckbox extends WithExtraAttributes {
     }
   }
   setClickEvent(event) {
+    if (shouldIgnoreSelectableBoxClick(event, this)) {
+      return;
+    }
     this.checked = !this.checked;
     event.stopPropagation();
     event.preventDefault();
@@ -13720,6 +13826,9 @@ class SelectableBoxRadio extends WithExtraAttributes {
     }
   }
   setClickEvent(event) {
+    if (shouldIgnoreSelectableBoxClick(event, this)) {
+      return;
+    }
     if (!this.checked) {
       this.checked = true;
     }
@@ -14793,13 +14902,122 @@ class Td extends HTMLElement {
 if (!customElements.get("px-td")) {
   customElements.define("px-td", Td);
 }
-const styles$6 = '*{font-family:var(--px-font-family)}#container{display:flex;flex-direction:column;align-items:flex-start;gap:var(--px-spacing-default-mobile)}#tab-container{position:relative;width:100%}#tab-container>#previous{position:absolute;top:.75em;left:-1.5em}#tab-container>#next{position:absolute;top:.75em;right:-1.5em}#panels{width:100%}#tablist{display:flex;align-items:center;scrollbar-width:none;overflow:scroll;width:100%;box-sizing:border-box;margin:calc(calc(var(--px-focus-outline-mobile) + var(--px-focus-offset-mobile)) * -1);padding:calc(var(--px-focus-outline-mobile) + var(--px-focus-offset-mobile))}#tablist::-webkit-scrollbar{display:none}:host([inverted]) #tablist ::slotted(px-tab){background-color:var(--px-color-background-container-default-inverted)}:host([inverted]) #tablist ::slotted(px-tab[selected=""]){background-color:var(--px-color-background-state-active-inverted)}:host([inverted]) #tablist ::slotted(px-tab[selected=""])>button{color:var(--px-color-text-brand-default)}:host([inverted]) button[role=tab]{color:var(--px-color-text-neutral-inverted)}:host([inverted]) button[aria-selected=""]{color:var(--px-color-text-brand-default)}@media only screen and (min-width: 768px){#container{gap:var(--px-spacing-default-desktop)}#tablist{margin:calc(calc(var(--px-focus-outline-tablet) + var(--px-focus-offset-tablet)) * -1);padding:calc(var(--px-focus-outline-tablet) + var(--px-focus-offset-tablet))}}@media only screen and (min-width: 1025px){#container{gap:var(--px-spacing-default-desktop)}#tablist{margin:calc(calc(var(--px-focus-outline-desktop) + var(--px-focus-offset-desktop)) * -1);padding:calc(var(--px-focus-outline-desktop) + var(--px-focus-offset-desktop))}}';
+const styles$6 = "*{font-family:var(--px-font-family)}:host{background-color:var(--px-color-background-container-default-default)}:host(:first-child),:host(:first-child) button{border-radius:var(--px-radius-main) var(--px-radius-none) var(--px-radius-none) var(--px-radius-main)}:host(:last-of-type),:host(:last-of-type) button{border-radius:var(--px-radius-none) var(--px-radius-main) var(--px-radius-main) var(--px-radius-none)}:host([selected]){background-color:var(--px-color-background-state-active-default);border-radius:var(--px-radius-main)!important}:host([selected])>button{cursor:auto;padding-block:var(--px-padding-m-mobile);color:var(--px-color-text-neutral-inverted)}button{background:none;border:none;margin:0;padding:var(--px-padding-s-mobile);cursor:pointer;height:inherit;width:inherit;font-size:var(--px-text-size-label-l-mobile);font-weight:var(--px-font-weight-title);text-wrap:nowrap;color:var(--px-color-text-neutral-default);outline:none}:host(:focus-visible){outline-offset:var(--px-focus-offset-mobile);outline:var(--px-focus-outline-mobile) solid var(--px-color-border-focus-outline-default)}:host(:not([selected])) button:hover{background-color:var(--px-color-background-state-hover-default)}:host([inverted]) button{color:var(--px-color-text-neutral-inverted)}:host([inverted]:not([selected])) button:hover{background-color:var(--px-color-background-state-hover-inverted)}:host([inverted][selected]) button{color:var(--px-color-text-brand-default)}:host([inverted]:focus-visible){outline-color:var(--px-color-border-focus-outline-inverted)}@media only screen and (min-width: 768px){button{padding:var(--px-padding-s-desktop);font-size:var(--px-text-size-label-l-desktop)}:host[selected]>button{padding-block:var(--px-padding-m-desktop)}}@media only screen and (min-width: 1025px){button{padding:var(--px-padding-s-desktop);font-size:var(--px-text-size-label-l-desktop)}:host[selected]>button{padding-block:var(--px-padding-m-desktop)}}";
 const styleSheet$7 = new CSSStyleSheet();
 styleSheet$7.replaceSync(styles$6);
+const TAB_SELECTED_EVENT = "px.lavender.tab.selected";
+const TAB_CONNECTED_EVENT = "px-tab-connected";
+class Tab extends HTMLElement {
+  constructor() {
+    var _a;
+    super();
+    this.template = () => `
+    <button type="button"  tabindex="-1" >
+      <span><slot></slot></span>
+    </button>
+  `;
+    this.attachShadow({ mode: "open" });
+    this.shadowRoot.innerHTML = this.template();
+    this.shadowRoot.adoptedStyleSheets = [styleSheet$7];
+    this.internals = (_a = this.attachInternals) == null ? void 0 : _a.call(this);
+  }
+  static get observedAttributes() {
+    return ["selected", "for", "name", "inverted"];
+  }
+  connectedCallback() {
+    this.role = "tab";
+    if (this.internals) {
+      this.internals.role = "tab";
+    }
+    this.ariaSelected = `${this.selected}`;
+    this.slot = "tabs";
+    this.dispatchEvent(
+      new CustomEvent(TAB_CONNECTED_EVENT, { bubbles: true, composed: true })
+    );
+    this.addEventListener("click", () => {
+      this.selected = true;
+    });
+  }
+  attributeChangedCallback(name, oldValue, newValue) {
+    if (name === "selected") {
+      this.handleSelected(newValue);
+    } else if (name === "name") {
+      this.$button.setAttribute("id", newValue);
+    } else if (name === "for") {
+      this.setAttribute("aria-controls", newValue);
+    } else if (name === "inverted") {
+      if (newValue === "") {
+        this.$button.setAttribute("inverted", "");
+      } else {
+        this.$button.removeAttribute("inverted");
+      }
+    }
+  }
+  get $button() {
+    return this.shadowRoot.querySelector("button");
+  }
+  get selected() {
+    return this.hasAttribute("selected");
+  }
+  set selected(value) {
+    if (value) {
+      this.setAttribute("selected", "");
+    } else {
+      this.removeAttribute("selected");
+    }
+  }
+  get inverted() {
+    return this.hasAttribute("inverted");
+  }
+  set name(value) {
+    this.setAttribute("name", value);
+  }
+  get name() {
+    return this.getAttribute("name");
+  }
+  set for(value) {
+    this.setAttribute("for", value);
+  }
+  get for() {
+    return this.getAttribute("for");
+  }
+  handleSelected(value) {
+    if (value !== "") {
+      this.tabIndex = -1;
+      if (this.internals) {
+        this.internals.ariaSelected = `false`;
+      }
+      this.ariaSelected = `false`;
+    } else {
+      setTimeout(() => {
+        this.dispatchEvent(
+          new CustomEvent(TAB_SELECTED_EVENT, {
+            bubbles: true,
+            composed: true,
+            detail: {
+              tabName: this.name,
+              forName: this.for
+            }
+          })
+        );
+      });
+      this.focus();
+      this.tabIndex = 0;
+      if (this.internals) {
+        this.internals.ariaSelected = `true`;
+      }
+      this.ariaSelected = `true`;
+    }
+  }
+}
+const styles$5 = '*{font-family:var(--px-font-family)}#container{display:flex;flex-direction:column;align-items:flex-start;gap:var(--px-spacing-default-mobile)}#tab-container{position:relative;width:100%}#tab-container>#previous{position:absolute;top:.75em;left:-1.5em}#tab-container>#next{position:absolute;top:.75em;right:-1.5em}#panels{width:100%}#tablist{display:flex;align-items:center;scrollbar-width:none;overflow:scroll;width:100%;box-sizing:border-box;margin:calc(calc(var(--px-focus-outline-mobile) + var(--px-focus-offset-mobile)) * -1);padding:calc(var(--px-focus-outline-mobile) + var(--px-focus-offset-mobile))}#tablist::-webkit-scrollbar{display:none}:host([inverted]) #tablist ::slotted(px-tab){background-color:var(--px-color-background-container-default-inverted)}:host([inverted]) #tablist ::slotted(px-tab[selected=""]){background-color:var(--px-color-background-state-active-inverted)}:host([inverted]) #tablist ::slotted(px-tab[selected=""])>button{color:var(--px-color-text-brand-default)}:host([inverted]) button[role=tab]{color:var(--px-color-text-neutral-inverted)}:host([inverted]) button[aria-selected=""]{color:var(--px-color-text-brand-default)}@media only screen and (min-width: 768px){#container{gap:var(--px-spacing-default-desktop)}#tablist{margin:calc(calc(var(--px-focus-outline-tablet) + var(--px-focus-offset-tablet)) * -1);padding:calc(var(--px-focus-outline-tablet) + var(--px-focus-offset-tablet))}}@media only screen and (min-width: 1025px){#container{gap:var(--px-spacing-default-desktop)}#tablist{margin:calc(calc(var(--px-focus-outline-desktop) + var(--px-focus-offset-desktop)) * -1);padding:calc(var(--px-focus-outline-desktop) + var(--px-focus-offset-desktop))}}';
+const styleSheet$6 = new CSSStyleSheet();
+styleSheet$6.replaceSync(styles$5);
 class Tabs extends HTMLElement {
   constructor() {
     var _a;
     super();
+    __privateAdd(this, _Tabs_instances);
     this._label = `tabs-${Math.random().toString(36).substring(2, 15)}`;
     this.tabsConnected = 0;
     this.template = () => `
@@ -14820,23 +15038,25 @@ class Tabs extends HTMLElement {
       </div>
     </div>
   `;
+    this.handleNextPreviousDisplay = () => {
+      if (this.allTabsConnected() && this.$prefixButton && this.$suffixButton) {
+        this.$prefixButton.style.display = this.shouldDisplayScrollLeftButton() ? "" : "none";
+        this.$suffixButton.style.display = this.shouldDisplayScrollRightButton() ? "" : "none";
+      }
+    };
     this.attachShadow({ mode: "open" });
     this.shadowRoot.innerHTML = this.template();
-    this.shadowRoot.adoptedStyleSheets = [styleSheet$7];
+    this.shadowRoot.adoptedStyleSheets = [styleSheet$6];
     this.internals = (_a = this.attachInternals) == null ? void 0 : _a.call(this);
-    this.addEventListener("px-tab-connected", () => {
-      this.tabsConnected++;
-      this.handleNextPreviousDisplay();
-    });
-    window.addEventListener("resize", () => {
-      this.handleNextPreviousDisplay();
-    });
-    this.$tabList.addEventListener("scroll", () => {
-      this.handleNextPreviousDisplay();
-    });
   }
   static get observedAttributes() {
-    return ["label", "inverted", "aria-label-next", "aria-label-previous"];
+    return [
+      "label",
+      "inverted",
+      "aria-label-next",
+      "aria-label-previous",
+      "hide-controls"
+    ];
   }
   attributeChangedCallback(name, oldValue, newValue) {
     switch (name) {
@@ -14856,10 +15076,16 @@ class Tabs extends HTMLElement {
           );
         }
         break;
+      case "hide-controls":
+        __privateMethod(this, _Tabs_instances, handleHideControls_fn).call(this, newValue);
+        break;
+      case "inverted":
+        __privateMethod(this, _Tabs_instances, handleInverted_fn).call(this, newValue);
+        break;
     }
   }
   connectedCallback() {
-    var _a, _b, _c, _d;
+    var _a, _b;
     this.shadowRoot.querySelector("#tablist").setAttribute("aria-labelledby", this._label);
     if (this.getAttribute("label")) {
       this.label = this.getAttribute("label");
@@ -14868,21 +15094,36 @@ class Tabs extends HTMLElement {
     if (this.internals) {
       this.internals.role = "tablist";
     }
-    this.checkNextPreviousButtonsVisibility();
-    this.addEventListener("click", (event) => {
-      var _a2;
-      if ((_a2 = event.target.localName) == null ? void 0 : _a2.endsWith("-tab")) {
-        this.$activePanel.selected = false;
-        this.$activeTab.selected = false;
-        const tab = event.target;
-        if (tab) {
-          tab.selected = true;
-        }
-        if (this.$activePanel) {
-          this.$activePanel.selected = true;
-        }
+    this.addEventListener(
+      TAB_SELECTED_EVENT,
+      (event) => {
+        [...this.$tabPanels].forEach((panel) => {
+          if (panel.getAttribute("name") !== event.detail.forName && panel.hasAttribute("selected")) {
+            panel.removeAttribute("selected");
+            panel.removeAttribute("aria-labelledby");
+          }
+          if (panel.getAttribute("name") === event.detail.forName) {
+            panel.setAttribute("selected", "");
+            panel.setAttribute("aria-labelledby", event.detail.tabName);
+          }
+        });
+        [...this.$tabs].forEach((tab) => {
+          if (tab.getAttribute("name") !== event.detail.tabName && tab.hasAttribute("selected")) {
+            tab.removeAttribute("selected");
+          }
+        });
+      }
+    );
+    this.addEventListener(TAB_CONNECTED_EVENT, () => {
+      this.tabsConnected++;
+      this.handleNextPreviousDisplay();
+      if (this.allTabsConnected() && 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.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"))) {
@@ -14903,26 +15144,11 @@ class Tabs extends HTMLElement {
         behavior: "smooth"
       });
     });
-    if (this.inverted) {
-      (_c = this.$prefixButton) == null ? void 0 : _c.setAttribute("inverted", "");
-      (_d = this.$suffixButton) == null ? void 0 : _d.setAttribute("inverted", "");
-    }
-    if (!this.hasAttribute("hide-controls")) {
-      this.$suffixButton.setAttribute(
-        "aria-label",
-        this.ariaLabelNext || "Next tab"
-      );
-      this.$prefixButton.setAttribute(
-        "aria-label",
-        this.ariaLabelPrevious || "Previous tab"
-      );
-    }
+    window.addEventListener("resize", this.handleNextPreviousDisplay);
+    this.$tabList.addEventListener("scroll", this.handleNextPreviousDisplay);
   }
-  checkNextPreviousButtonsVisibility() {
-    if (this.getAttribute("hide-controls") === "" || this.getAttribute("hide-controls") === "true") {
-      this.$prefixButton.remove();
-      this.$suffixButton.remove();
-    }
+  disconnectedCallback() {
+    window.addEventListener("resize", this.handleNextPreviousDisplay);
   }
   navigateToTab(direction) {
     const nextTab = this.$nextTab;
@@ -14938,14 +15164,8 @@ class Tabs extends HTMLElement {
     }
     this.$activePanel.selected = true;
   }
-  handleNextPreviousDisplay() {
-    if (this.allTabsConnected() && this.$prefixButton && this.$suffixButton) {
-      this.$prefixButton.style.display = this.shouldDisplayScrollLeftButton() ? "" : "none";
-      this.$suffixButton.style.display = this.shouldDisplayScrollRightButton() ? "" : "none";
-    }
-  }
   allTabsConnected() {
-    return this.tabsConnected === this.querySelectorAll('[slot="tabs"]').length;
+    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;
@@ -14973,11 +15193,18 @@ class Tabs extends HTMLElement {
     }
   }
   get $activePanel() {
-    return this.querySelector(`[name="${this.$activeTab.for}"]`);
+    var _a;
+    return this.querySelector(`[name="${(_a = this.$activeTab) == null ? void 0 : _a.for}"]`);
   }
   get $tabList() {
     return this.shadowRoot.querySelector("#tablist");
   }
+  get $tabs() {
+    return this.querySelectorAll('[slot="tabs"]');
+  }
+  get $tabPanels() {
+    return this.querySelectorAll('[slot="tabpanels"]');
+  }
   get $prefixButton() {
     return this.shadowRoot.querySelector("#previous");
   }
@@ -15000,95 +15227,42 @@ class Tabs extends HTMLElement {
     return this.getAttribute("aria-label-previous");
   }
 }
-const styles$5 = "*{font-family:var(--px-font-family)}:host{background-color:var(--px-color-background-container-default-default)}:host(:first-child),:host(:first-child) button{border-radius:var(--px-radius-main) var(--px-radius-none) var(--px-radius-none) var(--px-radius-main)}:host(:last-of-type),:host(:last-of-type) button{border-radius:var(--px-radius-none) var(--px-radius-main) var(--px-radius-main) var(--px-radius-none)}:host([selected]){background-color:var(--px-color-background-state-active-default);border-radius:var(--px-radius-main)!important}:host([selected])>button{cursor:auto;padding-block:var(--px-padding-m-mobile);color:var(--px-color-text-neutral-inverted)}button{background:none;border:none;margin:0;padding:var(--px-padding-s-mobile);cursor:pointer;height:inherit;width:inherit;font-size:var(--px-text-size-label-l-mobile);font-weight:var(--px-font-weight-title);text-wrap:nowrap;color:var(--px-color-text-neutral-default);outline:none}:host(:focus-visible){outline-offset:var(--px-focus-offset-mobile);outline:var(--px-focus-outline-mobile) solid var(--px-color-border-focus-outline-default)}:host(:not([selected])) button:hover{background-color:var(--px-color-background-state-hover-default)}:host([inverted]) button{color:var(--px-color-text-neutral-inverted)}:host([inverted]:not([selected])) button:hover{background-color:var(--px-color-background-state-hover-inverted)}:host([inverted][selected]) button{color:var(--px-color-text-brand-default)}:host([inverted]:focus-visible){outline-color:var(--px-color-border-focus-outline-inverted)}@media only screen and (min-width: 768px){button{padding:var(--px-padding-s-desktop);font-size:var(--px-text-size-label-l-desktop)}:host[selected]>button{padding-block:var(--px-padding-m-desktop)}}@media only screen and (min-width: 1025px){button{padding:var(--px-padding-s-desktop);font-size:var(--px-text-size-label-l-desktop)}:host[selected]>button{padding-block:var(--px-padding-m-desktop)}}";
-const styleSheet$6 = new CSSStyleSheet();
-styleSheet$6.replaceSync(styles$5);
-class Tab extends HTMLElement {
-  constructor() {
-    var _a;
-    super();
-    this.template = () => `
-    <button type="button"  tabindex="-1" >
-      <span><slot></slot></span>
-    </button>
-  `;
-    this.attachShadow({ mode: "open" });
-    this.shadowRoot.innerHTML = this.template();
-    this.shadowRoot.adoptedStyleSheets = [styleSheet$6];
-    this.internals = (_a = this.attachInternals) == null ? void 0 : _a.call(this);
-  }
-  static get observedAttributes() {
-    return ["selected", "for", "name"];
+_Tabs_instances = new WeakSet();
+handleInverted_fn = function(inverted) {
+  var _a, _b, _c, _d, _e, _f, _g, _h;
+  if (inverted === "") {
+    (_a = this.$prefixButton) == null ? void 0 : _a.setAttribute("inverted", "");
+    (_b = this.$suffixButton) == null ? void 0 : _b.setAttribute("inverted", "");
+    (_c = this.$activePanel) == null ? void 0 : _c.setAttribute("inverted", "");
+    (_d = this.$activeTab) == null ? void 0 : _d.setAttribute("inverted", "");
+    [...this.$tabs].forEach((tab) => {
+      tab.setAttribute("inverted", "");
+    });
+  } else {
+    (_e = this.$prefixButton) == null ? void 0 : _e.removeAttribute("inverted");
+    (_f = this.$suffixButton) == null ? void 0 : _f.removeAttribute("inverted");
+    (_g = this.$activePanel) == null ? void 0 : _g.removeAttribute("inverted");
+    (_h = this.$activeTab) == null ? void 0 : _h.removeAttribute("inverted");
+    [...this.$tabs].forEach((tab) => {
+      tab.removeAttribute("inverted");
+    });
   }
-  connectedCallback() {
-    this.role = "tab";
-    if (this.internals) {
-      this.internals.role = "tab";
-    }
-    this.ariaSelected = `${this.selected}`;
-    this.slot = "tabs";
-    if (this.parentElement.inverted) {
-      this.setAttribute("inverted", "");
-      this.$button.setAttribute("inverted", "");
-    }
-    this.dispatchEvent(
-      new CustomEvent("px-tab-connected", { bubbles: true, composed: true })
+};
+handleHideControls_fn = function(hideControls) {
+  if (hideControls === "") {
+    this.$prefixButton.remove();
+    this.$suffixButton.remove();
+  } else {
+    this.$suffixButton.setAttribute(
+      "aria-label",
+      this.ariaLabelNext || "Next tab"
+    );
+    this.$prefixButton.setAttribute(
+      "aria-label",
+      this.ariaLabelPrevious || "Previous tab"
     );
   }
-  attributeChangedCallback(name, oldValue, newValue) {
-    if (name === "selected") {
-      this.handleSelected(newValue);
-    } else if (name === "name") {
-      this.$button.setAttribute("id", newValue);
-    } else if (name === "for") {
-      this.setAttribute("aria-controls", newValue);
-    }
-  }
-  get $button() {
-    return this.shadowRoot.querySelector("button");
-  }
-  get selected() {
-    return this.hasAttribute("selected") ? true : false;
-  }
-  set selected(value) {
-    if (value) {
-      this.setAttribute("selected", "");
-    } else {
-      this.removeAttribute("selected");
-    }
-  }
-  get inverted() {
-    return this.hasAttribute("inverted");
-  }
-  set name(value) {
-    this.setAttribute("name", value);
-  }
-  get name() {
-    return this.getAttribute("name");
-  }
-  set for(value) {
-    this.setAttribute("for", value);
-  }
-  get for() {
-    return this.getAttribute("for");
-  }
-  handleSelected(value) {
-    if (value === null) {
-      this.tabIndex = -1;
-      if (this.internals) {
-        this.internals.ariaSelected = `false`;
-      }
-      this.ariaSelected = `false`;
-    } else {
-      this.focus();
-      this.tabIndex = 0;
-      if (this.internals) {
-        this.internals.ariaSelected = `true`;
-      }
-      this.ariaSelected = `true`;
-    }
-  }
-}
+};
 class TabPanel extends HTMLElement {
   constructor() {
     super();
@@ -15099,36 +15273,25 @@ class TabPanel extends HTMLElement {
   `;
     this.attachShadow({ mode: "open" });
     this.shadowRoot.innerHTML = this.template();
-    this.shadowRoot.adoptedStyleSheets = [styleSheet$7];
+    this.shadowRoot.adoptedStyleSheets = [styleSheet$6];
   }
   static get observedAttributes() {
-    return ["name"];
+    return ["name", "selected"];
   }
   attributeChangedCallback(name, oldValue, newValue) {
     if (name === "name") {
       this.$panel.setAttribute("aria-labelledby", newValue);
+    } else if (name === "selected") {
+      if (newValue === "") {
+        this.$panel.style.display = "block";
+      } else {
+        this.$panel.style.display = "none";
+      }
     }
   }
   connectedCallback() {
-    if (this.name) this.$panel.setAttribute("aria-labelledby", this.name);
     this.slot = "tabpanels";
-    const labelledBy = this.parentElement.querySelector(
-      `[for="${this.getAttribute("name")}"]`
-    );
-    if (labelledBy) {
-      this.$panel.setAttribute(
-        "aria-labelledby",
-        labelledBy.getAttribute("name")
-      );
-    }
-    const selectedTab = this.parentElement.querySelector(
-      `[for="${this.name}"]`
-    );
-    if (!isFalsy(selectedTab.selected)) {
-      this.selected = true;
-    } else {
-      this.selected = false;
-    }
+    this.$panel.style.display = "none";
   }
   get name() {
     return this.getAttribute("name");
@@ -15138,11 +15301,14 @@ class TabPanel extends HTMLElement {
   }
   set selected(value) {
     if (value) {
-      this.$panel.style.display = "block";
+      this.setAttribute("selected", "");
     } else {
-      this.$panel.style.display = "none";
+      this.removeAttribute("selected");
     }
   }
+  get selected() {
+    return this.hasAttribute("selected");
+  }
   get $panel() {
     return this.shadowRoot.querySelector('[role="tabpanel"]');
   }
@@ -16885,10 +17051,12 @@ export {
   VStack,
   VerticallyExtendedElement,
   WithExtraAttributes,
+  accessibilityAttributes,
   accordionBackgroundColorValues,
   accordionVariantValues,
   addGlobalStylesheet,
   alignItemsValues,
+  anchorSpacingValues,
   assetContainerImgWidthValues,
   backgroundColorValues,
   backgroundSizeValues,
@@ -16943,7 +17111,6 @@ export {
   listVariantValues,
   log,
   noBorderRadiusValues,
-  observedAttributes,
   overflowValues,
   paddingValues,
   patchShapeValues,