@solid-design-system/styles 1.3.1 → 1.3.2

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 (50) hide show
  1. package/CHANGELOG.md +6 -0
  2. package/cdn/modules/list.css +1 -1
  3. package/cdn/modules/prose.css +1 -1
  4. package/cdn/solid-styles.css +1 -1
  5. package/cdn-versioned/modules/chip.css +1 -1
  6. package/cdn-versioned/modules/container.css +1 -1
  7. package/cdn-versioned/modules/copyright.css +1 -1
  8. package/cdn-versioned/modules/display.css +1 -1
  9. package/cdn-versioned/modules/flag.css +1 -1
  10. package/cdn-versioned/modules/footnotes.css +1 -1
  11. package/cdn-versioned/modules/headline.css +1 -1
  12. package/cdn-versioned/modules/hidden-links.css +1 -1
  13. package/cdn-versioned/modules/interactive.css +1 -1
  14. package/cdn-versioned/modules/leadtext.css +1 -1
  15. package/cdn-versioned/modules/list.css +1 -1
  16. package/cdn-versioned/modules/mark.css +1 -1
  17. package/cdn-versioned/modules/media.css +1 -1
  18. package/cdn-versioned/modules/meta.css +1 -1
  19. package/cdn-versioned/modules/pagination.css +1 -1
  20. package/cdn-versioned/modules/paragraph.css +1 -1
  21. package/cdn-versioned/modules/prose.css +1 -1
  22. package/cdn-versioned/modules/status-badge.css +1 -1
  23. package/cdn-versioned/modules/table-cell.css +1 -1
  24. package/cdn-versioned/modules/table.css +1 -1
  25. package/cdn-versioned/solid-styles.css +1 -1
  26. package/dist/modules/list.css +97 -51
  27. package/dist/modules/prose.css +97 -51
  28. package/dist/solid-styles.css +97 -51
  29. package/dist-versioned/modules/chip.css +6 -6
  30. package/dist-versioned/modules/container.css +45 -45
  31. package/dist-versioned/modules/copyright.css +11 -11
  32. package/dist-versioned/modules/display.css +9 -9
  33. package/dist-versioned/modules/flag.css +6 -6
  34. package/dist-versioned/modules/footnotes.css +26 -26
  35. package/dist-versioned/modules/headline.css +67 -67
  36. package/dist-versioned/modules/hidden-links.css +7 -7
  37. package/dist-versioned/modules/interactive.css +38 -38
  38. package/dist-versioned/modules/leadtext.css +8 -8
  39. package/dist-versioned/modules/list.css +119 -73
  40. package/dist-versioned/modules/mark.css +2 -2
  41. package/dist-versioned/modules/media.css +7 -7
  42. package/dist-versioned/modules/meta.css +12 -12
  43. package/dist-versioned/modules/pagination.css +69 -69
  44. package/dist-versioned/modules/paragraph.css +8 -8
  45. package/dist-versioned/modules/prose.css +303 -257
  46. package/dist-versioned/modules/status-badge.css +8 -8
  47. package/dist-versioned/modules/table-cell.css +23 -23
  48. package/dist-versioned/modules/table.css +4 -4
  49. package/dist-versioned/solid-styles.css +495 -449
  50. package/package.json +1 -1
package/dist/modules/list.css CHANGED
@@ -8,82 +8,124 @@
8
8
 
9
9
  .sd-list:not(.sd-list--icon),
10
10
  .sd-prose > :is(ol, ul) {
11
+ list-style-position: revert;
12
+ list-style-type: revert;
13
+ padding: revert;
11
14
  padding-top: var(--sd-spacing-4, 1rem) /* 16px */;
12
15
  padding-bottom: var(--sd-spacing-4, 1rem) /* 16px */;
16
+ padding-left: var(--sd-spacing-4, 1rem) /* 16px */;
13
17
  text-align: left;
18
+
19
+ /*
20
+ * Unordered lists
21
+ */
14
22
  }
15
23
 
16
24
  .sd-list:not(.sd-list--icon) li:not(:first-child), .sd-prose > :is(ol, ul) li:not(:first-child) {
17
25
  margin-top: var(--sd-spacing-3, 0.75rem) /* 12px */;
18
26
  }
19
27
 
20
- .sd-list:not(.sd-list--icon) ol,
21
- .sd-list:not(.sd-list--icon) ul,
22
- .sd-prose > :is(ol, ul) ol,
23
- .sd-prose > :is(ol, ul) ul {
24
- padding-top: var(--sd-spacing-3, 0.75rem) /* 12px */;
25
- }
26
-
27
- /* Counter handling for ordered lists. */
28
+ .sd-list:not(.sd-list--icon) ul,
29
+ .sd-list:not(.sd-list--icon) ol,
30
+ .sd-prose > :is(ol, ul) ul,
31
+ .sd-prose > :is(ol, ul) ol {
32
+ all: revert;
33
+ padding-left: 1.4em;
34
+ padding-top: 0.75em;
35
+ }
28
36
 
29
- .sd-list:not(.sd-list--icon):is(ol) > li, .sd-list:not(.sd-list--icon) ol > li, .sd-prose > :is(ol, ul):is(ol) > li, .sd-prose > :is(ol, ul) ol > li {
30
- counter-increment: item;
31
- }
37
+ @supports not (-webkit-hyphens: none) {
32
38
 
33
- .sd-list:not(.sd-list--icon):is(ol) > li:before, .sd-list:not(.sd-list--icon) ol > li:before, .sd-prose > :is(ol, ul):is(ol) > li:before, .sd-prose > :is(ol, ul) ol > li:before {
34
- content: counters(item, '.') '. ';
35
- }
39
+ .sd-list:not(.sd-list--icon),
40
+ .sd-prose > :is(ol, ul) {
41
+ /* Safari automatically adds some spacing. This adds it for other browsers. */
36
42
 
37
- /* Add second level */
43
+ /*
44
+ * Ordered lists
45
+ */
38
46
 
39
- .sd-list:not(.sd-list--icon):is(ol),
40
- .sd-list:not(.sd-list--icon):is(ol) > li > ol,
41
- .sd-list:not(.sd-list--icon) ol > li > ol,
42
- .sd-prose > :is(ol, ul):is(ol),
43
- .sd-prose > :is(ol, ul):is(ol) > li > ol,
44
- .sd-prose > :is(ol, ul) ol > li > ol {
45
- counter-reset: item;
47
+ /*
48
+ * Safari currently only partially supports the ::marker pseudo class.
49
+ * Support is limited to color and font-size. Therefore we optimize the numbering only for non-Safari browsers.
50
+ * https://developer.mozilla.org/en-US/docs/Web/CSS/::marker#browser_compatibility
51
+ */
52
+ /* Level 1 */
53
+ }
54
+ .sd-list:not(.sd-list--icon) li, .sd-prose > :is(ol, ul) li {
55
+ padding-left: 0.3em;
46
56
  }
47
-
48
- /* Ordered lists inside unordered lists. */
49
-
50
- .sd-list:not(.sd-list--icon):is(ul) > li > ol,
51
- .sd-list:not(.sd-list--icon) ul > li > ol,
52
- .sd-prose > :is(ol, ul):is(ul) > li > ol,
53
- .sd-prose > :is(ol, ul) ul > li > ol {
54
- counter-set: item 0;
57
+ .sd-list:not(.sd-list--icon):is(ol):not(.sd-list--icon), .sd-prose > :is(ol, ul):is(ol):not(.sd-list--icon) {
58
+ counter-reset: item;
59
+ }
60
+ .sd-list:not(.sd-list--icon):is(ol):not(.sd-list--icon) > li, .sd-prose > :is(ol, ul):is(ol):not(.sd-list--icon) > li {
61
+ counter-increment: item;
62
+ }
63
+ .sd-list:not(.sd-list--icon):is(ol):not(.sd-list--icon) > li::marker, .sd-prose > :is(ol, ul):is(ol):not(.sd-list--icon) > li::marker {
64
+ content: counters(item, '.', decimal) '. ';
65
+ }
66
+ /* Level 2 */
67
+ .sd-list:not(.sd-list--icon):is(ol):not(.sd-list--icon) > li > ol, .sd-prose > :is(ol, ul):is(ol):not(.sd-list--icon) > li > ol {
68
+ padding-left: 1.9em;
69
+ counter-reset: subitem;
70
+ }
71
+ .sd-list:not(.sd-list--icon):is(ol):not(.sd-list--icon) > li > ol > li, .sd-prose > :is(ol, ul):is(ol):not(.sd-list--icon) > li > ol > li {
72
+ counter-increment: subitem;
73
+ }
74
+ .sd-list:not(.sd-list--icon):is(ol):not(.sd-list--icon) > li > ol > li::marker, .sd-prose > :is(ol, ul):is(ol):not(.sd-list--icon) > li > ol > li::marker {
75
+ content: counters(item, '.', decimal) '.' counters(subitem, '.', decimal) '. ';
76
+ }
77
+ /* Level 3 */
78
+ .sd-list:not(.sd-list--icon):is(ol):not(.sd-list--icon) > li > ol > li > ol, .sd-prose > :is(ol, ul):is(ol):not(.sd-list--icon) > li > ol > li > ol {
79
+ padding-left: 2.7em;
80
+ counter-reset: subsubitem;
81
+ }
82
+ .sd-list:not(.sd-list--icon):is(ol):not(.sd-list--icon) > li > ol > li > ol > li, .sd-prose > :is(ol, ul):is(ol):not(.sd-list--icon) > li > ol > li > ol > li {
83
+ counter-increment: subsubitem;
84
+ }
85
+ .sd-list:not(.sd-list--icon):is(ol):not(.sd-list--icon) > li > ol > li > ol > li::marker, .sd-prose > :is(ol, ul):is(ol):not(.sd-list--icon) > li > ol > li > ol > li::marker {
86
+ content: counters(item, '.', decimal) '.' counters(subitem, '.', decimal) '.'
87
+ counters(subsubitem, '.', decimal) '. ';
88
+ }
55
89
  }
56
90
 
57
- /* Styling */
91
+ /* Level 1 */
58
92
 
59
- .sd-list:not(.sd-list--icon) li, .sd-prose > :is(ol, ul) li {
60
- display: table;
93
+ .sd-list:not(.sd-list--icon):is(ul):not(.sd-list--icon),
94
+ .sd-list:not(.sd-list--icon) ul,
95
+ .sd-prose > :is(ol, ul):is(ul):not(.sd-list--icon),
96
+ .sd-prose > :is(ol, ul) ul {
97
+ padding-left: 0.5em;
61
98
  }
62
99
 
63
- .sd-list:not(.sd-list--icon) li:before, .sd-prose > :is(ol, ul) li:before {
64
- display: table-cell;
65
- padding-right: var(--sd-spacing-2, 0.5rem) /* 8px */;
100
+ .sd-list:not(.sd-list--icon):is(ul):not(.sd-list--icon) > li, .sd-list:not(.sd-list--icon) ul > li, .sd-prose > :is(ol, ul):is(ul):not(.sd-list--icon) > li, .sd-prose > :is(ol, ul) ul > li {
101
+ padding-left: 0.75em;
102
+ list-style-type: '\2022'; /* • */
66
103
  }
67
104
 
68
- .sd-list:not(.sd-list--icon):is(ul),
69
- .sd-list:not(.sd-list--icon) ul,
70
- .sd-prose > :is(ol, ul):is(ul),
71
- .sd-prose > :is(ol, ul) ul {
72
- list-style-type: '';
73
- }
74
-
75
- .sd-list:not(.sd-list--icon):is(ul):not(.sd-list--icon) > li:before, .sd-list:not(.sd-list--icon) ul > li:before, .sd-prose > :is(ol, ul):is(ul):not(.sd-list--icon) > li:before, .sd-prose > :is(ol, ul) ul > li:before {
76
- content: '\2022';
77
- }
105
+ /* Level 2 */
78
106
 
79
- .sd-list:not(.sd-list--icon):is(ul):not(.sd-list--icon) > li > ul > li:before, .sd-list:not(.sd-list--icon) ul > li > ul > li:before, .sd-prose > :is(ol, ul):is(ul):not(.sd-list--icon) > li > ul > li:before, .sd-prose > :is(ol, ul) ul > li > ul > li:before {
80
- content: '\002B1D';
81
- }
107
+ .sd-list:not(.sd-list--icon):is(ul):not(.sd-list--icon) > li > ul, .sd-list:not(.sd-list--icon) ul > li > ul, .sd-prose > :is(ol, ul):is(ul):not(.sd-list--icon) > li > ul, .sd-prose > :is(ol, ul) ul > li > ul {
108
+ padding-left: 0.3em;
109
+ }
82
110
 
83
- .sd-list:not(.sd-list--icon):is(ul):not(.sd-list--icon) > li > ul > li > ul > li:before, .sd-list:not(.sd-list--icon) ul > li > ul > li > ul > li:before, .sd-prose > :is(ol, ul):is(ul):not(.sd-list--icon) > li > ul > li > ul > li:before, .sd-prose > :is(ol, ul) ul > li > ul > li > ul > li:before {
84
- content: '\2010';
111
+ .sd-list:not(.sd-list--icon):is(ul):not(.sd-list--icon) > li > ul > li, .sd-list:not(.sd-list--icon) ul > li > ul > li, .sd-prose > :is(ol, ul):is(ul):not(.sd-list--icon) > li > ul > li, .sd-prose > :is(ol, ul) ul > li > ul > li {
112
+ list-style-type: '\002B1D'; /* · */
85
113
  }
86
114
 
115
+ /* Level 3 */
116
+
117
+ .sd-list:not(.sd-list--icon):is(ul):not(.sd-list--icon) > li > ul > li > ul, .sd-list:not(.sd-list--icon) ul > li > ul > li > ul, .sd-prose > :is(ol, ul):is(ul):not(.sd-list--icon) > li > ul > li > ul, .sd-prose > :is(ol, ul) ul > li > ul > li > ul {
118
+ padding-left: 0.4em;
119
+ }
120
+
121
+ .sd-list:not(.sd-list--icon):is(ul):not(.sd-list--icon) > li > ul > li > ul > li, .sd-list:not(.sd-list--icon) ul > li > ul > li > ul > li, .sd-prose > :is(ol, ul):is(ul):not(.sd-list--icon) > li > ul > li > ul > li, .sd-prose > :is(ol, ul) ul > li > ul > li > ul > li {
122
+ list-style-type: '\2010'; /* - */
123
+ }
124
+
125
+ /*
126
+ * Icon lists
127
+ */
128
+
87
129
  .sd-list--icon {
88
130
  padding-top: var(--sd-spacing-4, 1rem) /* 16px */;
89
131
  padding-bottom: var(--sd-spacing-4, 1rem) /* 16px */;
@@ -137,6 +179,10 @@
137
179
  margin-right: var(--sd-spacing-8, 2rem) /* 32px */;
138
180
  }
139
181
 
182
+ /*
183
+ * Inverted
184
+ */
185
+
140
186
  .sd-list--inverted,
141
187
  .sd-prose--inverted > :is(ol, ul) {
142
188
 
package/dist/modules/prose.css CHANGED
@@ -401,82 +401,124 @@ Used for inverted pressed interaction text link */;
401
401
 
402
402
  .sd-list:not(.sd-list--icon),
403
403
  .sd-prose > :is(ol, ul) {
404
+ list-style-position: revert;
405
+ list-style-type: revert;
406
+ padding: revert;
404
407
  padding-top: var(--sd-spacing-4, 1rem) /* 16px */;
405
408
  padding-bottom: var(--sd-spacing-4, 1rem) /* 16px */;
409
+ padding-left: var(--sd-spacing-4, 1rem) /* 16px */;
406
410
  text-align: left;
411
+
412
+ /*
413
+ * Unordered lists
414
+ */
407
415
  }
408
416
 
409
417
  .sd-list:not(.sd-list--icon) li:not(:first-child), .sd-prose > :is(ol, ul) li:not(:first-child) {
410
418
  margin-top: var(--sd-spacing-3, 0.75rem) /* 12px */;
411
419
  }
412
420
 
413
- .sd-list:not(.sd-list--icon) ol,
414
- .sd-list:not(.sd-list--icon) ul,
415
- .sd-prose > :is(ol, ul) ol,
416
- .sd-prose > :is(ol, ul) ul {
417
- padding-top: var(--sd-spacing-3, 0.75rem) /* 12px */;
418
- }
419
-
420
- /* Counter handling for ordered lists. */
421
+ .sd-list:not(.sd-list--icon) ul,
422
+ .sd-list:not(.sd-list--icon) ol,
423
+ .sd-prose > :is(ol, ul) ul,
424
+ .sd-prose > :is(ol, ul) ol {
425
+ all: revert;
426
+ padding-left: 1.4em;
427
+ padding-top: 0.75em;
428
+ }
421
429
 
422
- .sd-list:not(.sd-list--icon):is(ol) > li, .sd-list:not(.sd-list--icon) ol > li, .sd-prose > :is(ol, ul):is(ol) > li, .sd-prose > :is(ol, ul) ol > li {
423
- counter-increment: item;
424
- }
430
+ @supports not (-webkit-hyphens: none) {
425
431
 
426
- .sd-list:not(.sd-list--icon):is(ol) > li:before, .sd-list:not(.sd-list--icon) ol > li:before, .sd-prose > :is(ol, ul):is(ol) > li:before, .sd-prose > :is(ol, ul) ol > li:before {
427
- content: counters(item, '.') '. ';
428
- }
432
+ .sd-list:not(.sd-list--icon),
433
+ .sd-prose > :is(ol, ul) {
434
+ /* Safari automatically adds some spacing. This adds it for other browsers. */
429
435
 
430
- /* Add second level */
436
+ /*
437
+ * Ordered lists
438
+ */
431
439
 
432
- .sd-list:not(.sd-list--icon):is(ol),
433
- .sd-list:not(.sd-list--icon):is(ol) > li > ol,
434
- .sd-list:not(.sd-list--icon) ol > li > ol,
435
- .sd-prose > :is(ol, ul):is(ol),
436
- .sd-prose > :is(ol, ul):is(ol) > li > ol,
437
- .sd-prose > :is(ol, ul) ol > li > ol {
438
- counter-reset: item;
440
+ /*
441
+ * Safari currently only partially supports the ::marker pseudo class.
442
+ * Support is limited to color and font-size. Therefore we optimize the numbering only for non-Safari browsers.
443
+ * https://developer.mozilla.org/en-US/docs/Web/CSS/::marker#browser_compatibility
444
+ */
445
+ /* Level 1 */
446
+ }
447
+ .sd-list:not(.sd-list--icon) li, .sd-prose > :is(ol, ul) li {
448
+ padding-left: 0.3em;
439
449
  }
440
-
441
- /* Ordered lists inside unordered lists. */
442
-
443
- .sd-list:not(.sd-list--icon):is(ul) > li > ol,
444
- .sd-list:not(.sd-list--icon) ul > li > ol,
445
- .sd-prose > :is(ol, ul):is(ul) > li > ol,
446
- .sd-prose > :is(ol, ul) ul > li > ol {
447
- counter-set: item 0;
450
+ .sd-list:not(.sd-list--icon):is(ol):not(.sd-list--icon), .sd-prose > :is(ol, ul):is(ol):not(.sd-list--icon) {
451
+ counter-reset: item;
452
+ }
453
+ .sd-list:not(.sd-list--icon):is(ol):not(.sd-list--icon) > li, .sd-prose > :is(ol, ul):is(ol):not(.sd-list--icon) > li {
454
+ counter-increment: item;
455
+ }
456
+ .sd-list:not(.sd-list--icon):is(ol):not(.sd-list--icon) > li::marker, .sd-prose > :is(ol, ul):is(ol):not(.sd-list--icon) > li::marker {
457
+ content: counters(item, '.', decimal) '. ';
458
+ }
459
+ /* Level 2 */
460
+ .sd-list:not(.sd-list--icon):is(ol):not(.sd-list--icon) > li > ol, .sd-prose > :is(ol, ul):is(ol):not(.sd-list--icon) > li > ol {
461
+ padding-left: 1.9em;
462
+ counter-reset: subitem;
463
+ }
464
+ .sd-list:not(.sd-list--icon):is(ol):not(.sd-list--icon) > li > ol > li, .sd-prose > :is(ol, ul):is(ol):not(.sd-list--icon) > li > ol > li {
465
+ counter-increment: subitem;
466
+ }
467
+ .sd-list:not(.sd-list--icon):is(ol):not(.sd-list--icon) > li > ol > li::marker, .sd-prose > :is(ol, ul):is(ol):not(.sd-list--icon) > li > ol > li::marker {
468
+ content: counters(item, '.', decimal) '.' counters(subitem, '.', decimal) '. ';
469
+ }
470
+ /* Level 3 */
471
+ .sd-list:not(.sd-list--icon):is(ol):not(.sd-list--icon) > li > ol > li > ol, .sd-prose > :is(ol, ul):is(ol):not(.sd-list--icon) > li > ol > li > ol {
472
+ padding-left: 2.7em;
473
+ counter-reset: subsubitem;
474
+ }
475
+ .sd-list:not(.sd-list--icon):is(ol):not(.sd-list--icon) > li > ol > li > ol > li, .sd-prose > :is(ol, ul):is(ol):not(.sd-list--icon) > li > ol > li > ol > li {
476
+ counter-increment: subsubitem;
477
+ }
478
+ .sd-list:not(.sd-list--icon):is(ol):not(.sd-list--icon) > li > ol > li > ol > li::marker, .sd-prose > :is(ol, ul):is(ol):not(.sd-list--icon) > li > ol > li > ol > li::marker {
479
+ content: counters(item, '.', decimal) '.' counters(subitem, '.', decimal) '.'
480
+ counters(subsubitem, '.', decimal) '. ';
481
+ }
448
482
  }
449
483
 
450
- /* Styling */
484
+ /* Level 1 */
451
485
 
452
- .sd-list:not(.sd-list--icon) li, .sd-prose > :is(ol, ul) li {
453
- display: table;
486
+ .sd-list:not(.sd-list--icon):is(ul):not(.sd-list--icon),
487
+ .sd-list:not(.sd-list--icon) ul,
488
+ .sd-prose > :is(ol, ul):is(ul):not(.sd-list--icon),
489
+ .sd-prose > :is(ol, ul) ul {
490
+ padding-left: 0.5em;
454
491
  }
455
492
 
456
- .sd-list:not(.sd-list--icon) li:before, .sd-prose > :is(ol, ul) li:before {
457
- display: table-cell;
458
- padding-right: var(--sd-spacing-2, 0.5rem) /* 8px */;
493
+ .sd-list:not(.sd-list--icon):is(ul):not(.sd-list--icon) > li, .sd-list:not(.sd-list--icon) ul > li, .sd-prose > :is(ol, ul):is(ul):not(.sd-list--icon) > li, .sd-prose > :is(ol, ul) ul > li {
494
+ padding-left: 0.75em;
495
+ list-style-type: '\2022'; /* • */
459
496
  }
460
497
 
461
- .sd-list:not(.sd-list--icon):is(ul),
462
- .sd-list:not(.sd-list--icon) ul,
463
- .sd-prose > :is(ol, ul):is(ul),
464
- .sd-prose > :is(ol, ul) ul {
465
- list-style-type: '';
466
- }
467
-
468
- .sd-list:not(.sd-list--icon):is(ul):not(.sd-list--icon) > li:before, .sd-list:not(.sd-list--icon) ul > li:before, .sd-prose > :is(ol, ul):is(ul):not(.sd-list--icon) > li:before, .sd-prose > :is(ol, ul) ul > li:before {
469
- content: '\2022';
470
- }
498
+ /* Level 2 */
471
499
 
472
- .sd-list:not(.sd-list--icon):is(ul):not(.sd-list--icon) > li > ul > li:before, .sd-list:not(.sd-list--icon) ul > li > ul > li:before, .sd-prose > :is(ol, ul):is(ul):not(.sd-list--icon) > li > ul > li:before, .sd-prose > :is(ol, ul) ul > li > ul > li:before {
473
- content: '\002B1D';
474
- }
500
+ .sd-list:not(.sd-list--icon):is(ul):not(.sd-list--icon) > li > ul, .sd-list:not(.sd-list--icon) ul > li > ul, .sd-prose > :is(ol, ul):is(ul):not(.sd-list--icon) > li > ul, .sd-prose > :is(ol, ul) ul > li > ul {
501
+ padding-left: 0.3em;
502
+ }
475
503
 
476
- .sd-list:not(.sd-list--icon):is(ul):not(.sd-list--icon) > li > ul > li > ul > li:before, .sd-list:not(.sd-list--icon) ul > li > ul > li > ul > li:before, .sd-prose > :is(ol, ul):is(ul):not(.sd-list--icon) > li > ul > li > ul > li:before, .sd-prose > :is(ol, ul) ul > li > ul > li > ul > li:before {
477
- content: '\2010';
504
+ .sd-list:not(.sd-list--icon):is(ul):not(.sd-list--icon) > li > ul > li, .sd-list:not(.sd-list--icon) ul > li > ul > li, .sd-prose > :is(ol, ul):is(ul):not(.sd-list--icon) > li > ul > li, .sd-prose > :is(ol, ul) ul > li > ul > li {
505
+ list-style-type: '\002B1D'; /* · */
478
506
  }
479
507
 
508
+ /* Level 3 */
509
+
510
+ .sd-list:not(.sd-list--icon):is(ul):not(.sd-list--icon) > li > ul > li > ul, .sd-list:not(.sd-list--icon) ul > li > ul > li > ul, .sd-prose > :is(ol, ul):is(ul):not(.sd-list--icon) > li > ul > li > ul, .sd-prose > :is(ol, ul) ul > li > ul > li > ul {
511
+ padding-left: 0.4em;
512
+ }
513
+
514
+ .sd-list:not(.sd-list--icon):is(ul):not(.sd-list--icon) > li > ul > li > ul > li, .sd-list:not(.sd-list--icon) ul > li > ul > li > ul > li, .sd-prose > :is(ol, ul):is(ul):not(.sd-list--icon) > li > ul > li > ul > li, .sd-prose > :is(ol, ul) ul > li > ul > li > ul > li {
515
+ list-style-type: '\2010'; /* - */
516
+ }
517
+
518
+ /*
519
+ * Icon lists
520
+ */
521
+
480
522
  .sd-list--icon {
481
523
  padding-top: var(--sd-spacing-4, 1rem) /* 16px */;
482
524
  padding-bottom: var(--sd-spacing-4, 1rem) /* 16px */;
@@ -530,6 +572,10 @@ Used for inverted pressed interaction text link */;
530
572
  margin-right: var(--sd-spacing-8, 2rem) /* 32px */;
531
573
  }
532
574
 
575
+ /*
576
+ * Inverted
577
+ */
578
+
533
579
  .sd-list--inverted,
534
580
  .sd-prose--inverted > :is(ol, ul) {
535
581
 
package/dist/solid-styles.css CHANGED
@@ -1399,82 +1399,124 @@ Used for inverted pressed interaction text link */;
1399
1399
 
1400
1400
  .sd-list:not(.sd-list--icon),
1401
1401
  .sd-prose > :is(ol, ul) {
1402
+ list-style-position: revert;
1403
+ list-style-type: revert;
1404
+ padding: revert;
1402
1405
  padding-top: var(--sd-spacing-4, 1rem) /* 16px */;
1403
1406
  padding-bottom: var(--sd-spacing-4, 1rem) /* 16px */;
1407
+ padding-left: var(--sd-spacing-4, 1rem) /* 16px */;
1404
1408
  text-align: left;
1409
+
1410
+ /*
1411
+ * Unordered lists
1412
+ */
1405
1413
  }
1406
1414
 
1407
1415
  .sd-list:not(.sd-list--icon) li:not(:first-child), .sd-prose > :is(ol, ul) li:not(:first-child) {
1408
1416
  margin-top: var(--sd-spacing-3, 0.75rem) /* 12px */;
1409
1417
  }
1410
1418
 
1411
- .sd-list:not(.sd-list--icon) ol,
1412
- .sd-list:not(.sd-list--icon) ul,
1413
- .sd-prose > :is(ol, ul) ol,
1414
- .sd-prose > :is(ol, ul) ul {
1415
- padding-top: var(--sd-spacing-3, 0.75rem) /* 12px */;
1416
- }
1417
-
1418
- /* Counter handling for ordered lists. */
1419
+ .sd-list:not(.sd-list--icon) ul,
1420
+ .sd-list:not(.sd-list--icon) ol,
1421
+ .sd-prose > :is(ol, ul) ul,
1422
+ .sd-prose > :is(ol, ul) ol {
1423
+ all: revert;
1424
+ padding-left: 1.4em;
1425
+ padding-top: 0.75em;
1426
+ }
1419
1427
 
1420
- .sd-list:not(.sd-list--icon):is(ol) > li, .sd-list:not(.sd-list--icon) ol > li, .sd-prose > :is(ol, ul):is(ol) > li, .sd-prose > :is(ol, ul) ol > li {
1421
- counter-increment: item;
1422
- }
1428
+ @supports not (-webkit-hyphens: none) {
1423
1429
 
1424
- .sd-list:not(.sd-list--icon):is(ol) > li:before, .sd-list:not(.sd-list--icon) ol > li:before, .sd-prose > :is(ol, ul):is(ol) > li:before, .sd-prose > :is(ol, ul) ol > li:before {
1425
- content: counters(item, '.') '. ';
1426
- }
1430
+ .sd-list:not(.sd-list--icon),
1431
+ .sd-prose > :is(ol, ul) {
1432
+ /* Safari automatically adds some spacing. This adds it for other browsers. */
1427
1433
 
1428
- /* Add second level */
1434
+ /*
1435
+ * Ordered lists
1436
+ */
1429
1437
 
1430
- .sd-list:not(.sd-list--icon):is(ol),
1431
- .sd-list:not(.sd-list--icon):is(ol) > li > ol,
1432
- .sd-list:not(.sd-list--icon) ol > li > ol,
1433
- .sd-prose > :is(ol, ul):is(ol),
1434
- .sd-prose > :is(ol, ul):is(ol) > li > ol,
1435
- .sd-prose > :is(ol, ul) ol > li > ol {
1436
- counter-reset: item;
1438
+ /*
1439
+ * Safari currently only partially supports the ::marker pseudo class.
1440
+ * Support is limited to color and font-size. Therefore we optimize the numbering only for non-Safari browsers.
1441
+ * https://developer.mozilla.org/en-US/docs/Web/CSS/::marker#browser_compatibility
1442
+ */
1443
+ /* Level 1 */
1444
+ }
1445
+ .sd-list:not(.sd-list--icon) li, .sd-prose > :is(ol, ul) li {
1446
+ padding-left: 0.3em;
1437
1447
  }
1438
-
1439
- /* Ordered lists inside unordered lists. */
1440
-
1441
- .sd-list:not(.sd-list--icon):is(ul) > li > ol,
1442
- .sd-list:not(.sd-list--icon) ul > li > ol,
1443
- .sd-prose > :is(ol, ul):is(ul) > li > ol,
1444
- .sd-prose > :is(ol, ul) ul > li > ol {
1445
- counter-set: item 0;
1448
+ .sd-list:not(.sd-list--icon):is(ol):not(.sd-list--icon), .sd-prose > :is(ol, ul):is(ol):not(.sd-list--icon) {
1449
+ counter-reset: item;
1450
+ }
1451
+ .sd-list:not(.sd-list--icon):is(ol):not(.sd-list--icon) > li, .sd-prose > :is(ol, ul):is(ol):not(.sd-list--icon) > li {
1452
+ counter-increment: item;
1453
+ }
1454
+ .sd-list:not(.sd-list--icon):is(ol):not(.sd-list--icon) > li::marker, .sd-prose > :is(ol, ul):is(ol):not(.sd-list--icon) > li::marker {
1455
+ content: counters(item, '.', decimal) '. ';
1456
+ }
1457
+ /* Level 2 */
1458
+ .sd-list:not(.sd-list--icon):is(ol):not(.sd-list--icon) > li > ol, .sd-prose > :is(ol, ul):is(ol):not(.sd-list--icon) > li > ol {
1459
+ padding-left: 1.9em;
1460
+ counter-reset: subitem;
1461
+ }
1462
+ .sd-list:not(.sd-list--icon):is(ol):not(.sd-list--icon) > li > ol > li, .sd-prose > :is(ol, ul):is(ol):not(.sd-list--icon) > li > ol > li {
1463
+ counter-increment: subitem;
1464
+ }
1465
+ .sd-list:not(.sd-list--icon):is(ol):not(.sd-list--icon) > li > ol > li::marker, .sd-prose > :is(ol, ul):is(ol):not(.sd-list--icon) > li > ol > li::marker {
1466
+ content: counters(item, '.', decimal) '.' counters(subitem, '.', decimal) '. ';
1467
+ }
1468
+ /* Level 3 */
1469
+ .sd-list:not(.sd-list--icon):is(ol):not(.sd-list--icon) > li > ol > li > ol, .sd-prose > :is(ol, ul):is(ol):not(.sd-list--icon) > li > ol > li > ol {
1470
+ padding-left: 2.7em;
1471
+ counter-reset: subsubitem;
1472
+ }
1473
+ .sd-list:not(.sd-list--icon):is(ol):not(.sd-list--icon) > li > ol > li > ol > li, .sd-prose > :is(ol, ul):is(ol):not(.sd-list--icon) > li > ol > li > ol > li {
1474
+ counter-increment: subsubitem;
1475
+ }
1476
+ .sd-list:not(.sd-list--icon):is(ol):not(.sd-list--icon) > li > ol > li > ol > li::marker, .sd-prose > :is(ol, ul):is(ol):not(.sd-list--icon) > li > ol > li > ol > li::marker {
1477
+ content: counters(item, '.', decimal) '.' counters(subitem, '.', decimal) '.'
1478
+ counters(subsubitem, '.', decimal) '. ';
1479
+ }
1446
1480
  }
1447
1481
 
1448
- /* Styling */
1482
+ /* Level 1 */
1449
1483
 
1450
- .sd-list:not(.sd-list--icon) li, .sd-prose > :is(ol, ul) li {
1451
- display: table;
1484
+ .sd-list:not(.sd-list--icon):is(ul):not(.sd-list--icon),
1485
+ .sd-list:not(.sd-list--icon) ul,
1486
+ .sd-prose > :is(ol, ul):is(ul):not(.sd-list--icon),
1487
+ .sd-prose > :is(ol, ul) ul {
1488
+ padding-left: 0.5em;
1452
1489
  }
1453
1490
 
1454
- .sd-list:not(.sd-list--icon) li:before, .sd-prose > :is(ol, ul) li:before {
1455
- display: table-cell;
1456
- padding-right: var(--sd-spacing-2, 0.5rem) /* 8px */;
1491
+ .sd-list:not(.sd-list--icon):is(ul):not(.sd-list--icon) > li, .sd-list:not(.sd-list--icon) ul > li, .sd-prose > :is(ol, ul):is(ul):not(.sd-list--icon) > li, .sd-prose > :is(ol, ul) ul > li {
1492
+ padding-left: 0.75em;
1493
+ list-style-type: '\2022'; /* • */
1457
1494
  }
1458
1495
 
1459
- .sd-list:not(.sd-list--icon):is(ul),
1460
- .sd-list:not(.sd-list--icon) ul,
1461
- .sd-prose > :is(ol, ul):is(ul),
1462
- .sd-prose > :is(ol, ul) ul {
1463
- list-style-type: '';
1464
- }
1465
-
1466
- .sd-list:not(.sd-list--icon):is(ul):not(.sd-list--icon) > li:before, .sd-list:not(.sd-list--icon) ul > li:before, .sd-prose > :is(ol, ul):is(ul):not(.sd-list--icon) > li:before, .sd-prose > :is(ol, ul) ul > li:before {
1467
- content: '\2022';
1468
- }
1496
+ /* Level 2 */
1469
1497
 
1470
- .sd-list:not(.sd-list--icon):is(ul):not(.sd-list--icon) > li > ul > li:before, .sd-list:not(.sd-list--icon) ul > li > ul > li:before, .sd-prose > :is(ol, ul):is(ul):not(.sd-list--icon) > li > ul > li:before, .sd-prose > :is(ol, ul) ul > li > ul > li:before {
1471
- content: '\002B1D';
1472
- }
1498
+ .sd-list:not(.sd-list--icon):is(ul):not(.sd-list--icon) > li > ul, .sd-list:not(.sd-list--icon) ul > li > ul, .sd-prose > :is(ol, ul):is(ul):not(.sd-list--icon) > li > ul, .sd-prose > :is(ol, ul) ul > li > ul {
1499
+ padding-left: 0.3em;
1500
+ }
1473
1501
 
1474
- .sd-list:not(.sd-list--icon):is(ul):not(.sd-list--icon) > li > ul > li > ul > li:before, .sd-list:not(.sd-list--icon) ul > li > ul > li > ul > li:before, .sd-prose > :is(ol, ul):is(ul):not(.sd-list--icon) > li > ul > li > ul > li:before, .sd-prose > :is(ol, ul) ul > li > ul > li > ul > li:before {
1475
- content: '\2010';
1502
+ .sd-list:not(.sd-list--icon):is(ul):not(.sd-list--icon) > li > ul > li, .sd-list:not(.sd-list--icon) ul > li > ul > li, .sd-prose > :is(ol, ul):is(ul):not(.sd-list--icon) > li > ul > li, .sd-prose > :is(ol, ul) ul > li > ul > li {
1503
+ list-style-type: '\002B1D'; /* · */
1476
1504
  }
1477
1505
 
1506
+ /* Level 3 */
1507
+
1508
+ .sd-list:not(.sd-list--icon):is(ul):not(.sd-list--icon) > li > ul > li > ul, .sd-list:not(.sd-list--icon) ul > li > ul > li > ul, .sd-prose > :is(ol, ul):is(ul):not(.sd-list--icon) > li > ul > li > ul, .sd-prose > :is(ol, ul) ul > li > ul > li > ul {
1509
+ padding-left: 0.4em;
1510
+ }
1511
+
1512
+ .sd-list:not(.sd-list--icon):is(ul):not(.sd-list--icon) > li > ul > li > ul > li, .sd-list:not(.sd-list--icon) ul > li > ul > li > ul > li, .sd-prose > :is(ol, ul):is(ul):not(.sd-list--icon) > li > ul > li > ul > li, .sd-prose > :is(ol, ul) ul > li > ul > li > ul > li {
1513
+ list-style-type: '\2010'; /* - */
1514
+ }
1515
+
1516
+ /*
1517
+ * Icon lists
1518
+ */
1519
+
1478
1520
  .sd-list--icon {
1479
1521
  padding-top: var(--sd-spacing-4, 1rem) /* 16px */;
1480
1522
  padding-bottom: var(--sd-spacing-4, 1rem) /* 16px */;
@@ -1528,6 +1570,10 @@ Used for inverted pressed interaction text link */;
1528
1570
  margin-right: var(--sd-spacing-8, 2rem) /* 32px */;
1529
1571
  }
1530
1572
 
1573
+ /*
1574
+ * Inverted
1575
+ */
1576
+
1531
1577
  .sd-list--inverted,
1532
1578
  .sd-prose--inverted > :is(ol, ul) {
1533
1579
 
package/dist-versioned/modules/chip.css CHANGED
@@ -1,12 +1,12 @@
1
1
  /**
2
2
  * Generates basic styles for chip elements.
3
- * @name sd-1-3-1-chip
3
+ * @name sd-1-3-2-chip
4
4
  * @status stable
5
5
  * @since 1.30.0
6
- * @variant { primary-300 | primary-500 | white } sd-1-3-1-chip--...
6
+ * @variant { primary-300 | primary-500 | white } sd-1-3-2-chip--...
7
7
  */
8
8
 
9
- .sd-1-3-1-chip {
9
+ .sd-1-3-2-chip {
10
10
 
11
11
  display: inline-flex;
12
12
 
@@ -35,7 +35,7 @@
35
35
  color: rgb(var(--sd-color-black, 24 24 24) / var(--tw-text-opacity, 1)) /* Default text color */
36
36
  }
37
37
 
38
- .sd-1-3-1-chip--primary-500 {
38
+ .sd-1-3-2-chip--primary-500 {
39
39
 
40
40
 
41
41
 
@@ -46,14 +46,14 @@
46
46
  color: rgb(var(--sd-color-white, 255 255 255) / var(--tw-text-opacity, 1)) /* Inverted text color */
47
47
  }
48
48
 
49
- .sd-1-3-1-chip--primary-300 {
49
+ .sd-1-3-2-chip--primary-300 {
50
50
 
51
51
 
52
52
 
53
53
  background-color: rgb(var(--sd-color-primary-300, 200 213 231) / var(--tw-bg-opacity, 1)) /* Used for chip background */
54
54
  }
55
55
 
56
- .sd-1-3-1-chip--white {
56
+ .sd-1-3-2-chip--white {
57
57
 
58
58
 
59
59