@neovici/cosmoz-input 6.1.0 → 6.3.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/cosmoz-textarea.js +1 -0
- package/dist/styles.js +28 -10
- package/package.json +2 -2
package/dist/cosmoz-textarea.js
CHANGED
package/dist/styles.js
CHANGED
|
@@ -13,7 +13,7 @@ export const styles = css `
|
|
|
13
13
|
}
|
|
14
14
|
|
|
15
15
|
:host(:not([compact])) {
|
|
16
|
-
margin-bottom: calc(var(--cz-spacing) *
|
|
16
|
+
margin-bottom: calc(var(--cz-spacing) * 3);
|
|
17
17
|
}
|
|
18
18
|
|
|
19
19
|
:host(:focus-within) {
|
|
@@ -22,14 +22,21 @@ export const styles = css `
|
|
|
22
22
|
|
|
23
23
|
:host([disabled]) .wrap {
|
|
24
24
|
color: var(--cz-color-text-disabled);
|
|
25
|
-
|
|
25
|
+
background: var(--cz-color-bg-disabled-subtle);
|
|
26
|
+
box-shadow: inset 0 0 0 1px var(--cz-color-border-disabled);
|
|
26
27
|
cursor: not-allowed;
|
|
27
28
|
}
|
|
28
29
|
|
|
29
30
|
:host([disabled]) #input {
|
|
31
|
+
color: var(--cz-color-text-disabled);
|
|
30
32
|
cursor: not-allowed;
|
|
31
33
|
}
|
|
32
34
|
|
|
35
|
+
:host([readonly]) .wrap {
|
|
36
|
+
background: var(--cz-color-bg-secondary);
|
|
37
|
+
box-shadow: inset 0 0 0 1px var(--cz-color-border-secondary);
|
|
38
|
+
}
|
|
39
|
+
|
|
33
40
|
:host([invalid]) {
|
|
34
41
|
caret-color: var(--cz-color-text-error);
|
|
35
42
|
}
|
|
@@ -47,7 +54,10 @@ export const styles = css `
|
|
|
47
54
|
position: relative;
|
|
48
55
|
width: 100%;
|
|
49
56
|
border-radius: var(--cz-radius-md);
|
|
50
|
-
|
|
57
|
+
background: var(--cz-color-bg-primary);
|
|
58
|
+
box-shadow:
|
|
59
|
+
inset 0 0 0 1px var(--cz-color-border-primary),
|
|
60
|
+
var(--cz-shadow-xs);
|
|
51
61
|
overflow: hidden;
|
|
52
62
|
transition-duration: 0.1s;
|
|
53
63
|
transition-timing-function: linear;
|
|
@@ -55,15 +65,17 @@ export const styles = css `
|
|
|
55
65
|
}
|
|
56
66
|
|
|
57
67
|
.wrap:has(#input:focus) {
|
|
58
|
-
box-shadow: var(--cz-focus-ring);
|
|
68
|
+
box-shadow: var(--cz-focus-ring), var(--cz-shadow-xs);
|
|
59
69
|
}
|
|
60
70
|
|
|
61
71
|
:host([invalid]) .wrap {
|
|
62
|
-
box-shadow:
|
|
72
|
+
box-shadow:
|
|
73
|
+
inset 0 0 0 1px var(--cz-color-border-error),
|
|
74
|
+
var(--cz-shadow-xs);
|
|
63
75
|
}
|
|
64
76
|
|
|
65
77
|
:host([invalid]) .wrap:has(#input:focus) {
|
|
66
|
-
box-shadow: var(--cz-focus-ring-error);
|
|
78
|
+
box-shadow: var(--cz-focus-ring-error), var(--cz-shadow-xs);
|
|
67
79
|
}
|
|
68
80
|
|
|
69
81
|
.control {
|
|
@@ -94,6 +106,12 @@ export const styles = css `
|
|
|
94
106
|
color: var(--cz-color-text-placeholder);
|
|
95
107
|
}
|
|
96
108
|
|
|
109
|
+
/* Paint over the browser's autofill background, which can't be overridden. */
|
|
110
|
+
#input:autofill {
|
|
111
|
+
box-shadow: inset 0 0 0 100vmax var(--cz-color-bg-primary);
|
|
112
|
+
-webkit-text-fill-color: var(--cz-color-text-primary);
|
|
113
|
+
}
|
|
114
|
+
|
|
97
115
|
#input::-webkit-inner-spin-button {
|
|
98
116
|
z-index: 1;
|
|
99
117
|
}
|
|
@@ -103,6 +121,7 @@ export const styles = css `
|
|
|
103
121
|
label {
|
|
104
122
|
position: relative;
|
|
105
123
|
font-size: var(--cz-text-sm);
|
|
124
|
+
font-weight: var(--cz-font-weight-medium);
|
|
106
125
|
color: var(--cz-color-text-secondary);
|
|
107
126
|
}
|
|
108
127
|
|
|
@@ -111,14 +130,10 @@ export const styles = css `
|
|
|
111
130
|
.hint {
|
|
112
131
|
font-size: var(--cz-text-xs);
|
|
113
132
|
color: var(--cz-color-text-tertiary);
|
|
114
|
-
position: absolute;
|
|
115
|
-
bottom: calc(var(--cz-spacing) * -6);
|
|
116
133
|
}
|
|
117
134
|
|
|
118
135
|
.error {
|
|
119
136
|
font-size: var(--cz-text-xs);
|
|
120
|
-
position: absolute;
|
|
121
|
-
bottom: calc(var(--cz-spacing) * -6);
|
|
122
137
|
}
|
|
123
138
|
|
|
124
139
|
/* === Tooltip (fluid error indicator) === */
|
|
@@ -165,6 +180,7 @@ export const styles = css `
|
|
|
165
180
|
|
|
166
181
|
:host([variant='inline']) .wrap {
|
|
167
182
|
border-radius: 0;
|
|
183
|
+
background: transparent;
|
|
168
184
|
box-shadow: none;
|
|
169
185
|
padding-inline: 0;
|
|
170
186
|
}
|
|
@@ -184,6 +200,7 @@ export const styles = css `
|
|
|
184
200
|
}
|
|
185
201
|
:host([variant='inline']) label {
|
|
186
202
|
position: absolute;
|
|
203
|
+
font-weight: var(--cz-font-weight-regular);
|
|
187
204
|
top: 25%;
|
|
188
205
|
left: 0;
|
|
189
206
|
width: 100%;
|
|
@@ -243,6 +260,7 @@ export const styles = css `
|
|
|
243
260
|
}
|
|
244
261
|
|
|
245
262
|
:host([variant='cell']) .error {
|
|
263
|
+
position: absolute;
|
|
246
264
|
left: calc(var(--cz-spacing) * 3);
|
|
247
265
|
bottom: 50%;
|
|
248
266
|
transform: translateY(50%);
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@neovici/cosmoz-input",
|
|
3
|
-
"version": "6.
|
|
3
|
+
"version": "6.3.0",
|
|
4
4
|
"description": "A input web component",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"lit-html",
|
|
@@ -69,7 +69,7 @@
|
|
|
69
69
|
"@changesets/cli": "^3.0.1",
|
|
70
70
|
"@commitlint/cli": "^21.0.0",
|
|
71
71
|
"@commitlint/config-conventional": "^21.0.1",
|
|
72
|
-
"@neovici/cfg": "^2.
|
|
72
|
+
"@neovici/cfg": "^2.15.0",
|
|
73
73
|
"@neovici/testing": "^2.3.0",
|
|
74
74
|
"@playwright/test": "1.62.1",
|
|
75
75
|
"@storybook/addon-a11y": "^10.4.6",
|