@neovici/cosmoz-input 6.2.0 → 6.4.0
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/dist/styles.js +37 -8
- package/package.json +2 -2
package/dist/styles.js
CHANGED
|
@@ -7,8 +7,9 @@ export const styles = css `
|
|
|
7
7
|
flex-direction: column;
|
|
8
8
|
gap: calc(var(--cz-spacing) * 1.5);
|
|
9
9
|
position: relative;
|
|
10
|
-
|
|
11
|
-
|
|
10
|
+
--control-height: var(--cz-control-height-md);
|
|
11
|
+
font-size: var(--cz-text-sm);
|
|
12
|
+
line-height: var(--cz-text-sm-line-height);
|
|
12
13
|
font-family: var(--cz-font-body);
|
|
13
14
|
}
|
|
14
15
|
|
|
@@ -22,14 +23,21 @@ export const styles = css `
|
|
|
22
23
|
|
|
23
24
|
:host([disabled]) .wrap {
|
|
24
25
|
color: var(--cz-color-text-disabled);
|
|
25
|
-
|
|
26
|
+
background: var(--cz-color-bg-disabled-subtle);
|
|
27
|
+
box-shadow: inset 0 0 0 1px var(--cz-color-border-disabled);
|
|
26
28
|
cursor: not-allowed;
|
|
27
29
|
}
|
|
28
30
|
|
|
29
31
|
:host([disabled]) #input {
|
|
32
|
+
color: var(--cz-color-text-disabled);
|
|
30
33
|
cursor: not-allowed;
|
|
31
34
|
}
|
|
32
35
|
|
|
36
|
+
:host([readonly]) .wrap {
|
|
37
|
+
background: var(--cz-color-bg-secondary);
|
|
38
|
+
box-shadow: inset 0 0 0 1px var(--cz-color-border-secondary);
|
|
39
|
+
}
|
|
40
|
+
|
|
33
41
|
:host([invalid]) {
|
|
34
42
|
caret-color: var(--cz-color-text-error);
|
|
35
43
|
}
|
|
@@ -47,7 +55,10 @@ export const styles = css `
|
|
|
47
55
|
position: relative;
|
|
48
56
|
width: 100%;
|
|
49
57
|
border-radius: var(--cz-radius-md);
|
|
50
|
-
|
|
58
|
+
background: var(--cz-color-bg-primary);
|
|
59
|
+
box-shadow:
|
|
60
|
+
inset 0 0 0 1px var(--cz-color-border-primary),
|
|
61
|
+
var(--cz-shadow-xs);
|
|
51
62
|
overflow: hidden;
|
|
52
63
|
transition-duration: 0.1s;
|
|
53
64
|
transition-timing-function: linear;
|
|
@@ -55,15 +66,17 @@ export const styles = css `
|
|
|
55
66
|
}
|
|
56
67
|
|
|
57
68
|
.wrap:has(#input:focus) {
|
|
58
|
-
box-shadow: var(--cz-focus-ring);
|
|
69
|
+
box-shadow: var(--cz-focus-ring), var(--cz-shadow-xs);
|
|
59
70
|
}
|
|
60
71
|
|
|
61
72
|
:host([invalid]) .wrap {
|
|
62
|
-
box-shadow:
|
|
73
|
+
box-shadow:
|
|
74
|
+
inset 0 0 0 1px var(--cz-color-border-error),
|
|
75
|
+
var(--cz-shadow-xs);
|
|
63
76
|
}
|
|
64
77
|
|
|
65
78
|
:host([invalid]) .wrap:has(#input:focus) {
|
|
66
|
-
box-shadow: var(--cz-focus-ring-error);
|
|
79
|
+
box-shadow: var(--cz-focus-ring-error), var(--cz-shadow-xs);
|
|
67
80
|
}
|
|
68
81
|
|
|
69
82
|
.control {
|
|
@@ -86,7 +99,7 @@ export const styles = css `
|
|
|
86
99
|
font-family: inherit;
|
|
87
100
|
resize: none;
|
|
88
101
|
color: var(--cz-color-text-primary);
|
|
89
|
-
padding-block: calc(var(--
|
|
102
|
+
padding-block: calc((var(--control-height) - 1lh) / 2);
|
|
90
103
|
padding-inline: calc(var(--cz-spacing) * 3);
|
|
91
104
|
}
|
|
92
105
|
|
|
@@ -94,6 +107,12 @@ export const styles = css `
|
|
|
94
107
|
color: var(--cz-color-text-placeholder);
|
|
95
108
|
}
|
|
96
109
|
|
|
110
|
+
/* Paint over the browser's autofill background, which can't be overridden. */
|
|
111
|
+
#input:autofill {
|
|
112
|
+
box-shadow: inset 0 0 0 100vmax var(--cz-color-bg-primary);
|
|
113
|
+
-webkit-text-fill-color: var(--cz-color-text-primary);
|
|
114
|
+
}
|
|
115
|
+
|
|
97
116
|
#input::-webkit-inner-spin-button {
|
|
98
117
|
z-index: 1;
|
|
99
118
|
}
|
|
@@ -103,6 +122,7 @@ export const styles = css `
|
|
|
103
122
|
label {
|
|
104
123
|
position: relative;
|
|
105
124
|
font-size: var(--cz-text-sm);
|
|
125
|
+
font-weight: var(--cz-font-weight-medium);
|
|
106
126
|
color: var(--cz-color-text-secondary);
|
|
107
127
|
}
|
|
108
128
|
|
|
@@ -145,6 +165,8 @@ export const styles = css `
|
|
|
145
165
|
/* === Variant: inline === */
|
|
146
166
|
:host([variant='inline']) {
|
|
147
167
|
margin-bottom: 0;
|
|
168
|
+
font-size: var(--cz-text-base);
|
|
169
|
+
line-height: var(--cz-text-base-line-height);
|
|
148
170
|
}
|
|
149
171
|
|
|
150
172
|
:host([variant='inline']) .wrap {
|
|
@@ -152,6 +174,7 @@ export const styles = css `
|
|
|
152
174
|
}
|
|
153
175
|
|
|
154
176
|
:host([variant='inline']) #input {
|
|
177
|
+
padding-block: calc(var(--cz-spacing) * 2);
|
|
155
178
|
padding-inline: 0;
|
|
156
179
|
}
|
|
157
180
|
|
|
@@ -161,6 +184,7 @@ export const styles = css `
|
|
|
161
184
|
|
|
162
185
|
:host([variant='inline']) .wrap {
|
|
163
186
|
border-radius: 0;
|
|
187
|
+
background: transparent;
|
|
164
188
|
box-shadow: none;
|
|
165
189
|
padding-inline: 0;
|
|
166
190
|
}
|
|
@@ -180,6 +204,7 @@ export const styles = css `
|
|
|
180
204
|
}
|
|
181
205
|
:host([variant='inline']) label {
|
|
182
206
|
position: absolute;
|
|
207
|
+
font-weight: var(--cz-font-weight-regular);
|
|
183
208
|
top: 25%;
|
|
184
209
|
left: 0;
|
|
185
210
|
width: 100%;
|
|
@@ -234,6 +259,10 @@ export const styles = css `
|
|
|
234
259
|
border: 0.5px solid transparent;
|
|
235
260
|
}
|
|
236
261
|
|
|
262
|
+
:host([variant='cell']) #input {
|
|
263
|
+
padding-block: calc(var(--cz-spacing) * 2);
|
|
264
|
+
}
|
|
265
|
+
|
|
237
266
|
:host([variant='cell']) label {
|
|
238
267
|
display: none;
|
|
239
268
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@neovici/cosmoz-input",
|
|
3
|
-
"version": "6.
|
|
3
|
+
"version": "6.4.0",
|
|
4
4
|
"description": "A input web component",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"lit-html",
|
|
@@ -59,7 +59,7 @@
|
|
|
59
59
|
},
|
|
60
60
|
"dependencies": {
|
|
61
61
|
"@neovici/cosmoz-icons": "^1.6.0",
|
|
62
|
-
"@neovici/cosmoz-tokens": "^4.
|
|
62
|
+
"@neovici/cosmoz-tokens": "^4.8.0",
|
|
63
63
|
"@neovici/cosmoz-tooltip": "^1.2.1",
|
|
64
64
|
"@neovici/cosmoz-utils": "^6.0.0",
|
|
65
65
|
"@pionjs/pion": "^2.0.0",
|