@proximus/lavender-container 2.0.0-alpha.1 → 2.0.0-alpha.100

package/dist/Container.d.ts

@@ -1,11 +1,12 @@
-import { PxElement } from '@proximus/lavender-common';
-declare const anchorValues: readonly ["anchor-right", "anchor-left", "anchor-full"];
-export type AnchorValue = (typeof anchorValues)[number];
-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;
     private _isInViewport;
+    private contentObserver;
     constructor();
     static get observedAttributes(): string[];
     connectedCallback(): void;
@@ -23,6 +24,11 @@ export declare class Container extends PxElement<HTMLDivElement> {
         breakpoint: string;
     };
     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);
     get paddingBlock(): string;
@@ -133,7 +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);
 }
-export {};

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);background-image:var(--background-image);background:var(--background-gradient);border-radius:var(--px-radius-main);box-sizing:border-box;height:100%}: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));background-image:var( --background-image--mobile, var( --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));background-image:var( --background-image--tablet, var( --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));background-image:var( --background-image--laptop, var( --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 T = ["anchor-right", "anchor-left", "anchor-full"], 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 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";
+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)}}', 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, r) => `:host([${h}${r ? `--${r}` : ""}='${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 m {
   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">
-    <slot name="anchor-left"></slot>
-    <slot name="anchor-right"></slot>
-    <slot name="anchor-full"></slot>
-    <slot></slot>
-    </div>`, this._bgObserver = null, this._isInViewport = !1, this.shadowRoot.innerHTML = this.template();
+    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.contentObserver = null, this.shadowRoot.innerHTML = this.template();
   }
   static get observedAttributes() {
     return [
@@ -87,44 +113,50 @@ const T = ["anchor-right", "anchor-left", "anchor-full"], n = (u, t, e) => `:hos
       "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");
-    const t = this.querySelector("[slot]");
-    t && T.includes(t.getAttribute("slot")) && this.shadowRoot.querySelector(".container").classList.toggle("anchored"), this._bgObserver = new IntersectionObserver((e) => {
-      e.forEach((r) => {
-        var i;
-        r.isIntersecting && (this._isInViewport = !0, this._loadBackgroundImages(), (i = this._bgObserver) == null || i.disconnect());
+    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((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();
+    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, A);
+          this.updateAttribute(t, r, e, $);
           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, v);
+          this.updateAttribute(t, r, e, x);
           break;
         case "border-radius":
           this.updateAttribute(
             t,
-            e,
             r,
-            f
+            e,
+            y
           );
           break;
         case "no-border-radius":
@@ -133,48 +165,59 @@ const T = ["anchor-right", "anchor-left", "anchor-full"], n = (u, t, e) => `:hos
         case "no-border-radius--laptop":
           this.updateNoBorderRadius(
             t,
-            e,
             r,
-            m
+            e,
+            A
           );
           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,
-            k
+            e,
+            f
           );
           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, h);
+          this.updateAttribute(t, r, e, v);
           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;
       }
   }
@@ -184,86 +227,98 @@ const T = ["anchor-right", "anchor-left", "anchor-full"], n = (u, t, e) => `:hos
       "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(y, e)) {
-      const r = this.splitAttrNameFromBreakpoint(t);
-      t = r.attrName;
-      const i = r.breakpoint;
+  updateGradient(t, r) {
+    if (this.checkName(w, 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
-      console.error(`${e} is not an allowed background-gradient value`);
+      s(
+        `${r} is not an allowed ${t} value for ${this.tagName.toLowerCase()}`
+      );
   }
-  updateBackgroundColor(t, e) {
-    const r = e.startsWith("surface-");
-    if (this.checkName(x, e)) {
+  updateBackgroundColor(t, r) {
+    const e = r.startsWith("surface-");
+    if (this.checkName(L, 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
-      console.error(`${e} is not an allowed ${t} value`);
+      s(
+        `${r} is not an allowed ${t} value for ${this.tagName.toLowerCase()}`
+      );
   }
-  updateBorderColor(t, e) {
-    this.checkName($, e) ? (this.$el.style.setProperty(
+  updateBorderColor(t, r) {
+    this.checkName(B, 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)`
-    )) : console.error(`${e} is not an allowed ${t} value`);
-  }
-  updateNoBorderRadius(t, e, r, i) {
-    if (!this.checkName(i, r))
-      console.error(`${r} is not an allowed ${t} value`);
+      `var(--px-color-border-${r}-inverted)`
+    )) : s(
+      `${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 an allowed ${t} value for ${this.tagName.toLowerCase()}`
+      );
     else {
-      const o = this.splitAttrNameFromBreakpoint(t), b = o.breakpoint;
-      e !== null && e !== "" && this.$el.classList.toggle(
-        `${o.attrName}-${e}${b}`
-      ), r !== null && r !== "" && this.$el.classList.toggle(
-        `${o.attrName}-${r}${b}`
+      const o = this.splitAttrNameFromBreakpoint(t), l = o.breakpoint;
+      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))
-      console.error(`${r} is not an allowed ${t} value`);
+  updateAttribute(t, r, e, i) {
+    if (!this.checkName(i, e))
+      s(
+        `${e} is not an allowed ${t} value for ${this.tagName.toLowerCase()}`
+      );
     else {
-      const o = this.splitAttrNameFromBreakpoint(t), b = o.breakpoint;
-      e !== null && e !== "" && this.$el.classList.toggle(
-        `${o.attrName}-${e}${b}`
-      ), r !== null && r !== "" && this.$el.classList.toggle(
-        `${o.attrName}-${r}${b}`
+      const o = this.splitAttrNameFromBreakpoint(t), l = o.breakpoint;
+      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)) {
-      console.error(`${e} is not a valid anchor-offset value`);
+  updateAnchorOffset(t, r, e) {
+    if (!g(e, r)) {
+      s(
+        `${r} is not a valid anchor-offset value for ${this.tagName.toLowerCase()}`
+      );
       return;
     }
     const i = (o) => {
@@ -278,7 +333,46 @@ const T = ["anchor-right", "anchor-left", "anchor-full"], n = (u, t, e) => `:hos
         `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()}`
+      );
+      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 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"]');
   }
   get padding() {
     return this.getAttribute("padding");
@@ -610,16 +704,54 @@ const T = ["anchor-right", "anchor-left", "anchor-full"], n = (u, t, e) => `:hos
   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.1",
+  "version": "2.0.0-alpha.100",
   "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"