@refinitiv-ui/elements 6.9.0-next.0 → 6.9.0

package/LICENSE

@@ -1,4 +1,4 @@
-Copyright © 2022, LSEG.
+Copyright © 2023, Refinitiv.
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.

package/README.md

@@ -1,6 +1,6 @@
 # Element Framework
 
-Element Framework (EF) is a collection of elements that includes theming capability within the Refinitiv's design system. The elements are a set of web components which is a standard web technology and can be utilized across all browsers.
+Element Framework (EF) is a collection of elements that includes theming capability within the Refinitiv Workspace's design system. The elements are a set of web components which is a standard web technology and can be utilized across all browsers.
 
 ## Usage
 
@@ -10,43 +10,44 @@ EF elements are published under single package.
 npm install @refinitiv-ui/elements
 ```
 
-The elements are required theme to instantiate itself in the app. Refinitiv's design system is called Halo theme and you can install it from npm command.
+The elements are required theme to instantiate itself in the app. Refinitiv Workspace's design system is called Halo theme and you can install it from npm command.
 
 ```sh
 npm install @refinitiv-ui/halo-theme
 ```
 
-Finally, import both elements that you want to use and its themes into your application and it is ready to go. To follow Refinitiv design system, it is required styles of some native elements e.g. typography.
+Finally, import both elements that you want to use and its themes into your application and it is ready to go. To follow Refinitiv Workspace's design system, it is required styles of some native elements e.g. typography.
 
 <br>
 
->The font "Proxima Nova Fin" shall only be used within Refinitiv products or services. The copyright owner must approve any use of such font outside of Refinitiv products or services, which may be subject to a fee. Please see https://www.fontspring.com/lic/fontspring/webfont#license_text
+> The font "Proxima Nova Fin" shall only be used within Refinitiv products or services. The copyright owner must approve any use of such font outside of Refinitiv products or services, which may be subject to a fee. Please see https://www.fontspring.com/lic/fontspring/webfont#license_text
 
 <br>
 
 ```javascript
 // import element and its Halo dark theme
 import '@refinitiv-ui/elements/button';
+import '@refinitiv-ui/elements/button/themes/halo/dark';
 import '@refinitiv-ui/elements/panel';
+import '@refinitiv-ui/elements/panel/themes/halo/dark';
+
 // import native styles for typography, css variables, etc.
 import '@refinitiv-ui/halo-theme/dark/imports/native-elements';
-import '@refinitiv-ui/elements/button/themes/halo/dark';
-import '@refinitiv-ui/elements/panel/themes/halo/dark';
 ```
 
 Now, you can use the elements in your app.
 
 ```css
 .content {
-    width:100%;
-    height: 500px;
+  width: 100%;
+  height: 500px;
 }
 ```
 
 ```html
 <ef-panel class="content" spacing>
-    <h2>Hello EF!</h2>
-    <ef-button cta>OK</ef-button>
+  <h2>Hello EF!</h2>
+  <ef-button cta>OK</ef-button>
 </ef-panel>
 ```
 
@@ -55,4 +56,5 @@ Now, you can use the elements in your app.
 See list of elements, demo and more tutorial by visiting [EF Documentation](https://ui.refinitiv.com/).
 
 # License
+
 Apache License 2.0. However, Halo theme shall only be used within Refinitiv products or services due to license of the font "Proxima Nova Fin".

package/lib/accordion/index.d.ts

@@ -1,5 +1,5 @@
 import { JSXInterface } from '../jsx';
-import { PropertyValues, TemplateResult, CSSResultGroup } from '@refinitiv-ui/core';
+import { CSSResultGroup, PropertyValues, TemplateResult } from '@refinitiv-ui/core';
 import { Collapse } from '../collapse/index.js';
 /**
  * Used to display a group of `Collapse` control.

package/lib/accordion/index.js

@@ -1,9 +1,9 @@
 import { __decorate } from "tslib";
-import { html, css } from '@refinitiv-ui/core';
+import { css, html } from '@refinitiv-ui/core';
 import { customElement } from '@refinitiv-ui/core/decorators/custom-element.js';
 import { property } from '@refinitiv-ui/core/decorators/property.js';
-import { VERSION } from '../version.js';
 import { Collapse } from '../collapse/index.js';
+import { VERSION } from '../version.js';
 /**
  * Finds closest accordion parent of element.
  * Created, because IE11 doesn't support closest() method.
@@ -95,8 +95,7 @@ let Accordion = class Accordion extends Collapse {
      * @returns array of accordion items
      */
     getChildItems() {
-        return [...this.querySelectorAll('ef-collapse')]
-            .filter((el) => isDirectAccordionChild(el, this));
+        return [...this.querySelectorAll('ef-collapse')].filter((el) => isDirectAccordionChild(el, this));
     }
     /**
      * collapse non selected child items on click
@@ -117,9 +116,7 @@ let Accordion = class Accordion extends Collapse {
      * @return {TemplateResult}  Render template
      */
     render() {
-        return html `
-      <slot></slot>
-    `;
+        return html ` <slot></slot> `;
     }
 };
 __decorate([

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

@@ -1,3 +1,2 @@
 import '@refinitiv-ui/elements/collapse/themes/halo/dark';
-
 dispatchEvent(new CustomEvent('ef.customStyles.define', { detail: { name: 'ef-accordion', styles: ':host([spacing]) ::slotted(ef-collapse){--panel-padding:12px 8px}:host ::slotted(ef-collapse:not(:last-child):not([expanded])){border-bottom:1px solid #404040}' }}));

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

@@ -1,3 +1,2 @@
 import '@refinitiv-ui/elements/collapse/themes/halo/light';
-
 dispatchEvent(new CustomEvent('ef.customStyles.define', { detail: { name: 'ef-accordion', styles: ':host([spacing]) ::slotted(ef-collapse){--panel-padding:12px 8px}:host ::slotted(ef-collapse:not(:last-child):not([expanded])){border-bottom:1px solid #d9d9d9}' }}));

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

@@ -1,3 +1,2 @@
 import '@refinitiv-ui/elements/collapse/themes/solar/charcoal';
-
 dispatchEvent(new CustomEvent('ef.customStyles.define', { detail: { name: 'ef-accordion', styles: ':host([spacing]) ::slotted(ef-collapse){--panel-padding:6px 10px}:host ::slotted(ef-collapse:not(:last-child):not([expanded])){border-bottom:1px solid #0a0a0a}' }}));

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

@@ -1,3 +1,2 @@
 import '@refinitiv-ui/elements/collapse/themes/solar/pearl';
-
 dispatchEvent(new CustomEvent('ef.customStyles.define', { detail: { name: 'ef-accordion', styles: ':host([spacing]) ::slotted(ef-collapse){--panel-padding:6px 10px}:host ::slotted(ef-collapse:not(:last-child):not([expanded])){border-bottom:1px solid #d5d8db}' }}));

package/lib/appstate-bar/index.d.ts

@@ -1,7 +1,7 @@
 import { JSXInterface } from '../jsx';
-import { BasicElement, TemplateResult, CSSResultGroup, PropertyValues } from '@refinitiv-ui/core';
-import { Translate } from '@refinitiv-ui/translate';
+import { BasicElement, CSSResultGroup, PropertyValues, TemplateResult } from '@refinitiv-ui/core';
 import '@refinitiv-ui/phrasebook/locale/en/appstate-bar.js';
+import { Translate } from '@refinitiv-ui/translate';
 import '../icon/index.js';
 /**
  * Used to display at the top of application to provide a status or information.

package/lib/appstate-bar/index.js

@@ -1,11 +1,11 @@
 import { __decorate } from "tslib";
-import { BasicElement, html, css } from '@refinitiv-ui/core';
+import { BasicElement, css, html } from '@refinitiv-ui/core';
 import { customElement } from '@refinitiv-ui/core/decorators/custom-element.js';
 import { property } from '@refinitiv-ui/core/decorators/property.js';
-import { VERSION } from '../version.js';
-import { translate } from '@refinitiv-ui/translate';
 import '@refinitiv-ui/phrasebook/locale/en/appstate-bar.js';
+import { translate } from '@refinitiv-ui/translate';
 import '../icon/index.js';
+import { VERSION } from '../version.js';
 /**
  * Used to display at the top of application to provide a status or information.
  * @slot right - Place custom content on the right of bar.
@@ -78,7 +78,13 @@ let AppstateBar = class AppstateBar extends BasicElement {
       <div part="heading">${this.heading}</div>
       <div part="message"><slot></slot></div>
       <div part="right"><slot name="right"></slot></div>
-      <ef-icon role="button" part="close"  @tap="${this.clear}" icon="cross" aria-label="${this.t('CLOSE')}"></ef-icon>
+      <ef-icon
+        role="button"
+        part="close"
+        @tap="${this.clear}"
+        icon="cross"
+        aria-label="${this.t('CLOSE')}"
+      ></ef-icon>
     `;
     }
 };

package/lib/appstate-bar/themes/halo/dark/index.js

@@ -1,3 +1,2 @@
 import '@refinitiv-ui/elements/icon/themes/halo/dark';
-
 dispatchEvent(new CustomEvent('ef.customStyles.define', { detail: { name: 'ef-appstate-bar', styles: ':host{--heading-text-color:#CCCCCC;--heading-background-color:#334BFF;--text-color:#000000;--background-color:hsl(236, 77%, 92%);--border-color:#404040;display:flex;align-items:center;background:var(--background-color);color:var(--text-color);outline:solid 1px var(--border-color);font-size:12px;height:28px;--heading-text-color:#FFFFFF;--heading-background-color:#0F1E8A;--text-color:#CCCCCC;--background-color:#262626}:host([state=highlight]){--heading-background-color:hsl(337, 80%, 49%);--heading-background-color:#334BFF}:host([state=info]){--heading-background-color:#6678FF;--heading-background-color:#007678}:host ::slotted(*){padding-right:10px}:host [part=heading]{display:flex;flex:0 0 auto;align-items:center;height:100%;text-transform:uppercase;font-weight:600;background:var(--heading-background-color);color:var(--heading-text-color);padding:0 8px}:host [part=message]{flex:1 1000000 auto;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;padding-left:10px;text-align:inherit}:host [part=right]{flex:0 1 auto;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host [part=close]{touch-action:manipulation;flex:0 0 auto;width:16px;height:16px;margin-right:10px;stroke-width:.11em;cursor:pointer}' }}));

package/lib/appstate-bar/themes/halo/light/index.js

@@ -1,3 +1,2 @@
 import '@refinitiv-ui/elements/icon/themes/halo/light';
-
 dispatchEvent(new CustomEvent('ef.customStyles.define', { detail: { name: 'ef-appstate-bar', styles: ':host{--heading-text-color:#0D0D0D;--heading-background-color:#334BFF;--text-color:#000000;--background-color:hsl(236, 77%, 92%);--border-color:#595959;display:flex;align-items:center;background:var(--background-color);color:var(--text-color);outline:solid 1px var(--border-color);font-size:12px;height:28px;--heading-text-color:#FFFFFF;--heading-background-color:#0F1E8A;--text-color:#0D0D0D;--background-color:#F2F2F2;--border-color:#CCCCCC}:host([state=highlight]){--heading-background-color:hsl(337, 80%, 49%);--heading-background-color:#334BFF}:host([state=info]){--heading-background-color:#6678FF;--heading-background-color:#007678}:host ::slotted(*){padding-right:10px}:host [part=heading]{display:flex;flex:0 0 auto;align-items:center;height:100%;text-transform:uppercase;font-weight:600;background:var(--heading-background-color);color:var(--heading-text-color);padding:0 8px}:host [part=message]{flex:1 1000000 auto;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;padding-left:10px;text-align:inherit}:host [part=right]{flex:0 1 auto;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host [part=close]{touch-action:manipulation;flex:0 0 auto;width:16px;height:16px;margin-right:10px;stroke-width:.11em;cursor:pointer}' }}));

package/lib/appstate-bar/themes/solar/charcoal/index.js

@@ -1,3 +1,2 @@
 import '@refinitiv-ui/elements/icon/themes/solar/charcoal';
-
 dispatchEvent(new CustomEvent('ef.customStyles.define', { detail: { name: 'ef-appstate-bar', styles: ':host{--heading-text-color:#E2E2E2;--heading-background-color:#FF9933;--text-color:#000000;--background-color:hsl(236, 77%, 92%);--border-color:#4A4A52;display:flex;align-items:center;background:var(--background-color);color:var(--text-color);outline:solid 1px var(--border-color);font-size:14px;--heading-text-color:#46A0F0;--heading-background-color:#142E45;--text-color:#C2C2C2;--background-color:#0F2233;--border-color:#000000;height:24px}:host([state=highlight]){--heading-background-color:hsl(337, 80%, 49%);--heading-text-color:#000000;--heading-background-color:#FF9933}:host([state=info]){--heading-background-color:#b35900;--heading-text-color:#C2C2C2;--heading-background-color:#282E33}:host ::slotted(*){padding-right:10px}:host [part=heading]{display:flex;flex:0 0 auto;align-items:center;height:100%;text-transform:uppercase;font-weight:600;background:var(--heading-background-color);color:var(--heading-text-color);padding:0 10px}:host [part=message]{flex:1 1000000 auto;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;padding-left:10px;text-align:inherit}:host [part=right]{flex:0 1 auto;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host [part=close]{touch-action:manipulation;flex:0 0 auto;margin-right:10px;stroke-width:.11em;cursor:pointer;width:15px;height:15px;stroke-width:.12em}' }}));

package/lib/appstate-bar/themes/solar/pearl/index.js

@@ -1,3 +1,2 @@
 import '@refinitiv-ui/elements/icon/themes/solar/pearl';
-
 dispatchEvent(new CustomEvent('ef.customStyles.define', { detail: { name: 'ef-appstate-bar', styles: ':host{--heading-text-color:#484848;--heading-background-color:#FF9933;--text-color:#000000;--background-color:hsl(236, 77%, 92%);--border-color:#A9AFBA;display:flex;align-items:center;background:var(--background-color);color:var(--text-color);outline:solid 1px var(--border-color);font-size:14px;--heading-text-color:#FFFFFF;--heading-background-color:#2A6090;--text-color:#484848;--background-color:#C1E3FE;--border-color:#FFFFFF;height:24px}:host([state=highlight]){--heading-background-color:hsl(337, 80%, 49%);--heading-text-color:#FFFFFF;--heading-background-color:#CC7F33}:host([state=info]){--heading-background-color:#EE7600;--heading-text-color:#FFFFFF;--heading-background-color:#666570}:host ::slotted(*){padding-right:10px}:host [part=heading]{display:flex;flex:0 0 auto;align-items:center;height:100%;text-transform:uppercase;font-weight:600;background:var(--heading-background-color);color:var(--heading-text-color);padding:0 10px}:host [part=message]{flex:1 1000000 auto;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;padding-left:10px;text-align:inherit}:host [part=right]{flex:0 1 auto;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host [part=close]{touch-action:manipulation;flex:0 0 auto;margin-right:10px;stroke-width:.11em;cursor:pointer;width:15px;height:15px;stroke-width:.12em}' }}));

package/lib/autosuggest/index.d.ts

@@ -1,14 +1,14 @@
 import { JSXInterface } from '../jsx';
 import { CSSResultGroup, ElementSize, PropertyValues, TemplateResult } from '@refinitiv-ui/core';
+import '@refinitiv-ui/phrasebook/locale/en/autosuggest.js';
 import { TranslateDirective } from '@refinitiv-ui/translate';
-import type { AutosuggestTargetElement, AutosuggestHighlightable, AutosuggestMethodType, AutosuggestQuery, AutosuggestRenderer, AutosuggestReason, AutosuggestItem, AutosuggestSelectItemEvent, AutosuggestHighlightItemEvent } from './helpers/types';
-import { escapeRegExp, itemHighlightable, queryWordSelect } from './helpers/utils.js';
-import { renderer } from './helpers/renderer.js';
-import { Overlay } from '../overlay/index.js';
-import '../loader/index.js';
 import '../item/index.js';
-import '@refinitiv-ui/phrasebook/locale/en/autosuggest.js';
-import type { ItemHighlightEvent, AddAttachTargetEventsEvent, RemoveAttachTargetEventsEvent, ItemSelectEvent, SuggestionsFetchRequestedEvent, SuggestionsClearRequestedEvent, SuggestionsQueryEvent, SuggestionsChangedEvent } from './helpers/types';
+import '../loader/index.js';
+import { Overlay } from '../overlay/index.js';
+import { renderer } from './helpers/renderer.js';
+import { escapeRegExp, itemHighlightable, queryWordSelect } from './helpers/utils.js';
+import type { AutosuggestHighlightItemEvent, AutosuggestHighlightable, AutosuggestItem, AutosuggestMethodType, AutosuggestQuery, AutosuggestReason, AutosuggestRenderer, AutosuggestSelectItemEvent, AutosuggestTargetElement } from './helpers/types';
+import type { AddAttachTargetEventsEvent, ItemHighlightEvent, ItemSelectEvent, RemoveAttachTargetEventsEvent, SuggestionsChangedEvent, SuggestionsClearRequestedEvent, SuggestionsFetchRequestedEvent, SuggestionsQueryEvent } from './helpers/types';
 export type { AutosuggestTargetElement, AutosuggestHighlightable, AutosuggestMethodType, AutosuggestQuery, AutosuggestRenderer, AutosuggestReason, AutosuggestItem, ItemHighlightEvent, AddAttachTargetEventsEvent, RemoveAttachTargetEventsEvent, ItemSelectEvent, SuggestionsFetchRequestedEvent, SuggestionsClearRequestedEvent, SuggestionsQueryEvent, SuggestionsChangedEvent };
 export { updateElementContent } from './helpers/utils.js';
 export { itemHighlightable, escapeRegExp, queryWordSelect, renderer, renderer as itemRenderer };

package/lib/autosuggest/index.js

@@ -2,20 +2,20 @@ var Autosuggest_1;
 import { __decorate } from "tslib";
 import { css, html } from '@refinitiv-ui/core';
 import { customElement } from '@refinitiv-ui/core/decorators/custom-element.js';
-import { query } from '@refinitiv-ui/core/decorators/query.js';
 import { property } from '@refinitiv-ui/core/decorators/property.js';
-import { ref, createRef } from '@refinitiv-ui/core/directives/ref.js';
+import { query } from '@refinitiv-ui/core/decorators/query.js';
+import { createRef, ref } from '@refinitiv-ui/core/directives/ref.js';
 import { unsafeHTML } from '@refinitiv-ui/core/directives/unsafe-html.js';
-import { VERSION } from '../version.js';
+import '@refinitiv-ui/phrasebook/locale/en/autosuggest.js';
+import { TranslatePropertyKey, translate } from '@refinitiv-ui/translate';
 import { AnimationTaskRunner, TimeoutTaskRunner } from '@refinitiv-ui/utils/async.js';
 import { isIE, isMobile } from '@refinitiv-ui/utils/browser.js';
-import { translate, TranslatePropertyKey } from '@refinitiv-ui/translate';
-import { escapeRegExp, itemHighlightable, queryWordSelect } from './helpers/utils.js';
-import { renderer } from './helpers/renderer.js';
-import { Overlay } from '../overlay/index.js';
-import '../loader/index.js';
 import '../item/index.js';
-import '@refinitiv-ui/phrasebook/locale/en/autosuggest.js';
+import '../loader/index.js';
+import { Overlay } from '../overlay/index.js';
+import { VERSION } from '../version.js';
+import { renderer } from './helpers/renderer.js';
+import { escapeRegExp, itemHighlightable, queryWordSelect } from './helpers/utils.js';
 export { updateElementContent } from './helpers/utils.js';
 export { itemHighlightable, escapeRegExp, queryWordSelect, renderer, renderer as itemRenderer // compatibility
  };
@@ -64,13 +64,14 @@ let Autosuggest = Autosuggest_1 = class Autosuggest extends Overlay {
           display: flex;
           flex-direction: column;
         }
-        [part=content] {
+        [part='content'] {
           flex: 1 1 auto;
           overflow-x: hidden;
           overflow-y: auto;
           -webkit-overflow-scrolling: touch;
         }
-        [part=header], [part=footer] {
+        [part='header'],
+        [part='footer'] {
           flex: none;
         }
       `
@@ -190,76 +191,76 @@ let Autosuggest = Autosuggest_1 = class Autosuggest extends Overlay {
         // TODO: think of a nicer way to do this
         this.xmlSerializer = null;
         /**
-        * @ignore
-        */
+         * @ignore
+         */
         this.position = ['bottom-start', 'top-start', 'right-middle'];
         /**
-        * @ignore
-        */
+         * @ignore
+         */
         this.noCancelOnEscKey = true;
         /**
-        * @ignore
-        */
+         * @ignore
+         */
         this.noCancelOnOutsideClick = true;
         /**
-        * @ignore
-        */
+         * @ignore
+         */
         this.noAutofocus = true;
         /**
-        * @ignore
-        */
+         * @ignore
+         */
         this.noOverlap = true;
         /**
-        * @ignore
-        */
+         * @ignore
+         */
         this.withShadow = false;
         /**
          * @ignore
          */
         this.noFocusManagement = true;
         /**
-        * @ignore
-        */
+         * @ignore
+         */
         this.onInputValueChange = this.onInputValueChange.bind(this);
         /**
-        * @ignore
-        */
+         * @ignore
+         */
         this.onInputKeyDown = this.onInputKeyDown.bind(this);
         /**
-        * @ignore
-        */
+         * @ignore
+         */
         this.onInputBlur = this.onInputBlur.bind(this);
         /**
-        * @ignore
-        */
+         * @ignore
+         */
         this.onInputFocus = this.onInputFocus.bind(this);
         /**
-        * @ignore
-        */
+         * @ignore
+         */
         this.suggestionsQueryAction = this.suggestionsQueryAction.bind(this);
         /**
-        * @ignore
-        */
+         * @ignore
+         */
         this.itemSelectAction = this.itemSelectAction.bind(this);
         /**
-        * @ignore
-        */
+         * @ignore
+         */
         this.itemHighlightAction = this.itemHighlightAction.bind(this);
         /**
-        * @ignore
-        */
+         * @ignore
+         */
         this.suggestionsFetchRequestedAction = this.suggestionsFetchRequestedAction.bind(this);
         /**
-        * @ignore
-        */
+         * @ignore
+         */
         this.suggestionsClearRequestedAction = this.suggestionsClearRequestedAction.bind(this);
         /**
-        * @ignore
-        */
+         * @ignore
+         */
         this.attachEventsAddAction = this.attachEventsAddAction.bind(this);
         /**
-        * @ignore
-        */
+         * @ignore
+         */
         this.attachEventsRemoveAction = this.attachEventsRemoveAction.bind(this);
         /**
          * @ignore
@@ -280,7 +281,8 @@ let Autosuggest = Autosuggest_1 = class Autosuggest extends Overlay {
      * @returns {void}
      */
     onInputValueChange(event) {
-        if (!this.suspended) { // avoid circular
+        if (!this.suspended) {
+            // avoid circular
             /* istanbul ignore next */
             if (isMobile) {
                 this.lastActiveElement = event.target;
@@ -398,7 +400,7 @@ let Autosuggest = Autosuggest_1 = class Autosuggest extends Overlay {
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     onSlotChange(event) {
         const contentSlot = this.contentSlotRef.value;
-        const nodes = (contentSlot && contentSlot.assignedNodes()) || [];
+        const nodes = contentSlot?.assignedNodes() ?? [];
         this.setOpened(this.attachTargetFocused && this.hasContent);
         // make a brave assumption that suggestions are populated as well
         const suggestions = this.suggestions;
@@ -433,7 +435,7 @@ let Autosuggest = Autosuggest_1 = class Autosuggest extends Overlay {
         const { detail: { query, suggestion } } = event;
         /* istanbul ignore next */
         if (this.attachTarget) {
-            this.attachTarget.value = suggestion && suggestion?.label || query;
+            this.attachTarget.value = (suggestion && suggestion?.label) || query;
         }
     }
     /**
@@ -559,12 +561,14 @@ let Autosuggest = Autosuggest_1 = class Autosuggest extends Overlay {
         }
         const query = this.xmlSerializer.serializeToString(document.createTextNode(this.query ? this.query.toString() : ''));
         return html `
-      <span part="more-results-text">${this.moreSearchText
+      <span part="more-results-text"
+        >${this.moreSearchText
             ? unsafeHTML(this.moreSearchText.replace(/{0\}/g, `<mark>${query}</mark>`))
             : this.t('MORE_RESULTS', {
                 query,
                 mark: (chunks) => `<mark>${chunks}</mark>`
-            })}</span>
+            })}</span
+      >
       <span part="more-results-keys" slot="right"><kbd>SHIFT</kbd> + <kbd>ENTER</kbd></span>
     `;
     }
@@ -577,7 +581,8 @@ let Autosuggest = Autosuggest_1 = class Autosuggest extends Overlay {
      */
     requestSuggestions(reason, debounce = false) {
         this.dispatchSuggestionsQuery(reason);
-        if (this.preservedQueryValue === this.query) { // if the query is the same do not re-issue the request, instead try to open auto suggest
+        if (this.preservedQueryValue === this.query) {
+            // if the query is the same do not re-issue the request, instead try to open auto suggest
             if (!this.opened && ((this.suggestions && this.suggestions.length) || this.moreResults)) {
                 this.setOpened(true);
             }
@@ -752,6 +757,7 @@ let Autosuggest = Autosuggest_1 = class Autosuggest extends Overlay {
     get renderedSuggestions() {
         const keys = [];
         this.suggestionMap.forEach((value, key) => {
+            // support IE11
             keys.push(key);
         });
         if (this.moreResults && this.moreResultsItem) {
@@ -784,13 +790,13 @@ let Autosuggest = Autosuggest_1 = class Autosuggest extends Overlay {
      * @returns true if some of changedProperties modified
      */
     shouldAutosuggestUpdate(changedProperties) {
-        return changedProperties.has('attach')
-            || changedProperties.has('suggestions')
-            || changedProperties.has('moreResults')
-            || changedProperties.has('moreSearchText')
-            || changedProperties.has('loading')
-            || changedProperties.has('debounceRate')
-            || changedProperties.has(TranslatePropertyKey);
+        return (changedProperties.has('attach') ||
+            changedProperties.has('suggestions') ||
+            changedProperties.has('moreResults') ||
+            changedProperties.has('moreSearchText') ||
+            changedProperties.has('loading') ||
+            changedProperties.has('debounceRate') ||
+            changedProperties.has(TranslatePropertyKey));
     }
     /**
      * Run when document click event happens.
@@ -897,8 +903,8 @@ let Autosuggest = Autosuggest_1 = class Autosuggest extends Overlay {
      */
     suggestionsChange() {
         const contentSlot = this.contentSlotRef.value;
-        contentSlot && contentSlot.assignedNodes().forEach((node) => {
-            node.parentNode && node.parentNode.removeChild(node);
+        contentSlot?.assignedNodes().forEach((node) => {
+            node.parentNode?.removeChild(node);
         });
         this.appendChild(this.suggestions.reduce((fragment, suggestion) => this.generateSuggestionsFragment(fragment, suggestion), document.createDocumentFragment()));
     }
@@ -1000,7 +1006,7 @@ let Autosuggest = Autosuggest_1 = class Autosuggest extends Overlay {
      * @returns focused true if attach target is focused
      */
     get attachTargetFocused() {
-        return this.isFocused(document.activeElement) || this.attachTarget === this.lastActiveElement;
+        return (this.isFocused(document.activeElement) || this.attachTarget === this.lastActiveElement);
     }
     /**
      * Walk through shadowDOM to find activeElement
@@ -1026,7 +1032,7 @@ let Autosuggest = Autosuggest_1 = class Autosuggest extends Overlay {
         }
         // Space characters (e.g. space, tab, EOL) don't count as having content
         const contentSlot = this.contentSlotRef.value;
-        const nodes = contentSlot && contentSlot.assignedNodes() || [];
+        const nodes = contentSlot?.assignedNodes() ?? [];
         return nodes.some(({ nodeType, textContent }) => nodeType === Node.ELEMENT_NODE || (textContent && textContent.search(/\S/) >= 0)); // If node is element always return true
     }
     /**
@@ -1097,6 +1103,7 @@ let Autosuggest = Autosuggest_1 = class Autosuggest extends Overlay {
         if (focusElement) {
             this.highlightItem(focusElement, false);
             focusElement.scrollIntoView({
+                // TODO: this has different behaviour in IE11
                 behavior: 'auto',
                 block: 'nearest'
             });
@@ -1185,10 +1192,9 @@ let Autosuggest = Autosuggest_1 = class Autosuggest extends Overlay {
             return null;
         }
         return html `
-      <ef-item tabIndex="-1"
-               role="option"
-               id="moreResults"
-               part="more-results">${this.moreResultsTextTemplate}</ef-item>
+      <ef-item tabIndex="-1" role="option" id="moreResults" part="more-results"
+        >${this.moreResultsTextTemplate}</ef-item
+      >
     `;
     }
     /**
@@ -1198,24 +1204,23 @@ let Autosuggest = Autosuggest_1 = class Autosuggest extends Overlay {
      */
     render() {
         return html `
-        <div ${ref(this.headerElementRef)}
-             part="header">
-          <slot id="headerSlot" name="header"></slot>
-        </div>
-        <div ${ref(this.contentElementRef)}
-             part="content"
-             @mousemove="${this.onItemMouseMove}"
-             @mouseleave="${this.onItemMouseLeave}"
-             @tap="${this.onItemMouseClick}">
-          <slot ${ref(this.contentSlotRef)}
-                @slotchange="${this.onSlotChange}"></slot>
-          ${this.moreResultsTemplate}
-        </div>
-        <div ${ref(this.footerElementRef)}
-             part="footer">
-          <slot id="footerSlot" name="footer"></slot>
-        </div>
-        ${this.loaderTemplate}
+      <div ${ref(this.headerElementRef)} part="header">
+        <slot id="headerSlot" name="header"></slot>
+      </div>
+      <div
+        ${ref(this.contentElementRef)}
+        part="content"
+        @mousemove="${this.onItemMouseMove}"
+        @mouseleave="${this.onItemMouseLeave}"
+        @tap="${this.onItemMouseClick}"
+      >
+        <slot ${ref(this.contentSlotRef)} @slotchange="${this.onSlotChange}"></slot>
+        ${this.moreResultsTemplate}
+      </div>
+      <div ${ref(this.footerElementRef)} part="footer">
+        <slot id="footerSlot" name="footer"></slot>
+      </div>
+      ${this.loaderTemplate}
     `;
     }
     /**

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

@@ -1,5 +1,4 @@
 import '@refinitiv-ui/elements/item/themes/halo/dark';
 import '@refinitiv-ui/elements/overlay/themes/halo/dark';
 import '@refinitiv-ui/elements/loader/themes/halo/dark';
-
 dispatchEvent(new CustomEvent('ef.customStyles.define', { detail: { name: 'ef-autosuggest', styles: 'mark{color:#fff;background-color:#334bff}:host{min-height:0;max-height:350px;border:1px solid #404040;background-color:#0d0d0d}:host([loading]){min-height:50px;min-width:150px}:host [part=content]{overflow:auto;touch-action:manipulation;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}:host [part=more-results]{border-top:1px solid #404040}:host [part=more-results] mark{background-color:inherit;font-weight:500}:host [part=more-results-text]{font-size:.76em;font-size:inherit}:host [part=more-results-keys],:host [part=more-results] mark{color:#fff}:host [part=loader]{top:0;bottom:0;left:0;right:0;position:absolute}:host [part=backdrop]{background-color:#000;opacity:.6;width:100%;height:100%}::-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}kbd{font-family:inherit;justify-content:center;align-items:center;vertical-align:middle;box-sizing:border-box;box-shadow:0 1px 3px rgba(0,0,0,.3);min-width:1.33em;display:inline-block;color:#fff;background-color:#404040;box-shadow:0 0 0 2px #404040;font-weight:600;font-family:inherit;font-size:.83333333em;border-radius:1em;padding:0 .5em;height:1.2em;margin-top:-.1em}:host{border-color:#334bff;margin:2px 0}:host [part=content] ::slotted(ef-item:not([part=more-results])){background-color:#262626}:host [part=content] ::slotted(ef-item:not([type=header]):not([part=more-results])){color:#ccc}:host [part=content] ::slotted(ef-item:not([part=more-results]):not(:first-child)){box-shadow:0 -1px 0 #404040}:host [part=content] ::slotted(ef-item:not([part=more-results]):focus),:host [part=content] ::slotted(ef-item:not([part=more-results])[highlighted]){background-color:#333}:host [part=content] ::slotted(ef-item:not([part=more-results]):focus:not([selected])),:host [part=content] ::slotted(ef-item:not([part=more-results])[highlighted]:not([selected])){color:#fff}:host [part=more-results]{border-top-color:#404040;color:#ccc;background-color:#1a1a1a}:host [part=more-results]:focus,:host [part=more-results][highlighted]{background-color:#333;color:#ccc}:host [part=more-results-keys] kbd{margin-left:4px;margin-right:4px}:host [part=more-results-keys] kbd:first-of-type{margin-left:0}:host [part=more-results-keys] kbd:last-of-type{margin-right:0}' }}));

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

@@ -1,5 +1,4 @@
 import '@refinitiv-ui/elements/item/themes/halo/light';
 import '@refinitiv-ui/elements/overlay/themes/halo/light';
 import '@refinitiv-ui/elements/loader/themes/halo/light';
-
 dispatchEvent(new CustomEvent('ef.customStyles.define', { detail: { name: 'ef-autosuggest', styles: 'mark{color:#fff;background-color:#334bff}:host{min-height:0;max-height:350px;border:1px solid #595959;background-color:#fff}:host([loading]){min-height:50px;min-width:150px}:host [part=content]{overflow:auto;touch-action:manipulation;scrollbar-face-color:#999;scrollbar-shadow-color:#999;scrollbar-highlight-color:#999;scrollbar-arrow-color:#999;scrollbar-track-color:#f2f2f2;scrollbar-3dlight-color:#f2f2f2;scrollbar-darkshadow-color:#f2f2f2;scrollbar-color:#999 #f2f2f2;scrollbar-width:thin}:host [part=more-results]{border-top:1px solid #595959}:host [part=more-results] mark{background-color:inherit;font-weight:500}:host [part=more-results-text]{font-size:.76em;font-size:inherit}:host [part=more-results-keys],:host [part=more-results] mark{color:#0d0d0d}:host [part=loader]{top:0;bottom:0;left:0;right:0;position:absolute}:host [part=backdrop]{background-color:#000;opacity:.6;width:100%;height:100%}::-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}kbd{font-family:inherit;justify-content:center;align-items:center;vertical-align:middle;box-sizing:border-box;box-shadow:0 1px 3px rgba(0,0,0,.3);min-width:1.33em;display:inline-block;color:#0d0d0d;background-color:#d9d9d9;box-shadow:0 0 0 2px #d9d9d9;font-weight:600;font-family:inherit;font-size:.83333333em;border-radius:1em;padding:0 .5em;height:1.2em;margin-top:-.1em}:host{border-color:#334bff;margin:2px 0}:host [part=content] ::slotted(ef-item:not([part=more-results])){background-color:#f2f2f2}:host [part=content] ::slotted(ef-item:not([type=header]):not([part=more-results])){color:#404040}:host [part=content] ::slotted(ef-item:not([part=more-results]):not(:first-child)){box-shadow:0 -1px 0 #d9d9d9}:host [part=content] ::slotted(ef-item:not([part=more-results]):focus),:host [part=content] ::slotted(ef-item:not([part=more-results])[highlighted]){background-color:#e6e6e6}:host [part=content] ::slotted(ef-item:not([part=more-results]):focus:not([selected])),:host [part=content] ::slotted(ef-item:not([part=more-results])[highlighted]:not([selected])){color:#0d0d0d}:host [part=more-results]{border-top-color:#d9d9d9;color:#737373;background-color:#fafafa}:host [part=more-results]:focus,:host [part=more-results][highlighted]{background-color:#e6e6e6;color:#737373}:host [part=more-results-keys] kbd{margin-left:4px;margin-right:4px}:host [part=more-results-keys] kbd:first-of-type{margin-left:0}:host [part=more-results-keys] kbd:last-of-type{margin-right:0}' }}));