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

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

@@ -2,4 +2,4 @@ import '@refinitiv-ui/elements/panel/themes/halo/dark';
 import '@refinitiv-ui/elements/header/themes/halo/dark';
 import '@refinitiv-ui/elements/icon/themes/halo/dark';
 
-dispatchEvent(new CustomEvent('ef.customStyles.define', { detail: { name: 'ef-collapse', styles: ':host [part=toggle]{transition:.1s;opacity:.5;margin-right:.25em;margin-left:8px;flex-shrink:0;pointer-events:none;opacity:1}:host([expanded]) [part=toggle]{transform:rotate(90deg)}:host [part~=header]{padding:0}:host [part~=header][focused=visible]{background-color:#1429bd}:host [part=header-toggle]{touch-action:manipulation;cursor:pointer;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;outline:0}@keyframes expand{from{height:0}to{height:var(--target-height)}}@keyframes collapse{from{height:var(--target-height)}to{height:0}}:host [part=content]{animation-duration:.1s;animation-timing-function:ease;text-transform:none}:host(:not([expanded])) [part=content]{height:0;animation-name:collapse}:host(:not([expanded])) [part=toggle]{transform:rotate(0)}:host([expanded]) [part=content]{animation-name:expand}:host [part=content] ef-panel{overflow:auto}:host [part=content] ef-panel:not([spacing]){padding:var(--panel-padding)}:host{text-transform:uppercase}:host [part=header]{text-transform:inherit}:host [part=header]:hover,:host [part~=header][focused=visible],:host([expanded]) [part=header]{color:#fff;cursor:pointer;background-color:#404040}:host [part=header]:hover[level="1"],:host [part~=header][focused=visible][level="1"],:host([expanded]) [part=header][level="1"]{background-color:#5a5a5a}:host [part=header]:hover[level="2"],:host [part~=header][focused=visible][level="2"],:host([expanded]) [part=header][level="2"]{background-color:#4d4d4d}:host [part=header]:hover[level="4"],:host [part~=header][focused=visible][level="4"],:host([expanded]) [part=header][level="4"]{background-color:#343434}' }}));
+dispatchEvent(new CustomEvent('ef.customStyles.define', { detail: { name: 'ef-collapse', styles: ':host [part=toggle]{transition:.1s;opacity:.5;margin-right:.25em;margin-left:8px;flex-shrink:0;pointer-events:none;opacity:1}:host([expanded]) [part=toggle]{transform:rotate(90deg)}:host [part~=header]{touch-action:manipulation;cursor:pointer;padding:0}:host [part~=header][focused=visible]{background-color:#1429bd}:host [part=header-label]{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;outline:0}@keyframes expand{from{height:0}to{height:var(--target-height)}}@keyframes collapse{from{height:var(--target-height)}to{height:0}}:host [part=content]{animation-duration:.1s;animation-timing-function:ease;text-transform:none}:host(:not([expanded])) [part=content]{height:0;animation-name:collapse}:host(:not([expanded])) [part=toggle]{transform:rotate(0)}:host([expanded]) [part=content]{animation-name:expand}:host [part=content] ef-panel{overflow:auto}:host [part=content] ef-panel:not([spacing]){padding:var(--panel-padding)}:host{text-transform:uppercase}:host [part=header]{text-transform:inherit}:host [part=header]:hover,:host [part~=header][focused=visible],:host([expanded]) [part=header]{color:#fff;background-color:#404040}:host [part=header]:hover[level="1"],:host [part~=header][focused=visible][level="1"],:host([expanded]) [part=header][level="1"]{background-color:#5a5a5a}:host [part=header]:hover[level="2"],:host [part~=header][focused=visible][level="2"],:host([expanded]) [part=header][level="2"]{background-color:#4d4d4d}:host [part=header]:hover[level="4"],:host [part~=header][focused=visible][level="4"],:host([expanded]) [part=header][level="4"]{background-color:#343434}' }}));

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

@@ -2,4 +2,4 @@ import '@refinitiv-ui/elements/panel/themes/halo/light';
 import '@refinitiv-ui/elements/header/themes/halo/light';
 import '@refinitiv-ui/elements/icon/themes/halo/light';
 
-dispatchEvent(new CustomEvent('ef.customStyles.define', { detail: { name: 'ef-collapse', styles: ':host [part=toggle]{transition:.1s;opacity:.5;margin-right:.25em;margin-left:8px;flex-shrink:0;pointer-events:none;opacity:1}:host([expanded]) [part=toggle]{transform:rotate(90deg)}:host [part~=header]{padding:0}:host [part~=header][focused=visible]{background-color:#1429bd}:host [part=header-toggle]{touch-action:manipulation;cursor:pointer;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;outline:0}@keyframes expand{from{height:0}to{height:var(--target-height)}}@keyframes collapse{from{height:var(--target-height)}to{height:0}}:host [part=content]{animation-duration:.1s;animation-timing-function:ease;text-transform:none}:host(:not([expanded])) [part=content]{height:0;animation-name:collapse}:host(:not([expanded])) [part=toggle]{transform:rotate(0)}:host([expanded]) [part=content]{animation-name:expand}:host [part=content] ef-panel{overflow:auto}:host [part=content] ef-panel:not([spacing]){padding:var(--panel-padding)}:host{text-transform:uppercase}:host [part=header]{text-transform:inherit}:host [part=header]:hover,:host [part~=header][focused=visible],:host([expanded]) [part=header]{color:#0d0d0d;cursor:pointer;background-color:#eaeaea}:host [part=header]:hover[level="1"],:host [part~=header][focused=visible][level="1"],:host([expanded]) [part=header][level="1"]{background-color:#d1d1d1}:host [part=header]:hover[level="2"],:host [part~=header][focused=visible][level="2"],:host([expanded]) [part=header][level="2"]{background-color:#dedede}:host [part=header]:hover[level="4"],:host [part~=header][focused=visible][level="4"],:host([expanded]) [part=header][level="4"]{background-color:#f2f2f2}' }}));
+dispatchEvent(new CustomEvent('ef.customStyles.define', { detail: { name: 'ef-collapse', styles: ':host [part=toggle]{transition:.1s;opacity:.5;margin-right:.25em;margin-left:8px;flex-shrink:0;pointer-events:none;opacity:1}:host([expanded]) [part=toggle]{transform:rotate(90deg)}:host [part~=header]{touch-action:manipulation;cursor:pointer;padding:0}:host [part~=header][focused=visible]{background-color:#1429bd}:host [part=header-label]{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;outline:0}@keyframes expand{from{height:0}to{height:var(--target-height)}}@keyframes collapse{from{height:var(--target-height)}to{height:0}}:host [part=content]{animation-duration:.1s;animation-timing-function:ease;text-transform:none}:host(:not([expanded])) [part=content]{height:0;animation-name:collapse}:host(:not([expanded])) [part=toggle]{transform:rotate(0)}:host([expanded]) [part=content]{animation-name:expand}:host [part=content] ef-panel{overflow:auto}:host [part=content] ef-panel:not([spacing]){padding:var(--panel-padding)}:host{text-transform:uppercase}:host [part=header]{text-transform:inherit}:host [part=header]:hover,:host [part~=header][focused=visible],:host([expanded]) [part=header]{color:#0d0d0d;background-color:#eaeaea}:host [part=header]:hover[level="1"],:host [part~=header][focused=visible][level="1"],:host([expanded]) [part=header][level="1"]{background-color:#d1d1d1}:host [part=header]:hover[level="2"],:host [part~=header][focused=visible][level="2"],:host([expanded]) [part=header][level="2"]{background-color:#dedede}:host [part=header]:hover[level="4"],:host [part~=header][focused=visible][level="4"],:host([expanded]) [part=header][level="4"]{background-color:#f2f2f2}' }}));

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

@@ -2,4 +2,4 @@ import '@refinitiv-ui/elements/panel/themes/solar/charcoal';
 import '@refinitiv-ui/elements/header/themes/solar/charcoal';
 import '@refinitiv-ui/elements/icon/themes/solar/charcoal';
 
-dispatchEvent(new CustomEvent('ef.customStyles.define', { detail: { name: 'ef-collapse', styles: ':host [part=toggle]{transition:.2s;opacity:.5;margin-right:.25em;margin-left:10px;flex-shrink:0;pointer-events:none}:host([expanded]) [part=toggle]{transform:rotate(90deg)}:host [part~=header]{padding:0}:host [part~=header][focused=visible]{background-color:#4d4d55}:host [part=header-toggle]{touch-action:manipulation;cursor:pointer;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;outline:0}@keyframes expand{from{height:0}to{height:var(--target-height)}}@keyframes collapse{from{height:var(--target-height)}to{height:0}}:host [part=content]{animation-duration:.2s;animation-timing-function:ease}:host(:not([expanded])) [part=content]{height:0;animation-name:collapse}:host(:not([expanded])) [part=toggle]{transform:rotate(0)}:host([expanded]) [part=content]{animation-name:expand}:host [part=content] ef-panel{overflow:auto}:host [part=content] ef-panel:not([spacing]){padding:var(--panel-padding)}' }}));
+dispatchEvent(new CustomEvent('ef.customStyles.define', { detail: { name: 'ef-collapse', styles: ':host [part=toggle]{transition:.2s;opacity:.5;margin-right:.25em;margin-left:10px;flex-shrink:0;pointer-events:none}:host([expanded]) [part=toggle]{transform:rotate(90deg)}:host [part~=header]{touch-action:manipulation;cursor:pointer;padding:0}:host [part~=header][focused=visible]{background-color:#4d4d55}:host [part=header-label]{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;outline:0}@keyframes expand{from{height:0}to{height:var(--target-height)}}@keyframes collapse{from{height:var(--target-height)}to{height:0}}:host [part=content]{animation-duration:.2s;animation-timing-function:ease}:host(:not([expanded])) [part=content]{height:0;animation-name:collapse}:host(:not([expanded])) [part=toggle]{transform:rotate(0)}:host([expanded]) [part=content]{animation-name:expand}:host [part=content] ef-panel{overflow:auto}:host [part=content] ef-panel:not([spacing]){padding:var(--panel-padding)}' }}));

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

@@ -2,4 +2,4 @@ import '@refinitiv-ui/elements/panel/themes/solar/pearl';
 import '@refinitiv-ui/elements/header/themes/solar/pearl';
 import '@refinitiv-ui/elements/icon/themes/solar/pearl';
 
-dispatchEvent(new CustomEvent('ef.customStyles.define', { detail: { name: 'ef-collapse', styles: ':host [part=toggle]{transition:.2s;opacity:.5;margin-right:.25em;margin-left:10px;flex-shrink:0;pointer-events:none}:host([expanded]) [part=toggle]{transform:rotate(90deg)}:host [part~=header]{padding:0}:host [part~=header][focused=visible]{background-color:#fff}:host [part=header-toggle]{touch-action:manipulation;cursor:pointer;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;outline:0}@keyframes expand{from{height:0}to{height:var(--target-height)}}@keyframes collapse{from{height:var(--target-height)}to{height:0}}:host [part=content]{animation-duration:.2s;animation-timing-function:ease}:host(:not([expanded])) [part=content]{height:0;animation-name:collapse}:host(:not([expanded])) [part=toggle]{transform:rotate(0)}:host([expanded]) [part=content]{animation-name:expand}:host [part=content] ef-panel{overflow:auto}:host [part=content] ef-panel:not([spacing]){padding:var(--panel-padding)}' }}));
+dispatchEvent(new CustomEvent('ef.customStyles.define', { detail: { name: 'ef-collapse', styles: ':host [part=toggle]{transition:.2s;opacity:.5;margin-right:.25em;margin-left:10px;flex-shrink:0;pointer-events:none}:host([expanded]) [part=toggle]{transform:rotate(90deg)}:host [part~=header]{touch-action:manipulation;cursor:pointer;padding:0}:host [part~=header][focused=visible]{background-color:#fff}:host [part=header-label]{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;outline:0}@keyframes expand{from{height:0}to{height:var(--target-height)}}@keyframes collapse{from{height:var(--target-height)}to{height:0}}:host [part=content]{animation-duration:.2s;animation-timing-function:ease}:host(:not([expanded])) [part=content]{height:0;animation-name:collapse}:host(:not([expanded])) [part=toggle]{transform:rotate(0)}:host([expanded]) [part=content]{animation-name:expand}:host [part=content] ef-panel{overflow:auto}:host [part=content] ef-panel:not([spacing]){padding:var(--panel-padding)}' }}));

package/lib/color-dialog/custom-elements.json

@@ -194,11 +194,11 @@
       "events": [
         {
           "name": "value-changed",
-          "description": "Fired when the `value` property changes."
+          "description": "Fired when the user commits a value change. The event is not triggered if the value is changed programmatically."
         },
         {
           "name": "opened-changed",
-          "description": "Fired when the `opened` property changes."
+          "description": "Fired when the user changes open state of the dialog e.g. when the user presses escape key or uses close button to close the dialog. The event is not triggered if `opened` property is changed programmatically."
         }
       ]
     }

package/lib/color-dialog/custom-elements.md

@@ -33,7 +33,7 @@ for selecting a predefined range of colours.
 
 ## Events
 
-| Event            | Description                               |
-|------------------|-------------------------------------------|
-| `opened-changed` | Fired when the `opened` property changes. |
-| `value-changed`  | Fired when the `value` property changes.  |
+| Event            | Description                                      |
+|------------------|--------------------------------------------------|
+| `opened-changed` | Fired when the user changes open state of the dialog e.g. when the user presses escape key or uses close button to close the dialog. The event is not triggered if `opened` property is changed programmatically. |
+| `value-changed`  | Fired when the user commits a value change. The event is not triggered if the value is changed programmatically. |

package/lib/color-dialog/helpers/value-model.js

@@ -17,10 +17,7 @@ class ValueModel {
         this._hex = value.slice(1);
     }
     getHexValue() {
-        if (this.red === '' && this.green === '' && this.blue === '') {
-            return '';
-        }
-        else if (!this.isValidRGB()) {
+        if (!this.isValidRGB() || this.red === '' && this.green === '' && this.blue === '') {
             return '';
         }
         const hex = rgb(Number(this.red), Number(this.green), Number(this.blue)).formatHex();
@@ -46,7 +43,9 @@ class ValueModel {
      * @returns true if different
      */
     hasChanged() {
-        return rgb(this.initialValue).formatHex() !== rgb(this.value).formatHex();
+        // Avoid the same hex color format of empty string and black color
+        return ((this.initialValue !== this.value) && ((!!this.initialValue && !!this.value) === false))
+            || rgb(this.initialValue).formatHex() !== rgb(this.value).formatHex();
     }
     /**
      * Check if RGB and Hex values are valid

package/lib/color-dialog/index.d.ts

@@ -12,8 +12,8 @@ import '@refinitiv-ui/phrasebook/locale/en/color-dialog.js';
  * Displays a colour picker dialog,
  * for selecting a predefined range of colours.
  *
- * @fires value-changed - Fired when the `value` property changes.
- * @fires opened-changed - Fired when the `opened` property changes.
+ * @fires value-changed - Fired when the user commits a value change. The event is not triggered if the value is changed programmatically.
+ * @fires opened-changed - Fired when the user changes open state of the dialog e.g. when the user presses escape key or uses close button to close the dialog. The event is not triggered if `opened` property is changed programmatically.
  *
  * @attr {string | null} header - Set Header/Title of the color dialog
  * @prop {string | null} [header=null] - Set Header/Title of the color dialog
@@ -208,13 +208,13 @@ export declare class ColorDialog extends Dialog {
      * to render the updated internal template.
      * @return {TemplateResult}  Render template
      */
-    protected get contentRegion(): TemplateResult;
+    protected get contentTemplate(): TemplateResult;
     /**
      * A `TemplateResult` that will be used
      * to render the updated internal template.
      * @return {TemplateResult}  Render template
      */
-    protected get footerRegion(): TemplateResult;
+    protected get footerTemplate(): TemplateResult;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/lib/color-dialog/index.js

@@ -19,8 +19,8 @@ import '@refinitiv-ui/phrasebook/locale/en/color-dialog.js';
  * Displays a colour picker dialog,
  * for selecting a predefined range of colours.
  *
- * @fires value-changed - Fired when the `value` property changes.
- * @fires opened-changed - Fired when the `opened` property changes.
+ * @fires value-changed - Fired when the user commits a value change. The event is not triggered if the value is changed programmatically.
+ * @fires opened-changed - Fired when the user changes open state of the dialog e.g. when the user presses escape key or uses close button to close the dialog. The event is not triggered if `opened` property is changed programmatically.
  *
  * @attr {string | null} header - Set Header/Title of the color dialog
  * @prop {string | null} [header=null] - Set Header/Title of the color dialog
@@ -323,7 +323,7 @@ let ColorDialog = class ColorDialog extends Dialog {
      * to render the updated internal template.
      * @return {TemplateResult}  Render template
      */
-    get contentRegion() {
+    get contentTemplate() {
         if (!this.lazyRendered) {
             return html ``;
         }
@@ -407,7 +407,7 @@ let ColorDialog = class ColorDialog extends Dialog {
      * to render the updated internal template.
      * @return {TemplateResult}  Render template
      */
-    get footerRegion() {
+    get footerTemplate() {
         if (!this.lazyRendered) {
             return html ``;
         }

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

@@ -63,7 +63,7 @@
       "events": [
         {
           "name": "value-changed",
-          "description": "Dispatched when value changes"
+          "description": "Fired when the user commits a value change. The event is not triggered if `value` property is changed programmatically."
         }
       ]
     }

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

@@ -14,6 +14,6 @@ Color picker control
 
 ## Events
 
-| Event           | Description                   |
-|-----------------|-------------------------------|
-| `value-changed` | Dispatched when value changes |
+| Event           | Description                                      |
+|-----------------|--------------------------------------------------|
+| `value-changed` | Fired when the user commits a value change. The event is not triggered if `value` property is changed programmatically. |

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

@@ -6,7 +6,7 @@ import { TranslatePromise } from '@refinitiv-ui/translate';
 /**
  *
  * Color picker control
- * @fires value-changed - Dispatched when value changes
+ * @fires value-changed - Fired when the user commits a value change. The event is not triggered if `value` property is changed programmatically.
  *
  * @attr {boolean} readonly - Set readonly state
  * @prop {boolean} [readonly=false] - Set readonly state

package/lib/color-picker/index.js

@@ -1,9 +1,8 @@
 import { __decorate } from "tslib";
-import { ControlElement, html, css, WarningNotice } from '@refinitiv-ui/core';
+import { ControlElement, html, css, WarningNotice, nothing } from '@refinitiv-ui/core';
 import { customElement } from '@refinitiv-ui/core/decorators/custom-element.js';
 import { property } from '@refinitiv-ui/core/decorators/property.js';
 import { styleMap } from '@refinitiv-ui/core/directives/style-map.js';
-import { ifDefined } from '@refinitiv-ui/core/directives/if-defined.js';
 import { VERSION } from '../version.js';
 import { isHex, readableColor } from '@refinitiv-ui/utils/color.js';
 import { ref, createRef } from '@refinitiv-ui/core/directives/ref.js';
@@ -15,7 +14,7 @@ const DIALOG_POSITION = ['right-start', 'right-end', 'right-middle', 'left-start
 /**
  *
  * Color picker control
- * @fires value-changed - Dispatched when value changes
+ * @fires value-changed - Fired when the user commits a value change. The event is not triggered if `value` property is changed programmatically.
  *
  * @attr {boolean} readonly - Set readonly state
  * @prop {boolean} [readonly=false] - Set readonly state
@@ -160,7 +159,6 @@ let ColorPicker = class ColorPicker extends ControlElement {
         switch (event.key) {
             case 'Enter':
             case ' ':
-            case 'Spacebar':
                 this.setOpened(true);
                 break;
             default:
@@ -247,7 +245,7 @@ let ColorPicker = class ColorPicker extends ControlElement {
             return html `<ef-color-dialog
       offset="4"
       ${ref(this.dialogRef)}
-      .lang=${ifDefined(this.lang || undefined)}
+      .lang=${this.lang || nothing}
       .value=${this.value}
       .focusBoundary=${this}
       .positionTarget=${this}

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

@@ -200,18 +200,15 @@
       "events": [
         {
           "name": "value-changed",
-          "description": "Dispatched when value changes"
+          "description": "Fired when the user commits a value change. The event is not triggered if `value` property is changed programmatically."
         },
         {
           "name": "query-changed",
-          "description": "Dispatched when query changes"
+          "description": "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."
         },
         {
           "name": "opened-changed",
-          "description": "Dispatched when opened state changes"
-        },
-        {
-          "name": "animationiteration"
+          "description": "Fired when the user opens or closes control's popup. The event is not triggered if `opened` property is changed programmatically."
         }
       ]
     }

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

@@ -27,9 +27,8 @@ Combines a popup with a filterable selection list
 
 ## Events
 
-| Event                | Description                          |
-|----------------------|--------------------------------------|
-| `animationiteration` |                                      |
-| `opened-changed`     | Dispatched when opened state changes |
-| `query-changed`      | Dispatched when query changes        |
-| `value-changed`      | Dispatched when value changes        |
+| Event            | Description                                      |
+|------------------|--------------------------------------------------|
+| `opened-changed` | Fired when the user opens or closes control's popup. The event is not triggered if `opened` property is changed programmatically. |
+| `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. |
+| `value-changed`  | Fired when the user commits a value change. The event is not triggered if `value` property is changed programmatically. |

package/lib/combo-box/helpers/types.d.ts

@@ -7,5 +7,5 @@ import type { ItemData } from '../../item';
  * @param item Item to filter
  * @return Does item match filter
  */
-export declare type ComboBoxFilter<T extends DataItem = ItemData> = (item: T) => boolean;
-export declare type ComboBoxData<T extends DataItem = ItemData> = T[] | Promise<T[]>;
+export type ComboBoxFilter<T extends DataItem = ItemData> = (item: T) => boolean;
+export type ComboBoxData<T extends DataItem = ItemData> = T[] | Promise<T[]>;

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

@@ -28,9 +28,9 @@ export { ComboBoxRenderer };
  * @attr {string} name - Set name of the element
  * @prop {string} [name=''] - Set name of the element
  *
- * @fires value-changed - Dispatched when value changes
- * @fires query-changed - Dispatched when query changes
- * @fires opened-changed - Dispatched when opened state changes
+ * @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.
  */
 export declare class ComboBox<T extends DataItem = ItemData> extends FormFieldElement {
     /**
@@ -371,15 +371,6 @@ export declare class ComboBox<T extends DataItem = ItemData> extends FormFieldEl
      * @returns can highlight
      */
     protected canHighlightItem(item: T, composer: CollectionComposer<T>): boolean;
-    /**
-     * https://github.com/juggle/resize-observer/issues/42
-     *
-     * This event ensures that ResizeObserver picks up resize events
-     * when popup is deeply nested inside shadow root.
-     * TODO: remove this workaround once ResizeObserver handles shadow root scenario
-     * @returns {void}
-    */
-    protected forcePopupLayout(): void;
     /**
      * Shift focus back to input.
      * This method is required to prevent popup from focusing

package/lib/combo-box/index.js

@@ -1,11 +1,10 @@
 import { __decorate } from "tslib";
-import { FormFieldElement, css, html, WarningNotice, FocusedPropertyKey } from '@refinitiv-ui/core';
+import { FormFieldElement, css, html, WarningNotice, FocusedPropertyKey, triggerResize, nothing } from '@refinitiv-ui/core';
 import { customElement } from '@refinitiv-ui/core/decorators/custom-element.js';
 import { property } from '@refinitiv-ui/core/decorators/property.js';
 import { query } from '@refinitiv-ui/core/decorators/query.js';
 import { eventOptions } from '@refinitiv-ui/core/decorators/event-options.js';
 import { styleMap } from '@refinitiv-ui/core/directives/style-map.js';
-import { ifDefined } from '@refinitiv-ui/core/directives/if-defined.js';
 import { VERSION } from '../version.js';
 import { CollectionComposer } from '@refinitiv-ui/utils/collection.js';
 import { AnimationTaskRunner, TimeoutTaskRunner } from '@refinitiv-ui/utils/async.js';
@@ -42,9 +41,9 @@ const freeTextMultipleWarning = new WarningNotice('"free-text" mode is not compa
  * @attr {string} name - Set name of the element
  * @prop {string} [name=''] - Set name of the element
  *
- * @fires value-changed - Dispatched when value changes
- * @fires query-changed - Dispatched when query changes
- * @fires opened-changed - Dispatched when opened state changes
+ * @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.
  */
 let ComboBox = class ComboBox extends FormFieldElement {
     constructor() {
@@ -163,9 +162,6 @@ let ComboBox = class ComboBox extends FormFieldElement {
       [part~=input]::-ms-clear {
         display: none;
       }
-      [hidden] {
-        display: none !important;
-      }
     `;
     }
     /**
@@ -506,7 +502,7 @@ let ComboBox = class ComboBox extends FormFieldElement {
         // If data is set asynchronously while popup is opened
         // list might not trigger popup update
         if (changedProperties.has('data') && this.opened) {
-            this.forcePopupLayout();
+            triggerResize();
         }
         super.update(changedProperties);
     }
@@ -622,7 +618,7 @@ let ComboBox = class ComboBox extends FormFieldElement {
      * @returns {void}
      */
     restrictPopupWidth() {
-        /* istanbul ignore next */
+        /* c8 ignore start */
         if (this.offsetWidth === 0) {
             // this code might happen only when opened has been set during initialisation
             // or when display is set to none
@@ -634,6 +630,7 @@ let ComboBox = class ComboBox extends FormFieldElement {
             });
             return;
         }
+        /* c8 ignore stop */
         const maxWidth = parseFloat(this.getComputedVariable('--list-max-width', 'none'));
         let minWidth = this.offsetWidth;
         // reset min-width if max-width less than min-width, otherwise browser won't apply max-width
@@ -700,7 +697,7 @@ let ComboBox = class ComboBox extends FormFieldElement {
                 return result;
             });
         }
-        this.forcePopupLayout();
+        triggerResize();
     }
     /**
      * Highlight the selected item or the first available item
@@ -737,17 +734,6 @@ let ComboBox = class ComboBox extends FormFieldElement {
         }
         return canHighlight;
     }
-    /**
-     * https://github.com/juggle/resize-observer/issues/42
-     *
-     * This event ensures that ResizeObserver picks up resize events
-     * when popup is deeply nested inside shadow root.
-     * TODO: remove this workaround once ResizeObserver handles shadow root scenario
-     * @returns {void}
-    */
-    forcePopupLayout() {
-        window.dispatchEvent(new Event('animationiteration'));
-    }
     /**
      * Shift focus back to input.
      * This method is required to prevent popup from focusing
@@ -813,8 +799,8 @@ let ComboBox = class ComboBox extends FormFieldElement {
      */
     onListValueChanged() {
         // cascade value changed event
-        this.notifyPropertyChange('value', this.value);
         this.onListInteraction();
+        this.notifyPropertyChange('value', this.value);
     }
     /**
      * Handle popup opened event
@@ -915,11 +901,9 @@ let ComboBox = class ComboBox extends FormFieldElement {
             case 'Enter':
                 this.enter(event);
                 break;
-            case 'Up':
             case 'ArrowUp':
                 this.up(event);
                 break;
-            case 'Down':
             case 'ArrowDown':
                 this.down(event);
                 break;
@@ -1001,11 +985,12 @@ let ComboBox = class ComboBox extends FormFieldElement {
      */
     reTargetEvent(event, target) {
         const path = event.composedPath();
-        /* istanbul ignore next */
+        /* c8 ignore start */
         if (path[0] === target) {
             // this must not happen, but keep it here to avoid infinitive loop
             return event;
         }
+        /* c8 ignore stop */
         const keyboardEvent = new CustomKeyboardEvent(event.type, event);
         target.dispatchEvent(keyboardEvent);
         if (keyboardEvent.defaultPrevented) {
@@ -1019,12 +1004,12 @@ let ComboBox = class ComboBox extends FormFieldElement {
      * @returns Popup template or undefined
      */
     get clearButtonTemplate() {
-        if (this.clears) {
+        const hasText = (this.label || this.query || this.freeTextValue || this.inputText);
+        if (this.clears && hasText) {
             return html `
         <div
           id="clears-button"
-          part="button button-clear"
-          ?hidden=${!this.label && !this.query && !this.freeTextValue && !this.inputText}><ef-icon part="icon icon-clear" icon="cross"></ef-icon>
+          part="button button-clear"><ef-icon part="icon icon-clear" icon="cross"></ef-icon>
         </div>
       `;
         }
@@ -1040,7 +1025,7 @@ let ComboBox = class ComboBox extends FormFieldElement {
             // benefit of being localised too
             if (this.focused || selectionLength > 1) {
                 return html `
-        <ef-counter part="selection-badge" tabindex="-1" .value=${selectionLength} title=${ifDefined(selectionLength > 999 ? selectionLength.toLocaleString() : undefined)} max="999"></ef-counter>
+        <ef-counter part="selection-badge" tabindex="-1" .value=${selectionLength} title=${selectionLength > 999 ? selectionLength.toLocaleString() : nothing} max="999"></ef-counter>
       `;
             }
         }

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

@@ -3,5 +3,6 @@ import '@refinitiv-ui/elements/list/themes/halo/dark';
 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:12rem;font-weight:400;height:24px;width:152px;max-width:100%;margin:1px 0;outline:0;box-sizing:border-box;display:inline-flex;align-items:center;position:relative;vertical-align:middle;border-radius:0;background-color:#0d0d0d;text-overflow:ellipsis;border:1px solid #404040;scrollbar-face-color:#595959;scrollbar-shadow-color:#595959;scrollbar-highlight-color:#595959;scrollbar-arrow-color:#595959;scrollbar-track-color:#1a1a1a;scrollbar-3dlight-color:#1a1a1a;scrollbar-darkshadow-color:#1a1a1a;scrollbar-color:#595959 #1a1a1a;scrollbar-width:thin;color:#ccc;cursor:pointer;scrollbar-face-color:#595959;scrollbar-shadow-color:#595959;scrollbar-highlight-color:#595959;scrollbar-arrow-color:#595959;scrollbar-track-color:#1a1a1a;scrollbar-3dlight-color:#1a1a1a;scrollbar-darkshadow-color:#1a1a1a;scrollbar-color:#595959 #1a1a1a;scrollbar-width:thin;padding:0}:host([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;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:12rem;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}::-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~=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}' }}));
+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-color:#595959 #1a1a1a;scrollbar-width:thin;color:#ccc;scrollbar-color:#595959 #1a1a1a;scrollbar-width:thin;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(: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;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~=button]{display:flex;justify-content:center;align-items:center;flex:none;height:100%;width:24px}:host [part~=list]{display:flex;flex-flow:column nowrap}: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}::-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~=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}' }}));

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

@@ -3,5 +3,6 @@ import '@refinitiv-ui/elements/list/themes/halo/light';
 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:12rem;font-weight:400;height:24px;width:152px;max-width:100%;margin:1px 0;outline:0;box-sizing:border-box;display:inline-flex;align-items:center;position:relative;vertical-align:middle;border-radius:0;background-color:#fff;text-overflow:ellipsis;border:1px solid #595959;scrollbar-face-color:#999;scrollbar-shadow-color:#999;scrollbar-highlight-color:#999;scrollbar-arrow-color:#999;scrollbar-track-color:#f2f2f2;scrollbar-3dlight-color:#f2f2f2;scrollbar-darkshadow-color:#f2f2f2;scrollbar-color:#999 #f2f2f2;scrollbar-width:thin;color:#404040;cursor:pointer;scrollbar-face-color:#999;scrollbar-shadow-color:#999;scrollbar-highlight-color:#999;scrollbar-arrow-color:#999;scrollbar-track-color:#f2f2f2;scrollbar-3dlight-color:#f2f2f2;scrollbar-darkshadow-color:#f2f2f2;scrollbar-color:#999 #f2f2f2;scrollbar-width:thin;padding:0}:host([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;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:12rem;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}::-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~=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}' }}));
+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-color:#999 #f2f2f2;scrollbar-width:thin;color:#404040;scrollbar-color:#999 #f2f2f2;scrollbar-width:thin;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(: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;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~=button]{display:flex;justify-content:center;align-items:center;flex:none;height:100%;width:24px}:host [part~=list]{display:flex;flex-flow:column nowrap}: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}::-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~=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}' }}));