@proximus/lavender 1.0.0-alpha.17 → 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 +1389 -856
  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,6 +1069,203 @@ class Page extends WithFlexAttributes {
1060
1069
  if (customElements.get("px-page") === void 0) {
1061
1070
  customElements.define("px-page", Page);
1062
1071
  }
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)}}";
1075
+ const buttonStyles$1 = new CSSStyleSheet();
1076
+ const linkStyles$2 = new CSSStyleSheet();
1077
+ const patchStyles = new CSSStyleSheet();
1078
+ buttonStyles$1.replaceSync(buttonCss);
1079
+ linkStyles$2.replaceSync(linkCss);
1080
+ patchStyles.replaceSync(styles$b);
1081
+ const variantValues$1 = [
1082
+ "",
1083
+ "default",
1084
+ "secondary",
1085
+ "tertiary",
1086
+ "link",
1087
+ "patch",
1088
+ "patch-info",
1089
+ "patch-black-friday",
1090
+ "patch-eco"
1091
+ ];
1092
+ const _Button = class _Button extends PxElement {
1093
+ constructor() {
1094
+ super(buttonStyles$1, linkStyles$2, patchStyles);
1095
+ this.template = () => `<slot name="before"></slot><slot></slot><slot name="after"></slot>`;
1096
+ const $root = document.createElement(this.nativeName);
1097
+ $root.classList.add("btn");
1098
+ $root.innerHTML = this.template();
1099
+ this.shadowRoot.appendChild($root);
1100
+ }
1101
+ static get observedAttributes() {
1102
+ return [
1103
+ ...super.observedAttributes,
1104
+ "variant",
1105
+ "state",
1106
+ "extended",
1107
+ "loading",
1108
+ "shape",
1109
+ "inverted"
1110
+ ];
1111
+ }
1112
+ connectedCallback() {
1113
+ super.connectedCallback();
1114
+ const icons = this.querySelectorAll("px-icon");
1115
+ if (icons) {
1116
+ icons.forEach((icon) => {
1117
+ const iconSize = icon.getAttribute("size");
1118
+ const iconColor = icon.getAttribute("color");
1119
+ if (icon) {
1120
+ icon.addEventListener("click", () => {
1121
+ this.$el.focus();
1122
+ });
1123
+ if (!iconSize) {
1124
+ icon.setAttribute("size", "xs");
1125
+ }
1126
+ if (!iconColor) {
1127
+ icon.setAttribute("color", "inherit");
1128
+ }
1129
+ }
1130
+ });
1131
+ }
1132
+ }
1133
+ attributeChangedCallback(attrName, oldValue, newValue) {
1134
+ if (oldValue !== newValue) {
1135
+ switch (attrName) {
1136
+ case "variant":
1137
+ this.updateVariant(oldValue, newValue, variantValues$1);
1138
+ break;
1139
+ case "state":
1140
+ this.updateState(oldValue, newValue);
1141
+ break;
1142
+ case "extended":
1143
+ this.updateExtended();
1144
+ break;
1145
+ case "loading":
1146
+ this.updateLoading();
1147
+ break;
1148
+ case "shape":
1149
+ this.updateShape(oldValue, newValue);
1150
+ break;
1151
+ default:
1152
+ super.attributeChangedCallback(attrName, oldValue, newValue);
1153
+ break;
1154
+ }
1155
+ }
1156
+ }
1157
+ checkName(values, value) {
1158
+ if (values.includes(value)) {
1159
+ return true;
1160
+ }
1161
+ return false;
1162
+ }
1163
+ checkClass(value) {
1164
+ if (value.startsWith("patch-")) {
1165
+ const splittedValue = value.split(/-(.*)/s);
1166
+ for (const classVar of splittedValue) {
1167
+ if (classVar != "") {
1168
+ this.$el.classList.toggle(classVar);
1169
+ }
1170
+ }
1171
+ } else {
1172
+ this.$el.classList.toggle(value);
1173
+ }
1174
+ }
1175
+ _toggleClass(oldValue, newValue) {
1176
+ if (oldValue !== null && oldValue !== "" && oldValue !== "default") {
1177
+ this.checkClass(oldValue);
1178
+ }
1179
+ if (newValue !== null && newValue !== "" && newValue !== "default") {
1180
+ this.checkClass(newValue);
1181
+ }
1182
+ }
1183
+ updateVariant(oldValue, newValue, attrValue) {
1184
+ if (newValue === "link") {
1185
+ this.$el.classList.remove("btn");
1186
+ } else {
1187
+ this.$el.classList.add("btn");
1188
+ }
1189
+ this._toggleClass(oldValue, newValue);
1190
+ if (!this.checkName(attrValue, newValue)) {
1191
+ console.error(`Bad "variant" value for ${this.$el}`);
1192
+ }
1193
+ }
1194
+ updateState(oldValue, newValue) {
1195
+ const values = ["", "default", "success", "error"];
1196
+ this._toggleClass(oldValue, newValue);
1197
+ if (!this.checkName(values, newValue)) {
1198
+ console.error(`Bad "sate" value for ${this.$el}`);
1199
+ }
1200
+ }
1201
+ updateExtended() {
1202
+ this.$el.classList.toggle("extended");
1203
+ }
1204
+ updateLoading() {
1205
+ const spinner = this.querySelector("px-spinner");
1206
+ if (spinner) {
1207
+ const spinnerSize = spinner.getAttribute("size");
1208
+ if (!spinnerSize) {
1209
+ spinner.setAttribute("size", "xs");
1210
+ }
1211
+ }
1212
+ this.$el.classList.toggle("loading");
1213
+ }
1214
+ updateShape(oldValue, newValue) {
1215
+ const values = [
1216
+ "",
1217
+ "default",
1218
+ "bottom-right",
1219
+ "bottom-left",
1220
+ "alternative"
1221
+ ];
1222
+ this._toggleClass(oldValue, newValue);
1223
+ if (!this.checkName(values, newValue)) {
1224
+ console.error(`Bad "shape" value for ${this.$el}`);
1225
+ }
1226
+ }
1227
+ get variant() {
1228
+ return this.getAttribute("variant");
1229
+ }
1230
+ set variant(value) {
1231
+ this.setAttribute("variant", value);
1232
+ }
1233
+ get state() {
1234
+ return this.getAttribute("state");
1235
+ }
1236
+ set state(value) {
1237
+ this.setAttribute("state", value);
1238
+ }
1239
+ get extended() {
1240
+ return this.getAttribute("extended");
1241
+ }
1242
+ set extended(value) {
1243
+ this.setAttribute("extended", value);
1244
+ }
1245
+ get loading() {
1246
+ return this.getAttribute("loading");
1247
+ }
1248
+ set loading(value) {
1249
+ this.setAttribute("loading", value);
1250
+ }
1251
+ get shape() {
1252
+ return this.getAttribute("shape");
1253
+ }
1254
+ set shape(value) {
1255
+ this.setAttribute("shape", value);
1256
+ }
1257
+ get inverted() {
1258
+ return this.getAttribute("inverted");
1259
+ }
1260
+ set inverted(value) {
1261
+ this.setAttribute("inverted", value);
1262
+ }
1263
+ };
1264
+ _Button.nativeName = "button";
1265
+ let Button = _Button;
1266
+ if (!customElements.get("px-button")) {
1267
+ customElements.define("px-button", Button);
1268
+ }
1063
1269
  class IconSet extends HTMLElement {
1064
1270
  constructor() {
1065
1271
  super();
@@ -1107,6 +1313,24 @@ if (!customElements.get("px-icon-set")) {
1107
1313
  customElements.define("px-icon-set", IconSet);
1108
1314
  }
1109
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
+ ];
1110
1334
  const observedAttributes = [
1111
1335
  "name",
1112
1336
  "size",
@@ -1134,7 +1358,7 @@ class Icon extends WithFlexAttributes {
1134
1358
  this.updateAttribute(attrName, oldValue, newValue, iconSizeValues);
1135
1359
  break;
1136
1360
  case "color":
1137
- this.updateAttribute(attrName, oldValue, newValue, colorValues$1);
1361
+ this.updateAttribute(attrName, oldValue, newValue, iconColorValues);
1138
1362
  break;
1139
1363
  case "aria-label":
1140
1364
  if (!this.internals) {
@@ -1210,9 +1434,9 @@ class Icon extends WithFlexAttributes {
1210
1434
  this.setAttribute("from", value);
1211
1435
  }
1212
1436
  }
1213
- const styles$b = ":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}";
1214
1438
  const styleSheet$b = new CSSStyleSheet();
1215
- styleSheet$b.replaceSync(styles$b);
1439
+ styleSheet$b.replaceSync(styles$a);
1216
1440
  class SVGIcon extends Icon {
1217
1441
  constructor() {
1218
1442
  super(styleSheet$b);
@@ -1259,7 +1483,7 @@ const iconFontStyles = '.lavender-3g_tablet:before{content:""}.lavender-acces
1259
1483
  const iconFontStyleSheet = new CSSStyleSheet();
1260
1484
  const styleSheet$a = new CSSStyleSheet();
1261
1485
  iconFontStyleSheet.replaceSync(iconFontStyles);
1262
- styleSheet$a.replaceSync(styles$b);
1486
+ styleSheet$a.replaceSync(styles$a);
1263
1487
  class FontIcon extends Icon {
1264
1488
  constructor() {
1265
1489
  super(iconFontStyleSheet, styleSheet$a);
@@ -1277,11 +1501,11 @@ class FontIcon extends Icon {
1277
1501
  }
1278
1502
  }
1279
1503
  customElements.define("px-icon-f", FontIcon);
1280
- 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}}';
1281
1505
  const containerStyles = new CSSStyleSheet();
1282
1506
  containerStyles.replaceSync(containerCss);
1283
1507
  const anchorValues = ["anchor-right", "anchor-left", "anchor-full"];
1284
- const bgImgSizeValues = ["", "cover", "contain", "default"];
1508
+ const backgroundSizeValues = ["", "cover", "contain", "default"];
1285
1509
  const _Container = class _Container extends PxElement {
1286
1510
  constructor() {
1287
1511
  super(containerStyles);
@@ -1291,29 +1515,6 @@ const _Container = class _Container extends PxElement {
1291
1515
  <slot name="anchor-full"></slot>
1292
1516
  <slot></slot>
1293
1517
  </div>`;
1294
- this.onWindowResize = () => {
1295
- if (this.hasAttribute("background-image")) {
1296
- this.loadImg("background-image", this.getAttribute("background-image"));
1297
- }
1298
- if (this.hasAttribute("background-image--mobile")) {
1299
- this.loadImg(
1300
- "background-image--mobile",
1301
- this.getAttribute("background-image--mobile")
1302
- );
1303
- }
1304
- if (this.hasAttribute("background-image--tablet")) {
1305
- this.loadImg(
1306
- "background-image--tablet",
1307
- this.getAttribute("background-image--tablet")
1308
- );
1309
- }
1310
- if (this.hasAttribute("background-image--laptop")) {
1311
- this.loadImg(
1312
- "background-image--laptop",
1313
- this.getAttribute("background-image--laptop")
1314
- );
1315
- }
1316
- };
1317
1518
  this.shadowRoot.innerHTML = this.template();
1318
1519
  }
1319
1520
  static get observedAttributes() {
@@ -1348,6 +1549,11 @@ const _Container = class _Container extends PxElement {
1348
1549
  "padding-bottom--laptop",
1349
1550
  "padding-left--laptop",
1350
1551
  "border",
1552
+ "border-color",
1553
+ "border-side",
1554
+ "border-side--mobile",
1555
+ "border-side--tablet",
1556
+ "border-side--laptop",
1351
1557
  "border-radius",
1352
1558
  "no-border-radius",
1353
1559
  "no-border-radius--mobile",
@@ -1371,37 +1577,338 @@ const _Container = class _Container extends PxElement {
1371
1577
  "inverted"
1372
1578
  ];
1373
1579
  }
1374
- get padding() {
1375
- return this.getAttribute("padding");
1376
- }
1377
- set padding(value) {
1378
- this.setAttribute("padding", value);
1379
- }
1380
- get paddingBlock() {
1381
- return this.getAttribute("padding-block");
1382
- }
1383
- set paddingBlock(value) {
1384
- this.setAttribute("padding-block", value);
1385
- }
1386
- get paddingInline() {
1387
- return this.getAttribute("padding-inline");
1388
- }
1389
- set paddingInline(value) {
1390
- this.setAttribute("padding-inline", value);
1391
- }
1392
- get paddingTop() {
1393
- return this.getAttribute("padding-top");
1394
- }
1395
- set paddingTop(value) {
1396
- this.setAttribute("padding-top", value);
1397
- }
1398
- get paddingRight() {
1399
- return this.getAttribute("padding-right");
1400
- }
1401
- set paddingRight(value) {
1402
- this.setAttribute("padding-right", value);
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
+ }
1403
1608
  }
1404
- get paddingBottom() {
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
+ }
1743
+ }
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
+ }
1774
+ }
1775
+ updateBackgroundImg(attrName, newValue) {
1776
+ this.$el.style.setProperty(`--${attrName}`, `url("${newValue}")`);
1777
+ }
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
+ }
1792
+ }
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
+ }
1810
+ }
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
+ }
1826
+ }
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) {
1909
+ this.setAttribute("padding-right", value);
1910
+ }
1911
+ get paddingBottom() {
1405
1912
  return this.getAttribute("padding-bottom");
1406
1913
  }
1407
1914
  set paddingBottom(value) {
@@ -1545,6 +2052,36 @@ const _Container = class _Container extends PxElement {
1545
2052
  set border(value) {
1546
2053
  this.setAttribute("border", value);
1547
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
+ }
1548
2085
  get borderRadius() {
1549
2086
  return this.getAttribute("border-radius");
1550
2087
  }
@@ -1575,28 +2112,28 @@ const _Container = class _Container extends PxElement {
1575
2112
  set noBorderRadiusLaptop(value) {
1576
2113
  this.setAttribute("no-border-radius--laptop", value);
1577
2114
  }
1578
- get bgColor() {
2115
+ get backgroundColor() {
1579
2116
  return this.getAttribute("background-color");
1580
2117
  }
1581
- set bgColor(value) {
2118
+ set backgroundColor(value) {
1582
2119
  this.setAttribute("background-color", value);
1583
2120
  }
1584
- get bgColorMobile() {
2121
+ get backgroundColorMobile() {
1585
2122
  return this.getAttribute("background-color--mobile");
1586
2123
  }
1587
- set bgColorMobile(value) {
2124
+ set backgroundColorMobile(value) {
1588
2125
  this.setAttribute("background-color--mobile", value);
1589
2126
  }
1590
- get bgColorTablet() {
2127
+ get backgroundColorTablet() {
1591
2128
  return this.getAttribute("background-color--tablet");
1592
2129
  }
1593
- set bgColorTablet(value) {
2130
+ set backgroundColorTablet(value) {
1594
2131
  this.setAttribute("background-color--tablet", value);
1595
2132
  }
1596
- get bgColorLaptop() {
2133
+ get backgroundColorLaptop() {
1597
2134
  return this.getAttribute("background-color--laptop");
1598
2135
  }
1599
- set bgColorLaptop(value) {
2136
+ set backgroundColorLaptop(value) {
1600
2137
  this.setAttribute("background-color--laptop", value);
1601
2138
  }
1602
2139
  get gradient() {
@@ -1617,281 +2154,66 @@ const _Container = class _Container extends PxElement {
1617
2154
  set gradientTablet(value) {
1618
2155
  this.setAttribute("background-gradient--tablet", value);
1619
2156
  }
1620
- get gradientLaptop() {
1621
- return this.getAttribute("background-gradient--laptop");
1622
- }
1623
- set gradientLaptop(value) {
1624
- this.setAttribute("background-gradient--laptop", value);
1625
- }
1626
- get bgImg() {
1627
- return this.getAttribute("background-image");
1628
- }
1629
- set bgImg(value) {
1630
- this.setAttribute("background-image", value);
1631
- }
1632
- get bgImgMobile() {
1633
- return this.getAttribute("background-image--mobile");
1634
- }
1635
- set bgImgMobile(value) {
1636
- this.setAttribute("background-image--mobile", value);
1637
- }
1638
- get bgImgTablet() {
1639
- return this.getAttribute("background-image--tablet");
1640
- }
1641
- set bgImgTablet(value) {
1642
- this.setAttribute("background-image--tablet", value);
1643
- }
1644
- get bgImgLaptop() {
1645
- return this.getAttribute("background-image--laptop");
1646
- }
1647
- set bgImgLaptop(value) {
1648
- this.setAttribute("background-image--laptop", value);
1649
- }
1650
- get bgImgSize() {
1651
- return this.getAttribute("background-size");
1652
- }
1653
- set bgImgSize(value) {
1654
- this.setAttribute("background-size", value);
1655
- }
1656
- get bgImgPosition() {
1657
- return this.getAttribute("background-position");
1658
- }
1659
- set bgImgPosition(value) {
1660
- this.setAttribute("background-position", value);
1661
- }
1662
- get shadow() {
1663
- return this.getAttribute("box-shadow");
1664
- }
1665
- set shadow(value) {
1666
- this.setAttribute("box-shadow", value);
1667
- }
1668
- get inverted() {
1669
- return this.getAttribute("inverted");
1670
- }
1671
- set inverted(value) {
1672
- this.setAttribute("inverted", value);
1673
- }
1674
- connectedCallback() {
1675
- var _a, _b, _c, _d;
1676
- super.connectedCallback();
1677
- this.style.setProperty(
1678
- "--background-color",
1679
- "var(--px-color-bg-container-rich-inverted)"
1680
- );
1681
- const anchorSlot = this.querySelector("[slot]");
1682
- if (anchorSlot) {
1683
- if (anchorValues.includes(anchorSlot.getAttribute("slot"))) {
1684
- this.shadowRoot.querySelector(".container").classList.toggle("anchored");
1685
- }
1686
- }
1687
- if (((_a = this.parentElement) == null ? void 0 : _a.getAttribute("align-items")) === "stretch") {
1688
- if (((_b = this.parentElement) == null ? void 0 : _b.getAttribute("direction")) === "column") {
1689
- this.$el.style.width = "100%";
1690
- } else {
1691
- this.$el.style.height = "100%";
1692
- }
1693
- }
1694
- if (((_c = this.parentElement) == null ? void 0 : _c.localName) === "px-grid-item" || ((_d = this.parentElement) == null ? void 0 : _d.localName) === "px-a") {
1695
- this.$el.style.height = "100%";
1696
- }
1697
- if (this.hasAttribute("background-image") || this.hasAttribute("background-image--mobile") || this.hasAttribute("background-image--tablet") || this.hasAttribute("background-image--laptop")) {
1698
- window.addEventListener("resize", this.onWindowResize);
1699
- }
1700
- }
1701
- disconnectedCallback() {
1702
- window.removeEventListener("resize", this.onWindowResize);
1703
- }
1704
- attributeChangedCallback(attrName, oldValue, newValue) {
1705
- if (oldValue !== newValue) {
1706
- switch (attrName) {
1707
- case "padding":
1708
- case "padding-block":
1709
- case "padding-inline":
1710
- case "padding-top":
1711
- case "padding-right":
1712
- case "padding-bottom":
1713
- case "padding-left":
1714
- case "padding--mobile":
1715
- case "padding-block--mobile":
1716
- case "padding-inline--mobile":
1717
- case "padding-top--mobile":
1718
- case "padding-right--mobile":
1719
- case "padding-bottom--mobile":
1720
- case "padding-left--mobile":
1721
- case "padding--tablet":
1722
- case "padding-block--tablet":
1723
- case "padding-inline--tablet":
1724
- case "padding-top--tablet":
1725
- case "padding-right--tablet":
1726
- case "padding-bottom--tablet":
1727
- case "padding-left--tablet":
1728
- case "padding--laptop":
1729
- case "padding-block--laptop":
1730
- case "padding-inline--laptop":
1731
- case "padding-top--laptop":
1732
- case "padding-right--laptop":
1733
- case "padding-bottom--laptop":
1734
- case "padding-left--laptop":
1735
- this.updateAttribute(attrName, oldValue, newValue, paddingValues);
1736
- break;
1737
- case "border":
1738
- this.updateAttribute(attrName, oldValue, newValue, borderValues);
1739
- break;
1740
- case "border-radius":
1741
- this.updateAttribute(
1742
- attrName,
1743
- oldValue,
1744
- newValue,
1745
- borderRadiusValues
1746
- );
1747
- break;
1748
- case "no-border-radius":
1749
- case "no-border-radius--mobile":
1750
- case "no-border-radius--tablet":
1751
- case "no-border-radius--laptop":
1752
- this.updateNoBorderRadius(
1753
- attrName,
1754
- oldValue,
1755
- newValue,
1756
- noBorderRadiusValues
1757
- );
1758
- break;
1759
- case "background-color":
1760
- case "background-color--mobile":
1761
- case "background-color--tablet":
1762
- case "background-color--laptop":
1763
- this.updateBgColor(attrName, newValue);
1764
- break;
1765
- case "background-gradient":
1766
- case "background-gradient--mobile":
1767
- case "background-gradient--tablet":
1768
- case "background-gradient--laptop":
1769
- this.updateGradient(attrName, newValue);
1770
- break;
1771
- case "background-size":
1772
- this.updateAttribute(attrName, oldValue, newValue, bgImgSizeValues);
1773
- break;
1774
- case "background-image":
1775
- case "background-image--mobile":
1776
- case "background-image--tablet":
1777
- case "background-image--laptop":
1778
- if (newValue !== "") {
1779
- this.$el.classList.toggle("bgimg");
1780
- this.loadImg(attrName, newValue);
1781
- }
1782
- break;
1783
- case "background-position":
1784
- if (newValue !== null && newValue !== "") {
1785
- this.$el.style.backgroundPosition = newValue;
1786
- }
1787
- break;
1788
- case "box-shadow":
1789
- this.updateAttribute(attrName, oldValue, newValue, shadowValues);
1790
- break;
1791
- default:
1792
- super.attributeChangedCallback(attrName, oldValue, newValue);
1793
- break;
1794
- }
1795
- }
2157
+ get gradientLaptop() {
2158
+ return this.getAttribute("background-gradient--laptop");
1796
2159
  }
1797
- loadImg(attrName, newValue) {
1798
- if (attrName === "background-image") {
1799
- this.$el.style.backgroundImage = `url("${newValue}")`;
1800
- } else if (window.matchMedia("only screen and (max-width: 767px)").matches && attrName === "background-image--mobile") {
1801
- this.$el.style.backgroundImage = `url("${newValue}")`;
1802
- } else if (window.matchMedia(
1803
- "only screen and (min-width: 768px) and (max-width: 1024px)"
1804
- ).matches && attrName === "background-image--tablet") {
1805
- this.$el.style.backgroundImage = `url("${newValue}")`;
1806
- } else if (window.matchMedia("only screen and (min-width: 1025px)").matches && attrName === "background-image--laptop") {
1807
- this.$el.style.backgroundImage = `url("${newValue}")`;
1808
- }
2160
+ set gradientLaptop(value) {
2161
+ this.setAttribute("background-gradient--laptop", value);
1809
2162
  }
1810
- updateGradient(attrName, newValue) {
1811
- if (this.checkName(gradientValues, newValue)) {
1812
- const splitResult = this.splitAttrNameFromBreakpoint(attrName);
1813
- attrName = splitResult.attrName;
1814
- const breakpoint = splitResult.breakpoint;
1815
- this.$el.style.setProperty(
1816
- `--${attrName}${breakpoint}`,
1817
- `linear-gradient(var(--px-color-bg-gradient-${newValue}))`
1818
- );
1819
- } else {
1820
- console.error(
1821
- `${newValue} is not an allowed background-gradient value for ${this.$el}`
1822
- );
1823
- }
2163
+ get backgroundImage() {
2164
+ return this.getAttribute("background-image");
1824
2165
  }
1825
- updateBgColor(attrName, newValue) {
1826
- if (this.checkName(bgColorValues, newValue)) {
1827
- const splitResult = this.splitAttrNameFromBreakpoint(attrName);
1828
- attrName = splitResult.attrName;
1829
- const breakpoint = splitResult.breakpoint;
1830
- const mode = this.getAttribute("inverted") !== null ? "inverted" : "default";
1831
- this.$el.style.setProperty(
1832
- `--${attrName}${breakpoint}`,
1833
- `var(--px-color-bg-${newValue}-${mode})`
1834
- );
1835
- } else {
1836
- console.error(
1837
- `${newValue} is not an allowed ${attrName} value for ${this.$el}`
1838
- );
1839
- }
2166
+ set backgroundImage(value) {
2167
+ this.setAttribute("background-image", value);
1840
2168
  }
1841
- updateNoBorderRadius(attrName, oldValue, newValue, attrValues) {
1842
- if (!this.checkName(attrValues, newValue)) {
1843
- console.error(
1844
- `${newValue} is not an allowed ${attrName} value for ${this.$el}`
1845
- );
1846
- } else {
1847
- const splitResult = this.splitAttrNameFromBreakpoint(attrName);
1848
- attrName = splitResult.attrName;
1849
- const breakpoint = splitResult.breakpoint;
1850
- if (oldValue !== null && oldValue !== "") {
1851
- this.$el.classList.toggle(`${attrName}-${oldValue}${breakpoint}`);
1852
- }
1853
- if (newValue !== null && newValue !== "") {
1854
- this.$el.classList.toggle(`${attrName}-${newValue}${breakpoint}`);
1855
- }
1856
- }
2169
+ get backgroundImageMobile() {
2170
+ return this.getAttribute("background-image--mobile");
1857
2171
  }
1858
- updateAttribute(attrName, oldValue, newValue, attrValues) {
1859
- if (!this.checkName(attrValues, newValue)) {
1860
- console.error(
1861
- `${newValue} is not an allowed ${attrName} value for ${this.$el}`
1862
- );
1863
- } else {
1864
- const splitResult = this.splitAttrNameFromBreakpoint(attrName);
1865
- attrName = splitResult.attrName;
1866
- const breakpoint = splitResult.breakpoint;
1867
- if (oldValue !== null && oldValue !== "") {
1868
- this.$el.classList.toggle(`${attrName}-${oldValue}${breakpoint}`);
1869
- }
1870
- if (newValue !== null && newValue !== "") {
1871
- this.$el.classList.toggle(`${attrName}-${newValue}${breakpoint}`);
1872
- }
1873
- }
2172
+ set backgroundImageMobile(value) {
2173
+ this.setAttribute("background-image--mobile", value);
1874
2174
  }
1875
- splitAttrNameFromBreakpoint(attrName) {
1876
- let breakpoint = "";
1877
- if (["--mobile", "--tablet", "--laptop"].some(
1878
- (suffix) => attrName.includes(suffix)
1879
- )) {
1880
- const attrNameSplit = attrName.split("--");
1881
- attrName = attrNameSplit[0];
1882
- breakpoint = `--${attrNameSplit[1]}`;
1883
- }
1884
- return { attrName, breakpoint };
2175
+ get backgroundImageTablet() {
2176
+ return this.getAttribute("background-image--tablet");
1885
2177
  }
1886
- checkName(values, value) {
1887
- return values.includes(value);
2178
+ set backgroundImageTablet(value) {
2179
+ this.setAttribute("background-image--tablet", value);
2180
+ }
2181
+ get backgroundImageLaptop() {
2182
+ return this.getAttribute("background-image--laptop");
2183
+ }
2184
+ set backgroundImageLaptop(value) {
2185
+ this.setAttribute("background-image--laptop", value);
2186
+ }
2187
+ get backgroundSize() {
2188
+ return this.getAttribute("background-size");
2189
+ }
2190
+ set backgroundSize(value) {
2191
+ this.setAttribute("background-size", value);
2192
+ }
2193
+ get backgroundPosition() {
2194
+ return this.getAttribute("background-position");
2195
+ }
2196
+ set backgroundPosition(value) {
2197
+ this.setAttribute("background-position", value);
2198
+ }
2199
+ get boxShadow() {
2200
+ return this.getAttribute("box-shadow");
2201
+ }
2202
+ set boxShadow(value) {
2203
+ this.setAttribute("box-shadow", value);
2204
+ }
2205
+ get inverted() {
2206
+ return this.getAttribute("inverted");
2207
+ }
2208
+ set inverted(value) {
2209
+ this.setAttribute("inverted", value);
1888
2210
  }
1889
2211
  };
1890
2212
  _Container.nativeName = "div";
1891
2213
  let Container = _Container;
1892
2214
  customElements.define("px-container", Container);
1893
- 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)}}";
1894
- 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)}";
1895
2217
  const headingStyles$2 = new CSSStyleSheet();
1896
2218
  headingStyles$2.replaceSync(headingCss);
1897
2219
  const typographyStyles$5 = new CSSStyleSheet();
@@ -1926,7 +2248,7 @@ class AbstractHeading extends PxElement {
1926
2248
  this.updateAttribute(attrName, oldValue, newValue, headingValues);
1927
2249
  break;
1928
2250
  case "color":
1929
- this.updateColor(oldValue, newValue, colorValues$1);
2251
+ this.updateColor(oldValue, newValue, colorValues);
1930
2252
  break;
1931
2253
  case "text-align":
1932
2254
  case "text-align--mobile":
@@ -1954,7 +2276,10 @@ class AbstractHeading extends PxElement {
1954
2276
  }
1955
2277
  updateAttribute(attrName, oldValue, newValue, attrValue) {
1956
2278
  if (!this.checkName(attrValue, newValue)) {
1957
- console.error(`Bad "${attrName}" value for`, this.$el);
2279
+ console.error(
2280
+ `${newValue} is not an allowed "${attrName}" value for`,
2281
+ this.$el
2282
+ );
1958
2283
  } else {
1959
2284
  this.toggleClass(oldValue, newValue);
1960
2285
  }
@@ -1964,12 +2289,15 @@ class AbstractHeading extends PxElement {
1964
2289
  console.error(`Bad color value for`, this.$el);
1965
2290
  return;
1966
2291
  }
1967
- const invertedStatus = this.inverted === null ? "default" : "inverted";
1968
2292
  const updateColorStyle = (value) => {
1969
2293
  if (value !== null && value !== "" && value !== "default") {
1970
2294
  this.$el.style.setProperty(
1971
- `--heading-color-${invertedStatus}`,
1972
- `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)`
1973
2301
  );
1974
2302
  }
1975
2303
  };
@@ -2097,18 +2425,18 @@ const _H6 = class _H6 extends AbstractHeading {
2097
2425
  _H6.nativeName = "h6";
2098
2426
  let H6 = _H6;
2099
2427
  customElements.define("px-h6", H6);
2100
- const styles$a = ":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}}";
2101
2429
  const styleSheet$9 = new CSSStyleSheet();
2102
- styleSheet$9.replaceSync(styles$a);
2430
+ styleSheet$9.replaceSync(styles$9);
2103
2431
  class Section extends HTMLElement {
2104
2432
  constructor() {
2105
2433
  super();
2106
2434
  this.template = () => `
2107
- <px-container border-radius="none" padding="none" background-color="${this.bgColor}">
2435
+ <px-container border-radius="none" padding-inline="none" background-color="${this.backgroundColor}">
2108
2436
  <div class="content-wrapper">
2109
- <px-vstack gap="under-display-vertical">
2437
+ <px-vstack gap="heading-to-content">
2110
2438
  <slot name="heading"></slot>
2111
- <px-vstack gap="none">
2439
+ <px-vstack gap="after-element-none">
2112
2440
  <slot></slot>
2113
2441
  </px-vstack>
2114
2442
  </px-vstack>
@@ -2121,8 +2449,11 @@ class Section extends HTMLElement {
2121
2449
  }
2122
2450
  connectedCallback() {
2123
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
+ }
2124
2455
  if (!headingSlot) {
2125
- this.shadowRoot.querySelector("px-vstack").setAttribute("gap", "none");
2456
+ this.shadowRoot.querySelector("px-vstack").setAttribute("gap", "after-element-none");
2126
2457
  }
2127
2458
  }
2128
2459
  static get observedAttributes() {
@@ -2137,7 +2468,21 @@ class Section extends HTMLElement {
2137
2468
  "background-position",
2138
2469
  "padding-block",
2139
2470
  "padding-top",
2140
- "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"
2141
2486
  ];
2142
2487
  }
2143
2488
  get $container() {
@@ -2147,28 +2492,28 @@ class Section extends HTMLElement {
2147
2492
  if (oldValue !== newValue) {
2148
2493
  switch (name) {
2149
2494
  case "background-color":
2150
- this.$container.bgColor = bgColorValues.indexOf(newValue) > 0 ? newValue : "container-none";
2495
+ this.$container.backgroundColor = backgroundColorValues.indexOf(newValue) > 0 ? newValue : "none";
2151
2496
  break;
2152
2497
  case "background-gradient":
2153
2498
  this.$container.gradient = this.gradient;
2154
2499
  break;
2155
2500
  case "background-image":
2156
- this.$container.bgImg = newValue;
2501
+ this.$container.backgroundImage = newValue;
2157
2502
  break;
2158
2503
  case "background-image--mobile":
2159
- this.$container.bgImgMobile = newValue;
2504
+ this.$container.backgroundImageMobile = newValue;
2160
2505
  break;
2161
2506
  case "background-image--tablet":
2162
- this.$container.bgImgTablet = newValue;
2507
+ this.$container.backgroundImageTablet = newValue;
2163
2508
  break;
2164
2509
  case "background-image--laptop":
2165
- this.$container.bgImgLaptop = newValue;
2510
+ this.$container.backgroundImageLaptop = newValue;
2166
2511
  break;
2167
2512
  case "background-size":
2168
- this.$container.bgImgSize = newValue;
2513
+ this.$container.backgroundSize = newValue;
2169
2514
  break;
2170
2515
  case "background-position":
2171
- this.$container.bgImgPosition = newValue;
2516
+ this.$container.backgroundPosition = newValue;
2172
2517
  break;
2173
2518
  case "padding-block":
2174
2519
  this.$container.paddingBlock = newValue;
@@ -2179,13 +2524,55 @@ class Section extends HTMLElement {
2179
2524
  case "padding-bottom":
2180
2525
  this.$container.paddingBottom = newValue;
2181
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;
2182
2569
  }
2183
2570
  }
2184
2571
  }
2185
- get bgColor() {
2186
- return this.getAttribute("background-color") || "container-none";
2572
+ get backgroundColor() {
2573
+ return this.getAttribute("background-color") || "none";
2187
2574
  }
2188
- set bgColor(value) {
2575
+ set backgroundColor(value) {
2189
2576
  this.setAttribute("background-color", value);
2190
2577
  }
2191
2578
  get gradient() {
@@ -2194,40 +2581,40 @@ class Section extends HTMLElement {
2194
2581
  set gradient(value) {
2195
2582
  this.setAttribute("background-gradient", value);
2196
2583
  }
2197
- get bgImg() {
2584
+ get backgroundImage() {
2198
2585
  return this.getAttribute("background-image");
2199
2586
  }
2200
- set bgImg(value) {
2587
+ set backgroundImage(value) {
2201
2588
  this.setAttribute("background-image", value);
2202
2589
  }
2203
- get bgImgMobile() {
2590
+ get backgroundImageMobile() {
2204
2591
  return this.getAttribute("background-image--mobile");
2205
2592
  }
2206
- set bgImgMobile(value) {
2593
+ set backgroundImageMobile(value) {
2207
2594
  this.setAttribute("background-image--mobile", value);
2208
2595
  }
2209
- get bgImgTablet() {
2596
+ get backgroundImageTablet() {
2210
2597
  return this.getAttribute("background-image--tablet");
2211
2598
  }
2212
- set bgImgTablet(value) {
2599
+ set backgroundImageTablet(value) {
2213
2600
  this.setAttribute("background-image--tablet", value);
2214
2601
  }
2215
- get bgImgLaptop() {
2602
+ get backgroundImageLaptop() {
2216
2603
  return this.getAttribute("background-image--laptop");
2217
2604
  }
2218
- set bgImgLaptop(value) {
2605
+ set backgroundImageLaptop(value) {
2219
2606
  this.setAttribute("background-image--laptop", value);
2220
2607
  }
2221
- get bgImgSize() {
2608
+ get backgroundSize() {
2222
2609
  return this.getAttribute("background-size");
2223
2610
  }
2224
- set bgImgSize(value) {
2611
+ set backgroundSize(value) {
2225
2612
  this.setAttribute("background-size", value);
2226
2613
  }
2227
- get bgImgPosition() {
2614
+ get backgroundPosition() {
2228
2615
  return this.getAttribute("background-position");
2229
2616
  }
2230
- set bgImgPosition(value) {
2617
+ set backgroundPosition(value) {
2231
2618
  this.setAttribute("background-position", value);
2232
2619
  }
2233
2620
  get paddingBlock() {
@@ -2248,12 +2635,96 @@ class Section extends HTMLElement {
2248
2635
  set paddingBottom(value) {
2249
2636
  this.setAttribute("padding-bottom", value);
2250
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
+ }
2251
2722
  }
2252
2723
  customElements.define("px-section", Section);
2253
- 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)}}`;
2254
2725
  const accordionStyles = new CSSStyleSheet();
2255
2726
  accordionStyles.replaceSync(accordionCss);
2256
- const variantValues$1 = ["", "none", "single"];
2727
+ const variantValues = ["", "none", "single"];
2257
2728
  const _Accordion = class _Accordion extends PxElement {
2258
2729
  constructor() {
2259
2730
  super(accordionStyles);
@@ -2282,7 +2753,7 @@ const _Accordion = class _Accordion extends PxElement {
2282
2753
  if (oldValue !== newValue) {
2283
2754
  switch (attrName) {
2284
2755
  case "variant":
2285
- this.updateAttribute(attrName, oldValue, newValue, variantValues$1);
2756
+ this.updateAttribute(attrName, oldValue, newValue, variantValues);
2286
2757
  break;
2287
2758
  default:
2288
2759
  super.attributeChangedCallback(attrName, oldValue, newValue);
@@ -2310,67 +2781,25 @@ const _Accordion = class _Accordion extends PxElement {
2310
2781
  _Accordion.nativeName = "details";
2311
2782
  let Accordion = _Accordion;
2312
2783
  customElements.define("px-accordion", Accordion);
2313
- 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)}}';
2314
2785
  const styleSheet$8 = new CSSStyleSheet();
2315
2786
  styleSheet$8.replaceSync(imgCss);
2316
- const breakpointsValues = ["", "mobile", "tablet", "laptop", "desktop"];
2317
- class AbstractImage extends PxElement {
2318
- constructor() {
2319
- super(styleSheet$8);
2320
- }
2321
- static get observedAttributes() {
2322
- return [
2323
- ...super.observedAttributes,
2324
- "hide-for",
2325
- "show-for",
2326
- "border-radius",
2327
- "no-border-radius",
2328
- "no-border-radius-mobile",
2329
- "no-border-radius-tablet",
2330
- "no-border-radius-laptop"
2331
- ];
2332
- }
2333
- get hidefor() {
2334
- return this.getAttribute("hide-for");
2335
- }
2336
- set hidefor(value) {
2337
- this.setAttribute("hide-for", value);
2338
- }
2339
- get showfor() {
2340
- return this.getAttribute("show-for");
2341
- }
2342
- set showfor(value) {
2343
- this.setAttribute("show-for", value);
2344
- }
2345
- get borderRadius() {
2346
- return this.getAttribute("border-radius");
2347
- }
2348
- set borderRadius(value) {
2349
- this.setAttribute("border-radius", value);
2350
- }
2351
- get noBorderRadius() {
2352
- return this.getAttribute("no-border-radius");
2353
- }
2354
- set noBorderRadius(value) {
2355
- this.setAttribute("no-border-radius", value);
2356
- }
2357
- get noBorderRadiusMobile() {
2358
- return this.getAttribute("no-border-radius-mobile");
2359
- }
2360
- set noBorderRadiusMobile(value) {
2361
- this.setAttribute("no-border-radius-mobile", value);
2362
- }
2363
- get noBorderRadiusTablet() {
2364
- return this.getAttribute("no-border-radius-tablet");
2365
- }
2366
- set noBorderRadiusTablet(value) {
2367
- this.setAttribute("no-border-radius-tablet", value);
2368
- }
2369
- get noBorderRadiusLaptop() {
2370
- return this.getAttribute("no-border-radius-laptop");
2787
+ const breakpointsValues = ["", "mobile", "tablet", "laptop"];
2788
+ class AbstractImage extends PxElement {
2789
+ constructor() {
2790
+ super(styleSheet$8);
2371
2791
  }
2372
- set noBorderRadiusLaptop(value) {
2373
- 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
+ ];
2374
2803
  }
2375
2804
  attributeChangedCallback(attrName, oldValue, newValue) {
2376
2805
  if (oldValue !== newValue) {
@@ -2388,9 +2817,9 @@ class AbstractImage extends PxElement {
2388
2817
  );
2389
2818
  break;
2390
2819
  case "no-border-radius":
2391
- case "no-border-radius-mobile":
2392
- case "no-border-radius-tablet":
2393
- case "no-border-radius-laptop":
2820
+ case "no-border-radius--mobile":
2821
+ case "no-border-radius--tablet":
2822
+ case "no-border-radius--laptop":
2394
2823
  this.updateAttribute(
2395
2824
  attrName,
2396
2825
  oldValue,
@@ -2410,17 +2839,77 @@ class AbstractImage extends PxElement {
2410
2839
  `${newValue} is not an allowed ${attrName} value for ${this.$el}`
2411
2840
  );
2412
2841
  } else {
2842
+ const splitResult = this.splitAttrNameFromBreakpoint(attrName);
2843
+ const breakpoint = splitResult.breakpoint;
2413
2844
  if (oldValue !== null && oldValue !== "") {
2414
- this.$el.classList.toggle(`${attrName}-${oldValue}`);
2845
+ this.$el.classList.toggle(
2846
+ `${splitResult.attrName}-${oldValue}${breakpoint}`
2847
+ );
2415
2848
  }
2416
2849
  if (newValue !== null && newValue !== "") {
2417
- this.$el.classList.toggle(`${attrName}-${newValue}`);
2850
+ this.$el.classList.toggle(
2851
+ `${splitResult.attrName}-${newValue}${breakpoint}`
2852
+ );
2418
2853
  }
2419
2854
  }
2420
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
+ }
2421
2867
  checkName(values, value) {
2422
2868
  return values.includes(value);
2423
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
+ }
2424
2913
  }
2425
2914
  const _Image = class _Image extends AbstractImage {
2426
2915
  constructor() {
@@ -2587,9 +3076,8 @@ const _Picture = class _Picture extends AbstractImage {
2587
3076
  _Picture.nativeName = "picture";
2588
3077
  let Picture = _Picture;
2589
3078
  customElements.define("px-picture", Picture);
2590
- const styles$9 = ".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)}";
2591
3079
  const styleSheet$7 = new CSSStyleSheet();
2592
- styleSheet$7.replaceSync(styles$9);
3080
+ styleSheet$7.replaceSync(styles$b);
2593
3081
  const patchVariantValues = [
2594
3082
  "",
2595
3083
  "default",
@@ -2676,12 +3164,12 @@ class Patch extends HTMLElement {
2676
3164
  if (!customElements.get("px-patch")) {
2677
3165
  customElements.define("px-patch", Patch);
2678
3166
  }
2679
- 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)}';
2680
3168
  const styles$8 = new CSSStyleSheet();
2681
3169
  styles$8.replaceSync(css$1);
2682
3170
  const priceVariantValues = [
2683
3171
  "default",
2684
- "promo",
3172
+ "purpose-promo",
2685
3173
  "free",
2686
3174
  "neutral",
2687
3175
  "exceeding",
@@ -2691,7 +3179,7 @@ const priceSizeValues = ["", "s", "m", "l"];
2691
3179
  const _Price = class _Price extends PxElement {
2692
3180
  constructor() {
2693
3181
  super(styles$8);
2694
- 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>`;
2695
3183
  this.shadowRoot.innerHTML = this.template();
2696
3184
  }
2697
3185
  static get observedAttributes() {
@@ -2765,7 +3253,7 @@ const _Price = class _Price extends PxElement {
2765
3253
  let newPriceSrSpan;
2766
3254
  if (oldPrice && oldPrice.innerHTML !== "") {
2767
3255
  oldPrice.innerHTML = "€" + oldPrice.innerHTML;
2768
- newPriceSrSpan = this.querySelector('[slot="newpromoprice"]');
3256
+ newPriceSrSpan = this.querySelector('[slot="newpurpose-promoprice"]');
2769
3257
  if (newPriceSrSpan) {
2770
3258
  newPriceSrText = newPriceSrSpan.outerHTML;
2771
3259
  price = newPriceSrSpan.nextSibling.textContent;
@@ -2795,7 +3283,7 @@ const _Price = class _Price extends PxElement {
2795
3283
  _Price.nativeName = "span";
2796
3284
  let Price = _Price;
2797
3285
  customElements.define("px-price", Price);
2798
- 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)}}";
2799
3287
  const styles$7 = new CSSStyleSheet();
2800
3288
  styles$7.replaceSync(css);
2801
3289
  const _Ribbon = class _Ribbon extends PxElement {
@@ -2808,21 +3296,29 @@ const _Ribbon = class _Ribbon extends PxElement {
2808
3296
  _Ribbon.nativeName = "div";
2809
3297
  let Ribbon = _Ribbon;
2810
3298
  customElements.define("px-ribbon", Ribbon);
2811
- 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}}";
2812
3300
  const styleSheet$6 = new CSSStyleSheet();
2813
3301
  styleSheet$6.replaceSync(styles$6);
2814
- const directionValues = ["", "default", "horizontal", "vertical"];
2815
- const sizeValues$1 = ["", "none", "s", "m", "l"];
2816
- const colorValues = [
3302
+ const separatorDirectionValues = [
3303
+ "",
3304
+ "default",
3305
+ "horizontal",
3306
+ "vertical"
3307
+ ];
3308
+ const separatorSizeValues = ["", "default", "none", "s", "m", "l"];
3309
+ const separatorColorValues = [
2817
3310
  "",
2818
- "contrasted",
3311
+ "default",
3312
+ "none",
2819
3313
  "action-hover",
2820
3314
  "action-active",
2821
- "none",
2822
- "success",
2823
- "error",
2824
- "warning",
2825
- "unlimited"
3315
+ "action-neutral",
3316
+ "container-main",
3317
+ "container-brand",
3318
+ "purpose-success",
3319
+ "purpose-error",
3320
+ "purpose-warning",
3321
+ "purpose-unlimited"
2826
3322
  ];
2827
3323
  const _Separator = class _Separator extends PxElement {
2828
3324
  constructor() {
@@ -2835,15 +3331,115 @@ const _Separator = class _Separator extends PxElement {
2835
3331
  return [
2836
3332
  ...super.observedAttributes,
2837
3333
  "direction",
2838
- "direction-mobile",
2839
- "direction-tablet",
2840
- "direction-laptop",
2841
- "direction-desktop",
3334
+ "direction--mobile",
3335
+ "direction--tablet",
3336
+ "direction--laptop",
3337
+ "direction--desktop",
2842
3338
  "size",
2843
3339
  "color",
2844
3340
  "inverted"
2845
3341
  ];
2846
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
+ }
2847
3443
  get direction() {
2848
3444
  return this.getAttribute("direction");
2849
3445
  }
@@ -2851,28 +3447,28 @@ const _Separator = class _Separator extends PxElement {
2851
3447
  this.setAttribute("direction", value);
2852
3448
  }
2853
3449
  get directionMobile() {
2854
- return this.getAttribute("direction-mobile");
3450
+ return this.getAttribute("direction--mobile");
2855
3451
  }
2856
3452
  set directionMobile(value) {
2857
- this.setAttribute("direction-mobile", value);
3453
+ this.setAttribute("direction--mobile", value);
2858
3454
  }
2859
3455
  get directionTablet() {
2860
- return this.getAttribute("direction-tablet");
3456
+ return this.getAttribute("direction--tablet");
2861
3457
  }
2862
3458
  set directionTablet(value) {
2863
- this.setAttribute("direction-tablet", value);
3459
+ this.setAttribute("direction--tablet", value);
2864
3460
  }
2865
3461
  get directionLaptop() {
2866
- return this.getAttribute("direction-laptop");
3462
+ return this.getAttribute("direction--laptop");
2867
3463
  }
2868
3464
  set directionLaptop(value) {
2869
- this.setAttribute("direction-laptop", value);
3465
+ this.setAttribute("direction--laptop", value);
2870
3466
  }
2871
3467
  get directionDesktop() {
2872
- return this.getAttribute("direction-desktop");
3468
+ return this.getAttribute("direction--desktop");
2873
3469
  }
2874
3470
  set directionDesktop(value) {
2875
- this.setAttribute("direction-desktop", value);
3471
+ this.setAttribute("direction--desktop", value);
2876
3472
  }
2877
3473
  get size() {
2878
3474
  return this.getAttribute("size");
@@ -2892,85 +3488,11 @@ const _Separator = class _Separator extends PxElement {
2892
3488
  set inverted(value) {
2893
3489
  this.setAttribute("inverted", value);
2894
3490
  }
2895
- attributeChangedCallback(attrName, oldValue, newValue) {
2896
- if (oldValue !== newValue) {
2897
- switch (attrName) {
2898
- case "direction":
2899
- case "direction-mobile":
2900
- case "direction-tablet":
2901
- case "direction-laptop":
2902
- case "direction-desktop":
2903
- this.updateDirection(attrName, newValue);
2904
- break;
2905
- case "size":
2906
- this.updateSize(newValue, sizeValues$1);
2907
- break;
2908
- case "color":
2909
- this.updateColor(newValue, colorValues);
2910
- break;
2911
- default:
2912
- super.attributeChangedCallback(attrName, oldValue, newValue);
2913
- break;
2914
- }
2915
- }
2916
- }
2917
- checkName(values, value) {
2918
- return values.includes(value);
2919
- }
2920
- updateSize(newValue, attrValue) {
2921
- if (!this.checkName(attrValue, newValue)) {
2922
- console.error(`Bad size value for`, this.$el);
2923
- this.$el.style.setProperty("--separator-size", "var(--px-border-m)");
2924
- } else {
2925
- this.$el.style.setProperty(
2926
- "--separator-size",
2927
- `var(--px-border-${newValue})`
2928
- );
2929
- }
2930
- }
2931
- updateColor(newValue, attrValue) {
2932
- if (!this.checkName(attrValue, newValue)) {
2933
- console.error(`Bad color value for`, this.$el);
2934
- this.$el.style.setProperty(
2935
- "--px-separator-color",
2936
- `var(--px-color-border-main-${this.inverted === null ? "default" : "inverted"})`
2937
- );
2938
- } else {
2939
- this.$el.style.setProperty(
2940
- "--px-separator-color",
2941
- `var(--px-color-border-${newValue}-${this.inverted === null ? "default" : "inverted"})`
2942
- );
2943
- }
2944
- }
2945
- updateDirection(attrName, newValue) {
2946
- if (!this.checkName(directionValues, newValue)) {
2947
- console.error(`Bad "${attrName}" value for`, this.$el);
2948
- } else {
2949
- if (attrName === "direction") {
2950
- this.$el.classList.add(`separator_direction_${newValue}`);
2951
- } else {
2952
- const classList = this.$el.classList;
2953
- const mediaquery = attrName.split("-")[1];
2954
- for (let i = 0; i < classList.length; i++) {
2955
- if (classList[i].includes(mediaquery)) {
2956
- this.$el.classList.replace(
2957
- classList[i],
2958
- `separator_direction_${newValue}--${mediaquery}`
2959
- );
2960
- } else {
2961
- this.$el.classList.add(
2962
- `separator_direction_${newValue}--${mediaquery}`
2963
- );
2964
- }
2965
- }
2966
- }
2967
- }
2968
- }
2969
3491
  };
2970
3492
  _Separator.nativeName = "hr";
2971
3493
  let Separator = _Separator;
2972
3494
  customElements.define("px-separator", Separator);
2973
- 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)}}';
2974
3496
  const styleSheet$5 = new CSSStyleSheet();
2975
3497
  styleSheet$5.replaceSync(styles$5);
2976
3498
  const tagVariantValues = ["", "default", "light", "outline"];
@@ -3053,7 +3575,7 @@ class Tag extends HTMLElement {
3053
3575
  if (!customElements.get("px-tag")) {
3054
3576
  customElements.define("px-tag", Tag);
3055
3577
  }
3056
- 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)}}';
3057
3579
  const styleSheet$4 = new CSSStyleSheet();
3058
3580
  styleSheet$4.replaceSync(styles$4);
3059
3581
  class Tabs extends HTMLElement {
@@ -3372,7 +3894,7 @@ class Timeline extends HTMLElement {
3372
3894
  if (!customElements.get("px-timeline")) {
3373
3895
  customElements.define("px-timeline", Timeline);
3374
3896
  }
3375
- 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)}}';
3376
3898
  const styleSheet$2 = new CSSStyleSheet();
3377
3899
  styleSheet$2.replaceSync(styles$2);
3378
3900
  let item = "1";
@@ -3456,14 +3978,14 @@ class Modal extends HTMLElement {
3456
3978
  super();
3457
3979
  this.open = false;
3458
3980
  this.template = `<px-container padding="m" popover> <!-- adding popver here is the only way to style of the modal -->
3459
- <px-stack gap="component-default-vertical" direction="column">
3460
- <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">
3461
3983
  <slot name="title"></slot>
3462
3984
  <slot name="description"></slot>
3463
3985
  </px-stack>
3464
3986
  <slot></slot>
3465
3987
  <px-separator size="l"></px-separator>
3466
- <px-stack gap="component-compact-horizontal" justify-content="end">
3988
+ <px-stack gap="after-element-default" justify-content="end">
3467
3989
  <slot name="footer"></slot>
3468
3990
  </px-stack>
3469
3991
  </px-stack>
@@ -3526,7 +4048,7 @@ class Modal extends HTMLElement {
3526
4048
  if (!customElements.get("px-modal")) {
3527
4049
  customElements.define("px-modal", Modal);
3528
4050
  }
3529
- 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)}}";
3530
4052
  const spanStyles$1 = new CSSStyleSheet();
3531
4053
  const typographyStyles$4 = new CSSStyleSheet();
3532
4054
  spanStyles$1.replaceSync(spanCss);
@@ -3550,39 +4072,11 @@ const _Span = class _Span extends PxElement {
3550
4072
  "inverted"
3551
4073
  ];
3552
4074
  }
3553
- get color() {
3554
- return this.getAttribute("color");
3555
- }
3556
- set color(value) {
3557
- this.setAttribute("color", value);
3558
- }
3559
- get fontsize() {
3560
- return this.getAttribute("font-size");
3561
- }
3562
- set fontsize(value) {
3563
- this.setAttribute("font-size", value);
3564
- }
3565
- get fontweight() {
3566
- return this.getAttribute("font-weight");
3567
- }
3568
- set fontweight(value) {
3569
- this.setAttribute("font-weight", value);
3570
- }
3571
- get inverted() {
3572
- return this.getAttribute("inverted");
3573
- }
3574
- set inverted(value) {
3575
- if (isFalsy(value)) {
3576
- this.removeAttribute("inverted");
3577
- } else {
3578
- this.setAttribute("inverted", value);
3579
- }
3580
- }
3581
4075
  attributeChangedCallback(attrName, oldValue, newValue) {
3582
4076
  if (oldValue !== newValue) {
3583
4077
  switch (attrName) {
3584
4078
  case "color":
3585
- this.updateTypography(attrName, oldValue, newValue, colorValues$1);
4079
+ this.updateTypography(attrName, oldValue, newValue, colorValues);
3586
4080
  break;
3587
4081
  case "font-size":
3588
4082
  this.updateTypography(attrName, oldValue, newValue, fontsizeValues);
@@ -3607,15 +4101,43 @@ const _Span = class _Span extends PxElement {
3607
4101
  this.$el.classList.toggle(`${attrName}-${newValue}`);
3608
4102
  }
3609
4103
  if (!this.checkName(attrValue, newValue)) {
3610
- 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);
3611
4135
  }
3612
4136
  }
3613
4137
  };
3614
4138
  _Span.nativeName = "span";
3615
4139
  let Span = _Span;
3616
4140
  customElements.define("px-span", Span);
3617
- 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)}}';
3618
- 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)}}";
3619
4141
  const linkStyles$1 = new CSSStyleSheet();
3620
4142
  const buttonStyles = new CSSStyleSheet();
3621
4143
  const typographyStyles$3 = new CSSStyleSheet();
@@ -3630,10 +4152,10 @@ const linkVariantValues = [
3630
4152
  "btn-secondary",
3631
4153
  "btn-tertiary"
3632
4154
  ];
4155
+ const linkShapeValues = ["", "default", "alternative"];
3633
4156
  const _Link = class _Link extends PxElement {
3634
4157
  constructor() {
3635
4158
  super(linkStyles$1, buttonStyles, typographyStyles$3);
3636
- this.shapeValues = ["", "default", "alternative"];
3637
4159
  this.template = () => `<slot name="before"></slot><slot></slot><slot name="after"></slot>`;
3638
4160
  const $root = document.createElement(this.nativeName);
3639
4161
  $root.innerHTML = this.template();
@@ -3664,7 +4186,7 @@ const _Link = class _Link extends PxElement {
3664
4186
  this.$el.focus();
3665
4187
  });
3666
4188
  if (!iconSize) {
3667
- icon.setAttribute("size", "xs");
4189
+ icon.setAttribute("size", "2xs");
3668
4190
  }
3669
4191
  if (!iconColor) {
3670
4192
  icon.setAttribute("color", "inherit");
@@ -3695,7 +4217,7 @@ const _Link = class _Link extends PxElement {
3695
4217
  this.updateTypography(attrName, oldValue, newValue, fontsizeValues);
3696
4218
  break;
3697
4219
  case "color":
3698
- this.updateTypography(attrName, oldValue, newValue, colorValues$1);
4220
+ this.updateTypography(attrName, oldValue, newValue, colorValues);
3699
4221
  break;
3700
4222
  case "font-weight":
3701
4223
  this.updateTypography(attrName, oldValue, newValue, fontweightValues);
@@ -3737,7 +4259,7 @@ const _Link = class _Link extends PxElement {
3737
4259
  if (newValue !== null && newValue !== "" && newValue !== "default") {
3738
4260
  this._toggleClassList(newValue);
3739
4261
  }
3740
- if (!this.checkName(this.shapeValues, newValue)) {
4262
+ if (!this.checkName(linkShapeValues, newValue)) {
3741
4263
  console.error(`Bad "shape" value for ${this.$el}`);
3742
4264
  }
3743
4265
  }
@@ -3806,7 +4328,7 @@ let Link = _Link;
3806
4328
  if (!customElements.get("px-a")) {
3807
4329
  customElements.define("px-a", Link);
3808
4330
  }
3809
- 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)}}";
3810
4332
  const paragraphStyles$1 = new CSSStyleSheet();
3811
4333
  const typographyStyles$2 = new CSSStyleSheet();
3812
4334
  const headingStyles$1 = new CSSStyleSheet();
@@ -3837,7 +4359,7 @@ const _Paragraph = class _Paragraph extends PxElement {
3837
4359
  this.updateVariant(attrName, oldValue, newValue, headingValues);
3838
4360
  break;
3839
4361
  case "color":
3840
- this.updateTypography(attrName, oldValue, newValue, colorValues$1);
4362
+ this.updateTypography(attrName, oldValue, newValue, colorValues);
3841
4363
  break;
3842
4364
  case "font-size":
3843
4365
  this.updateTypography(attrName, oldValue, newValue, fontsizeValues);
@@ -3923,7 +4445,7 @@ const _Paragraph = class _Paragraph extends PxElement {
3923
4445
  _Paragraph.nativeName = "p";
3924
4446
  let Paragraph = _Paragraph;
3925
4447
  customElements.define("px-p", Paragraph);
3926
- 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)}";
3927
4449
  const lightStyles = ".li{padding-bottom:var(--px-padding-xs)}";
3928
4450
  const typographyStyles$1 = new CSSStyleSheet();
3929
4451
  const headingStyles = new CSSStyleSheet();
@@ -3966,11 +4488,11 @@ class Typography extends HTMLElement {
3966
4488
  }
3967
4489
  }
3968
4490
  customElements.define("px-typography", Typography);
3969
- 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)}}";
3970
4492
  const buttonIconStyles = new CSSStyleSheet();
3971
4493
  buttonIconStyles.replaceSync(buttonIconCss);
3972
- const sizeValues = ["", "default", "small"];
3973
- const variantValues = ["", "default", "secondary"];
4494
+ const buttonIconSizeValues = ["", "default", "small"];
4495
+ const buttonIconVariantValues = ["", "default", "secondary"];
3974
4496
  const _ButtonIcon = class _ButtonIcon extends PxElement {
3975
4497
  constructor() {
3976
4498
  super(buttonIconStyles);
@@ -3999,7 +4521,10 @@ const _ButtonIcon = class _ButtonIcon extends PxElement {
3999
4521
  this.$el.focus();
4000
4522
  });
4001
4523
  if (!iconSize) {
4002
- icon.setAttribute("size", "xs");
4524
+ icon.setAttribute("size", "s");
4525
+ }
4526
+ if (this.size === "small") {
4527
+ icon.setAttribute("size", "2xs");
4003
4528
  }
4004
4529
  if (!iconColor) {
4005
4530
  icon.setAttribute("color", "inherit");
@@ -4013,10 +4538,10 @@ const _ButtonIcon = class _ButtonIcon extends PxElement {
4013
4538
  this.updateLoading();
4014
4539
  break;
4015
4540
  case "size":
4016
- this.updateSize(oldValue, newValue, sizeValues);
4541
+ this.updateSize(oldValue, newValue, buttonIconSizeValues);
4017
4542
  break;
4018
4543
  case "variant":
4019
- this.updateVariant(oldValue, newValue, variantValues);
4544
+ this.updateVariant(oldValue, newValue, buttonIconVariantValues);
4020
4545
  break;
4021
4546
  default:
4022
4547
  super.attributeChangedCallback(attrName, oldValue, newValue);
@@ -4092,7 +4617,7 @@ let ButtonIcon = _ButtonIcon;
4092
4617
  if (!customElements.get("px-button-icon")) {
4093
4618
  customElements.define("px-button-icon", ButtonIcon);
4094
4619
  }
4095
- 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)}}";
4096
4621
  const entrypointStyles = new CSSStyleSheet();
4097
4622
  entrypointStyles.replaceSync(entrypointCss);
4098
4623
  const backgroundValues = ["", "default", "action-neutral"];
@@ -4101,8 +4626,8 @@ const _Entrypoint = class _Entrypoint extends PxElement {
4101
4626
  super(entrypointStyles);
4102
4627
  this.template = () => `
4103
4628
  <px-container padding="s">
4104
- <px-hstack gap="component-compact-horizontal" align-items="center">
4105
- <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">
4106
4631
  <slot name="icon"></slot>
4107
4632
  <px-vstack gap="none" align-items="start">
4108
4633
  <slot></slot>
@@ -4156,12 +4681,12 @@ const _Entrypoint = class _Entrypoint extends PxElement {
4156
4681
  this.$el.toggleAttribute("aria-disabled");
4157
4682
  if (newValue !== null) {
4158
4683
  this.$el.setAttribute("aria-disabled", "true");
4159
- this.$container.bgColor = "action-disabled";
4684
+ this.$container.backgroundColor = "action-disabled";
4160
4685
  break;
4161
4686
  }
4162
4687
  break;
4163
4688
  case "inverted":
4164
- this.$container.bgColor = "action-neutral";
4689
+ this.$container.backgroundColor = "action-neutral";
4165
4690
  this.$container.inverted = this.inverted;
4166
4691
  break;
4167
4692
  case "target":
@@ -4199,7 +4724,7 @@ const _Entrypoint = class _Entrypoint extends PxElement {
4199
4724
  }
4200
4725
  const updateColorStyle = (value) => {
4201
4726
  if (value !== null && value !== "" && value !== "default") {
4202
- this.$container.bgColor = value;
4727
+ this.$container.backgroundColor = value;
4203
4728
  }
4204
4729
  };
4205
4730
  updateColorStyle(oldValue);
@@ -4211,10 +4736,10 @@ const _Entrypoint = class _Entrypoint extends PxElement {
4211
4736
  set disabled(value) {
4212
4737
  this.setAttribute("disabled", value);
4213
4738
  }
4214
- get bgColor() {
4739
+ get backgroundColor() {
4215
4740
  return this.getAttribute("background-color");
4216
4741
  }
4217
- set bgColor(value) {
4742
+ set backgroundColor(value) {
4218
4743
  this.setAttribute("background-color", value);
4219
4744
  }
4220
4745
  get inverted() {
@@ -4229,7 +4754,7 @@ let Entrypoint = _Entrypoint;
4229
4754
  if (!customElements.get("px-entrypoint")) {
4230
4755
  customElements.define("px-entrypoint", Entrypoint);
4231
4756
  }
4232
- 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)}}";
4233
4758
  const styleSheet = new CSSStyleSheet();
4234
4759
  const typographyStyles = new CSSStyleSheet();
4235
4760
  styleSheet.replaceSync(styles);
@@ -4316,6 +4841,7 @@ class Spinner extends HTMLElement {
4316
4841
  customElements.define("px-spinner", Spinner);
4317
4842
  export {
4318
4843
  Accordion,
4844
+ Button,
4319
4845
  ButtonIcon,
4320
4846
  Container,
4321
4847
  Entrypoint,
@@ -4355,12 +4881,17 @@ export {
4355
4881
  VStack,
4356
4882
  WithFlexAttributes,
4357
4883
  addGlobalStylesheet,
4884
+ backgroundColorValues,
4885
+ backgroundSizeValues,
4358
4886
  backgroundValues,
4359
- bgColorValues,
4360
- bgImgSizeValues,
4887
+ borderColorValues,
4361
4888
  borderRadiusValues,
4889
+ borderSideValues,
4362
4890
  borderValues,
4363
- colorValues$1 as colorValues,
4891
+ boxShadowValues,
4892
+ buttonIconSizeValues,
4893
+ buttonIconVariantValues,
4894
+ colorValues,
4364
4895
  fontsizeValues,
4365
4896
  fontweightValues,
4366
4897
  gapValues,
@@ -4371,6 +4902,7 @@ export {
4371
4902
  headingValues,
4372
4903
  iconSizeValues$1 as iconSizeValues,
4373
4904
  isFalsy,
4905
+ linkShapeValues,
4374
4906
  linkVariantValues,
4375
4907
  noBorderRadiusValues,
4376
4908
  paddingValues,
@@ -4378,10 +4910,11 @@ export {
4378
4910
  patchVariantValues,
4379
4911
  priceSizeValues,
4380
4912
  priceVariantValues,
4381
- shadowValues,
4382
- sizeValues,
4913
+ separatorColorValues,
4914
+ separatorDirectionValues,
4915
+ separatorSizeValues,
4383
4916
  tagShapeValues,
4384
4917
  tagVariantValues,
4385
4918
  textalignValues,
4386
- variantValues
4919
+ variantValues$1 as variantValues
4387
4920
  };