@proximus/lavender-container 2.0.0-alpha.16 → 2.0.0-alpha.161

package/dist/Container.d.ts

@@ -1,5 +1,7 @@
-import { VerticallyExtendedElement } from '@proximus/lavender-common';
-export declare class Container extends VerticallyExtendedElement<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 VerticallyExtendedElement<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 VerticallyExtendedElement<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,60 +1,87 @@
-import { cssTokenBreakpoints as a, paddingValues as d, VerticallyExtendedElement as h, boxShadowValues as k, backgroundSizeValues as m, noBorderRadiusValues as f, borderRadiusValues as v, borderSideValues as A, borderValues as y, gradientValues as x, log as b, backgroundColorValues as $, borderColorValues as L, checkName as B } 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%}.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}}', u = new CSSStyleSheet();
-u.replaceSync(C);
-const n = (c, t, e) => `:host([${c}${e ? `--${e}` : ""}='${t}']) .container`, s = "px-padding", T = [
+import { cssTokenBreakpoints as a, paddingValues as d, gapValues as f, WithExtraAttributes as A, boxShadowValues as y, backgroundSizeValues as x, noBorderRadiusValues as $, borderRadiusValues as w, borderSideValues as L, borderValues as B, gradientValues as c, log as s, backgroundColorValues as h, borderColorValues as v, 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)}:host([subgrid-rows]):host([anchor-spacing]) .container{margin-top:var(--container-anchor-spacing--mobile)}@media screen and (max-width: 47.938rem){.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 screen and (min-width: 48rem) and (max-width: 64rem){.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 screen and (min-width: 64.0625rem) and (max-width: 90rem){: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 screen and (min-width: 64.0625rem){.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.0625rem){: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)}}', k = new CSSStyleSheet();
+k.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 = (m, t, r) => `:host([${m}${r ? `--${r}` : ""}='${t}']) .container`, b = "px-padding", R = [
   a(
     "padding",
     n,
     d,
-    s,
+    b,
     "--container-padding"
   ),
   a(
     "padding-inline",
     n,
     d,
-    s
+    b
   ),
   a(
     "padding-block",
     n,
     d,
-    s
+    b
   ),
   a(
     "padding-top",
     n,
     d,
-    s
+    b
   ),
   a(
     "padding-right",
     n,
     d,
-    s,
+    b,
     "--container-padding-right"
   ),
   a(
     "padding-bottom",
     n,
     d,
-    s
+    b
   ),
   a(
     "padding-left",
     n,
     d,
-    s,
+    b,
     "--container-padding-left"
+  ),
+  a(
+    "gap",
+    n,
+    f,
+    "px-spacing",
+    void 0,
+    "subgrid-gap"
   )
-], p = class p extends h {
+], u = class u extends A {
   constructor() {
-    super(u, ...T), this.template = () => `<div class="container">
+    super(k, ...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 [
@@ -86,48 +113,50 @@ const n = (c, t, e) => `:host([${c}${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,
       subtree: !0,
       characterData: !0
     }), this._bgObserver = new IntersectionObserver((t) => {
-      t.forEach((e) => {
-        var r;
-        e.isIntersecting && (this._isInViewport = !0, this._loadBackgroundImages(), (r = this._bgObserver) == null || r.disconnect());
+      t.forEach((r) => {
+        var e;
+        r.isIntersecting && (this._isInViewport = !0, this._loadBackgroundImages(), (e = this._bgObserver) == null || e.disconnect());
       });
     }), this._bgObserver.observe(this.$el);
   }
   disconnectedCallback() {
-    var t;
-    (t = this._bgObserver) == null || t.disconnect(), this.contentObserver.disconnect();
+    var t, r;
+    (t = this._bgObserver) == null || t.disconnect(), (r = this.contentObserver) == null || r.disconnect();
   }
-  attributeChangedCallback(t, e, r) {
-    if (e !== r)
+  attributeChangedCallback(t, r, e) {
+    if (r !== e)
       switch (t) {
         case "border":
-          this.updateAttribute(t, e, r, y);
+          this.updateAttribute(t, r, e, B);
           break;
         case "border-color":
-          this.updateBorderColor(t, r);
+          this.updateBorderColor(t, e);
           break;
         case "border-side":
         case "border-side--mobile":
         case "border-side--tablet":
         case "border-side--laptop":
-          this.updateAttribute(t, e, r, A);
+          this.updateAttribute(t, r, e, L);
           break;
         case "border-radius":
           this.updateAttribute(
             t,
-            e,
             r,
-            v
+            e,
+            w
           );
           break;
         case "no-border-radius":
@@ -136,48 +165,59 @@ const n = (c, t, e) => `:host([${c}${e ? `--${e}` : ""}='${t}']) .container`, s
         case "no-border-radius--laptop":
           this.updateNoBorderRadius(
             t,
-            e,
             r,
-            f
+            e,
+            $
           );
           break;
         case "background-color":
         case "background-color--mobile":
         case "background-color--tablet":
         case "background-color--laptop":
-          this.updateBackgroundColor(t, r);
+          this.updateBackgroundColor(t, e);
           break;
         case "background-gradient":
         case "background-gradient--mobile":
         case "background-gradient--tablet":
         case "background-gradient--laptop":
-          this.updateGradient(t, r);
+          this.updateGradient(t, e);
           break;
         case "background-size":
           this.updateAttribute(
             t,
-            e,
             r,
-            m
+            e,
+            x
           );
           break;
         case "background-image":
         case "background-image--mobile":
         case "background-image--tablet":
         case "background-image--laptop":
-          this._isInViewport && this.updateBackgroundImg(t, r);
+          this._isInViewport && this.updateBackgroundImg(t, e);
           break;
         case "background-position":
-          r !== null && r !== "" && (this.$el.style.backgroundPosition = r);
+          e !== null && e !== "" && (this.$el.style.backgroundPosition = e);
           break;
         case "box-shadow":
-          this.updateAttribute(t, e, r, k);
+          this.updateAttribute(t, r, e, y);
           break;
         case "anchor-offset":
-          this.updateAnchorOffset(e, r, d);
+          this.updateAnchorOffset(r, e, d);
+          break;
+        case "anchor-spacing":
+          this.updateAnchorSpacing(r, e, S);
+          break;
+        case "subgrid-rows":
+          this.updateSubgridRows(
+            t,
+            r,
+            e,
+            T
+          );
           break;
         default:
-          super.attributeChangedCallback(t, e, r);
+          super.attributeChangedCallback(t, r, e);
           break;
       }
   }
@@ -187,97 +227,97 @@ const n = (c, t, e) => `:host([${c}${e ? `--${e}` : ""}='${t}']) .container`, s
       "background-image--mobile",
       "background-image--tablet",
       "background-image--laptop"
-    ].forEach((e) => {
-      const r = this.getAttribute(e);
-      r && this.updateBackgroundImg(e, r);
+    ].forEach((r) => {
+      const e = this.getAttribute(r);
+      e && this.updateBackgroundImg(r, e);
     });
   }
-  updateBackgroundImg(t, e) {
-    this.$el.style.setProperty(`--${t}`, `url("${e}")`);
+  updateBackgroundImg(t, r) {
+    this.$el.style.setProperty(`--${t}`, `url("${r}")`);
   }
-  updateGradient(t, e) {
-    if (this.checkName(x, e)) {
-      const r = this.splitAttrNameFromBreakpoint(t);
-      t = r.attrName;
-      const i = r.breakpoint;
+  updateGradient(t, r) {
+    if (this.checkName(c, r)) {
+      const e = this.splitAttrNameFromBreakpoint(t);
+      t = e.attrName;
+      const i = e.breakpoint;
       this.$el.style.setProperty(
         `--${t}${i}`,
-        `linear-gradient(var(--px-color-background-gradient-${e}))`
+        `linear-gradient(var(--px-color-background-gradient-${r}))`
       );
     } else
-      b(
-        `${e} is not an allowed ${t} value for ${this.tagName.toLowerCase()}`
+      s(
+        `"${r}" is not a valid ${t} value for ${this.tagName.toLowerCase()}. Allowed values are: "${c.join('", "')}".`
       );
   }
-  updateBackgroundColor(t, e) {
-    const r = e.startsWith("surface-");
-    if (this.checkName($, e)) {
+  updateBackgroundColor(t, r) {
+    const e = r.startsWith("surface-");
+    if (this.checkName(h, r)) {
       const i = this.splitAttrNameFromBreakpoint(t), o = i.breakpoint;
       this.$el.style.setProperty(
         `--${i.attrName}${o}`,
-        `var(--px-color-background-${e}${r ? "" : "-default"})`
+        `var(--px-color-background-${r}${e ? "" : "-default"})`
       ), this.$el.style.setProperty(
         `--${i.attrName}-inverted${o}`,
-        `var(--px-color-background-${e}${r ? "" : "-inverted"})`
+        `var(--px-color-background-${r}${e ? "" : "-inverted"})`
       );
     } else
-      b(
-        `${e} is not an allowed ${t} value for ${this.tagName.toLowerCase()}`
+      s(
+        `"${r}" is not a valid ${t} value for ${this.tagName.toLowerCase()}. Allowed values are: "${h.join('", "')}".`
       );
   }
-  updateBorderColor(t, e) {
-    this.checkName(L, e) ? (this.$el.style.setProperty(
+  updateBorderColor(t, r) {
+    this.checkName(v, r) ? (this.$el.style.setProperty(
       `--${t}`,
-      `var(--px-color-border-${e}-default)`
+      `var(--px-color-border-${r}-default)`
     ), this.$el.style.setProperty(
       `--${t}-inverted`,
-      `var(--px-color-border-${e}-inverted)`
-    )) : b(
-      `${e} is not an allowed ${t} value for ${this.tagName.toLowerCase()}`
+      `var(--px-color-border-${r}-inverted)`
+    )) : s(
+      `"${r}" is not a valid ${t} value for ${this.tagName.toLowerCase()}. Allowed values are: "${v.join('", "')}".`
     );
   }
-  updateNoBorderRadius(t, e, r, i) {
-    if (!this.checkName(i, r))
-      b(
-        `${r} is not an allowed ${t} value for ${this.tagName.toLowerCase()}`
+  updateNoBorderRadius(t, r, e, i) {
+    if (!this.checkName(i, e))
+      s(
+        `"${e}" is not a valid ${t} value for ${this.tagName.toLowerCase()}. Allowed values are: "${i.join('", "')}".`
       );
     else {
       const o = this.splitAttrNameFromBreakpoint(t), l = o.breakpoint;
-      e !== null && e !== "" && this.$el.classList.toggle(
-        `${o.attrName}-${e}${l}`
-      ), r !== null && r !== "" && this.$el.classList.toggle(
+      r !== null && r !== "" && this.$el.classList.toggle(
         `${o.attrName}-${r}${l}`
+      ), e !== null && e !== "" && this.$el.classList.toggle(
+        `${o.attrName}-${e}${l}`
       );
     }
   }
-  updateAttribute(t, e, r, i) {
-    if (!this.checkName(i, r))
-      b(
-        `${r} is not an allowed ${t} value for ${this.tagName.toLowerCase()}`
+  updateAttribute(t, r, e, i) {
+    if (!this.checkName(i, e))
+      s(
+        `"${e}" is not a valid ${t} value for ${this.tagName.toLowerCase()}. Allowed values are: "${i.join('", "')}".`
       );
     else {
       const o = this.splitAttrNameFromBreakpoint(t), l = o.breakpoint;
-      e !== null && e !== "" && this.$el.classList.toggle(
-        `${o.attrName}-${e}${l}`
-      ), r !== null && r !== "" && this.$el.classList.toggle(
+      r !== null && r !== "" && this.$el.classList.toggle(
         `${o.attrName}-${r}${l}`
+      ), e !== null && e !== "" && this.$el.classList.toggle(
+        `${o.attrName}-${e}${l}`
       );
     }
   }
   splitAttrNameFromBreakpoint(t) {
-    let e = "";
+    let r = "";
     if (["--mobile", "--tablet", "--laptop"].some(
-      (r) => t.includes(r)
+      (e) => t.includes(e)
     )) {
-      const r = t.split("--");
-      t = r[0], e = `--${r[1]}`;
+      const e = t.split("--");
+      t = e[0], r = `--${e[1]}`;
     }
-    return { attrName: t, breakpoint: e };
+    return { attrName: t, breakpoint: r };
   }
-  updateAnchorOffset(t, e, r) {
-    if (!B(r, e)) {
-      b(
-        `${e} is not a valid anchor-offset value for ${this.tagName.toLowerCase()}`
+  updateAnchorOffset(t, r, e) {
+    if (!g(e, r)) {
+      s(
+        `"${r}" is not a valid anchor-offset value for ${this.tagName.toLowerCase()}. Allowed values are: "${e.join('", "')}".`
       );
       return;
     }
@@ -293,11 +333,44 @@ const n = (c, t, e) => `:host([${c}${e ? `--${e}` : ""}='${t}']) .container`, s
         `var(--px-padding-${o}-laptop)`
       ));
     };
-    i(t), i(e);
+    i(t), i(r);
   }
   addAnchorClass() {
     this.$el.classList.contains("anchored") || this.$el.classList.add("anchored");
   }
+  updateAnchorSpacing(t, r, e) {
+    if (!g(e, r)) {
+      s(
+        `"${r}" is not a valid anchor-spacing value for ${this.tagName.toLowerCase()}. Allowed values are: "${e.join('", "')}".`
+      );
+      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)`
+      ), this.style.setProperty(
+        "--container-anchor-spacing--desktop",
+        `var(--px-spacing-${o}-desktop)`
+      ));
+    };
+    i(t), i(r);
+  }
+  updateSubgridRows(t, r, e, i) {
+    g(i, e) ? this.style.setProperty(`--${t}`, e) : s(
+      `"${e}" is not a valid ${t} value for ${this.tagName.toLowerCase()}. Allowed values are: "${i.join('", "')}".`
+    );
+  }
+  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"]');
   }
@@ -631,16 +704,54 @@ const n = (c, t, e) => `:host([${c}${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);
   }
 };
-p.nativeName = "div";
-let g = p;
-customElements.get("px-container") || customElements.define("px-container", g);
+u.nativeName = "div";
+let p = u;
+customElements.get("px-container") || customElements.define("px-container", p);
 export {
-  g 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.16",
+  "version": "2.0.0-alpha.161",
   "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"