@proximus/lavender-header 1.0.0-alpha.4 → 1.0.0-alpha.6

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 +425 -152
  2. package/package.json +5 -3
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 v, boxShadowValues as I, noBorderRadiusValues as E, borderRadiusValues as P, borderSideValues as w, borderValues as _, paddingValues as d, gradientValues as q, backgroundColorValues as k, borderColorValues as H, WithExtraAttributes as m } 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 = ':host{display:block}.container{font-family:var(--px-font-family);background-color:var(--background-color);background-image:var(--background-image);background:var(--background-gradient);border-radius:var(--px-radius-main);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 j = ["anchor-right", "anchor-left", "anchor-full"], G = ["", "cover", "contain", "default"], c = class c extends v {
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,92 @@ 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
+ 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
76
  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%");
77
+ t && j.includes(t.getAttribute("slot")) && this.shadowRoot.querySelector(".container").classList.toggle("anchored");
74
78
  }
75
- attributeChangedCallback(t, a, e) {
76
- if (a !== e)
79
+ attributeChangedCallback(t, r, e) {
80
+ if (r !== e)
77
81
  switch (t) {
78
82
  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
83
  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
84
  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
85
  case "padding--laptop":
100
- case "padding-block--laptop":
86
+ this.updatePadding(t, r, e, d, [
87
+ "top",
88
+ "right",
89
+ "bottom",
90
+ "left"
91
+ ]);
92
+ break;
93
+ case "padding-inline":
94
+ case "padding-inline--mobile":
95
+ case "padding-inline--tablet":
101
96
  case "padding-inline--laptop":
97
+ this.updatePadding(t, r, e, d, [
98
+ "left",
99
+ "right"
100
+ ]);
101
+ break;
102
+ case "padding-block":
103
+ case "padding-block--mobile":
104
+ case "padding-block--tablet":
105
+ case "padding-block--laptop":
106
+ this.updatePadding(t, r, e, d, [
107
+ "top",
108
+ "bottom"
109
+ ]);
110
+ break;
111
+ case "padding-top":
112
+ case "padding-top--mobile":
113
+ case "padding-top--tablet":
102
114
  case "padding-top--laptop":
115
+ this.updatePadding(t, r, e, d, [
116
+ "top"
117
+ ]);
118
+ break;
119
+ case "padding-right":
120
+ case "padding-right--mobile":
121
+ case "padding-right--tablet":
103
122
  case "padding-right--laptop":
123
+ this.updatePadding(t, r, e, d, [
124
+ "right"
125
+ ]);
126
+ break;
127
+ case "padding-bottom":
128
+ case "padding-bottom--mobile":
129
+ case "padding-bottom--tablet":
104
130
  case "padding-bottom--laptop":
131
+ this.updatePadding(t, r, e, d, [
132
+ "bottom"
133
+ ]);
134
+ break;
135
+ case "padding-left":
136
+ case "padding-left--mobile":
137
+ case "padding-left--tablet":
105
138
  case "padding-left--laptop":
106
- this.updateAttribute(t, a, e, z);
139
+ this.updatePadding(t, r, e, d, [
140
+ "left"
141
+ ]);
107
142
  break;
108
143
  case "border":
109
- this.updateAttribute(t, a, e, S);
144
+ this.updateAttribute(t, r, e, _);
145
+ break;
146
+ case "border-color":
147
+ this.updateBorderColor(t, e);
148
+ break;
149
+ case "border-side":
150
+ case "border-side--mobile":
151
+ case "border-side--tablet":
152
+ case "border-side--laptop":
153
+ this.updateAttribute(t, r, e, w);
110
154
  break;
111
155
  case "border-radius":
112
156
  this.updateAttribute(
113
157
  t,
114
- a,
158
+ r,
115
159
  e,
116
- $
160
+ P
117
161
  );
118
162
  break;
119
163
  case "no-border-radius":
@@ -122,9 +166,9 @@ const w = ["anchor-right", "anchor-left", "anchor-full"], T = ["", "cover", "con
122
166
  case "no-border-radius--laptop":
123
167
  this.updateNoBorderRadius(
124
168
  t,
125
- a,
169
+ r,
126
170
  e,
127
- A
171
+ E
128
172
  );
129
173
  break;
130
174
  case "background-color":
@@ -142,9 +186,9 @@ const w = ["anchor-right", "anchor-left", "anchor-full"], T = ["", "cover", "con
142
186
  case "background-size":
143
187
  this.updateAttribute(
144
188
  t,
145
- a,
189
+ r,
146
190
  e,
147
- T
191
+ G
148
192
  );
149
193
  break;
150
194
  case "background-image":
@@ -157,85 +201,115 @@ const w = ["anchor-right", "anchor-left", "anchor-full"], T = ["", "cover", "con
157
201
  e !== null && e !== "" && (this.$el.style.backgroundPosition = e);
158
202
  break;
159
203
  case "box-shadow":
160
- this.updateAttribute(t, a, e, y);
204
+ this.updateAttribute(t, r, e, I);
161
205
  break;
162
206
  default:
163
- super.attributeChangedCallback(t, a, e);
207
+ super.attributeChangedCallback(t, r, e);
164
208
  break;
165
209
  }
166
210
  }
167
- updateBackgroundImg(t, a) {
168
- this.$el.style.setProperty(`--${t}`, `url("${a}")`);
211
+ updatePadding(t, r, e, o, a) {
212
+ if (!this.checkName(o, e)) {
213
+ console.error(`Bad ${t} value for`, this.$el);
214
+ return;
215
+ }
216
+ const i = t.includes("--"), h = i ? t.split("--")[1] : "", s = (n, l, B, M) => {
217
+ const C = n === "laptop" ? "desktop" : n;
218
+ l !== null && l !== "" && l !== "default" && B.forEach((R) => {
219
+ const x = `--container-padding-${R}--${n}`;
220
+ (M || !this.$el.style.getPropertyValue(x)) && this.$el.style.setProperty(
221
+ x,
222
+ `var(--px-padding-${l}-${C})`
223
+ );
224
+ });
225
+ };
226
+ i ? (s(h, r, a, !0), s(h, e, a, !0)) : ["mobile", "tablet", "laptop"].forEach((n) => {
227
+ s(n, r, a, !1), s(n, e, a, !1);
228
+ });
229
+ }
230
+ updateBackgroundImg(t, r) {
231
+ this.$el.style.setProperty(`--${t}`, `url("${r}")`);
169
232
  }
170
- updateGradient(t, a) {
171
- if (this.checkName(L, a)) {
233
+ updateGradient(t, r) {
234
+ if (this.checkName(q, r)) {
172
235
  const e = this.splitAttrNameFromBreakpoint(t);
173
236
  t = e.attrName;
174
- const d = e.breakpoint;
237
+ const o = e.breakpoint;
175
238
  this.$el.style.setProperty(
176
- `--${t}${d}`,
177
- `linear-gradient(var(--px-color-bg-gradient-${a}))`
239
+ `--${t}${o}`,
240
+ `linear-gradient(var(--px-background-color-container-gradient-${r}))`
178
241
  );
179
242
  } else
180
243
  console.error(
181
- `${a} is not an allowed background-gradient value for ${this.$el}`
244
+ `${r} is not an allowed background-gradient value for ${this.$el}`
182
245
  );
183
246
  }
184
- updateBackgroundColor(t, a) {
185
- if (this.checkName(b, a)) {
186
- const e = this.splitAttrNameFromBreakpoint(t), d = e.breakpoint;
247
+ updateBackgroundColor(t, r) {
248
+ if (this.checkName(k, r)) {
249
+ const e = this.splitAttrNameFromBreakpoint(t), o = e.breakpoint;
187
250
  this.$el.style.setProperty(
188
- `--${e.attrName}${d}`,
189
- `var(--px-color-bg-${a}-default)`
251
+ `--${e.attrName}${o}`,
252
+ `var(--px-background-color-${r}-default)`
190
253
  ), this.$el.style.setProperty(
191
- `--${e.attrName}-inverted${d}`,
192
- `var(--px-color-bg-${a}-inverted)`
254
+ `--${e.attrName}-inverted${o}`,
255
+ `var(--px-background-color-${r}-inverted)`
193
256
  );
194
257
  } else
195
258
  console.error(
196
- `${a} is not an allowed ${t} value for ${this.$el}`
259
+ `${r} is not an allowed ${t} value for ${this.$el}`
197
260
  );
198
261
  }
199
- updateNoBorderRadius(t, a, e, d) {
200
- if (!this.checkName(d, e))
262
+ updateBorderColor(t, r) {
263
+ this.checkName(H, r) ? (this.$el.style.setProperty(
264
+ `--${t}`,
265
+ `var(--px-border-color-${r}-default)`
266
+ ), this.$el.style.setProperty(
267
+ `--${t}-inverted`,
268
+ `var(--px-border-color-${r}-inverted)`
269
+ )) : console.error(
270
+ `${r} is not an allowed ${t} value for ${this.$el}`
271
+ );
272
+ }
273
+ updateNoBorderRadius(t, r, e, o) {
274
+ if (!this.checkName(o, e))
201
275
  console.error(
202
276
  `${e} is not an allowed ${t} value for ${this.$el}`
203
277
  );
204
278
  else {
205
- const i = this.splitAttrNameFromBreakpoint(t), r = i.breakpoint;
206
- a !== null && a !== "" && this.$el.classList.toggle(
207
- `${i.attrName}-${a}${r}`
279
+ const a = this.splitAttrNameFromBreakpoint(t), i = a.breakpoint;
280
+ r !== null && r !== "" && this.$el.classList.toggle(
281
+ `${a.attrName}-${r}${i}`
208
282
  ), e !== null && e !== "" && this.$el.classList.toggle(
209
- `${i.attrName}-${e}${r}`
283
+ `${a.attrName}-${e}${i}`
210
284
  );
211
285
  }
212
286
  }
213
- updateAttribute(t, a, e, d) {
214
- if (!this.checkName(d, e))
287
+ updateAttribute(t, r, e, o) {
288
+ if (!this.checkName(o, e))
215
289
  console.error(
216
290
  `${e} is not an allowed ${t} value for ${this.$el}`
217
291
  );
218
292
  else {
219
- const i = this.splitAttrNameFromBreakpoint(t), r = i.breakpoint;
220
- a !== null && a !== "" && this.$el.classList.toggle(
221
- `${i.attrName}-${a}${r}`
293
+ const a = this.splitAttrNameFromBreakpoint(t), i = a.breakpoint;
294
+ r !== null && r !== "" && this.$el.classList.toggle(
295
+ `${a.attrName}-${r}${i}`
222
296
  ), e !== null && e !== "" && this.$el.classList.toggle(
223
- `${i.attrName}-${e}${r}`
297
+ `${a.attrName}-${e}${i}`
224
298
  );
225
299
  }
226
300
  }
227
301
  splitAttrNameFromBreakpoint(t) {
228
- let a = "";
302
+ let r = "";
229
303
  if (["--mobile", "--tablet", "--laptop"].some(
230
304
  (e) => t.includes(e)
231
305
  )) {
232
306
  const e = t.split("--");
233
- t = e[0], a = `--${e[1]}`;
307
+ t = e[0], r = `--${e[1]}`;
234
308
  }
235
- return { attrName: t, breakpoint: a };
309
+ return { attrName: t, breakpoint: r };
236
310
  }
237
- checkName(t, a) {
238
- return t.includes(a);
311
+ checkName(t, r) {
312
+ return t.includes(r);
239
313
  }
240
314
  get padding() {
241
315
  return this.getAttribute("padding");
@@ -411,6 +485,36 @@ const w = ["anchor-right", "anchor-left", "anchor-full"], T = ["", "cover", "con
411
485
  set border(t) {
412
486
  this.setAttribute("border", t);
413
487
  }
488
+ get borderColor() {
489
+ return this.getAttribute("border-color");
490
+ }
491
+ set borderColor(t) {
492
+ this.setAttribute("border-color", t);
493
+ }
494
+ get borderSide() {
495
+ return this.getAttribute("border-side");
496
+ }
497
+ set borderSide(t) {
498
+ this.setAttribute("border-side", t);
499
+ }
500
+ get borderSideMobile() {
501
+ return this.getAttribute("border-side--mobile");
502
+ }
503
+ set borderSideMobile(t) {
504
+ this.setAttribute("border-side--mobile", t);
505
+ }
506
+ get borderSideTablet() {
507
+ return this.getAttribute("border-side--tablet");
508
+ }
509
+ set borderSideTablet(t) {
510
+ this.setAttribute("border-side--tablet", t);
511
+ }
512
+ get borderSideLaptop() {
513
+ return this.getAttribute("border-side--laptop");
514
+ }
515
+ set borderSideLaptop(t) {
516
+ this.setAttribute("border-side--laptop", t);
517
+ }
414
518
  get borderRadius() {
415
519
  return this.getAttribute("border-radius");
416
520
  }
@@ -538,14 +642,15 @@ const w = ["anchor-right", "anchor-left", "anchor-full"], T = ["", "cover", "con
538
642
  this.setAttribute("inverted", t);
539
643
  }
540
644
  };
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 = [
645
+ c.nativeName = "div";
646
+ let b = c;
647
+ customElements.define("px-container", b);
648
+ const O = '.btn{width:var(--button-extended--mobile, var(--button-extended, auto));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,.operational-tag){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,.operational-tag) ::slotted([slot="after"]){margin-right:calc(var(--px-padding-xs-mobile) * -1)}.btn:not(.secondary,.tertiary,.patch,.operational-tag) ::slotted([slot="before"]){margin-left:calc(var(--px-padding-xs-mobile) * -1)}.btn:not(.secondary,.tertiary,.patch,.operational-tag):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,.operational-tag)[disabled],.btn:not(.secondary,.tertiary,.patch,.operational-tag)[aria-disabled=true]{background:var(--px-background-color-action-disabled-default);color:var(--px-text-color-action-disabled-default)}.btn:not(.secondary,.tertiary,.patch,.operational-tag).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,.operational-tag).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.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)}.btn.operational-tag{background:var(--px-background-color-action-neutral-inverted);color:var(--px-text-color-action-neutral-default);padding:var(--px-padding-2xs-mobile) var(--px-padding-xs-mobile);gap:var(--px-spacing-after-element-xs-mobile);border-radius:var(--px-radius-pill);border:var(--px-border-size-m) solid var(--px-border-color-action-neutral-default)}.btn.operational-tag:hover:not([disabled],[aria-disabled=true],.loading){color:var(--px-text-color-action-brand-default);background:var(--px-background-color-action-hover-bordered-default)}.btn.operational-tag:active:not([disabled],[aria-disabled=true],.loading){background:var(--px-background-color-action-active-default);color:var(--px-text-color-action-active-inverted);border-color:var(--px-border-color-none)}.btn.operational-tag[disabled],.btn.operational-tag[aria-disabled=true]{background:var(--px-background-color-action-disabled-default);color:var(--px-text-color-action-disabled-default);border-color:var(--px-border-color-none)}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,.operational-tag){color:var(--px-text-color-heading-brand-default);background:var(--px-background-color-action-primary-inverted)}:host([inverted]) .btn:not(.secondary,.tertiary,.patch,.operational-tag):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,.operational-tag)[disabled],:host([inverted]) .btn:not(.secondary,.tertiary,.patch,.operational-tag)[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,.operational-tag).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]) .btn.operational-tag{background:var(--px-background-color-action-neutral-inverted);color:var(--px-text-color-action-neutral-inverted);border-color:var(--px-border-color-action-neutral-inverted)}:host([inverted]) .btn.operational-tag:hover:not([disabled],[aria-disabled=true],.loading){color:var(--px-text-color-action-brand-inverted);background:var(--px-background-color-action-hover-bordered-inverted);border-color:var(--px-border-color-action-hover-inverted)}:host([inverted]) .btn.operational-tag:active:not([disabled],[aria-disabled=true],.loading){background:var(--px-background-color-action-active-inverted);color:var(--px-text-color-action-active-default);border-color:var(--px-border-color-none)}:host([inverted]) .btn.operational-tag[disabled],:host([inverted]) .btn.operational-tag[aria-disabled=true]{background:var(--px-background-color-action-disabled-inverted);color:var(--px-text-color-action-disabled-inverted);border-color:var(--px-border-color-none)}: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{width:var(--button-extended--tablet, var(--button-extended, auto));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.operational-tag{padding:var(--px-padding-2xs-tablet) var(--px-padding-xs-tablet);gap:var(--px-spacing-after-element-xs-tablet)}.btn:not(.secondary,.tertiary,.patch,.operational-tag){padding:var(--px-padding-xs-tablet) var(--px-padding-m-tablet)}.btn:not(.secondary,.tertiary,.patch,.operational-tag) ::slotted([slot="after"]){margin-right:calc(var(--px-padding-xs-tablet) * -1)}.btn:not(.secondary,.tertiary,.patch,.operational-tag) ::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{width:var(--button-extended--laptop, var(--button-extended, auto));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.operational-tag{padding:var(--px-padding-2xs-desktop) var(--px-padding-xs-desktop);gap:var(--px-spacing-after-element-xs-desktop)}.btn:not(.secondary,.tertiary,.patch,.operational-tag){padding:var(--px-padding-xs-desktop) var(--px-padding-m-desktop)}.btn:not(.secondary,.tertiary,.patch,.operational-tag) ::slotted([slot="after"]){margin-right:calc(var(--px-padding-xs-desktop) * -1)}.btn:not(.secondary,.tertiary,.patch,.operational-tag) ::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)}}', W = '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)}}', Y = ".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)}}", J = ".tag{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:400;gap:var(--px-spacing-after-element-xs-mobile);background-color:var(--px-background-color-action-neutral-default);color:var(--px-text-color-action-neutral-default);padding:var(--px-padding-2xs-mobile) var(--px-padding-xs-mobile);border:var(--px-border-size-s) solid transparent;border-radius:var(--px-radius-main)}.tag,.tag *{box-sizing:border-box}:host([inverted]) .tag{background-color:var(--px-background-color-action-neutral-inverted);color:var(--px-text-color-action-neutral-inverted)}@media only screen and (min-width: 768px){.tag{font-size:var(--px-text-size-label-m-tablet);gap:var(--px-spacing-after-element-xs-tablet);padding:var(--px-padding-2xs-tablet) var(--px-padding-xs-tablet)}}@media only screen and (min-width: 1025px){.tag{font-size:var(--px-text-size-label-m-desktop);gap:var(--px-spacing-after-element-xs-desktop);padding:var(--px-padding-2xs-desktop) var(--px-padding-xs-desktop)}}", y = new CSSStyleSheet(), A = new CSSStyleSheet(), $ = new CSSStyleSheet(), S = new CSSStyleSheet();
649
+ y.replaceSync(O);
650
+ A.replaceSync(W);
651
+ $.replaceSync(Y);
652
+ S.replaceSync(J);
653
+ const K = [
549
654
  "",
550
655
  "default",
551
656
  "secondary",
@@ -554,10 +659,16 @@ const M = [
554
659
  "patch",
555
660
  "patch-info",
556
661
  "patch-black-friday",
557
- "patch-eco"
558
- ], l = class l extends g {
662
+ "patch-eco",
663
+ "operational-tag"
664
+ ], Q = [
665
+ "extended",
666
+ "extended--mobile",
667
+ "extended--tablet",
668
+ "extended--laptop"
669
+ ], g = class g extends v {
559
670
  constructor() {
560
- super(x, h, v), this.template = () => '<slot name="before"></slot><slot></slot><slot name="after"></slot>';
671
+ super(y, A, $, S), this.template = () => '<slot name="before"></slot><slot></slot><slot name="after"></slot>';
561
672
  const t = document.createElement(this.nativeName);
562
673
  t.classList.add("btn"), t.innerHTML = this.template(), this.shadowRoot.appendChild(t);
563
674
  }
@@ -566,74 +677,77 @@ const M = [
566
677
  ...super.observedAttributes,
567
678
  "variant",
568
679
  "state",
569
- "extended",
570
680
  "loading",
571
681
  "shape",
572
- "inverted"
682
+ "inverted",
683
+ ...Q
573
684
  ];
574
685
  }
575
686
  connectedCallback() {
576
687
  super.connectedCallback();
577
688
  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", () => {
689
+ t && t.forEach((r) => {
690
+ const e = r.getAttribute("size"), o = r.getAttribute("color");
691
+ r && (r.addEventListener("click", () => {
581
692
  this.$el.focus();
582
- }), e || a.setAttribute("size", "xs"), d || a.setAttribute("color", "inherit"));
693
+ }), e || r.setAttribute("size", "xs"), o || r.setAttribute("color", "inherit"));
583
694
  });
584
695
  }
585
- attributeChangedCallback(t, a, e) {
586
- if (a !== e)
696
+ attributeChangedCallback(t, r, e) {
697
+ if (r !== e)
587
698
  switch (t) {
588
699
  case "variant":
589
- this.updateVariant(a, e, M);
700
+ this.updateVariant(r, e, K);
590
701
  break;
591
702
  case "state":
592
- this.updateState(a, e);
703
+ this.updateState(r, e);
593
704
  break;
594
705
  case "extended":
595
- this.updateExtended();
706
+ case "extended--mobile":
707
+ case "extended--tablet":
708
+ case "extended--laptop":
709
+ this.updateExtended(t, e);
596
710
  break;
597
711
  case "loading":
598
712
  this.updateLoading();
599
713
  break;
600
714
  case "shape":
601
- this.updateShape(a, e);
715
+ this.updateShape(r, e);
602
716
  break;
603
717
  default:
604
- super.attributeChangedCallback(t, a, e);
718
+ super.attributeChangedCallback(t, r, e);
605
719
  break;
606
720
  }
607
721
  }
608
- checkName(t, a) {
609
- return !!t.includes(a);
722
+ checkName(t, r) {
723
+ return !!t.includes(r);
610
724
  }
611
725
  checkClass(t) {
612
726
  if (t.startsWith("patch-")) {
613
- const a = t.split(/-(.*)/s);
614
- for (const e of a)
727
+ const r = t.split(/-(.*)/s);
728
+ for (const e of r)
615
729
  e != "" && this.$el.classList.toggle(e);
616
730
  } else
617
731
  this.$el.classList.toggle(t);
618
732
  }
619
- _toggleClass(t, a) {
620
- t !== null && t !== "" && t !== "default" && this.checkClass(t), a !== null && a !== "" && a !== "default" && this.checkClass(a);
733
+ _toggleClass(t, r) {
734
+ t !== null && t !== "" && t !== "default" && this.checkClass(t), r !== null && r !== "" && r !== "default" && this.checkClass(r);
621
735
  }
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}`);
736
+ updateVariant(t, r, e) {
737
+ 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
738
  }
625
- updateState(t, a) {
739
+ updateState(t, r) {
626
740
  const e = ["", "default", "success", "error"];
627
- this._toggleClass(t, a), this.checkName(e, a) || console.error(`Bad "sate" value for ${this.$el}`);
741
+ this._toggleClass(t, r), this.checkName(e, r) || console.error(`Bad "sate" value for ${this.$el}`);
628
742
  }
629
- updateExtended() {
630
- this.$el.classList.toggle("extended");
743
+ updateExtended(t, r) {
744
+ r === null ? this.$el.style.setProperty(`--button-${t}`, "") : this.$el.style.setProperty(`--button-${t}`, "100%");
631
745
  }
632
746
  updateLoading() {
633
747
  const t = this.querySelector("px-spinner");
634
748
  t && (t.getAttribute("size") || t.setAttribute("size", "xs")), this.$el.classList.toggle("loading");
635
749
  }
636
- updateShape(t, a) {
750
+ updateShape(t, r) {
637
751
  const e = [
638
752
  "",
639
753
  "default",
@@ -641,7 +755,7 @@ const M = [
641
755
  "bottom-left",
642
756
  "alternative"
643
757
  ];
644
- this._toggleClass(t, a), this.checkName(e, a) || console.error(`Bad "shape" value for ${this.$el}`);
758
+ this._toggleClass(t, r), this.checkName(e, r) || console.error(`Bad "shape" value for ${this.$el}`);
645
759
  }
646
760
  get variant() {
647
761
  return this.getAttribute("variant");
@@ -661,6 +775,24 @@ const M = [
661
775
  set extended(t) {
662
776
  this.setAttribute("extended", t);
663
777
  }
778
+ get extendedMobile() {
779
+ return this.getAttribute("extended--mobile");
780
+ }
781
+ set extendedMobile(t) {
782
+ this.setAttribute("extended--mobile", t);
783
+ }
784
+ get extendedTablet() {
785
+ return this.getAttribute("extended--tablet");
786
+ }
787
+ set extendedTablet(t) {
788
+ this.setAttribute("extended--tablet", t);
789
+ }
790
+ get extendedLaptop() {
791
+ return this.getAttribute("extended--laptop");
792
+ }
793
+ set extendedLaptop(t) {
794
+ this.setAttribute("extended--laptop", t);
795
+ }
664
796
  get loading() {
665
797
  return this.getAttribute("loading");
666
798
  }
@@ -680,28 +812,29 @@ const M = [
680
812
  this.setAttribute("inverted", t);
681
813
  }
682
814
  };
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 {
815
+ g.nativeName = "button";
816
+ let p = g;
817
+ customElements.get("px-button") || customElements.define("px-button", p);
818
+ const U = ":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}}", L = new CSSStyleSheet();
819
+ L.replaceSync(U);
820
+ class X extends HTMLElement {
689
821
  constructor() {
690
822
  super(), this.template = () => `
691
- <px-container border-radius="none" padding="none" background-color="${this.backgroundColor}">
823
+ <px-container border-radius="none" padding-inline="none" background-color="${this.backgroundColor}">
692
824
  <div class="content-wrapper">
693
- <px-vstack gap="under-display-vertical">
825
+ <px-vstack gap="heading-to-content">
694
826
  <slot name="heading"></slot>
695
- <px-vstack gap="none">
827
+ <px-vstack gap="after-element-none">
696
828
  <slot></slot>
697
829
  </px-vstack>
698
830
  </px-vstack>
699
831
  </div>
700
832
  </px-container>
701
- `, this.attachShadow({ mode: "open" }), this.shadowRoot.innerHTML = this.template(), this.shadowRoot.adoptedStyleSheets = [m];
833
+ `, this.attachShadow({ mode: "open" }), this.shadowRoot.innerHTML = this.template(), this.shadowRoot.adoptedStyleSheets = [L];
702
834
  }
703
835
  connectedCallback() {
704
- this.querySelector('[slot="heading"]') || this.shadowRoot.querySelector("px-vstack").setAttribute("gap", "none");
836
+ const t = this.querySelector('[slot="heading"]');
837
+ !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
838
  }
706
839
  static get observedAttributes() {
707
840
  return [
@@ -715,17 +848,31 @@ class P extends HTMLElement {
715
848
  "background-position",
716
849
  "padding-block",
717
850
  "padding-top",
718
- "padding-bottom"
851
+ "padding-bottom",
852
+ "padding-block--mobile",
853
+ "padding-top--mobile",
854
+ "padding-bottom--mobile",
855
+ "padding-block--tablet",
856
+ "padding-top--tablet",
857
+ "padding-bottom--tablet",
858
+ "padding-block--laptop",
859
+ "padding-top--laptop",
860
+ "padding-bottom--laptop",
861
+ "border",
862
+ "border-side",
863
+ "border-side--mobile",
864
+ "border-side--tablet",
865
+ "border-side--laptop"
719
866
  ];
720
867
  }
721
868
  get $container() {
722
869
  return this.shadowRoot.querySelector("px-container");
723
870
  }
724
- attributeChangedCallback(t, a, e) {
725
- if (a !== e)
871
+ attributeChangedCallback(t, r, e) {
872
+ if (r !== e)
726
873
  switch (t) {
727
874
  case "background-color":
728
- this.$container.backgroundColor = b.indexOf(e) > 0 ? e : "container-none";
875
+ this.$container.backgroundColor = k.indexOf(e) > 0 ? e : "none";
729
876
  break;
730
877
  case "background-gradient":
731
878
  this.$container.gradient = this.gradient;
@@ -757,10 +904,52 @@ class P extends HTMLElement {
757
904
  case "padding-bottom":
758
905
  this.$container.paddingBottom = e;
759
906
  break;
907
+ case "padding-block--mobile":
908
+ this.$container.paddingBlockMobile = e;
909
+ break;
910
+ case "padding-top--mobile":
911
+ this.$container.paddingTopMobile = e;
912
+ break;
913
+ case "padding-bottom--mobile":
914
+ this.$container.paddingBottomMobile = e;
915
+ break;
916
+ case "padding-block--tablet":
917
+ this.$container.paddingBlockTablet = e;
918
+ break;
919
+ case "padding-top--tablet":
920
+ this.$container.paddingTopTablet = e;
921
+ break;
922
+ case "padding-bottom--tablet":
923
+ this.$container.paddingBottomTablet = e;
924
+ break;
925
+ case "padding-block--laptop":
926
+ this.$container.paddingBlockLaptop = e;
927
+ break;
928
+ case "padding-top--laptop":
929
+ this.$container.paddingTopLaptop = e;
930
+ break;
931
+ case "padding-bottom--laptop":
932
+ this.$container.paddingBottomLaptop = e;
933
+ break;
934
+ case "border":
935
+ this.$container.border = e;
936
+ break;
937
+ case "border-side":
938
+ this.$container.borderSide = e;
939
+ break;
940
+ case "border-side--mobile":
941
+ this.$container.borderSideMobile = e;
942
+ break;
943
+ case "border-side--tablet":
944
+ this.$container.borderSideTablet = e;
945
+ break;
946
+ case "border-side--laptop":
947
+ this.$container.borderSideLaptop = e;
948
+ break;
760
949
  }
761
950
  }
762
951
  get backgroundColor() {
763
- return this.getAttribute("background-color") || "container-none";
952
+ return this.getAttribute("background-color") || "none";
764
953
  }
765
954
  set backgroundColor(t) {
766
955
  this.setAttribute("background-color", t);
@@ -825,15 +1014,99 @@ class P extends HTMLElement {
825
1014
  set paddingBottom(t) {
826
1015
  this.setAttribute("padding-bottom", t);
827
1016
  }
1017
+ get paddingBlockMobile() {
1018
+ return this.getAttribute("padding-block--mobile");
1019
+ }
1020
+ set paddingBlockMobile(t) {
1021
+ this.setAttribute("padding-block--mobile", t);
1022
+ }
1023
+ get paddingTopMobile() {
1024
+ return this.getAttribute("padding-top--mobile");
1025
+ }
1026
+ set paddingTopMobile(t) {
1027
+ this.setAttribute("padding-top--mobile", t);
1028
+ }
1029
+ get paddingBottomMobile() {
1030
+ return this.getAttribute("padding-bottom--mobile");
1031
+ }
1032
+ set paddingBottomMobile(t) {
1033
+ this.setAttribute("padding-bottom--mobile", t);
1034
+ }
1035
+ get paddingBlockTablet() {
1036
+ return this.getAttribute("padding-block--tablet");
1037
+ }
1038
+ set paddingBlockTablet(t) {
1039
+ this.setAttribute("padding-block--tablet", t);
1040
+ }
1041
+ get paddingTopTablet() {
1042
+ return this.getAttribute("padding-top--tablet");
1043
+ }
1044
+ set paddingTopTablet(t) {
1045
+ this.setAttribute("padding-top--tablet", t);
1046
+ }
1047
+ get paddingBottomTablet() {
1048
+ return this.getAttribute("padding-bottom--tablet");
1049
+ }
1050
+ set paddingBottomTablet(t) {
1051
+ this.setAttribute("padding-bottom--tablet", t);
1052
+ }
1053
+ get paddingBlockLaptop() {
1054
+ return this.getAttribute("padding-block--laptop");
1055
+ }
1056
+ set paddingBlockLaptop(t) {
1057
+ this.setAttribute("padding-block--laptop", t);
1058
+ }
1059
+ get paddingTopLaptop() {
1060
+ return this.getAttribute("padding-top--laptop");
1061
+ }
1062
+ set paddingTopLaptop(t) {
1063
+ this.setAttribute("padding-top--laptop", t);
1064
+ }
1065
+ get paddingBottomLaptop() {
1066
+ return this.getAttribute("padding-bottom--laptop");
1067
+ }
1068
+ set paddingBottomLaptop(t) {
1069
+ this.setAttribute("padding-bottom--laptop", t);
1070
+ }
1071
+ get border() {
1072
+ return this.getAttribute("border");
1073
+ }
1074
+ set border(t) {
1075
+ this.setAttribute("border", t);
1076
+ }
1077
+ get borderSide() {
1078
+ return this.getAttribute("border-side");
1079
+ }
1080
+ set borderSide(t) {
1081
+ this.setAttribute("border-side", t);
1082
+ }
1083
+ get borderSideMobile() {
1084
+ return this.getAttribute("border-side--mobile");
1085
+ }
1086
+ set borderSideMobile(t) {
1087
+ this.setAttribute("border-side--mobile", t);
1088
+ }
1089
+ get borderSideTablet() {
1090
+ return this.getAttribute("border-side--tablet");
1091
+ }
1092
+ set borderSideTablet(t) {
1093
+ this.setAttribute("border-side--tablet", t);
1094
+ }
1095
+ get borderSideLaptop() {
1096
+ return this.getAttribute("border-side--laptop");
1097
+ }
1098
+ set borderSideLaptop(t) {
1099
+ this.setAttribute("border-side--laptop", t);
1100
+ }
828
1101
  }
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 {
1102
+ customElements.define("px-section", X);
1103
+ const Z = ":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)}", T = new CSSStyleSheet();
1104
+ T.replaceSync(Z);
1105
+ class N extends m {
833
1106
  constructor() {
834
1107
  super(), this.template = () => `${this.getAttribute("href") ? `<px-a variant="no-style" href="${this.getAttribute("href")}">
835
1108
  <slot></slot>
836
- </px-a>` : "<button><slot></slot></button>"}`, this.shadowRoot.innerHTML = this.template(), this.shadowRoot.adoptedStyleSheets = [k];
1109
+ </px-a>` : "<button><slot></slot></button>"}`, this.shadowRoot.innerHTML = this.template(), this.shadowRoot.adoptedStyleSheets = [T];
837
1110
  }
838
1111
  static get observedAttributes() {
839
1112
  return ["for", "href"];
@@ -841,8 +1114,8 @@ class q extends c {
841
1114
  connectedCallback() {
842
1115
  this.setAttribute("slot", "header-entries"), this.$button && this.setupButtonA11y();
843
1116
  }
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());
1117
+ attributeChangedCallback(t, r, e) {
1118
+ 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
1119
  }
847
1120
  setupButtonA11y() {
848
1121
  this.$button.setAttribute("tabindex", "0"), this.$button.role = "menuitem", this.$button.ariaExpanded = "false", this.$button.ariaHasPopup = "menu";
@@ -868,15 +1141,15 @@ class q extends c {
868
1141
  return this.shadowRoot.querySelector("px-a");
869
1142
  }
870
1143
  }
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 {
1144
+ customElements.get("px-header-item") || customElements.define("px-header-item", N);
1145
+ const D = "#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}}", z = new CSSStyleSheet();
1146
+ z.replaceSync(D);
1147
+ class V extends m {
875
1148
  constructor() {
876
1149
  var t;
877
- super(f), this.template = `
1150
+ super(z), this.template = `
878
1151
  <div id="navigation-items-container">
879
- <px-section padding-block--mobile="s" padding-block="none" background-color="container-none">
1152
+ <px-section padding-block--mobile="s" padding-block="none" background-color="none">
880
1153
  <px-hstack gap--tablet="2rem" gap="3rem" wrap="wrap" align-items="center">
881
1154
  <slot name="header-logo"></slot>
882
1155
  <slot name="header-entries"></slot>
@@ -889,7 +1162,7 @@ class H extends c {
889
1162
  </px-hstack>
890
1163
  </px-hstack>
891
1164
  </px-section>
892
- <px-section id="panel-container" background-color="container-weak" padding="none" background-color="container-none">
1165
+ <px-section id="panel-container" background-color="container-weak" padding="none" background-color="none">
893
1166
  <slot name="header-panels">
894
1167
  </px-section>
895
1168
  <div id="backdrop-filter"></div>
@@ -899,10 +1172,10 @@ class H extends c {
899
1172
  }
900
1173
  connectedCallback() {
901
1174
  this.addEventListener("click", (t) => {
902
- const a = t.target.closest(
1175
+ const r = t.target.closest(
903
1176
  "px-header-item"
904
1177
  );
905
- a && a.for && (this.$backdropFilter.style.display = "block", this.$navigationItems.forEach((e) => {
1178
+ r && r.for && (this.$backdropFilter.style.display = "block", this.$navigationItems.forEach((e) => {
906
1179
  e.checked = !1;
907
1180
  }), t.target.checked = !0, this.i11yEnableActions(!1), this.togglePanel(t.target.for));
908
1181
  }), this.shadowRoot.addEventListener("click", (t) => {
@@ -920,7 +1193,7 @@ class H extends c {
920
1193
  }), this.createMobileMenuPanel();
921
1194
  }
922
1195
  createMobileMenuPanel() {
923
- var a;
1196
+ var r;
924
1197
  const t = `
925
1198
  <px-mdd name="__lavender_mobile_menu">
926
1199
  <span slot="title">Menu</span>
@@ -933,22 +1206,22 @@ class H extends c {
933
1206
  ).join("")}
934
1207
  </px-mdd>
935
1208
  `;
936
- (a = this.$megaDropdowns.item(0)) == null || a.insertAdjacentHTML("beforebegin", t);
1209
+ (r = this.$megaDropdowns.item(0)) == null || r.insertAdjacentHTML("beforebegin", t);
937
1210
  }
938
1211
  i11yEnableActions(t = !0) {
939
1212
  this.querySelectorAll('[slot="header-actions"]').forEach(
940
- (a) => {
1213
+ (r) => {
941
1214
  if (t) {
942
- a.removeAttribute("tabindex");
1215
+ r.removeAttribute("tabindex");
943
1216
  return;
944
1217
  }
945
- a.setAttribute("tabindex", "-1");
1218
+ r.setAttribute("tabindex", "-1");
946
1219
  }
947
1220
  );
948
1221
  }
949
1222
  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);
1223
+ this.$megaDropdowns.forEach((r) => {
1224
+ 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
1225
  });
953
1226
  }
954
1227
  hidePanel() {
@@ -974,8 +1247,8 @@ class H extends c {
974
1247
  return this.shadowRoot.querySelector("px-button-icon");
975
1248
  }
976
1249
  }
977
- customElements.get("px-header") || customElements.define("px-header", H);
1250
+ customElements.get("px-header") || customElements.define("px-header", V);
978
1251
  export {
979
- H as Header,
980
- q as HeaderItem
1252
+ V as Header,
1253
+ N as HeaderItem
981
1254
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@proximus/lavender-header",
3
- "version": "1.0.0-alpha.4",
3
+ "version": "1.0.0-alpha.6",
4
4
  "description": "",
5
5
  "main": "dist/index.js",
6
6
  "exports": {
@@ -31,10 +31,12 @@
31
31
  "CHANGELOG.md",
32
32
  "package.json",
33
33
  "dist/*.js",
34
- "dist/css/**/*.css"
34
+ "dist/*.cjs",
35
+ "dist/css/**/*.css",
36
+ "dist/js/**/*.js"
35
37
  ]
36
38
  }
37
39
  }
38
40
  },
39
- "gitHead": "aa8576cb6d764a19c6b81797807d7af8f1244a44"
41
+ "gitHead": "b8dcbe6979ae4c984cf44a4ce6d86b087446e711"
40
42
  }