@proximus/lavender-container 1.4.8-beta.3 → 1.4.8

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