m3-svelte 5.15.4 → 5.15.5

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 (23) hide show
  1. package/package/buttons/FAB.svelte +6 -4
  2. package/package/buttons/SplitButton.svelte +6 -4
  3. package/package/containers/BottomSheet.svelte +4 -2
  4. package/package/containers/Card.svelte +4 -2
  5. package/package/containers/Dialog.svelte +4 -2
  6. package/package/containers/Menu.svelte +4 -2
  7. package/package/containers/SnackbarItem.svelte +4 -2
  8. package/package/forms/Chip.svelte +4 -2
  9. package/package/forms/DateField.svelte +4 -2
  10. package/package/forms/DateFieldOutlined.svelte +4 -2
  11. package/package/forms/DatePickerDocked.svelte +4 -2
  12. package/package/forms/LinearProgressIndeterminate.svelte +4 -2
  13. package/package/forms/Select.svelte +5 -3
  14. package/package/forms/SelectOutlined.svelte +5 -3
  15. package/package/forms/Slider.svelte +6 -4
  16. package/package/forms/Switch.svelte +5 -3
  17. package/package/forms/TextField.svelte +8 -3
  18. package/package/forms/TextFieldMultiline.svelte +8 -3
  19. package/package/forms/TextFieldOutlined.svelte +8 -6
  20. package/package/forms/TextFieldOutlinedMultiline.svelte +8 -6
  21. package/package/misc/recommended-styles.css +4 -2
  22. package/package/misc/styles.css +121 -121
  23. package/package.json +1 -1
package/package/buttons/FAB.svelte CHANGED
@@ -51,10 +51,12 @@
51
51
  </button>
52
52
 
53
53
  <style>
54
- :root {
55
- --m3-fab-small-shape: var(--m3-util-rounding-small);
56
- --m3-fab-normal-shape: var(--m3-util-rounding-large);
57
- --m3-fab-large-shape: var(--m3-util-rounding-extra-large);
54
+ @layer tokens {
55
+ :root {
56
+ --m3-fab-small-shape: var(--m3-util-rounding-small);
57
+ --m3-fab-normal-shape: var(--m3-util-rounding-large);
58
+ --m3-fab-large-shape: var(--m3-util-rounding-extra-large);
59
+ }
58
60
  }
59
61
  button {
60
62
  display: inline-flex;
package/package/buttons/SplitButton.svelte CHANGED
@@ -50,10 +50,12 @@
50
50
  </div>
51
51
 
52
52
  <style>
53
- :root {
54
- --m3-split-button-outer-shape: 1.25rem;
55
- --m3-split-button-half-shape: var(--m3-util-rounding-medium);
56
- --m3-split-button-inner-shape: var(--m3-util-rounding-extra-small);
53
+ @layer tokens {
54
+ :root {
55
+ --m3-split-button-outer-shape: 1.25rem;
56
+ --m3-split-button-half-shape: var(--m3-util-rounding-medium);
57
+ --m3-split-button-inner-shape: var(--m3-util-rounding-extra-small);
58
+ }
57
59
  }
58
60
 
59
61
  .m3-container {
package/package/containers/BottomSheet.svelte CHANGED
@@ -90,8 +90,10 @@
90
90
  </dialog>
91
91
 
92
92
  <style>
93
- :root {
94
- --m3-bottom-sheet-shape: var(--m3-util-rounding-extra-large);
93
+ @layer tokens {
94
+ :root {
95
+ --m3-bottom-sheet-shape: var(--m3-util-rounding-extra-large);
96
+ }
95
97
  }
96
98
 
97
99
  .m3-container {
package/package/containers/Card.svelte CHANGED
@@ -27,8 +27,10 @@
27
27
  {/if}
28
28
 
29
29
  <style>
30
- :root {
31
- --m3-card-shape: var(--m3-util-rounding-medium);
30
+ @layer tokens {
31
+ :root {
32
+ --m3-card-shape: var(--m3-util-rounding-medium);
33
+ }
32
34
  }
33
35
 
34
36
  .m3-container {
package/package/containers/Dialog.svelte CHANGED
@@ -76,8 +76,10 @@
76
76
  </dialog>
77
77
 
78
78
  <style>
79
- :root {
80
- --m3-dialog-shape: var(--m3-util-rounding-extra-large);
79
+ @layer tokens {
80
+ :root {
81
+ --m3-dialog-shape: var(--m3-util-rounding-extra-large);
82
+ }
81
83
  }
82
84
  dialog {
83
85
  display: flex;
package/package/containers/Menu.svelte CHANGED
@@ -9,8 +9,10 @@
9
9
  </div>
10
10
 
11
11
  <style>
12
- :root {
13
- --m3-menu-shape: var(--m3-util-rounding-extra-small);
12
+ @layer tokens {
13
+ :root {
14
+ --m3-menu-shape: var(--m3-util-rounding-extra-small);
15
+ }
14
16
  }
15
17
  .m3-container {
16
18
  display: flex;
package/package/containers/SnackbarItem.svelte CHANGED
@@ -10,8 +10,10 @@
10
10
  </div>
11
11
 
12
12
  <style>
13
- :root {
14
- --m3-snackbar-shape: var(--m3-util-rounding-extra-small);
13
+ @layer tokens {
14
+ :root {
15
+ --m3-snackbar-shape: var(--m3-util-rounding-extra-small);
16
+ }
15
17
  }
16
18
  .m3-container {
17
19
  display: flex;
package/package/forms/Chip.svelte CHANGED
@@ -60,8 +60,10 @@
60
60
  {/if}
61
61
 
62
62
  <style>
63
- :root {
64
- --m3-chip-shape: var(--m3-util-rounding-small);
63
+ @layer tokens {
64
+ :root {
65
+ --m3-chip-shape: var(--m3-util-rounding-small);
66
+ }
65
67
  }
66
68
  .m3-container {
67
69
  display: flex;
package/package/forms/DateField.svelte CHANGED
@@ -111,8 +111,10 @@ opacity: ${Math.min(t * 3, 1)};`,
111
111
  margin-block-end: 1rem;
112
112
  }
113
113
 
114
- :root {
115
- --m3-datefield-shape: var(--m3-util-rounding-extra-small);
114
+ @layer tokens {
115
+ :root {
116
+ --m3-datefield-shape: var(--m3-util-rounding-extra-small);
117
+ }
116
118
  }
117
119
  .m3-container {
118
120
  position: relative;
package/package/forms/DateFieldOutlined.svelte CHANGED
@@ -116,8 +116,10 @@ opacity: ${Math.min(t * 3, 1)};`,
116
116
  want to customize the label's background?
117
117
  do this: <DateFieldOutlined --m3-util-background="rgb(var(--m3-scheme-surface-container))" />
118
118
  */
119
- :root {
120
- --m3-datefield-outlined-shape: var(--m3-util-rounding-extra-small);
119
+ @layer tokens {
120
+ :root {
121
+ --m3-datefield-outlined-shape: var(--m3-util-rounding-extra-small);
122
+ }
121
123
  }
122
124
  .m3-container {
123
125
  display: inline-flex;
package/package/forms/DatePickerDocked.svelte CHANGED
@@ -81,8 +81,10 @@
81
81
  </div>
82
82
 
83
83
  <style>
84
- :root {
85
- --m3-date-picker-shape: var(--m3-util-rounding-large);
84
+ @layer tokens {
85
+ :root {
86
+ --m3-date-picker-shape: var(--m3-util-rounding-large);
87
+ }
86
88
  }
87
89
 
88
90
  .m3-container {
package/package/forms/LinearProgressIndeterminate.svelte CHANGED
@@ -13,8 +13,10 @@
13
13
  </div>
14
14
 
15
15
  <style>
16
- :root {
17
- --m3-linear-progress-shape: var(--m3-util-rounding-full);
16
+ @layer tokens {
17
+ :root {
18
+ --m3-linear-progress-shape: var(--m3-util-rounding-full);
19
+ }
18
20
  }
19
21
  .m3-container {
20
22
  display: inline-flex;
package/package/forms/Select.svelte CHANGED
@@ -45,9 +45,11 @@
45
45
  </div>
46
46
 
47
47
  <style>
48
- :root {
49
- --m3-menu-shape: var(--m3-util-rounding-extra-small);
50
- --m3-field-filled-shape: var(--m3-util-rounding-extra-small);
48
+ @layer tokens {
49
+ :root {
50
+ --m3-menu-shape: var(--m3-util-rounding-extra-small);
51
+ --m3-field-filled-shape: var(--m3-util-rounding-extra-small);
52
+ }
51
53
  }
52
54
 
53
55
  .m3-container {
package/package/forms/SelectOutlined.svelte CHANGED
@@ -50,9 +50,11 @@
50
50
  want to customize the label's background?
51
51
  do this: <SelectOutlined --m3-util-background="rgb(var(--m3-scheme-surface-container))" />
52
52
  */
53
- :root {
54
- --m3-menu-shape: var(--m3-util-rounding-extra-small);
55
- --m3-field-outlined-shape: var(--m3-util-rounding-extra-small);
53
+ @layer tokens {
54
+ :root {
55
+ --m3-menu-shape: var(--m3-util-rounding-extra-small);
56
+ --m3-field-outlined-shape: var(--m3-util-rounding-extra-small);
57
+ }
56
58
  }
57
59
 
58
60
  .m3-container {
package/package/forms/Slider.svelte CHANGED
@@ -116,10 +116,12 @@
116
116
  </div>
117
117
 
118
118
  <style>
119
- :root {
120
- --m3-slider-track-out-shape: 0.5rem;
121
- --m3-slider-track-in-shape: 0.125rem;
122
- --m3-slider-handle-shape: var(--m3-util-rounding-full);
119
+ @layer tokens {
120
+ :root {
121
+ --m3-slider-track-out-shape: 0.5rem;
122
+ --m3-slider-track-in-shape: 0.125rem;
123
+ --m3-slider-handle-shape: var(--m3-util-rounding-full);
124
+ }
123
125
  }
124
126
 
125
127
  .m3-container {
package/package/forms/Switch.svelte CHANGED
@@ -68,9 +68,11 @@
68
68
  </div>
69
69
 
70
70
  <style>
71
- :root {
72
- --m3-switch-track-shape: var(--m3-util-rounding-full);
73
- --m3-switch-handle-shape: var(--m3-util-rounding-full);
71
+ @layer tokens {
72
+ :root {
73
+ --m3-switch-track-shape: var(--m3-util-rounding-full);
74
+ --m3-switch-handle-shape: var(--m3-util-rounding-full);
75
+ }
74
76
  }
75
77
  .m3-container {
76
78
  display: inline-flex;
package/package/forms/TextField.svelte CHANGED
@@ -61,9 +61,14 @@
61
61
  </div>
62
62
 
63
63
  <style>
64
- :root {
65
- /* "textfield" is deprecated */
66
- --m3-field-filled-shape: var(--m3-textfield-filled-shape, var(--m3-util-rounding-extra-small));
64
+ @layer tokens {
65
+ :root {
66
+ /* "textfield" is deprecated */
67
+ --m3-field-filled-shape: var(
68
+ --m3-textfield-filled-shape,
69
+ var(--m3-util-rounding-extra-small)
70
+ );
71
+ }
67
72
  }
68
73
 
69
74
  .m3-container {
package/package/forms/TextFieldMultiline.svelte CHANGED
@@ -56,9 +56,14 @@
56
56
  </div>
57
57
 
58
58
  <style>
59
- :root {
60
- /* "textfield" is deprecated */
61
- --m3-field-filled-shape: var(--m3-textfield-filled-shape, var(--m3-util-rounding-extra-small));
59
+ @layer tokens {
60
+ :root {
61
+ /* "textfield" is deprecated */
62
+ --m3-field-filled-shape: var(
63
+ --m3-textfield-filled-shape,
64
+ var(--m3-util-rounding-extra-small)
65
+ );
66
+ }
62
67
  }
63
68
  .m3-container {
64
69
  display: inline-flex;
package/package/forms/TextFieldOutlined.svelte CHANGED
@@ -65,12 +65,14 @@
65
65
  want to customize the label's background?
66
66
  do this: <TextFieldOutlined --m3-util-background="rgb(var(--m3-scheme-surface-container))" />
67
67
  */
68
- :root {
69
- /* "textfield" is deprecated */
70
- --m3-field-outlined-shape: var(
71
- --m3-textfield-outlined-shape,
72
- var(--m3-util-rounding-extra-small)
73
- );
68
+ @layer tokens {
69
+ :root {
70
+ /* "textfield" is deprecated */
71
+ --m3-field-outlined-shape: var(
72
+ --m3-textfield-outlined-shape,
73
+ var(--m3-util-rounding-extra-small)
74
+ );
75
+ }
74
76
  }
75
77
  .m3-container {
76
78
  display: inline-flex;
package/package/forms/TextFieldOutlinedMultiline.svelte CHANGED
@@ -60,12 +60,14 @@
60
60
  want to customize the label's background?
61
61
  do this: <TextFieldOutlinedMultiline --m3-util-background="rgb(var(--m3-scheme-surface-container))" />
62
62
  */
63
- :root {
64
- /* "textfield" is deprecated */
65
- --m3-field-outlined-shape: var(
66
- --m3-textfield-outlined-shape,
67
- var(--m3-util-rounding-extra-small)
68
- );
63
+ @layer tokens {
64
+ :root {
65
+ /* "textfield" is deprecated */
66
+ --m3-field-outlined-shape: var(
67
+ --m3-textfield-outlined-shape,
68
+ var(--m3-util-rounding-extra-small)
69
+ );
70
+ }
69
71
  }
70
72
  .m3-container {
71
73
  display: inline-flex;
package/package/misc/recommended-styles.css CHANGED
@@ -1,5 +1,7 @@
1
- :root {
2
- --m3-util-refocus: refocus-outward 0.6s cubic-bezier(0.14, 5.63, 0.4, 0.5) forwards;
1
+ @layer tokens {
2
+ :root {
3
+ --m3-util-refocus: refocus-outward 0.6s cubic-bezier(0.14, 5.63, 0.4, 0.5) forwards;
4
+ }
3
5
  }
4
6
  :focus-visible:not(.focus-inset, .focus-none) {
5
7
  animation: var(--m3-util-refocus);
package/package/misc/styles.css CHANGED
@@ -8,7 +8,7 @@
8
8
  inherits: true;
9
9
  initial-value: 0;
10
10
  }
11
- @layer theme {
11
+ @layer tokens {
12
12
  :root {
13
13
  /* Needed for elevation to work */
14
14
  --m3-util-elevation-0: none;
@@ -165,127 +165,127 @@
165
165
 
166
166
  accent-color: rgb(var(--m3-scheme-primary));
167
167
  }
168
- .m3-font-display-large,
169
- .m3-font-display-medium,
170
- .m3-font-display-small {
171
- font-family: var(--m3-font-display);
172
- }
173
- .m3-font-headline-large,
174
- .m3-font-headline-medium,
175
- .m3-font-headline-small {
176
- font-family: var(--m3-font-headline);
177
- }
178
- .m3-font-title-large,
179
- .m3-font-title-medium,
180
- .m3-font-title-small {
181
- font-family: var(--m3-font-title);
182
- }
183
- .m3-font-label-large,
184
- .m3-font-label-medium,
185
- .m3-font-label-small {
186
- font-family: var(--m3-font-label);
187
- }
188
- .m3-font-body-large,
189
- .m3-font-body-medium,
190
- .m3-font-body-small {
191
- font-family: var(--m3-font-body);
192
- }
193
- /* As the largest text on the screen, display styles are reserved for short, important text or numerals. */
194
- .m3-font-display-large {
195
- font-size: var(--m3-font-display-large-size);
196
- line-height: var(--m3-font-display-large-height);
197
- letter-spacing: var(--m3-font-display-large-tracking);
198
- font-weight: var(--m3-font-display-large-weight);
199
- }
200
- .m3-font-display-medium {
201
- font-size: var(--m3-font-display-medium-size);
202
- line-height: var(--m3-font-display-medium-height);
203
- letter-spacing: var(--m3-font-display-medium-tracking);
204
- font-weight: var(--m3-font-display-medium-weight);
205
- }
206
- .m3-font-display-small {
207
- font-size: var(--m3-font-display-small-size);
208
- line-height: var(--m3-font-display-small-height);
209
- letter-spacing: var(--m3-font-display-small-tracking);
210
- font-weight: var(--m3-font-display-small-weight);
211
- }
212
- /* Headlines are best-suited for short, high-emphasis text on smaller screens. */
213
- .m3-font-headline-large {
214
- font-size: var(--m3-font-headline-large-size);
215
- line-height: var(--m3-font-headline-large-height);
216
- letter-spacing: var(--m3-font-headline-large-tracking);
217
- font-weight: var(--m3-font-headline-large-weight);
218
- }
219
- .m3-font-headline-medium {
220
- font-size: var(--m3-font-headline-medium-size);
221
- line-height: var(--m3-font-headline-medium-height);
222
- letter-spacing: var(--m3-font-headline-medium-tracking);
223
- font-weight: var(--m3-font-headline-medium-weight);
224
- }
225
- .m3-font-headline-small {
226
- font-size: var(--m3-font-headline-small-size);
227
- line-height: var(--m3-font-headline-small-height);
228
- letter-spacing: var(--m3-font-headline-small-tracking);
229
- font-weight: var(--m3-font-headline-small-weight);
230
- }
231
- /* Titles are smaller than headline styles, and should be used for medium-emphasis text that remains relatively short. */
232
- .m3-font-title-large {
233
- font-size: var(--m3-font-title-large-size);
234
- line-height: var(--m3-font-title-large-height);
235
- letter-spacing: var(--m3-font-title-large-tracking);
236
- font-weight: var(--m3-font-title-large-weight);
237
- }
238
- .m3-font-title-medium {
239
- font-size: var(--m3-font-title-medium-size);
240
- line-height: var(--m3-font-title-medium-height);
241
- letter-spacing: var(--m3-font-title-medium-tracking);
242
- font-weight: var(--m3-font-title-medium-weight);
243
- }
244
- .m3-font-title-small {
245
- font-size: var(--m3-font-title-small-size);
246
- line-height: var(--m3-font-title-small-height);
247
- letter-spacing: var(--m3-font-title-small-tracking);
248
- font-weight: var(--m3-font-title-small-weight);
249
- }
250
- /* Label styles are smaller, utilitarian styles, used for things like the text inside components
168
+ }
169
+ .m3-font-display-large,
170
+ .m3-font-display-medium,
171
+ .m3-font-display-small {
172
+ font-family: var(--m3-font-display);
173
+ }
174
+ .m3-font-headline-large,
175
+ .m3-font-headline-medium,
176
+ .m3-font-headline-small {
177
+ font-family: var(--m3-font-headline);
178
+ }
179
+ .m3-font-title-large,
180
+ .m3-font-title-medium,
181
+ .m3-font-title-small {
182
+ font-family: var(--m3-font-title);
183
+ }
184
+ .m3-font-label-large,
185
+ .m3-font-label-medium,
186
+ .m3-font-label-small {
187
+ font-family: var(--m3-font-label);
188
+ }
189
+ .m3-font-body-large,
190
+ .m3-font-body-medium,
191
+ .m3-font-body-small {
192
+ font-family: var(--m3-font-body);
193
+ }
194
+ /* As the largest text on the screen, display styles are reserved for short, important text or numerals. */
195
+ .m3-font-display-large {
196
+ font-size: var(--m3-font-display-large-size);
197
+ line-height: var(--m3-font-display-large-height);
198
+ letter-spacing: var(--m3-font-display-large-tracking);
199
+ font-weight: var(--m3-font-display-large-weight);
200
+ }
201
+ .m3-font-display-medium {
202
+ font-size: var(--m3-font-display-medium-size);
203
+ line-height: var(--m3-font-display-medium-height);
204
+ letter-spacing: var(--m3-font-display-medium-tracking);
205
+ font-weight: var(--m3-font-display-medium-weight);
206
+ }
207
+ .m3-font-display-small {
208
+ font-size: var(--m3-font-display-small-size);
209
+ line-height: var(--m3-font-display-small-height);
210
+ letter-spacing: var(--m3-font-display-small-tracking);
211
+ font-weight: var(--m3-font-display-small-weight);
212
+ }
213
+ /* Headlines are best-suited for short, high-emphasis text on smaller screens. */
214
+ .m3-font-headline-large {
215
+ font-size: var(--m3-font-headline-large-size);
216
+ line-height: var(--m3-font-headline-large-height);
217
+ letter-spacing: var(--m3-font-headline-large-tracking);
218
+ font-weight: var(--m3-font-headline-large-weight);
219
+ }
220
+ .m3-font-headline-medium {
221
+ font-size: var(--m3-font-headline-medium-size);
222
+ line-height: var(--m3-font-headline-medium-height);
223
+ letter-spacing: var(--m3-font-headline-medium-tracking);
224
+ font-weight: var(--m3-font-headline-medium-weight);
225
+ }
226
+ .m3-font-headline-small {
227
+ font-size: var(--m3-font-headline-small-size);
228
+ line-height: var(--m3-font-headline-small-height);
229
+ letter-spacing: var(--m3-font-headline-small-tracking);
230
+ font-weight: var(--m3-font-headline-small-weight);
231
+ }
232
+ /* Titles are smaller than headline styles, and should be used for medium-emphasis text that remains relatively short. */
233
+ .m3-font-title-large {
234
+ font-size: var(--m3-font-title-large-size);
235
+ line-height: var(--m3-font-title-large-height);
236
+ letter-spacing: var(--m3-font-title-large-tracking);
237
+ font-weight: var(--m3-font-title-large-weight);
238
+ }
239
+ .m3-font-title-medium {
240
+ font-size: var(--m3-font-title-medium-size);
241
+ line-height: var(--m3-font-title-medium-height);
242
+ letter-spacing: var(--m3-font-title-medium-tracking);
243
+ font-weight: var(--m3-font-title-medium-weight);
244
+ }
245
+ .m3-font-title-small {
246
+ font-size: var(--m3-font-title-small-size);
247
+ line-height: var(--m3-font-title-small-height);
248
+ letter-spacing: var(--m3-font-title-small-tracking);
249
+ font-weight: var(--m3-font-title-small-weight);
250
+ }
251
+ /* Label styles are smaller, utilitarian styles, used for things like the text inside components
251
252
  or for very small text in the content body, such as captions. */
252
- .m3-font-label-large {
253
- font-size: var(--m3-font-label-large-size);
254
- line-height: var(--m3-font-label-large-height);
255
- letter-spacing: var(--m3-font-label-large-tracking);
256
- font-weight: var(--m3-font-label-large-weight);
257
- }
258
- .m3-font-label-medium {
259
- font-size: var(--m3-font-label-medium-size);
260
- line-height: var(--m3-font-label-medium-height);
261
- letter-spacing: var(--m3-font-label-medium-tracking);
262
- font-weight: var(--m3-font-label-medium-weight);
263
- }
264
- .m3-font-label-small {
265
- font-size: var(--m3-font-label-small-size);
266
- line-height: var(--m3-font-label-small-height);
267
- letter-spacing: var(--m3-font-label-small-tracking);
268
- font-weight: var(--m3-font-label-small-weight);
269
- }
270
- /* Body styles are used for longer passages of text in your app. */
271
- .m3-font-body-large {
272
- font-size: var(--m3-font-body-large-size);
273
- line-height: var(--m3-font-body-large-height);
274
- letter-spacing: var(--m3-font-body-large-tracking);
275
- font-weight: var(--m3-font-body-large-weight);
276
- }
277
- .m3-font-body-medium {
278
- font-size: var(--m3-font-body-medium-size);
279
- line-height: var(--m3-font-body-medium-height);
280
- letter-spacing: var(--m3-font-body-medium-tracking);
281
- font-weight: var(--m3-font-body-medium-weight);
282
- }
283
- .m3-font-body-small {
284
- font-size: var(--m3-font-body-small-size);
285
- line-height: var(--m3-font-body-small-height);
286
- letter-spacing: var(--m3-font-body-small-tracking);
287
- font-weight: var(--m3-font-body-small-weight);
288
- }
253
+ .m3-font-label-large {
254
+ font-size: var(--m3-font-label-large-size);
255
+ line-height: var(--m3-font-label-large-height);
256
+ letter-spacing: var(--m3-font-label-large-tracking);
257
+ font-weight: var(--m3-font-label-large-weight);
258
+ }
259
+ .m3-font-label-medium {
260
+ font-size: var(--m3-font-label-medium-size);
261
+ line-height: var(--m3-font-label-medium-height);
262
+ letter-spacing: var(--m3-font-label-medium-tracking);
263
+ font-weight: var(--m3-font-label-medium-weight);
264
+ }
265
+ .m3-font-label-small {
266
+ font-size: var(--m3-font-label-small-size);
267
+ line-height: var(--m3-font-label-small-height);
268
+ letter-spacing: var(--m3-font-label-small-tracking);
269
+ font-weight: var(--m3-font-label-small-weight);
270
+ }
271
+ /* Body styles are used for longer passages of text in your app. */
272
+ .m3-font-body-large {
273
+ font-size: var(--m3-font-body-large-size);
274
+ line-height: var(--m3-font-body-large-height);
275
+ letter-spacing: var(--m3-font-body-large-tracking);
276
+ font-weight: var(--m3-font-body-large-weight);
277
+ }
278
+ .m3-font-body-medium {
279
+ font-size: var(--m3-font-body-medium-size);
280
+ line-height: var(--m3-font-body-medium-height);
281
+ letter-spacing: var(--m3-font-body-medium-tracking);
282
+ font-weight: var(--m3-font-body-medium-weight);
283
+ }
284
+ .m3-font-body-small {
285
+ font-size: var(--m3-font-body-small-size);
286
+ line-height: var(--m3-font-body-small-height);
287
+ letter-spacing: var(--m3-font-body-small-tracking);
288
+ font-weight: var(--m3-font-body-small-weight);
289
289
  }
290
290
  @layer base {
291
291
  /* Reset a few things */
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "m3-svelte",
3
- "version": "5.15.4",
3
+ "version": "5.15.5",
4
4
  "license": "Apache-2.0 OR GPL-3.0-only",
5
5
  "repository": "KTibow/m3-svelte",
6
6
  "author": {