@nuralyui/input 0.0.4 → 0.0.6

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 (43) 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 +40 -21
  6. package/input.component.d.ts.map +1 -1
  7. package/input.component.js +306 -114
  8. package/input.component.js.map +1 -1
  9. package/input.style.d.ts.map +1 -1
  10. package/input.style.js +347 -95
  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} +51 -26
  15. package/input.style.variable.js.map +1 -0
  16. package/{input.constant.d.ts → input.types.d.ts} +1 -1
  17. package/input.types.d.ts.map +1 -0
  18. package/input.types.js +2 -0
  19. package/input.types.js.map +1 -0
  20. package/package.json +1 -1
  21. package/react.d.ts +7 -4
  22. package/react.d.ts.map +1 -1
  23. package/react.js +9 -6
  24. package/react.js.map +1 -1
  25. package/test/hy-input_test.js +15 -15
  26. package/test/hy-input_test.js.map +1 -1
  27. package/utils/index.d.ts +8 -0
  28. package/utils/index.d.ts.map +1 -0
  29. package/utils/index.js +8 -0
  30. package/utils/index.js.map +1 -0
  31. package/utils/input-renderers.d.ts +50 -0
  32. package/utils/input-renderers.d.ts.map +1 -0
  33. package/utils/input-renderers.js +157 -0
  34. package/utils/input-renderers.js.map +1 -0
  35. package/utils/input-validation.utils.d.ts +26 -0
  36. package/utils/input-validation.utils.d.ts.map +1 -0
  37. package/utils/input-validation.utils.js +105 -0
  38. package/utils/input-validation.utils.js.map +1 -0
  39. package/input.constant.d.ts.map +0 -1
  40. package/input.constant.js +0 -2
  41. package/input.constant.js.map +0 -1
  42. package/variables.style.d.ts.map +0 -1
  43. package/variables.style.js.map +0 -1
package/input.style.js CHANGED
@@ -1,53 +1,123 @@
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));
27
+ }
28
+
29
+ /*
30
+ * Base input wrapper and input element styles
31
+ * Background applied to wrapper to cover entire container including addons
32
+ * Uses CSS custom properties with fallbacks for comprehensive theming support
33
+ * Properties follow the pattern: --hybrid-input-{property}, --hybrid-input-local-{property}
34
+ */
35
+ .input-wrapper {
36
+ background-color: var(--hybrid-input-background-color, var(--hybrid-input-local-background-color));
8
37
  }
9
38
 
10
- :host > #input-container,
11
39
  #input-container > input {
12
- background-color: var(--hybrid-input-background-color,var(--hybrid-input-local-background-color));
40
+ background-color: transparent;
41
+ }
42
+
43
+ /*
44
+ * Disabled state styles for wrapper and input
45
+ * Applied when input is disabled - removes interactivity and applies muted colors
46
+ */
47
+ :host([disabled]) .input-wrapper {
48
+ background-color: var(--hybrid-input-disabled-background-color, var(--hybrid-input-local-disabled-background-color));
13
49
  }
14
50
 
15
- :host([disabled]) > #input-container,
16
- :host([disabled]) > #input-container > input {
17
- background-color: var(--hybrid-input-disabled-background-color,var(--hybrid-input-local-disabled-background-color));
51
+ :host([disabled]) #input-container > input {
52
+ background-color: transparent;
18
53
  cursor: not-allowed;
19
54
  }
20
55
 
56
+ /*
57
+ * Icon base styles
58
+ * Common styling for all icons within the input component
59
+ */
21
60
  hy-icon {
22
61
  display: flex;
23
62
  align-items: center;
24
63
  }
25
64
 
65
+ /*
66
+ * Placeholder styling
67
+ * Customizable placeholder text appearance
68
+ */
26
69
  ::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));
70
+ color: var(--hybrid-input-placeholder-color, var(--hybrid-input-local-placeholder-color));
71
+ font-size: var(--hybrid-input-placeholder-font-size, var(--hybrid-input-local-placeholder-font-size));
72
+ font-family: var(--hybrid-input-font-family, var(--hybrid-input-local-font-family));
30
73
  }
74
+
75
+ /*
76
+ * Disabled placeholder styling
77
+ * Applied when input is disabled
78
+ */
79
+ :host([disabled]) ::placeholder {
80
+ color: var(--hybrid-input-disabled-placeholder-color, var(--hybrid-input-local-disabled-placeholder-color));
81
+ }
82
+
83
+ /* ========================================
84
+ * ICON VARIANTS AND STATES
85
+ * ======================================== */
86
+
87
+ /* Warning state icon */
31
88
  #warning-icon {
32
- --hybrid-icon-color: var(--hybrid-input-warning-icon-color,var(--hybrid-input-local-warning-icon-color,));
89
+ --hybrid-icon-color: var(--hybrid-input-warning-icon-color, var(--hybrid-input-local-warning-icon-color));
33
90
  }
91
+
92
+ /* Error state icon */
34
93
  #error-icon {
35
- --hybrid-icon-color: var(--hybrid-input-error-icon-color,var(--hybrid-input-local-error-icon-color));
94
+ --hybrid-icon-color: var(--hybrid-input-error-icon-color, var(--hybrid-input-local-error-icon-color));
36
95
  }
96
+
97
+ /* Calendar input type icon */
37
98
  #calendar-icon {
38
- --hybrid-icon-color: var(--hybrid-input-calendar-icon-color,var(--hybrid-input-local-calendar-icon-color));
99
+ --hybrid-icon-color: var(--hybrid-input-calendar-icon-color, var(--hybrid-input-local-calendar-icon-color));
39
100
  }
101
+
102
+ /* Password toggle icon */
40
103
  #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));
104
+ padding-left: var(--hybrid-input-password-icon-padding-left, var(--hybrid-input-local-password-icon-padding-left));
105
+ padding-right: var(--hybrid-input-password-icon-padding-right, var(--hybrid-input-local-password-icon-padding-right));
43
106
  cursor: pointer;
44
- --hybrid-icon-color: var(--hybrid-input-password-icon-color,var(--hybrid-input-local-password-icon-color));
107
+ --hybrid-icon-color: var(--hybrid-input-password-icon-color, var(--hybrid-input-local-password-icon-color));
45
108
  }
109
+
110
+ /* Copy functionality icon */
46
111
  #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));
112
+ padding-right: var(--hybrid-input-copy-icon-padding-right, var(--hybrid-input-local-copy-icon-padding-right));
113
+ --hybrid-icon-color: var(--hybrid-input-copy-icon-color, var(--hybrid-input-local-copy-icon-color));
49
114
  cursor: pointer;
50
115
  }
116
+
117
+ /*
118
+ * Number input increment/decrement icons container
119
+ * Positioned absolutely for overlay on input
120
+ */
51
121
  #number-icons {
52
122
  display: flex;
53
123
  justify-content: space-between;
@@ -57,146 +127,328 @@ const inputStyle = css `
57
127
  right: 0;
58
128
  top: 0;
59
129
  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));
130
+ width: var(--hybrid-input-number-icons-container-width, var(--hybrid-input-local-number-icons-container-width));
131
+ padding-right: var(--hybrid-input-number-icons-container-padding-right, var(--hybrid-input-local-number-icons-container-padding-right));
62
132
  }
133
+
134
+ /* Individual number icons styling */
63
135
  #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));
136
+ --hybrid-icon-color: var(--hybrid-input-number-icons-color, var(--hybrid-input-local-number-icons-color));
137
+ padding-left: var(--hybrid-input-number-icons-padding-left, var(--hybrid-input-local-number-icons-padding-left));
138
+ padding-right: var(--hybrid-input-number-icons-padding-right, var(--hybrid-input-local-number-icons-padding-right));
139
+ width: var(--hybrid-input-number-icons-width, var(--hybrid-input-local-number-icons-width));
140
+ height: var(--hybrid-input-number-icons-height, var(--hybrid-input-local-number-icons-height));
69
141
  }
70
142
 
143
+ /* Number icons separator styling */
144
+ #icons-separator {
145
+ color: var(--hybrid-input-number-icons-separator-color, var(--hybrid-input-local-number-icons-separator-color));
146
+ padding-bottom: var(--hybrid-input-number-icons-separator-padding-bottom, var(--hybrid-input-local-number-icons-separator-padding-bottom));
147
+ padding-left: var(--hybrid-input-number-icons-separator-padding-left, var(--hybrid-input-local-number-icons-separator-padding-left));
148
+ padding-right: var(--hybrid-input-number-icons-separator-padding-right, var(--hybrid-input-local-number-icons-separator-padding-right));
149
+ }
150
+
151
+ /*
152
+ * Disabled state for all icons
153
+ * Applied when input is disabled - reduces opacity and disables interaction
154
+ */
71
155
  :host([disabled]) #password-icon,
72
156
  :host([disabled]) #error-icon,
73
157
  :host([disabled]) #warning-icon,
74
158
  :host([disabled]) #number-icons,
75
159
  :host([disabled]) #calendar-icon,
76
160
  :host([disabled]) #copy-icon {
77
- opacity: var(--hybrid-input-disabled-icon-opacity,var(--hybrid-input-local-disabled-icon-opacity));
161
+ opacity: var(--hybrid-input-disabled-icon-opacity, var(--hybrid-input-local-disabled-icon-opacity));
78
162
  }
79
163
 
80
- :host(:not([disabled])[state='error']) > #input-container {
81
- border: var(--hybrid-input-error-border,var(--hybrid-input-local-error-border));
164
+ /* Disabled icons cursor override */
165
+ :host([disabled]) #password-icon,
166
+ :host([disabled]) #number-icons,
167
+ :host([disabled]) #copy-icon {
168
+ cursor: not-allowed;
82
169
  }
83
170
 
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));
171
+ /* ========================================
172
+ * INPUT CONTAINER STYLES
173
+ * ======================================== */
174
+
175
+ /*
176
+ * Input wrapper - contains addons and input container
177
+ * Provides horizontal layout for addon before/after elements
178
+ */
179
+ .input-wrapper {
180
+ display: flex;
181
+ align-items: stretch;
182
+ width: 100%;
88
183
  }
89
184
 
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));
185
+ /*
186
+ * Addon before element - content before input (outside borders)
187
+ * Styled to visually connect with input
188
+ */
189
+ .input-addon-before {
190
+ background-color: var(--hybrid-input-addon-background-color, var(--hybrid-input-local-addon-background-color));
191
+ border: var(--hybrid-input-border, var(--hybrid-input-local-border));
192
+ border-right: none;
193
+ border-top-left-radius: var(--hybrid-input-border-radius, var(--hybrid-input-local-border-radius));
194
+ border-bottom-left-radius: var(--hybrid-input-border-radius, var(--hybrid-input-local-border-radius));
195
+ padding: var(--hybrid-input-addon-padding, var(--hybrid-input-local-addon-padding));
196
+ display: flex;
197
+ align-items: center;
198
+ color: var(--hybrid-input-addon-color, var(--hybrid-input-local-addon-color));
199
+ font-size: var(--hybrid-input-font-size, var(--hybrid-input-local-font-size));
200
+ white-space: nowrap;
201
+ min-width: 0; /* Allow shrinking */
202
+ flex-shrink: 0; /* Prevent shrinking */
92
203
  }
93
204
 
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));
205
+ /*
206
+ * Addon after element - content after input (outside borders)
207
+ * Styled to visually connect with input
208
+ */
209
+ .input-addon-after {
210
+ background-color: var(--hybrid-input-addon-background-color, var(--hybrid-input-local-addon-background-color));
211
+ border: var(--hybrid-input-border, var(--hybrid-input-local-border));
212
+ border-left: none;
213
+ border-top-right-radius: var(--hybrid-input-border-radius, var(--hybrid-input-local-border-radius));
214
+ border-bottom-right-radius: var(--hybrid-input-border-radius, var(--hybrid-input-local-border-radius));
215
+ padding: var(--hybrid-input-addon-padding, var(--hybrid-input-local-addon-padding));
216
+ display: flex;
217
+ align-items: center;
218
+ color: var(--hybrid-input-addon-color, var(--hybrid-input-local-addon-color));
219
+ font-size: var(--hybrid-input-font-size, var(--hybrid-input-local-font-size));
220
+ white-space: nowrap;
221
+ min-width: 0; /* Allow shrinking */
222
+ flex-shrink: 0; /* Prevent shrinking */
96
223
  }
97
224
 
98
- :host(:not([state='error'])) > #input-container:focus-within {
99
- border: var(--hybrid-input-focus-border,var(--hybrid-input-local-focus-border));
225
+ /*
226
+ * Input container border radius adjustments when addons are present
227
+ * Removes border radius on sides where addons are attached
228
+ */
229
+ .input-wrapper:has(.input-addon-before) #input-container {
230
+ border-top-left-radius: 0;
231
+ border-bottom-left-radius: 0;
232
+ border-left: none;
100
233
  }
101
234
 
102
- :host([disabled]) #password-icon,
103
- :host([disabled]) #number-icons,
104
- :host([disabled]) #copy-icon {
105
- cursor: not-allowed;
235
+ .input-wrapper:has(.input-addon-after) #input-container {
236
+ border-top-right-radius: 0;
237
+ border-bottom-right-radius: 0;
238
+ border-right: none;
106
239
  }
107
240
 
108
- :host([disabled]) ::placeholder {
109
- color: var(--hybrid-input-disabled-placeholder-color,var(--hybrid-input-local-disabled-placeholder-color));
241
+ /*
242
+ * Main input container element
243
+ * Uses CSS custom properties for comprehensive border and layout control
244
+ */
245
+ #input-container {
246
+ /* Border properties - individual sides for granular control */
247
+ border-bottom: var(--hybrid-input-border-bottom, var(--hybrid-input-local-border-bottom));
248
+ border-top: var(--hybrid-input-border-top, var(--hybrid-input-local-border-top));
249
+ border-left: var(--hybrid-input-border-left, var(--hybrid-input-local-border-left));
250
+ border-right: var(--hybrid-input-border-right, var(--hybrid-input-local-border-right));
251
+
252
+ /* Border radius - individual corners for design flexibility */
253
+ border-radius: var(--hybrid-input-border-radius, var(--hybrid-input-local-border-radius));
254
+ border-top-left-radius: var(--hybrid-input-border-top-left-radius, var(--hybrid-input-local-border-top-left-radius));
255
+ border-top-right-radius: var(--hybrid-input-border-top-right-radius, var(--hybrid-input-local-border-top-right-radius));
256
+ border-bottom-left-radius: var(--hybrid-input-border-bottom-left-radius, var(--hybrid-input-local-border-bottom-left-radius));
257
+ border-bottom-right-radius: var(--hybrid-input-border-bottom-right-radius, var(--hybrid-input-local-border-bottom-right-radius));
258
+
259
+ /* Layout */
260
+ display: flex;
261
+ position: relative;
262
+ flex: 1; /* Take available space in wrapper */
263
+ min-width: 0; /* Allow shrinking below content size */
110
264
  }
111
265
 
266
+ /*
267
+ * Disabled container border styles
268
+ * Applied when input is disabled
269
+ */
270
+ :host([disabled]) #input-container {
271
+ border-bottom: var(--hybrid-input-disabled-border-bottom, var(--hybrid-input-local-disabled-border-bottom));
272
+ border-top: var(--hybrid-input-disabled-border-top, var(--hybrid-input-local-disabled-border-top));
273
+ border-left: var(--hybrid-input-disabled-border-left, var(--hybrid-input-local-disabled-border-left));
274
+ border-right: var(--hybrid-input-disabled-border-right, var(--hybrid-input-local-disabled-border-right));
275
+ opacity: 0.6;
276
+ }
277
+
278
+ /* ========================================
279
+ * INPUT ELEMENT STYLES
280
+ * ======================================== */
281
+
282
+ /*
283
+ * Base input element styling
284
+ * Full width with no default borders, using container for styling
285
+ */
286
+ input {
287
+ width: 100%;
288
+ border: none;
289
+ outline: none;
290
+ color: var(--hybrid-input-text-color, var(--hybrid-input-local-text-color));
291
+ font-family: var(--hybrid-input-font-family, var(--hybrid-input-local-font-family));
292
+ font-size: var(--hybrid-input-font-size, var(--hybrid-input-local-font-size));
293
+ }
294
+
295
+ /* Remove default number input spinners */
112
296
  /* Chrome, Safari, Edge, Opera */
113
297
  input::-webkit-outer-spin-button,
114
298
  input::-webkit-inner-spin-button {
115
299
  -webkit-appearance: none;
116
300
  }
301
+
117
302
  /* Firefox */
118
303
  input[type='number'] {
119
304
  -moz-appearance: textfield;
120
305
  }
121
306
 
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
- }
307
+ /* ========================================
308
+ * STATE STYLES
309
+ * ======================================== */
128
310
 
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;
311
+ /*
312
+ * Error state styling
313
+ * Applied when state='error' and not disabled
314
+ */
315
+ :host(:not([disabled])[state='error']) > #input-container {
316
+ border: var(--hybrid-input-error-border, var(--hybrid-input-local-error-border));
141
317
  }
142
318
 
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;
319
+ /*
320
+ * Focus state styling
321
+ * Applied when input receives focus and not in error state
322
+ */
323
+ :host(:not([state='error'])) > #input-container:focus-within {
324
+ border: var(--hybrid-input-focus-border, var(--hybrid-input-local-focus-border));
149
325
  }
150
326
 
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));
327
+ /*
328
+ * Number input icon positioning adjustments for error/warning states
329
+ * When validation states are present, adjust icon positioning
330
+ */
331
+ :host([state='error']) input[type='number'] ~ #number-icons,
332
+ :host([state='warning']) input[type='number'] ~ #number-icons {
333
+ position: static;
334
+ padding-left: var(--hybrid-input-number-icons-container-padding-left, var(--hybrid-input-local-number-icons-container-padding-left));
158
335
  }
159
336
 
337
+ /* ========================================
338
+ * SLOTTED CONTENT STYLES
339
+ * ======================================== */
340
+
341
+ /*
342
+ * Label slot styling
343
+ * Applied to slotted label elements
344
+ */
160
345
  ::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));
346
+ color: var(--hybrid-input-label-color, var(--hybrid-input-local-label-color));
347
+ font-size: var(--hybrid-input-label-font-size, var(--hybrid-input-local-label-font-size));
348
+ padding-bottom: var(--hybrid-input-label-padding-bottom, var(--hybrid-input-local-label-padding-bottom));
164
349
  }
165
350
 
351
+ /*
352
+ * Helper text slot styling
353
+ * Applied to slotted helper text elements
354
+ */
166
355
  ::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));
356
+ color: var(--hybrid-input-helper-text-color, var(--hybrid-input-local-helper-text-color));
357
+ font-size: var(--hybrid-input-helper-text-font-size, var(--hybrid-input-local-helper-text-font-size));
358
+ padding-top: var(--hybrid-input-helper-text-padding-top, var(--hybrid-input-local-helper-text-padding-top));
170
359
  }
171
360
 
361
+ /*
362
+ * State-specific helper text colors
363
+ * Override helper text color based on validation state
364
+ */
365
+ :host([state='error']) ::slotted([slot='helper-text']) {
366
+ color: var(--hybrid-input-error-helper-text-color, var(--hybrid-input-local-error-helper-text-color));
367
+ }
368
+
369
+ :host([state='warning']) ::slotted([slot='helper-text']) {
370
+ color: var(--hybrid-input-warning-helper-text-color, var(--hybrid-input-local-warning-helper-text-color));
371
+ }
372
+
373
+ /*
374
+ * Disabled state for slotted content
375
+ * Applied when input is disabled
376
+ */
172
377
  :host([disabled]) ::slotted([slot='helper-text']) {
173
- color: var(--hybrid-input-disabled-helper-text-color,var(--hybrid-input-local-disabled-helper-text-color));
378
+ color: var(--hybrid-input-disabled-helper-text-color, var(--hybrid-input-local-disabled-helper-text-color));
174
379
  }
175
380
 
176
381
  :host([disabled]) ::slotted([slot='label']) {
177
- color: var(--hybrid-input-disabled-label-color,var(--hybrid-input-local-disabled-label-color));
382
+ color: var(--hybrid-input-disabled-label-color, var(--hybrid-input-local-disabled-label-color));
383
+ }
384
+
385
+ /*
386
+ * Prefix slot styling
387
+ * Applied to slotted prefix content (icons, text, etc.)
388
+ */
389
+ ::slotted([slot='prefix']) {
390
+ display: flex;
391
+ align-items: center;
392
+ padding-right: var(--hybrid-input-prefix-padding-right, var(--hybrid-input-local-prefix-padding-right));
393
+ color: var(--hybrid-input-prefix-color, var(--hybrid-input-local-prefix-color));
394
+ font-size: var(--hybrid-input-prefix-font-size, var(--hybrid-input-local-prefix-font-size));
395
+ flex-shrink: 0;
396
+ }
397
+
398
+ /*
399
+ * Suffix slot styling
400
+ * Applied to slotted suffix content (icons, text, etc.)
401
+ */
402
+ ::slotted([slot='suffix']) {
403
+ display: flex;
404
+ align-items: center;
405
+ padding-left: var(--hybrid-input-suffix-padding-left, var(--hybrid-input-local-suffix-padding-left));
406
+ color: var(--hybrid-input-suffix-color, var(--hybrid-input-local-suffix-color));
407
+ font-size: var(--hybrid-input-suffix-font-size, var(--hybrid-input-local-suffix-font-size));
408
+ flex-shrink: 0;
409
+ }
410
+
411
+ /*
412
+ * Disabled state for prefix and suffix slots
413
+ * Applied when input is disabled
414
+ */
415
+ :host([disabled]) ::slotted([slot='prefix']),
416
+ :host([disabled]) ::slotted([slot='suffix']) {
417
+ opacity: var(--hybrid-input-disabled-icon-opacity, var(--hybrid-input-local-disabled-icon-opacity));
418
+ color: var(--hybrid-input-disabled-prefix-suffix-color, var(--hybrid-input-local-disabled-prefix-suffix-color));
178
419
  }
179
420
  `;
421
+ /**
422
+ * Size variation styles for the input component
423
+ * Defines padding and spacing for different input sizes
424
+ */
180
425
  const sizeInputStyle = css `
426
+ /* ========================================
427
+ * SIZE VARIATIONS
428
+ * ======================================== */
429
+
430
+ /* Large input size variant */
181
431
  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));
432
+ padding-top: var(--hybrid-input-large-padding-top, var(--hybrid-input-local-large-padding-top));
433
+ padding-bottom: var(--hybrid-input-large-padding-bottom, var(--hybrid-input-local-large-padding-bottom));
434
+ padding-left: var(--hybrid-input-large-padding-left, var(--hybrid-input-local-large-padding-left));
435
+ padding-right: var(--hybrid-input-large-padding-right, var(--hybrid-input-local-large-padding-right));
186
436
  }
187
437
 
438
+ /* Medium input size variant (default) */
188
439
  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));
440
+ padding-top: var(--hybrid-input-medium-padding-top, var(--hybrid-input-local-medium-padding-top));
441
+ padding-bottom: var(--hybrid-input-medium-padding-bottom, var(--hybrid-input-local-medium-padding-bottom));
442
+ padding-left: var(--hybrid-input-medium-padding-left, var(--hybrid-input-local-medium-padding-left));
443
+ padding-right: var(--hybrid-input-medium-padding-right, var(--hybrid-input-local-medium-padding-right));
193
444
  }
194
445
 
446
+ /* Small input size variant */
195
447
  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));
448
+ padding-top: var(--hybrid-input-small-padding-top, var(--hybrid-input-local-small-padding-top));
449
+ padding-bottom: var(--hybrid-input-small-padding-bottom, var(--hybrid-input-local-small-padding-bottom));
450
+ padding-left: var(--hybrid-input-small-padding-left, var(--hybrid-input-local-small-padding-left));
451
+ padding-right: var(--hybrid-input-small-padding-right, var(--hybrid-input-local-small-padding-right));
200
452
  }
201
453
  `;
202
454
  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,2BAA2B,CAAC;AAE3D;;;;;;;;;;;;;;GAcG;AAEH,MAAM,UAAU,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkZrB,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 wrapper and input element styles\n * Background applied to wrapper to cover entire container including addons\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 .input-wrapper {\n background-color: var(--hybrid-input-background-color, var(--hybrid-input-local-background-color));\n }\n\n #input-container > input {\n background-color: transparent;\n }\n\n /* \n * Disabled state styles for wrapper and input\n * Applied when input is disabled - removes interactivity and applies muted colors\n */\n :host([disabled]) .input-wrapper {\n background-color: var(--hybrid-input-disabled-background-color, var(--hybrid-input-local-disabled-background-color));\n }\n\n :host([disabled]) #input-container > input {\n background-color: transparent;\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 * Input wrapper - contains addons and input container\n * Provides horizontal layout for addon before/after elements\n */\n .input-wrapper {\n display: flex;\n align-items: stretch;\n width: 100%;\n }\n\n /* \n * Addon before element - content before input (outside borders)\n * Styled to visually connect with input\n */\n .input-addon-before {\n background-color: var(--hybrid-input-addon-background-color, var(--hybrid-input-local-addon-background-color));\n border: var(--hybrid-input-border, var(--hybrid-input-local-border));\n border-right: none;\n border-top-left-radius: var(--hybrid-input-border-radius, var(--hybrid-input-local-border-radius));\n border-bottom-left-radius: var(--hybrid-input-border-radius, var(--hybrid-input-local-border-radius));\n padding: var(--hybrid-input-addon-padding, var(--hybrid-input-local-addon-padding));\n display: flex;\n align-items: center;\n color: var(--hybrid-input-addon-color, var(--hybrid-input-local-addon-color));\n font-size: var(--hybrid-input-font-size, var(--hybrid-input-local-font-size));\n white-space: nowrap;\n min-width: 0; /* Allow shrinking */\n flex-shrink: 0; /* Prevent shrinking */\n }\n\n /* \n * Addon after element - content after input (outside borders)\n * Styled to visually connect with input\n */\n .input-addon-after {\n background-color: var(--hybrid-input-addon-background-color, var(--hybrid-input-local-addon-background-color));\n border: var(--hybrid-input-border, var(--hybrid-input-local-border));\n border-left: none;\n border-top-right-radius: var(--hybrid-input-border-radius, var(--hybrid-input-local-border-radius));\n border-bottom-right-radius: var(--hybrid-input-border-radius, var(--hybrid-input-local-border-radius));\n padding: var(--hybrid-input-addon-padding, var(--hybrid-input-local-addon-padding));\n display: flex;\n align-items: center;\n color: var(--hybrid-input-addon-color, var(--hybrid-input-local-addon-color));\n font-size: var(--hybrid-input-font-size, var(--hybrid-input-local-font-size));\n white-space: nowrap;\n min-width: 0; /* Allow shrinking */\n flex-shrink: 0; /* Prevent shrinking */\n }\n\n /* \n * Input container border radius adjustments when addons are present\n * Removes border radius on sides where addons are attached\n */\n .input-wrapper:has(.input-addon-before) #input-container {\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n border-left: none;\n }\n\n .input-wrapper:has(.input-addon-after) #input-container {\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n border-right: none;\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 flex: 1; /* Take available space in wrapper */\n min-width: 0; /* Allow shrinking below content size */\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 * Prefix slot styling\n * Applied to slotted prefix content (icons, text, etc.)\n */\n ::slotted([slot='prefix']) {\n display: flex;\n align-items: center;\n padding-right: var(--hybrid-input-prefix-padding-right, var(--hybrid-input-local-prefix-padding-right));\n color: var(--hybrid-input-prefix-color, var(--hybrid-input-local-prefix-color));\n font-size: var(--hybrid-input-prefix-font-size, var(--hybrid-input-local-prefix-font-size));\n flex-shrink: 0;\n }\n\n /* \n * Suffix slot styling\n * Applied to slotted suffix content (icons, text, etc.)\n */\n ::slotted([slot='suffix']) {\n display: flex;\n align-items: center;\n padding-left: var(--hybrid-input-suffix-padding-left, var(--hybrid-input-local-suffix-padding-left));\n color: var(--hybrid-input-suffix-color, var(--hybrid-input-local-suffix-color));\n font-size: var(--hybrid-input-suffix-font-size, var(--hybrid-input-local-suffix-font-size));\n flex-shrink: 0;\n }\n\n /* \n * Disabled state for prefix and suffix slots\n * Applied when input is disabled\n */\n :host([disabled]) ::slotted([slot='prefix']),\n :host([disabled]) ::slotted([slot='suffix']) {\n opacity: var(--hybrid-input-disabled-icon-opacity, var(--hybrid-input-local-disabled-icon-opacity));\n color: var(--hybrid-input-disabled-prefix-suffix-color, var(--hybrid-input-local-disabled-prefix-suffix-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,yBAsH1B,CAAC"}