@empathyco/x-components 3.0.0-alpha.195 → 3.0.0-alpha.197

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (34) hide show
  1. package/CHANGELOG.md +22 -0
  2. package/core/index.js.map +1 -1
  3. package/design-system/default-theme.css +257 -244
  4. package/design-system/full-theme.css +750 -738
  5. package/design-system/input-default.css +14 -1
  6. package/design-system/input-group-default.css +1 -1
  7. package/docs/API-reference/api/x-components.md +1 -0
  8. package/docs/API-reference/api/x-components.searchinputplaceholder.animateonlyonhover.md +13 -0
  9. package/docs/API-reference/api/x-components.searchinputplaceholder.animation.md +13 -0
  10. package/docs/API-reference/api/x-components.searchinputplaceholder.animationintervalms.md +13 -0
  11. package/docs/API-reference/api/x-components.searchinputplaceholder.beforedestroy.md +15 -0
  12. package/docs/API-reference/api/x-components.searchinputplaceholder.md +34 -0
  13. package/docs/API-reference/api/x-components.searchinputplaceholder.messages.md +13 -0
  14. package/docs/API-reference/api/x-components.searchinputplaceholder.onuserblurredsearchbox.md +15 -0
  15. package/docs/API-reference/api/x-components.searchinputplaceholder.onuserfocusedsearchbox.md +15 -0
  16. package/docs/API-reference/api/x-components.searchinputplaceholder.onuserhoveredinsearchbox.md +15 -0
  17. package/docs/API-reference/api/x-components.searchinputplaceholder.onuserhoveredoutsearchbox.md +15 -0
  18. package/docs/API-reference/components/search-box/x-components.search-input-placeholder.md +102 -0
  19. package/js/index.js +1 -0
  20. package/js/index.js.map +1 -1
  21. package/js/x-modules/search-box/components/search-input-placeholder.vue.js +66 -0
  22. package/js/x-modules/search-box/components/search-input-placeholder.vue.js.map +1 -0
  23. package/js/x-modules/search-box/components/search-input-placeholder.vue_rollup-plugin-vue_script.vue.js +309 -0
  24. package/js/x-modules/search-box/components/search-input-placeholder.vue_rollup-plugin-vue_script.vue.js.map +1 -0
  25. package/js/x-modules/search-box/components/search-input-placeholder.vue_rollup-plugin-vue_styles.0.vue.js +16 -0
  26. package/js/x-modules/search-box/components/search-input-placeholder.vue_rollup-plugin-vue_styles.0.vue.js.map +1 -0
  27. package/package.json +3 -3
  28. package/report/x-components.api.json +288 -0
  29. package/report/x-components.api.md +44 -0
  30. package/search-box/index.js +1 -0
  31. package/types/x-modules/search-box/components/index.d.ts +1 -0
  32. package/types/x-modules/search-box/components/index.d.ts.map +1 -1
  33. package/types/x-modules/search-box/components/search-input-placeholder.vue.d.ts +126 -0
  34. package/types/x-modules/search-box/components/search-input-placeholder.vue.d.ts.map +1 -0
package/CHANGELOG.md CHANGED
@@ -3,6 +3,28 @@
3
3
  All notable changes to this project will be documented in this file. See
4
4
  [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
+ ## [3.0.0-alpha.197](https://github.com/empathyco/x/compare/@empathyco/x-components@3.0.0-alpha.196...@empathyco/x-components@3.0.0-alpha.197) (2022-10-19)
7
+
8
+ **Note:** Version bump only for package @empathyco/x-components
9
+
10
+ # Change Log
11
+
12
+ All notable changes to this project will be documented in this file. See
13
+ [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
14
+
15
+ ## [3.0.0-alpha.196](https://github.com/empathyco/x/compare/@empathyco/x-components@3.0.0-alpha.195...@empathyco/x-components@3.0.0-alpha.196) (2022-10-19)
16
+
17
+ ### Features
18
+
19
+ - **search-box:** add `SearchInputPlaceholder` component (#771)
20
+ ([a2e73e3](https://github.com/empathyco/x/commit/a2e73e3895c5454898fbc7ddc6d2202e03448fff)),
21
+ closes [EX-7178](https://searchbroker.atlassian.net/browse/EX-7178)
22
+
23
+ # Change Log
24
+
25
+ All notable changes to this project will be documented in this file. See
26
+ [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
27
+
6
28
  ## [3.0.0-alpha.195](https://github.com/empathyco/x/compare/@empathyco/x-components@3.0.0-alpha.194...@empathyco/x-components@3.0.0-alpha.195) (2022-10-19)
7
29
 
8
30
  **Note:** Version bump only for package @empathyco/x-components
package/core/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
package/design-system/default-theme.css CHANGED
@@ -238,248 +238,6 @@
238
238
  --x-string-overflow-dropdown-toggle-default: hidden;
239
239
  --x-string-overflow-dropdown-list-default: hidden;
240
240
  }
241
-
242
- .x-dropdown {
243
- box-sizing: border-box;
244
- position: relative;
245
- font-size: var(--x-size-font-dropdown-default);
246
- font-family: var(--x-font-family-dropdown-default);
247
- font-weight: var(--x-number-font-weight-dropdown-default);
248
- line-height: var(--x-size-line-height-dropdown-default);
249
- }
250
- [dir="ltr"] .x-dropdown__toggle {
251
- border-right-width: var(--x-size-border-width-right-dropdown-toggle-default);
252
- }
253
- [dir="rtl"] .x-dropdown__toggle {
254
- border-left-width: var(--x-size-border-width-right-dropdown-toggle-default);
255
- }
256
- [dir="ltr"] .x-dropdown__toggle {
257
- border-left-width: var(--x-size-border-width-left-dropdown-toggle-default);
258
- }
259
- [dir="rtl"] .x-dropdown__toggle {
260
- border-right-width: var(--x-size-border-width-left-dropdown-toggle-default);
261
- }
262
- [dir="ltr"] .x-dropdown__toggle {
263
- padding-right: var(--x-size-padding-right-dropdown-toggle-default);
264
- }
265
- [dir="rtl"] .x-dropdown__toggle {
266
- padding-left: var(--x-size-padding-right-dropdown-toggle-default);
267
- }
268
- [dir="ltr"] .x-dropdown__toggle {
269
- padding-left: var(--x-size-padding-left-dropdown-toggle-default);
270
- }
271
- [dir="rtl"] .x-dropdown__toggle {
272
- padding-right: var(--x-size-padding-left-dropdown-toggle-default);
273
- }
274
- .x-dropdown__toggle {
275
- border-style: solid;
276
- border-top-width: var(--x-size-border-width-top-dropdown-toggle-default);
277
- border-bottom-width: var(--x-size-border-width-bottom-dropdown-toggle-default);
278
- border-radius: var(--x-size-border-radius-top-left-dropdown-default) var(--x-size-border-radius-top-right-dropdown-default) var(--x-size-border-radius-bottom-right-dropdown-default) var(--x-size-border-radius-bottom-left-dropdown-default);
279
- background: var(--x-color-background-dropdown-toggle-default);
280
- color: var(--x-color-text-dropdown-toggle-default);
281
- border-color: var(--x-color-border-dropdown-toggle-default);
282
- padding-top: var(--x-size-padding-top-dropdown-toggle-default);
283
- padding-bottom: var(--x-size-padding-bottom-dropdown-toggle-default);
284
- gap: var(--x-size-gap-dropdown-item-default);
285
- width: var(--x-size-width-dropdown-toggle-default);
286
- display: flex;
287
- flex-flow: row nowrap;
288
- margin: 0;
289
- cursor: pointer;
290
- overflow: var(--x-string-overflow-dropdown-toggle-default);
291
- box-shadow: var(--x-string-box-shadow-dropdown-default);
292
- }
293
- @media not all and (-webkit-min-device-pixel-ratio: 0), not all and (min-resolution: 0.001dpcm) {
294
- .x-dropdown__toggle {
295
- gap: 0;
296
- }
297
- .x-dropdown__toggle > *:not(:last-child) {
298
- margin-right: var(--x-size-gap-dropdown-item-default);
299
- }
300
- }
301
- [dir="ltr"] .x-dropdown__toggle * + .x-icon:last-child {
302
- margin-left: auto;
303
- }
304
- [dir="rtl"] .x-dropdown__toggle * + .x-icon:last-child {
305
- margin-right: auto;
306
- }
307
- .x-dropdown__toggle-selected-value {
308
- color: var(--x-color-text-dropdown-toggle-default-selected);
309
- }
310
- [dir="ltr"] .x-dropdown__items-list {
311
- border-right-width: var(--x-size-border-width-right-dropdown-list-default);
312
- }
313
- [dir="rtl"] .x-dropdown__items-list {
314
- border-left-width: var(--x-size-border-width-right-dropdown-list-default);
315
- }
316
- [dir="ltr"] .x-dropdown__items-list {
317
- border-left-width: var(--x-size-border-width-left-dropdown-list-default);
318
- }
319
- [dir="rtl"] .x-dropdown__items-list {
320
- border-right-width: var(--x-size-border-width-left-dropdown-list-default);
321
- }
322
- .x-dropdown__items-list {
323
- background: var(--x-color-background-dropdown-default);
324
- box-sizing: border-box;
325
- min-width: var(--x-size-min-width-dropdown-list-default);
326
- position: absolute;
327
- top: calc(100% + var(--x-size-gap-dropdown-default));
328
- overflow: var(--x-string-overflow-dropdown-list-default);
329
- border-color: var(--x-color-border-dropdown-list-default);
330
- border-top-width: var(--x-size-border-width-top-dropdown-list-default);
331
- border-bottom-width: var(--x-size-border-width-bottom-dropdown-list-default);
332
- border-radius: var(--x-size-border-radius-top-left-dropdown-default) var(--x-size-border-radius-top-right-dropdown-default) var(--x-size-border-radius-bottom-right-dropdown-default) var(--x-size-border-radius-bottom-left-dropdown-default);
333
- border-style: solid;
334
- margin: 0;
335
- padding: 0;
336
- box-shadow: var(--x-string-box-shadow-dropdown-default);
337
- z-index: 1;
338
- }
339
- .x-dropdown__items-list:before, .x-dropdown__items-list:after {
340
- content: "";
341
- display: block;
342
- height: var(--x-size-padding-vertical-dropdown-list-default);
343
- }
344
- [dir="ltr"] .x-dropdown__item {
345
- padding-left: var(--x-size-padding-left-dropdown-item-default);
346
- }
347
- [dir="rtl"] .x-dropdown__item {
348
- padding-right: var(--x-size-padding-left-dropdown-item-default);
349
- }
350
- [dir="ltr"] .x-dropdown__item {
351
- padding-right: var(--x-size-padding-right-dropdown-item-default);
352
- }
353
- [dir="rtl"] .x-dropdown__item {
354
- padding-left: var(--x-size-padding-right-dropdown-item-default);
355
- }
356
- .x-dropdown__item {
357
- background: var(--x-color-background-dropdown-default);
358
- padding-top: var(--x-size-padding-top-dropdown-item-default);
359
- padding-bottom: var(--x-size-padding-bottom-dropdown-item-default);
360
- gap: var(--x-size-gap-dropdown-item-default);
361
- border: none;
362
- display: flex;
363
- flex-flow: row nowrap;
364
- justify-content: flex-start;
365
- text-align: left;
366
- width: 100%;
367
- margin: 0;
368
- white-space: nowrap;
369
- cursor: pointer;
370
- }
371
- @media not all and (-webkit-min-device-pixel-ratio: 0), not all and (min-resolution: 0.001dpcm) {
372
- .x-dropdown__item {
373
- gap: 0;
374
- }
375
- .x-dropdown__item > *:not(:last-child) {
376
- margin-right: var(--x-size-gap-dropdown-item-default);
377
- }
378
- }
379
- .x-dropdown__item:hover, .x-dropdown__item--is-highlighted {
380
- color: var(--x-color-text-dropdown-item-default-hover);
381
- background-color: var(--x-color-background-dropdown-item-default-hover);
382
- font-weight: var(--x-number-font-weight-dropdown-item-default-hover);
383
- -webkit-text-decoration: var(--x-font-decoration-dropdown-item-default-hover);
384
- text-decoration: var(--x-font-decoration-dropdown-item-default-hover);
385
- }
386
- .x-dropdown__item--is-selected {
387
- color: var(--x-color-text-dropdown-item-default-selected);
388
- background-color: var(--x-color-background-dropdown-item-default-selected);
389
- font-weight: var(--x-number-font-weight-dropdown-item-default-selected);
390
- -webkit-text-decoration: var(--x-font-decoration-dropdown-item-default-selected);
391
- text-decoration: var(--x-font-decoration-dropdown-item-default-selected);
392
- }
393
- [dir="ltr"] .x-dropdown__item * + .x-icon:last-child {
394
- margin-left: auto;
395
- }
396
- [dir="rtl"] .x-dropdown__item * + .x-icon:last-child {
397
- margin-right: auto;
398
- }
399
- .x-dropdown--is-open {
400
- --x-color-background-dropdown-toggle-default: var(
401
- --x-color-background-dropdown-toggle-open-default
402
- );
403
- }
404
- [dir="ltr"] .x-dropdown--right .x-dropdown__items-list {
405
- right: 0;
406
- }
407
- [dir="rtl"] .x-dropdown--right .x-dropdown__items-list {
408
- left: 0;
409
- }
410
- :root {
411
- --x-size-border-radius-dropdown-default: var(--x-size-border-radius-base-none);
412
- --x-size-border-radius-top-left-dropdown-default: var(--x-size-border-radius-dropdown-default);
413
- --x-size-border-radius-top-right-dropdown-default: var(--x-size-border-radius-dropdown-default);
414
- --x-size-border-radius-bottom-right-dropdown-default: var(
415
- --x-size-border-radius-dropdown-default
416
- );
417
- --x-size-border-radius-bottom-left-dropdown-default: var(--x-size-border-radius-dropdown-default);
418
- --x-size-border-width-dropdown-toggle-default: var(--x-size-border-width-base);
419
- --x-size-border-width-top-dropdown-toggle-default: var(
420
- --x-size-border-width-dropdown-toggle-default
421
- );
422
- --x-size-border-width-right-dropdown-toggle-default: var(
423
- --x-size-border-width-dropdown-toggle-default
424
- );
425
- --x-size-border-width-bottom-dropdown-toggle-default: var(
426
- --x-size-border-width-dropdown-toggle-default
427
- );
428
- --x-size-border-width-left-dropdown-toggle-default: var(
429
- --x-size-border-width-dropdown-toggle-default
430
- );
431
- --x-size-border-width-dropdown-list-default: var(--x-size-border-width-base);
432
- --x-size-border-width-top-dropdown-list-default: 0;
433
- --x-size-border-width-right-dropdown-list-default: var(
434
- --x-size-border-width-dropdown-list-default
435
- );
436
- --x-size-border-width-bottom-dropdown-list-default: var(
437
- --x-size-border-width-dropdown-list-default
438
- );
439
- --x-size-border-width-left-dropdown-list-default: var(
440
- --x-size-border-width-dropdown-list-default
441
- );
442
- --x-color-border-dropdown-toggle-default: var(--x-color-base-neutral-95);
443
- --x-color-border-dropdown-list-default: var(--x-color-border-dropdown-toggle-default);
444
- --x-color-background-dropdown-default: var(--x-color-base-neutral-100);
445
- --x-color-background-dropdown-toggle-default: var(--x-color-base-neutral-100);
446
- --x-color-background-dropdown-toggle-open-default: var(
447
- --x-color-background-dropdown-toggle-default
448
- );
449
- --x-color-background-dropdown-item-default-selected: var(--x-color-base-neutral-95);
450
- --x-color-background-dropdown-item-default-hover: var(--x-color-base-neutral-95);
451
- --x-color-text-dropdown-default: var(--x-color-text-default);
452
- --x-color-text-dropdown-toggle-default: var(--x-color-text-dropdown-default);
453
- --x-color-text-dropdown-toggle-default-selected: var(--x-color-base-neutral-35);
454
- --x-color-text-dropdown-item-default-hover: var(--x-color-base-neutral-35);
455
- --x-color-text-dropdown-item-default-selected: var(--x-color-text-default);
456
- --x-font-family-dropdown-default: var(--x-font-family-text);
457
- --x-size-font-dropdown-default: var(--x-size-font-text);
458
- --x-size-line-height-dropdown-default: var(--x-size-line-height-text);
459
- --x-number-font-weight-dropdown-default: var(--x-number-font-weight-base-regular);
460
- --x-number-font-weight-dropdown-item-default-hover: var(--x-number-font-weight-base-bold);
461
- --x-number-font-weight-dropdown-item-default-selected: var(--x-number-font-weight-base-regular);
462
- --x-font-decoration-dropdown-item-default-hover: none;
463
- --x-font-decoration-dropdown-item-default-selected: none;
464
- --x-size-width-dropdown-toggle-default: 100%;
465
- --x-size-min-width-dropdown-list-default: 100%;
466
- --x-size-gap-dropdown-default: 0;
467
- --x-size-padding-top-dropdown-toggle-default: var(--x-size-padding-top-dropdown-item-default);
468
- --x-size-padding-right-dropdown-toggle-default: var(--x-size-padding-right-dropdown-item-default);
469
- --x-size-padding-bottom-dropdown-toggle-default: var(
470
- --x-size-padding-bottom-dropdown-item-default
471
- );
472
- --x-size-padding-left-dropdown-toggle-default: var(--x-size-padding-left-dropdown-item-default);
473
- --x-size-padding-vertical-dropdown-list-default: 0;
474
- --x-size-padding-top-dropdown-item-default: var(--x-size-base-04);
475
- --x-size-padding-right-dropdown-item-default: var(--x-size-base-05);
476
- --x-size-padding-bottom-dropdown-item-default: var(--x-size-base-04);
477
- --x-size-padding-left-dropdown-item-default: var(--x-size-base-05);
478
- --x-size-gap-dropdown-item-default: var(--x-size-base-03);
479
- --x-string-box-shadow-dropdown-default: none;
480
- --x-string-overflow-dropdown-toggle-default: hidden;
481
- --x-string-overflow-dropdown-list-default: hidden;
482
- }
483
241
  :root {
484
242
  --x-color-background-facet-default: transparent;
485
243
  --x-color-border-facet-default: var(--x-color-background-facet-default);
@@ -982,7 +740,7 @@
982
740
  min-width: 0;
983
741
  border: none;
984
742
  }
985
- .x-input-group > .x-input::placeholder {
743
+ .x-input-group > .x-input > .x-input-placeholder, .x-input-group > .x-input::placeholder {
986
744
  color: var(--x-color-text-input-group-placeholder-default);
987
745
  font-family: var(--x-font-family-input-group-placeholder-default);
988
746
  font-size: var(--x-size-font-input-group-placeholder-default);
@@ -1133,6 +891,9 @@
1133
891
  }
1134
892
 
1135
893
  .x-input {
894
+ position: relative;
895
+ display: flex;
896
+ overflow: hidden;
1136
897
  box-sizing: border-box;
1137
898
  margin: 0;
1138
899
  min-width: 0;
@@ -1159,7 +920,17 @@
1159
920
  .x-input:focus {
1160
921
  border-color: var(--x-color-border-input-default-focus);
1161
922
  }
1162
- .x-input::placeholder {
923
+ .x-input > .x-input-placeholder {
924
+ position: absolute;
925
+ height: 100%;
926
+ }
927
+ .x-input > .x-input {
928
+ background: none;
929
+ border: none;
930
+ padding: 0;
931
+ flex: 1 1 auto;
932
+ }
933
+ .x-input > .x-input-placeholder, .x-input::placeholder {
1163
934
  color: var(--x-color-text-input-placeholder-default);
1164
935
  font-family: var(--x-font-family-input-placeholder-default);
1165
936
  font-size: var(--x-size-font-input-placeholder-default);
@@ -2902,4 +2673,246 @@
2902
2673
  --x-size-line-height-base-s: 16px;
2903
2674
  --x-size-line-height-base-m: 24px;
2904
2675
  --x-size-line-height-base-l: 32px;
2676
+ }
2677
+ :root {
2678
+ --x-size-border-radius-dropdown-default: var(--x-size-border-radius-base-none);
2679
+ --x-size-border-radius-top-left-dropdown-default: var(--x-size-border-radius-dropdown-default);
2680
+ --x-size-border-radius-top-right-dropdown-default: var(--x-size-border-radius-dropdown-default);
2681
+ --x-size-border-radius-bottom-right-dropdown-default: var(
2682
+ --x-size-border-radius-dropdown-default
2683
+ );
2684
+ --x-size-border-radius-bottom-left-dropdown-default: var(--x-size-border-radius-dropdown-default);
2685
+ --x-size-border-width-dropdown-toggle-default: var(--x-size-border-width-base);
2686
+ --x-size-border-width-top-dropdown-toggle-default: var(
2687
+ --x-size-border-width-dropdown-toggle-default
2688
+ );
2689
+ --x-size-border-width-right-dropdown-toggle-default: var(
2690
+ --x-size-border-width-dropdown-toggle-default
2691
+ );
2692
+ --x-size-border-width-bottom-dropdown-toggle-default: var(
2693
+ --x-size-border-width-dropdown-toggle-default
2694
+ );
2695
+ --x-size-border-width-left-dropdown-toggle-default: var(
2696
+ --x-size-border-width-dropdown-toggle-default
2697
+ );
2698
+ --x-size-border-width-dropdown-list-default: var(--x-size-border-width-base);
2699
+ --x-size-border-width-top-dropdown-list-default: 0;
2700
+ --x-size-border-width-right-dropdown-list-default: var(
2701
+ --x-size-border-width-dropdown-list-default
2702
+ );
2703
+ --x-size-border-width-bottom-dropdown-list-default: var(
2704
+ --x-size-border-width-dropdown-list-default
2705
+ );
2706
+ --x-size-border-width-left-dropdown-list-default: var(
2707
+ --x-size-border-width-dropdown-list-default
2708
+ );
2709
+ --x-color-border-dropdown-toggle-default: var(--x-color-base-neutral-95);
2710
+ --x-color-border-dropdown-list-default: var(--x-color-border-dropdown-toggle-default);
2711
+ --x-color-background-dropdown-default: var(--x-color-base-neutral-100);
2712
+ --x-color-background-dropdown-toggle-default: var(--x-color-base-neutral-100);
2713
+ --x-color-background-dropdown-toggle-open-default: var(
2714
+ --x-color-background-dropdown-toggle-default
2715
+ );
2716
+ --x-color-background-dropdown-item-default-selected: var(--x-color-base-neutral-95);
2717
+ --x-color-background-dropdown-item-default-hover: var(--x-color-base-neutral-95);
2718
+ --x-color-text-dropdown-default: var(--x-color-text-default);
2719
+ --x-color-text-dropdown-toggle-default: var(--x-color-text-dropdown-default);
2720
+ --x-color-text-dropdown-toggle-default-selected: var(--x-color-base-neutral-35);
2721
+ --x-color-text-dropdown-item-default-hover: var(--x-color-base-neutral-35);
2722
+ --x-color-text-dropdown-item-default-selected: var(--x-color-text-default);
2723
+ --x-font-family-dropdown-default: var(--x-font-family-text);
2724
+ --x-size-font-dropdown-default: var(--x-size-font-text);
2725
+ --x-size-line-height-dropdown-default: var(--x-size-line-height-text);
2726
+ --x-number-font-weight-dropdown-default: var(--x-number-font-weight-base-regular);
2727
+ --x-number-font-weight-dropdown-item-default-hover: var(--x-number-font-weight-base-bold);
2728
+ --x-number-font-weight-dropdown-item-default-selected: var(--x-number-font-weight-base-regular);
2729
+ --x-font-decoration-dropdown-item-default-hover: none;
2730
+ --x-font-decoration-dropdown-item-default-selected: none;
2731
+ --x-size-width-dropdown-toggle-default: 100%;
2732
+ --x-size-min-width-dropdown-list-default: 100%;
2733
+ --x-size-gap-dropdown-default: 0;
2734
+ --x-size-padding-top-dropdown-toggle-default: var(--x-size-padding-top-dropdown-item-default);
2735
+ --x-size-padding-right-dropdown-toggle-default: var(--x-size-padding-right-dropdown-item-default);
2736
+ --x-size-padding-bottom-dropdown-toggle-default: var(
2737
+ --x-size-padding-bottom-dropdown-item-default
2738
+ );
2739
+ --x-size-padding-left-dropdown-toggle-default: var(--x-size-padding-left-dropdown-item-default);
2740
+ --x-size-padding-vertical-dropdown-list-default: 0;
2741
+ --x-size-padding-top-dropdown-item-default: var(--x-size-base-04);
2742
+ --x-size-padding-right-dropdown-item-default: var(--x-size-base-05);
2743
+ --x-size-padding-bottom-dropdown-item-default: var(--x-size-base-04);
2744
+ --x-size-padding-left-dropdown-item-default: var(--x-size-base-05);
2745
+ --x-size-gap-dropdown-item-default: var(--x-size-base-03);
2746
+ --x-string-box-shadow-dropdown-default: none;
2747
+ --x-string-overflow-dropdown-toggle-default: hidden;
2748
+ --x-string-overflow-dropdown-list-default: hidden;
2749
+ }
2750
+
2751
+ .x-dropdown {
2752
+ box-sizing: border-box;
2753
+ position: relative;
2754
+ font-size: var(--x-size-font-dropdown-default);
2755
+ font-family: var(--x-font-family-dropdown-default);
2756
+ font-weight: var(--x-number-font-weight-dropdown-default);
2757
+ line-height: var(--x-size-line-height-dropdown-default);
2758
+ }
2759
+ [dir="ltr"] .x-dropdown__toggle {
2760
+ border-right-width: var(--x-size-border-width-right-dropdown-toggle-default);
2761
+ }
2762
+ [dir="rtl"] .x-dropdown__toggle {
2763
+ border-left-width: var(--x-size-border-width-right-dropdown-toggle-default);
2764
+ }
2765
+ [dir="ltr"] .x-dropdown__toggle {
2766
+ border-left-width: var(--x-size-border-width-left-dropdown-toggle-default);
2767
+ }
2768
+ [dir="rtl"] .x-dropdown__toggle {
2769
+ border-right-width: var(--x-size-border-width-left-dropdown-toggle-default);
2770
+ }
2771
+ [dir="ltr"] .x-dropdown__toggle {
2772
+ padding-right: var(--x-size-padding-right-dropdown-toggle-default);
2773
+ }
2774
+ [dir="rtl"] .x-dropdown__toggle {
2775
+ padding-left: var(--x-size-padding-right-dropdown-toggle-default);
2776
+ }
2777
+ [dir="ltr"] .x-dropdown__toggle {
2778
+ padding-left: var(--x-size-padding-left-dropdown-toggle-default);
2779
+ }
2780
+ [dir="rtl"] .x-dropdown__toggle {
2781
+ padding-right: var(--x-size-padding-left-dropdown-toggle-default);
2782
+ }
2783
+ .x-dropdown__toggle {
2784
+ border-style: solid;
2785
+ border-top-width: var(--x-size-border-width-top-dropdown-toggle-default);
2786
+ border-bottom-width: var(--x-size-border-width-bottom-dropdown-toggle-default);
2787
+ border-radius: var(--x-size-border-radius-top-left-dropdown-default) var(--x-size-border-radius-top-right-dropdown-default) var(--x-size-border-radius-bottom-right-dropdown-default) var(--x-size-border-radius-bottom-left-dropdown-default);
2788
+ background: var(--x-color-background-dropdown-toggle-default);
2789
+ color: var(--x-color-text-dropdown-toggle-default);
2790
+ border-color: var(--x-color-border-dropdown-toggle-default);
2791
+ padding-top: var(--x-size-padding-top-dropdown-toggle-default);
2792
+ padding-bottom: var(--x-size-padding-bottom-dropdown-toggle-default);
2793
+ gap: var(--x-size-gap-dropdown-item-default);
2794
+ width: var(--x-size-width-dropdown-toggle-default);
2795
+ display: flex;
2796
+ flex-flow: row nowrap;
2797
+ margin: 0;
2798
+ cursor: pointer;
2799
+ overflow: var(--x-string-overflow-dropdown-toggle-default);
2800
+ box-shadow: var(--x-string-box-shadow-dropdown-default);
2801
+ }
2802
+ @media not all and (-webkit-min-device-pixel-ratio: 0), not all and (min-resolution: 0.001dpcm) {
2803
+ .x-dropdown__toggle {
2804
+ gap: 0;
2805
+ }
2806
+ .x-dropdown__toggle > *:not(:last-child) {
2807
+ margin-right: var(--x-size-gap-dropdown-item-default);
2808
+ }
2809
+ }
2810
+ [dir="ltr"] .x-dropdown__toggle * + .x-icon:last-child {
2811
+ margin-left: auto;
2812
+ }
2813
+ [dir="rtl"] .x-dropdown__toggle * + .x-icon:last-child {
2814
+ margin-right: auto;
2815
+ }
2816
+ .x-dropdown__toggle-selected-value {
2817
+ color: var(--x-color-text-dropdown-toggle-default-selected);
2818
+ }
2819
+ [dir="ltr"] .x-dropdown__items-list {
2820
+ border-right-width: var(--x-size-border-width-right-dropdown-list-default);
2821
+ }
2822
+ [dir="rtl"] .x-dropdown__items-list {
2823
+ border-left-width: var(--x-size-border-width-right-dropdown-list-default);
2824
+ }
2825
+ [dir="ltr"] .x-dropdown__items-list {
2826
+ border-left-width: var(--x-size-border-width-left-dropdown-list-default);
2827
+ }
2828
+ [dir="rtl"] .x-dropdown__items-list {
2829
+ border-right-width: var(--x-size-border-width-left-dropdown-list-default);
2830
+ }
2831
+ .x-dropdown__items-list {
2832
+ background: var(--x-color-background-dropdown-default);
2833
+ box-sizing: border-box;
2834
+ min-width: var(--x-size-min-width-dropdown-list-default);
2835
+ position: absolute;
2836
+ top: calc(100% + var(--x-size-gap-dropdown-default));
2837
+ overflow: var(--x-string-overflow-dropdown-list-default);
2838
+ border-color: var(--x-color-border-dropdown-list-default);
2839
+ border-top-width: var(--x-size-border-width-top-dropdown-list-default);
2840
+ border-bottom-width: var(--x-size-border-width-bottom-dropdown-list-default);
2841
+ border-radius: var(--x-size-border-radius-top-left-dropdown-default) var(--x-size-border-radius-top-right-dropdown-default) var(--x-size-border-radius-bottom-right-dropdown-default) var(--x-size-border-radius-bottom-left-dropdown-default);
2842
+ border-style: solid;
2843
+ margin: 0;
2844
+ padding: 0;
2845
+ box-shadow: var(--x-string-box-shadow-dropdown-default);
2846
+ z-index: 1;
2847
+ }
2848
+ .x-dropdown__items-list:before, .x-dropdown__items-list:after {
2849
+ content: "";
2850
+ display: block;
2851
+ height: var(--x-size-padding-vertical-dropdown-list-default);
2852
+ }
2853
+ [dir="ltr"] .x-dropdown__item {
2854
+ padding-left: var(--x-size-padding-left-dropdown-item-default);
2855
+ }
2856
+ [dir="rtl"] .x-dropdown__item {
2857
+ padding-right: var(--x-size-padding-left-dropdown-item-default);
2858
+ }
2859
+ [dir="ltr"] .x-dropdown__item {
2860
+ padding-right: var(--x-size-padding-right-dropdown-item-default);
2861
+ }
2862
+ [dir="rtl"] .x-dropdown__item {
2863
+ padding-left: var(--x-size-padding-right-dropdown-item-default);
2864
+ }
2865
+ .x-dropdown__item {
2866
+ background: var(--x-color-background-dropdown-default);
2867
+ padding-top: var(--x-size-padding-top-dropdown-item-default);
2868
+ padding-bottom: var(--x-size-padding-bottom-dropdown-item-default);
2869
+ gap: var(--x-size-gap-dropdown-item-default);
2870
+ border: none;
2871
+ display: flex;
2872
+ flex-flow: row nowrap;
2873
+ justify-content: flex-start;
2874
+ text-align: left;
2875
+ width: 100%;
2876
+ margin: 0;
2877
+ white-space: nowrap;
2878
+ cursor: pointer;
2879
+ }
2880
+ @media not all and (-webkit-min-device-pixel-ratio: 0), not all and (min-resolution: 0.001dpcm) {
2881
+ .x-dropdown__item {
2882
+ gap: 0;
2883
+ }
2884
+ .x-dropdown__item > *:not(:last-child) {
2885
+ margin-right: var(--x-size-gap-dropdown-item-default);
2886
+ }
2887
+ }
2888
+ .x-dropdown__item:hover, .x-dropdown__item--is-highlighted {
2889
+ color: var(--x-color-text-dropdown-item-default-hover);
2890
+ background-color: var(--x-color-background-dropdown-item-default-hover);
2891
+ font-weight: var(--x-number-font-weight-dropdown-item-default-hover);
2892
+ -webkit-text-decoration: var(--x-font-decoration-dropdown-item-default-hover);
2893
+ text-decoration: var(--x-font-decoration-dropdown-item-default-hover);
2894
+ }
2895
+ .x-dropdown__item--is-selected {
2896
+ color: var(--x-color-text-dropdown-item-default-selected);
2897
+ background-color: var(--x-color-background-dropdown-item-default-selected);
2898
+ font-weight: var(--x-number-font-weight-dropdown-item-default-selected);
2899
+ -webkit-text-decoration: var(--x-font-decoration-dropdown-item-default-selected);
2900
+ text-decoration: var(--x-font-decoration-dropdown-item-default-selected);
2901
+ }
2902
+ [dir="ltr"] .x-dropdown__item * + .x-icon:last-child {
2903
+ margin-left: auto;
2904
+ }
2905
+ [dir="rtl"] .x-dropdown__item * + .x-icon:last-child {
2906
+ margin-right: auto;
2907
+ }
2908
+ .x-dropdown--is-open {
2909
+ --x-color-background-dropdown-toggle-default: var(
2910
+ --x-color-background-dropdown-toggle-open-default
2911
+ );
2912
+ }
2913
+ [dir="ltr"] .x-dropdown--right .x-dropdown__items-list {
2914
+ right: 0;
2915
+ }
2916
+ [dir="rtl"] .x-dropdown--right .x-dropdown__items-list {
2917
+ left: 0;
2905
2918
  }