@proximus/lavender-header 1.0.0-alpha.2 → 1.0.0-alpha.20

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 (3) hide show
  1. package/dist/index.es.js +3258 -0
  2. package/package.json +6 -27
  3. package/dist/index.js +0 -990
package/dist/index.es.js ADDED
@@ -0,0 +1,3258 @@
1
+ import { PxElement as n, cssTokenBreakpoints as d, paddingValues as l, boxShadowValues as ht, backgroundSizeValues as ut, noBorderRadiusValues as gt, borderRadiusValues as vt, borderSideValues as xt, borderValues as ft, gradientValues as kt, backgroundColorValues as H, borderColorValues as mt, transferAccessibilityAttributes as F, checkName as x, WithExtraAttributes as p, fontweightValues as At, colorValues as yt, fontsizeValues as $t } from "@proximus/lavender-common";
2
+ import "@proximus/lavender-layout";
3
+ const Ct = ':host{display:block}.container{font-family:var(--px-font-family);background-color:var(--background-color);background-image:var(--background-image);background:var(--background-gradient);border-radius:var(--px-radius-main);box-sizing:border-box;height:100%}:host([inverted]) .container{background-color:var(--background-color-inverted);color:var(--px-color-text-neutral-inverted)}.border-none{border:none}.border-s{border:var(--px-size-border-s) solid var(--border-color)}.border-m{border:var(--px-size-border-m) solid var(--border-color)}.border-l{border:var(--px-size-border-l) solid var(--border-color)}.border-side-top{border-bottom-style:none;border-right-style:none;border-left-style:none}.border-side-right{border-top-style:none;border-bottom-style:none;border-left-style:none}.border-side-bottom{border-top-style:none;border-right-style:none;border-left-style:none}.border-side-left{border-top-style:none;border-right-style:none;border-bottom-style:none}.border-side-block{border-inline-style:none}.border-side-inline{border-block-style:none}:host([inverted]) .border-s,:host([inverted]) .border-m,:host([inverted]) .border-l{border-color:var(--border-color-inverted)}.border-radius-main{border-radius:var(--px-radius-main)}.border-radius-pill{border-radius:var(--px-radius-pill)}.no-border-radius-top{border-top-left-radius:var(--px-radius-none);border-top-right-radius:var(--px-radius-none)}.no-border-radius-right{border-top-right-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-bottom{border-bottom-left-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-left{border-top-left-radius:var(--px-radius-none);border-bottom-left-radius:var(--px-radius-none)}.no-border-radius-all,.border-radius-none{border-radius:var(--px-radius-none)}.bgimg{background-repeat:no-repeat}.background-size-cover{background-size:cover;background-position:center center}.background-size-contain{background-size:contain}.box-shadow-none{box-shadow:none}.box-shadow-s{box-shadow:0 1px 2px #2525251f}.box-shadow-m{box-shadow:0 4px 6px -1px #25252514}.box-shadow-l{box-shadow:0 10px 15px -3px #25252514}.box-shadow-xl{box-shadow:0 20px 25px -5px #25252514}.anchored{position:relative}::slotted([slot="anchor-right"]),::slotted([slot="anchor-left"]),::slotted([slot="anchor-full"]){position:absolute;top:0}::slotted([slot="anchor-right"]),::slotted([slot="anchor-left"]){transform:translateY(-50%);z-index:2}::slotted([slot="anchor-right"]){right:var( --container-padding-right, var(--container-padding-inline, var(--container-padding)) )}::slotted([slot="anchor-left"]){left:var( --container-padding-left, var(--container-padding-inline, var(--container-padding)) )}::slotted([slot="anchor-full"]){transform:translateY(-100%);right:0;left:0;text-align:center;z-index:1}@media only screen and (max-width: 47.938em){.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-size-border-s) * -1);left:calc(var(--px-size-border-s) * -1)}.border-m ::slotted([slot="anchor-full"]){right:calc(var(--px-size-border-m) * -1);left:calc(var(--px-size-border-m) * -1)}.border-l ::slotted([slot="anchor-full"]){right:calc(var(--px-size-border-l) * -1);left:calc(var(--px-size-border-l) * -1)}@media only screen and (min-width: 48em) and (max-width: 64em){.container{background-color:var(--background-color--tablet, var(--background-color));background-image:var( --background-image--tablet, var( --background-image, var(--background-gradient--tablet, var(--background-gradient)) ) )}:host([inverted]) .container{background-color:var( --background-color-inverted--tablet, var(--background-color-inverted) )}.no-border-radius-top--tablet{border-top-left-radius:var(--px-radius-none);border-top-right-radius:var(--px-radius-none)}.no-border-radius-right--tablet{border-top-right-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-bottom--tablet{border-bottom-left-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-left--tablet{border-top-left-radius:var(--px-radius-none);border-bottom-left-radius:var(--px-radius-none)}.no-border-radius-all--tablet{border-radius:var(--px-radius-none)}.border-side-top--tablet{border-top-style:solid;border-right-style:none;border-bottom-style:none;border-left-style:none}.border-side-right--tablet{border-top-style:none;border-right-style:solid;border-bottom-style:none;border-left-style:none}.border-side-bottom--tablet{border-top-style:none;border-right-style:none;border-bottom-style:solid;border-left-style:none}.border-side-left--tablet{border-top-style:none;border-right-style:none;border-bottom-style:none;border-left-style:solid}.border-side-block--tablet{border-inline-style:none;border-block-style:solid}.border-side-inline--tablet{border-block-style:none;border-inline-style:solid}::slotted([slot="anchor-right"]){right:var( --container-padding-right, var(--container-padding-inline, var(--container-padding)) )}::slotted([slot="anchor-left"]){left:var( --container-padding-left, var(--container-padding-inline, var(--container-padding)) )}}@media only screen and (min-width: 64.0625em){.container{background-color:var(--background-color--laptop, var(--background-color));background-image:var( --background-image--laptop, var( --background-image, var(--background-gradient--laptop, var(--background-gradient)) ) )}:host([inverted]) .container{background-color:var( --background-color-inverted--laptop, var(--background-color-inverted) )}.no-border-radius-top--laptop{border-top-left-radius:var(--px-radius-none);border-top-right-radius:var(--px-radius-none)}.no-border-radius-right--laptop{border-top-right-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-bottom--laptop{border-bottom-left-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-left--laptop{border-top-left-radius:var(--px-radius-none);border-bottom-left-radius:var(--px-radius-none)}.no-border-radius-all--laptop{border-radius:var(--px-radius-none)}::slotted([slot="anchor-right"]){right:var( --container-padding-right, var(--container-padding-inline, var(--container-padding)) )}::slotted([slot="anchor-left"]){left:var( --container-padding-left, var(--container-padding-inline, var(--container-padding)) )}.border-side-top--laptop{border-top-style:solid;border-right-style:none;border-bottom-style:none;border-left-style:none}.border-side-right--laptop{border-top-style:none;border-right-style:solid;border-bottom-style:none;border-left-style:none}.border-side-bottom--laptop{border-top-style:none;border-right-style:none;border-bottom-style:solid;border-left-style:none}.border-side-left--laptop{border-top-style:none;border-right-style:none;border-bottom-style:none;border-left-style:solid}.border-side-block--laptop{border-inline-style:none;border-block-style:solid}.border-side-inline--laptop{border-block-style:none;border-inline-style:solid}}', O = new CSSStyleSheet();
4
+ O.replaceSync(Ct);
5
+ const wt = ["anchor-right", "anchor-left", "anchor-full"], c = (a, t, e) => `:host([${a}${e ? `--${e}` : ""}='${t}']) .container`, b = "px-padding", L = class L extends n {
6
+ constructor() {
7
+ super(
8
+ O,
9
+ d(
10
+ "padding",
11
+ c,
12
+ l,
13
+ b,
14
+ "--container-padding"
15
+ ),
16
+ d(
17
+ "padding-inline",
18
+ c,
19
+ l,
20
+ b
21
+ ),
22
+ d(
23
+ "padding-block",
24
+ c,
25
+ l,
26
+ b
27
+ ),
28
+ d(
29
+ "padding-top",
30
+ c,
31
+ l,
32
+ b
33
+ ),
34
+ d(
35
+ "padding-right",
36
+ c,
37
+ l,
38
+ b,
39
+ "--container-padding-right"
40
+ ),
41
+ d(
42
+ "padding-bottom",
43
+ c,
44
+ l,
45
+ b
46
+ ),
47
+ d(
48
+ "padding-left",
49
+ c,
50
+ l,
51
+ b,
52
+ "--container-padding-left"
53
+ )
54
+ ), this.template = () => `<div class="container">
55
+ <slot name="anchor-left"></slot>
56
+ <slot name="anchor-right"></slot>
57
+ <slot name="anchor-full"></slot>
58
+ <slot></slot>
59
+ </div>`, this.shadowRoot.innerHTML = this.template();
60
+ }
61
+ static get observedAttributes() {
62
+ return [
63
+ ...super.observedAttributes,
64
+ "border",
65
+ "border-color",
66
+ "border-side",
67
+ "border-side--mobile",
68
+ "border-side--tablet",
69
+ "border-side--laptop",
70
+ "border-radius",
71
+ "no-border-radius",
72
+ "no-border-radius--mobile",
73
+ "no-border-radius--tablet",
74
+ "no-border-radius--laptop",
75
+ "background-color",
76
+ "background-color--mobile",
77
+ "background-color--tablet",
78
+ "background-color--laptop",
79
+ "background-gradient",
80
+ "background-gradient--mobile",
81
+ "background-gradient--tablet",
82
+ "background-gradient--laptop",
83
+ "background-image",
84
+ "background-image--mobile",
85
+ "background-image--tablet",
86
+ "background-image--laptop",
87
+ "background-size",
88
+ "background-position",
89
+ "box-shadow",
90
+ "inverted"
91
+ ];
92
+ }
93
+ connectedCallback() {
94
+ super.connectedCallback(), this.padding || (this.padding = "m"), this.backgroundColor || (this.backgroundColor = "surface-light"), this.borderColor || (this.borderColor = "main");
95
+ const t = this.querySelector("[slot]");
96
+ t && wt.includes(t.getAttribute("slot")) && this.shadowRoot.querySelector(".container").classList.toggle("anchored");
97
+ }
98
+ attributeChangedCallback(t, e, r) {
99
+ if (e !== r)
100
+ switch (t) {
101
+ case "border":
102
+ this.updateAttribute(t, e, r, ft);
103
+ break;
104
+ case "border-color":
105
+ this.updateBorderColor(t, r);
106
+ break;
107
+ case "border-side":
108
+ case "border-side--mobile":
109
+ case "border-side--tablet":
110
+ case "border-side--laptop":
111
+ this.updateAttribute(t, e, r, xt);
112
+ break;
113
+ case "border-radius":
114
+ this.updateAttribute(
115
+ t,
116
+ e,
117
+ r,
118
+ vt
119
+ );
120
+ break;
121
+ case "no-border-radius":
122
+ case "no-border-radius--mobile":
123
+ case "no-border-radius--tablet":
124
+ case "no-border-radius--laptop":
125
+ this.updateNoBorderRadius(
126
+ t,
127
+ e,
128
+ r,
129
+ gt
130
+ );
131
+ break;
132
+ case "background-color":
133
+ case "background-color--mobile":
134
+ case "background-color--tablet":
135
+ case "background-color--laptop":
136
+ this.updateBackgroundColor(t, r);
137
+ break;
138
+ case "background-gradient":
139
+ case "background-gradient--mobile":
140
+ case "background-gradient--tablet":
141
+ case "background-gradient--laptop":
142
+ this.updateGradient(t, r);
143
+ break;
144
+ case "background-size":
145
+ this.updateAttribute(
146
+ t,
147
+ e,
148
+ r,
149
+ ut
150
+ );
151
+ break;
152
+ case "background-image":
153
+ case "background-image--mobile":
154
+ case "background-image--tablet":
155
+ case "background-image--laptop":
156
+ this.updateBackgroundImg(t, r);
157
+ break;
158
+ case "background-position":
159
+ r !== null && r !== "" && (this.$el.style.backgroundPosition = r);
160
+ break;
161
+ case "box-shadow":
162
+ this.updateAttribute(t, e, r, ht);
163
+ break;
164
+ default:
165
+ super.attributeChangedCallback(t, e, r);
166
+ break;
167
+ }
168
+ }
169
+ updateBackgroundImg(t, e) {
170
+ this.$el.style.setProperty(`--${t}`, `url("${e}")`);
171
+ }
172
+ updateGradient(t, e) {
173
+ if (this.checkName(kt, e)) {
174
+ const r = this.splitAttrNameFromBreakpoint(t);
175
+ t = r.attrName;
176
+ const o = r.breakpoint;
177
+ this.$el.style.setProperty(
178
+ `--${t}${o}`,
179
+ `linear-gradient(var(--px-color-background-gradient-${e}))`
180
+ );
181
+ } else
182
+ console.error(`${e} is not an allowed background-gradient value`);
183
+ }
184
+ updateBackgroundColor(t, e) {
185
+ const r = e.startsWith("surface-");
186
+ if (this.checkName(H, e)) {
187
+ const o = this.splitAttrNameFromBreakpoint(t), i = o.breakpoint;
188
+ this.$el.style.setProperty(
189
+ `--${o.attrName}${i}`,
190
+ `var(--px-color-background-${e}${r ? "" : "-default"})`
191
+ ), this.$el.style.setProperty(
192
+ `--${o.attrName}-inverted${i}`,
193
+ `var(--px-color-background-${e}${r ? "" : "-inverted"})`
194
+ );
195
+ } else
196
+ console.error(`${e} is not an allowed ${t} value`);
197
+ }
198
+ updateBorderColor(t, e) {
199
+ this.checkName(mt, e) ? (this.$el.style.setProperty(
200
+ `--${t}`,
201
+ `var(--px-color-border-${e}-default)`
202
+ ), this.$el.style.setProperty(
203
+ `--${t}-inverted`,
204
+ `var(--px-color-border-${e}-inverted)`
205
+ )) : console.error(`${e} is not an allowed ${t} value`);
206
+ }
207
+ updateNoBorderRadius(t, e, r, o) {
208
+ if (!this.checkName(o, r))
209
+ console.error(`${r} is not an allowed ${t} value`);
210
+ else {
211
+ const i = this.splitAttrNameFromBreakpoint(t), s = i.breakpoint;
212
+ e !== null && e !== "" && this.$el.classList.toggle(
213
+ `${i.attrName}-${e}${s}`
214
+ ), r !== null && r !== "" && this.$el.classList.toggle(
215
+ `${i.attrName}-${r}${s}`
216
+ );
217
+ }
218
+ }
219
+ updateAttribute(t, e, r, o) {
220
+ if (!this.checkName(o, r))
221
+ console.error(`${r} is not an allowed ${t} value`);
222
+ else {
223
+ const i = this.splitAttrNameFromBreakpoint(t), s = i.breakpoint;
224
+ e !== null && e !== "" && this.$el.classList.toggle(
225
+ `${i.attrName}-${e}${s}`
226
+ ), r !== null && r !== "" && this.$el.classList.toggle(
227
+ `${i.attrName}-${r}${s}`
228
+ );
229
+ }
230
+ }
231
+ splitAttrNameFromBreakpoint(t) {
232
+ let e = "";
233
+ if (["--mobile", "--tablet", "--laptop"].some(
234
+ (r) => t.includes(r)
235
+ )) {
236
+ const r = t.split("--");
237
+ t = r[0], e = `--${r[1]}`;
238
+ }
239
+ return { attrName: t, breakpoint: e };
240
+ }
241
+ checkName(t, e) {
242
+ return t.includes(e);
243
+ }
244
+ get padding() {
245
+ return this.getAttribute("padding");
246
+ }
247
+ set padding(t) {
248
+ this.setAttribute("padding", t);
249
+ }
250
+ get paddingBlock() {
251
+ return this.getAttribute("padding-block");
252
+ }
253
+ set paddingBlock(t) {
254
+ this.setAttribute("padding-block", t);
255
+ }
256
+ get paddingInline() {
257
+ return this.getAttribute("padding-inline");
258
+ }
259
+ set paddingInline(t) {
260
+ this.setAttribute("padding-inline", t);
261
+ }
262
+ get paddingTop() {
263
+ return this.getAttribute("padding-top");
264
+ }
265
+ set paddingTop(t) {
266
+ this.setAttribute("padding-top", t);
267
+ }
268
+ get paddingRight() {
269
+ return this.getAttribute("padding-right");
270
+ }
271
+ set paddingRight(t) {
272
+ this.setAttribute("padding-right", t);
273
+ }
274
+ get paddingBottom() {
275
+ return this.getAttribute("padding-bottom");
276
+ }
277
+ set paddingBottom(t) {
278
+ this.setAttribute("padding-bottom", t);
279
+ }
280
+ get paddingLeft() {
281
+ return this.getAttribute("padding-left");
282
+ }
283
+ set paddingLeft(t) {
284
+ this.setAttribute("padding-left", t);
285
+ }
286
+ get paddingMobile() {
287
+ return this.getAttribute("padding--mobile");
288
+ }
289
+ set paddingMobile(t) {
290
+ this.setAttribute("padding--mobile", t);
291
+ }
292
+ get paddingBlockMobile() {
293
+ return this.getAttribute("padding-block--mobile");
294
+ }
295
+ set paddingBlockMobile(t) {
296
+ this.setAttribute("padding-block--mobile", t);
297
+ }
298
+ get paddingInlineMobile() {
299
+ return this.getAttribute("padding-inline--mobile");
300
+ }
301
+ set paddingInlineMobile(t) {
302
+ this.setAttribute("padding-inline--mobile", t);
303
+ }
304
+ get paddingTopMobile() {
305
+ return this.getAttribute("padding-top--mobile");
306
+ }
307
+ set paddingTopMobile(t) {
308
+ this.setAttribute("padding-top--mobile", t);
309
+ }
310
+ get paddingRightMobile() {
311
+ return this.getAttribute("padding-right--mobile");
312
+ }
313
+ set paddingRightMobile(t) {
314
+ this.setAttribute("padding-right--mobile", t);
315
+ }
316
+ get paddingBottomMobile() {
317
+ return this.getAttribute("padding-bottom--mobile");
318
+ }
319
+ set paddingBottomMobile(t) {
320
+ this.setAttribute("padding-bottom--mobile", t);
321
+ }
322
+ get paddingLeftMobile() {
323
+ return this.getAttribute("padding-left--mobile");
324
+ }
325
+ set paddingLeftMobile(t) {
326
+ this.setAttribute("padding-left--mobile", t);
327
+ }
328
+ get paddingTablet() {
329
+ return this.getAttribute("padding--tablet");
330
+ }
331
+ set paddingTablet(t) {
332
+ this.setAttribute("padding--tablet", t);
333
+ }
334
+ get paddingBlockTablet() {
335
+ return this.getAttribute("padding-block--tablet");
336
+ }
337
+ set paddingBlockTablet(t) {
338
+ this.setAttribute("padding-block--tablet", t);
339
+ }
340
+ get paddingInlineTablet() {
341
+ return this.getAttribute("padding-inline--tablet");
342
+ }
343
+ set paddingInlineTablet(t) {
344
+ this.setAttribute("padding-inline--tablet", t);
345
+ }
346
+ get paddingTopTablet() {
347
+ return this.getAttribute("padding-top--tablet");
348
+ }
349
+ set paddingTopTablet(t) {
350
+ this.setAttribute("padding-top--tablet", t);
351
+ }
352
+ get paddingRightTablet() {
353
+ return this.getAttribute("padding-right--tablet");
354
+ }
355
+ set paddingRightTablet(t) {
356
+ this.setAttribute("padding-right--tablet", t);
357
+ }
358
+ get paddingBottomTablet() {
359
+ return this.getAttribute("padding-bottom--tablet");
360
+ }
361
+ set paddingBottomTablet(t) {
362
+ this.setAttribute("padding-bottom--tablet", t);
363
+ }
364
+ get paddingLeftTablet() {
365
+ return this.getAttribute("padding-left--tablet");
366
+ }
367
+ set paddingLeftTablet(t) {
368
+ this.setAttribute("padding-left--tablet", t);
369
+ }
370
+ get paddingLaptop() {
371
+ return this.getAttribute("padding--laptop");
372
+ }
373
+ set paddingLaptop(t) {
374
+ this.setAttribute("padding--laptop", t);
375
+ }
376
+ get paddingBlockLaptop() {
377
+ return this.getAttribute("padding-block--laptop");
378
+ }
379
+ set paddingBlockLaptop(t) {
380
+ this.setAttribute("padding-block--laptop", t);
381
+ }
382
+ get paddingInlineLaptop() {
383
+ return this.getAttribute("padding-inline--laptop");
384
+ }
385
+ set paddingInlineLaptop(t) {
386
+ this.setAttribute("padding-inline--laptop", t);
387
+ }
388
+ get paddingTopLaptop() {
389
+ return this.getAttribute("padding-top--laptop");
390
+ }
391
+ set paddingTopLaptop(t) {
392
+ this.setAttribute("padding-top--laptop", t);
393
+ }
394
+ get paddingRightLaptop() {
395
+ return this.getAttribute("padding-right--laptop");
396
+ }
397
+ set paddingRightLaptop(t) {
398
+ this.setAttribute("padding-right--laptop", t);
399
+ }
400
+ get paddingBottomLaptop() {
401
+ return this.getAttribute("padding-bottom--laptop");
402
+ }
403
+ set paddingBottomLaptop(t) {
404
+ this.setAttribute("padding-bottom--laptop", t);
405
+ }
406
+ get paddingLeftLaptop() {
407
+ return this.getAttribute("padding-left--laptop");
408
+ }
409
+ set paddingLeftLaptop(t) {
410
+ this.setAttribute("padding-left--laptop", t);
411
+ }
412
+ get border() {
413
+ return this.getAttribute("border");
414
+ }
415
+ set border(t) {
416
+ this.setAttribute("border", t);
417
+ }
418
+ get borderColor() {
419
+ return this.getAttribute("border-color");
420
+ }
421
+ set borderColor(t) {
422
+ this.setAttribute("border-color", t);
423
+ }
424
+ get borderSide() {
425
+ return this.getAttribute("border-side");
426
+ }
427
+ set borderSide(t) {
428
+ this.setAttribute("border-side", t);
429
+ }
430
+ get borderSideMobile() {
431
+ return this.getAttribute("border-side--mobile");
432
+ }
433
+ set borderSideMobile(t) {
434
+ this.setAttribute("border-side--mobile", t);
435
+ }
436
+ get borderSideTablet() {
437
+ return this.getAttribute("border-side--tablet");
438
+ }
439
+ set borderSideTablet(t) {
440
+ this.setAttribute("border-side--tablet", t);
441
+ }
442
+ get borderSideLaptop() {
443
+ return this.getAttribute("border-side--laptop");
444
+ }
445
+ set borderSideLaptop(t) {
446
+ this.setAttribute("border-side--laptop", t);
447
+ }
448
+ get borderRadius() {
449
+ return this.getAttribute("border-radius");
450
+ }
451
+ set borderRadius(t) {
452
+ this.setAttribute("border-radius", t);
453
+ }
454
+ get noBorderRadius() {
455
+ return this.getAttribute("no-border-radius");
456
+ }
457
+ set noBorderRadius(t) {
458
+ this.setAttribute("no-border-radius", t);
459
+ }
460
+ get noBorderRadiusMobile() {
461
+ return this.getAttribute("no-border-radius--mobile");
462
+ }
463
+ set noBorderRadiusMobile(t) {
464
+ this.setAttribute("no-border-radius--mobile", t);
465
+ }
466
+ get noBorderRadiusTablet() {
467
+ return this.getAttribute("no-border-radius--tablet");
468
+ }
469
+ set noBorderRadiusTablet(t) {
470
+ this.setAttribute("no-border-radius--tablet", t);
471
+ }
472
+ get noBorderRadiusLaptop() {
473
+ return this.getAttribute("no-border-radius--laptop");
474
+ }
475
+ set noBorderRadiusLaptop(t) {
476
+ this.setAttribute("no-border-radius--laptop", t);
477
+ }
478
+ get backgroundColor() {
479
+ return this.getAttribute("background-color");
480
+ }
481
+ set backgroundColor(t) {
482
+ this.setAttribute("background-color", t);
483
+ }
484
+ get backgroundColorMobile() {
485
+ return this.getAttribute("background-color--mobile");
486
+ }
487
+ set backgroundColorMobile(t) {
488
+ this.setAttribute("background-color--mobile", t);
489
+ }
490
+ get backgroundColorTablet() {
491
+ return this.getAttribute("background-color--tablet");
492
+ }
493
+ set backgroundColorTablet(t) {
494
+ this.setAttribute("background-color--tablet", t);
495
+ }
496
+ get backgroundColorLaptop() {
497
+ return this.getAttribute("background-color--laptop");
498
+ }
499
+ set backgroundColorLaptop(t) {
500
+ this.setAttribute("background-color--laptop", t);
501
+ }
502
+ get gradient() {
503
+ return this.getAttribute("background-gradient");
504
+ }
505
+ set gradient(t) {
506
+ this.setAttribute("background-gradient", t);
507
+ }
508
+ get gradientMobile() {
509
+ return this.getAttribute("background-gradient--mobile");
510
+ }
511
+ set gradientMobile(t) {
512
+ this.setAttribute("background-gradient--mobile", t);
513
+ }
514
+ get gradientTablet() {
515
+ return this.getAttribute("background-gradient--tablet");
516
+ }
517
+ set gradientTablet(t) {
518
+ this.setAttribute("background-gradient--tablet", t);
519
+ }
520
+ get gradientLaptop() {
521
+ return this.getAttribute("background-gradient--laptop");
522
+ }
523
+ set gradientLaptop(t) {
524
+ this.setAttribute("background-gradient--laptop", t);
525
+ }
526
+ get backgroundImage() {
527
+ return this.getAttribute("background-image");
528
+ }
529
+ set backgroundImage(t) {
530
+ this.setAttribute("background-image", t);
531
+ }
532
+ get backgroundImageMobile() {
533
+ return this.getAttribute("background-image--mobile");
534
+ }
535
+ set backgroundImageMobile(t) {
536
+ this.setAttribute("background-image--mobile", t);
537
+ }
538
+ get backgroundImageTablet() {
539
+ return this.getAttribute("background-image--tablet");
540
+ }
541
+ set backgroundImageTablet(t) {
542
+ this.setAttribute("background-image--tablet", t);
543
+ }
544
+ get backgroundImageLaptop() {
545
+ return this.getAttribute("background-image--laptop");
546
+ }
547
+ set backgroundImageLaptop(t) {
548
+ this.setAttribute("background-image--laptop", t);
549
+ }
550
+ get backgroundSize() {
551
+ return this.getAttribute("background-size");
552
+ }
553
+ set backgroundSize(t) {
554
+ this.setAttribute("background-size", t);
555
+ }
556
+ get backgroundPosition() {
557
+ return this.getAttribute("background-position");
558
+ }
559
+ set backgroundPosition(t) {
560
+ this.setAttribute("background-position", t);
561
+ }
562
+ get boxShadow() {
563
+ return this.getAttribute("box-shadow");
564
+ }
565
+ set boxShadow(t) {
566
+ this.setAttribute("box-shadow", t);
567
+ }
568
+ get inverted() {
569
+ return this.getAttribute("inverted");
570
+ }
571
+ set inverted(t) {
572
+ this.setAttribute("inverted", t);
573
+ }
574
+ };
575
+ L.nativeName = "div";
576
+ let A = L;
577
+ customElements.get("px-container") || customElements.define("px-container", A);
578
+ const Z = `.btn{width:var(--button-extended--mobile, var(--button-extended, auto));display:inline-flex;vertical-align:middle;align-items:center;justify-content:center;font-family:var(--px-font-family);font-size:var(--px-text-size-label-m-mobile);line-height:var(--px-font-line-height-m);font-weight:var(--px-font-weight-title);gap:var(--px-spacing-2xs-mobile);cursor:pointer;text-decoration:none;--btn-transition: all .2s ease-in-out 0s;transition:var(--btn-transition);border:var(--px-size-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-state-hover-default)}.btn:focus-visible:not([disabled],[aria-disabled=true]){outline-offset:var(--px-focus-offset-mobile);outline:var(--px-focus-outline-mobile) solid var(--px-color-border-focus-outline-default)}.btn:active{transform:scale(.95)}.btn[disabled],.btn[aria-disabled=true]{cursor:default;pointer-events:none}.btn.loading{cursor:inherit}.btn.loading ::slotted(px-spinner){line-height:0}.btn:not(.secondary,.tertiary,.patch,.actionable-tag,.header-dropdown){color:var(--px-color-text-brand-inverted);background:var(--px-color-background-container-primary-default);min-height:var(--px-spacing-l-mobile);padding:var(--px-padding-xs-mobile) var(--px-padding-m-mobile);border-radius:var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-big) var(--px-radius-button-small)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag,.header-dropdown) ::slotted([slot="after"]){margin-right:calc(var(--px-padding-xs-mobile) * -1)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag,.header-dropdown) ::slotted([slot="before"]){margin-left:calc(var(--px-padding-xs-mobile) * -1)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag,.header-dropdown):hover:not([disabled],[aria-disabled=true],.loading){color:var(--px-color-text-brand-default);background:var(--px-color-background-state-hover-bordered-default)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag,.header-dropdown)[disabled],.btn:not(.secondary,.tertiary,.patch,.actionable-tag,.header-dropdown)[aria-disabled=true]{background:var(--px-color-background-state-disabled-default);color:var(--px-color-text-state-disabled-default)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag,.header-dropdown).loading{background:var(--px-color-background-state-disabled-default);color:var(--px-color-text-brand-default);border-color:transparent}.btn:not(.secondary,.tertiary,.patch,.actionable-tag,.header-dropdown).alternative{border-radius:var(--px-radius-button-small)}.btn.secondary{color:var(--px-color-text-brand-default);background:var(--px-color-background-container-secondary-default);min-height:var(--px-spacing-l-mobile);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-color-text-brand-default);background:var(--px-color-background-state-hover-bordered-default)}.btn.secondary[disabled],.btn.secondary[aria-disabled=true]{background:var(--px-color-background-state-disabled-default);color:var(--px-color-text-state-disabled-default)}.btn.secondary.loading{background:var(--px-color-background-state-disabled-default);color:var(--px-color-text-brand-default);border-color:transparent}.btn.secondary.alternative{border-radius:var(--px-radius-button-small)}.btn.tertiary{background:none;color:var(--px-color-text-brand-default);border-radius:var(--px-radius-pill);border:var(--px-size-border-m) solid transparent;padding:var(--px-padding-2xs-mobile) 0;gap:var(--px-spacing-xs-mobile)}.btn.tertiary ::slotted(px-icon){display:flex;align-items:center;justify-content:center;width:var(--px-size-icon-xs);height:var(--px-size-icon-xs);padding:4px;border-radius:var(--px-radius-pill);background:var(--px-color-background-container-secondary-default);transition:var(--btn-transition)}.btn.tertiary:hover:not([disabled],[aria-disabled=true],.loading){padding:var(--px-padding-2xs-mobile) var(--px-padding-s-mobile)}.btn.tertiary:hover:not([disabled],[aria-disabled=true],.loading) ::slotted(px-icon){background:transparent;margin:0 -8px;width:inherit;height:inherit}.btn.tertiary[disabled],.btn.tertiary[aria-disabled=true]{color:var(--px-color-text-state-disabled-default)}.btn.tertiary[disabled] ::slotted(px-icon),.btn.tertiary[aria-disabled=true] ::slotted(px-icon){background:var(--px-color-background-state-disabled-default)}.btn.tertiary.loading{color:var(--px-color-text-brand-default);border-color:transparent}.btn.tertiary.loading ::slotted(px-spinner){display:flex;align-items:center;justify-content:center;width:var(--px-size-icon-xs);height:var(--px-size-icon-xs);padding:4px;border-radius:var(--px-radius-pill);background:var(--px-color-background-state-disabled-default)}.btn.patch{display:inline-flex}.btn.patch:hover:not([disabled],[aria-disabled=true],.loading){color:var(--px-color-text-brand-default);background:var(--px-color-background-state-hover-bordered-default)}.btn.patch[disabled],.btn.patch[aria-disabled=true]{background:var(--px-color-background-state-disabled-default);color:var(--px-color-text-state-disabled-default)}.btn.actionable-tag{background:var(--px-color-background-container-default-inverted);color:var(--px-color-text-neutral-default);padding:var(--px-padding-2xs-mobile) var(--px-padding-xs-mobile);gap:var(--px-spacing-xs-mobile);border-radius:var(--px-radius-pill);border:var(--px-size-border-m) solid var(--px-color-border-neutral-default)}.btn.actionable-tag:hover:not([disabled],[aria-disabled=true],.loading){color:var(--px-color-text-brand-default);background:var(--px-color-background-state-hover-bordered-default)}.btn.actionable-tag:active:not([disabled],[aria-disabled=true],.loading){background:var(--px-color-background-state-active-default);color:var(--px-color-text-state-active-default);border-color:var(--px-color-border-none)}.btn.actionable-tag[disabled],.btn.actionable-tag[aria-disabled=true]{background:var(--px-color-background-state-disabled-default);color:var(--px-color-text-state-disabled-default);border-color:var(--px-color-border-none)}.btn.header-dropdown{display:flex;justify-content:space-between;width:100%;color:var(--px-color-text-neutral-default);font-weight:var(--px-font-weight-body);font-size:var(--px-text-size-label-l-mobile);border:var(--px-size-border-m) solid var(--px-color-border-neutral-default);padding:var(--px-padding-xs-mobile) var(--px-padding-s-mobile);border-radius:var(--px-radius-main);background-color:var(--px-color-background-container-default-default);touch-action:manipulation}.btn.header-dropdown:after{display:inline-block;content:"";width:var(--px-size-icon-xs);height:var(--px-size-icon-xs);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:cover;mask-size:cover;-webkit-mask-position:50% 50%;mask-position:50% 50%;-webkit-mask-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='M15.4753 7.37808C15.1565 7.06426 14.6396 7.06426 14.3208 7.37808L10.0001 11.6313L5.67934 7.37808C5.36055 7.06426 4.84368 7.06426 4.52488 7.37808C4.20608 7.69189 4.20608 8.20069 4.52488 8.5145L9.42284 13.3359C9.74163 13.6497 10.2585 13.6497 10.5773 13.3359L15.4753 8.5145C15.7941 8.20069 15.7941 7.69189 15.4753 7.37808Z' fill='%235C2D91'/%3E%3C/svg%3E");mask-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='M15.4753 7.37808C15.1565 7.06426 14.6396 7.06426 14.3208 7.37808L10.0001 11.6313L5.67934 7.37808C5.36055 7.06426 4.84368 7.06426 4.52488 7.37808C4.20608 7.69189 4.20608 8.20069 4.52488 8.5145L9.42284 13.3359C9.74163 13.6497 10.2585 13.6497 10.5773 13.3359L15.4753 8.5145C15.7941 8.20069 15.7941 7.69189 15.4753 7.37808Z' fill='%235C2D91'/%3E%3C/svg%3E");background-color:currentColor;color:var(--px-color-icon-brand-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-text-state-disabled-default)}:host([inverted]) .btn:hover:not([disabled],[aria-disabled=true],.loading){border-color:var(--px-color-border-state-hover-inverted)}:host([inverted]) .btn:focus-visible:not([disabled],[aria-disabled=true]){outline-color:var(--px-color-border-focus-outline-inverted)}:host([inverted]) .btn:not(.secondary,.tertiary,.patch,.actionable-tag){color:var(--px-color-text-brand-default);background:var(--px-color-background-container-primary-inverted)}:host([inverted]) .btn:not(.secondary,.tertiary,.patch,.actionable-tag):hover:not([disabled],[aria-disabled=true],.loading){color:var(--px-color-text-brand-inverted);background:var(--px-color-background-container-default-inverted)}:host([inverted]) .btn:not(.secondary,.tertiary,.patch,.actionable-tag)[disabled],:host([inverted]) .btn:not(.secondary,.tertiary,.patch,.actionable-tag)[aria-disabled=true]{background:var(--px-color-background-state-disabled-inverted);color:var(--px-color-text-state-disabled-inverted)}:host([inverted]) .btn:not(.secondary,.tertiary,.patch,.actionable-tag).loading{background:var(--px-color-background-state-disabled-inverted);color:var(--px-color-text-brand-inverted);border-color:transparent}:host([inverted]) .btn.secondary{color:var(--px-color-text-brand-inverted);background:var(--px-color-background-container-secondary-inverted)}:host([inverted]) .btn.secondary:hover:not([disabled],[aria-disabled=true],.loading){color:var(--px-color-text-brand-inverted);background:var(--px-color-background-container-default-inverted)}:host([inverted]) .btn.secondary[disabled],:host([inverted]) .btn.secondary[aria-disabled=true]{background:var(--px-color-background-state-disabled-inverted);color:var(--px-color-text-state-disabled-inverted)}:host([inverted]) .btn.secondary.loading{background:var(--px-color-background-state-disabled-inverted);color:var(--px-color-text-brand-inverted);border-color:transparent}:host([inverted]) .btn.tertiary{color:var(--px-color-text-brand-inverted)}:host([inverted]) .btn.tertiary ::slotted(px-icon){background:var(--px-color-background-container-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-text-state-disabled-inverted)}:host([inverted]) .btn.tertiary[disabled] ::slotted(px-icon),:host([inverted]) .btn.tertiary[aria-disabled=true] ::slotted(px-icon){background:var(--px-color-background-state-disabled-inverted)}:host([inverted]) .btn.tertiary.loading{color:var(--px-color-text-brand-inverted)}:host([inverted]) .btn.tertiary.loading ::slotted(px-spinner){background:var(--px-color-background-state-disabled-inverted)}:host([inverted]) .btn.patch:hover:not([disabled],[aria-disabled=true],.loading){color:var(--px-color-text-brand-inverted);background:var(--px-color-background-state-hover-bordered-inverted)}:host([inverted]) .btn.patch[disabled],:host([inverted]) .btn.patch[aria-disabled=true]{background:var(--px-color-background-state-disabled-inverted);color:var(--px-color-text-state-disabled-inverted)}:host([inverted]) .btn.actionable-tag{background:var(--px-color-background-container-default-default);color:var(--px-color-text-brand-inverted);border-color:var(--px-color-border-neutral-inverted)}:host([inverted]) .btn.actionable-tag:hover:not([disabled],[aria-disabled=true],.loading){color:var(--px-color-text-brand-inverted);background:var(--px-color-background-container-default-inverted);border-color:var(--px-color-border-state-hover-inverted)}:host([inverted]) .btn.actionable-tag:active:not([disabled],[aria-disabled=true],.loading){background:var(--px-color-background-state-active-inverted);color:var(--px-color-text-state-active-default);border-color:var(--px-color-border-none)}:host([inverted]) .btn.actionable-tag[disabled],:host([inverted]) .btn.actionable-tag[aria-disabled=true]{background:var(--px-color-background-state-disabled-inverted);color:var(--px-color-text-state-disabled-inverted);border-color:var(--px-color-border-none)}:host([inverted]) button.link[disabled],:host([inverted]) button.link[aria-disabled=true]{color:var(--px-color-text-state-disabled-inverted)}@media only screen and (min-width: 48em){.btn{width:var(--button-extended--desktop, var(--button-extended, auto));font-size:var(--px-text-size-label-m-desktop);gap:var(--px-spacing-2xs-desktop)}.btn:focus-visible:not([disabled],[aria-disabled=true]){outline-offset:var(--px-focus-offset-desktop);outline-width:var(--px-focus-outline-desktop)}.btn.actionable-tag{padding:var(--px-padding-2xs-desktop) var(--px-padding-xs-desktop);gap:var(--px-spacing-xs-desktop)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag,.header-dropdown){padding:var(--px-padding-xs-desktop) var(--px-padding-m-desktop)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag,.header-dropdown) ::slotted([slot="after"]){margin-right:calc(var(--px-padding-xs-desktop) * -1)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag,.header-dropdown) ::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-xs-desktop)}.btn.tertiary ::slotted(px-icon){width:var(--px-size-icon-xs);height:var(--px-size-icon-xs)}.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-size-icon-xs);height:var(--px-size-icon-xs)}.btn.header-dropdown{justify-content:flex-start;align-items:center;width:inherit;color:var(--px-color-text-brand-default);font-weight:var(--px-font-weight-title);font-size:var(--px-text-size-label-m-tablet);border:none;padding:0;border-radius:0;background:none}}@media only screen and (min-width: 64.0625em){.btn{width:var(--button-extended--laptop, var(--button-extended, auto));font-size:var(--px-text-size-label-m-laptop);gap:var(--px-spacing-2xs-laptop)}.btn:focus-visble:not([disabled],[aria-disabled=true]){outline-offset:var(--px-focus-offset-laptop);outline-width:var(--px-focus-outline-laptop)}.btn.actionable-tag{padding:var(--px-padding-2xs-laptop) var(--px-padding-xs-laptop);gap:var(--px-spacing-xs-laptop)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag,.header-dropdown){padding:var(--px-padding-xs-laptop) var(--px-padding-m-laptop)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag,.header-dropdown) ::slotted([slot="after"]){margin-right:calc(var(--px-padding-xs-laptop) * -1)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag,.header-dropdown) ::slotted([slot="before"]){margin-left:calc(var(--px-padding-xs-laptop) * -1)}.btn.secondary{padding:var(--px-padding-xs-laptop) var(--px-padding-m-laptop)}.btn.tertiary{padding:var(--px-padding-2xs-laptop) 0;gap:var(--px-spacing-xs-laptop)}.btn.tertiary ::slotted(px-icon){width:var(--px-size-icon-xs);height:var(--px-size-icon-xs)}.btn.tertiary:hover:not([disabled],[aria-disabled=true],.loading){padding:var(--px-padding-2xs-laptop) var(--px-padding-s-laptop)}.btn.tertiary.loading ::slotted(px-spinner){width:var(--px-size-icon-xs);height:var(--px-size-icon-xs)}.btn.header-dropdown{font-size:var(--px-text-size-label-m-laptop);padding:0}}@media only screen and (min-width: 90.0625em){.btn{width:var(--button-extended--desktop, var(--button-extended, auto));font-size:var(--px-text-size-label-m-desktop);gap:var(--px-spacing-2xs-desktop)}.btn:focus-visible:not([disabled],[aria-disabled=true]){outline-offset:var(--px-focus-offset-desktop);outline-width:var(--px-focus-outline-desktop)}.btn.actionable-tag{padding:var(--px-padding-2xs-desktop) var(--px-padding-xs-desktop);gap:var(--px-spacing-xs-desktop)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag,.header-dropdown){padding:var(--px-padding-xs-desktop) var(--px-padding-m-desktop)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag,.header-dropdown) ::slotted([slot="after"]){margin-right:calc(var(--px-padding-xs-desktop) * -1)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag,.header-dropdown) ::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-xs-desktop)}.btn.tertiary ::slotted(px-icon){width:var(--px-size-icon-xs);height:var(--px-size-icon-xs)}.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-size-icon-xs);height:var(--px-size-icon-xs)}.btn.header-dropdown{font-size:var(--px-text-size-label-m-desktop);padding:0}}@keyframes anim-spinner{0%{transform:rotate(0)}to{transform:rotate(360deg)}}`, j = ':host([variant="icon-link"]){display:inline-flex}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-font-line-height-m);font-weight:var(--px-font-weight-body);color:var(--px-color-text-neutral-default)}a:hover,.link:hover{color:var(--px-color-text-state-hover-default)}a:focus-visible,.link:focus-visible{outline-offset:var(--px-focus-offset-mobile);outline:var(--px-focus-outline-mobile) solid var(--px-color-border-focus-outline-default)}a[aria-disabled=true],.link[aria-disabled=true]{cursor:default;pointer-events:none;color:var(--px-color-text-state-disabled-default)}a ::slotted([slot="after"]),.link ::slotted([slot="after"]){margin-left:var(--px-spacing-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-color-text-state-hover-default)}a.no-style{text-decoration:none}a.no-style:hover,a.no-style:focus-visible{color:inherit}a.skip-link{position:absolute;left:-10000px;top:auto;overflow:hidden;background-color:var(--px-color-background-container-default-default);padding:var(--px-padding-xs-mobile)}a.skip-link:focus-visible{left:auto;z-index:999}.icon-link{color:var(--px-color-icon-brand-default)}:host([inverted]) a,:host([inverted]) .link,:host([inverted]) ::slotted(a){color:var(--px-color-text-neutral-inverted)}:host([inverted]) a:hover,:host([inverted]) .link:hover{color:var(--px-color-text-state-hover-inverted)}:host([inverted]) a:focus-visible,:host([inverted]) .link:focus-visible{outline-color:var(--px-color-border-focus-outline-inverted)}:host([inverted]) a[aria-disabled=true],:host([inverted]) .link[aria-disabled=true]{color:var(--px-color-text-state-disabled-inverted)}:host([inverted]) ::slotted(a:hover){color:var(--px-color-text-state-hover-inverted)}:host([inverted]) a.skip-link{background-color:var(--px-color-background-container-default-inverted)}:host([inverted]) .icon-link{color:var(--px-color-icon-brand-inverted)}@media only screen and (min-width: 768px){a,.link,::slotted(a){font-size:var(--px-text-size-link-m-desktop)}a:focus-visible,.link:focus-visible{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-2xs-desktop)}a.skip-link{padding:var(--px-padding-xs-desktop)}}@media only screen and (min-width: 1025px){a,.link,::slotted(a){font-size:var(--px-text-size-link-m-desktop)}a:focus-visible,.link:focus-visible{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-2xs-desktop)}a.skip-link{padding:var(--px-padding-xs-desktop)}}', zt = ".patch{display:inline-flex;align-items:center;padding:0 var(--px-padding-s-mobile);height:1.625em;border:var(--px-size-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:var(--px-font-weight-title);font-size:var(--px-text-size-label-m-mobile);line-height:var(--px-font-line-height-m);text-align:center;background-color:var(--px-color-background-purpose-promo-default);color:var(--px-color-text-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-color-background-purpose-info-default);color:var(--px-color-text-neutral-default)}.black-friday{background-color:var(--px-color-background-surface-dark);color:var(--px-color-text-neutral-inverted)}.eco{background-color:var(--px-color-background-purpose-success-default);color:var(--px-color-text-neutral-inverted)}.greyed{background-color:var(--px-color-background-state-disabled-default);color:var(--px-color-text-state-disabled-default)}:host([inverted]) .patch{background-color:var(--px-color-background-purpose-promo-inverted);color:var(--px-color-text-neutral-inverted)}:host([inverted]) .info{background-color:var(--px-color-background-purpose-info-inverted);color:var(--px-color-text-neutral-default)}:host([inverted]) .black-friday{background-color:var(--px-color-background-container-light-default);color:var(--px-color-text-neutral-default)}:host([inverted]) .eco{background-color:var(--px-color-background-purpose-success-inverted);color:var(--px-color-text-neutral-default)}:host([inverted]) .greyed{background-color:var(--px-color-background-state-disabled-inverted);color:var(--px-color-text-state-disabled-inverted)}@media only screen and (min-width: 768px){.patch{padding:0 var(--px-padding-s-desktop);font-size:var(--px-text-size-label-m-desktop)}}@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)}}", St = ":host{display:inline-block}.tag{display:inline-flex;vertical-align:middle;align-items:center;justify-content:center;font-family:var(--px-font-family);font-size:var(--px-text-size-label-m-mobile);line-height:var(--px-font-line-height-m);font-weight:var(--px-font-weight-body);gap:var(--px-spacing-xs-mobile);background-color:var(--px-color-background-container-default-default);color:var(--px-color-text-neutral-default);padding:var(--px-padding-2xs-mobile) var(--px-padding-xs-mobile);border:var(--px-size-border-s) solid transparent;border-radius:var(--px-radius-main)}.tag,.tag *{box-sizing:border-box}:host([inverted]) .tag{background-color:var(--px-color-background-container-default-inverted);color:var(--px-color-text-neutral-inverted)}@media only screen and (min-width: 768px){.tag{font-size:var(--px-text-size-label-m-desktop);gap:var(--px-spacing-xs-desktop);padding:var(--px-padding-2xs-desktop) var(--px-padding-xs-desktop)}}@media only screen and (min-width: 1025px){.tag{font-size:var(--px-text-size-label-m-desktop);gap:var(--px-spacing-xs-desktop);padding:var(--px-padding-2xs-desktop) var(--px-padding-xs-desktop)}}", N = new CSSStyleSheet(), W = new CSSStyleSheet(), K = new CSSStyleSheet(), U = new CSSStyleSheet();
579
+ N.replaceSync(Z);
580
+ W.replaceSync(j);
581
+ K.replaceSync(zt);
582
+ U.replaceSync(St);
583
+ const Et = [
584
+ "",
585
+ "default",
586
+ "secondary",
587
+ "tertiary",
588
+ "link",
589
+ "patch",
590
+ "patch-info",
591
+ "patch-black-friday",
592
+ "patch-eco",
593
+ "actionable-tag",
594
+ "header-dropdown"
595
+ ], Lt = [
596
+ "extended",
597
+ "extended--mobile",
598
+ "extended--tablet",
599
+ "extended--laptop"
600
+ ], M = class M extends n {
601
+ constructor() {
602
+ super(N, W, K, U), this.template = () => `<button class="btn">
603
+ <slot name="before"></slot><slot></slot><slot name="after"></slot>
604
+ </button>`, this.shadowRoot.innerHTML = this.template();
605
+ }
606
+ static get observedAttributes() {
607
+ return [
608
+ ...super.observedAttributes,
609
+ "variant",
610
+ "state",
611
+ "loading",
612
+ "shape",
613
+ "inverted",
614
+ "aria-expanded",
615
+ ...Lt
616
+ ];
617
+ }
618
+ connectedCallback() {
619
+ super.connectedCallback();
620
+ const t = this.querySelectorAll("px-icon");
621
+ t && t.forEach((e) => {
622
+ const r = e.getAttribute("size"), o = e.getAttribute("color");
623
+ e && (e.addEventListener("click", () => {
624
+ this.$el.focus();
625
+ }), r || e.setAttribute("size", "xs"), o || e.setAttribute("color", "inherit"));
626
+ }), F(this, this.$el), this.$el.type === "submit" && this.addEventListener("click", (e) => {
627
+ var r;
628
+ e.preventDefault(), (r = this.closest("form")) == null || r.submit();
629
+ }), this.$el.type === "reset" && this.addEventListener("click", (e) => {
630
+ var r;
631
+ e.preventDefault(), (r = this.closest("form")) == null || r.reset();
632
+ });
633
+ }
634
+ attributeChangedCallback(t, e, r) {
635
+ if (e !== r)
636
+ switch (t) {
637
+ case "variant":
638
+ this.updateVariant(e, r, Et);
639
+ break;
640
+ case "state":
641
+ this.updateState(e, r);
642
+ break;
643
+ case "extended":
644
+ case "extended--mobile":
645
+ case "extended--tablet":
646
+ case "extended--laptop":
647
+ this.updateExtended(t, r);
648
+ break;
649
+ case "loading":
650
+ this.updateLoading();
651
+ break;
652
+ case "shape":
653
+ this.updateShape(e, r);
654
+ break;
655
+ case "aria-expanded":
656
+ r && (this.$el.setAttribute("aria-expanded", r), this.removeAttribute("aria-expanded"));
657
+ break;
658
+ default:
659
+ super.attributeChangedCallback(t, e, r);
660
+ break;
661
+ }
662
+ }
663
+ checkName(t, e) {
664
+ return !!t.includes(e);
665
+ }
666
+ checkClass(t) {
667
+ if (t.startsWith("patch-")) {
668
+ const e = t.split(/-(.*)/s);
669
+ for (const r of e)
670
+ r != "" && this.$el.classList.toggle(r);
671
+ } else
672
+ this.$el.classList.toggle(t);
673
+ }
674
+ _toggleClass(t, e) {
675
+ t !== null && t !== "" && t !== "default" && this.checkClass(t), e !== null && e !== "" && e !== "default" && this.checkClass(e);
676
+ }
677
+ updateVariant(t, e, r) {
678
+ e === "link" ? this.$el.classList.remove("btn") : this.$el.classList.add("btn"), this._toggleClass(t, e), this.checkName(r, e) || console.error(
679
+ `${e} is not a valid "variant" value for ${r}`
680
+ );
681
+ }
682
+ updateState(t, e) {
683
+ const r = ["", "default", "success", "error"];
684
+ this._toggleClass(t, e), this.checkName(r, e) || console.error(`${e} is not a valid "sate" value`);
685
+ }
686
+ updateExtended(t, e) {
687
+ e === null ? this.$el.style.setProperty(`--button-${t}`, "") : this.$el.style.setProperty(`--button-${t}`, "100%");
688
+ }
689
+ updateLoading() {
690
+ const t = this.querySelector("px-spinner");
691
+ t && (t.getAttribute("size") || t.setAttribute("size", "xs")), this.$el.classList.toggle("loading");
692
+ }
693
+ updateShape(t, e) {
694
+ const r = [
695
+ "",
696
+ "default",
697
+ "bottom-right",
698
+ "bottom-left",
699
+ "alternative"
700
+ ];
701
+ this._toggleClass(t, e), this.checkName(r, e) || console.error(`${e} is not a valid shape value`);
702
+ }
703
+ get variant() {
704
+ return this.getAttribute("variant");
705
+ }
706
+ set variant(t) {
707
+ this.setAttribute("variant", t);
708
+ }
709
+ get state() {
710
+ return this.getAttribute("state");
711
+ }
712
+ set state(t) {
713
+ this.setAttribute("state", t);
714
+ }
715
+ get extended() {
716
+ return this.getAttribute("extended");
717
+ }
718
+ set extended(t) {
719
+ this.setAttribute("extended", t);
720
+ }
721
+ get extendedMobile() {
722
+ return this.getAttribute("extended--mobile");
723
+ }
724
+ set extendedMobile(t) {
725
+ this.setAttribute("extended--mobile", t);
726
+ }
727
+ get extendedTablet() {
728
+ return this.getAttribute("extended--tablet");
729
+ }
730
+ set extendedTablet(t) {
731
+ this.setAttribute("extended--tablet", t);
732
+ }
733
+ get extendedLaptop() {
734
+ return this.getAttribute("extended--laptop");
735
+ }
736
+ set extendedLaptop(t) {
737
+ this.setAttribute("extended--laptop", t);
738
+ }
739
+ get loading() {
740
+ return this.getAttribute("loading");
741
+ }
742
+ set loading(t) {
743
+ this.setAttribute("loading", t);
744
+ }
745
+ get shape() {
746
+ return this.getAttribute("shape");
747
+ }
748
+ set shape(t) {
749
+ this.setAttribute("shape", t);
750
+ }
751
+ get inverted() {
752
+ return this.getAttribute("inverted");
753
+ }
754
+ set inverted(t) {
755
+ this.setAttribute("inverted", t);
756
+ }
757
+ get ariaExpanded() {
758
+ return this.getAttribute("aria-expanded");
759
+ }
760
+ set ariaExpanded(t) {
761
+ t ? this.setAttribute("aria-expanded", t) : this.removeAttribute("aria-expanded");
762
+ }
763
+ };
764
+ M.nativeName = "button";
765
+ let y = M;
766
+ customElements.get("px-button") || customElements.define("px-button", y);
767
+ const Mt = ':host{display:block}:host,:host *{box-sizing:border-box}.content-wrapper{margin-inline:var(--px-padding-s-mobile);max-width:var(--px-content-wrapper-max-width-desktop)}@media only screen and (min-width: 77em){.content-wrapper{margin-inline:auto}}.overlapped{margin-bottom:calc(var(--px-overlapped-mobile) * -1)}::slotted([slot="overlap"]){margin-top:var(--px-overlapped-mobile)}@media only screen and (min-width: 48em){.overlapped{margin-bottom:calc(var(--px-overlapped-desktop) * -1)}::slotted([slot="overlap"]){margin-top:var(--px-overlapped-desktop)}}@media only screen and (min-width: 64.0625em){.overlapped{margin-bottom:calc(var(--px-overlapped-desktop) * -1)}::slotted([slot="overlap"]){margin-top:var(--px-overlapped-desktop)}}', G = new CSSStyleSheet();
768
+ G.replaceSync(Mt);
769
+ class Tt extends HTMLElement {
770
+ constructor() {
771
+ super(), this.template = () => `
772
+ <px-container border-radius="none" padding-inline="none" background-color="${this.backgroundColor}">
773
+ <div class="content-wrapper ${this.$slotOverlap ? "overlapped" : ""}">
774
+ <px-vstack gap="heading-to-content">
775
+ <slot name="heading"></slot>
776
+ <px-vstack gap="none">
777
+ <slot></slot>
778
+ </px-vstack>
779
+ </px-vstack>
780
+ </div>
781
+ </px-container>
782
+ <div class="content-wrapper">
783
+ <slot name="overlap"></slot>
784
+ </div>
785
+ `, this.attachShadow({ mode: "open" }), this.shadowRoot.innerHTML = this.template(), this.shadowRoot.adoptedStyleSheets = [G];
786
+ }
787
+ connectedCallback() {
788
+ const t = this.querySelector('[slot="heading"]');
789
+ !this.paddingBlock && !this.paddingTop && !this.paddingBottom && !this.paddingBlockMobile && !this.paddingTopMobile && !this.paddingBottomMobile && !this.paddingBlockTablet && !this.paddingTopTablet && !this.paddingBottomTablet && !this.paddingBlockLaptop && !this.paddingTopLaptop && !this.paddingBottomLaptop && (this.$container.paddingBlock = "none"), t || this.shadowRoot.querySelector("px-vstack").setAttribute("gap", "none");
790
+ }
791
+ static get observedAttributes() {
792
+ return [
793
+ "background-color",
794
+ "background-gradient",
795
+ "background-image",
796
+ "background-image--mobile",
797
+ "background-image--tablet",
798
+ "background-image--laptop",
799
+ "background-size",
800
+ "background-position",
801
+ "padding-block",
802
+ "padding-top",
803
+ "padding-bottom",
804
+ "padding-block--mobile",
805
+ "padding-top--mobile",
806
+ "padding-bottom--mobile",
807
+ "padding-block--tablet",
808
+ "padding-top--tablet",
809
+ "padding-bottom--tablet",
810
+ "padding-block--laptop",
811
+ "padding-top--laptop",
812
+ "padding-bottom--laptop",
813
+ "border",
814
+ "border-side",
815
+ "border-side--mobile",
816
+ "border-side--tablet",
817
+ "border-side--laptop"
818
+ ];
819
+ }
820
+ get $container() {
821
+ return this.shadowRoot.querySelector("px-container");
822
+ }
823
+ attributeChangedCallback(t, e, r) {
824
+ if (e !== r)
825
+ switch (t) {
826
+ case "background-color":
827
+ this.$container.backgroundColor = H.indexOf(r) > 0 ? r : "none";
828
+ break;
829
+ case "background-gradient":
830
+ this.$container.gradient = this.gradient;
831
+ break;
832
+ case "background-image":
833
+ this.$container.backgroundImage = r;
834
+ break;
835
+ case "background-image--mobile":
836
+ this.$container.backgroundImageMobile = r;
837
+ break;
838
+ case "background-image--tablet":
839
+ this.$container.backgroundImageTablet = r;
840
+ break;
841
+ case "background-image--laptop":
842
+ this.$container.backgroundImageLaptop = r;
843
+ break;
844
+ case "background-size":
845
+ this.$container.backgroundSize = r;
846
+ break;
847
+ case "background-position":
848
+ this.$container.backgroundPosition = r;
849
+ break;
850
+ case "padding-block":
851
+ this.$container.paddingBlock = r;
852
+ break;
853
+ case "padding-top":
854
+ this.$container.paddingTop = r;
855
+ break;
856
+ case "padding-bottom":
857
+ this.$container.paddingBottom = r;
858
+ break;
859
+ case "padding-block--mobile":
860
+ this.$container.paddingBlockMobile = r;
861
+ break;
862
+ case "padding-top--mobile":
863
+ this.$container.paddingTopMobile = r;
864
+ break;
865
+ case "padding-bottom--mobile":
866
+ this.$container.paddingBottomMobile = r;
867
+ break;
868
+ case "padding-block--tablet":
869
+ this.$container.paddingBlockTablet = r;
870
+ break;
871
+ case "padding-top--tablet":
872
+ this.$container.paddingTopTablet = r;
873
+ break;
874
+ case "padding-bottom--tablet":
875
+ this.$container.paddingBottomTablet = r;
876
+ break;
877
+ case "padding-block--laptop":
878
+ this.$container.paddingBlockLaptop = r;
879
+ break;
880
+ case "padding-top--laptop":
881
+ this.$container.paddingTopLaptop = r;
882
+ break;
883
+ case "padding-bottom--laptop":
884
+ this.$container.paddingBottomLaptop = r;
885
+ break;
886
+ case "border":
887
+ this.$container.border = r;
888
+ break;
889
+ case "border-side":
890
+ this.$container.borderSide = r;
891
+ break;
892
+ case "border-side--mobile":
893
+ this.$container.borderSideMobile = r;
894
+ break;
895
+ case "border-side--tablet":
896
+ this.$container.borderSideTablet = r;
897
+ break;
898
+ case "border-side--laptop":
899
+ this.$container.borderSideLaptop = r;
900
+ break;
901
+ }
902
+ }
903
+ get $slotOverlap() {
904
+ return this.querySelector('[slot="overlap"]');
905
+ }
906
+ get backgroundColor() {
907
+ return this.getAttribute("background-color") || "none";
908
+ }
909
+ set backgroundColor(t) {
910
+ this.setAttribute("background-color", t);
911
+ }
912
+ get gradient() {
913
+ return this.getAttribute("background-gradient");
914
+ }
915
+ set gradient(t) {
916
+ this.setAttribute("background-gradient", t);
917
+ }
918
+ get backgroundImage() {
919
+ return this.getAttribute("background-image");
920
+ }
921
+ set backgroundImage(t) {
922
+ this.setAttribute("background-image", t);
923
+ }
924
+ get backgroundImageMobile() {
925
+ return this.getAttribute("background-image--mobile");
926
+ }
927
+ set backgroundImageMobile(t) {
928
+ this.setAttribute("background-image--mobile", t);
929
+ }
930
+ get backgroundImageTablet() {
931
+ return this.getAttribute("background-image--tablet");
932
+ }
933
+ set backgroundImageTablet(t) {
934
+ this.setAttribute("background-image--tablet", t);
935
+ }
936
+ get backgroundImageLaptop() {
937
+ return this.getAttribute("background-image--laptop");
938
+ }
939
+ set backgroundImageLaptop(t) {
940
+ this.setAttribute("background-image--laptop", t);
941
+ }
942
+ get backgroundSize() {
943
+ return this.getAttribute("background-size");
944
+ }
945
+ set backgroundSize(t) {
946
+ this.setAttribute("background-size", t);
947
+ }
948
+ get backgroundPosition() {
949
+ return this.getAttribute("background-position");
950
+ }
951
+ set backgroundPosition(t) {
952
+ this.setAttribute("background-position", t);
953
+ }
954
+ get paddingBlock() {
955
+ return this.getAttribute("padding-block");
956
+ }
957
+ set paddingBlock(t) {
958
+ this.setAttribute("padding-block", t);
959
+ }
960
+ get paddingTop() {
961
+ return this.getAttribute("padding-top");
962
+ }
963
+ set paddingTop(t) {
964
+ this.setAttribute("padding-top", t);
965
+ }
966
+ get paddingBottom() {
967
+ return this.getAttribute("padding-bottom");
968
+ }
969
+ set paddingBottom(t) {
970
+ this.setAttribute("padding-bottom", t);
971
+ }
972
+ get paddingBlockMobile() {
973
+ return this.getAttribute("padding-block--mobile");
974
+ }
975
+ set paddingBlockMobile(t) {
976
+ this.setAttribute("padding-block--mobile", t);
977
+ }
978
+ get paddingTopMobile() {
979
+ return this.getAttribute("padding-top--mobile");
980
+ }
981
+ set paddingTopMobile(t) {
982
+ this.setAttribute("padding-top--mobile", t);
983
+ }
984
+ get paddingBottomMobile() {
985
+ return this.getAttribute("padding-bottom--mobile");
986
+ }
987
+ set paddingBottomMobile(t) {
988
+ this.setAttribute("padding-bottom--mobile", t);
989
+ }
990
+ get paddingBlockTablet() {
991
+ return this.getAttribute("padding-block--tablet");
992
+ }
993
+ set paddingBlockTablet(t) {
994
+ this.setAttribute("padding-block--tablet", t);
995
+ }
996
+ get paddingTopTablet() {
997
+ return this.getAttribute("padding-top--tablet");
998
+ }
999
+ set paddingTopTablet(t) {
1000
+ this.setAttribute("padding-top--tablet", t);
1001
+ }
1002
+ get paddingBottomTablet() {
1003
+ return this.getAttribute("padding-bottom--tablet");
1004
+ }
1005
+ set paddingBottomTablet(t) {
1006
+ this.setAttribute("padding-bottom--tablet", t);
1007
+ }
1008
+ get paddingBlockLaptop() {
1009
+ return this.getAttribute("padding-block--laptop");
1010
+ }
1011
+ set paddingBlockLaptop(t) {
1012
+ this.setAttribute("padding-block--laptop", t);
1013
+ }
1014
+ get paddingTopLaptop() {
1015
+ return this.getAttribute("padding-top--laptop");
1016
+ }
1017
+ set paddingTopLaptop(t) {
1018
+ this.setAttribute("padding-top--laptop", t);
1019
+ }
1020
+ get paddingBottomLaptop() {
1021
+ return this.getAttribute("padding-bottom--laptop");
1022
+ }
1023
+ set paddingBottomLaptop(t) {
1024
+ this.setAttribute("padding-bottom--laptop", t);
1025
+ }
1026
+ get border() {
1027
+ return this.getAttribute("border");
1028
+ }
1029
+ set border(t) {
1030
+ this.setAttribute("border", t);
1031
+ }
1032
+ get borderSide() {
1033
+ return this.getAttribute("border-side");
1034
+ }
1035
+ set borderSide(t) {
1036
+ this.setAttribute("border-side", t);
1037
+ }
1038
+ get borderSideMobile() {
1039
+ return this.getAttribute("border-side--mobile");
1040
+ }
1041
+ set borderSideMobile(t) {
1042
+ this.setAttribute("border-side--mobile", t);
1043
+ }
1044
+ get borderSideTablet() {
1045
+ return this.getAttribute("border-side--tablet");
1046
+ }
1047
+ set borderSideTablet(t) {
1048
+ this.setAttribute("border-side--tablet", t);
1049
+ }
1050
+ get borderSideLaptop() {
1051
+ return this.getAttribute("border-side--laptop");
1052
+ }
1053
+ set borderSideLaptop(t) {
1054
+ this.setAttribute("border-side--laptop", t);
1055
+ }
1056
+ }
1057
+ customElements.get("px-section") || customElements.define("px-section", Tt);
1058
+ const Bt = ["", "default", "naked", "contained"], Rt = [
1059
+ "",
1060
+ "container-light",
1061
+ "container-default"
1062
+ ];
1063
+ function h(a) {
1064
+ a.hasAttribute("width") || a.setAttribute("width", "s"), a.setAttribute("border-radius", "pill");
1065
+ }
1066
+ function u(a) {
1067
+ a.getAttribute("variant") === "contained" && !a.getAttribute("background-color") && a.setAttribute("background-color", "container-light");
1068
+ }
1069
+ function _t(a, t, e) {
1070
+ if (!x(Bt, e)) {
1071
+ console.error(`${e} is not an allowed variant value.`);
1072
+ return;
1073
+ }
1074
+ t !== null && t !== "" && t !== "default" && a.classList.toggle(t), e !== null && e !== "" && e !== "default" && a.classList.toggle(e);
1075
+ }
1076
+ function k(a, t, e, r = []) {
1077
+ e ? (a.setAttribute("inverted", ""), r.forEach((o) => o.setAttribute("inverted", "")), t.forEach((o) => {
1078
+ o.hasAttribute("inverted") || o.setAttribute("inverted", "");
1079
+ })) : (a.removeAttribute("inverted"), r.forEach((o) => o.removeAttribute("inverted")), t.forEach((o) => {
1080
+ o.hasAttribute("inverted") && o.removeAttribute("inverted");
1081
+ }));
1082
+ }
1083
+ function It(a, t, e, r, o) {
1084
+ if (!x(o, r)) {
1085
+ console.error(`${r} is not an allowed ${t} value`);
1086
+ return;
1087
+ }
1088
+ const i = (s) => {
1089
+ s !== null && s !== "" && s !== "default" && (a.style.setProperty(
1090
+ "--cell-contained-background-color-default",
1091
+ `var(--px-color-background-${s}-default)`
1092
+ ), a.style.setProperty(
1093
+ "--cell-contained-background-color-inverted",
1094
+ `var(--px-color-background-${s}-inverted)`
1095
+ ));
1096
+ };
1097
+ i(e), i(r);
1098
+ }
1099
+ function qt(a, t, e, r = [], o = {}) {
1100
+ e ? (a.setAttribute("disabled", ""), r.forEach((i) => i.setAttribute("disabled", "")), t.forEach((i) => {
1101
+ i.hasAttribute("disabled") || i.setAttribute("disabled", "");
1102
+ }), o.ariaEl && o.setAria && o.ariaEl.setAttribute("aria-disabled", "true"), o.ariaEl && o.setTabIndex && (o.ariaEl.tabIndex = -1)) : (a.removeAttribute("disabled"), r.forEach((i) => i.removeAttribute("disabled")), t.forEach((i) => {
1103
+ i.hasAttribute("disabled") && i.removeAttribute("disabled");
1104
+ }), o.ariaEl && o.setAria && o.ariaEl.setAttribute("aria-disabled", "false"), o.ariaEl && o.setTabIndex && (o.ariaEl.tabIndex = 0));
1105
+ }
1106
+ const g = ":host{display:block;outline:none}:host .cell,:host .cell-link,:host .cell-button,:host .cell-checkbox,:host .cell-radio,:host .cell-switch{display:block;--btn-transition: all .2s ease-in-out 0s;transition:var(--btn-transition)}:host .cell,:host .cell *,:host .cell-link,:host .cell-link *,:host .cell-button,:host .cell-button *,:host .cell-checkbox,:host .cell-checkbox *,:host .cell-radio,:host .cell-radio *,:host .cell-switch,:host .cell-switch *{box-sizing:border-box}:host .cell-link,:host .cell-button,:host .cell-checkbox,:host .cell-radio,:host .cell-switch{outline-color:var(--px-color-border-focus-outline-default);outline-width:var(--px-focus-outline-mobile)}:host .cell-link,:host .cell-button{cursor:pointer}:host .cell-checkbox,:host .cell-radio,:host .cell-switch{cursor:default}:host:host(:not([disabled])):host(:focus-visible) .cell-checkbox,:host:host(:not([disabled])):host(:focus-visible) .cell-radio,:host:host(:not([disabled])):host(:focus-visible) .cell-switch{outline-offset:var(--px-focus-offset-mobile);outline-style:solid;position:relative}:host:host(:not([disabled])) .cell-link:focus-visible,:host:host(:not([disabled])) .cell-button:focus-visible{outline-offset:var(--px-focus-offset-mobile);outline-style:solid;position:relative}:host:host([disabled]) .cell-link,:host:host([disabled]) .cell-button,:host:host([disabled]) .cell-checkbox,:host:host([disabled]) .cell-radio,:host:host([disabled]) .cell-switch{cursor:default;pointer-events:none}@media only screen and (min-width: 768px){:scope:host .cell-link,:scope:host .cell-button,:scope:host .cell-checkbox,:scope:host .cell-radio,:scope:host .cell-switch{outline-width:var(--px-focus-outline-tablet)}:scope:host:host(:not([disabled])):host(:focus-visible) .cell-checkbox,:scope:host:host(:not([disabled])):host(:focus-visible) .cell-radio,:scope:host:host(:not([disabled])):host(:focus-visible) .cell-switch{outline-offset:var(--px-focus-offset-tablet);outline-width:var(--px-focus-outline-tablet)}:scope:host:host(:not([disabled])) .cell-link:focus-visible,:scope:host:host(:not([disabled])) .cell-button:focus-visible{outline-offset:var(--px-focus-offset-tablet);outline-width:var(--px-focus-outline-tablet)}}@media only screen and (min-width: 1025px){:scope:host .cell-link,:scope:host .cell-button,:scope:host .cell-checkbox,:scope:host .cell-radio,:scope:host .cell-switch{outline-width:var(--px-focus-outline-desktop)}:scope:host:host(:not([disabled])):host(:focus-visible) .cell-checkbox,:scope:host:host(:not([disabled])):host(:focus-visible) .cell-radio,:scope:host:host(:not([disabled])):host(:focus-visible) .cell-switch{outline-offset:var(--px-focus-offset-desktop);outline-width:var(--px-focus-outline-desktop)}:scope:host:host(:not([disabled])) .cell-link:focus-visible,:scope:host:host(:not([disabled])) .cell-button:focus-visible{outline-offset:var(--px-focus-offset-desktop);outline-width:var(--px-focus-outline-desktop)}}:host([inverted]) .cell-link,:host([inverted]) .cell-button,:host([inverted]) .cell-checkbox,:host([inverted]) .cell-radio,:host([inverted]) .cell-switch{outline-color:var(--px-color-border-focus-outline-inverted)}", Dt = ':host([separator]):after{position:relative;content:"";display:block;width:100%;border-bottom:var(--px-size-border-m) solid var(--px-color-border-main-default)}.cell{font-family:var(--px-font-family);line-height:var(--px-font-line-height-m);font-size:var(--px-text-size-label-l-mobile);font-weight:var(--px-font-weight-title);color:var(--px-color-text-neutral-default);padding:var(--px-spacing-s-mobile)}.cell ::slotted([slot="description"]){font-weight:var(--px-font-weight-body);font-size:var(--px-text-size-label-m-mobile)}.cell ::slotted([slot="suffix"]){text-align:right}:host([hoverable]:not([disabled])) .cell{cursor:pointer;text-decoration:none}:host([hoverable]:hover:not([disabled])) .cell{background-color:var(--px-color-background-state-hover-default)}:host([hoverable][disabled]) .cell{cursor:default;pointer-events:none;color:var(--px-color-text-state-disabled-default)}.contained{background-color:var( --cell-contained-background-color-default, var(--px-color-background-surface-light) )}:host([hoverable]) .contained{border:var(--px-size-border-m) solid transparent}:host([hoverable]:hover:not([disabled])) .contained{background-color:var(--px-color-background-state-hover-bordered-default);border-color:var(--px-color-border-state-hover-default)}:host([hoverable][disabled]) .contained{background-color:var(--px-color-background-state-disabled-default)}@media only screen and (max-width: 47.9375em){:host([separator--mobile]):after{position:relative;content:"";display:block;width:100%;border-bottom:var(--px-size-border-m) solid var(--px-color-border-main-default)}.contained{border-radius:var( --cell-contained-border-radius-top-left--mobile, var(--px-radius-main) ) var( --cell-contained-border-radius-top-right--mobile, var(--px-radius-main) ) var( --cell-contained-border-radius-bottom-right--mobile, var(--px-radius-main) ) var( --cell-contained-border-radius-bottom-left--mobile, var(--px-radius-main) )}}@media only screen and (min-width: 48em){:host{display:block}.cell{font-size:var(--px-text-size-label-l-tablet);padding:var(--px-padding-s-tablet)}.cell ::slotted([slot="description"]){font-size:var(--px-text-size-label-m-tablet)}}@media only screen and (min-width: 48em) and (max-width: 64em){:host([separator--tablet]):after{position:relative;content:"";display:block;width:100%;border-bottom:var(--px-size-border-m) solid var(--px-color-border-main-default)}.contained{border-radius:var( --cell-contained-border-radius-top-left--tablet, var(--px-radius-main) ) var( --cell-contained-border-radius-top-right--tablet, var(--px-radius-main) ) var( --cell-contained-border-radius-bottom-right--tablet, var(--px-radius-main) ) var( --cell-contained-border-radius-bottom-left--tablet, var(--px-radius-main) )}}@media only screen and (min-width: 64.0625em){:host{display:block}.cell{font-size:var(--px-text-size-label-l-laptop);padding:var(--px-spacing-s-laptop)}.cell ::slotted([slot="description"]){font-size:var(--px-text-size-label-m-laptop)}}@media only screen and (min-width: 64.0625em) and (max-width: 90em){:host([separator--laptop]):after{position:relative;content:"";display:block;width:100%;border-bottom:var(--px-size-border-m) solid var(--px-color-border-main-default)}.contained{border-radius:var( --cell-contained-border-radius-top-left--laptop, var(--px-radius-main) ) var( --cell-contained-border-radius-top-right--laptop, var(--px-radius-main) ) var( --cell-contained-border-radius-bottom-right--laptop, var(--px-radius-main) ) var( --cell-contained-border-radius-bottom-left--laptop, var(--px-radius-main) )}}@media only screen and (min-width: 90.0625em){:host{display:block}:host([separator--desktop]):after{position:relative;content:"";display:block;width:100%;border-bottom:var(--px-size-border-m) solid var(--px-color-border-main-default)}.cell{font-size:var(--px-text-size-label-l-desktop);padding:var(--px-spacing-s-desktop)}.cell ::slotted([slot="description"]){font-size:var(--px-text-size-label-m-desktop)}.contained{border-radius:var( --cell-contained-border-radius-top-left--desktop, var(--px-radius-main) ) var( --cell-contained-border-radius-top-right--desktop, var(--px-radius-main) ) var( --cell-contained-border-radius-bottom-right--desktop, var(--px-radius-main) ) var( --cell-contained-border-radius-bottom-left--desktop, var(--px-radius-main) )}}:host([inverted]):after{border-bottom-color:var(--px-color-border-main-inverted)}:host([inverted]) .cell{color:var(--px-color-text-neutral-inverted)}:host([inverted]):host([hoverable]:hover:not([disabled])) .cell{background-color:var(--px-color-background-state-hover-inverted)}:host([inverted]):host([hoverable][disabled]) .cell{color:var(--px-color-text-state-disabled-inverted)}:host([inverted]):host([hoverable][disabled]) .contained{background-color:var(--px-color-background-state-disabled-inverted)}:host([inverted]) .contained{background-color:var( --cell-contained-background-color-inverted, var(--px-color-background-container-light-inverted) )}:host([inverted]):host([hoverable]:hover:not([disabled])) .contained{background-color:var( --px-color-background-state-hover-bordered-inverted );border-color:var(--px-color-border-state-hover-inverted)}', Y = new CSSStyleSheet(), J = new CSSStyleSheet();
1107
+ Y.replaceSync(g);
1108
+ J.replaceSync(Dt);
1109
+ const P = ["secondary"], Pt = ["", "default", "top", "bottom", "none"], T = class T extends n {
1110
+ template() {
1111
+ return `
1112
+ <px-hstack gap="s" justify-content="space-between" align-items="center">
1113
+ <px-hstack gap="s" align-items="center">
1114
+ <slot name="prefix"></slot>
1115
+ <slot name="visual"></slot>
1116
+ <px-vstack gap="2xs">
1117
+ <slot></slot>
1118
+ <slot name="description"></slot>
1119
+ </px-vstack>
1120
+ </px-hstack>
1121
+ <px-hstack gap="s" align-items="center" class="cell-layout__suffix-action-container">
1122
+ <px-stack direction="column" gap="2xs" align-items="flex-end" class="cell__suffix-container">
1123
+ <slot name="suffix"></slot>
1124
+ </px-stack>
1125
+ <slot name="action-indicator"></slot>
1126
+ </px-hstack>
1127
+ </px-hstack>
1128
+ `;
1129
+ }
1130
+ constructor() {
1131
+ super(J, Y);
1132
+ const t = document.createElement(this.nativeName);
1133
+ t.classList.add("cell"), t.innerHTML = this.template(), this.shadowRoot.appendChild(t);
1134
+ }
1135
+ connectedCallback() {
1136
+ if (super.connectedCallback(), this.$slotVisual) {
1137
+ const t = this.querySelector('px-img[slot="visual"]');
1138
+ t && h(t);
1139
+ }
1140
+ if (this.$slotSuffix) {
1141
+ const t = this.querySelectorAll(
1142
+ 'px-button-icon[slot="suffix"]'
1143
+ ), e = t.length > 0, r = t.length > 1;
1144
+ e && t.forEach((o) => {
1145
+ this.configureSlotSuffixButtonIcon(o);
1146
+ }), r && (this.$suffixContainer.gap = "s", this.$suffixContainer.direction = "row", this.$suffixContainer.alignItems = "center");
1147
+ }
1148
+ u(this);
1149
+ }
1150
+ static get observedAttributes() {
1151
+ return [
1152
+ ...super.observedAttributes,
1153
+ "inverted",
1154
+ "variant",
1155
+ "disabled",
1156
+ "separator",
1157
+ "separator--mobile",
1158
+ "separator--tablet",
1159
+ "separator--laptop",
1160
+ "separator--desktop",
1161
+ "radius",
1162
+ "radius--mobile",
1163
+ "radius--tablet",
1164
+ "radius--laptop",
1165
+ "radius--desktop",
1166
+ "background-color"
1167
+ ];
1168
+ }
1169
+ attributeChangedCallback(t, e, r) {
1170
+ if (e !== r)
1171
+ switch (t) {
1172
+ case "variant":
1173
+ _t(this.$el, e, r);
1174
+ break;
1175
+ case "inverted":
1176
+ for (let o = 0; o < this.$children.length; o++)
1177
+ this.$children[o].hasAttribute("inverted") ? this.$children[o].removeAttribute("inverted") : this.$children[o].setAttribute("inverted", "");
1178
+ break;
1179
+ case "radius":
1180
+ case "radius--mobile":
1181
+ case "radius--tablet":
1182
+ case "radius--laptop":
1183
+ case "radius--desktop":
1184
+ this.updateRadius(t, e, r, Pt);
1185
+ break;
1186
+ case "background-color":
1187
+ It(
1188
+ this.$el,
1189
+ t,
1190
+ e,
1191
+ r,
1192
+ Rt
1193
+ );
1194
+ break;
1195
+ default:
1196
+ super.attributeChangedCallback(t, e, r);
1197
+ break;
1198
+ }
1199
+ }
1200
+ configureSlotSuffixButtonIcon(t) {
1201
+ t.hasAttribute("variant") ? x(
1202
+ P,
1203
+ t.getAttribute("variant")
1204
+ ) || (console.error(
1205
+ `Wrong button-icon variant value for suffix. Allowed values are: ${P.join(
1206
+ ", "
1207
+ )}.`
1208
+ ), t.setAttribute("variant", "secondary")) : t.setAttribute("variant", "secondary");
1209
+ }
1210
+ updateRadius(t, e, r, o) {
1211
+ if (!x(o, r)) {
1212
+ console.error(`${r} is not a valid ${t} value`);
1213
+ return;
1214
+ }
1215
+ const i = t.includes("--"), s = [];
1216
+ if (!i)
1217
+ this.separatorMobile || s.push("mobile"), this.separatorTablet || s.push("tablet"), this.separatorLaptop || s.push("laptop"), this.separatorDesktop || s.push("desktop");
1218
+ else {
1219
+ const v = t.split("--")[1];
1220
+ s.push(v);
1221
+ }
1222
+ s.forEach((v) => {
1223
+ e !== null && e !== "" && e !== "default" && this.updateStyle(v, e), r !== null && r !== "" && r !== "default" && this.updateStyle(v, r);
1224
+ });
1225
+ }
1226
+ updateStyle(t, e) {
1227
+ let r = [];
1228
+ e === "top" ? r = ["bottom-right", "bottom-left"] : e === "bottom" ? r = ["top-right", "top-left"] : e === "none" && (r = ["top-right", "bottom-right", "bottom-left", "top-left"]), r.forEach((o) => {
1229
+ this.$el.style.setProperty(
1230
+ `--cell-contained-border-radius-${o}--${t}`,
1231
+ "0"
1232
+ );
1233
+ });
1234
+ }
1235
+ get $children() {
1236
+ return this.querySelectorAll("px-cell > *");
1237
+ }
1238
+ get $slotVisual() {
1239
+ return this.querySelector('[slot="visual"]');
1240
+ }
1241
+ get $slotSuffix() {
1242
+ return this.querySelector('[slot="suffix"]');
1243
+ }
1244
+ get $suffixContainer() {
1245
+ return this.shadowRoot.querySelector(".cell__suffix-container");
1246
+ }
1247
+ get inverted() {
1248
+ return this.hasAttribute("inverted");
1249
+ }
1250
+ set inverted(t) {
1251
+ t ? this.setAttribute("inverted", "") : this.removeAttribute("inverted");
1252
+ }
1253
+ get variant() {
1254
+ return this.getAttribute("variant");
1255
+ }
1256
+ set variant(t) {
1257
+ this.setAttribute("variant", t);
1258
+ }
1259
+ get disabled() {
1260
+ return this.hasAttribute("disabled");
1261
+ }
1262
+ set disabled(t) {
1263
+ t ? this.setAttribute("disabled", "") : this.removeAttribute("disabled");
1264
+ }
1265
+ get separator() {
1266
+ return this.getAttribute("separator");
1267
+ }
1268
+ set separator(t) {
1269
+ this.setAttribute("separator", t);
1270
+ }
1271
+ get separatorMobile() {
1272
+ return this.getAttribute("separator--mobile");
1273
+ }
1274
+ set separatorMobile(t) {
1275
+ this.setAttribute("separator--mobile", t);
1276
+ }
1277
+ get separatorTablet() {
1278
+ return this.getAttribute("separator--tablet");
1279
+ }
1280
+ set separatorTablet(t) {
1281
+ this.setAttribute("separator--tablet", t);
1282
+ }
1283
+ get separatorLaptop() {
1284
+ return this.getAttribute("separator--laptop");
1285
+ }
1286
+ set separatorLaptop(t) {
1287
+ this.setAttribute("separator--laptop", t);
1288
+ }
1289
+ get separatorDesktop() {
1290
+ return this.getAttribute("separator--desktop");
1291
+ }
1292
+ set separatorDesktop(t) {
1293
+ this.setAttribute("separator--desktop", t);
1294
+ }
1295
+ get radius() {
1296
+ return this.getAttribute("radius");
1297
+ }
1298
+ set radius(t) {
1299
+ this.setAttribute("radius", t);
1300
+ }
1301
+ get radiusMobile() {
1302
+ return this.getAttribute("radius--mobile");
1303
+ }
1304
+ set radiusMobile(t) {
1305
+ this.setAttribute("radius--mobile", t);
1306
+ }
1307
+ get radiusTablet() {
1308
+ return this.getAttribute("radius--tablet");
1309
+ }
1310
+ set radiusTablet(t) {
1311
+ this.setAttribute("radius--tablet", t);
1312
+ }
1313
+ get radiusLaptop() {
1314
+ return this.getAttribute("radius--laptop");
1315
+ }
1316
+ set radiusLaptop(t) {
1317
+ this.setAttribute("radius--laptop", t);
1318
+ }
1319
+ get radiusDesktop() {
1320
+ return this.getAttribute("radius--desktop");
1321
+ }
1322
+ set radiusDesktop(t) {
1323
+ this.setAttribute("radius--desktop", t);
1324
+ }
1325
+ get backgroundColor() {
1326
+ return this.getAttribute("background-color");
1327
+ }
1328
+ set backgroundColor(t) {
1329
+ t ? this.setAttribute("background-color", t) : this.removeAttribute("background-color");
1330
+ }
1331
+ };
1332
+ T.nativeName = "div";
1333
+ let $ = T;
1334
+ customElements.get("px-cell") || customElements.define("px-cell", $);
1335
+ const Ht = '.cell-link{text-decoration:none}.cell-link[noicon=""] px-icon{display:none}.cell-link px-icon{color:var(--px-color-icon-brand-default)}.cell-link[aria-disabled=true] px-icon{color:var(--px-color-icon-state-disabled-default)}:host([inverted]) .cell-link px-icon{color:var(--px-color-icon-brand-inverted)}:host([inverted]) .cell-link[aria-disabled=true] px-icon{color:var(--px-color-icon-state-disabled-inverted)}', Q = new CSSStyleSheet();
1336
+ Q.replaceSync(g);
1337
+ const X = new CSSStyleSheet();
1338
+ X.replaceSync(Ht);
1339
+ const B = class B extends n {
1340
+ template() {
1341
+ return `
1342
+ <px-cell hoverable>
1343
+ <slot name="visual" slot="visual"></slot>
1344
+ <slot></slot>
1345
+ <slot name="description" slot="description"></slot>
1346
+ <slot name="suffix" slot="suffix"></slot>
1347
+ <px-icon
1348
+ name="chevron_right"
1349
+ slot="action-indicator"
1350
+ from="lavender"
1351
+ size="m"
1352
+ color="inherit"
1353
+ ></px-icon>
1354
+ </px-cell>
1355
+ `;
1356
+ }
1357
+ constructor() {
1358
+ super(X, Q);
1359
+ const t = document.createElement(this.nativeName);
1360
+ t.classList.add("cell-link"), t.innerHTML = this.template(), this.shadowRoot.appendChild(t);
1361
+ }
1362
+ connectedCallback() {
1363
+ if (super.connectedCallback(), this.$slotVisual) {
1364
+ const e = this.querySelector('px-img[slot="visual"]');
1365
+ e && h(e);
1366
+ }
1367
+ this.hasAttribute("target") && this.getAttribute("target") === "_blank" && (this.$pxIcon.setAttribute("name", "target_blank"), this.$pxIcon.setAttribute(
1368
+ "aria-label",
1369
+ this.targetBlankAriaLabel ? this.targetBlankAriaLabel : "Opens in a new tab"
1370
+ )), u(this);
1371
+ }
1372
+ static get observedAttributes() {
1373
+ return [
1374
+ ...super.observedAttributes,
1375
+ "inverted",
1376
+ "variant",
1377
+ "disabled",
1378
+ "separator",
1379
+ "separator--mobile",
1380
+ "separator--tablet",
1381
+ "separator--laptop",
1382
+ "separator--desktop",
1383
+ "radius",
1384
+ "radius--mobile",
1385
+ "radius--tablet",
1386
+ "radius--laptop",
1387
+ "radius--desktop",
1388
+ "target-blank-aria-label",
1389
+ "background-color",
1390
+ "noicon"
1391
+ ];
1392
+ }
1393
+ attributeChangedCallback(t, e, r) {
1394
+ if (e !== r)
1395
+ switch (t) {
1396
+ case "variant":
1397
+ this.$cell.variant = this.variant;
1398
+ break;
1399
+ case "inverted":
1400
+ k(this.$cell, this.$children, this.inverted, [
1401
+ this.$pxIcon
1402
+ ]);
1403
+ break;
1404
+ case "disabled":
1405
+ qt(this.$cell, this.$children, this.disabled, [], {
1406
+ ariaEl: this.$el,
1407
+ setAria: !0,
1408
+ setTabIndex: !0
1409
+ });
1410
+ break;
1411
+ case "radius":
1412
+ case "radius--mobile":
1413
+ case "radius--tablet":
1414
+ case "radius--laptop":
1415
+ case "radius--desktop":
1416
+ case "separator":
1417
+ case "separator--mobile":
1418
+ case "separator--tablet":
1419
+ case "separator--laptop":
1420
+ case "separator--desktop":
1421
+ case "background-color":
1422
+ this.$cell.setAttribute(t, this.getAttribute(t) || "");
1423
+ break;
1424
+ case "target-blank-aria-label":
1425
+ this.$pxIcon && this.$pxIcon.setAttribute(
1426
+ "aria-label",
1427
+ this.targetBlankAriaLabel || "Opens in a new tab"
1428
+ );
1429
+ break;
1430
+ default:
1431
+ super.attributeChangedCallback(t, e, r);
1432
+ break;
1433
+ }
1434
+ }
1435
+ get $cell() {
1436
+ return this.shadowRoot.querySelector("px-cell");
1437
+ }
1438
+ get $slotVisual() {
1439
+ return this.querySelector('[slot="visual"]');
1440
+ }
1441
+ get $children() {
1442
+ return this.querySelectorAll("px-cell-link > *");
1443
+ }
1444
+ get $pxIcon() {
1445
+ return this.shadowRoot.querySelector("px-icon");
1446
+ }
1447
+ get inverted() {
1448
+ return this.hasAttribute("inverted");
1449
+ }
1450
+ set inverted(t) {
1451
+ t ? this.setAttribute("inverted", "") : this.removeAttribute("inverted");
1452
+ }
1453
+ get variant() {
1454
+ return this.getAttribute("variant");
1455
+ }
1456
+ set variant(t) {
1457
+ this.setAttribute("variant", t);
1458
+ }
1459
+ get disabled() {
1460
+ return this.hasAttribute("disabled");
1461
+ }
1462
+ set disabled(t) {
1463
+ t ? this.setAttribute("disabled", "") : this.removeAttribute("disabled");
1464
+ }
1465
+ get separator() {
1466
+ return this.getAttribute("separator");
1467
+ }
1468
+ set separator(t) {
1469
+ this.setAttribute("separator", t);
1470
+ }
1471
+ get separatorMobile() {
1472
+ return this.getAttribute("separator--mobile");
1473
+ }
1474
+ set separatorMobile(t) {
1475
+ this.setAttribute("separator--mobile", t);
1476
+ }
1477
+ get separatorTablet() {
1478
+ return this.getAttribute("separator--tablet");
1479
+ }
1480
+ set separatorTablet(t) {
1481
+ this.setAttribute("separator--tablet", t);
1482
+ }
1483
+ get separatorLaptop() {
1484
+ return this.getAttribute("separator--laptop");
1485
+ }
1486
+ set separatorLaptop(t) {
1487
+ this.setAttribute("separator--laptop", t);
1488
+ }
1489
+ get separatorDesktop() {
1490
+ return this.getAttribute("separator--desktop");
1491
+ }
1492
+ set separatorDesktop(t) {
1493
+ this.setAttribute("separator--desktop", t);
1494
+ }
1495
+ get radius() {
1496
+ return this.getAttribute("radius");
1497
+ }
1498
+ set radius(t) {
1499
+ this.setAttribute("radius", t);
1500
+ }
1501
+ get radiusMobile() {
1502
+ return this.getAttribute("radius--mobile");
1503
+ }
1504
+ set radiusMobile(t) {
1505
+ this.setAttribute("radius--mobile", t);
1506
+ }
1507
+ get radiusTablet() {
1508
+ return this.getAttribute("radius--tablet");
1509
+ }
1510
+ set radiusTablet(t) {
1511
+ this.setAttribute("radius--tablet", t);
1512
+ }
1513
+ get radiusLaptop() {
1514
+ return this.getAttribute("radius--laptop");
1515
+ }
1516
+ set radiusLaptop(t) {
1517
+ this.setAttribute("radius--laptop", t);
1518
+ }
1519
+ get radiusDesktop() {
1520
+ return this.getAttribute("radius--desktop");
1521
+ }
1522
+ set radiusDesktop(t) {
1523
+ this.setAttribute("radius--desktop", t);
1524
+ }
1525
+ get targetBlankAriaLabel() {
1526
+ return this.getAttribute("target-blank-aria-label");
1527
+ }
1528
+ set targetBlankAriaLabel(t) {
1529
+ this.setAttribute("target-blank-aria-label", t);
1530
+ }
1531
+ get backgroundColor() {
1532
+ return this.getAttribute("background-color");
1533
+ }
1534
+ set backgroundColor(t) {
1535
+ t ? this.setAttribute("background-color", t) : this.removeAttribute("background-color");
1536
+ }
1537
+ };
1538
+ B.nativeName = "a";
1539
+ let C = B;
1540
+ customElements.get("px-cell-link") || customElements.define("px-cell-link", C);
1541
+ const Ft = `:host{display:block}.checkbox{display:flex;align-items:flex-start;gap:var(--px-spacing-s-mobile)}.checkbox.all-slots-empty{gap:0}label{font-family:var(--px-font-family);font-size:var(--px-text-size-label-m-mobile);line-height:calc(var(--px-font-line-height-m) * 1em);font-weight:var(--px-font-weight-body);color:var(--px-color-text-neutral-default)}:host(:not([variant="selectable-tag"])) input{-webkit-appearance:none;-moz-appearance:none;appearance:none;margin:0;border-radius:var(--px-radius-main);border:var(--px-size-border-m) solid var(--px-color-border-neutral-default);width:var(--px-size-icon-m);height:var(--px-size-icon-m);flex-shrink:0;transition:box-shadow .3s ease-out,background-color .3s;animation:anim-pop .2s cubic-bezier(.9,-.13,.61,.99) forwards .1s}:host(:not([variant="selectable-tag"])) input:focus-visible{outline:var(--px-focus-outline-mobile) solid var(--px-color-border-focus-outline-default);outline-offset:var(--px-focus-offset-mobile)}:host([checked]) :is(:host(:not([variant="selectable-tag"])) input){background-color:var(--px-color-background-container-primary-default);border-color:var(--px-color-border-none-default);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M17.6726 10.0557L11.1723 16.1192C10.9368 16.3298 10.6319 16.4463 10.3159 16.4463C9.99992 16.4463 9.69501 16.3298 9.45948 16.1192L6.28215 12.9418C6.08774 12.7087 5.98754 12.4113 6.00124 12.1081C6.01494 11.8048 6.14155 11.5177 6.3562 11.303C6.57084 11.0884 6.85799 10.9618 7.16123 10.9481C7.46447 10.9344 7.76187 11.0346 7.995 11.229L10.333 13.567L15.994 8.29143C16.2319 8.08824 16.5389 7.98454 16.8513 8.00187C17.1636 8.0192 17.4573 8.15625 17.6712 8.38451C17.8851 8.61277 18.0029 8.9147 17.9999 9.22753C17.997 9.54036 17.8736 9.84002 17.6555 10.0642L17.6726 10.0557Z' fill='white'/%3E%3C/svg%3E");background-position:center center;background-repeat:no-repeat}:host(:hover) :is(:host(:not([disabled])) :is(:host(:not([variant="selectable-tag"])) input)),:host([hover]) :is(:host(:not([disabled])) :is(:host(:not([variant="selectable-tag"])) input)){border:var(--px-size-border-l) solid var(--px-color-border-state-hover-default)}:host([checked]) :is(:host(:hover) :is(:host(:not([disabled])) :is(:host(:not([variant="selectable-tag"])) input))),:host([checked]) :is(:host([hover]) :is(:host(:not([disabled])) :is(:host(:not([variant="selectable-tag"])) input))){box-shadow:inset 0 0 0 var(--px-size-border-s) var(--px-color-border-state-hover-default),0 0 0 var(--px-size-border-s) var(--px-color-border-state-hover-default)}:host([disabled]) :is(:host(:not([variant="selectable-tag"])) input){background-color:var(--px-color-background-state-disabled-default);border-color:var(--px-color-border-main-default)}:host([checked]) :is(:host([disabled]) :is(:host(:not([variant="selectable-tag"])) input)){background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M17.6726 10.0557L11.1723 16.1192C10.9368 16.3298 10.6319 16.4463 10.3159 16.4463C9.99992 16.4463 9.69501 16.3298 9.45948 16.1192L6.28215 12.9418C6.08774 12.7087 5.98754 12.4113 6.00124 12.1081C6.01494 11.8048 6.14155 11.5177 6.3562 11.303C6.57084 11.0884 6.85799 10.9618 7.16123 10.9481C7.46447 10.9344 7.76187 11.0346 7.995 11.229L10.333 13.567L15.994 8.29143C16.2319 8.08824 16.5389 7.98454 16.8513 8.00187C17.1636 8.0192 17.4573 8.15625 17.6712 8.38451C17.8851 8.61277 18.0029 8.9147 17.9999 9.22753C17.997 9.54036 17.8736 9.84002 17.6555 10.0642L17.6726 10.0557Z' fill='%23000' fill-opacity='0.12'/%3E%3C/svg%3E")}:host([disabled]) :is(:host(:not([variant="selectable-tag"])) input)+label{color:var(--px-color-text-state-disabled-default)}:host([state="error"]:not([disabled])) :is(:host(:not([variant="selectable-tag"])) input){border-color:var(--px-color-border-purpose-error-default)}:host([checked]) :is(:host([state="error"]:not([disabled])) :is(:host(:not([variant="selectable-tag"])) input)){background-color:var(--px-color-background-purpose-error-default)}:host(:hover) :is(:host([checked]) :is(:host([state="error"]:not([disabled])) :is(:host(:not([variant="selectable-tag"])) input))),:host([hover]) :is(:host([checked]) :is(:host([state="error"]:not([disabled])) :is(:host(:not([variant="selectable-tag"])) input))){background-color:var(--px-color-background-purpose-error-default);border-color:var(--px-color-border-purpose-error-default);box-shadow:inset 0 0 0 var(--px-size-border-s) var(--px-color-border-purpose-error-default),0 0 0 var(--px-size-border-s) var(--px-color-border-purpose-error-default)}:host([inverted]) :is(:host(:not([variant="selectable-tag"])) input){border-color:var(--px-color-border-neutral-inverted)}:host([inverted]) :is(:host(:not([variant="selectable-tag"])) input):focus-visible{outline-color:var(--px-color-border-focus-outline-inverted)}:host([checked]) :is(:host([inverted]) :is(:host(:not([variant="selectable-tag"])) input)){background-color:var(--px-color-background-container-primary-inverted);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M17.6726 10.0557L11.1723 16.1192C10.9368 16.3298 10.6319 16.4463 10.3159 16.4463C9.99992 16.4463 9.69501 16.3298 9.45948 16.1192L6.28215 12.9418C6.08774 12.7087 5.98754 12.4113 6.00124 12.1081C6.01494 11.8048 6.14155 11.5177 6.3562 11.303C6.57084 11.0884 6.85799 10.9618 7.16123 10.9481C7.46447 10.9344 7.76187 11.0346 7.995 11.229L10.333 13.567L15.994 8.29143C16.2319 8.08824 16.5389 7.98454 16.8513 8.00187C17.1636 8.0192 17.4573 8.15625 17.6712 8.38451C17.8851 8.61277 18.0029 8.9147 17.9999 9.22753C17.997 9.54036 17.8736 9.84002 17.6555 10.0642L17.6726 10.0557Z' fill='%235C2D91'/%3E%3C/svg%3E")}:host(:hover) :is(:host(:not([disabled])) :is(:host([inverted]) :is(:host(:not([variant="selectable-tag"])) input))),:host([hover]) :is(:host(:not([disabled])) :is(:host([inverted]) :is(:host(:not([variant="selectable-tag"])) input))){border-color:var(--px-color-border-state-hover-inverted)}:host([checked]) :is(:host(:hover) :is(:host(:not([disabled])) :is(:host([inverted]) :is(:host(:not([variant="selectable-tag"])) input)))),:host([checked]) :is(:host([hover]) :is(:host(:not([disabled])) :is(:host([inverted]) :is(:host(:not([variant="selectable-tag"])) input)))){box-shadow:inset 0 0 0 var(--px-size-border-s) var(--px-color-border-state-hover-inverted),0 0 0 var(--px-size-border-s) var(--px-color-border-state-hover-inverted)}:host([disabled]) :is(:host([inverted]) :is(:host(:not([variant="selectable-tag"])) input)){background-color:var(--px-color-background-state-disabled-inverted);border-color:var(--px-color-border-main-inverted)}:host([checked]) :is(:host([disabled]) :is(:host([inverted]) :is(:host(:not([variant="selectable-tag"])) input))){background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M17.6726 10.0557L11.1723 16.1192C10.9368 16.3298 10.6319 16.4463 10.3159 16.4463C9.99992 16.4463 9.69501 16.3298 9.45948 16.1192L6.28215 12.9418C6.08774 12.7087 5.98754 12.4113 6.00124 12.1081C6.01494 11.8048 6.14155 11.5177 6.3562 11.303C6.57084 11.0884 6.85799 10.9618 7.16123 10.9481C7.46447 10.9344 7.76187 11.0346 7.995 11.229L10.333 13.567L15.994 8.29143C16.2319 8.08824 16.5389 7.98454 16.8513 8.00187C17.1636 8.0192 17.4573 8.15625 17.6712 8.38451C17.8851 8.61277 18.0029 8.9147 17.9999 9.22753C17.997 9.54036 17.8736 9.84002 17.6555 10.0642L17.6726 10.0557Z' fill='white' fill-opacity='0.08'/%3E%3C/svg%3E")}:host([disabled]) :is(:host([inverted]) :is(:host(:not([variant="selectable-tag"])) input))+label{color:var(--px-color-text-state-disabled-inverted)}:host([state="error"]:not([disabled])) :is(:host([inverted]) :is(:host(:not([variant="selectable-tag"])) input)){border-color:var(--px-color-border-purpose-error-inverted)}:host([checked]) :is(:host([state="error"]:not([disabled])) :is(:host([inverted]) :is(:host(:not([variant="selectable-tag"])) input))){background-color:var(--px-color-background-purpose-error-inverted);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M17.6726 10.0557L11.1723 16.1192C10.9368 16.3298 10.6319 16.4463 10.3159 16.4463C9.99992 16.4463 9.69501 16.3298 9.45948 16.1192L6.28215 12.9418C6.08774 12.7087 5.98754 12.4113 6.00124 12.1081C6.01494 11.8048 6.14155 11.5177 6.3562 11.303C6.57084 11.0884 6.85799 10.9618 7.16123 10.9481C7.46447 10.9344 7.76187 11.0346 7.995 11.229L10.333 13.567L15.994 8.29143C16.2319 8.08824 16.5389 7.98454 16.8513 8.00187C17.1636 8.0192 17.4573 8.15625 17.6712 8.38451C17.8851 8.61277 18.0029 8.9147 17.9999 9.22753C17.997 9.54036 17.8736 9.84002 17.6555 10.0642L17.6726 10.0557Z' fill='white'/%3E%3C/svg%3E")}:host(:hover) :is(:host([checked]) :is(:host([state="error"]:not([disabled])) :is(:host([inverted]) :is(:host(:not([variant="selectable-tag"])) input)))),:host([hover]) :is(:host([checked]) :is(:host([state="error"]:not([disabled])) :is(:host([inverted]) :is(:host(:not([variant="selectable-tag"])) input)))){background-color:var(--px-color-background-purpose-error-inverted);border-color:var(--px-color-border-purpose-error-inverted);box-shadow:inset 0 0 0 var(--px-size-border-s) var(--px-color-border-purpose-error-inverted),0 0 0 var(--px-size-border-s) var(--px-color-border-purpose-error-inverted)}:host([inverted]) :is(:host(:not([variant="selectable-tag"])) input)+label{color:var(--px-color-text-neutral-inverted)}:host([indeterminate][checked]) :is(:host(:not([variant="selectable-tag"])) input){background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='2' viewBox='0 0 12 2' fill='none'%3E%3Cg clip-path='url(%23clip0_8558_6622)'%3E%3Cpath d='M11 0H1C0.447715 0 0 0.447715 0 1C0 1.55228 0.447715 2 1 2H11C11.5523 2 12 1.55228 12 1C12 0.447715 11.5523 0 11 0Z' fill='white'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_8558_6622'%3E%3Crect width='12' height='2' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E")}:host([disabled]) :is(:host([indeterminate][checked]) :is(:host(:not([variant="selectable-tag"])) input)){background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='2' viewBox='0 0 12 2' fill='none'%3E%3Cg clip-path='url(%23clip0_8685_408)'%3E%3Cpath d='M11 0H1C0.447715 0 0 0.447715 0 1C0 1.55228 0.447715 2 1 2H11C11.5523 2 12 1.55228 12 1C12 0.447715 11.5523 0 11 0Z' fill='black' fill-opacity='0.12'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_8685_408'%3E%3Crect width='12' height='2' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E")}:host([inverted]) :is(:host([indeterminate][checked]) :is(:host(:not([variant="selectable-tag"])) input)){background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='2' viewBox='0 0 12 2' fill='none'%3E%3Cg clip-path='url(%23clip0_8685_6804)'%3E%3Cpath d='M11 0H1C0.447715 0 0 0.447715 0 1C0 1.55228 0.447715 2 1 2H11C11.5523 2 12 1.55228 12 1C12 0.447715 11.5523 0 11 0Z' fill='%235C2D91'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_8685_6804'%3E%3Crect width='12' height='2' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E")}:host([disabled]) :is(:host([inverted]) :is(:host([indeterminate][checked]) :is(:host(:not([variant="selectable-tag"])) input))){background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='2' viewBox='0 0 12 2' fill='none'%3E%3Cg clip-path='url(%23clip0_8685_6817)'%3E%3Cpath d='M11 0H1C0.447715 0 0 0.447715 0 1C0 1.55228 0.447715 2 1 2H11C11.5523 2 12 1.55228 12 1C12 0.447715 11.5523 0 11 0Z' fill='white' fill-opacity='0.08'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_8685_6817'%3E%3Crect width='12' height='2' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E")}:host([state="error"]) :is(:host([inverted]) :is(:host([indeterminate][checked]) :is(:host(:not([variant="selectable-tag"])) input))){background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='2' viewBox='0 0 12 2' fill='none'%3E%3Cg clip-path='url(%23clip0_8685_6256)'%3E%3Cpath d='M11 0H1C0.447715 0 0 0.447715 0 1C0 1.55228 0.447715 2 1 2H11C11.5523 2 12 1.55228 12 1C12 0.447715 11.5523 0 11 0Z' fill='white'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_8685_6256'%3E%3Crect width='12' height='2' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E")}:host(:hover) :is(:host([state="error"]) :is(:host([inverted]) :is(:host([indeterminate][checked]) :is(:host(:not([variant="selectable-tag"])) input)))),:host([hover]) :is(:host([state="error"]) :is(:host([inverted]) :is(:host([indeterminate][checked]) :is(:host(:not([variant="selectable-tag"])) input)))){background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='2' viewBox='0 0 12 2' fill='none'%3E%3Cg clip-path='url(%23clip0_8685_6804)'%3E%3Cpath d='M11 0H1C0.447715 0 0 0.447715 0 1C0 1.55228 0.447715 2 1 2H11C11.5523 2 12 1.55228 12 1C12 0.447715 11.5523 0 11 0Z' fill='white'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_8685_6804'%3E%3Crect width='12' height='2' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E")}.checkbox.selectable-tag{gap:0}:host([variant="selectable-tag"]){display:inline-flex}:host([variant="selectable-tag"]) label{line-height:var(--px-font-line-height-m);display:inline-flex;vertical-align:middle;align-items:center;justify-content:center;gap:var(--px-spacing-xs-mobile);background-color:var(--px-color-background-container-default-inverted);color:var(--px-color-text-neutral-default);padding:var(--px-padding-2xs-mobile) var(--px-padding-xs-mobile);border:var(--px-size-border-m) solid var(--px-color-border-neutral-default);border-radius:var(--px-radius-pill);transition:all .2s ease-in-out 0s}:host([variant="selectable-tag"]) input{-webkit-appearance:none;-moz-appearance:none;appearance:none;margin:0}:host([variant="selectable-tag"]) input:focus-visible+label{outline:var(--px-focus-outline-mobile) solid var(--px-color-border-focus-outline-default);outline-offset:var(--px-focus-offset-mobile)}:host([variant="selectable-tag"]) input:hover:not([disabled],[aria-disabled=true],.loading)+label,:host([variant="selectable-tag"]) input.hover:not([disabled],[aria-disabled=true],.loading)+label{color:var(--px-color-text-brand-default);background:var(--px-color-background-state-hover-bordered-default);border-color:var(--px-color-border-state-hover-default);cursor:pointer}:host([variant="selectable-tag"]) input:active:not([disabled],[aria-disabled=true],.loading)+label{background:var(--px-color-background-state-active-default);color:var(--px-color-text-state-active-inverted);border-color:var(--px-color-border-none-default)}:host([variant="selectable-tag"]) input:checked+label,:host([variant="selectable-tag"]) input:checked+label:hover{background-color:var(--px-color-background-state-active-default);border-color:var(--px-color-border-none-default);color:var(--px-color-text-state-active-inverted)}:host([variant="selectable-tag"]) input[disabled]+label{background:var(--px-color-background-state-disabled-default);color:var(--px-color-text-state-disabled-default);border-color:var(--px-color-border-none-default)}:host([variant="selectable-tag"]):host([inverted]) label{background:var(--px-color-background-container-default-default);color:var(--px-color-text-brand-inverted);border-color:var(--px-color-border-neutral-inverted)}:host([variant="selectable-tag"]):host([inverted]) input:hover:not([disabled],[aria-disabled=true])+label,:host([variant="selectable-tag"]):host([inverted]) input.hover:not([disabled],[aria-disabled=true])+label{color:var(--px-color-text-brand-inverted);background:var(--px-color-background-state-hover-bordered-inverted);border-color:var(--px-color-border-state-hover-inverted)}:host([variant="selectable-tag"]):host([inverted]) input:active:not([disabled],[aria-disabled=true])+label{background:var(--px-color-background-state-active-inverted);color:var(--px-color-text-state-active-default);border-color:var(--px-color-border-none-inverted)}:host([variant="selectable-tag"]):host([inverted]) input:checked+label,:host([variant="selectable-tag"]):host([inverted]) input:checked+label:hover{background-color:var(--px-color-background-state-active-inverted);border-color:var(--px-color-border-none-inverted);color:var(--px-color-text-state-active-default)}:host([variant="selectable-tag"]):host([inverted]) input[disabled]+label{background:var(--px-color-background-state-disabled-inverted);color:var(--px-color-text-state-disabled-inverted);border-color:var(--px-color-border-none-inverted)}:host([variant="selectable-tag"]):host([inverted]) input:focus-visible+label{outline-color:var(--px-color-border-focus-outline-inverted)}@media only screen and (min-width: 768px){.checkbox{gap:var(--px-spacing-s-tablet)}:host(:not([variant="selectable-tag"])) input:focus-visible,:host([variant="selectable-tag"]) input:focus-visible+label{outline-width:var(--px-focus-outline-tablet);outline-offset:var(--px-focus-offset-tablet)}label{font-size:var(--px-text-size-label-m-tablet)}}@media only screen and (min-width: 1025px){.checkbox{gap:var(--px-spacing-s-desktop)}:host(:not([variant="selectable-tag"])) input:focus-visible,:host([variant="selectable-tag"]) input:focus-visible+label{outline-width:var(--px-focus-outline-desktop);outline-offset:var(--px-focus-offset-desktop)}label{font-size:var(--px-text-size-label-m-desktop)}}@keyframes anim-pop{0%{transform:scale(0)}to{transform:scale(1)}}`, V = new CSSStyleSheet();
1542
+ V.replaceSync(Ft);
1543
+ const Ot = ["", "default", "selectable-tag"], tt = ["", "error"], R = class R extends n {
1544
+ constructor() {
1545
+ var t;
1546
+ super(V), this.template = () => `<div class="checkbox">
1547
+ <input type="checkbox"/>
1548
+ <label><slot name="before"></slot><slot name="label"></slot></label>
1549
+ </div>`, this.shadowRoot.innerHTML = this.template(), this.internals = (t = this.attachInternals) == null ? void 0 : t.call(this);
1550
+ }
1551
+ static get observedAttributes() {
1552
+ return [
1553
+ ...super.observedAttributes,
1554
+ "state",
1555
+ "variant",
1556
+ "indeterminate",
1557
+ "inverted",
1558
+ "hover"
1559
+ ];
1560
+ }
1561
+ connectedCallback() {
1562
+ this.hasAttribute("name") || console.error(
1563
+ '<px-checkbox> requires a "name" attribute to function properly.'
1564
+ ), this.$el.addEventListener("change", () => {
1565
+ var e;
1566
+ const t = new Event("change", {
1567
+ bubbles: !0,
1568
+ composed: !0
1569
+ // Allow the event to pass through shadow DOM boundaries
1570
+ });
1571
+ this.dispatchEvent(t), (e = this.internals) == null || e.setFormValue(this.formData()), this.$el.checked ? this.setAttribute("checked", "") : this.removeAttribute("checked");
1572
+ }), this.setupForId(), this.hasAttribute("checked") && (this.checked = !0), this.$iconSlot && (this.$iconSlot.setAttribute("size", "xs"), this.$iconSlot.setAttribute("color", "inherit")), !this.$labelSlot && !this.$iconSlot && this.$checkbox.classList.add("all-slots-empty");
1573
+ }
1574
+ attributeChangedCallback(t, e, r) {
1575
+ if (e !== r)
1576
+ switch (t) {
1577
+ case "state":
1578
+ this.updateAttribute(
1579
+ e,
1580
+ r,
1581
+ tt,
1582
+ t
1583
+ );
1584
+ break;
1585
+ case "variant":
1586
+ this.updateAttribute(
1587
+ e,
1588
+ r,
1589
+ Ot,
1590
+ t
1591
+ );
1592
+ break;
1593
+ case "hover":
1594
+ this.$el.classList.toggle("hover");
1595
+ break;
1596
+ default:
1597
+ super.attributeChangedCallback(t, e, r);
1598
+ break;
1599
+ }
1600
+ }
1601
+ updateAttribute(t, e, r, o) {
1602
+ var i, s;
1603
+ if (!this.checkName(r, e)) {
1604
+ console.error(`${e} is not a valid ${o} value`);
1605
+ return;
1606
+ }
1607
+ t !== null && (o === "variant" ? (i = this.$checkbox) == null || i.classList.toggle(t) : this.$el.classList.toggle(t)), e !== null && (o === "variant" ? (s = this.$checkbox) == null || s.classList.toggle(e) : this.$el.classList.toggle(e));
1608
+ }
1609
+ formData() {
1610
+ if (this.$el.name) {
1611
+ const t = new FormData();
1612
+ return t.append(this.getAttribute("name"), this.$el.value), t;
1613
+ }
1614
+ }
1615
+ // Form-associated callbacks
1616
+ static get formAssociated() {
1617
+ return !0;
1618
+ }
1619
+ // Set default behavior when the element is attached to a form
1620
+ formResetCallback() {
1621
+ this.checked = !1;
1622
+ }
1623
+ formStateRestoreCallback(t) {
1624
+ this.checked = t;
1625
+ }
1626
+ setupForId() {
1627
+ const t = Math.random().toString(36).substr(2, 9);
1628
+ this.$el.setAttribute("id", t), this.$label && this.$label.setAttribute("for", t);
1629
+ }
1630
+ get variant() {
1631
+ return this.getAttribute("variant");
1632
+ }
1633
+ set variant(t) {
1634
+ this.setAttribute("variant", t);
1635
+ }
1636
+ get state() {
1637
+ return this.getAttribute("state");
1638
+ }
1639
+ set state(t) {
1640
+ this.setAttribute("state", t);
1641
+ }
1642
+ get $checkbox() {
1643
+ return this.shadowRoot.querySelector(".checkbox");
1644
+ }
1645
+ get $label() {
1646
+ return this.shadowRoot.querySelector("label");
1647
+ }
1648
+ get $labelSlot() {
1649
+ return this.querySelector('[slot="label"]');
1650
+ }
1651
+ get $iconSlot() {
1652
+ return this.querySelector('px-icon[slot="before"]');
1653
+ }
1654
+ get inverted() {
1655
+ return this.getAttribute("inverted");
1656
+ }
1657
+ set inverted(t) {
1658
+ this.setAttribute("inverted", t);
1659
+ }
1660
+ get checked() {
1661
+ return this.$el.checked;
1662
+ }
1663
+ set checked(t) {
1664
+ this.$el.checked = t, t ? this.setAttribute("checked", "") : this.removeAttribute("checked");
1665
+ }
1666
+ };
1667
+ R.nativeName = "input";
1668
+ let w = R;
1669
+ customElements.get("px-checkbox") || customElements.define("px-checkbox", w);
1670
+ const et = new CSSStyleSheet();
1671
+ et.replaceSync(g);
1672
+ const Zt = ["", "left", "right"];
1673
+ class jt extends p {
1674
+ template() {
1675
+ return `
1676
+ <div class="cell-checkbox">
1677
+ <px-cell hoverable>
1678
+ <px-checkbox slot="prefix" aria-hidden="true" tabindex="-1" ${this.name ? 'name="${this.name"' : ""} ${this.value ? 'value="${this.value"' : ""}></px-checkbox>
1679
+ <slot name="visual" slot="visual"></slot>
1680
+ <slot></slot>
1681
+ <slot name="description" slot="description"></slot>
1682
+ <slot name="suffix" slot="suffix"></slot>
1683
+ </px-cell>
1684
+ `;
1685
+ }
1686
+ constructor() {
1687
+ var t;
1688
+ super(et), this.shadowRoot.innerHTML = this.template(), this.internals = (t = this.attachInternals) == null ? void 0 : t.call(this), this.tabIndex = 0, this.internals && (this.internals.role = "checkbox", this.internals.ariaChecked = `${this.checked}`);
1689
+ }
1690
+ connectedCallback() {
1691
+ if (this.$slotVisual) {
1692
+ const t = this.querySelector('px-img[slot="visual"]');
1693
+ t && h(t);
1694
+ }
1695
+ this.addEventListener("mouseover", () => {
1696
+ this.$checkbox.setAttribute("hover", "");
1697
+ }), this.addEventListener("mouseout", () => {
1698
+ this.$checkbox.removeAttribute("hover");
1699
+ }), this.addEventListener("keypress", (t) => {
1700
+ switch (t.stopPropagation(), t.preventDefault(), t.code) {
1701
+ case "Space":
1702
+ this.click();
1703
+ break;
1704
+ }
1705
+ }), this.addEventListener("click", (t) => {
1706
+ this.checked = !this.checked, t.stopPropagation(), t.preventDefault();
1707
+ }), this.hasAttribute("checked") && (this.checked = !0), u(this);
1708
+ }
1709
+ static get observedAttributes() {
1710
+ return [
1711
+ "inverted",
1712
+ "variant",
1713
+ "disabled",
1714
+ "separator",
1715
+ "separator--mobile",
1716
+ "separator--tablet",
1717
+ "separator--laptop",
1718
+ "separator--desktop",
1719
+ "radius",
1720
+ "radius--mobile",
1721
+ "radius--tablet",
1722
+ "radius--laptop",
1723
+ "radius--desktop",
1724
+ "name",
1725
+ "value",
1726
+ "state",
1727
+ "checked",
1728
+ "checkbox-position",
1729
+ "background-color"
1730
+ ];
1731
+ }
1732
+ attributeChangedCallback(t, e, r) {
1733
+ if (e !== r)
1734
+ switch (t) {
1735
+ case "variant":
1736
+ this.$cell.variant = this.variant;
1737
+ break;
1738
+ case "inverted":
1739
+ k(this.$cell, this.$children, this.inverted, [
1740
+ this.$checkbox
1741
+ ]);
1742
+ break;
1743
+ case "disabled":
1744
+ this.handleDisabledAttributeChange(r !== null);
1745
+ break;
1746
+ case "radius":
1747
+ case "radius--mobile":
1748
+ case "radius--tablet":
1749
+ case "radius--laptop":
1750
+ case "radius--desktop":
1751
+ case "separator":
1752
+ case "separator--mobile":
1753
+ case "separator--tablet":
1754
+ case "separator--laptop":
1755
+ case "separator--desktop":
1756
+ case "background-color":
1757
+ this.$cell.setAttribute(t, this.getAttribute(t) || "");
1758
+ break;
1759
+ case "name":
1760
+ case "value":
1761
+ this.$checkbox && this.$checkbox.setAttribute(t, r);
1762
+ break;
1763
+ case "state":
1764
+ if (this.$checkbox)
1765
+ if (this.checkName(tt, r))
1766
+ this.$checkbox.setAttribute("state", r);
1767
+ else {
1768
+ console.error(`${r} is not a valid state value`);
1769
+ return;
1770
+ }
1771
+ break;
1772
+ case "checked":
1773
+ this.handleCheckedAttributeChange(r);
1774
+ break;
1775
+ case "checkbox-position":
1776
+ this.handleCheckboxPositionChange(r);
1777
+ break;
1778
+ }
1779
+ }
1780
+ handleDisabledAttributeChange(t) {
1781
+ t ? (this.disabled = !0, this.internals && (this.internals.ariaDisabled = "true"), this.$cell.disabled = !0, this.$checkbox.setAttribute("disabled", ""), this.$children.forEach((e) => {
1782
+ e.hasAttribute("disabled") || e.setAttribute("disabled", "");
1783
+ })) : (this.disabled = !1, this.internals && (this.internals.ariaDisabled = "false"), this.$cell.disabled = !1, this.$checkbox.removeAttribute("disabled"), this.$children.forEach((e) => {
1784
+ e.hasAttribute("disabled") && e.removeAttribute("disabled");
1785
+ }));
1786
+ }
1787
+ handleCheckedAttributeChange(t) {
1788
+ var e;
1789
+ (e = this.internals) == null || e.setFormValue(this.formData()), t === null ? (this.internals && (this.internals.ariaChecked = "false"), this.checked = !1, this.$checkbox && this.$checkbox.removeAttribute("checked")) : (this.internals && (this.internals.ariaChecked = "true"), this.checked = !0, this.$checkbox && this.$checkbox.setAttribute("checked", ""), this.dispatchEvent(
1790
+ new Event("change", {
1791
+ bubbles: !0,
1792
+ composed: !0
1793
+ // Allow the event to pass through shadow DOM boundaries
1794
+ })
1795
+ ));
1796
+ }
1797
+ handleCheckboxPositionChange(t) {
1798
+ if (!this.checkName(Zt, t)) {
1799
+ console.error(`${t} is not a valid position value`);
1800
+ return;
1801
+ }
1802
+ this.$checkbox && (t === "" || t === "left" ? this.$checkbox.setAttribute("slot", "prefix") : t === "right" && this.$checkbox.setAttribute("slot", "action-indicator"));
1803
+ }
1804
+ // Form-associated callbacks
1805
+ static get formAssociated() {
1806
+ return !0;
1807
+ }
1808
+ // Set default behavior when the element is attached to a form
1809
+ formResetCallback() {
1810
+ this.checked = !1;
1811
+ }
1812
+ formStateRestoreCallback(t) {
1813
+ this.checked = t;
1814
+ }
1815
+ formData() {
1816
+ if (this.name) {
1817
+ const t = new FormData(), e = this.getAttribute("name");
1818
+ return e && (this.checked ? t.set(e, this.value) : t.delete(e)), t;
1819
+ }
1820
+ }
1821
+ get $cell() {
1822
+ return this.shadowRoot.querySelector("px-cell");
1823
+ }
1824
+ get $el() {
1825
+ return this.shadowRoot.querySelector(".cell-checkbox");
1826
+ }
1827
+ get $checkbox() {
1828
+ return this.shadowRoot.querySelector("px-checkbox");
1829
+ }
1830
+ get $slotVisual() {
1831
+ return this.querySelector('[slot="visual"]');
1832
+ }
1833
+ get $children() {
1834
+ return this.querySelectorAll("px-cell-checkbox > *");
1835
+ }
1836
+ get inverted() {
1837
+ return this.hasAttribute("inverted");
1838
+ }
1839
+ set inverted(t) {
1840
+ t ? this.setAttribute("inverted", "") : this.removeAttribute("inverted");
1841
+ }
1842
+ get variant() {
1843
+ return this.getAttribute("variant");
1844
+ }
1845
+ set variant(t) {
1846
+ this.setAttribute("variant", t);
1847
+ }
1848
+ get disabled() {
1849
+ return this.hasAttribute("disabled");
1850
+ }
1851
+ set disabled(t) {
1852
+ t ? this.setAttribute("disabled", "") : this.removeAttribute("disabled");
1853
+ }
1854
+ get separator() {
1855
+ return this.getAttribute("separator");
1856
+ }
1857
+ set separator(t) {
1858
+ this.setAttribute("separator", t);
1859
+ }
1860
+ get separatorMobile() {
1861
+ return this.getAttribute("separator--mobile");
1862
+ }
1863
+ set separatorMobile(t) {
1864
+ this.setAttribute("separator--mobile", t);
1865
+ }
1866
+ get separatorTablet() {
1867
+ return this.getAttribute("separator--tablet");
1868
+ }
1869
+ set separatorTablet(t) {
1870
+ this.setAttribute("separator--tablet", t);
1871
+ }
1872
+ get separatorLaptop() {
1873
+ return this.getAttribute("separator--laptop");
1874
+ }
1875
+ set separatorLaptop(t) {
1876
+ this.setAttribute("separator--laptop", t);
1877
+ }
1878
+ get separatorDesktop() {
1879
+ return this.getAttribute("separator--desktop");
1880
+ }
1881
+ set separatorDesktop(t) {
1882
+ this.setAttribute("separator--desktop", t);
1883
+ }
1884
+ get radius() {
1885
+ return this.getAttribute("radius");
1886
+ }
1887
+ set radius(t) {
1888
+ this.setAttribute("radius", t);
1889
+ }
1890
+ get radiusMobile() {
1891
+ return this.getAttribute("radius--mobile");
1892
+ }
1893
+ set radiusMobile(t) {
1894
+ this.setAttribute("radius--mobile", t);
1895
+ }
1896
+ get radiusTablet() {
1897
+ return this.getAttribute("radius--tablet");
1898
+ }
1899
+ set radiusTablet(t) {
1900
+ this.setAttribute("radius--tablet", t);
1901
+ }
1902
+ get radiusLaptop() {
1903
+ return this.getAttribute("radius--laptop");
1904
+ }
1905
+ set radiusLaptop(t) {
1906
+ this.setAttribute("radius--laptop", t);
1907
+ }
1908
+ get radiusDesktop() {
1909
+ return this.getAttribute("radius--desktop");
1910
+ }
1911
+ set radiusDesktop(t) {
1912
+ this.setAttribute("radius--desktop", t);
1913
+ }
1914
+ get checked() {
1915
+ return this.hasAttribute("checked");
1916
+ }
1917
+ set checked(t) {
1918
+ t ? this.setAttribute("checked", "") : this.removeAttribute("checked");
1919
+ }
1920
+ get name() {
1921
+ return this.getAttribute("name");
1922
+ }
1923
+ set name(t) {
1924
+ t ? this.setAttribute("name", t) : this.removeAttribute("name");
1925
+ }
1926
+ get state() {
1927
+ return this.getAttribute("state");
1928
+ }
1929
+ set state(t) {
1930
+ t ? this.setAttribute("state", t) : this.removeAttribute("state");
1931
+ }
1932
+ get value() {
1933
+ return this.getAttribute("value");
1934
+ }
1935
+ set value(t) {
1936
+ t ? this.setAttribute("value", t) : this.removeAttribute("value");
1937
+ }
1938
+ get checkboxPosition() {
1939
+ return this.getAttribute("checkbox-position");
1940
+ }
1941
+ set checkboxPosition(t) {
1942
+ t ? this.setAttribute("checkbox-position", t) : this.removeAttribute("checkbox-position");
1943
+ }
1944
+ get backgroundColor() {
1945
+ return this.getAttribute("background-color");
1946
+ }
1947
+ set backgroundColor(t) {
1948
+ t ? this.setAttribute("background-color", t) : this.removeAttribute("background-color");
1949
+ }
1950
+ }
1951
+ customElements.get("px-cell-checkbox") || customElements.define("px-cell-checkbox", jt);
1952
+ const rt = new CSSStyleSheet();
1953
+ rt.replaceSync(g);
1954
+ class Nt extends p {
1955
+ template() {
1956
+ return `
1957
+ <div class="cell-switch">
1958
+ <px-cell hoverable>
1959
+ <px-switch slot="action-indicator" aria-hidden="true" tabindex="-1"></px-switch>
1960
+ <slot name="visual" slot="visual"></slot>
1961
+ <slot></slot>
1962
+ <slot name="description" slot="description"></slot>
1963
+ <slot name="suffix" slot="suffix"></slot>
1964
+ </px-cell>
1965
+ `;
1966
+ }
1967
+ constructor() {
1968
+ var t;
1969
+ super(rt), this.shadowRoot.innerHTML = this.template(), this.internals = (t = this.attachInternals) == null ? void 0 : t.call(this), this.tabIndex = 0, this.internals && (this.internals.role = "checkbox", this.internals.ariaChecked = `${this.checked}`);
1970
+ }
1971
+ connectedCallback() {
1972
+ if (this.$slotVisual) {
1973
+ const t = this.querySelector('px-img[slot="visual"]');
1974
+ t && h(t);
1975
+ }
1976
+ this.addEventListener("mouseover", () => {
1977
+ this.$switch.setAttribute("hover", "");
1978
+ }), this.addEventListener("mouseout", () => {
1979
+ this.$switch.removeAttribute("hover");
1980
+ }), this.addEventListener("keypress", (t) => {
1981
+ switch (t.stopPropagation(), t.preventDefault(), t.code) {
1982
+ case "Space":
1983
+ this.click();
1984
+ break;
1985
+ }
1986
+ }), this.addEventListener("click", (t) => {
1987
+ this.checked = !this.checked, t.stopPropagation(), t.preventDefault();
1988
+ }), this.hasAttribute("checked") && (this.checked = !0), u(this);
1989
+ }
1990
+ static get observedAttributes() {
1991
+ return [
1992
+ "inverted",
1993
+ "variant",
1994
+ "disabled",
1995
+ "separator",
1996
+ "separator--mobile",
1997
+ "separator--tablet",
1998
+ "separator--laptop",
1999
+ "separator--desktop",
2000
+ "radius",
2001
+ "radius--mobile",
2002
+ "radius--tablet",
2003
+ "radius--laptop",
2004
+ "radius--desktop",
2005
+ "name",
2006
+ "value",
2007
+ "checked",
2008
+ "background-color"
2009
+ ];
2010
+ }
2011
+ attributeChangedCallback(t, e, r) {
2012
+ if (e !== r)
2013
+ switch (t) {
2014
+ case "variant":
2015
+ this.$cell.variant = this.variant;
2016
+ break;
2017
+ case "inverted":
2018
+ k(this.$cell, this.$children, this.inverted, [
2019
+ this.$switch
2020
+ ]);
2021
+ break;
2022
+ case "disabled":
2023
+ this.handleDisabledAttributeChange(r !== null);
2024
+ break;
2025
+ case "radius":
2026
+ case "radius--mobile":
2027
+ case "radius--tablet":
2028
+ case "radius--laptop":
2029
+ case "radius--desktop":
2030
+ case "separator":
2031
+ case "separator--mobile":
2032
+ case "separator--tablet":
2033
+ case "separator--laptop":
2034
+ case "separator--desktop":
2035
+ case "background-color":
2036
+ this.$cell.setAttribute(t, this.getAttribute(t) || "");
2037
+ break;
2038
+ case "name":
2039
+ case "value":
2040
+ this.$switch && this.$switch.setAttribute(t, r);
2041
+ break;
2042
+ case "checked":
2043
+ this.handleCheckedAttributeChange(r);
2044
+ break;
2045
+ }
2046
+ }
2047
+ handleDisabledAttributeChange(t) {
2048
+ t ? (this.disabled = !0, this.internals && (this.internals.ariaDisabled = "true"), this.$cell.disabled = !0, this.$switch.setAttribute("disabled", ""), this.$children.forEach((e) => {
2049
+ e.hasAttribute("disabled") || e.setAttribute("disabled", "");
2050
+ })) : (this.disabled = !1, this.internals && (this.internals.ariaDisabled = "false"), this.$cell.disabled = !1, this.$switch.removeAttribute("disabled"), this.$children.forEach((e) => {
2051
+ e.hasAttribute("disabled") && e.removeAttribute("disabled");
2052
+ }));
2053
+ }
2054
+ handleCheckedAttributeChange(t) {
2055
+ var e;
2056
+ (e = this.internals) == null || e.setFormValue(this.formData()), t === null ? (this.internals && (this.internals.ariaChecked = "false"), this.checked = !1, this.$switch && this.$switch.removeAttribute("checked")) : (this.internals && (this.internals.ariaChecked = "true"), this.checked = !0, this.$switch && this.$switch.setAttribute("checked", ""), this.dispatchEvent(
2057
+ new Event("change", {
2058
+ bubbles: !0,
2059
+ composed: !0
2060
+ // Allow the event to pass through shadow DOM boundaries
2061
+ })
2062
+ ));
2063
+ }
2064
+ // Form-associated callbacks
2065
+ static get formAssociated() {
2066
+ return !0;
2067
+ }
2068
+ // Set default behavior when the element is attached to a form
2069
+ formResetCallback() {
2070
+ this.checked = !1;
2071
+ }
2072
+ formStateRestoreCallback(t) {
2073
+ this.checked = t;
2074
+ }
2075
+ formData() {
2076
+ if (this.name) {
2077
+ const t = new FormData(), e = this.getAttribute("name");
2078
+ return e && (this.checked ? t.set(e, this.value) : t.delete(e)), t;
2079
+ }
2080
+ }
2081
+ get $cell() {
2082
+ return this.shadowRoot.querySelector("px-cell");
2083
+ }
2084
+ get $el() {
2085
+ return this.shadowRoot.querySelector(".cell-switch");
2086
+ }
2087
+ get $switch() {
2088
+ return this.shadowRoot.querySelector("px-switch");
2089
+ }
2090
+ get $slotVisual() {
2091
+ return this.querySelector('[slot="visual"]');
2092
+ }
2093
+ get $children() {
2094
+ return this.querySelectorAll("px-cell-switch > *");
2095
+ }
2096
+ get inverted() {
2097
+ return this.hasAttribute("inverted");
2098
+ }
2099
+ set inverted(t) {
2100
+ t ? this.setAttribute("inverted", "") : this.removeAttribute("inverted");
2101
+ }
2102
+ get variant() {
2103
+ return this.getAttribute("variant");
2104
+ }
2105
+ set variant(t) {
2106
+ this.setAttribute("variant", t);
2107
+ }
2108
+ get disabled() {
2109
+ return this.hasAttribute("disabled");
2110
+ }
2111
+ set disabled(t) {
2112
+ t ? this.setAttribute("disabled", "") : this.removeAttribute("disabled");
2113
+ }
2114
+ get separator() {
2115
+ return this.getAttribute("separator");
2116
+ }
2117
+ set separator(t) {
2118
+ this.setAttribute("separator", t);
2119
+ }
2120
+ get separatorMobile() {
2121
+ return this.getAttribute("separator--mobile");
2122
+ }
2123
+ set separatorMobile(t) {
2124
+ this.setAttribute("separator--mobile", t);
2125
+ }
2126
+ get separatorTablet() {
2127
+ return this.getAttribute("separator--tablet");
2128
+ }
2129
+ set separatorTablet(t) {
2130
+ this.setAttribute("separator--tablet", t);
2131
+ }
2132
+ get separatorLaptop() {
2133
+ return this.getAttribute("separator--laptop");
2134
+ }
2135
+ set separatorLaptop(t) {
2136
+ this.setAttribute("separator--laptop", t);
2137
+ }
2138
+ get separatorDesktop() {
2139
+ return this.getAttribute("separator--desktop");
2140
+ }
2141
+ set separatorDesktop(t) {
2142
+ this.setAttribute("separator--desktop", t);
2143
+ }
2144
+ get radius() {
2145
+ return this.getAttribute("radius");
2146
+ }
2147
+ set radius(t) {
2148
+ this.setAttribute("radius", t);
2149
+ }
2150
+ get radiusMobile() {
2151
+ return this.getAttribute("radius--mobile");
2152
+ }
2153
+ set radiusMobile(t) {
2154
+ this.setAttribute("radius--mobile", t);
2155
+ }
2156
+ get radiusTablet() {
2157
+ return this.getAttribute("radius--tablet");
2158
+ }
2159
+ set radiusTablet(t) {
2160
+ this.setAttribute("radius--tablet", t);
2161
+ }
2162
+ get radiusLaptop() {
2163
+ return this.getAttribute("radius--laptop");
2164
+ }
2165
+ set radiusLaptop(t) {
2166
+ this.setAttribute("radius--laptop", t);
2167
+ }
2168
+ get radiusDesktop() {
2169
+ return this.getAttribute("radius--desktop");
2170
+ }
2171
+ set radiusDesktop(t) {
2172
+ this.setAttribute("radius--desktop", t);
2173
+ }
2174
+ get checked() {
2175
+ return this.hasAttribute("checked");
2176
+ }
2177
+ set checked(t) {
2178
+ t ? this.setAttribute("checked", "") : this.removeAttribute("checked");
2179
+ }
2180
+ get name() {
2181
+ return this.getAttribute("name");
2182
+ }
2183
+ set name(t) {
2184
+ t ? this.setAttribute("name", t) : this.removeAttribute("name");
2185
+ }
2186
+ get state() {
2187
+ return this.getAttribute("state");
2188
+ }
2189
+ set state(t) {
2190
+ t ? this.setAttribute("state", t) : this.removeAttribute("state");
2191
+ }
2192
+ get value() {
2193
+ return this.getAttribute("value");
2194
+ }
2195
+ set value(t) {
2196
+ t ? this.setAttribute("value", t) : this.removeAttribute("value");
2197
+ }
2198
+ get backgroundColor() {
2199
+ return this.getAttribute("background-color");
2200
+ }
2201
+ set backgroundColor(t) {
2202
+ t ? this.setAttribute("background-color", t) : this.removeAttribute("background-color");
2203
+ }
2204
+ }
2205
+ customElements.get("px-cell-switch") || customElements.define("px-cell-switch", Nt);
2206
+ const Wt = `:host{display:block}:host(:focus-visible){outline:var(--px-focus-outline-mobile) solid var(--px-color-border-focus-outline-default);outline-offset:var(--px-focus-offset-mobile)}:host([variant="selectable-tag"]:focus-visible){border-radius:var(--px-radius-pill)}:host([inverted]:focus-visible){outline-color:var(--px-color-border-focus-outline-inverted)}.radio{display:flex;align-items:flex-start;gap:var(--px-spacing-s-mobile)}.radio.all-slots-empty{gap:0}label{font-family:var(--px-font-family);font-size:var(--px-text-size-label-m-mobile);line-height:calc(var(--px-font-line-height-m) * 1em);font-weight:var(--px-font-weight-body);color:var(--px-color-text-neutral-default)}:host(:not([variant="selectable-tag"])) input{-webkit-appearance:none;-moz-appearance:none;appearance:none;pointer-events:none;margin:0;border-radius:var(--px-radius-pill);border:var(--px-size-border-m) solid var(--px-color-border-neutral-default);width:var(--px-size-icon-m);height:var(--px-size-icon-m);flex-shrink:0;transition:box-shadow .3s ease-out,background-color .3s;animation:anim-pop .2s cubic-bezier(.9,-.13,.61,.99) forwards .1s}:host([checked]) :is(:host(:not([variant="selectable-tag"])) input){background-color:var(--px-color-background-container-primary-default);border-color:var(--px-color-border-none-default);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Ccircle cx='12' cy='12' r='4' fill='white'/%3E%3C/svg%3E");background-position:center center}:host(:hover) :is(:host(:not([disabled])) :is(:host(:not([variant="selectable-tag"])) input)),:host([hover]) :is(:host(:not([disabled])) :is(:host(:not([variant="selectable-tag"])) input)){border:var(--px-size-border-l) solid var(--px-color-border-state-hover-default)}:host([checked]) :is(:host(:hover) :is(:host(:not([disabled])) :is(:host(:not([variant="selectable-tag"])) input))),:host([checked]) :is(:host([hover]) :is(:host(:not([disabled])) :is(:host(:not([variant="selectable-tag"])) input))){box-shadow:inset 0 0 0 var(--px-size-border-s) var(--px-color-border-state-hover-default),0 0 0 var(--px-size-border-s) var(--px-color-border-state-hover-default)}:host([disabled]) :is(:host(:not([variant="selectable-tag"])) input){background-color:var(--px-color-background-state-disabled-default);border-color:var(--px-color-border-main-default)}:host([checked]) :is(:host([disabled]) :is(:host(:not([variant="selectable-tag"])) input)){background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Ccircle cx='12' cy='12' r='4' fill='black' fill-opacity='0.12'/%3E%3C/svg%3E")}:host([disabled]) :is(:host(:not([variant="selectable-tag"])) input)+label{color:var(--px-color-text-state-disabled-default)}:host([state="error"]:not([disabled])) :is(:host(:not([variant="selectable-tag"])) input){border-color:var(--px-color-border-purpose-error-default)}:host(:hover) :is(:host([state="error"]:not([disabled])) :is(:host(:not([variant="selectable-tag"])) input)),:host([hover]) :is(:host([state="error"]:not([disabled])) :is(:host(:not([variant="selectable-tag"])) input)){border-color:var(--px-color-border-purpose-error-default)}:host([checked]) :is(:host([state="error"]:not([disabled])) :is(:host(:not([variant="selectable-tag"])) input)){background-color:var(--px-color-background-purpose-error-default)}:host(:hover) :is(:host([checked]) :is(:host([state="error"]:not([disabled])) :is(:host(:not([variant="selectable-tag"])) input))),:host([hover]) :is(:host([checked]) :is(:host([state="error"]:not([disabled])) :is(:host(:not([variant="selectable-tag"])) input))){background-color:var(--px-color-background-purpose-error-default);border-color:var(--px-color-border-purpose-error-default);box-shadow:inset 0 0 0 var(--px-size-border-s) var(--px-color-border-purpose-error-default),0 0 0 var(--px-size-border-s) var(--px-color-border-purpose-error-default)}:host(:not([variant="selectable-tag"])) input[inverted]{border-color:var(--px-color-border-neutral-inverted)}:host([checked]) :is(:host(:not([variant="selectable-tag"])) input[inverted]){background-color:var(--px-color-background-container-primary-inverted);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Ccircle cx='12' cy='12' r='4' fill='%235C2D91'/%3E%3C/svg%3E");border-color:var(--px-color-border-none-inverted)}:host(:hover) :is(:host(:not([disabled])) :is(:host(:not([variant="selectable-tag"])) input[inverted])),:host([hover]) :is(:host(:not([disabled])) :is(:host(:not([variant="selectable-tag"])) input[inverted])){border-color:var(--px-color-border-state-hover-inverted)}:host([checked]) :is(:host(:hover) :is(:host(:not([disabled])) :is(:host(:not([variant="selectable-tag"])) input[inverted]))),:host([checked]) :is(:host([hover]) :is(:host(:not([disabled])) :is(:host(:not([variant="selectable-tag"])) input[inverted]))){box-shadow:inset 0 0 0 var(--px-size-border-s) var(--px-color-border-state-hover-inverted),0 0 0 var(--px-size-border-s) var(--px-color-border-state-hover-inverted)}:host([disabled]) :is(:host(:not([variant="selectable-tag"])) input[inverted]){background-color:var(--px-color-background-state-disabled-inverted);border-color:var(--px-color-border-main-inverted)}:host([checked]) :is(:host([disabled]) :is(:host(:not([variant="selectable-tag"])) input[inverted])){background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Ccircle cx='12' cy='12' r='4' fill='white' fill-opacity='0.16'/%3E%3C/svg%3E")}:host([disabled]) :is(:host(:not([variant="selectable-tag"])) input[inverted])+label{color:var(--px-color-text-state-disabled-inverted)}:host([state="error"]:not([disabled])) :is(:host(:not([variant="selectable-tag"])) input[inverted]){border-color:var(--px-color-border-purpose-error-inverted)}:host([checked]) :is(:host([state="error"]:not([disabled])) :is(:host(:not([variant="selectable-tag"])) input[inverted])){background-color:var(--px-color-background-purpose-error-inverted);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Ccircle cx='12' cy='12' r='4' fill='white'/%3E%3C/svg%3E")}:host(:hover) :is(:host([checked]) :is(:host([state="error"]:not([disabled])) :is(:host(:not([variant="selectable-tag"])) input[inverted]))),:host([hover]) :is(:host([checked]) :is(:host([state="error"]:not([disabled])) :is(:host(:not([variant="selectable-tag"])) input[inverted]))){background-color:var(--px-color-background-purpose-error-inverted);border-color:var(--px-color-border-purpose-error-inverted);box-shadow:inset 0 0 0 var(--px-size-border-s) var(--px-color-border-purpose-error-inverted),0 0 0 var(--px-size-border-s) var(--px-color-border-purpose-error-inverted)}:host(:not([variant="selectable-tag"])) input[inverted]+label{color:var(--px-color-text-neutral-inverted)}.radio.selectable-tag{gap:0}:host([variant="selectable-tag"]){display:inline-flex}:host([variant="selectable-tag"]) label{line-height:var(--px-font-line-height-m);display:inline-flex;vertical-align:middle;align-items:center;justify-content:center;gap:var(--px-spacing-xs-mobile);background-color:var(--px-color-background-container-default-inverted);color:var(--px-color-text-neutral-default);padding:var(--px-padding-2xs-mobile) var(--px-padding-xs-mobile);border:var(--px-size-border-m) solid var(--px-color-border-neutral-default);border-radius:var(--px-radius-pill);transition:all .2s ease-in-out 0s}:host([variant="selectable-tag"]) input{-webkit-appearance:none;-moz-appearance:none;appearance:none;margin:0}:host([variant="selectable-tag"]) input:hover:not([disabled],[aria-disabled=true])+label,:host([variant="selectable-tag"]) input.hover:not([disabled],[aria-disabled=true])+label{color:var(--px-color-text-brand-default);background:var(--px-color-background-state-hover-bordered-default);border-color:var(--px-color-border-state-hover-default);cursor:pointer}:host([variant="selectable-tag"]) input:active:not([disabled],[aria-disabled=true])+label{background:var(--px-color-background-state-active-default);color:var(--px-color-text-state-active-inverted);border-color:var(--px-color-border-none-default)}:host([variant="selectable-tag"]) input:checked+label,:host([variant="selectable-tag"]) input:checked+label:hover{background-color:var(--px-color-background-state-active-default);border-color:var(--px-color-border-none-default);color:var(--px-color-text-state-active-inverted)}:host([variant="selectable-tag"]) input[disabled]+label{background:var(--px-color-background-state-disabled-default);color:var(--px-color-text-state-disabled-default);border-color:var(--px-color-border-none-default)}:host([variant="selectable-tag"]):host([inverted]) label{background:var(--px-color-background-container-default-default);color:var(--px-color-text-brand-inverted);border-color:var(--px-color-border-neutral-inverted)}:host([variant="selectable-tag"]):host([inverted]) input:hover:not([disabled],[aria-disabled=true])+label,:host([variant="selectable-tag"]):host([inverted]) input.hover:not([disabled],[aria-disabled=true])+label{color:var(--px-color-text-brand-inverted);background:var(--px-color-background-state-hover-bordered-inverted);border-color:var(--px-color-border-state-hover-inverted)}:host([variant="selectable-tag"]):host([inverted]) input:active:not([disabled],[aria-disabled=true])+label{background:var(--px-color-background-state-active-inverted);color:var(--px-color-text-state-active-default);border-color:var(--px-color-border-none-inverted)}:host([variant="selectable-tag"]):host([inverted]) input:checked+label,:host([variant="selectable-tag"]):host([inverted]) input:checked+label:hover{background-color:var(--px-color-background-state-active-inverted);border-color:var(--px-color-border-none-inverted);color:var(--px-color-text-state-active-default)}:host([variant="selectable-tag"]):host([inverted]) input[disabled]+label{background:var(--px-color-background-state-disabled-inverted);color:var(--px-color-text-state-disabled-inverted);border-color:var(--px-color-border-none-inverted)}@media only screen and (min-width: 768px){.radio{gap:var(--px-spacing-s-desktop)}:host(:focus-visible){outline-width:var(--px-focus-outline-desktop);outline-offset:var(--px-focus-offset-desktop)}label{font-size:var(--px-text-size-label-m-desktop)}}@media only screen and (min-width: 1025px){.radio{gap:var(--px-spacing-s-desktop)}:host(:focus-visible){outline-width:var(--px-focus-outline-desktop);outline-offset:var(--px-focus-offset-desktop)}label{font-size:var(--px-text-size-label-m-desktop)}}@keyframes anim-pop{0%{transform:scale(0)}to{transform:scale(1)}}`, ot = new CSSStyleSheet();
2207
+ ot.replaceSync(Wt);
2208
+ const it = ["", "default", "selectable-tag"], at = ["", "error"], _ = class _ extends n {
2209
+ constructor() {
2210
+ super(ot), this.template = () => `<div class="radio" tabindex="-1">
2211
+ <input type="radio" tabindex="-1" />
2212
+ <label><slot name="before"></slot><slot name="label"></slot></label>
2213
+ </div>`, this.shadowRoot && (this.shadowRoot.innerHTML = this.template());
2214
+ }
2215
+ static get observedAttributes() {
2216
+ return [...super.observedAttributes, "hover", "inverted"];
2217
+ }
2218
+ attributeChangedCallback(t, e, r) {
2219
+ if (e !== r)
2220
+ switch (t) {
2221
+ case "hover":
2222
+ this.$el.classList.toggle("hover");
2223
+ break;
2224
+ default:
2225
+ super.attributeChangedCallback(t, e, r);
2226
+ break;
2227
+ }
2228
+ }
2229
+ get $radio() {
2230
+ return this.shadowRoot.querySelector(".radio");
2231
+ }
2232
+ get $labelSlot() {
2233
+ return this.querySelector('[slot="label"]');
2234
+ }
2235
+ get $iconSlot() {
2236
+ return this.querySelector('px-icon[slot="before"]');
2237
+ }
2238
+ get inverted() {
2239
+ return this.getAttribute("inverted");
2240
+ }
2241
+ set inverted(t) {
2242
+ this.setAttribute("inverted", t);
2243
+ }
2244
+ };
2245
+ _.nativeName = "input";
2246
+ let f = _;
2247
+ customElements.get("px-radio-base") || customElements.define("px-radio-base", f);
2248
+ const I = class I extends f {
2249
+ constructor() {
2250
+ var t, e;
2251
+ super(), this.internals = (t = this.attachInternals) == null ? void 0 : t.call(this), this.tabIndex = ((e = this.parentElement) == null ? void 0 : e.firstElementChild) === this ? 0 : -1, this.internals && (this.internals.role = "radio", this.internals.ariaChecked = `${this.checked}`);
2252
+ }
2253
+ static get observedAttributes() {
2254
+ return [...super.observedAttributes, "state", "variant", "inverted"];
2255
+ }
2256
+ connectedCallback() {
2257
+ this.addEventListener("keypress", (t) => {
2258
+ switch (t.stopPropagation(), t.preventDefault(), t.code) {
2259
+ case "Space":
2260
+ this.click();
2261
+ break;
2262
+ }
2263
+ }), this.addEventListener("click", (t) => {
2264
+ this.checked || (this.checked = !0), t.stopPropagation(), t.preventDefault();
2265
+ }), this.setupForId(), this.hasAttribute("checked") && (this.checked = !0), this.$iconSlot && (this.$iconSlot.setAttribute("size", "xs"), this.$iconSlot.setAttribute("color", "inherit")), !this.$labelSlot && !this.$iconSlot ? this.$radio.classList.add("all-slots-empty") : this.$radio.classList.remove("all-slots-empty");
2266
+ }
2267
+ attributeChangedCallback(t, e, r) {
2268
+ if (e !== r)
2269
+ switch (t) {
2270
+ case "state":
2271
+ this.updateAttribute(e, r, at, t);
2272
+ break;
2273
+ case "variant":
2274
+ this.updateAttribute(
2275
+ e,
2276
+ r,
2277
+ it,
2278
+ t
2279
+ );
2280
+ break;
2281
+ case "checked":
2282
+ this.handleCheckedChange(r !== null);
2283
+ break;
2284
+ default:
2285
+ super.attributeChangedCallback(t, e, r);
2286
+ break;
2287
+ }
2288
+ }
2289
+ // Form-associated callbacks
2290
+ static get formAssociated() {
2291
+ return !0;
2292
+ }
2293
+ // Set default behavior when the element is attached to a form
2294
+ formResetCallback() {
2295
+ this.checked = !1;
2296
+ }
2297
+ formStateRestoreCallback(t) {
2298
+ this.checked = t;
2299
+ }
2300
+ updateAttribute(t, e, r, o) {
2301
+ var i, s;
2302
+ if (!this.checkName(r, e)) {
2303
+ console.error(`${e} is not a valid ${o} value`);
2304
+ return;
2305
+ }
2306
+ t !== null && (o === "variant" ? (i = this.$el.parentElement) == null || i.classList.toggle(t) : this.$el.classList.toggle(t)), e !== null && (o === "variant" ? (s = this.$el.parentElement) == null || s.classList.toggle(e) : this.$el.classList.toggle(e));
2307
+ }
2308
+ handleCheckedChange(t) {
2309
+ var e;
2310
+ this.$el.checked = t, (e = this.internals) == null || e.setFormValue(this.formData()), t ? (this.tabIndex = 0, this.internals && (this.internals.ariaChecked = "true"), this.setAttribute("checked", "")) : (this.tabIndex = -1, this.removeAttribute("checked"), this.internals && (this.internals.ariaChecked = "false")), t && this.dispatchEvent(
2311
+ new Event("change", {
2312
+ bubbles: !0,
2313
+ composed: !0
2314
+ // Allow the event to pass through shadow DOM boundaries
2315
+ })
2316
+ );
2317
+ }
2318
+ formData() {
2319
+ if (this.$el.name) {
2320
+ const t = new FormData(), e = this.getAttribute("name");
2321
+ return e && (this.$el.checked ? t.set(e, this.$el.value) : t.delete(e)), t;
2322
+ }
2323
+ }
2324
+ setupForId() {
2325
+ const t = Math.random().toString(36).substr(2, 9);
2326
+ this.$el.setAttribute("id", t), this.$label && this.$label.setAttribute("for", t);
2327
+ }
2328
+ checkName(t, e) {
2329
+ return t.includes(e);
2330
+ }
2331
+ get state() {
2332
+ return this.getAttribute("state");
2333
+ }
2334
+ set state(t) {
2335
+ this.setAttribute("state", t);
2336
+ }
2337
+ get disabled() {
2338
+ return this.getAttribute("disabled") !== null;
2339
+ }
2340
+ set disabled(t) {
2341
+ t ? this.setAttribute("disabled", "") : this.removeAttribute("disabled");
2342
+ }
2343
+ get $label() {
2344
+ return this.shadowRoot.querySelector("label");
2345
+ }
2346
+ get inverted() {
2347
+ return this.getAttribute("inverted");
2348
+ }
2349
+ set inverted(t) {
2350
+ this.setAttribute("inverted", t);
2351
+ }
2352
+ get checked() {
2353
+ return this.$el.checked;
2354
+ }
2355
+ set checked(t) {
2356
+ t ? this.setAttribute("checked", t ? "" : "false") : this.removeAttribute("checked");
2357
+ }
2358
+ get $radio() {
2359
+ return this.shadowRoot.querySelector(".radio");
2360
+ }
2361
+ get $labelSlot() {
2362
+ return this.querySelector('[slot="label"]');
2363
+ }
2364
+ get $iconSlot() {
2365
+ return this.querySelector('px-icon[slot="before"]');
2366
+ }
2367
+ };
2368
+ I.nativeName = "input";
2369
+ let z = I;
2370
+ customElements.get("px-radio") || customElements.define("px-radio", z);
2371
+ const Kt = "div[role=radiogroup]{display:flex;flex-direction:column;gap:var( --px-radiogroup-gap--mobile, var(--px-spacing-xs-mobile) )}div[role=radiogroup].selectable-tag{display:inline-flex;flex-direction:row}@media screen and (min-width: 768px){div[role=radiogroup]{gap:var( --px-radiogroup-gap--tablet, var(--px-spacing-xs-desktop) )}}@media screen and (min-width: 1025px){div[role=radiogroup]{gap:var( --px-radiogroup-gap--laptop, var(--px-spacing-xs-desktop) )}}", st = new CSSStyleSheet();
2372
+ st.replaceSync(Kt);
2373
+ const Ut = [
2374
+ "",
2375
+ "none",
2376
+ "2xs",
2377
+ "xs",
2378
+ "s",
2379
+ "default",
2380
+ "l"
2381
+ ], q = class q extends n {
2382
+ constructor() {
2383
+ var t;
2384
+ super(st), this.template = () => `<div role="radiogroup">
2385
+ <slot></slot>
2386
+ </div>`, this.handleKeyDown = () => {
2387
+ var r;
2388
+ const e = this.currentCheckedRadio ? ((r = this.currentCheckedRadio) == null ? void 0 : r.nextElementSibling) ?? this.$radioList[0] : this.$radioList[1];
2389
+ e.checked = !0, e.focus();
2390
+ }, this.handleKeyUp = () => {
2391
+ var r;
2392
+ const e = ((r = this.currentCheckedRadio) == null ? void 0 : r.previousElementSibling) ?? this.$radioList[this.$radioList.length - 1];
2393
+ e.checked = !0, e.focus();
2394
+ }, this.handleRadioChange = (e) => {
2395
+ const r = e.target;
2396
+ if (r.localName === "px-tile-radio" || r.localName === "px-radio" || r.localName === "px-cell-radio") {
2397
+ this.currentCheckedRadio = r;
2398
+ const o = r.getAttribute("name");
2399
+ o && this.currentCheckedRadio.checked && this.uncheckOtherRadios(o);
2400
+ }
2401
+ }, this.shadowRoot.innerHTML = this.template(), this.internals = (t = this.attachInternals) == null ? void 0 : t.call(this);
2402
+ }
2403
+ static get observedAttributes() {
2404
+ return [
2405
+ ...super.observedAttributes,
2406
+ "name",
2407
+ "gap",
2408
+ "variant",
2409
+ "required",
2410
+ "disabled",
2411
+ "state",
2412
+ "inverted"
2413
+ ];
2414
+ }
2415
+ connectedCallback() {
2416
+ (!this.hasAttribute("name") || this.getAttribute("name") === "") && console.error(
2417
+ '<px-radio-group> requires a "name" attribute to function properly.'
2418
+ ), this.addEventListener("change", this.handleRadioChange), this.addEventListener("keydown", (t) => {
2419
+ switch (t.code) {
2420
+ case "ArrowUp":
2421
+ case "ArrowDown":
2422
+ t.stopPropagation(), t.preventDefault();
2423
+ }
2424
+ }), this.addEventListener("keyup", (t) => {
2425
+ switch (t.stopPropagation(), t.preventDefault(), t.code) {
2426
+ case "ArrowUp":
2427
+ case "ArrowLeft":
2428
+ this.handleKeyUp();
2429
+ break;
2430
+ case "ArrowDown":
2431
+ case "ArrowRight":
2432
+ this.handleKeyDown();
2433
+ break;
2434
+ }
2435
+ });
2436
+ }
2437
+ disconnectedCallback() {
2438
+ this.removeEventListener("change", this.handleRadioChange);
2439
+ }
2440
+ attributeChangedCallback(t, e, r) {
2441
+ e !== r && (t === "gap" ? this.updateGap(e, r, Ut) : t === "variant" ? this.updateVariant(e, r, it) : this.$radioList.forEach((o) => {
2442
+ if (r === null)
2443
+ o.removeAttribute(t);
2444
+ else
2445
+ switch (t) {
2446
+ case "required":
2447
+ this.$el.ariaRequired = "true";
2448
+ break;
2449
+ case "state":
2450
+ r === "error" && (this.$el.ariaInvalid = "true", o.setAttribute(t, r));
2451
+ break;
2452
+ case "disabled":
2453
+ this.$el.ariaDisabled = "true", o.setAttribute(t, r);
2454
+ break;
2455
+ default:
2456
+ o.setAttribute(t, r);
2457
+ break;
2458
+ }
2459
+ }));
2460
+ }
2461
+ uncheckOtherRadios(t) {
2462
+ this.querySelectorAll(
2463
+ `px-radio[name="${t}"], px-tile-radio[name="${t}"], px-cell-radio[name="${t}"]`
2464
+ ).forEach((r) => {
2465
+ r !== this.currentCheckedRadio && (r.checked = !1);
2466
+ });
2467
+ }
2468
+ updateVariant(t, e, r) {
2469
+ if (!this.checkName(r, e)) {
2470
+ console.error(`${e} is not a valid variant value`);
2471
+ return;
2472
+ }
2473
+ t !== null && t !== "" && this.$el.classList.toggle(t), e !== null && e !== "" && (this.$el.classList.toggle(e), this.$radioList.forEach((o) => {
2474
+ o.setAttribute("variant", e);
2475
+ }));
2476
+ }
2477
+ updateGap(t, e, r) {
2478
+ if (!this.checkName(r, e)) {
2479
+ console.error(`${e} is not a valid gap value`);
2480
+ return;
2481
+ }
2482
+ this.updateGapStyle(t), this.updateGapStyle(e);
2483
+ }
2484
+ updateGapStyle(t) {
2485
+ t !== null && t !== "" && t !== "default" && (this.$el.style.setProperty(
2486
+ "--px-radiogroup-gap--mobile",
2487
+ `var(--px-spacing-${t}-mobile)`
2488
+ ), this.$el.style.setProperty(
2489
+ "--px-radiogroup-gap--tablet",
2490
+ `var(--px-spacing-${t}-tablet)`
2491
+ ), this.$el.style.setProperty(
2492
+ "--px-radiogroup-gap--laptop",
2493
+ `var(--px-spacing-${t}-desktop)`
2494
+ ));
2495
+ }
2496
+ checkName(t, e) {
2497
+ return t.includes(e);
2498
+ }
2499
+ get $radioList() {
2500
+ return this.querySelectorAll(
2501
+ "px-radio, px-tile-radio, px-cell-radio"
2502
+ );
2503
+ }
2504
+ get gap() {
2505
+ return this.getAttribute("gap");
2506
+ }
2507
+ set gap(t) {
2508
+ this.setAttribute("gap", t);
2509
+ }
2510
+ get variant() {
2511
+ return this.getAttribute("variant");
2512
+ }
2513
+ set variant(t) {
2514
+ this.setAttribute("variant", t);
2515
+ }
2516
+ get state() {
2517
+ return this.getAttribute("state");
2518
+ }
2519
+ set state(t) {
2520
+ this.setAttribute("state", t);
2521
+ }
2522
+ get $label() {
2523
+ return this.shadowRoot.querySelector("label");
2524
+ }
2525
+ get inverted() {
2526
+ return this.getAttribute("inverted");
2527
+ }
2528
+ set inverted(t) {
2529
+ this.setAttribute("inverted", t);
2530
+ }
2531
+ };
2532
+ q.nativeName = "div";
2533
+ let S = q;
2534
+ customElements.get("px-radio-group") || customElements.define("px-radio-group", S);
2535
+ const nt = new CSSStyleSheet();
2536
+ nt.replaceSync(g);
2537
+ const Gt = ["", "left", "right"];
2538
+ class Yt extends p {
2539
+ template() {
2540
+ return `
2541
+ <div class="cell-radio">
2542
+ <px-cell hoverable>
2543
+ <px-radio-base slot="prefix" aria-hidden="true" tabindex="-1"></px-radio-base>
2544
+ <slot name="visual" slot="visual"></slot>
2545
+ <slot></slot>
2546
+ <slot name="description" slot="description"></slot>
2547
+ <slot name="suffix" slot="suffix"></slot>
2548
+ </px-cell>
2549
+ `;
2550
+ }
2551
+ constructor() {
2552
+ var t, e;
2553
+ super(nt), this.shadowRoot.innerHTML = this.template(), this.internals = (t = this.attachInternals) == null ? void 0 : t.call(this), this.tabIndex = ((e = this.parentElement) == null ? void 0 : e.firstElementChild) === this ? 0 : -1, this.internals && (this.internals.role = "radio", this.internals.ariaChecked = `${this.checked}`);
2554
+ }
2555
+ connectedCallback() {
2556
+ if (this.$slotVisual) {
2557
+ const t = this.querySelector('px-img[slot="visual"]');
2558
+ t && h(t);
2559
+ }
2560
+ this.addEventListener("mouseover", () => {
2561
+ this.$radio.setAttribute("hover", "");
2562
+ }), this.addEventListener("mouseout", () => {
2563
+ this.$radio.removeAttribute("hover");
2564
+ }), this.addEventListener("keypress", (t) => {
2565
+ switch (t.stopPropagation(), t.preventDefault(), t.code) {
2566
+ case "Space":
2567
+ this.click();
2568
+ break;
2569
+ }
2570
+ }), this.addEventListener("click", (t) => {
2571
+ this.checked || (this.checked = !0), t.stopPropagation(), t.preventDefault();
2572
+ }), this.hasAttribute("checked") && (this.checked = !0), u(this);
2573
+ }
2574
+ static get observedAttributes() {
2575
+ return [
2576
+ "inverted",
2577
+ "variant",
2578
+ "disabled",
2579
+ "separator",
2580
+ "separator--mobile",
2581
+ "separator--tablet",
2582
+ "separator--laptop",
2583
+ "separator--desktop",
2584
+ "radius",
2585
+ "radius--mobile",
2586
+ "radius--tablet",
2587
+ "radius--laptop",
2588
+ "radius--desktop",
2589
+ "name",
2590
+ "value",
2591
+ "state",
2592
+ "checked",
2593
+ "radio-position",
2594
+ "background-color"
2595
+ ];
2596
+ }
2597
+ attributeChangedCallback(t, e, r) {
2598
+ if (e !== r)
2599
+ switch (t) {
2600
+ case "variant":
2601
+ this.$cell.variant = this.variant;
2602
+ break;
2603
+ case "inverted":
2604
+ k(this.$cell, this.$children, this.inverted, [
2605
+ this.$radio
2606
+ ]);
2607
+ break;
2608
+ case "disabled":
2609
+ this.handleDisabledAttributeChange(r !== null);
2610
+ break;
2611
+ case "radius":
2612
+ case "radius--mobile":
2613
+ case "radius--tablet":
2614
+ case "radius--laptop":
2615
+ case "radius--desktop":
2616
+ case "separator":
2617
+ case "separator--mobile":
2618
+ case "separator--tablet":
2619
+ case "separator--laptop":
2620
+ case "separator--desktop":
2621
+ case "background-color":
2622
+ this.$cell.setAttribute(t, this.getAttribute(t) || "");
2623
+ break;
2624
+ case "name":
2625
+ case "value":
2626
+ this.$radio && this.$radio.setAttribute(t, r);
2627
+ break;
2628
+ case "state":
2629
+ if (this.$radio)
2630
+ if (this.checkName(at, r))
2631
+ this.$radio.setAttribute("state", r);
2632
+ else {
2633
+ console.error(`${r} is not a valid state value`);
2634
+ return;
2635
+ }
2636
+ break;
2637
+ case "checked":
2638
+ this.handleCheckedAttributeChange(r);
2639
+ break;
2640
+ case "radio-position":
2641
+ this.handleRadioPositionChange(r);
2642
+ break;
2643
+ }
2644
+ }
2645
+ handleDisabledAttributeChange(t) {
2646
+ t ? (this.disabled = !0, this.internals && (this.internals.ariaDisabled = "true"), this.$cell.disabled = !0, this.$radio.setAttribute("disabled", ""), this.$children.forEach((e) => {
2647
+ e.hasAttribute("disabled") || e.setAttribute("disabled", "");
2648
+ })) : (this.disabled = !1, this.internals && (this.internals.ariaDisabled = "false"), this.$cell.disabled = !1, this.$radio.removeAttribute("disabled"), this.$children.forEach((e) => {
2649
+ e.hasAttribute("disabled") && e.removeAttribute("disabled");
2650
+ }));
2651
+ }
2652
+ handleCheckedAttributeChange(t) {
2653
+ var e;
2654
+ (e = this.internals) == null || e.setFormValue(this.formData()), t === null ? (this.internals && (this.internals.ariaChecked = "false"), this.setAttribute("tabIndex", "-1"), this.checked = !1, this.$radio && this.$radio.removeAttribute("checked")) : (this.internals && (this.internals.ariaChecked = "true"), this.setAttribute("tabIndex", "0"), this.checked = !0, this.$radio && this.$radio.setAttribute("checked", ""), this.dispatchEvent(
2655
+ new Event("change", {
2656
+ bubbles: !0,
2657
+ composed: !0
2658
+ // Allow the event to pass through shadow DOM boundaries
2659
+ })
2660
+ ));
2661
+ }
2662
+ handleRadioPositionChange(t) {
2663
+ if (!this.checkName(Gt, t)) {
2664
+ console.error(`${t} is not a valid position value`);
2665
+ return;
2666
+ }
2667
+ this.$radio && (t === "" || t === "left" ? this.$radio.setAttribute("slot", "prefix") : t === "right" && this.$radio.setAttribute("slot", "action-indicator"));
2668
+ }
2669
+ // Form-associated callbacks
2670
+ static get formAssociated() {
2671
+ return !0;
2672
+ }
2673
+ // Set default behavior when the element is attached to a form
2674
+ formResetCallback() {
2675
+ this.checked = !1;
2676
+ }
2677
+ formStateRestoreCallback(t) {
2678
+ this.checked = t;
2679
+ }
2680
+ formData() {
2681
+ if (this.name) {
2682
+ const t = new FormData(), e = this.getAttribute("name");
2683
+ return e && (this.checked ? t.set(e, this.$radio.value) : t.delete(e)), t;
2684
+ }
2685
+ }
2686
+ get $cell() {
2687
+ return this.shadowRoot.querySelector("px-cell");
2688
+ }
2689
+ get $el() {
2690
+ return this.shadowRoot.querySelector(".cell-radio");
2691
+ }
2692
+ get $radio() {
2693
+ return this.shadowRoot.querySelector("px-radio-base");
2694
+ }
2695
+ get $slotVisual() {
2696
+ return this.querySelector('[slot="visual"]');
2697
+ }
2698
+ get $children() {
2699
+ return this.querySelectorAll("px-cell-radio > *");
2700
+ }
2701
+ get inverted() {
2702
+ return this.hasAttribute("inverted");
2703
+ }
2704
+ set inverted(t) {
2705
+ t ? this.setAttribute("inverted", "") : this.removeAttribute("inverted");
2706
+ }
2707
+ get variant() {
2708
+ return this.getAttribute("variant");
2709
+ }
2710
+ set variant(t) {
2711
+ this.setAttribute("variant", t);
2712
+ }
2713
+ get disabled() {
2714
+ return this.hasAttribute("disabled");
2715
+ }
2716
+ set disabled(t) {
2717
+ t ? this.setAttribute("disabled", "") : this.removeAttribute("disabled");
2718
+ }
2719
+ get separator() {
2720
+ return this.getAttribute("separator");
2721
+ }
2722
+ set separator(t) {
2723
+ this.setAttribute("separator", t);
2724
+ }
2725
+ get separatorMobile() {
2726
+ return this.getAttribute("separator--mobile");
2727
+ }
2728
+ set separatorMobile(t) {
2729
+ this.setAttribute("separator--mobile", t);
2730
+ }
2731
+ get separatorTablet() {
2732
+ return this.getAttribute("separator--tablet");
2733
+ }
2734
+ set separatorTablet(t) {
2735
+ this.setAttribute("separator--tablet", t);
2736
+ }
2737
+ get separatorLaptop() {
2738
+ return this.getAttribute("separator--laptop");
2739
+ }
2740
+ set separatorLaptop(t) {
2741
+ this.setAttribute("separator--laptop", t);
2742
+ }
2743
+ get separatorDesktop() {
2744
+ return this.getAttribute("separator--desktop");
2745
+ }
2746
+ set separatorDesktop(t) {
2747
+ this.setAttribute("separator--desktop", t);
2748
+ }
2749
+ get radius() {
2750
+ return this.getAttribute("radius");
2751
+ }
2752
+ set radius(t) {
2753
+ this.setAttribute("radius", t);
2754
+ }
2755
+ get radiusMobile() {
2756
+ return this.getAttribute("radius--mobile");
2757
+ }
2758
+ set radiusMobile(t) {
2759
+ this.setAttribute("radius--mobile", t);
2760
+ }
2761
+ get radiusTablet() {
2762
+ return this.getAttribute("radius--tablet");
2763
+ }
2764
+ set radiusTablet(t) {
2765
+ this.setAttribute("radius--tablet", t);
2766
+ }
2767
+ get radiusLaptop() {
2768
+ return this.getAttribute("radius--laptop");
2769
+ }
2770
+ set radiusLaptop(t) {
2771
+ this.setAttribute("radius--laptop", t);
2772
+ }
2773
+ get radiusDesktop() {
2774
+ return this.getAttribute("radius--desktop");
2775
+ }
2776
+ set radiusDesktop(t) {
2777
+ this.setAttribute("radius--desktop", t);
2778
+ }
2779
+ get checked() {
2780
+ return this.hasAttribute("checked");
2781
+ }
2782
+ set checked(t) {
2783
+ t ? this.setAttribute("checked", "") : this.removeAttribute("checked");
2784
+ }
2785
+ get name() {
2786
+ return this.getAttribute("name");
2787
+ }
2788
+ set name(t) {
2789
+ t ? this.setAttribute("name", t) : this.removeAttribute("name");
2790
+ }
2791
+ get state() {
2792
+ return this.getAttribute("state");
2793
+ }
2794
+ set state(t) {
2795
+ t ? this.setAttribute("state", t) : this.removeAttribute("state");
2796
+ }
2797
+ get value() {
2798
+ return this.getAttribute("value");
2799
+ }
2800
+ set value(t) {
2801
+ t ? this.setAttribute("value", t) : this.removeAttribute("value");
2802
+ }
2803
+ get radioPosition() {
2804
+ return this.getAttribute("radio-position");
2805
+ }
2806
+ set radioPosition(t) {
2807
+ t ? this.setAttribute("radio-position", t) : this.removeAttribute("radio-position");
2808
+ }
2809
+ get backgroundColor() {
2810
+ return this.getAttribute("background-color");
2811
+ }
2812
+ set backgroundColor(t) {
2813
+ t ? this.setAttribute("background-color", t) : this.removeAttribute("background-color");
2814
+ }
2815
+ }
2816
+ customElements.get("px-cell-radio") || customElements.define("px-cell-radio", Yt);
2817
+ const Jt = ":host{display:block}:host *{box-sizing:border-box}button,a{display:block;font-family:var(--px-font-family);font-size:var(--px-text-size-label-m-mobile);line-height:var(--px-font-line-height-l);color:var(--px-color-text-neutral-default);text-align:center;cursor:pointer;padding:2em 0;height:100%}button:after,a:after{content:attr(data-label);display:block;height:0;width:auto;visibility:hidden;overflow:hidden;-webkit-user-select:none;user-select:none;pointer-events:none;font-weight:var(--px-font-weight-title)}button:focus-visible,a:focus-visible{outline-offset:var(--px-focus-offset-mobile);outline:var(--px-focus-outline-mobile) solid var(--px-color-border-focus-outline-default)}button:hover,a:hover{font-weight:var(--px-font-weight-title);color:var(--px-color-background-container-primary-default)}button{margin:0;border:0;border-bottom:2px solid rgba(0,0,0,0);outline:0;background:inherit}button[aria-expanded=true]{font-weight:var(--px-font-weight-title);color:var(--px-color-background-container-primary-default);border-bottom-color:var(--px-color-background-container-primary-default)}a{text-decoration:none}@media only screen and (min-width: 48em){button,a{font-size:var(--px-text-size-label-m-tablet)}button:focus-visible,a:focus-visible{outline-offset:var(--px-focus-offset-tablet);outline-width:var(--px-focus-outline-tablet)}}@media only screen and (min-width: 64.0625em){button,a{font-size:var(--px-text-size-label-m-laptop)}button:focus-visible,a:focus-visible{outline-offset:var(--px-focus-offset-laptop);outline-width:var(--px-focus-outline-laptop)}}@media only screen and (min-width: 90.0625em){button,a{font-size:var(--px-text-size-label-m-desktop)}button:focus-visible,a:focus-visible{outline-offset:var(--px-focus-offset-desktop);outline-width:var(--px-focus-outline-desktop)}}", dt = new CSSStyleSheet();
2818
+ dt.replaceSync(Jt);
2819
+ class Qt extends p {
2820
+ constructor() {
2821
+ var t;
2822
+ super(), this.template = () => `${this.getAttribute("href") ? `<a href="${this.getAttribute("href")}" data-label="${this.textContent}">
2823
+ <slot></slot>
2824
+ </a>` : `<button data-label="${this.textContent}"><slot></slot></button>`}`, this.shadowRoot.innerHTML = this.template(), this.shadowRoot.adoptedStyleSheets = [dt], this.internals = (t = this.attachInternals) == null ? void 0 : t.call(this), this.internals && (this.internals.role = "listitem");
2825
+ }
2826
+ static get observedAttributes() {
2827
+ return ["for", "href"];
2828
+ }
2829
+ connectedCallback() {
2830
+ this.setAttribute("slot", "header-entries"), this.$button && this.setupButtonA11y(), this.contentObserver = new MutationObserver(() => {
2831
+ this.updateDataLabel();
2832
+ }), this.contentObserver.observe(this, {
2833
+ childList: !0,
2834
+ subtree: !0,
2835
+ characterData: !0
2836
+ }), this.contentObserver = new MutationObserver(() => {
2837
+ this.updateDataLabel();
2838
+ }), this.contentObserver.observe(this, {
2839
+ childList: !0,
2840
+ subtree: !0,
2841
+ characterData: !0
2842
+ });
2843
+ }
2844
+ disconnectedCallback() {
2845
+ this.contentObserver.disconnect();
2846
+ }
2847
+ attributeChangedCallback(t, e, r) {
2848
+ super.attributeChangedCallback(t, e, r), t === "href" && this.$a && r ? this.shadowRoot.innerHTML = this.template() : t === "for" && this.$button && r && (this.shadowRoot.innerHTML = this.template(), this.setupButtonA11y());
2849
+ }
2850
+ setupButtonA11y() {
2851
+ this.$button.setAttribute("tabindex", "0"), this.$button.ariaExpanded = "false", this.$button.setAttribute("aria-controls", this.for || "");
2852
+ }
2853
+ updateDataLabel() {
2854
+ this.$button && this.$button.setAttribute("data-label", this.textContent), this.$a && this.$a.setAttribute("data-label", this.textContent);
2855
+ }
2856
+ get for() {
2857
+ return this.getAttribute("for");
2858
+ }
2859
+ set for(t) {
2860
+ this.setAttribute("for", t);
2861
+ }
2862
+ get checked() {
2863
+ return this.$button.ariaExpanded === "true";
2864
+ }
2865
+ set checked(t) {
2866
+ if (typeof t != "boolean")
2867
+ throw new Error("checked must be a boolean");
2868
+ this.$button.setAttribute("tabindex", t ? "0" : "-1"), this.$button.ariaExpanded = `${!!t}`, this.$button.setAttribute("aria-controls", this.for);
2869
+ }
2870
+ get $button() {
2871
+ return this.shadowRoot.querySelector("button");
2872
+ }
2873
+ get $a() {
2874
+ return this.shadowRoot.querySelector("a");
2875
+ }
2876
+ }
2877
+ customElements.get("px-header-item") || customElements.define("px-header-item", Qt);
2878
+ const Xt = ".color-inherit{color:inherit}.color-brand{color:var(--px-color-text-brand-default)}.color-neutral{color:var(--px-color-text-neutral-default)}.color-dimmed{color:var(--px-color-text-dimmed-default)}.color-purpose-success{color:var(--px-color-text-purpose-success-default)}.color-purpose-warning{color:var(--px-color-text-purpose-warning-default)}.color-purpose-error{color:var(--px-color-text-purpose-error-default)}.color-purpose-unlimited{color:var(--px-color-text-purpose-unlimited-default)}.color-purpose-promo{color:var(--px-color-text-purpose-promo-default)}.color-state-hover{color:var(--px-color-text-state-hover-default)}.color-state-active{color:var(--px-color-text-state-active-default)}.color-state-disabled{color:var(--px-color-text-state-disabled-default)}:host([inverted]) .color-inherit{color:inherit}:host([inverted]) .color-brand{color:var(--px-color-text-brand-inverted)}:host([inverted]) .color-neutral{color:var(--px-color-text-neutral-inverted)}:host([inverted]) .color-dimmed{color:var(--px-color-text-dimmed-inverted)}:host([inverted]) .color-purpose-success{color:var(--px-color-text-purpose-success-inverted)}:host([inverted]) .color-purpose-warning{color:var(--px-color-text-purpose-warning-inverted)}:host([inverted]) .color-purpose-error{color:var(--px-color-text-purpose-error-inverted)}:host([inverted]) .color-purpose-unlimited{color:var(--px-color-text-purpose-unlimited-inverted)}:host([inverted]) .color-purpose-promo{color:var(--px-color-text-purpose-promo-inverted)}:host([inverted]) .color-state-hover{color:var(--px-color-text-state-hover-inverted)}:host([inverted]) .color-state-active{color:var(--px-color-text-state-active-inverted)}:host([inverted]) .color-state-disabled{color:var(--px-color-text-state-disabled-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: 48em){.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)}}@media only screen and (min-width: 64.0625em){.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-body{font-weight:var(--px-font-weight-body)}.font-weight-title{font-weight:var(--px-font-weight-title)}.font-weight-title-large{font-weight:var(--px-font-weight-title-large)}.font-weight-subtitle{font-weight:var(--px-font-weight-subtitle)}", lt = new CSSStyleSheet(), ct = new CSSStyleSheet(), bt = new CSSStyleSheet();
2879
+ lt.replaceSync(j);
2880
+ ct.replaceSync(Z);
2881
+ bt.replaceSync(Xt);
2882
+ const Vt = [
2883
+ "link",
2884
+ "no-style",
2885
+ "skip-link",
2886
+ "btn-default",
2887
+ "btn-secondary",
2888
+ "btn-tertiary",
2889
+ "icon-link"
2890
+ ], te = ["", "default", "alternative"], D = class D extends n {
2891
+ constructor() {
2892
+ super(lt, ct, bt), this.template = () => '<slot name="before"></slot><slot></slot><slot name="after"></slot>';
2893
+ const t = document.createElement(this.nativeName);
2894
+ t.innerHTML = this.template(), this.shadowRoot.appendChild(t);
2895
+ }
2896
+ static get observedAttributes() {
2897
+ return [
2898
+ ...super.observedAttributes,
2899
+ "disabled",
2900
+ "variant",
2901
+ "shape",
2902
+ "extended",
2903
+ "inverted",
2904
+ "font-size",
2905
+ "color",
2906
+ "font-weight",
2907
+ "title"
2908
+ ];
2909
+ }
2910
+ connectedCallback() {
2911
+ super.connectedCallback(), this.$before && this.$before.localName === "px-icon" && this.configureBeforeAfterIcon(this.$before), this.$after && this.$after.localName === "px-icon" && this.configureBeforeAfterIcon(this.$after), F(this, this.$el, !1);
2912
+ }
2913
+ attributeChangedCallback(t, e, r) {
2914
+ if (e !== r)
2915
+ switch (t) {
2916
+ case "disabled":
2917
+ this.$el.toggleAttribute("aria-disabled"), r !== null && this.$el.setAttribute("aria-disabled", "true");
2918
+ break;
2919
+ case "variant":
2920
+ this.updateVariant(e, r);
2921
+ break;
2922
+ case "shape":
2923
+ this.updateShape(e, r);
2924
+ break;
2925
+ case "extended":
2926
+ this.$el.classList.toggle(t);
2927
+ break;
2928
+ case "font-size":
2929
+ this.updateTypography(t, e, r, $t);
2930
+ break;
2931
+ case "color":
2932
+ this.updateTypography(t, e, r, yt);
2933
+ break;
2934
+ case "font-weight":
2935
+ this.updateTypography(t, e, r, At);
2936
+ break;
2937
+ case "title":
2938
+ r && (this.$el.setAttribute("title", r), this.removeAttribute("title"));
2939
+ break;
2940
+ default:
2941
+ super.attributeChangedCallback(t, e, r);
2942
+ break;
2943
+ }
2944
+ }
2945
+ configureBeforeAfterIcon(t) {
2946
+ const e = t.getAttribute("size"), r = t.getAttribute("color");
2947
+ t.addEventListener("click", () => {
2948
+ this.$el.focus();
2949
+ }), e || t.setAttribute("size", "xs"), r || t.setAttribute("color", "inherit");
2950
+ }
2951
+ checkName(t, e) {
2952
+ return t.includes(e);
2953
+ }
2954
+ _toggleClassList(t) {
2955
+ if (t.startsWith("btn-")) {
2956
+ const e = t.split("-");
2957
+ for (const r of e)
2958
+ this.$el.classList.toggle(r);
2959
+ } else
2960
+ this.$el.classList.toggle(t);
2961
+ }
2962
+ updateVariant(t, e) {
2963
+ t !== null && t !== "" && t !== "link" && this._toggleClassList(t), e !== null && e !== "" && e !== "link" && this._toggleClassList(e), this.checkName(Vt, e) || console.error(`Bad "variant" value for ${e}`), e === "icon-link" && this.$iconNotBeforeAfter.setAttribute("color", "inherit");
2964
+ }
2965
+ updateShape(t, e) {
2966
+ t !== null && t !== "" && t !== "default" && this._toggleClassList(t), e !== null && e !== "" && e !== "default" && this._toggleClassList(e), this.checkName(te, e) || console.error(`${e} is not a valid "shape" value`);
2967
+ }
2968
+ updateTypography(t, e, r, o) {
2969
+ e !== null && e !== "" && e !== "default" && this.$el.classList.toggle(`${t}-${e}`), r !== null && r !== "" && r !== "default" && this.$el.classList.toggle(`${t}-${r}`), this.checkName(o, r) || console.error(`Bad ${t} value: ${r}`);
2970
+ }
2971
+ get $before() {
2972
+ return this.querySelector('[slot="before"]');
2973
+ }
2974
+ get $after() {
2975
+ return this.querySelector('[slot="after"]');
2976
+ }
2977
+ get $iconNotBeforeAfter() {
2978
+ return this.querySelector(
2979
+ 'px-icon:not([slot="before"], [slot="after"])'
2980
+ );
2981
+ }
2982
+ get disabled() {
2983
+ return this.getAttribute("disabled");
2984
+ }
2985
+ set disabled(t) {
2986
+ this.setAttribute("disabled", t);
2987
+ }
2988
+ get variant() {
2989
+ return this.getAttribute("variant");
2990
+ }
2991
+ set variant(t) {
2992
+ this.setAttribute("variant", t);
2993
+ }
2994
+ get shape() {
2995
+ return this.getAttribute("shape");
2996
+ }
2997
+ set shape(t) {
2998
+ this.setAttribute("shape", t);
2999
+ }
3000
+ get extended() {
3001
+ return this.getAttribute("extended");
3002
+ }
3003
+ set extended(t) {
3004
+ this.setAttribute("extended", t);
3005
+ }
3006
+ get inverted() {
3007
+ return this.getAttribute("inverted");
3008
+ }
3009
+ set inverted(t) {
3010
+ this.setAttribute("inverted", t);
3011
+ }
3012
+ get fontsize() {
3013
+ return this.getAttribute("font-size");
3014
+ }
3015
+ set fontsize(t) {
3016
+ this.setAttribute("font-size", t);
3017
+ }
3018
+ get color() {
3019
+ return this.getAttribute("color");
3020
+ }
3021
+ set color(t) {
3022
+ this.setAttribute("color", t);
3023
+ }
3024
+ get fontweight() {
3025
+ return this.getAttribute("font-weight");
3026
+ }
3027
+ set fontweight(t) {
3028
+ this.setAttribute("font-weight", t);
3029
+ }
3030
+ get title() {
3031
+ return this.getAttribute("title");
3032
+ }
3033
+ set title(t) {
3034
+ t ? this.setAttribute("title", t) : this.removeAttribute("title");
3035
+ }
3036
+ };
3037
+ D.nativeName = "a";
3038
+ let E = D;
3039
+ customElements.get("px-a") || customElements.define("px-a", E);
3040
+ class ee extends HTMLElement {
3041
+ constructor() {
3042
+ super(), this.template = `<px-a font-weight="title" font-size="body-l" color="brand" variant="no-style">
3043
+ <slot></slot>
3044
+ </px-a>`, this.attachShadow({ mode: "open" }), this.shadowRoot.innerHTML = this.template;
3045
+ const t = this.shadowRoot.querySelector("px-a");
3046
+ t && Array.from(this.attributes).forEach((e) => {
3047
+ t.setAttribute(e.name, e.value);
3048
+ });
3049
+ }
3050
+ }
3051
+ customElements.get("px-mdd-a") || customElements.define("px-mdd-a", ee);
3052
+ const re = "#header__navigation-container{border-bottom:var(--px-size-border-m) solid var(--px-color-border-main-default)}#header__dropdown-zone--desktop{display:none}#header__primary-navigation{display:none;margin:0;padding:0}#header__panel-container{position:absolute;top:0;left:0;right:0;z-index:999}#header__backdrop-filter{display:none;position:absolute;z-index:998;left:0;width:100vw;height:100%;background:#0000004d;-webkit-backdrop-filter:saturate(180%) blur(15px);backdrop-filter:saturate(180%) blur(15px)}@media only screen and (min-width: 48em){#header__dropdown-zone--desktop{display:block;margin-block:var(--px-padding-s-tablet)}#header__primary-navigation{display:block}#header__panel-container{top:auto}}@media only screen and (min-width: 64.0625em){#header__dropdown-zone--desktop{margin-block:var(--px-padding-s-laptop)}}@media only screen and (min-width: 90.0625em){#header__dropdown-zone--desktop{margin-block:var(--px-padding-s-desktop)}}", pt = new CSSStyleSheet();
3053
+ pt.replaceSync(re);
3054
+ const m = "Menu";
3055
+ class oe extends p {
3056
+ constructor() {
3057
+ var t;
3058
+ super(pt), this.template = `
3059
+ <div>
3060
+ <header>
3061
+ <slot name="skip"></slot>
3062
+ <px-section id="header__navigation-container" padding-block--mobile="s" padding-block="none" background-color="none">
3063
+ <px-hstack id="header__dropdown-zone--desktop" justify-content="space-between" align-items="center">
3064
+ <slot name="target-group"></slot>
3065
+ <slot name="user-language"></slot>
3066
+ </px-hstack>
3067
+ <px-hstack gap="default" wrap="wrap" align-items="center">
3068
+ <slot name="header-logo"></slot>
3069
+ <nav id="header__primary-navigation" aria-label="${this.primaryNavigationAriaLabel}">
3070
+ <div role="list">
3071
+ <px-hstack gap="default" wrap="wrap" align-items="center" >
3072
+ <slot name="header-entries"></slot>
3073
+ </px-hstack>
3074
+ </div>
3075
+ </nav>
3076
+ <px-spacer></px-spacer>
3077
+ <px-hstack gap--mobile="none" gap="default">
3078
+ <slot name="header-actions"></slot>
3079
+ <px-button-icon variant="naked" aria-label="${this.burgerMenuAriaLabel ?? "Open menu"}" aria-expanded="false" aria-controls="__lavender_mobile_menu" hidden--tablet hidden--laptop hidden--desktop>
3080
+ <px-icon name="burger_menu" from="lavender"></px-icon>
3081
+ </px-button-icon>
3082
+ </px-hstack>
3083
+ </px-hstack>
3084
+ </px-section>
3085
+ <px-section id="header__panel-container" background-color="surface-default" padding="none" background-color="none">
3086
+ <slot name="header-panels">
3087
+ </px-section>
3088
+ </header>
3089
+ <div id="header__backdrop-filter"></div>
3090
+ <slot name="main"></slot>
3091
+ </div>
3092
+ `, this.shadowRoot.innerHTML = this.template, this.internals = (t = this.attachInternals) == null ? void 0 : t.call(this), this.internals && (this.internals.role = "navigation", this.internals.ariaOrientation = "horizontal");
3093
+ }
3094
+ connectedCallback() {
3095
+ this.addEventListener("click", (t) => {
3096
+ const e = t.target.closest(
3097
+ "px-header-item"
3098
+ );
3099
+ e && e.for && (this.$backdropFilter.style.display = "block", this.$navigationItems.forEach((r) => {
3100
+ r.checked = !1;
3101
+ }), t.target.checked = !0, this.i11yEnableActions(!1), this.togglePanel(t.target.for));
3102
+ }), this.shadowRoot.addEventListener("click", (t) => {
3103
+ t.target.closest("px-button-icon") && (this.$backdropFilter.style.display = "block", this.$burgerMenu.setAttribute("tabindex", "0"), this.$burgerMenu.setAttribute("aria-expanded", "true"), this.togglePanel("__lavender_mobile_menu"), this.i11yEnableActions(!1));
3104
+ }), this.addEventListener("section-item-click", (t) => {
3105
+ this.$backdropFilter.style.display = "block", this.$navigationItems.forEach((r) => {
3106
+ r.checked = !1;
3107
+ }), t.detail.for !== "__lavender_mobile_menu" && (this.querySelector(
3108
+ `px-header-item[for="${t.detail.for}"]`
3109
+ ).checked = !0), this.i11yEnableActions(!1), this.togglePanel(t.detail.for);
3110
+ }), this.addEventListener("close-panel", () => {
3111
+ this.hidePanel(), this.i11yEnableActions(!0), this.$burgerMenu.setAttribute("aria-expanded", "false");
3112
+ }), this.$backdropFilter.addEventListener("click", () => {
3113
+ this.hidePanel(), this.i11yEnableActions(!0);
3114
+ }), this.createMobileMenuPanel(), this.$targetGroupDropdown && this.$userLanguageDropdown ? this.createMobileMenuPanelDrownowns() : this.$dropDownZoneDesktop.style.display = "none", this.primaryNavigationAriaLabel || this.setAttribute("primary-navigation-aria-label", m);
3115
+ }
3116
+ static get observedAttributes() {
3117
+ return [
3118
+ "burger-menu-aria-label",
3119
+ "close-button-aria-label",
3120
+ "primary-navigation-aria-label",
3121
+ "back-to-menu-label"
3122
+ ];
3123
+ }
3124
+ attributeChangedCallback(t, e, r) {
3125
+ if (e !== r)
3126
+ switch (t) {
3127
+ case "close-button-aria-label":
3128
+ this.$megaDropdowns.forEach((o) => {
3129
+ o.setAttribute("close-button-aria-label", r);
3130
+ });
3131
+ break;
3132
+ case "burger-menu-aria-label":
3133
+ this.$burgerMenu.setAttribute("aria-label", r);
3134
+ break;
3135
+ case "primary-navigation-aria-label":
3136
+ this.$primaryNavigation.setAttribute("aria-label", r);
3137
+ break;
3138
+ case "back-to-menu-label":
3139
+ this.$megaDropdowns.forEach((o) => {
3140
+ o.setAttribute("back-to-menu-label", r);
3141
+ });
3142
+ break;
3143
+ }
3144
+ }
3145
+ createMobileMenuPanel() {
3146
+ var e;
3147
+ const t = `
3148
+ <px-mdd name="__lavender_mobile_menu" hidden--tablet hidden--laptop hidden--desktop>
3149
+ <span slot="title">${this.primaryNavigationAriaLabel ? this.primaryNavigationAriaLabel : m}</span>
3150
+ <px-mdd-section title-hidden>
3151
+ <span slot="title">${this.primaryNavigationAriaLabel ? this.primaryNavigationAriaLabel : m}</span>
3152
+ ${[...this.$navigationItems].map(
3153
+ (r) => `<px-mdd-section-item for="${r.getAttribute("for")}">${r.innerText}</px-mdd-section-item>`
3154
+ ).join("")}
3155
+ ${[...this.$actionLinks].filter((r) => !r.hasAttribute("promoted")).map(
3156
+ (r) => `<px-mdd-a href="${r.getAttribute("href")}" slot="footer">${r.innerText}</px-mdd-a>`
3157
+ ).join("")}
3158
+ </px-mdd-section>
3159
+ ${this.createMobileMenuPanelDrownowns()}
3160
+ </px-mdd>
3161
+ `;
3162
+ (e = this.$megaDropdowns.item(0)) == null || e.insertAdjacentHTML("beforebegin", t);
3163
+ }
3164
+ createMobileMenuPanelDrownowns() {
3165
+ var r, o;
3166
+ const t = (r = this.$targetGroupDropdown) == null ? void 0 : r.cloneNode(
3167
+ !0
3168
+ );
3169
+ t == null || t.removeAttribute("id"), t == null || t.setAttribute("slot", "mdd-footer"), t == null || t.setAttribute("grow", "3"), t == null || t.setAttribute("anchoralignment", "top-left");
3170
+ const e = (o = this.$userLanguageDropdown) == null ? void 0 : o.cloneNode(
3171
+ !0
3172
+ );
3173
+ return e == null || e.removeAttribute("id"), e == null || e.setAttribute("slot", "mdd-footer"), e == null || e.setAttribute("grow", "1"), e == null || e.setAttribute("anchoralignment", "top-right"), `${(t == null ? void 0 : t.outerHTML) ?? ""}${(e == null ? void 0 : e.outerHTML) ?? ""}`;
3174
+ }
3175
+ i11yEnableActions(t = !0) {
3176
+ this.querySelectorAll('[slot="header-actions"]').forEach(
3177
+ (e) => {
3178
+ if (t) {
3179
+ e.removeAttribute("tabindex");
3180
+ return;
3181
+ }
3182
+ e.setAttribute("tabindex", "-1");
3183
+ }
3184
+ );
3185
+ }
3186
+ togglePanel(t) {
3187
+ this.$megaDropdowns.forEach((e) => {
3188
+ e.name === t && e.hidden && (e.hidden = !e.hidden, t !== "__lavender_mobile_menu" && (this.querySelector(`px-header-item[for="${t}"]`).checked = !e.hidden), document.body.style.overflow = e.hidden ? "auto" : "hidden"), e.name !== t && !e.hidden && (e.hidden = !0);
3189
+ });
3190
+ }
3191
+ hidePanel() {
3192
+ this.$backdropFilter.style.display = "none", this.$navigationItems.forEach((t) => {
3193
+ t.checked = !1, t.$button.setAttribute("tabindex", "0");
3194
+ }), this.$megaDropdowns.forEach((t) => {
3195
+ t.hidden = !0;
3196
+ }), this.i11yEnableActions(!0), this.$burgerMenu.removeAttribute("tabindex"), this.$burgerMenu.removeAttribute("tabindex"), document.body.style.overflow = "auto";
3197
+ }
3198
+ get $navigationItems() {
3199
+ return this.querySelectorAll("px-header-item");
3200
+ }
3201
+ get $megaDropdowns() {
3202
+ return this.querySelectorAll("px-mdd");
3203
+ }
3204
+ get $actionLinks() {
3205
+ return this.querySelectorAll("px-action-link");
3206
+ }
3207
+ get $backdropFilter() {
3208
+ return this.shadowRoot.querySelector(
3209
+ "#header__backdrop-filter"
3210
+ );
3211
+ }
3212
+ get $burgerMenu() {
3213
+ return this.shadowRoot.querySelector("px-button-icon");
3214
+ }
3215
+ get $targetGroupDropdown() {
3216
+ return this.querySelector('px-dropdown[slot="target-group"]');
3217
+ }
3218
+ get $userLanguageDropdown() {
3219
+ return this.querySelector('px-dropdown[slot="user-language"]');
3220
+ }
3221
+ get $dropDownZoneDesktop() {
3222
+ return this.shadowRoot.querySelector(
3223
+ "#header__dropdown-zone--desktop"
3224
+ );
3225
+ }
3226
+ get $primaryNavigation() {
3227
+ return this.shadowRoot.querySelector("#header__primary-navigation");
3228
+ }
3229
+ get closeButtonAriaLabel() {
3230
+ return this.getAttribute("close-button-aria-label");
3231
+ }
3232
+ set closeButtonAriaLabel(t) {
3233
+ t ? this.setAttribute("close-button-aria-label", t) : this.removeAttribute("close-button-aria-label");
3234
+ }
3235
+ get burgerMenuAriaLabel() {
3236
+ return this.getAttribute("burger-menu-aria-label");
3237
+ }
3238
+ set burgerMenuAriaLabel(t) {
3239
+ t ? this.setAttribute("burger-menu-aria-label", t) : this.removeAttribute("burger-menu-aria-label");
3240
+ }
3241
+ get backToMenuLabel() {
3242
+ return this.getAttribute("back-to-menu-label");
3243
+ }
3244
+ set backToMenuLabel(t) {
3245
+ t ? this.setAttribute("back-to-menu-label", t) : this.removeAttribute("back-to-menu-label");
3246
+ }
3247
+ get primaryNavigationAriaLabel() {
3248
+ return this.getAttribute("primary-navigation-aria-label");
3249
+ }
3250
+ set primaryNavigationAriaLabel(t) {
3251
+ t ? this.setAttribute("primary-navigation-aria-label", t) : this.removeAttribute("primary-navigation-aria-label");
3252
+ }
3253
+ }
3254
+ customElements.get("px-header") || customElements.define("px-header", oe);
3255
+ export {
3256
+ oe as Header,
3257
+ Qt as HeaderItem
3258
+ };