@proximus/lavender-content-header 1.4.5-alpha.9 → 1.4.5-beta.2

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 (2) hide show
  1. package/dist/index.es.js +137 -101
  2. package/package.json +1 -1
package/dist/index.es.js CHANGED
@@ -1,56 +1,61 @@
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 E, borderValues as O, gradientValues as $, log as s, backgroundColorValues as u, borderColorValues as q, checkName as j, WithExtraAttributes as w, AttributeBreakpointHandlerDelegate as G, gapValues as C, PxElement as S } from "@proximus/lavender-common";
1
+ import { cssTokenBreakpoints as d, paddingValues as l, VerticallyExtendedElement as R, boxShadowValues as P, backgroundSizeValues as $, noBorderRadiusValues as D, borderRadiusValues as E, borderSideValues as H, 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
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 = (n, t, i) => `:host([${n}${i ? `--${i}` : ""}='${t}']) .container`, g = "px-padding", N = [
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 = [
6
11
  d(
7
12
  "padding",
8
- b,
13
+ c,
9
14
  l,
10
15
  g,
11
16
  "--container-padding"
12
17
  ),
13
18
  d(
14
19
  "padding-inline",
15
- b,
20
+ c,
16
21
  l,
17
22
  g
18
23
  ),
19
24
  d(
20
25
  "padding-block",
21
- b,
26
+ c,
22
27
  l,
23
28
  g
24
29
  ),
25
30
  d(
26
31
  "padding-top",
27
- b,
32
+ c,
28
33
  l,
29
34
  g
30
35
  ),
31
36
  d(
32
37
  "padding-right",
33
- b,
38
+ c,
34
39
  l,
35
40
  g,
36
41
  "--container-padding-right"
37
42
  ),
38
43
  d(
39
44
  "padding-bottom",
40
- b,
45
+ c,
41
46
  l,
42
47
  g
43
48
  ),
44
49
  d(
45
50
  "padding-left",
46
- b,
51
+ c,
47
52
  l,
48
53
  g,
49
54
  "--container-padding-left"
50
55
  )
51
- ], v = class v extends R {
56
+ ], y = class y extends R {
52
57
  constructor() {
53
- super(L, ...N), 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 b = (n, t, i) => `:host([${n}${i ? `--${i}` : ""}='${t}']) .container`, g
87
92
  "background-position",
88
93
  "box-shadow",
89
94
  "anchor-offset",
95
+ "anchor-spacing",
90
96
  "inverted"
91
97
  ];
92
98
  }
@@ -121,14 +127,14 @@ const b = (n, t, i) => `:host([${n}${i ? `--${i}` : ""}='${t}']) .container`, g
121
127
  case "border-side--mobile":
122
128
  case "border-side--tablet":
123
129
  case "border-side--laptop":
124
- this.updateAttribute(t, i, e, E);
130
+ this.updateAttribute(t, i, e, H);
125
131
  break;
126
132
  case "border-radius":
127
133
  this.updateAttribute(
128
134
  t,
129
135
  i,
130
136
  e,
131
- H
137
+ E
132
138
  );
133
139
  break;
134
140
  case "no-border-radius":
@@ -159,7 +165,7 @@ const b = (n, t, i) => `:host([${n}${i ? `--${i}` : ""}='${t}']) .container`, g
159
165
  t,
160
166
  i,
161
167
  e,
162
- A
168
+ $
163
169
  );
164
170
  break;
165
171
  case "background-image":
@@ -177,6 +183,9 @@ const b = (n, t, i) => `:host([${n}${i ? `--${i}` : ""}='${t}']) .container`, g
177
183
  case "anchor-offset":
178
184
  this.updateAnchorOffset(i, e, l);
179
185
  break;
186
+ case "anchor-spacing":
187
+ this.updateAnchorSpacing(i, e, _);
188
+ break;
180
189
  default:
181
190
  super.attributeChangedCallback(t, i, e);
182
191
  break;
@@ -197,7 +206,7 @@ const b = (n, t, i) => `:host([${n}${i ? `--${i}` : ""}='${t}']) .container`, g
197
206
  this.$el.style.setProperty(`--${t}`, `url("${i}")`);
198
207
  }
199
208
  updateGradient(t, i) {
200
- if (this.checkName($, 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;
@@ -206,7 +215,7 @@ const b = (n, t, i) => `:host([${n}${i ? `--${i}` : ""}='${t}']) .container`, g
206
215
  `linear-gradient(var(--px-color-background-gradient-${i}))`
207
216
  );
208
217
  } else
209
- s(
218
+ n(
210
219
  `${i} is not an allowed ${t} value for ${this.tagName.toLowerCase()}`
211
220
  );
212
221
  }
@@ -222,7 +231,7 @@ const b = (n, t, i) => `:host([${n}${i ? `--${i}` : ""}='${t}']) .container`, g
222
231
  `var(--px-color-background-${i}${e ? "" : "-inverted"})`
223
232
  );
224
233
  } else
225
- s(
234
+ n(
226
235
  `${i} is not an allowed ${t} value for ${this.tagName.toLowerCase()}`
227
236
  );
228
237
  }
@@ -233,13 +242,13 @@ const b = (n, t, i) => `:host([${n}${i ? `--${i}` : ""}='${t}']) .container`, g
233
242
  ), this.$el.style.setProperty(
234
243
  `--${t}-inverted`,
235
244
  `var(--px-color-border-${i}-inverted)`
236
- )) : s(
245
+ )) : n(
237
246
  `${i} is not an allowed ${t} value for ${this.tagName.toLowerCase()}`
238
247
  );
239
248
  }
240
249
  updateNoBorderRadius(t, i, e, o) {
241
250
  if (!this.checkName(o, e))
242
- s(
251
+ n(
243
252
  `${e} is not an allowed ${t} value for ${this.tagName.toLowerCase()}`
244
253
  );
245
254
  else {
@@ -253,7 +262,7 @@ const b = (n, t, i) => `:host([${n}${i ? `--${i}` : ""}='${t}']) .container`, g
253
262
  }
254
263
  updateAttribute(t, i, e, o) {
255
264
  if (!this.checkName(o, e))
256
- s(
265
+ n(
257
266
  `${e} is not an allowed ${t} value for ${this.tagName.toLowerCase()}`
258
267
  );
259
268
  else {
@@ -276,8 +285,8 @@ const b = (n, t, i) => `:host([${n}${i ? `--${i}` : ""}='${t}']) .container`, g
276
285
  return { attrName: t, breakpoint: i };
277
286
  }
278
287
  updateAnchorOffset(t, i, e) {
279
- if (!j(e, i)) {
280
- s(
288
+ if (!h(e, i)) {
289
+ n(
281
290
  `${i} is not a valid anchor-offset value for ${this.tagName.toLowerCase()}`
282
291
  );
283
292
  return;
@@ -299,6 +308,27 @@ const b = (n, t, i) => `:host([${n}${i ? `--${i}` : ""}='${t}']) .container`, g
299
308
  addAnchorClass() {
300
309
  this.$el.classList.contains("anchored") || this.$el.classList.add("anchored");
301
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
+ }
302
332
  get $slotAnchor() {
303
333
  return this.querySelector('[slot^="anchor"]');
304
334
  }
@@ -632,6 +662,12 @@ const b = (n, t, i) => `:host([${n}${i ? `--${i}` : ""}='${t}']) .container`, g
632
662
  set anchorOffset(t) {
633
663
  this.setAttribute("anchor-offset", t);
634
664
  }
665
+ get anchorSpacing() {
666
+ return this.getAttribute("anchor-spacing");
667
+ }
668
+ set anchorSpacing(t) {
669
+ this.setAttribute("anchor-spacing", t);
670
+ }
635
671
  get inverted() {
636
672
  return this.getAttribute("inverted");
637
673
  }
@@ -639,19 +675,19 @@ const b = (n, t, i) => `:host([${n}${i ? `--${i}` : ""}='${t}']) .container`, g
639
675
  this.setAttribute("inverted", t);
640
676
  }
641
677
  };
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 ::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();
646
- T.replaceSync(Z);
647
- const W = [
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 = [
648
684
  "",
649
685
  "default",
650
686
  "row",
651
687
  "row-reverse",
652
688
  "column",
653
689
  "column-reverse"
654
- ], Y = [
690
+ ], J = [
655
691
  "",
656
692
  "default",
657
693
  "stretch",
@@ -659,7 +695,7 @@ const W = [
659
695
  "flex-end",
660
696
  "center",
661
697
  "baseline"
662
- ], J = [
698
+ ], K = [
663
699
  "",
664
700
  "default",
665
701
  "flex-start",
@@ -668,8 +704,8 @@ const W = [
668
704
  "space-between",
669
705
  "space-around",
670
706
  "space-evenly"
671
- ], K = ["", "default", "nowrap", "wrap", "wrap-reverse"], Q = ["", "visible", "hidden", "scroll", "auto"];
672
- class k extends w {
707
+ ], Q = ["", "default", "nowrap", "wrap", "wrap-reverse"], U = ["", "visible", "hidden", "scroll", "auto"];
708
+ class v extends C {
673
709
  constructor() {
674
710
  super(T), this.overflowXAttributeDelegate = new G(
675
711
  this,
@@ -725,7 +761,7 @@ class k extends w {
725
761
  case "gap--tablet":
726
762
  case "gap--laptop":
727
763
  case "gap--desktop":
728
- this.updateFlexProperties(t, i, e, C);
764
+ this.updateFlexProperties(t, i, e, w);
729
765
  break;
730
766
  case "justify-content":
731
767
  case "justify-content--mobile":
@@ -736,7 +772,7 @@ class k extends w {
736
772
  t,
737
773
  i,
738
774
  e,
739
- J
775
+ K
740
776
  );
741
777
  break;
742
778
  case "align-items":
@@ -744,28 +780,28 @@ class k extends w {
744
780
  case "align-items--tablet":
745
781
  case "align-items--laptop":
746
782
  case "align-items--desktop":
747
- this.updateFlexProperties(t, i, e, Y);
783
+ this.updateFlexProperties(t, i, e, J);
748
784
  break;
749
785
  case "wrap":
750
786
  case "wrap--mobile":
751
787
  case "wrap--tablet":
752
788
  case "wrap--laptop":
753
789
  case "wrap--desktop":
754
- this.updateFlexProperties(t, i, e, K);
790
+ this.updateFlexProperties(t, i, e, Q);
755
791
  break;
756
792
  case "direction":
757
793
  case "direction--mobile":
758
794
  case "direction--tablet":
759
795
  case "direction--laptop":
760
796
  case "direction--desktop":
761
- this.updateFlexProperties(t, i, e, W);
797
+ this.updateFlexProperties(t, i, e, Y);
762
798
  break;
763
799
  case "overflow-x":
764
800
  case "overflow-x--mobile":
765
801
  case "overflow-x--tablet":
766
802
  case "overflow-x--laptop":
767
803
  case "overflow-x--desktop":
768
- this.updateOverflowX(t, i, e, Q);
804
+ this.updateOverflowX(t, i, e, U);
769
805
  break;
770
806
  default:
771
807
  super.attributeChangedCallback(t, i, e);
@@ -773,8 +809,8 @@ class k extends w {
773
809
  }
774
810
  }
775
811
  updateOverflowX(t, i, e, o) {
776
- if (!j(o, e)) {
777
- s(
812
+ if (!h(o, e)) {
813
+ n(
778
814
  `${e} is not an allowed ${t} value for ${this.tagName.toLowerCase()}`
779
815
  );
780
816
  return;
@@ -786,17 +822,17 @@ class k extends w {
786
822
  );
787
823
  }
788
824
  updateFlexProperties(t, i, e, o) {
789
- this.checkName(o, e) || s(
825
+ this.checkName(o, e) || n(
790
826
  `${e} is not an allowed ${t} value for ${this.tagName.toLowerCase()}`
791
827
  );
792
- const r = t.indexOf("--") > -1, a = r ? t.split("--")[0] : t, c = [];
828
+ const r = t.indexOf("--") > -1, a = r ? t.split("--")[0] : t, p = [];
793
829
  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);
830
+ 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((b) => {
831
+ this.updateStyle(a, b, i, o), this.updateStyle(a, b, e, o);
796
832
  });
797
833
  else {
798
- const p = t.split("--")[1];
799
- this.updateStyle(a, p, i, o), this.updateStyle(a, p, e, o);
834
+ const b = t.split("--")[1];
835
+ this.updateStyle(a, b, i, o), this.updateStyle(a, b, e, o);
800
836
  }
801
837
  }
802
838
  updateStyle(t, i, e, o) {
@@ -995,8 +1031,8 @@ class k extends w {
995
1031
  return this.shadowRoot.querySelector(".flex-container");
996
1032
  }
997
1033
  }
998
- customElements.get("px-stack") || customElements.define("px-stack", k);
999
- class U extends k {
1034
+ customElements.get("px-stack") || customElements.define("px-stack", v);
1035
+ class V extends v {
1000
1036
  constructor() {
1001
1037
  super();
1002
1038
  }
@@ -1004,8 +1040,8 @@ class U extends k {
1004
1040
  super.connectedCallback(), this.direction = "column", this.directionMobile = "column", this.directionTablet = "column", this.directionLaptop = "column", this.directionDesktop = "column";
1005
1041
  }
1006
1042
  }
1007
- customElements.get("px-vstack") || customElements.define("px-vstack", U);
1008
- class V extends k {
1043
+ customElements.get("px-vstack") || customElements.define("px-vstack", V);
1044
+ class tt extends v {
1009
1045
  constructor() {
1010
1046
  super();
1011
1047
  }
@@ -1013,8 +1049,8 @@ class V extends k {
1013
1049
  super.connectedCallback(), this.direction = "row", this.directionMobile = "row", this.directionTablet = "row", this.directionLaptop = "row", this.directionDesktop = "row";
1014
1050
  }
1015
1051
  }
1016
- customElements.get("px-hstack") || customElements.define("px-hstack", V);
1017
- class tt extends HTMLElement {
1052
+ customElements.get("px-hstack") || customElements.define("px-hstack", tt);
1053
+ class et extends HTMLElement {
1018
1054
  constructor() {
1019
1055
  super(), this.isZeroSized = !1, this.growValue = "1", this.isVertical = !1;
1020
1056
  }
@@ -1061,10 +1097,10 @@ class tt extends HTMLElement {
1061
1097
  t ? this.setAttribute("nogap", "") : this.removeAttribute("nogap");
1062
1098
  }
1063
1099
  }
1064
- customElements.get("px-spacer") || customElements.define("px-spacer", tt);
1065
- 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();
1066
- I.replaceSync(et);
1067
- class it extends w {
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 {
1068
1104
  constructor() {
1069
1105
  super(I), this.template = (t) => `
1070
1106
  <px-container border-radius="none" padding="none">
@@ -1263,10 +1299,10 @@ class it extends w {
1263
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;
1264
1300
  }
1265
1301
  }
1266
- customElements.get("px-page") === void 0 && customElements.define("px-page", it);
1302
+ customElements.get("px-page") === void 0 && customElements.define("px-page", ot);
1267
1303
  const M = new CSSStyleSheet();
1268
1304
  M.replaceSync(F);
1269
- class ot extends HTMLElement {
1305
+ class rt extends HTMLElement {
1270
1306
  constructor() {
1271
1307
  super(), this.template = () => `
1272
1308
  <px-container border-radius="none" padding-inline="none">
@@ -1555,10 +1591,10 @@ class ot extends HTMLElement {
1555
1591
  this.setAttribute("border-side--laptop", t);
1556
1592
  }
1557
1593
  }
1558
- customElements.get("px-section") || customElements.define("px-section", ot);
1559
- 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();
1560
- B.replaceSync(rt);
1561
- const at = [
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 = [
1562
1598
  "1",
1563
1599
  "2",
1564
1600
  "3",
@@ -1580,15 +1616,15 @@ const at = [
1580
1616
  "space-around",
1581
1617
  "space-evenly",
1582
1618
  "stretch"
1583
- ], nt = ["", "start", "end", "center", "stretch"], dt = (n, t, i) => `:host([${n}${i ? `--${i}` : ""}='${t}']) .grid`, lt = "px-spacing", bt = d(
1619
+ ], dt = ["", "start", "end", "center", "stretch"], lt = (s, t, i) => `:host([${s}${i ? `--${i}` : ""}='${t}']) .grid`, ct = "px-spacing", gt = d(
1584
1620
  "gap",
1585
- dt,
1586
- C,
1587
1621
  lt,
1622
+ w,
1623
+ ct,
1588
1624
  "--grid-gap"
1589
- ), y = class y extends S {
1625
+ ), x = class x extends S {
1590
1626
  constructor() {
1591
- super(B, bt), this.template = () => `<div class="grid">
1627
+ super(B, gt), this.template = () => `<div class="grid">
1592
1628
  <slot></slot>
1593
1629
  </div>`, this.shadowRoot.innerHTML = this.template();
1594
1630
  }
@@ -1631,7 +1667,7 @@ const at = [
1631
1667
  case "grid-cols--mobile":
1632
1668
  case "grid-cols--tablet":
1633
1669
  case "grid-cols--laptop":
1634
- this.updateAttribute(t, i, e, at);
1670
+ this.updateAttribute(t, i, e, nt);
1635
1671
  break;
1636
1672
  case "justify-content":
1637
1673
  case "align-content":
@@ -1664,7 +1700,7 @@ const at = [
1664
1700
  t,
1665
1701
  i,
1666
1702
  e,
1667
- nt
1703
+ dt
1668
1704
  );
1669
1705
  break;
1670
1706
  default:
@@ -1674,7 +1710,7 @@ const at = [
1674
1710
  }
1675
1711
  updateGap(t, i, e) {
1676
1712
  if (!this.checkName(e, i)) {
1677
- s(
1713
+ n(
1678
1714
  `${i} is not an allowed gap value for ${this.tagName.toLowerCase()}`
1679
1715
  );
1680
1716
  return;
@@ -1694,7 +1730,7 @@ const at = [
1694
1730
  o(t), o(i);
1695
1731
  }
1696
1732
  updateAttribute(t, i, e, o) {
1697
- 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(
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(
1698
1734
  `${e} is not an allowed ${t} value for ${this.tagName.toLowerCase()}`
1699
1735
  );
1700
1736
  }
@@ -1867,26 +1903,26 @@ const at = [
1867
1903
  this.setAttribute("align-items--desktop", t);
1868
1904
  }
1869
1905
  };
1870
- y.nativeName = "div";
1871
- let m = y;
1872
- customElements.get("px-grid") || customElements.define("px-grid", m);
1906
+ x.nativeName = "div";
1907
+ let f = x;
1908
+ customElements.get("px-grid") || customElements.define("px-grid", f);
1873
1909
  const z = new CSSStyleSheet();
1874
1910
  z.replaceSync(X);
1875
- const x = class x extends S {
1911
+ const A = class A extends S {
1876
1912
  constructor() {
1877
1913
  super(z), this.template = () => `<div class="content-header">
1878
1914
  <div class="contrast-helper"></div>
1879
1915
  <px-section padding-block="l">
1880
- <px-grid gap="none">
1881
- <px-container padding="none" border-radius="none" background-color="none" >
1882
- <div class="content-header-content">
1883
- <px-vstack gap="heading-to-subtitle">
1884
- <px-h1 variant="title-3xl"><slot></slot></px-h1>
1885
- <slot name="subtitle"></slot>
1886
- </px-vstack>
1887
- </div>
1888
- </px-container>
1889
- </px-grid>
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>
1890
1926
  </px-section>
1891
1927
  </div>`, this.shadowRoot.innerHTML = this.template();
1892
1928
  }
@@ -1931,7 +1967,7 @@ const x = class x extends S {
1931
1967
  this.$section.backgroundColor = u.indexOf(e) > 0 ? e : "none";
1932
1968
  break;
1933
1969
  case "background-gradient":
1934
- this.$section.gradient = $.indexOf(e) > 0 ? e : "none";
1970
+ this.$section.gradient = j.indexOf(e) > 0 ? e : "none";
1935
1971
  break;
1936
1972
  case "background-image":
1937
1973
  this.$section.backgroundImage = e;
@@ -1946,7 +1982,7 @@ const x = class x extends S {
1946
1982
  this.$section.backgroundImageLaptop = e;
1947
1983
  break;
1948
1984
  case "background-size":
1949
- this.$section.backgroundSize = A.indexOf(e) > 0 ? e : "";
1985
+ this.$section.backgroundSize = $.indexOf(e) > 0 ? e : "";
1950
1986
  break;
1951
1987
  case "background-position":
1952
1988
  this.$section.backgroundPosition = e;
@@ -1969,29 +2005,29 @@ const x = class x extends S {
1969
2005
  }
1970
2006
  createGridding(t) {
1971
2007
  const i = [
1972
- { prop: "hasGridding", gridAttr: "grid-cols", attr: "col-span" },
2008
+ { prop: "hasGridding", gridProp: "gridCols", attr: "col-span" },
1973
2009
  {
1974
2010
  prop: "hasGriddingMobile",
1975
- gridAttr: "grid-cols--mobile",
2011
+ gridProp: "gridColsMobile",
1976
2012
  attr: "col-span--mobile"
1977
2013
  },
1978
2014
  {
1979
2015
  prop: "hasGriddingTablet",
1980
- gridAttr: "grid-cols--tablet",
2016
+ gridProp: "gridColsTablet",
1981
2017
  attr: "col-span--tablet"
1982
2018
  },
1983
2019
  {
1984
2020
  prop: "hasGriddingLaptop",
1985
- gridAttr: "grid-cols--laptop",
2021
+ gridProp: "gridColsLaptop",
1986
2022
  attr: "col-span--laptop"
1987
2023
  }
1988
2024
  ], e = this.shadowRoot.querySelector(
1989
2025
  "px-grid > px-container"
1990
2026
  );
1991
- t !== null ? i.forEach(({ prop: o, gridAttr: r, attr: a }) => {
1992
- this[o] && (this.$grid.setAttribute(r, "3"), e == null || e.setAttribute(a, "2"));
1993
- }) : i.forEach(({ gridAttr: o, attr: r }) => {
1994
- this.$grid.setAttribute(o, "1"), e == null || e.setAttribute(r, "1");
2027
+ t !== null ? i.forEach(({ prop: o, gridProp: r, attr: a }) => {
2028
+ this[o] && (this.$grid[r] = "3", e.setAttribute(a, "2"));
2029
+ }) : i.forEach(({ gridProp: o, attr: r }) => {
2030
+ this.$grid[o] = "1", e.removeAttribute(r);
1995
2031
  });
1996
2032
  }
1997
2033
  get $grid() {
@@ -2112,9 +2148,9 @@ const x = class x extends S {
2112
2148
  t ? this.setAttribute("min-height", "") : this.removeAttribute("min-height");
2113
2149
  }
2114
2150
  };
2115
- x.nativeName = "div";
2116
- let f = x;
2117
- customElements.get("px-content-header") || customElements.define("px-content-header", f);
2151
+ A.nativeName = "div";
2152
+ let k = A;
2153
+ customElements.get("px-content-header") || customElements.define("px-content-header", k);
2118
2154
  export {
2119
- f as ContentHeader
2155
+ k as ContentHeader
2120
2156
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@proximus/lavender-content-header",
3
- "version": "1.4.5-alpha.9",
3
+ "version": "1.4.5-beta.2",
4
4
  "description": "",
5
5
  "main": "dist/index.es.js",
6
6
  "types": "dist/index.d.ts",