@proximus/lavender 1.4.7-alpha.3 → 1.4.7-alpha.5

package/dist/lavender.es.js

@@ -881,43 +881,43 @@ function transferAccessibilityAttributes(sourceElement, targetElement, applyLabe
     sourceElement.setAttribute("aria-labelledby", id);
   }
 }
-function cssTokenBreakpoints(attributeName, selector, attributeValues, cssPropertyPrefix = "", generatedCssPropertyName) {
+function cssTokenBreakpoints(attributeName, selector, attributeValues, cssPropertyPrefix = "", generatedCssPropertyName, selectorAttributeName = attributeName) {
   const stylesheet2 = new CSSStyleSheet();
   const styles2 = attributeValues.reduce(
     (prev, attributeValue) => prev + `
-  ${selector(attributeName, attributeValue)} {
+  ${selector(selectorAttributeName, attributeValue)} {
     ${attributeName}: var(--${cssPropertyPrefix}-${attributeValue}-desktop);
     ${generatedCssPropertyName ? `${generatedCssPropertyName}:var(--${cssPropertyPrefix}-${attributeValue}-desktop)` : ""}
   }
   /* Mobile only - max 767px */
   @media only screen and (max-width: 47.938em) {
-    ${selector(attributeName, attributeValue)} {
+    ${selector(selectorAttributeName, attributeValue)} {
       ${attributeName}: var(--${cssPropertyPrefix}-${attributeValue}-mobile);
       ${generatedCssPropertyName ? `${generatedCssPropertyName}: var(--${cssPropertyPrefix}-${attributeValue}-mobile)` : ""}
     }
   }
-  ${selector(attributeName, attributeValue, "mobile")} {
+  ${selector(selectorAttributeName, attributeValue, "mobile")} {
  /* Mobile only - max 767px */
   @media only screen and (max-width: 47.938em) {
       ${attributeName}: var(--${cssPropertyPrefix}-${attributeValue}-mobile) !important;
       ${generatedCssPropertyName ? `${generatedCssPropertyName}: var(--${cssPropertyPrefix}-${attributeValue}-mobile)` : ""}
     }
   }
-  ${selector(attributeName, attributeValue, "tablet")} {
+  ${selector(selectorAttributeName, attributeValue, "tablet")} {
   /* Tablet - min 768px max 1024px */
   @media only screen and (min-width: 48em) and (max-width: 64em) {
       ${attributeName}: var(--${cssPropertyPrefix}-${attributeValue}-desktop) !important;
       ${generatedCssPropertyName ? `${generatedCssPropertyName}: var(--${cssPropertyPrefix}-${attributeValue}-desktop)` : ""}
     }
   }
-  ${selector(attributeName, attributeValue, "laptop")} {
+  ${selector(selectorAttributeName, attributeValue, "laptop")} {
   /* Laptop - 1025px*/
   @media only screen and (min-width: 64.0625em) {
       ${attributeName}: var(--${cssPropertyPrefix}-${attributeValue}-desktop) !important;
       ${generatedCssPropertyName ? `${generatedCssPropertyName}: var(--${cssPropertyPrefix}-${attributeValue}-desktop)` : ""}
     }
   }
-  ${selector(attributeName, attributeValue, "desktop")} {
+  ${selector(selectorAttributeName, attributeValue, "desktop")} {
   /* Desktop - 1025px*/
   @media only screen and (min-width: 64.0625em) {
       ${attributeName}: var(--${cssPropertyPrefix}-${attributeValue}-desktop) !important;
@@ -2270,7 +2270,7 @@ let Span = _Span;
 if (!customElements.get("px-span")) {
   customElements.define("px-span", Span);
 }
-const containerCss = ':host{display:block}.container{font-family:var(--px-font-family);background-color:var(--background-color);border-radius:var(--px-radius-main);box-sizing:border-box;height:100%}:host([background-image]) .container{background-image:var(--background-image)}:host([background-gradient]) .container{background-image:var(--background-gradient)}:host([inverted]) .container{background-color:var(--background-color-inverted);color:var(--px-color-text-neutral-inverted)}.border-none{border:none}.border-s{border:var(--px-size-border-s) solid var(--border-color)}.border-m{border:var(--px-size-border-m) solid var(--border-color)}.border-l{border:var(--px-size-border-l) solid var(--border-color)}.border-side-top{border-bottom-style:none;border-right-style:none;border-left-style:none}.border-side-right{border-top-style:none;border-bottom-style:none;border-left-style:none}.border-side-bottom{border-top-style:none;border-right-style:none;border-left-style:none}.border-side-left{border-top-style:none;border-right-style:none;border-bottom-style:none}.border-side-block{border-inline-style:none}.border-side-inline{border-block-style:none}:host([inverted]) .border-s,:host([inverted]) .border-m,:host([inverted]) .border-l{border-color:var(--border-color-inverted)}.border-radius-main{border-radius:var(--px-radius-main)}.border-radius-pill{border-radius:var(--px-radius-pill)}.no-border-radius-top{border-top-left-radius:var(--px-radius-none);border-top-right-radius:var(--px-radius-none)}.no-border-radius-right{border-top-right-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-bottom{border-bottom-left-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-left{border-top-left-radius:var(--px-radius-none);border-bottom-left-radius:var(--px-radius-none)}.no-border-radius-all,.border-radius-none{border-radius:var(--px-radius-none)}.bgimg{background-repeat:no-repeat}.background-size-cover{background-size:cover;background-position:center center}.background-size-contain{background-size:contain}.box-shadow-none{box-shadow:none}.box-shadow-s{box-shadow:0 1px 2px #2525251f}.box-shadow-m{box-shadow:0 4px 6px -1px #25252514}.box-shadow-l{box-shadow:0 10px 15px -3px #25252514}.box-shadow-xl{box-shadow:0 20px 25px -5px #25252514}.anchored{position:relative}::slotted([slot="anchor-right"]),::slotted([slot="anchor-left"]),::slotted([slot="anchor-full"]){position:absolute;top:0}::slotted([slot="anchor-right"]),::slotted([slot="anchor-left"]){transform:translateY(-50%);z-index:3}::slotted([slot="anchor-right"]){right:var( --container-anchor-offset--mobile, var( --container-padding-right, var(--container-padding-inline, var(--container-padding)) ) )}::slotted([slot="anchor-left"]){left:var( --container-anchor-offset--mobile, var( --container-padding-left, var(--container-padding-inline, var(--container-padding)) ) )}::slotted([slot="anchor-full"]){transform:translateY(-100%);right:0;left:0;text-align:center;z-index:2}::slotted(px-vstack:only-of-type),::slotted(px-hstack:only-of-type),::slotted(px-stack:only-of-type),::slotted(px-grid:only-of-type){height:100%}:host([anchor-spacing]){margin-top:var(--container-anchor-spacing--mobile)}.border-s ::slotted([slot="anchor-full"]){right:calc(var(--px-size-border-s) * -1);left:calc(var(--px-size-border-s) * -1)}.border-m ::slotted([slot="anchor-full"]){right:calc(var(--px-size-border-m) * -1);left:calc(var(--px-size-border-m) * -1)}.border-l ::slotted([slot="anchor-full"]){right:calc(var(--px-size-border-l) * -1);left:calc(var(--px-size-border-l) * -1)}@media only screen and (max-width: 47.938em){.container{background-color:var(--background-color--mobile, var(--background-color))}:host([background-image--mobile]) .container{background-image:var(--background-image--mobile, var(--background-image))}:host([background-gradient--mobile]) .container{background-image:var( --background-gradient--mobile, var(--background-gradient) )}:host([inverted]) .container{background-color:var( --background-color-inverted--mobile, var(--background-color-inverted) )}.border-side-top--mobile{border-top-style:solid;border-right-style:none;border-bottom-style:none;border-left-style:none}.border-side-right--mobile{border-top-style:none;border-right-style:solid;border-bottom-style:none;border-left-style:none}.border-side-bottom--mobile{border-top-style:none;border-right-style:none;border-bottom-style:solid;border-left-style:none}.border-side-left--mobile{border-top-style:none;border-right-style:none;border-bottom-style:none;border-left-style:solid}.border-side-block--mobile{border-inline-style:none;border-block-style:solid}.border-side-inline--mobile{border-block-style:none;border-inline-style:solid}.no-border-radius-top--mobile{border-top-left-radius:var(--px-radius-none);border-top-right-radius:var(--px-radius-none)}.no-border-radius-right--mobile{border-top-right-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-bottom--mobile{border-bottom-left-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-left--mobile{border-top-left-radius:var(--px-radius-none);border-bottom-left-radius:var(--px-radius-none)}.no-border-radius-all--mobile{border-radius:var(--px-radius-none)}}@media only screen and (min-width: 48em) and (max-width: 64em){.container{background-color:var(--background-color--tablet, var(--background-color))}:host([background-image--tablet]) .container{background-image:var(--background-image--tablet, var(--background-image))}:host([background-gradient--tablet]) .container{background-image:var( --background-gradient--tablet, var(--background-gradient) )}:host([inverted]) .container{background-color:var( --background-color-inverted--tablet, var(--background-color-inverted) )}.no-border-radius-top--tablet{border-top-left-radius:var(--px-radius-none);border-top-right-radius:var(--px-radius-none)}.no-border-radius-right--tablet{border-top-right-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-bottom--tablet{border-bottom-left-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-left--tablet{border-top-left-radius:var(--px-radius-none);border-bottom-left-radius:var(--px-radius-none)}.no-border-radius-all--tablet{border-radius:var(--px-radius-none)}.border-side-top--tablet{border-top-style:solid;border-right-style:none;border-bottom-style:none;border-left-style:none}.border-side-right--tablet{border-top-style:none;border-right-style:solid;border-bottom-style:none;border-left-style:none}.border-side-bottom--tablet{border-top-style:none;border-right-style:none;border-bottom-style:solid;border-left-style:none}.border-side-left--tablet{border-top-style:none;border-right-style:none;border-bottom-style:none;border-left-style:solid}.border-side-block--tablet{border-inline-style:none;border-block-style:solid}.border-side-inline--tablet{border-block-style:none;border-inline-style:solid}::slotted([slot="anchor-right"]){right:var( --container-anchor-offset--tablet, var( --container-padding-right, var(--container-padding-inline, var(--container-padding)) ) )}::slotted([slot="anchor-left"]){left:var( --container-anchor-offset--tablet, var( --container-padding-left, var(--container-padding-inline, var(--container-padding)) ) )}:host([anchor-spacing]){margin-top:var(--container-anchor-spacing--tablet)}}@media only screen and (min-width: 64.0625em){.container{background-color:var(--background-color--laptop, var(--background-color))}:host([background-image--laptop]) .container{background-image:var(--background-image--laptop, var(--background-image))}:host([background-gradient--laptop]) .container{background-image:var( --background-gradient--laptop, var(--background-gradient) )}:host([inverted]) .container{background-color:var( --background-color-inverted--laptop, var(--background-color-inverted) )}.no-border-radius-top--laptop{border-top-left-radius:var(--px-radius-none);border-top-right-radius:var(--px-radius-none)}.no-border-radius-right--laptop{border-top-right-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-bottom--laptop{border-bottom-left-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-left--laptop{border-top-left-radius:var(--px-radius-none);border-bottom-left-radius:var(--px-radius-none)}.no-border-radius-all--laptop{border-radius:var(--px-radius-none)}::slotted([slot="anchor-right"]){right:var( --container-anchor-offset--laptop, var( --container-padding-right, var(--container-padding-inline, var(--container-padding)) ) )}::slotted([slot="anchor-left"]){left:var( --container-anchor-offset--laptop, var( --container-padding-left, var(--container-padding-inline, var(--container-padding)) ) )}:host([anchor-spacing]){margin-top:var(--container-anchor-spacing--laptop)}.border-side-top--laptop{border-top-style:solid;border-right-style:none;border-bottom-style:none;border-left-style:none}.border-side-right--laptop{border-top-style:none;border-right-style:solid;border-bottom-style:none;border-left-style:none}.border-side-bottom--laptop{border-top-style:none;border-right-style:none;border-bottom-style:solid;border-left-style:none}.border-side-left--laptop{border-top-style:none;border-right-style:none;border-bottom-style:none;border-left-style:solid}.border-side-block--laptop{border-inline-style:none;border-block-style:solid}.border-side-inline--laptop{border-block-style:none;border-inline-style:solid}}';
+const containerCss = ':host{display:block}.container{font-family:var(--px-font-family);background-color:var(--background-color);border-radius:var(--px-radius-main);box-sizing:border-box;height:100%}:host([background-image]) .container{background-image:var(--background-image)}:host([background-gradient]) .container{background-image:var(--background-gradient)}:host([inverted]) .container{background-color:var(--background-color-inverted);color:var(--px-color-text-neutral-inverted)}.border-none{border:none}.border-s{border:var(--px-size-border-s) solid var(--border-color)}.border-m{border:var(--px-size-border-m) solid var(--border-color)}.border-l{border:var(--px-size-border-l) solid var(--border-color)}.border-side-top{border-bottom-style:none;border-right-style:none;border-left-style:none}.border-side-right{border-top-style:none;border-bottom-style:none;border-left-style:none}.border-side-bottom{border-top-style:none;border-right-style:none;border-left-style:none}.border-side-left{border-top-style:none;border-right-style:none;border-bottom-style:none}.border-side-block{border-inline-style:none}.border-side-inline{border-block-style:none}:host([inverted]) .border-s,:host([inverted]) .border-m,:host([inverted]) .border-l{border-color:var(--border-color-inverted)}.border-radius-main{border-radius:var(--px-radius-main)}.border-radius-pill{border-radius:var(--px-radius-pill)}.no-border-radius-top{border-top-left-radius:var(--px-radius-none);border-top-right-radius:var(--px-radius-none)}.no-border-radius-right{border-top-right-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-bottom{border-bottom-left-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-left{border-top-left-radius:var(--px-radius-none);border-bottom-left-radius:var(--px-radius-none)}.no-border-radius-all,.border-radius-none{border-radius:var(--px-radius-none)}.bgimg{background-repeat:no-repeat}.background-size-cover{background-size:cover;background-position:center center}.background-size-contain{background-size:contain}.box-shadow-none{box-shadow:none}.box-shadow-s{box-shadow:0 1px 2px #2525251f}.box-shadow-m{box-shadow:0 4px 6px -1px #25252514}.box-shadow-l{box-shadow:0 10px 15px -3px #25252514}.box-shadow-xl{box-shadow:0 20px 25px -5px #25252514}.anchored{position:relative}::slotted([slot="anchor-right"]),::slotted([slot="anchor-left"]),::slotted([slot="anchor-full"]){position:absolute;top:0}::slotted([slot="anchor-right"]),::slotted([slot="anchor-left"]){transform:translateY(-50%);z-index:3}::slotted([slot="anchor-right"]){right:var( --container-anchor-offset--mobile, var( --container-padding-right, var(--container-padding-inline, var(--container-padding)) ) )}::slotted([slot="anchor-left"]){left:var( --container-anchor-offset--mobile, var( --container-padding-left, var(--container-padding-inline, var(--container-padding)) ) )}::slotted([slot="anchor-full"]){transform:translateY(-100%);right:0;left:0;text-align:center;z-index:2}::slotted(px-vstack:only-of-type),::slotted(px-hstack:only-of-type),::slotted(px-stack:only-of-type),::slotted(px-grid:only-of-type){height:100%}:host([anchor-spacing]){margin-top:var(--container-anchor-spacing--mobile)}.border-s ::slotted([slot="anchor-full"]){right:calc(var(--px-size-border-s) * -1);left:calc(var(--px-size-border-s) * -1)}.border-m ::slotted([slot="anchor-full"]){right:calc(var(--px-size-border-m) * -1);left:calc(var(--px-size-border-m) * -1)}.border-l ::slotted([slot="anchor-full"]){right:calc(var(--px-size-border-l) * -1);left:calc(var(--px-size-border-l) * -1)}:host([subgrid-rows]){display:contents}:host([subgrid-rows]) .container{display:grid;grid-template-rows:subgrid;grid-row:span var(--subgrid-rows)}@media only screen and (max-width: 47.938em){.container{background-color:var(--background-color--mobile, var(--background-color))}:host([background-image--mobile]) .container{background-image:var(--background-image--mobile, var(--background-image))}:host([background-gradient--mobile]) .container{background-image:var( --background-gradient--mobile, var(--background-gradient) )}:host([inverted]) .container{background-color:var( --background-color-inverted--mobile, var(--background-color-inverted) )}.border-side-top--mobile{border-top-style:solid;border-right-style:none;border-bottom-style:none;border-left-style:none}.border-side-right--mobile{border-top-style:none;border-right-style:solid;border-bottom-style:none;border-left-style:none}.border-side-bottom--mobile{border-top-style:none;border-right-style:none;border-bottom-style:solid;border-left-style:none}.border-side-left--mobile{border-top-style:none;border-right-style:none;border-bottom-style:none;border-left-style:solid}.border-side-block--mobile{border-inline-style:none;border-block-style:solid}.border-side-inline--mobile{border-block-style:none;border-inline-style:solid}.no-border-radius-top--mobile{border-top-left-radius:var(--px-radius-none);border-top-right-radius:var(--px-radius-none)}.no-border-radius-right--mobile{border-top-right-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-bottom--mobile{border-bottom-left-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-left--mobile{border-top-left-radius:var(--px-radius-none);border-bottom-left-radius:var(--px-radius-none)}.no-border-radius-all--mobile{border-radius:var(--px-radius-none)}}@media only screen and (min-width: 48em) and (max-width: 64em){.container{background-color:var(--background-color--tablet, var(--background-color))}:host([background-image--tablet]) .container{background-image:var(--background-image--tablet, var(--background-image))}:host([background-gradient--tablet]) .container{background-image:var( --background-gradient--tablet, var(--background-gradient) )}:host([inverted]) .container{background-color:var( --background-color-inverted--tablet, var(--background-color-inverted) )}.no-border-radius-top--tablet{border-top-left-radius:var(--px-radius-none);border-top-right-radius:var(--px-radius-none)}.no-border-radius-right--tablet{border-top-right-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-bottom--tablet{border-bottom-left-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-left--tablet{border-top-left-radius:var(--px-radius-none);border-bottom-left-radius:var(--px-radius-none)}.no-border-radius-all--tablet{border-radius:var(--px-radius-none)}.border-side-top--tablet{border-top-style:solid;border-right-style:none;border-bottom-style:none;border-left-style:none}.border-side-right--tablet{border-top-style:none;border-right-style:solid;border-bottom-style:none;border-left-style:none}.border-side-bottom--tablet{border-top-style:none;border-right-style:none;border-bottom-style:solid;border-left-style:none}.border-side-left--tablet{border-top-style:none;border-right-style:none;border-bottom-style:none;border-left-style:solid}.border-side-block--tablet{border-inline-style:none;border-block-style:solid}.border-side-inline--tablet{border-block-style:none;border-inline-style:solid}::slotted([slot="anchor-right"]){right:var( --container-anchor-offset--tablet, var( --container-padding-right, var(--container-padding-inline, var(--container-padding)) ) )}::slotted([slot="anchor-left"]){left:var( --container-anchor-offset--tablet, var( --container-padding-left, var(--container-padding-inline, var(--container-padding)) ) )}:host([anchor-spacing]){margin-top:var(--container-anchor-spacing--tablet)}}@media only screen and (min-width: 64.0625em){.container{background-color:var(--background-color--laptop, var(--background-color))}:host([background-image--laptop]) .container{background-image:var(--background-image--laptop, var(--background-image))}:host([background-gradient--laptop]) .container{background-image:var( --background-gradient--laptop, var(--background-gradient) )}:host([inverted]) .container{background-color:var( --background-color-inverted--laptop, var(--background-color-inverted) )}.no-border-radius-top--laptop{border-top-left-radius:var(--px-radius-none);border-top-right-radius:var(--px-radius-none)}.no-border-radius-right--laptop{border-top-right-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-bottom--laptop{border-bottom-left-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-left--laptop{border-top-left-radius:var(--px-radius-none);border-bottom-left-radius:var(--px-radius-none)}.no-border-radius-all--laptop{border-radius:var(--px-radius-none)}::slotted([slot="anchor-right"]){right:var( --container-anchor-offset--laptop, var( --container-padding-right, var(--container-padding-inline, var(--container-padding)) ) )}::slotted([slot="anchor-left"]){left:var( --container-anchor-offset--laptop, var( --container-padding-left, var(--container-padding-inline, var(--container-padding)) ) )}:host([anchor-spacing]){margin-top:var(--container-anchor-spacing--laptop)}.border-side-top--laptop{border-top-style:solid;border-right-style:none;border-bottom-style:none;border-left-style:none}.border-side-right--laptop{border-top-style:none;border-right-style:solid;border-bottom-style:none;border-left-style:none}.border-side-bottom--laptop{border-top-style:none;border-right-style:none;border-bottom-style:solid;border-left-style:none}.border-side-left--laptop{border-top-style:none;border-right-style:none;border-bottom-style:none;border-left-style:solid}.border-side-block--laptop{border-inline-style:none;border-block-style:solid}.border-side-inline--laptop{border-block-style:none;border-inline-style:solid}}';
 const containerStyles = new CSSStyleSheet();
 containerStyles.replaceSync(containerCss);
 const anchorSpacingValues = [
@@ -2279,6 +2279,20 @@ const anchorSpacingValues = [
   "has-ribbon",
   "neighbor-has-ribbon"
 ];
+const subgridRowsValues = [
+  "1",
+  "2",
+  "3",
+  "4",
+  "5",
+  "6",
+  "7",
+  "8",
+  "9",
+  "10",
+  "11",
+  "12"
+];
 const attributeBreakpointCSSSelector$3 = (attributeName, attributeValue, device) => `:host([${attributeName}${device ? `--${device}` : ""}='${attributeValue}']) .container`;
 const paddingPrefix$1 = "px-padding";
 const containerBreakpoints = [
@@ -2326,9 +2340,17 @@ const containerBreakpoints = [
     paddingValues,
     paddingPrefix$1,
     "--container-padding-left"
+  ),
+  cssTokenBreakpoints(
+    "gap",
+    attributeBreakpointCSSSelector$3,
+    gapValues,
+    "px-spacing",
+    void 0,
+    "subgrid-gap"
   )
 ];
-const _Container = class _Container extends VerticallyExtendedElement {
+const _Container = class _Container extends WithExtraAttributes {
   constructor() {
     super(containerStyles, ...containerBreakpoints);
     this.template = () => `<div class="container">
@@ -2339,6 +2361,7 @@ const _Container = class _Container extends VerticallyExtendedElement {
     </div>`;
     this._bgObserver = null;
     this._isInViewport = false;
+    this.contentObserver = null;
     this.shadowRoot.innerHTML = this.template();
   }
   static get observedAttributes() {
@@ -2372,11 +2395,11 @@ const _Container = class _Container extends VerticallyExtendedElement {
       "box-shadow",
       "anchor-offset",
       "anchor-spacing",
-      "inverted"
+      "inverted",
+      "subgrid-rows"
     ];
   }
   connectedCallback() {
-    super.connectedCallback();
     if (!this.padding) {
       this.padding = "m";
     }
@@ -2412,9 +2435,9 @@ const _Container = class _Container extends VerticallyExtendedElement {
     this._bgObserver.observe(this.$el);
   }
   disconnectedCallback() {
-    var _a;
+    var _a, _b;
     (_a = this._bgObserver) == null ? void 0 : _a.disconnect();
-    this.contentObserver.disconnect();
+    (_b = this.contentObserver) == null ? void 0 : _b.disconnect();
   }
   attributeChangedCallback(attrName, oldValue, newValue) {
     if (oldValue !== newValue) {
@@ -2492,6 +2515,14 @@ const _Container = class _Container extends VerticallyExtendedElement {
         case "anchor-spacing":
           this.updateAnchorSpacing(oldValue, newValue, anchorSpacingValues);
           break;
+        case "subgrid-rows":
+          this.updateSubgridRows(
+            attrName,
+            oldValue,
+            newValue,
+            subgridRowsValues
+          );
+          break;
         default:
           super.attributeChangedCallback(attrName, oldValue, newValue);
           break;
@@ -2673,6 +2704,19 @@ const _Container = class _Container extends VerticallyExtendedElement {
     updateAnchorSpacingStyle(oldValue);
     updateAnchorSpacingStyle(newValue);
   }
+  updateSubgridRows(attrName, oldValue, newValue, attrValues) {
+    if (!checkName(attrValues, newValue)) {
+      log(
+        `${newValue} is not an allowed ${attrName} value for ${this.tagName.toLowerCase()}`
+      );
+    } else {
+      this.style.setProperty(`--${attrName}`, newValue);
+    }
+  }
+  get $el() {
+    var _a;
+    return (_a = this == null ? void 0 : this.shadowRoot) == null ? void 0 : _a.querySelector(".container");
+  }
   get $slotAnchor() {
     return this.querySelector('[slot^="anchor"]');
   }
@@ -3013,10 +3057,44 @@ const _Container = class _Container extends VerticallyExtendedElement {
     this.setAttribute("anchor-spacing", value);
   }
   get inverted() {
-    return this.getAttribute("inverted");
+    return this.hasAttribute("inverted");
   }
   set inverted(value) {
-    this.setAttribute("inverted", value);
+    if (value) {
+      this.setAttribute("inverted", "");
+    } else {
+      this.removeAttribute("inverted");
+    }
+  }
+  get subgridRows() {
+    return this.getAttribute("subgrid-rows");
+  }
+  set subgridRows(value) {
+    this.setAttribute("subgrid-rows", value);
+  }
+  get subgridGap() {
+    return this.getAttribute("subgrid-gap");
+  }
+  set subgridGap(value) {
+    this.setAttribute("subgrid-gap", value);
+  }
+  get subgridGapMobile() {
+    return this.getAttribute("subgrid-gap--mobile");
+  }
+  set subgridGapMobile(value) {
+    this.setAttribute("subgrid-gap--mobile", value);
+  }
+  get subgridGapTablet() {
+    return this.getAttribute("subgrid-gap--tablet");
+  }
+  set subgridGapTablet(value) {
+    this.setAttribute("subgrid-gap--tablet", value);
+  }
+  get subgridGapLaptop() {
+    return this.getAttribute("subgrid-gap--laptop");
+  }
+  set subgridGapLaptop(value) {
+    this.setAttribute("subgrid-gap--laptop", value);
   }
 };
 _Container.nativeName = "div";
@@ -7795,7 +7873,7 @@ class CellRadio extends WithExtraAttributes {
   }
   connectedCallback() {
     var _a;
-    this.tabIndex = ((_a = this.parentElement) == null ? void 0 : _a.firstElementChild) === this ? 0 : -1;
+    this.tabIndex = ((_a = this.parentElement) == null ? void 0 : _a.querySelector("px-cell-radio")) === this ? 0 : -1;
     this.role = "radio";
     if (this.internals) {
       this.internals.role = "radio";
@@ -9492,19 +9570,14 @@ class Drawer extends HTMLElement {
   connectedCallback() {
     var _a;
     this.toggleFooterVisibility = this.toggleFooterVisibility.bind(this);
-    if (!this.hasAttribute("showfrom")) {
-      this.setAttribute("showfrom", "bottom");
+    if (this.$opener) {
+      this.addOpenListener();
     }
-    if (this.hasAttribute("closedby")) {
-      const $closer = document.querySelector(
-        `#${this.getAttribute("closedby")}`
-      );
-      $closer == null ? void 0 : $closer.addEventListener("click", () => {
-        this.hide();
-      });
+    if (this.$closer) {
+      this.addCloseListener();
     }
-    if (this.hasAttribute("openedby")) {
-      this.addOpenListener();
+    if (!this.hasAttribute("showfrom")) {
+      this.setAttribute("showfrom", "bottom");
     }
     this.$closeButton.addEventListener("click", () => {
       this.hide();
@@ -9516,36 +9589,56 @@ class Drawer extends HTMLElement {
     );
   }
   static get observedAttributes() {
-    return ["open", "aria-label-close-button", "openedby"];
+    return ["open", "aria-label-close-button", "openedby", "closedby"];
   }
-  attributeChangedCallback(name, oldValue, newValue) {
+  attributeChangedCallback(attrName, oldValue, newValue) {
     var _a, _b, _c;
-    if (name === "open") {
-      if (newValue !== null) {
-        this.show();
-      } else {
-        this.hide();
-      }
-    } else if (name === "aria-label-close-button") {
-      if (!newValue) {
-        (_a = this.$closeButton) == null ? void 0 : _a.removeAttribute("aria-label");
-      } else {
-        (_c = (_b = this.$closeButton) == null ? void 0 : _b.setAttribute) == null ? void 0 : _c.call(
-          _b,
-          "aria-label",
-          newValue || "Close drawer"
-        );
-      }
-    } else if (name === "openedby") {
-      this.addOpenListener();
+    switch (attrName) {
+      case "open":
+        if (newValue !== null) {
+          this.show();
+        } else {
+          this.hide();
+        }
+        break;
+      case "aria-label-close-button":
+        if (!newValue) {
+          (_a = this.$closeButton) == null ? void 0 : _a.removeAttribute("aria-label");
+        } else {
+          (_c = (_b = this.$closeButton) == null ? void 0 : _b.setAttribute) == null ? void 0 : _c.call(
+            _b,
+            "aria-label",
+            newValue || "Close drawer"
+          );
+        }
+        break;
+      case "openedby":
+        if (newValue !== oldValue) {
+          if (oldValue) {
+            const oldOpener = document.querySelector(`#${oldValue}`);
+            oldOpener == null ? void 0 : oldOpener.removeEventListener("click", () => this.show());
+          }
+          this.addOpenListener();
+        }
+        break;
+      case "closedby":
+        this.addCloseListener();
+        break;
     }
   }
   disconnectedCallback() {
-    var _a;
+    var _a, _b;
     (_a = this.$slotFooter) == null ? void 0 : _a.removeEventListener(
       "slotchange",
       this.toggleFooterVisibility
     );
+    (_b = this.observer) == null ? void 0 : _b.disconnect();
+    if (this.$opener) {
+      this.$opener.removeEventListener("click", () => this.show());
+    }
+    if (this.$closer) {
+      this.$closer.removeEventListener("click", () => this.hide());
+    }
   }
   show() {
     var _a, _b;
@@ -9571,15 +9664,41 @@ class Drawer extends HTMLElement {
     }
   }
   addOpenListener() {
-    var _a, _b, _c;
-    if (((_a = this.$opener) == null ? void 0 : _a.getAttribute("data-has-opener")) !== "true") {
-      (_b = this.$opener) == null ? void 0 : _b.setAttribute("data-has-opener", "true");
-      (_c = this.$opener) == null ? void 0 : _c.addEventListener("click", () => this.show());
+    if (this.$opener) {
+      if (this.$opener.getAttribute("data-has-opener") !== "true") {
+        this.$opener.setAttribute("data-has-opener", "true");
+        this.$opener.addEventListener("click", () => this.show());
+      }
+    } else {
+      this.observer = new MutationObserver(() => {
+        if (this.$opener) {
+          this.observer.disconnect();
+          this.observer = null;
+          this.addOpenListener();
+        }
+      });
+      this.observer.observe(document.body, {
+        childList: true,
+        subtree: true
+      });
+    }
+  }
+  addCloseListener() {
+    var _a;
+    if (this.$closer) {
+      (_a = this.$closer) == null ? void 0 : _a.addEventListener("click", () => {
+        this.hide();
+      });
     }
   }
   get $opener() {
     return document.querySelector(
-      `px-button#${this.getAttribute("openedby")}`
+      `#${this.getAttribute("openedby")}`
+    );
+  }
+  get $closer() {
+    return document.querySelector(
+      `#${this.getAttribute("closedby")}`
     );
   }
   get $closeButton() {
@@ -9609,10 +9728,10 @@ class Drawer extends HTMLElement {
       this.removeAttribute("open");
     }
   }
-  get ariaLabelCloseButton() {
+  get AriaLabelCloseButton() {
     return this.getAttribute("aria-label-close-button");
   }
-  set ariaLabelCloseButton(value) {
+  set AriaLabelCloseButton(value) {
     this.setAttribute("aria-label-close-button", value);
   }
   get openedby() {
@@ -9621,6 +9740,12 @@ class Drawer extends HTMLElement {
   set openedby(value) {
     this.setAttribute("openedby", value);
   }
+  get closedby() {
+    return this.getAttribute("closedby");
+  }
+  set closedby(value) {
+    this.setAttribute("closedby", value);
+  }
 }
 if (!customElements.get("px-drawer")) {
   customElements.define("px-drawer", Drawer);
@@ -12615,6 +12740,7 @@ class Modal extends HTMLElement {
     this.onOpenClick = () => this.show();
     this.onCloseClick = () => this.close();
     this.commandButtonCleanups = [];
+    this.opener = null;
     this.openerElement = null;
     this.closerElement = null;
     this.template = `<dialog>
@@ -12819,12 +12945,29 @@ class Modal extends HTMLElement {
   addOpenListener() {
     var _a;
     this.removeOpenListener();
-    this.openerElement = this.$opener;
-    (_a = this.openerElement) == null ? void 0 : _a.addEventListener("click", this.onOpenClick);
+    if (this.$opener) {
+      this.openerElement = this.$opener;
+      this.openerElement.addEventListener("click", this.onOpenClick);
+    } else {
+      (_a = this.opener) == null ? void 0 : _a.disconnect();
+      this.opener = new MutationObserver(() => {
+        if (this.$opener) {
+          this.opener.disconnect();
+          this.opener = null;
+          this.addOpenListener();
+        }
+      });
+      this.opener.observe(document.body, {
+        childList: true,
+        subtree: true
+      });
+    }
   }
   removeOpenListener() {
-    var _a;
-    (_a = this.openerElement) == null ? void 0 : _a.removeEventListener("click", this.onOpenClick);
+    var _a, _b;
+    (_a = this.opener) == null ? void 0 : _a.disconnect();
+    this.opener = null;
+    (_b = this.openerElement) == null ? void 0 : _b.removeEventListener("click", this.onOpenClick);
     this.openerElement = null;
   }
   addCloseListener(value) {
@@ -13751,7 +13894,7 @@ class SelectableBoxRadio extends WithExtraAttributes {
       this.internals.ariaChecked = `${this.checked}`;
     }
     this.ariaChecked = `${this.checked}`;
-    this.tabIndex = ((_a = this.parentElement) == null ? void 0 : _a.firstElementChild) === this ? 0 : -1;
+    this.tabIndex = ((_a = this.parentElement) == null ? void 0 : _a.querySelector("px-selectable-box-radio")) === this ? 0 : -1;
     this.toggleFooterVisibility();
     this.$slotFooter.addEventListener(
       "slotchange",
@@ -16098,7 +16241,7 @@ class TileRadio extends WithExtraAttributes {
       this.internals.ariaChecked = `${this.checked}`;
     }
     this.ariaChecked = `${this.checked}`;
-    this.tabIndex = ((_a = this.parentElement) == null ? void 0 : _a.firstElementChild) === this ? 0 : -1;
+    this.tabIndex = ((_a = this.parentElement) == null ? void 0 : _a.querySelector("px-tile-radio")) === this ? 0 : -1;
     if (this.$slotPrefix) {
       const prefixImg = this.querySelector('px-img[slot="prefix"]');
       if (prefixImg) {
@@ -17137,6 +17280,7 @@ export {
   statusStateValues,
   statusValues,
   styleSheet$A as styleSheet,
+  subgridRowsValues,
   suffixButtonIconVariantValues,
   textalignValues,
   tileBackgroundColorValues,