@refinitiv-ui/elements 7.0.0 → 7.0.2

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.
@@ -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 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/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/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/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/solar/charcoal/index.js

@@ -1,4 +1,4 @@
 import '@refinitiv-ui/elements/item/themes/solar/charcoal';
 import '@refinitiv-ui/elements/overlay/themes/solar/charcoal';
 import '@refinitiv-ui/elements/loader/themes/solar/charcoal';
-dispatchEvent(new CustomEvent('ef.customStyles.define', { detail: { name: 'ef-autosuggest', styles: 'kbd{display:inline-flex;border-radius:2px;font-family:inherit;justify-content:center;align-items:center;vertical-align:middle;box-sizing:border-box;background-color:#fff;box-shadow:0 1px 3px rgba(0,0,0,.3);color:#151516;min-width:1.33em;height:1.33em;padding:0 .3em;font-size:.76em}mark{color:#ee7600;background-color:transparent}:host{min-height:0;max-height:350px;border:1px solid #4a4a52;margin-top:1px;background-color:#151516}:host([loading]){min-height:50px;min-width:150px;min-height:32px}:host [part=content]{overflow:auto;touch-action:manipulation;scrollbar-color:#666570 #2e2e33;background-color:#3c3c42}:host [part=more-results] mark{background-color:inherit;color:#ee7600;font-weight:400}:host [part=more-results-text]{font-size:.76em}:host [part=more-results-keys],:host [part=more-results] mark{color:#ee7600}: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{width:13px;height:13px}::-webkit-scrollbar-button{background:0 0/1px 2px no-repeat #2e2e33;height:12px;width:12px;display:block}::-webkit-scrollbar-thumb{background:#666570;border-radius:7px;border:2px solid #2e2e33}::-webkit-scrollbar-thumb:hover{background:#e2e2e2}::-webkit-scrollbar-thumb:active{background:#f93}::-webkit-scrollbar-track{background:#2e2e33}::-webkit-scrollbar-corner{background:#2e2e33}::-webkit-scrollbar-button:end:decrement,::-webkit-scrollbar-button:start:increment{display:none}::-webkit-scrollbar-button:horizontal{background-size:2px 1px}::-webkit-scrollbar-button:vertical:start:decrement{background-image:linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570);background-position:10px 6.5px,9px 5.5px,8px 4.5px,7px 3.5px,6px 2.5px,5px 3.5px,4px 4.5px,3px 5.5px,2px 6.5px}::-webkit-scrollbar-button:vertical:start:decrement:hover{background-image:linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2);background-position:10px 6.5px,9px 5.5px,8px 4.5px,7px 3.5px,6px 2.5px,5px 3.5px,4px 4.5px,3px 5.5px,2px 6.5px}::-webkit-scrollbar-button:vertical:start:decrement:active{background-image:linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93);background-position:10px 6.5px,9px 5.5px,8px 4.5px,7px 3.5px,6px 2.5px,5px 3.5px,4px 4.5px,3px 5.5px,2px 6.5px}::-webkit-scrollbar-button:vertical:end:increment{background-image:linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570);background-position:10px 3.5px,9px 4.5px,8px 5.5px,7px 6.5px,6px 7.5px,5px 6.5px,4px 5.5px,3px 4.5px,2px 3.5px}::-webkit-scrollbar-button:vertical:end:increment:hover{background-image:linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2);background-position:10px 3.5px,9px 4.5px,8px 5.5px,7px 6.5px,6px 7.5px,5px 6.5px,4px 5.5px,3px 4.5px,2px 3.5px}::-webkit-scrollbar-button:vertical:end:increment:active{background-image:linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93);background-position:10px 3.5px,9px 4.5px,8px 5.5px,7px 6.5px,6px 7.5px,5px 6.5px,4px 5.5px,3px 4.5px,2px 3.5px}::-webkit-scrollbar-button:horizontal:start:decrement{background-image:linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570);background-position:6.5px 10px,5.5px 9px,4.5px 8px,3.5px 7px,2.5px 6px,3.5px 5px,4.5px 4px,5.5px 3px,6.5px 2px}::-webkit-scrollbar-button:horizontal:start:decrement:hover{background-image:linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2);background-position:6.5px 10px,5.5px 9px,4.5px 8px,3.5px 7px,2.5px 6px,3.5px 5px,4.5px 4px,5.5px 3px,6.5px 2px}::-webkit-scrollbar-button:horizontal:start:decrement:active{background-image:linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93);background-position:6.5px 10px,5.5px 9px,4.5px 8px,3.5px 7px,2.5px 6px,3.5px 5px,4.5px 4px,5.5px 3px,6.5px 2px}::-webkit-scrollbar-button:horizontal:end:increment{background-image:linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570);background-position:3.5px 10px,4.5px 9px,5.5px 8px,6.5px 7px,7.5px 6px,6.5px 5px,5.5px 4px,4.5px 3px,3.5px 2px}::-webkit-scrollbar-button:horizontal:end:increment:hover{background-image:linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2);background-position:3.5px 10px,4.5px 9px,5.5px 8px,6.5px 7px,7.5px 6px,6.5px 5px,5.5px 4px,4.5px 3px,3.5px 2px}::-webkit-scrollbar-button:horizontal:end:increment:active{background-image:linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93);background-position:3.5px 10px,4.5px 9px,5.5px 8px,6.5px 7px,7.5px 6px,6.5px 5px,5.5px 4px,4.5px 3px,3.5px 2px}:host [part=more-results]{border-top:1px solid #4a4a52;height:32px;font-size:13px}:host [part=more-results],:host [part=more-results]:focus,:host [part=more-results]:hover,:host [part=more-results][highlighted],:host [part=more-results][selected]{color:#46a0f0}:host [part=more-results-keys],:host [part=more-results-keys] kbd{font-size:inherit;color:#46a0f0}:host [part=more-results-keys] kbd{font-size:inherit;background-color:transparent;box-shadow:none;border-radius:0;padding:0;line-height:13px;display:inline}:host [part=more-results-text]{font-size:inherit}:host [part=more-results] mark:after,:host [part=more-results] mark:before{color:#46a0f0;content:"\\""}' }}));
+dispatchEvent(new CustomEvent('ef.customStyles.define', { detail: { name: 'ef-autosuggest', styles: 'kbd{display:inline-flex;border-radius:2px;font-family:inherit;justify-content:center;align-items:center;vertical-align:middle;box-sizing:border-box;background-color:#fff;box-shadow:0 1px 3px rgba(0,0,0,.3);color:#151516;min-width:1.33em;height:1.33em;padding:0 .3em;font-size:.76em}mark{color:#ee7600;background-color:transparent}:host{min-height:0;max-height:350px;border:1px solid #4a4a52;margin-top:1px;background-color:#151516}:host([loading]){min-height:50px;min-width:150px;min-height:32px}:host [part=content]{overflow:auto;touch-action:manipulation;scrollbar-color:#666570 #2e2e33;background-color:#3c3c42}:host [part=more-results] mark{background-color:inherit;color:#ee7600;font-weight:400}:host [part=more-results-text]{font-size:.76em}:host [part=more-results-keys],:host [part=more-results] mark{color:#ee7600}: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{width:13px;height:13px}::-webkit-scrollbar-button{background:0 0/1px 2px no-repeat #2e2e33;height:12px;width:12px;display:block}::-webkit-scrollbar-thumb{background:#666570;border-radius:7px;border:2px solid #2e2e33}::-webkit-scrollbar-thumb:hover{background:#e2e2e2}::-webkit-scrollbar-thumb:active{background:#f93}::-webkit-scrollbar-track{background:#2e2e33}::-webkit-scrollbar-corner{background:#2e2e33}::-webkit-scrollbar-button:end:decrement,::-webkit-scrollbar-button:start:increment{display:none}::-webkit-scrollbar-button:horizontal{background-size:2px 1px}::-webkit-scrollbar-button:vertical:start:decrement{background-image:linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570);background-position:10px 6.5px,9px 5.5px,8px 4.5px,7px 3.5px,6px 2.5px,5px 3.5px,4px 4.5px,3px 5.5px,2px 6.5px}::-webkit-scrollbar-button:vertical:start:decrement:hover{background-image:linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2);background-position:10px 6.5px,9px 5.5px,8px 4.5px,7px 3.5px,6px 2.5px,5px 3.5px,4px 4.5px,3px 5.5px,2px 6.5px}::-webkit-scrollbar-button:vertical:start:decrement:active{background-image:linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93);background-position:10px 6.5px,9px 5.5px,8px 4.5px,7px 3.5px,6px 2.5px,5px 3.5px,4px 4.5px,3px 5.5px,2px 6.5px}::-webkit-scrollbar-button:vertical:end:increment{background-image:linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570);background-position:10px 3.5px,9px 4.5px,8px 5.5px,7px 6.5px,6px 7.5px,5px 6.5px,4px 5.5px,3px 4.5px,2px 3.5px}::-webkit-scrollbar-button:vertical:end:increment:hover{background-image:linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2);background-position:10px 3.5px,9px 4.5px,8px 5.5px,7px 6.5px,6px 7.5px,5px 6.5px,4px 5.5px,3px 4.5px,2px 3.5px}::-webkit-scrollbar-button:vertical:end:increment:active{background-image:linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93);background-position:10px 3.5px,9px 4.5px,8px 5.5px,7px 6.5px,6px 7.5px,5px 6.5px,4px 5.5px,3px 4.5px,2px 3.5px}::-webkit-scrollbar-button:horizontal:start:decrement{background-image:linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570);background-position:6.5px 10px,5.5px 9px,4.5px 8px,3.5px 7px,2.5px 6px,3.5px 5px,4.5px 4px,5.5px 3px,6.5px 2px}::-webkit-scrollbar-button:horizontal:start:decrement:hover{background-image:linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2);background-position:6.5px 10px,5.5px 9px,4.5px 8px,3.5px 7px,2.5px 6px,3.5px 5px,4.5px 4px,5.5px 3px,6.5px 2px}::-webkit-scrollbar-button:horizontal:start:decrement:active{background-image:linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93);background-position:6.5px 10px,5.5px 9px,4.5px 8px,3.5px 7px,2.5px 6px,3.5px 5px,4.5px 4px,5.5px 3px,6.5px 2px}::-webkit-scrollbar-button:horizontal:end:increment{background-image:linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570);background-position:3.5px 10px,4.5px 9px,5.5px 8px,6.5px 7px,7.5px 6px,6.5px 5px,5.5px 4px,4.5px 3px,3.5px 2px}::-webkit-scrollbar-button:horizontal:end:increment:hover{background-image:linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2);background-position:3.5px 10px,4.5px 9px,5.5px 8px,6.5px 7px,7.5px 6px,6.5px 5px,5.5px 4px,4.5px 3px,3.5px 2px}::-webkit-scrollbar-button:horizontal:end:increment:active{background-image:linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93);background-position:3.5px 10px,4.5px 9px,5.5px 8px,6.5px 7px,7.5px 6px,6.5px 5px,5.5px 4px,4.5px 3px,3.5px 2px}:host [part=more-results]{border-top:1px solid #4a4a52;height:32px;font-size:13px}:host [part=more-results],:host [part=more-results]:focus,:host [part=more-results]:hover,:host [part=more-results][highlighted],:host [part=more-results][selected]{color:#46a0f0}:host [part=more-results-keys],:host [part=more-results-keys] kbd{font-size:inherit;color:#46a0f0}:host [part=more-results-keys] kbd{font-size:inherit;background-color:transparent;box-shadow:none;border-radius:0;padding:0;line-height:13px;display:inline}:host [part=more-results-text]{font-size:inherit}:host [part=more-results] mark:after,:host [part=more-results] mark:before{color:#46a0f0;content:\'"\'}' }}));

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

@@ -1,4 +1,4 @@
 import '@refinitiv-ui/elements/item/themes/solar/pearl';
 import '@refinitiv-ui/elements/overlay/themes/solar/pearl';
 import '@refinitiv-ui/elements/loader/themes/solar/pearl';
-dispatchEvent(new CustomEvent('ef.customStyles.define', { detail: { name: 'ef-autosuggest', styles: 'kbd{display:inline-flex;border-radius:2px;font-family:inherit;justify-content:center;align-items:center;vertical-align:middle;box-sizing:border-box;background-color:#fff;box-shadow:0 1px 3px rgba(0,0,0,.3);color:#484848;min-width:1.33em;height:1.33em;padding:0 .3em;font-size:.76em}mark{color:#ee7600;background-color:transparent}:host{min-height:0;max-height:350px;border:1px solid #a9afba;margin-top:1px;background-color:#c2c2c2}:host([loading]){min-height:50px;min-width:150px;min-height:32px}:host [part=content]{overflow:auto;touch-action:manipulation;scrollbar-color:#8a8a96 #fff;background-color:#fafbfc}:host [part=more-results-text]{font-size:.76em}:host [part=more-results-keys],:host [part=more-results] mark{color:#484848}: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{width:13px;height:13px}::-webkit-scrollbar-button{background:0 0/1px 2px no-repeat #fff;height:12px;width:12px;display:block}::-webkit-scrollbar-thumb{background:#8a8a96;border-radius:7px;border:2px solid #fff}::-webkit-scrollbar-thumb:hover{background:#a9afba}::-webkit-scrollbar-thumb:active{background:#ee7600}::-webkit-scrollbar-track{background:#fff}::-webkit-scrollbar-corner{background:#fff}::-webkit-scrollbar-button:end:decrement,::-webkit-scrollbar-button:start:increment{display:none}::-webkit-scrollbar-button:horizontal{background-size:2px 1px}::-webkit-scrollbar-button:vertical:start:decrement{background-image:linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96);background-position:10px 6.5px,9px 5.5px,8px 4.5px,7px 3.5px,6px 2.5px,5px 3.5px,4px 4.5px,3px 5.5px,2px 6.5px}::-webkit-scrollbar-button:vertical:start:decrement:hover{background-image:linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba);background-position:10px 6.5px,9px 5.5px,8px 4.5px,7px 3.5px,6px 2.5px,5px 3.5px,4px 4.5px,3px 5.5px,2px 6.5px}::-webkit-scrollbar-button:vertical:start:decrement:active{background-image:linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600);background-position:10px 6.5px,9px 5.5px,8px 4.5px,7px 3.5px,6px 2.5px,5px 3.5px,4px 4.5px,3px 5.5px,2px 6.5px}::-webkit-scrollbar-button:vertical:end:increment{background-image:linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96);background-position:10px 3.5px,9px 4.5px,8px 5.5px,7px 6.5px,6px 7.5px,5px 6.5px,4px 5.5px,3px 4.5px,2px 3.5px}::-webkit-scrollbar-button:vertical:end:increment:hover{background-image:linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba);background-position:10px 3.5px,9px 4.5px,8px 5.5px,7px 6.5px,6px 7.5px,5px 6.5px,4px 5.5px,3px 4.5px,2px 3.5px}::-webkit-scrollbar-button:vertical:end:increment:active{background-image:linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600);background-position:10px 3.5px,9px 4.5px,8px 5.5px,7px 6.5px,6px 7.5px,5px 6.5px,4px 5.5px,3px 4.5px,2px 3.5px}::-webkit-scrollbar-button:horizontal:start:decrement{background-image:linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96);background-position:6.5px 10px,5.5px 9px,4.5px 8px,3.5px 7px,2.5px 6px,3.5px 5px,4.5px 4px,5.5px 3px,6.5px 2px}::-webkit-scrollbar-button:horizontal:start:decrement:hover{background-image:linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba);background-position:6.5px 10px,5.5px 9px,4.5px 8px,3.5px 7px,2.5px 6px,3.5px 5px,4.5px 4px,5.5px 3px,6.5px 2px}::-webkit-scrollbar-button:horizontal:start:decrement:active{background-image:linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600);background-position:6.5px 10px,5.5px 9px,4.5px 8px,3.5px 7px,2.5px 6px,3.5px 5px,4.5px 4px,5.5px 3px,6.5px 2px}::-webkit-scrollbar-button:horizontal:end:increment{background-image:linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96);background-position:3.5px 10px,4.5px 9px,5.5px 8px,6.5px 7px,7.5px 6px,6.5px 5px,5.5px 4px,4.5px 3px,3.5px 2px}::-webkit-scrollbar-button:horizontal:end:increment:hover{background-image:linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba);background-position:3.5px 10px,4.5px 9px,5.5px 8px,6.5px 7px,7.5px 6px,6.5px 5px,5.5px 4px,4.5px 3px,3.5px 2px}::-webkit-scrollbar-button:horizontal:end:increment:active{background-image:linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600);background-position:3.5px 10px,4.5px 9px,5.5px 8px,6.5px 7px,7.5px 6px,6.5px 5px,5.5px 4px,4.5px 3px,3.5px 2px}:host [part=more-results]{border-top:1px solid #a9afba;height:32px;font-size:13px}:host [part=more-results],:host [part=more-results]:focus,:host [part=more-results]:hover,:host [part=more-results][highlighted],:host [part=more-results][selected]{color:#0080f0}:host [part=more-results-keys],:host [part=more-results-keys] kbd{font-size:inherit;color:#0080f0}:host [part=more-results-keys] kbd{font-size:inherit;background-color:transparent;box-shadow:none;border-radius:0;padding:0;line-height:13px;display:inline}:host [part=more-results-text]{font-size:inherit}:host [part=more-results] mark{background-color:inherit;color:#ee7600;font-weight:400}:host [part=more-results] mark:after,:host [part=more-results] mark:before{color:#0080f0;content:"\\""}' }}));
+dispatchEvent(new CustomEvent('ef.customStyles.define', { detail: { name: 'ef-autosuggest', styles: 'kbd{display:inline-flex;border-radius:2px;font-family:inherit;justify-content:center;align-items:center;vertical-align:middle;box-sizing:border-box;background-color:#fff;box-shadow:0 1px 3px rgba(0,0,0,.3);color:#484848;min-width:1.33em;height:1.33em;padding:0 .3em;font-size:.76em}mark{color:#ee7600;background-color:transparent}:host{min-height:0;max-height:350px;border:1px solid #a9afba;margin-top:1px;background-color:#c2c2c2}:host([loading]){min-height:50px;min-width:150px;min-height:32px}:host [part=content]{overflow:auto;touch-action:manipulation;scrollbar-color:#8a8a96 #fff;background-color:#fafbfc}:host [part=more-results-text]{font-size:.76em}:host [part=more-results-keys],:host [part=more-results] mark{color:#484848}: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{width:13px;height:13px}::-webkit-scrollbar-button{background:0 0/1px 2px no-repeat #fff;height:12px;width:12px;display:block}::-webkit-scrollbar-thumb{background:#8a8a96;border-radius:7px;border:2px solid #fff}::-webkit-scrollbar-thumb:hover{background:#a9afba}::-webkit-scrollbar-thumb:active{background:#ee7600}::-webkit-scrollbar-track{background:#fff}::-webkit-scrollbar-corner{background:#fff}::-webkit-scrollbar-button:end:decrement,::-webkit-scrollbar-button:start:increment{display:none}::-webkit-scrollbar-button:horizontal{background-size:2px 1px}::-webkit-scrollbar-button:vertical:start:decrement{background-image:linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96);background-position:10px 6.5px,9px 5.5px,8px 4.5px,7px 3.5px,6px 2.5px,5px 3.5px,4px 4.5px,3px 5.5px,2px 6.5px}::-webkit-scrollbar-button:vertical:start:decrement:hover{background-image:linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba);background-position:10px 6.5px,9px 5.5px,8px 4.5px,7px 3.5px,6px 2.5px,5px 3.5px,4px 4.5px,3px 5.5px,2px 6.5px}::-webkit-scrollbar-button:vertical:start:decrement:active{background-image:linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600);background-position:10px 6.5px,9px 5.5px,8px 4.5px,7px 3.5px,6px 2.5px,5px 3.5px,4px 4.5px,3px 5.5px,2px 6.5px}::-webkit-scrollbar-button:vertical:end:increment{background-image:linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96);background-position:10px 3.5px,9px 4.5px,8px 5.5px,7px 6.5px,6px 7.5px,5px 6.5px,4px 5.5px,3px 4.5px,2px 3.5px}::-webkit-scrollbar-button:vertical:end:increment:hover{background-image:linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba);background-position:10px 3.5px,9px 4.5px,8px 5.5px,7px 6.5px,6px 7.5px,5px 6.5px,4px 5.5px,3px 4.5px,2px 3.5px}::-webkit-scrollbar-button:vertical:end:increment:active{background-image:linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600);background-position:10px 3.5px,9px 4.5px,8px 5.5px,7px 6.5px,6px 7.5px,5px 6.5px,4px 5.5px,3px 4.5px,2px 3.5px}::-webkit-scrollbar-button:horizontal:start:decrement{background-image:linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96);background-position:6.5px 10px,5.5px 9px,4.5px 8px,3.5px 7px,2.5px 6px,3.5px 5px,4.5px 4px,5.5px 3px,6.5px 2px}::-webkit-scrollbar-button:horizontal:start:decrement:hover{background-image:linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba);background-position:6.5px 10px,5.5px 9px,4.5px 8px,3.5px 7px,2.5px 6px,3.5px 5px,4.5px 4px,5.5px 3px,6.5px 2px}::-webkit-scrollbar-button:horizontal:start:decrement:active{background-image:linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600);background-position:6.5px 10px,5.5px 9px,4.5px 8px,3.5px 7px,2.5px 6px,3.5px 5px,4.5px 4px,5.5px 3px,6.5px 2px}::-webkit-scrollbar-button:horizontal:end:increment{background-image:linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96);background-position:3.5px 10px,4.5px 9px,5.5px 8px,6.5px 7px,7.5px 6px,6.5px 5px,5.5px 4px,4.5px 3px,3.5px 2px}::-webkit-scrollbar-button:horizontal:end:increment:hover{background-image:linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba);background-position:3.5px 10px,4.5px 9px,5.5px 8px,6.5px 7px,7.5px 6px,6.5px 5px,5.5px 4px,4.5px 3px,3.5px 2px}::-webkit-scrollbar-button:horizontal:end:increment:active{background-image:linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600);background-position:3.5px 10px,4.5px 9px,5.5px 8px,6.5px 7px,7.5px 6px,6.5px 5px,5.5px 4px,4.5px 3px,3.5px 2px}:host [part=more-results]{border-top:1px solid #a9afba;height:32px;font-size:13px}:host [part=more-results],:host [part=more-results]:focus,:host [part=more-results]:hover,:host [part=more-results][highlighted],:host [part=more-results][selected]{color:#0080f0}:host [part=more-results-keys],:host [part=more-results-keys] kbd{font-size:inherit;color:#0080f0}:host [part=more-results-keys] kbd{font-size:inherit;background-color:transparent;box-shadow:none;border-radius:0;padding:0;line-height:13px;display:inline}:host [part=more-results-text]{font-size:inherit}:host [part=more-results] mark{background-color:inherit;color:#ee7600;font-weight:400}:host [part=more-results] mark:after,:host [part=more-results] mark:before{color:#0080f0;content:\'"\'}' }}));

package/lib/button/index.js

@@ -1,12 +1,12 @@
 import { __decorate } from "tslib";
 import { ControlElement, 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 { VERSION } from '../version.js';
-import { registerOverflowTooltip } from '../tooltip/index.js';
+import { query } from '@refinitiv-ui/core/decorators/query.js';
 import { isElementOverflown } from '@refinitiv-ui/utils/element.js';
 import '../icon/index.js';
+import { registerOverflowTooltip } from '../tooltip/index.js';
+import { VERSION } from '../version.js';
 /**
  * Use button for actions in forms, dialogs,
  * and more with support for different states and styles.
@@ -66,7 +66,8 @@ let Button = class Button extends ControlElement {
      */
     willUpdate(changedProperties) {
         super.willUpdate(changedProperties);
-        if (changedProperties.has('active') && this.toggles || changedProperties.has('toggles') && this.toggles) {
+        if ((changedProperties.has('active') && this.toggles) ||
+            (changedProperties.has('toggles') && this.toggles)) {
             if (this.getAttribute('role') === 'radio') {
                 this.setAttribute('aria-checked', String(this.active));
             }
@@ -147,9 +148,7 @@ let Button = class Button extends ControlElement {
      * @return {TemplateResult | null}  Render template
      */
     get iconTemplate() {
-        return this.icon
-            ? html `<ef-icon part="icon" icon="${this.icon}" id="icon"></ef-icon>`
-            : null;
+        return this.icon ? html `<ef-icon part="icon" icon="${this.icon}" id="icon"></ef-icon>` : null;
     }
     /**
      * Returns hover icon template if exists
@@ -157,9 +156,7 @@ let Button = class Button extends ControlElement {
      */
     get hoverIconTemplate() {
         const hoverIcon = this.hoverIcon || this.icon;
-        return hoverIcon
-            ? html `<ef-icon part="icon" icon="${hoverIcon}" id="hover-icon"></ef-icon>`
-            : null;
+        return hoverIcon ? html `<ef-icon part="icon" icon="${hoverIcon}" id="hover-icon"></ef-icon>` : null;
     }
     /**
      * A `TemplateResult` that will be used

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

@@ -1,5 +1,5 @@
 import { JSXInterface } from '../jsx';
-import { BasicElement, TemplateResult, CSSResultGroup, PropertyValues } from '@refinitiv-ui/core';
+import { BasicElement, CSSResultGroup, PropertyValues, TemplateResult } from '@refinitiv-ui/core';
 /**
  * Used to display multiple buttons to create a list of commands bar.
  */