@proximus/lavender-list 2.0.0-alpha.227 → 2.0.0-alpha.229

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 (6) hide show
  1. package/dist/List.d.ts +1 -0
  2. package/dist/ListItem.d.ts +1 -0
  3. package/dist/custom-elements.json +18 -0
  4. package/dist/index.es.js +217 -172
  5. package/dist/web-types.json +1 -1
  6. package/package.json +1 -1
package/dist/List.d.ts CHANGED
@@ -4,6 +4,7 @@ export declare class List extends PxElement<HTMLDivElement> {
4
4
  #private;
5
5
  protected static readonly template: HTMLTemplateElement;
6
6
  static nativeName: string;
7
+ static nativeAttributes: {};
7
8
  constructor();
8
9
  static get observedAttributes(): string[];
9
10
  connectedCallback(): void;
package/dist/ListItem.d.ts CHANGED
@@ -3,6 +3,7 @@ export declare const LIST_ITEM_CONNECTED_EVENT = "px-list-item-connected";
3
3
  export declare class ListItem extends PxElement<HTMLDivElement> {
4
4
  protected static readonly template: HTMLTemplateElement;
5
5
  static nativeName: string;
6
+ static nativeAttributes: {};
6
7
  constructor();
7
8
  connectedCallback(): void;
8
9
  static get observedAttributes(): string[];
package/dist/custom-elements.json CHANGED
@@ -35,6 +35,15 @@
35
35
  "static": true,
36
36
  "default": "'div'"
37
37
  },
38
+ {
39
+ "kind": "field",
40
+ "name": "nativeAttributes",
41
+ "type": {
42
+ "text": "object"
43
+ },
44
+ "static": true,
45
+ "default": "{}"
46
+ },
38
47
  {
39
48
  "kind": "method",
40
49
  "name": "#syncChildren",
@@ -168,6 +177,15 @@
168
177
  "static": true,
169
178
  "default": "'div'"
170
179
  },
180
+ {
181
+ "kind": "field",
182
+ "name": "nativeAttributes",
183
+ "type": {
184
+ "text": "object"
185
+ },
186
+ "static": true,
187
+ "default": "{}"
188
+ },
171
189
  {
172
190
  "kind": "field",
173
191
  "name": "$children",
package/dist/index.es.js CHANGED
@@ -1,39 +1,114 @@
1
1
  //#region src/list.css?inline
2
- var e = ".list{flex-direction:column;margin:0;padding:0;list-style:none;display:flex}", t = "@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 ../common/src/common.ts
5
- function n(e) {
6
- let t = document.createElement(e), n = Object.getPrototypeOf(t);
7
- return Object.getOwnPropertyNames(n);
8
- }
9
- function r(e) {
10
- let t = document.createElement(e), n = Object.getPrototypeOf(t);
11
- return Object.getOwnPropertyNames(n).map((e) => e.toLowerCase());
12
- }
13
- var i = new CSSStyleSheet();
14
- i.replaceSync(t);
15
- var a = {
2
+ var e = ".list{flex-direction:column;margin:0;padding:0;list-style:none;display:flex}", t = {
16
3
  BASE_URL: "/",
17
4
  DEV: !0,
18
5
  MODE: "production",
19
6
  PROD: !1,
20
7
  SSR: !1,
21
8
  VITE_COMPONENT_DEBUG: "true"
22
- }, o = a?.VITE_COMPONENT_DEBUG === "true" || a?.DEV === !0;
23
- typeof window < "u" && (window.isComponentDebug = s);
24
- function s() {
25
- return o;
9
+ }, n = t?.VITE_COMPONENT_DEBUG === "true" || t?.DEV === !0;
10
+ typeof window < "u" && (window.isComponentDebug = r);
11
+ function r() {
12
+ return n;
26
13
  }
27
- function c(e) {
28
- s() && console.error(e);
14
+ function i(e) {
15
+ r() && console.error(e);
29
16
  }
30
- typeof window < "u" && (window.isComponentDebug = s);
31
- var l = class e extends HTMLElement {
17
+ typeof window < "u" && (window.isComponentDebug = r);
18
+ //#endregion
19
+ //#region ../common/src/common.css?inline
20
+ var a = "@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}}";
21
+ //#endregion
22
+ //#region ../common/src/attributeSetters.ts
23
+ function o(e, t, n) {
24
+ n == null || n === "" ? e.removeAttribute(t) : e.setAttribute(t, n.toString());
25
+ }
26
+ function s(e, t, n) {
27
+ n ? e.setAttribute(t, "") : e.removeAttribute(t);
28
+ }
29
+ //#endregion
30
+ //#region ../common/src/values.ts
31
+ var c = [
32
+ "",
33
+ "default",
34
+ "auto",
35
+ "flex-start",
36
+ "start",
37
+ "flex-end",
38
+ "end",
39
+ "center",
40
+ "baseline",
41
+ "stretch"
42
+ ], l = [
43
+ "",
44
+ "default",
45
+ "start",
46
+ "end",
47
+ "center",
48
+ "stretch"
49
+ ], u = [
50
+ "",
51
+ "default",
52
+ "start",
53
+ "end",
54
+ "center",
55
+ "stretch"
56
+ ], d = [
57
+ "",
58
+ "1",
59
+ "2",
60
+ "3",
61
+ "4",
62
+ "5",
63
+ "6",
64
+ "7",
65
+ "8",
66
+ "9",
67
+ "10",
68
+ "11",
69
+ "12"
70
+ ], f = [
71
+ "",
72
+ "-1",
73
+ "0",
74
+ "1",
75
+ "2",
76
+ "3",
77
+ "4",
78
+ "5",
79
+ "6",
80
+ "7",
81
+ "8",
82
+ "9",
83
+ "10",
84
+ "11",
85
+ "12"
86
+ ];
87
+ [...[
88
+ "Xs",
89
+ "S",
90
+ "M",
91
+ "L",
92
+ "Xl"
93
+ ].map((e) => e.toLowerCase())];
94
+ var p = [
95
+ "none",
96
+ "2xs",
97
+ "xs",
98
+ "s",
99
+ "default",
100
+ "l",
101
+ "heading-to-subtitle",
102
+ "heading-to-content",
103
+ "page-layout-between-sections"
104
+ ], m = new CSSStyleSheet();
105
+ m.replaceSync(a);
106
+ var h = class e extends HTMLElement {
32
107
  static get observedAttributes() {
33
108
  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(".");
34
109
  }
35
110
  constructor(...e) {
36
- super(), this.shadowRoot || this.attachShadow({ mode: "open" }), this.shadowRoot.adoptedStyleSheets = [i, ...e];
111
+ super(), this.shadowRoot || this.attachShadow({ mode: "open" }), this.shadowRoot.adoptedStyleSheets = [m, ...e];
37
112
  }
38
113
  attributeChangedCallback(t, n, r) {
39
114
  if (e.observedAttributes.indexOf(t) !== -1) switch (t) {
@@ -59,36 +134,36 @@ var l = class e extends HTMLElement {
59
134
  case "align-self--tablet":
60
135
  case "align-self--laptop":
61
136
  case "align-self--desktop":
62
- this.updateProperties(t, n, r, this.parentElement?.localName === "px-grid" ? f : d);
137
+ this.updateProperties(t, n, r, this.parentElement?.localName === "px-grid" ? l : c);
63
138
  break;
64
139
  case "justify-self":
65
140
  case "justify-self--mobile":
66
141
  case "justify-self--tablet":
67
142
  case "justify-self--laptop":
68
143
  case "justify-self--desktop":
69
- this.updateProperties(t, n, r, p);
144
+ this.updateProperties(t, n, r, u);
70
145
  break;
71
146
  case "col-span":
72
147
  case "col-span--mobile":
73
148
  case "col-span--tablet":
74
149
  case "col-span--laptop":
75
150
  case "col-span--desktop":
76
- this.updateProperties(t, n, r, m);
151
+ this.updateProperties(t, n, r, d);
77
152
  break;
78
153
  case "order":
79
154
  case "order--mobile":
80
155
  case "order--tablet":
81
156
  case "order--laptop":
82
- case "order--desktop": this.updateProperties(t, n, r, h);
157
+ case "order--desktop": this.updateProperties(t, n, r, f);
83
158
  }
84
159
  }
85
160
  updateProperties(e, t, n, r) {
86
- r && (this.checkName(r, n) || c(`"${n}" is not an allowed ${e} value for ${this.tagName.toLowerCase()}. Allowed values are: "${r.join("\", \"")}".`));
87
- let i = e.indexOf("--") > -1, a = i ? e.split("--")[0] : e;
88
- if (!i) this.style.setProperty(`--${a}-value`, t), this.style.setProperty(`--${a}-value`, n);
161
+ r && (this.checkName(r, n) || i(`"${n}" is not an allowed ${e} value for ${this.tagName.toLowerCase()}. Allowed values are: "${r.join("\", \"")}".`));
162
+ let a = e.indexOf("--") > -1, o = a ? e.split("--")[0] : e;
163
+ if (!a) this.style.setProperty(`--${o}-value`, t), this.style.setProperty(`--${o}-value`, n);
89
164
  else {
90
165
  let r = e.split("--")[1];
91
- this.style.setProperty(`--${a}--${r}-value`, t), this.style.setProperty(`--${a}--${r}-value`, n);
166
+ this.style.setProperty(`--${o}--${r}-value`, t), this.style.setProperty(`--${o}--${r}-value`, n);
92
167
  }
93
168
  }
94
169
  updateStyle(e, t, n) {
@@ -116,355 +191,313 @@ var l = class e extends HTMLElement {
116
191
  return this.getAttribute("grow");
117
192
  }
118
193
  set grow(e) {
119
- _(this, "grow", e);
194
+ o(this, "grow", e);
120
195
  }
121
196
  get growMobile() {
122
197
  return this.getAttribute("grow--mobile");
123
198
  }
124
199
  set growMobile(e) {
125
- _(this, "grow--mobile", e);
200
+ o(this, "grow--mobile", e);
126
201
  }
127
202
  get growTablet() {
128
203
  return this.getAttribute("grow--tablet");
129
204
  }
130
205
  set growTablet(e) {
131
- _(this, "grow--tablet", e);
206
+ o(this, "grow--tablet", e);
132
207
  }
133
208
  get growLaptop() {
134
209
  return this.getAttribute("grow--laptop");
135
210
  }
136
211
  set growLaptop(e) {
137
- _(this, "grow--laptop", e);
212
+ o(this, "grow--laptop", e);
138
213
  }
139
214
  get growDesktop() {
140
215
  return this.getAttribute("grow--desktop");
141
216
  }
142
217
  set growDesktop(e) {
143
- _(this, "grow--desktop", e);
218
+ o(this, "grow--desktop", e);
144
219
  }
145
220
  get shrink() {
146
221
  return this.getAttribute("shrink");
147
222
  }
148
223
  set shrink(e) {
149
- _(this, "shrink", e);
224
+ o(this, "shrink", e);
150
225
  }
151
226
  get shrinkMobile() {
152
227
  return this.getAttribute("shrink--mobile");
153
228
  }
154
229
  set shrinkMobile(e) {
155
- _(this, "shrink--mobile", e);
230
+ o(this, "shrink--mobile", e);
156
231
  }
157
232
  get shrinkTablet() {
158
233
  return this.getAttribute("shrink--tablet");
159
234
  }
160
235
  set shrinkTablet(e) {
161
- _(this, "shrink--tablet", e);
236
+ o(this, "shrink--tablet", e);
162
237
  }
163
238
  get shrinkLaptop() {
164
239
  return this.getAttribute("shrink--laptop");
165
240
  }
166
241
  set shrinkLaptop(e) {
167
- _(this, "shrink--laptop", e);
242
+ o(this, "shrink--laptop", e);
168
243
  }
169
244
  get shrinkDesktop() {
170
245
  return this.getAttribute("shrink--desktop");
171
246
  }
172
247
  set shrinkDesktop(e) {
173
- _(this, "shrink--desktop", e);
248
+ o(this, "shrink--desktop", e);
174
249
  }
175
250
  get basis() {
176
251
  return this.getAttribute("basis");
177
252
  }
178
253
  set basis(e) {
179
- _(this, "basis", e);
254
+ o(this, "basis", e);
180
255
  }
181
256
  get basisMobile() {
182
257
  return this.getAttribute("basis--mobile");
183
258
  }
184
259
  set basisMobile(e) {
185
- _(this, "basis--mobile", e);
260
+ o(this, "basis--mobile", e);
186
261
  }
187
262
  get basisTablet() {
188
263
  return this.getAttribute("basis--tablet");
189
264
  }
190
265
  set basisTablet(e) {
191
- _(this, "basis--tablet", e);
266
+ o(this, "basis--tablet", e);
192
267
  }
193
268
  get basisLaptop() {
194
269
  return this.getAttribute("basis--laptop");
195
270
  }
196
271
  set basisLaptop(e) {
197
- _(this, "basis--laptop", e);
272
+ o(this, "basis--laptop", e);
198
273
  }
199
274
  get basisDesktop() {
200
275
  return this.getAttribute("basis--desktop");
201
276
  }
202
277
  set basisDesktop(e) {
203
- _(this, "basis--desktop", e);
278
+ o(this, "basis--desktop", e);
204
279
  }
205
280
  get alignSelf() {
206
281
  return this.getAttribute("align-self");
207
282
  }
208
283
  set alignSelf(e) {
209
- _(this, "align-self", e);
284
+ o(this, "align-self", e);
210
285
  }
211
286
  get alignSelfMobile() {
212
287
  return this.getAttribute("align-self--mobile");
213
288
  }
214
289
  set alignSelfMobile(e) {
215
- _(this, "align-self--mobile", e);
290
+ o(this, "align-self--mobile", e);
216
291
  }
217
292
  get alignSelfTablet() {
218
293
  return this.getAttribute("align-self--tablet");
219
294
  }
220
295
  set alignSelfTablet(e) {
221
- _(this, "align-self--tablet", e);
296
+ o(this, "align-self--tablet", e);
222
297
  }
223
298
  get alignSelfLaptop() {
224
299
  return this.getAttribute("align-self--laptop");
225
300
  }
226
301
  set alignSelfLaptop(e) {
227
- _(this, "align-self--laptop", e);
302
+ o(this, "align-self--laptop", e);
228
303
  }
229
304
  get alignSelfDesktop() {
230
305
  return this.getAttribute("align-self--desktop");
231
306
  }
232
307
  set alignSelfDesktop(e) {
233
- _(this, "align-self--desktop", e);
308
+ o(this, "align-self--desktop", e);
234
309
  }
235
310
  get justifySelf() {
236
311
  return this.getAttribute("justify-self");
237
312
  }
238
313
  set justifySelf(e) {
239
- _(this, "justify-self", e);
314
+ o(this, "justify-self", e);
240
315
  }
241
316
  get justifySelfMobile() {
242
317
  return this.getAttribute("justify-self--mobile");
243
318
  }
244
319
  set justifySelfMobile(e) {
245
- _(this, "justify-self--mobile", e);
320
+ o(this, "justify-self--mobile", e);
246
321
  }
247
322
  get justifySelfTablet() {
248
323
  return this.getAttribute("justify-self--tablet");
249
324
  }
250
325
  set justifySelfTablet(e) {
251
- _(this, "justify-self--tablet", e);
326
+ o(this, "justify-self--tablet", e);
252
327
  }
253
328
  get justifySelfLaptop() {
254
329
  return this.getAttribute("justify-self--laptop");
255
330
  }
256
331
  set justifySelfLaptop(e) {
257
- _(this, "justify-self--laptop", e);
332
+ o(this, "justify-self--laptop", e);
258
333
  }
259
334
  get justifySelfDesktop() {
260
335
  return this.getAttribute("justify-self--desktop");
261
336
  }
262
337
  set justifySelfDesktop(e) {
263
- _(this, "justify-self--desktop", e);
338
+ o(this, "justify-self--desktop", e);
264
339
  }
265
340
  get hiddenMobile() {
266
341
  return this.hasAttribute("hidden--mobile");
267
342
  }
268
343
  set hiddenMobile(e) {
269
- v(this, "hidden--mobile", e);
344
+ s(this, "hidden--mobile", e);
270
345
  }
271
346
  get hiddenTablet() {
272
347
  return this.hasAttribute("hidden--tablet");
273
348
  }
274
349
  set hiddenTablet(e) {
275
- v(this, "hidden--tablet", e);
350
+ s(this, "hidden--tablet", e);
276
351
  }
277
352
  get hiddenLaptop() {
278
353
  return this.hasAttribute("hidden--laptop");
279
354
  }
280
355
  set hiddenLaptop(e) {
281
- v(this, "hidden--laptop", e);
356
+ s(this, "hidden--laptop", e);
282
357
  }
283
358
  get hiddenDesktop() {
284
359
  return this.hasAttribute("hidden--desktop");
285
360
  }
286
361
  set hiddenDesktop(e) {
287
- v(this, "hidden--desktop", e);
362
+ s(this, "hidden--desktop", e);
288
363
  }
289
364
  get colSpan() {
290
365
  return this.getAttribute("col-span");
291
366
  }
292
367
  set colSpan(e) {
293
- _(this, "col-span", e);
368
+ o(this, "col-span", e);
294
369
  }
295
370
  get colSpanMobile() {
296
371
  return this.getAttribute("col-span--mobile");
297
372
  }
298
373
  set colSpanMobile(e) {
299
- _(this, "col-span--mobile", e);
374
+ o(this, "col-span--mobile", e);
300
375
  }
301
376
  get colSpanTablet() {
302
377
  return this.getAttribute("col-span--tablet");
303
378
  }
304
379
  set colSpanTablet(e) {
305
- _(this, "col-span--tablet", e);
380
+ o(this, "col-span--tablet", e);
306
381
  }
307
382
  get colSpanLaptop() {
308
383
  return this.getAttribute("col-span--laptop");
309
384
  }
310
385
  set colSpanLaptop(e) {
311
- _(this, "col-span--laptop", e);
386
+ o(this, "col-span--laptop", e);
312
387
  }
313
388
  get colSpanDesktop() {
314
389
  return this.getAttribute("col-span--desktop");
315
390
  }
316
391
  set colSpanDesktop(e) {
317
- _(this, "col-span--desktop", e);
392
+ o(this, "col-span--desktop", e);
318
393
  }
319
394
  get order() {
320
395
  return this.getAttribute("order");
321
396
  }
322
397
  set order(e) {
323
- _(this, "order", e);
398
+ o(this, "order", e);
324
399
  }
325
400
  get orderMobile() {
326
401
  return this.getAttribute("order--mobile");
327
402
  }
328
403
  set orderMobile(e) {
329
- _(this, "order--mobile", e);
404
+ o(this, "order--mobile", e);
330
405
  }
331
406
  get orderTablet() {
332
407
  return this.getAttribute("order--tablet");
333
408
  }
334
409
  set orderTablet(e) {
335
- _(this, "order--tablet", e);
410
+ o(this, "order--tablet", e);
336
411
  }
337
412
  get orderLaptop() {
338
413
  return this.getAttribute("order--laptop");
339
414
  }
340
415
  set orderLaptop(e) {
341
- _(this, "order--laptop", e);
416
+ o(this, "order--laptop", e);
342
417
  }
343
418
  get orderDesktop() {
344
419
  return this.getAttribute("order--desktop");
345
420
  }
346
421
  set orderDesktop(e) {
347
- _(this, "order--desktop", e);
422
+ o(this, "order--desktop", e);
423
+ }
424
+ }, g = class extends h {
425
+ static {
426
+ this.nativeAttributes = {};
427
+ }
428
+ static {
429
+ this.nativeProperties = {};
348
430
  }
349
- }, u = class extends l {
350
431
  static {
351
- this.accessorExclusions = [];
432
+ this.nativeMethods = [];
352
433
  }
353
434
  static get observedAttributes() {
354
- return [...super.observedAttributes, ...r(this.nativeName)];
435
+ return [...super.observedAttributes, ...Object.keys(this.nativeAttributes)];
355
436
  }
356
437
  attributeChangedCallback(e, t, n) {
357
- super.attributeChangedCallback(e, t, n), n === null ? this.$el.toggleAttribute(e) : this.$el.setAttribute(e, n);
438
+ super.attributeChangedCallback(e, t, n), t !== n && Object.prototype.hasOwnProperty.call(this.ctor.nativeAttributes, e) && this._forwardNativeAttribute(e, n);
358
439
  }
359
440
  get ctor() {
360
441
  return Object.getPrototypeOf(this).constructor;
361
442
  }
362
443
  constructor(...e) {
363
- super(...e), this.ctor.supportedPropertyNames || (this.ctor.supportedPropertyNames = n(this.ctor.nativeName)), this.enhanceWithNativeProperties();
444
+ super(...e), this.enhanceWithNativeProperties();
445
+ }
446
+ getNativePropertyMetadata() {
447
+ let e = /* @__PURE__ */ new Map(), t = this.ctor.nativeAttributes;
448
+ for (let [n, r] of Object.entries(t)) for (let t of r) e.set(t, n);
449
+ let n = new Map(Object.entries(this.ctor.nativeProperties));
450
+ for (let t of e.keys()) n.set(t, "writable");
451
+ return {
452
+ reflectedProperties: e,
453
+ properties: n
454
+ };
455
+ }
456
+ setNativeProperty(e, t, n) {
457
+ let r = n.get(e);
458
+ if (r !== void 0) {
459
+ this.$el[e] = t;
460
+ let n = this.$el.getAttribute(r);
461
+ this.getAttribute(r) !== n && (n === null ? this.removeAttribute(r) : this.setAttribute(r, n));
462
+ } else this.$el[e] !== t && (this.$el[e] = t);
364
463
  }
365
464
  enhanceWithNativeProperties() {
366
- for (let e of this.ctor.supportedPropertyNames) if (!(e === "constructor" || (this.ctor?.accessorExclusions ?? []).includes(e))) try {
367
- Object.defineProperty(this, e, {
368
- get() {
369
- return this.$el[e];
370
- },
371
- set(t) {
372
- this.$el[e] !== t && (this.$el[e] = t);
373
- }
465
+ let { reflectedProperties: e, properties: t } = this.getNativePropertyMetadata();
466
+ for (let [n, r] of t) {
467
+ let t = n;
468
+ Object.defineProperty(this, t, {
469
+ get: () => this.$el[t],
470
+ set: r === "writable" ? (n) => this.setNativeProperty(t, n, e) : void 0
374
471
  });
375
- } catch (t) {
376
- console.warn(`Could not create property ${e} for`, this.$el, t);
377
472
  }
473
+ for (let e of this.ctor.nativeMethods) Object.defineProperty(this, e, { value: (...t) => {
474
+ let n = this.$el, r = Reflect.get(n, e);
475
+ if (typeof r != "function") throw TypeError(`Native ${this.ctor.nativeName}.${e}() is not supported by this browser`);
476
+ return Reflect.apply(r, n, t);
477
+ } });
378
478
  }
379
479
  get $el() {
380
480
  return this.shadowRoot.querySelector(this.ctor.nativeName);
381
481
  }
482
+ _forwardNativeAttribute(e, t) {
483
+ this.$el.getAttribute(e) !== t && (t === null ? this.$el.removeAttribute(e) : this.$el.setAttribute(e, t));
484
+ }
382
485
  _updateAttribute(e, t) {
383
- _(this, e, t);
486
+ o(this, e, t);
384
487
  }
385
488
  _updateBooleanAttribute(e, t) {
386
- v(this, e, t);
387
- }
388
- }, d = [
389
- "",
390
- "default",
391
- "auto",
392
- "flex-start",
393
- "start",
394
- "flex-end",
395
- "end",
396
- "center",
397
- "baseline",
398
- "stretch"
399
- ], f = [
400
- "",
401
- "default",
402
- "start",
403
- "end",
404
- "center",
405
- "stretch"
406
- ], p = [
407
- "",
408
- "default",
409
- "start",
410
- "end",
411
- "center",
412
- "stretch"
413
- ], m = [
414
- "",
415
- "1",
416
- "2",
417
- "3",
418
- "4",
419
- "5",
420
- "6",
421
- "7",
422
- "8",
423
- "9",
424
- "10",
425
- "11",
426
- "12"
427
- ], h = [
428
- "",
429
- "-1",
430
- "0",
431
- "1",
432
- "2",
433
- "3",
434
- "4",
435
- "5",
436
- "6",
437
- "7",
438
- "8",
439
- "9",
440
- "10",
441
- "11",
442
- "12"
443
- ];
444
- [...[
445
- "Xs",
446
- "S",
447
- "M",
448
- "L",
449
- "Xl"
450
- ].map((e) => e.toLowerCase())];
451
- var g = [
452
- "none",
453
- "2xs",
454
- "xs",
455
- "s",
456
- "default",
457
- "l",
458
- "heading-to-subtitle",
459
- "heading-to-content",
460
- "page-layout-between-sections"
489
+ s(this, e, t);
490
+ }
491
+ }, _ = {
492
+ validity: "readonly",
493
+ validationMessage: "readonly",
494
+ willValidate: "readonly"
495
+ }, v = [
496
+ "checkValidity",
497
+ "reportValidity",
498
+ "setCustomValidity"
461
499
  ];
462
- function _(e, t, n) {
463
- n == null || n === "" ? e.removeAttribute(t) : e.setAttribute(t, n.toString());
464
- }
465
- function v(e, t, n) {
466
- n ? e.setAttribute(t, "") : e.removeAttribute(t);
467
- }
500
+ ({ ..._ }), [...v], { ..._ }, [...v], { ..._ }, [...v], { ..._ }, [...v], { ..._ }, [...v];
468
501
  //#endregion
469
502
  //#region ../common/src/breakpoints.ts
470
503
  function y(e, t, n, r = "", i, a = e) {
@@ -532,13 +565,16 @@ function T(e, t) {
532
565
  //#region src/listitem.css?inline
533
566
  var E = ".list-item{gap:var(--px-spacing-xs-mobile);font-family:var(--px-font-family);line-height:var(--px-line-height-ratio-l);color:var(--px-color-text-neutral-default);align-items:flex-start;display:flex}.list-item[inverted]{color:var(--px-color-text-neutral-inverted)}:is(:host([variant=ul]),:host([variant=ol])) .list-item{margin-left:var(--px-spacing-default-mobile);display:list-item}:host([variant=ul]) .list-item{list-style-type:disc}:host([variant=ol]) .list-item{counter-set:list-item var(--item-index,0);list-style-type:decimal}@media screen and (width>=48rem){.list-item{gap:var(--px-spacing-xs-tablet)}}@media screen and (width>=64.0625rem){.list-item{gap:var(--px-spacing-xs-laptop)}}@media screen and (width>=90.0625rem){.list-item{gap:var(--px-spacing-xs-desktop)}}", D = new CSSStyleSheet();
534
567
  D.replaceSync(E);
535
- var O = "px-list-item-connected", k = class e extends u {
568
+ var O = "px-list-item-connected", k = class e extends g {
536
569
  static {
537
570
  this.template = C("<div class=\"list-item\" role=\"listitem\"><slot name=\"icon\"></slot><slot name=\"label\"></slot></div>");
538
571
  }
539
572
  static {
540
573
  this.nativeName = "div";
541
574
  }
575
+ static {
576
+ this.nativeAttributes = {};
577
+ }
542
578
  constructor() {
543
579
  super(D), T(this.shadowRoot, e.template);
544
580
  }
@@ -549,13 +585,15 @@ var O = "px-list-item-connected", k = class e extends u {
549
585
  }));
550
586
  }
551
587
  static get observedAttributes() {
552
- return ["inverted"];
588
+ return [...super.observedAttributes, "inverted"];
553
589
  }
554
590
  attributeChangedCallback(e, t, n) {
555
591
  if (t !== n) switch (e) {
556
592
  case "inverted":
557
593
  for (let e = 0; e < this.$children.length; e++) this.$children[e].hasAttribute("inverted") || this.$children[e].toggleAttribute("inverted");
558
594
  this.$el.toggleAttribute("inverted", n !== null);
595
+ break;
596
+ default: super.attributeChangedCallback(e, t, n);
559
597
  }
560
598
  }
561
599
  get $children() {
@@ -577,18 +615,25 @@ var j = [
577
615
  "",
578
616
  "ul",
579
617
  "ol"
580
- ], M = y("gap", (e, t, n) => `:host([${e}${n ? `--${n}` : ""}='${t}']) .list`, g, "px-spacing", "--list-gap"), N = class e extends u {
618
+ ], M = y("gap", (e, t, n) => `:host([${e}${n ? `--${n}` : ""}='${t}']) .list`, p, "px-spacing", "--list-gap"), N = class e extends g {
581
619
  static {
582
620
  this.template = C("<div class=\"list\" role=\"list\"><slot></slot></div>");
583
621
  }
584
622
  static {
585
623
  this.nativeName = "div";
586
624
  }
625
+ static {
626
+ this.nativeAttributes = {};
627
+ }
587
628
  constructor() {
588
629
  super(A, M), T(this.shadowRoot, e.template);
589
630
  }
590
631
  static get observedAttributes() {
591
- return ["inverted", "variant"];
632
+ return [
633
+ ...super.observedAttributes,
634
+ "inverted",
635
+ "variant"
636
+ ];
592
637
  }
593
638
  connectedCallback() {
594
639
  this.gap ||= "xs", this.addEventListener(O, () => {
@@ -615,7 +660,7 @@ var j = [
615
660
  this.isConnected && this.#t();
616
661
  break;
617
662
  case "variant":
618
- this.checkName(j, n) || c(`"${n}" is not a valid variant value for ${this.tagName.toLowerCase()}. Allowed values are: "${j.join("\", \"")}".`), this.isConnected && this.#n(n), super.attributeChangedCallback(e, t, n);
663
+ this.checkName(j, n) || i(`"${n}" is not a valid variant value for ${this.tagName.toLowerCase()}. Allowed values are: "${j.join("\", \"")}".`), this.isConnected && this.#n(n);
619
664
  break;
620
665
  default: super.attributeChangedCallback(e, t, n);
621
666
  }
package/dist/web-types.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
3
3
  "name": "@proximus/lavender-list",
4
- "version": "2.0.0-alpha.227",
4
+ "version": "2.0.0-alpha.229",
5
5
  "description-markup": "markdown",
6
6
  "contributions": {
7
7
  "html": {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@proximus/lavender-list",
3
- "version": "2.0.0-alpha.227",
3
+ "version": "2.0.0-alpha.229",
4
4
  "description": "",
5
5
  "main": "dist/index.es.js",
6
6
  "types": "dist/index.d.ts",