@proximus/lavender-container 1.4.9-alpha.1 → 1.4.9-alpha.11

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