@proximus/lavender-content-header 2.0.0-alpha.5 → 2.0.0-alpha.51

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 (3) hide show
  1. package/dist/ContentHeader.d.ts +7 -3
  2. package/dist/index.es.js +609 -226
  3. package/package.json +2 -2
package/dist/ContentHeader.d.ts CHANGED
@@ -1,7 +1,11 @@
1
1
  import '@proximus/lavender-section';
2
2
  import { type Section } from '@proximus/lavender-section';
3
- import { H1 } from '@proximus/lavender-heading';
4
- import { Grid } from '@proximus/lavender-grid';
3
+ import type { H1 } from '@proximus/lavender-heading';
4
+ import '@proximus/lavender-heading';
5
+ import '@proximus/lavender-container';
6
+ import '@proximus/lavender-layout';
7
+ import type { Grid } from '@proximus/lavender-grid';
8
+ import '@proximus/lavender-grid';
5
9
  import { PxElement } from '@proximus/lavender-common';
6
10
  export declare class ContentHeader extends PxElement<HTMLDivElement> {
7
11
  static nativeName: string;
@@ -10,7 +14,7 @@ export declare class ContentHeader extends PxElement<HTMLDivElement> {
10
14
  static get observedAttributes(): string[];
11
15
  connectedCallback(): void;
12
16
  attributeChangedCallback(attrName: string, oldValue: string, newValue: string): void;
13
- createGridding(): void;
17
+ createGridding(value?: string): void;
14
18
  get $grid(): Grid;
15
19
  get $section(): Section;
16
20
  get $h1(): H1;
package/dist/index.es.js CHANGED
@@ -1,56 +1,61 @@
1
- import { PxElement as v, cssTokenBreakpoints as d, paddingValues as s, boxShadowValues as B, backgroundSizeValues as x, noBorderRadiusValues as z, borderRadiusValues as M, borderSideValues as I, borderValues as R, gradientValues as A, backgroundColorValues as c, borderColorValues as P, checkName as y, WithExtraAttributes as $, AttributeBreakpointHandlerDelegate as j, gapValues as D } from "@proximus/lavender-common";
2
- const O = ":host{--min-height--mobile: 15.625em;--min-height--tablet: 17.5em;--min-height--laptop: 17.5em;--min-height--desktop: 17.5em}:host,:host>*{display:block;box-sizing:border-box}.content-header{position:relative;z-index:0}[min-height] .content-header-content{min-height:calc(var(--min-height--mobile) - (var(--px-spacing-l-mobile) * 2))}.content-header-content{display:flex;flex-direction:column;gap:var(--px-spacing-l-mobile);z-index:2;position:relative;box-sizing:border-box}.contrast-helper{position:absolute;top:0;right:0;bottom:0;left:0;z-index:1;pointer-events:none;display:none}[contrast-helper-gradient] .contrast-helper{display:block;background-image:linear-gradient(90deg,#fff 23.43%,#fff0 81.69%)}[inverted] :is([contrast-helper-gradient] .contrast-helper){background-image:linear-gradient(90deg,#000 23.43%,#0000 81.69%)}[contrast-helper-overlay] .contrast-helper{display:block;background-color:#ffffffb3}[inverted] :is([contrast-helper-overlay] .contrast-helper){background-color:#0006}@media only screen and (min-width: 48em){.content-header-content{gap:var(--px-spacing-l-desktop)}[min-height] .content-header-content{min-height:calc(var(--min-height--tablet) - (var(--px-spacing-l-tablet) * 2))}}@media only screen and (min-width: 64.0625em){.content-header-content{gap:var(--px-spacing-l-laptop)}[min-height] .content-header-content{min-height:calc(var(--min-height--laptop) - (var(--px-spacing-l-laptop) * 2))}}", H = ':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 only screen and (min-width: 77em){.content-wrapper{margin-inline:auto}}.overlapped{margin-bottom:calc(var(--px-overlapped-mobile) * -1)}::slotted([slot="overlap"]){margin-top:var(--px-overlapped-mobile)}@media only screen and (min-width: 48em){.overlapped{margin-bottom:calc(var(--px-overlapped-desktop) * -1)}::slotted([slot="overlap"]){margin-top:var(--px-overlapped-desktop)}}@media only screen and (min-width: 64.0625em){.overlapped{margin-bottom:calc(var(--px-overlapped-desktop) * -1)}::slotted([slot="overlap"]){margin-top:var(--px-overlapped-desktop)}}', E = ':host{display:block}.container{font-family:var(--px-font-family);background-color:var(--background-color);border-radius:var(--px-radius-main);box-sizing:border-box;height:100%}:host([background-image]) .container{background-image:var(--background-image)}:host([background-gradient]) .container{background-image:var(--background-gradient)}:host([inverted]) .container{background-color:var(--background-color-inverted);color:var(--px-color-text-neutral-inverted)}.border-none{border:none}.border-s{border:var(--px-size-border-s) solid var(--border-color)}.border-m{border:var(--px-size-border-m) solid var(--border-color)}.border-l{border:var(--px-size-border-l) solid var(--border-color)}.border-side-top{border-bottom-style:none;border-right-style:none;border-left-style:none}.border-side-right{border-top-style:none;border-bottom-style:none;border-left-style:none}.border-side-bottom{border-top-style:none;border-right-style:none;border-left-style:none}.border-side-left{border-top-style:none;border-right-style:none;border-bottom-style:none}.border-side-block{border-inline-style:none}.border-side-inline{border-block-style:none}:host([inverted]) .border-s,:host([inverted]) .border-m,:host([inverted]) .border-l{border-color:var(--border-color-inverted)}.border-radius-main{border-radius:var(--px-radius-main)}.border-radius-pill{border-radius:var(--px-radius-pill)}.no-border-radius-top{border-top-left-radius:var(--px-radius-none);border-top-right-radius:var(--px-radius-none)}.no-border-radius-right{border-top-right-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-bottom{border-bottom-left-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-left{border-top-left-radius:var(--px-radius-none);border-bottom-left-radius:var(--px-radius-none)}.no-border-radius-all,.border-radius-none{border-radius:var(--px-radius-none)}.bgimg{background-repeat:no-repeat}.background-size-cover{background-size:cover;background-position:center center}.background-size-contain{background-size:contain}.box-shadow-none{box-shadow:none}.box-shadow-s{box-shadow:0 1px 2px #2525251f}.box-shadow-m{box-shadow:0 4px 6px -1px #25252514}.box-shadow-l{box-shadow:0 10px 15px -3px #25252514}.box-shadow-xl{box-shadow:0 20px 25px -5px #25252514}.anchored{position:relative}::slotted([slot="anchor-right"]),::slotted([slot="anchor-left"]),::slotted([slot="anchor-full"]){position:absolute;top:0}::slotted([slot="anchor-right"]),::slotted([slot="anchor-left"]){transform:translateY(-50%);z-index:3}::slotted([slot="anchor-right"]){right:var( --container-anchor-offset--mobile, var( --container-padding-right, var(--container-padding-inline, var(--container-padding)) ) )}::slotted([slot="anchor-left"]){left:var( --container-anchor-offset--mobile, var( --container-padding-left, var(--container-padding-inline, var(--container-padding)) ) )}::slotted([slot="anchor-full"]){transform:translateY(-100%);right:0;left:0;text-align:center;z-index:2}::slotted(px-vstack:only-of-type),::slotted(px-hstack:only-of-type),::slotted(px-stack:only-of-type),::slotted(px-grid:only-of-type){height:100%}.border-s ::slotted([slot="anchor-full"]){right:calc(var(--px-size-border-s) * -1);left:calc(var(--px-size-border-s) * -1)}.border-m ::slotted([slot="anchor-full"]){right:calc(var(--px-size-border-m) * -1);left:calc(var(--px-size-border-m) * -1)}.border-l ::slotted([slot="anchor-full"]){right:calc(var(--px-size-border-l) * -1);left:calc(var(--px-size-border-l) * -1)}@media only screen and (max-width: 47.938em){.container{background-color:var(--background-color--mobile, var(--background-color))}:host([background-image--mobile]) .container{background-image:var(--background-image--mobile, var(--background-image))}:host([background-gradient--mobile]) .container{background-image:var( --background-gradient--mobile, var(--background-gradient) )}:host([inverted]) .container{background-color:var( --background-color-inverted--mobile, var(--background-color-inverted) )}.border-side-top--mobile{border-top-style:solid;border-right-style:none;border-bottom-style:none;border-left-style:none}.border-side-right--mobile{border-top-style:none;border-right-style:solid;border-bottom-style:none;border-left-style:none}.border-side-bottom--mobile{border-top-style:none;border-right-style:none;border-bottom-style:solid;border-left-style:none}.border-side-left--mobile{border-top-style:none;border-right-style:none;border-bottom-style:none;border-left-style:solid}.border-side-block--mobile{border-inline-style:none;border-block-style:solid}.border-side-inline--mobile{border-block-style:none;border-inline-style:solid}.no-border-radius-top--mobile{border-top-left-radius:var(--px-radius-none);border-top-right-radius:var(--px-radius-none)}.no-border-radius-right--mobile{border-top-right-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-bottom--mobile{border-bottom-left-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-left--mobile{border-top-left-radius:var(--px-radius-none);border-bottom-left-radius:var(--px-radius-none)}.no-border-radius-all--mobile{border-radius:var(--px-radius-none)}}@media only screen and (min-width: 48em) and (max-width: 64em){.container{background-color:var(--background-color--tablet, var(--background-color))}:host([background-image--tablet]) .container{background-image:var(--background-image--tablet, var(--background-image))}:host([background-gradient--tablet]) .container{background-image:var( --background-gradient--tablet, var(--background-gradient) )}:host([inverted]) .container{background-color:var( --background-color-inverted--tablet, var(--background-color-inverted) )}.no-border-radius-top--tablet{border-top-left-radius:var(--px-radius-none);border-top-right-radius:var(--px-radius-none)}.no-border-radius-right--tablet{border-top-right-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-bottom--tablet{border-bottom-left-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-left--tablet{border-top-left-radius:var(--px-radius-none);border-bottom-left-radius:var(--px-radius-none)}.no-border-radius-all--tablet{border-radius:var(--px-radius-none)}.border-side-top--tablet{border-top-style:solid;border-right-style:none;border-bottom-style:none;border-left-style:none}.border-side-right--tablet{border-top-style:none;border-right-style:solid;border-bottom-style:none;border-left-style:none}.border-side-bottom--tablet{border-top-style:none;border-right-style:none;border-bottom-style:solid;border-left-style:none}.border-side-left--tablet{border-top-style:none;border-right-style:none;border-bottom-style:none;border-left-style:solid}.border-side-block--tablet{border-inline-style:none;border-block-style:solid}.border-side-inline--tablet{border-block-style:none;border-inline-style:solid}::slotted([slot="anchor-right"]){right:var( --container-anchor-offset--tablet, var( --container-padding-right, var(--container-padding-inline, var(--container-padding)) ) )}::slotted([slot="anchor-left"]){left:var( --container-anchor-offset--tablet, var( --container-padding-left, var(--container-padding-inline, var(--container-padding)) ) )}}@media only screen and (min-width: 64.0625em){.container{background-color:var(--background-color--laptop, var(--background-color))}:host([background-image--laptop]) .container{background-image:var(--background-image--laptop, var(--background-image))}:host([background-gradient--laptop]) .container{background-image:var( --background-gradient--laptop, var(--background-gradient) )}:host([inverted]) .container{background-color:var( --background-color-inverted--laptop, var(--background-color-inverted) )}.no-border-radius-top--laptop{border-top-left-radius:var(--px-radius-none);border-top-right-radius:var(--px-radius-none)}.no-border-radius-right--laptop{border-top-right-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-bottom--laptop{border-bottom-left-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-left--laptop{border-top-left-radius:var(--px-radius-none);border-bottom-left-radius:var(--px-radius-none)}.no-border-radius-all--laptop{border-radius:var(--px-radius-none)}::slotted([slot="anchor-right"]){right:var( --container-anchor-offset--laptop, var( --container-padding-right, var(--container-padding-inline, var(--container-padding)) ) )}::slotted([slot="anchor-left"]){left:var( --container-anchor-offset--laptop, var( --container-padding-left, var(--container-padding-inline, var(--container-padding)) ) )}.border-side-top--laptop{border-top-style:solid;border-right-style:none;border-bottom-style:none;border-left-style:none}.border-side-right--laptop{border-top-style:none;border-right-style:solid;border-bottom-style:none;border-left-style:none}.border-side-bottom--laptop{border-top-style:none;border-right-style:none;border-bottom-style:solid;border-left-style:none}.border-side-left--laptop{border-top-style:none;border-right-style:none;border-bottom-style:none;border-left-style:solid}.border-side-block--laptop{border-inline-style:none;border-block-style:solid}.border-side-inline--laptop{border-block-style:none;border-inline-style:solid}}', w = new CSSStyleSheet();
3
- w.replaceSync(E);
4
- const l = (n, t, r) => `:host([${n}${r ? `--${r}` : ""}='${t}']) .container`, b = "px-padding", k = class k extends v {
1
+ import { cssTokenBreakpoints as d, paddingValues as l, VerticallyExtendedElement as R, boxShadowValues as P, backgroundSizeValues as $, noBorderRadiusValues as D, borderRadiusValues as H, borderSideValues as E, borderValues as O, gradientValues as j, log as n, backgroundColorValues as u, borderColorValues as q, checkName as h, WithExtraAttributes as C, AttributeBreakpointHandlerDelegate as G, gapValues as w, PxElement as S } from "@proximus/lavender-common";
2
+ import "@proximus/lavender-heading";
3
+ const X = ":host{--min-height--mobile: 15.625em;--min-height--tablet: 17.5em;--min-height--laptop: 17.5em;--min-height--desktop: 17.5em}:host,:host>*{display:block;box-sizing:border-box}.content-header{position:relative;z-index:0}[min-height] .content-header-content{min-height:calc(var(--min-height--mobile) - (var(--px-spacing-l-mobile) * 2))}.content-header-content{display:flex;flex-direction:column;gap:var(--px-spacing-l-mobile);z-index:2;position:relative;box-sizing:border-box}.contrast-helper{position:absolute;top:0;right:0;bottom:0;left:0;z-index:1;pointer-events:none;display:none}[contrast-helper-gradient] .contrast-helper{display:block;background-image:linear-gradient(90deg,#fff 23.43%,#fff0 81.69%)}[inverted] :is([contrast-helper-gradient] .contrast-helper){background-image:linear-gradient(90deg,#000 23.43%,#0000 81.69%)}[contrast-helper-overlay] .contrast-helper{display:block;background-color:#ffffffb3}[inverted] :is([contrast-helper-overlay] .contrast-helper){background-color:#0006}@media only screen and (min-width: 48em){.content-header-content{gap:var(--px-spacing-l-desktop)}[min-height] .content-header-content{min-height:calc(var(--min-height--tablet) - (var(--px-spacing-l-tablet) * 2))}}@media only screen and (min-width: 64.0625em){.content-header-content{gap:var(--px-spacing-l-laptop)}[min-height] .content-header-content{min-height:calc(var(--min-height--laptop) - (var(--px-spacing-l-laptop) * 2))}}", F = ':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 only screen and (min-width: 77em){.content-wrapper{margin-inline:auto}}.overlapped{margin-bottom:calc(var(--px-overlapped-mobile) * -1)}::slotted([slot="overlap"]){margin-top:var(--px-overlapped-mobile)}@media only screen and (min-width: 48em){.overlapped{margin-bottom:calc(var(--px-overlapped-desktop) * -1)}::slotted([slot="overlap"]){margin-top:var(--px-overlapped-desktop)}}@media only screen and (min-width: 64.0625em){.overlapped{margin-bottom:calc(var(--px-overlapped-desktop) * -1)}::slotted([slot="overlap"]){margin-top:var(--px-overlapped-desktop)}}', N = ':host{display:block}.container{font-family:var(--px-font-family);background-color:var(--background-color);border-radius:var(--px-radius-main);box-sizing:border-box;height:100%}:host([background-image]) .container{background-image:var(--background-image)}:host([background-gradient]) .container{background-image:var(--background-gradient)}:host([inverted]) .container{background-color:var(--background-color-inverted);color:var(--px-color-text-neutral-inverted)}.border-none{border:none}.border-s{border:var(--px-size-border-s) solid var(--border-color)}.border-m{border:var(--px-size-border-m) solid var(--border-color)}.border-l{border:var(--px-size-border-l) solid var(--border-color)}.border-side-top{border-bottom-style:none;border-right-style:none;border-left-style:none}.border-side-right{border-top-style:none;border-bottom-style:none;border-left-style:none}.border-side-bottom{border-top-style:none;border-right-style:none;border-left-style:none}.border-side-left{border-top-style:none;border-right-style:none;border-bottom-style:none}.border-side-block{border-inline-style:none}.border-side-inline{border-block-style:none}:host([inverted]) .border-s,:host([inverted]) .border-m,:host([inverted]) .border-l{border-color:var(--border-color-inverted)}.border-radius-main{border-radius:var(--px-radius-main)}.border-radius-pill{border-radius:var(--px-radius-pill)}.no-border-radius-top{border-top-left-radius:var(--px-radius-none);border-top-right-radius:var(--px-radius-none)}.no-border-radius-right{border-top-right-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-bottom{border-bottom-left-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-left{border-top-left-radius:var(--px-radius-none);border-bottom-left-radius:var(--px-radius-none)}.no-border-radius-all,.border-radius-none{border-radius:var(--px-radius-none)}.bgimg{background-repeat:no-repeat}.background-size-cover{background-size:cover;background-position:center center}.background-size-contain{background-size:contain}.box-shadow-none{box-shadow:none}.box-shadow-s{box-shadow:0 1px 2px #2525251f}.box-shadow-m{box-shadow:0 4px 6px -1px #25252514}.box-shadow-l{box-shadow:0 10px 15px -3px #25252514}.box-shadow-xl{box-shadow:0 20px 25px -5px #25252514}.anchored{position:relative}::slotted([slot="anchor-right"]),::slotted([slot="anchor-left"]),::slotted([slot="anchor-full"]){position:absolute;top:0}::slotted([slot="anchor-right"]),::slotted([slot="anchor-left"]){transform:translateY(-50%);z-index:3}::slotted([slot="anchor-right"]){right:var( --container-anchor-offset--mobile, var( --container-padding-right, var(--container-padding-inline, var(--container-padding)) ) )}::slotted([slot="anchor-left"]){left:var( --container-anchor-offset--mobile, var( --container-padding-left, var(--container-padding-inline, var(--container-padding)) ) )}::slotted([slot="anchor-full"]){transform:translateY(-100%);right:0;left:0;text-align:center;z-index:2}::slotted(px-vstack:only-of-type),::slotted(px-hstack:only-of-type),::slotted(px-stack:only-of-type),::slotted(px-grid:only-of-type){height:100%}:host([anchor-spacing]){margin-top:var(--container-anchor-spacing--mobile)}.border-s ::slotted([slot="anchor-full"]){right:calc(var(--px-size-border-s) * -1);left:calc(var(--px-size-border-s) * -1)}.border-m ::slotted([slot="anchor-full"]){right:calc(var(--px-size-border-m) * -1);left:calc(var(--px-size-border-m) * -1)}.border-l ::slotted([slot="anchor-full"]){right:calc(var(--px-size-border-l) * -1);left:calc(var(--px-size-border-l) * -1)}@media only screen and (max-width: 47.938em){.container{background-color:var(--background-color--mobile, var(--background-color))}:host([background-image--mobile]) .container{background-image:var(--background-image--mobile, var(--background-image))}:host([background-gradient--mobile]) .container{background-image:var( --background-gradient--mobile, var(--background-gradient) )}:host([inverted]) .container{background-color:var( --background-color-inverted--mobile, var(--background-color-inverted) )}.border-side-top--mobile{border-top-style:solid;border-right-style:none;border-bottom-style:none;border-left-style:none}.border-side-right--mobile{border-top-style:none;border-right-style:solid;border-bottom-style:none;border-left-style:none}.border-side-bottom--mobile{border-top-style:none;border-right-style:none;border-bottom-style:solid;border-left-style:none}.border-side-left--mobile{border-top-style:none;border-right-style:none;border-bottom-style:none;border-left-style:solid}.border-side-block--mobile{border-inline-style:none;border-block-style:solid}.border-side-inline--mobile{border-block-style:none;border-inline-style:solid}.no-border-radius-top--mobile{border-top-left-radius:var(--px-radius-none);border-top-right-radius:var(--px-radius-none)}.no-border-radius-right--mobile{border-top-right-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-bottom--mobile{border-bottom-left-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-left--mobile{border-top-left-radius:var(--px-radius-none);border-bottom-left-radius:var(--px-radius-none)}.no-border-radius-all--mobile{border-radius:var(--px-radius-none)}}@media only screen and (min-width: 48em) and (max-width: 64em){.container{background-color:var(--background-color--tablet, var(--background-color))}:host([background-image--tablet]) .container{background-image:var(--background-image--tablet, var(--background-image))}:host([background-gradient--tablet]) .container{background-image:var( --background-gradient--tablet, var(--background-gradient) )}:host([inverted]) .container{background-color:var( --background-color-inverted--tablet, var(--background-color-inverted) )}.no-border-radius-top--tablet{border-top-left-radius:var(--px-radius-none);border-top-right-radius:var(--px-radius-none)}.no-border-radius-right--tablet{border-top-right-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-bottom--tablet{border-bottom-left-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-left--tablet{border-top-left-radius:var(--px-radius-none);border-bottom-left-radius:var(--px-radius-none)}.no-border-radius-all--tablet{border-radius:var(--px-radius-none)}.border-side-top--tablet{border-top-style:solid;border-right-style:none;border-bottom-style:none;border-left-style:none}.border-side-right--tablet{border-top-style:none;border-right-style:solid;border-bottom-style:none;border-left-style:none}.border-side-bottom--tablet{border-top-style:none;border-right-style:none;border-bottom-style:solid;border-left-style:none}.border-side-left--tablet{border-top-style:none;border-right-style:none;border-bottom-style:none;border-left-style:solid}.border-side-block--tablet{border-inline-style:none;border-block-style:solid}.border-side-inline--tablet{border-block-style:none;border-inline-style:solid}::slotted([slot="anchor-right"]){right:var( --container-anchor-offset--tablet, var( --container-padding-right, var(--container-padding-inline, var(--container-padding)) ) )}::slotted([slot="anchor-left"]){left:var( --container-anchor-offset--tablet, var( --container-padding-left, var(--container-padding-inline, var(--container-padding)) ) )}:host([anchor-spacing]){margin-top:var(--container-anchor-spacing--tablet)}}@media only screen and (min-width: 64.0625em){.container{background-color:var(--background-color--laptop, var(--background-color))}:host([background-image--laptop]) .container{background-image:var(--background-image--laptop, var(--background-image))}:host([background-gradient--laptop]) .container{background-image:var( --background-gradient--laptop, var(--background-gradient) )}:host([inverted]) .container{background-color:var( --background-color-inverted--laptop, var(--background-color-inverted) )}.no-border-radius-top--laptop{border-top-left-radius:var(--px-radius-none);border-top-right-radius:var(--px-radius-none)}.no-border-radius-right--laptop{border-top-right-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-bottom--laptop{border-bottom-left-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-left--laptop{border-top-left-radius:var(--px-radius-none);border-bottom-left-radius:var(--px-radius-none)}.no-border-radius-all--laptop{border-radius:var(--px-radius-none)}::slotted([slot="anchor-right"]){right:var( --container-anchor-offset--laptop, var( --container-padding-right, var(--container-padding-inline, var(--container-padding)) ) )}::slotted([slot="anchor-left"]){left:var( --container-anchor-offset--laptop, var( --container-padding-left, var(--container-padding-inline, var(--container-padding)) ) )}:host([anchor-spacing]){margin-top:var(--container-anchor-spacing--laptop)}.border-side-top--laptop{border-top-style:solid;border-right-style:none;border-bottom-style:none;border-left-style:none}.border-side-right--laptop{border-top-style:none;border-right-style:solid;border-bottom-style:none;border-left-style:none}.border-side-bottom--laptop{border-top-style:none;border-right-style:none;border-bottom-style:solid;border-left-style:none}.border-side-left--laptop{border-top-style:none;border-right-style:none;border-bottom-style:none;border-left-style:solid}.border-side-block--laptop{border-inline-style:none;border-block-style:solid}.border-side-inline--laptop{border-block-style:none;border-inline-style:solid}}', L = new CSSStyleSheet();
4
+ L.replaceSync(N);
5
+ const _ = [
6
+ "has-patch",
7
+ "neighbor-has-patch",
8
+ "has-ribbon",
9
+ "neighbor-has-ribbon"
10
+ ], c = (s, t, i) => `:host([${s}${i ? `--${i}` : ""}='${t}']) .container`, g = "px-padding", Z = [
11
+ d(
12
+ "padding",
13
+ c,
14
+ l,
15
+ g,
16
+ "--container-padding"
17
+ ),
18
+ d(
19
+ "padding-inline",
20
+ c,
21
+ l,
22
+ g
23
+ ),
24
+ d(
25
+ "padding-block",
26
+ c,
27
+ l,
28
+ g
29
+ ),
30
+ d(
31
+ "padding-top",
32
+ c,
33
+ l,
34
+ g
35
+ ),
36
+ d(
37
+ "padding-right",
38
+ c,
39
+ l,
40
+ g,
41
+ "--container-padding-right"
42
+ ),
43
+ d(
44
+ "padding-bottom",
45
+ c,
46
+ l,
47
+ g
48
+ ),
49
+ d(
50
+ "padding-left",
51
+ c,
52
+ l,
53
+ g,
54
+ "--container-padding-left"
55
+ )
56
+ ], y = class y extends R {
5
57
  constructor() {
6
- super(
7
- w,
8
- d(
9
- "padding",
10
- l,
11
- s,
12
- b,
13
- "--container-padding"
14
- ),
15
- d(
16
- "padding-inline",
17
- l,
18
- s,
19
- b
20
- ),
21
- d(
22
- "padding-block",
23
- l,
24
- s,
25
- b
26
- ),
27
- d(
28
- "padding-top",
29
- l,
30
- s,
31
- b
32
- ),
33
- d(
34
- "padding-right",
35
- l,
36
- s,
37
- b,
38
- "--container-padding-right"
39
- ),
40
- d(
41
- "padding-bottom",
42
- l,
43
- s,
44
- b
45
- ),
46
- d(
47
- "padding-left",
48
- l,
49
- s,
50
- b,
51
- "--container-padding-left"
52
- )
53
- ), this.template = () => `<div class="container">
58
+ super(L, ...Z), this.template = () => `<div class="container">
54
59
  <slot></slot>
55
60
  <slot name="anchor-left"></slot>
56
61
  <slot name="anchor-right"></slot>
@@ -87,6 +92,7 @@ const l = (n, t, r) => `:host([${n}${r ? `--${r}` : ""}='${t}']) .container`, b
87
92
  "background-position",
88
93
  "box-shadow",
89
94
  "anchor-offset",
95
+ "anchor-spacing",
90
96
  "inverted"
91
97
  ];
92
98
  }
@@ -98,9 +104,9 @@ const l = (n, t, r) => `:host([${n}${r ? `--${r}` : ""}='${t}']) .container`, b
98
104
  subtree: !0,
99
105
  characterData: !0
100
106
  }), this._bgObserver = new IntersectionObserver((t) => {
101
- t.forEach((r) => {
107
+ t.forEach((i) => {
102
108
  var e;
103
- r.isIntersecting && (this._isInViewport = !0, this._loadBackgroundImages(), (e = this._bgObserver) == null || e.disconnect());
109
+ i.isIntersecting && (this._isInViewport = !0, this._loadBackgroundImages(), (e = this._bgObserver) == null || e.disconnect());
104
110
  });
105
111
  }), this._bgObserver.observe(this.$el);
106
112
  }
@@ -108,11 +114,11 @@ const l = (n, t, r) => `:host([${n}${r ? `--${r}` : ""}='${t}']) .container`, b
108
114
  var t;
109
115
  (t = this._bgObserver) == null || t.disconnect(), this.contentObserver.disconnect();
110
116
  }
111
- attributeChangedCallback(t, r, e) {
112
- if (r !== e)
117
+ attributeChangedCallback(t, i, e) {
118
+ if (i !== e)
113
119
  switch (t) {
114
120
  case "border":
115
- this.updateAttribute(t, r, e, R);
121
+ this.updateAttribute(t, i, e, O);
116
122
  break;
117
123
  case "border-color":
118
124
  this.updateBorderColor(t, e);
@@ -121,14 +127,14 @@ const l = (n, t, r) => `:host([${n}${r ? `--${r}` : ""}='${t}']) .container`, b
121
127
  case "border-side--mobile":
122
128
  case "border-side--tablet":
123
129
  case "border-side--laptop":
124
- this.updateAttribute(t, r, e, I);
130
+ this.updateAttribute(t, i, e, E);
125
131
  break;
126
132
  case "border-radius":
127
133
  this.updateAttribute(
128
134
  t,
129
- r,
135
+ i,
130
136
  e,
131
- M
137
+ H
132
138
  );
133
139
  break;
134
140
  case "no-border-radius":
@@ -137,9 +143,9 @@ const l = (n, t, r) => `:host([${n}${r ? `--${r}` : ""}='${t}']) .container`, b
137
143
  case "no-border-radius--laptop":
138
144
  this.updateNoBorderRadius(
139
145
  t,
140
- r,
146
+ i,
141
147
  e,
142
- z
148
+ D
143
149
  );
144
150
  break;
145
151
  case "background-color":
@@ -157,9 +163,9 @@ const l = (n, t, r) => `:host([${n}${r ? `--${r}` : ""}='${t}']) .container`, b
157
163
  case "background-size":
158
164
  this.updateAttribute(
159
165
  t,
160
- r,
166
+ i,
161
167
  e,
162
- x
168
+ $
163
169
  );
164
170
  break;
165
171
  case "background-image":
@@ -172,13 +178,16 @@ const l = (n, t, r) => `:host([${n}${r ? `--${r}` : ""}='${t}']) .container`, b
172
178
  e !== null && e !== "" && (this.$el.style.backgroundPosition = e);
173
179
  break;
174
180
  case "box-shadow":
175
- this.updateAttribute(t, r, e, B);
181
+ this.updateAttribute(t, i, e, P);
176
182
  break;
177
183
  case "anchor-offset":
178
- this.updateAnchorOffset(r, e, s);
184
+ this.updateAnchorOffset(i, e, l);
185
+ break;
186
+ case "anchor-spacing":
187
+ this.updateAnchorSpacing(i, e, _);
179
188
  break;
180
189
  default:
181
- super.attributeChangedCallback(t, r, e);
190
+ super.attributeChangedCallback(t, i, e);
182
191
  break;
183
192
  }
184
193
  }
@@ -188,105 +197,138 @@ const l = (n, t, r) => `:host([${n}${r ? `--${r}` : ""}='${t}']) .container`, b
188
197
  "background-image--mobile",
189
198
  "background-image--tablet",
190
199
  "background-image--laptop"
191
- ].forEach((r) => {
192
- const e = this.getAttribute(r);
193
- e && this.updateBackgroundImg(r, e);
200
+ ].forEach((i) => {
201
+ const e = this.getAttribute(i);
202
+ e && this.updateBackgroundImg(i, e);
194
203
  });
195
204
  }
196
- updateBackgroundImg(t, r) {
197
- this.$el.style.setProperty(`--${t}`, `url("${r}")`);
205
+ updateBackgroundImg(t, i) {
206
+ this.$el.style.setProperty(`--${t}`, `url("${i}")`);
198
207
  }
199
- updateGradient(t, r) {
200
- if (this.checkName(A, r)) {
208
+ updateGradient(t, i) {
209
+ if (this.checkName(j, i)) {
201
210
  const e = this.splitAttrNameFromBreakpoint(t);
202
211
  t = e.attrName;
203
212
  const o = e.breakpoint;
204
213
  this.$el.style.setProperty(
205
214
  `--${t}${o}`,
206
- `linear-gradient(var(--px-color-background-gradient-${r}))`
215
+ `linear-gradient(var(--px-color-background-gradient-${i}))`
207
216
  );
208
217
  } else
209
- console.error(`${r} is not an allowed background-gradient value`);
218
+ n(
219
+ `${i} is not an allowed ${t} value for ${this.tagName.toLowerCase()}`
220
+ );
210
221
  }
211
- updateBackgroundColor(t, r) {
212
- const e = r.startsWith("surface-");
213
- if (this.checkName(c, r)) {
214
- const o = this.splitAttrNameFromBreakpoint(t), i = o.breakpoint;
222
+ updateBackgroundColor(t, i) {
223
+ const e = i.startsWith("surface-");
224
+ if (this.checkName(u, i)) {
225
+ const o = this.splitAttrNameFromBreakpoint(t), r = o.breakpoint;
215
226
  this.$el.style.setProperty(
216
- `--${o.attrName}${i}`,
217
- `var(--px-color-background-${r}${e ? "" : "-default"})`
227
+ `--${o.attrName}${r}`,
228
+ `var(--px-color-background-${i}${e ? "" : "-default"})`
218
229
  ), this.$el.style.setProperty(
219
- `--${o.attrName}-inverted${i}`,
220
- `var(--px-color-background-${r}${e ? "" : "-inverted"})`
230
+ `--${o.attrName}-inverted${r}`,
231
+ `var(--px-color-background-${i}${e ? "" : "-inverted"})`
221
232
  );
222
233
  } else
223
- console.error(`${r} is not an allowed ${t} value`);
234
+ n(
235
+ `${i} is not an allowed ${t} value for ${this.tagName.toLowerCase()}`
236
+ );
224
237
  }
225
- updateBorderColor(t, r) {
226
- this.checkName(P, r) ? (this.$el.style.setProperty(
238
+ updateBorderColor(t, i) {
239
+ this.checkName(q, i) ? (this.$el.style.setProperty(
227
240
  `--${t}`,
228
- `var(--px-color-border-${r}-default)`
241
+ `var(--px-color-border-${i}-default)`
229
242
  ), this.$el.style.setProperty(
230
243
  `--${t}-inverted`,
231
- `var(--px-color-border-${r}-inverted)`
232
- )) : console.error(`${r} is not an allowed ${t} value`);
244
+ `var(--px-color-border-${i}-inverted)`
245
+ )) : n(
246
+ `${i} is not an allowed ${t} value for ${this.tagName.toLowerCase()}`
247
+ );
233
248
  }
234
- updateNoBorderRadius(t, r, e, o) {
249
+ updateNoBorderRadius(t, i, e, o) {
235
250
  if (!this.checkName(o, e))
236
- console.error(`${e} is not an allowed ${t} value`);
251
+ n(
252
+ `${e} is not an allowed ${t} value for ${this.tagName.toLowerCase()}`
253
+ );
237
254
  else {
238
- const i = this.splitAttrNameFromBreakpoint(t), a = i.breakpoint;
239
- r !== null && r !== "" && this.$el.classList.toggle(
240
- `${i.attrName}-${r}${a}`
255
+ const r = this.splitAttrNameFromBreakpoint(t), a = r.breakpoint;
256
+ i !== null && i !== "" && this.$el.classList.toggle(
257
+ `${r.attrName}-${i}${a}`
241
258
  ), e !== null && e !== "" && this.$el.classList.toggle(
242
- `${i.attrName}-${e}${a}`
259
+ `${r.attrName}-${e}${a}`
243
260
  );
244
261
  }
245
262
  }
246
- updateAttribute(t, r, e, o) {
263
+ updateAttribute(t, i, e, o) {
247
264
  if (!this.checkName(o, e))
248
- console.error(`${e} is not an allowed ${t} value`);
265
+ n(
266
+ `${e} is not an allowed ${t} value for ${this.tagName.toLowerCase()}`
267
+ );
249
268
  else {
250
- const i = this.splitAttrNameFromBreakpoint(t), a = i.breakpoint;
251
- r !== null && r !== "" && this.$el.classList.toggle(
252
- `${i.attrName}-${r}${a}`
269
+ const r = this.splitAttrNameFromBreakpoint(t), a = r.breakpoint;
270
+ i !== null && i !== "" && this.$el.classList.toggle(
271
+ `${r.attrName}-${i}${a}`
253
272
  ), e !== null && e !== "" && this.$el.classList.toggle(
254
- `${i.attrName}-${e}${a}`
273
+ `${r.attrName}-${e}${a}`
255
274
  );
256
275
  }
257
276
  }
258
277
  splitAttrNameFromBreakpoint(t) {
259
- let r = "";
278
+ let i = "";
260
279
  if (["--mobile", "--tablet", "--laptop"].some(
261
280
  (e) => t.includes(e)
262
281
  )) {
263
282
  const e = t.split("--");
264
- t = e[0], r = `--${e[1]}`;
283
+ t = e[0], i = `--${e[1]}`;
265
284
  }
266
- return { attrName: t, breakpoint: r };
285
+ return { attrName: t, breakpoint: i };
267
286
  }
268
- updateAnchorOffset(t, r, e) {
269
- if (!y(e, r)) {
270
- console.error(`${r} is not a valid anchor-offset value`);
287
+ updateAnchorOffset(t, i, e) {
288
+ if (!h(e, i)) {
289
+ n(
290
+ `${i} is not a valid anchor-offset value for ${this.tagName.toLowerCase()}`
291
+ );
271
292
  return;
272
293
  }
273
- const o = (i) => {
274
- i !== null && i !== "" && i !== "default" && (this.$el.style.setProperty(
294
+ const o = (r) => {
295
+ r !== null && r !== "" && r !== "default" && (this.$el.style.setProperty(
275
296
  "--container-anchor-offset--mobile",
276
- `var(--px-padding-${i}-mobile)`
297
+ `var(--px-padding-${r}-mobile)`
277
298
  ), this.$el.style.setProperty(
278
299
  "--container-anchor-offset--tablet",
279
- `var(--px-padding-${i}-tablet)`
300
+ `var(--px-padding-${r}-tablet)`
280
301
  ), this.$el.style.setProperty(
281
302
  "--container-anchor-offset--laptop",
282
- `var(--px-padding-${i}-laptop)`
303
+ `var(--px-padding-${r}-laptop)`
283
304
  ));
284
305
  };
285
- o(t), o(r);
306
+ o(t), o(i);
286
307
  }
287
308
  addAnchorClass() {
288
309
  this.$el.classList.contains("anchored") || this.$el.classList.add("anchored");
289
310
  }
311
+ updateAnchorSpacing(t, i, e) {
312
+ if (!h(e, i)) {
313
+ n(
314
+ `${i} is not a valid anchor-spacing value for ${this.tagName.toLowerCase()}`
315
+ );
316
+ return;
317
+ }
318
+ const o = (r) => {
319
+ r !== null && r !== "" && r !== "default" && (this.style.setProperty(
320
+ "--container-anchor-spacing--mobile",
321
+ `var(--px-spacing-${r}-mobile)`
322
+ ), this.style.setProperty(
323
+ "--container-anchor-spacing--tablet",
324
+ `var(--px-spacing-${r}-tablet)`
325
+ ), this.style.setProperty(
326
+ "--container-anchor-spacing--laptop",
327
+ `var(--px-spacing-${r}-laptop)`
328
+ ));
329
+ };
330
+ o(t), o(i);
331
+ }
290
332
  get $slotAnchor() {
291
333
  return this.querySelector('[slot^="anchor"]');
292
334
  }
@@ -620,6 +662,12 @@ const l = (n, t, r) => `:host([${n}${r ? `--${r}` : ""}='${t}']) .container`, b
620
662
  set anchorOffset(t) {
621
663
  this.setAttribute("anchor-offset", t);
622
664
  }
665
+ get anchorSpacing() {
666
+ return this.getAttribute("anchor-spacing");
667
+ }
668
+ set anchorSpacing(t) {
669
+ this.setAttribute("anchor-spacing", t);
670
+ }
623
671
  get inverted() {
624
672
  return this.getAttribute("inverted");
625
673
  }
@@ -627,19 +675,19 @@ const l = (n, t, r) => `:host([${n}${r ? `--${r}` : ""}='${t}']) .container`, b
627
675
  this.setAttribute("inverted", t);
628
676
  }
629
677
  };
630
- k.nativeName = "div";
631
- let u = k;
632
- customElements.get("px-container") || customElements.define("px-container", u);
633
- const q = ':host{display:block}:host([overflow-x="auto"]){margin:calc(calc(var(--px-focus-outline-mobile) + var(--px-focus-offset-mobile)) * -1)}:host([overflow-x="auto"]) .flex-container{padding:calc(var(--px-focus-outline-mobile) + var(--px-focus-offset-mobile))}.flex-container{display:flex;height:100%;width:100%;box-sizing:border-box;flex-direction:var(--flex-direction--mobile-value);gap:var(--flex-gap--mobile-value);flex-wrap:var(--flex-wrap--mobile-value);justify-content:var(--flex-justify-content--mobile-value);align-items:var(--flex-align-items--mobile-value);overflow-x:var(--overflow-x-all)}@media only screen and (max-width: 47.9375em){.flex-container{overflow-x:var(--overflow-x-all-mobile, var(--overflow-x-all));scrollbar-width:none}.flex-container::-webkit-scrollbar{display:none}}@media only screen and (min-width: 48em){.flex-container{flex-direction:var(--flex-direction--tablet-value);gap:var(--flex-gap--tablet-value);flex-wrap:var(--flex-wrap--tablet-value);justify-content:var(--flex-justify-content--tablet-value);align-items:var(--flex-align-items--tablet-value)}:host([overflow-x="auto"]){margin:calc(calc(var(--px-focus-outline-tablet) + var(--px-focus-offset-tablet)) * -1)}:host([overflow-x="auto"]) .flex-container{padding:calc(var(--px-focus-outline-tablet) + var(--px-focus-offset-tablet))}}@media only screen and (min-width: 48em) and (max-width: 64em){.flex-container{overflow-x:var(--overflow-x-all-tablet, var(--overflow-x-all));scrollbar-width:none}.flex-container::-webkit-scrollbar{display:none}}@media only screen and (min-width: 64.0625em){.flex-container{flex-direction:var(--flex-direction--laptop-value);gap:var(--flex-gap--laptop-value);flex-wrap:var(--flex-wrap--laptop-value);justify-content:var(--flex-justify-content--laptop-value);align-items:var(--flex-align-items--laptop-value)}:host([overflow-x="auto"]){margin:calc(calc(var(--px-focus-outline-laptop) + var(--px-focus-offset-laptop)) * -1)}:host([overflow-x="auto"]) .flex-container{padding:calc(var(--px-focus-outline-laptop) + var(--px-focus-offset-laptop))}}@media only screen and (min-width: 64.0625em) and (max-width: 90em){.flex-container{overflow-x:var(--overflow-x-all-laptop, var(--overflow-x-all))}}@media only screen and (min-width: 90.0625em){.flex-container{flex-direction:var(--flex-direction--desktop-value);gap:var(--flex-gap--desktop-value);flex-wrap:var(--flex-wrap--desktop-value);justify-content:var(--flex-justify-content--desktop-value);align-items:var(--flex-align-items--desktop-value);overflow-x:var(--overflow-x-all-desktop, var(--overflow-x-all))}:host([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))}}', S = new CSSStyleSheet();
634
- S.replaceSync(q);
635
- const G = [
678
+ y.nativeName = "div";
679
+ let m = y;
680
+ customElements.get("px-container") || customElements.define("px-container", m);
681
+ const W = ':host{display:block}:host ::slotted(px-h1[auto-spacing]),:host ::slotted(px-h2[auto-spacing]),:host ::slotted(px-h3[auto-spacing]),:host ::slotted(px-h4[auto-spacing]),:host ::slotted(px-h5[auto-spacing]),:host ::slotted(px-h6[auto-spacing]){margin-bottom:calc(var(--px-spacing-heading-to-content-mobile) - var(--host-gap--mobile))}:host([overflow-x="auto"]){margin:calc(calc(var(--px-focus-outline-mobile) + var(--px-focus-offset-mobile)) * -1)}:host([overflow-x="auto"]) .flex-container{padding:calc(var(--px-focus-outline-mobile) + var(--px-focus-offset-mobile))}.flex-container{display:flex;height:100%;width:100%;box-sizing:border-box;flex-direction:var(--flex-direction--mobile-value);gap:var(--flex-gap--mobile-value);flex-wrap:var(--flex-wrap--mobile-value);justify-content:var(--flex-justify-content--mobile-value);align-items:var(--flex-align-items--mobile-value);overflow-x:var(--overflow-x-all)}@media only screen and (max-width: 47.9375em){.flex-container{overflow-x:var(--overflow-x-all-mobile, var(--overflow-x-all));scrollbar-width:none}.flex-container::-webkit-scrollbar{display:none}}@media only screen and (min-width: 48em){.flex-container{flex-direction:var(--flex-direction--tablet-value);gap:var(--flex-gap--tablet-value);flex-wrap:var(--flex-wrap--tablet-value);justify-content:var(--flex-justify-content--tablet-value);align-items:var(--flex-align-items--tablet-value)}:host ::slotted(px-h1[auto-spacing]),:host ::slotted(px-h2[auto-spacing]),:host ::slotted(px-h3[auto-spacing]),:host ::slotted(px-h4[auto-spacing]),:host ::slotted(px-h5[auto-spacing]),:host ::slotted(px-h6[auto-spacing]){margin-bottom:calc(var(--px-spacing-heading-to-content-tablet) - var(--host-gap--tablet))}:host([overflow-x="auto"]){margin:calc(calc(var(--px-focus-outline-tablet) + var(--px-focus-offset-tablet)) * -1)}:host([overflow-x="auto"]) .flex-container{padding:calc(var(--px-focus-outline-tablet) + var(--px-focus-offset-tablet))}}@media only screen and (min-width: 48em) and (max-width: 64em){.flex-container{overflow-x:var(--overflow-x-all-tablet, var(--overflow-x-all));scrollbar-width:none}.flex-container::-webkit-scrollbar{display:none}}@media only screen and (min-width: 64.0625em){.flex-container{flex-direction:var(--flex-direction--laptop-value);gap:var(--flex-gap--laptop-value);flex-wrap:var(--flex-wrap--laptop-value);justify-content:var(--flex-justify-content--laptop-value);align-items:var(--flex-align-items--laptop-value)}:host ::slotted(px-h1[auto-spacing]),:host ::slotted(px-h2[auto-spacing]),:host ::slotted(px-h3[auto-spacing]),:host ::slotted(px-h4[auto-spacing]),:host ::slotted(px-h5[auto-spacing]),:host ::slotted(px-h6[auto-spacing]){margin-bottom:calc(var(--px-spacing-heading-to-content-laptop) - var(--host-gap--laptop))}:host([overflow-x="auto"]){margin:calc(calc(var(--px-focus-outline-laptop) + var(--px-focus-offset-laptop)) * -1)}:host([overflow-x="auto"]) .flex-container{padding:calc(var(--px-focus-outline-laptop) + var(--px-focus-offset-laptop))}}@media only screen and (min-width: 64.0625em) and (max-width: 90em){.flex-container{overflow-x:var(--overflow-x-all-laptop, var(--overflow-x-all))}}@media only screen and (min-width: 90.0625em){.flex-container{flex-direction:var(--flex-direction--desktop-value);gap:var(--flex-gap--desktop-value);flex-wrap:var(--flex-wrap--desktop-value);justify-content:var(--flex-justify-content--desktop-value);align-items:var(--flex-align-items--desktop-value);overflow-x:var(--overflow-x-all-desktop, var(--overflow-x-all))}:host ::slotted(px-h1[auto-spacing]),:host ::slotted(px-h2[auto-spacing]),:host ::slotted(px-h3[auto-spacing]),:host ::slotted(px-h4[auto-spacing]),:host ::slotted(px-h5[auto-spacing]),:host ::slotted(px-h6[auto-spacing]){margin-bottom:calc(var(--px-spacing-heading-to-content-desktop) - var(--host-gap--desktop))}:host([overflow-x="auto"]){margin:calc(calc(var(--px-focus-outline-desktop) + var(--px-focus-offset-desktop)) * -1)}:host([overflow-x="auto"]) .flex-container{padding:calc(var(--px-focus-outline-desktop) + var(--px-focus-offset-desktop))}}', T = new CSSStyleSheet();
682
+ T.replaceSync(W);
683
+ const Y = [
636
684
  "",
637
685
  "default",
638
686
  "row",
639
687
  "row-reverse",
640
688
  "column",
641
689
  "column-reverse"
642
- ], X = [
690
+ ], J = [
643
691
  "",
644
692
  "default",
645
693
  "stretch",
@@ -647,7 +695,7 @@ const G = [
647
695
  "flex-end",
648
696
  "center",
649
697
  "baseline"
650
- ], F = [
698
+ ], K = [
651
699
  "",
652
700
  "default",
653
701
  "flex-start",
@@ -656,10 +704,10 @@ const G = [
656
704
  "space-between",
657
705
  "space-around",
658
706
  "space-evenly"
659
- ], _ = ["", "default", "nowrap", "wrap", "wrap-reverse"], N = ["", "visible", "hidden", "scroll", "auto"];
660
- class m extends $ {
707
+ ], Q = ["", "default", "nowrap", "wrap", "wrap-reverse"], U = ["", "visible", "hidden", "scroll", "auto"];
708
+ class v extends C {
661
709
  constructor() {
662
- super(S), this.overflowXAttributeDelegate = new j(
710
+ super(T), this.overflowXAttributeDelegate = new G(
663
711
  this,
664
712
  "overflow-x",
665
713
  (t) => t,
@@ -706,14 +754,14 @@ class m extends $ {
706
754
  "overflow-x--desktop"
707
755
  ];
708
756
  }
709
- attributeChangedCallback(t, r, e) {
757
+ attributeChangedCallback(t, i, e) {
710
758
  switch (t) {
711
759
  case "gap":
712
760
  case "gap--mobile":
713
761
  case "gap--tablet":
714
762
  case "gap--laptop":
715
763
  case "gap--desktop":
716
- this.updateFlexProperties(t, r, e, D);
764
+ this.updateFlexProperties(t, i, e, w);
717
765
  break;
718
766
  case "justify-content":
719
767
  case "justify-content--mobile":
@@ -722,9 +770,9 @@ class m extends $ {
722
770
  case "justify-content--desktop":
723
771
  this.updateFlexProperties(
724
772
  t,
725
- r,
773
+ i,
726
774
  e,
727
- F
775
+ K
728
776
  );
729
777
  break;
730
778
  case "align-items":
@@ -732,63 +780,70 @@ class m extends $ {
732
780
  case "align-items--tablet":
733
781
  case "align-items--laptop":
734
782
  case "align-items--desktop":
735
- this.updateFlexProperties(t, r, e, X);
783
+ this.updateFlexProperties(t, i, e, J);
736
784
  break;
737
785
  case "wrap":
738
786
  case "wrap--mobile":
739
787
  case "wrap--tablet":
740
788
  case "wrap--laptop":
741
789
  case "wrap--desktop":
742
- this.updateFlexProperties(t, r, e, _);
790
+ this.updateFlexProperties(t, i, e, Q);
743
791
  break;
744
792
  case "direction":
745
793
  case "direction--mobile":
746
794
  case "direction--tablet":
747
795
  case "direction--laptop":
748
796
  case "direction--desktop":
749
- this.updateFlexProperties(t, r, e, G);
797
+ this.updateFlexProperties(t, i, e, Y);
750
798
  break;
751
799
  case "overflow-x":
752
800
  case "overflow-x--mobile":
753
801
  case "overflow-x--tablet":
754
802
  case "overflow-x--laptop":
755
803
  case "overflow-x--desktop":
756
- this.updateOverflowX(t, r, e, N);
804
+ this.updateOverflowX(t, i, e, U);
757
805
  break;
758
806
  default:
759
- super.attributeChangedCallback(t, r, e);
807
+ super.attributeChangedCallback(t, i, e);
760
808
  break;
761
809
  }
762
810
  }
763
- updateOverflowX(t, r, e, o) {
764
- if (!y(o, e)) {
765
- console.error(`${e} is not an allowed ${t} value`);
811
+ updateOverflowX(t, i, e, o) {
812
+ if (!h(o, e)) {
813
+ n(
814
+ `${e} is not an allowed ${t} value for ${this.tagName.toLowerCase()}`
815
+ );
766
816
  return;
767
817
  }
768
818
  this.overflowXAttributeDelegate.attributeChangedCallback(
769
819
  t,
770
- r,
820
+ i,
771
821
  e
772
822
  );
773
823
  }
774
- updateFlexProperties(t, r, e, o) {
775
- this.checkName(o, e) || console.error(`${e} is not a valid value for ${o}`);
776
- const i = t.indexOf("--") > -1, a = i ? t.split("--")[0] : t, p = [];
777
- if (!i)
778
- this.getAttribute(a + "--mobile") || p.push("mobile"), this.getAttribute(a + "--tablet") || p.push("tablet"), this.getAttribute(a + "--laptop") || p.push("laptop"), this.getAttribute(a + "--desktop") || p.push("desktop"), p.forEach((g) => {
779
- this.updateStyle(a, g, r, o), this.updateStyle(a, g, e, o);
824
+ updateFlexProperties(t, i, e, o) {
825
+ this.checkName(o, e) || n(
826
+ `${e} is not an allowed ${t} value for ${this.tagName.toLowerCase()}`
827
+ );
828
+ const r = t.indexOf("--") > -1, a = r ? t.split("--")[0] : t, b = [];
829
+ if (!r)
830
+ this.getAttribute(a + "--mobile") || b.push("mobile"), this.getAttribute(a + "--tablet") || b.push("tablet"), this.getAttribute(a + "--laptop") || b.push("laptop"), this.getAttribute(a + "--desktop") || b.push("desktop"), b.forEach((p) => {
831
+ this.updateStyle(a, p, i, o), this.updateStyle(a, p, e, o);
780
832
  });
781
833
  else {
782
- const g = t.split("--")[1];
783
- this.updateStyle(a, g, r, o), this.updateStyle(a, g, e, o);
834
+ const p = t.split("--")[1];
835
+ this.updateStyle(a, p, i, o), this.updateStyle(a, p, e, o);
784
836
  }
785
837
  }
786
- updateStyle(t, r, e, o) {
787
- e && (t === "gap" && o && o.includes(e) ? this.$el.style.setProperty(
788
- `--flex-${t}--${r}-value`,
789
- `var(--px-spacing-${e}-${r === "laptop" ? "desktop" : r})`
790
- ) : this.$el.style.setProperty(
791
- `--flex-${t}--${r}-value`,
838
+ updateStyle(t, i, e, o) {
839
+ e && (t === "gap" && o && o.includes(e) ? (this.$el.style.setProperty(
840
+ `--flex-${t}--${i}-value`,
841
+ `var(--px-spacing-${e}-${i === "laptop" ? "desktop" : i})`
842
+ ), this.style.setProperty(
843
+ `--host-gap--${i}`,
844
+ `var(--px-spacing-${e}-${i === "laptop" ? "desktop" : i})`
845
+ )) : this.$el.style.setProperty(
846
+ `--flex-${t}--${i}-value`,
792
847
  e
793
848
  ));
794
849
  }
@@ -976,8 +1031,8 @@ class m extends $ {
976
1031
  return this.shadowRoot.querySelector(".flex-container");
977
1032
  }
978
1033
  }
979
- customElements.get("px-stack") || customElements.define("px-stack", m);
980
- class Z extends m {
1034
+ customElements.get("px-stack") || customElements.define("px-stack", v);
1035
+ class V extends v {
981
1036
  constructor() {
982
1037
  super();
983
1038
  }
@@ -985,8 +1040,8 @@ class Z extends m {
985
1040
  super.connectedCallback(), this.direction = "column", this.directionMobile = "column", this.directionTablet = "column", this.directionLaptop = "column", this.directionDesktop = "column";
986
1041
  }
987
1042
  }
988
- customElements.get("px-vstack") || customElements.define("px-vstack", Z);
989
- class W extends m {
1043
+ customElements.get("px-vstack") || customElements.define("px-vstack", V);
1044
+ class tt extends v {
990
1045
  constructor() {
991
1046
  super();
992
1047
  }
@@ -994,21 +1049,21 @@ class W extends m {
994
1049
  super.connectedCallback(), this.direction = "row", this.directionMobile = "row", this.directionTablet = "row", this.directionLaptop = "row", this.directionDesktop = "row";
995
1050
  }
996
1051
  }
997
- customElements.get("px-hstack") || customElements.define("px-hstack", W);
998
- class Y extends HTMLElement {
1052
+ customElements.get("px-hstack") || customElements.define("px-hstack", tt);
1053
+ class et extends HTMLElement {
999
1054
  constructor() {
1000
1055
  super(), this.isZeroSized = !1, this.growValue = "1", this.isVertical = !1;
1001
1056
  }
1002
1057
  static get observedAttributes() {
1003
- return ["grow"];
1058
+ return ["grow", "nogap"];
1004
1059
  }
1005
- attributeChangedCallback(t, r, e) {
1060
+ attributeChangedCallback(t, i, e) {
1006
1061
  t === "grow" && (this.growValue = e || "1", this.isZeroSized || (this.style.flexGrow = this.growValue), this.scheduleRecheck());
1007
1062
  }
1008
1063
  connectedCallback() {
1009
- this.growValue = this.getAttribute("grow") || "1", this.style.flexGrow = this.growValue, this.resizeObserver = new ResizeObserver(() => {
1064
+ this.growValue = this.getAttribute("grow") || "1", this.style.flexGrow = this.growValue, this.nogap && (this.resizeObserver = new ResizeObserver(() => {
1010
1065
  this.handleSizeChange();
1011
- }), this.isVertical = this.parentElement.localName === "px-vstack" || this.parentElement.style.flexDirection === "column", this.resizeObserver.observe(this), this.scheduleRecheck();
1066
+ }), this.isVertical = this.parentElement.localName === "px-vstack" || this.parentElement.style.flexDirection === "column", this.resizeObserver.observe(this), this.scheduleRecheck());
1012
1067
  }
1013
1068
  disconnectedCallback() {
1014
1069
  var t;
@@ -1029,19 +1084,25 @@ class Y extends HTMLElement {
1029
1084
  this.isConnected && (this.style.display = "", this.style.flexGrow = this.growValue, this.handleSizeChange());
1030
1085
  }
1031
1086
  handleSizeChange() {
1032
- const t = this.getBoundingClientRect(), r = t.width === 0 && !this.isVertical || t.height === 0 && this.isVertical;
1033
- this.isZeroSized !== r && (this.isZeroSized = r, this.updateParticipation());
1087
+ const t = this.getBoundingClientRect(), i = t.width === 0 && !this.isVertical || t.height === 0 && this.isVertical;
1088
+ this.isZeroSized !== i && (this.isZeroSized = i, this.updateParticipation());
1034
1089
  }
1035
1090
  updateParticipation() {
1036
1091
  this.isZeroSized ? (this.style.display = "none", this.style.flexGrow = "0") : (this.style.display = "", this.style.flexGrow = this.growValue);
1037
1092
  }
1093
+ get nogap() {
1094
+ return this.hasAttribute("nogap");
1095
+ }
1096
+ set nogap(t) {
1097
+ t ? this.setAttribute("nogap", "") : this.removeAttribute("nogap");
1098
+ }
1038
1099
  }
1039
- customElements.get("px-spacer") || customElements.define("px-spacer", Y);
1040
- const J = ":host{display:block;box-sizing:border-box}slot[name=body-container]{min-height:100vh}#image-sticky-box{margin-top:-2.5em}", C = new CSSStyleSheet();
1041
- C.replaceSync(J);
1042
- class K extends $ {
1100
+ customElements.get("px-spacer") || customElements.define("px-spacer", et);
1101
+ const it = ":host{display:block;box-sizing:border-box}slot[name=body-container]{min-height:100vh}#image-sticky-box{margin-top:-2.5em}", I = new CSSStyleSheet();
1102
+ I.replaceSync(it);
1103
+ class ot extends C {
1043
1104
  constructor() {
1044
- super(C), this.template = (t) => `
1105
+ super(I), this.template = (t) => `
1045
1106
  <px-container border-radius="none" padding="none">
1046
1107
  <px-vstack>
1047
1108
  <px-container id="header-container" border-radius="none">
@@ -1206,8 +1267,8 @@ class K extends $ {
1206
1267
  connectedCallback() {
1207
1268
  this.handlePaddingVerticalChange(this.paddingVertical), this.handlePaddingHorizontalChange(this.paddingHorizontal);
1208
1269
  }
1209
- attributeChangedCallback(t, r, e) {
1210
- if (r !== e)
1270
+ attributeChangedCallback(t, i, e) {
1271
+ if (i !== e)
1211
1272
  switch (t) {
1212
1273
  case "background-image":
1213
1274
  this.$imageContainer.setAttribute("background-image", e);
@@ -1218,7 +1279,7 @@ class K extends $ {
1218
1279
  case "background-color":
1219
1280
  this.$bodyContainer.setAttribute(
1220
1281
  "background-color",
1221
- c.indexOf(e) > 0 ? e : "none"
1282
+ u.indexOf(e) > 0 ? e : "none"
1222
1283
  );
1223
1284
  break;
1224
1285
  case "padding-vertical":
@@ -1228,7 +1289,7 @@ class K extends $ {
1228
1289
  this.handlePaddingHorizontalChange(e);
1229
1290
  break;
1230
1291
  default:
1231
- super.attributeChangedCallback(t, r, e);
1292
+ super.attributeChangedCallback(t, i, e);
1232
1293
  }
1233
1294
  }
1234
1295
  handlePaddingVerticalChange(t) {
@@ -1238,14 +1299,14 @@ class K extends $ {
1238
1299
  this.$headerContainer.paddingLeft = t, this.$headerContainer.paddingRight = t, this.$bodyContainer.paddingLeft = t, this.$bodyContainer.paddingRight = t, this.$contactContainer.paddingLeft = t, this.$contactContainer.paddingRight = t, this.$footerContainer.paddingLeft = t, this.$footerContainer.paddingRight = t, this.$imageContainer.paddingLeft = t, this.$imageContainer.paddingRight = t;
1239
1300
  }
1240
1301
  }
1241
- customElements.get("px-page") === void 0 && customElements.define("px-page", K);
1242
- const T = new CSSStyleSheet();
1243
- T.replaceSync(H);
1244
- class Q extends HTMLElement {
1302
+ customElements.get("px-page") === void 0 && customElements.define("px-page", ot);
1303
+ const M = new CSSStyleSheet();
1304
+ M.replaceSync(F);
1305
+ class rt extends HTMLElement {
1245
1306
  constructor() {
1246
1307
  super(), this.template = () => `
1247
- <px-container border-radius="none" padding-inline="none" background-color="${this.backgroundColor}">
1248
- <div class="content-wrapper ${this.$slotOverlap ? "overlapped" : ""}">
1308
+ <px-container border-radius="none" padding-inline="none">
1309
+ <div class="content-wrapper">
1249
1310
  <px-vstack gap="heading-to-content">
1250
1311
  <slot name="heading"></slot>
1251
1312
  <px-vstack gap="none">
@@ -1257,9 +1318,10 @@ class Q extends HTMLElement {
1257
1318
  <div class="content-wrapper">
1258
1319
  <slot name="overlap"></slot>
1259
1320
  </div>
1260
- `, this.attachShadow({ mode: "open" }), this.shadowRoot.innerHTML = this.template(), this.shadowRoot.adoptedStyleSheets = [T];
1321
+ `, this.attachShadow({ mode: "open" }), this.shadowRoot.innerHTML = this.template(), this.shadowRoot.adoptedStyleSheets = [M];
1261
1322
  }
1262
1323
  connectedCallback() {
1324
+ this.$container.setAttribute("background-color", this.backgroundColor), this.$slotOverlap && this.shadowRoot.firstElementChild.querySelector(".content-wrapper").classList.add("overlapped");
1263
1325
  const t = this.querySelector('[slot="heading"]');
1264
1326
  !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"), t || this.shadowRoot.querySelector("px-vstack").setAttribute("gap", "none");
1265
1327
  }
@@ -1295,11 +1357,11 @@ class Q extends HTMLElement {
1295
1357
  get $container() {
1296
1358
  return this.shadowRoot.querySelector("px-container");
1297
1359
  }
1298
- attributeChangedCallback(t, r, e) {
1299
- if (r !== e)
1360
+ attributeChangedCallback(t, i, e) {
1361
+ if (i !== e)
1300
1362
  switch (t) {
1301
1363
  case "background-color":
1302
- this.$container.backgroundColor = c.indexOf(e) > 0 ? e : "none";
1364
+ this.$container.backgroundColor = u.indexOf(e) > 0 ? e : "none";
1303
1365
  break;
1304
1366
  case "background-gradient":
1305
1367
  this.$container.gradient = this.gradient;
@@ -1529,29 +1591,338 @@ class Q extends HTMLElement {
1529
1591
  this.setAttribute("border-side--laptop", t);
1530
1592
  }
1531
1593
  }
1532
- customElements.get("px-section") || customElements.define("px-section", Q);
1533
- const L = new CSSStyleSheet();
1534
- L.replaceSync(O);
1535
- const f = class f extends v {
1594
+ customElements.get("px-section") || customElements.define("px-section", rt);
1595
+ const at = ":host{display:block;--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}.grid{display: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)}.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 only screen and (max-width: 767px){.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 only screen and (min-width: 48em) and (max-width: 64em){.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 only screen and (min-width: 64.0625em){.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}}", B = new CSSStyleSheet();
1596
+ B.replaceSync(at);
1597
+ const nt = [
1598
+ "1",
1599
+ "2",
1600
+ "3",
1601
+ "4",
1602
+ "5",
1603
+ "6",
1604
+ "7",
1605
+ "8",
1606
+ "9",
1607
+ "10",
1608
+ "11",
1609
+ "12"
1610
+ ], st = [
1611
+ "",
1612
+ "start",
1613
+ "end",
1614
+ "center",
1615
+ "space-between",
1616
+ "space-around",
1617
+ "space-evenly",
1618
+ "stretch"
1619
+ ], dt = ["", "start", "end", "center", "stretch"], lt = (s, t, i) => `:host([${s}${i ? `--${i}` : ""}='${t}']) .grid`, ct = "px-spacing", gt = d(
1620
+ "gap",
1621
+ lt,
1622
+ w,
1623
+ ct,
1624
+ "--grid-gap"
1625
+ ), x = class x extends S {
1536
1626
  constructor() {
1537
- super(L), this.template = () => `<div class="content-header">
1627
+ super(B, gt), this.template = () => `<div class="grid">
1628
+ <slot></slot>
1629
+ </div>`, this.shadowRoot.innerHTML = this.template();
1630
+ }
1631
+ static get observedAttributes() {
1632
+ return [
1633
+ ...super.observedAttributes,
1634
+ "grid-cols",
1635
+ "grid-cols--mobile",
1636
+ "grid-cols--tablet",
1637
+ "grid-cols--laptop",
1638
+ "justify-content",
1639
+ "justify-items",
1640
+ "align-content",
1641
+ "align-items",
1642
+ "justify-content--mobile",
1643
+ "justify-items--mobile",
1644
+ "align-content--mobile",
1645
+ "align-items--mobile",
1646
+ "justify-content--tablet",
1647
+ "justify-items--tablet",
1648
+ "align-content--tablet",
1649
+ "align-items--tablet",
1650
+ "justify-content--laptop",
1651
+ "justify-items--laptop",
1652
+ "align-content--laptop",
1653
+ "align-items--laptop",
1654
+ "justify-content--desktop",
1655
+ "justify-items--desktop",
1656
+ "align-content--desktop",
1657
+ "align-items--desktop"
1658
+ ];
1659
+ }
1660
+ connectedCallback() {
1661
+ this.gap || (this.gap = "default"), this.alignItems || (this.alignItems = "stretch");
1662
+ }
1663
+ attributeChangedCallback(t, i, e) {
1664
+ if (i !== e)
1665
+ switch (t) {
1666
+ case "grid-cols":
1667
+ case "grid-cols--mobile":
1668
+ case "grid-cols--tablet":
1669
+ case "grid-cols--laptop":
1670
+ this.updateAttribute(t, i, e, nt);
1671
+ break;
1672
+ case "justify-content":
1673
+ case "align-content":
1674
+ case "justify-content--mobile":
1675
+ case "align-content--mobile":
1676
+ case "justify-content--tablet":
1677
+ case "align-content--tablet":
1678
+ case "justify-content--laptop":
1679
+ case "align-content--laptop":
1680
+ case "justify-content--desktop":
1681
+ case "align-content--desktop":
1682
+ this.updateAttribute(
1683
+ t,
1684
+ i,
1685
+ e,
1686
+ st
1687
+ );
1688
+ break;
1689
+ case "justify-items":
1690
+ case "align-items":
1691
+ case "justify-items--mobile":
1692
+ case "align-items--mobile":
1693
+ case "justify-items--tablet":
1694
+ case "align-items--tablet":
1695
+ case "justify-items--laptop":
1696
+ case "align-items--laptop":
1697
+ case "justify-items--desktop":
1698
+ case "align-items--desktop":
1699
+ this.updateAttribute(
1700
+ t,
1701
+ i,
1702
+ e,
1703
+ dt
1704
+ );
1705
+ break;
1706
+ default:
1707
+ super.attributeChangedCallback(t, i, e);
1708
+ break;
1709
+ }
1710
+ }
1711
+ updateGap(t, i, e) {
1712
+ if (!this.checkName(e, i)) {
1713
+ n(
1714
+ `${i} is not an allowed gap value for ${this.tagName.toLowerCase()}`
1715
+ );
1716
+ return;
1717
+ }
1718
+ const o = (r) => {
1719
+ r !== null && r !== "" && r !== "default" && (this.$el.style.setProperty(
1720
+ "--grid-gap--mobile",
1721
+ `var(--px-spacing-${r}-mobile)`
1722
+ ), this.$el.style.setProperty(
1723
+ "--grid-gap--tablet",
1724
+ `var(--px-spacing-${r}-tablet)`
1725
+ ), this.$el.style.setProperty(
1726
+ "--grid-gap--laptop",
1727
+ `var(--px-spacing-${r}-laptop)`
1728
+ ));
1729
+ };
1730
+ o(t), o(i);
1731
+ }
1732
+ updateAttribute(t, i, e, o) {
1733
+ this.checkName(o, e) ? t === "grid-cols" || t === "grid-cols--mobile" || t === "grid-cols--tablet" || t === "grid-cols--laptop" || t === "grid-cols--desktop" ? this.$el.style.setProperty(`--${t}`, e) : (i !== null && i !== "" && i !== "default" && this.$el.classList.toggle(`${t}-${i}`), e !== null && e !== "" && e !== "default" && this.$el.classList.toggle(`${t}-${e}`)) : n(
1734
+ `${e} is not an allowed ${t} value for ${this.tagName.toLowerCase()}`
1735
+ );
1736
+ }
1737
+ get gap() {
1738
+ return this.getAttribute("gap");
1739
+ }
1740
+ set gap(t) {
1741
+ this.setAttribute("gap", t);
1742
+ }
1743
+ get gapMobile() {
1744
+ return this.getAttribute("gap--mobile");
1745
+ }
1746
+ set gapMobile(t) {
1747
+ this.setAttribute("gap--mobile", t);
1748
+ }
1749
+ get gapTablet() {
1750
+ return this.getAttribute("gap--tablet");
1751
+ }
1752
+ set gapTablet(t) {
1753
+ this.setAttribute("gap--tablet", t);
1754
+ }
1755
+ get gapLaptop() {
1756
+ return this.getAttribute("gap--laptop");
1757
+ }
1758
+ set gapLaptop(t) {
1759
+ this.setAttribute("gap--laptop", t);
1760
+ }
1761
+ get gridCols() {
1762
+ return this.getAttribute("grid-cols");
1763
+ }
1764
+ set gridCols(t) {
1765
+ this.setAttribute("grid-cols", t);
1766
+ }
1767
+ get gridColsMobile() {
1768
+ return this.getAttribute("grid-cols--mobile");
1769
+ }
1770
+ set gridColsMobile(t) {
1771
+ this.setAttribute("grid-cols--mobile", t);
1772
+ }
1773
+ get gridColsTablet() {
1774
+ return this.getAttribute("grid-cols--tablet");
1775
+ }
1776
+ set gridColsTablet(t) {
1777
+ this.setAttribute("grid-cols--tablet", t);
1778
+ }
1779
+ get gridColsLaptop() {
1780
+ return this.getAttribute("grid-cols--laptop");
1781
+ }
1782
+ set gridColsLaptop(t) {
1783
+ this.setAttribute("grid-cols--laptop", t);
1784
+ }
1785
+ get justifyContent() {
1786
+ return this.getAttribute("justify-content");
1787
+ }
1788
+ set justifyContent(t) {
1789
+ this.setAttribute("justify-content", t);
1790
+ }
1791
+ get justifyItems() {
1792
+ return this.getAttribute("justify-items");
1793
+ }
1794
+ set justifyItems(t) {
1795
+ this.setAttribute("justify-items", t);
1796
+ }
1797
+ get alignContent() {
1798
+ return this.getAttribute("align-content");
1799
+ }
1800
+ set alignContent(t) {
1801
+ this.setAttribute("align-content", t);
1802
+ }
1803
+ get alignItems() {
1804
+ return this.getAttribute("align-items");
1805
+ }
1806
+ set alignItems(t) {
1807
+ this.setAttribute("align-items", t);
1808
+ }
1809
+ get justifyContentMobile() {
1810
+ return this.getAttribute("justify-content--mobile");
1811
+ }
1812
+ set justifyContentMobile(t) {
1813
+ this.setAttribute("justify-content--mobile", t);
1814
+ }
1815
+ get justifyItemsMobile() {
1816
+ return this.getAttribute("justify-items--mobile");
1817
+ }
1818
+ set justifyItemsMobile(t) {
1819
+ this.setAttribute("justify-items--mobile", t);
1820
+ }
1821
+ get alignContentMobile() {
1822
+ return this.getAttribute("align-content--mobile");
1823
+ }
1824
+ set alignContentMobile(t) {
1825
+ this.setAttribute("align-content--mobile", t);
1826
+ }
1827
+ get alignItemsMobile() {
1828
+ return this.getAttribute("align-items--mobile");
1829
+ }
1830
+ set alignItemsMobile(t) {
1831
+ this.setAttribute("align-items--mobile", t);
1832
+ }
1833
+ get justifyContentTablet() {
1834
+ return this.getAttribute("justify-content--tablet");
1835
+ }
1836
+ set justifyContentTablet(t) {
1837
+ this.setAttribute("justify-content--tablet", t);
1838
+ }
1839
+ get justifyItemsTablet() {
1840
+ return this.getAttribute("justify-items--tablet");
1841
+ }
1842
+ set justifyItemsTablet(t) {
1843
+ this.setAttribute("justify-items--tablet", t);
1844
+ }
1845
+ get alignContentTablet() {
1846
+ return this.getAttribute("align-content--tablet");
1847
+ }
1848
+ set alignContentTablet(t) {
1849
+ this.setAttribute("align-content--tablet", t);
1850
+ }
1851
+ get alignItemsTablet() {
1852
+ return this.getAttribute("align-items--tablet");
1853
+ }
1854
+ set alignItemsTablet(t) {
1855
+ this.setAttribute("align-items--tablet", t);
1856
+ }
1857
+ get justifyContentLaptop() {
1858
+ return this.getAttribute("justify-content--laptop");
1859
+ }
1860
+ set justifyContentLaptop(t) {
1861
+ this.setAttribute("justify-content--laptop", t);
1862
+ }
1863
+ get justifyItemsLaptop() {
1864
+ return this.getAttribute("justify-items--laptop");
1865
+ }
1866
+ set justifyItemsLaptop(t) {
1867
+ this.setAttribute("justify-items--laptop", t);
1868
+ }
1869
+ get alignContentLaptop() {
1870
+ return this.getAttribute("align-content--laptop");
1871
+ }
1872
+ set alignContentLaptop(t) {
1873
+ this.setAttribute("align-content--laptop", t);
1874
+ }
1875
+ get alignItemsLaptop() {
1876
+ return this.getAttribute("align-items--laptop");
1877
+ }
1878
+ set alignItemsLaptop(t) {
1879
+ this.setAttribute("align-items--laptop", t);
1880
+ }
1881
+ get justifyContentDesktop() {
1882
+ return this.getAttribute("justify-content--desktop");
1883
+ }
1884
+ set justifyContentDesktop(t) {
1885
+ this.setAttribute("justify-content--desktop", t);
1886
+ }
1887
+ get justifyItemsDesktop() {
1888
+ return this.getAttribute("justify-items--desktop");
1889
+ }
1890
+ set justifyItemsDesktop(t) {
1891
+ this.setAttribute("justify-items--desktop", t);
1892
+ }
1893
+ get alignContentDesktop() {
1894
+ return this.getAttribute("align-content--desktop");
1895
+ }
1896
+ set alignContentDesktop(t) {
1897
+ this.setAttribute("align-content--desktop", t);
1898
+ }
1899
+ get alignItemsDesktop() {
1900
+ return this.getAttribute("align-items--desktop");
1901
+ }
1902
+ set alignItemsDesktop(t) {
1903
+ this.setAttribute("align-items--desktop", t);
1904
+ }
1905
+ };
1906
+ x.nativeName = "div";
1907
+ let f = x;
1908
+ customElements.get("px-grid") || customElements.define("px-grid", f);
1909
+ const z = new CSSStyleSheet();
1910
+ z.replaceSync(X);
1911
+ const A = class A extends S {
1912
+ constructor() {
1913
+ super(z), this.template = () => `<div class="content-header">
1538
1914
  <div class="contrast-helper"></div>
1539
1915
  <px-section padding-block="l">
1540
- <px-grid gap="none">
1541
- <px-container padding="none" border-radius="none" background-color="none" >
1542
- <div class="content-header-content">
1543
- <px-vstack gap="heading-to-subtitle">
1544
- <px-h1 variant="title-3xl"><slot></slot></px-h1>
1545
- <slot name="subtitle"></slot>
1546
- </px-vstack>
1547
- ${this.$patchDescriptionSlot ? `<px-stack gap="s" direction="row" direction--mobile="column">
1548
- <slot name="patch" shrink></slot>
1549
- <slot name="patch-description"></slot>
1550
- </px-stack>` : ""}
1551
- </div>
1552
- </px-container>
1553
- </px-grid>
1554
- ${this.$overlapSlot ? '<slot name="overlap" slot="overlap"></slot>' : ""}
1916
+ <px-grid gap="none">
1917
+ <px-container padding="none" border-radius="none" background-color="none" >
1918
+ <div class="content-header-content">
1919
+ <px-vstack gap="heading-to-subtitle">
1920
+ <px-h1><slot></slot></px-h1>
1921
+ <slot name="subtitle"></slot>
1922
+ </px-vstack>
1923
+ </div>
1924
+ </px-container>
1925
+ </px-grid>
1555
1926
  </px-section>
1556
1927
  </div>`, this.shadowRoot.innerHTML = this.template();
1557
1928
  }
@@ -1576,17 +1947,27 @@ const f = class f extends v {
1576
1947
  ];
1577
1948
  }
1578
1949
  connectedCallback() {
1579
- var t;
1580
- (t = super.connectedCallback) == null || t.call(this), this.$subtitleSlot && this.$subtitleSlot.setAttribute("variant", "subtitle"), this.$patchDescriptionSlot && (this.$patchDescriptionSlot.localName === "px-p" && this.$patchDescriptionSlot.setAttribute("variant", "default"), (this.$patchDescriptionSlot.localName === "px-p" || this.$patchDescriptionSlot.localName === "px-span") && (this.$patchDescriptionSlot.setAttribute("font-size", "body-l"), this.$patchDescriptionSlot.removeAttribute("font-weight"), this.$patchDescriptionSlot.removeAttribute("color")), this.$patchDescriptionSlot.localName === "px-price" && this.$patchDescriptionSlot.setAttribute("size", "m")), this.createGridding();
1581
- }
1582
- attributeChangedCallback(t, r, e) {
1583
- if (r !== e)
1950
+ this.$patchDescriptionSlot && this.shadowRoot.querySelector(
1951
+ ".content-header-content"
1952
+ ).insertAdjacentHTML(
1953
+ "beforeend",
1954
+ `<px-stack gap="s" direction="row" direction--mobile="column">
1955
+ <slot name="patch" shrink></slot>
1956
+ <slot name="patch-description"></slot>
1957
+ </px-stack>`
1958
+ ), this.$overlapSlot && this.shadowRoot.querySelector("px-section").insertAdjacentHTML(
1959
+ "beforeend",
1960
+ '<slot name="overlap" slot="overlap"></slot>'
1961
+ ), this.$subtitleSlot && this.$subtitleSlot.setAttribute("variant", "subtitle"), this.$patchDescriptionSlot && (this.$patchDescriptionSlot.localName === "px-p" && this.$patchDescriptionSlot.setAttribute("variant", "default"), (this.$patchDescriptionSlot.localName === "px-p" || this.$patchDescriptionSlot.localName === "px-span") && (this.$patchDescriptionSlot.setAttribute("font-size", "body-l"), this.$patchDescriptionSlot.removeAttribute("font-weight"), this.$patchDescriptionSlot.removeAttribute("color")), this.$patchDescriptionSlot.localName === "px-price" && this.$patchDescriptionSlot.setAttribute("size", "m")), this.createGridding();
1962
+ }
1963
+ attributeChangedCallback(t, i, e) {
1964
+ if (i !== e)
1584
1965
  switch (t) {
1585
1966
  case "background-color":
1586
- this.$section.backgroundColor = c.indexOf(e) > 0 ? e : "none";
1967
+ this.$section.backgroundColor = u.indexOf(e) > 0 ? e : "none";
1587
1968
  break;
1588
1969
  case "background-gradient":
1589
- this.$section.gradient = A.indexOf(e) > 0 ? e : "none";
1970
+ this.$section.gradient = j.indexOf(e) > 0 ? e : "none";
1590
1971
  break;
1591
1972
  case "background-image":
1592
1973
  this.$section.backgroundImage = e;
@@ -1601,7 +1982,7 @@ const f = class f extends v {
1601
1982
  this.$section.backgroundImageLaptop = e;
1602
1983
  break;
1603
1984
  case "background-size":
1604
- this.$section.backgroundSize = x.indexOf(e) > 0 ? e : "";
1985
+ this.$section.backgroundSize = $.indexOf(e) > 0 ? e : "";
1605
1986
  break;
1606
1987
  case "background-position":
1607
1988
  this.$section.backgroundPosition = e;
@@ -1610,7 +1991,7 @@ const f = class f extends v {
1610
1991
  case "has-gridding--mobile":
1611
1992
  case "has-gridding--tablet":
1612
1993
  case "has-gridding--laptop":
1613
- this.createGridding();
1994
+ this.createGridding(e);
1614
1995
  break;
1615
1996
  case "inverted":
1616
1997
  for (let o = 0; o < this.$children.length; o++)
@@ -1618,33 +1999,35 @@ const f = class f extends v {
1618
1999
  this.$h1.toggleAttribute("inverted", e !== null), this.$el.toggleAttribute("inverted", e !== null);
1619
2000
  break;
1620
2001
  default:
1621
- super.attributeChangedCallback(t, r, e);
2002
+ super.attributeChangedCallback(t, i, e);
1622
2003
  break;
1623
2004
  }
1624
2005
  }
1625
- createGridding() {
1626
- const t = [
1627
- { prop: "hasGridding", gridProp: "gridCols", attr: "col-span" },
2006
+ createGridding(t) {
2007
+ const i = [
2008
+ { prop: "hasGridding", gridAttr: "grid-cols", attr: "col-span" },
1628
2009
  {
1629
2010
  prop: "hasGriddingMobile",
1630
- gridProp: "gridColsMobile",
2011
+ gridAttr: "grid-cols--mobile",
1631
2012
  attr: "col-span--mobile"
1632
2013
  },
1633
2014
  {
1634
2015
  prop: "hasGriddingTablet",
1635
- gridProp: "gridColsTablet",
2016
+ gridAttr: "grid-cols--tablet",
1636
2017
  attr: "col-span--tablet"
1637
2018
  },
1638
2019
  {
1639
2020
  prop: "hasGriddingLaptop",
1640
- gridProp: "gridColsLaptop",
2021
+ gridAttr: "grid-cols--laptop",
1641
2022
  attr: "col-span--laptop"
1642
2023
  }
1643
- ], r = this.shadowRoot.querySelector(
2024
+ ], e = this.shadowRoot.querySelector(
1644
2025
  "px-grid > px-container"
1645
2026
  );
1646
- t.forEach(({ prop: e, gridProp: o, attr: i }) => {
1647
- this[e] && (this.$grid[o] = "3", r.setAttribute(i, "2"));
2027
+ t !== null ? i.forEach(({ prop: o, gridAttr: r, attr: a }) => {
2028
+ this[o] && (this.$grid.setAttribute(r, "3"), e == null || e.setAttribute(a, "2"));
2029
+ }) : i.forEach(({ gridAttr: o, attr: r }) => {
2030
+ this.$grid.setAttribute(o, "1"), e == null || e.setAttribute(r, "1");
1648
2031
  });
1649
2032
  }
1650
2033
  get $grid() {
@@ -1765,9 +2148,9 @@ const f = class f extends v {
1765
2148
  t ? this.setAttribute("min-height", "") : this.removeAttribute("min-height");
1766
2149
  }
1767
2150
  };
1768
- f.nativeName = "div";
1769
- let h = f;
1770
- customElements.get("px-content-header") || customElements.define("px-content-header", h);
2151
+ A.nativeName = "div";
2152
+ let k = A;
2153
+ customElements.get("px-content-header") || customElements.define("px-content-header", k);
1771
2154
  export {
1772
- h as ContentHeader
2155
+ k as ContentHeader
1773
2156
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@proximus/lavender-content-header",
3
- "version": "2.0.0-alpha.5",
3
+ "version": "2.0.0-alpha.51",
4
4
  "description": "",
5
5
  "main": "dist/index.es.js",
6
6
  "types": "dist/index.d.ts",
@@ -13,7 +13,7 @@
13
13
  "clean": "rm -rf dist",
14
14
  "build": "npm run clean && NODE_ENV=development vite build && tsc && npm run transform-package-json && npm run wc-manifest",
15
15
  "test": "vitest run --coverage",
16
- "wc-manifest": "cem analyze --globs \"src/*\" --config ../custom-elements-manifest.config.js --outdir dist"
16
+ "wc-manifest": "cem analyze --globs \"src/*\" --config ../../custom-elements-manifest.config.js --outdir dist"
17
17
  },
18
18
  "publishConfig": {
19
19
  "access": "public"