@nuralyui/select 0.1.7 → 0.1.8
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 +153 -84
- package/index.js.map +1 -1
- package/package.json +1 -1
- package/react.js.map +1 -1
- package/select.component.d.ts +19 -1
- package/select.component.js +49 -14
- package/select.component.js.map +1 -1
- package/select.constant.d.ts +1 -1
- package/select.constant.js +1 -1
- package/select.constant.js.map +1 -1
- package/select.style.js +148 -79
- package/select.style.js.map +1 -1
- package/select.types.js.map +1 -1
package/select.style.js
CHANGED
|
@@ -13,28 +13,51 @@ export const styles = css `
|
|
|
13
13
|
|
|
14
14
|
/* Dropdown settings */
|
|
15
15
|
--nuraly-select-local-dropdown-z-index: 9999;
|
|
16
|
-
--nuraly-select-local-dropdown-max-height:
|
|
17
|
-
|
|
16
|
+
--nuraly-select-local-dropdown-max-height: auto;
|
|
17
|
+
--nuraly-select-local-dropdown-width: max-content;
|
|
18
18
|
--nuraly-select-local-placeholder-font-size: 14px;
|
|
19
19
|
--nuraly-select-local-option-font-size: 14px;
|
|
20
20
|
|
|
21
|
-
/*
|
|
21
|
+
/* Search input container settings */
|
|
22
|
+
--nuraly-select-local-input-container-max-width: var(--nuraly-select-width);
|
|
23
|
+
|
|
24
|
+
/* Size tokens - small */
|
|
25
|
+
--nuraly-select-local-small-height: 24px;
|
|
26
|
+
--nuraly-select-local-small-font-size: 12px;
|
|
27
|
+
--nuraly-select-local-small-padding: 2px 8px;
|
|
28
|
+
--nuraly-select-local-small-icon-size: 14px;
|
|
29
|
+
|
|
30
|
+
/* Size tokens - medium */
|
|
22
31
|
--nuraly-select-local-medium-height: 40px;
|
|
23
32
|
--nuraly-select-local-medium-font-size: 14px;
|
|
24
33
|
--nuraly-select-local-medium-padding: 8px 12px;
|
|
25
|
-
--nuraly-select-local-
|
|
34
|
+
--nuraly-select-local-medium-icon-size: 16px;
|
|
35
|
+
|
|
36
|
+
/* Size tokens - large */
|
|
37
|
+
--nuraly-select-local-large-height: 48px;
|
|
38
|
+
--nuraly-select-local-large-font-size: 16px;
|
|
39
|
+
--nuraly-select-local-large-padding: 12px 16px;
|
|
40
|
+
--nuraly-select-local-large-icon-size: 20px;
|
|
26
41
|
|
|
27
42
|
/* Animation and transitions */
|
|
28
43
|
--nuraly-select-local-dropdown-animation-duration: 0.15s;
|
|
44
|
+
--nuraly-select-local-transition-duration: 0.2s;
|
|
29
45
|
|
|
30
46
|
/* Multi-select specific */
|
|
31
47
|
--nuraly-select-local-tag-border-radius: 4px;
|
|
32
48
|
--nuraly-select-local-tag-padding: 2px 6px;
|
|
33
49
|
--nuraly-select-local-tag-margin: 2px;
|
|
34
50
|
|
|
51
|
+
/* Icon sizes */
|
|
52
|
+
--nuraly-select-local-icon-size: 16px;
|
|
53
|
+
--nuraly-select-local-arrow-icon-size: 16px;
|
|
54
|
+
|
|
35
55
|
/* Validation message */
|
|
36
56
|
--nuraly-select-local-message-font-size: 12px;
|
|
37
57
|
--nuraly-select-local-message-margin-top: 4px;
|
|
58
|
+
|
|
59
|
+
/* Font settings */
|
|
60
|
+
--nuraly-select-local-font-size: 14px;
|
|
38
61
|
}
|
|
39
62
|
|
|
40
63
|
:host {
|
|
@@ -53,22 +76,37 @@ export const styles = css `
|
|
|
53
76
|
}
|
|
54
77
|
|
|
55
78
|
:host([disabled]) .wrapper {
|
|
56
|
-
background-color: var(--nuraly-select-disabled-background,
|
|
57
|
-
border-color: var(--nuraly-select-disabled-border-color,
|
|
58
|
-
color: var(--nuraly-select-disabled-text-color,
|
|
79
|
+
background-color: var(--nuraly-select-disabled-background, var(--nuraly-color-background-disabled));
|
|
80
|
+
border-color: var(--nuraly-select-disabled-border-color, var(--nuraly-color-border));
|
|
81
|
+
color: var(--nuraly-select-disabled-text-color, var(--nuraly-color-text-disabled));
|
|
59
82
|
cursor: not-allowed;
|
|
60
83
|
}
|
|
61
84
|
|
|
62
85
|
/* Size variants */
|
|
63
86
|
:host([size='small']) .wrapper {
|
|
64
|
-
height: var(--nuraly-select-small-height,
|
|
65
|
-
min-height: var(--nuraly-select-small-height,
|
|
87
|
+
height: var(--nuraly-select-small-height, var(--nuraly-select-local-small-height));
|
|
88
|
+
min-height: var(--nuraly-select-small-height, var(--nuraly-select-local-small-height));
|
|
66
89
|
font-size: var(--nuraly-select-small-font-size, var(--nuraly-select-local-small-font-size));
|
|
67
90
|
}
|
|
68
91
|
|
|
69
92
|
:host([size='small']) .select-trigger {
|
|
70
|
-
padding: var(--nuraly-select-small-padding,
|
|
71
|
-
padding-right: calc(var(--nuraly-select-icon-size,
|
|
93
|
+
padding: var(--nuraly-select-small-padding, var(--nuraly-select-local-small-padding));
|
|
94
|
+
padding-right: calc(var(--nuraly-select-small-icon-size, var(--nuraly-select-local-small-icon-size)) + 20px);
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
:host([size='small']) .icons-container nr-icon {
|
|
98
|
+
--nuraly-icon-width: var(--nuraly-select-small-icon-size, var(--nuraly-select-local-small-icon-size));
|
|
99
|
+
}
|
|
100
|
+
|
|
101
|
+
:host([size='small']) .option {
|
|
102
|
+
padding: var(--nuraly-select-small-padding, var(--nuraly-select-local-small-padding));
|
|
103
|
+
font-size: var(--nuraly-select-small-font-size, var(--nuraly-select-local-small-font-size));
|
|
104
|
+
min-height: var(--nuraly-select-small-height, var(--nuraly-select-local-small-height));
|
|
105
|
+
}
|
|
106
|
+
|
|
107
|
+
:host([size='small']) .option-icon,
|
|
108
|
+
:host([size='small']) .option nr-icon {
|
|
109
|
+
--nuraly-icon-width: var(--nuraly-select-small-icon-size, var(--nuraly-select-local-small-icon-size));
|
|
72
110
|
}
|
|
73
111
|
|
|
74
112
|
:host([size='medium']) .wrapper {
|
|
@@ -78,30 +116,60 @@ export const styles = css `
|
|
|
78
116
|
|
|
79
117
|
:host([size='medium']) .select-trigger {
|
|
80
118
|
padding: var(--nuraly-select-medium-padding, var(--nuraly-select-local-medium-padding));
|
|
81
|
-
padding-right: calc(var(--nuraly-select-icon-size,
|
|
119
|
+
padding-right: calc(var(--nuraly-select-medium-icon-size, var(--nuraly-select-local-medium-icon-size)) + 20px);
|
|
120
|
+
}
|
|
121
|
+
|
|
122
|
+
:host([size='medium']) .icons-container nr-icon {
|
|
123
|
+
--nuraly-icon-width: var(--nuraly-select-medium-icon-size, var(--nuraly-select-local-medium-icon-size));
|
|
124
|
+
}
|
|
125
|
+
|
|
126
|
+
:host([size='medium']) .option {
|
|
127
|
+
padding: var(--nuraly-select-medium-padding, var(--nuraly-select-local-medium-padding));
|
|
128
|
+
font-size: var(--nuraly-select-medium-font-size, var(--nuraly-select-local-medium-font-size));
|
|
129
|
+
min-height: var(--nuraly-select-medium-height, var(--nuraly-select-local-medium-height));
|
|
130
|
+
}
|
|
131
|
+
|
|
132
|
+
:host([size='medium']) .option-icon,
|
|
133
|
+
:host([size='medium']) .option nr-icon {
|
|
134
|
+
--nuraly-icon-width: var(--nuraly-select-medium-icon-size, var(--nuraly-select-local-medium-icon-size));
|
|
82
135
|
}
|
|
83
136
|
|
|
84
137
|
:host([size='large']) .wrapper {
|
|
85
|
-
min-height: var(--nuraly-select-large-height,
|
|
86
|
-
font-size: var(--nuraly-select-large-font-size,
|
|
138
|
+
min-height: var(--nuraly-select-large-height, var(--nuraly-select-local-large-height));
|
|
139
|
+
font-size: var(--nuraly-select-large-font-size, var(--nuraly-select-local-large-font-size));
|
|
87
140
|
}
|
|
88
141
|
|
|
89
142
|
:host([size='large']) .select-trigger {
|
|
90
|
-
padding: var(--nuraly-select-large-padding,
|
|
91
|
-
padding-right: calc(var(--nuraly-select-icon-size,
|
|
143
|
+
padding: var(--nuraly-select-large-padding, var(--nuraly-select-local-large-padding));
|
|
144
|
+
padding-right: calc(var(--nuraly-select-large-icon-size, var(--nuraly-select-local-large-icon-size)) + 20px);
|
|
145
|
+
}
|
|
146
|
+
|
|
147
|
+
:host([size='large']) .icons-container nr-icon {
|
|
148
|
+
--nuraly-icon-width: var(--nuraly-select-large-icon-size, var(--nuraly-select-local-large-icon-size));
|
|
149
|
+
}
|
|
150
|
+
|
|
151
|
+
:host([size='large']) .option {
|
|
152
|
+
padding: var(--nuraly-select-large-padding, var(--nuraly-select-local-large-padding));
|
|
153
|
+
font-size: var(--nuraly-select-large-font-size, var(--nuraly-select-local-large-font-size));
|
|
154
|
+
min-height: var(--nuraly-select-large-height, var(--nuraly-select-local-large-height));
|
|
155
|
+
}
|
|
156
|
+
|
|
157
|
+
:host([size='large']) .option-icon,
|
|
158
|
+
:host([size='large']) .option nr-icon {
|
|
159
|
+
--nuraly-icon-width: var(--nuraly-select-large-icon-size, var(--nuraly-select-local-large-icon-size));
|
|
92
160
|
}
|
|
93
161
|
|
|
94
162
|
/* Status variants */
|
|
95
163
|
:host([status='error']) .wrapper {
|
|
96
|
-
border-color: var(--nuraly-select-error-border-color,
|
|
164
|
+
border-color: var(--nuraly-select-error-border-color, var(--nuraly-color-danger));
|
|
97
165
|
}
|
|
98
166
|
|
|
99
167
|
:host([status='warning']) .wrapper {
|
|
100
|
-
border-color: var(--nuraly-select-warning-border-color,
|
|
168
|
+
border-color: var(--nuraly-select-warning-border-color, var(--nuraly-color-warning));
|
|
101
169
|
}
|
|
102
170
|
|
|
103
171
|
:host([status='success']) .wrapper {
|
|
104
|
-
border-color: var(--nuraly-select-success-border-color,
|
|
172
|
+
border-color: var(--nuraly-select-success-border-color, var(--nuraly-color-success));
|
|
105
173
|
}
|
|
106
174
|
|
|
107
175
|
/* Type variants */
|
|
@@ -133,11 +201,11 @@ export const styles = css `
|
|
|
133
201
|
.wrapper {
|
|
134
202
|
position: relative;
|
|
135
203
|
width: var(--nuraly-select-width, fit-content);
|
|
136
|
-
background-color: var(--nuraly-select-background-color
|
|
204
|
+
background-color: var(--nuraly-select-background, var(--nuraly-color-background-panel));
|
|
137
205
|
border: var(--nuraly-select-border-width, var(--nuraly-select-local-border-width)) solid
|
|
138
|
-
var(--nuraly-select-border-color,
|
|
206
|
+
var(--nuraly-select-border-color, var(--nuraly-color-border));
|
|
139
207
|
border-radius: var(--nuraly-select-border-radius, var(--nuraly-select-local-border-radius));
|
|
140
|
-
transition: all var(--nuraly-select-transition-duration,
|
|
208
|
+
transition: all var(--nuraly-select-transition-duration, var(--nuraly-select-local-transition-duration))
|
|
141
209
|
var(--nuraly-select-transition-timing, ease-in-out);
|
|
142
210
|
cursor: pointer;
|
|
143
211
|
outline: none;
|
|
@@ -151,13 +219,13 @@ export const styles = css `
|
|
|
151
219
|
}
|
|
152
220
|
|
|
153
221
|
.wrapper:hover:not(:disabled) {
|
|
154
|
-
border-color: var(--nuraly-select-border-hover,
|
|
222
|
+
border-color: var(--nuraly-select-border-hover, var(--nuraly-color-primary));
|
|
155
223
|
}
|
|
156
224
|
|
|
157
225
|
.wrapper:focus,
|
|
158
226
|
.wrapper:focus-within {
|
|
159
|
-
border-color: var(--nuraly-select-border-focus,
|
|
160
|
-
box-shadow: 0 0 0 2px var(--nuraly-
|
|
227
|
+
border-color: var(--nuraly-select-border-focus, var(--nuraly-color-primary));
|
|
228
|
+
box-shadow: 0 0 0 2px var(--nuraly-color-primary-light);
|
|
161
229
|
}
|
|
162
230
|
|
|
163
231
|
/* Select container */
|
|
@@ -171,10 +239,10 @@ export const styles = css `
|
|
|
171
239
|
display: flex;
|
|
172
240
|
align-items: center;
|
|
173
241
|
padding: var(--nuraly-select-padding-top, var(--nuraly-select-local-padding-top))
|
|
174
|
-
calc(var(--nuraly-select-icon-size,
|
|
242
|
+
calc(var(--nuraly-select-icon-size, var(--nuraly-select-local-icon-size)) + 20px)
|
|
175
243
|
var(--nuraly-select-padding-bottom, var(--nuraly-select-local-padding-bottom))
|
|
176
244
|
var(--nuraly-select-padding-left, var(--nuraly-select-local-padding-left));
|
|
177
|
-
color: var(--nuraly-select-
|
|
245
|
+
color: var(--nuraly-select-color, var(--nuraly-color-text));
|
|
178
246
|
font-size: inherit;
|
|
179
247
|
line-height: inherit;
|
|
180
248
|
word-break: break-word;
|
|
@@ -187,7 +255,7 @@ export const styles = css `
|
|
|
187
255
|
|
|
188
256
|
.select-trigger:empty:before {
|
|
189
257
|
content: attr(data-placeholder);
|
|
190
|
-
color: var(--nuraly-select-placeholder-color,
|
|
258
|
+
color: var(--nuraly-select-placeholder-color, var(--nuraly-color-text-secondary));
|
|
191
259
|
font-size: var(--nuraly-select-placeholder-font-size, var(--nuraly-select-local-placeholder-font-size));
|
|
192
260
|
}
|
|
193
261
|
|
|
@@ -196,8 +264,8 @@ export const styles = css `
|
|
|
196
264
|
display: inline-flex;
|
|
197
265
|
align-items: center;
|
|
198
266
|
gap: 4px;
|
|
199
|
-
background-color: var(--nuraly-select-tag-background, var(--nuraly-
|
|
200
|
-
color: var(--nuraly-select-tag-color, var(--nuraly-
|
|
267
|
+
background-color: var(--nuraly-select-tag-background, var(--nuraly-color-background-active));
|
|
268
|
+
color: var(--nuraly-select-tag-color, var(--nuraly-color-text));
|
|
201
269
|
padding: var(--nuraly-select-tag-padding, var(--nuraly-select-local-tag-padding));
|
|
202
270
|
border-radius: var(--nuraly-select-tag-border-radius, var(--nuraly-select-local-tag-border-radius));
|
|
203
271
|
font-size: calc(var(--nuraly-select-font-size, var(--nuraly-select-local-font-size)) - 1px);
|
|
@@ -211,7 +279,7 @@ export const styles = css `
|
|
|
211
279
|
}
|
|
212
280
|
|
|
213
281
|
.tag-close {
|
|
214
|
-
color: var(--nuraly-select-tag-close-color, var(--nuraly-
|
|
282
|
+
color: var(--nuraly-select-tag-close-color, var(--nuraly-color-text-secondary));
|
|
215
283
|
cursor: pointer;
|
|
216
284
|
display: flex;
|
|
217
285
|
align-items: center;
|
|
@@ -223,7 +291,7 @@ export const styles = css `
|
|
|
223
291
|
}
|
|
224
292
|
|
|
225
293
|
.tag-close:hover {
|
|
226
|
-
color: var(--nuraly-select-tag-close-hover-color, var(--nuraly-
|
|
294
|
+
color: var(--nuraly-select-tag-close-hover-color, var(--nuraly-color-text));
|
|
227
295
|
}
|
|
228
296
|
|
|
229
297
|
/* Icons container */
|
|
@@ -240,14 +308,14 @@ export const styles = css `
|
|
|
240
308
|
|
|
241
309
|
.icons-container nr-icon {
|
|
242
310
|
--nuraly-icon-width: var(--nuraly-select-icon-size, var(--nuraly-select-local-icon-size));
|
|
243
|
-
--nuraly-icon-color: var(--nuraly-select-icon
|
|
311
|
+
--nuraly-icon-color: var(--nuraly-color-select-icon, var(--nuraly-color-text-secondary));
|
|
244
312
|
pointer-events: auto;
|
|
245
313
|
cursor: pointer;
|
|
246
314
|
transition: color var(--nuraly-select-transition-duration, var(--nuraly-select-local-transition-duration));
|
|
247
315
|
}
|
|
248
316
|
|
|
249
317
|
.icons-container nr-icon:hover {
|
|
250
|
-
--nuraly-icon-color: var(--nuraly-select-icon-hover
|
|
318
|
+
--nuraly-icon-color: var(--nuraly-color-select-icon-hover, var(--nuraly-color-text));
|
|
251
319
|
}
|
|
252
320
|
|
|
253
321
|
.arrow-icon {
|
|
@@ -262,24 +330,21 @@ export const styles = css `
|
|
|
262
330
|
|
|
263
331
|
/* Dropdown options */
|
|
264
332
|
.options {
|
|
265
|
-
/*
|
|
266
|
-
position:
|
|
267
|
-
top
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
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));
|
|
333
|
+
/* Fixed positioning to escape overflow containers */
|
|
334
|
+
position: fixed;
|
|
335
|
+
/* top/left will be set by controller */
|
|
336
|
+
background-color: var(--nuraly-select-dropdown-background, var(--nuraly-color-background-panel));
|
|
337
|
+
border: var(--nuraly-select-dropdown-border-width, var(--nuraly-select-border-width, var(--nuraly-select-local-border-width))) solid
|
|
338
|
+
var(--nuraly-select-dropdown-border-color, var(--nuraly-color-border));
|
|
339
|
+
border-radius: var(--nuraly-select-dropdown-border-radius, var(--nuraly-select-border-radius, var(--nuraly-select-local-border-radius)));
|
|
275
340
|
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,
|
|
277
|
-
max-height: var(--nuraly-select-dropdown-max-height,
|
|
341
|
+
z-index: var(--nuraly-select-dropdown-z-index, var(--nuraly-select-local-dropdown-z-index));
|
|
342
|
+
max-height: var(--nuraly-select-dropdown-max-height, var(--nuraly-select-local-dropdown-max-height, auto));
|
|
278
343
|
overflow-y: auto;
|
|
279
344
|
overflow-x: hidden;
|
|
280
345
|
display: none;
|
|
281
346
|
flex-direction: column;
|
|
282
|
-
animation: dropdown-enter var(--nuraly-select-dropdown-animation-duration,
|
|
347
|
+
animation: dropdown-enter var(--nuraly-select-dropdown-animation-duration, var(--nuraly-select-local-dropdown-animation-duration)) ease-out;
|
|
283
348
|
/* Ensure proper containment and exact wrapper width */
|
|
284
349
|
box-sizing: border-box;
|
|
285
350
|
/* Allow overriding width via either of these custom props */
|
|
@@ -287,24 +352,27 @@ export const styles = css `
|
|
|
287
352
|
--nuraly-select-dropdown-width,
|
|
288
353
|
var(--select-dropdown-width, var(--nuraly-select-local-dropdown-width))
|
|
289
354
|
);
|
|
290
|
-
min-width: 100%; /* Ensure dropdown is at least as wide as the wrapper */
|
|
291
355
|
/* Create new stacking context to prevent layering issues */
|
|
292
356
|
isolation: isolate;
|
|
293
357
|
/* Ensure solid background to prevent visual bleed-through */
|
|
294
358
|
backdrop-filter: none;
|
|
295
359
|
-webkit-backdrop-filter: none;
|
|
296
|
-
/*
|
|
297
|
-
|
|
360
|
+
/* Prevent pointer events when hidden */
|
|
361
|
+
pointer-events: none;
|
|
362
|
+
}
|
|
363
|
+
|
|
364
|
+
:host([show]) .options {
|
|
365
|
+
pointer-events: auto;
|
|
298
366
|
}
|
|
299
367
|
|
|
300
368
|
.options.placement-top {
|
|
301
|
-
top: auto;
|
|
302
|
-
bottom: 100%;
|
|
303
|
-
margin-bottom: 1px;
|
|
304
|
-
margin-top: 0;
|
|
305
369
|
animation: dropdown-enter-top var(--nuraly-select-dropdown-animation-duration, var(--nuraly-select-local-dropdown-animation-duration)) ease-out;
|
|
306
370
|
}
|
|
307
371
|
|
|
372
|
+
.options.placement-bottom {
|
|
373
|
+
animation: dropdown-enter var(--nuraly-select-dropdown-animation-duration, var(--nuraly-select-local-dropdown-animation-duration)) ease-out;
|
|
374
|
+
}
|
|
375
|
+
|
|
308
376
|
@keyframes dropdown-enter {
|
|
309
377
|
from {
|
|
310
378
|
opacity: 0;
|
|
@@ -332,9 +400,9 @@ export const styles = css `
|
|
|
332
400
|
position: sticky;
|
|
333
401
|
top: 0;
|
|
334
402
|
z-index: 10;
|
|
335
|
-
background-color: var(--nuraly-select-dropdown-background,
|
|
336
|
-
border-bottom: var(--nuraly-select-border-width,
|
|
337
|
-
var(--nuraly-select-dropdown-border-color,
|
|
403
|
+
background-color: var(--nuraly-select-dropdown-background, var(--nuraly-color-background-panel));
|
|
404
|
+
border-bottom: var(--nuraly-select-border-width, var(--nuraly-select-local-border-width)) solid
|
|
405
|
+
var(--nuraly-select-dropdown-border-color, var(--nuraly-color-border));
|
|
338
406
|
padding: 8px;
|
|
339
407
|
margin: 0;
|
|
340
408
|
/* Ensure it stays above options during scroll */
|
|
@@ -348,16 +416,17 @@ export const styles = css `
|
|
|
348
416
|
/* Search input styling */
|
|
349
417
|
.search-container .search-input {
|
|
350
418
|
width: 100%;
|
|
419
|
+
max-width: var(--nuraly-select-input-container-max-width, var(--nuraly-select-local-input-container-max-width));
|
|
351
420
|
--nuraly-input-border-radius: var(--nuraly-select-border-radius, var(--nuraly-select-local-border-radius));
|
|
352
|
-
--nuraly-input-background-color: var(--nuraly-select-background
|
|
353
|
-
--nuraly-input-border-color: var(--nuraly-select-border-color, var(--nuraly-
|
|
354
|
-
--nuraly-input-text-color: var(--nuraly-select-
|
|
355
|
-
--nuraly-input-placeholder-color: var(--nuraly-select-placeholder-color, var(--nuraly-
|
|
421
|
+
--nuraly-input-background-color: var(--nuraly-select-background, var(--nuraly-color-background-panel));
|
|
422
|
+
--nuraly-input-border-color: var(--nuraly-select-border-color, var(--nuraly-color-border));
|
|
423
|
+
--nuraly-input-text-color: var(--nuraly-select-color, var(--nuraly-color-text));
|
|
424
|
+
--nuraly-input-placeholder-color: var(--nuraly-select-placeholder-color, var(--nuraly-color-text-secondary));
|
|
356
425
|
}
|
|
357
426
|
|
|
358
427
|
/* Search icon in the search input */
|
|
359
428
|
.search-container .search-icon {
|
|
360
|
-
--nuraly-icon-color: var(--nuraly-select-icon
|
|
429
|
+
--nuraly-icon-color: var(--nuraly-color-select-icon, var(--nuraly-color-text-secondary));
|
|
361
430
|
}
|
|
362
431
|
|
|
363
432
|
/* Options list container - ensure proper scroll behavior with sticky search */
|
|
@@ -373,10 +442,10 @@ export const styles = css `
|
|
|
373
442
|
gap: 8px;
|
|
374
443
|
padding: var(--nuraly-select-option-padding, 8px 12px);
|
|
375
444
|
min-height: var(--nuraly-select-option-min-height, auto);
|
|
376
|
-
color: var(--nuraly-select-option-
|
|
377
|
-
font-size: var(--nuraly-select-option-font-size,
|
|
445
|
+
color: var(--nuraly-select-option-color, var(--nuraly-color-text));
|
|
446
|
+
font-size: var(--nuraly-select-option-font-size, var(--nuraly-select-local-option-font-size));
|
|
378
447
|
cursor: pointer;
|
|
379
|
-
transition: background-color var(--nuraly-select-transition-duration,
|
|
448
|
+
transition: background-color var(--nuraly-select-transition-duration, var(--nuraly-select-local-transition-duration));
|
|
380
449
|
position: relative;
|
|
381
450
|
}
|
|
382
451
|
|
|
@@ -386,17 +455,17 @@ export const styles = css `
|
|
|
386
455
|
}
|
|
387
456
|
|
|
388
457
|
.option:hover {
|
|
389
|
-
background-color: var(--nuraly-select-option-hover-background,
|
|
458
|
+
background-color: var(--nuraly-select-option-hover-background, var(--nuraly-color-background-hover));
|
|
390
459
|
}
|
|
391
460
|
|
|
392
461
|
.option.selected {
|
|
393
|
-
background-color: var(--nuraly-select-option-selected-background,
|
|
394
|
-
color: var(--nuraly-select-option-selected-color,
|
|
462
|
+
background-color: var(--nuraly-select-option-selected-background, var(--nuraly-color-primary-light));
|
|
463
|
+
color: var(--nuraly-select-option-selected-color, var(--nuraly-color-primary));
|
|
395
464
|
}
|
|
396
465
|
|
|
397
466
|
.option.focused {
|
|
398
|
-
background-color: var(--nuraly-select-option-hover-background,
|
|
399
|
-
outline: 2px solid var(--nuraly-select-border-focus,
|
|
467
|
+
background-color: var(--nuraly-select-option-hover-background, var(--nuraly-color-background-hover));
|
|
468
|
+
outline: 2px solid var(--nuraly-select-border-focus, var(--nuraly-color-primary));
|
|
400
469
|
outline-offset: -2px;
|
|
401
470
|
}
|
|
402
471
|
|
|
@@ -432,7 +501,7 @@ export const styles = css `
|
|
|
432
501
|
|
|
433
502
|
.check-icon {
|
|
434
503
|
--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-
|
|
504
|
+
--nuraly-icon-color: var(--nuraly-select-option-selected-color, var(--nuraly-color-primary));
|
|
436
505
|
}
|
|
437
506
|
|
|
438
507
|
.no-options {
|
|
@@ -440,7 +509,7 @@ export const styles = css `
|
|
|
440
509
|
align-items: center;
|
|
441
510
|
justify-content: center;
|
|
442
511
|
padding: var(--select-no-options-padding, 24px 16px);
|
|
443
|
-
color: var(--select-no-options-color,
|
|
512
|
+
color: var(--select-no-options-color, var(--nuraly-color-text-secondary));
|
|
444
513
|
font-size: var(--nuraly-select-option-font-size, var(--nuraly-select-local-option-font-size));
|
|
445
514
|
cursor: default;
|
|
446
515
|
user-select: none;
|
|
@@ -456,13 +525,13 @@ export const styles = css `
|
|
|
456
525
|
|
|
457
526
|
.no-options-icon {
|
|
458
527
|
--nuraly-icon-width: 24px;
|
|
459
|
-
--nuraly-icon-color: var(--select-no-options-icon-color,
|
|
528
|
+
--nuraly-icon-color: var(--select-no-options-icon-color, var(--nuraly-color-border));
|
|
460
529
|
opacity: 0.8;
|
|
461
530
|
}
|
|
462
531
|
|
|
463
532
|
.no-options-text {
|
|
464
533
|
font-size: var(--nuraly-select-option-font-size, var(--nuraly-select-local-option-font-size));
|
|
465
|
-
color: var(--select-no-options-color,
|
|
534
|
+
color: var(--select-no-options-color, var(--nuraly-color-text-secondary));
|
|
466
535
|
line-height: 1.4;
|
|
467
536
|
}
|
|
468
537
|
|
|
@@ -471,15 +540,15 @@ export const styles = css `
|
|
|
471
540
|
display: block;
|
|
472
541
|
margin-top: var(--nuraly-select-message-margin-top, var(--nuraly-select-local-message-margin-top));
|
|
473
542
|
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-
|
|
543
|
+
color: var(--nuraly-select-error-message-color, var(--nuraly-color-danger));
|
|
475
544
|
}
|
|
476
545
|
|
|
477
546
|
.validation-message.warning {
|
|
478
|
-
color: var(--nuraly-select-warning-message-color, var(--nuraly-
|
|
547
|
+
color: var(--nuraly-select-warning-message-color, var(--nuraly-color-warning));
|
|
479
548
|
}
|
|
480
549
|
|
|
481
550
|
.validation-message.success {
|
|
482
|
-
color: var(--nuraly-select-success-message-color, var(--nuraly-
|
|
551
|
+
color: var(--nuraly-select-success-message-color, var(--nuraly-color-success));
|
|
483
552
|
}
|
|
484
553
|
|
|
485
554
|
/* Slotted content styles */
|
|
@@ -487,14 +556,14 @@ export const styles = css `
|
|
|
487
556
|
display: block;
|
|
488
557
|
margin-bottom: 4px;
|
|
489
558
|
font-weight: 500;
|
|
490
|
-
color: var(--nuraly-select-
|
|
559
|
+
color: var(--nuraly-select-color, var(--nuraly-color-text));
|
|
491
560
|
}
|
|
492
561
|
|
|
493
562
|
::slotted([slot='helper-text']) {
|
|
494
563
|
display: block;
|
|
495
564
|
margin-top: var(--nuraly-select-message-margin-top, var(--nuraly-select-local-message-margin-top));
|
|
496
565
|
font-size: var(--nuraly-select-message-font-size, var(--nuraly-select-local-message-font-size));
|
|
497
|
-
color: var(--nuraly-select-placeholder-color, var(--nuraly-
|
|
566
|
+
color: var(--nuraly-select-placeholder-color, var(--nuraly-color-text-secondary));
|
|
498
567
|
}
|
|
499
568
|
|
|
500
569
|
/* Accessibility improvements */
|
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,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAygBxB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`\n :host {\n /* Layout and sizing */\n --nuraly-select-local-min-height: 40px;\n --nuraly-select-local-padding-top: 8px;\n --nuraly-select-local-padding-bottom: 8px;\n --nuraly-select-local-padding-left: 12px;\n --nuraly-select-local-padding-right: 12px;\n --nuraly-select-local-wrapper-margin: 0;\n --nuraly-select-local-border-radius: 6px;\n --nuraly-select-local-border-width: 1px;\n \n /* Dropdown settings */\n --nuraly-select-local-dropdown-z-index: 9999;\n --nuraly-select-local-dropdown-max-height: 200px;\n --nuraly-select-local-dropdown-width: max-content; /* Default to auto-size to content */\n --nuraly-select-local-placeholder-font-size: 14px;\n --nuraly-select-local-option-font-size: 14px;\n \n /* Sizes */\n --nuraly-select-local-medium-height: 40px;\n --nuraly-select-local-medium-font-size: 14px;\n --nuraly-select-local-medium-padding: 8px 12px;\n --nuraly-select-local-small-font-size: 12px;\n \n /* Animation and transitions */\n --nuraly-select-local-dropdown-animation-duration: 0.15s;\n \n /* Multi-select specific */\n --nuraly-select-local-tag-border-radius: 4px;\n --nuraly-select-local-tag-padding: 2px 6px;\n --nuraly-select-local-tag-margin: 2px;\n \n /* Validation message */\n --nuraly-select-local-message-font-size: 12px;\n --nuraly-select-local-message-margin-top: 4px;\n }\n\n :host {\n width: fit-content;\n display: block;\n font-family: var(--nuraly-select-font-family, Inter, ui-sans-serif, system-ui, -apple-system, \"Segoe UI\", Roboto, Ubuntu, Cantarell, \"Noto Sans\", sans-serif);\n font-size: var(--nuraly-select-font-size, 14px);\n line-height: var(--nuraly-select-line-height, 1.5);\n margin: var(--nuraly-select-margin, var(--nuraly-select-local-wrapper-margin));\n }\n\n /* Host attribute selectors for configuration */\n :host([disabled]) {\n opacity: var(--nuraly-select-disabled-opacity, 0.5);\n pointer-events: none;\n }\n\n :host([disabled]) .wrapper {\n background-color: var(--nuraly-select-disabled-background, #f9fafb);\n border-color: var(--nuraly-select-disabled-border-color, #d9d9d9);\n color: var(--nuraly-select-disabled-text-color, #8c8c8c);\n cursor: not-allowed;\n }\n\n /* Size variants */\n :host([size='small']) .wrapper {\n height: var(--nuraly-select-small-height, 24px);\n min-height: var(--nuraly-select-small-height, 24px);\n font-size: var(--nuraly-select-small-font-size, var(--nuraly-select-local-small-font-size));\n }\n\n :host([size='small']) .select-trigger {\n padding: var(--nuraly-select-small-padding, 2px 8px);\n padding-right: calc(var(--nuraly-select-icon-size, 16px) + 20px);\n }\n\n :host([size='medium']) .wrapper {\n min-height: var(--nuraly-select-medium-height, var(--nuraly-select-local-medium-height));\n font-size: var(--nuraly-select-medium-font-size, var(--nuraly-select-local-medium-font-size));\n }\n\n :host([size='medium']) .select-trigger {\n padding: var(--nuraly-select-medium-padding, var(--nuraly-select-local-medium-padding));\n padding-right: calc(var(--nuraly-select-icon-size, 16px) + 20px);\n }\n\n :host([size='large']) .wrapper {\n min-height: var(--nuraly-select-large-height, 48px);\n font-size: var(--nuraly-select-large-font-size, 16px);\n }\n\n :host([size='large']) .select-trigger {\n padding: var(--nuraly-select-large-padding, 12px 16px);\n padding-right: calc(var(--nuraly-select-icon-size, 16px) + 20px);\n }\n\n /* Status variants */\n :host([status='error']) .wrapper {\n border-color: var(--nuraly-select-error-border-color, #ef4444);\n }\n\n :host([status='warning']) .wrapper {\n border-color: var(--nuraly-select-warning-border-color, #f59e0b);\n }\n\n :host([status='success']) .wrapper {\n border-color: var(--nuraly-select-success-border-color, #10b981);\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 /* Block (full width) */\n :host([block]) {\n width: 100%;\n }\n\n :host([block]) .wrapper {\n width: 100%;\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(--nuraly-select-width, fit-content);\n background-color: var(--nuraly-select-background-color, #ffffff);\n border: var(--nuraly-select-border-width, var(--nuraly-select-local-border-width)) solid \n var(--nuraly-select-border-color, #d9d9d9);\n border-radius: var(--nuraly-select-border-radius, var(--nuraly-select-local-border-radius));\n transition: all var(--nuraly-select-transition-duration, 0.2s) \n var(--nuraly-select-transition-timing, ease-in-out);\n cursor: pointer;\n outline: none;\n margin: var(--nuraly-select-wrapper-margin, 0);\n min-height: var(--nuraly-select-min-height, var(--nuraly-select-local-min-height));\n box-sizing: border-box;\n display: flex;\n align-items: center;\n /* Ensure dropdown can overflow the wrapper */\n overflow: visible;\n }\n\n .wrapper:hover:not(:disabled) {\n border-color: var(--nuraly-select-border-hover, #7c3aed);\n }\n\n .wrapper:focus,\n .wrapper:focus-within {\n border-color: var(--nuraly-select-border-focus, #7c3aed);\n box-shadow: 0 0 0 2px var(--nuraly-select-focus-outline, rgba(124, 58, 237, 0.2));\n }\n\n /* Select container */\n .select {\n display: flex;\n flex-direction: column;\n }\n\n /* Select trigger (main display area) */\n .select-trigger {\n display: flex;\n align-items: center;\n padding: var(--nuraly-select-padding-top, var(--nuraly-select-local-padding-top)) \n calc(var(--nuraly-select-icon-size, 16px) + 20px) \n var(--nuraly-select-padding-bottom, var(--nuraly-select-local-padding-bottom)) \n var(--nuraly-select-padding-left, var(--nuraly-select-local-padding-left));\n color: var(--nuraly-select-text-color, #262626);\n font-size: inherit;\n line-height: inherit;\n word-break: break-word;\n flex: 1;\n min-height: 0;\n flex-wrap: wrap;\n gap: var(--nuraly-select-tag-margin, var(--nuraly-select-local-tag-margin));\n box-sizing: border-box;\n }\n\n .select-trigger:empty:before {\n content: attr(data-placeholder);\n color: var(--nuraly-select-placeholder-color, #8c8c8c);\n font-size: var(--nuraly-select-placeholder-font-size, var(--nuraly-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(--nuraly-select-tag-background, var(--nuraly-select-local-tag-background));\n color: var(--nuraly-select-tag-color, var(--nuraly-select-local-tag-color));\n padding: var(--nuraly-select-tag-padding, var(--nuraly-select-local-tag-padding));\n border-radius: var(--nuraly-select-tag-border-radius, var(--nuraly-select-local-tag-border-radius));\n font-size: calc(var(--nuraly-select-font-size, var(--nuraly-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(--nuraly-select-tag-close-color, var(--nuraly-select-local-tag-close-color));\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n width: var(--nuraly-select-icon-size, var(--nuraly-select-local-icon-size));\n height: var(--nuraly-select-icon-size, var(--nuraly-select-local-icon-size));\n border-radius: 50%;\n transition: color var(--nuraly-select-transition-duration, var(--nuraly-select-local-transition-duration));\n }\n\n .tag-close:hover {\n color: var(--nuraly-select-tag-close-hover-color, var(--nuraly-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 nr-icon {\n --nuraly-icon-width: var(--nuraly-select-icon-size, var(--nuraly-select-local-icon-size));\n --nuraly-icon-color: var(--nuraly-select-icon-color, var(--nuraly-select-local-icon-color));\n pointer-events: auto;\n cursor: pointer;\n transition: color var(--nuraly-select-transition-duration, var(--nuraly-select-local-transition-duration));\n }\n\n .icons-container nr-icon:hover {\n --nuraly-icon-color: var(--nuraly-select-icon-hover-color, var(--nuraly-select-local-icon-hover-color));\n }\n\n .arrow-icon {\n --nuraly-icon-width: var(--nuraly-select-arrow-icon-size, var(--nuraly-select-local-arrow-icon-size));\n transition: transform var(--nuraly-select-transition-duration, var(--nuraly-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 margin-top: 1px;\n left: 0;\n right: 0;\n background-color: var(--nuraly-select-dropdown-background, #ffffff);\n border: var(--nuraly-select-dropdown-border-width, var(--nuraly-select-border-width, 1px)) solid \n var(--nuraly-select-dropdown-border-color, #d9d9d9);\n border-radius: var(--nuraly-select-dropdown-border-radius, var(--nuraly-select-border-radius, 6px));\n box-shadow: var(--nuraly-select-dropdown-shadow, 0 6px 16px 0 rgba(0, 0, 0, 0.08));\n z-index: var(--nuraly-select-dropdown-z-index, 9999);\n max-height: var(--nuraly-select-dropdown-max-height, 200px);\n overflow-y: auto;\n overflow-x: hidden;\n display: none;\n flex-direction: column;\n animation: dropdown-enter var(--nuraly-select-dropdown-animation-duration, 0.15s) ease-out;\n /* Ensure proper containment and exact wrapper width */\n box-sizing: border-box;\n /* Allow overriding width via either of these custom props */\n width: var(\n --nuraly-select-dropdown-width,\n var(--select-dropdown-width, var(--nuraly-select-local-dropdown-width))\n );\n min-width: 100%; /* Ensure dropdown is at least as wide as the wrapper */\n /* Create new stacking context to prevent layering issues */\n isolation: isolate;\n /* Ensure solid background to prevent visual bleed-through */\n backdrop-filter: none;\n -webkit-backdrop-filter: none;\n /* Force above other elements */\n transform: translateZ(0);\n }\n\n .options.placement-top {\n top: auto;\n bottom: 100%;\n margin-bottom: 1px;\n margin-top: 0;\n animation: dropdown-enter-top var(--nuraly-select-dropdown-animation-duration, var(--nuraly-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 /* Search container - sticky at top of dropdown */\n .search-container {\n position: sticky;\n top: 0;\n z-index: 10;\n background-color: var(--nuraly-select-dropdown-background, #ffffff);\n border-bottom: var(--nuraly-select-border-width, 1px) solid \n var(--nuraly-select-dropdown-border-color, #d9d9d9);\n padding: 8px;\n margin: 0;\n /* Ensure it stays above options during scroll */\n backdrop-filter: blur(8px);\n -webkit-backdrop-filter: blur(8px);\n /* Ensure proper stacking and smooth scrolling */\n will-change: transform;\n transform: translateZ(0);\n }\n\n /* Search input styling */\n .search-container .search-input {\n width: 100%;\n --nuraly-input-border-radius: var(--nuraly-select-border-radius, var(--nuraly-select-local-border-radius));\n --nuraly-input-background-color: var(--nuraly-select-background-color, var(--nuraly-select-local-background-color));\n --nuraly-input-border-color: var(--nuraly-select-border-color, var(--nuraly-select-local-border-color));\n --nuraly-input-text-color: var(--nuraly-select-text-color, var(--nuraly-select-local-text-color));\n --nuraly-input-placeholder-color: var(--nuraly-select-placeholder-color, var(--nuraly-select-local-placeholder-color));\n }\n\n /* Search icon in the search input */\n .search-container .search-icon {\n --nuraly-icon-color: var(--nuraly-select-icon-color, var(--nuraly-select-local-icon-color));\n }\n\n /* Options list container - ensure proper scroll behavior with sticky search */\n .options:has(.search-container) {\n /* Add small padding-top when search is present to ensure proper separation */\n padding-top: 0;\n }\n\n /* Option items */\n .option {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: var(--nuraly-select-option-padding, 8px 12px);\n min-height: var(--nuraly-select-option-min-height, auto);\n color: var(--nuraly-select-option-text-color, var(--nuraly-select-text-color, #262626));\n font-size: var(--nuraly-select-option-font-size, 14px);\n cursor: pointer;\n transition: background-color var(--nuraly-select-transition-duration, 0.2s);\n position: relative;\n }\n\n /* First option after search container should have no extra margin */\n .search-container + .option {\n margin-top: 0;\n }\n\n .option:hover {\n background-color: var(--nuraly-select-option-hover-background, #f5f5f5);\n }\n\n .option.selected {\n background-color: var(--nuraly-select-option-selected-background, #e0e0e0);\n color: var(--nuraly-select-option-selected-color, #7c3aed);\n }\n\n .option.focused {\n background-color: var(--nuraly-select-option-hover-background, #f5f5f5);\n outline: 2px solid var(--nuraly-select-border-focus, #7c3aed);\n outline-offset: -2px;\n }\n\n .option.disabled {\n opacity: var(--nuraly-select-disabled-opacity, var(--nuraly-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 --nuraly-icon-width: var(--nuraly-select-icon-size, var(--nuraly-select-local-icon-size));\n --nuraly-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(--nuraly-select-option-font-size, var(--nuraly-select-local-option-font-size)) - 1px);\n opacity: 0.7;\n margin-top: 2px;\n }\n\n .check-icon {\n --nuraly-icon-width: var(--nuraly-select-icon-size, var(--nuraly-select-local-icon-size));\n --nuraly-icon-color: var(--nuraly-select-option-selected-color, var(--nuraly-select-local-option-selected-color));\n }\n\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(--nuraly-select-option-font-size, var(--nuraly-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 --nuraly-icon-width: 24px;\n --nuraly-icon-color: var(--select-no-options-icon-color, #d9d9d9);\n opacity: 0.8;\n }\n\n .no-options-text {\n font-size: var(--nuraly-select-option-font-size, var(--nuraly-select-local-option-font-size));\n color: var(--select-no-options-color, #8c8c8c);\n line-height: 1.4;\n }\n\n /* Validation message */\n .validation-message {\n display: block;\n margin-top: var(--nuraly-select-message-margin-top, var(--nuraly-select-local-message-margin-top));\n font-size: var(--nuraly-select-message-font-size, var(--nuraly-select-local-message-font-size));\n color: var(--nuraly-select-error-message-color, var(--nuraly-select-local-error-message-color));\n }\n\n .validation-message.warning {\n color: var(--nuraly-select-warning-message-color, var(--nuraly-select-local-warning-message-color));\n }\n\n .validation-message.success {\n color: var(--nuraly-select-success-message-color, var(--nuraly-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(--nuraly-select-text-color, var(--nuraly-select-local-text-color));\n }\n\n ::slotted([slot='helper-text']) {\n display: block;\n margin-top: var(--nuraly-select-message-margin-top, var(--nuraly-select-local-message-margin-top));\n font-size: var(--nuraly-select-message-font-size, var(--nuraly-select-local-message-font-size));\n color: var(--nuraly-select-placeholder-color, var(--nuraly-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"]}
|
|
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;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8kBxB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`\n :host {\n /* Layout and sizing */\n --nuraly-select-local-min-height: 40px;\n --nuraly-select-local-padding-top: 8px;\n --nuraly-select-local-padding-bottom: 8px;\n --nuraly-select-local-padding-left: 12px;\n --nuraly-select-local-padding-right: 12px;\n --nuraly-select-local-wrapper-margin: 0;\n --nuraly-select-local-border-radius: 6px;\n --nuraly-select-local-border-width: 1px;\n \n /* Dropdown settings */\n --nuraly-select-local-dropdown-z-index: 9999;\n --nuraly-select-local-dropdown-max-height: auto;\n --nuraly-select-local-dropdown-width: max-content;\n --nuraly-select-local-placeholder-font-size: 14px;\n --nuraly-select-local-option-font-size: 14px;\n \n /* Search input container settings */\n --nuraly-select-local-input-container-max-width: var(--nuraly-select-width);\n \n /* Size tokens - small */\n --nuraly-select-local-small-height: 24px;\n --nuraly-select-local-small-font-size: 12px;\n --nuraly-select-local-small-padding: 2px 8px;\n --nuraly-select-local-small-icon-size: 14px;\n \n /* Size tokens - medium */\n --nuraly-select-local-medium-height: 40px;\n --nuraly-select-local-medium-font-size: 14px;\n --nuraly-select-local-medium-padding: 8px 12px;\n --nuraly-select-local-medium-icon-size: 16px;\n \n /* Size tokens - large */\n --nuraly-select-local-large-height: 48px;\n --nuraly-select-local-large-font-size: 16px;\n --nuraly-select-local-large-padding: 12px 16px;\n --nuraly-select-local-large-icon-size: 20px;\n \n /* Animation and transitions */\n --nuraly-select-local-dropdown-animation-duration: 0.15s;\n --nuraly-select-local-transition-duration: 0.2s;\n \n /* Multi-select specific */\n --nuraly-select-local-tag-border-radius: 4px;\n --nuraly-select-local-tag-padding: 2px 6px;\n --nuraly-select-local-tag-margin: 2px;\n \n /* Icon sizes */\n --nuraly-select-local-icon-size: 16px;\n --nuraly-select-local-arrow-icon-size: 16px;\n \n /* Validation message */\n --nuraly-select-local-message-font-size: 12px;\n --nuraly-select-local-message-margin-top: 4px;\n \n /* Font settings */\n --nuraly-select-local-font-size: 14px;\n }\n\n :host {\n width: fit-content;\n display: block;\n font-family: var(--nuraly-select-font-family, Inter, ui-sans-serif, system-ui, -apple-system, \"Segoe UI\", Roboto, Ubuntu, Cantarell, \"Noto Sans\", sans-serif);\n font-size: var(--nuraly-select-font-size, 14px);\n line-height: var(--nuraly-select-line-height, 1.5);\n margin: var(--nuraly-select-margin, var(--nuraly-select-local-wrapper-margin));\n }\n\n /* Host attribute selectors for configuration */\n :host([disabled]) {\n opacity: var(--nuraly-select-disabled-opacity, 0.5);\n pointer-events: none;\n }\n\n :host([disabled]) .wrapper {\n background-color: var(--nuraly-select-disabled-background, var(--nuraly-color-background-disabled));\n border-color: var(--nuraly-select-disabled-border-color, var(--nuraly-color-border));\n color: var(--nuraly-select-disabled-text-color, var(--nuraly-color-text-disabled));\n cursor: not-allowed;\n }\n\n /* Size variants */\n :host([size='small']) .wrapper {\n height: var(--nuraly-select-small-height, var(--nuraly-select-local-small-height));\n min-height: var(--nuraly-select-small-height, var(--nuraly-select-local-small-height));\n font-size: var(--nuraly-select-small-font-size, var(--nuraly-select-local-small-font-size));\n }\n\n :host([size='small']) .select-trigger {\n padding: var(--nuraly-select-small-padding, var(--nuraly-select-local-small-padding));\n padding-right: calc(var(--nuraly-select-small-icon-size, var(--nuraly-select-local-small-icon-size)) + 20px);\n }\n\n :host([size='small']) .icons-container nr-icon {\n --nuraly-icon-width: var(--nuraly-select-small-icon-size, var(--nuraly-select-local-small-icon-size));\n }\n\n :host([size='small']) .option {\n padding: var(--nuraly-select-small-padding, var(--nuraly-select-local-small-padding));\n font-size: var(--nuraly-select-small-font-size, var(--nuraly-select-local-small-font-size));\n min-height: var(--nuraly-select-small-height, var(--nuraly-select-local-small-height));\n }\n\n :host([size='small']) .option-icon,\n :host([size='small']) .option nr-icon {\n --nuraly-icon-width: var(--nuraly-select-small-icon-size, var(--nuraly-select-local-small-icon-size));\n }\n\n :host([size='medium']) .wrapper {\n min-height: var(--nuraly-select-medium-height, var(--nuraly-select-local-medium-height));\n font-size: var(--nuraly-select-medium-font-size, var(--nuraly-select-local-medium-font-size));\n }\n\n :host([size='medium']) .select-trigger {\n padding: var(--nuraly-select-medium-padding, var(--nuraly-select-local-medium-padding));\n padding-right: calc(var(--nuraly-select-medium-icon-size, var(--nuraly-select-local-medium-icon-size)) + 20px);\n }\n\n :host([size='medium']) .icons-container nr-icon {\n --nuraly-icon-width: var(--nuraly-select-medium-icon-size, var(--nuraly-select-local-medium-icon-size));\n }\n\n :host([size='medium']) .option {\n padding: var(--nuraly-select-medium-padding, var(--nuraly-select-local-medium-padding));\n font-size: var(--nuraly-select-medium-font-size, var(--nuraly-select-local-medium-font-size));\n min-height: var(--nuraly-select-medium-height, var(--nuraly-select-local-medium-height));\n }\n\n :host([size='medium']) .option-icon,\n :host([size='medium']) .option nr-icon {\n --nuraly-icon-width: var(--nuraly-select-medium-icon-size, var(--nuraly-select-local-medium-icon-size));\n }\n\n :host([size='large']) .wrapper {\n min-height: var(--nuraly-select-large-height, var(--nuraly-select-local-large-height));\n font-size: var(--nuraly-select-large-font-size, var(--nuraly-select-local-large-font-size));\n }\n\n :host([size='large']) .select-trigger {\n padding: var(--nuraly-select-large-padding, var(--nuraly-select-local-large-padding));\n padding-right: calc(var(--nuraly-select-large-icon-size, var(--nuraly-select-local-large-icon-size)) + 20px);\n }\n\n :host([size='large']) .icons-container nr-icon {\n --nuraly-icon-width: var(--nuraly-select-large-icon-size, var(--nuraly-select-local-large-icon-size));\n }\n\n :host([size='large']) .option {\n padding: var(--nuraly-select-large-padding, var(--nuraly-select-local-large-padding));\n font-size: var(--nuraly-select-large-font-size, var(--nuraly-select-local-large-font-size));\n min-height: var(--nuraly-select-large-height, var(--nuraly-select-local-large-height));\n }\n\n :host([size='large']) .option-icon,\n :host([size='large']) .option nr-icon {\n --nuraly-icon-width: var(--nuraly-select-large-icon-size, var(--nuraly-select-local-large-icon-size));\n }\n\n /* Status variants */\n :host([status='error']) .wrapper {\n border-color: var(--nuraly-select-error-border-color, var(--nuraly-color-danger));\n }\n\n :host([status='warning']) .wrapper {\n border-color: var(--nuraly-select-warning-border-color, var(--nuraly-color-warning));\n }\n\n :host([status='success']) .wrapper {\n border-color: var(--nuraly-select-success-border-color, var(--nuraly-color-success));\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 /* Block (full width) */\n :host([block]) {\n width: 100%;\n }\n\n :host([block]) .wrapper {\n width: 100%;\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(--nuraly-select-width, fit-content);\n background-color: var(--nuraly-select-background, var(--nuraly-color-background-panel));\n border: var(--nuraly-select-border-width, var(--nuraly-select-local-border-width)) solid \n var(--nuraly-select-border-color, var(--nuraly-color-border));\n border-radius: var(--nuraly-select-border-radius, var(--nuraly-select-local-border-radius));\n transition: all var(--nuraly-select-transition-duration, var(--nuraly-select-local-transition-duration)) \n var(--nuraly-select-transition-timing, ease-in-out);\n cursor: pointer;\n outline: none;\n margin: var(--nuraly-select-wrapper-margin, 0);\n min-height: var(--nuraly-select-min-height, var(--nuraly-select-local-min-height));\n box-sizing: border-box;\n display: flex;\n align-items: center;\n /* Ensure dropdown can overflow the wrapper */\n overflow: visible;\n }\n\n .wrapper:hover:not(:disabled) {\n border-color: var(--nuraly-select-border-hover, var(--nuraly-color-primary));\n }\n\n .wrapper:focus,\n .wrapper:focus-within {\n border-color: var(--nuraly-select-border-focus, var(--nuraly-color-primary));\n box-shadow: 0 0 0 2px var(--nuraly-color-primary-light);\n }\n\n /* Select container */\n .select {\n display: flex;\n flex-direction: column;\n }\n\n /* Select trigger (main display area) */\n .select-trigger {\n display: flex;\n align-items: center;\n padding: var(--nuraly-select-padding-top, var(--nuraly-select-local-padding-top)) \n calc(var(--nuraly-select-icon-size, var(--nuraly-select-local-icon-size)) + 20px) \n var(--nuraly-select-padding-bottom, var(--nuraly-select-local-padding-bottom)) \n var(--nuraly-select-padding-left, var(--nuraly-select-local-padding-left));\n color: var(--nuraly-select-color, var(--nuraly-color-text));\n font-size: inherit;\n line-height: inherit;\n word-break: break-word;\n flex: 1;\n min-height: 0;\n flex-wrap: wrap;\n gap: var(--nuraly-select-tag-margin, var(--nuraly-select-local-tag-margin));\n box-sizing: border-box;\n }\n\n .select-trigger:empty:before {\n content: attr(data-placeholder);\n color: var(--nuraly-select-placeholder-color, var(--nuraly-color-text-secondary));\n font-size: var(--nuraly-select-placeholder-font-size, var(--nuraly-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(--nuraly-select-tag-background, var(--nuraly-color-background-active));\n color: var(--nuraly-select-tag-color, var(--nuraly-color-text));\n padding: var(--nuraly-select-tag-padding, var(--nuraly-select-local-tag-padding));\n border-radius: var(--nuraly-select-tag-border-radius, var(--nuraly-select-local-tag-border-radius));\n font-size: calc(var(--nuraly-select-font-size, var(--nuraly-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(--nuraly-select-tag-close-color, var(--nuraly-color-text-secondary));\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n width: var(--nuraly-select-icon-size, var(--nuraly-select-local-icon-size));\n height: var(--nuraly-select-icon-size, var(--nuraly-select-local-icon-size));\n border-radius: 50%;\n transition: color var(--nuraly-select-transition-duration, var(--nuraly-select-local-transition-duration));\n }\n\n .tag-close:hover {\n color: var(--nuraly-select-tag-close-hover-color, var(--nuraly-color-text));\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 nr-icon {\n --nuraly-icon-width: var(--nuraly-select-icon-size, var(--nuraly-select-local-icon-size));\n --nuraly-icon-color: var(--nuraly-color-select-icon, var(--nuraly-color-text-secondary));\n pointer-events: auto;\n cursor: pointer;\n transition: color var(--nuraly-select-transition-duration, var(--nuraly-select-local-transition-duration));\n }\n\n .icons-container nr-icon:hover {\n --nuraly-icon-color: var(--nuraly-color-select-icon-hover, var(--nuraly-color-text));\n }\n\n .arrow-icon {\n --nuraly-icon-width: var(--nuraly-select-arrow-icon-size, var(--nuraly-select-local-arrow-icon-size));\n transition: transform var(--nuraly-select-transition-duration, var(--nuraly-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 /* Fixed positioning to escape overflow containers */\n position: fixed;\n /* top/left will be set by controller */\n background-color: var(--nuraly-select-dropdown-background, var(--nuraly-color-background-panel));\n border: var(--nuraly-select-dropdown-border-width, var(--nuraly-select-border-width, var(--nuraly-select-local-border-width))) solid\n var(--nuraly-select-dropdown-border-color, var(--nuraly-color-border));\n border-radius: var(--nuraly-select-dropdown-border-radius, var(--nuraly-select-border-radius, var(--nuraly-select-local-border-radius)));\n box-shadow: var(--nuraly-select-dropdown-shadow, 0 6px 16px 0 rgba(0, 0, 0, 0.08));\n z-index: var(--nuraly-select-dropdown-z-index, var(--nuraly-select-local-dropdown-z-index));\n max-height: var(--nuraly-select-dropdown-max-height, var(--nuraly-select-local-dropdown-max-height, auto));\n overflow-y: auto;\n overflow-x: hidden;\n display: none;\n flex-direction: column;\n animation: dropdown-enter var(--nuraly-select-dropdown-animation-duration, var(--nuraly-select-local-dropdown-animation-duration)) ease-out;\n /* Ensure proper containment and exact wrapper width */\n box-sizing: border-box;\n /* Allow overriding width via either of these custom props */\n width: var(\n --nuraly-select-dropdown-width,\n var(--select-dropdown-width, var(--nuraly-select-local-dropdown-width))\n );\n /* Create new stacking context to prevent layering issues */\n isolation: isolate;\n /* Ensure solid background to prevent visual bleed-through */\n backdrop-filter: none;\n -webkit-backdrop-filter: none;\n /* Prevent pointer events when hidden */\n pointer-events: none;\n }\n\n :host([show]) .options {\n pointer-events: auto;\n }\n\n .options.placement-top {\n animation: dropdown-enter-top var(--nuraly-select-dropdown-animation-duration, var(--nuraly-select-local-dropdown-animation-duration)) ease-out;\n }\n\n .options.placement-bottom {\n animation: dropdown-enter var(--nuraly-select-dropdown-animation-duration, var(--nuraly-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 /* Search container - sticky at top of dropdown */\n .search-container {\n position: sticky;\n top: 0;\n z-index: 10;\n background-color: var(--nuraly-select-dropdown-background, var(--nuraly-color-background-panel));\n border-bottom: var(--nuraly-select-border-width, var(--nuraly-select-local-border-width)) solid \n var(--nuraly-select-dropdown-border-color, var(--nuraly-color-border));\n padding: 8px;\n margin: 0;\n /* Ensure it stays above options during scroll */\n backdrop-filter: blur(8px);\n -webkit-backdrop-filter: blur(8px);\n /* Ensure proper stacking and smooth scrolling */\n will-change: transform;\n transform: translateZ(0);\n }\n\n /* Search input styling */\n .search-container .search-input {\n width: 100%;\n max-width: var(--nuraly-select-input-container-max-width, var(--nuraly-select-local-input-container-max-width));\n --nuraly-input-border-radius: var(--nuraly-select-border-radius, var(--nuraly-select-local-border-radius));\n --nuraly-input-background-color: var(--nuraly-select-background, var(--nuraly-color-background-panel));\n --nuraly-input-border-color: var(--nuraly-select-border-color, var(--nuraly-color-border));\n --nuraly-input-text-color: var(--nuraly-select-color, var(--nuraly-color-text));\n --nuraly-input-placeholder-color: var(--nuraly-select-placeholder-color, var(--nuraly-color-text-secondary));\n }\n\n /* Search icon in the search input */\n .search-container .search-icon {\n --nuraly-icon-color: var(--nuraly-color-select-icon, var(--nuraly-color-text-secondary));\n }\n\n /* Options list container - ensure proper scroll behavior with sticky search */\n .options:has(.search-container) {\n /* Add small padding-top when search is present to ensure proper separation */\n padding-top: 0;\n }\n\n /* Option items */\n .option {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: var(--nuraly-select-option-padding, 8px 12px);\n min-height: var(--nuraly-select-option-min-height, auto);\n color: var(--nuraly-select-option-color, var(--nuraly-color-text));\n font-size: var(--nuraly-select-option-font-size, var(--nuraly-select-local-option-font-size));\n cursor: pointer;\n transition: background-color var(--nuraly-select-transition-duration, var(--nuraly-select-local-transition-duration));\n position: relative;\n }\n\n /* First option after search container should have no extra margin */\n .search-container + .option {\n margin-top: 0;\n }\n\n .option:hover {\n background-color: var(--nuraly-select-option-hover-background, var(--nuraly-color-background-hover));\n }\n\n .option.selected {\n background-color: var(--nuraly-select-option-selected-background, var(--nuraly-color-primary-light));\n color: var(--nuraly-select-option-selected-color, var(--nuraly-color-primary));\n }\n\n .option.focused {\n background-color: var(--nuraly-select-option-hover-background, var(--nuraly-color-background-hover));\n outline: 2px solid var(--nuraly-select-border-focus, var(--nuraly-color-primary));\n outline-offset: -2px;\n }\n\n .option.disabled {\n opacity: var(--nuraly-select-disabled-opacity, var(--nuraly-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 --nuraly-icon-width: var(--nuraly-select-icon-size, var(--nuraly-select-local-icon-size));\n --nuraly-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(--nuraly-select-option-font-size, var(--nuraly-select-local-option-font-size)) - 1px);\n opacity: 0.7;\n margin-top: 2px;\n }\n\n .check-icon {\n --nuraly-icon-width: var(--nuraly-select-icon-size, var(--nuraly-select-local-icon-size));\n --nuraly-icon-color: var(--nuraly-select-option-selected-color, var(--nuraly-color-primary));\n }\n\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, var(--nuraly-color-text-secondary));\n font-size: var(--nuraly-select-option-font-size, var(--nuraly-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 --nuraly-icon-width: 24px;\n --nuraly-icon-color: var(--select-no-options-icon-color, var(--nuraly-color-border));\n opacity: 0.8;\n }\n\n .no-options-text {\n font-size: var(--nuraly-select-option-font-size, var(--nuraly-select-local-option-font-size));\n color: var(--select-no-options-color, var(--nuraly-color-text-secondary));\n line-height: 1.4;\n }\n\n /* Validation message */\n .validation-message {\n display: block;\n margin-top: var(--nuraly-select-message-margin-top, var(--nuraly-select-local-message-margin-top));\n font-size: var(--nuraly-select-message-font-size, var(--nuraly-select-local-message-font-size));\n color: var(--nuraly-select-error-message-color, var(--nuraly-color-danger));\n }\n\n .validation-message.warning {\n color: var(--nuraly-select-warning-message-color, var(--nuraly-color-warning));\n }\n\n .validation-message.success {\n color: var(--nuraly-select-success-message-color, var(--nuraly-color-success));\n }\n\n /* Slotted content styles */\n ::slotted([slot='label']) {\n display: block;\n margin-bottom: 4px;\n font-weight: 500;\n color: var(--nuraly-select-color, var(--nuraly-color-text));\n }\n\n ::slotted([slot='helper-text']) {\n display: block;\n margin-top: var(--nuraly-select-message-margin-top, var(--nuraly-select-local-message-margin-top));\n font-size: var(--nuraly-select-message-font-size, var(--nuraly-select-local-message-font-size));\n color: var(--nuraly-select-placeholder-color, var(--nuraly-color-text-secondary));\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.types.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"select.types.js","sourceRoot":"","sources":["
|
|
1
|
+
{"version":3,"file":"select.types.js","sourceRoot":"","sources":["../../../../src/components/select/select.types.ts"],"names":[],"mappings":"AAkDA;;GAEG;AACH,MAAM,CAAN,IAAY,UAKX;AALD,WAAY,UAAU;IACpB,iCAAmB,CAAA;IACnB,+BAAiB,CAAA;IACjB,+BAAiB,CAAA;IACjB,2BAAa,CAAA;AACf,CAAC,EALW,UAAU,KAAV,UAAU,QAKrB;AAED;;GAEG;AACH,MAAM,CAAN,IAAY,YAKX;AALD,WAAY,YAAY;IACtB,mCAAmB,CAAA;IACnB,mCAAmB,CAAA;IACnB,+BAAe,CAAA;IACf,mCAAmB,CAAA;AACrB,CAAC,EALW,YAAY,KAAZ,YAAY,QAKvB;AAED;;GAEG;AACH,MAAM,CAAN,IAAY,UAIX;AAJD,WAAY,UAAU;IACpB,6BAAe,CAAA;IACf,+BAAiB,CAAA;IACjB,6BAAe,CAAA;AACjB,CAAC,EAJW,UAAU,KAAV,UAAU,QAIrB;AACD,MAAM,CAAN,IAAY,UAIX;AAJD,WAAY,UAAU;IACpB,6BAAe,CAAA;IACf,+BAAiB,CAAA;IACjB,6BAAe,CAAA;AACjB,CAAC,EAJW,UAAU,KAAV,UAAU,QAIrB;AAED;;GAEG;AACH,MAAM,CAAN,IAAY,eAGX;AAHD,WAAY,eAAe;IACzB,4CAAyB,CAAA;IACzB,wCAAqB,CAAA;AACvB,CAAC,EAHW,eAAe,KAAf,eAAe,QAG1B;AAED;;GAEG;AACH,MAAM,CAAN,IAAY,aAKX;AALD,WAAY,aAAa;IACvB,oCAAmB,CAAA;IACnB,gCAAe,CAAA;IACf,oCAAmB,CAAA;IACnB,0CAAyB,CAAA;AAC3B,CAAC,EALW,aAAa,KAAb,aAAa,QAKxB;AAED;;GAEG;AACH,MAAM,CAAN,IAAY,iBAIX;AAJD,WAAY,iBAAiB;IAC3B,sCAAiB,CAAA;IACjB,gCAAW,CAAA;IACX,kCAAa,CAAA;AACf,CAAC,EAJW,iBAAiB,KAAjB,iBAAiB,QAI5B;AAED;;GAEG;AACH,MAAM,CAAN,IAAY,UAKX;AALD,WAAY,UAAU;IACpB,2BAAa,CAAA;IACb,wCAA0B,CAAA;IAC1B,mCAAqB,CAAA;IACrB,6BAAe,CAAA;AACjB,CAAC,EALW,UAAU,KAAV,UAAU,QAKrB","sourcesContent":["/**\n * Configuration interface for select options with comprehensive properties\n */\nexport interface SelectOption {\n /** Unique value for the option */\n value: string;\n \n /** Display text for the option */\n label: string;\n \n /** Optional icon name to display with the option */\n icon?: string;\n \n /** Whether the option is disabled and cannot be selected */\n disabled?: boolean;\n \n /** Validation state of the option */\n state?: SelectState;\n \n /** Optional message to display with the option */\n message?: string;\n \n /** HTML content to render instead of plain text label */\n htmlContent?: string;\n \n /** Custom CSS class to apply to the option */\n className?: string;\n \n /** Inline CSS styles for the option */\n style?: string;\n \n /** Tooltip text shown on hover */\n title?: string;\n \n /** Custom HTML ID for the option */\n id?: string;\n \n /** Group name for option grouping */\n group?: string;\n \n /** Additional descriptive text below the label */\n description?: string;\n \n}\n\n/**\n * Select state for validation and visual feedback\n */\nexport type SelectState = 'error' | 'warning' | 'success';\n\n/**\n * Select component type variants\n */\nexport enum SelectType {\n Default = 'default',\n Inline = 'inline',\n Button = 'button',\n Slot = 'slot',\n}\n\n/**\n * Select status/state enum\n */\nexport enum SelectStatus {\n Default = 'default',\n Warning = 'warning',\n Error = 'error',\n Success = 'success',\n}\n\n/**\n * Select component size variants\n */\nexport enum SelectSize {\n Small = 'small',\n Medium = 'medium',\n Large = 'large',\n}\nexport enum OptionSize {\n Small = 'small',\n Medium = 'medium',\n Large = 'large',\n}\n\n/**\n * Select component direction for layout\n */\nexport enum SelectDirection {\n Horizontal = 'horizontal',\n Vertical = 'vertical',\n}\n\n/**\n * Select component variant styles\n */\nexport enum SelectVariant {\n Default = 'default',\n Solid = 'solid',\n Outline = 'outline',\n Borderless = 'borderless',\n}\n\n/**\n * Dropdown placement options\n */\nexport enum DropdownPlacement {\n Bottom = 'bottom',\n Top = 'top',\n Auto = 'auto',\n}\n\n/**\n * Search mode for filterable selects\n */\nexport enum SearchMode {\n None = 'none',\n StartsWith = 'starts-with',\n Contains = 'contains',\n Fuzzy = 'fuzzy',\n}\n"]}
|