@solid-design-system/styles 1.3.0 → 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 (52) hide show
  1. package/CHANGELOG.md +14 -0
  2. package/cdn/modules/copyright.css +1 -1
  3. package/cdn/modules/list.css +1 -1
  4. package/cdn/modules/prose.css +1 -1
  5. package/cdn/solid-styles.css +1 -1
  6. package/cdn-versioned/modules/chip.css +1 -1
  7. package/cdn-versioned/modules/container.css +1 -1
  8. package/cdn-versioned/modules/copyright.css +1 -1
  9. package/cdn-versioned/modules/display.css +1 -1
  10. package/cdn-versioned/modules/flag.css +1 -1
  11. package/cdn-versioned/modules/footnotes.css +1 -1
  12. package/cdn-versioned/modules/headline.css +1 -1
  13. package/cdn-versioned/modules/hidden-links.css +1 -1
  14. package/cdn-versioned/modules/interactive.css +1 -1
  15. package/cdn-versioned/modules/leadtext.css +1 -1
  16. package/cdn-versioned/modules/list.css +1 -1
  17. package/cdn-versioned/modules/mark.css +1 -1
  18. package/cdn-versioned/modules/media.css +1 -1
  19. package/cdn-versioned/modules/meta.css +1 -1
  20. package/cdn-versioned/modules/pagination.css +1 -1
  21. package/cdn-versioned/modules/paragraph.css +1 -1
  22. package/cdn-versioned/modules/prose.css +1 -1
  23. package/cdn-versioned/modules/status-badge.css +1 -1
  24. package/cdn-versioned/modules/table-cell.css +1 -1
  25. package/cdn-versioned/modules/table.css +1 -1
  26. package/cdn-versioned/solid-styles.css +1 -1
  27. package/dist/modules/copyright.css +38 -29
  28. package/dist/modules/list.css +97 -51
  29. package/dist/modules/prose.css +97 -51
  30. package/dist/solid-styles.css +106 -51
  31. package/dist-versioned/modules/chip.css +6 -6
  32. package/dist-versioned/modules/container.css +45 -45
  33. package/dist-versioned/modules/copyright.css +49 -40
  34. package/dist-versioned/modules/display.css +9 -9
  35. package/dist-versioned/modules/flag.css +6 -6
  36. package/dist-versioned/modules/footnotes.css +26 -26
  37. package/dist-versioned/modules/headline.css +67 -67
  38. package/dist-versioned/modules/hidden-links.css +7 -7
  39. package/dist-versioned/modules/interactive.css +38 -38
  40. package/dist-versioned/modules/leadtext.css +8 -8
  41. package/dist-versioned/modules/list.css +119 -73
  42. package/dist-versioned/modules/mark.css +2 -2
  43. package/dist-versioned/modules/media.css +7 -7
  44. package/dist-versioned/modules/meta.css +12 -12
  45. package/dist-versioned/modules/pagination.css +69 -69
  46. package/dist-versioned/modules/paragraph.css +8 -8
  47. package/dist-versioned/modules/prose.css +303 -257
  48. package/dist-versioned/modules/status-badge.css +8 -8
  49. package/dist-versioned/modules/table-cell.css +23 -23
  50. package/dist-versioned/modules/table.css +4 -4
  51. package/dist-versioned/solid-styles.css +506 -451
  52. package/package.json +4 -4
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
@@ -237,6 +237,15 @@ Used for divider, teaser, container, ... */;
237
237
 
238
238
  .sd-copyright {
239
239
  position: relative;
240
+ /* Bug fix for drop-shadow-sm */
241
+ --tw-blur: ;
242
+ --tw-brightness: ;
243
+ --tw-contrast: ;
244
+ --tw-grayscale: ;
245
+ --tw-hue-rotate: ;
246
+ --tw-invert: ;
247
+ --tw-saturate: ;
248
+ --tw-sepia: ;
240
249
  }
241
250
 
242
251
  .sd-copyright::after {
@@ -1390,82 +1399,124 @@ Used for inverted pressed interaction text link */;
1390
1399
 
1391
1400
  .sd-list:not(.sd-list--icon),
1392
1401
  .sd-prose > :is(ol, ul) {
1402
+ list-style-position: revert;
1403
+ list-style-type: revert;
1404
+ padding: revert;
1393
1405
  padding-top: var(--sd-spacing-4, 1rem) /* 16px */;
1394
1406
  padding-bottom: var(--sd-spacing-4, 1rem) /* 16px */;
1407
+ padding-left: var(--sd-spacing-4, 1rem) /* 16px */;
1395
1408
  text-align: left;
1409
+
1410
+ /*
1411
+ * Unordered lists
1412
+ */
1396
1413
  }
1397
1414
 
1398
1415
  .sd-list:not(.sd-list--icon) li:not(:first-child), .sd-prose > :is(ol, ul) li:not(:first-child) {
1399
1416
  margin-top: var(--sd-spacing-3, 0.75rem) /* 12px */;
1400
1417
  }
1401
1418
 
1402
- .sd-list:not(.sd-list--icon) ol,
1403
- .sd-list:not(.sd-list--icon) ul,
1404
- .sd-prose > :is(ol, ul) ol,
1405
- .sd-prose > :is(ol, ul) ul {
1406
- padding-top: var(--sd-spacing-3, 0.75rem) /* 12px */;
1407
- }
1408
-
1409
- /* 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
+ }
1410
1427
 
1411
- .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 {
1412
- counter-increment: item;
1413
- }
1428
+ @supports not (-webkit-hyphens: none) {
1414
1429
 
1415
- .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 {
1416
- content: counters(item, '.') '. ';
1417
- }
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. */
1418
1433
 
1419
- /* Add second level */
1434
+ /*
1435
+ * Ordered lists
1436
+ */
1420
1437
 
1421
- .sd-list:not(.sd-list--icon):is(ol),
1422
- .sd-list:not(.sd-list--icon):is(ol) > li > ol,
1423
- .sd-list:not(.sd-list--icon) ol > li > ol,
1424
- .sd-prose > :is(ol, ul):is(ol),
1425
- .sd-prose > :is(ol, ul):is(ol) > li > ol,
1426
- .sd-prose > :is(ol, ul) ol > li > ol {
1427
- 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;
1428
1447
  }
1429
-
1430
- /* Ordered lists inside unordered lists. */
1431
-
1432
- .sd-list:not(.sd-list--icon):is(ul) > li > ol,
1433
- .sd-list:not(.sd-list--icon) ul > li > ol,
1434
- .sd-prose > :is(ol, ul):is(ul) > li > ol,
1435
- .sd-prose > :is(ol, ul) ul > li > ol {
1436
- 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
+ }
1437
1480
  }
1438
1481
 
1439
- /* Styling */
1482
+ /* Level 1 */
1440
1483
 
1441
- .sd-list:not(.sd-list--icon) li, .sd-prose > :is(ol, ul) li {
1442
- 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;
1443
1489
  }
1444
1490
 
1445
- .sd-list:not(.sd-list--icon) li:before, .sd-prose > :is(ol, ul) li:before {
1446
- display: table-cell;
1447
- 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'; /* • */
1448
1494
  }
1449
1495
 
1450
- .sd-list:not(.sd-list--icon):is(ul),
1451
- .sd-list:not(.sd-list--icon) ul,
1452
- .sd-prose > :is(ol, ul):is(ul),
1453
- .sd-prose > :is(ol, ul) ul {
1454
- list-style-type: '';
1455
- }
1456
-
1457
- .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 {
1458
- content: '\2022';
1459
- }
1496
+ /* Level 2 */
1460
1497
 
1461
- .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 {
1462
- content: '\002B1D';
1463
- }
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
+ }
1464
1501
 
1465
- .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 {
1466
- 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'; /* · */
1467
1504
  }
1468
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
+
1469
1520
  .sd-list--icon {
1470
1521
  padding-top: var(--sd-spacing-4, 1rem) /* 16px */;
1471
1522
  padding-bottom: var(--sd-spacing-4, 1rem) /* 16px */;
@@ -1519,6 +1570,10 @@ Used for inverted pressed interaction text link */;
1519
1570
  margin-right: var(--sd-spacing-8, 2rem) /* 32px */;
1520
1571
  }
1521
1572
 
1573
+ /*
1574
+ * Inverted
1575
+ */
1576
+
1522
1577
  .sd-list--inverted,
1523
1578
  .sd-prose--inverted > :is(ol, ul) {
1524
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-0-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-0-chip--...
6
+ * @variant { primary-300 | primary-500 | white } sd-1-3-2-chip--...
7
7
  */
8
8
 
9
- .sd-1-3-0-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-0-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-0-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-0-chip--white {
56
+ .sd-1-3-2-chip--white {
57
57
 
58
58
 
59
59