@proximus/lavender-content-header 1.4.2-beta.1 → 1.4.3-alpha.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 +131 -111
  2. package/package.json +1 -1
package/dist/index.es.js CHANGED
@@ -1,56 +1,56 @@
1
- import { cssTokenBreakpoints as s, paddingValues as d, VerticallyExtendedElement as z, boxShadowValues as R, backgroundSizeValues as x, noBorderRadiusValues as P, borderRadiusValues as D, borderSideValues as E, borderValues as H, gradientValues as A, backgroundColorValues as p, borderColorValues as O, checkName as $, WithExtraAttributes as j, AttributeBreakpointHandlerDelegate as q, gapValues as C, PxElement as w } from "@proximus/lavender-common";
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";
2
2
  import "@proximus/lavender-heading";
3
- const G = ":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))}}", X = ':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)}}', F = ':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}}', S = new CSSStyleSheet();
4
- S.replaceSync(F);
5
- const l = (n, t, i) => `:host([${n}${i ? `--${i}` : ""}='${t}']) .container`, b = "px-padding", _ = [
6
- s(
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 = [
6
+ d(
7
7
  "padding",
8
- l,
9
- d,
10
8
  b,
9
+ l,
10
+ g,
11
11
  "--container-padding"
12
12
  ),
13
- s(
13
+ d(
14
14
  "padding-inline",
15
+ b,
15
16
  l,
16
- d,
17
- b
17
+ g
18
18
  ),
19
- s(
19
+ d(
20
20
  "padding-block",
21
+ b,
21
22
  l,
22
- d,
23
- b
23
+ g
24
24
  ),
25
- s(
25
+ d(
26
26
  "padding-top",
27
+ b,
27
28
  l,
28
- d,
29
- b
29
+ g
30
30
  ),
31
- s(
31
+ d(
32
32
  "padding-right",
33
- l,
34
- d,
35
33
  b,
34
+ l,
35
+ g,
36
36
  "--container-padding-right"
37
37
  ),
38
- s(
38
+ d(
39
39
  "padding-bottom",
40
+ b,
40
41
  l,
41
- d,
42
- b
42
+ g
43
43
  ),
44
- s(
44
+ d(
45
45
  "padding-left",
46
- l,
47
- d,
48
46
  b,
47
+ l,
48
+ g,
49
49
  "--container-padding-left"
50
50
  )
51
- ], k = class k extends z {
51
+ ], v = class v extends R {
52
52
  constructor() {
53
- super(S, ..._), this.template = () => `<div class="container">
53
+ super(L, ...N), this.template = () => `<div class="container">
54
54
  <slot></slot>
55
55
  <slot name="anchor-left"></slot>
56
56
  <slot name="anchor-right"></slot>
@@ -112,7 +112,7 @@ const l = (n, t, i) => `:host([${n}${i ? `--${i}` : ""}='${t}']) .container`, b
112
112
  if (i !== e)
113
113
  switch (t) {
114
114
  case "border":
115
- this.updateAttribute(t, i, e, H);
115
+ this.updateAttribute(t, i, e, E);
116
116
  break;
117
117
  case "border-color":
118
118
  this.updateBorderColor(t, e);
@@ -121,14 +121,14 @@ const l = (n, t, i) => `:host([${n}${i ? `--${i}` : ""}='${t}']) .container`, b
121
121
  case "border-side--mobile":
122
122
  case "border-side--tablet":
123
123
  case "border-side--laptop":
124
- this.updateAttribute(t, i, e, E);
124
+ this.updateAttribute(t, i, e, O);
125
125
  break;
126
126
  case "border-radius":
127
127
  this.updateAttribute(
128
128
  t,
129
129
  i,
130
130
  e,
131
- D
131
+ H
132
132
  );
133
133
  break;
134
134
  case "no-border-radius":
@@ -139,7 +139,7 @@ const l = (n, t, i) => `:host([${n}${i ? `--${i}` : ""}='${t}']) .container`, b
139
139
  t,
140
140
  i,
141
141
  e,
142
- P
142
+ D
143
143
  );
144
144
  break;
145
145
  case "background-color":
@@ -159,7 +159,7 @@ const l = (n, t, i) => `:host([${n}${i ? `--${i}` : ""}='${t}']) .container`, b
159
159
  t,
160
160
  i,
161
161
  e,
162
- x
162
+ A
163
163
  );
164
164
  break;
165
165
  case "background-image":
@@ -172,10 +172,10 @@ const l = (n, t, i) => `:host([${n}${i ? `--${i}` : ""}='${t}']) .container`, b
172
172
  e !== null && e !== "" && (this.$el.style.backgroundPosition = e);
173
173
  break;
174
174
  case "box-shadow":
175
- this.updateAttribute(t, i, e, R);
175
+ this.updateAttribute(t, i, e, P);
176
176
  break;
177
177
  case "anchor-offset":
178
- this.updateAnchorOffset(i, e, d);
178
+ this.updateAnchorOffset(i, e, l);
179
179
  break;
180
180
  default:
181
181
  super.attributeChangedCallback(t, i, e);
@@ -197,7 +197,7 @@ const l = (n, t, i) => `:host([${n}${i ? `--${i}` : ""}='${t}']) .container`, b
197
197
  this.$el.style.setProperty(`--${t}`, `url("${i}")`);
198
198
  }
199
199
  updateGradient(t, i) {
200
- if (this.checkName(A, i)) {
200
+ if (this.checkName($, i)) {
201
201
  const e = this.splitAttrNameFromBreakpoint(t);
202
202
  t = e.attrName;
203
203
  const o = e.breakpoint;
@@ -206,11 +206,13 @@ const l = (n, t, i) => `:host([${n}${i ? `--${i}` : ""}='${t}']) .container`, b
206
206
  `linear-gradient(var(--px-color-background-gradient-${i}))`
207
207
  );
208
208
  } else
209
- console.error(`${i} is not an allowed background-gradient value`);
209
+ n(
210
+ `${i} is not an allowed ${t} value for ${this.tagName.toLowerCase()}`
211
+ );
210
212
  }
211
213
  updateBackgroundColor(t, i) {
212
214
  const e = i.startsWith("surface-");
213
- if (this.checkName(p, i)) {
215
+ if (this.checkName(u, i)) {
214
216
  const o = this.splitAttrNameFromBreakpoint(t), r = o.breakpoint;
215
217
  this.$el.style.setProperty(
216
218
  `--${o.attrName}${r}`,
@@ -220,20 +222,26 @@ const l = (n, t, i) => `:host([${n}${i ? `--${i}` : ""}='${t}']) .container`, b
220
222
  `var(--px-color-background-${i}${e ? "" : "-inverted"})`
221
223
  );
222
224
  } else
223
- console.error(`${i} is not an allowed ${t} value`);
225
+ n(
226
+ `${i} is not an allowed ${t} value for ${this.tagName.toLowerCase()}`
227
+ );
224
228
  }
225
229
  updateBorderColor(t, i) {
226
- this.checkName(O, i) ? (this.$el.style.setProperty(
230
+ this.checkName(q, i) ? (this.$el.style.setProperty(
227
231
  `--${t}`,
228
232
  `var(--px-color-border-${i}-default)`
229
233
  ), this.$el.style.setProperty(
230
234
  `--${t}-inverted`,
231
235
  `var(--px-color-border-${i}-inverted)`
232
- )) : console.error(`${i} is not an allowed ${t} value`);
236
+ )) : n(
237
+ `${i} is not an allowed ${t} value for ${this.tagName.toLowerCase()}`
238
+ );
233
239
  }
234
240
  updateNoBorderRadius(t, i, e, o) {
235
241
  if (!this.checkName(o, e))
236
- console.error(`${e} is not an allowed ${t} value`);
242
+ n(
243
+ `${e} is not an allowed ${t} value for ${this.tagName.toLowerCase()}`
244
+ );
237
245
  else {
238
246
  const r = this.splitAttrNameFromBreakpoint(t), a = r.breakpoint;
239
247
  i !== null && i !== "" && this.$el.classList.toggle(
@@ -245,7 +253,9 @@ const l = (n, t, i) => `:host([${n}${i ? `--${i}` : ""}='${t}']) .container`, b
245
253
  }
246
254
  updateAttribute(t, i, e, o) {
247
255
  if (!this.checkName(o, e))
248
- console.error(`${e} is not an allowed ${t} value`);
256
+ n(
257
+ `${e} is not an allowed ${t} value for ${this.tagName.toLowerCase()}`
258
+ );
249
259
  else {
250
260
  const r = this.splitAttrNameFromBreakpoint(t), a = r.breakpoint;
251
261
  i !== null && i !== "" && this.$el.classList.toggle(
@@ -266,8 +276,10 @@ const l = (n, t, i) => `:host([${n}${i ? `--${i}` : ""}='${t}']) .container`, b
266
276
  return { attrName: t, breakpoint: i };
267
277
  }
268
278
  updateAnchorOffset(t, i, e) {
269
- if (!$(e, i)) {
270
- console.error(`${i} is not a valid anchor-offset value`);
279
+ if (!j(e, i)) {
280
+ n(
281
+ `${i} is not a valid anchor-offset value for ${this.tagName.toLowerCase()}`
282
+ );
271
283
  return;
272
284
  }
273
285
  const o = (r) => {
@@ -627,9 +639,9 @@ const l = (n, t, i) => `:host([${n}${i ? `--${i}` : ""}='${t}']) .container`, b
627
639
  this.setAttribute("inverted", t);
628
640
  }
629
641
  };
630
- k.nativeName = "div";
631
- let u = k;
632
- customElements.get("px-container") || customElements.define("px-container", u);
642
+ v.nativeName = "div";
643
+ let h = v;
644
+ customElements.get("px-container") || customElements.define("px-container", h);
633
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();
634
646
  T.replaceSync(Z);
635
647
  const W = [
@@ -657,9 +669,9 @@ const W = [
657
669
  "space-around",
658
670
  "space-evenly"
659
671
  ], K = ["", "default", "nowrap", "wrap", "wrap-reverse"], Q = ["", "visible", "hidden", "scroll", "auto"];
660
- class f extends j {
672
+ class k extends C {
661
673
  constructor() {
662
- super(T), this.overflowXAttributeDelegate = new q(
674
+ super(T), this.overflowXAttributeDelegate = new G(
663
675
  this,
664
676
  "overflow-x",
665
677
  (t) => t,
@@ -713,7 +725,7 @@ class f extends j {
713
725
  case "gap--tablet":
714
726
  case "gap--laptop":
715
727
  case "gap--desktop":
716
- this.updateFlexProperties(t, i, e, C);
728
+ this.updateFlexProperties(t, i, e, w);
717
729
  break;
718
730
  case "justify-content":
719
731
  case "justify-content--mobile":
@@ -761,8 +773,10 @@ class f extends j {
761
773
  }
762
774
  }
763
775
  updateOverflowX(t, i, e, o) {
764
- if (!$(o, e)) {
765
- console.error(`${e} is not an allowed ${t} value`);
776
+ if (!j(o, e)) {
777
+ n(
778
+ `${e} is not an allowed ${t} value for ${this.tagName.toLowerCase()}`
779
+ );
766
780
  return;
767
781
  }
768
782
  this.overflowXAttributeDelegate.attributeChangedCallback(
@@ -772,15 +786,17 @@ class f extends j {
772
786
  );
773
787
  }
774
788
  updateFlexProperties(t, i, e, o) {
775
- this.checkName(o, e) || console.error(`${e} is not a valid value for ${o}`);
789
+ this.checkName(o, e) || n(
790
+ `${e} is not an allowed ${t} value for ${this.tagName.toLowerCase()}`
791
+ );
776
792
  const r = t.indexOf("--") > -1, a = r ? t.split("--")[0] : t, c = [];
777
793
  if (!r)
778
- 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((g) => {
779
- this.updateStyle(a, g, i, o), this.updateStyle(a, g, e, o);
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);
780
796
  });
781
797
  else {
782
- const g = t.split("--")[1];
783
- this.updateStyle(a, g, i, o), this.updateStyle(a, g, e, o);
798
+ const p = t.split("--")[1];
799
+ this.updateStyle(a, p, i, o), this.updateStyle(a, p, e, o);
784
800
  }
785
801
  }
786
802
  updateStyle(t, i, e, o) {
@@ -976,8 +992,8 @@ class f extends j {
976
992
  return this.shadowRoot.querySelector(".flex-container");
977
993
  }
978
994
  }
979
- customElements.get("px-stack") || customElements.define("px-stack", f);
980
- class U extends f {
995
+ customElements.get("px-stack") || customElements.define("px-stack", k);
996
+ class U extends k {
981
997
  constructor() {
982
998
  super();
983
999
  }
@@ -986,7 +1002,7 @@ class U extends f {
986
1002
  }
987
1003
  }
988
1004
  customElements.get("px-vstack") || customElements.define("px-vstack", U);
989
- class N extends f {
1005
+ class V extends k {
990
1006
  constructor() {
991
1007
  super();
992
1008
  }
@@ -994,8 +1010,8 @@ class N extends f {
994
1010
  super.connectedCallback(), this.direction = "row", this.directionMobile = "row", this.directionTablet = "row", this.directionLaptop = "row", this.directionDesktop = "row";
995
1011
  }
996
1012
  }
997
- customElements.get("px-hstack") || customElements.define("px-hstack", N);
998
- class V extends HTMLElement {
1013
+ customElements.get("px-hstack") || customElements.define("px-hstack", V);
1014
+ class tt extends HTMLElement {
999
1015
  constructor() {
1000
1016
  super(), this.isZeroSized = !1, this.growValue = "1", this.isVertical = !1;
1001
1017
  }
@@ -1042,12 +1058,12 @@ class V extends HTMLElement {
1042
1058
  t ? this.setAttribute("nogap", "") : this.removeAttribute("nogap");
1043
1059
  }
1044
1060
  }
1045
- customElements.get("px-spacer") || customElements.define("px-spacer", V);
1046
- const tt = ":host{display:block;box-sizing:border-box}slot[name=body-container]{min-height:100vh}#image-sticky-box{margin-top:-2.5em}", L = new CSSStyleSheet();
1047
- L.replaceSync(tt);
1048
- class et extends j {
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 {
1049
1065
  constructor() {
1050
- super(L), this.template = (t) => `
1066
+ super(I), this.template = (t) => `
1051
1067
  <px-container border-radius="none" padding="none">
1052
1068
  <px-vstack>
1053
1069
  <px-container id="header-container" border-radius="none">
@@ -1224,7 +1240,7 @@ class et extends j {
1224
1240
  case "background-color":
1225
1241
  this.$bodyContainer.setAttribute(
1226
1242
  "background-color",
1227
- p.indexOf(e) > 0 ? e : "none"
1243
+ u.indexOf(e) > 0 ? e : "none"
1228
1244
  );
1229
1245
  break;
1230
1246
  case "padding-vertical":
@@ -1244,10 +1260,10 @@ class et extends j {
1244
1260
  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;
1245
1261
  }
1246
1262
  }
1247
- customElements.get("px-page") === void 0 && customElements.define("px-page", et);
1248
- const I = new CSSStyleSheet();
1249
- I.replaceSync(X);
1250
- class it extends HTMLElement {
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 {
1251
1267
  constructor() {
1252
1268
  super(), this.template = () => `
1253
1269
  <px-container border-radius="none" padding-inline="none" background-color="${this.backgroundColor}">
@@ -1263,7 +1279,7 @@ class it extends HTMLElement {
1263
1279
  <div class="content-wrapper">
1264
1280
  <slot name="overlap"></slot>
1265
1281
  </div>
1266
- `, this.attachShadow({ mode: "open" }), this.shadowRoot.innerHTML = this.template(), this.shadowRoot.adoptedStyleSheets = [I];
1282
+ `, this.attachShadow({ mode: "open" }), this.shadowRoot.innerHTML = this.template(), this.shadowRoot.adoptedStyleSheets = [M];
1267
1283
  }
1268
1284
  connectedCallback() {
1269
1285
  const t = this.querySelector('[slot="heading"]');
@@ -1305,7 +1321,7 @@ class it extends HTMLElement {
1305
1321
  if (i !== e)
1306
1322
  switch (t) {
1307
1323
  case "background-color":
1308
- this.$container.backgroundColor = p.indexOf(e) > 0 ? e : "none";
1324
+ this.$container.backgroundColor = u.indexOf(e) > 0 ? e : "none";
1309
1325
  break;
1310
1326
  case "background-gradient":
1311
1327
  this.$container.gradient = this.gradient;
@@ -1535,10 +1551,10 @@ class it extends HTMLElement {
1535
1551
  this.setAttribute("border-side--laptop", t);
1536
1552
  }
1537
1553
  }
1538
- customElements.get("px-section") || customElements.define("px-section", it);
1539
- const ot = ":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}}", M = new CSSStyleSheet();
1540
- M.replaceSync(ot);
1541
- const rt = [
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 = [
1542
1558
  "1",
1543
1559
  "2",
1544
1560
  "3",
@@ -1551,7 +1567,7 @@ const rt = [
1551
1567
  "10",
1552
1568
  "11",
1553
1569
  "12"
1554
- ], at = [
1570
+ ], nt = [
1555
1571
  "",
1556
1572
  "start",
1557
1573
  "end",
@@ -1560,15 +1576,15 @@ const rt = [
1560
1576
  "space-around",
1561
1577
  "space-evenly",
1562
1578
  "stretch"
1563
- ], nt = ["", "start", "end", "center", "stretch"], st = (n, t, i) => `:host([${n}${i ? `--${i}` : ""}='${t}']) .grid`, dt = "px-spacing", lt = s(
1579
+ ], st = ["", "start", "end", "center", "stretch"], dt = (s, t, i) => `:host([${s}${i ? `--${i}` : ""}='${t}']) .grid`, lt = "px-spacing", bt = d(
1564
1580
  "gap",
1565
- st,
1566
- C,
1567
1581
  dt,
1582
+ w,
1583
+ lt,
1568
1584
  "--grid-gap"
1569
- ), v = class v extends w {
1585
+ ), y = class y extends S {
1570
1586
  constructor() {
1571
- super(M, lt), this.template = () => `<div class="grid">
1587
+ super(B, bt), this.template = () => `<div class="grid">
1572
1588
  <slot></slot>
1573
1589
  </div>`, this.shadowRoot.innerHTML = this.template();
1574
1590
  }
@@ -1611,7 +1627,7 @@ const rt = [
1611
1627
  case "grid-cols--mobile":
1612
1628
  case "grid-cols--tablet":
1613
1629
  case "grid-cols--laptop":
1614
- this.updateAttribute(t, i, e, rt);
1630
+ this.updateAttribute(t, i, e, at);
1615
1631
  break;
1616
1632
  case "justify-content":
1617
1633
  case "align-content":
@@ -1627,7 +1643,7 @@ const rt = [
1627
1643
  t,
1628
1644
  i,
1629
1645
  e,
1630
- at
1646
+ nt
1631
1647
  );
1632
1648
  break;
1633
1649
  case "justify-items":
@@ -1644,7 +1660,7 @@ const rt = [
1644
1660
  t,
1645
1661
  i,
1646
1662
  e,
1647
- nt
1663
+ st
1648
1664
  );
1649
1665
  break;
1650
1666
  default:
@@ -1654,7 +1670,9 @@ const rt = [
1654
1670
  }
1655
1671
  updateGap(t, i, e) {
1656
1672
  if (!this.checkName(e, i)) {
1657
- console.error(`${i} is not a valid gap value`);
1673
+ n(
1674
+ `${i} is not an allowed gap value for ${this.tagName.toLowerCase()}`
1675
+ );
1658
1676
  return;
1659
1677
  }
1660
1678
  const o = (r) => {
@@ -1672,7 +1690,9 @@ const rt = [
1672
1690
  o(t), o(i);
1673
1691
  }
1674
1692
  updateAttribute(t, i, e, o) {
1675
- 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}`)) : console.error(`${e} is not an allowed ${t} value`);
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()}`
1695
+ );
1676
1696
  }
1677
1697
  get gap() {
1678
1698
  return this.getAttribute("gap");
@@ -1843,14 +1863,14 @@ const rt = [
1843
1863
  this.setAttribute("align-items--desktop", t);
1844
1864
  }
1845
1865
  };
1846
- v.nativeName = "div";
1847
- let h = v;
1848
- customElements.get("px-grid") || customElements.define("px-grid", h);
1849
- const B = new CSSStyleSheet();
1850
- B.replaceSync(G);
1851
- const y = class y extends w {
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 {
1852
1872
  constructor() {
1853
- super(B), this.template = () => `<div class="content-header">
1873
+ super(z), this.template = () => `<div class="content-header">
1854
1874
  <div class="contrast-helper"></div>
1855
1875
  <px-section padding-block="l">
1856
1876
  <px-grid gap="none">
@@ -1898,10 +1918,10 @@ const y = class y extends w {
1898
1918
  if (i !== e)
1899
1919
  switch (t) {
1900
1920
  case "background-color":
1901
- this.$section.backgroundColor = p.indexOf(e) > 0 ? e : "none";
1921
+ this.$section.backgroundColor = u.indexOf(e) > 0 ? e : "none";
1902
1922
  break;
1903
1923
  case "background-gradient":
1904
- this.$section.gradient = A.indexOf(e) > 0 ? e : "none";
1924
+ this.$section.gradient = $.indexOf(e) > 0 ? e : "none";
1905
1925
  break;
1906
1926
  case "background-image":
1907
1927
  this.$section.backgroundImage = e;
@@ -1916,7 +1936,7 @@ const y = class y extends w {
1916
1936
  this.$section.backgroundImageLaptop = e;
1917
1937
  break;
1918
1938
  case "background-size":
1919
- this.$section.backgroundSize = x.indexOf(e) > 0 ? e : "";
1939
+ this.$section.backgroundSize = A.indexOf(e) > 0 ? e : "";
1920
1940
  break;
1921
1941
  case "background-position":
1922
1942
  this.$section.backgroundPosition = e;
@@ -1939,29 +1959,29 @@ const y = class y extends w {
1939
1959
  }
1940
1960
  createGridding(t) {
1941
1961
  const i = [
1942
- { prop: "hasGridding", gridProp: "gridCols", attr: "col-span" },
1962
+ { prop: "hasGridding", gridAttr: "grid-cols", attr: "col-span" },
1943
1963
  {
1944
1964
  prop: "hasGriddingMobile",
1945
- gridProp: "gridColsMobile",
1965
+ gridAttr: "grid-cols--mobile",
1946
1966
  attr: "col-span--mobile"
1947
1967
  },
1948
1968
  {
1949
1969
  prop: "hasGriddingTablet",
1950
- gridProp: "gridColsTablet",
1970
+ gridAttr: "grid-cols--tablet",
1951
1971
  attr: "col-span--tablet"
1952
1972
  },
1953
1973
  {
1954
1974
  prop: "hasGriddingLaptop",
1955
- gridProp: "gridColsLaptop",
1975
+ gridAttr: "grid-cols--laptop",
1956
1976
  attr: "col-span--laptop"
1957
1977
  }
1958
1978
  ], e = this.shadowRoot.querySelector(
1959
1979
  "px-grid > px-container"
1960
1980
  );
1961
- t !== null ? i.forEach(({ prop: o, gridProp: r, attr: a }) => {
1962
- this[o] && (this.$grid[r] = "3", e.setAttribute(a, "2"));
1963
- }) : i.forEach(({ gridProp: o, attr: r }) => {
1964
- this.$grid[o] = "1", e.removeAttribute(r);
1981
+ t !== null ? i.forEach(({ prop: o, gridAttr: r, attr: a }) => {
1982
+ this[o] && (this.$grid.setAttribute(r, "3"), e == null || e.setAttribute(a, "2"));
1983
+ }) : i.forEach(({ gridAttr: o, attr: r }) => {
1984
+ this.$grid.setAttribute(o, "1"), e == null || e.setAttribute(r, "1");
1965
1985
  });
1966
1986
  }
1967
1987
  get $grid() {
@@ -2082,9 +2102,9 @@ const y = class y extends w {
2082
2102
  t ? this.setAttribute("min-height", "") : this.removeAttribute("min-height");
2083
2103
  }
2084
2104
  };
2085
- y.nativeName = "div";
2086
- let m = y;
2087
- customElements.get("px-content-header") || customElements.define("px-content-header", m);
2105
+ x.nativeName = "div";
2106
+ let f = x;
2107
+ customElements.get("px-content-header") || customElements.define("px-content-header", f);
2088
2108
  export {
2089
- m as ContentHeader
2109
+ f as ContentHeader
2090
2110
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@proximus/lavender-content-header",
3
- "version": "1.4.2-beta.1",
3
+ "version": "1.4.3-alpha.2",
4
4
  "description": "",
5
5
  "main": "dist/index.es.js",
6
6
  "types": "dist/index.d.ts",