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

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 +424 -291
  2. package/package.json +9 -3
package/dist/index.js CHANGED
@@ -1,47 +1,67 @@
1
- import { PxElement as m, boxShadowValues as R, noBorderRadiusValues as E, borderRadiusValues as I, borderSideValues as P, borderValues as w, paddingValues as d, gradientValues as _, backgroundColorValues as x, borderColorValues as q, WithFlexAttributes as v } from "@proximus/lavender-common";
1
+ import { PxElement as h, cssTokenBreakpoints as a, paddingValues as n, boxShadowValues as R, backgroundSizeValues as I, noBorderRadiusValues as P, borderRadiusValues as _, borderSideValues as q, borderValues as H, gradientValues as F, backgroundColorValues as k, borderColorValues as j, transferAccessibilityAttributes as O, WithExtraAttributes as m, fontweightValues as W, colorValues as G, fontsizeValues as N } from "@proximus/lavender-common";
2
2
  import "@proximus/lavender-layout";
3
- const F = '.container{font-family:var(--px-font-family);background-color:var(--background-color);background-image:var(--background-image);background:var(--background-gradient);border-radius:var(--px-radius-main);padding:var(--container-padding-top--mobile) var(--container-padding-right--mobile) var(--container-padding-bottom--mobile) var(--container-padding-left--mobile);box-sizing:border-box}:host([inverted]) .container{background-color:var(--background-color-inverted)}.border-none{border:none}.border-s{border:var(--px-border-size-s) solid var(--border-color)}.border-m{border:var(--px-border-size-m) solid var(--border-color)}.border-l{border:var(--px-border-size-l) solid var(--border-color)}.border-side-top{border-bottom-style:none;border-right-style:none;border-left-style:none}.border-side-right{border-top-style:none;border-bottom-style:none;border-left-style:none}.border-side-bottom{border-top-style:none;border-right-style:none;border-left-style:none}.border-side-left{border-top-style:none;border-right-style:none;border-bottom-style:none}.border-side-block{border-inline-style:none}.border-side-inline{border-block-style:none}:host([inverted]) .border-s,:host([inverted]) .border-m,:host([inverted]) .border-l{border-color:var(--border-color-inverted)}.border-radius-main{border-radius:var(--px-radius-main)}.border-radius-pill{border-radius:var(--px-radius-pill)}.no-border-radius-top{border-top-left-radius:var(--px-radius-none);border-top-right-radius:var(--px-radius-none)}.no-border-radius-right{border-top-right-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-bottom{border-bottom-left-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-left{border-top-left-radius:var(--px-radius-none);border-bottom-left-radius:var(--px-radius-none)}.no-border-radius-all,.border-radius-none{border-radius:var(--px-radius-none)}.bgimg{background-repeat:no-repeat}.background-size-cover{background-size:cover;background-position:center center}.background-size-contain{background-size:contain}.box-shadow-none{box-shadow:none}.box-shadow-s{box-shadow:0 1px 2px #2525251f}.box-shadow-m{box-shadow:0 4px 6px -1px #25252514}.box-shadow-l{box-shadow:0 10px 15px -3px #25252514}.box-shadow-xl{box-shadow:0 20px 25px -5px #25252514}.anchored{position:relative}::slotted([slot="anchor-right"]),::slotted([slot="anchor-left"]),::slotted([slot="anchor-full"]){position:absolute;top:0}::slotted([slot="anchor-right"]),::slotted([slot="anchor-left"]){transform:translateY(-50%);z-index:2}::slotted([slot="anchor-right"]){right:var(--container-padding-right--mobile)}::slotted([slot="anchor-left"]){left:var(--container-padding-left--mobile)}::slotted([slot="anchor-full"]){transform:translateY(-100%);right:0;left:0;text-align:center;z-index:1}@media only screen and (max-width: 640px){.container{background-color:var(--background-color--mobile, var(--background-color));background-image:var( --background-image--mobile, var( --background-image, var(--background-gradient--mobile, var(--background-gradient)) ) )}:host([inverted]) .container{background-color:var( --background-color-inverted--mobile, var(--background-color-inverted) )}.border-side-top--mobile{border-top-style:solid;border-right-style:none;border-bottom-style:none;border-left-style:none}.border-side-right--mobile{border-top-style:none;border-right-style:solid;border-bottom-style:none;border-left-style:none}.border-side-bottom--mobile{border-top-style:none;border-right-style:none;border-bottom-style:solid;border-left-style:none}.border-side-left--mobile{border-top-style:none;border-right-style:none;border-bottom-style:none;border-left-style:solid}.border-side-block--mobile{border-inline-style:none;border-block-style:solid}.border-side-inline--mobile{border-block-style:none;border-inline-style:solid}.no-border-radius-top--mobile{border-top-left-radius:var(--px-radius-none);border-top-right-radius:var(--px-radius-none)}.no-border-radius-right--mobile{border-top-right-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-bottom--mobile{border-bottom-left-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-left--mobile{border-top-left-radius:var(--px-radius-none);border-bottom-left-radius:var(--px-radius-none)}.no-border-radius-all--mobile{border-radius:var(--px-radius-none)}}.border-s ::slotted([slot="anchor-full"]){right:calc(var(--px-border-size-s) * -1);left:calc(var(--px-border-size-s) * -1)}.border-m ::slotted([slot="anchor-full"]){right:calc(var(--px-border-size-m) * -1);left:calc(var(--px-border-size-m) * -1)}.border-l ::slotted([slot="anchor-full"]){right:calc(var(--px-border-l) * -1);left:calc(var(--px-border-l) * -1)}@media only screen and (min-width: 768px) and (max-width: 1024px){.container{padding:var(--container-padding-top--tablet) var(--container-padding-right--tablet) var(--container-padding-bottom--tablet) var(--container-padding-left--tablet);background-color:var(--background-color--tablet, var(--background-color));background-image:var( --background-image--tablet, var( --background-image, var(--background-gradient--tablet, var(--background-gradient)) ) )}:host([inverted]) .container{background-color:var( --background-color-inverted--tablet, var(--background-color-inverted) )}.no-border-radius-top--tablet{border-top-left-radius:var(--px-radius-none);border-top-right-radius:var(--px-radius-none)}.no-border-radius-right--tablet{border-top-right-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-bottom--tablet{border-bottom-left-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-left--tablet{border-top-left-radius:var(--px-radius-none);border-bottom-left-radius:var(--px-radius-none)}.no-border-radius-all--tablet{border-radius:var(--px-radius-none)}.border-side-top--tablet{border-top-style:solid;border-right-style:none;border-bottom-style:none;border-left-style:none}.border-side-right--tablet{border-top-style:none;border-right-style:solid;border-bottom-style:none;border-left-style:none}.border-side-bottom--tablet{border-top-style:none;border-right-style:none;border-bottom-style:solid;border-left-style:none}.border-side-left--tablet{border-top-style:none;border-right-style:none;border-bottom-style:none;border-left-style:solid}.border-side-block--tablet{border-inline-style:none;border-block-style:solid}.border-side-inline--tablet{border-block-style:none;border-inline-style:solid}::slotted([slot="anchor-right"]){right:var(--container-padding-right--tablet)}::slotted([slot="anchor-left"]){left:var(--container-padding-left--tablet)}}@media only screen and (min-width: 1025px){.container{padding:var(--container-padding-top--laptop) var(--container-padding-right--laptop) var(--container-padding-bottom--laptop) var(--container-padding-left--laptop);background-color:var(--background-color--laptop, var(--background-color));background-image:var( --background-image--laptop, var( --background-image, var(--background-gradient--laptop, var(--background-gradient)) ) )}:host([inverted]) .container{background-color:var( --background-color-inverted--laptop, var(--background-color-inverted) )}.no-border-radius-top--laptop{border-top-left-radius:var(--px-radius-none);border-top-right-radius:var(--px-radius-none)}.no-border-radius-right--laptop{border-top-right-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-bottom--laptop{border-bottom-left-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-left--laptop{border-top-left-radius:var(--px-radius-none);border-bottom-left-radius:var(--px-radius-none)}.no-border-radius-all--laptop{border-radius:var(--px-radius-none)}::slotted([slot="anchor-right"]){right:var(--container-padding-right--laptop)}::slotted([slot="anchor-left"]){left:var(--container-padding-left--laptop)}.border-side-top--laptop{border-top-style:solid;border-right-style:none;border-bottom-style:none;border-left-style:none}.border-side-right--laptop{border-top-style:none;border-right-style:solid;border-bottom-style:none;border-left-style:none}.border-side-bottom--laptop{border-top-style:none;border-right-style:none;border-bottom-style:solid;border-left-style:none}.border-side-left--laptop{border-top-style:none;border-right-style:none;border-bottom-style:none;border-left-style:solid}.border-side-block--laptop{border-inline-style:none;border-block-style:solid}.border-side-inline--laptop{border-block-style:none;border-inline-style:solid}}', f = new CSSStyleSheet();
4
- f.replaceSync(F);
5
- const H = ["anchor-right", "anchor-left", "anchor-full"], j = ["", "cover", "contain", "default"], c = class c extends m {
3
+ const Y = ':host{display:block}.container{font-family:var(--px-font-family);background-color:var(--background-color);background-image:var(--background-image);background:var(--background-gradient);border-radius:var(--px-radius-main);box-sizing:border-box;height:100%}:host([inverted]) .container{background-color:var(--background-color-inverted)}.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, var(--container-padding-inline, var(--container-padding)) )}::slotted([slot="anchor-left"]){left:var( --container-padding-left, var(--container-padding-inline, var(--container-padding)) )}::slotted([slot="anchor-full"]){transform:translateY(-100%);right:0;left:0;text-align:center;z-index:1}@media only screen and (max-width: 767px){.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{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, var(--container-padding-inline, var(--container-padding)) )}::slotted([slot="anchor-left"]){left:var( --container-padding-left, var(--container-padding-inline, var(--container-padding)) )}}@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)}::slotted([slot="anchor-right"]){right:var( --container-padding-right, var(--container-padding-inline, var(--container-padding)) )}::slotted([slot="anchor-left"]){left:var( --container-padding-left, var(--container-padding-inline, var(--container-padding)) )}.border-side-top--laptop{border-top-style:solid;border-right-style:none;border-bottom-style:none;border-left-style:none}.border-side-right--laptop{border-top-style:none;border-right-style:solid;border-bottom-style:none;border-left-style:none}.border-side-bottom--laptop{border-top-style:none;border-right-style:none;border-bottom-style:solid;border-left-style:none}.border-side-left--laptop{border-top-style:none;border-right-style:none;border-bottom-style:none;border-left-style:solid}.border-side-block--laptop{border-inline-style:none;border-block-style:solid}.border-side-inline--laptop{border-block-style:none;border-inline-style:solid}}', c = new CSSStyleSheet();
4
+ c.replaceSync(Y);
5
+ const J = ["anchor-right", "anchor-left", "anchor-full"], d = (l, t, e) => `:host([${l}${e ? `--${e}` : ""}='${t}']) .container`, s = "px-padding", x = class x extends h {
6
6
  constructor() {
7
- super(f), this.template = () => `<div class="container">
7
+ super(c), 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>
11
11
  <slot></slot>
12
- </div>`, this.shadowRoot.innerHTML = this.template();
12
+ </div>`, this.shadowRoot.innerHTML = this.template(), this.shadowRoot.adoptedStyleSheets = [
13
+ c,
14
+ a(
15
+ "padding",
16
+ d,
17
+ n,
18
+ s,
19
+ "--container-padding"
20
+ ),
21
+ a(
22
+ "padding-inline",
23
+ d,
24
+ n,
25
+ s,
26
+ "--container-padding-inline"
27
+ ),
28
+ a(
29
+ "padding-block",
30
+ d,
31
+ n,
32
+ s
33
+ ),
34
+ a(
35
+ "padding-top",
36
+ d,
37
+ n,
38
+ s
39
+ ),
40
+ a(
41
+ "padding-right",
42
+ d,
43
+ n,
44
+ s,
45
+ "--container-padding-right"
46
+ ),
47
+ a(
48
+ "padding-bottom",
49
+ d,
50
+ n,
51
+ s
52
+ ),
53
+ a(
54
+ "padding-left",
55
+ d,
56
+ n,
57
+ s,
58
+ "--container-padding-left"
59
+ )
60
+ ];
13
61
  }
14
62
  static get observedAttributes() {
15
63
  return [
16
64
  ...super.observedAttributes,
17
- "padding",
18
- "padding-inline",
19
- "padding-block",
20
- "padding-top",
21
- "padding-right",
22
- "padding-bottom",
23
- "padding-left",
24
- "padding--mobile",
25
- "padding-inline--mobile",
26
- "padding-block--mobile",
27
- "padding-top--mobile",
28
- "padding-right--mobile",
29
- "padding-bottom--mobile",
30
- "padding-left--mobile",
31
- "padding--tablet",
32
- "padding-inline--tablet",
33
- "padding-block--tablet",
34
- "padding-top--tablet",
35
- "padding-right--tablet",
36
- "padding-bottom--tablet",
37
- "padding-left--tablet",
38
- "padding--laptop",
39
- "padding-inline--laptop",
40
- "padding-block--laptop",
41
- "padding-top--laptop",
42
- "padding-right--laptop",
43
- "padding-bottom--laptop",
44
- "padding-left--laptop",
45
65
  "border",
46
66
  "border-color",
47
67
  "border-side",
@@ -72,93 +92,31 @@ const H = ["anchor-right", "anchor-left", "anchor-full"], j = ["", "cover", "con
72
92
  ];
73
93
  }
74
94
  connectedCallback() {
75
- var r, e, o, i;
76
- super.connectedCallback(), !this.padding && !this.paddingBlock && !this.paddingInline && !this.paddingTop && !this.paddingRight && !this.paddingBottom && !this.paddingLeft && !this.paddingMobile && !this.paddingBlockMobile && !this.paddingInlineMobile && !this.paddingTopMobile && !this.paddingRightMobile && !this.paddingBottomMobile && !this.paddingLeftMobile && !this.paddingTablet && !this.paddingBlockTablet && !this.paddingInlineTablet && !this.paddingTopTablet && !this.paddingRightTablet && !this.paddingBottomTablet && !this.paddingLeftTablet && !this.paddingLaptop && !this.paddingBlockLaptop && !this.paddingInlineLaptop && !this.paddingTopLaptop && !this.paddingRightLaptop && !this.paddingBottomLaptop && !this.paddingLeftLaptop && (this.padding = "m"), this.backgroundColor || (this.backgroundColor = "container-neutral-bare"), this.borderColor || (this.borderColor = "container-main");
95
+ super.connectedCallback(), this.padding || (this.padding = "m"), this.backgroundColor || (this.backgroundColor = "container-neutral-bare"), this.borderColor || (this.borderColor = "container-main");
77
96
  const t = this.querySelector("[slot]");
78
- t && H.includes(t.getAttribute("slot")) && this.shadowRoot.querySelector(".container").classList.toggle("anchored"), ((r = this.parentElement) == null ? void 0 : r.getAttribute("align-items")) === "stretch" && (((e = this.parentElement) == null ? void 0 : e.getAttribute("direction")) === "column" ? this.$el.style.width = "100%" : this.$el.style.height = "100%"), (((o = this.parentElement) == null ? void 0 : o.localName) === "px-grid-item" || ((i = this.parentElement) == null ? void 0 : i.localName) === "px-a") && (this.$el.style.height = "100%");
97
+ t && J.includes(t.getAttribute("slot")) && this.shadowRoot.querySelector(".container").classList.toggle("anchored");
79
98
  }
80
- attributeChangedCallback(t, r, e) {
81
- if (r !== e)
99
+ attributeChangedCallback(t, e, r) {
100
+ if (e !== r)
82
101
  switch (t) {
83
- case "padding":
84
- case "padding--mobile":
85
- case "padding--tablet":
86
- case "padding--laptop":
87
- this.updatePadding(t, r, e, d, [
88
- "top",
89
- "right",
90
- "bottom",
91
- "left"
92
- ]);
93
- break;
94
- case "padding-inline":
95
- case "padding-inline--mobile":
96
- case "padding-inline--tablet":
97
- case "padding-inline--laptop":
98
- this.updatePadding(t, r, e, d, [
99
- "left",
100
- "right"
101
- ]);
102
- break;
103
- case "padding-block":
104
- case "padding-block--mobile":
105
- case "padding-block--tablet":
106
- case "padding-block--laptop":
107
- this.updatePadding(t, r, e, d, [
108
- "top",
109
- "bottom"
110
- ]);
111
- break;
112
- case "padding-top":
113
- case "padding-top--mobile":
114
- case "padding-top--tablet":
115
- case "padding-top--laptop":
116
- this.updatePadding(t, r, e, d, [
117
- "top"
118
- ]);
119
- break;
120
- case "padding-right":
121
- case "padding-right--mobile":
122
- case "padding-right--tablet":
123
- case "padding-right--laptop":
124
- this.updatePadding(t, r, e, d, [
125
- "right"
126
- ]);
127
- break;
128
- case "padding-bottom":
129
- case "padding-bottom--mobile":
130
- case "padding-bottom--tablet":
131
- case "padding-bottom--laptop":
132
- this.updatePadding(t, r, e, d, [
133
- "bottom"
134
- ]);
135
- break;
136
- case "padding-left":
137
- case "padding-left--mobile":
138
- case "padding-left--tablet":
139
- case "padding-left--laptop":
140
- this.updatePadding(t, r, e, d, [
141
- "left"
142
- ]);
143
- break;
144
102
  case "border":
145
- this.updateAttribute(t, r, e, w);
103
+ this.updateAttribute(t, e, r, H);
146
104
  break;
147
105
  case "border-color":
148
- this.updateBorderColor(t, e);
106
+ this.updateBorderColor(t, r);
149
107
  break;
150
108
  case "border-side":
151
109
  case "border-side--mobile":
152
110
  case "border-side--tablet":
153
111
  case "border-side--laptop":
154
- this.updateAttribute(t, r, e, P);
112
+ this.updateAttribute(t, e, r, q);
155
113
  break;
156
114
  case "border-radius":
157
115
  this.updateAttribute(
158
116
  t,
159
- r,
160
117
  e,
161
- I
118
+ r,
119
+ _
162
120
  );
163
121
  break;
164
122
  case "no-border-radius":
@@ -167,150 +125,131 @@ const H = ["anchor-right", "anchor-left", "anchor-full"], j = ["", "cover", "con
167
125
  case "no-border-radius--laptop":
168
126
  this.updateNoBorderRadius(
169
127
  t,
170
- r,
171
128
  e,
172
- E
129
+ r,
130
+ P
173
131
  );
174
132
  break;
175
133
  case "background-color":
176
134
  case "background-color--mobile":
177
135
  case "background-color--tablet":
178
136
  case "background-color--laptop":
179
- this.updateBackgroundColor(t, e);
137
+ this.updateBackgroundColor(t, r);
180
138
  break;
181
139
  case "background-gradient":
182
140
  case "background-gradient--mobile":
183
141
  case "background-gradient--tablet":
184
142
  case "background-gradient--laptop":
185
- this.updateGradient(t, e);
143
+ this.updateGradient(t, r);
186
144
  break;
187
145
  case "background-size":
188
146
  this.updateAttribute(
189
147
  t,
190
- r,
191
148
  e,
192
- j
149
+ r,
150
+ I
193
151
  );
194
152
  break;
195
153
  case "background-image":
196
154
  case "background-image--mobile":
197
155
  case "background-image--tablet":
198
156
  case "background-image--laptop":
199
- this.updateBackgroundImg(t, e);
157
+ this.updateBackgroundImg(t, r);
200
158
  break;
201
159
  case "background-position":
202
- e !== null && e !== "" && (this.$el.style.backgroundPosition = e);
160
+ r !== null && r !== "" && (this.$el.style.backgroundPosition = r);
203
161
  break;
204
162
  case "box-shadow":
205
- this.updateAttribute(t, r, e, R);
163
+ this.updateAttribute(t, e, r, R);
206
164
  break;
207
165
  default:
208
- super.attributeChangedCallback(t, r, e);
166
+ super.attributeChangedCallback(t, e, r);
209
167
  break;
210
168
  }
211
169
  }
212
- updatePadding(t, r, e, o, i) {
213
- if (!this.checkName(o, e)) {
214
- console.error(`Bad ${t} value for`, this.$el);
215
- return;
216
- }
217
- const a = t.includes("--"), h = a ? t.split("--")[1] : "", s = (n, l, B, z) => {
218
- const M = n === "laptop" ? "desktop" : n;
219
- l !== null && l !== "" && l !== "default" && B.forEach((C) => {
220
- const k = `--container-padding-${C}--${n}`;
221
- (z || !this.$el.style.getPropertyValue(k)) && this.$el.style.setProperty(
222
- k,
223
- `var(--px-padding-${l}-${M})`
224
- );
225
- });
226
- };
227
- a ? (s(h, r, i, !0), s(h, e, i, !0)) : ["mobile", "tablet", "laptop"].forEach((n) => {
228
- s(n, r, i, !1), s(n, e, i, !1);
229
- });
170
+ updateBackgroundImg(t, e) {
171
+ this.$el.style.setProperty(`--${t}`, `url("${e}")`);
230
172
  }
231
- updateBackgroundImg(t, r) {
232
- this.$el.style.setProperty(`--${t}`, `url("${r}")`);
233
- }
234
- updateGradient(t, r) {
235
- if (this.checkName(_, r)) {
236
- const e = this.splitAttrNameFromBreakpoint(t);
237
- t = e.attrName;
238
- const o = e.breakpoint;
173
+ updateGradient(t, e) {
174
+ if (this.checkName(F, e)) {
175
+ const r = this.splitAttrNameFromBreakpoint(t);
176
+ t = r.attrName;
177
+ const o = r.breakpoint;
239
178
  this.$el.style.setProperty(
240
179
  `--${t}${o}`,
241
- `linear-gradient(var(--px-background-color-container-gradient-${r}))`
180
+ `linear-gradient(var(--px-background-color-container-gradient-${e}))`
242
181
  );
243
182
  } else
244
183
  console.error(
245
- `${r} is not an allowed background-gradient value for ${this.$el}`
184
+ `${e} is not an allowed background-gradient value for ${this.$el}`
246
185
  );
247
186
  }
248
- updateBackgroundColor(t, r) {
249
- if (this.checkName(x, r)) {
250
- const e = this.splitAttrNameFromBreakpoint(t), o = e.breakpoint;
187
+ updateBackgroundColor(t, e) {
188
+ if (this.checkName(k, e)) {
189
+ const r = this.splitAttrNameFromBreakpoint(t), o = r.breakpoint;
251
190
  this.$el.style.setProperty(
252
- `--${e.attrName}${o}`,
253
- `var(--px-background-color-${r}-default)`
191
+ `--${r.attrName}${o}`,
192
+ `var(--px-background-color-${e}-default)`
254
193
  ), this.$el.style.setProperty(
255
- `--${e.attrName}-inverted${o}`,
256
- `var(--px-background-color-${r}-inverted)`
194
+ `--${r.attrName}-inverted${o}`,
195
+ `var(--px-background-color-${e}-inverted)`
257
196
  );
258
197
  } else
259
198
  console.error(
260
- `${r} is not an allowed ${t} value for ${this.$el}`
199
+ `${e} is not an allowed ${t} value for ${this.$el}`
261
200
  );
262
201
  }
263
- updateBorderColor(t, r) {
264
- this.checkName(q, r) ? (this.$el.style.setProperty(
202
+ updateBorderColor(t, e) {
203
+ this.checkName(j, e) ? (this.$el.style.setProperty(
265
204
  `--${t}`,
266
- `var(--px-border-color-${r}-default)`
205
+ `var(--px-border-color-${e}-default)`
267
206
  ), this.$el.style.setProperty(
268
207
  `--${t}-inverted`,
269
- `var(--px-border-color-${r}-inverted)`
208
+ `var(--px-border-color-${e}-inverted)`
270
209
  )) : console.error(
271
- `${r} is not an allowed ${t} value for ${this.$el}`
210
+ `${e} is not an allowed ${t} value for ${this.$el}`
272
211
  );
273
212
  }
274
- updateNoBorderRadius(t, r, e, o) {
275
- if (!this.checkName(o, e))
213
+ updateNoBorderRadius(t, e, r, o) {
214
+ if (!this.checkName(o, r))
276
215
  console.error(
277
- `${e} is not an allowed ${t} value for ${this.$el}`
216
+ `${r} is not an allowed ${t} value for ${this.$el}`
278
217
  );
279
218
  else {
280
- const i = this.splitAttrNameFromBreakpoint(t), a = i.breakpoint;
281
- r !== null && r !== "" && this.$el.classList.toggle(
282
- `${i.attrName}-${r}${a}`
283
- ), e !== null && e !== "" && this.$el.classList.toggle(
284
- `${i.attrName}-${e}${a}`
219
+ const i = this.splitAttrNameFromBreakpoint(t), b = i.breakpoint;
220
+ e !== null && e !== "" && this.$el.classList.toggle(
221
+ `${i.attrName}-${e}${b}`
222
+ ), r !== null && r !== "" && this.$el.classList.toggle(
223
+ `${i.attrName}-${r}${b}`
285
224
  );
286
225
  }
287
226
  }
288
- updateAttribute(t, r, e, o) {
289
- if (!this.checkName(o, e))
227
+ updateAttribute(t, e, r, o) {
228
+ if (!this.checkName(o, r))
290
229
  console.error(
291
- `${e} is not an allowed ${t} value for ${this.$el}`
230
+ `${r} is not an allowed ${t} value for ${this.$el}`
292
231
  );
293
232
  else {
294
- const i = this.splitAttrNameFromBreakpoint(t), a = i.breakpoint;
295
- r !== null && r !== "" && this.$el.classList.toggle(
296
- `${i.attrName}-${r}${a}`
297
- ), e !== null && e !== "" && this.$el.classList.toggle(
298
- `${i.attrName}-${e}${a}`
233
+ const i = this.splitAttrNameFromBreakpoint(t), b = i.breakpoint;
234
+ e !== null && e !== "" && this.$el.classList.toggle(
235
+ `${i.attrName}-${e}${b}`
236
+ ), r !== null && r !== "" && this.$el.classList.toggle(
237
+ `${i.attrName}-${r}${b}`
299
238
  );
300
239
  }
301
240
  }
302
241
  splitAttrNameFromBreakpoint(t) {
303
- let r = "";
242
+ let e = "";
304
243
  if (["--mobile", "--tablet", "--laptop"].some(
305
- (e) => t.includes(e)
244
+ (r) => t.includes(r)
306
245
  )) {
307
- const e = t.split("--");
308
- t = e[0], r = `--${e[1]}`;
246
+ const r = t.split("--");
247
+ t = r[0], e = `--${r[1]}`;
309
248
  }
310
- return { attrName: t, breakpoint: r };
249
+ return { attrName: t, breakpoint: e };
311
250
  }
312
- checkName(t, r) {
313
- return t.includes(r);
251
+ checkName(t, e) {
252
+ return t.includes(e);
314
253
  }
315
254
  get padding() {
316
255
  return this.getAttribute("padding");
@@ -643,14 +582,15 @@ const H = ["anchor-right", "anchor-left", "anchor-full"], j = ["", "cover", "con
643
582
  this.setAttribute("inverted", t);
644
583
  }
645
584
  };
646
- c.nativeName = "div";
647
- let b = c;
648
- customElements.define("px-container", b);
649
- const G = '.btn{display:inline-flex;vertical-align:middle;align-items:center;justify-content:center;font-family:var(--px-font-family);font-size:var(--px-text-size-label-m-mobile);line-height:var(--px-line-height-m);font-weight:700;gap:var(--px-spacing-after-element-2xs-mobile);cursor:pointer;text-decoration:none;--btn-transition: all .2s ease-in-out 0s;transition:var(--btn-transition);border:var(--px-border-size-m) solid transparent}.btn,.btn *{box-sizing:border-box}.btn ::slotted(px-icon){line-height:0}.btn:hover:not([disabled],[aria-disabled=true],.loading){border-color:var(--px-border-color-action-hover-default)}.btn:focus:not([disabled],[aria-disabled=true]){outline-offset:var(--px-focus-offset-mobile);outline:var(--px-focus-outline-mobile) solid var(--px-border-color-focus-outline-default)}.btn:active{transform:scale(.95)}.btn[disabled],.btn[aria-disabled=true]{cursor:default;pointer-events:none}.btn.loading{cursor:inherit}.btn.loading ::slotted(px-spinner){line-height:0}.btn:not(.secondary,.tertiary,.patch){color:var(--px-text-color-heading-brand-inverted);background:var(--px-background-color-action-primary-default);min-height:var(--px-action-size-l);padding:var(--px-padding-xs-mobile) var(--px-padding-m-mobile);border-radius:var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-big) var(--px-radius-button-small)}.btn:not(.secondary,.tertiary,.patch) ::slotted([slot="after"]){margin-right:calc(var(--px-padding-xs-mobile) * -1)}.btn:not(.secondary,.tertiary,.patch) ::slotted([slot="before"]){margin-left:calc(var(--px-padding-xs-mobile) * -1)}.btn:not(.secondary,.tertiary,.patch):hover:not([disabled],[aria-disabled=true],.loading){color:var(--px-text-color-heading-brand-default);background:var(--px-background-color-action-hover-bordered-default)}.btn:not(.secondary,.tertiary,.patch)[disabled],.btn:not(.secondary,.tertiary,.patch)[aria-disabled=true]{background:var(--px-background-color-action-disabled-default);color:var(--px-text-color-action-disabled-default)}.btn:not(.secondary,.tertiary,.patch).loading{background:var(--px-background-color-action-disabled-default);color:var(--px-text-color-heading-brand-default);border-color:transparent}.btn:not(.secondary,.tertiary,.patch).extended{width:100%}.btn:not(.secondary,.tertiary,.patch).alternative{border-radius:var(--px-radius-button-small)}.btn.secondary{color:var(--px-text-color-heading-brand-default);background:var(--px-background-color-action-secondary-default);min-height:var(--px-action-size-l);padding:var(--px-padding-xs-mobile) var(--px-padding-m-mobile);border-radius:var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-big) var(--px-radius-button-small)}.btn.secondary:hover:not([disabled],[aria-disabled=true],.loading){color:var(--px-text-color-heading-brand-default);background:var(--px-background-color-action-hover-bordered-default)}.btn.secondary[disabled],.btn.secondary[aria-disabled=true]{background:var(--px-background-color-action-disabled-default);color:var(--px-text-color-action-disabled-default)}.btn.secondary.loading{background:var(--px-background-color-action-disabled-default);color:var(--px-text-color-heading-brand-default);border-color:transparent}.btn.secondary.extended{width:100%}.btn.secondary.alternative{border-radius:var(--px-radius-button-small)}.btn.tertiary{background:none;color:var(--px-text-color-heading-brand-default);border-radius:var(--px-radius-pill);border:var(--px-border-size-m) solid transparent;padding:var(--px-padding-2xs-mobile) 0;gap:var(--px-spacing-after-element-xs-mobile)}.btn.tertiary ::slotted(px-icon){display:flex;align-items:center;justify-content:center;width:var(--px-icon-size-m-mobile);height:var(--px-icon-size-m-mobile);border-radius:var(--px-radius-pill);background:var(--px-background-color-action-secondary-default);transition:var(--btn-transition)}.btn.tertiary:hover:not([disabled],[aria-disabled=true],.loading){padding:var(--px-padding-2xs-mobile) var(--px-padding-s-mobile)}.btn.tertiary:hover:not([disabled],[aria-disabled=true],.loading) ::slotted(px-icon){background:transparent;width:inherit;height:inherit}.btn.tertiary[disabled],.btn.tertiary[aria-disabled=true]{color:var(--px-text-color-action-disabled-default)}.btn.tertiary[disabled] ::slotted(px-icon),.btn.tertiary[aria-disabled=true] ::slotted(px-icon){background:var(--px-background-color-action-disabled-default)}.btn.tertiary.loading{color:var(--px-text-color-heading-brand-default);border-color:transparent}.btn.tertiary.loading ::slotted(px-spinner){display:flex;align-items:center;justify-content:center;width:var(--px-icon-size-m-mobile);height:var(--px-icon-size-m-mobile);border-radius:var(--px-radius-pill);background:var(--px-background-color-action-disabled-default)}.btn.patch{display:inline-flex}.btn.patch:hover:not([disabled],[aria-disabled=true],.loading){color:var(--px-text-color-heading-brand-default);background:var(--px-background-color-action-hover-bordered-default)}.btn.patch[disabled],.btn.patch[aria-disabled=true]{background:var(--px-background-color-action-disabled-default);color:var(--px-text-color-action-disabled-default)}button.link{background:none;border:none;text-decoration:underline;padding:0;cursor:pointer}button.link[disabled],button.link[aria-disabled=true]{cursor:default;pointer-events:none;color:var(--px-text-color-action-disabled-default)}:host([inverted]) .btn:hover:not([disabled],[aria-disabled=true],.loading){border-color:var(--px-border-color-action-hover-inverted)}:host([inverted]) .btn:focus:not([disabled],[aria-disabled=true]){outline-color:var(--px-border-color-focus-outline-inverted)}:host([inverted]) .btn:not(.secondary,.tertiary,.patch){color:var(--px-text-color-heading-brand-default);background:var(--px-background-color-action-primary-inverted)}:host([inverted]) .btn:not(.secondary,.tertiary,.patch):hover:not([disabled],[aria-disabled=true],.loading){color:var(--px-text-color-heading-brand-inverted);background:var(--px-background-color-action-hover-bordered-inverted)}:host([inverted]) .btn:not(.secondary,.tertiary,.patch)[disabled],:host([inverted]) .btn:not(.secondary,.tertiary,.patch)[aria-disabled=true]{background:var(--px-background-color-action-disabled-inverted);color:var(--px-text-color-action-disabled-inverted)}:host([inverted]) .btn:not(.secondary,.tertiary,.patch).loading{background:var(--px-background-color-action-disabled-inverted);color:var(--px-text-color-heading-brand-inverted);border-color:transparent}:host([inverted]) .btn.secondary{color:var(--px-text-color-heading-brand-inverted);background:var(--px-background-color-action-secondary-inverted)}:host([inverted]) .btn.secondary:hover:not([disabled],[aria-disabled=true],.loading){color:var(--px-text-color-heading-brand-inverted);background:var(--px-background-color-action-hover-bordered-inverted)}:host([inverted]) .btn.secondary[disabled],:host([inverted]) .btn.secondary[aria-disabled=true]{background:var(--px-background-color-action-disabled-inverted);color:var(--px-text-color-action-disabled-inverted)}:host([inverted]) .btn.secondary.loading{background:var(--px-background-color-action-disabled-inverted);color:var(--px-text-color-heading-brand-inverted);border-color:transparent}:host([inverted]) .btn.tertiary{color:var(--px-text-color-heading-brand-inverted)}:host([inverted]) .btn.tertiary ::slotted(px-icon){background:var(--px-background-color-action-secondary-inverted)}:host([inverted]) .btn.tertiary:hover:not([disabled],[aria-disabled=true],.loading) ::slotted(px-icon){background:transparent}:host([inverted]) .btn.tertiary[disabled],:host([inverted]) .btn.tertiary[aria-disabled=true]{color:var(--px-text-color-action-disabled-inverted)}:host([inverted]) .btn.tertiary[disabled] ::slotted(px-icon),:host([inverted]) .btn.tertiary[aria-disabled=true] ::slotted(px-icon){background:var(--px-background-color-action-disabled-inverted)}:host([inverted]) .btn.tertiary.loading{color:var(--px-text-color-heading-brand-inverted)}:host([inverted]) .btn.tertiary.loading ::slotted(px-spinner){background:var(--px-background-color-action-disabled-inverted)}:host([inverted]) .btn.patch:hover:not([disabled],[aria-disabled=true],.loading){color:var(--px-text-color-heading-brand-inverted);background:var( --px-background-color-action-hover-bordered-default-inverted )}:host([inverted]) .btn.patch[disabled],:host([inverted]) .btn.patch[aria-disabled=true]{background:var(--px-background-color-action-disabled-inverted);color:var(--px-text-color-action-disabled-inverted)}:host([inverted]) button.link[disabled],:host([inverted]) button.link[aria-disabled=true]{color:var(--px-text-color-action-disabled-inverted)}@media only screen and (min-width: 768px){.btn{font-size:var(--px-text-size-label-m-tablet);gap:var(--px-spacing-after-element-2xs-tablet)}.btn:focus:not([disabled],[aria-disabled=true]){outline-offset:var(--px-focus-offset-tablet);outline-width:var(--px-focus-outline-tablet)}.btn:not(.secondary,.tertiary,.patch){padding:var(--px-padding-xs-tablet) var(--px-padding-m-tablet)}.btn:not(.secondary,.tertiary,.patch) ::slotted([slot="after"]){margin-right:calc(var(--px-padding-xs-tablet) * -1)}.btn:not(.secondary,.tertiary,.patch) ::slotted([slot="before"]){margin-left:calc(var(--px-padding-xs-tablet) * -1)}.btn.secondary{padding:var(--px-padding-xs-tablet) var(--px-padding-m-tablet)}.btn.tertiary{padding:var(--px-padding-2xs-tablet) 0;gap:var(--px-spacing-after-element-xs-tablet)}.btn.tertiary ::slotted(px-icon){width:var(--px-icon-size-m-tablet);height:var(--px-icon-size-m-tablet)}.btn.tertiary:hover:not([disabled],[aria-disabled=true],.loading){padding:var(--px-padding-2xs-tablet) var(--px-padding-s-tablet)}.btn.tertiary.loading ::slotted(px-spinner){width:var(--px-icon-size-m-tablet);height:var(--px-icon-size-m-tablet)}}@media only screen and (min-width: 1025px){.btn{font-size:var(--px-text-size-label-m-desktop);gap:var(--px-spacing-after-element-2xs-desktop)}.btn:focus:not([disabled],[aria-disabled=true]){outline-offset:var(--px-focus-offset-desktop);outline-width:var(--px-focus-outline-desktop)}.btn:not(.secondary,.tertiary,.patch){padding:var(--px-padding-xs-desktop) var(--px-padding-m-desktop)}.btn:not(.secondary,.tertiary,.patch) ::slotted([slot="after"]){margin-right:calc(var(--px-padding-xs-desktop) * -1)}.btn:not(.secondary,.tertiary,.patch) ::slotted([slot="before"]){margin-left:calc(var(--px-padding-xs-desktop) * -1)}.btn.secondary{padding:var(--px-padding-xs-desktop) var(--px-padding-m-desktop)}.btn.tertiary{padding:var(--px-padding-2xs-desktop) 0;gap:var(--px-spacing-after-element-xs-desktop)}.btn.tertiary ::slotted(px-icon){width:var(--px-icon-size-m-desktop);height:var(--px-icon-size-m-desktop)}.btn.tertiary:hover:not([disabled],[aria-disabled=true],.loading){padding:var(--px-padding-2xs-desktop) var(--px-padding-s-desktop)}.btn.tertiary.loading ::slotted(px-spinner){width:var(--px-icon-size-m-desktop);height:var(--px-icon-size-m-desktop)}}@keyframes anim-spinner{0%{transform:rotate(0)}to{transform:rotate(360deg)}}', O = 'a,.link,::slotted(a){display:inline-flex;align-items:center;font-family:var(--px-font-family);font-size:var(--px-text-size-link-m-mobile);line-height:var(--px-line-height-m);font-weight:400;color:var(--px-text-color-heading-neutral-default)}a:hover,.link:hover{color:var(--px-text-color-action-hover-default)}a:focus,.link:focus{outline-offset:var(--px-focus-offset-mobile);outline:var(--px-focus-outline-mobile) solid var(--px-border-color-focus-outline-default)}a[aria-disabled=true],.link[aria-disabled=true]{cursor:default;pointer-events:none;color:var(--px-text-color-action-disabled-default)}a ::slotted([slot="after"]),.link ::slotted([slot="after"]){margin-left:var(--px-spacing-after-element-2xs-mobile)}a ::slotted(span[slot="after"]),a ::slotted(span[slot="before"]),.link ::slotted(span[slot="after"]),.link ::slotted(span[slot="before"]){display:inline-block}::slotted(a:hover){color:var(--px-text-color-action-hover-default)}a.no-style{color:inherit;text-decoration:none}a.no-style:hover,a.no-style:focus{color:inherit}a.skip-link{position:absolute;left:-10000px;top:auto;overflow:hidden;background-color:var(--px-background-color-container-weak);padding:var(--px-padding-xs-mobile)}a.skip-link:focus{left:auto;z-index:999}:host([inverted]) a,:host([inverted]) .link,:host([inverted]) ::slotted(a){color:var(--px-text-color-heading-neutral-inverted)}:host([inverted]) a:hover,:host([inverted]) .link:hover{color:var(--px-text-color-action-hover-inverted)}:host([inverted]) a:focus,:host([inverted]) .link:focus{outline-color:var(--px-border-color-focus-outline-inverted)}:host([inverted]) a[aria-disabled=true],:host([inverted]) .link[aria-disabled=true]{color:var(--px-text-color-action-disabled-inverted)}:host([inverted]) ::slotted(a:hover){color:var(--px-text-color-action-hover-inverted)}:host([inverted]) a.skip-link{background-color:var(--px-background-color-container-weak-inverted)}@media only screen and (min-width: 768px){a,.link,::slotted(a){font-size:var(--px-text-size-link-m-tablet)}a:focus,.link:focus{outline-offset:var(--px-focus-offset-tablet);outline-width:var(--px-focus-outline-tablet)}a ::slotted([slot="after"]),.link ::slotted([slot="after"]){margin-left:var(--px-spacing-after-element-2xs-tablet)}a.skip-link{padding:var(--px-padding-xs-tablet)}}@media only screen and (min-width: 1025px){a,.link,::slotted(a){font-size:var(--px-text-size-link-m-desktop)}a:focus,.link:focus{outline-offset:var(--px-focus-offset-desktop);outline-width:var(--px-focus-outline-desktop)}a ::slotted([slot="after"]),.link ::slotted([slot="after"]){margin-left:var(--px-spacing-after-element-2xs-desktop)}a.skip-link{padding:var(--px-padding-xs-desktop)}}', W = ".patch{display:inline-flex;align-items:center;padding:0 var(--px-padding-s-mobile);height:1.625rem;border:var(--px-border-size-m) solid transparent;border-radius:var(--px-radius-patch-big) var(--px-radius-patch-big) var(--px-radius-patch-big) var(--px-radius-patch-small);font-family:var(--px-font-family);font-weight:700;font-size:var(--px-text-size-label-m-mobile);line-height:var(--px-line-height-m);text-align:center;background-color:var(--px-background-color-purpose-promo-default);color:var(--px-text-color-action-neutral-inverted)}.patch,.patch *{box-sizing:border-box}.bottom-right{border-radius:var(--px-radius-patch-big) var(--px-radius-patch-big) var(--px-radius-patch-small) var(--px-radius-patch-big)}.bottom-left{border-radius:var(--px-radius-patch-big) var(--px-radius-patch-big) var(--px-radius-patch-big) var(--px-radius-patch-small)}.info{background-color:var(--px-background-color-purpose-info-default);color:var(--px-text-color-action-neutral-default)}.black-friday{background-color:var(--px-background-color-container-neutral-rich-default);color:var(--px-text-color-action-neutral-inverted)}.eco{background-color:var(--px-background-color-purpose-success-default);color:var(--px-text-color-action-neutral-inverted)}.greyed{background-color:var(--px-background-color-action-disabled-default);color:var(--px-text-color-action-disabled-default)}:host([inverted]) .patch{background-color:var(--px-background-color-purpose-promo-inverted);color:var(--px-text-color-action-neutral-inverted)}:host([inverted]) .info{background-color:var(--px-background-color-purpose-info-inverted);color:var(--px-text-color-action-neutral-default)}:host([inverted]) .black-friday{background-color:var(--px-background-color-container-neutral-bare-default);color:var(--px-text-color-action-neutral-default)}:host([inverted]) .eco{background-color:var(--px-background-color-purpose-success-inverted);color:var(--px-text-color-action-neutral-default)}:host([inverted]) .greyed{background-color:var(--px-background-color-action-disabled-inverted);color:var(--px-text-color-action-disabled-inverted)}@media only screen and (min-width: 768px){.patch{padding:0 var(--px-padding-s-tablet);font-size:var(--px-text-size-label-m-tablet)}}@media only screen and (min-width: 1025px){.patch{padding:0 var(--px-padding-s-desktop);font-size:var(--px-text-size-label-m-desktop)}}@media only screen and (min-width: 1441px){.patch{padding:0 var(--px-padding-s-desktop);font-size:var(--px-text-size-label-m-desktop)}}", y = new CSSStyleSheet(), A = new CSSStyleSheet(), $ = new CSSStyleSheet();
650
- y.replaceSync(G);
651
- A.replaceSync(O);
652
- $.replaceSync(W);
653
- const Y = [
585
+ x.nativeName = "div";
586
+ let p = x;
587
+ customElements.define("px-container", p);
588
+ const y = '.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,.actionable-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,.actionable-tag) ::slotted([slot="after"]){margin-right:calc(var(--px-padding-xs-mobile) * -1)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag) ::slotted([slot="before"]){margin-left:calc(var(--px-padding-xs-mobile) * -1)}.btn:not(.secondary,.tertiary,.patch,.actionable-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,.actionable-tag)[disabled],.btn:not(.secondary,.tertiary,.patch,.actionable-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,.actionable-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,.actionable-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-xs-mobile);height:var(--px-icon-size-xs-mobile);padding:4px;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;margin:0 -8px;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-xs-mobile);height:var(--px-icon-size-xs-mobile);padding:4px;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.actionable-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.actionable-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.actionable-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.actionable-tag[disabled],.btn.actionable-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,.actionable-tag){color:var(--px-text-color-heading-brand-default);background:var(--px-background-color-action-primary-inverted)}:host([inverted]) .btn:not(.secondary,.tertiary,.patch,.actionable-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,.actionable-tag)[disabled],:host([inverted]) .btn:not(.secondary,.tertiary,.patch,.actionable-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,.actionable-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.actionable-tag{background:var(--px-background-color-action-neutral-default);color:var(--px-text-color-action-brand-inverted);border-color:var(--px-border-color-action-neutral-inverted)}:host([inverted]) .btn.actionable-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.actionable-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.actionable-tag[disabled],:host([inverted]) .btn.actionable-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.actionable-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,.actionable-tag){padding:var(--px-padding-xs-tablet) var(--px-padding-m-tablet)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag) ::slotted([slot="after"]){margin-right:calc(var(--px-padding-xs-tablet) * -1)}.btn:not(.secondary,.tertiary,.patch,.actionable-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-xs-tablet);height:var(--px-icon-size-xs-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-xs-tablet);height:var(--px-icon-size-xs-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.actionable-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,.actionable-tag){padding:var(--px-padding-xs-desktop) var(--px-padding-m-desktop)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag) ::slotted([slot="after"]){margin-right:calc(var(--px-padding-xs-desktop) * -1)}.btn:not(.secondary,.tertiary,.patch,.actionable-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-xs-desktop);height:var(--px-icon-size-xs-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-xs-desktop);height:var(--px-icon-size-xs-desktop)}}@keyframes anim-spinner{0%{transform:rotate(0)}to{transform:rotate(360deg)}}', A = '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{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)}}', K = ".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)}}", Q = ":host{display:inline-block}.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)}}", z = new CSSStyleSheet(), $ = new CSSStyleSheet(), S = new CSSStyleSheet(), L = new CSSStyleSheet();
589
+ z.replaceSync(y);
590
+ $.replaceSync(A);
591
+ S.replaceSync(K);
592
+ L.replaceSync(Q);
593
+ const U = [
654
594
  "",
655
595
  "default",
656
596
  "secondary",
@@ -659,94 +599,109 @@ const Y = [
659
599
  "patch",
660
600
  "patch-info",
661
601
  "patch-black-friday",
662
- "patch-eco"
663
- ], g = class g extends m {
602
+ "patch-eco",
603
+ "actionable-tag"
604
+ ], X = [
605
+ "extended",
606
+ "extended--mobile",
607
+ "extended--tablet",
608
+ "extended--laptop"
609
+ ], v = class v extends h {
664
610
  constructor() {
665
- super(y, A, $), this.template = () => '<slot name="before"></slot><slot></slot><slot name="after"></slot>';
666
- const t = document.createElement(this.nativeName);
667
- t.classList.add("btn"), t.innerHTML = this.template(), this.shadowRoot.appendChild(t);
611
+ super(z, $, S, L), this.template = () => `<button class="btn">
612
+ <slot name="before"></slot><slot></slot><slot name="after"></slot>
613
+ </button>`, this.shadowRoot.innerHTML = this.template();
668
614
  }
669
615
  static get observedAttributes() {
670
616
  return [
671
617
  ...super.observedAttributes,
672
618
  "variant",
673
619
  "state",
674
- "extended",
675
620
  "loading",
676
621
  "shape",
677
- "inverted"
622
+ "inverted",
623
+ ...X
678
624
  ];
679
625
  }
680
626
  connectedCallback() {
681
627
  super.connectedCallback();
682
628
  const t = this.querySelectorAll("px-icon");
683
- t && t.forEach((r) => {
684
- const e = r.getAttribute("size"), o = r.getAttribute("color");
685
- r && (r.addEventListener("click", () => {
629
+ t && t.forEach((e) => {
630
+ const r = e.getAttribute("size"), o = e.getAttribute("color");
631
+ e && (e.addEventListener("click", () => {
686
632
  this.$el.focus();
687
- }), e || r.setAttribute("size", "xs"), o || r.setAttribute("color", "inherit"));
633
+ }), r || e.setAttribute("size", "xs"), o || e.setAttribute("color", "inherit"));
634
+ }), O(this, this.$el), this.$el.type === "submit" && this.addEventListener("click", (e) => {
635
+ var r;
636
+ e.preventDefault(), (r = this.closest("form")) == null || r.submit();
637
+ }), this.$el.type === "reset" && this.addEventListener("click", (e) => {
638
+ var r;
639
+ e.preventDefault(), (r = this.closest("form")) == null || r.reset();
688
640
  });
689
641
  }
690
- attributeChangedCallback(t, r, e) {
691
- if (r !== e)
642
+ attributeChangedCallback(t, e, r) {
643
+ if (e !== r)
692
644
  switch (t) {
693
645
  case "variant":
694
- this.updateVariant(r, e, Y);
646
+ this.updateVariant(e, r, U);
695
647
  break;
696
648
  case "state":
697
- this.updateState(r, e);
649
+ this.updateState(e, r);
698
650
  break;
699
651
  case "extended":
700
- this.updateExtended();
652
+ case "extended--mobile":
653
+ case "extended--tablet":
654
+ case "extended--laptop":
655
+ this.updateExtended(t, r);
701
656
  break;
702
657
  case "loading":
703
658
  this.updateLoading();
704
659
  break;
705
660
  case "shape":
706
- this.updateShape(r, e);
661
+ this.updateShape(e, r);
707
662
  break;
708
663
  default:
709
- super.attributeChangedCallback(t, r, e);
664
+ super.attributeChangedCallback(t, e, r);
710
665
  break;
711
666
  }
712
667
  }
713
- checkName(t, r) {
714
- return !!t.includes(r);
668
+ checkName(t, e) {
669
+ return !!t.includes(e);
715
670
  }
716
671
  checkClass(t) {
717
672
  if (t.startsWith("patch-")) {
718
- const r = t.split(/-(.*)/s);
719
- for (const e of r)
720
- e != "" && this.$el.classList.toggle(e);
673
+ const e = t.split(/-(.*)/s);
674
+ for (const r of e)
675
+ r != "" && this.$el.classList.toggle(r);
721
676
  } else
722
677
  this.$el.classList.toggle(t);
723
678
  }
724
- _toggleClass(t, r) {
725
- t !== null && t !== "" && t !== "default" && this.checkClass(t), r !== null && r !== "" && r !== "default" && this.checkClass(r);
679
+ _toggleClass(t, e) {
680
+ t !== null && t !== "" && t !== "default" && this.checkClass(t), e !== null && e !== "" && e !== "default" && this.checkClass(e);
726
681
  }
727
- updateVariant(t, r, e) {
728
- r === "link" ? this.$el.classList.remove("btn") : this.$el.classList.add("btn"), this._toggleClass(t, r), this.checkName(e, r) || console.error(`Bad "variant" value for ${this.$el}`);
682
+ updateVariant(t, e, r) {
683
+ e === "link" ? this.$el.classList.remove("btn") : this.$el.classList.add("btn"), this._toggleClass(t, e), this.checkName(r, e) || console.error(`Bad "variant" value for ${this.$el}`);
729
684
  }
730
- updateState(t, r) {
731
- const e = ["", "default", "success", "error"];
732
- this._toggleClass(t, r), this.checkName(e, r) || console.error(`Bad "sate" value for ${this.$el}`);
685
+ updateState(t, e) {
686
+ const r = ["", "default", "success", "error"];
687
+ this._toggleClass(t, e), this.checkName(r, e) || console.error(`Bad "sate" value for ${this.$el}`);
733
688
  }
734
- updateExtended() {
735
- this.$el.classList.toggle("extended");
689
+ updateExtended(t, e) {
690
+ e === null ? this.$el.style.setProperty(`--button-${t}`, "") : this.$el.style.setProperty(`--button-${t}`, "100%");
736
691
  }
737
692
  updateLoading() {
738
693
  const t = this.querySelector("px-spinner");
739
694
  t && (t.getAttribute("size") || t.setAttribute("size", "xs")), this.$el.classList.toggle("loading");
740
695
  }
741
- updateShape(t, r) {
742
- const e = [
696
+ updateShape(t, e) {
697
+ const r = [
743
698
  "",
744
699
  "default",
745
700
  "bottom-right",
746
701
  "bottom-left",
747
702
  "alternative"
748
703
  ];
749
- this._toggleClass(t, r), this.checkName(e, r) || console.error(`Bad "shape" value for ${this.$el}`);
704
+ this._toggleClass(t, e), this.checkName(r, e) || console.error(`Bad "shape" value for ${this.$el}`);
750
705
  }
751
706
  get variant() {
752
707
  return this.getAttribute("variant");
@@ -766,6 +721,24 @@ const Y = [
766
721
  set extended(t) {
767
722
  this.setAttribute("extended", t);
768
723
  }
724
+ get extendedMobile() {
725
+ return this.getAttribute("extended--mobile");
726
+ }
727
+ set extendedMobile(t) {
728
+ this.setAttribute("extended--mobile", t);
729
+ }
730
+ get extendedTablet() {
731
+ return this.getAttribute("extended--tablet");
732
+ }
733
+ set extendedTablet(t) {
734
+ this.setAttribute("extended--tablet", t);
735
+ }
736
+ get extendedLaptop() {
737
+ return this.getAttribute("extended--laptop");
738
+ }
739
+ set extendedLaptop(t) {
740
+ this.setAttribute("extended--laptop", t);
741
+ }
769
742
  get loading() {
770
743
  return this.getAttribute("loading");
771
744
  }
@@ -785,16 +758,16 @@ const Y = [
785
758
  this.setAttribute("inverted", t);
786
759
  }
787
760
  };
788
- g.nativeName = "button";
789
- let p = g;
790
- customElements.get("px-button") || customElements.define("px-button", p);
791
- const N = ":host,:host *{box-sizing:border-box}:host .content-wrapper{margin-inline:var(--px-padding-s-mobile);max-width:1200px}@media only screen and (min-width: 1232px){:host .content-wrapper{margin-inline:auto}}", S = new CSSStyleSheet();
792
- S.replaceSync(N);
793
- class J extends HTMLElement {
761
+ v.nativeName = "button";
762
+ let g = v;
763
+ customElements.get("px-button") || customElements.define("px-button", g);
764
+ const Z = ':host{display:block}:host,:host *{box-sizing:border-box}.content-wrapper{margin-inline:var(--px-padding-s-mobile);max-width:1200px}@media only screen and (min-width: 1232px){.content-wrapper{margin-inline:auto}}.overlapped{margin-bottom:calc(var(--px-spacing-inside-section-overlapped-mobile) * -1)}::slotted([slot="overlap"]){margin-top:var(--px-spacing-inside-section-overlapped-mobile)}@media only screen and (min-width: 768px){.overlapped{margin-bottom:calc(var(--px-spacing-inside-section-overlapped-tablet) * -1)}::slotted([slot="overlap"]){margin-top:var(--px-spacing-inside-section-overlapped-tablet)}}@media only screen and (min-width: 1025px){.overlapped{margin-bottom:calc(var(--px-spacing-inside-section-overlapped-desktop) * -1)}::slotted([slot="overlap"]){margin-top:var(--px-spacing-inside-section-overlapped-desktop)}}', T = new CSSStyleSheet();
765
+ T.replaceSync(Z);
766
+ class D extends HTMLElement {
794
767
  constructor() {
795
768
  super(), this.template = () => `
796
769
  <px-container border-radius="none" padding-inline="none" background-color="${this.backgroundColor}">
797
- <div class="content-wrapper">
770
+ <div class="content-wrapper ${this.$slotOverlap ? "overlapped" : ""}">
798
771
  <px-vstack gap="heading-to-content">
799
772
  <slot name="heading"></slot>
800
773
  <px-vstack gap="after-element-none">
@@ -803,7 +776,10 @@ class J extends HTMLElement {
803
776
  </px-vstack>
804
777
  </div>
805
778
  </px-container>
806
- `, this.attachShadow({ mode: "open" }), this.shadowRoot.innerHTML = this.template(), this.shadowRoot.adoptedStyleSheets = [S];
779
+ <div class="content-wrapper">
780
+ <slot name="overlap"></slot>
781
+ </div>
782
+ `, this.attachShadow({ mode: "open" }), this.shadowRoot.innerHTML = this.template(), this.shadowRoot.adoptedStyleSheets = [T];
807
783
  }
808
784
  connectedCallback() {
809
785
  const t = this.querySelector('[slot="heading"]');
@@ -841,86 +817,89 @@ class J extends HTMLElement {
841
817
  get $container() {
842
818
  return this.shadowRoot.querySelector("px-container");
843
819
  }
844
- attributeChangedCallback(t, r, e) {
845
- if (r !== e)
820
+ attributeChangedCallback(t, e, r) {
821
+ if (e !== r)
846
822
  switch (t) {
847
823
  case "background-color":
848
- this.$container.backgroundColor = x.indexOf(e) > 0 ? e : "none";
824
+ this.$container.backgroundColor = k.indexOf(r) > 0 ? r : "none";
849
825
  break;
850
826
  case "background-gradient":
851
827
  this.$container.gradient = this.gradient;
852
828
  break;
853
829
  case "background-image":
854
- this.$container.backgroundImage = e;
830
+ this.$container.backgroundImage = r;
855
831
  break;
856
832
  case "background-image--mobile":
857
- this.$container.backgroundImageMobile = e;
833
+ this.$container.backgroundImageMobile = r;
858
834
  break;
859
835
  case "background-image--tablet":
860
- this.$container.backgroundImageTablet = e;
836
+ this.$container.backgroundImageTablet = r;
861
837
  break;
862
838
  case "background-image--laptop":
863
- this.$container.backgroundImageLaptop = e;
839
+ this.$container.backgroundImageLaptop = r;
864
840
  break;
865
841
  case "background-size":
866
- this.$container.backgroundSize = e;
842
+ this.$container.backgroundSize = r;
867
843
  break;
868
844
  case "background-position":
869
- this.$container.backgroundPosition = e;
845
+ this.$container.backgroundPosition = r;
870
846
  break;
871
847
  case "padding-block":
872
- this.$container.paddingBlock = e;
848
+ this.$container.paddingBlock = r;
873
849
  break;
874
850
  case "padding-top":
875
- this.$container.paddingTop = e;
851
+ this.$container.paddingTop = r;
876
852
  break;
877
853
  case "padding-bottom":
878
- this.$container.paddingBottom = e;
854
+ this.$container.paddingBottom = r;
879
855
  break;
880
856
  case "padding-block--mobile":
881
- this.$container.paddingBlockMobile = e;
857
+ this.$container.paddingBlockMobile = r;
882
858
  break;
883
859
  case "padding-top--mobile":
884
- this.$container.paddingTopMobile = e;
860
+ this.$container.paddingTopMobile = r;
885
861
  break;
886
862
  case "padding-bottom--mobile":
887
- this.$container.paddingBottomMobile = e;
863
+ this.$container.paddingBottomMobile = r;
888
864
  break;
889
865
  case "padding-block--tablet":
890
- this.$container.paddingBlockTablet = e;
866
+ this.$container.paddingBlockTablet = r;
891
867
  break;
892
868
  case "padding-top--tablet":
893
- this.$container.paddingTopTablet = e;
869
+ this.$container.paddingTopTablet = r;
894
870
  break;
895
871
  case "padding-bottom--tablet":
896
- this.$container.paddingBottomTablet = e;
872
+ this.$container.paddingBottomTablet = r;
897
873
  break;
898
874
  case "padding-block--laptop":
899
- this.$container.paddingBlockLaptop = e;
875
+ this.$container.paddingBlockLaptop = r;
900
876
  break;
901
877
  case "padding-top--laptop":
902
- this.$container.paddingTopLaptop = e;
878
+ this.$container.paddingTopLaptop = r;
903
879
  break;
904
880
  case "padding-bottom--laptop":
905
- this.$container.paddingBottomLaptop = e;
881
+ this.$container.paddingBottomLaptop = r;
906
882
  break;
907
883
  case "border":
908
- this.$container.border = e;
884
+ this.$container.border = r;
909
885
  break;
910
886
  case "border-side":
911
- this.$container.borderSide = e;
887
+ this.$container.borderSide = r;
912
888
  break;
913
889
  case "border-side--mobile":
914
- this.$container.borderSideMobile = e;
890
+ this.$container.borderSideMobile = r;
915
891
  break;
916
892
  case "border-side--tablet":
917
- this.$container.borderSideTablet = e;
893
+ this.$container.borderSideTablet = r;
918
894
  break;
919
895
  case "border-side--laptop":
920
- this.$container.borderSideLaptop = e;
896
+ this.$container.borderSideLaptop = r;
921
897
  break;
922
898
  }
923
899
  }
900
+ get $slotOverlap() {
901
+ return this.querySelector('[slot="overlap"]');
902
+ }
924
903
  get backgroundColor() {
925
904
  return this.getAttribute("background-color") || "none";
926
905
  }
@@ -1072,14 +1051,14 @@ class J extends HTMLElement {
1072
1051
  this.setAttribute("border-side--laptop", t);
1073
1052
  }
1074
1053
  }
1075
- customElements.define("px-section", J);
1076
- const K = ":host>*{padding:2rem 0;cursor:pointer}button{margin:0;padding:0;border:0;border-bottom:2px solid rgba(0,0,0,0);outline:0;background:inherit;font-family:var(--px-font-family);font-size:1rem}button[aria-expanded=true],button:focus{outline:0;font-weight:700;border-bottom:2px solid var(--px-background-color-action-primary-default);color:var(--px-background-color-action-primary-default)}button:hover{font-weight:700;color:var(--px-background-color-action-primary-default)}px-a{height:100%;display:block}px-a:hover{font-weight:700;color:var(--px-background-color-action-primary-default)}", L = new CSSStyleSheet();
1077
- L.replaceSync(K);
1078
- class Q extends v {
1054
+ customElements.define("px-section", D);
1055
+ const V = ":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:var(--px-text-size-label-l-mobile)}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)}@media screen and (min-width: 1024px){button{font-size:var(--px-text-size-label-l-desktop)}}px-a{height:100%;display:block}px-a:hover{font-weight:700;color:var(--px-background-color-action-primary-default)}", C = new CSSStyleSheet();
1056
+ C.replaceSync(V);
1057
+ class tt extends m {
1079
1058
  constructor() {
1080
- super(), this.template = () => `${this.getAttribute("href") ? `<px-a variant="no-style" href="${this.getAttribute("href")}">
1059
+ super(), this.template = () => `${this.getAttribute("href") ? `<px-a font-size="body-l" variant="no-style" href="${this.getAttribute("href")}">
1081
1060
  <slot></slot>
1082
- </px-a>` : "<button><slot></slot></button>"}`, this.shadowRoot.innerHTML = this.template(), this.shadowRoot.adoptedStyleSheets = [L];
1061
+ </px-a>` : "<button><slot></slot></button>"}`, this.shadowRoot.innerHTML = this.template(), this.shadowRoot.adoptedStyleSheets = [C];
1083
1062
  }
1084
1063
  static get observedAttributes() {
1085
1064
  return ["for", "href"];
@@ -1087,8 +1066,8 @@ class Q extends v {
1087
1066
  connectedCallback() {
1088
1067
  this.setAttribute("slot", "header-entries"), this.$button && this.setupButtonA11y();
1089
1068
  }
1090
- attributeChangedCallback(t, r, e) {
1091
- super.attributeChangedCallback(t, r, e), t === "href" && this.$button && e ? this.shadowRoot.innerHTML = this.template() : t === "for" && this.$a && e && (this.shadowRoot.innerHTML = this.template(), this.setupButtonA11y());
1069
+ attributeChangedCallback(t, e, r) {
1070
+ super.attributeChangedCallback(t, e, r), t === "href" && this.$button && r ? this.shadowRoot.innerHTML = this.template() : t === "for" && this.$a && r && (this.shadowRoot.innerHTML = this.template(), this.setupButtonA11y());
1092
1071
  }
1093
1072
  setupButtonA11y() {
1094
1073
  this.$button.setAttribute("tabindex", "0"), this.$button.role = "menuitem", this.$button.ariaExpanded = "false", this.$button.ariaHasPopup = "menu";
@@ -1114,23 +1093,177 @@ class Q extends v {
1114
1093
  return this.shadowRoot.querySelector("px-a");
1115
1094
  }
1116
1095
  }
1117
- customElements.get("px-header-item") || customElements.define("px-header-item", Q);
1118
- const U = "#panel-container{position:absolute;left:0;right:0;z-index:2}@media screen and (max-width: 767px){#panel-container{top:0;border-top:none}}#backdrop-filter{position:absolute;display:none;z-index:1;left:0;width:100vw;height:100%;background:#0000004d;-webkit-backdrop-filter:saturate(180%) blur(15px);backdrop-filter:saturate(180%) blur(15px)}@media screen and (max-width: 767px){slot[name=header-entries]{display:none}}@media screen and (min-width: 768px){px-button-icon{display:none}}", T = new CSSStyleSheet();
1119
- T.replaceSync(U);
1120
- class X extends v {
1096
+ customElements.get("px-header-item") || customElements.define("px-header-item", tt);
1097
+ const et = ":host>*:first-child{--font-weight-light: 300;--font-weight-regular: 400;--font-weight-bold: 700;--font-weight-extrabold: 900}.color-inherit{color:inherit}.color-action-brand{color:var(--px-text-color-action-brand-default)}.color-action-neutral{color:var(--px-text-color-action-neutral-default)}.color-action-hover{color:var(--px-text-color-action-hover-default)}.color-action-active{color:var(--px-text-color-action-active-default)}.color-action-disabled{color:var(--px-text-color-action-disabled-default)}.color-body-neutral-strong{color:var(--px-text-color-body-neutral-strong-default)}.color-body-neutral-weak{color:var(--px-text-color-body-neutral-weak-default)}.color-heading-brand{color:var(--px-text-color-heading-brand-default)}.color-heading-neutral{color:var(--px-text-color-heading-neutral-default)}.color-purpose-success{color:var(--px-text-color-purpose-success-default)}.color-purpose-warning{color:var(--px-text-color-purpose-warning-default)}.color-purpose-error{color:var(--px-text-color-purpose-error-default)}.color-purpose-unlimited{color:var(--px-text-color-purpose-unlimited-default)}.color-purpose-promo{color:var(--px-text-color-purpose-promo-default)}:host([inverted]) .color-inherit{color:inherit}:host([inverted]) .color-action-brand{color:var(--px-text-color-action-brand-inverted)}:host([inverted]) .color-action-neutral{color:var(--px-text-color-action-neutral-inverted)}:host([inverted]) .color-action-hover{color:var(--px-text-color-action-hover-inverted)}:host([inverted]) .color-action-active{color:var(--px-text-color-action-active-inverted)}:host([inverted]) .color-action-disabled{color:var(--px-text-color-action-disabled-inverted)}:host([inverted]) .color-body-neutral-strong{color:var(--px-text-color-body-neutral-strong-inverted)}:host([inverted]) .color-body-neutral-weak{color:var(--px-text-color-body-neutral-weak-inverted)}:host([inverted]) .color-heading-brand{color:var(--px-text-color-heading-brand-inverted)}:host([inverted]) .color-heading-neutral{color:var(--px-text-color-heading-neutral-inverted)}:host([inverted]) .color-purpose-success{color:var(--px-text-color-purpose-success-inverted)}:host([inverted]) .color-purpose-warning{color:var(--px-text-color-purpose-warning-inverted)}:host([inverted]) .color-purpose-error{color:var(--px-text-color-purpose-error-inverted)}:host([inverted]) .color-purpose-unlimited{color:var(--px-text-color-purpose-unlimited-inverted)}:host([inverted]) .color-purpose-promo{color:var(--px-text-color-purpose-promo-inverted)}.font-size-inherit{font-size:inherit;line-height:inherit}.font-size-body-l{font-size:var(--px-text-size-body-l-mobile)}.font-size-body-m{font-size:var(--px-text-size-body-m-mobile)}.font-size-body-s{font-size:var(--px-text-size-body-s-mobile)}.font-size-body-xs{font-size:var(--px-text-size-body-xs-mobile)}.font-size-heading-5xl{font-size:var(--px-text-size-heading-5xl-mobile)}.font-size-heading-4xl{font-size:var(--px-text-size-heading-4xl-mobile)}.font-size-heading-3xl{font-size:var(--px-text-size-heading-3xl-mobile)}.font-size-heading-2xl{font-size:var(--px-text-size-heading-2xl-mobile)}.font-size-heading-xl{font-size:var(--px-text-size-heading-xl-mobile)}.font-size-heading-l{font-size:var(--px-text-size-heading-l-mobile)}.font-size-heading-m{font-size:var(--px-text-size-heading-m-mobile)}.font-size-heading-s{font-size:var(--px-text-size-heading-s-mobile)}@media only screen and (min-width: 768px){.font-size-body-l{font-size:var(--px-text-size-body-l-tablet)}.font-size-body-m{font-size:var(--px-text-size-body-m-tablet)}.font-size-body-s{font-size:var(--px-text-size-body-s-tablet)}.font-size-body-xs{font-size:var(--px-text-size-body-xs-tablet)}.font-size-heading-5xl{font-size:var(--px-text-size-heading-5xl-tablet)}.font-size-heading-4xl{font-size:var(--px-text-size-heading-4xl-tablet)}.font-size-heading-3xl{font-size:var(--px-text-size-heading-3xl-tablet)}.font-size-heading-2xl{font-size:var(--px-text-size-heading-2xl-tablet)}.font-size-heading-xl{font-size:var(--px-text-size-heading-xl-tablet)}.font-size-heading-l{font-size:var(--px-text-size-heading-l-tablet)}.font-size-heading-m{font-size:var(--px-text-size-heading-m-tablet)}.font-size-heading-s{font-size:var(--px-text-size-heading-s-tablet)}}@media only screen and (min-width: 1025px){.font-size-body-l{font-size:var(--px-text-size-body-l-desktop)}.font-size-body-m{font-size:var(--px-text-size-body-m-desktop)}.font-size-body-s{font-size:var(--px-text-size-body-s-desktop)}.font-size-body-xs{font-size:var(--px-text-size-body-xs-desktop)}.font-size-heading-5xl{font-size:var(--px-text-size-heading-5xl-desktop)}.font-size-heading-4xl{font-size:var(--px-text-size-heading-4xl-desktop)}.font-size-heading-3xl{font-size:var(--px-text-size-heading-3xl-desktop)}.font-size-heading-2xl{font-size:var(--px-text-size-heading-2xl-desktop)}.font-size-heading-xl{font-size:var(--px-text-size-heading-xl-desktop)}.font-size-heading-l{font-size:var(--px-text-size-heading-l-desktop)}.font-size-heading-m{font-size:var(--px-text-size-heading-m-desktop)}.font-size-heading-s{font-size:var(--px-text-size-heading-s-desktop)}}.font-weight-inherit{font-weight:inherit}.font-weight-normal{font-weight:var(--font-weight-regular)}.font-weight-bold{font-weight:var(--font-weight-bold)}.font-weight-extrabold{font-weight:var(--font-weight-extrabold)}.font-weight-light{font-weight:var(--font-weight-light)}", B = new CSSStyleSheet(), M = new CSSStyleSheet(), w = new CSSStyleSheet();
1098
+ B.replaceSync(A);
1099
+ M.replaceSync(y);
1100
+ w.replaceSync(et);
1101
+ const rt = [
1102
+ "link",
1103
+ "no-style",
1104
+ "skip-link",
1105
+ "btn-default",
1106
+ "btn-secondary",
1107
+ "btn-tertiary"
1108
+ ], ot = ["", "default", "alternative"], f = class f extends h {
1109
+ constructor() {
1110
+ super(B, M, w), this.template = () => '<slot name="before"></slot><slot></slot><slot name="after"></slot>';
1111
+ const t = document.createElement(this.nativeName);
1112
+ t.innerHTML = this.template(), this.shadowRoot.appendChild(t);
1113
+ }
1114
+ static get observedAttributes() {
1115
+ return [
1116
+ ...super.observedAttributes,
1117
+ "disabled",
1118
+ "variant",
1119
+ "shape",
1120
+ "extended",
1121
+ "inverted",
1122
+ "font-size",
1123
+ "color",
1124
+ "font-weight"
1125
+ ];
1126
+ }
1127
+ connectedCallback() {
1128
+ super.connectedCallback();
1129
+ const t = this.querySelectorAll("px-icon");
1130
+ t && t.forEach((e) => {
1131
+ const r = e.getAttribute("size"), o = e.getAttribute("color");
1132
+ e && (e.addEventListener("click", () => {
1133
+ this.$el.focus();
1134
+ }), r || e.setAttribute("size", "2xs"), o || e.setAttribute("color", "inherit"));
1135
+ });
1136
+ }
1137
+ attributeChangedCallback(t, e, r) {
1138
+ if (e !== r)
1139
+ switch (t) {
1140
+ case "disabled":
1141
+ this.$el.toggleAttribute("aria-disabled"), r !== null && this.$el.setAttribute("aria-disabled", "true");
1142
+ break;
1143
+ case "variant":
1144
+ this.updateVariant(e, r);
1145
+ break;
1146
+ case "shape":
1147
+ this.updateShape(e, r);
1148
+ break;
1149
+ case "extended":
1150
+ this.$el.classList.toggle(t);
1151
+ break;
1152
+ case "font-size":
1153
+ this.updateTypography(t, e, r, N);
1154
+ break;
1155
+ case "color":
1156
+ this.updateTypography(t, e, r, G);
1157
+ break;
1158
+ case "font-weight":
1159
+ this.updateTypography(t, e, r, W);
1160
+ break;
1161
+ default:
1162
+ super.attributeChangedCallback(t, e, r);
1163
+ break;
1164
+ }
1165
+ }
1166
+ checkName(t, e) {
1167
+ return t.includes(e);
1168
+ }
1169
+ _toggleClassList(t) {
1170
+ if (t.startsWith("btn-")) {
1171
+ const e = t.split("-");
1172
+ for (const r of e)
1173
+ this.$el.classList.toggle(r);
1174
+ } else
1175
+ this.$el.classList.toggle(t);
1176
+ }
1177
+ updateVariant(t, e) {
1178
+ t !== null && t !== "" && t !== "link" && this._toggleClassList(t), e !== null && e !== "" && e !== "link" && this._toggleClassList(e), this.checkName(rt, e) || console.error(`Bad "variant" value for ${this.$el}`);
1179
+ }
1180
+ updateShape(t, e) {
1181
+ t !== null && t !== "" && t !== "default" && this._toggleClassList(t), e !== null && e !== "" && e !== "default" && this._toggleClassList(e), this.checkName(ot, e) || console.error(`Bad "shape" value for ${this.$el}`);
1182
+ }
1183
+ updateTypography(t, e, r, o) {
1184
+ e !== null && e !== "" && e !== "default" && this.$el.classList.toggle(`${t}-${e}`), r !== null && r !== "" && r !== "default" && this.$el.classList.toggle(`${t}-${r}`), this.checkName(o, r) || console.error(`Bad ${t} value for ${this.$el}`);
1185
+ }
1186
+ get disabled() {
1187
+ return this.getAttribute("disabled");
1188
+ }
1189
+ set disabled(t) {
1190
+ this.setAttribute("disabled", t);
1191
+ }
1192
+ get variant() {
1193
+ return this.getAttribute("variant");
1194
+ }
1195
+ set variant(t) {
1196
+ this.setAttribute("variant", t);
1197
+ }
1198
+ get shape() {
1199
+ return this.getAttribute("shape");
1200
+ }
1201
+ set shape(t) {
1202
+ this.setAttribute("shape", t);
1203
+ }
1204
+ get extended() {
1205
+ return this.getAttribute("extended");
1206
+ }
1207
+ set extended(t) {
1208
+ this.setAttribute("extended", t);
1209
+ }
1210
+ get inverted() {
1211
+ return this.getAttribute("inverted");
1212
+ }
1213
+ set inverted(t) {
1214
+ this.setAttribute("inverted", t);
1215
+ }
1216
+ get fontsize() {
1217
+ return this.getAttribute("font-size");
1218
+ }
1219
+ set fontsize(t) {
1220
+ this.setAttribute("font-size", t);
1221
+ }
1222
+ get color() {
1223
+ return this.getAttribute("color");
1224
+ }
1225
+ set color(t) {
1226
+ this.setAttribute("color", t);
1227
+ }
1228
+ get fontweight() {
1229
+ return this.getAttribute("font-weight");
1230
+ }
1231
+ set fontweight(t) {
1232
+ this.setAttribute("font-weight", t);
1233
+ }
1234
+ };
1235
+ f.nativeName = "a";
1236
+ let u = f;
1237
+ customElements.get("px-a") || customElements.define("px-a", u);
1238
+ class it extends HTMLElement {
1239
+ constructor() {
1240
+ super(), this.template = `<px-a font-weight="bold" font-size="body-l" color="action-brand" variant="no-style">
1241
+ <slot></slot>
1242
+ </px-a>`, this.attachShadow({ mode: "open" }), this.shadowRoot.innerHTML = this.template;
1243
+ const t = this.shadowRoot.querySelector("px-a");
1244
+ t && Array.from(this.attributes).forEach((e) => {
1245
+ t.setAttribute(e.name, e.value);
1246
+ });
1247
+ }
1248
+ }
1249
+ customElements.get("px-mdd-a") || customElements.define("px-mdd-a", it);
1250
+ const at = "#panel-container{position:absolute;left:0;right:0;z-index:999}@media screen and (max-width: 767px){#panel-container{top:0;border-top:none}}#backdrop-filter{position:absolute;display:none;z-index:998;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}}", E = new CSSStyleSheet();
1251
+ E.replaceSync(at);
1252
+ class nt extends m {
1121
1253
  constructor() {
1122
1254
  var t;
1123
- super(T), this.template = `
1255
+ super(E), this.template = `
1124
1256
  <div id="navigation-items-container">
1257
+ <slot name="skip"></slot>
1125
1258
  <px-section padding-block--mobile="s" padding-block="none" background-color="none">
1126
- <px-hstack gap--tablet="2rem" gap="3rem" wrap="wrap" align-items="center">
1259
+ <px-hstack gap="after-element-default" wrap="wrap" align-items="center">
1127
1260
  <slot name="header-logo"></slot>
1128
1261
  <slot name="header-entries"></slot>
1129
1262
  <px-spacer></px-spacer>
1130
- <px-hstack gap--mobile="none" gap="1rem">
1263
+ <px-hstack gap--mobile="none" gap="after-element-default">
1131
1264
  <slot name="header-actions"></slot>
1132
- <px-button-icon>
1133
- <px-icon name="burger_menu" from="lavender"></px-icon
1265
+ <px-button-icon variant="naked">
1266
+ <px-icon name="burger_menu" from="lavender"></px-icon>
1134
1267
  </px-button-icon>
1135
1268
  </px-hstack>
1136
1269
  </px-hstack>
@@ -1145,17 +1278,17 @@ class X extends v {
1145
1278
  }
1146
1279
  connectedCallback() {
1147
1280
  this.addEventListener("click", (t) => {
1148
- const r = t.target.closest(
1281
+ const e = t.target.closest(
1149
1282
  "px-header-item"
1150
1283
  );
1151
- r && r.for && (this.$backdropFilter.style.display = "block", this.$navigationItems.forEach((e) => {
1152
- e.checked = !1;
1284
+ e && e.for && (this.$backdropFilter.style.display = "block", this.$navigationItems.forEach((r) => {
1285
+ r.checked = !1;
1153
1286
  }), t.target.checked = !0, this.i11yEnableActions(!1), this.togglePanel(t.target.for));
1154
1287
  }), this.shadowRoot.addEventListener("click", (t) => {
1155
1288
  t.target.closest("px-button-icon") && (this.$backdropFilter.style.display = "block", this.$burgerMenu.setAttribute("tabindex", "0"), this.togglePanel("__lavender_mobile_menu"));
1156
1289
  }), this.addEventListener("section-item-click", (t) => {
1157
- this.$backdropFilter.style.display = "block", this.$navigationItems.forEach((e) => {
1158
- e.checked = !1;
1290
+ this.$backdropFilter.style.display = "block", this.$navigationItems.forEach((r) => {
1291
+ r.checked = !1;
1159
1292
  }), t.detail.for !== "__lavender_mobile_menu" && (this.querySelector(
1160
1293
  `px-header-item[for="${t.detail.for}"]`
1161
1294
  ).checked = !0), this.i11yEnableActions(!1), this.togglePanel(t.detail.for);
@@ -1166,35 +1299,35 @@ class X extends v {
1166
1299
  }), this.createMobileMenuPanel();
1167
1300
  }
1168
1301
  createMobileMenuPanel() {
1169
- var r;
1302
+ var e;
1170
1303
  const t = `
1171
1304
  <px-mdd name="__lavender_mobile_menu">
1172
1305
  <span slot="title">Menu</span>
1173
1306
  <px-mdd-section>
1174
1307
  ${[...this.$navigationItems].map(
1175
- (e) => `<px-mdd-section-item for="${e.getAttribute("for")}">${e.innerText}</px-mdd-section-item>`
1308
+ (r) => `<px-mdd-section-item for="${r.getAttribute("for")}">${r.innerText}</px-mdd-section-item>`
1176
1309
  ).join("")}
1177
- ${[...this.$actionLinks].map(
1178
- (e) => `<px-a href="${e.href}" slot="footer">${e.innerText}</px-a>`
1310
+ ${[...this.$actionLinks].filter((r) => r.hasAttribute("promoted")).map(
1311
+ (r) => `<px-mdd-a href="${r.getAttribute("href")}" slot="footer">${r.innerText}</px-mdd-a>`
1179
1312
  ).join("")}
1180
1313
  </px-mdd>
1181
1314
  `;
1182
- (r = this.$megaDropdowns.item(0)) == null || r.insertAdjacentHTML("beforebegin", t);
1315
+ (e = this.$megaDropdowns.item(0)) == null || e.insertAdjacentHTML("beforebegin", t);
1183
1316
  }
1184
1317
  i11yEnableActions(t = !0) {
1185
1318
  this.querySelectorAll('[slot="header-actions"]').forEach(
1186
- (r) => {
1319
+ (e) => {
1187
1320
  if (t) {
1188
- r.removeAttribute("tabindex");
1321
+ e.removeAttribute("tabindex");
1189
1322
  return;
1190
1323
  }
1191
- r.setAttribute("tabindex", "-1");
1324
+ e.setAttribute("tabindex", "-1");
1192
1325
  }
1193
1326
  );
1194
1327
  }
1195
1328
  togglePanel(t) {
1196
- this.$megaDropdowns.forEach((r) => {
1197
- r.name === t && r.hidden && (r.hidden = !r.hidden, t !== "__lavender_mobile_menu" && (this.querySelector(`px-header-item[for="${t}"]`).checked = !r.hidden), document.body.style.overflow = r.hidden ? "auto" : "hidden"), r.name !== t && !r.hidden && (r.hidden = !0);
1329
+ this.$megaDropdowns.forEach((e) => {
1330
+ e.name === t && e.hidden && (e.hidden = !e.hidden, t !== "__lavender_mobile_menu" && (this.querySelector(`px-header-item[for="${t}"]`).checked = !e.hidden), document.body.style.overflow = e.hidden ? "auto" : "hidden"), e.name !== t && !e.hidden && (e.hidden = !0);
1198
1331
  });
1199
1332
  }
1200
1333
  hidePanel() {
@@ -1220,8 +1353,8 @@ class X extends v {
1220
1353
  return this.shadowRoot.querySelector("px-button-icon");
1221
1354
  }
1222
1355
  }
1223
- customElements.get("px-header") || customElements.define("px-header", X);
1356
+ customElements.get("px-header") || customElements.define("px-header", nt);
1224
1357
  export {
1225
- X as Header,
1226
- Q as HeaderItem
1358
+ nt as Header,
1359
+ tt as HeaderItem
1227
1360
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@proximus/lavender-header",
3
- "version": "1.0.0-alpha.5",
3
+ "version": "1.0.0-alpha.7",
4
4
  "description": "",
5
5
  "main": "dist/index.js",
6
6
  "exports": {
@@ -31,10 +31,16 @@
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",
37
+ "dist/*.svg",
38
+ "dist/*.ttf",
39
+ "dist/glyphmap.json",
40
+ "dist/*.d.ts"
35
41
  ]
36
42
  }
37
43
  }
38
44
  },
39
- "gitHead": "671fab7ee21d1c0ec6498b45b0bb2fd47e6e6c84"
45
+ "gitHead": "2b9483c5b64a064d0565f622a10b344397d25b59"
40
46
  }