@proximus/lavender-light 1.4.7-alpha.2 → 1.4.7-alpha.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/dist/lavender-light.cjs.js +1 -1
  2. package/dist/lavender-light.es.js +93 -23
  3. package/dist/lavender-light.umd.js +1 -1
  4. package/package.json +1 -1
package/dist/lavender-light.es.js CHANGED
@@ -533,14 +533,6 @@ const _PxElement = class _PxElement extends WithExtraAttributes {
533
533
  };
534
534
  _PxElement.accessorExclusions = [];
535
535
  let PxElement = _PxElement;
536
- class VerticallyExtendedElement extends PxElement {
537
- connectedCallback() {
538
- if (this.isInsideGridOrStack) {
539
- this.$el.style.display = "block";
540
- this.$el.style.height = "100%";
541
- }
542
- }
543
- }
544
536
  const flexboxAlignSelfValues = [
545
537
  "",
546
538
  "default",
@@ -853,43 +845,43 @@ function transferAccessibilityAttributes(sourceElement, targetElement, applyLabe
853
845
  sourceElement.setAttribute("aria-labelledby", id);
854
846
  }
855
847
  }
856
- function cssTokenBreakpoints(attributeName, selector, attributeValues, cssPropertyPrefix = "", generatedCssPropertyName) {
848
+ function cssTokenBreakpoints(attributeName, selector, attributeValues, cssPropertyPrefix = "", generatedCssPropertyName, selectorAttributeName = attributeName) {
857
849
  const stylesheet2 = new CSSStyleSheet();
858
850
  const styles2 = attributeValues.reduce(
859
851
  (prev, attributeValue) => prev + `
860
- ${selector(attributeName, attributeValue)} {
852
+ ${selector(selectorAttributeName, attributeValue)} {
861
853
  ${attributeName}: var(--${cssPropertyPrefix}-${attributeValue}-desktop);
862
854
  ${generatedCssPropertyName ? `${generatedCssPropertyName}:var(--${cssPropertyPrefix}-${attributeValue}-desktop)` : ""}
863
855
  }
864
856
  /* Mobile only - max 767px */
865
857
  @media only screen and (max-width: 47.938em) {
866
- ${selector(attributeName, attributeValue)} {
858
+ ${selector(selectorAttributeName, attributeValue)} {
867
859
  ${attributeName}: var(--${cssPropertyPrefix}-${attributeValue}-mobile);
868
860
  ${generatedCssPropertyName ? `${generatedCssPropertyName}: var(--${cssPropertyPrefix}-${attributeValue}-mobile)` : ""}
869
861
  }
870
862
  }
871
- ${selector(attributeName, attributeValue, "mobile")} {
863
+ ${selector(selectorAttributeName, attributeValue, "mobile")} {
872
864
  /* Mobile only - max 767px */
873
865
  @media only screen and (max-width: 47.938em) {
874
866
  ${attributeName}: var(--${cssPropertyPrefix}-${attributeValue}-mobile) !important;
875
867
  ${generatedCssPropertyName ? `${generatedCssPropertyName}: var(--${cssPropertyPrefix}-${attributeValue}-mobile)` : ""}
876
868
  }
877
869
  }
878
- ${selector(attributeName, attributeValue, "tablet")} {
870
+ ${selector(selectorAttributeName, attributeValue, "tablet")} {
879
871
  /* Tablet - min 768px max 1024px */
880
872
  @media only screen and (min-width: 48em) and (max-width: 64em) {
881
873
  ${attributeName}: var(--${cssPropertyPrefix}-${attributeValue}-desktop) !important;
882
874
  ${generatedCssPropertyName ? `${generatedCssPropertyName}: var(--${cssPropertyPrefix}-${attributeValue}-desktop)` : ""}
883
875
  }
884
876
  }
885
- ${selector(attributeName, attributeValue, "laptop")} {
877
+ ${selector(selectorAttributeName, attributeValue, "laptop")} {
886
878
  /* Laptop - 1025px*/
887
879
  @media only screen and (min-width: 64.0625em) {
888
880
  ${attributeName}: var(--${cssPropertyPrefix}-${attributeValue}-desktop) !important;
889
881
  ${generatedCssPropertyName ? `${generatedCssPropertyName}: var(--${cssPropertyPrefix}-${attributeValue}-desktop)` : ""}
890
882
  }
891
883
  }
892
- ${selector(attributeName, attributeValue, "desktop")} {
884
+ ${selector(selectorAttributeName, attributeValue, "desktop")} {
893
885
  /* Desktop - 1025px*/
894
886
  @media only screen and (min-width: 64.0625em) {
895
887
  ${attributeName}: var(--${cssPropertyPrefix}-${attributeValue}-desktop) !important;
@@ -1051,7 +1043,7 @@ class Typography extends HTMLElement {
1051
1043
  if (!customElements.get("px-typography")) {
1052
1044
  customElements.define("px-typography", Typography);
1053
1045
  }
1054
- 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}}';
1046
+ 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}}';
1055
1047
  const containerStyles = new CSSStyleSheet();
1056
1048
  containerStyles.replaceSync(containerCss);
1057
1049
  const anchorSpacingValues = [
@@ -1060,6 +1052,20 @@ const anchorSpacingValues = [
1060
1052
  "has-ribbon",
1061
1053
  "neighbor-has-ribbon"
1062
1054
  ];
1055
+ const subgridRowsValues = [
1056
+ "1",
1057
+ "2",
1058
+ "3",
1059
+ "4",
1060
+ "5",
1061
+ "6",
1062
+ "7",
1063
+ "8",
1064
+ "9",
1065
+ "10",
1066
+ "11",
1067
+ "12"
1068
+ ];
1063
1069
  const attributeBreakpointCSSSelector$1 = (attributeName, attributeValue, device) => `:host([${attributeName}${device ? `--${device}` : ""}='${attributeValue}']) .container`;
1064
1070
  const paddingPrefix = "px-padding";
1065
1071
  const containerBreakpoints = [
@@ -1107,9 +1113,17 @@ const containerBreakpoints = [
1107
1113
  paddingValues,
1108
1114
  paddingPrefix,
1109
1115
  "--container-padding-left"
1116
+ ),
1117
+ cssTokenBreakpoints(
1118
+ "gap",
1119
+ attributeBreakpointCSSSelector$1,
1120
+ gapValues,
1121
+ "px-spacing",
1122
+ void 0,
1123
+ "subgrid-gap"
1110
1124
  )
1111
1125
  ];
1112
- const _Container = class _Container extends VerticallyExtendedElement {
1126
+ const _Container = class _Container extends WithExtraAttributes {
1113
1127
  constructor() {
1114
1128
  super(containerStyles, ...containerBreakpoints);
1115
1129
  this.template = () => `<div class="container">
@@ -1120,6 +1134,7 @@ const _Container = class _Container extends VerticallyExtendedElement {
1120
1134
  </div>`;
1121
1135
  this._bgObserver = null;
1122
1136
  this._isInViewport = false;
1137
+ this.contentObserver = null;
1123
1138
  this.shadowRoot.innerHTML = this.template();
1124
1139
  }
1125
1140
  static get observedAttributes() {
@@ -1153,11 +1168,11 @@ const _Container = class _Container extends VerticallyExtendedElement {
1153
1168
  "box-shadow",
1154
1169
  "anchor-offset",
1155
1170
  "anchor-spacing",
1156
- "inverted"
1171
+ "inverted",
1172
+ "subgrid-rows"
1157
1173
  ];
1158
1174
  }
1159
1175
  connectedCallback() {
1160
- super.connectedCallback();
1161
1176
  if (!this.padding) {
1162
1177
  this.padding = "m";
1163
1178
  }
@@ -1193,9 +1208,9 @@ const _Container = class _Container extends VerticallyExtendedElement {
1193
1208
  this._bgObserver.observe(this.$el);
1194
1209
  }
1195
1210
  disconnectedCallback() {
1196
- var _a;
1211
+ var _a, _b;
1197
1212
  (_a = this._bgObserver) == null ? void 0 : _a.disconnect();
1198
- this.contentObserver.disconnect();
1213
+ (_b = this.contentObserver) == null ? void 0 : _b.disconnect();
1199
1214
  }
1200
1215
  attributeChangedCallback(attrName, oldValue, newValue) {
1201
1216
  if (oldValue !== newValue) {
@@ -1273,6 +1288,14 @@ const _Container = class _Container extends VerticallyExtendedElement {
1273
1288
  case "anchor-spacing":
1274
1289
  this.updateAnchorSpacing(oldValue, newValue, anchorSpacingValues);
1275
1290
  break;
1291
+ case "subgrid-rows":
1292
+ this.updateSubgridRows(
1293
+ attrName,
1294
+ oldValue,
1295
+ newValue,
1296
+ subgridRowsValues
1297
+ );
1298
+ break;
1276
1299
  default:
1277
1300
  super.attributeChangedCallback(attrName, oldValue, newValue);
1278
1301
  break;
@@ -1454,6 +1477,19 @@ const _Container = class _Container extends VerticallyExtendedElement {
1454
1477
  updateAnchorSpacingStyle(oldValue);
1455
1478
  updateAnchorSpacingStyle(newValue);
1456
1479
  }
1480
+ updateSubgridRows(attrName, oldValue, newValue, attrValues) {
1481
+ if (!checkName(attrValues, newValue)) {
1482
+ log(
1483
+ `${newValue} is not an allowed ${attrName} value for ${this.tagName.toLowerCase()}`
1484
+ );
1485
+ } else {
1486
+ this.style.setProperty(`--${attrName}`, newValue);
1487
+ }
1488
+ }
1489
+ get $el() {
1490
+ var _a;
1491
+ return (_a = this == null ? void 0 : this.shadowRoot) == null ? void 0 : _a.querySelector(".container");
1492
+ }
1457
1493
  get $slotAnchor() {
1458
1494
  return this.querySelector('[slot^="anchor"]');
1459
1495
  }
@@ -1794,10 +1830,44 @@ const _Container = class _Container extends VerticallyExtendedElement {
1794
1830
  this.setAttribute("anchor-spacing", value);
1795
1831
  }
1796
1832
  get inverted() {
1797
- return this.getAttribute("inverted");
1833
+ return this.hasAttribute("inverted");
1798
1834
  }
1799
1835
  set inverted(value) {
1800
- this.setAttribute("inverted", value);
1836
+ if (value) {
1837
+ this.setAttribute("inverted", "");
1838
+ } else {
1839
+ this.removeAttribute("inverted");
1840
+ }
1841
+ }
1842
+ get subgridRows() {
1843
+ return this.getAttribute("subgrid-rows");
1844
+ }
1845
+ set subgridRows(value) {
1846
+ this.setAttribute("subgrid-rows", value);
1847
+ }
1848
+ get subgridGap() {
1849
+ return this.getAttribute("subgrid-gap");
1850
+ }
1851
+ set subgridGap(value) {
1852
+ this.setAttribute("subgrid-gap", value);
1853
+ }
1854
+ get subgridGapMobile() {
1855
+ return this.getAttribute("subgrid-gap--mobile");
1856
+ }
1857
+ set subgridGapMobile(value) {
1858
+ this.setAttribute("subgrid-gap--mobile", value);
1859
+ }
1860
+ get subgridGapTablet() {
1861
+ return this.getAttribute("subgrid-gap--tablet");
1862
+ }
1863
+ set subgridGapTablet(value) {
1864
+ this.setAttribute("subgrid-gap--tablet", value);
1865
+ }
1866
+ get subgridGapLaptop() {
1867
+ return this.getAttribute("subgrid-gap--laptop");
1868
+ }
1869
+ set subgridGapLaptop(value) {
1870
+ this.setAttribute("subgrid-gap--laptop", value);
1801
1871
  }
1802
1872
  };
1803
1873
  _Container.nativeName = "div";