m3-svelte 5.2.3 → 5.2.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 (9) hide show
  1. package/package/forms/DateField.svelte +10 -9
  2. package/package/forms/DateFieldOutlined.svelte +14 -11
  3. package/package/forms/Slider.svelte +3 -3
  4. package/package/forms/TextField.svelte +2 -2
  5. package/package/forms/TextFieldMultiline.svelte +4 -4
  6. package/package/forms/TextFieldOutlined.svelte +9 -10
  7. package/package/forms/TextFieldOutlinedMultiline.svelte +4 -4
  8. package/package/nav/Tabs.svelte +1 -1
  9. package/package.json +1 -1
package/package/forms/DateField.svelte CHANGED
@@ -106,7 +106,16 @@ opacity: ${Math.min(t * 3, 1)};`,
106
106
  height: 100%;
107
107
  border: none;
108
108
  outline: none;
109
+
109
110
  padding: 1rem 1rem 0rem 1rem;
111
+ padding-inline-start: 0.875rem;
112
+ @supports (-moz-appearance: none) {
113
+ padding-inline-start: 0.75rem;
114
+ }
115
+ &:dir(rtl) {
116
+ text-align: right; /* work around chromium bug 41489719 */
117
+ }
118
+
110
119
  background-color: transparent;
111
120
  color: rgb(var(--m3-scheme-on-surface));
112
121
  }
@@ -117,14 +126,6 @@ opacity: ${Math.min(t * 3, 1)};`,
117
126
  color: rgb(var(--error, var(--m3-scheme-on-surface-variant)));
118
127
  pointer-events: none;
119
128
  }
120
- input {
121
- padding-inline-start: 0.875rem;
122
- }
123
- @supports (-moz-appearance: none) {
124
- input {
125
- padding-inline-start: 0.75rem;
126
- }
127
- }
128
129
 
129
130
  button {
130
131
  display: none;
@@ -175,7 +176,7 @@ opacity: ${Math.min(t * 3, 1)};`,
175
176
  }
176
177
  .has-js input {
177
178
  clip-path: inset(0 3.5rem 0 0);
178
- &:is(:global([dir="rtl"]) input) {
179
+ &:dir(rtl) {
179
180
  clip-path: inset(0 0 0 3.5rem);
180
181
  }
181
182
  }
package/package/forms/DateFieldOutlined.svelte CHANGED
@@ -109,14 +109,23 @@ opacity: ${Math.min(t * 3, 1)};`,
109
109
  height: 100%;
110
110
  border: none;
111
111
  outline: none;
112
+
112
113
  padding: 1rem;
114
+ padding-inline-start: 0.875rem;
115
+ @supports (-moz-appearance: none) {
116
+ padding-inline-start: 0.75rem;
117
+ }
118
+ &:dir(rtl) {
119
+ text-align: right; /* work around chromium bug 41489719 */
120
+ }
121
+
113
122
  border-radius: var(--m3-datefield-outlined-shape);
114
123
  background-color: transparent;
115
124
  color: rgb(var(--m3-scheme-on-surface));
116
125
  }
117
126
  label {
118
127
  position: absolute;
119
- left: 0.75rem;
128
+ inset-inline-start: 0.75rem;
120
129
  top: 0;
121
130
  translate: 0 -50%;
122
131
  color: rgb(var(--error, var(--m3-scheme-on-surface-variant)));
@@ -159,7 +168,7 @@ opacity: ${Math.min(t * 3, 1)};`,
159
168
  padding-left: 0.75rem;
160
169
  padding-right: 0.75rem;
161
170
  height: 100%;
162
- right: 0;
171
+ inset-inline-end: 0;
163
172
 
164
173
  align-items: center;
165
174
  justify-content: center;
@@ -172,15 +181,6 @@ opacity: ${Math.min(t * 3, 1)};`,
172
181
  cursor: pointer;
173
182
  }
174
183
 
175
- input {
176
- padding-left: 0.875rem;
177
- }
178
- @supports (-moz-appearance: none) {
179
- input {
180
- padding-left: 0.75rem;
181
- }
182
- }
183
-
184
184
  @media (hover: hover) {
185
185
  button:hover {
186
186
  background-color: rgb(var(--m3-scheme-on-surface-variant) / 0.08);
@@ -223,6 +223,9 @@ opacity: ${Math.min(t * 3, 1)};`,
223
223
  }
224
224
  .has-js input {
225
225
  clip-path: inset(0 3.5rem 0 0);
226
+ &:dir(rtl) {
227
+ clip-path: inset(0 0 0 3.5rem);
228
+ }
226
229
  }
227
230
  }
228
231
  </style>
package/package/forms/Slider.svelte CHANGED
@@ -259,7 +259,7 @@
259
259
  top: 50%;
260
260
  inset-inline-start: calc(50% + (100% - 0.75rem) * var(--x));
261
261
  translate: -50% -50%;
262
- &:is(:global([dir="rtl"] .tick)) {
262
+ &:dir(rtl) {
263
263
  translate: 50% -50%;
264
264
  }
265
265
  background-color: rgb(var(--m3-scheme-secondary-container));
@@ -286,7 +286,7 @@
286
286
  position: absolute;
287
287
  inset-inline-start: var(--percent);
288
288
  translate: -50% 0;
289
- &:is(:global([dir="rtl"]) .handle) {
289
+ &:dir(rtl) {
290
290
  translate: 50% 0;
291
291
  }
292
292
  width: 0.25rem;
@@ -313,7 +313,7 @@
313
313
  inset-inline-start: var(--percent);
314
314
  bottom: calc(var(--handle-height) + 4px);
315
315
  translate: -50% 0;
316
- &:is(:global([dir="rtl"]) .value) {
316
+ &:dir(rtl) {
317
317
  translate: 50% 0;
318
318
  }
319
319
 
package/package/forms/TextField.svelte CHANGED
@@ -157,8 +157,8 @@
157
157
  justify-content: center;
158
158
  border: none;
159
159
  background-color: transparent;
160
- border-top-right-radius: 0.25rem;
161
- border-bottom-right-radius: 0.25rem;
160
+ border-start-end-radius: 0.25rem;
161
+ border-end-end-radius: 0.25rem;
162
162
 
163
163
  -webkit-tap-highlight-color: transparent;
164
164
  cursor: pointer;
package/package/forms/TextFieldMultiline.svelte CHANGED
@@ -81,7 +81,7 @@
81
81
  }
82
82
  label {
83
83
  position: absolute;
84
- left: 1rem;
84
+ inset-inline-start: 1rem;
85
85
  top: 50%;
86
86
  translate: 0 -50%;
87
87
  color: rgb(var(--error, var(--m3-scheme-on-surface-variant)));
@@ -135,7 +135,7 @@
135
135
  position: relative;
136
136
  width: 1.5rem;
137
137
  height: 1.5rem;
138
- margin-left: 0.75rem;
138
+ margin-inline-start: 0.75rem;
139
139
  color: rgb(var(--m3-scheme-on-surface-variant));
140
140
  pointer-events: none;
141
141
  }
@@ -146,10 +146,10 @@
146
146
  }
147
147
 
148
148
  .leading-icon > textarea {
149
- padding-left: 3.25rem;
149
+ padding-inline-start: 3.25rem;
150
150
  }
151
151
  .leading-icon > label {
152
- left: 3.25rem;
152
+ inset-inline-start: 3.25rem;
153
153
  }
154
154
  .error {
155
155
  --error: var(--m3-scheme-error);
package/package/forms/TextFieldOutlined.svelte CHANGED
@@ -89,7 +89,7 @@
89
89
  }
90
90
  label {
91
91
  position: absolute;
92
- left: 0.75rem;
92
+ inset-inline-start: 0.75rem;
93
93
  top: 50%;
94
94
  translate: 0 -50%;
95
95
  color: rgb(var(--error, var(--m3-scheme-on-surface-variant)));
@@ -141,35 +141,34 @@
141
141
  }
142
142
  .m3-container > :global(.leading) {
143
143
  position: relative;
144
- margin-left: 0.75rem;
144
+ margin-inline-start: 0.75rem;
145
145
  }
146
146
  .trailing {
147
147
  position: absolute;
148
- padding-left: 0.75rem;
149
- padding-right: 0.75rem;
148
+ padding-inline: 0.75rem;
150
149
  height: 100%;
151
- right: 0;
150
+ inset-inline-end: 0;
152
151
 
153
152
  display: flex;
154
153
  align-items: center;
155
154
  justify-content: center;
156
155
  border: none;
157
156
  background-color: transparent;
158
- border-top-right-radius: 0.25rem;
159
- border-bottom-right-radius: 0.25rem;
157
+ border-start-end-radius: 0.25rem;
158
+ border-end-end-radius: 0.25rem;
160
159
 
161
160
  -webkit-tap-highlight-color: transparent;
162
161
  cursor: pointer;
163
162
  }
164
163
 
165
164
  .leading-icon > input {
166
- padding-left: 3.25rem;
165
+ padding-inline-start: 3.25rem;
167
166
  }
168
167
  .leading-icon > input:not(:focus):placeholder-shown ~ label {
169
- left: 3rem;
168
+ inset-inline-start: 3rem;
170
169
  }
171
170
  .trailing-icon > input {
172
- padding-right: 3.25rem;
171
+ padding-inline-end: 3.25rem;
173
172
  }
174
173
 
175
174
  .error {
package/package/forms/TextFieldOutlinedMultiline.svelte CHANGED
@@ -85,7 +85,7 @@
85
85
  }
86
86
  label {
87
87
  position: absolute;
88
- left: 0.75rem;
88
+ inset-inline-start: 0.75rem;
89
89
  top: 50%;
90
90
  translate: 0 -50%;
91
91
  color: rgb(var(--error, var(--m3-scheme-on-surface-variant)));
@@ -133,16 +133,16 @@
133
133
  position: relative;
134
134
  width: 1.5rem;
135
135
  height: 1.5rem;
136
- margin-left: 0.75rem;
136
+ margin-inline-start: 0.75rem;
137
137
  color: rgb(var(--m3-scheme-on-surface-variant));
138
138
  pointer-events: none;
139
139
  }
140
140
 
141
141
  .leading-icon > textarea {
142
- padding-left: 3.25rem;
142
+ padding-inline-start: 3.25rem;
143
143
  }
144
144
  .leading-icon > textarea:not(:focus):placeholder-shown ~ label {
145
- left: 3rem;
145
+ inset-inline-start: 3rem;
146
146
  }
147
147
 
148
148
  .error {
package/package/nav/Tabs.svelte CHANGED
@@ -137,7 +137,7 @@
137
137
  border-radius: 0.1875rem 0.1875rem 0 0;
138
138
  margin-inline-start: calc(50% / var(--items));
139
139
  translate: -50% 0;
140
- &:is(:global([dir="rtl"]) .bar) {
140
+ &:dir(rtl) {
141
141
  translate: 50% 0;
142
142
  }
143
143
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "m3-svelte",
3
- "version": "5.2.3",
3
+ "version": "5.2.5",
4
4
  "license": "Apache-2.0 OR GPL-3.0-only",
5
5
  "repository": "KTibow/m3-svelte",
6
6
  "author": {