@nuralyui/select 0.0.4 → 0.1.0

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