m3-svelte 4.6.1 → 4.6.2
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.
- package/package/containers/Dialog.svelte +7 -4
- package/package/forms/TextField.svelte +22 -23
- package/package/forms/TextFieldMultiline.svelte +22 -22
- package/package/forms/TextFieldOutlined.svelte +25 -26
- package/package/forms/TextFieldOutlinedMultiline.svelte +25 -26
- package/package/utils/DateFieldOutlined.svelte +21 -21
- package/package.json +1 -1
|
@@ -38,12 +38,15 @@
|
|
|
38
38
|
<dialog
|
|
39
39
|
class="m3-container"
|
|
40
40
|
oncancel={(e) => {
|
|
41
|
-
if (
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
} else {
|
|
41
|
+
if (e.target != e.currentTarget) return;
|
|
42
|
+
|
|
43
|
+
if (!closeOnEsc) {
|
|
45
44
|
e.preventDefault();
|
|
45
|
+
return;
|
|
46
46
|
}
|
|
47
|
+
|
|
48
|
+
onEsc?.();
|
|
49
|
+
open = false;
|
|
47
50
|
}}
|
|
48
51
|
onclick={(e) => {
|
|
49
52
|
if (e.target != e.currentTarget) return;
|
|
@@ -96,9 +96,25 @@
|
|
|
96
96
|
left: 1rem;
|
|
97
97
|
top: 1rem;
|
|
98
98
|
color: rgb(var(--error, var(--m3-scheme-on-surface-variant)));
|
|
99
|
+
&:is(input:hover ~ label) {
|
|
100
|
+
color: rgb(var(--error, var(--m3-scheme-on-surface)));
|
|
101
|
+
}
|
|
102
|
+
&:is(input:focus ~ label) {
|
|
103
|
+
color: rgb(var(--error, var(--m3-scheme-primary)));
|
|
104
|
+
}
|
|
105
|
+
&:is(input:disabled ~ label) {
|
|
106
|
+
color: rgb(var(--m3-scheme-on-surface) / 0.38);
|
|
107
|
+
}
|
|
108
|
+
&:is(input:focus ~ label, input:not(:placeholder-shown) ~ label) {
|
|
109
|
+
top: 0.5rem;
|
|
110
|
+
font-size: var(--m3-font-body-small-size, 0.75rem);
|
|
111
|
+
line-height: var(--m3-font-body-small-height, 1);
|
|
112
|
+
letter-spacing: var(--m3-font-body-small-tracking, 0.4);
|
|
113
|
+
}
|
|
99
114
|
pointer-events: none;
|
|
100
115
|
transition:
|
|
101
|
-
|
|
116
|
+
color 100ms,
|
|
117
|
+
top 100ms,
|
|
102
118
|
font-size 300ms,
|
|
103
119
|
line-height 300ms,
|
|
104
120
|
letter-spacing 300ms;
|
|
@@ -108,7 +124,10 @@
|
|
|
108
124
|
inset: 0;
|
|
109
125
|
border-radius: var(--m3-textfield-filled-shape) var(--m3-textfield-filled-shape) 0 0;
|
|
110
126
|
pointer-events: none;
|
|
111
|
-
transition: all
|
|
127
|
+
transition: all 100ms;
|
|
128
|
+
&:is(input:enabled:hover ~ .layer) {
|
|
129
|
+
background-color: rgb(var(--m3-scheme-on-surface) / 0.08);
|
|
130
|
+
}
|
|
112
131
|
}
|
|
113
132
|
.layer::after {
|
|
114
133
|
position: absolute;
|
|
@@ -119,7 +138,7 @@
|
|
|
119
138
|
|
|
120
139
|
height: 1px;
|
|
121
140
|
background-color: rgb(var(--error, var(--m3-scheme-on-surface-variant)));
|
|
122
|
-
transition: all
|
|
141
|
+
transition: all 100ms;
|
|
123
142
|
}
|
|
124
143
|
.m3-container :global(svg) {
|
|
125
144
|
width: 1.5rem;
|
|
@@ -148,25 +167,8 @@
|
|
|
148
167
|
|
|
149
168
|
-webkit-tap-highlight-color: transparent;
|
|
150
169
|
cursor: pointer;
|
|
151
|
-
transition: all 200ms;
|
|
152
170
|
}
|
|
153
171
|
|
|
154
|
-
input:enabled:hover ~ .layer {
|
|
155
|
-
background-color: rgb(var(--m3-scheme-on-surface) / 0.08);
|
|
156
|
-
}
|
|
157
|
-
input:hover ~ label {
|
|
158
|
-
color: rgb(var(--error, var(--m3-scheme-on-surface)));
|
|
159
|
-
}
|
|
160
|
-
input:focus ~ label,
|
|
161
|
-
input:not(:placeholder-shown) ~ label {
|
|
162
|
-
top: 0.5rem;
|
|
163
|
-
font-size: var(--m3-font-body-small-size, 0.75rem);
|
|
164
|
-
line-height: var(--m3-font-body-small-height, 1rem);
|
|
165
|
-
letter-spacing: var(--m3-font-body-small-tracking, 0.4);
|
|
166
|
-
}
|
|
167
|
-
input:focus ~ label {
|
|
168
|
-
color: rgb(var(--error, var(--m3-scheme-primary)));
|
|
169
|
-
}
|
|
170
172
|
input:focus ~ .layer::after {
|
|
171
173
|
height: 0.125rem;
|
|
172
174
|
background-color: rgb(var(--error, var(--m3-scheme-primary)));
|
|
@@ -201,9 +203,6 @@
|
|
|
201
203
|
background-color: rgb(var(--m3-scheme-on-surface) / 0.04);
|
|
202
204
|
color: rgb(var(--m3-scheme-on-surface) / 0.38);
|
|
203
205
|
}
|
|
204
|
-
input:disabled ~ label {
|
|
205
|
-
color: rgb(var(--m3-scheme-on-surface) / 0.38);
|
|
206
|
-
}
|
|
207
206
|
input:disabled ~ .layer::after {
|
|
208
207
|
background-color: rgb(var(--m3-scheme-on-surface) / 0.38);
|
|
209
208
|
}
|
|
@@ -84,9 +84,25 @@
|
|
|
84
84
|
left: 1rem;
|
|
85
85
|
top: 1rem;
|
|
86
86
|
color: rgb(var(--error, var(--m3-scheme-on-surface-variant)));
|
|
87
|
+
&:is(textarea:hover ~ label) {
|
|
88
|
+
color: rgb(var(--error, var(--m3-scheme-on-surface)));
|
|
89
|
+
}
|
|
90
|
+
&:is(textarea:focus ~ label) {
|
|
91
|
+
color: rgb(var(--error, var(--m3-scheme-primary)));
|
|
92
|
+
}
|
|
93
|
+
&:is(textarea:disabled ~ label) {
|
|
94
|
+
color: rgb(var(--m3-scheme-on-surface) / 0.38);
|
|
95
|
+
}
|
|
96
|
+
&:is(textarea:focus ~ label, textarea:not(:placeholder-shown) ~ label) {
|
|
97
|
+
top: 0.5rem;
|
|
98
|
+
font-size: var(--m3-font-body-small-size, 0.75rem);
|
|
99
|
+
line-height: var(--m3-font-body-small-height, 1);
|
|
100
|
+
letter-spacing: var(--m3-font-body-small-tracking, 0.4);
|
|
101
|
+
}
|
|
87
102
|
pointer-events: none;
|
|
88
103
|
transition:
|
|
89
|
-
|
|
104
|
+
color 100ms,
|
|
105
|
+
top 100ms,
|
|
90
106
|
font-size 300ms,
|
|
91
107
|
line-height 300ms,
|
|
92
108
|
letter-spacing 300ms;
|
|
@@ -96,7 +112,10 @@
|
|
|
96
112
|
inset: 0;
|
|
97
113
|
border-radius: var(--m3-textfield-filled-shape) var(--m3-textfield-filled-shape) 0 0;
|
|
98
114
|
pointer-events: none;
|
|
99
|
-
transition: all
|
|
115
|
+
transition: all 100ms;
|
|
116
|
+
&:is(textarea:enabled:hover ~ .layer) {
|
|
117
|
+
background-color: rgb(var(--m3-scheme-on-surface) / 0.08);
|
|
118
|
+
}
|
|
100
119
|
}
|
|
101
120
|
.layer::after {
|
|
102
121
|
position: absolute;
|
|
@@ -107,7 +126,7 @@
|
|
|
107
126
|
|
|
108
127
|
height: 1px;
|
|
109
128
|
background-color: rgb(var(--error, var(--m3-scheme-on-surface-variant)));
|
|
110
|
-
transition: all
|
|
129
|
+
transition: all 100ms;
|
|
111
130
|
}
|
|
112
131
|
.m3-container > :global(svg) {
|
|
113
132
|
position: relative;
|
|
@@ -118,22 +137,6 @@
|
|
|
118
137
|
pointer-events: none;
|
|
119
138
|
}
|
|
120
139
|
|
|
121
|
-
textarea:enabled:hover ~ .layer {
|
|
122
|
-
background-color: rgb(var(--m3-scheme-on-surface) / 0.08);
|
|
123
|
-
}
|
|
124
|
-
textarea:hover ~ label {
|
|
125
|
-
color: rgb(var(--error, var(--m3-scheme-on-surface)));
|
|
126
|
-
}
|
|
127
|
-
textarea:focus ~ label,
|
|
128
|
-
textarea:not(:placeholder-shown) ~ label {
|
|
129
|
-
top: 0.5rem;
|
|
130
|
-
font-size: var(--m3-font-body-small-size, 0.75rem);
|
|
131
|
-
line-height: var(--m3-font-body-small-height, 1rem);
|
|
132
|
-
letter-spacing: var(--m3-font-body-small-tracking, 0.4);
|
|
133
|
-
}
|
|
134
|
-
textarea:focus ~ label {
|
|
135
|
-
color: rgb(var(--error, var(--m3-scheme-primary)));
|
|
136
|
-
}
|
|
137
140
|
textarea:focus ~ .layer::after {
|
|
138
141
|
height: 0.125rem;
|
|
139
142
|
background-color: rgb(var(--error, var(--m3-scheme-primary)));
|
|
@@ -156,9 +159,6 @@
|
|
|
156
159
|
background-color: rgb(var(--m3-scheme-on-surface) / 0.04);
|
|
157
160
|
color: rgb(var(--m3-scheme-on-surface) / 0.38);
|
|
158
161
|
}
|
|
159
|
-
textarea:disabled ~ label {
|
|
160
|
-
color: rgb(var(--m3-scheme-on-surface) / 0.38);
|
|
161
|
-
}
|
|
162
162
|
textarea:disabled ~ .layer::after {
|
|
163
163
|
background-color: rgb(var(--m3-scheme-on-surface) / 0.38);
|
|
164
164
|
}
|
|
@@ -103,9 +103,25 @@
|
|
|
103
103
|
var(--m3-util-background, var(--m3-scheme-surface))
|
|
104
104
|
); /* TODO: next breaking change, make --m3-util-background a full color and update the comment above */
|
|
105
105
|
padding: 0 0.25rem;
|
|
106
|
+
&:is(input:hover ~ label) {
|
|
107
|
+
color: rgb(var(--error, var(--m3-scheme-on-surface)));
|
|
108
|
+
}
|
|
109
|
+
&:is(input:focus ~ label) {
|
|
110
|
+
color: rgb(var(--error, var(--m3-scheme-primary)));
|
|
111
|
+
}
|
|
112
|
+
&:is(input:disabled ~ label) {
|
|
113
|
+
color: rgb(var(--m3-scheme-on-surface) / 0.38);
|
|
114
|
+
}
|
|
115
|
+
&:is(input:focus ~ label, input:not(:placeholder-shown) ~ label) {
|
|
116
|
+
top: calc(var(--m3-font-body-small-height, 1rem) * -0.5);
|
|
117
|
+
font-size: var(--m3-font-body-small-size, 0.75rem);
|
|
118
|
+
line-height: var(--m3-font-body-small-height, 1);
|
|
119
|
+
letter-spacing: var(--m3-font-body-small-tracking, 0.4);
|
|
120
|
+
}
|
|
106
121
|
pointer-events: none;
|
|
107
122
|
transition:
|
|
108
|
-
|
|
123
|
+
color 100ms,
|
|
124
|
+
top 100ms,
|
|
109
125
|
font-size 300ms,
|
|
110
126
|
line-height 300ms,
|
|
111
127
|
letter-spacing 300ms;
|
|
@@ -116,7 +132,14 @@
|
|
|
116
132
|
border: 1px solid rgb(var(--error, var(--m3-scheme-outline)));
|
|
117
133
|
border-radius: var(--m3-textfield-outlined-shape);
|
|
118
134
|
pointer-events: none;
|
|
119
|
-
transition: all
|
|
135
|
+
transition: all 100ms;
|
|
136
|
+
&:is(input:hover ~ .layer) {
|
|
137
|
+
border-color: rgb(var(--error, var(--m3-scheme-on-surface)));
|
|
138
|
+
}
|
|
139
|
+
&:is(input:focus ~ .layer) {
|
|
140
|
+
border-color: rgb(var(--error, var(--m3-scheme-primary)));
|
|
141
|
+
border-width: 0.125rem;
|
|
142
|
+
}
|
|
120
143
|
}
|
|
121
144
|
.m3-container :global(svg) {
|
|
122
145
|
width: 1.5rem;
|
|
@@ -145,29 +168,8 @@
|
|
|
145
168
|
|
|
146
169
|
-webkit-tap-highlight-color: transparent;
|
|
147
170
|
cursor: pointer;
|
|
148
|
-
transition: all 200ms;
|
|
149
171
|
}
|
|
150
172
|
|
|
151
|
-
input:focus ~ label,
|
|
152
|
-
input:not(:placeholder-shown) ~ label {
|
|
153
|
-
top: calc(var(--m3-font-body-small-height, 1rem) * -0.5);
|
|
154
|
-
font-size: var(--m3-font-body-small-size, 0.75rem);
|
|
155
|
-
line-height: var(--m3-font-body-small-height, 1rem);
|
|
156
|
-
letter-spacing: var(--m3-font-body-small-tracking, 0.4);
|
|
157
|
-
}
|
|
158
|
-
input:hover ~ label {
|
|
159
|
-
color: rgb(var(--error, var(--m3-scheme-on-surface)));
|
|
160
|
-
}
|
|
161
|
-
input:hover ~ .layer {
|
|
162
|
-
border-color: rgb(var(--error, var(--m3-scheme-on-surface)));
|
|
163
|
-
}
|
|
164
|
-
input:focus ~ label {
|
|
165
|
-
color: rgb(var(--error, var(--m3-scheme-primary)));
|
|
166
|
-
}
|
|
167
|
-
input:focus ~ .layer {
|
|
168
|
-
border-color: rgb(var(--error, var(--m3-scheme-primary)));
|
|
169
|
-
border-width: 0.125rem;
|
|
170
|
-
}
|
|
171
173
|
@media (hover: hover) {
|
|
172
174
|
button:hover {
|
|
173
175
|
background-color: rgb(var(--m3-scheme-on-surface-variant) / 0.08);
|
|
@@ -199,9 +201,6 @@
|
|
|
199
201
|
input:disabled {
|
|
200
202
|
color: rgb(var(--m3-scheme-on-surface) / 0.38);
|
|
201
203
|
}
|
|
202
|
-
input:disabled ~ label {
|
|
203
|
-
color: rgb(var(--m3-scheme-on-surface) / 0.38);
|
|
204
|
-
}
|
|
205
204
|
input:disabled ~ .layer {
|
|
206
205
|
border-color: rgb(var(--m3-scheme-on-surface) / 0.38);
|
|
207
206
|
}
|
|
@@ -92,9 +92,25 @@
|
|
|
92
92
|
var(--m3-util-background, var(--m3-scheme-surface))
|
|
93
93
|
); /* TODO: next breaking change, make --m3-util-background a full color and update the comment above */
|
|
94
94
|
padding: 0 0.25rem;
|
|
95
|
+
&:is(textarea:hover ~ label) {
|
|
96
|
+
color: rgb(var(--error, var(--m3-scheme-on-surface)));
|
|
97
|
+
}
|
|
98
|
+
&:is(textarea:focus ~ label) {
|
|
99
|
+
color: rgb(var(--error, var(--m3-scheme-primary)));
|
|
100
|
+
}
|
|
101
|
+
&:is(textarea:disabled ~ label) {
|
|
102
|
+
color: rgb(var(--m3-scheme-on-surface) / 0.38);
|
|
103
|
+
}
|
|
104
|
+
&:is(textarea:focus ~ label, textarea:not(:placeholder-shown) ~ label) {
|
|
105
|
+
top: calc(var(--m3-font-body-small-height, 1rem) * -0.5);
|
|
106
|
+
font-size: var(--m3-font-body-small-size, 0.75rem);
|
|
107
|
+
line-height: var(--m3-font-body-small-height, 1);
|
|
108
|
+
letter-spacing: var(--m3-font-body-small-tracking, 0.4);
|
|
109
|
+
}
|
|
95
110
|
pointer-events: none;
|
|
96
111
|
transition:
|
|
97
|
-
|
|
112
|
+
color 100ms,
|
|
113
|
+
top 100ms,
|
|
98
114
|
font-size 300ms,
|
|
99
115
|
line-height 300ms,
|
|
100
116
|
letter-spacing 300ms;
|
|
@@ -105,7 +121,14 @@
|
|
|
105
121
|
border: 1px solid rgb(var(--error, var(--m3-scheme-outline)));
|
|
106
122
|
border-radius: var(--m3-textfield-outlined-shape);
|
|
107
123
|
pointer-events: none;
|
|
108
|
-
transition: all
|
|
124
|
+
transition: all 100ms;
|
|
125
|
+
&:is(textarea:hover ~ .layer) {
|
|
126
|
+
border-color: rgb(var(--error, var(--m3-scheme-on-surface)));
|
|
127
|
+
}
|
|
128
|
+
&:is(textarea:focus ~ .layer) {
|
|
129
|
+
border-color: rgb(var(--error, var(--m3-scheme-primary)));
|
|
130
|
+
border-width: 0.125rem;
|
|
131
|
+
}
|
|
109
132
|
}
|
|
110
133
|
.m3-container > :global(svg) {
|
|
111
134
|
position: relative;
|
|
@@ -116,27 +139,6 @@
|
|
|
116
139
|
pointer-events: none;
|
|
117
140
|
}
|
|
118
141
|
|
|
119
|
-
textarea:focus ~ label,
|
|
120
|
-
textarea:not(:placeholder-shown) ~ label {
|
|
121
|
-
top: calc(var(--m3-font-body-small-height, 1rem) * -0.5);
|
|
122
|
-
font-size: var(--m3-font-body-small-size, 0.75rem);
|
|
123
|
-
line-height: var(--m3-font-body-small-height, 1rem);
|
|
124
|
-
letter-spacing: var(--m3-font-body-small-tracking, 0.4);
|
|
125
|
-
}
|
|
126
|
-
textarea:hover ~ label {
|
|
127
|
-
color: rgb(var(--error, var(--m3-scheme-on-surface)));
|
|
128
|
-
}
|
|
129
|
-
textarea:hover ~ .layer {
|
|
130
|
-
border-color: rgb(var(--error, var(--m3-scheme-on-surface)));
|
|
131
|
-
}
|
|
132
|
-
textarea:focus ~ label {
|
|
133
|
-
color: rgb(var(--error, var(--m3-scheme-primary)));
|
|
134
|
-
}
|
|
135
|
-
textarea:focus ~ .layer {
|
|
136
|
-
border-color: rgb(var(--error, var(--m3-scheme-primary)));
|
|
137
|
-
border-width: 0.125rem;
|
|
138
|
-
}
|
|
139
|
-
|
|
140
142
|
.leading-icon > textarea {
|
|
141
143
|
padding-left: 3.25rem;
|
|
142
144
|
}
|
|
@@ -155,9 +157,6 @@
|
|
|
155
157
|
textarea:disabled {
|
|
156
158
|
color: rgb(var(--m3-scheme-on-surface) / 0.38);
|
|
157
159
|
}
|
|
158
|
-
textarea:disabled ~ label {
|
|
159
|
-
color: rgb(var(--m3-scheme-on-surface) / 0.38);
|
|
160
|
-
}
|
|
161
160
|
textarea:disabled ~ .layer {
|
|
162
161
|
border-color: rgb(var(--m3-scheme-on-surface) / 0.38);
|
|
163
162
|
}
|
|
@@ -121,8 +121,17 @@ opacity: ${Math.min(t * 3, 1)};`,
|
|
|
121
121
|
var(--m3-util-background, var(--m3-scheme-surface))
|
|
122
122
|
); /* TODO: next breaking change, make --m3-util-background a full color and update the comment above */
|
|
123
123
|
padding: 0 0.25rem;
|
|
124
|
+
&:is(input:hover ~ label) {
|
|
125
|
+
color: rgb(var(--error, var(--m3-scheme-on-surface)));
|
|
126
|
+
}
|
|
127
|
+
&:is(input:focus ~ label) {
|
|
128
|
+
color: rgb(var(--error, var(--m3-scheme-primary)));
|
|
129
|
+
}
|
|
130
|
+
&:is(input:disabled ~ label) {
|
|
131
|
+
color: rgb(var(--m3-scheme-on-surface) / 0.38);
|
|
132
|
+
}
|
|
124
133
|
pointer-events: none;
|
|
125
|
-
transition:
|
|
134
|
+
transition: color 100ms;
|
|
126
135
|
}
|
|
127
136
|
.layer {
|
|
128
137
|
position: absolute;
|
|
@@ -130,7 +139,17 @@ opacity: ${Math.min(t * 3, 1)};`,
|
|
|
130
139
|
border: 1px solid rgb(var(--error, var(--m3-scheme-outline)));
|
|
131
140
|
border-radius: var(--m3-datefield-outlined-shape);
|
|
132
141
|
pointer-events: none;
|
|
133
|
-
transition: all
|
|
142
|
+
transition: all 100ms;
|
|
143
|
+
&:is(input:hover ~ .layer) {
|
|
144
|
+
border-color: rgb(var(--error, var(--m3-scheme-on-surface)));
|
|
145
|
+
}
|
|
146
|
+
&:is(input:focus ~ .layer) {
|
|
147
|
+
border-color: rgb(var(--error, var(--m3-scheme-primary)));
|
|
148
|
+
border-width: 0.125rem;
|
|
149
|
+
}
|
|
150
|
+
&:is(input:disabled ~ .layer) {
|
|
151
|
+
border-color: rgb(var(--m3-scheme-on-surface) / 0.38);
|
|
152
|
+
}
|
|
134
153
|
}
|
|
135
154
|
|
|
136
155
|
button {
|
|
@@ -160,19 +179,6 @@ opacity: ${Math.min(t * 3, 1)};`,
|
|
|
160
179
|
}
|
|
161
180
|
}
|
|
162
181
|
|
|
163
|
-
input:hover ~ label {
|
|
164
|
-
color: rgb(var(--error, var(--m3-scheme-on-surface)));
|
|
165
|
-
}
|
|
166
|
-
input:hover ~ .layer {
|
|
167
|
-
border-color: rgb(var(--error, var(--m3-scheme-on-surface)));
|
|
168
|
-
}
|
|
169
|
-
input:focus ~ label {
|
|
170
|
-
color: rgb(var(--error, var(--m3-scheme-primary)));
|
|
171
|
-
}
|
|
172
|
-
input:focus ~ .layer {
|
|
173
|
-
border-color: rgb(var(--error, var(--m3-scheme-primary)));
|
|
174
|
-
border-width: 0.125rem;
|
|
175
|
-
}
|
|
176
182
|
@media (hover: hover) {
|
|
177
183
|
button:hover {
|
|
178
184
|
background-color: rgb(var(--m3-scheme-on-surface-variant) / 0.08);
|
|
@@ -197,12 +203,6 @@ opacity: ${Math.min(t * 3, 1)};`,
|
|
|
197
203
|
input:disabled {
|
|
198
204
|
color: rgb(var(--m3-scheme-on-surface) / 0.38);
|
|
199
205
|
}
|
|
200
|
-
input:disabled ~ label {
|
|
201
|
-
color: rgb(var(--m3-scheme-on-surface) / 0.38);
|
|
202
|
-
}
|
|
203
|
-
input:disabled ~ .layer {
|
|
204
|
-
border-color: rgb(var(--m3-scheme-on-surface) / 0.38);
|
|
205
|
-
}
|
|
206
206
|
button:disabled {
|
|
207
207
|
color: rgb(var(--m3-scheme-on-surface-variant) / 0.38);
|
|
208
208
|
cursor: auto;
|