@refinitiv-ui/elements 7.0.0-next.5 → 7.0.1

package/LICENSE

@@ -1,4 +1,4 @@
-Copyright © 2022, LSEG.
+Copyright © 2023, LSEG.
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -10,4 +10,4 @@ Unless required by applicable law or agreed to in writing, software
 distributed under the License is distributed on an "AS IS" BASIS,
 WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
-limitations under the License.
+limitations under 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 LSEG 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. LSEG 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 LSEG 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 LSEG products or services. The copyright owner must approve any use of such font outside of LSEG 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".
+
+Apache License 2.0. However, Halo theme shall only be used within LSEG products or services due to license of the font "Proxima Nova Fin".

package/cli.mjs

@@ -1,15 +1,17 @@
 #!/usr/bin/env node
-import yargs from 'yargs/yargs';
 import { hideBin } from 'yargs/helpers';
-import { errorHandler, info } from './scripts/helpers/index.mjs';
+import yargs from 'yargs/yargs';
+
 import { commands } from './scripts/cmd/index.mjs';
+import { errorHandler, info } from './scripts/helpers/index.mjs';
 
 yargs(hideBin(process.argv))
   .usage('Element Framework CLI Commands\n\nUsage: $0 <command> [options]')
   .command(commands)
   .demandCommand(1, 'You need at least one command.')
   .version(false)
-  .help('help').alias('help', 'h')
+  .help('help')
+  .alias('help', 'h')
   .fail(function (msg, err, yargs) {
     if (msg) {
       errorHandler(msg);

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.
  * @param element - potential child of accordion
@@ -86,8 +86,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
@@ -108,9 +107,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 } from '@refinitiv-ui/core';
-import { Translate } from '@refinitiv-ui/translate';
+import { BasicElement, CSSResultGroup, 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.
@@ -66,7 +66,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, 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 { 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;
         }
       `
@@ -189,76 +190,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
@@ -279,7 +280,8 @@ let Autosuggest = Autosuggest_1 = class Autosuggest extends Overlay {
      * @returns {void}
      */
     onInputValueChange(event) {
-        if (!this.suspended) { // avoid circular
+        if (!this.suspended) {
+            // avoid circular
             /* c8 ignore next */
             if (isMobile) {
                 this.lastActiveElement = event.target;
@@ -409,7 +411,7 @@ let Autosuggest = Autosuggest_1 = class Autosuggest extends Overlay {
         const { detail: { query, suggestion } } = event;
         /* c8 ignore next */
         if (this.attachTarget) {
-            this.attachTarget.value = suggestion && suggestion.label || query;
+            this.attachTarget.value = (suggestion && suggestion.label) || query;
         }
     }
     /**
@@ -536,7 +538,8 @@ 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 ? unsafeHTML(this.moreSearchText.replace(/{0\}/g, `<mark>${query}</mark>`))
+        ${this.moreSearchText
+            ? unsafeHTML(this.moreSearchText.replace(/{0\}/g, `<mark>${query}</mark>`))
             : this.t('MORE_RESULTS', {
                 query,
                 mark: (chunks) => `<mark>${chunks}</mark>`
@@ -554,7 +557,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);
             }
@@ -760,13 +764,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.
@@ -976,7 +980,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
@@ -1150,11 +1154,8 @@ 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 tabIndex="-1" role="option" id="moreResults" part="more-results"
+        >${this.moreResultsTextTemplate}
       </ef-item>
     `;
     }
@@ -1165,24 +1166,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-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-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}' }}));