@nuralyui/input 0.0.9 → 0.0.11

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 (56) hide show
  1. package/bundle.js +1348 -0
  2. package/input.component.d.ts +118 -26
  3. package/input.component.js +230 -229
  4. package/input.component.js.map +1 -1
  5. package/input.style.js +433 -128
  6. package/input.style.js.map +1 -1
  7. package/input.types.d.ts +90 -1
  8. package/input.types.js +73 -0
  9. package/input.types.js.map +1 -1
  10. package/package.json +16 -2
  11. package/demo/input-demo.d.ts +0 -19
  12. package/demo/input-demo.d.ts.map +0 -1
  13. package/demo/input-demo.js +0 -339
  14. package/demo/input-demo.js.map +0 -1
  15. package/index.d.ts.map +0 -1
  16. package/input.component.d.ts.map +0 -1
  17. package/input.style.d.ts.map +0 -1
  18. package/input.style.variable.d.ts +0 -2
  19. package/input.style.variable.d.ts.map +0 -1
  20. package/input.style.variable.js +0 -174
  21. package/input.style.variable.js.map +0 -1
  22. package/input.types.d.ts.map +0 -1
  23. package/mixins/focus-mixin.d.ts +0 -60
  24. package/mixins/focus-mixin.d.ts.map +0 -1
  25. package/mixins/focus-mixin.js +0 -65
  26. package/mixins/focus-mixin.js.map +0 -1
  27. package/mixins/index.d.ts +0 -9
  28. package/mixins/index.d.ts.map +0 -1
  29. package/mixins/index.js +0 -9
  30. package/mixins/index.js.map +0 -1
  31. package/mixins/number-mixin.d.ts +0 -51
  32. package/mixins/number-mixin.d.ts.map +0 -1
  33. package/mixins/number-mixin.js +0 -131
  34. package/mixins/number-mixin.js.map +0 -1
  35. package/mixins/selection-mixin.d.ts +0 -57
  36. package/mixins/selection-mixin.d.ts.map +0 -1
  37. package/mixins/selection-mixin.js +0 -80
  38. package/mixins/selection-mixin.js.map +0 -1
  39. package/react.d.ts.map +0 -1
  40. package/test/hy-input_test.d.ts +0 -2
  41. package/test/hy-input_test.d.ts.map +0 -1
  42. package/test/hy-input_test.js +0 -159
  43. package/test/hy-input_test.js.map +0 -1
  44. package/utils/index.d.ts +0 -8
  45. package/utils/index.d.ts.map +0 -1
  46. package/utils/index.js +0 -8
  47. package/utils/index.js.map +0 -1
  48. package/utils/input-renderers.d.ts +0 -54
  49. package/utils/input-renderers.d.ts.map +0 -1
  50. package/utils/input-renderers.js +0 -174
  51. package/utils/input-renderers.js.map +0 -1
  52. package/utils/input-validation.utils.d.ts +0 -26
  53. package/utils/input-validation.utils.d.ts.map +0 -1
  54. package/utils/input-validation.utils.js +0 -105
  55. package/utils/input-validation.utils.js.map +0 -1
  56. package/validation.d.ts.map +0 -1
package/input.style.js CHANGED
@@ -1,5 +1,4 @@
1
1
  import { css } from 'lit';
2
- import { styleVariables } from './input.style.variable.js';
3
2
  /**
4
3
  * Input component styles for the Hybrid UI Library
5
4
  *
@@ -8,10 +7,42 @@ import { styleVariables } from './input.style.variable.js';
8
7
  * - Multiple input states (default, warning, error)
9
8
  * - Size variations (small, medium, large)
10
9
  * - Different input types (text, password, number, calendar)
11
- * - Icon positioning and styling
10
+ * - Icon positioning and styling with comprehensive CSS variable overrides
12
11
  * - Focus, disabled, and validation states
13
12
  * - Dark theme support
14
13
  *
14
+ * Icon Color Customization:
15
+ * The input component provides multiple levels of CSS variable overrides for icon colors:
16
+ *
17
+ * Global Level:
18
+ * - --nuraly-color-input-icon: Controls all icons in input components
19
+ * - --nuraly-size-input-icon: Controls size of all icons in input components
20
+ * - --nuraly-color-input-icon-hover: Hover state for all icons
21
+ * - --nuraly-color-input-icon-active: Active state for all icons
22
+ * - --nuraly-color-input-icon-disabled: Disabled state for all icons
23
+ *
24
+ * Specific Icon Types:
25
+ * - --nuraly-color-input-warning-icon: Warning state icons
26
+ * - --nuraly-color-input-error-icon: Error state icons
27
+ * - --nuraly-color-input-calendar-icon: Calendar input type icons
28
+ * - --nuraly-color-input-password-icon: Password toggle icons
29
+ * - --nuraly-color-input-copy-icon: Copy functionality icons
30
+ * - --nuraly-color-input-clear-icon: Clear functionality icons
31
+ * - --nuraly-color-input-number-icons: Number input increment/decrement icons
32
+ *
33
+ * Usage Examples:
34
+ * ```css
35
+ * :root {
36
+ * --nuraly-color-input-icon: #0066cc;
37
+ * --nuraly-color-input-error-icon: #cc0000;
38
+ * --nuraly-size-input-icon: 20px;
39
+ * }
40
+ *
41
+ * .custom-input {
42
+ * --nuraly-color-input-icon: #purple;
43
+ * }
44
+ * ```
45
+ *
15
46
  * The styling system uses CSS custom properties with fallbacks to allow
16
47
  * for both global and local customization of input appearance.
17
48
  */
@@ -23,21 +54,34 @@ const inputStyle = css `
23
54
  :host {
24
55
  display: flex;
25
56
  flex-direction: column;
26
- font-family: var(--hybrid-input-font-family, var(--hybrid-input-local-font-family));
57
+ font-family: var(--nuraly-font-family-input, 'IBM Plex Sans', ui-sans-serif, system-ui);
27
58
  }
28
59
 
29
60
  /*
30
61
  * Base input wrapper and input element styles
31
62
  * 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}
63
+ * Uses theme CSS custom properties for comprehensive theming support
34
64
  */
35
65
  .input-wrapper {
36
- background-color: var(--hybrid-input-background-color, var(--hybrid-input-local-background-color));
66
+ background-color: var(--nuraly-color-input-background, var(--nuraly-color-input-background-fallback, #ffffff));
37
67
  }
38
68
 
69
+
39
70
  #input-container > input {
40
71
  background-color: transparent;
72
+ border: var(--nuraly-input-border, none);
73
+ outline: var(--nuraly-input-outline, none);
74
+ flex: 1;
75
+ min-width: 0;
76
+ width: 100%;
77
+
78
+ /* Typography from theme */
79
+ font-family: var(--nuraly-font-family-input, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto);
80
+ font-size: var(--nuraly-font-size-input, 14px);
81
+ color: var(--nuraly-color-input-text, var(--nuraly-color-input-text-fallback, rgba(0, 0, 0, 0.88)));
82
+
83
+ /* Padding from theme */
84
+ padding: var(--nuraly-spacing-input-medium-vertical, 4px) var(--nuraly-spacing-input-medium-horizontal, 11px);
41
85
  }
42
86
 
43
87
  /*
@@ -45,21 +89,34 @@ const inputStyle = css `
45
89
  * Applied when input is disabled - removes interactivity and applies muted colors
46
90
  */
47
91
  :host([disabled]) .input-wrapper {
48
- background-color: var(--hybrid-input-disabled-background-color, var(--hybrid-input-local-disabled-background-color));
92
+ background-color: var(--nuraly-color-input-disabled-background, var(--nuraly-color-input-disabled-background-fallback, #f4f4f4));
49
93
  }
50
94
 
51
95
  :host([disabled]) #input-container > input {
52
96
  background-color: transparent;
53
- cursor: not-allowed;
97
+ cursor: var(--nuraly-cursor-disabled, not-allowed);
98
+ color: var(--nuraly-color-input-disabled-text, var(--nuraly-color-input-disabled-text-fallback, rgba(0, 0, 0, 0.25)));
54
99
  }
55
100
 
56
101
  /*
57
102
  * Icon base styles
58
103
  * Common styling for all icons within the input component
104
+ * Provides comprehensive CSS variable override system
59
105
  */
60
- hy-icon {
106
+ nr-icon {
61
107
  display: flex;
62
108
  align-items: center;
109
+
110
+ /* Global icon color override - applies to all icons in input */
111
+ --nuraly-color-icon: var(--nuraly-color-input-icon, var(--nuraly-color-icon, var(--nuraly-color-icon-fallback, #161616)));
112
+
113
+ /* Size override for input icons */
114
+ --nuraly-icon-size: var(--nuraly-size-input-icon, var(--nuraly-icon-size, var(--nuraly-icon-size-fallback, 18px)));
115
+
116
+ /* Interactive state overrides */
117
+ --nuraly-color-icon-hover: var(--nuraly-color-input-icon-hover, var(--nuraly-color-icon-hover, var(--nuraly-color-icon-hover-fallback, #0f62fe)));
118
+ --nuraly-color-icon-active: var(--nuraly-color-input-icon-active, var(--nuraly-color-icon-active, var(--nuraly-color-icon-active-fallback, #054ada)));
119
+ --nuraly-color-icon-disabled: var(--nuraly-color-input-icon-disabled, var(--nuraly-color-icon-disabled, var(--nuraly-color-icon-disabled-fallback, #c6c6c6)));
63
120
  }
64
121
 
65
122
  /*
@@ -67,9 +124,9 @@ const inputStyle = css `
67
124
  * Customizable placeholder text appearance
68
125
  */
69
126
  ::placeholder {
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));
127
+ color: var(--nuraly-color-input-placeholder, var(--nuraly-color-input-placeholder-fallback, #a8a8a8));
128
+ font-size: var(--nuraly-font-size-input-placeholder, 14px);
129
+ font-family: var(--nuraly-font-family-input, 'IBM Plex Sans', ui-sans-serif, system-ui);
73
130
  }
74
131
 
75
132
  /*
@@ -77,7 +134,7 @@ const inputStyle = css `
77
134
  * Applied when input is disabled
78
135
  */
79
136
  :host([disabled]) ::placeholder {
80
- color: var(--hybrid-input-disabled-placeholder-color, var(--hybrid-input-local-disabled-placeholder-color));
137
+ color: var(--nuraly-color-input-disabled-placeholder, var(--nuraly-color-input-disabled-placeholder-fallback, #c6c6c6));
81
138
  }
82
139
 
83
140
  /* ========================================
@@ -86,39 +143,39 @@ const inputStyle = css `
86
143
 
87
144
  /* Warning state icon */
88
145
  #warning-icon {
89
- --hybrid-icon-color: var(--hybrid-input-warning-icon-color, var(--hybrid-input-local-warning-icon-color));
146
+ --nuraly-color-icon: var(--nuraly-color-input-warning-icon, #f1c21b);
90
147
  }
91
148
 
92
149
  /* Error state icon */
93
150
  #error-icon {
94
- --hybrid-icon-color: var(--hybrid-input-error-icon-color, var(--hybrid-input-local-error-icon-color));
151
+ --nuraly-color-icon: var(--nuraly-color-input-error-icon, #da1e28);
95
152
  }
96
153
 
97
154
  /* Calendar input type icon */
98
155
  #calendar-icon {
99
- --hybrid-icon-color: var(--hybrid-input-calendar-icon-color, var(--hybrid-input-local-calendar-icon-color));
156
+ --nuraly-color-icon: var(--nuraly-color-input-calendar-icon, #161616);
100
157
  }
101
158
 
102
159
  /* Password toggle icon */
103
160
  #password-icon {
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));
106
- cursor: pointer;
107
- --hybrid-icon-color: var(--hybrid-input-password-icon-color, var(--hybrid-input-local-password-icon-color));
161
+ padding-left: var(--nuraly-input-password-icon-padding-left, var(--nuraly-password-icon-padding-left, 8px));
162
+ padding-right: var(--nuraly-input-password-icon-padding-right, var(--nuraly-password-icon-padding-right, 8px));
163
+ cursor: var(--nuraly-cursor-interactive, pointer);
164
+ --nuraly-color-icon: var(--nuraly-color-input-password-icon, #161616);
108
165
  }
109
166
 
110
167
  /* Copy functionality icon */
111
168
  #copy-icon {
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));
114
- cursor: pointer;
169
+ padding-right: var(--nuraly-input-copy-icon-padding-right, var(--nuraly-copy-icon-padding-right, 8px));
170
+ --nuraly-color-icon: var(--nuraly-color-input-copy-icon, #161616);
171
+ cursor: var(--nuraly-cursor-interactive, pointer);
115
172
  }
116
173
 
117
174
  /* Clear functionality icon */
118
175
  #clear-icon {
119
- padding-right: var(--hybrid-input-clear-icon-padding-right, var(--hybrid-input-local-clear-icon-padding-right));
120
- --hybrid-icon-color: var(--hybrid-input-clear-icon-color, var(--hybrid-input-local-clear-icon-color));
121
- cursor: pointer;
176
+ padding-right: var(--nuraly-input-clear-icon-padding-right, var(--nuraly-clear-icon-padding-right, 8px));
177
+ --nuraly-color-icon: var(--nuraly-color-input-clear-icon, #161616);
178
+ cursor: var(--nuraly-cursor-interactive, pointer);
122
179
  }
123
180
 
124
181
  /*
@@ -129,30 +186,30 @@ const inputStyle = css `
129
186
  display: flex;
130
187
  justify-content: space-between;
131
188
  align-items: center;
132
- cursor: pointer;
189
+ cursor: var(--nuraly-cursor-interactive, pointer);
133
190
  position: absolute;
134
191
  right: 0;
135
192
  top: 0;
136
193
  height: 100%;
137
- width: var(--hybrid-input-number-icons-container-width, var(--hybrid-input-local-number-icons-container-width));
138
- padding-right: var(--hybrid-input-number-icons-container-padding-right, var(--hybrid-input-local-number-icons-container-padding-right));
194
+ width: var(--nuraly-input-number-icons-container-width, var(--nuraly-number-icons-container-width, 50px));
195
+ padding-right: var(--nuraly-input-number-icons-container-padding-right, var(--nuraly-number-icons-container-padding-right, 8px));
139
196
  }
140
197
 
141
198
  /* Individual number icons styling */
142
- #number-icons hy-icon {
143
- --hybrid-icon-color: var(--hybrid-input-number-icons-color, var(--hybrid-input-local-number-icons-color));
144
- padding-left: var(--hybrid-input-number-icons-padding-left, var(--hybrid-input-local-number-icons-padding-left));
145
- padding-right: var(--hybrid-input-number-icons-padding-right, var(--hybrid-input-local-number-icons-padding-right));
146
- width: var(--hybrid-input-number-icons-width, var(--hybrid-input-local-number-icons-width));
147
- height: var(--hybrid-input-number-icons-height, var(--hybrid-input-local-number-icons-height));
199
+ #number-icons nr-icon {
200
+ --nuraly-color-icon: var(--nuraly-color-input-number-icons, #161616);
201
+ padding-left: var(--nuraly-input-number-icons-padding-left, var(--nuraly-number-icons-padding-left, 4px));
202
+ padding-right: var(--nuraly-input-number-icons-padding-right, var(--nuraly-number-icons-padding-right, 4px));
203
+ width: var(--nuraly-input-number-icons-width, var(--nuraly-number-icons-width, 24px));
204
+ height: var(--nuraly-input-number-icons-height, var(--nuraly-number-icons-height, 24px));
148
205
  }
149
206
 
150
207
  /* Number icons separator styling */
151
208
  #icons-separator {
152
- color: var(--hybrid-input-number-icons-separator-color, var(--hybrid-input-local-number-icons-separator-color));
153
- padding-bottom: var(--hybrid-input-number-icons-separator-padding-bottom, var(--hybrid-input-local-number-icons-separator-padding-bottom));
154
- padding-left: var(--hybrid-input-number-icons-separator-padding-left, var(--hybrid-input-local-number-icons-separator-padding-left));
155
- padding-right: var(--hybrid-input-number-icons-separator-padding-right, var(--hybrid-input-local-number-icons-separator-padding-right));
209
+ color: var(--nuraly-input-number-icons-separator-color, var(--nuraly-number-icons-separator-color));
210
+ padding-bottom: var(--nuraly-input-number-icons-separator-padding-bottom, var(--nuraly-number-icons-separator-padding-bottom));
211
+ padding-left: var(--nuraly-input-number-icons-separator-padding-left, var(--nuraly-number-icons-separator-padding-left));
212
+ padding-right: var(--nuraly-input-number-icons-separator-padding-right, var(--nuraly-number-icons-separator-padding-right));
156
213
  }
157
214
 
158
215
  /*
@@ -166,7 +223,7 @@ const inputStyle = css `
166
223
  :host([disabled]) #calendar-icon,
167
224
  :host([disabled]) #copy-icon,
168
225
  :host([disabled]) #clear-icon {
169
- opacity: var(--hybrid-input-disabled-icon-opacity, var(--hybrid-input-local-disabled-icon-opacity));
226
+ opacity: var(--nuraly-input-disabled-icon-opacity, var(--nuraly-disabled-icon-opacity));
170
227
  }
171
228
 
172
229
  /* Disabled icons cursor override */
@@ -196,16 +253,16 @@ const inputStyle = css `
196
253
  * Styled to visually connect with input
197
254
  */
198
255
  .input-addon-before {
199
- background-color: var(--hybrid-input-addon-background-color, var(--hybrid-input-local-addon-background-color));
200
- border: var(--hybrid-input-border, var(--hybrid-input-local-border));
256
+ background-color: var(--nuraly-input-addon-background-color, var(--nuraly-addon-background-color));
257
+ border: var(--nuraly-input-border, var(--nuraly-border));
201
258
  border-right: none;
202
- border-top-left-radius: var(--hybrid-input-border-radius, var(--hybrid-input-local-border-radius));
203
- border-bottom-left-radius: var(--hybrid-input-border-radius, var(--hybrid-input-local-border-radius));
204
- padding: var(--hybrid-input-addon-padding, var(--hybrid-input-local-addon-padding));
259
+ border-top-left-radius: var(--nuraly-input-border-radius, var(--nuraly-border-radius));
260
+ border-bottom-left-radius: var(--nuraly-input-border-radius, var(--nuraly-border-radius));
261
+ padding: var(--nuraly-input-addon-padding, var(--nuraly-addon-padding));
205
262
  display: flex;
206
263
  align-items: center;
207
- color: var(--hybrid-input-addon-color, var(--hybrid-input-local-addon-color));
208
- font-size: var(--hybrid-input-font-size, var(--hybrid-input-local-font-size));
264
+ color: var(--nuraly-input-addon-color, var(--nuraly-addon-color));
265
+ font-size: var(--nuraly-input-font-size, var(--nuraly-font-size));
209
266
  white-space: nowrap;
210
267
  min-width: 0; /* Allow shrinking */
211
268
  flex-shrink: 0; /* Prevent shrinking */
@@ -216,16 +273,16 @@ const inputStyle = css `
216
273
  * Styled to visually connect with input
217
274
  */
218
275
  .input-addon-after {
219
- background-color: var(--hybrid-input-addon-background-color, var(--hybrid-input-local-addon-background-color));
220
- border: var(--hybrid-input-border, var(--hybrid-input-local-border));
276
+ background-color: var(--nuraly-input-addon-background-color, var(--nuraly-addon-background-color));
277
+ border: var(--nuraly-input-border, var(--nuraly-border));
221
278
  border-left: none;
222
- border-top-right-radius: var(--hybrid-input-border-radius, var(--hybrid-input-local-border-radius));
223
- border-bottom-right-radius: var(--hybrid-input-border-radius, var(--hybrid-input-local-border-radius));
224
- padding: var(--hybrid-input-addon-padding, var(--hybrid-input-local-addon-padding));
279
+ border-top-right-radius: var(--nuraly-input-border-radius, var(--nuraly-border-radius));
280
+ border-bottom-right-radius: var(--nuraly-input-border-radius, var(--nuraly-border-radius));
281
+ padding: var(--nuraly-input-addon-padding, var(--nuraly-addon-padding));
225
282
  display: flex;
226
283
  align-items: center;
227
- color: var(--hybrid-input-addon-color, var(--hybrid-input-local-addon-color));
228
- font-size: var(--hybrid-input-font-size, var(--hybrid-input-local-font-size));
284
+ color: var(--nuraly-input-addon-color, var(--nuraly-addon-color));
285
+ font-size: var(--nuraly-input-font-size, var(--nuraly-font-size));
229
286
  white-space: nowrap;
230
287
  min-width: 0; /* Allow shrinking */
231
288
  flex-shrink: 0; /* Prevent shrinking */
@@ -249,39 +306,106 @@ const inputStyle = css `
249
306
 
250
307
  /*
251
308
  * Main input container element
252
- * Uses CSS custom properties for comprehensive border and layout control
309
+ * Uses theme CSS custom properties for comprehensive border and layout control
253
310
  */
254
311
  #input-container {
255
- /* Border properties - individual sides for granular control */
256
- border-bottom: var(--hybrid-input-border-bottom, var(--hybrid-input-local-border-bottom));
257
- border-top: var(--hybrid-input-border-top, var(--hybrid-input-local-border-top));
258
- border-left: var(--hybrid-input-border-left, var(--hybrid-input-local-border-left));
259
- border-right: var(--hybrid-input-border-right, var(--hybrid-input-local-border-right));
312
+ /* Default outlined style */
313
+ border: var(--nuraly-border-width-input, 1px) solid var(--nuraly-color-input-border, #d9d9d9);
314
+ border-radius: var(--nuraly-border-radius-input, 6px);
260
315
 
261
- /* Border radius - individual corners for design flexibility */
262
- border-radius: var(--hybrid-input-border-radius, var(--hybrid-input-local-border-radius));
263
- border-top-left-radius: var(--hybrid-input-border-top-left-radius, var(--hybrid-input-local-border-top-left-radius));
264
- border-top-right-radius: var(--hybrid-input-border-top-right-radius, var(--hybrid-input-local-border-top-right-radius));
265
- border-bottom-left-radius: var(--hybrid-input-border-bottom-left-radius, var(--hybrid-input-local-border-bottom-left-radius));
266
- border-bottom-right-radius: var(--hybrid-input-border-bottom-right-radius, var(--hybrid-input-local-border-bottom-right-radius));
316
+ /* Background and text styling */
317
+ background-color: var(--nuraly-color-input-background, #ffffff);
318
+ color: var(--nuraly-color-input-text, rgba(0, 0, 0, 0.88));
319
+ font-family: var(--nuraly-font-family-input, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto);
320
+ font-size: var(--nuraly-font-size-input, 14px);
267
321
 
268
322
  /* Layout */
269
323
  display: flex;
270
324
  position: relative;
271
325
  flex: 1; /* Take available space in wrapper */
272
326
  min-width: 0; /* Allow shrinking below content size */
327
+
328
+ /* Transitions for smooth theme changes */
329
+ transition: var(--nuraly-transition-input, border-color 0.2s, box-shadow 0.2s);
330
+ }
331
+
332
+ /* Carbon Design System override - Carbon specific styles */
333
+ html[data-theme^="carbon"] nr-input #input-container,
334
+ body[data-theme^="carbon"] nr-input #input-container,
335
+ [data-theme^="carbon"] nr-input #input-container,
336
+ .input-wrapper[data-theme^="carbon"] #input-container {
337
+ border: var(--nuraly-border-width-input, 1px) solid var(--nuraly-color-input-border, transparent) !important;
338
+ border-bottom: var(--nuraly-border-width-input, 2px) solid var(--nuraly-color-input-border-bottom, #8d8d8d) !important;
339
+ border-radius: var(--nuraly-border-radius-input, 0) !important;
340
+ background-color: var(--nuraly-color-input-background, #f4f4f4) !important;
341
+ color: var(--nuraly-color-input-text, #161616) !important;
342
+ }
343
+
344
+ /* Default theme override - Default specific styles */
345
+ html[data-theme^="default"] nr-input #input-container,
346
+ body[data-theme^="default"] nr-input #input-container,
347
+ [data-theme^="default"] nr-input #input-container,
348
+ .input-wrapper[data-theme^="default"] #input-container {
349
+ border: var(--nuraly-border-width-input, 1px) solid var(--nuraly-color-input-border, #d9d9d9) !important;
350
+ border-radius: var(--nuraly-border-radius-input, 6px) !important;
351
+ background-color: var(--nuraly-color-input-background, #ffffff) !important;
352
+ color: var(--nuraly-color-input-text, rgba(0, 0, 0, 0.88)) !important;
353
+ }
354
+
355
+ /* Carbon input element padding override */
356
+ html[data-theme^="carbon"] nr-input #input-container > input,
357
+ body[data-theme^="carbon"] nr-input #input-container > input,
358
+ [data-theme^="carbon"] nr-input #input-container > input,
359
+ .input-wrapper[data-theme^="carbon"] #input-container > input {
360
+ padding: 7px 16px !important;
361
+ }
362
+
363
+ /* Default input element padding override */
364
+ html[data-theme^="default"] nr-input #input-container > input,
365
+ body[data-theme^="default"] nr-input #input-container > input,
366
+ [data-theme^="default"] nr-input #input-container > input,
367
+ .input-wrapper[data-theme^="default"] #input-container > input {
368
+ padding: var(--nuraly-spacing-input-medium-vertical, 4px) var(--nuraly-spacing-input-medium-horizontal, 11px) !important;
369
+ }
370
+
371
+ /* Focus state for input container */
372
+ #input-container:focus-within {
373
+ border-color: var(--nuraly-color-input-border-focus, #1890ff);
374
+ box-shadow: var(--nuraly-shadow-input-focus, 0 0 0 2px rgba(24, 144, 255, 0.2));
375
+ outline: none;
376
+ }
377
+
378
+ /* Carbon focus override */
379
+ html[data-theme^="carbon"] nr-input #input-container:focus-within,
380
+ body[data-theme^="carbon"] nr-input #input-container:focus-within,
381
+ [data-theme^="carbon"] nr-input #input-container:focus-within,
382
+ .input-wrapper[data-theme^="carbon"] #input-container:focus-within {
383
+ border: var(--nuraly-border-width-input, 2px) solid var(--nuraly-color-input-border-focus, #0f62fe) !important;
384
+ border-radius: var(--nuraly-border-radius-input, 0) !important;
385
+ box-shadow: var(--nuraly-shadow-input-focus, none) !important;
386
+ outline: none !important;
387
+ }
388
+
389
+ /* Default focus override */
390
+ html[data-theme^="default"] nr-input #input-container:focus-within,
391
+ body[data-theme^="default"] nr-input #input-container:focus-within,
392
+ [data-theme^="default"] nr-input #input-container:focus-within,
393
+ .input-wrapper[data-theme^="default"] #input-container:focus-within {
394
+ border-color: var(--nuraly-color-input-border-focus, #1890ff) !important;
395
+ border-radius: var(--nuraly-border-radius-input, 6px) !important;
396
+ box-shadow: var(--nuraly-shadow-input-focus, 0 0 0 2px rgba(24, 144, 255, 0.2)) !important;
397
+ outline: none !important;
273
398
  }
274
399
 
275
400
  /*
276
- * Disabled container border styles
401
+ * Disabled container styles
277
402
  * Applied when input is disabled
278
403
  */
279
404
  :host([disabled]) #input-container {
280
- border-bottom: var(--hybrid-input-disabled-border-bottom, var(--hybrid-input-local-disabled-border-bottom));
281
- border-top: var(--hybrid-input-disabled-border-top, var(--hybrid-input-local-disabled-border-top));
282
- border-left: var(--hybrid-input-disabled-border-left, var(--hybrid-input-local-disabled-border-left));
283
- border-right: var(--hybrid-input-disabled-border-right, var(--hybrid-input-local-disabled-border-right));
284
- opacity: 0.6;
405
+ background-color: var(--nuraly-color-input-disabled-background, #f5f5f5);
406
+ border-color: var(--nuraly-color-input-disabled-border, #d9d9d9);
407
+ color: var(--nuraly-color-input-disabled-text, rgba(0, 0, 0, 0.25));
408
+ cursor: not-allowed;
285
409
  }
286
410
 
287
411
  /* ========================================
@@ -293,9 +417,9 @@ const inputStyle = css `
293
417
  * Default: light border, focus: blue border
294
418
  */
295
419
  :host([variant='outlined']) #input-container {
296
- border: var(--hybrid-input-outlined-border, var(--hybrid-input-local-outlined-border));
297
- border-radius: var(--hybrid-input-outlined-border-radius, var(--hybrid-input-local-outlined-border-radius));
298
- background-color: var(--hybrid-input-outlined-background, var(--hybrid-input-local-outlined-background));
420
+ border: var(--nuraly-input-outlined-border, var(--nuraly-outlined-border));
421
+ border-radius: var(--nuraly-input-outlined-border-radius, var(--nuraly-outlined-border-radius));
422
+ background-color: var(--nuraly-input-outlined-background, var(--nuraly-outlined-background));
299
423
  }
300
424
 
301
425
  :host([variant='outlined']) .input-wrapper {
@@ -303,7 +427,7 @@ const inputStyle = css `
303
427
  }
304
428
 
305
429
  :host([variant='outlined']:not([state='error'])) #input-container:focus-within {
306
- border: var(--hybrid-input-outlined-focus-border, var(--hybrid-input-local-outlined-focus-border));
430
+ border: var(--nuraly-input-outlined-focus-border, var(--nuraly-outlined-focus-border));
307
431
  }
308
432
 
309
433
  /*
@@ -311,9 +435,9 @@ const inputStyle = css `
311
435
  * Subtle background with bottom border indication
312
436
  */
313
437
  :host([variant='filled']) #input-container {
314
- background-color: var(--hybrid-input-filled-background, var(--hybrid-input-local-filled-background));
315
- border-radius: var(--hybrid-input-filled-border-radius, var(--hybrid-input-local-filled-border-radius));
316
- border-bottom: var(--hybrid-input-filled-border-bottom, var(--hybrid-input-local-filled-border-bottom));
438
+ background-color: var(--nuraly-input-filled-background, var(--nuraly-filled-background));
439
+ border-radius: var(--nuraly-input-filled-border-radius, var(--nuraly-filled-border-radius));
440
+ border-bottom: var(--nuraly-input-filled-border-bottom, var(--nuraly-filled-border-bottom));
317
441
  border-top: none;
318
442
  border-left: none;
319
443
  border-right: none;
@@ -324,7 +448,7 @@ const inputStyle = css `
324
448
  }
325
449
 
326
450
  :host([variant='filled']:not([state='error'])) #input-container:focus-within {
327
- border-bottom: var(--hybrid-input-filled-focus-border-bottom, var(--hybrid-input-local-filled-focus-border-bottom));
451
+ border-bottom: var(--nuraly-input-filled-focus-border-bottom, var(--nuraly-filled-focus-border-bottom));
328
452
  border-top: none;
329
453
  border-left: none;
330
454
  border-right: none;
@@ -335,9 +459,9 @@ const inputStyle = css `
335
459
  * Clean appearance with focus indication via outline
336
460
  */
337
461
  :host([variant='borderless']) #input-container {
338
- background-color: var(--hybrid-input-borderless-background, var(--hybrid-input-local-borderless-background));
462
+ background-color: var(--nuraly-input-borderless-background, var(--nuraly-borderless-background));
339
463
  border: none;
340
- border-radius: var(--hybrid-input-borderless-border-radius, var(--hybrid-input-local-borderless-border-radius));
464
+ border-radius: var(--nuraly-input-borderless-border-radius, var(--nuraly-borderless-border-radius));
341
465
  }
342
466
 
343
467
  :host([variant='borderless']) .input-wrapper {
@@ -345,7 +469,7 @@ const inputStyle = css `
345
469
  }
346
470
 
347
471
  :host([variant='borderless']:not([state='error'])) #input-container:focus-within {
348
- outline: var(--hybrid-input-borderless-focus-outline, var(--hybrid-input-local-borderless-focus-outline));
472
+ outline: var(--nuraly-input-borderless-focus-outline, var(--nuraly-borderless-focus-outline));
349
473
  border: none;
350
474
  }
351
475
 
@@ -354,7 +478,7 @@ const inputStyle = css `
354
478
  * Maintains existing behavior as default
355
479
  */
356
480
  :host([variant='underlined']) #input-container {
357
- border-bottom: var(--hybrid-input-underlined-border-bottom, var(--hybrid-input-local-underlined-border-bottom));
481
+ border-bottom: var(--nuraly-input-underlined-border-bottom, var(--nuraly-underlined-border-bottom));
358
482
  border-top: none;
359
483
  border-left: none;
360
484
  border-right: none;
@@ -362,7 +486,7 @@ const inputStyle = css `
362
486
  }
363
487
 
364
488
  :host([variant='underlined']:not([state='error'])) #input-container:focus-within {
365
- border-bottom: var(--hybrid-input-underlined-focus-border-bottom, var(--hybrid-input-local-underlined-focus-border-bottom));
489
+ border-bottom: var(--nuraly-input-underlined-focus-border-bottom, var(--nuraly-underlined-focus-border-bottom));
366
490
  border-top: none;
367
491
  border-left: none;
368
492
  border-right: none;
@@ -380,9 +504,9 @@ const inputStyle = css `
380
504
  width: 100%;
381
505
  border: none;
382
506
  outline: none;
383
- color: var(--hybrid-input-text-color, var(--hybrid-input-local-text-color));
384
- font-family: var(--hybrid-input-font-family, var(--hybrid-input-local-font-family));
385
- font-size: var(--hybrid-input-font-size, var(--hybrid-input-local-font-size));
507
+ color: var(--nuraly-input-text-color, var(--nuraly-text-color));
508
+ font-family: var(--nuraly-input-font-family, var(--nuraly-font-family));
509
+ font-size: var(--nuraly-input-font-size, var(--nuraly-font-size));
386
510
  }
387
511
 
388
512
  /* Remove default number input spinners */
@@ -406,13 +530,13 @@ const inputStyle = css `
406
530
  * Applied when state='error' and not disabled
407
531
  */
408
532
  :host(:not([disabled])[state='error']) #input-container {
409
- border: var(--hybrid-input-error-border, var(--hybrid-input-local-error-border)) !important;
533
+ border: var(--nuraly-input-error-border, var(--nuraly-error-border)) !important;
410
534
  outline: none !important;
411
535
  }
412
536
 
413
537
  /* Override variant-specific error state styling */
414
538
  :host([variant='borderless'][state='error']) #input-container {
415
- border: var(--hybrid-input-error-border, var(--hybrid-input-local-error-border)) !important;
539
+ border: var(--nuraly-input-error-border, var(--nuraly-error-border)) !important;
416
540
  outline: none !important;
417
541
  }
418
542
 
@@ -421,7 +545,7 @@ const inputStyle = css `
421
545
  border-top: none !important;
422
546
  border-left: none !important;
423
547
  border-right: none !important;
424
- border-bottom: var(--hybrid-input-error-border, var(--hybrid-input-local-error-border)) !important;
548
+ border-bottom: var(--nuraly-input-error-border, var(--nuraly-error-border)) !important;
425
549
  }
426
550
 
427
551
  /*
@@ -431,7 +555,7 @@ const inputStyle = css `
431
555
  :host([state='error']) input[type='number'] ~ #number-icons,
432
556
  :host([state='warning']) input[type='number'] ~ #number-icons {
433
557
  position: static;
434
- padding-left: var(--hybrid-input-number-icons-container-padding-left, var(--hybrid-input-local-number-icons-container-padding-left));
558
+ padding-left: var(--nuraly-input-number-icons-container-padding-left, var(--nuraly-number-icons-container-padding-left));
435
559
  }
436
560
 
437
561
  /* ========================================
@@ -443,9 +567,9 @@ const inputStyle = css `
443
567
  * Applied to slotted label elements
444
568
  */
445
569
  ::slotted([slot='label']) {
446
- color: var(--hybrid-input-label-color, var(--hybrid-input-local-label-color));
447
- font-size: var(--hybrid-input-label-font-size, var(--hybrid-input-local-label-font-size));
448
- padding-bottom: var(--hybrid-input-label-padding-bottom, var(--hybrid-input-local-label-padding-bottom));
570
+ color: var(--nuraly-input-label-color, var(--nuraly-label-color));
571
+ font-size: var(--nuraly-input-label-font-size, var(--nuraly-label-font-size));
572
+ padding-bottom: var(--nuraly-input-label-padding-bottom, var(--nuraly-label-padding-bottom));
449
573
  }
450
574
 
451
575
  /*
@@ -453,9 +577,21 @@ const inputStyle = css `
453
577
  * Applied to slotted helper text elements
454
578
  */
455
579
  ::slotted([slot='helper-text']) {
456
- color: var(--hybrid-input-helper-text-color, var(--hybrid-input-local-helper-text-color));
457
- font-size: var(--hybrid-input-helper-text-font-size, var(--hybrid-input-local-helper-text-font-size));
458
- padding-top: var(--hybrid-input-helper-text-padding-top, var(--hybrid-input-local-helper-text-padding-top));
580
+ color: var(--nuraly-input-helper-text-color, var(--nuraly-helper-text-color));
581
+ font-size: var(--nuraly-input-helper-text-font-size, var(--nuraly-helper-text-font-size));
582
+ padding-top: var(--nuraly-input-helper-text-padding-top, var(--nuraly-helper-text-padding-top));
583
+
584
+ /* Prevent text overflow and ensure proper wrapping without affecting parent width */
585
+ word-wrap: break-word;
586
+ word-break: break-word;
587
+ overflow-wrap: break-word;
588
+ hyphens: auto;
589
+ white-space: normal;
590
+ max-width: 100%;
591
+ width: 0;
592
+ min-width: 100%;
593
+ box-sizing: border-box;
594
+ line-height: 1.4;
459
595
  }
460
596
 
461
597
  /*
@@ -463,11 +599,11 @@ const inputStyle = css `
463
599
  * Override helper text color based on validation state
464
600
  */
465
601
  :host([state='error']) ::slotted([slot='helper-text']) {
466
- color: var(--hybrid-input-error-helper-text-color, var(--hybrid-input-local-error-helper-text-color));
602
+ color: var(--nuraly-input-error-helper-text-color, var(--nuraly-error-helper-text-color));
467
603
  }
468
604
 
469
605
  :host([state='warning']) ::slotted([slot='helper-text']) {
470
- color: var(--hybrid-input-warning-helper-text-color, var(--hybrid-input-local-warning-helper-text-color));
606
+ color: var(--nuraly-input-warning-helper-text-color, var(--nuraly-warning-helper-text-color));
471
607
  }
472
608
 
473
609
  /*
@@ -475,11 +611,21 @@ const inputStyle = css `
475
611
  * Applied when input is disabled
476
612
  */
477
613
  :host([disabled]) ::slotted([slot='helper-text']) {
478
- color: var(--hybrid-input-disabled-helper-text-color, var(--hybrid-input-local-disabled-helper-text-color));
614
+ color: var(--nuraly-input-disabled-helper-text-color, var(--nuraly-disabled-helper-text-color));
479
615
  }
480
616
 
481
617
  :host([disabled]) ::slotted([slot='label']) {
482
- color: var(--hybrid-input-disabled-label-color, var(--hybrid-input-local-disabled-label-color));
618
+ color: var(--nuraly-input-disabled-label-color, var(--nuraly-disabled-label-color));
619
+ }
620
+
621
+ /*
622
+ * Input prefix wrapper styling
623
+ * Centers the prefix content vertically and horizontally
624
+ */
625
+ .input-prefix {
626
+ display: flex;
627
+ align-items: center;
628
+ justify-content: center;
483
629
  }
484
630
 
485
631
  /*
@@ -489,12 +635,22 @@ const inputStyle = css `
489
635
  ::slotted([slot='prefix']) {
490
636
  display: flex;
491
637
  align-items: center;
492
- padding-right: var(--hybrid-input-prefix-padding-right, var(--hybrid-input-local-prefix-padding-right));
493
- color: var(--hybrid-input-prefix-color, var(--hybrid-input-local-prefix-color));
494
- font-size: var(--hybrid-input-prefix-font-size, var(--hybrid-input-local-prefix-font-size));
638
+ padding-right: var(--nuraly-input-prefix-padding-right, var(--nuraly-prefix-padding-right));
639
+ color: var(--nuraly-input-prefix-color, var(--nuraly-prefix-color));
640
+ font-size: var(--nuraly-input-prefix-font-size, var(--nuraly-prefix-font-size));
495
641
  flex-shrink: 0;
496
642
  }
497
643
 
644
+ /*
645
+ * Input suffix wrapper styling
646
+ * Centers the suffix content vertically and horizontally
647
+ */
648
+ .input-suffix {
649
+ display: flex;
650
+ align-items: center;
651
+ justify-content: center;
652
+ }
653
+
498
654
  /*
499
655
  * Suffix slot styling
500
656
  * Applied to slotted suffix content (icons, text, etc.)
@@ -502,9 +658,9 @@ const inputStyle = css `
502
658
  ::slotted([slot='suffix']) {
503
659
  display: flex;
504
660
  align-items: center;
505
- padding-left: var(--hybrid-input-suffix-padding-left, var(--hybrid-input-local-suffix-padding-left));
506
- color: var(--hybrid-input-suffix-color, var(--hybrid-input-local-suffix-color));
507
- font-size: var(--hybrid-input-suffix-font-size, var(--hybrid-input-local-suffix-font-size));
661
+ padding-left: var(--nuraly-input-suffix-padding-left, var(--nuraly-suffix-padding-left));
662
+ color: var(--nuraly-input-suffix-color, var(--nuraly-suffix-color));
663
+ font-size: var(--nuraly-input-suffix-font-size, var(--nuraly-suffix-font-size));
508
664
  flex-shrink: 0;
509
665
  }
510
666
 
@@ -514,8 +670,8 @@ const inputStyle = css `
514
670
  */
515
671
  :host([disabled]) ::slotted([slot='prefix']),
516
672
  :host([disabled]) ::slotted([slot='suffix']) {
517
- opacity: var(--hybrid-input-disabled-icon-opacity, var(--hybrid-input-local-disabled-icon-opacity));
518
- color: var(--hybrid-input-disabled-prefix-suffix-color, var(--hybrid-input-local-disabled-prefix-suffix-color));
673
+ opacity: var(--nuraly-input-disabled-icon-opacity, var(--nuraly-disabled-icon-opacity));
674
+ color: var(--nuraly-input-disabled-prefix-suffix-color, var(--nuraly-disabled-prefix-suffix-color));
519
675
  }
520
676
  `;
521
677
  /**
@@ -529,26 +685,33 @@ const sizeInputStyle = css `
529
685
 
530
686
  /* Large input size variant */
531
687
  div[data-size='large'] {
532
- padding-top: var(--hybrid-input-large-padding-top, var(--hybrid-input-local-large-padding-top));
533
- padding-bottom: var(--hybrid-input-large-padding-bottom, var(--hybrid-input-local-large-padding-bottom));
534
- padding-left: var(--hybrid-input-large-padding-left, var(--hybrid-input-local-large-padding-left));
535
- padding-right: var(--hybrid-input-large-padding-right, var(--hybrid-input-local-large-padding-right));
688
+ padding-top: var(--nuraly-input-large-padding-top, var(--nuraly-large-padding-top));
689
+ padding-bottom: var(--nuraly-input-large-padding-bottom, var(--nuraly-large-padding-bottom));
690
+ padding-left: var(--nuraly-input-large-padding-left, var(--nuraly-large-padding-left));
691
+ padding-right: var(--nuraly-input-large-padding-right, var(--nuraly-large-padding-right));
536
692
  }
537
693
 
538
694
  /* Medium input size variant (default) */
539
695
  div[data-size='medium'] {
540
- padding-top: var(--hybrid-input-medium-padding-top, var(--hybrid-input-local-medium-padding-top));
541
- padding-bottom: var(--hybrid-input-medium-padding-bottom, var(--hybrid-input-local-medium-padding-bottom));
542
- padding-left: var(--hybrid-input-medium-padding-left, var(--hybrid-input-local-medium-padding-left));
543
- padding-right: var(--hybrid-input-medium-padding-right, var(--hybrid-input-local-medium-padding-right));
696
+ padding-top: var(--nuraly-input-medium-padding-top, var(--nuraly-medium-padding-top));
697
+ padding-bottom: var(--nuraly-input-medium-padding-bottom, var(--nuraly-medium-padding-bottom));
698
+ padding-left: var(--nuraly-input-medium-padding-left, var(--nuraly-medium-padding-left));
699
+ padding-right: var(--nuraly-input-medium-padding-right, var(--nuraly-medium-padding-right));
544
700
  }
545
701
 
546
702
  /* Small input size variant */
547
703
  div[data-size='small'] {
548
- padding-top: var(--hybrid-input-small-padding-top, var(--hybrid-input-local-small-padding-top));
549
- padding-bottom: var(--hybrid-input-small-padding-bottom, var(--hybrid-input-local-small-padding-bottom));
550
- padding-left: var(--hybrid-input-small-padding-left, var(--hybrid-input-local-small-padding-left));
551
- padding-right: var(--hybrid-input-small-padding-right, var(--hybrid-input-local-small-padding-right));
704
+ padding-top: var(--nuraly-input-small-padding-top, var(--nuraly-small-padding-top));
705
+ padding-bottom: var(--nuraly-input-small-padding-bottom, var(--nuraly-small-padding-bottom));
706
+ padding-left: var(--nuraly-input-small-padding-left, var(--nuraly-small-padding-left));
707
+ padding-right: var(--nuraly-input-small-padding-right, var(--nuraly-small-padding-right));
708
+ }
709
+
710
+ /* Carbon Design System - Size-specific padding overrides */
711
+ html[data-theme^="carbon"] nr-input div[data-size='medium'],
712
+ body[data-theme^="carbon"] nr-input div[data-size='medium'],
713
+ [data-theme^="carbon"] div[data-size='medium'] {
714
+ padding: 4px 8px !important;
552
715
  }
553
716
 
554
717
  /*
@@ -556,17 +719,159 @@ const sizeInputStyle = css `
556
719
  * Shows character count and limit information
557
720
  */
558
721
  .character-count {
559
- font-size: var(--hybrid-input-character-count-font-size, var(--hybrid-input-local-character-count-font-size));
560
- color: var(--hybrid-input-character-count-color, var(--hybrid-input-local-character-count-color));
722
+ font-size: var(--nuraly-input-character-count-font-size, var(--nuraly-character-count-font-size));
723
+ color: var(--nuraly-input-character-count-color, var(--nuraly-character-count-color));
561
724
  text-align: right;
562
- margin-top: var(--hybrid-input-character-count-margin-top, var(--hybrid-input-local-character-count-margin-top));
563
- font-family: var(--hybrid-input-font-family, var(--hybrid-input-local-font-family));
725
+ margin-top: var(--nuraly-input-character-count-margin-top, var(--nuraly-character-count-margin-top));
726
+ font-family: var(--nuraly-input-font-family, var(--nuraly-font-family));
564
727
  }
565
728
 
566
729
  /* Character count over limit styling */
567
730
  .character-count[data-over-limit] {
568
- color: var(--hybrid-input-character-count-over-limit-color, var(--hybrid-input-local-character-count-over-limit-color));
731
+ color: var(--nuraly-input-character-count-over-limit-color, var(--nuraly-character-count-over-limit-color));
732
+ }
733
+
734
+ /* ========================================
735
+ * VALIDATION MESSAGE STYLES
736
+ * ======================================== */
737
+
738
+ /*
739
+ * Base validation message styling
740
+ * Common styles for error and warning messages
741
+ */
742
+ .validation-message {
743
+ font-size: var(--nuraly-input-validation-message-font-size, var(--nuraly-validation-message-font-size, 0.875rem));
744
+ font-family: var(--nuraly-input-font-family, var(--nuraly-font-family));
745
+ margin-top: var(--nuraly-input-validation-message-margin-top, var(--nuraly-validation-message-margin-top, 0.25rem));
746
+ padding: var(--nuraly-input-validation-message-padding, var(--nuraly-validation-message-padding, 0));
747
+
748
+ /* Prevent text overflow and ensure proper wrapping without affecting parent width */
749
+ word-wrap: break-word;
750
+ word-break: break-word;
751
+ overflow-wrap: break-word;
752
+ hyphens: auto;
753
+ white-space: normal;
754
+ max-width: 100%;
755
+ width: 0;
756
+ min-width: 100%;
757
+ box-sizing: border-box;
758
+ line-height: var(--nuraly-input-validation-message-line-height, var(--nuraly-validation-message-line-height, 1.4));
759
+ }
760
+
761
+ /*
762
+ * Error validation message styling
763
+ * Applied when validation message has error class
764
+ */
765
+ .validation-message.error {
766
+ color: var(--nuraly-input-error-message-color, var(--nuraly-error-message-color, var(--nuraly-input-error-color, var(--nuraly-error-color, #dc2626))));
767
+ }
768
+
769
+ /*
770
+ * Warning validation message styling
771
+ * Applied when validation message has warning class
772
+ */
773
+ .validation-message.warning {
774
+ color: var(--nuraly-input-warning-message-color, var(--nuraly-warning-message-color, var(--nuraly-input-warning-color, var(--nuraly-warning-color, #d97706))));
775
+ }
776
+
777
+ /*
778
+ * Disabled state for validation messages
779
+ * Applied when input is disabled
780
+ */
781
+ :host([disabled]) .validation-message {
782
+ opacity: var(--nuraly-input-disabled-validation-message-opacity, var(--nuraly-disabled-validation-message-opacity, 0.6));
783
+ color: var(--nuraly-input-disabled-validation-message-color, var(--nuraly-disabled-validation-message-color));
569
784
  }
785
+
786
+ /*
787
+ * Validation icon styles
788
+ * Base styles for validation feedback icons
789
+ */
790
+ .validation-icon {
791
+ width: 16px;
792
+ height: 16px;
793
+ display: inline-flex;
794
+ align-items: center;
795
+ justify-content: center;
796
+ }
797
+
798
+ /*
799
+ * Loading validation icon with hourglass animation
800
+ * Applied when async validation is in progress
801
+ */
802
+ .validation-icon.validation-loading {
803
+ color: var(--nuraly-input-primary-color, var(--nuraly-primary-color, #3b82f6));
804
+ animation: validation-hourglass 2s ease-in-out infinite;
805
+ transform-origin: center;
806
+ }
807
+
808
+ /*
809
+ * Error validation icon styling
810
+ * Applied when validation fails
811
+ */
812
+ .validation-icon.validation-error {
813
+ color: var(--nuraly-input-error-color, var(--nuraly-error-color, #dc2626));
814
+ }
815
+
816
+ /*
817
+ * Warning validation icon styling
818
+ * Applied when validation has warnings
819
+ */
820
+ .validation-icon.validation-warning {
821
+ color: var(--nuraly-input-warning-color, var(--nuraly-warning-color, #d97706));
822
+ }
823
+
824
+ /*
825
+ * Success validation icon styling
826
+ * Applied when validation passes
827
+ */
828
+ .validation-icon.validation-success {
829
+ color: var(--nuraly-input-success-color, var(--nuraly-success-color, #16a34a));
830
+ }
831
+
832
+ /*
833
+ * Hourglass animation for validation loading
834
+ * Gentle pulsing effect without rotation for clean appearance
835
+ */
836
+ @keyframes validation-hourglass {
837
+ 0% {
838
+ opacity: 0.7;
839
+ transform: scale(1);
840
+ }
841
+ 25% {
842
+ opacity: 1;
843
+ transform: scale(1.03);
844
+ }
845
+ 50% {
846
+ opacity: 0.8;
847
+ transform: scale(1);
848
+ }
849
+ 75% {
850
+ opacity: 1;
851
+ transform: scale(1.03);
852
+ }
853
+ 100% {
854
+ opacity: 0.7;
855
+ transform: scale(1);
856
+ }
857
+ }
858
+
859
+ /*
860
+ * Alternative pulse animation option
861
+ * Uncomment this and change animation above to use pulse instead of hourglass
862
+ */
863
+ /*
864
+ @keyframes validation-pulse {
865
+ 0%, 100% {
866
+ opacity: 1;
867
+ transform: scale(1);
868
+ }
869
+ 50% {
870
+ opacity: 0.7;
871
+ transform: scale(1.1);
872
+ }
873
+ }
874
+ */
570
875
  `;
571
- export const styles = [inputStyle, sizeInputStyle, styleVariables];
876
+ export const styles = [inputStyle, sizeInputStyle];
572
877
  //# sourceMappingURL=input.style.js.map