@neovici/cosmoz-input 5.4.0 → 5.5.1
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 -1
- package/dist/styles.d.ts +1 -0
- package/dist/styles.js +30 -22
- package/package.json +13 -13
package/dist/cosmoz-textarea.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { html } from 'lit-html';
|
|
1
|
+
import { html } from 'lit-html';
|
|
2
2
|
import { live } from 'lit-html/directives/live.js';
|
|
3
3
|
import { ref } from 'lit-html/directives/ref.js';
|
|
4
4
|
import { ifDefined } from 'lit-html/directives/if-defined.js';
|
package/dist/styles.d.ts
CHANGED
package/dist/styles.js
CHANGED
|
@@ -1,4 +1,25 @@
|
|
|
1
1
|
import { tagged as css } from '@neovici/cosmoz-utils';
|
|
2
|
+
export const focusedStyle = css `
|
|
3
|
+
.wrap {
|
|
4
|
+
--contour-color: var(--focused-color);
|
|
5
|
+
background: var(--focused-bg);
|
|
6
|
+
}
|
|
7
|
+
|
|
8
|
+
#input::placeholder,
|
|
9
|
+
label {
|
|
10
|
+
color: var(--focused-color);
|
|
11
|
+
opacity: 1;
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
.line {
|
|
15
|
+
border-bottom-color: var(--focused-color);
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
.line::before {
|
|
19
|
+
transform: none;
|
|
20
|
+
transition: 0.25s transform ease;
|
|
21
|
+
}
|
|
22
|
+
`;
|
|
2
23
|
export const styles = css `
|
|
3
24
|
:host {
|
|
4
25
|
--font-family: var(
|
|
@@ -38,6 +59,7 @@ export const styles = css `
|
|
|
38
59
|
--contour-color: var(--line-color);
|
|
39
60
|
--contour-size: var(--cosmoz-input-contour-size);
|
|
40
61
|
--label-translate-y: var(--cosmoz-input-label-translate-y, 0%);
|
|
62
|
+
--focused: var(--cosmoz-input-focused, none);
|
|
41
63
|
|
|
42
64
|
display: block;
|
|
43
65
|
padding: var(--cosmoz-input-padding, 8px 0);
|
|
@@ -46,6 +68,7 @@ export const styles = css `
|
|
|
46
68
|
font-size: var(--font-size);
|
|
47
69
|
line-height: var(--line-height);
|
|
48
70
|
font-family: var(--font-family);
|
|
71
|
+
caret-color: var(--focused-color);
|
|
49
72
|
}
|
|
50
73
|
|
|
51
74
|
:host([disabled]) {
|
|
@@ -89,10 +112,6 @@ export const styles = css `
|
|
|
89
112
|
resize: none;
|
|
90
113
|
}
|
|
91
114
|
|
|
92
|
-
:host(:focus-within) .wrap {
|
|
93
|
-
background: var(--focused-bg);
|
|
94
|
-
}
|
|
95
|
-
|
|
96
115
|
label {
|
|
97
116
|
position: absolute;
|
|
98
117
|
top: 0;
|
|
@@ -139,12 +158,6 @@ export const styles = css `
|
|
|
139
158
|
}
|
|
140
159
|
}
|
|
141
160
|
|
|
142
|
-
:host(:not(always-float-label):focus-within) #input::placeholder,
|
|
143
|
-
:host(:focus-within) label {
|
|
144
|
-
color: var(--focused-color);
|
|
145
|
-
opacity: 1;
|
|
146
|
-
}
|
|
147
|
-
|
|
148
161
|
:host([no-label-float]) {
|
|
149
162
|
.float,
|
|
150
163
|
label {
|
|
@@ -180,18 +193,6 @@ export const styles = css `
|
|
|
180
193
|
transform-origin: center center;
|
|
181
194
|
z-index: 1;
|
|
182
195
|
}
|
|
183
|
-
:host(:focus-within) .line::before {
|
|
184
|
-
transform: none;
|
|
185
|
-
transition: 0.25s transform ease;
|
|
186
|
-
}
|
|
187
|
-
:host(:focus-within) .line {
|
|
188
|
-
border-bottom-color: var(--focused-color);
|
|
189
|
-
}
|
|
190
|
-
|
|
191
|
-
:host(:focus-within) {
|
|
192
|
-
--contour-color: var(--focused-color);
|
|
193
|
-
caret-color: var(--focused-color);
|
|
194
|
-
}
|
|
195
196
|
|
|
196
197
|
:host([disabled]) .line {
|
|
197
198
|
border-bottom-style: dashed;
|
|
@@ -256,4 +257,11 @@ export const styles = css `
|
|
|
256
257
|
:host([type='color']) .line {
|
|
257
258
|
display: none;
|
|
258
259
|
}
|
|
260
|
+
|
|
261
|
+
:host(:focus-within) {
|
|
262
|
+
${focusedStyle}
|
|
263
|
+
}
|
|
264
|
+
@container style(--focused: focused) {
|
|
265
|
+
${focusedStyle}
|
|
266
|
+
}
|
|
259
267
|
`;
|
package/package.json
CHANGED
|
@@ -1,18 +1,18 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@neovici/cosmoz-input",
|
|
3
|
-
"version": "5.
|
|
3
|
+
"version": "5.5.1",
|
|
4
4
|
"description": "A input web component",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"lit-html",
|
|
7
7
|
"web-components"
|
|
8
8
|
],
|
|
9
|
-
"homepage": "https://github.com/
|
|
9
|
+
"homepage": "https://github.com/Neovici/cosmoz-input#readme",
|
|
10
10
|
"bugs": {
|
|
11
|
-
"url": "https://github.com/
|
|
11
|
+
"url": "https://github.com/Neovici/cosmoz-input/issues"
|
|
12
12
|
},
|
|
13
13
|
"repository": {
|
|
14
14
|
"type": "git",
|
|
15
|
-
"url": "git+https://github.com/
|
|
15
|
+
"url": "git+https://github.com/Neovici/cosmoz-input.git"
|
|
16
16
|
},
|
|
17
17
|
"license": "Apache-2.0",
|
|
18
18
|
"author": "",
|
|
@@ -29,7 +29,7 @@
|
|
|
29
29
|
"start": "wds",
|
|
30
30
|
"test": "wtr --coverage",
|
|
31
31
|
"test:watch": "wtr --watch",
|
|
32
|
-
"prepare": "husky
|
|
32
|
+
"prepare": "husky",
|
|
33
33
|
"storybook:start": "storybook dev -p 8000",
|
|
34
34
|
"storybook:build": "storybook build",
|
|
35
35
|
"storybook:deploy": "storybook-to-ghpages",
|
|
@@ -75,18 +75,18 @@
|
|
|
75
75
|
"lit-html": "^2.0.0 || ^3.0.0"
|
|
76
76
|
},
|
|
77
77
|
"devDependencies": {
|
|
78
|
-
"@commitlint/cli": "^
|
|
79
|
-
"@commitlint/config-conventional": "^
|
|
80
|
-
"@neovici/cfg": "^
|
|
78
|
+
"@commitlint/cli": "^20.0.0",
|
|
79
|
+
"@commitlint/config-conventional": "^20.0.0",
|
|
80
|
+
"@neovici/cfg": "^2.0.0",
|
|
81
81
|
"@open-wc/testing": "^4.0.0",
|
|
82
82
|
"@semantic-release/changelog": "^6.0.0",
|
|
83
83
|
"@semantic-release/git": "^10.0.0",
|
|
84
|
-
"@storybook/web-components-vite": "^
|
|
84
|
+
"@storybook/web-components-vite": "^10.0.0",
|
|
85
85
|
"@types/mocha": "^10.0.3",
|
|
86
86
|
"http-server": "^14.1.1",
|
|
87
|
-
"husky": "^
|
|
88
|
-
"semantic-release": "^
|
|
89
|
-
"sinon": "^
|
|
90
|
-
"storybook": "^
|
|
87
|
+
"husky": "^9.1.7",
|
|
88
|
+
"semantic-release": "^25.0.2",
|
|
89
|
+
"sinon": "^21.0.0",
|
|
90
|
+
"storybook": "^10.1.9"
|
|
91
91
|
}
|
|
92
92
|
}
|