@proximus/lavender 1.0.0-alpha.18 → 1.0.0-alpha.19

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 (4) hide show
  1. package/dist/lavender.cjs.js +1 -1
  2. package/dist/lavender.es.js +1140 -803
  3. package/dist/lavender.umd.js +1 -1
  4. package/package.json +2 -2
package/dist/lavender.es.js CHANGED
@@ -1,4 +1,4 @@
1
- const commonStyles = "::slotted(*[grow]){flex-grow:var(--flex-grow-value)}::slotted(*[shrink]){flex-shrink:var(--flex-shrink-value)}::slotted(*[basis]){flex-basis:var(--flex-basis-value)}::slotted(*[align-self]){align-self:var(--flex-align-self-value)}::slotted(*[grow-mobile]){flex-grow:var(--flex-grow-mobile-value)}::slotted(*[shrink-mobile]){flex-shrink:var(--flex-shrink-mobile-value)}::slotted(*[basis-mobile]){flex-basis:var(--flex-basis-mobile-value)}::slotted(*[align-self-mobile]){align-self:var(--flex-align-self-mobile-value)}@media screen and (min-width: 768px){::slotted(*[grow-tablet]){flex-grow:var(--flex-grow-tablet-value)}::slotted(*[shrink-tablet]){flex-shrink:var(--flex-shrink-tablet-value)}::slotted(*[basis-tablet]){flex-basis:var(--flex-basis-tablet-value)}::slotted(*[align-self-tablet]){align-self:var(--flex-align-self-tablet-value)}}@media screen and (min-width: 1025px){::slotted(*[grow-laptop]){flex-grow:var(--flex-grow-laptop-value)}::slotted(*[shrink-laptop]){flex-shrink:var(--flex-shrink-laptop-value)}::slotted(*[basis-laptop]){flex-basis:var(--flex-basis-laptop-value)}::slotted(*[align-self-laptop]){align-self:var(--flex-align-self-laptop-value)}}@media screen and (min-width: 1441px){::slotted(*[grow-desktop]){flex-grow:var(--flex-grow-desktop-value)}::slotted(*[shrink-desktop]){flex-shrink:var(--flex-shrink-desktop-value)}::slotted(*[basis-desktop]){flex-basis:var(--flex-basis-desktop-value)}::slotted(*[align-self-desktop]){align-self:var(--flex-align-self-desktop-value)}}@media only screen and (min-width: 0px) and (max-width: 767px){::slotted(*[hidden-mobile]){display:none}}@media only screen and (min-width: 768px) and (max-width: 1024px){::slotted(*[hidden-tablet]){display:none}}@media only screen and (min-width: 1025px) and (max-width: 1440px){::slotted(*[hidden-laptop]){display:none}}@media only screen and (min-width: 1441px){::slotted(*[hidden-desktop]){display:none}}";
1
+ const commonStyles = "::slotted(*[grow]){flex-grow:var(--flex-grow-value)}::slotted(*[shrink]){flex-shrink:var(--flex-shrink-value)}::slotted(*[basis]){flex-basis:var(--flex-basis-value)}::slotted(*[align-self]){align-self:var(--flex-align-self-value)}::slotted(*[grow--mobile]){flex-grow:var(--flex-grow--mobile-value)}::slotted(*[shrink--mobile]){flex-shrink:var(--flex-shrink--mobile-value)}::slotted(*[basis--mobile]){flex-basis:var(--flex-basis--mobile-value)}::slotted(*[align-self--mobile]){align-self:var(--flex-align-self--mobile-value)}@media screen and (min-width: 768px){::slotted(*[grow--tablet]){flex-grow:var(--flex-grow--tablet-value)}::slotted(*[shrink--tablet]){flex-shrink:var(--flex-shrink--tablet-value)}::slotted(*[basis--tablet]){flex-basis:var(--flex-basis--tablet-value)}::slotted(*[align-self--tablet]){align-self:var(--flex-align-self--tablet-value)}}@media screen and (min-width: 1025px){::slotted(*[grow--laptop]){flex-grow:var(--flex-grow--laptop-value)}::slotted(*[shrink--laptop]){flex-shrink:var(--flex-shrink--laptop-value)}::slotted(*[basis--laptop]){flex-basis:var(--flex-basis--laptop-value)}::slotted(*[align-self--laptop]){align-self:var(--flex-align-self--laptop-value)}}@media screen and (min-width: 1441px){::slotted(*[grow--desktop]){flex-grow:var(--flex-grow--desktop-value)}::slotted(*[shrink--desktop]){flex-shrink:var(--flex-shrink--desktop-value)}::slotted(*[basis--desktop]){flex-basis:var(--flex-basis--desktop-value)}::slotted(*[align-self--desktop]){align-self:var(--flex-align-self--desktop-value)}}@media only screen and (min-width: 0px) and (max-width: 767px){::slotted(*[hidden--mobile]){display:none}}@media only screen and (min-width: 768px) and (max-width: 1024px){::slotted(*[hidden--tablet]){display:none}}@media only screen and (min-width: 1025px) and (max-width: 1440px){::slotted(*[hidden--laptop]){display:none}}@media only screen and (min-width: 1441px){::slotted(*[hidden--desktop]){display:none}}";
2
2
  function getSupportedAttributeNames(htmlElementName) {
3
3
  const $element = document.createElement(htmlElementName);
4
4
  const inputPrototype = Object.getPrototypeOf($element);
@@ -10,24 +10,24 @@ class WithFlexAttributes extends HTMLElement {
10
10
  static get observedAttributes() {
11
11
  return [
12
12
  "grow",
13
- "grow-tablet",
14
- "grow-laptop",
15
- "grow-desktop",
13
+ "grow--tablet",
14
+ "grow--laptop",
15
+ "grow--desktop",
16
16
  "shrink",
17
- "shrink-mobile",
18
- "shrink-tablet",
19
- "shrink-laptop",
20
- "shrink-desktop",
17
+ "shrink--mobile",
18
+ "shrink--tablet",
19
+ "shrink--laptop",
20
+ "shrink--desktop",
21
21
  "basis",
22
- "basis-mobile",
23
- "basis-tablet",
24
- "basis-laptop",
25
- "basis-desktop",
22
+ "basis--mobile",
23
+ "basis--tablet",
24
+ "basis--laptop",
25
+ "basis--desktop",
26
26
  "align-self",
27
- "hidden-mobile",
28
- "hidden-tablet",
29
- "hidden-laptop",
30
- "hidden-desktop"
27
+ "hidden--mobile",
28
+ "hidden--tablet",
29
+ "hidden--laptop",
30
+ "hidden--desktop"
31
31
  ];
32
32
  }
33
33
  constructor(...adoptedStylesheets) {
@@ -51,18 +51,18 @@ class WithFlexAttributes extends HTMLElement {
51
51
  case "grow":
52
52
  case "shrink":
53
53
  case "basis":
54
- case "grow-mobile":
55
- case "grow-tablet":
56
- case "grow-laptop":
57
- case "grow-desktop":
58
- case "shrink-mobile":
59
- case "shrink-tablet":
60
- case "shrink-laptop":
61
- case "shrink-desktop":
62
- case "basis-mobile":
63
- case "basis-tablet":
64
- case "basis-laptop":
65
- case "basis-desktop":
54
+ case "grow--mobile":
55
+ case "grow--tablet":
56
+ case "grow--laptop":
57
+ case "grow--desktop":
58
+ case "shrink--mobile":
59
+ case "shrink--tablet":
60
+ case "shrink--laptop":
61
+ case "shrink--desktop":
62
+ case "basis--mobile":
63
+ case "basis--tablet":
64
+ case "basis--laptop":
65
+ case "basis--desktop":
66
66
  case "align-self":
67
67
  this.style.setProperty(`--flex-${name}-value`, newValue);
68
68
  break;
@@ -88,76 +88,76 @@ class WithFlexAttributes extends HTMLElement {
88
88
  this.setAttribute("basis", value);
89
89
  }
90
90
  get growMobile() {
91
- return this.getAttribute("grow-mobile");
91
+ return this.getAttribute("grow--mobile");
92
92
  }
93
93
  set growMobile(value) {
94
- this.setAttribute("grow-mobile", value);
94
+ this.setAttribute("grow--mobile", value);
95
95
  }
96
96
  get growTablet() {
97
- return this.getAttribute("grow-tablet");
97
+ return this.getAttribute("grow--tablet");
98
98
  }
99
99
  set growTablet(value) {
100
- this.setAttribute("grow-tablet", value);
100
+ this.setAttribute("grow--tablet", value);
101
101
  }
102
102
  get growLaptop() {
103
- return this.getAttribute("grow-laptop");
103
+ return this.getAttribute("grow--laptop");
104
104
  }
105
105
  set growLaptop(value) {
106
- this.setAttribute("grow-laptop", value);
106
+ this.setAttribute("grow--laptop", value);
107
107
  }
108
108
  get growDesktop() {
109
- return this.getAttribute("grow-desktop");
109
+ return this.getAttribute("grow--desktop");
110
110
  }
111
111
  set growDesktop(value) {
112
- this.setAttribute("grow-desktop", value);
112
+ this.setAttribute("grow--desktop", value);
113
113
  }
114
114
  get shrinkMobile() {
115
- return this.getAttribute("shrink-mobile");
115
+ return this.getAttribute("shrink--mobile");
116
116
  }
117
117
  set shrinkMobile(value) {
118
- this.setAttribute("shrink-mobile", value);
118
+ this.setAttribute("shrink--mobile", value);
119
119
  }
120
120
  get shrinkTablet() {
121
- return this.getAttribute("shrink-tablet");
121
+ return this.getAttribute("shrink--tablet");
122
122
  }
123
123
  set shrinkTablet(value) {
124
- this.setAttribute("shrink-tablet", value);
124
+ this.setAttribute("shrink--tablet", value);
125
125
  }
126
126
  get shrinkLaptop() {
127
- return this.getAttribute("shrink-laptop");
127
+ return this.getAttribute("shrink--laptop");
128
128
  }
129
129
  set shrinkLaptop(value) {
130
- this.setAttribute("shrink-laptop", value);
130
+ this.setAttribute("shrink--laptop", value);
131
131
  }
132
132
  get shrinkDesktop() {
133
- return this.getAttribute("shrink-desktop");
133
+ return this.getAttribute("shrink--desktop");
134
134
  }
135
135
  set shrinkDesktop(value) {
136
- this.setAttribute("shrink-desktop", value);
136
+ this.setAttribute("shrink--desktop", value);
137
137
  }
138
138
  get basisMobile() {
139
- return this.getAttribute("basis-mobile");
139
+ return this.getAttribute("basis--mobile");
140
140
  }
141
141
  set basisMobile(value) {
142
- this.setAttribute("basis-mobile", value);
142
+ this.setAttribute("basis--mobile", value);
143
143
  }
144
144
  get basisTablet() {
145
- return this.getAttribute("basis-tablet");
145
+ return this.getAttribute("basis--tablet");
146
146
  }
147
147
  set basisTablet(value) {
148
- this.setAttribute("basis-tablet", value);
148
+ this.setAttribute("basis--tablet", value);
149
149
  }
150
150
  get basisLaptop() {
151
- return this.getAttribute("basis-laptop");
151
+ return this.getAttribute("basis--laptop");
152
152
  }
153
153
  set basisLaptop(value) {
154
- this.setAttribute("basis-laptop", value);
154
+ this.setAttribute("basis--laptop", value);
155
155
  }
156
156
  get basisDesktop() {
157
- return this.getAttribute("basis-desktop");
157
+ return this.getAttribute("basis--desktop");
158
158
  }
159
159
  set basisDesktop(value) {
160
- this.setAttribute("basis-desktop", value);
160
+ this.setAttribute("basis--desktop", value);
161
161
  }
162
162
  get alignSelf() {
163
163
  return this.getAttribute("align-self");
@@ -169,28 +169,28 @@ class WithFlexAttributes extends HTMLElement {
169
169
  return this;
170
170
  }
171
171
  get hiddenMobile() {
172
- return this.getAttribute("hidden-mobile");
172
+ return this.getAttribute("hidden--mobile");
173
173
  }
174
174
  set hiddenMobile(value) {
175
- this.setAttribute("hidden-mobile", value);
175
+ this.setAttribute("hidden--mobile", value);
176
176
  }
177
177
  get hiddenTablet() {
178
- return this.getAttribute("hidden-tablet");
178
+ return this.getAttribute("hidden--tablet");
179
179
  }
180
180
  set hiddenTablet(value) {
181
- this.setAttribute("hidden-tablet", value);
181
+ this.setAttribute("hidden--tablet", value);
182
182
  }
183
183
  get hiddenLaptop() {
184
- return this.getAttribute("hidden-laptop");
184
+ return this.getAttribute("hidden--laptop");
185
185
  }
186
186
  set hiddenLaptop(value) {
187
- this.setAttribute("hidden-laptop", value);
187
+ this.setAttribute("hidden--laptop", value);
188
188
  }
189
189
  get hiddenDesktop() {
190
- return this.getAttribute("hidden-desktop");
190
+ return this.getAttribute("hidden--desktop");
191
191
  }
192
192
  set hiddenDesktop(value) {
193
- this.setAttribute("hidden-desktop", value);
193
+ this.setAttribute("hidden--desktop", value);
194
194
  }
195
195
  }
196
196
  class PxElement extends WithFlexAttributes {
@@ -233,39 +233,48 @@ class PxElement extends WithFlexAttributes {
233
233
  return this.shadowRoot.querySelector(this.nativeName);
234
234
  }
235
235
  }
236
- const gridGapValues = ["default", "none", "expanded"];
236
+ const gridGapValues = [
237
+ "",
238
+ "default",
239
+ "inside-section-none",
240
+ "inside-section-default",
241
+ "inside-section-l"
242
+ ];
237
243
  const fontsizeValues = [
238
244
  "",
239
245
  "default",
240
246
  "inherit",
241
- "xs",
242
- "s",
243
- "base",
244
- "m",
245
- "l",
246
- "xl",
247
- "2xl",
248
- "3xl",
249
- "4xl",
250
- "5xl",
251
- "6xl",
252
- "7xl"
247
+ "body-l",
248
+ "body-m",
249
+ "body-s",
250
+ "body-xs",
251
+ "heading-5xl",
252
+ "heading-4xl",
253
+ "heading-3xl",
254
+ "heading-2xl",
255
+ "heading-xl",
256
+ "heading-l",
257
+ "heading-m",
258
+ "heading-s"
253
259
  ];
254
- const colorValues$1 = [
260
+ const colorValues = [
255
261
  "",
256
262
  "default",
257
263
  "inherit",
258
- "primary",
259
- "body",
260
- "details",
261
- "hover",
262
- "disabled",
263
- "active",
264
- "promo",
265
- "success",
266
- "warning",
267
- "error",
268
- "unlimited"
264
+ "action-brand",
265
+ "action-neutral",
266
+ "action-hover",
267
+ "action-active",
268
+ "action-disabled",
269
+ "body-neutral-strong",
270
+ "body-neutral-weak",
271
+ "heading-brand",
272
+ "heading-neutral",
273
+ "purpose-success",
274
+ "purpose-warning",
275
+ "purpose-error",
276
+ "purpose-unlimited",
277
+ "purpose-promo"
269
278
  ];
270
279
  const fontweightValues = [
271
280
  "",
@@ -288,33 +297,58 @@ const iconSizeValues$1 = [
288
297
  "2xl"
289
298
  ];
290
299
  const textalignValues = ["", "default", "left", "center", "right"];
291
- const paddingValues = ["", "none", "2xs", "xs", "s", "m", "l", "xl"];
300
+ const paddingValues = ["", "none", "2xs", "xs", "s", "m", "l"];
292
301
  const borderValues = ["", "none", "s", "m", "l"];
293
302
  const borderRadiusValues = ["", "none", "main", "pill"];
294
- const bgColorValues = [
303
+ const borderColorValues = [
304
+ "none",
305
+ "container-main",
306
+ "container-brand",
307
+ "action-hover",
308
+ "action-active",
309
+ "action-neutral",
310
+ "purpose-success",
311
+ "purpose-warning",
312
+ "purpose-error",
313
+ "purpose-unlimited"
314
+ ];
315
+ const borderSideValues = [
316
+ "",
317
+ "all",
318
+ "top",
319
+ "right",
320
+ "bottom",
321
+ "left",
322
+ "block",
323
+ "inline"
324
+ ];
325
+ const backgroundColorValues = [
295
326
  "",
296
- "container-none",
327
+ "none",
328
+ "container-neutral-bare",
297
329
  "container-weak",
298
- "container-moderate",
299
- "container-strong",
300
- "container-rich",
301
- "container-main",
330
+ "container-light",
331
+ "container-soft",
332
+ "container-neutral-rich",
333
+ "container-brand-secondary",
302
334
  "action-primary",
303
335
  "action-secondary",
304
- "action-hover-bordered",
305
336
  "action-hover",
306
- "action-disabled",
337
+ "action-hover-bordered",
307
338
  "action-active",
339
+ "action-disabled",
308
340
  "action-neutral",
309
341
  "action-neutral-hover",
310
- "notification",
311
- "promo",
312
- "success",
313
- "error",
314
- "warning",
315
- "unlimited"
342
+ "purpose-success",
343
+ "purpose-warning",
344
+ "purpose-error",
345
+ "purpose-unlimited",
346
+ "purpose-promo",
347
+ "purpose-info",
348
+ "purpose-eco",
349
+ "purpose-notification"
316
350
  ];
317
- const shadowValues = ["", "none", "s", "m", "l", "xl"];
351
+ const boxShadowValues = ["", "none", "s", "m", "l", "xl"];
318
352
  const headingValues = [
319
353
  "",
320
354
  "default",
@@ -329,12 +363,12 @@ const headingValues = [
329
363
  ];
330
364
  const gradientValues = [
331
365
  "",
332
- "purple-bottom-red",
333
- "purple-bottom-magenta",
334
- "purple-bottom-orange",
335
- "purple-bottom-blue",
336
- "purple-bottom-turquoise",
337
- "purple-bottom-green",
366
+ "purple-top-red",
367
+ "purple-top-magenta",
368
+ "purple-top-orange",
369
+ "purple-top-blue",
370
+ "purple-top-turquoise",
371
+ "purple-top-green",
338
372
  "purple-right-red",
339
373
  "purple-right-magenta",
340
374
  "purple-right-orange",
@@ -353,12 +387,12 @@ const gradientValues = [
353
387
  "purple-bottom-right-blue",
354
388
  "purple-bottom-right-turquoise",
355
389
  "purple-bottom-right-green",
356
- "color-bottom-red",
357
- "color-bottom-magenta",
358
- "color-bottom-orange",
359
- "color-bottom-blue",
360
- "color-bottom-turquoise",
361
- "color-bottom-green",
390
+ "color-top-red",
391
+ "color-top-magenta",
392
+ "color-top-orange",
393
+ "color-top-blue",
394
+ "color-top-turquoise",
395
+ "color-top-green",
362
396
  "color-right-red",
363
397
  "color-right-magenta",
364
398
  "color-right-orange",
@@ -403,37 +437,24 @@ function getViewportFormat() {
403
437
  return "mobile";
404
438
  }
405
439
  }
406
- const styles$d = ".flex-container{display:flex;height:100%;width:100%;box-sizing:border-box;flex-direction:var(--flex-direction-mobile-value);gap:var(--flex-gap-mobile-value);flex-wrap:var(--flex-wrap-mobile-value);justify-content:var(--flex-justify-content-mobile-value);align-items:var(--flex-align-items-mobile-value)}@media screen and (min-width: 768px){.flex-container{flex-direction:var(--flex-direction-tablet-value);gap:var(--flex-gap-tablet-value);flex-wrap:var(--flex-wrap-tablet-value);justify-content:var(--flex-justify-content-tablet-value);align-items:var(--flex-align-items-tablet-value)}}@media screen and (min-width: 1025px){.flex-container{flex-direction:var(--flex-direction-laptop-value);gap:var(--flex-gap-laptop-value);flex-wrap:var(--flex-wrap-laptop-value);justify-content:var(--flex-justify-content-laptop-value);align-items:var(--flex-align-items-laptop-value)}}@media screen and (min-width: 1441px){.flex-container{flex-direction:var(--flex-direction-desktop-value);gap:var(--flex-gap-desktop-value);flex-wrap:var(--flex-wrap-desktop-value);justify-content:var(--flex-justify-content-desktop-value);align-items:var(--flex-align-items-desktop-value)}}";
440
+ const styles$d = ".flex-container{display:flex;height:100%;width:100%;box-sizing:border-box;flex-direction:var(--flex-direction--mobile-value);gap:var(--flex-gap-mobile-value);flex-wrap:var(--flex-wrap-mobile-value);justify-content:var(--flex-justify-content--mobile-value);align-items:var(--flex-align-items--mobile-value)}@media screen and (min-width: 768px){.flex-container{flex-direction:var(--flex-direction--tablet-value);gap:var(--flex-gap-tablet-value);flex-wrap:var(--flex-wrap-tablet-value);justify-content:var(--flex-justify-content--tablet-value);align-items:var(--flex-align-items--tablet-value)}}@media screen and (min-width: 1025px){.flex-container{flex-direction:var(--flex-direction--laptop-value);gap:var(--flex-gap-laptop-value);flex-wrap:var(--flex-wrap-laptop-value);justify-content:var(--flex-justify-content--laptop-value);align-items:var(--flex-align-items--laptop-value)}}@media screen and (min-width: 1441px){.flex-container{flex-direction:var(--flex-direction--desktop-value);gap:var(--flex-gap-desktop-value);flex-wrap:var(--flex-wrap-desktop-value);justify-content:var(--flex-justify-content--desktop-value);align-items:var(--flex-align-items--desktop-value)}}";
407
441
  const styleSheet$d = new CSSStyleSheet();
408
442
  styleSheet$d.replaceSync(styles$d);
409
443
  const gapValues = [
410
- // Vertical
411
- "between-section-vertical",
412
- "between-options-vertical",
413
- "under-text-vertical",
414
- "display-to-subtitle-vertical",
415
- "under-display-vertical",
416
- "component-default-vertical",
417
- "component-expanded-vertical",
418
- "between-section-vertical-mobile",
419
- "between-options-vertical-mobile",
420
- "under-text-vertical-mobile",
421
- "display-to-subtitle-vertical-mobile",
422
- "under-display-vertical-mobile",
423
- "component-default-vertical-mobile",
424
- "component-expanded-vertical-mobile",
425
- // Horizontal
426
- "between-icon-horizontal",
427
- "text-to-icon-compact-horizontal",
428
- "text-to-icon-horizontal",
429
- "component-compact-horizontal",
430
- "component-default-horizontal",
431
- "component-expanded-horizontal",
432
- "between-icon-horizontal-mobile",
433
- "text-to-icon-compact-horizontal-mobile",
434
- "text-to-icon-horizontal-mobile",
435
- "component-compact-horizontal-mobile",
436
- "component-default-horizontal-mobile"
444
+ "after-element-none",
445
+ "after-element-2xs",
446
+ "after-element-xs",
447
+ "after-element-s",
448
+ "after-element-default",
449
+ "after-element-l",
450
+ "heading-to-subtitle",
451
+ "heading-to-content",
452
+ "inside-section-none",
453
+ "inside-section-xs",
454
+ "inside-section-s",
455
+ "inside-section-default",
456
+ "inside-section-l",
457
+ "between-sections"
437
458
  ];
438
459
  class Stack extends WithFlexAttributes {
439
460
  constructor() {
@@ -452,25 +473,21 @@ class Stack extends WithFlexAttributes {
452
473
  return [
453
474
  ...super.observedAttributes,
454
475
  "direction",
455
- "direction-mobile",
456
- "direction-tablet",
457
- "direction-laptop",
458
- "direction-desktop",
476
+ "direction--mobile",
477
+ "direction--tablet",
478
+ "direction--laptop",
479
+ "direction--desktop",
459
480
  "gap",
460
- "gap-mobile",
461
- "gap-tablet",
462
- "gap-laptop",
463
- "gap-desktop",
464
481
  "justify-content",
465
- "justify-content-mobile",
466
- "justify-content-tablet",
467
- "justify-content-laptop",
468
- "justify-content-desktop",
482
+ "justify-content--mobile",
483
+ "justify-content--tablet",
484
+ "justify-content--laptop",
485
+ "justify-content--desktop",
469
486
  "align-items",
470
- "align-items-mobile",
471
- "align-items-tablet",
472
- "align-items-laptop",
473
- "align-items-desktop",
487
+ "align-items--mobile",
488
+ "align-items--tablet",
489
+ "align-items--laptop",
490
+ "align-items--desktop",
474
491
  "wrap",
475
492
  "wrap-mobile",
476
493
  "wrap-tablet",
@@ -484,113 +501,105 @@ class Stack extends WithFlexAttributes {
484
501
  }
485
502
  switch (name) {
486
503
  case "gap":
487
- if (!this.$el.style.getPropertyValue("--flex-gap-mobile-value")) {
488
- this.$el.style.setProperty(
489
- `--flex-gap-mobile-value`,
490
- this.getGapCSSVariable(newValue)
491
- );
492
- }
493
- if (!this.$el.style.getPropertyValue("--flex-gap-tablet-value")) {
504
+ this.$el.style.setProperty(
505
+ `--flex-gap-mobile-value`,
506
+ this.getGapCSSVariable(newValue, "mobile")
507
+ );
508
+ this.$el.style.setProperty(
509
+ `--flex-gap-tablet-value`,
510
+ this.getGapCSSVariable(newValue, "tablet")
511
+ );
512
+ this.$el.style.setProperty(
513
+ `--flex-gap-laptop-value`,
514
+ this.getGapCSSVariable(newValue, "desktop")
515
+ );
516
+ this.$el.style.setProperty(
517
+ `--flex-gap-desktop-value`,
518
+ this.getGapCSSVariable(newValue, "desktop")
519
+ );
520
+ break;
521
+ case "direction":
522
+ if (!this.$el.style.getPropertyValue("--flex-direction--mobile-value")) {
494
523
  this.$el.style.setProperty(
495
- `--flex-gap-tablet-value`,
496
- this.getGapCSSVariable(newValue)
524
+ `--flex-direction--mobile-value`,
525
+ newValue
497
526
  );
498
527
  }
499
- if (!this.$el.style.getPropertyValue("--flex-gap-laptop-value")) {
528
+ if (!this.$el.style.getPropertyValue("--flex-direction--tablet-value")) {
500
529
  this.$el.style.setProperty(
501
- `--flex-gap-laptop-value`,
502
- this.getGapCSSVariable(newValue)
530
+ `--flex-direction--tablet-value`,
531
+ newValue
503
532
  );
504
533
  }
505
- if (!this.$el.style.getPropertyValue("--flex-gap-desktop-value")) {
534
+ if (!this.$el.style.getPropertyValue("--flex-direction--laptop-value")) {
506
535
  this.$el.style.setProperty(
507
- `--flex-gap-desktop-value`,
508
- this.getGapCSSVariable(newValue)
536
+ `--flex-direction--laptop-value`,
537
+ newValue
509
538
  );
510
539
  }
511
- break;
512
- case "gap-mobile":
513
- case "gap-tablet":
514
- case "gap-laptop":
515
- case "gap-desktop":
516
- this.$el.style.setProperty(
517
- `--flex-${name}-value`,
518
- this.getGapCSSVariable(newValue)
519
- );
520
- break;
521
- case "direction":
522
- if (!this.$el.style.getPropertyValue("--flex-direction-mobile-value")) {
523
- this.$el.style.setProperty(`--flex-direction-mobile-value`, newValue);
524
- }
525
- if (!this.$el.style.getPropertyValue("--flex-direction-tablet-value")) {
526
- this.$el.style.setProperty(`--flex-direction-tablet-value`, newValue);
527
- }
528
- if (!this.$el.style.getPropertyValue("--flex-direction-laptop-value")) {
529
- this.$el.style.setProperty(`--flex-direction-laptop-value`, newValue);
530
- }
531
- if (!this.$el.style.getPropertyValue("--flex-direction-desktop-value")) {
540
+ if (!this.$el.style.getPropertyValue("--flex-direction--desktop-value")) {
532
541
  this.$el.style.setProperty(
533
- `--flex-direction-desktop-value`,
542
+ `--flex-direction--desktop-value`,
534
543
  newValue
535
544
  );
536
545
  }
537
546
  break;
538
547
  case "justify-content":
539
548
  if (!this.$el.style.getPropertyValue(
540
- "--flex-justify-content-mobile-value"
549
+ "--flex-justify-content--mobile-value"
541
550
  )) {
542
551
  this.$el.style.setProperty(
543
- `--flex-justify-content-mobile-value`,
552
+ `--flex-justify-content--mobile-value`,
544
553
  newValue
545
554
  );
546
555
  }
547
556
  if (!this.$el.style.getPropertyValue(
548
- "--flex-justify-content-tablet-value"
557
+ "--flex-justify-content--tablet-value"
549
558
  )) {
550
559
  this.$el.style.setProperty(
551
- `--flex-justify-content-tablet-value`,
560
+ `--flex-justify-content--tablet-value`,
552
561
  newValue
553
562
  );
554
563
  }
555
564
  if (!this.$el.style.getPropertyValue(
556
- "--flex-justify-content-laptop-value"
565
+ "--flex-justify-content--laptop-value"
557
566
  )) {
558
567
  this.$el.style.setProperty(
559
- `--flex-justify-content-laptop-value`,
568
+ `--flex-justify-content--laptop-value`,
560
569
  newValue
561
570
  );
562
571
  }
563
572
  if (!this.$el.style.getPropertyValue(
564
- "--flex-justify-content-desktop-value"
573
+ "--flex-justify-content--desktop-value"
565
574
  )) {
566
575
  this.$el.style.setProperty(
567
- `--flex-justify-content-desktop-value`,
576
+ `--flex-justify-content--desktop-value`,
568
577
  newValue
569
578
  );
570
579
  }
571
580
  break;
572
581
  case "align-items":
573
- if (!this.$el.style.getPropertyValue("--flex-align-items-mobile-value")) {
582
+ if (!this.$el.style.getPropertyValue("--flex-align-items--mobile-value")) {
574
583
  this.$el.style.setProperty(
575
- `--flex-align-items-mobile-value`,
584
+ `--flex-align-items--mobile-value`,
576
585
  newValue
577
586
  );
578
587
  }
579
- if (!this.$el.style.getPropertyValue("--flex-align-items-tablet-value")) {
588
+ if (!this.$el.style.getPropertyValue("--flex-align-items--tablet-value")) {
580
589
  this.$el.style.setProperty(
581
- `--flex-align-items-tablet-value`,
590
+ `--flex-align-items--tablet-value`,
582
591
  newValue
583
592
  );
584
593
  }
585
- if (!this.$el.style.getPropertyValue("--flex-align-items-laptop-value")) {
594
+ if (!this.$el.style.getPropertyValue("--flex-align-items--laptop-value")) {
586
595
  this.$el.style.setProperty(
587
- `--flex-align-items-laptop-value`,
596
+ `--flex-align-items--laptop-value`,
588
597
  newValue
589
598
  );
590
599
  }
591
- if (!this.$el.style.getPropertyValue("--flex-align-items-desktop-value")) {
600
+ if (!this.$el.style.getPropertyValue("--flex-align-items--desktop-value")) {
592
601
  this.$el.style.setProperty(
593
- `--flex-align-items-desktop-value`,
602
+ `--flex-align-items--desktop-value`,
594
603
  newValue
595
604
  );
596
605
  }
@@ -609,18 +618,18 @@ class Stack extends WithFlexAttributes {
609
618
  this.$el.style.setProperty(`--flex-wrap-desktop-value`, newValue);
610
619
  }
611
620
  break;
612
- case "direction-mobile":
613
- case "direction-tablet":
614
- case "direction-laptop":
615
- case "direction-desktop":
616
- case "justify-content-mobile":
617
- case "justify-content-tablet":
618
- case "justify-content-laptop":
619
- case "justify-content-desktop":
620
- case "align-items-mobile":
621
- case "align-items-tablet":
622
- case "align-items-laptop":
623
- case "align-items-desktop":
621
+ case "direction--mobile":
622
+ case "direction--tablet":
623
+ case "direction--laptop":
624
+ case "direction--desktop":
625
+ case "justify-content--mobile":
626
+ case "justify-content--tablet":
627
+ case "justify-content--laptop":
628
+ case "justify-content--desktop":
629
+ case "align-items--mobile":
630
+ case "align-items--tablet":
631
+ case "align-items--laptop":
632
+ case "align-items--desktop":
624
633
  case "wrap-mobile":
625
634
  case "wrap-tablet":
626
635
  case "wrap-laptop":
@@ -632,8 +641,8 @@ class Stack extends WithFlexAttributes {
632
641
  break;
633
642
  }
634
643
  }
635
- getGapCSSVariable(newValue) {
636
- return gapValues.includes(newValue) ? `var(--px-spacing-${newValue})` : newValue;
644
+ getGapCSSVariable(newValue, breakpoint = "mobile") {
645
+ return gapValues.includes(newValue) ? `var(--px-spacing-${newValue}-${breakpoint})` : newValue;
637
646
  }
638
647
  get direction() {
639
648
  return this.getAttribute("direction");
@@ -642,28 +651,28 @@ class Stack extends WithFlexAttributes {
642
651
  this.setAttribute("direction", value);
643
652
  }
644
653
  get directionMobile() {
645
- return this.getAttribute("direction-mobile");
654
+ return this.getAttribute("direction--mobile");
646
655
  }
647
656
  set directionMobile(value) {
648
- this.setAttribute("direction-mobile", value);
657
+ this.setAttribute("direction--mobile", value);
649
658
  }
650
659
  get directionTablet() {
651
- return this.getAttribute("direction-tablet");
660
+ return this.getAttribute("direction--tablet");
652
661
  }
653
662
  set directionTablet(value) {
654
- this.setAttribute("direction-tablet", value);
663
+ this.setAttribute("direction--tablet", value);
655
664
  }
656
665
  get directionLaptop() {
657
- return this.getAttribute("direction-laptop");
666
+ return this.getAttribute("direction--laptop");
658
667
  }
659
668
  set directionLaptop(value) {
660
- this.setAttribute("direction-laptop", value);
669
+ this.setAttribute("direction--laptop", value);
661
670
  }
662
671
  get directionDesktop() {
663
- return this.getAttribute("direction-desktop");
672
+ return this.getAttribute("direction--desktop");
664
673
  }
665
674
  set directionDesktop(value) {
666
- this.setAttribute("direction-desktop", value);
675
+ this.setAttribute("direction--desktop", value);
667
676
  }
668
677
  get gap() {
669
678
  return this.getAttribute("gap");
@@ -672,22 +681,22 @@ class Stack extends WithFlexAttributes {
672
681
  this.setAttribute("gap", value);
673
682
  }
674
683
  get gapMobile() {
675
- return this.getAttribute("gap-mobile");
684
+ return this.getAttribute("gap--mobile");
676
685
  }
677
686
  set gapMobile(value) {
678
- this.setAttribute("gap-mobile", value);
687
+ this.setAttribute("gap--mobile", value);
679
688
  }
680
689
  get gapTablet() {
681
- return this.getAttribute("gap-tablet");
690
+ return this.getAttribute("gap--tablet");
682
691
  }
683
692
  set gapTablet(value) {
684
- this.setAttribute("gap-tablet", value);
693
+ this.setAttribute("gap--tablet", value);
685
694
  }
686
695
  get gapLaptop() {
687
- return this.getAttribute("gap-laptop");
696
+ return this.getAttribute("gap--laptop");
688
697
  }
689
698
  set gapLaptop(value) {
690
- this.setAttribute("gap-laptop", value);
699
+ this.setAttribute("gap--laptop", value);
691
700
  }
692
701
  get justifyContent() {
693
702
  return this.getAttribute("justify-content");
@@ -696,28 +705,28 @@ class Stack extends WithFlexAttributes {
696
705
  this.setAttribute("justify-content", value);
697
706
  }
698
707
  get justifyContentMobile() {
699
- return this.getAttribute("justify-content-mobile");
708
+ return this.getAttribute("justify-content--mobile");
700
709
  }
701
710
  set justifyContentMobile(value) {
702
- this.setAttribute("justify-content-mobile", value);
711
+ this.setAttribute("justify-content--mobile", value);
703
712
  }
704
713
  get justifyContentTablet() {
705
- return this.getAttribute("justify-content-tablet");
714
+ return this.getAttribute("justify-content--tablet");
706
715
  }
707
716
  set justifyContentTablet(value) {
708
- this.setAttribute("justify-content-tablet", value);
717
+ this.setAttribute("justify-content--tablet", value);
709
718
  }
710
719
  get justifyContentLaptop() {
711
- return this.getAttribute("justify-content-laptop");
720
+ return this.getAttribute("justify-content--laptop");
712
721
  }
713
722
  set justifyContentLaptop(value) {
714
- this.setAttribute("justify-content-laptop", value);
723
+ this.setAttribute("justify-content--laptop", value);
715
724
  }
716
725
  get justifyContentDesktop() {
717
- return this.getAttribute("justify-content-desktop");
726
+ return this.getAttribute("justify-content--desktop");
718
727
  }
719
728
  set justifyContentDesktop(value) {
720
- this.setAttribute("justify-content-desktop", value);
729
+ this.setAttribute("justify-content--desktop", value);
721
730
  }
722
731
  get alignItems() {
723
732
  return this.getAttribute("align-items");
@@ -726,28 +735,28 @@ class Stack extends WithFlexAttributes {
726
735
  this.setAttribute("align-items", value);
727
736
  }
728
737
  get alignItemsMobile() {
729
- return this.getAttribute("align-items-mobile");
738
+ return this.getAttribute("align-items--mobile");
730
739
  }
731
740
  set alignItemsMobile(value) {
732
- this.setAttribute("align-items-mobile", value);
741
+ this.setAttribute("align-items--mobile", value);
733
742
  }
734
743
  get alignItemsTablet() {
735
- return this.getAttribute("align-items-tablet");
744
+ return this.getAttribute("align-items--tablet");
736
745
  }
737
746
  set alignItemsTablet(value) {
738
- this.setAttribute("align-items-tablet", value);
747
+ this.setAttribute("align-items--tablet", value);
739
748
  }
740
749
  get alignItemsLaptop() {
741
- return this.getAttribute("align-items-laptop");
750
+ return this.getAttribute("align-items--laptop");
742
751
  }
743
752
  set alignItemsLaptop(value) {
744
- this.setAttribute("align-items-laptop", value);
753
+ this.setAttribute("align-items--laptop", value);
745
754
  }
746
755
  get alignItemsDesktop() {
747
- return this.getAttribute("align-items-desktop");
756
+ return this.getAttribute("align-items--desktop");
748
757
  }
749
758
  set alignItemsDesktop(value) {
750
- this.setAttribute("align-items-desktop", value);
759
+ this.setAttribute("align-items--desktop", value);
751
760
  }
752
761
  get wrap() {
753
762
  return this.getAttribute("wrap");
@@ -933,7 +942,7 @@ class Page extends WithFlexAttributes {
933
942
  </px-container>
934
943
  <px-container
935
944
  id="footer-container"
936
- background-color="container-none"
945
+ background-color="none"
937
946
  border-radius="none"
938
947
  style="background-color: rgb(108, 66, 156)"
939
948
  padding-top="xl"
@@ -1026,7 +1035,7 @@ class Page extends WithFlexAttributes {
1026
1035
  case "background-color":
1027
1036
  this.$bodyContainer.setAttribute(
1028
1037
  "background-color",
1029
- bgColorValues.indexOf(newValue) > 0 ? newValue : "none"
1038
+ backgroundColorValues.indexOf(newValue) > 0 ? newValue : "none"
1030
1039
  );
1031
1040
  break;
1032
1041
  case "padding-vertical":
@@ -1060,9 +1069,9 @@ class Page extends WithFlexAttributes {
1060
1069
  if (customElements.get("px-page") === void 0) {
1061
1070
  customElements.define("px-page", Page);
1062
1071
  }
1063
- const buttonCss = ".btn{display:inline-flex;vertical-align:middle;align-items:center;justify-content:center;font-family:var(--px-font-family);font-size:var(--px-text-size-base-mobile);line-height:var(--px-line-height-m);font-weight:700;gap:var(--px-spacing-between-icon-horizontal);cursor:pointer;text-decoration:none;--btn-transition: all .2s ease-in-out 0s;transition:var(--btn-transition);border:var(--px-border-m) solid transparent}.btn,.btn *{box-sizing:border-box}.btn ::slotted(px-icon){line-height:0}.btn:hover:not([disabled],[aria-disabled=true],.loading){border-color:var(--px-color-border-action-hover-default)}.btn:focus:not([disabled],[aria-disabled=true]){outline-offset:var(--px-offset-s);outline:var(--px-outline-s) solid var(--px-color-outline-default)}.btn:active{transform:scale(.95)}.btn[disabled],.btn[aria-disabled=true]{cursor:default;pointer-events:none}.btn.loading{cursor:inherit}.btn.loading ::slotted(px-spinner){line-height:0}.btn:not(.secondary,.tertiary,.patch){color:var(--px-color-txt-primary-inverted);background:var(--px-color-bg-action-primary-default);min-height:var(--px-size-action-mobile);padding:0 var(--px-padding-m);border-radius:var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-big) var(--px-radius-button-small)}.btn:not(.secondary,.tertiary,.patch):hover:not([disabled],[aria-disabled=true],.loading){color:var(--px-color-txt-primary-default);background:var(--px-color-bg-action-hover-bordered-default)}.btn:not(.secondary,.tertiary,.patch)[disabled],.btn:not(.secondary,.tertiary,.patch)[aria-disabled=true]{background:var(--px-color-bg-action-disabled-default);color:var(--px-color-txt-disabled-default)}.btn:not(.secondary,.tertiary,.patch).loading{background:var(--px-color-bg-action-disabled-default);color:var(--px-color-txt-primary-default);border-color:transparent}.btn:not(.secondary,.tertiary,.patch).extended{width:100%}.btn:not(.secondary,.tertiary,.patch).alternative{border-radius:var(--px-radius-button-small)}.btn.secondary{color:var(--px-color-txt-primary-default);background:var(--px-color-bg-action-secondary-default);min-height:var(--px-size-action-mobile);padding:0 var(--px-padding-m);border-radius:var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-big) var(--px-radius-button-small)}.btn.secondary:hover:not([disabled],[aria-disabled=true],.loading){color:var(--px-color-txt-primary-default);background:var(--px-color-bg-action-hover-bordered-default)}.btn.secondary[disabled],.btn.secondary[aria-disabled=true]{background:var(--px-color-bg-action-disabled-default);color:var(--px-color-txt-disabled-default)}.btn.secondary.loading{background:var(--px-color-bg-action-disabled-default);color:var(--px-color-txt-primary-default);border-color:transparent}.btn.secondary.extended{width:100%}.btn.secondary.alternative{border-radius:var(--px-radius-button-small)}.btn.tertiary{background:none;color:var(--px-color-txt-primary-default);border-radius:var(--px-radius-pill);padding:var(--px-padding-2xs) 0}.btn.tertiary ::slotted(px-icon){display:flex;align-items:center;justify-content:center;width:var(--px-icon-size-m-mobile);height:var(--px-icon-size-m-mobile);border-radius:var(--px-radius-pill);background:var(--px-color-bg-action-secondary-default);transition:var(--btn-transition)}.btn.tertiary:hover:not([disabled],[aria-disabled=true],.loading){padding:var(--px-padding-2xs) var(--px-padding-s)}.btn.tertiary:hover:not([disabled],[aria-disabled=true],.loading) ::slotted(px-icon){background:transparent;width:inherit;height:inherit}.btn.tertiary[disabled],.btn.tertiary[aria-disabled=true]{color:var(--px-color-txt-disabled-default)}.btn.tertiary[disabled] ::slotted(px-icon),.btn.tertiary[aria-disabled=true] ::slotted(px-icon){background:var(--px-color-bg-action-disabled-default)}.btn.tertiary.loading{color:var(--px-color-txt-primary-default);border-color:transparent}.btn.tertiary.loading ::slotted(px-spinner){display:flex;align-items:center;justify-content:center;width:var(--px-icon-size-m-mobile);height:var(--px-icon-size-m-mobile);border-radius:var(--px-radius-pill);background:var(--px-color-bg-action-disabled-default)}.btn.patch{display:inline-flex}.btn.patch:hover:not([disabled],[aria-disabled=true],.loading){color:var(--px-color-txt-primary-default);background:var(--px-color-bg-action-hover-bordered-default)}.btn.patch[disabled],.btn.patch[aria-disabled=true]{background:var(--px-color-bg-action-disabled-default);color:var(--px-color-txt-disabled-default)}button.link{background:none;border:none;text-decoration:underline;padding:0;cursor:pointer}button.link[disabled],button.link[aria-disabled=true]{cursor:default;pointer-events:none;color:var(--px-color-txt-disabled-default)}:host([inverted]) .btn:hover:not([disabled],[aria-disabled=true],.loading){border-color:var(--px-color-border-action-hover-inverted)}:host([inverted]) .btn:focus:not([disabled],[aria-disabled=true]){outline-color:var(--px-color-outline-inverted)}:host([inverted]) .btn:not(.secondary,.tertiary,.patch){color:var(--px-color-txt-primary-default);background:var(--px-color-bg-action-primary-inverted)}:host([inverted]) .btn:not(.secondary,.tertiary,.patch):hover:not([disabled],[aria-disabled=true],.loading){color:var(--px-color-txt-primary-inverted);background:var(--px-color-bg-action-hover-bordered-default-inverted)}:host([inverted]) .btn:not(.secondary,.tertiary,.patch)[disabled],:host([inverted]) .btn:not(.secondary,.tertiary,.patch)[aria-disabled=true]{background:var(--px-color-bg-action-disabled-inverted);color:var(--px-color-txt-disabled-inverted)}:host([inverted]) .btn:not(.secondary,.tertiary,.patch).loading{background:var(--px-color-bg-action-disabled-inverted);color:var(--px-color-txt-primary-inverted);border-color:transparent}:host([inverted]) .btn.secondary{color:var(--px-color-txt-primary-inverted);background:var(--px-color-bg-action-secondary-inverted)}:host([inverted]) .btn.secondary:hover:not([disabled],[aria-disabled=true],.loading){color:var(--px-color-txt-primary-inverted);background:var(--px-color-bg-action-hover-bordered-default-inverted)}:host([inverted]) .btn.secondary[disabled],:host([inverted]) .btn.secondary[aria-disabled=true]{background:var(--px-color-bg-action-disabled-inverted);color:var(--px-color-txt-disabled-inverted)}:host([inverted]) .btn.secondary.loading{background:var(--px-color-bg-action-disabled-inverted);color:var(--px-color-txt-primary-inverted);border-color:transparent}:host([inverted]) .btn.tertiary{color:var(--px-color-txt-primary-inverted)}:host([inverted]) .btn.tertiary ::slotted(px-icon){background:var(--px-color-bg-action-secondary-inverted)}:host([inverted]) .btn.tertiary:hover:not([disabled],[aria-disabled=true],.loading) ::slotted(px-icon){background:transparent}:host([inverted]) .btn.tertiary[disabled],:host([inverted]) .btn.tertiary[aria-disabled=true]{color:var(--px-color-txt-disabled-inverted)}:host([inverted]) .btn.tertiary[disabled] ::slotted(px-icon),:host([inverted]) .btn.tertiary[aria-disabled=true] ::slotted(px-icon){background:var(--px-color-bg-action-disabled-inverted)}:host([inverted]) .btn.tertiary.loading{color:var(--px-color-txt-primary-inverted)}:host([inverted]) .btn.tertiary.loading ::slotted(px-spinner){background:var(--px-color-bg-action-disabled-inverted)}:host([inverted]) .btn.patch:hover:not([disabled],[aria-disabled=true],.loading){color:var(--px-color-txt-primary-inverted);background:var(--px-color-bg-action-hover-bordered-default-inverted)}:host([inverted]) .btn.patch[disabled],:host([inverted]) .btn.patch[aria-disabled=true]{background:var(--px-color-bg-action-disabled-inverted);color:var(--px-color-txt-disabled-inverted)}:host([inverted]) button.link[disabled],:host([inverted]) button.link[aria-disabled=true]{color:var(--px-color-txt-disabled-inverted)}@media only screen and (min-width: 768px){.btn{font-size:var(--px-text-size-base-tablet)}.btn:not(.secondary,.tertiary,.patch){min-height:var(--px-size-action-desktop)}.btn.secondary{min-height:var(--px-size-action-desktop)}.btn.tertiary ::slotted(px-spinner){width:var(--px-icon-size-m-tablet);height:var(--px-icon-size-m-tablet)}}@media only screen and (min-width: 1441px){.btn{font-size:var(--px-text-size-base-desktop)}.btn:focus:not([disabled],[aria-disabled=true]){outline-offset:var(--px-offset);outline-width:var(--px-outline)}.btn.tertiary ::slotted(px-spinner){width:var(--px-icon-size-m-desktop);height:var(--px-icon-size-m-desktop)}}@keyframes anim-spinner{0%{transform:rotate(0)}to{transform:rotate(360deg)}}";
1064
- const linkCss = 'a,.link,::slotted(a){font-family:var(--px-font-family);font-size:var(--px-text-size-base-mobile);line-height:var(--px-line-height-m);font-weight:500;color:var(--px-color-txt-body-default)}a:hover,.link:hover{color:var(--px-color-txt-hover-default)}a:focus,.link:focus{outline-offset:var(--px-offset-s);outline:var(--px-outline-s) solid var(--px-color-outline-default)}a[aria-disabled=true],.link[aria-disabled=true]{cursor:default;pointer-events:none;color:var(--px-color-txt-disabled-default)}a ::slotted([slot="after"]),.link ::slotted([slot="after"]){margin-left:var(--px-spacing-text-to-icon-compact-horizontal)}a ::slotted(span[slot="after"]),a ::slotted(span[slot="before"]),.link ::slotted(span[slot="after"]),.link ::slotted(span[slot="before"]){display:inline-block}::slotted(a:hover){color:var(--px-color-txt-hover-default)}a.no-style{color:inherit;text-decoration:none}a.no-style:hover,a.no-style:focus{color:inherit}a.skip-link{position:absolute;left:-10000px;top:auto;overflow:hidden;background-color:var(--px-color-bg-container-weak-default);padding:var(--px-padding-xs)}a.skip-link:focus{left:auto;z-index:999}:host([inverted]) a,:host([inverted]) .link,:host([inverted]) ::slotted(a){color:var(--px-color-txt-body-inverted)}:host([inverted]) a:hover,:host([inverted]) .link:hover{color:var(--px-color-txt-hover-inverted)}:host([inverted]) a:focus,:host([inverted]) .link:focus{outline-color:var(--px-color-outline-inverted)}:host([inverted]) a[aria-disabled=true],:host([inverted]) .link[aria-disabled=true]{color:var(--px-color-txt-disabled-inverted)}:host([inverted]) ::slotted(a:hover){color:var(--px-color-txt-hover-inverted)}:host([inverted]) a.skip-link{background-color:var(--px-color-bg-container-weak-inverted)}@media only screen and (min-width: 768px){a,.link,::slotted(a){font-size:var(--px-text-size-base-tablet)}}@media only screen and (min-width: 1441px){a,.link,::slotted(a){font-size:var(--px-text-size-base-desktop)}a:focus,.link:focus{outline-offset:var(--px-offset);outline-width:var(--px-outline)}}';
1065
- const styles$b = ".patch{display:inline-flex;align-items:center;padding:0 var(--px-padding-s);height:1.625rem;border:var(--px-border-m) solid transparent;border-radius:var(--px-radius-patch-big) var(--px-radius-patch-big) var(--px-radius-patch-big) var(--px-radius-patch-small);font-family:var(--px-font-family);font-weight:700;font-size:var(--px-text-size-base-mobile);line-height:var(--px-line-height-m);text-align:center;background-color:var(--px-color-bg-promo-default);color:var(--px-color-txt-primary-inverted)}.patch,.patch *{box-sizing:border-box}@media only screen and (min-width: 768px){.patch{font-size:var(--px-text-size-base-tablet)}}@media only screen and (min-width: 1025px){.patch{font-size:var(--px-text-size-base-desktop)}}:host([inverted]) .patch{background-color:var(--px-color-bg-promo-inverted);color:var(--px-color-txt-primary-inverted)}.bottom-right{border-radius:var(--px-radius-patch-big) var(--px-radius-patch-big) var(--px-radius-patch-small) var(--px-radius-patch-big)}.bottom-left{border-radius:var(--px-radius-patch-big) var(--px-radius-patch-big) var(--px-radius-patch-big) var(--px-radius-patch-small)}.info{background-color:var(--px-color-illu-blue-core);color:var(--px-color-txt-body-default)}:host([inverted]) .info{background-color:var(--px-color-illu-blue-core);color:var(--px-color-txt-body-default)}.black-friday{background-color:var(--px-color-bg-container-rich-default);color:var(--px-color-txt-body-inverted)}:host([inverted]) .black-friday{background-color:var(--px-color-bg-container-rich-inverted);color:var(--px-color-txt-body-default)}.eco{background-color:var(--px-color-bg-success-default);color:var(--px-color-txt-body-inverted)}:host([inverted]) .eco{background-color:var(--px-color-bg-success-inverted);color:var(--px-color-txt-inverted-default)}.greyed{background-color:var(--px-color-bg-action-disabled-default);color:var(--px-color-icon-disabled-default)}:host([inverted]) .greyed{background-color:var(--px-color-bg-action-disabled-inverted);color:var(--px-color-icon-disabled-inverted)}";
1072
+ const buttonCss = '.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)}}';
1073
+ const linkCss = '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)}}';
1074
+ const styles$b = ".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)}}";
1066
1075
  const buttonStyles$1 = new CSSStyleSheet();
1067
1076
  const linkStyles$2 = new CSSStyleSheet();
1068
1077
  const patchStyles = new CSSStyleSheet();
@@ -1304,6 +1313,24 @@ if (!customElements.get("px-icon-set")) {
1304
1313
  customElements.define("px-icon-set", IconSet);
1305
1314
  }
1306
1315
  const iconSizeValues = ["2xs", "xs", "s", "m", "l", "xl", "2xl"];
1316
+ const iconColorValues = [
1317
+ "",
1318
+ "default",
1319
+ "inherit",
1320
+ "content-brand",
1321
+ "content-neutral-strong",
1322
+ "content-neutral-weak",
1323
+ "action-brand",
1324
+ "action-neutral",
1325
+ "action-hover",
1326
+ "action-active",
1327
+ "action-disabled",
1328
+ "purpose-success",
1329
+ "purpose-warning",
1330
+ "purpose-error",
1331
+ "purpose-unlimited",
1332
+ "purpose-promo"
1333
+ ];
1307
1334
  const observedAttributes = [
1308
1335
  "name",
1309
1336
  "size",
@@ -1331,7 +1358,7 @@ class Icon extends WithFlexAttributes {
1331
1358
  this.updateAttribute(attrName, oldValue, newValue, iconSizeValues);
1332
1359
  break;
1333
1360
  case "color":
1334
- this.updateAttribute(attrName, oldValue, newValue, colorValues$1);
1361
+ this.updateAttribute(attrName, oldValue, newValue, iconColorValues);
1335
1362
  break;
1336
1363
  case "aria-label":
1337
1364
  if (!this.internals) {
@@ -1407,7 +1434,7 @@ class Icon extends WithFlexAttributes {
1407
1434
  this.setAttribute("from", value);
1408
1435
  }
1409
1436
  }
1410
- const styles$a = ":host{line-height:1;display:inline-flex;flex-direction:column;justify-content:center}i{font-family:lavender;color:var(--px-color-icon-primary-default);font-size:var(--px-icon-size-m-mobile);line-height:1;font-style:unset;font-weight:400;-webkit-user-select:none;user-select:none;font-display:swap}svg{width:var(--px-icon-size-m-mobile);height:var(--px-icon-size-m-mobile);color:var(--px-color-icon-primary-default)}.inherit{color:inherit}.primary{color:var(--px-color-icon-primary-default)}.body{color:var(--px-color-icon-body-default)}.details{color:var(--px-color-icon-details-default)}.hover:hover{color:var(--px-color-icon-hover-default)}.hover:active{color:var(--px-color-icon-active-default)}.disabled{color:var(--px-color-icon-disabled-default)}.success{color:var(--px-color-icon-success-default)}.warning{color:var(--px-color-icon-warning-default)}.error{color:var(--px-color-icon-error-default)}.unlimited{color:var(--px-color-icon-unlimited-default)}.promo{color:var(--px-color-icon-promo-default)}:host([inverted]) i{color:var(--px-color-icon-primary-inverted)}:host([inverted]) svg{color:var(--px-color-icon-primary-inverted)}:host([inverted]) .primary{color:var(--px-color-icon-primary-inverted)}:host([inverted]) .body{color:var(--px-color-icon-body-inverted)}:host([inverted]) .details{color:var(--px-color-icon-details-inverted)}:host([inverted]) .hover:hover{color:var(--px-color-icon-hover-inverted)}:host([inverted]) .hover:active{color:var(--px-color-icon-active-inverted)}:host([inverted]) .disabled{color:var(--px-color-icon-disabled-inverted)}:host([inverted]) .success{color:var(--px-color-icon-success-inverted)}:host([inverted]) .warning{color:var(--px-color-icon-warning-inverted)}:host([inverted]) .error{color:var(--px-color-icon-error-inverted)}:host([inverted]) .unlimited{color:var(--px-color-icon-unlimited-inverted)}:host([inverted]) .promo{color:var(--px-color-icon-promo-inverted)}.size-2xs{width:var(--px-icon-size-2xs-mobile);height:var(--px-icon-size-2xs-mobile);font-size:var(--px-icon-size-2xs-mobile)}.size-xs{width:var(--px-icon-size-xs-mobile);height:var(--px-icon-size-xs-mobile);font-size:var(--px-icon-size-xs-mobile)}.size-s{width:var(--px-icon-size-s-mobile);height:var(--px-icon-size-s-mobile);font-size:var(--px-icon-size-s-mobile)}.size-m{width:var(--px-icon-size-m-mobile);height:var(--px-icon-size-m-mobile);font-size:var(--px-icon-size-m-mobile)}.size-l{width:var(--px-icon-size-l-mobile);height:var(--px-icon-size-l-mobile);font-size:var(--px-icon-size-l-mobile)}.size-xl{width:var(--px-icon-size-xl-mobile);height:var(--px-icon-size-xl-mobile);font-size:var(--px-icon-size-xl-mobile)}.size-2xl{width:var(--px-icon-size-2xl-mobile);height:var(--px-icon-size-2xl-mobile);font-size:var(--px-icon-size-2xl-mobile)}@media only screen and (min-width: 64rem){.size-2xs{width:var(--px-icon-size-2xs-tablet);height:var(--px-icon-size-2xs-tablet);font-size:var(--px-icon-size-2xs-tablet)}.size-xs{width:var(--px-icon-size-xs-tablet);height:var(--px-icon-size-xs-tablet);font-size:var(--px-icon-size-xs-tablet)}.size-s{width:var(--px-icon-size-s-tablet);height:var(--px-icon-size-s-tablet);font-size:var(--px-icon-size-s-tablet)}.size-m{width:var(--px-icon-size-m-tablet);height:var(--px-icon-size-m-tablet);font-size:var(--px-icon-size-m-tablet)}.size-l{width:var(--px-icon-size-l-tablet);height:var(--px-icon-size-l-tablet);font-size:var(--px-icon-size-l-tablet)}.size-xl{width:var(--px-icon-size-xl-tablet);height:var(--px-icon-size-xl-tablet);font-size:var(--px-icon-size-xl-tablet)}.size-2xl{width:var(--px-icon-size-2xl-tablet);height:var(--px-icon-size-2xl-tablet);font-size:var(--px-icon-size-2xl-tablet)}}@media only screen and (min-width: 90rem){.size-2xs{width:var(--px-icon-size-2xs-desktop);height:var(--px-icon-size-2xs-desktop);font-size:var(--px-icon-size-2xs-desktop)}.size-xs{width:var(--px-icon-size-xs-desktop);height:var(--px-icon-size-xs-desktop);font-size:var(--px-icon-size-xs-desktop)}.size-s{width:var(--px-icon-size-s-desktop);height:var(--px-icon-size-s-desktop);font-size:var(--px-icon-size-s-desktop)}.size-m{width:var(--px-icon-size-m-desktop);height:var(--px-icon-size-m-desktop);font-size:var(--px-icon-size-m-desktop)}.size-l{width:var(--px-icon-size-l-desktop);height:var(--px-icon-size-l-desktop);font-size:var(--px-icon-size-l-desktop)}.size-xl{width:var(--px-icon-size-xl-desktop);height:var(--px-icon-size-xl-desktop);font-size:var(--px-icon-size-xl-desktop)}.size-2xl{width:var(--px-icon-size-2xl-desktop);height:var(--px-icon-size-2xl-desktop);font-size:var(--px-icon-size-2xl-desktop)}}i.icon-large:before{vertical-align:-10%;font-size:1.3333333333em}";
1437
+ const styles$a = ":host{line-height:1;display:inline-flex;flex-direction:column;justify-content:center}i{font-family:lavender;color:var(--px-icon-color-content-brand-default);font-size:var(--px-icon-size-m-mobile);line-height:1;font-style:unset;font-weight:400;-webkit-user-select:none;user-select:none;font-display:swap}svg{width:var(--px-icon-size-m-mobile);height:var(--px-icon-size-m-mobile);color:var(--px-icon-color-content-brand-default)}.inherit{color:inherit}.content-brand{color:var(--px-icon-color-content-brand-default)}.content-neutral-strong{color:var(--px-icon-color-content-neutral-strong-default)}.content-neutral-weak{color:var(--px-icon-color-content-neutral-weak-default)}.action-brand{color:var(--px-icon-color-action-brand-default)}.action-neutral{color:var(--px-icon-color-action-neutral-default)}.action-hover:hover{color:var(--px-icon-color-action-hover-default)}.action-active:active{color:var(--px-icon-color-action-active-default)}.action-disabled{color:var(--px-icon-color-action-disabled-default)}.purpose-success{color:var(--px-icon-color-purpose-success-default)}.purpose-warning{color:var(--px-icon-color-purpose-warning-default)}.purpose-error{color:var(--px-icon-color-purpose-error-default)}.purpose-unlimited{color:var(--px-icon-color-purpose-unlimited-default)}.purpose-promo{color:var(--px-icon-color-purpose-promo-default)}:host([inverted]) i{color:var(--px-icon-color-content-brand-inverted)}:host([inverted]) svg{color:var(--px-icon-color-content-brand-inverted)}:host([inverted]) .content-brand{color:var(--px-icon-color-content-brand-inverted)}:host([inverted]) .content-neutral-strong{color:var(--px-icon-color-content-neutral-strong-inverted)}:host([inverted]) .content-neutral-weak{color:var(--px-icon-color-content-neutral-weak-inverted)}:host([inverted]) .action-brand{color:var(--px-icon-color-action-brand-inverted)}:host([inverted]) .action-neutral{color:var(--px-icon-color-action-neutral-inverted)}:host([inverted]) .action-hover:hover{color:var(--px-icon-color-action-hover-inverted)}:host([inverted]) .action-active:active{color:var(--px-icon-color-action-active-inverted)}:host([inverted]) .action-disabled{color:var(--px-icon-color-action-disabled-inverted)}:host([inverted]) .purpose-success{color:var(--px-icon-color-purpose-success-inverted)}:host([inverted]) .purpose-warning{color:var(--px-icon-color-purpose-warning-inverted)}:host([inverted]) .purpose-error{color:var(--px-icon-color-purpose-error-inverted)}:host([inverted]) .purpose-unlimited{color:var(--px-icon-color-purpose-unlimited-inverted)}:host([inverted]) .purpose-promo{color:var(--px-icon-color-purpose-promo-inverted)}.size-2xs{width:var(--px-icon-size-2xs-mobile);height:var(--px-icon-size-2xs-mobile);font-size:var(--px-icon-size-2xs-mobile)}.size-xs{width:var(--px-icon-size-xs-mobile);height:var(--px-icon-size-xs-mobile);font-size:var(--px-icon-size-xs-mobile)}.size-s{width:var(--px-icon-size-s-mobile);height:var(--px-icon-size-s-mobile);font-size:var(--px-icon-size-s-mobile)}.size-m{width:var(--px-icon-size-m-mobile);height:var(--px-icon-size-m-mobile);font-size:var(--px-icon-size-m-mobile)}.size-l{width:var(--px-icon-size-l-mobile);height:var(--px-icon-size-l-mobile);font-size:var(--px-icon-size-l-mobile)}.size-xl{width:var(--px-icon-size-xl-mobile);height:var(--px-icon-size-xl-mobile);font-size:var(--px-icon-size-xl-mobile)}.size-2xl{width:var(--px-icon-size-2xl-mobile);height:var(--px-icon-size-2xl-mobile);font-size:var(--px-icon-size-2xl-mobile)}@media only screen and (min-width: 64rem){.size-2xs{width:var(--px-icon-size-2xs-tablet);height:var(--px-icon-size-2xs-tablet);font-size:var(--px-icon-size-2xs-tablet)}.size-xs{width:var(--px-icon-size-xs-tablet);height:var(--px-icon-size-xs-tablet);font-size:var(--px-icon-size-xs-tablet)}.size-s{width:var(--px-icon-size-s-tablet);height:var(--px-icon-size-s-tablet);font-size:var(--px-icon-size-s-tablet)}.size-m{width:var(--px-icon-size-m-tablet);height:var(--px-icon-size-m-tablet);font-size:var(--px-icon-size-m-tablet)}.size-l{width:var(--px-icon-size-l-tablet);height:var(--px-icon-size-l-tablet);font-size:var(--px-icon-size-l-tablet)}.size-xl{width:var(--px-icon-size-xl-tablet);height:var(--px-icon-size-xl-tablet);font-size:var(--px-icon-size-xl-tablet)}.size-2xl{width:var(--px-icon-size-2xl-tablet);height:var(--px-icon-size-2xl-tablet);font-size:var(--px-icon-size-2xl-tablet)}}@media only screen and (min-width: 90rem){.size-2xs{width:var(--px-icon-size-2xs-desktop);height:var(--px-icon-size-2xs-desktop);font-size:var(--px-icon-size-2xs-desktop)}.size-xs{width:var(--px-icon-size-xs-desktop);height:var(--px-icon-size-xs-desktop);font-size:var(--px-icon-size-xs-desktop)}.size-s{width:var(--px-icon-size-s-desktop);height:var(--px-icon-size-s-desktop);font-size:var(--px-icon-size-s-desktop)}.size-m{width:var(--px-icon-size-m-desktop);height:var(--px-icon-size-m-desktop);font-size:var(--px-icon-size-m-desktop)}.size-l{width:var(--px-icon-size-l-desktop);height:var(--px-icon-size-l-desktop);font-size:var(--px-icon-size-l-desktop)}.size-xl{width:var(--px-icon-size-xl-desktop);height:var(--px-icon-size-xl-desktop);font-size:var(--px-icon-size-xl-desktop)}.size-2xl{width:var(--px-icon-size-2xl-desktop);height:var(--px-icon-size-2xl-desktop);font-size:var(--px-icon-size-2xl-desktop)}}i.icon-large:before{vertical-align:-10%;font-size:1.3333333333em}";
1411
1438
  const styleSheet$b = new CSSStyleSheet();
1412
1439
  styleSheet$b.replaceSync(styles$a);
1413
1440
  class SVGIcon extends Icon {
@@ -1474,11 +1501,11 @@ class FontIcon extends Icon {
1474
1501
  }
1475
1502
  }
1476
1503
  customElements.define("px-icon-f", FontIcon);
1477
- const containerCss = '.container{font-family:var(--px-font-family);background-color:var(--background-color);background:var(--background-gradient);border-radius:var(--px-radius-main);padding:var(--px-padding-m);box-sizing:border-box}:host([inverted]) .container{background-color:var( --background-color, var(--px-color-bg-container-rich-default) )}.padding-2xs{padding:var(--px-padding-2xs)}.padding-xs{padding:var(--px-padding-xs)}.padding-s{padding:var(--px-padding-s)}.padding-m{padding:var(--px-padding-m)}.padding-l{padding:var(--px-padding-l)}.padding-xl{padding:var(--px-padding-xl)}.padding-none{padding:var(--px-padding-none)}.padding-block-2xs{padding-block:var(--px-padding-2xs)}.padding-block-xs{padding-block:var(--px-padding-xs)}.padding-block-s{padding-block:var(--px-padding-s)}.padding-block-m{padding-block:var(--px-padding-m)}.padding-block-l{padding-block:var(--px-padding-l)}.padding-block-xl{padding-block:var(--px-padding-xl)}.padding-block-none{padding-block:var(--px-padding-none)}.padding-inline-2xs{padding-inline:var(--px-padding-2xs)}.padding-inline-xs{padding-inline:var(--px-padding-xs)}.padding-inline-s{padding-inline:var(--px-padding-s)}.padding-inline-m{padding-inline:var(--px-padding-m)}.padding-inline-l{padding-inline:var(--px-padding-l)}.padding-inline-xl{padding-inline:var(--px-padding-xl)}.padding-inline-none{padding-inline:var(--px-padding-none)}.padding-top-2xs{padding-top:var(--px-padding-2xs)}.padding-top-xs{padding-top:var(--px-padding-xs)}.padding-top-s{padding-top:var(--px-padding-s)}.padding-top-m{padding-top:var(--px-padding-m)}.padding-top-l{padding-top:var(--px-padding-l)}.padding-top-xl{padding-top:var(--px-padding-xl)}.padding-top-none{padding-top:var(--px-padding-none)}.padding-right-2xs{padding-right:var(--px-padding-2xs)}.padding-right-xs{padding-right:var(--px-padding-xs)}.padding-right-s{padding-right:var(--px-padding-s)}.padding-right-m{padding-right:var(--px-padding-m)}.padding-right-l{padding-right:var(--px-padding-l)}.padding-right-xl{padding-right:var(--px-padding-xl)}.padding-right-none{padding-right:var(--px-padding-none)}.padding-bottom-2xs{padding-bottom:var(--px-padding-2xs)}.padding-bottom-xs{padding-bottom:var(--px-padding-xs)}.padding-bottom-s{padding-bottom:var(--px-padding-s)}.padding-bottom-m{padding-bottom:var(--px-padding-m)}.padding-bottom-l{padding-bottom:var(--px-padding-l)}.padding-bottom-xl{padding-bottom:var(--px-padding-xl)}.padding-bottom-none{padding-bottom:var(--px-padding-none)}.padding-left-2xs{padding-left:var(--px-padding-2xs)}.padding-left-xs{padding-left:var(--px-padding-xs)}.padding-left-s{padding-left:var(--px-padding-s)}.padding-left-m{padding-left:var(--px-padding-m)}.padding-left-l{padding-left:var(--px-padding-l)}.padding-left-xl{padding-left:var(--px-padding-xl)}.padding-left-none{padding-left:var(--px-padding-none)}.border-none{border:none}.border-s{border:var(--px-border-s) solid var(--px-color-border-main-default)}.border-m{border:var(--px-border-m) solid var(--px-color-border-main-default)}.border-l{border:var(--px-border-l) solid var(--px-color-border-main-default)}:host([inverted]) .border{border:var(--px-border-m) solid var(--px-color-border-main-inverted)}.border-radius-main{border-radius:var(--px-radius-main)}.border-radius-pill{border-radius:var(--px-radius-pill)}.no-border-radius-top{border-top-left-radius:var(--px-radius-none);border-top-right-radius:var(--px-radius-none)}.no-border-radius-right{border-top-right-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-bottom{border-bottom-left-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-left{border-top-left-radius:var(--px-radius-none);border-bottom-left-radius:var(--px-radius-none)}.no-border-radius-all,.border-radius-none{border-radius:var(--px-radius-none)}.bgimg{background-repeat:no-repeat}.background-size-cover{background-size:cover;background-position:center center}.background-size-contain{background-size:contain}.box-shadow-none{box-shadow:var(--px-shadow-none)}.box-shadow-s{box-shadow:var(--px-shadow-s)}.box-shadow-m{box-shadow:var(--px-shadow-m)}.box-shadow-l{box-shadow:var(--px-shadow-l)}.box-shadow-xl{box-shadow:var(--px-shadow-xl)}.anchored{position:relative}::slotted([slot="anchor-right"]),::slotted([slot="anchor-left"]),::slotted([slot="anchor-full"]){position:absolute;top:0}::slotted([slot="anchor-right"]),::slotted([slot="anchor-left"]){transform:translateY(-50%);z-index:2}::slotted([slot="anchor-right"]){right:var(--px-padding-m)}::slotted([slot="anchor-left"]){left:var(--px-padding-m)}.padding-none ::slotted([slot="anchor-right"]){right:var(--px-padding-none)}.padding-none ::slotted([slot="anchor-left"]){left:var(--px-padding-none)}.padding-2xs ::slotted([slot="anchor-right"]){right:var(--px-padding-2xs)}.padding-2xs ::slotted([slot="anchor-left"]){left:var(--px-padding-2xs)}.padding-xs ::slotted([slot="anchor-right"]){right:var(--px-padding-xs)}.padding-xs ::slotted([slot="anchor-left"]){left:var(--px-padding-xs)}.padding-s ::slotted([slot="anchor-right"]){right:var(--px-padding-s)}.padding-s ::slotted([slot="anchor-left"]){left:var(--px-padding-s)}.padding-m ::slotted([slot="anchor-right"]){right:var(--px-padding-m)}.padding-m ::slotted([slot="anchor-left"]){left:var(--px-padding-m)}.padding-l ::slotted([slot="anchor-right"]){right:var(--px-padding-l)}.padding-l ::slotted([slot="anchor-left"]){left:var(--px-padding-l)}.padding-xl ::slotted([slot="anchor-right"]){right:var(--px-padding-xl)}.padding-xl ::slotted([slot="anchor-left"]){left:var(--px-padding-xl)}::slotted([slot="anchor-full"]){transform:translateY(-100%);right:0;left:0;text-align:center;z-index:1}@media only screen and (max-width: 640px){.container{background-color:var(--background-color--mobile, var(--background-color));background-image:var( --background-gradient--mobile, var(--background-gradient) )}.padding-l{padding:var(--px-padding-l-mobile)}.padding-xl{padding:var(--px-padding-xl-mobile)}.padding-top-l{padding-top:var(--px-padding-l-mobile)}.padding-top-xl{padding-top:var(--px-padding-xl-mobile)}.padding-right-l{padding-right:var(--px-padding-l-mobile)}.padding-right-xl{padding-right:var(--px-padding-xl-mobile)}.padding-bottom-l{padding-bottom:var(--px-padding-l-mobile)}.padding-bottom-xl{padding-bottom:var(--px-padding-xl-mobile)}.padding-left-l{padding-left:var(--px-padding-l-mobile)}.padding-left-xl{padding-left:var(--px-padding-xl-mobile)}.padding-2xs--mobile{padding:var(--px-padding-2xs)}.padding-xs--mobile{padding:var(--px-padding-xs)}.padding-s--mobile{padding:var(--px-padding-s)}.padding-m--mobile{padding:var(--px-padding-m)}.padding-l--mobile{padding:var(--px-padding-l-mobile)}.padding-xl--mobile{padding:var(--px-padding-xl-mobile)}.padding-none--mobile{padding:var(--px-padding-none)}.padding-block-2xs--mobile{padding-block:var(--px-padding-2xs)}.padding-block-xs--mobile{padding-block:var(--px-padding-xs)}.padding-block-s--mobile{padding-block:var(--px-padding-s)}.padding-block-m--mobile{padding-block:var(--px-padding-m)}.padding-block-l--mobile{padding-block:var(--px-padding-l-mobile)}.padding-block-xl--mobile{padding-block:var(--px-padding-xl-mobile)}.padding-block-none--mobile{padding-block:var(--px-padding-none)}.padding-inline-2xs--mobile{padding-inline:var(--px-padding-2xs)}.padding-inline-xs--mobile{padding-inline:var(--px-padding-xs)}.padding-inline-s--mobile{padding-inline:var(--px-padding-s)}.padding-inline-m--mobile{padding-inline:var(--px-padding-m)}.padding-inline-l--mobile{padding-inline:var(--px-padding-l-mobile)}.padding-inline-xl--mobile{padding-inline:var(--px-padding-xl-mobile)}.padding-inline-none--mobile{padding-inline:var(--px-padding-none)}.padding-top-2xs--mobile{padding-top:var(--px-padding-2xs)}.padding-top-xs--mobile{padding-top:var(--px-padding-xs)}.padding-top-s--mobile{padding-top:var(--px-padding-s)}.padding-top-m--mobile{padding-top:var(--px-padding-m)}.padding-top-l--mobile{padding-top:var(--px-padding-l-mobile)}.padding-top-xl--mobile{padding-top:var(--px-padding-xl-mobile)}.padding-top-none--mobile{padding-top:var(--px-padding-none)}.padding-right-2xs--mobile{padding-right:var(--px-padding-2xs)}.padding-right-xs--mobile{padding-right:var(--px-padding-xs)}.padding-right-s--mobile{padding-right:var(--px-padding-s)}.padding-right-m--mobile{padding-right:var(--px-padding-m)}.padding-right-l--mobile{padding-right:var(--px-padding-l-mobile)}.padding-right-xl--mobile{padding-right:var(--px-padding-xl-mobile)}.padding-right-none--mobile{padding-right:var(--px-padding-none)}.padding-bottom-2xs--mobile{padding-bottom:var(--px-padding-2xs)}.padding-bottom-xs--mobile{padding-bottom:var(--px-padding-xs)}.padding-bottom-s--mobile{padding-bottom:var(--px-padding-s)}.padding-bottom-m--mobile{padding-bottom:var(--px-padding-m)}.padding-bottom-l--mobile{padding-bottom:var(--px-padding-l-mobile)}.padding-bottom-xl--mobile{padding-bottom:var(--px-padding-xl-mobile)}.padding-bottom-none--mobile{padding-bottom:var(--px-padding-none)}.padding-left-2xs--mobile{padding-left:var(--px-padding-2xs)}.padding-left-xs--mobile{padding-left:var(--px-padding-xs)}.padding-left-s--mobile{padding-left:var(--px-padding-s)}.padding-left-m--mobile{padding-left:var(--px-padding-m)}.padding-left-l--mobile{padding-left:var(--px-padding-l-mobile)}.padding-left-xl--mobile{padding-left:var(--px-padding-xl-mobile)}.padding-left-none--mobile{padding-left:var(--px-padding-none)}.no-border-radius-top--mobile{border-top-left-radius:var(--px-radius-none);border-top-right-radius:var(--px-radius-none)}.no-border-radius-right--mobile{border-top-right-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-bottom--mobile{border-bottom-left-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-left--mobile{border-top-left-radius:var(--px-radius-none);border-bottom-left-radius:var(--px-radius-none)}.no-border-radius-all--mobile{border-radius:var(--px-radius-none)}}.border-s ::slotted([slot="anchor-full"]){right:calc(var(--px-border-s) * -1);left:calc(var(--px-border-s) * -1)}.border-m ::slotted([slot="anchor-full"]){right:calc(var(--px-border-m) * -1);left:calc(var(--px-border-m) * -1)}.border-l ::slotted([slot="anchor-full"]){right:calc(var(--px-border-l) * -1);left:calc(var(--px-border-l) * -1)}@media only screen and (min-width: 768px) and (max-width: 1024px){.container{background-color:var(--background-color--tablet, var(--background-color));background-image:var( --background-gradient--tablet, var(--background-gradient) )}.no-border-radius-top--tablet{border-top-left-radius:var(--px-radius-none);border-top-right-radius:var(--px-radius-none)}.no-border-radius-right--tablet{border-top-right-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-bottom--tablet{border-bottom-left-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-left--tablet{border-top-left-radius:var(--px-radius-none);border-bottom-left-radius:var(--px-radius-none)}.no-border-radius-all--tablet{border-radius:var(--px-radius-none)}.padding-2xs--tablet{padding:var(--px-padding-2xs)}.padding-xs--tablet{padding:var(--px-padding-xs)}.padding-s--tablet{padding:var(--px-padding-s)}.padding-m--tablet{padding:var(--px-padding-m)}.padding-l--tablet{padding:var(--px-padding-l)}.padding-xl--tablet{padding:var(--px-padding-xl)}.padding-none--tablet{padding:var(--px-padding-none)}.padding-block-2xs--tablet{padding-block:var(--px-padding-2xs)}.padding-block-xs--tablet{padding-block:var(--px-padding-xs)}.padding-block-s--tablet{padding-block:var(--px-padding-s)}.padding-block-m--tablet{padding-block:var(--px-padding-m)}.padding-block-l--tablet{padding-block:var(--px-padding-l)}.padding-block-xl--tablet{padding-block:var(--px-padding-xl)}.padding-block-none--tablet{padding-block:var(--px-padding-none)}.padding-inline-2xs--tablet{padding-inline:var(--px-padding-2xs)}.padding-inline-xs--tablet{padding-inline:var(--px-padding-xs)}.padding-inline-s--tablet{padding-inline:var(--px-padding-s)}.padding-inline-m--tablet{padding-inline:var(--px-padding-m)}.padding-inline-l--tablet{padding-inline:var(--px-padding-l)}.padding-inline-xl--tablet{padding-inline:var(--px-padding-xl)}.padding-inline-none--tablet{padding-inline:var(--px-padding-none)}.padding-top-2xs--tablet{padding-top:var(--px-padding-2xs)}.padding-top-xs--tablet{padding-top:var(--px-padding-xs)}.padding-top-s--tablet{padding-top:var(--px-padding-s)}.padding-top-m--tablet{padding-top:var(--px-padding-m)}.padding-top-l--tablet{padding-top:var(--px-padding-l)}.padding-top-xl--tablet{padding-top:var(--px-padding-xl)}.padding-top-none--tablet{padding-top:var(--px-padding-none)}.padding-right-2xs--tablet{padding-right:var(--px-padding-2xs)}.padding-right-xs--tablet{padding-right:var(--px-padding-xs)}.padding-right-s--tablet{padding-right:var(--px-padding-s)}.padding-right-m--tablet{padding-right:var(--px-padding-m)}.padding-right-l--tablet{padding-right:var(--px-padding-l)}.padding-right-xl--tablet{padding-right:var(--px-padding-xl)}.padding-right-none--tablet{padding-right:var(--px-padding-none)}.padding-bottom-2xs--tablet{padding-bottom:var(--px-padding-2xs)}.padding-bottom-xs--tablet{padding-bottom:var(--px-padding-xs)}.padding-bottom-s--tablet{padding-bottom:var(--px-padding-s)}.padding-bottom-m--tablet{padding-bottom:var(--px-padding-m)}.padding-bottom-l--tablet{padding-bottom:var(--px-padding-l)}.padding-bottom-xl--tablet{padding-bottom:var(--px-padding-xl)}.padding-bottom-none--tablet{padding-bottom:var(--px-padding-none)}.padding-left-2xs--tablet{padding-left:var(--px-padding-2xs)}.padding-left-xs--tablet{padding-left:var(--px-padding-xs)}.padding-left-s--tablet{padding-left:var(--px-padding-s)}.padding-left-m--tablet{padding-left:var(--px-padding-m)}.padding-left-l--tablet{padding-left:var(--px-padding-l)}.padding-left-xl--tablet{padding-left:var(--px-padding-xl)}.padding-left-none--tablet{padding-left:var(--px-padding-none)}}@media only screen and (min-width: 1025px){.container{background-color:var(--background-color--laptop, var(--background-color));background-image:var( --background-gradient--laptop, var(--background-gradient) )}.no-border-radius-top--laptop{border-top-left-radius:var(--px-radius-none);border-top-right-radius:var(--px-radius-none)}.no-border-radius-right--laptop{border-top-right-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-bottom--laptop{border-bottom-left-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-left--laptop{border-top-left-radius:var(--px-radius-none);border-bottom-left-radius:var(--px-radius-none)}.no-border-radius-all--laptop{border-radius:var(--px-radius-none)}.padding-2xs--laptop{padding:var(--px-padding-2xs)}.padding-xs--laptop{padding:var(--px-padding-xs)}.padding-s--laptop{padding:var(--px-padding-s)}.padding-m--laptop{padding:var(--px-padding-m)}.padding-l--laptop{padding:var(--px-padding-l)}.padding-xl--laptop{padding:var(--px-padding-xl)}.padding-none--laptop{padding:var(--px-padding-none)}.padding-block-2xs--laptop{padding-block:var(--px-padding-2xs)}.padding-block-xs--laptop{padding-block:var(--px-padding-xs)}.padding-block-s--laptop{padding-block:var(--px-padding-s)}.padding-block-m--laptop{padding-block:var(--px-padding-m)}.padding-block-l--laptop{padding-block:var(--px-padding-l)}.padding-block-xl--laptop{padding-block:var(--px-padding-xl)}.padding-block-none--laptop{padding-block:var(--px-padding-none)}.padding-inline-2xs--laptop{padding-inline:var(--px-padding-2xs)}.padding-inline-xs--laptop{padding-inline:var(--px-padding-xs)}.padding-inline-s--laptop{padding-inline:var(--px-padding-s)}.padding-inline-m--laptop{padding-inline:var(--px-padding-m)}.padding-inline-l--laptop{padding-inline:var(--px-padding-l)}.padding-inline-xl--laptop{padding-inline:var(--px-padding-xl)}.padding-inline-none--laptop{padding-inline:var(--px-padding-none)}.padding-top-2xs--laptop{padding-top:var(--px-padding-2xs)}.padding-top-xs--laptop{padding-top:var(--px-padding-xs)}.padding-top-s--laptop{padding-top:var(--px-padding-s)}.padding-top-m--laptop{padding-top:var(--px-padding-m)}.padding-top-l--laptop{padding-top:var(--px-padding-l)}.padding-top-xl--laptop{padding-top:var(--px-padding-xl)}.padding-top-none--laptop{padding-top:var(--px-padding-none)}.padding-right-2xs--laptop{padding-right:var(--px-padding-2xs)}.padding-right-xs--laptop{padding-right:var(--px-padding-xs)}.padding-right-s--laptop{padding-right:var(--px-padding-s)}.padding-right-m--laptop{padding-right:var(--px-padding-m)}.padding-right-l--laptop{padding-right:var(--px-padding-l)}.padding-right-xl--laptop{padding-right:var(--px-padding-xl)}.padding-right-none--laptop{padding-right:var(--px-padding-none)}.padding-bottom-2xs--laptop{padding-bottom:var(--px-padding-2xs)}.padding-bottom-xs--laptop{padding-bottom:var(--px-padding-xs)}.padding-bottom-s--laptop{padding-bottom:var(--px-padding-s)}.padding-bottom-m--laptop{padding-bottom:var(--px-padding-m)}.padding-bottom-l--laptop{padding-bottom:var(--px-padding-l)}.padding-bottom-xl--laptop{padding-bottom:var(--px-padding-xl)}.padding-bottom-none--laptop{padding-bottom:var(--px-padding-none)}.padding-left-2xs--laptop{padding-left:var(--px-padding-2xs)}.padding-left-xs--laptop{padding-left:var(--px-padding-xs)}.padding-left-s--laptop{padding-left:var(--px-padding-s)}.padding-left-m--laptop{padding-left:var(--px-padding-m)}.padding-left-l--laptop{padding-left:var(--px-padding-l)}.padding-left-xl--laptop{padding-left:var(--px-padding-xl)}.padding-left-none--laptop{padding-left:var(--px-padding-none)}}';
1504
+ const containerCss = '.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}}';
1478
1505
  const containerStyles = new CSSStyleSheet();
1479
1506
  containerStyles.replaceSync(containerCss);
1480
1507
  const anchorValues = ["anchor-right", "anchor-left", "anchor-full"];
1481
- const bgImgSizeValues = ["", "cover", "contain", "default"];
1508
+ const backgroundSizeValues = ["", "cover", "contain", "default"];
1482
1509
  const _Container = class _Container extends PxElement {
1483
1510
  constructor() {
1484
1511
  super(containerStyles);
@@ -1488,29 +1515,6 @@ const _Container = class _Container extends PxElement {
1488
1515
  <slot name="anchor-full"></slot>
1489
1516
  <slot></slot>
1490
1517
  </div>`;
1491
- this.onWindowResize = () => {
1492
- if (this.hasAttribute("background-image")) {
1493
- this.loadImg("background-image", this.getAttribute("background-image"));
1494
- }
1495
- if (this.hasAttribute("background-image--mobile")) {
1496
- this.loadImg(
1497
- "background-image--mobile",
1498
- this.getAttribute("background-image--mobile")
1499
- );
1500
- }
1501
- if (this.hasAttribute("background-image--tablet")) {
1502
- this.loadImg(
1503
- "background-image--tablet",
1504
- this.getAttribute("background-image--tablet")
1505
- );
1506
- }
1507
- if (this.hasAttribute("background-image--laptop")) {
1508
- this.loadImg(
1509
- "background-image--laptop",
1510
- this.getAttribute("background-image--laptop")
1511
- );
1512
- }
1513
- };
1514
1518
  this.shadowRoot.innerHTML = this.template();
1515
1519
  }
1516
1520
  static get observedAttributes() {
@@ -1545,6 +1549,11 @@ const _Container = class _Container extends PxElement {
1545
1549
  "padding-bottom--laptop",
1546
1550
  "padding-left--laptop",
1547
1551
  "border",
1552
+ "border-color",
1553
+ "border-side",
1554
+ "border-side--mobile",
1555
+ "border-side--tablet",
1556
+ "border-side--laptop",
1548
1557
  "border-radius",
1549
1558
  "no-border-radius",
1550
1559
  "no-border-radius--mobile",
@@ -1568,34 +1577,335 @@ const _Container = class _Container extends PxElement {
1568
1577
  "inverted"
1569
1578
  ];
1570
1579
  }
1571
- get padding() {
1572
- return this.getAttribute("padding");
1573
- }
1574
- set padding(value) {
1575
- this.setAttribute("padding", value);
1576
- }
1577
- get paddingBlock() {
1578
- return this.getAttribute("padding-block");
1580
+ connectedCallback() {
1581
+ var _a, _b, _c, _d;
1582
+ super.connectedCallback();
1583
+ if (!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) {
1584
+ this.padding = "m";
1585
+ }
1586
+ if (!this.backgroundColor) {
1587
+ this.backgroundColor = "container-neutral-bare";
1588
+ }
1589
+ if (!this.borderColor) {
1590
+ this.borderColor = "container-main";
1591
+ }
1592
+ const anchorSlot = this.querySelector("[slot]");
1593
+ if (anchorSlot) {
1594
+ if (anchorValues.includes(anchorSlot.getAttribute("slot"))) {
1595
+ this.shadowRoot.querySelector(".container").classList.toggle("anchored");
1596
+ }
1597
+ }
1598
+ if (((_a = this.parentElement) == null ? void 0 : _a.getAttribute("align-items")) === "stretch") {
1599
+ if (((_b = this.parentElement) == null ? void 0 : _b.getAttribute("direction")) === "column") {
1600
+ this.$el.style.width = "100%";
1601
+ } else {
1602
+ this.$el.style.height = "100%";
1603
+ }
1604
+ }
1605
+ if (((_c = this.parentElement) == null ? void 0 : _c.localName) === "px-grid-item" || ((_d = this.parentElement) == null ? void 0 : _d.localName) === "px-a") {
1606
+ this.$el.style.height = "100%";
1607
+ }
1579
1608
  }
1580
- set paddingBlock(value) {
1581
- this.setAttribute("padding-block", value);
1609
+ attributeChangedCallback(attrName, oldValue, newValue) {
1610
+ if (oldValue !== newValue) {
1611
+ switch (attrName) {
1612
+ case "padding":
1613
+ case "padding--mobile":
1614
+ case "padding--tablet":
1615
+ case "padding--laptop":
1616
+ this.updatePadding(attrName, oldValue, newValue, paddingValues, [
1617
+ "top",
1618
+ "right",
1619
+ "bottom",
1620
+ "left"
1621
+ ]);
1622
+ break;
1623
+ case "padding-inline":
1624
+ case "padding-inline--mobile":
1625
+ case "padding-inline--tablet":
1626
+ case "padding-inline--laptop":
1627
+ this.updatePadding(attrName, oldValue, newValue, paddingValues, [
1628
+ "left",
1629
+ "right"
1630
+ ]);
1631
+ break;
1632
+ case "padding-block":
1633
+ case "padding-block--mobile":
1634
+ case "padding-block--tablet":
1635
+ case "padding-block--laptop":
1636
+ this.updatePadding(attrName, oldValue, newValue, paddingValues, [
1637
+ "top",
1638
+ "bottom"
1639
+ ]);
1640
+ break;
1641
+ case "padding-top":
1642
+ case "padding-top--mobile":
1643
+ case "padding-top--tablet":
1644
+ case "padding-top--laptop":
1645
+ this.updatePadding(attrName, oldValue, newValue, paddingValues, [
1646
+ "top"
1647
+ ]);
1648
+ break;
1649
+ case "padding-right":
1650
+ case "padding-right--mobile":
1651
+ case "padding-right--tablet":
1652
+ case "padding-right--laptop":
1653
+ this.updatePadding(attrName, oldValue, newValue, paddingValues, [
1654
+ "right"
1655
+ ]);
1656
+ break;
1657
+ case "padding-bottom":
1658
+ case "padding-bottom--mobile":
1659
+ case "padding-bottom--tablet":
1660
+ case "padding-bottom--laptop":
1661
+ this.updatePadding(attrName, oldValue, newValue, paddingValues, [
1662
+ "bottom"
1663
+ ]);
1664
+ break;
1665
+ case "padding-left":
1666
+ case "padding-left--mobile":
1667
+ case "padding-left--tablet":
1668
+ case "padding-left--laptop":
1669
+ this.updatePadding(attrName, oldValue, newValue, paddingValues, [
1670
+ "left"
1671
+ ]);
1672
+ break;
1673
+ case "border":
1674
+ this.updateAttribute(attrName, oldValue, newValue, borderValues);
1675
+ break;
1676
+ case "border-color":
1677
+ this.updateBorderColor(attrName, newValue);
1678
+ break;
1679
+ case "border-side":
1680
+ case "border-side--mobile":
1681
+ case "border-side--tablet":
1682
+ case "border-side--laptop":
1683
+ this.updateAttribute(attrName, oldValue, newValue, borderSideValues);
1684
+ break;
1685
+ case "border-radius":
1686
+ this.updateAttribute(
1687
+ attrName,
1688
+ oldValue,
1689
+ newValue,
1690
+ borderRadiusValues
1691
+ );
1692
+ break;
1693
+ case "no-border-radius":
1694
+ case "no-border-radius--mobile":
1695
+ case "no-border-radius--tablet":
1696
+ case "no-border-radius--laptop":
1697
+ this.updateNoBorderRadius(
1698
+ attrName,
1699
+ oldValue,
1700
+ newValue,
1701
+ noBorderRadiusValues
1702
+ );
1703
+ break;
1704
+ case "background-color":
1705
+ case "background-color--mobile":
1706
+ case "background-color--tablet":
1707
+ case "background-color--laptop":
1708
+ this.updateBackgroundColor(attrName, newValue);
1709
+ break;
1710
+ case "background-gradient":
1711
+ case "background-gradient--mobile":
1712
+ case "background-gradient--tablet":
1713
+ case "background-gradient--laptop":
1714
+ this.updateGradient(attrName, newValue);
1715
+ break;
1716
+ case "background-size":
1717
+ this.updateAttribute(
1718
+ attrName,
1719
+ oldValue,
1720
+ newValue,
1721
+ backgroundSizeValues
1722
+ );
1723
+ break;
1724
+ case "background-image":
1725
+ case "background-image--mobile":
1726
+ case "background-image--tablet":
1727
+ case "background-image--laptop":
1728
+ this.updateBackgroundImg(attrName, newValue);
1729
+ break;
1730
+ case "background-position":
1731
+ if (newValue !== null && newValue !== "") {
1732
+ this.$el.style.backgroundPosition = newValue;
1733
+ }
1734
+ break;
1735
+ case "box-shadow":
1736
+ this.updateAttribute(attrName, oldValue, newValue, boxShadowValues);
1737
+ break;
1738
+ default:
1739
+ super.attributeChangedCallback(attrName, oldValue, newValue);
1740
+ break;
1741
+ }
1742
+ }
1582
1743
  }
1583
- get paddingInline() {
1584
- return this.getAttribute("padding-inline");
1744
+ updatePadding(attrName, oldValue, newValue, attrValues, sideValues) {
1745
+ if (!this.checkName(attrValues, newValue)) {
1746
+ console.error(`Bad ${attrName} value for`, this.$el);
1747
+ return;
1748
+ }
1749
+ const hasBreakpoint = attrName.includes("--");
1750
+ const breakpoint = hasBreakpoint ? attrName.split("--")[1] : "";
1751
+ const updateStyle = (breakpoint2, value, sideValues2, override) => {
1752
+ const breakpointValue = breakpoint2 === "laptop" ? "desktop" : breakpoint2;
1753
+ if (value !== null && value !== "" && value !== "default") {
1754
+ sideValues2.forEach((side) => {
1755
+ const propertyName = `--container-padding-${side}--${breakpoint2}`;
1756
+ if (override || !this.$el.style.getPropertyValue(propertyName)) {
1757
+ this.$el.style.setProperty(
1758
+ propertyName,
1759
+ `var(--px-padding-${value}-${breakpointValue})`
1760
+ );
1761
+ }
1762
+ });
1763
+ }
1764
+ };
1765
+ if (hasBreakpoint) {
1766
+ updateStyle(breakpoint, oldValue, sideValues, true);
1767
+ updateStyle(breakpoint, newValue, sideValues, true);
1768
+ } else {
1769
+ ["mobile", "tablet", "laptop"].forEach((breakpoint2) => {
1770
+ updateStyle(breakpoint2, oldValue, sideValues, false);
1771
+ updateStyle(breakpoint2, newValue, sideValues, false);
1772
+ });
1773
+ }
1585
1774
  }
1586
- set paddingInline(value) {
1587
- this.setAttribute("padding-inline", value);
1775
+ updateBackgroundImg(attrName, newValue) {
1776
+ this.$el.style.setProperty(`--${attrName}`, `url("${newValue}")`);
1588
1777
  }
1589
- get paddingTop() {
1590
- return this.getAttribute("padding-top");
1778
+ updateGradient(attrName, newValue) {
1779
+ if (this.checkName(gradientValues, newValue)) {
1780
+ const splitResult = this.splitAttrNameFromBreakpoint(attrName);
1781
+ attrName = splitResult.attrName;
1782
+ const breakpoint = splitResult.breakpoint;
1783
+ this.$el.style.setProperty(
1784
+ `--${attrName}${breakpoint}`,
1785
+ `linear-gradient(var(--px-background-color-container-gradient-${newValue}))`
1786
+ );
1787
+ } else {
1788
+ console.error(
1789
+ `${newValue} is not an allowed background-gradient value for ${this.$el}`
1790
+ );
1791
+ }
1591
1792
  }
1592
- set paddingTop(value) {
1593
- this.setAttribute("padding-top", value);
1793
+ updateBackgroundColor(attrName, newValue) {
1794
+ if (this.checkName(backgroundColorValues, newValue)) {
1795
+ const splitResult = this.splitAttrNameFromBreakpoint(attrName);
1796
+ const breakpoint = splitResult.breakpoint;
1797
+ this.$el.style.setProperty(
1798
+ `--${splitResult.attrName}${breakpoint}`,
1799
+ `var(--px-background-color-${newValue}-default)`
1800
+ );
1801
+ this.$el.style.setProperty(
1802
+ `--${splitResult.attrName}-inverted${breakpoint}`,
1803
+ `var(--px-background-color-${newValue}-inverted)`
1804
+ );
1805
+ } else {
1806
+ console.error(
1807
+ `${newValue} is not an allowed ${attrName} value for ${this.$el}`
1808
+ );
1809
+ }
1594
1810
  }
1595
- get paddingRight() {
1596
- return this.getAttribute("padding-right");
1811
+ updateBorderColor(attrName, newValue) {
1812
+ if (this.checkName(borderColorValues, newValue)) {
1813
+ this.$el.style.setProperty(
1814
+ `--${attrName}`,
1815
+ `var(--px-border-color-${newValue}-default)`
1816
+ );
1817
+ this.$el.style.setProperty(
1818
+ `--${attrName}-inverted`,
1819
+ `var(--px-border-color-${newValue}-inverted)`
1820
+ );
1821
+ } else {
1822
+ console.error(
1823
+ `${newValue} is not an allowed ${attrName} value for ${this.$el}`
1824
+ );
1825
+ }
1597
1826
  }
1598
- set paddingRight(value) {
1827
+ updateNoBorderRadius(attrName, oldValue, newValue, attrValues) {
1828
+ if (!this.checkName(attrValues, newValue)) {
1829
+ console.error(
1830
+ `${newValue} is not an allowed ${attrName} value for ${this.$el}`
1831
+ );
1832
+ } else {
1833
+ const splitResult = this.splitAttrNameFromBreakpoint(attrName);
1834
+ const breakpoint = splitResult.breakpoint;
1835
+ if (oldValue !== null && oldValue !== "") {
1836
+ this.$el.classList.toggle(
1837
+ `${splitResult.attrName}-${oldValue}${breakpoint}`
1838
+ );
1839
+ }
1840
+ if (newValue !== null && newValue !== "") {
1841
+ this.$el.classList.toggle(
1842
+ `${splitResult.attrName}-${newValue}${breakpoint}`
1843
+ );
1844
+ }
1845
+ }
1846
+ }
1847
+ updateAttribute(attrName, oldValue, newValue, attrValues) {
1848
+ if (!this.checkName(attrValues, newValue)) {
1849
+ console.error(
1850
+ `${newValue} is not an allowed ${attrName} value for ${this.$el}`
1851
+ );
1852
+ } else {
1853
+ const splitResult = this.splitAttrNameFromBreakpoint(attrName);
1854
+ const breakpoint = splitResult.breakpoint;
1855
+ if (oldValue !== null && oldValue !== "") {
1856
+ this.$el.classList.toggle(
1857
+ `${splitResult.attrName}-${oldValue}${breakpoint}`
1858
+ );
1859
+ }
1860
+ if (newValue !== null && newValue !== "") {
1861
+ this.$el.classList.toggle(
1862
+ `${splitResult.attrName}-${newValue}${breakpoint}`
1863
+ );
1864
+ }
1865
+ }
1866
+ }
1867
+ splitAttrNameFromBreakpoint(attrName) {
1868
+ let breakpoint = "";
1869
+ if (["--mobile", "--tablet", "--laptop"].some(
1870
+ (suffix) => attrName.includes(suffix)
1871
+ )) {
1872
+ const attrNameSplit = attrName.split("--");
1873
+ attrName = attrNameSplit[0];
1874
+ breakpoint = `--${attrNameSplit[1]}`;
1875
+ }
1876
+ return { attrName, breakpoint };
1877
+ }
1878
+ checkName(values, value) {
1879
+ return values.includes(value);
1880
+ }
1881
+ get padding() {
1882
+ return this.getAttribute("padding");
1883
+ }
1884
+ set padding(value) {
1885
+ this.setAttribute("padding", value);
1886
+ }
1887
+ get paddingBlock() {
1888
+ return this.getAttribute("padding-block");
1889
+ }
1890
+ set paddingBlock(value) {
1891
+ this.setAttribute("padding-block", value);
1892
+ }
1893
+ get paddingInline() {
1894
+ return this.getAttribute("padding-inline");
1895
+ }
1896
+ set paddingInline(value) {
1897
+ this.setAttribute("padding-inline", value);
1898
+ }
1899
+ get paddingTop() {
1900
+ return this.getAttribute("padding-top");
1901
+ }
1902
+ set paddingTop(value) {
1903
+ this.setAttribute("padding-top", value);
1904
+ }
1905
+ get paddingRight() {
1906
+ return this.getAttribute("padding-right");
1907
+ }
1908
+ set paddingRight(value) {
1599
1909
  this.setAttribute("padding-right", value);
1600
1910
  }
1601
1911
  get paddingBottom() {
@@ -1742,6 +2052,36 @@ const _Container = class _Container extends PxElement {
1742
2052
  set border(value) {
1743
2053
  this.setAttribute("border", value);
1744
2054
  }
2055
+ get borderColor() {
2056
+ return this.getAttribute("border-color");
2057
+ }
2058
+ set borderColor(value) {
2059
+ this.setAttribute("border-color", value);
2060
+ }
2061
+ get borderSide() {
2062
+ return this.getAttribute("border-side");
2063
+ }
2064
+ set borderSide(value) {
2065
+ this.setAttribute("border-side", value);
2066
+ }
2067
+ get borderSideMobile() {
2068
+ return this.getAttribute("border-side--mobile");
2069
+ }
2070
+ set borderSideMobile(value) {
2071
+ this.setAttribute("border-side--mobile", value);
2072
+ }
2073
+ get borderSideTablet() {
2074
+ return this.getAttribute("border-side--tablet");
2075
+ }
2076
+ set borderSideTablet(value) {
2077
+ this.setAttribute("border-side--tablet", value);
2078
+ }
2079
+ get borderSideLaptop() {
2080
+ return this.getAttribute("border-side--laptop");
2081
+ }
2082
+ set borderSideLaptop(value) {
2083
+ this.setAttribute("border-side--laptop", value);
2084
+ }
1745
2085
  get borderRadius() {
1746
2086
  return this.getAttribute("border-radius");
1747
2087
  }
@@ -1772,28 +2112,28 @@ const _Container = class _Container extends PxElement {
1772
2112
  set noBorderRadiusLaptop(value) {
1773
2113
  this.setAttribute("no-border-radius--laptop", value);
1774
2114
  }
1775
- get bgColor() {
2115
+ get backgroundColor() {
1776
2116
  return this.getAttribute("background-color");
1777
2117
  }
1778
- set bgColor(value) {
2118
+ set backgroundColor(value) {
1779
2119
  this.setAttribute("background-color", value);
1780
2120
  }
1781
- get bgColorMobile() {
2121
+ get backgroundColorMobile() {
1782
2122
  return this.getAttribute("background-color--mobile");
1783
2123
  }
1784
- set bgColorMobile(value) {
2124
+ set backgroundColorMobile(value) {
1785
2125
  this.setAttribute("background-color--mobile", value);
1786
2126
  }
1787
- get bgColorTablet() {
2127
+ get backgroundColorTablet() {
1788
2128
  return this.getAttribute("background-color--tablet");
1789
2129
  }
1790
- set bgColorTablet(value) {
2130
+ set backgroundColorTablet(value) {
1791
2131
  this.setAttribute("background-color--tablet", value);
1792
2132
  }
1793
- get bgColorLaptop() {
2133
+ get backgroundColorLaptop() {
1794
2134
  return this.getAttribute("background-color--laptop");
1795
2135
  }
1796
- set bgColorLaptop(value) {
2136
+ set backgroundColorLaptop(value) {
1797
2137
  this.setAttribute("background-color--laptop", value);
1798
2138
  }
1799
2139
  get gradient() {
@@ -1820,46 +2160,46 @@ const _Container = class _Container extends PxElement {
1820
2160
  set gradientLaptop(value) {
1821
2161
  this.setAttribute("background-gradient--laptop", value);
1822
2162
  }
1823
- get bgImg() {
2163
+ get backgroundImage() {
1824
2164
  return this.getAttribute("background-image");
1825
2165
  }
1826
- set bgImg(value) {
2166
+ set backgroundImage(value) {
1827
2167
  this.setAttribute("background-image", value);
1828
2168
  }
1829
- get bgImgMobile() {
2169
+ get backgroundImageMobile() {
1830
2170
  return this.getAttribute("background-image--mobile");
1831
2171
  }
1832
- set bgImgMobile(value) {
2172
+ set backgroundImageMobile(value) {
1833
2173
  this.setAttribute("background-image--mobile", value);
1834
2174
  }
1835
- get bgImgTablet() {
2175
+ get backgroundImageTablet() {
1836
2176
  return this.getAttribute("background-image--tablet");
1837
2177
  }
1838
- set bgImgTablet(value) {
2178
+ set backgroundImageTablet(value) {
1839
2179
  this.setAttribute("background-image--tablet", value);
1840
2180
  }
1841
- get bgImgLaptop() {
2181
+ get backgroundImageLaptop() {
1842
2182
  return this.getAttribute("background-image--laptop");
1843
2183
  }
1844
- set bgImgLaptop(value) {
2184
+ set backgroundImageLaptop(value) {
1845
2185
  this.setAttribute("background-image--laptop", value);
1846
2186
  }
1847
- get bgImgSize() {
2187
+ get backgroundSize() {
1848
2188
  return this.getAttribute("background-size");
1849
2189
  }
1850
- set bgImgSize(value) {
2190
+ set backgroundSize(value) {
1851
2191
  this.setAttribute("background-size", value);
1852
2192
  }
1853
- get bgImgPosition() {
2193
+ get backgroundPosition() {
1854
2194
  return this.getAttribute("background-position");
1855
2195
  }
1856
- set bgImgPosition(value) {
2196
+ set backgroundPosition(value) {
1857
2197
  this.setAttribute("background-position", value);
1858
2198
  }
1859
- get shadow() {
2199
+ get boxShadow() {
1860
2200
  return this.getAttribute("box-shadow");
1861
2201
  }
1862
- set shadow(value) {
2202
+ set boxShadow(value) {
1863
2203
  this.setAttribute("box-shadow", value);
1864
2204
  }
1865
2205
  get inverted() {
@@ -1868,227 +2208,12 @@ const _Container = class _Container extends PxElement {
1868
2208
  set inverted(value) {
1869
2209
  this.setAttribute("inverted", value);
1870
2210
  }
1871
- connectedCallback() {
1872
- var _a, _b, _c, _d;
1873
- super.connectedCallback();
1874
- this.style.setProperty(
1875
- "--background-color",
1876
- "var(--px-color-bg-container-rich-inverted)"
1877
- );
1878
- const anchorSlot = this.querySelector("[slot]");
1879
- if (anchorSlot) {
1880
- if (anchorValues.includes(anchorSlot.getAttribute("slot"))) {
1881
- this.shadowRoot.querySelector(".container").classList.toggle("anchored");
1882
- }
1883
- }
1884
- if (((_a = this.parentElement) == null ? void 0 : _a.getAttribute("align-items")) === "stretch") {
1885
- if (((_b = this.parentElement) == null ? void 0 : _b.getAttribute("direction")) === "column") {
1886
- this.$el.style.width = "100%";
1887
- } else {
1888
- this.$el.style.height = "100%";
1889
- }
1890
- }
1891
- if (((_c = this.parentElement) == null ? void 0 : _c.localName) === "px-grid-item" || ((_d = this.parentElement) == null ? void 0 : _d.localName) === "px-a") {
1892
- this.$el.style.height = "100%";
1893
- }
1894
- if (this.hasAttribute("background-image") || this.hasAttribute("background-image--mobile") || this.hasAttribute("background-image--tablet") || this.hasAttribute("background-image--laptop")) {
1895
- window.addEventListener("resize", this.onWindowResize);
1896
- }
1897
- }
1898
- disconnectedCallback() {
1899
- window.removeEventListener("resize", this.onWindowResize);
1900
- }
1901
- attributeChangedCallback(attrName, oldValue, newValue) {
1902
- if (oldValue !== newValue) {
1903
- switch (attrName) {
1904
- case "padding":
1905
- case "padding-block":
1906
- case "padding-inline":
1907
- case "padding-top":
1908
- case "padding-right":
1909
- case "padding-bottom":
1910
- case "padding-left":
1911
- case "padding--mobile":
1912
- case "padding-block--mobile":
1913
- case "padding-inline--mobile":
1914
- case "padding-top--mobile":
1915
- case "padding-right--mobile":
1916
- case "padding-bottom--mobile":
1917
- case "padding-left--mobile":
1918
- case "padding--tablet":
1919
- case "padding-block--tablet":
1920
- case "padding-inline--tablet":
1921
- case "padding-top--tablet":
1922
- case "padding-right--tablet":
1923
- case "padding-bottom--tablet":
1924
- case "padding-left--tablet":
1925
- case "padding--laptop":
1926
- case "padding-block--laptop":
1927
- case "padding-inline--laptop":
1928
- case "padding-top--laptop":
1929
- case "padding-right--laptop":
1930
- case "padding-bottom--laptop":
1931
- case "padding-left--laptop":
1932
- this.updateAttribute(attrName, oldValue, newValue, paddingValues);
1933
- break;
1934
- case "border":
1935
- this.updateAttribute(attrName, oldValue, newValue, borderValues);
1936
- break;
1937
- case "border-radius":
1938
- this.updateAttribute(
1939
- attrName,
1940
- oldValue,
1941
- newValue,
1942
- borderRadiusValues
1943
- );
1944
- break;
1945
- case "no-border-radius":
1946
- case "no-border-radius--mobile":
1947
- case "no-border-radius--tablet":
1948
- case "no-border-radius--laptop":
1949
- this.updateNoBorderRadius(
1950
- attrName,
1951
- oldValue,
1952
- newValue,
1953
- noBorderRadiusValues
1954
- );
1955
- break;
1956
- case "background-color":
1957
- case "background-color--mobile":
1958
- case "background-color--tablet":
1959
- case "background-color--laptop":
1960
- this.updateBgColor(attrName, newValue);
1961
- break;
1962
- case "background-gradient":
1963
- case "background-gradient--mobile":
1964
- case "background-gradient--tablet":
1965
- case "background-gradient--laptop":
1966
- this.updateGradient(attrName, newValue);
1967
- break;
1968
- case "background-size":
1969
- this.updateAttribute(attrName, oldValue, newValue, bgImgSizeValues);
1970
- break;
1971
- case "background-image":
1972
- case "background-image--mobile":
1973
- case "background-image--tablet":
1974
- case "background-image--laptop":
1975
- if (newValue !== "") {
1976
- this.$el.classList.toggle("bgimg");
1977
- this.loadImg(attrName, newValue);
1978
- }
1979
- break;
1980
- case "background-position":
1981
- if (newValue !== null && newValue !== "") {
1982
- this.$el.style.backgroundPosition = newValue;
1983
- }
1984
- break;
1985
- case "box-shadow":
1986
- this.updateAttribute(attrName, oldValue, newValue, shadowValues);
1987
- break;
1988
- default:
1989
- super.attributeChangedCallback(attrName, oldValue, newValue);
1990
- break;
1991
- }
1992
- }
1993
- }
1994
- loadImg(attrName, newValue) {
1995
- if (attrName === "background-image") {
1996
- this.$el.style.backgroundImage = `url("${newValue}")`;
1997
- } else if (window.matchMedia("only screen and (max-width: 767px)").matches && attrName === "background-image--mobile") {
1998
- this.$el.style.backgroundImage = `url("${newValue}")`;
1999
- } else if (window.matchMedia(
2000
- "only screen and (min-width: 768px) and (max-width: 1024px)"
2001
- ).matches && attrName === "background-image--tablet") {
2002
- this.$el.style.backgroundImage = `url("${newValue}")`;
2003
- } else if (window.matchMedia("only screen and (min-width: 1025px)").matches && attrName === "background-image--laptop") {
2004
- this.$el.style.backgroundImage = `url("${newValue}")`;
2005
- }
2006
- }
2007
- updateGradient(attrName, newValue) {
2008
- if (this.checkName(gradientValues, newValue)) {
2009
- const splitResult = this.splitAttrNameFromBreakpoint(attrName);
2010
- attrName = splitResult.attrName;
2011
- const breakpoint = splitResult.breakpoint;
2012
- this.$el.style.setProperty(
2013
- `--${attrName}${breakpoint}`,
2014
- `linear-gradient(var(--px-color-bg-gradient-${newValue}))`
2015
- );
2016
- } else {
2017
- console.error(
2018
- `${newValue} is not an allowed background-gradient value for ${this.$el}`
2019
- );
2020
- }
2021
- }
2022
- updateBgColor(attrName, newValue) {
2023
- if (this.checkName(bgColorValues, newValue)) {
2024
- const splitResult = this.splitAttrNameFromBreakpoint(attrName);
2025
- attrName = splitResult.attrName;
2026
- const breakpoint = splitResult.breakpoint;
2027
- const mode = this.getAttribute("inverted") !== null ? "inverted" : "default";
2028
- this.$el.style.setProperty(
2029
- `--${attrName}${breakpoint}`,
2030
- `var(--px-color-bg-${newValue}-${mode})`
2031
- );
2032
- } else {
2033
- console.error(
2034
- `${newValue} is not an allowed ${attrName} value for ${this.$el}`
2035
- );
2036
- }
2037
- }
2038
- updateNoBorderRadius(attrName, oldValue, newValue, attrValues) {
2039
- if (!this.checkName(attrValues, newValue)) {
2040
- console.error(
2041
- `${newValue} is not an allowed ${attrName} value for ${this.$el}`
2042
- );
2043
- } else {
2044
- const splitResult = this.splitAttrNameFromBreakpoint(attrName);
2045
- attrName = splitResult.attrName;
2046
- const breakpoint = splitResult.breakpoint;
2047
- if (oldValue !== null && oldValue !== "") {
2048
- this.$el.classList.toggle(`${attrName}-${oldValue}${breakpoint}`);
2049
- }
2050
- if (newValue !== null && newValue !== "") {
2051
- this.$el.classList.toggle(`${attrName}-${newValue}${breakpoint}`);
2052
- }
2053
- }
2054
- }
2055
- updateAttribute(attrName, oldValue, newValue, attrValues) {
2056
- if (!this.checkName(attrValues, newValue)) {
2057
- console.error(
2058
- `${newValue} is not an allowed ${attrName} value for ${this.$el}`
2059
- );
2060
- } else {
2061
- const splitResult = this.splitAttrNameFromBreakpoint(attrName);
2062
- attrName = splitResult.attrName;
2063
- const breakpoint = splitResult.breakpoint;
2064
- if (oldValue !== null && oldValue !== "") {
2065
- this.$el.classList.toggle(`${attrName}-${oldValue}${breakpoint}`);
2066
- }
2067
- if (newValue !== null && newValue !== "") {
2068
- this.$el.classList.toggle(`${attrName}-${newValue}${breakpoint}`);
2069
- }
2070
- }
2071
- }
2072
- splitAttrNameFromBreakpoint(attrName) {
2073
- let breakpoint = "";
2074
- if (["--mobile", "--tablet", "--laptop"].some(
2075
- (suffix) => attrName.includes(suffix)
2076
- )) {
2077
- const attrNameSplit = attrName.split("--");
2078
- attrName = attrNameSplit[0];
2079
- breakpoint = `--${attrNameSplit[1]}`;
2080
- }
2081
- return { attrName, breakpoint };
2082
- }
2083
- checkName(values, value) {
2084
- return values.includes(value);
2085
- }
2086
2211
  };
2087
2212
  _Container.nativeName = "div";
2088
2213
  let Container = _Container;
2089
2214
  customElements.define("px-container", Container);
2090
- const headingCss = "h1,.style-title-4xl,::slotted(h1),h2,.style-title-3xl,::slotted(h2),h3,.style-title-2xl,::slotted(h3),h4,.style-title-xl,::slotted(h4),h5,.style-title-l,::slotted(h5),h6,.style-title-m,::slotted(h6),.style-title-s,.style-subtitle{margin:0;font-family:var(--px-font-family);color:var(--heading-color-default, var(--px-color-txt-primary-default));text-align:var(--heading-text-align--mobile, left);font-size:var(--px-text-size-base-mobile);line-height:var(--px-line-height-m);font-weight:700}:host([inverted]) h1,:host([inverted]) .style-title-4xl,:host([inverted]) ::slotted(h1),:host([inverted]) h2,:host([inverted]) .style-title-3xl,:host([inverted]) ::slotted(h2),:host([inverted]) h3,:host([inverted]) .style-title-2xl,:host([inverted]) ::slotted(h3),:host([inverted]) h4,:host([inverted]) .style-title-xl,:host([inverted]) ::slotted(h4),:host([inverted]) h5,:host([inverted]) .style-title-l,:host([inverted]) ::slotted(h5),:host([inverted]) h6,:host([inverted]) .style-title-m,:host([inverted]) ::slotted(h6),:host([inverted]) .style-title-s,:host([inverted]) .style-subtitle{color:var(--heading-color-inverted, var(--px-color-txt-primary-inverted))}h1,.style-title-4xl,::slotted(h1){font-size:var(--px-text-size-5xl-mobile);line-height:var(--px-line-height-s);font-weight:900}h2,.style-title-3xl,::slotted(h2){font-size:var(--px-text-size-4xl-mobile);line-height:var(--px-line-height-s);font-weight:900}h3,.style-title-2xl,::slotted(h3){font-size:var(--px-text-size-3xl-mobile);line-height:var(--px-line-height-s)}h4,.style-title-xl,::slotted(h4){font-size:var(--px-text-size-2xl-mobile)}h5,.style-title-l,::slotted(h5){font-size:var(--px-text-size-l-mobile)}h6,.style-title-m,::slotted(h6){font-size:var(--px-text-size-m-mobile)}.style-subtitle{font-size:var(--px-text-size-xl-mobile);font-weight:300}.style-title-s{font-size:var(--px-text-size-base-mobile)}@media only screen and (min-width: 768px){h1,.style-title-4xl,::slotted(h1),h2,.style-title-3xl,::slotted(h2),h3,.style-title-2xl,::slotted(h3),h4,.style-title-xl,::slotted(h4),h5,.style-title-l,::slotted(h5),h6,.style-title-m,::slotted(h6),.style-title-s,.style-subtitle{text-align:var(--heading-text-align--tablet, left)}h1,.style-title-4xl,::slotted(h1){font-size:var(--px-text-size-5xl-tablet)}h2,.style-title-3xl,::slotted(h2){font-size:var(--px-text-size-4xl-tablet)}h3,.style-title-2xl,::slotted(h3){font-size:var(--px-text-size-3xl-tablet)}h4,.style-title-xl,::slotted(h4){font-size:var(--px-text-size-2xl-tablet)}h5,.style-title-l,::slotted(h5){font-size:var(--px-text-size-l-tablet)}h6,.style-title-m,::slotted(h6){font-size:var(--px-text-size-m-tablet)}.style-title-s{font-size:var(--px-text-size-base-tablet)}.style-subtitle{font-size:var(--px-text-size-xl-tablet)}}@media only screen and (min-width: 1025px){h1,.style-title-4xl,::slotted(h1),h2,.style-title-3xl,::slotted(h2),h3,.style-title-2xl,::slotted(h3),h4,.style-title-xl,::slotted(h4),h5,.style-title-l,::slotted(h5),h6,.style-title-m,::slotted(h6),.style-title-s,.style-subtitle{text-align:var(--heading-text-align--laptop, left)}h1,.style-title-4xl,::slotted(h1){font-size:var(--px-text-size-5xl-desktop)}h2,.style-title-3xl,::slotted(h2){font-size:var(--px-text-size-4xl-desktop)}h3,.style-title-2xl,::slotted(h3){font-size:var(--px-text-size-3xl-desktop)}h4,.style-title-xl,::slotted(h4){font-size:var(--px-text-size-2xl-desktop)}h5,.style-title-l,::slotted(h5){font-size:var(--px-text-size-l-desktop)}h6,.style-title-m,::slotted(h6){font-size:var(--px-text-size-m-desktop)}.style-title-s{font-size:var(--px-text-size-base-desktop)}.style-subtitle{font-size:var(--px-text-size-xl-desktop)}}@media screen and (min-width: 1441px){h1,.style-title-4xl,::slotted(h1),h2,.style-title-3xl,::slotted(h2),h3,.style-title-2xl,::slotted(h3),h4,.style-title-xl,::slotted(h4),h5,.style-title-l,::slotted(h5),h6,.style-title-m,::slotted(h6),.style-title-s,.style-subtitle{text-align:var(--heading-text-align--desktop, left)}}";
2091
- const typographyCss$1 = ":host>*:first-child{--font-weight-light: 300;--font-weight-regular: 400;--font-weight-bold: 700;--font-weight-extrabold: 900}.color-inherit{color:inherit}.color-primary{color:var(--px-color-txt-primary-default)}.color-body{color:var(--px-color-txt-body-default)}.color-details{color:var(--px-color-txt-details-default)}.color-hover{color:var(--px-color-txt-hover-default)}.color-disabled{color:var(--px-color-txt-disabled-default)}.color-active{color:var(--px-color-txt-active-default)}.color-promo{color:var(--px-color-txt-promo-default)}.color-success{color:var(--px-color-txt-success-default)}.color-error{color:var(--px-color-txt-error-default)}.color-warning{color:var(--px-color-txt-warning-default)}.color-unlimited{color:var(--px-color-txt-unlimited-default)}:host([inverted]) .color-inherit{color:inherit}:host([inverted]) .color-primary{color:var(--px-color-txt-primary-inverted)}:host([inverted]) .color-body{color:var(--px-color-txt-body-inverted)}:host([inverted]) .color-details{color:var(--px-color-txt-details-inverted)}:host([inverted]) .color-hover{color:var(--px-color-txt-hover-inverted)}:host([inverted]) .color-disabled{color:var(--px-color-txt-disabled-inverted)}:host([inverted]) .color-active{color:var(--px-color-txt-active-inverted)}:host([inverted]) .color-promo{color:var(--px-color-txt-promo-inverted)}:host([inverted]) .color-success{color:var(--px-color-txt-success-inverted)}:host([inverted]) .color-error{color:var(--px-color-txt-error-inverted)}:host([inverted]) .color-warning{color:var(--px-color-txt-warning-inverted)}:host([inverted]) .color-unlimited{color:var(--px-color-txt-unlimited-inverted)}.font-size-inherit{font-size:inherit;line-height:inherit}.font-size-xs{font-size:var(--px-text-size-xs-mobile)}.font-size-s{font-size:var(--px-text-size-s-mobile)}.font-size-base{font-size:var(--px-text-size-base-mobile)}.font-size-m{font-size:var(--px-text-size-m-mobile)}.font-size-l{font-size:var(--px-text-size-l-mobile)}.font-size-xl{font-size:var(--px-text-size-xl-mobile)}.font-size-2xl{font-size:var(--px-text-size-2xl-mobile)}.font-size-3xl{font-size:var(--px-text-size-3xl-mobile);line-height:var(--px-line-height-s)}.font-size-4xl{font-size:var(--px-text-size-4xl-mobile);line-height:var(--px-line-height-s)}.font-size-5xl{font-size:var(--px-text-size-5xl-mobile);line-height:var(--px-line-height-s)}.font-size-6xl{font-size:var(--px-text-size-6xl-mobile);line-height:var(--px-line-height-s)}.font-size-7xl{font-size:var(--px-text-size-7xl-mobile);line-height:var(--px-line-height-s)}@media only screen and (min-width: 768px){.font-size-xs{font-size:var(--px-text-size-xs-mobile)}.font-size-s{font-size:var(--px-text-size-s-mobile)}.font-size-base{font-size:var(--px-text-size-base-mobile)}.font-size-m{font-size:var(--px-text-size-m-mobile)}.font-size-l{font-size:var(--px-text-size-l-mobile)}.font-size-xl{font-size:var(--px-text-size-xl-mobile)}.font-size-2xl{font-size:var(--px-text-size-2xl-mobile)}.font-size-3xl{font-size:var(--px-text-size-3xl-mobile)}.font-size-4xl{font-size:var(--px-text-size-4xl-mobile)}.font-size-5xl{font-size:var(--px-text-size-5xl-mobile)}.font-size-6xl{font-size:var(--px-text-size-6xl-mobile)}.font-size-7xl{font-size:var(--px-text-size-7xl-mobile)}}@media only screen and (min-width: 1025px){.font-size-xs{font-size:var(--px-text-size-xs-tablet)}.font-size-s{font-size:var(--px-text-size-s-tablet)}.font-size-base{font-size:var(--px-text-size-base-tablet)}.font-size-m{font-size:var(--px-text-size-m-tablet)}.font-size-l{font-size:var(--px-text-size-l-tablet)}.font-size-xl{font-size:var(--px-text-size-xl-tablet)}.font-size-2xl{font-size:var(--px-text-size-2xl-tablet)}.font-size-3xl{font-size:var(--px-text-size-3xl-tablet)}.font-size-4xl{font-size:var(--px-text-size-4xl-tablet)}.font-size-5xl{font-size:var(--px-text-size-5xl-tablet)}.font-size-6xl{font-size:var(--px-text-size-6xl-tablet)}.font-size-7xl{font-size:var(--px-text-size-7xl-tablet)}}@media only screen and (min-width: 1441px){.font-size-xs{font-size:var(--px-text-size-xs-desktop)}.font-size-s{font-size:var(--px-text-size-s-desktop)}.font-size-base{font-size:var(--px-text-size-base-desktop)}.font-size-m{font-size:var(--px-text-size-m-desktop)}.font-size-l{font-size:var(--px-text-size-l-desktop)}.font-size-xl{font-size:var(--px-text-size-xl-desktop)}.font-size-2xl{font-size:var(--px-text-size-2xl-desktop)}.font-size-3xl{font-size:var(--px-text-size-3xl-desktop)}.font-size-4xl{font-size:var(--px-text-size-4xl-desktop)}.font-size-5xl{font-size:var(--px-text-size-5xl-desktop)}.font-size-6xl{font-size:var(--px-text-size-6xl-desktop)}.font-size-7xl{font-size:var(--px-text-size-7xl-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)}";
2215
+ const headingCss = "h1,.style-title-4xl,::slotted(h1),h2,.style-title-3xl,::slotted(h2),h3,.style-title-2xl,::slotted(h3),h4,.style-title-xl,::slotted(h4),h5,.style-title-l,::slotted(h5),h6,.style-title-m,::slotted(h6),.style-title-s,.style-subtitle{margin:0;font-family:var(--px-font-family);color:var( --heading-color-default, var(--px-text-color-heading-brand-default) );text-align:var(--heading-text-align--mobile, left);font-size:var(--px-text-size-heading-s-mobile);line-height:var(--px-line-height-m);font-weight:700}:host([inverted]) h1,:host([inverted]) .style-title-4xl,:host([inverted]) ::slotted(h1),:host([inverted]) h2,:host([inverted]) .style-title-3xl,:host([inverted]) ::slotted(h2),:host([inverted]) h3,:host([inverted]) .style-title-2xl,:host([inverted]) ::slotted(h3),:host([inverted]) h4,:host([inverted]) .style-title-xl,:host([inverted]) ::slotted(h4),:host([inverted]) h5,:host([inverted]) .style-title-l,:host([inverted]) ::slotted(h5),:host([inverted]) h6,:host([inverted]) .style-title-m,:host([inverted]) ::slotted(h6),:host([inverted]) .style-title-s,:host([inverted]) .style-subtitle{color:var( --heading-color-inverted, var(--px-text-color-heading-brand-inverted) )}h1,.style-title-4xl,::slotted(h1){font-size:var(--px-text-size-heading-5xl-mobile);line-height:var(--px-line-height-s);font-weight:900}h2,.style-title-3xl,::slotted(h2){font-size:var(--px-text-size-heading-4xl-mobile);line-height:var(--px-line-height-s);font-weight:900}h3,.style-title-2xl,::slotted(h3){font-size:var(--px-text-size-heading-3xl-mobile);line-height:var(--px-line-height-s)}h4,.style-title-xl,::slotted(h4){font-size:var(--px-text-size-heading-2xl-mobile)}h5,.style-title-l,::slotted(h5){font-size:var(--px-text-size-heading-l-mobile)}h6,.style-title-m,::slotted(h6){font-size:var(--px-text-size-heading-m-mobile)}.style-subtitle{font-size:var(--px-text-size-heading-xl-mobile);font-weight:300}.style-title-s{font-size:var(--px-text-size-heading-s-mobile)}@media only screen and (min-width: 768px){h1,.style-title-4xl,::slotted(h1),h2,.style-title-3xl,::slotted(h2),h3,.style-title-2xl,::slotted(h3),h4,.style-title-xl,::slotted(h4),h5,.style-title-l,::slotted(h5),h6,.style-title-m,::slotted(h6),.style-title-s,.style-subtitle{text-align:var(--heading-text-align--tablet, left)}h1,.style-title-4xl,::slotted(h1){font-size:var(--px-text-size-heading-5xl-tablet)}h2,.style-title-3xl,::slotted(h2){font-size:var(--px-text-size-heading-4xl-tablet)}h3,.style-title-2xl,::slotted(h3){font-size:var(--px-text-size-heading-3xl-tablet)}h4,.style-title-xl,::slotted(h4){font-size:var(--px-text-size-heading-2xl-tablet)}h5,.style-title-l,::slotted(h5){font-size:var(--px-text-size-heading-l-tablet)}h6,.style-title-m,::slotted(h6){font-size:var(--px-text-size-heading-m-tablet)}.style-title-s{font-size:var(--px-text-size-heading-s-tablet)}.style-subtitle{font-size:var(--px-text-size-heading-xl-tablet)}}@media only screen and (min-width: 1025px){h1,.style-title-4xl,::slotted(h1),h2,.style-title-3xl,::slotted(h2),h3,.style-title-2xl,::slotted(h3),h4,.style-title-xl,::slotted(h4),h5,.style-title-l,::slotted(h5),h6,.style-title-m,::slotted(h6),.style-title-s,.style-subtitle{text-align:var(--heading-text-align--laptop, left)}h1,.style-title-4xl,::slotted(h1){font-size:var(--px-text-size-heading-5xl-desktop)}h2,.style-title-3xl,::slotted(h2){font-size:var(--px-text-size-heading-4xl-desktop)}h3,.style-title-2xl,::slotted(h3){font-size:var(--px-text-size-heading-3xl-desktop)}h4,.style-title-xl,::slotted(h4){font-size:var(--px-text-size-heading-2xl-desktop)}h5,.style-title-l,::slotted(h5){font-size:var(--px-text-size-heading-l-desktop)}h6,.style-title-m,::slotted(h6){font-size:var(--px-text-size-heading-m-desktop)}.style-title-s{font-size:var(--px-text-size-heading-s-desktop)}.style-subtitle{font-size:var(--px-text-size-heading-xl-desktop)}}@media screen and (min-width: 1441px){h1,.style-title-4xl,::slotted(h1),h2,.style-title-3xl,::slotted(h2),h3,.style-title-2xl,::slotted(h3),h4,.style-title-xl,::slotted(h4),h5,.style-title-l,::slotted(h5),h6,.style-title-m,::slotted(h6),.style-title-s,.style-subtitle{text-align:var(--heading-text-align--desktop, left)}}";
2216
+ const typographyCss$1 = ":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)}";
2092
2217
  const headingStyles$2 = new CSSStyleSheet();
2093
2218
  headingStyles$2.replaceSync(headingCss);
2094
2219
  const typographyStyles$5 = new CSSStyleSheet();
@@ -2123,7 +2248,7 @@ class AbstractHeading extends PxElement {
2123
2248
  this.updateAttribute(attrName, oldValue, newValue, headingValues);
2124
2249
  break;
2125
2250
  case "color":
2126
- this.updateColor(oldValue, newValue, colorValues$1);
2251
+ this.updateColor(oldValue, newValue, colorValues);
2127
2252
  break;
2128
2253
  case "text-align":
2129
2254
  case "text-align--mobile":
@@ -2151,7 +2276,10 @@ class AbstractHeading extends PxElement {
2151
2276
  }
2152
2277
  updateAttribute(attrName, oldValue, newValue, attrValue) {
2153
2278
  if (!this.checkName(attrValue, newValue)) {
2154
- console.error(`Bad "${attrName}" value for`, this.$el);
2279
+ console.error(
2280
+ `${newValue} is not an allowed "${attrName}" value for`,
2281
+ this.$el
2282
+ );
2155
2283
  } else {
2156
2284
  this.toggleClass(oldValue, newValue);
2157
2285
  }
@@ -2161,12 +2289,15 @@ class AbstractHeading extends PxElement {
2161
2289
  console.error(`Bad color value for`, this.$el);
2162
2290
  return;
2163
2291
  }
2164
- const invertedStatus = this.inverted === null ? "default" : "inverted";
2165
2292
  const updateColorStyle = (value) => {
2166
2293
  if (value !== null && value !== "" && value !== "default") {
2167
2294
  this.$el.style.setProperty(
2168
- `--heading-color-${invertedStatus}`,
2169
- `var(--px-color-txt-${value}-${invertedStatus})`
2295
+ `--heading-color-default`,
2296
+ `var(--px-text-color-${value}-default)`
2297
+ );
2298
+ this.$el.style.setProperty(
2299
+ `--heading-color-inverted`,
2300
+ `var(--px-text-color-${value}-inverted)`
2170
2301
  );
2171
2302
  }
2172
2303
  };
@@ -2294,18 +2425,18 @@ const _H6 = class _H6 extends AbstractHeading {
2294
2425
  _H6.nativeName = "h6";
2295
2426
  let H6 = _H6;
2296
2427
  customElements.define("px-h6", H6);
2297
- const styles$9 = ":host,:host *{box-sizing:border-box}:host .content-wrapper{margin-inline:1rem;max-width:1200px}@media only screen and (min-width: 1232px){:host .content-wrapper{margin-inline:auto}}";
2428
+ const styles$9 = ":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}}";
2298
2429
  const styleSheet$9 = new CSSStyleSheet();
2299
2430
  styleSheet$9.replaceSync(styles$9);
2300
2431
  class Section extends HTMLElement {
2301
2432
  constructor() {
2302
2433
  super();
2303
2434
  this.template = () => `
2304
- <px-container border-radius="none" padding="none" background-color="${this.bgColor}">
2435
+ <px-container border-radius="none" padding-inline="none" background-color="${this.backgroundColor}">
2305
2436
  <div class="content-wrapper">
2306
- <px-vstack gap="under-display-vertical">
2437
+ <px-vstack gap="heading-to-content">
2307
2438
  <slot name="heading"></slot>
2308
- <px-vstack gap="none">
2439
+ <px-vstack gap="after-element-none">
2309
2440
  <slot></slot>
2310
2441
  </px-vstack>
2311
2442
  </px-vstack>
@@ -2318,8 +2449,11 @@ class Section extends HTMLElement {
2318
2449
  }
2319
2450
  connectedCallback() {
2320
2451
  const headingSlot = this.querySelector('[slot="heading"]');
2452
+ if (!this.paddingBlock && !this.paddingTop && !this.paddingBottom && !this.paddingBlockMobile && !this.paddingTopMobile && !this.paddingBottomMobile && !this.paddingBlockTablet && !this.paddingTopTablet && !this.paddingBottomTablet && !this.paddingBlockLaptop && !this.paddingTopLaptop && !this.paddingBottomLaptop) {
2453
+ this.$container.paddingBlock = "none";
2454
+ }
2321
2455
  if (!headingSlot) {
2322
- this.shadowRoot.querySelector("px-vstack").setAttribute("gap", "none");
2456
+ this.shadowRoot.querySelector("px-vstack").setAttribute("gap", "after-element-none");
2323
2457
  }
2324
2458
  }
2325
2459
  static get observedAttributes() {
@@ -2334,7 +2468,21 @@ class Section extends HTMLElement {
2334
2468
  "background-position",
2335
2469
  "padding-block",
2336
2470
  "padding-top",
2337
- "padding-bottom"
2471
+ "padding-bottom",
2472
+ "padding-block--mobile",
2473
+ "padding-top--mobile",
2474
+ "padding-bottom--mobile",
2475
+ "padding-block--tablet",
2476
+ "padding-top--tablet",
2477
+ "padding-bottom--tablet",
2478
+ "padding-block--laptop",
2479
+ "padding-top--laptop",
2480
+ "padding-bottom--laptop",
2481
+ "border",
2482
+ "border-side",
2483
+ "border-side--mobile",
2484
+ "border-side--tablet",
2485
+ "border-side--laptop"
2338
2486
  ];
2339
2487
  }
2340
2488
  get $container() {
@@ -2344,28 +2492,28 @@ class Section extends HTMLElement {
2344
2492
  if (oldValue !== newValue) {
2345
2493
  switch (name) {
2346
2494
  case "background-color":
2347
- this.$container.bgColor = bgColorValues.indexOf(newValue) > 0 ? newValue : "container-none";
2495
+ this.$container.backgroundColor = backgroundColorValues.indexOf(newValue) > 0 ? newValue : "none";
2348
2496
  break;
2349
2497
  case "background-gradient":
2350
2498
  this.$container.gradient = this.gradient;
2351
2499
  break;
2352
2500
  case "background-image":
2353
- this.$container.bgImg = newValue;
2501
+ this.$container.backgroundImage = newValue;
2354
2502
  break;
2355
2503
  case "background-image--mobile":
2356
- this.$container.bgImgMobile = newValue;
2504
+ this.$container.backgroundImageMobile = newValue;
2357
2505
  break;
2358
2506
  case "background-image--tablet":
2359
- this.$container.bgImgTablet = newValue;
2507
+ this.$container.backgroundImageTablet = newValue;
2360
2508
  break;
2361
2509
  case "background-image--laptop":
2362
- this.$container.bgImgLaptop = newValue;
2510
+ this.$container.backgroundImageLaptop = newValue;
2363
2511
  break;
2364
2512
  case "background-size":
2365
- this.$container.bgImgSize = newValue;
2513
+ this.$container.backgroundSize = newValue;
2366
2514
  break;
2367
2515
  case "background-position":
2368
- this.$container.bgImgPosition = newValue;
2516
+ this.$container.backgroundPosition = newValue;
2369
2517
  break;
2370
2518
  case "padding-block":
2371
2519
  this.$container.paddingBlock = newValue;
@@ -2376,13 +2524,55 @@ class Section extends HTMLElement {
2376
2524
  case "padding-bottom":
2377
2525
  this.$container.paddingBottom = newValue;
2378
2526
  break;
2527
+ case "padding-block--mobile":
2528
+ this.$container.paddingBlockMobile = newValue;
2529
+ break;
2530
+ case "padding-top--mobile":
2531
+ this.$container.paddingTopMobile = newValue;
2532
+ break;
2533
+ case "padding-bottom--mobile":
2534
+ this.$container.paddingBottomMobile = newValue;
2535
+ break;
2536
+ case "padding-block--tablet":
2537
+ this.$container.paddingBlockTablet = newValue;
2538
+ break;
2539
+ case "padding-top--tablet":
2540
+ this.$container.paddingTopTablet = newValue;
2541
+ break;
2542
+ case "padding-bottom--tablet":
2543
+ this.$container.paddingBottomTablet = newValue;
2544
+ break;
2545
+ case "padding-block--laptop":
2546
+ this.$container.paddingBlockLaptop = newValue;
2547
+ break;
2548
+ case "padding-top--laptop":
2549
+ this.$container.paddingTopLaptop = newValue;
2550
+ break;
2551
+ case "padding-bottom--laptop":
2552
+ this.$container.paddingBottomLaptop = newValue;
2553
+ break;
2554
+ case "border":
2555
+ this.$container.border = newValue;
2556
+ break;
2557
+ case "border-side":
2558
+ this.$container.borderSide = newValue;
2559
+ break;
2560
+ case "border-side--mobile":
2561
+ this.$container.borderSideMobile = newValue;
2562
+ break;
2563
+ case "border-side--tablet":
2564
+ this.$container.borderSideTablet = newValue;
2565
+ break;
2566
+ case "border-side--laptop":
2567
+ this.$container.borderSideLaptop = newValue;
2568
+ break;
2379
2569
  }
2380
2570
  }
2381
2571
  }
2382
- get bgColor() {
2383
- return this.getAttribute("background-color") || "container-none";
2572
+ get backgroundColor() {
2573
+ return this.getAttribute("background-color") || "none";
2384
2574
  }
2385
- set bgColor(value) {
2575
+ set backgroundColor(value) {
2386
2576
  this.setAttribute("background-color", value);
2387
2577
  }
2388
2578
  get gradient() {
@@ -2391,40 +2581,40 @@ class Section extends HTMLElement {
2391
2581
  set gradient(value) {
2392
2582
  this.setAttribute("background-gradient", value);
2393
2583
  }
2394
- get bgImg() {
2584
+ get backgroundImage() {
2395
2585
  return this.getAttribute("background-image");
2396
2586
  }
2397
- set bgImg(value) {
2587
+ set backgroundImage(value) {
2398
2588
  this.setAttribute("background-image", value);
2399
2589
  }
2400
- get bgImgMobile() {
2590
+ get backgroundImageMobile() {
2401
2591
  return this.getAttribute("background-image--mobile");
2402
2592
  }
2403
- set bgImgMobile(value) {
2593
+ set backgroundImageMobile(value) {
2404
2594
  this.setAttribute("background-image--mobile", value);
2405
2595
  }
2406
- get bgImgTablet() {
2596
+ get backgroundImageTablet() {
2407
2597
  return this.getAttribute("background-image--tablet");
2408
2598
  }
2409
- set bgImgTablet(value) {
2599
+ set backgroundImageTablet(value) {
2410
2600
  this.setAttribute("background-image--tablet", value);
2411
2601
  }
2412
- get bgImgLaptop() {
2602
+ get backgroundImageLaptop() {
2413
2603
  return this.getAttribute("background-image--laptop");
2414
2604
  }
2415
- set bgImgLaptop(value) {
2605
+ set backgroundImageLaptop(value) {
2416
2606
  this.setAttribute("background-image--laptop", value);
2417
2607
  }
2418
- get bgImgSize() {
2608
+ get backgroundSize() {
2419
2609
  return this.getAttribute("background-size");
2420
2610
  }
2421
- set bgImgSize(value) {
2611
+ set backgroundSize(value) {
2422
2612
  this.setAttribute("background-size", value);
2423
2613
  }
2424
- get bgImgPosition() {
2614
+ get backgroundPosition() {
2425
2615
  return this.getAttribute("background-position");
2426
2616
  }
2427
- set bgImgPosition(value) {
2617
+ set backgroundPosition(value) {
2428
2618
  this.setAttribute("background-position", value);
2429
2619
  }
2430
2620
  get paddingBlock() {
@@ -2445,9 +2635,93 @@ class Section extends HTMLElement {
2445
2635
  set paddingBottom(value) {
2446
2636
  this.setAttribute("padding-bottom", value);
2447
2637
  }
2638
+ get paddingBlockMobile() {
2639
+ return this.getAttribute("padding-block--mobile");
2640
+ }
2641
+ set paddingBlockMobile(value) {
2642
+ this.setAttribute("padding-block--mobile", value);
2643
+ }
2644
+ get paddingTopMobile() {
2645
+ return this.getAttribute("padding-top--mobile");
2646
+ }
2647
+ set paddingTopMobile(value) {
2648
+ this.setAttribute("padding-top--mobile", value);
2649
+ }
2650
+ get paddingBottomMobile() {
2651
+ return this.getAttribute("padding-bottom--mobile");
2652
+ }
2653
+ set paddingBottomMobile(value) {
2654
+ this.setAttribute("padding-bottom--mobile", value);
2655
+ }
2656
+ get paddingBlockTablet() {
2657
+ return this.getAttribute("padding-block--tablet");
2658
+ }
2659
+ set paddingBlockTablet(value) {
2660
+ this.setAttribute("padding-block--tablet", value);
2661
+ }
2662
+ get paddingTopTablet() {
2663
+ return this.getAttribute("padding-top--tablet");
2664
+ }
2665
+ set paddingTopTablet(value) {
2666
+ this.setAttribute("padding-top--tablet", value);
2667
+ }
2668
+ get paddingBottomTablet() {
2669
+ return this.getAttribute("padding-bottom--tablet");
2670
+ }
2671
+ set paddingBottomTablet(value) {
2672
+ this.setAttribute("padding-bottom--tablet", value);
2673
+ }
2674
+ get paddingBlockLaptop() {
2675
+ return this.getAttribute("padding-block--laptop");
2676
+ }
2677
+ set paddingBlockLaptop(value) {
2678
+ this.setAttribute("padding-block--laptop", value);
2679
+ }
2680
+ get paddingTopLaptop() {
2681
+ return this.getAttribute("padding-top--laptop");
2682
+ }
2683
+ set paddingTopLaptop(value) {
2684
+ this.setAttribute("padding-top--laptop", value);
2685
+ }
2686
+ get paddingBottomLaptop() {
2687
+ return this.getAttribute("padding-bottom--laptop");
2688
+ }
2689
+ set paddingBottomLaptop(value) {
2690
+ this.setAttribute("padding-bottom--laptop", value);
2691
+ }
2692
+ get border() {
2693
+ return this.getAttribute("border");
2694
+ }
2695
+ set border(value) {
2696
+ this.setAttribute("border", value);
2697
+ }
2698
+ get borderSide() {
2699
+ return this.getAttribute("border-side");
2700
+ }
2701
+ set borderSide(value) {
2702
+ this.setAttribute("border-side", value);
2703
+ }
2704
+ get borderSideMobile() {
2705
+ return this.getAttribute("border-side--mobile");
2706
+ }
2707
+ set borderSideMobile(value) {
2708
+ this.setAttribute("border-side--mobile", value);
2709
+ }
2710
+ get borderSideTablet() {
2711
+ return this.getAttribute("border-side--tablet");
2712
+ }
2713
+ set borderSideTablet(value) {
2714
+ this.setAttribute("border-side--tablet", value);
2715
+ }
2716
+ get borderSideLaptop() {
2717
+ return this.getAttribute("border-side--laptop");
2718
+ }
2719
+ set borderSideLaptop(value) {
2720
+ this.setAttribute("border-side--laptop", value);
2721
+ }
2448
2722
  }
2449
2723
  customElements.define("px-section", Section);
2450
- const accordionCss = `details{font-family:var(--px-font-family);display:flex;flex-direction:column;align-items:flex-start}details:not(.single){border-bottom:var(--px-border-m) solid var(--px-color-border-main-default)}details:not(.single) ::slotted([slot="title"]){flex-grow:1}details:not(.single) slot[name=content]{display:block;padding-block:var(--px-spacing-component-default-vertical)}summary{align-items:center;transition:all .2s ease-out 0s,backdrop-filter 0s,-webkit-backdrop-filter 0s}details:not(.single) summary{display:flex;padding:var(--px-padding-s);gap:var(--px-spacing-text-to-icon-horizontal);align-self:stretch}summary:after{content:"";width:24px;height:24px;flex-shrink:0;background-color:var(--px-color-bg-action-secondary-default);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cg id='CHEVRON DOWN'%3E%3Cpath id='Vector' fill-rule='evenodd' clip-rule='evenodd' d='M12.4714 6.19524C12.2111 5.93489 11.7889 5.93489 11.5286 6.19524L8 9.72384L4.4714 6.19524C4.21105 5.93489 3.78894 5.93489 3.52859 6.19524C3.26824 6.45559 3.26824 6.8777 3.52859 7.13805L7.52859 11.1381C7.78894 11.3984 8.21105 11.3984 8.4714 11.1381L12.4714 7.13805C12.7318 6.8777 12.7318 6.45559 12.4714 6.19524Z' fill='%235C2D91'/%3E%3C/g%3E%3C/svg%3E");background-repeat:no-repeat;background-position:center center;border-radius:var(--px-radius-pill);border:var(--px-border-s) solid transparent;transition:all .2s ease-out 0s,backdrop-filter 0s,-webkit-backdrop-filter 0s}summary:hover{cursor:pointer}details:not(.single) summary:hover{background-color:var(--px-color-bg-container-weak-default)}summary:hover:after{background-color:var(--px-color-bg-action-hover-bordered-default);border:var(--px-border-s) solid var(--px-color-border-action-hover-default);-webkit-backdrop-filter:blur(15px);backdrop-filter:blur(15px)}details.single summary{display:inline-flex;gap:var(--px-spacing-between-icon-horizontal-mobile);justify-content:center;color:var(--px-color-txt-primary-default);font-weight:700;border:var(--px-border-m) solid transparent;border-radius:var(--px-radius-pill)}details.single summary:hover{gap:0;padding:0 var(--px-padding-xs);border-color:var(--px-color-border-action-hover-default)}details.single summary:hover:after{border-color:transparent;margin-right:calc(var(--px-padding-xs) * -1)}details.single slot[name=content]{display:block;padding-top:var(--px-spacing-component-default-vertical)}details[open] summary slot[name=title]{color:var(--px-color-txt-primary-default);font-weight:700}details[open] summary:after{transform:rotate(180deg)}summary::-webkit-details-marker{display:none}:host([inverted]) details{color:var(--px-color-txt-body-inverted)}:host([inverted]) details:not(.single){border-bottom:var(--px-border-m) solid var(--px-color-border-main-inverted)}:host([inverted]) details[open] summary slot[name=title]{color:var(--px-color-txt-primary-inverted)}:host([inverted]) details.single summary{color:var(--px-color-txt-primary-inverted)}:host([inverted]) details.single summary:hover{border-color:var(--px-color-bg-container-weak-inverted)}:host([inverted]) details.single summary:hover:after{border-color:transparent}:host([inverted]) summary:after{background-color:var(--px-color-bg-action-secondary-inverted);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12.4714 6.19524C12.2111 5.93489 11.789 5.93489 11.5286 6.19524L8.00002 9.72384L4.47142 6.19524C4.21107 5.93489 3.78897 5.93489 3.52862 6.19524C3.26827 6.45559 3.26827 6.8777 3.52862 7.13805L7.52862 11.1381C7.78897 11.3984 8.21108 11.3984 8.47142 11.1381L12.4714 7.13805C12.7318 6.8777 12.7318 6.45559 12.4714 6.19524Z' fill='white'/%3E%3C/svg%3E")}:host([inverted]) summary:hover{background-color:var(--px-color-bg-container-moderate-inverted)}:host([inverted]) summary:hover:after{background-color:var(--px-color-bg-action-bordered-inverted);border:var(--px-border-s) solid var(--px-color-border-action-hover-inverted)}`;
2724
+ const accordionCss = `details{font-family:var(--px-font-family);display:flex;flex-direction:column;align-items:flex-start}details summary{align-items:center;transition:all .2s ease-out 0s,backdrop-filter 0s,-webkit-backdrop-filter 0s}details summary:after{content:"";width:var(--px-action-size-m);height:var(--px-action-size-m);flex-shrink:0;background-color:var(--px-background-color-action-secondary-default);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cg id='CHEVRON DOWN'%3E%3Cpath id='Vector' fill-rule='evenodd' clip-rule='evenodd' d='M12.4714 6.19524C12.2111 5.93489 11.7889 5.93489 11.5286 6.19524L8 9.72384L4.4714 6.19524C4.21105 5.93489 3.78894 5.93489 3.52859 6.19524C3.26824 6.45559 3.26824 6.8777 3.52859 7.13805L7.52859 11.1381C7.78894 11.3984 8.21105 11.3984 8.4714 11.1381L12.4714 7.13805C12.7318 6.8777 12.7318 6.45559 12.4714 6.19524Z' fill='%235C2D91'/%3E%3C/g%3E%3C/svg%3E");background-repeat:no-repeat;background-position:center center;border-radius:var(--px-radius-pill);border:var(--px-border-size-m) solid transparent;transition:all .2s ease-out 0s,backdrop-filter 0s,-webkit-backdrop-filter 0s}details summary:hover{cursor:pointer}details summary:hover:after{background-color:var( --px-background-color-action-hover-bordered-default );border-color:var(--px-border-color-action-hover-default);-webkit-backdrop-filter:blur(15px);backdrop-filter:blur(15px)}details:not(.single){border-bottom:var(--px-border-size-m) solid var(--px-border-color-container-main-default)}details:not(.single) ::slotted([slot="title"]){flex-grow:1}details:not(.single) slot[name=content]{display:block;padding-block:var(--px-padding-s-mobile)}details:not(.single) summary{display:flex;padding:var(--px-padding-s-mobile);gap:var(--px-spacing-after-element-s-mobile);align-self:stretch}details:not(.single) summary:hover{background-color:var(--px-background-color-action-neutral-default)}details.single summary{display:inline-flex;padding-block:var(--px-padding-2xs-mobile);gap:var(--px-spacing-after-element-xs-mobile);justify-content:center;color:var(--px-text-color-heading-brand-default);font-weight:700;border:var(--px-border-size-m) solid transparent;border-radius:var(--px-radius-pill)}details.single summary:hover{gap:var(--px-spacing-after-element-2xs-mobile);padding:var(--px-padding-2xs-mobile) var(--px-padding-s-mobile);border-color:var(--px-border-color-action-hover-default)}details.single summary:hover:after{border-color:transparent;background-color:transparent;margin-right:calc(var(--px-padding-xs-mobile) * -1)}details.single slot[name=content]{display:block;padding-top:var(--px-spacing-inside-section-s-mobile)}details[open] summary slot[name=title]{color:var(--px-text-color-heading-brand-default);font-weight:700}details[open] summary:after{transform:rotate(180deg)}summary::-webkit-details-marker{display:none}:host([inverted]) details{color:var(--px-text-color-heading-neutral-inverted)}:host([inverted]) details summary:after{background-color:var(--px-background-color-action-secondary-inverted);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12.4714 6.19524C12.2111 5.93489 11.789 5.93489 11.5286 6.19524L8.00002 9.72384L4.47142 6.19524C4.21107 5.93489 3.78897 5.93489 3.52862 6.19524C3.26827 6.45559 3.26827 6.8777 3.52862 7.13805L7.52862 11.1381C7.78897 11.3984 8.21108 11.3984 8.47142 11.1381L12.4714 7.13805C12.7318 6.8777 12.7318 6.45559 12.4714 6.19524Z' fill='white'/%3E%3C/svg%3E")}:host([inverted]) details summary:hover:after{background-color:var(--px-background-color-action-hover-default);border-color:var(--px-border-color-action-hover-inverted)}:host([inverted]) details:not(.single){border-bottom-color:var(--px-border-color-container-main-inverted)}:host([inverted]) details:not(.single) summary:hover{background-color:var(--px-background-color-action-neutral-inverted)}:host([inverted]) details.single summary{color:var(--px-text-color-heading-brand-inverted)}:host([inverted]) details.single summary:hover{border-color:var(--px-border-color-action-hover-inverted)}:host([inverted]) details.single summary:hover:after{border-color:transparent;background-color:transparent}:host([inverted]) details[open] summary slot[name=title]{color:var(--px-text-color-heading-brand-inverted)}@media only screen and (min-width: 768px){details:not(.single) slot[name=content]{padding-block:var(--px-padding-s-tablet)}details:not(.single) summary{padding:var(--px-padding-s-tablet);gap:var(--px-spacing-after-element-s-tablet)}details.single summary{padding-block:var(--px-padding-2xs-tablet);gap:var(--px-spacing-after-element-xs-tablet)}details.single summary:hover{gap:var(--px-spacing-after-element-2xs-tablet);padding:var(--px-padding-2xs-tablet) var(--px-padding-s-tablet)}details.single summary:hover:after{margin-right:calc(var(--px-padding-xs-tablet) * -1)}details.single slot[name=content]{padding-top:var(--px-spacing-inside-section-s-tablet)}}@media only screen and (min-width: 1025px){details:not(.single) slot[name=content]{padding-block:var(--px-padding-s-desktop)}details:not(.single) summary{padding:var(--px-padding-s-desktop);gap:var(--px-spacing-after-element-s-desktop)}details.single summary{padding-block:var(--px-padding-2xs-desktop);gap:var(--px-spacing-after-element-xs-desktop)}details.single summary:hover{gap:var(--px-spacing-after-element-2xs-desktop);padding:var(--px-padding-2xs-desktop) var(--px-padding-s-desktop)}details.single summary:hover:after{margin-right:calc(var(--px-padding-xs-desktop) * -1)}details.single slot[name=content]{padding-top:var(--px-spacing-inside-section-s-desktop)}}`;
2451
2725
  const accordionStyles = new CSSStyleSheet();
2452
2726
  accordionStyles.replaceSync(accordionCss);
2453
2727
  const variantValues = ["", "none", "single"];
@@ -2507,67 +2781,25 @@ const _Accordion = class _Accordion extends PxElement {
2507
2781
  _Accordion.nativeName = "details";
2508
2782
  let Accordion = _Accordion;
2509
2783
  customElements.define("px-accordion", Accordion);
2510
- const imgCss = 'img{display:inline-block;vertical-align:middle;max-width:100%;height:auto;border-style:none}.border-radius-main,.border-radius-main img{border-radius:var(--px-radius-main)}.border-radius-pill,.border-radius-pill img{border-radius:var(--px-radius-pill)}.no-border-radius-top,.no-border-radius-top img{border-top-left-radius:var(--px-radius-none);border-top-right-radius:var(--px-radius-none)}.no-border-radius-right,.no-border-radius-right img{border-top-right-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-bottom,.no-border-radius-bottom img{border-bottom-left-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-left,.no-border-radius-left img{border-top-left-radius:var(--px-radius-none);border-bottom-left-radius:var(--px-radius-none)}.no-border-radius-all,.no-border-radius-all img{border-radius:var(--px-radius-none)}@media only screen and (max-width: 767px){:host([hide-for="mobile"]),:host([show-for="tablet"]),:host([show-for="laptop"]),.hide-for-mobile,.show-for-tablet,.show-for-laptop{display:none}.no-border-radius-mobile-top,.no-border-radius-mobile-top img{border-top-left-radius:var(--px-radius-none);border-top-right-radius:var(--px-radius-none)}.no-border-radius-mobile-right,.no-border-radius-mobile-right img{border-top-right-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-mobile-bottom,.no-border-radius-mobile-bottom img{border-bottom-left-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-mobile-left,.no-border-radius-mobile-left img{border-top-left-radius:var(--px-radius-none);border-bottom-left-radius:var(--px-radius-none)}.no-border-radius-mobile-all,.no-border-radius-mobile-all img{border-radius:var(--px-radius-none)}}@media only screen and (min-width: 768px) and (max-width: 1024px){:host([hide-for="tablet"]),:host([show-for="mobile"]),:host([show-for="laptop"]),.hide-for-tablet,.show-for-mobile,.show-for-laptop{display:none}.no-border-radius-tablet-top,.no-border-radius-tablet-top img{border-top-left-radius:var(--px-radius-none);border-top-right-radius:var(--px-radius-none)}.no-border-radius-tablet-right,.no-border-radius-tablet-right img{border-top-right-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-tablet-bottom,.no-border-radius-tablet-bottom img{border-bottom-left-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-tablet-left,.no-border-radius-tablet-left img{border-top-left-radius:var(--px-radius-none);border-bottom-left-radius:var(--px-radius-none)}.no-border-radius-tablet-all,.no-border-radius-tablet-all img{border-radius:var(--px-radius-none)}}@media only screen and (min-width: 1025px){:host([hide-for="laptop"]),:host([show-for="mobile"]),:host([show-for="tablet"]),.hide-for-laptop,.show-for-mobile,.show-for-tablet{display:none}.no-border-radius-laptop-top,.no-border-radius-laptop-top img{border-top-left-radius:var(--px-radius-none);border-top-right-radius:var(--px-radius-none)}.no-border-radius-laptop-right,.no-border-radius-laptop-right img{border-top-right-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-laptop-bottom,.no-border-radius-laptop-bottom img{border-bottom-left-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-laptop-left,.no-border-radius-laptop-left img{border-top-left-radius:var(--px-radius-none);border-bottom-left-radius:var(--px-radius-none)}.no-border-radius-laptop-all,.no-border-radius-laptop-all img{border-radius:var(--px-radius-none)}}';
2784
+ const imgCss = 'img{display:inline-block;vertical-align:middle;max-width:100%;height:auto;border-style:none}.border-radius-main,.border-radius-main img{border-radius:var(--px-radius-main)}.border-radius-pill,.border-radius-pill img{border-radius:var(--px-radius-pill)}.no-border-radius-top,.no-border-radius-top img{border-top-left-radius:var(--px-radius-none);border-top-right-radius:var(--px-radius-none)}.no-border-radius-right,.no-border-radius-right img{border-top-right-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-bottom,.no-border-radius-bottom img{border-bottom-left-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-left,.no-border-radius-left img{border-top-left-radius:var(--px-radius-none);border-bottom-left-radius:var(--px-radius-none)}.no-border-radius-all,.no-border-radius-all img{border-radius:var(--px-radius-none)}@media only screen and (max-width: 767px){:host([hide-for="mobile"]),:host([show-for="tablet"]),:host([show-for="laptop"]),.hide-for-mobile,.show-for-tablet,.show-for-laptop{display:none}.no-border-radius-top--mobile,.no-border-radius-top--mobile img{border-top-left-radius:var(--px-radius-none);border-top-right-radius:var(--px-radius-none)}.no-border-radius-right--mobile,.no-border-radius-right--mobile img{border-top-right-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-bottom--mobile,.no-border-radius-bottom--mobile img{border-bottom-left-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-left--mobile,.no-border-radius-left--mobile img{border-top-left-radius:var(--px-radius-none);border-bottom-left-radius:var(--px-radius-none)}.no-border-radius-all--mobile,.no-border-radius-all--mobile img{border-radius:var(--px-radius-none)}}@media only screen and (min-width: 768px) and (max-width: 1024px){:host([hide-for="tablet"]),:host([show-for="mobile"]),:host([show-for="laptop"]),.hide-for-tablet,.show-for-mobile,.show-for-laptop{display:none}.no-border-radius-top--tablet,.no-border-radius-top--tablet img{border-top-left-radius:var(--px-radius-none);border-top-right-radius:var(--px-radius-none)}.no-border-radius-right--tablet,.no-border-radius-right--tablet img{border-top-right-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-bottom--tablet,.no-border-radius-bottom--tablet img{border-bottom-left-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-left--tablet,.no-border-radius-left--tablet img{border-top-left-radius:var(--px-radius-none);border-bottom-left-radius:var(--px-radius-none)}.no-border-radius-all--tablet,.no-border-radius-all--tablet img{border-radius:var(--px-radius-none)}}@media only screen and (min-width: 1025px){:host([hide-for="laptop"]),:host([show-for="mobile"]),:host([show-for="tablet"]),.hide-for-laptop,.show-for-mobile,.show-for-tablet{display:none}.no-border-radius-top--laptop,.no-border-radius-top--laptop img{border-top-left-radius:var(--px-radius-none);border-top-right-radius:var(--px-radius-none)}.no-border-radius-right--laptop,.no-border-radius-right--laptop img{border-top-right-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-bottom--laptop,.no-border-radius-bottom--laptop img{border-bottom-left-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-left--laptop,.no-border-radius-left--laptop img{border-top-left-radius:var(--px-radius-none);border-bottom-left-radius:var(--px-radius-none)}.no-border-radius-all--laptop,.no-border-radius-all--laptop img{border-radius:var(--px-radius-none)}}';
2511
2785
  const styleSheet$8 = new CSSStyleSheet();
2512
2786
  styleSheet$8.replaceSync(imgCss);
2513
- const breakpointsValues = ["", "mobile", "tablet", "laptop", "desktop"];
2514
- class AbstractImage extends PxElement {
2515
- constructor() {
2516
- super(styleSheet$8);
2517
- }
2518
- static get observedAttributes() {
2519
- return [
2520
- ...super.observedAttributes,
2521
- "hide-for",
2522
- "show-for",
2523
- "border-radius",
2524
- "no-border-radius",
2525
- "no-border-radius-mobile",
2526
- "no-border-radius-tablet",
2527
- "no-border-radius-laptop"
2528
- ];
2529
- }
2530
- get hidefor() {
2531
- return this.getAttribute("hide-for");
2532
- }
2533
- set hidefor(value) {
2534
- this.setAttribute("hide-for", value);
2535
- }
2536
- get showfor() {
2537
- return this.getAttribute("show-for");
2538
- }
2539
- set showfor(value) {
2540
- this.setAttribute("show-for", value);
2541
- }
2542
- get borderRadius() {
2543
- return this.getAttribute("border-radius");
2544
- }
2545
- set borderRadius(value) {
2546
- this.setAttribute("border-radius", value);
2547
- }
2548
- get noBorderRadius() {
2549
- return this.getAttribute("no-border-radius");
2550
- }
2551
- set noBorderRadius(value) {
2552
- this.setAttribute("no-border-radius", value);
2553
- }
2554
- get noBorderRadiusMobile() {
2555
- return this.getAttribute("no-border-radius-mobile");
2556
- }
2557
- set noBorderRadiusMobile(value) {
2558
- this.setAttribute("no-border-radius-mobile", value);
2559
- }
2560
- get noBorderRadiusTablet() {
2561
- return this.getAttribute("no-border-radius-tablet");
2562
- }
2563
- set noBorderRadiusTablet(value) {
2564
- this.setAttribute("no-border-radius-tablet", value);
2565
- }
2566
- get noBorderRadiusLaptop() {
2567
- return this.getAttribute("no-border-radius-laptop");
2787
+ const breakpointsValues = ["", "mobile", "tablet", "laptop"];
2788
+ class AbstractImage extends PxElement {
2789
+ constructor() {
2790
+ super(styleSheet$8);
2568
2791
  }
2569
- set noBorderRadiusLaptop(value) {
2570
- this.setAttribute("no-border-radius-laptop", value);
2792
+ static get observedAttributes() {
2793
+ return [
2794
+ ...super.observedAttributes,
2795
+ "hide-for",
2796
+ "show-for",
2797
+ "border-radius",
2798
+ "no-border-radius",
2799
+ "no-border-radius--mobile",
2800
+ "no-border-radius--tablet",
2801
+ "no-border-radius--laptop"
2802
+ ];
2571
2803
  }
2572
2804
  attributeChangedCallback(attrName, oldValue, newValue) {
2573
2805
  if (oldValue !== newValue) {
@@ -2585,9 +2817,9 @@ class AbstractImage extends PxElement {
2585
2817
  );
2586
2818
  break;
2587
2819
  case "no-border-radius":
2588
- case "no-border-radius-mobile":
2589
- case "no-border-radius-tablet":
2590
- case "no-border-radius-laptop":
2820
+ case "no-border-radius--mobile":
2821
+ case "no-border-radius--tablet":
2822
+ case "no-border-radius--laptop":
2591
2823
  this.updateAttribute(
2592
2824
  attrName,
2593
2825
  oldValue,
@@ -2607,17 +2839,77 @@ class AbstractImage extends PxElement {
2607
2839
  `${newValue} is not an allowed ${attrName} value for ${this.$el}`
2608
2840
  );
2609
2841
  } else {
2842
+ const splitResult = this.splitAttrNameFromBreakpoint(attrName);
2843
+ const breakpoint = splitResult.breakpoint;
2610
2844
  if (oldValue !== null && oldValue !== "") {
2611
- this.$el.classList.toggle(`${attrName}-${oldValue}`);
2845
+ this.$el.classList.toggle(
2846
+ `${splitResult.attrName}-${oldValue}${breakpoint}`
2847
+ );
2612
2848
  }
2613
2849
  if (newValue !== null && newValue !== "") {
2614
- this.$el.classList.toggle(`${attrName}-${newValue}`);
2850
+ this.$el.classList.toggle(
2851
+ `${splitResult.attrName}-${newValue}${breakpoint}`
2852
+ );
2615
2853
  }
2616
2854
  }
2617
2855
  }
2856
+ splitAttrNameFromBreakpoint(attrName) {
2857
+ let breakpoint = "";
2858
+ if (["--mobile", "--tablet", "--laptop"].some(
2859
+ (suffix) => attrName.includes(suffix)
2860
+ )) {
2861
+ const attrNameSplit = attrName.split("--");
2862
+ attrName = attrNameSplit[0];
2863
+ breakpoint = `--${attrNameSplit[1]}`;
2864
+ }
2865
+ return { attrName, breakpoint };
2866
+ }
2618
2867
  checkName(values, value) {
2619
2868
  return values.includes(value);
2620
2869
  }
2870
+ //get & set
2871
+ get hidefor() {
2872
+ return this.getAttribute("hide-for");
2873
+ }
2874
+ set hidefor(value) {
2875
+ this.setAttribute("hide-for", value);
2876
+ }
2877
+ get showfor() {
2878
+ return this.getAttribute("show-for");
2879
+ }
2880
+ set showfor(value) {
2881
+ this.setAttribute("show-for", value);
2882
+ }
2883
+ get borderRadius() {
2884
+ return this.getAttribute("border-radius");
2885
+ }
2886
+ set borderRadius(value) {
2887
+ this.setAttribute("border-radius", value);
2888
+ }
2889
+ get noBorderRadius() {
2890
+ return this.getAttribute("no-border-radius");
2891
+ }
2892
+ set noBorderRadius(value) {
2893
+ this.setAttribute("no-border-radius", value);
2894
+ }
2895
+ get noBorderRadiusMobile() {
2896
+ return this.getAttribute("no-border-radius--mobile");
2897
+ }
2898
+ set noBorderRadiusMobile(value) {
2899
+ this.setAttribute("no-border-radius--mobile", value);
2900
+ }
2901
+ get noBorderRadiusTablet() {
2902
+ return this.getAttribute("no-border-radius--tablet");
2903
+ }
2904
+ set noBorderRadiusTablet(value) {
2905
+ this.setAttribute("no-border-radius--tablet", value);
2906
+ }
2907
+ get noBorderRadiusLaptop() {
2908
+ return this.getAttribute("no-border-radius--laptop");
2909
+ }
2910
+ set noBorderRadiusLaptop(value) {
2911
+ this.setAttribute("no-border-radius--laptop", value);
2912
+ }
2621
2913
  }
2622
2914
  const _Image = class _Image extends AbstractImage {
2623
2915
  constructor() {
@@ -2872,12 +3164,12 @@ class Patch extends HTMLElement {
2872
3164
  if (!customElements.get("px-patch")) {
2873
3165
  customElements.define("px-patch", Patch);
2874
3166
  }
2875
- const css$1 = '.price{--price-s: var(--px-text-size-l-mobile);--price-m: var(--px-text-size-xl-mobile);--price-l: var(--px-text-size-3xl-mobile);font-family:var(--px-font-family);white-space:nowrap;font-weight:700;color:var(--px-color-txt-primary-default);font-size:var(--price-s)}@media only screen and (min-width: 641px){.price{--price-s: var(--px-text-size-l-tablet);--price-m: var(--px-text-size-xl-tablet);--price-l: var(--px-text-size-3xl-tablet)}}@media only screen and (min-width: 1025px){.price{--price-s: var(--px-text-size-l-desktop);--price-m: var(--px-text-size-xl-desktop);--price-l: var(--px-text-size-3xl-desktop)}}.promo,.free{color:var(--px-color-txt-promo-default)}.neutral{color:var(--px-color-txt-body-default)}.exceeding{color:var(--px-color-txt-error-default)}.disabled{color:var(--px-color-txt-disabled-default)}::slotted([slot="oldprice"]){text-decoration:line-through;color:var(--px-color-txt-body-default);font-size:var(--px-text-size-base-mobile);font-weight:400}@media only screen and (min-width: 641px){{font-size:var(--px-text-size-base-tablet)}}@media only screen and (min-width: 1025px){{font-size:var(--px-text-size-base-desktop)}}::slotted([slot="newpromoprice"]){position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}:host([inverted]) .price{color:var(--px-color-txt-primary-inverted)}:host([inverted]) .promo,:host([inverted]) .free{color:var(--px-color-txt-promo-inverted)}:host([inverted]) .neutral{color:var(--px-color-txt-body-inverted)}:host([inverted]) .exceeding{color:var(--px-color-txt-error-inverted)}:host([inverted]) .disabled{color:var(--px-color-txt-disabled-inverted)}:host([inverted]) ::slotted(s){color:var(--px-color-txt-body-inverted)}.price:not(.promo):not(.free) ::slotted(s){display:none}::slotted(.euro){font-size:calc(var(--price-s) * .75)}::slotted(.decimals){font-size:calc(var(--price-s) * .5)}.m{font-size:var(--price-m)}:host([size="m"]) ::slotted(.decimals){font-size:calc(var(--price-m) * .5)}:host([size="m"]) ::slotted(.euro){font-size:calc(var(--price-m) * .75)}.l{font-size:var(--price-l)}:host([size="l"]) ::slotted(.decimals){font-size:calc(var(--price-l) * .5)}:host([size="l"]) ::slotted(.euro){font-size:calc(var(--price-l) * .75)}';
3167
+ const css$1 = '.price{--price-s: var(--px-text-size-heading-l-mobile);--price-m: var(--px-text-size-heading-xl-mobile);--price-l: var(--px-text-size-heading-3xl-mobile);font-family:var(--px-font-family);white-space:nowrap;font-weight:700;color:var(--px-text-color-heading-brand-default);font-size:var(--price-s)}@media only screen and (min-width: 641px){.price{--price-s: var(--px-text-size-heading-l-tablet);--price-m: var(--px-text-size-heading-xl-tablet);--price-l: var(--px-text-size-heading-3xl-tablet)}}@media only screen and (min-width: 1025px){.price{--price-s: var(--px-text-size-heading-l-desktop);--price-m: var(--px-text-size-heading-xl-desktop);--price-l: var(--px-text-size-heading-3xl-desktop)}}.purpose-promo,.free{color:var(--px-text-color-purpose-promo-default)}.neutral{color:var(--px-text-color-heading-neutral-default)}.exceeding{color:var(--px-text-color-purpose-error-default)}.disabled{color:var(--px-text-color-action-disabled-default)}::slotted([slot="oldprice"]){text-decoration:line-through;color:var(--px-text-color-heading-neutral-default);font-size:var(--px-text-size-label-m-mobile);font-weight:400}@media only screen and (min-width: 641px){{font-size:var(--px-text-size-label-m-tablet)}}@media only screen and (min-width: 1025px){{font-size:var(--px-text-size-label-m-desktop)}}::slotted([slot="newpurpose-promoprice"]){position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}:host([inverted]) .price{color:var(--px-text-color-heading-brand-inverted)}:host([inverted]) .purpose-promo,:host([inverted]) .free{color:var(--px-text-color-purpose-promo-inverted)}:host([inverted]) .neutral{color:var(--px-text-color-heading-neutral-inverted)}:host([inverted]) .exceeding{color:var(--px-text-color-purpose-error-inverted)}:host([inverted]) .disabled{color:var(--px-text-color-action-disabled-inverted)}:host([inverted]) ::slotted(s){color:var(--px-text-color-heading-neutral-inverted)}.price:not(.purpose-promo):not(.free) ::slotted(s){display:none}::slotted(.euro){font-size:calc(var(--price-s) * .75)}::slotted(.decimals){font-size:calc(var(--price-s) * .5)}.m{font-size:var(--price-m)}:host([size="m"]) ::slotted(.decimals){font-size:calc(var(--price-m) * .5)}:host([size="m"]) ::slotted(.euro){font-size:calc(var(--price-m) * .75)}.l{font-size:var(--price-l)}:host([size="l"]) ::slotted(.decimals){font-size:calc(var(--price-l) * .5)}:host([size="l"]) ::slotted(.euro){font-size:calc(var(--price-l) * .75)}';
2876
3168
  const styles$8 = new CSSStyleSheet();
2877
3169
  styles$8.replaceSync(css$1);
2878
3170
  const priceVariantValues = [
2879
3171
  "default",
2880
- "promo",
3172
+ "purpose-promo",
2881
3173
  "free",
2882
3174
  "neutral",
2883
3175
  "exceeding",
@@ -2887,7 +3179,7 @@ const priceSizeValues = ["", "s", "m", "l"];
2887
3179
  const _Price = class _Price extends PxElement {
2888
3180
  constructor() {
2889
3181
  super(styles$8);
2890
- this.template = () => `<span class="price"><slot name="oldprice"></slot><slot name="newpromoprice"></slot><slot></slot></span>`;
3182
+ this.template = () => `<span class="price"><slot name="oldprice"></slot><slot name="newpurpose-promoprice"></slot><slot></slot></span>`;
2891
3183
  this.shadowRoot.innerHTML = this.template();
2892
3184
  }
2893
3185
  static get observedAttributes() {
@@ -2961,7 +3253,7 @@ const _Price = class _Price extends PxElement {
2961
3253
  let newPriceSrSpan;
2962
3254
  if (oldPrice && oldPrice.innerHTML !== "") {
2963
3255
  oldPrice.innerHTML = "€" + oldPrice.innerHTML;
2964
- newPriceSrSpan = this.querySelector('[slot="newpromoprice"]');
3256
+ newPriceSrSpan = this.querySelector('[slot="newpurpose-promoprice"]');
2965
3257
  if (newPriceSrSpan) {
2966
3258
  newPriceSrText = newPriceSrSpan.outerHTML;
2967
3259
  price = newPriceSrSpan.nextSibling.textContent;
@@ -2991,7 +3283,7 @@ const _Price = class _Price extends PxElement {
2991
3283
  _Price.nativeName = "span";
2992
3284
  let Price = _Price;
2993
3285
  customElements.define("px-price", Price);
2994
- const css = ":host{box-sizing:border-box}.ribbon{font-family:var(--px-font-family);font-weight:700;font-size:var(--px-text-size-base-mobile);line-height:var(--px-line-height-m);white-space:nowrap;text-align:left;color:var(--px-color-txt-body-inverted);background-color:var(--px-color-bg-container-rich-default);padding:var(--px-padding-xs) var(--px-padding-s);border-radius:var(--px-radius-main) var(--px-radius-main) 0 0}.ribbon,.ribbon *{box-sizing:border-box}@media only screen and (min-width: 768px){.ribbon{font-size:var(--px-text-size-base-tablet)}}@media only screen and (min-width: 1025px){.ribbon{font-size:var(--px-text-size-base-desktop)}}";
3286
+ const css = ":host{box-sizing:border-box}.ribbon{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);white-space:nowrap;text-align:left;color:var(--px-text-color-heading-brand-inverted);background-color:var(--px-background-color-container-neutral-rich-default);padding:var(--px-padding-xs-mobile) var(--px-padding-s-mobile);border-radius:var(--px-radius-main) var(--px-radius-main) 0 0}.ribbon,.ribbon *{box-sizing:border-box}@media only screen and (min-width: 768px){.ribbon{font-size:var(--px-text-size-label-m-tablet);padding:var(--px-padding-xs-tablet) var(--px-padding-s-tablet)}}@media only screen and (min-width: 1025px){.ribbon{font-size:var(--px-text-size-label-m-desktop);padding:var(--px-padding-xs-desktop) var(--px-padding-s-desktop)}}";
2995
3287
  const styles$7 = new CSSStyleSheet();
2996
3288
  styles$7.replaceSync(css);
2997
3289
  const _Ribbon = class _Ribbon extends PxElement {
@@ -3004,21 +3296,29 @@ const _Ribbon = class _Ribbon extends PxElement {
3004
3296
  _Ribbon.nativeName = "div";
3005
3297
  let Ribbon = _Ribbon;
3006
3298
  customElements.define("px-ribbon", Ribbon);
3007
- const styles$6 = ".separator{--separator-size: var(--px-border-m);--px-separator-color: var(--px-color-border-main-default);--separator-direction-mobile-border-width: var(--separator-size) 0 0;--separator-direction-mobile-width: initial;--separator-direction-mobile-height: initial;clear:both;margin:0;border-style:solid;border-color:var(--px-separator-color);border-width:var(--separator-size) 0 0;width:initial;height:initial}.separator_direction_horizontal{border-width:var(--separator-size) 0 0;width:initial;height:initial}.separator_direction_vertical{width:var(--separator-size);height:100%;border-width:0 var(--separator-size) 0 0}@media only screen and (min-width: 0px) and (max-width: 767px){.separator_direction_horizontal--mobile{border-width:var(--separator-size) 0 0;width:initial;height:initial}.separator_direction_vertical--mobile{width:var(--separator-size);height:100%;border-width:0 var(--separator-size) 0 0}}@media only screen and (min-width: 768px) and (max-width: 1024px){.separator_direction_horizontal--tablet{border-width:var(--separator-size) 0 0;width:initial;height:initial}.separator_direction_vertical--tablet{width:var(--separator-size);height:100%;border-width:0 var(--separator-size) 0 0}}@media only screen and (min-width: 1025px) and (max-width: 1440px){.separator_direction_horizontal--laptop{border-width:var(--separator-size) 0 0;width:initial;height:initial}.separator_direction_vertical--laptop{width:var(--separator-size);height:100%;border-width:0 var(--separator-size) 0 0}}@media only screen and (min-width: 1441px){.separator_direction_horizontal--desktop{border-width:var(--separator-size) 0 0;width:initial;height:initial}.separator_direction_vertical--desktop{width:var(--separator-size);height:100%;border-width:0 var(--separator-size) 0 0}}:host([inverted]) .separator{--px-separator-color: var(--px-color-border-main-inverted)}";
3299
+ const styles$6 = ".separator{--separator-size: var(--px-border-size-m);--separator-direction--mobile-border-width: var(--separator-size) 0 0;--separator-direction--mobile-width: initial;--separator-direction--mobile-height: initial;clear:both;margin:0;border-style:solid;border-color:var( --px-separator-color-default, var(--px-border-color-container-main-default) );border-width:var(--separator-size) 0 0;width:initial;height:initial}.separator-direction-horizontal--mobile{border-width:var(--separator-size) 0 0;width:initial;height:initial}.separator-direction-vertical--mobile{width:var(--separator-size);height:100%;border-width:0 var(--separator-size) 0 0}:host([inverted]) .separator{border-color:var( --px-separator-color-inverted, var(--px-border-color-container-main-inverted) )}@media only screen and (min-width: 768px){.separator-direction-horizontal--tablet{border-width:var(--separator-size) 0 0;width:initial;height:initial}.separator-direction-vertical--tablet{width:var(--separator-size);height:100%;border-width:0 var(--separator-size) 0 0}}@media only screen and (min-width: 1025px){.separator-direction-horizontal--laptop{border-width:var(--separator-size) 0 0;width:initial;height:initial}.separator-direction-vertical--laptop{width:var(--separator-size);height:100%;border-width:0 var(--separator-size) 0 0}}@media only screen and (min-width: 1441px){.separator-direction-horizontal--desktop{border-width:var(--separator-size) 0 0;width:initial;height:initial}.separator-direction-vertical--desktop{width:var(--separator-size);height:100%;border-width:0 var(--separator-size) 0 0}}";
3008
3300
  const styleSheet$6 = new CSSStyleSheet();
3009
3301
  styleSheet$6.replaceSync(styles$6);
3010
- const directionValues = ["", "default", "horizontal", "vertical"];
3011
- const sizeValues = ["", "none", "s", "m", "l"];
3012
- const colorValues = [
3302
+ const separatorDirectionValues = [
3303
+ "",
3304
+ "default",
3305
+ "horizontal",
3306
+ "vertical"
3307
+ ];
3308
+ const separatorSizeValues = ["", "default", "none", "s", "m", "l"];
3309
+ const separatorColorValues = [
3013
3310
  "",
3014
- "contrasted",
3311
+ "default",
3312
+ "none",
3015
3313
  "action-hover",
3016
3314
  "action-active",
3017
- "none",
3018
- "success",
3019
- "error",
3020
- "warning",
3021
- "unlimited"
3315
+ "action-neutral",
3316
+ "container-main",
3317
+ "container-brand",
3318
+ "purpose-success",
3319
+ "purpose-error",
3320
+ "purpose-warning",
3321
+ "purpose-unlimited"
3022
3322
  ];
3023
3323
  const _Separator = class _Separator extends PxElement {
3024
3324
  constructor() {
@@ -3031,15 +3331,115 @@ const _Separator = class _Separator extends PxElement {
3031
3331
  return [
3032
3332
  ...super.observedAttributes,
3033
3333
  "direction",
3034
- "direction-mobile",
3035
- "direction-tablet",
3036
- "direction-laptop",
3037
- "direction-desktop",
3334
+ "direction--mobile",
3335
+ "direction--tablet",
3336
+ "direction--laptop",
3337
+ "direction--desktop",
3038
3338
  "size",
3039
3339
  "color",
3040
3340
  "inverted"
3041
3341
  ];
3042
3342
  }
3343
+ attributeChangedCallback(attrName, oldValue, newValue) {
3344
+ if (oldValue !== newValue) {
3345
+ switch (attrName) {
3346
+ case "direction":
3347
+ case "direction--mobile":
3348
+ case "direction--tablet":
3349
+ case "direction--laptop":
3350
+ case "direction--desktop":
3351
+ this.updateDirection(
3352
+ attrName,
3353
+ oldValue,
3354
+ newValue,
3355
+ separatorDirectionValues
3356
+ );
3357
+ break;
3358
+ case "size":
3359
+ this.updateSize(attrName, oldValue, newValue, separatorSizeValues);
3360
+ break;
3361
+ case "color":
3362
+ this.updateColor(attrName, oldValue, newValue, separatorColorValues);
3363
+ break;
3364
+ default:
3365
+ super.attributeChangedCallback(attrName, oldValue, newValue);
3366
+ break;
3367
+ }
3368
+ }
3369
+ }
3370
+ checkName(values, value) {
3371
+ return values.includes(value);
3372
+ }
3373
+ updateSize(attrName, oldValue, newValue, attrValue) {
3374
+ const updateSizeStyle = (value) => {
3375
+ if (value !== null && value !== "" && value !== "default") {
3376
+ this.$el.style.setProperty(
3377
+ "--separator-size",
3378
+ `var(--px-border-size-${value})`
3379
+ );
3380
+ }
3381
+ };
3382
+ if (!this.checkName(attrValue, newValue)) {
3383
+ console.error(`Bad ${attrName} value for`, this.$el);
3384
+ } else {
3385
+ updateSizeStyle(oldValue);
3386
+ updateSizeStyle(newValue);
3387
+ }
3388
+ }
3389
+ updateColor(attrName, oldValue, newValue, attrValue) {
3390
+ const updateColorStyle = (value) => {
3391
+ if (value !== null && value !== "" && value !== "default") {
3392
+ this.$el.style.setProperty(
3393
+ `--px-separator-color-default`,
3394
+ `var(--px-border-color-${value}-default)`
3395
+ );
3396
+ this.$el.style.setProperty(
3397
+ `--px-separator-color-inverted`,
3398
+ `var(--px-border-color-${value}-inverted)`
3399
+ );
3400
+ }
3401
+ };
3402
+ if (!this.checkName(attrValue, newValue)) {
3403
+ console.error(`Bad ${attrName} value for`, this.$el);
3404
+ } else {
3405
+ updateColorStyle(oldValue);
3406
+ updateColorStyle(newValue);
3407
+ }
3408
+ }
3409
+ updateDirection(attrName, oldValue, newValue, attrValue) {
3410
+ const updateDirectionClass = (breakpoint, value) => {
3411
+ if (value !== null && value !== "" && value !== "default") {
3412
+ this.$el.classList.add(`separator-direction-${value}--${breakpoint}`);
3413
+ }
3414
+ };
3415
+ if (!this.checkName(attrValue, newValue)) {
3416
+ console.error(`Bad "${attrName}" value for`, this.$el);
3417
+ } else {
3418
+ if (attrName === "direction") {
3419
+ ["mobile", "tablet", "laptop", "desktop"].forEach((breakpoint) => {
3420
+ const existingClass = Array.from(this.$el.classList).find(
3421
+ (className) => className.startsWith(`separator-direction-`) && className.endsWith(`--${breakpoint}`)
3422
+ );
3423
+ if (!existingClass) {
3424
+ updateDirectionClass(breakpoint, newValue);
3425
+ }
3426
+ });
3427
+ } else {
3428
+ const breakpoint = attrName.split("--")[1];
3429
+ const existingClass = Array.from(this.$el.classList).find(
3430
+ (className) => className.startsWith(`separator-direction-`) && className.endsWith(`--${breakpoint}`)
3431
+ );
3432
+ if (existingClass) {
3433
+ this.$el.classList.replace(
3434
+ existingClass,
3435
+ `separator-direction-${newValue}--${breakpoint}`
3436
+ );
3437
+ } else {
3438
+ updateDirectionClass(breakpoint, newValue);
3439
+ }
3440
+ }
3441
+ }
3442
+ }
3043
3443
  get direction() {
3044
3444
  return this.getAttribute("direction");
3045
3445
  }
@@ -3047,28 +3447,28 @@ const _Separator = class _Separator extends PxElement {
3047
3447
  this.setAttribute("direction", value);
3048
3448
  }
3049
3449
  get directionMobile() {
3050
- return this.getAttribute("direction-mobile");
3450
+ return this.getAttribute("direction--mobile");
3051
3451
  }
3052
3452
  set directionMobile(value) {
3053
- this.setAttribute("direction-mobile", value);
3453
+ this.setAttribute("direction--mobile", value);
3054
3454
  }
3055
3455
  get directionTablet() {
3056
- return this.getAttribute("direction-tablet");
3456
+ return this.getAttribute("direction--tablet");
3057
3457
  }
3058
3458
  set directionTablet(value) {
3059
- this.setAttribute("direction-tablet", value);
3459
+ this.setAttribute("direction--tablet", value);
3060
3460
  }
3061
3461
  get directionLaptop() {
3062
- return this.getAttribute("direction-laptop");
3462
+ return this.getAttribute("direction--laptop");
3063
3463
  }
3064
3464
  set directionLaptop(value) {
3065
- this.setAttribute("direction-laptop", value);
3465
+ this.setAttribute("direction--laptop", value);
3066
3466
  }
3067
3467
  get directionDesktop() {
3068
- return this.getAttribute("direction-desktop");
3468
+ return this.getAttribute("direction--desktop");
3069
3469
  }
3070
3470
  set directionDesktop(value) {
3071
- this.setAttribute("direction-desktop", value);
3471
+ this.setAttribute("direction--desktop", value);
3072
3472
  }
3073
3473
  get size() {
3074
3474
  return this.getAttribute("size");
@@ -3088,85 +3488,11 @@ const _Separator = class _Separator extends PxElement {
3088
3488
  set inverted(value) {
3089
3489
  this.setAttribute("inverted", value);
3090
3490
  }
3091
- attributeChangedCallback(attrName, oldValue, newValue) {
3092
- if (oldValue !== newValue) {
3093
- switch (attrName) {
3094
- case "direction":
3095
- case "direction-mobile":
3096
- case "direction-tablet":
3097
- case "direction-laptop":
3098
- case "direction-desktop":
3099
- this.updateDirection(attrName, newValue);
3100
- break;
3101
- case "size":
3102
- this.updateSize(newValue, sizeValues);
3103
- break;
3104
- case "color":
3105
- this.updateColor(newValue, colorValues);
3106
- break;
3107
- default:
3108
- super.attributeChangedCallback(attrName, oldValue, newValue);
3109
- break;
3110
- }
3111
- }
3112
- }
3113
- checkName(values, value) {
3114
- return values.includes(value);
3115
- }
3116
- updateSize(newValue, attrValue) {
3117
- if (!this.checkName(attrValue, newValue)) {
3118
- console.error(`Bad size value for`, this.$el);
3119
- this.$el.style.setProperty("--separator-size", "var(--px-border-m)");
3120
- } else {
3121
- this.$el.style.setProperty(
3122
- "--separator-size",
3123
- `var(--px-border-${newValue})`
3124
- );
3125
- }
3126
- }
3127
- updateColor(newValue, attrValue) {
3128
- if (!this.checkName(attrValue, newValue)) {
3129
- console.error(`Bad color value for`, this.$el);
3130
- this.$el.style.setProperty(
3131
- "--px-separator-color",
3132
- `var(--px-color-border-main-${this.inverted === null ? "default" : "inverted"})`
3133
- );
3134
- } else {
3135
- this.$el.style.setProperty(
3136
- "--px-separator-color",
3137
- `var(--px-color-border-${newValue}-${this.inverted === null ? "default" : "inverted"})`
3138
- );
3139
- }
3140
- }
3141
- updateDirection(attrName, newValue) {
3142
- if (!this.checkName(directionValues, newValue)) {
3143
- console.error(`Bad "${attrName}" value for`, this.$el);
3144
- } else {
3145
- if (attrName === "direction") {
3146
- this.$el.classList.add(`separator_direction_${newValue}`);
3147
- } else {
3148
- const classList = this.$el.classList;
3149
- const mediaquery = attrName.split("-")[1];
3150
- for (let i = 0; i < classList.length; i++) {
3151
- if (classList[i].includes(mediaquery)) {
3152
- this.$el.classList.replace(
3153
- classList[i],
3154
- `separator_direction_${newValue}--${mediaquery}`
3155
- );
3156
- } else {
3157
- this.$el.classList.add(
3158
- `separator_direction_${newValue}--${mediaquery}`
3159
- );
3160
- }
3161
- }
3162
- }
3163
- }
3164
- }
3165
3491
  };
3166
3492
  _Separator.nativeName = "hr";
3167
3493
  let Separator = _Separator;
3168
3494
  customElements.define("px-separator", Separator);
3169
- const styles$5 = '.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-s-mobile);line-height:var(--px-line-height-m);font-weight:400;gap:var(--px-spacing-text-to-icon-compact-horizontal);background-color:var(--px-color-bg-action-secondary-default);color:var(--px-color-txt-primary-default);padding:var(--px-padding-2xs) var(--px-padding-xs);border:var(--px-border-s) solid transparent;border-radius:var(--px-radius-main);--slotted-icon-size: var(--px-icon-size-xs-mobile)}.tag,.tag *{box-sizing:border-box}.tag ::slotted([slot="before"]){font-size:var(--px-icon-size-xs-mobile)}.light{background-color:var(--px-color-bg-action-disabled-default);color:var(--px-color-txt-body-default)}.outline{background-color:transparent;color:var(--px-color-txt-primary-default);border-color:var(--px-color-border-action-hover-default)}.pill{border-radius:var(--px-radius-pill)}:host([inverted]) .tag{background-color:var(--px-color-bg-action-secondary-inverted);color:var(--px-color-txt-primary-inverted)}:host([inverted]) .light{background-color:var(--px-color-bg-action-disabled-inverted);color:var(--px-color-txt-body-inverted)}:host([inverted]) .outline{background-color:transparent;color:var(--px-color-txt-primary-inverted);border-color:var(--px-color-border-action-hover-inverted)}@media only screen and (min-width: 64rem){.tag{font-size:var(--px-text-size-s-tablet);--slotted-icon-size: var(--px-icon-size-xs-tablet)}.tag ::slotted([slot="before"]){font-size:var(--px-icon-size-xs-tablet)}}@media only screen and (min-width: 90rem){.tag{font-size:var(--px-text-size-s-desktop);--slotted-icon-size: var(--px-icon-size-xs-desktop)}.tag ::slotted([slot="before"]){font-size:var(--px-icon-size-xs-desktop)}}';
3495
+ const styles$5 = '.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-secondary-default);color:var(--px-text-color-action-brand-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);--slotted-icon-size: var(--px-icon-size-xs-mobile)}.tag,.tag *{box-sizing:border-box}.tag ::slotted([slot="before"]){font-size:var(--px-icon-size-xs-mobile)}.light{background-color:var(--px-background-color-action-neutral-default);color:var(--px-text-color-action-neutral-default)}.outline{background-color:transparent;color:var(--px-text-color-heading-brand-default);border-color:var(--px-border-color-container-brand-default)}.pill{border-radius:var(--px-radius-pill)}:host([inverted]) .tag{background-color:var(--px-background-color-action-secondary-inverted);color:var(--px-text-color-action-brand-inverted)}:host([inverted]) .light{background-color:var(--px-background-color-action-neutral-inverted);color:var(--px-text-color-action-neutral-inverted)}:host([inverted]) .outline{background-color:transparent;color:var(--px-text-color-heading-brand-inverted);border-color:var(--px-border-color-action-hover-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);--slotted-icon-size: var(--px-icon-size-xs-tablet)}.tag ::slotted([slot="before"]){font-size:var(--px-icon-size-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);--slotted-icon-size: var(--px-icon-size-xs-desktop)}.tag ::slotted([slot="before"]){font-size:var(--px-icon-size-xs-desktop)}}';
3170
3496
  const styleSheet$5 = new CSSStyleSheet();
3171
3497
  styleSheet$5.replaceSync(styles$5);
3172
3498
  const tagVariantValues = ["", "default", "light", "outline"];
@@ -3249,7 +3575,7 @@ class Tag extends HTMLElement {
3249
3575
  if (!customElements.get("px-tag")) {
3250
3576
  customElements.define("px-tag", Tag);
3251
3577
  }
3252
- const styles$4 = '*{font-family:var(--px-font-family)}#container{display:flex;flex-direction:column;align-items:flex-start;gap:var(--px-spacing-component-default-vertical)}#panels{width:100%}div[role=tablist]{display:flex;align-items:center;scrollbar-width:none;overflow:scroll;width:80%;box-sizing:border-box}div[role=tablist] ::slotted(px-tab){background-color:var(--px-color-bg-container-weak-default)}div[role=tablist] ::slotted(px-tab[inverted=""]){background-color:var(--px-color-bg-container-weak-inverted)}div[role=tablist] ::slotted(px-tab[selected=""]){background-color:var(--px-color-bg-action-active-default);padding-block:var(--px-padding-m);border-radius:var(--px-radius-main)!important}div[role=tablist] ::slotted(px-tab[selected=""][inverted=""]){background-color:var(--px-color-bg-action-active-inverted)}div[role=tablist] ::slotted(px-tab:first-child){border-radius:var(--px-radius-main) var(--px-radius-none) var(--px-radius-none) var(--px-radius-main)}div[role=tablist] ::slotted(px-tab:last-of-type){border-radius:var(--px-radius-none) var(--px-radius-main) var(--px-radius-main) var(--px-radius-none)}div[role=tablist]::-webkit-scrollbar{display:none}button[role=tab]{background:none;border:none;padding:0;margin:0;cursor:pointer;height:inherit;width:inherit;padding:var(--px-padding-s);font-size:var(--px-text-size-base-mobile);font-weight:700;text-wrap:nowrap;color:var(--px-color-txt-body-default);outline:none}button[role=tab][inverted=""]{color:var(--px-color-txt-body-inverted)}@media screen and (min-width: 768px){button[role=tab]{font-size:var(--px-text-size-base-tablet)}}@media screen and (min-width: 1025px){button[role=tab]{font-size:var(--px-text-size-base-laptop)}}@media screen and (min-width: 1441px){button[role=tab]{font-size:var(--px-text-size-base-desktop)}}button[aria-selected=""]{padding-block:0;cursor:auto;color:var(--px-color-txt-primary-inverted)}button[aria-selected=""][inverted=""]{color:var(--px-color-txt-primary-default)}';
3578
+ const styles$4 = '*{font-family:var(--px-font-family)}#container{display:flex;flex-direction:column;align-items:flex-start;gap:var(--px-spacing-after-element-default-mobile)}#panels{width:100%}div[role=tablist]{display:flex;align-items:center;scrollbar-width:none;overflow:scroll;width:80%;box-sizing:border-box}div[role=tablist] ::slotted(px-tab){background-color:var(--px-background-color-action-neutral-default)}div[role=tablist] ::slotted(px-tab[selected=""]){background-color:var(--px-background-color-action-active-default);border-radius:var(--px-radius-main)!important}div[role=tablist] ::slotted(px-tab:first-child){border-radius:var(--px-radius-main) var(--px-radius-none) var(--px-radius-none) var(--px-radius-main)}div[role=tablist] ::slotted(px-tab:last-of-type){border-radius:var(--px-radius-none) var(--px-radius-main) var(--px-radius-main) var(--px-radius-none)}div[role=tablist]::-webkit-scrollbar{display:none}button[role=tab]{background:none;border:none;margin:0;padding:var(--px-padding-s-mobile);cursor:pointer;height:inherit;width:inherit;font-size:var(--px-text-size-label-l-mobile);font-weight:700;text-wrap:nowrap;color:var(--px-text-color-heading-neutral-default);outline:none}button[aria-selected=""]{cursor:auto;padding-block:var(--px-padding-m-mobile);color:var(--px-text-color-heading-neutral-inverted)}:host([inverted]) div[role=tablist] ::slotted(px-tab){background-color:var(--px-background-color-action-neutral-inverted)}:host([inverted]) div[role=tablist] ::slotted(px-tab[selected=""]){background-color:var(--px-background-color-action-active-inverted)}:host([inverted]) button[role=tab]{color:var(--px-text-color-heading-neutral-inverted)}:host([inverted]) button[aria-selected=""]{color:var(--px-text-color-heading-brand-default)}@media only screen and (min-width: 768px){#container{gap:var(--px-spacing-after-element-default-tablet)}button[role=tab]{padding:var(--px-padding-s-tablet);font-size:var(--px-text-size-label-l-tablet)}button[aria-selected=""]{padding-block:var(--px-padding-m-tablet)}}@media only screen and (min-width: 1025px){#container{gap:var(--px-spacing-after-element-default-desktop)}button[role=tab]{padding:var(--px-padding-s-desktop);font-size:var(--px-text-size-label-l-desktop)}button[aria-selected=""]{padding-block:var(--px-padding-m-desktop)}}';
3253
3579
  const styleSheet$4 = new CSSStyleSheet();
3254
3580
  styleSheet$4.replaceSync(styles$4);
3255
3581
  class Tabs extends HTMLElement {
@@ -3568,7 +3894,7 @@ class Timeline extends HTMLElement {
3568
3894
  if (!customElements.get("px-timeline")) {
3569
3895
  customElements.define("px-timeline", Timeline);
3570
3896
  }
3571
- const styles$2 = '.timeline-item{display:flex;gap:var(--px-spacing-text-to-icon-horizontal);font-family:var(--px-font-family);font-size:var(--px-text-size-base-mobile);line-height:var(--px-line-height-m)}.indicator-area{position:relative}.indicator-area:before{display:block;content:"";position:absolute;top:26px;left:12px;width:var(--px-border-m);height:calc(100% - 26px);background:var(--px-color-border-main-default)}.indicator-area .indicator{display:flex;align-items:center;justify-content:center;text-align:center;width:26px;height:26px;font-weight:700;font-size:var(--px-text-size-s-mobile);color:var(--px-color-icon-body-default);border-radius:var(--px-radius-pill);background:var(--px-color-bg-container-weak-default)}.content-area{margin-bottom:var(--px-spacing-component-default-vertical)}.content-area ::slotted([slot="title"]){font-weight:700;color:var(--px-color-txt-body-default)}.content-area ::slotted([slot="content"]){font-weight:400;color:var(--px-color-txt-details-default);margin-top:var(--px-spacing-under-text-vertical)}:host([lastchild]) .indicator-area:before{display:none}:host([lastchild]) .content-area{margin-bottom:0}:host([inverted]) .indicator-area:before{background:var(--px-color-border-main-inverted)}:host([inverted]) .indicator-area .indicator{color:var(--px-color-icon-body-inverted);background:var(--px-color-bg-container-weak-inverted)}:host([inverted]) .content-area ::slotted([slot="title"]){color:var(--px-color-txt-body-inverted)}:host([inverted]) .content-area ::slotted([slot="content"]){color:var(--px-color-txt-details-inverted)}@media only screen and (min-width: 64rem){.timeline-item{font-size:var(--px-text-size-base-tablet)}.indicator-area .indicator{font-size:var(--px-text-size-s-tablet)}}@media only screen and (min-width: 90rem){.timeline-item{font-size:var(--px-text-size-base-desktop)}.indicator-area .indicator{font-size:var(--px-text-size-s-desktop)}}';
3897
+ const styles$2 = '.timeline-item{display:flex;gap:var(--px-spacing-after-element-default-mobile);font-family:var(--px-font-family);line-height:var(--px-line-height-m)}.indicator-area{position:relative}.indicator-area:before{display:block;content:"";position:absolute;top:26px;left:12px;width:var(--px-border-size-m);height:calc(100% - 26px);background:var(--px-border-color-container-main-default)}.indicator-area .indicator{display:flex;align-items:center;justify-content:center;text-align:center;width:26px;height:26px;font-weight:700;font-size:var(--px-text-size-label-m-mobile);color:var(--px-text-color-heading-neutral-default);border-radius:var(--px-radius-pill);background:var(--px-background-color-action-neutral-default)}.content-area{margin-bottom:var(--px-spacing-after-element-default-mobile)}.content-area ::slotted([slot="title"]){font-weight:700;font-size:var(--px-text-size-label-l-mobile);color:var(--px-text-color-heading-neutral-default)}.content-area ::slotted([slot="content"]){font-weight:400;font-size:var(--px-text-size-body-m-mobile);color:var(--px-text-color-body-neutral-weak-default);margin-top:var(--px-spacing-after-element-xs-mobile)}:host([lastchild]) .indicator-area:before{display:none}:host([lastchild]) .content-area{margin-bottom:0}:host([inverted]) .indicator-area:before{background:var(--px-border-color-container-main-inverted)}:host([inverted]) .indicator{color:var(--px-text-color-heading-neutral-inverted);background:var(--px-background-color-action-neutral-inverted)}:host([inverted]) .content-area ::slotted([slot="title"]){color:var(--px-text-color-heading-neutral-inverted)}:host([inverted]) .content-area ::slotted([slot="content"]){color:var(--px-text-color-body-neutral-weak-inverted)}@media only screen and (min-width: 768px){.timeline-item{gap:var(--px-spacing-after-element-default-tablet)}.indicator-area .indicator{font-size:var(--px-text-size-label-m-tablet)}.content-area{margin-bottom:var(--px-spacing-after-element-default-tablet)}.content-area ::slotted([slot="title"]){font-size:var(--px-text-size-label-l-tablet)}.content-area ::slotted([slot="content"]){font-size:var(--px-text-size-body-m-tablet);margin-top:var(--px-spacing-after-element-xs-tablet)}}@media only screen and (min-width: 1025px){.timeline-item{gap:var(--px-spacing-after-element-default-desktop)}.indicator-area .indicator{font-size:var(--px-text-size-label-m-desktop)}.content-area{margin-bottom:var(--px-spacing-after-element-default-desktop)}.content-area ::slotted([slot="title"]){font-size:var(--px-text-size-label-l-desktop)}.content-area ::slotted([slot="content"]){font-size:var(--px-text-size-body-m-desktop);margin-top:var(--px-spacing-after-element-xs-desktop)}}';
3572
3898
  const styleSheet$2 = new CSSStyleSheet();
3573
3899
  styleSheet$2.replaceSync(styles$2);
3574
3900
  let item = "1";
@@ -3652,14 +3978,14 @@ class Modal extends HTMLElement {
3652
3978
  super();
3653
3979
  this.open = false;
3654
3980
  this.template = `<px-container padding="m" popover> <!-- adding popver here is the only way to style of the modal -->
3655
- <px-stack gap="component-default-vertical" direction="column">
3656
- <px-stack direction="column" gap="under-text-vertical">
3981
+ <px-stack gap="after-element-default" direction="column">
3982
+ <px-stack direction="column" gap="after-element-s">
3657
3983
  <slot name="title"></slot>
3658
3984
  <slot name="description"></slot>
3659
3985
  </px-stack>
3660
3986
  <slot></slot>
3661
3987
  <px-separator size="l"></px-separator>
3662
- <px-stack gap="component-compact-horizontal" justify-content="end">
3988
+ <px-stack gap="after-element-default" justify-content="end">
3663
3989
  <slot name="footer"></slot>
3664
3990
  </px-stack>
3665
3991
  </px-stack>
@@ -3722,7 +4048,7 @@ class Modal extends HTMLElement {
3722
4048
  if (!customElements.get("px-modal")) {
3723
4049
  customElements.define("px-modal", Modal);
3724
4050
  }
3725
- const spanCss = "span,::slotted(span){font-family:var(--px-font-family);color:var(--px-color-txt-body-default);font-size:var(--px-text-size-base-mobile);line-height:var(--px-line-height-m)}:host([inverted]) span,:host([inverted]) ::slotted(span){color:var(--px-color-txt-body-inverted)}span.link{text-decoration:underline}@media only screen and (min-width: 64rem){span,::slotted(span){font-size:var(--px-text-size-base-tablet)}}@media only screen and (min-width: 90rem){span,::slotted(span){font-size:var(--px-text-size-base-desktop)}}";
4051
+ const spanCss = "span,::slotted(span){font-family:var(--px-font-family);color:var(--px-text-color-body-neutral-strong-default);font-size:var(--px-text-size-body-m-mobile);line-height:var(--px-line-height-m)}:host([inverted]) span,:host([inverted]) ::slotted(span){color:var(--px-text-color-body-neutral-strong-inverted)}span.link{text-decoration:underline}@media only screen and (min-width: 768px){span,::slotted(span){font-size:var(--px-text-size-body-m-tablet)}}@media only screen and (min-width: 1025px){span,::slotted(span){font-size:var(--px-text-size-body-m-desktop)}}";
3726
4052
  const spanStyles$1 = new CSSStyleSheet();
3727
4053
  const typographyStyles$4 = new CSSStyleSheet();
3728
4054
  spanStyles$1.replaceSync(spanCss);
@@ -3746,39 +4072,11 @@ const _Span = class _Span extends PxElement {
3746
4072
  "inverted"
3747
4073
  ];
3748
4074
  }
3749
- get color() {
3750
- return this.getAttribute("color");
3751
- }
3752
- set color(value) {
3753
- this.setAttribute("color", value);
3754
- }
3755
- get fontsize() {
3756
- return this.getAttribute("font-size");
3757
- }
3758
- set fontsize(value) {
3759
- this.setAttribute("font-size", value);
3760
- }
3761
- get fontweight() {
3762
- return this.getAttribute("font-weight");
3763
- }
3764
- set fontweight(value) {
3765
- this.setAttribute("font-weight", value);
3766
- }
3767
- get inverted() {
3768
- return this.getAttribute("inverted");
3769
- }
3770
- set inverted(value) {
3771
- if (isFalsy(value)) {
3772
- this.removeAttribute("inverted");
3773
- } else {
3774
- this.setAttribute("inverted", value);
3775
- }
3776
- }
3777
4075
  attributeChangedCallback(attrName, oldValue, newValue) {
3778
4076
  if (oldValue !== newValue) {
3779
4077
  switch (attrName) {
3780
4078
  case "color":
3781
- this.updateTypography(attrName, oldValue, newValue, colorValues$1);
4079
+ this.updateTypography(attrName, oldValue, newValue, colorValues);
3782
4080
  break;
3783
4081
  case "font-size":
3784
4082
  this.updateTypography(attrName, oldValue, newValue, fontsizeValues);
@@ -3803,7 +4101,37 @@ const _Span = class _Span extends PxElement {
3803
4101
  this.$el.classList.toggle(`${attrName}-${newValue}`);
3804
4102
  }
3805
4103
  if (!this.checkName(attrValue, newValue)) {
3806
- console.error(`Bad ${attrName} value for ${this.$el}`);
4104
+ console.error(
4105
+ `${newValue} is not an allowed ${attrName} value for ${this.$el}`
4106
+ );
4107
+ }
4108
+ }
4109
+ get color() {
4110
+ return this.getAttribute("color");
4111
+ }
4112
+ set color(value) {
4113
+ this.setAttribute("color", value);
4114
+ }
4115
+ get fontsize() {
4116
+ return this.getAttribute("font-size");
4117
+ }
4118
+ set fontsize(value) {
4119
+ this.setAttribute("font-size", value);
4120
+ }
4121
+ get fontweight() {
4122
+ return this.getAttribute("font-weight");
4123
+ }
4124
+ set fontweight(value) {
4125
+ this.setAttribute("font-weight", value);
4126
+ }
4127
+ get inverted() {
4128
+ return this.getAttribute("inverted");
4129
+ }
4130
+ set inverted(value) {
4131
+ if (isFalsy(value)) {
4132
+ this.removeAttribute("inverted");
4133
+ } else {
4134
+ this.setAttribute("inverted", value);
3807
4135
  }
3808
4136
  }
3809
4137
  };
@@ -3824,10 +4152,10 @@ const linkVariantValues = [
3824
4152
  "btn-secondary",
3825
4153
  "btn-tertiary"
3826
4154
  ];
4155
+ const linkShapeValues = ["", "default", "alternative"];
3827
4156
  const _Link = class _Link extends PxElement {
3828
4157
  constructor() {
3829
4158
  super(linkStyles$1, buttonStyles, typographyStyles$3);
3830
- this.shapeValues = ["", "default", "alternative"];
3831
4159
  this.template = () => `<slot name="before"></slot><slot></slot><slot name="after"></slot>`;
3832
4160
  const $root = document.createElement(this.nativeName);
3833
4161
  $root.innerHTML = this.template();
@@ -3858,7 +4186,7 @@ const _Link = class _Link extends PxElement {
3858
4186
  this.$el.focus();
3859
4187
  });
3860
4188
  if (!iconSize) {
3861
- icon.setAttribute("size", "xs");
4189
+ icon.setAttribute("size", "2xs");
3862
4190
  }
3863
4191
  if (!iconColor) {
3864
4192
  icon.setAttribute("color", "inherit");
@@ -3889,7 +4217,7 @@ const _Link = class _Link extends PxElement {
3889
4217
  this.updateTypography(attrName, oldValue, newValue, fontsizeValues);
3890
4218
  break;
3891
4219
  case "color":
3892
- this.updateTypography(attrName, oldValue, newValue, colorValues$1);
4220
+ this.updateTypography(attrName, oldValue, newValue, colorValues);
3893
4221
  break;
3894
4222
  case "font-weight":
3895
4223
  this.updateTypography(attrName, oldValue, newValue, fontweightValues);
@@ -3931,7 +4259,7 @@ const _Link = class _Link extends PxElement {
3931
4259
  if (newValue !== null && newValue !== "" && newValue !== "default") {
3932
4260
  this._toggleClassList(newValue);
3933
4261
  }
3934
- if (!this.checkName(this.shapeValues, newValue)) {
4262
+ if (!this.checkName(linkShapeValues, newValue)) {
3935
4263
  console.error(`Bad "shape" value for ${this.$el}`);
3936
4264
  }
3937
4265
  }
@@ -4000,7 +4328,7 @@ let Link = _Link;
4000
4328
  if (!customElements.get("px-a")) {
4001
4329
  customElements.define("px-a", Link);
4002
4330
  }
4003
- const paragraphCss = "p,::slotted(p){font-family:var(--px-font-family);color:var(--px-color-txt-body-default);font-size:var(--px-text-size-base-mobile);line-height:var(--px-line-height-m);margin:0}.text-align-left{text-align:left}.text-align-center{text-align:center}.text-align-right{text-align:right}:host([inverted]) p,:host([inverted]) ::slotted(p){color:var(--px-color-txt-body-inverted)}@media only screen and (min-width: 64rem){p,::slotted(p){font-size:var(--px-text-size-base-tablet)}}@media only screen and (min-width: 90rem){p,::slotted(p){font-size:var(--px-text-size-base-desktop)}}";
4331
+ const paragraphCss = "p,::slotted(p){font-family:var(--px-font-family);color:var(--px-text-color-body-neutral-strong-default);font-size:var(--px-text-size-body-m-mobile);line-height:var(--px-line-height-m);margin:0}.text-align-left{text-align:left}.text-align-center{text-align:center}.text-align-right{text-align:right}:host([inverted]) p,:host([inverted]) ::slotted(p){color:var(--px-text-color-body-neutral-strong-inverted)}@media only screen and (min-width: 768px){p,::slotted(p){font-size:var(--px-text-size-body-m-tablet)}}@media only screen and (min-width: 1025px){p,::slotted(p){font-size:var(--px-text-size-body-m-desktop)}}";
4004
4332
  const paragraphStyles$1 = new CSSStyleSheet();
4005
4333
  const typographyStyles$2 = new CSSStyleSheet();
4006
4334
  const headingStyles$1 = new CSSStyleSheet();
@@ -4031,7 +4359,7 @@ const _Paragraph = class _Paragraph extends PxElement {
4031
4359
  this.updateVariant(attrName, oldValue, newValue, headingValues);
4032
4360
  break;
4033
4361
  case "color":
4034
- this.updateTypography(attrName, oldValue, newValue, colorValues$1);
4362
+ this.updateTypography(attrName, oldValue, newValue, colorValues);
4035
4363
  break;
4036
4364
  case "font-size":
4037
4365
  this.updateTypography(attrName, oldValue, newValue, fontsizeValues);
@@ -4117,7 +4445,7 @@ const _Paragraph = class _Paragraph extends PxElement {
4117
4445
  _Paragraph.nativeName = "p";
4118
4446
  let Paragraph = _Paragraph;
4119
4447
  customElements.define("px-p", Paragraph);
4120
- const typographyCss = "*{font-family:var(--px-font-family)}::slotted(ul),::slotted(ol){margin:0 0 0 var(--px-spacing-component-default-horizontal);padding:0}::slotted(b),::slotted(strong){font-weight:700}:host([inverted]) slot{color:var(--px-color-txt-body-inverted)}";
4448
+ const typographyCss = "*{font-family:var(--px-font-family)}::slotted(ul),::slotted(ol){margin:0 0 0 var(--px-spacing-inside-section-default-desktop);padding:0}::slotted(b),::slotted(strong){font-weight:700}:host([inverted]) slot{color:var(--px-color-txt-body-inverted)}";
4121
4449
  const lightStyles = ".li{padding-bottom:var(--px-padding-xs)}";
4122
4450
  const typographyStyles$1 = new CSSStyleSheet();
4123
4451
  const headingStyles = new CSSStyleSheet();
@@ -4160,7 +4488,7 @@ class Typography extends HTMLElement {
4160
4488
  }
4161
4489
  }
4162
4490
  customElements.define("px-typography", Typography);
4163
- const buttonIconCss = ".btn-icon{display:inline-flex;vertical-align:middle;align-items:center;justify-content:center;cursor:pointer;--btn-transition: all .2s ease-in-out 0s;transition:var(--btn-transition);background:var(--px-color-bg-action-primary-default);color:var(--px-color-icon-primary-inverted);border-radius:var(--px-radius-pill);padding:var(--px-padding-xs);border:var(--px-border-m) solid transparent}.btn-icon,.btn-icon *{box-sizing:border-box}.btn-icon ::slotted(px-icon){line-height:0}.btn-icon:hover:not([disabled],[aria-disabled=true],.btn-icon--state-loading){background:var(--px-color-bg-action-hover-bordered-default);color:var(--px-color-icon-primary-default);border-color:var(--px-color-border-action-hover-default)}.btn-icon:focus:not([disabled],[aria-disabled=true]){outline-offset:var(--px-offset-s);outline:var(--px-outline-s) solid var(--px-color-outline-default)}.btn-icon[disabled],.btn-icon[aria-disabled=true]{background:var(--px-color-bg-action-disabled-default);color:var(--px-color-icon-disabled-default);cursor:default;pointer-events:none}.btn-icon.btn-icon--state-loading{background:var(--px-color-bg-action-disabled-default);color:var(--px-color-icon-primary-default);cursor:inherit}.btn-icon--size-small{padding:var(--px-padding-2xs)}.btn-icon--variant-secondary{background-color:var(--px-color-bg-action-secondary-default);color:var(--px-color-icon-primary-default)}:host([inverted]) .btn-icon{background:var(--px-color-bg-action-primary-inverted);color:var(--px-color-icon-primary-default)}:host([inverted]) .btn-icon:hover:not([disabled],[aria-disabled=true],.btn-icon--state-loading){background:var(--px-color-bg-action-hover-bordered-default);color:var(--px-color-icon-primary-inverted);border-color:var(--px-color-border-action-hover-inverted)}:host([inverted]) .btn-icon:focus:not([disabled],[aria-disabled=true]){outline-color:var(--px-color-outline-inverted)}:host([inverted]) .btn-icon[disabled],:host([inverted]) .btn-icon[aria-disabled=true]{background:var(--px-color-bg-action-disabled-inverted);color:var(--px-color-icon-disabled-inverted)}:host([inverted]) .btn-icon.btn-icon--state-loading{background:var(--px-color-bg-action-disabled-inverted);color:var(--px-color-icon-primary-inverted);border-color:transparent}:host([inverted]) .btn-icon--variant-secondary{background-color:var(--px-color-bg-action-secondary-inverted);color:var(--px-color-icon-primary-inverted)}@media screen and (min-width: 1441px){.btn-icon:focus:not([disabled],[aria-disabled=true]){outline-offset:var(--px-offset);outline-width:var(--px-outline)}}";
4491
+ const buttonIconCss = ".btn-icon{display:inline-flex;width:var(--px-action-size-l);height:var(--px-action-size-l);vertical-align:middle;align-items:center;justify-content:center;cursor:pointer;--btn-transition: all .2s ease-in-out 0s;transition:var(--btn-transition);background:var(--px-background-color-action-primary-default);color:var(--px-icon-color-action-brand-inverted);border-radius:var(--px-radius-pill);padding:var(--px-padding-xs-mobile);border:var(--px-border-size-m) solid transparent}.btn-icon,.btn-icon *{box-sizing:border-box}.btn-icon ::slotted(px-icon){line-height:0}.btn-icon:hover:not([disabled],[aria-disabled=true],.btn-icon--state-loading){background:var(--px-background-color-action-hover-bordered-default);color:var(--px-icon-color-action-brand-default);border-color:var(--px-border-color-action-hover-default)}.btn-icon:active:not([disabled],[aria-disabled=true],.btn-icon--state-loading){background:var(--px-background-color-action-active-inverted);color:var(--px-icon-color-action-active-default);border-color:var(--px-border-color-action-active-default)}.btn-icon: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-icon[disabled],.btn-icon[aria-disabled=true]{background:var(--px-background-color-action-disabled-default);color:var(--px-icon-color-action-disabled-default);cursor:default;pointer-events:none}.btn-icon.btn-icon--state-loading{background:var(--px-background-color-action-disabled-default);color:var(--px-icon-color-action-brand-default);cursor:inherit}.btn-icon--size-small{padding:var(--px-padding-2xs-mobile);width:var(--px-action-size-m);height:var(--px-action-size-m)}.btn-icon--variant-secondary{background-color:var(--px-background-color-action-secondary-default);color:var(--px-icon-color-action-brand-default)}:host([inverted]) .btn-icon{background:var(--px-background-color-action-primary-inverted);color:var(--px-icon-color-action-brand-default)}:host([inverted]) .btn-icon:hover:not([disabled],[aria-disabled=true],.btn-icon--state-loading){background:var(--px-background-color-action-hover-bordered-inverted);color:var(--px-icon-color-action-brand-inverted);border-color:var(--px-border-color-action-hover-inverted)}:host([inverted]) .btn-icon:active:not([disabled],[aria-disabled=true],.btn-icon--state-loading){background:var(--px-background-color-action-hover-default);color:var(--px-icon-color-action-active-inverted);border-color:var(--px-border-color-action-active-inverted)}:host([inverted]) .btn-icon:focus:not([disabled],[aria-disabled=true]){outline-color:var(--px-border-color-focus-outline-inverted)}:host([inverted]) .btn-icon[disabled],:host([inverted]) .btn-icon[aria-disabled=true]{background:var(--px-background-color-action-disabled-inverted);color:var(--px-icon-color-action-disabled-inverted)}:host([inverted]) .btn-icon.btn-icon--state-loading{background:var(--px-background-color-action-disabled-inverted);color:var(--px-icon-color-action-brand-inverted);border-color:transparent}:host([inverted]) .btn-icon--variant-secondary{background-color:var(--px-background-color-action-secondary-inverted);color:var(--px-icon-color-action-brand-inverted)}@media only screen and (min-width: 768px){.btn-icon{padding:var(--px-padding-xs-tablet)}.btn-icon:focus:not([disabled],[aria-disabled=true]){outline-offset:var(--px-focus-offset-tablet);outline-width:var(--px-focus-outline-tablet)}.btn-icon--size-small{padding:var(--px-padding-2xs-tablet)}}@media only screen and (min-width: 1025px){.btn-icon{padding:var(--px-padding-xs-desktop)}.btn-icon:focus:not([disabled],[aria-disabled=true]){outline-offset:var(--px-focus-offset-desktop);outline-width:var(--px-focus-outline-desktop)}.btn-icon--size-small{padding:var(--px-padding-2xs-desktop)}}";
4164
4492
  const buttonIconStyles = new CSSStyleSheet();
4165
4493
  buttonIconStyles.replaceSync(buttonIconCss);
4166
4494
  const buttonIconSizeValues = ["", "default", "small"];
@@ -4193,7 +4521,10 @@ const _ButtonIcon = class _ButtonIcon extends PxElement {
4193
4521
  this.$el.focus();
4194
4522
  });
4195
4523
  if (!iconSize) {
4196
- icon.setAttribute("size", "xs");
4524
+ icon.setAttribute("size", "s");
4525
+ }
4526
+ if (this.size === "small") {
4527
+ icon.setAttribute("size", "2xs");
4197
4528
  }
4198
4529
  if (!iconColor) {
4199
4530
  icon.setAttribute("color", "inherit");
@@ -4286,7 +4617,7 @@ let ButtonIcon = _ButtonIcon;
4286
4617
  if (!customElements.get("px-button-icon")) {
4287
4618
  customElements.define("px-button-icon", ButtonIcon);
4288
4619
  }
4289
- const entrypointCss = "a{display:block;font-family:var(--px-font-family);font-size:var(--px-text-size-base-mobile);line-height:var(--px-line-height-m);font-weight:700;color:var(--px-color-txt-primary-default);border-radius:var(--px-radius-main);cursor:pointer;text-decoration:none;--btn-transition: all .2s ease-in-out 0s;transition:var(--btn-transition);border:var(--px-border-m) solid transparent}a,a *{box-sizing:border-box}a px-icon,a ::slotted(px-icon){line-height:0;color:var(--px-color-txt-primary-default)}a slot[name=description]{font-weight:400;color:var(--px-color-txt-details-default)}a:hover:not([disabled],[aria-disabled=true],.loading){border-color:var(--px-color-border-action-hover-default);color:var(--px-color-txt-primary-default)}a:hover:not([disabled],[aria-disabled=true],.loading) slot[name=description]{color:var(--px-color-txt-primary-default)}a:focus:not([disabled],[aria-disabled=true]){outline-offset:var(--px-offset-s);outline:var(--px-outline-s) solid var(--px-color-outline-default)}a:active{transform:scale(.95)}a[disabled],a[aria-disabled=true]{cursor:default;pointer-events:none;color:var(--px-color-txt-disabled-default)}a[disabled] px-icon,a[disabled] ::slotted(px-icon),a[disabled] slot[name=description],a[aria-disabled=true] px-icon,a[aria-disabled=true] ::slotted(px-icon),a[aria-disabled=true] slot[name=description]{color:var(--px-color-txt-disabled-default)}:host([inverted]) a{color:var(--px-color-txt-primary-inverted)}:host([inverted]) a px-icon,:host([inverted]) a ::slotted(px-icon){color:var(--px-color-txt-primary-inverted)}:host([inverted]) a slot[name=description]{color:var(--px-color-txt-details-inverted)}:host([inverted]) a:hover:not([disabled],[aria-disabled=true],.loading){border-color:var(--px-color-border-action-hover-inverted)}:host([inverted]) a:focus:not([disabled],[aria-disabled=true]){outline-color:var(--px-color-outline-inverted)}:host([inverted]) a[disabled],:host([inverted]) a[aria-disabled=true]{color:var(--px-color-txt-disabled-inverted)}:host([inverted]) a[disabled] px-icon,:host([inverted]) a[disabled] ::slotted(px-icon),:host([inverted]) a[disabled] slot[name=description],:host([inverted]) a[aria-disabled=true] px-icon,:host([inverted]) a[aria-disabled=true] ::slotted(px-icon),:host([inverted]) a[aria-disabled=true] slot[name=description]{color:var(--px-color-txt-disabled-inverted)}@media only screen and (min-width: 768px){a{font-size:var(--px-text-size-base-tablet)}}@media only screen and (min-width: 1025px){a{font-size:var(--px-text-size-base-desktop)}}";
4620
+ const entrypointCss = "a{display:block;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;color:var(--px-text-color-heading-neutral-default);border-radius:var(--px-radius-main);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}a,a *{box-sizing:border-box}a px-icon,a ::slotted(px-icon){line-height:0;color:var(--px-icon-color-content-brand-default)}a slot[name=description]{font-weight:400;color:var(--px-text-color-body-neutral-weak-default)}a:hover:not([disabled],[aria-disabled=true],.loading){border-color:var(--px-border-color-action-hover-default);color:var(--px-text-color-heading-brand-default)}a:hover:not([disabled],[aria-disabled=true],.loading) slot[name=description]{color:var(--px-text-color-heading-brand-default)}a: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)}a:active{transform:scale(.95)}a[disabled],a[aria-disabled=true]{cursor:default;pointer-events:none;color:var(--px-text-color-action-disabled-default)}a[disabled] px-icon,a[disabled] ::slotted(px-icon),a[aria-disabled=true] px-icon,a[aria-disabled=true] ::slotted(px-icon){color:var(--px-icon-color-action-disabled-default)}a[disabled] slot[name=description],a[aria-disabled=true] slot[name=description]{color:var(--px-text-color-action-disabled-default)}:host([inverted]) a{color:var(--px-text-color-heading-neutral-inverted)}:host([inverted]) a px-icon,:host([inverted]) a ::slotted(px-icon){color:var(--px-icon-color-content-brand-inverted)}:host([inverted]) a slot[name=description]{color:var(--px-text-color-body-neutral-weak-inverted)}:host([inverted]) a:hover:not([disabled],[aria-disabled=true],.loading){border-color:var(--px-border-color-action-hover-inverted);color:var(--px-text-color-heading-brand-inverted)}:host([inverted]) a:hover:not([disabled],[aria-disabled=true],.loading) slot[name=description]{color:var(--px-text-color-heading-brand-inverted)}:host([inverted]) a:focus:not([disabled],[aria-disabled=true]){outline-color:var(--px-border-color-focus-outline-inverted)}:host([inverted]) a[disabled],:host([inverted]) a[aria-disabled=true]{color:var(--px-text-color-action-disabled-inverted)}:host([inverted]) a[disabled] px-icon,:host([inverted]) a[disabled] ::slotted(px-icon),:host([inverted]) a[aria-disabled=true] px-icon,:host([inverted]) a[aria-disabled=true] ::slotted(px-icon){color:var(--px-icon-color-action-disabled-inverted)}:host([inverted]) a[disabled] slot[name=description],:host([inverted]) a[aria-disabled=true] slot[name=description]{color:var(--px-text-color-action-disabled-inverted)}@media only screen and (min-width: 768px){a{font-size:var(--px-text-size-label-m-tablet)}a:focus:not([disabled],[aria-disabled=true]){outline-offset:var(--px-focus-offset-tablet);outline-width:var(--px-focus-outline-tablet)}}@media only screen and (min-width: 1025px){a{font-size:var(--px-text-size-label-m-desktop)}a:focus:not([disabled],[aria-disabled=true]){outline-offset:var(--px-focus-offset-desktop);outline-width:var(--px-focus-outline-desktop)}}";
4290
4621
  const entrypointStyles = new CSSStyleSheet();
4291
4622
  entrypointStyles.replaceSync(entrypointCss);
4292
4623
  const backgroundValues = ["", "default", "action-neutral"];
@@ -4295,8 +4626,8 @@ const _Entrypoint = class _Entrypoint extends PxElement {
4295
4626
  super(entrypointStyles);
4296
4627
  this.template = () => `
4297
4628
  <px-container padding="s">
4298
- <px-hstack gap="component-compact-horizontal" align-items="center">
4299
- <px-hstack grow="2" gap="component-compact-horizontal" align-items="center">
4629
+ <px-hstack gap="after-element-s" align-items="center">
4630
+ <px-hstack grow="2" gap="after-element-s" align-items="center">
4300
4631
  <slot name="icon"></slot>
4301
4632
  <px-vstack gap="none" align-items="start">
4302
4633
  <slot></slot>
@@ -4350,12 +4681,12 @@ const _Entrypoint = class _Entrypoint extends PxElement {
4350
4681
  this.$el.toggleAttribute("aria-disabled");
4351
4682
  if (newValue !== null) {
4352
4683
  this.$el.setAttribute("aria-disabled", "true");
4353
- this.$container.bgColor = "action-disabled";
4684
+ this.$container.backgroundColor = "action-disabled";
4354
4685
  break;
4355
4686
  }
4356
4687
  break;
4357
4688
  case "inverted":
4358
- this.$container.bgColor = "action-neutral";
4689
+ this.$container.backgroundColor = "action-neutral";
4359
4690
  this.$container.inverted = this.inverted;
4360
4691
  break;
4361
4692
  case "target":
@@ -4393,7 +4724,7 @@ const _Entrypoint = class _Entrypoint extends PxElement {
4393
4724
  }
4394
4725
  const updateColorStyle = (value) => {
4395
4726
  if (value !== null && value !== "" && value !== "default") {
4396
- this.$container.bgColor = value;
4727
+ this.$container.backgroundColor = value;
4397
4728
  }
4398
4729
  };
4399
4730
  updateColorStyle(oldValue);
@@ -4405,10 +4736,10 @@ const _Entrypoint = class _Entrypoint extends PxElement {
4405
4736
  set disabled(value) {
4406
4737
  this.setAttribute("disabled", value);
4407
4738
  }
4408
- get bgColor() {
4739
+ get backgroundColor() {
4409
4740
  return this.getAttribute("background-color");
4410
4741
  }
4411
- set bgColor(value) {
4742
+ set backgroundColor(value) {
4412
4743
  this.setAttribute("background-color", value);
4413
4744
  }
4414
4745
  get inverted() {
@@ -4423,7 +4754,7 @@ let Entrypoint = _Entrypoint;
4423
4754
  if (!customElements.get("px-entrypoint")) {
4424
4755
  customElements.define("px-entrypoint", Entrypoint);
4425
4756
  }
4426
- const styles = ".spinner{display:inline-block;width:var(--px-icon-size-xs-mobile);height:var(--px-icon-size-xs-mobile);border-top:3px solid var(--px-color-txt-primary-default);border-right:3px solid transparent;border-radius:50%;animation:anim-spinner .7s linear infinite}.spinner,.spinner *{box-sizing:border-box}@media (prefers-reduced-motion: no-preference){:host([timeout]) .spinner{animation-iteration-count:7}}:host([inverted]) .spinner{border-top-color:var(--px-color-txt-primary-inverted)}@keyframes anim-spinner{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.size-2xs{width:var(--px-icon-size-2xs-mobile);height:var(--px-icon-size-2xs-mobile)}.size-xs{width:var(--px-icon-size-xs-mobile);height:var(--px-icon-size-xs-mobile)}.size-s{width:var(--px-icon-size-s-mobile);height:var(--px-icon-size-s-mobile)}.size-m{width:var(--px-icon-size-m-mobile);height:var(--px-icon-size-m-mobile)}.size-l{width:var(--px-icon-size-l-mobile);height:var(--px-icon-size-l-mobile)}.size-xl{width:var(--px-icon-size-xl-mobile);height:var(--px-icon-size-xl-mobile)}.size-2xl{width:var(--px-icon-size-2xl-mobile);height:var(--px-icon-size-2xl-mobile)}@media only screen and (min-width: 64rem){.size-2xs{width:var(--px-icon-size-2xs-tablet);height:var(--px-icon-size-2xs-tablet)}.size-xs{width:var(--px-icon-size-xs-tablet);height:var(--px-icon-size-xs-tablet)}.size-s{width:var(--px-icon-size-s-tablet);height:var(--px-icon-size-s-tablet)}.size-m{width:var(--px-icon-size-m-tablet);height:var(--px-icon-size-m-tablet)}.size-l{width:var(--px-icon-size-l-tablet);height:var(--px-icon-size-l-tablet)}.size-xl{width:var(--px-icon-size-xl-tablet);height:var(--px-icon-size-xl-tablet)}.size-2xl{width:var(--px-icon-size-2xl-tablet);height:var(--px-icon-size-2xl-tablet)}}@media only screen and (min-width: 90rem){.size-2xs{width:var(--px-icon-size-2xs-desktop);height:var(--px-icon-size-2xs-desktop)}.size-xs{width:var(--px-icon-size-xs-desktop);height:var(--px-icon-size-xs-desktop)}.size-s{width:var(--px-icon-size-s-desktop);height:var(--px-icon-size-s-desktop)}.size-m{width:var(--px-icon-size-m-desktop);height:var(--px-icon-size-m-desktop)}.size-l{width:var(--px-icon-size-l-desktop);height:var(--px-icon-size-l-desktop)}.size-xl{width:var(--px-icon-size-xl-desktop);height:var(--px-icon-size-xl-desktop)}.size-2xl{width:var(--px-icon-size-2xl-desktop);height:var(--px-icon-size-2xl-desktop)}}";
4757
+ const styles = ".spinner{display:inline-block;width:var(--px-icon-size-xs-mobile);height:var(--px-icon-size-xs-mobile);border-top:3px solid var(--px-text-color-heading-brand-default);border-right:3px solid transparent;border-radius:50%;animation:anim-spinner .7s linear infinite}.spinner,.spinner *{box-sizing:border-box}@media (prefers-reduced-motion: no-preference){:host([timeout]) .spinner{animation-iteration-count:7}}:host([inverted]) .spinner{border-top-color:var(--px-text-color-heading-brand-inverted)}@keyframes anim-spinner{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.size-2xs{width:var(--px-icon-size-2xs-mobile);height:var(--px-icon-size-2xs-mobile)}.size-xs{width:var(--px-icon-size-xs-mobile);height:var(--px-icon-size-xs-mobile)}.size-s{width:var(--px-icon-size-s-mobile);height:var(--px-icon-size-s-mobile)}.size-m{width:var(--px-icon-size-m-mobile);height:var(--px-icon-size-m-mobile)}.size-l{width:var(--px-icon-size-l-mobile);height:var(--px-icon-size-l-mobile)}.size-xl{width:var(--px-icon-size-xl-mobile);height:var(--px-icon-size-xl-mobile)}.size-2xl{width:var(--px-icon-size-2xl-mobile);height:var(--px-icon-size-2xl-mobile)}@media only screen and (min-width: 64rem){.size-2xs{width:var(--px-icon-size-2xs-tablet);height:var(--px-icon-size-2xs-tablet)}.size-xs{width:var(--px-icon-size-xs-tablet);height:var(--px-icon-size-xs-tablet)}.size-s{width:var(--px-icon-size-s-tablet);height:var(--px-icon-size-s-tablet)}.size-m{width:var(--px-icon-size-m-tablet);height:var(--px-icon-size-m-tablet)}.size-l{width:var(--px-icon-size-l-tablet);height:var(--px-icon-size-l-tablet)}.size-xl{width:var(--px-icon-size-xl-tablet);height:var(--px-icon-size-xl-tablet)}.size-2xl{width:var(--px-icon-size-2xl-tablet);height:var(--px-icon-size-2xl-tablet)}}@media only screen and (min-width: 90rem){.size-2xs{width:var(--px-icon-size-2xs-desktop);height:var(--px-icon-size-2xs-desktop)}.size-xs{width:var(--px-icon-size-xs-desktop);height:var(--px-icon-size-xs-desktop)}.size-s{width:var(--px-icon-size-s-desktop);height:var(--px-icon-size-s-desktop)}.size-m{width:var(--px-icon-size-m-desktop);height:var(--px-icon-size-m-desktop)}.size-l{width:var(--px-icon-size-l-desktop);height:var(--px-icon-size-l-desktop)}.size-xl{width:var(--px-icon-size-xl-desktop);height:var(--px-icon-size-xl-desktop)}.size-2xl{width:var(--px-icon-size-2xl-desktop);height:var(--px-icon-size-2xl-desktop)}}";
4427
4758
  const styleSheet = new CSSStyleSheet();
4428
4759
  const typographyStyles = new CSSStyleSheet();
4429
4760
  styleSheet.replaceSync(styles);
@@ -4550,14 +4881,17 @@ export {
4550
4881
  VStack,
4551
4882
  WithFlexAttributes,
4552
4883
  addGlobalStylesheet,
4884
+ backgroundColorValues,
4885
+ backgroundSizeValues,
4553
4886
  backgroundValues,
4554
- bgColorValues,
4555
- bgImgSizeValues,
4887
+ borderColorValues,
4556
4888
  borderRadiusValues,
4889
+ borderSideValues,
4557
4890
  borderValues,
4891
+ boxShadowValues,
4558
4892
  buttonIconSizeValues,
4559
4893
  buttonIconVariantValues,
4560
- colorValues$1 as colorValues,
4894
+ colorValues,
4561
4895
  fontsizeValues,
4562
4896
  fontweightValues,
4563
4897
  gapValues,
@@ -4568,6 +4902,7 @@ export {
4568
4902
  headingValues,
4569
4903
  iconSizeValues$1 as iconSizeValues,
4570
4904
  isFalsy,
4905
+ linkShapeValues,
4571
4906
  linkVariantValues,
4572
4907
  noBorderRadiusValues,
4573
4908
  paddingValues,
@@ -4575,7 +4910,9 @@ export {
4575
4910
  patchVariantValues,
4576
4911
  priceSizeValues,
4577
4912
  priceVariantValues,
4578
- shadowValues,
4913
+ separatorColorValues,
4914
+ separatorDirectionValues,
4915
+ separatorSizeValues,
4579
4916
  tagShapeValues,
4580
4917
  tagVariantValues,
4581
4918
  textalignValues,