@nuralyui/select 0.1.2 → 0.1.4
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 +206 -327
- package/package.json +1 -1
- package/react.js +1 -1
- package/react.js.map +1 -1
- package/select.component.d.ts +31 -11
- package/select.component.js +81 -35
- package/select.component.js.map +1 -1
- package/select.style.js +166 -204
- 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,107 @@
|
|
|
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-min-height: 40px;
|
|
6
|
+
--nuraly-select-local-padding-top: 8px;
|
|
7
|
+
--nuraly-select-local-padding-bottom: 8px;
|
|
8
|
+
--nuraly-select-local-padding-left: 12px;
|
|
9
|
+
--nuraly-select-local-padding-right: 12px;
|
|
10
|
+
--nuraly-select-local-wrapper-margin: 0;
|
|
11
|
+
--nuraly-select-local-border-radius: 6px;
|
|
12
|
+
--nuraly-select-local-border-width: 1px;
|
|
13
|
+
|
|
14
|
+
/* Dropdown settings */
|
|
15
|
+
--nuraly-select-local-dropdown-z-index: 9999;
|
|
16
|
+
--nuraly-select-local-dropdown-max-height: 200px;
|
|
17
|
+
--nuraly-select-local-dropdown-width: max-content; /* Default to auto-size to content */
|
|
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
|
-
|
|
93
|
-
|
|
64
|
+
height: var(--nuraly-select-small-height, 24px);
|
|
65
|
+
min-height: var(--nuraly-select-small-height, 24px);
|
|
66
|
+
font-size: var(--nuraly-select-small-font-size, var(--nuraly-select-local-small-font-size));
|
|
94
67
|
}
|
|
95
68
|
|
|
96
69
|
:host([size='small']) .select-trigger {
|
|
97
|
-
padding: var(--
|
|
98
|
-
padding-right: calc(var(--
|
|
70
|
+
padding: var(--nuraly-select-small-padding, 2px 8px);
|
|
71
|
+
padding-right: calc(var(--nuraly-select-icon-size, 16px) + 20px);
|
|
99
72
|
}
|
|
100
73
|
|
|
101
74
|
:host([size='medium']) .wrapper {
|
|
102
|
-
min-height: var(--
|
|
103
|
-
font-size: var(--
|
|
75
|
+
min-height: var(--nuraly-select-medium-height, var(--nuraly-select-local-medium-height));
|
|
76
|
+
font-size: var(--nuraly-select-medium-font-size, var(--nuraly-select-local-medium-font-size));
|
|
104
77
|
}
|
|
105
78
|
|
|
106
79
|
:host([size='medium']) .select-trigger {
|
|
107
|
-
padding: var(--
|
|
108
|
-
padding-right: calc(var(--
|
|
80
|
+
padding: var(--nuraly-select-medium-padding, var(--nuraly-select-local-medium-padding));
|
|
81
|
+
padding-right: calc(var(--nuraly-select-icon-size, 16px) + 20px);
|
|
109
82
|
}
|
|
110
83
|
|
|
111
84
|
:host([size='large']) .wrapper {
|
|
112
|
-
min-height: var(--
|
|
113
|
-
font-size: var(--
|
|
85
|
+
min-height: var(--nuraly-select-large-height, 48px);
|
|
86
|
+
font-size: var(--nuraly-select-large-font-size, 16px);
|
|
114
87
|
}
|
|
115
88
|
|
|
116
89
|
:host([size='large']) .select-trigger {
|
|
117
|
-
padding: var(--
|
|
118
|
-
padding-right: calc(var(--
|
|
90
|
+
padding: var(--nuraly-select-large-padding, 12px 16px);
|
|
91
|
+
padding-right: calc(var(--nuraly-select-icon-size, 16px) + 20px);
|
|
119
92
|
}
|
|
120
93
|
|
|
121
94
|
/* Status variants */
|
|
122
95
|
:host([status='error']) .wrapper {
|
|
123
|
-
border-color: var(--
|
|
96
|
+
border-color: var(--nuraly-select-error-border-color, #ef4444);
|
|
124
97
|
}
|
|
125
98
|
|
|
126
99
|
:host([status='warning']) .wrapper {
|
|
127
|
-
border-color: var(--
|
|
100
|
+
border-color: var(--nuraly-select-warning-border-color, #f59e0b);
|
|
128
101
|
}
|
|
129
102
|
|
|
130
103
|
:host([status='success']) .wrapper {
|
|
131
|
-
border-color: var(--
|
|
104
|
+
border-color: var(--nuraly-select-success-border-color, #10b981);
|
|
132
105
|
}
|
|
133
106
|
|
|
134
107
|
/* Type variants */
|
|
@@ -142,6 +115,15 @@ export const styles = css `
|
|
|
142
115
|
flex: 1;
|
|
143
116
|
}
|
|
144
117
|
|
|
118
|
+
/* Block (full width) */
|
|
119
|
+
:host([block]) {
|
|
120
|
+
width: 100%;
|
|
121
|
+
}
|
|
122
|
+
|
|
123
|
+
:host([block]) .wrapper {
|
|
124
|
+
width: 100%;
|
|
125
|
+
}
|
|
126
|
+
|
|
145
127
|
/* Show dropdown */
|
|
146
128
|
:host([show]) .options {
|
|
147
129
|
display: flex !important;
|
|
@@ -150,29 +132,32 @@ export const styles = css `
|
|
|
150
132
|
/* Main wrapper container */
|
|
151
133
|
.wrapper {
|
|
152
134
|
position: relative;
|
|
153
|
-
width: var(--
|
|
154
|
-
background-color: var(--
|
|
155
|
-
border: var(--
|
|
156
|
-
var(--
|
|
157
|
-
border-radius: var(--
|
|
158
|
-
transition: all var(--
|
|
159
|
-
var(--
|
|
135
|
+
width: var(--nuraly-select-width, fit-content);
|
|
136
|
+
background-color: var(--nuraly-select-background-color, #ffffff);
|
|
137
|
+
border: var(--nuraly-select-border-width, var(--nuraly-select-local-border-width)) solid
|
|
138
|
+
var(--nuraly-select-border-color, #d9d9d9);
|
|
139
|
+
border-radius: var(--nuraly-select-border-radius, var(--nuraly-select-local-border-radius));
|
|
140
|
+
transition: all var(--nuraly-select-transition-duration, 0.2s)
|
|
141
|
+
var(--nuraly-select-transition-timing, ease-in-out);
|
|
160
142
|
cursor: pointer;
|
|
161
143
|
outline: none;
|
|
162
|
-
margin: var(--
|
|
163
|
-
min-height: var(--
|
|
144
|
+
margin: var(--nuraly-select-wrapper-margin, 0);
|
|
145
|
+
min-height: var(--nuraly-select-min-height, var(--nuraly-select-local-min-height));
|
|
146
|
+
box-sizing: border-box;
|
|
147
|
+
display: flex;
|
|
148
|
+
align-items: center;
|
|
164
149
|
/* Ensure dropdown can overflow the wrapper */
|
|
165
150
|
overflow: visible;
|
|
166
151
|
}
|
|
167
152
|
|
|
168
153
|
.wrapper:hover:not(:disabled) {
|
|
169
|
-
border-color: var(--
|
|
154
|
+
border-color: var(--nuraly-select-border-hover, #7c3aed);
|
|
170
155
|
}
|
|
171
156
|
|
|
172
157
|
.wrapper:focus,
|
|
173
158
|
.wrapper:focus-within {
|
|
174
|
-
border-color: var(--
|
|
175
|
-
box-shadow: 0 0 0 2px var(--
|
|
159
|
+
border-color: var(--nuraly-select-border-focus, #7c3aed);
|
|
160
|
+
box-shadow: 0 0 0 2px var(--nuraly-select-focus-outline, rgba(124, 58, 237, 0.2));
|
|
176
161
|
}
|
|
177
162
|
|
|
178
163
|
/* Select container */
|
|
@@ -185,23 +170,25 @@ export const styles = css `
|
|
|
185
170
|
.select-trigger {
|
|
186
171
|
display: flex;
|
|
187
172
|
align-items: center;
|
|
188
|
-
padding: var(--
|
|
189
|
-
calc(var(--
|
|
190
|
-
var(--
|
|
191
|
-
var(--
|
|
192
|
-
color: var(--
|
|
173
|
+
padding: var(--nuraly-select-padding-top, var(--nuraly-select-local-padding-top))
|
|
174
|
+
calc(var(--nuraly-select-icon-size, 16px) + 20px)
|
|
175
|
+
var(--nuraly-select-padding-bottom, var(--nuraly-select-local-padding-bottom))
|
|
176
|
+
var(--nuraly-select-padding-left, var(--nuraly-select-local-padding-left));
|
|
177
|
+
color: var(--nuraly-select-text-color, #262626);
|
|
193
178
|
font-size: inherit;
|
|
194
179
|
line-height: inherit;
|
|
195
180
|
word-break: break-word;
|
|
196
|
-
|
|
181
|
+
flex: 1;
|
|
182
|
+
min-height: 0;
|
|
197
183
|
flex-wrap: wrap;
|
|
198
|
-
gap: var(--
|
|
184
|
+
gap: var(--nuraly-select-tag-margin, var(--nuraly-select-local-tag-margin));
|
|
185
|
+
box-sizing: border-box;
|
|
199
186
|
}
|
|
200
187
|
|
|
201
188
|
.select-trigger:empty:before {
|
|
202
189
|
content: attr(data-placeholder);
|
|
203
|
-
color: var(--
|
|
204
|
-
font-size: var(--
|
|
190
|
+
color: var(--nuraly-select-placeholder-color, #8c8c8c);
|
|
191
|
+
font-size: var(--nuraly-select-placeholder-font-size, var(--nuraly-select-local-placeholder-font-size));
|
|
205
192
|
}
|
|
206
193
|
|
|
207
194
|
/* Multi-select tags */
|
|
@@ -209,11 +196,11 @@ export const styles = css `
|
|
|
209
196
|
display: inline-flex;
|
|
210
197
|
align-items: center;
|
|
211
198
|
gap: 4px;
|
|
212
|
-
background-color: var(--
|
|
213
|
-
color: var(--
|
|
214
|
-
padding: var(--
|
|
215
|
-
border-radius: var(--
|
|
216
|
-
font-size: calc(var(--
|
|
199
|
+
background-color: var(--nuraly-select-tag-background, var(--nuraly-select-local-tag-background));
|
|
200
|
+
color: var(--nuraly-select-tag-color, var(--nuraly-select-local-tag-color));
|
|
201
|
+
padding: var(--nuraly-select-tag-padding, var(--nuraly-select-local-tag-padding));
|
|
202
|
+
border-radius: var(--nuraly-select-tag-border-radius, var(--nuraly-select-local-tag-border-radius));
|
|
203
|
+
font-size: calc(var(--nuraly-select-font-size, var(--nuraly-select-local-font-size)) - 1px);
|
|
217
204
|
max-width: 100%;
|
|
218
205
|
}
|
|
219
206
|
|
|
@@ -224,19 +211,19 @@ export const styles = css `
|
|
|
224
211
|
}
|
|
225
212
|
|
|
226
213
|
.tag-close {
|
|
227
|
-
color: var(--
|
|
214
|
+
color: var(--nuraly-select-tag-close-color, var(--nuraly-select-local-tag-close-color));
|
|
228
215
|
cursor: pointer;
|
|
229
216
|
display: flex;
|
|
230
217
|
align-items: center;
|
|
231
218
|
justify-content: center;
|
|
232
|
-
width: var(--
|
|
233
|
-
height: var(--
|
|
219
|
+
width: var(--nuraly-select-icon-size, var(--nuraly-select-local-icon-size));
|
|
220
|
+
height: var(--nuraly-select-icon-size, var(--nuraly-select-local-icon-size));
|
|
234
221
|
border-radius: 50%;
|
|
235
|
-
transition: color var(--
|
|
222
|
+
transition: color var(--nuraly-select-transition-duration, var(--nuraly-select-local-transition-duration));
|
|
236
223
|
}
|
|
237
224
|
|
|
238
225
|
.tag-close:hover {
|
|
239
|
-
color: var(--
|
|
226
|
+
color: var(--nuraly-select-tag-close-hover-color, var(--nuraly-select-local-tag-close-hover-color));
|
|
240
227
|
}
|
|
241
228
|
|
|
242
229
|
/* Icons container */
|
|
@@ -251,21 +238,21 @@ export const styles = css `
|
|
|
251
238
|
pointer-events: none;
|
|
252
239
|
}
|
|
253
240
|
|
|
254
|
-
.icons-container
|
|
255
|
-
--
|
|
256
|
-
--
|
|
241
|
+
.icons-container nr-icon {
|
|
242
|
+
--nuraly-icon-width: var(--nuraly-select-icon-size, var(--nuraly-select-local-icon-size));
|
|
243
|
+
--nuraly-icon-color: var(--nuraly-select-icon-color, var(--nuraly-select-local-icon-color));
|
|
257
244
|
pointer-events: auto;
|
|
258
245
|
cursor: pointer;
|
|
259
|
-
transition: color var(--
|
|
246
|
+
transition: color var(--nuraly-select-transition-duration, var(--nuraly-select-local-transition-duration));
|
|
260
247
|
}
|
|
261
248
|
|
|
262
|
-
.icons-container
|
|
263
|
-
--
|
|
249
|
+
.icons-container nr-icon:hover {
|
|
250
|
+
--nuraly-icon-color: var(--nuraly-select-icon-hover-color, var(--nuraly-select-local-icon-hover-color));
|
|
264
251
|
}
|
|
265
252
|
|
|
266
253
|
.arrow-icon {
|
|
267
|
-
--
|
|
268
|
-
transition: transform var(--
|
|
254
|
+
--nuraly-icon-width: var(--nuraly-select-arrow-icon-size, var(--nuraly-select-local-arrow-icon-size));
|
|
255
|
+
transition: transform var(--nuraly-select-transition-duration, var(--nuraly-select-local-transition-duration));
|
|
269
256
|
pointer-events: none !important;
|
|
270
257
|
}
|
|
271
258
|
|
|
@@ -281,21 +268,26 @@ export const styles = css `
|
|
|
281
268
|
margin-top: 1px;
|
|
282
269
|
left: 0;
|
|
283
270
|
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(--
|
|
271
|
+
background-color: var(--nuraly-select-dropdown-background, #ffffff);
|
|
272
|
+
border: var(--nuraly-select-dropdown-border-width, var(--nuraly-select-border-width, 1px)) solid
|
|
273
|
+
var(--nuraly-select-dropdown-border-color, #d9d9d9);
|
|
274
|
+
border-radius: var(--nuraly-select-dropdown-border-radius, var(--nuraly-select-border-radius, 6px));
|
|
275
|
+
box-shadow: var(--nuraly-select-dropdown-shadow, 0 6px 16px 0 rgba(0, 0, 0, 0.08));
|
|
276
|
+
z-index: var(--nuraly-select-dropdown-z-index, 9999);
|
|
277
|
+
max-height: var(--nuraly-select-dropdown-max-height, 200px);
|
|
291
278
|
overflow-y: auto;
|
|
292
279
|
overflow-x: hidden;
|
|
293
280
|
display: none;
|
|
294
281
|
flex-direction: column;
|
|
295
|
-
animation: dropdown-enter var(--
|
|
282
|
+
animation: dropdown-enter var(--nuraly-select-dropdown-animation-duration, 0.15s) ease-out;
|
|
296
283
|
/* Ensure proper containment and exact wrapper width */
|
|
297
284
|
box-sizing: border-box;
|
|
298
|
-
width
|
|
285
|
+
/* Allow overriding width via either of these custom props */
|
|
286
|
+
width: var(
|
|
287
|
+
--nuraly-select-dropdown-width,
|
|
288
|
+
var(--select-dropdown-width, var(--nuraly-select-local-dropdown-width))
|
|
289
|
+
);
|
|
290
|
+
min-width: 100%; /* Ensure dropdown is at least as wide as the wrapper */
|
|
299
291
|
/* Create new stacking context to prevent layering issues */
|
|
300
292
|
isolation: isolate;
|
|
301
293
|
/* Ensure solid background to prevent visual bleed-through */
|
|
@@ -310,7 +302,7 @@ export const styles = css `
|
|
|
310
302
|
bottom: 100%;
|
|
311
303
|
margin-bottom: 1px;
|
|
312
304
|
margin-top: 0;
|
|
313
|
-
animation: dropdown-enter-top var(--
|
|
305
|
+
animation: dropdown-enter-top var(--nuraly-select-dropdown-animation-duration, var(--nuraly-select-local-dropdown-animation-duration)) ease-out;
|
|
314
306
|
}
|
|
315
307
|
|
|
316
308
|
@keyframes dropdown-enter {
|
|
@@ -340,9 +332,9 @@ export const styles = css `
|
|
|
340
332
|
position: sticky;
|
|
341
333
|
top: 0;
|
|
342
334
|
z-index: 10;
|
|
343
|
-
background-color: var(--
|
|
344
|
-
border-bottom: var(--
|
|
345
|
-
var(--
|
|
335
|
+
background-color: var(--nuraly-select-dropdown-background, #ffffff);
|
|
336
|
+
border-bottom: var(--nuraly-select-border-width, 1px) solid
|
|
337
|
+
var(--nuraly-select-dropdown-border-color, #d9d9d9);
|
|
346
338
|
padding: 8px;
|
|
347
339
|
margin: 0;
|
|
348
340
|
/* Ensure it stays above options during scroll */
|
|
@@ -356,33 +348,16 @@ export const styles = css `
|
|
|
356
348
|
/* Search input styling */
|
|
357
349
|
.search-container .search-input {
|
|
358
350
|
width: 100%;
|
|
359
|
-
--
|
|
360
|
-
--
|
|
361
|
-
--
|
|
362
|
-
--
|
|
363
|
-
--
|
|
351
|
+
--nuraly-input-border-radius: var(--nuraly-select-border-radius, var(--nuraly-select-local-border-radius));
|
|
352
|
+
--nuraly-input-background-color: var(--nuraly-select-background-color, var(--nuraly-select-local-background-color));
|
|
353
|
+
--nuraly-input-border-color: var(--nuraly-select-border-color, var(--nuraly-select-local-border-color));
|
|
354
|
+
--nuraly-input-text-color: var(--nuraly-select-text-color, var(--nuraly-select-local-text-color));
|
|
355
|
+
--nuraly-input-placeholder-color: var(--nuraly-select-placeholder-color, var(--nuraly-select-local-placeholder-color));
|
|
364
356
|
}
|
|
365
357
|
|
|
366
358
|
/* Search icon in the search input */
|
|
367
359
|
.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);
|
|
360
|
+
--nuraly-icon-color: var(--nuraly-select-icon-color, var(--nuraly-select-local-icon-color));
|
|
386
361
|
}
|
|
387
362
|
|
|
388
363
|
/* Options list container - ensure proper scroll behavior with sticky search */
|
|
@@ -396,11 +371,12 @@ export const styles = css `
|
|
|
396
371
|
display: flex;
|
|
397
372
|
align-items: center;
|
|
398
373
|
gap: 8px;
|
|
399
|
-
padding: 8px 12px;
|
|
400
|
-
|
|
401
|
-
|
|
374
|
+
padding: var(--nuraly-select-option-padding, 8px 12px);
|
|
375
|
+
min-height: var(--nuraly-select-option-min-height, auto);
|
|
376
|
+
color: var(--nuraly-select-option-text-color, var(--nuraly-select-text-color, #262626));
|
|
377
|
+
font-size: var(--nuraly-select-option-font-size, 14px);
|
|
402
378
|
cursor: pointer;
|
|
403
|
-
transition: background-color var(--
|
|
379
|
+
transition: background-color var(--nuraly-select-transition-duration, 0.2s);
|
|
404
380
|
position: relative;
|
|
405
381
|
}
|
|
406
382
|
|
|
@@ -410,22 +386,22 @@ export const styles = css `
|
|
|
410
386
|
}
|
|
411
387
|
|
|
412
388
|
.option:hover {
|
|
413
|
-
background-color: var(--
|
|
389
|
+
background-color: var(--nuraly-select-option-hover-background, #f5f5f5);
|
|
414
390
|
}
|
|
415
391
|
|
|
416
392
|
.option.selected {
|
|
417
|
-
background-color: var(--
|
|
418
|
-
color: var(--
|
|
393
|
+
background-color: var(--nuraly-select-option-selected-background, #e0e0e0);
|
|
394
|
+
color: var(--nuraly-select-option-selected-color, #7c3aed);
|
|
419
395
|
}
|
|
420
396
|
|
|
421
397
|
.option.focused {
|
|
422
|
-
background-color: var(--
|
|
423
|
-
outline: 2px solid var(--
|
|
398
|
+
background-color: var(--nuraly-select-option-hover-background, #f5f5f5);
|
|
399
|
+
outline: 2px solid var(--nuraly-select-border-focus, #7c3aed);
|
|
424
400
|
outline-offset: -2px;
|
|
425
401
|
}
|
|
426
402
|
|
|
427
403
|
.option.disabled {
|
|
428
|
-
opacity: var(--
|
|
404
|
+
opacity: var(--nuraly-select-disabled-opacity, var(--nuraly-select-local-disabled-opacity));
|
|
429
405
|
cursor: not-allowed;
|
|
430
406
|
}
|
|
431
407
|
|
|
@@ -437,8 +413,8 @@ export const styles = css `
|
|
|
437
413
|
}
|
|
438
414
|
|
|
439
415
|
.option-icon {
|
|
440
|
-
--
|
|
441
|
-
--
|
|
416
|
+
--nuraly-icon-width: var(--nuraly-select-icon-size, var(--nuraly-select-local-icon-size));
|
|
417
|
+
--nuraly-icon-color: currentColor;
|
|
442
418
|
}
|
|
443
419
|
|
|
444
420
|
.option-text {
|
|
@@ -449,24 +425,23 @@ export const styles = css `
|
|
|
449
425
|
}
|
|
450
426
|
|
|
451
427
|
.option-description {
|
|
452
|
-
font-size: calc(var(--
|
|
428
|
+
font-size: calc(var(--nuraly-select-option-font-size, var(--nuraly-select-local-option-font-size)) - 1px);
|
|
453
429
|
opacity: 0.7;
|
|
454
430
|
margin-top: 2px;
|
|
455
431
|
}
|
|
456
432
|
|
|
457
433
|
.check-icon {
|
|
458
|
-
--
|
|
459
|
-
--
|
|
434
|
+
--nuraly-icon-width: var(--nuraly-select-icon-size, var(--nuraly-select-local-icon-size));
|
|
435
|
+
--nuraly-icon-color: var(--nuraly-select-option-selected-color, var(--nuraly-select-local-option-selected-color));
|
|
460
436
|
}
|
|
461
437
|
|
|
462
|
-
/* No options message - styled like Ant Design */
|
|
463
438
|
.no-options {
|
|
464
439
|
display: flex;
|
|
465
440
|
align-items: center;
|
|
466
441
|
justify-content: center;
|
|
467
442
|
padding: var(--select-no-options-padding, 24px 16px);
|
|
468
443
|
color: var(--select-no-options-color, #8c8c8c);
|
|
469
|
-
font-size: var(--
|
|
444
|
+
font-size: var(--nuraly-select-option-font-size, var(--nuraly-select-local-option-font-size));
|
|
470
445
|
cursor: default;
|
|
471
446
|
user-select: none;
|
|
472
447
|
}
|
|
@@ -480,44 +455,31 @@ export const styles = css `
|
|
|
480
455
|
}
|
|
481
456
|
|
|
482
457
|
.no-options-icon {
|
|
483
|
-
--
|
|
484
|
-
--
|
|
458
|
+
--nuraly-icon-width: 24px;
|
|
459
|
+
--nuraly-icon-color: var(--select-no-options-icon-color, #d9d9d9);
|
|
485
460
|
opacity: 0.8;
|
|
486
461
|
}
|
|
487
462
|
|
|
488
463
|
.no-options-text {
|
|
489
|
-
font-size: var(--
|
|
464
|
+
font-size: var(--nuraly-select-option-font-size, var(--nuraly-select-local-option-font-size));
|
|
490
465
|
color: var(--select-no-options-color, #8c8c8c);
|
|
491
466
|
line-height: 1.4;
|
|
492
467
|
}
|
|
493
468
|
|
|
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
469
|
/* Validation message */
|
|
508
470
|
.validation-message {
|
|
509
471
|
display: block;
|
|
510
|
-
margin-top: var(--
|
|
511
|
-
font-size: var(--
|
|
512
|
-
color: var(--
|
|
472
|
+
margin-top: var(--nuraly-select-message-margin-top, var(--nuraly-select-local-message-margin-top));
|
|
473
|
+
font-size: var(--nuraly-select-message-font-size, var(--nuraly-select-local-message-font-size));
|
|
474
|
+
color: var(--nuraly-select-error-message-color, var(--nuraly-select-local-error-message-color));
|
|
513
475
|
}
|
|
514
476
|
|
|
515
477
|
.validation-message.warning {
|
|
516
|
-
color: var(--
|
|
478
|
+
color: var(--nuraly-select-warning-message-color, var(--nuraly-select-local-warning-message-color));
|
|
517
479
|
}
|
|
518
480
|
|
|
519
481
|
.validation-message.success {
|
|
520
|
-
color: var(--
|
|
482
|
+
color: var(--nuraly-select-success-message-color, var(--nuraly-select-local-success-message-color));
|
|
521
483
|
}
|
|
522
484
|
|
|
523
485
|
/* Slotted content styles */
|
|
@@ -525,14 +487,14 @@ export const styles = css `
|
|
|
525
487
|
display: block;
|
|
526
488
|
margin-bottom: 4px;
|
|
527
489
|
font-weight: 500;
|
|
528
|
-
color: var(--
|
|
490
|
+
color: var(--nuraly-select-text-color, var(--nuraly-select-local-text-color));
|
|
529
491
|
}
|
|
530
492
|
|
|
531
493
|
::slotted([slot='helper-text']) {
|
|
532
494
|
display: block;
|
|
533
|
-
margin-top: var(--
|
|
534
|
-
font-size: var(--
|
|
535
|
-
color: var(--
|
|
495
|
+
margin-top: var(--nuraly-select-message-margin-top, var(--nuraly-select-local-message-margin-top));
|
|
496
|
+
font-size: var(--nuraly-select-message-font-size, var(--nuraly-select-local-message-font-size));
|
|
497
|
+
color: var(--nuraly-select-placeholder-color, var(--nuraly-select-local-placeholder-color));
|
|
536
498
|
}
|
|
537
499
|
|
|
538
500
|
/* Accessibility improvements */
|