@empathyco/x-components 3.0.0-alpha.22 → 3.0.0-alpha.23

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 (38) hide show
  1. package/CHANGELOG.md +8 -0
  2. package/design-system/base.css +4 -1
  3. package/design-system/button-secondary.css +1 -1
  4. package/design-system/default-theme.css +94 -57
  5. package/design-system/dropdown-default.css +68 -33
  6. package/design-system/dropdown-l.css +1 -1
  7. package/design-system/dropdown-m.css +1 -1
  8. package/design-system/dropdown-s.css +1 -1
  9. package/design-system/dropdown-xl.css +1 -1
  10. package/design-system/full-theme.css +1999 -692
  11. package/design-system/list-default.css +2 -15
  12. package/design-system/list-gap.css +61 -1
  13. package/design-system/list-padding.css +52 -1
  14. package/design-system/utilities-background-color.css +7 -7
  15. package/design-system/utilities-border-color.css +7 -7
  16. package/design-system/utilities-border-radius.css +877 -212
  17. package/design-system/utilities-border-width.css +220 -110
  18. package/design-system/utilities-box-shadow.css +11 -11
  19. package/design-system/utilities-font-color.css +7 -14
  20. package/design-system/utilities-margin.css +278 -51
  21. package/design-system/utilities-padding.css +278 -102
  22. package/docs/API-reference/api/x-components.params.md +1 -0
  23. package/docs/API-reference/api/x-components.params.scroll.md +11 -0
  24. package/js/components/base-dropdown.vue.js +2 -2
  25. package/js/components/base-dropdown.vue.js.map +1 -1
  26. package/js/x-modules/url/store/actions/update-url.action.js +20 -2
  27. package/js/x-modules/url/store/actions/update-url.action.js.map +1 -1
  28. package/js/x-modules/url/store/getters/url-params.getter.js +2 -1
  29. package/js/x-modules/url/store/getters/url-params.getter.js.map +1 -1
  30. package/js/x-modules/url/store/module.js +1 -0
  31. package/js/x-modules/url/store/module.js.map +1 -1
  32. package/package.json +2 -2
  33. package/report/x-components.api.json +26 -0
  34. package/report/x-components.api.md +2 -0
  35. package/types/x-modules/url/store/actions/update-url.action.d.ts.map +1 -1
  36. package/types/x-modules/url/store/module.d.ts.map +1 -1
  37. package/types/x-modules/url/store/types.d.ts +1 -0
  38. package/types/x-modules/url/store/types.d.ts.map +1 -1
package/design-system/list-default.css CHANGED
@@ -7,14 +7,6 @@
7
7
  --x-size-align-list-stretch: stretch; }
8
8
 
9
9
  @use 'sass:string';
10
- [dir="ltr"] .x-list {
11
- padding-right: var(--x-size-padding-right-utility, var(--x-size-padding-utility, var(--x-size-padding-list))); }
12
- [dir="rtl"] .x-list {
13
- padding-left: var(--x-size-padding-right-utility, var(--x-size-padding-utility, var(--x-size-padding-list))); }
14
- [dir="ltr"] .x-list {
15
- padding-left: var(--x-size-padding-left-utility, var(--x-size-padding-utility, var(--x-size-padding-list))); }
16
- [dir="rtl"] .x-list {
17
- padding-right: var(--x-size-padding-left-utility, var(--x-size-padding-utility, var(--x-size-padding-list))); }
18
10
  .x-list {
19
11
  display: -ms-flexbox;
20
12
  display: flex;
@@ -23,12 +15,7 @@
23
15
  list-style: none;
24
16
  gap: var(--x-size-gap-list);
25
17
  margin: 0;
26
- -webkit-padding-before: var(--x-size-padding-top-utility, var(--x-size-padding-utility, var(--x-size-padding-list)));
27
- padding-top: var(--x-size-padding-top-utility, var(--x-size-padding-utility, var(--x-size-padding-list)));
28
- -webkit-padding-end: var(--x-size-padding-right-utility, var(--x-size-padding-utility, var(--x-size-padding-list)));
29
- -webkit-padding-after: var(--x-size-padding-bottom-utility, var(--x-size-padding-utility, var(--x-size-padding-list)));
30
- padding-bottom: var(--x-size-padding-bottom-utility, var(--x-size-padding-utility, var(--x-size-padding-list)));
31
- -webkit-padding-start: var(--x-size-padding-left-utility, var(--x-size-padding-utility, var(--x-size-padding-list)));
18
+ padding: var(--x-size-padding-list);
32
19
  -ms-flex-pack: var(--x-size-justify-list);
33
20
  justify-content: var(--x-size-justify-list);
34
21
  -ms-flex-align: var(--x-size-align-list);
@@ -37,7 +24,7 @@
37
24
  font-size: var(--x-size-font-text);
38
25
  font-weight: var(--x-number-font-weight-text);
39
26
  line-height: var(--x-size-line-height-text);
40
- color: var(--x-color-font-utility, var(--x-color-text-default));
27
+ color: var(--x-color-text-default);
41
28
  min-width: 0; }
42
29
  @media not all and (min-resolution: 0.001dpcm) {
43
30
  .x-list:not(.x-list--horizontal), .x-list.x-list--vertical {
package/design-system/list-gap.css CHANGED
@@ -8,7 +8,10 @@
8
8
  --x-size-gap-list-07: var(--x-size-base-07);
9
9
  --x-size-gap-list-08: var(--x-size-base-08);
10
10
  --x-size-gap-list-09: var(--x-size-base-09);
11
- --x-size-gap-list-10: var(--x-size-base-10); }
11
+ --x-size-gap-list-10: var(--x-size-base-10);
12
+ --x-size-gap-list-11: var(--x-size-base-11);
13
+ --x-size-gap-list-12: var(--x-size-base-12);
14
+ --x-size-gap-list-13: var(--x-size-base-13); }
12
15
 
13
16
  @use 'sass:string';
14
17
  .x-list--gap-01.x-list {
@@ -200,3 +203,60 @@
200
203
  .x-list--gap-10.x-list.x-list--wrap > *:not(:last-child) {
201
204
  margin-right: var(--x-size-gap-list-10);
202
205
  margin-bottom: var(--x-size-gap-list-10); } }
206
+
207
+ .x-list--gap-11.x-list {
208
+ gap: var(--x-size-gap-list-11); }
209
+ @media not all and (min-resolution: 0.001dpcm) {
210
+ .x-list--gap-11.x-list:not(.x-list--horizontal), .x-list--gap-11.x-list.x-list--vertical {
211
+ gap: 0; }
212
+ .x-list--gap-11.x-list:not(.x-list--horizontal) > *:not(:last-child), .x-list--gap-11.x-list.x-list--vertical > *:not(:last-child) {
213
+ margin-bottom: var(--x-size-gap-list-11); } }
214
+ @media not all and (min-resolution: 0.001dpcm) {
215
+ .x-list--gap-11.x-list.x-list--horizontal {
216
+ gap: 0; }
217
+ .x-list--gap-11.x-list.x-list--horizontal > *:not(:last-child) {
218
+ margin-right: var(--x-size-gap-list-11); } }
219
+ @media not all and (min-resolution: 0.001dpcm) {
220
+ .x-list--gap-11.x-list.x-list--wrap {
221
+ gap: 0; }
222
+ .x-list--gap-11.x-list.x-list--wrap > *:not(:last-child) {
223
+ margin-right: var(--x-size-gap-list-11);
224
+ margin-bottom: var(--x-size-gap-list-11); } }
225
+
226
+ .x-list--gap-12.x-list {
227
+ gap: var(--x-size-gap-list-12); }
228
+ @media not all and (min-resolution: 0.001dpcm) {
229
+ .x-list--gap-12.x-list:not(.x-list--horizontal), .x-list--gap-12.x-list.x-list--vertical {
230
+ gap: 0; }
231
+ .x-list--gap-12.x-list:not(.x-list--horizontal) > *:not(:last-child), .x-list--gap-12.x-list.x-list--vertical > *:not(:last-child) {
232
+ margin-bottom: var(--x-size-gap-list-12); } }
233
+ @media not all and (min-resolution: 0.001dpcm) {
234
+ .x-list--gap-12.x-list.x-list--horizontal {
235
+ gap: 0; }
236
+ .x-list--gap-12.x-list.x-list--horizontal > *:not(:last-child) {
237
+ margin-right: var(--x-size-gap-list-12); } }
238
+ @media not all and (min-resolution: 0.001dpcm) {
239
+ .x-list--gap-12.x-list.x-list--wrap {
240
+ gap: 0; }
241
+ .x-list--gap-12.x-list.x-list--wrap > *:not(:last-child) {
242
+ margin-right: var(--x-size-gap-list-12);
243
+ margin-bottom: var(--x-size-gap-list-12); } }
244
+
245
+ .x-list--gap-13.x-list {
246
+ gap: var(--x-size-gap-list-13); }
247
+ @media not all and (min-resolution: 0.001dpcm) {
248
+ .x-list--gap-13.x-list:not(.x-list--horizontal), .x-list--gap-13.x-list.x-list--vertical {
249
+ gap: 0; }
250
+ .x-list--gap-13.x-list:not(.x-list--horizontal) > *:not(:last-child), .x-list--gap-13.x-list.x-list--vertical > *:not(:last-child) {
251
+ margin-bottom: var(--x-size-gap-list-13); } }
252
+ @media not all and (min-resolution: 0.001dpcm) {
253
+ .x-list--gap-13.x-list.x-list--horizontal {
254
+ gap: 0; }
255
+ .x-list--gap-13.x-list.x-list--horizontal > *:not(:last-child) {
256
+ margin-right: var(--x-size-gap-list-13); } }
257
+ @media not all and (min-resolution: 0.001dpcm) {
258
+ .x-list--gap-13.x-list.x-list--wrap {
259
+ gap: 0; }
260
+ .x-list--gap-13.x-list.x-list--wrap > *:not(:last-child) {
261
+ margin-right: var(--x-size-gap-list-13);
262
+ margin-bottom: var(--x-size-gap-list-13); } }
package/design-system/list-padding.css CHANGED
@@ -9,7 +9,10 @@
9
9
  --x-size-padding-list-07: var(--x-size-base-07);
10
10
  --x-size-padding-list-08: var(--x-size-base-08);
11
11
  --x-size-padding-list-09: var(--x-size-base-09);
12
- --x-size-padding-list-10: var(--x-size-base-10); }
12
+ --x-size-padding-list-10: var(--x-size-base-10);
13
+ --x-size-padding-list-11: var(--x-size-base-11);
14
+ --x-size-padding-list-12: var(--x-size-base-12);
15
+ --x-size-padding-list-13: var(--x-size-base-13); }
13
16
 
14
17
  /* @deprecated */
15
18
  @use 'sass:string';
@@ -208,3 +211,51 @@
208
211
  gap: 0; }
209
212
  .x-list--gap-.x-list.x-list--horizontal > *:not(:last-child) {
210
213
  margin-right: var(--x-size-gap-list-10); } }
214
+
215
+ .x-list--padding-11.x-list {
216
+ padding: var(--x-size-padding-list-11); }
217
+
218
+ .x-list--gap-.x-list {
219
+ gap: var(--x-size-gap-list-11); }
220
+ @media not all and (min-resolution: 0.001dpcm) {
221
+ .x-list--gap-.x-list {
222
+ gap: 0; }
223
+ .x-list--gap-.x-list > *:not(:last-child) {
224
+ margin-bottom: var(--x-size-gap-list-11); } }
225
+ @media not all and (min-resolution: 0.001dpcm) {
226
+ .x-list--gap-.x-list.x-list--horizontal {
227
+ gap: 0; }
228
+ .x-list--gap-.x-list.x-list--horizontal > *:not(:last-child) {
229
+ margin-right: var(--x-size-gap-list-11); } }
230
+
231
+ .x-list--padding-12.x-list {
232
+ padding: var(--x-size-padding-list-12); }
233
+
234
+ .x-list--gap-.x-list {
235
+ gap: var(--x-size-gap-list-12); }
236
+ @media not all and (min-resolution: 0.001dpcm) {
237
+ .x-list--gap-.x-list {
238
+ gap: 0; }
239
+ .x-list--gap-.x-list > *:not(:last-child) {
240
+ margin-bottom: var(--x-size-gap-list-12); } }
241
+ @media not all and (min-resolution: 0.001dpcm) {
242
+ .x-list--gap-.x-list.x-list--horizontal {
243
+ gap: 0; }
244
+ .x-list--gap-.x-list.x-list--horizontal > *:not(:last-child) {
245
+ margin-right: var(--x-size-gap-list-12); } }
246
+
247
+ .x-list--padding-13.x-list {
248
+ padding: var(--x-size-padding-list-13); }
249
+
250
+ .x-list--gap-.x-list {
251
+ gap: var(--x-size-gap-list-13); }
252
+ @media not all and (min-resolution: 0.001dpcm) {
253
+ .x-list--gap-.x-list {
254
+ gap: 0; }
255
+ .x-list--gap-.x-list > *:not(:last-child) {
256
+ margin-bottom: var(--x-size-gap-list-13); } }
257
+ @media not all and (min-resolution: 0.001dpcm) {
258
+ .x-list--gap-.x-list.x-list--horizontal {
259
+ gap: 0; }
260
+ .x-list--gap-.x-list.x-list--horizontal > *:not(:last-child) {
261
+ margin-right: var(--x-size-gap-list-13); } }
package/design-system/utilities-background-color.css CHANGED
@@ -1,20 +1,20 @@
1
1
  .x-background--lead {
2
- background-color: var(--x-color-base-lead); }
2
+ background-color: var(--x-color-base-lead) !important; }
3
3
 
4
4
  .x-background--auxiliary {
5
- background-color: var(--x-color-base-auxiliary); }
5
+ background-color: var(--x-color-base-auxiliary) !important; }
6
6
 
7
7
  .x-background--neutral-10 {
8
- background-color: var(--x-color-base-neutral-10); }
8
+ background-color: var(--x-color-base-neutral-10) !important; }
9
9
 
10
10
  .x-background--neutral-35 {
11
- background-color: var(--x-color-base-neutral-35); }
11
+ background-color: var(--x-color-base-neutral-35) !important; }
12
12
 
13
13
  .x-background--neutral-70 {
14
- background-color: var(--x-color-base-neutral-70); }
14
+ background-color: var(--x-color-base-neutral-70) !important; }
15
15
 
16
16
  .x-background--neutral-95 {
17
- background-color: var(--x-color-base-neutral-95); }
17
+ background-color: var(--x-color-base-neutral-95) !important; }
18
18
 
19
19
  .x-background--neutral-100 {
20
- background-color: var(--x-color-base-neutral-100); }
20
+ background-color: var(--x-color-base-neutral-100) !important; }
package/design-system/utilities-border-color.css CHANGED
@@ -1,20 +1,20 @@
1
1
  .x-border-color--lead {
2
- border-color: var(--x-color-base-lead); }
2
+ border-color: var(--x-color-base-lead) !important; }
3
3
 
4
4
  .x-border-color--auxiliary {
5
- border-color: var(--x-color-base-auxiliary); }
5
+ border-color: var(--x-color-base-auxiliary) !important; }
6
6
 
7
7
  .x-border-color--neutral-10 {
8
- border-color: var(--x-color-base-neutral-10); }
8
+ border-color: var(--x-color-base-neutral-10) !important; }
9
9
 
10
10
  .x-border-color--neutral-35 {
11
- border-color: var(--x-color-base-neutral-35); }
11
+ border-color: var(--x-color-base-neutral-35) !important; }
12
12
 
13
13
  .x-border-color--neutral-70 {
14
- border-color: var(--x-color-base-neutral-70); }
14
+ border-color: var(--x-color-base-neutral-70) !important; }
15
15
 
16
16
  .x-border-color--neutral-95 {
17
- border-color: var(--x-color-base-neutral-95); }
17
+ border-color: var(--x-color-base-neutral-95) !important; }
18
18
 
19
19
  .x-border-color--neutral-100 {
20
- border-color: var(--x-color-base-neutral-100); }
20
+ border-color: var(--x-color-base-neutral-100) !important; }