@proximus/lavender-header 1.0.0-alpha.3 → 1.0.0-alpha.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (2) hide show
  1. package/dist/index.js +392 -146
  2. package/package.json +2 -2
package/dist/index.js CHANGED
@@ -1,10 +1,10 @@
1
- import { PxElement as g, boxShadowValues as y, noBorderRadiusValues as A, borderRadiusValues as $, borderValues as S, paddingValues as z, gradientValues as L, backgroundColorValues as b, WithFlexAttributes as c } from "@proximus/lavender-common";
1
+ import { PxElement as m, boxShadowValues as R, noBorderRadiusValues as E, borderRadiusValues as I, borderSideValues as P, borderValues as w, paddingValues as d, gradientValues as _, backgroundColorValues as x, borderColorValues as q, WithFlexAttributes as v } from "@proximus/lavender-common";
2
2
  import "@proximus/lavender-layout";
3
- const C = '.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);padding:var(--px-padding-m);box-sizing:border-box}:host([inverted]) .container{background-color:var( --background-color, var(--px-color-bg-container-default-inverted) )}.padding-2xs{padding:var(--px-padding-2xs)}.padding-xs{padding:var(--px-padding-xs)}.padding-s{padding:var(--px-padding-s)}.padding-m{padding:var(--px-padding-m)}.padding-l{padding:var(--px-padding-l)}.padding-xl{padding:var(--px-padding-xl)}.padding-none{padding:var(--px-padding-none)}.padding-block-2xs{padding-block:var(--px-padding-2xs)}.padding-block-xs{padding-block:var(--px-padding-xs)}.padding-block-s{padding-block:var(--px-padding-s)}.padding-block-m{padding-block:var(--px-padding-m)}.padding-block-l{padding-block:var(--px-padding-l)}.padding-block-xl{padding-block:var(--px-padding-xl)}.padding-block-none{padding-block:var(--px-padding-none)}.padding-inline-2xs{padding-inline:var(--px-padding-2xs)}.padding-inline-xs{padding-inline:var(--px-padding-xs)}.padding-inline-s{padding-inline:var(--px-padding-s)}.padding-inline-m{padding-inline:var(--px-padding-m)}.padding-inline-l{padding-inline:var(--px-padding-l)}.padding-inline-xl{padding-inline:var(--px-padding-xl)}.padding-inline-none{padding-inline:var(--px-padding-none)}.padding-top-2xs{padding-top:var(--px-padding-2xs)}.padding-top-xs{padding-top:var(--px-padding-xs)}.padding-top-s{padding-top:var(--px-padding-s)}.padding-top-m{padding-top:var(--px-padding-m)}.padding-top-l{padding-top:var(--px-padding-l)}.padding-top-xl{padding-top:var(--px-padding-xl)}.padding-top-none{padding-top:var(--px-padding-none)}.padding-right-2xs{padding-right:var(--px-padding-2xs)}.padding-right-xs{padding-right:var(--px-padding-xs)}.padding-right-s{padding-right:var(--px-padding-s)}.padding-right-m{padding-right:var(--px-padding-m)}.padding-right-l{padding-right:var(--px-padding-l)}.padding-right-xl{padding-right:var(--px-padding-xl)}.padding-right-none{padding-right:var(--px-padding-none)}.padding-bottom-2xs{padding-bottom:var(--px-padding-2xs)}.padding-bottom-xs{padding-bottom:var(--px-padding-xs)}.padding-bottom-s{padding-bottom:var(--px-padding-s)}.padding-bottom-m{padding-bottom:var(--px-padding-m)}.padding-bottom-l{padding-bottom:var(--px-padding-l)}.padding-bottom-xl{padding-bottom:var(--px-padding-xl)}.padding-bottom-none{padding-bottom:var(--px-padding-none)}.padding-left-2xs{padding-left:var(--px-padding-2xs)}.padding-left-xs{padding-left:var(--px-padding-xs)}.padding-left-s{padding-left:var(--px-padding-s)}.padding-left-m{padding-left:var(--px-padding-m)}.padding-left-l{padding-left:var(--px-padding-l)}.padding-left-xl{padding-left:var(--px-padding-xl)}.padding-left-none{padding-left:var(--px-padding-none)}.border-none{border:none}.border-s{border:var(--px-border-s) solid var(--px-color-border-main-default)}.border-m{border:var(--px-border-m) solid var(--px-color-border-main-default)}.border-l{border:var(--px-border-l) solid var(--px-color-border-main-default)}:host([inverted]) .border-s,:host([inverted]) .border-m,:host([inverted]) .border-l{border-color:var(--px-color-border-main-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:var(--px-shadow-none)}.box-shadow-s{box-shadow:var(--px-shadow-s)}.box-shadow-m{box-shadow:var(--px-shadow-m)}.box-shadow-l{box-shadow:var(--px-shadow-l)}.box-shadow-xl{box-shadow:var(--px-shadow-xl)}.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:2}::slotted([slot="anchor-right"]){right:var(--px-padding-m)}::slotted([slot="anchor-left"]){left:var(--px-padding-m)}.padding-none ::slotted([slot="anchor-right"]){right:var(--px-padding-none)}.padding-none ::slotted([slot="anchor-left"]){left:var(--px-padding-none)}.padding-2xs ::slotted([slot="anchor-right"]){right:var(--px-padding-2xs)}.padding-2xs ::slotted([slot="anchor-left"]){left:var(--px-padding-2xs)}.padding-xs ::slotted([slot="anchor-right"]){right:var(--px-padding-xs)}.padding-xs ::slotted([slot="anchor-left"]){left:var(--px-padding-xs)}.padding-s ::slotted([slot="anchor-right"]){right:var(--px-padding-s)}.padding-s ::slotted([slot="anchor-left"]){left:var(--px-padding-s)}.padding-m ::slotted([slot="anchor-right"]){right:var(--px-padding-m)}.padding-m ::slotted([slot="anchor-left"]){left:var(--px-padding-m)}.padding-l ::slotted([slot="anchor-right"]){right:var(--px-padding-l)}.padding-l ::slotted([slot="anchor-left"]){left:var(--px-padding-l)}.padding-xl ::slotted([slot="anchor-right"]){right:var(--px-padding-xl)}.padding-xl ::slotted([slot="anchor-left"]){left:var(--px-padding-xl)}::slotted([slot="anchor-full"]){transform:translateY(-100%);right:0;left:0;text-align:center;z-index:1}@media only screen and (max-width: 640px){.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) )}.padding-l{padding:var(--px-padding-l-mobile)}.padding-xl{padding:var(--px-padding-xl-mobile)}.padding-top-l{padding-top:var(--px-padding-l-mobile)}.padding-top-xl{padding-top:var(--px-padding-xl-mobile)}.padding-right-l{padding-right:var(--px-padding-l-mobile)}.padding-right-xl{padding-right:var(--px-padding-xl-mobile)}.padding-bottom-l{padding-bottom:var(--px-padding-l-mobile)}.padding-bottom-xl{padding-bottom:var(--px-padding-xl-mobile)}.padding-left-l{padding-left:var(--px-padding-l-mobile)}.padding-left-xl{padding-left:var(--px-padding-xl-mobile)}.padding-2xs--mobile{padding:var(--px-padding-2xs)}.padding-xs--mobile{padding:var(--px-padding-xs)}.padding-s--mobile{padding:var(--px-padding-s)}.padding-m--mobile{padding:var(--px-padding-m)}.padding-l--mobile{padding:var(--px-padding-l-mobile)}.padding-xl--mobile{padding:var(--px-padding-xl-mobile)}.padding-none--mobile{padding:var(--px-padding-none)}.padding-block-2xs--mobile{padding-block:var(--px-padding-2xs)}.padding-block-xs--mobile{padding-block:var(--px-padding-xs)}.padding-block-s--mobile{padding-block:var(--px-padding-s)}.padding-block-m--mobile{padding-block:var(--px-padding-m)}.padding-block-l--mobile{padding-block:var(--px-padding-l-mobile)}.padding-block-xl--mobile{padding-block:var(--px-padding-xl-mobile)}.padding-block-none--mobile{padding-block:var(--px-padding-none)}.padding-inline-2xs--mobile{padding-inline:var(--px-padding-2xs)}.padding-inline-xs--mobile{padding-inline:var(--px-padding-xs)}.padding-inline-s--mobile{padding-inline:var(--px-padding-s)}.padding-inline-m--mobile{padding-inline:var(--px-padding-m)}.padding-inline-l--mobile{padding-inline:var(--px-padding-l-mobile)}.padding-inline-xl--mobile{padding-inline:var(--px-padding-xl-mobile)}.padding-inline-none--mobile{padding-inline:var(--px-padding-none)}.padding-top-2xs--mobile{padding-top:var(--px-padding-2xs)}.padding-top-xs--mobile{padding-top:var(--px-padding-xs)}.padding-top-s--mobile{padding-top:var(--px-padding-s)}.padding-top-m--mobile{padding-top:var(--px-padding-m)}.padding-top-l--mobile{padding-top:var(--px-padding-l-mobile)}.padding-top-xl--mobile{padding-top:var(--px-padding-xl-mobile)}.padding-top-none--mobile{padding-top:var(--px-padding-none)}.padding-right-2xs--mobile{padding-right:var(--px-padding-2xs)}.padding-right-xs--mobile{padding-right:var(--px-padding-xs)}.padding-right-s--mobile{padding-right:var(--px-padding-s)}.padding-right-m--mobile{padding-right:var(--px-padding-m)}.padding-right-l--mobile{padding-right:var(--px-padding-l-mobile)}.padding-right-xl--mobile{padding-right:var(--px-padding-xl-mobile)}.padding-right-none--mobile{padding-right:var(--px-padding-none)}.padding-bottom-2xs--mobile{padding-bottom:var(--px-padding-2xs)}.padding-bottom-xs--mobile{padding-bottom:var(--px-padding-xs)}.padding-bottom-s--mobile{padding-bottom:var(--px-padding-s)}.padding-bottom-m--mobile{padding-bottom:var(--px-padding-m)}.padding-bottom-l--mobile{padding-bottom:var(--px-padding-l-mobile)}.padding-bottom-xl--mobile{padding-bottom:var(--px-padding-xl-mobile)}.padding-bottom-none--mobile{padding-bottom:var(--px-padding-none)}.padding-left-2xs--mobile{padding-left:var(--px-padding-2xs)}.padding-left-xs--mobile{padding-left:var(--px-padding-xs)}.padding-left-s--mobile{padding-left:var(--px-padding-s)}.padding-left-m--mobile{padding-left:var(--px-padding-m)}.padding-left-l--mobile{padding-left:var(--px-padding-l-mobile)}.padding-left-xl--mobile{padding-left:var(--px-padding-xl-mobile)}.padding-left-none--mobile{padding-left:var(--px-padding-none)}.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)}}.border-s ::slotted([slot="anchor-full"]){right:calc(var(--px-border-s) * -1);left:calc(var(--px-border-s) * -1)}.border-m ::slotted([slot="anchor-full"]){right:calc(var(--px-border-m) * -1);left:calc(var(--px-border-m) * -1)}.border-l ::slotted([slot="anchor-full"]){right:calc(var(--px-border-l) * -1);left:calc(var(--px-border-l) * -1)}@media only screen and (min-width: 768px) and (max-width: 1024px){.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)}.padding-2xs--tablet{padding:var(--px-padding-2xs)}.padding-xs--tablet{padding:var(--px-padding-xs)}.padding-s--tablet{padding:var(--px-padding-s)}.padding-m--tablet{padding:var(--px-padding-m)}.padding-l--tablet{padding:var(--px-padding-l)}.padding-xl--tablet{padding:var(--px-padding-xl)}.padding-none--tablet{padding:var(--px-padding-none)}.padding-block-2xs--tablet{padding-block:var(--px-padding-2xs)}.padding-block-xs--tablet{padding-block:var(--px-padding-xs)}.padding-block-s--tablet{padding-block:var(--px-padding-s)}.padding-block-m--tablet{padding-block:var(--px-padding-m)}.padding-block-l--tablet{padding-block:var(--px-padding-l)}.padding-block-xl--tablet{padding-block:var(--px-padding-xl)}.padding-block-none--tablet{padding-block:var(--px-padding-none)}.padding-inline-2xs--tablet{padding-inline:var(--px-padding-2xs)}.padding-inline-xs--tablet{padding-inline:var(--px-padding-xs)}.padding-inline-s--tablet{padding-inline:var(--px-padding-s)}.padding-inline-m--tablet{padding-inline:var(--px-padding-m)}.padding-inline-l--tablet{padding-inline:var(--px-padding-l)}.padding-inline-xl--tablet{padding-inline:var(--px-padding-xl)}.padding-inline-none--tablet{padding-inline:var(--px-padding-none)}.padding-top-2xs--tablet{padding-top:var(--px-padding-2xs)}.padding-top-xs--tablet{padding-top:var(--px-padding-xs)}.padding-top-s--tablet{padding-top:var(--px-padding-s)}.padding-top-m--tablet{padding-top:var(--px-padding-m)}.padding-top-l--tablet{padding-top:var(--px-padding-l)}.padding-top-xl--tablet{padding-top:var(--px-padding-xl)}.padding-top-none--tablet{padding-top:var(--px-padding-none)}.padding-right-2xs--tablet{padding-right:var(--px-padding-2xs)}.padding-right-xs--tablet{padding-right:var(--px-padding-xs)}.padding-right-s--tablet{padding-right:var(--px-padding-s)}.padding-right-m--tablet{padding-right:var(--px-padding-m)}.padding-right-l--tablet{padding-right:var(--px-padding-l)}.padding-right-xl--tablet{padding-right:var(--px-padding-xl)}.padding-right-none--tablet{padding-right:var(--px-padding-none)}.padding-bottom-2xs--tablet{padding-bottom:var(--px-padding-2xs)}.padding-bottom-xs--tablet{padding-bottom:var(--px-padding-xs)}.padding-bottom-s--tablet{padding-bottom:var(--px-padding-s)}.padding-bottom-m--tablet{padding-bottom:var(--px-padding-m)}.padding-bottom-l--tablet{padding-bottom:var(--px-padding-l)}.padding-bottom-xl--tablet{padding-bottom:var(--px-padding-xl)}.padding-bottom-none--tablet{padding-bottom:var(--px-padding-none)}.padding-left-2xs--tablet{padding-left:var(--px-padding-2xs)}.padding-left-xs--tablet{padding-left:var(--px-padding-xs)}.padding-left-s--tablet{padding-left:var(--px-padding-s)}.padding-left-m--tablet{padding-left:var(--px-padding-m)}.padding-left-l--tablet{padding-left:var(--px-padding-l)}.padding-left-xl--tablet{padding-left:var(--px-padding-xl)}.padding-left-none--tablet{padding-left:var(--px-padding-none)}}@media only screen and (min-width: 1025px){.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)}.padding-2xs--laptop{padding:var(--px-padding-2xs)}.padding-xs--laptop{padding:var(--px-padding-xs)}.padding-s--laptop{padding:var(--px-padding-s)}.padding-m--laptop{padding:var(--px-padding-m)}.padding-l--laptop{padding:var(--px-padding-l)}.padding-xl--laptop{padding:var(--px-padding-xl)}.padding-none--laptop{padding:var(--px-padding-none)}.padding-block-2xs--laptop{padding-block:var(--px-padding-2xs)}.padding-block-xs--laptop{padding-block:var(--px-padding-xs)}.padding-block-s--laptop{padding-block:var(--px-padding-s)}.padding-block-m--laptop{padding-block:var(--px-padding-m)}.padding-block-l--laptop{padding-block:var(--px-padding-l)}.padding-block-xl--laptop{padding-block:var(--px-padding-xl)}.padding-block-none--laptop{padding-block:var(--px-padding-none)}.padding-inline-2xs--laptop{padding-inline:var(--px-padding-2xs)}.padding-inline-xs--laptop{padding-inline:var(--px-padding-xs)}.padding-inline-s--laptop{padding-inline:var(--px-padding-s)}.padding-inline-m--laptop{padding-inline:var(--px-padding-m)}.padding-inline-l--laptop{padding-inline:var(--px-padding-l)}.padding-inline-xl--laptop{padding-inline:var(--px-padding-xl)}.padding-inline-none--laptop{padding-inline:var(--px-padding-none)}.padding-top-2xs--laptop{padding-top:var(--px-padding-2xs)}.padding-top-xs--laptop{padding-top:var(--px-padding-xs)}.padding-top-s--laptop{padding-top:var(--px-padding-s)}.padding-top-m--laptop{padding-top:var(--px-padding-m)}.padding-top-l--laptop{padding-top:var(--px-padding-l)}.padding-top-xl--laptop{padding-top:var(--px-padding-xl)}.padding-top-none--laptop{padding-top:var(--px-padding-none)}.padding-right-2xs--laptop{padding-right:var(--px-padding-2xs)}.padding-right-xs--laptop{padding-right:var(--px-padding-xs)}.padding-right-s--laptop{padding-right:var(--px-padding-s)}.padding-right-m--laptop{padding-right:var(--px-padding-m)}.padding-right-l--laptop{padding-right:var(--px-padding-l)}.padding-right-xl--laptop{padding-right:var(--px-padding-xl)}.padding-right-none--laptop{padding-right:var(--px-padding-none)}.padding-bottom-2xs--laptop{padding-bottom:var(--px-padding-2xs)}.padding-bottom-xs--laptop{padding-bottom:var(--px-padding-xs)}.padding-bottom-s--laptop{padding-bottom:var(--px-padding-s)}.padding-bottom-m--laptop{padding-bottom:var(--px-padding-m)}.padding-bottom-l--laptop{padding-bottom:var(--px-padding-l)}.padding-bottom-xl--laptop{padding-bottom:var(--px-padding-xl)}.padding-bottom-none--laptop{padding-bottom:var(--px-padding-none)}.padding-left-2xs--laptop{padding-left:var(--px-padding-2xs)}.padding-left-xs--laptop{padding-left:var(--px-padding-xs)}.padding-left-s--laptop{padding-left:var(--px-padding-s)}.padding-left-m--laptop{padding-left:var(--px-padding-m)}.padding-left-l--laptop{padding-left:var(--px-padding-l)}.padding-left-xl--laptop{padding-left:var(--px-padding-xl)}.padding-left-none--laptop{padding-left:var(--px-padding-none)}}', u = new CSSStyleSheet();
4
- u.replaceSync(C);
5
- const w = ["anchor-right", "anchor-left", "anchor-full"], T = ["", "cover", "contain", "default"], p = class p extends g {
3
+ const F = '.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);padding:var(--container-padding-top--mobile) var(--container-padding-right--mobile) var(--container-padding-bottom--mobile) var(--container-padding-left--mobile);box-sizing:border-box}:host([inverted]) .container{background-color:var(--background-color-inverted)}.border-none{border:none}.border-s{border:var(--px-border-size-s) solid var(--border-color)}.border-m{border:var(--px-border-size-m) solid var(--border-color)}.border-l{border:var(--px-border-size-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:2}::slotted([slot="anchor-right"]){right:var(--container-padding-right--mobile)}::slotted([slot="anchor-left"]){left:var(--container-padding-left--mobile)}::slotted([slot="anchor-full"]){transform:translateY(-100%);right:0;left:0;text-align:center;z-index:1}@media only screen and (max-width: 640px){.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)}}.border-s ::slotted([slot="anchor-full"]){right:calc(var(--px-border-size-s) * -1);left:calc(var(--px-border-size-s) * -1)}.border-m ::slotted([slot="anchor-full"]){right:calc(var(--px-border-size-m) * -1);left:calc(var(--px-border-size-m) * -1)}.border-l ::slotted([slot="anchor-full"]){right:calc(var(--px-border-l) * -1);left:calc(var(--px-border-l) * -1)}@media only screen and (min-width: 768px) and (max-width: 1024px){.container{padding:var(--container-padding-top--tablet) var(--container-padding-right--tablet) var(--container-padding-bottom--tablet) var(--container-padding-left--tablet);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-padding-right--tablet)}::slotted([slot="anchor-left"]){left:var(--container-padding-left--tablet)}}@media only screen and (min-width: 1025px){.container{padding:var(--container-padding-top--laptop) var(--container-padding-right--laptop) var(--container-padding-bottom--laptop) var(--container-padding-left--laptop);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-padding-right--laptop)}::slotted([slot="anchor-left"]){left:var(--container-padding-left--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}}', f = new CSSStyleSheet();
4
+ f.replaceSync(F);
5
+ const H = ["anchor-right", "anchor-left", "anchor-full"], j = ["", "cover", "contain", "default"], c = class c extends m {
6
6
  constructor() {
7
- super(u), this.template = () => `<div class="container">
7
+ super(f), this.template = () => `<div class="container">
8
8
  <slot name="anchor-left"></slot>
9
9
  <slot name="anchor-right"></slot>
10
10
  <slot name="anchor-full"></slot>
@@ -43,6 +43,11 @@ const w = ["anchor-right", "anchor-left", "anchor-full"], T = ["", "cover", "con
43
43
  "padding-bottom--laptop",
44
44
  "padding-left--laptop",
45
45
  "border",
46
+ "border-color",
47
+ "border-side",
48
+ "border-side--mobile",
49
+ "border-side--tablet",
50
+ "border-side--laptop",
46
51
  "border-radius",
47
52
  "no-border-radius",
48
53
  "no-border-radius--mobile",
@@ -67,53 +72,93 @@ const w = ["anchor-right", "anchor-left", "anchor-full"], T = ["", "cover", "con
67
72
  ];
68
73
  }
69
74
  connectedCallback() {
70
- var a, e, d, i;
71
- super.connectedCallback(), this.backgroundColor || (this.backgroundColor = "container-default");
75
+ var r, e, o, i;
76
+ super.connectedCallback(), !this.padding && !this.paddingBlock && !this.paddingInline && !this.paddingTop && !this.paddingRight && !this.paddingBottom && !this.paddingLeft && !this.paddingMobile && !this.paddingBlockMobile && !this.paddingInlineMobile && !this.paddingTopMobile && !this.paddingRightMobile && !this.paddingBottomMobile && !this.paddingLeftMobile && !this.paddingTablet && !this.paddingBlockTablet && !this.paddingInlineTablet && !this.paddingTopTablet && !this.paddingRightTablet && !this.paddingBottomTablet && !this.paddingLeftTablet && !this.paddingLaptop && !this.paddingBlockLaptop && !this.paddingInlineLaptop && !this.paddingTopLaptop && !this.paddingRightLaptop && !this.paddingBottomLaptop && !this.paddingLeftLaptop && (this.padding = "m"), this.backgroundColor || (this.backgroundColor = "container-neutral-bare"), this.borderColor || (this.borderColor = "container-main");
72
77
  const t = this.querySelector("[slot]");
73
- t && w.includes(t.getAttribute("slot")) && this.shadowRoot.querySelector(".container").classList.toggle("anchored"), ((a = this.parentElement) == null ? void 0 : a.getAttribute("align-items")) === "stretch" && (((e = this.parentElement) == null ? void 0 : e.getAttribute("direction")) === "column" ? this.$el.style.width = "100%" : this.$el.style.height = "100%"), (((d = this.parentElement) == null ? void 0 : d.localName) === "px-grid-item" || ((i = this.parentElement) == null ? void 0 : i.localName) === "px-a") && (this.$el.style.height = "100%");
78
+ t && H.includes(t.getAttribute("slot")) && this.shadowRoot.querySelector(".container").classList.toggle("anchored"), ((r = this.parentElement) == null ? void 0 : r.getAttribute("align-items")) === "stretch" && (((e = this.parentElement) == null ? void 0 : e.getAttribute("direction")) === "column" ? this.$el.style.width = "100%" : this.$el.style.height = "100%"), (((o = this.parentElement) == null ? void 0 : o.localName) === "px-grid-item" || ((i = this.parentElement) == null ? void 0 : i.localName) === "px-a") && (this.$el.style.height = "100%");
74
79
  }
75
- attributeChangedCallback(t, a, e) {
76
- if (a !== e)
80
+ attributeChangedCallback(t, r, e) {
81
+ if (r !== e)
77
82
  switch (t) {
78
83
  case "padding":
79
- case "padding-block":
80
- case "padding-inline":
81
- case "padding-top":
82
- case "padding-right":
83
- case "padding-bottom":
84
- case "padding-left":
85
84
  case "padding--mobile":
86
- case "padding-block--mobile":
87
- case "padding-inline--mobile":
88
- case "padding-top--mobile":
89
- case "padding-right--mobile":
90
- case "padding-bottom--mobile":
91
- case "padding-left--mobile":
92
85
  case "padding--tablet":
93
- case "padding-block--tablet":
94
- case "padding-inline--tablet":
95
- case "padding-top--tablet":
96
- case "padding-right--tablet":
97
- case "padding-bottom--tablet":
98
- case "padding-left--tablet":
99
86
  case "padding--laptop":
100
- case "padding-block--laptop":
87
+ this.updatePadding(t, r, e, d, [
88
+ "top",
89
+ "right",
90
+ "bottom",
91
+ "left"
92
+ ]);
93
+ break;
94
+ case "padding-inline":
95
+ case "padding-inline--mobile":
96
+ case "padding-inline--tablet":
101
97
  case "padding-inline--laptop":
98
+ this.updatePadding(t, r, e, d, [
99
+ "left",
100
+ "right"
101
+ ]);
102
+ break;
103
+ case "padding-block":
104
+ case "padding-block--mobile":
105
+ case "padding-block--tablet":
106
+ case "padding-block--laptop":
107
+ this.updatePadding(t, r, e, d, [
108
+ "top",
109
+ "bottom"
110
+ ]);
111
+ break;
112
+ case "padding-top":
113
+ case "padding-top--mobile":
114
+ case "padding-top--tablet":
102
115
  case "padding-top--laptop":
116
+ this.updatePadding(t, r, e, d, [
117
+ "top"
118
+ ]);
119
+ break;
120
+ case "padding-right":
121
+ case "padding-right--mobile":
122
+ case "padding-right--tablet":
103
123
  case "padding-right--laptop":
124
+ this.updatePadding(t, r, e, d, [
125
+ "right"
126
+ ]);
127
+ break;
128
+ case "padding-bottom":
129
+ case "padding-bottom--mobile":
130
+ case "padding-bottom--tablet":
104
131
  case "padding-bottom--laptop":
132
+ this.updatePadding(t, r, e, d, [
133
+ "bottom"
134
+ ]);
135
+ break;
136
+ case "padding-left":
137
+ case "padding-left--mobile":
138
+ case "padding-left--tablet":
105
139
  case "padding-left--laptop":
106
- this.updateAttribute(t, a, e, z);
140
+ this.updatePadding(t, r, e, d, [
141
+ "left"
142
+ ]);
107
143
  break;
108
144
  case "border":
109
- this.updateAttribute(t, a, e, S);
145
+ this.updateAttribute(t, r, e, w);
146
+ break;
147
+ case "border-color":
148
+ this.updateBorderColor(t, e);
149
+ break;
150
+ case "border-side":
151
+ case "border-side--mobile":
152
+ case "border-side--tablet":
153
+ case "border-side--laptop":
154
+ this.updateAttribute(t, r, e, P);
110
155
  break;
111
156
  case "border-radius":
112
157
  this.updateAttribute(
113
158
  t,
114
- a,
159
+ r,
115
160
  e,
116
- $
161
+ I
117
162
  );
118
163
  break;
119
164
  case "no-border-radius":
@@ -122,9 +167,9 @@ const w = ["anchor-right", "anchor-left", "anchor-full"], T = ["", "cover", "con
122
167
  case "no-border-radius--laptop":
123
168
  this.updateNoBorderRadius(
124
169
  t,
125
- a,
170
+ r,
126
171
  e,
127
- A
172
+ E
128
173
  );
129
174
  break;
130
175
  case "background-color":
@@ -142,9 +187,9 @@ const w = ["anchor-right", "anchor-left", "anchor-full"], T = ["", "cover", "con
142
187
  case "background-size":
143
188
  this.updateAttribute(
144
189
  t,
145
- a,
190
+ r,
146
191
  e,
147
- T
192
+ j
148
193
  );
149
194
  break;
150
195
  case "background-image":
@@ -157,85 +202,115 @@ const w = ["anchor-right", "anchor-left", "anchor-full"], T = ["", "cover", "con
157
202
  e !== null && e !== "" && (this.$el.style.backgroundPosition = e);
158
203
  break;
159
204
  case "box-shadow":
160
- this.updateAttribute(t, a, e, y);
205
+ this.updateAttribute(t, r, e, R);
161
206
  break;
162
207
  default:
163
- super.attributeChangedCallback(t, a, e);
208
+ super.attributeChangedCallback(t, r, e);
164
209
  break;
165
210
  }
166
211
  }
167
- updateBackgroundImg(t, a) {
168
- this.$el.style.setProperty(`--${t}`, `url("${a}")`);
212
+ updatePadding(t, r, e, o, i) {
213
+ if (!this.checkName(o, e)) {
214
+ console.error(`Bad ${t} value for`, this.$el);
215
+ return;
216
+ }
217
+ const a = t.includes("--"), h = a ? t.split("--")[1] : "", s = (n, l, B, z) => {
218
+ const M = n === "laptop" ? "desktop" : n;
219
+ l !== null && l !== "" && l !== "default" && B.forEach((C) => {
220
+ const k = `--container-padding-${C}--${n}`;
221
+ (z || !this.$el.style.getPropertyValue(k)) && this.$el.style.setProperty(
222
+ k,
223
+ `var(--px-padding-${l}-${M})`
224
+ );
225
+ });
226
+ };
227
+ a ? (s(h, r, i, !0), s(h, e, i, !0)) : ["mobile", "tablet", "laptop"].forEach((n) => {
228
+ s(n, r, i, !1), s(n, e, i, !1);
229
+ });
230
+ }
231
+ updateBackgroundImg(t, r) {
232
+ this.$el.style.setProperty(`--${t}`, `url("${r}")`);
169
233
  }
170
- updateGradient(t, a) {
171
- if (this.checkName(L, a)) {
234
+ updateGradient(t, r) {
235
+ if (this.checkName(_, r)) {
172
236
  const e = this.splitAttrNameFromBreakpoint(t);
173
237
  t = e.attrName;
174
- const d = e.breakpoint;
238
+ const o = e.breakpoint;
175
239
  this.$el.style.setProperty(
176
- `--${t}${d}`,
177
- `linear-gradient(var(--px-color-bg-gradient-${a}))`
240
+ `--${t}${o}`,
241
+ `linear-gradient(var(--px-background-color-container-gradient-${r}))`
178
242
  );
179
243
  } else
180
244
  console.error(
181
- `${a} is not an allowed background-gradient value for ${this.$el}`
245
+ `${r} is not an allowed background-gradient value for ${this.$el}`
182
246
  );
183
247
  }
184
- updateBackgroundColor(t, a) {
185
- if (this.checkName(b, a)) {
186
- const e = this.splitAttrNameFromBreakpoint(t), d = e.breakpoint;
248
+ updateBackgroundColor(t, r) {
249
+ if (this.checkName(x, r)) {
250
+ const e = this.splitAttrNameFromBreakpoint(t), o = e.breakpoint;
187
251
  this.$el.style.setProperty(
188
- `--${e.attrName}${d}`,
189
- `var(--px-color-bg-${a}-default)`
252
+ `--${e.attrName}${o}`,
253
+ `var(--px-background-color-${r}-default)`
190
254
  ), this.$el.style.setProperty(
191
- `--${e.attrName}-inverted${d}`,
192
- `var(--px-color-bg-${a}-inverted)`
255
+ `--${e.attrName}-inverted${o}`,
256
+ `var(--px-background-color-${r}-inverted)`
193
257
  );
194
258
  } else
195
259
  console.error(
196
- `${a} is not an allowed ${t} value for ${this.$el}`
260
+ `${r} is not an allowed ${t} value for ${this.$el}`
197
261
  );
198
262
  }
199
- updateNoBorderRadius(t, a, e, d) {
200
- if (!this.checkName(d, e))
263
+ updateBorderColor(t, r) {
264
+ this.checkName(q, r) ? (this.$el.style.setProperty(
265
+ `--${t}`,
266
+ `var(--px-border-color-${r}-default)`
267
+ ), this.$el.style.setProperty(
268
+ `--${t}-inverted`,
269
+ `var(--px-border-color-${r}-inverted)`
270
+ )) : console.error(
271
+ `${r} is not an allowed ${t} value for ${this.$el}`
272
+ );
273
+ }
274
+ updateNoBorderRadius(t, r, e, o) {
275
+ if (!this.checkName(o, e))
201
276
  console.error(
202
277
  `${e} is not an allowed ${t} value for ${this.$el}`
203
278
  );
204
279
  else {
205
- const i = this.splitAttrNameFromBreakpoint(t), r = i.breakpoint;
206
- a !== null && a !== "" && this.$el.classList.toggle(
207
- `${i.attrName}-${a}${r}`
280
+ const i = this.splitAttrNameFromBreakpoint(t), a = i.breakpoint;
281
+ r !== null && r !== "" && this.$el.classList.toggle(
282
+ `${i.attrName}-${r}${a}`
208
283
  ), e !== null && e !== "" && this.$el.classList.toggle(
209
- `${i.attrName}-${e}${r}`
284
+ `${i.attrName}-${e}${a}`
210
285
  );
211
286
  }
212
287
  }
213
- updateAttribute(t, a, e, d) {
214
- if (!this.checkName(d, e))
288
+ updateAttribute(t, r, e, o) {
289
+ if (!this.checkName(o, e))
215
290
  console.error(
216
291
  `${e} is not an allowed ${t} value for ${this.$el}`
217
292
  );
218
293
  else {
219
- const i = this.splitAttrNameFromBreakpoint(t), r = i.breakpoint;
220
- a !== null && a !== "" && this.$el.classList.toggle(
221
- `${i.attrName}-${a}${r}`
294
+ const i = this.splitAttrNameFromBreakpoint(t), a = i.breakpoint;
295
+ r !== null && r !== "" && this.$el.classList.toggle(
296
+ `${i.attrName}-${r}${a}`
222
297
  ), e !== null && e !== "" && this.$el.classList.toggle(
223
- `${i.attrName}-${e}${r}`
298
+ `${i.attrName}-${e}${a}`
224
299
  );
225
300
  }
226
301
  }
227
302
  splitAttrNameFromBreakpoint(t) {
228
- let a = "";
303
+ let r = "";
229
304
  if (["--mobile", "--tablet", "--laptop"].some(
230
305
  (e) => t.includes(e)
231
306
  )) {
232
307
  const e = t.split("--");
233
- t = e[0], a = `--${e[1]}`;
308
+ t = e[0], r = `--${e[1]}`;
234
309
  }
235
- return { attrName: t, breakpoint: a };
310
+ return { attrName: t, breakpoint: r };
236
311
  }
237
- checkName(t, a) {
238
- return t.includes(a);
312
+ checkName(t, r) {
313
+ return t.includes(r);
239
314
  }
240
315
  get padding() {
241
316
  return this.getAttribute("padding");
@@ -411,6 +486,36 @@ const w = ["anchor-right", "anchor-left", "anchor-full"], T = ["", "cover", "con
411
486
  set border(t) {
412
487
  this.setAttribute("border", t);
413
488
  }
489
+ get borderColor() {
490
+ return this.getAttribute("border-color");
491
+ }
492
+ set borderColor(t) {
493
+ this.setAttribute("border-color", t);
494
+ }
495
+ get borderSide() {
496
+ return this.getAttribute("border-side");
497
+ }
498
+ set borderSide(t) {
499
+ this.setAttribute("border-side", t);
500
+ }
501
+ get borderSideMobile() {
502
+ return this.getAttribute("border-side--mobile");
503
+ }
504
+ set borderSideMobile(t) {
505
+ this.setAttribute("border-side--mobile", t);
506
+ }
507
+ get borderSideTablet() {
508
+ return this.getAttribute("border-side--tablet");
509
+ }
510
+ set borderSideTablet(t) {
511
+ this.setAttribute("border-side--tablet", t);
512
+ }
513
+ get borderSideLaptop() {
514
+ return this.getAttribute("border-side--laptop");
515
+ }
516
+ set borderSideLaptop(t) {
517
+ this.setAttribute("border-side--laptop", t);
518
+ }
414
519
  get borderRadius() {
415
520
  return this.getAttribute("border-radius");
416
521
  }
@@ -538,14 +643,14 @@ const w = ["anchor-right", "anchor-left", "anchor-full"], T = ["", "cover", "con
538
643
  this.setAttribute("inverted", t);
539
644
  }
540
645
  };
541
- p.nativeName = "div";
542
- let o = p;
543
- customElements.define("px-container", o);
544
- const B = ".btn{display:inline-flex;vertical-align:middle;align-items:center;justify-content:center;font-family:var(--px-font-family);font-size:var(--px-text-size-base-mobile);line-height:var(--px-line-height-m);font-weight:700;gap:var(--px-spacing-between-icon-horizontal);cursor:pointer;text-decoration:none;--btn-transition: all .2s ease-in-out 0s;transition:var(--btn-transition);border:var(--px-border-m) solid transparent}.btn,.btn *{box-sizing:border-box}.btn ::slotted(px-icon){line-height:0}.btn:hover:not([disabled],[aria-disabled=true],.loading){border-color:var(--px-color-border-action-hover-default)}.btn:focus:not([disabled],[aria-disabled=true]){outline-offset:var(--px-offset-s);outline:var(--px-outline-s) solid var(--px-color-outline-default)}.btn:active{transform:scale(.95)}.btn[disabled],.btn[aria-disabled=true]{cursor:default;pointer-events:none}.btn.loading{cursor:inherit}.btn.loading ::slotted(px-spinner){line-height:0}.btn:not(.secondary,.tertiary,.patch){color:var(--px-color-txt-primary-inverted);background:var(--px-color-bg-action-primary-default);min-height:var(--px-size-action-mobile);padding:0 var(--px-padding-m);border-radius:var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-big) var(--px-radius-button-small)}.btn:not(.secondary,.tertiary,.patch):hover:not([disabled],[aria-disabled=true],.loading){color:var(--px-color-txt-primary-default);background:var(--px-color-bg-action-hover-bordered-default)}.btn:not(.secondary,.tertiary,.patch)[disabled],.btn:not(.secondary,.tertiary,.patch)[aria-disabled=true]{background:var(--px-color-bg-action-disabled-default);color:var(--px-color-txt-disabled-default)}.btn:not(.secondary,.tertiary,.patch).loading{background:var(--px-color-bg-action-disabled-default);color:var(--px-color-txt-primary-default);border-color:transparent}.btn:not(.secondary,.tertiary,.patch).extended{width:100%}.btn:not(.secondary,.tertiary,.patch).alternative{border-radius:var(--px-radius-button-small)}.btn.secondary{color:var(--px-color-txt-primary-default);background:var(--px-color-bg-action-secondary-default);min-height:var(--px-size-action-mobile);padding:0 var(--px-padding-m);border-radius:var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-big) var(--px-radius-button-small)}.btn.secondary:hover:not([disabled],[aria-disabled=true],.loading){color:var(--px-color-txt-primary-default);background:var(--px-color-bg-action-hover-bordered-default)}.btn.secondary[disabled],.btn.secondary[aria-disabled=true]{background:var(--px-color-bg-action-disabled-default);color:var(--px-color-txt-disabled-default)}.btn.secondary.loading{background:var(--px-color-bg-action-disabled-default);color:var(--px-color-txt-primary-default);border-color:transparent}.btn.secondary.extended{width:100%}.btn.secondary.alternative{border-radius:var(--px-radius-button-small)}.btn.tertiary{background:none;color:var(--px-color-txt-primary-default);border-radius:var(--px-radius-pill);padding:var(--px-padding-2xs) 0}.btn.tertiary ::slotted(px-icon){display:flex;align-items:center;justify-content:center;width:var(--px-icon-size-m-mobile);height:var(--px-icon-size-m-mobile);border-radius:var(--px-radius-pill);background:var(--px-color-bg-action-secondary-default);transition:var(--btn-transition)}.btn.tertiary:hover:not([disabled],[aria-disabled=true],.loading){padding:var(--px-padding-2xs) var(--px-padding-s)}.btn.tertiary:hover:not([disabled],[aria-disabled=true],.loading) ::slotted(px-icon){background:transparent;width:inherit;height:inherit}.btn.tertiary[disabled],.btn.tertiary[aria-disabled=true]{color:var(--px-color-txt-disabled-default)}.btn.tertiary[disabled] ::slotted(px-icon),.btn.tertiary[aria-disabled=true] ::slotted(px-icon){background:var(--px-color-bg-action-disabled-default)}.btn.tertiary.loading{color:var(--px-color-txt-primary-default);border-color:transparent}.btn.tertiary.loading ::slotted(px-spinner){display:flex;align-items:center;justify-content:center;width:var(--px-icon-size-m-mobile);height:var(--px-icon-size-m-mobile);border-radius:var(--px-radius-pill);background:var(--px-color-bg-action-disabled-default)}.btn.patch{display:inline-flex}.btn.patch:hover:not([disabled],[aria-disabled=true],.loading){color:var(--px-color-txt-primary-default);background:var(--px-color-bg-action-hover-bordered-default)}.btn.patch[disabled],.btn.patch[aria-disabled=true]{background:var(--px-color-bg-action-disabled-default);color:var(--px-color-txt-disabled-default)}button.link{background:none;border:none;text-decoration:underline;padding:0;cursor:pointer}button.link[disabled],button.link[aria-disabled=true]{cursor:default;pointer-events:none;color:var(--px-color-txt-disabled-default)}:host([inverted]) .btn:hover:not([disabled],[aria-disabled=true],.loading){border-color:var(--px-color-border-action-hover-inverted)}:host([inverted]) .btn:focus:not([disabled],[aria-disabled=true]){outline-color:var(--px-color-outline-inverted)}:host([inverted]) .btn:not(.secondary,.tertiary,.patch){color:var(--px-color-txt-primary-default);background:var(--px-color-bg-action-primary-inverted)}:host([inverted]) .btn:not(.secondary,.tertiary,.patch):hover:not([disabled],[aria-disabled=true],.loading){color:var(--px-color-txt-primary-inverted);background:var(--px-color-bg-action-hover-bordered-default-inverted)}:host([inverted]) .btn:not(.secondary,.tertiary,.patch)[disabled],:host([inverted]) .btn:not(.secondary,.tertiary,.patch)[aria-disabled=true]{background:var(--px-color-bg-action-disabled-inverted);color:var(--px-color-txt-disabled-inverted)}:host([inverted]) .btn:not(.secondary,.tertiary,.patch).loading{background:var(--px-color-bg-action-disabled-inverted);color:var(--px-color-txt-primary-inverted);border-color:transparent}:host([inverted]) .btn.secondary{color:var(--px-color-txt-primary-inverted);background:var(--px-color-bg-action-secondary-inverted)}:host([inverted]) .btn.secondary:hover:not([disabled],[aria-disabled=true],.loading){color:var(--px-color-txt-primary-inverted);background:var(--px-color-bg-action-hover-bordered-default-inverted)}:host([inverted]) .btn.secondary[disabled],:host([inverted]) .btn.secondary[aria-disabled=true]{background:var(--px-color-bg-action-disabled-inverted);color:var(--px-color-txt-disabled-inverted)}:host([inverted]) .btn.secondary.loading{background:var(--px-color-bg-action-disabled-inverted);color:var(--px-color-txt-primary-inverted);border-color:transparent}:host([inverted]) .btn.tertiary{color:var(--px-color-txt-primary-inverted)}:host([inverted]) .btn.tertiary ::slotted(px-icon){background:var(--px-color-bg-action-secondary-inverted)}:host([inverted]) .btn.tertiary:hover:not([disabled],[aria-disabled=true],.loading) ::slotted(px-icon){background:transparent}:host([inverted]) .btn.tertiary[disabled],:host([inverted]) .btn.tertiary[aria-disabled=true]{color:var(--px-color-txt-disabled-inverted)}:host([inverted]) .btn.tertiary[disabled] ::slotted(px-icon),:host([inverted]) .btn.tertiary[aria-disabled=true] ::slotted(px-icon){background:var(--px-color-bg-action-disabled-inverted)}:host([inverted]) .btn.tertiary.loading{color:var(--px-color-txt-primary-inverted)}:host([inverted]) .btn.tertiary.loading ::slotted(px-spinner){background:var(--px-color-bg-action-disabled-inverted)}:host([inverted]) .btn.patch:hover:not([disabled],[aria-disabled=true],.loading){color:var(--px-color-txt-primary-inverted);background:var(--px-color-bg-action-hover-bordered-default-inverted)}:host([inverted]) .btn.patch[disabled],:host([inverted]) .btn.patch[aria-disabled=true]{background:var(--px-color-bg-action-disabled-inverted);color:var(--px-color-txt-disabled-inverted)}:host([inverted]) button.link[disabled],:host([inverted]) button.link[aria-disabled=true]{color:var(--px-color-txt-disabled-inverted)}@media only screen and (min-width: 768px){.btn{font-size:var(--px-text-size-base-tablet)}.btn:not(.secondary,.tertiary,.patch){min-height:var(--px-size-action-desktop)}.btn.secondary{min-height:var(--px-size-action-desktop)}.btn.tertiary ::slotted(px-spinner){width:var(--px-icon-size-m-tablet);height:var(--px-icon-size-m-tablet)}}@media only screen and (min-width: 1441px){.btn{font-size:var(--px-text-size-base-desktop)}.btn:focus:not([disabled],[aria-disabled=true]){outline-offset:var(--px-offset);outline-width:var(--px-outline)}.btn.tertiary ::slotted(px-spinner){width:var(--px-icon-size-m-desktop);height:var(--px-icon-size-m-desktop)}}@keyframes anim-spinner{0%{transform:rotate(0)}to{transform:rotate(360deg)}}", R = 'a,.link,::slotted(a){font-family:var(--px-font-family);font-size:var(--px-text-size-base-mobile);line-height:var(--px-line-height-m);font-weight:500;color:var(--px-color-txt-body-default)}a:hover,.link:hover{color:var(--px-color-txt-hover-default)}a:focus,.link:focus{outline-offset:var(--px-offset-s);outline:var(--px-outline-s) solid var(--px-color-outline-default)}a[aria-disabled=true],.link[aria-disabled=true]{cursor:default;pointer-events:none;color:var(--px-color-txt-disabled-default)}a ::slotted([slot="after"]),.link ::slotted([slot="after"]){margin-left:var(--px-spacing-text-to-icon-compact-horizontal)}a ::slotted(span[slot="after"]),a ::slotted(span[slot="before"]),.link ::slotted(span[slot="after"]),.link ::slotted(span[slot="before"]){display:inline-block}::slotted(a:hover){color:var(--px-color-txt-hover-default)}a.no-style{color:inherit;text-decoration:none}a.no-style:hover,a.no-style:focus{color:inherit}a.skip-link{position:absolute;left:-10000px;top:auto;overflow:hidden;background-color:var(--px-color-bg-container-weak-default);padding:var(--px-padding-xs)}a.skip-link:focus{left:auto;z-index:999}:host([inverted]) a,:host([inverted]) .link,:host([inverted]) ::slotted(a){color:var(--px-color-txt-body-inverted)}:host([inverted]) a:hover,:host([inverted]) .link:hover{color:var(--px-color-txt-hover-inverted)}:host([inverted]) a:focus,:host([inverted]) .link:focus{outline-color:var(--px-color-outline-inverted)}:host([inverted]) a[aria-disabled=true],:host([inverted]) .link[aria-disabled=true]{color:var(--px-color-txt-disabled-inverted)}:host([inverted]) ::slotted(a:hover){color:var(--px-color-txt-hover-inverted)}:host([inverted]) a.skip-link{background-color:var(--px-color-bg-container-weak-inverted)}@media only screen and (min-width: 768px){a,.link,::slotted(a){font-size:var(--px-text-size-base-tablet)}}@media only screen and (min-width: 1441px){a,.link,::slotted(a){font-size:var(--px-text-size-base-desktop)}a:focus,.link:focus{outline-offset:var(--px-offset);outline-width:var(--px-outline)}}', E = ".patch{display:inline-flex;align-items:center;padding:0 var(--px-padding-s);height:1.625rem;border:var(--px-border-m) solid transparent;border-radius:var(--px-radius-patch-big) var(--px-radius-patch-big) var(--px-radius-patch-big) var(--px-radius-patch-small);font-family:var(--px-font-family);font-weight:700;font-size:var(--px-text-size-base-mobile);line-height:var(--px-line-height-m);text-align:center;background-color:var(--px-color-bg-promo-default);color:var(--px-color-txt-primary-inverted)}.patch,.patch *{box-sizing:border-box}@media only screen and (min-width: 768px){.patch{font-size:var(--px-text-size-base-tablet)}}@media only screen and (min-width: 1025px){.patch{font-size:var(--px-text-size-base-desktop)}}:host([inverted]) .patch{background-color:var(--px-color-bg-promo-inverted);color:var(--px-color-txt-primary-inverted)}.bottom-right{border-radius:var(--px-radius-patch-big) var(--px-radius-patch-big) var(--px-radius-patch-small) var(--px-radius-patch-big)}.bottom-left{border-radius:var(--px-radius-patch-big) var(--px-radius-patch-big) var(--px-radius-patch-big) var(--px-radius-patch-small)}.info{background-color:var(--px-color-illu-blue-core);color:var(--px-color-txt-body-default)}:host([inverted]) .info{background-color:var(--px-color-illu-blue-core);color:var(--px-color-txt-body-default)}.black-friday{background-color:var(--px-color-bg-container-rich-default);color:var(--px-color-txt-body-inverted)}:host([inverted]) .black-friday{background-color:var(--px-color-bg-container-rich-inverted);color:var(--px-color-txt-body-default)}.eco{background-color:var(--px-color-bg-success-default);color:var(--px-color-txt-body-inverted)}:host([inverted]) .eco{background-color:var(--px-color-bg-success-inverted);color:var(--px-color-txt-inverted-default)}.greyed{background-color:var(--px-color-bg-action-disabled-default);color:var(--px-color-icon-disabled-default)}:host([inverted]) .greyed{background-color:var(--px-color-bg-action-disabled-inverted);color:var(--px-color-icon-disabled-inverted)}", x = new CSSStyleSheet(), h = new CSSStyleSheet(), v = new CSSStyleSheet();
545
- x.replaceSync(B);
546
- h.replaceSync(R);
547
- v.replaceSync(E);
548
- const M = [
646
+ c.nativeName = "div";
647
+ let b = c;
648
+ customElements.define("px-container", b);
649
+ const G = '.btn{display:inline-flex;vertical-align:middle;align-items:center;justify-content:center;font-family:var(--px-font-family);font-size:var(--px-text-size-label-m-mobile);line-height:var(--px-line-height-m);font-weight:700;gap:var(--px-spacing-after-element-2xs-mobile);cursor:pointer;text-decoration:none;--btn-transition: all .2s ease-in-out 0s;transition:var(--btn-transition);border:var(--px-border-size-m) solid transparent}.btn,.btn *{box-sizing:border-box}.btn ::slotted(px-icon){line-height:0}.btn:hover:not([disabled],[aria-disabled=true],.loading){border-color:var(--px-border-color-action-hover-default)}.btn:focus:not([disabled],[aria-disabled=true]){outline-offset:var(--px-focus-offset-mobile);outline:var(--px-focus-outline-mobile) solid var(--px-border-color-focus-outline-default)}.btn:active{transform:scale(.95)}.btn[disabled],.btn[aria-disabled=true]{cursor:default;pointer-events:none}.btn.loading{cursor:inherit}.btn.loading ::slotted(px-spinner){line-height:0}.btn:not(.secondary,.tertiary,.patch){color:var(--px-text-color-heading-brand-inverted);background:var(--px-background-color-action-primary-default);min-height:var(--px-action-size-l);padding:var(--px-padding-xs-mobile) var(--px-padding-m-mobile);border-radius:var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-big) var(--px-radius-button-small)}.btn:not(.secondary,.tertiary,.patch) ::slotted([slot="after"]){margin-right:calc(var(--px-padding-xs-mobile) * -1)}.btn:not(.secondary,.tertiary,.patch) ::slotted([slot="before"]){margin-left:calc(var(--px-padding-xs-mobile) * -1)}.btn:not(.secondary,.tertiary,.patch):hover:not([disabled],[aria-disabled=true],.loading){color:var(--px-text-color-heading-brand-default);background:var(--px-background-color-action-hover-bordered-default)}.btn:not(.secondary,.tertiary,.patch)[disabled],.btn:not(.secondary,.tertiary,.patch)[aria-disabled=true]{background:var(--px-background-color-action-disabled-default);color:var(--px-text-color-action-disabled-default)}.btn:not(.secondary,.tertiary,.patch).loading{background:var(--px-background-color-action-disabled-default);color:var(--px-text-color-heading-brand-default);border-color:transparent}.btn:not(.secondary,.tertiary,.patch).extended{width:100%}.btn:not(.secondary,.tertiary,.patch).alternative{border-radius:var(--px-radius-button-small)}.btn.secondary{color:var(--px-text-color-heading-brand-default);background:var(--px-background-color-action-secondary-default);min-height:var(--px-action-size-l);padding:var(--px-padding-xs-mobile) var(--px-padding-m-mobile);border-radius:var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-big) var(--px-radius-button-small)}.btn.secondary:hover:not([disabled],[aria-disabled=true],.loading){color:var(--px-text-color-heading-brand-default);background:var(--px-background-color-action-hover-bordered-default)}.btn.secondary[disabled],.btn.secondary[aria-disabled=true]{background:var(--px-background-color-action-disabled-default);color:var(--px-text-color-action-disabled-default)}.btn.secondary.loading{background:var(--px-background-color-action-disabled-default);color:var(--px-text-color-heading-brand-default);border-color:transparent}.btn.secondary.extended{width:100%}.btn.secondary.alternative{border-radius:var(--px-radius-button-small)}.btn.tertiary{background:none;color:var(--px-text-color-heading-brand-default);border-radius:var(--px-radius-pill);border:var(--px-border-size-m) solid transparent;padding:var(--px-padding-2xs-mobile) 0;gap:var(--px-spacing-after-element-xs-mobile)}.btn.tertiary ::slotted(px-icon){display:flex;align-items:center;justify-content:center;width:var(--px-icon-size-m-mobile);height:var(--px-icon-size-m-mobile);border-radius:var(--px-radius-pill);background:var(--px-background-color-action-secondary-default);transition:var(--btn-transition)}.btn.tertiary:hover:not([disabled],[aria-disabled=true],.loading){padding:var(--px-padding-2xs-mobile) var(--px-padding-s-mobile)}.btn.tertiary:hover:not([disabled],[aria-disabled=true],.loading) ::slotted(px-icon){background:transparent;width:inherit;height:inherit}.btn.tertiary[disabled],.btn.tertiary[aria-disabled=true]{color:var(--px-text-color-action-disabled-default)}.btn.tertiary[disabled] ::slotted(px-icon),.btn.tertiary[aria-disabled=true] ::slotted(px-icon){background:var(--px-background-color-action-disabled-default)}.btn.tertiary.loading{color:var(--px-text-color-heading-brand-default);border-color:transparent}.btn.tertiary.loading ::slotted(px-spinner){display:flex;align-items:center;justify-content:center;width:var(--px-icon-size-m-mobile);height:var(--px-icon-size-m-mobile);border-radius:var(--px-radius-pill);background:var(--px-background-color-action-disabled-default)}.btn.patch{display:inline-flex}.btn.patch:hover:not([disabled],[aria-disabled=true],.loading){color:var(--px-text-color-heading-brand-default);background:var(--px-background-color-action-hover-bordered-default)}.btn.patch[disabled],.btn.patch[aria-disabled=true]{background:var(--px-background-color-action-disabled-default);color:var(--px-text-color-action-disabled-default)}button.link{background:none;border:none;text-decoration:underline;padding:0;cursor:pointer}button.link[disabled],button.link[aria-disabled=true]{cursor:default;pointer-events:none;color:var(--px-text-color-action-disabled-default)}:host([inverted]) .btn:hover:not([disabled],[aria-disabled=true],.loading){border-color:var(--px-border-color-action-hover-inverted)}:host([inverted]) .btn:focus:not([disabled],[aria-disabled=true]){outline-color:var(--px-border-color-focus-outline-inverted)}:host([inverted]) .btn:not(.secondary,.tertiary,.patch){color:var(--px-text-color-heading-brand-default);background:var(--px-background-color-action-primary-inverted)}:host([inverted]) .btn:not(.secondary,.tertiary,.patch):hover:not([disabled],[aria-disabled=true],.loading){color:var(--px-text-color-heading-brand-inverted);background:var(--px-background-color-action-hover-bordered-inverted)}:host([inverted]) .btn:not(.secondary,.tertiary,.patch)[disabled],:host([inverted]) .btn:not(.secondary,.tertiary,.patch)[aria-disabled=true]{background:var(--px-background-color-action-disabled-inverted);color:var(--px-text-color-action-disabled-inverted)}:host([inverted]) .btn:not(.secondary,.tertiary,.patch).loading{background:var(--px-background-color-action-disabled-inverted);color:var(--px-text-color-heading-brand-inverted);border-color:transparent}:host([inverted]) .btn.secondary{color:var(--px-text-color-heading-brand-inverted);background:var(--px-background-color-action-secondary-inverted)}:host([inverted]) .btn.secondary:hover:not([disabled],[aria-disabled=true],.loading){color:var(--px-text-color-heading-brand-inverted);background:var(--px-background-color-action-hover-bordered-inverted)}:host([inverted]) .btn.secondary[disabled],:host([inverted]) .btn.secondary[aria-disabled=true]{background:var(--px-background-color-action-disabled-inverted);color:var(--px-text-color-action-disabled-inverted)}:host([inverted]) .btn.secondary.loading{background:var(--px-background-color-action-disabled-inverted);color:var(--px-text-color-heading-brand-inverted);border-color:transparent}:host([inverted]) .btn.tertiary{color:var(--px-text-color-heading-brand-inverted)}:host([inverted]) .btn.tertiary ::slotted(px-icon){background:var(--px-background-color-action-secondary-inverted)}:host([inverted]) .btn.tertiary:hover:not([disabled],[aria-disabled=true],.loading) ::slotted(px-icon){background:transparent}:host([inverted]) .btn.tertiary[disabled],:host([inverted]) .btn.tertiary[aria-disabled=true]{color:var(--px-text-color-action-disabled-inverted)}:host([inverted]) .btn.tertiary[disabled] ::slotted(px-icon),:host([inverted]) .btn.tertiary[aria-disabled=true] ::slotted(px-icon){background:var(--px-background-color-action-disabled-inverted)}:host([inverted]) .btn.tertiary.loading{color:var(--px-text-color-heading-brand-inverted)}:host([inverted]) .btn.tertiary.loading ::slotted(px-spinner){background:var(--px-background-color-action-disabled-inverted)}:host([inverted]) .btn.patch:hover:not([disabled],[aria-disabled=true],.loading){color:var(--px-text-color-heading-brand-inverted);background:var( --px-background-color-action-hover-bordered-default-inverted )}:host([inverted]) .btn.patch[disabled],:host([inverted]) .btn.patch[aria-disabled=true]{background:var(--px-background-color-action-disabled-inverted);color:var(--px-text-color-action-disabled-inverted)}:host([inverted]) button.link[disabled],:host([inverted]) button.link[aria-disabled=true]{color:var(--px-text-color-action-disabled-inverted)}@media only screen and (min-width: 768px){.btn{font-size:var(--px-text-size-label-m-tablet);gap:var(--px-spacing-after-element-2xs-tablet)}.btn:focus:not([disabled],[aria-disabled=true]){outline-offset:var(--px-focus-offset-tablet);outline-width:var(--px-focus-outline-tablet)}.btn:not(.secondary,.tertiary,.patch){padding:var(--px-padding-xs-tablet) var(--px-padding-m-tablet)}.btn:not(.secondary,.tertiary,.patch) ::slotted([slot="after"]){margin-right:calc(var(--px-padding-xs-tablet) * -1)}.btn:not(.secondary,.tertiary,.patch) ::slotted([slot="before"]){margin-left:calc(var(--px-padding-xs-tablet) * -1)}.btn.secondary{padding:var(--px-padding-xs-tablet) var(--px-padding-m-tablet)}.btn.tertiary{padding:var(--px-padding-2xs-tablet) 0;gap:var(--px-spacing-after-element-xs-tablet)}.btn.tertiary ::slotted(px-icon){width:var(--px-icon-size-m-tablet);height:var(--px-icon-size-m-tablet)}.btn.tertiary:hover:not([disabled],[aria-disabled=true],.loading){padding:var(--px-padding-2xs-tablet) var(--px-padding-s-tablet)}.btn.tertiary.loading ::slotted(px-spinner){width:var(--px-icon-size-m-tablet);height:var(--px-icon-size-m-tablet)}}@media only screen and (min-width: 1025px){.btn{font-size:var(--px-text-size-label-m-desktop);gap:var(--px-spacing-after-element-2xs-desktop)}.btn:focus:not([disabled],[aria-disabled=true]){outline-offset:var(--px-focus-offset-desktop);outline-width:var(--px-focus-outline-desktop)}.btn:not(.secondary,.tertiary,.patch){padding:var(--px-padding-xs-desktop) var(--px-padding-m-desktop)}.btn:not(.secondary,.tertiary,.patch) ::slotted([slot="after"]){margin-right:calc(var(--px-padding-xs-desktop) * -1)}.btn:not(.secondary,.tertiary,.patch) ::slotted([slot="before"]){margin-left:calc(var(--px-padding-xs-desktop) * -1)}.btn.secondary{padding:var(--px-padding-xs-desktop) var(--px-padding-m-desktop)}.btn.tertiary{padding:var(--px-padding-2xs-desktop) 0;gap:var(--px-spacing-after-element-xs-desktop)}.btn.tertiary ::slotted(px-icon){width:var(--px-icon-size-m-desktop);height:var(--px-icon-size-m-desktop)}.btn.tertiary:hover:not([disabled],[aria-disabled=true],.loading){padding:var(--px-padding-2xs-desktop) var(--px-padding-s-desktop)}.btn.tertiary.loading ::slotted(px-spinner){width:var(--px-icon-size-m-desktop);height:var(--px-icon-size-m-desktop)}}@keyframes anim-spinner{0%{transform:rotate(0)}to{transform:rotate(360deg)}}', O = 'a,.link,::slotted(a){display:inline-flex;align-items:center;font-family:var(--px-font-family);font-size:var(--px-text-size-link-m-mobile);line-height:var(--px-line-height-m);font-weight:400;color:var(--px-text-color-heading-neutral-default)}a:hover,.link:hover{color:var(--px-text-color-action-hover-default)}a:focus,.link:focus{outline-offset:var(--px-focus-offset-mobile);outline:var(--px-focus-outline-mobile) solid var(--px-border-color-focus-outline-default)}a[aria-disabled=true],.link[aria-disabled=true]{cursor:default;pointer-events:none;color:var(--px-text-color-action-disabled-default)}a ::slotted([slot="after"]),.link ::slotted([slot="after"]){margin-left:var(--px-spacing-after-element-2xs-mobile)}a ::slotted(span[slot="after"]),a ::slotted(span[slot="before"]),.link ::slotted(span[slot="after"]),.link ::slotted(span[slot="before"]){display:inline-block}::slotted(a:hover){color:var(--px-text-color-action-hover-default)}a.no-style{color:inherit;text-decoration:none}a.no-style:hover,a.no-style:focus{color:inherit}a.skip-link{position:absolute;left:-10000px;top:auto;overflow:hidden;background-color:var(--px-background-color-container-weak);padding:var(--px-padding-xs-mobile)}a.skip-link:focus{left:auto;z-index:999}:host([inverted]) a,:host([inverted]) .link,:host([inverted]) ::slotted(a){color:var(--px-text-color-heading-neutral-inverted)}:host([inverted]) a:hover,:host([inverted]) .link:hover{color:var(--px-text-color-action-hover-inverted)}:host([inverted]) a:focus,:host([inverted]) .link:focus{outline-color:var(--px-border-color-focus-outline-inverted)}:host([inverted]) a[aria-disabled=true],:host([inverted]) .link[aria-disabled=true]{color:var(--px-text-color-action-disabled-inverted)}:host([inverted]) ::slotted(a:hover){color:var(--px-text-color-action-hover-inverted)}:host([inverted]) a.skip-link{background-color:var(--px-background-color-container-weak-inverted)}@media only screen and (min-width: 768px){a,.link,::slotted(a){font-size:var(--px-text-size-link-m-tablet)}a:focus,.link:focus{outline-offset:var(--px-focus-offset-tablet);outline-width:var(--px-focus-outline-tablet)}a ::slotted([slot="after"]),.link ::slotted([slot="after"]){margin-left:var(--px-spacing-after-element-2xs-tablet)}a.skip-link{padding:var(--px-padding-xs-tablet)}}@media only screen and (min-width: 1025px){a,.link,::slotted(a){font-size:var(--px-text-size-link-m-desktop)}a:focus,.link:focus{outline-offset:var(--px-focus-offset-desktop);outline-width:var(--px-focus-outline-desktop)}a ::slotted([slot="after"]),.link ::slotted([slot="after"]){margin-left:var(--px-spacing-after-element-2xs-desktop)}a.skip-link{padding:var(--px-padding-xs-desktop)}}', W = ".patch{display:inline-flex;align-items:center;padding:0 var(--px-padding-s-mobile);height:1.625rem;border:var(--px-border-size-m) solid transparent;border-radius:var(--px-radius-patch-big) var(--px-radius-patch-big) var(--px-radius-patch-big) var(--px-radius-patch-small);font-family:var(--px-font-family);font-weight:700;font-size:var(--px-text-size-label-m-mobile);line-height:var(--px-line-height-m);text-align:center;background-color:var(--px-background-color-purpose-promo-default);color:var(--px-text-color-action-neutral-inverted)}.patch,.patch *{box-sizing:border-box}.bottom-right{border-radius:var(--px-radius-patch-big) var(--px-radius-patch-big) var(--px-radius-patch-small) var(--px-radius-patch-big)}.bottom-left{border-radius:var(--px-radius-patch-big) var(--px-radius-patch-big) var(--px-radius-patch-big) var(--px-radius-patch-small)}.info{background-color:var(--px-background-color-purpose-info-default);color:var(--px-text-color-action-neutral-default)}.black-friday{background-color:var(--px-background-color-container-neutral-rich-default);color:var(--px-text-color-action-neutral-inverted)}.eco{background-color:var(--px-background-color-purpose-success-default);color:var(--px-text-color-action-neutral-inverted)}.greyed{background-color:var(--px-background-color-action-disabled-default);color:var(--px-text-color-action-disabled-default)}:host([inverted]) .patch{background-color:var(--px-background-color-purpose-promo-inverted);color:var(--px-text-color-action-neutral-inverted)}:host([inverted]) .info{background-color:var(--px-background-color-purpose-info-inverted);color:var(--px-text-color-action-neutral-default)}:host([inverted]) .black-friday{background-color:var(--px-background-color-container-neutral-bare-default);color:var(--px-text-color-action-neutral-default)}:host([inverted]) .eco{background-color:var(--px-background-color-purpose-success-inverted);color:var(--px-text-color-action-neutral-default)}:host([inverted]) .greyed{background-color:var(--px-background-color-action-disabled-inverted);color:var(--px-text-color-action-disabled-inverted)}@media only screen and (min-width: 768px){.patch{padding:0 var(--px-padding-s-tablet);font-size:var(--px-text-size-label-m-tablet)}}@media only screen and (min-width: 1025px){.patch{padding:0 var(--px-padding-s-desktop);font-size:var(--px-text-size-label-m-desktop)}}@media only screen and (min-width: 1441px){.patch{padding:0 var(--px-padding-s-desktop);font-size:var(--px-text-size-label-m-desktop)}}", y = new CSSStyleSheet(), A = new CSSStyleSheet(), $ = new CSSStyleSheet();
650
+ y.replaceSync(G);
651
+ A.replaceSync(O);
652
+ $.replaceSync(W);
653
+ const Y = [
549
654
  "",
550
655
  "default",
551
656
  "secondary",
@@ -555,9 +660,9 @@ const M = [
555
660
  "patch-info",
556
661
  "patch-black-friday",
557
662
  "patch-eco"
558
- ], l = class l extends g {
663
+ ], g = class g extends m {
559
664
  constructor() {
560
- super(x, h, v), this.template = () => '<slot name="before"></slot><slot></slot><slot name="after"></slot>';
665
+ super(y, A, $), this.template = () => '<slot name="before"></slot><slot></slot><slot name="after"></slot>';
561
666
  const t = document.createElement(this.nativeName);
562
667
  t.classList.add("btn"), t.innerHTML = this.template(), this.shadowRoot.appendChild(t);
563
668
  }
@@ -575,21 +680,21 @@ const M = [
575
680
  connectedCallback() {
576
681
  super.connectedCallback();
577
682
  const t = this.querySelectorAll("px-icon");
578
- t && t.forEach((a) => {
579
- const e = a.getAttribute("size"), d = a.getAttribute("color");
580
- a && (a.addEventListener("click", () => {
683
+ t && t.forEach((r) => {
684
+ const e = r.getAttribute("size"), o = r.getAttribute("color");
685
+ r && (r.addEventListener("click", () => {
581
686
  this.$el.focus();
582
- }), e || a.setAttribute("size", "xs"), d || a.setAttribute("color", "inherit"));
687
+ }), e || r.setAttribute("size", "xs"), o || r.setAttribute("color", "inherit"));
583
688
  });
584
689
  }
585
- attributeChangedCallback(t, a, e) {
586
- if (a !== e)
690
+ attributeChangedCallback(t, r, e) {
691
+ if (r !== e)
587
692
  switch (t) {
588
693
  case "variant":
589
- this.updateVariant(a, e, M);
694
+ this.updateVariant(r, e, Y);
590
695
  break;
591
696
  case "state":
592
- this.updateState(a, e);
697
+ this.updateState(r, e);
593
698
  break;
594
699
  case "extended":
595
700
  this.updateExtended();
@@ -598,33 +703,33 @@ const M = [
598
703
  this.updateLoading();
599
704
  break;
600
705
  case "shape":
601
- this.updateShape(a, e);
706
+ this.updateShape(r, e);
602
707
  break;
603
708
  default:
604
- super.attributeChangedCallback(t, a, e);
709
+ super.attributeChangedCallback(t, r, e);
605
710
  break;
606
711
  }
607
712
  }
608
- checkName(t, a) {
609
- return !!t.includes(a);
713
+ checkName(t, r) {
714
+ return !!t.includes(r);
610
715
  }
611
716
  checkClass(t) {
612
717
  if (t.startsWith("patch-")) {
613
- const a = t.split(/-(.*)/s);
614
- for (const e of a)
718
+ const r = t.split(/-(.*)/s);
719
+ for (const e of r)
615
720
  e != "" && this.$el.classList.toggle(e);
616
721
  } else
617
722
  this.$el.classList.toggle(t);
618
723
  }
619
- _toggleClass(t, a) {
620
- t !== null && t !== "" && t !== "default" && this.checkClass(t), a !== null && a !== "" && a !== "default" && this.checkClass(a);
724
+ _toggleClass(t, r) {
725
+ t !== null && t !== "" && t !== "default" && this.checkClass(t), r !== null && r !== "" && r !== "default" && this.checkClass(r);
621
726
  }
622
- updateVariant(t, a, e) {
623
- a === "link" ? this.$el.classList.remove("btn") : this.$el.classList.add("btn"), this._toggleClass(t, a), this.checkName(e, a) || console.error(`Bad "variant" value for ${this.$el}`);
727
+ updateVariant(t, r, e) {
728
+ r === "link" ? this.$el.classList.remove("btn") : this.$el.classList.add("btn"), this._toggleClass(t, r), this.checkName(e, r) || console.error(`Bad "variant" value for ${this.$el}`);
624
729
  }
625
- updateState(t, a) {
730
+ updateState(t, r) {
626
731
  const e = ["", "default", "success", "error"];
627
- this._toggleClass(t, a), this.checkName(e, a) || console.error(`Bad "sate" value for ${this.$el}`);
732
+ this._toggleClass(t, r), this.checkName(e, r) || console.error(`Bad "sate" value for ${this.$el}`);
628
733
  }
629
734
  updateExtended() {
630
735
  this.$el.classList.toggle("extended");
@@ -633,7 +738,7 @@ const M = [
633
738
  const t = this.querySelector("px-spinner");
634
739
  t && (t.getAttribute("size") || t.setAttribute("size", "xs")), this.$el.classList.toggle("loading");
635
740
  }
636
- updateShape(t, a) {
741
+ updateShape(t, r) {
637
742
  const e = [
638
743
  "",
639
744
  "default",
@@ -641,7 +746,7 @@ const M = [
641
746
  "bottom-left",
642
747
  "alternative"
643
748
  ];
644
- this._toggleClass(t, a), this.checkName(e, a) || console.error(`Bad "shape" value for ${this.$el}`);
749
+ this._toggleClass(t, r), this.checkName(e, r) || console.error(`Bad "shape" value for ${this.$el}`);
645
750
  }
646
751
  get variant() {
647
752
  return this.getAttribute("variant");
@@ -680,28 +785,29 @@ const M = [
680
785
  this.setAttribute("inverted", t);
681
786
  }
682
787
  };
683
- l.nativeName = "button";
684
- let n = l;
685
- customElements.get("px-button") || customElements.define("px-button", n);
686
- const I = ":host,:host *{box-sizing:border-box}:host .content-wrapper{margin-inline:1rem;max-width:1200px}@media only screen and (min-width: 1232px){:host .content-wrapper{margin-inline:auto}}", m = new CSSStyleSheet();
687
- m.replaceSync(I);
688
- class P extends HTMLElement {
788
+ g.nativeName = "button";
789
+ let p = g;
790
+ customElements.get("px-button") || customElements.define("px-button", p);
791
+ const N = ":host,:host *{box-sizing:border-box}:host .content-wrapper{margin-inline:var(--px-padding-s-mobile);max-width:1200px}@media only screen and (min-width: 1232px){:host .content-wrapper{margin-inline:auto}}", S = new CSSStyleSheet();
792
+ S.replaceSync(N);
793
+ class J extends HTMLElement {
689
794
  constructor() {
690
795
  super(), this.template = () => `
691
- <px-container border-radius="none" padding="none" background-color="${this.backgroundColor}">
796
+ <px-container border-radius="none" padding-inline="none" background-color="${this.backgroundColor}">
692
797
  <div class="content-wrapper">
693
- <px-vstack gap="under-display-vertical">
798
+ <px-vstack gap="heading-to-content">
694
799
  <slot name="heading"></slot>
695
- <px-vstack gap="none">
800
+ <px-vstack gap="after-element-none">
696
801
  <slot></slot>
697
802
  </px-vstack>
698
803
  </px-vstack>
699
804
  </div>
700
805
  </px-container>
701
- `, this.attachShadow({ mode: "open" }), this.shadowRoot.innerHTML = this.template(), this.shadowRoot.adoptedStyleSheets = [m];
806
+ `, this.attachShadow({ mode: "open" }), this.shadowRoot.innerHTML = this.template(), this.shadowRoot.adoptedStyleSheets = [S];
702
807
  }
703
808
  connectedCallback() {
704
- this.querySelector('[slot="heading"]') || this.shadowRoot.querySelector("px-vstack").setAttribute("gap", "none");
809
+ const t = this.querySelector('[slot="heading"]');
810
+ !this.paddingBlock && !this.paddingTop && !this.paddingBottom && !this.paddingBlockMobile && !this.paddingTopMobile && !this.paddingBottomMobile && !this.paddingBlockTablet && !this.paddingTopTablet && !this.paddingBottomTablet && !this.paddingBlockLaptop && !this.paddingTopLaptop && !this.paddingBottomLaptop && (this.$container.paddingBlock = "none"), t || this.shadowRoot.querySelector("px-vstack").setAttribute("gap", "after-element-none");
705
811
  }
706
812
  static get observedAttributes() {
707
813
  return [
@@ -715,17 +821,31 @@ class P extends HTMLElement {
715
821
  "background-position",
716
822
  "padding-block",
717
823
  "padding-top",
718
- "padding-bottom"
824
+ "padding-bottom",
825
+ "padding-block--mobile",
826
+ "padding-top--mobile",
827
+ "padding-bottom--mobile",
828
+ "padding-block--tablet",
829
+ "padding-top--tablet",
830
+ "padding-bottom--tablet",
831
+ "padding-block--laptop",
832
+ "padding-top--laptop",
833
+ "padding-bottom--laptop",
834
+ "border",
835
+ "border-side",
836
+ "border-side--mobile",
837
+ "border-side--tablet",
838
+ "border-side--laptop"
719
839
  ];
720
840
  }
721
841
  get $container() {
722
842
  return this.shadowRoot.querySelector("px-container");
723
843
  }
724
- attributeChangedCallback(t, a, e) {
725
- if (a !== e)
844
+ attributeChangedCallback(t, r, e) {
845
+ if (r !== e)
726
846
  switch (t) {
727
847
  case "background-color":
728
- this.$container.backgroundColor = b.indexOf(e) > 0 ? e : "container-none";
848
+ this.$container.backgroundColor = x.indexOf(e) > 0 ? e : "none";
729
849
  break;
730
850
  case "background-gradient":
731
851
  this.$container.gradient = this.gradient;
@@ -757,10 +877,52 @@ class P extends HTMLElement {
757
877
  case "padding-bottom":
758
878
  this.$container.paddingBottom = e;
759
879
  break;
880
+ case "padding-block--mobile":
881
+ this.$container.paddingBlockMobile = e;
882
+ break;
883
+ case "padding-top--mobile":
884
+ this.$container.paddingTopMobile = e;
885
+ break;
886
+ case "padding-bottom--mobile":
887
+ this.$container.paddingBottomMobile = e;
888
+ break;
889
+ case "padding-block--tablet":
890
+ this.$container.paddingBlockTablet = e;
891
+ break;
892
+ case "padding-top--tablet":
893
+ this.$container.paddingTopTablet = e;
894
+ break;
895
+ case "padding-bottom--tablet":
896
+ this.$container.paddingBottomTablet = e;
897
+ break;
898
+ case "padding-block--laptop":
899
+ this.$container.paddingBlockLaptop = e;
900
+ break;
901
+ case "padding-top--laptop":
902
+ this.$container.paddingTopLaptop = e;
903
+ break;
904
+ case "padding-bottom--laptop":
905
+ this.$container.paddingBottomLaptop = e;
906
+ break;
907
+ case "border":
908
+ this.$container.border = e;
909
+ break;
910
+ case "border-side":
911
+ this.$container.borderSide = e;
912
+ break;
913
+ case "border-side--mobile":
914
+ this.$container.borderSideMobile = e;
915
+ break;
916
+ case "border-side--tablet":
917
+ this.$container.borderSideTablet = e;
918
+ break;
919
+ case "border-side--laptop":
920
+ this.$container.borderSideLaptop = e;
921
+ break;
760
922
  }
761
923
  }
762
924
  get backgroundColor() {
763
- return this.getAttribute("background-color") || "container-none";
925
+ return this.getAttribute("background-color") || "none";
764
926
  }
765
927
  set backgroundColor(t) {
766
928
  this.setAttribute("background-color", t);
@@ -825,15 +987,99 @@ class P extends HTMLElement {
825
987
  set paddingBottom(t) {
826
988
  this.setAttribute("padding-bottom", t);
827
989
  }
990
+ get paddingBlockMobile() {
991
+ return this.getAttribute("padding-block--mobile");
992
+ }
993
+ set paddingBlockMobile(t) {
994
+ this.setAttribute("padding-block--mobile", t);
995
+ }
996
+ get paddingTopMobile() {
997
+ return this.getAttribute("padding-top--mobile");
998
+ }
999
+ set paddingTopMobile(t) {
1000
+ this.setAttribute("padding-top--mobile", t);
1001
+ }
1002
+ get paddingBottomMobile() {
1003
+ return this.getAttribute("padding-bottom--mobile");
1004
+ }
1005
+ set paddingBottomMobile(t) {
1006
+ this.setAttribute("padding-bottom--mobile", t);
1007
+ }
1008
+ get paddingBlockTablet() {
1009
+ return this.getAttribute("padding-block--tablet");
1010
+ }
1011
+ set paddingBlockTablet(t) {
1012
+ this.setAttribute("padding-block--tablet", t);
1013
+ }
1014
+ get paddingTopTablet() {
1015
+ return this.getAttribute("padding-top--tablet");
1016
+ }
1017
+ set paddingTopTablet(t) {
1018
+ this.setAttribute("padding-top--tablet", t);
1019
+ }
1020
+ get paddingBottomTablet() {
1021
+ return this.getAttribute("padding-bottom--tablet");
1022
+ }
1023
+ set paddingBottomTablet(t) {
1024
+ this.setAttribute("padding-bottom--tablet", t);
1025
+ }
1026
+ get paddingBlockLaptop() {
1027
+ return this.getAttribute("padding-block--laptop");
1028
+ }
1029
+ set paddingBlockLaptop(t) {
1030
+ this.setAttribute("padding-block--laptop", t);
1031
+ }
1032
+ get paddingTopLaptop() {
1033
+ return this.getAttribute("padding-top--laptop");
1034
+ }
1035
+ set paddingTopLaptop(t) {
1036
+ this.setAttribute("padding-top--laptop", t);
1037
+ }
1038
+ get paddingBottomLaptop() {
1039
+ return this.getAttribute("padding-bottom--laptop");
1040
+ }
1041
+ set paddingBottomLaptop(t) {
1042
+ this.setAttribute("padding-bottom--laptop", t);
1043
+ }
1044
+ get border() {
1045
+ return this.getAttribute("border");
1046
+ }
1047
+ set border(t) {
1048
+ this.setAttribute("border", t);
1049
+ }
1050
+ get borderSide() {
1051
+ return this.getAttribute("border-side");
1052
+ }
1053
+ set borderSide(t) {
1054
+ this.setAttribute("border-side", t);
1055
+ }
1056
+ get borderSideMobile() {
1057
+ return this.getAttribute("border-side--mobile");
1058
+ }
1059
+ set borderSideMobile(t) {
1060
+ this.setAttribute("border-side--mobile", t);
1061
+ }
1062
+ get borderSideTablet() {
1063
+ return this.getAttribute("border-side--tablet");
1064
+ }
1065
+ set borderSideTablet(t) {
1066
+ this.setAttribute("border-side--tablet", t);
1067
+ }
1068
+ get borderSideLaptop() {
1069
+ return this.getAttribute("border-side--laptop");
1070
+ }
1071
+ set borderSideLaptop(t) {
1072
+ this.setAttribute("border-side--laptop", t);
1073
+ }
828
1074
  }
829
- customElements.define("px-section", P);
830
- const _ = ":host>*{padding:2rem 0;cursor:pointer}button{margin:0;padding:0;border:0;border-bottom:2px solid rgba(0,0,0,0);outline:0;background:inherit;font-family:var(--px-font-family);font-size:1rem}button[aria-expanded=true],button:focus{outline:0;font-weight:700;border-bottom:2px solid var(--px-color-bg-action-primary-default);color:var(--px-color-bg-action-primary-default)}button:hover{font-weight:700;color:var(--px-color-bg-action-primary-default)}px-a{height:100%;display:block}px-a:hover{font-weight:700;color:var(--px-color-bg-action-primary-default)}", k = new CSSStyleSheet();
831
- k.replaceSync(_);
832
- class q extends c {
1075
+ customElements.define("px-section", J);
1076
+ const K = ":host>*{padding:2rem 0;cursor:pointer}button{margin:0;padding:0;border:0;border-bottom:2px solid rgba(0,0,0,0);outline:0;background:inherit;font-family:var(--px-font-family);font-size:1rem}button[aria-expanded=true],button:focus{outline:0;font-weight:700;border-bottom:2px solid var(--px-background-color-action-primary-default);color:var(--px-background-color-action-primary-default)}button:hover{font-weight:700;color:var(--px-background-color-action-primary-default)}px-a{height:100%;display:block}px-a:hover{font-weight:700;color:var(--px-background-color-action-primary-default)}", L = new CSSStyleSheet();
1077
+ L.replaceSync(K);
1078
+ class Q extends v {
833
1079
  constructor() {
834
1080
  super(), this.template = () => `${this.getAttribute("href") ? `<px-a variant="no-style" href="${this.getAttribute("href")}">
835
1081
  <slot></slot>
836
- </px-a>` : "<button><slot></slot></button>"}`, this.shadowRoot.innerHTML = this.template(), this.shadowRoot.adoptedStyleSheets = [k];
1082
+ </px-a>` : "<button><slot></slot></button>"}`, this.shadowRoot.innerHTML = this.template(), this.shadowRoot.adoptedStyleSheets = [L];
837
1083
  }
838
1084
  static get observedAttributes() {
839
1085
  return ["for", "href"];
@@ -841,8 +1087,8 @@ class q extends c {
841
1087
  connectedCallback() {
842
1088
  this.setAttribute("slot", "header-entries"), this.$button && this.setupButtonA11y();
843
1089
  }
844
- attributeChangedCallback(t, a, e) {
845
- super.attributeChangedCallback(t, a, e), t === "href" && this.$button && e ? this.shadowRoot.innerHTML = this.template() : t === "for" && this.$a && e && (this.shadowRoot.innerHTML = this.template(), this.setupButtonA11y());
1090
+ attributeChangedCallback(t, r, e) {
1091
+ super.attributeChangedCallback(t, r, e), t === "href" && this.$button && e ? this.shadowRoot.innerHTML = this.template() : t === "for" && this.$a && e && (this.shadowRoot.innerHTML = this.template(), this.setupButtonA11y());
846
1092
  }
847
1093
  setupButtonA11y() {
848
1094
  this.$button.setAttribute("tabindex", "0"), this.$button.role = "menuitem", this.$button.ariaExpanded = "false", this.$button.ariaHasPopup = "menu";
@@ -868,15 +1114,15 @@ class q extends c {
868
1114
  return this.shadowRoot.querySelector("px-a");
869
1115
  }
870
1116
  }
871
- customElements.get("px-header-item") || customElements.define("px-header-item", q);
872
- const F = "#panel-container{position:absolute;left:0;right:0;z-index:2}@media screen and (max-width: 767px){#panel-container{top:0;border-top:none}}#backdrop-filter{position:absolute;display:none;z-index:1;left:0;width:100vw;height:100%;background:#0000004d;-webkit-backdrop-filter:saturate(180%) blur(15px);backdrop-filter:saturate(180%) blur(15px)}@media screen and (max-width: 767px){slot[name=header-entries]{display:none}}@media screen and (min-width: 768px){px-button-icon{display:none}}", f = new CSSStyleSheet();
873
- f.replaceSync(F);
874
- class H extends c {
1117
+ customElements.get("px-header-item") || customElements.define("px-header-item", Q);
1118
+ const U = "#panel-container{position:absolute;left:0;right:0;z-index:2}@media screen and (max-width: 767px){#panel-container{top:0;border-top:none}}#backdrop-filter{position:absolute;display:none;z-index:1;left:0;width:100vw;height:100%;background:#0000004d;-webkit-backdrop-filter:saturate(180%) blur(15px);backdrop-filter:saturate(180%) blur(15px)}@media screen and (max-width: 767px){slot[name=header-entries]{display:none}}@media screen and (min-width: 768px){px-button-icon{display:none}}", T = new CSSStyleSheet();
1119
+ T.replaceSync(U);
1120
+ class X extends v {
875
1121
  constructor() {
876
1122
  var t;
877
- super(f), this.template = `
1123
+ super(T), this.template = `
878
1124
  <div id="navigation-items-container">
879
- <px-section padding-block--mobile="s" padding-block="none" background-color="container-none">
1125
+ <px-section padding-block--mobile="s" padding-block="none" background-color="none">
880
1126
  <px-hstack gap--tablet="2rem" gap="3rem" wrap="wrap" align-items="center">
881
1127
  <slot name="header-logo"></slot>
882
1128
  <slot name="header-entries"></slot>
@@ -889,7 +1135,7 @@ class H extends c {
889
1135
  </px-hstack>
890
1136
  </px-hstack>
891
1137
  </px-section>
892
- <px-section id="panel-container" background-color="container-weak" padding="none" background-color="container-none">
1138
+ <px-section id="panel-container" background-color="container-weak" padding="none" background-color="none">
893
1139
  <slot name="header-panels">
894
1140
  </px-section>
895
1141
  <div id="backdrop-filter"></div>
@@ -899,10 +1145,10 @@ class H extends c {
899
1145
  }
900
1146
  connectedCallback() {
901
1147
  this.addEventListener("click", (t) => {
902
- const a = t.target.closest(
1148
+ const r = t.target.closest(
903
1149
  "px-header-item"
904
1150
  );
905
- a && a.for && (this.$backdropFilter.style.display = "block", this.$navigationItems.forEach((e) => {
1151
+ r && r.for && (this.$backdropFilter.style.display = "block", this.$navigationItems.forEach((e) => {
906
1152
  e.checked = !1;
907
1153
  }), t.target.checked = !0, this.i11yEnableActions(!1), this.togglePanel(t.target.for));
908
1154
  }), this.shadowRoot.addEventListener("click", (t) => {
@@ -920,7 +1166,7 @@ class H extends c {
920
1166
  }), this.createMobileMenuPanel();
921
1167
  }
922
1168
  createMobileMenuPanel() {
923
- var a;
1169
+ var r;
924
1170
  const t = `
925
1171
  <px-mdd name="__lavender_mobile_menu">
926
1172
  <span slot="title">Menu</span>
@@ -933,22 +1179,22 @@ class H extends c {
933
1179
  ).join("")}
934
1180
  </px-mdd>
935
1181
  `;
936
- (a = this.$megaDropdowns.item(0)) == null || a.insertAdjacentHTML("beforebegin", t);
1182
+ (r = this.$megaDropdowns.item(0)) == null || r.insertAdjacentHTML("beforebegin", t);
937
1183
  }
938
1184
  i11yEnableActions(t = !0) {
939
1185
  this.querySelectorAll('[slot="header-actions"]').forEach(
940
- (a) => {
1186
+ (r) => {
941
1187
  if (t) {
942
- a.removeAttribute("tabindex");
1188
+ r.removeAttribute("tabindex");
943
1189
  return;
944
1190
  }
945
- a.setAttribute("tabindex", "-1");
1191
+ r.setAttribute("tabindex", "-1");
946
1192
  }
947
1193
  );
948
1194
  }
949
1195
  togglePanel(t) {
950
- this.$megaDropdowns.forEach((a) => {
951
- a.name === t && a.hidden && (a.hidden = !a.hidden, t !== "__lavender_mobile_menu" && (this.querySelector(`px-header-item[for="${t}"]`).checked = !a.hidden), document.body.style.overflow = a.hidden ? "auto" : "hidden"), a.name !== t && !a.hidden && (a.hidden = !0);
1196
+ this.$megaDropdowns.forEach((r) => {
1197
+ r.name === t && r.hidden && (r.hidden = !r.hidden, t !== "__lavender_mobile_menu" && (this.querySelector(`px-header-item[for="${t}"]`).checked = !r.hidden), document.body.style.overflow = r.hidden ? "auto" : "hidden"), r.name !== t && !r.hidden && (r.hidden = !0);
952
1198
  });
953
1199
  }
954
1200
  hidePanel() {
@@ -974,8 +1220,8 @@ class H extends c {
974
1220
  return this.shadowRoot.querySelector("px-button-icon");
975
1221
  }
976
1222
  }
977
- customElements.get("px-header") || customElements.define("px-header", H);
1223
+ customElements.get("px-header") || customElements.define("px-header", X);
978
1224
  export {
979
- H as Header,
980
- q as HeaderItem
1225
+ X as Header,
1226
+ Q as HeaderItem
981
1227
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@proximus/lavender-header",
3
- "version": "1.0.0-alpha.3",
3
+ "version": "1.0.0-alpha.5",
4
4
  "description": "",
5
5
  "main": "dist/index.js",
6
6
  "exports": {
@@ -36,5 +36,5 @@
36
36
  }
37
37
  }
38
38
  },
39
- "gitHead": "15a3f7932429caa1756aee628a5d57f95a9e4282"
39
+ "gitHead": "671fab7ee21d1c0ec6498b45b0bb2fd47e6e6c84"
40
40
  }