@nuralyui/input 0.0.3 → 0.0.5

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 (24) hide show
  1. package/demo/input-demo.d.ts +1 -1
  2. package/demo/input-demo.d.ts.map +1 -1
  3. package/demo/input-demo.js +109 -109
  4. package/demo/input-demo.js.map +1 -1
  5. package/input.component.d.ts +20 -6
  6. package/input.component.d.ts.map +1 -1
  7. package/input.component.js +167 -42
  8. package/input.component.js.map +1 -1
  9. package/input.style.d.ts.map +1 -1
  10. package/input.style.js +237 -96
  11. package/input.style.js.map +1 -1
  12. package/{variables.style.d.ts → input.style.variable..d.ts} +1 -1
  13. package/input.style.variable..d.ts.map +1 -0
  14. package/{variables.style.js → input.style.variable..js} +29 -26
  15. package/input.style.variable..js.map +1 -0
  16. package/package.json +1 -1
  17. package/react.d.ts +7 -4
  18. package/react.d.ts.map +1 -1
  19. package/react.js +9 -6
  20. package/react.js.map +1 -1
  21. package/test/hy-input_test.js +14 -14
  22. package/test/hy-input_test.js.map +1 -1
  23. package/variables.style.d.ts.map +0 -1
  24. package/variables.style.js.map +0 -1
package/input.style.js CHANGED
@@ -1,53 +1,116 @@
1
1
  import { css } from 'lit';
2
- import { styleVariables } from './variables.style.js';
2
+ import { styleVariables } from './input.style.variable..js';
3
+ /**
4
+ * Input component styles for the Hybrid UI Library
5
+ *
6
+ * This file contains all the styling for the nr-input component, including:
7
+ * - Base input styles with CSS custom properties for theming
8
+ * - Multiple input states (default, warning, error)
9
+ * - Size variations (small, medium, large)
10
+ * - Different input types (text, password, number, calendar)
11
+ * - Icon positioning and styling
12
+ * - Focus, disabled, and validation states
13
+ * - Dark theme support
14
+ *
15
+ * The styling system uses CSS custom properties with fallbacks to allow
16
+ * for both global and local customization of input appearance.
17
+ */
3
18
  const inputStyle = css `
19
+ /*
20
+ * Host element base styles
21
+ * Container for the input component with flexible layout
22
+ */
4
23
  :host {
5
24
  display: flex;
6
25
  flex-direction: column;
7
- font-family: var(--hybrid-input-font-family,var(--hybrid-input-local-font-family));
26
+ font-family: var(--hybrid-input-font-family, var(--hybrid-input-local-font-family));
8
27
  }
9
28
 
29
+ /*
30
+ * Base input container and input element styles
31
+ * Uses CSS custom properties with fallbacks for comprehensive theming support
32
+ * Properties follow the pattern: --hybrid-input-{property}, --hybrid-input-local-{property}
33
+ */
10
34
  :host > #input-container,
11
35
  #input-container > input {
12
- background-color: var(--hybrid-input-background-color,var(--hybrid-input-local-background-color));
36
+ background-color: var(--hybrid-input-background-color, var(--hybrid-input-local-background-color));
13
37
  }
14
38
 
39
+ /*
40
+ * Disabled state styles for container and input
41
+ * Applied when input is disabled - removes interactivity and applies muted colors
42
+ */
15
43
  :host([disabled]) > #input-container,
16
44
  :host([disabled]) > #input-container > input {
17
- background-color: var(--hybrid-input-disabled-background-color,var(--hybrid-input-local-disabled-background-color));
45
+ background-color: var(--hybrid-input-disabled-background-color, var(--hybrid-input-local-disabled-background-color));
18
46
  cursor: not-allowed;
19
47
  }
20
48
 
49
+ /*
50
+ * Icon base styles
51
+ * Common styling for all icons within the input component
52
+ */
21
53
  hy-icon {
22
54
  display: flex;
23
55
  align-items: center;
24
56
  }
25
57
 
58
+ /*
59
+ * Placeholder styling
60
+ * Customizable placeholder text appearance
61
+ */
26
62
  ::placeholder {
27
- color: var(--hybrid-input-placeholder-color,var(--hybrid-input-local-placeholder-color));
28
- font-size: var(--hybrid-input-placeholder-font-size,var(--hybrid-input-local-placeholder-font-size));
29
- font-family: var(--hybrid-input-font-family,var(--hybrid-input-local-font-family));
63
+ color: var(--hybrid-input-placeholder-color, var(--hybrid-input-local-placeholder-color));
64
+ font-size: var(--hybrid-input-placeholder-font-size, var(--hybrid-input-local-placeholder-font-size));
65
+ font-family: var(--hybrid-input-font-family, var(--hybrid-input-local-font-family));
30
66
  }
67
+
68
+ /*
69
+ * Disabled placeholder styling
70
+ * Applied when input is disabled
71
+ */
72
+ :host([disabled]) ::placeholder {
73
+ color: var(--hybrid-input-disabled-placeholder-color, var(--hybrid-input-local-disabled-placeholder-color));
74
+ }
75
+
76
+ /* ========================================
77
+ * ICON VARIANTS AND STATES
78
+ * ======================================== */
79
+
80
+ /* Warning state icon */
31
81
  #warning-icon {
32
- --hybrid-icon-color: var(--hybrid-input-warning-icon-color,var(--hybrid-input-local-warning-icon-color,));
82
+ --hybrid-icon-color: var(--hybrid-input-warning-icon-color, var(--hybrid-input-local-warning-icon-color));
33
83
  }
84
+
85
+ /* Error state icon */
34
86
  #error-icon {
35
- --hybrid-icon-color: var(--hybrid-input-error-icon-color,var(--hybrid-input-local-error-icon-color));
87
+ --hybrid-icon-color: var(--hybrid-input-error-icon-color, var(--hybrid-input-local-error-icon-color));
36
88
  }
89
+
90
+ /* Calendar input type icon */
37
91
  #calendar-icon {
38
- --hybrid-icon-color: var(--hybrid-input-calendar-icon-color,var(--hybrid-input-local-calendar-icon-color));
92
+ --hybrid-icon-color: var(--hybrid-input-calendar-icon-color, var(--hybrid-input-local-calendar-icon-color));
39
93
  }
94
+
95
+ /* Password toggle icon */
40
96
  #password-icon {
41
- padding-left: var(--hybrid-input-password-icon-padding-left,var(--hybrid-input-local-password-icon-padding-left,));
42
- padding-right: var(--hybrid-input-password-icon-padding-right,var(--hybrid-input-local-password-icon-padding-right));
97
+ padding-left: var(--hybrid-input-password-icon-padding-left, var(--hybrid-input-local-password-icon-padding-left));
98
+ padding-right: var(--hybrid-input-password-icon-padding-right, var(--hybrid-input-local-password-icon-padding-right));
43
99
  cursor: pointer;
44
- --hybrid-icon-color: var(--hybrid-input-password-icon-color,var(--hybrid-input-local-password-icon-color));
100
+ --hybrid-icon-color: var(--hybrid-input-password-icon-color, var(--hybrid-input-local-password-icon-color));
45
101
  }
102
+
103
+ /* Copy functionality icon */
46
104
  #copy-icon {
47
- padding-right: var(--hybrid-input-copy-icon-padding-right,var(--hybrid-input-local-copy-icon-padding-right));
48
- --hybrid-icon-color: var(--hybrid-input-copy-icon-color,var(--hybrid-input-local-copy-icon-color));
105
+ padding-right: var(--hybrid-input-copy-icon-padding-right, var(--hybrid-input-local-copy-icon-padding-right));
106
+ --hybrid-icon-color: var(--hybrid-input-copy-icon-color, var(--hybrid-input-local-copy-icon-color));
49
107
  cursor: pointer;
50
108
  }
109
+
110
+ /*
111
+ * Number input increment/decrement icons container
112
+ * Positioned absolutely for overlay on input
113
+ */
51
114
  #number-icons {
52
115
  display: flex;
53
116
  justify-content: space-between;
@@ -57,146 +120,224 @@ const inputStyle = css `
57
120
  right: 0;
58
121
  top: 0;
59
122
  height: 100%;
60
- width: var(--hybrid-input-number-icons-container-width,var(--hybrid-input-local-number-icons-container-width));
61
- padding-right: var(--hybrid-input-number-icons-container-padding-right,var(--hybrid-input-local-number-icons-container-padding-right));
123
+ width: var(--hybrid-input-number-icons-container-width, var(--hybrid-input-local-number-icons-container-width));
124
+ padding-right: var(--hybrid-input-number-icons-container-padding-right, var(--hybrid-input-local-number-icons-container-padding-right));
62
125
  }
126
+
127
+ /* Individual number icons styling */
63
128
  #number-icons hy-icon {
64
- --hybrid-icon-color: var(--hybrid-input-number-icons-color,var(--hybrid-input-local-number-icons-color));
65
- padding-left: var(--hybrid-input-number-icons-padding-left,var(--hybrid-input-local-number-icons-padding-left));
66
- padding-right: var(--hybrid-input-number-icons-padding-right,var(--hybrid-input-local-number-icons-padding-right));
67
- width: var(--hybrid-input-number-icons-width,var(--hybrid-input-local-number-icons-width));
68
- height: var(--hybrid-input-number-icons-height,var(--hybrid-input-local-number-icons-height));
129
+ --hybrid-icon-color: var(--hybrid-input-number-icons-color, var(--hybrid-input-local-number-icons-color));
130
+ padding-left: var(--hybrid-input-number-icons-padding-left, var(--hybrid-input-local-number-icons-padding-left));
131
+ padding-right: var(--hybrid-input-number-icons-padding-right, var(--hybrid-input-local-number-icons-padding-right));
132
+ width: var(--hybrid-input-number-icons-width, var(--hybrid-input-local-number-icons-width));
133
+ height: var(--hybrid-input-number-icons-height, var(--hybrid-input-local-number-icons-height));
134
+ }
135
+
136
+ /* Number icons separator styling */
137
+ #icons-separator {
138
+ color: var(--hybrid-input-number-icons-separator-color, var(--hybrid-input-local-number-icons-separator-color));
139
+ padding-bottom: var(--hybrid-input-number-icons-separator-padding-bottom, var(--hybrid-input-local-number-icons-separator-padding-bottom));
140
+ padding-left: var(--hybrid-input-number-icons-separator-padding-left, var(--hybrid-input-local-number-icons-separator-padding-left));
141
+ padding-right: var(--hybrid-input-number-icons-separator-padding-right, var(--hybrid-input-local-number-icons-separator-padding-right));
69
142
  }
70
143
 
144
+ /*
145
+ * Disabled state for all icons
146
+ * Applied when input is disabled - reduces opacity and disables interaction
147
+ */
71
148
  :host([disabled]) #password-icon,
72
149
  :host([disabled]) #error-icon,
73
150
  :host([disabled]) #warning-icon,
74
151
  :host([disabled]) #number-icons,
75
152
  :host([disabled]) #calendar-icon,
76
153
  :host([disabled]) #copy-icon {
77
- opacity: var(--hybrid-input-disabled-icon-opacity,var(--hybrid-input-local-disabled-icon-opacity));
154
+ opacity: var(--hybrid-input-disabled-icon-opacity, var(--hybrid-input-local-disabled-icon-opacity));
78
155
  }
79
156
 
80
- :host(:not([disabled])[state='error']) > #input-container {
81
- border: var(--hybrid-input-error-border,var(--hybrid-input-local-error-border));
157
+ /* Disabled icons cursor override */
158
+ :host([disabled]) #password-icon,
159
+ :host([disabled]) #number-icons,
160
+ :host([disabled]) #copy-icon {
161
+ cursor: not-allowed;
82
162
  }
83
163
 
84
- :host([state='error']) input[type='number'] ~ #number-icons,
85
- :host([state='warning']) input[type='number'] ~ #number-icons {
86
- position: static;
87
- padding-left: var(--hybrid-input-number-icons-container-padding-left,var(--hybrid-input-local-number-icons-container-padding-left));
88
- }
164
+ /* ========================================
165
+ * INPUT CONTAINER STYLES
166
+ * ======================================== */
89
167
 
90
- :host([state='error']) ::slotted([slot='helper-text']) {
91
- color: var(--hybrid-input-error-helper-text-color,var(--hybrid-input-local-error-helper-text-color));
168
+ /*
169
+ * Main input container element
170
+ * Uses CSS custom properties for comprehensive border and layout control
171
+ */
172
+ #input-container {
173
+ /* Border properties - individual sides for granular control */
174
+ border-bottom: var(--hybrid-input-border-bottom, var(--hybrid-input-local-border-bottom));
175
+ border-top: var(--hybrid-input-border-top, var(--hybrid-input-local-border-top));
176
+ border-left: var(--hybrid-input-border-left, var(--hybrid-input-local-border-left));
177
+ border-right: var(--hybrid-input-border-right, var(--hybrid-input-local-border-right));
178
+
179
+ /* Border radius - individual corners for design flexibility */
180
+ border-radius: var(--hybrid-input-border-radius, var(--hybrid-input-local-border-radius));
181
+ border-top-left-radius: var(--hybrid-input-border-top-left-radius, var(--hybrid-input-local-border-top-left-radius));
182
+ border-top-right-radius: var(--hybrid-input-border-top-right-radius, var(--hybrid-input-local-border-top-right-radius));
183
+ border-bottom-left-radius: var(--hybrid-input-border-bottom-left-radius, var(--hybrid-input-local-border-bottom-left-radius));
184
+ border-bottom-right-radius: var(--hybrid-input-border-bottom-right-radius, var(--hybrid-input-local-border-bottom-right-radius));
185
+
186
+ /* Layout */
187
+ display: flex;
188
+ position: relative;
92
189
  }
93
190
 
94
- :host([state='warning']) ::slotted([slot='helper-text']) {
95
- color: var(--hybrid-input-warning-helper-text-color,var(--hybrid-input-local-warning-helper-text-color));
191
+ /*
192
+ * Disabled container border styles
193
+ * Applied when input is disabled
194
+ */
195
+ :host([disabled]) #input-container {
196
+ border-bottom: var(--hybrid-input-disabled-border-bottom, var(--hybrid-input-local-disabled-border-bottom));
197
+ border-top: var(--hybrid-input-disabled-border-top, var(--hybrid-input-local-disabled-border-top));
198
+ border-left: var(--hybrid-input-disabled-border-left, var(--hybrid-input-local-disabled-border-left));
199
+ border-right: var(--hybrid-input-disabled-border-right, var(--hybrid-input-local-disabled-border-right));
200
+ opacity: 0.6;
96
201
  }
97
202
 
98
- :host(:not([state='error'])) > #input-container:focus-within {
99
- border: var(--hybrid-input-focus-border,var(--hybrid-input-local-focus-border));
100
- }
203
+ /* ========================================
204
+ * INPUT ELEMENT STYLES
205
+ * ======================================== */
101
206
 
102
- :host([disabled]) #password-icon,
103
- :host([disabled]) #number-icons,
104
- :host([disabled]) #copy-icon {
105
- cursor: not-allowed;
106
- }
107
-
108
- :host([disabled]) ::placeholder {
109
- color: var(--hybrid-input-disabled-placeholder-color,var(--hybrid-input-local-disabled-placeholder-color));
207
+ /*
208
+ * Base input element styling
209
+ * Full width with no default borders, using container for styling
210
+ */
211
+ input {
212
+ width: 100%;
213
+ border: none;
214
+ outline: none;
215
+ color: var(--hybrid-input-text-color, var(--hybrid-input-local-text-color));
216
+ font-family: var(--hybrid-input-font-family, var(--hybrid-input-local-font-family));
217
+ font-size: var(--hybrid-input-font-size, var(--hybrid-input-local-font-size));
110
218
  }
111
219
 
220
+ /* Remove default number input spinners */
112
221
  /* Chrome, Safari, Edge, Opera */
113
222
  input::-webkit-outer-spin-button,
114
223
  input::-webkit-inner-spin-button {
115
224
  -webkit-appearance: none;
116
225
  }
226
+
117
227
  /* Firefox */
118
228
  input[type='number'] {
119
229
  -moz-appearance: textfield;
120
230
  }
121
231
 
122
- #icons-separator {
123
- color: var(--hybrid-input-number-icons-sperator-color,var(--hybrid-input-local-number-icons-sperator-color));
124
- padding-bottom: var(--hybrid-input-number-icons-sperator-padding-bottom,var(--hybrid-input-local-number-icons-sperator-padding-bottom));
125
- padding-left: var(--hybrid-input-number-icons-sperator-padding-left,var(--hybrid-input-local-number-icons-sperator-padding-left));
126
- padding-right: var(--hybrid-input-number-icons-sperator-padding-right,var(--hybrid-input-local-number-icons-sperator-padding-right));
127
- }
232
+ /* ========================================
233
+ * STATE STYLES
234
+ * ======================================== */
128
235
 
129
- #input-container {
130
- border-bottom: var(--hybrid-input-border-bottom,var(--hybrid-input-local-border-bottom));
131
- border-top: var(--hybrid-input-border-top,var(--hybrid-input-local-border-top));
132
- border-left: var(--hybrid-input-border-left,var(--hybrid-input-local-border-left));
133
- border-right: var(--hybrid-input-border-right,var(--hybrid-input-local-border-right,));
134
- border-radius: var(--hybrid-input-border-radius,var(--hybrid-input-local-border-radius));
135
- border-top-left-radius:var(--hybrid-input-border-top-left-radius,var(--hybrid-input-local-border-top-left-radius)) ;
136
- border-top-right-radius: var(--hybrid-input-border-top-right-radius,var(--hybrid-input-local-border-top-right-radius));
137
- border-bottom-left-radius: var(--hybrid-input-border-bottom-left-radius,var(--hybrid-input-local-border-bottom-left-radius));
138
- border-bottom-right-radius: var(--hybrid-input-border-bottom-right-radius,var(--hybrid-input-local-border-bottom-right-radius));
139
- display: flex;
140
- position: relative;
236
+ /*
237
+ * Error state styling
238
+ * Applied when state='error' and not disabled
239
+ */
240
+ :host(:not([disabled])[state='error']) > #input-container {
241
+ border: var(--hybrid-input-error-border, var(--hybrid-input-local-error-border));
141
242
  }
142
243
 
143
- :host([disabled]) #input-container {
144
- border-bottom: var(--hybrid-input-disabled-border-bottom,var(--hybrid-input-local-disabled-border-bottom));
145
- border-top: var(--hybrid-input-disabled-border-top,var(--hybrid-input-local-disabled-border-top));
146
- border-left:var(--hybrid-input-disabled-border-left,var(--hybrid-input-local-disabled-border-left));
147
- border-right:var(--hybrid-input-disabled-border-right,var(--hybrid-input-local-disabled-border-right));
148
- opacity:0.6;
244
+ /*
245
+ * Focus state styling
246
+ * Applied when input receives focus and not in error state
247
+ */
248
+ :host(:not([state='error'])) > #input-container:focus-within {
249
+ border: var(--hybrid-input-focus-border, var(--hybrid-input-local-focus-border));
149
250
  }
150
251
 
151
- input {
152
- width: 100%;
153
- border: none;
154
- outline: none;
155
- color: var(--hybrid-input-text-color,var(--hybrid-input-local-text-color));
156
- font-family: var(--hybrid-input-font-family,var(--hybrid-input-local-font-family));
157
- font-size:var(--hybrid-input-font-size,var(--hybrid-input-local-font-size));
252
+ /*
253
+ * Number input icon positioning adjustments for error/warning states
254
+ * When validation states are present, adjust icon positioning
255
+ */
256
+ :host([state='error']) input[type='number'] ~ #number-icons,
257
+ :host([state='warning']) input[type='number'] ~ #number-icons {
258
+ position: static;
259
+ padding-left: var(--hybrid-input-number-icons-container-padding-left, var(--hybrid-input-local-number-icons-container-padding-left));
158
260
  }
159
261
 
262
+ /* ========================================
263
+ * SLOTTED CONTENT STYLES
264
+ * ======================================== */
265
+
266
+ /*
267
+ * Label slot styling
268
+ * Applied to slotted label elements
269
+ */
160
270
  ::slotted([slot='label']) {
161
- color: var(--hybrid-input-label-color,var(--hybrid-input-local-label-color));
162
- font-size: var(--hybrid-input-label-font-size,var(--hybrid-input-local-label-font-size));
163
- padding-bottom: var(--hybrid-input-label-padding-bottom,var(--hybrid-input-local-label-padding-bottom));
271
+ color: var(--hybrid-input-label-color, var(--hybrid-input-local-label-color));
272
+ font-size: var(--hybrid-input-label-font-size, var(--hybrid-input-local-label-font-size));
273
+ padding-bottom: var(--hybrid-input-label-padding-bottom, var(--hybrid-input-local-label-padding-bottom));
164
274
  }
165
275
 
276
+ /*
277
+ * Helper text slot styling
278
+ * Applied to slotted helper text elements
279
+ */
166
280
  ::slotted([slot='helper-text']) {
167
- color: var(--hybrid-input-helper-text-color,var(--hybrid-input-local-helper-text-color));
168
- font-size: var(--hybrid-input-helper-text-font-size,var(--hybrid-input-local-helper-text-font-size));
169
- padding-top: var(--hybrid-input-helper-text-padding-top,var(--hybrid-input-local-helper-text-padding-top));
281
+ color: var(--hybrid-input-helper-text-color, var(--hybrid-input-local-helper-text-color));
282
+ font-size: var(--hybrid-input-helper-text-font-size, var(--hybrid-input-local-helper-text-font-size));
283
+ padding-top: var(--hybrid-input-helper-text-padding-top, var(--hybrid-input-local-helper-text-padding-top));
284
+ }
285
+
286
+ /*
287
+ * State-specific helper text colors
288
+ * Override helper text color based on validation state
289
+ */
290
+ :host([state='error']) ::slotted([slot='helper-text']) {
291
+ color: var(--hybrid-input-error-helper-text-color, var(--hybrid-input-local-error-helper-text-color));
170
292
  }
171
293
 
294
+ :host([state='warning']) ::slotted([slot='helper-text']) {
295
+ color: var(--hybrid-input-warning-helper-text-color, var(--hybrid-input-local-warning-helper-text-color));
296
+ }
297
+
298
+ /*
299
+ * Disabled state for slotted content
300
+ * Applied when input is disabled
301
+ */
172
302
  :host([disabled]) ::slotted([slot='helper-text']) {
173
- color: var(--hybrid-input-disabled-helper-text-color,var(--hybrid-input-local-disabled-helper-text-color));
303
+ color: var(--hybrid-input-disabled-helper-text-color, var(--hybrid-input-local-disabled-helper-text-color));
174
304
  }
175
305
 
176
306
  :host([disabled]) ::slotted([slot='label']) {
177
- color: var(--hybrid-input-disabled-label-color,var(--hybrid-input-local-disabled-label-color));
307
+ color: var(--hybrid-input-disabled-label-color, var(--hybrid-input-local-disabled-label-color));
178
308
  }
179
309
  `;
310
+ /**
311
+ * Size variation styles for the input component
312
+ * Defines padding and spacing for different input sizes
313
+ */
180
314
  const sizeInputStyle = css `
315
+ /* ========================================
316
+ * SIZE VARIATIONS
317
+ * ======================================== */
318
+
319
+ /* Large input size variant */
181
320
  div[data-size='large'] {
182
- padding-top: var(--hybrid-input-large-padding-top,var(--hybrid-input-local-large-padding-top));
183
- padding-bottom: var(--hybrid-input-large-padding-bottom,var(--hybrid-input-local-large-padding-bottom));
184
- padding-left: var(--hybrid-input-large-padding-left,var(--hybrid-input-local-large-padding-left));
185
- padding-right: var(--hybrid-input-large-padding-right,var(--hybrid-input-local-large-padding-right));
321
+ padding-top: var(--hybrid-input-large-padding-top, var(--hybrid-input-local-large-padding-top));
322
+ padding-bottom: var(--hybrid-input-large-padding-bottom, var(--hybrid-input-local-large-padding-bottom));
323
+ padding-left: var(--hybrid-input-large-padding-left, var(--hybrid-input-local-large-padding-left));
324
+ padding-right: var(--hybrid-input-large-padding-right, var(--hybrid-input-local-large-padding-right));
186
325
  }
187
326
 
327
+ /* Medium input size variant (default) */
188
328
  div[data-size='medium'] {
189
- padding-top: var(--hybrid-input-medium-padding-top,var(--hybrid-input-local-medium-padding-top));
190
- padding-bottom: var(--hybrid-input-medium-padding-bottom,var(--hybrid-input-local-medium-padding-bottom));
191
- padding-left: var(--hybrid-input-medium-padding-left,var(--hybrid-input-local-medium-padding-left));
192
- padding-right: var(--hybrid-input-medium-padding-right,var(--hybrid-input-local-medium-padding-right));
329
+ padding-top: var(--hybrid-input-medium-padding-top, var(--hybrid-input-local-medium-padding-top));
330
+ padding-bottom: var(--hybrid-input-medium-padding-bottom, var(--hybrid-input-local-medium-padding-bottom));
331
+ padding-left: var(--hybrid-input-medium-padding-left, var(--hybrid-input-local-medium-padding-left));
332
+ padding-right: var(--hybrid-input-medium-padding-right, var(--hybrid-input-local-medium-padding-right));
193
333
  }
194
334
 
335
+ /* Small input size variant */
195
336
  div[data-size='small'] {
196
- padding-top: var(--hybrid-input-small-padding-top,var(--hybrid-input-local-small-padding-top));
197
- padding-bottom: var(--hybrid-input-small-padding-bottom,var(--hybrid-input-local-small-padding-bottom));
198
- padding-left: var(--hybrid-input-small-padding-left,var(--hybrid-input-local-small-padding-left,));
199
- padding-right: var(--hybrid-input-small-padding-right,var(--hybrid-input-local-small-padding-right));
337
+ padding-top: var(--hybrid-input-small-padding-top, var(--hybrid-input-local-small-padding-top));
338
+ padding-bottom: var(--hybrid-input-small-padding-bottom, var(--hybrid-input-local-small-padding-bottom));
339
+ padding-left: var(--hybrid-input-small-padding-left, var(--hybrid-input-local-small-padding-left));
340
+ padding-right: var(--hybrid-input-small-padding-right, var(--hybrid-input-local-small-padding-right));
200
341
  }
201
342
  `;
202
343
  export const styles = [inputStyle, sizeInputStyle, styleVariables];
package/input.style.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"input.style.js","sourceRoot":"","sources":["../../../src/components/input/input.style.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,OAAO,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAEtD,MAAM,UAAU,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgLrB,CAAC;AAEF,MAAM,cAAc,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;CAqBzB,CAAC;AACF,MAAM,CAAC,MAAM,MAAM,GAAG,CAAC,UAAU,EAAE,cAAc,EAAE,cAAc,CAAC,CAAC","sourcesContent":["import { css } from 'lit';\nimport { styleVariables } from './variables.style.js';\n\nconst inputStyle = css`\n :host {\n display: flex;\n flex-direction: column;\n font-family: var(--hybrid-input-font-family,var(--hybrid-input-local-font-family));\n }\n\n :host > #input-container,\n #input-container > input {\n background-color: var(--hybrid-input-background-color,var(--hybrid-input-local-background-color));\n }\n\n :host([disabled]) > #input-container,\n :host([disabled]) > #input-container > input {\n background-color: var(--hybrid-input-disabled-background-color,var(--hybrid-input-local-disabled-background-color));\n cursor: not-allowed;\n }\n\n hy-icon {\n display: flex;\n align-items: center;\n }\n\n ::placeholder {\n color: var(--hybrid-input-placeholder-color,var(--hybrid-input-local-placeholder-color));\n font-size: var(--hybrid-input-placeholder-font-size,var(--hybrid-input-local-placeholder-font-size));\n font-family: var(--hybrid-input-font-family,var(--hybrid-input-local-font-family));\n }\n #warning-icon {\n --hybrid-icon-color: var(--hybrid-input-warning-icon-color,var(--hybrid-input-local-warning-icon-color,));\n }\n #error-icon {\n --hybrid-icon-color: var(--hybrid-input-error-icon-color,var(--hybrid-input-local-error-icon-color));\n }\n #calendar-icon {\n --hybrid-icon-color: var(--hybrid-input-calendar-icon-color,var(--hybrid-input-local-calendar-icon-color));\n }\n #password-icon {\n padding-left: var(--hybrid-input-password-icon-padding-left,var(--hybrid-input-local-password-icon-padding-left,));\n padding-right: var(--hybrid-input-password-icon-padding-right,var(--hybrid-input-local-password-icon-padding-right));\n cursor: pointer;\n --hybrid-icon-color: var(--hybrid-input-password-icon-color,var(--hybrid-input-local-password-icon-color));\n }\n #copy-icon {\n padding-right: var(--hybrid-input-copy-icon-padding-right,var(--hybrid-input-local-copy-icon-padding-right));\n --hybrid-icon-color: var(--hybrid-input-copy-icon-color,var(--hybrid-input-local-copy-icon-color));\n cursor: pointer;\n }\n #number-icons {\n display: flex;\n justify-content: space-between;\n align-items: center;\n cursor: pointer;\n position: absolute;\n right: 0;\n top: 0;\n height: 100%;\n width: var(--hybrid-input-number-icons-container-width,var(--hybrid-input-local-number-icons-container-width));\n padding-right: var(--hybrid-input-number-icons-container-padding-right,var(--hybrid-input-local-number-icons-container-padding-right));\n }\n #number-icons hy-icon {\n --hybrid-icon-color: var(--hybrid-input-number-icons-color,var(--hybrid-input-local-number-icons-color));\n padding-left: var(--hybrid-input-number-icons-padding-left,var(--hybrid-input-local-number-icons-padding-left));\n padding-right: var(--hybrid-input-number-icons-padding-right,var(--hybrid-input-local-number-icons-padding-right));\n width: var(--hybrid-input-number-icons-width,var(--hybrid-input-local-number-icons-width));\n height: var(--hybrid-input-number-icons-height,var(--hybrid-input-local-number-icons-height));\n }\n\n :host([disabled]) #password-icon,\n :host([disabled]) #error-icon,\n :host([disabled]) #warning-icon,\n :host([disabled]) #number-icons,\n :host([disabled]) #calendar-icon,\n :host([disabled]) #copy-icon {\n opacity: var(--hybrid-input-disabled-icon-opacity,var(--hybrid-input-local-disabled-icon-opacity));\n }\n\n :host(:not([disabled])[state='error']) > #input-container {\n border: var(--hybrid-input-error-border,var(--hybrid-input-local-error-border));\n }\n\n :host([state='error']) input[type='number'] ~ #number-icons,\n :host([state='warning']) input[type='number'] ~ #number-icons {\n position: static;\n padding-left: var(--hybrid-input-number-icons-container-padding-left,var(--hybrid-input-local-number-icons-container-padding-left));\n }\n\n :host([state='error']) ::slotted([slot='helper-text']) {\n color: var(--hybrid-input-error-helper-text-color,var(--hybrid-input-local-error-helper-text-color));\n }\n\n :host([state='warning']) ::slotted([slot='helper-text']) {\n color: var(--hybrid-input-warning-helper-text-color,var(--hybrid-input-local-warning-helper-text-color));\n }\n\n :host(:not([state='error'])) > #input-container:focus-within {\n border: var(--hybrid-input-focus-border,var(--hybrid-input-local-focus-border));\n }\n\n :host([disabled]) #password-icon,\n :host([disabled]) #number-icons,\n :host([disabled]) #copy-icon {\n cursor: not-allowed;\n }\n\n :host([disabled]) ::placeholder {\n color: var(--hybrid-input-disabled-placeholder-color,var(--hybrid-input-local-disabled-placeholder-color));\n }\n\n /* Chrome, Safari, Edge, Opera */\n input::-webkit-outer-spin-button,\n input::-webkit-inner-spin-button {\n -webkit-appearance: none;\n }\n /* Firefox */\n input[type='number'] {\n -moz-appearance: textfield;\n }\n\n #icons-separator {\n color: var(--hybrid-input-number-icons-sperator-color,var(--hybrid-input-local-number-icons-sperator-color));\n padding-bottom: var(--hybrid-input-number-icons-sperator-padding-bottom,var(--hybrid-input-local-number-icons-sperator-padding-bottom));\n padding-left: var(--hybrid-input-number-icons-sperator-padding-left,var(--hybrid-input-local-number-icons-sperator-padding-left));\n padding-right: var(--hybrid-input-number-icons-sperator-padding-right,var(--hybrid-input-local-number-icons-sperator-padding-right));\n }\n\n #input-container {\n border-bottom: var(--hybrid-input-border-bottom,var(--hybrid-input-local-border-bottom));\n border-top: var(--hybrid-input-border-top,var(--hybrid-input-local-border-top));\n border-left: var(--hybrid-input-border-left,var(--hybrid-input-local-border-left));\n border-right: var(--hybrid-input-border-right,var(--hybrid-input-local-border-right,));\n border-radius: var(--hybrid-input-border-radius,var(--hybrid-input-local-border-radius)); \n border-top-left-radius:var(--hybrid-input-border-top-left-radius,var(--hybrid-input-local-border-top-left-radius)) ;\n border-top-right-radius: var(--hybrid-input-border-top-right-radius,var(--hybrid-input-local-border-top-right-radius));\n border-bottom-left-radius: var(--hybrid-input-border-bottom-left-radius,var(--hybrid-input-local-border-bottom-left-radius));\n border-bottom-right-radius: var(--hybrid-input-border-bottom-right-radius,var(--hybrid-input-local-border-bottom-right-radius));\n display: flex;\n position: relative;\n }\n\n :host([disabled]) #input-container {\n border-bottom: var(--hybrid-input-disabled-border-bottom,var(--hybrid-input-local-disabled-border-bottom));\n border-top: var(--hybrid-input-disabled-border-top,var(--hybrid-input-local-disabled-border-top));\n border-left:var(--hybrid-input-disabled-border-left,var(--hybrid-input-local-disabled-border-left));\n border-right:var(--hybrid-input-disabled-border-right,var(--hybrid-input-local-disabled-border-right));\n opacity:0.6;\n }\n\n input {\n width: 100%;\n border: none;\n outline: none;\n color: var(--hybrid-input-text-color,var(--hybrid-input-local-text-color));\n font-family: var(--hybrid-input-font-family,var(--hybrid-input-local-font-family));\n font-size:var(--hybrid-input-font-size,var(--hybrid-input-local-font-size));\n }\n\n ::slotted([slot='label']) {\n color: var(--hybrid-input-label-color,var(--hybrid-input-local-label-color));\n font-size: var(--hybrid-input-label-font-size,var(--hybrid-input-local-label-font-size));\n padding-bottom: var(--hybrid-input-label-padding-bottom,var(--hybrid-input-local-label-padding-bottom));\n }\n\n ::slotted([slot='helper-text']) {\n color: var(--hybrid-input-helper-text-color,var(--hybrid-input-local-helper-text-color));\n font-size: var(--hybrid-input-helper-text-font-size,var(--hybrid-input-local-helper-text-font-size));\n padding-top: var(--hybrid-input-helper-text-padding-top,var(--hybrid-input-local-helper-text-padding-top));\n }\n\n :host([disabled]) ::slotted([slot='helper-text']) {\n color: var(--hybrid-input-disabled-helper-text-color,var(--hybrid-input-local-disabled-helper-text-color));\n }\n\n :host([disabled]) ::slotted([slot='label']) {\n color: var(--hybrid-input-disabled-label-color,var(--hybrid-input-local-disabled-label-color));\n }\n`;\n\nconst sizeInputStyle = css`\n div[data-size='large'] {\n padding-top: var(--hybrid-input-large-padding-top,var(--hybrid-input-local-large-padding-top));\n padding-bottom: var(--hybrid-input-large-padding-bottom,var(--hybrid-input-local-large-padding-bottom));\n padding-left: var(--hybrid-input-large-padding-left,var(--hybrid-input-local-large-padding-left));\n padding-right: var(--hybrid-input-large-padding-right,var(--hybrid-input-local-large-padding-right));\n }\n\n div[data-size='medium'] {\n padding-top: var(--hybrid-input-medium-padding-top,var(--hybrid-input-local-medium-padding-top));\n padding-bottom: var(--hybrid-input-medium-padding-bottom,var(--hybrid-input-local-medium-padding-bottom));\n padding-left: var(--hybrid-input-medium-padding-left,var(--hybrid-input-local-medium-padding-left));\n padding-right: var(--hybrid-input-medium-padding-right,var(--hybrid-input-local-medium-padding-right));\n }\n\n div[data-size='small'] {\n padding-top: var(--hybrid-input-small-padding-top,var(--hybrid-input-local-small-padding-top));\n padding-bottom: var(--hybrid-input-small-padding-bottom,var(--hybrid-input-local-small-padding-bottom));\n padding-left: var(--hybrid-input-small-padding-left,var(--hybrid-input-local-small-padding-left,));\n padding-right: var(--hybrid-input-small-padding-right,var(--hybrid-input-local-small-padding-right));\n }\n`;\nexport const styles = [inputStyle, sizeInputStyle, styleVariables];\n"]}
1
+ {"version":3,"file":"input.style.js","sourceRoot":"","sources":["../../../src/components/input/input.style.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,OAAO,EAAE,cAAc,EAAE,MAAM,4BAA4B,CAAC;AAE5D;;;;;;;;;;;;;;GAcG;AAEH,MAAM,UAAU,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmSrB,CAAC;AAEF;;;GAGG;AACH,MAAM,cAAc,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4BzB,CAAC;AAEF,MAAM,CAAC,MAAM,MAAM,GAAG,CAAC,UAAU,EAAE,cAAc,EAAE,cAAc,CAAC,CAAC","sourcesContent":["import { css } from 'lit';\nimport { styleVariables } from './input.style.variable..js';\n\n/**\n * Input component styles for the Hybrid UI Library\n * \n * This file contains all the styling for the nr-input component, including:\n * - Base input styles with CSS custom properties for theming\n * - Multiple input states (default, warning, error)\n * - Size variations (small, medium, large)\n * - Different input types (text, password, number, calendar)\n * - Icon positioning and styling\n * - Focus, disabled, and validation states\n * - Dark theme support\n * \n * The styling system uses CSS custom properties with fallbacks to allow\n * for both global and local customization of input appearance.\n */\n\nconst inputStyle = css`\n /* \n * Host element base styles\n * Container for the input component with flexible layout\n */\n :host {\n display: flex;\n flex-direction: column;\n font-family: var(--hybrid-input-font-family, var(--hybrid-input-local-font-family));\n }\n\n /* \n * Base input container and input element styles\n * Uses CSS custom properties with fallbacks for comprehensive theming support\n * Properties follow the pattern: --hybrid-input-{property}, --hybrid-input-local-{property}\n */\n :host > #input-container,\n #input-container > input {\n background-color: var(--hybrid-input-background-color, var(--hybrid-input-local-background-color));\n }\n\n /* \n * Disabled state styles for container and input\n * Applied when input is disabled - removes interactivity and applies muted colors\n */\n :host([disabled]) > #input-container,\n :host([disabled]) > #input-container > input {\n background-color: var(--hybrid-input-disabled-background-color, var(--hybrid-input-local-disabled-background-color));\n cursor: not-allowed;\n }\n\n /* \n * Icon base styles\n * Common styling for all icons within the input component\n */\n hy-icon {\n display: flex;\n align-items: center;\n }\n\n /* \n * Placeholder styling\n * Customizable placeholder text appearance\n */\n ::placeholder {\n color: var(--hybrid-input-placeholder-color, var(--hybrid-input-local-placeholder-color));\n font-size: var(--hybrid-input-placeholder-font-size, var(--hybrid-input-local-placeholder-font-size));\n font-family: var(--hybrid-input-font-family, var(--hybrid-input-local-font-family));\n }\n\n /* \n * Disabled placeholder styling\n * Applied when input is disabled\n */\n :host([disabled]) ::placeholder {\n color: var(--hybrid-input-disabled-placeholder-color, var(--hybrid-input-local-disabled-placeholder-color));\n }\n\n /* ========================================\n * ICON VARIANTS AND STATES\n * ======================================== */\n\n /* Warning state icon */\n #warning-icon {\n --hybrid-icon-color: var(--hybrid-input-warning-icon-color, var(--hybrid-input-local-warning-icon-color));\n }\n\n /* Error state icon */\n #error-icon {\n --hybrid-icon-color: var(--hybrid-input-error-icon-color, var(--hybrid-input-local-error-icon-color));\n }\n\n /* Calendar input type icon */\n #calendar-icon {\n --hybrid-icon-color: var(--hybrid-input-calendar-icon-color, var(--hybrid-input-local-calendar-icon-color));\n }\n\n /* Password toggle icon */\n #password-icon {\n padding-left: var(--hybrid-input-password-icon-padding-left, var(--hybrid-input-local-password-icon-padding-left));\n padding-right: var(--hybrid-input-password-icon-padding-right, var(--hybrid-input-local-password-icon-padding-right));\n cursor: pointer;\n --hybrid-icon-color: var(--hybrid-input-password-icon-color, var(--hybrid-input-local-password-icon-color));\n }\n\n /* Copy functionality icon */\n #copy-icon {\n padding-right: var(--hybrid-input-copy-icon-padding-right, var(--hybrid-input-local-copy-icon-padding-right));\n --hybrid-icon-color: var(--hybrid-input-copy-icon-color, var(--hybrid-input-local-copy-icon-color));\n cursor: pointer;\n }\n\n /* \n * Number input increment/decrement icons container\n * Positioned absolutely for overlay on input\n */\n #number-icons {\n display: flex;\n justify-content: space-between;\n align-items: center;\n cursor: pointer;\n position: absolute;\n right: 0;\n top: 0;\n height: 100%;\n width: var(--hybrid-input-number-icons-container-width, var(--hybrid-input-local-number-icons-container-width));\n padding-right: var(--hybrid-input-number-icons-container-padding-right, var(--hybrid-input-local-number-icons-container-padding-right));\n }\n\n /* Individual number icons styling */\n #number-icons hy-icon {\n --hybrid-icon-color: var(--hybrid-input-number-icons-color, var(--hybrid-input-local-number-icons-color));\n padding-left: var(--hybrid-input-number-icons-padding-left, var(--hybrid-input-local-number-icons-padding-left));\n padding-right: var(--hybrid-input-number-icons-padding-right, var(--hybrid-input-local-number-icons-padding-right));\n width: var(--hybrid-input-number-icons-width, var(--hybrid-input-local-number-icons-width));\n height: var(--hybrid-input-number-icons-height, var(--hybrid-input-local-number-icons-height));\n }\n\n /* Number icons separator styling */\n #icons-separator {\n color: var(--hybrid-input-number-icons-separator-color, var(--hybrid-input-local-number-icons-separator-color));\n padding-bottom: var(--hybrid-input-number-icons-separator-padding-bottom, var(--hybrid-input-local-number-icons-separator-padding-bottom));\n padding-left: var(--hybrid-input-number-icons-separator-padding-left, var(--hybrid-input-local-number-icons-separator-padding-left));\n padding-right: var(--hybrid-input-number-icons-separator-padding-right, var(--hybrid-input-local-number-icons-separator-padding-right));\n }\n\n /* \n * Disabled state for all icons\n * Applied when input is disabled - reduces opacity and disables interaction\n */\n :host([disabled]) #password-icon,\n :host([disabled]) #error-icon,\n :host([disabled]) #warning-icon,\n :host([disabled]) #number-icons,\n :host([disabled]) #calendar-icon,\n :host([disabled]) #copy-icon {\n opacity: var(--hybrid-input-disabled-icon-opacity, var(--hybrid-input-local-disabled-icon-opacity));\n }\n\n /* Disabled icons cursor override */\n :host([disabled]) #password-icon,\n :host([disabled]) #number-icons,\n :host([disabled]) #copy-icon {\n cursor: not-allowed;\n }\n\n /* ========================================\n * INPUT CONTAINER STYLES\n * ======================================== */\n\n /* \n * Main input container element\n * Uses CSS custom properties for comprehensive border and layout control\n */\n #input-container {\n /* Border properties - individual sides for granular control */\n border-bottom: var(--hybrid-input-border-bottom, var(--hybrid-input-local-border-bottom));\n border-top: var(--hybrid-input-border-top, var(--hybrid-input-local-border-top));\n border-left: var(--hybrid-input-border-left, var(--hybrid-input-local-border-left));\n border-right: var(--hybrid-input-border-right, var(--hybrid-input-local-border-right));\n \n /* Border radius - individual corners for design flexibility */\n border-radius: var(--hybrid-input-border-radius, var(--hybrid-input-local-border-radius)); \n border-top-left-radius: var(--hybrid-input-border-top-left-radius, var(--hybrid-input-local-border-top-left-radius));\n border-top-right-radius: var(--hybrid-input-border-top-right-radius, var(--hybrid-input-local-border-top-right-radius));\n border-bottom-left-radius: var(--hybrid-input-border-bottom-left-radius, var(--hybrid-input-local-border-bottom-left-radius));\n border-bottom-right-radius: var(--hybrid-input-border-bottom-right-radius, var(--hybrid-input-local-border-bottom-right-radius));\n \n /* Layout */\n display: flex;\n position: relative;\n }\n\n /* \n * Disabled container border styles\n * Applied when input is disabled\n */\n :host([disabled]) #input-container {\n border-bottom: var(--hybrid-input-disabled-border-bottom, var(--hybrid-input-local-disabled-border-bottom));\n border-top: var(--hybrid-input-disabled-border-top, var(--hybrid-input-local-disabled-border-top));\n border-left: var(--hybrid-input-disabled-border-left, var(--hybrid-input-local-disabled-border-left));\n border-right: var(--hybrid-input-disabled-border-right, var(--hybrid-input-local-disabled-border-right));\n opacity: 0.6;\n }\n\n /* ========================================\n * INPUT ELEMENT STYLES\n * ======================================== */\n\n /* \n * Base input element styling\n * Full width with no default borders, using container for styling\n */\n input {\n width: 100%;\n border: none;\n outline: none;\n color: var(--hybrid-input-text-color, var(--hybrid-input-local-text-color));\n font-family: var(--hybrid-input-font-family, var(--hybrid-input-local-font-family));\n font-size: var(--hybrid-input-font-size, var(--hybrid-input-local-font-size));\n }\n\n /* Remove default number input spinners */\n /* Chrome, Safari, Edge, Opera */\n input::-webkit-outer-spin-button,\n input::-webkit-inner-spin-button {\n -webkit-appearance: none;\n }\n \n /* Firefox */\n input[type='number'] {\n -moz-appearance: textfield;\n }\n\n /* ========================================\n * STATE STYLES\n * ======================================== */\n\n /* \n * Error state styling\n * Applied when state='error' and not disabled\n */\n :host(:not([disabled])[state='error']) > #input-container {\n border: var(--hybrid-input-error-border, var(--hybrid-input-local-error-border));\n }\n\n /* \n * Focus state styling\n * Applied when input receives focus and not in error state\n */\n :host(:not([state='error'])) > #input-container:focus-within {\n border: var(--hybrid-input-focus-border, var(--hybrid-input-local-focus-border));\n }\n\n /* \n * Number input icon positioning adjustments for error/warning states\n * When validation states are present, adjust icon positioning\n */\n :host([state='error']) input[type='number'] ~ #number-icons,\n :host([state='warning']) input[type='number'] ~ #number-icons {\n position: static;\n padding-left: var(--hybrid-input-number-icons-container-padding-left, var(--hybrid-input-local-number-icons-container-padding-left));\n }\n\n /* ========================================\n * SLOTTED CONTENT STYLES\n * ======================================== */\n\n /* \n * Label slot styling\n * Applied to slotted label elements\n */\n ::slotted([slot='label']) {\n color: var(--hybrid-input-label-color, var(--hybrid-input-local-label-color));\n font-size: var(--hybrid-input-label-font-size, var(--hybrid-input-local-label-font-size));\n padding-bottom: var(--hybrid-input-label-padding-bottom, var(--hybrid-input-local-label-padding-bottom));\n }\n\n /* \n * Helper text slot styling\n * Applied to slotted helper text elements\n */\n ::slotted([slot='helper-text']) {\n color: var(--hybrid-input-helper-text-color, var(--hybrid-input-local-helper-text-color));\n font-size: var(--hybrid-input-helper-text-font-size, var(--hybrid-input-local-helper-text-font-size));\n padding-top: var(--hybrid-input-helper-text-padding-top, var(--hybrid-input-local-helper-text-padding-top));\n }\n\n /* \n * State-specific helper text colors\n * Override helper text color based on validation state\n */\n :host([state='error']) ::slotted([slot='helper-text']) {\n color: var(--hybrid-input-error-helper-text-color, var(--hybrid-input-local-error-helper-text-color));\n }\n\n :host([state='warning']) ::slotted([slot='helper-text']) {\n color: var(--hybrid-input-warning-helper-text-color, var(--hybrid-input-local-warning-helper-text-color));\n }\n\n /* \n * Disabled state for slotted content\n * Applied when input is disabled\n */\n :host([disabled]) ::slotted([slot='helper-text']) {\n color: var(--hybrid-input-disabled-helper-text-color, var(--hybrid-input-local-disabled-helper-text-color));\n }\n\n :host([disabled]) ::slotted([slot='label']) {\n color: var(--hybrid-input-disabled-label-color, var(--hybrid-input-local-disabled-label-color));\n }\n`;\n\n/**\n * Size variation styles for the input component\n * Defines padding and spacing for different input sizes\n */\nconst sizeInputStyle = css`\n /* ========================================\n * SIZE VARIATIONS\n * ======================================== */\n\n /* Large input size variant */\n div[data-size='large'] {\n padding-top: var(--hybrid-input-large-padding-top, var(--hybrid-input-local-large-padding-top));\n padding-bottom: var(--hybrid-input-large-padding-bottom, var(--hybrid-input-local-large-padding-bottom));\n padding-left: var(--hybrid-input-large-padding-left, var(--hybrid-input-local-large-padding-left));\n padding-right: var(--hybrid-input-large-padding-right, var(--hybrid-input-local-large-padding-right));\n }\n\n /* Medium input size variant (default) */\n div[data-size='medium'] {\n padding-top: var(--hybrid-input-medium-padding-top, var(--hybrid-input-local-medium-padding-top));\n padding-bottom: var(--hybrid-input-medium-padding-bottom, var(--hybrid-input-local-medium-padding-bottom));\n padding-left: var(--hybrid-input-medium-padding-left, var(--hybrid-input-local-medium-padding-left));\n padding-right: var(--hybrid-input-medium-padding-right, var(--hybrid-input-local-medium-padding-right));\n }\n\n /* Small input size variant */\n div[data-size='small'] {\n padding-top: var(--hybrid-input-small-padding-top, var(--hybrid-input-local-small-padding-top));\n padding-bottom: var(--hybrid-input-small-padding-bottom, var(--hybrid-input-local-small-padding-bottom));\n padding-left: var(--hybrid-input-small-padding-left, var(--hybrid-input-local-small-padding-left));\n padding-right: var(--hybrid-input-small-padding-right, var(--hybrid-input-local-small-padding-right));\n }\n`;\n\nexport const styles = [inputStyle, sizeInputStyle, styleVariables];\n"]}
package/{variables.style.d.ts → input.style.variable..d.ts} RENAMED
@@ -1,2 +1,2 @@
1
1
  export declare const styleVariables: import("lit").CSSResult;
2
- //# sourceMappingURL=variables.style.d.ts.map
2
+ //# sourceMappingURL=input.style.variable..d.ts.map
package/input.style.variable..d.ts.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"input.style.variable..d.ts","sourceRoot":"","sources":["../../../src/components/input/input.style.variable..ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,cAAc,yBAgG1B,CAAC"}
package/{variables.style.js → input.style.variable..js} RENAMED
@@ -39,10 +39,10 @@ export const styleVariables = css `
39
39
  --hybrid-input-local-number-icons-color: #000000;
40
40
  --hybrid-input-local-password-icon-padding-left: 8px;
41
41
  --hybrid-input-local-password-icon-padding-right: 8px;
42
- --hybrid-input-local-number-icons-sperator-color: #e0e0e0;
43
- --hybrid-input-local-number-icons-sperator-padding-bottom: 4px;
44
- --hybrid-input-local-number-icons-sperator-padding-left: 5px;
45
- --hybrid-input-local-number-icons-sperator-padding-right: 5px;
42
+ --hybrid-input-local-number-icons-separator-color: #e0e0e0;
43
+ --hybrid-input-local-number-icons-separator-padding-bottom: 4px;
44
+ --hybrid-input-local-number-icons-separator-padding-left: 5px;
45
+ --hybrid-input-local-number-icons-separator-padding-right: 5px;
46
46
  --hybrid-input-local-copy-icon-padding-right:5px;
47
47
 
48
48
  --hybrid-input-local-number-icons-container-width: 70px;
@@ -70,27 +70,30 @@ export const styleVariables = css `
70
70
  --hybrid-input-local-small-padding-right: 4px;
71
71
  }
72
72
 
73
- @media (prefers-color-scheme: dark) {
74
- :host {
75
- --hybrid-input-local-background-color: #393939;
76
- --hybrid-input-local-focus-border: 2px solid #ffffff;
77
- --hybrid-input-local-text-color: #ffffff;
78
- --hybrid-input-local-error-border: 2px solid #fa4d56;
79
- --hybrid-input-local-error-helper-text-color: #ffb3b8;
80
- --hybrid-input-local-disabled-background-color: #393939;
81
- --hybrid-input-local-disabled-placeholder-color: #6f6f6f;
82
- --hybrid-input-local-disabled-helper-text-color: #6f6f6f;
83
- --hybrid-input-local-disabled-label-color: #6f6f6f;
84
- --hybrid-input-local-warning-icon-color: #f0c300;
85
- --hybrid-input-local-error-icon-color: #da1e28;
86
- --hybrid-input-local-password-icon-color: #ffffff;
87
- --hybrid-input-local-number-icons-color: #ffffff;
88
- --hybrid-input-local-label-color: #c6c6c6;
89
- --hybrid-input-local-helper-text-color: #c6c6c6;
90
- --hybrid-input-local-number-icon-sperator-color: #525252;
91
- --hybrid-input-local-calendar-icon-color: #ffffff;
92
- --hybrid-input-local-copy-icon-color: #ffffff;
93
- }
73
+ /*
74
+ * Dark theme styles using data-theme attribute on host element
75
+ * These override the light theme defaults when data-theme="dark" is applied
76
+ * This provides explicit theme control via JavaScript or HTML attributes
77
+ */
78
+ :host([data-theme="dark"]) {
79
+ --hybrid-input-local-background-color: #393939;
80
+ --hybrid-input-local-focus-border: 2px solid #ffffff;
81
+ --hybrid-input-local-text-color: #ffffff;
82
+ --hybrid-input-local-error-border: 2px solid #fa4d56;
83
+ --hybrid-input-local-error-helper-text-color: #ffb3b8;
84
+ --hybrid-input-local-disabled-background-color: #393939;
85
+ --hybrid-input-local-disabled-placeholder-color: #6f6f6f;
86
+ --hybrid-input-local-disabled-helper-text-color: #6f6f6f;
87
+ --hybrid-input-local-disabled-label-color: #6f6f6f;
88
+ --hybrid-input-local-warning-icon-color: #f0c300;
89
+ --hybrid-input-local-error-icon-color: #da1e28;
90
+ --hybrid-input-local-password-icon-color: #ffffff;
91
+ --hybrid-input-local-number-icons-color: #ffffff;
92
+ --hybrid-input-local-label-color: #c6c6c6;
93
+ --hybrid-input-local-helper-text-color: #c6c6c6;
94
+ --hybrid-input-local-number-icons-separator-color: #525252;
95
+ --hybrid-input-local-calendar-icon-color: #ffffff;
96
+ --hybrid-input-local-copy-icon-color: #ffffff;
94
97
  }
95
98
  `;
96
- //# sourceMappingURL=variables.style.js.map
99
+ //# sourceMappingURL=input.style.variable..js.map
package/input.style.variable..js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"input.style.variable..js","sourceRoot":"","sources":["../../../src/components/input/input.style.variable..ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AAExB,MAAM,CAAC,MAAM,cAAc,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgGhC,CAAC","sourcesContent":["import {css} from 'lit';\n\nexport const styleVariables = css`\n :host {\n --hybrid-input-local-background-color: #f4f4f4;\n --hybrid-input-local-text-color: #000000;\n --hybrid-input-local-font-family: Inter, ui-sans-serif, system-ui, -apple-system, \"Segoe UI\", Roboto, Ubuntu, Cantarell, \"Noto Sans\", sans-serif, \"system-ui\", \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, \"Noto Sans\", sans-serif, SFProLocalRange;\n --hybrid-input-local-font-size:13px;\n --hybrid-input-local-label-color: #525252;\n --hybrid-input-local-placeholder-color: #a8a8a8;\n --hybrid-input-local-border-bottom: 2px solid #a8a8a8;\n --hybrid-input-local-border-top: 2px solid transparent;\n --hybrid-input-local-border-left: 2px solid transparent;\n --hybrid-input-local-border-right: 2px solid transparent;\n --hybrid-input-local-disabled-border-bottom: none;\n --hybrid-input-local-disabled-border-top: none;\n --hybrid-input-local-disabled-border-left: none;\n --hybrid-input-local-disabled-border-right: none;\n --hybrid-input-local-focus-border: 2px solid #0f62fe;\n --hybrid-input-local-border-radius: 0px;\n --hybrid-input-local-label-font-size: 13px;\n --hybrid-input-local-helper-text-color: #525252;\n --hybrid-input-local-helper-text-font-size: 13px;\n --hybrid-input-local-placeholder-font-size: 13px;\n --hybrid-input-label-padding-bottom: 5px;\n --hybrid-input-local-helper-text-padding-top: 5px;\n --hybrid-input-local-disabled-background-color: #f4f4f4;\n --hybrid-input-local-disabled-placeholder-color: #c6c6c6;\n --hybrid-input-local-error-helper-text-color: #da1e28;\n --hybrid-input-local-error-border: 2px solid #da1e28;\n --hybrid-input-local-warning-helper-text-color: #161616;\n --hybrid-input-local-disabled-helper-text-color: #c6c6c6;\n --hybrid-input-local-disabled-label-color: #c6c6c6;\n --hybrid-input-local-warning-icon-color: #f0c300;\n --hybrid-input-local-error-icon-color: #da1e28;\n --hybrid-input-local-password-icon-color: #000000;\n --hybrid-input-local-calendar-icon-color: #000000;\n --hybrid-input-local-copy-icon-color: #000000;\n --hybrid-input-local-disabled-icon-opacity: 0.4;\n --hybrid-input-local-number-icons-color: #000000;\n --hybrid-input-local-password-icon-padding-left: 8px;\n --hybrid-input-local-password-icon-padding-right: 8px;\n --hybrid-input-local-number-icons-separator-color: #e0e0e0;\n --hybrid-input-local-number-icons-separator-padding-bottom: 4px;\n --hybrid-input-local-number-icons-separator-padding-left: 5px;\n --hybrid-input-local-number-icons-separator-padding-right: 5px;\n --hybrid-input-local-copy-icon-padding-right:5px;\n\n --hybrid-input-local-number-icons-container-width: 70px;\n --hybrid-input-local-number-icons-container-padding-left: 5px;\n --hybrid-input-local-number-icons-container-padding-right: 5px;\n --hybrid-input-local-number-icons-width: 12px;\n --hybrid-input-local-number-icons-height: 12px;\n\n --hybrid-input-local-number-icons-padding-left: 4px;\n --hybrid-input-local-number-icons-padding-right: 4px;\n\n --hybrid-input-local-large-padding-top: 10px;\n --hybrid-input-local-large-padding-bottom: 10px;\n --hybrid-input-local-large-padding-left: 9px;\n --hybrid-input-local-large-padding-right: 4px;\n\n --hybrid-input-local-medium-padding-top: 7px;\n --hybrid-input-local-medium-padding-bottom: 7px;\n --hybrid-input-local-medium-padding-left: 9px;\n --hybrid-input-local-medium-padding-right: 4px;\n\n --hybrid-input-local-small-padding-top: 4px;\n --hybrid-input-local-small-padding-bottom: 4px;\n --hybrid-input-local-small-padding-left: 9px;\n --hybrid-input-local-small-padding-right: 4px;\n }\n\n /* \n * Dark theme styles using data-theme attribute on host element\n * These override the light theme defaults when data-theme=\"dark\" is applied\n * This provides explicit theme control via JavaScript or HTML attributes\n */\n :host([data-theme=\"dark\"]) {\n --hybrid-input-local-background-color: #393939;\n --hybrid-input-local-focus-border: 2px solid #ffffff;\n --hybrid-input-local-text-color: #ffffff;\n --hybrid-input-local-error-border: 2px solid #fa4d56;\n --hybrid-input-local-error-helper-text-color: #ffb3b8;\n --hybrid-input-local-disabled-background-color: #393939;\n --hybrid-input-local-disabled-placeholder-color: #6f6f6f;\n --hybrid-input-local-disabled-helper-text-color: #6f6f6f;\n --hybrid-input-local-disabled-label-color: #6f6f6f;\n --hybrid-input-local-warning-icon-color: #f0c300;\n --hybrid-input-local-error-icon-color: #da1e28;\n --hybrid-input-local-password-icon-color: #ffffff;\n --hybrid-input-local-number-icons-color: #ffffff;\n --hybrid-input-local-label-color: #c6c6c6;\n --hybrid-input-local-helper-text-color: #c6c6c6;\n --hybrid-input-local-number-icons-separator-color: #525252;\n --hybrid-input-local-calendar-icon-color: #ffffff;\n --hybrid-input-local-copy-icon-color: #ffffff;\n }\n`;\n"]}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@nuralyui/input",
3
- "version": "0.0.3",
3
+ "version": "0.0.5",
4
4
  "description": "",
5
5
  "main": "index.js",
6
6
  "type": "module",
package/react.d.ts CHANGED
@@ -1,6 +1,9 @@
1
- import { HyInputElement } from './input.component.js';
2
- export declare const HyInput: import("@lit-labs/react").ReactWebComponent<HyInputElement, {
3
- valueChange: string;
4
- focused: string;
1
+ import { NrInputElement } from './input.component.js';
2
+ export declare const NrInput: import("@lit-labs/react").ReactWebComponent<NrInputElement, {
3
+ nrInput: string;
4
+ nrFocus: string;
5
+ nrEnter: string;
6
+ nrCopySuccess: string;
7
+ nrCopyError: string;
5
8
  }>;
6
9
  //# sourceMappingURL=react.d.ts.map
package/react.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"react.d.ts","sourceRoot":"","sources":["../../../src/components/input/react.ts"],"names":[],"mappings":"AAEA,OAAO,EAAC,cAAc,EAAC,MAAM,sBAAsB,CAAC;AACpD,eAAO,MAAM,OAAO;;;EAQlB,CAAC"}
1
+ {"version":3,"file":"react.d.ts","sourceRoot":"","sources":["../../../src/components/input/react.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AACtD,eAAO,MAAM,OAAO;;;;;;EAWlB,CAAC"}