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

package/dist/Container.d.ts

@@ -1,5 +1,7 @@
-import { PxElement } from '@proximus/lavender-common';
-export declare class Container extends PxElement<HTMLDivElement> {
+import { WithExtraAttributes } from '@proximus/lavender-common';
+export declare const anchorSpacingValues: string[];
+export declare const subgridRowsValues: string[];
+export declare class Container extends WithExtraAttributes {
     static nativeName: string;
     private template;
     private _bgObserver;
@@ -23,6 +25,9 @@ export declare class Container extends PxElement<HTMLDivElement> {
     };
     updateAnchorOffset(oldValue: string, newValue: string, attrValue: string[]): void;
     addAnchorClass(): void;
+    updateAnchorSpacing(oldValue: string, newValue: string, attrValue: string[]): void;
+    updateSubgridRows(attrName: string, oldValue: string, newValue: string, attrValues: string[]): void;
+    get $el(): HTMLElement;
     get $slotAnchor(): HTMLSlotElement;
     get padding(): string;
     set padding(value: string);
@@ -134,6 +139,18 @@ export declare class Container extends PxElement<HTMLDivElement> {
     set boxShadow(value: string);
     get anchorOffset(): string;
     set anchorOffset(value: string);
-    get inverted(): string;
-    set inverted(value: string);
+    get anchorSpacing(): string;
+    set anchorSpacing(value: string);
+    get inverted(): boolean;
+    set inverted(value: boolean);
+    get subgridRows(): string;
+    set subgridRows(value: string);
+    get subgridGap(): string;
+    set subgridGap(value: string);
+    get subgridGapMobile(): string;
+    set subgridGapMobile(value: string);
+    get subgridGapTablet(): string;
+    set subgridGapTablet(value: string);
+    get subgridGapLaptop(): string;
+    set subgridGapLaptop(value: string);
 }

package/dist/index.es.js

@@ -1,61 +1,87 @@
-import { PxElement as c, cssTokenBreakpoints as a, paddingValues as d, boxShadowValues as h, backgroundSizeValues as k, noBorderRadiusValues as m, borderRadiusValues as f, borderSideValues as v, borderValues as A, gradientValues as y, backgroundColorValues as x, borderColorValues as $, checkName as B } from "@proximus/lavender-common";
-const L = ':host{display:block}.container{font-family:var(--px-font-family);background-color:var(--background-color);border-radius:var(--px-radius-main);box-sizing:border-box;height:100%}:host([background-image]) .container{background-image:var(--background-image)}:host([background-gradient]) .container{background-image:var(--background-gradient)}:host([inverted]) .container{background-color:var(--background-color-inverted);color:var(--px-color-text-neutral-inverted)}.border-none{border:none}.border-s{border:var(--px-size-border-s) solid var(--border-color)}.border-m{border:var(--px-size-border-m) solid var(--border-color)}.border-l{border:var(--px-size-border-l) solid var(--border-color)}.border-side-top{border-bottom-style:none;border-right-style:none;border-left-style:none}.border-side-right{border-top-style:none;border-bottom-style:none;border-left-style:none}.border-side-bottom{border-top-style:none;border-right-style:none;border-left-style:none}.border-side-left{border-top-style:none;border-right-style:none;border-bottom-style:none}.border-side-block{border-inline-style:none}.border-side-inline{border-block-style:none}:host([inverted]) .border-s,:host([inverted]) .border-m,:host([inverted]) .border-l{border-color:var(--border-color-inverted)}.border-radius-main{border-radius:var(--px-radius-main)}.border-radius-pill{border-radius:var(--px-radius-pill)}.no-border-radius-top{border-top-left-radius:var(--px-radius-none);border-top-right-radius:var(--px-radius-none)}.no-border-radius-right{border-top-right-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-bottom{border-bottom-left-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-left{border-top-left-radius:var(--px-radius-none);border-bottom-left-radius:var(--px-radius-none)}.no-border-radius-all,.border-radius-none{border-radius:var(--px-radius-none)}.bgimg{background-repeat:no-repeat}.background-size-cover{background-size:cover;background-position:center center}.background-size-contain{background-size:contain}.box-shadow-none{box-shadow:none}.box-shadow-s{box-shadow:0 1px 2px #2525251f}.box-shadow-m{box-shadow:0 4px 6px -1px #25252514}.box-shadow-l{box-shadow:0 10px 15px -3px #25252514}.box-shadow-xl{box-shadow:0 20px 25px -5px #25252514}.anchored{position:relative}::slotted([slot="anchor-right"]),::slotted([slot="anchor-left"]),::slotted([slot="anchor-full"]){position:absolute;top:0}::slotted([slot="anchor-right"]),::slotted([slot="anchor-left"]){transform:translateY(-50%);z-index:3}::slotted([slot="anchor-right"]){right:var( --container-anchor-offset--mobile, var( --container-padding-right, var(--container-padding-inline, var(--container-padding)) ) )}::slotted([slot="anchor-left"]){left:var( --container-anchor-offset--mobile, var( --container-padding-left, var(--container-padding-inline, var(--container-padding)) ) )}::slotted([slot="anchor-full"]){transform:translateY(-100%);right:0;left:0;text-align:center;z-index:2}::slotted(px-vstack:only-of-type),::slotted(px-hstack:only-of-type),::slotted(px-stack:only-of-type),::slotted(px-grid:only-of-type){height:100%}.border-s ::slotted([slot="anchor-full"]){right:calc(var(--px-size-border-s) * -1);left:calc(var(--px-size-border-s) * -1)}.border-m ::slotted([slot="anchor-full"]){right:calc(var(--px-size-border-m) * -1);left:calc(var(--px-size-border-m) * -1)}.border-l ::slotted([slot="anchor-full"]){right:calc(var(--px-size-border-l) * -1);left:calc(var(--px-size-border-l) * -1)}@media only screen and (max-width: 47.938em){.container{background-color:var(--background-color--mobile, var(--background-color))}:host([background-image--mobile]) .container{background-image:var(--background-image--mobile, var(--background-image))}:host([background-gradient--mobile]) .container{background-image:var( --background-gradient--mobile, var(--background-gradient) )}:host([inverted]) .container{background-color:var( --background-color-inverted--mobile, var(--background-color-inverted) )}.border-side-top--mobile{border-top-style:solid;border-right-style:none;border-bottom-style:none;border-left-style:none}.border-side-right--mobile{border-top-style:none;border-right-style:solid;border-bottom-style:none;border-left-style:none}.border-side-bottom--mobile{border-top-style:none;border-right-style:none;border-bottom-style:solid;border-left-style:none}.border-side-left--mobile{border-top-style:none;border-right-style:none;border-bottom-style:none;border-left-style:solid}.border-side-block--mobile{border-inline-style:none;border-block-style:solid}.border-side-inline--mobile{border-block-style:none;border-inline-style:solid}.no-border-radius-top--mobile{border-top-left-radius:var(--px-radius-none);border-top-right-radius:var(--px-radius-none)}.no-border-radius-right--mobile{border-top-right-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-bottom--mobile{border-bottom-left-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-left--mobile{border-top-left-radius:var(--px-radius-none);border-bottom-left-radius:var(--px-radius-none)}.no-border-radius-all--mobile{border-radius:var(--px-radius-none)}}@media only screen and (min-width: 48em) and (max-width: 64em){.container{background-color:var(--background-color--tablet, var(--background-color))}:host([background-image--tablet]) .container{background-image:var(--background-image--tablet, var(--background-image))}:host([background-gradient--tablet]) .container{background-image:var( --background-gradient--tablet, var(--background-gradient) )}:host([inverted]) .container{background-color:var( --background-color-inverted--tablet, var(--background-color-inverted) )}.no-border-radius-top--tablet{border-top-left-radius:var(--px-radius-none);border-top-right-radius:var(--px-radius-none)}.no-border-radius-right--tablet{border-top-right-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-bottom--tablet{border-bottom-left-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-left--tablet{border-top-left-radius:var(--px-radius-none);border-bottom-left-radius:var(--px-radius-none)}.no-border-radius-all--tablet{border-radius:var(--px-radius-none)}.border-side-top--tablet{border-top-style:solid;border-right-style:none;border-bottom-style:none;border-left-style:none}.border-side-right--tablet{border-top-style:none;border-right-style:solid;border-bottom-style:none;border-left-style:none}.border-side-bottom--tablet{border-top-style:none;border-right-style:none;border-bottom-style:solid;border-left-style:none}.border-side-left--tablet{border-top-style:none;border-right-style:none;border-bottom-style:none;border-left-style:solid}.border-side-block--tablet{border-inline-style:none;border-block-style:solid}.border-side-inline--tablet{border-block-style:none;border-inline-style:solid}::slotted([slot="anchor-right"]){right:var( --container-anchor-offset--tablet, var( --container-padding-right, var(--container-padding-inline, var(--container-padding)) ) )}::slotted([slot="anchor-left"]){left:var( --container-anchor-offset--tablet, var( --container-padding-left, var(--container-padding-inline, var(--container-padding)) ) )}}@media only screen and (min-width: 64.0625em){.container{background-color:var(--background-color--laptop, var(--background-color))}:host([background-image--laptop]) .container{background-image:var(--background-image--laptop, var(--background-image))}:host([background-gradient--laptop]) .container{background-image:var( --background-gradient--laptop, var(--background-gradient) )}:host([inverted]) .container{background-color:var( --background-color-inverted--laptop, var(--background-color-inverted) )}.no-border-radius-top--laptop{border-top-left-radius:var(--px-radius-none);border-top-right-radius:var(--px-radius-none)}.no-border-radius-right--laptop{border-top-right-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-bottom--laptop{border-bottom-left-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-left--laptop{border-top-left-radius:var(--px-radius-none);border-bottom-left-radius:var(--px-radius-none)}.no-border-radius-all--laptop{border-radius:var(--px-radius-none)}::slotted([slot="anchor-right"]){right:var( --container-anchor-offset--laptop, var( --container-padding-right, var(--container-padding-inline, var(--container-padding)) ) )}::slotted([slot="anchor-left"]){left:var( --container-anchor-offset--laptop, var( --container-padding-left, var(--container-padding-inline, var(--container-padding)) ) )}.border-side-top--laptop{border-top-style:solid;border-right-style:none;border-bottom-style:none;border-left-style:none}.border-side-right--laptop{border-top-style:none;border-right-style:solid;border-bottom-style:none;border-left-style:none}.border-side-bottom--laptop{border-top-style:none;border-right-style:none;border-bottom-style:solid;border-left-style:none}.border-side-left--laptop{border-top-style:none;border-right-style:none;border-bottom-style:none;border-left-style:solid}.border-side-block--laptop{border-inline-style:none;border-block-style:solid}.border-side-inline--laptop{border-block-style:none;border-inline-style:solid}}', p = new CSSStyleSheet();
-p.replaceSync(L);
-const n = (u, t, e) => `:host([${u}${e ? `--${e}` : ""}='${t}']) .container`, s = "px-padding", g = class g extends c {
+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";
+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();
+c.replaceSync(C);
+const S = [
+  "top-patch",
+  "top-neighbor-patch",
+  "top-ribbon",
+  "top-neighbor-ribbon",
+  "top-patch-and-neighbor-ribbon"
+], T = [
+  "1",
+  "2",
+  "3",
+  "4",
+  "5",
+  "6",
+  "7",
+  "8",
+  "9",
+  "10",
+  "11",
+  "12"
+], n = (h, t, e) => `:host([${h}${e ? `--${e}` : ""}='${t}']) .container`, b = "px-padding", R = [
+  a(
+    "padding",
+    n,
+    d,
+    b,
+    "--container-padding"
+  ),
+  a(
+    "padding-inline",
+    n,
+    d,
+    b
+  ),
+  a(
+    "padding-block",
+    n,
+    d,
+    b
+  ),
+  a(
+    "padding-top",
+    n,
+    d,
+    b
+  ),
+  a(
+    "padding-right",
+    n,
+    d,
+    b,
+    "--container-padding-right"
+  ),
+  a(
+    "padding-bottom",
+    n,
+    d,
+    b
+  ),
+  a(
+    "padding-left",
+    n,
+    d,
+    b,
+    "--container-padding-left"
+  ),
+  a(
+    "gap",
+    n,
+    k,
+    "px-spacing",
+    void 0,
+    "subgrid-gap"
+  )
+], u = class u extends v {
   constructor() {
-    super(
-      p,
-      a(
-        "padding",
-        n,
-        d,
-        s,
-        "--container-padding"
-      ),
-      a(
-        "padding-inline",
-        n,
-        d,
-        s
-      ),
-      a(
-        "padding-block",
-        n,
-        d,
-        s
-      ),
-      a(
-        "padding-top",
-        n,
-        d,
-        s
-      ),
-      a(
-        "padding-right",
-        n,
-        d,
-        s,
-        "--container-padding-right"
-      ),
-      a(
-        "padding-bottom",
-        n,
-        d,
-        s
-      ),
-      a(
-        "padding-left",
-        n,
-        d,
-        s,
-        "--container-padding-left"
-      )
-    ), this.template = () => `<div class="container">
+    super(c, ...R), this.template = () => `<div class="container">
       <slot></slot>
       <slot name="anchor-left"></slot>
       <slot name="anchor-right"></slot>
       <slot name="anchor-full"></slot>
-    </div>`, this._bgObserver = null, this._isInViewport = !1, this.shadowRoot.innerHTML = this.template();
+    </div>`, this._bgObserver = null, this._isInViewport = !1, this.contentObserver = null, this.shadowRoot.innerHTML = this.template();
   }
   static get observedAttributes() {
     return [
@@ -87,11 +113,13 @@ const n = (u, t, e) => `:host([${u}${e ? `--${e}` : ""}='${t}']) .container`, s
       "background-position",
       "box-shadow",
       "anchor-offset",
-      "inverted"
+      "anchor-spacing",
+      "inverted",
+      "subgrid-rows"
     ];
   }
   connectedCallback() {
-    super.connectedCallback(), this.padding || (this.padding = "m"), this.backgroundColor || (this.backgroundColor = "surface-light"), this.borderColor || (this.borderColor = "main"), this.$slotAnchor && this.addAnchorClass(), this.contentObserver = new MutationObserver(() => {
+    this.padding || (this.padding = "m"), this.backgroundColor || (this.backgroundColor = "surface-light"), this.borderColor || (this.borderColor = "main"), this.$slotAnchor && this.addAnchorClass(), this.contentObserver = new MutationObserver(() => {
       this.$slotAnchor && this.addAnchorClass();
     }), this.contentObserver.observe(this, {
       childList: !0,
@@ -105,14 +133,14 @@ const n = (u, t, e) => `:host([${u}${e ? `--${e}` : ""}='${t}']) .container`, s
     }), this._bgObserver.observe(this.$el);
   }
   disconnectedCallback() {
-    var t;
-    (t = this._bgObserver) == null || t.disconnect(), this.contentObserver.disconnect();
+    var t, e;
+    (t = this._bgObserver) == null || t.disconnect(), (e = this.contentObserver) == null || e.disconnect();
   }
   attributeChangedCallback(t, e, r) {
     if (e !== r)
       switch (t) {
         case "border":
-          this.updateAttribute(t, e, r, A);
+          this.updateAttribute(t, e, r, $);
           break;
         case "border-color":
           this.updateBorderColor(t, r);
@@ -121,14 +149,14 @@ const n = (u, t, e) => `:host([${u}${e ? `--${e}` : ""}='${t}']) .container`, s
         case "border-side--mobile":
         case "border-side--tablet":
         case "border-side--laptop":
-          this.updateAttribute(t, e, r, v);
+          this.updateAttribute(t, e, r, x);
           break;
         case "border-radius":
           this.updateAttribute(
             t,
             e,
             r,
-            f
+            y
           );
           break;
         case "no-border-radius":
@@ -139,7 +167,7 @@ const n = (u, t, e) => `:host([${u}${e ? `--${e}` : ""}='${t}']) .container`, s
             t,
             e,
             r,
-            m
+            A
           );
           break;
         case "background-color":
@@ -159,7 +187,7 @@ const n = (u, t, e) => `:host([${u}${e ? `--${e}` : ""}='${t}']) .container`, s
             t,
             e,
             r,
-            k
+            f
           );
           break;
         case "background-image":
@@ -172,11 +200,22 @@ const n = (u, t, e) => `:host([${u}${e ? `--${e}` : ""}='${t}']) .container`, s
           r !== null && r !== "" && (this.$el.style.backgroundPosition = r);
           break;
         case "box-shadow":
-          this.updateAttribute(t, e, r, h);
+          this.updateAttribute(t, e, r, m);
           break;
         case "anchor-offset":
           this.updateAnchorOffset(e, r, d);
           break;
+        case "anchor-spacing":
+          this.updateAnchorSpacing(e, r, S);
+          break;
+        case "subgrid-rows":
+          this.updateSubgridRows(
+            t,
+            e,
+            r,
+            T
+          );
+          break;
         default:
           super.attributeChangedCallback(t, e, r);
           break;
@@ -197,7 +236,7 @@ const n = (u, t, e) => `:host([${u}${e ? `--${e}` : ""}='${t}']) .container`, s
     this.$el.style.setProperty(`--${t}`, `url("${e}")`);
   }
   updateGradient(t, e) {
-    if (this.checkName(y, e)) {
+    if (this.checkName(w, e)) {
       const r = this.splitAttrNameFromBreakpoint(t);
       t = r.attrName;
       const i = r.breakpoint;
@@ -206,11 +245,13 @@ const n = (u, t, e) => `:host([${u}${e ? `--${e}` : ""}='${t}']) .container`, s
         `linear-gradient(var(--px-color-background-gradient-${e}))`
       );
     } else
-      console.error(`${e} is not an allowed background-gradient value`);
+      s(
+        `${e} is not an allowed ${t} value for ${this.tagName.toLowerCase()}`
+      );
   }
   updateBackgroundColor(t, e) {
     const r = e.startsWith("surface-");
-    if (this.checkName(x, e)) {
+    if (this.checkName(L, e)) {
       const i = this.splitAttrNameFromBreakpoint(t), o = i.breakpoint;
       this.$el.style.setProperty(
         `--${i.attrName}${o}`,
@@ -220,38 +261,46 @@ const n = (u, t, e) => `:host([${u}${e ? `--${e}` : ""}='${t}']) .container`, s
         `var(--px-color-background-${e}${r ? "" : "-inverted"})`
       );
     } else
-      console.error(`${e} is not an allowed ${t} value`);
+      s(
+        `${e} is not an allowed ${t} value for ${this.tagName.toLowerCase()}`
+      );
   }
   updateBorderColor(t, e) {
-    this.checkName($, e) ? (this.$el.style.setProperty(
+    this.checkName(B, e) ? (this.$el.style.setProperty(
       `--${t}`,
       `var(--px-color-border-${e}-default)`
     ), this.$el.style.setProperty(
       `--${t}-inverted`,
       `var(--px-color-border-${e}-inverted)`
-    )) : console.error(`${e} is not an allowed ${t} value`);
+    )) : s(
+      `${e} is not an allowed ${t} value for ${this.tagName.toLowerCase()}`
+    );
   }
   updateNoBorderRadius(t, e, r, i) {
     if (!this.checkName(i, r))
-      console.error(`${r} is not an allowed ${t} value`);
+      s(
+        `${r} is not an allowed ${t} value for ${this.tagName.toLowerCase()}`
+      );
     else {
-      const o = this.splitAttrNameFromBreakpoint(t), b = o.breakpoint;
+      const o = this.splitAttrNameFromBreakpoint(t), l = o.breakpoint;
       e !== null && e !== "" && this.$el.classList.toggle(
-        `${o.attrName}-${e}${b}`
+        `${o.attrName}-${e}${l}`
       ), r !== null && r !== "" && this.$el.classList.toggle(
-        `${o.attrName}-${r}${b}`
+        `${o.attrName}-${r}${l}`
       );
     }
   }
   updateAttribute(t, e, r, i) {
     if (!this.checkName(i, r))
-      console.error(`${r} is not an allowed ${t} value`);
+      s(
+        `${r} is not an allowed ${t} value for ${this.tagName.toLowerCase()}`
+      );
     else {
-      const o = this.splitAttrNameFromBreakpoint(t), b = o.breakpoint;
+      const o = this.splitAttrNameFromBreakpoint(t), l = o.breakpoint;
       e !== null && e !== "" && this.$el.classList.toggle(
-        `${o.attrName}-${e}${b}`
+        `${o.attrName}-${e}${l}`
       ), r !== null && r !== "" && this.$el.classList.toggle(
-        `${o.attrName}-${r}${b}`
+        `${o.attrName}-${r}${l}`
       );
     }
   }
@@ -266,8 +315,10 @@ const n = (u, t, e) => `:host([${u}${e ? `--${e}` : ""}='${t}']) .container`, s
     return { attrName: t, breakpoint: e };
   }
   updateAnchorOffset(t, e, r) {
-    if (!B(r, e)) {
-      console.error(`${e} is not a valid anchor-offset value`);
+    if (!g(r, e)) {
+      s(
+        `${e} is not a valid anchor-offset value for ${this.tagName.toLowerCase()}`
+      );
       return;
     }
     const i = (o) => {
@@ -287,6 +338,36 @@ const n = (u, t, e) => `:host([${u}${e ? `--${e}` : ""}='${t}']) .container`, s
   addAnchorClass() {
     this.$el.classList.contains("anchored") || this.$el.classList.add("anchored");
   }
+  updateAnchorSpacing(t, e, r) {
+    if (!g(r, e)) {
+      s(
+        `${e} is not a valid anchor-spacing value for ${this.tagName.toLowerCase()}`
+      );
+      return;
+    }
+    const i = (o) => {
+      o !== null && o !== "" && o !== "default" && (this.style.setProperty(
+        "--container-anchor-spacing--mobile",
+        `var(--px-spacing-${o}-mobile)`
+      ), this.style.setProperty(
+        "--container-anchor-spacing--tablet",
+        `var(--px-spacing-${o}-tablet)`
+      ), this.style.setProperty(
+        "--container-anchor-spacing--laptop",
+        `var(--px-spacing-${o}-laptop)`
+      ));
+    };
+    i(t), i(e);
+  }
+  updateSubgridRows(t, e, r, i) {
+    g(i, r) ? this.style.setProperty(`--${t}`, r) : s(
+      `${r} is not an allowed ${t} value for ${this.tagName.toLowerCase()}`
+    );
+  }
+  get $el() {
+    var t;
+    return (t = this == null ? void 0 : this.shadowRoot) == null ? void 0 : t.querySelector(".container");
+  }
   get $slotAnchor() {
     return this.querySelector('[slot^="anchor"]');
   }
@@ -620,16 +701,54 @@ const n = (u, t, e) => `:host([${u}${e ? `--${e}` : ""}='${t}']) .container`, s
   set anchorOffset(t) {
     this.setAttribute("anchor-offset", t);
   }
+  get anchorSpacing() {
+    return this.getAttribute("anchor-spacing");
+  }
+  set anchorSpacing(t) {
+    this.setAttribute("anchor-spacing", t);
+  }
   get inverted() {
-    return this.getAttribute("inverted");
+    return this.hasAttribute("inverted");
   }
   set inverted(t) {
-    this.setAttribute("inverted", t);
+    t ? this.setAttribute("inverted", "") : this.removeAttribute("inverted");
+  }
+  get subgridRows() {
+    return this.getAttribute("subgrid-rows");
+  }
+  set subgridRows(t) {
+    this.setAttribute("subgrid-rows", t);
+  }
+  get subgridGap() {
+    return this.getAttribute("subgrid-gap");
+  }
+  set subgridGap(t) {
+    this.setAttribute("subgrid-gap", t);
+  }
+  get subgridGapMobile() {
+    return this.getAttribute("subgrid-gap--mobile");
+  }
+  set subgridGapMobile(t) {
+    this.setAttribute("subgrid-gap--mobile", t);
+  }
+  get subgridGapTablet() {
+    return this.getAttribute("subgrid-gap--tablet");
+  }
+  set subgridGapTablet(t) {
+    this.setAttribute("subgrid-gap--tablet", t);
+  }
+  get subgridGapLaptop() {
+    return this.getAttribute("subgrid-gap--laptop");
+  }
+  set subgridGapLaptop(t) {
+    this.setAttribute("subgrid-gap--laptop", t);
   }
 };
-g.nativeName = "div";
-let l = g;
-customElements.get("px-container") || customElements.define("px-container", l);
+u.nativeName = "div";
+let p = u;
+customElements.get("px-container") || customElements.define("px-container", p);
 export {
-  l as Container
+  p as Container,
+  S as anchorSpacingValues,
+  T as subgridRowsValues
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@proximus/lavender-container",
-  "version": "2.0.0-alpha.7",
+  "version": "2.0.0-alpha.73",
   "description": "",
   "files": [
     "dist"
@@ -11,7 +11,7 @@
     "clean": "rm -rf dist",
     "build": "npm run clean && NODE_ENV=development vite build &&  tsc && npm run transform-package-json && npm run wc-manifest",
     "test": "vitest run --coverage",
-    "wc-manifest": "cem analyze --globs \"src/*\" --config ../custom-elements-manifest.config.js  --outdir dist"
+    "wc-manifest": "cem analyze --globs \"src/*\" --config ../../custom-elements-manifest.config.js  --outdir dist"
   },
   "publishConfig": {
     "access": "public"