@proximus/lavender-content-header 1.4.16-beta.3 → 1.4.16-beta.5

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 (5) hide show
  1. package/dist/ContentHeader.d.ts +1 -1
  2. package/dist/custom-elements.json +7 -9
  3. package/dist/index.es.js +252 -220
  4. package/dist/web-types.json +2 -3
  5. package/package.json +1 -1
package/dist/index.es.js CHANGED
@@ -1,4 +1,4 @@
1
- import { AttributeBreakpointHandlerDelegate as e, PxElement as t, WithExtraAttributes as n, backgroundColorValues as r, backgroundSizeValues as i, booleanPropertyToAttributeSetter as a, borderColorValues as o, borderRadiusValues as s, borderSideValues as c, borderValues as l, boxShadowValues as u, checkName as d, cssTokenBreakpoints as f, gapValues as p, gradientValues as m, log as h, noBorderRadiusValues as g, paddingValues as _, propertyToAttributeSetter as v } from "@proximus/lavender-common";
1
+ import { AttributeBreakpointHandlerDelegate as e, PxElement as t, WithExtraAttributes as n, backgroundColorValues as r, backgroundSizeValues as i, booleanPropertyToAttributeSetter as a, borderColorValues as o, borderRadiusValues as s, borderSideValues as c, borderValues as ee, boxShadowValues as te, checkName as l, createTemplate as u, cssTokenBreakpoints as d, gapValues as f, gradientValues as p, log as m, noBorderRadiusValues as h, paddingValues as g, propertyToAttributeSetter as _, renderTemplate as v } from "@proximus/lavender-common";
2
2
  import "@proximus/lavender-heading";
3
3
  //#region src/contentheader.css?inline
4
4
  var y = ":host{--min-height--mobile:15.625rem;--min-height--tablet:17.5rem;--min-height--laptop:17.5rem;--min-height--desktop:17.5rem}:host,:host>*{box-sizing:border-box;display:block}.content-header{z-index:0;position:relative}[min-height] .content-header-content{min-height:calc(var(--min-height--mobile) - (var(--px-spacing-l-mobile) * 2) )}.content-header-content{z-index:2;box-sizing:border-box;flex-direction:column;display:flex;position:relative}.content-header-content ::slotted([slot=patch]){margin-top:var(--px-spacing-l-mobile)}.contrast-helper{z-index:1;pointer-events:none;display:none;position:absolute;inset:0}[contrast-helper-gradient] .contrast-helper{background-image:linear-gradient(90deg,#fff 23.43%,#fff0 81.69%);display:block}[inverted] :is([contrast-helper-gradient] .contrast-helper){background-image:linear-gradient(90deg,#000 23.43%,#0000 81.69%)}[contrast-helper-overlay] .contrast-helper{background-color:#ffffffb3;display:block}[inverted] :is([contrast-helper-overlay] .contrast-helper){background-color:#0006}@media screen and (width>=48rem){.content-header-content ::slotted([slot=patch]){flex-shrink:0}.content-header-content ::slotted([slot=patch]),.content-header-content ::slotted([slot=patch-description]){margin-top:var(--px-spacing-l-tablet)}[min-height] .content-header-content{min-height:calc(var(--min-height--tablet) - (var(--px-spacing-l-tablet) * 2))}}@media screen and (width>=64.0625rem){.content-header-content ::slotted([slot=patch]),.content-header-content ::slotted([slot=patch-description]){margin-top:var(--px-spacing-l-laptop)}[min-height] .content-header-content{min-height:calc(var(--min-height--laptop) - (var(--px-spacing-l-laptop) * 2))}}@media screen and (width>=90.0625rem){.content-header-content ::slotted([slot=patch]),.content-header-content ::slotted([slot=patch-description]){margin-top:var(--px-spacing-l-desktop)}[min-height] .content-header-content{min-height:calc(var(--min-height--desktop) - (var(--px-spacing-l-desktop) * 2))}}", b = ":host{display:block}:host,:host *{box-sizing:border-box}.content-wrapper{margin-inline:var(--px-padding-s-mobile);max-width:var(--px-content-wrapper-max-width-desktop)}@media screen and (width>=77rem){.content-wrapper{margin-inline:auto}}.overlapped{margin-bottom:calc(var(--px-overlapped-mobile) * -1)}::slotted([slot=overlap]){margin-top:var(--px-overlapped-mobile)}@media screen and (width>=48rem){.overlapped{margin-bottom:calc(var(--px-overlapped-tablet) * -1)}::slotted([slot=overlap]){margin-top:var(--px-overlapped-tablet)}}@media screen and (width>=64.0625rem){.overlapped{margin-bottom:calc(var(--px-overlapped-laptop) * -1)}::slotted([slot=overlap]){margin-top:var(--px-overlapped-laptop)}}", x = ":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-left-style:none;border-right-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-left-style:none;border-right-style:none}.border-side-left{border-top-style:none;border-bottom-style:none;border-right-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-position:50%;background-size:cover}.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]){z-index:3;transform:translateY(-50%)}::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]){text-align:center;z-index:2;left:0;right:0;transform:translateY(-100%)}::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{grid-template-rows:subgrid;grid-row:span var(--subgrid-rows);display:grid}:host([subgrid-rows]):host([grow]) .container{flex-grow:var(--grow-value)}:host([subgrid-rows]):host([shrink]) .container{flex-shrink:var(--shrink-value)}:host([subgrid-rows]):host([basis]) .container{flex-basis:var(--basis-value)}:host([subgrid-rows]):host([align-self]) .container{align-self:var(--align-self-value)}:host([subgrid-rows]):host([col-span]) .container{grid-column:span var(--col-span-value) / span var(--col-span-value)}:host([subgrid-rows]):host([justify-self]) .container{justify-self:var(--justify-self-value)}:host([subgrid-rows]):host([order]) .container{order:var(--order-value)}:host([subgrid-rows]):host([anchor-spacing]) .container{margin-top:var(--container-anchor-spacing--mobile)}@media screen and (width<=47.938rem){.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-style:solid none none}.border-side-right--mobile{border-style:none solid none none}.border-side-bottom--mobile{border-style:none none solid}.border-side-left--mobile{border-style:none none none solid}.border-side-block--mobile{border-block-style:solid;border-inline-style:none}.border-side-inline--mobile{border-block-style:none;border-inline-style:solid}.no-border-radius-top--mobile{border-top-left-radius:var(--px-radius-none);border-top-right-radius:var(--px-radius-none)}.no-border-radius-right--mobile{border-top-right-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-bottom--mobile{border-bottom-left-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-left--mobile{border-top-left-radius:var(--px-radius-none);border-bottom-left-radius:var(--px-radius-none)}.no-border-radius-all--mobile{border-radius:var(--px-radius-none)}:host([subgrid-rows]):host([grow--mobile]) .container{flex-grow:var(--grow--mobile-value)}:host([subgrid-rows]):host([shrink--mobile]) .container{flex-shrink:var(--shrink--mobile-value)}:host([subgrid-rows]):host([basis--mobile]) .container{flex-basis:var(--basis--mobile-value)}:host([subgrid-rows]):host([align-self--mobile]) .container{align-self:var(--align-self--mobile-value)}:host([subgrid-rows]):host([col-span--mobile]) .container{grid-column:span var(--col-span--mobile-value) / span var(--col-span--mobile-value)}:host([subgrid-rows]):host([justify-self--mobile]) .container{justify-self:var(--justify-self--mobile-value)}:host([subgrid-rows]):host([order--mobile]) .container{order:var(--order--mobile-value)}}@media screen and (width>=48rem) and (width<=64rem){.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-style:solid none none}.border-side-right--tablet{border-style:none solid none none}.border-side-bottom--tablet{border-style:none none solid}.border-side-left--tablet{border-style:none none none solid}.border-side-block--tablet{border-block-style:solid;border-inline-style:none}.border-side-inline--tablet{border-block-style:none;border-inline-style:solid}::slotted([slot=anchor-right]){right:var(--container-anchor-offset--tablet,var(--container-padding-right,var(--container-padding-inline,var(--container-padding))))}::slotted([slot=anchor-left]){left:var(--container-anchor-offset--tablet,var(--container-padding-left,var(--container-padding-inline,var(--container-padding))))}:host([anchor-spacing]){margin-top:var(--container-anchor-spacing--tablet)}:host([subgrid-rows]):host([col-span--tablet]) .container{grid-column:span var(--col-span--tablet-value) / span var(--col-span--tablet-value)}:host([subgrid-rows]):host([grow--tablet]) .container{flex-grow:var(--grow--tablet-value)}:host([subgrid-rows]):host([shrink--tablet]) .container{flex-shrink:var(--shrink--tablet-value)}:host([subgrid-rows]):host([basis--tablet]) .container{flex-basis:var(--basis--tablet-value)}:host([subgrid-rows]):host([align-self--tablet]) .container{align-self:var(--align-self--tablet-value)}:host([subgrid-rows]):host([justify-self--tablet]) .container{justify-self:var(--justify-self--tablet-value)}:host([subgrid-rows]):host([order--tablet]) .container{order:var(--order--tablet-value)}:host([subgrid-rows]):host([anchor-spacing]) .container{margin-top:var(--container-anchor-spacing--tablet)}}@media screen and (width>=64.0625rem) and (width<=90rem){:host([anchor-spacing]){margin-top:var(--container-anchor-spacing--laptop)}:host([subgrid-rows]):host([col-span--laptop]) .container{grid-column:span var(--col-span--laptop-value) / span var(--col-span--laptop-value)}:host([subgrid-rows]):host([grow--laptop]) .container{flex-grow:var(--grow--laptop-value)}:host([subgrid-rows]):host([shrink--laptop]) .container{flex-shrink:var(--shrink--laptop-value)}:host([subgrid-rows]):host([basis--laptop]) .container{flex-basis:var(--basis--laptop-value)}:host([subgrid-rows]):host([align-self--laptop]) .container{align-self:var(--align-self--laptop-value)}:host([subgrid-rows]):host([justify-self--laptop]) .container{justify-self:var(--justify-self--laptop-value)}:host([subgrid-rows]):host([order--laptop]) .container{order:var(--order--laptop-value)}:host([subgrid-rows]):host([anchor-spacing]) .container{margin-top:var(--container-anchor-spacing--laptop)}}@media screen and (width>=64.0625rem){.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-style:solid none none}.border-side-right--laptop{border-style:none solid none none}.border-side-bottom--laptop{border-style:none none solid}.border-side-left--laptop{border-style:none none none solid}.border-side-block--laptop{border-block-style:solid;border-inline-style:none}.border-side-inline--laptop{border-block-style:none;border-inline-style:solid}}@media screen and (width>=90.0625rem){:host([anchor-spacing]){margin-top:var(--container-anchor-spacing--desktop)}:host([subgrid-rows]):host([col-span--desktop]) .container{grid-column:span var(--col-span--desktop-value) / span var(--col-span--desktop-value)}:host([subgrid-rows]):host([grow--desktop]) .container{flex-grow:var(--grow--desktop-value)}:host([subgrid-rows]):host([shrink--desktop]) .container{flex-shrink:var(--shrink--desktop-value)}:host([subgrid-rows]):host([basis--desktop]) .container{flex-basis:var(--basis--desktop-value)}:host([subgrid-rows]):host([align-self--desktop]) .container{align-self:var(--align-self--desktop-value)}:host([subgrid-rows]):host([justify-self--desktop]) .container{justify-self:var(--justify-self--desktop-value)}:host([subgrid-rows]):host([order--desktop]) .container{order:var(--order--desktop-value)}:host([subgrid-rows]):host([anchor-spacing]) .container{margin-top:var(--container-anchor-spacing--desktop)}}", S = new CSSStyleSheet();
@@ -23,20 +23,23 @@ var C = [
23
23
  "11",
24
24
  "12"
25
25
  ], T = (e, t, n) => `:host([${e}${n ? `--${n}` : ""}='${t}']) .container`, E = "px-padding", D = [
26
- f("padding", T, _, E, "--container-padding"),
27
- f("padding-inline", T, _, E),
28
- f("padding-block", T, _, E),
29
- f("padding-top", T, _, E),
30
- f("padding-right", T, _, E, "--container-padding-right"),
31
- f("padding-bottom", T, _, E),
32
- f("padding-left", T, _, E, "--container-padding-left"),
33
- f("gap", T, p, "px-spacing", void 0, "subgrid-gap")
34
- ], O = class extends n {
26
+ d("padding", T, g, E, "--container-padding"),
27
+ d("padding-inline", T, g, E),
28
+ d("padding-block", T, g, E),
29
+ d("padding-top", T, g, E),
30
+ d("padding-right", T, g, E, "--container-padding-right"),
31
+ d("padding-bottom", T, g, E),
32
+ d("padding-left", T, g, E, "--container-padding-left"),
33
+ d("gap", T, f, "px-spacing", void 0, "subgrid-gap")
34
+ ], O = class e extends n {
35
+ static {
36
+ this.template = u("<div class=\"container\"><slot></slot><slot name=\"anchor-left\"></slot><slot name=\"anchor-right\"></slot><slot name=\"anchor-full\"></slot></div>");
37
+ }
35
38
  static {
36
39
  this.nativeName = "div";
37
40
  }
38
41
  constructor() {
39
- super(S, ...D), this.template = () => "<div class=\"container\">\n <slot></slot>\n <slot name=\"anchor-left\"></slot>\n <slot name=\"anchor-right\"></slot>\n <slot name=\"anchor-full\"></slot>\n </div>", this._bgObserver = null, this._isInViewport = !1, this.contentObserver = null, this.shadowRoot.innerHTML = this.template();
42
+ super(S, ...D), this._bgObserver = null, this._isInViewport = !1, this.contentObserver = null, v(this.shadowRoot, e.template);
40
43
  }
41
44
  static get observedAttributes() {
42
45
  return [
@@ -92,7 +95,7 @@ var C = [
92
95
  attributeChangedCallback(e, t, n) {
93
96
  if (t !== n) switch (e) {
94
97
  case "border":
95
- this.updateAttribute(e, t, n, l);
98
+ this.updateAttribute(e, t, n, ee);
96
99
  break;
97
100
  case "border-color":
98
101
  this.updateBorderColor(e, n);
@@ -110,7 +113,7 @@ var C = [
110
113
  case "no-border-radius--mobile":
111
114
  case "no-border-radius--tablet":
112
115
  case "no-border-radius--laptop":
113
- this.updateNoBorderRadius(e, t, n, g);
116
+ this.updateNoBorderRadius(e, t, n, h);
114
117
  break;
115
118
  case "background-color":
116
119
  case "background-color--mobile":
@@ -137,10 +140,10 @@ var C = [
137
140
  n !== null && n !== "" && (this.$el.style.backgroundPosition = n);
138
141
  break;
139
142
  case "box-shadow":
140
- this.updateAttribute(e, t, n, u);
143
+ this.updateAttribute(e, t, n, te);
141
144
  break;
142
145
  case "anchor-offset":
143
- this.updateAnchorOffset(t, n, _);
146
+ this.updateAnchorOffset(t, n, g);
144
147
  break;
145
148
  case "anchor-spacing":
146
149
  this.updateAnchorSpacing(t, n, C);
@@ -166,32 +169,32 @@ var C = [
166
169
  this.$el.style.setProperty(`--${e}`, `url("${t}")`);
167
170
  }
168
171
  updateGradient(e, t) {
169
- if (this.checkName(m, t)) {
172
+ if (this.checkName(p, t)) {
170
173
  let n = this.splitAttrNameFromBreakpoint(e);
171
174
  e = n.attrName;
172
175
  let r = n.breakpoint;
173
176
  this.$el.style.setProperty(`--${e}${r}`, `linear-gradient(var(--px-color-background-gradient-${t}))`);
174
- } else h(`"${t}" is not a valid ${e} value for ${this.tagName.toLowerCase()}. Allowed values are: "${m.join("\", \"")}".`);
177
+ } else m(`"${t}" is not a valid ${e} value for ${this.tagName.toLowerCase()}. Allowed values are: "${p.join("\", \"")}".`);
175
178
  }
176
179
  updateBackgroundColor(e, t) {
177
180
  let n = t.startsWith("surface-");
178
181
  if (this.checkName(r, t)) {
179
182
  let r = this.splitAttrNameFromBreakpoint(e), i = r.breakpoint;
180
183
  this.$el.style.setProperty(`--${r.attrName}${i}`, `var(--px-color-background-${t}${n ? "" : "-default"})`), this.$el.style.setProperty(`--${r.attrName}-inverted${i}`, `var(--px-color-background-${t}${n ? "" : "-inverted"})`);
181
- } else h(`"${t}" is not a valid ${e} value for ${this.tagName.toLowerCase()}. Allowed values are: "${r.join("\", \"")}".`);
184
+ } else m(`"${t}" is not a valid ${e} value for ${this.tagName.toLowerCase()}. Allowed values are: "${r.join("\", \"")}".`);
182
185
  }
183
186
  updateBorderColor(e, t) {
184
- this.checkName(o, t) ? (this.$el.style.setProperty(`--${e}`, `var(--px-color-border-${t}-default)`), this.$el.style.setProperty(`--${e}-inverted`, `var(--px-color-border-${t}-inverted)`)) : h(`"${t}" is not a valid ${e} value for ${this.tagName.toLowerCase()}. Allowed values are: "${o.join("\", \"")}".`);
187
+ this.checkName(o, t) ? (this.$el.style.setProperty(`--${e}`, `var(--px-color-border-${t}-default)`), this.$el.style.setProperty(`--${e}-inverted`, `var(--px-color-border-${t}-inverted)`)) : m(`"${t}" is not a valid ${e} value for ${this.tagName.toLowerCase()}. Allowed values are: "${o.join("\", \"")}".`);
185
188
  }
186
189
  updateNoBorderRadius(e, t, n, r) {
187
- if (!this.checkName(r, n)) h(`"${n}" is not a valid ${e} value for ${this.tagName.toLowerCase()}. Allowed values are: "${r.join("\", \"")}".`);
190
+ if (!this.checkName(r, n)) m(`"${n}" is not a valid ${e} value for ${this.tagName.toLowerCase()}. Allowed values are: "${r.join("\", \"")}".`);
188
191
  else {
189
192
  let r = this.splitAttrNameFromBreakpoint(e), i = r.breakpoint;
190
193
  t !== null && t !== "" && this.$el.classList.toggle(`${r.attrName}-${t}${i}`), n !== null && n !== "" && this.$el.classList.toggle(`${r.attrName}-${n}${i}`);
191
194
  }
192
195
  }
193
196
  updateAttribute(e, t, n, r) {
194
- if (!this.checkName(r, n)) h(`"${n}" is not a valid ${e} value for ${this.tagName.toLowerCase()}. Allowed values are: "${r.join("\", \"")}".`);
197
+ if (!this.checkName(r, n)) m(`"${n}" is not a valid ${e} value for ${this.tagName.toLowerCase()}. Allowed values are: "${r.join("\", \"")}".`);
195
198
  else {
196
199
  let r = this.splitAttrNameFromBreakpoint(e), i = r.breakpoint;
197
200
  t !== null && t !== "" && this.$el.classList.toggle(`${r.attrName}-${t}${i}`), n !== null && n !== "" && this.$el.classList.toggle(`${r.attrName}-${n}${i}`);
@@ -213,8 +216,8 @@ var C = [
213
216
  };
214
217
  }
215
218
  updateAnchorOffset(e, t, n) {
216
- if (!d(n, t)) {
217
- h(`"${t}" is not a valid anchor-offset value for ${this.tagName.toLowerCase()}. Allowed values are: "${n.join("\", \"")}".`);
219
+ if (!l(n, t)) {
220
+ m(`"${t}" is not a valid anchor-offset value for ${this.tagName.toLowerCase()}. Allowed values are: "${n.join("\", \"")}".`);
218
221
  return;
219
222
  }
220
223
  let r = (e) => {
@@ -226,8 +229,8 @@ var C = [
226
229
  this.$el.classList.contains("anchored") || this.$el.classList.add("anchored");
227
230
  }
228
231
  updateAnchorSpacing(e, t, n) {
229
- if (!d(n, t)) {
230
- h(`"${t}" is not a valid anchor-spacing value for ${this.tagName.toLowerCase()}. Allowed values are: "${n.join("\", \"")}".`);
232
+ if (!l(n, t)) {
233
+ m(`"${t}" is not a valid anchor-spacing value for ${this.tagName.toLowerCase()}. Allowed values are: "${n.join("\", \"")}".`);
231
234
  return;
232
235
  }
233
236
  let r = (e) => {
@@ -236,7 +239,7 @@ var C = [
236
239
  r(e), r(t);
237
240
  }
238
241
  updateSubgridRows(e, t, n, r) {
239
- d(r, n) ? this.style.setProperty(`--${e}`, n) : h(`"${n}" is not a valid ${e} value for ${this.tagName.toLowerCase()}. Allowed values are: "${r.join("\", \"")}".`);
242
+ l(r, n) ? this.style.setProperty(`--${e}`, n) : m(`"${n}" is not a valid ${e} value for ${this.tagName.toLowerCase()}. Allowed values are: "${r.join("\", \"")}".`);
240
243
  }
241
244
  get $el() {
242
245
  return this?.shadowRoot?.querySelector(".container");
@@ -248,337 +251,337 @@ var C = [
248
251
  return this.getAttribute("padding");
249
252
  }
250
253
  set padding(e) {
251
- v(this, "padding", e);
254
+ _(this, "padding", e);
252
255
  }
253
256
  get paddingBlock() {
254
257
  return this.getAttribute("padding-block");
255
258
  }
256
259
  set paddingBlock(e) {
257
- v(this, "padding-block", e);
260
+ _(this, "padding-block", e);
258
261
  }
259
262
  get paddingInline() {
260
263
  return this.getAttribute("padding-inline");
261
264
  }
262
265
  set paddingInline(e) {
263
- v(this, "padding-inline", e);
266
+ _(this, "padding-inline", e);
264
267
  }
265
268
  get paddingTop() {
266
269
  return this.getAttribute("padding-top");
267
270
  }
268
271
  set paddingTop(e) {
269
- v(this, "padding-top", e);
272
+ _(this, "padding-top", e);
270
273
  }
271
274
  get paddingRight() {
272
275
  return this.getAttribute("padding-right");
273
276
  }
274
277
  set paddingRight(e) {
275
- v(this, "padding-right", e);
278
+ _(this, "padding-right", e);
276
279
  }
277
280
  get paddingBottom() {
278
281
  return this.getAttribute("padding-bottom");
279
282
  }
280
283
  set paddingBottom(e) {
281
- v(this, "padding-bottom", e);
284
+ _(this, "padding-bottom", e);
282
285
  }
283
286
  get paddingLeft() {
284
287
  return this.getAttribute("padding-left");
285
288
  }
286
289
  set paddingLeft(e) {
287
- v(this, "padding-left", e);
290
+ _(this, "padding-left", e);
288
291
  }
289
292
  get paddingMobile() {
290
293
  return this.getAttribute("padding--mobile");
291
294
  }
292
295
  set paddingMobile(e) {
293
- v(this, "padding--mobile", e);
296
+ _(this, "padding--mobile", e);
294
297
  }
295
298
  get paddingBlockMobile() {
296
299
  return this.getAttribute("padding-block--mobile");
297
300
  }
298
301
  set paddingBlockMobile(e) {
299
- v(this, "padding-block--mobile", e);
302
+ _(this, "padding-block--mobile", e);
300
303
  }
301
304
  get paddingInlineMobile() {
302
305
  return this.getAttribute("padding-inline--mobile");
303
306
  }
304
307
  set paddingInlineMobile(e) {
305
- v(this, "padding-inline--mobile", e);
308
+ _(this, "padding-inline--mobile", e);
306
309
  }
307
310
  get paddingTopMobile() {
308
311
  return this.getAttribute("padding-top--mobile");
309
312
  }
310
313
  set paddingTopMobile(e) {
311
- v(this, "padding-top--mobile", e);
314
+ _(this, "padding-top--mobile", e);
312
315
  }
313
316
  get paddingRightMobile() {
314
317
  return this.getAttribute("padding-right--mobile");
315
318
  }
316
319
  set paddingRightMobile(e) {
317
- v(this, "padding-right--mobile", e);
320
+ _(this, "padding-right--mobile", e);
318
321
  }
319
322
  get paddingBottomMobile() {
320
323
  return this.getAttribute("padding-bottom--mobile");
321
324
  }
322
325
  set paddingBottomMobile(e) {
323
- v(this, "padding-bottom--mobile", e);
326
+ _(this, "padding-bottom--mobile", e);
324
327
  }
325
328
  get paddingLeftMobile() {
326
329
  return this.getAttribute("padding-left--mobile");
327
330
  }
328
331
  set paddingLeftMobile(e) {
329
- v(this, "padding-left--mobile", e);
332
+ _(this, "padding-left--mobile", e);
330
333
  }
331
334
  get paddingTablet() {
332
335
  return this.getAttribute("padding--tablet");
333
336
  }
334
337
  set paddingTablet(e) {
335
- v(this, "padding--tablet", e);
338
+ _(this, "padding--tablet", e);
336
339
  }
337
340
  get paddingBlockTablet() {
338
341
  return this.getAttribute("padding-block--tablet");
339
342
  }
340
343
  set paddingBlockTablet(e) {
341
- v(this, "padding-block--tablet", e);
344
+ _(this, "padding-block--tablet", e);
342
345
  }
343
346
  get paddingInlineTablet() {
344
347
  return this.getAttribute("padding-inline--tablet");
345
348
  }
346
349
  set paddingInlineTablet(e) {
347
- v(this, "padding-inline--tablet", e);
350
+ _(this, "padding-inline--tablet", e);
348
351
  }
349
352
  get paddingTopTablet() {
350
353
  return this.getAttribute("padding-top--tablet");
351
354
  }
352
355
  set paddingTopTablet(e) {
353
- v(this, "padding-top--tablet", e);
356
+ _(this, "padding-top--tablet", e);
354
357
  }
355
358
  get paddingRightTablet() {
356
359
  return this.getAttribute("padding-right--tablet");
357
360
  }
358
361
  set paddingRightTablet(e) {
359
- v(this, "padding-right--tablet", e);
362
+ _(this, "padding-right--tablet", e);
360
363
  }
361
364
  get paddingBottomTablet() {
362
365
  return this.getAttribute("padding-bottom--tablet");
363
366
  }
364
367
  set paddingBottomTablet(e) {
365
- v(this, "padding-bottom--tablet", e);
368
+ _(this, "padding-bottom--tablet", e);
366
369
  }
367
370
  get paddingLeftTablet() {
368
371
  return this.getAttribute("padding-left--tablet");
369
372
  }
370
373
  set paddingLeftTablet(e) {
371
- v(this, "padding-left--tablet", e);
374
+ _(this, "padding-left--tablet", e);
372
375
  }
373
376
  get paddingLaptop() {
374
377
  return this.getAttribute("padding--laptop");
375
378
  }
376
379
  set paddingLaptop(e) {
377
- v(this, "padding--laptop", e);
380
+ _(this, "padding--laptop", e);
378
381
  }
379
382
  get paddingBlockLaptop() {
380
383
  return this.getAttribute("padding-block--laptop");
381
384
  }
382
385
  set paddingBlockLaptop(e) {
383
- v(this, "padding-block--laptop", e);
386
+ _(this, "padding-block--laptop", e);
384
387
  }
385
388
  get paddingInlineLaptop() {
386
389
  return this.getAttribute("padding-inline--laptop");
387
390
  }
388
391
  set paddingInlineLaptop(e) {
389
- v(this, "padding-inline--laptop", e);
392
+ _(this, "padding-inline--laptop", e);
390
393
  }
391
394
  get paddingTopLaptop() {
392
395
  return this.getAttribute("padding-top--laptop");
393
396
  }
394
397
  set paddingTopLaptop(e) {
395
- v(this, "padding-top--laptop", e);
398
+ _(this, "padding-top--laptop", e);
396
399
  }
397
400
  get paddingRightLaptop() {
398
401
  return this.getAttribute("padding-right--laptop");
399
402
  }
400
403
  set paddingRightLaptop(e) {
401
- v(this, "padding-right--laptop", e);
404
+ _(this, "padding-right--laptop", e);
402
405
  }
403
406
  get paddingBottomLaptop() {
404
407
  return this.getAttribute("padding-bottom--laptop");
405
408
  }
406
409
  set paddingBottomLaptop(e) {
407
- v(this, "padding-bottom--laptop", e);
410
+ _(this, "padding-bottom--laptop", e);
408
411
  }
409
412
  get paddingLeftLaptop() {
410
413
  return this.getAttribute("padding-left--laptop");
411
414
  }
412
415
  set paddingLeftLaptop(e) {
413
- v(this, "padding-left--laptop", e);
416
+ _(this, "padding-left--laptop", e);
414
417
  }
415
418
  get border() {
416
419
  return this.getAttribute("border");
417
420
  }
418
421
  set border(e) {
419
- v(this, "border", e);
422
+ _(this, "border", e);
420
423
  }
421
424
  get borderColor() {
422
425
  return this.getAttribute("border-color");
423
426
  }
424
427
  set borderColor(e) {
425
- v(this, "border-color", e);
428
+ _(this, "border-color", e);
426
429
  }
427
430
  get borderSide() {
428
431
  return this.getAttribute("border-side");
429
432
  }
430
433
  set borderSide(e) {
431
- v(this, "border-side", e);
434
+ _(this, "border-side", e);
432
435
  }
433
436
  get borderSideMobile() {
434
437
  return this.getAttribute("border-side--mobile");
435
438
  }
436
439
  set borderSideMobile(e) {
437
- v(this, "border-side--mobile", e);
440
+ _(this, "border-side--mobile", e);
438
441
  }
439
442
  get borderSideTablet() {
440
443
  return this.getAttribute("border-side--tablet");
441
444
  }
442
445
  set borderSideTablet(e) {
443
- v(this, "border-side--tablet", e);
446
+ _(this, "border-side--tablet", e);
444
447
  }
445
448
  get borderSideLaptop() {
446
449
  return this.getAttribute("border-side--laptop");
447
450
  }
448
451
  set borderSideLaptop(e) {
449
- v(this, "border-side--laptop", e);
452
+ _(this, "border-side--laptop", e);
450
453
  }
451
454
  get borderRadius() {
452
455
  return this.getAttribute("border-radius");
453
456
  }
454
457
  set borderRadius(e) {
455
- v(this, "border-radius", e);
458
+ _(this, "border-radius", e);
456
459
  }
457
460
  get noBorderRadius() {
458
461
  return this.getAttribute("no-border-radius");
459
462
  }
460
463
  set noBorderRadius(e) {
461
- v(this, "no-border-radius", e);
464
+ _(this, "no-border-radius", e);
462
465
  }
463
466
  get noBorderRadiusMobile() {
464
467
  return this.getAttribute("no-border-radius--mobile");
465
468
  }
466
469
  set noBorderRadiusMobile(e) {
467
- v(this, "no-border-radius--mobile", e);
470
+ _(this, "no-border-radius--mobile", e);
468
471
  }
469
472
  get noBorderRadiusTablet() {
470
473
  return this.getAttribute("no-border-radius--tablet");
471
474
  }
472
475
  set noBorderRadiusTablet(e) {
473
- v(this, "no-border-radius--tablet", e);
476
+ _(this, "no-border-radius--tablet", e);
474
477
  }
475
478
  get noBorderRadiusLaptop() {
476
479
  return this.getAttribute("no-border-radius--laptop");
477
480
  }
478
481
  set noBorderRadiusLaptop(e) {
479
- v(this, "no-border-radius--laptop", e);
482
+ _(this, "no-border-radius--laptop", e);
480
483
  }
481
484
  get backgroundColor() {
482
485
  return this.getAttribute("background-color");
483
486
  }
484
487
  set backgroundColor(e) {
485
- v(this, "background-color", e);
488
+ _(this, "background-color", e);
486
489
  }
487
490
  get backgroundColorMobile() {
488
491
  return this.getAttribute("background-color--mobile");
489
492
  }
490
493
  set backgroundColorMobile(e) {
491
- v(this, "background-color--mobile", e);
494
+ _(this, "background-color--mobile", e);
492
495
  }
493
496
  get backgroundColorTablet() {
494
497
  return this.getAttribute("background-color--tablet");
495
498
  }
496
499
  set backgroundColorTablet(e) {
497
- v(this, "background-color--tablet", e);
500
+ _(this, "background-color--tablet", e);
498
501
  }
499
502
  get backgroundColorLaptop() {
500
503
  return this.getAttribute("background-color--laptop");
501
504
  }
502
505
  set backgroundColorLaptop(e) {
503
- v(this, "background-color--laptop", e);
506
+ _(this, "background-color--laptop", e);
504
507
  }
505
508
  get gradient() {
506
509
  return this.getAttribute("background-gradient");
507
510
  }
508
511
  set gradient(e) {
509
- v(this, "background-gradient", e);
512
+ _(this, "background-gradient", e);
510
513
  }
511
514
  get gradientMobile() {
512
515
  return this.getAttribute("background-gradient--mobile");
513
516
  }
514
517
  set gradientMobile(e) {
515
- v(this, "background-gradient--mobile", e);
518
+ _(this, "background-gradient--mobile", e);
516
519
  }
517
520
  get gradientTablet() {
518
521
  return this.getAttribute("background-gradient--tablet");
519
522
  }
520
523
  set gradientTablet(e) {
521
- v(this, "background-gradient--tablet", e);
524
+ _(this, "background-gradient--tablet", e);
522
525
  }
523
526
  get gradientLaptop() {
524
527
  return this.getAttribute("background-gradient--laptop");
525
528
  }
526
529
  set gradientLaptop(e) {
527
- v(this, "background-gradient--laptop", e);
530
+ _(this, "background-gradient--laptop", e);
528
531
  }
529
532
  get backgroundImage() {
530
533
  return this.getAttribute("background-image");
531
534
  }
532
535
  set backgroundImage(e) {
533
- v(this, "background-image", e);
536
+ _(this, "background-image", e);
534
537
  }
535
538
  get backgroundImageMobile() {
536
539
  return this.getAttribute("background-image--mobile");
537
540
  }
538
541
  set backgroundImageMobile(e) {
539
- v(this, "background-image--mobile", e);
542
+ _(this, "background-image--mobile", e);
540
543
  }
541
544
  get backgroundImageTablet() {
542
545
  return this.getAttribute("background-image--tablet");
543
546
  }
544
547
  set backgroundImageTablet(e) {
545
- v(this, "background-image--tablet", e);
548
+ _(this, "background-image--tablet", e);
546
549
  }
547
550
  get backgroundImageLaptop() {
548
551
  return this.getAttribute("background-image--laptop");
549
552
  }
550
553
  set backgroundImageLaptop(e) {
551
- v(this, "background-image--laptop", e);
554
+ _(this, "background-image--laptop", e);
552
555
  }
553
556
  get backgroundSize() {
554
557
  return this.getAttribute("background-size");
555
558
  }
556
559
  set backgroundSize(e) {
557
- v(this, "background-size", e);
560
+ _(this, "background-size", e);
558
561
  }
559
562
  get backgroundPosition() {
560
563
  return this.getAttribute("background-position");
561
564
  }
562
565
  set backgroundPosition(e) {
563
- v(this, "background-position", e);
566
+ _(this, "background-position", e);
564
567
  }
565
568
  get boxShadow() {
566
569
  return this.getAttribute("box-shadow");
567
570
  }
568
571
  set boxShadow(e) {
569
- v(this, "box-shadow", e);
572
+ _(this, "box-shadow", e);
570
573
  }
571
574
  get anchorOffset() {
572
575
  return this.getAttribute("anchor-offset");
573
576
  }
574
577
  set anchorOffset(e) {
575
- v(this, "anchor-offset", e);
578
+ _(this, "anchor-offset", e);
576
579
  }
577
580
  get anchorSpacing() {
578
581
  return this.getAttribute("anchor-spacing");
579
582
  }
580
583
  set anchorSpacing(e) {
581
- v(this, "anchor-spacing", e);
584
+ _(this, "anchor-spacing", e);
582
585
  }
583
586
  get inverted() {
584
587
  return this.hasAttribute("inverted");
@@ -590,46 +593,48 @@ var C = [
590
593
  return this.getAttribute("subgrid-rows");
591
594
  }
592
595
  set subgridRows(e) {
593
- v(this, "subgrid-rows", e);
596
+ _(this, "subgrid-rows", e);
594
597
  }
595
598
  get subgridGap() {
596
599
  return this.getAttribute("subgrid-gap");
597
600
  }
598
601
  set subgridGap(e) {
599
- v(this, "subgrid-gap", e);
602
+ _(this, "subgrid-gap", e);
600
603
  }
601
604
  get subgridGapMobile() {
602
605
  return this.getAttribute("subgrid-gap--mobile");
603
606
  }
604
607
  set subgridGapMobile(e) {
605
- v(this, "subgrid-gap--mobile", e);
608
+ _(this, "subgrid-gap--mobile", e);
606
609
  }
607
610
  get subgridGapTablet() {
608
611
  return this.getAttribute("subgrid-gap--tablet");
609
612
  }
610
613
  set subgridGapTablet(e) {
611
- v(this, "subgrid-gap--tablet", e);
614
+ _(this, "subgrid-gap--tablet", e);
612
615
  }
613
616
  get subgridGapLaptop() {
614
617
  return this.getAttribute("subgrid-gap--laptop");
615
618
  }
616
619
  set subgridGapLaptop(e) {
617
- v(this, "subgrid-gap--laptop", e);
620
+ _(this, "subgrid-gap--laptop", e);
618
621
  }
619
622
  };
620
623
  customElements.get("px-container") || customElements.define("px-container", O);
621
624
  //#endregion
622
625
  //#region ../Layout/src/Stack.css?inline
623
- var 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{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);width:100%;height:100%;overflow-x:var(--overflow-x-all);display:flex}@media screen and (width<=47.938rem){.flex-container{overflow-x:var(--overflow-x-all-mobile,var(--overflow-x-all));scrollbar-width:none}.flex-container::-webkit-scrollbar{display:none}}@media screen and (width>=48rem){.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 screen and (width>=48rem) and (width<=64rem){.flex-container{overflow-x:var(--overflow-x-all-tablet,var(--overflow-x-all));scrollbar-width:none}.flex-container::-webkit-scrollbar{display:none}}@media screen and (width>=64.0625rem){.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 screen and (width>=64.0625rem) and (width<=90rem){.flex-container{overflow-x:var(--overflow-x-all-laptop,var(--overflow-x-all))}}@media screen and (width>=90.0625rem){.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))}}", A = new CSSStyleSheet();
626
+ var k = ":host{--host-gap--mobile:var(--px-spacing-none-mobile);--host-gap--tablet:var(--px-spacing-none-tablet);--host-gap--laptop:var(--px-spacing-none-desktop);--host-gap--desktop:var(--px-spacing-none-desktop);--overflow-x-all:visible;--overflow-x-all-mobile:initial;--overflow-x-all-tablet:initial;--overflow-x-all-laptop:initial;--overflow-x-all-desktop:initial;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{--flex-direction--mobile-value:row;--flex-direction--tablet-value:row;--flex-direction--laptop-value:row;--flex-direction--desktop-value:row;--flex-gap--mobile-value:var(--px-spacing-none-mobile);--flex-gap--tablet-value:var(--px-spacing-none-tablet);--flex-gap--laptop-value:var(--px-spacing-none-desktop);--flex-gap--desktop-value:var(--px-spacing-none-desktop);--flex-align-items--mobile-value:stretch;--flex-align-items--tablet-value:stretch;--flex-align-items--laptop-value:stretch;--flex-align-items--desktop-value:stretch;--flex-justify-content--mobile-value:flex-start;--flex-justify-content--tablet-value:flex-start;--flex-justify-content--laptop-value:flex-start;--flex-justify-content--desktop-value:flex-start;--flex-wrap--mobile-value:nowrap;--flex-wrap--tablet-value:nowrap;--flex-wrap--laptop-value:nowrap;--flex-wrap--desktop-value:nowrap;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);width:100%;height:100%;overflow-x:var(--overflow-x-all);display:flex}@media screen and (width<=47.938rem){.flex-container{overflow-x:var(--overflow-x-all-mobile,var(--overflow-x-all));scrollbar-width:none}.flex-container::-webkit-scrollbar{display:none}}@media screen and (width>=48rem){.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 screen and (width>=48rem) and (width<=64rem){.flex-container{overflow-x:var(--overflow-x-all-tablet,var(--overflow-x-all));scrollbar-width:none}.flex-container::-webkit-scrollbar{display:none}}@media screen and (width>=64.0625rem){.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 screen and (width>=64.0625rem) and (width<=90rem){.flex-container{overflow-x:var(--overflow-x-all-laptop,var(--overflow-x-all))}}@media screen and (width>=90.0625rem){.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))}}:host(px-vstack) .flex-container{--flex-direction--mobile-value:column!important;--flex-direction--tablet-value:column!important;--flex-direction--laptop-value:column!important;--flex-direction--desktop-value:column!important}:host(px-hstack) .flex-container{--flex-direction--mobile-value:row!important;--flex-direction--tablet-value:row!important;--flex-direction--laptop-value:row!important;--flex-direction--desktop-value:row!important}", A = new CSSStyleSheet();
624
627
  A.replaceSync(k);
625
- var j = [
628
+ var j = document.createElement("template");
629
+ j.innerHTML = "<div class=\"flex-container\"><slot></slot></div>";
630
+ var M = [
626
631
  "",
627
632
  "default",
628
633
  "row",
629
634
  "row-reverse",
630
635
  "column",
631
636
  "column-reverse"
632
- ], M = [
637
+ ], N = [
633
638
  "",
634
639
  "default",
635
640
  "stretch",
@@ -639,7 +644,7 @@ var j = [
639
644
  "end",
640
645
  "center",
641
646
  "baseline"
642
- ], N = [
647
+ ], P = [
643
648
  "",
644
649
  "default",
645
650
  "flex-start",
@@ -650,25 +655,23 @@ var j = [
650
655
  "space-between",
651
656
  "space-around",
652
657
  "space-evenly"
653
- ], P = [
658
+ ], F = [
654
659
  "",
655
660
  "default",
656
661
  "nowrap",
657
662
  "wrap",
658
663
  "wrap-reverse"
659
- ], F = [
664
+ ], I = [
660
665
  "",
661
666
  "visible",
662
667
  "hidden",
663
668
  "scroll",
664
669
  "auto"
665
- ], I = class extends n {
670
+ ], L = class t extends n {
666
671
  constructor() {
667
- super(A), this.overflowXAttributeDelegate = new e(this, "overflow-x", (e) => e, "--overflow-x"), this.template = "<div class=\"flex-container\">\n <slot></slot>\n </div>", this.shadowRoot.innerHTML = this.template;
668
- }
669
- connectedCallback() {
670
- this.hasAttribute("direction") || (this.direction = "row"), this.hasAttribute("gap") || (this.gap = "none"), this.hasAttribute("align-items") || (this.alignItems = "stretch"), this.hasAttribute("justify-content") || (this.justifyContent = "flex-start"), this.hasAttribute("wrap") || (this.wrap = "nowrap"), this.hasAttribute("overflow-x") || this.overflowXAttributeDelegate.init("visible");
672
+ super(A), this.overflowXAttributeDelegate = new e(this, "overflow-x", (e) => e, "--overflow-x"), this.shadowRoot.firstChild || this.shadowRoot.appendChild(document.importNode(j.content, !0));
671
673
  }
674
+ connectedCallback() {}
672
675
  static get observedAttributes() {
673
676
  return [
674
677
  ...super.observedAttributes,
@@ -711,273 +714,293 @@ var j = [
711
714
  case "gap--tablet":
712
715
  case "gap--laptop":
713
716
  case "gap--desktop":
714
- this.updateFlexProperties(e, t, n, p);
717
+ this.updateFlexProperties(e, t, n, f);
715
718
  break;
716
719
  case "justify-content":
717
720
  case "justify-content--mobile":
718
721
  case "justify-content--tablet":
719
722
  case "justify-content--laptop":
720
723
  case "justify-content--desktop":
721
- this.updateFlexProperties(e, t, n, N);
724
+ this.updateFlexProperties(e, t, n, P);
722
725
  break;
723
726
  case "align-items":
724
727
  case "align-items--mobile":
725
728
  case "align-items--tablet":
726
729
  case "align-items--laptop":
727
730
  case "align-items--desktop":
728
- this.updateFlexProperties(e, t, n, M);
731
+ this.updateFlexProperties(e, t, n, N);
729
732
  break;
730
733
  case "wrap":
731
734
  case "wrap--mobile":
732
735
  case "wrap--tablet":
733
736
  case "wrap--laptop":
734
737
  case "wrap--desktop":
735
- this.updateFlexProperties(e, t, n, P);
738
+ this.updateFlexProperties(e, t, n, F);
736
739
  break;
737
740
  case "direction":
738
741
  case "direction--mobile":
739
742
  case "direction--tablet":
740
743
  case "direction--laptop":
741
744
  case "direction--desktop":
742
- this.updateFlexProperties(e, t, n, j);
745
+ this.updateFlexProperties(e, t, n, M);
743
746
  break;
744
747
  case "overflow-x":
745
748
  case "overflow-x--mobile":
746
749
  case "overflow-x--tablet":
747
750
  case "overflow-x--laptop":
748
751
  case "overflow-x--desktop":
749
- this.updateOverflowX(e, t, n, F);
752
+ this.updateOverflowX(e, t, n, I);
750
753
  break;
751
754
  default: super.attributeChangedCallback(e, t, n);
752
755
  }
753
756
  }
754
757
  updateOverflowX(e, t, n, r) {
755
- if (!d(r, n)) {
756
- h(`"${n}" is not a valid ${e} value for ${this.tagName.toLowerCase()}. Allowed values are: "${r.join("\", \"")}".`);
758
+ if (!l(r, n)) {
759
+ m(`"${n}" is not a valid ${e} value for ${this.tagName.toLowerCase()}. Allowed values are: "${r.join("\", \"")}".`);
757
760
  return;
758
761
  }
759
762
  this.overflowXAttributeDelegate.attributeChangedCallback(e, t, n);
760
763
  }
761
- updateFlexProperties(e, t, n, r) {
762
- this.checkName(r, n) || h(`"${n}" is not a valid ${e} value for ${this.tagName.toLowerCase()}. Allowed values are: "${r.join("\", \"")}".`);
763
- let i = e.indexOf("--") > -1, a = i ? e.split("--")[0] : e, o = [];
764
- if (!i) this.getAttribute(a + "--mobile") || o.push("mobile"), this.getAttribute(a + "--tablet") || o.push("tablet"), this.getAttribute(a + "--laptop") || o.push("laptop"), this.getAttribute(a + "--desktop") || o.push("desktop"), o.forEach((e) => {
765
- this.updateStyle(a, e, t, r), this.updateStyle(a, e, n, r);
766
- });
764
+ updateFlexProperties(e, n, r, i) {
765
+ r !== null && !this.checkName(i, r) && m(`"${r}" is not a valid ${e} value for ${this.tagName.toLowerCase()}. Allowed values are: "${i.join("\", \"")}".`);
766
+ let a = e.indexOf("--");
767
+ if (a === -1) for (let n of t.breakpoints) this.getAttribute(`${e}--${n}`) || this.updateStyle(e, n, r, i);
767
768
  else {
768
- let i = e.split("--")[1];
769
- this.updateStyle(a, i, t, r), this.updateStyle(a, i, n, r);
769
+ let t = e.slice(0, a), n = e.slice(a + 2);
770
+ this.updateStyle(t, n, r || this.getAttribute(t), i);
770
771
  }
771
772
  }
772
773
  updateStyle(e, t, n, r) {
773
- n && (e === "gap" && r && r.includes(n) ? (this.$el.style.setProperty(`--flex-${e}--${t}-value`, `var(--px-spacing-${n}-${t === "laptop" ? "desktop" : t})`), this.style.setProperty(`--host-gap--${t}`, `var(--px-spacing-${n}-${t === "laptop" ? "desktop" : t})`)) : this.$el.style.setProperty(`--flex-${e}--${t}-value`, n));
774
+ let i = `--flex-${e}--${t}-value`, a = e === "gap";
775
+ if (!n) {
776
+ this.$el.style.removeProperty(i), a && this.style.removeProperty(`--host-gap--${t}`);
777
+ return;
778
+ }
779
+ if (a && r && r.includes(n)) {
780
+ let e = `var(--px-spacing-${n}-${t === "laptop" ? "desktop" : t})`;
781
+ this.$el.style.setProperty(i, e), this.style.setProperty(`--host-gap--${t}`, e);
782
+ } else this.$el.style.setProperty(i, n);
783
+ }
784
+ static {
785
+ this.breakpoints = [
786
+ "mobile",
787
+ "tablet",
788
+ "laptop",
789
+ "desktop"
790
+ ];
774
791
  }
775
792
  get direction() {
776
- return this.getAttribute("direction");
793
+ return this.getAttribute("direction") ?? "row";
777
794
  }
778
795
  set direction(e) {
779
- v(this, "direction", e);
796
+ _(this, "direction", e);
780
797
  }
781
798
  get directionMobile() {
782
799
  return this.getAttribute("direction--mobile");
783
800
  }
784
801
  set directionMobile(e) {
785
- v(this, "direction--mobile", e);
802
+ _(this, "direction--mobile", e);
786
803
  }
787
804
  get directionTablet() {
788
805
  return this.getAttribute("direction--tablet");
789
806
  }
790
807
  set directionTablet(e) {
791
- v(this, "direction--tablet", e);
808
+ _(this, "direction--tablet", e);
792
809
  }
793
810
  get directionLaptop() {
794
811
  return this.getAttribute("direction--laptop");
795
812
  }
796
813
  set directionLaptop(e) {
797
- v(this, "direction--laptop", e);
814
+ _(this, "direction--laptop", e);
798
815
  }
799
816
  get directionDesktop() {
800
817
  return this.getAttribute("direction--desktop");
801
818
  }
802
819
  set directionDesktop(e) {
803
- v(this, "direction--desktop", e);
820
+ _(this, "direction--desktop", e);
804
821
  }
805
822
  get gap() {
806
- return this.getAttribute("gap");
823
+ return this.getAttribute("gap") ?? "none";
807
824
  }
808
825
  set gap(e) {
809
- v(this, "gap", e);
826
+ _(this, "gap", e);
810
827
  }
811
828
  get gapMobile() {
812
829
  return this.getAttribute("gap--mobile");
813
830
  }
814
831
  set gapMobile(e) {
815
- v(this, "gap--mobile", e);
832
+ _(this, "gap--mobile", e);
816
833
  }
817
834
  get gapTablet() {
818
835
  return this.getAttribute("gap--tablet");
819
836
  }
820
837
  set gapTablet(e) {
821
- v(this, "gap--tablet", e);
838
+ _(this, "gap--tablet", e);
822
839
  }
823
840
  get gapLaptop() {
824
841
  return this.getAttribute("gap--laptop");
825
842
  }
826
843
  set gapLaptop(e) {
827
- v(this, "gap--laptop", e);
844
+ _(this, "gap--laptop", e);
828
845
  }
829
846
  get gapDesktop() {
830
847
  return this.getAttribute("gap--desktop");
831
848
  }
832
849
  set gapDesktop(e) {
833
- v(this, "gap--desktop", e);
850
+ _(this, "gap--desktop", e);
834
851
  }
835
852
  get justifyContent() {
836
- return this.getAttribute("justify-content");
853
+ return this.getAttribute("justify-content") ?? "flex-start";
837
854
  }
838
855
  set justifyContent(e) {
839
- v(this, "justify-content", e);
856
+ _(this, "justify-content", e);
840
857
  }
841
858
  get justifyContentMobile() {
842
859
  return this.getAttribute("justify-content--mobile");
843
860
  }
844
861
  set justifyContentMobile(e) {
845
- v(this, "justify-content--mobile", e);
862
+ _(this, "justify-content--mobile", e);
846
863
  }
847
864
  get justifyContentTablet() {
848
865
  return this.getAttribute("justify-content--tablet");
849
866
  }
850
867
  set justifyContentTablet(e) {
851
- v(this, "justify-content--tablet", e);
868
+ _(this, "justify-content--tablet", e);
852
869
  }
853
870
  get justifyContentLaptop() {
854
871
  return this.getAttribute("justify-content--laptop");
855
872
  }
856
873
  set justifyContentLaptop(e) {
857
- v(this, "justify-content--laptop", e);
874
+ _(this, "justify-content--laptop", e);
858
875
  }
859
876
  get justifyContentDesktop() {
860
877
  return this.getAttribute("justify-content--desktop");
861
878
  }
862
879
  set justifyContentDesktop(e) {
863
- v(this, "justify-content--desktop", e);
880
+ _(this, "justify-content--desktop", e);
864
881
  }
865
882
  get alignItems() {
866
- return this.getAttribute("align-items");
883
+ return this.getAttribute("align-items") ?? "stretch";
867
884
  }
868
885
  set alignItems(e) {
869
- v(this, "align-items", e);
886
+ _(this, "align-items", e);
870
887
  }
871
888
  get alignItemsMobile() {
872
889
  return this.getAttribute("align-items--mobile");
873
890
  }
874
891
  set alignItemsMobile(e) {
875
- v(this, "align-items--mobile", e);
892
+ _(this, "align-items--mobile", e);
876
893
  }
877
894
  get alignItemsTablet() {
878
895
  return this.getAttribute("align-items--tablet");
879
896
  }
880
897
  set alignItemsTablet(e) {
881
- v(this, "align-items--tablet", e);
898
+ _(this, "align-items--tablet", e);
882
899
  }
883
900
  get alignItemsLaptop() {
884
901
  return this.getAttribute("align-items--laptop");
885
902
  }
886
903
  set alignItemsLaptop(e) {
887
- v(this, "align-items--laptop", e);
904
+ _(this, "align-items--laptop", e);
888
905
  }
889
906
  get alignItemsDesktop() {
890
907
  return this.getAttribute("align-items--desktop");
891
908
  }
892
909
  set alignItemsDesktop(e) {
893
- v(this, "align-items--desktop", e);
910
+ _(this, "align-items--desktop", e);
894
911
  }
895
912
  get wrap() {
896
- return this.getAttribute("wrap");
913
+ return this.getAttribute("wrap") ?? "nowrap";
897
914
  }
898
915
  set wrap(e) {
899
- v(this, "wrap", e);
916
+ _(this, "wrap", e);
900
917
  }
901
918
  get wrapMobile() {
902
919
  return this.getAttribute("wrap--mobile");
903
920
  }
904
921
  set wrapMobile(e) {
905
- v(this, "wrap--mobile", e);
922
+ _(this, "wrap--mobile", e);
906
923
  }
907
924
  get wrapTablet() {
908
925
  return this.getAttribute("wrap--tablet");
909
926
  }
910
927
  set wrapTablet(e) {
911
- v(this, "wrap--tablet", e);
928
+ _(this, "wrap--tablet", e);
912
929
  }
913
930
  get wrapLaptop() {
914
931
  return this.getAttribute("wrap--laptop");
915
932
  }
916
933
  set wrapLaptop(e) {
917
- v(this, "wrap--laptop", e);
934
+ _(this, "wrap--laptop", e);
918
935
  }
919
936
  get wrapDesktop() {
920
937
  return this.getAttribute("wrap--desktop");
921
938
  }
922
939
  set wrapDesktop(e) {
923
- v(this, "wrap--desktop", e);
940
+ _(this, "wrap--desktop", e);
924
941
  }
925
942
  get overflowX() {
926
- return this.getAttribute("overflow-x");
943
+ return this.getAttribute("overflow-x") ?? "visible";
927
944
  }
928
945
  set overflowX(e) {
929
- v(this, "overflow-x", e);
946
+ _(this, "overflow-x", e);
930
947
  }
931
948
  get overflowXMobile() {
932
949
  return this.getAttribute("overflow-x--mobile");
933
950
  }
934
951
  set overflowXMobile(e) {
935
- v(this, "overflow-x--mobile", e);
952
+ _(this, "overflow-x--mobile", e);
936
953
  }
937
954
  get overflowXTablet() {
938
955
  return this.getAttribute("overflow-x--tablet");
939
956
  }
940
957
  set overflowXTablet(e) {
941
- v(this, "overflow-x--tablet", e);
958
+ _(this, "overflow-x--tablet", e);
942
959
  }
943
960
  get overflowXLaptop() {
944
961
  return this.getAttribute("overflow-x--laptop");
945
962
  }
946
963
  set overflowXLaptop(e) {
947
- v(this, "overflow-x--laptop", e);
964
+ _(this, "overflow-x--laptop", e);
948
965
  }
949
966
  get overflowXDesktop() {
950
967
  return this.getAttribute("overflow-x--desktop");
951
968
  }
952
969
  set overflowXDesktop(e) {
953
- v(this, "overflow-x--desktop", e);
970
+ _(this, "overflow-x--desktop", e);
954
971
  }
955
972
  get $el() {
956
- return this.shadowRoot.querySelector(".flex-container");
973
+ return this.shadowRoot.firstElementChild;
957
974
  }
958
975
  };
959
- customElements.get("px-stack") || customElements.define("px-stack", I);
960
- var L = class extends I {
961
- constructor() {
962
- super();
976
+ customElements.get("px-stack") || customElements.define("px-stack", L);
977
+ var R = (e) => e === "direction" || e.startsWith("direction--"), z = class extends L {
978
+ get direction() {
979
+ return "column";
963
980
  }
964
- connectedCallback() {
965
- super.connectedCallback(), this.direction = "column", this.directionMobile = "column", this.directionTablet = "column", this.directionLaptop = "column", this.directionDesktop = "column";
981
+ set direction(e) {
982
+ _(this, "direction", e);
983
+ }
984
+ attributeChangedCallback(e, t, n) {
985
+ R(e) || super.attributeChangedCallback(e, t, n);
966
986
  }
967
987
  };
968
- customElements.get("px-vstack") || customElements.define("px-vstack", L);
969
- var R = class extends I {
970
- constructor() {
971
- super();
988
+ customElements.get("px-vstack") || customElements.define("px-vstack", z);
989
+ var B = class extends L {
990
+ get direction() {
991
+ return "row";
972
992
  }
973
- connectedCallback() {
974
- super.connectedCallback(), this.direction = "row", this.directionMobile = "row", this.directionTablet = "row", this.directionLaptop = "row", this.directionDesktop = "row";
993
+ set direction(e) {
994
+ _(this, "direction", e);
995
+ }
996
+ attributeChangedCallback(e, t, n) {
997
+ R(e) || super.attributeChangedCallback(e, t, n);
975
998
  }
976
999
  };
977
- customElements.get("px-hstack") || customElements.define("px-hstack", R);
1000
+ customElements.get("px-hstack") || customElements.define("px-hstack", B);
978
1001
  //#endregion
979
1002
  //#region ../Layout/src/Spacer.ts
980
- var z = class extends HTMLElement {
1003
+ var V = class extends HTMLElement {
981
1004
  constructor() {
982
1005
  super(), this.isZeroSized = !1, this.growValue = "1", this.isVertical = !1;
983
1006
  }
@@ -1023,14 +1046,14 @@ var z = class extends HTMLElement {
1023
1046
  e ? this.setAttribute("nogap", "") : this.removeAttribute("nogap");
1024
1047
  }
1025
1048
  };
1026
- customElements.get("px-spacer") || customElements.define("px-spacer", z);
1049
+ customElements.get("px-spacer") || customElements.define("px-spacer", V);
1027
1050
  //#endregion
1028
1051
  //#region ../Layout/src/Page.css?inline
1029
- var B = ":host{box-sizing:border-box;display:block}slot[name=body-container]{min-height:100vh}#image-sticky-box{margin-top:-2.5rem}", V = new CSSStyleSheet();
1030
- V.replaceSync(B);
1031
- var H = class extends n {
1052
+ var H = ":host{box-sizing:border-box;display:block}slot[name=body-container]{min-height:100vh}#image-sticky-box{margin-top:-2.5rem}", U = new CSSStyleSheet();
1053
+ U.replaceSync(H);
1054
+ var W = class extends n {
1032
1055
  constructor() {
1033
- super(V), this.template = () => `
1056
+ super(U), this.template = () => `
1034
1057
  <px-container border-radius="none" padding="none">
1035
1058
  <px-vstack>
1036
1059
  <px-container id="header-container" border-radius="none">
@@ -1123,7 +1146,7 @@ var H = class extends n {
1123
1146
  </px-container>
1124
1147
  </px-vstack>
1125
1148
  </px-container>
1126
- `, this.shadowRoot.innerHTML = this.template();
1149
+ `, v(this.shadowRoot, this.template());
1127
1150
  }
1128
1151
  static get observedAttributes() {
1129
1152
  return [
@@ -1210,17 +1233,20 @@ var H = class extends n {
1210
1233
  this.$headerContainer.paddingLeft = e, this.$headerContainer.paddingRight = e, this.$bodyContainer.paddingLeft = e, this.$bodyContainer.paddingRight = e, this.$contactContainer.paddingLeft = e, this.$contactContainer.paddingRight = e, this.$footerContainer.paddingLeft = e, this.$footerContainer.paddingRight = e, this.$imageContainer.paddingLeft = e, this.$imageContainer.paddingRight = e;
1211
1234
  }
1212
1235
  };
1213
- customElements.get("px-page") === void 0 && customElements.define("px-page", H);
1236
+ customElements.get("px-page") === void 0 && customElements.define("px-page", W);
1214
1237
  //#endregion
1215
1238
  //#region ../Section/src/Section.ts
1216
- var U = new CSSStyleSheet();
1217
- U.replaceSync(b);
1218
- var W = class extends n {
1239
+ var G = new CSSStyleSheet();
1240
+ G.replaceSync(b);
1241
+ var K = class e extends n {
1242
+ static {
1243
+ this.template = u("<px-container border-radius=\"none\" padding-inline=\"none\"><div class=\"content-wrapper\"><px-vstack gap=\"heading-to-content\"><slot name=\"heading\"></slot><px-vstack gap=\"none\"><slot></slot></px-vstack></px-vstack></div></px-container><div class=\"content-wrapper\"><slot name=\"overlap\"></slot></div>");
1244
+ }
1219
1245
  constructor() {
1220
- super(U), this.template = () => "\n <px-container border-radius=\"none\" padding-inline=\"none\">\n <div class=\"content-wrapper\">\n <px-vstack gap=\"heading-to-content\">\n <slot name=\"heading\"></slot>\n <px-vstack gap=\"none\">\n <slot></slot>\n </px-vstack>\n </px-vstack>\n </div>\n </px-container>\n <div class=\"content-wrapper\">\n <slot name=\"overlap\"></slot>\n </div>\n ", this.shadowRoot.innerHTML = this.template();
1246
+ super(G), v(this.shadowRoot, e.template);
1221
1247
  }
1222
1248
  connectedCallback() {
1223
- v(this.$container, "background-color", this.backgroundColor), !this.paddingBlock && !this.paddingTop && !this.paddingBottom && !this.paddingBlockMobile && !this.paddingTopMobile && !this.paddingBottomMobile && !this.paddingBlockTablet && !this.paddingTopTablet && !this.paddingBottomTablet && !this.paddingBlockLaptop && !this.paddingTopLaptop && !this.paddingBottomLaptop && (this.$container.paddingBlock = "none"), this.setHeadingSpacing = this.setHeadingSpacing.bind(this), this.setHeadingSpacing(), this.$slotHeading?.addEventListener("slotchange", this.setHeadingSpacing), this.toggleOverlapSpacing = this.toggleOverlapSpacing.bind(this), this.toggleOverlapSpacing(), this.$slotOverlap?.addEventListener("slotchange", this.toggleOverlapSpacing);
1249
+ _(this.$container, "background-color", this.backgroundColor), !this.paddingBlock && !this.paddingTop && !this.paddingBottom && !this.paddingBlockMobile && !this.paddingTopMobile && !this.paddingBottomMobile && !this.paddingBlockTablet && !this.paddingTopTablet && !this.paddingBottomTablet && !this.paddingBlockLaptop && !this.paddingTopLaptop && !this.paddingBottomLaptop && (this.$container.paddingBlock = "none"), this.setHeadingSpacing = this.setHeadingSpacing.bind(this), this.setHeadingSpacing(), this.$slotHeading?.addEventListener("slotchange", this.setHeadingSpacing), this.toggleOverlapSpacing = this.toggleOverlapSpacing.bind(this), this.toggleOverlapSpacing(), this.$slotOverlap?.addEventListener("slotchange", this.toggleOverlapSpacing);
1224
1250
  }
1225
1251
  static get observedAttributes() {
1226
1252
  return [
@@ -1370,159 +1396,159 @@ var W = class extends n {
1370
1396
  return this.getAttribute("background-color") || "none";
1371
1397
  }
1372
1398
  set backgroundColor(e) {
1373
- v(this, "background-color", e);
1399
+ _(this, "background-color", e);
1374
1400
  }
1375
1401
  get gradient() {
1376
1402
  return this.getAttribute("background-gradient");
1377
1403
  }
1378
1404
  set gradient(e) {
1379
- v(this, "background-gradient", e);
1405
+ _(this, "background-gradient", e);
1380
1406
  }
1381
1407
  get backgroundImage() {
1382
1408
  return this.getAttribute("background-image");
1383
1409
  }
1384
1410
  set backgroundImage(e) {
1385
- v(this, "background-image", e);
1411
+ _(this, "background-image", e);
1386
1412
  }
1387
1413
  get backgroundImageMobile() {
1388
1414
  return this.getAttribute("background-image--mobile");
1389
1415
  }
1390
1416
  set backgroundImageMobile(e) {
1391
- v(this, "background-image--mobile", e);
1417
+ _(this, "background-image--mobile", e);
1392
1418
  }
1393
1419
  get backgroundImageTablet() {
1394
1420
  return this.getAttribute("background-image--tablet");
1395
1421
  }
1396
1422
  set backgroundImageTablet(e) {
1397
- v(this, "background-image--tablet", e);
1423
+ _(this, "background-image--tablet", e);
1398
1424
  }
1399
1425
  get backgroundImageLaptop() {
1400
1426
  return this.getAttribute("background-image--laptop");
1401
1427
  }
1402
1428
  set backgroundImageLaptop(e) {
1403
- v(this, "background-image--laptop", e);
1429
+ _(this, "background-image--laptop", e);
1404
1430
  }
1405
1431
  get backgroundSize() {
1406
1432
  return this.getAttribute("background-size");
1407
1433
  }
1408
1434
  set backgroundSize(e) {
1409
- v(this, "background-size", e);
1435
+ _(this, "background-size", e);
1410
1436
  }
1411
1437
  get backgroundPosition() {
1412
1438
  return this.getAttribute("background-position");
1413
1439
  }
1414
1440
  set backgroundPosition(e) {
1415
- v(this, "background-position", e);
1441
+ _(this, "background-position", e);
1416
1442
  }
1417
1443
  get paddingBlock() {
1418
1444
  return this.getAttribute("padding-block");
1419
1445
  }
1420
1446
  set paddingBlock(e) {
1421
- v(this, "padding-block", e);
1447
+ _(this, "padding-block", e);
1422
1448
  }
1423
1449
  get paddingTop() {
1424
1450
  return this.getAttribute("padding-top");
1425
1451
  }
1426
1452
  set paddingTop(e) {
1427
- v(this, "padding-top", e);
1453
+ _(this, "padding-top", e);
1428
1454
  }
1429
1455
  get paddingBottom() {
1430
1456
  return this.getAttribute("padding-bottom");
1431
1457
  }
1432
1458
  set paddingBottom(e) {
1433
- v(this, "padding-bottom", e);
1459
+ _(this, "padding-bottom", e);
1434
1460
  }
1435
1461
  get paddingBlockMobile() {
1436
1462
  return this.getAttribute("padding-block--mobile");
1437
1463
  }
1438
1464
  set paddingBlockMobile(e) {
1439
- v(this, "padding-block--mobile", e);
1465
+ _(this, "padding-block--mobile", e);
1440
1466
  }
1441
1467
  get paddingTopMobile() {
1442
1468
  return this.getAttribute("padding-top--mobile");
1443
1469
  }
1444
1470
  set paddingTopMobile(e) {
1445
- v(this, "padding-top--mobile", e);
1471
+ _(this, "padding-top--mobile", e);
1446
1472
  }
1447
1473
  get paddingBottomMobile() {
1448
1474
  return this.getAttribute("padding-bottom--mobile");
1449
1475
  }
1450
1476
  set paddingBottomMobile(e) {
1451
- v(this, "padding-bottom--mobile", e);
1477
+ _(this, "padding-bottom--mobile", e);
1452
1478
  }
1453
1479
  get paddingBlockTablet() {
1454
1480
  return this.getAttribute("padding-block--tablet");
1455
1481
  }
1456
1482
  set paddingBlockTablet(e) {
1457
- v(this, "padding-block--tablet", e);
1483
+ _(this, "padding-block--tablet", e);
1458
1484
  }
1459
1485
  get paddingTopTablet() {
1460
1486
  return this.getAttribute("padding-top--tablet");
1461
1487
  }
1462
1488
  set paddingTopTablet(e) {
1463
- v(this, "padding-top--tablet", e);
1489
+ _(this, "padding-top--tablet", e);
1464
1490
  }
1465
1491
  get paddingBottomTablet() {
1466
1492
  return this.getAttribute("padding-bottom--tablet");
1467
1493
  }
1468
1494
  set paddingBottomTablet(e) {
1469
- v(this, "padding-bottom--tablet", e);
1495
+ _(this, "padding-bottom--tablet", e);
1470
1496
  }
1471
1497
  get paddingBlockLaptop() {
1472
1498
  return this.getAttribute("padding-block--laptop");
1473
1499
  }
1474
1500
  set paddingBlockLaptop(e) {
1475
- v(this, "padding-block--laptop", e);
1501
+ _(this, "padding-block--laptop", e);
1476
1502
  }
1477
1503
  get paddingTopLaptop() {
1478
1504
  return this.getAttribute("padding-top--laptop");
1479
1505
  }
1480
1506
  set paddingTopLaptop(e) {
1481
- v(this, "padding-top--laptop", e);
1507
+ _(this, "padding-top--laptop", e);
1482
1508
  }
1483
1509
  get paddingBottomLaptop() {
1484
1510
  return this.getAttribute("padding-bottom--laptop");
1485
1511
  }
1486
1512
  set paddingBottomLaptop(e) {
1487
- v(this, "padding-bottom--laptop", e);
1513
+ _(this, "padding-bottom--laptop", e);
1488
1514
  }
1489
1515
  get border() {
1490
1516
  return this.getAttribute("border");
1491
1517
  }
1492
1518
  set border(e) {
1493
- v(this, "border", e);
1519
+ _(this, "border", e);
1494
1520
  }
1495
1521
  get borderSide() {
1496
1522
  return this.getAttribute("border-side");
1497
1523
  }
1498
1524
  set borderSide(e) {
1499
- v(this, "border-side", e);
1525
+ _(this, "border-side", e);
1500
1526
  }
1501
1527
  get borderSideMobile() {
1502
1528
  return this.getAttribute("border-side--mobile");
1503
1529
  }
1504
1530
  set borderSideMobile(e) {
1505
- v(this, "border-side--mobile", e);
1531
+ _(this, "border-side--mobile", e);
1506
1532
  }
1507
1533
  get borderSideTablet() {
1508
1534
  return this.getAttribute("border-side--tablet");
1509
1535
  }
1510
1536
  set borderSideTablet(e) {
1511
- v(this, "border-side--tablet", e);
1537
+ _(this, "border-side--tablet", e);
1512
1538
  }
1513
1539
  get borderSideLaptop() {
1514
1540
  return this.getAttribute("border-side--laptop");
1515
1541
  }
1516
1542
  set borderSideLaptop(e) {
1517
- v(this, "border-side--laptop", e);
1543
+ _(this, "border-side--laptop", e);
1518
1544
  }
1519
1545
  };
1520
- customElements.get("px-section") || customElements.define("px-section", W);
1546
+ customElements.get("px-section") || customElements.define("px-section", K);
1521
1547
  //#endregion
1522
1548
  //#region ../Grid/src/grid.css?inline
1523
- var G = ":host{--grid-cols:initial;--grid-cols--mobile:initial;--grid-cols--tablet:initial;--grid-cols--laptop:initial;--grid-cols--desktop:initial;--justify-content:initial;--justify-items:initial;--align-content:initial;--align-items:initial;display:block}.grid{grid-template-columns:repeat(var(--grid-cols), minmax(0, 1fr));justify-content:var(--justify-content);justify-items:var(--justify-items);align-content:var(--align-content);align-items:var(--align-items);display:grid}.justify-content-normal{justify-content:normal}.justify-content-start{justify-content:start}.justify-content-end{justify-content:end}.justify-content-center{justify-content:center}.justify-content-space-between{justify-content:space-between}.justify-content-space-around{justify-content:space-around}.justify-content-space-evenly{justify-content:space-evenly}.justify-content-stretch{justify-content:stretch}.justify-items-start{justify-items:start}.justify-items-end{justify-items:end}.justify-items-center{justify-items:center}.justify-items-stretch{justify-items:stretch}.align-content-normal{align-content:normal}.align-content-start{align-content:start}.align-content-end{align-content:end}.align-content-center{align-content:center}.align-content-space-between{align-content:space-between}.align-content-space-around{align-content:space-around}.align-content-space-evenly{align-content:space-evenly}.align-content-stretch{align-content:stretch}.align-items-start{align-items:start}.align-items-end{align-items:end}.align-items-center{align-items:center}.align-items-stretch{align-items:stretch}@media screen and (width<=47.938rem){.grid{grid-template-columns:repeat(var(--grid-cols--mobile,var(--grid-cols)), minmax(0, 1fr))}.justify-content-normal-mobile{justify-content:normal}.justify-content-start-mobile{justify-content:start}.justify-content-end-mobile{justify-content:end}.justify-content-center-mobile{justify-content:center}.justify-content-space-between-mobile{justify-content:space-between}.justify-content-space-around-mobile{justify-content:space-around}.justify-content-space-evenly-mobile{justify-content:space-evenly}.justify-content-stretch-mobile{justify-content:stretch}.justify-items-start-mobile{justify-items:start}.justify-items-end-mobile{justify-items:end}.justify-items-center-mobile{justify-items:center}.justify-items-stretch-mobile{justify-items:stretch}.align-content-normal-mobile{align-content:normal}.align-content-start-mobile{align-content:start}.align-content-end-mobile{align-content:end}.align-content-center-mobile{align-content:center}.align-content-space-between-mobile{align-content:space-between}.align-content-space-around-mobile{align-content:space-around}.align-content-space-evenly-mobile{align-content:space-evenly}.align-content-stretch-mobile{align-content:stretch}.align-items-start-mobile{align-items:start}.align-items-end-mobile{align-items:end}.align-items-center-mobile{align-items:center}.align-items-stretch-mobile{align-items:stretch}}@media screen and (width>=48rem) and (width<=64rem){.grid{grid-template-columns:repeat(var(--grid-cols--tablet,var(--grid-cols)), minmax(0, 1fr))}.justify-content-normal-tablet{justify-content:normal}.justify-content-start-tablet{justify-content:start}.justify-content-end-tablet{justify-content:end}.justify-content-center-tablet{justify-content:center}.justify-content-space-between-tablet{justify-content:space-between}.justify-content-space-around-tablet{justify-content:space-around}.justify-content-space-evenly-tablet{justify-content:space-evenly}.justify-content-stretch-tablet{justify-content:stretch}.justify-items-start-tablet{justify-items:start}.justify-items-end-tablet{justify-items:end}.justify-items-center-tablet{justify-items:center}.justify-items-stretch-tablet{justify-items:stretch}.align-content-normal-tablet{align-content:normal}.align-content-start-tablet{align-content:start}.align-content-end-tablet{align-content:end}.align-content-center-tablet{align-content:center}.align-content-space-between-tablet{align-content:space-between}.align-content-space-around-tablet{align-content:space-around}.align-content-space-evenly-tablet{align-content:space-evenly}.align-content-stretch-tablet{align-content:stretch}.align-items-start-tablet{align-items:start}.align-items-end-tablet{align-items:end}.align-items-center-tablet{align-items:center}.align-items-stretch-tablet{align-items:stretch}}@media screen and (width>=64.0625rem){.grid{grid-template-columns:repeat(var(--grid-cols--laptop,var(--grid-cols)), minmax(0, 1fr))}.justify-content-normal-laptop{justify-content:normal}.justify-content-start-laptop{justify-content:start}.justify-content-end-laptop{justify-content:end}.justify-content-center-laptop{justify-content:center}.justify-content-space-between-laptop{justify-content:space-between}.justify-content-space-around-laptop{justify-content:space-around}.justify-content-space-evenly-laptop{justify-content:space-evenly}.justify-content-stretch-laptop{justify-content:stretch}.justify-items-start-laptop{justify-items:start}.justify-items-end-laptop{justify-items:end}.justify-items-center-laptop{justify-items:center}.justify-items-stretch-laptop{justify-items:stretch}.align-content-normal-laptop{align-content:normal}.align-content-start-laptop{align-content:start}.align-content-end-laptop{align-content:end}.align-content-center-laptop{align-content:center}.align-content-space-between-laptop{align-content:space-between}.align-content-space-around-laptop{align-content:space-around}.align-content-space-evenly-laptop{align-content:space-evenly}.align-content-stretch-laptop{align-content:stretch}.align-items-start-laptop{align-items:start}.align-items-end-laptop{align-items:end}.align-items-center-laptop{align-items:center}.align-items-stretch-laptop{align-items:stretch}}", K = new CSSStyleSheet();
1524
- K.replaceSync(G);
1525
- var q = [
1549
+ var q = ":host{--grid-cols:initial;--grid-cols--mobile:initial;--grid-cols--tablet:initial;--grid-cols--laptop:initial;--grid-cols--desktop:initial;--justify-content:initial;--justify-items:initial;--align-content:initial;--align-items:initial;display:block}.grid{grid-template-columns:repeat(var(--grid-cols), minmax(0, 1fr));justify-content:var(--justify-content);justify-items:var(--justify-items);align-content:var(--align-content);align-items:var(--align-items);display:grid}.justify-content-normal{justify-content:normal}.justify-content-start{justify-content:start}.justify-content-end{justify-content:end}.justify-content-center{justify-content:center}.justify-content-space-between{justify-content:space-between}.justify-content-space-around{justify-content:space-around}.justify-content-space-evenly{justify-content:space-evenly}.justify-content-stretch{justify-content:stretch}.justify-items-start{justify-items:start}.justify-items-end{justify-items:end}.justify-items-center{justify-items:center}.justify-items-stretch{justify-items:stretch}.align-content-normal{align-content:normal}.align-content-start{align-content:start}.align-content-end{align-content:end}.align-content-center{align-content:center}.align-content-space-between{align-content:space-between}.align-content-space-around{align-content:space-around}.align-content-space-evenly{align-content:space-evenly}.align-content-stretch{align-content:stretch}.align-items-start{align-items:start}.align-items-end{align-items:end}.align-items-center{align-items:center}.align-items-stretch{align-items:stretch}@media screen and (width<=47.938rem){.grid{grid-template-columns:repeat(var(--grid-cols--mobile,var(--grid-cols)), minmax(0, 1fr))}.justify-content-normal-mobile{justify-content:normal}.justify-content-start-mobile{justify-content:start}.justify-content-end-mobile{justify-content:end}.justify-content-center-mobile{justify-content:center}.justify-content-space-between-mobile{justify-content:space-between}.justify-content-space-around-mobile{justify-content:space-around}.justify-content-space-evenly-mobile{justify-content:space-evenly}.justify-content-stretch-mobile{justify-content:stretch}.justify-items-start-mobile{justify-items:start}.justify-items-end-mobile{justify-items:end}.justify-items-center-mobile{justify-items:center}.justify-items-stretch-mobile{justify-items:stretch}.align-content-normal-mobile{align-content:normal}.align-content-start-mobile{align-content:start}.align-content-end-mobile{align-content:end}.align-content-center-mobile{align-content:center}.align-content-space-between-mobile{align-content:space-between}.align-content-space-around-mobile{align-content:space-around}.align-content-space-evenly-mobile{align-content:space-evenly}.align-content-stretch-mobile{align-content:stretch}.align-items-start-mobile{align-items:start}.align-items-end-mobile{align-items:end}.align-items-center-mobile{align-items:center}.align-items-stretch-mobile{align-items:stretch}}@media screen and (width>=48rem) and (width<=64rem){.grid{grid-template-columns:repeat(var(--grid-cols--tablet,var(--grid-cols)), minmax(0, 1fr))}.justify-content-normal-tablet{justify-content:normal}.justify-content-start-tablet{justify-content:start}.justify-content-end-tablet{justify-content:end}.justify-content-center-tablet{justify-content:center}.justify-content-space-between-tablet{justify-content:space-between}.justify-content-space-around-tablet{justify-content:space-around}.justify-content-space-evenly-tablet{justify-content:space-evenly}.justify-content-stretch-tablet{justify-content:stretch}.justify-items-start-tablet{justify-items:start}.justify-items-end-tablet{justify-items:end}.justify-items-center-tablet{justify-items:center}.justify-items-stretch-tablet{justify-items:stretch}.align-content-normal-tablet{align-content:normal}.align-content-start-tablet{align-content:start}.align-content-end-tablet{align-content:end}.align-content-center-tablet{align-content:center}.align-content-space-between-tablet{align-content:space-between}.align-content-space-around-tablet{align-content:space-around}.align-content-space-evenly-tablet{align-content:space-evenly}.align-content-stretch-tablet{align-content:stretch}.align-items-start-tablet{align-items:start}.align-items-end-tablet{align-items:end}.align-items-center-tablet{align-items:center}.align-items-stretch-tablet{align-items:stretch}}@media screen and (width>=64.0625rem){.grid{grid-template-columns:repeat(var(--grid-cols--laptop,var(--grid-cols)), minmax(0, 1fr))}.justify-content-normal-laptop{justify-content:normal}.justify-content-start-laptop{justify-content:start}.justify-content-end-laptop{justify-content:end}.justify-content-center-laptop{justify-content:center}.justify-content-space-between-laptop{justify-content:space-between}.justify-content-space-around-laptop{justify-content:space-around}.justify-content-space-evenly-laptop{justify-content:space-evenly}.justify-content-stretch-laptop{justify-content:stretch}.justify-items-start-laptop{justify-items:start}.justify-items-end-laptop{justify-items:end}.justify-items-center-laptop{justify-items:center}.justify-items-stretch-laptop{justify-items:stretch}.align-content-normal-laptop{align-content:normal}.align-content-start-laptop{align-content:start}.align-content-end-laptop{align-content:end}.align-content-center-laptop{align-content:center}.align-content-space-between-laptop{align-content:space-between}.align-content-space-around-laptop{align-content:space-around}.align-content-space-evenly-laptop{align-content:space-evenly}.align-content-stretch-laptop{align-content:stretch}.align-items-start-laptop{align-items:start}.align-items-end-laptop{align-items:end}.align-items-center-laptop{align-items:center}.align-items-stretch-laptop{align-items:stretch}}", J = new CSSStyleSheet();
1550
+ J.replaceSync(q);
1551
+ var Y = [
1526
1552
  "1",
1527
1553
  "2",
1528
1554
  "3",
@@ -1535,7 +1561,7 @@ var q = [
1535
1561
  "10",
1536
1562
  "11",
1537
1563
  "12"
1538
- ], J = [
1564
+ ], X = [
1539
1565
  "",
1540
1566
  "start",
1541
1567
  "end",
@@ -1544,18 +1570,21 @@ var q = [
1544
1570
  "space-around",
1545
1571
  "space-evenly",
1546
1572
  "stretch"
1547
- ], Y = [
1573
+ ], Z = [
1548
1574
  "",
1549
1575
  "start",
1550
1576
  "end",
1551
1577
  "center",
1552
1578
  "stretch"
1553
- ], X = f("gap", (e, t, n) => `:host([${e}${n ? `--${n}` : ""}='${t}']) .grid`, p, "px-spacing", "--grid-gap"), Z = class extends t {
1579
+ ], ne = d("gap", (e, t, n) => `:host([${e}${n ? `--${n}` : ""}='${t}']) .grid`, f, "px-spacing", "--grid-gap"), re = class e extends t {
1580
+ static {
1581
+ this.template = u("<div class=\"grid\"><slot></slot></div>");
1582
+ }
1554
1583
  static {
1555
1584
  this.nativeName = "div";
1556
1585
  }
1557
1586
  constructor() {
1558
- super(K, X), this.template = () => "<div class=\"grid\">\n <slot></slot>\n </div>", this.shadowRoot.innerHTML = this.template();
1587
+ super(J, ne), v(this.shadowRoot, e.template);
1559
1588
  }
1560
1589
  static get observedAttributes() {
1561
1590
  return [
@@ -1595,7 +1624,7 @@ var q = [
1595
1624
  case "grid-cols--mobile":
1596
1625
  case "grid-cols--tablet":
1597
1626
  case "grid-cols--laptop":
1598
- this.updateAttribute(e, t, n, q);
1627
+ this.updateAttribute(e, t, n, Y);
1599
1628
  break;
1600
1629
  case "justify-content":
1601
1630
  case "align-content":
@@ -1607,7 +1636,7 @@ var q = [
1607
1636
  case "align-content--laptop":
1608
1637
  case "justify-content--desktop":
1609
1638
  case "align-content--desktop":
1610
- this.updateAttribute(e, t, n, J);
1639
+ this.updateAttribute(e, t, n, X);
1611
1640
  break;
1612
1641
  case "justify-items":
1613
1642
  case "align-items":
@@ -1619,14 +1648,14 @@ var q = [
1619
1648
  case "align-items--laptop":
1620
1649
  case "justify-items--desktop":
1621
1650
  case "align-items--desktop":
1622
- this.updateAttribute(e, t, n, Y);
1651
+ this.updateAttribute(e, t, n, Z);
1623
1652
  break;
1624
1653
  default: super.attributeChangedCallback(e, t, n);
1625
1654
  }
1626
1655
  }
1627
1656
  updateGap(e, t, n) {
1628
1657
  if (!this.checkName(n, t)) {
1629
- h(`"${t}" is not a valid gap value for ${this.tagName.toLowerCase()}. Allowed values are: "${n.join("\", \"")}".`);
1658
+ m(`"${t}" is not a valid gap value for ${this.tagName.toLowerCase()}. Allowed values are: "${n.join("\", \"")}".`);
1630
1659
  return;
1631
1660
  }
1632
1661
  let r = (e) => {
@@ -1635,7 +1664,7 @@ var q = [
1635
1664
  r(e), r(t);
1636
1665
  }
1637
1666
  updateAttribute(e, t, n, r) {
1638
- this.checkName(r, n) ? e === "grid-cols" || e === "grid-cols--mobile" || e === "grid-cols--tablet" || e === "grid-cols--laptop" || e === "grid-cols--desktop" ? this.$el.style.setProperty(`--${e}`, n) : (t !== null && t !== "" && t !== "default" && this.$el.classList.toggle(`${e}-${t}`), n !== null && n !== "" && n !== "default" && this.$el.classList.toggle(`${e}-${n}`)) : h(`"${n}" is not a valid ${e} value for ${this.tagName.toLowerCase()}. Allowed values are: "${r.join("\", \"")}".`);
1667
+ this.checkName(r, n) ? e === "grid-cols" || e === "grid-cols--mobile" || e === "grid-cols--tablet" || e === "grid-cols--laptop" || e === "grid-cols--desktop" ? this.$el.style.setProperty(`--${e}`, n) : (t !== null && t !== "" && t !== "default" && this.$el.classList.toggle(`${e}-${t}`), n !== null && n !== "" && n !== "default" && this.$el.classList.toggle(`${e}-${n}`)) : m(`"${n}" is not a valid ${e} value for ${this.tagName.toLowerCase()}. Allowed values are: "${r.join("\", \"")}".`);
1639
1668
  }
1640
1669
  get gap() {
1641
1670
  return this.getAttribute("gap");
@@ -1806,17 +1835,20 @@ var q = [
1806
1835
  this._updateAttribute("align-items--desktop", e);
1807
1836
  }
1808
1837
  };
1809
- customElements.get("px-grid") || customElements.define("px-grid", Z);
1838
+ customElements.get("px-grid") || customElements.define("px-grid", re);
1810
1839
  //#endregion
1811
1840
  //#region src/ContentHeader.ts
1812
1841
  var Q = new CSSStyleSheet();
1813
1842
  Q.replaceSync(y);
1814
- var $ = class extends t {
1843
+ var $ = class e extends t {
1844
+ static {
1845
+ this.template = u("<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><slot></slot></px-h1><slot name=\"subtitle\"></slot></px-vstack><px-stack gap=\"s\" direction=\"row\" direction--mobile=\"column\"><slot name=\"patch\" shrink></slot><slot name=\"patch-description\"></slot></px-stack></div></px-container></px-grid><slot name=\"overlap\" slot=\"overlap\"></slot></px-section></div>");
1846
+ }
1815
1847
  static {
1816
1848
  this.nativeName = "div";
1817
1849
  }
1818
1850
  constructor() {
1819
- super(Q), this.template = () => "<div class=\"content-header\">\n <div class=\"contrast-helper\"></div>\n <px-section padding-block=\"l\">\n <px-grid gap=\"none\">\n <px-container padding=\"none\" border-radius=\"none\" background-color=\"none\" >\n <div class=\"content-header-content\">\n <px-vstack gap=\"heading-to-subtitle\">\n <px-h1><slot></slot></px-h1>\n <slot name=\"subtitle\"></slot>\n </px-vstack>\n <px-stack gap=\"s\" direction=\"row\" direction--mobile=\"column\">\n <slot name=\"patch\" shrink></slot>\n <slot name=\"patch-description\"></slot>\n </px-stack>\n </div>\n </px-container>\n </px-grid>\n <slot name=\"overlap\" slot=\"overlap\"></slot>\n </px-section>\n </div>", this.shadowRoot.innerHTML = this.template();
1851
+ super(Q), v(this.shadowRoot, e.template);
1820
1852
  }
1821
1853
  static get observedAttributes() {
1822
1854
  return [
@@ -1848,7 +1880,7 @@ var $ = class extends t {
1848
1880
  this.$section.backgroundColor = r.indexOf(n) > 0 ? n : "none";
1849
1881
  break;
1850
1882
  case "background-gradient":
1851
- this.$section.gradient = m.indexOf(n) > 0 ? n : "none";
1883
+ this.$section.gradient = p.indexOf(n) > 0 ? n : "none";
1852
1884
  break;
1853
1885
  case "background-image":
1854
1886
  this.$section.backgroundImage = n;