@solid-design-system/styles 1.3.2 → 1.4.1

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 +20 -0
  2. package/cdn/modules/interactive.css +1 -1
  3. package/cdn/modules/pagination.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/interactive.css +5 -1
  28. package/dist/modules/pagination.css +46 -45
  29. package/dist/modules/prose.css +5 -1
  30. package/dist/solid-styles.css +48 -43
  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 +11 -11
  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 +43 -39
  40. package/dist-versioned/modules/leadtext.css +8 -8
  41. package/dist-versioned/modules/list.css +47 -47
  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 +77 -76
  46. package/dist-versioned/modules/paragraph.css +8 -8
  47. package/dist-versioned/modules/prose.css +236 -232
  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 +433 -428
  52. package/package.json +1 -1
@@ -1,22 +1,22 @@
1
1
  /**
2
2
  * Prose
3
- * @name sd-1-3-2-prose
3
+ * @name sd-1-4-1-prose
4
4
  * @status stable
5
5
  * @since 3.6.0
6
- * @boolean sd-1-3-2-prose--inverted Inverts the content, but not tables.
7
- * @boolean sd-1-3-2-prose--full-width Overrides the 80ch max-width and makes the prose full width.
6
+ * @boolean sd-1-4-1-prose--inverted Inverts the content, but not tables.
7
+ * @boolean sd-1-4-1-prose--full-width Overrides the 80ch max-width and makes the prose full width.
8
8
  */
9
9
 
10
10
  /**
11
11
  * Display provides larger text sizes that are not used as headlines. The different sizes allow for a more versatile styling of text elements. Display text should not be used as substitute for headlines.
12
- * @name sd-1-3-2-display
12
+ * @name sd-1-4-1-display
13
13
  * @status stable
14
14
  * @since 1.7
15
- * @variant { xl | 3xl } sd-1-3-2-display--size-... The display's size.
16
- * @boolean sd-1-3-2-display--inverted Inverts the display text.
15
+ * @variant { xl | 3xl } sd-1-4-1-display--size-... The display's size.
16
+ * @boolean sd-1-4-1-display--inverted Inverts the display text.
17
17
  */
18
18
 
19
- .sd-1-3-2-display {
19
+ .sd-1-4-1-display {
20
20
  font-size: var(--sd-font-size-3xl, 2rem) /* 32px */;
21
21
  font-weight: 400;
22
22
  line-height: var(--sd-line-height-tight, 120%) /* Used for display and large titles */;
@@ -26,12 +26,12 @@
26
26
 
27
27
  @media (min-width: 1024px) {
28
28
 
29
- .sd-1-3-2-display {
29
+ .sd-1-4-1-display {
30
30
  font-size: var(--sd-font-size-4xl, 2.5rem) /* 40px */;
31
31
  }
32
32
  }
33
33
 
34
- .sd-1-3-2-display--size-xl {
34
+ .sd-1-4-1-display--size-xl {
35
35
  font-size: var(--sd-font-size-xl, 1.5rem) /* 24px */;
36
36
  font-weight: 400;
37
37
  line-height: var(--sd-line-height-tight, 120%) /* Used for display and large titles */;
@@ -39,7 +39,7 @@
39
39
  color: rgb(var(--sd-color-black, 24 24 24) / var(--tw-text-opacity, 1)) /* Default text color */;
40
40
  }
41
41
 
42
- .sd-1-3-2-display--size-3xl {
42
+ .sd-1-4-1-display--size-3xl {
43
43
  font-size: var(--sd-font-size-2xl, 1.75rem) /* 28px */;
44
44
  font-weight: 400;
45
45
  line-height: var(--sd-line-height-tight, 120%) /* Used for display and large titles */;
@@ -49,35 +49,35 @@
49
49
 
50
50
  @media (min-width: 1024px) {
51
51
 
52
- .sd-1-3-2-display--size-3xl {
52
+ .sd-1-4-1-display--size-3xl {
53
53
  font-size: var(--sd-font-size-3xl, 2rem) /* 32px */;
54
54
  }
55
55
  }
56
56
 
57
- .sd-1-3-2-display--inverted {
57
+ .sd-1-4-1-display--inverted {
58
58
 
59
59
  color: rgb(var(--sd-color-white, 255 255 255) / var(--tw-text-opacity, 1)) /* Inverted text color */;
60
60
  }
61
61
 
62
62
  /**
63
63
  * Headlines are vital for displaying content hierarchy and to improve accessibility. A headline can be additionally accompanied by an icon. The icon can be displayed on the left side or inline.
64
- * @name sd-1-3-2-headline
64
+ * @name sd-1-4-1-headline
65
65
  * @status stable
66
66
  * @since 1.16
67
- * @variant { 3xl | xl | lg | base } sd-1-3-2-headline--size-... The headline's size.
68
- * @boolean sd-1-3-2-headline--inverted Inverts the headline text.
69
- * @boolean sd-1-3-2-headline--inline Sets inline behavior. Used exclusively when an sd-icon or other component is present. See usage <a href="#inline">here.</a>
67
+ * @variant { 3xl | xl | lg | base } sd-1-4-1-headline--size-... The headline's size.
68
+ * @boolean sd-1-4-1-headline--inverted Inverts the headline text.
69
+ * @boolean sd-1-4-1-headline--inline Sets inline behavior. Used exclusively when an sd-icon or other component is present. See usage <a href="#inline">here.</a>
70
70
  */
71
71
 
72
- .sd-1-3-2-headline,
73
- .sd-1-3-2-prose :is(h1, h2, h3, h4, h5) {
72
+ .sd-1-4-1-headline,
73
+ .sd-1-4-1-prose :is(h1, h2, h3, h4, h5) {
74
74
  display: flex;
75
75
  font-weight: 700;
76
76
 
77
77
  color: rgb(var(--sd-color-primary, 0 53 142) / var(--tw-text-opacity, 1)) /* Primary brand color for text */;
78
78
  }
79
79
 
80
- .sd-1-3-2-headline sd-icon, .sd-1-3-2-prose :is(h1, h2, h3, h4, h5) sd-icon {
80
+ .sd-1-4-1-headline sd-icon, .sd-1-4-1-prose :is(h1, h2, h3, h4, h5) sd-icon {
81
81
  flex-shrink: 0;
82
82
  font-size: 3rem;
83
83
 
@@ -86,15 +86,15 @@
86
86
 
87
87
  @media (min-width: 640px) {
88
88
 
89
- .sd-1-3-2-headline sd-icon, .sd-1-3-2-prose :is(h1, h2, h3, h4, h5) sd-icon {
89
+ .sd-1-4-1-headline sd-icon, .sd-1-4-1-prose :is(h1, h2, h3, h4, h5) sd-icon {
90
90
  margin-top: var(--sd-spacing-2, 0.5rem) /* 8px */;
91
91
  }
92
92
  }
93
93
 
94
- .sd-1-3-2-headline.sd-1-3-2-headline,
95
- .sd-1-3-2-headline:is(h1):not(.sd-1-3-2-headline),
96
- .sd-1-3-2-prose :is(h1, h2, h3, h4, h5).sd-1-3-2-headline,
97
- .sd-1-3-2-prose :is(h1, h2, h3, h4, h5):is(h1):not(.sd-1-3-2-headline) {
94
+ .sd-1-4-1-headline.sd-1-4-1-headline,
95
+ .sd-1-4-1-headline:is(h1):not(.sd-1-4-1-headline),
96
+ .sd-1-4-1-prose :is(h1, h2, h3, h4, h5).sd-1-4-1-headline,
97
+ .sd-1-4-1-prose :is(h1, h2, h3, h4, h5):is(h1):not(.sd-1-4-1-headline) {
98
98
  gap: var(--sd-spacing-4, 1rem) /* 16px */;
99
99
  font-size: var(--sd-font-size-3xl, 2rem) /* 32px */;
100
100
  line-height: var(--sd-line-height-tight, 120%) /* Used for display and large titles */;
@@ -102,29 +102,29 @@
102
102
 
103
103
  @media (min-width: 640px) {
104
104
 
105
- .sd-1-3-2-headline.sd-1-3-2-headline,
106
- .sd-1-3-2-headline:is(h1):not(.sd-1-3-2-headline),
107
- .sd-1-3-2-prose :is(h1, h2, h3, h4, h5).sd-1-3-2-headline,
108
- .sd-1-3-2-prose :is(h1, h2, h3, h4, h5):is(h1):not(.sd-1-3-2-headline) {
105
+ .sd-1-4-1-headline.sd-1-4-1-headline,
106
+ .sd-1-4-1-headline:is(h1):not(.sd-1-4-1-headline),
107
+ .sd-1-4-1-prose :is(h1, h2, h3, h4, h5).sd-1-4-1-headline,
108
+ .sd-1-4-1-prose :is(h1, h2, h3, h4, h5):is(h1):not(.sd-1-4-1-headline) {
109
109
  font-size: var(--sd-font-size-4xl, 2.5rem) /* 40px */;
110
110
  }
111
111
  }
112
112
 
113
- .sd-1-3-2-headline.sd-1-3-2-headline sd-icon, .sd-1-3-2-headline:is(h1):not(.sd-1-3-2-headline) sd-icon, .sd-1-3-2-prose :is(h1, h2, h3, h4, h5).sd-1-3-2-headline sd-icon, .sd-1-3-2-prose :is(h1, h2, h3, h4, h5):is(h1):not(.sd-1-3-2-headline) sd-icon {
113
+ .sd-1-4-1-headline.sd-1-4-1-headline sd-icon, .sd-1-4-1-headline:is(h1):not(.sd-1-4-1-headline) sd-icon, .sd-1-4-1-prose :is(h1, h2, h3, h4, h5).sd-1-4-1-headline sd-icon, .sd-1-4-1-prose :is(h1, h2, h3, h4, h5):is(h1):not(.sd-1-4-1-headline) sd-icon {
114
114
  margin-top: calc(var(--sd-spacing-1, 0.25rem) /* 4px */ * -1);
115
115
  }
116
116
 
117
117
  @media (min-width: 640px) {
118
118
 
119
- .sd-1-3-2-headline.sd-1-3-2-headline sd-icon, .sd-1-3-2-headline:is(h1):not(.sd-1-3-2-headline) sd-icon, .sd-1-3-2-prose :is(h1, h2, h3, h4, h5).sd-1-3-2-headline sd-icon, .sd-1-3-2-prose :is(h1, h2, h3, h4, h5):is(h1):not(.sd-1-3-2-headline) sd-icon {
119
+ .sd-1-4-1-headline.sd-1-4-1-headline sd-icon, .sd-1-4-1-headline:is(h1):not(.sd-1-4-1-headline) sd-icon, .sd-1-4-1-prose :is(h1, h2, h3, h4, h5).sd-1-4-1-headline sd-icon, .sd-1-4-1-prose :is(h1, h2, h3, h4, h5):is(h1):not(.sd-1-4-1-headline) sd-icon {
120
120
  margin-top: var(--sd-spacing-0, 0px) /* No spacing (manually added) */;
121
121
  }
122
122
  }
123
123
 
124
- .sd-1-3-2-headline.sd-1-3-2-headline--size-3xl,
125
- .sd-1-3-2-headline:is(h2):not(.sd-1-3-2-headline),
126
- .sd-1-3-2-prose :is(h1, h2, h3, h4, h5).sd-1-3-2-headline--size-3xl,
127
- .sd-1-3-2-prose :is(h1, h2, h3, h4, h5):is(h2):not(.sd-1-3-2-headline) {
124
+ .sd-1-4-1-headline.sd-1-4-1-headline--size-3xl,
125
+ .sd-1-4-1-headline:is(h2):not(.sd-1-4-1-headline),
126
+ .sd-1-4-1-prose :is(h1, h2, h3, h4, h5).sd-1-4-1-headline--size-3xl,
127
+ .sd-1-4-1-prose :is(h1, h2, h3, h4, h5):is(h2):not(.sd-1-4-1-headline) {
128
128
  gap: var(--sd-spacing-4, 1rem) /* 16px */;
129
129
  font-size: var(--sd-font-size-2xl, 1.75rem) /* 28px */;
130
130
  line-height: var(--sd-line-height-tight, 120%) /* Used for display and large titles */;
@@ -132,227 +132,231 @@
132
132
 
133
133
  @media (min-width: 640px) {
134
134
 
135
- .sd-1-3-2-headline.sd-1-3-2-headline--size-3xl,
136
- .sd-1-3-2-headline:is(h2):not(.sd-1-3-2-headline),
137
- .sd-1-3-2-prose :is(h1, h2, h3, h4, h5).sd-1-3-2-headline--size-3xl,
138
- .sd-1-3-2-prose :is(h1, h2, h3, h4, h5):is(h2):not(.sd-1-3-2-headline) {
135
+ .sd-1-4-1-headline.sd-1-4-1-headline--size-3xl,
136
+ .sd-1-4-1-headline:is(h2):not(.sd-1-4-1-headline),
137
+ .sd-1-4-1-prose :is(h1, h2, h3, h4, h5).sd-1-4-1-headline--size-3xl,
138
+ .sd-1-4-1-prose :is(h1, h2, h3, h4, h5):is(h2):not(.sd-1-4-1-headline) {
139
139
  font-size: var(--sd-font-size-3xl, 2rem) /* 32px */;
140
140
  }
141
141
  }
142
142
 
143
- .sd-1-3-2-headline.sd-1-3-2-headline--size-3xl sd-icon, .sd-1-3-2-headline:is(h2):not(.sd-1-3-2-headline) sd-icon, .sd-1-3-2-prose :is(h1, h2, h3, h4, h5).sd-1-3-2-headline--size-3xl sd-icon, .sd-1-3-2-prose :is(h1, h2, h3, h4, h5):is(h2):not(.sd-1-3-2-headline) sd-icon {
143
+ .sd-1-4-1-headline.sd-1-4-1-headline--size-3xl sd-icon, .sd-1-4-1-headline:is(h2):not(.sd-1-4-1-headline) sd-icon, .sd-1-4-1-prose :is(h1, h2, h3, h4, h5).sd-1-4-1-headline--size-3xl sd-icon, .sd-1-4-1-prose :is(h1, h2, h3, h4, h5):is(h2):not(.sd-1-4-1-headline) sd-icon {
144
144
  margin-top: calc(var(--sd-spacing-1, 0.25rem) /* 4px */ * -1);
145
145
  }
146
146
 
147
147
  @media (min-width: 640px) {
148
148
 
149
- .sd-1-3-2-headline.sd-1-3-2-headline--size-3xl sd-icon, .sd-1-3-2-headline:is(h2):not(.sd-1-3-2-headline) sd-icon, .sd-1-3-2-prose :is(h1, h2, h3, h4, h5).sd-1-3-2-headline--size-3xl sd-icon, .sd-1-3-2-prose :is(h1, h2, h3, h4, h5):is(h2):not(.sd-1-3-2-headline) sd-icon {
149
+ .sd-1-4-1-headline.sd-1-4-1-headline--size-3xl sd-icon, .sd-1-4-1-headline:is(h2):not(.sd-1-4-1-headline) sd-icon, .sd-1-4-1-prose :is(h1, h2, h3, h4, h5).sd-1-4-1-headline--size-3xl sd-icon, .sd-1-4-1-prose :is(h1, h2, h3, h4, h5):is(h2):not(.sd-1-4-1-headline) sd-icon {
150
150
  margin-top: var(--sd-spacing-0, 0px) /* No spacing (manually added) */;
151
151
  }
152
152
  }
153
153
 
154
- .sd-1-3-2-headline.sd-1-3-2-headline--size-xl,
155
- .sd-1-3-2-headline.sd-1-3-2-headline--size-lg,
156
- .sd-1-3-2-headline.sd-1-3-2-headline--size-base,
157
- .sd-1-3-2-headline:is(h3, h4, h5):not(.sd-1-3-2-headline),
158
- .sd-1-3-2-prose :is(h1, h2, h3, h4, h5).sd-1-3-2-headline--size-xl,
159
- .sd-1-3-2-prose :is(h1, h2, h3, h4, h5).sd-1-3-2-headline--size-lg,
160
- .sd-1-3-2-prose :is(h1, h2, h3, h4, h5).sd-1-3-2-headline--size-base,
161
- .sd-1-3-2-prose :is(h1, h2, h3, h4, h5):is(h3, h4, h5):not(.sd-1-3-2-headline) {
154
+ .sd-1-4-1-headline.sd-1-4-1-headline--size-xl,
155
+ .sd-1-4-1-headline.sd-1-4-1-headline--size-lg,
156
+ .sd-1-4-1-headline.sd-1-4-1-headline--size-base,
157
+ .sd-1-4-1-headline:is(h3, h4, h5):not(.sd-1-4-1-headline),
158
+ .sd-1-4-1-prose :is(h1, h2, h3, h4, h5).sd-1-4-1-headline--size-xl,
159
+ .sd-1-4-1-prose :is(h1, h2, h3, h4, h5).sd-1-4-1-headline--size-lg,
160
+ .sd-1-4-1-prose :is(h1, h2, h3, h4, h5).sd-1-4-1-headline--size-base,
161
+ .sd-1-4-1-prose :is(h1, h2, h3, h4, h5):is(h3, h4, h5):not(.sd-1-4-1-headline) {
162
162
  gap: var(--sd-spacing-2, 0.5rem) /* 8px */;
163
163
 
164
164
  color: rgb(var(--sd-color-black, 24 24 24) / var(--tw-text-opacity, 1)) /* Default text color */;
165
165
  }
166
166
 
167
- .sd-1-3-2-headline.sd-1-3-2-headline--size-xl sd-icon, .sd-1-3-2-headline.sd-1-3-2-headline--size-lg sd-icon, .sd-1-3-2-headline.sd-1-3-2-headline--size-base sd-icon, .sd-1-3-2-headline:is(h3, h4, h5):not(.sd-1-3-2-headline) sd-icon, .sd-1-3-2-prose :is(h1, h2, h3, h4, h5).sd-1-3-2-headline--size-xl sd-icon, .sd-1-3-2-prose :is(h1, h2, h3, h4, h5).sd-1-3-2-headline--size-lg sd-icon, .sd-1-3-2-prose :is(h1, h2, h3, h4, h5).sd-1-3-2-headline--size-base sd-icon, .sd-1-3-2-prose :is(h1, h2, h3, h4, h5):is(h3, h4, h5):not(.sd-1-3-2-headline) sd-icon {
167
+ .sd-1-4-1-headline.sd-1-4-1-headline--size-xl sd-icon, .sd-1-4-1-headline.sd-1-4-1-headline--size-lg sd-icon, .sd-1-4-1-headline.sd-1-4-1-headline--size-base sd-icon, .sd-1-4-1-headline:is(h3, h4, h5):not(.sd-1-4-1-headline) sd-icon, .sd-1-4-1-prose :is(h1, h2, h3, h4, h5).sd-1-4-1-headline--size-xl sd-icon, .sd-1-4-1-prose :is(h1, h2, h3, h4, h5).sd-1-4-1-headline--size-lg sd-icon, .sd-1-4-1-prose :is(h1, h2, h3, h4, h5).sd-1-4-1-headline--size-base sd-icon, .sd-1-4-1-prose :is(h1, h2, h3, h4, h5):is(h3, h4, h5):not(.sd-1-4-1-headline) sd-icon {
168
168
  font-size: 2rem;
169
169
  }
170
170
 
171
- .sd-1-3-2-headline.sd-1-3-2-headline--size-xl,
172
- .sd-1-3-2-headline:is(h3):not(.sd-1-3-2-headline),
173
- .sd-1-3-2-prose :is(h1, h2, h3, h4, h5).sd-1-3-2-headline--size-xl,
174
- .sd-1-3-2-prose :is(h1, h2, h3, h4, h5):is(h3):not(.sd-1-3-2-headline) {
171
+ .sd-1-4-1-headline.sd-1-4-1-headline--size-xl,
172
+ .sd-1-4-1-headline:is(h3):not(.sd-1-4-1-headline),
173
+ .sd-1-4-1-prose :is(h1, h2, h3, h4, h5).sd-1-4-1-headline--size-xl,
174
+ .sd-1-4-1-prose :is(h1, h2, h3, h4, h5):is(h3):not(.sd-1-4-1-headline) {
175
175
  font-size: var(--sd-font-size-xl, 1.5rem) /* 24px */;
176
176
  }
177
177
 
178
- .sd-1-3-2-headline.sd-1-3-2-headline--size-xl sd-icon, .sd-1-3-2-headline:is(h3):not(.sd-1-3-2-headline) sd-icon, .sd-1-3-2-prose :is(h1, h2, h3, h4, h5).sd-1-3-2-headline--size-xl sd-icon, .sd-1-3-2-prose :is(h1, h2, h3, h4, h5):is(h3):not(.sd-1-3-2-headline) sd-icon {
178
+ .sd-1-4-1-headline.sd-1-4-1-headline--size-xl sd-icon, .sd-1-4-1-headline:is(h3):not(.sd-1-4-1-headline) sd-icon, .sd-1-4-1-prose :is(h1, h2, h3, h4, h5).sd-1-4-1-headline--size-xl sd-icon, .sd-1-4-1-prose :is(h1, h2, h3, h4, h5):is(h3):not(.sd-1-4-1-headline) sd-icon {
179
179
  margin-top: var(--sd-spacing-0-5, 0.125rem) /* 2px */;
180
180
  }
181
181
 
182
182
  @media (min-width: 640px) {
183
183
 
184
- .sd-1-3-2-headline.sd-1-3-2-headline--size-xl sd-icon, .sd-1-3-2-headline:is(h3):not(.sd-1-3-2-headline) sd-icon, .sd-1-3-2-prose :is(h1, h2, h3, h4, h5).sd-1-3-2-headline--size-xl sd-icon, .sd-1-3-2-prose :is(h1, h2, h3, h4, h5):is(h3):not(.sd-1-3-2-headline) sd-icon {
184
+ .sd-1-4-1-headline.sd-1-4-1-headline--size-xl sd-icon, .sd-1-4-1-headline:is(h3):not(.sd-1-4-1-headline) sd-icon, .sd-1-4-1-prose :is(h1, h2, h3, h4, h5).sd-1-4-1-headline--size-xl sd-icon, .sd-1-4-1-prose :is(h1, h2, h3, h4, h5):is(h3):not(.sd-1-4-1-headline) sd-icon {
185
185
  margin-top: var(--sd-spacing-0-5, 0.125rem) /* 2px */;
186
186
  }
187
187
  }
188
188
 
189
- .sd-1-3-2-headline.sd-1-3-2-headline--size-lg,
190
- .sd-1-3-2-headline.sd-1-3-2-headline--size-base,
191
- .sd-1-3-2-headline:is(h4, h5):not(.sd-1-3-2-headline),
192
- .sd-1-3-2-prose :is(h1, h2, h3, h4, h5).sd-1-3-2-headline--size-lg,
193
- .sd-1-3-2-prose :is(h1, h2, h3, h4, h5).sd-1-3-2-headline--size-base,
194
- .sd-1-3-2-prose :is(h1, h2, h3, h4, h5):is(h4, h5):not(.sd-1-3-2-headline) {
189
+ .sd-1-4-1-headline.sd-1-4-1-headline--size-lg,
190
+ .sd-1-4-1-headline.sd-1-4-1-headline--size-base,
191
+ .sd-1-4-1-headline:is(h4, h5):not(.sd-1-4-1-headline),
192
+ .sd-1-4-1-prose :is(h1, h2, h3, h4, h5).sd-1-4-1-headline--size-lg,
193
+ .sd-1-4-1-prose :is(h1, h2, h3, h4, h5).sd-1-4-1-headline--size-base,
194
+ .sd-1-4-1-prose :is(h1, h2, h3, h4, h5):is(h4, h5):not(.sd-1-4-1-headline) {
195
195
  line-height: var(--sd-line-height-normal, 150%) /* Used for body copy and smaller titles */;
196
196
  }
197
197
 
198
- .sd-1-3-2-headline.sd-1-3-2-headline--size-lg,
199
- .sd-1-3-2-headline:is(h4),
200
- .sd-1-3-2-prose :is(h1, h2, h3, h4, h5).sd-1-3-2-headline--size-lg,
201
- .sd-1-3-2-prose :is(h1, h2, h3, h4, h5):is(h4) {
198
+ .sd-1-4-1-headline.sd-1-4-1-headline--size-lg,
199
+ .sd-1-4-1-headline:is(h4),
200
+ .sd-1-4-1-prose :is(h1, h2, h3, h4, h5).sd-1-4-1-headline--size-lg,
201
+ .sd-1-4-1-prose :is(h1, h2, h3, h4, h5):is(h4) {
202
202
  font-size: var(--sd-font-size-lg, 1.25rem) /* 20px */;
203
203
  }
204
204
 
205
- .sd-1-3-2-headline.sd-1-3-2-headline--size-lg sd-icon, .sd-1-3-2-headline:is(h4) sd-icon, .sd-1-3-2-prose :is(h1, h2, h3, h4, h5).sd-1-3-2-headline--size-lg sd-icon, .sd-1-3-2-prose :is(h1, h2, h3, h4, h5):is(h4) sd-icon {
205
+ .sd-1-4-1-headline.sd-1-4-1-headline--size-lg sd-icon, .sd-1-4-1-headline:is(h4) sd-icon, .sd-1-4-1-prose :is(h1, h2, h3, h4, h5).sd-1-4-1-headline--size-lg sd-icon, .sd-1-4-1-prose :is(h1, h2, h3, h4, h5):is(h4) sd-icon {
206
206
  margin-top: var(--sd-spacing-0, 0px) /* No spacing (manually added) */;
207
207
  }
208
208
 
209
209
  @media (min-width: 640px) {
210
210
 
211
- .sd-1-3-2-headline.sd-1-3-2-headline--size-lg sd-icon, .sd-1-3-2-headline:is(h4) sd-icon, .sd-1-3-2-prose :is(h1, h2, h3, h4, h5).sd-1-3-2-headline--size-lg sd-icon, .sd-1-3-2-prose :is(h1, h2, h3, h4, h5):is(h4) sd-icon {
211
+ .sd-1-4-1-headline.sd-1-4-1-headline--size-lg sd-icon, .sd-1-4-1-headline:is(h4) sd-icon, .sd-1-4-1-prose :is(h1, h2, h3, h4, h5).sd-1-4-1-headline--size-lg sd-icon, .sd-1-4-1-prose :is(h1, h2, h3, h4, h5):is(h4) sd-icon {
212
212
  margin-top: var(--sd-spacing-0, 0px) /* No spacing (manually added) */;
213
213
  }
214
214
  }
215
215
 
216
- .sd-1-3-2-headline.sd-1-3-2-headline--size-base,
217
- .sd-1-3-2-headline:is(h5):not(.sd-1-3-2-headline),
218
- .sd-1-3-2-prose :is(h1, h2, h3, h4, h5).sd-1-3-2-headline--size-base,
219
- .sd-1-3-2-prose :is(h1, h2, h3, h4, h5):is(h5):not(.sd-1-3-2-headline) {
216
+ .sd-1-4-1-headline.sd-1-4-1-headline--size-base,
217
+ .sd-1-4-1-headline:is(h5):not(.sd-1-4-1-headline),
218
+ .sd-1-4-1-prose :is(h1, h2, h3, h4, h5).sd-1-4-1-headline--size-base,
219
+ .sd-1-4-1-prose :is(h1, h2, h3, h4, h5):is(h5):not(.sd-1-4-1-headline) {
220
220
  font-size: var(--sd-font-size-base, 1rem) /* 16px */;
221
221
  }
222
222
 
223
- .sd-1-3-2-headline.sd-1-3-2-headline--size-base sd-icon, .sd-1-3-2-headline:is(h5):not(.sd-1-3-2-headline) sd-icon, .sd-1-3-2-prose :is(h1, h2, h3, h4, h5).sd-1-3-2-headline--size-base sd-icon, .sd-1-3-2-prose :is(h1, h2, h3, h4, h5):is(h5):not(.sd-1-3-2-headline) sd-icon {
223
+ .sd-1-4-1-headline.sd-1-4-1-headline--size-base sd-icon, .sd-1-4-1-headline:is(h5):not(.sd-1-4-1-headline) sd-icon, .sd-1-4-1-prose :is(h1, h2, h3, h4, h5).sd-1-4-1-headline--size-base sd-icon, .sd-1-4-1-prose :is(h1, h2, h3, h4, h5):is(h5):not(.sd-1-4-1-headline) sd-icon {
224
224
  margin-top: calc(var(--sd-spacing-1, 0.25rem) /* 4px */ * -1);
225
225
  }
226
226
 
227
- .sd-1-3-2-headline.sd-1-3-2-headline--size-base mark, .sd-1-3-2-headline:is(h5):not(.sd-1-3-2-headline) mark, .sd-1-3-2-prose :is(h1, h2, h3, h4, h5).sd-1-3-2-headline--size-base mark, .sd-1-3-2-prose :is(h1, h2, h3, h4, h5):is(h5):not(.sd-1-3-2-headline) mark {
227
+ .sd-1-4-1-headline.sd-1-4-1-headline--size-base mark, .sd-1-4-1-headline:is(h5):not(.sd-1-4-1-headline) mark, .sd-1-4-1-prose :is(h1, h2, h3, h4, h5).sd-1-4-1-headline--size-base mark, .sd-1-4-1-prose :is(h1, h2, h3, h4, h5):is(h5):not(.sd-1-4-1-headline) mark {
228
228
  color: inherit;
229
229
  }
230
230
 
231
- .sd-1-3-2-headline--inline {
231
+ .sd-1-4-1-headline--inline {
232
232
  display: inline-block;
233
233
  }
234
234
 
235
- .sd-1-3-2-headline--inline sd-icon {
235
+ .sd-1-4-1-headline--inline sd-icon {
236
236
  margin-right: var(--sd-spacing-2, 0.5rem) /* 8px */;
237
237
  margin-top: calc(var(--sd-spacing-1, 0.25rem) /* 4px */ * -1);
238
238
  vertical-align: middle;
239
239
  }
240
240
 
241
- .sd-1-3-2-headline--inline:is(.sd-1-3-2-headline--size-xl, .sd-1-3-2-headline--size-lg, .sd-1-3-2-headline--size-base) sd-icon {
241
+ .sd-1-4-1-headline--inline:is(.sd-1-4-1-headline--size-xl, .sd-1-4-1-headline--size-lg, .sd-1-4-1-headline--size-base) sd-icon {
242
242
  margin-right: var(--sd-spacing-0-5, 0.125rem) /* 2px */;
243
243
  }
244
244
 
245
- .sd-1-3-2-headline--inverted:not(#_),
246
- .sd-1-3-2-prose--inverted :is(h1, h2, h3, h4, h5):not(.sd-1-3-2-headline):not(#_) {
245
+ .sd-1-4-1-headline--inverted:not(#_),
246
+ .sd-1-4-1-prose--inverted :is(h1, h2, h3, h4, h5):not(.sd-1-4-1-headline):not(#_) {
247
247
 
248
248
  color: rgb(var(--sd-color-white, 255 255 255) / var(--tw-text-opacity, 1)) /* Inverted text color */;
249
249
  }
250
250
 
251
- .sd-1-3-2-headline--inverted:not(#_) sd-icon, .sd-1-3-2-prose--inverted :is(h1, h2, h3, h4, h5):not(.sd-1-3-2-headline):not(#_) sd-icon {
251
+ .sd-1-4-1-headline--inverted:not(#_) sd-icon, .sd-1-4-1-prose--inverted :is(h1, h2, h3, h4, h5):not(.sd-1-4-1-headline):not(#_) sd-icon {
252
252
 
253
253
  color: rgb(var(--sd-color-white, 255 255 255) / var(--tw-text-opacity, 1)) /* Inverted text color */;
254
254
  }
255
255
 
256
256
  /**
257
257
  * Generates basic styles for interactive elements.
258
- * @name sd-1-3-2-interactive
258
+ * @name sd-1-4-1-interactive
259
259
  * @status stable
260
260
  * @since 1.11
261
- * @boolean sd-1-3-2-interactive--disabled Makes an element look disabled.
262
- * @boolean sd-1-3-2-interactive--inverted Inverts the colors of an element.
263
- * @boolean sd-1-3-2-interactive--reset Resets the default browser styles of e.g., a button.
261
+ * @boolean sd-1-4-1-interactive--disabled Makes an element look disabled.
262
+ * @boolean sd-1-4-1-interactive--inverted Inverts the colors of an element.
263
+ * @boolean sd-1-4-1-interactive--reset Resets the default browser styles of e.g., a button.
264
264
  */
265
265
 
266
- .sd-1-3-2-prose a--reset, .sd-1-3-2-interactive--reset {
266
+ .sd-1-4-1-prose a--reset, .sd-1-4-1-interactive--reset {
267
267
  all: unset;
268
268
  outline: revert;
269
269
  }
270
270
 
271
- .sd-1-3-2-prose a,
272
- .sd-1-3-2-interactive {
271
+ .sd-1-4-1-prose a,
272
+ .sd-1-4-1-interactive {
273
273
  cursor: pointer;
274
274
 
275
275
  color: rgb(var(--sd-color-primary, 0 53 142) / var(--tw-text-opacity, 1)) /* Primary brand color for text */;
276
276
  text-decoration-line: underline;
277
277
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
278
- transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
279
278
  transition-duration: 150ms;
279
+ transition-duration: var(--sd-duration-fast, 150ms) /* Component State
280
+ Animation of states like hover or pressed
281
+ Microinteractions
282
+ Smooth transitions eg. for buttons or dropdowns */;
283
+ transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
280
284
  }
281
285
 
282
- .sd-1-3-2-prose a:hover:not([disabled]),
283
- .sd-1-3-2-interactive:hover:not([disabled]) {
286
+ .sd-1-4-1-prose a:hover:not([disabled]),
287
+ .sd-1-4-1-interactive:hover:not([disabled]) {
284
288
 
285
289
  color: rgb(var(--sd-color-primary-500, 70 109 175) / var(--tw-text-opacity, 1)) /* Used for hover interaction */;
286
290
  }
287
291
 
288
- .sd-1-3-2-prose a:active:not([disabled]),
289
- .sd-1-3-2-interactive:active:not([disabled]) {
292
+ .sd-1-4-1-prose a:active:not([disabled]),
293
+ .sd-1-4-1-interactive:active:not([disabled]) {
290
294
 
291
295
  color: rgb(var(--sd-color-primary-800, 5 21 48) / var(--tw-text-opacity, 1)) /* Used for pressed interaction */;
292
296
  }
293
297
 
294
- .sd-1-3-2-prose a:is(.sd-1-3-2-interactive), .sd-1-3-2-interactive:is(.sd-1-3-2-interactive) {
298
+ .sd-1-4-1-prose a:is(.sd-1-4-1-interactive), .sd-1-4-1-interactive:is(.sd-1-4-1-interactive) {
295
299
  text-decoration-line: none;
296
300
  }
297
301
 
298
- .sd-1-3-2-prose a:focus-visible, .sd-1-3-2-interactive:focus-visible {
302
+ .sd-1-4-1-prose a:focus-visible, .sd-1-4-1-interactive:focus-visible {
299
303
  outline-style: solid;
300
304
  outline-width: 2px;
301
305
  outline-offset: 2px;
302
306
  outline-color: rgb(var(--sd-color-primary, 0 53 142) / 1) /* Used for buttons, select field, focus state */;
303
307
  }
304
308
 
305
- .sd-1-3-2-prose a--disabled,
306
- .sd-1-3-2-prose a[disabled],
307
- .sd-1-3-2-prose a[href=''],
308
- .sd-1-3-2-interactive--disabled,
309
- .sd-1-3-2-interactive[disabled],
310
- .sd-1-3-2-interactive[href=''] {
309
+ .sd-1-4-1-prose a--disabled,
310
+ .sd-1-4-1-prose a[disabled],
311
+ .sd-1-4-1-prose a[href=''],
312
+ .sd-1-4-1-interactive--disabled,
313
+ .sd-1-4-1-interactive[disabled],
314
+ .sd-1-4-1-interactive[href=''] {
311
315
  cursor: not-allowed;
312
316
 
313
317
  color: rgb(var(--sd-color-neutral-600, 136 136 136) / var(--tw-text-opacity, 1)) /* Used for inverted disabled state */;
314
318
  }
315
319
 
316
- .sd-1-3-2-prose a--disabled:hover:not([disabled]),
317
- .sd-1-3-2-prose a[disabled]:hover:not([disabled]),
318
- .sd-1-3-2-prose a[href='']:hover:not([disabled]),
319
- .sd-1-3-2-interactive--disabled:hover:not([disabled]),
320
- .sd-1-3-2-interactive[disabled]:hover:not([disabled]),
321
- .sd-1-3-2-interactive[href='']:hover:not([disabled]) {
320
+ .sd-1-4-1-prose a--disabled:hover:not([disabled]),
321
+ .sd-1-4-1-prose a[disabled]:hover:not([disabled]),
322
+ .sd-1-4-1-prose a[href='']:hover:not([disabled]),
323
+ .sd-1-4-1-interactive--disabled:hover:not([disabled]),
324
+ .sd-1-4-1-interactive[disabled]:hover:not([disabled]),
325
+ .sd-1-4-1-interactive[href='']:hover:not([disabled]) {
322
326
 
323
327
  color: rgb(var(--sd-color-neutral-600, 136 136 136) / var(--tw-text-opacity, 1)) /* Used for inverted disabled state */;
324
328
  }
325
329
 
326
- .sd-1-3-2-prose a--disabled:active:not([disabled]),
327
- .sd-1-3-2-prose a[disabled]:active:not([disabled]),
328
- .sd-1-3-2-prose a[href='']:active:not([disabled]),
329
- .sd-1-3-2-interactive--disabled:active:not([disabled]),
330
- .sd-1-3-2-interactive[disabled]:active:not([disabled]),
331
- .sd-1-3-2-interactive[href='']:active:not([disabled]) {
330
+ .sd-1-4-1-prose a--disabled:active:not([disabled]),
331
+ .sd-1-4-1-prose a[disabled]:active:not([disabled]),
332
+ .sd-1-4-1-prose a[href='']:active:not([disabled]),
333
+ .sd-1-4-1-interactive--disabled:active:not([disabled]),
334
+ .sd-1-4-1-interactive[disabled]:active:not([disabled]),
335
+ .sd-1-4-1-interactive[href='']:active:not([disabled]) {
332
336
 
333
337
  color: rgb(var(--sd-color-neutral-600, 136 136 136) / var(--tw-text-opacity, 1)) /* Used for inverted disabled state */;
334
338
  }
335
339
 
336
- .sd-1-3-2-prose--inverted a,
337
- .sd-1-3-2-interactive--inverted {
340
+ .sd-1-4-1-prose--inverted a,
341
+ .sd-1-4-1-interactive--inverted {
338
342
 
339
343
  color: rgb(var(--sd-color-white, 255 255 255) / var(--tw-text-opacity, 1)) /* Inverted text color */;
340
344
  }
341
345
 
342
- .sd-1-3-2-prose--inverted a:hover:not([disabled]),
343
- .sd-1-3-2-interactive--inverted:hover:not([disabled]) {
346
+ .sd-1-4-1-prose--inverted a:hover:not([disabled]),
347
+ .sd-1-4-1-interactive--inverted:hover:not([disabled]) {
344
348
 
345
349
  color: rgb(var(--sd-color-primary-200, 224 233 243) / var(--tw-text-opacity, 1)) /* Used for inverted hover interaction text link and inverted pressed interaction button label */;
346
350
  }
347
351
 
348
- .sd-1-3-2-prose--inverted a:active:not([disabled]),
349
- .sd-1-3-2-interactive--inverted:active:not([disabled]) {
352
+ .sd-1-4-1-prose--inverted a:active:not([disabled]),
353
+ .sd-1-4-1-interactive--inverted:active:not([disabled]) {
350
354
 
351
355
  color: rgb(var(--sd-color-primary-400, 153 171 208) / var(--tw-text-opacity, 1)) /* Additional text inverted color
352
356
  Used for inverted pressed interaction text link */;
353
357
  }
354
358
 
355
- .sd-1-3-2-prose--inverted a:focus-visible, .sd-1-3-2-interactive--inverted:focus-visible {
359
+ .sd-1-4-1-prose--inverted a:focus-visible, .sd-1-4-1-interactive--inverted:focus-visible {
356
360
  outline-style: solid;
357
361
  outline-width: 2px;
358
362
  outline-offset: 2px;
@@ -361,15 +365,15 @@ Used for inverted pressed interaction text link */;
361
365
 
362
366
  /**
363
367
  * Leadtext is used for text that should be highlighted and a focal point of the page.
364
- * @name sd-1-3-2-leadtext
368
+ * @name sd-1-4-1-leadtext
365
369
  * @status stable
366
370
  * @since 1.7
367
- * @variant { lg } sd-1-3-2-leadtext--size-... The leadtext's size.
368
- * @boolean sd-1-3-2-leadtext--inverted Inverts the leadtext text.
371
+ * @variant { lg } sd-1-4-1-leadtext--size-... The leadtext's size.
372
+ * @boolean sd-1-4-1-leadtext--inverted Inverts the leadtext text.
369
373
  */
370
374
 
371
- .sd-1-3-2-prose > .sd-1-3-2-leadtext,
372
- .sd-1-3-2-leadtext {
375
+ .sd-1-4-1-prose > .sd-1-4-1-leadtext,
376
+ .sd-1-4-1-leadtext {
373
377
  font-size: var(--sd-font-size-xl, 1.5rem) /* 24px */;
374
378
  font-weight: 400;
375
379
  line-height: var(--sd-line-height-normal, 150%) /* Used for body copy and smaller titles */;
@@ -377,7 +381,7 @@ Used for inverted pressed interaction text link */;
377
381
  color: rgb(var(--sd-color-black, 24 24 24) / var(--tw-text-opacity, 1)) /* Default text color */;
378
382
  }
379
383
 
380
- .sd-1-3-2-prose > .sd-1-3-2-leadtext--size-lg, .sd-1-3-2-leadtext--size-lg {
384
+ .sd-1-4-1-prose > .sd-1-4-1-leadtext--size-lg, .sd-1-4-1-leadtext--size-lg {
381
385
  font-size: var(--sd-font-size-lg, 1.25rem) /* 20px */;
382
386
  font-weight: 400;
383
387
  line-height: var(--sd-line-height-normal, 150%) /* Used for body copy and smaller titles */;
@@ -385,22 +389,22 @@ Used for inverted pressed interaction text link */;
385
389
  color: rgb(var(--sd-color-black, 24 24 24) / var(--tw-text-opacity, 1)) /* Default text color */;
386
390
  }
387
391
 
388
- .sd-1-3-2-prose--inverted > .sd-1-3-2-leadtext,
389
- .sd-1-3-2-leadtext--inverted {
392
+ .sd-1-4-1-prose--inverted > .sd-1-4-1-leadtext,
393
+ .sd-1-4-1-leadtext--inverted {
390
394
 
391
395
  color: rgb(var(--sd-color-white, 255 255 255) / var(--tw-text-opacity, 1)) /* Inverted text color */;
392
396
  }
393
397
 
394
398
  /**
395
399
  * Generates basic styles for list elements.
396
- * @name sd-1-3-2-list
400
+ * @name sd-1-4-1-list
397
401
  * @status stable
398
402
  * @since 1.39.0
399
- * @boolean sd-1-3-2-list--inverted Inverts the list text.
403
+ * @boolean sd-1-4-1-list--inverted Inverts the list text.
400
404
  */
401
405
 
402
- .sd-1-3-2-list:not(.sd-1-3-2-list--icon),
403
- .sd-1-3-2-prose > :is(ol, ul) {
406
+ .sd-1-4-1-list:not(.sd-1-4-1-list--icon),
407
+ .sd-1-4-1-prose > :is(ol, ul) {
404
408
  list-style-position: revert;
405
409
  list-style-type: revert;
406
410
  padding: revert;
@@ -414,14 +418,14 @@ Used for inverted pressed interaction text link */;
414
418
  */
415
419
  }
416
420
 
417
- .sd-1-3-2-list:not(.sd-1-3-2-list--icon) li:not(:first-child), .sd-1-3-2-prose > :is(ol, ul) li:not(:first-child) {
421
+ .sd-1-4-1-list:not(.sd-1-4-1-list--icon) li:not(:first-child), .sd-1-4-1-prose > :is(ol, ul) li:not(:first-child) {
418
422
  margin-top: var(--sd-spacing-3, 0.75rem) /* 12px */;
419
423
  }
420
424
 
421
- .sd-1-3-2-list:not(.sd-1-3-2-list--icon) ul,
422
- .sd-1-3-2-list:not(.sd-1-3-2-list--icon) ol,
423
- .sd-1-3-2-prose > :is(ol, ul) ul,
424
- .sd-1-3-2-prose > :is(ol, ul) ol {
425
+ .sd-1-4-1-list:not(.sd-1-4-1-list--icon) ul,
426
+ .sd-1-4-1-list:not(.sd-1-4-1-list--icon) ol,
427
+ .sd-1-4-1-prose > :is(ol, ul) ul,
428
+ .sd-1-4-1-prose > :is(ol, ul) ol {
425
429
  all: revert;
426
430
  padding-left: 1.4em;
427
431
  padding-top: 0.75em;
@@ -429,8 +433,8 @@ Used for inverted pressed interaction text link */;
429
433
 
430
434
  @supports not (-webkit-hyphens: none) {
431
435
 
432
- .sd-1-3-2-list:not(.sd-1-3-2-list--icon),
433
- .sd-1-3-2-prose > :is(ol, ul) {
436
+ .sd-1-4-1-list:not(.sd-1-4-1-list--icon),
437
+ .sd-1-4-1-prose > :is(ol, ul) {
434
438
  /* Safari automatically adds some spacing. This adds it for other browsers. */
435
439
 
436
440
  /*
@@ -444,38 +448,38 @@ Used for inverted pressed interaction text link */;
444
448
  */
445
449
  /* Level 1 */
446
450
  }
447
- .sd-1-3-2-list:not(.sd-1-3-2-list--icon) li, .sd-1-3-2-prose > :is(ol, ul) li {
451
+ .sd-1-4-1-list:not(.sd-1-4-1-list--icon) li, .sd-1-4-1-prose > :is(ol, ul) li {
448
452
  padding-left: 0.3em;
449
453
  }
450
- .sd-1-3-2-list:not(.sd-1-3-2-list--icon):is(ol):not(.sd-1-3-2-list--icon), .sd-1-3-2-prose > :is(ol, ul):is(ol):not(.sd-1-3-2-list--icon) {
454
+ .sd-1-4-1-list:not(.sd-1-4-1-list--icon):is(ol):not(.sd-1-4-1-list--icon), .sd-1-4-1-prose > :is(ol, ul):is(ol):not(.sd-1-4-1-list--icon) {
451
455
  counter-reset: item;
452
456
  }
453
- .sd-1-3-2-list:not(.sd-1-3-2-list--icon):is(ol):not(.sd-1-3-2-list--icon) > li, .sd-1-3-2-prose > :is(ol, ul):is(ol):not(.sd-1-3-2-list--icon) > li {
457
+ .sd-1-4-1-list:not(.sd-1-4-1-list--icon):is(ol):not(.sd-1-4-1-list--icon) > li, .sd-1-4-1-prose > :is(ol, ul):is(ol):not(.sd-1-4-1-list--icon) > li {
454
458
  counter-increment: item;
455
459
  }
456
- .sd-1-3-2-list:not(.sd-1-3-2-list--icon):is(ol):not(.sd-1-3-2-list--icon) > li::marker, .sd-1-3-2-prose > :is(ol, ul):is(ol):not(.sd-1-3-2-list--icon) > li::marker {
460
+ .sd-1-4-1-list:not(.sd-1-4-1-list--icon):is(ol):not(.sd-1-4-1-list--icon) > li::marker, .sd-1-4-1-prose > :is(ol, ul):is(ol):not(.sd-1-4-1-list--icon) > li::marker {
457
461
  content: counters(item, '.', decimal) '. ';
458
462
  }
459
463
  /* Level 2 */
460
- .sd-1-3-2-list:not(.sd-1-3-2-list--icon):is(ol):not(.sd-1-3-2-list--icon) > li > ol, .sd-1-3-2-prose > :is(ol, ul):is(ol):not(.sd-1-3-2-list--icon) > li > ol {
464
+ .sd-1-4-1-list:not(.sd-1-4-1-list--icon):is(ol):not(.sd-1-4-1-list--icon) > li > ol, .sd-1-4-1-prose > :is(ol, ul):is(ol):not(.sd-1-4-1-list--icon) > li > ol {
461
465
  padding-left: 1.9em;
462
466
  counter-reset: subitem;
463
467
  }
464
- .sd-1-3-2-list:not(.sd-1-3-2-list--icon):is(ol):not(.sd-1-3-2-list--icon) > li > ol > li, .sd-1-3-2-prose > :is(ol, ul):is(ol):not(.sd-1-3-2-list--icon) > li > ol > li {
468
+ .sd-1-4-1-list:not(.sd-1-4-1-list--icon):is(ol):not(.sd-1-4-1-list--icon) > li > ol > li, .sd-1-4-1-prose > :is(ol, ul):is(ol):not(.sd-1-4-1-list--icon) > li > ol > li {
465
469
  counter-increment: subitem;
466
470
  }
467
- .sd-1-3-2-list:not(.sd-1-3-2-list--icon):is(ol):not(.sd-1-3-2-list--icon) > li > ol > li::marker, .sd-1-3-2-prose > :is(ol, ul):is(ol):not(.sd-1-3-2-list--icon) > li > ol > li::marker {
471
+ .sd-1-4-1-list:not(.sd-1-4-1-list--icon):is(ol):not(.sd-1-4-1-list--icon) > li > ol > li::marker, .sd-1-4-1-prose > :is(ol, ul):is(ol):not(.sd-1-4-1-list--icon) > li > ol > li::marker {
468
472
  content: counters(item, '.', decimal) '.' counters(subitem, '.', decimal) '. ';
469
473
  }
470
474
  /* Level 3 */
471
- .sd-1-3-2-list:not(.sd-1-3-2-list--icon):is(ol):not(.sd-1-3-2-list--icon) > li > ol > li > ol, .sd-1-3-2-prose > :is(ol, ul):is(ol):not(.sd-1-3-2-list--icon) > li > ol > li > ol {
475
+ .sd-1-4-1-list:not(.sd-1-4-1-list--icon):is(ol):not(.sd-1-4-1-list--icon) > li > ol > li > ol, .sd-1-4-1-prose > :is(ol, ul):is(ol):not(.sd-1-4-1-list--icon) > li > ol > li > ol {
472
476
  padding-left: 2.7em;
473
477
  counter-reset: subsubitem;
474
478
  }
475
- .sd-1-3-2-list:not(.sd-1-3-2-list--icon):is(ol):not(.sd-1-3-2-list--icon) > li > ol > li > ol > li, .sd-1-3-2-prose > :is(ol, ul):is(ol):not(.sd-1-3-2-list--icon) > li > ol > li > ol > li {
479
+ .sd-1-4-1-list:not(.sd-1-4-1-list--icon):is(ol):not(.sd-1-4-1-list--icon) > li > ol > li > ol > li, .sd-1-4-1-prose > :is(ol, ul):is(ol):not(.sd-1-4-1-list--icon) > li > ol > li > ol > li {
476
480
  counter-increment: subsubitem;
477
481
  }
478
- .sd-1-3-2-list:not(.sd-1-3-2-list--icon):is(ol):not(.sd-1-3-2-list--icon) > li > ol > li > ol > li::marker, .sd-1-3-2-prose > :is(ol, ul):is(ol):not(.sd-1-3-2-list--icon) > li > ol > li > ol > li::marker {
482
+ .sd-1-4-1-list:not(.sd-1-4-1-list--icon):is(ol):not(.sd-1-4-1-list--icon) > li > ol > li > ol > li::marker, .sd-1-4-1-prose > :is(ol, ul):is(ol):not(.sd-1-4-1-list--icon) > li > ol > li > ol > li::marker {
479
483
  content: counters(item, '.', decimal) '.' counters(subitem, '.', decimal) '.'
480
484
  counters(subsubitem, '.', decimal) '. ';
481
485
  }
@@ -483,35 +487,35 @@ Used for inverted pressed interaction text link */;
483
487
 
484
488
  /* Level 1 */
485
489
 
486
- .sd-1-3-2-list:not(.sd-1-3-2-list--icon):is(ul):not(.sd-1-3-2-list--icon),
487
- .sd-1-3-2-list:not(.sd-1-3-2-list--icon) ul,
488
- .sd-1-3-2-prose > :is(ol, ul):is(ul):not(.sd-1-3-2-list--icon),
489
- .sd-1-3-2-prose > :is(ol, ul) ul {
490
+ .sd-1-4-1-list:not(.sd-1-4-1-list--icon):is(ul):not(.sd-1-4-1-list--icon),
491
+ .sd-1-4-1-list:not(.sd-1-4-1-list--icon) ul,
492
+ .sd-1-4-1-prose > :is(ol, ul):is(ul):not(.sd-1-4-1-list--icon),
493
+ .sd-1-4-1-prose > :is(ol, ul) ul {
490
494
  padding-left: 0.5em;
491
495
  }
492
496
 
493
- .sd-1-3-2-list:not(.sd-1-3-2-list--icon):is(ul):not(.sd-1-3-2-list--icon) > li, .sd-1-3-2-list:not(.sd-1-3-2-list--icon) ul > li, .sd-1-3-2-prose > :is(ol, ul):is(ul):not(.sd-1-3-2-list--icon) > li, .sd-1-3-2-prose > :is(ol, ul) ul > li {
497
+ .sd-1-4-1-list:not(.sd-1-4-1-list--icon):is(ul):not(.sd-1-4-1-list--icon) > li, .sd-1-4-1-list:not(.sd-1-4-1-list--icon) ul > li, .sd-1-4-1-prose > :is(ol, ul):is(ul):not(.sd-1-4-1-list--icon) > li, .sd-1-4-1-prose > :is(ol, ul) ul > li {
494
498
  padding-left: 0.75em;
495
499
  list-style-type: '\2022'; /* • */
496
500
  }
497
501
 
498
502
  /* Level 2 */
499
503
 
500
- .sd-1-3-2-list:not(.sd-1-3-2-list--icon):is(ul):not(.sd-1-3-2-list--icon) > li > ul, .sd-1-3-2-list:not(.sd-1-3-2-list--icon) ul > li > ul, .sd-1-3-2-prose > :is(ol, ul):is(ul):not(.sd-1-3-2-list--icon) > li > ul, .sd-1-3-2-prose > :is(ol, ul) ul > li > ul {
504
+ .sd-1-4-1-list:not(.sd-1-4-1-list--icon):is(ul):not(.sd-1-4-1-list--icon) > li > ul, .sd-1-4-1-list:not(.sd-1-4-1-list--icon) ul > li > ul, .sd-1-4-1-prose > :is(ol, ul):is(ul):not(.sd-1-4-1-list--icon) > li > ul, .sd-1-4-1-prose > :is(ol, ul) ul > li > ul {
501
505
  padding-left: 0.3em;
502
506
  }
503
507
 
504
- .sd-1-3-2-list:not(.sd-1-3-2-list--icon):is(ul):not(.sd-1-3-2-list--icon) > li > ul > li, .sd-1-3-2-list:not(.sd-1-3-2-list--icon) ul > li > ul > li, .sd-1-3-2-prose > :is(ol, ul):is(ul):not(.sd-1-3-2-list--icon) > li > ul > li, .sd-1-3-2-prose > :is(ol, ul) ul > li > ul > li {
508
+ .sd-1-4-1-list:not(.sd-1-4-1-list--icon):is(ul):not(.sd-1-4-1-list--icon) > li > ul > li, .sd-1-4-1-list:not(.sd-1-4-1-list--icon) ul > li > ul > li, .sd-1-4-1-prose > :is(ol, ul):is(ul):not(.sd-1-4-1-list--icon) > li > ul > li, .sd-1-4-1-prose > :is(ol, ul) ul > li > ul > li {
505
509
  list-style-type: '\002B1D'; /* · */
506
510
  }
507
511
 
508
512
  /* Level 3 */
509
513
 
510
- .sd-1-3-2-list:not(.sd-1-3-2-list--icon):is(ul):not(.sd-1-3-2-list--icon) > li > ul > li > ul, .sd-1-3-2-list:not(.sd-1-3-2-list--icon) ul > li > ul > li > ul, .sd-1-3-2-prose > :is(ol, ul):is(ul):not(.sd-1-3-2-list--icon) > li > ul > li > ul, .sd-1-3-2-prose > :is(ol, ul) ul > li > ul > li > ul {
514
+ .sd-1-4-1-list:not(.sd-1-4-1-list--icon):is(ul):not(.sd-1-4-1-list--icon) > li > ul > li > ul, .sd-1-4-1-list:not(.sd-1-4-1-list--icon) ul > li > ul > li > ul, .sd-1-4-1-prose > :is(ol, ul):is(ul):not(.sd-1-4-1-list--icon) > li > ul > li > ul, .sd-1-4-1-prose > :is(ol, ul) ul > li > ul > li > ul {
511
515
  padding-left: 0.4em;
512
516
  }
513
517
 
514
- .sd-1-3-2-list:not(.sd-1-3-2-list--icon):is(ul):not(.sd-1-3-2-list--icon) > li > ul > li > ul > li, .sd-1-3-2-list:not(.sd-1-3-2-list--icon) ul > li > ul > li > ul > li, .sd-1-3-2-prose > :is(ol, ul):is(ul):not(.sd-1-3-2-list--icon) > li > ul > li > ul > li, .sd-1-3-2-prose > :is(ol, ul) ul > li > ul > li > ul > li {
518
+ .sd-1-4-1-list:not(.sd-1-4-1-list--icon):is(ul):not(.sd-1-4-1-list--icon) > li > ul > li > ul > li, .sd-1-4-1-list:not(.sd-1-4-1-list--icon) ul > li > ul > li > ul > li, .sd-1-4-1-prose > :is(ol, ul):is(ul):not(.sd-1-4-1-list--icon) > li > ul > li > ul > li, .sd-1-4-1-prose > :is(ol, ul) ul > li > ul > li > ul > li {
515
519
  list-style-type: '\2010'; /* - */
516
520
  }
517
521
 
@@ -519,19 +523,19 @@ Used for inverted pressed interaction text link */;
519
523
  * Icon lists
520
524
  */
521
525
 
522
- .sd-1-3-2-list--icon {
526
+ .sd-1-4-1-list--icon {
523
527
  padding-top: var(--sd-spacing-4, 1rem) /* 16px */;
524
528
  padding-bottom: var(--sd-spacing-4, 1rem) /* 16px */;
525
529
  text-align: left;
526
530
  }
527
531
 
528
- .sd-1-3-2-list--icon li sd-icon:first-of-type,
529
- .sd-1-3-2-list--icon li .sd-1-3-2-list--icon__icon:first-of-type {
532
+ .sd-1-4-1-list--icon li sd-icon:first-of-type,
533
+ .sd-1-4-1-list--icon li .sd-1-4-1-list--icon__icon:first-of-type {
530
534
 
531
535
  color: rgb(var(--sd-color-white, 255 255 255) / var(--tw-text-opacity, 1)) /* Inverted text color */;
532
536
  }
533
537
 
534
- .sd-1-3-2-list--icon {
538
+ .sd-1-4-1-list--icon {
535
539
  list-style-type: '';
536
540
  }
537
541
 
@@ -539,19 +543,19 @@ Used for inverted pressed interaction text link */;
539
543
  styles without affecting semantics is to set list-style-type to an empty string.
540
544
  https://www.matuzo.at/blog/2023/removing-list-styles-without-affecting-semantics */
541
545
 
542
- .sd-1-3-2-list--icon > li:first-of-type {
546
+ .sd-1-4-1-list--icon > li:first-of-type {
543
547
  padding-top: var(--sd-spacing-0, 0px) /* No spacing (manually added) */;
544
548
  }
545
549
 
546
- .sd-1-3-2-list--icon li {
550
+ .sd-1-4-1-list--icon li {
547
551
  position: relative;
548
552
  padding-top: var(--sd-spacing-3, 0.75rem) /* 12px */;
549
553
  padding-left: var(--sd-spacing-10, 2.5rem) /* 40px */;
550
554
  line-height: 32px;
551
555
  }
552
556
 
553
- .sd-1-3-2-list--icon li > sd-icon:first-of-type,
554
- .sd-1-3-2-list--icon li > .sd-1-3-2-list--icon__icon:first-of-type {
557
+ .sd-1-4-1-list--icon li > sd-icon:first-of-type,
558
+ .sd-1-4-1-list--icon li > .sd-1-4-1-list--icon__icon:first-of-type {
555
559
  position: absolute;
556
560
  left: var(--sd-spacing-0, 0px) /* No spacing (manually added) */;
557
561
  font-size: var(--sd-font-size-3xl, 2rem) /* 32px */;
@@ -559,16 +563,16 @@ Used for inverted pressed interaction text link */;
559
563
  color: rgb(var(--sd-color-primary, 0 53 142) / var(--tw-text-opacity, 1)) /* Primary brand color for text */;
560
564
  }
561
565
 
562
- .sd-1-3-2-list--icon.sd-1-3-2-list--horizontal {
566
+ .sd-1-4-1-list--icon.sd-1-4-1-list--horizontal {
563
567
  display: flex;
564
568
  }
565
569
 
566
- .sd-1-3-2-list--icon.sd-1-3-2-list--horizontal li {
570
+ .sd-1-4-1-list--icon.sd-1-4-1-list--horizontal li {
567
571
  display: flex;
568
572
  padding-top: var(--sd-spacing-0, 0px) /* No spacing (manually added) */;
569
573
  }
570
574
 
571
- .sd-1-3-2-list--icon.sd-1-3-2-list--horizontal li:not(:last-child) {
575
+ .sd-1-4-1-list--icon.sd-1-4-1-list--horizontal li:not(:last-child) {
572
576
  margin-right: var(--sd-spacing-8, 2rem) /* 32px */;
573
577
  }
574
578
 
@@ -576,31 +580,31 @@ Used for inverted pressed interaction text link */;
576
580
  * Inverted
577
581
  */
578
582
 
579
- .sd-1-3-2-list--inverted,
580
- .sd-1-3-2-prose--inverted > :is(ol, ul) {
583
+ .sd-1-4-1-list--inverted,
584
+ .sd-1-4-1-prose--inverted > :is(ol, ul) {
581
585
 
582
586
  color: rgb(var(--sd-color-white, 255 255 255) / var(--tw-text-opacity, 1)) /* Inverted text color */;
583
587
  }
584
588
 
585
- .sd-1-3-2-list--inverted li > sd-icon:first-of-type,
586
- .sd-1-3-2-list--inverted li > .sd-1-3-2-list--icon__icon:first-of-type,
587
- .sd-1-3-2-prose--inverted > :is(ol, ul) li > sd-icon:first-of-type,
588
- .sd-1-3-2-prose--inverted > :is(ol, ul) li > .sd-1-3-2-list--icon__icon:first-of-type {
589
+ .sd-1-4-1-list--inverted li > sd-icon:first-of-type,
590
+ .sd-1-4-1-list--inverted li > .sd-1-4-1-list--icon__icon:first-of-type,
591
+ .sd-1-4-1-prose--inverted > :is(ol, ul) li > sd-icon:first-of-type,
592
+ .sd-1-4-1-prose--inverted > :is(ol, ul) li > .sd-1-4-1-list--icon__icon:first-of-type {
589
593
 
590
594
  color: rgb(var(--sd-color-white, 255 255 255) / var(--tw-text-opacity, 1)) /* Inverted text color */;
591
595
  }
592
596
 
593
597
  /**
594
598
  * A paragraph is used to display blocks of text. It uses the base font size and can contain bold and/or link styles.
595
- * @name sd-1-3-2-paragraph
599
+ * @name sd-1-4-1-paragraph
596
600
  * @status stable
597
601
  * @since 1.7
598
- * @variant { sm } sd-1-3-2-paragraph--size-... The paragraph's font size.
599
- * @boolean sd-1-3-2-paragraph--inverted Inverts the paragraph text.
602
+ * @variant { sm } sd-1-4-1-paragraph--size-... The paragraph's font size.
603
+ * @boolean sd-1-4-1-paragraph--inverted Inverts the paragraph text.
600
604
  */
601
605
 
602
- .sd-1-3-2-paragraph,
603
- .sd-1-3-2-prose p {
606
+ .sd-1-4-1-paragraph,
607
+ .sd-1-4-1-prose p {
604
608
  font-size: var(--sd-font-size-base, 1rem) /* 16px */;
605
609
  font-weight: 400;
606
610
  line-height: var(--sd-line-height-normal, 150%) /* Used for body copy and smaller titles */;
@@ -608,7 +612,7 @@ Used for inverted pressed interaction text link */;
608
612
  color: rgb(var(--sd-color-black, 24 24 24) / var(--tw-text-opacity, 1)) /* Default text color */;
609
613
  }
610
614
 
611
- .sd-1-3-2-paragraph--size-sm, .sd-1-3-2-prose p--size-sm {
615
+ .sd-1-4-1-paragraph--size-sm, .sd-1-4-1-prose p--size-sm {
612
616
  font-size: var(--sd-font-size-sm, 0.875rem) /* 14px */;
613
617
  font-weight: 400;
614
618
  line-height: var(--sd-line-height-normal, 150%) /* Used for body copy and smaller titles */;
@@ -616,35 +620,35 @@ Used for inverted pressed interaction text link */;
616
620
  color: rgb(var(--sd-color-black, 24 24 24) / var(--tw-text-opacity, 1)) /* Default text color */;
617
621
  }
618
622
 
619
- .sd-1-3-2-paragraph--inverted,
620
- .sd-1-3-2-prose--inverted p {
623
+ .sd-1-4-1-paragraph--inverted,
624
+ .sd-1-4-1-prose--inverted p {
621
625
 
622
626
  color: rgb(var(--sd-color-white, 255 255 255) / var(--tw-text-opacity, 1)) /* Inverted text color */;
623
627
  }
624
628
 
625
629
  /**
626
630
  * Generates basic styles for media elements.
627
- * @name sd-1-3-2-media
631
+ * @name sd-1-4-1-media
628
632
  * @status stable
629
633
  * @since 2.5.0
630
- * @boolean sd-1-3-2-media--inverted Inverts the figcaption text.
634
+ * @boolean sd-1-4-1-media--inverted Inverts the figcaption text.
631
635
  */
632
636
 
633
- .sd-1-3-2-prose figure,
634
- figure.sd-1-3-2-media {
637
+ .sd-1-4-1-prose figure,
638
+ figure.sd-1-4-1-media {
635
639
  margin: var(--sd-spacing-0, 0px) /* No spacing (manually added) */;
636
640
  }
637
641
 
638
- .sd-1-3-2-prose figure figcaption, figure.sd-1-3-2-media figcaption {
642
+ .sd-1-4-1-prose figure figcaption, figure.sd-1-4-1-media figcaption {
639
643
 
640
644
  color: rgb(var(--sd-color-neutral-700, 104 104 104) / var(--tw-text-opacity, 1)) /* Additional text color */;
641
645
  }
642
646
 
643
- .sd-1-3-2-prose figure figcaption:last-child, figure.sd-1-3-2-media figcaption:last-child {
647
+ .sd-1-4-1-prose figure figcaption:last-child, figure.sd-1-4-1-media figcaption:last-child {
644
648
  margin-top: var(--sd-spacing-3, 0.75rem) /* 12px */;
645
649
  }
646
650
 
647
- .sd-1-3-2-prose--inverted figure figcaption, figure.sd-1-3-2-media--inverted figcaption {
651
+ .sd-1-4-1-prose--inverted figure figcaption, figure.sd-1-4-1-media--inverted figcaption {
648
652
 
649
653
  color: rgb(var(--sd-color-primary-400, 153 171 208) / var(--tw-text-opacity, 1)) /* Additional text inverted color
650
654
  Used for inverted pressed interaction text link */;
@@ -652,18 +656,18 @@ Used for inverted pressed interaction text link */;
652
656
 
653
657
  /**
654
658
  * A table cell is a single cell inside a table, used to display discrete data elements.
655
- * @name sd-1-3-2-table-cell
659
+ * @name sd-1-4-1-table-cell
656
660
  * @status stable
657
661
  * @since 1.13
658
- * @boolean sd-1-3-2-table-cell--divider Displays a divider to the right.
659
- * @variant { white | primary-100 | neutral-100 } sd-1-3-2-table-cell--bg-... Applies the selected background-color to the table cell. If not selected, a transparent background-color is used per default.
660
- * @boolean sd-1-3-2-table-cell--shadow-active Displays the table shadow.
661
- * @variant { top | left | right | bottom } sd-1-3-2-table-cell--shadow-... Applies the selected shadow to the table cell.
662
+ * @boolean sd-1-4-1-table-cell--divider Displays a divider to the right.
663
+ * @variant { white | primary-100 | neutral-100 } sd-1-4-1-table-cell--bg-... Applies the selected background-color to the table cell. If not selected, a transparent background-color is used per default.
664
+ * @boolean sd-1-4-1-table-cell--shadow-active Displays the table shadow.
665
+ * @variant { top | left | right | bottom } sd-1-4-1-table-cell--shadow-... Applies the selected shadow to the table cell.
662
666
  */
663
667
 
664
- .sd-1-3-2-prose td,
665
- .sd-1-3-2-prose th,
666
- .sd-1-3-2-table-cell {
668
+ .sd-1-4-1-prose td,
669
+ .sd-1-4-1-prose th,
670
+ .sd-1-4-1-table-cell {
667
671
  border-top-width: 1px;
668
672
  border-bottom-width: 1px;
669
673
  border-left-width: 0px;
@@ -680,11 +684,11 @@ Used for divider, teaser, container, ... */;
680
684
  color: rgb(var(--sd-color-black, 24 24 24) / var(--tw-text-opacity, 1)) /* Default text color */;
681
685
  }
682
686
 
683
- .sd-1-3-2-table-cell--divider {
687
+ .sd-1-4-1-table-cell--divider {
684
688
  border-right-width: 1px;
685
689
  }
686
690
 
687
- .sd-1-3-2-table-cell--shadow-top:after, .sd-1-3-2-table-cell--shadow-bottom:after, .sd-1-3-2-table-cell--shadow-left:after, .sd-1-3-2-table-cell--shadow-right:after {
691
+ .sd-1-4-1-table-cell--shadow-top:after, .sd-1-4-1-table-cell--shadow-bottom:after, .sd-1-4-1-table-cell--shadow-left:after, .sd-1-4-1-table-cell--shadow-right:after {
688
692
  pointer-events: none;
689
693
  position: absolute;
690
694
  --tw-gradient-from: rgb(0 0 0 / var(--sd-opacity-10, 0.1)) var(--tw-gradient-from-position);
@@ -699,7 +703,7 @@ Used for divider, teaser, container, ... */;
699
703
  content: var(--tw-content);
700
704
  }
701
705
 
702
- .sd-1-3-2-table-cell--shadow-top:after, .sd-1-3-2-table-cell--shadow-bottom:after {
706
+ .sd-1-4-1-table-cell--shadow-top:after, .sd-1-4-1-table-cell--shadow-bottom:after {
703
707
  left: var(--sd-spacing-0, 0px) /* No spacing (manually added) */;
704
708
  right: var(--sd-spacing-0, 0px) /* No spacing (manually added) */;
705
709
  height: var(--sd-spacing-2-5, 0.625rem) /* 10px */;
@@ -707,7 +711,7 @@ Used for divider, teaser, container, ... */;
707
711
 
708
712
  /* fix that shows line on top of table-cell */
709
713
 
710
- .sd-1-3-2-table-cell--shadow-top:before, .sd-1-3-2-table-cell--shadow-bottom:before {
714
+ .sd-1-4-1-table-cell--shadow-top:before, .sd-1-4-1-table-cell--shadow-bottom:before {
711
715
  position: absolute;
712
716
  left: var(--sd-spacing-0, 0px) /* No spacing (manually added) */;
713
717
  display: block;
@@ -721,66 +725,66 @@ Used for divider, teaser, container, ... */;
721
725
  content: var(--tw-content);
722
726
  }
723
727
 
724
- .sd-1-3-2-table-cell--shadow-left:after, .sd-1-3-2-table-cell--shadow-right:after {
728
+ .sd-1-4-1-table-cell--shadow-left:after, .sd-1-4-1-table-cell--shadow-right:after {
725
729
  top: var(--sd-spacing-0, 0px) /* No spacing (manually added) */;
726
730
  bottom: var(--sd-spacing-0, 0px) /* No spacing (manually added) */;
727
731
  width: var(--sd-spacing-2-5, 0.625rem) /* 10px */;
728
732
  }
729
733
 
730
- .sd-1-3-2-table-cell.sd-1-3-2-table-cell--shadow-active:after {
734
+ .sd-1-4-1-table-cell.sd-1-4-1-table-cell--shadow-active:after {
731
735
  opacity: 100%;
732
736
  }
733
737
 
734
- .sd-1-3-2-table-cell--shadow-top:after {
738
+ .sd-1-4-1-table-cell--shadow-top:after {
735
739
  top: -10px;
736
740
  background-image: linear-gradient(to top, var(--tw-gradient-stops));
737
741
  }
738
742
 
739
743
  /* fix that shows line on top of table-cell */
740
744
 
741
- .sd-1-3-2-table-cell--shadow-top:before {
745
+ .sd-1-4-1-table-cell--shadow-top:before {
742
746
  bottom: -1px;
743
747
  }
744
748
 
745
- .sd-1-3-2-table-cell--shadow-bottom:after {
749
+ .sd-1-4-1-table-cell--shadow-bottom:after {
746
750
  bottom: -10px;
747
751
  background-image: linear-gradient(to bottom, var(--tw-gradient-stops));
748
752
  }
749
753
 
750
754
  /* fix that shows line on top of table-cell */
751
755
 
752
- .sd-1-3-2-table-cell--shadow-bottom:before {
756
+ .sd-1-4-1-table-cell--shadow-bottom:before {
753
757
  top: -1px;
754
758
  }
755
759
 
756
- .sd-1-3-2-table-cell--shadow-left:after {
760
+ .sd-1-4-1-table-cell--shadow-left:after {
757
761
  left: -10px;
758
762
  background-image: linear-gradient(to left, var(--tw-gradient-stops));
759
763
  }
760
764
 
761
- .sd-1-3-2-table-cell--shadow-right:after {
765
+ .sd-1-4-1-table-cell--shadow-right:after {
762
766
  right: -10px;
763
767
  background-image: linear-gradient(to right, var(--tw-gradient-stops));
764
768
  }
765
769
 
766
- .sd-1-3-2-table-cell--bg-white {
770
+ .sd-1-4-1-table-cell--bg-white {
767
771
 
768
772
  background-color: rgb(var(--sd-color-white, 255 255 255) / var(--tw-bg-opacity, 1)) /* Default background color (light mode) 
Used for inverted button */;
769
773
  }
770
774
 
771
- .sd-1-3-2-table-cell--bg-primary-100 {
775
+ .sd-1-4-1-table-cell--bg-primary-100 {
772
776
 
773
777
  background-color: rgb(var(--sd-color-primary-100, 236 240 249) / var(--tw-bg-opacity, 1)) /* Additional background color (light mode) */;
774
778
  }
775
779
 
776
- .sd-1-3-2-table-cell--bg-neutral-100 {
780
+ .sd-1-4-1-table-cell--bg-neutral-100 {
777
781
 
778
782
  background-color: rgb(var(--sd-color-neutral-100, 246 246 246) / var(--tw-bg-opacity, 1)) /* Additional background color (light mode) */;
779
783
  }
780
784
 
781
785
  /**
782
786
  * A table is organized structured content, used for scanning, comparing, and analyzing the data.
783
- * @name sd-1-3-2-table
787
+ * @name sd-1-4-1-table
784
788
  * @status stable
785
789
  * @since 1.13
786
790
  */
@@ -789,8 +793,8 @@ Used for divider, teaser, container, ... */;
789
793
  * Remove inherited styles from table before applying our styles.
790
794
  */
791
795
 
792
- .sd-1-3-2-table,
793
- .sd-1-3-2-prose table {
796
+ .sd-1-4-1-table,
797
+ .sd-1-4-1-prose table {
794
798
  all: unset;
795
799
  display: table;
796
800
  border-collapse: collapse;
@@ -799,13 +803,13 @@ Used for divider, teaser, container, ... */;
799
803
  border-spacing: var(--tw-border-spacing-x) var(--tw-border-spacing-y);
800
804
  }
801
805
 
802
- .sd-1-3-2-table thead tr:first-of-type, .sd-1-3-2-table tfoot tr:first-of-type, .sd-1-3-2-prose table thead tr:first-of-type, .sd-1-3-2-prose table tfoot tr:first-of-type {
806
+ .sd-1-4-1-table thead tr:first-of-type, .sd-1-4-1-table tfoot tr:first-of-type, .sd-1-4-1-prose table thead tr:first-of-type, .sd-1-4-1-prose table tfoot tr:first-of-type {
803
807
  position: relative;
804
808
  }
805
809
 
806
810
  /* plop:style */
807
811
 
808
- .sd-1-3-2-prose {
812
+ .sd-1-4-1-prose {
809
813
  /* Optimize for reading. */
810
814
  max-width: 80ch;
811
815
  text-align: left;
@@ -813,67 +817,67 @@ Used for divider, teaser, container, ... */;
813
817
 
814
818
  /* Add default spacings */
815
819
 
816
- .sd-1-3-2-prose > *:not(:first-child) {
820
+ .sd-1-4-1-prose > *:not(:first-child) {
817
821
  margin-top: var(--sd-spacing-4, 1rem) /* 16px */;
818
822
  }
819
823
 
820
824
  /* First element has no margin-top */
821
825
 
822
- .sd-1-3-2-prose > *:first-child {
826
+ .sd-1-4-1-prose > *:first-child {
823
827
  margin-top: var(--sd-spacing-0, 0px) /* No spacing (manually added) */;
824
828
  }
825
829
 
826
830
  /* headings after a heading have a smaller margin-top */
827
831
 
828
- .sd-1-3-2-prose > :is(h1, h2, h3, h4, h5):not(#_) + :is(h1, h2, h3, h4, h5) {
832
+ .sd-1-4-1-prose > :is(h1, h2, h3, h4, h5):not(#_) + :is(h1, h2, h3, h4, h5) {
829
833
  /* :not(#_) is a hack to raise specifity, see https://stackoverflow.com/a/61781795 */
830
834
  margin-top: var(--sd-spacing-2, 0.5rem) /* 8px */;
831
835
  }
832
836
 
833
837
  /* Headlines after other non-headlines have a larger margin-top */
834
838
 
835
- .sd-1-3-2-prose > *:not(:is(h1, h2, h3, h4, h5)) + :is(h1, h2, h3, h4, h5):not(#_) {
839
+ .sd-1-4-1-prose > *:not(:is(h1, h2, h3, h4, h5)) + :is(h1, h2, h3, h4, h5):not(#_) {
836
840
  margin-top: var(--sd-spacing-8, 2rem) /* 32px */;
837
841
  }
838
842
 
839
843
  /* Images and figures lead to a bigger margin-top for the next element */
840
844
 
841
- .sd-1-3-2-prose > figure + *:not(#_),
842
- .sd-1-3-2-prose > img + *:not(#_) {
845
+ .sd-1-4-1-prose > figure + *:not(#_),
846
+ .sd-1-4-1-prose > img + *:not(#_) {
843
847
  margin-top: var(--sd-spacing-6, 1.5rem) /* 24px */;
844
848
  }
845
849
 
846
850
  /* Add styles for elements that are not based on existing CSS styles */
847
851
 
848
- .sd-1-3-2-prose hr {
852
+ .sd-1-4-1-prose hr {
849
853
  height: var(--sd-spacing-0, 0px) /* No spacing (manually added) */;
850
854
  border-top-width: 1px;
851
855
  --tw-border-opacity: 1;
852
856
  border-color: rgb(var(--sd-color-neutral-500, 174 174 174) / var(--tw-border-opacity, 1)) /* Used for disabled state */;
853
857
  }
854
858
 
855
- .sd-1-3-2-prose pre {
859
+ .sd-1-4-1-prose pre {
856
860
  overflow: auto;
857
861
  }
858
862
 
859
- .sd-1-3-2-prose blockquote,
860
- .sd-1-3-2-prose blockquote > * {
863
+ .sd-1-4-1-prose blockquote,
864
+ .sd-1-4-1-prose blockquote > * {
861
865
  font-size: var(--sd-font-size-xl, 1.5rem) /* 24px */;
862
866
  }
863
867
 
864
- .sd-1-3-2-prose blockquote:has(*) *:first-child::before, .sd-1-3-2-prose blockquote:not(:has(*))::before {
868
+ .sd-1-4-1-prose blockquote:has(*) *:first-child::before, .sd-1-4-1-prose blockquote:not(:has(*))::before {
865
869
  content: open-quote;
866
870
  display: inline;
867
871
  }
868
872
 
869
- .sd-1-3-2-prose blockquote:has(*) *:first-child::after, .sd-1-3-2-prose blockquote:not(:has(*))::after {
873
+ .sd-1-4-1-prose blockquote:has(*) *:first-child::after, .sd-1-4-1-prose blockquote:not(:has(*))::after {
870
874
  content: close-quote;
871
875
  display: inline;
872
876
  }
873
877
 
874
878
  /* Fixes for other elements */
875
879
 
876
- .sd-1-3-2-prose > :is(ul, ol):not(#_) {
880
+ .sd-1-4-1-prose > :is(ul, ol):not(#_) {
877
881
  /* ul and ol have padding that has to be reset */
878
882
  padding-top: var(--sd-spacing-0, 0px) /* No spacing (manually added) */;
879
883
  padding-bottom: var(--sd-spacing-0, 0px) /* No spacing (manually added) */;
@@ -881,18 +885,18 @@ Used for divider, teaser, container, ... */;
881
885
 
882
886
  /* Inverted styles */
883
887
 
884
- .sd-1-3-2-prose--inverted hr {
888
+ .sd-1-4-1-prose--inverted hr {
885
889
  --tw-border-opacity: 1;
886
890
  border-color: rgb(var(--sd-color-white, 255 255 255) / var(--tw-border-opacity, 1)) /* Used for buttons, inverted focus state */;
887
891
  }
888
892
 
889
- .sd-1-3-2-prose--inverted pre {
893
+ .sd-1-4-1-prose--inverted pre {
890
894
 
891
895
  color: rgb(var(--sd-color-white, 255 255 255) / var(--tw-text-opacity, 1)) /* Inverted text color */;
892
896
  }
893
897
 
894
898
  /* Full width styles */
895
899
 
896
- .sd-1-3-2-prose--full-width {
900
+ .sd-1-4-1-prose--full-width {
897
901
  max-width: unset;
898
902
  }