@refinitiv-ui/elements 7.0.0-next.0 → 7.0.0-next.2

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

@@ -3,5 +3,6 @@ import '@refinitiv-ui/elements/list/themes/solar/charcoal';
 import '@refinitiv-ui/elements/counter/themes/solar/charcoal';
 import '@refinitiv-ui/elements/item/themes/solar/charcoal';
 import '@refinitiv-ui/elements/icon/themes/solar/charcoal';
+import '@refinitiv-ui/elements/tooltip/themes/solar/charcoal';
 
-dispatchEvent(new CustomEvent('ef.customStyles.define', { detail: { name: 'ef-combo-box', styles: ':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 [part=list]{max-width:var(--list-max-width,300px);max-height:var(--list-max-height)}:host [part~=input-wrapper]{touch-action:manipulation;display:flex;align-items:center;width:100%;height:100%}:host [part~=input]{display:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;text-align:left;font-family:inherit;font-size:13rem;font-weight:400;height:23px;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;border:1px solid #4a4a52;width:100%;background:0 0;border:none}:host [part~=input][disabled]{color:rgba(194,194,194,.6);border:1px solid rgba(74,74,82,.6)}:host [part~=input][type=number]{padding-right:0}:host [part~=input][warning]{border:1px solid #f93}:host [part~=input][warning][disabled]{color:rgba(194,194,194,.6);border:1px solid rgba(255,153,51,.6)}:host [part~=input][error],:host [part~=input][error][warning]{border:1px solid #f5475b}:host [part~=input][error][disabled],:host [part~=input][error][warning][disabled]{color:rgba(194,194,194,.6);border:1px solid rgba(245,71,91,.6)}:host [part~=input] ::-ms-clear{display:none}:host [part~=button]{height:28px;display:flex;justify-content:center;align-items:center;flex:none}:host [part~=list]{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]{flex-shrink:0}:host([disabled]) [part~=selection-badge]{opacity:.4}::-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;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(0,0,0,.3) 0,rgba(0,0,0,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}:host([disabled]) [part~=icon]{opacity:.4;color:#c2c2c2}' }}));
+dispatchEvent(new CustomEvent('ef.customStyles.define', { detail: { name: 'ef-combo-box', styles: ':host{display:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;text-align:left;font-family:inherit;font-size:13px;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;scrollbar-color:#666570 #2e2e33;padding:0;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 [part=list]{max-width:var(--list-max-width,300px);max-height:var(--list-max-height)}:host [part~=input-wrapper]{touch-action:manipulation;display:flex;align-items:center;width:100%;height:100%}:host [part~=input]{display:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;text-align:left;font-family:inherit;font-size:13px;font-weight:400;height:23px;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;border:1px solid #4a4a52;width:100%;background:0 0;border:none}:host [part~=input][disabled]{color:rgba(194,194,194,.6);border:1px solid rgba(74,74,82,.6)}:host [part~=input][type=number]{padding-right:0}:host [part~=input][warning]{border:1px solid #f93}:host [part~=input][warning][disabled]{color:rgba(194,194,194,.6);border:1px solid rgba(255,153,51,.6)}:host [part~=input][error],:host [part~=input][error][warning]{border:1px solid #f5475b}:host [part~=input][error][disabled],:host [part~=input][error][warning][disabled]{color:rgba(194,194,194,.6);border:1px solid rgba(245,71,91,.6)}:host [part~=button]{height:28px;display:flex;justify-content:center;align-items:center;flex:none}:host [part~=list]{display:flex;flex-flow:column nowrap}:host [part=selection-badge]{flex-shrink:0}:host([disabled]) [part~=selection-badge]{opacity:.4}::-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:13px;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;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 (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 (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 (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 (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 (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(0,0,0,.3) 0,rgba(0,0,0,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}:host([disabled]) [part~=icon]{opacity:.4;color:#c2c2c2}' }}));

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

@@ -3,5 +3,6 @@ import '@refinitiv-ui/elements/list/themes/solar/pearl';
 import '@refinitiv-ui/elements/counter/themes/solar/pearl';
 import '@refinitiv-ui/elements/item/themes/solar/pearl';
 import '@refinitiv-ui/elements/icon/themes/solar/pearl';
+import '@refinitiv-ui/elements/tooltip/themes/solar/pearl';
 
-dispatchEvent(new CustomEvent('ef.customStyles.define', { detail: { name: 'ef-combo-box', styles: ':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 [part=list]{max-width:var(--list-max-width,300px);max-height:var(--list-max-height)}:host [part~=input-wrapper]{touch-action:manipulation;display:flex;align-items:center;width:100%;height:100%}:host [part~=input]{display:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;text-align:left;font-family:inherit;font-size:13rem;font-weight:400;height:23px;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:#484848;border-radius:0;text-overflow:ellipsis;border:1px solid #a9afba;width:100%;background:0 0;border:none}:host [part~=input][disabled]{color:rgba(72,72,72,.6);border:1px solid rgba(169,175,186,.6)}:host [part~=input][type=number]{padding-right:0}:host [part~=input][warning]{border:1px solid #f93}:host [part~=input][warning][disabled]{color:rgba(72,72,72,.6);border:1px solid rgba(255,153,51,.6)}:host [part~=input][error],:host [part~=input][error][warning]{border:1px solid #d94255}:host [part~=input][error][disabled],:host [part~=input][error][warning][disabled]{color:rgba(72,72,72,.6);border:1px solid rgba(217,66,85,.6)}:host [part~=input] ::-ms-clear{display:none}:host [part~=button]{height:28px;display:flex;justify-content:center;align-items:center;flex:none}:host [part~=list]{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]{flex-shrink:0}:host([disabled]) [part~=selection-badge]{opacity:.4}::-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;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}:host([disabled]) [part~=icon]{opacity:.4;color:#505050}:host([disabled]) [part~=button-toggle]{border-color:rgba(169,175,186,.6)}' }}));
+dispatchEvent(new CustomEvent('ef.customStyles.define', { detail: { name: 'ef-combo-box', styles: ':host{display:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;text-align:left;font-family:inherit;font-size:13px;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;scrollbar-color:#8a8a96 #fff;padding:0;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 [part=list]{max-width:var(--list-max-width,300px);max-height:var(--list-max-height)}:host [part~=input-wrapper]{touch-action:manipulation;display:flex;align-items:center;width:100%;height:100%}:host [part~=input]{display:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;text-align:left;font-family:inherit;font-size:13px;font-weight:400;height:23px;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:#484848;border-radius:0;text-overflow:ellipsis;border:1px solid #a9afba;width:100%;background:0 0;border:none}:host [part~=input][disabled]{color:rgba(72,72,72,.6);border:1px solid rgba(169,175,186,.6)}:host [part~=input][type=number]{padding-right:0}:host [part~=input][warning]{border:1px solid #f93}:host [part~=input][warning][disabled]{color:rgba(72,72,72,.6);border:1px solid rgba(255,153,51,.6)}:host [part~=input][error],:host [part~=input][error][warning]{border:1px solid #d94255}:host [part~=input][error][disabled],:host [part~=input][error][warning][disabled]{color:rgba(72,72,72,.6);border:1px solid rgba(217,66,85,.6)}:host [part~=button]{height:28px;display:flex;justify-content:center;align-items:center;flex:none}:host [part~=list]{display:flex;flex-flow:column nowrap}:host [part=selection-badge]{flex-shrink:0}:host([disabled]) [part~=selection-badge]{opacity:.4}::-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:13px;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;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 (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 (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 (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 (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 (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}:host([disabled]) [part~=icon]{opacity:.4;color:#505050}:host([disabled]) [part~=button-toggle]{border-color:rgba(169,175,186,.6)}' }}));

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

@@ -1,3 +1,4 @@
 import '@refinitiv-ui/elements/icon/themes/halo/dark';
+import '@refinitiv-ui/elements/tooltip/themes/halo/dark';
 
-dispatchEvent(new CustomEvent('ef.customStyles.define', { detail: { name: 'ef-counter', styles: ':host{touch-action:manipulation;background:#262626;border-radius:10px;transition:120ms;margin:2px;font-family:inherit;font-weight:400;padding:0 3px;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;border:1px solid #ccc;min-width:14px;height:16px;line-height:20px;color:#fff;font-size:10rem}:host(:hover){background-color:#1429bd;border-color:#1429bd;color:#fff}' }}));
+dispatchEvent(new CustomEvent('ef.customStyles.define', { detail: { name: 'ef-counter', styles: ':host{touch-action:manipulation;background:#262626;border-radius:10px;transition:120ms;margin:2px;font-family:inherit;font-weight:400;padding:0 3px;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;border:1px solid #ccc;min-width:14px;height:16px;line-height:20px;color:#fff;font-size:10px}:host(:hover){background-color:#1429bd;border-color:#1429bd;color:#fff}' }}));

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

@@ -1,3 +1,4 @@
 import '@refinitiv-ui/elements/icon/themes/halo/light';
+import '@refinitiv-ui/elements/tooltip/themes/halo/light';
 
-dispatchEvent(new CustomEvent('ef.customStyles.define', { detail: { name: 'ef-counter', styles: ':host{touch-action:manipulation;background:#f2f2f2;border-radius:10px;transition:120ms;margin:2px;font-family:inherit;font-weight:400;padding:0 3px;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;border:1px solid #ccc;min-width:14px;height:16px;line-height:20px;color:#404040;font-size:10rem}:host(:hover){background-color:#1429bd;border-color:#1429bd;color:#fff}' }}));
+dispatchEvent(new CustomEvent('ef.customStyles.define', { detail: { name: 'ef-counter', styles: ':host{touch-action:manipulation;background:#f2f2f2;border-radius:10px;transition:120ms;margin:2px;font-family:inherit;font-weight:400;padding:0 3px;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;border:1px solid #ccc;min-width:14px;height:16px;line-height:20px;color:#404040;font-size:10px}:host(:hover){background-color:#1429bd;border-color:#1429bd;color:#fff}' }}));

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

@@ -1,3 +1,4 @@
 import '@refinitiv-ui/elements/icon/themes/solar/charcoal';
+import '@refinitiv-ui/elements/tooltip/themes/solar/charcoal';
 
-dispatchEvent(new CustomEvent('ef.customStyles.define', { detail: { name: 'ef-counter', styles: ':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}' }}));
+dispatchEvent(new CustomEvent('ef.customStyles.define', { detail: { name: 'ef-counter', styles: ':host{touch-action:manipulation;background:#c2c2c2;border-radius:2px;transition:70ms;margin:3px 3px 0 0;font-family:inherit;font-size:13px;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

@@ -1,3 +1,4 @@
 import '@refinitiv-ui/elements/icon/themes/solar/pearl';
+import '@refinitiv-ui/elements/tooltip/themes/solar/pearl';
 
-dispatchEvent(new CustomEvent('ef.customStyles.define', { detail: { name: 'ef-counter', styles: ':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}' }}));
+dispatchEvent(new CustomEvent('ef.customStyles.define', { detail: { name: 'ef-counter', styles: ':host{touch-action:manipulation;background:#a9afba;border-radius:2px;transition:70ms;margin:3px 3px 0 0;font-family:inherit;font-size:13px;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/datetime-field/index.d.ts

@@ -262,11 +262,11 @@ export declare class DatetimeField extends TextField {
     reportValidity(): boolean;
     /**
      * Select part
-     * @param index Part index
      * @param parts The list of parts
+     * @param index Part index
      * @returns {void}
      */
-    protected selectPart(index: number | undefined, parts: DateTimeFormatPart[]): void;
+    protected selectPart(parts: DateTimeFormatPart[], index?: number): void;
     /**
      * Change value or selection based on keyboard navigation
      * @param key Navigation key

package/lib/datetime-field/index.js

@@ -438,12 +438,12 @@ let DatetimeField = class DatetimeField extends TextField {
     }
     /**
      * Select part
-     * @param index Part index
      * @param parts The list of parts
+     * @param index Part index
      * @returns {void}
      */
-    selectPart(index = 0, parts) {
-        const { selectionStart, selectionEnd } = selectPart(index, parts);
+    selectPart(parts, index = 0) {
+        const { selectionStart, selectionEnd } = selectPart(parts, index);
         this.partLabel = parts[index] ? parts[index].type : '';
         this.setSelectionRange(selectionStart, selectionEnd);
     }
@@ -487,7 +487,7 @@ let DatetimeField = class DatetimeField extends TextField {
         const selectedPartIndex = getSelectedPartIndex(selection, parts);
         // If no segments selected, select the segment where the cursor is
         if (this.selectionStart === this.selectionEnd) {
-            this.selectPart(selectedPartIndex, parts);
+            this.selectPart(parts, selectedPartIndex);
             event.preventDefault();
             return;
         }
@@ -520,16 +520,16 @@ let DatetimeField = class DatetimeField extends TextField {
                     }
                     this.setValueAndNotify(newValue);
                     this.syncInputValue();
-                    this.selectPart(selectedPartIndex, this.formatToParts(newValue));
+                    this.selectPart(this.formatToParts(newValue), selectedPartIndex);
                     this.resetError();
                     event.preventDefault();
                 }
                 break;
             case 'ArrowRight':
             case 'ArrowLeft':
-                const nextPartIdx = getNextSelectedPartIndex(selection, parts, this.inputValue, key === 'ArrowLeft' ? Direction.Down : Direction.Up);
+                const nextPartIndex = getNextSelectedPartIndex(selection, parts, this.inputValue, key === 'ArrowLeft' ? Direction.Down : Direction.Up);
                 this.selectPartFrame.schedule(() => {
-                    this.selectPart(nextPartIdx, parts);
+                    this.selectPart(parts, nextPartIndex);
                 });
                 break;
             // no default
@@ -563,23 +563,18 @@ let DatetimeField = class DatetimeField extends TextField {
             return;
         }
         switch (event.key) {
-            case 'Up': // IE11
             case 'ArrowUp':
                 this.onNavigation('ArrowUp', event);
                 break;
-            case 'Down':
             case 'ArrowDown':
                 this.onNavigation('ArrowDown', event);
                 break;
-            case 'Left':
             case 'ArrowLeft':
                 this.onNavigation('ArrowLeft', event);
                 break;
-            case 'Right':
             case 'ArrowRight':
                 this.onNavigation('ArrowRight', event);
                 break;
-            case 'Esc':
             case 'Escape':
                 this.onNavigation('Escape', event);
                 break;

package/lib/datetime-field/types.d.ts

@@ -1,10 +1,10 @@
-export declare type NavigationKeys = 'ArrowLeft' | 'ArrowRight' | 'ArrowUp' | 'ArrowDown' | 'Escape';
-export declare type DateTimeFormatPartTypes = Intl.DateTimeFormatPartTypes | 'fractionalSecond';
+export type NavigationKeys = 'ArrowLeft' | 'ArrowRight' | 'ArrowUp' | 'ArrowDown' | 'Escape';
+export type DateTimeFormatPartTypes = Intl.DateTimeFormatPartTypes | 'fractionalSecond';
 export interface DateTimeFormatPart {
     type: DateTimeFormatPartTypes;
     value: string;
 }
-export declare type InputSelection = {
+export type InputSelection = {
     selectionStart: number | null;
     selectionEnd: number | null;
 };

package/lib/datetime-field/utils.d.ts

@@ -18,8 +18,8 @@ export declare const getSelectedPartIndex: (selection: InputSelection, parts: Da
 export declare const getNextSelectedPartIndex: (selection: InputSelection, parts: DateTimeFormatPart[], inputValue: string, direction?: Direction) => number;
 /**
  * Get part selectionStart and selectionEnd indexes
- * @param index Part index
  * @param parts The list of parts
+ * @param index Part index
  * @returns selection
  */
-export declare const selectPart: (index: number | undefined, parts: DateTimeFormatPart[]) => InputSelection;
+export declare const selectPart: (parts: DateTimeFormatPart[], index?: number) => InputSelection;

package/lib/datetime-field/utils.js

@@ -57,11 +57,11 @@ export const getNextSelectedPartIndex = (selection, parts, inputValue, direction
 };
 /**
  * Get part selectionStart and selectionEnd indexes
- * @param index Part index
  * @param parts The list of parts
+ * @param index Part index
  * @returns selection
  */
-export const selectPart = (index = 0, parts) => {
+export const selectPart = (parts, index = 0) => {
     let selectionStart = 0;
     let selectionEnd = 0;
     for (let i = 0; i < parts.length; i += 1) {

package/lib/datetime-picker/custom-elements.json

@@ -317,19 +317,19 @@
       "events": [
         {
           "name": "opened-changed",
-          "description": "Dispatched when when opened attribute changes internally"
+          "description": "Fired when the user opens or closes control's popup. The event is not triggered if `opened` property is changed programmatically."
         },
         {
           "name": "value-changed",
-          "description": "Dispatched when value changes"
+          "description": "Fired when the user commits a value change. The event is not triggered if `value` property is changed programmatically."
         },
         {
           "name": "error-changed",
-          "description": "Dispatched when error state changes"
+          "description": "Fired when the user inputs invalid value. The event is not triggered if `error` property is changed programmatically."
         },
         {
           "name": "view-changed",
-          "description": "Dispatched when internal view changes"
+          "description": "Fired when the user changes view in calendar e.g. change to next month view."
         }
       ],
       "slots": [

package/lib/datetime-picker/custom-elements.md

@@ -42,10 +42,10 @@ Control to pick date and time
 
 | Event            | Description                                      |
 |------------------|--------------------------------------------------|
-| `error-changed`  | Dispatched when error state changes              |
-| `opened-changed` | Dispatched when when opened attribute changes internally |
-| `value-changed`  | Dispatched when value changes                    |
-| `view-changed`   | Dispatched when internal view changes            |
+| `error-changed`  | Fired when the user inputs invalid value. The event is not triggered if `error` property is changed programmatically. |
+| `opened-changed` | Fired when the user opens or closes control's popup. The event is not triggered if `opened` property is changed programmatically. |
+| `value-changed`  | Fired when the user commits a value change. The event is not triggered if `value` property is changed programmatically. |
+| `view-changed`   | Fired when the user changes view in calendar e.g. change to next month view. |
 
 ## Slots
 

package/lib/datetime-picker/index.d.ts

@@ -11,10 +11,10 @@ export type { DatetimePickerFilter, DatetimePickerDuplex };
 /**
  * Control to pick date and time
  *
- * @fires opened-changed - Dispatched when when opened attribute changes internally
- * @fires value-changed - Dispatched when value changes
- * @fires error-changed - Dispatched when error state changes
- * @fires view-changed - Dispatched when internal view changes
+ * @fires opened-changed - Fired when the user opens or closes control's popup. The event is not triggered if `opened` property is changed programmatically.
+ * @fires value-changed - Fired when the user commits a value change. The event is not triggered if `value` property is changed programmatically.
+ * @fires error-changed - Fired when the user inputs invalid value. The event is not triggered if `error` property is changed programmatically.
+ * @fires view-changed - Fired when the user changes view in calendar e.g. change to next month view.
  *
  * @attr {boolean} readonly - Set readonly state
  * @prop {boolean} [readonly=false] - Set readonly state

package/lib/datetime-picker/index.js

@@ -1,9 +1,8 @@
 import { __decorate } from "tslib";
-import { ControlElement, html, css, WarningNotice } from '@refinitiv-ui/core';
+import { ControlElement, html, css, WarningNotice, nothing } from '@refinitiv-ui/core';
 import { customElement } from '@refinitiv-ui/core/decorators/custom-element.js';
 import { property } from '@refinitiv-ui/core/decorators/property.js';
 import { query } from '@refinitiv-ui/core/decorators/query.js';
-import { ifDefined } from '@refinitiv-ui/core/directives/if-defined.js';
 import { VERSION } from '../version.js';
 import '../calendar/index.js';
 import '../icon/index.js';
@@ -30,10 +29,10 @@ const INPUT_FORMAT = {
 /**
  * Control to pick date and time
  *
- * @fires opened-changed - Dispatched when when opened attribute changes internally
- * @fires value-changed - Dispatched when value changes
- * @fires error-changed - Dispatched when error state changes
- * @fires view-changed - Dispatched when internal view changes
+ * @fires opened-changed - Fired when the user opens or closes control's popup. The event is not triggered if `opened` property is changed programmatically.
+ * @fires value-changed - Fired when the user commits a value change. The event is not triggered if `value` property is changed programmatically.
+ * @fires error-changed - Fired when the user inputs invalid value. The event is not triggered if `error` property is changed programmatically.
+ * @fires view-changed - Fired when the user changes view in calendar e.g. change to next month view.
  *
  * @attr {boolean} readonly - Set readonly state
  * @prop {boolean} [readonly=false] - Set readonly state
@@ -224,10 +223,11 @@ let DatetimePicker = class DatetimePicker extends ControlElement {
     * @ignore
     * @param multiple Multiple
     */
-    /* istanbul ignore next */
+    /* c8 ignore start */
     set multiple(multiple) {
         new WarningNotice('multiple is not currently supported').show();
     }
+    /* c8 ignore stop */
     /**
     * @ignore
     */
@@ -635,11 +635,9 @@ let DatetimePicker = class DatetimePicker extends ControlElement {
      */
     onKeyDown(event) {
         switch (event.key) {
-            case 'Down':
             case 'ArrowDown':
                 this.setOpened(true);
                 break;
-            case 'Up':
             case 'ArrowUp':
                 !event.defaultPrevented && this.setOpened(false);
                 break;
@@ -655,7 +653,6 @@ let DatetimePicker = class DatetimePicker extends ControlElement {
      */
     onCalendarKeyDown(event) {
         switch (event.key) {
-            case 'Esc':
             case 'Escape':
                 this.resetViews();
                 this.setOpened(false);
@@ -672,7 +669,6 @@ let DatetimePicker = class DatetimePicker extends ControlElement {
      */
     onInputKeyDown(event) {
         switch (event.key) {
-            case 'Esc':
             case 'Escape':
                 !this.opened && this.blur();
                 this.setOpened(false);
@@ -938,7 +934,7 @@ let DatetimePicker = class DatetimePicker extends ControlElement {
         return html `<ef-calendar
       part="calendar"
       id=${id}
-      lang=${ifDefined(this.lang || undefined)}
+      lang=${this.lang || nothing}
       .fillCells=${!this.isDuplex()}
       .range=${this.range}
       .multiple=${this.multiple}
@@ -946,7 +942,7 @@ let DatetimePicker = class DatetimePicker extends ControlElement {
       .max=${this.maxDate}
       .weekdaysOnly=${this.weekdaysOnly}
       .weekendsOnly=${this.weekendsOnly}
-      .firstDayOfWeek=${ifDefined(this.firstDayOfWeek)}
+      .firstDayOfWeek=${this.firstDayOfWeek || nothing}
       .values=${this.calendarValues}
       .filter=${this.filter}
       .view=${view}

package/lib/datetime-picker/themes/halo/dark/index.js

@@ -3,5 +3,6 @@ import '@refinitiv-ui/elements/icon/themes/halo/dark';
 import '@refinitiv-ui/elements/overlay/themes/halo/dark';
 import '@refinitiv-ui/elements/time-picker/themes/halo/dark';
 import '@refinitiv-ui/elements/text-field/themes/halo/dark';
+import '@refinitiv-ui/elements/tooltip/themes/halo/dark';
 
-dispatchEvent(new CustomEvent('ef.customStyles.define', { detail: { name: 'ef-datetime-picker', styles: ':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;color:#ccc;border-radius:0;background-color:#0d0d0d;text-overflow:ellipsis;border:1px solid #404040;line-height:24px}:host([disabled]){color:rgba(204,204,204,.5);border:1px solid rgba(64,64,64,.5)}:host([warning]){border:1px solid #7f6400}: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 #a01c2b}:host([error][disabled]),:host([error][warning][disabled]){color:rgba(204,204,204,.5);border:1px solid rgba(160,28,43,.5)}:host([focused]){background-size:100% 2px,100% 1px!important;background-position:center bottom!important;border-color:#334bff}:host [part=time-picker]{margin:0}:host [part=timepicker-wrapper]{box-shadow:inset 0 1px 0 0 #404040;box-shadow:none;padding:0 3px 4px}:host([range]) ef-text-field{text-align:center}:host [part=input]{color:inherit}:host [part=icon]{color:#ccc;color:inherit}:host [part=input-separator]{line-height:24px;background:#ccc;width:.4em;margin:auto 0;height:1px}:host [part=calendar]{width:196px;padding:4px 3px}:host [part=list]{margin-top:2px;border:1px solid #334bff;background-color:#262626}:host([range]){width:304px}:host([warning]:not([focused])){border-color:#ffc800}:host([error]:not([focused])){border-color:#f5475b}:host([warning]:hover:not([readonly]):not([focused])){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])){border-color:#faa8b1}:host([error][disabled]),:host([error][readonly]:not([focused])){border-color:rgba(250,168,177,.5)}:host([disabled]) [part=icon]{color:rgba(204,204,204,.5)}:host(:not([disabled]):not([error]):not([warning]):hover) [part=icon],:host([focused]) [part=icon],:host([focused][error][warning]) [part=icon]{color:#6678ff}:host(:not([readonly]):not([error]):not([warning]):not([focused]):hover){border-color:grey;color:#fff}' }}));
+dispatchEvent(new CustomEvent('ef.customStyles.define', { detail: { name: 'ef-datetime-picker', styles: ':host{display:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;text-align:left;font-family:inherit;font-size:12px;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;color:#ccc;border-radius:0;background-color:#0d0d0d;text-overflow:ellipsis;border:1px solid #404040;line-height:24px}:host([disabled]){color:rgba(204,204,204,.5);border:1px solid rgba(64,64,64,.5)}:host([warning]){border:1px solid #7f6400}: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 #a01c2b}:host([error][disabled]),:host([error][warning][disabled]){color:rgba(204,204,204,.5);border:1px solid rgba(160,28,43,.5)}:host([focused]){background-size:100% 2px,100% 1px!important;background-position:center bottom!important;border-color:#334bff}:host [part=time-picker]{margin:0}:host [part=timepicker-wrapper]{box-shadow:inset 0 1px 0 0 #404040;box-shadow:none;padding:0 3px 4px}:host([range]) ef-text-field{text-align:center}:host [part=input]{color:inherit}:host [part=icon]{color:#ccc;color:inherit}:host [part=input-separator]{line-height:24px;background:#ccc;width:.4em;margin:auto 0;height:1px}:host [part=calendar]{width:196px;padding:4px 3px}:host [part=list]{margin-top:2px;border:1px solid #334bff;background-color:#262626}:host([range]){width:304px}:host([warning]:not([focused])){border-color:#ffc800}:host([error]:not([focused])){border-color:#f5475b}:host([warning]:hover:not([readonly]):not([focused])){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])){border-color:#faa8b1}:host([error][disabled]),:host([error][readonly]:not([focused])){border-color:rgba(250,168,177,.5)}:host([disabled]) [part=icon]{color:rgba(204,204,204,.5)}:host(:not([disabled]):not([error]):not([warning]):hover) [part=icon],:host([focused]) [part=icon],:host([focused][error][warning]) [part=icon]{color:#6678ff}:host(:not([readonly]):not([error]):not([warning]):not([focused]):hover){border-color:grey;color:#fff}' }}));

package/lib/datetime-picker/themes/halo/light/index.js

@@ -3,5 +3,6 @@ import '@refinitiv-ui/elements/icon/themes/halo/light';
 import '@refinitiv-ui/elements/overlay/themes/halo/light';
 import '@refinitiv-ui/elements/time-picker/themes/halo/light';
 import '@refinitiv-ui/elements/text-field/themes/halo/light';
+import '@refinitiv-ui/elements/tooltip/themes/halo/light';
 
-dispatchEvent(new CustomEvent('ef.customStyles.define', { detail: { name: 'ef-datetime-picker', styles: ':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;color:#404040;border-radius:0;background-color:#fff;text-overflow:ellipsis;border:1px solid #595959;line-height:24px}:host([disabled]){color:rgba(64,64,64,.5);border:1px solid rgba(89,89,89,.5)}: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 #b63243}:host([error][disabled]),:host([error][warning][disabled]){color:rgba(64,64,64,.5);border:1px solid rgba(182,50,67,.5)}:host([focused]){background-size:100% 2px,100% 1px!important;background-position:center bottom!important;border-color:#334bff}:host [part=time-picker]{margin:0}:host [part=timepicker-wrapper]{box-shadow:inset 0 1px 0 0 #d9d9d9;box-shadow:none;padding:0 3px 4px}:host([range]) ef-text-field{text-align:center}:host [part=input]{color:inherit}:host [part=input-separator]{line-height:24px;background:#0d0d0d;width:.4em;margin:auto 0;height:1px}:host [part=calendar]{width:196px;padding:4px 3px}:host [part=list]{margin-top:2px;border:1px solid #334bff;background-color:#f2f2f2}:host([range]){width:304px}:host [part=icon]{color:#595959}:host([warning]:not([focused])){border-color:#cca000}:host([error]:not([focused])){border-color:#d94255}:host([warning]:hover:not([readonly]):not([focused])){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])){border-color:#eeacb4}:host([error][disabled]),:host([error][readonly]:not([focused])){border-color:rgba(238,172,180,.5)}:host([disabled]) [part=icon]{color:rgba(64,64,64,.5)}:host(:not([disabled]):not([error]):not([warning]):hover) [part=icon],:host([focused]) [part=icon],:host([focused][error][warning]) [part=icon]{color:#334bff}:host(:not([readonly]):not([error]):not([warning]):not([focused]):hover){border-color:#0d0d0d;color:#0d0d0d}' }}));
+dispatchEvent(new CustomEvent('ef.customStyles.define', { detail: { name: 'ef-datetime-picker', styles: ':host{display:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;text-align:left;font-family:inherit;font-size:12px;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;color:#404040;border-radius:0;background-color:#fff;text-overflow:ellipsis;border:1px solid #595959;line-height:24px}:host([disabled]){color:rgba(64,64,64,.5);border:1px solid rgba(89,89,89,.5)}: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 #b63243}:host([error][disabled]),:host([error][warning][disabled]){color:rgba(64,64,64,.5);border:1px solid rgba(182,50,67,.5)}:host([focused]){background-size:100% 2px,100% 1px!important;background-position:center bottom!important;border-color:#334bff}:host [part=time-picker]{margin:0}:host [part=timepicker-wrapper]{box-shadow:inset 0 1px 0 0 #d9d9d9;box-shadow:none;padding:0 3px 4px}:host([range]) ef-text-field{text-align:center}:host [part=input]{color:inherit}:host [part=input-separator]{line-height:24px;background:#0d0d0d;width:.4em;margin:auto 0;height:1px}:host [part=calendar]{width:196px;padding:4px 3px}:host [part=list]{margin-top:2px;border:1px solid #334bff;background-color:#f2f2f2}:host([range]){width:304px}:host [part=icon]{color:#595959}:host([warning]:not([focused])){border-color:#cca000}:host([error]:not([focused])){border-color:#d94255}:host([warning]:hover:not([readonly]):not([focused])){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])){border-color:#eeacb4}:host([error][disabled]),:host([error][readonly]:not([focused])){border-color:rgba(238,172,180,.5)}:host([disabled]) [part=icon]{color:rgba(64,64,64,.5)}:host(:not([disabled]):not([error]):not([warning]):hover) [part=icon],:host([focused]) [part=icon],:host([focused][error][warning]) [part=icon]{color:#334bff}:host(:not([readonly]):not([error]):not([warning]):not([focused]):hover){border-color:#0d0d0d;color:#0d0d0d}' }}));

package/lib/datetime-picker/themes/solar/charcoal/index.js

@@ -3,5 +3,6 @@ import '@refinitiv-ui/elements/icon/themes/solar/charcoal';
 import '@refinitiv-ui/elements/overlay/themes/solar/charcoal';
 import '@refinitiv-ui/elements/time-picker/themes/solar/charcoal';
 import '@refinitiv-ui/elements/text-field/themes/solar/charcoal';
+import '@refinitiv-ui/elements/tooltip/themes/solar/charcoal';
 
-dispatchEvent(new CustomEvent('ef.customStyles.define', { detail: { name: 'ef-datetime-picker', styles: ':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;line-height:23px;background-color:#000;border:1px solid #4a4a52}: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([focused]){background-size:100% 2px,100% 1px!important;background-position:center bottom!important;border-color:#f93;border-style:dotted}:host [part=time-picker]{margin:0}:host [part=timepicker-wrapper]{box-shadow:inset 0 1px 0 0 #0a0a0a;box-shadow:none;padding:0 3px 3px}:host([range]) ef-text-field{text-align:center}:host [part=input]{color:inherit}:host [part=icon]{color:#e2e2e2}:host [part=input-separator]{line-height:23px;background:#c2c2c2;width:.4em;margin:auto 0;height:1px}: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 [part=calendar]{width:224px;padding:4px}:host [part=list]{margin-top:1px}:host([range]){width:280px}' }}));
+dispatchEvent(new CustomEvent('ef.customStyles.define', { detail: { name: 'ef-datetime-picker', styles: ':host{display:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;text-align:left;font-family:inherit;font-size:13px;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;line-height:23px;background-color:#000;border:1px solid #4a4a52}: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([focused]){background-size:100% 2px,100% 1px!important;background-position:center bottom!important;border-color:#f93;border-style:dotted}:host [part=time-picker]{margin:0}:host [part=timepicker-wrapper]{box-shadow:inset 0 1px 0 0 #0a0a0a;box-shadow:none;padding:0 3px 3px}:host([range]) ef-text-field{text-align:center}:host [part=input]{color:inherit}:host [part=icon]{color:#e2e2e2}:host [part=input-separator]{line-height:23px;background:#c2c2c2;width:.4em;margin:auto 0;height:1px}: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 [part=calendar]{width:224px;padding:4px}:host [part=list]{margin-top:1px}:host([range]){width:280px}' }}));

package/lib/datetime-picker/themes/solar/pearl/index.js

@@ -3,5 +3,6 @@ import '@refinitiv-ui/elements/icon/themes/solar/pearl';
 import '@refinitiv-ui/elements/overlay/themes/solar/pearl';
 import '@refinitiv-ui/elements/time-picker/themes/solar/pearl';
 import '@refinitiv-ui/elements/text-field/themes/solar/pearl';
+import '@refinitiv-ui/elements/tooltip/themes/solar/pearl';
 
-dispatchEvent(new CustomEvent('ef.customStyles.define', { detail: { name: 'ef-datetime-picker', styles: ':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:#484848;border-radius:0;text-overflow:ellipsis;line-height:23px;background-color:#fff;border:1px solid #a9afba}: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([focused]){background-size:100% 2px,100% 1px!important;background-position:center bottom!important;border-color:#ffb266;border-style:dotted}:host [part=time-picker]{margin:0}:host [part=timepicker-wrapper]{box-shadow:inset 0 1px 0 0 #d5d8db;box-shadow:none;padding:0 3px 3px}:host([range]) ef-text-field{text-align:center}:host [part=input]{color:inherit}:host [part=icon]{color:#acafb5}:host [part=input-separator]{line-height:23px;background:#484848;width:.4em;margin:auto 0;height:1px}:host([disabled]){border:1px solid rgba(169,175,186,.6);color:rgba(72,72,72,.6)}:host([readonly]){border:1px solid rgba(169,175,186,.6)}:host(:not([focused]):not(:focus):not([disabled]):not([readonly]):hover){border:1px solid #bfc3cb}:host([warning]){background-color:#fff;border:1px solid #f93}:host([warning][disabled]){border:1px solid rgba(255,153,51,.6);color:rgba(72,72,72,.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:#fff;border:1px solid #d94255}:host([error][disabled]),:host([error][warning]:not([focused])[disabled]){border:1px solid rgba(217,66,85,.6);color:rgba(72,72,72,.6)}:host([error][readonly]),:host([error][warning]:not([focused])[readonly]){border:1px solid rgba(217,66,85,.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 #e37180}:host([highlight]){background-color:#b0ffff;border:1px solid #a9afba}:host([highlight][disabled]){border:1px solid rgba(169,175,186,.6);color:rgba(72,72,72,.6);background-color:rgba(176,255,255,.6)}:host([highlight][readonly]){border:1px solid rgba(169,175,186,.6)}:host([highlight]:not([focused]):not(:focus):not([disabled]):not([readonly]):hover){border:1px solid #bfc3cb}:host([indirect]){color:#009494;background-color:#effefe;border:1px solid #898623}:host([indirect][disabled]){border:1px solid rgba(137,134,35,.6);color:rgba(0,148,148,.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 [part=calendar]{width:224px;padding:4px}:host [part=list]{margin-top:1px}:host([range]){width:280px}' }}));
+dispatchEvent(new CustomEvent('ef.customStyles.define', { detail: { name: 'ef-datetime-picker', styles: ':host{display:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;text-align:left;font-family:inherit;font-size:13px;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:#484848;border-radius:0;text-overflow:ellipsis;line-height:23px;background-color:#fff;border:1px solid #a9afba}: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([focused]){background-size:100% 2px,100% 1px!important;background-position:center bottom!important;border-color:#ffb266;border-style:dotted}:host [part=time-picker]{margin:0}:host [part=timepicker-wrapper]{box-shadow:inset 0 1px 0 0 #d5d8db;box-shadow:none;padding:0 3px 3px}:host([range]) ef-text-field{text-align:center}:host [part=input]{color:inherit}:host [part=icon]{color:#acafb5}:host [part=input-separator]{line-height:23px;background:#484848;width:.4em;margin:auto 0;height:1px}:host([disabled]){border:1px solid rgba(169,175,186,.6);color:rgba(72,72,72,.6)}:host([readonly]){border:1px solid rgba(169,175,186,.6)}:host(:not([focused]):not(:focus):not([disabled]):not([readonly]):hover){border:1px solid #bfc3cb}:host([warning]){background-color:#fff;border:1px solid #f93}:host([warning][disabled]){border:1px solid rgba(255,153,51,.6);color:rgba(72,72,72,.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:#fff;border:1px solid #d94255}:host([error][disabled]),:host([error][warning]:not([focused])[disabled]){border:1px solid rgba(217,66,85,.6);color:rgba(72,72,72,.6)}:host([error][readonly]),:host([error][warning]:not([focused])[readonly]){border:1px solid rgba(217,66,85,.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 #e37180}:host([highlight]){background-color:#b0ffff;border:1px solid #a9afba}:host([highlight][disabled]){border:1px solid rgba(169,175,186,.6);color:rgba(72,72,72,.6);background-color:rgba(176,255,255,.6)}:host([highlight][readonly]){border:1px solid rgba(169,175,186,.6)}:host([highlight]:not([focused]):not(:focus):not([disabled]):not([readonly]):hover){border:1px solid #bfc3cb}:host([indirect]){color:#009494;background-color:#effefe;border:1px solid #898623}:host([indirect][disabled]){border:1px solid rgba(137,134,35,.6);color:rgba(0,148,148,.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 [part=calendar]{width:224px;padding:4px}:host [part=list]{margin-top:1px}:host([range]){width:280px}' }}));

package/lib/datetime-picker/types.d.ts

@@ -1,3 +1,3 @@
 import type { CalendarFilter as DatetimePickerFilter } from '../calendar';
-declare type DatetimePickerDuplex = '' | 'consecutive' | 'split';
+type DatetimePickerDuplex = '' | 'consecutive' | 'split';
 export { DatetimePickerDuplex, DatetimePickerFilter };

package/lib/dialog/custom-elements.json

@@ -129,7 +129,7 @@
       "events": [
         {
           "name": "opened-changed",
-          "description": "Fired when value of `opened` property is changed. Prevent default to stop default action"
+          "description": "Fired when the user changes open state of the dialog e.g. when the user presses escape key or uses close button to close the dialog. The event is not triggered if `opened` property is changed programmatically."
         },
         {
           "name": "confirm",
@@ -149,19 +149,8 @@
       "methods": [
         {
           "name": "refit",
-          "description": "Clear all cached values and fit the popup.\nUse this function only if maxWidth, maxHeight, minWidth, minHeight, height, width are changed",
+          "description": "Clear all cached values and fit the popup.",
           "params": []
-        },
-        {
-          "name": "willUpdate",
-          "description": "Compute property values that depend on other properties\nand are used in the rest of the update process.",
-          "params": [
-            {
-              "name": "changedProperties",
-              "description": "Properties that has changed",
-              "type": "PropertyValues"
-            }
-          ]
         }
       ]
     }

package/lib/dialog/custom-elements.md

@@ -28,10 +28,9 @@ and also allows custom footers and control buttons to be used.
 
 ## Methods
 
-| Method       | Type                             | Description                                      |
-|--------------|----------------------------------|--------------------------------------------------|
-| `refit`      | `(): void`                       | Clear all cached values and fit the popup.<br />Use this function only if maxWidth, maxHeight, minWidth, minHeight, height, width are changed |
-| `willUpdate` | `(changedProperties: any): void` | Compute property values that depend on other properties<br />and are used in the rest of the update process.<br /><br />**changedProperties**: Properties that has changed |
+| Method  | Type       | Description                                |
+|---------|------------|--------------------------------------------|
+| `refit` | `(): void` | Clear all cached values and fit the popup. |
 
 ## Events
 
@@ -39,7 +38,7 @@ and also allows custom footers and control buttons to be used.
 |------------------|--------------------------------------------------|
 | `cancel`         | Fired when dialog is closed by user clicked a default Cancel button, clicked outside to close dialog or press ESC to close the dialog. Prevent default to stop default action |
 | `confirm`        | Fired when dialog is closed by user clicked a default OK button. Prevent default to stop default action |
-| `opened-changed` | Fired when value of `opened` property is changed. Prevent default to stop default action |
+| `opened-changed` | Fired when the user changes open state of the dialog e.g. when the user presses escape key or uses close button to close the dialog. The event is not triggered if `opened` property is changed programmatically. |
 
 ## Slots