@proximus/lavender-content-header 2.0.0-alpha.16 → 2.0.0-alpha.161

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 -0
  2. package/dist/index.es.js +354 -142
  3. package/package.json +2 -2
package/dist/ContentHeader.d.ts CHANGED
@@ -14,12 +14,17 @@ export declare class ContentHeader extends PxElement<HTMLDivElement> {
14
14
  static get observedAttributes(): string[];
15
15
  connectedCallback(): void;
16
16
  attributeChangedCallback(attrName: string, oldValue: string, newValue: string): void;
17
+ disconnectedCallback(): void;
18
+ stylepatchDescriptionSlotted(): void;
19
+ styleSubtitleSlot(): void;
17
20
  createGridding(value?: string): void;
18
21
  get $grid(): Grid;
19
22
  get $section(): Section;
20
23
  get $h1(): H1;
21
24
  get $subtitleSlot(): HTMLSlotElement;
25
+ get $subtitleSlotted(): HTMLSlotElement;
22
26
  get $patchDescriptionSlot(): HTMLSlotElement;
27
+ get $patchDescriptionSlotted(): HTMLSlotElement;
23
28
  get $overlapSlot(): HTMLSlotElement;
24
29
  get $children(): NodeListOf<Element>;
25
30
  get backgroundColor(): string;
@@ -50,6 +55,8 @@ export declare class ContentHeader extends PxElement<HTMLDivElement> {
50
55
  set hasGriddingTablet(value: boolean);
51
56
  get hasGriddingLaptop(): boolean;
52
57
  set hasGriddingLaptop(value: boolean);
58
+ get hasGriddingDesktop(): boolean;
59
+ set hasGriddingDesktop(value: boolean);
53
60
  get inverted(): boolean;
54
61
  set inverted(value: boolean);
55
62
  get minHeight(): boolean;
package/dist/index.es.js CHANGED
@@ -1,61 +1,88 @@
1
- import { cssTokenBreakpoints as d, paddingValues as l, VerticallyExtendedElement as R, boxShadowValues as P, backgroundSizeValues as A, noBorderRadiusValues as D, borderRadiusValues as H, borderSideValues as O, borderValues as E, gradientValues as $, log as n, backgroundColorValues as u, borderColorValues as q, checkName as j, WithExtraAttributes as C, AttributeBreakpointHandlerDelegate as G, gapValues as w, PxElement as S } from "@proximus/lavender-common";
1
+ import { cssTokenBreakpoints as d, paddingValues as g, gapValues as x, WithExtraAttributes as m, boxShadowValues as D, backgroundSizeValues as C, noBorderRadiusValues as P, borderRadiusValues as E, borderSideValues as O, borderValues as H, gradientValues as f, log as s, backgroundColorValues as u, borderColorValues as S, checkName as h, AttributeBreakpointHandlerDelegate as G, PxElement as L } from "@proximus/lavender-common";
2
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)}}', _ = ':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}}', L = new CSSStyleSheet();
4
- L.replaceSync(_);
5
- const b = (s, t, i) => `:host([${s}${i ? `--${i}` : ""}='${t}']) .container`, g = "px-padding", N = [
3
+ const q = ':host{--min-height--mobile: 15.625rem;--min-height--tablet: 17.5rem;--min-height--laptop: 17.5rem;--min-height--desktop: 17.5rem}: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;z-index:2;position:relative;box-sizing:border-box}.content-header-content ::slotted([slot="patch"]){margin-top:var(--px-spacing-l-mobile)}.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 screen and (min-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 (min-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 (min-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))}}', N = ':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 (min-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 (min-width: 48rem){.overlapped{margin-bottom:calc(var(--px-overlapped-desktop) * -1)}::slotted([slot="overlap"]){margin-top:var(--px-overlapped-desktop)}}@media screen and (min-width: 64.0625rem){.overlapped{margin-bottom:calc(var(--px-overlapped-desktop) * -1)}::slotted([slot="overlap"]){margin-top:var(--px-overlapped-desktop)}}', 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-right-style:none;border-left-style:none}.border-side-right{border-top-style:none;border-bottom-style:none;border-left-style:none}.border-side-bottom{border-top-style:none;border-right-style:none;border-left-style:none}.border-side-left{border-top-style:none;border-right-style:none;border-bottom-style:none}.border-side-block{border-inline-style:none}.border-side-inline{border-block-style:none}:host([inverted]) .border-s,:host([inverted]) .border-m,:host([inverted]) .border-l{border-color:var(--border-color-inverted)}.border-radius-main{border-radius:var(--px-radius-main)}.border-radius-pill{border-radius:var(--px-radius-pill)}.no-border-radius-top{border-top-left-radius:var(--px-radius-none);border-top-right-radius:var(--px-radius-none)}.no-border-radius-right{border-top-right-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-bottom{border-bottom-left-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-left{border-top-left-radius:var(--px-radius-none);border-bottom-left-radius:var(--px-radius-none)}.no-border-radius-all,.border-radius-none{border-radius:var(--px-radius-none)}.bgimg{background-repeat:no-repeat}.background-size-cover{background-size:cover;background-position:center center}.background-size-contain{background-size:contain}.box-shadow-none{box-shadow:none}.box-shadow-s{box-shadow:0 1px 2px #2525251f}.box-shadow-m{box-shadow:0 4px 6px -1px #25252514}.box-shadow-l{box-shadow:0 10px 15px -3px #25252514}.box-shadow-xl{box-shadow:0 20px 25px -5px #25252514}.anchored{position:relative}::slotted([slot="anchor-right"]),::slotted([slot="anchor-left"]),::slotted([slot="anchor-full"]){position:absolute;top:0}::slotted([slot="anchor-right"]),::slotted([slot="anchor-left"]){transform:translateY(-50%);z-index:3}::slotted([slot="anchor-right"]){right:var( --container-anchor-offset--mobile, var( --container-padding-right, var(--container-padding-inline, var(--container-padding)) ) )}::slotted([slot="anchor-left"]){left:var( --container-anchor-offset--mobile, var( --container-padding-left, var(--container-padding-inline, var(--container-padding)) ) )}::slotted([slot="anchor-full"]){transform:translateY(-100%);right:0;left:0;text-align:center;z-index:2}::slotted(px-vstack:only-of-type),::slotted(px-hstack:only-of-type),::slotted(px-stack:only-of-type),::slotted(px-grid:only-of-type){height:100%}:host([anchor-spacing]){margin-top:var(--container-anchor-spacing--mobile)}.border-s ::slotted([slot="anchor-full"]){right:calc(var(--px-size-border-s) * -1);left:calc(var(--px-size-border-s) * -1)}.border-m ::slotted([slot="anchor-full"]){right:calc(var(--px-size-border-m) * -1);left:calc(var(--px-size-border-m) * -1)}.border-l ::slotted([slot="anchor-full"]){right:calc(var(--px-size-border-l) * -1);left:calc(var(--px-size-border-l) * -1)}:host([subgrid-rows]){display:contents}:host([subgrid-rows]) .container{display:grid;grid-template-rows:subgrid;grid-row:span var(--subgrid-rows)}: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 (max-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-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)}: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 (min-width: 48rem) and (max-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-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)}: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 (min-width: 64.0625rem) and (max-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 (min-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-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}}@media screen and (min-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)}}', T = new CSSStyleSheet();
4
+ T.replaceSync(X);
5
+ const F = [
6
+ "top-patch",
7
+ "top-neighbor-patch",
8
+ "top-ribbon",
9
+ "top-neighbor-ribbon",
10
+ "top-patch-and-neighbor-ribbon"
11
+ ], _ = [
12
+ "1",
13
+ "2",
14
+ "3",
15
+ "4",
16
+ "5",
17
+ "6",
18
+ "7",
19
+ "8",
20
+ "9",
21
+ "10",
22
+ "11",
23
+ "12"
24
+ ], l = (n, t, i) => `:host([${n}${i ? `--${i}` : ""}='${t}']) .container`, p = "px-padding", Z = [
6
25
  d(
7
26
  "padding",
8
- b,
9
27
  l,
10
28
  g,
29
+ p,
11
30
  "--container-padding"
12
31
  ),
13
32
  d(
14
33
  "padding-inline",
15
- b,
16
34
  l,
17
- g
35
+ g,
36
+ p
18
37
  ),
19
38
  d(
20
39
  "padding-block",
21
- b,
22
40
  l,
23
- g
41
+ g,
42
+ p
24
43
  ),
25
44
  d(
26
45
  "padding-top",
27
- b,
28
46
  l,
29
- g
47
+ g,
48
+ p
30
49
  ),
31
50
  d(
32
51
  "padding-right",
33
- b,
34
52
  l,
35
53
  g,
54
+ p,
36
55
  "--container-padding-right"
37
56
  ),
38
57
  d(
39
58
  "padding-bottom",
40
- b,
41
59
  l,
42
- g
60
+ g,
61
+ p
43
62
  ),
44
63
  d(
45
64
  "padding-left",
46
- b,
47
65
  l,
48
66
  g,
67
+ p,
49
68
  "--container-padding-left"
69
+ ),
70
+ d(
71
+ "gap",
72
+ l,
73
+ x,
74
+ "px-spacing",
75
+ void 0,
76
+ "subgrid-gap"
50
77
  )
51
- ], v = class v extends R {
78
+ ], $ = class $ extends m {
52
79
  constructor() {
53
- super(L, ...N), this.template = () => `<div class="container">
80
+ super(T, ...Z), this.template = () => `<div class="container">
54
81
  <slot></slot>
55
82
  <slot name="anchor-left"></slot>
56
83
  <slot name="anchor-right"></slot>
57
84
  <slot name="anchor-full"></slot>
58
- </div>`, this._bgObserver = null, this._isInViewport = !1, this.shadowRoot.innerHTML = this.template();
85
+ </div>`, this._bgObserver = null, this._isInViewport = !1, this.contentObserver = null, this.shadowRoot.innerHTML = this.template();
59
86
  }
60
87
  static get observedAttributes() {
61
88
  return [
@@ -87,11 +114,13 @@ const b = (s, t, i) => `:host([${s}${i ? `--${i}` : ""}='${t}']) .container`, g
87
114
  "background-position",
88
115
  "box-shadow",
89
116
  "anchor-offset",
90
- "inverted"
117
+ "anchor-spacing",
118
+ "inverted",
119
+ "subgrid-rows"
91
120
  ];
92
121
  }
93
122
  connectedCallback() {
94
- super.connectedCallback(), this.padding || (this.padding = "m"), this.backgroundColor || (this.backgroundColor = "surface-light"), this.borderColor || (this.borderColor = "main"), this.$slotAnchor && this.addAnchorClass(), this.contentObserver = new MutationObserver(() => {
123
+ this.padding || (this.padding = "m"), this.backgroundColor || (this.backgroundColor = "surface-light"), this.borderColor || (this.borderColor = "main"), this.$slotAnchor && this.addAnchorClass(), this.contentObserver = new MutationObserver(() => {
95
124
  this.$slotAnchor && this.addAnchorClass();
96
125
  }), this.contentObserver.observe(this, {
97
126
  childList: !0,
@@ -105,14 +134,14 @@ const b = (s, t, i) => `:host([${s}${i ? `--${i}` : ""}='${t}']) .container`, g
105
134
  }), this._bgObserver.observe(this.$el);
106
135
  }
107
136
  disconnectedCallback() {
108
- var t;
109
- (t = this._bgObserver) == null || t.disconnect(), this.contentObserver.disconnect();
137
+ var t, i;
138
+ (t = this._bgObserver) == null || t.disconnect(), (i = this.contentObserver) == null || i.disconnect();
110
139
  }
111
140
  attributeChangedCallback(t, i, e) {
112
141
  if (i !== e)
113
142
  switch (t) {
114
143
  case "border":
115
- this.updateAttribute(t, i, e, E);
144
+ this.updateAttribute(t, i, e, H);
116
145
  break;
117
146
  case "border-color":
118
147
  this.updateBorderColor(t, e);
@@ -128,7 +157,7 @@ const b = (s, t, i) => `:host([${s}${i ? `--${i}` : ""}='${t}']) .container`, g
128
157
  t,
129
158
  i,
130
159
  e,
131
- H
160
+ E
132
161
  );
133
162
  break;
134
163
  case "no-border-radius":
@@ -139,7 +168,7 @@ const b = (s, t, i) => `:host([${s}${i ? `--${i}` : ""}='${t}']) .container`, g
139
168
  t,
140
169
  i,
141
170
  e,
142
- D
171
+ P
143
172
  );
144
173
  break;
145
174
  case "background-color":
@@ -159,7 +188,7 @@ const b = (s, t, i) => `:host([${s}${i ? `--${i}` : ""}='${t}']) .container`, g
159
188
  t,
160
189
  i,
161
190
  e,
162
- A
191
+ C
163
192
  );
164
193
  break;
165
194
  case "background-image":
@@ -172,10 +201,21 @@ const b = (s, t, i) => `:host([${s}${i ? `--${i}` : ""}='${t}']) .container`, g
172
201
  e !== null && e !== "" && (this.$el.style.backgroundPosition = e);
173
202
  break;
174
203
  case "box-shadow":
175
- this.updateAttribute(t, i, e, P);
204
+ this.updateAttribute(t, i, e, D);
176
205
  break;
177
206
  case "anchor-offset":
178
- this.updateAnchorOffset(i, e, l);
207
+ this.updateAnchorOffset(i, e, g);
208
+ break;
209
+ case "anchor-spacing":
210
+ this.updateAnchorSpacing(i, e, F);
211
+ break;
212
+ case "subgrid-rows":
213
+ this.updateSubgridRows(
214
+ t,
215
+ i,
216
+ e,
217
+ _
218
+ );
179
219
  break;
180
220
  default:
181
221
  super.attributeChangedCallback(t, i, e);
@@ -197,7 +237,7 @@ const b = (s, t, i) => `:host([${s}${i ? `--${i}` : ""}='${t}']) .container`, g
197
237
  this.$el.style.setProperty(`--${t}`, `url("${i}")`);
198
238
  }
199
239
  updateGradient(t, i) {
200
- if (this.checkName($, i)) {
240
+ if (this.checkName(f, i)) {
201
241
  const e = this.splitAttrNameFromBreakpoint(t);
202
242
  t = e.attrName;
203
243
  const o = e.breakpoint;
@@ -206,8 +246,8 @@ const b = (s, t, i) => `:host([${s}${i ? `--${i}` : ""}='${t}']) .container`, g
206
246
  `linear-gradient(var(--px-color-background-gradient-${i}))`
207
247
  );
208
248
  } else
209
- n(
210
- `${i} is not an allowed ${t} value for ${this.tagName.toLowerCase()}`
249
+ s(
250
+ `"${i}" is not a valid ${t} value for ${this.tagName.toLowerCase()}. Allowed values are: "${f.join('", "')}".`
211
251
  );
212
252
  }
213
253
  updateBackgroundColor(t, i) {
@@ -222,25 +262,25 @@ const b = (s, t, i) => `:host([${s}${i ? `--${i}` : ""}='${t}']) .container`, g
222
262
  `var(--px-color-background-${i}${e ? "" : "-inverted"})`
223
263
  );
224
264
  } else
225
- n(
226
- `${i} is not an allowed ${t} value for ${this.tagName.toLowerCase()}`
265
+ s(
266
+ `"${i}" is not a valid ${t} value for ${this.tagName.toLowerCase()}. Allowed values are: "${u.join('", "')}".`
227
267
  );
228
268
  }
229
269
  updateBorderColor(t, i) {
230
- this.checkName(q, i) ? (this.$el.style.setProperty(
270
+ this.checkName(S, i) ? (this.$el.style.setProperty(
231
271
  `--${t}`,
232
272
  `var(--px-color-border-${i}-default)`
233
273
  ), this.$el.style.setProperty(
234
274
  `--${t}-inverted`,
235
275
  `var(--px-color-border-${i}-inverted)`
236
- )) : n(
237
- `${i} is not an allowed ${t} value for ${this.tagName.toLowerCase()}`
276
+ )) : s(
277
+ `"${i}" is not a valid ${t} value for ${this.tagName.toLowerCase()}. Allowed values are: "${S.join('", "')}".`
238
278
  );
239
279
  }
240
280
  updateNoBorderRadius(t, i, e, o) {
241
281
  if (!this.checkName(o, e))
242
- n(
243
- `${e} is not an allowed ${t} value for ${this.tagName.toLowerCase()}`
282
+ s(
283
+ `"${e}" is not a valid ${t} value for ${this.tagName.toLowerCase()}. Allowed values are: "${o.join('", "')}".`
244
284
  );
245
285
  else {
246
286
  const r = this.splitAttrNameFromBreakpoint(t), a = r.breakpoint;
@@ -253,8 +293,8 @@ const b = (s, t, i) => `:host([${s}${i ? `--${i}` : ""}='${t}']) .container`, g
253
293
  }
254
294
  updateAttribute(t, i, e, o) {
255
295
  if (!this.checkName(o, e))
256
- n(
257
- `${e} is not an allowed ${t} value for ${this.tagName.toLowerCase()}`
296
+ s(
297
+ `"${e}" is not a valid ${t} value for ${this.tagName.toLowerCase()}. Allowed values are: "${o.join('", "')}".`
258
298
  );
259
299
  else {
260
300
  const r = this.splitAttrNameFromBreakpoint(t), a = r.breakpoint;
@@ -276,9 +316,9 @@ const b = (s, t, i) => `:host([${s}${i ? `--${i}` : ""}='${t}']) .container`, g
276
316
  return { attrName: t, breakpoint: i };
277
317
  }
278
318
  updateAnchorOffset(t, i, e) {
279
- if (!j(e, i)) {
280
- n(
281
- `${i} is not a valid anchor-offset value for ${this.tagName.toLowerCase()}`
319
+ if (!h(e, i)) {
320
+ s(
321
+ `"${i}" is not a valid anchor-offset value for ${this.tagName.toLowerCase()}. Allowed values are: "${e.join('", "')}".`
282
322
  );
283
323
  return;
284
324
  }
@@ -299,6 +339,39 @@ const b = (s, t, i) => `:host([${s}${i ? `--${i}` : ""}='${t}']) .container`, g
299
339
  addAnchorClass() {
300
340
  this.$el.classList.contains("anchored") || this.$el.classList.add("anchored");
301
341
  }
342
+ updateAnchorSpacing(t, i, e) {
343
+ if (!h(e, i)) {
344
+ s(
345
+ `"${i}" is not a valid anchor-spacing value for ${this.tagName.toLowerCase()}. Allowed values are: "${e.join('", "')}".`
346
+ );
347
+ return;
348
+ }
349
+ const o = (r) => {
350
+ r !== null && r !== "" && r !== "default" && (this.style.setProperty(
351
+ "--container-anchor-spacing--mobile",
352
+ `var(--px-spacing-${r}-mobile)`
353
+ ), this.style.setProperty(
354
+ "--container-anchor-spacing--tablet",
355
+ `var(--px-spacing-${r}-tablet)`
356
+ ), this.style.setProperty(
357
+ "--container-anchor-spacing--laptop",
358
+ `var(--px-spacing-${r}-laptop)`
359
+ ), this.style.setProperty(
360
+ "--container-anchor-spacing--desktop",
361
+ `var(--px-spacing-${r}-desktop)`
362
+ ));
363
+ };
364
+ o(t), o(i);
365
+ }
366
+ updateSubgridRows(t, i, e, o) {
367
+ h(o, e) ? this.style.setProperty(`--${t}`, e) : s(
368
+ `"${e}" is not a valid ${t} value for ${this.tagName.toLowerCase()}. Allowed values are: "${o.join('", "')}".`
369
+ );
370
+ }
371
+ get $el() {
372
+ var t;
373
+ return (t = this == null ? void 0 : this.shadowRoot) == null ? void 0 : t.querySelector(".container");
374
+ }
302
375
  get $slotAnchor() {
303
376
  return this.querySelector('[slot^="anchor"]');
304
377
  }
@@ -632,46 +705,86 @@ const b = (s, t, i) => `:host([${s}${i ? `--${i}` : ""}='${t}']) .container`, g
632
705
  set anchorOffset(t) {
633
706
  this.setAttribute("anchor-offset", t);
634
707
  }
708
+ get anchorSpacing() {
709
+ return this.getAttribute("anchor-spacing");
710
+ }
711
+ set anchorSpacing(t) {
712
+ this.setAttribute("anchor-spacing", t);
713
+ }
635
714
  get inverted() {
636
- return this.getAttribute("inverted");
715
+ return this.hasAttribute("inverted");
637
716
  }
638
717
  set inverted(t) {
639
- this.setAttribute("inverted", t);
718
+ t ? this.setAttribute("inverted", "") : this.removeAttribute("inverted");
719
+ }
720
+ get subgridRows() {
721
+ return this.getAttribute("subgrid-rows");
722
+ }
723
+ set subgridRows(t) {
724
+ this.setAttribute("subgrid-rows", t);
725
+ }
726
+ get subgridGap() {
727
+ return this.getAttribute("subgrid-gap");
728
+ }
729
+ set subgridGap(t) {
730
+ this.setAttribute("subgrid-gap", t);
731
+ }
732
+ get subgridGapMobile() {
733
+ return this.getAttribute("subgrid-gap--mobile");
734
+ }
735
+ set subgridGapMobile(t) {
736
+ this.setAttribute("subgrid-gap--mobile", t);
737
+ }
738
+ get subgridGapTablet() {
739
+ return this.getAttribute("subgrid-gap--tablet");
740
+ }
741
+ set subgridGapTablet(t) {
742
+ this.setAttribute("subgrid-gap--tablet", t);
743
+ }
744
+ get subgridGapLaptop() {
745
+ return this.getAttribute("subgrid-gap--laptop");
746
+ }
747
+ set subgridGapLaptop(t) {
748
+ this.setAttribute("subgrid-gap--laptop", t);
640
749
  }
641
750
  };
642
- v.nativeName = "div";
643
- let h = v;
644
- customElements.get("px-container") || customElements.define("px-container", h);
645
- const Z = ':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))}}', T = new CSSStyleSheet();
646
- T.replaceSync(Z);
647
- const W = [
751
+ $.nativeName = "div";
752
+ let k = $;
753
+ customElements.get("px-container") || customElements.define("px-container", k);
754
+ 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 screen and (max-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 (min-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 (min-width: 48rem) and (max-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 (min-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 (min-width: 64.0625rem) and (max-width: 90rem){.flex-container{overflow-x:var(--overflow-x-all-laptop, var(--overflow-x-all))}}@media screen and (min-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))}}', I = new CSSStyleSheet();
755
+ I.replaceSync(W);
756
+ const Y = [
648
757
  "",
649
758
  "default",
650
759
  "row",
651
760
  "row-reverse",
652
761
  "column",
653
762
  "column-reverse"
654
- ], Y = [
763
+ ], J = [
655
764
  "",
656
765
  "default",
657
766
  "stretch",
658
767
  "flex-start",
768
+ "start",
659
769
  "flex-end",
770
+ "end",
660
771
  "center",
661
772
  "baseline"
662
- ], J = [
773
+ ], K = [
663
774
  "",
664
775
  "default",
665
776
  "flex-start",
777
+ "start",
666
778
  "flex-end",
779
+ "end",
667
780
  "center",
668
781
  "space-between",
669
782
  "space-around",
670
783
  "space-evenly"
671
- ], K = ["", "default", "nowrap", "wrap", "wrap-reverse"], Q = ["", "visible", "hidden", "scroll", "auto"];
672
- class k extends C {
784
+ ], Q = ["", "default", "nowrap", "wrap", "wrap-reverse"], U = ["", "visible", "hidden", "scroll", "auto"];
785
+ class A extends m {
673
786
  constructor() {
674
- super(T), this.overflowXAttributeDelegate = new G(
787
+ super(I), this.overflowXAttributeDelegate = new G(
675
788
  this,
676
789
  "overflow-x",
677
790
  (t) => t,
@@ -725,7 +838,7 @@ class k extends C {
725
838
  case "gap--tablet":
726
839
  case "gap--laptop":
727
840
  case "gap--desktop":
728
- this.updateFlexProperties(t, i, e, w);
841
+ this.updateFlexProperties(t, i, e, x);
729
842
  break;
730
843
  case "justify-content":
731
844
  case "justify-content--mobile":
@@ -736,7 +849,7 @@ class k extends C {
736
849
  t,
737
850
  i,
738
851
  e,
739
- J
852
+ K
740
853
  );
741
854
  break;
742
855
  case "align-items":
@@ -744,28 +857,28 @@ class k extends C {
744
857
  case "align-items--tablet":
745
858
  case "align-items--laptop":
746
859
  case "align-items--desktop":
747
- this.updateFlexProperties(t, i, e, Y);
860
+ this.updateFlexProperties(t, i, e, J);
748
861
  break;
749
862
  case "wrap":
750
863
  case "wrap--mobile":
751
864
  case "wrap--tablet":
752
865
  case "wrap--laptop":
753
866
  case "wrap--desktop":
754
- this.updateFlexProperties(t, i, e, K);
867
+ this.updateFlexProperties(t, i, e, Q);
755
868
  break;
756
869
  case "direction":
757
870
  case "direction--mobile":
758
871
  case "direction--tablet":
759
872
  case "direction--laptop":
760
873
  case "direction--desktop":
761
- this.updateFlexProperties(t, i, e, W);
874
+ this.updateFlexProperties(t, i, e, Y);
762
875
  break;
763
876
  case "overflow-x":
764
877
  case "overflow-x--mobile":
765
878
  case "overflow-x--tablet":
766
879
  case "overflow-x--laptop":
767
880
  case "overflow-x--desktop":
768
- this.updateOverflowX(t, i, e, Q);
881
+ this.updateOverflowX(t, i, e, U);
769
882
  break;
770
883
  default:
771
884
  super.attributeChangedCallback(t, i, e);
@@ -773,9 +886,9 @@ class k extends C {
773
886
  }
774
887
  }
775
888
  updateOverflowX(t, i, e, o) {
776
- if (!j(o, e)) {
777
- n(
778
- `${e} is not an allowed ${t} value for ${this.tagName.toLowerCase()}`
889
+ if (!h(o, e)) {
890
+ s(
891
+ `"${e}" is not a valid ${t} value for ${this.tagName.toLowerCase()}. Allowed values are: "${o.join('", "')}".`
779
892
  );
780
893
  return;
781
894
  }
@@ -786,24 +899,27 @@ class k extends C {
786
899
  );
787
900
  }
788
901
  updateFlexProperties(t, i, e, o) {
789
- this.checkName(o, e) || n(
790
- `${e} is not an allowed ${t} value for ${this.tagName.toLowerCase()}`
902
+ this.checkName(o, e) || s(
903
+ `"${e}" is not a valid ${t} value for ${this.tagName.toLowerCase()}. Allowed values are: "${o.join('", "')}".`
791
904
  );
792
905
  const r = t.indexOf("--") > -1, a = r ? t.split("--")[0] : t, c = [];
793
906
  if (!r)
794
- this.getAttribute(a + "--mobile") || c.push("mobile"), this.getAttribute(a + "--tablet") || c.push("tablet"), this.getAttribute(a + "--laptop") || c.push("laptop"), this.getAttribute(a + "--desktop") || c.push("desktop"), c.forEach((p) => {
795
- this.updateStyle(a, p, i, o), this.updateStyle(a, p, e, o);
907
+ this.getAttribute(a + "--mobile") || c.push("mobile"), this.getAttribute(a + "--tablet") || c.push("tablet"), this.getAttribute(a + "--laptop") || c.push("laptop"), this.getAttribute(a + "--desktop") || c.push("desktop"), c.forEach((b) => {
908
+ this.updateStyle(a, b, i, o), this.updateStyle(a, b, e, o);
796
909
  });
797
910
  else {
798
- const p = t.split("--")[1];
799
- this.updateStyle(a, p, i, o), this.updateStyle(a, p, e, o);
911
+ const b = t.split("--")[1];
912
+ this.updateStyle(a, b, i, o), this.updateStyle(a, b, e, o);
800
913
  }
801
914
  }
802
915
  updateStyle(t, i, e, o) {
803
- e && (t === "gap" && o && o.includes(e) ? this.$el.style.setProperty(
916
+ e && (t === "gap" && o && o.includes(e) ? (this.$el.style.setProperty(
804
917
  `--flex-${t}--${i}-value`,
805
918
  `var(--px-spacing-${e}-${i === "laptop" ? "desktop" : i})`
806
- ) : this.$el.style.setProperty(
919
+ ), this.style.setProperty(
920
+ `--host-gap--${i}`,
921
+ `var(--px-spacing-${e}-${i === "laptop" ? "desktop" : i})`
922
+ )) : this.$el.style.setProperty(
807
923
  `--flex-${t}--${i}-value`,
808
924
  e
809
925
  ));
@@ -992,8 +1108,8 @@ class k extends C {
992
1108
  return this.shadowRoot.querySelector(".flex-container");
993
1109
  }
994
1110
  }
995
- customElements.get("px-stack") || customElements.define("px-stack", k);
996
- class U extends k {
1111
+ customElements.get("px-stack") || customElements.define("px-stack", A);
1112
+ class V extends A {
997
1113
  constructor() {
998
1114
  super();
999
1115
  }
@@ -1001,8 +1117,8 @@ class U extends k {
1001
1117
  super.connectedCallback(), this.direction = "column", this.directionMobile = "column", this.directionTablet = "column", this.directionLaptop = "column", this.directionDesktop = "column";
1002
1118
  }
1003
1119
  }
1004
- customElements.get("px-vstack") || customElements.define("px-vstack", U);
1005
- class V extends k {
1120
+ customElements.get("px-vstack") || customElements.define("px-vstack", V);
1121
+ class tt extends A {
1006
1122
  constructor() {
1007
1123
  super();
1008
1124
  }
@@ -1010,8 +1126,8 @@ class V extends k {
1010
1126
  super.connectedCallback(), this.direction = "row", this.directionMobile = "row", this.directionTablet = "row", this.directionLaptop = "row", this.directionDesktop = "row";
1011
1127
  }
1012
1128
  }
1013
- customElements.get("px-hstack") || customElements.define("px-hstack", V);
1014
- class tt extends HTMLElement {
1129
+ customElements.get("px-hstack") || customElements.define("px-hstack", tt);
1130
+ class et extends HTMLElement {
1015
1131
  constructor() {
1016
1132
  super(), this.isZeroSized = !1, this.growValue = "1", this.isVertical = !1;
1017
1133
  }
@@ -1058,12 +1174,12 @@ class tt extends HTMLElement {
1058
1174
  t ? this.setAttribute("nogap", "") : this.removeAttribute("nogap");
1059
1175
  }
1060
1176
  }
1061
- customElements.get("px-spacer") || customElements.define("px-spacer", tt);
1062
- const et = ":host{display:block;box-sizing:border-box}slot[name=body-container]{min-height:100vh}#image-sticky-box{margin-top:-2.5em}", I = new CSSStyleSheet();
1063
- I.replaceSync(et);
1064
- class it extends C {
1177
+ customElements.get("px-spacer") || customElements.define("px-spacer", et);
1178
+ const it = ":host{display:block;box-sizing:border-box}slot[name=body-container]{min-height:100vh}#image-sticky-box{margin-top:-2.5rem}", M = new CSSStyleSheet();
1179
+ M.replaceSync(it);
1180
+ class ot extends m {
1065
1181
  constructor() {
1066
- super(I), this.template = (t) => `
1182
+ super(M), this.template = (t) => `
1067
1183
  <px-container border-radius="none" padding="none">
1068
1184
  <px-vstack>
1069
1185
  <px-container id="header-container" border-radius="none">
@@ -1260,14 +1376,14 @@ class it extends C {
1260
1376
  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;
1261
1377
  }
1262
1378
  }
1263
- customElements.get("px-page") === void 0 && customElements.define("px-page", it);
1264
- const M = new CSSStyleSheet();
1265
- M.replaceSync(F);
1266
- class ot extends HTMLElement {
1379
+ customElements.get("px-page") === void 0 && customElements.define("px-page", ot);
1380
+ const B = new CSSStyleSheet();
1381
+ B.replaceSync(N);
1382
+ class rt extends m {
1267
1383
  constructor() {
1268
- super(), this.template = () => `
1269
- <px-container border-radius="none" padding-inline="none" background-color="${this.backgroundColor}">
1270
- <div class="content-wrapper ${this.$slotOverlap ? "overlapped" : ""}">
1384
+ super(B), this.template = () => `
1385
+ <px-container border-radius="none" padding-inline="none">
1386
+ <div class="content-wrapper">
1271
1387
  <px-vstack gap="heading-to-content">
1272
1388
  <slot name="heading"></slot>
1273
1389
  <px-vstack gap="none">
@@ -1279,14 +1395,18 @@ class ot extends HTMLElement {
1279
1395
  <div class="content-wrapper">
1280
1396
  <slot name="overlap"></slot>
1281
1397
  </div>
1282
- `, this.attachShadow({ mode: "open" }), this.shadowRoot.innerHTML = this.template(), this.shadowRoot.adoptedStyleSheets = [M];
1398
+ `, this.shadowRoot.innerHTML = this.template();
1283
1399
  }
1284
1400
  connectedCallback() {
1285
- const t = this.querySelector('[slot="heading"]');
1286
- !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");
1401
+ var t, i;
1402
+ this.$container.setAttribute("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(), (t = this.$slotHeading) == null || t.addEventListener("slotchange", this.setHeadingSpacing), this.toggleOverlapSpacing = this.toggleOverlapSpacing.bind(this), this.toggleOverlapSpacing(), (i = this.$slotOverlap) == null || i.addEventListener(
1403
+ "slotchange",
1404
+ this.toggleOverlapSpacing
1405
+ );
1287
1406
  }
1288
1407
  static get observedAttributes() {
1289
1408
  return [
1409
+ ...super.observedAttributes,
1290
1410
  "background-color",
1291
1411
  "background-gradient",
1292
1412
  "background-image",
@@ -1314,9 +1434,6 @@ class ot extends HTMLElement {
1314
1434
  "border-side--laptop"
1315
1435
  ];
1316
1436
  }
1317
- get $container() {
1318
- return this.shadowRoot.querySelector("px-container");
1319
- }
1320
1437
  attributeChangedCallback(t, i, e) {
1321
1438
  if (i !== e)
1322
1439
  switch (t) {
@@ -1395,11 +1512,61 @@ class ot extends HTMLElement {
1395
1512
  case "border-side--laptop":
1396
1513
  this.$container.borderSideLaptop = e;
1397
1514
  break;
1515
+ default:
1516
+ super.attributeChangedCallback(t, i, e);
1517
+ break;
1398
1518
  }
1399
1519
  }
1520
+ disconnectedCallback() {
1521
+ var t, i;
1522
+ (t = this.$slotHeading) == null || t.removeEventListener(
1523
+ "slotchange",
1524
+ this.setHeadingSpacing
1525
+ ), (i = this.$slotOverlap) == null || i.removeEventListener(
1526
+ "slotchange",
1527
+ this.toggleOverlapSpacing
1528
+ );
1529
+ }
1530
+ toggleOverlapSpacing() {
1531
+ const t = this.$slotOverlap, i = this.$mainContentWrapper;
1532
+ if (!t || !i) return;
1533
+ const o = t.assignedNodes({ flatten: !0 }).some(this.isNotEmptyNode);
1534
+ i.classList.toggle("overlapped", o);
1535
+ }
1536
+ isNotEmptyNode(t) {
1537
+ return t.nodeType === Node.ELEMENT_NODE ? !0 : t.nodeType === Node.TEXT_NODE ? (t.textContent ?? "").trim().length > 0 : !1;
1538
+ }
1539
+ setHeadingSpacing() {
1540
+ var e;
1541
+ const t = this.$slotHeading, i = (e = this.shadowRoot) == null ? void 0 : e.querySelector("px-vstack");
1542
+ t && i && (t.assignedElements().length > 0 ? i.setAttribute("gap", "heading-to-content") : i.setAttribute("gap", "none"));
1543
+ }
1544
+ get $container() {
1545
+ var t;
1546
+ return (t = this.shadowRoot) == null ? void 0 : t.querySelector("px-container");
1547
+ }
1548
+ get $mainContentWrapper() {
1549
+ var t;
1550
+ return (t = this.$container) == null ? void 0 : t.querySelector(".content-wrapper");
1551
+ }
1400
1552
  get $slotOverlap() {
1553
+ var t;
1554
+ return (t = this.shadowRoot) == null ? void 0 : t.querySelector(
1555
+ 'slot[name="overlap"]'
1556
+ );
1557
+ }
1558
+ get $slottedOverlap() {
1401
1559
  return this.querySelector('[slot="overlap"]');
1402
1560
  }
1561
+ get $slotHeading() {
1562
+ var t;
1563
+ return (t = this.shadowRoot) == null ? void 0 : t.querySelector(
1564
+ 'slot[name="heading"]'
1565
+ );
1566
+ }
1567
+ get $slottedHeading() {
1568
+ return this.querySelector('[slot="heading"]');
1569
+ }
1403
1570
  get backgroundColor() {
1404
1571
  return this.getAttribute("background-color") || "none";
1405
1572
  }
@@ -1551,10 +1718,10 @@ class ot extends HTMLElement {
1551
1718
  this.setAttribute("border-side--laptop", t);
1552
1719
  }
1553
1720
  }
1554
- customElements.get("px-section") || customElements.define("px-section", ot);
1555
- const rt = ":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();
1556
- B.replaceSync(rt);
1557
- const at = [
1721
+ customElements.get("px-section") || customElements.define("px-section", rt);
1722
+ 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 screen and (max-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 (min-width: 48rem) and (max-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 (min-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}}", z = new CSSStyleSheet();
1723
+ z.replaceSync(at);
1724
+ const st = [
1558
1725
  "1",
1559
1726
  "2",
1560
1727
  "3",
@@ -1576,15 +1743,15 @@ const at = [
1576
1743
  "space-around",
1577
1744
  "space-evenly",
1578
1745
  "stretch"
1579
- ], st = ["", "start", "end", "center", "stretch"], dt = (s, t, i) => `:host([${s}${i ? `--${i}` : ""}='${t}']) .grid`, lt = "px-spacing", bt = d(
1746
+ ], dt = ["", "start", "end", "center", "stretch"], lt = (n, t, i) => `:host([${n}${i ? `--${i}` : ""}='${t}']) .grid`, gt = "px-spacing", pt = d(
1580
1747
  "gap",
1581
- dt,
1582
- w,
1583
1748
  lt,
1749
+ x,
1750
+ gt,
1584
1751
  "--grid-gap"
1585
- ), y = class y extends S {
1752
+ ), w = class w extends L {
1586
1753
  constructor() {
1587
- super(B, bt), this.template = () => `<div class="grid">
1754
+ super(z, pt), this.template = () => `<div class="grid">
1588
1755
  <slot></slot>
1589
1756
  </div>`, this.shadowRoot.innerHTML = this.template();
1590
1757
  }
@@ -1627,7 +1794,7 @@ const at = [
1627
1794
  case "grid-cols--mobile":
1628
1795
  case "grid-cols--tablet":
1629
1796
  case "grid-cols--laptop":
1630
- this.updateAttribute(t, i, e, at);
1797
+ this.updateAttribute(t, i, e, st);
1631
1798
  break;
1632
1799
  case "justify-content":
1633
1800
  case "align-content":
@@ -1660,7 +1827,7 @@ const at = [
1660
1827
  t,
1661
1828
  i,
1662
1829
  e,
1663
- st
1830
+ dt
1664
1831
  );
1665
1832
  break;
1666
1833
  default:
@@ -1670,8 +1837,8 @@ const at = [
1670
1837
  }
1671
1838
  updateGap(t, i, e) {
1672
1839
  if (!this.checkName(e, i)) {
1673
- n(
1674
- `${i} is not an allowed gap value for ${this.tagName.toLowerCase()}`
1840
+ s(
1841
+ `"${i}" is not a valid gap value for ${this.tagName.toLowerCase()}. Allowed values are: "${e.join('", "')}".`
1675
1842
  );
1676
1843
  return;
1677
1844
  }
@@ -1690,8 +1857,8 @@ const at = [
1690
1857
  o(t), o(i);
1691
1858
  }
1692
1859
  updateAttribute(t, i, e, o) {
1693
- 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(
1694
- `${e} is not an allowed ${t} value for ${this.tagName.toLowerCase()}`
1860
+ 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}`)) : s(
1861
+ `"${e}" is not a valid ${t} value for ${this.tagName.toLowerCase()}. Allowed values are: "${o.join('", "')}".`
1695
1862
  );
1696
1863
  }
1697
1864
  get gap() {
@@ -1863,31 +2030,31 @@ const at = [
1863
2030
  this.setAttribute("align-items--desktop", t);
1864
2031
  }
1865
2032
  };
1866
- y.nativeName = "div";
1867
- let m = y;
1868
- customElements.get("px-grid") || customElements.define("px-grid", m);
1869
- const z = new CSSStyleSheet();
1870
- z.replaceSync(X);
1871
- const x = class x extends S {
2033
+ w.nativeName = "div";
2034
+ let v = w;
2035
+ customElements.get("px-grid") || customElements.define("px-grid", v);
2036
+ const R = new CSSStyleSheet();
2037
+ R.replaceSync(q);
2038
+ const j = class j extends L {
1872
2039
  constructor() {
1873
- super(z), this.template = () => `<div class="content-header">
2040
+ super(R), this.template = () => `<div class="content-header">
1874
2041
  <div class="contrast-helper"></div>
1875
2042
  <px-section padding-block="l">
1876
- <px-grid gap="none">
1877
- <px-container padding="none" border-radius="none" background-color="none" >
1878
- <div class="content-header-content">
1879
- <px-vstack gap="heading-to-subtitle">
1880
- <px-h1 variant="title-3xl"><slot></slot></px-h1>
1881
- <slot name="subtitle"></slot>
1882
- </px-vstack>
1883
- ${this.$patchDescriptionSlot ? `<px-stack gap="s" direction="row" direction--mobile="column">
1884
- <slot name="patch" shrink></slot>
1885
- <slot name="patch-description"></slot>
1886
- </px-stack>` : ""}
1887
- </div>
1888
- </px-container>
1889
- </px-grid>
1890
- ${this.$overlapSlot ? '<slot name="overlap" slot="overlap"></slot>' : ""}
2043
+ <px-grid gap="none">
2044
+ <px-container padding="none" border-radius="none" background-color="none" >
2045
+ <div class="content-header-content">
2046
+ <px-vstack gap="heading-to-subtitle">
2047
+ <px-h1><slot></slot></px-h1>
2048
+ <slot name="subtitle"></slot>
2049
+ </px-vstack>
2050
+ <px-stack gap="s" direction="row" direction--mobile="column">
2051
+ <slot name="patch" shrink></slot>
2052
+ <slot name="patch-description"></slot>
2053
+ </px-stack>
2054
+ </div>
2055
+ </px-container>
2056
+ </px-grid>
2057
+ <slot name="overlap" slot="overlap"></slot>
1891
2058
  </px-section>
1892
2059
  </div>`, this.shadowRoot.innerHTML = this.template();
1893
2060
  }
@@ -1908,11 +2075,16 @@ const x = class x extends S {
1908
2075
  "has-gridding--mobile",
1909
2076
  "has-gridding--tablet",
1910
2077
  "has-gridding--laptop",
2078
+ "has-gridding--desktop",
1911
2079
  "inverted"
1912
2080
  ];
1913
2081
  }
1914
2082
  connectedCallback() {
1915
- 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();
2083
+ var t, i;
2084
+ this.styleSubtitleSlot = this.styleSubtitleSlot.bind(this), this.stylepatchDescriptionSlotted = this.stylepatchDescriptionSlotted.bind(this), this.styleSubtitleSlot(), this.stylepatchDescriptionSlotted(), this.createGridding(), (t = this.$subtitleSlot) == null || t.addEventListener("slotchange", this.styleSubtitleSlot), (i = this.$patchDescriptionSlot) == null || i.addEventListener(
2085
+ "slotchange",
2086
+ this.stylepatchDescriptionSlotted
2087
+ );
1916
2088
  }
1917
2089
  attributeChangedCallback(t, i, e) {
1918
2090
  if (i !== e)
@@ -1921,7 +2093,7 @@ const x = class x extends S {
1921
2093
  this.$section.backgroundColor = u.indexOf(e) > 0 ? e : "none";
1922
2094
  break;
1923
2095
  case "background-gradient":
1924
- this.$section.gradient = $.indexOf(e) > 0 ? e : "none";
2096
+ this.$section.gradient = f.indexOf(e) > 0 ? e : "none";
1925
2097
  break;
1926
2098
  case "background-image":
1927
2099
  this.$section.backgroundImage = e;
@@ -1936,7 +2108,7 @@ const x = class x extends S {
1936
2108
  this.$section.backgroundImageLaptop = e;
1937
2109
  break;
1938
2110
  case "background-size":
1939
- this.$section.backgroundSize = A.indexOf(e) > 0 ? e : "";
2111
+ this.$section.backgroundSize = C.indexOf(e) > 0 ? e : "";
1940
2112
  break;
1941
2113
  case "background-position":
1942
2114
  this.$section.backgroundPosition = e;
@@ -1945,6 +2117,7 @@ const x = class x extends S {
1945
2117
  case "has-gridding--mobile":
1946
2118
  case "has-gridding--tablet":
1947
2119
  case "has-gridding--laptop":
2120
+ case "has-gridding--desktop":
1948
2121
  this.createGridding(e);
1949
2122
  break;
1950
2123
  case "inverted":
@@ -1957,6 +2130,22 @@ const x = class x extends S {
1957
2130
  break;
1958
2131
  }
1959
2132
  }
2133
+ disconnectedCallback() {
2134
+ var t, i;
2135
+ (t = this.$subtitleSlot) == null || t.removeEventListener(
2136
+ "slotchange",
2137
+ this.styleSubtitleSlot
2138
+ ), (i = this.$patchDescriptionSlot) == null || i.removeEventListener(
2139
+ "slotchange",
2140
+ this.stylepatchDescriptionSlotted
2141
+ );
2142
+ }
2143
+ stylepatchDescriptionSlotted() {
2144
+ this.$patchDescriptionSlotted && (this.$patchDescriptionSlotted.localName === "px-p" && this.$patchDescriptionSlotted.setAttribute("variant", "default"), (this.$patchDescriptionSlotted.localName === "px-p" || this.$patchDescriptionSlotted.localName === "px-span") && (this.$patchDescriptionSlotted.setAttribute("font-size", "body-l"), this.$patchDescriptionSlotted.removeAttribute("font-weight"), this.$patchDescriptionSlotted.removeAttribute("color")), this.$patchDescriptionSlotted.localName === "px-price" && this.$patchDescriptionSlotted.setAttribute("size", "m"));
2145
+ }
2146
+ styleSubtitleSlot() {
2147
+ this.$subtitleSlotted && this.$subtitleSlotted.setAttribute("variant", "subtitle");
2148
+ }
1960
2149
  createGridding(t) {
1961
2150
  const i = [
1962
2151
  { prop: "hasGridding", gridAttr: "grid-cols", attr: "col-span" },
@@ -1974,12 +2163,17 @@ const x = class x extends S {
1974
2163
  prop: "hasGriddingLaptop",
1975
2164
  gridAttr: "grid-cols--laptop",
1976
2165
  attr: "col-span--laptop"
2166
+ },
2167
+ {
2168
+ prop: "hasGriddingDesktop",
2169
+ gridAttr: "grid-cols--desktop",
2170
+ attr: "col-span--desktop"
1977
2171
  }
1978
2172
  ], e = this.shadowRoot.querySelector(
1979
2173
  "px-grid > px-container"
1980
2174
  );
1981
2175
  t !== null ? i.forEach(({ prop: o, gridAttr: r, attr: a }) => {
1982
- this[o] && (this.$grid.setAttribute(r, "3"), e == null || e.setAttribute(a, "2"));
2176
+ this[o] && (this.$grid.setAttribute(r, "2"), e == null || e.setAttribute(a, "1"));
1983
2177
  }) : i.forEach(({ gridAttr: o, attr: r }) => {
1984
2178
  this.$grid.setAttribute(o, "1"), e == null || e.setAttribute(r, "1");
1985
2179
  });
@@ -1994,9 +2188,21 @@ const x = class x extends S {
1994
2188
  return this.shadowRoot.querySelector("px-h1");
1995
2189
  }
1996
2190
  get $subtitleSlot() {
2191
+ var t;
2192
+ return (t = this.shadowRoot) == null ? void 0 : t.querySelector(
2193
+ 'slot[name="subtitle"]'
2194
+ );
2195
+ }
2196
+ get $subtitleSlotted() {
1997
2197
  return this.querySelector('[slot="subtitle"]');
1998
2198
  }
1999
2199
  get $patchDescriptionSlot() {
2200
+ var t;
2201
+ return (t = this.shadowRoot) == null ? void 0 : t.querySelector(
2202
+ 'slot[name="patch-description"]'
2203
+ );
2204
+ }
2205
+ get $patchDescriptionSlotted() {
2000
2206
  return this.querySelector('[slot="patch-description"]');
2001
2207
  }
2002
2208
  get $overlapSlot() {
@@ -2089,6 +2295,12 @@ const x = class x extends S {
2089
2295
  set hasGriddingLaptop(t) {
2090
2296
  t ? this.setAttribute("has-gridding--laptop", "") : this.removeAttribute("has-gridding--laptop");
2091
2297
  }
2298
+ get hasGriddingDesktop() {
2299
+ return this.hasAttribute("has-gridding--desktop");
2300
+ }
2301
+ set hasGriddingDesktop(t) {
2302
+ t ? this.setAttribute("has-gridding--desktop", "") : this.removeAttribute("has-gridding--desktop");
2303
+ }
2092
2304
  get inverted() {
2093
2305
  return this.hasAttribute("inverted");
2094
2306
  }
@@ -2102,9 +2314,9 @@ const x = class x extends S {
2102
2314
  t ? this.setAttribute("min-height", "") : this.removeAttribute("min-height");
2103
2315
  }
2104
2316
  };
2105
- x.nativeName = "div";
2106
- let f = x;
2107
- customElements.get("px-content-header") || customElements.define("px-content-header", f);
2317
+ j.nativeName = "div";
2318
+ let y = j;
2319
+ customElements.get("px-content-header") || customElements.define("px-content-header", y);
2108
2320
  export {
2109
- f as ContentHeader
2321
+ y as ContentHeader
2110
2322
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@proximus/lavender-content-header",
3
- "version": "2.0.0-alpha.16",
3
+ "version": "2.0.0-alpha.161",
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"