m3-svelte 5.2.2 → 5.2.4

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 (7) hide show
  1. package/package/containers/ListItem.svelte +3 -2
  2. package/package/containers/MenuItem.svelte +1 -1
  3. package/package/forms/DateField.svelte +7 -4
  4. package/package/forms/Slider.svelte +23 -15
  5. package/package/forms/TextField.svelte +7 -8
  6. package/package/nav/Tabs.svelte +10 -7
  7. package/package.json +14 -14
package/package/containers/ListItem.svelte CHANGED
@@ -38,7 +38,8 @@
38
38
  {/if}
39
39
  <div class="body">
40
40
  {#if overline}
41
- <p class="overline m3-font-label-small">{overline}</p>
41
+ <!-- Renamed to not conflict with Tailwind -->
42
+ <p class="overline- m3-font-label-small">{overline}</p>
42
43
  {/if}
43
44
  <p class="headline m3-font-body-large">{headline}</p>
44
45
  {#if supporting}
@@ -134,7 +135,7 @@
134
135
  margin: 0;
135
136
  }
136
137
  .supporting,
137
- .overline {
138
+ .overline- {
138
139
  color: rgb(var(--m3-scheme-on-surface-variant));
139
140
  }
140
141
  .headline {
package/package/containers/MenuItem.svelte CHANGED
@@ -35,6 +35,7 @@
35
35
  align-items: center;
36
36
  height: calc(3rem + var(--m3-util-density-term));
37
37
  padding: 0 0.75rem;
38
+ gap: 0.75rem;
38
39
  white-space: nowrap;
39
40
 
40
41
  border: none;
@@ -48,7 +49,6 @@
48
49
  .icon {
49
50
  width: 1.5rem;
50
51
  height: 1.5rem;
51
- margin-right: 0.75rem;
52
52
  }
53
53
  .icon > :global(svg) {
54
54
  width: 1.5rem;
package/package/forms/DateField.svelte CHANGED
@@ -112,17 +112,17 @@ opacity: ${Math.min(t * 3, 1)};`,
112
112
  }
113
113
  label {
114
114
  position: absolute;
115
- left: 1rem;
115
+ inset-inline-start: 1rem;
116
116
  top: 0.5rem;
117
117
  color: rgb(var(--error, var(--m3-scheme-on-surface-variant)));
118
118
  pointer-events: none;
119
119
  }
120
120
  input {
121
- padding-left: 0.875rem;
121
+ padding-inline-start: 0.875rem;
122
122
  }
123
123
  @supports (-moz-appearance: none) {
124
124
  input {
125
- padding-left: 0.75rem;
125
+ padding-inline-start: 0.75rem;
126
126
  }
127
127
  }
128
128
 
@@ -132,7 +132,7 @@ opacity: ${Math.min(t * 3, 1)};`,
132
132
  padding-left: 0.75rem;
133
133
  padding-right: 0.75rem;
134
134
  height: 100%;
135
- right: 0;
135
+ inset-inline-end: 0;
136
136
 
137
137
  align-items: center;
138
138
  justify-content: center;
@@ -175,6 +175,9 @@ opacity: ${Math.min(t * 3, 1)};`,
175
175
  }
176
176
  .has-js input {
177
177
  clip-path: inset(0 3.5rem 0 0);
178
+ &:dir(rtl) {
179
+ clip-path: inset(0 0 0 3.5rem);
180
+ }
178
181
  }
179
182
  }
180
183
  </style>
package/package/forms/Slider.svelte CHANGED
@@ -160,15 +160,15 @@
160
160
  width: var(--icon-size);
161
161
  height: var(--icon-size);
162
162
  top: 50%;
163
- left: 0.25rem;
163
+ inset-inline-start: 0.25rem;
164
164
  translate: 0 -50%;
165
165
  pointer-events: none;
166
166
  color: rgb(var(--m3-scheme-secondary-container));
167
167
  }
168
168
 
169
169
  .m3-container :global(.leading.pop) {
170
- left: var(--percent);
171
- margin-left: 0.625rem;
170
+ inset-inline-start: var(--percent);
171
+ margin-inline-start: 0.625rem;
172
172
  color: rgb(var(--m3-scheme-primary));
173
173
  }
174
174
 
@@ -177,15 +177,15 @@
177
177
  width: var(--icon-size);
178
178
  height: var(--icon-size);
179
179
  top: 50%;
180
- right: 0.25rem;
180
+ inset-inline-end: 0.25rem;
181
181
  translate: 0 -50%;
182
182
  pointer-events: none;
183
183
  color: rgb(var(--m3-scheme-primary));
184
184
  }
185
185
 
186
186
  .m3-container :global(.trailing.pop) {
187
- right: abs(100% - var(--percent));
188
- margin-right: 0.625rem;
187
+ inset-inline-end: abs(100% - var(--percent));
188
+ margin-inline-end: 0.625rem;
189
189
  color: rgb(var(--m3-scheme-secondary-container));
190
190
  }
191
191
 
@@ -195,8 +195,8 @@
195
195
  height: 4px;
196
196
  border-radius: var(--m3-util-rounding-full);
197
197
  top: 50%;
198
- right: 2px;
199
- translate: -50% -50%;
198
+ inset-inline-end: 4px;
199
+ translate: 0 -50%;
200
200
  background-color: rgb(var(--m3-scheme-primary));
201
201
  pointer-events: none;
202
202
  &.hidden {
@@ -206,8 +206,7 @@
206
206
 
207
207
  input {
208
208
  position: absolute;
209
- left: -0.5rem;
210
- right: -0.5rem;
209
+ inset-inline: -0.5rem;
211
210
  width: calc(100% + 1rem);
212
211
  height: 100%;
213
212
 
@@ -221,7 +220,7 @@
221
220
  .track::before {
222
221
  position: absolute;
223
222
  content: " ";
224
- left: 0;
223
+ inset-inline-start: 0;
225
224
  top: 50%;
226
225
  translate: 0 -50%;
227
226
  width: calc(var(--percent) - 0.375rem);
@@ -238,7 +237,7 @@
238
237
  .track::after {
239
238
  position: absolute;
240
239
  content: " ";
241
- right: 0;
240
+ inset-inline-end: 0;
242
241
  top: 50%;
243
242
  translate: 0 -50%;
244
243
  width: calc(100% - var(--percent) - 0.375rem);
@@ -258,8 +257,11 @@
258
257
  height: 4px;
259
258
  border-radius: var(--m3-util-rounding-full);
260
259
  top: 50%;
261
- left: calc(50% + (100% - 0.75rem) * var(--x));
260
+ inset-inline-start: calc(50% + (100% - 0.75rem) * var(--x));
262
261
  translate: -50% -50%;
262
+ &:dir(rtl) {
263
+ translate: 50% -50%;
264
+ }
263
265
  background-color: rgb(var(--m3-scheme-secondary-container));
264
266
  pointer-events: none;
265
267
  }
@@ -282,8 +284,11 @@
282
284
 
283
285
  .handle {
284
286
  position: absolute;
285
- left: var(--percent);
287
+ inset-inline-start: var(--percent);
286
288
  translate: -50% 0;
289
+ &:dir(rtl) {
290
+ translate: 50% 0;
291
+ }
287
292
  width: 0.25rem;
288
293
  height: var(--handle-height);
289
294
  border-radius: 1.25rem;
@@ -305,9 +310,12 @@
305
310
  padding: 0.75rem 1rem;
306
311
  border-radius: var(--m3-slider-handle-shape);
307
312
 
308
- left: var(--percent);
313
+ inset-inline-start: var(--percent);
309
314
  bottom: calc(var(--handle-height) + 4px);
310
315
  translate: -50% 0;
316
+ &:dir(rtl) {
317
+ translate: 50% 0;
318
+ }
311
319
 
312
320
  opacity: 0;
313
321
  pointer-events: none;
package/package/forms/TextField.svelte CHANGED
@@ -86,7 +86,7 @@
86
86
  }
87
87
  label {
88
88
  position: absolute;
89
- left: 1rem;
89
+ inset-inline-start: 1rem;
90
90
  top: 50%;
91
91
  translate: 0 -50%;
92
92
  color: rgb(var(--error, var(--m3-scheme-on-surface-variant)));
@@ -144,14 +144,13 @@
144
144
  }
145
145
  .m3-container > :global(.leading) {
146
146
  position: relative;
147
- margin-left: 0.75rem;
147
+ margin-inline-start: 0.75rem;
148
148
  }
149
149
  .trailing {
150
150
  position: absolute;
151
- padding-left: 0.75rem;
152
- padding-right: 0.75rem;
151
+ padding-inline: 0.75rem;
153
152
  height: 100%;
154
- right: 0;
153
+ inset-inline-end: 0;
155
154
 
156
155
  display: flex;
157
156
  align-items: center;
@@ -171,13 +170,13 @@
171
170
  }
172
171
 
173
172
  .leading-icon > input {
174
- padding-left: 3.25rem;
173
+ padding-inline-start: 3.25rem;
175
174
  }
176
175
  .leading-icon > label {
177
- left: 3.25rem;
176
+ inset-inline-start: 3.25rem;
178
177
  }
179
178
  .trailing-icon > input {
180
- padding-right: 3.25rem;
179
+ padding-inline-end: 3.25rem;
181
180
  }
182
181
  .error {
183
182
  --error: var(--m3-scheme-error);
package/package/nav/Tabs.svelte CHANGED
@@ -99,19 +99,19 @@
99
99
  transition: var(--m3-util-easing-fast-spatial);
100
100
  }
101
101
  input:checked:nth-of-type(1) ~ .bar {
102
- left: 0;
102
+ inset-inline-start: 0;
103
103
  }
104
104
  input:checked:nth-of-type(2) ~ .bar {
105
- left: calc(100% / var(--items));
105
+ inset-inline-start: calc(100% / var(--items));
106
106
  }
107
107
  input:checked:nth-of-type(3) ~ .bar {
108
- left: calc(100% / var(--items) * 2);
108
+ inset-inline-start: calc(100% / var(--items) * 2);
109
109
  }
110
110
  input:checked:nth-of-type(4) ~ .bar {
111
- left: calc(100% / var(--items) * 3);
111
+ inset-inline-start: calc(100% / var(--items) * 3);
112
112
  }
113
113
  input:checked:nth-of-type(5) ~ .bar {
114
- left: calc(100% / var(--items) * 4);
114
+ inset-inline-start: calc(100% / var(--items) * 4);
115
115
  }
116
116
  input:checked:nth-of-type(-n + 5) ~ .bar {
117
117
  height: 0.125rem;
@@ -135,8 +135,11 @@
135
135
  width: 3rem;
136
136
  height: 0.1875rem;
137
137
  border-radius: 0.1875rem 0.1875rem 0 0;
138
- margin-left: calc(50% / var(--items));
139
- transform: translateX(-50%);
138
+ margin-inline-start: calc(50% / var(--items));
139
+ translate: -50% 0;
140
+ &:dir(rtl) {
141
+ translate: 50% 0;
142
+ }
140
143
  }
141
144
 
142
145
  .bar {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "m3-svelte",
3
- "version": "5.2.2",
3
+ "version": "5.2.4",
4
4
  "license": "Apache-2.0 OR GPL-3.0-only",
5
5
  "repository": "KTibow/m3-svelte",
6
6
  "author": {
@@ -30,17 +30,17 @@
30
30
  },
31
31
  "dependencies": {
32
32
  "@iconify/types": "^2.0.0",
33
- "@ktibow/iconset-material-symbols": "^0.0.1752989765",
34
- "@ktibow/material-color-utilities-nightly": "^0.3.11753062248503",
35
- "svelte": "^5.37.3"
33
+ "@ktibow/iconset-material-symbols": "^0.0.1754804347",
34
+ "@ktibow/material-color-utilities-nightly": "^0.3.11754876552597",
35
+ "svelte": "^5.38.0"
36
36
  },
37
37
  "devDependencies": {
38
- "@eslint/compat": "^1.3.1",
39
- "@eslint/js": "^9.31.0",
40
- "@sveltejs/adapter-static": "^3.0.8",
41
- "@sveltejs/kit": "^2.25.1",
42
- "@sveltejs/package": "^2.4.0",
43
- "@sveltejs/vite-plugin-svelte": "^6.1.0",
38
+ "@eslint/compat": "^1.3.2",
39
+ "@eslint/js": "^9.33.0",
40
+ "@sveltejs/adapter-static": "^3.0.9",
41
+ "@sveltejs/kit": "^2.27.3",
42
+ "@sveltejs/package": "^2.4.1",
43
+ "@sveltejs/vite-plugin-svelte": "^6.1.1",
44
44
  "eslint": "^9.27.0",
45
45
  "eslint-config-prettier": "^10.1.8",
46
46
  "eslint-plugin-svelte": "^3.11.0",
@@ -49,11 +49,11 @@
49
49
  "prettier": "^3.6.2",
50
50
  "prettier-plugin-svelte": "^3.4.0",
51
51
  "publint": "^0.3.12",
52
- "svelte-check": "^4.3.0",
52
+ "svelte-check": "^4.3.1",
53
53
  "svelte-highlight": "^7.8.3",
54
- "typescript": "^5.8.3",
55
- "typescript-eslint": "^8.38.0",
56
- "vite": "^7.0.5"
54
+ "typescript": "^5.9.2",
55
+ "typescript-eslint": "^8.39.1",
56
+ "vite": "^7.1.1"
57
57
  },
58
58
  "keywords": [
59
59
  "svelte",