m3-svelte 5.15.1 → 5.15.3

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 (11) hide show
  1. package/package/buttons/Button.svelte +25 -25
  2. package/package/forms/Select.svelte +2 -4
  3. package/package/forms/SelectOutlined.svelte +1 -1
  4. package/package/forms/Slider.svelte +7 -4
  5. package/package/forms/TextField.svelte +3 -3
  6. package/package/forms/TextFieldMultiline.svelte +3 -3
  7. package/package/forms/TextFieldOutlined.svelte +3 -3
  8. package/package/forms/TextFieldOutlinedMultiline.svelte +3 -3
  9. package/package/misc/styles.css +142 -68
  10. package/package/nav/NavCMLXItem.svelte +8 -8
  11. package/package.json +1 -1
package/package/buttons/Button.svelte CHANGED
@@ -61,11 +61,11 @@
61
61
  --m3-button-shape: 1rem;
62
62
  --m3-button-square-shape: var(--m3-util-rounding-medium);
63
63
  --m3-button-pressed-shape: var(--m3-util-rounding-small);
64
- font-family: var(--m3-font-label, var(--m3-font));
65
- font-size: var(--m3-font-label-large-size, 0.875rem);
66
- line-height: var(--m3-font-label-large-height, 1.429);
67
- letter-spacing: var(--m3-font-label-large-tracking, 0.006rem);
68
- font-weight: var(--m3-font-label-large-weight, 500);
64
+ font-family: var(--m3-font-label);
65
+ font-size: var(--m3-font-label-large-size);
66
+ line-height: var(--m3-font-label-large-height);
67
+ letter-spacing: var(--m3-font-label-large-tracking);
68
+ font-weight: var(--m3-font-label-large-weight);
69
69
  }
70
70
 
71
71
  .m3-container.s {
@@ -75,11 +75,11 @@
75
75
  --m3-button-shape: 1.25rem;
76
76
  --m3-button-square-shape: var(--m3-util-rounding-medium);
77
77
  --m3-button-pressed-shape: var(--m3-util-rounding-small);
78
- font-family: var(--m3-font-label, var(--m3-font));
79
- font-size: var(--m3-font-label-large-size, 0.875rem);
80
- line-height: var(--m3-font-label-large-height, 1.429);
81
- letter-spacing: var(--m3-font-label-large-tracking, 0.006rem);
82
- font-weight: var(--m3-font-label-large-weight, 500);
78
+ font-family: var(--m3-font-label);
79
+ font-size: var(--m3-font-label-large-size);
80
+ line-height: var(--m3-font-label-large-height);
81
+ letter-spacing: var(--m3-font-label-large-tracking);
82
+ font-weight: var(--m3-font-label-large-weight);
83
83
  }
84
84
 
85
85
  .m3-container.m {
@@ -89,11 +89,11 @@
89
89
  --m3-button-shape: 1.75rem;
90
90
  --m3-button-square-shape: var(--m3-util-rounding-large);
91
91
  --m3-button-pressed-shape: var(--m3-util-rounding-medium);
92
- font-family: var(--m3-font-title, var(--m3-font));
93
- font-size: var(--m3-font-title-medium-size, 1rem);
94
- line-height: var(--m3-font-title-medium-height, 1.5);
95
- letter-spacing: var(--m3-font-title-medium-tracking, 0);
96
- font-weight: var(--m3-font-title-medium-weight, 500);
92
+ font-family: var(--m3-font-title);
93
+ font-size: var(--m3-font-title-medium-size);
94
+ line-height: var(--m3-font-title-medium-height);
95
+ letter-spacing: var(--m3-font-title-medium-tracking);
96
+ font-weight: var(--m3-font-title-medium-weight);
97
97
  }
98
98
 
99
99
  .m3-container.l {
@@ -103,11 +103,11 @@
103
103
  --m3-button-shape: 3rem;
104
104
  --m3-button-square-shape: var(--m3-util-rounding-extra-large);
105
105
  --m3-button-pressed-shape: var(--m3-util-rounding-large);
106
- font-family: var(--m3-font-headline, var(--m3-font));
107
- font-size: var(--m3-font-headline-small-size, 1.5rem);
108
- line-height: var(--m3-font-headline-small-height, 1.333);
109
- letter-spacing: var(--m3-font-headline-small-tracking, 0);
110
- font-weight: var(--m3-font-headline-small-weight, 400);
106
+ font-family: var(--m3-font-headline);
107
+ font-size: var(--m3-font-headline-small-size);
108
+ line-height: var(--m3-font-headline-small-height);
109
+ letter-spacing: var(--m3-font-headline-small-tracking);
110
+ font-weight: var(--m3-font-headline-small-weight);
111
111
  }
112
112
 
113
113
  .m3-container.xl {
@@ -117,11 +117,11 @@
117
117
  --m3-button-shape: 4.25rem;
118
118
  --m3-button-square-shape: var(--m3-util-rounding-extra-large);
119
119
  --m3-button-pressed-shape: var(--m3-util-rounding-large);
120
- font-family: var(--m3-font-headline, var(--m3-font));
121
- font-size: var(--m3-font-headline-large-size, 2rem);
122
- line-height: var(--m3-font-headline-large-height, 1.25);
123
- letter-spacing: var(--m3-font-headline-large-tracking, 0);
124
- font-weight: var(--m3-font-headline-large-weight, 400);
120
+ font-family: var(--m3-font-headline);
121
+ font-size: var(--m3-font-headline-large-size);
122
+ line-height: var(--m3-font-headline-large-height);
123
+ letter-spacing: var(--m3-font-headline-large-tracking);
124
+ font-weight: var(--m3-font-headline-large-weight);
125
125
  }
126
126
 
127
127
  .m3-container {
package/package/forms/Select.svelte CHANGED
@@ -88,9 +88,7 @@
88
88
  display: flex;
89
89
  align-items: center;
90
90
  height: calc(3.5rem + var(--m3-util-density-term));
91
- padding-top: calc(
92
- var(--m3-font-body-small-size, 0.75rem) * var(--m3-font-body-small-height, 1.333)
93
- );
91
+ padding-top: calc(var(--m3-font-body-small-size) * var(--m3-font-body-small-height));
94
92
  padding-inline: 1rem;
95
93
 
96
94
  border-radius: var(--m3-field-filled-shape) var(--m3-field-filled-shape) 0 0;
@@ -170,7 +168,7 @@
170
168
  padding-block: calc(
171
169
  (
172
170
  3rem + var(--m3-util-density-term) -
173
- (var(--m3-font-body-large-size, 1rem) * var(--m3-font-body-large-height, 1.5))
171
+ (var(--m3-font-body-large-size) * var(--m3-font-body-large-height))
174
172
  ) /
175
173
  2
176
174
  );
package/package/forms/SelectOutlined.svelte CHANGED
@@ -175,7 +175,7 @@
175
175
  padding-block: calc(
176
176
  (
177
177
  3rem + var(--m3-util-density-term) -
178
- (var(--m3-font-body-large-size, 1rem) * var(--m3-font-body-large-height, 1.5))
178
+ (var(--m3-font-body-large-size) * var(--m3-font-body-large-height))
179
179
  ) /
180
180
  2
181
181
  );
package/package/forms/Slider.svelte CHANGED
@@ -38,7 +38,9 @@
38
38
  } & Omit<HTMLInputAttributes, "size"> = $props();
39
39
  // @ts-expect-error deprecated backwards compatibility with ticks
40
40
  let stops = $derived(extra.ticks ? true : _stops);
41
- let containerWidth = $state(600);
41
+ let offsetWidth = $state(600);
42
+ let offsetHeight = $state(600);
43
+ let inlineSize = $derived(vertical ? offsetHeight : offsetWidth);
42
44
 
43
45
  const valueDisplayed = new Spring(value, { stiffness: 0.3, damping: 1 });
44
46
  const updateValue = (e: Event & { currentTarget: EventTarget & HTMLInputElement }) => {
@@ -72,7 +74,8 @@
72
74
  <div
73
75
  class="m3-container {size} {vertical ? 'vertical' : ''}"
74
76
  style:--handle={handle - 0.5}
75
- bind:offsetWidth={containerWidth}
77
+ bind:offsetWidth
78
+ bind:offsetHeight
76
79
  >
77
80
  <input
78
81
  type="range"
@@ -97,13 +100,13 @@
97
100
  {#if leadingIcon}
98
101
  <Icon
99
102
  icon={leadingIcon}
100
- class={"leading" + (containerWidth * handle < (size == "xl" ? 48 : 40) ? " pop" : "")}
103
+ class={"leading" + (inlineSize * handle < (size == "xl" ? 48 : 40) ? " pop" : "")}
101
104
  />
102
105
  {/if}
103
106
  {#if trailingIcon}
104
107
  <Icon
105
108
  icon={trailingIcon}
106
- class={"trailing" + (containerWidth * (1 - handle) < (size == "xl" ? 48 : 40) ? " pop" : "")}
109
+ class={"trailing" + (inlineSize * (1 - handle) < (size == "xl" ? 48 : 40) ? " pop" : "")}
107
110
  />
108
111
  {/if}
109
112
  <div class="handle"></div>
package/package/forms/TextField.svelte CHANGED
@@ -103,9 +103,9 @@
103
103
  &:is(input:focus ~ label, input:not(:placeholder-shown) ~ label) {
104
104
  top: 0.5rem;
105
105
  translate: 0 0;
106
- font-size: var(--m3-font-body-small-size, 0.75rem);
107
- line-height: var(--m3-font-body-small-height, 1.333);
108
- letter-spacing: var(--m3-font-body-small-tracking, 0.025rem);
106
+ font-size: var(--m3-font-body-small-size);
107
+ line-height: var(--m3-font-body-small-height);
108
+ letter-spacing: var(--m3-font-body-small-tracking);
109
109
  }
110
110
  pointer-events: none;
111
111
  transition:
package/package/forms/TextFieldMultiline.svelte CHANGED
@@ -98,9 +98,9 @@
98
98
  &:is(textarea:focus ~ label, textarea:not(:placeholder-shown) ~ label) {
99
99
  top: 0.5rem;
100
100
  translate: 0 0;
101
- font-size: var(--m3-font-body-small-size, 0.75rem);
102
- line-height: var(--m3-font-body-small-height, 1.333);
103
- letter-spacing: var(--m3-font-body-small-tracking, 0.025rem);
101
+ font-size: var(--m3-font-body-small-size);
102
+ line-height: var(--m3-font-body-small-height);
103
+ letter-spacing: var(--m3-font-body-small-tracking);
104
104
  }
105
105
  pointer-events: none;
106
106
  transition:
package/package/forms/TextFieldOutlined.svelte CHANGED
@@ -110,9 +110,9 @@
110
110
  }
111
111
  &:is(input:focus ~ label, input:not(:placeholder-shown) ~ label) {
112
112
  top: 0;
113
- font-size: var(--m3-font-body-small-size, 0.75rem);
114
- line-height: var(--m3-font-body-small-height, 1.333);
115
- letter-spacing: var(--m3-font-body-small-tracking, 0.025rem);
113
+ font-size: var(--m3-font-body-small-size);
114
+ line-height: var(--m3-font-body-small-height);
115
+ letter-spacing: var(--m3-font-body-small-tracking);
116
116
  }
117
117
  pointer-events: none;
118
118
  transition:
package/package/forms/TextFieldOutlinedMultiline.svelte CHANGED
@@ -106,9 +106,9 @@
106
106
  }
107
107
  &:is(textarea:focus ~ label, textarea:not(:placeholder-shown) ~ label) {
108
108
  top: 0;
109
- font-size: var(--m3-font-body-small-size, 0.75rem);
110
- line-height: var(--m3-font-body-small-height, 1.333);
111
- letter-spacing: var(--m3-font-body-small-tracking, 0.025rem);
109
+ font-size: var(--m3-font-body-small-size);
110
+ line-height: var(--m3-font-body-small-height);
111
+ letter-spacing: var(--m3-font-body-small-tracking);
112
112
  }
113
113
  pointer-events: none;
114
114
  transition:
package/package/misc/styles.css CHANGED
@@ -1,5 +1,15 @@
1
- /* Needed for elevation to work */
1
+ @property --m3-util-bottom-offset {
2
+ syntax: "<length>";
3
+ inherits: true;
4
+ initial-value: 0;
5
+ }
6
+ @property --m3-util-density {
7
+ syntax: "<number>";
8
+ inherits: true;
9
+ initial-value: 0;
10
+ }
2
11
  :root {
12
+ /* Needed for elevation to work */
3
13
  --m3-util-elevation-0: none;
4
14
  --m3-util-elevation-1:
5
15
  /* Spot */
@@ -19,8 +29,6 @@
19
29
  0px 8px 12px 6px rgb(var(--m3-scheme-shadow) / 0.15);
20
30
 
21
31
  /* Sizing */
22
- --m3-util-bottom-offset: 0;
23
- --m3-util-density: 0;
24
32
  --m3-util-density-term: calc(var(--m3-util-density) * 0.25rem);
25
33
 
26
34
  /* Shapes */
@@ -33,8 +41,74 @@
33
41
  --m3-util-rounding-full: calc(infinity * 1px);
34
42
  --m3-util-optical-centering-coefficient: 0.11;
35
43
 
44
+ /* Typography */
36
45
  --m3-font: Roboto, system-ui;
37
46
  --m3-font-mono: "Google Sans Code", "Roboto Mono", monospace;
47
+ --m3-font-display: var(--m3-font);
48
+ --m3-font-headline: var(--m3-font);
49
+ --m3-font-title: var(--m3-font);
50
+ --m3-font-label: var(--m3-font);
51
+ --m3-font-body: var(--m3-font);
52
+ --m3-font-display-large-size: 3.563rem;
53
+ --m3-font-display-large-height: 1.123;
54
+ --m3-font-display-large-tracking: 0;
55
+ --m3-font-display-large-weight: 400;
56
+ --m3-font-display-medium-size: 2.813rem;
57
+ --m3-font-display-medium-height: 1.156;
58
+ --m3-font-display-medium-tracking: 0;
59
+ --m3-font-display-medium-weight: 400;
60
+ --m3-font-display-small-size: 2.25rem;
61
+ --m3-font-display-small-height: 1.222;
62
+ --m3-font-display-small-tracking: 0;
63
+ --m3-font-display-small-weight: 400;
64
+ --m3-font-headline-large-size: 2rem;
65
+ --m3-font-headline-large-height: 1.25;
66
+ --m3-font-headline-large-tracking: 0;
67
+ --m3-font-headline-large-weight: 400;
68
+ --m3-font-headline-medium-size: 1.75rem;
69
+ --m3-font-headline-medium-height: 1.286;
70
+ --m3-font-headline-medium-tracking: 0;
71
+ --m3-font-headline-medium-weight: 400;
72
+ --m3-font-headline-small-size: 1.5rem;
73
+ --m3-font-headline-small-height: 1.333;
74
+ --m3-font-headline-small-tracking: 0;
75
+ --m3-font-headline-small-weight: 400;
76
+ --m3-font-title-large-size: 1.375rem;
77
+ --m3-font-title-large-height: 1.273;
78
+ --m3-font-title-large-tracking: 0;
79
+ --m3-font-title-large-weight: 400;
80
+ --m3-font-title-medium-size: 1rem;
81
+ --m3-font-title-medium-height: 1.5;
82
+ --m3-font-title-medium-tracking: 0;
83
+ --m3-font-title-medium-weight: 500;
84
+ --m3-font-title-small-size: 0.875rem;
85
+ --m3-font-title-small-height: 1.429;
86
+ --m3-font-title-small-tracking: 0.006rem;
87
+ --m3-font-title-small-weight: 500;
88
+ --m3-font-label-large-size: 0.875rem;
89
+ --m3-font-label-large-height: 1.429;
90
+ --m3-font-label-large-tracking: 0.006rem;
91
+ --m3-font-label-large-weight: 500;
92
+ --m3-font-label-medium-size: 0.75rem;
93
+ --m3-font-label-medium-height: 1.333;
94
+ --m3-font-label-medium-tracking: 0.031rem;
95
+ --m3-font-label-medium-weight: 500;
96
+ --m3-font-label-small-size: 0.688rem;
97
+ --m3-font-label-small-height: 1.455;
98
+ --m3-font-label-small-tracking: 0.031rem;
99
+ --m3-font-label-small-weight: 500;
100
+ --m3-font-body-large-size: 1rem;
101
+ --m3-font-body-large-height: 1.5;
102
+ --m3-font-body-large-tracking: 0;
103
+ --m3-font-body-large-weight: 400;
104
+ --m3-font-body-medium-size: 0.875rem;
105
+ --m3-font-body-medium-height: 1.429;
106
+ --m3-font-body-medium-tracking: 0.016rem;
107
+ --m3-font-body-medium-weight: 400;
108
+ --m3-font-body-small-size: 0.75rem;
109
+ --m3-font-body-small-height: 1.333;
110
+ --m3-font-body-small-tracking: 0.025rem;
111
+ --m3-font-body-small-weight: 400;
38
112
 
39
113
  /* Expressive easing */
40
114
  --m3-util-timing-function-fast-spatial: cubic-bezier(0.42, 1.67, 0.21, 0.9);
@@ -93,123 +167,123 @@
93
167
  .m3-font-display-large,
94
168
  .m3-font-display-medium,
95
169
  .m3-font-display-small {
96
- font-family: var(--m3-font-display, var(--m3-font));
170
+ font-family: var(--m3-font-display);
97
171
  }
98
172
  .m3-font-headline-large,
99
173
  .m3-font-headline-medium,
100
174
  .m3-font-headline-small {
101
- font-family: var(--m3-font-headline, var(--m3-font));
175
+ font-family: var(--m3-font-headline);
102
176
  }
103
177
  .m3-font-title-large,
104
178
  .m3-font-title-medium,
105
179
  .m3-font-title-small {
106
- font-family: var(--m3-font-title, var(--m3-font));
180
+ font-family: var(--m3-font-title);
107
181
  }
108
182
  .m3-font-label-large,
109
183
  .m3-font-label-medium,
110
184
  .m3-font-label-small {
111
- font-family: var(--m3-font-label, var(--m3-font));
185
+ font-family: var(--m3-font-label);
112
186
  }
113
187
  .m3-font-body-large,
114
188
  .m3-font-body-medium,
115
189
  .m3-font-body-small {
116
- font-family: var(--m3-font-body, var(--m3-font));
190
+ font-family: var(--m3-font-body);
117
191
  }
118
192
  /* As the largest text on the screen, display styles are reserved for short, important text or numerals. */
119
193
  .m3-font-display-large {
120
- font-size: var(--m3-font-display-large-size, 3.563rem);
121
- line-height: var(--m3-font-display-large-height, 1.123);
122
- letter-spacing: var(--m3-font-display-large-tracking, 0);
123
- font-weight: var(--m3-font-display-large-weight, 400);
194
+ font-size: var(--m3-font-display-large-size);
195
+ line-height: var(--m3-font-display-large-height);
196
+ letter-spacing: var(--m3-font-display-large-tracking);
197
+ font-weight: var(--m3-font-display-large-weight);
124
198
  }
125
199
  .m3-font-display-medium {
126
- font-size: var(--m3-font-display-medium-size, 2.813rem);
127
- line-height: var(--m3-font-display-medium-height, 1.156);
128
- letter-spacing: var(--m3-font-display-medium-tracking, 0);
129
- font-weight: var(--m3-font-display-medium-weight, 400);
200
+ font-size: var(--m3-font-display-medium-size);
201
+ line-height: var(--m3-font-display-medium-height);
202
+ letter-spacing: var(--m3-font-display-medium-tracking);
203
+ font-weight: var(--m3-font-display-medium-weight);
130
204
  }
131
205
  .m3-font-display-small {
132
- font-size: var(--m3-font-display-small-size, 2.25rem);
133
- line-height: var(--m3-font-display-small-height, 1.222);
134
- letter-spacing: var(--m3-font-display-small-tracking, 0);
135
- font-weight: var(--m3-font-display-small-weight, 400);
206
+ font-size: var(--m3-font-display-small-size);
207
+ line-height: var(--m3-font-display-small-height);
208
+ letter-spacing: var(--m3-font-display-small-tracking);
209
+ font-weight: var(--m3-font-display-small-weight);
136
210
  }
137
211
  /* Headlines are best-suited for short, high-emphasis text on smaller screens. */
138
212
  .m3-font-headline-large {
139
- font-size: var(--m3-font-headline-large-size, 2rem);
140
- line-height: var(--m3-font-headline-large-height, 1.25);
141
- letter-spacing: var(--m3-font-headline-large-tracking, 0);
142
- font-weight: var(--m3-font-headline-large-weight, 400);
213
+ font-size: var(--m3-font-headline-large-size);
214
+ line-height: var(--m3-font-headline-large-height);
215
+ letter-spacing: var(--m3-font-headline-large-tracking);
216
+ font-weight: var(--m3-font-headline-large-weight);
143
217
  }
144
218
  .m3-font-headline-medium {
145
- font-size: var(--m3-font-headline-medium-size, 1.75rem);
146
- line-height: var(--m3-font-headline-medium-height, 1.286);
147
- letter-spacing: var(--m3-font-headline-medium-tracking, 0);
148
- font-weight: var(--m3-font-headline-medium-weight, 400);
219
+ font-size: var(--m3-font-headline-medium-size);
220
+ line-height: var(--m3-font-headline-medium-height);
221
+ letter-spacing: var(--m3-font-headline-medium-tracking);
222
+ font-weight: var(--m3-font-headline-medium-weight);
149
223
  }
150
224
  .m3-font-headline-small {
151
- font-size: var(--m3-font-headline-small-size, 1.5rem);
152
- line-height: var(--m3-font-headline-small-height, 1.333);
153
- letter-spacing: var(--m3-font-headline-small-tracking, 0);
154
- font-weight: var(--m3-font-headline-small-weight, 400);
225
+ font-size: var(--m3-font-headline-small-size);
226
+ line-height: var(--m3-font-headline-small-height);
227
+ letter-spacing: var(--m3-font-headline-small-tracking);
228
+ font-weight: var(--m3-font-headline-small-weight);
155
229
  }
156
230
  /* Titles are smaller than headline styles, and should be used for medium-emphasis text that remains relatively short. */
157
231
  .m3-font-title-large {
158
- font-size: var(--m3-font-title-large-size, 1.375rem);
159
- line-height: var(--m3-font-title-large-height, 1.273);
160
- letter-spacing: var(--m3-font-title-large-tracking, 0);
161
- font-weight: var(--m3-font-title-large-weight, 400);
232
+ font-size: var(--m3-font-title-large-size);
233
+ line-height: var(--m3-font-title-large-height);
234
+ letter-spacing: var(--m3-font-title-large-tracking);
235
+ font-weight: var(--m3-font-title-large-weight);
162
236
  }
163
237
  .m3-font-title-medium {
164
- font-size: var(--m3-font-title-medium-size, 1rem);
165
- line-height: var(--m3-font-title-medium-height, 1.5);
166
- letter-spacing: var(--m3-font-title-medium-tracking, 0);
167
- font-weight: var(--m3-font-title-medium-weight, 500);
238
+ font-size: var(--m3-font-title-medium-size);
239
+ line-height: var(--m3-font-title-medium-height);
240
+ letter-spacing: var(--m3-font-title-medium-tracking);
241
+ font-weight: var(--m3-font-title-medium-weight);
168
242
  }
169
243
  .m3-font-title-small {
170
- font-size: var(--m3-font-title-small-size, 0.875rem);
171
- line-height: var(--m3-font-title-small-height, 1.429);
172
- letter-spacing: var(--m3-font-title-small-tracking, 0.006rem);
173
- font-weight: var(--m3-font-title-small-weight, 500);
244
+ font-size: var(--m3-font-title-small-size);
245
+ line-height: var(--m3-font-title-small-height);
246
+ letter-spacing: var(--m3-font-title-small-tracking);
247
+ font-weight: var(--m3-font-title-small-weight);
174
248
  }
175
249
  /* Label styles are smaller, utilitarian styles, used for things like the text inside components
176
250
  or for very small text in the content body, such as captions. */
177
251
  .m3-font-label-large {
178
- font-size: var(--m3-font-label-large-size, 0.875rem);
179
- line-height: var(--m3-font-label-large-height, 1.429);
180
- letter-spacing: var(--m3-font-label-large-tracking, 0.006rem);
181
- font-weight: var(--m3-font-label-large-weight, 500);
252
+ font-size: var(--m3-font-label-large-size);
253
+ line-height: var(--m3-font-label-large-height);
254
+ letter-spacing: var(--m3-font-label-large-tracking);
255
+ font-weight: var(--m3-font-label-large-weight);
182
256
  }
183
257
  .m3-font-label-medium {
184
- font-size: var(--m3-font-label-medium-size, 0.75rem);
185
- line-height: var(--m3-font-label-medium-height, 1.333);
186
- letter-spacing: var(--m3-font-label-medium-tracking, 0.031rem);
187
- font-weight: var(--m3-font-label-medium-weight, 500);
258
+ font-size: var(--m3-font-label-medium-size);
259
+ line-height: var(--m3-font-label-medium-height);
260
+ letter-spacing: var(--m3-font-label-medium-tracking);
261
+ font-weight: var(--m3-font-label-medium-weight);
188
262
  }
189
263
  .m3-font-label-small {
190
- font-size: var(--m3-font-label-small-size, 0.688rem);
191
- line-height: var(--m3-font-label-small-height, 1.455);
192
- letter-spacing: var(--m3-font-label-small-tracking, 0.031rem);
193
- font-weight: var(--m3-font-label-small-weight, 500);
264
+ font-size: var(--m3-font-label-small-size);
265
+ line-height: var(--m3-font-label-small-height);
266
+ letter-spacing: var(--m3-font-label-small-tracking);
267
+ font-weight: var(--m3-font-label-small-weight);
194
268
  }
195
269
  /* Body styles are used for longer passages of text in your app. */
196
270
  .m3-font-body-large {
197
- font-size: var(--m3-font-body-large-size, 1rem);
198
- line-height: var(--m3-font-body-large-height, 1.5);
199
- letter-spacing: var(--m3-font-body-large-tracking, 0);
200
- font-weight: var(--m3-font-body-large-weight, 400);
271
+ font-size: var(--m3-font-body-large-size);
272
+ line-height: var(--m3-font-body-large-height);
273
+ letter-spacing: var(--m3-font-body-large-tracking);
274
+ font-weight: var(--m3-font-body-large-weight);
201
275
  }
202
276
  .m3-font-body-medium {
203
- font-size: var(--m3-font-body-medium-size, 0.875rem);
204
- line-height: var(--m3-font-body-medium-height, 1.429);
205
- letter-spacing: var(--m3-font-body-medium-tracking, 0.016rem);
206
- font-weight: var(--m3-font-body-medium-weight, 400);
277
+ font-size: var(--m3-font-body-medium-size);
278
+ line-height: var(--m3-font-body-medium-height);
279
+ letter-spacing: var(--m3-font-body-medium-tracking);
280
+ font-weight: var(--m3-font-body-medium-weight);
207
281
  }
208
282
  .m3-font-body-small {
209
- font-size: var(--m3-font-body-small-size, 0.75rem);
210
- line-height: var(--m3-font-body-small-height, 1.333);
211
- letter-spacing: var(--m3-font-body-small-tracking, 0.025rem);
212
- font-weight: var(--m3-font-body-small-weight, 400);
283
+ font-size: var(--m3-font-body-small-size);
284
+ line-height: var(--m3-font-body-small-height);
285
+ letter-spacing: var(--m3-font-body-small-tracking);
286
+ font-weight: var(--m3-font-body-small-weight);
213
287
  }
214
288
  /* Reset a few things */
215
289
  @layer base {
package/package/nav/NavCMLXItem.svelte CHANGED
@@ -160,10 +160,10 @@
160
160
  &.expanded {
161
161
  height: 3.5rem;
162
162
  padding-inline: 1.25rem;
163
- font-size: var(--m3-font-label-large-size, 0.875rem);
164
- line-height: var(--m3-font-label-large-height, 1.429);
165
- letter-spacing: var(--m3-font-label-large-tracking, 0.006rem);
166
- font-weight: var(--m3-font-label-large-weight, 500);
163
+ font-size: var(--m3-font-label-large-size);
164
+ line-height: var(--m3-font-label-large-height);
165
+ letter-spacing: var(--m3-font-label-large-tracking);
166
+ font-weight: var(--m3-font-label-large-weight);
167
167
  }
168
168
  }
169
169
 
@@ -283,10 +283,10 @@
283
283
  /* Extra large: expanded */
284
284
  height: 3.5rem;
285
285
  padding-inline: 1.25rem;
286
- font-size: var(--m3-font-label-large-size, 0.875rem);
287
- line-height: var(--m3-font-label-large-height, 1.429);
288
- letter-spacing: var(--m3-font-label-large-tracking, 0.006rem);
289
- font-weight: var(--m3-font-label-large-weight, 500);
286
+ font-size: var(--m3-font-label-large-size);
287
+ line-height: var(--m3-font-label-large-height);
288
+ letter-spacing: var(--m3-font-label-large-tracking);
289
+ font-weight: var(--m3-font-label-large-weight);
290
290
 
291
291
  .content {
292
292
  padding-inline: 1rem;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "m3-svelte",
3
- "version": "5.15.1",
3
+ "version": "5.15.3",
4
4
  "license": "Apache-2.0 OR GPL-3.0-only",
5
5
  "repository": "KTibow/m3-svelte",
6
6
  "author": {