@nuralyui/select 0.0.5 → 0.1.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (36) hide show
  1. package/bundle.js +788 -0
  2. package/index.d.ts +15 -0
  3. package/index.js +18 -0
  4. package/index.js.map +1 -1
  5. package/package.json +29 -3
  6. package/react.d.ts +12 -1
  7. package/react.js +13 -2
  8. package/react.js.map +1 -1
  9. package/select.component.d.ts +305 -20
  10. package/select.component.js +601 -137
  11. package/select.component.js.map +1 -1
  12. package/select.constant.d.ts +130 -0
  13. package/select.constant.js +133 -0
  14. package/select.constant.js.map +1 -1
  15. package/select.style.js +377 -158
  16. package/select.style.js.map +1 -1
  17. package/select.style.variables.d.ts +6 -0
  18. package/select.style.variables.js +93 -0
  19. package/select.style.variables.js.map +1 -0
  20. package/select.types.d.ts +86 -10
  21. package/select.types.js +66 -16
  22. package/select.types.js.map +1 -1
  23. package/demo/select-demo.d.ts +0 -25
  24. package/demo/select-demo.d.ts.map +0 -1
  25. package/demo/select-demo.js +0 -254
  26. package/demo/select-demo.js.map +0 -1
  27. package/index.d.ts.map +0 -1
  28. package/react.d.ts.map +0 -1
  29. package/select.component.d.ts.map +0 -1
  30. package/select.constant.d.ts.map +0 -1
  31. package/select.style.d.ts.map +0 -1
  32. package/select.types.d.ts.map +0 -1
  33. package/test/select_test.d.ts +0 -2
  34. package/test/select_test.d.ts.map +0 -1
  35. package/test/select_test.js +0 -132
  36. package/test/select_test.js.map +0 -1
package/select.style.js CHANGED
@@ -1,234 +1,453 @@
1
1
  import { css } from 'lit';
2
- const selectStyle = css `
2
+ import { selectVariables } from './select.style.variables.js';
3
+ export const styles = css `
4
+ ${selectVariables}
5
+
3
6
  :host {
4
- font-family: var(--hybrid-select-font-family,var(--hybrid-select-local-font-family));
7
+ width: fit-content;
8
+ display: block;
9
+ font-family: var(--hybrid-select-font-family, var(--hybrid-select-local-font-family));
10
+ font-size: var(--hybrid-select-font-size, var(--hybrid-select-local-font-size));
11
+ line-height: var(--hybrid-select-line-height, var(--hybrid-select-local-line-height));
12
+ margin: var(--hybrid-select-margin, var(--hybrid-select-local-wrapper-margin));
13
+ }
14
+
15
+ /* Host attribute selectors for configuration */
16
+ :host([disabled]) {
17
+ opacity: var(--hybrid-select-disabled-opacity, var(--hybrid-select-local-disabled-opacity));
18
+ pointer-events: none;
19
+ }
20
+
21
+ :host([disabled]) .wrapper {
22
+ background-color: var(--hybrid-select-disabled-background, var(--hybrid-select-local-disabled-background));
23
+ border-color: var(--hybrid-select-disabled-border-color, var(--hybrid-select-local-disabled-border-color));
24
+ color: var(--hybrid-select-disabled-text-color, var(--hybrid-select-local-disabled-text-color));
25
+ cursor: not-allowed;
26
+ }
27
+
28
+ /* Theme-specific styles */
29
+ :host([theme='dark']) {
30
+ --hybrid-select-local-background-color: #262626;
31
+ --hybrid-select-local-border-color: #424242;
32
+ --hybrid-select-local-text-color: #ffffff;
33
+ --hybrid-select-local-placeholder-color: #8c8c8c;
34
+ --hybrid-select-local-dropdown-background: #262626;
35
+ --hybrid-select-local-dropdown-border-color: #424242;
36
+ --hybrid-select-local-option-hover-background: #393939;
37
+ --hybrid-select-local-option-selected-background: #1e3a5f;
38
+ --hybrid-select-local-hover-border-color: #4096ff;
39
+ --hybrid-select-local-focus-border-color: #4096ff;
40
+ }
41
+
42
+ /* Size variants */
43
+ :host([size='small']) .wrapper {
44
+ min-height: var(--hybrid-select-small-height, var(--hybrid-select-local-small-height));
45
+ font-size: var(--hybrid-select-small-font-size, var(--hybrid-select-local-small-font-size));
46
+ }
47
+
48
+ :host([size='small']) .select-trigger {
49
+ padding: var(--hybrid-select-small-padding, var(--hybrid-select-local-small-padding));
50
+ padding-right: calc(var(--hybrid-select-icon-size, var(--hybrid-select-local-icon-size)) + 20px);
51
+ }
52
+
53
+ :host([size='medium']) .wrapper {
54
+ min-height: var(--hybrid-select-medium-height, var(--hybrid-select-local-medium-height));
55
+ font-size: var(--hybrid-select-medium-font-size, var(--hybrid-select-local-medium-font-size));
56
+ }
57
+
58
+ :host([size='medium']) .select-trigger {
59
+ padding: var(--hybrid-select-medium-padding, var(--hybrid-select-local-medium-padding));
60
+ padding-right: calc(var(--hybrid-select-icon-size, var(--hybrid-select-local-icon-size)) + 20px);
61
+ }
62
+
63
+ :host([size='large']) .wrapper {
64
+ min-height: var(--hybrid-select-large-height, var(--hybrid-select-local-large-height));
65
+ font-size: var(--hybrid-select-large-font-size, var(--hybrid-select-local-large-font-size));
66
+ }
67
+
68
+ :host([size='large']) .select-trigger {
69
+ padding: var(--hybrid-select-large-padding, var(--hybrid-select-local-large-padding));
70
+ padding-right: calc(var(--hybrid-select-icon-size, var(--hybrid-select-local-icon-size)) + 20px);
71
+ }
72
+
73
+ /* Status variants */
74
+ :host([status='error']) .wrapper {
75
+ border-color: var(--hybrid-select-error-border-color, var(--hybrid-select-local-error-border-color));
76
+ }
77
+
78
+ :host([status='warning']) .wrapper {
79
+ border-color: var(--hybrid-select-warning-border-color, var(--hybrid-select-local-warning-border-color));
80
+ }
81
+
82
+ :host([status='success']) .wrapper {
83
+ border-color: var(--hybrid-select-success-border-color, var(--hybrid-select-local-success-border-color));
84
+ }
85
+
86
+ /* Type variants */
87
+ :host([type='inline']) {
88
+ display: flex;
89
+ align-items: center;
90
+ gap: 8px;
91
+ }
92
+
93
+ :host([type='inline']) .wrapper {
94
+ flex: 1;
95
+ }
96
+
97
+ /* Show dropdown */
98
+ :host([show]) .options {
99
+ display: flex !important;
5
100
  }
101
+
102
+ /* Main wrapper container */
6
103
  .wrapper {
7
- border-radius: var(--hybrid-select-border-radius,var(--hybrid-select-local-border-radius));
8
104
  position: relative;
9
- width: var(--hybrid-select-width,var(--hybrid-select-local-width));
10
- border-bottom: var(--hybrid-select-border-bottom,var(--hybrid-select-local-border-bottom));
11
- border-top: var(--hybrid-select-border-top,var(--hybrid-select-local-border-top));
12
- border-left: var(--hybrid-select-border-left,var(--hybrid-select-local-border-left));
13
- border-right: var(--hybrid-select-border-right,var(--hybrid-select-local-border-right));
14
- word-break:break-word;
15
- font-family: var(--hybrid-select-font-family,var(--hybrid-select-local-font-family));
105
+ width: var(--hybrid-select-width, var(--hybrid-select-local-width));
106
+ background-color: var(--hybrid-select-background-color, var(--hybrid-select-local-background-color));
107
+ border: var(--hybrid-select-border-width, var(--hybrid-select-local-border-width)) solid
108
+ var(--hybrid-select-border-color, var(--hybrid-select-local-border-color));
109
+ border-radius: var(--hybrid-select-border-radius, var(--hybrid-select-local-border-radius));
110
+ transition: all var(--hybrid-select-transition-duration, var(--hybrid-select-local-transition-duration))
111
+ var(--hybrid-select-transition-timing, var(--hybrid-select-local-transition-timing));
112
+ cursor: pointer;
113
+ outline: none;
114
+ margin: var(--hybrid-select-wrapper-margin, 0);
115
+ min-height: var(--hybrid-select-min-height, var(--hybrid-select-local-min-height));
116
+ /* Ensure dropdown can overflow the wrapper */
117
+ overflow: visible;
118
+ }
16
119
 
120
+ .wrapper:hover:not(:disabled) {
121
+ border-color: var(--hybrid-select-hover-border-color, var(--hybrid-select-local-hover-border-color));
17
122
  }
18
123
 
124
+ .wrapper:focus,
125
+ .wrapper:focus-within {
126
+ border-color: var(--hybrid-select-focus-border-color, var(--hybrid-select-local-focus-border-color));
127
+ box-shadow: 0 0 0 2px var(--hybrid-select-focus-border-color, var(--hybrid-select-local-focus-border-color))33;
128
+ }
129
+
130
+ /* Select container */
19
131
  .select {
20
132
  display: flex;
21
133
  flex-direction: column;
22
- cursor: pointer;
23
- font-size: var(--hybrid-select-medium-font-size,var(--hybrid-select-local-medium-font-size));
24
-
25
134
  }
26
135
 
136
+ /* Select trigger (main display area) */
27
137
  .select-trigger {
28
- border-radius: var(--hybrid-select-border-radius,var(--hybrid-select-local-border-radius));
29
- position: relative;
30
- background-color: var(--hybrid-select-background-color,var(--hybrid-select-local-background-color));
31
- color: var(--hybrid-select-trigger-text-color,var(--hybrid-select-local-trigger-text-color));
32
- min-height: var(--hybrid-select-medium-height,var(--hybrid-select-local-medium-height));
33
138
  display: flex;
34
- padding-left: var(--hybrid-select-padding-left,var(--hybrid-select-local-padding-left));
35
- padding-right: calc(var(--hybrid-select-icon-width,var(--hybrid-select-local-icon-width)) * 2 + var(--hybrid-select-icons-padding,var(--hybrid-select-local-icons-padding)) * 2 + 1px);
36
139
  align-items: center;
37
- font-size: var(--hybrid-select-medium-font-size,var(--hybrid-select-local-medium-font-size));
140
+ padding: var(--hybrid-select-padding-top, var(--hybrid-select-local-padding-top))
141
+ calc(var(--hybrid-select-icon-size, var(--hybrid-select-local-icon-size)) + 20px)
142
+ var(--hybrid-select-padding-bottom, var(--hybrid-select-local-padding-bottom))
143
+ var(--hybrid-select-padding-left, var(--hybrid-select-local-padding-left));
144
+ color: var(--hybrid-select-text-color, var(--hybrid-select-local-text-color));
145
+ font-size: inherit;
146
+ line-height: inherit;
147
+ word-break: break-word;
148
+ min-height: inherit;
38
149
  flex-wrap: wrap;
150
+ gap: var(--hybrid-select-tag-margin, var(--hybrid-select-local-tag-margin));
151
+ }
152
+
153
+ .select-trigger:empty:before {
154
+ content: attr(data-placeholder);
155
+ color: var(--hybrid-select-placeholder-color, var(--hybrid-select-local-placeholder-color));
156
+ font-size: var(--hybrid-select-placeholder-font-size, var(--hybrid-select-local-placeholder-font-size));
39
157
  }
40
- #unselect-one {
41
- --hybrid-icon-width: var(--hybrid-select-icon-unselect-one-width,var(--hybrid-select-local-icon-unselect-one-width));
158
+
159
+ /* Multi-select tags */
160
+ .tag {
161
+ display: inline-flex;
162
+ align-items: center;
163
+ gap: 4px;
164
+ background-color: var(--hybrid-select-tag-background, var(--hybrid-select-local-tag-background));
165
+ color: var(--hybrid-select-tag-color, var(--hybrid-select-local-tag-color));
166
+ padding: var(--hybrid-select-tag-padding, var(--hybrid-select-local-tag-padding));
167
+ border-radius: var(--hybrid-select-tag-border-radius, var(--hybrid-select-local-tag-border-radius));
168
+ font-size: calc(var(--hybrid-select-font-size, var(--hybrid-select-local-font-size)) - 1px);
169
+ max-width: 100%;
42
170
  }
43
- #unselect-multiple,
44
- #unselect-one {
45
- --hybrid-icon-color: var(--hybrid-select-trigger-text-color,var(--hybrid-select-local-trigger-text-color));
171
+
172
+ .tag-label {
173
+ overflow: hidden;
174
+ text-overflow: ellipsis;
175
+ white-space: nowrap;
46
176
  }
47
- .label {
177
+
178
+ .tag-close {
179
+ color: var(--hybrid-select-tag-close-color, var(--hybrid-select-local-tag-close-color));
180
+ cursor: pointer;
48
181
  display: flex;
182
+ align-items: center;
183
+ justify-content: center;
184
+ width: var(--hybrid-select-icon-size, var(--hybrid-select-local-icon-size));
185
+ height: var(--hybrid-select-icon-size, var(--hybrid-select-local-icon-size));
186
+ border-radius: 50%;
187
+ transition: color var(--hybrid-select-transition-duration, var(--hybrid-select-local-transition-duration));
49
188
  }
50
189
 
51
- .wrapper:focus {
52
- border-radius: var(--hybrid-select-border-radius,var(--hybrid-select-local-border-radius));
53
- border: var(--hybrid-select-focus-border,var(--hybrid-select-local-focus-border));
190
+ .tag-close:hover {
191
+ color: var(--hybrid-select-tag-close-hover-color, var(--hybrid-select-local-tag-close-hover-color));
54
192
  }
193
+
194
+ /* Icons container */
55
195
  .icons-container {
56
196
  position: absolute;
57
197
  top: 50%;
58
- left: 100%;
59
- transform: translate(-100%, -50%);
198
+ right: 12px;
199
+ transform: translateY(-50%);
60
200
  display: flex;
201
+ align-items: center;
202
+ gap: 4px;
203
+ pointer-events: none;
61
204
  }
62
205
 
63
- #check-icon {
64
- position: absolute;
65
- top: 50%;
66
- transform: translate(0%, -50%);
67
- left: 5%;
68
- --hybrid-icon-color: var(--hybrid-select-trigger-text-color,var(--hybrid-select-local-trigger-text-color));
206
+ .icons-container hy-icon {
207
+ --hybrid-icon-width: var(--hybrid-select-icon-size, var(--hybrid-select-local-icon-size));
208
+ --hybrid-icon-color: var(--hybrid-select-icon-color, var(--hybrid-select-local-icon-color));
209
+ pointer-events: auto;
210
+ cursor: pointer;
211
+ transition: color var(--hybrid-select-transition-duration, var(--hybrid-select-local-transition-duration));
69
212
  }
70
- #warning-icon {
71
- --hybrid-icon-color: var(--hybrid-select-warning-icon-color,var(--hybrid-select-local-warning-icon-color));
213
+
214
+ .icons-container hy-icon:hover {
215
+ --hybrid-icon-color: var(--hybrid-select-icon-hover-color, var(--hybrid-select-local-icon-hover-color));
72
216
  }
73
- #error-icon {
74
- --hybrid-icon-color: var(--hybrid-select-error-icon-color,var(--hybrid-select-local-error-icon-color));
217
+
218
+ .arrow-icon {
219
+ --hybrid-icon-width: var(--hybrid-select-arrow-icon-size, var(--hybrid-select-local-arrow-icon-size));
220
+ transition: transform var(--hybrid-select-transition-duration, var(--hybrid-select-local-transition-duration));
221
+ pointer-events: none !important;
75
222
  }
76
223
 
77
- :host([disabled]) hy-icon {
78
- opacity: var(--hybrid-select-disabled-opacity,var(--hybrid-select-local-disabled-opacity));
79
- cursor: not-allowed;
224
+ :host([show]) .arrow-icon {
225
+ transform: rotate(180deg);
80
226
  }
81
227
 
228
+ /* Dropdown options */
82
229
  .options {
230
+ /* Default positioning - will be overridden by controller when opened */
83
231
  position: absolute;
84
- left: 0%;
85
- right: 0%;
86
- background-color: var(--hybrid-select-options-background-color,var(--hybrid-select-local-options-background-color));
87
- border-radius: var(--hybrid-select-border-radius,var(--hybrid-select-local-border-radius));
232
+ top: 100%;
233
+ margin-top: 1px;
234
+ left: 0;
235
+ right: 0;
236
+ background-color: var(--hybrid-select-dropdown-background, var(--hybrid-select-local-dropdown-background));
237
+ border: var(--hybrid-select-border-width, var(--hybrid-select-local-border-width)) solid
238
+ var(--hybrid-select-dropdown-border-color, var(--hybrid-select-local-dropdown-border-color));
239
+ border-radius: var(--hybrid-select-border-radius, var(--hybrid-select-local-border-radius));
240
+ box-shadow: var(--hybrid-select-dropdown-shadow, var(--hybrid-select-local-dropdown-shadow));
241
+ z-index: var(--hybrid-select-dropdown-z-index, var(--hybrid-select-local-dropdown-z-index));
242
+ max-height: 200px;
243
+ overflow-y: auto;
244
+ overflow-x: hidden;
88
245
  display: none;
89
246
  flex-direction: column;
90
- box-shadow: var(--hybrid-select-box-shadow,var(--hybrid-select-local-box-shadow));
91
- z-index: 1;
92
- max-height: var(--hybrid-select-max-height,var(--hybrid-select-local-max-height));
93
- overflow: auto;
247
+ animation: dropdown-enter var(--hybrid-select-dropdown-animation-duration, var(--hybrid-select-local-dropdown-animation-duration)) ease-out;
248
+ /* Ensure proper containment and exact wrapper width */
249
+ box-sizing: border-box;
250
+ width: 100%;
251
+ /* Create new stacking context to prevent layering issues */
252
+ isolation: isolate;
253
+ /* Ensure solid background to prevent visual bleed-through */
254
+ backdrop-filter: none;
255
+ -webkit-backdrop-filter: none;
256
+ /* Force above other elements */
257
+ transform: translateZ(0);
258
+ }
259
+
260
+ .options.placement-top {
261
+ top: auto;
262
+ bottom: 100%;
263
+ margin-bottom: 1px;
264
+ margin-top: 0;
265
+ animation: dropdown-enter-top var(--hybrid-select-dropdown-animation-duration, var(--hybrid-select-local-dropdown-animation-duration)) ease-out;
266
+ }
267
+
268
+ @keyframes dropdown-enter {
269
+ from {
270
+ opacity: 0;
271
+ transform: translateY(-8px);
272
+ }
273
+ to {
274
+ opacity: 1;
275
+ transform: translateY(0);
276
+ }
94
277
  }
95
278
 
279
+ @keyframes dropdown-enter-top {
280
+ from {
281
+ opacity: 0;
282
+ transform: translateY(8px);
283
+ }
284
+ to {
285
+ opacity: 1;
286
+ transform: translateY(0);
287
+ }
288
+ }
289
+
290
+ /* Option items */
96
291
  .option {
97
- padding: var(--hybrid-select-option-medium-padding,var(--hybrid-select-local-option-medium-padding));
98
- padding-left: var(--hybrid-select-option-padding-left,var(--hybrid-select-local-option-padding-left));
292
+ display: flex;
293
+ align-items: center;
294
+ gap: 8px;
295
+ padding: 8px 12px;
296
+ color: var(--hybrid-select-text-color, var(--hybrid-select-local-text-color));
297
+ font-size: var(--hybrid-select-option-font-size, var(--hybrid-select-local-option-font-size));
99
298
  cursor: pointer;
299
+ transition: background-color var(--hybrid-select-transition-duration, var(--hybrid-select-local-transition-duration));
100
300
  position: relative;
101
- color: var(--hybrid-select-option-text-color,var(--hybrid-select-local-option-text-color));
102
301
  }
302
+
103
303
  .option:hover {
104
- border-radius: var(--hybrid-select-border-option-radius,var(--hybrid-select-hover-local-border-option-radius));
105
- background-color: var(--hybrid-select-option-hover,var(--hybrid-select-local-option-hover));
304
+ background-color: var(--hybrid-select-option-hover-background, var(--hybrid-select-local-option-hover-background));
106
305
  }
107
- .option-text {
108
- padding-left: var(--hybrid-select-option-padding-left,var(--hybrid-select-local-option-padding-left));
306
+
307
+ .option.selected {
308
+ background-color: var(--hybrid-select-option-selected-background, var(--hybrid-select-local-option-selected-background));
309
+ color: var(--hybrid-select-option-selected-color, var(--hybrid-select-local-option-selected-color));
310
+ }
311
+
312
+ .option.focused {
313
+ background-color: var(--hybrid-select-option-hover-background, var(--hybrid-select-local-option-hover-background));
314
+ outline: 2px solid var(--hybrid-select-focus-border-color, var(--hybrid-select-local-focus-border-color));
315
+ outline-offset: -2px;
316
+ }
317
+
318
+ .option.disabled {
319
+ opacity: var(--hybrid-select-disabled-opacity, var(--hybrid-select-local-disabled-opacity));
320
+ cursor: not-allowed;
109
321
  }
110
- hy-icon {
322
+
323
+ .option-content {
324
+ flex: 1;
111
325
  display: flex;
112
- padding: var(--hybrid-select-icons-padding,var(--hybrid-select-local-icons-padding,));
113
- --hybrid-icon-width: var(--hybrid-select-icon-width,var(--hybrid-select-local-icon-width));
326
+ align-items: center;
327
+ gap: 8px;
114
328
  }
115
- :host([size='small']) .select-trigger {
116
- min-height: var(--hybrid-select-small-height,var(--hybrid-select-local-small-height));
117
- font-size: var(--hybrid-select-small-font-size,var(--hybrid-select-local-small-font-size));
329
+
330
+ .option-icon {
331
+ --hybrid-icon-width: var(--hybrid-select-icon-size, var(--hybrid-select-local-icon-size));
332
+ --hybrid-icon-color: currentColor;
118
333
  }
119
- :host([size='large']) .select-trigger {
120
- min-height: var(--hybrid-select-large-height,var(--hybrid-select-local-large-height));
121
- font-size: var(--hybrid-select-large-font-size,var(--hybrid-select-local-large-font-size));
334
+
335
+ .option-text {
336
+ flex: 1;
337
+ overflow: hidden;
338
+ text-overflow: ellipsis;
339
+ white-space: nowrap;
122
340
  }
123
341
 
124
- :host([size='small']) .option {
125
- padding: var(--hybrid-select-option-small-padding,var(--hybrid-select-local-option-small-padding,));
126
- font-size: var(--hybrid-select-small-font-size,var(--hybrid-select-local-small-font-size));
342
+ .option-description {
343
+ font-size: calc(var(--hybrid-select-option-font-size, var(--hybrid-select-local-option-font-size)) - 1px);
344
+ opacity: 0.7;
345
+ margin-top: 2px;
127
346
  }
128
- :host([size='large']) .option {
129
- padding: var(--hybrid-select-option-large-padding,var(--hybrid-select-local-option-large-padding,));
130
- font-size: var(--hybrid-select-large-font-size,var(--hybrid-select-local-large-font-size));
347
+
348
+ .check-icon {
349
+ --hybrid-icon-width: var(--hybrid-select-icon-size, var(--hybrid-select-local-icon-size));
350
+ --hybrid-icon-color: var(--hybrid-select-option-selected-color, var(--hybrid-select-local-option-selected-color));
131
351
  }
132
- :host([status='error']) .wrapper {
133
- border: var(--hybrid-select-error-border,var(--hybrid-select-local-error-border));
352
+
353
+ /* No options message - styled like Ant Design */
354
+ .no-options {
355
+ display: flex;
356
+ align-items: center;
357
+ justify-content: center;
358
+ padding: var(--select-no-options-padding, 24px 16px);
359
+ color: var(--select-no-options-color, #8c8c8c);
360
+ font-size: var(--hybrid-select-option-font-size, var(--hybrid-select-local-option-font-size));
361
+ cursor: default;
362
+ user-select: none;
134
363
  }
135
- :host([status='error']) ::slotted([slot='helper-text']) {
136
- color: var(--hybrid-select-error-helper-text,var(--hybrid-select-local-error-helper-text));
364
+
365
+ .no-options-content {
366
+ display: flex;
367
+ flex-direction: column;
368
+ align-items: center;
369
+ gap: var(--select-no-options-gap, 8px);
370
+ text-align: center;
137
371
  }
138
372
 
139
- :host(:not([disabled])) .select-trigger:hover {
140
- background-color: var(--hybrid-select-hover-background-color,var(--hybrid-select-local-hover-background-color));
373
+ .no-options-icon {
374
+ --hybrid-icon-width: 24px;
375
+ --hybrid-icon-color: var(--select-no-options-icon-color, #d9d9d9);
376
+ opacity: 0.8;
141
377
  }
142
378
 
143
- :host([disabled]) .wrapper {
144
- border: none;
145
- opacity: var(--hybrid-select-disabled-opacity,var(--hybrid-select-local-disabled-opacity));
146
- cursor: not-allowed;
379
+ .no-options-text {
380
+ font-size: var(--hybrid-select-option-font-size, var(--hybrid-select-local-option-font-size));
381
+ color: var(--select-no-options-color, #8c8c8c);
382
+ line-height: 1.4;
147
383
  }
148
- :host([disabled]) ::slotted([slot='helper-text']),
149
- :host([disabled]) ::slotted([slot='label']) {
150
- opacity: var(--hybrid-select-disabled-opacity,var(--hybrid-select-local-disabled-opacity));
384
+
385
+ /* Dark theme adjustments for no-options */
386
+ :host([theme='dark']) .no-options {
387
+ color: var(--select-no-options-color, #595959);
151
388
  }
152
- :host([show]) .options {
153
- display: flex;
389
+
390
+ :host([theme='dark']) .no-options-icon {
391
+ --hybrid-icon-color: var(--select-no-options-icon-color, #434343);
154
392
  }
155
- :host([type='inline']) {
156
- display: flex;
157
- gap: var(--hybrid-select-inline-gap,var(--hybrid-select-local-inline-gap));
393
+
394
+ :host([theme='dark']) .no-options-text {
395
+ color: var(--select-no-options-color, #595959);
158
396
  }
159
- :host([type='inline']) ::slotted([slot='helper-text']),
160
- :host([type='inline']) ::slotted([slot='label']) {
161
- display: flex;
162
- align-items: center;
397
+
398
+ /* Validation message */
399
+ .validation-message {
400
+ display: block;
401
+ margin-top: var(--hybrid-select-message-margin-top, var(--hybrid-select-local-message-margin-top));
402
+ font-size: var(--hybrid-select-message-font-size, var(--hybrid-select-local-message-font-size));
403
+ color: var(--hybrid-select-error-message-color, var(--hybrid-select-local-error-message-color));
163
404
  }
164
405
 
165
- ::slotted([slot='helper-text']) {
166
- color: var(--hybrid-select-helper-text-color,var(--hybrid-select-local-helper-text-color));
167
- font-size:var(--hybrid-select-helper-text-font-size,var(--hybrid-select-local-helper-text-font-size))
406
+ .validation-message.warning {
407
+ color: var(--hybrid-select-warning-message-color, var(--hybrid-select-local-warning-message-color));
408
+ }
409
+
410
+ .validation-message.success {
411
+ color: var(--hybrid-select-success-message-color, var(--hybrid-select-local-success-message-color));
168
412
  }
169
413
 
414
+ /* Slotted content styles */
170
415
  ::slotted([slot='label']) {
171
- color: var(--hybrid-select-label-text-color,var(--hybrid-select-local-label-text-color));
172
- font-size:var(--hybrid-select-label-font-size,var(--hybrid-select-local-label-font-size))
416
+ display: block;
417
+ margin-bottom: 4px;
418
+ font-weight: 500;
419
+ color: var(--hybrid-select-text-color, var(--hybrid-select-local-text-color));
420
+ }
173
421
 
422
+ ::slotted([slot='helper-text']) {
423
+ display: block;
424
+ margin-top: var(--hybrid-select-message-margin-top, var(--hybrid-select-local-message-margin-top));
425
+ font-size: var(--hybrid-select-message-font-size, var(--hybrid-select-local-message-font-size));
426
+ color: var(--hybrid-select-placeholder-color, var(--hybrid-select-local-placeholder-color));
174
427
  }
175
- :host {
176
- --hybrid-select-local-width: 100%;
177
- --hybrid-select-local-background-color: #f4f4f4;
178
- --hybrid-select-local-hover-background-color: #e0e0e0;
179
- --hybrid-select-local-border-bottom: 1px solid #cccccc;
180
- --hybrid-select-local-border-top: 3px solid transparent;
181
- --hybrid-select-local-border-left: 2px solid transparent;
182
- --hybrid-select-local-border-right: 2px solid transparent;
183
- --hybrid-select-local-trigger-text-color: #161616;
184
- --hybrid-select-local-option-text-color: #161616;
185
- --hybrid-select-local-padding-left: 5px;
186
- --hybrid-select-local-option-padding-left: 3px;
187
- --hybrid-select-local-focus-border: 2px solid #0f62fe;
188
- --hybrid-select-local-options-background-color: #f4f4f4;
189
- --hybrid-select-local-border-radius: 2px;
190
- --hybrid-select-hover-local-border-radius: 0px;
191
- --hybrid-select-local-box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
192
- --hybrid-select-local-max-height: 250px;
193
- --hybrid-select-local-option-medium-padding: 10px;
194
- --hybrid-select-local-option-large-padding: 12px;
195
- --hybrid-select-local-option-small-padding: 8px;
196
- --hybrid-select-local-option-padding-left: 17px;
197
- --hybrid-select-local-option-hover: #e0e0e0;
198
- --hybrid-select-local-icons-padding: 3px;
199
- --hybrid-select-local-icon-width: 14px;
200
- --hybrid-select-local-icon-unselect-one-width: 12px;
201
- --hybrid-select-local-small-height: 25px;
202
- --hybrid-select-local-medium-height: 35px;
203
- --hybrid-select-local-large-height: 45px;
204
- --hybrid-select-local-small-font-size: 12px;
205
- --hybrid-select-local-medium-font-size: 14px;
206
- --hybrid-select-local-large-font-size: 16px;
207
- --hybrid-select-local-error-border: 2px solid #da1e28;
208
- --hybrid-select-local-error-icon-color: #da1e28;
209
- --hybrid-select-local-warning-icon-color: #f0c300;
210
- --hybrid-select-local-error-helper-text: #da1e28;
211
- --hybrid-select-local-disabled-opacity: 0.5;
212
- --hybrid-select-local-inline-gap: 5px;
213
- --hybrid-select-local-helper-text-color: #a8a8a8;
214
- --hybrid-select-local-label-text-color: #a8a8a8;
215
- --hybrid-select-local-helper-text-font-size:13px;
216
- --hybrid-select-local-label-font-size:13px;
217
- }
218
- @media (prefers-color-scheme: dark) {
219
- :host {
220
- --hybrid-select-local-focus-border: 2px solid #ffffff;
221
- --hybrid-select-local-background-color: #393939;
222
- --hybrid-select-local-hover-background-color: #4c4c4c;
223
- --hybrid-select-local-options-background-color: #393939;
224
- --hybrid-select-local-option-hover: #4c4c4c;
225
- --hybrid-select-local-helper-text-color: #c6c6c6;
226
- --hybrid-select-local-label-text-color: #c6c6c6;
227
- --hybrid-select-local-border-bottom: 1px solid #6f6f6f;
228
- --hybrid-select-local-trigger-text-color: #f4f4f4;
229
- --hybrid-select-local-option-text-color: #f4f4f4;
428
+
429
+ /* Accessibility improvements */
430
+ @media (prefers-reduced-motion: reduce) {
431
+ .options,
432
+ .wrapper,
433
+ .tag-close,
434
+ .arrow-icon,
435
+ .option {
436
+ transition: none;
437
+ animation: none;
438
+ }
439
+ }
440
+
441
+ /* High contrast mode support */
442
+ @media (prefers-contrast: high) {
443
+ .wrapper {
444
+ border-width: 2px;
445
+ }
446
+
447
+ .wrapper:focus,
448
+ .wrapper:focus-within {
449
+ outline: 3px solid;
230
450
  }
231
451
  }
232
452
  `;
233
- export const styles = selectStyle;
234
453
  //# sourceMappingURL=select.style.js.map