@proximus/lavender-common 2.0.0-alpha.2 → 2.0.0-alpha.200

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/dist/breakpoints.d.ts +1 -1
  2. package/dist/common.d.ts +121 -86
  3. package/dist/index.es.js +740 -885
  4. package/package.json +1 -1
package/dist/index.es.js CHANGED
@@ -1,918 +1,773 @@
1
- const u = ":host([grow]){flex-grow:var(--grow-value)}:host([shrink]){flex-shrink:var(--shrink-value)}:host([basis]){flex-basis:var(--basis-value)}:host([align-self]){align-self:var(--align-self-value)}:host([col-span]){grid-column:span var(--col-span-value) / span var(--col-span-value)}:host([justify-self]){justify-self:var(--justify-value)}:host([order]),::slotted([order]){order:var(--order-value)}:host([hidden]),::slotted([hidden]){display:none}:host([shown--sr]),::slotted(*[shown--sr]){clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}@media screen and (max-width: 767px){:host([hidden--mobile]),::slotted([hidden--mobile]){display:none}:host([grow--mobile]){flex-grow:var(--grow--mobile-value)!important}:host([shrink--mobile]){flex-shrink:var(--shrink--mobile-value)!important}:host([basis--mobile]){flex-basis:var(--basis--mobile-value)!important}:host([align-self--mobile]){align-self:var(--align-self--mobile-value)!important}:host([col-span--mobile]){grid-column:span var(--col-span--mobile-value) / span var(--col-span--mobile-value)!important}:host([justify-self--mobile]){justify-self:var(--justify-self--mobile-value)!important}:host([order--mobile]),::slotted([order--mobile]){order:var(--order--mobile-value)!important}:host([shown--sr--mobile]),::slotted(*[shown--sr--mobile]){clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}}@media screen and (min-width: 768px) and (max-width: 1024px){:host([hidden--tablet]),::slotted([hidden--tablet]){display:none}:host([grow--tablet]){flex-grow:var(--grow--tablet-value)!important}:host([shrink--tablet]){flex-shrink:var(--shrink--tablet-value)!important}:host([basis--tablet]){flex-basis:var(--basis--tablet-value)!important}:host([align-self--tablet]){align-self:var(--align-self--tablet-value)!important}:host([col-span--tablet]){grid-column:span var(--col-span--tablet-value) / span var(--col-span--tablet-value)!important}:host([justify-self--tablet]){justify-self:var(--justify-self--tablet-value)!important}:host([order--tablet]),::slotted([order--tablet]){order:var(--order--tablet-value)!important}:host([shown--sr--tablet]),::slotted(*[shown--sr--tablet]){clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}}@media screen and (min-width: 1025px){:host([shown--sr--laptop]),::slotted(*[shown--sr--laptop]){clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}}@media screen and (min-width: 1025px) and (max-width: 1440px){:host([hidden--laptop]),::slotted([hidden--laptop]){display:none!important}:host([grow--laptop]){flex-grow:var(--grow--laptop-value)!important}:host([shrink--laptop]){flex-shrink:var(--shrink--laptop-value)!important}:host([basis--laptop]){flex-basis:var(--basis--laptop-value)!important}:host([align-self--laptop]){align-self:var(--align-self--laptop-value)!important}:host([col-span--laptop]){grid-column:span var(--col-span--laptop-value) / span var(--col-span--laptop-value)!important}:host([justify-self--laptop]){justify-self:var(--justify-self--laptop-value)!important}:host([order--laptop]),::slotted([order--laptop]){order:var(--order--laptop-value)!important}}@media screen and (min-width: 1441px){:host([col-span--desktop]){grid-column:span var(--col-span--desktop-value) / span var(--col-span--desktop-value)!important}:host([justify-self--desktop]){justify-self:var(--justify-self--desktop-value)!important}:host([order--desktop]),::slotted([order--desktop]){order:var(--order--desktop-value)!important}:host([hidden--desktop]),::slotted([hidden--desktop]){display:none!important}:host([grow--desktop]){flex-grow:var(--grow--desktop-value)!important}:host([shrink--desktop]){flex-shrink:var(--shrink--desktop-value)!important}:host([basis--desktop]){flex-basis:var(--basis--desktop-value)!important}:host([align-self--desktop]){align-self:var(--align-self--desktop-value)!important}}";
2
- function b(i) {
3
- const t = document.createElement(i), s = Object.getPrototypeOf(t);
4
- return Object.getOwnPropertyNames(s);
1
+ //#region src/common.css?inline
2
+ var e = "@layer px-reset{:host{font-variant:normal;font-size-adjust:none;font-kerning:auto;font-optical-sizing:auto;font-synthesis:weight style small-caps position;font-feature-settings:normal;font-variation-settings:normal;font-language-override:normal;font-palette:normal;letter-spacing:normal;word-spacing:normal;tab-size:8;text-align:start;text-indent:0;text-transform:none;text-shadow:none;text-rendering:auto;text-wrap:wrap;white-space:normal;word-break:normal;overflow-wrap:normal;-webkit-hyphens:manual;hyphens:manual;text-underline-offset:auto;text-underline-position:auto;-webkit-font-smoothing:initial;-moz-osx-font-smoothing:auto;-webkit-text-size-adjust:auto;-moz-text-size-adjust:auto;text-size-adjust:auto;font-style:normal;font-stretch:100%;line-height:normal;text-emphasis:none}}:host([grow]){flex-grow:var(--grow-value)}:host([shrink]){flex-shrink:var(--shrink-value)}:host([basis]){flex-basis:var(--basis-value)}:host([align-self]){align-self:var(--align-self-value)}:host([col-span]){grid-column:span var(--col-span-value) / span var(--col-span-value)}:host([justify-self]){justify-self:var(--justify-self-value)}:host([order]),::slotted([order]){order:var(--order-value)}:host([sticky-top]),:host([sticky-bottom]){z-index:5}:host([sticky-top]){position:sticky;top:0}:host([sticky-bottom]){position:sticky;bottom:0}:host([hidden]),::slotted([hidden]){display:none}:host([shown--sr]),::slotted([shown--sr]){clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}:host([word-break-all]){word-break:break-all}@media screen and (width<=47.938rem){:host([hidden--mobile]),::slotted([hidden--mobile]){display:none}:host([grow--mobile]){flex-grow:var(--grow--mobile-value)!important}:host([shrink--mobile]){flex-shrink:var(--shrink--mobile-value)!important}:host([basis--mobile]){flex-basis:var(--basis--mobile-value)!important}:host([align-self--mobile]){align-self:var(--align-self--mobile-value)!important}:host([col-span--mobile]){grid-column:span var(--col-span--mobile-value) / span var(--col-span--mobile-value)!important}:host([justify-self--mobile]){justify-self:var(--justify-self--mobile-value)!important}:host([order--mobile]),::slotted([order--mobile]){order:var(--order--mobile-value)!important}:host([shown--sr--mobile]),::slotted([shown--sr--mobile]){clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}}:host([word-break-all--mobile]){word-break:break-all}@media screen and (width>=48rem) and (width<=64rem){:host([hidden--tablet]),::slotted([hidden--tablet]){display:none}:host([grow--tablet]){flex-grow:var(--grow--tablet-value)!important}:host([shrink--tablet]){flex-shrink:var(--shrink--tablet-value)!important}:host([basis--tablet]){flex-basis:var(--basis--tablet-value)!important}:host([align-self--tablet]){align-self:var(--align-self--tablet-value)!important}:host([col-span--tablet]){grid-column:span var(--col-span--tablet-value) / span var(--col-span--tablet-value)!important}:host([justify-self--tablet]){justify-self:var(--justify-self--tablet-value)!important}:host([order--tablet]),::slotted([order--tablet]){order:var(--order--tablet-value)!important}:host([shown--sr--tablet]),::slotted([shown--sr--tablet]){clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}}:host([word-break-all--tablet]){word-break:break-all}@media screen and (width>=64.0625rem){:host([shown--sr--laptop]),::slotted([shown--sr--laptop]){clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}:host([hidden--laptop]),::slotted([hidden--laptop]){display:none!important}:host([grow--laptop]){flex-grow:var(--grow--laptop-value)!important}:host([shrink--laptop]){flex-shrink:var(--shrink--laptop-value)!important}:host([basis--laptop]){flex-basis:var(--basis--laptop-value)!important}:host([align-self--laptop]){align-self:var(--align-self--laptop-value)!important}:host([col-span--laptop]){grid-column:span var(--col-span--laptop-value) / span var(--col-span--laptop-value)!important}:host([justify-self--laptop]){justify-self:var(--justify-self--laptop-value)!important}:host([order--laptop]),::slotted([order--laptop]){order:var(--order--laptop-value)!important}}:host([word-break-all--laptop]){word-break:break-all}@media screen and (width>=90.0625rem){:host([col-span--desktop]){grid-column:span var(--col-span--desktop-value) / span var(--col-span--desktop-value)!important}:host([justify-self--desktop]){justify-self:var(--justify-self--desktop-value)!important}:host([order--desktop]),::slotted([order--desktop]){order:var(--order--desktop-value)!important}:host([hidden--desktop]),::slotted([hidden--desktop]){display:none!important}:host([grow--desktop]){flex-grow:var(--grow--desktop-value)!important}:host([shrink--desktop]){flex-shrink:var(--shrink--desktop-value)!important}:host([basis--desktop]){flex-basis:var(--basis--desktop-value)!important}:host([align-self--desktop]){align-self:var(--align-self--desktop-value)!important}:host([word-break-all--desktop]){word-break:break-all}}";
3
+ //#endregion
4
+ //#region src/common.ts
5
+ function t(e) {
6
+ let t = document.createElement(e), n = Object.getPrototypeOf(t);
7
+ return Object.getOwnPropertyNames(n);
5
8
  }
6
- function d(i) {
7
- const t = document.createElement(i), s = Object.getPrototypeOf(t);
8
- return Object.getOwnPropertyNames(s).map(
9
- (e) => e.toLowerCase()
10
- );
9
+ function n(e) {
10
+ let t = document.createElement(e), n = Object.getPrototypeOf(t);
11
+ return Object.getOwnPropertyNames(n).map((e) => e.toLowerCase());
11
12
  }
12
- const h = new CSSStyleSheet();
13
- h.replaceSync(u);
14
- class p extends HTMLElement {
15
- static get observedAttributes() {
16
- return [
17
- "grow",
18
- "grow--mobile",
19
- "grow--tablet",
20
- "grow--laptop",
21
- "grow--desktop",
22
- "shrink",
23
- "shrink--mobile",
24
- "shrink--tablet",
25
- "shrink--laptop",
26
- "shrink--desktop",
27
- "basis",
28
- "basis--mobile",
29
- "basis--tablet",
30
- "basis--laptop",
31
- "basis--desktop",
32
- "align-self",
33
- "align-self--mobile",
34
- "align-self--tablet",
35
- "align-self--laptop",
36
- "align-self--desktop",
37
- "justify-self",
38
- "justify-self--mobile",
39
- "justify-self--tablet",
40
- "justify-self--laptop",
41
- "justify-self--desktop",
42
- "hidden",
43
- "hidden--mobile",
44
- "hidden--tablet",
45
- "hidden--laptop",
46
- "hidden--desktop",
47
- "shown--sr",
48
- "shown--sr--mobile",
49
- "shown--sr--tablet",
50
- "shown--sr--laptop",
51
- "shown--sr--desktop",
52
- "col-span",
53
- "col-span--mobile",
54
- "col-span--tablet",
55
- "col-span--laptop",
56
- "col-span--desktop",
57
- "order",
58
- "order--mobile",
59
- "order--tablet",
60
- "order--laptop",
61
- "order--desktop"
62
- ];
63
- }
64
- constructor(...t) {
65
- super(), this.shadowRoot || this.attachShadow({ mode: "open" }), this.shadowRoot.adoptedStyleSheets = [
66
- h,
67
- ...t
68
- ];
69
- }
70
- attributeChangedCallback(t, s, e) {
71
- if (p.observedAttributes.indexOf(t) !== -1)
72
- switch (t) {
73
- case "grow":
74
- case "grow--mobile":
75
- case "grow--tablet":
76
- case "grow--laptop":
77
- case "grow--desktop":
78
- case "shrink":
79
- case "shrink--mobile":
80
- case "shrink--tablet":
81
- case "shrink--laptop":
82
- case "shrink--desktop":
83
- case "basis":
84
- case "basis--mobile":
85
- case "basis--tablet":
86
- case "basis--laptop":
87
- case "basis--desktop":
88
- this.style.setProperty(`--${t}-value`, e);
89
- break;
90
- case "align-self":
91
- case "align-self--mobile":
92
- case "align-self--tablet":
93
- case "align-self--laptop":
94
- case "align-self--desktop":
95
- this.updateProperties(
96
- t,
97
- s,
98
- e,
99
- this.isGrid ? g : c
100
- );
101
- break;
102
- case "justify-self":
103
- case "justify-self--mobile":
104
- case "justify-self--tablet":
105
- case "justify-self--laptop":
106
- case "justify-self--desktop":
107
- this.updateProperties(
108
- t,
109
- s,
110
- e,
111
- f
112
- );
113
- break;
114
- case "col-span":
115
- case "col-span--mobile":
116
- case "col-span--tablet":
117
- case "col-span--laptop":
118
- case "col-span--desktop":
119
- this.updateProperties(t, s, e, m);
120
- break;
121
- case "order":
122
- case "order--mobile":
123
- case "order--tablet":
124
- case "order--laptop":
125
- case "order--desktop":
126
- this.updateProperties(t, s, e, k);
127
- break;
128
- }
129
- }
130
- updateProperties(t, s, e, o) {
131
- if (o && !this.checkName(o, e)) {
132
- console.error(`${e} is not a valid value for ${o}`);
133
- return;
134
- }
135
- const a = t.indexOf("--") > -1, l = a ? t.split("--")[0] : t;
136
- if (!a)
137
- this.style.setProperty(
138
- `--${l}-value`,
139
- s
140
- ), this.style.setProperty(
141
- `--${l}-value`,
142
- e
143
- );
144
- else {
145
- const n = t.split("--")[1];
146
- this.style.setProperty(
147
- `--${l}--${n}-value`,
148
- s
149
- ), this.style.setProperty(
150
- `--${l}--${n}-value`,
151
- e
152
- );
153
- }
154
- }
155
- updateStyle(t, s, e) {
156
- e !== null && e !== "" && e !== "default" && this.style.setProperty(
157
- `--${t}--${s}-value`,
158
- e
159
- );
160
- }
161
- checkName(t, s) {
162
- return t.includes(s);
163
- }
164
- get $el() {
165
- return this;
166
- }
167
- get $parentElementName() {
168
- var t;
169
- return (t = this.parentElement) == null ? void 0 : t.tagName.toLowerCase();
170
- }
171
- get isGrid() {
172
- return this.$parentElementName === "px-grid";
173
- }
174
- get isStack() {
175
- return this.$parentElementName === "px-stack";
176
- }
177
- get grow() {
178
- return this.getAttribute("grow");
179
- }
180
- set grow(t) {
181
- this.setAttribute("grow", t);
182
- }
183
- get growMobile() {
184
- return this.getAttribute("grow--mobile");
185
- }
186
- set growMobile(t) {
187
- this.setAttribute("grow--mobile", t);
188
- }
189
- get growTablet() {
190
- return this.getAttribute("grow--tablet");
191
- }
192
- set growTablet(t) {
193
- this.setAttribute("grow--tablet", t);
194
- }
195
- get growLaptop() {
196
- return this.getAttribute("grow--laptop");
197
- }
198
- set growLaptop(t) {
199
- this.setAttribute("grow--laptop", t);
200
- }
201
- get growDesktop() {
202
- return this.getAttribute("grow--desktop");
203
- }
204
- set growDesktop(t) {
205
- this.setAttribute("grow--desktop", t);
206
- }
207
- get shrink() {
208
- return this.getAttribute("shrink");
209
- }
210
- set shrink(t) {
211
- this.setAttribute("shrink", t);
212
- }
213
- get shrinkMobile() {
214
- return this.getAttribute("shrink--mobile");
215
- }
216
- set shrinkMobile(t) {
217
- this.setAttribute("shrink--mobile", t);
218
- }
219
- get shrinkTablet() {
220
- return this.getAttribute("shrink--tablet");
221
- }
222
- set shrinkTablet(t) {
223
- this.setAttribute("shrink--tablet", t);
224
- }
225
- get shrinkLaptop() {
226
- return this.getAttribute("shrink--laptop");
227
- }
228
- set shrinkLaptop(t) {
229
- this.setAttribute("shrink--laptop", t);
230
- }
231
- get shrinkDesktop() {
232
- return this.getAttribute("shrink--desktop");
233
- }
234
- set shrinkDesktop(t) {
235
- this.setAttribute("shrink--desktop", t);
236
- }
237
- get basis() {
238
- return this.getAttribute("basis");
239
- }
240
- set basis(t) {
241
- this.setAttribute("basis", t);
242
- }
243
- get basisMobile() {
244
- return this.getAttribute("basis--mobile");
245
- }
246
- set basisMobile(t) {
247
- this.setAttribute("basis--mobile", t);
248
- }
249
- get basisTablet() {
250
- return this.getAttribute("basis--tablet");
251
- }
252
- set basisTablet(t) {
253
- this.setAttribute("basis--tablet", t);
254
- }
255
- get basisLaptop() {
256
- return this.getAttribute("basis--laptop");
257
- }
258
- set basisLaptop(t) {
259
- this.setAttribute("basis--laptop", t);
260
- }
261
- get basisDesktop() {
262
- return this.getAttribute("basis--desktop");
263
- }
264
- set basisDesktop(t) {
265
- this.setAttribute("basis--desktop", t);
266
- }
267
- get alignSelf() {
268
- return this.getAttribute("align-self");
269
- }
270
- set alignSelf(t) {
271
- this.setAttribute("align-self", t);
272
- }
273
- get alignSelfMobile() {
274
- return this.getAttribute("align-self--mobile");
275
- }
276
- set alignSelfMobile(t) {
277
- this.setAttribute("align-self--mobile", t);
278
- }
279
- get alignSelfTablet() {
280
- return this.getAttribute("align-self--tablet");
281
- }
282
- set alignSelfTablet(t) {
283
- this.setAttribute("align-self--tablet", t);
284
- }
285
- get alignSelfLaptop() {
286
- return this.getAttribute("align-self--laptop");
287
- }
288
- set alignSelfLaptop(t) {
289
- this.setAttribute("align-self--laptop", t);
290
- }
291
- get alignSelfDesktop() {
292
- return this.getAttribute("align-self--desktop");
293
- }
294
- set alignSelfDesktop(t) {
295
- this.setAttribute("align-self--desktop", t);
296
- }
297
- get justifySelf() {
298
- return this.getAttribute("justify-self");
299
- }
300
- set justifySelf(t) {
301
- this.setAttribute("justify-self", t);
302
- }
303
- get justifySelfMobile() {
304
- return this.getAttribute("justify-self--mobile");
305
- }
306
- set justifySelfMobile(t) {
307
- this.setAttribute("justify-self--mobile", t);
308
- }
309
- get justifySelfTablet() {
310
- return this.getAttribute("justify-self--tablet");
311
- }
312
- set justifySelfTablet(t) {
313
- this.setAttribute("justify-self--tablet", t);
314
- }
315
- get justifySelfLaptop() {
316
- return this.getAttribute("justify-self--laptop");
317
- }
318
- set justifySelfLaptop(t) {
319
- this.setAttribute("justify-self--laptop", t);
320
- }
321
- get justifySelfDesktop() {
322
- return this.getAttribute("justify-self--desktop");
323
- }
324
- set justifySelfDesktop(t) {
325
- this.setAttribute("justify-self--desktop", t);
326
- }
327
- get hiddenMobile() {
328
- return this.getAttribute("hidden--mobile");
329
- }
330
- set hiddenMobile(t) {
331
- this.setAttribute("hidden--mobile", t);
332
- }
333
- get hiddenTablet() {
334
- return this.getAttribute("hidden--tablet");
335
- }
336
- set hiddenTablet(t) {
337
- this.setAttribute("hidden--tablet", t);
338
- }
339
- get hiddenLaptop() {
340
- return this.getAttribute("hidden--laptop");
341
- }
342
- set hiddenLaptop(t) {
343
- this.setAttribute("hidden--laptop", t);
344
- }
345
- get hiddenDesktop() {
346
- return this.getAttribute("hidden--desktop");
347
- }
348
- set hiddenDesktop(t) {
349
- this.setAttribute("hidden--desktop", t);
350
- }
351
- get colSpan() {
352
- return this.getAttribute("col-span");
353
- }
354
- set colSpan(t) {
355
- this.setAttribute("col-span", t);
356
- }
357
- get colSpanMobile() {
358
- return this.getAttribute("col-span--mobile");
359
- }
360
- set colSpanMobile(t) {
361
- this.setAttribute("col-span--mobile", t);
362
- }
363
- get colSpanTablet() {
364
- return this.getAttribute("col-span--tablet");
365
- }
366
- set colSpanTablet(t) {
367
- this.setAttribute("col-span--tablet", t);
368
- }
369
- get colSpanLaptop() {
370
- return this.getAttribute("col-span--laptop");
371
- }
372
- set colSpanLaptop(t) {
373
- this.setAttribute("col-span--laptop", t);
374
- }
375
- get colSpanDesktop() {
376
- return this.getAttribute("col-span--desktop");
377
- }
378
- set colSpanDesktop(t) {
379
- this.setAttribute("col-span--desktop", t);
380
- }
381
- get order() {
382
- return this.getAttribute("order");
383
- }
384
- set order(t) {
385
- this.setAttribute("order", t);
386
- }
387
- get orderMobile() {
388
- return this.getAttribute("order--mobile");
389
- }
390
- set orderMobile(t) {
391
- this.setAttribute("order--mobile", t);
392
- }
393
- get orderTablet() {
394
- return this.getAttribute("order--tablet");
395
- }
396
- set orderTablet(t) {
397
- this.setAttribute("order--tablet", t);
398
- }
399
- get orderLaptop() {
400
- return this.getAttribute("order--laptop");
401
- }
402
- set orderLaptop(t) {
403
- this.setAttribute("order--laptop", t);
404
- }
405
- get orderDesktop() {
406
- return this.getAttribute("order--desktop");
407
- }
408
- set orderDesktop(t) {
409
- this.setAttribute("order--desktop", t);
410
- }
13
+ var r = new CSSStyleSheet();
14
+ r.replaceSync(e);
15
+ var i = {
16
+ BASE_URL: "/",
17
+ DEV: !0,
18
+ MODE: "production",
19
+ PROD: !1,
20
+ SSR: !1,
21
+ VITE_COMPONENT_DEBUG: "true"
22
+ }, a = i?.VITE_COMPONENT_DEBUG === "true" || i?.DEV === !0;
23
+ typeof window < "u" && (window.isComponentDebug = o);
24
+ function o() {
25
+ return a;
411
26
  }
412
- class y extends p {
413
- constructor(...t) {
414
- super(...t), this.accessorExclusions = [], this.nativeName = Object.getPrototypeOf(this).constructor.nativeName, this.accessorExclusions = Object.getPrototypeOf(this).constructor.accessorExclusions || [];
415
- }
416
- static get observedAttributes() {
417
- return [
418
- ...super.observedAttributes,
419
- ...d(this.nativeName)
420
- ];
421
- }
422
- attributeChangedCallback(t, s, e) {
423
- super.attributeChangedCallback(t, s, e), e === null ? this.$el.toggleAttribute(t) : this.$el.setAttribute(t, e);
424
- }
425
- connectedCallback() {
426
- var t;
427
- for (const s of b(this.nativeName))
428
- if (!(s === "constructor" || this.accessorExclusions.includes(s)))
429
- try {
430
- Object.defineProperty(this, s, {
431
- get() {
432
- return this.$el[s];
433
- },
434
- set(e) {
435
- this.$el[s] !== e && (this.$el[s] = e);
436
- }
437
- });
438
- } catch (e) {
439
- console.warn(`Could not create property ${s} for`, this.$el, e);
440
- }
441
- if (this.isGrid || this.isStack) {
442
- const s = (t = this.parentElement) == null ? void 0 : t.getAttribute("direction");
443
- this.$el.style.display = "block", (this.isGrid || this.isStack && s === "row") && (this.$el.style.height = "100%");
444
- }
445
- }
446
- get $el() {
447
- return this.shadowRoot.querySelector(this.nativeName);
448
- }
27
+ function s(e) {
28
+ o() && console.error(e);
449
29
  }
450
- const w = ["", "default", "none", "l"], c = [
451
- "",
452
- "default",
453
- "auto",
454
- "flex-start",
455
- "flex-end",
456
- "center",
457
- "baseline",
458
- "stretch"
459
- ], g = [
460
- "",
461
- "default",
462
- "start",
463
- "end",
464
- "center",
465
- "stretch"
466
- ], f = [
467
- "",
468
- "default",
469
- "start",
470
- "end",
471
- "center",
472
- "stretch"
30
+ var c = class {
31
+ #e;
32
+ #t;
33
+ #n;
34
+ #r;
35
+ constructor(e, t, n) {
36
+ this.#r = !1, this.#i = () => {
37
+ this.setInteractiveState("hover");
38
+ }, this.clearInteractiveState = () => {
39
+ this.setInteractiveState(null);
40
+ }, this.#e = e, this.#t = t, this.#n = n;
41
+ }
42
+ #i;
43
+ connect() {
44
+ this.#r ||= (this.#t.addEventListener("pointerenter", this.#i), this.#t.addEventListener("pointerleave", this.clearInteractiveState), this.#t.addEventListener("focusin", this.#i), this.#t.addEventListener("focusout", this.clearInteractiveState), !0);
45
+ }
46
+ disconnect() {
47
+ this.#r &&= (this.#t.removeEventListener("pointerenter", this.#i), this.#t.removeEventListener("pointerleave", this.clearInteractiveState), this.#t.removeEventListener("focusin", this.#i), this.#t.removeEventListener("focusout", this.clearInteractiveState), !1);
48
+ }
49
+ setInteractiveState(e) {
50
+ let t = this.#a;
51
+ if (!this.#n()) {
52
+ t.forEach((e) => e.removeAttribute("interactive-state"));
53
+ return;
54
+ }
55
+ t.forEach((t) => {
56
+ e ? t.setAttribute("interactive-state", e) : t.removeAttribute("interactive-state");
57
+ });
58
+ }
59
+ get #a() {
60
+ return Array.from(this.#e.querySelectorAll("*")).filter(l);
61
+ }
62
+ };
63
+ function l(e) {
64
+ return e.hasAttribute("interactive-state") ? !0 : customElements.get(e.localName)?.observedAttributes?.includes("interactive-state") ?? !1;
65
+ }
66
+ typeof window < "u" && (window.isComponentDebug = o);
67
+ var u = class e extends HTMLElement {
68
+ static get observedAttributes() {
69
+ return /* @__PURE__ */ "grow.grow--mobile.grow--tablet.grow--laptop.grow--desktop.shrink.shrink--mobile.shrink--tablet.shrink--laptop.shrink--desktop.basis.basis--mobile.basis--tablet.basis--laptop.basis--desktop.align-self.align-self--mobile.align-self--tablet.align-self--laptop.align-self--desktop.justify-self.justify-self--mobile.justify-self--tablet.justify-self--laptop.justify-self--desktop.hidden.hidden--mobile.hidden--tablet.hidden--laptop.hidden--desktop.shown--sr.shown--sr--mobile.shown--sr--tablet.shown--sr--laptop.shown--sr--desktop.col-span.col-span--mobile.col-span--tablet.col-span--laptop.col-span--desktop.order.order--mobile.order--tablet.order--laptop.order--desktop.sticky-top.sticky-bottom.word-break-all.word-break-all--mobile.word-break-all--tablet.word-break-all--laptop.word-break-all--desktop".split(".");
70
+ }
71
+ constructor(...e) {
72
+ super(), this.shadowRoot || this.attachShadow({ mode: "open" }), this.shadowRoot.adoptedStyleSheets = [r, ...e];
73
+ }
74
+ attributeChangedCallback(t, n, r) {
75
+ if (e.observedAttributes.indexOf(t) !== -1) switch (t) {
76
+ case "grow":
77
+ case "grow--mobile":
78
+ case "grow--tablet":
79
+ case "grow--laptop":
80
+ case "grow--desktop":
81
+ case "shrink":
82
+ case "shrink--mobile":
83
+ case "shrink--tablet":
84
+ case "shrink--laptop":
85
+ case "shrink--desktop":
86
+ case "basis":
87
+ case "basis--mobile":
88
+ case "basis--tablet":
89
+ case "basis--laptop":
90
+ case "basis--desktop":
91
+ this.style.setProperty(`--${t}-value`, r);
92
+ break;
93
+ case "align-self":
94
+ case "align-self--mobile":
95
+ case "align-self--tablet":
96
+ case "align-self--laptop":
97
+ case "align-self--desktop":
98
+ this.updateProperties(t, n, r, this.parentElement?.localName === "px-grid" ? h : m);
99
+ break;
100
+ case "justify-self":
101
+ case "justify-self--mobile":
102
+ case "justify-self--tablet":
103
+ case "justify-self--laptop":
104
+ case "justify-self--desktop":
105
+ this.updateProperties(t, n, r, g);
106
+ break;
107
+ case "col-span":
108
+ case "col-span--mobile":
109
+ case "col-span--tablet":
110
+ case "col-span--laptop":
111
+ case "col-span--desktop":
112
+ this.updateProperties(t, n, r, _);
113
+ break;
114
+ case "order":
115
+ case "order--mobile":
116
+ case "order--tablet":
117
+ case "order--laptop":
118
+ case "order--desktop": this.updateProperties(t, n, r, v);
119
+ }
120
+ }
121
+ updateProperties(e, t, n, r) {
122
+ r && (this.checkName(r, n) || s(`"${n}" is not an allowed ${e} value for ${this.tagName.toLowerCase()}. Allowed values are: "${r.join("\", \"")}".`));
123
+ let i = e.indexOf("--") > -1, a = i ? e.split("--")[0] : e;
124
+ if (!i) this.style.setProperty(`--${a}-value`, t), this.style.setProperty(`--${a}-value`, n);
125
+ else {
126
+ let r = e.split("--")[1];
127
+ this.style.setProperty(`--${a}--${r}-value`, t), this.style.setProperty(`--${a}--${r}-value`, n);
128
+ }
129
+ }
130
+ updateStyle(e, t, n) {
131
+ n !== null && n !== "" && n !== "default" && this.style.setProperty(`--${e}--${t}-value`, n);
132
+ }
133
+ checkName(e, t) {
134
+ return e.includes(t);
135
+ }
136
+ get $el() {
137
+ return this;
138
+ }
139
+ get $parentElementName() {
140
+ return this.parentElement?.tagName.toLowerCase();
141
+ }
142
+ get isInsideGridOrStack() {
143
+ let e = this.parentElement;
144
+ for (; e;) {
145
+ if (e.localName === "px-grid" || e.localName === "px-stack" && e?.getAttribute("direction") === "row") return !0;
146
+ if (window.getComputedStyle(e).display === "contents") {
147
+ e = e.parentElement;
148
+ continue;
149
+ }
150
+ break;
151
+ }
152
+ return !1;
153
+ }
154
+ get grow() {
155
+ return this.getAttribute("grow");
156
+ }
157
+ set grow(e) {
158
+ G(this, "grow", e);
159
+ }
160
+ get growMobile() {
161
+ return this.getAttribute("grow--mobile");
162
+ }
163
+ set growMobile(e) {
164
+ G(this, "grow--mobile", e);
165
+ }
166
+ get growTablet() {
167
+ return this.getAttribute("grow--tablet");
168
+ }
169
+ set growTablet(e) {
170
+ G(this, "grow--tablet", e);
171
+ }
172
+ get growLaptop() {
173
+ return this.getAttribute("grow--laptop");
174
+ }
175
+ set growLaptop(e) {
176
+ G(this, "grow--laptop", e);
177
+ }
178
+ get growDesktop() {
179
+ return this.getAttribute("grow--desktop");
180
+ }
181
+ set growDesktop(e) {
182
+ G(this, "grow--desktop", e);
183
+ }
184
+ get shrink() {
185
+ return this.getAttribute("shrink");
186
+ }
187
+ set shrink(e) {
188
+ G(this, "shrink", e);
189
+ }
190
+ get shrinkMobile() {
191
+ return this.getAttribute("shrink--mobile");
192
+ }
193
+ set shrinkMobile(e) {
194
+ G(this, "shrink--mobile", e);
195
+ }
196
+ get shrinkTablet() {
197
+ return this.getAttribute("shrink--tablet");
198
+ }
199
+ set shrinkTablet(e) {
200
+ G(this, "shrink--tablet", e);
201
+ }
202
+ get shrinkLaptop() {
203
+ return this.getAttribute("shrink--laptop");
204
+ }
205
+ set shrinkLaptop(e) {
206
+ G(this, "shrink--laptop", e);
207
+ }
208
+ get shrinkDesktop() {
209
+ return this.getAttribute("shrink--desktop");
210
+ }
211
+ set shrinkDesktop(e) {
212
+ G(this, "shrink--desktop", e);
213
+ }
214
+ get basis() {
215
+ return this.getAttribute("basis");
216
+ }
217
+ set basis(e) {
218
+ G(this, "basis", e);
219
+ }
220
+ get basisMobile() {
221
+ return this.getAttribute("basis--mobile");
222
+ }
223
+ set basisMobile(e) {
224
+ G(this, "basis--mobile", e);
225
+ }
226
+ get basisTablet() {
227
+ return this.getAttribute("basis--tablet");
228
+ }
229
+ set basisTablet(e) {
230
+ G(this, "basis--tablet", e);
231
+ }
232
+ get basisLaptop() {
233
+ return this.getAttribute("basis--laptop");
234
+ }
235
+ set basisLaptop(e) {
236
+ G(this, "basis--laptop", e);
237
+ }
238
+ get basisDesktop() {
239
+ return this.getAttribute("basis--desktop");
240
+ }
241
+ set basisDesktop(e) {
242
+ G(this, "basis--desktop", e);
243
+ }
244
+ get alignSelf() {
245
+ return this.getAttribute("align-self");
246
+ }
247
+ set alignSelf(e) {
248
+ G(this, "align-self", e);
249
+ }
250
+ get alignSelfMobile() {
251
+ return this.getAttribute("align-self--mobile");
252
+ }
253
+ set alignSelfMobile(e) {
254
+ G(this, "align-self--mobile", e);
255
+ }
256
+ get alignSelfTablet() {
257
+ return this.getAttribute("align-self--tablet");
258
+ }
259
+ set alignSelfTablet(e) {
260
+ G(this, "align-self--tablet", e);
261
+ }
262
+ get alignSelfLaptop() {
263
+ return this.getAttribute("align-self--laptop");
264
+ }
265
+ set alignSelfLaptop(e) {
266
+ G(this, "align-self--laptop", e);
267
+ }
268
+ get alignSelfDesktop() {
269
+ return this.getAttribute("align-self--desktop");
270
+ }
271
+ set alignSelfDesktop(e) {
272
+ G(this, "align-self--desktop", e);
273
+ }
274
+ get justifySelf() {
275
+ return this.getAttribute("justify-self");
276
+ }
277
+ set justifySelf(e) {
278
+ G(this, "justify-self", e);
279
+ }
280
+ get justifySelfMobile() {
281
+ return this.getAttribute("justify-self--mobile");
282
+ }
283
+ set justifySelfMobile(e) {
284
+ G(this, "justify-self--mobile", e);
285
+ }
286
+ get justifySelfTablet() {
287
+ return this.getAttribute("justify-self--tablet");
288
+ }
289
+ set justifySelfTablet(e) {
290
+ G(this, "justify-self--tablet", e);
291
+ }
292
+ get justifySelfLaptop() {
293
+ return this.getAttribute("justify-self--laptop");
294
+ }
295
+ set justifySelfLaptop(e) {
296
+ G(this, "justify-self--laptop", e);
297
+ }
298
+ get justifySelfDesktop() {
299
+ return this.getAttribute("justify-self--desktop");
300
+ }
301
+ set justifySelfDesktop(e) {
302
+ G(this, "justify-self--desktop", e);
303
+ }
304
+ get hiddenMobile() {
305
+ return this.hasAttribute("hidden--mobile");
306
+ }
307
+ set hiddenMobile(e) {
308
+ K(this, "hidden--mobile", e);
309
+ }
310
+ get hiddenTablet() {
311
+ return this.hasAttribute("hidden--tablet");
312
+ }
313
+ set hiddenTablet(e) {
314
+ K(this, "hidden--tablet", e);
315
+ }
316
+ get hiddenLaptop() {
317
+ return this.hasAttribute("hidden--laptop");
318
+ }
319
+ set hiddenLaptop(e) {
320
+ K(this, "hidden--laptop", e);
321
+ }
322
+ get hiddenDesktop() {
323
+ return this.hasAttribute("hidden--desktop");
324
+ }
325
+ set hiddenDesktop(e) {
326
+ K(this, "hidden--desktop", e);
327
+ }
328
+ get colSpan() {
329
+ return this.getAttribute("col-span");
330
+ }
331
+ set colSpan(e) {
332
+ G(this, "col-span", e);
333
+ }
334
+ get colSpanMobile() {
335
+ return this.getAttribute("col-span--mobile");
336
+ }
337
+ set colSpanMobile(e) {
338
+ G(this, "col-span--mobile", e);
339
+ }
340
+ get colSpanTablet() {
341
+ return this.getAttribute("col-span--tablet");
342
+ }
343
+ set colSpanTablet(e) {
344
+ G(this, "col-span--tablet", e);
345
+ }
346
+ get colSpanLaptop() {
347
+ return this.getAttribute("col-span--laptop");
348
+ }
349
+ set colSpanLaptop(e) {
350
+ G(this, "col-span--laptop", e);
351
+ }
352
+ get colSpanDesktop() {
353
+ return this.getAttribute("col-span--desktop");
354
+ }
355
+ set colSpanDesktop(e) {
356
+ G(this, "col-span--desktop", e);
357
+ }
358
+ get order() {
359
+ return this.getAttribute("order");
360
+ }
361
+ set order(e) {
362
+ G(this, "order", e);
363
+ }
364
+ get orderMobile() {
365
+ return this.getAttribute("order--mobile");
366
+ }
367
+ set orderMobile(e) {
368
+ G(this, "order--mobile", e);
369
+ }
370
+ get orderTablet() {
371
+ return this.getAttribute("order--tablet");
372
+ }
373
+ set orderTablet(e) {
374
+ G(this, "order--tablet", e);
375
+ }
376
+ get orderLaptop() {
377
+ return this.getAttribute("order--laptop");
378
+ }
379
+ set orderLaptop(e) {
380
+ G(this, "order--laptop", e);
381
+ }
382
+ get orderDesktop() {
383
+ return this.getAttribute("order--desktop");
384
+ }
385
+ set orderDesktop(e) {
386
+ G(this, "order--desktop", e);
387
+ }
388
+ }, d = class extends u {
389
+ static {
390
+ this.accessorExclusions = [];
391
+ }
392
+ static get observedAttributes() {
393
+ return [...super.observedAttributes, ...n(this.nativeName)];
394
+ }
395
+ attributeChangedCallback(e, t, n) {
396
+ super.attributeChangedCallback(e, t, n), n === null ? this.$el.toggleAttribute(e) : this.$el.setAttribute(e, n);
397
+ }
398
+ get ctor() {
399
+ return Object.getPrototypeOf(this).constructor;
400
+ }
401
+ constructor(...e) {
402
+ super(...e), this.ctor.supportedPropertyNames || (this.ctor.supportedPropertyNames = t(this.ctor.nativeName)), this.enhanceWithNativeProperties();
403
+ }
404
+ enhanceWithNativeProperties() {
405
+ for (let e of this.ctor.supportedPropertyNames) if (!(e === "constructor" || (this.ctor?.accessorExclusions ?? []).includes(e))) try {
406
+ Object.defineProperty(this, e, {
407
+ get() {
408
+ return this.$el[e];
409
+ },
410
+ set(t) {
411
+ this.$el[e] !== t && (this.$el[e] = t);
412
+ }
413
+ });
414
+ } catch (t) {
415
+ console.warn(`Could not create property ${e} for`, this.$el, t);
416
+ }
417
+ }
418
+ get $el() {
419
+ return this.shadowRoot.querySelector(this.ctor.nativeName);
420
+ }
421
+ _updateAttribute(e, t) {
422
+ G(this, e, t);
423
+ }
424
+ _updateBooleanAttribute(e, t) {
425
+ K(this, e, t);
426
+ }
427
+ }, f = class extends d {
428
+ connectedCallback() {
429
+ this.isInsideGridOrStack && (this.$el.style.display = "block", this.$el.style.height = "100%");
430
+ }
431
+ }, p = [
432
+ "",
433
+ "default",
434
+ "none",
435
+ "l"
473
436
  ], m = [
474
- "",
475
- "1",
476
- "2",
477
- "3",
478
- "4",
479
- "5",
480
- "6",
481
- "7",
482
- "8",
483
- "9",
484
- "10",
485
- "11",
486
- "12"
437
+ "",
438
+ "default",
439
+ "auto",
440
+ "flex-start",
441
+ "start",
442
+ "flex-end",
443
+ "end",
444
+ "center",
445
+ "baseline",
446
+ "stretch"
447
+ ], h = [
448
+ "",
449
+ "default",
450
+ "start",
451
+ "end",
452
+ "center",
453
+ "stretch"
454
+ ], g = [
455
+ "",
456
+ "default",
457
+ "start",
458
+ "end",
459
+ "center",
460
+ "stretch"
461
+ ], _ = [
462
+ "",
463
+ "1",
464
+ "2",
465
+ "3",
466
+ "4",
467
+ "5",
468
+ "6",
469
+ "7",
470
+ "8",
471
+ "9",
472
+ "10",
473
+ "11",
474
+ "12"
475
+ ], v = [
476
+ "",
477
+ "-1",
478
+ "0",
479
+ "1",
480
+ "2",
481
+ "3",
482
+ "4",
483
+ "5",
484
+ "6",
485
+ "7",
486
+ "8",
487
+ "9",
488
+ "10",
489
+ "11",
490
+ "12"
491
+ ], y = [
492
+ "",
493
+ "default",
494
+ "auto",
495
+ "start",
496
+ "end",
497
+ "center",
498
+ "stretch"
499
+ ], b = [
500
+ "",
501
+ "default",
502
+ "inherit",
503
+ "body-l",
504
+ "body-m",
505
+ "body-s",
506
+ "body-xs",
507
+ "heading-5xl",
508
+ "heading-4xl",
509
+ "heading-3xl",
510
+ "heading-2xl",
511
+ "heading-xl",
512
+ "heading-l",
513
+ "heading-m",
514
+ "heading-s"
515
+ ], x = [
516
+ "",
517
+ "default",
518
+ "inherit",
519
+ "brand",
520
+ "neutral",
521
+ "dimmed",
522
+ "purpose-success",
523
+ "purpose-warning",
524
+ "purpose-error",
525
+ "purpose-unlimited",
526
+ "purpose-promo",
527
+ "state-hover",
528
+ "state-active",
529
+ "state-disabled"
530
+ ], S = [
531
+ "",
532
+ "default",
533
+ "inherit",
534
+ "body",
535
+ "title",
536
+ "title-large",
537
+ "subtitle"
538
+ ], C = [
539
+ "Xs",
540
+ "S",
541
+ "M",
542
+ "L",
543
+ "Xl"
544
+ ], w = [
545
+ "",
546
+ "default",
547
+ ...C.map((e) => e.toLowerCase())
548
+ ], T = [
549
+ "",
550
+ "default",
551
+ "left",
552
+ "center",
553
+ "right"
554
+ ], E = [
555
+ "",
556
+ "none",
557
+ "3xs",
558
+ "2xs",
559
+ "xs",
560
+ "s",
561
+ "m",
562
+ "l",
563
+ "xl"
564
+ ], D = [
565
+ "",
566
+ "none",
567
+ "s",
568
+ "m",
569
+ "l"
570
+ ], O = [
571
+ "",
572
+ "none",
573
+ "main",
574
+ "pill"
487
575
  ], k = [
488
- "",
489
- "-1",
490
- "0",
491
- "1",
492
- "2",
493
- "3",
494
- "4",
495
- "5",
496
- "6",
497
- "7",
498
- "8",
499
- "9",
500
- "10",
501
- "11",
502
- "12"
576
+ "none",
577
+ "main",
578
+ "brand",
579
+ "state-hover",
580
+ "state-active",
581
+ "neutral",
582
+ "purpose-success",
583
+ "purpose-warning",
584
+ "purpose-error",
585
+ "purpose-unlimited"
503
586
  ], A = [
504
- "",
505
- "default",
506
- "auto",
507
- "start",
508
- "end",
509
- "center",
510
- "stretch"
511
- ], S = [
512
- "",
513
- "default",
514
- "inherit",
515
- "body-l",
516
- "body-m",
517
- "body-s",
518
- "body-xs",
519
- "heading-5xl",
520
- "heading-4xl",
521
- "heading-3xl",
522
- "heading-2xl",
523
- "heading-xl",
524
- "heading-l",
525
- "heading-m",
526
- "heading-s"
527
- ], $ = [
528
- "",
529
- "default",
530
- "inherit",
531
- "brand",
532
- "neutral",
533
- "dimmed",
534
- "purpose-success",
535
- "purpose-warning",
536
- "purpose-error",
537
- "purpose-unlimited",
538
- "purpose-promo",
539
- "state-hover",
540
- "state-active",
541
- "state-disabled"
542
- ], x = [
543
- "",
544
- "default",
545
- "inherit",
546
- "body",
547
- "title",
548
- "title-large",
549
- "subtitle"
550
- ], v = ["Xs", "S", "M", "L", "Xl"], j = [
551
- "",
552
- "default",
553
- ...v.map((i) => i.toLowerCase())
554
- ], C = ["", "default", "left", "center", "right"], L = [
555
- "",
556
- "none",
557
- "3xs",
558
- "2xs",
559
- "xs",
560
- "s",
561
- "m",
562
- "l",
563
- "xl"
564
- ], M = ["", "none", "s", "m", "l"], T = ["", "none", "main", "pill"], D = [
565
- "none",
566
- "main",
567
- "brand",
568
- "state-hover",
569
- "state-active",
570
- "neutral",
571
- "purpose-success",
572
- "purpose-warning",
573
- "purpose-error",
574
- "purpose-unlimited"
587
+ "",
588
+ "all",
589
+ "top",
590
+ "right",
591
+ "bottom",
592
+ "left",
593
+ "block",
594
+ "inline"
595
+ ], j = /* @__PURE__ */ ".none.surface-light.surface-default.surface-strong.surface-stronger.surface-dark.surface-brand.surface-brand-light.container-primary.container-secondary.container-light.container-default.container-strong.state-hover.state-hover-bordered.state-active.state-disabled.purpose-success.purpose-warning.purpose-error.purpose-unlimited.purpose-promo.purpose-info.purpose-eco.purpose-notification.footer-sitemap".split("."), M = [
596
+ "",
597
+ "cover",
598
+ "contain",
599
+ "default"
575
600
  ], N = [
576
- "",
577
- "all",
578
- "top",
579
- "right",
580
- "bottom",
581
- "left",
582
- "block",
583
- "inline"
584
- ], O = [
585
- "",
586
- "none",
587
- "surface-light",
588
- "surface-default",
589
- "surface-strong",
590
- "surface-stronger",
591
- "surface-dark",
592
- "surface-brand",
593
- "surface-brand-light",
594
- "container-primary",
595
- "container-secondary",
596
- "container-light",
597
- "container-default",
598
- "container-strong",
599
- "state-hover",
600
- "state-hover-bordered",
601
- "state-active",
602
- "state-disabled",
603
- "purpose-success",
604
- "purpose-warning",
605
- "purpose-error",
606
- "purpose-unlimited",
607
- "purpose-promo",
608
- "purpose-info",
609
- "purpose-eco",
610
- "purpose-notification"
611
- ], G = ["", "cover", "contain", "default"], q = ["", "none", "s", "m", "l", "xl"], E = [
612
- "",
613
- "default",
614
- "title-4xl",
615
- "title-3xl",
616
- "title-2xl",
617
- "title-xl",
618
- "title-l",
619
- "title-m",
620
- "title-s",
621
- "subtitle"
601
+ "",
602
+ "none",
603
+ "s",
604
+ "m",
605
+ "l",
606
+ "xl"
622
607
  ], P = [
623
- "",
624
- "purple-top-red",
625
- "purple-top-magenta",
626
- "purple-top-orange",
627
- "purple-top-blue",
628
- "purple-top-turquoise",
629
- "purple-top-green",
630
- "purple-right-red",
631
- "purple-right-magenta",
632
- "purple-right-orange",
633
- "purple-right-blue",
634
- "purple-right-turquoise",
635
- "purple-right-green",
636
- "purple-top-right-red",
637
- "purple-top-right-magenta",
638
- "purple-top-right-orange",
639
- "purple-top-right-blue",
640
- "purple-top-right-turquoise",
641
- "purple-top-right-green",
642
- "purple-bottom-right-red",
643
- "purple-bottom-right-magenta",
644
- "purple-bottom-right-orange",
645
- "purple-bottom-right-blue",
646
- "purple-bottom-right-turquoise",
647
- "purple-bottom-right-green",
648
- "color-top-red",
649
- "color-top-magenta",
650
- "color-top-orange",
651
- "color-top-blue",
652
- "color-top-turquoise",
653
- "color-top-green",
654
- "color-right-red",
655
- "color-right-magenta",
656
- "color-right-orange",
657
- "color-right-blue",
658
- "color-right-turquoise",
659
- "color-right-green",
660
- "color-top-right-red",
661
- "color-top-right-magenta",
662
- "color-top-right-orange",
663
- "color-top-right-blue",
664
- "color-top-right-turquoise",
665
- "color-top-right-green",
666
- "color-bottom-right-red",
667
- "color-bottom-right-magenta",
668
- "color-bottom-right-orange",
669
- "color-bottom-right-blue",
670
- "color-bottom-right-turquoise",
671
- "color-bottom-right-green"
608
+ "",
609
+ "default",
610
+ "title-4xl",
611
+ "title-3xl",
612
+ "title-2xl",
613
+ "title-xl",
614
+ "title-l",
615
+ "title-m",
616
+ "title-s",
617
+ "subtitle"
618
+ ], F = /* @__PURE__ */ ".purple-top-red.purple-top-magenta.purple-top-orange.purple-top-blue.purple-top-turquoise.purple-top-green.purple-right-red.purple-right-magenta.purple-right-orange.purple-right-blue.purple-right-turquoise.purple-right-green.purple-top-right-red.purple-top-right-magenta.purple-top-right-orange.purple-top-right-blue.purple-top-right-turquoise.purple-top-right-green.purple-bottom-right-red.purple-bottom-right-magenta.purple-bottom-right-orange.purple-bottom-right-blue.purple-bottom-right-turquoise.purple-bottom-right-green.color-top-red.color-top-magenta.color-top-orange.color-top-blue.color-top-turquoise.color-top-green.color-right-red.color-right-magenta.color-right-orange.color-right-blue.color-right-turquoise.color-right-green.color-top-right-red.color-top-right-magenta.color-top-right-orange.color-top-right-blue.color-top-right-turquoise.color-top-right-green.color-bottom-right-red.color-bottom-right-magenta.color-bottom-right-orange.color-bottom-right-blue.color-bottom-right-turquoise.color-bottom-right-green".split("."), I = [
619
+ "none",
620
+ "2xs",
621
+ "xs",
622
+ "s",
623
+ "default",
624
+ "l",
625
+ "heading-to-subtitle",
626
+ "heading-to-content",
627
+ "page-layout-between-sections"
628
+ ], L = [
629
+ "",
630
+ "all",
631
+ "top",
632
+ "right",
633
+ "bottom",
634
+ "left"
672
635
  ], R = [
673
- "none",
674
- "2xs",
675
- "xs",
676
- "s",
677
- "default",
678
- "l",
679
- "heading-to-subtitle",
680
- "heading-to-content",
681
- "page-layout-between-sections"
682
- ], V = [
683
- "",
684
- "all",
685
- "top",
686
- "right",
687
- "bottom",
688
- "left"
689
- ], z = [
690
- "",
691
- "default",
692
- "xs",
693
- "s",
694
- "m",
695
- "l",
696
- "xl"
636
+ "",
637
+ "default",
638
+ "xs",
639
+ "s",
640
+ "m",
641
+ "l",
642
+ "xl"
697
643
  ];
698
- function B(i) {
699
- const t = document.createElement("style");
700
- t.innerHTML = i, document.head.appendChild(t);
644
+ function z(e) {
645
+ let t = document.createElement("style");
646
+ t.innerHTML = e, document.head.appendChild(t);
701
647
  }
702
- function _(i) {
703
- return typeof i == "string" && (i === "false" || i === "0" || i === "null") || typeof i == "boolean" && !i;
648
+ function B(e) {
649
+ return typeof e == "string" && (e === "false" || e === "0" || e === "null") || typeof e == "boolean" && !e;
704
650
  }
705
- function H() {
706
- return window.matchMedia("only screen and (min-width: 768px)").matches ? "tablet" : window.matchMedia("only screen and (min-width: 1025px)").matches ? "laptop" : "mobile";
651
+ function V() {
652
+ return window.matchMedia("only screen and (min-width: 768px)").matches ? "tablet" : window.matchMedia("only screen and (min-width: 1025px)").matches ? "laptop" : "mobile";
707
653
  }
708
- function F(i, t) {
709
- return i.includes(t);
654
+ function H(e, t) {
655
+ return t !== null && e.includes(t);
710
656
  }
711
- function X(i, t, s = !0) {
712
- var e;
713
- if ([
714
- "aria-label",
715
- "aria-labelledby",
716
- "aria-describedby",
717
- "aria-controls",
718
- "aria-expanded",
719
- "aria-haspopup",
720
- "aria-pressed",
721
- "aria-selected",
722
- "aria-required",
723
- "aria-disabled",
724
- "aria-live",
725
- "aria-atomic",
726
- "aria-relevant",
727
- "aria-orientation",
728
- "aria-valuenow",
729
- "aria-valuetext",
730
- "aria-valuemin",
731
- "aria-valuemax",
732
- "aria-details",
733
- "aria-modal",
734
- "aria-autocomplete",
735
- "aria-activedescendant",
736
- "aria-colcount",
737
- "aria-colindex",
738
- "aria-colspan",
739
- "aria-rowcount",
740
- "aria-rowindex",
741
- "aria-rowspan",
742
- "aria-keyshortcuts",
743
- "aria-placeholder",
744
- "aria-invalid",
745
- "aria-busy",
746
- "aria-owns"
747
- ].forEach((o) => {
748
- i.getAttribute(o) && (t.setAttribute(o, i.getAttribute(o)), i.removeAttribute(o));
749
- }), s) {
750
- const o = `px-${((e = t.localName) == null ? void 0 : e.toLowerCase()) ?? "component"}-${Math.random().toString(36).substring(2, 15)}`;
751
- t.setAttribute("id", o), i.setAttribute("aria-labelledby", o);
752
- }
657
+ var U = /* @__PURE__ */ "aria-label.aria-labelledby.aria-describedby.aria-controls.aria-expanded.aria-haspopup.aria-pressed.aria-selected.aria-required.aria-disabled.aria-live.aria-atomic.aria-relevant.aria-orientation.aria-valuenow.aria-valuetext.aria-valuemin.aria-valuemax.aria-details.aria-modal.aria-autocomplete.aria-activedescendant.aria-colcount.aria-colindex.aria-colspan.aria-rowcount.aria-rowindex.aria-rowspan.aria-keyshortcuts.aria-placeholder.aria-invalid.aria-busy.aria-owns".split(".");
658
+ function W(e, t, n = !1) {
659
+ if (U.forEach((n) => {
660
+ e.getAttribute(n) && (t.setAttribute(n, e.getAttribute(n)), e.removeAttribute(n));
661
+ }), n && !e.getAttribute("aria-labelledby")) {
662
+ let n = `px-${t.localName?.toLowerCase() ?? "component"}-${Math.random().toString(36).substring(2, 15)}`;
663
+ t.setAttribute("id", n), e.setAttribute("aria-labelledby", n);
664
+ }
753
665
  }
754
- function I(i, t, s, e = "", o) {
755
- const a = new CSSStyleSheet(), l = s.reduce(
756
- (n, r) => n + `
757
- ${t(i, r)} {
758
- ${i}: var(--${e}-${r}-desktop);
759
- ${o ? `${o}:var(--${e}-${r}-desktop)` : ""}
666
+ function G(e, t, n) {
667
+ if (n == null || n === "") {
668
+ e.removeAttribute(t);
669
+ return;
670
+ }
671
+ e.setAttribute(t, n.toString());
672
+ }
673
+ function K(e, t, n) {
674
+ if (!n) {
675
+ e.removeAttribute(t);
676
+ return;
677
+ }
678
+ e.setAttribute(t, "");
679
+ }
680
+ //#endregion
681
+ //#region src/breakpoints.ts
682
+ function q(e, t, n, r = "", i, a = e) {
683
+ let o = new CSSStyleSheet(), s = n.reduce((n, o) => n + `
684
+ ${t(a, o)} {
685
+ ${e}: var(--${r}-${o}-desktop);
686
+ ${i ? `${i}:var(--${r}-${o}-desktop)` : ""}
760
687
  }
761
688
  /* Mobile only - max 767px */
762
- @media only screen and (max-width: 47.938em) {
763
- ${t(i, r)} {
764
- ${i}: var(--${e}-${r}-mobile);
765
- ${o ? `${o}: var(--${e}-${r}-mobile)` : ""}
689
+ @media only screen and (max-width: 47.938rem) {
690
+ ${t(a, o)} {
691
+ ${e}: var(--${r}-${o}-mobile);
692
+ ${i ? `${i}: var(--${r}-${o}-mobile)` : ""}
766
693
  }
767
694
  }
768
- ${t(i, r, "mobile")} {
695
+ ${t(a, o, "mobile")} {
769
696
  /* Mobile only - max 767px */
770
- @media only screen and (max-width: 47.938em) {
771
- ${i}: var(--${e}-${r}-mobile) !important;
772
- ${o ? `${o}: var(--${e}-${r}-mobile)` : ""}
697
+ @media only screen and (max-width: 47.938rem) {
698
+ ${e}: var(--${r}-${o}-mobile) !important;
699
+ ${i ? `${i}: var(--${r}-${o}-mobile)` : ""}
773
700
  }
774
701
  }
775
- ${t(i, r, "tablet")} {
702
+ ${t(a, o, "tablet")} {
776
703
  /* Tablet - min 768px max 1024px */
777
- @media only screen and (min-width: 48em) and (max-width: 64em) {
778
- ${i}: var(--${e}-${r}-desktop) !important;
779
- ${o ? `${o}: var(--${e}-${r}-desktop)` : ""}
704
+ @media only screen and (min-width: 48rem) and (max-width: 64rem) {
705
+ ${e}: var(--${r}-${o}-desktop) !important;
706
+ ${i ? `${i}: var(--${r}-${o}-desktop)` : ""}
780
707
  }
781
708
  }
782
- ${t(i, r, "laptop")} {
709
+ ${t(a, o, "laptop")} {
783
710
  /* Laptop - 1025px*/
784
- @media only screen and (min-width: 64.0625em) {
785
- ${i}: var(--${e}-${r}-desktop) !important;
786
- ${o ? `${o}: var(--${e}-${r}-desktop)` : ""}
711
+ @media only screen and (min-width: 64.0625rem) {
712
+ ${e}: var(--${r}-${o}-desktop) !important;
713
+ ${i ? `${i}: var(--${r}-${o}-desktop)` : ""}
787
714
  }
788
715
  }
789
- ${t(i, r, "desktop")} {
716
+ ${t(a, o, "desktop")} {
790
717
  /* Desktop - 1025px*/
791
- @media only screen and (min-width: 64.0625em) {
792
- ${i}: var(--${e}-${r}-desktop) !important;
793
- ${o ? `${o}: var(--${e}-${r}-desktop)` : ""}
718
+ @media only screen and (min-width: 64.0625rem) {
719
+ ${e}: var(--${r}-${o}-desktop) !important;
720
+ ${i ? `${i}: var(--${r}-${o}-desktop)` : ""}
794
721
  }
795
- }`,
796
- ""
797
- );
798
- return a.replaceSync(l), a;
799
- }
800
- class J {
801
- constructor(t, s, e, o) {
802
- this.component = t, this.attributeName = s, this.cssVariable = o, this.attributeNameMobile = `${this.attributeName}--mobile`, this.attributeNameTablet = `${this.attributeName}--tablet`, this.attributeNameLaptop = `${this.attributeName}--laptop`, this.attributeNameDesktop = `${this.attributeName}--desktop`, this._attributeValue = e, Object.defineProperty(
803
- this.component,
804
- this.toCamelCase(this.attributeName),
805
- {
806
- get: () => this.component.getAttribute(this.attributeName),
807
- set: (a) => {
808
- this.component.setAttribute(this.attributeName, a);
809
- }
810
- }
811
- );
812
- }
813
- toCamelCase(t) {
814
- return t.replace(/[-_]+(.)?/g, (s, e) => e ? e.toUpperCase() : "");
815
- }
816
- init(t) {
817
- this.setCSSProperty(this.attributeName, t), this.setCSSProperties();
818
- }
819
- attributeChangedCallback(t, s, e) {
820
- if (s !== e)
821
- switch (!0) {
822
- case t === this.attributeName:
823
- case t === `${this.attributeName}--mobile`:
824
- case t === `${this.attributeName}--tablet`:
825
- case t === `${this.attributeName}--laptop`:
826
- case t === `${this.attributeName}--desktop`:
827
- this.setCSSProperty(t, e);
828
- break;
829
- default:
830
- return;
831
- }
832
- }
833
- setCSSProperty(t, s, e = !0) {
834
- const [, o = ""] = t.split("--");
835
- this.component.style.setProperty(
836
- `${this.cssVariable}${e ? "-all" : ""}${o ? `-${o}` : ""}`,
837
- `${this._attributeValue(s, o)}`
838
- );
839
- }
840
- setCSSProperties() {
841
- const t = this.component.getAttribute(this.attributeName);
842
- t && (this.setCSSProperty(this.attributeName, t), this.setCSSProperty(this.attributeNameMobile, t), this.setCSSProperty(this.attributeNameTablet, t), this.setCSSProperty(this.attributeNameLaptop, t), this.setCSSProperty(this.attributeNameDesktop, t));
843
- const s = this.component.getAttribute(
844
- this.attributeNameMobile
845
- );
846
- s && this.setCSSProperty(
847
- this.attributeNameMobile,
848
- s,
849
- !1
850
- );
851
- const e = this.component.getAttribute(
852
- this.attributeNameTablet
853
- );
854
- e && this.setCSSProperty(
855
- this.attributeNameTablet,
856
- e,
857
- !1
858
- );
859
- const o = this.component.getAttribute(
860
- this.attributeNameLaptop
861
- );
862
- o && this.setCSSProperty(
863
- this.attributeNameLaptop,
864
- o,
865
- !1
866
- );
867
- const a = this.component.getAttribute(
868
- this.attributeNameDesktop
869
- );
870
- a && this.setCSSProperty(
871
- this.attributeNameDesktop,
872
- a,
873
- !1
874
- );
875
- }
876
- set attributeValue(t) {
877
- this._attributeValue = t, this.setCSSProperties();
878
- }
722
+ }`, "");
723
+ return o.replaceSync(s), o;
879
724
  }
880
- export {
881
- J as AttributeBreakpointHandlerDelegate,
882
- y as PxElement,
883
- p as WithExtraAttributes,
884
- B as addGlobalStylesheet,
885
- z as assetContainerImgWidthValues,
886
- O as backgroundColorValues,
887
- G as backgroundSizeValues,
888
- D as borderColorValues,
889
- T as borderRadiusValues,
890
- N as borderSideValues,
891
- M as borderValues,
892
- q as boxShadowValues,
893
- F as checkName,
894
- $ as colorValues,
895
- g as cssGridAlignSelfValues,
896
- m as cssGridColSpanValues,
897
- f as cssGridJustifySelfValues,
898
- k as cssGridOrderValues,
899
- A as cssGridPlaceSelfValues,
900
- I as cssTokenBreakpoints,
901
- c as flexboxAlignSelfValues,
902
- S as fontsizeValues,
903
- x as fontweightValues,
904
- R as gapValues,
905
- d as getSupportedAttributeNames,
906
- b as getSupportedPropertyNames,
907
- H as getViewportFormat,
908
- P as gradientValues,
909
- w as gridGapValues,
910
- E as headingValues,
911
- v as iconSizeValues,
912
- j as iconSizeValuesKC,
913
- _ as isFalsy,
914
- V as noBorderRadiusValues,
915
- L as paddingValues,
916
- C as textalignValues,
917
- X as transferAccessibilityAttributes
725
+ var J = class {
726
+ constructor(e, t, n, r) {
727
+ this.component = e, this.attributeName = t, this.cssVariable = r, this.attributeNameMobile = `${this.attributeName}--mobile`, this.attributeNameTablet = `${this.attributeName}--tablet`, this.attributeNameLaptop = `${this.attributeName}--laptop`, this.attributeNameDesktop = `${this.attributeName}--desktop`, this._attributeValue = n, Object.defineProperty(this.component, this.toCamelCase(this.attributeName), {
728
+ get: () => this.component.getAttribute(this.attributeName),
729
+ set: (e) => {
730
+ this.component.setAttribute(this.attributeName, e);
731
+ }
732
+ });
733
+ }
734
+ toCamelCase(e) {
735
+ return e.replace(/[-_]+(.)?/g, (e, t) => t ? t.toUpperCase() : "");
736
+ }
737
+ init(e) {
738
+ this.setCSSProperty(this.attributeName, e), this.setCSSProperties();
739
+ }
740
+ attributeChangedCallback(e, t, n) {
741
+ if (t !== n) switch (!0) {
742
+ case e === this.attributeName:
743
+ case e === `${this.attributeName}--mobile`:
744
+ case e === `${this.attributeName}--tablet`:
745
+ case e === `${this.attributeName}--laptop`:
746
+ case e === `${this.attributeName}--desktop`:
747
+ this.setCSSProperty(e, n);
748
+ break;
749
+ default: return;
750
+ }
751
+ }
752
+ setCSSProperty(e, t, n = !0) {
753
+ let [, r = ""] = e.split("--");
754
+ this.component.style.setProperty(`${this.cssVariable}${n ? "-all" : ""}${r ? `-${r}` : ""}`, `${this._attributeValue(t, r)}`);
755
+ }
756
+ setCSSProperties() {
757
+ let e = this.component.getAttribute(this.attributeName);
758
+ e && (this.setCSSProperty(this.attributeName, e), this.setCSSProperty(this.attributeNameMobile, e), this.setCSSProperty(this.attributeNameTablet, e), this.setCSSProperty(this.attributeNameLaptop, e), this.setCSSProperty(this.attributeNameDesktop, e));
759
+ let t = this.component.getAttribute(this.attributeNameMobile);
760
+ t && this.setCSSProperty(this.attributeNameMobile, t, !1);
761
+ let n = this.component.getAttribute(this.attributeNameTablet);
762
+ n && this.setCSSProperty(this.attributeNameTablet, n, !1);
763
+ let r = this.component.getAttribute(this.attributeNameLaptop);
764
+ r && this.setCSSProperty(this.attributeNameLaptop, r, !1);
765
+ let i = this.component.getAttribute(this.attributeNameDesktop);
766
+ i && this.setCSSProperty(this.attributeNameDesktop, i, !1);
767
+ }
768
+ set attributeValue(e) {
769
+ this._attributeValue = e, this.setCSSProperties();
770
+ }
918
771
  };
772
+ //#endregion
773
+ export { J as AttributeBreakpointHandlerDelegate, d as PxElement, f as VerticallyExtendedElement, u as WithExtraAttributes, c as WrappedInteractiveStateController, U as accessibilityAttributes, z as addGlobalStylesheet, R as assetContainerImgWidthValues, j as backgroundColorValues, M as backgroundSizeValues, K as booleanPropertyToAttributeSetter, k as borderColorValues, O as borderRadiusValues, A as borderSideValues, D as borderValues, N as boxShadowValues, H as checkName, x as colorValues, h as cssGridAlignSelfValues, _ as cssGridColSpanValues, g as cssGridJustifySelfValues, v as cssGridOrderValues, y as cssGridPlaceSelfValues, q as cssTokenBreakpoints, m as flexboxAlignSelfValues, b as fontsizeValues, S as fontweightValues, I as gapValues, n as getSupportedAttributeNames, t as getSupportedPropertyNames, V as getViewportFormat, F as gradientValues, p as gridGapValues, P as headingValues, C as iconSizeValues, w as iconSizeValuesKC, o as isComponentDebug, B as isFalsy, s as log, L as noBorderRadiusValues, E as paddingValues, G as propertyToAttributeSetter, T as textalignValues, W as transferAccessibilityAttributes };