m3-svelte 4.6.1 → 4.6.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.
- package/package/containers/Dialog.svelte +7 -4
- package/package/forms/TextField.svelte +23 -24
- package/package/forms/TextFieldMultiline.svelte +23 -23
- package/package/forms/TextFieldOutlined.svelte +26 -27
- package/package/forms/TextFieldOutlinedMultiline.svelte +26 -27
- package/package/utils/DateField.svelte +1 -1
- package/package/utils/DateFieldOutlined.svelte +21 -21
- package/package.json +13 -13
|
@@ -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;
|
|
@@ -21,7 +21,7 @@
|
|
|
21
21
|
disabled = false,
|
|
22
22
|
required = false,
|
|
23
23
|
error = false,
|
|
24
|
-
value = $bindable(
|
|
24
|
+
value = $bindable(),
|
|
25
25
|
enter,
|
|
26
26
|
...extra
|
|
27
27
|
}: {
|
|
@@ -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
|
}
|
|
@@ -9,7 +9,7 @@
|
|
|
9
9
|
disabled = false,
|
|
10
10
|
required = false,
|
|
11
11
|
error = false,
|
|
12
|
-
value = $bindable(
|
|
12
|
+
value = $bindable(),
|
|
13
13
|
...extra
|
|
14
14
|
}: {
|
|
15
15
|
label: string;
|
|
@@ -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
|
}
|
|
@@ -21,7 +21,7 @@
|
|
|
21
21
|
disabled = false,
|
|
22
22
|
required = false,
|
|
23
23
|
error = false,
|
|
24
|
-
value = $bindable(
|
|
24
|
+
value = $bindable(),
|
|
25
25
|
enter,
|
|
26
26
|
...extra
|
|
27
27
|
}: {
|
|
@@ -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
|
}
|
|
@@ -9,7 +9,7 @@
|
|
|
9
9
|
disabled = false,
|
|
10
10
|
required = false,
|
|
11
11
|
error = false,
|
|
12
|
-
value = $bindable(
|
|
12
|
+
value = $bindable(),
|
|
13
13
|
...extra
|
|
14
14
|
}: {
|
|
15
15
|
label: string;
|
|
@@ -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;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "m3-svelte",
|
|
3
|
-
"version": "4.6.
|
|
3
|
+
"version": "4.6.3",
|
|
4
4
|
"license": "Apache-2.0 OR GPL-3.0-only",
|
|
5
5
|
"repository": "KTibow/m3-svelte",
|
|
6
6
|
"author": {
|
|
@@ -30,30 +30,30 @@
|
|
|
30
30
|
},
|
|
31
31
|
"dependencies": {
|
|
32
32
|
"@iconify/types": "^2.0.0",
|
|
33
|
-
"@ktibow/iconset-material-symbols": "^0.0.
|
|
34
|
-
"@ktibow/material-color-utilities-nightly": "^0.3.
|
|
35
|
-
"svelte": "^5.
|
|
33
|
+
"@ktibow/iconset-material-symbols": "^0.0.1752989765",
|
|
34
|
+
"@ktibow/material-color-utilities-nightly": "^0.3.11753062248503",
|
|
35
|
+
"svelte": "^5.36.13"
|
|
36
36
|
},
|
|
37
37
|
"devDependencies": {
|
|
38
38
|
"@eslint/compat": "^1.3.1",
|
|
39
|
-
"@eslint/js": "^9.
|
|
39
|
+
"@eslint/js": "^9.31.0",
|
|
40
40
|
"@sveltejs/adapter-static": "^3.0.8",
|
|
41
|
-
"@sveltejs/kit": "^2.
|
|
42
|
-
"@sveltejs/package": "^2.
|
|
43
|
-
"@sveltejs/vite-plugin-svelte": "^
|
|
41
|
+
"@sveltejs/kit": "^2.25.1",
|
|
42
|
+
"@sveltejs/package": "^2.4.0",
|
|
43
|
+
"@sveltejs/vite-plugin-svelte": "^6.1.0",
|
|
44
44
|
"eslint": "^9.27.0",
|
|
45
|
-
"eslint-config-prettier": "^10.1.
|
|
46
|
-
"eslint-plugin-svelte": "^3.
|
|
45
|
+
"eslint-config-prettier": "^10.1.8",
|
|
46
|
+
"eslint-plugin-svelte": "^3.11.0",
|
|
47
47
|
"fast-glob": "^3.3.3",
|
|
48
48
|
"globals": "^16.3.0",
|
|
49
49
|
"prettier": "^3.6.2",
|
|
50
50
|
"prettier-plugin-svelte": "^3.4.0",
|
|
51
51
|
"publint": "^0.3.12",
|
|
52
|
-
"svelte-check": "^4.
|
|
52
|
+
"svelte-check": "^4.3.0",
|
|
53
53
|
"svelte-highlight": "^7.8.3",
|
|
54
54
|
"typescript": "^5.8.3",
|
|
55
|
-
"typescript-eslint": "^8.
|
|
56
|
-
"vite": "^7.0.
|
|
55
|
+
"typescript-eslint": "^8.38.0",
|
|
56
|
+
"vite": "^7.0.5"
|
|
57
57
|
},
|
|
58
58
|
"keywords": [
|
|
59
59
|
"svelte",
|