@refinitiv-ui/elements 6.0.1 → 6.0.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (151) hide show
  1. package/CHANGELOG.md +35 -0
  2. package/lib/accordion/index.js +2 -2
  3. package/lib/autosuggest/helpers/renderer.d.ts +1 -1
  4. package/lib/autosuggest/helpers/utils.d.ts +1 -1
  5. package/lib/autosuggest/index.d.ts +2 -1
  6. package/lib/autosuggest/themes/halo/dark/index.js +1 -1
  7. package/lib/autosuggest/themes/halo/light/index.js +1 -1
  8. package/lib/button/index.js +2 -1
  9. package/lib/button/themes/halo/dark/index.js +1 -1
  10. package/lib/button/themes/halo/light/index.js +1 -1
  11. package/lib/button/themes/solar/charcoal/index.js +1 -1
  12. package/lib/button/themes/solar/pearl/index.js +1 -1
  13. package/lib/calendar/index.d.ts +1 -1
  14. package/lib/calendar/index.js +6 -5
  15. package/lib/calendar/themes/halo/dark/index.js +1 -1
  16. package/lib/calendar/themes/halo/light/index.js +1 -1
  17. package/lib/calendar/themes/solar/charcoal/index.js +1 -1
  18. package/lib/calendar/themes/solar/pearl/index.js +1 -1
  19. package/lib/checkbox/index.d.ts +8 -15
  20. package/lib/checkbox/index.js +19 -41
  21. package/lib/checkbox/themes/halo/dark/index.js +1 -1
  22. package/lib/checkbox/themes/halo/light/index.js +1 -1
  23. package/lib/checkbox/themes/solar/charcoal/index.js +1 -1
  24. package/lib/checkbox/themes/solar/pearl/index.js +1 -1
  25. package/lib/clock/themes/halo/dark/index.js +1 -1
  26. package/lib/clock/themes/halo/light/index.js +1 -1
  27. package/lib/clock/themes/solar/charcoal/index.js +1 -1
  28. package/lib/clock/themes/solar/pearl/index.js +1 -1
  29. package/lib/combo-box/index.d.ts +4 -3
  30. package/lib/combo-box/index.js +7 -3
  31. package/lib/combo-box/themes/halo/dark/index.js +1 -1
  32. package/lib/combo-box/themes/halo/light/index.js +1 -1
  33. package/lib/combo-box/themes/solar/charcoal/index.js +1 -1
  34. package/lib/combo-box/themes/solar/pearl/index.js +1 -1
  35. package/lib/datetime-field/index.d.ts +1 -1
  36. package/lib/datetime-field/utils.d.ts +1 -1
  37. package/lib/datetime-picker/themes/halo/dark/index.js +1 -1
  38. package/lib/datetime-picker/themes/halo/light/index.js +1 -1
  39. package/lib/datetime-picker/themes/solar/charcoal/index.js +1 -1
  40. package/lib/datetime-picker/themes/solar/pearl/index.js +1 -1
  41. package/lib/email-field/themes/halo/dark/index.js +1 -1
  42. package/lib/email-field/themes/halo/light/index.js +1 -1
  43. package/lib/email-field/themes/solar/charcoal/index.js +1 -1
  44. package/lib/email-field/themes/solar/pearl/index.js +1 -1
  45. package/lib/heatmap/index.d.ts +2 -2
  46. package/lib/heatmap/themes/halo/light/index.js +1 -1
  47. package/lib/index.d.ts +1 -1
  48. package/lib/index.js +1 -1
  49. package/lib/interactive-chart/index.js +4 -3
  50. package/lib/item/helpers/types.d.ts +6 -6
  51. package/lib/item/index.d.ts +2 -2
  52. package/lib/item/index.js +0 -1
  53. package/lib/item/themes/halo/dark/index.js +1 -1
  54. package/lib/item/themes/halo/light/index.js +1 -1
  55. package/lib/list/elements/list-item.d.ts +30 -0
  56. package/lib/list/elements/list-item.js +19 -0
  57. package/lib/list/elements/list.d.ts +307 -0
  58. package/lib/list/elements/list.js +632 -0
  59. package/lib/list/helpers/renderer.d.ts +0 -1
  60. package/lib/list/helpers/renderer.js +1 -3
  61. package/lib/list/index.d.ts +3 -317
  62. package/lib/list/index.js +3 -641
  63. package/lib/list/themes/halo/dark/index.js +4 -1
  64. package/lib/list/themes/halo/light/index.js +5 -2
  65. package/lib/list/themes/solar/charcoal/index.js +4 -1
  66. package/lib/list/themes/solar/pearl/index.js +4 -1
  67. package/lib/multi-input/index.d.ts +1 -5
  68. package/lib/multi-input/index.js +17 -18
  69. package/lib/notification/themes/halo/dark/index.js +1 -1
  70. package/lib/notification/themes/halo/light/index.js +1 -1
  71. package/lib/notification/themes/solar/charcoal/index.js +1 -1
  72. package/lib/notification/themes/solar/pearl/index.js +1 -1
  73. package/lib/number-field/themes/halo/dark/index.js +1 -1
  74. package/lib/number-field/themes/halo/light/index.js +1 -1
  75. package/lib/number-field/themes/solar/charcoal/index.js +1 -1
  76. package/lib/number-field/themes/solar/pearl/index.js +1 -1
  77. package/lib/overlay/index.d.ts +2 -1
  78. package/lib/overlay-menu/helpers/constants.d.ts +6 -0
  79. package/lib/overlay-menu/helpers/constants.js +7 -0
  80. package/lib/overlay-menu/helpers/types.d.ts +0 -6
  81. package/lib/overlay-menu/helpers/types.js +1 -7
  82. package/lib/overlay-menu/index.d.ts +1 -1
  83. package/lib/overlay-menu/index.js +1 -1
  84. package/lib/password-field/themes/halo/dark/index.js +1 -1
  85. package/lib/password-field/themes/halo/light/index.js +1 -1
  86. package/lib/password-field/themes/solar/charcoal/index.js +1 -1
  87. package/lib/password-field/themes/solar/pearl/index.js +1 -1
  88. package/lib/pill/index.d.ts +11 -3
  89. package/lib/pill/index.js +25 -11
  90. package/lib/radio-button/index.d.ts +7 -11
  91. package/lib/radio-button/index.js +14 -25
  92. package/lib/radio-button/themes/halo/dark/index.js +1 -1
  93. package/lib/radio-button/themes/halo/light/index.js +1 -1
  94. package/lib/radio-button/themes/solar/charcoal/index.js +1 -1
  95. package/lib/radio-button/themes/solar/pearl/index.js +1 -1
  96. package/lib/search-field/themes/halo/dark/index.js +1 -1
  97. package/lib/search-field/themes/halo/light/index.js +1 -1
  98. package/lib/search-field/themes/solar/charcoal/index.js +1 -1
  99. package/lib/search-field/themes/solar/pearl/index.js +1 -1
  100. package/lib/select/index.d.ts +13 -1
  101. package/lib/select/index.js +25 -7
  102. package/lib/select/themes/halo/dark/index.js +1 -1
  103. package/lib/select/themes/halo/light/index.js +1 -1
  104. package/lib/select/themes/solar/charcoal/index.js +1 -1
  105. package/lib/select/themes/solar/pearl/index.js +1 -1
  106. package/lib/slider/themes/halo/dark/index.js +1 -1
  107. package/lib/slider/themes/halo/light/index.js +1 -1
  108. package/lib/slider/themes/solar/charcoal/index.js +1 -1
  109. package/lib/slider/themes/solar/pearl/index.js +1 -1
  110. package/lib/tab/themes/halo/dark/index.js +1 -1
  111. package/lib/tab/themes/halo/light/index.js +1 -1
  112. package/lib/tab/themes/solar/charcoal/index.js +1 -1
  113. package/lib/tab/themes/solar/pearl/index.js +1 -1
  114. package/lib/tab-bar/index.d.ts +13 -8
  115. package/lib/tab-bar/index.js +26 -15
  116. package/lib/tab-bar/themes/halo/dark/index.js +1 -0
  117. package/lib/tab-bar/themes/halo/light/index.js +1 -0
  118. package/lib/tab-bar/themes/solar/charcoal/index.js +1 -0
  119. package/lib/tab-bar/themes/solar/pearl/index.js +1 -0
  120. package/lib/text-field/index.js +2 -3
  121. package/lib/text-field/themes/halo/dark/index.js +1 -1
  122. package/lib/text-field/themes/halo/light/index.js +1 -1
  123. package/lib/text-field/themes/solar/charcoal/index.js +1 -1
  124. package/lib/text-field/themes/solar/pearl/index.js +1 -1
  125. package/lib/toggle/index.d.ts +7 -10
  126. package/lib/toggle/index.js +14 -24
  127. package/lib/toggle/themes/halo/dark/index.js +1 -1
  128. package/lib/toggle/themes/halo/light/index.js +1 -1
  129. package/lib/toggle/themes/solar/charcoal/index.js +1 -1
  130. package/lib/toggle/themes/solar/pearl/index.js +1 -1
  131. package/lib/tooltip/helpers/overflow-tooltip.d.ts +11 -4
  132. package/lib/tooltip/helpers/overflow-tooltip.js +34 -6
  133. package/lib/tooltip/index.d.ts +2 -2
  134. package/lib/tooltip/index.js +2 -2
  135. package/lib/tree/elements/tree-item.d.ts +4 -0
  136. package/lib/tree/elements/tree-item.js +4 -0
  137. package/lib/tree/elements/tree.d.ts +1 -0
  138. package/lib/tree/elements/tree.js +1 -0
  139. package/lib/tree/helpers/renderer.d.ts +0 -1
  140. package/lib/tree/helpers/renderer.js +0 -2
  141. package/lib/tree/index.d.ts +2 -1
  142. package/lib/tree/themes/halo/dark/index.js +2 -3
  143. package/lib/tree/themes/halo/light/index.js +2 -3
  144. package/lib/tree/themes/solar/charcoal/index.js +2 -3
  145. package/lib/tree/themes/solar/pearl/index.js +2 -3
  146. package/lib/tree-select/themes/halo/dark/index.js +1 -1
  147. package/lib/tree-select/themes/halo/light/index.js +1 -1
  148. package/lib/tree-select/themes/solar/charcoal/index.js +1 -1
  149. package/lib/tree-select/themes/solar/pearl/index.js +1 -1
  150. package/lib/version.js +1 -1
  151. package/package.json +17 -17
package/lib/select/themes/halo/light/index.js CHANGED
@@ -2,4 +2,4 @@ import '@refinitiv-ui/elements/overlay/themes/halo/light';
2
2
  import '@refinitiv-ui/elements/item/themes/halo/light';
3
3
  import '@refinitiv-ui/elements/icon/themes/halo/light';
4
4
 
5
- elf.customStyles.define('ef-select', ':host{display:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;text-align:left;font-family:inherit;font-size:12rem;font-weight:400;height:24px;width:152px;max-width:100%;padding:0 8px;margin:1px 0;outline:0;box-sizing:border-box;display:inline-flex;align-items:center;position:relative;vertical-align:middle;border-radius:0;background-color:#fff;text-overflow:ellipsis;border:1px solid #595959;color:#404040;cursor:pointer;scrollbar-face-color:#999;scrollbar-shadow-color:#999;scrollbar-highlight-color:#999;scrollbar-arrow-color:#999;scrollbar-track-color:#f2f2f2;scrollbar-3dlight-color:#f2f2f2;scrollbar-darkshadow-color:#f2f2f2;scrollbar-color:#999 #f2f2f2;scrollbar-width:thin}:host([disabled]){border:1px solid rgba(89,89,89,.5);color:rgba(64,64,64,.5);background-color:rgba(255,255,255,.5)}:host([type=number]){padding-right:0}:host([warning]){border:1px solid #cca000}:host([warning][disabled]){color:rgba(64,64,64,.5);border:1px solid rgba(204,160,0,.5)}:host([error]),:host([error][warning]){border:1px solid #d94255}:host([error][disabled]),:host([error][warning][disabled]){color:rgba(64,64,64,.5);border:1px solid rgba(182,50,67,.5)}:host ::-ms-clear{display:none}:host([focused]){background-size:100% 2px,100% 1px!important;background-position:center bottom!important;border-color:#334bff}:host [part=input]{color:inherit;padding:0;margin:0;flex:1 1 auto;min-width:0;width:100%;height:100%;-webkit-appearance:none;-moz-appearance:none;appearance:none;text-overflow:ellipsis;touch-action:manipulation}:host [part=input]::-webkit-clear-button,:host [part=input]::-webkit-inner-spin-button,:host [part=input]::-webkit-search-cancel-button,:host [part=input]::-webkit-search-decoration{-webkit-appearance:none}:host [part=input]:invalid{box-shadow:none}:host [part=icon]{min-width:1em;padding-left:2px;color:#595959}:host([disabled]) [part=input]{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}:host ::-moz-selection{color:#fff;background-color:#334bff}:host ::selection{color:#fff;background-color:#334bff}:host(:not([readonly]):not([error]):not([warning]):not([focused]):hover){border-color:#0d0d0d;color:#0d0d0d}:host(:not([readonly]):not([error]):not([warning]):not([focused]):hover) [part=icon]{color:#334bff}:host([warning]:hover:not([readonly]):not([focused])){color:#0d0d0d;border-color:#ffe999}:host([warning][disabled]),:host([warning][readonly]:not([focused])){border-color:rgba(255,233,153,.5)}:host([error]:hover:not([readonly]):not([focused])){color:#0d0d0d;border-color:#eeacb4}:host([error][disabled]),:host([error][readonly]:not([focused])),:host([error][warning][disabled]){border-color:rgba(238,172,180,.5)}:host([readonly]:not([focused])){border-color:rgba(89,89,89,.5);background-color:rgba(255,255,255,.5)}:host([readonly]:not([focused])) [part=icon]{color:rgba(64,64,64,.5)}:host([focused]),:host([focused][error][warning]){border-color:#334bff;color:#0d0d0d}:host([focused]) [part=icon],:host([focused][error][warning]) [part=icon]{color:#334bff}:host [part=placeholder]{opacity:.7}:host([disabled]) [part=icon]{color:rgba(89,89,89,.5)}:host [part=list]{color:#404040;max-width:var(--list-max-width,300px);max-height:var(--list-max-height);border:1px solid #334bff;margin:2px 0;background-color:#f2f2f2}:host [part=list] ::slotted(ef-item:not(:first-child):not([type=divider])),:host [part=list] ef-item:not(:first-child):not([type=divider]){box-shadow:0 -1px 0 #d9d9d9}:host [part=list] ::slotted(:not(ef-item)){display:none}::-webkit-scrollbar-corner{background:0 0}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-thumb{background:#999;border-radius:0;border:1px solid transparent}::-webkit-scrollbar-thumb:hover{background:#1429bd}::-webkit-scrollbar-thumb:active{background:#0f1e8a}::-webkit-scrollbar-track{background:#f2f2f2}::-webkit-scrollbar-thumb:horizontal{background-size:auto 6px;background-repeat:repeat-x;background-image:linear-gradient(to bottom,#999,#999);background-color:transparent;background-position:center}::-webkit-scrollbar-thumb:horizontal:hover{background-image:linear-gradient(to bottom,#1429bd,#1429bd);background-color:transparent;background-position:center}::-webkit-scrollbar-thumb:horizontal:active{background-image:linear-gradient(to bottom,#0f1e8a,#0f1e8a);background-color:transparent;background-position:center}::-webkit-scrollbar-thumb:vertical{background-size:6px auto;background-repeat:repeat-y;background-image:linear-gradient(to right,#999,#999);background-color:transparent;background-position:center}::-webkit-scrollbar-thumb:vertical:hover{background-image:linear-gradient(to right,#1429bd,#1429bd);background-color:transparent;background-position:center}::-webkit-scrollbar-thumb:vertical:active{background-image:linear-gradient(to right,#0f1e8a,#0f1e8a);background-color:transparent;background-position:center}::-webkit-scrollbar-track:horizontal{border-top:1px solid #fff;border-bottom:1px solid #fff}::-webkit-scrollbar-track:vertical{border-left:1px solid #fff;border-right:1px solid #fff}::-webkit-scrollbar-button{background:0 0/1px 2px no-repeat #f2f2f2;height:16px;width:16px;display:none;border:1px solid #fff}::-webkit-scrollbar-button:end:decrement,::-webkit-scrollbar-button:start:increment{display:none}::-webkit-scrollbar-button:hover{background-color:#1429bd;border:1px solid #1429bd}::-webkit-scrollbar-button:active{background-color:#0f1e8a;border:1px solid #fff}::-webkit-scrollbar-button:horizontal{background-size:2px 1px}::-webkit-scrollbar-button:vertical:start:decrement{border-bottom-color:#fff;background-image:linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959);background-position:10.55px 8px,9.55px 7px,8.55px 6px,7.55px 5px,6.55px 4px,5.55px 5px,4.55px 6px,3.55px 7px,2.55px 8px}::-webkit-scrollbar-button:vertical:start:decrement:hover{background-image:linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff);background-position:10.55px 8px,9.55px 7px,8.55px 6px,7.55px 5px,6.55px 4px,5.55px 5px,4.55px 6px,3.55px 7px,2.55px 8px;border-bottom-color:#1429bd}::-webkit-scrollbar-button:vertical:start:decrement:active{background-image:linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff);background-position:10.55px 8px,9.55px 7px,8.55px 6px,7.55px 5px,6.55px 4px,5.55px 5px,4.55px 6px,3.55px 7px,2.55px 8px;border-bottom-color:#fff}::-webkit-scrollbar-button:vertical:end:increment{border-top-color:#fff;background-image:linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959);background-position:10.55px 4px,9.55px 5px,8.55px 6px,7.55px 7px,6.55px 8px,5.55px 7px,4.55px 6px,3.55px 5px,2.55px 4px}::-webkit-scrollbar-button:vertical:end:increment:hover{background-image:linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff);background-position:10.55px 4px,9.55px 5px,8.55px 6px,7.55px 7px,6.55px 8px,5.55px 7px,4.55px 6px,3.55px 5px,2.55px 4px;border-top-color:#1429bd}::-webkit-scrollbar-button:vertical:end:increment:active{background-image:linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff);background-position:10.55px 4px,9.55px 5px,8.55px 6px,7.55px 7px,6.55px 8px,5.55px 7px,4.55px 6px,3.55px 5px,2.55px 4px;border-top-color:#fff}::-webkit-scrollbar-button:horizontal:start:decrement{border-right-color:#fff;background-image:linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959);background-position:7.5px 10.55px,6.5px 9.55px,5.5px 8.55px,4.5px 7.55px,3.5px 6.55px,4.5px 5.55px,5.5px 4.55px,6.5px 3.55px,7.5px 2.55px}::-webkit-scrollbar-button:horizontal:start:decrement:hover{background-image:linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff);background-position:7.5px 10.55px,6.5px 9.55px,5.5px 8.55px,4.5px 7.55px,3.5px 6.55px,4.5px 5.55px,5.5px 4.55px,6.5px 3.55px,7.5px 2.55px;border-right-color:#1429bd}::-webkit-scrollbar-button:horizontal:start:decrement:active{background-image:linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff);background-position:7.5px 10.55px,6.5px 9.55px,5.5px 8.55px,4.5px 7.55px,3.5px 6.55px,4.5px 5.55px,5.5px 4.55px,6.5px 3.55px,7.5px 2.55px;border-right-color:#fff}::-webkit-scrollbar-button:horizontal:end:increment{border-left-color:#fff;background-image:linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959);background-position:5px 10.55px,6px 9.55px,7px 8.55px,8px 7.55px,9px 6.55px,8px 5.55px,7px 4.55px,6px 3.55px,5px 2.55px}::-webkit-scrollbar-button:horizontal:end:increment:hover{background-image:linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff);background-position:5px 10.55px,6px 9.55px,7px 8.55px,8px 7.55px,9px 6.55px,8px 5.55px,7px 4.55px,6px 3.55px,5px 2.55px;border-left-color:#1429bd}::-webkit-scrollbar-button:horizontal:end:increment:active{background-image:linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff);background-position:5px 10.55px,6px 9.55px,7px 8.55px,8px 7.55px,9px 6.55px,8px 5.55px,7px 4.55px,6px 3.55px,5px 2.55px;border-left-color:#fff}');
5
+ elf.customStyles.define('ef-select', ':host{display:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;text-align:left;font-family:inherit;font-size:12rem;font-weight:400;height:24px;width:152px;max-width:100%;padding:0 8px;margin:1px 0;outline:0;box-sizing:border-box;display:inline-flex;align-items:center;position:relative;vertical-align:middle;border-radius:0;background-color:#fff;text-overflow:ellipsis;border:1px solid #595959;color:#404040;cursor:pointer;scrollbar-face-color:#999;scrollbar-shadow-color:#999;scrollbar-highlight-color:#999;scrollbar-arrow-color:#999;scrollbar-track-color:#f2f2f2;scrollbar-3dlight-color:#f2f2f2;scrollbar-darkshadow-color:#f2f2f2;scrollbar-color:#999 #f2f2f2;scrollbar-width:thin}:host([disabled]){border:1px solid rgba(89,89,89,.5);color:rgba(64,64,64,.5);background-color:rgba(255,255,255,.5)}:host([type=number]){padding-right:0}:host([warning]){border:1px solid #cca000}:host([warning][disabled]){color:rgba(64,64,64,.5);border:1px solid rgba(204,160,0,.5)}:host([error]),:host([error][warning]){border:1px solid #d94255}:host([error][disabled]),:host([error][warning][disabled]){color:rgba(64,64,64,.5);border:1px solid rgba(182,50,67,.5)}:host ::-ms-clear{display:none}:host([focused]){background-size:100% 2px,100% 1px!important;background-position:center bottom!important;border-color:#334bff}:host [part=input]{color:inherit;padding:0;margin:0;flex:1 1 auto;min-width:0;width:100%;height:100%;-webkit-appearance:none;-moz-appearance:none;appearance:none;text-overflow:ellipsis;touch-action:manipulation}:host [part=input]::-webkit-clear-button,:host [part=input]::-webkit-inner-spin-button,:host [part=input]::-webkit-search-cancel-button,:host [part=input]::-webkit-search-decoration{-webkit-appearance:none}:host [part=input]:invalid{box-shadow:none}:host [part=icon]{min-width:1em;padding-left:2px;color:#595959}:host([disabled]) [part=input]{-webkit-user-select:none;-moz-user-select:none;user-select:none}:host ::-moz-selection{color:#fff;background-color:#334bff}:host ::selection{color:#fff;background-color:#334bff}:host(:not([readonly]):not([error]):not([warning]):not([focused]):hover){border-color:#0d0d0d;color:#0d0d0d}:host(:not([readonly]):not([error]):not([warning]):not([focused]):hover) [part=icon]{color:#334bff}:host([warning]:hover:not([readonly]):not([focused])){color:#0d0d0d;border-color:#ffe999}:host([warning][disabled]),:host([warning][readonly]:not([focused])){border-color:rgba(255,233,153,.5)}:host([error]:hover:not([readonly]):not([focused])){color:#0d0d0d;border-color:#eeacb4}:host([error][disabled]),:host([error][readonly]:not([focused])),:host([error][warning][disabled]){border-color:rgba(238,172,180,.5)}:host([readonly]:not([focused])){border-color:rgba(89,89,89,.5);background-color:rgba(255,255,255,.5)}:host([readonly]:not([focused])) [part=icon]{color:rgba(64,64,64,.5)}:host([focused]),:host([focused][error][warning]){border-color:#334bff;color:#0d0d0d}:host([focused]) [part=icon],:host([focused][error][warning]) [part=icon]{color:#334bff}:host [part=placeholder]{opacity:.7}:host([disabled]) [part=icon]{color:rgba(89,89,89,.5)}:host [part=list]{color:#404040;max-width:var(--list-max-width,300px);max-height:var(--list-max-height);border:1px solid #334bff;margin:2px 0;background-color:#f2f2f2}:host [part=list] ::slotted(ef-item:not(:first-child):not([type=divider])),:host [part=list] ef-item:not(:first-child):not([type=divider]){box-shadow:0 -1px 0 #d9d9d9}:host [part=list] ::slotted(:not(ef-item)){display:none}::-webkit-scrollbar-corner{background:0 0}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-thumb{background:#999;border-radius:0;border:1px solid transparent}::-webkit-scrollbar-thumb:hover{background:#1429bd}::-webkit-scrollbar-thumb:active{background:#0f1e8a}::-webkit-scrollbar-track{background:#f2f2f2}::-webkit-scrollbar-thumb:horizontal{background-size:auto 6px;background-repeat:repeat-x;background-image:linear-gradient(to bottom,#999,#999);background-color:transparent;background-position:center}::-webkit-scrollbar-thumb:horizontal:hover{background-image:linear-gradient(to bottom,#1429bd,#1429bd);background-color:transparent;background-position:center}::-webkit-scrollbar-thumb:horizontal:active{background-image:linear-gradient(to bottom,#0f1e8a,#0f1e8a);background-color:transparent;background-position:center}::-webkit-scrollbar-thumb:vertical{background-size:6px auto;background-repeat:repeat-y;background-image:linear-gradient(to right,#999,#999);background-color:transparent;background-position:center}::-webkit-scrollbar-thumb:vertical:hover{background-image:linear-gradient(to right,#1429bd,#1429bd);background-color:transparent;background-position:center}::-webkit-scrollbar-thumb:vertical:active{background-image:linear-gradient(to right,#0f1e8a,#0f1e8a);background-color:transparent;background-position:center}::-webkit-scrollbar-track:horizontal{border-top:1px solid #fff;border-bottom:1px solid #fff}::-webkit-scrollbar-track:vertical{border-left:1px solid #fff;border-right:1px solid #fff}::-webkit-scrollbar-button{background:0 0/1px 2px no-repeat #f2f2f2;height:16px;width:16px;display:none;border:1px solid #fff}::-webkit-scrollbar-button:end:decrement,::-webkit-scrollbar-button:start:increment{display:none}::-webkit-scrollbar-button:hover{background-color:#1429bd;border:1px solid #1429bd}::-webkit-scrollbar-button:active{background-color:#0f1e8a;border:1px solid #fff}::-webkit-scrollbar-button:horizontal{background-size:2px 1px}::-webkit-scrollbar-button:vertical:start:decrement{border-bottom-color:#fff;background-image:linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959);background-position:10.55px 8px,9.55px 7px,8.55px 6px,7.55px 5px,6.55px 4px,5.55px 5px,4.55px 6px,3.55px 7px,2.55px 8px}::-webkit-scrollbar-button:vertical:start:decrement:hover{background-image:linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff);background-position:10.55px 8px,9.55px 7px,8.55px 6px,7.55px 5px,6.55px 4px,5.55px 5px,4.55px 6px,3.55px 7px,2.55px 8px;border-bottom-color:#1429bd}::-webkit-scrollbar-button:vertical:start:decrement:active{background-image:linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff);background-position:10.55px 8px,9.55px 7px,8.55px 6px,7.55px 5px,6.55px 4px,5.55px 5px,4.55px 6px,3.55px 7px,2.55px 8px;border-bottom-color:#fff}::-webkit-scrollbar-button:vertical:end:increment{border-top-color:#fff;background-image:linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959);background-position:10.55px 4px,9.55px 5px,8.55px 6px,7.55px 7px,6.55px 8px,5.55px 7px,4.55px 6px,3.55px 5px,2.55px 4px}::-webkit-scrollbar-button:vertical:end:increment:hover{background-image:linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff);background-position:10.55px 4px,9.55px 5px,8.55px 6px,7.55px 7px,6.55px 8px,5.55px 7px,4.55px 6px,3.55px 5px,2.55px 4px;border-top-color:#1429bd}::-webkit-scrollbar-button:vertical:end:increment:active{background-image:linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff);background-position:10.55px 4px,9.55px 5px,8.55px 6px,7.55px 7px,6.55px 8px,5.55px 7px,4.55px 6px,3.55px 5px,2.55px 4px;border-top-color:#fff}::-webkit-scrollbar-button:horizontal:start:decrement{border-right-color:#fff;background-image:linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959);background-position:7.5px 10.55px,6.5px 9.55px,5.5px 8.55px,4.5px 7.55px,3.5px 6.55px,4.5px 5.55px,5.5px 4.55px,6.5px 3.55px,7.5px 2.55px}::-webkit-scrollbar-button:horizontal:start:decrement:hover{background-image:linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff);background-position:7.5px 10.55px,6.5px 9.55px,5.5px 8.55px,4.5px 7.55px,3.5px 6.55px,4.5px 5.55px,5.5px 4.55px,6.5px 3.55px,7.5px 2.55px;border-right-color:#1429bd}::-webkit-scrollbar-button:horizontal:start:decrement:active{background-image:linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff);background-position:7.5px 10.55px,6.5px 9.55px,5.5px 8.55px,4.5px 7.55px,3.5px 6.55px,4.5px 5.55px,5.5px 4.55px,6.5px 3.55px,7.5px 2.55px;border-right-color:#fff}::-webkit-scrollbar-button:horizontal:end:increment{border-left-color:#fff;background-image:linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959);background-position:5px 10.55px,6px 9.55px,7px 8.55px,8px 7.55px,9px 6.55px,8px 5.55px,7px 4.55px,6px 3.55px,5px 2.55px}::-webkit-scrollbar-button:horizontal:end:increment:hover{background-image:linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff);background-position:5px 10.55px,6px 9.55px,7px 8.55px,8px 7.55px,9px 6.55px,8px 5.55px,7px 4.55px,6px 3.55px,5px 2.55px;border-left-color:#1429bd}::-webkit-scrollbar-button:horizontal:end:increment:active{background-image:linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff);background-position:5px 10.55px,6px 9.55px,7px 8.55px,8px 7.55px,9px 6.55px,8px 5.55px,7px 4.55px,6px 3.55px,5px 2.55px;border-left-color:#fff}');
package/lib/select/themes/solar/charcoal/index.js CHANGED
@@ -2,4 +2,4 @@ import '@refinitiv-ui/elements/overlay/themes/solar/charcoal';
2
2
  import '@refinitiv-ui/elements/item/themes/solar/charcoal';
3
3
  import '@refinitiv-ui/elements/icon/themes/solar/charcoal';
4
4
 
5
- elf.customStyles.define('ef-select', ':host{cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;box-shadow:0 0 0 0 rgba(0,0,0,.6);font-family:inherit;min-width:23px;box-sizing:border-box;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:inline-flex;justify-content:center;align-items:center;touch-action:manipulation;-webkit-appearance:none;-moz-appearance:none;appearance:none;border-radius:0;background-color:#3c3c42;color:#c2c2c2;border:1px solid #000;height:23px;box-shadow:0 0 0 0 rgba(0,0,0,.6);padding:0 8px;outline:0;font-family:inherit;font-size:13rem;font-weight:400;min-width:23px;margin:1px 0;transition:70ms;box-sizing:border-box;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:inline-flex;justify-content:center;align-items:center;vertical-align:bottom;position:relative;overflow:hidden;background-image:linear-gradient(rgba(255,255,255,.1) 10%,rgba(255,255,255,0) 100%);width:175px;text-align:left;scrollbar-face-color:#666570;scrollbar-shadow-color:#666570;scrollbar-highlight-color:#666570;scrollbar-arrow-color:#666570;scrollbar-track-color:#2e2e33;scrollbar-3dlight-color:#2e2e33;scrollbar-darkshadow-color:#2e2e33;scrollbar-color:#666570 #2e2e33}@media (-ms-high-contrast:none),(pointer:fine){:host(:not([readonly]):hover){background-color:#4d4d55;color:#e2e2e2;box-shadow:0 0 0 0 rgba(0,0,0,.9)}}@media all{:host(:not([readonly]):active),:host(:not([readonly])[focused]){background-color:#38383d;color:#c2c2c2;box-shadow:0 0 0 0 rgba(0,0,0,.6)}:host([disabled]){background-color:#3c3c42;color:#c2c2c2;border-color:#333;box-shadow:none;outline:0;pointer-events:none}}:host([disabled]){opacity:.4;border-color:#000}:host(:not([readonly]):active),:host(:not([readonly])[focused]){background-image:linear-gradient(rgba(255,255,255,.1) 10%,rgba(255,255,255,0) 100%)}:host(:not([disabled])[focused]){border:1px dotted #f93!important;box-shadow:inset 0 0 0 1px #000}:host(:not([disabled])[focused]:hover){box-shadow:inset 0 0 0 1px #000}:host([warning]){border-color:#f93!important}:host([error]){border-color:#f5475b!important}:host [part=list]{max-width:var(--list-max-width,300px);max-height:var(--list-max-height);margin:1px 0;border:1px solid #000;background-color:#3c3c42}::-webkit-scrollbar{width:13px;height:13px}::-webkit-scrollbar-button{background:0 0/1px 2px no-repeat #2e2e33;height:12px;width:12px;display:block}::-webkit-scrollbar-thumb{background:#666570;border-radius:7px;border:2px solid #2e2e33}::-webkit-scrollbar-thumb:hover{background:#e2e2e2}::-webkit-scrollbar-thumb:active{background:#f93}::-webkit-scrollbar-track{background:#2e2e33}::-webkit-scrollbar-corner{background:#2e2e33}::-webkit-scrollbar-button:end:decrement,::-webkit-scrollbar-button:start:increment{display:none}::-webkit-scrollbar-button:horizontal{background-size:2px 1px}::-webkit-scrollbar-button:vertical:start:decrement{background-image:linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570);background-position:10px 6.5px,9px 5.5px,8px 4.5px,7px 3.5px,6px 2.5px,5px 3.5px,4px 4.5px,3px 5.5px,2px 6.5px}::-webkit-scrollbar-button:vertical:start:decrement:hover{background-image:linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2);background-position:10px 6.5px,9px 5.5px,8px 4.5px,7px 3.5px,6px 2.5px,5px 3.5px,4px 4.5px,3px 5.5px,2px 6.5px}::-webkit-scrollbar-button:vertical:start:decrement:active{background-image:linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93);background-position:10px 6.5px,9px 5.5px,8px 4.5px,7px 3.5px,6px 2.5px,5px 3.5px,4px 4.5px,3px 5.5px,2px 6.5px}::-webkit-scrollbar-button:vertical:end:increment{background-image:linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570);background-position:10px 3.5px,9px 4.5px,8px 5.5px,7px 6.5px,6px 7.5px,5px 6.5px,4px 5.5px,3px 4.5px,2px 3.5px}::-webkit-scrollbar-button:vertical:end:increment:hover{background-image:linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2);background-position:10px 3.5px,9px 4.5px,8px 5.5px,7px 6.5px,6px 7.5px,5px 6.5px,4px 5.5px,3px 4.5px,2px 3.5px}::-webkit-scrollbar-button:vertical:end:increment:active{background-image:linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93);background-position:10px 3.5px,9px 4.5px,8px 5.5px,7px 6.5px,6px 7.5px,5px 6.5px,4px 5.5px,3px 4.5px,2px 3.5px}::-webkit-scrollbar-button:horizontal:start:decrement{background-image:linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570);background-position:6.5px 10px,5.5px 9px,4.5px 8px,3.5px 7px,2.5px 6px,3.5px 5px,4.5px 4px,5.5px 3px,6.5px 2px}::-webkit-scrollbar-button:horizontal:start:decrement:hover{background-image:linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2);background-position:6.5px 10px,5.5px 9px,4.5px 8px,3.5px 7px,2.5px 6px,3.5px 5px,4.5px 4px,5.5px 3px,6.5px 2px}::-webkit-scrollbar-button:horizontal:start:decrement:active{background-image:linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93);background-position:6.5px 10px,5.5px 9px,4.5px 8px,3.5px 7px,2.5px 6px,3.5px 5px,4.5px 4px,5.5px 3px,6.5px 2px}::-webkit-scrollbar-button:horizontal:end:increment{background-image:linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570);background-position:3.5px 10px,4.5px 9px,5.5px 8px,6.5px 7px,7.5px 6px,6.5px 5px,5.5px 4px,4.5px 3px,3.5px 2px}::-webkit-scrollbar-button:horizontal:end:increment:hover{background-image:linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2);background-position:3.5px 10px,4.5px 9px,5.5px 8px,6.5px 7px,7.5px 6px,6.5px 5px,5.5px 4px,4.5px 3px,3.5px 2px}::-webkit-scrollbar-button:horizontal:end:increment:active{background-image:linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93);background-position:3.5px 10px,4.5px 9px,5.5px 8px,6.5px 7px,7.5px 6px,6.5px 5px,5.5px 4px,4.5px 3px,3.5px 2px}');
5
+ elf.customStyles.define('ef-select', ':host{cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;box-shadow:0 0 0 0 rgba(0,0,0,.6);font-family:inherit;min-width:23px;box-sizing:border-box;-webkit-user-select:none;-moz-user-select:none;user-select:none;display:inline-flex;justify-content:center;align-items:center;touch-action:manipulation;-webkit-appearance:none;-moz-appearance:none;appearance:none;border-radius:0;background-color:#3c3c42;color:#c2c2c2;border:1px solid #000;height:23px;box-shadow:0 0 0 0 rgba(0,0,0,.6);padding:0 8px;outline:0;font-family:inherit;font-size:13rem;font-weight:400;min-width:23px;margin:1px 0;transition:70ms;box-sizing:border-box;-webkit-user-select:none;-moz-user-select:none;user-select:none;display:inline-flex;justify-content:center;align-items:center;vertical-align:bottom;position:relative;overflow:hidden;background-image:linear-gradient(rgba(255,255,255,.1) 10%,rgba(255,255,255,0) 100%);width:175px;text-align:left;scrollbar-face-color:#666570;scrollbar-shadow-color:#666570;scrollbar-highlight-color:#666570;scrollbar-arrow-color:#666570;scrollbar-track-color:#2e2e33;scrollbar-3dlight-color:#2e2e33;scrollbar-darkshadow-color:#2e2e33;scrollbar-color:#666570 #2e2e33}@media (-ms-high-contrast:none),(pointer:fine){:host(:not([readonly]):hover){background-color:#4d4d55;color:#e2e2e2;box-shadow:0 0 0 0 rgba(0,0,0,.9)}}@media all{:host(:not([readonly]):active),:host(:not([readonly])[focused]){background-color:#38383d;color:#c2c2c2;box-shadow:0 0 0 0 rgba(0,0,0,.6)}:host([disabled]){background-color:#3c3c42;color:#c2c2c2;border-color:#333;box-shadow:none;outline:0;pointer-events:none}}:host([disabled]){opacity:.4;border-color:#000}:host(:not([readonly]):active),:host(:not([readonly])[focused]){background-image:linear-gradient(rgba(255,255,255,.1) 10%,rgba(255,255,255,0) 100%)}:host(:not([disabled])[focused]){border:1px dotted #f93!important;box-shadow:inset 0 0 0 1px #000}:host(:not([disabled])[focused]:hover){box-shadow:inset 0 0 0 1px #000}:host([warning]){border-color:#f93!important}:host([error]){border-color:#f5475b!important}:host [part=list]{max-width:var(--list-max-width,300px);max-height:var(--list-max-height);margin:1px 0;border:1px solid #000;background-color:#3c3c42}::-webkit-scrollbar{width:13px;height:13px}::-webkit-scrollbar-button{background:0 0/1px 2px no-repeat #2e2e33;height:12px;width:12px;display:block}::-webkit-scrollbar-thumb{background:#666570;border-radius:7px;border:2px solid #2e2e33}::-webkit-scrollbar-thumb:hover{background:#e2e2e2}::-webkit-scrollbar-thumb:active{background:#f93}::-webkit-scrollbar-track{background:#2e2e33}::-webkit-scrollbar-corner{background:#2e2e33}::-webkit-scrollbar-button:end:decrement,::-webkit-scrollbar-button:start:increment{display:none}::-webkit-scrollbar-button:horizontal{background-size:2px 1px}::-webkit-scrollbar-button:vertical:start:decrement{background-image:linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570);background-position:10px 6.5px,9px 5.5px,8px 4.5px,7px 3.5px,6px 2.5px,5px 3.5px,4px 4.5px,3px 5.5px,2px 6.5px}::-webkit-scrollbar-button:vertical:start:decrement:hover{background-image:linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2);background-position:10px 6.5px,9px 5.5px,8px 4.5px,7px 3.5px,6px 2.5px,5px 3.5px,4px 4.5px,3px 5.5px,2px 6.5px}::-webkit-scrollbar-button:vertical:start:decrement:active{background-image:linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93);background-position:10px 6.5px,9px 5.5px,8px 4.5px,7px 3.5px,6px 2.5px,5px 3.5px,4px 4.5px,3px 5.5px,2px 6.5px}::-webkit-scrollbar-button:vertical:end:increment{background-image:linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570);background-position:10px 3.5px,9px 4.5px,8px 5.5px,7px 6.5px,6px 7.5px,5px 6.5px,4px 5.5px,3px 4.5px,2px 3.5px}::-webkit-scrollbar-button:vertical:end:increment:hover{background-image:linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2);background-position:10px 3.5px,9px 4.5px,8px 5.5px,7px 6.5px,6px 7.5px,5px 6.5px,4px 5.5px,3px 4.5px,2px 3.5px}::-webkit-scrollbar-button:vertical:end:increment:active{background-image:linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93);background-position:10px 3.5px,9px 4.5px,8px 5.5px,7px 6.5px,6px 7.5px,5px 6.5px,4px 5.5px,3px 4.5px,2px 3.5px}::-webkit-scrollbar-button:horizontal:start:decrement{background-image:linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570);background-position:6.5px 10px,5.5px 9px,4.5px 8px,3.5px 7px,2.5px 6px,3.5px 5px,4.5px 4px,5.5px 3px,6.5px 2px}::-webkit-scrollbar-button:horizontal:start:decrement:hover{background-image:linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2);background-position:6.5px 10px,5.5px 9px,4.5px 8px,3.5px 7px,2.5px 6px,3.5px 5px,4.5px 4px,5.5px 3px,6.5px 2px}::-webkit-scrollbar-button:horizontal:start:decrement:active{background-image:linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93);background-position:6.5px 10px,5.5px 9px,4.5px 8px,3.5px 7px,2.5px 6px,3.5px 5px,4.5px 4px,5.5px 3px,6.5px 2px}::-webkit-scrollbar-button:horizontal:end:increment{background-image:linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570);background-position:3.5px 10px,4.5px 9px,5.5px 8px,6.5px 7px,7.5px 6px,6.5px 5px,5.5px 4px,4.5px 3px,3.5px 2px}::-webkit-scrollbar-button:horizontal:end:increment:hover{background-image:linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2);background-position:3.5px 10px,4.5px 9px,5.5px 8px,6.5px 7px,7.5px 6px,6.5px 5px,5.5px 4px,4.5px 3px,3.5px 2px}::-webkit-scrollbar-button:horizontal:end:increment:active{background-image:linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93);background-position:3.5px 10px,4.5px 9px,5.5px 8px,6.5px 7px,7.5px 6px,6.5px 5px,5.5px 4px,4.5px 3px,3.5px 2px}');
package/lib/select/themes/solar/pearl/index.js CHANGED
@@ -2,4 +2,4 @@ import '@refinitiv-ui/elements/overlay/themes/solar/pearl';
2
2
  import '@refinitiv-ui/elements/item/themes/solar/pearl';
3
3
  import '@refinitiv-ui/elements/icon/themes/solar/pearl';
4
4
 
5
- elf.customStyles.define('ef-select', ':host{cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;box-shadow:0 0 0 0 rgba(0,0,0,.3);font-family:inherit;min-width:23px;box-sizing:border-box;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:inline-flex;justify-content:center;align-items:center;touch-action:manipulation;-webkit-appearance:none;-moz-appearance:none;appearance:none;border-radius:0;background-color:#fafbfc;color:#505050;border:1px solid #a9afba;height:23px;box-shadow:0 0 0 0 rgba(0,0,0,.3);padding:0 8px;outline:0;font-family:inherit;font-size:13rem;font-weight:400;min-width:23px;margin:1px 0;transition:70ms;box-sizing:border-box;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:inline-flex;justify-content:center;align-items:center;vertical-align:bottom;position:relative;overflow:hidden;background-image:linear-gradient(rgba(0,0,0,0) 0,rgba(0,0,0,.1) 100%);width:175px;text-align:left;scrollbar-face-color:#8a8a96;scrollbar-shadow-color:#8a8a96;scrollbar-highlight-color:#8a8a96;scrollbar-arrow-color:#8a8a96;scrollbar-track-color:#fff;scrollbar-3dlight-color:#fff;scrollbar-darkshadow-color:#fff;scrollbar-color:#8a8a96 #fff}@media (-ms-high-contrast:none),(pointer:fine){:host(:not([readonly]):hover){background-color:#fff;color:#1d1d1d;box-shadow:0 0 0 0 rgba(0,0,0,.6)}}@media all{:host(:not([readonly]):active),:host(:not([readonly])[focused]){background-color:#fff;color:#1d1d1d;box-shadow:0 0 0 0 rgba(0,0,0,.3)}:host([disabled]){background-color:#fafbfc;color:#505050;border-color:#babfc8;box-shadow:none;outline:0;pointer-events:none}}:host([disabled]){opacity:.4;border-color:#a9afba}:host(:not([readonly]):active),:host(:not([readonly])[focused]){background-image:none}:host(:not([disabled])[focused]){border:1px dotted #ee7600!important;box-shadow:inset 0 0 0 1px #a9afba}:host(:not([disabled])[focused]:hover){box-shadow:inset 0 0 0 1px #a9afba}:host([warning]){border-color:#f93!important}:host([error]){border-color:#d94255!important}:host [part=list]{max-width:var(--list-max-width,300px);max-height:var(--list-max-height);margin:1px 0;border:1px solid #fff;background-color:#fafbfc}::-webkit-scrollbar{width:13px;height:13px}::-webkit-scrollbar-button{background:0 0/1px 2px no-repeat #fff;height:12px;width:12px;display:block}::-webkit-scrollbar-thumb{background:#8a8a96;border-radius:7px;border:2px solid #fff}::-webkit-scrollbar-thumb:hover{background:#a9afba}::-webkit-scrollbar-thumb:active{background:#ee7600}::-webkit-scrollbar-track{background:#fff}::-webkit-scrollbar-corner{background:#fff}::-webkit-scrollbar-button:end:decrement,::-webkit-scrollbar-button:start:increment{display:none}::-webkit-scrollbar-button:horizontal{background-size:2px 1px}::-webkit-scrollbar-button:vertical:start:decrement{background-image:linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96);background-position:10px 6.5px,9px 5.5px,8px 4.5px,7px 3.5px,6px 2.5px,5px 3.5px,4px 4.5px,3px 5.5px,2px 6.5px}::-webkit-scrollbar-button:vertical:start:decrement:hover{background-image:linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba);background-position:10px 6.5px,9px 5.5px,8px 4.5px,7px 3.5px,6px 2.5px,5px 3.5px,4px 4.5px,3px 5.5px,2px 6.5px}::-webkit-scrollbar-button:vertical:start:decrement:active{background-image:linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600);background-position:10px 6.5px,9px 5.5px,8px 4.5px,7px 3.5px,6px 2.5px,5px 3.5px,4px 4.5px,3px 5.5px,2px 6.5px}::-webkit-scrollbar-button:vertical:end:increment{background-image:linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96);background-position:10px 3.5px,9px 4.5px,8px 5.5px,7px 6.5px,6px 7.5px,5px 6.5px,4px 5.5px,3px 4.5px,2px 3.5px}::-webkit-scrollbar-button:vertical:end:increment:hover{background-image:linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba);background-position:10px 3.5px,9px 4.5px,8px 5.5px,7px 6.5px,6px 7.5px,5px 6.5px,4px 5.5px,3px 4.5px,2px 3.5px}::-webkit-scrollbar-button:vertical:end:increment:active{background-image:linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600);background-position:10px 3.5px,9px 4.5px,8px 5.5px,7px 6.5px,6px 7.5px,5px 6.5px,4px 5.5px,3px 4.5px,2px 3.5px}::-webkit-scrollbar-button:horizontal:start:decrement{background-image:linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96);background-position:6.5px 10px,5.5px 9px,4.5px 8px,3.5px 7px,2.5px 6px,3.5px 5px,4.5px 4px,5.5px 3px,6.5px 2px}::-webkit-scrollbar-button:horizontal:start:decrement:hover{background-image:linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba);background-position:6.5px 10px,5.5px 9px,4.5px 8px,3.5px 7px,2.5px 6px,3.5px 5px,4.5px 4px,5.5px 3px,6.5px 2px}::-webkit-scrollbar-button:horizontal:start:decrement:active{background-image:linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600);background-position:6.5px 10px,5.5px 9px,4.5px 8px,3.5px 7px,2.5px 6px,3.5px 5px,4.5px 4px,5.5px 3px,6.5px 2px}::-webkit-scrollbar-button:horizontal:end:increment{background-image:linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96);background-position:3.5px 10px,4.5px 9px,5.5px 8px,6.5px 7px,7.5px 6px,6.5px 5px,5.5px 4px,4.5px 3px,3.5px 2px}::-webkit-scrollbar-button:horizontal:end:increment:hover{background-image:linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba);background-position:3.5px 10px,4.5px 9px,5.5px 8px,6.5px 7px,7.5px 6px,6.5px 5px,5.5px 4px,4.5px 3px,3.5px 2px}::-webkit-scrollbar-button:horizontal:end:increment:active{background-image:linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600);background-position:3.5px 10px,4.5px 9px,5.5px 8px,6.5px 7px,7.5px 6px,6.5px 5px,5.5px 4px,4.5px 3px,3.5px 2px}');
5
+ elf.customStyles.define('ef-select', ':host{cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;box-shadow:0 0 0 0 rgba(0,0,0,.3);font-family:inherit;min-width:23px;box-sizing:border-box;-webkit-user-select:none;-moz-user-select:none;user-select:none;display:inline-flex;justify-content:center;align-items:center;touch-action:manipulation;-webkit-appearance:none;-moz-appearance:none;appearance:none;border-radius:0;background-color:#fafbfc;color:#505050;border:1px solid #a9afba;height:23px;box-shadow:0 0 0 0 rgba(0,0,0,.3);padding:0 8px;outline:0;font-family:inherit;font-size:13rem;font-weight:400;min-width:23px;margin:1px 0;transition:70ms;box-sizing:border-box;-webkit-user-select:none;-moz-user-select:none;user-select:none;display:inline-flex;justify-content:center;align-items:center;vertical-align:bottom;position:relative;overflow:hidden;background-image:linear-gradient(rgba(0,0,0,0) 0,rgba(0,0,0,.1) 100%);width:175px;text-align:left;scrollbar-face-color:#8a8a96;scrollbar-shadow-color:#8a8a96;scrollbar-highlight-color:#8a8a96;scrollbar-arrow-color:#8a8a96;scrollbar-track-color:#fff;scrollbar-3dlight-color:#fff;scrollbar-darkshadow-color:#fff;scrollbar-color:#8a8a96 #fff}@media (-ms-high-contrast:none),(pointer:fine){:host(:not([readonly]):hover){background-color:#fff;color:#1d1d1d;box-shadow:0 0 0 0 rgba(0,0,0,.6)}}@media all{:host(:not([readonly]):active),:host(:not([readonly])[focused]){background-color:#fff;color:#1d1d1d;box-shadow:0 0 0 0 rgba(0,0,0,.3)}:host([disabled]){background-color:#fafbfc;color:#505050;border-color:#babfc8;box-shadow:none;outline:0;pointer-events:none}}:host([disabled]){opacity:.4;border-color:#a9afba}:host(:not([readonly]):active),:host(:not([readonly])[focused]){background-image:none}:host(:not([disabled])[focused]){border:1px dotted #ee7600!important;box-shadow:inset 0 0 0 1px #a9afba}:host(:not([disabled])[focused]:hover){box-shadow:inset 0 0 0 1px #a9afba}:host([warning]){border-color:#f93!important}:host([error]){border-color:#d94255!important}:host [part=list]{max-width:var(--list-max-width,300px);max-height:var(--list-max-height);margin:1px 0;border:1px solid #fff;background-color:#fafbfc}::-webkit-scrollbar{width:13px;height:13px}::-webkit-scrollbar-button{background:0 0/1px 2px no-repeat #fff;height:12px;width:12px;display:block}::-webkit-scrollbar-thumb{background:#8a8a96;border-radius:7px;border:2px solid #fff}::-webkit-scrollbar-thumb:hover{background:#a9afba}::-webkit-scrollbar-thumb:active{background:#ee7600}::-webkit-scrollbar-track{background:#fff}::-webkit-scrollbar-corner{background:#fff}::-webkit-scrollbar-button:end:decrement,::-webkit-scrollbar-button:start:increment{display:none}::-webkit-scrollbar-button:horizontal{background-size:2px 1px}::-webkit-scrollbar-button:vertical:start:decrement{background-image:linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96);background-position:10px 6.5px,9px 5.5px,8px 4.5px,7px 3.5px,6px 2.5px,5px 3.5px,4px 4.5px,3px 5.5px,2px 6.5px}::-webkit-scrollbar-button:vertical:start:decrement:hover{background-image:linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba);background-position:10px 6.5px,9px 5.5px,8px 4.5px,7px 3.5px,6px 2.5px,5px 3.5px,4px 4.5px,3px 5.5px,2px 6.5px}::-webkit-scrollbar-button:vertical:start:decrement:active{background-image:linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600);background-position:10px 6.5px,9px 5.5px,8px 4.5px,7px 3.5px,6px 2.5px,5px 3.5px,4px 4.5px,3px 5.5px,2px 6.5px}::-webkit-scrollbar-button:vertical:end:increment{background-image:linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96);background-position:10px 3.5px,9px 4.5px,8px 5.5px,7px 6.5px,6px 7.5px,5px 6.5px,4px 5.5px,3px 4.5px,2px 3.5px}::-webkit-scrollbar-button:vertical:end:increment:hover{background-image:linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba);background-position:10px 3.5px,9px 4.5px,8px 5.5px,7px 6.5px,6px 7.5px,5px 6.5px,4px 5.5px,3px 4.5px,2px 3.5px}::-webkit-scrollbar-button:vertical:end:increment:active{background-image:linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600);background-position:10px 3.5px,9px 4.5px,8px 5.5px,7px 6.5px,6px 7.5px,5px 6.5px,4px 5.5px,3px 4.5px,2px 3.5px}::-webkit-scrollbar-button:horizontal:start:decrement{background-image:linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96);background-position:6.5px 10px,5.5px 9px,4.5px 8px,3.5px 7px,2.5px 6px,3.5px 5px,4.5px 4px,5.5px 3px,6.5px 2px}::-webkit-scrollbar-button:horizontal:start:decrement:hover{background-image:linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba);background-position:6.5px 10px,5.5px 9px,4.5px 8px,3.5px 7px,2.5px 6px,3.5px 5px,4.5px 4px,5.5px 3px,6.5px 2px}::-webkit-scrollbar-button:horizontal:start:decrement:active{background-image:linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600);background-position:6.5px 10px,5.5px 9px,4.5px 8px,3.5px 7px,2.5px 6px,3.5px 5px,4.5px 4px,5.5px 3px,6.5px 2px}::-webkit-scrollbar-button:horizontal:end:increment{background-image:linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96);background-position:3.5px 10px,4.5px 9px,5.5px 8px,6.5px 7px,7.5px 6px,6.5px 5px,5.5px 4px,4.5px 3px,3.5px 2px}::-webkit-scrollbar-button:horizontal:end:increment:hover{background-image:linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba);background-position:3.5px 10px,4.5px 9px,5.5px 8px,6.5px 7px,7.5px 6px,6.5px 5px,5.5px 4px,4.5px 3px,3.5px 2px}::-webkit-scrollbar-button:horizontal:end:increment:active{background-image:linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600);background-position:3.5px 10px,4.5px 9px,5.5px 8px,6.5px 7px,7.5px 6px,6.5px 5px,5.5px 4px,4.5px 3px,3.5px 2px}');
package/lib/slider/themes/halo/dark/index.js CHANGED
@@ -1,3 +1,3 @@
1
1
  import '@refinitiv-ui/elements/number-field/themes/halo/dark';
2
2
 
3
- elf.customStyles.define('ef-slider', ':host{touch-action:manipulation;height:24px;margin:1px 0;opacity:.9;opacity:1}:host(:not([disabled]):hover){opacity:1}:host [part=track-wrapper]{height:4px;background:var(--track-color,#333);top:calc((100% - 4px)/ 2)}:host(:not([disabled])) [part=track-fill]{height:inherit;background:var(--thumb-color,#ccc);background-color:var(--thumb-color,#6678ff)}:host([disabled]) [part=thumb],:host([disabled]) [part=thumb]:hover,:host([disabled]) [part=track-fill],:host([disabled]) [part=track-wrapper]::after{background:#333;content:\'\'}:host [part=thumb-container]{height:100%;top:0;margin-left:-4px;width:8px}:host([focused=visible]) [part=thumb-container][active] [part=thumb]{outline:#334bff solid 1px;outline-offset:2px}:host([show-steps]) [part=step-container]{height:inherit}:host([show-steps]:not([disabled])) [part=step]{height:inherit;background-image:linear-gradient(to right,var(--step-color,#6678ff),var(--step-color,#6678ff) 4px,transparent 0,transparent)}:host([show-steps]:not([disabled])) [part=track-wrapper]::after{height:inherit;width:4px;background-color:var(--step-color,#6678ff)}:host [part=pin]{width:26px;height:26px;margin-top:-6px;margin-left:-2px;transform:rotate(-45deg) scale(0) translate(0);transition:transform .1s ease-out;border-radius:50% 50% 50% 0;background-color:var(--pin-color,#ccc);display:none}:host [part=pin-value-marker]{font-family:inherit;font-size:.8em;color:var(--pin-text-color,#fff);line-height:1.25rem;font-weight:400;letter-spacing:.01786em;text-decoration:inherit;text-transform:inherit;transform:rotate(45deg);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}:host([pin].grabbable) [part=pin]{transform:rotate(-45deg) scale(1) translate(19px,-20px)}:host([pin].grabbable) [part=thumb]{transform:scale(.7);transform:none}:host [part=input]{margin:0;padding:0;width:var(--input-field-width,40px);min-width:40px;text-align:center;height:100%}:host [part=input][name=to],:host [part=input][name=value]{margin-left:16px}:host [part=input][name=from]{margin-right:16px}:host(:not([disabled]):not([readonly]):hover){cursor:pointer}:host [part=thumb]{box-sizing:border-box;transform:scale(.7);background:var(--thumb-color,#ccc);top:calc(4px / 2);border-radius:0;width:8px;height:20px;transform:none;border:1px solid #0d0d0d}:host(:not([disabled]):not([readonly]):not(.grabbable)) [part=thumb]:hover{background-color:var(--thumb-color,#1429bd);border-color:var(--thumb-color,#0d0d0d)}:host(.grabbable) [part=thumb]{border-width:2px;transform:scale(1);border:1px solid var(--thumb-color,#0d0d0d);background-color:var(--thumb-color,#0f1e8a);transform:none}');
3
+ elf.customStyles.define('ef-slider', ':host{touch-action:manipulation;height:24px;margin:1px 0;opacity:.9;opacity:1}:host(:not([disabled]):hover){opacity:1}:host [part=track-wrapper]{height:4px;background:var(--track-color,#333);top:calc((100% - 4px)/ 2)}:host(:not([disabled])) [part=track-fill]{height:inherit;background:var(--thumb-color,#ccc);background-color:var(--thumb-color,#6678ff)}:host([disabled]) [part=thumb],:host([disabled]) [part=thumb]:hover,:host([disabled]) [part=track-fill],:host([disabled]) [part=track-wrapper]::after{background:#333;content:\'\'}:host [part=thumb-container]{height:100%;top:0;margin-left:-4px;width:8px}:host([focused=visible]) [part=thumb-container][active] [part=thumb]{outline:#334bff solid 1px;outline-offset:2px}:host([show-steps]) [part=step-container]{height:inherit}:host([show-steps]:not([disabled])) [part=step]{height:inherit;background-image:linear-gradient(to right,var(--step-color,#6678ff),var(--step-color,#6678ff) 4px,transparent 0,transparent)}:host([show-steps]:not([disabled])) [part=track-wrapper]::after{height:inherit;width:4px;background-color:var(--step-color,#6678ff)}:host [part=pin]{width:26px;height:26px;margin-top:-6px;margin-left:-2px;transform:rotate(-45deg) scale(0) translate(0);transition:transform .1s ease-out;border-radius:50% 50% 50% 0;background-color:var(--pin-color,#ccc);display:none}:host [part=pin-value-marker]{font-family:inherit;font-size:.8em;color:var(--pin-text-color,#fff);line-height:1.25rem;font-weight:400;letter-spacing:.01786em;text-decoration:inherit;text-transform:inherit;transform:rotate(45deg);-webkit-user-select:none;-moz-user-select:none;user-select:none}:host([pin].grabbable) [part=pin]{transform:rotate(-45deg) scale(1) translate(19px,-20px)}:host([pin].grabbable) [part=thumb]{transform:scale(.7);transform:none}:host [part=input]{margin:0;padding:0;width:var(--input-field-width,40px);min-width:40px;text-align:center;height:100%}:host [part=input][name=to],:host [part=input][name=value]{margin-left:16px}:host [part=input][name=from]{margin-right:16px}:host(:not([disabled]):not([readonly]):hover){cursor:pointer}:host [part=thumb]{box-sizing:border-box;transform:scale(.7);background:var(--thumb-color,#ccc);top:calc(4px / 2);border-radius:0;width:8px;height:20px;transform:none;border:1px solid #0d0d0d}:host(:not([disabled]):not([readonly]):not(.grabbable)) [part=thumb]:hover{background-color:var(--thumb-color,#1429bd);border-color:var(--thumb-color,#0d0d0d)}:host(.grabbable) [part=thumb]{border-width:2px;transform:scale(1);border:1px solid var(--thumb-color,#0d0d0d);background-color:var(--thumb-color,#0f1e8a);transform:none}');
package/lib/slider/themes/halo/light/index.js CHANGED
@@ -1,3 +1,3 @@
1
1
  import '@refinitiv-ui/elements/number-field/themes/halo/light';
2
2
 
3
- elf.customStyles.define('ef-slider', ':host{touch-action:manipulation;height:24px;margin:1px 0;opacity:.9;opacity:1}:host(:not([disabled]):hover){opacity:1}:host [part=track-wrapper]{height:4px;background:var(--track-color,#d9d9d9);top:calc((100% - 4px)/ 2)}:host(:not([disabled])) [part=track-fill]{height:inherit;background:var(--thumb-color,#fafafa);background-color:var(--thumb-color,#334bff)}:host([disabled]) [part=thumb],:host([disabled]) [part=thumb]:hover,:host([disabled]) [part=track-fill],:host([disabled]) [part=track-wrapper]::after{background:#d9d9d9;content:\'\'}:host [part=thumb-container]{height:100%;top:0;margin-left:-4px;width:8px}:host([focused=visible]) [part=thumb-container][active] [part=thumb]{outline:#334bff solid 1px;outline-offset:2px}:host([show-steps]) [part=step-container]{height:inherit}:host([show-steps]:not([disabled])) [part=step]{height:inherit;background-image:linear-gradient(to right,var(--step-color,#334bff),var(--step-color,#334bff) 4px,transparent 0,transparent)}:host([show-steps]:not([disabled])) [part=track-wrapper]::after{height:inherit;width:4px;background-color:var(--step-color,#334bff)}:host [part=pin]{width:26px;height:26px;margin-top:-6px;margin-left:-2px;transform:rotate(-45deg) scale(0) translate(0);transition:transform .1s ease-out;border-radius:50% 50% 50% 0;background-color:var(--pin-color,#fafafa);display:none}:host [part=pin-value-marker]{font-family:inherit;font-size:.8em;color:var(--pin-text-color,#fff);line-height:1.25rem;font-weight:400;letter-spacing:.01786em;text-decoration:inherit;text-transform:inherit;transform:rotate(45deg);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}:host([pin].grabbable) [part=pin]{transform:rotate(-45deg) scale(1) translate(19px,-20px)}:host([pin].grabbable) [part=thumb]{transform:scale(.7);transform:none}:host [part=input]{margin:0;padding:0;width:var(--input-field-width,40px);min-width:40px;text-align:center;height:100%}:host [part=input][name=to],:host [part=input][name=value]{margin-left:16px}:host [part=input][name=from]{margin-right:16px}:host(:not([disabled]):not([readonly]):hover){cursor:pointer}:host [part=thumb]{box-sizing:border-box;transform:scale(.7);background:var(--thumb-color,#fafafa);top:calc(4px / 2);border-radius:0;width:8px;height:20px;transform:none;border:1px solid #404040}:host([disabled]) [part=thumb]{border-color:#ccc}:host(:not([disabled]):not([readonly]):not(.grabbable)) [part=thumb]:hover{background-color:var(--thumb-color,#1429bd);border-color:var(--thumb-color,#1429bd)}:host(.grabbable) [part=thumb]{border-width:2px;transform:scale(1);border:1px solid var(--thumb-color,#0f1e8a);background-color:var(--thumb-color,#0f1e8a);transform:none}');
3
+ elf.customStyles.define('ef-slider', ':host{touch-action:manipulation;height:24px;margin:1px 0;opacity:.9;opacity:1}:host(:not([disabled]):hover){opacity:1}:host [part=track-wrapper]{height:4px;background:var(--track-color,#d9d9d9);top:calc((100% - 4px)/ 2)}:host(:not([disabled])) [part=track-fill]{height:inherit;background:var(--thumb-color,#fafafa);background-color:var(--thumb-color,#334bff)}:host([disabled]) [part=thumb],:host([disabled]) [part=thumb]:hover,:host([disabled]) [part=track-fill],:host([disabled]) [part=track-wrapper]::after{background:#d9d9d9;content:\'\'}:host [part=thumb-container]{height:100%;top:0;margin-left:-4px;width:8px}:host([focused=visible]) [part=thumb-container][active] [part=thumb]{outline:#334bff solid 1px;outline-offset:2px}:host([show-steps]) [part=step-container]{height:inherit}:host([show-steps]:not([disabled])) [part=step]{height:inherit;background-image:linear-gradient(to right,var(--step-color,#334bff),var(--step-color,#334bff) 4px,transparent 0,transparent)}:host([show-steps]:not([disabled])) [part=track-wrapper]::after{height:inherit;width:4px;background-color:var(--step-color,#334bff)}:host [part=pin]{width:26px;height:26px;margin-top:-6px;margin-left:-2px;transform:rotate(-45deg) scale(0) translate(0);transition:transform .1s ease-out;border-radius:50% 50% 50% 0;background-color:var(--pin-color,#fafafa);display:none}:host [part=pin-value-marker]{font-family:inherit;font-size:.8em;color:var(--pin-text-color,#fff);line-height:1.25rem;font-weight:400;letter-spacing:.01786em;text-decoration:inherit;text-transform:inherit;transform:rotate(45deg);-webkit-user-select:none;-moz-user-select:none;user-select:none}:host([pin].grabbable) [part=pin]{transform:rotate(-45deg) scale(1) translate(19px,-20px)}:host([pin].grabbable) [part=thumb]{transform:scale(.7);transform:none}:host [part=input]{margin:0;padding:0;width:var(--input-field-width,40px);min-width:40px;text-align:center;height:100%}:host [part=input][name=to],:host [part=input][name=value]{margin-left:16px}:host [part=input][name=from]{margin-right:16px}:host(:not([disabled]):not([readonly]):hover){cursor:pointer}:host [part=thumb]{box-sizing:border-box;transform:scale(.7);background:var(--thumb-color,#fafafa);top:calc(4px / 2);border-radius:0;width:8px;height:20px;transform:none;border:1px solid #404040}:host([disabled]) [part=thumb]{border-color:#ccc}:host(:not([disabled]):not([readonly]):not(.grabbable)) [part=thumb]:hover{background-color:var(--thumb-color,#1429bd);border-color:var(--thumb-color,#1429bd)}:host(.grabbable) [part=thumb]{border-width:2px;transform:scale(1);border:1px solid var(--thumb-color,#0f1e8a);background-color:var(--thumb-color,#0f1e8a);transform:none}');
package/lib/slider/themes/solar/charcoal/index.js CHANGED
@@ -1,3 +1,3 @@
1
1
  import '@refinitiv-ui/elements/number-field/themes/solar/charcoal';
2
2
 
3
- elf.customStyles.define('ef-slider', ':host{touch-action:manipulation;height:23px;margin:1px 0;opacity:.9}:host(:not([disabled]):hover){opacity:1}:host [part=track-wrapper]{height:3px;background:var(--track-color,#666570)}:host(:not([disabled])) [part=track-fill]{height:inherit;background:var(--thumb-color,#f93)}:host([disabled]) [part=thumb],:host([disabled]) [part=thumb]:hover,:host([disabled]) [part=track-fill],:host([disabled]) [part=track-wrapper]::after{background:#666570;content:\'\'}:host [part=thumb-container]{width:22px;height:100%;margin-left:-9.5px}:host [part=thumb]{top:calc((100% - 20px + 3px)/ 2);height:20px;width:20px;box-sizing:border-box;border:3px solid transparent;border-radius:100%;transform:scale(.7);background:var(--thumb-color,#f93)}:host([focused=visible]) [part=thumb-container][active] [part=thumb]{outline:#f93 solid 1px;outline-offset:2px}:host(.grabbable) [part=thumb]{border-width:2px;transform:scale(1)}:host([show-steps]) [part=step-container]{height:inherit}:host([show-steps]:not([disabled])) [part=step]{height:inherit;background-image:linear-gradient(to right,var(--step-color,#f93),var(--step-color,#f93) 3px,transparent 0,transparent)}:host([show-steps]:not([disabled])) [part=track-wrapper]::after{height:inherit;width:3px;background-color:var(--step-color,#f93)}:host [part=pin]{width:26px;height:26px;margin-top:-6px;margin-left:-2px;transform:rotate(-45deg) scale(0) translate(0);transition:transform .1s ease-out;border-radius:50% 50% 50% 0;background-color:var(--pin-color,#f93)}:host [part=pin-value-marker]{font-family:inherit;font-size:.8em;color:var(--pin-text-color,#fff);line-height:1.25rem;font-weight:400;letter-spacing:.01786em;text-decoration:inherit;text-transform:inherit;transform:rotate(45deg);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}:host([pin].grabbable) [part=pin]{transform:rotate(-45deg) scale(1) translate(19px,-20px)}:host([pin].grabbable) [part=thumb]{transform:scale(.7)}:host [part=input]{margin:0;padding:0;width:var(--input-field-width,40px);min-width:40px;text-align:center;height:100%}:host [part=input][name=to],:host [part=input][name=value]{margin-left:16px}:host [part=input][name=from]{margin-right:16px}');
3
+ elf.customStyles.define('ef-slider', ':host{touch-action:manipulation;height:23px;margin:1px 0;opacity:.9}:host(:not([disabled]):hover){opacity:1}:host [part=track-wrapper]{height:3px;background:var(--track-color,#666570)}:host(:not([disabled])) [part=track-fill]{height:inherit;background:var(--thumb-color,#f93)}:host([disabled]) [part=thumb],:host([disabled]) [part=thumb]:hover,:host([disabled]) [part=track-fill],:host([disabled]) [part=track-wrapper]::after{background:#666570;content:\'\'}:host [part=thumb-container]{width:22px;height:100%;margin-left:-9.5px}:host [part=thumb]{top:calc((100% - 20px + 3px)/ 2);height:20px;width:20px;box-sizing:border-box;border:3px solid transparent;border-radius:100%;transform:scale(.7);background:var(--thumb-color,#f93)}:host([focused=visible]) [part=thumb-container][active] [part=thumb]{outline:#f93 solid 1px;outline-offset:2px}:host(.grabbable) [part=thumb]{border-width:2px;transform:scale(1)}:host([show-steps]) [part=step-container]{height:inherit}:host([show-steps]:not([disabled])) [part=step]{height:inherit;background-image:linear-gradient(to right,var(--step-color,#f93),var(--step-color,#f93) 3px,transparent 0,transparent)}:host([show-steps]:not([disabled])) [part=track-wrapper]::after{height:inherit;width:3px;background-color:var(--step-color,#f93)}:host [part=pin]{width:26px;height:26px;margin-top:-6px;margin-left:-2px;transform:rotate(-45deg) scale(0) translate(0);transition:transform .1s ease-out;border-radius:50% 50% 50% 0;background-color:var(--pin-color,#f93)}:host [part=pin-value-marker]{font-family:inherit;font-size:.8em;color:var(--pin-text-color,#fff);line-height:1.25rem;font-weight:400;letter-spacing:.01786em;text-decoration:inherit;text-transform:inherit;transform:rotate(45deg);-webkit-user-select:none;-moz-user-select:none;user-select:none}:host([pin].grabbable) [part=pin]{transform:rotate(-45deg) scale(1) translate(19px,-20px)}:host([pin].grabbable) [part=thumb]{transform:scale(.7)}:host [part=input]{margin:0;padding:0;width:var(--input-field-width,40px);min-width:40px;text-align:center;height:100%}:host [part=input][name=to],:host [part=input][name=value]{margin-left:16px}:host [part=input][name=from]{margin-right:16px}');
package/lib/slider/themes/solar/pearl/index.js CHANGED
@@ -1,3 +1,3 @@
1
1
  import '@refinitiv-ui/elements/number-field/themes/solar/pearl';
2
2
 
3
- elf.customStyles.define('ef-slider', ':host{touch-action:manipulation;height:23px;margin:1px 0;opacity:.9}:host(:not([disabled]):hover){opacity:1}:host [part=track-wrapper]{height:3px;background:var(--track-color,#d5d8db)}:host(:not([disabled])) [part=track-fill]{height:inherit;background:var(--thumb-color,#f93)}:host([disabled]) [part=thumb],:host([disabled]) [part=thumb]:hover,:host([disabled]) [part=track-fill],:host([disabled]) [part=track-wrapper]::after{background:#d5d8db;content:\'\'}:host [part=thumb-container]{width:22px;height:100%;margin-left:-9.5px}:host [part=thumb]{top:calc((100% - 20px + 3px)/ 2);height:20px;width:20px;box-sizing:border-box;border:3px solid transparent;border-radius:100%;transform:scale(.7);background:var(--thumb-color,#f93)}:host([focused=visible]) [part=thumb-container][active] [part=thumb]{outline:#f93 solid 1px;outline-offset:2px}:host(.grabbable) [part=thumb]{border-width:2px;transform:scale(1)}:host([show-steps]) [part=step-container]{height:inherit}:host([show-steps]:not([disabled])) [part=step]{height:inherit;background-image:linear-gradient(to right,var(--step-color,#f93),var(--step-color,#f93) 3px,transparent 0,transparent)}:host([show-steps]:not([disabled])) [part=track-wrapper]::after{height:inherit;width:3px;background-color:var(--step-color,#f93)}:host [part=pin]{width:26px;height:26px;margin-top:-6px;margin-left:-2px;transform:rotate(-45deg) scale(0) translate(0);transition:transform .1s ease-out;border-radius:50% 50% 50% 0;background-color:var(--pin-color,#f93)}:host [part=pin-value-marker]{font-family:inherit;font-size:.8em;color:var(--pin-text-color,#fff);line-height:1.25rem;font-weight:400;letter-spacing:.01786em;text-decoration:inherit;text-transform:inherit;transform:rotate(45deg);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}:host([pin].grabbable) [part=pin]{transform:rotate(-45deg) scale(1) translate(19px,-20px)}:host([pin].grabbable) [part=thumb]{transform:scale(.7)}:host [part=input]{margin:0;padding:0;width:var(--input-field-width,40px);min-width:40px;text-align:center;height:100%}:host [part=input][name=to],:host [part=input][name=value]{margin-left:16px}:host [part=input][name=from]{margin-right:16px}');
3
+ elf.customStyles.define('ef-slider', ':host{touch-action:manipulation;height:23px;margin:1px 0;opacity:.9}:host(:not([disabled]):hover){opacity:1}:host [part=track-wrapper]{height:3px;background:var(--track-color,#d5d8db)}:host(:not([disabled])) [part=track-fill]{height:inherit;background:var(--thumb-color,#f93)}:host([disabled]) [part=thumb],:host([disabled]) [part=thumb]:hover,:host([disabled]) [part=track-fill],:host([disabled]) [part=track-wrapper]::after{background:#d5d8db;content:\'\'}:host [part=thumb-container]{width:22px;height:100%;margin-left:-9.5px}:host [part=thumb]{top:calc((100% - 20px + 3px)/ 2);height:20px;width:20px;box-sizing:border-box;border:3px solid transparent;border-radius:100%;transform:scale(.7);background:var(--thumb-color,#f93)}:host([focused=visible]) [part=thumb-container][active] [part=thumb]{outline:#f93 solid 1px;outline-offset:2px}:host(.grabbable) [part=thumb]{border-width:2px;transform:scale(1)}:host([show-steps]) [part=step-container]{height:inherit}:host([show-steps]:not([disabled])) [part=step]{height:inherit;background-image:linear-gradient(to right,var(--step-color,#f93),var(--step-color,#f93) 3px,transparent 0,transparent)}:host([show-steps]:not([disabled])) [part=track-wrapper]::after{height:inherit;width:3px;background-color:var(--step-color,#f93)}:host [part=pin]{width:26px;height:26px;margin-top:-6px;margin-left:-2px;transform:rotate(-45deg) scale(0) translate(0);transition:transform .1s ease-out;border-radius:50% 50% 50% 0;background-color:var(--pin-color,#f93)}:host [part=pin-value-marker]{font-family:inherit;font-size:.8em;color:var(--pin-text-color,#fff);line-height:1.25rem;font-weight:400;letter-spacing:.01786em;text-decoration:inherit;text-transform:inherit;transform:rotate(45deg);-webkit-user-select:none;-moz-user-select:none;user-select:none}:host([pin].grabbable) [part=pin]{transform:rotate(-45deg) scale(1) translate(19px,-20px)}:host([pin].grabbable) [part=thumb]{transform:scale(.7)}:host [part=input]{margin:0;padding:0;width:var(--input-field-width,40px);min-width:40px;text-align:center;height:100%}:host [part=input][name=to],:host [part=input][name=value]{margin-left:16px}:host [part=input][name=from]{margin-right:16px}');
package/lib/tab/themes/halo/dark/index.js CHANGED
@@ -1,4 +1,4 @@
1
1
  import '@refinitiv-ui/elements/icon/themes/halo/dark';
2
2
  import '@refinitiv-ui/elements/label/themes/halo/dark';
3
3
 
4
- elf.customStyles.define('ef-tab', ':host{cursor:pointer;background-color:#404040;color:#ccc;height:36px;padding:9px 12px;outline:0;font-size:12rem;font-weight:500;transition:120ms;position:relative;box-sizing:border-box;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;align-items:center;justify-content:center;touch-action:manipulation}:host [part=icon]{min-width:1em;font-size:1.5em}:host [part=label-container]{display:flex;align-items:flex-start;flex-direction:column;width:100%;min-width:0}:host(:not([sub-label])) [part=label-container]{align-items:center}:host([icon]) [part=label-container]{padding-left:.3em}:host [part=sub-label]{font-weight:400;font-size:.875em}:host(:not([active]):not(:active):not(:hover)) [part=sub-label]{opacity:.7}:host([sub-label]){height:46px}:host([sub-label]) [part=icon]{font-size:1.8em}:host([sub-label]) [part=close]{font-size:1.25em}:host([sub-label][clears]){padding-right:2.5em}:host([line-clamp="2"]),:host([line-clamp="3"]){height:46px}:host([icon][sub-label]) [part=label-container]{padding-left:.5em}:host([clears]){padding-right:2em}:host [part=close-container]{position:absolute;top:0;right:0;bottom:0;display:flex;justify-content:center;align-items:center}:host [part=close]{margin-right:.5em;min-width:1em;font-size:1em}:host([clears-on-hover]) [part=close]{color:#fff}:host([clears-on-hover]) [part=close-container]{width:2em;opacity:0;transition:120ms;background:#1429bd;box-shadow:-1em 0 .75em -.5em #1429bd}:host([active]){color:#fff;background-color:#334bff}:host([active]:hover){background-color:#1429bd}:host([active]:hover[clears-on-hover]) [part=close-container]{background-color:#1429bd;box-shadow:-1em 0 .75em -.5em #1429bd}:host([active]:active){background-color:#0f1e8a}:host([active]:active[clears-on-hover]) [part=close-container]{background-color:#0f1e8a;box-shadow:-1em 0 .75em -.5em #0f1e8a}:host([active][disabled]){color:rgba(255,255,255,.5);background-color:rgba(51,75,255,.5)}:host([disabled]){pointer-events:none;color:rgba(204,204,204,.5);background-color:rgba(64,64,64,.5)}:host(:focus:not([focused])),:host([focused=visible]){box-shadow:none;background-color:#1429bd}:host(:focus:not([focused]):not([active]):not(:hover)),:host([focused=visible]:not([active]):not(:hover)){color:#6678ff;background-color:#404040}:host(:hover){color:#fff;box-shadow:0 0 0 0 rgba(0,0,0,.8);background-color:#1429bd}:host(:hover[clears-on-hover]) [part=close-container]{opacity:1}:host(:active){color:#fff;background-color:#0f1e8a}:host(:active[clears-on-hover]) [part=close-container]{background-color:#0f1e8a;box-shadow:-1em 0 .75em -.5em #0f1e8a}:host([level="1"]){border-right:1px solid #0d0d0d}:host([level="2"]:not(:last-child)){border-right:none}:host([level="2"]:not(:last-child)) [part=label-container]::after{content:\'\';position:absolute;margin:auto;width:1px;background:#404040;height:70%;right:0;top:0;bottom:0;z-index:1}:host([level="2"]:not(:active):not([active]):not(:hover)){background-color:#262626}:host([level="2"][active]:not(:active):not(:hover)){color:#6678ff;background-color:#0d0d0d}:host([level="2"][active]:focus:not([focused])),:host([level="2"][focused=visible]:not(:active):not(:hover)){color:#6678ff}:host([level="3"]){border-bottom:2px solid transparent;color:#ccc;background-color:#0d0d0d}:host([level="3"][clears-on-hover]) [part=close-container]{background:#0d0d0d;box-shadow:-1em 0 .75em -.5em #0d0d0d}:host([level="3"]:focus:not([focused])),:host([level="3"][focused=visible]){color:#fff;background-color:#262626}:host([level="3"]:active),:host([level="3"]:hover),:host([level="3"][active]){color:#fff;background-color:#0d0d0d;border-color:#334bff}:host([level="3"]:active[clears-on-hover]) [part=close-container],:host([level="3"]:hover[clears-on-hover]) [part=close-container],:host([level="3"][active][clears-on-hover]) [part=close-container]{background:#0d0d0d;box-shadow:-1em 0 .75em -.5em #0d0d0d}:host([level="3"]:active) [part=close],:host([level="3"]:hover) [part=close],:host([level="3"][active]) [part=close]{color:#fff}:host([level="3"]:hover){border-color:#1429bd}:host([level="3"]:active){border-color:#0f1e8a}');
4
+ elf.customStyles.define('ef-tab', ':host{cursor:pointer;background-color:#404040;color:#ccc;height:36px;padding:9px 12px;outline:0;font-size:12rem;font-weight:500;transition:120ms;position:relative;box-sizing:border-box;-webkit-user-select:none;-moz-user-select:none;user-select:none;align-items:center;justify-content:center;touch-action:manipulation}:host [part=icon]{min-width:1em;font-size:1.5em}:host [part=label-container]{display:flex;align-items:flex-start;flex-direction:column;width:100%;min-width:0}:host(:not([sub-label])) [part=label-container]{align-items:center}:host([icon]) [part=label-container]{padding-left:.3em}:host [part=sub-label]{font-weight:400;font-size:.875em}:host(:not([active]):not(:active):not(:hover)) [part=sub-label]{opacity:.7}:host([sub-label]){height:46px}:host([sub-label]) [part=icon]{font-size:1.8em}:host([sub-label]) [part=close]{font-size:1.25em}:host([sub-label][clears]){padding-right:2.5em}:host([line-clamp="2"]),:host([line-clamp="3"]){height:46px}:host([icon][sub-label]) [part=label-container]{padding-left:.5em}:host([clears]){padding-right:2em}:host [part=close-container]{position:absolute;top:0;right:0;bottom:0;display:flex;justify-content:center;align-items:center}:host [part=close]{margin-right:.5em;min-width:1em;font-size:1em}:host([clears-on-hover]) [part=close]{color:#fff}:host([clears-on-hover]) [part=close-container]{width:2em;opacity:0;transition:120ms;background:#1429bd;box-shadow:-1em 0 .75em -.5em #1429bd}:host([active]){color:#fff;background-color:#334bff}:host([active]:hover){background-color:#1429bd}:host([active]:hover[clears-on-hover]) [part=close-container]{background-color:#1429bd;box-shadow:-1em 0 .75em -.5em #1429bd}:host([active]:active){background-color:#0f1e8a}:host([active]:active[clears-on-hover]) [part=close-container]{background-color:#0f1e8a;box-shadow:-1em 0 .75em -.5em #0f1e8a}:host([active][disabled]){color:rgba(255,255,255,.5);background-color:rgba(51,75,255,.5)}:host([disabled]){pointer-events:none;color:rgba(204,204,204,.5);background-color:rgba(64,64,64,.5)}:host(:focus:not([focused])),:host([focused=visible]){box-shadow:none;background-color:#1429bd}:host(:focus:not([focused]):not([active]):not(:hover)),:host([focused=visible]:not([active]):not(:hover)){color:#6678ff;background-color:#404040}:host(:hover){color:#fff;box-shadow:0 0 0 0 rgba(0,0,0,.8);background-color:#1429bd}:host(:hover[clears-on-hover]) [part=close-container]{opacity:1}:host(:active){color:#fff;background-color:#0f1e8a}:host(:active[clears-on-hover]) [part=close-container]{background-color:#0f1e8a;box-shadow:-1em 0 .75em -.5em #0f1e8a}:host([level="1"]){border-right:1px solid #0d0d0d}:host([level="2"]:not(:last-child)){border-right:none}:host([level="2"]:not(:last-child)) [part=label-container]::after{content:\'\';position:absolute;margin:auto;width:1px;background:#404040;height:70%;right:0;top:0;bottom:0;z-index:1}:host([level="2"]:not(:active):not([active]):not(:hover)){background-color:#262626}:host([level="2"][active]:not(:active):not(:hover)){color:#6678ff;background-color:#0d0d0d}:host([level="2"][active]:focus:not([focused])),:host([level="2"][focused=visible]:not(:active):not(:hover)){color:#6678ff}:host([level="3"]){border-bottom:2px solid transparent;color:#ccc;background-color:#0d0d0d}:host([level="3"][clears-on-hover]) [part=close-container]{background:#0d0d0d;box-shadow:-1em 0 .75em -.5em #0d0d0d}:host([level="3"]:focus:not([focused])),:host([level="3"][focused=visible]){color:#fff;background-color:#262626}:host([level="3"]:active),:host([level="3"]:hover),:host([level="3"][active]){color:#fff;background-color:#0d0d0d;border-color:#334bff}:host([level="3"]:active[clears-on-hover]) [part=close-container],:host([level="3"]:hover[clears-on-hover]) [part=close-container],:host([level="3"][active][clears-on-hover]) [part=close-container]{background:#0d0d0d;box-shadow:-1em 0 .75em -.5em #0d0d0d}:host([level="3"]:active) [part=close],:host([level="3"]:hover) [part=close],:host([level="3"][active]) [part=close]{color:#fff}:host([level="3"]:hover){border-color:#1429bd}:host([level="3"]:active){border-color:#0f1e8a}');
package/lib/tab/themes/halo/light/index.js CHANGED
@@ -1,4 +1,4 @@
1
1
  import '@refinitiv-ui/elements/icon/themes/halo/light';
2
2
  import '@refinitiv-ui/elements/label/themes/halo/light';
3
3
 
4
- elf.customStyles.define('ef-tab', ':host{cursor:pointer;background-color:#e6e6e6;color:#0d0d0d;height:36px;padding:9px 12px;outline:0;font-size:12rem;font-weight:500;transition:120ms;position:relative;box-sizing:border-box;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;align-items:center;justify-content:center;touch-action:manipulation}:host [part=icon]{min-width:1em;font-size:1.5em}:host [part=label-container]{display:flex;align-items:flex-start;flex-direction:column;width:100%;min-width:0}:host(:not([sub-label])) [part=label-container]{align-items:center}:host([icon]) [part=label-container]{padding-left:.3em}:host [part=sub-label]{font-weight:400;font-size:.875em}:host(:not([active]):not(:active):not(:hover)) [part=sub-label]{opacity:.7}:host([sub-label]){height:46px}:host([sub-label]) [part=icon]{font-size:1.8em}:host([sub-label]) [part=close]{font-size:1.25em}:host([sub-label][clears]){padding-right:2.5em}:host([line-clamp="2"]),:host([line-clamp="3"]){height:46px}:host([icon][sub-label]) [part=label-container]{padding-left:.5em}:host([clears]){padding-right:2em}:host [part=close-container]{position:absolute;top:0;right:0;bottom:0;display:flex;justify-content:center;align-items:center}:host [part=close]{margin-right:.5em;min-width:1em;font-size:1em}:host([clears-on-hover]) [part=close]{color:#fff}:host([clears-on-hover]) [part=close-container]{width:2em;opacity:0;transition:120ms;background:#1429bd;box-shadow:-1em 0 .75em -.5em #1429bd}:host([active]){color:#fff;background-color:#334bff}:host([active]:hover){background-color:#1429bd}:host([active]:hover[clears-on-hover]) [part=close-container]{background-color:#1429bd;box-shadow:-1em 0 .75em -.5em #1429bd}:host([active]:active){background-color:#0f1e8a}:host([active]:active[clears-on-hover]) [part=close-container]{background-color:#0f1e8a;box-shadow:-1em 0 .75em -.5em #0f1e8a}:host([active][disabled]){color:rgba(255,255,255,.5);background-color:rgba(51,75,255,.5)}:host([disabled]){pointer-events:none;color:rgba(13,13,13,.5);background-color:rgba(230,230,230,.5)}:host(:focus:not([focused])),:host([focused=visible]){box-shadow:none;background-color:#1429bd}:host(:focus:not([focused]):not([active]):not(:hover)),:host([focused=visible]:not([active]):not(:hover)){color:#6678ff;background-color:#e6e6e6}:host(:hover){color:#fff;box-shadow:0 0 0 0 rgba(0,0,0,.55);background-color:#1429bd}:host(:hover[clears-on-hover]) [part=close-container]{opacity:1}:host(:active){color:#fff;background-color:#0f1e8a}:host(:active[clears-on-hover]) [part=close-container]{background-color:#0f1e8a;box-shadow:-1em 0 .75em -.5em #0f1e8a}:host([level="1"]){border-right:1px solid #fff}:host([level="2"]:not(:last-child)){border-right:none}:host([level="2"]:not(:last-child)) [part=label-container]::after{content:\'\';position:absolute;margin:auto;width:1px;background:#d9d9d9;height:70%;right:0;top:0;bottom:0;z-index:1}:host([level="2"]:not(:active):not([active]):not(:hover)){background-color:#f2f2f2}:host([level="2"][active]:not(:active):not(:hover)){color:#334bff;background-color:#fff}:host([level="2"][active]:focus:not([focused])),:host([level="2"][focused=visible]:not(:active):not(:hover)){color:#6678ff}:host([level="3"]){border-bottom:2px solid transparent;color:#404040;background-color:#fff}:host([level="3"][clears-on-hover]) [part=close-container]{background:#fff;box-shadow:-1em 0 .75em -.5em #fff}:host([level="3"]:focus:not([focused])),:host([level="3"][focused=visible]){color:#0d0d0d;background-color:#f2f2f2}:host([level="3"]:active),:host([level="3"]:hover),:host([level="3"][active]){color:#0d0d0d;background-color:#fff;border-color:#334bff}:host([level="3"]:active[clears-on-hover]) [part=close-container],:host([level="3"]:hover[clears-on-hover]) [part=close-container],:host([level="3"][active][clears-on-hover]) [part=close-container]{background:#fff;box-shadow:-1em 0 .75em -.5em #fff}:host([level="3"]:active) [part=close],:host([level="3"]:hover) [part=close],:host([level="3"][active]) [part=close]{color:#0d0d0d}:host([level="3"]:hover){border-color:#1429bd}:host([level="3"]:active){border-color:#0f1e8a}');
4
+ elf.customStyles.define('ef-tab', ':host{cursor:pointer;background-color:#e6e6e6;color:#0d0d0d;height:36px;padding:9px 12px;outline:0;font-size:12rem;font-weight:500;transition:120ms;position:relative;box-sizing:border-box;-webkit-user-select:none;-moz-user-select:none;user-select:none;align-items:center;justify-content:center;touch-action:manipulation}:host [part=icon]{min-width:1em;font-size:1.5em}:host [part=label-container]{display:flex;align-items:flex-start;flex-direction:column;width:100%;min-width:0}:host(:not([sub-label])) [part=label-container]{align-items:center}:host([icon]) [part=label-container]{padding-left:.3em}:host [part=sub-label]{font-weight:400;font-size:.875em}:host(:not([active]):not(:active):not(:hover)) [part=sub-label]{opacity:.7}:host([sub-label]){height:46px}:host([sub-label]) [part=icon]{font-size:1.8em}:host([sub-label]) [part=close]{font-size:1.25em}:host([sub-label][clears]){padding-right:2.5em}:host([line-clamp="2"]),:host([line-clamp="3"]){height:46px}:host([icon][sub-label]) [part=label-container]{padding-left:.5em}:host([clears]){padding-right:2em}:host [part=close-container]{position:absolute;top:0;right:0;bottom:0;display:flex;justify-content:center;align-items:center}:host [part=close]{margin-right:.5em;min-width:1em;font-size:1em}:host([clears-on-hover]) [part=close]{color:#fff}:host([clears-on-hover]) [part=close-container]{width:2em;opacity:0;transition:120ms;background:#1429bd;box-shadow:-1em 0 .75em -.5em #1429bd}:host([active]){color:#fff;background-color:#334bff}:host([active]:hover){background-color:#1429bd}:host([active]:hover[clears-on-hover]) [part=close-container]{background-color:#1429bd;box-shadow:-1em 0 .75em -.5em #1429bd}:host([active]:active){background-color:#0f1e8a}:host([active]:active[clears-on-hover]) [part=close-container]{background-color:#0f1e8a;box-shadow:-1em 0 .75em -.5em #0f1e8a}:host([active][disabled]){color:rgba(255,255,255,.5);background-color:rgba(51,75,255,.5)}:host([disabled]){pointer-events:none;color:rgba(13,13,13,.5);background-color:rgba(230,230,230,.5)}:host(:focus:not([focused])),:host([focused=visible]){box-shadow:none;background-color:#1429bd}:host(:focus:not([focused]):not([active]):not(:hover)),:host([focused=visible]:not([active]):not(:hover)){color:#6678ff;background-color:#e6e6e6}:host(:hover){color:#fff;box-shadow:0 0 0 0 rgba(0,0,0,.55);background-color:#1429bd}:host(:hover[clears-on-hover]) [part=close-container]{opacity:1}:host(:active){color:#fff;background-color:#0f1e8a}:host(:active[clears-on-hover]) [part=close-container]{background-color:#0f1e8a;box-shadow:-1em 0 .75em -.5em #0f1e8a}:host([level="1"]){border-right:1px solid #fff}:host([level="2"]:not(:last-child)){border-right:none}:host([level="2"]:not(:last-child)) [part=label-container]::after{content:\'\';position:absolute;margin:auto;width:1px;background:#d9d9d9;height:70%;right:0;top:0;bottom:0;z-index:1}:host([level="2"]:not(:active):not([active]):not(:hover)){background-color:#f2f2f2}:host([level="2"][active]:not(:active):not(:hover)){color:#334bff;background-color:#fff}:host([level="2"][active]:focus:not([focused])),:host([level="2"][focused=visible]:not(:active):not(:hover)){color:#6678ff}:host([level="3"]){border-bottom:2px solid transparent;color:#404040;background-color:#fff}:host([level="3"][clears-on-hover]) [part=close-container]{background:#fff;box-shadow:-1em 0 .75em -.5em #fff}:host([level="3"]:focus:not([focused])),:host([level="3"][focused=visible]){color:#0d0d0d;background-color:#f2f2f2}:host([level="3"]:active),:host([level="3"]:hover),:host([level="3"][active]){color:#0d0d0d;background-color:#fff;border-color:#334bff}:host([level="3"]:active[clears-on-hover]) [part=close-container],:host([level="3"]:hover[clears-on-hover]) [part=close-container],:host([level="3"][active][clears-on-hover]) [part=close-container]{background:#fff;box-shadow:-1em 0 .75em -.5em #fff}:host([level="3"]:active) [part=close],:host([level="3"]:hover) [part=close],:host([level="3"][active]) [part=close]{color:#0d0d0d}:host([level="3"]:hover){border-color:#1429bd}:host([level="3"]:active){border-color:#0f1e8a}');
package/lib/tab/themes/solar/charcoal/index.js CHANGED
@@ -1,4 +1,4 @@
1
1
  import '@refinitiv-ui/elements/icon/themes/solar/charcoal';
2
2
  import '@refinitiv-ui/elements/label/themes/solar/charcoal';
3
3
 
4
- elf.customStyles.define('ef-tab', ':host{cursor:pointer;background-color:#3c3c42;color:#c2c2c2;height:23px;padding:7px 15px;outline:0;font-size:13rem;font-weight:500;transition:70ms;position:relative;box-sizing:border-box;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;align-items:center;justify-content:center;touch-action:manipulation;border:1px solid #000;border-left:none}:host [part=label-container]{display:flex;align-items:flex-start;flex-direction:column;width:100%;min-width:0}:host(:not([sub-label])) [part=label-container]{align-items:center}:host([icon]) [part=label-container]{padding-left:.3em}:host [part=sub-label]{font-weight:400;font-size:.875em}:host(:not([active]):not(:active):not(:hover)) [part=sub-label]{opacity:.7}:host([sub-label]){height:33px}:host([sub-label]) [part=close]{font-size:1.25em}:host([sub-label][clears]){padding-right:2.5em}:host([line-clamp="2"]),:host([line-clamp="3"]){height:33px}:host([icon][sub-label]) [part=label-container]{padding-left:.5em}:host([clears]){padding-right:2em}:host [part=close-container]{position:absolute;top:0;right:0;bottom:0;display:flex;justify-content:center;align-items:center}:host [part=close]{margin-right:.5em;min-width:1em;font-size:1em}:host([clears-on-hover]) [part=close]{color:#e2e2e2}:host([clears-on-hover]) [part=close-container]{width:2em;opacity:0;transition:70ms;background:#4a4a4f;box-shadow:-1em 0 .75em -.5em #4a4a4f}:host([active]){color:#0a0a0a;background-color:#f93}:host([active]:hover[clears-on-hover]) [part=close-container]{background-color:#ffa041;box-shadow:-1em 0 .75em -.5em #ffa041}:host([active]:active){background-color:#ed8e2f}:host([active]:active[clears-on-hover]) [part=close-container]{background-color:#ed8e2f;box-shadow:-1em 0 .75em -.5em #ed8e2f}:host([active][disabled]){background-color:#ffad5c;color:rgba(10,10,10,.7)}:host([disabled]){pointer-events:none;color:#c2c2c2;background-color:#636368}:host(:focus:not([focused])),:host([focused=visible]){box-shadow:none;background-color:#ffa041}:host(:focus:not([focused]):not([active]):not(:hover)),:host([focused=visible]:not([active]):not(:hover)){color:#e2e2e2;background-color:#3c3c42}:host(:hover){color:#e2e2e2;box-shadow:0 0 0 0 rgba(0,0,0,.9);background-color:#4a4a4f}:host(:hover[clears-on-hover]) [part=close-container]{opacity:1}:host(:active){color:#c2c2c2;background-color:#38383d}:host(:active[clears-on-hover]) [part=close-container]{background-color:#38383d;box-shadow:-1em 0 .75em -.5em #38383d}:host [part=icon]{min-width:1em;font-size:1em}:host([sub-label]) [part=icon]{font-size:1.2em}:host([active]:hover){color:#0a0a0a;background-color:#ffb366}');
4
+ elf.customStyles.define('ef-tab', ':host{cursor:pointer;background-color:#3c3c42;color:#c2c2c2;height:23px;padding:7px 15px;outline:0;font-size:13rem;font-weight:500;transition:70ms;position:relative;box-sizing:border-box;-webkit-user-select:none;-moz-user-select:none;user-select:none;align-items:center;justify-content:center;touch-action:manipulation;border:1px solid #000;border-left:none}:host [part=label-container]{display:flex;align-items:flex-start;flex-direction:column;width:100%;min-width:0}:host(:not([sub-label])) [part=label-container]{align-items:center}:host([icon]) [part=label-container]{padding-left:.3em}:host [part=sub-label]{font-weight:400;font-size:.875em}:host(:not([active]):not(:active):not(:hover)) [part=sub-label]{opacity:.7}:host([sub-label]){height:33px}:host([sub-label]) [part=close]{font-size:1.25em}:host([sub-label][clears]){padding-right:2.5em}:host([line-clamp="2"]),:host([line-clamp="3"]){height:33px}:host([icon][sub-label]) [part=label-container]{padding-left:.5em}:host([clears]){padding-right:2em}:host [part=close-container]{position:absolute;top:0;right:0;bottom:0;display:flex;justify-content:center;align-items:center}:host [part=close]{margin-right:.5em;min-width:1em;font-size:1em}:host([clears-on-hover]) [part=close]{color:#e2e2e2}:host([clears-on-hover]) [part=close-container]{width:2em;opacity:0;transition:70ms;background:#4a4a4f;box-shadow:-1em 0 .75em -.5em #4a4a4f}:host([active]){color:#0a0a0a;background-color:#f93}:host([active]:hover[clears-on-hover]) [part=close-container]{background-color:#ffa041;box-shadow:-1em 0 .75em -.5em #ffa041}:host([active]:active){background-color:#ed8e2f}:host([active]:active[clears-on-hover]) [part=close-container]{background-color:#ed8e2f;box-shadow:-1em 0 .75em -.5em #ed8e2f}:host([active][disabled]){background-color:#ffad5c;color:rgba(10,10,10,.7)}:host([disabled]){pointer-events:none;color:#c2c2c2;background-color:#636368}:host(:focus:not([focused])),:host([focused=visible]){box-shadow:none;background-color:#ffa041}:host(:focus:not([focused]):not([active]):not(:hover)),:host([focused=visible]:not([active]):not(:hover)){color:#e2e2e2;background-color:#3c3c42}:host(:hover){color:#e2e2e2;box-shadow:0 0 0 0 rgba(0,0,0,.9);background-color:#4a4a4f}:host(:hover[clears-on-hover]) [part=close-container]{opacity:1}:host(:active){color:#c2c2c2;background-color:#38383d}:host(:active[clears-on-hover]) [part=close-container]{background-color:#38383d;box-shadow:-1em 0 .75em -.5em #38383d}:host [part=icon]{min-width:1em;font-size:1em}:host([sub-label]) [part=icon]{font-size:1.2em}:host([active]:hover){color:#0a0a0a;background-color:#ffb366}');
package/lib/tab/themes/solar/pearl/index.js CHANGED
@@ -1,4 +1,4 @@
1
1
  import '@refinitiv-ui/elements/icon/themes/solar/pearl';
2
2
  import '@refinitiv-ui/elements/label/themes/solar/pearl';
3
3
 
4
- elf.customStyles.define('ef-tab', ':host{cursor:pointer;background-color:#fafbfc;color:#505050;height:23px;padding:7px 15px;outline:0;font-size:13rem;font-weight:500;transition:70ms;position:relative;box-sizing:border-box;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;align-items:center;justify-content:center;touch-action:manipulation;border:1px solid #a9afba;border-left:none}:host [part=label-container]{display:flex;align-items:flex-start;flex-direction:column;width:100%;min-width:0}:host(:not([sub-label])) [part=label-container]{align-items:center}:host([icon]) [part=label-container]{padding-left:.3em}:host [part=sub-label]{font-weight:400;font-size:.875em}:host(:not([active]):not(:active):not(:hover)) [part=sub-label]{opacity:.7}:host([sub-label]){height:33px}:host([sub-label]) [part=close]{font-size:1.25em}:host([sub-label][clears]){padding-right:2.5em}:host([line-clamp="2"]),:host([line-clamp="3"]){height:33px}:host([icon][sub-label]) [part=label-container]{padding-left:.5em}:host([clears]){padding-right:2em}:host [part=close-container]{position:absolute;top:0;right:0;bottom:0;display:flex;justify-content:center;align-items:center}:host [part=close]{margin-right:.5em;min-width:1em;font-size:1em}:host([clears-on-hover]) [part=close]{color:#1d1d1d}:host([clears-on-hover]) [part=close-container]{width:2em;opacity:0;transition:70ms;background:#fafbfc;box-shadow:-1em 0 .75em -.5em #fafbfc}:host([active]){color:#505050;background-color:#ffb266}:host([active]:hover[clears-on-hover]) [part=close-container]{background-color:#ffb771;box-shadow:-1em 0 .75em -.5em #ffb771}:host([active]:active){background-color:#eda65f}:host([active]:active[clears-on-hover]) [part=close-container]{background-color:#eda65f;box-shadow:-1em 0 .75em -.5em #eda65f}:host([active][disabled]){color:#a8896a;background-color:#ffc185}:host([disabled]){pointer-events:none;color:#505050;background-color:#fbfcfd}:host(:focus:not([focused])),:host([focused=visible]){box-shadow:none;background-color:#ffb771}:host(:focus:not([focused]):not([active]):not(:hover)),:host([focused=visible]:not([active]):not(:hover)){color:#1d1d1d;background-color:#fafbfc}:host(:hover){color:#1d1d1d;box-shadow:0 0 0 0 rgba(0,0,0,.6);background-color:#fafbfc}:host(:hover[clears-on-hover]) [part=close-container]{opacity:1}:host(:active){color:#505050;background-color:#e8e9ea}:host(:active[clears-on-hover]) [part=close-container]{background-color:#e8e9ea;box-shadow:-1em 0 .75em -.5em #e8e9ea}:host [part=icon]{min-width:1em;font-size:1em}:host([sub-label]) [part=icon]{font-size:1.2em}:host([active]:hover){color:#505050;background-color:#fc9}');
4
+ elf.customStyles.define('ef-tab', ':host{cursor:pointer;background-color:#fafbfc;color:#505050;height:23px;padding:7px 15px;outline:0;font-size:13rem;font-weight:500;transition:70ms;position:relative;box-sizing:border-box;-webkit-user-select:none;-moz-user-select:none;user-select:none;align-items:center;justify-content:center;touch-action:manipulation;border:1px solid #a9afba;border-left:none}:host [part=label-container]{display:flex;align-items:flex-start;flex-direction:column;width:100%;min-width:0}:host(:not([sub-label])) [part=label-container]{align-items:center}:host([icon]) [part=label-container]{padding-left:.3em}:host [part=sub-label]{font-weight:400;font-size:.875em}:host(:not([active]):not(:active):not(:hover)) [part=sub-label]{opacity:.7}:host([sub-label]){height:33px}:host([sub-label]) [part=close]{font-size:1.25em}:host([sub-label][clears]){padding-right:2.5em}:host([line-clamp="2"]),:host([line-clamp="3"]){height:33px}:host([icon][sub-label]) [part=label-container]{padding-left:.5em}:host([clears]){padding-right:2em}:host [part=close-container]{position:absolute;top:0;right:0;bottom:0;display:flex;justify-content:center;align-items:center}:host [part=close]{margin-right:.5em;min-width:1em;font-size:1em}:host([clears-on-hover]) [part=close]{color:#1d1d1d}:host([clears-on-hover]) [part=close-container]{width:2em;opacity:0;transition:70ms;background:#fafbfc;box-shadow:-1em 0 .75em -.5em #fafbfc}:host([active]){color:#505050;background-color:#ffb266}:host([active]:hover[clears-on-hover]) [part=close-container]{background-color:#ffb771;box-shadow:-1em 0 .75em -.5em #ffb771}:host([active]:active){background-color:#eda65f}:host([active]:active[clears-on-hover]) [part=close-container]{background-color:#eda65f;box-shadow:-1em 0 .75em -.5em #eda65f}:host([active][disabled]){color:#a8896a;background-color:#ffc185}:host([disabled]){pointer-events:none;color:#505050;background-color:#fbfcfd}:host(:focus:not([focused])),:host([focused=visible]){box-shadow:none;background-color:#ffb771}:host(:focus:not([focused]):not([active]):not(:hover)),:host([focused=visible]:not([active]):not(:hover)){color:#1d1d1d;background-color:#fafbfc}:host(:hover){color:#1d1d1d;box-shadow:0 0 0 0 rgba(0,0,0,.6);background-color:#fafbfc}:host(:hover[clears-on-hover]) [part=close-container]{opacity:1}:host(:active){color:#505050;background-color:#e8e9ea}:host(:active[clears-on-hover]) [part=close-container]{background-color:#e8e9ea;box-shadow:-1em 0 .75em -.5em #e8e9ea}:host [part=icon]{min-width:1em;font-size:1em}:host([sub-label]) [part=icon]{font-size:1.2em}:host([active]:hover){color:#505050;background-color:#fc9}');
package/lib/tab-bar/index.d.ts CHANGED
@@ -1,12 +1,13 @@
1
1
  import { JSXInterface } from '../jsx';
2
- import { TemplateResult, CSSResultGroup, PropertyValues, ResponsiveElement, ElementSize } from '@refinitiv-ui/core';
2
+ import { TemplateResult, CSSResultGroup, PropertyValues, BasicElement } from '@refinitiv-ui/core';
3
3
  import '../button/index.js';
4
+ import '../layout/index.js';
4
5
  /**
5
6
  * Container for tabs
6
7
  *
7
8
  * @fires value-changed - Fired when the `value` changes.
8
9
  */
9
- export declare class TabBar extends ResponsiveElement {
10
+ export declare class TabBar extends BasicElement {
10
11
  /**
11
12
  * Element version number
12
13
  * @returns version number
@@ -62,19 +63,23 @@ export declare class TabBar extends ResponsiveElement {
62
63
  */
63
64
  protected updated(changedProperties: PropertyValues): void;
64
65
  /**
65
- * private method but can't override
66
- * access modifiers in typescript.
67
- * @ignore
68
- * @param size element dimensions
66
+ * Handles content's container resize
67
+ * @param event Resize event
69
68
  * @returns {void}
70
69
  */
71
- resizedCallback(size: ElementSize): void;
70
+ private handleResize;
72
71
  /**
73
72
  * Return true if incoming value matches one of the existing tabs
74
73
  * @param value Value to check
75
74
  * @returns true if incoming value matches one of the existing tabs
76
75
  */
77
- private isValidValue;
76
+ protected isValidValue(value: string): boolean;
77
+ /**
78
+ * On *user-interaction* set the value and notify.
79
+ * @param value New value
80
+ * @returns {void}
81
+ */
82
+ protected setValueAndNotify(value: string): void;
78
83
  /**
79
84
  * When the slot changes, set the level, toggle the scroll button, and set the value
80
85
  * @returns {void}
package/lib/tab-bar/index.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import { __decorate } from "tslib";
2
- import { html, css, ResponsiveElement } from '@refinitiv-ui/core';
2
+ import { html, css, BasicElement } from '@refinitiv-ui/core';
3
3
  import { customElement } from '@refinitiv-ui/core/decorators/custom-element.js';
4
4
  import { property } from '@refinitiv-ui/core/decorators/property.js';
5
5
  import { query } from '@refinitiv-ui/core/decorators/query.js';
@@ -7,13 +7,14 @@ import { VERSION } from '../version.js';
7
7
  import { tweenAnimate } from './helpers/animate.js';
8
8
  import { Tab } from '../tab/index.js';
9
9
  import '../button/index.js';
10
+ import '../layout/index.js';
10
11
  const BAR_TRAVEL_DISTANCE = 150; // scroll distance
11
12
  /**
12
13
  * Container for tabs
13
14
  *
14
15
  * @fires value-changed - Fired when the `value` changes.
15
16
  */
16
- let TabBar = class TabBar extends ResponsiveElement {
17
+ let TabBar = class TabBar extends BasicElement {
17
18
  constructor() {
18
19
  super(...arguments);
19
20
  this.defaultRole = 'tablist';
@@ -59,6 +60,9 @@ let TabBar = class TabBar extends ResponsiveElement {
59
60
  :host([alignment=right]) {
60
61
  justify-content: flex-end;
61
62
  }
63
+ :host [part=content] {
64
+ flex-grow: 0;
65
+ }
62
66
  `;
63
67
  }
64
68
  /**
@@ -109,15 +113,13 @@ let TabBar = class TabBar extends ResponsiveElement {
109
113
  super.updated(changedProperties);
110
114
  }
111
115
  /**
112
- * private method but can't override
113
- * access modifiers in typescript.
114
- * @ignore
115
- * @param size element dimensions
116
+ * Handles content's container resize
117
+ * @param event Resize event
116
118
  * @returns {void}
117
119
  */
118
- resizedCallback(size) {
120
+ handleResize(event) {
119
121
  if (!this.vertical) {
120
- this.toggleScrollButton(size.width);
122
+ this.toggleScrollButton(event.detail.width);
121
123
  }
122
124
  }
123
125
  /**
@@ -129,6 +131,17 @@ let TabBar = class TabBar extends ResponsiveElement {
129
131
  const tabList = this.getFocusableTabs();
130
132
  return tabList.some(tab => this.getTabValue(tab) === value);
131
133
  }
134
+ /**
135
+ * On *user-interaction* set the value and notify.
136
+ * @param value New value
137
+ * @returns {void}
138
+ */
139
+ setValueAndNotify(value) {
140
+ if (this.value !== value) {
141
+ this.value = value;
142
+ this.notifyPropertyChange('value', value);
143
+ }
144
+ }
132
145
  /**
133
146
  * When the slot changes, set the level, toggle the scroll button, and set the value
134
147
  * @returns {void}
@@ -181,10 +194,7 @@ let TabBar = class TabBar extends ResponsiveElement {
181
194
  const element = event.target;
182
195
  if (element instanceof Tab) {
183
196
  const tabValue = this.getTabValue(element);
184
- if (tabValue !== this.value) {
185
- this.value = this.getTabValue(element);
186
- this.notifyPropertyChange('value', tabValue);
187
- }
197
+ this.setValueAndNotify(tabValue);
188
198
  }
189
199
  }
190
200
  /**
@@ -284,7 +294,8 @@ let TabBar = class TabBar extends ResponsiveElement {
284
294
  focusAndSetActiveTab(tab) {
285
295
  tab.focus();
286
296
  tab.scrollIntoView({ block: 'nearest' });
287
- this.value = this.getTabValue(tab);
297
+ const tabValue = this.getTabValue(tab);
298
+ this.setValueAndNotify(tabValue);
288
299
  }
289
300
  /**
290
301
  * Navigate to first focusable tab of the tab bar
@@ -392,9 +403,9 @@ let TabBar = class TabBar extends ResponsiveElement {
392
403
  render() {
393
404
  return html `
394
405
  ${!this.vertical ? html `<ef-button tabIndex="-1" aria-hidden="true" icon="left" part="left-btn" @tap=${this.handleScrollLeft}></ef-button>` : null}
395
- <div part="content">
406
+ <ef-layout part="content" @resize=${this.handleResize}>
396
407
  <slot @slotchange=${this.onSlotChange}></slot>
397
- </div>
408
+ </ef-layout>
398
409
  ${!this.vertical ? html `<ef-button tabIndex="-1" aria-hidden="true" icon="right" part="right-btn" @tap=${this.handleScrollRight}></ef-button>` : null}
399
410
  `;
400
411
  }
package/lib/tab-bar/themes/halo/dark/index.js CHANGED
@@ -1,4 +1,5 @@
1
1
  import '@refinitiv-ui/elements/tab/themes/halo/dark';
2
2
  import '@refinitiv-ui/elements/button/themes/halo/dark';
3
+ import '@refinitiv-ui/elements/layout/themes/halo/dark';
3
4
 
4
5
  elf.customStyles.define('ef-tab-bar', ':host{position:relative;background-color:#1a1a1a}:host [part=content]{display:flex;overflow:hidden}:host [part=left-btn],:host [part=right-btn]{display:none;position:absolute;height:auto;margin:auto;z-index:2;top:0;bottom:0;background-color:#404040;width:36px;border:none}:host [part=left-btn]:hover,:host [part=right-btn]:hover{background-color:#1429bd}:host [part=left-btn]:active,:host [part=right-btn]:active{background-color:#0f1e8a}:host [part=left-btn]:focus:not([focused]),:host [part=left-btn][focused=visible],:host [part=right-btn]:focus:not([focused]),:host [part=right-btn][focused=visible]{background-color:#1429bd}:host [part=left-btn]:focus:not([focused]):not([active]):not(:hover),:host [part=left-btn][focused=visible]:not([active]):not(:hover),:host [part=right-btn]:focus:not([focused]):not([active]):not(:hover),:host [part=right-btn][focused=visible]:not([active]):not(:hover){color:#6678ff;background-color:#404040}:host [part=left-btn]{left:0}:host [part=right-btn]{right:0}:host([vertical]){width:180px;flex-shrink:0}:host([vertical]) [part=content]{flex-direction:column}:host([vertical]) [part=content] ::slotted(ef-tab){justify-content:flex-start;border-bottom:1px solid #404040}:host [part=left-btn]::after,:host [part=right-btn]::after{content:\'\';position:absolute;margin:auto;width:1px;background:#404040;height:70%;top:0;bottom:0}:host([level="1"]) [part=left-btn]::after,:host([level="1"]) [part=right-btn]::after{content:none}:host([level="1"]) [part=left-btn]{border-right:1px solid #0d0d0d}:host([level="1"]) [part=right-btn]{border-left:1px solid #0d0d0d}:host([level="2"]) [part=left-btn]::after,:host([level="3"]) [part=left-btn]::after{right:0}:host([level="2"]) [part=right-btn]::after,:host([level="3"]) [part=right-btn]::after{left:0}:host([level="2"]) [part=left-btn]:not(:active):not(:hover),:host([level="2"]) [part=right-btn]:not(:active):not(:hover){background-color:#262626}:host([level="2"]) [part=left-btn]::after,:host([level="2"]) [part=right-btn]::after{height:70%}:host([level="3"]) [part=left-btn],:host([level="3"]) [part=right-btn]{border-color:transparent}:host([level="3"]) [part=left-btn]:not(:active):not(:hover),:host([level="3"]) [part=right-btn]:not(:active):not(:hover){background-color:#0d0d0d}:host([level="3"]) [part=left-btn]::after,:host([level="3"]) [part=right-btn]::after{height:30%}:host([vertical]) [part=content] ::slotted(ef-tab){border-bottom-color:transparent;border-right:none!important;background:linear-gradient(#1a1a1a,#1a1a1a) left calc(100% + 1px)/2% 1px no-repeat,linear-gradient(#1a1a1a,#1a1a1a) right calc(100% + 1px)/2% 1px no-repeat,linear-gradient(#404040,#404040) center calc(100% + 1px)/100% 1px no-repeat}:host([vertical]) [part=content] ::slotted(ef-tab[active]:not(:active):not(:hover)){background:linear-gradient(#0d0d0d,#0d0d0d) left calc(100% + 1px)/2% 1px no-repeat,linear-gradient(#0d0d0d,#0d0d0d) right calc(100% + 1px)/2% 1px no-repeat,linear-gradient(#404040,#404040) center calc(100% + 1px)/100% 1px no-repeat}:host([vertical]) [part=content] ::slotted(ef-tab:not([active]):not(:active):not(:hover)){background-color:#1a1a1a}:host([vertical]) [part=content] ::slotted(ef-tab:hover){color:#fff;background-color:#1429bd}:host([vertical]) [part=content] ::slotted(ef-tab:active){background-color:#0f1e8a}:host([vertical][level="1"]) [part=content] ::slotted(ef-tab[active]:not(:active):not(:hover)),:host([vertical][level="3"]) [part=content] ::slotted(ef-tab[active]:not(:active):not(:hover)){color:#6678ff;background-color:#0d0d0d}');
package/lib/tab-bar/themes/halo/light/index.js CHANGED
@@ -1,4 +1,5 @@
1
1
  import '@refinitiv-ui/elements/tab/themes/halo/light';
2
2
  import '@refinitiv-ui/elements/button/themes/halo/light';
3
+ import '@refinitiv-ui/elements/layout/themes/halo/light';
3
4
 
4
5
  elf.customStyles.define('ef-tab-bar', ':host{position:relative;background-color:#f2f2f2}:host [part=content]{display:flex;overflow:hidden}:host [part=left-btn],:host [part=right-btn]{display:none;position:absolute;height:auto;margin:auto;z-index:2;top:0;bottom:0;background-color:#e6e6e6;width:36px;border:none}:host [part=left-btn]:hover,:host [part=right-btn]:hover{background-color:#1429bd}:host [part=left-btn]:active,:host [part=right-btn]:active{background-color:#0f1e8a}:host [part=left-btn]:focus:not([focused]),:host [part=left-btn][focused=visible],:host [part=right-btn]:focus:not([focused]),:host [part=right-btn][focused=visible]{background-color:#1429bd}:host [part=left-btn]:focus:not([focused]):not([active]):not(:hover),:host [part=left-btn][focused=visible]:not([active]):not(:hover),:host [part=right-btn]:focus:not([focused]):not([active]):not(:hover),:host [part=right-btn][focused=visible]:not([active]):not(:hover){color:#6678ff;background-color:#e6e6e6}:host [part=left-btn]{left:0}:host [part=right-btn]{right:0}:host([vertical]){width:180px;flex-shrink:0}:host([vertical]) [part=content]{flex-direction:column}:host([vertical]) [part=content] ::slotted(ef-tab){justify-content:flex-start;border-bottom:1px solid #d9d9d9}:host [part=left-btn]::after,:host [part=right-btn]::after{content:\'\';position:absolute;margin:auto;width:1px;background:#d9d9d9;height:70%;top:0;bottom:0}:host([level="1"]) [part=left-btn]::after,:host([level="1"]) [part=right-btn]::after{content:none}:host([level="1"]) [part=left-btn]{border-right:1px solid #fff}:host([level="1"]) [part=right-btn]{border-left:1px solid #fff}:host([level="2"]) [part=left-btn]::after,:host([level="3"]) [part=left-btn]::after{right:0}:host([level="2"]) [part=right-btn]::after,:host([level="3"]) [part=right-btn]::after{left:0}:host([level="2"]) [part=left-btn]:not(:active):not(:hover),:host([level="2"]) [part=right-btn]:not(:active):not(:hover){background-color:#f2f2f2}:host([level="2"]) [part=left-btn]::after,:host([level="2"]) [part=right-btn]::after{height:70%}:host([level="3"]) [part=left-btn],:host([level="3"]) [part=right-btn]{border-color:transparent}:host([level="3"]) [part=left-btn]:not(:active):not(:hover),:host([level="3"]) [part=right-btn]:not(:active):not(:hover){background-color:#fff}:host([level="3"]) [part=left-btn]::after,:host([level="3"]) [part=right-btn]::after{height:30%}:host([vertical]) [part=content] ::slotted(ef-tab){border-bottom-color:transparent;border-right:none!important;background:linear-gradient(#f2f2f2,#f2f2f2) left calc(100% + 1px)/2% 1px no-repeat,linear-gradient(#f2f2f2,#f2f2f2) right calc(100% + 1px)/2% 1px no-repeat,linear-gradient(#d9d9d9,#d9d9d9) center calc(100% + 1px)/100% 1px no-repeat}:host([vertical]) [part=content] ::slotted(ef-tab[active]:not(:active):not(:hover)){background:linear-gradient(#fff,#fff) left calc(100% + 1px)/2% 1px no-repeat,linear-gradient(#fff,#fff) right calc(100% + 1px)/2% 1px no-repeat,linear-gradient(#d9d9d9,#d9d9d9) center calc(100% + 1px)/100% 1px no-repeat}:host([vertical]) [part=content] ::slotted(ef-tab:not([active]):not(:active):not(:hover)){background-color:#f2f2f2}:host([vertical]) [part=content] ::slotted(ef-tab:hover){color:#fff;background-color:#1429bd}:host([vertical]) [part=content] ::slotted(ef-tab:active){background-color:#0f1e8a}:host([vertical][level="1"]) [part=content] ::slotted(ef-tab[active]:not(:active):not(:hover)),:host([vertical][level="3"]) [part=content] ::slotted(ef-tab[active]:not(:active):not(:hover)){color:#334bff;background-color:#fff}');
package/lib/tab-bar/themes/solar/charcoal/index.js CHANGED
@@ -1,4 +1,5 @@
1
1
  import '@refinitiv-ui/elements/tab/themes/solar/charcoal';
2
2
  import '@refinitiv-ui/elements/button/themes/solar/charcoal';
3
+ import '@refinitiv-ui/elements/layout/themes/solar/charcoal';
3
4
 
4
5
  elf.customStyles.define('ef-tab-bar', ':host{position:relative;background-color:#151516}:host [part=content]{display:flex;overflow:hidden}:host [part=left-btn],:host [part=right-btn]{display:none;position:absolute;height:auto;margin:auto;z-index:2;top:0;bottom:0;background-color:#3c3c42}:host [part=left-btn]:hover,:host [part=right-btn]:hover{background-color:#4a4a4f}:host [part=left-btn]:active,:host [part=right-btn]:active{background-color:#38383d}:host [part=left-btn]:focus:not([focused]),:host [part=left-btn][focused=visible],:host [part=right-btn]:focus:not([focused]),:host [part=right-btn][focused=visible]{background-color:#ffa041}:host [part=left-btn]:focus:not([focused]):not([active]):not(:hover),:host [part=left-btn][focused=visible]:not([active]):not(:hover),:host [part=right-btn]:focus:not([focused]):not([active]):not(:hover),:host [part=right-btn][focused=visible]:not([active]):not(:hover){color:#e2e2e2;background-color:#3c3c42}:host [part=left-btn]{left:0}:host [part=right-btn]{right:0}:host([vertical]){width:180px;flex-shrink:0}:host([vertical]) [part=content]{flex-direction:column}:host([vertical]) [part=content] ::slotted(ef-tab){justify-content:flex-start;border:none;border-bottom:1px solid #000}:host(:not([vertical])) [part=content] ::slotted(ef-tab:first-of-type){border-left:1px solid #000}');
package/lib/tab-bar/themes/solar/pearl/index.js CHANGED
@@ -1,4 +1,5 @@
1
1
  import '@refinitiv-ui/elements/tab/themes/solar/pearl';
2
2
  import '@refinitiv-ui/elements/button/themes/solar/pearl';
3
+ import '@refinitiv-ui/elements/layout/themes/solar/pearl';
3
4
 
4
5
  elf.customStyles.define('ef-tab-bar', ':host{position:relative;background-color:#c2c2c2}:host [part=content]{display:flex;overflow:hidden}:host [part=left-btn],:host [part=right-btn]{display:none;position:absolute;height:auto;margin:auto;z-index:2;top:0;bottom:0;background-color:#fafbfc}:host [part=left-btn]:hover,:host [part=right-btn]:hover{background-color:#fafbfc}:host [part=left-btn]:active,:host [part=right-btn]:active{background-color:#e8e9ea}:host [part=left-btn]:focus:not([focused]),:host [part=left-btn][focused=visible],:host [part=right-btn]:focus:not([focused]),:host [part=right-btn][focused=visible]{background-color:#ffb771}:host [part=left-btn]:focus:not([focused]):not([active]):not(:hover),:host [part=left-btn][focused=visible]:not([active]):not(:hover),:host [part=right-btn]:focus:not([focused]):not([active]):not(:hover),:host [part=right-btn][focused=visible]:not([active]):not(:hover){color:#1d1d1d;background-color:#fafbfc}:host [part=left-btn]{left:0}:host [part=right-btn]{right:0}:host([vertical]){width:180px;flex-shrink:0}:host([vertical]) [part=content]{flex-direction:column}:host([vertical]) [part=content] ::slotted(ef-tab){justify-content:flex-start;border:none;border-bottom:1px solid #a9afba}:host(:not([vertical])) [part=content] ::slotted(ef-tab:first-of-type){border-left:1px solid #a9afba}');
package/lib/text-field/index.js CHANGED
@@ -3,6 +3,7 @@ import { FormFieldElement, css, html } from '@refinitiv-ui/core';
3
3
  import { customElement } from '@refinitiv-ui/core/decorators/custom-element.js';
4
4
  import { property } from '@refinitiv-ui/core/decorators/property.js';
5
5
  import { ifDefined } from '@refinitiv-ui/core/directives/if-defined.js';
6
+ import { isElementOverflown } from '@refinitiv-ui/utils/element.js';
6
7
  import { VERSION } from '../version.js';
7
8
  import { isIE } from '@refinitiv-ui/utils/browser.js';
8
9
  import '../icon/index.js';
@@ -108,9 +109,7 @@ let TextField = class TextField extends FormFieldElement {
108
109
  */
109
110
  firstUpdated(changedProperties) {
110
111
  super.firstUpdated(changedProperties);
111
- if (this.inputElement) {
112
- registerOverflowTooltip(this.inputElement, () => this.value);
113
- }
112
+ registerOverflowTooltip(this, () => this.inputValue, () => this.inputElement ? isElementOverflown(this.inputElement) : false);
114
113
  }
115
114
  /**
116
115
  * Called when the element’s DOM has been updated and rendered
package/lib/text-field/themes/halo/dark/index.js CHANGED
@@ -1,3 +1,3 @@
1
1
  import '@refinitiv-ui/elements/icon/themes/halo/dark';
2
2
 
3
- elf.customStyles.define('ef-text-field', ':host{display:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;text-align:left;font-family:inherit;font-size:12rem;font-weight:400;height:24px;width:152px;max-width:100%;padding:0 8px;margin:1px 0;outline:0;box-sizing:border-box;display:inline-flex;align-items:center;position:relative;vertical-align:middle;border-radius:0;background-color:#0d0d0d;text-overflow:ellipsis;border:1px solid #404040;color:#ccc}:host([disabled]){border:1px solid rgba(64,64,64,.5);color:rgba(204,204,204,.5);background-color:rgba(13,13,13,.5)}:host([type=number]){padding-right:0}:host([warning]){border:1px solid #ffc800}:host([warning][disabled]){color:rgba(204,204,204,.5);border:1px solid rgba(127,100,0,.5)}:host([error]),:host([error][warning]){border:1px solid #f5475b}:host([error][disabled]),:host([error][warning][disabled]){color:rgba(204,204,204,.5);border:1px solid rgba(160,28,43,.5)}:host ::-ms-clear{display:none}:host([focused]){background-size:100% 2px,100% 1px!important;background-position:center bottom!important;border-color:#334bff}:host [part=input]{color:inherit;padding:0;margin:0;flex:1 1 auto;min-width:0;width:100%;height:100%;-webkit-appearance:none;-moz-appearance:none;appearance:none;text-overflow:ellipsis;touch-action:manipulation}:host [part=input]::-webkit-clear-button,:host [part=input]::-webkit-inner-spin-button,:host [part=input]::-webkit-search-cancel-button,:host [part=input]::-webkit-search-decoration{-webkit-appearance:none}:host [part=input]:invalid{box-shadow:none}:host [part=icon]{color:#ccc;min-width:1em;padding-left:2px}:host([disabled]) [part=input]{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}:host ::-moz-selection{color:#fff;background-color:#334bff}:host ::selection{color:#fff;background-color:#334bff}:host(:not([readonly]):not([error]):not([warning]):not([focused]):hover){border-color:grey;color:#fff}:host(:not([readonly]):not([error]):not([warning]):not([focused]):hover) [part=icon]{color:#6678ff}:host([warning]:hover:not([readonly]):not([focused])){color:#fff;border-color:#ffe999}:host([warning][disabled]),:host([warning][readonly]:not([focused])){border-color:rgba(255,233,153,.5)}:host([error]:hover:not([readonly]):not([focused])){color:#fff;border-color:#faa8b1}:host([error][disabled]),:host([error][readonly]:not([focused])),:host([error][warning][disabled]){border-color:rgba(250,168,177,.5)}:host([readonly]:not([focused])){border-color:rgba(64,64,64,.5);background-color:rgba(13,13,13,.5)}:host([readonly]:not([focused])) [part=icon]{color:rgba(204,204,204,.5)}:host([focused]),:host([focused][error][warning]){border-color:#334bff;color:#fff}:host([focused]) [part=icon],:host([focused][error][warning]) [part=icon]{color:#6678ff}');
3
+ elf.customStyles.define('ef-text-field', ':host{display:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;text-align:left;font-family:inherit;font-size:12rem;font-weight:400;height:24px;width:152px;max-width:100%;padding:0 8px;margin:1px 0;outline:0;box-sizing:border-box;display:inline-flex;align-items:center;position:relative;vertical-align:middle;border-radius:0;background-color:#0d0d0d;text-overflow:ellipsis;border:1px solid #404040;color:#ccc}:host([disabled]){border:1px solid rgba(64,64,64,.5);color:rgba(204,204,204,.5);background-color:rgba(13,13,13,.5)}:host([type=number]){padding-right:0}:host([warning]){border:1px solid #ffc800}:host([warning][disabled]){color:rgba(204,204,204,.5);border:1px solid rgba(127,100,0,.5)}:host([error]),:host([error][warning]){border:1px solid #f5475b}:host([error][disabled]),:host([error][warning][disabled]){color:rgba(204,204,204,.5);border:1px solid rgba(160,28,43,.5)}:host ::-ms-clear{display:none}:host([focused]){background-size:100% 2px,100% 1px!important;background-position:center bottom!important;border-color:#334bff}:host [part=input]{color:inherit;padding:0;margin:0;flex:1 1 auto;min-width:0;width:100%;height:100%;-webkit-appearance:none;-moz-appearance:none;appearance:none;text-overflow:ellipsis;touch-action:manipulation}:host [part=input]::-webkit-clear-button,:host [part=input]::-webkit-inner-spin-button,:host [part=input]::-webkit-search-cancel-button,:host [part=input]::-webkit-search-decoration{-webkit-appearance:none}:host [part=input]:invalid{box-shadow:none}:host [part=icon]{color:#ccc;min-width:1em;padding-left:2px}:host([disabled]) [part=input]{-webkit-user-select:none;-moz-user-select:none;user-select:none}:host ::-moz-selection{color:#fff;background-color:#334bff}:host ::selection{color:#fff;background-color:#334bff}:host(:not([readonly]):not([error]):not([warning]):not([focused]):hover){border-color:grey;color:#fff}:host(:not([readonly]):not([error]):not([warning]):not([focused]):hover) [part=icon]{color:#6678ff}:host([warning]:hover:not([readonly]):not([focused])){color:#fff;border-color:#ffe999}:host([warning][disabled]),:host([warning][readonly]:not([focused])){border-color:rgba(255,233,153,.5)}:host([error]:hover:not([readonly]):not([focused])){color:#fff;border-color:#faa8b1}:host([error][disabled]),:host([error][readonly]:not([focused])),:host([error][warning][disabled]){border-color:rgba(250,168,177,.5)}:host([readonly]:not([focused])){border-color:rgba(64,64,64,.5);background-color:rgba(13,13,13,.5)}:host([readonly]:not([focused])) [part=icon]{color:rgba(204,204,204,.5)}:host([focused]),:host([focused][error][warning]){border-color:#334bff;color:#fff}:host([focused]) [part=icon],:host([focused][error][warning]) [part=icon]{color:#6678ff}');
package/lib/text-field/themes/halo/light/index.js CHANGED
@@ -1,3 +1,3 @@
1
1
  import '@refinitiv-ui/elements/icon/themes/halo/light';
2
2
 
3
- elf.customStyles.define('ef-text-field', ':host{display:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;text-align:left;font-family:inherit;font-size:12rem;font-weight:400;height:24px;width:152px;max-width:100%;padding:0 8px;margin:1px 0;outline:0;box-sizing:border-box;display:inline-flex;align-items:center;position:relative;vertical-align:middle;border-radius:0;background-color:#fff;text-overflow:ellipsis;border:1px solid #595959;color:#404040}:host([disabled]){border:1px solid rgba(89,89,89,.5);color:rgba(64,64,64,.5);background-color:rgba(255,255,255,.5)}:host([type=number]){padding-right:0}:host([warning]){border:1px solid #cca000}:host([warning][disabled]){color:rgba(64,64,64,.5);border:1px solid rgba(204,160,0,.5)}:host([error]),:host([error][warning]){border:1px solid #d94255}:host([error][disabled]),:host([error][warning][disabled]){color:rgba(64,64,64,.5);border:1px solid rgba(182,50,67,.5)}:host ::-ms-clear{display:none}:host([focused]){background-size:100% 2px,100% 1px!important;background-position:center bottom!important;border-color:#334bff}:host [part=input]{color:inherit;padding:0;margin:0;flex:1 1 auto;min-width:0;width:100%;height:100%;-webkit-appearance:none;-moz-appearance:none;appearance:none;text-overflow:ellipsis;touch-action:manipulation}:host [part=input]::-webkit-clear-button,:host [part=input]::-webkit-inner-spin-button,:host [part=input]::-webkit-search-cancel-button,:host [part=input]::-webkit-search-decoration{-webkit-appearance:none}:host [part=input]:invalid{box-shadow:none}:host [part=icon]{color:#404040;min-width:1em;padding-left:2px}:host([disabled]) [part=input]{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}:host ::-moz-selection{color:#fff;background-color:#334bff}:host ::selection{color:#fff;background-color:#334bff}:host(:not([readonly]):not([error]):not([warning]):not([focused]):hover){border-color:#0d0d0d;color:#0d0d0d}:host(:not([readonly]):not([error]):not([warning]):not([focused]):hover) [part=icon]{color:#334bff}:host([warning]:hover:not([readonly]):not([focused])){color:#0d0d0d;border-color:#ffe999}:host([warning][disabled]),:host([warning][readonly]:not([focused])){border-color:rgba(255,233,153,.5)}:host([error]:hover:not([readonly]):not([focused])){color:#0d0d0d;border-color:#eeacb4}:host([error][disabled]),:host([error][readonly]:not([focused])),:host([error][warning][disabled]){border-color:rgba(238,172,180,.5)}:host([readonly]:not([focused])){border-color:rgba(89,89,89,.5);background-color:rgba(255,255,255,.5)}:host([readonly]:not([focused])) [part=icon]{color:rgba(64,64,64,.5)}:host([focused]),:host([focused][error][warning]){border-color:#334bff;color:#0d0d0d}:host([focused]) [part=icon],:host([focused][error][warning]) [part=icon]{color:#334bff}');
3
+ elf.customStyles.define('ef-text-field', ':host{display:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;text-align:left;font-family:inherit;font-size:12rem;font-weight:400;height:24px;width:152px;max-width:100%;padding:0 8px;margin:1px 0;outline:0;box-sizing:border-box;display:inline-flex;align-items:center;position:relative;vertical-align:middle;border-radius:0;background-color:#fff;text-overflow:ellipsis;border:1px solid #595959;color:#404040}:host([disabled]){border:1px solid rgba(89,89,89,.5);color:rgba(64,64,64,.5);background-color:rgba(255,255,255,.5)}:host([type=number]){padding-right:0}:host([warning]){border:1px solid #cca000}:host([warning][disabled]){color:rgba(64,64,64,.5);border:1px solid rgba(204,160,0,.5)}:host([error]),:host([error][warning]){border:1px solid #d94255}:host([error][disabled]),:host([error][warning][disabled]){color:rgba(64,64,64,.5);border:1px solid rgba(182,50,67,.5)}:host ::-ms-clear{display:none}:host([focused]){background-size:100% 2px,100% 1px!important;background-position:center bottom!important;border-color:#334bff}:host [part=input]{color:inherit;padding:0;margin:0;flex:1 1 auto;min-width:0;width:100%;height:100%;-webkit-appearance:none;-moz-appearance:none;appearance:none;text-overflow:ellipsis;touch-action:manipulation}:host [part=input]::-webkit-clear-button,:host [part=input]::-webkit-inner-spin-button,:host [part=input]::-webkit-search-cancel-button,:host [part=input]::-webkit-search-decoration{-webkit-appearance:none}:host [part=input]:invalid{box-shadow:none}:host [part=icon]{color:#404040;min-width:1em;padding-left:2px}:host([disabled]) [part=input]{-webkit-user-select:none;-moz-user-select:none;user-select:none}:host ::-moz-selection{color:#fff;background-color:#334bff}:host ::selection{color:#fff;background-color:#334bff}:host(:not([readonly]):not([error]):not([warning]):not([focused]):hover){border-color:#0d0d0d;color:#0d0d0d}:host(:not([readonly]):not([error]):not([warning]):not([focused]):hover) [part=icon]{color:#334bff}:host([warning]:hover:not([readonly]):not([focused])){color:#0d0d0d;border-color:#ffe999}:host([warning][disabled]),:host([warning][readonly]:not([focused])){border-color:rgba(255,233,153,.5)}:host([error]:hover:not([readonly]):not([focused])){color:#0d0d0d;border-color:#eeacb4}:host([error][disabled]),:host([error][readonly]:not([focused])),:host([error][warning][disabled]){border-color:rgba(238,172,180,.5)}:host([readonly]:not([focused])){border-color:rgba(89,89,89,.5);background-color:rgba(255,255,255,.5)}:host([readonly]:not([focused])) [part=icon]{color:rgba(64,64,64,.5)}:host([focused]),:host([focused][error][warning]){border-color:#334bff;color:#0d0d0d}:host([focused]) [part=icon],:host([focused][error][warning]) [part=icon]{color:#334bff}');
package/lib/text-field/themes/solar/charcoal/index.js CHANGED
@@ -1,3 +1,3 @@
1
1
  import '@refinitiv-ui/elements/icon/themes/solar/charcoal';
2
2
 
3
- elf.customStyles.define('ef-text-field', ':host{display:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;text-align:left;font-family:inherit;font-size:13rem;font-weight:400;height:23px;width:140px;max-width:100%;padding:0 5px;margin:1px 0;outline:0;box-sizing:border-box;display:inline-flex;align-items:center;position:relative;vertical-align:middle;color:#c2c2c2;border-radius:0;text-overflow:ellipsis;background-color:#000;border:1px solid #4a4a52}:host([type=number]){padding-right:0}:host([error]),:host([error][warning]){border:1px solid #f5475b}:host([error][disabled]),:host([error][warning][disabled]){color:rgba(194,194,194,.6);border:1px solid rgba(245,71,91,.6)}:host ::-ms-clear{display:none}:host [part=input]{color:inherit;padding:0;margin:0;flex:1 1 auto;min-width:0;width:100%;height:100%;-webkit-appearance:none;-moz-appearance:none;appearance:none;text-overflow:ellipsis;touch-action:manipulation}:host [part=input]::-webkit-clear-button,:host [part=input]::-webkit-inner-spin-button,:host [part=input]::-webkit-search-cancel-button,:host [part=input]::-webkit-search-decoration{-webkit-appearance:none}:host [part=input]:invalid{box-shadow:none}:host [part=icon]{color:#e2e2e2;min-width:1em}:host([disabled]) [part=input]{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}:host([disabled]){border:1px solid rgba(74,74,82,.6);color:rgba(194,194,194,.6)}:host([readonly]){border:1px solid rgba(74,74,82,.6)}:host(:not([focused]):not(:focus):not([disabled]):not([readonly]):hover){border:1px solid #77777d}:host([warning]){background-color:#000;border:1px solid #f93}:host([warning][disabled]){border:1px solid rgba(255,153,51,.6);color:rgba(194,194,194,.6)}:host([warning][readonly]){border:1px solid rgba(255,153,51,.6)}:host([warning]:not([focused]):not(:focus):not([disabled]):not([readonly]):hover){border:1px solid #ffb366}:host([error]),:host([error][warning]:not([focused])){background-color:#000;border:1px solid #f5475b}:host([error][disabled]),:host([error][warning]:not([focused])[disabled]){border:1px solid rgba(245,71,91,.6);color:rgba(194,194,194,.6)}:host([error][readonly]),:host([error][warning]:not([focused])[readonly]){border:1px solid rgba(245,71,91,.6)}:host([error]:not([focused]):not(:focus):not([disabled]):not([readonly]):hover),:host([error][warning]:not([focused]):not([focused]):not(:focus):not([disabled]):not([readonly]):hover){border:1px solid #f87584}:host([highlight]){background-color:#1b252f;border:1px solid #4a4a52}:host([highlight][disabled]){border:1px solid rgba(74,74,82,.6);color:rgba(194,194,194,.6);background-color:rgba(27,37,47,.6)}:host([highlight][readonly]){border:1px solid rgba(74,74,82,.6)}:host([highlight]:not([focused]):not(:focus):not([disabled]):not([readonly]):hover){border:1px solid #77777d}:host([indirect]){color:#0fd;background-color:#000;border:1px solid #898623}:host([indirect][disabled]){border:1px solid rgba(137,134,35,.6);color:rgba(0,255,221,.6)}:host([indirect][readonly]){border:1px solid rgba(137,134,35,.6)}:host([indirect]:not([focused]):not(:focus):not([disabled]):not([readonly]):hover){border:1px solid #a7a45a}:host([focused]){background-size:100% 2px,100% 1px!important;background-position:center bottom!important;border-color:#f93;border-style:dotted}:host([disabled]) [part=input]::-webkit-input-placeholder{color:rgba(102,101,112,.6)}:host([disabled]) [part=input]::-moz-placeholder{color:rgba(102,101,112,.6)}:host([disabled]) [part=input]:-ms-input-placeholder{color:rgba(102,101,112,.6)}');
3
+ elf.customStyles.define('ef-text-field', ':host{display:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;text-align:left;font-family:inherit;font-size:13rem;font-weight:400;height:23px;width:140px;max-width:100%;padding:0 5px;margin:1px 0;outline:0;box-sizing:border-box;display:inline-flex;align-items:center;position:relative;vertical-align:middle;color:#c2c2c2;border-radius:0;text-overflow:ellipsis;background-color:#000;border:1px solid #4a4a52}:host([type=number]){padding-right:0}:host([error]),:host([error][warning]){border:1px solid #f5475b}:host([error][disabled]),:host([error][warning][disabled]){color:rgba(194,194,194,.6);border:1px solid rgba(245,71,91,.6)}:host ::-ms-clear{display:none}:host [part=input]{color:inherit;padding:0;margin:0;flex:1 1 auto;min-width:0;width:100%;height:100%;-webkit-appearance:none;-moz-appearance:none;appearance:none;text-overflow:ellipsis;touch-action:manipulation}:host [part=input]::-webkit-clear-button,:host [part=input]::-webkit-inner-spin-button,:host [part=input]::-webkit-search-cancel-button,:host [part=input]::-webkit-search-decoration{-webkit-appearance:none}:host [part=input]:invalid{box-shadow:none}:host [part=icon]{color:#e2e2e2;min-width:1em}:host([disabled]) [part=input]{-webkit-user-select:none;-moz-user-select:none;user-select:none}:host([disabled]){border:1px solid rgba(74,74,82,.6);color:rgba(194,194,194,.6)}:host([readonly]){border:1px solid rgba(74,74,82,.6)}:host(:not([focused]):not(:focus):not([disabled]):not([readonly]):hover){border:1px solid #77777d}:host([warning]){background-color:#000;border:1px solid #f93}:host([warning][disabled]){border:1px solid rgba(255,153,51,.6);color:rgba(194,194,194,.6)}:host([warning][readonly]){border:1px solid rgba(255,153,51,.6)}:host([warning]:not([focused]):not(:focus):not([disabled]):not([readonly]):hover){border:1px solid #ffb366}:host([error]),:host([error][warning]:not([focused])){background-color:#000;border:1px solid #f5475b}:host([error][disabled]),:host([error][warning]:not([focused])[disabled]){border:1px solid rgba(245,71,91,.6);color:rgba(194,194,194,.6)}:host([error][readonly]),:host([error][warning]:not([focused])[readonly]){border:1px solid rgba(245,71,91,.6)}:host([error]:not([focused]):not(:focus):not([disabled]):not([readonly]):hover),:host([error][warning]:not([focused]):not([focused]):not(:focus):not([disabled]):not([readonly]):hover){border:1px solid #f87584}:host([highlight]){background-color:#1b252f;border:1px solid #4a4a52}:host([highlight][disabled]){border:1px solid rgba(74,74,82,.6);color:rgba(194,194,194,.6);background-color:rgba(27,37,47,.6)}:host([highlight][readonly]){border:1px solid rgba(74,74,82,.6)}:host([highlight]:not([focused]):not(:focus):not([disabled]):not([readonly]):hover){border:1px solid #77777d}:host([indirect]){color:#0fd;background-color:#000;border:1px solid #898623}:host([indirect][disabled]){border:1px solid rgba(137,134,35,.6);color:rgba(0,255,221,.6)}:host([indirect][readonly]){border:1px solid rgba(137,134,35,.6)}:host([indirect]:not([focused]):not(:focus):not([disabled]):not([readonly]):hover){border:1px solid #a7a45a}:host([focused]){background-size:100% 2px,100% 1px!important;background-position:center bottom!important;border-color:#f93;border-style:dotted}:host([disabled]) [part=input]::-webkit-input-placeholder{color:rgba(102,101,112,.6)}:host([disabled]) [part=input]::-moz-placeholder{color:rgba(102,101,112,.6)}:host([disabled]) [part=input]:-ms-input-placeholder{color:rgba(102,101,112,.6)}');