@refinitiv-ui/elements 5.3.3 → 5.3.4

package/lib/combo-box/themes/halo/dark/index.js

@@ -0,0 +1,8 @@
+import '@refinitiv-ui/elements/lib/overlay/themes/halo/dark';
+import '@refinitiv-ui/elements/lib/list/themes/halo/dark';
+import '@refinitiv-ui/elements/lib/counter/themes/halo/dark';
+import '@refinitiv-ui/elements/lib/text-field/themes/halo/dark';
+import '@refinitiv-ui/elements/lib/item/themes/halo/dark';
+import '@refinitiv-ui/elements/lib/icon/themes/halo/dark';
+
+elf.customStyles.define('ef-combo-box', ':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%;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;scrollbar-face-color:#595959;scrollbar-shadow-color:#595959;scrollbar-highlight-color:#595959;scrollbar-arrow-color:#595959;scrollbar-track-color:#1a1a1a;scrollbar-3dlight-color:#1a1a1a;scrollbar-darkshadow-color:#1a1a1a;scrollbar-color:#595959 #1a1a1a;scrollbar-width:thin;color:#ccc;cursor:pointer;scrollbar-face-color:#595959;scrollbar-shadow-color:#595959;scrollbar-highlight-color:#595959;scrollbar-arrow-color:#595959;scrollbar-track-color:#1a1a1a;scrollbar-3dlight-color:#1a1a1a;scrollbar-darkshadow-color:#1a1a1a;scrollbar-color:#595959 #1a1a1a;scrollbar-width:thin;padding:0}: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(:not([readonly])[focused]),:host([focused]){background-size:100% 2px,100% 1px!important;background-position:center bottom!important;border-color:#334bff}:host [part=input]{color:inherit;margin:0;flex:1 1 auto;min-width:0;height:100%;-webkit-appearance:none;-moz-appearance:none;appearance:none;text-overflow:ellipsis;touch-action:manipulation;width:100%;padding:0 8px}: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([disabled]) [part=input]{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}:host([readonly]){cursor:default}:host [part=placeholder]{opacity:.5;opacity:.7}:host [part=label],:host [part=placeholder]{margin-right:3px}:host [part~=icon]{color:#ccc;opacity:.7}:host(:not([readonly]):hover) [part~=icon],:host(:not([readonly])[focused]) [part~=icon]{opacity:1}:host(:not([readonly])[focused]) [part~=icon]{color:#334bff}:host([disabled]) [part~=icon]{color:rgba(64,64,64,.5)}:host [part=input-wrapper]{touch-action:manipulation;display:flex;align-items:center;width:100%;height:100%}:host [part~=button]{display:flex;justify-content:center;align-items:center;flex:none;height:100%;width:24px}:host [part=list]{max-width:var(--list-max-width,300px);max-height:var(--list-max-height);display:flex;flex-flow:column nowrap;color:#ccc;max-width:var(--list-max-width,300px);max-height:var(--list-max-height);border:1px solid #334bff;margin:2px 0;background-color:#262626}@media all and (-ms-high-contrast:none),(-ms-high-contrast:active){:host [part=list] ::slotted(ef-list){max-height:inherit}}:host [part=selection-badge]{min-width:21px;flex-shrink:0;height:16px;min-width:20px}:host ::-moz-selection{color:#fff;background-color:#334bff}:host ::selection{color:#fff;background-color:#334bff}:host [part=icon]{color:#ccc;min-width:1em;padding-left:2px;color:inherit}: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([disabled]){border:1px solid rgba(64,64,64,.5);color:rgba(204,204,204,.5);background-color:rgba(13,13,13,.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(:not([readonly])[focused]),:host([focused]),:host([focused][error][warning]){border-color:#334bff;color:#fff}:host([focused]) [part=icon],:host([focused][error][warning]) [part=icon]{color:#6678ff}: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 #404040}: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:#595959;border-radius:0;border:1px solid transparent}::-webkit-scrollbar-thumb:hover{background:#334bff}::-webkit-scrollbar-thumb:active{background:#0f1e8a}::-webkit-scrollbar-track{background:#1a1a1a}::-webkit-scrollbar-thumb:horizontal{background-size:auto 6px;background-repeat:repeat-x;background-image:linear-gradient(to bottom,#595959,#595959);background-color:transparent;background-position:center}::-webkit-scrollbar-thumb:horizontal:hover{background-image:linear-gradient(to bottom,#334bff,#334bff);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,#595959,#595959);background-color:transparent;background-position:center}::-webkit-scrollbar-thumb:vertical:hover{background-image:linear-gradient(to right,#334bff,#334bff);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 #0d0d0d;border-bottom:1px solid #0d0d0d}::-webkit-scrollbar-track:vertical{border-left:1px solid #0d0d0d;border-right:1px solid #0d0d0d}::-webkit-scrollbar-button{background:0 0/1px 2px no-repeat #1a1a1a;height:16px;width:16px;display:none;border:1px solid #0d0d0d}::-webkit-scrollbar-button:end:decrement,::-webkit-scrollbar-button:start:increment{display:none}::-webkit-scrollbar-button:hover{background-color:#334bff;border:1px solid #334bff}::-webkit-scrollbar-button:active{background-color:#0f1e8a;border:1px solid #0d0d0d}::-webkit-scrollbar-button:horizontal{background-size:2px 1px}::-webkit-scrollbar-button:vertical:start:decrement{border-bottom-color:#0d0d0d;background-image:linear-gradient(#ccc,#ccc),linear-gradient(#ccc,#ccc),linear-gradient(#ccc,#ccc),linear-gradient(#ccc,#ccc),linear-gradient(#ccc,#ccc),linear-gradient(#ccc,#ccc),linear-gradient(#ccc,#ccc),linear-gradient(#ccc,#ccc),linear-gradient(#ccc,#ccc);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:#334bff}::-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:#0d0d0d}::-webkit-scrollbar-button:vertical:end:increment{border-top-color:#0d0d0d;background-image:linear-gradient(#ccc,#ccc),linear-gradient(#ccc,#ccc),linear-gradient(#ccc,#ccc),linear-gradient(#ccc,#ccc),linear-gradient(#ccc,#ccc),linear-gradient(#ccc,#ccc),linear-gradient(#ccc,#ccc),linear-gradient(#ccc,#ccc),linear-gradient(#ccc,#ccc);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:#334bff}::-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:#0d0d0d}::-webkit-scrollbar-button:horizontal:start:decrement{border-right-color:#0d0d0d;background-image:linear-gradient(#ccc,#ccc),linear-gradient(#ccc,#ccc),linear-gradient(#ccc,#ccc),linear-gradient(#ccc,#ccc),linear-gradient(#ccc,#ccc),linear-gradient(#ccc,#ccc),linear-gradient(#ccc,#ccc),linear-gradient(#ccc,#ccc),linear-gradient(#ccc,#ccc);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:#334bff}::-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:#0d0d0d}::-webkit-scrollbar-button:horizontal:end:increment{border-left-color:#0d0d0d;background-image:linear-gradient(#ccc,#ccc),linear-gradient(#ccc,#ccc),linear-gradient(#ccc,#ccc),linear-gradient(#ccc,#ccc),linear-gradient(#ccc,#ccc),linear-gradient(#ccc,#ccc),linear-gradient(#ccc,#ccc),linear-gradient(#ccc,#ccc),linear-gradient(#ccc,#ccc);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:#334bff}::-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:#0d0d0d}:host [part=input-wrapper]{border-left-color:inherit}:host [part~=button-toggle]{border-left:1px solid #404040;border-left-color:inherit}:host [part~=button-toggle]::before{content:\'\';display:block;position:absolute;top:-1px;right:-1px;bottom:-1px;width:24px;border:1px solid transparent}:host(:not([readonly])) [part~=button-clear]:hover{color:#334bff}:host(:not([readonly]):hover) [part~=button-toggle]{color:#334bff}:host(:not([readonly])[focused]) [part~=button-toggle]{border-left-color:#334bff;color:#334bff}:host(:not([readonly])) [part~=button-toggle]:hover{border-left-color:#334bff;color:#fff;background:#334bff}:host(:not([readonly])) [part~=button-toggle]:hover::after{content:\'\';display:block;position:absolute;top:-1px;right:-1px;bottom:-1px;left:-1px;border:1px solid #334bff;pointer-events:none}:host(:not([readonly])) [part~=button-toggle]:active{background:#0f1e8a}:host(:not([readonly])) [part~=button]:active{color:#fff}:host(:not([readonly])) [part~=icon]{color:inherit!important}:host([disabled]) [part~=button-toggle],:host([readonly]) [part~=button-toggle]{border-left-color:rgba(64,64,64,.5)}:host([readonly]) [part~=button-toggle]{color:rgba(204,204,204,.5);cursor:default}:host([focused][readonly]) [part~=button-toggle]{border-left-color:#334bff}:host [part=list] ::slotted(ef-list){display:block}:host [part=selection-badge]:hover{background-color:#334bff;color:#fff}');

package/lib/combo-box/themes/halo/light/index.js

@@ -0,0 +1,8 @@
+import '@refinitiv-ui/elements/lib/overlay/themes/halo/light';
+import '@refinitiv-ui/elements/lib/list/themes/halo/light';
+import '@refinitiv-ui/elements/lib/counter/themes/halo/light';
+import '@refinitiv-ui/elements/lib/text-field/themes/halo/light';
+import '@refinitiv-ui/elements/lib/item/themes/halo/light';
+import '@refinitiv-ui/elements/lib/icon/themes/halo/light';
+
+elf.customStyles.define('ef-combo-box', ':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%;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;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;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;padding:0}: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(:not([readonly])[focused]),:host([focused]){background-size:100% 2px,100% 1px!important;background-position:center bottom!important;border-color:#334bff}:host [part=input]{color:inherit;margin:0;flex:1 1 auto;min-width:0;height:100%;-webkit-appearance:none;-moz-appearance:none;appearance:none;text-overflow:ellipsis;touch-action:manipulation;width:100%;padding:0 8px}: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([disabled]) [part=input]{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}:host([readonly]){cursor:default}:host [part=placeholder]{opacity:.5;opacity:.7}:host [part=label],:host [part=placeholder]{margin-right:3px}:host [part~=icon]{color:#404040;opacity:.7}:host(:not([readonly]):hover) [part~=icon],:host(:not([readonly])[focused]) [part~=icon]{opacity:1}:host(:not([readonly])[focused]) [part~=icon]{color:#334bff}:host([disabled]) [part~=icon]{color:rgba(89,89,89,.5)}:host [part=input-wrapper]{touch-action:manipulation;display:flex;align-items:center;width:100%;height:100%}:host [part~=button]{display:flex;justify-content:center;align-items:center;flex:none;height:100%;width:24px}:host [part=list]{max-width:var(--list-max-width,300px);max-height:var(--list-max-height);display:flex;flex-flow:column nowrap;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}@media all and (-ms-high-contrast:none),(-ms-high-contrast:active){:host [part=list] ::slotted(ef-list){max-height:inherit}}:host [part=selection-badge]{min-width:21px;flex-shrink:0;height:16px;min-width:20px}:host ::-moz-selection{color:#fff;background-color:#334bff}:host ::selection{color:#fff;background-color:#334bff}:host [part=icon]{min-width:1em;padding-left:2px;color:#595959}: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([disabled]){border:1px solid rgba(89,89,89,.5);color:rgba(64,64,64,.5);background-color:rgba(255,255,255,.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(:not([readonly])[focused]),:host([focused]),:host([focused][error][warning]){border-color:#334bff;color:#0d0d0d}:host([focused]) [part=icon],:host([focused][error][warning]) [part=icon]{color:#334bff}:host([disabled]) [part=icon]{color:rgba(89,89,89,.5)}: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:#334bff}::-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,#334bff,#334bff);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,#334bff,#334bff);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:#334bff;border:1px solid #334bff}::-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:#334bff}::-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:#334bff}::-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:#334bff}::-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:#334bff}::-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}:host [part=input-wrapper]{border-left-color:inherit}:host [part~=button-toggle]{border-left:1px solid #595959;border-left-color:inherit}:host [part~=button-toggle]::before{content:\'\';display:block;position:absolute;top:-1px;right:-1px;bottom:-1px;width:24px;border:1px solid transparent}:host(:not([readonly])) [part~=button-clear]:hover{color:#334bff}:host(:not([readonly]):hover) [part~=button-toggle]{color:#334bff}:host(:not([readonly])[focused]) [part~=button-toggle]{border-left-color:#334bff;color:#334bff}:host(:not([readonly])) [part~=button-toggle]:hover{border-left-color:#334bff;color:#fff;background:#334bff}:host(:not([readonly])) [part~=button-toggle]:hover::after{content:\'\';display:block;position:absolute;top:-1px;right:-1px;bottom:-1px;left:-1px;border:1px solid #334bff;pointer-events:none}:host(:not([readonly])) [part~=button-toggle]:active{background:#0f1e8a}:host(:not([readonly])) [part~=button]:active{color:#fff}:host(:not([readonly])) [part~=icon]{color:inherit!important}:host([disabled]) [part~=button-toggle],:host([readonly]) [part~=button-toggle]{border-left-color:rgba(89,89,89,.5)}:host([readonly]) [part~=button-toggle]{color:rgba(64,64,64,.5);cursor:default}:host([focused][readonly]) [part~=button-toggle]{border-left-color:#334bff}:host [part=list] ::slotted(ef-list){display:block}:host [part=selection-badge]:hover{background-color:#334bff;color:#fff}');

package/lib/combo-box/themes/solar/charcoal/index.js

@@ -0,0 +1,8 @@
+import '@refinitiv-ui/elements/lib/overlay/themes/solar/charcoal';
+import '@refinitiv-ui/elements/lib/list/themes/solar/charcoal';
+import '@refinitiv-ui/elements/lib/counter/themes/solar/charcoal';
+import '@refinitiv-ui/elements/lib/text-field/themes/solar/charcoal';
+import '@refinitiv-ui/elements/lib/item/themes/solar/charcoal';
+import '@refinitiv-ui/elements/lib/icon/themes/solar/charcoal';
+
+elf.customStyles.define('ef-combo-box', ':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%;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;background-color:#000;text-overflow:ellipsis;border:1px solid #4a4a52;cursor:pointer;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;padding:0;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;--panel-background-color:#3C3C42}:host([disabled]){color:rgba(194,194,194,.6);border:1px solid rgba(74,74,82,.6)}:host([warning]){border:1px solid #f93}:host([warning][disabled]){color:rgba(194,194,194,.6);border:1px solid rgba(255,153,51,.6)}: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(:not([readonly])[focused]){background-size:100% 2px,100% 1px!important;background-position:center bottom!important;border-color:#f93}:host([readonly]){cursor:default}:host [part=placeholder]{opacity:.5}:host [part=label],:host [part=placeholder]{margin-right:3px}:host [part~=icon]{color:#c2c2c2;opacity:.7}:host(:not([readonly]):hover) [part~=icon],:host(:not([readonly])[focused]) [part~=icon]{opacity:1}:host(:not([readonly])[focused]) [part~=icon]{color:#f93}:host([disabled]) [part~=icon]{color:rgba(74,74,82,.6)}:host [part=input-wrapper]{touch-action:manipulation;display:flex;align-items:center;width:100%;height:100%}:host [part=input]{width:100%}:host [part~=button]{height:28px;display:flex;justify-content:center;align-items:center;flex:none}:host [part=list]{max-width:var(--list-max-width,300px);max-height:var(--list-max-height);display:flex;flex-flow:column nowrap}@media all and (-ms-high-contrast:none),(-ms-high-contrast:active){:host [part=list] ::slotted(ef-list){max-height:inherit}}:host [part=selection-badge]{min-width:22px;flex-shrink:0}::-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}:host [part~=button-toggle]{-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);outline:0;font-family:inherit;font-size:13rem;font-weight:400;min-width:23px;margin:1px 1px 1px 0;transition:70ms;text-align:center;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%);min-width:0;min-height:0;padding:0}@media (-ms-high-contrast:none),(pointer:fine){:host [part~=button-toggle]:focus:not([focused]),:host [part~=button-toggle][focused=visible]{background-color:#3c3c42;color:#c2c2c2;box-shadow:inset 0 0 0 1px #000;border-color:#f93;outline:0}:host [part~=button-toggle]:hover{background-color:#4d4d55;color:#e2e2e2;box-shadow:0 0 0 0 rgba(0,0,0,.9)}:host [part~=button-toggle]:hover:not(:focus){border-color:#000;outline:0}}@media all{:host [part~=button-toggle]:active{background-color:#38383d;color:#c2c2c2;box-shadow:0 0 0 0 rgba(0,0,0,.6)}:host [part~=button-toggle]:active:not(:focus){border-color:#000;outline:0}:host [part~=button-toggle][disabled]{background-color:#3c3c42;color:#c2c2c2;border-color:#333;box-shadow:none;outline:0;pointer-events:none}}:host [part~=button-toggle][cta]{background-color:#f93;color:#0a0a0a;border-color:#000;box-shadow:0 0 0 0 rgba(0,0,0,.6);outline:0;background-image:linear-gradient(rgba(255,255,255,.1) 10%,rgba(255,255,255,0) 100%)}@media (-ms-high-contrast:none),(pointer:fine){:host [part~=button-toggle][cta]:focus:not([focused]),:host [part~=button-toggle][cta][focused=visible]{background-color:#f93;color:#c2c2c2;box-shadow:inset 0 0 0 1px #000;border-color:#f93;outline:0}:host [part~=button-toggle][cta]:hover{background-color:#ffab57;color:#e2e2e2;box-shadow:0 0 0 0 rgba(0,0,0,.9)}:host [part~=button-toggle][cta]:hover:not(:focus){border-color:#000;outline:0}}@media all{:host [part~=button-toggle][cta]:active{background-color:#ed8e2f;color:#0a0a0a;box-shadow:0 0 0 0 rgba(0,0,0,.6)}:host [part~=button-toggle][cta]:active:not(:focus){border-color:#000;outline:0}:host [part~=button-toggle][cta][disabled]{background-color:#f93;color:#0a0a0a;border-color:#333;box-shadow:none;outline:0;pointer-events:none}}:host [part~=button-toggle][toggles]{background-color:#3c3c42;color:#c2c2c2;border-color:#000;box-shadow:0 0 0 0 rgba(0,0,0,.6);outline:0}@media (-ms-high-contrast:none),(pointer:fine){:host [part~=button-toggle][toggles]:focus:not([focused]),:host [part~=button-toggle][toggles][focused=visible]{background-color:#3c3c42;color:#c2c2c2;box-shadow:inset 0 0 0 1px #000;border-color:#f93;outline:0}:host [part~=button-toggle][toggles]:hover{background-color:#4d4d55;color:#e2e2e2;box-shadow:0 0 0 0 rgba(0,0,0,.9)}:host [part~=button-toggle][toggles]:hover:not(:focus){border-color:#000;outline:0}}@media all{:host [part~=button-toggle][toggles]:active{background-color:#38383d;color:#c2c2c2;box-shadow:0 0 0 0 rgba(0,0,0,.6)}:host [part~=button-toggle][toggles]:active:not(:focus){border-color:#000;outline:0}:host [part~=button-toggle][toggles][disabled]{background-color:#3c3c42;color:#c2c2c2;border-color:#333;box-shadow:none;outline:0;pointer-events:none}}:host [part~=button-toggle][toggles][active]{border-color:#000;box-shadow:0 0 0 0 rgba(0,0,0,.6);outline:0}@media (-ms-high-contrast:none),(pointer:fine){:host [part~=button-toggle][toggles][active]:focus:not([focused]),:host [part~=button-toggle][toggles][active][focused=visible]{background-color:#38383d;color:#c2c2c2;box-shadow:inset 0 0 0 1px #000;border-color:#f93;outline:0}:host [part~=button-toggle][toggles][active]:hover{background-color:#494950;color:#e2e2e2;box-shadow:0 0 0 0 rgba(0,0,0,.9)}:host [part~=button-toggle][toggles][active]:hover:not(:focus){border-color:#000;outline:0}}@media all{:host [part~=button-toggle][toggles][active]:active{background-color:#343439;color:#f93;box-shadow:0 0 0 0 rgba(0,0,0,.6)}:host [part~=button-toggle][toggles][active]:active:not(:focus){border-color:#000;outline:0}:host [part~=button-toggle][toggles][active][disabled]{background-color:#38383d;color:#f93;border-color:#333;box-shadow:none;outline:0;pointer-events:none}}@media (-ms-high-contrast:none),(pointer:fine){:host [part~=button-toggle][cta]:hover{color:#0a0a0a}:host [part~=button-toggle][cta]:focus:not([focused]),:host [part~=button-toggle][cta][focused=visible]{border-color:#000;box-shadow:inset 0 0 0 1px #000;color:#0a0a0a}:host [part~=button-toggle]:focus:not([focused]),:host [part~=button-toggle][focused=visible]{border-style:dotted;box-shadow:inset 0 0 0 1px #000}}:host [part~=button-toggle][cta]:active{background-color:#f93;background-image:linear-gradient(rgba(255,255,255,.1) 10%,rgba(255,255,255,0) 100%)}:host [part~=button-toggle][cta][disabled]{opacity:.4}:host [part~=button-toggle][disabled]{opacity:.4}:host [part~=button-toggle][toggles][active]{color:#f93!important;background-color:#38383d!important;background-image:linear-gradient(rgba(255,255,255,0) 0,rgba(255,255,255,.1) 90%)}:host [part~=button-toggle]:active{background-image:linear-gradient(rgba(255,255,255,.1) 10%,rgba(255,255,255,0) 100%)}:host [part~=button]{height:calc(100% - 2px);width:19px}:host [part=selection-badge]{height:17px;min-width:17px;margin-top:0}');

package/lib/combo-box/themes/solar/pearl/index.js

@@ -0,0 +1,8 @@
+import '@refinitiv-ui/elements/lib/overlay/themes/solar/pearl';
+import '@refinitiv-ui/elements/lib/list/themes/solar/pearl';
+import '@refinitiv-ui/elements/lib/counter/themes/solar/pearl';
+import '@refinitiv-ui/elements/lib/text-field/themes/solar/pearl';
+import '@refinitiv-ui/elements/lib/item/themes/solar/pearl';
+import '@refinitiv-ui/elements/lib/icon/themes/solar/pearl';
+
+elf.customStyles.define('ef-combo-box', ':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%;margin:1px 0;outline:0;box-sizing:border-box;display:inline-flex;align-items:center;position:relative;vertical-align:middle;color:#484848;border-radius:0;background-color:#fff;text-overflow:ellipsis;border:1px solid #a9afba;cursor:pointer;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;padding:0;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;--panel-background-color:#FAFBFC}:host([disabled]){color:rgba(72,72,72,.6);border:1px solid rgba(169,175,186,.6)}:host([warning]){border:1px solid #f93}:host([warning][disabled]){color:rgba(72,72,72,.6);border:1px solid rgba(255,153,51,.6)}:host([error]),:host([error][warning]){border:1px solid #d94255}:host([error][disabled]),:host([error][warning][disabled]){color:rgba(72,72,72,.6);border:1px solid rgba(217,66,85,.6)}:host(:not([readonly])[focused]){background-size:100% 2px,100% 1px!important;background-position:center bottom!important;border-color:#ffb266}:host([readonly]){cursor:default}:host [part=placeholder]{opacity:.5}:host [part=label],:host [part=placeholder]{margin-right:3px}:host [part~=icon]{color:#484848;opacity:.7}:host(:not([readonly]):hover) [part~=icon],:host(:not([readonly])[focused]) [part~=icon]{opacity:1}:host(:not([readonly])[focused]) [part~=icon]{color:#f93}:host([disabled]) [part~=icon]{color:rgba(169,175,186,.6)}:host [part=input-wrapper]{touch-action:manipulation;display:flex;align-items:center;width:100%;height:100%}:host [part=input]{width:100%}:host [part~=button]{height:28px;display:flex;justify-content:center;align-items:center;flex:none}:host [part=list]{max-width:var(--list-max-width,300px);max-height:var(--list-max-height);display:flex;flex-flow:column nowrap}@media all and (-ms-high-contrast:none),(-ms-high-contrast:active){:host [part=list] ::slotted(ef-list){max-height:inherit}}:host [part=selection-badge]{min-width:22px;flex-shrink:0}::-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}:host [part~=button-toggle]{-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);outline:0;font-family:inherit;font-size:13rem;font-weight:400;min-width:23px;margin:1px 1px 1px 0;transition:70ms;text-align:center;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%);min-width:0;min-height:0;padding:0}@media (-ms-high-contrast:none),(pointer:fine){:host [part~=button-toggle]:focus:not([focused]),:host [part~=button-toggle][focused=visible]{background-color:#fafbfc;color:#505050;box-shadow:inset 0 0 0 1px #a9afba;border-color:#ee7600;outline:0}:host [part~=button-toggle]:hover{background-color:#fff;color:#1d1d1d;box-shadow:0 0 0 0 rgba(0,0,0,.6)}:host [part~=button-toggle]:hover:not(:focus){border-color:#a9afba;outline:0}}@media all{:host [part~=button-toggle]:active{background-color:#fff;color:#1d1d1d;box-shadow:0 0 0 0 rgba(0,0,0,.3)}:host [part~=button-toggle]:active:not(:focus){border-color:#a9afba;outline:0}:host [part~=button-toggle][disabled]{background-color:#fafbfc;color:#505050;border-color:#babfc8;box-shadow:none;outline:0;pointer-events:none}}:host [part~=button-toggle][cta]{background-color:#ffb266;color:#505050;border-color:#a9afba;box-shadow:0 0 0 0 rgba(0,0,0,.3);outline:0;background-image:linear-gradient(rgba(255,255,255,.4) 0,rgba(255,255,255,0) 100%)}@media (-ms-high-contrast:none),(pointer:fine){:host [part~=button-toggle][cta]:focus:not([focused]),:host [part~=button-toggle][cta][focused=visible]{background-color:#ffb266;color:#505050;box-shadow:inset 0 0 0 1px #a9afba;border-color:#ee7600;outline:0}:host [part~=button-toggle][cta]:hover{background-color:#ffc48a;color:#1d1d1d;box-shadow:0 0 0 0 rgba(0,0,0,.6)}:host [part~=button-toggle][cta]:hover:not(:focus){border-color:#a9afba;outline:0}}@media all{:host [part~=button-toggle][cta]:active{background-color:#fff;color:#1d1d1d;box-shadow:0 0 0 0 rgba(0,0,0,.3)}:host [part~=button-toggle][cta]:active:not(:focus){border-color:#a9afba;outline:0}:host [part~=button-toggle][cta][disabled]{background-color:#ffb266;color:#505050;border-color:#babfc8;box-shadow:none;outline:0;pointer-events:none}}:host [part~=button-toggle][toggles]{background-color:#fafbfc;color:#505050;border-color:#a9afba;box-shadow:0 0 0 0 rgba(0,0,0,.3);outline:0}@media (-ms-high-contrast:none),(pointer:fine){:host [part~=button-toggle][toggles]:focus:not([focused]),:host [part~=button-toggle][toggles][focused=visible]{background-color:#fafbfc;color:#505050;box-shadow:inset 0 0 0 1px #a9afba;border-color:#ee7600;outline:0}:host [part~=button-toggle][toggles]:hover{background-color:#fff;color:#1d1d1d;box-shadow:0 0 0 0 rgba(0,0,0,.6)}:host [part~=button-toggle][toggles]:hover:not(:focus){border-color:#a9afba;outline:0}}@media all{:host [part~=button-toggle][toggles]:active{background-color:#fff;color:#1d1d1d;box-shadow:0 0 0 0 rgba(0,0,0,.3)}:host [part~=button-toggle][toggles]:active:not(:focus){border-color:#a9afba;outline:0}:host [part~=button-toggle][toggles][disabled]{background-color:#fafbfc;color:#505050;border-color:#babfc8;box-shadow:none;outline:0;pointer-events:none}}:host [part~=button-toggle][toggles][active]{border-color:#a9afba;box-shadow:0 0 0 0 rgba(0,0,0,.3);outline:0}@media (-ms-high-contrast:none),(pointer:fine){:host [part~=button-toggle][toggles][active]:focus:not([focused]),:host [part~=button-toggle][toggles][active][focused=visible]{background-color:#fff;color:#f93;box-shadow:inset 0 0 0 1px #a9afba;border-color:#ee7600;outline:0}:host [part~=button-toggle][toggles][active]:hover{background-color:#fff;color:#c60;box-shadow:0 0 0 0 rgba(0,0,0,.6)}:host [part~=button-toggle][toggles][active]:hover:not(:focus){border-color:#a9afba;outline:0}}@media all{:host [part~=button-toggle][toggles][active]:active{background-color:#fff;color:#c60;box-shadow:0 0 0 0 rgba(0,0,0,.3)}:host [part~=button-toggle][toggles][active]:active:not(:focus){border-color:#a9afba;outline:0}:host [part~=button-toggle][toggles][active][disabled]{background-color:#fff;color:#f93;border-color:#babfc8;box-shadow:none;outline:0;pointer-events:none}}@media (-ms-high-contrast:none),(pointer:fine){:host [part~=button-toggle][cta]:hover{color:#505050}:host [part~=button-toggle][cta]:focus:not([focused]),:host [part~=button-toggle][cta][focused=visible]{border-color:#a9afba;box-shadow:inset 0 0 0 1px #a9afba;color:#505050}:host [part~=button-toggle]:focus:not([focused]),:host [part~=button-toggle][focused=visible]{border-style:dotted;box-shadow:inset 0 0 0 1px #a9afba}}:host [part~=button-toggle][cta]:active{background-color:#ffb266;background-image:linear-gradient(rgba(255,255,255,0) 0,rgba(255,255,255,.4) 100%)}:host [part~=button-toggle][cta][disabled]{opacity:.4}:host [part~=button-toggle][disabled]{opacity:.4}:host [part~=button-toggle][toggles][active]{color:#f93!important;background-color:#fff!important;background-image:linear-gradient(rgba(0,0,0,.1) 0,rgba(0,0,0,0) 100%)}:host [part~=button-toggle]:active{background-image:none}:host [part~=button]{height:calc(100% - 2px);width:19px}:host [part=selection-badge]{height:17px;min-width:17px;margin-top:0}');

package/lib/counter/custom-elements.json

@@ -0,0 +1,35 @@
+{
+  "version": "experimental",
+  "tags": [
+    {
+      "name": "ef-counter",
+      "description": "Counter is an item count badge,\nsupport maximun display number and notation of large numbers.",
+      "attributes": [
+        {
+          "name": "value",
+          "description": "The value of counter as string number",
+          "type": "string"
+        },
+        {
+          "name": "max",
+          "description": "Set maximum counter value.\nThis value will be displayed with suffix `+` if count value is larger than max.",
+          "type": "string"
+        }
+      ],
+      "properties": [
+        {
+          "name": "value",
+          "attribute": "value",
+          "description": "The value of counter as string number",
+          "type": "string"
+        },
+        {
+          "name": "max",
+          "attribute": "max",
+          "description": "Set maximum counter value.\nThis value will be displayed with suffix `+` if count value is larger than max.",
+          "type": "string"
+        }
+      ]
+    }
+  ]
+}

package/lib/counter/index.d.ts

@@ -0,0 +1,89 @@
+import { JSXInterface } from '../jsx';
+import { BasicElement, TemplateResult, CSSResult } from '@refinitiv-ui/core';
+/**
+ * Counter is an item count badge,
+ * support maximun display number and notation of large numbers.
+ */
+export declare class Counter extends BasicElement {
+    /**
+     * Element version number
+     * @returns version number
+     */
+    static get version(): string;
+    /**
+     * Internal value of the element.
+     */
+    private _value;
+    /**
+    * Internal max of the element.
+    */
+    private _max;
+    /**
+    * The value of counter as string number
+    * @param value counter value
+    */
+    set value(value: string);
+    /**
+    * The value of counter as string number
+    * @returns {string} counter value
+    */
+    get value(): string;
+    /**
+     * Set maximum counter value.
+     * This value will be displayed with suffix `+` if count value is larger than max.
+     * @param value counter value
+     */
+    set max(value: string);
+    /**
+     * Set maximum counter value.
+     * This value will be displayed with suffix `+` if count value is larger than max.
+     * @returns {string} max value
+     */
+    get max(): string;
+    /**
+     * Cast and validate value to string
+     * @param value Value that is not string which may be set by app developer, e.g. number or invalid string or null or undefined
+     * @param propName name of property that being validate
+     * @returns string representation of the value or return empty string if value is invalid string number
+     */
+    protected validateValue(value: unknown, propName?: string): string;
+    /**
+     * Check if passed value is a valid number
+     * @param value Value to check
+     * @returns {boolean} false if value is invalid
+     */
+    protected isValidNumber(value: string): boolean;
+    /**
+     * Format display counter value
+     * @param value value to format
+     * @returns {string} formatted value
+     */
+    protected formatValue(value: string): string;
+    /**
+     * A `CSSResult` that will be used
+     * to style the host, slotted children
+     * and the internal template of the element.
+     * @returns CSS template
+     */
+    static get styles(): CSSResult | CSSResult[];
+    /**
+     * A `TemplateResult` that will be used
+     * to render the updated internal template.
+     * @return Render template
+     */
+    protected render(): TemplateResult;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'ef-counter': Counter;
+  }
+
+  namespace JSX {
+    interface IntrinsicElements {
+      'ef-counter': Partial<Counter> | JSXInterface.HTMLAttributes<Counter>;
+    }
+  }
+}
+
+export {};

package/lib/counter/index.js

@@ -0,0 +1,155 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { BasicElement, html, css, customElement, property, WarningNotice } from '@refinitiv-ui/core';
+import { VERSION } from '../';
+import { truncateDecimal, convertToCompactNotation } from './utils';
+/**
+ * Counter is an item count badge,
+ * support maximun display number and notation of large numbers.
+ */
+let Counter = class Counter extends BasicElement {
+    constructor() {
+        super(...arguments);
+        /**
+         * Internal value of the element.
+         */
+        this._value = '';
+        /**
+        * Internal max of the element.
+        */
+        this._max = '';
+    }
+    /**
+     * Element version number
+     * @returns version number
+     */
+    static get version() {
+        return VERSION;
+    }
+    /**
+    * The value of counter as string number
+    * @param value counter value
+    */
+    set value(value) {
+        value = this.validateValue(value, 'value');
+        const oldValue = this._value;
+        if (oldValue !== value) {
+            this._value = value;
+            void this.requestUpdate('value', oldValue);
+        }
+    }
+    /**
+    * The value of counter as string number
+    * @returns {string} counter value
+    */
+    get value() {
+        return this._value;
+    }
+    /**
+     * Set maximum counter value.
+     * This value will be displayed with suffix `+` if count value is larger than max.
+     * @param value counter value
+     */
+    set max(value) {
+        value = this.validateValue(value, 'max');
+        const oldValue = this._max;
+        if (oldValue !== value) {
+            this._max = value;
+            void this.requestUpdate('max', oldValue);
+        }
+    }
+    /**
+     * Set maximum counter value.
+     * This value will be displayed with suffix `+` if count value is larger than max.
+     * @returns {string} max value
+     */
+    get max() {
+        return this._max;
+    }
+    /**
+     * Cast and validate value to string
+     * @param value Value that is not string which may be set by app developer, e.g. number or invalid string or null or undefined
+     * @param propName name of property that being validate
+     * @returns string representation of the value or return empty string if value is invalid string number
+     */
+    validateValue(value, propName = '') {
+        // Has a number been passed?
+        if (typeof value === 'number') {
+            value = value.toString(); // stringify the number
+        }
+        // Do we have a valid number string?
+        if (typeof value === 'string' && this.isValidNumber(value)) {
+            return value;
+        }
+        new WarningNotice(`${this.localName} : The specified value "${value}" of ${propName} property is not valid. Default value will be used instead.`).show();
+        return '';
+    }
+    /**
+     * Check if passed value is a valid number
+     * @param value Value to check
+     * @returns {boolean} false if value is invalid
+     */
+    isValidNumber(value) {
+        const number = Number(value);
+        return !isNaN(number) && isFinite(number) && number >= 0;
+    }
+    /**
+     * Format display counter value
+     * @param value value to format
+     * @returns {string} formatted value
+     */
+    formatValue(value) {
+        if (value === '') {
+            return '0';
+        }
+        // Truncate decimal to integer.
+        const countValue = truncateDecimal(value);
+        const maxValue = this.max ? truncateDecimal(this.max) : Infinity;
+        // Format value if value greater than max
+        // If max is null, it will show the value
+        return countValue > maxValue ? `${convertToCompactNotation(maxValue)}+` : convertToCompactNotation(countValue);
+    }
+    /**
+     * A `CSSResult` that will be used
+     * to style the host, slotted children
+     * and the internal template of the element.
+     * @returns CSS template
+     */
+    static get styles() {
+        return css `
+      :host {
+        display: inline-block;
+        position: relative;
+      }
+      [part="number"] {
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        overflow: hidden;
+      }
+    `;
+    }
+    /**
+     * A `TemplateResult` that will be used
+     * to render the updated internal template.
+     * @return Render template
+     */
+    render() {
+        return html `<span part="number">${this.formatValue(this.value)}</span>`;
+    }
+};
+__decorate([
+    property({ type: String })
+], Counter.prototype, "value", null);
+__decorate([
+    property({ type: String })
+], Counter.prototype, "max", null);
+Counter = __decorate([
+    customElement('ef-counter', {
+        alias: 'coral-counter'
+    })
+], Counter);
+export { Counter };

package/lib/counter/themes/halo/dark/index.js

@@ -0,0 +1,3 @@
+import '@refinitiv-ui/elements/lib/icon/themes/halo/dark';
+
+elf.customStyles.define('ef-counter', ':host{touch-action:manipulation;background:#404040;border-radius:10px;transition:120ms;margin:2px;font-family:inherit;font-size:12rem;font-weight:400;padding:0 5px;min-width:21px;max-width:180px;outline:0;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;vertical-align:middle;position:relative;overflow:hidden;max-width:120px;min-width:20px;height:20px;line-height:20px;color:#fff}');

package/lib/counter/themes/halo/light/index.js

@@ -0,0 +1,3 @@
+import '@refinitiv-ui/elements/lib/icon/themes/halo/light';
+
+elf.customStyles.define('ef-counter', ':host{touch-action:manipulation;background:#d9d9d9;border-radius:10px;transition:120ms;margin:2px;font-family:inherit;font-size:12rem;font-weight:400;padding:0 5px;min-width:21px;max-width:180px;outline:0;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;vertical-align:middle;position:relative;overflow:hidden;max-width:120px;min-width:20px;height:20px;line-height:20px;color:#0d0d0d}');

package/lib/counter/themes/solar/charcoal/index.js

@@ -0,0 +1,3 @@
+import '@refinitiv-ui/elements/lib/icon/themes/solar/charcoal';
+
+elf.customStyles.define('ef-counter', ':host{touch-action:manipulation;background:#c2c2c2;border-radius:2px;transition:70ms;margin:3px 3px 0 0;font-family:inherit;font-size:13rem;font-weight:400;padding:0 4px;min-width:22px;max-width:180px;outline:0;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;vertical-align:middle;position:relative;overflow:hidden;color:#000;height:17px;max-width:120px}');

package/lib/counter/themes/solar/pearl/index.js

@@ -0,0 +1,3 @@
+import '@refinitiv-ui/elements/lib/icon/themes/solar/pearl';
+
+elf.customStyles.define('ef-counter', ':host{touch-action:manipulation;background:#a9afba;border-radius:2px;transition:70ms;margin:3px 3px 0 0;font-family:inherit;font-size:13rem;font-weight:400;padding:0 4px;min-width:22px;max-width:180px;outline:0;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;vertical-align:middle;position:relative;overflow:hidden;color:#fff;height:17px;max-width:120px}');

package/lib/counter/utils.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Truncate decimal value
+ * @param value A decimal value, either string or number
+ * @returns {number} Integer value as number
+ */
+declare const truncateDecimal: (value: string | number) => number;
+/**
+ * Convert a large number to abbreviate numbers if value greater than 999
+ * @param value An integer or decimal value as number
+ * @returns {string} Formatted value if greater than 999, otherwise return string value
+ */
+declare const convertToCompactNotation: (value: number) => string;
+export { truncateDecimal, convertToCompactNotation };

package/lib/counter/utils.js

@@ -0,0 +1,52 @@
+const THOUSAND = { value: 1000, notation: 'K' };
+const MILLION = { value: 1e6, notation: 'M' };
+const BILLION = { value: 1e9, notation: 'B' };
+const TRILLION = { value: 1e12, notation: 'T' };
+/**
+ * Truncate decimal value
+ * @param value A decimal value, either string or number
+ * @returns {number} Integer value as number
+ */
+const truncateDecimal = (value) => {
+    // stringify the number
+    value = typeof value === 'number' ? value.toString() : value;
+    // Truncate decimal e.g. '9.9' -> '9'
+    return parseInt(value, 10);
+};
+/**
+ * Compute a decimal place of number that will be prefix of the notation
+ * @param value A decimal value as number
+ * @returns {string} A computed string, either integer or decimal value
+ */
+const computeDecimalPlace = (value) => {
+    // If value is less than 10 and the number after decimal is not 0 e.g. 1.45, return 1 decimal place
+    // Else, if the value is greater than 10 or value is less than 10 and the number after decimal is 0 e.g. 1.01, return integer
+    if (value < 10 && value % 1 >= 0.1) {
+        const splittedNumbers = value.toString().split('.');
+        return `${splittedNumbers[0]}.${splittedNumbers[1].substring(0, 1)}`;
+    }
+    else {
+        return truncateDecimal(value).toString();
+    }
+};
+/**
+ * Convert a large number to abbreviate numbers if value greater than 999
+ * @param value An integer or decimal value as number
+ * @returns {string} Formatted value if greater than 999, otherwise return string value
+ */
+const convertToCompactNotation = (value) => {
+    if (value >= TRILLION.value) {
+        return `${computeDecimalPlace(value / TRILLION.value)}${TRILLION.notation}`;
+    }
+    if (value >= BILLION.value) {
+        return `${computeDecimalPlace(value / BILLION.value)}${BILLION.notation}`;
+    }
+    if (value >= MILLION.value) {
+        return `${computeDecimalPlace(value / MILLION.value)}${MILLION.notation}`;
+    }
+    if (value >= THOUSAND.value) {
+        return `${computeDecimalPlace(value / THOUSAND.value)}${THOUSAND.notation}`;
+    }
+    return value.toString();
+};
+export { truncateDecimal, convertToCompactNotation };