@neovici/cosmoz-input 5.6.2 → 5.7.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.
Files changed (9) hide show
  1. package/dist/cosmoz-input.js +9 -3
  2. package/dist/cosmoz-toggle.js +24 -17
  3. package/dist/render.d.ts +5 -1
  4. package/dist/render.js +22 -14
  5. package/dist/styles.d.ts +0 -1
  6. package/dist/styles.js +159 -168
  7. package/dist/util.d.ts +1 -3
  8. package/dist/util.js +2 -2
  9. package/package.json +13 -3
package/dist/cosmoz-input.js CHANGED
@@ -10,6 +10,10 @@ import { useInput } from './use-input';
10
10
  import { getPlaceholder } from './util';
11
11
  const observedAttributes = [
12
12
  'type',
13
+ 'variant',
14
+ 'hint',
15
+ 'compact',
16
+ 'required',
13
17
  'pattern',
14
18
  'allowed-pattern',
15
19
  'min',
@@ -21,8 +25,9 @@ const observedAttributes = [
21
25
  ...attributes,
22
26
  ];
23
27
  export const Input = (host) => {
24
- const { type = 'text', pattern, allowedPattern, autocomplete, value, readonly, disabled, min, max, step, maxlength, } = host, { onChange, onFocus, onInput, onRef } = useInput(host);
28
+ const { type = 'text', pattern, allowedPattern, autocomplete, value, readonly, disabled, min, max, step, maxlength, required, } = host, { onChange, onFocus, onInput, onRef } = useInput(host);
25
29
  const onBeforeInput = useAllowedPattern(allowedPattern);
30
+ host.toggleAttribute('has-value', !!value);
26
31
  return render(html `
27
32
  <input
28
33
  ${ref(onRef)}
@@ -32,10 +37,11 @@ export const Input = (host) => {
32
37
  type=${type}
33
38
  pattern=${ifDefined(pattern)}
34
39
  autocomplete=${ifDefined(autocomplete)}
35
- placeholder=${getPlaceholder(host)}
40
+ placeholder=${getPlaceholder({ placeholder: host.placeholder })}
36
41
  ?readonly=${readonly}
37
- ?aria-disabled=${disabled}
42
+ aria-disabled=${disabled ? 'true' : 'false'}
38
43
  ?disabled=${disabled}
44
+ ?required=${required}
39
45
  .value=${live(value ?? '')}
40
46
  maxlength=${ifDefined(maxlength)}
41
47
  @beforeinput=${onBeforeInput}
package/dist/cosmoz-toggle.js CHANGED
@@ -22,16 +22,16 @@ const CosmozToggle = (host) => {
22
22
  export const toggleStyles = css `
23
23
  .toggle {
24
24
  appearance: none;
25
- width: 35px;
26
- height: 18px;
25
+ width: calc(var(--cz-spacing) * 9);
26
+ height: calc(var(--cz-spacing) * 4.5);
27
27
  display: inline-block;
28
28
  position: relative;
29
- border-radius: 18px;
29
+ border-radius: var(--cz-radius-3xl);
30
30
  overflow: hidden;
31
31
  outline: none;
32
32
  border: none;
33
33
  cursor: pointer;
34
- background: var(--cz-toggle-color, #101010);
34
+ background: var(--cz-color-bg-quaternary);
35
35
  transition: background-color ease 0.25s;
36
36
  margin: 0;
37
37
  }
@@ -40,27 +40,34 @@ export const toggleStyles = css `
40
40
  display: block;
41
41
  position: absolute;
42
42
  z-index: 2;
43
- width: 14px;
44
- height: 14px;
45
- background: var(--cz-toggle-thumb-color, #15b0d3);
46
- left: 2px;
47
- top: 2px;
48
- border-radius: 50%;
43
+ width: calc(var(--cz-spacing) * 3.5);
44
+ height: calc(var(--cz-spacing) * 3.5);
45
+ background: var(--cz-color-brand-25);
46
+ left: calc(var(--cz-spacing) * 0.5);
47
+ top: calc(var(--cz-spacing) * 0.5);
48
+ border-radius: var(--cz-radius-full);
49
49
  transition: all cubic-bezier(0.3, 1.5, 0.7, 1) 0.25s;
50
50
  }
51
51
  .toggle:checked {
52
- background: var(--cz-toggle-checked-color, #66d7f0);
52
+ background: var(--cz-color-bg-brand-solid);
53
53
  }
54
54
  .toggle:checked::before {
55
- left: 19px;
55
+ left: calc(var(--cz-spacing) * 5);
56
56
  }
57
- .toggle + label {
58
- padding-left: 16px;
59
- font-size: 14px;
60
- line-height: 18px;
57
+ label {
58
+ padding-left: calc(var(--cz-spacing) * 4);
59
+ font-size: var(--cz-text-sm);
60
+ line-height: var(--cz-text-sm-line-height);
61
+ color: var(--cz-color-text-secondary);
61
62
  cursor: pointer;
62
63
  user-select: none;
63
64
  }
65
+
66
+ .failure {
67
+ font-size: var(--cz-text-sm);
68
+ line-height: var(--cz-text-sm-line-height);
69
+ color: var(--cz-color-text-secondary);
70
+ }
64
71
  .toggle[disabled] {
65
72
  opacity: 0.6;
66
73
  }
@@ -76,7 +83,7 @@ const style = css `
76
83
  }
77
84
 
78
85
  ::slotted(*) {
79
- margin-left: 5px;
86
+ margin-left: calc(var(--cz-spacing) * 1);
80
87
  }
81
88
  `;
82
89
  customElements.define('cosmoz-toggle', component(CosmozToggle, {
package/dist/render.d.ts CHANGED
@@ -1,3 +1,4 @@
1
+ import '@neovici/cosmoz-tooltip';
1
2
  export type ObjectFromList<T extends ReadonlyArray<string>, V = string> = {
2
3
  [K in T extends ReadonlyArray<infer U> ? U : never]: V;
3
4
  };
@@ -5,5 +6,8 @@ export interface Render {
5
6
  label?: string;
6
7
  invalid?: boolean;
7
8
  errorMessage?: string;
9
+ hint?: string;
10
+ compact?: boolean;
11
+ required?: boolean;
8
12
  }
9
- export declare const render: <T>(control: T, { label, invalid, errorMessage }: Render) => import("lit-html").TemplateResult<1>, attributes: string[];
13
+ export declare const render: <T>(control: T, { hint, label, invalid, errorMessage, compact, required }: Render) => import("lit-html").TemplateResult<1>, attributes: string[];
package/dist/render.js CHANGED
@@ -1,24 +1,32 @@
1
+ import { infoCircleIcon } from '@neovici/cosmoz-icons/untitled';
2
+ import '@neovici/cosmoz-tooltip';
1
3
  import { html } from 'lit-html';
2
4
  import { when } from 'lit-html/directives/when.js';
3
- export const render = (control, { label, invalid, errorMessage }) => html `
4
- <div class="float" part="float">&nbsp;</div>
5
+ export const render = (control, { hint, label, invalid, errorMessage, compact, required }) => html `
6
+ <!-- label: hidden in compact mode -->
7
+ ${when(!compact && label, () => html `<label for="input" part="label"
8
+ >${label}
9
+ ${when(required, () => html `<span class="required">*</span>`)}
10
+ </label>`)}
5
11
  <div class="wrap" part="wrap">
6
12
  <slot name="prefix"></slot>
7
13
  <div class="control" part="control">
8
14
  <slot name="control"></slot>
9
15
  ${control}
10
- ${when(label, () => html `<label for="input" part="label">${label}</label>`)}
11
16
  </div>
17
+ <!-- compact: tooltip always visible, red icon when invalid -->
18
+ ${when(invalid, () => html `<cosmoz-tooltip
19
+ placement="top"
20
+ description=${invalid ? errorMessage : label}
21
+ delay="300"
22
+ >
23
+ ${infoCircleIcon({ width: '16px', height: '16px' })}
24
+ </cosmoz-tooltip>`)}
25
+
12
26
  <slot name="suffix"></slot>
13
27
  </div>
14
- <div class="line" part="line"></div>
15
- ${when(invalid && errorMessage, () => html `<div class="error" part="error">${errorMessage}</div>`)}
16
- `, attributes = [
17
- 'autocomplete',
18
- 'readonly',
19
- 'disabled',
20
- 'maxlength',
21
- 'invalid',
22
- 'no-label-float',
23
- 'always-float-label',
24
- ];
28
+ <!-- hint: visible when valid, hidden when invalid or compact -->
29
+ ${when(!compact && hint && !invalid, () => html `<span class="hint" part="hint">${hint}</span>`)}
30
+ <!-- error: replaces hint when invalid, hidden in compact -->
31
+ ${when(!compact && invalid && errorMessage, () => html `<span class="error" part="error">${errorMessage}</span>`)}
32
+ `, attributes = ['autocomplete', 'readonly', 'disabled', 'maxlength', 'invalid'];
package/dist/styles.d.ts CHANGED
@@ -1,2 +1 @@
1
- export declare const focusedStyle: string;
2
1
  export declare const styles: string;
package/dist/styles.js CHANGED
@@ -1,96 +1,62 @@
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
- }
2
+ export const styles = css `
3
+ /* === Host === */
7
4
 
8
- #input::placeholder,
9
- label {
10
- color: var(--focused-color);
11
- opacity: 1;
5
+ :host {
6
+ display: flex;
7
+ flex-direction: column;
8
+ gap: calc(var(--cz-spacing) * 1.5);
9
+ position: relative;
10
+ font-size: var(--cz-text-base);
11
+ line-height: var(--cz-text-base-line-height);
12
+ font-family: var(--cz-font-body);
12
13
  }
13
14
 
14
- .line {
15
- border-bottom-color: var(--focused-color);
15
+ :host(:focus-within) {
16
+ caret-color: var(--cz-color-text-primary);
16
17
  }
17
18
 
18
- .line::before {
19
- transform: none;
20
- transition: 0.25s transform ease;
19
+ :host([disabled]) .wrap {
20
+ color: var(--cz-color-text-disabled);
21
+ opacity: 0.5;
22
+ cursor: not-allowed;
21
23
  }
22
- `;
23
- export const styles = css `
24
- :host {
25
- --font-family: var(
26
- --cosmoz-input-font-family,
27
- var(--paper-font-subhead_-_font-family, inherit)
28
- );
29
- --font-size: var(
30
- --cosmoz-input-font-size,
31
- var(--paper-font-subhead_-_font-size, 16px)
32
- );
33
- --line-height: var(
34
- --cosmoz-input-line-height,
35
- var(--paper-font-subhead_-_line-height, 24px)
36
- );
37
- --label-scale: var(--cosmoz-input-label-scale, 0.75);
38
- --disabled-opacity: var(
39
- --cosmoz-input-disabled-opacity,
40
- var(--paper-input-container-disabled_-_opacity, 0.33)
41
- );
42
- --disabled-line-opacity: var(
43
- --cosmoz-input-disabled-line-opacity,
44
- var(--paper-input-container-underline-disabled_-_opacity, 1)
45
- );
46
- --invalid-color: var(
47
- --cosmoz-input-invalid-color,
48
- var(--paper-input-container-invalid-color, var(--error-color, #fc5c5b))
49
- );
50
- --bg: var(--cosmoz-input-background);
51
- --focused-bg: var(--cosmoz-input-focused-background, var(--bg));
52
- --color: var(--cosmoz-input-color, var(--secondary-text-color, #737373));
53
- --line-color: var(--cosmoz-input-line-color, var(--color));
54
- --focused-color: var(
55
- --cosmoz-input-focused-color,
56
- var(--primary-color, #3f51b5)
57
- );
58
- --float-display: var(--cosmoz-input-float-display, block);
59
- --contour-color: var(--line-color);
60
- --contour-size: var(--cosmoz-input-contour-size);
61
- --label-translate-y: var(--cosmoz-input-label-translate-y, 0%);
62
- --focused: var(--cosmoz-input-focused, none);
63
24
 
64
- display: block;
65
- padding: var(--cosmoz-input-padding, 8px 0);
66
- position: relative;
67
- max-height: var(--cosmoz-input-max-height);
68
- font-size: var(--font-size);
69
- line-height: var(--line-height);
70
- font-family: var(--font-family);
71
- caret-color: var(--focused-color);
72
- cursor: text;
25
+ :host([disabled]) #input {
26
+ cursor: not-allowed;
73
27
  }
74
28
 
75
- :host([disabled]) {
76
- opacity: var(--disabled-opacity);
29
+ :host([invalid]) {
30
+ caret-color: var(--cz-color-text-error);
77
31
  }
78
32
 
79
- .float {
80
- line-height: calc(var(--line-height) * var(--label-scale));
81
- background-color: var(--cosmoz-input-float-bg-color, none);
82
- display: var(--float-display);
33
+ :host([invalid]) .required,
34
+ .error {
35
+ color: var(--cz-color-text-error);
83
36
  }
84
37
 
38
+ /* === Layout === */
39
+
85
40
  .wrap {
86
- padding: var(--cosmoz-input-wrap-padding, 0px);
87
41
  display: flex;
88
42
  align-items: center;
89
43
  position: relative;
90
- background: var(--bg);
91
- opacity: var(--cosmoz-input-opacity);
92
- border-radius: var(--cosmoz-input-border-radius);
93
- box-shadow: 0 0 0 var(--contour-size) var(--contour-color);
44
+ width: 100%;
45
+ border-radius: var(--cz-radius-md);
46
+ box-shadow: 0 0 0 1px var(--cz-color-border-primary);
47
+ overflow: hidden;
48
+ }
49
+
50
+ .wrap:has(#input:focus) {
51
+ box-shadow: 0 0 0 2px var(--cz-color-border-brand);
52
+ }
53
+
54
+ :host([invalid]) .wrap {
55
+ box-shadow: 0 0 0 1px var(--cz-color-border-error);
56
+ }
57
+
58
+ :host([invalid]) .wrap:has(#input:focus) {
59
+ box-shadow: 0 0 0 2px var(--cz-color-border-error);
94
60
  }
95
61
 
96
62
  .control {
@@ -98,135 +64,160 @@ export const styles = css `
98
64
  position: relative;
99
65
  }
100
66
 
67
+ /* === Input === */
68
+
101
69
  #input {
102
- padding: 0;
70
+ box-sizing: border-box;
103
71
  margin: 0;
104
72
  outline: none;
105
73
  border: none;
106
74
  width: 100%;
107
- max-width: 100%;
108
75
  display: block;
109
76
  background: transparent;
110
77
  line-height: inherit;
111
78
  font-size: inherit;
112
79
  font-family: inherit;
113
80
  resize: none;
81
+ color: var(--cz-color-text-primary);
82
+ padding-block: calc(var(--cz-spacing) * 2);
83
+ padding-inline: calc(var(--cz-spacing) * 3);
84
+ }
85
+
86
+ #input::placeholder {
87
+ color: var(--cz-color-text-placeholder);
88
+ }
89
+
90
+ #input::-webkit-inner-spin-button {
91
+ z-index: 1;
114
92
  }
115
93
 
94
+ /* === Label === */
95
+
116
96
  label {
117
- position: absolute;
118
- top: 0;
119
- left: 0;
120
- width: var(--cosmoz-input-label-width, 100%);
121
- transition:
122
- transform 0.25s,
123
- width 0.25s;
124
- transform-origin: left top;
125
- color: var(--color);
126
- white-space: nowrap;
127
- overflow: hidden;
128
- text-overflow: ellipsis;
129
- text-transform: var(--cosmoz-input-label-text-transform);
130
- font-weight: var(--cosmoz-input-label-font-weight);
131
- user-select: none;
132
- cursor: text;
97
+ position: relative;
98
+ font-size: var(--cz-text-sm);
99
+ color: var(--cz-color-text-secondary);
133
100
  }
134
101
 
135
- .wrap:has(#input:not(:placeholder-shown)) {
136
- slot[name='suffix']::slotted(*),
137
- slot[name='prefix']::slotted(*) {
138
- transform: translateY(var(--label-translate-y));
139
- }
102
+ /* === Hint & Error === */
103
+
104
+ .hint {
105
+ font-size: var(--cz-text-xs);
106
+ color: var(--cz-color-text-tertiary);
140
107
  }
141
108
 
142
- :host([always-float-label]) label,
143
- #input:not(:placeholder-shown) + label {
144
- transform: translateY(
145
- calc(var(--label-scale) * -100% + var(--label-translate-y))
146
- )
147
- scale(var(--label-scale));
148
- background-color: var(--cosmoz-input-floating-label-bg, var(--bg));
109
+ .error {
110
+ font-size: var(--cz-text-xs);
149
111
  }
150
112
 
151
- :host([always-float-label]) input,
152
- #input:not(:placeholder-shown) {
153
- transform: translateY(var(--label-translate-y));
113
+ /* === Tooltip (fluid error indicator) === */
114
+
115
+ cosmoz-tooltip {
116
+ display: flex;
117
+ align-items: center;
118
+ margin-right: calc(var(--cz-spacing) * 2);
119
+ }
120
+
121
+ :host([invalid]) cosmoz-tooltip {
122
+ color: var(--cz-color-text-error);
123
+ }
124
+
125
+ :host([variant='inline']) cosmoz-tooltip {
126
+ display: none;
154
127
  }
155
128
 
156
- :host([always-float-label]) {
129
+ /* === Slots === */
130
+
131
+ .wrap:has(#input:not(:placeholder-shown)) {
157
132
  slot[name='suffix']::slotted(*),
158
133
  slot[name='prefix']::slotted(*) {
159
134
  transform: translateY(var(--label-translate-y));
160
135
  }
161
136
  }
162
137
 
163
- :host([no-label-float]) {
164
- .float,
165
- label {
166
- display: none;
167
- }
138
+ /* === Variant: inline === */
139
+ :host([variant='inline']) .wrap {
140
+ margin-top: calc(var(--cz-spacing) * 2.5);
141
+ }
168
142
 
169
- #input:not(:placeholder-shown) {
170
- transform: translateY(0%);
171
- }
143
+ :host([variant='inline']) #input {
144
+ padding-inline: 0;
145
+ }
172
146
 
173
- .wrap:has(#input:not(:placeholder-shown)) slot[name='suffix']::slotted(*),
174
- .wrap:has(#input:not(:placeholder-shown)) slot[name='prefix']::slotted(*) {
175
- transform: translateY(0%);
176
- }
147
+ :host([variant='inline']) #input::placeholder {
148
+ color: transparent;
177
149
  }
178
150
 
179
- .line {
180
- padding-top: 1px;
181
- border-bottom: 1px solid var(--line-color);
182
- position: relative;
183
- display: var(--cosmoz-input-line-display, block);
151
+ :host([variant='inline']) .wrap {
152
+ border-radius: 0;
153
+ box-shadow: none;
154
+ padding-inline: 0;
155
+ }
156
+
157
+ :host([variant='inline']) .wrap:has(#input:focus) {
158
+ box-shadow: none;
184
159
  }
185
160
 
186
- .line::before {
187
- content: '';
161
+ :host([variant='inline']) .hint,
162
+ :host([variant='inline']) .error {
163
+ display: none;
164
+ }
165
+ :host([variant='inline'][disabled]) label {
166
+ color: var(--cz-color-text-disabled);
167
+ opacity: 0.5;
168
+ cursor: not-allowed;
169
+ }
170
+ :host([variant='inline']) label {
188
171
  position: absolute;
189
- border-bottom: 2px solid transparent;
190
- border-bottom-color: inherit;
172
+ top: 25%;
191
173
  left: 0;
192
- right: 0;
193
- top: 0;
194
- transform: scaleX(0);
195
- transform-origin: center center;
174
+ width: 100%;
175
+ transform-origin: left;
176
+ transition:
177
+ transform 0.25s,
178
+ width 0.25s;
179
+ white-space: nowrap;
180
+ overflow: hidden;
181
+ text-overflow: ellipsis;
196
182
  z-index: 1;
197
183
  }
198
184
 
199
- :host([disabled]) .line {
200
- border-bottom-style: dashed;
201
- opacity: var(--disabled-line-opacity);
185
+ :host([variant='inline']:focus-within) label,
186
+ :host([variant='inline'][has-value]) label {
187
+ transform: translateY(-75%) scale(0.85);
202
188
  }
203
189
 
204
- .error {
205
- font-size: 12px;
206
- line-height: 20px;
207
- overflow: hidden;
208
- text-overflow: clip;
209
- position: absolute;
210
- max-width: 100%;
190
+ :host([variant='inline']) {
191
+ slot[name='suffix']::slotted(*),
192
+ slot[name='prefix']::slotted(*) {
193
+ transform: translateY(0);
194
+ }
211
195
  }
212
196
 
213
- :host([invalid]) {
214
- --contour-color: var(--invalid-color);
215
- caret-color: var(--invalid-color);
216
- }
197
+ /* === Variant: cell === */
217
198
 
218
- :host([invalid]) label,
219
- .error {
220
- color: var(--invalid-color);
199
+ :host([variant='cell']) .wrap {
200
+ border: 0.5px solid var(--cz-color-bg-quaternary);
201
+ border-radius: 0;
202
+ box-shadow: none;
203
+ }
204
+ :host([variant='cell'][invalid]) .wrap {
205
+ border-color: var(--cz-color-border-error);
221
206
  }
222
- :host([invalid]) .line {
223
- border-bottom-color: var(--invalid-color);
207
+ :host([variant='cell'][invalid]) .wrap:has(#input:focus) {
208
+ background: var(--cz-color-bg-error);
209
+ border: 0.5px solid transparent;
210
+ }
211
+ :host([variant='cell']) .wrap:has(#input:focus) {
212
+ background: var(--cz-color-bg-quaternary);
224
213
  }
225
214
 
226
- #input::-webkit-inner-spin-button {
227
- z-index: 1;
215
+ :host([variant='cell']) label {
216
+ display: none;
228
217
  }
229
218
 
219
+ /* === No spinner === */
220
+
230
221
  :host([no-spinner]) #input::-webkit-inner-spin-button {
231
222
  display: none;
232
223
  }
@@ -235,12 +226,15 @@ export const styles = css `
235
226
  appearance: textfield;
236
227
  }
237
228
 
229
+ /* === Autosize === */
230
+
238
231
  :host([autosize]) {
239
232
  width: min-content;
240
233
  }
241
234
  :host([autosize]) #input {
242
- min-width: 2ch;
243
- width: var(--chars);
235
+ --_pad: calc(var(--cz-spacing) * 12);
236
+ min-width: calc(2ch + var(--_pad));
237
+ width: calc(var(--chars) + var(--_pad));
244
238
  }
245
239
  :host([autosize]) .control {
246
240
  max-width: 100%;
@@ -250,21 +244,18 @@ export const styles = css `
250
244
  --width: calc(var(--chars) + 0.25em);
251
245
  }
252
246
  :host([autosize][type='number']:not([no-spinner])) #input {
253
- width: calc(var(--width) + 15px);
254
- min-width: calc(2ch + 0.25em + 15px);
247
+ width: calc(var(--width) + 15px + var(--_pad));
248
+ min-width: calc(2ch + 0.25em + 15px + var(--_pad));
255
249
  }
256
250
  :host([autosize][type='number'][no-spinner]) #input {
257
- width: var(--width);
258
- min-width: calc(2ch + 0.25em);
251
+ width: calc(var(--width) + var(--_pad));
252
+ min-width: calc(2ch + 0.25em + var(--_pad));
259
253
  }
260
- :host([type='color']) .line {
261
- display: none;
254
+ slot[name='prefix']::slotted(*) {
255
+ padding-inline-start: calc(var(--cz-spacing) * 2);
262
256
  }
263
257
 
264
- :host(:focus-within) {
265
- ${focusedStyle}
266
- }
267
- @container style(--focused: focused) {
268
- ${focusedStyle}
258
+ slot[name='suffix']::slotted(*) {
259
+ padding-inline-end: calc(var(--cz-spacing) * 2);
269
260
  }
270
261
  `;
package/dist/util.d.ts CHANGED
@@ -1,7 +1,5 @@
1
1
  interface Props {
2
- label?: string;
3
- noLabelFloat?: boolean;
4
2
  placeholder?: string;
5
3
  }
6
- export declare const getPlaceholder: ({ placeholder, noLabelFloat, label }: Props) => string;
4
+ export declare const getPlaceholder: ({ placeholder }: Props) => string;
7
5
  export {};
package/dist/util.js CHANGED
@@ -1,3 +1,3 @@
1
- export const getPlaceholder = ({ placeholder, noLabelFloat, label }) => {
2
- return (noLabelFloat ? label : undefined) || placeholder || ' ';
1
+ export const getPlaceholder = ({ placeholder }) => {
2
+ return placeholder || ' ';
3
3
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@neovici/cosmoz-input",
3
- "version": "5.6.2",
3
+ "version": "5.7.0",
4
4
  "description": "A input web component",
5
5
  "keywords": [
6
6
  "lit-html",
@@ -43,7 +43,10 @@
43
43
  "@semantic-release/npm",
44
44
  "@semantic-release/git"
45
45
  ],
46
- "branch": "master",
46
+ "branches": [
47
+ "master",
48
+ "next"
49
+ ],
47
50
  "preset": "conventionalcommits"
48
51
  },
49
52
  "publishConfig": {
@@ -69,6 +72,9 @@
69
72
  "./toggle": "./dist/cosmoz-toggle.js"
70
73
  },
71
74
  "dependencies": {
75
+ "@neovici/cosmoz-icons": "^1.6.0",
76
+ "@neovici/cosmoz-tokens": "^3.3.2",
77
+ "@neovici/cosmoz-tooltip": "^1.2.1",
72
78
  "@neovici/cosmoz-utils": "^6.0.0",
73
79
  "@pionjs/pion": "^2.0.0",
74
80
  "lit-html": "^2.0.0 || ^3.0.0"
@@ -81,6 +87,7 @@
81
87
  "@playwright/test": "^1.58.1",
82
88
  "@semantic-release/changelog": "^6.0.0",
83
89
  "@semantic-release/git": "^10.0.0",
90
+ "@storybook/addon-a11y": "^10.3.3",
84
91
  "@storybook/addon-docs": "^10.0.0",
85
92
  "@storybook/addon-vitest": "^10.2.4",
86
93
  "@storybook/web-components-vite": "^10.2.4",
@@ -95,6 +102,9 @@
95
102
  "shadow-dom-testing-library": "^1.13.1",
96
103
  "sinon": "^21.0.0",
97
104
  "storybook": "^10.1.9",
98
- "vitest": "^4.0.18"
105
+ "vitest": "^4.0.18",
106
+ "@types/mocha": "^10.0.3",
107
+ "@vitest/coverage-v8": "^4.1.2",
108
+ "playwright": "^1.58.2"
99
109
  }
100
110
  }