@refinitiv-ui/elements 6.17.2 → 6.18.1

package/CHANGELOG.md

@@ -3,6 +3,18 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [6.18.1](https://github.com/Refinitiv/refinitiv-ui/compare/@refinitiv-ui/elements@6.18.0...@refinitiv-ui/elements@6.18.1) (2024-07-15)
+
+### Bug Fixes
+
+- **card:** expand body instead of header and footer ([#1191](https://github.com/Refinitiv/refinitiv-ui/issues/1191)) ([9bd8613](https://github.com/Refinitiv/refinitiv-ui/commit/9bd8613779d31bac6db2d336ac491ab9c2eaa7c3))
+
+# [6.18.0](https://github.com/Refinitiv/refinitiv-ui/compare/@refinitiv-ui/elements@6.17.2...@refinitiv-ui/elements@6.18.0) (2024-07-01)
+
+### Features
+
+- **form-field:** introduce clears api to Form field elements ([#1186](https://github.com/Refinitiv/refinitiv-ui/issues/1186)) ([ddc75de](https://github.com/Refinitiv/refinitiv-ui/commit/ddc75ded29590c1867a4478b445811fd18e8acb5))
+
 ## [6.17.2](https://github.com/Refinitiv/refinitiv-ui/compare/@refinitiv-ui/elements@6.17.1...@refinitiv-ui/elements@6.17.2) (2024-06-24)
 
 ### Bug Fixes

package/lib/card/index.js

@@ -63,13 +63,26 @@ let Card = class Card extends BasicElement {
         display: flex;
         flex-flow: column nowrap;
       }
+
       [part~='header'] {
         display: flex;
       }
+
       [part~='header-body'] {
         flex: 1;
         min-width: 0px;
       }
+
+      [part~='body'] {
+        overflow: auto;
+        flex: 1;
+      }
+
+      [part~='header'],
+      [part~='footer'] {
+        flex: 0 0 auto;
+      }
+
       [part~='footer']:not([part~='has-content']),
       [part~='header']:not([part~='has-content']) {
         display: none;

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

@@ -1,4 +1,4 @@
 import '@refinitiv-ui/elements/button/themes/halo/dark';
 import '@refinitiv-ui/elements/overlay-menu/themes/halo/dark';
 import '@refinitiv-ui/elements/label/themes/halo/dark';
-dispatchEvent(new CustomEvent('ef.customStyles.define', { detail: { name: 'ef-card', styles: ':host{box-sizing:border-box;width:400px;box-shadow:0 2px 12px rgba(0,0,0,.5);background-color:#1a1a1a;overflow:hidden;scrollbar-face-color:#595959;scrollbar-shadow-color:#595959;scrollbar-highlight-color:#595959;scrollbar-arrow-color:#595959;scrollbar-track-color:#1a1a1a;scrollbar-3dlight-color:#1a1a1a;scrollbar-darkshadow-color:#1a1a1a;padding:16px}:host [part~=body],:host [part~=footer],:host [part~=header]{position:relative}:host [part~=body]{overflow:auto}:host [part~=footer],:host [part~=header]{flex:1 0 auto}:host [part~=header]{padding-bottom:inherit;min-height:24px}:host [part~=header-body]{z-index:0;font-weight:400;font-size:130%;font-family:inherit;display:flex;align-items:center}:host [part~=menu-button]{margin:0;font-size:16px}:host [part~=footer]{padding-top:inherit}:host [part~=footer-body]{padding-top:calc(1em - 1px);font-family:inherit;color:#999;border-top:1px solid #404040}@supports not selector(::-webkit-scrollbar){:host{scrollbar-color:#595959 #1a1a1a}}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-button{background:0 0/1px 2px no-repeat #1a1a1a;height:16px;width:16px;display:block}::-webkit-scrollbar-thumb{background:#595959;border-radius:0;border:1px solid #1a1a1a}::-webkit-scrollbar-thumb:hover{background:#1429bd}::-webkit-scrollbar-thumb:active{background:#0f1e8a}::-webkit-scrollbar-track{background:#1a1a1a}::-webkit-scrollbar-corner{background:#1a1a1a}::-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(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959);background-position:6.5px 8px,5.5px 7px,4.5px 6px,3.5px 5px,2.5px 6px,1.5px 7px,.5px 8px}::-webkit-scrollbar-button:vertical:start:decrement:hover{background-image:linear-gradient(#1429bd,#1429bd),linear-gradient(#1429bd,#1429bd),linear-gradient(#1429bd,#1429bd),linear-gradient(#1429bd,#1429bd),linear-gradient(#1429bd,#1429bd),linear-gradient(#1429bd,#1429bd),linear-gradient(#1429bd,#1429bd);background-position:6.5px 8px,5.5px 7px,4.5px 6px,3.5px 5px,2.5px 6px,1.5px 7px,.5px 8px}::-webkit-scrollbar-button:vertical:start:decrement:active{background-image:linear-gradient(#0f1e8a,#0f1e8a),linear-gradient(#0f1e8a,#0f1e8a),linear-gradient(#0f1e8a,#0f1e8a),linear-gradient(#0f1e8a,#0f1e8a),linear-gradient(#0f1e8a,#0f1e8a),linear-gradient(#0f1e8a,#0f1e8a),linear-gradient(#0f1e8a,#0f1e8a);background-position:6.5px 8px,5.5px 7px,4.5px 6px,3.5px 5px,2.5px 6px,1.5px 7px,.5px 8px}::-webkit-scrollbar-button:vertical:end:increment{background-image:linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959);background-position:6.5px 6px,5.5px 7px,4.5px 8px,3.5px 9px,2.5px 8px,1.5px 7px,.5px 6px}::-webkit-scrollbar-button:vertical:end:increment:hover{background-image:linear-gradient(#1429bd,#1429bd),linear-gradient(#1429bd,#1429bd),linear-gradient(#1429bd,#1429bd),linear-gradient(#1429bd,#1429bd),linear-gradient(#1429bd,#1429bd),linear-gradient(#1429bd,#1429bd),linear-gradient(#1429bd,#1429bd);background-position:6.5px 6px,5.5px 7px,4.5px 8px,3.5px 9px,2.5px 8px,1.5px 7px,.5px 6px}::-webkit-scrollbar-button:vertical:end:increment:active{background-image:linear-gradient(#0f1e8a,#0f1e8a),linear-gradient(#0f1e8a,#0f1e8a),linear-gradient(#0f1e8a,#0f1e8a),linear-gradient(#0f1e8a,#0f1e8a),linear-gradient(#0f1e8a,#0f1e8a),linear-gradient(#0f1e8a,#0f1e8a),linear-gradient(#0f1e8a,#0f1e8a);background-position:6.5px 6px,5.5px 7px,4.5px 8px,3.5px 9px,2.5px 8px,1.5px 7px,.5px 6px}::-webkit-scrollbar-button:horizontal:start:decrement{background-image:linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959);background-position:8px 6.5px,7px 5.5px,6px 4.5px,5px 3.5px,6px 2.5px,7px 1.5px,8px .5px}::-webkit-scrollbar-button:horizontal:start:decrement:hover{background-image:linear-gradient(#1429bd,#1429bd),linear-gradient(#1429bd,#1429bd),linear-gradient(#1429bd,#1429bd),linear-gradient(#1429bd,#1429bd),linear-gradient(#1429bd,#1429bd),linear-gradient(#1429bd,#1429bd),linear-gradient(#1429bd,#1429bd);background-position:8px 6.5px,7px 5.5px,6px 4.5px,5px 3.5px,6px 2.5px,7px 1.5px,8px .5px}::-webkit-scrollbar-button:horizontal:start:decrement:active{background-image:linear-gradient(#0f1e8a,#0f1e8a),linear-gradient(#0f1e8a,#0f1e8a),linear-gradient(#0f1e8a,#0f1e8a),linear-gradient(#0f1e8a,#0f1e8a),linear-gradient(#0f1e8a,#0f1e8a),linear-gradient(#0f1e8a,#0f1e8a),linear-gradient(#0f1e8a,#0f1e8a);background-position:8px 6.5px,7px 5.5px,6px 4.5px,5px 3.5px,6px 2.5px,7px 1.5px,8px .5px}::-webkit-scrollbar-button:horizontal:end:increment{background-image:linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959);background-position:6px 6.5px,7px 5.5px,8px 4.5px,9px 3.5px,8px 2.5px,7px 1.5px,6px .5px}::-webkit-scrollbar-button:horizontal:end:increment:hover{background-image:linear-gradient(#1429bd,#1429bd),linear-gradient(#1429bd,#1429bd),linear-gradient(#1429bd,#1429bd),linear-gradient(#1429bd,#1429bd),linear-gradient(#1429bd,#1429bd),linear-gradient(#1429bd,#1429bd),linear-gradient(#1429bd,#1429bd);background-position:6px 6.5px,7px 5.5px,8px 4.5px,9px 3.5px,8px 2.5px,7px 1.5px,6px .5px}::-webkit-scrollbar-button:horizontal:end:increment:active{background-image:linear-gradient(#0f1e8a,#0f1e8a),linear-gradient(#0f1e8a,#0f1e8a),linear-gradient(#0f1e8a,#0f1e8a),linear-gradient(#0f1e8a,#0f1e8a),linear-gradient(#0f1e8a,#0f1e8a),linear-gradient(#0f1e8a,#0f1e8a),linear-gradient(#0f1e8a,#0f1e8a);background-position:6px 6.5px,7px 5.5px,8px 4.5px,9px 3.5px,8px 2.5px,7px 1.5px,6px .5px}' }}));
+dispatchEvent(new CustomEvent('ef.customStyles.define', { detail: { name: 'ef-card', styles: ':host{box-sizing:border-box;width:400px;box-shadow:0 2px 12px rgba(0,0,0,.5);background-color:#1a1a1a;overflow:hidden;scrollbar-face-color:#595959;scrollbar-shadow-color:#595959;scrollbar-highlight-color:#595959;scrollbar-arrow-color:#595959;scrollbar-track-color:#1a1a1a;scrollbar-3dlight-color:#1a1a1a;scrollbar-darkshadow-color:#1a1a1a;padding:16px}:host [part~=body],:host [part~=footer],:host [part~=header]{position:relative}:host [part~=header]{padding-bottom:inherit;min-height:24px}:host [part~=header-body]{z-index:0;font-weight:400;font-size:130%;font-family:inherit;display:flex;align-items:center}:host [part~=menu-button]{margin:0;font-size:16px}:host [part~=footer]{padding-top:inherit}:host [part~=footer-body]{padding-top:calc(1em - 1px);font-family:inherit;color:#999;border-top:1px solid #404040}@supports not selector(::-webkit-scrollbar){:host{scrollbar-color:#595959 #1a1a1a}}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-button{background:0 0/1px 2px no-repeat #1a1a1a;height:16px;width:16px;display:block}::-webkit-scrollbar-thumb{background:#595959;border-radius:0;border:1px solid #1a1a1a}::-webkit-scrollbar-thumb:hover{background:#1429bd}::-webkit-scrollbar-thumb:active{background:#0f1e8a}::-webkit-scrollbar-track{background:#1a1a1a}::-webkit-scrollbar-corner{background:#1a1a1a}::-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(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959);background-position:6.5px 8px,5.5px 7px,4.5px 6px,3.5px 5px,2.5px 6px,1.5px 7px,.5px 8px}::-webkit-scrollbar-button:vertical:start:decrement:hover{background-image:linear-gradient(#1429bd,#1429bd),linear-gradient(#1429bd,#1429bd),linear-gradient(#1429bd,#1429bd),linear-gradient(#1429bd,#1429bd),linear-gradient(#1429bd,#1429bd),linear-gradient(#1429bd,#1429bd),linear-gradient(#1429bd,#1429bd);background-position:6.5px 8px,5.5px 7px,4.5px 6px,3.5px 5px,2.5px 6px,1.5px 7px,.5px 8px}::-webkit-scrollbar-button:vertical:start:decrement:active{background-image:linear-gradient(#0f1e8a,#0f1e8a),linear-gradient(#0f1e8a,#0f1e8a),linear-gradient(#0f1e8a,#0f1e8a),linear-gradient(#0f1e8a,#0f1e8a),linear-gradient(#0f1e8a,#0f1e8a),linear-gradient(#0f1e8a,#0f1e8a),linear-gradient(#0f1e8a,#0f1e8a);background-position:6.5px 8px,5.5px 7px,4.5px 6px,3.5px 5px,2.5px 6px,1.5px 7px,.5px 8px}::-webkit-scrollbar-button:vertical:end:increment{background-image:linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959);background-position:6.5px 6px,5.5px 7px,4.5px 8px,3.5px 9px,2.5px 8px,1.5px 7px,.5px 6px}::-webkit-scrollbar-button:vertical:end:increment:hover{background-image:linear-gradient(#1429bd,#1429bd),linear-gradient(#1429bd,#1429bd),linear-gradient(#1429bd,#1429bd),linear-gradient(#1429bd,#1429bd),linear-gradient(#1429bd,#1429bd),linear-gradient(#1429bd,#1429bd),linear-gradient(#1429bd,#1429bd);background-position:6.5px 6px,5.5px 7px,4.5px 8px,3.5px 9px,2.5px 8px,1.5px 7px,.5px 6px}::-webkit-scrollbar-button:vertical:end:increment:active{background-image:linear-gradient(#0f1e8a,#0f1e8a),linear-gradient(#0f1e8a,#0f1e8a),linear-gradient(#0f1e8a,#0f1e8a),linear-gradient(#0f1e8a,#0f1e8a),linear-gradient(#0f1e8a,#0f1e8a),linear-gradient(#0f1e8a,#0f1e8a),linear-gradient(#0f1e8a,#0f1e8a);background-position:6.5px 6px,5.5px 7px,4.5px 8px,3.5px 9px,2.5px 8px,1.5px 7px,.5px 6px}::-webkit-scrollbar-button:horizontal:start:decrement{background-image:linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959);background-position:8px 6.5px,7px 5.5px,6px 4.5px,5px 3.5px,6px 2.5px,7px 1.5px,8px .5px}::-webkit-scrollbar-button:horizontal:start:decrement:hover{background-image:linear-gradient(#1429bd,#1429bd),linear-gradient(#1429bd,#1429bd),linear-gradient(#1429bd,#1429bd),linear-gradient(#1429bd,#1429bd),linear-gradient(#1429bd,#1429bd),linear-gradient(#1429bd,#1429bd),linear-gradient(#1429bd,#1429bd);background-position:8px 6.5px,7px 5.5px,6px 4.5px,5px 3.5px,6px 2.5px,7px 1.5px,8px .5px}::-webkit-scrollbar-button:horizontal:start:decrement:active{background-image:linear-gradient(#0f1e8a,#0f1e8a),linear-gradient(#0f1e8a,#0f1e8a),linear-gradient(#0f1e8a,#0f1e8a),linear-gradient(#0f1e8a,#0f1e8a),linear-gradient(#0f1e8a,#0f1e8a),linear-gradient(#0f1e8a,#0f1e8a),linear-gradient(#0f1e8a,#0f1e8a);background-position:8px 6.5px,7px 5.5px,6px 4.5px,5px 3.5px,6px 2.5px,7px 1.5px,8px .5px}::-webkit-scrollbar-button:horizontal:end:increment{background-image:linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959);background-position:6px 6.5px,7px 5.5px,8px 4.5px,9px 3.5px,8px 2.5px,7px 1.5px,6px .5px}::-webkit-scrollbar-button:horizontal:end:increment:hover{background-image:linear-gradient(#1429bd,#1429bd),linear-gradient(#1429bd,#1429bd),linear-gradient(#1429bd,#1429bd),linear-gradient(#1429bd,#1429bd),linear-gradient(#1429bd,#1429bd),linear-gradient(#1429bd,#1429bd),linear-gradient(#1429bd,#1429bd);background-position:6px 6.5px,7px 5.5px,8px 4.5px,9px 3.5px,8px 2.5px,7px 1.5px,6px .5px}::-webkit-scrollbar-button:horizontal:end:increment:active{background-image:linear-gradient(#0f1e8a,#0f1e8a),linear-gradient(#0f1e8a,#0f1e8a),linear-gradient(#0f1e8a,#0f1e8a),linear-gradient(#0f1e8a,#0f1e8a),linear-gradient(#0f1e8a,#0f1e8a),linear-gradient(#0f1e8a,#0f1e8a),linear-gradient(#0f1e8a,#0f1e8a);background-position:6px 6.5px,7px 5.5px,8px 4.5px,9px 3.5px,8px 2.5px,7px 1.5px,6px .5px}' }}));

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

@@ -1,4 +1,4 @@
 import '@refinitiv-ui/elements/button/themes/halo/light';
 import '@refinitiv-ui/elements/overlay-menu/themes/halo/light';
 import '@refinitiv-ui/elements/label/themes/halo/light';
-dispatchEvent(new CustomEvent('ef.customStyles.define', { detail: { name: 'ef-card', styles: ':host{box-sizing:border-box;width:400px;box-shadow:0 2px 8px rgba(0,0,0,.25);background-color:#fafafa;overflow:hidden;scrollbar-face-color:#999;scrollbar-shadow-color:#999;scrollbar-highlight-color:#999;scrollbar-arrow-color:#999;scrollbar-track-color:#f2f2f2;scrollbar-3dlight-color:#f2f2f2;scrollbar-darkshadow-color:#f2f2f2;padding:16px}:host [part~=body],:host [part~=footer],:host [part~=header]{position:relative}:host [part~=body]{overflow:auto}:host [part~=footer],:host [part~=header]{flex:1 0 auto}:host [part~=header]{padding-bottom:inherit;min-height:24px}:host [part~=header-body]{z-index:0;font-weight:400;font-size:130%;font-family:inherit;display:flex;align-items:center}:host [part~=menu-button]{margin:0;font-size:16px}:host [part~=footer]{padding-top:inherit}:host [part~=footer-body]{padding-top:calc(1em - 1px);font-family:inherit;color:#737373;border-top:1px solid #d9d9d9}@supports not selector(::-webkit-scrollbar){:host{scrollbar-color:#999 #f2f2f2}}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-button{background:0 0/1px 2px no-repeat #f2f2f2;height:16px;width:16px;display:block}::-webkit-scrollbar-thumb{background:#999;border-radius:0;border:1px solid #f2f2f2}::-webkit-scrollbar-thumb:hover{background:#1429bd}::-webkit-scrollbar-thumb:active{background:#0f1e8a}::-webkit-scrollbar-track{background:#f2f2f2}::-webkit-scrollbar-corner{background:#f2f2f2}::-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(#999,#999),linear-gradient(#999,#999),linear-gradient(#999,#999),linear-gradient(#999,#999),linear-gradient(#999,#999),linear-gradient(#999,#999),linear-gradient(#999,#999);background-position:6.5px 8px,5.5px 7px,4.5px 6px,3.5px 5px,2.5px 6px,1.5px 7px,.5px 8px}::-webkit-scrollbar-button:vertical:start:decrement:hover{background-image:linear-gradient(#1429bd,#1429bd),linear-gradient(#1429bd,#1429bd),linear-gradient(#1429bd,#1429bd),linear-gradient(#1429bd,#1429bd),linear-gradient(#1429bd,#1429bd),linear-gradient(#1429bd,#1429bd),linear-gradient(#1429bd,#1429bd);background-position:6.5px 8px,5.5px 7px,4.5px 6px,3.5px 5px,2.5px 6px,1.5px 7px,.5px 8px}::-webkit-scrollbar-button:vertical:start:decrement:active{background-image:linear-gradient(#0f1e8a,#0f1e8a),linear-gradient(#0f1e8a,#0f1e8a),linear-gradient(#0f1e8a,#0f1e8a),linear-gradient(#0f1e8a,#0f1e8a),linear-gradient(#0f1e8a,#0f1e8a),linear-gradient(#0f1e8a,#0f1e8a),linear-gradient(#0f1e8a,#0f1e8a);background-position:6.5px 8px,5.5px 7px,4.5px 6px,3.5px 5px,2.5px 6px,1.5px 7px,.5px 8px}::-webkit-scrollbar-button:vertical:end:increment{background-image:linear-gradient(#999,#999),linear-gradient(#999,#999),linear-gradient(#999,#999),linear-gradient(#999,#999),linear-gradient(#999,#999),linear-gradient(#999,#999),linear-gradient(#999,#999);background-position:6.5px 6px,5.5px 7px,4.5px 8px,3.5px 9px,2.5px 8px,1.5px 7px,.5px 6px}::-webkit-scrollbar-button:vertical:end:increment:hover{background-image:linear-gradient(#1429bd,#1429bd),linear-gradient(#1429bd,#1429bd),linear-gradient(#1429bd,#1429bd),linear-gradient(#1429bd,#1429bd),linear-gradient(#1429bd,#1429bd),linear-gradient(#1429bd,#1429bd),linear-gradient(#1429bd,#1429bd);background-position:6.5px 6px,5.5px 7px,4.5px 8px,3.5px 9px,2.5px 8px,1.5px 7px,.5px 6px}::-webkit-scrollbar-button:vertical:end:increment:active{background-image:linear-gradient(#0f1e8a,#0f1e8a),linear-gradient(#0f1e8a,#0f1e8a),linear-gradient(#0f1e8a,#0f1e8a),linear-gradient(#0f1e8a,#0f1e8a),linear-gradient(#0f1e8a,#0f1e8a),linear-gradient(#0f1e8a,#0f1e8a),linear-gradient(#0f1e8a,#0f1e8a);background-position:6.5px 6px,5.5px 7px,4.5px 8px,3.5px 9px,2.5px 8px,1.5px 7px,.5px 6px}::-webkit-scrollbar-button:horizontal:start:decrement{background-image:linear-gradient(#999,#999),linear-gradient(#999,#999),linear-gradient(#999,#999),linear-gradient(#999,#999),linear-gradient(#999,#999),linear-gradient(#999,#999),linear-gradient(#999,#999);background-position:8px 6.5px,7px 5.5px,6px 4.5px,5px 3.5px,6px 2.5px,7px 1.5px,8px .5px}::-webkit-scrollbar-button:horizontal:start:decrement:hover{background-image:linear-gradient(#1429bd,#1429bd),linear-gradient(#1429bd,#1429bd),linear-gradient(#1429bd,#1429bd),linear-gradient(#1429bd,#1429bd),linear-gradient(#1429bd,#1429bd),linear-gradient(#1429bd,#1429bd),linear-gradient(#1429bd,#1429bd);background-position:8px 6.5px,7px 5.5px,6px 4.5px,5px 3.5px,6px 2.5px,7px 1.5px,8px .5px}::-webkit-scrollbar-button:horizontal:start:decrement:active{background-image:linear-gradient(#0f1e8a,#0f1e8a),linear-gradient(#0f1e8a,#0f1e8a),linear-gradient(#0f1e8a,#0f1e8a),linear-gradient(#0f1e8a,#0f1e8a),linear-gradient(#0f1e8a,#0f1e8a),linear-gradient(#0f1e8a,#0f1e8a),linear-gradient(#0f1e8a,#0f1e8a);background-position:8px 6.5px,7px 5.5px,6px 4.5px,5px 3.5px,6px 2.5px,7px 1.5px,8px .5px}::-webkit-scrollbar-button:horizontal:end:increment{background-image:linear-gradient(#999,#999),linear-gradient(#999,#999),linear-gradient(#999,#999),linear-gradient(#999,#999),linear-gradient(#999,#999),linear-gradient(#999,#999),linear-gradient(#999,#999);background-position:6px 6.5px,7px 5.5px,8px 4.5px,9px 3.5px,8px 2.5px,7px 1.5px,6px .5px}::-webkit-scrollbar-button:horizontal:end:increment:hover{background-image:linear-gradient(#1429bd,#1429bd),linear-gradient(#1429bd,#1429bd),linear-gradient(#1429bd,#1429bd),linear-gradient(#1429bd,#1429bd),linear-gradient(#1429bd,#1429bd),linear-gradient(#1429bd,#1429bd),linear-gradient(#1429bd,#1429bd);background-position:6px 6.5px,7px 5.5px,8px 4.5px,9px 3.5px,8px 2.5px,7px 1.5px,6px .5px}::-webkit-scrollbar-button:horizontal:end:increment:active{background-image:linear-gradient(#0f1e8a,#0f1e8a),linear-gradient(#0f1e8a,#0f1e8a),linear-gradient(#0f1e8a,#0f1e8a),linear-gradient(#0f1e8a,#0f1e8a),linear-gradient(#0f1e8a,#0f1e8a),linear-gradient(#0f1e8a,#0f1e8a),linear-gradient(#0f1e8a,#0f1e8a);background-position:6px 6.5px,7px 5.5px,8px 4.5px,9px 3.5px,8px 2.5px,7px 1.5px,6px .5px}' }}));
+dispatchEvent(new CustomEvent('ef.customStyles.define', { detail: { name: 'ef-card', styles: ':host{box-sizing:border-box;width:400px;box-shadow:0 2px 8px rgba(0,0,0,.25);background-color:#fafafa;overflow:hidden;scrollbar-face-color:#999;scrollbar-shadow-color:#999;scrollbar-highlight-color:#999;scrollbar-arrow-color:#999;scrollbar-track-color:#f2f2f2;scrollbar-3dlight-color:#f2f2f2;scrollbar-darkshadow-color:#f2f2f2;padding:16px}:host [part~=body],:host [part~=footer],:host [part~=header]{position:relative}:host [part~=header]{padding-bottom:inherit;min-height:24px}:host [part~=header-body]{z-index:0;font-weight:400;font-size:130%;font-family:inherit;display:flex;align-items:center}:host [part~=menu-button]{margin:0;font-size:16px}:host [part~=footer]{padding-top:inherit}:host [part~=footer-body]{padding-top:calc(1em - 1px);font-family:inherit;color:#737373;border-top:1px solid #d9d9d9}@supports not selector(::-webkit-scrollbar){:host{scrollbar-color:#999 #f2f2f2}}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-button{background:0 0/1px 2px no-repeat #f2f2f2;height:16px;width:16px;display:block}::-webkit-scrollbar-thumb{background:#999;border-radius:0;border:1px solid #f2f2f2}::-webkit-scrollbar-thumb:hover{background:#1429bd}::-webkit-scrollbar-thumb:active{background:#0f1e8a}::-webkit-scrollbar-track{background:#f2f2f2}::-webkit-scrollbar-corner{background:#f2f2f2}::-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(#999,#999),linear-gradient(#999,#999),linear-gradient(#999,#999),linear-gradient(#999,#999),linear-gradient(#999,#999),linear-gradient(#999,#999),linear-gradient(#999,#999);background-position:6.5px 8px,5.5px 7px,4.5px 6px,3.5px 5px,2.5px 6px,1.5px 7px,.5px 8px}::-webkit-scrollbar-button:vertical:start:decrement:hover{background-image:linear-gradient(#1429bd,#1429bd),linear-gradient(#1429bd,#1429bd),linear-gradient(#1429bd,#1429bd),linear-gradient(#1429bd,#1429bd),linear-gradient(#1429bd,#1429bd),linear-gradient(#1429bd,#1429bd),linear-gradient(#1429bd,#1429bd);background-position:6.5px 8px,5.5px 7px,4.5px 6px,3.5px 5px,2.5px 6px,1.5px 7px,.5px 8px}::-webkit-scrollbar-button:vertical:start:decrement:active{background-image:linear-gradient(#0f1e8a,#0f1e8a),linear-gradient(#0f1e8a,#0f1e8a),linear-gradient(#0f1e8a,#0f1e8a),linear-gradient(#0f1e8a,#0f1e8a),linear-gradient(#0f1e8a,#0f1e8a),linear-gradient(#0f1e8a,#0f1e8a),linear-gradient(#0f1e8a,#0f1e8a);background-position:6.5px 8px,5.5px 7px,4.5px 6px,3.5px 5px,2.5px 6px,1.5px 7px,.5px 8px}::-webkit-scrollbar-button:vertical:end:increment{background-image:linear-gradient(#999,#999),linear-gradient(#999,#999),linear-gradient(#999,#999),linear-gradient(#999,#999),linear-gradient(#999,#999),linear-gradient(#999,#999),linear-gradient(#999,#999);background-position:6.5px 6px,5.5px 7px,4.5px 8px,3.5px 9px,2.5px 8px,1.5px 7px,.5px 6px}::-webkit-scrollbar-button:vertical:end:increment:hover{background-image:linear-gradient(#1429bd,#1429bd),linear-gradient(#1429bd,#1429bd),linear-gradient(#1429bd,#1429bd),linear-gradient(#1429bd,#1429bd),linear-gradient(#1429bd,#1429bd),linear-gradient(#1429bd,#1429bd),linear-gradient(#1429bd,#1429bd);background-position:6.5px 6px,5.5px 7px,4.5px 8px,3.5px 9px,2.5px 8px,1.5px 7px,.5px 6px}::-webkit-scrollbar-button:vertical:end:increment:active{background-image:linear-gradient(#0f1e8a,#0f1e8a),linear-gradient(#0f1e8a,#0f1e8a),linear-gradient(#0f1e8a,#0f1e8a),linear-gradient(#0f1e8a,#0f1e8a),linear-gradient(#0f1e8a,#0f1e8a),linear-gradient(#0f1e8a,#0f1e8a),linear-gradient(#0f1e8a,#0f1e8a);background-position:6.5px 6px,5.5px 7px,4.5px 8px,3.5px 9px,2.5px 8px,1.5px 7px,.5px 6px}::-webkit-scrollbar-button:horizontal:start:decrement{background-image:linear-gradient(#999,#999),linear-gradient(#999,#999),linear-gradient(#999,#999),linear-gradient(#999,#999),linear-gradient(#999,#999),linear-gradient(#999,#999),linear-gradient(#999,#999);background-position:8px 6.5px,7px 5.5px,6px 4.5px,5px 3.5px,6px 2.5px,7px 1.5px,8px .5px}::-webkit-scrollbar-button:horizontal:start:decrement:hover{background-image:linear-gradient(#1429bd,#1429bd),linear-gradient(#1429bd,#1429bd),linear-gradient(#1429bd,#1429bd),linear-gradient(#1429bd,#1429bd),linear-gradient(#1429bd,#1429bd),linear-gradient(#1429bd,#1429bd),linear-gradient(#1429bd,#1429bd);background-position:8px 6.5px,7px 5.5px,6px 4.5px,5px 3.5px,6px 2.5px,7px 1.5px,8px .5px}::-webkit-scrollbar-button:horizontal:start:decrement:active{background-image:linear-gradient(#0f1e8a,#0f1e8a),linear-gradient(#0f1e8a,#0f1e8a),linear-gradient(#0f1e8a,#0f1e8a),linear-gradient(#0f1e8a,#0f1e8a),linear-gradient(#0f1e8a,#0f1e8a),linear-gradient(#0f1e8a,#0f1e8a),linear-gradient(#0f1e8a,#0f1e8a);background-position:8px 6.5px,7px 5.5px,6px 4.5px,5px 3.5px,6px 2.5px,7px 1.5px,8px .5px}::-webkit-scrollbar-button:horizontal:end:increment{background-image:linear-gradient(#999,#999),linear-gradient(#999,#999),linear-gradient(#999,#999),linear-gradient(#999,#999),linear-gradient(#999,#999),linear-gradient(#999,#999),linear-gradient(#999,#999);background-position:6px 6.5px,7px 5.5px,8px 4.5px,9px 3.5px,8px 2.5px,7px 1.5px,6px .5px}::-webkit-scrollbar-button:horizontal:end:increment:hover{background-image:linear-gradient(#1429bd,#1429bd),linear-gradient(#1429bd,#1429bd),linear-gradient(#1429bd,#1429bd),linear-gradient(#1429bd,#1429bd),linear-gradient(#1429bd,#1429bd),linear-gradient(#1429bd,#1429bd),linear-gradient(#1429bd,#1429bd);background-position:6px 6.5px,7px 5.5px,8px 4.5px,9px 3.5px,8px 2.5px,7px 1.5px,6px .5px}::-webkit-scrollbar-button:horizontal:end:increment:active{background-image:linear-gradient(#0f1e8a,#0f1e8a),linear-gradient(#0f1e8a,#0f1e8a),linear-gradient(#0f1e8a,#0f1e8a),linear-gradient(#0f1e8a,#0f1e8a),linear-gradient(#0f1e8a,#0f1e8a),linear-gradient(#0f1e8a,#0f1e8a),linear-gradient(#0f1e8a,#0f1e8a);background-position:6px 6.5px,7px 5.5px,8px 4.5px,9px 3.5px,8px 2.5px,7px 1.5px,6px .5px}' }}));

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

@@ -1,4 +1,4 @@
 import '@refinitiv-ui/elements/button/themes/solar/charcoal';
 import '@refinitiv-ui/elements/overlay-menu/themes/solar/charcoal';
 import '@refinitiv-ui/elements/label/themes/solar/charcoal';
-dispatchEvent(new CustomEvent('ef.customStyles.define', { detail: { name: 'ef-card', styles: ':host{padding:6px 10px;box-sizing:border-box;width:400px;box-shadow:0 0 8px 0 rgba(0,0,0,.6);overflow:hidden;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;background-color:#1a1a1c}:host [part~=body],:host [part~=footer],:host [part~=header]{position:relative}:host [part~=body]{overflow:auto}:host [part~=footer],:host [part~=header]{flex:1 0 auto}:host [part~=header]{padding-bottom:inherit;min-height:23px}:host [part~=header-body]{z-index:0;font-weight:400;font-size:130%;font-family:inherit;display:flex;align-items:center}:host [part~=menu-button]{margin:0;font-size:15px}:host [part~=footer]{padding-top:inherit}:host [part~=footer-body]{padding-top:calc(1em - 1px);font-family:inherit;color:#c2c2c2;border-top:1px solid #0a0a0a}@supports not selector(::-webkit-scrollbar){:host{scrollbar-color:#666570 #2e2e33}}::-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}' }}));
+dispatchEvent(new CustomEvent('ef.customStyles.define', { detail: { name: 'ef-card', styles: ':host{padding:6px 10px;box-sizing:border-box;width:400px;box-shadow:0 0 8px 0 rgba(0,0,0,.6);overflow:hidden;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;background-color:#1a1a1c}:host [part~=body],:host [part~=footer],:host [part~=header]{position:relative}:host [part~=header]{padding-bottom:inherit;min-height:23px}:host [part~=header-body]{z-index:0;font-weight:400;font-size:130%;font-family:inherit;display:flex;align-items:center}:host [part~=menu-button]{margin:0;font-size:15px}:host [part~=footer]{padding-top:inherit}:host [part~=footer-body]{padding-top:calc(1em - 1px);font-family:inherit;color:#c2c2c2;border-top:1px solid #0a0a0a}@supports not selector(::-webkit-scrollbar){:host{scrollbar-color:#666570 #2e2e33}}::-webkit-scrollbar{width:13px;height:13px}::-webkit-scrollbar-button{background:0 0/1px 2px no-repeat #2e2e33;height:12px;width:12px;display:block}::-webkit-scrollbar-thumb{background:#666570;border-radius:7px;border:2px solid #2e2e33}::-webkit-scrollbar-thumb:hover{background:#e2e2e2}::-webkit-scrollbar-thumb:active{background:#f93}::-webkit-scrollbar-track{background:#2e2e33}::-webkit-scrollbar-corner{background:#2e2e33}::-webkit-scrollbar-button:end:decrement,::-webkit-scrollbar-button:start:increment{display:none}::-webkit-scrollbar-button:horizontal{background-size:2px 1px}::-webkit-scrollbar-button:vertical:start:decrement{background-image:linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570);background-position:10px 6.5px,9px 5.5px,8px 4.5px,7px 3.5px,6px 2.5px,5px 3.5px,4px 4.5px,3px 5.5px,2px 6.5px}::-webkit-scrollbar-button:vertical:start:decrement:hover{background-image:linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2);background-position:10px 6.5px,9px 5.5px,8px 4.5px,7px 3.5px,6px 2.5px,5px 3.5px,4px 4.5px,3px 5.5px,2px 6.5px}::-webkit-scrollbar-button:vertical:start:decrement:active{background-image:linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93);background-position:10px 6.5px,9px 5.5px,8px 4.5px,7px 3.5px,6px 2.5px,5px 3.5px,4px 4.5px,3px 5.5px,2px 6.5px}::-webkit-scrollbar-button:vertical:end:increment{background-image:linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570);background-position:10px 3.5px,9px 4.5px,8px 5.5px,7px 6.5px,6px 7.5px,5px 6.5px,4px 5.5px,3px 4.5px,2px 3.5px}::-webkit-scrollbar-button:vertical:end:increment:hover{background-image:linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2);background-position:10px 3.5px,9px 4.5px,8px 5.5px,7px 6.5px,6px 7.5px,5px 6.5px,4px 5.5px,3px 4.5px,2px 3.5px}::-webkit-scrollbar-button:vertical:end:increment:active{background-image:linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93);background-position:10px 3.5px,9px 4.5px,8px 5.5px,7px 6.5px,6px 7.5px,5px 6.5px,4px 5.5px,3px 4.5px,2px 3.5px}::-webkit-scrollbar-button:horizontal:start:decrement{background-image:linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570);background-position:6.5px 10px,5.5px 9px,4.5px 8px,3.5px 7px,2.5px 6px,3.5px 5px,4.5px 4px,5.5px 3px,6.5px 2px}::-webkit-scrollbar-button:horizontal:start:decrement:hover{background-image:linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2);background-position:6.5px 10px,5.5px 9px,4.5px 8px,3.5px 7px,2.5px 6px,3.5px 5px,4.5px 4px,5.5px 3px,6.5px 2px}::-webkit-scrollbar-button:horizontal:start:decrement:active{background-image:linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93);background-position:6.5px 10px,5.5px 9px,4.5px 8px,3.5px 7px,2.5px 6px,3.5px 5px,4.5px 4px,5.5px 3px,6.5px 2px}::-webkit-scrollbar-button:horizontal:end:increment{background-image:linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570);background-position:3.5px 10px,4.5px 9px,5.5px 8px,6.5px 7px,7.5px 6px,6.5px 5px,5.5px 4px,4.5px 3px,3.5px 2px}::-webkit-scrollbar-button:horizontal:end:increment:hover{background-image:linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2);background-position:3.5px 10px,4.5px 9px,5.5px 8px,6.5px 7px,7.5px 6px,6.5px 5px,5.5px 4px,4.5px 3px,3.5px 2px}::-webkit-scrollbar-button:horizontal:end:increment:active{background-image:linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93);background-position:3.5px 10px,4.5px 9px,5.5px 8px,6.5px 7px,7.5px 6px,6.5px 5px,5.5px 4px,4.5px 3px,3.5px 2px}' }}));

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

@@ -1,4 +1,4 @@
 import '@refinitiv-ui/elements/button/themes/solar/pearl';
 import '@refinitiv-ui/elements/overlay-menu/themes/solar/pearl';
 import '@refinitiv-ui/elements/label/themes/solar/pearl';
-dispatchEvent(new CustomEvent('ef.customStyles.define', { detail: { name: 'ef-card', styles: ':host{padding:6px 10px;box-sizing:border-box;width:400px;box-shadow:0 0 8px 0 rgba(0,0,0,.3);overflow:hidden;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;background-color:#fff}:host [part~=body],:host [part~=footer],:host [part~=header]{position:relative}:host [part~=body]{overflow:auto}:host [part~=footer],:host [part~=header]{flex:1 0 auto}:host [part~=header]{padding-bottom:inherit;min-height:23px}:host [part~=header-body]{z-index:0;font-weight:400;font-size:130%;font-family:inherit;display:flex;align-items:center}:host [part~=menu-button]{margin:0;font-size:15px}:host [part~=footer]{padding-top:inherit}:host [part~=footer-body]{padding-top:calc(1em - 1px);font-family:inherit;color:#484848;border-top:1px solid #d5d8db}@supports not selector(::-webkit-scrollbar){:host{scrollbar-color:#8a8a96 #fff}}::-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}' }}));
+dispatchEvent(new CustomEvent('ef.customStyles.define', { detail: { name: 'ef-card', styles: ':host{padding:6px 10px;box-sizing:border-box;width:400px;box-shadow:0 0 8px 0 rgba(0,0,0,.3);overflow:hidden;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;background-color:#fff}:host [part~=body],:host [part~=footer],:host [part~=header]{position:relative}:host [part~=header]{padding-bottom:inherit;min-height:23px}:host [part~=header-body]{z-index:0;font-weight:400;font-size:130%;font-family:inherit;display:flex;align-items:center}:host [part~=menu-button]{margin:0;font-size:15px}:host [part~=footer]{padding-top:inherit}:host [part~=footer-body]{padding-top:calc(1em - 1px);font-family:inherit;color:#484848;border-top:1px solid #d5d8db}@supports not selector(::-webkit-scrollbar){:host{scrollbar-color:#8a8a96 #fff}}::-webkit-scrollbar{width:13px;height:13px}::-webkit-scrollbar-button{background:0 0/1px 2px no-repeat #fff;height:12px;width:12px;display:block}::-webkit-scrollbar-thumb{background:#8a8a96;border-radius:7px;border:2px solid #fff}::-webkit-scrollbar-thumb:hover{background:#a9afba}::-webkit-scrollbar-thumb:active{background:#ee7600}::-webkit-scrollbar-track{background:#fff}::-webkit-scrollbar-corner{background:#fff}::-webkit-scrollbar-button:end:decrement,::-webkit-scrollbar-button:start:increment{display:none}::-webkit-scrollbar-button:horizontal{background-size:2px 1px}::-webkit-scrollbar-button:vertical:start:decrement{background-image:linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96);background-position:10px 6.5px,9px 5.5px,8px 4.5px,7px 3.5px,6px 2.5px,5px 3.5px,4px 4.5px,3px 5.5px,2px 6.5px}::-webkit-scrollbar-button:vertical:start:decrement:hover{background-image:linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba);background-position:10px 6.5px,9px 5.5px,8px 4.5px,7px 3.5px,6px 2.5px,5px 3.5px,4px 4.5px,3px 5.5px,2px 6.5px}::-webkit-scrollbar-button:vertical:start:decrement:active{background-image:linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600);background-position:10px 6.5px,9px 5.5px,8px 4.5px,7px 3.5px,6px 2.5px,5px 3.5px,4px 4.5px,3px 5.5px,2px 6.5px}::-webkit-scrollbar-button:vertical:end:increment{background-image:linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96);background-position:10px 3.5px,9px 4.5px,8px 5.5px,7px 6.5px,6px 7.5px,5px 6.5px,4px 5.5px,3px 4.5px,2px 3.5px}::-webkit-scrollbar-button:vertical:end:increment:hover{background-image:linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba);background-position:10px 3.5px,9px 4.5px,8px 5.5px,7px 6.5px,6px 7.5px,5px 6.5px,4px 5.5px,3px 4.5px,2px 3.5px}::-webkit-scrollbar-button:vertical:end:increment:active{background-image:linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600);background-position:10px 3.5px,9px 4.5px,8px 5.5px,7px 6.5px,6px 7.5px,5px 6.5px,4px 5.5px,3px 4.5px,2px 3.5px}::-webkit-scrollbar-button:horizontal:start:decrement{background-image:linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96);background-position:6.5px 10px,5.5px 9px,4.5px 8px,3.5px 7px,2.5px 6px,3.5px 5px,4.5px 4px,5.5px 3px,6.5px 2px}::-webkit-scrollbar-button:horizontal:start:decrement:hover{background-image:linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba);background-position:6.5px 10px,5.5px 9px,4.5px 8px,3.5px 7px,2.5px 6px,3.5px 5px,4.5px 4px,5.5px 3px,6.5px 2px}::-webkit-scrollbar-button:horizontal:start:decrement:active{background-image:linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600);background-position:6.5px 10px,5.5px 9px,4.5px 8px,3.5px 7px,2.5px 6px,3.5px 5px,4.5px 4px,5.5px 3px,6.5px 2px}::-webkit-scrollbar-button:horizontal:end:increment{background-image:linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96);background-position:3.5px 10px,4.5px 9px,5.5px 8px,6.5px 7px,7.5px 6px,6.5px 5px,5.5px 4px,4.5px 3px,3.5px 2px}::-webkit-scrollbar-button:horizontal:end:increment:hover{background-image:linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba);background-position:3.5px 10px,4.5px 9px,5.5px 8px,6.5px 7px,7.5px 6px,6.5px 5px,5.5px 4px,4.5px 3px,3.5px 2px}::-webkit-scrollbar-button:horizontal:end:increment:active{background-image:linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600);background-position:3.5px 10px,4.5px 9px,5.5px 8px,6.5px 7px,7.5px 6px,6.5px 5px,5.5px 4px,4.5px 3px,3.5px 2px}' }}));

package/lib/combo-box/custom-elements.json

@@ -17,12 +17,6 @@
           "type": "boolean",
           "default": "false"
         },
-        {
-          "name": "clears",
-          "description": "Show clears button",
-          "type": "boolean",
-          "default": "false"
-        },
         {
           "name": "free-text",
           "description": "Allow to enter any value",
@@ -70,6 +64,12 @@
           "description": "Set placeholder text",
           "type": "string",
           "default": "\"\""
+        },
+        {
+          "name": "clears",
+          "description": "Show clears button",
+          "type": "boolean",
+          "default": "false"
         }
       ],
       "properties": [
@@ -98,13 +98,6 @@
           "type": "boolean",
           "default": "false"
         },
-        {
-          "name": "clears",
-          "attribute": "clears",
-          "description": "Show clears button",
-          "type": "boolean",
-          "default": "false"
-        },
         {
           "name": "freeText",
           "attribute": "free-text",
@@ -183,6 +176,13 @@
           "description": "Set placeholder text",
           "type": "string",
           "default": "\"\""
+        },
+        {
+          "name": "clears",
+          "attribute": "clears",
+          "description": "Show clears button",
+          "type": "boolean",
+          "default": "false"
         }
       ],
       "events": [

package/lib/combo-box/index.d.ts

@@ -28,6 +28,9 @@ export { ComboBoxRenderer, createComboBoxRenderer };
  * @attr {string} placeholder - Set placeholder text
  * @prop {string} [placeholder=""] - Set placeholder text
  *
+ * @attr {boolean} clears - Show clears button
+ * @prop {boolean} [clears=false] - Show clears button
+ *
  * @fires value-changed - Fired when the user commits a value change. The event is not triggered if `value` property is changed programmatically.
  * @fires query-changed - Fired when the user changes value in the input to change a query word. If `query-debounce-rate` is set, this event will be triggered after debounce completion. The event is not triggered if `query` property is changed programmatically.
  * @fires opened-changed - Fired when the user opens or closes control's popup. The event is not triggered if `opened` property is changed programmatically.
@@ -67,10 +70,6 @@ export declare class ComboBox<T extends DataItem = ItemData> extends FormFieldEl
      * Track opened state of popup
      */
     opened: boolean;
-    /**
-     * Show clears button
-     */
-    clears: boolean;
     private _freeText;
     /**
      * Allow to enter any value
@@ -179,10 +178,6 @@ export declare class ComboBox<T extends DataItem = ItemData> extends FormFieldEl
      * Internal reference to toggle button
      */
     protected toggleButtonEl: HTMLElement;
-    /**
-     * Internal reference to clears button
-     */
-    protected clearsButtonEl?: HTMLElement;
     /**
      * Use to call request update when CC changes its value
      * @returns {void}
@@ -422,10 +417,11 @@ export declare class ComboBox<T extends DataItem = ItemData> extends FormFieldEl
      */
     protected onToggleButtonTap(): void;
     /**
-     * Run when tap event happens on clears button
+     * Run when tap event happens on clears button and fire value-changed event.
+     * @param event tap event
      * @returns {void}
      */
-    protected onClearsButtonTap(): void;
+    protected onClearsButtonTap(event: TapEvent): void;
     /**
      * Run when tap event happens on input wrapper
      * excluding clears and toggles buttons
@@ -479,12 +475,6 @@ export declare class ComboBox<T extends DataItem = ItemData> extends FormFieldEl
      * @returns re-targeted event or the passed event if target is invalid
      */
     protected reTargetEvent(event: KeyboardEvent, target: HTMLElement): CustomKeyboardEvent;
-    /**
-     * Template for clear button
-     * Rendered when `clears` attribute is set
-     * @returns Popup template or undefined
-     */
-    protected get clearButtonTemplate(): TemplateResult | undefined;
     /**
      * Template for selection badge in multiple mode
      * @returns Selection badge template or undefined
@@ -511,6 +501,11 @@ export declare class ComboBox<T extends DataItem = ItemData> extends FormFieldEl
      * @returns template map
      */
     protected get decorateInputMap(): TemplateMap;
+    /**
+     * Returns a condition to show clear button
+     * @returns True if clear button will show
+     */
+    protected get hasClear(): boolean;
     /**
      * Returns a template for input field
      * @returns Input template

package/lib/combo-box/index.js

@@ -41,6 +41,9 @@ const freeTextMultipleWarning = new WarningNotice('"free-text" mode is not compa
  * @attr {string} placeholder - Set placeholder text
  * @prop {string} [placeholder=""] - Set placeholder text
  *
+ * @attr {boolean} clears - Show clears button
+ * @prop {boolean} [clears=false] - Show clears button
+ *
  * @fires value-changed - Fired when the user commits a value change. The event is not triggered if `value` property is changed programmatically.
  * @fires query-changed - Fired when the user changes value in the input to change a query word. If `query-debounce-rate` is set, this event will be triggered after debounce completion. The event is not triggered if `query` property is changed programmatically.
  * @fires opened-changed - Fired when the user opens or closes control's popup. The event is not triggered if `opened` property is changed programmatically.
@@ -63,10 +66,6 @@ let ComboBox = class ComboBox extends FormFieldElement {
          * Track opened state of popup
          */
         this.opened = false;
-        /**
-         * Show clears button
-         */
-        this.clears = false;
         this._freeText = false;
         /**
          * Set error state
@@ -839,8 +838,8 @@ let ComboBox = class ComboBox extends FormFieldElement {
             return;
         }
         const path = event.composedPath();
-        if (this.clearsButtonEl && path.includes(this.clearsButtonEl)) {
-            this.onClearsButtonTap();
+        if (this.clearsButton && path.includes(this.clearsButton)) {
+            // clear button uses tap event from FormField instead so no-op here
             return;
         }
         if (path.includes(this.toggleButtonEl)) {
@@ -862,15 +861,15 @@ let ComboBox = class ComboBox extends FormFieldElement {
         }
     }
     /**
-     * Run when tap event happens on clears button
+     * Run when tap event happens on clears button and fire value-changed event.
+     * @param event tap event
      * @returns {void}
      */
-    onClearsButtonTap() {
-        this.freeTextValue = '';
-        this.inputText = '';
+    onClearsButtonTap(event) {
         this.setQuery('');
-        this.setValueAndNotify('');
-        this.openOnFocus();
+        super.onClearsButtonTap(event);
+        this.inputText = '';
+        this.inputElement?.focus();
     }
     /**
      * Run when tap event happens on input wrapper
@@ -1007,21 +1006,6 @@ let ComboBox = class ComboBox extends FormFieldElement {
         }
         return keyboardEvent;
     }
-    /**
-     * Template for clear button
-     * Rendered when `clears` attribute is set
-     * @returns Popup template or undefined
-     */
-    get clearButtonTemplate() {
-        const hasText = this.label || this.query || this.freeTextValue || this.inputText;
-        if (this.clears && hasText) {
-            return html `
-        <div id="clears-button" part="button button-clear">
-          <ef-icon part="icon icon-clear" icon="cross"></ef-icon>
-        </div>
-      `;
-        }
-    }
     /**
      * Template for selection badge in multiple mode
      * @returns Selection badge template or undefined
@@ -1113,6 +1097,14 @@ let ComboBox = class ComboBox extends FormFieldElement {
             'aria-activedescendant': this.highlightedItemValue
         };
     }
+    /**
+     * Returns a condition to show clear button
+     * @returns True if clear button will show
+     */
+    get hasClear() {
+        const editable = !(this.readonly || this.disabled);
+        return !!(this.clears && editable && (this.value || this.inputText || this.freeTextValue));
+    }
     /**
      * Returns a template for input field
      * @returns Input template
@@ -1146,9 +1138,6 @@ __decorate([
 __decorate([
     property({ type: Boolean, reflect: true })
 ], ComboBox.prototype, "opened", void 0);
-__decorate([
-    property({ type: Boolean })
-], ComboBox.prototype, "clears", void 0);
 __decorate([
     property({ type: Boolean, attribute: 'free-text' })
 ], ComboBox.prototype, "freeText", null);
@@ -1179,9 +1168,6 @@ __decorate([
 __decorate([
     query('#toggle-button')
 ], ComboBox.prototype, "toggleButtonEl", void 0);
-__decorate([
-    query('#clears-button')
-], ComboBox.prototype, "clearsButtonEl", void 0);
 __decorate([
     property({ type: Boolean, reflect: true })
 ], ComboBox.prototype, "loading", void 0);

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

@@ -4,4 +4,4 @@ import '@refinitiv-ui/elements/counter/themes/halo/dark';
 import '@refinitiv-ui/elements/item/themes/halo/dark';
 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-combo-box', 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%;margin:1px 0;outline:0;box-sizing:border-box;display:inline-flex;align-items:center;position:relative;vertical-align:middle;border-radius:0;background-color:#0d0d0d;text-overflow:ellipsis;border:1px solid #404040;scrollbar-face-color:#595959;scrollbar-shadow-color:#595959;scrollbar-highlight-color:#595959;scrollbar-arrow-color:#595959;scrollbar-track-color:#1a1a1a;scrollbar-3dlight-color:#1a1a1a;scrollbar-darkshadow-color:#1a1a1a;color:#ccc;scrollbar-face-color:#595959;scrollbar-shadow-color:#595959;scrollbar-highlight-color:#595959;scrollbar-arrow-color:#595959;scrollbar-track-color:#1a1a1a;scrollbar-3dlight-color:#1a1a1a;scrollbar-darkshadow-color:#1a1a1a;padding:0}:host([disabled]){border:1px solid rgba(64,64,64,.5)}:host([type=number]){padding-right:0}: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 ::-ms-clear{display:none}:host(:not([readonly])[focused]),:host([focused]){background-size:100% 2px,100% 1px!important;background-position:center bottom!important;border-color:#334bff}:host [part=input]{color:inherit;padding:0;margin:0;flex:1 1 auto;min-width:0;width:100%;height:100%;-webkit-appearance:none;-moz-appearance:none;appearance:none;text-overflow:ellipsis;touch-action:manipulation}:host [part=input]::-webkit-clear-button,:host [part=input]::-webkit-inner-spin-button,:host [part=input]::-webkit-search-cancel-button,:host [part=input]::-webkit-search-decoration{-webkit-appearance:none}:host [part=input]:invalid{box-shadow:none}:host([disabled]) [part=input]{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}:host([readonly]){cursor:default}:host [part=placeholder]{opacity:.5;opacity:.7}:host [part=label],:host [part=placeholder]{margin-right:3px}:host [part~=icon]{color:#ccc;opacity:.7}:host(:not([readonly]):hover) [part~=icon],:host(:not([readonly])[focused]) [part~=icon]{opacity:1}:host(:not([readonly])[focused]) [part~=icon]{color:#334bff}:host([disabled]) [part~=icon]{color:rgba(64,64,64,.5)}:host [part=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:12px;font-weight:400;height:24px;max-width:100%;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;text-overflow:ellipsis;border:1px solid #404040;width:100%;background:0 0;border:none;padding:0 8px}:host [part~=input][disabled]{color:rgba(204,204,204,.5);border:1px solid rgba(64,64,64,.5)}:host [part~=input][type=number]{padding-right:0}:host [part~=input][warning]{border:1px solid #7f6400}:host [part~=input][warning][disabled]{color:rgba(204,204,204,.5);border:1px solid rgba(127,100,0,.5)}:host [part~=input][error],:host [part~=input][error][warning]{border:1px solid #a01c2b}:host [part~=input][error][disabled],:host [part~=input][error][warning][disabled]{color:rgba(204,204,204,.5);border:1px solid rgba(160,28,43,.5)}:host [part~=input] ::-ms-clear{display:none}:host [part~=button]{display:flex;justify-content:center;align-items:center;flex:none;height:100%;width:24px}: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}:host ::-moz-selection{color:#fff;background-color:#334bff}:host ::selection{color:#fff;background-color:#334bff}:host [part=icon]{color:#ccc;min-width:1em;margin-left:2px;color:inherit}:host(:not([readonly]):not([error]):not([warning]):not([focused]):hover){border-color:grey;color:#fff}:host(:not([readonly]):not([error]):not([warning]):not([focused]):hover) [part=icon]{color:#6678ff}:host([warning]){border-color:#ffc800}:host([error]),:host([error][warning]){border-color:#f5475b}:host([warning]:hover:not([readonly]):not([focused])){color:#fff;border-color:#ffe999}:host([warning][disabled]),:host([warning][readonly]:not([focused])){border-color:rgba(255,233,153,.5)}:host([error]:hover:not([readonly]):not([focused])){color:#fff;border-color:#faa8b1}:host([error][disabled]),:host([error][readonly]:not([focused])),:host([error][warning][disabled]){border-color:rgba(250,168,177,.5)}:host([disabled]){color:rgba(204,204,204,.5);border-color:rgba(64,64,64,.5);background-color:rgba(13,13,13,.5)}:host([readonly]:not([focused])){border-color:rgba(64,64,64,.5);background-color:rgba(13,13,13,.5)}:host([readonly]:not([focused])) [part=icon]{color:rgba(204,204,204,.5)}:host(:not([readonly])[focused]),:host([focused]),:host([focused][error][warning]){border-color:#334bff;color:#fff}:host([focused]) [part=icon],:host([focused][error][warning]) [part=icon]{color:#6678ff}:host [part=list]{color:#ccc;max-width:var(--list-max-width,300px);max-height:var(--list-max-height);border:1px solid #334bff;margin:2px 0;background-color:#262626}:host [part=list] ::slotted(ef-item:not(:first-child):not([type=divider])),:host [part=list] ef-item:not(:first-child):not([type=divider]){box-shadow:0 -1px 0 #404040}:host [part=list] ::slotted(:not(ef-item)){display:none}@supports not selector(::-webkit-scrollbar){:host{scrollbar-color:#595959 #1a1a1a;scrollbar-width:thin}}::-webkit-scrollbar-corner{background:0 0}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-thumb{background:#595959;border-radius:0;border:1px solid transparent}::-webkit-scrollbar-thumb:hover{background:#1429bd}::-webkit-scrollbar-thumb:active{background:#0f1e8a}::-webkit-scrollbar-track{background:#1a1a1a}::-webkit-scrollbar-thumb:horizontal{background-size:auto 6px;background-repeat:repeat-x;background-image:linear-gradient(to bottom,#595959,#595959);background-color:transparent;background-position:center}::-webkit-scrollbar-thumb:horizontal:hover{background-image:linear-gradient(to bottom,#1429bd,#1429bd);background-color:transparent;background-position:center}::-webkit-scrollbar-thumb:horizontal:active{background-image:linear-gradient(to bottom,#0f1e8a,#0f1e8a);background-color:transparent;background-position:center}::-webkit-scrollbar-thumb:vertical{background-size:6px auto;background-repeat:repeat-y;background-image:linear-gradient(to right,#595959,#595959);background-color:transparent;background-position:center}::-webkit-scrollbar-thumb:vertical:hover{background-image:linear-gradient(to right,#1429bd,#1429bd);background-color:transparent;background-position:center}::-webkit-scrollbar-thumb:vertical:active{background-image:linear-gradient(to right,#0f1e8a,#0f1e8a);background-color:transparent;background-position:center}::-webkit-scrollbar-track:horizontal{border-top:1px solid #0d0d0d;border-bottom:1px solid #0d0d0d}::-webkit-scrollbar-track:vertical{border-left:1px solid #0d0d0d;border-right:1px solid #0d0d0d}::-webkit-scrollbar-button{background:0 0/1px 2px no-repeat #1a1a1a;height:16px;width:16px;display:none;border:1px solid #0d0d0d}::-webkit-scrollbar-button:end:decrement,::-webkit-scrollbar-button:start:increment{display:none}::-webkit-scrollbar-button:hover{background-color:#1429bd;border:1px solid #1429bd}::-webkit-scrollbar-button:active{background-color:#0f1e8a;border:1px solid #0d0d0d}::-webkit-scrollbar-button:horizontal{background-size:2px 1px}::-webkit-scrollbar-button:vertical:start:decrement{border-bottom-color:#0d0d0d;background-image:linear-gradient(#ccc,#ccc),linear-gradient(#ccc,#ccc),linear-gradient(#ccc,#ccc),linear-gradient(#ccc,#ccc),linear-gradient(#ccc,#ccc),linear-gradient(#ccc,#ccc),linear-gradient(#ccc,#ccc),linear-gradient(#ccc,#ccc),linear-gradient(#ccc,#ccc);background-position:10.55px 8px,9.55px 7px,8.55px 6px,7.55px 5px,6.55px 4px,5.55px 5px,4.55px 6px,3.55px 7px,2.55px 8px}::-webkit-scrollbar-button:vertical:start:decrement:hover{background-image:linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff);background-position:10.55px 8px,9.55px 7px,8.55px 6px,7.55px 5px,6.55px 4px,5.55px 5px,4.55px 6px,3.55px 7px,2.55px 8px;border-bottom-color:#1429bd}::-webkit-scrollbar-button:vertical:start:decrement:active{background-image:linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff);background-position:10.55px 8px,9.55px 7px,8.55px 6px,7.55px 5px,6.55px 4px,5.55px 5px,4.55px 6px,3.55px 7px,2.55px 8px;border-bottom-color:#0d0d0d}::-webkit-scrollbar-button:vertical:end:increment{border-top-color:#0d0d0d;background-image:linear-gradient(#ccc,#ccc),linear-gradient(#ccc,#ccc),linear-gradient(#ccc,#ccc),linear-gradient(#ccc,#ccc),linear-gradient(#ccc,#ccc),linear-gradient(#ccc,#ccc),linear-gradient(#ccc,#ccc),linear-gradient(#ccc,#ccc),linear-gradient(#ccc,#ccc);background-position:10.55px 4px,9.55px 5px,8.55px 6px,7.55px 7px,6.55px 8px,5.55px 7px,4.55px 6px,3.55px 5px,2.55px 4px}::-webkit-scrollbar-button:vertical:end:increment:hover{background-image:linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff);background-position:10.55px 4px,9.55px 5px,8.55px 6px,7.55px 7px,6.55px 8px,5.55px 7px,4.55px 6px,3.55px 5px,2.55px 4px;border-top-color:#1429bd}::-webkit-scrollbar-button:vertical:end:increment:active{background-image:linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff);background-position:10.55px 4px,9.55px 5px,8.55px 6px,7.55px 7px,6.55px 8px,5.55px 7px,4.55px 6px,3.55px 5px,2.55px 4px;border-top-color:#0d0d0d}::-webkit-scrollbar-button:horizontal:start:decrement{border-right-color:#0d0d0d;background-image:linear-gradient(#ccc,#ccc),linear-gradient(#ccc,#ccc),linear-gradient(#ccc,#ccc),linear-gradient(#ccc,#ccc),linear-gradient(#ccc,#ccc),linear-gradient(#ccc,#ccc),linear-gradient(#ccc,#ccc),linear-gradient(#ccc,#ccc),linear-gradient(#ccc,#ccc);background-position:7.5px 10.55px,6.5px 9.55px,5.5px 8.55px,4.5px 7.55px,3.5px 6.55px,4.5px 5.55px,5.5px 4.55px,6.5px 3.55px,7.5px 2.55px}::-webkit-scrollbar-button:horizontal:start:decrement:hover{background-image:linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff);background-position:7.5px 10.55px,6.5px 9.55px,5.5px 8.55px,4.5px 7.55px,3.5px 6.55px,4.5px 5.55px,5.5px 4.55px,6.5px 3.55px,7.5px 2.55px;border-right-color:#1429bd}::-webkit-scrollbar-button:horizontal:start:decrement:active{background-image:linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff);background-position:7.5px 10.55px,6.5px 9.55px,5.5px 8.55px,4.5px 7.55px,3.5px 6.55px,4.5px 5.55px,5.5px 4.55px,6.5px 3.55px,7.5px 2.55px;border-right-color:#0d0d0d}::-webkit-scrollbar-button:horizontal:end:increment{border-left-color:#0d0d0d;background-image:linear-gradient(#ccc,#ccc),linear-gradient(#ccc,#ccc),linear-gradient(#ccc,#ccc),linear-gradient(#ccc,#ccc),linear-gradient(#ccc,#ccc),linear-gradient(#ccc,#ccc),linear-gradient(#ccc,#ccc),linear-gradient(#ccc,#ccc),linear-gradient(#ccc,#ccc);background-position:5px 10.55px,6px 9.55px,7px 8.55px,8px 7.55px,9px 6.55px,8px 5.55px,7px 4.55px,6px 3.55px,5px 2.55px}::-webkit-scrollbar-button:horizontal:end:increment:hover{background-image:linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff);background-position:5px 10.55px,6px 9.55px,7px 8.55px,8px 7.55px,9px 6.55px,8px 5.55px,7px 4.55px,6px 3.55px,5px 2.55px;border-left-color:#1429bd}::-webkit-scrollbar-button:horizontal:end:increment:active{background-image:linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff);background-position:5px 10.55px,6px 9.55px,7px 8.55px,8px 7.55px,9px 6.55px,8px 5.55px,7px 4.55px,6px 3.55px,5px 2.55px;border-left-color:#0d0d0d}:host [part~=input-wrapper]{border-left-color:inherit}:host [part~=button-toggle]{border-left:1px solid #404040;border-left-color:inherit}:host [part~=button-toggle]::before{content:\'\';display:block;position:absolute;top:-1px;right:-1px;bottom:-1px;width:24px;border:1px solid transparent}:host(:not([readonly])) [part~=button-clear]:hover{color:#334bff}:host(:not([readonly]):hover) [part~=button-toggle]{color:#334bff}:host(:not([readonly])[focused]) [part~=button-toggle]{border-left-color:#334bff;color:#334bff}:host(:not([readonly])) [part~=button-toggle]:hover{border-left-color:#334bff;color:#fff;background:#1429bd}:host(:not([readonly])) [part~=button-toggle]:hover::after{content:\'\';display:block;position:absolute;top:-1px;right:-1px;bottom:-1px;left:-1px;border:1px solid #334bff;pointer-events:none}:host(:not([readonly])) [part~=button-toggle]:active{background:#0f1e8a}:host(:not([readonly])) [part~=button]:active{color:#fff}:host(:not([readonly])) [part~=icon]{color:inherit!important}:host([disabled]) [part~=input]{border:none}:host([disabled]) [part~=button-toggle],:host([readonly]) [part~=button-toggle]{border-left-color:rgba(64,64,64,.5)}:host([readonly]) [part~=button-toggle]{color:rgba(204,204,204,.5);cursor:default}:host([focused][readonly]) [part~=button-toggle]{border-left-color:#334bff}:host [part=list] ::slotted(ef-list){display:block}:host [part=list] ef-list-item:not(:first-child):not([type=divider]){box-shadow:0 -1px 0 #404040}' }}));
+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:12px;font-weight:400;height:24px;width:152px;max-width:100%;margin:1px 0;outline:0;box-sizing:border-box;display:inline-flex;align-items:center;position:relative;vertical-align:middle;border-radius:0;background-color:#0d0d0d;text-overflow:ellipsis;border:1px solid #404040;scrollbar-face-color:#595959;scrollbar-shadow-color:#595959;scrollbar-highlight-color:#595959;scrollbar-arrow-color:#595959;scrollbar-track-color:#1a1a1a;scrollbar-3dlight-color:#1a1a1a;scrollbar-darkshadow-color:#1a1a1a;color:#ccc;scrollbar-face-color:#595959;scrollbar-shadow-color:#595959;scrollbar-highlight-color:#595959;scrollbar-arrow-color:#595959;scrollbar-track-color:#1a1a1a;scrollbar-3dlight-color:#1a1a1a;scrollbar-darkshadow-color:#1a1a1a;padding:0}:host([disabled]){border:1px solid rgba(64,64,64,.5)}:host([type=number]){padding-right:0}: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 ::-ms-clear{display:none}:host(:not([readonly])[focused]),:host([focused]){background-size:100% 2px,100% 1px!important;background-position:center bottom!important;border-color:#334bff}:host [part=input]{color:inherit;padding:0;margin:0;flex:1 1 auto;min-width:0;width:100%;height:100%;-webkit-appearance:none;-moz-appearance:none;appearance:none;text-overflow:ellipsis;touch-action:manipulation}:host [part=input]::-webkit-clear-button,:host [part=input]::-webkit-inner-spin-button,:host [part=input]::-webkit-search-cancel-button,:host [part=input]::-webkit-search-decoration{-webkit-appearance:none}:host [part=input]:invalid{box-shadow:none}:host([disabled]) [part=input]{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}:host [part~=button]{display:flex;justify-content:center;align-items:center;cursor:pointer;flex:none}:host([readonly]){cursor:default}:host [part=placeholder]{opacity:.5;opacity:.7}:host [part=label],:host [part=placeholder]{margin-right:3px}:host [part~=icon]{color:#ccc;opacity:.7}:host(:not([readonly]):hover) [part~=icon],:host(:not([readonly])[focused]) [part~=icon]{opacity:1}:host(:not([readonly])[focused]) [part~=icon]{color:#334bff}:host([disabled]) [part~=icon]{color:rgba(64,64,64,.5)}:host [part=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:12px;font-weight:400;height:24px;max-width:100%;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;text-overflow:ellipsis;border:1px solid #404040;width:100%;background:0 0;border:none;padding:0 8px}:host [part~=input][disabled]{color:rgba(204,204,204,.5);border:1px solid rgba(64,64,64,.5)}:host [part~=input][type=number]{padding-right:0}:host [part~=input][warning]{border:1px solid #7f6400}:host [part~=input][warning][disabled]{color:rgba(204,204,204,.5);border:1px solid rgba(127,100,0,.5)}:host [part~=input][error],:host [part~=input][error][warning]{border:1px solid #a01c2b}:host [part~=input][error][disabled],:host [part~=input][error][warning][disabled]{color:rgba(204,204,204,.5);border:1px solid rgba(160,28,43,.5)}:host [part~=input] ::-ms-clear{display:none}:host [part~=button]{display:flex;justify-content:center;align-items:center;flex:none;height:100%;width:24px}: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}:host ::-moz-selection{color:#fff;background-color:#334bff}:host ::selection{color:#fff;background-color:#334bff}:host [part=icon]{color:#ccc;min-width:1em;margin-left:2px;color:inherit}:host(:not([readonly]):not([error]):not([warning]):not([focused]):hover){border-color:grey;color:#fff}:host(:not([readonly]):not([error]):not([warning]):not([focused]):hover) [part=icon]{color:#6678ff}:host [part~=button-clear]:active,:host [part~=button-clear]:hover{color:#334bff}:host([warning]){border-color:#ffc800}:host([error]),:host([error][warning]){border-color:#f5475b}:host([warning]:hover:not([readonly]):not([focused])){color:#fff;border-color:#ffe999}:host([warning][disabled]),:host([warning][readonly]:not([focused])){border-color:rgba(255,233,153,.5)}:host([error]:hover:not([readonly]):not([focused])){color:#fff;border-color:#faa8b1}:host([error][disabled]),:host([error][readonly]:not([focused])),:host([error][warning][disabled]){border-color:rgba(250,168,177,.5)}:host([disabled]){color:rgba(204,204,204,.5);border-color:rgba(64,64,64,.5);background-color:rgba(13,13,13,.5)}:host([readonly]:not([focused])){border-color:rgba(64,64,64,.5);background-color:rgba(13,13,13,.5)}:host([readonly]:not([focused])) [part=icon]{color:rgba(204,204,204,.5)}:host(:not([readonly])[focused]),:host([focused]),:host([focused][error][warning]){border-color:#334bff;color:#fff}:host([focused]) [part=icon],:host([focused][error][warning]) [part=icon]{color:#6678ff}:host [part=list]{color:#ccc;max-width:var(--list-max-width,300px);max-height:var(--list-max-height);border:1px solid #334bff;margin:2px 0;background-color:#262626}:host [part=list] ::slotted(ef-item:not(:first-child):not([type=divider])),:host [part=list] ef-item:not(:first-child):not([type=divider]){box-shadow:0 -1px 0 #404040}:host [part=list] ::slotted(:not(ef-item)){display:none}@supports not selector(::-webkit-scrollbar){:host{scrollbar-color:#595959 #1a1a1a;scrollbar-width:thin}}::-webkit-scrollbar-corner{background:0 0}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-thumb{background:#595959;border-radius:0;border:1px solid transparent}::-webkit-scrollbar-thumb:hover{background:#1429bd}::-webkit-scrollbar-thumb:active{background:#0f1e8a}::-webkit-scrollbar-track{background:#1a1a1a}::-webkit-scrollbar-thumb:horizontal{background-size:auto 6px;background-repeat:repeat-x;background-image:linear-gradient(to bottom,#595959,#595959);background-color:transparent;background-position:center}::-webkit-scrollbar-thumb:horizontal:hover{background-image:linear-gradient(to bottom,#1429bd,#1429bd);background-color:transparent;background-position:center}::-webkit-scrollbar-thumb:horizontal:active{background-image:linear-gradient(to bottom,#0f1e8a,#0f1e8a);background-color:transparent;background-position:center}::-webkit-scrollbar-thumb:vertical{background-size:6px auto;background-repeat:repeat-y;background-image:linear-gradient(to right,#595959,#595959);background-color:transparent;background-position:center}::-webkit-scrollbar-thumb:vertical:hover{background-image:linear-gradient(to right,#1429bd,#1429bd);background-color:transparent;background-position:center}::-webkit-scrollbar-thumb:vertical:active{background-image:linear-gradient(to right,#0f1e8a,#0f1e8a);background-color:transparent;background-position:center}::-webkit-scrollbar-track:horizontal{border-top:1px solid #0d0d0d;border-bottom:1px solid #0d0d0d}::-webkit-scrollbar-track:vertical{border-left:1px solid #0d0d0d;border-right:1px solid #0d0d0d}::-webkit-scrollbar-button{background:0 0/1px 2px no-repeat #1a1a1a;height:16px;width:16px;display:none;border:1px solid #0d0d0d}::-webkit-scrollbar-button:end:decrement,::-webkit-scrollbar-button:start:increment{display:none}::-webkit-scrollbar-button:hover{background-color:#1429bd;border:1px solid #1429bd}::-webkit-scrollbar-button:active{background-color:#0f1e8a;border:1px solid #0d0d0d}::-webkit-scrollbar-button:horizontal{background-size:2px 1px}::-webkit-scrollbar-button:vertical:start:decrement{border-bottom-color:#0d0d0d;background-image:linear-gradient(#ccc,#ccc),linear-gradient(#ccc,#ccc),linear-gradient(#ccc,#ccc),linear-gradient(#ccc,#ccc),linear-gradient(#ccc,#ccc),linear-gradient(#ccc,#ccc),linear-gradient(#ccc,#ccc),linear-gradient(#ccc,#ccc),linear-gradient(#ccc,#ccc);background-position:10.55px 8px,9.55px 7px,8.55px 6px,7.55px 5px,6.55px 4px,5.55px 5px,4.55px 6px,3.55px 7px,2.55px 8px}::-webkit-scrollbar-button:vertical:start:decrement:hover{background-image:linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff);background-position:10.55px 8px,9.55px 7px,8.55px 6px,7.55px 5px,6.55px 4px,5.55px 5px,4.55px 6px,3.55px 7px,2.55px 8px;border-bottom-color:#1429bd}::-webkit-scrollbar-button:vertical:start:decrement:active{background-image:linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff);background-position:10.55px 8px,9.55px 7px,8.55px 6px,7.55px 5px,6.55px 4px,5.55px 5px,4.55px 6px,3.55px 7px,2.55px 8px;border-bottom-color:#0d0d0d}::-webkit-scrollbar-button:vertical:end:increment{border-top-color:#0d0d0d;background-image:linear-gradient(#ccc,#ccc),linear-gradient(#ccc,#ccc),linear-gradient(#ccc,#ccc),linear-gradient(#ccc,#ccc),linear-gradient(#ccc,#ccc),linear-gradient(#ccc,#ccc),linear-gradient(#ccc,#ccc),linear-gradient(#ccc,#ccc),linear-gradient(#ccc,#ccc);background-position:10.55px 4px,9.55px 5px,8.55px 6px,7.55px 7px,6.55px 8px,5.55px 7px,4.55px 6px,3.55px 5px,2.55px 4px}::-webkit-scrollbar-button:vertical:end:increment:hover{background-image:linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff);background-position:10.55px 4px,9.55px 5px,8.55px 6px,7.55px 7px,6.55px 8px,5.55px 7px,4.55px 6px,3.55px 5px,2.55px 4px;border-top-color:#1429bd}::-webkit-scrollbar-button:vertical:end:increment:active{background-image:linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff);background-position:10.55px 4px,9.55px 5px,8.55px 6px,7.55px 7px,6.55px 8px,5.55px 7px,4.55px 6px,3.55px 5px,2.55px 4px;border-top-color:#0d0d0d}::-webkit-scrollbar-button:horizontal:start:decrement{border-right-color:#0d0d0d;background-image:linear-gradient(#ccc,#ccc),linear-gradient(#ccc,#ccc),linear-gradient(#ccc,#ccc),linear-gradient(#ccc,#ccc),linear-gradient(#ccc,#ccc),linear-gradient(#ccc,#ccc),linear-gradient(#ccc,#ccc),linear-gradient(#ccc,#ccc),linear-gradient(#ccc,#ccc);background-position:7.5px 10.55px,6.5px 9.55px,5.5px 8.55px,4.5px 7.55px,3.5px 6.55px,4.5px 5.55px,5.5px 4.55px,6.5px 3.55px,7.5px 2.55px}::-webkit-scrollbar-button:horizontal:start:decrement:hover{background-image:linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff);background-position:7.5px 10.55px,6.5px 9.55px,5.5px 8.55px,4.5px 7.55px,3.5px 6.55px,4.5px 5.55px,5.5px 4.55px,6.5px 3.55px,7.5px 2.55px;border-right-color:#1429bd}::-webkit-scrollbar-button:horizontal:start:decrement:active{background-image:linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff);background-position:7.5px 10.55px,6.5px 9.55px,5.5px 8.55px,4.5px 7.55px,3.5px 6.55px,4.5px 5.55px,5.5px 4.55px,6.5px 3.55px,7.5px 2.55px;border-right-color:#0d0d0d}::-webkit-scrollbar-button:horizontal:end:increment{border-left-color:#0d0d0d;background-image:linear-gradient(#ccc,#ccc),linear-gradient(#ccc,#ccc),linear-gradient(#ccc,#ccc),linear-gradient(#ccc,#ccc),linear-gradient(#ccc,#ccc),linear-gradient(#ccc,#ccc),linear-gradient(#ccc,#ccc),linear-gradient(#ccc,#ccc),linear-gradient(#ccc,#ccc);background-position:5px 10.55px,6px 9.55px,7px 8.55px,8px 7.55px,9px 6.55px,8px 5.55px,7px 4.55px,6px 3.55px,5px 2.55px}::-webkit-scrollbar-button:horizontal:end:increment:hover{background-image:linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff);background-position:5px 10.55px,6px 9.55px,7px 8.55px,8px 7.55px,9px 6.55px,8px 5.55px,7px 4.55px,6px 3.55px,5px 2.55px;border-left-color:#1429bd}::-webkit-scrollbar-button:horizontal:end:increment:active{background-image:linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff);background-position:5px 10.55px,6px 9.55px,7px 8.55px,8px 7.55px,9px 6.55px,8px 5.55px,7px 4.55px,6px 3.55px,5px 2.55px;border-left-color:#0d0d0d}:host [part~=input-wrapper]{border-left-color:inherit}:host [part~=button-toggle]{border-left:1px solid #404040;border-left-color:inherit}:host [part~=button-toggle]::before{content:\'\';display:block;position:absolute;top:-1px;right:-1px;bottom:-1px;width:24px;border:1px solid transparent}:host(:not([readonly]):hover) [part~=button-toggle]{color:#334bff}:host(:not([readonly])[focused]) [part~=button-toggle]{border-left-color:#334bff;color:#334bff}:host(:not([readonly])) [part~=button-toggle]:hover{border-left-color:#334bff;color:#fff;background:#1429bd}:host(:not([readonly])) [part~=button-toggle]:hover::after{content:\'\';display:block;position:absolute;top:-1px;right:-1px;bottom:-1px;left:-1px;border:1px solid #334bff;pointer-events:none}:host(:not([readonly])) [part~=button-toggle]:active{background:#0f1e8a}:host(:not([readonly])) [part~=button]:active{color:#fff}:host(:not([readonly])) [part~=icon]{color:inherit!important}:host(:not([readonly])) [part~=button-clear]:active,:host(:not([readonly])) [part~=button-clear]:hover{color:#334bff}:host([disabled]) [part~=input]{border:none}:host([disabled]) [part~=button-toggle],:host([readonly]) [part~=button-toggle]{border-left-color:rgba(64,64,64,.5)}:host([readonly]) [part~=button-toggle]{color:rgba(204,204,204,.5);cursor:default}:host([focused][readonly]) [part~=button-toggle]{border-left-color:#334bff}:host [part=list] ::slotted(ef-list){display:block}:host [part=list] ef-list-item:not(:first-child):not([type=divider]){box-shadow:0 -1px 0 #404040}' }}));

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

@@ -4,4 +4,4 @@ import '@refinitiv-ui/elements/counter/themes/halo/light';
 import '@refinitiv-ui/elements/item/themes/halo/light';
 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-combo-box', 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%;margin:1px 0;outline:0;box-sizing:border-box;display:inline-flex;align-items:center;position:relative;vertical-align:middle;border-radius:0;background-color:#fff;text-overflow:ellipsis;border:1px solid #595959;scrollbar-face-color:#999;scrollbar-shadow-color:#999;scrollbar-highlight-color:#999;scrollbar-arrow-color:#999;scrollbar-track-color:#f2f2f2;scrollbar-3dlight-color:#f2f2f2;scrollbar-darkshadow-color:#f2f2f2;color:#404040;scrollbar-face-color:#999;scrollbar-shadow-color:#999;scrollbar-highlight-color:#999;scrollbar-arrow-color:#999;scrollbar-track-color:#f2f2f2;scrollbar-3dlight-color:#f2f2f2;scrollbar-darkshadow-color:#f2f2f2;padding:0}:host([disabled]){border:1px solid rgba(89,89,89,.5)}:host([type=number]){padding-right:0}:host([warning]){border:1px solid #cca000}:host([warning][disabled]){color:rgba(64,64,64,.5);border:1px solid rgba(204,160,0,.5)}:host([error]),:host([error][warning]){border:1px solid #b63243}:host([error][disabled]),:host([error][warning][disabled]){color:rgba(64,64,64,.5);border:1px solid rgba(182,50,67,.5)}:host ::-ms-clear{display:none}:host(:not([readonly])[focused]),:host([focused]){background-size:100% 2px,100% 1px!important;background-position:center bottom!important;border-color:#334bff}:host [part=input]{color:inherit;padding:0;margin:0;flex:1 1 auto;min-width:0;width:100%;height:100%;-webkit-appearance:none;-moz-appearance:none;appearance:none;text-overflow:ellipsis;touch-action:manipulation}:host [part=input]::-webkit-clear-button,:host [part=input]::-webkit-inner-spin-button,:host [part=input]::-webkit-search-cancel-button,:host [part=input]::-webkit-search-decoration{-webkit-appearance:none}:host [part=input]:invalid{box-shadow:none}:host([disabled]) [part=input]{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}:host([readonly]){cursor:default}:host [part=placeholder]{opacity:.5;opacity:.7}:host [part=label],:host [part=placeholder]{margin-right:3px}:host [part~=icon]{color:#404040;opacity:.7}:host(:not([readonly]):hover) [part~=icon],:host(:not([readonly])[focused]) [part~=icon]{opacity:1}:host(:not([readonly])[focused]) [part~=icon]{color:#334bff}:host([disabled]) [part~=icon]{color:rgba(89,89,89,.5)}:host [part=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:12px;font-weight:400;height:24px;max-width:100%;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;text-overflow:ellipsis;border:1px solid #595959;width:100%;background:0 0;border:none;padding:0 8px}:host [part~=input][disabled]{color:rgba(64,64,64,.5);border:1px solid rgba(89,89,89,.5)}:host [part~=input][type=number]{padding-right:0}:host [part~=input][warning]{border:1px solid #cca000}:host [part~=input][warning][disabled]{color:rgba(64,64,64,.5);border:1px solid rgba(204,160,0,.5)}:host [part~=input][error],:host [part~=input][error][warning]{border:1px solid #b63243}:host [part~=input][error][disabled],:host [part~=input][error][warning][disabled]{color:rgba(64,64,64,.5);border:1px solid rgba(182,50,67,.5)}:host [part~=input] ::-ms-clear{display:none}:host [part~=button]{display:flex;justify-content:center;align-items:center;flex:none;height:100%;width:24px}: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}:host ::-moz-selection{color:#fff;background-color:#334bff}:host ::selection{color:#fff;background-color:#334bff}:host [part=icon]{min-width:1em;margin-left:2px;color:#595959}:host(:not([readonly]):not([error]):not([warning]):not([focused]):hover){border-color:#0d0d0d;color:#0d0d0d}:host(:not([readonly]):not([error]):not([warning]):not([focused]):hover) [part=icon]{color:#334bff}:host([warning]){border-color:#cca000}:host([error]),:host([error][warning]){border-color:#d94255}:host([warning]:hover:not([readonly]):not([focused])){color:#0d0d0d;border-color:#ffe999}:host([warning][disabled]),:host([warning][readonly]:not([focused])){border-color:rgba(255,233,153,.5)}:host([error]:hover:not([readonly]):not([focused])){color:#0d0d0d;border-color:#eeacb4}:host([error][disabled]),:host([error][readonly]:not([focused])),:host([error][warning][disabled]){border-color:rgba(238,172,180,.5)}:host([disabled]){color:rgba(64,64,64,.5);border-color:rgba(89,89,89,.5);background-color:rgba(255,255,255,.5)}:host([readonly]:not([focused])){border-color:rgba(89,89,89,.5);background-color:rgba(255,255,255,.5)}:host([readonly]:not([focused])) [part=icon]{color:rgba(64,64,64,.5)}:host(:not([readonly])[focused]),:host([focused]),:host([focused][error][warning]){border-color:#334bff;color:#0d0d0d}:host([focused]) [part=icon],:host([focused][error][warning]) [part=icon]{color:#334bff}:host([disabled]) [part=icon]{color:rgba(89,89,89,.5)}:host [part=list]{color:#404040;max-width:var(--list-max-width,300px);max-height:var(--list-max-height);border:1px solid #334bff;margin:2px 0;background-color:#f2f2f2}:host [part=list] ::slotted(ef-item:not(:first-child):not([type=divider])),:host [part=list] ef-item:not(:first-child):not([type=divider]){box-shadow:0 -1px 0 #d9d9d9}:host [part=list] ::slotted(:not(ef-item)){display:none}@supports not selector(::-webkit-scrollbar){:host{scrollbar-color:#999 #f2f2f2;scrollbar-width:thin}}::-webkit-scrollbar-corner{background:0 0}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-thumb{background:#999;border-radius:0;border:1px solid transparent}::-webkit-scrollbar-thumb:hover{background:#1429bd}::-webkit-scrollbar-thumb:active{background:#0f1e8a}::-webkit-scrollbar-track{background:#f2f2f2}::-webkit-scrollbar-thumb:horizontal{background-size:auto 6px;background-repeat:repeat-x;background-image:linear-gradient(to bottom,#999,#999);background-color:transparent;background-position:center}::-webkit-scrollbar-thumb:horizontal:hover{background-image:linear-gradient(to bottom,#1429bd,#1429bd);background-color:transparent;background-position:center}::-webkit-scrollbar-thumb:horizontal:active{background-image:linear-gradient(to bottom,#0f1e8a,#0f1e8a);background-color:transparent;background-position:center}::-webkit-scrollbar-thumb:vertical{background-size:6px auto;background-repeat:repeat-y;background-image:linear-gradient(to right,#999,#999);background-color:transparent;background-position:center}::-webkit-scrollbar-thumb:vertical:hover{background-image:linear-gradient(to right,#1429bd,#1429bd);background-color:transparent;background-position:center}::-webkit-scrollbar-thumb:vertical:active{background-image:linear-gradient(to right,#0f1e8a,#0f1e8a);background-color:transparent;background-position:center}::-webkit-scrollbar-track:horizontal{border-top:1px solid #fff;border-bottom:1px solid #fff}::-webkit-scrollbar-track:vertical{border-left:1px solid #fff;border-right:1px solid #fff}::-webkit-scrollbar-button{background:0 0/1px 2px no-repeat #f2f2f2;height:16px;width:16px;display:none;border:1px solid #fff}::-webkit-scrollbar-button:end:decrement,::-webkit-scrollbar-button:start:increment{display:none}::-webkit-scrollbar-button:hover{background-color:#1429bd;border:1px solid #1429bd}::-webkit-scrollbar-button:active{background-color:#0f1e8a;border:1px solid #fff}::-webkit-scrollbar-button:horizontal{background-size:2px 1px}::-webkit-scrollbar-button:vertical:start:decrement{border-bottom-color:#fff;background-image:linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959);background-position:10.55px 8px,9.55px 7px,8.55px 6px,7.55px 5px,6.55px 4px,5.55px 5px,4.55px 6px,3.55px 7px,2.55px 8px}::-webkit-scrollbar-button:vertical:start:decrement:hover{background-image:linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff);background-position:10.55px 8px,9.55px 7px,8.55px 6px,7.55px 5px,6.55px 4px,5.55px 5px,4.55px 6px,3.55px 7px,2.55px 8px;border-bottom-color:#1429bd}::-webkit-scrollbar-button:vertical:start:decrement:active{background-image:linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff);background-position:10.55px 8px,9.55px 7px,8.55px 6px,7.55px 5px,6.55px 4px,5.55px 5px,4.55px 6px,3.55px 7px,2.55px 8px;border-bottom-color:#fff}::-webkit-scrollbar-button:vertical:end:increment{border-top-color:#fff;background-image:linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959);background-position:10.55px 4px,9.55px 5px,8.55px 6px,7.55px 7px,6.55px 8px,5.55px 7px,4.55px 6px,3.55px 5px,2.55px 4px}::-webkit-scrollbar-button:vertical:end:increment:hover{background-image:linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff);background-position:10.55px 4px,9.55px 5px,8.55px 6px,7.55px 7px,6.55px 8px,5.55px 7px,4.55px 6px,3.55px 5px,2.55px 4px;border-top-color:#1429bd}::-webkit-scrollbar-button:vertical:end:increment:active{background-image:linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff);background-position:10.55px 4px,9.55px 5px,8.55px 6px,7.55px 7px,6.55px 8px,5.55px 7px,4.55px 6px,3.55px 5px,2.55px 4px;border-top-color:#fff}::-webkit-scrollbar-button:horizontal:start:decrement{border-right-color:#fff;background-image:linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959);background-position:7.5px 10.55px,6.5px 9.55px,5.5px 8.55px,4.5px 7.55px,3.5px 6.55px,4.5px 5.55px,5.5px 4.55px,6.5px 3.55px,7.5px 2.55px}::-webkit-scrollbar-button:horizontal:start:decrement:hover{background-image:linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff);background-position:7.5px 10.55px,6.5px 9.55px,5.5px 8.55px,4.5px 7.55px,3.5px 6.55px,4.5px 5.55px,5.5px 4.55px,6.5px 3.55px,7.5px 2.55px;border-right-color:#1429bd}::-webkit-scrollbar-button:horizontal:start:decrement:active{background-image:linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff);background-position:7.5px 10.55px,6.5px 9.55px,5.5px 8.55px,4.5px 7.55px,3.5px 6.55px,4.5px 5.55px,5.5px 4.55px,6.5px 3.55px,7.5px 2.55px;border-right-color:#fff}::-webkit-scrollbar-button:horizontal:end:increment{border-left-color:#fff;background-image:linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959);background-position:5px 10.55px,6px 9.55px,7px 8.55px,8px 7.55px,9px 6.55px,8px 5.55px,7px 4.55px,6px 3.55px,5px 2.55px}::-webkit-scrollbar-button:horizontal:end:increment:hover{background-image:linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff);background-position:5px 10.55px,6px 9.55px,7px 8.55px,8px 7.55px,9px 6.55px,8px 5.55px,7px 4.55px,6px 3.55px,5px 2.55px;border-left-color:#1429bd}::-webkit-scrollbar-button:horizontal:end:increment:active{background-image:linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff);background-position:5px 10.55px,6px 9.55px,7px 8.55px,8px 7.55px,9px 6.55px,8px 5.55px,7px 4.55px,6px 3.55px,5px 2.55px;border-left-color:#fff}:host [part~=input-wrapper]{border-left-color:inherit}:host [part~=button-toggle]{border-left:1px solid #595959;border-left-color:inherit}:host [part~=button-toggle]::before{content:\'\';display:block;position:absolute;top:-1px;right:-1px;bottom:-1px;width:24px;border:1px solid transparent}:host(:not([readonly])) [part~=button-clear]:hover{color:#334bff}:host(:not([readonly]):hover) [part~=button-toggle]{color:#334bff}:host(:not([readonly])[focused]) [part~=button-toggle]{border-left-color:#334bff;color:#334bff}:host(:not([readonly])) [part~=button-toggle]:hover{border-left-color:#334bff;color:#fff;background:#1429bd}:host(:not([readonly])) [part~=button-toggle]:hover::after{content:\'\';display:block;position:absolute;top:-1px;right:-1px;bottom:-1px;left:-1px;border:1px solid #334bff;pointer-events:none}:host(:not([readonly])) [part~=button-toggle]:active{background:#0f1e8a}:host(:not([readonly])) [part~=button]:active{color:#fff}:host(:not([readonly])) [part~=icon]{color:inherit!important}:host([disabled]) [part~=input]{border:none}:host([disabled]) [part~=button-toggle],:host([readonly]) [part~=button-toggle]{border-left-color:rgba(89,89,89,.5)}:host([readonly]) [part~=button-toggle]{color:rgba(64,64,64,.5);cursor:default}:host([focused][readonly]) [part~=button-toggle]{border-left-color:#334bff}:host [part=list] ::slotted(ef-list){display:block}:host [part=list] ef-list-item:not(:first-child):not([type=divider]){box-shadow:0 -1px 0 #d9d9d9}' }}));
+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:12px;font-weight:400;height:24px;width:152px;max-width:100%;margin:1px 0;outline:0;box-sizing:border-box;display:inline-flex;align-items:center;position:relative;vertical-align:middle;border-radius:0;background-color:#fff;text-overflow:ellipsis;border:1px solid #595959;scrollbar-face-color:#999;scrollbar-shadow-color:#999;scrollbar-highlight-color:#999;scrollbar-arrow-color:#999;scrollbar-track-color:#f2f2f2;scrollbar-3dlight-color:#f2f2f2;scrollbar-darkshadow-color:#f2f2f2;color:#404040;scrollbar-face-color:#999;scrollbar-shadow-color:#999;scrollbar-highlight-color:#999;scrollbar-arrow-color:#999;scrollbar-track-color:#f2f2f2;scrollbar-3dlight-color:#f2f2f2;scrollbar-darkshadow-color:#f2f2f2;padding:0}:host([disabled]){border:1px solid rgba(89,89,89,.5)}:host([type=number]){padding-right:0}:host([warning]){border:1px solid #cca000}:host([warning][disabled]){color:rgba(64,64,64,.5);border:1px solid rgba(204,160,0,.5)}:host([error]),:host([error][warning]){border:1px solid #b63243}:host([error][disabled]),:host([error][warning][disabled]){color:rgba(64,64,64,.5);border:1px solid rgba(182,50,67,.5)}:host ::-ms-clear{display:none}:host(:not([readonly])[focused]),:host([focused]){background-size:100% 2px,100% 1px!important;background-position:center bottom!important;border-color:#334bff}:host [part=input]{color:inherit;padding:0;margin:0;flex:1 1 auto;min-width:0;width:100%;height:100%;-webkit-appearance:none;-moz-appearance:none;appearance:none;text-overflow:ellipsis;touch-action:manipulation}:host [part=input]::-webkit-clear-button,:host [part=input]::-webkit-inner-spin-button,:host [part=input]::-webkit-search-cancel-button,:host [part=input]::-webkit-search-decoration{-webkit-appearance:none}:host [part=input]:invalid{box-shadow:none}:host([disabled]) [part=input]{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}:host [part~=button]{display:flex;justify-content:center;align-items:center;cursor:pointer;flex:none}:host([readonly]){cursor:default}:host [part=placeholder]{opacity:.5;opacity:.7}:host [part=label],:host [part=placeholder]{margin-right:3px}:host [part~=icon]{color:#404040;opacity:.7}:host(:not([readonly]):hover) [part~=icon],:host(:not([readonly])[focused]) [part~=icon]{opacity:1}:host(:not([readonly])[focused]) [part~=icon]{color:#334bff}:host([disabled]) [part~=icon]{color:rgba(89,89,89,.5)}:host [part=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:12px;font-weight:400;height:24px;max-width:100%;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;text-overflow:ellipsis;border:1px solid #595959;width:100%;background:0 0;border:none;padding:0 8px}:host [part~=input][disabled]{color:rgba(64,64,64,.5);border:1px solid rgba(89,89,89,.5)}:host [part~=input][type=number]{padding-right:0}:host [part~=input][warning]{border:1px solid #cca000}:host [part~=input][warning][disabled]{color:rgba(64,64,64,.5);border:1px solid rgba(204,160,0,.5)}:host [part~=input][error],:host [part~=input][error][warning]{border:1px solid #b63243}:host [part~=input][error][disabled],:host [part~=input][error][warning][disabled]{color:rgba(64,64,64,.5);border:1px solid rgba(182,50,67,.5)}:host [part~=input] ::-ms-clear{display:none}:host [part~=button]{display:flex;justify-content:center;align-items:center;flex:none;height:100%;width:24px}: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}:host ::-moz-selection{color:#fff;background-color:#334bff}:host ::selection{color:#fff;background-color:#334bff}:host [part=icon]{min-width:1em;margin-left:2px;color:#595959}:host(:not([readonly]):not([error]):not([warning]):not([focused]):hover){border-color:#0d0d0d;color:#0d0d0d}:host(:not([readonly]):not([error]):not([warning]):not([focused]):hover) [part=icon]{color:#334bff}:host [part~=button-clear]:active,:host [part~=button-clear]:hover{color:#334bff}:host([warning]){border-color:#cca000}:host([error]),:host([error][warning]){border-color:#d94255}:host([warning]:hover:not([readonly]):not([focused])){color:#0d0d0d;border-color:#ffe999}:host([warning][disabled]),:host([warning][readonly]:not([focused])){border-color:rgba(255,233,153,.5)}:host([error]:hover:not([readonly]):not([focused])){color:#0d0d0d;border-color:#eeacb4}:host([error][disabled]),:host([error][readonly]:not([focused])),:host([error][warning][disabled]){border-color:rgba(238,172,180,.5)}:host([disabled]){color:rgba(64,64,64,.5);border-color:rgba(89,89,89,.5);background-color:rgba(255,255,255,.5)}:host([readonly]:not([focused])){border-color:rgba(89,89,89,.5);background-color:rgba(255,255,255,.5)}:host([readonly]:not([focused])) [part=icon]{color:rgba(64,64,64,.5)}:host(:not([readonly])[focused]),:host([focused]),:host([focused][error][warning]){border-color:#334bff;color:#0d0d0d}:host([focused]) [part=icon],:host([focused][error][warning]) [part=icon]{color:#334bff}:host([disabled]) [part=icon]{color:rgba(89,89,89,.5)}:host [part=list]{color:#404040;max-width:var(--list-max-width,300px);max-height:var(--list-max-height);border:1px solid #334bff;margin:2px 0;background-color:#f2f2f2}:host [part=list] ::slotted(ef-item:not(:first-child):not([type=divider])),:host [part=list] ef-item:not(:first-child):not([type=divider]){box-shadow:0 -1px 0 #d9d9d9}:host [part=list] ::slotted(:not(ef-item)){display:none}@supports not selector(::-webkit-scrollbar){:host{scrollbar-color:#999 #f2f2f2;scrollbar-width:thin}}::-webkit-scrollbar-corner{background:0 0}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-thumb{background:#999;border-radius:0;border:1px solid transparent}::-webkit-scrollbar-thumb:hover{background:#1429bd}::-webkit-scrollbar-thumb:active{background:#0f1e8a}::-webkit-scrollbar-track{background:#f2f2f2}::-webkit-scrollbar-thumb:horizontal{background-size:auto 6px;background-repeat:repeat-x;background-image:linear-gradient(to bottom,#999,#999);background-color:transparent;background-position:center}::-webkit-scrollbar-thumb:horizontal:hover{background-image:linear-gradient(to bottom,#1429bd,#1429bd);background-color:transparent;background-position:center}::-webkit-scrollbar-thumb:horizontal:active{background-image:linear-gradient(to bottom,#0f1e8a,#0f1e8a);background-color:transparent;background-position:center}::-webkit-scrollbar-thumb:vertical{background-size:6px auto;background-repeat:repeat-y;background-image:linear-gradient(to right,#999,#999);background-color:transparent;background-position:center}::-webkit-scrollbar-thumb:vertical:hover{background-image:linear-gradient(to right,#1429bd,#1429bd);background-color:transparent;background-position:center}::-webkit-scrollbar-thumb:vertical:active{background-image:linear-gradient(to right,#0f1e8a,#0f1e8a);background-color:transparent;background-position:center}::-webkit-scrollbar-track:horizontal{border-top:1px solid #fff;border-bottom:1px solid #fff}::-webkit-scrollbar-track:vertical{border-left:1px solid #fff;border-right:1px solid #fff}::-webkit-scrollbar-button{background:0 0/1px 2px no-repeat #f2f2f2;height:16px;width:16px;display:none;border:1px solid #fff}::-webkit-scrollbar-button:end:decrement,::-webkit-scrollbar-button:start:increment{display:none}::-webkit-scrollbar-button:hover{background-color:#1429bd;border:1px solid #1429bd}::-webkit-scrollbar-button:active{background-color:#0f1e8a;border:1px solid #fff}::-webkit-scrollbar-button:horizontal{background-size:2px 1px}::-webkit-scrollbar-button:vertical:start:decrement{border-bottom-color:#fff;background-image:linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959);background-position:10.55px 8px,9.55px 7px,8.55px 6px,7.55px 5px,6.55px 4px,5.55px 5px,4.55px 6px,3.55px 7px,2.55px 8px}::-webkit-scrollbar-button:vertical:start:decrement:hover{background-image:linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff);background-position:10.55px 8px,9.55px 7px,8.55px 6px,7.55px 5px,6.55px 4px,5.55px 5px,4.55px 6px,3.55px 7px,2.55px 8px;border-bottom-color:#1429bd}::-webkit-scrollbar-button:vertical:start:decrement:active{background-image:linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff);background-position:10.55px 8px,9.55px 7px,8.55px 6px,7.55px 5px,6.55px 4px,5.55px 5px,4.55px 6px,3.55px 7px,2.55px 8px;border-bottom-color:#fff}::-webkit-scrollbar-button:vertical:end:increment{border-top-color:#fff;background-image:linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959);background-position:10.55px 4px,9.55px 5px,8.55px 6px,7.55px 7px,6.55px 8px,5.55px 7px,4.55px 6px,3.55px 5px,2.55px 4px}::-webkit-scrollbar-button:vertical:end:increment:hover{background-image:linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff);background-position:10.55px 4px,9.55px 5px,8.55px 6px,7.55px 7px,6.55px 8px,5.55px 7px,4.55px 6px,3.55px 5px,2.55px 4px;border-top-color:#1429bd}::-webkit-scrollbar-button:vertical:end:increment:active{background-image:linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff);background-position:10.55px 4px,9.55px 5px,8.55px 6px,7.55px 7px,6.55px 8px,5.55px 7px,4.55px 6px,3.55px 5px,2.55px 4px;border-top-color:#fff}::-webkit-scrollbar-button:horizontal:start:decrement{border-right-color:#fff;background-image:linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959);background-position:7.5px 10.55px,6.5px 9.55px,5.5px 8.55px,4.5px 7.55px,3.5px 6.55px,4.5px 5.55px,5.5px 4.55px,6.5px 3.55px,7.5px 2.55px}::-webkit-scrollbar-button:horizontal:start:decrement:hover{background-image:linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff);background-position:7.5px 10.55px,6.5px 9.55px,5.5px 8.55px,4.5px 7.55px,3.5px 6.55px,4.5px 5.55px,5.5px 4.55px,6.5px 3.55px,7.5px 2.55px;border-right-color:#1429bd}::-webkit-scrollbar-button:horizontal:start:decrement:active{background-image:linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff);background-position:7.5px 10.55px,6.5px 9.55px,5.5px 8.55px,4.5px 7.55px,3.5px 6.55px,4.5px 5.55px,5.5px 4.55px,6.5px 3.55px,7.5px 2.55px;border-right-color:#fff}::-webkit-scrollbar-button:horizontal:end:increment{border-left-color:#fff;background-image:linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959);background-position:5px 10.55px,6px 9.55px,7px 8.55px,8px 7.55px,9px 6.55px,8px 5.55px,7px 4.55px,6px 3.55px,5px 2.55px}::-webkit-scrollbar-button:horizontal:end:increment:hover{background-image:linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff);background-position:5px 10.55px,6px 9.55px,7px 8.55px,8px 7.55px,9px 6.55px,8px 5.55px,7px 4.55px,6px 3.55px,5px 2.55px;border-left-color:#1429bd}::-webkit-scrollbar-button:horizontal:end:increment:active{background-image:linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff);background-position:5px 10.55px,6px 9.55px,7px 8.55px,8px 7.55px,9px 6.55px,8px 5.55px,7px 4.55px,6px 3.55px,5px 2.55px;border-left-color:#fff}:host [part~=input-wrapper]{border-left-color:inherit}:host [part~=button-toggle]{border-left:1px solid #595959;border-left-color:inherit}:host [part~=button-toggle]::before{content:\'\';display:block;position:absolute;top:-1px;right:-1px;bottom:-1px;width:24px;border:1px solid transparent}:host(:not([readonly]):hover) [part~=button-toggle]{color:#334bff}:host(:not([readonly])[focused]) [part~=button-toggle]{border-left-color:#334bff;color:#334bff}:host(:not([readonly])) [part~=button-toggle]:hover{border-left-color:#334bff;color:#fff;background:#1429bd}:host(:not([readonly])) [part~=button-toggle]:hover::after{content:\'\';display:block;position:absolute;top:-1px;right:-1px;bottom:-1px;left:-1px;border:1px solid #334bff;pointer-events:none}:host(:not([readonly])) [part~=button-toggle]:active{background:#0f1e8a}:host(:not([readonly])) [part~=button]:active{color:#fff}:host(:not([readonly])) [part~=icon]{color:inherit!important}:host(:not([readonly])) [part~=button-clear]:active,:host(:not([readonly])) [part~=button-clear]:hover{color:#334bff}:host([disabled]) [part~=input]{border:none}:host([disabled]) [part~=button-toggle],:host([readonly]) [part~=button-toggle]{border-left-color:rgba(89,89,89,.5)}:host([readonly]) [part~=button-toggle]{color:rgba(64,64,64,.5);cursor:default}:host([focused][readonly]) [part~=button-toggle]{border-left-color:#334bff}:host [part=list] ::slotted(ef-list){display:block}:host [part=list] ef-list-item:not(:first-child):not([type=divider]){box-shadow:0 -1px 0 #d9d9d9}' }}));

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

@@ -140,6 +140,12 @@
           "description": "Set placeholder text default depends on format",
           "type": "string",
           "default": "\"dd-MMM-yyyy\""
+        },
+        {
+          "name": "clears",
+          "description": "Show clears button",
+          "type": "boolean",
+          "default": "false"
         }
       ],
       "properties": [
@@ -312,6 +318,13 @@
           "description": "Set placeholder text default depends on format",
           "type": "string",
           "default": "\"dd-MMM-yyyy\""
+        },
+        {
+          "name": "clears",
+          "attribute": "clears",
+          "description": "Show clears button",
+          "type": "boolean",
+          "default": "false"
         }
       ],
       "events": [

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

@@ -7,6 +7,7 @@ Control to pick date and time
 | Property               | Attribute                | Type                             | Default       | Description                                      |
 |------------------------|--------------------------|----------------------------------|---------------|--------------------------------------------------|
 | `amPm`                 | `am-pm`                  | `boolean`                        | false         | Toggles 12hr time display                        |
+| `clears`               | `clears`                 | `boolean`                        | false         | Show clears button                               |
 | `disabled`             | `disabled`               | `boolean`                        | false         | Set disabled state                               |
 | `duplex`               | `duplex`                 | `"" \| "consecutive" \| "split"` | null          | Display two calendar pickers.                    |
 | `error`                | `error`                  | `boolean`                        | false         | Set error state                                  |