m3-svelte 5.2.4 → 5.2.6

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/forms/DateField.svelte +20 -11
  2. package/package/forms/DateFieldOutlined.svelte +23 -12
  3. package/package/forms/TextField.svelte +2 -2
  4. package/package/forms/TextFieldMultiline.svelte +4 -4
  5. package/package/forms/TextFieldOutlined.svelte +9 -10
  6. package/package/forms/TextFieldOutlinedMultiline.svelte +4 -4
  7. package/package.json +1 -1
package/package/forms/DateField.svelte CHANGED
@@ -106,7 +106,17 @@ 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
+
116
+ &:dir(rtl) {
117
+ text-align: right; /* work around chromium bug 41489719 */
118
+ }
119
+
110
120
  background-color: transparent;
111
121
  color: rgb(var(--m3-scheme-on-surface));
112
122
  }
@@ -117,14 +127,6 @@ opacity: ${Math.min(t * 3, 1)};`,
117
127
  color: rgb(var(--error, var(--m3-scheme-on-surface-variant)));
118
128
  pointer-events: none;
119
129
  }
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
130
 
129
131
  button {
130
132
  display: none;
@@ -174,9 +176,16 @@ opacity: ${Math.min(t * 3, 1)};`,
174
176
  display: flex;
175
177
  }
176
178
  .has-js input {
177
- clip-path: inset(0 3.5rem 0 0);
178
- &:dir(rtl) {
179
- clip-path: inset(0 0 0 3.5rem);
179
+ @supports selector(::-webkit-calendar-picker-indicator) {
180
+ &::-webkit-calendar-picker-indicator {
181
+ display: none;
182
+ }
183
+ }
184
+ @supports not selector(::-webkit-calendar-picker-indicator) {
185
+ clip-path: inset(0 3.5rem 0 0);
186
+ &:dir(rtl) {
187
+ clip-path: inset(0 0 0 3.5rem);
188
+ }
180
189
  }
181
190
  }
182
191
  }
package/package/forms/DateFieldOutlined.svelte CHANGED
@@ -109,14 +109,24 @@ 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
+
119
+ &:dir(rtl) {
120
+ text-align: right; /* work around chromium bug 41489719 */
121
+ }
122
+
113
123
  border-radius: var(--m3-datefield-outlined-shape);
114
124
  background-color: transparent;
115
125
  color: rgb(var(--m3-scheme-on-surface));
116
126
  }
117
127
  label {
118
128
  position: absolute;
119
- left: 0.75rem;
129
+ inset-inline-start: 0.75rem;
120
130
  top: 0;
121
131
  translate: 0 -50%;
122
132
  color: rgb(var(--error, var(--m3-scheme-on-surface-variant)));
@@ -159,7 +169,7 @@ opacity: ${Math.min(t * 3, 1)};`,
159
169
  padding-left: 0.75rem;
160
170
  padding-right: 0.75rem;
161
171
  height: 100%;
162
- right: 0;
172
+ inset-inline-end: 0;
163
173
 
164
174
  align-items: center;
165
175
  justify-content: center;
@@ -172,15 +182,6 @@ opacity: ${Math.min(t * 3, 1)};`,
172
182
  cursor: pointer;
173
183
  }
174
184
 
175
- input {
176
- padding-left: 0.875rem;
177
- }
178
- @supports (-moz-appearance: none) {
179
- input {
180
- padding-left: 0.75rem;
181
- }
182
- }
183
-
184
185
  @media (hover: hover) {
185
186
  button:hover {
186
187
  background-color: rgb(var(--m3-scheme-on-surface-variant) / 0.08);
@@ -222,7 +223,17 @@ opacity: ${Math.min(t * 3, 1)};`,
222
223
  display: flex;
223
224
  }
224
225
  .has-js input {
225
- clip-path: inset(0 3.5rem 0 0);
226
+ @supports selector(::-webkit-calendar-picker-indicator) {
227
+ &::-webkit-calendar-picker-indicator {
228
+ display: none;
229
+ }
230
+ }
231
+ @supports not selector(::-webkit-calendar-picker-indicator) {
232
+ clip-path: inset(0 3.5rem 0 0);
233
+ &:dir(rtl) {
234
+ clip-path: inset(0 0 0 3.5rem);
235
+ }
236
+ }
226
237
  }
227
238
  }
228
239
  </style>
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.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "m3-svelte",
3
- "version": "5.2.4",
3
+ "version": "5.2.6",
4
4
  "license": "Apache-2.0 OR GPL-3.0-only",
5
5
  "repository": "KTibow/m3-svelte",
6
6
  "author": {