@proximus/lavender-container 2.0.0-alpha.73 → 2.0.0-alpha.75

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 +75 -75
  2. package/package.json +1 -1
package/dist/index.es.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import { cssTokenBreakpoints as a, paddingValues as d, gapValues as k, WithExtraAttributes as v, boxShadowValues as m, backgroundSizeValues as f, noBorderRadiusValues as A, borderRadiusValues as y, borderSideValues as x, borderValues as $, gradientValues as w, log as s, backgroundColorValues as L, borderColorValues as B, checkName as g } from "@proximus/lavender-common";
2
- const C = ':host{display:block}.container{font-family:var(--px-font-family);background-color:var(--background-color);border-radius:var(--px-radius-main);box-sizing:border-box;height:100%}:host([background-image]) .container{background-image:var(--background-image)}:host([background-gradient]) .container{background-image:var(--background-gradient)}:host([inverted]) .container{background-color:var(--background-color-inverted);color:var(--px-color-text-neutral-inverted)}.border-none{border:none}.border-s{border:var(--px-size-border-s) solid var(--border-color)}.border-m{border:var(--px-size-border-m) solid var(--border-color)}.border-l{border:var(--px-size-border-l) solid var(--border-color)}.border-side-top{border-bottom-style:none;border-right-style:none;border-left-style:none}.border-side-right{border-top-style:none;border-bottom-style:none;border-left-style:none}.border-side-bottom{border-top-style:none;border-right-style:none;border-left-style:none}.border-side-left{border-top-style:none;border-right-style:none;border-bottom-style:none}.border-side-block{border-inline-style:none}.border-side-inline{border-block-style:none}:host([inverted]) .border-s,:host([inverted]) .border-m,:host([inverted]) .border-l{border-color:var(--border-color-inverted)}.border-radius-main{border-radius:var(--px-radius-main)}.border-radius-pill{border-radius:var(--px-radius-pill)}.no-border-radius-top{border-top-left-radius:var(--px-radius-none);border-top-right-radius:var(--px-radius-none)}.no-border-radius-right{border-top-right-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-bottom{border-bottom-left-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-left{border-top-left-radius:var(--px-radius-none);border-bottom-left-radius:var(--px-radius-none)}.no-border-radius-all,.border-radius-none{border-radius:var(--px-radius-none)}.bgimg{background-repeat:no-repeat}.background-size-cover{background-size:cover;background-position:center center}.background-size-contain{background-size:contain}.box-shadow-none{box-shadow:none}.box-shadow-s{box-shadow:0 1px 2px #2525251f}.box-shadow-m{box-shadow:0 4px 6px -1px #25252514}.box-shadow-l{box-shadow:0 10px 15px -3px #25252514}.box-shadow-xl{box-shadow:0 20px 25px -5px #25252514}.anchored{position:relative}::slotted([slot="anchor-right"]),::slotted([slot="anchor-left"]),::slotted([slot="anchor-full"]){position:absolute;top:0}::slotted([slot="anchor-right"]),::slotted([slot="anchor-left"]){transform:translateY(-50%);z-index:3}::slotted([slot="anchor-right"]){right:var( --container-anchor-offset--mobile, var( --container-padding-right, var(--container-padding-inline, var(--container-padding)) ) )}::slotted([slot="anchor-left"]){left:var( --container-anchor-offset--mobile, var( --container-padding-left, var(--container-padding-inline, var(--container-padding)) ) )}::slotted([slot="anchor-full"]){transform:translateY(-100%);right:0;left:0;text-align:center;z-index:2}::slotted(px-vstack:only-of-type),::slotted(px-hstack:only-of-type),::slotted(px-stack:only-of-type),::slotted(px-grid:only-of-type){height:100%}:host([anchor-spacing]){margin-top:var(--container-anchor-spacing--mobile)}.border-s ::slotted([slot="anchor-full"]){right:calc(var(--px-size-border-s) * -1);left:calc(var(--px-size-border-s) * -1)}.border-m ::slotted([slot="anchor-full"]){right:calc(var(--px-size-border-m) * -1);left:calc(var(--px-size-border-m) * -1)}.border-l ::slotted([slot="anchor-full"]){right:calc(var(--px-size-border-l) * -1);left:calc(var(--px-size-border-l) * -1)}:host([subgrid-rows]){display:contents}:host([subgrid-rows]) .container{display:grid;grid-template-rows:subgrid;grid-row:span var(--subgrid-rows)}:host([subgrid-rows]):host([grow]) .container{flex-grow:var(--grow-value)}:host([subgrid-rows]):host([shrink]) .container{flex-shrink:var(--shrink-value)}:host([subgrid-rows]):host([basis]) .container{flex-basis:var(--basis-value)}:host([subgrid-rows]):host([align-self]) .container{align-self:var(--align-self-value)}:host([subgrid-rows]):host([col-span]) .container{grid-column:span var(--col-span-value) / span var(--col-span-value)}:host([subgrid-rows]):host([justify-self]) .container{justify-self:var(--justify-self-value)}:host([subgrid-rows]):host([order]) .container{order:var(--order-value)}@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)}:host([subgrid-rows]):host([grow--mobile]) .container{flex-grow:var(--grow--mobile-value)}:host([subgrid-rows]):host([shrink--mobile]) .container{flex-shrink:var(--shrink--mobile-value)}:host([subgrid-rows]):host([basis--mobile]) .container{flex-basis:var(--basis--mobile-value)}:host([subgrid-rows]):host([align-self--mobile]) .container{align-self:var(--align-self--mobile-value)}:host([subgrid-rows]):host([col-span--mobile]) .container{grid-column:span var(--col-span--mobile-value) / span var(--col-span--mobile-value)}:host([subgrid-rows]):host([justify-self--mobile]) .container{justify-self:var(--justify-self--mobile-value)}:host([subgrid-rows]):host([order--mobile]) .container{order:var(--order--mobile-value)}}@media 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)}:host([subgrid-rows]):host([col-span--tablet]) .container{grid-column:span var(--col-span--tablet-value) / span var(--col-span--tablet-value)}:host([subgrid-rows]):host([grow--tablet]) .container{flex-grow:var(--grow--tablet-value)}:host([subgrid-rows]):host([shrink--tablet]) .container{flex-shrink:var(--shrink--tablet-value)}:host([subgrid-rows]):host([basis--tablet]) .container{flex-basis:var(--basis--tablet-value)}:host([subgrid-rows]):host([align-self--tablet]) .container{align-self:var(--align-self--tablet-value)}:host([subgrid-rows]):host([justify-self--tablet]) .container{justify-self:var(--justify-self--tablet-value)}:host([subgrid-rows]):host([order--tablet]) .container{order:var(--order--tablet-value)}}@media only screen and (min-width: 1025px) and (max-width: 1440px){:host([subgrid-rows]):host([col-span--laptop]) .container{grid-column:span var(--col-span--laptop-value) / span var(--col-span--laptop-value)}:host([subgrid-rows]):host([grow--laptop]) .container{flex-grow:var(--grow--laptop-value)}:host([subgrid-rows]):host([shrink--laptop]) .container{flex-shrink:var(--shrink--laptop-value)}:host([subgrid-rows]):host([basis--laptop]) .container{flex-basis:var(--basis--laptop-value)}:host([subgrid-rows]):host([align-self--laptop]) .container{align-self:var(--align-self--laptop-value)}:host([subgrid-rows]):host([justify-self--laptop]) .container{justify-self:var(--justify-self--laptop-value)}:host([subgrid-rows]):host([order--laptop]) .container{order:var(--order--laptop-value)}}@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}}@media screen and (min-width: 1441px){:host([subgrid-rows]):host([col-span--desktop]) .container{grid-column:span var(--col-span--desktop-value) / span var(--col-span--desktop-value)}:host([subgrid-rows]):host([grow--desktop]) .container{flex-grow:var(--grow--desktop-value)}:host([subgrid-rows]):host([shrink--desktop]) .container{flex-shrink:var(--shrink--desktop-value)}:host([subgrid-rows]):host([basis--desktop]) .container{flex-basis:var(--basis--desktop-value)}:host([subgrid-rows]):host([align-self--desktop]) .container{align-self:var(--align-self--desktop-value)}:host([subgrid-rows]):host([justify-self--desktop]) .container{justify-self:var(--justify-self--desktop-value)}:host([subgrid-rows]):host([order--desktop]) .container{order:var(--order--desktop-value)}}', c = new CSSStyleSheet();
2
+ const C = ':host{display:block}.container{font-family:var(--px-font-family);background-color:var(--background-color);border-radius:var(--px-radius-main);box-sizing:border-box;height:100%}:host([background-image]) .container{background-image:var(--background-image)}:host([background-gradient]) .container{background-image:var(--background-gradient)}:host([inverted]) .container{background-color:var(--background-color-inverted);color:var(--px-color-text-neutral-inverted)}.border-none{border:none}.border-s{border:var(--px-size-border-s) solid var(--border-color)}.border-m{border:var(--px-size-border-m) solid var(--border-color)}.border-l{border:var(--px-size-border-l) solid var(--border-color)}.border-side-top{border-bottom-style:none;border-right-style:none;border-left-style:none}.border-side-right{border-top-style:none;border-bottom-style:none;border-left-style:none}.border-side-bottom{border-top-style:none;border-right-style:none;border-left-style:none}.border-side-left{border-top-style:none;border-right-style:none;border-bottom-style:none}.border-side-block{border-inline-style:none}.border-side-inline{border-block-style:none}:host([inverted]) .border-s,:host([inverted]) .border-m,:host([inverted]) .border-l{border-color:var(--border-color-inverted)}.border-radius-main{border-radius:var(--px-radius-main)}.border-radius-pill{border-radius:var(--px-radius-pill)}.no-border-radius-top{border-top-left-radius:var(--px-radius-none);border-top-right-radius:var(--px-radius-none)}.no-border-radius-right{border-top-right-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-bottom{border-bottom-left-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-left{border-top-left-radius:var(--px-radius-none);border-bottom-left-radius:var(--px-radius-none)}.no-border-radius-all,.border-radius-none{border-radius:var(--px-radius-none)}.bgimg{background-repeat:no-repeat}.background-size-cover{background-size:cover;background-position:center center}.background-size-contain{background-size:contain}.box-shadow-none{box-shadow:none}.box-shadow-s{box-shadow:0 1px 2px #2525251f}.box-shadow-m{box-shadow:0 4px 6px -1px #25252514}.box-shadow-l{box-shadow:0 10px 15px -3px #25252514}.box-shadow-xl{box-shadow:0 20px 25px -5px #25252514}.anchored{position:relative}::slotted([slot="anchor-right"]),::slotted([slot="anchor-left"]),::slotted([slot="anchor-full"]){position:absolute;top:0}::slotted([slot="anchor-right"]),::slotted([slot="anchor-left"]){transform:translateY(-50%);z-index:3}::slotted([slot="anchor-right"]){right:var( --container-anchor-offset--mobile, var( --container-padding-right, var(--container-padding-inline, var(--container-padding)) ) )}::slotted([slot="anchor-left"]){left:var( --container-anchor-offset--mobile, var( --container-padding-left, var(--container-padding-inline, var(--container-padding)) ) )}::slotted([slot="anchor-full"]){transform:translateY(-100%);right:0;left:0;text-align:center;z-index:2}::slotted(px-vstack:only-of-type),::slotted(px-hstack:only-of-type),::slotted(px-stack:only-of-type),::slotted(px-grid:only-of-type){height:100%}:host([anchor-spacing]){margin-top:var(--container-anchor-spacing--mobile)}.border-s ::slotted([slot="anchor-full"]){right:calc(var(--px-size-border-s) * -1);left:calc(var(--px-size-border-s) * -1)}.border-m ::slotted([slot="anchor-full"]){right:calc(var(--px-size-border-m) * -1);left:calc(var(--px-size-border-m) * -1)}.border-l ::slotted([slot="anchor-full"]){right:calc(var(--px-size-border-l) * -1);left:calc(var(--px-size-border-l) * -1)}:host([subgrid-rows]){display:contents}:host([subgrid-rows]) .container{display:grid;grid-template-rows:subgrid;grid-row:span var(--subgrid-rows)}:host([subgrid-rows]):host([grow]) .container{flex-grow:var(--grow-value)}:host([subgrid-rows]):host([shrink]) .container{flex-shrink:var(--shrink-value)}:host([subgrid-rows]):host([basis]) .container{flex-basis:var(--basis-value)}:host([subgrid-rows]):host([align-self]) .container{align-self:var(--align-self-value)}:host([subgrid-rows]):host([col-span]) .container{grid-column:span var(--col-span-value) / span var(--col-span-value)}:host([subgrid-rows]):host([justify-self]) .container{justify-self:var(--justify-self-value)}:host([subgrid-rows]):host([order]) .container{order:var(--order-value)}:host([subgrid-rows]):host([anchor-spacing]) .container{margin-top:var(--container-anchor-spacing--mobile)}@media 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)}:host([subgrid-rows]):host([grow--mobile]) .container{flex-grow:var(--grow--mobile-value)}:host([subgrid-rows]):host([shrink--mobile]) .container{flex-shrink:var(--shrink--mobile-value)}:host([subgrid-rows]):host([basis--mobile]) .container{flex-basis:var(--basis--mobile-value)}:host([subgrid-rows]):host([align-self--mobile]) .container{align-self:var(--align-self--mobile-value)}:host([subgrid-rows]):host([col-span--mobile]) .container{grid-column:span var(--col-span--mobile-value) / span var(--col-span--mobile-value)}:host([subgrid-rows]):host([justify-self--mobile]) .container{justify-self:var(--justify-self--mobile-value)}:host([subgrid-rows]):host([order--mobile]) .container{order:var(--order--mobile-value)}}@media 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)}:host([subgrid-rows]):host([col-span--tablet]) .container{grid-column:span var(--col-span--tablet-value) / span var(--col-span--tablet-value)}:host([subgrid-rows]):host([grow--tablet]) .container{flex-grow:var(--grow--tablet-value)}:host([subgrid-rows]):host([shrink--tablet]) .container{flex-shrink:var(--shrink--tablet-value)}:host([subgrid-rows]):host([basis--tablet]) .container{flex-basis:var(--basis--tablet-value)}:host([subgrid-rows]):host([align-self--tablet]) .container{align-self:var(--align-self--tablet-value)}:host([subgrid-rows]):host([justify-self--tablet]) .container{justify-self:var(--justify-self--tablet-value)}:host([subgrid-rows]):host([order--tablet]) .container{order:var(--order--tablet-value)}:host([subgrid-rows]):host([anchor-spacing]) .container{margin-top:var(--container-anchor-spacing--tablet)}}@media only screen and (min-width: 1025px) and (max-width: 1440px){:host([subgrid-rows]):host([col-span--laptop]) .container{grid-column:span var(--col-span--laptop-value) / span var(--col-span--laptop-value)}:host([subgrid-rows]):host([grow--laptop]) .container{flex-grow:var(--grow--laptop-value)}:host([subgrid-rows]):host([shrink--laptop]) .container{flex-shrink:var(--shrink--laptop-value)}:host([subgrid-rows]):host([basis--laptop]) .container{flex-basis:var(--basis--laptop-value)}:host([subgrid-rows]):host([align-self--laptop]) .container{align-self:var(--align-self--laptop-value)}:host([subgrid-rows]):host([justify-self--laptop]) .container{justify-self:var(--justify-self--laptop-value)}:host([subgrid-rows]):host([order--laptop]) .container{order:var(--order--laptop-value)}:host([subgrid-rows]):host([anchor-spacing]) .container{margin-top:var(--container-anchor-spacing--laptop)}}@media 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}}@media screen and (min-width: 1441px){:host([subgrid-rows]):host([col-span--desktop]) .container{grid-column:span var(--col-span--desktop-value) / span var(--col-span--desktop-value)}:host([subgrid-rows]):host([grow--desktop]) .container{flex-grow:var(--grow--desktop-value)}:host([subgrid-rows]):host([shrink--desktop]) .container{flex-shrink:var(--shrink--desktop-value)}:host([subgrid-rows]):host([basis--desktop]) .container{flex-basis:var(--basis--desktop-value)}:host([subgrid-rows]):host([align-self--desktop]) .container{align-self:var(--align-self--desktop-value)}:host([subgrid-rows]):host([justify-self--desktop]) .container{justify-self:var(--justify-self--desktop-value)}:host([subgrid-rows]):host([order--desktop]) .container{order:var(--order--desktop-value)}}', c = new CSSStyleSheet();
3
3
  c.replaceSync(C);
4
4
  const S = [
5
5
  "top-patch",
@@ -20,7 +20,7 @@ const S = [
20
20
  "10",
21
21
  "11",
22
22
  "12"
23
- ], n = (h, t, e) => `:host([${h}${e ? `--${e}` : ""}='${t}']) .container`, b = "px-padding", R = [
23
+ ], n = (h, t, r) => `:host([${h}${r ? `--${r}` : ""}='${t}']) .container`, b = "px-padding", R = [
24
24
  a(
25
25
  "padding",
26
26
  n,
@@ -126,36 +126,36 @@ const S = [
126
126
  subtree: !0,
127
127
  characterData: !0
128
128
  }), this._bgObserver = new IntersectionObserver((t) => {
129
- t.forEach((e) => {
130
- var r;
131
- e.isIntersecting && (this._isInViewport = !0, this._loadBackgroundImages(), (r = this._bgObserver) == null || r.disconnect());
129
+ t.forEach((r) => {
130
+ var e;
131
+ r.isIntersecting && (this._isInViewport = !0, this._loadBackgroundImages(), (e = this._bgObserver) == null || e.disconnect());
132
132
  });
133
133
  }), this._bgObserver.observe(this.$el);
134
134
  }
135
135
  disconnectedCallback() {
136
- var t, e;
137
- (t = this._bgObserver) == null || t.disconnect(), (e = this.contentObserver) == null || e.disconnect();
136
+ var t, r;
137
+ (t = this._bgObserver) == null || t.disconnect(), (r = this.contentObserver) == null || r.disconnect();
138
138
  }
139
- attributeChangedCallback(t, e, r) {
140
- if (e !== r)
139
+ attributeChangedCallback(t, r, e) {
140
+ if (r !== e)
141
141
  switch (t) {
142
142
  case "border":
143
- this.updateAttribute(t, e, r, $);
143
+ this.updateAttribute(t, r, e, $);
144
144
  break;
145
145
  case "border-color":
146
- this.updateBorderColor(t, r);
146
+ this.updateBorderColor(t, e);
147
147
  break;
148
148
  case "border-side":
149
149
  case "border-side--mobile":
150
150
  case "border-side--tablet":
151
151
  case "border-side--laptop":
152
- this.updateAttribute(t, e, r, x);
152
+ this.updateAttribute(t, r, e, x);
153
153
  break;
154
154
  case "border-radius":
155
155
  this.updateAttribute(
156
156
  t,
157
- e,
158
157
  r,
158
+ e,
159
159
  y
160
160
  );
161
161
  break;
@@ -165,8 +165,8 @@ const S = [
165
165
  case "no-border-radius--laptop":
166
166
  this.updateNoBorderRadius(
167
167
  t,
168
- e,
169
168
  r,
169
+ e,
170
170
  A
171
171
  );
172
172
  break;
@@ -174,19 +174,19 @@ const S = [
174
174
  case "background-color--mobile":
175
175
  case "background-color--tablet":
176
176
  case "background-color--laptop":
177
- this.updateBackgroundColor(t, r);
177
+ this.updateBackgroundColor(t, e);
178
178
  break;
179
179
  case "background-gradient":
180
180
  case "background-gradient--mobile":
181
181
  case "background-gradient--tablet":
182
182
  case "background-gradient--laptop":
183
- this.updateGradient(t, r);
183
+ this.updateGradient(t, e);
184
184
  break;
185
185
  case "background-size":
186
186
  this.updateAttribute(
187
187
  t,
188
- e,
189
188
  r,
189
+ e,
190
190
  f
191
191
  );
192
192
  break;
@@ -194,30 +194,30 @@ const S = [
194
194
  case "background-image--mobile":
195
195
  case "background-image--tablet":
196
196
  case "background-image--laptop":
197
- this._isInViewport && this.updateBackgroundImg(t, r);
197
+ this._isInViewport && this.updateBackgroundImg(t, e);
198
198
  break;
199
199
  case "background-position":
200
- r !== null && r !== "" && (this.$el.style.backgroundPosition = r);
200
+ e !== null && e !== "" && (this.$el.style.backgroundPosition = e);
201
201
  break;
202
202
  case "box-shadow":
203
- this.updateAttribute(t, e, r, m);
203
+ this.updateAttribute(t, r, e, m);
204
204
  break;
205
205
  case "anchor-offset":
206
- this.updateAnchorOffset(e, r, d);
206
+ this.updateAnchorOffset(r, e, d);
207
207
  break;
208
208
  case "anchor-spacing":
209
- this.updateAnchorSpacing(e, r, S);
209
+ this.updateAnchorSpacing(r, e, S);
210
210
  break;
211
211
  case "subgrid-rows":
212
212
  this.updateSubgridRows(
213
213
  t,
214
- e,
215
214
  r,
215
+ e,
216
216
  T
217
217
  );
218
218
  break;
219
219
  default:
220
- super.attributeChangedCallback(t, e, r);
220
+ super.attributeChangedCallback(t, r, e);
221
221
  break;
222
222
  }
223
223
  }
@@ -227,97 +227,97 @@ const S = [
227
227
  "background-image--mobile",
228
228
  "background-image--tablet",
229
229
  "background-image--laptop"
230
- ].forEach((e) => {
231
- const r = this.getAttribute(e);
232
- r && this.updateBackgroundImg(e, r);
230
+ ].forEach((r) => {
231
+ const e = this.getAttribute(r);
232
+ e && this.updateBackgroundImg(r, e);
233
233
  });
234
234
  }
235
- updateBackgroundImg(t, e) {
236
- this.$el.style.setProperty(`--${t}`, `url("${e}")`);
235
+ updateBackgroundImg(t, r) {
236
+ this.$el.style.setProperty(`--${t}`, `url("${r}")`);
237
237
  }
238
- updateGradient(t, e) {
239
- if (this.checkName(w, e)) {
240
- const r = this.splitAttrNameFromBreakpoint(t);
241
- t = r.attrName;
242
- const i = r.breakpoint;
238
+ updateGradient(t, r) {
239
+ if (this.checkName(w, r)) {
240
+ const e = this.splitAttrNameFromBreakpoint(t);
241
+ t = e.attrName;
242
+ const i = e.breakpoint;
243
243
  this.$el.style.setProperty(
244
244
  `--${t}${i}`,
245
- `linear-gradient(var(--px-color-background-gradient-${e}))`
245
+ `linear-gradient(var(--px-color-background-gradient-${r}))`
246
246
  );
247
247
  } else
248
248
  s(
249
- `${e} is not an allowed ${t} value for ${this.tagName.toLowerCase()}`
249
+ `${r} is not an allowed ${t} value for ${this.tagName.toLowerCase()}`
250
250
  );
251
251
  }
252
- updateBackgroundColor(t, e) {
253
- const r = e.startsWith("surface-");
254
- if (this.checkName(L, e)) {
252
+ updateBackgroundColor(t, r) {
253
+ const e = r.startsWith("surface-");
254
+ if (this.checkName(L, r)) {
255
255
  const i = this.splitAttrNameFromBreakpoint(t), o = i.breakpoint;
256
256
  this.$el.style.setProperty(
257
257
  `--${i.attrName}${o}`,
258
- `var(--px-color-background-${e}${r ? "" : "-default"})`
258
+ `var(--px-color-background-${r}${e ? "" : "-default"})`
259
259
  ), this.$el.style.setProperty(
260
260
  `--${i.attrName}-inverted${o}`,
261
- `var(--px-color-background-${e}${r ? "" : "-inverted"})`
261
+ `var(--px-color-background-${r}${e ? "" : "-inverted"})`
262
262
  );
263
263
  } else
264
264
  s(
265
- `${e} is not an allowed ${t} value for ${this.tagName.toLowerCase()}`
265
+ `${r} is not an allowed ${t} value for ${this.tagName.toLowerCase()}`
266
266
  );
267
267
  }
268
- updateBorderColor(t, e) {
269
- this.checkName(B, e) ? (this.$el.style.setProperty(
268
+ updateBorderColor(t, r) {
269
+ this.checkName(B, r) ? (this.$el.style.setProperty(
270
270
  `--${t}`,
271
- `var(--px-color-border-${e}-default)`
271
+ `var(--px-color-border-${r}-default)`
272
272
  ), this.$el.style.setProperty(
273
273
  `--${t}-inverted`,
274
- `var(--px-color-border-${e}-inverted)`
274
+ `var(--px-color-border-${r}-inverted)`
275
275
  )) : s(
276
- `${e} is not an allowed ${t} value for ${this.tagName.toLowerCase()}`
276
+ `${r} is not an allowed ${t} value for ${this.tagName.toLowerCase()}`
277
277
  );
278
278
  }
279
- updateNoBorderRadius(t, e, r, i) {
280
- if (!this.checkName(i, r))
279
+ updateNoBorderRadius(t, r, e, i) {
280
+ if (!this.checkName(i, e))
281
281
  s(
282
- `${r} is not an allowed ${t} value for ${this.tagName.toLowerCase()}`
282
+ `${e} is not an allowed ${t} value for ${this.tagName.toLowerCase()}`
283
283
  );
284
284
  else {
285
285
  const o = this.splitAttrNameFromBreakpoint(t), l = o.breakpoint;
286
- e !== null && e !== "" && this.$el.classList.toggle(
287
- `${o.attrName}-${e}${l}`
288
- ), r !== null && r !== "" && this.$el.classList.toggle(
286
+ r !== null && r !== "" && this.$el.classList.toggle(
289
287
  `${o.attrName}-${r}${l}`
288
+ ), e !== null && e !== "" && this.$el.classList.toggle(
289
+ `${o.attrName}-${e}${l}`
290
290
  );
291
291
  }
292
292
  }
293
- updateAttribute(t, e, r, i) {
294
- if (!this.checkName(i, r))
293
+ updateAttribute(t, r, e, i) {
294
+ if (!this.checkName(i, e))
295
295
  s(
296
- `${r} is not an allowed ${t} value for ${this.tagName.toLowerCase()}`
296
+ `${e} is not an allowed ${t} value for ${this.tagName.toLowerCase()}`
297
297
  );
298
298
  else {
299
299
  const o = this.splitAttrNameFromBreakpoint(t), l = o.breakpoint;
300
- e !== null && e !== "" && this.$el.classList.toggle(
301
- `${o.attrName}-${e}${l}`
302
- ), r !== null && r !== "" && this.$el.classList.toggle(
300
+ r !== null && r !== "" && this.$el.classList.toggle(
303
301
  `${o.attrName}-${r}${l}`
302
+ ), e !== null && e !== "" && this.$el.classList.toggle(
303
+ `${o.attrName}-${e}${l}`
304
304
  );
305
305
  }
306
306
  }
307
307
  splitAttrNameFromBreakpoint(t) {
308
- let e = "";
308
+ let r = "";
309
309
  if (["--mobile", "--tablet", "--laptop"].some(
310
- (r) => t.includes(r)
310
+ (e) => t.includes(e)
311
311
  )) {
312
- const r = t.split("--");
313
- t = r[0], e = `--${r[1]}`;
312
+ const e = t.split("--");
313
+ t = e[0], r = `--${e[1]}`;
314
314
  }
315
- return { attrName: t, breakpoint: e };
315
+ return { attrName: t, breakpoint: r };
316
316
  }
317
- updateAnchorOffset(t, e, r) {
318
- if (!g(r, e)) {
317
+ updateAnchorOffset(t, r, e) {
318
+ if (!g(e, r)) {
319
319
  s(
320
- `${e} is not a valid anchor-offset value for ${this.tagName.toLowerCase()}`
320
+ `${r} is not a valid anchor-offset value for ${this.tagName.toLowerCase()}`
321
321
  );
322
322
  return;
323
323
  }
@@ -333,15 +333,15 @@ const S = [
333
333
  `var(--px-padding-${o}-laptop)`
334
334
  ));
335
335
  };
336
- i(t), i(e);
336
+ i(t), i(r);
337
337
  }
338
338
  addAnchorClass() {
339
339
  this.$el.classList.contains("anchored") || this.$el.classList.add("anchored");
340
340
  }
341
- updateAnchorSpacing(t, e, r) {
342
- if (!g(r, e)) {
341
+ updateAnchorSpacing(t, r, e) {
342
+ if (!g(e, r)) {
343
343
  s(
344
- `${e} is not a valid anchor-spacing value for ${this.tagName.toLowerCase()}`
344
+ `${r} is not a valid anchor-spacing value for ${this.tagName.toLowerCase()}`
345
345
  );
346
346
  return;
347
347
  }
@@ -357,11 +357,11 @@ const S = [
357
357
  `var(--px-spacing-${o}-laptop)`
358
358
  ));
359
359
  };
360
- i(t), i(e);
360
+ i(t), i(r);
361
361
  }
362
- updateSubgridRows(t, e, r, i) {
363
- g(i, r) ? this.style.setProperty(`--${t}`, r) : s(
364
- `${r} is not an allowed ${t} value for ${this.tagName.toLowerCase()}`
362
+ updateSubgridRows(t, r, e, i) {
363
+ g(i, e) ? this.style.setProperty(`--${t}`, e) : s(
364
+ `${e} is not an allowed ${t} value for ${this.tagName.toLowerCase()}`
365
365
  );
366
366
  }
367
367
  get $el() {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@proximus/lavender-container",
3
- "version": "2.0.0-alpha.73",
3
+ "version": "2.0.0-alpha.75",
4
4
  "description": "",
5
5
  "files": [
6
6
  "dist"