@nuralyui/select 0.1.2 → 0.1.3
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.
- package/bundle.js +181 -325
- package/package.json +1 -1
- package/select.component.d.ts +2 -2
- package/select.component.js +19 -19
- package/select.component.js.map +1 -1
- package/select.style.js +144 -202
- package/select.style.js.map +1 -1
- package/select.style.variables.d.ts +0 -6
- package/select.style.variables.js +0 -94
- package/select.style.variables.js.map +0 -1
package/select.style.js
CHANGED
|
@@ -1,134 +1,106 @@
|
|
|
1
1
|
import { css } from 'lit';
|
|
2
|
-
import { selectVariables } from './select.style.variables.js';
|
|
3
2
|
export const styles = css `
|
|
4
|
-
|
|
3
|
+
:host {
|
|
4
|
+
/* Layout and sizing */
|
|
5
|
+
--nuraly-select-local-width: 300px;
|
|
6
|
+
--nuraly-select-local-min-height: 40px;
|
|
7
|
+
--nuraly-select-local-padding-top: 8px;
|
|
8
|
+
--nuraly-select-local-padding-bottom: 8px;
|
|
9
|
+
--nuraly-select-local-padding-left: 12px;
|
|
10
|
+
--nuraly-select-local-padding-right: 12px;
|
|
11
|
+
--nuraly-select-local-wrapper-margin: 0;
|
|
12
|
+
--nuraly-select-local-border-radius: 6px;
|
|
13
|
+
--nuraly-select-local-border-width: 1px;
|
|
14
|
+
|
|
15
|
+
/* Dropdown settings */
|
|
16
|
+
--nuraly-select-local-dropdown-z-index: 9999;
|
|
17
|
+
--nuraly-select-local-dropdown-max-height: 200px;
|
|
18
|
+
--nuraly-select-local-placeholder-font-size: 14px;
|
|
19
|
+
--nuraly-select-local-option-font-size: 14px;
|
|
20
|
+
|
|
21
|
+
/* Sizes */
|
|
22
|
+
--nuraly-select-local-medium-height: 40px;
|
|
23
|
+
--nuraly-select-local-medium-font-size: 14px;
|
|
24
|
+
--nuraly-select-local-medium-padding: 8px 12px;
|
|
25
|
+
--nuraly-select-local-small-font-size: 12px;
|
|
26
|
+
|
|
27
|
+
/* Animation and transitions */
|
|
28
|
+
--nuraly-select-local-dropdown-animation-duration: 0.15s;
|
|
29
|
+
|
|
30
|
+
/* Multi-select specific */
|
|
31
|
+
--nuraly-select-local-tag-border-radius: 4px;
|
|
32
|
+
--nuraly-select-local-tag-padding: 2px 6px;
|
|
33
|
+
--nuraly-select-local-tag-margin: 2px;
|
|
34
|
+
|
|
35
|
+
/* Validation message */
|
|
36
|
+
--nuraly-select-local-message-font-size: 12px;
|
|
37
|
+
--nuraly-select-local-message-margin-top: 4px;
|
|
38
|
+
}
|
|
5
39
|
|
|
6
40
|
:host {
|
|
7
41
|
width: fit-content;
|
|
8
42
|
display: block;
|
|
9
|
-
font-family: var(--
|
|
10
|
-
font-size: var(--
|
|
11
|
-
line-height: var(--
|
|
12
|
-
margin: var(--
|
|
43
|
+
font-family: var(--nuraly-select-font-family, Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, Cantarell, "Noto Sans", sans-serif);
|
|
44
|
+
font-size: var(--nuraly-select-font-size, 14px);
|
|
45
|
+
line-height: var(--nuraly-select-line-height, 1.5);
|
|
46
|
+
margin: var(--nuraly-select-margin, var(--nuraly-select-local-wrapper-margin));
|
|
13
47
|
}
|
|
14
48
|
|
|
15
49
|
/* Host attribute selectors for configuration */
|
|
16
50
|
:host([disabled]) {
|
|
17
|
-
opacity: var(--
|
|
51
|
+
opacity: var(--nuraly-select-disabled-opacity, 0.5);
|
|
18
52
|
pointer-events: none;
|
|
19
53
|
}
|
|
20
54
|
|
|
21
55
|
:host([disabled]) .wrapper {
|
|
22
|
-
background-color: var(--
|
|
23
|
-
border-color: var(--
|
|
24
|
-
color: var(--
|
|
56
|
+
background-color: var(--nuraly-select-disabled-background, #f9fafb);
|
|
57
|
+
border-color: var(--nuraly-select-disabled-border-color, #d9d9d9);
|
|
58
|
+
color: var(--nuraly-select-disabled-text-color, #8c8c8c);
|
|
25
59
|
cursor: not-allowed;
|
|
26
60
|
}
|
|
27
61
|
|
|
28
|
-
/*
|
|
29
|
-
* Light theme styles using data-theme attribute on wrapper element
|
|
30
|
-
* These are explicit light theme overrides when data-theme="light" is applied
|
|
31
|
-
*/
|
|
32
|
-
.wrapper[data-theme="light"] {
|
|
33
|
-
/* Select wrapper light theme overrides */
|
|
34
|
-
--hybrid-select-local-background-color: #ffffff;
|
|
35
|
-
--hybrid-select-local-border-color: #d9d9d9;
|
|
36
|
-
--hybrid-select-local-text-color: #262626;
|
|
37
|
-
--hybrid-select-local-placeholder-color: #8c8c8c;
|
|
38
|
-
--hybrid-select-local-hover-border-color: #1677ff;
|
|
39
|
-
--hybrid-select-local-focus-border-color: #1677ff;
|
|
40
|
-
|
|
41
|
-
/* Dropdown light theme overrides */
|
|
42
|
-
--hybrid-select-local-dropdown-background: #ffffff;
|
|
43
|
-
--hybrid-select-local-dropdown-border-color: #d9d9d9;
|
|
44
|
-
--hybrid-select-local-option-hover-background: #f5f5f5;
|
|
45
|
-
--hybrid-select-local-option-selected-background: #e6f7ff;
|
|
46
|
-
--hybrid-select-local-option-selected-color: #1677ff;
|
|
47
|
-
|
|
48
|
-
/* Tag styles for multi-select light theme */
|
|
49
|
-
--hybrid-select-local-tag-background: #f0f0f0;
|
|
50
|
-
--hybrid-select-local-tag-color: #262626;
|
|
51
|
-
--hybrid-select-local-tag-close-color: #8c8c8c;
|
|
52
|
-
--hybrid-select-local-tag-close-hover-color: #da1e28;
|
|
53
|
-
|
|
54
|
-
/* Icon colors for light theme */
|
|
55
|
-
--hybrid-select-local-icon-color: #8c8c8c;
|
|
56
|
-
--hybrid-select-local-icon-hover-color: #1677ff;
|
|
57
|
-
}
|
|
58
|
-
|
|
59
|
-
/*
|
|
60
|
-
* Dark theme styles using data-theme attribute on wrapper element
|
|
61
|
-
* These override the light theme defaults when data-theme="dark" is applied
|
|
62
|
-
*/
|
|
63
|
-
.wrapper[data-theme="dark"] {
|
|
64
|
-
/* Select wrapper dark theme overrides */
|
|
65
|
-
--hybrid-select-local-background-color: #262626;
|
|
66
|
-
--hybrid-select-local-border-color: #424242;
|
|
67
|
-
--hybrid-select-local-text-color: #ffffff;
|
|
68
|
-
--hybrid-select-local-placeholder-color: #8c8c8c;
|
|
69
|
-
--hybrid-select-local-hover-border-color: #4096ff;
|
|
70
|
-
--hybrid-select-local-focus-border-color: #4096ff;
|
|
71
|
-
|
|
72
|
-
/* Dropdown dark theme overrides */
|
|
73
|
-
--hybrid-select-local-dropdown-background: #262626;
|
|
74
|
-
--hybrid-select-local-dropdown-border-color: #424242;
|
|
75
|
-
--hybrid-select-local-option-hover-background: #393939;
|
|
76
|
-
--hybrid-select-local-option-selected-background: #1e3a5f;
|
|
77
|
-
--hybrid-select-local-option-selected-color: #4096ff;
|
|
78
|
-
|
|
79
|
-
/* Tag styles for multi-select dark theme */
|
|
80
|
-
--hybrid-select-local-tag-background: #393939;
|
|
81
|
-
--hybrid-select-local-tag-color: #ffffff;
|
|
82
|
-
--hybrid-select-local-tag-close-color: #8c8c8c;
|
|
83
|
-
--hybrid-select-local-tag-close-hover-color: #ff4d4f;
|
|
84
|
-
|
|
85
|
-
/* Icon colors for dark theme */
|
|
86
|
-
--hybrid-select-local-icon-color: #8c8c8c;
|
|
87
|
-
--hybrid-select-local-icon-hover-color: #4096ff;
|
|
88
|
-
}
|
|
89
|
-
|
|
90
62
|
/* Size variants */
|
|
91
63
|
:host([size='small']) .wrapper {
|
|
92
|
-
min-height: var(--
|
|
93
|
-
font-size: var(--
|
|
64
|
+
min-height: var(--nuraly-select-small-height, 32px);
|
|
65
|
+
font-size: var(--nuraly-select-small-font-size, var(--nuraly-select-local-small-font-size));
|
|
94
66
|
}
|
|
95
67
|
|
|
96
68
|
:host([size='small']) .select-trigger {
|
|
97
|
-
padding: var(--
|
|
98
|
-
padding-right: calc(var(--
|
|
69
|
+
padding: var(--nuraly-select-small-padding, 4px 8px);
|
|
70
|
+
padding-right: calc(var(--nuraly-select-icon-size, 16px) + 20px);
|
|
99
71
|
}
|
|
100
72
|
|
|
101
73
|
:host([size='medium']) .wrapper {
|
|
102
|
-
min-height: var(--
|
|
103
|
-
font-size: var(--
|
|
74
|
+
min-height: var(--nuraly-select-medium-height, var(--nuraly-select-local-medium-height));
|
|
75
|
+
font-size: var(--nuraly-select-medium-font-size, var(--nuraly-select-local-medium-font-size));
|
|
104
76
|
}
|
|
105
77
|
|
|
106
78
|
:host([size='medium']) .select-trigger {
|
|
107
|
-
padding: var(--
|
|
108
|
-
padding-right: calc(var(--
|
|
79
|
+
padding: var(--nuraly-select-medium-padding, var(--nuraly-select-local-medium-padding));
|
|
80
|
+
padding-right: calc(var(--nuraly-select-icon-size, 16px) + 20px);
|
|
109
81
|
}
|
|
110
82
|
|
|
111
83
|
:host([size='large']) .wrapper {
|
|
112
|
-
min-height: var(--
|
|
113
|
-
font-size: var(--
|
|
84
|
+
min-height: var(--nuraly-select-large-height, 48px);
|
|
85
|
+
font-size: var(--nuraly-select-large-font-size, 16px);
|
|
114
86
|
}
|
|
115
87
|
|
|
116
88
|
:host([size='large']) .select-trigger {
|
|
117
|
-
padding: var(--
|
|
118
|
-
padding-right: calc(var(--
|
|
89
|
+
padding: var(--nuraly-select-large-padding, 12px 16px);
|
|
90
|
+
padding-right: calc(var(--nuraly-select-icon-size, 16px) + 20px);
|
|
119
91
|
}
|
|
120
92
|
|
|
121
93
|
/* Status variants */
|
|
122
94
|
:host([status='error']) .wrapper {
|
|
123
|
-
border-color: var(--
|
|
95
|
+
border-color: var(--nuraly-select-error-border-color, #ef4444);
|
|
124
96
|
}
|
|
125
97
|
|
|
126
98
|
:host([status='warning']) .wrapper {
|
|
127
|
-
border-color: var(--
|
|
99
|
+
border-color: var(--nuraly-select-warning-border-color, #f59e0b);
|
|
128
100
|
}
|
|
129
101
|
|
|
130
102
|
:host([status='success']) .wrapper {
|
|
131
|
-
border-color: var(--
|
|
103
|
+
border-color: var(--nuraly-select-success-border-color, #10b981);
|
|
132
104
|
}
|
|
133
105
|
|
|
134
106
|
/* Type variants */
|
|
@@ -150,29 +122,29 @@ export const styles = css `
|
|
|
150
122
|
/* Main wrapper container */
|
|
151
123
|
.wrapper {
|
|
152
124
|
position: relative;
|
|
153
|
-
width: var(--
|
|
154
|
-
background-color: var(--
|
|
155
|
-
border: var(--
|
|
156
|
-
var(--
|
|
157
|
-
border-radius: var(--
|
|
158
|
-
transition: all var(--
|
|
159
|
-
var(--
|
|
125
|
+
width: var(--nuraly-select-width, var(--nuraly-select-local-width));
|
|
126
|
+
background-color: var(--nuraly-select-background-color, #ffffff);
|
|
127
|
+
border: var(--nuraly-select-border-width, var(--nuraly-select-local-border-width)) solid
|
|
128
|
+
var(--nuraly-select-border-color, #d9d9d9);
|
|
129
|
+
border-radius: var(--nuraly-select-border-radius, var(--nuraly-select-local-border-radius));
|
|
130
|
+
transition: all var(--nuraly-select-transition-duration, 0.2s)
|
|
131
|
+
var(--nuraly-select-transition-timing, ease-in-out);
|
|
160
132
|
cursor: pointer;
|
|
161
133
|
outline: none;
|
|
162
|
-
margin: var(--
|
|
163
|
-
min-height: var(--
|
|
134
|
+
margin: var(--nuraly-select-wrapper-margin, 0);
|
|
135
|
+
min-height: var(--nuraly-select-min-height, var(--nuraly-select-local-min-height));
|
|
164
136
|
/* Ensure dropdown can overflow the wrapper */
|
|
165
137
|
overflow: visible;
|
|
166
138
|
}
|
|
167
139
|
|
|
168
140
|
.wrapper:hover:not(:disabled) {
|
|
169
|
-
border-color: var(--
|
|
141
|
+
border-color: var(--nuraly-select-border-hover, #7c3aed);
|
|
170
142
|
}
|
|
171
143
|
|
|
172
144
|
.wrapper:focus,
|
|
173
145
|
.wrapper:focus-within {
|
|
174
|
-
border-color: var(--
|
|
175
|
-
box-shadow: 0 0 0 2px var(--
|
|
146
|
+
border-color: var(--nuraly-select-border-focus, #7c3aed);
|
|
147
|
+
box-shadow: 0 0 0 2px var(--nuraly-select-focus-outline, rgba(124, 58, 237, 0.2));
|
|
176
148
|
}
|
|
177
149
|
|
|
178
150
|
/* Select container */
|
|
@@ -185,23 +157,23 @@ export const styles = css `
|
|
|
185
157
|
.select-trigger {
|
|
186
158
|
display: flex;
|
|
187
159
|
align-items: center;
|
|
188
|
-
padding: var(--
|
|
189
|
-
calc(var(--
|
|
190
|
-
var(--
|
|
191
|
-
var(--
|
|
192
|
-
color: var(--
|
|
160
|
+
padding: var(--nuraly-select-padding-top, var(--nuraly-select-local-padding-top))
|
|
161
|
+
calc(var(--nuraly-select-icon-size, 16px) + 20px)
|
|
162
|
+
var(--nuraly-select-padding-bottom, var(--nuraly-select-local-padding-bottom))
|
|
163
|
+
var(--nuraly-select-padding-left, var(--nuraly-select-local-padding-left));
|
|
164
|
+
color: var(--nuraly-select-text-color, #262626);
|
|
193
165
|
font-size: inherit;
|
|
194
166
|
line-height: inherit;
|
|
195
167
|
word-break: break-word;
|
|
196
168
|
min-height: inherit;
|
|
197
169
|
flex-wrap: wrap;
|
|
198
|
-
gap: var(--
|
|
170
|
+
gap: var(--nuraly-select-tag-margin, var(--nuraly-select-local-tag-margin));
|
|
199
171
|
}
|
|
200
172
|
|
|
201
173
|
.select-trigger:empty:before {
|
|
202
174
|
content: attr(data-placeholder);
|
|
203
|
-
color: var(--
|
|
204
|
-
font-size: var(--
|
|
175
|
+
color: var(--nuraly-select-placeholder-color, #8c8c8c);
|
|
176
|
+
font-size: var(--nuraly-select-placeholder-font-size, var(--nuraly-select-local-placeholder-font-size));
|
|
205
177
|
}
|
|
206
178
|
|
|
207
179
|
/* Multi-select tags */
|
|
@@ -209,11 +181,11 @@ export const styles = css `
|
|
|
209
181
|
display: inline-flex;
|
|
210
182
|
align-items: center;
|
|
211
183
|
gap: 4px;
|
|
212
|
-
background-color: var(--
|
|
213
|
-
color: var(--
|
|
214
|
-
padding: var(--
|
|
215
|
-
border-radius: var(--
|
|
216
|
-
font-size: calc(var(--
|
|
184
|
+
background-color: var(--nuraly-select-tag-background, var(--nuraly-select-local-tag-background));
|
|
185
|
+
color: var(--nuraly-select-tag-color, var(--nuraly-select-local-tag-color));
|
|
186
|
+
padding: var(--nuraly-select-tag-padding, var(--nuraly-select-local-tag-padding));
|
|
187
|
+
border-radius: var(--nuraly-select-tag-border-radius, var(--nuraly-select-local-tag-border-radius));
|
|
188
|
+
font-size: calc(var(--nuraly-select-font-size, var(--nuraly-select-local-font-size)) - 1px);
|
|
217
189
|
max-width: 100%;
|
|
218
190
|
}
|
|
219
191
|
|
|
@@ -224,19 +196,19 @@ export const styles = css `
|
|
|
224
196
|
}
|
|
225
197
|
|
|
226
198
|
.tag-close {
|
|
227
|
-
color: var(--
|
|
199
|
+
color: var(--nuraly-select-tag-close-color, var(--nuraly-select-local-tag-close-color));
|
|
228
200
|
cursor: pointer;
|
|
229
201
|
display: flex;
|
|
230
202
|
align-items: center;
|
|
231
203
|
justify-content: center;
|
|
232
|
-
width: var(--
|
|
233
|
-
height: var(--
|
|
204
|
+
width: var(--nuraly-select-icon-size, var(--nuraly-select-local-icon-size));
|
|
205
|
+
height: var(--nuraly-select-icon-size, var(--nuraly-select-local-icon-size));
|
|
234
206
|
border-radius: 50%;
|
|
235
|
-
transition: color var(--
|
|
207
|
+
transition: color var(--nuraly-select-transition-duration, var(--nuraly-select-local-transition-duration));
|
|
236
208
|
}
|
|
237
209
|
|
|
238
210
|
.tag-close:hover {
|
|
239
|
-
color: var(--
|
|
211
|
+
color: var(--nuraly-select-tag-close-hover-color, var(--nuraly-select-local-tag-close-hover-color));
|
|
240
212
|
}
|
|
241
213
|
|
|
242
214
|
/* Icons container */
|
|
@@ -251,21 +223,21 @@ export const styles = css `
|
|
|
251
223
|
pointer-events: none;
|
|
252
224
|
}
|
|
253
225
|
|
|
254
|
-
.icons-container
|
|
255
|
-
--
|
|
256
|
-
--
|
|
226
|
+
.icons-container nr-icon {
|
|
227
|
+
--nuraly-icon-width: var(--nuraly-select-icon-size, var(--nuraly-select-local-icon-size));
|
|
228
|
+
--nuraly-icon-color: var(--nuraly-select-icon-color, var(--nuraly-select-local-icon-color));
|
|
257
229
|
pointer-events: auto;
|
|
258
230
|
cursor: pointer;
|
|
259
|
-
transition: color var(--
|
|
231
|
+
transition: color var(--nuraly-select-transition-duration, var(--nuraly-select-local-transition-duration));
|
|
260
232
|
}
|
|
261
233
|
|
|
262
|
-
.icons-container
|
|
263
|
-
--
|
|
234
|
+
.icons-container nr-icon:hover {
|
|
235
|
+
--nuraly-icon-color: var(--nuraly-select-icon-hover-color, var(--nuraly-select-local-icon-hover-color));
|
|
264
236
|
}
|
|
265
237
|
|
|
266
238
|
.arrow-icon {
|
|
267
|
-
--
|
|
268
|
-
transition: transform var(--
|
|
239
|
+
--nuraly-icon-width: var(--nuraly-select-arrow-icon-size, var(--nuraly-select-local-arrow-icon-size));
|
|
240
|
+
transition: transform var(--nuraly-select-transition-duration, var(--nuraly-select-local-transition-duration));
|
|
269
241
|
pointer-events: none !important;
|
|
270
242
|
}
|
|
271
243
|
|
|
@@ -281,18 +253,18 @@ export const styles = css `
|
|
|
281
253
|
margin-top: 1px;
|
|
282
254
|
left: 0;
|
|
283
255
|
right: 0;
|
|
284
|
-
background-color: var(--
|
|
285
|
-
border: var(--
|
|
286
|
-
var(--
|
|
287
|
-
border-radius: var(--
|
|
288
|
-
box-shadow: var(--
|
|
289
|
-
z-index: var(--
|
|
290
|
-
max-height: var(--
|
|
256
|
+
background-color: var(--nuraly-select-dropdown-background, #ffffff);
|
|
257
|
+
border: var(--nuraly-select-dropdown-border-width, var(--nuraly-select-border-width, 1px)) solid
|
|
258
|
+
var(--nuraly-select-dropdown-border-color, #d9d9d9);
|
|
259
|
+
border-radius: var(--nuraly-select-dropdown-border-radius, var(--nuraly-select-border-radius, 6px));
|
|
260
|
+
box-shadow: var(--nuraly-select-dropdown-shadow, 0 6px 16px 0 rgba(0, 0, 0, 0.08));
|
|
261
|
+
z-index: var(--nuraly-select-dropdown-z-index, 9999);
|
|
262
|
+
max-height: var(--nuraly-select-dropdown-max-height, 200px);
|
|
291
263
|
overflow-y: auto;
|
|
292
264
|
overflow-x: hidden;
|
|
293
265
|
display: none;
|
|
294
266
|
flex-direction: column;
|
|
295
|
-
animation: dropdown-enter var(--
|
|
267
|
+
animation: dropdown-enter var(--nuraly-select-dropdown-animation-duration, 0.15s) ease-out;
|
|
296
268
|
/* Ensure proper containment and exact wrapper width */
|
|
297
269
|
box-sizing: border-box;
|
|
298
270
|
width: 100%;
|
|
@@ -310,7 +282,7 @@ export const styles = css `
|
|
|
310
282
|
bottom: 100%;
|
|
311
283
|
margin-bottom: 1px;
|
|
312
284
|
margin-top: 0;
|
|
313
|
-
animation: dropdown-enter-top var(--
|
|
285
|
+
animation: dropdown-enter-top var(--nuraly-select-dropdown-animation-duration, var(--nuraly-select-local-dropdown-animation-duration)) ease-out;
|
|
314
286
|
}
|
|
315
287
|
|
|
316
288
|
@keyframes dropdown-enter {
|
|
@@ -340,9 +312,9 @@ export const styles = css `
|
|
|
340
312
|
position: sticky;
|
|
341
313
|
top: 0;
|
|
342
314
|
z-index: 10;
|
|
343
|
-
background-color: var(--
|
|
344
|
-
border-bottom: var(--
|
|
345
|
-
var(--
|
|
315
|
+
background-color: var(--nuraly-select-dropdown-background, #ffffff);
|
|
316
|
+
border-bottom: var(--nuraly-select-border-width, 1px) solid
|
|
317
|
+
var(--nuraly-select-dropdown-border-color, #d9d9d9);
|
|
346
318
|
padding: 8px;
|
|
347
319
|
margin: 0;
|
|
348
320
|
/* Ensure it stays above options during scroll */
|
|
@@ -356,33 +328,16 @@ export const styles = css `
|
|
|
356
328
|
/* Search input styling */
|
|
357
329
|
.search-container .search-input {
|
|
358
330
|
width: 100%;
|
|
359
|
-
--
|
|
360
|
-
--
|
|
361
|
-
--
|
|
362
|
-
--
|
|
363
|
-
--
|
|
331
|
+
--nuraly-input-border-radius: var(--nuraly-select-border-radius, var(--nuraly-select-local-border-radius));
|
|
332
|
+
--nuraly-input-background-color: var(--nuraly-select-background-color, var(--nuraly-select-local-background-color));
|
|
333
|
+
--nuraly-input-border-color: var(--nuraly-select-border-color, var(--nuraly-select-local-border-color));
|
|
334
|
+
--nuraly-input-text-color: var(--nuraly-select-text-color, var(--nuraly-select-local-text-color));
|
|
335
|
+
--nuraly-input-placeholder-color: var(--nuraly-select-placeholder-color, var(--nuraly-select-local-placeholder-color));
|
|
364
336
|
}
|
|
365
337
|
|
|
366
338
|
/* Search icon in the search input */
|
|
367
339
|
.search-container .search-icon {
|
|
368
|
-
--
|
|
369
|
-
}
|
|
370
|
-
|
|
371
|
-
/* Dark theme overrides for search container */
|
|
372
|
-
.wrapper[data-theme="dark"] .search-container {
|
|
373
|
-
background-color: var(--hybrid-select-local-dropdown-background);
|
|
374
|
-
border-bottom-color: var(--hybrid-select-local-dropdown-border-color);
|
|
375
|
-
}
|
|
376
|
-
|
|
377
|
-
.wrapper[data-theme="dark"] .search-container .search-input {
|
|
378
|
-
--hybrid-input-background-color: var(--hybrid-select-local-background-color);
|
|
379
|
-
--hybrid-input-border-color: var(--hybrid-select-local-border-color);
|
|
380
|
-
--hybrid-input-text-color: var(--hybrid-select-local-text-color);
|
|
381
|
-
--hybrid-input-placeholder-color: var(--hybrid-select-local-placeholder-color);
|
|
382
|
-
}
|
|
383
|
-
|
|
384
|
-
.wrapper[data-theme="dark"] .search-container .search-icon {
|
|
385
|
-
--hybrid-icon-color: var(--hybrid-select-local-icon-color);
|
|
340
|
+
--nuraly-icon-color: var(--nuraly-select-icon-color, var(--nuraly-select-local-icon-color));
|
|
386
341
|
}
|
|
387
342
|
|
|
388
343
|
/* Options list container - ensure proper scroll behavior with sticky search */
|
|
@@ -396,11 +351,12 @@ export const styles = css `
|
|
|
396
351
|
display: flex;
|
|
397
352
|
align-items: center;
|
|
398
353
|
gap: 8px;
|
|
399
|
-
padding: 8px 12px;
|
|
400
|
-
|
|
401
|
-
|
|
354
|
+
padding: var(--nuraly-select-option-padding, 8px 12px);
|
|
355
|
+
min-height: var(--nuraly-select-option-min-height, auto);
|
|
356
|
+
color: var(--nuraly-select-option-text-color, var(--nuraly-select-text-color, #262626));
|
|
357
|
+
font-size: var(--nuraly-select-option-font-size, 14px);
|
|
402
358
|
cursor: pointer;
|
|
403
|
-
transition: background-color var(--
|
|
359
|
+
transition: background-color var(--nuraly-select-transition-duration, 0.2s);
|
|
404
360
|
position: relative;
|
|
405
361
|
}
|
|
406
362
|
|
|
@@ -410,22 +366,22 @@ export const styles = css `
|
|
|
410
366
|
}
|
|
411
367
|
|
|
412
368
|
.option:hover {
|
|
413
|
-
background-color: var(--
|
|
369
|
+
background-color: var(--nuraly-select-option-hover-background, #f5f5f5);
|
|
414
370
|
}
|
|
415
371
|
|
|
416
372
|
.option.selected {
|
|
417
|
-
background-color: var(--
|
|
418
|
-
color: var(--
|
|
373
|
+
background-color: var(--nuraly-select-option-selected-background, #e0e0e0);
|
|
374
|
+
color: var(--nuraly-select-option-selected-color, #7c3aed);
|
|
419
375
|
}
|
|
420
376
|
|
|
421
377
|
.option.focused {
|
|
422
|
-
background-color: var(--
|
|
423
|
-
outline: 2px solid var(--
|
|
378
|
+
background-color: var(--nuraly-select-option-hover-background, #f5f5f5);
|
|
379
|
+
outline: 2px solid var(--nuraly-select-border-focus, #7c3aed);
|
|
424
380
|
outline-offset: -2px;
|
|
425
381
|
}
|
|
426
382
|
|
|
427
383
|
.option.disabled {
|
|
428
|
-
opacity: var(--
|
|
384
|
+
opacity: var(--nuraly-select-disabled-opacity, var(--nuraly-select-local-disabled-opacity));
|
|
429
385
|
cursor: not-allowed;
|
|
430
386
|
}
|
|
431
387
|
|
|
@@ -437,8 +393,8 @@ export const styles = css `
|
|
|
437
393
|
}
|
|
438
394
|
|
|
439
395
|
.option-icon {
|
|
440
|
-
--
|
|
441
|
-
--
|
|
396
|
+
--nuraly-icon-width: var(--nuraly-select-icon-size, var(--nuraly-select-local-icon-size));
|
|
397
|
+
--nuraly-icon-color: currentColor;
|
|
442
398
|
}
|
|
443
399
|
|
|
444
400
|
.option-text {
|
|
@@ -449,24 +405,23 @@ export const styles = css `
|
|
|
449
405
|
}
|
|
450
406
|
|
|
451
407
|
.option-description {
|
|
452
|
-
font-size: calc(var(--
|
|
408
|
+
font-size: calc(var(--nuraly-select-option-font-size, var(--nuraly-select-local-option-font-size)) - 1px);
|
|
453
409
|
opacity: 0.7;
|
|
454
410
|
margin-top: 2px;
|
|
455
411
|
}
|
|
456
412
|
|
|
457
413
|
.check-icon {
|
|
458
|
-
--
|
|
459
|
-
--
|
|
414
|
+
--nuraly-icon-width: var(--nuraly-select-icon-size, var(--nuraly-select-local-icon-size));
|
|
415
|
+
--nuraly-icon-color: var(--nuraly-select-option-selected-color, var(--nuraly-select-local-option-selected-color));
|
|
460
416
|
}
|
|
461
417
|
|
|
462
|
-
/* No options message - styled like Ant Design */
|
|
463
418
|
.no-options {
|
|
464
419
|
display: flex;
|
|
465
420
|
align-items: center;
|
|
466
421
|
justify-content: center;
|
|
467
422
|
padding: var(--select-no-options-padding, 24px 16px);
|
|
468
423
|
color: var(--select-no-options-color, #8c8c8c);
|
|
469
|
-
font-size: var(--
|
|
424
|
+
font-size: var(--nuraly-select-option-font-size, var(--nuraly-select-local-option-font-size));
|
|
470
425
|
cursor: default;
|
|
471
426
|
user-select: none;
|
|
472
427
|
}
|
|
@@ -480,44 +435,31 @@ export const styles = css `
|
|
|
480
435
|
}
|
|
481
436
|
|
|
482
437
|
.no-options-icon {
|
|
483
|
-
--
|
|
484
|
-
--
|
|
438
|
+
--nuraly-icon-width: 24px;
|
|
439
|
+
--nuraly-icon-color: var(--select-no-options-icon-color, #d9d9d9);
|
|
485
440
|
opacity: 0.8;
|
|
486
441
|
}
|
|
487
442
|
|
|
488
443
|
.no-options-text {
|
|
489
|
-
font-size: var(--
|
|
444
|
+
font-size: var(--nuraly-select-option-font-size, var(--nuraly-select-local-option-font-size));
|
|
490
445
|
color: var(--select-no-options-color, #8c8c8c);
|
|
491
446
|
line-height: 1.4;
|
|
492
447
|
}
|
|
493
448
|
|
|
494
|
-
/* Dark theme adjustments for no-options */
|
|
495
|
-
:host([theme='dark']) .no-options {
|
|
496
|
-
color: var(--select-no-options-color, #595959);
|
|
497
|
-
}
|
|
498
|
-
|
|
499
|
-
:host([theme='dark']) .no-options-icon {
|
|
500
|
-
--hybrid-icon-color: var(--select-no-options-icon-color, #434343);
|
|
501
|
-
}
|
|
502
|
-
|
|
503
|
-
:host([theme='dark']) .no-options-text {
|
|
504
|
-
color: var(--select-no-options-color, #595959);
|
|
505
|
-
}
|
|
506
|
-
|
|
507
449
|
/* Validation message */
|
|
508
450
|
.validation-message {
|
|
509
451
|
display: block;
|
|
510
|
-
margin-top: var(--
|
|
511
|
-
font-size: var(--
|
|
512
|
-
color: var(--
|
|
452
|
+
margin-top: var(--nuraly-select-message-margin-top, var(--nuraly-select-local-message-margin-top));
|
|
453
|
+
font-size: var(--nuraly-select-message-font-size, var(--nuraly-select-local-message-font-size));
|
|
454
|
+
color: var(--nuraly-select-error-message-color, var(--nuraly-select-local-error-message-color));
|
|
513
455
|
}
|
|
514
456
|
|
|
515
457
|
.validation-message.warning {
|
|
516
|
-
color: var(--
|
|
458
|
+
color: var(--nuraly-select-warning-message-color, var(--nuraly-select-local-warning-message-color));
|
|
517
459
|
}
|
|
518
460
|
|
|
519
461
|
.validation-message.success {
|
|
520
|
-
color: var(--
|
|
462
|
+
color: var(--nuraly-select-success-message-color, var(--nuraly-select-local-success-message-color));
|
|
521
463
|
}
|
|
522
464
|
|
|
523
465
|
/* Slotted content styles */
|
|
@@ -525,14 +467,14 @@ export const styles = css `
|
|
|
525
467
|
display: block;
|
|
526
468
|
margin-bottom: 4px;
|
|
527
469
|
font-weight: 500;
|
|
528
|
-
color: var(--
|
|
470
|
+
color: var(--nuraly-select-text-color, var(--nuraly-select-local-text-color));
|
|
529
471
|
}
|
|
530
472
|
|
|
531
473
|
::slotted([slot='helper-text']) {
|
|
532
474
|
display: block;
|
|
533
|
-
margin-top: var(--
|
|
534
|
-
font-size: var(--
|
|
535
|
-
color: var(--
|
|
475
|
+
margin-top: var(--nuraly-select-message-margin-top, var(--nuraly-select-local-message-margin-top));
|
|
476
|
+
font-size: var(--nuraly-select-message-font-size, var(--nuraly-select-local-message-font-size));
|
|
477
|
+
color: var(--nuraly-select-placeholder-color, var(--nuraly-select-local-placeholder-color));
|
|
536
478
|
}
|
|
537
479
|
|
|
538
480
|
/* Accessibility improvements */
|