@proximus/lavender-container 2.0.0-alpha.49 → 2.0.0-alpha.50

package/dist/Container.d.ts

@@ -1,4 +1,5 @@
 import { VerticallyExtendedElement } from '@proximus/lavender-common';
+export declare const anchorSpacingValues: string[];
 export declare class Container extends VerticallyExtendedElement<HTMLDivElement> {
     static nativeName: string;
     private template;
@@ -23,6 +24,7 @@ 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;
     get $slotAnchor(): HTMLSlotElement;
     get padding(): string;
     set padding(value: string);
@@ -134,6 +136,8 @@ export declare class Container extends VerticallyExtendedElement<HTMLDivElement>
     set boxShadow(value: string);
     get anchorOffset(): string;
     set anchorOffset(value: string);
+    get anchorSpacing(): string;
+    set anchorSpacing(value: string);
     get inverted(): string;
     set inverted(value: string);
 }

package/dist/index.es.js

@@ -1,53 +1,58 @@
-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();
+import { cssTokenBreakpoints as d, paddingValues as a, VerticallyExtendedElement as k, boxShadowValues as m, backgroundSizeValues as f, noBorderRadiusValues as v, borderRadiusValues as A, borderSideValues as y, borderValues as x, gradientValues as $, log as n, backgroundColorValues as L, borderColorValues as B, checkName as c } 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)}@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)) ) )}:host([anchor-spacing]){margin-top:var(--container-anchor-spacing--tablet)}}@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}}', u = new CSSStyleSheet();
 u.replaceSync(C);
-const n = (c, t, e) => `:host([${c}${e ? `--${e}` : ""}='${t}']) .container`, s = "px-padding", T = [
-  a(
+const S = [
+  "has-patch",
+  "neighbor-has-patch",
+  "has-ribbon",
+  "neighbor-has-ribbon"
+], s = (h, t, e) => `:host([${h}${e ? `--${e}` : ""}='${t}']) .container`, b = "px-padding", T = [
+  d(
     "padding",
-    n,
-    d,
     s,
+    a,
+    b,
     "--container-padding"
   ),
-  a(
+  d(
     "padding-inline",
-    n,
-    d,
-    s
+    s,
+    a,
+    b
   ),
-  a(
+  d(
     "padding-block",
-    n,
-    d,
-    s
+    s,
+    a,
+    b
   ),
-  a(
+  d(
     "padding-top",
-    n,
-    d,
-    s
+    s,
+    a,
+    b
   ),
-  a(
+  d(
     "padding-right",
-    n,
-    d,
     s,
+    a,
+    b,
     "--container-padding-right"
   ),
-  a(
+  d(
     "padding-bottom",
-    n,
-    d,
-    s
+    s,
+    a,
+    b
   ),
-  a(
+  d(
     "padding-left",
-    n,
-    d,
     s,
+    a,
+    b,
     "--container-padding-left"
   )
-], p = class p extends h {
+], p = class p extends k {
   constructor() {
     super(u, ...T), this.template = () => `<div class="container">
       <slot></slot>
@@ -86,6 +91,7 @@ const n = (c, t, e) => `:host([${c}${e ? `--${e}` : ""}='${t}']) .container`, s
       "background-position",
       "box-shadow",
       "anchor-offset",
+      "anchor-spacing",
       "inverted"
     ];
   }
@@ -111,7 +117,7 @@ const n = (c, t, e) => `:host([${c}${e ? `--${e}` : ""}='${t}']) .container`, s
     if (e !== r)
       switch (t) {
         case "border":
-          this.updateAttribute(t, e, r, y);
+          this.updateAttribute(t, e, r, x);
           break;
         case "border-color":
           this.updateBorderColor(t, r);
@@ -120,14 +126,14 @@ const n = (c, t, e) => `:host([${c}${e ? `--${e}` : ""}='${t}']) .container`, s
         case "border-side--mobile":
         case "border-side--tablet":
         case "border-side--laptop":
-          this.updateAttribute(t, e, r, A);
+          this.updateAttribute(t, e, r, y);
           break;
         case "border-radius":
           this.updateAttribute(
             t,
             e,
             r,
-            v
+            A
           );
           break;
         case "no-border-radius":
@@ -138,7 +144,7 @@ const n = (c, t, e) => `:host([${c}${e ? `--${e}` : ""}='${t}']) .container`, s
             t,
             e,
             r,
-            f
+            v
           );
           break;
         case "background-color":
@@ -158,7 +164,7 @@ const n = (c, t, e) => `:host([${c}${e ? `--${e}` : ""}='${t}']) .container`, s
             t,
             e,
             r,
-            m
+            f
           );
           break;
         case "background-image":
@@ -171,10 +177,13 @@ const n = (c, t, e) => `:host([${c}${e ? `--${e}` : ""}='${t}']) .container`, s
           r !== null && r !== "" && (this.$el.style.backgroundPosition = r);
           break;
         case "box-shadow":
-          this.updateAttribute(t, e, r, k);
+          this.updateAttribute(t, e, r, m);
           break;
         case "anchor-offset":
-          this.updateAnchorOffset(e, r, d);
+          this.updateAnchorOffset(e, r, a);
+          break;
+        case "anchor-spacing":
+          this.updateAnchorSpacing(e, r, S);
           break;
         default:
           super.attributeChangedCallback(t, e, r);
@@ -196,7 +205,7 @@ const n = (c, t, e) => `:host([${c}${e ? `--${e}` : ""}='${t}']) .container`, s
     this.$el.style.setProperty(`--${t}`, `url("${e}")`);
   }
   updateGradient(t, e) {
-    if (this.checkName(x, e)) {
+    if (this.checkName($, e)) {
       const r = this.splitAttrNameFromBreakpoint(t);
       t = r.attrName;
       const i = r.breakpoint;
@@ -205,13 +214,13 @@ const n = (c, t, e) => `:host([${c}${e ? `--${e}` : ""}='${t}']) .container`, s
         `linear-gradient(var(--px-color-background-gradient-${e}))`
       );
     } else
-      b(
+      n(
         `${e} is not an allowed ${t} value for ${this.tagName.toLowerCase()}`
       );
   }
   updateBackgroundColor(t, e) {
     const r = e.startsWith("surface-");
-    if (this.checkName($, e)) {
+    if (this.checkName(L, e)) {
       const i = this.splitAttrNameFromBreakpoint(t), o = i.breakpoint;
       this.$el.style.setProperty(
         `--${i.attrName}${o}`,
@@ -221,24 +230,24 @@ const n = (c, t, e) => `:host([${c}${e ? `--${e}` : ""}='${t}']) .container`, s
         `var(--px-color-background-${e}${r ? "" : "-inverted"})`
       );
     } else
-      b(
+      n(
         `${e} is not an allowed ${t} value for ${this.tagName.toLowerCase()}`
       );
   }
   updateBorderColor(t, e) {
-    this.checkName(L, 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)`
-    )) : b(
+    )) : n(
       `${e} is not an allowed ${t} value for ${this.tagName.toLowerCase()}`
     );
   }
   updateNoBorderRadius(t, e, r, i) {
     if (!this.checkName(i, r))
-      b(
+      n(
         `${r} is not an allowed ${t} value for ${this.tagName.toLowerCase()}`
       );
     else {
@@ -252,7 +261,7 @@ const n = (c, t, e) => `:host([${c}${e ? `--${e}` : ""}='${t}']) .container`, s
   }
   updateAttribute(t, e, r, i) {
     if (!this.checkName(i, r))
-      b(
+      n(
         `${r} is not an allowed ${t} value for ${this.tagName.toLowerCase()}`
       );
     else {
@@ -275,8 +284,8 @@ const n = (c, t, e) => `:host([${c}${e ? `--${e}` : ""}='${t}']) .container`, s
     return { attrName: t, breakpoint: e };
   }
   updateAnchorOffset(t, e, r) {
-    if (!B(r, e)) {
-      b(
+    if (!c(r, e)) {
+      n(
         `${e} is not a valid anchor-offset value for ${this.tagName.toLowerCase()}`
       );
       return;
@@ -298,6 +307,27 @@ const n = (c, t, e) => `:host([${c}${e ? `--${e}` : ""}='${t}']) .container`, s
   addAnchorClass() {
     this.$el.classList.contains("anchored") || this.$el.classList.add("anchored");
   }
+  updateAnchorSpacing(t, e, r) {
+    if (!c(r, e)) {
+      n(
+        `${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);
+  }
   get $slotAnchor() {
     return this.querySelector('[slot^="anchor"]');
   }
@@ -631,6 +661,12 @@ 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");
   }
@@ -642,5 +678,6 @@ p.nativeName = "div";
 let g = p;
 customElements.get("px-container") || customElements.define("px-container", g);
 export {
-  g as Container
+  g as Container,
+  S as anchorSpacingValues
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@proximus/lavender-container",
-  "version": "2.0.0-alpha.49",
+  "version": "2.0.0-alpha.50",
   "description": "",
   "files": [
     "dist"